/* =====================================================================
   ESA Letter US — Design System
   esaletterus.org
   ===================================================================== */

:root {
  --navy: #1F3B73;
  --navy-700: #16305E;
  --navy-900: #0F1F3D;
  --navy-100: #E6ECF7;
  --red: #E23744;
  --red-600: #C42B37;
  --red-100: #FDE8EA;
  /* Accent stays in the navy/red family. These keep their original variable
     names so every existing rule picks the new colour up, but no green is used
     anywhere on the site. */
  --teal: #2E6FB7;
  --teal-700: #1F4E86;
  --teal-100: #E4EDF8;
  --gold: #F5B301;
  --bg: #F6F8FB;
  --surface: #FFFFFF;
  --line: #E3E8EF;
  --text: #1A2233;
  --muted: #5B6676;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(15, 31, 61, 0.08);
  --shadow-lg: 0 18px 50px rgba(15, 31, 61, 0.14);
  --container: 1200px;
  --gutter: 24px;
  --header-h: 72px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Root size drives every rem in the sheet, so raising it scales type, spacing
   and components together rather than only the paragraphs. 112.5% = 18px.
   Every font-size in this sheet is rem or em based, so all of them scale from
   here and nothing is left behind at a fixed pixel size. */
/* Standard 16px base. It was 112.5% (18px) to suit browsing at 80% zoom, which
   made everything about 12% oversized at normal zoom (Oct 2026 comparison with
   signmyesa.com and mypetesa.com: their body text is 14-15px, ours was 20px). */
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* long emails and legal citations wrap on phones */
}
img, svg { display: block; max-width: 100%; }
/* the hidden attribute must win over component display rules (.field is a
   grid, .wizard-steps li is flex); the assessment hides questions with it */
