/* OffRadar design system (navy edition)
   Deep navy and slate with one signal-cyan accent. Display type: Instrument Serif.
   Text: Instrument Sans. Both self-hosted in /fonts.

   Section colours:
     .dark   deep navy, light text (hero, statements, pricing, calls to action)
     .light  mist grey, navy text (reading sections, forms, tables, legal)
     .white  white, navy text
   Every colour pair below meets WCAG AA contrast (checked: lowest is 5.3:1). */

@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --navy-950: #070E1A;
  --navy-900: #0B1626;
  --navy-800: #12213A;
  --slate-600: #2A3A55;
  --line-dark: rgba(147, 163, 188, .18);
  --text-dark: #E8EEF6;     /* on navy: 15.5:1 */
  --muted-dark: #93A3BC;    /* on navy: 7.1:1 */
  --cyan: #3DD6E8;          /* accent on navy: 10.4:1; buttons use navy text: 10.8:1 */
  --cyan-deep: #0A6E7C;     /* accent on light: 5.3:1 */
  --mist: #EEF2F7;
  --white: #FFFFFF;
  --ink: #0B1626;
  --ink-2: #4A5872;         /* on mist: 6.4:1 */
  --line-light: #D5DCE6;
  --error: #B42318;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --max: 76rem;
  --space: clamp(3rem, 2rem + 4vw, 6rem);
  --h1: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --h2: clamp(2.2rem, 1.4rem + 3vw, 3.85rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--navy-900); color: var(--text-dark); font: 400 1.0625rem/1.6 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.light :focus-visible, .white :focus-visible { outline-color: var(--cyan-deep); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow, .label { font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.light .eyebrow, .light .label, .white .eyebrow, .white .label { color: var(--cyan-deep); }
.muted { color: var(--muted-dark); }
.light .muted, .white .muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }
.mono { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--white); color: var(--ink); padding: 0.5rem 1rem; }

/* ---------- Section colours ---------- */
.dark { background: var(--navy-900); color: var(--text-dark); }
.light { background: var(--mist); color: var(--ink); color-scheme: light; }
.white { background: var(--white); color: var(--ink); color-scheme: light; }
.section { padding-block: var(--space); }
.light + .light, .white + .white { border-top: 1px solid var(--line-light); }
.dark + .dark { border-top: 1px solid var(--line-dark); }

/* ---------- Buttons: one primary style everywhere ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.5rem;
  border-radius: 999px; font: 600 0.975rem/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--cyan); color: #06111F; box-shadow: 0 8px 30px rgba(61, 214, 232, .25); }
.btn-primary:hover { background: #67E2F0; color: #06111F; }
.light .btn-primary, .white .btn-primary { background: var(--ink); color: var(--white); box-shadow: none; }
.light .btn-primary:hover, .white .btn-primary:hover { background: #000; color: var(--white); }
.btn-ghost { background: transparent; color: var(--text-dark); border-color: rgba(232, 238, 246, .35); }
.btn-ghost:hover { border-color: var(--text-dark); }
.light .btn-ghost, .white .btn-ghost { color: var(--ink); border-color: var(--slate-600); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.link { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.light .link, .white .link { color: var(--cyan-deep); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.cta-note { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-dark); }
.light .cta-note, .white .cta-note { color: var(--ink-2); }
.cta-note svg { width: 16px; height: 16px; flex: none; color: var(--cyan); }
.light .cta-note svg, .white .cta-note svg { color: var(--cyan-deep); }
.icon { width: 1em; height: 1em; }

/* ---------- Header ---------- */
.site-head { background: var(--navy-950); color: var(--text-dark); position: relative; z-index: 10; border-bottom: 1px solid var(--line-dark); }
.site-head.overlay { background: transparent; position: absolute; top: 0; left: 0; right: 0; border-bottom: 0; }
.site-head .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 4.5rem; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font: 400 1.6rem/1 var(--serif); text-decoration: none; color: var(--text-dark); margin-right: auto; }
.wordmark svg { width: 26px; height: 26px; flex: none; }
.nav { display: flex; gap: 1.6rem; align-items: center; font-size: 0.9375rem; }
.nav a { text-decoration: none; color: var(--muted-dark); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text-dark); }
.nav a[aria-current="page"]:not(.btn) { box-shadow: 0 1px 0 var(--cyan); }
.site-head .btn { min-height: 2.75rem; padding: 0 1.15rem; font-size: 0.9rem; }
/* The header button keeps its own colours (beats the ".nav a" link colour) */
.nav .btn-primary, .nav .btn-primary:hover, .nav .btn-primary[aria-current="page"] { color: #06111F; box-shadow: none; }
.menu { display: none; }
@media (max-width: 58rem) {
  .nav { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-size: 0.9375rem; display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.25rem; color: var(--text-dark); white-space: nowrap; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary::after { content: ""; width: 0.45rem; height: 0.45rem; margin-left: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15rem) rotate(45deg); }
  .menu[open] summary::after { transform: translateY(0.1rem) rotate(-135deg); }
  .menu-panel { position: absolute; right: 0; top: 3.1rem; background: var(--navy-800); border: 1px solid var(--line-dark); border-radius: 14px; padding: 0.5rem 0; display: flex; flex-direction: column; min-width: 15rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
  .menu-panel a { text-decoration: none; color: var(--text-dark); padding: 0.75rem 1.25rem; }
  .menu-panel a:hover { background: rgba(232, 238, 246, .06); }
  .menu-panel a[aria-current="page"] { color: var(--cyan); }
}
@media (max-width: 24rem) { .wordmark { font-size: 1.35rem; } }

/* ---------- Radar motif (CSS only, decorative) ---------- */
.radar { position: absolute; z-index: -1; right: -12rem; top: 50%; width: 48rem; height: 48rem; transform: translateY(-50%); border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 5.9rem, rgba(61, 214, 232, .10) 5.9rem 6rem);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%); }
.radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; filter: blur(6px);
  background: conic-gradient(from 0deg, rgba(61, 214, 232, .13), rgba(61, 214, 232, .04) 12%, transparent 24%, transparent 100%);
  animation: sweep 14s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-950); }
