/* ==========================================================================
   Apple skin, site-wide.

   Loaded after site.css. The surveyor's chart system was built almost
   entirely on CSS variables (239 var() references, 13 border-radius
   declarations), so flipping the tokens re-skins all 27 content pages
   without editing a single line of their HTML. The rest of this file
   overrides the handful of shape, type and rhythm rules that were hardcoded.

   Class names stay as they are. `.band` is an Apple tile, `.btn--primary` is
   an Apple pill, `.card` is an 18px Apple card.
   ========================================================================== */

:root {
  /* Surface. Bone paper becomes canvas white, night basemap becomes tile. */
  --chart: #ffffff;
  --chart-2: #f1f4f8;
  /* Cooled to the hero photograph's slate so every dark band on the site
     belongs to the same material as the image. */
  --basemap: #16222e;
  --basemap-2: #1b2836;

  /* Ink */
  --ink: #1d1d1f;
  --ink-soft: #333333;
  --ink-faint: #6e6e73;      /* 4.88:1 on white. #7a7a7a would fail AA. */
  --ink-invert: #ffffff;
  --ink-invert-soft: #cbd5de;

  /* Rules */
  --rule: #dde3ea;
  --rule-hard: #c7d0da;
  --rule-invert: #31414f;

  /* The single interactive colour. */
  --beacon: #0066cc;
  --beacon-lo: #0055b3;   /* darker shade, used as text. Must stay darker. */
  --beacon-focus: #0071e3; /* Apple focus blue, rings and hover fills only */
  --beacon-hi: #2997ff;      /* on dark surfaces only */
  --beacon-wash: #f0f6fd;

  /* Caution stays semantic, desaturated to sit inside the Apple palette. */
  --flag: #b3261e;
  --flag-wash: #fdf2f1;

  /* Type. -apple-system resolves to real SF Pro on Apple platforms. */
  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui,
    "Segoe UI", Roboto, sans-serif;
  --ui: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui,
    "Segoe UI", Roboto, sans-serif;
  --body: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui,
    "Segoe UI", Roboto, sans-serif;

  /* Apple runs paragraph text at 17px, not 16px. */
  --step-0: 1.0625rem;

  --product-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
}

/* --- Rhythm ------------------------------------------------------------- */
/* Tiles are one viewport-ish, edge to edge, and the colour change divides. */
.band { padding-block: clamp(56px, 4vw + 32px, 80px); }
.band--tight { padding-block: clamp(40px, 3vw + 24px, 56px); }
.band--panel { background: var(--chart-2); }
.tickrule { display: none; }

.wrap { width: min(100% - 40px, 1080px); }
.hero .wrap,
.band--wide .wrap { width: min(100% - 40px, 1280px); }

/* --- Type --------------------------------------------------------------- */
body { font-family: var(--body); color: var(--ink); background: var(--chart); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; }
h1 { letter-spacing: -0.28px; line-height: 1.07; }
h2 { letter-spacing: -0.02em; line-height: 1.1; }
h3 { letter-spacing: -0.374px; }
p, li { letter-spacing: -0.374px; }
.lede {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.196px;
}

/* Apple has no eyebrow grammar. These exist throughout the content HTML, so
   they are quietened into captions rather than left as loud mono labels. */
.eyebrow {
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.224px;
  text-transform: none;
  color: var(--ink-faint);
}
.eyebrow--invert { color: var(--ink-invert-soft); }

/* --- Buttons ------------------------------------------------------------ */
/* The full pill IS the action signal. */
.btn {
  font-family: var(--ui);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.374px;
  padding: 11px 22px;
  min-height: 44px;
  border-radius: 9999px;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.12s ease;
}
.btn--primary { background: var(--beacon); color: #fff; border-color: transparent; }
.btn--primary:hover { background: var(--beacon-focus); color: #fff; }
.btn--ghost { border-color: var(--beacon); color: var(--beacon); background: transparent; }
.btn--ghost:hover { background: rgba(0, 102, 204, 0.06); color: var(--beacon); }
/* On dark tiles the ghost pill carries a blue border and a white label. Blue
   text on the lighter dark tiles measures under 4.5:1. */
.band--dark .btn--ghost,
.hero .btn--ghost {
  border-color: var(--beacon-hi);
  color: var(--ink-invert);
  background: transparent;
}
.band--dark .btn--ghost:hover,
.hero .btn--ghost:hover { background: rgba(41, 151, 255, 0.12); color: var(--ink-invert); }
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--beacon-focus); outline-offset: 3px; }

/* --- Cards and callouts -------------------------------------------------- */
.card {
  background: var(--chart);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px;
}
.band--panel .card { background: var(--chart); }
.band--dark .card { background: transparent; border-color: var(--rule-invert); }
.card--link { transition: border-color 0.2s ease, transform 0.12s ease; }
.card--link:hover { border-color: var(--beacon); }
.card--link:active { transform: scale(0.99); }
.card__go { color: var(--beacon); font-size: 0.875rem; }

