/* ==========================================================================
   GEObros - geobros.ai
   One stylesheet. No frameworks, no external requests.

   Colors are declared in two layers:
     1. semantic role tokens on :root            (light theme)
     2. the same role tokens under [data-theme]  (dark theme)
   Components only ever reference role tokens, never a raw hex.

   The rule that keeps this readable: one token never serves both sides of a
   contrast pair. --accent-fill is a background and always takes --on-accent
   as its label. --accent-text is only ever used as text on a page background.
   ========================================================================== */

/* --- Light theme (default) ------------------------------------------------ */
:root {
  --bg:                 #FFFFFF;
  --bg-alt:             #F4F7FA;
  --bg-card:            #FFFFFF;
  --bg-card-alt:        #F4F7FA;

  /* "band" = the deliberately dark full-width sections (hero, work, contact) */
  --bg-band:            #001E42;
  --bg-band-2:          #0A2C54;
  /* .20 put the eyebrow's worst realistic pixel (glow peak over the navy) at
     4.56, a 0.06 margin. .14 buys margin at no visible cost. */
  --bg-band-glow:       rgba(0, 183, 135, .14);
  --line-band:          #14395F;

  --line:               #DEE5EC;
  --line-strong:        #C2CEDA;

  --text:               #0B1B2B;
  --text-muted:         #4C5C6C;
  --text-on-band:       #E8F0F7;
  --text-muted-on-band: #A3B7C9;

  --accent-text:        #00795A;  /* text on a page background: #00B787 is 2.58 on white */
  --accent-text-hover:  #005F47;
  --accent-fill:        #00B787;  /* background of a filled control */
  --on-accent:          #001E42;  /* a bright fill takes a near-black label, never white */
  /* #00B787 measured 4.34 at the hero's worst theoretical pixel (glow peak
     over the lower gradient stop). Both themes now share the lighter green,
     which clears 4.5 everywhere on the band and reads the same in both. */
  --accent-on-band:     #17D6A2;  /* text on a band background */
  --accent-soft:        #E6F7F1;
  --accent-soft-line:   #BFE8DA;

  --ok:                 #0F6E4F;
  --header-bg:          rgba(255, 255, 255, .94);

  --shadow-sm: 0 1px 2px rgba(0, 30, 66, .07), 0 1px 3px rgba(0, 30, 66, .09);
  --shadow:    0 2px 4px rgba(0, 30, 66, .06), 0 8px 24px rgba(0, 30, 66, .10);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  --wrap: 1120px;
  --wrap-narrow: 760px;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --s1: .5rem;  --s2: .75rem; --s3: 1rem;   --s4: 1.5rem;
  --s5: 2rem;   --s6: 3rem;   --s7: 4.5rem; --s8: 6rem;

  color-scheme: light;
}