.hero > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; z-index: -3; opacity: .55; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(7, 14, 26, .97) 0%, rgba(7, 14, 26, .86) 40%, rgba(7, 14, 26, .25) 75%, rgba(7, 14, 26, .45) 100%),
              linear-gradient(180deg, rgba(7, 14, 26, .6) 0%, rgba(7, 14, 26, 0) 25%, rgba(7, 14, 26, 0) 70%, rgba(11, 22, 38, 1) 100%); }
.hero-body { padding-block: 9rem 4.5rem; max-width: 40rem; display: grid; gap: 1.5rem; }
.hero h1 { font-size: clamp(2.9rem, 1.6rem + 5.4vw, 6rem); line-height: 0.95; letter-spacing: -0.02em; }
.hero h1 em, .h2 em, .page-head h1 em { color: var(--cyan); }
.light .h2 em, .white .h2 em { color: var(--cyan-deep); }
.hero .sub { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--muted-dark); max-width: 34rem; }
.hero .sub b { color: var(--text-dark); font-weight: 500; }
@media (max-width: 40rem) {
  .hero > picture img { opacity: .35; object-position: 60% 30%; }
  .hero .radar { right: -20rem; width: 36rem; height: 36rem; top: 30%; }
  .hero-body { padding-block: 7rem 3rem; }
}

/* ---------- Trust badges ---------- */
.badges { border-block: 1px solid var(--line-dark); background: var(--navy-900); }
.badges ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.badges li { display: flex; }
.badges a { flex: 1; display: grid; align-content: start; row-gap: 0.3rem; padding: 1.25rem 0.9rem 1.25rem 0; text-decoration: none; color: inherit; }
.badges svg { width: 40px; height: 40px; padding: 9px; margin-bottom: 0.45rem; border-radius: 12px; color: var(--cyan);
  background: radial-gradient(circle at 30% 25%, rgba(61, 214, 232, .18), rgba(61, 214, 232, .05) 70%); border: 1px solid rgba(61, 214, 232, .25);
  transition: border-color .2s ease, box-shadow .2s ease; }
.badges b { font: 400 1.125rem/1.15 var(--serif); color: var(--text-dark); letter-spacing: -0.005em; transition: color .2s ease; }
.badges span { font-size: 0.8125rem; line-height: 1.4; color: var(--muted-dark); }
.badges a:hover svg, .badges a:focus-visible svg { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(61, 214, 232, .1), 0 0 24px rgba(61, 214, 232, .25); }
.badges a:hover b { color: #fff; }
@media (max-width: 57.99rem) {
  .badges li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .badges li:nth-child(even) a { padding-left: 1.1rem; border-left: 1px solid var(--line-dark); }
}
@media (min-width: 58rem) {
  .badges ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .badges li + li a { border-left: 1px solid var(--line-dark); }
  .badges a { padding: 1.9rem clamp(1rem, 0.2rem + 1.5vw, 2rem); }
  .badges li:first-child a { padding-left: 0; }
  .badges li:last-child a { padding-right: 0; }
  .badges svg { width: 44px; height: 44px; padding: 10px; margin-bottom: 0.6rem; }
  .badges b { font-size: 1.3125rem; }
  .badges span { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { .badges svg, .badges b { transition: none; } }

/* ---------- Interior page head ---------- */
.page-head { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-950); padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-head .wrap { display: grid; gap: 1rem; }
.page-head h1 { font-size: var(--h1); line-height: 1; letter-spacing: -0.015em; max-width: 18ch; }
.page-head .radar { right: -18rem; width: 40rem; height: 40rem; opacity: .8; }
.lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--muted-dark); max-width: 40rem; }
.lede b { color: var(--text-dark); font-weight: 600; }
.light .lede, .white .lede { color: var(--ink-2); }
.light .lede b, .white .lede b { color: var(--ink); }

/* ---------- Layout ---------- */
.h2 { font-size: var(--h2); line-height: 1; letter-spacing: -0.015em; }
.eyebrow + .h2, .label + .h2 { margin-top: 0.75rem; }
.grid { display: grid; gap: 1rem 4rem; }
@media (min-width: 58rem) { .grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.grid > .head { display: grid; gap: 0.75rem; align-content: start; }
.body { display: grid; gap: 1.5rem; min-width: 0; }
.prose { display: grid; gap: 1rem; max-width: 42rem; color: var(--ink-2); }
.dark .prose { color: var(--muted-dark); }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.dark .prose b { color: var(--text-dark); }
.notice { border-left: 2px solid var(--cyan-deep); padding: 0.1rem 0 0.1rem 1.1rem; max-width: 42rem; }

/* Problem trail */
.trail { list-style: none; margin: 2rem 0 0; padding: 0; border-left: 1px solid var(--line-dark); }
.trail li { position: relative; padding: 0 0 1.75rem 1.75rem; }
.trail li::before { content: ""; position: absolute; left: -5px; top: 0.45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(61, 214, 232, .15); }
.trail li:last-child { padding-bottom: 0; }
.trail b { display: block; font: 400 1.4rem/1.2 var(--serif); color: var(--text-dark); margin-bottom: 0.25rem; }
.trail span { color: var(--muted-dark); }

/* Definition sheet */
.sheet { margin: 0; border-top: 1px solid currentColor; }
.sheet > div { display: grid; gap: 0.25rem 3rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line-light); }
.dark .sheet > div { border-bottom-color: var(--line-dark); }
@media (min-width: 58rem) { .sheet.wide > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .sheet.split > div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } }
.sheet dt { font: 400 1.375rem/1.3 var(--serif); }
.sheet dd { margin: 0; color: var(--ink-2); max-width: 44rem; }
.dark .sheet dd { color: var(--muted-dark); }

