/* =========================================================
   Defect Remedian — marketing site
   One committed visual world: deep navy + paper + hi-vis.
   Navy #002046 comes from the product design system; the
   accent is hi-vis vest yellow-green, spent only on CTAs,
   the signature, and the one full-bleed statement band.
   ========================================================= */

:root {
  --navy-950: #001328;
  --navy-900: #002046;
  --navy-800: #0A2E5C;
  --paper:    #FFFFFF;
  --ground:   #EEF2F6;
  --ink:      #0B1826;
  --body:     #33475E;
  /* #5F718A read 4.43:1 on --ground and 4.23:1 behind .chip-plain, both under AA.
     Every --muted usage is dark text on a light surface, so darkening is safe. */
  --muted:    #54657D;
  --rule:     #DDE5ED;
  --rule-dk:  #C4D0DE;

  --on-dark:       #EAF0F7;
  --on-dark-soft:  #A9BED6;
  --on-dark-faint: #718BA9;
  --rule-dark:     rgba(255, 255, 255, 0.15);

  --hivis: #D8F14A;
  --hivis-hi: #E4FA6B;

  --crit: #C2392C;
  /* Was #C9721B, which put .chip-high at 3.12:1 and .chip-prog at 3.22:1 on their
     own tints. Same burnt-amber hue, dark enough to clear AA at the chip's 9.5px. */
  --high: #A05711;
  --med:  #C9A81B;
  --low:  #7C93AD;
  --ok:   #2C7A55;

  --display: "Archivo", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --text:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  --shell: 1160px;
  --gut: 32px;
}

/* Shared layouts for the product guides and downloadable snag register. */
.resource-hero h1 { max-width: 22ch; font-size: clamp(36px, 5.5vw, 66px); line-height: 1.05; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; color: var(--on-dark-soft); margin-bottom: 36px; }
.resource-hero .eyebrow { color: var(--on-dark-soft); }
.resource-lede { max-width: 65ch; color: var(--on-dark); font-size: 20px; margin-top: 24px; }
.shell.resource-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 64px; padding-top: 56px; padding-bottom: 64px; align-items: start; }
.resource-body section + section { margin-top: 42px; }
.resource-body h2 { font-size: clamp(25px, 3vw, 34px); margin-bottom: 20px; line-height: 1.15; }
.resource-body h3 { margin-bottom: 10px; }
.resource-body a:not(.btn) { color: var(--navy-900); text-underline-offset: 3px; }
.resource-steps, .resource-checklist { padding-left: 24px; }
.resource-steps li { padding-left: 8px; margin: 24px 0; }
.resource-steps li::marker { font-family: var(--mono); color: var(--navy-900); font-weight: 600; }
.resource-checklist li { margin-bottom: 12px; }
.resource-aside { padding: 28px; background: var(--ground); border-top: 4px solid var(--navy-900); }
.resource-aside h2 { font-size: 28px; margin-bottom: 18px; }
.resource-aside .btn { width: 100%; }
.resource-aside nav { display: grid; gap: 16px; margin-top: 28px; font-size: 15px; }
.resource-download { padding: 24px; background: var(--ground); margin-bottom: 40px; }
.resource-download p { margin-top: 12px; font-size: 14px; }
.resource-table { margin: 24px 0; overflow-x: auto; }
.resource-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.resource-table caption { text-align: left; font-weight: 700; padding-bottom: 12px; }
.resource-table th, .resource-table td { padding: 14px 12px; border-bottom: 1px solid var(--rule-dk); text-align: left; vertical-align: top; }
.resource-table thead { background: var(--ground); }
.resource-table th[scope="row"] { width: 40%; }
.resource-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.resource-cards article { padding: 28px; background: var(--paper); border-top: 3px solid var(--navy-900); }
.resource-cards h3 { margin-bottom: 16px; font-size: 22px; }
.resource-cards p { font-size: 16px; }
@media (max-width: 800px) {
  .shell.resource-layout { grid-template-columns: 1fr; gap: 36px; padding-top: 32px; }
  .resource-cards { grid-template-columns: 1fr; }
  .resource-download { padding: 18px; }
  .resource-download .btn { white-space: normal; text-align: center; width: 100%; padding: 14px 12px; }
}

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