/* --- Dark theme ----------------------------------------------------------
   Two selectors, on purpose: the media query serves visitors who never touch
   the toggle, and [data-theme] wins in both directions once they do. Every
   role token defined above is redefined here, so nothing can fall through. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:                 #061320;
    --bg-alt:             #0B1C2C;
    --bg-card:            #0E2135;
    --bg-card-alt:        #0B1C2C;

    --bg-band:            #0A2544;
    --bg-band-2:          #123353;
    --bg-band-glow:       rgba(0, 183, 135, .16);
    --line-band:          #1D4067;

    --line:               #1B3048;
    --line-strong:        #2C4763;

    --text:               #E6EFF7;
    --text-muted:         #9FB3C6;
    --text-on-band:       #E8F0F7;
    --text-muted-on-band: #A9BDCF;

    --accent-text:        #17D6A2;
    --accent-text-hover:  #4CE5BA;
    --accent-fill:        #00B787;
    --on-accent:          #001E42;
    --accent-on-band:     #17D6A2;
    --accent-soft:        rgba(0, 183, 135, .14);
    --accent-soft-line:   rgba(0, 183, 135, .30);

    --ok:                 #4ED9A4;
    --header-bg:          rgba(6, 19, 32, .94);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 2px 4px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .45);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:                 #061320;
  --bg-alt:             #0B1C2C;
  --bg-card:            #0E2135;
  --bg-card-alt:        #0B1C2C;

  --bg-band:            #0A2544;
  --bg-band-2:          #123353;
  --bg-band-glow:       rgba(0, 183, 135, .16);
  --line-band:          #1D4067;

  --line:               #1B3048;
  --line-strong:        #2C4763;

  --text:               #E6EFF7;
  --text-muted:         #9FB3C6;
  --text-on-band:       #E8F0F7;
  --text-muted-on-band: #A9BDCF;

  --accent-text:        #17D6A2;
  --accent-text-hover:  #4CE5BA;
  --accent-fill:        #00B787;
  --on-accent:          #001E42;
  --accent-on-band:     #17D6A2;
  --accent-soft:        rgba(0, 183, 135, .14);
  --accent-soft-line:   rgba(0, 183, 135, .30);

  --ok:                 #4ED9A4;
  --header-bg:          rgba(6, 19, 32, .94);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 2px 4px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .45);

  color-scheme: dark;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 var(--s3); letter-spacing: -.021em; font-weight: 800; color: var(--text); }
h1 { font-size: clamp(2.05rem, 1.3rem + 3.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .55vw, 1.35rem); font-weight: 750; }
h4 { font-size: 1.0625rem; font-weight: 700; }
p  { margin: 0 0 var(--s3); }
ul, ol { margin: 0 0 var(--s3); padding-left: 1.15rem; }
li { margin-bottom: .4rem; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-text-hover); }
strong, b { font-weight: 700; }
mark { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; border-radius: 3px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg-band); color: var(--text-on-band); padding: .75rem 1rem;
}
.skip:focus { left: 0; }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(3rem, 1.5rem + 6vw, 5.5rem); }
.section--surface { background: var(--bg-alt); border-block: 1px solid var(--line); }
/* A short aside does not need a full section's air around it: Recent work was
   57% vertical padding, which read as an empty section rather than a compact
   statement. */
.section--tight { padding-block: clamp(2rem, 1.2rem + 3vw, 3.25rem); }
.section--band { background: var(--bg-band); border-block: 1px solid var(--line-band); }
.section--band, .section--band h2, .section--band h3, .section--band h4 { color: var(--text-on-band); }
.section--band p, .section--band li { color: var(--text-muted-on-band); }
.section--band strong { color: var(--text-on-band); }
.section--band a { color: var(--accent-on-band); }
.section-head { max-width: 720px; margin-bottom: var(--s5); }

/* --- Sourced figure ------------------------------------------------------
   The prose sat in a 760px column inside a 1120px wrap, leaving 348px of dead
   space on every wide screen. The stat fills it rather than the padding doing
   the work. Stacks under the prose below 880px. */
.geo-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 880px) {
  .geo-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--s6); }
}
.figure {
  background: var(--accent-soft); border: 1px solid var(--accent-soft-line);
  border-left: 4px solid var(--accent-text);
  border-radius: var(--r); padding: var(--s4);
}
.figure-num {
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1; color: var(--accent-text);
  margin: 0 0 var(--s2);
}
.figure-claim { color: var(--text); margin-bottom: var(--s3); }
.figure-src { font-size: .875rem; color: var(--text-muted); margin-bottom: 0; }
.figure-src a { color: var(--text-muted); }
.figure-src a:hover { color: var(--accent-text-hover); }
.section-head p { color: var(--text-muted); font-size: 1.125rem; margin-bottom: 0; }
.section--band .section-head p { color: var(--text-muted-on-band); }
/* Utility classes standing in for the four inline style attributes that
   `style-src 'self'` silently blocked in production on 2026-08-26. */
/* .eyebrow.subhead, not .subhead: a bare class ties .eyebrow on specificity
   and loses on source order, which is how it rendered at .78rem. */