/* Steps as cards */
.steps { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1rem; counter-reset: s; }
@media (min-width: 58rem) { .steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 72rem) { .steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: s; background: var(--white); border: 1px solid var(--line-light); border-radius: 18px; padding: 1.6rem; display: grid; gap: 0.55rem; align-content: start; color: var(--ink); }
.white .steps li { background: var(--mist); }
.dark .steps li { background: var(--navy-800); border-color: var(--line-dark); color: var(--text-dark); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 600 0.8rem/1 var(--sans); letter-spacing: 0.12em; color: var(--cyan-deep); }
.dark .steps li::before { color: var(--cyan); }
.steps h3 { font-size: 1.65rem; line-height: 1.1; }
.steps p { color: var(--ink-2); }
.dark .steps p { color: var(--muted-dark); }
.steps a { color: var(--cyan-deep); }

/* Coverage meter */
.proof { display: grid; gap: 2rem; }
@media (min-width: 58rem) { .proof { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; } }
.meter { background: var(--navy-800); border: 1px solid var(--line-dark); border-radius: 20px; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; gap: 1.25rem; }
.meter dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.meter dd { margin: 0; font: 400 2.6rem/1 var(--serif); color: var(--text-dark); }
.meter dt { font-size: 0.8125rem; color: var(--muted-dark); margin-top: 0.35rem; }
.meter-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-dark); border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.meter-foot a { color: var(--cyan); }
.bar { display: grid; gap: 4px; height: 0.7rem; }
.bar span { border-radius: 4px; }
.bar span:nth-child(1) { background: var(--cyan); }
.bar span:nth-child(2) { background: repeating-linear-gradient(135deg, var(--muted-dark) 0 2px, transparent 2px 6px); }
.bar span:nth-child(3) { background: var(--slate-600); }

/* Status chips (pattern + text, never colour alone) */
.st { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 0.8125rem/1.2 var(--sans); white-space: nowrap; }
.st::before { content: ""; width: 1.5rem; height: 0.6rem; flex: none; border-radius: 3px; }
.st-ok::before { background: var(--cyan-deep); }
.st-pending::before { background: repeating-linear-gradient(135deg, var(--ink-2) 0 2px, transparent 2px 6px); border: 1px solid var(--ink-2); }
.st-no::before { background: var(--line-light); border: 1px solid var(--ink-2); }
.st-owner::before { background: transparent; border: 1px solid var(--ink); }
.cell-note { display: block; margin-top: 0.35rem; }
.legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
.legend li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-light); }
.legend p { color: var(--ink-2); font-size: 0.975rem; }
@media (min-width: 58rem) { .legend li { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: baseline; } }
.legend h3 { font: 600 1rem/1.4 var(--sans); }

/* Data tables: real tables on wide screens, labelled stacks on phones */
.table-card { background: var(--white); border: 1px solid var(--line-light); border-radius: 18px; padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
table.data th { text-align: left; font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding: 0.75rem 1rem 0.75rem 0; vertical-align: bottom; border-bottom: 1px solid var(--line-light); }
table.data td { padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--line-light); vertical-align: top; color: var(--ink-2); }
table.data tr:last-child td { border-bottom: 0; }
table.data td:first-child { color: var(--ink); font-weight: 600; }
table.data td:first-child a { color: var(--cyan-deep); }
table.data td.when { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
@media (max-width: 58rem) {
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data tr { padding: 1rem 0; border-bottom: 1px solid var(--line-light); }
  table.data tr:last-child { border-bottom: 0; }
  table.data td { border: 0; padding: 0.2rem 0; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; }
  table.data td::before { content: attr(data-label); font: 600 0.6875rem/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
  table.data td:first-child { font: 400 1.5rem/1.2 var(--serif); display: block; padding-bottom: 0.5rem; }
  table.data td:first-child::before { display: none; }
  table.trackers tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  table.trackers td { grid-column: 1 / -1; }
  table.trackers td[data-label^="Canada"], table.trackers td[data-label^="U.S."] { grid-column: auto; }
  table.data td[data-label="Removal route"], table.data td[data-label="What it does"],
  table.data td[data-label^="Canada"], table.data td[data-label^="U.S."] { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filters button { font: 600 0.8125rem/1 var(--sans); min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--line-light); background: var(--white); color: var(--ink-2); cursor: pointer; border-radius: 999px; }
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- Photographs ---------- */
.statement { position: relative; isolation: isolate; overflow: hidden; margin: 0; background: var(--navy-900); }
.statement img { width: 100%; height: clamp(16rem, 40vw, 32rem); object-fit: cover; object-position: 50% 30%; }
.statement::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 22, 38, 0) 40%, rgba(11, 22, 38, .92) 100%); pointer-events: none; }
.statement figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(1.25rem, 1rem + 2vw, 3rem); }
.statement figcaption span { display: block; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); font: 400 clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem)/1.05 var(--serif); color: var(--text-dark); }
.band-img { margin: 0; }
.band-img img { width: 100%; height: clamp(12rem, 32vw, 26rem); object-fit: cover; object-position: 50% 35%; }
.side-img { margin: 0; }
.side-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.caption { font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.6rem; }

/* ---------- Pricing plans ---------- */
.plans { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 62rem) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.plan { position: relative; background: var(--navy-800); border: 1px solid var(--line-dark); border-radius: 22px; padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; color: var(--text-dark); }
.plan.featured { background: linear-gradient(180deg, #14304A 0%, var(--navy-800) 100%); border-color: rgba(61, 214, 232, .55); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.plan .tag { position: absolute; top: -0.75rem; left: 1.75rem; background: var(--cyan); color: #06111F; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.45rem 0.7rem; border-radius: 999px; }
.plan h3 { font-size: 1.9rem; }
.plan .for { color: var(--muted-dark); font-size: 0.9375rem; }
.plan .price { display: flex; align-items: baseline; gap: 0.4rem; }
.plan .price b { font: 400 3.6rem/1 var(--serif); color: var(--text-dark); }
.plan .price b.quote { font-size: 2.6rem; }
.plan .price span { color: var(--muted-dark); font-size: 0.9rem; line-height: 1.3; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9375rem; }
.plan li { position: relative; padding-left: 1.6rem; }
.plan li::before { content: ""; position: absolute; left: 0.15rem; top: 0.3em; width: 0.45rem; height: 0.8rem; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg); }
.plan li.plus { font-weight: 500; }
.plan .btn { margin-top: auto; width: 100%; }
.fine { margin-top: 1.25rem; text-align: center; font-size: 0.875rem; color: var(--muted-dark); }

/* Boundaries card */
.bounds { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 22px; background: var(--white); border: 1px solid var(--line-light); }
@media (min-width: 58rem) { .bounds { grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; } }
.bounds > svg { width: 56px; height: 56px; color: var(--cyan-deep); }
.bounds h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.1; }
.bounds p { color: var(--ink-2); margin-top: 0.5rem; max-width: 46rem; }