/* The topbar is sticky and 69px tall, so an un-padded jump to #faq or #pricing parks
   the heading underneath it — and a focused FAQ summary can land fully hidden. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

a { color: inherit; }
/* Hi-vis is 1.27:1 on white and 1.12:1 on --ground, so a single hi-vis focus ring is
   invisible on every light band — including both legal pages, whose only link is the
   one back to the site. Navy is the default; hi-vis is scoped to the dark surfaces.
   Ratios: navy 16.2:1 on paper, 14.4:1 on ground, 12.8:1 on the hi-vis band;
   hi-vis 14.8:1 on --navy-950, 12.8:1 on --navy-900. */
:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; border-radius: 2px; }
.topbar :focus-visible,
.hero :focus-visible,
.band-dark :focus-visible,
.footer :focus-visible,
.skip:focus { outline: 3px solid var(--hivis); outline-offset: 3px; border-radius: 2px; }
/* The skip link's target: it takes programmatic focus so the jump lands, but a
   page-sized ring around all of <main> indicates nothing operable. */
main:focus-visible { outline: none; }

.skip { position: absolute; left: -9999px; background: var(--hivis); color: var(--navy-900); padding: 12px 18px; font-weight: 700; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }

/* ─────────── type ─────────── */

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; text-wrap: balance; }

h1 {
  font-size: clamp(46px, 7.6vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: #FFFFFF;
}

h2 { font-size: clamp(28px, 4.1vw, 46px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }
h3 { font-size: 19px; line-height: 1.24; letter-spacing: -0.015em; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--on-dark-faint);
  margin: 0 0 18px;
}
.eyebrow-dark { color: var(--muted); }

.lead-h2 { max-width: 19ch; margin-bottom: 20px; }
.lead-h2.on-dark { color: #FFFFFF; }
.lead-p { font-size: 19px; color: var(--muted); max-width: 54ch; margin-bottom: 44px; }

/* ─────────── buttons ─────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--text); font-size: 16px; font-weight: 650;
  padding: 15px 26px; border-radius: 3px;
  background: var(--navy-900); color: #FFFFFF;
  text-decoration: none; border: 1px solid var(--navy-900);
  transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
  white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--navy-800); border-color: var(--navy-800); transform: translateY(-1px); }

.btn-lg { padding: 18px 34px; font-size: 17px; }
.btn-sm { padding: 10px 18px; font-size: 14.5px; }

.btn-hivis { background: var(--hivis); border-color: var(--hivis); color: var(--navy-900); font-weight: 750; }
.btn-hivis:hover { background: var(--hivis-hi); border-color: var(--hivis-hi); }

.btn-ghost { background: transparent; color: var(--on-dark); border-color: var(--rule-dark); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.34); }

@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* ─────────── topbar ─────────── */

.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,19,40,0.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-dark);
}
.topbar-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--on-dark); font-family: var(--display); font-weight: 800;
  font-size: 16.5px; letter-spacing: -0.02em; flex: none;
}
.topnav { display: flex; gap: 26px; margin-left: auto; }
.topnav a {
  text-decoration: none; color: var(--on-dark-soft); font-size: 14.5px; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
/* The scroll-spy sets this class rather than inline styles: inline declarations
   outrank the :hover rule below and used to kill the hover underline for good.
   Declared before :hover so hovering an already-current link still resolves. */
.topnav a.is-current { color: #FFFFFF; border-bottom-color: var(--hivis); }
.topnav a:hover { color: #FFFFFF; border-bottom-color: var(--hivis); }
.topbar .btn-sm { flex: none; }
@media (max-width: 980px) { .topnav { display: none; } .topbar .btn-sm { margin-left: auto; } }
/* Below ~380px the wordmark and the demo button stop fitting side by side and push
   the whole page into horizontal scroll. Shrink both, and let the wordmark ellipsize
   rather than overflow if the display font falls back to a wider one. */
@media (max-width: 380px) {
  .topbar-in { gap: 12px; }
  .brand { flex: 0 1 auto; min-width: 0; font-size: 14.5px; gap: 7px; }
  .brand svg { width: 22px; height: 22px; }
  .brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .btn-sm { padding: 11px 13px; font-size: 13.5px; }
}

/* ─────────── hero ─────────── */

.hero {
  background: var(--navy-950); color: var(--on-dark-soft);
  padding: clamp(64px, 9vw, 112px) 0 clamp(72px, 9vw, 118px);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 85% 75% at 68% 8%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 68% 8%, #000 0%, transparent 70%);
  pointer-events: none;
}
.hero-in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.hero h1 + .lede { margin-top: 24px; }
.lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--on-dark-soft); max-width: 44ch; }
.lede strong { color: #FFFFFF; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.trust {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--mono); font-size: 12.5px; color: var(--on-dark-faint);
}
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid var(--hivis); border-bottom: 2px solid var(--hivis);
  transform: rotate(-45deg); flex: none; margin-top: -3px;
}