.eyebrow.subhead { font-size: .85rem; }
.tier-grid { margin-bottom: var(--s5); }
.pricing-terms { margin-top: var(--s5); max-width: 75ch; }
.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: var(--s2);
}
.section--band .eyebrow, .hero .eyebrow { color: var(--accent-on-band); }
.lead { font-size: 1.2rem; color: var(--text-muted); }
.section--band .lead { color: var(--text-muted-on-band); }
.muted { color: var(--text-muted); }
.section--band .muted { color: var(--text-muted-on-band); }
.small { font-size: .9375rem; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 68px; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand img { height: 30px; width: auto; display: block; }
.brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark { display: block; }
}
.site-footer .brand img { height: 28px; }
/* The toggles sit before the nav in the markup so a keyboard reaches the menu
   button before the menu it opens. `order` puts them back on the right. */
.nav { order: 2; margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: .98rem; }
.nav a:hover { color: var(--accent-text); }
.nav .btn { color: var(--on-accent); }
.header-tools { order: 3; display: flex; align-items: center; gap: var(--s2); }
.nav-toggle, .theme-toggle {
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-weight: 650; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-toggle { display: none; padding: .5rem .7rem; }
.theme-toggle { width: 40px; height: 40px; padding: 0; flex: 0 0 auto; }
.theme-toggle:hover { border-color: var(--text); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  border-radius: var(--r); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.btn--primary:hover { background: #009B72; border-color: #009B72; color: var(--on-accent); }
.btn--on-band { background: transparent; color: var(--text-on-band); border-color: rgba(255, 255, 255, .38); }
.btn--on-band:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 520px at 78% -12%, var(--bg-band-glow), transparent 62%),
    linear-gradient(180deg, var(--bg-band) 0%, var(--bg-band-2) 100%);
  color: var(--text-on-band);
  padding-block: clamp(3rem, 1.5rem + 7vw, 5.5rem);
  border-bottom: 1px solid var(--line-band);
}
.hero h1 { color: var(--text-on-band); max-width: 24ch; }
/* Patrick wants the payoff on its own line, but only where there is room for
   it: forcing the break on a phone would leave a ragged single word above. */
@media (min-width: 900px) { .h1-payoff { display: block; } }
.hero-layout { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) {
  .hero-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--s6); }
}
.hero-art-wrap { position: relative; display: grid; place-items: center; }
.hero-art-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(23, 214, 162, .20), transparent 62%);
}
.hero-art { position: relative; width: min(100%, 420px); height: auto; display: block; }

/* Hero art motion. These live here rather than inside the SVG because
   `style-src 'self'` blocks an inline <style> just as it blocks a style
   attribute, and an external stylesheet is the only CSP-clean home for them.
   transform-origin is in the SVG's own user units (viewBox 0 0 520 560). */
@keyframes gb-orbit-cw  { to { transform: rotate(360deg); } }
@keyframes gb-orbit-ccw { to { transform: rotate(-360deg); } }
@keyframes gb-ping {
  0%   { transform: scale(1);    opacity: .45; }
  70%  { opacity: 0; }
  100% { transform: scale(2.34); opacity: 0; }
}
/* Everything animated is drawn relative to the radar center inside a
   translate(), so the origin is always 0 0 and moving the radar in
   build_hero_art.py never desyncs this file. */
.hero-art .orbit0, .hero-art .orbit1, .hero-art .orbit2,
.hero-art .sweep, .hero-art .pulse0, .hero-art .pulse1 { transform-origin: 0 0; }
.hero-art .sweep  { animation: gb-orbit-cw  22s linear infinite; }
.hero-art .orbit0 { animation: gb-orbit-cw  74s linear infinite; }
.hero-art .orbit1 { animation: gb-orbit-ccw 96s linear infinite; }
.hero-art .orbit2 { animation: gb-orbit-cw 128s linear infinite; }
.hero-art .pulse0 { animation: gb-ping 7s cubic-bezier(0, .5, .5, 1) infinite; }
.hero-art .pulse1 { animation: gb-ping 7s cubic-bezier(0, .5, .5, 1) 3.5s infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-art .sweep, .hero-art .pulse0, .hero-art .pulse1,
  .hero-art [class^="orbit"] { animation: none; }
  .hero-art .pulse0, .hero-art .pulse1 { opacity: .2; }
}
@media (max-width: 899px) { .hero-art { width: min(68%, 250px); } }
.hero .lead { color: var(--text-muted-on-band); font-size: clamp(1.06rem, .98rem + .45vw, 1.28rem); max-width: 60ch; }
.hero .btn-row { margin-top: var(--s5); }
.hero-note { margin-top: var(--s4); font-size: .95rem; color: var(--text-muted-on-band); }