/* Plain-English summary (authorization page) */
.plain { background: var(--white); border: 1px solid var(--line-light); border-left: 4px solid var(--cyan-deep); border-radius: 14px; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; gap: 0.9rem; max-width: 46rem; }
.plain h2 { font-size: 1.75rem; line-height: 1.1; }
.plain ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; color: var(--ink-2); }
.plain p { color: var(--ink-2); font-size: 0.9375rem; }

/* Final call to action */
.final { text-align: center; padding-block: var(--space); background: radial-gradient(60rem 30rem at 50% 120%, rgba(61, 214, 232, .18), transparent 70%), var(--navy-900); }
.final h2 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); line-height: 1; }
.final p { color: var(--muted-dark); margin: 1rem auto 2rem; max-width: 32rem; }
.final .actions { justify-content: center; }

/* Trust list */
.assure { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.assure li { position: relative; padding-left: 1.6rem; }
.assure li::before { content: ""; position: absolute; left: 0.2rem; top: 0.35em; width: 0.45rem; height: 0.8rem; border-right: 2px solid var(--cyan-deep); border-bottom: 2px solid var(--cyan-deep); transform: rotate(45deg); }
.dark .assure li::before { border-color: var(--cyan); }
.doc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.doc-links a { color: var(--cyan-deep); }
@media (min-width: 58rem) { .request-aside { position: sticky; top: 1.5rem; gap: 1.1rem; } }
.aside-card { background: var(--white); border: 1px solid var(--line-light); border-radius: 18px; padding: 1.5rem; display: grid; gap: 1.1rem; align-content: start; }

/* ---------- Form ---------- */
.form-card { background: var(--white); border: 1px solid var(--line-light); border-radius: 22px; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.form { display: grid; gap: 2rem; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1.25rem; min-width: 0; }
.form legend { padding: 0 0 0.75rem; width: 100%; border-bottom: 1px solid var(--ink); font: 400 1.5rem/1.2 var(--serif); margin-bottom: 0.5rem; }
.field { display: grid; gap: 0.4rem; min-width: 0; align-content: start; }
.field-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field .hint { font-size: 0.875rem; color: var(--ink-2); }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--white); border: 1px solid #A3AEC0; border-radius: 10px; padding: 0.7rem 0.85rem; width: 100%; min-width: 0; min-height: 3rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 1px; border-color: var(--cyan-deep); }
.field input.reg { text-transform: uppercase; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field input:target { outline: 2px solid var(--cyan-deep); outline-offset: 2px; }
.field input { scroll-margin-top: 6rem; }
.req { color: var(--ink-2); font-weight: 400; }
.check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: 0.9375rem; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--cyan-deep); }
.check a { color: var(--cyan-deep); }
.more { border-top: 1px solid var(--ink); }
.more summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding-top: 0.75rem; font: 400 1.5rem/1.2 var(--serif); }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; margin-left: auto; font: 400 1.5rem/1 var(--sans); color: var(--ink-2); }
.more[open] summary::after { content: "\2212"; }
.more summary .req { font: 400 0.9375rem/1 var(--sans); }
.more-body { display: grid; gap: 1.25rem; padding-top: 1rem; }
.hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.form-status { border: 1px solid var(--line-light); background: var(--mist); border-radius: 12px; padding: 1.1rem 1.25rem; display: grid; gap: 0.75rem; }
.form-status.is-error { border-color: var(--error); border-left-width: 4px; }
.form-status pre { margin: 0; font: 0.8125rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.form-status .btn { background: var(--ink); color: var(--white); }

/* ---------- Legal ---------- */
.legal { display: grid; gap: 1.6rem; max-width: 44rem; }
.legal section { display: grid; gap: 0.7rem; }
.legal h2 { font-size: 1.625rem; line-height: 1.2; color: var(--ink); }
.legal p, .legal li { color: #2E3A4F; }
.legal ul, .legal ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.legal a { color: var(--cyan-deep); }
.legal-toc { font-size: 0.9375rem; }
.legal-toc ol { margin: 0.75rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.35rem; color: var(--ink-2); }
.legal-toc a { text-decoration: none; color: var(--ink-2); }
.legal-toc a:hover { color: var(--cyan-deep); text-decoration: underline; }
@media (min-width: 64rem) { .legal-grid { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 44rem); gap: 4rem; } .legal-toc { position: sticky; top: 1.5rem; align-self: start; } }
@media (max-width: 63.99rem) { .legal-toc { display: none; } }
.related { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem; font-size: 0.9375rem; }
.related a { color: var(--text-dark); }
.blank { display: inline-block; min-width: min(13rem, 100%); border-bottom: 1px solid var(--ink); height: 1.3em; vertical-align: bottom; }
.sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 0.5rem; }
@media (max-width: 34rem) { .sign { grid-template-columns: minmax(0, 1fr); } }
.sign div { border-top: 1px solid var(--ink); padding-top: 0.4rem; margin-top: 2rem; font-size: 0.875rem; color: var(--ink-2); }
section[id] { scroll-margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.site-foot { background: var(--navy-950); color: var(--muted-dark); padding-block: 3rem; font-size: 0.875rem; border-top: 1px solid var(--line-dark); }
.foot-grid { display: grid; gap: 1.75rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } }
.foot-grid > div { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.foot-grid .label { color: var(--text-dark); margin-bottom: 0.25rem; }
.site-foot a { text-decoration: none; color: var(--muted-dark); }
.site-foot a:hover { color: var(--text-dark); text-decoration: underline; }
.foot-mark { display: inline-flex; align-items: center; gap: 0.5rem; font: 400 1.4rem/1 var(--serif); color: var(--text-dark); }
.foot-mark svg { width: 22px; height: 22px; }
.foot-note { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); max-width: 56rem; font-size: 0.8125rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  .site-head, .site-foot, .no-print, .skip, .filters, .radar { display: none !important; }
  body, .page-head, .dark, .light, .white { background: #fff !important; color: #000 !important; }
  .page-head h1, .lede, .sheet dd { color: #000 !important; }
  a { text-decoration: none; }
}

/* =====================================================================
   Optimization pass components (exposure check, coverage dashboard,
   comparisons, audiences, FAQ, guides, sticky call to action)
   ===================================================================== */


/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8125rem; color: var(--muted-dark); margin-bottom: 0.25rem; }
.crumbs a { color: var(--muted-dark); text-decoration: none; }
.crumbs a:hover { color: var(--text-dark); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text-dark); }