[hidden] { display: none !important; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6em; color: var(--navy-900); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 3.4vw + 1rem, 3rem); }
h2 { font-size: clamp(1.6rem, 2.2vw + 1rem, 2.25rem); }
h3 { font-size: 1.15rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #7FB3FF; outline-offset: 2px; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
strong { font-weight: 700; }
small { font-size: 0.875rem; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 820px; }
.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-sm { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.section-tint { background: var(--bg); }
.section-navy { background: var(--navy); color: #fff; }
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }
/* Plain links go white on navy, but buttons must keep their own colours or a
   white button ends up with white text on it. */
.section-navy a:not(.btn) { color: #fff; }
.section-navy .btn-light, .page-hero .btn-light, .contact-band .btn-light { color: var(--navy); }
.section-navy .btn-outline, .page-hero .btn-outline, .contact-band .btn-outline { color: #fff; border-color: rgba(255,255,255,0.65); }
.section-navy .btn-outline:hover, .page-hero .btn-outline:hover, .contact-band .btn-outline:hover { background: rgba(255,255,255,0.12); }
.section-head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
.section-navy .section-head p { color: rgba(255,255,255,0.8); }
/* --muted is a dark grey, so anything inheriting it inside a navy band would be
   near invisible. Force light text for copy on all dark backgrounds. */
.section-navy p, .section-navy li, .section-navy .muted, .section-navy .help, .section-navy .lead,
.page-hero p, .page-hero li, .page-hero .muted, .page-hero .help, .page-hero .lead,
.contact-band p, .contact-band li, .contact-band .muted, .contact-band .help, .contact-band .lead,
.cta-box p, .cta-box li, .cta-box .muted, .cta-box .help { color: rgba(255,255,255,0.88); }
.section-navy strong, .page-hero strong, .contact-band strong, .cta-box strong { color: #fff; }
/* Text selection stays legible on dark panels */
.section-navy ::selection, .page-hero ::selection, .contact-band ::selection, .cta-box ::selection { background: #fff; color: var(--navy-900); }
.eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.75rem; }
.section-navy .eyebrow { color: #A8C8EE; }
.lead { font-size: 1.125rem; color: var(--muted); }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mb-5 { margin-bottom: 3rem; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 1.5rem; }
/* minmax(0, 1fr): a column may shrink below its widest unbreakable item (a long
   button or email address); plain 1fr made whole pages wider than a phone. */
.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; background: var(--navy); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm); z-index: 1000; }
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.4rem; border-radius: var(--radius-sm); border: 2px solid transparent;
  font-weight: 700; font-size: 0.975rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(226,55,68,0.3); }
.btn-primary:hover { background: var(--red-600); color: #fff; }
.btn-secondary { background: var(--navy); color: #fff; }
.btn-secondary:hover { background: var(--navy-700); color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy-100); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--navy-100); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-700); color: #fff; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.875rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.55; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn-row.center { justify-content: center; }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--red); color: #fff; font-size: 0.85rem; font-weight: 600; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.topbar a { color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar svg { width: 15px; height: 15px; }
/* On phones the claim and the phone link stack, centred, instead of the phone
   link squeezing the claim into a narrow four-line column. */
@media (max-width: 639px) {
  .topbar .container { flex-direction: column; justify-content: center; gap: 0.15rem; padding-top: 0.4rem; padding-bottom: 0.4rem; text-align: center; }
  .topbar .topbar-claim { font-size: 0.78rem; line-height: 1.35; }
  .topbar a { white-space: nowrap; font-size: 0.8rem; }
  .btn { white-space: normal; text-align: center; }
}

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; color: var(--navy-900); font-size: 1.15rem; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img, .brand svg { width: 40px; height: 40px; }
.brand .brand-tag { display: block; font-size: 0.68rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a { padding: 0.55rem 0.8rem; border-radius: 8px; font-weight: 600; color: var(--text); font-size: 0.95rem; }
.nav a:hover { background: var(--bg); text-decoration: none; }
.nav a.is-active, .nav a[aria-current="page"] { color: var(--navy); background: var(--navy-100); }
.nav .btn { margin-left: 0.5rem; }
.nav .btn-primary, .nav .btn-primary:hover { color: #fff; } /* .nav a would otherwise make it dark on red */
.nav .btn-outline { color: var(--navy); border-color: var(--navy); background: #fff; }
.nav .btn-outline:hover { background: var(--navy-100); }
.nav .btn + .btn { margin-left: 0.4rem; }
.nav .btn { white-space: nowrap; }
/* With the clinician button the full menu needs more room than the 1200px
   content width, so the header runs wider and a little tighter on laptops;
   below 1240px it collapses to the menu button (see the 1239px blocks). */
.site-header .container { max-width: 1340px; }
@media (min-width: 1240px) {
  .nav { gap: 0.1rem; }
  .nav a { padding: 0.5rem 0.55rem; font-size: 0.9rem; white-space: nowrap; }
  .nav .btn { padding: 0.6rem 0.85rem; }
}
@media (min-width: 1240px) and (max-width: 1365px) {
  .nav a { padding: 0.45rem 0.42rem; font-size: 0.85rem; }
  .nav .btn { padding: 0.55rem 0.7rem; margin-left: 0.3rem; }
  .nav-caret { width: 12px; height: 12px; }
}

/* ---------- Nav dropdown ---------- */
.nav-item { position: relative; display: inline-flex; }
.nav-trigger { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 130;
  min-width: 320px; padding: 0.4rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.nav-item:hover > .dropdown, .nav-item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* keeps the pointer from falling through the gap between trigger and panel */
.nav-item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
.dropdown a {
  display: block; padding: 0.6rem 0.75rem; border-radius: 8px;
  font-size: 0.9rem; font-weight: 600; line-height: 1.35; color: var(--text); white-space: normal;
}
.dropdown a:hover, .dropdown a:focus-visible { background: var(--navy-100); color: var(--navy-900); text-decoration: none; }
.dropdown a strong { color: var(--navy); }
.dropdown a + a { margin-top: 1px; }

/* Guides mega menu: four columns of links, each with a one-line description */
.mega-head { margin: 0 0 0.3rem; padding: 0 0.75rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.dropdown.mega a { padding: 0.45rem 0.75rem; font-weight: 700; font-size: 0.88rem; color: var(--navy-900); }
.dropdown.mega a span { display: block; margin-top: 1px; font-weight: 500; font-size: 0.78rem; line-height: 1.3; color: var(--muted); }
@media (min-width: 1240px) {
  /* the panel spans the header, centred under it, instead of hanging off the Guides link */
  .site-header .container { position: relative; }
  .nav-item.has-mega { position: static; }
  .nav-item.has-mega::after { display: none; }
  .nav-item.has-mega > .nav-trigger { position: relative; }
  .nav-item.has-mega > .nav-trigger::after { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: 28px; }
  .dropdown.mega { left: 50%; top: calc(100% - 4px); width: min(1100px, calc(100vw - 48px)); padding: 1.1rem 0.9rem 0.9rem; transform: translate(-50%, -4px); }
  .nav-item.has-mega:hover > .dropdown.mega, .nav-item.has-mega:focus-within > .dropdown.mega { transform: translate(-50%, 0); }
  .mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 0.75rem; }
  .mega-col { border-left: 1px solid var(--line); padding-left: 0.25rem; }
  .mega-col:first-child { border-left: 0; padding-left: 0; }
}

@media (max-width: 1239px) {
  /* In the stacked mobile menu each section starts collapsed; tapping its name
     opens the sub-links underneath (main.js toggles .is-expanded). */
  .nav-item { display: block; width: 100%; }
  .nav-trigger { width: 100%; justify-content: space-between; }
  .nav-caret { display: inline-block; width: 18px; height: 18px; }
  .nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: none; }
  .nav-item.is-expanded .nav-caret { transform: rotate(180deg); }
  .nav-item::after { display: none; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 0.5rem 0.9rem; margin: 0;
    border: 0; border-left: 2px solid var(--line); border-radius: 0; box-shadow: none;
    display: none;
  }
  .nav-item.is-expanded > .dropdown { display: block; }
  .nav-item.is-expanded > .nav-trigger { color: var(--navy); }
  .dropdown a { font-size: 0.88rem; padding: 0.5rem 0.6rem; }
  .mega-head { margin: 0.7rem 0 0.15rem; padding: 0 0.6rem; }
  .mega-col:first-child .mega-head { margin-top: 0.2rem; }
  .dropdown.mega a span { display: none; }
}
.nav-toggle { display: none; background: none; border: 2px solid var(--line); border-radius: 8px; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 1239px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 0.75rem var(--gutter) 1.25rem; display: none; }
  .nav.is-open { display: flex; }
  /* The open menu is taller than a phone screen. It scrolls inside itself
     (main.js sets the exact height left below the header) instead of the
     page scrolling behind it while the bottom links stay out of reach. */
  .nav { max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  html.menu-open { overflow: hidden; }
  .nav a { padding: 0.8rem 0.75rem; }
  .nav .btn { margin: 0.5rem 0 0; }
  .nav .btn + .btn { margin-left: 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #F6F8FB 0%, #EEF3FA 55%, #E4EDF8 100%); padding: clamp(1rem, 1.8vw, 1.5rem) 0 clamp(2rem, 4vw, 3rem); }
.hero::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,158,138,0.18), transparent 70%); pointer-events: none; }
.hero .container { position: relative; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 1fr; } }
.hero h1 { margin-bottom: 1rem; }
.hero .lead { max-width: 620px; }
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; }
.hero-points { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.95rem; font-weight: 500; }
.hero-points li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-points svg { width: 18px; height: 18px; color: var(--teal); }

.page-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 60%, #163A5C 100%); color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.page-hero h1 { color: #fff; margin-bottom: 0.5rem; }
.page-hero .lead { color: rgba(255,255,255,0.82); }
.page-hero .eyebrow { color: #A8C8EE; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.breadcrumbs a { color: rgba(255,255,255,0.85); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }

/* ---------- Service cards (hero product cards) ---------- */
.service-cards { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .service-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-cards { grid-template-columns: repeat(4, 1fr); } }
.service-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; color: var(--text); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.service-card-art { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.service-card-art svg { width: 100%; height: 100%; }
.art-blue { background: linear-gradient(145deg, #E6ECF7, #C9D7F0); }
.art-teal { background: linear-gradient(145deg, #E4EDF8, #BBD4EE); }
.art-warm { background: linear-gradient(145deg, #FFF1E6, #FFD9BF); }
.art-rose { background: linear-gradient(145deg, #FDE8EA, #F8C4C9); }
.service-card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.service-card-body h3 { margin: 0; font-size: 1.1rem; }
.service-card-body p { margin: 0; color: var(--muted); font-size: 0.93rem; flex: 1; }
.service-card-cta { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--red); margin-top: 0.5rem; }
.service-card-cta svg { width: 16px; height: 16px; }
.service-card.is-primary { border-color: var(--red); }
.service-card .pill { position: absolute; }
.service-card-art { position: relative; }
.service-card-art .pill { top: 0.75rem; left: 0.75rem; }

/* ---------- Trust strip ---------- */
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.trust-strip .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; padding-top: 1rem; padding-bottom: 1rem; }
/* No flex gap: the markup is icon, <strong>, then "&nbsp;rest", and a gap
   would add itself on top of that space. Only the icon gets spacing. */
.trust-item { display: inline-flex; align-items: center; font-weight: 600; color: var(--muted); font-size: 0.9rem; }
.trust-item svg { width: 22px; height: 22px; color: var(--teal); flex: none; margin-right: 0.5rem; }
.trust-item strong { color: var(--navy-900); }

/* ---------- Features ---------- */
.features { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Card counts that don't divide by four get their own layout, so no card is
   left alone on a last row: six cards as 3 + 3, five cards in one row (and
   3 + 2, centred, on tablets). */
@media (min-width: 1024px) { .features.features-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1099px) {
  .features.features-5 { display: flex; flex-wrap: wrap; justify-content: center; }
  .features.features-5 .feature { flex: 0 1 calc((100% - 3rem) / 3); min-width: 0; }
}
@media (min-width: 1100px) {
  .features.features-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
  .features.features-5 .feature { padding: 1.25rem; }
}
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.feature-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--teal-100); color: var(--teal); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.feature-icon.navy { background: var(--navy-100); color: var(--navy); }
.feature-icon.red { background: var(--red-100); color: var(--red); }
.feature-icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.5rem 1.5rem; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.05rem; }
.step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.step p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.steps-vertical { grid-template-columns: 1fr; }
/* Two per row, with a lone final item centred under them:
   1 2 / 3 4 / 5 */
@media (min-width: 768px) {
  .steps.steps-pair { grid-template-columns: repeat(2, 1fr); }
  .steps.steps-pair > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 0.75rem); margin-inline: auto; }
}
.steps-vertical .step { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.steps-vertical .step-num { margin: 0; }

/* ---------- Split (text + media) ---------- */
.split { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split.reverse > :first-child { order: 2; } }
.split-media { border-radius: var(--radius); overflow: hidden; background: linear-gradient(145deg, #E6ECF7, #DDE9F5); padding: 2rem; display: flex; align-items: center; justify-content: center; min-height: 260px; }
.split-media svg { width: 100%; max-width: 420px; height: auto; }
.checklist { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.7rem; }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.15rem; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9E8A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
.checklist.cross li::before { background: var(--red-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E23744' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; }

/* ---------- Compare table ---------- */
.compare-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.compare-table th, .compare-table td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.95rem; }
.compare-table thead th { background: var(--navy); color: #fff; font-weight: 700; }
.compare-table tbody th { font-weight: 700; color: var(--navy-900); background: var(--bg); width: 22%; }
.compare-table tr:last-child td, .compare-table tr:last-child th { border-bottom: 0; }
.compare-table .yes { color: var(--teal-700); font-weight: 700; }
.compare-table .no { color: var(--red-600); font-weight: 700; }
.compare-table tfoot td { background: var(--bg); }
@media (max-width: 767px) {
  .compare-table thead { display: none; }
  .compare-table tbody th, .compare-table td { display: block; width: 100%; }
  .compare-table tbody th { padding-bottom: 0.4rem; }
  .compare-table td { padding-top: 0.35rem; padding-bottom: 0.6rem; border-bottom: 0; }
  .compare-table td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .compare-table tr { display: block; border-bottom: 1px solid var(--line); }
  .compare-table tfoot td { display: block; }
}

/* ---------- Pricing ---------- */
.pricing-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
/* Four plans across a 1200px container leaves each card ~265px wide, which turns
   them into thin towers. Two per row gives the checklists room to breathe. */
.pricing-grid { align-items: stretch; }
.pricing-grid .pricing-card { height: 100%; }
@media (min-width: 1100px) { .pricing-grid { gap: 1.75rem; } }
/* All four letters side by side on wide screens, so they compare at a glance. */
@media (min-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
  .pricing-grid .pricing-card { padding: 1.4rem 1.25rem; }
}
.pricing-card.is-featured { border: 2px solid var(--red); position: relative; }
.pricing-card.is-featured::before { content: "Most popular"; position: absolute; top: -13px; left: 1.5rem; background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
.price { font-size: 2.4rem; font-weight: 800; color: var(--navy-900); line-height: 1; margin: 0.5rem 0; }
.price small { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
/* The list takes the spare height (so buttons line up) but its items stay
   packed at the top instead of spreading out in a shorter card. */
.pricing-card .checklist { flex: 1; align-content: start; }
/* small add-on line under the ESA price */
.pricing-card .extra-pet { display: inline-block; align-self: flex-start; margin: -0.15rem 0 0.6rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--teal-100); color: #146B5E; font-size: 0.82rem; font-weight: 700; }
.pricing-card .btn { margin-top: auto; }

/* ---------- Accordion ---------- */
.accordion { display: grid; gap: 0.75rem; }
.accordion-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.accordion-item summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.25rem; font-weight: 700; position: relative; color: var(--navy-900); }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; }
.accordion-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.accordion-item[open] summary { border-bottom: 1px solid var(--line); background: var(--bg); }
.accordion-body { padding: 1rem 1.25rem 1.25rem; color: var(--text); }
.accordion-body p:last-child { margin-bottom: 0; }

/* ---------- Testimonials ---------- */
.testimonials { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.testimonial blockquote { margin: 0; font-size: 0.98rem; flex: 1; }
.testimonial footer { font-size: 0.875rem; color: var(--muted); font-weight: 600; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 18px; height: 18px; }
.rating-summary { display: inline-flex; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.9rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1rem; }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } .form-grid .span-2 { grid-column: span 2; } }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 600; font-size: 0.9rem; color: var(--navy-900); }
.field .req { color: var(--red); }
.input, .select, .textarea { width: 100%; padding: 0.75rem 0.9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(31,59,115,0.12); outline: none; }
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6676' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 18px; padding-right: 2.5rem; }
.checkbox { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--muted); }
.checkbox input { width: 18px; height: 18px; margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--navy); }
.help { font-size: 0.82rem; color: var(--muted); }
/* assessment questions: one fieldset per question, answers as tappable rows */
fieldset.q { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.field.q { margin-bottom: 1.6rem; }
.q legend, .q > label { font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--navy-900); margin-bottom: 0.35rem; padding: 0; }
.q .help { margin: 0 0 0.6rem; }
.q .notice { margin: 0.2rem 0 0.6rem; }
.choice-list { display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .choice-list.choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0.9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-size: 0.95rem; line-height: 1.4; color: var(--text); transition: border-color 0.15s ease, background 0.15s ease; }
.choice:hover { border-color: #B9C7DF; }
.choice input { width: 18px; height: 18px; margin-top: 0.12rem; flex-shrink: 0; accent-color: var(--navy); }
.choice:has(input:checked) { border-color: var(--navy); background: var(--navy-100); }
.choice:focus-within { box-shadow: 0 0 0 3px var(--navy-100); }
.field.q.has-error .choice { border-color: #F2B8BE; }
.pet-block + .pet-block { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.pet-title { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.75rem; }
.error { color: var(--red-600); font-size: 0.82rem; font-weight: 600; display: none; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--red); }
.field.has-error .error { display: block; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-lg); }
.form-card h2, .form-card h3 { margin-bottom: 0.35rem; }
.form-success { display: none; background: var(--teal-100); border: 1px solid #BBD4EE; color: var(--teal-700); border-radius: var(--radius-sm); padding: 1rem 1.25rem; font-weight: 600; }
.form-success.is-visible { display: block; }
.consent { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
/* A sticky element taller than the viewport pins its top and leaves the rest
   hanging below the fold, unreachable until the column ends. Cap it to the
   visible area and let it scroll internally instead. Below the two-column
   breakpoint it just flows with the page. */
.sticky { position: sticky; top: calc(var(--header-h) + 1rem); }
/* A side column beside a form runs the full height of the row, so its sticky
   card can travel down with the form instead of stopping at its own height. */
.split > aside { align-self: stretch; }
@media (max-width: 899px) { .sticky { position: static; max-height: none; overflow: visible; } }
@media (min-width: 900px) {
  .sticky {
    max-height: calc(100vh - var(--header-h) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------- Wizard ---------- */
/* Stepper: numbered circles joined by a track, rather than a grid of boxes that
   wraps onto two cramped rows. */
.wizard-steps { display: flex; gap: 0; margin: 0 0 2rem; padding: 0; list-style: none; counter-reset: wiz; }
.wizard-steps li {
  counter-increment: wiz; position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted); text-align: center; background: none; border: 0; padding: 0;
}
.wizard-steps li::before {
  content: counter(wiz); position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
}
/* connector track between circles */
.wizard-steps li::after {
  content: ""; position: absolute; top: 16px; left: 50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.wizard-steps li:last-child::after { display: none; }
.wizard-steps li.is-current { color: var(--navy-900); }
.wizard-steps li.is-current::before { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 4px var(--navy-100); }
.wizard-steps li.is-done { color: var(--navy); }
.wizard-steps li.is-done::before { content: "✓"; background: var(--navy); border-color: var(--navy); color: #fff; }
.wizard-steps li.is-done::after { background: var(--navy); }
@media (max-width: 639px) { .wizard-steps li span { display: none; } .wizard-steps { margin-bottom: 1.5rem; } }

/* The wizard moves focus to each step heading for screen readers; that must not
   paint a focus ring around the title. */
.wizard-panel h2[tabindex], .wizard-panel h3[tabindex] { outline: none; }
.wizard-panel > h2:first-child { margin-top: 0; font-size: 1.45rem; }
.wizard-panel > h2 + p { margin-top: -0.35rem; }
.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; }
.wizard-actions { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.order-summary { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.25rem; }
.order-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; margin: 0; }
.order-summary dt { color: var(--muted); }
.order-summary dd { margin: 0; font-weight: 700; text-align: right; }
.order-summary .total { border-top: 1px solid var(--line); padding-top: 0.5rem; margin-top: 0.25rem; font-size: 1.1rem; }
.upload { border: 2px dashed var(--line); border-radius: var(--radius-sm); padding: 1.25rem; text-align: center; color: var(--muted); font-size: 0.9rem; background: var(--bg); }
.upload input { display: block; margin: 0.5rem auto 0; }
.addon {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.15rem 1.25rem; border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.addon:hover { border-color: #B9C7DF; background: #FBFCFE; }
.addon:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px var(--navy-100); }
/* selected state */
.addon:has(input:checked) { border-color: var(--navy); background: var(--navy-100); box-shadow: var(--shadow); }
.addon input { margin-top: 0.2rem; accent-color: var(--navy); width: 20px; height: 20px; flex-shrink: 0; }
.addon-body { flex: 1; min-width: 0; }
.addon-body strong { display: block; font-size: 1.02rem; color: var(--navy-900); margin-bottom: 0.15rem; }
.addon-body span { font-size: 0.9rem; color: var(--muted); line-height: 1.5; display: block; }
.addon-price { font-weight: 800; font-size: 1.15rem; color: var(--navy-900); white-space: nowrap; }

/* Plan chooser: cards side by side, filling down, like the pricing grid.
   Each card puts the radio, title and price on one line with the description
   beneath, so it stays readable at half-column width. */
.addon-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.addon-grid .addon {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "radio title" "desc desc" "price price";
  gap: 0.45rem 0.7rem;
  align-items: start;
  align-content: start;
}
.addon-grid .addon input { grid-area: radio; margin: 0.1rem 0 0; }
.addon-grid .addon-body { display: contents; }
.addon-grid .addon-body strong { grid-area: title; margin: 0; font-size: 1rem; line-height: 1.3; }
.addon-grid .addon-body span { grid-area: desc; font-size: 0.86rem; }
/* price on its own line, so the title gets the full card width instead of
   wrapping into a narrow column beside it */
.addon-grid .addon-price {
  grid-area: price; font-size: 1.3rem; align-self: end;
  padding-top: 0.55rem; margin-top: 0.15rem; border-top: 1px solid var(--line); width: 100%;
}
.addon-grid .addon:has(input:checked) .addon-price { border-top-color: #C2CFE6; }

/* ---------- Badges / pills / notices ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--navy-100); color: var(--navy); font-weight: 700; font-size: 0.78rem; padding: 0.3rem 0.65rem; border-radius: 999px; }
.badge.teal { background: var(--teal-100); color: var(--teal-700); }
.badge.red { background: var(--red-100); color: var(--red-600); }
.pill { display: inline-block; background: var(--red); color: #fff; font-weight: 700; font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
.pill.navy { background: var(--navy); }
.pill.teal { background: var(--teal); }
.notice { border-radius: var(--radius-sm); padding: 1rem 1.25rem; border: 1px solid; font-size: 0.95rem; }
.notice p:last-child { margin: 0; }
.notice-info { background: var(--navy-100); border-color: #C9D7F0; color: var(--navy-900); }
.notice-warn { background: #FFF6E5; border-color: #F5D58A; color: #6B4A00; }
.notice-success { background: var(--teal-100); border-color: #BBD4EE; color: var(--teal-700); }

/* ---------- Guide links / cards ---------- */
.guide-links { display: grid; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .guide-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .guide-links { grid-template-columns: repeat(3, 1fr); } }
.guide-links a { display: flex; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-weight: 600; color: var(--navy-900); }
.guide-links a:hover { border-color: var(--navy); text-decoration: none; }
.guide-links svg { width: 20px; height: 20px; color: var(--teal); flex-shrink: 0; }
/* A card whose link grid stretches to the card's full height (the homepage
   "Popular states" card sits beside a taller card and would otherwise leave
   an empty band underneath). */
.card-fill { display: flex; flex-direction: column; }
.card-fill .state-links { flex: 1; grid-auto-rows: 1fr; }
.card-fill .state-links li { display: flex; }
.card-fill .state-links a { flex: 1; padding: 0.8rem 0.7rem; gap: 0.5rem; }
.card-fill .state-links svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .state-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.state-links a.all-states { background: var(--navy); border-color: var(--navy); color: #fff; justify-content: center; }
.state-links a.all-states:hover { background: var(--navy-900); }
.state-links a.all-states svg { color: #fff; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.card-link { display: flex; flex-direction: column; color: var(--text); overflow: hidden; padding: 0; }
.card-link:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-link .card-art { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.card-link .card-art svg { height: 100%; width: auto; max-height: 120px; }
/* Guide previews with a real photograph instead of an illustration */
.card-link .card-art.card-photo { padding: 0; background: var(--bg); overflow: hidden; }
.card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.card-link:hover .card-photo img { transform: scale(1.03); }
.card-link .card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.card-link .card-body h3 { margin: 0; font-size: 1.1rem; }
.card-link .card-body p { margin: 0; color: var(--muted); font-size: 0.93rem; flex: 1; }
.card-meta { font-size: 0.8rem; color: var(--muted); font-weight: 600; }

/* ---------- Article (prose) ---------- */
.article { max-width: 780px; margin: 0 auto; }
.article h2 { margin-top: 2.25rem; font-size: 1.6rem; }
.article h3 { margin-top: 1.75rem; }
.article p, .article li { font-size: 1.12rem; }
.article ul, .article ol { margin-bottom: 1.25rem; }
.article blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--teal); background: var(--bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.article .toc { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin: 1.5rem 0 2rem; }
.article .toc h2 { margin: 0 0 0.5rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.article .toc ol { margin: 0; }
.article-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.cta-box { background: linear-gradient(145deg, var(--navy), var(--navy-700)); color: #fff; border-radius: var(--radius); padding: 2rem; margin: 2.5rem 0; }
.cta-box h2, .cta-box h3 { color: #fff; margin-top: 0; }
.cta-box p { color: rgba(255,255,255,0.85); }

/* ---------- Contact band ---------- */
.contact-band { background: var(--navy); color: #fff; }
.contact-band h2, .contact-band h3 { color: #fff; }
.contact-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.contact-methods { display: grid; gap: 1.5rem; }
.contact-method { display: flex; gap: 1rem; align-items: flex-start; }
.contact-method-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-method-icon svg { width: 24px; height: 24px; color: #A8C8EE; }
.contact-method .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #A8C8EE; font-weight: 700; }
.contact-method a { color: #fff; font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.contact-method > div:not(.contact-method-icon) { min-width: 0; } /* lets the email wrap instead of widening the page */
.contact-method p { margin: 0.2rem 0 0; color: rgba(255,255,255,0.75); font-size: 0.93rem; }
.contact-band .form-card { color: var(--text); }
.contact-band .form-card h3 { color: var(--navy-900); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.8); font-size: 0.93rem; }
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 2rem; padding: 3.5rem 0 2.5rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-brand .brand { color: #fff; }
.footer-brand .brand .brand-tag { color: rgba(255,255,255,0.6); }
.footer-brand p { margin-top: 1rem; max-width: 380px; }
.site-footer h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.footer-badge { display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 0.45rem 0.7rem; font-size: 0.78rem; font-weight: 600; color: #fff; }
.footer-badge svg { width: 16px; height: 16px; color: #A8C8EE; }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.12); padding: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: 0.82rem; }
.footer-legal ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-disclaimer { font-size: 0.78rem; color: rgba(255,255,255,0.55); padding-bottom: 1.5rem; max-width: 900px; }
.social { display: flex; gap: 0.6rem; }
.social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; }
.social a:hover { background: rgba(255,255,255,0.18); }
.social svg { width: 18px; height: 18px; }

/* ---------- Misc ---------- */
.stat-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: 1.25rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.stat strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--navy-900); line-height: 1.1; }
.stat span { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.registry-result { display: none; }
.registry-result.is-visible { display: block; }
.divider { height: 1px; background: var(--line); margin: 2rem 0; }
.icon-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.icon-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.icon-list svg { width: 24px; height: 24px; color: var(--teal); flex-shrink: 0; margin-top: 0.1rem; }
.icon-list strong { display: block; color: var(--navy-900); }
.icon-list span { color: var(--muted); font-size: 0.95rem; }

/* ---------- Patriotic accents (subtle) ---------- */
.stripe-bar { height: 4px; background: linear-gradient(90deg, var(--red) 0 33.33%, #ffffff 33.33% 66.66%, var(--navy) 66.66% 100%); }
.site-footer .stripe-bar { background: linear-gradient(90deg, var(--red) 0 33.33%, #F6F8FB 33.33% 66.66%, #4C6BA8 66.66% 100%); }
/* Owner, 2026-10-25: the stripe under the header read as a gap between the header and the page
   (its white third shows as a white strip over navy page heroes). The page starts right under the header. */
header + .stripe-bar { display: none; }
.usa-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem 0.4rem 0.5rem; font-weight: 700; font-size: 0.85rem; color: var(--navy-900); box-shadow: var(--shadow); }
.usa-badge .flag { width: 26px; height: 18px; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--red) 0 2.6px, #fff 2.6px 5.2px); position: relative; overflow: hidden; flex-shrink: 0; }
.usa-badge .flag::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 10px; background: var(--navy); }
.section-navy .usa-badge, .page-hero .usa-badge { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; box-shadow: none; }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta { display: none; }
@media (max-width: 899px) {
  body { padding-bottom: 76px; }
  .mobile-cta { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 0.7rem var(--gutter); background: rgba(255,255,255,0.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(15,31,61,0.1); }
  .mobile-cta .btn { padding: 0.8rem 1rem; }
  .mobile-cta .btn svg { width: 18px; height: 18px; }
}

/* ---------- Price callout ---------- */
.price-callout { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 60%, #163A5C 100%); color: #fff; border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3rem); display: grid; gap: 1.5rem; align-items: center; position: relative; overflow: hidden; }
@media (min-width: 900px) { .price-callout { grid-template-columns: 1fr auto; } }
.price-callout .eyebrow { color: #A8C8EE; }
.price-callout h2, .price-callout h3 { color: #fff; margin-bottom: 0.5rem; }
.price-callout p { color: rgba(255,255,255,0.85); margin: 0; }
.price-callout .price { color: #fff; font-size: 3rem; }
.price-callout .price small { color: rgba(255,255,255,0.7); }
.price-callout .btn-primary { box-shadow: none; }

/* ---------- Reasons / verify lists ---------- */
.reasons-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .reasons-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .reason { padding: 0.75rem 0.7rem; font-size: 0.88rem; } }
.reason { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-weight: 600; font-size: 0.93rem; color: var(--navy-900); }
.reason svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; margin-top: 0.1rem; }
.verify-list { display: grid; gap: 1rem; counter-reset: verify; }
.verify-item { counter-increment: verify; display: grid; grid-template-columns: 56px 1fr; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.verify-item::before { content: counter(verify, decimal-leading-zero); font-weight: 800; font-size: 1.5rem; color: var(--navy); line-height: 1; }
.verify-item h3 { margin-bottom: 0.4rem; }
.verify-item p { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.95rem; }
.checkmark, .crossmark { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; }
.checkmark { color: var(--teal-700); }
.crossmark { color: var(--red-600); }
.checkmark svg, .crossmark svg { width: 16px; height: 16px; }

/* ---------- Sample letter mock ---------- */
.sample-letter { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.5rem; box-shadow: var(--shadow-lg); font-size: 0.8rem; color: var(--muted); position: relative; max-width: 420px; margin: 0 auto; transform: rotate(-1.5deg); }
.sample-letter .letter-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--navy); padding-bottom: 0.6rem; margin-bottom: 0.9rem; font-weight: 700; color: var(--navy-900); }
.letter-line { height: 8px; border-radius: 4px; background: var(--line); margin: 0.45rem 0; }
.letter-line.short { width: 55%; }
.letter-line.medium { width: 80%; }
.sample-letter .letter-tag { position: absolute; background: var(--teal); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.sample-letter .letter-sign { margin-top: 1rem; font-style: italic; color: var(--navy); font-weight: 600; }

/* ---------- Annotated sample letter (product hero) ---------- */
.letter-mock { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.letter-mock .sample-letter { transform: rotate(-1.2deg); max-width: 380px; }
.letter-mock-caption { font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,0.75); max-width: 380px; text-align: center; }
/* scoped so it beats `.page-hero p` (white) when the letter sits in a hero */
.sample-letter .letter-re { font-weight: 700; color: var(--navy-900); font-size: 0.82rem; margin: 0 0 0.7rem; }
.letter-stamp {
  position: absolute; right: -8px; bottom: 34px;
  transform: rotate(-9deg); border: 2px solid var(--red); color: var(--red);
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.22rem 0.5rem; border-radius: 4px; background: rgba(255,255,255,0.92); white-space: nowrap;
}

/* ---------- State pages ---------- */
.state-region { margin-bottom: 2rem; }
.state-region h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.state-region h3 .badge { font-size: 0.72rem; }
.state-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .state-grid a { padding: 0.6rem 0.6rem; font-size: 0.9rem; flex-wrap: wrap; gap: 0.25rem; } }
@media (min-width: 1024px) { .state-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.state-grid a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; font-weight: 600; color: var(--navy-900); font-size: 0.93rem; }
.state-grid a:hover { border-color: var(--navy); text-decoration: none; }
.state-grid a .abbr { font-size: 0.72rem; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 0.15rem 0.4rem; }
.state-grid a.is-30day .abbr { background: #FFF6E5; color: #6B4A00; }
.city-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.city-list li { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.875rem; font-weight: 600; color: var(--navy-900); }

/* =====================================================================
   Homepage: wide logo lockup + waving flag background
   Scoped to body.site so no other page is affected.
   ===================================================================== */

/* --- Wide logo lockup (replaces the shield + wordmark) --- */
.site .brand img { width: auto; height: 48px; max-width: min(300px, 58vw); }
.site .brand { gap: 0; }
@media (max-width: 420px) { .site .brand img { height: 42px; } }
.site .site-footer .brand img { height: 52px; background: #fff; border-radius: 10px; padding: 10px 15px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }

/* --- Fixed background video, looping continuously, covering 80% of the viewport --- */
/* The layer stops at 80vh, so its bottom edge is masked to fade out. Without
   this it cuts off in a hard horizontal line across the page. */
.flag-bg {
  position: fixed; top: 0; left: 0; right: 0; height: 80vh;
  z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.35) 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.35) 86%, transparent 100%);
}
.flag-bg video { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.86) saturate(1.08); }

/* Content sits above the flag layer */
.site .topbar, .site main, .site .site-footer, .site .mobile-cta { position: relative; z-index: 1; }

/* Readability over decoration.
   A striped flag behind grey body copy is unreadable, so the scrim behind any
   section that holds text is near-opaque — the flag survives as a faint
   texture only. Body text is also darkened on this page to buy back contrast.
   Navy bands and the contact band stay fully opaque. */
.site { --muted: #414C5E; }
/* Dark bands are translucent too, so the flag carries through them instead of
   stopping dead at each one. White text still clears AA at these alphas. */
.site .section-navy { background: rgba(31, 59, 115, 0.90); }
.site .contact-band { background: rgba(31, 59, 115, 0.90); }
.site .page-hero { background: linear-gradient(160deg, rgba(31,59,115,0.92) 0%, rgba(22,48,94,0.88) 60%, rgba(22,58,92,0.86) 100%); }

.site .section:not(.section-tint):not(.section-navy):not(.contact-band),
.site .section-sm:not(.section-tint):not(.section-navy) { background: rgba(255, 255, 255, 0.88); }
.site .section-tint { background: rgba(246, 248, 251, 0.90); }
.site .trust-strip { background: rgba(255, 255, 255, 0.90); }
.site .hero { background: linear-gradient(160deg, rgba(246,248,251,0.70) 0%, rgba(238,243,250,0.64) 55%, rgba(227,245,241,0.62) 100%); }

/* The hero headline block sits directly over the flag, so give its text a
   dedicated wash rather than relying on the section tint alone. */
.site .hero-copy { position: relative; }
.site .hero-copy::before {
  content: ""; position: absolute; inset: -22px -26px; border-radius: 22px; z-index: 0;
  /* never fades to zero: the far edge of the copy block still needs cover now
     that the flag behind it is darker and the section scrim is lighter */
  background: radial-gradient(135% 115% at 30% 45%, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.84) 62%, rgba(255,255,255,0.52) 100%);
}
.site .hero-copy > * { position: relative; z-index: 1; }
.site .hero .lead, .site .section-head p { color: #38445A; }

/* Long-form prose sits over the flag, so it needs more size and leading than
   UI text. 16px rendered at 80% browser zoom is only 12.8px, which is too
   small to read comfortably against a busy background. */
.site .split p, .site .split li, .site .article p, .site .article li,
.site .accordion-body p, .site .accordion-body li { font-size: 1rem; line-height: 1.7; }
.site .split p, .site .article p, .site .accordion-body p { color: var(--text); }
/* …but not on dark panels. The rule above is (0,2,1) and beats `.section-navy p`
   at (0,1,1), which left section intros dark grey on navy. These win it back. */
.site .section-navy .section-head p, .site .section-navy .lead,
.site .page-hero .section-head p, .site .page-hero .lead,
.site .contact-band .section-head p, .site .contact-band .lead,
.site .cta-box .section-head p, .site .cta-box .lead { color: rgba(255, 255, 255, 0.88); }
/* CTA boxes sit inside .split and .article, whose dark text rules above tie
   with these on specificity; coming later, these win. Links in them were
   navy on navy. */
.site .cta-box p, .site .cta-box li, .site .cta-box small { color: rgba(255, 255, 255, 0.88); }
.site .cta-box a:not(.btn) { color: #fff; text-decoration: underline; }

/* Photographs. Shown whole: no fixed aspect ratio and no object-fit cropping.
   Portrait shots are held to a sensible max width so they do not tower. */
.photo-frame { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg); box-shadow: var(--shadow-lg); }
.photo-frame img { display: block; width: 100%; height: auto; }
.split-media.photo-media { padding: 0; background: none; min-height: 0; }
.split-media .photo-frame { width: 100%; max-width: 420px; margin: 0 auto; }
/* Stacked photo pairs: the second sits narrower and offset so it fills the space
   beside a tall text column without reading as a plain column of boxes. */
/* Explicit 1fr column. An auto column sizes to content, and since the children
   are width:100% images that may not have loaded, the column resolves to ~0 and
   the whole stack collapses. */
.hero-art-stack { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.hero-art-stack .hero-photo-2 { width: 74%; justify-self: end; margin-top: -2.4rem; position: relative; z-index: 1; border: 5px solid #fff; }
@media (max-width: 767px) { .hero-art-stack .hero-photo-2 { width: 88%; justify-self: center; margin-top: -1rem; } }

/* width:100% gives a definite width. With `margin: 0 auto` the grid item would
   shrink-to-fit, and since the children are width:100% images that may not have
   loaded, it collapses to nothing. */
.split-media.media-stack { display: grid; grid-template-columns: 1fr; gap: 1rem; align-content: start; width: 100%; max-width: 460px; justify-self: center; margin: 0; }
.split-media.media-stack .photo-frame { max-width: 100%; margin: 0; }
.split-media.media-stack .photo-frame + .photo-frame { width: 76%; justify-self: end; margin-top: -2rem; position: relative; z-index: 1; border: 5px solid #fff; }
@media (max-width: 767px) { .split-media.media-stack .photo-frame + .photo-frame { width: 88%; justify-self: center; margin-top: -1rem; } }

.photo-figure { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
.photo-figure img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.photo-figure figcaption { font-size: 0.9rem; color: var(--muted); line-height: 1.5; max-width: 640px; }

/* Hero price block: price stated up front rather than buried further down */
.hero-price { display: inline-flex; align-items: center; gap: 0.9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1.2rem; box-shadow: var(--shadow); margin: 0 0 1.25rem; }
.hero-price-amount { font-size: 2.1rem; font-weight: 800; color: var(--navy-900); line-height: 1; letter-spacing: -0.02em; }
.hero-price-meta { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--muted); line-height: 1.35; }
.hero-price-meta strong { color: var(--navy-900); font-size: 0.9rem; }

/* GEO: a quotable short answer at the top of each guide, and a sources list */
.answer-box { margin: 0 0 1.5rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.site .answer-box p { margin: 0; }
.site .answer-box p.answer-label { margin: 0 0 0.3rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.sources { margin: 0 0 0.75rem; padding-left: 1.3rem; }
.site .sources li { margin: 0.35rem 0; font-size: 0.92rem; line-height: 1.5; }
.sources a { overflow-wrap: anywhere; }
.site p.sources-note { font-size: 0.85rem; color: var(--muted); }
.section-sources { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.sources-wrap { max-width: 820px; }
.sources-wrap h2 { font-size: 1.35rem; margin-bottom: 0.75rem; }

/* Sample ESA letter (guides/sample-esa-letter): a printed letter on letterhead, with
   numbered markers in the left margin that link to each part's explanation */
.letter-demo { margin: 0 0 1.5rem; }
.letter-demo-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.88rem; color: var(--muted); }
.letter-sheet { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--navy); border-radius: 6px; box-shadow: var(--shadow-lg); padding: 2.25rem 2.5rem 1.25rem 3.4rem; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.65; color: #222a38; }
/* (0,2,1) so the letter keeps its own type over `.site .article p` */
.site .letter-sheet p { margin: 0 0 0.9rem; font-size: inherit; line-height: inherit; color: inherit; }
.letter-watermark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: clamp(4.5rem, 15vw, 9.5rem); letter-spacing: 0.12em; color: rgba(226, 55, 68, 0.07); transform: rotate(-24deg); pointer-events: none; user-select: none; }
.lh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; }
.lh-brand { display: flex; align-items: center; gap: 0.9rem; }
.lh-seal { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1.15rem; letter-spacing: 0.04em; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--red); }
.letter-sheet p.lh-name { margin: 0; font-family: var(--font); font-weight: 800; font-size: 1.2rem; line-height: 1.2; color: var(--navy-900); }
.letter-sheet p.lh-title { margin: 0.2rem 0 0; font-family: var(--font); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.lh-contact { font-style: normal; font-family: var(--font); font-size: 0.8rem; line-height: 1.55; color: var(--muted); text-align: right; }
.lh-rule { height: 3px; margin: 1.1rem 0 1.4rem; border-radius: 2px; background: linear-gradient(90deg, var(--navy) 0 72%, var(--red) 72% 100%); }
.lt-re { margin: 0 0 1.1rem; padding: 0.6rem 0.9rem; border-left: 3px solid var(--navy); border-radius: 0 6px 6px 0; background: var(--bg); font-family: var(--font); font-size: 0.88rem; }
.letter-sheet .lt-re p { margin: 0; }
.lt-sign { margin-top: 1.4rem; }
.letter-sheet p.lt-signature { margin: 0.1rem 0 0.1rem 0.4rem; font-family: "Herr Von Muellerhoff", cursive; font-size: 3.4rem; line-height: 1.05; color: #1d3f8f; transform: rotate(-4deg); transform-origin: left center; }
.letter-sheet p.lt-signed { max-width: 340px; padding-top: 0.45rem; border-top: 1px solid #c9d1de; font-family: var(--font); font-size: 0.85rem; line-height: 1.55; }
.lt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 1.4rem; padding-top: 0.7rem; border-top: 1px solid var(--line); font-family: var(--font); font-size: 0.74rem; color: var(--muted); }
.lt-part { position: relative; }
.lt-n { position: absolute; left: -2.4rem; top: 0.2rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--font); font-size: 0.74rem; font-weight: 800; line-height: 1; box-shadow: 0 2px 6px rgba(226, 55, 68, 0.35); }
.lt-n:hover, .lt-n:focus-visible { background: var(--red-600); color: #fff; text-decoration: none; }
.lt-signed .lt-n { top: 0.5rem; }
@media (max-width: 600px) {
  .letter-sheet { padding: 1.5rem 1.1rem 1rem 2.7rem; font-size: 0.95rem; }
  .lh-contact { text-align: left; }
  .lt-n { left: -2.05rem; }
  .letter-sheet p.lt-signature { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .site-header, .site-footer, .btn, .nav-toggle { display: none !important; }
}