/* --- Banner --------------------------------------------------------------
   Decorative only (aria-hidden on the section), so it carries no text and no
   words toward the page budget. The glyph is three rounded bars with the first
   picked out in the accent: an AI answer naming a few businesses, one of which
   is yours. */
.banner { padding-block: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); }
.banner-inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.1rem, 5vw, 3rem);
}
.banner-mark { width: clamp(42px, 7vw, 60px); height: auto; flex: 0 0 auto; }
.banner-rule { width: 1px; align-self: stretch; background: var(--line-band); flex: 0 0 auto; }
/* The three bars were abstract; now each one carries an offering. Same shape,
   so the band still reads as a graphic rather than another block of copy. */
.offers { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-width: 30rem; }
.offers li {
  margin: 0; padding: .42rem .95rem; border-radius: 999px;
  font-size: .95rem; font-weight: 650; line-height: 1.35;
  background: rgba(255, 255, 255, .16); color: var(--text-on-band);
  justify-self: start;
}
.offers .offers-first { background: var(--accent-on-band); color: var(--bg-band); font-weight: 750; }

/* --- Cards ---------------------------------------------------------------- */
.grid { display: grid; gap: var(--s4); }
/* Explicit column counts, not auto-fit: inside a 1056px content box auto-fit
   resolved .grid--4 to three tracks and left the fourth price card alone on a
   row of its own. Price cards have to break evenly or the row reads as a bug. */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .35rem; }
.card > p:last-child, .card > ul:last-child { margin-bottom: 0; }
.card--flat { background: var(--bg-card-alt); }
.section--surface .card--flat { background: var(--bg-card); }
.card--feature { border-color: var(--accent-fill); border-width: 2px; box-shadow: var(--shadow); }
.card--tagged { position: relative; }
.card-tag {
  position: absolute; top: -.75rem; left: var(--s4);
  background: var(--accent-fill); color: var(--on-accent);
  font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
}
.price {
  font-size: clamp(1.8rem, 1.5rem + 1.3vw, 2.25rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--text); line-height: 1.1; margin: .35rem 0 .1rem;
}
.price small { font-size: .9rem; font-weight: 650; color: var(--text-muted); letter-spacing: 0; }

.checks { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.checks li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; font-size: .97rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .72rem; height: .4rem;
  border-left: 2.5px solid var(--accent-text); border-bottom: 2.5px solid var(--accent-text);
  transform: rotate(-45deg) translateY(-.1rem);
}
.section--band .checks li::before { border-color: var(--accent-on-band); }
.checks--tight li { margin-bottom: .3rem; }
.card .checks:last-child { margin-bottom: 0; }
.card .btn { margin-top: auto; }
.card .checks + .btn { margin-top: var(--s2); }


/* --- Q&A ------------------------------------------------------------------
   Deliberately not an accordion: answer engines rank chunks of a page and may
   not render content hidden inside an expandable element. */
.qa > div { padding-block: var(--s4); border-top: 1px solid var(--line); }
.qa > div:last-child { border-bottom: 1px solid var(--line); }
.qa h3 { font-size: 1.1rem; margin-bottom: .5rem; max-width: 60ch; }
.qa p { color: var(--text-muted); max-width: 72ch; }
.qa p:last-child { margin-bottom: 0; }
.section--band .qa > div { border-color: var(--line-band); }
@media (min-width: 900px) {
  .qa--split > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s5); }
  .qa--split h3 { margin-bottom: 0; }
}

