/* ============================================================================
   Stay-N-Charge — SHARED page chrome (tokens, base, header, buttons, sections,
   footer). One source of truth for every SNC page: stayncharge.html (home),
   snc-fast-charging.html, snc-equipment.html, snc-tesla.html, snc-about.html.
   Page-specific layout stays inline in each page. Extracted 2026-09-04 from the
   home page's inline styles — values unchanged.

   Brand: teal-blue building + bright-green charge-pin. Light, photo-forward, warm.
   Poppins echoes the wordmark's geometry; green is the "charge", used as a spark.
   Fonts (load per page):
     https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap
   ============================================================================ */
:root{
  --teal:#2996b8; --teal-deep:#2b8290; --ink-teal:#0f2b37;
  --green:#33f423; --green-deep:#0a9444;
  --paper:#fbfdfe; --ink:#1b1b1b; --grey:#808080; --hair:#e4e9ec;
  --head:'Poppins',system-ui,'Segoe UI',sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 18px 44px -22px rgba(15,43,55,.35);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;}
a{color:var(--teal-deep);text-decoration:none;} a:hover{color:var(--teal);}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}
img{display:block;max-width:100%;}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px;}
h1,h2,h3{font-family:var(--head);color:var(--ink-teal);letter-spacing:-.015em;line-height:1.08;}
h1{font-size:clamp(33px,4.9vw,54px);font-weight:700;}
h2{font-size:clamp(25px,3.4vw,36px);font-weight:700;}
h3{font-size:19px;font-weight:600;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:13.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal);}
.eyebrow svg{width:15px;height:15px;flex:none;}
.lede{color:#40525c;font-size:17px;max-width:56ch;}
.lede b{color:var(--ink-teal);font-weight:600;}

/* header */
/* The sticky header is 70px (69px before the Menu button landed) and stays ONE
   ROW at every width, so a hash link would otherwise land its target underneath
   it. One scroll-padding on the root fixes every anchor on every SNC page —
   measured 2026-09-10: every anchor lands 10px clear of the bar at 390 and 1280.
   If the bar ever grows a second row, this value has to move with it. */
html{scroll-padding-top:80px;}
header{position:sticky;top:0;z-index:60;background:rgba(251,253,254,.92);backdrop-filter:blur(9px);border-bottom:1px solid var(--hair);}
.hd{max-width:1120px;margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:18px;}
.logo{flex:none;}
.logo img{height:30px;width:auto;}
nav{display:flex;align-items:center;gap:22px;}
nav a{font-family:var(--head);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#31505c;white-space:nowrap;}
nav a:hover{color:var(--teal);}
nav a.on{color:var(--teal);}
.btn{display:inline-block;font-family:var(--head);font-weight:600;font-size:13.5px;padding:12px 22px;border-radius:9px;
  background:var(--teal);color:#fff;box-shadow:0 8px 20px -10px rgba(41,150,184,.9);transition:transform .12s,background .12s;}
.btn:hover{background:var(--teal-deep);color:#fff;transform:translateY(-1px);}
nav .btn{padding:10px 18px;}
.btn.spark{position:relative;}
.btn.ghost{background:#fff;color:var(--teal-deep);border:1.5px solid #cfe2e8;box-shadow:none;}
.btn.ghost:hover{border-color:var(--teal);background:#fff;}

/* ---------------------------------------------------------------------------
   PRIMARY BAR — four journey items, a brand switch, the CTA, and the Menu.
   The current page is marked by body[data-page], not by a hand-placed class,
   so the header block stays one identical string across the five pages and a
   nav change is a safe mechanical find-and-replace on a site with no build step.
   --------------------------------------------------------------------------- */
nav.primary{margin-left:10px;}
.hd-end{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none;}
.hd-cta{padding:10px 18px;}

body[data-page="solutions"] nav.primary a[data-nav="solutions"],
body[data-page="equipment"] nav.primary a[data-nav="equipment"],
body[data-page="software"]  nav.primary a[data-nav="software"],
body[data-page="build"]     nav.primary a[data-nav="build"]{color:var(--teal);}

/* Software and Build & Run were once SECTIONS of the Solutions page, so the
   rule above could never match them. They are real pages as of 2026-09-10 and
   the body[data-page] rule above is now the primary mechanism; what follows is
   kept for anyone deep-linking to a section within them.
   Highlight by what the URL actually targets, so clicking a nav item always
   lights that item. :has() is current-browser only and degrades to no
   highlight, which is exactly the behaviour this replaces. */
body:has(#software:target)      nav.primary a[data-nav="software"],
body:has(#platforms:target)     nav.primary a[data-nav="software"],
body:has(#software-cost:target) nav.primary a[data-nav="software"],
body:has(#recharge-labs:target) nav.primary a[data-nav="software"],
body:has(#built:target)         nav.primary a[data-nav="build"]{color:var(--teal);}

/* ...and Solutions stands down while one of its sections is the target, so
   exactly one item ever reads as current. */
body[data-page="solutions"]:has(#software:target)      nav.primary a[data-nav="solutions"],
body[data-page="solutions"]:has(#platforms:target)     nav.primary a[data-nav="solutions"],
body[data-page="solutions"]:has(#software-cost:target) nav.primary a[data-nav="solutions"],
body[data-page="solutions"]:has(#recharge-labs:target) nav.primary a[data-nav="solutions"],
body[data-page="solutions"]:has(#built:target)         nav.primary a[data-nav="solutions"]{color:#31505c;}

/* the cross-brand switch — a pill after a hairline, so it reads as a switch and
   not as a fifth nav item. Same tab, on purpose: a new tab makes a hop feel
   like leaving. */
.switch{position:relative;font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.02em;
  color:#31505c;background:#fff;border:1px solid var(--hair);border-radius:999px;
  padding:7px 13px;white-space:nowrap;margin-left:9px;}
.switch::before{content:"";position:absolute;left:-11px;top:50%;transform:translateY(-50%);
  width:1px;height:22px;background:var(--hair);}
.switch:hover{border-color:var(--teal);color:var(--teal);}

/* ---------------------------------------------------------------------------
   THE MENU — a native <details> disclosure. No JavaScript, no build step; the
   keyboard and screen-reader behaviour comes free with <summary>, and if
   anything at all fails it degrades to a plain list of links.
   It lives INSIDE <header> deliberately: the header is sticky with a
   backdrop-filter, which makes its own stacking context, so a panel placed
   outside it renders under the page content.
   --------------------------------------------------------------------------- */
.menu{position:static;flex:none;}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:13px;font-weight:600;color:var(--ink-teal);
  background:#fff;border:1.5px solid #cfe2e8;border-radius:9px;padding:10px 14px;
  white-space:nowrap;transition:border-color .12s,color .12s;}
.menu>summary::-webkit-details-marker{display:none;}
.menu>summary::marker{content:"";}
.menu>summary:hover{border-color:var(--teal);color:var(--teal);}
.menu[open]>summary{border-color:var(--teal);color:var(--teal);background:#f3f8fa;}
.menu .bars{display:block;width:16px;flex:none;}
.menu .bars i{display:block;height:2px;border-radius:2px;background:var(--teal);}
.menu .bars i + i{margin-top:3px;}

/* Sheet at <820px: full width, dropping from under the header, scrolling inside
   itself. No body{overflow:hidden} — with a sticky header that produces a jump
   on close, and a contained sheet over a still background is good enough. */
/* Click-away dismissal, without JavaScript. The backdrop is drawn from the
   summary, so a click anywhere off the panel is still a click on the summary and
   toggles the disclosure shut. Below the panel, above the page. */
.menu[open]>summary::after{content:"";position:fixed;inset:0;z-index:65;}

.menu .panel{position:absolute;z-index:70;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--hair);
  box-shadow:0 26px 60px -26px rgba(15,43,55,.5);
  padding:18px 26px 28px;
  max-height:calc(100vh - 70px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;}
@supports (height:100dvh){ .menu .panel{max-height:calc(100dvh - 70px);} }

.menu .panel .grp + .grp{margin-top:17px;}
.menu .panel h4{font-family:var(--head);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);padding-bottom:7px;border-bottom:1px solid var(--hair);}
.menu .panel a{display:block;font-family:var(--body);font-size:14px;font-weight:500;line-height:1.35;
  color:#31505c;padding:7px 0;}
.menu .panel a:hover{color:var(--teal);}
.menu .panel a.lead{font-family:var(--head);font-weight:600;color:var(--ink-teal);}
.menu .panel .soon{display:block;font-size:12.5px;color:#8496a0;padding:2px 0 6px;line-height:1.45;}
.menu .panel .ext::after{content:" \2197";color:#8fa9b3;font-size:12px;}

/* the Site Logic shelf reads as a place, not as more Stay-N-Charge links */
.menu .panel .sl{margin-top:18px;background:#eef6f9;border:1px solid #d7e9ef;border-radius:12px;
  padding:14px 16px 12px;}
.menu .panel .sl h4{color:var(--teal-deep);border-bottom-color:#cfe3ea;}
.menu .panel .sl .cap{font-size:12px;color:#5d727c;line-height:1.45;margin-top:8px;}
.menu .panel .sl a{color:#2b5c6c;}

/* below 620px the CTA moves out of the bar and becomes the first thing in the
   panel — a wordmark plus a padded button plus gutters does not fit a small
   phone, and shrinking type until it does is not a fix. */
.menu .panel a.panel-cta{display:none;color:#fff;}   /* .btn's white has to out-rank .panel a */
.menu .panel a.panel-cta:hover{color:#fff;}

/* Drawer at >=820px: a 360px sheet hanging off the Menu button. */
@media (min-width:820px){
  .menu{position:relative;}
  .menu .panel{left:auto;right:0;top:calc(100% + 12px);width:360px;
    border:1px solid var(--hair);border-radius:14px;padding:20px 22px 24px;
    max-height:calc(100vh - 104px);}
  @supports (height:100dvh){ .menu .panel{max-height:calc(100dvh - 104px);} }
}

/* --- four responsive tiers ------------------------------------------------
   >=1000  wordmark · 4 journey links · switch · CTA · Menu
   820-999 same, tightened; the switch demotes into the Menu
   620-819 wordmark · CTA · Menu   (journey links are the Menu's first groups)
   <620    wordmark · Menu         (CTA becomes a full-width button in the panel)
   The header stays ONE ROW at every tier — html{scroll-padding-top:80px} above
   is tuned to a 69px bar, and a second row would bury every in-page anchor. */
/* Up to 1023, not 999: at exactly 1000px the full-width bar plus the home
   page's longer CTA ran 4px past the viewport. This tier already fits at
   999, so it simply covers the boundary it was one pixel short of. */
@media (max-width:1023px){
  .hd{padding:13px 18px;gap:13px;}
  nav.primary{gap:13px;margin-left:6px;}
  nav.primary a{font-size:11.5px;letter-spacing:.02em;}
  .switch{display:none;}
}
@media (max-width:819px){
  nav.primary{display:none;}
}
@media (max-width:619px){
  .hd-cta{display:none;}
  .menu .panel a.panel-cta{display:block;width:100%;text-align:center;margin-bottom:16px;padding:13px 18px;}
  .menu .panel a.book{display:none;}   /* the panel button is the booking link at this width */
}
@media (max-width:400px){
  .logo img{height:26px;}
  .menu>summary{padding:10px 12px;gap:7px;}
}

/* full-bleed image band — the journey format's section separator. Sits as a direct
   child of <section> (outside .wrap) so it goes edge-to-edge without 100vw, which
   would count the scrollbar and push the page into a horizontal scroll. */
.bleed{position:relative;background:#dfe8ec;height:clamp(230px,34vw,430px);overflow:hidden;}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bleed{margin-top:clamp(30px,4vw,46px);}
.bleed + .wrap{margin-top:clamp(34px,4.5vw,54px);}
.bleed:first-child{margin-top:0;}

/* ---------------------------------------------------------------------------
   DEFINE — a term explained in plain English at the point it first does work,
   and the callouts that pair a commitment with the thing it does NOT cover.
   Shared here because the same box appears on more than one page.
   .define      teal rule — a definition (demand charge, open book)
   .define.hard green rule — a rule or a limit the reader has to know
   --------------------------------------------------------------------------- */
.define{margin-top:30px;background:#fff;border:1px solid var(--hair);border-left:4px solid var(--teal);
  border-radius:14px;padding:22px 26px;max-width:80ch;}
.define .k{font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal);}
.define h3{margin-top:7px;font-size:18px;}
.define p{margin-top:10px;font-size:14.5px;color:#51636c;line-height:1.62;}
.define p b{font-family:var(--head);color:var(--ink-teal);font-weight:600;}
.define .more{display:inline-block;margin-top:13px;font-family:var(--head);font-weight:600;font-size:13.5px;}
.define.hard{border-left-color:var(--green);}
.define.hard .k{color:var(--green-deep);}

/* THE LEDGER — one named configuration, paid-once beside paid-ongoing, so the
   three pricing units on this site add up in a single place. Scrolls inside
   itself below its min-width rather than pushing the page sideways. */
.ledger{margin-top:28px;overflow-x:auto;border:1px solid var(--hair);border-radius:14px;background:#fff;}
.ledger table{width:100%;border-collapse:collapse;min-width:600px;}
.ledger th,.ledger td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--hair);font-size:14px;vertical-align:top;}
.ledger th{font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);background:#f3f8fa;}
.ledger tr:last-child td{border-bottom:0;}
.ledger td b{font-family:var(--head);font-weight:600;color:var(--ink-teal);}
.ledger td .why{display:block;color:#6b7f88;font-size:13px;margin-top:3px;}
.ledger td.when{color:#41535c;}
.ledger .tag{display:inline-block;font-family:var(--head);font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;border-radius:5px;padding:2px 7px;white-space:nowrap;}
.ledger .tag.req{background:#e9f4f8;color:#1f6f88;}
.ledger .tag.opt{background:#edf9ea;color:var(--green-deep);}
@media (max-width:620px){.ledger th,.ledger td{padding:12px 13px;font-size:13.5px;}}

/* a taught rule of thumb — something the reader can use with us or without us */
.teach{margin-top:28px;font-size:15px;color:#41535c;max-width:76ch;line-height:1.6;}
.teach b{font-family:var(--head);color:var(--ink-teal);font-weight:600;}
.teach + .teach{margin-top:14px;}

section{padding:clamp(56px,7vw,90px) 0;}
.sec-head{max-width:60ch;}
.sec-head h2{margin-top:12px;}
.sec-head p{margin-top:14px;}

/* three-up service cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px;}
@media (max-width:840px){.grid3{grid-template-columns:1fr;}}
.svc{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:28px;box-shadow:0 1px 0 rgba(15,43,55,.02);
  position:relative;overflow:hidden;transition:transform .14s,box-shadow .14s;}
.svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--teal),var(--green));}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.svc .ic{width:44px;height:44px;border-radius:11px;background:#e9f4f8;display:flex;align-items:center;justify-content:center;color:var(--teal);}
.svc .ic svg{width:23px;height:23px;}
.svc h3{margin-top:16px;}
.svc .tag{font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--green-deep);}
.svc p{margin-top:9px;font-size:14.5px;color:#51636c;line-height:1.56;}
.svc ul{margin:10px 0 0;padding-left:0;list-style:none;}
.svc li{position:relative;padding-left:17px;margin-bottom:7px;font-size:14px;color:#51636c;line-height:1.5;}
.svc li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--green);}
.svc li b{color:var(--ink-teal);font-weight:600;}

/* tinted band */
.band{background:#f3f8fa;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}

/* the one dark band per page */
.dark{background:radial-gradient(120% 140% at 100% 0%, #17475a 0%, var(--ink-teal) 60%);color:#dbe8ed;}
.dark .eyebrow{color:var(--green);}
.dark h2,.dark h3{color:#fff;}
.dark h2{margin-top:12px;}
.dark p{color:#b9cdd5;}
.dark p b{color:#fff;}
.dark .btn{background:var(--green-deep);}
.dark .btn:hover{background:#0b7f3b;}
.dark .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}
.dark .btn.ghost:hover{border-color:#fff;background:transparent;}

/* final CTA */
.final{text-align:center;}
.final h2{max-width:20ch;margin:12px auto 0;}
.final .lede{margin:16px auto 0;}
.final .cta-row{margin-top:28px;display:flex;justify-content:center;gap:13px;flex-wrap:wrap;}

/* footer — with the Canopy family line */
footer{background:var(--ink-teal);color:#9fb6bf;}
footer .in{max-width:1120px;margin:0 auto;padding:30px 26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
footer img.wm{height:26px;filter:brightness(0) invert(1);opacity:.92;}
footer .lk{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--head);font-size:13px;font-weight:500;}
footer a{color:#c3d5dc;} footer a:hover{color:#fff;}

/* footer sitemap — the belt to the Menu's braces. Everything the nav can't hold
   lives here on every page, always visible, with no disclosure widget at all. */
footer .fmap{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 30px;
  padding:6px 0 22px;}
footer .fmap h4{font-family:var(--head);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#79cbe2;margin-bottom:9px;}
footer .fmap p.role{font-size:12px;color:#8aa3ac;margin:-4px 0 8px;line-height:1.45;}
footer .fmap a{display:block;font-size:13.5px;padding:4px 0;line-height:1.35;}
footer .fmap .soon{display:block;font-size:12px;color:#7b939c;padding:3px 0 4px;line-height:1.45;}
footer .fmap .ext::after{content:" \2197";color:#7b939c;font-size:11.5px;}
@media (max-width:760px){ footer .fmap{grid-template-columns:1fr 1fr;} }
@media (max-width:470px){ footer .fmap{grid-template-columns:1fr;gap:20px;} }
footer .cr{width:100%;border-top:1px solid rgba(255,255,255,.09);padding-top:14px;font-size:12px;color:#7f9aa4;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
footer .fam{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-size:12px;color:#a9c0c9;}
footer .fam img{height:18px;width:auto;opacity:.9;}

/* tear-sheet link on a lineup card */
.price a.sheet{display:inline-block;margin-left:10px;font-family:var(--body);font-size:11px;font-weight:600;color:var(--teal);text-decoration:none;border:1px solid rgba(41,150,184,.35);border-radius:6px;padding:2px 8px;vertical-align:middle;}
.price a.sheet:hover{background:rgba(41,150,184,.08);}