/* Five-step process */
@media (min-width: 58rem) { .steps.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .steps.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Coverage meter: big number and a text key (pattern + words, never colour alone) */
.meter-big { display: flex; align-items: baseline; gap: 0.75rem; }
.meter-big b { font: 400 4rem/1 var(--serif); color: var(--text-dark); }
.meter-big span { color: var(--muted-dark); }
.meter-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; color: var(--muted-dark); }
.meter-key b { color: var(--text-dark); font-weight: 600; margin-right: 0.25rem; }
.key { display: inline-block; width: 1.5rem; height: 0.6rem; border-radius: 3px; margin-right: 0.6rem; vertical-align: middle; }
.key-ok { background: var(--cyan); }
.key-pending { background: repeating-linear-gradient(135deg, var(--muted-dark) 0 2px, transparent 2px 6px); border: 1px solid var(--muted-dark); }
.key-no { background: var(--slate-600); border: 1px solid var(--muted-dark); }

/* Coverage dashboard tiles */
.dash { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .dash { grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); } }
.tile { background: var(--navy-800); border: 1px solid var(--line-dark); border-radius: 18px; padding: 1.5rem; display: grid; gap: 0.5rem; align-content: start; }
.tile b { font: 400 3.2rem/1 var(--serif); color: var(--text-dark); }
.tile > span:last-child { color: var(--muted-dark); font-size: 0.9375rem; }
.tile-total { background: linear-gradient(180deg, #14304A 0%, var(--navy-800) 100%); border-color: rgba(61, 214, 232, .45); }
.tile-total b { font-size: 4.5rem; color: var(--cyan); }
.dark .st { color: var(--text-dark); }
.dark .st-ok::before { background: var(--cyan); }
.dark .st-pending::before { background: repeating-linear-gradient(135deg, var(--muted-dark) 0 2px, transparent 2px 6px); border-color: var(--muted-dark); }
.dark .st-no::before { background: var(--slate-600); border-color: var(--muted-dark); }

/* Honest limitation */
.limit-card { border-left: 4px solid var(--cyan-deep); background: var(--white); border-radius: 18px; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); display: grid; gap: 1rem; max-width: 56rem; }
.limit-card .h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }

/* Audience and guide cards */
.cards { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 46rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { display: grid; gap: 0.6rem; align-content: start; padding: 1.6rem; border-radius: 18px; background: var(--mist); border: 1px solid var(--line-light); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.light .card { background: var(--white); }
.card:hover { border-color: var(--cyan-deep); transform: translateY(-2px); }
.card h3 { font-size: 1.6rem; line-height: 1.1; }
.card p { color: var(--ink-2); }
.card-more { color: var(--cyan-deep); font-weight: 600; font-size: 0.9375rem; margin-top: 0.25rem; }

/* Comparison tables (plans, DIY) */
table.compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; color: var(--ink); }
table.compare th, table.compare td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--line-light); vertical-align: top; }
table.compare thead th { font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
table.compare tbody th { font-weight: 600; }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }
table.compare td { color: var(--ink-2); }
.yes { display: inline-block; width: 0.5rem; height: 0.9rem; border-right: 2px solid var(--cyan-deep); border-bottom: 2px solid var(--cyan-deep); transform: rotate(45deg); margin-left: 0.3rem; }
.no-mark { color: var(--ink-2); }
.dark .table-card { background: var(--navy-800); border-color: var(--line-dark); }
.dark table.compare { color: var(--text-dark); }
.dark table.compare th, .dark table.compare td { border-bottom-color: var(--line-dark); }
.dark table.compare thead th { color: var(--muted-dark); }
.dark table.compare td { color: var(--muted-dark); }
@media (max-width: 46rem) {
  table.compare, table.compare tbody, table.compare tr, table.compare td, table.compare tbody th { display: block; width: 100%; }
  table.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.compare tr { padding: 0.85rem 0; border-bottom: 1px solid var(--line-light); }
  .dark table.compare tr { border-bottom-color: var(--line-dark); }
  table.compare tr:last-child { border-bottom: 0; }
  table.compare tbody th, table.compare td { border: 0; padding: 0.15rem 0; }
  table.compare tbody th { font-size: 1rem; padding-bottom: 0.4rem; }
  table.compare td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; }
  table.compare td::before { content: attr(data-label); font: 600 0.6875rem/1.7 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
  .dark table.compare td::before { color: var(--muted-dark); }
}