/* --- Form ----------------------------------------------------------------- */
.form-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); box-shadow: var(--shadow);
}
.form-card, .form-card h2, .form-card h3, .form-card p, .form-card label { color: var(--text); }
.field { margin-bottom: var(--s3); }
.field label { display: block; font-weight: 650; font-size: .95rem; margin-bottom: .35rem; color: var(--text); }
.field .hint { font-weight: 400; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg); padding: .7rem .8rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-text); outline-offset: 1px; }
.field-row { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.form-status { margin-top: var(--s3); font-weight: 650; color: var(--text); }
.form-status[data-state="error"] { color: var(--accent-text); }
.form-status[data-state="ok"] { color: var(--ok); }
.form-fineprint { font-size: .9rem; color: var(--text-muted); margin-top: var(--s3); margin-bottom: 0; }

/* --- Contact split -------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--bg-band); color: var(--text-muted-on-band);
  border-top: 1px solid var(--line-band);
  padding-block: var(--s6) var(--s5); font-size: .95rem;
}
.site-footer a { color: var(--text-on-band); text-decoration: none; }
.site-footer a:hover { color: var(--accent-on-band); text-decoration: underline; }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; margin-bottom: var(--s5); }
.footer-brand { max-width: 34ch; }
.footer-brand .brand { color: var(--text-on-band); margin-bottom: var(--s2); }
.footer-legal { border-top: 1px solid var(--line-band); padding-top: var(--s4); font-size: .875rem; }
.footer-legal p { margin-bottom: .5rem; }
.footer-legal p:last-child { margin-bottom: 0; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .hero h1 { max-width: none; }
}
@media (max-width: 700px) {
  .nav-toggle { display: inline-flex; }
  .header-tools { margin-left: auto; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: var(--s2) clamp(1rem, 4vw, 2rem) var(--s4);
    box-shadow: var(--shadow); margin-left: 0;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav .btn { margin-top: var(--s3); border-bottom: 0; justify-content: center; }
  .site-header .wrap { position: relative; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .theme-toggle { width: 42px; height: 42px; }
}
@media (min-width: 701px) {
  .nav { display: flex; }
}

@media (max-width: 560px) {
  h1 { font-size: clamp(1.7rem, 1.05rem + 3.4vw, 2.05rem); }
  h2 { font-size: 1.42rem; }
  .section { padding-block: 2.5rem; }
  /* Phone first screen: header + headline + both CTAs + the whole radar has
     to land above the fold on a ~360x660 viewport, so the hero is tuned to a
     budget rather than to taste. */
  .hero { padding-block: 1.5rem 1.75rem; }
  .hero-layout { gap: var(--s2); }
  .hero h1 { line-height: 1.08; }
  .hero .lead { margin-bottom: 0; }
  .hero .btn-row { margin-top: var(--s3); gap: var(--s2); }
  .hero-art { width: min(66%, 224px); }
}

/* Short phone viewports (a 360x660 Android with browser chrome is the common
   worst case) get a smaller radar so the whole thing clears the fold. Taller
   phones keep the larger one, which is why this is height-gated rather than
   folded into the width breakpoint above. */
@media (max-width: 560px) and (max-height: 720px) {
  .hero { padding-block: 1.25rem 1.5rem; }
  .hero-art { width: min(54%, 184px); }
  .hero .lead, .lead { font-size: 1.05rem; }
  .section-head { margin-bottom: var(--s4); }
  .card { padding: 1.1rem; }
  .price { font-size: 1.55rem; }
  .grid { gap: var(--s3); }
  .qa > div { padding-block: var(--s3); }
  .banner-inner { gap: 1.1rem; }
  /* the longest offering wraps to two lines at phone widths, and a full
     999px radius on a two-line box reads as a lozenge, so soften it */
  .offers li { font-size: .88rem; padding: .38rem .8rem; border-radius: 1.15rem; }
  .site-footer { padding-block: var(--s5) var(--s4); }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .btn, .form-card, .theme-toggle { display: none !important; }
  body { color: #000; background: #fff; }
  .section, .hero, .section--band { padding-block: 1rem; background: #fff !important; color: #000 !important; }
  .section--band h2, .section--band h3, .section--band p, .section--band li { color: #000 !important; }
}