/* ─────────── phone illustration ─────────── */

.hero-visual { position: relative; display: flex; justify-content: center; padding: 20px 0; }

.phone {
  width: 100%; max-width: 296px;
  background: #060F1C;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 30px; padding: 11px;
  box-shadow: 0 40px 80px -34px rgba(0,0,0,0.85);
  position: relative;
}
.phone-notch {
  width: 82px; height: 5px; border-radius: 99px;
  background: rgba(255,255,255,0.22); margin: 2px auto 9px;
}
.phone-screen {
  background: #F3F6F9; border-radius: 21px; padding: 14px;
  display: grid; gap: 9px;
}

.ph-bar { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.ph-back { color: var(--muted); font-size: 20px; line-height: 1; }
.ph-title { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); margin-right: auto; }

.chip {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 99px; white-space: nowrap;
}
.chip-offline { background: var(--navy-900); color: var(--hivis); }
.chip-high    { background: #FBEEE0; color: var(--high); }
.chip-plain   { background: #E7EDF4; color: var(--muted); }

.ph-photo {
  background: linear-gradient(140deg, #C3D0DE 0%, #94A8BE 55%, #7B90A8 100%);
  border-radius: 6px; height: 104px;
  display: grid; place-content: center; justify-items: center; gap: 5px;
  color: rgba(255,255,255,0.95);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
}

.ph-field { display: grid; gap: 2px; }
.ph-field span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.ph-field b { font-size: 12.5px; color: var(--ink); font-weight: 600; line-height: 1.3; }

.ph-row { display: flex; gap: 6px; }

.ph-save {
  margin-top: 3px; background: var(--navy-900); color: var(--hivis);
  border-radius: 4px; padding: 10px; text-align: center;
  font-size: 12px; font-weight: 650;
}

.float-card {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: var(--paper); border-radius: 4px; padding: 11px 14px;
  box-shadow: 0 20px 44px -20px rgba(0,0,0,0.6);
  font-size: 12px; color: var(--muted); line-height: 1.35;
}
.float-card b { display: block; font-size: 13px; color: var(--ink); font-family: var(--display); font-weight: 700; }
.float-card .mono { font-size: 10.5px; }
.float-sync { top: 8%; left: -6px; }
.float-sign { bottom: 7%; right: -10px; border-left: 3px solid var(--hivis); }
.fc-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--ok); flex: none; }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-visual { order: 2; margin-top: 8px; }
  .float-sync { left: 2%; }
  .float-sign { right: 2%; }
}
@media (max-width: 420px) {
  .float-card { position: static; margin: 10px auto 0; box-shadow: none; border: 1px solid var(--rule); }
  .hero-visual { flex-direction: column; align-items: center; }
}

/* ─────────── bands ─────────── */

