/* Technology page styles — copied verbatim from wire3-eero/public/technology.css; loaded on /wifi/technology/ only. */
/* Wire 3 × eero — Technology page, page-specific chrome ONLY.
   This page now uses the shared Wire 3 design system: styles.css (tokens,
   header, buttons, value-band, section, footer) + components.css + eero.css
   (hero, .feat cards, .faq, .cta-band, .subnav). The content is eero's
   technology page (reseller-licensed); the styling matches the rest of the
   Wire 3 eero section. This file holds only the unique bits: the hero device
   imagery, the media card, the Wi-Fi 7 "data highway", and the spec table. */

/* ── Hero device imagery (white eero units floating on the dark brand hero) ── */
.hero-inner { position:relative; z-index:2; }
.eh-dev { position:absolute; z-index:1; pointer-events:none; filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); opacity:.9; }
.eh-dev.tr { top:-26px; right:-24px; width:250px; transform:rotate(8deg); }
.eh-dev.bl { bottom:-70px; left:-40px; width:290px; transform:rotate(-10deg); }
@media (max-width:760px){ .eh-dev.tr{ width:150px; top:-6px; right:-18px; } .eh-dev.bl{ width:168px; bottom:-30px; left:-28px; } }

/* ── Media card (eero house coverage video) ───────────────── */
.tech-media { max-width:840px; margin:6px auto 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--grey-lt); box-shadow:var(--shadow); background:#fff; }
.tech-media video, .tech-media img { display:block; width:100%; height:auto; }

/* ── Two-column split (compatibility) ─────────────────────── */
.tech-split { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.tech-split .art { background:var(--off-white); border:1px solid var(--grey-lt); border-radius:var(--radius); padding:28px; }
.tech-split .art svg { width:100%; height:auto; display:block; }
.tech-split .txt .eyebrow, .tech-split .txt h2 { text-align:left; }
.tech-split .txt h2 { margin-bottom:10px; }
.tech-split .txt p { color:var(--grey-dk); font-size:1.02em; line-height:1.65; }
@media (max-width:840px){ .tech-split { grid-template-columns:1fr; gap:26px; } .tech-split .txt .eyebrow, .tech-split .txt h2 { text-align:center; } }

/* ── Two-up cards (security) — uses .feat from eero.css ───── */
.tech-duo { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:860px; margin:0 auto; }
@media (max-width:760px){ .tech-duo { grid-template-columns:1fr; } }

/* ── Wi-Fi 7 vs 6 (lives inside a .value-band) ────────────── */
.wifi7-cta { text-align:center; margin-top:26px; }
.wifi-toggle-wrap { text-align:center; }
.hw-toggle { display:inline-flex; margin:40px auto 0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:5px; gap:4px; }
.hw-toggle button { appearance:none; border:0; background:transparent; color:rgba(255,255,255,.7); font-family:var(--font-head); font-weight:700; font-size:.95em; padding:11px 26px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s; }
.hw-toggle button.on { background:var(--green); color:var(--navy); }

.highway { position:relative; margin:40px auto 8px; max-width:1000px; border-radius:18px; padding:28px 18px 22px;
  background:radial-gradient(120% 140% at 50% 0%, rgba(46,144,224,.20), rgba(11,30,58,0) 60%); }
.lanes { display:flex; flex-direction:column; gap:13px; }
.lane { position:relative; height:52px; border-radius:12px; background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.lane .band { position:absolute; left:14px; top:50%; transform:translateY(-50%); z-index:3; font-size:.72em; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.66); background:rgba(11,30,58,.55); padding:3px 9px; border-radius:6px; }
.lane .dash { position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-50%); background-image:linear-gradient(90deg, rgba(255,255,255,.26) 0 22px, transparent 22px 46px); background-size:46px 2px; opacity:.5; }
.packet { position:absolute; top:50%; height:14px; width:34px; border-radius:7px; transform:translateY(-50%); will-change:transform; box-shadow:0 0 16px currentColor; }
@keyframes drive { from{ transform:translate(-80px,-50%);} to{ transform:translate(1040px,-50%);} }
.wifi-explain { max-width:620px; margin:28px auto 0; text-align:center; color:rgba(255,255,255,.8); font-size:1.02em; line-height:1.6; }
.wifi-explain b { color:#fff; }
@media (prefers-reduced-motion:reduce){ .packet{ animation:none !important; } }

/* ── The details matter — spec comparison table ───────────── */
/* Clamp the scroller to the viewport (minus the .section 24px gutters) so a
   narrow screen scrolls the wide table INSIDE this box instead of widening the
   whole page. No effect on desktop, where the table is narrower than the slot. */
.cmp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:calc(100vw - 48px); }
.cmp { min-width:760px; }
.cmp-products { display:grid; grid-template-columns:200px repeat(4,1fr); align-items:end; padding-bottom:20px; border-bottom:2px solid var(--grey-lt); }
.cmp-prod { text-align:center; padding:0 10px; }
.cmp-prod .ph { height:118px; display:flex; align-items:flex-end; justify-content:center; }
.cmp-prod .ph img { max-height:116px; width:auto; max-width:90%; object-fit:contain; }
.cmp-prod .nm { margin-top:14px; font-family:var(--font-head); font-weight:800; color:var(--navy); font-size:1.02em; letter-spacing:-.01em; }
.cmp-cat { border-bottom:1px solid var(--grey-lt); }
.cmp-cat-h { width:100%; appearance:none; background:none; border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; font-family:var(--font-head); font-weight:800; font-size:1.2em; color:var(--navy); letter-spacing:-.01em; transition:color .15s; }
.cmp-cat-h:hover { color:var(--navy-mid); }
.cmp-cat-h .chev { flex:0 0 auto; width:22px; height:22px; color:var(--grey-mid); transition:transform .2s var(--ease); }
.cmp-cat.open .cmp-cat-h .chev { transform:rotate(180deg); color:var(--navy-mid); }
.cmp-body { display:none; padding-bottom:10px; }
.cmp-cat.open .cmp-body { display:block; }
.cmp-row { display:grid; grid-template-columns:200px repeat(4,1fr); padding:16px 0; border-top:1px solid var(--grey-lt); }
.cmp-row:first-child { border-top:0; }
.cmp-row .rh { padding:0 14px 0 4px; font-weight:700; font-size:.72em; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-dk); }
.cmp-row .cell { padding:0 12px; text-align:center; font-size:.9em; line-height:1.45; color:var(--navy); }
.cmp-row .cell.dim { color:var(--grey-mid); }

@media (max-width:560px){
  .cmp-products, .cmp-row { grid-template-columns:120px repeat(4,minmax(112px,1fr)); }
}