/* Business Internet Locator */

/* Palette and type ported from Colocation Scout so the two sites read as one
   family. Navy carries structure, one green carries signal, warm off-white
   ground with white surfaces on top. */
:root {
  --ink: #16181d;
  --ink-2: #4b5160;
  --muted: #80869a;
  --line: #e6e4df;
  --bg: #faf9f7;
  --surface: #ffffff;
  --bg-soft: #ffffff;
  --brand: #003b5c;
  --brand-dark: #002944;
  --brand-deep: #001c2e;
  --accent: #003b5c;
  --accent-ink: #002944;
  --accent-soft: #e5edf2;
  --signal: #43b763;
  --signal-soft: #e9f7ed;
  --signal-bright: #7fe0a0;
  --sky: #7fd4f0;
  --ink-inv: rgba(230, 239, 245, .68);
  --ink-inv-2: rgba(230, 239, 245, .5);
  --rule-inv: rgba(230, 239, 245, .12);
  --warn: #b26a00;
  --font-head: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 12px;
  --wrap: 1140px;
  --shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 12px 32px -16px rgba(22, 24, 29, .12);
  --shadow-lg: 0 24px 60px -30px rgba(0, 32, 51, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--brand); }
h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: -.015em; text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
/* A wrap inside a wrap is a double inset and a narrower column than its
   neighbours. Components carry their own wrap so they are safe to drop anywhere,
   which means nesting has to be harmless. */
.wrap .wrap { max-width: none; padding-left: 0; padding-right: 0; }
.section { margin: 44px auto; }
.section > h2 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.01em; }
.section > h3 { font-size: 1.1rem; margin: 26px 0 8px; }
.section p { margin: 0 0 14px; }
.lead { font-size: 1.18rem; color: var(--ink-2); }

/* A compact answer-first line on high-intent pages. Deliberately quieter than
   a callout: it should help scanning without competing with the page itself. */
.answer-summary {
  margin-top: 30px;
  margin-bottom: -10px;
}
.answer-summary p {
  margin: 0;
  padding: 3px 0 3px 14px;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  line-height: 1.65;
}
.answer-summary strong {
  margin-right: 7px;
  color: var(--ink);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.head-inner { display: flex; align-items: center; gap: 22px; height: 66px; }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
/* Height drives it, width follows. Two lines of type sit beside the mark, so
   the height has to carry both. Below about 48px "Locator" stops being a word
   and starts being a blue smudge. */
.brand-logo { display: block; height: 46px; width: auto; }

.site-nav { display: flex; gap: 20px; margin-left: auto; }
.site-nav a {
  text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--brand); }
.site-nav a.active { color: var(--brand); border-bottom-color: var(--sky); }
.head-cta { flex: none; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

/* ----------------------------------------------------------------- hero */
.hero {
  background: linear-gradient(160deg, var(--brand-deep) 0%, var(--brand) 55%, #0a6b8f 100%);
  color: #fff; padding: 62px 0 56px;
  position: relative; isolation: isolate;
}
/* The animated lattice sits on the gradient rather than replacing it, which is
   why the component is passed background="none". Copy stays above it. */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg iso-fiber-bg { display: block; width: 100%; height: 100%; }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.13; margin: 0 0 14px; letter-spacing: -.025em; max-width: 20ch; }
.hero-sub { font-size: 1.12rem; color: rgba(255,255,255,.88); max-width: 62ch; margin: 0 0 24px; }
.eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .76rem; font-weight: 700; color: var(--accent-ink); margin: 0 0 14px;
}
.hero .eyebrow { color: var(--sky); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 40px; margin-top: 34px; flex-wrap: wrap; }
.hero-stats strong { display: block; font-size: 1.7rem; line-height: 1.1; }
.hero-stats span { font-size: .84rem; color: rgba(255,255,255,.72); }

/* Split hero. Used only where the thing the visitor came to do should be on
   screen without scrolling, which today means the availability checker. */
.hero-split { padding: 48px 0 44px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); gap: 44px; align-items: start; }
.hero-split h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); max-width: 16ch; }
.hero-split .hero-sub { max-width: 46ch; margin-bottom: 0; }
/* The card is already the widest thing in its column, so the shared 720px cap
   and the generous standalone padding both work against it here. */
.hero-aside .checker { max-width: none; margin: 0; padding: 26px; }

