/* The public site's shell: skip link, navigation, closing CTA band, and footer.
   Every public page links this file and uses the same markup, so the header a visitor sees on the
   homepage is the header they see on a comparison page and on the device guide. It was three
   different headers and three different footers before 2026-08-27; the pages that drifted were the
   ones that owned a private copy of these rules.

   2026-09-01: the "Counter Signal" redesign. A warm sticky bar on inner pages, a transparent white
   variant over the photo heroes (body.hero-photo), and a footer made of a dark CTA band, a
   five-column sitemap, a bottom row and the trademark line. The CTA band's headline and text are
   the one per-page part of the chrome, so it lives in its own <section class="site-cta"> at the
   end of <main>; the <footer> itself stays byte-identical everywhere.

   Rules here are self-sufficient: they never assume `body.marketing-page`, because four of the
   pages that need this chrome do not carry that class. Tokens come from pickup-signal-brand.css,
   which every public page already links. Page CSS loads after this file and may override. */

.site-wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}

/* The chrome owns its own link reset. Pages that set their own `a` styles — the comparison pages
   underline body links, the legal pages inherit a document style — must not leak them into the
   header and footer, which is why these are scoped rather than global. */
.site-nav a,.site-footer a,.site-cta a,a.site-skip{color:inherit;text-decoration:none}
.site-nav a:hover,.site-footer a:hover{color:inherit}
.site-nav img,.site-footer img{display:block;max-width:100%}
.site-nav summary,.site-nav button{font:inherit}
.site-nav,.site-footer,.site-cta{font-family:var(--ps-site-sans);-webkit-font-smoothing:antialiased}
.site-nav :focus-visible,.site-footer :focus-visible,.site-cta :focus-visible{outline:3px solid var(--ps-green);outline-offset:3px;border-radius:5px}
.site-cta :focus-visible{outline-color:var(--ps-ready)}

/* P4-2: `html a.site-skip`, never a bare `.site-skip`. `.marketing-page a{color:inherit}` is
   (0,1,1); a bare class is (0,1,0) and loses, so the white label inherited the page ink onto an ink
   background — 1.00:1, invisible, on every marketing route. A keyboard user tabbed to a focus ring
   around nothing.

   The `html` qualifier is load-bearing and newer than the original fix. This file loads BEFORE
   marketing-pages.css, so matching that rule's (0,1,1) would merely lose on source order instead —
   the same bug, reintroduced by moving the rule here. (0,1,2) wins on specificity from any
   position. Do not reduce this selector. */