.answer, .note, .roi, .booking, .todo, .sources {
  border-radius: 18px;
  border: 1px solid var(--rule);
  background: var(--chart);
}
.band--dark .answer,
.band--dark .note { background: transparent; border-color: var(--rule-invert); }
.answer__label, .note-head {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.note--flag { border-color: var(--flag); background: var(--flag-wash); }

/* --- Stats -------------------------------------------------------------- */
.stat__n {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--beacon);
}
.band--dark .stat__n { color: var(--beacon-hi); }
.stat__l { color: var(--ink-soft); letter-spacing: -0.224px; }
.stat__src { color: var(--ink-faint); font-size: 12px; }
.band--dark .stat__l { color: var(--ink-invert-soft); }

/* --- FAQ ---------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--rule); border-top: 0; }
.faq summary {
  font-family: var(--ui);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.374px;
  padding: 17px 0;
}

/* --- Forms -------------------------------------------------------------- */
.field input,
.field textarea,
.field select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"] {
  font-family: var(--ui);
  font-size: 1.0625rem;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  padding: 12px 20px;
  min-height: 44px;
  background: var(--chart);
  color: var(--ink);
}
.field textarea { border-radius: 18px; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--beacon-focus);
  outline-offset: 1px;
}
.field label { font-family: var(--ui); font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.field__hint { color: var(--ink-faint); font-size: 0.875rem; }

/* --- Chrome ------------------------------------------------------------- */
/* Slim true-black global bar. The only place pure black appears. */
.site-header { background: #000000; border-bottom: 0; }
.site-header__in { padding-block: 0; min-height: 44px; gap: 24px; }
.brand { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.site-nav { gap: 24px; }
.site-nav a, .site-nav__trigger { font-family: var(--ui); font-size: 14px; font-weight: 400; letter-spacing: -0.12px; color: rgba(255, 255, 255, 0.86); }
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav__item:hover .site-nav__trigger { color: #fff; }
.site-nav .btn.btn--primary {
  font-size: 12px;
  padding: 7px 14px;
  min-height: 32px;
  background: var(--beacon);
  color: #fff;
}
.navtoggle {
  font-family: var(--ui);
  font-size: 14px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 15px;
}

.site-footer { background: var(--chart-2); color: var(--ink-soft); padding-block: 64px; border-top: 0; }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--beacon); text-decoration: underline; }
.site-footer__base { border-top: 1px solid var(--rule); color: var(--ink-faint); font-size: 12px; }
/* Column headings were white for the old dark footer. The footer is parchment
   now, where white measured 1.09:1. */
.site-footer .footer-head { color: var(--ink); font-family: var(--ui); font-size: 14px; font-weight: 600; }

/* --- Geo-grid ----------------------------------------------------------- */
/* The rank ramp keeps its own colours. That is data, not chrome. The grid is
   the product render, so it takes the one shadow in the system. */
.geogrid { border-color: var(--rule-invert); box-shadow: var(--product-shadow); }
.band--dark .geogrid__legend, .hero .geogrid__legend { color: var(--ink-invert-soft); }
.geogrid__legend { color: var(--ink-soft); }

/* --- Misc --------------------------------------------------------------- */
.crumbs, .small, .mono { letter-spacing: -0.224px; }
/* Scoped to content. An unscoped a:not(.btn) repainted the brand, nav links,
   phone and skip link Action Blue, which measured 3.77:1 on the black bar and
   1:1 blue-on-blue for the skip link. */
main a:not(.btn):not(.ap-btn) { color: var(--beacon); }
main .band--dark a:not(.btn):not(.ap-btn),
main .hero a:not(.btn):not(.ap-btn) { color: var(--beacon-hi); }
.tablewrap table { border-color: var(--rule); }
.skip { border-radius: 9999px; background: var(--beacon); color: #fff; }

/* --- Two-row chrome ------------------------------------------------------ */
.site-header__in { display: flex; align-items: center; }
.site-header__call {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: -0.12px;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  flex: none;
}
.site-header__call:hover { color: #fff; }
.site-nav { margin-left: auto; margin-right: 24px; }

/* Frosted product sub-nav with the persistent CTA. */
.subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.subnav__in { display: flex; align-items: center; gap: 24px; min-height: 52px; }
.subnav__title {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.231px;
  color: var(--ink);
  text-decoration: none;
}
.subnav__cta {
  margin-left: auto;
  font-size: 14px;
  padding: 8px 16px;
  min-height: 36px;
}
.subnav .navtoggle { display: none; margin-left: auto; }
.subnav__tray { display: none; flex-direction: column; gap: 12px; padding: 17px 20px 24px; }
.subnav__tray a { color: var(--ink); text-decoration: none; font-size: 17px; }

@media (prefers-reduced-transparency: reduce) {
  .subnav { background: var(--chart-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Apple collapses the global nav at 834px. */
@media (max-width: 833px) {
  .site-nav { display: none; }
  .subnav__cta { display: none; }
  .subnav .navtoggle { display: inline-flex; }
  .subnav__tray { display: flex; }
  /* The full eyebrow phrase is too long for 21px at this width — it wrapped
     to three lines and stranded the Menu button beside the second one. */
  .subnav__title { flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
}