/* FAQ accordion */
.faq { display: grid; border-top: 1px solid var(--line-light); }
.qa { border-bottom: 1px solid var(--line-light); }
.qa summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: 0.9rem 0; font: 400 1.3rem/1.25 var(--serif); color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 400 1.5rem/1 var(--sans); color: var(--cyan-deep); }
.qa[open] summary::after { content: "\2212"; }
.qa-a { padding: 0 0 1.1rem; color: var(--ink-2); max-width: 44rem; }
.qa-a a { color: var(--cyan-deep); }

/* Example workflow timeline */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-light); display: grid; gap: 1.1rem; }
.timeline li { position: relative; padding-left: 1.5rem; display: grid; gap: 0.15rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 0.4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 2px solid var(--cyan-deep); }
.timeline b { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-deep); }
.timeline span { color: var(--ink); }

/* Exposure check form */
.check-form { display: grid; gap: 1.1rem; }
.check-form .btn { justify-self: start; }
.check-form .form-status { margin-top: 0.25rem; }

/* Two-step progress */
.progress { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.9rem; color: var(--muted-dark); }
.progress li { display: inline-flex; align-items: center; gap: 0.5rem; }
.progress b { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--muted-dark); font-size: 0.8rem; }
.progress .is-current { color: var(--text-dark); }
.progress .is-current b { background: var(--cyan); border-color: var(--cyan); color: #06111F; }
.progress .is-done b { background: transparent; border-color: var(--cyan); color: var(--cyan); }

/* Guides */
.guide-grid { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .guide-grid { grid-template-columns: minmax(0, 44rem) minmax(0, 18rem); gap: 4rem; } .guide-aside { position: sticky; top: 1.5rem; align-self: start; } }
.article { display: grid; gap: 2rem; }
.article section { display: grid; gap: 0.75rem; }
.article h2 { font-size: 1.75rem; line-height: 1.15; color: var(--ink); }
.article p, .article li { color: #2E3A4F; }
.article ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.45rem; }
.article a { color: var(--cyan-deep); }
.guide-aside .btn { justify-self: start; }

/* Case studies (rendered only when real data exists) */
.cases { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 58rem) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case { background: var(--white); border: 1px solid var(--line-light); border-radius: 18px; padding: 1.5rem; }
.case dl { margin: 1rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.case dd { margin: 0; font: 400 1.8rem/1 var(--serif); }
.case dt { font-size: 0.8125rem; color: var(--ink-2); }

/* Sticky call to action on phones: appears after the hero (site.js adds .is-visible) */
.sticky-cta { display: none; }
@media (max-width: 40rem) {
  .sticky-cta { display: flex; position: fixed; z-index: 40; left: 1rem; right: 1rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(150%); transition: transform .25s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
  .sticky-cta.is-visible { transform: none; }
  body.has-sticky .site-foot { padding-bottom: 6rem; }
}
@media print { .sticky-cta { display: none !important; } }

/* Compact plan strip (home page) */
.strip { display: grid; gap: 1px; margin-top: 2rem; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 20px; overflow: hidden; }
@media (min-width: 58rem) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.strip-item { background: var(--navy-800); padding: 1.5rem; display: grid; gap: 0.5rem; align-content: start; }
.strip-item h3 { font-size: 1.5rem; }
.strip-price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.strip-price b { font: 400 2.2rem/1 var(--serif); color: var(--text-dark); }
.strip-price span { color: var(--muted-dark); font-size: 0.875rem; }
.strip-item > p:last-child { color: var(--muted-dark); font-size: 0.9375rem; }

/* Hero sized for the longer headline: next section stays visible on a laptop's first screen */
.hero h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.6rem); line-height: 0.98; max-width: 19ch; }
.hero-body { padding-block: 7.25rem 3.5rem; max-width: 46rem; gap: 1.25rem; }
@media (max-width: 40rem) { .hero-body { padding-block: 6.5rem 2.75rem; } }
.guide-aside .link, .aside-card .link { justify-self: start; }

/* =====================================================================
   Managed-privacy pass: journey, status guide, instant check results,
   letter of authorization as a document
   ===================================================================== */

/* Six-step journey */
.steps.six { counter-reset: s; }
@media (min-width: 40rem) { .steps.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 58rem) { .steps.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }



/* Instant exposure check results */
.check-results { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line-light); display: grid; gap: 1.25rem; }
.check-results:focus, .cr-title:focus { outline: none; }
.cr-head { display: grid; gap: 0.5rem; }
.cr-title { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); line-height: 1.05; }
.cr-title span { display: inline-block; font: 500 0.875rem/1.2 var(--sans); color: var(--ink-2); vertical-align: middle; margin-left: 0.25rem; }
.cr-sum { color: var(--ink); font-weight: 500; }
.cr-how { color: var(--ink-2); font-size: 0.9375rem; }
.cr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.cr-item { position: relative; border: 1px solid var(--line-light); border-radius: 14px; padding: 0.95rem 1.05rem; display: grid; gap: 0.35rem; background: var(--white); }
.cr-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.35rem 1rem; }
.cr-name { font: 400 1.35rem/1.2 var(--serif); font-weight: 400; }
.cr-look { justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--cyan-deep); font-weight: 600; text-underline-offset: 0.25em; }
.cr-programs h4 { font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-deep); margin: 0 0 0.6rem; }
.cr-programs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9rem; color: var(--ink-2); }
.cr-programs .st { white-space: normal; color: var(--ink); }
.cr-note { color: var(--ink-2); }
.cr-send { background: var(--mist); border: 1px solid var(--line-light); border-radius: 14px; padding: 1.15rem 1.25rem; display: grid; gap: 0.65rem; }
.cr-send-h { font: 400 1.45rem/1.2 var(--serif); color: var(--ink); }
.cr-send p { color: var(--ink-2); }
.cr-send .link { color: var(--cyan-deep); }