/* Set by checker.js once the visitor is past the questions. The hero copy has
   said its piece by then, and the results card is several times taller than the
   form was, so it takes the whole column instead of being clipped inside half
   of one. */
body.checker-wide .hero-copy { display: none; }
body.checker-wide .hero-grid { grid-template-columns: minmax(0, 1fr); }
body.checker-wide .hero-aside .checker { max-width: 720px; margin: 0 auto; padding: 26px; }
body.checker-wide .hero-split { padding: 28px 0 44px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-split .hero-sub { max-width: 62ch; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-block; padding: 11px 18px; border-radius: 8px; text-decoration: none;
  font-weight: 600; font-size: .9rem; border: 1px solid transparent; cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }
/* Navy carries structure, green carries "go". Every button that starts an
   address check or submits a form is green, on white and on the navy hero. */
.btn-primary { background: var(--signal); color: #052b14; }
.btn-primary:hover { background: #38a655; }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.34); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-sm { padding: 8px 14px; font-size: .88rem; }
.btn-block { width: 100%; }
.inline-link { font-weight: 600; }

/* ----------------------------------------------------------- breadcrumbs */
.crumbs { font-size: .84rem; color: var(--muted); padding: 14px 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumb-sep { margin: 0 8px; opacity: .5; }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
  background: #fff; color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-icon { height: 26px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; align-self: flex-start; margin-bottom: 8px; }
.card-title { font-weight: 650; font-size: 1rem; line-height: 1.3; }
.carrier-logo { display: block; height: 46px; width: auto; max-width: 260px; object-fit: contain; object-position: left center; margin: 0 0 20px; }
.card-desc { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.card-tag {
  align-self: flex-start; margin-top: 4px; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700; color: var(--brand);
  background: var(--accent-soft); padding: 3px 8px; border-radius: 999px;
}

/* ---------------------------------------------------------------- lists */
.ticks, .warns { list-style: none; padding: 0; margin: 0 0 16px; }
.ticks li, .warns li { position: relative; padding-left: 28px; margin-bottom: 9px; }
.ticks li::before {
  content: ""; position: absolute; left: 6px; top: .62em; width: 6px; height: 11px;
  border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal);
  transform: rotate(42deg);
}
.warns li::before {
  content: "!"; position: absolute; left: 4px; top: 0; font-weight: 800;
  color: var(--warn); font-size: .95rem;
}
.two-col { columns: 2; column-gap: 34px; }
.two-col li { break-inside: avoid; }

.steps { padding-left: 20px; margin: 0; }
.steps li { margin-bottom: 12px; }

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 460px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--bg-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
tbody th { font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- callout */
.callout {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 16px 18px; border-radius: 0 var(--radius) var(--radius) 0; margin: 20px 0;
}
.callout strong { display: block; margin-bottom: 4px; }
.callout p { margin: 0; font-size: .94rem; color: var(--ink-2); }

/* Acquired carrier names, under the carrier grid. Deliberately quiet: it is a
   footnote for somebody holding old paperwork, not one of the options. */
.carriers-retired { margin: 14px 0 0; color: var(--ink-2); font-size: .92rem; }

.note { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; background: var(--bg-soft); }
.note h3 { margin: 0 0 6px; font-size: 1.02rem; }
.note p { margin: 0; color: var(--ink-2); font-size: .95rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 8px 0 12px; }
.split h3 { font-size: .96rem; margin: 0 0 8px; }
.provider-block { border-top: 1px solid var(--line); padding-top: 30px; }
.provider-type { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: -8px 0 12px; font-weight: 600; }

/* ----------------------------------------------------------------- FAQ */
.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 15px 34px 15px 0; font-weight: 600; list-style: none;
  position: relative; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 13px; font-size: 1.3rem;
  font-weight: 400; color: var(--accent);
}
.faq[open] summary::after { content: "\2013"; }
.faq-a { padding: 0 0 16px; color: var(--ink-2); }
.faq-a p { margin: 0; }

/* ---------------------------------------------------------------- forms */
.form-section { background: var(--bg-soft); padding: 44px 20px; margin: 56px 0 0; border-top: 1px solid var(--line); }
.form-card { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px; box-shadow: var(--shadow); }
.form-card h2 { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -.015em; }
.form-sub { color: var(--muted); margin: 0 0 22px; font-size: .96rem; }
.field { display: block; margin-bottom: 15px; }
.field > span { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: .9rem; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-fine { font-size: .82rem; color: var(--muted); margin: 12px 0 0; text-align: center; }
.hp { position: absolute; left: -9999px; }

/* ------------------------------------------------- the checker card, dark */
/* Deep blue on the hero's blue, ported from the home page console panel so both
   placements read as one component. It was a white card until August 2026, which
   put a bright rectangle in the middle of a dark hero and made the page look
   like two designs stapled together.
                                                                    ┌ how ┐
   The palette is swapped by REBINDING the variables rather than by rewriting
   the forty-odd rules underneath. Every child already reaches for var(--ink),
   var(--muted), var(--line) and var(--accent-soft), so redefining those four
   here re-themes the steps, the price panel, the carrier list, the result rows
   and stage three in one place. Add a child rule with a hardcoded #16181d and
   you have opted out of this and will get black text on navy, so do not. */
.checker {
  --ink: #ffffff;
  --ink-2: rgba(230, 239, 245, .74);
  /* .55 is the console panel's muted tone and it reads fine on the panel's own
     labels, but the checker uses --muted for running help text at 14px, which
     measured 4.16:1 on this ground. Lifted until it clears 4.5:1 while staying
     visibly quieter than --ink-2. */
  --muted: rgba(230, 239, 245, .66);
  --line: rgba(230, 239, 245, .2);
  --accent: var(--sky);
  --accent-soft: rgba(0, 20, 33, .42);
  --surface: rgba(0, 20, 33, .5);
  --bg-soft: rgba(0, 20, 33, .5);

  max-width: 720px; margin: 0 auto; padding: 32px;
  background: #003b5c;
  border: 1px solid rgba(230, 239, 245, .16); border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0, 20, 33, .8);
}

/* Still set explicitly. The card sits inside .hero, which sets a colour for its
   own copy, and a heading with none of its own inherits it. That is how three
   headings went missing once already, so this line stays even though --ink is
   now white anyway. */
.checker, .checker h1, .checker h2, .checker h3, .checker h4 { color: var(--ink); }

/* Inputs need the treatment the console panel uses: a well darker than the card
   rather than a white box, or every field reads as a hole punched in the panel.
   16px is not a style choice. iOS Safari zooms the page in when you focus an
   input smaller than that and does not zoom back out, so a visitor filling this
   in on a phone ends up scrolling sideways through the rest of the form. The
   shared .field rule is .9rem, which is 14.4px, and the home page console panel
   set 16px explicitly to avoid exactly this. */
.checker .field input, .checker .field select, .checker .field textarea {
  background: rgba(0, 20, 33, .5); color: #fff; border-color: rgba(230, 239, 245, .2);
  font-size: 16px; padding: 12px 13px;
}
.checker .field input::placeholder, .checker .field textarea::placeholder { color: rgba(230, 239, 245, .38); }
.checker .field input:focus, .checker .field select:focus, .checker .field textarea:focus {
  border-color: var(--sky); box-shadow: 0 0 0 3px rgba(127, 212, 240, .28);
}
/* A native select drops its options on a white list whatever the field looks
   like, so the option text has to go back to dark or it is white on white. */
.checker .field select option { color: #16181d; }

/* The green the palette allows, on the one button that moves you forward. */
.checker .btn-primary { background: var(--signal); color: #052b14; border-color: transparent; }
.checker .btn-primary:hover { background: var(--signal-bright); color: #052b14; }

.step h2 { margin: 0 0 8px; font-size: 1.22rem; line-height: 1.25; letter-spacing: -.015em; }
.step-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--accent); margin: 0 0 10px; }
.step-help { color: var(--muted); font-size: .89rem; line-height: 1.5; margin: 0 0 20px; }
/* The button after a run of fields needs air above it, or it reads as one more
   field rather than the thing that ends the step. */
.step .btn-block { margin-top: 10px; }
.step-nav { display: flex; gap: 10px; margin-top: 20px; }
.step-nav .btn { flex: 1; }
/* Back sits on the dark card, so it is a quiet outline rather than a white
   block. It was given a white background when the card was white; leaving that
   in place now would put near-white type on white, which is how this button
   managed to be invisible for weeks the first time. */
.step-nav .btn-ghost {
  flex: 0 0 auto; padding-left: 20px; padding-right: 20px;
  background: transparent; color: rgba(230, 239, 245, .74); border-color: rgba(230, 239, 245, .28);
}
.step-nav .btn-ghost:hover {
  background: rgba(230, 239, 245, .08); border-color: var(--sky); color: #fff;
}
.step .form-fine { margin-top: 12px; }
/* Sits under the button that repeats the submit, so it has to read as a nudge
   toward the fields rather than as another disclaimer. */
.step-hint { font-size: .82rem; color: var(--muted); text-align: center; margin: 8px 0 20px; }
.choices { display: grid; gap: 10px; margin-bottom: 18px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.choice:hover { border-color: var(--accent); }
.choice input { margin-top: 4px; flex: none; }
.choice span { display: block; font-size: .92rem; color: var(--muted); }
.choice strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }
/* Step two of the checker. This panel is the only place on the site that shows
   a number before anything has been asked for, so it is styled to read as a
   result rather than as another form field. */
.result { background: var(--accent-soft); border-radius: 10px; padding: 20px 22px; margin-bottom: 20px; }
.result h3 { margin: 0 0 14px; font-size: 1.02rem; letter-spacing: -.01em; }
.res-rows { margin-bottom: 14px; }
.res-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .93rem; color: var(--ink-2);
}
.res-row:last-child { border-bottom: none; }
.res-val { font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.result p { margin: 0 0 10px; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.result p:last-child { margin-bottom: 0; }
.res-fine { font-size: .8rem !important; color: var(--muted) !important; padding-top: 10px; border-top: 1px solid var(--line); }

/* ------------------------------------------------- address suggestions */
/* Drawn by address-suggest.js, which builds this markup itself rather than
   using Google's widget. If that script never runs, none of this renders and
   the address box is an ordinary input. */
.addr-suggest-wrap { position: relative; }
.addr-suggest {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 25, 45, .16);
  max-height: 280px; overflow-y: auto;
}
.addr-option {
  padding: 9px 11px; border-radius: 7px; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
}
.addr-option:hover, .addr-option.is-active { background: var(--accent-soft); }
.ao-main { font-size: .93rem; font-weight: 600; color: var(--ink); }
.ao-rest { font-size: .82rem; color: var(--muted); }

/* The carrier taste on the market panel. Logos only, no names and no links:
   enough to show there is something real behind the form, not enough to be the
   answer. Greyed back so it reads as a preview rather than a result. */
.res-peek { margin: 16px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.res-peek-label {
  font-size: .72rem !important; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--muted) !important; margin: 0 0 10px !important;
}
/* Logos come in at wildly different aspect ratios, so each cell holds a fixed
   box and the image is contained inside it. Without the box, one tall wordmark
   sets the height of the whole row and the rest float. */
.res-peek-logos {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
/* Same reason as the stage three tiles: a white chip per logo, because the
   artwork is coloured marks drawn for white paper. The teaser used to dim these
   to 72 percent on a white card, which was a nice touch there and would be
   illegible here, so full opacity on a light chip instead. */
.res-peek-logos li {
  height: 34px; display: flex; align-items: center; justify-content: center;
  padding: 0 8px; background: #fff; border-radius: 7px;
}
.res-peek-logos img {
  display: block; max-height: 20px; width: auto; max-width: 100%;
  object-fit: contain; object-position: center;
}
.res-peek-more { font-size: .84rem !important; color: var(--muted) !important; margin: 0 !important; }

@media (max-width: 560px) {
  .res-peek-logos { grid-template-columns: repeat(3, 1fr); }
}

.field-group-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--muted); margin: 22px 0 10px;
}

@media (max-width: 560px) {
  .res-row { flex-direction: column; gap: 2px; }
}

/* ------------------------------------------------- checker, stage three */
/* Shown only after the submission goes through. Everything here is the reward
   for handing over an address, so it is styled to feel like a document they
   were given rather than another step in a funnel. */
/* The colour is not decoration. This card sits inside the hero, which sets
   colour to white for its own copy, and a heading with no colour of its own
   inherits that and disappears against the white card. */
.checker-done h3 { margin: 0 0 8px; font-size: 1.32rem; letter-spacing: -.015em; color: var(--ink); }
.checker-done h4 { margin: 26px 0 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.done-tick {
  width: 42px; height: 42px; border-radius: 50%; background: var(--signal); color: #052b14;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 700;
  margin: 0 0 14px;
}
.done-lead { font-size: .98rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; }
.checker-done .res-note { font-size: .89rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 10px; }
.checker-done .res-fine { font-size: .8rem; color: var(--muted); margin: 0 0 4px; }

/* The price is the single thing on this screen somebody screenshots, so it gets
   its own block rather than a row in a table. */
.res-prices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 14px; }
.res-price { background: var(--accent-soft); border-radius: 12px; padding: 18px 20px; }
.rp-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.rp-value { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-unit { display: block; font-size: .85rem; color: var(--muted); margin-top: 2px; }

/* Logos come in at wildly different aspect ratios, so the tile holds a fixed
   box and the image is contained inside it. Without that, one tall wordmark
   sets the height of every row. */
.res-carriers { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
/* These tiles stay white on the dark card, and that is deliberate rather than
   an oversight. Carrier logos are supplied as coloured marks on transparent
   grounds, drawn for white paper: Segra is #0505D4 and Comcast is #006FBA, and
   both disappear on navy. A white chip per carrier keeps every logo legible
   without recolouring artwork we do not own.
   Because the ground under these is white, the type has to go back to dark. The
   card rebinds --ink to white, so these two rules opt out of that on purpose. */
.res-carriers a {
  display: block; padding: 12px 14px; border: 1px solid rgba(0, 59, 92, .16); border-radius: 10px;
  text-decoration: none; background: #fff; height: 100%;
}
.res-carriers a:hover { border-color: var(--sky); }
.res-carriers img { display: block; height: 26px; width: auto; max-width: 130px; object-fit: contain; object-position: left center; margin-bottom: 8px; }
.rc-name { display: block; font-size: .88rem; font-weight: 650; color: #16181d; }
/* Darker than the site's --muted, which measured 3.62:1 at this size on white
   and had been under the line since these tiles were first drawn. */
.rc-type { display: block; font-size: .76rem; color: #666d80; margin-top: 1px; }

/* The copy under the first of the two quote buttons. It exists to say the
   carrier list is still coming, so the button does not read as the only way
   forward from here. */
.res-cta-note { font-size: .82rem; color: var(--muted); text-align: center; margin: 8px 0 0; }

.res-next { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.res-next h4 { margin-top: 0; }
.res-next p { font-size: .93rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; }

/* The official quote form. Same card, opened underneath the results rather
   than replacing them, so the numbers they are reacting to stay on screen. */
.request-form { margin-top: 26px; padding-top: 24px; border-top: 2px solid var(--accent-soft); }
.request-form h3 { margin: 0 0 6px; font-size: 1.2rem; letter-spacing: -.015em; color: var(--ink); }
.req-echo { font-size: .86rem; line-height: 1.55; color: var(--ink-2); background: var(--accent-soft); border-radius: 8px; padding: 11px 13px; margin: 4px 0 16px; }
.req-echo:empty { display: none; }
.req-done { text-align: left; }
.req-done h3 { margin-bottom: 8px; }
.req-done p { font-size: .95rem; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* -------------------------------------------------------------- cta bar */
.cta-bar {
  max-width: var(--wrap); margin: 50px auto; padding: 26px 30px;
  background: linear-gradient(120deg, var(--brand-deep), var(--brand));
  border-radius: 16px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cta-bar p { margin: 0; font-size: 1.06rem; font-weight: 500; }

/* --------------------------------------------------------------- footer */
.site-foot { background: var(--ink); color: #b8c8d6; margin-top: 60px; padding: 46px 0 26px; font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; }
/* Grid tracks size to their longest word by default, and the contact column
   holds an email address with no break point. Without these the footer pushes
   the whole page sideways on a phone. */
.foot-col { min-width: 0; }
.foot-col a { overflow-wrap: anywhere; }
.foot-col h3 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; }
.foot-col a { display: block; color: #b8c8d6; text-decoration: none; margin-bottom: 8px; }
.foot-col a:hover { color: var(--accent); }
.foot-logo { display: block; width: 210px; max-width: 100%; height: auto; margin-bottom: 14px; }
.foot-brand p { margin: 0 0 10px; line-height: 1.6; }
.foot-parent { color: #8ea3b5; font-size: .86rem; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding-top: 20px; color: #8ea3b5; font-size: .82rem; }
.foot-legal p { margin: 0 0 6px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 6px; }
  .two-col { columns: 1; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-nav {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); flex-direction: column;
    gap: 0; padding: 8px 20px 16px;
  }
  body.nav-open .site-nav { display: flex; }
  .site-nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; margin-left: auto; }
  .head-cta { display: none; }
  .brand-logo { height: 40px; }
  .field-row.two { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 40px; }
  .hero-stats { gap: 24px; }
  .form-card, .checker { padding: 22px; }
  .cta-bar { flex-direction: column; align-items: flex-start; }
}

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

/* --------------------------------------------------------------- thanks */
.thanks-card { border: 1px solid var(--line); border-radius: 16px; padding: 30px; background: var(--bg-soft); }
.thanks-card h2 { margin: 0 0 18px; font-size: 1.4rem; letter-spacing: -.015em; }
.thanks-tick {
  width: 46px; height: 46px; border-radius: 50%; background: var(--signal); color: #052b14;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700;
  margin: 0 0 16px;
}
.thanks-card .steps li { margin-bottom: 14px; }

/* --------------------------------------------- product explainer pop-out */
/* A <details> styled as a small button under the field, with a panel that pops
   out over the form. No script, so it still opens if JavaScript is blocked. */
.field > .field-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-2); }
.field-explained { position: relative; }

.explainer { display: inline-block; margin-top: 8px; }
.explainer > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: .76rem; font-weight: 700; color: var(--brand);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.explainer > summary::-webkit-details-marker { display: none; }
.explainer > summary::before { content: "? "; font-weight: 800; opacity: .55; }
.explainer > summary:hover { border-color: var(--brand); background: var(--accent-soft); }
.explainer > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.explainer[open] > summary { background: var(--brand); color: #fff; border-color: var(--brand); }

.ex-pop {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 10px); width: min(560px, 84vw);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; box-shadow: var(--shadow-lg);
}
/* Beside the card, not on top of it. In the split hero the form sits in the
   right hand column, so the panel opens leftward across the headline, which is
   the only direction with room and the only one that leaves the form visible.
   Anchoring to the card rather than to the field is what makes it clear the
   whole card instead of just the field it was opened from. */
.hero-aside .checker { position: relative; }
.hero-aside .field-explained { position: static; }
.hero-aside .ex-pop { right: calc(100% + 20px); left: auto; top: 20px; width: min(520px, 42vw); }

.ex-close {
  position: absolute; top: 8px; right: 10px; width: 30px; height: 30px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.ex-close:hover { background: var(--accent-soft); color: var(--ink); }
.ex-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Both columns are the same shape, so the prices should sit on the same line
   however many words a bullet runs to. Pushing the price down with auto margin
   does that without guessing at heights. */
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.ex-side { display: flex; flex-direction: column; }
.ex-side ul { flex: 1 1 auto; }
.ex-side .ex-price { margin-top: auto; }
.ex-side h4 { margin: 0 0 2px; font-size: .98rem; }
/* One column's subtitle wraps to two lines and the other's does not, which
   started both bullet lists at different heights. */
.ex-note { margin: 0 0 10px; font-size: .8rem; line-height: 1.45; color: var(--muted); min-height: 2.9em; }
.ex-side ul { list-style: none; padding: 0; margin: 0 0 14px; }
.ex-side li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
/* Ticks read as endorsements, so only the dedicated column gets them. The
   broadband column takes plain bullets, because half of what it lists is a
   limitation rather than a feature. */
.ex-ticks li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 5px; height: 9px;
  border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(42deg);
}
.ex-plain li::before {
  content: ""; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--muted);
}
.ex-price { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.ex-price strong { display: block; font-size: 1.05rem; color: var(--brand); letter-spacing: -.01em; }
.ex-price span { display: block; margin-top: 2px; font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ex-fine { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .76rem; line-height: 1.5; color: var(--muted); }
.ex-more { margin: 10px 0 0; font-size: .82rem; font-weight: 600; }

/* Below this width the floating panel would hang off the left of the card, so
   it drops into the flow and pushes the form down instead. */
@media (max-width: 900px) {
  .ex-pop, .hero-aside .ex-pop { position: static; width: auto; margin-top: 10px; }
  /* In the flow the panel is only as wide as its half of the field row, which
     is too narrow for two columns of bullets. */
  .ex-grid { grid-template-columns: 1fr; gap: 18px; }
  /* Stacked, the columns cannot be out of line with each other, so the
     reserved space is just dead space. */
  .ex-note { min-height: 0; }
  .ex-side .ex-price { margin-top: 0; }
}