/* EBS apex shell — shared chrome: announcement bar, header, legal row, contact pill.
   Questrial everywhere. Tile styles live in each page's own <style> blocks. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Questrial','Poppins',Arial,sans-serif;background:#040604;color:#c9cfcb}
img{max-width:100%}
.ebs-skip{position:absolute;left:-9999px;top:0;background:#00E676;color:#00150a;padding:10px 18px;z-index:2000;font-size:14px;text-decoration:none;border-radius:0 0 10px 0}
.ebs-skip:focus{left:0}

/* Announcement bar */
.ebs-announce{background:hsl(111,100%,54%);color:#0a1408;text-align:center;padding:10px 16px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.ebs-announce p{margin:0}
.ebs-announce .ebs-announce-btn{background:#00150a;color:#00E676;text-decoration:none;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap}
.ebs-announce .ebs-announce-btn:hover{background:#040604;color:#fff}

/* Header — STICKY per Yannick's Oct 29, 2026 direction (design change vs
   served parity: the Ecwid header scrolls away). position:sticky fits the
   shell structure: the header is a direct body-level element in normal flow
   on every ported page (the mobile panel lives INSIDE it, so it stays
   attached when open), no ancestor clips overflow, and sticky needs no
   body-padding compensation and causes no layout shift — the announcement
   bar above it scrolls away and the header pins at top:0. Appearance,
   heights (70px desktop / 60px at <=1180px) and z-index 900 are unchanged;
   sticky bottom bars (z 999) and the pill (z 1000) keep their stacking. */
.ebs-header{background:#000;color:#fff;position:sticky;top:0;z-index:900}
.ebs-header-in{max-width:1440px;margin:0 auto;height:70px;display:flex;align-items:center;gap:22px;padding:0 24px}
.ebs-logo{display:flex;align-items:center;flex:none;text-decoration:none;color:#fff}
.ebs-logo img{height:46px;width:auto;display:block}
.ebs-nav{display:flex;align-items:center;gap:20px;margin-left:auto}
.ebs-nav a{color:#fff;text-decoration:none;font-size:16px;white-space:nowrap}
.ebs-nav a:hover{color:#00E676}
.ebs-drop{position:relative}
.ebs-drop-toggle{color:#fff;font-size:16px;background:none;border:0;font-family:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px}
.ebs-drop-toggle:hover{color:#00E676}
.ebs-drop-menu{position:absolute;top:calc(100% + 14px);left:0;background:#0d120e;border:1px solid #2c3e33;border-radius:12px;padding:10px;min-width:280px;display:none;flex-direction:column;gap:2px;box-shadow:0 18px 44px rgba(0,0,0,.55);z-index:950}
.ebs-drop-menu a{padding:9px 12px;border-radius:8px;font-size:15.5px}
.ebs-drop-menu a:hover{background:#040604}
.ebs-drop:hover .ebs-drop-menu,.ebs-drop:focus-within .ebs-drop-menu,.ebs-drop.open .ebs-drop-menu{display:flex}
.ebs-icons{display:flex;align-items:center;gap:16px;margin-left:6px}
.ebs-icons a{color:#fff;display:inline-flex}
.ebs-icons svg{width:21px;height:21px;fill:currentColor;display:block}
.ebs-icons a:hover{color:#00E676}
.ebs-header .ebs-cta{border:1.5px solid rgba(255,255,255,.75);color:#fff!important;text-decoration:none;padding:10px 22px;border-radius:999px;font-size:15px;white-space:nowrap;margin-left:8px}
.ebs-header .ebs-cta:hover{border-color:#00E676;color:#00E676!important}
.ebs-burger{display:none;background:none;border:0;color:#fff;cursor:pointer;font-family:inherit;font-size:16px;align-items:center;gap:8px;margin-left:auto;padding:6px 0}
.ebs-burger svg{width:24px;height:24px;fill:currentColor;display:block}
.ebs-mobile-panel{display:none;background:#000;border-top:1px solid #1e2b23;padding:14px 24px 22px;flex-direction:column;max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain}
.ebs-mobile-panel.open{display:flex}
/* Mobile-menu scroll fix (Oct 29, 2026, Yannick's phone report): the open
   panel scrolls its OWN content (overflow-y:auto + max-height capped to the
   viewport under the header — 70px desktop header height here, 60px in the
   <=1180px block below where the burger/panel actually appear) and
   overscroll-behavior:contain keeps the gesture from chaining through.
   The background page is scroll-locked off the SAME .open class shell.js
   already toggles on the panel — no parallel state: closing via the burger
   or tapping any panel link removes .open and scrolling restores itself. */
html:has(.ebs-mobile-panel.open),html:has(.ebs-mobile-panel.open) body{overflow:hidden}
/* While the menu is open the header pins to the viewport top (it is already
   stuck there whenever the page is scrolled; this covers opening the menu
   at the very top, where the announcement bar would otherwise push the
   capped panel past the fold by the bar's height). Same .open state, and
   closing restores plain sticky with no trace. */
html:has(.ebs-mobile-panel.open) .ebs-header{position:fixed;top:0;left:0;right:0;z-index:1100}
/* Menu-open layering fix (Oct 29, 2026, Yannick's screenshot): the header
   carries z-index 900, so its whole stacking context — panel included (the
   panel's own z-index is auto) — lost to the per-page sticky bottom bars
   (fixed, z-index 999) and the pill (fixed, z-index 1000): with the panel
   scrolled to its bottom, the bar painted over the panel's tail (the full
   37px of "Get Started" on the contact bar; ~32px of "Contact us" under
   the taller funding bar) and the pill floated over the panel's lower
   right. ONE open-state rule fixes both, keyed off the same .open class:
   while the menu is open the header stack rises to z-index 1100 (above
   bars AND pill), and the pill is suppressed outright (same
   opacity/visibility/pointer-events language as its auto-hide) so nothing
   of it renders over the panel in either its expanded or condensed state.
   CLOSED-state layering is untouched: header 900, bars 999, pill 1000
   above the bars, per-page pill lifts (incl. pill-lift-125) unchanged,
   and pill auto-hide + condense behave exactly as before. */
html:has(.ebs-mobile-panel.open) .hb-pill{opacity:0;visibility:hidden;pointer-events:none}
.ebs-mobile-panel a{color:#fff;text-decoration:none;font-size:16.5px;padding:10px 0;border-bottom:1px solid #141a15}
.ebs-mobile-panel a:hover{color:#00E676}
.ebs-mobile-panel .ebs-m-sub{padding-left:20px;font-size:15.5px;color:#c9cfcb}
.ebs-mobile-panel .ebs-m-group{color:#00E676;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;padding:16px 0 2px}
.ebs-mobile-panel .ebs-cta{align-self:flex-start;margin:16px 0 4px}
@media(max-width:1180px){
  .ebs-nav,.ebs-header .ebs-cta-desk{display:none}
  .ebs-burger{display:inline-flex}
  .ebs-header-in{height:60px}
  .ebs-logo img{height:38px}
  .ebs-mobile-panel{max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px)}
}

/* Anchor compensation for the sticky header: a DEFAULT scroll-margin for
   every fragment target, sized header height + 14px breathing room
   (84px desktop / 74px at <=1180px where the header is 60px). :where()
   keeps specificity at zero, so the per-page margins already in the tiles
   win untouched (#fi3-prequal / #hc4-contact / #hcn-msg at 90px, .hra-sec /
   .hwb-band sections at 70px — all still clear the stuck header). */
:where([id]){scroll-margin-top:84px}
@media(max-width:1180px){
  :where([id]){scroll-margin-top:74px}
}

/* Inline contact links — EBS green, always (Oct 29, 2026 fix).
   Root cause: classless tel:/sms:/mailto: anchors in copy sat in contexts
   with no color rule, so the UA default won (blue in Safari; on iOS even
   plain-text phone numbers get auto-linkified blue — the plain-text
   numbers in copy were also wrapped into real tel: anchors so every
   browser renders the same link). This rule pins every classless contact
   anchor (in-copy links + the shared tail footer's contact pair) to the
   EBS green #00E676 with a green underline, !important so no tile rule can
   lose the cascade the way the Oct 19 Ecwid lesson describes. Component
   anchors are deliberately NOT matched: text-link CTAs and solid buttons
   are classed (their designed colors stand), and the pill's icon anchors
   are compensated back to their exact prior rendering by the .hb-pill
   rule in the pill section below. */
html body a[href^="tel:"]:not([class]),html body a[href^="sms:"]:not([class]),html body a[href^="mailto:"]:not([class]){color:#00E676!important;text-decoration:underline!important;text-decoration-color:#00E676!important;text-underline-offset:2px}

/* Legal row (replaces the native Ecwid footer; no platform credit) */
.ebs-legal{background:#04070a;color:#9aa39d;text-align:center;padding:26px 24px 34px;font-size:14px;border-top:1px solid #1e2b23}
.ebs-legal p{margin:0 0 10px}
.ebs-legal nav{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap}
.ebs-legal a{color:#9aa39d;text-decoration:none}
.ebs-legal a:hover{color:#00E676}

/* Floating contact pill — ONE global implementation.
   THREE buttons per Yannick's Oct 29, 2026 direction (supersedes the served
   2-button spec for the port): Call tel: / Text sms: / Email mailto:, in
   that order, one capsule; the auto-hide treats it as one widget.
   Ruled deviation from served: z-index 1000 (above sticky bars at 999).
   A-INT-06 auto-hide observer RESTORED Oct 29, 2026 per Yannick's direction
   (supersedes the earlier drop ruling): implemented in shell.js with the
   served mechanics — inline opacity/visibility/pointer-events + inline
   .25s transition set by the script; no hide rules live in this stylesheet,
   and position/z-index/offsets below are unchanged. */
.hb-pill{position:fixed;right:20px;bottom:20px;z-index:1000;display:flex;gap:8px;background:rgba(4,6,4,.92);border:1px solid rgba(0,230,118,.55);border-radius:999px;padding:8px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.hb-pill a{width:42px;height:42px;border-radius:999px;background:#00E676;color:#00150a;display:flex;align-items:center;justify-content:center;text-decoration:none}
/* Pill condense control (Yannick, Oct 29): visitor can collapse the 3-button pill to one
   circular contact button; choice persists per session via sessionStorage (shell.js). */
.hb-pill .hb-condense{width:26px;height:42px;border:0;border-left:1px solid rgba(0,230,118,.35);background:transparent;color:#00E676;font:400 22px/1 Questrial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hb-pill .hb-expand{display:none;width:42px;height:42px;border:0;border-radius:999px;background:#00E676;color:#00150a;cursor:pointer;padding:0;align-items:center;justify-content:center}
.hb-pill.is-condensed>a,.hb-pill.is-condensed .hb-condense{display:none}
.hb-pill.is-condensed .hb-expand{display:flex}
.hb-pill a:hover{background:#00c864}
.hb-pill a[href^="tel:"]:not([class]),.hb-pill a[href^="sms:"]:not([class]),.hb-pill a[href^="mailto:"]:not([class]){color:#00150a!important;text-decoration:none!important}
.hb-pill svg{width:20px;height:20px;fill:#00150a;display:block}
@media(max-width:800px){
  body.has-stickybar .hb-pill{bottom:88px}
  /* Page-scoped pill lifts: bar height + ~14px clearance, rounded up.
     business-funding-insurance.html: .hfu-sticky is 110.84px tall at 390px
     (wrapped two-line label), so the shared 88px offset overlapped it by
     22.84px. 110.84 + 14 = 124.84 -> 125px. */
  body.has-stickybar.pill-lift-125 .hb-pill{bottom:125px}
}

/* Vertical tail-strip fix (Oct 29, 2026, Yannick's phone report on Auto
   Repair): every trade-vertical root (.hv*) carries background:#fff (its
   working sections are light) and, at <=800px, .hv*-tail{padding-bottom:
   64px} of sticky-bar clearance. The Sample Website band (.hsv*) is the
   root's last in-flow child (the sticky bar and pill are fixed, out of
   flow) and is dark (#040604) — so the 64px clearance painted the root's
   white UNDER the dark sample band, and the port's dark shell footer
   (#04070a) abuts the root directly (footerTop == rootBottom), exposing a
   64px white strip in a dark-to-dark transition on all 7 verticals
   (measured: gap exactly 64px, root bg rgb(255,255,255), at 390px; the
   served Ecwid tile carries the identical rules — the port's dark footer
   is what exposes it). ONE shell-level rule heals every vertical: at
   <=800px the tail root paints dark, so its clearance strip is dark.
   Doubled-class specificity (0,2,0) beats each page's inline .hv*
   background rule (0,1,0) regardless of order. Nothing else can show the
   root background: hero, sections, closing band and sample band each
   paint their own opaque full-bleed background. Desktop is untouched —
   the padding, and the strip, exist only at <=800px. */
@media(max-width:800px){
.hva.hva-tail,.hvd.hvd-tail,.hvf.hvf-tail,.hvh.hvh-tail,.hvr.hvr-tail,.hvt.hvt-tail,.hvs.hvs-tail,.hvp.hvp-tail{background:#040604}
}

/* Trades demo band (Oct 29, 2026, Yannick: "Can each trades page have its
   respective EBS Regulars and EBS Gift Cards"): ONE shared band, placed
   inside each vertical's root immediately AFTER its Sample Website band
   and before the sticky bar — dark-on-dark, so it cannot reopen the
   tail-strip defect (the root's dark-painted clearance follows it).
   Two destination-labeled demo cards: the trade's own live EBS Regulars
   demo (loyalty.) and EBS Gift Cards demo (giftcards.). */
.dmb{background:#040604;color:#fff;font-family:'Questrial','Poppins',Arial,sans-serif;text-align:center;padding:64px 24px;border-top:1px solid #1e2b23}
.dmb .k{color:#00E676;font-size:13px;letter-spacing:3px;text-transform:uppercase;margin:0 0 14px}
.dmb h3{color:#fff;font-size:clamp(26px,3.6vw,38px);font-weight:400;line-height:1.15;margin:0 0 12px}
.dmb .s{color:#9aa39d;font-size:16.5px;line-height:1.65;max-width:680px;margin:0 auto 30px}
.dmb-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;margin:0 auto;text-align:left}
.dmb-card{background:#0d120e;border:1px solid #2c3e33;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .25s,border-color .25s,box-shadow .25s}
.dmb-card:hover{transform:translateY(-6px);border-color:#00E676;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.dmb-card img{width:100%;aspect-ratio:120/63;object-fit:cover;display:block}
.dmb-card .bd{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.dmb-card .pk{color:#00E676;font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;margin:0 0 8px}
.dmb-card h4{font-size:20px;font-weight:400;color:#fff;margin:0 0 8px;line-height:1.3}
.dmb-card p{color:#c9cfcb;font-size:14.5px;line-height:1.65;margin:0}
.dmb-card .go{margin-top:auto;padding-top:16px;color:#00E676;font-size:14.5px}
@media(max-width:640px){.dmb-grid{grid-template-columns:1fr}}

/* Footer brand-block parity fix (Oct 29, 2026, Yannick's direction — the
   LIVE footer is the reference: "Should look like this"). Measured live
   truth (served hb5 tile CSS, the tail pattern on every live page,
   rendered-verified at 390px against the Oct 28 snapshot): wordmark
   .brand{font-size:21px;letter-spacing:1px;line-height:1.35;color:#fff;
   margin:0 0 14px} with span #00E676, over p{color:#9aa39d;font-size:
   14.5px;line-height:1.7;margin:0 0 12px} — the blurb AND the "Authorized
   Partner of Paysafe" line are both classless <p>s live, so both render
   muted #9aa39d. Port state before this fix: the hb5-foot variant (12
   pages) already carried those exact rules inline; the ebs-tail variant
   (6 pages) matched except its .ebs-partner override (#c9cfcb, bright);
   the ebs-foot variant (the 8 verticals incl. Hospitality) carried NO p
   rule at all — its blurb + Paysafe line inherited the footer's bright
   #c9cfcb at the 16px body default with UA margins — and its .wm ran
   20px with no tracking or leading. ONE shell block heals all 26 pages:
   the p rule has no inline competitor; the doubled-class rules (0,3,0)
   beat the per-page inline rules (0,2,0) even though shell.css loads
   first (same technique as the tail-strip fix above). Copy and every
   other footer column are untouched. */
.ebs-foot p{color:#9aa39d;font-size:14.5px;line-height:1.7;margin:0 0 12px}
.ebs-foot .wm.wm{font-size:21px;letter-spacing:1px;line-height:1.35;margin:0 0 14px}
.ebs-tail .ebs-partner.ebs-partner{color:#9aa39d}