/* Public SEO pages (/services/*, /stations/*) — templates/public_*.html.
   The shell (nav, buttons, cards, badges, footer rows, fonts, palette) comes from
   static/elcapp/portal.css so these pages look like the home page; this file only
   lays out the page content. Mobile first: nothing may overflow at 320 px. */
:root{--navy:#0b1737;--ink:#0f172a;--muted:#475569;--dim:#94a3b8;--line:rgba(0,0,0,0.08);--soft:#f1f5f9}
a{color:#2563eb}
.pub-wrap{max-width:1160px;margin:0 auto;padding:0 40px}

/* nav: the React Nav sets these inline (portal/common.js) — same values here */
.pnav-logo{text-decoration:none}
.pnav-tab{font:400 13px 'Barlow',sans-serif;padding:6px 14px;border-radius:6px;text-decoration:none;color:#475569}
.pnav-tab:hover{color:#0f172a}
.pnav-login{font-size:12px !important;padding:7px 16px !important;margin-right:8px;text-decoration:none}
.pnav-cta{font-size:13px !important;padding:7px 18px !important;text-decoration:none}

.crumbs{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim);padding-top:36px;margin-bottom:26px}
.crumbs a{color:var(--muted);text-decoration:none}
.hero{padding:0 0 40px}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#2563eb;font-weight:700}
h1{font:800 clamp(40px,7vw,68px)/.98 'Barlow Condensed',sans-serif;color:var(--ink);margin:10px 0 16px;letter-spacing:-.01em;
   background:linear-gradient(135deg,#0f172a 20%,#1d4ed8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
.lede{font-size:clamp(16px,2.2vw,17px);line-height:1.65;color:var(--muted);max-width:720px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.cta-row .btn,.band .btn{text-decoration:none;font-size:14px;padding:12px 28px}
.mailbox{margin-top:10px;font-size:13px;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.fact{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 20px;border-top:3px solid #2563eb}
.fact:nth-child(2){border-top-color:#d97706}.fact:nth-child(3){border-top-color:#059669}.fact:nth-child(4){border-top-color:#a78bfa}
.fact b{display:block;font:800 36px/1 'Barlow Condensed',sans-serif;color:#2563eb;margin-bottom:6px}
.fact:nth-child(2) b{color:#d97706}.fact:nth-child(3) b{color:#059669}.fact:nth-child(4) b{color:#a78bfa}
.fact span{font-size:12px;color:var(--muted);line-height:1.4}

section{padding:32px 0;border-top:1px solid var(--line)}
section.hero{border-top:0}
h2{font:700 clamp(24px,3.4vw,26px)/1.1 'Barlow Condensed',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
ul.lanes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
ul.lanes li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:14px}
ul.lanes li a{text-decoration:none;font-weight:700;color:#2563eb}
ul.lanes li small{display:block;color:var(--dim);font-size:11px;font-family:'JetBrains Mono',monospace;margin-top:2px}
ul.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
ul.chips a{display:block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;text-decoration:none;color:var(--ink)}
ul.chips a:hover{border-color:#2563eb;color:#2563eb}
ul.chips a.on{border-color:#2563eb;color:#2563eb;font-weight:700;background:rgba(219,234,254,0.5)}
.addr{font-style:normal;font-size:15px;line-height:1.8;color:var(--muted);overflow-wrap:anywhere}
.addr a{text-decoration:none}

/* the "Ready to ship" box on the home page */
.band{background:linear-gradient(135deg,rgba(37,99,235,0.12),rgba(37,99,235,0.04));border:1px solid rgba(37,99,235,0.2);border-radius:16px;
  padding:40px 48px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:8px 0 52px}
.band h2{margin-bottom:8px}
.band p{font-size:14px;color:var(--muted);max-width:480px}
.band .btn{flex-shrink:0}

/* footer = the bottom of the home page's About section */
.pub-foot{background:var(--soft);border-top:1px solid var(--line);padding:24px 0 40px}
.pub-foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.pub-foot .lp-contact>div{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.pub-foot .lp-contact a{color:inherit}
.pub-foot .badge{background:rgba(0,0,0,0.04);color:var(--dim);border:1px solid var(--line)}
.pub-foot-links{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.pub-foot .lp-seo-row{color:var(--dim)}
.pub-foot .lp-seo-row b{color:var(--muted);margin-right:6px}
.pub-foot .lp-seo-row a{color:var(--dim)}

@media (max-width:860px){
  .pub-wrap{padding:0 24px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  ul.lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pub-wrap{padding:0 16px}
  .pnav-login{margin-right:0}
  .crumbs{padding-top:24px}
  .band{padding:24px 20px}
  .band .btn{width:100%;justify-content:center}
  ul.lanes{grid-template-columns:1fr}
  .cta-row .btn{width:100%;justify-content:center;min-height:44px}
  .pub-foot .lp-seo-row a{display:inline-block;padding:7px 0}
}