/* Wire 3 — shared design system (derived from the buy flow)
   Tokens, header, buttons, the dark "value band" feature motif, section
   scaffolding, and footer — the brand foundation that every Wire 3 surface
   shares. Page-specific chrome for this info section lives in eero.css.
   Load order:  styles.css -> components.css -> eero.css
   Visual language: navy #0D2240 + lime-green #7DC400 + accent blue #2E90E0,
   DM Sans, brand cards/buttons. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:#0D2240; --navy-mid:#1C3F6E; --navy-lite:#2A5494; --blue:#2E90E0;
  --green:#7DC400; --green-dk:#5C9200; --teal:#065456;
  --white:#fff; --off-white:#F4F6F9; --grey-lt:#E8ECF2;
  --grey-mid:#9AA5B8; --grey-dk:#4A5568; --amber:#F59E0B; --red:#DC2626;
  --font-head:'DM Sans','Trebuchet MS',Arial,sans-serif;
  --font-body:'DM Sans','Segoe UI',Arial,sans-serif;
  --radius:14px; --radius-sm:10px;
  --shadow:0 4px 24px rgba(13,34,64,0.13);
  --shadow-lg:0 8px 48px rgba(13,34,64,0.20);
  --ease:cubic-bezier(0.25,1,0.5,1);
}
html { scroll-behavior:smooth; }
body { margin:0; background:#F0F2F5; color:var(--navy); font:15px/1.55 var(--font-body); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--navy-mid); text-decoration:none; }
h1,h2,h3 { letter-spacing:-0.02em; font-weight:800; margin:0; font-family:var(--font-head); }
img { max-width:100%; }
@keyframes rise { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }

/* ── Header (brand) ───────────────────────────────────────── */
.site-header { padding:0 34.56px; display:flex; align-items:center; justify-content:space-between; background:var(--navy); height:72px; position:sticky; top:0; z-index:50; }
.header-logo { display:flex; align-items:center; gap:4px; cursor:pointer; }
.header-logo img { height:34px; width:auto; display:block; }
.header-fiber { font-family:var(--font-head); font-weight:300; font-size:24px; line-height:1; color:var(--blue); }
.header-actions { display:flex; align-items:center; gap:12px; }
.header-icon { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:24px; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:14px; font-weight:600; transition:background .15s, color .15s, border-color .15s; cursor:pointer; }
.header-icon:hover { background:var(--green); color:var(--navy); border-color:var(--green); }
.header-icon svg { width:20px; height:20px; display:block; flex-shrink:0; }
.header-phone { display:flex; align-items:center; margin-left:4px; color:var(--grey-mid); }
.header-phone-num { color:inherit; font-family:var(--font-head); font-size:14px; font-weight:600; }
.header-phone:hover { color:#fff; }
@media (max-width:560px){ .site-header{ padding:0 23.04px; } .header-icon{ padding:0; width:42px; justify-content:center; border-radius:50%; } .header-icon span{ display:none; } .header-phone-num{ display:none; } }

/* ── Buttons (brand) ──────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:var(--radius-sm); font-family:var(--font-head); font-weight:700; font-size:1em; padding:14px 22px; cursor:pointer; transition:background .15s, transform .1s, color .15s; }
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover { background:var(--navy-mid); transform:translateY(-1px); }
.btn-green { background:var(--green); color:var(--navy); }
.btn-green:hover { background:var(--green-dk); color:#fff; }
.btn-ghost { background:transparent; color:var(--grey-dk); border:1.5px solid var(--grey-lt); }
.btn-ghost:hover { background:var(--off-white); border-color:var(--grey-mid); color:var(--navy); }
/* Ghost button on DARK backgrounds (hero / CTA band): white text, translucent fill on hover (stays legible). */
.btn-ghost-light { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.34); }
.btn-ghost-light:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); color:#fff; }
.btn-lg { padding:16px 30px; font-size:1.08em; }
.btn:disabled { background:var(--grey-lt); color:var(--grey-mid); cursor:not-allowed; transform:none; }
.btn svg { width:18px; height:18px; transition:transform .15s; }
.btn:hover svg { transform:translateX(3px); }