/* Letter of authorization: intro, fill-in panel and the document itself */
.loa-top { display: grid; gap: 2rem; }
@media (min-width: 58rem) { .loa-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.loa-how { display: grid; gap: 1rem; }
.loa-how a { color: var(--cyan-deep); }
.loa { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 64rem) {
  .loa { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .loa-fill { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow: auto; }
}
.loa-fill { gap: 1.1rem; }
.loa-fill h2 { font-size: 1.6rem; line-height: 1.1; margin-top: 0.45rem; }
.loa-fill fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.8rem; min-width: 0; }
.loa-fill legend { font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); padding: 0 0 0.5rem; }
.loa-fill .field input { min-height: 2.75rem; padding: 0.55rem 0.75rem; }
.loa-fill .actions .btn { flex: 1 1 auto; }
.flabel { font-weight: 600; font-size: 0.9375rem; }
.seg { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.seg label { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid #A3AEC0; border-radius: 999px; padding: 0.45rem 0.9rem; min-height: 2.75rem; cursor: pointer; font-size: 0.9375rem; }
.seg label:has(input:checked) { border-color: var(--ink); background: var(--mist); }
.seg input { accent-color: var(--cyan-deep); width: 1.05rem; height: 1.05rem; margin: 0; }
.loa-doc { min-width: 0; }
.loa-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 0.9rem; }
.loa-paper { background: var(--white); color: var(--ink); border: 1px solid var(--line-light); border-radius: 6px; max-width: 52rem;
  box-shadow: 0 1px 2px rgba(11, 22, 38, .06), 0 22px 60px rgba(11, 22, 38, .12); padding: clamp(1.4rem, 0.8rem + 3vw, 3.75rem); font-size: 0.9625rem; line-height: 1.55; }
.loa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--cyan-deep); }
.loa-mark { display: inline-flex; align-items: center; gap: 0.55rem; font: 400 1.6rem/1 var(--serif); color: var(--ink); }
.loa-mark svg { width: 26px; height: 26px; }
.loa-mark svg circle { stroke: var(--cyan-deep); }
.loa-mark svg path { stroke: var(--ink); }
.loa-meta { text-align: right; font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); }
.loa-body { display: grid; gap: 1.4rem; margin-top: 1.6rem; }
.loa-body section { display: grid; gap: 0.6rem; }
.loa-body p { color: #2E3A4F; }
.loa-title { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.1rem); line-height: 1.15; color: var(--ink); }
.loa-to { color: var(--ink-2) !important; }
.loa-body h3 { display: flex; align-items: center; gap: 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line-light);
  font: 600 0.8rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.loa-n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 0.72rem; letter-spacing: 0; }
.loa-fields { margin: 0; display: grid; gap: 0.6rem 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.loa-fields div { border: 1px solid var(--line-light); border-radius: 8px; padding: 0.55rem 0.75rem 0.45rem; min-height: 3.75rem; display: grid; align-content: space-between; gap: 0.2rem; }
.loa-fields dt { font-size: 0.75rem; color: var(--ink-2); }
.loa-fields dd { margin: 0; min-height: 1.45em; }
.loa-fields .blank { display: block; border: 0; min-width: 0; height: auto; min-height: 1.45em; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.blank.is-filled { font-weight: 600; color: var(--ink); height: auto; padding: 0 0.15rem; }
.loa-purposes { list-style: none; margin: 0; padding: 0; counter-reset: p; display: grid; gap: 0.55rem; }
.loa-purposes li { counter-increment: p; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); color: #2E3A4F; }
.loa-purposes li::before { content: counter(p) "."; font-weight: 700; color: var(--cyan-deep); }
.loa-line .blank { min-width: min(17rem, 100%); }
.cap.is-deleted { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-2); }
.loa-paper .sign div { border-top: 0; padding-top: 0; margin-top: 2.1rem; display: grid; gap: 0.3rem; }
.sig-val { display: block; min-height: 1.5em; border-bottom: 1px solid var(--ink); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sig-label { font-size: 0.8125rem; color: var(--ink-2); }
.loa-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--line-light); font-size: 0.75rem; color: var(--ink-2); }

@media print {
  @page { margin: 14mm; }
  [data-page="authorization.html"] .page-head { display: none !important; }
  .loa-fill, .loa-toolbar { display: none !important; }
  .loa-section { padding: 0 !important; border: 0 !important; }
  .loa-section .wrap { padding: 0; max-width: none; }
  .loa { display: block; }
  .loa-paper { box-shadow: none; border: 0; border-radius: 0; padding: 0; max-width: none; font-size: 10pt; line-height: 1.42; }
  .loa-body { gap: 0.65rem; margin-top: 0.8rem; }
  .loa-body section { gap: 0.3rem; }
  .loa-body h3 { padding-top: 0.5rem; }
  .loa-title { font-size: 15pt; }
  .loa-fields div { min-height: 0; padding: 0.3rem 0.5rem; }
  .loa-paper .sign div { margin-top: 1.5rem; }
  .loa-n, .loa-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .loa-paper, .loa-body p, .loa-purposes li, .loa-title { color: #000 !important; }
}
@media (min-width: 58rem) { #check > .wrap > .head { position: sticky; top: 1.5rem; align-self: start; } }
@media (min-width: 64rem) { .foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media print {
  @page { margin: 12mm 13mm; }
  .loa-paper { font-size: 9.5pt; line-height: 1.35; }
  .loa-head { padding-bottom: 0.5rem; }
  .loa-body { gap: 0.4rem; margin-top: 0.55rem; }
  .loa-body section { gap: 0.2rem; }
  .loa-body h3 { padding-top: 0.4rem; }
  .loa-fields { gap: 0.3rem 0.5rem; }
  .loa-fields div { padding: 0.2rem 0.45rem; gap: 0; border-radius: 4px; }
  .loa-fields dd, .loa-fields .blank { min-height: 1.25em; }
  .loa-purposes { gap: 0.2rem; }
  .loa-paper .sign { gap: 0.6rem 2rem; }
  .loa-paper .sign div { margin-top: 1.15rem; }
  .loa-sign-sec { break-inside: avoid; }
  .loa-foot { margin-top: 0.8rem; padding-top: 0.4rem; }
}
.cr-send .link, .form-status .link { display: inline-flex; align-items: center; min-height: 2.75rem; }
table.trackers td[data-label="Shows"] { color: var(--ink-2); }
.trail b { margin-bottom: 0; }

/* =====================================================================
   Calmer home page: minimal hero, the film
   ===================================================================== */
.hero-body { padding-block: 9rem 4.5rem; gap: 1.75rem; }
@media (max-width: 40rem) { .hero-body { padding-block: 8.5rem 3.25rem; } }
.hero .actions { margin-top: 0.25rem; }

.film-section .wrap { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.film-h { max-width: 16ch; }
.film { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--navy-950);
  border: 1px solid var(--line-dark); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); aspect-ratio: 16 / 9; }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 3.25rem; padding: 0 1.4rem 0 0.6rem; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(7, 14, 26, .72); color: var(--text-dark); font: 600 0.95rem/1 var(--sans); backdrop-filter: blur(6px); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(232, 238, 246, .18); transition: opacity .25s, transform .25s; }
.film-play:hover { background: rgba(7, 14, 26, .88); }
.film-icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--cyan); position: relative; flex: none; }
.film-icon::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-left: 0.7rem solid #06111F; border-top: 0.45rem solid transparent; border-bottom: 0.45rem solid transparent; }
/* While playing: a small pause button in the corner */
.film.is-playing .film-play { left: auto; top: auto; right: 0.9rem; bottom: 0.9rem; transform: none; padding: 0; min-height: 2.75rem; width: 2.75rem;
  justify-content: center; opacity: .55; }