.band { padding: clamp(60px, 8vw, 108px) 0; }
.band-paper  { background: var(--paper); }
.band-ground { background: var(--ground); }
.band-dark   { background: var(--navy-900); color: var(--on-dark-soft); }
.band-dark h2, .band-dark h3 { color: #FFFFFF; }
.band-dark strong { color: #FFFFFF; }

/* ─────────── problem ─────────── */

.villains { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.villain {
  border: 1px solid var(--rule); border-top: 3px solid var(--crit);
  border-radius: 3px; padding: 22px 22px 24px; background: var(--paper);
}
.v-name { font-family: var(--mono); font-size: 14.5px; color: var(--ink); font-weight: 500; margin: 0 0 3px; word-break: break-word; }
.v-kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crit); margin: 0 0 12px; }
.v-fail { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0; }

.punch {
  margin-top: 40px; font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.3; letter-spacing: -0.02em;
  color: var(--muted); max-width: 30ch;
}
.punch strong { color: var(--ink); }

/* ─────────── hi-vis statement band ─────────── */

.band-hivis { background: var(--hivis); padding: clamp(52px, 6.5vw, 82px) 0; }
.clarify-in { display: grid; gap: 20px; }
.band-hivis h2 { color: var(--navy-900); max-width: 24ch; font-size: clamp(28px, 4.4vw, 50px); }
.band-hivis p { color: #2A3A0B; font-size: clamp(17px, 2vw, 19.5px); max-width: 58ch; font-weight: 500; }

/* ─────────── steps ─────────── */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 26px; }
.step { display: grid; gap: 11px; align-content: start; }
.step-n {
  font-family: var(--display); font-size: 42px; font-weight: 900;
  line-height: 1; letter-spacing: -0.05em; color: var(--hivis);
  -webkit-text-stroke: 1.5px var(--navy-900);
  text-stroke: 1.5px var(--navy-900);
}
.step p { font-size: 16px; line-height: 1.55; margin: 0; color: var(--muted); }
.step-win {
  margin-top: 4px !important; padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 13px !important; color: var(--navy-900) !important; font-weight: 500;
}

.mid-cta {
  margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
}
.mid-cta p { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; }

/* ─────────── see it ─────────── */

/* min() so the 320px track floor collapses on a 320px phone instead of forcing the
   whole page into horizontal scroll. */
.see-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 30px; align-items: start; }
.shot { margin: 0; display: grid; gap: 14px; }
.shot figcaption { font-size: 14.5px; color: var(--on-dark-soft); line-height: 1.5; }

.browser { background: var(--paper); border-radius: 5px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0,0,0,0.7); }
.br-bar { display: flex; align-items: center; gap: 6px; padding: 10px 13px; background: var(--ground); border-bottom: 1px solid var(--rule); }
.br-bar > span { width: 9px; height: 9px; border-radius: 99px; background: var(--rule-dk); flex: none; }
.br-url {
  margin-left: 10px; background: var(--paper); border: 1px solid var(--rule); border-radius: 99px;
  padding: 4px 12px; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-body { padding: 6px 0; }

.reg-row {
  display: grid; grid-template-columns: 84px 1fr auto;
  gap: 12px; align-items: center; padding: 11px 16px;
  border-bottom: 1px solid var(--rule); border-left: 3px solid transparent;
  font-size: 13.5px; color: var(--body);
}
.reg-row:last-child { border-bottom: 0; }
.reg-row .mono { font-size: 11.5px; color: var(--muted); }
.reg-head {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted); background: #F7F9FB;
}
.s-critical { border-left-color: var(--crit); }
.s-high { border-left-color: var(--high); }
.s-med  { border-left-color: var(--med); }
.s-low  { border-left-color: var(--low); }

