/* Wire 3 — Eero Whole Home Wi-Fi: page-specific chrome.
   Depends on styles.css (tokens, header, buttons, value band) and components.css
   (offer cards). Holds only what's unique to this info section: the hero, the
   hardware showcase, the feature grid, the how-it-works rail, the FAQ accordion,
   and the closing CTA band. */

/* Anchor targets clear the sticky header (72px) + sub-nav (52px). */
section[id], [id]{ scroll-margin-top:132px; }

/* ── Sub-nav (sticky, under the brand header) ─────────────── */
.subnav { position:sticky; top:72px; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--grey-lt); }
.subnav-inner { max-width:1040px; margin:0 auto; display:flex; align-items:center; gap:8px; padding:0 24px; height:52px; overflow-x:auto; }
.subnav-inner a { color:var(--grey-dk); font-weight:600; font-size:.9em; padding:8px 12px; border-radius:8px; white-space:nowrap; transition:background .15s, color .15s; }
.subnav-inner a:hover { background:var(--off-white); color:var(--navy); }
.subnav-spacer { flex:1; }
.subnav .pill-cta { background:var(--green); color:var(--navy); font-family:var(--font-head); font-weight:700; }
.subnav .pill-cta:hover { background:var(--green-dk); color:#fff; }
/* Mobile: section links stay, as a swipeable row; the CTA pill pins to the right edge. */
@media (max-width:680px){
  .subnav-inner { gap:2px; padding:0 0 0 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .subnav-inner::-webkit-scrollbar { display:none; }
  .subnav-inner a { padding:8px 10px; font-size:.86em; }
  .subnav-spacer { flex:1 0 8px; }
  .subnav .pill-cta { position:sticky; right:0; margin-left:auto; border-radius:0; padding:0 14px; height:100%; display:flex; align-items:center; box-shadow:-14px 0 14px -4px rgba(255,255,255,.95); }
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; background:linear-gradient(125deg,#0B1E3A 0%,#143659 60%,#1C3F6E 100%); color:#fff; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size:24px 24px; }
.hero::after { content:""; position:absolute; bottom:-180px; left:-120px; width:480px; height:480px; border-radius:50%;
  pointer-events:none; background:radial-gradient(circle, rgba(46,144,224,.28), transparent 68%); }
.hero-inner { position:relative; max-width:1040px; margin:0 auto; padding:64px 24px 72px; text-align:center; animation:rise .5s var(--ease) both; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; font-weight:600; font-size:.82em; padding:7px 14px; border-radius:24px; margin-bottom:22px; }
.hero-badge b { color:var(--green); font-weight:800; }
.hero h1 { font-size:3em; line-height:1.05; margin:0 auto 16px; max-width:16ch; }
.hero h1 .accent { color:var(--blue); }
.hero p.sub { color:rgba(255,255,255,.78); font-size:1.18em; max-width:620px; margin:0 auto 30px; }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-trust { display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:34px; color:rgba(255,255,255,.62); font-size:.86em; }
.hero-trust span { display:inline-flex; align-items:center; gap:7px; }
.hero-trust svg { width:16px; height:16px; color:var(--green); }
@media (max-width:680px){ .hero h1 { font-size:2.1em; } .hero p.sub { font-size:1.05em; } }

/* ── How it works rail ────────────────────────────────────── */
.steps-rail { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
.rail-step { position:relative; background:var(--white); border:1px solid var(--grey-lt); border-radius:var(--radius); padding:30px 24px 26px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.rail-step::before { counter-increment:step; content:counter(step); position:absolute; top:-16px; left:24px;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; font-family:var(--font-head); font-weight:800; box-shadow:0 6px 16px rgba(13,34,64,.28); }
.rail-step h3 { font-size:1.12em; color:var(--navy); margin:8px 0 8px; }
.rail-step p { color:var(--grey-dk); font-size:.95em; }
@media (max-width:760px){ .steps-rail { grid-template-columns:1fr; gap:30px; } }

/* ── Feature grid (icon rows on white) ────────────────────── */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feat { background:var(--white); border:1px solid var(--grey-lt); border-radius:var(--radius); padding:26px 22px; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.feat:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--navy-mid); }
.feat-ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(46,144,224,.14),rgba(125,196,0,.14)); color:var(--navy-mid); margin-bottom:16px; }
.feat-ic svg { width:24px; height:24px; }
.feat h3 { font-size:1.08em; color:var(--navy); margin-bottom:7px; }
.feat p { color:var(--grey-dk); font-size:.93em; }
@media (max-width:760px){ .feat-grid { grid-template-columns:1fr; } }

/* ── Hardware showcase ────────────────────────────────────── */
.hw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.hw-card { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--grey-lt); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.hw-card:hover { transform:translateY(-5px); box-shadow:0 26px 52px rgba(13,34,64,.17); }
.hw-card.feature { border:2px solid transparent;
  background:linear-gradient(var(--white),var(--white)) padding-box,
            linear-gradient(135deg,var(--green),var(--blue)) border-box; }
.hw-art { position:relative; height:150px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #1C3F6E 0%, #0B1E3A 80%); }
.hw-art .puck { width:78px; height:78px; border-radius:20px; background:linear-gradient(160deg,#fff,#dfe6f0);
  box-shadow:0 14px 34px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.7); position:relative; }
.hw-art .puck::after { content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle, var(--green), var(--green-dk)); box-shadow:0 0 14px rgba(125,196,0,.7); }
.hw-art.tall .puck { width:64px; height:108px; border-radius:18px; }
.hw-art.out .puck { background:linear-gradient(160deg,#2A3340,#10161e); }
.hw-art.out .puck::after { background:radial-gradient(circle, var(--blue), var(--navy-lite)); box-shadow:0 0 14px rgba(46,144,224,.7); }
.hw-flag { position:absolute; top:12px; right:12px; background:linear-gradient(135deg,var(--green),var(--blue)); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.62em; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:16px; }
.hw-body { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.hw-name { font-family:var(--font-head); font-weight:800; font-size:1.2em; color:var(--navy); }
.hw-tag { color:var(--grey-mid); font-weight:600; font-size:.85em; margin:2px 0 14px; }
.hw-specs { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:9px; }
.hw-specs li { display:flex; gap:9px; align-items:flex-start; font-size:.9em; color:var(--grey-dk); }
.hw-specs svg { width:16px; height:16px; color:var(--green-dk); flex-shrink:0; margin-top:2px; }
.hw-foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--grey-lt); font-size:.86em; color:var(--grey-dk); }
.hw-foot b { font-family:var(--font-head); color:var(--navy); }
@media (max-width:820px){ .hw-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; } }

/* ── Plans / get-it band (offer cards live in components.css) ── */
.plans-band { background:var(--off-white); border-top:1px solid var(--grey-lt); border-bottom:1px solid var(--grey-lt); }
.addon-row { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }
.addon-chip { display:flex; align-items:center; gap:12px; background:var(--white); border:1px solid var(--grey-lt); border-radius:12px; padding:14px 18px; max-width:340px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.addon-chip .ac-ic { width:40px; height:40px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(46,144,224,.14),rgba(125,196,0,.14)); color:var(--navy-mid); }
.addon-chip .ac-ic svg { width:20px; height:20px; }
.addon-chip .ac-name { font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:.95em; }
.addon-chip .ac-name b { color:var(--green-dk); }
.addon-chip .ac-desc { font-size:.82em; color:var(--grey-dk); }

/* ── FAQ accordion ────────────────────────────────────────── */
.faq { max-width:760px; margin:0 auto; }
.faq-item { background:var(--white); border:1px solid var(--grey-lt); border-radius:12px; margin-bottom:12px; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.faq-item[open] { border-color:var(--navy-mid); box-shadow:var(--shadow); }
.faq-item summary { list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:1.02em; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .chev { flex-shrink:0; width:22px; height:22px; color:var(--grey-mid); transition:transform .2s var(--ease); }
.faq-item[open] summary .chev { transform:rotate(180deg); color:var(--navy-mid); }
.faq-item .faq-a { padding:0 22px 20px; color:var(--grey-dk); font-size:.96em; line-height:1.6; }

/* ── Closing CTA band ─────────────────────────────────────── */
.cta-band { position:relative; overflow:hidden; text-align:center; color:#fff;
  background:linear-gradient(135deg,var(--navy) 0%,#1C3F6E 100%); padding:64px 24px 70px; }
.cta-band::after { content:""; position:absolute; top:-120px; right:-100px; width:380px; height:380px; border-radius:50%;
  pointer-events:none; background:radial-gradient(circle, rgba(125,196,0,.2), transparent 68%); }
.cta-inner { position:relative; max-width:680px; margin:0 auto; }
.cta-band h2 { color:#fff; font-size:2.1em; margin-bottom:14px; }
.cta-band p { color:rgba(255,255,255,.78); font-size:1.1em; margin-bottom:28px; }
.cta-band .btn-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band .phone-note { margin-top:22px; color:rgba(255,255,255,.6); font-size:.9em; }
.cta-band .phone-note a { color:#fff; font-weight:700; }
@media (max-width:680px){ .cta-band h2 { font-size:1.6em; } }