html a.site-skip{position:fixed;z-index:1000;top:8px;left:50%;transform:translate(-50%,-160%);padding:10px 16px;border-radius:8px;background:var(--ps-cocoa);color:#fff;font-weight:750}
html a.site-skip:focus{transform:translate(-50%,0)}

/* ---- navigation ------------------------------------------------------------------------------ */
.site-nav{position:sticky;top:0;left:0;right:0;z-index:100;color:var(--ps-cocoa);background:rgba(239,229,216,.9);border-bottom:1px solid rgba(43,33,24,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:15px}
.site-nav-inner{display:flex;align-items:center;gap:26px;padding:18px clamp(20px,4vw,56px)}
.site-logo{display:flex;align-items:center;gap:10px;flex:none;min-height:44px;font-size:18px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.site-logo .mark{display:block;flex:none;width:28px;height:24px}
.site-nav-links{display:flex;align-items:center;gap:4px;margin-left:auto;font-weight:500}
.site-nav-links>a,.nav-drop>summary{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;cursor:pointer;list-style:none;white-space:nowrap}
.nav-drop>summary::-webkit-details-marker{display:none}
.nav-drop>summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav-drop[open]>summary::after{transform:rotate(-135deg) translateY(2px)}
.site-nav-links>a:hover,.nav-drop>summary:hover,.nav-drop[open]>summary{background:rgba(43,33,24,.08)}
.site-nav-links>a[aria-current="page"]{background:rgba(43,33,24,.08)}
.site-signin{opacity:.85}
.nav-drop{position:relative}
/* Page CSS must not reach into the chrome. The comparison pages style bare `details` for their FAQ
   accordions, which drew a hairline across the top of the nav dropdowns the moment they adopted
   this header. The chrome resets what it owns rather than depending on twenty-four pages to scope
   their own rules. The Menu button's border lives on its summary and survives this. */
.site-nav details{border:0;margin:0}
.site-nav .nav-drop>summary{border:0}
.nav-panel{position:absolute;top:calc(100% + 8px);left:0;display:grid;width:300px;padding:8px;border-radius:18px;background:#fff;color:var(--ps-cocoa);box-shadow:0 24px 60px -30px rgba(43,33,24,.55)}
.nav-drop.nav-drop-solutions .nav-panel{width:280px}
.nav-panel a{display:block;padding:10px 12px;border-radius:12px}
.nav-panel a:hover{background:var(--ps-clay)}
.nav-panel a[aria-current="page"],.mobile-panel a[aria-current="page"]{background:var(--ps-clay)}
.nav-panel b{display:block;font-size:14.5px;font-weight:700}
.nav-panel span{display:block;color:var(--ps-cocoa-muted);font-size:12.5px;font-weight:500;line-height:1.4}
.site-button{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ps-ready);color:var(--ps-ready-ink)!important;font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap}
.site-button:hover{background:var(--ps-ready-hover);color:var(--ps-ready-ink)!important}
.mobile-menu{display:none;margin-left:auto}
.mobile-menu>summary{display:flex;align-items:center;justify-content:center;min-width:54px;min-height:44px;padding:0 12px;border:1.5px solid rgba(43,33,24,.25);border-radius:999px;cursor:pointer;font-weight:700;list-style:none}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-menu>summary::after{content:none!important}
.mobile-panel{position:absolute;top:100%;left:0;right:0;padding:12px clamp(20px,4vw,56px) 20px;border-bottom:1px solid rgba(43,33,24,.12);background:var(--ps-clay);color:var(--ps-cocoa)}
.mobile-panel a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--ps-sand-2);font-weight:700}
.mobile-panel .site-button{margin-top:14px;border-bottom:0}

/* Over a photo hero the bar floats: white text, no ground, the reversed mark. The page opts in with
   body.hero-photo; the markup does not change. */
.hero-photo .site-nav{position:absolute;color:#fff;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero-photo .site-nav .site-logo .mark{background-image:url("../assets/brand/pickup-signal/mark-reverse.svg")}
.hero-photo .site-nav-links>a:hover,.hero-photo .nav-drop>summary:hover,.hero-photo .nav-drop[open]>summary,.hero-photo .site-nav-links>a[aria-current="page"]{background:rgba(255,255,255,.14)}
.hero-photo .mobile-menu>summary{border-color:rgba(255,255,255,.5)}
.hero-photo .mobile-panel{background:var(--ps-cocoa);color:#fff;border-bottom-color:rgba(255,255,255,.18)}
.hero-photo .mobile-panel a{border-bottom-color:rgba(255,255,255,.18)}
.hero-photo .mobile-panel a[aria-current="page"]{background:rgba(255,255,255,.14)}

/* ---- closing CTA band ------------------------------------------------------------------------ */
.site-cta{padding:clamp(64px,8vw,120px) clamp(20px,4vw,56px) 0;color:var(--ps-cocoa)}
.site-cta-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;padding:clamp(36px,5vw,64px) clamp(24px,5vw,64px);border-radius:32px;background:var(--ps-cocoa);color:var(--ps-clay)}
.site-cta .site-cta-band h2{margin:0;font-family:var(--ps-site-serif);font-weight:400;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.02em;text-wrap:balance;color:inherit}
.site-cta .site-cta-band p{margin:14px 0 0;max-width:52ch;font-size:17px;line-height:1.5;color:rgba(239,229,216,.78)}
.site-cta-actions{display:flex;flex-direction:column;gap:10px;min-width:240px}
.site-cta-primary{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border-radius:999px;background:var(--ps-ready);color:var(--ps-ready-ink)!important;font-weight:700;font-size:16px;white-space:nowrap}
.site-cta-primary:hover{background:var(--ps-ready-hover)}
.site-cta-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(239,229,216,.4);color:var(--ps-clay)!important;font-weight:600;white-space:nowrap}
.site-cta-secondary:hover{background:rgba(255,255,255,.08)}
.site-cta-fine{text-align:center;font-size:13px;line-height:1.5;color:rgba(239,229,216,.6)}

/* ---- footer ---------------------------------------------------------------------------------- */
.site-footer{padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px) 40px;color:var(--ps-cocoa);font-size:14.5px;line-height:1.5}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:36px}
.footer-grid>*{min-width:0}
.footer-brand .site-logo{font-size:17px}
.footer-brand .site-logo .mark{width:26px;height:22px}
.footer-brand p{max-width:280px;margin:12px 0 0;color:var(--ps-cocoa-muted)}
.footer-col{display:grid;gap:8px;align-content:start;color:var(--ps-cocoa-muted)}
.site-footer .footer-grid .footer-col h2{margin:0 0 4px;color:var(--ps-accent);font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.footer-col a{display:block;color:var(--ps-cocoa-muted)}
.footer-col a:hover{color:var(--ps-cocoa)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(43,33,24,.15);color:var(--ps-cocoa-muted);font-size:13px}
.footer-bottom span:last-child{display:flex;gap:16px}
.footer-bottom a:hover{color:var(--ps-cocoa)}
/* Muted cocoa, not the handoff's #8C7B6C: that read 3.27:1 at 12px on clay, under AA. */
.site-footer .legal{margin:14px 0 0;color:var(--ps-cocoa-muted);font-size:12px;line-height:1.5}

@media (max-width:900px){
  .site-nav-links{display:none}
  .mobile-menu{display:block}
  .site-cta-band{grid-template-columns:1fr}
  .site-cta-actions{min-width:0}
  .footer-grid{grid-template-columns:1.4fr repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .site-wrap{width:min(100% - 32px,1120px)}
  .site-nav-inner{gap:10px;padding-block:12px}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .footer-brand{grid-column:1/-1}
  .footer-col a{display:flex;align-items:center;min-height:44px;padding-block:4px}
  .footer-bottom{flex-direction:column}
  .footer-bottom a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}
@media (max-width:360px){
  .site-nav-inner{gap:4px}
  .site-logo{gap:6px;font-size:16px}
  .site-button{min-height:44px;padding-inline:12px;font-size:14px}
  .mobile-menu>summary{min-width:48px;padding-inline:6px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  html a.site-skip{transition:none}
}