.chip-open  { background: #FBEDEC; color: var(--crit); }
.chip-prog  { background: #FBF3E4; color: var(--high); }
.chip-ready { background: #E9F0F8; color: var(--navy-800); }
.chip-done  { background: #E7F3EC; color: var(--ok); }

/* certificate */
.cert { background: var(--paper); border-radius: 5px; border-top: 5px solid var(--hivis); overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0,0,0,0.7); }
.cert-head { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: baseline; padding: 15px 20px; background: var(--ground); border-bottom: 1px solid var(--rule); }
.cert-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--navy-900); }
.cert-frozen { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cert-body { padding: 4px 20px 10px; }
.cert-line { display: flex; flex-wrap: wrap; gap: 3px 20px; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cert-line:last-child { border-bottom: 0; }
.cert-line span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.cert-line b { font-size: 15px; color: var(--ink); font-weight: 650; }
.cert-digest b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; background: var(--hivis); padding: 2px 7px; border-radius: 2px; word-break: break-all; }

.see-note { margin-top: 26px; font-family: var(--mono); font-size: 12px; color: var(--on-dark-faint); }

/* ─────────── who ─────────── */

.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.who {
  background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--navy-900);
  border-radius: 3px; padding: 24px 24px 26px; display: grid; gap: 10px; align-content: start;
}
/* The buyer-segment term is the card's heading now, so .who-tag has to restate the
   weight and leading it would otherwise inherit from the h3 element rule. */
.who-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin: 0; font-weight: 400; line-height: 1.4; }
.who .who-claim { font-family: var(--display); font-size: 20px; line-height: 1.24; letter-spacing: -0.015em; font-weight: 700; color: var(--ink); margin: 0; text-wrap: balance; }
.who p { font-size: 15.5px; line-height: 1.55; margin: 0; color: var(--muted); }

/* ─────────── reasons ─────────── */

.reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 30px; }
.reason { display: grid; gap: 14px; align-content: start; }
.r-quote {
  font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.25; color: var(--ink); margin: 0;
  padding-left: 16px; border-left: 4px solid var(--hivis);
}
.r-fix { font-size: 15.5px; line-height: 1.58; color: var(--muted); margin: 0; }

/* ─────────── pricing ─────────── */

.price-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 40px;
}
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.price-list li {
  padding: 16px 0; border-bottom: 1px solid var(--rule);
  font-size: 16.5px; line-height: 1.55; color: var(--muted);
}
.price-list li:first-child { border-top: 1px solid var(--rule); }
.price-list b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 2px; }

.price-quote { background: var(--paper); border: 1px solid var(--rule); border-radius: 5px; padding: 28px; }
.pq-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.pq-body { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0 0 22px; }
/* minmax(0, …) so a nowrap button inside the card cannot set a track floor wider
   than a 320px phone. */
@media (max-width: 860px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .price-quote { padding: 22px 18px; } .price-quote .btn { width: 100%; } }

/* ─────────── get started ─────────── */

.start-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(34px, 5vw, 70px); align-items: start; }
.start-lede { font-size: 17.5px; color: var(--on-dark-soft); max-width: 42ch; margin-bottom: 30px; }
.start-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 2px; }
.start-steps li {
  counter-increment: s; position: relative;
  padding: 20px 0 20px 54px; border-top: 1px solid var(--rule-dark);
  font-size: 15.5px; line-height: 1.55; color: var(--on-dark-soft);
}
.start-steps li:last-child { border-bottom: 1px solid var(--rule-dark); }
.start-steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 20px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--hivis);
}
.start-steps b { color: #FFFFFF; font-weight: 700; }
@media (max-width: 860px) { .start-in { grid-template-columns: 1fr; } }

/* ─────────── faq ─────────── */

.faq { display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--display); font-size: 18.5px; font-weight: 700;
  letter-spacing: -0.015em; color: var(--ink); line-height: 1.3;
}
/* The questions are real headings so they carry outline weight, but they must render
   exactly as the summary did: the h3 element rule would otherwise force 19px and
   break the 17px step-down below 620px. `font: inherit` does not carry
   letter-spacing, and `display: inline` keeps summary a single line box so the
   absolutely-positioned chevron stays put. */
.faq summary h3 { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; display: inline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 27px;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--navy-900); border-bottom: 2.5px solid var(--navy-900);
  transform: rotate(45deg); transition: transform 180ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 31px; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq .a { padding: 0 40px 24px 0; }
.faq .a p { font-size: 16.5px; line-height: 1.62; color: var(--muted); max-width: 66ch; }

/* ─────────── contact ─────────── */