.film.is-playing .film-play:hover, .film.is-playing .film-play:focus-visible { opacity: 1; }
.film.is-playing .film-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.film.is-playing .film-icon { width: 2.75rem; height: 2.75rem; background: rgba(232, 238, 246, .9); }
.film.is-playing .film-icon::before { border: 0; width: 0.75rem; height: 0.85rem; left: 50%;
  background: linear-gradient(90deg, #06111F 0 35%, transparent 35% 65%, #06111F 65%); }
@media (max-width: 40rem) { .film { border-radius: 14px; } .film-play { font-size: 0.875rem; } }
@media (prefers-reduced-motion: reduce) { .film-play { transition: none; } }
@media (max-width: 58rem) { table.trackers .st { white-space: normal; align-items: flex-start; } table.trackers .st::before { margin-top: 0.3em; } }

/* Check results: list, status and link only */
.cr-head .link { color: var(--cyan-deep); display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Request step 2: fields carried over from step 1 */
.field input.is-carried { background: var(--mist); }
.hint.carried { color: var(--cyan-deep); }
/* Pricing "Five or more aircraft": the text block keeps its natural spacing next to the photo */
.fleets .grid { align-items: center; }
.fleets .body { align-content: start; gap: 1.1rem; }
.fleets .body .actions { margin-top: 0.4rem; }
/* Phones: footer links and checkboxes are at least 44 px tall to touch */
@media (max-width: 40rem) {
  .site-foot .foot-grid a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .foot-grid > div { gap: 0; }
}
/* Checkboxes: the whole label is the touch target, at least 44 px tall on touch screens */
@media (max-width: 64rem) {
  label.check { min-height: 2.75rem; align-items: start; }
  label.check input { width: 1.5rem; height: 1.5rem; margin: 0; }
}

/* =====================================================================
   Typography refresh (4 October 2026): same typefaces and colours.
   Tighter display setting, calmer text rhythm, figures that line up.
   ===================================================================== */
body { line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-kerning: normal; }
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, .h2, .final h2 { letter-spacing: -0.022em; }
.hero h1 { letter-spacing: -0.026em; line-height: 0.96; }
.page-head h1, .h2 { line-height: 0.98; }
h3, .sheet dt, .qa summary, .badges b { letter-spacing: -0.01em; }
.lede, .hero .sub { line-height: 1.5; letter-spacing: -0.006em; }
.eyebrow, .label { font-size: 0.72rem; letter-spacing: 0.16em; }
.btn { letter-spacing: -0.004em; }
.meter-big b, .meter-key b, .tile b, .plan .price b, .strip-price b, table.compare td, .changelog time {
  font-variant-numeric: lining-nums tabular-nums; }

/* Home: what a registration reveals, in facts */
.risk { display: grid; gap: 1.1rem; margin-top: clamp(0.25rem, 0.1rem + 0.8vw, 0.75rem); }
.risk-lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); font-weight: 500; letter-spacing: -0.006em; color: var(--text-dark); }
.risk-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; border-top: 1px solid var(--line-dark); }
.risk-list > div { display: grid; gap: 0.35rem; align-content: start; padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--line-dark); }
.risk-list dt { font: 400 1.5rem/1.1 var(--serif); letter-spacing: -0.01em; color: var(--text-dark); }
.risk-list dd { margin: 0; font-size: 0.9375rem; color: var(--muted-dark); }
@media (max-width: 30rem) { .risk-list { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 58rem) {
  .risk-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-bottom: 1px solid var(--line-dark); }
  .risk-list > div { border-bottom: 0; padding: 1.4rem clamp(1rem, 0.2rem + 1.5vw, 2rem); }
  .risk-list > div + div { border-left: 1px solid var(--line-dark); }
  .risk-list > div:first-child { padding-left: 0; }
  .risk-list > div:last-child { padding-right: 0; }
}
.risk-foot { color: var(--muted-dark); max-width: 46rem; }
.risk-punch { font: 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.08 var(--serif); letter-spacing: -0.018em; color: var(--text-dark); max-width: 30ch; text-wrap: balance; }
.risk-punch em { color: var(--cyan); }

/* Coverage change log */
.changelog time { font: 400 1.375rem/1.3 var(--serif); }
/* Large counts in the sans: the serif's "1" reads as "l" ("11" looked like "ll") */
.tile b, .meter-big b { font-family: var(--sans); font-weight: 500; letter-spacing: -0.04em; }
.tile b { font-size: 2.8rem; }
.meter-big b { font-size: 3.5rem; }
.tile-total b { font-size: 4rem; }