/* Home page only, loaded after styles.css on / and nowhere else.

   The home page runs the console hero and the coverage tape over the original
   copy. Padding is on .band rather than on every <section>, because the
   original sections use .section and would otherwise get both.

   Layout and component shapes are ported from the Colocation Scout home page,
   so the two sites read as one family: address console hero, coverage tape,
   carrier logo row, stat cards, state cards, a dense metro index, and a final
   CTA. Everything is scoped to body.home, so interior pages are untouched. */

/* Sizes here came down a notch in August 2026 for the reason written at the top
   of the type scale block in styles.css: the vw terms grew too fast for a ~1000px
   effective viewport, and the band padding turned six sections into a scroll
   nobody finished. */
.home .band { padding: 58px 0; }
.home .band.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home .sec-head { max-width: 660px; margin-bottom: 34px; }
.home .sec-head h2 { font-size: clamp(1.5rem, 2.5vw, 1.95rem); line-height: 1.16; margin: 0; }
.home .sec-head .sub { margin-top: 14px; font-size: 1rem; color: var(--ink-2); }
.home .text-link { color: var(--brand); font-weight: 700; text-decoration: none; }
.home .text-link:hover { text-decoration: underline; }
.home .source-note { font-size: .8rem; color: var(--muted); }

/* ---- address console hero ---- */
.home .hero-console {
  position: relative; overflow: hidden;
  background: radial-gradient(115% 130% at 12% 0%, #00587f 0%, #003b5c 46%, #00263c 100%);
  color: #e6eff5; padding: 52px 0 46px;
}
/* Named areas rather than source order, because the phone and the desktop want
   different orders and only one of them can have the markup. Desktop: copy above
   the proof points in the left column, panel filling the right. Phone: copy,
   then the address box, then the proof points. */
.home .console-grid {
  display: grid; gap: 44px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas:
    "copy  panel"
    "proof panel";
  row-gap: 0;
  column-gap: 44px;
}
.home .console-copy { grid-area: copy; }
.home .console-panel { grid-area: panel; }
.home .console-proof { grid-area: proof; }
.home .hero-console h1 {
  color: #fff; font-size: clamp(1.85rem, 3.2vw, 2.7rem); line-height: 1.1;
  letter-spacing: -.03em; margin: 0;
}
.home .hero-console .sub { max-width: 560px; margin-top: 16px; font-size: 1.02rem; color: var(--ink-inv); }
.home .console-proof {
  display: flex; flex-wrap: wrap; gap: 28px;
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule-inv);
}
.home .console-proof div { max-width: 215px; }
.home .console-proof strong { display: block; font: 700 .92rem/1.2 var(--font-mono); color: var(--signal-bright); }
.home .console-proof span { display: block; margin-top: 6px; font-size: .85rem; color: var(--ink-inv-2); }

/* The panel is now a wrapper around the shared .checker component rather than a
   form of its own. .checker brings its own dark ground, border, radius and
   shadow, so this only has to stop drawing a second box around it and let it
   size to the column. Everything the old bespoke form needed (its own inputs,
   labels, segmented timeline control) went with the form. */
.home .console-panel { display: block; }
.home .console-panel .checker { max-width: none; margin: 0; padding: 22px; }
.home .console-note { margin: 14px 0 0; font-size: .78rem; line-height: 1.5; color: rgba(230, 239, 245, .5); }
.home .console-note a { color: var(--sky); }

/* Set by checker.js once the questions are answered, exactly as on
   /availability/. The hero copy has said its piece by then and the result panel
   is several times taller than the questions were, so it takes the whole width
   instead of being squeezed into a 430px column. Without this the home page
   would show the answer in a letterbox, which is the thing that was wrong with
   step three before it was widened on the availability page. */
body.home.checker-wide .console-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "panel"; }
body.home.checker-wide .console-copy,
body.home.checker-wide .console-proof { display: none; }
body.home.checker-wide .console-panel .checker { max-width: 720px; margin: 0 auto; }
body.home.checker-wide .console-note { max-width: 720px; margin: 14px auto 0; text-align: center; }
body.home.checker-wide .hero-console { padding: 32px 0 42px; }

/* ---- coverage tape ---- */
.home .sec-tape { padding: 26px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.home .tape-label {
  margin: 0 0 14px; font: 700 .68rem/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.home .tape-track { display: flex; flex-wrap: wrap; gap: 10px 34px; list-style: none; margin: 0; padding: 0; }
.home .tape-track a { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--ink-2); }
.home .tape-track em { font-style: normal; font-weight: 700; color: var(--ink); }
.home .tape-track span { font-size: .84rem; color: var(--muted); }
.home .tape-track b { color: var(--brand); font-family: var(--font-mono); }
.home .tape-track a:hover em { color: var(--brand); }

/* ---- carrier logo row ---- */
.home .logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 44px; }
.home .logo-cell img { height: 27px; max-width: 132px; width: auto; object-fit: contain; opacity: .72; }
.home .logo-cell img:hover { opacity: 1; }
.home .logo-note { margin-top: 26px; max-width: 760px; }