.contact-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(36px, 5vw, 68px); align-items: start; }
.contact-lede { font-size: 17.5px; line-height: 1.55; color: var(--on-dark-soft); max-width: 46ch; }
.contact-direct { display: grid; gap: 8px; margin-top: 28px; }
.contact-direct a {
  font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.025em;
  color: #FFFFFF; text-decoration: none; justify-self: start;
  border-bottom: 2px solid var(--hivis); word-break: break-all;
}
.contact-direct a:hover { color: var(--hivis); }
.contact-route { margin-top: 28px; color: var(--on-dark-soft); max-width: 42ch; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.lead-form {
  background: rgba(255,255,255,0.05); border: 1px solid var(--rule-dark);
  border-radius: 4px; padding: 28px 26px 26px; display: grid; gap: 15px;
}
/* line-height restated: as an h2 this would otherwise inherit the display-heading 1.04. */
.lf-title { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.3; color: #FFFFFF; margin: 0 0 2px; }
.lf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lf-field { display: grid; gap: 6px; }
.lf-field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-soft); }

.lf-field input,
.lf-field select,
.lf-field textarea {
  font-family: var(--text); font-size: 15.5px; color: #FFFFFF;
  background: rgba(0,0,0,0.28); border: 1px solid var(--rule-dark);
  border-radius: 3px; padding: 12px 13px; width: 100%;
  transition: border-color 140ms ease, background 140ms ease;
}
.lf-field textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.lf-field input::placeholder, .lf-field textarea::placeholder { color: var(--on-dark-faint); }
.lf-field input:hover, .lf-field select:hover, .lf-field textarea:hover { border-color: rgba(255,255,255,0.34); }
/* background-color, not the background shorthand: the shorthand also reset
   background-image, wiping the custom select arrow exactly while the select was
   focused. The transparent outline is load-bearing too — forced-colors mode
   discards the border and box-shadow, and repaints this outline as a real ring. */
.lf-field input:focus, .lf-field select:focus, .lf-field textarea:focus {
  outline: 3px solid transparent; outline-offset: 0;
  border-color: var(--hivis); background-color: rgba(0,0,0,0.4);
  box-shadow: 0 0 0 3px rgba(216,241,74,0.18);
}
.lf-field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #A9BED6 50%), linear-gradient(135deg, #A9BED6 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.lf-field select option { background: var(--navy-900); color: #FFFFFF; }

.lf-submit { width: 100%; margin-top: 4px; }
/* --on-dark-faint measured 4.05:1 against the composited form panel. */
.lf-fine { font-size: 13px; color: var(--on-dark-soft); margin: 0; text-align: center; }
.lf-fine a { color: #FFFFFF; }
.lf-fine a:hover { color: var(--hivis); }

.contact-book { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule-dark); }
.contact-book .contact-route { margin-bottom: 14px; }
@media (max-width: 860px) { .contact-in { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .contact-book .btn { width: 100%; } }
@media (max-width: 480px) { .lf-pair { grid-template-columns: 1fr; } }

/* ─────────── footer ─────────── */

.footer { background: var(--navy-950); color: var(--on-dark-faint); padding: 46px 0 54px; border-top: 1px solid var(--rule-dark); }
.footer-in { display: grid; gap: 18px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--rule-dark); }
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--on-dark); letter-spacing: -0.02em; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a { color: var(--on-dark-soft); text-decoration: none; font-size: 14.5px; }
.footer-nav a:hover { color: var(--hivis); }
/* Thumbs, not cursors: the footer links are 23px tall by default, well under a
   comfortable touch target. Site teams read this page on a phone. */
@media (pointer: coarse) {
  .footer-nav { gap: 0 20px; }
  .footer-nav a { padding: 9px 0; }
}
.footer-note { font-size: 14.5px; line-height: 1.55; color: var(--on-dark-soft); max-width: 62ch; margin: 0; }
.footer-business { color: var(--on-dark-soft); font-size: 13px; line-height: 1.6; }
.footer-business p { margin: 0; }
/* The identity fragment wraps the legal name in <strong>, which the global rule
   paints ink — near-black on the navy footer. The footer is not a .band-dark, so
   that band's override never reaches it. */