/* ── Full-bleed value band — gradient + dot pattern + green glow ── */
.value-band { position:relative; overflow:hidden; padding:54px 24px 60px;
  background:linear-gradient(125deg,#0B1E3A 0%,#143659 62%,#1C3F6E 100%); }
.value-band::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px); background-size:24px 24px; }
.value-band::after { content:""; position:absolute; top:-140px; right:-120px; width:420px; height:420px; border-radius:50%;
  pointer-events:none; background:radial-gradient(circle, rgba(125,196,0,.22), transparent 68%); }
.value-inner { position:relative; max-width:1060px; margin:0 auto; }
.value-head { text-align:center; margin-bottom:34px; }
.vh-eyebrow { color:var(--green); font-family:var(--font-head); font-weight:700; font-size:.82em; letter-spacing:.12em; text-transform:uppercase; }
.value-head h2 { color:#fff; font-size:2em; margin-top:8px; }
.value-head p { color:rgba(255,255,255,.7); max-width:600px; margin:12px auto 0; }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); align-items:start; column-gap:28px; row-gap:28px; }
.vitem { position:relative; text-align:center; }
.value-grid .vitem:not(.vitem-feature) { padding-top:30px; }
.vitem-feature { border-radius:18px; padding:30px 26px; box-shadow:0 22px 54px rgba(0,0,0,.34); }
.vitem-feature::before { content:""; position:absolute; inset:0; border-radius:18px; padding:3px; pointer-events:none;
  background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; }
.vi-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff; margin:0 auto 16px; }
.vi-icon svg { width:26px; height:26px; }
.vi-title { font-family:var(--font-head); font-weight:700; font-size:1.18em; letter-spacing:-.01em; color:#fff; margin-bottom:8px; }
.vi-body { color:rgba(255,255,255,.72); font-size:.95em; line-height:1.55; max-width:32ch; margin:0 auto; }
.vitem-feature .vi-icon { background:var(--green); border-color:var(--green); color:var(--navy); box-shadow:0 8px 26px rgba(125,196,0,.4); }
.vitem-feature .vi-body { color:rgba(255,255,255,.92); }
.vi-flag { position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.64em; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 14px; border-radius:20px; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.32); }

/* ── Section scaffolding ──────────────────────────────────── */
.section { max-width:1040px; margin:0 auto; padding:56px 24px; min-width:0; /* flex item: allow shrink so inner overflow-scrollers (spec table) don't widen the page */ }
.section h2 { font-size:1.9em; text-align:center; margin-bottom:8px; color:var(--navy); }
.section .lead { text-align:center; color:var(--grey-dk); margin:0 auto 36px; max-width:620px; font-size:1.05em; }
.eyebrow { display:block; text-align:center; color:var(--green-dk); font-family:var(--font-head); font-weight:700; font-size:.8em; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }

/* ── Footer (brand) ───────────────────────────────────────── */
.foot { text-align:center; color:rgba(255,255,255,.55); padding:38px 24px 42px; background:var(--navy); margin-top:auto; }
.foot-inner { max-width:880px; margin:0 auto; }
.foot-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; margin-bottom:20px; }
.foot-links a { color:rgba(255,255,255,.82); font-size:13px; font-weight:600; transition:color .15s; }
.foot-links a:hover { color:#fff; }
.foot-disclaimer { color:rgba(255,255,255,.42); font-size:11.5px; line-height:1.4; margin:0 auto 16px; max-width:800px; }
.foot-copy { color:rgba(255,255,255,.6); font-size:12px; }

@media (max-width:820px){
  .value-grid { grid-template-columns:1fr; row-gap:30px; }
  .value-grid .vitem:not(.vitem-feature) { padding-top:0; }
  .value-head h2 { font-size:1.6em; }
  .section { padding:44px 24px; }
  .section h2 { font-size:1.55em; }
}