/* ---- stat cards ---- */
.home .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.home .stat-card {
  display: block; padding: 24px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; text-decoration: none; color: inherit;
}
.home .stat-card:hover { border-color: var(--brand); }
.home .stat-card b { display: block; font: 700 1.8rem/1 var(--font-head); color: var(--brand); letter-spacing: -.02em; }
.home .stat-card strong { display: block; margin: 10px 0 6px; font-size: .95rem; }
.home .stat-card p { margin: 0; font-size: .88rem; color: var(--ink-2); }

/* ---- state cards ---- */
.home .market-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.home .market-card {
  display: flex; flex-direction: column; padding: 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.home .band.alt .market-card { background: var(--bg); }
.home .market-card h3 { font-size: 1.45rem; margin: 0; letter-spacing: -.02em; }
.home .market-card p { margin: 12px 0 20px; color: var(--ink-2); font-size: .93rem; }
.home .market-card .text-link { margin-top: auto; }
.home .rank-pill {
  display: inline-flex; align-self: flex-start; margin-bottom: 18px; padding: 6px 10px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink);
  font: 700 .72rem/1 var(--font-mono);
}
.home .market-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 4px; }
.home .market-metric { padding: 12px 0; border-top: 1px solid var(--line); }
.home .market-metric strong { display: block; font: 700 1.2rem/1.2 var(--font-head); color: var(--brand); }
.home .market-metric span { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }

/* ---- dense metro index ---- */
.home .tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.home .count-tile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 15px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; color: var(--ink);
}
.home .band.alt .count-tile { background: var(--bg); }
.home .count-tile:hover { border-color: var(--brand); background: var(--accent-soft); }
.home .tile-name { font-size: .95rem; font-weight: 700; }
.home .tile-name small { display: block; font-weight: 400; font-size: .76rem; color: var(--muted); }
.home .tile-num { font: 700 .78rem/1 var(--font-mono); color: var(--brand); white-space: nowrap; text-align: right; }

/* ---- four across lanes, backers, pills, trust ---- */
.home .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.home .path-card {
  display: flex; flex-direction: column; gap: 11px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.home .band.alt .path-card { background: var(--bg); }
.home .path-card h3 { font-size: 1.06rem; margin: 0; }
.home .path-card p { margin: 0; flex: 1; color: var(--ink-2); font-size: .92rem; }
.home .path-card .btn { align-self: flex-start; margin-top: 4px; }

.home .backer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
.home .backer { padding-top: 20px; border-top: 2px solid var(--brand); }
.home .backer h3 { font-size: 1.02rem; margin: 0 0 8px; }
.home .backer p { margin: 0 0 12px; color: var(--ink-2); font-size: .88rem; }
.home .inline-cta { display: flex; gap: 14px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.home .inline-cta .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.home .inline-cta .btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

.home .content-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.home .content-nav a {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font-size: .81rem; font-weight: 700; text-decoration: none;
}
.home .content-nav a:hover { border-color: var(--brand); color: var(--brand); }

.home .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.home .trust-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.home .band.alt .trust-card { background: var(--bg); }
.home .trust-card h3 { font-size: 1.08rem; margin: 0 0 10px; }
.home .trust-card p { margin: 0 0 12px; color: var(--ink-2); font-size: .92rem; }

.home .final-cta { text-align: center; padding: 68px 0; }
.home .final-cta h2 { font-size: clamp(1.65rem, 2.8vw, 2.2rem); max-width: 720px; margin: 0 auto 16px; letter-spacing: -.025em; }
.home .final-cta .sub { max-width: 560px; margin: 0 auto 26px; color: var(--ink-2); font-size: 1rem; }
.home .final-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.home .final-cta .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.home .final-cta .btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 980px) {
  /* One column, and the address box goes second so it sits directly under the
     headline instead of below the three proof points. */
  .home .console-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "panel" "proof";
    gap: 32px; row-gap: 32px;
  }
  .home .console-proof { margin-top: 0; }
  .home .stat-grid, .home .grid-4, .home .backer-grid { grid-template-columns: repeat(2, 1fr); }
  .home .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .home .trust-grid, .home .market-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .home .band { padding: 44px 0; }
  .home .stat-grid, .home .grid-4, .home .backer-grid, .home .tile-grid { grid-template-columns: 1fr; }
  .home .console-segment { flex-wrap: wrap; }
  .home .console-segment label { flex: 1 1 40%; }
}