.footer strong { color: #FFFFFF; }
.footer-business a { color: var(--hivis); }
.footer-fine { font-size: 12.5px; line-height: 1.55; max-width: 72ch; margin: 0; }
.legal-identity { margin: 1rem 0 1.5rem; padding: 1rem; border-left: 4px solid var(--hivis); background: #F7F9FB; }
.legal-identity p { margin: 0.25rem 0; }
/* Header, then a main that takes exactly the space left over, then the footer.
   min-height:100vh on the article — while the band added its own clamp() padding on
   top — guaranteed a scrollbar on every legal page, however short the content. */
.page-legal { min-height: 100vh; display: flex; flex-direction: column; }
.page-legal .legal-band { padding: 0; flex: 1; display: grid; }
.legal-page { max-width: 760px; padding-top: 80px; padding-bottom: 80px; }
.band-paper .legal-page h1 { color: var(--navy-900); }
.band-paper .legal-page .eyebrow { color: var(--muted); }
.legal-page h2 { margin-top: 32px; font-family: var(--display); color: var(--navy-900); }
.legal-page p { line-height: 1.7; }
.legal-page-center { display: grid; place-content: center; text-align: center; gap: 20px; }

/* ─────────── reveal ─────────── */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms cubic-bezier(0.22,1,0.36,1), transform 640ms cubic-bezier(0.22,1,0.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ─────────── small screens ─────────── */

@media (max-width: 620px) {
  :root { --gut: 20px; }
  body { font-size: 16px; }
  .lead-p { font-size: 17.5px; }
  .cta-row .btn { width: 100%; }
  .mid-cta .btn { width: 100%; }
  .cert-line { flex-direction: column; align-items: flex-start; gap: 3px; }
  .reg-row { grid-template-columns: 70px 1fr; row-gap: 5px; }
  /* Every child is a span, so this catches the header's "Status" too — targeting
     .chip alone left that label orphaned under "REF" in the 70px column. */
  .reg-row > span:last-child { grid-column: 2; justify-self: start; }
  .faq summary { font-size: 17px; }
}

/* ─────────── print ─────────── */

@media print {
  .topbar, .cta-row, .mid-cta, .lead-form, .skip, .hero-visual { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  /* Resetting the band alone was not enough: .lede, .start-steps li, figcaption,
     .see-note, .eyebrow and the whole footer each set their own light colour and
     kept it, printing white-on-white. The footer is not a .band at all, so its
     navy background survived too. Reset the descendants, not just the container. */
  .hero, .band-dark, .band-hivis, .footer { background: #fff !important; color: #000 !important; }
  .hero *, .band-dark *, .band-hivis *, .footer * {
    background-color: transparent !important; color: #000 !important; box-shadow: none !important;
  }
  /* CSS cannot open a <details> — the old `open: true` here was not a property and
     was dropped, so eleven of the twelve FAQ answers never printed. main.js opens
     them on beforeprint; these are the no-JS fallback. Engines that hide closed
     details at the ::details-content layer honour the second rule; older ones hide
     the contents outside author-CSS reach, which is exactly why the JS path exists. */
  .faq details > .a { display: block !important; }
  .faq details:not([open])::details-content { content-visibility: visible !important; display: block !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
/* Optional analytics controls share the site's colours and remain keyboard accessible. */
.analytics-consent {
  position: fixed;
  z-index: 100;
  bottom: 16px;
  left: 16px;
  width: min(480px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 20px;
  background: #fff;
  color: #002046;
  border: 2px solid #002046;
  border-radius: 8px;
  box-shadow: 0 8px 40px #00132833;
}
.analytics-consent[hidden] { display: none; }
.analytics-consent p { margin: 0 0 16px; font-size: 14px; }
.analytics-consent > div { display: flex; flex-wrap: wrap; gap: 8px; }
.analytics-consent .btn { font-size: 13px; }
.analytics-preferences {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.lf-submit:disabled { opacity: .7; cursor: wait; }
@media print { .analytics-consent, .analytics-preferences { display: none; } }