/* Springfield Sign payment — SSG "Neon Glow" language (Attaché + EPIClock).
   Full-viewport two-panel split. Real .ep/.badge pills, red neon glow in BOTH themes.
   The cross-origin light form is inverted to dark (tuned) in dark theme. CSP-safe:
   all styles here (no inline), same-origin assets only. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-stack); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
.themesw__opt[aria-checked="true"] { color: var(--text-primary); }

/* Commerce Bank's form has a FIXED width (~465px of fields, ~672px at our 1.2 zoom) that we
   can't change cross-origin. So instead of letting the extra width become a void: the form
   column is sized snug to the form, the rail takes the rest, and the whole pair is capped and
   centred. On big screens we scale the form UP (below) rather than widen the gutters. */
/* grid-template-rows: minmax(0,1fr) is REQUIRED — without it the single grid row auto-sizes to
   its tallest content and overflows the (shrunk) container, so the card never gets told to
   shrink and the page scrolls. This pins the row to the container height and lets both cells
   shrink. */
.pay-split { display: grid; grid-template-columns: minmax(360px, 40%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; transition: opacity .16s ease; }
.pay-split.is-swapping { opacity: 0; }

/* ==================== LEFT: brand / trust / contact ==================== */
/* min-height:0 + overflow-y:auto — on a viewport too short for the full rail, the RAIL scrolls
   inside itself rather than making the whole page scroll and shoving the footer off-screen. */
.brandside {
  background: transparent;
  display: flex; align-items: stretch; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.brandside .neon-breathe { z-index: 0; }
/* The rail has NO panel fill of its own — it shares the page background exactly, so there is no
   edge anywhere: no bottom seam into the footer, no vertical seam into the form. Its only
   presence is a soft red wash bleeding in from the left that fades to nothing. */
[data-theme="light"] .brandside {
  background: radial-gradient(85% 75% at 0% 48%, rgba(255,0,8,.035) 0%, rgba(255,0,8,0) 52%);
}
[data-theme="dark"] .brandside {
  background: radial-gradient(85% 72% at 0% 48%, rgba(255,0,8,.07) 0%, rgba(255,0,8,0) 55%);
}
/* Rail content is biased toward the centre (right side of the rail) rather than dead-centre of
   the panel, so it sits closer to the form instead of hugging the far left edge. */
.brandside__in { position: relative; z-index: 1; width: 100%; max-width: 560px; margin-left: auto; margin-right: clamp(20px, 3.6vw, 76px); padding: clamp(16px, 2.6vh, 26px) clamp(30px, 2.4vw, 56px); display: flex; flex-direction: column; min-height: 100%; }
/* keep logo pinned top + tagline pinned bottom; vertically centre the hero/trust/contact block
   so the rail's whitespace reads as balanced breathing room, not a gap. */
/* content flows from just under the header (no big centred gap); rail fills to the footer */
.brandside__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; }

/* Logo centred alone at the top; the theme switch lives at the bottom of the rail, centred under
   the contact card. */
.brandside__top { display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(10px, 2.35vh, var(--sp-6)); }
/* Glowing red divider under the logo — a small echo of the footer bar, bookending the rail and
   separating the brand mark from the message. align-self centres it in the flex column. */
.brandsep { align-self: center; height: 2px; width: min(200px, 52%); margin: 0 0 clamp(10px, 2.35vh, var(--sp-6)); background: linear-gradient(90deg, transparent, var(--red-light) 50%, transparent); filter: drop-shadow(0 0 4px var(--red-glow-50)) drop-shadow(0 0 11px var(--red-glow-40)); }
/* Theme switch pinned bottom-right for TESTING. Final roll-out: remove this UI and just follow the
   OS theme (prefers-color-scheme) — the page already supports 'system'. */
#themeSwitch { position: fixed; bottom: 18px; right: 18px; z-index: 50; }
.brandside__logolink { display: inline-flex; border-radius: var(--r-sm); }
.brandside__logolink:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-glow-20); }
/* Stacked lockup (flame centred over the wordmark) — inherently balanced when centred, no nudge. */
.brandside__logo { height: clamp(56px, 8.6vh, 90px); width: auto; display: block; filter: drop-shadow(0 0 5px var(--red-glow-40)) drop-shadow(0 0 18px var(--red-glow-30)); }

.hero__eyebrow { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--red-light); margin-bottom: 12px; text-shadow: 0 0 14px var(--red-glow-40); }
.hero h1 { font-size: clamp(34px, 2.6vw, 46px); font-weight: 680; letter-spacing: -.03em; line-height: 1.04; margin: 0 0 16px; }
.hero__sub { font-size: var(--fs-lg); color: var(--text-secondary); line-height: var(--lh-snug); margin: 0 0 clamp(10px, 2.1vh, 22px); }

/* Centre the hero and the contact card. The trust list stays left-aligned — icon + wrapping
   sentence rows read wrong centred. */
.hero { text-align: center; }
.contact { text-align: center; }
.contact__actions { align-items: center; }
.contact__row { justify-content: center; }
.contact__third { text-align: center; }

/* Commerce Bank brand green pill — sampled from their own UI:
   #0D6E4F (their primary button/nav green) and #72B64F (their logo accent). */
.ep--commerce { background: rgba(13,110,79,.10); border-color: rgba(13,110,79,.32); color: #0B6247; }
[data-theme="dark"] .ep--commerce { background: rgba(114,182,79,.13); border-color: rgba(114,182,79,.36); color: #86C866; }

.trust { list-style: none; margin: 0 0 clamp(10px, 2.35vh, var(--sp-6)); padding: 0; display: flex; flex-direction: column; gap: 2px; }
.trust li { display: flex; align-items: center; gap: var(--sp-4); padding: 14px 0; border-bottom: 1px solid var(--hairline-faint); font-size: var(--fs-md); color: var(--text-secondary); line-height: var(--lh-snug); }
.trust li:last-child { border-bottom: 0; }
/* COLOR SYSTEM — every colour means exactly one thing on this page:
     red    = Springfield Sign (brand chrome)
     green  = Commerce Bank (the processor), everywhere it appears
     blue   = security / encryption
     amber  = fees & refunds
     neutral= raw contact data only                                                     */
.trust .ic { flex: none; width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; border: 1px solid; box-shadow: 0 0 11px -3px currentColor; }
.trust .ic svg { width: 18px; height: 18px; }
/* blue = security */
.ic--secure { background: var(--order-bg); color: var(--order-text); border-color: var(--order-bd); }
/* green = Commerce Bank, matching the .ep--commerce pills exactly */
.ic--commerce { background: rgba(13,110,79,.10); color: #0B6247; border-color: rgba(13,110,79,.32); }
[data-theme="dark"] .ic--commerce { background: rgba(114,182,79,.13); color: #86C866; border-color: rgba(114,182,79,.36); }
/* red = Springfield Sign (the statement descriptor is about our name) */
.ic--brand { background: var(--red-glow-10); color: var(--red-light); border-color: var(--border-red-subtle); }

.note { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r-md); background: rgba(240,169,57,.08); border: 1px solid rgba(240,169,57,.22); margin-bottom: var(--sp-4); }
.note svg { flex: none; width: 15px; height: 15px; color: var(--yellow-text); margin-top: 1px; }
.note span { font-size: var(--fs-sm); color: var(--text-tertiary); line-height: var(--lh-snug); }

/* contact — elevated tile with real .ep action pills */
.contact { padding: clamp(12px, 1.95vh, var(--sp-5)); border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--bg-card-elevated); box-shadow: var(--shadow-pop); }
.contact__h { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); margin-bottom: 7px; }
/* who you're reaching, as a structured eyebrow rather than loose plaintext */
.contact__who { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-faint); margin-bottom: var(--sp-4); }
.contact__actions { display: flex; flex-direction: column; gap: 10px; }
.contact__row { display: flex; flex-wrap: wrap; gap: 10px; }
/* the processor is a separate company — set apart from Springfield Sign's own contacts */
.contact__third { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--border-neutral); }
.contact__third-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--text-faint); margin-bottom: 9px; line-height: 1.5; }

/* Springfield Sign tagline — centred footer that blends into the page (no bordered bar). Instead
   of a hard hairline, a soft red "neon" divider line that fades at the edges + a faint red rise,
   so it reads as part of the Neon Glow environment rather than a separate strip. */
/* No background wash on the footer itself: the ONLY glow is the bar's halo (drop-shadow below),
   which blooms symmetrically across the footer's top edge, so there is no brightness step / line
   where it meets the panel above. */
.tagline { flex: none; margin-top: clamp(14px, 4.2vh, 44px); position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 24px 16px; background: transparent; font-size: 11px; text-transform: lowercase; color: var(--text-dim); letter-spacing: .08em; }
/* Glowing neon bar across the top of the footer. */
/* Footer glow = the neon LINE itself glows. drop-shadow follows the line's own shape, so it
   blooms above and below the bar and fades out at the ends — no blob behind the text. Nothing is
   positioned outside the page, so there's no stray overflow (that was the tiny scroll + the black
   canvas line at the very bottom). */
.tagline::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(760px, 66%); height: 2px; background: linear-gradient(90deg, transparent, var(--red-glow-40) 16%, var(--red-light) 50%, var(--red-glow-40) 84%, transparent); filter: drop-shadow(0 0 3px var(--red-light)) drop-shadow(0 0 9px var(--red-glow-50)) drop-shadow(0 0 20px var(--red-glow-30)); }
.tagline span + span { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border-neutral); }
.contact__actions .ep { text-decoration: none; }
.contact__actions .ep:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-glow-20), 0 0 16px -5px currentColor; }
.themesw__opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-glow-20); border-radius: var(--r-pill); }

/* ==================== RIGHT: the payment form ==================== */
/* Centre the form card vertically against the rail. The form is the shorter column, so top-
   aligning it left dead space beneath it and read as sitting too high; centring balances the two. */
/* Flex COLUMN so the card can be sized to fill whatever vertical space is left after the tabs,
   capped at its natural 812px. overflow VISIBLE so the card's red glow is never clipped (padding
   gives it clearance). min-height:0 lets the whole chain shrink on short viewports instead of
   forcing a page scroll. */
.formside { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; overflow: visible; padding: clamp(12px, 3.8vh, 40px) clamp(18px, 2.2vw, 48px); }
[data-theme="light"] .formside { background: radial-gradient(90% 55% at 100% 0%, rgba(255,0,8,.022) 0%, rgba(255,0,8,0) 60%), #fff; }
[data-theme="dark"] .formside { background: radial-gradient(100% 60% at 100% 0%, rgba(255,0,8,.06) 0%, rgba(255,0,8,0) 55%), #0b0b0f; }
.formside__in { width: 100%; max-width: 1000px; flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }

.paycard { width: 100%; border: 1px solid var(--border-neutral); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-float); flex: 1 1 auto; min-height: 0; max-height: 812px; display: flex; flex-direction: column; }
/* The form sits on a red back glow, with a glowing red edge, so it reads as the lit focal point. */
[data-theme="light"] .paycard { border-color: rgba(255,0,8,.22); box-shadow: 0 0 0 1px rgba(255,0,8,.10), 0 0 30px -6px rgba(255,0,8,.20), 0 0 100px -26px rgba(255,0,8,.22), 0 16px 42px -22px rgba(255,0,8,.16), var(--shadow-float); }
[data-theme="dark"] .paycard { border-color: rgba(255,71,87,.30); box-shadow: 0 0 0 1px rgba(255,0,8,.26), 0 0 30px -6px var(--red-glow-40), 0 0 78px -18px var(--red-glow-40), 0 0 160px -38px var(--red-glow-30), var(--shadow-float); }

.paycard__head { display: flex; align-items: center; gap: var(--sp-3); padding: 13px var(--sp-5); border-bottom: 1px solid var(--hairline); background: var(--bg-card); }
.paycard__head .lock { width: 16px; height: 16px; color: var(--green-text); flex: none; }
.paycard__head .t { font-size: var(--fs-base); font-weight: 600; }
.paycard__head .grow { flex: 1; }

.paycard__body { padding: var(--sp-3); background: var(--bg-card-elevated); flex: 1 1 auto; min-height: 0; display: flex; }

/* The Commerce Bank form is responsive: at ~900px+ it lays out in TWO columns with normal-size
   fields, which fills the width without scaling anything up. We give it real width (formside__in
   max-width) and set the iframe height to the form's content height in that layout. Its footer
   pins to the bottom, so the height is tuned per layout (2-col wide vs 1-col stacked). If
   Commerce changes their fields, re-measure these heights. Measured 2026-07-20. */
/* The plate fills the card body via flex (no fixed height). The card is capped at 812px (its
   natural 2-col content height, measured 2026-07-20) and shrinks below that on short viewports;
   when it shrinks, the Commerce form scrolls INSIDE its own iframe (button stays reachable)
   instead of the whole page scrolling. */
.payplate {
  position: relative; overflow: hidden; background: #fff; border-radius: var(--r-md);
  width: 100%; flex: 1 1 auto; min-height: 0;
}
.payplate iframe { display: block; border: 0; width: 100%; height: 100%; }
/* Dark theme: Commerce Bank's form is light-only with no dark theming, so we show it in its
   TRUE colors as a deliberate light sheet, lifted with a shadow so it reads as a document on a
   dark desk rather than a hole in the page. */
[data-theme="dark"] .paycard__body { padding: var(--sp-4); }
[data-theme="dark"] .payplate {
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.80), 0 2px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12);
}

.formcap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-tertiary); }
.formcap svg { width: 14px; height: 14px; }

/* Tabbed form panel: centre the Attaché-style tabs over the card. */
/* Page-level tab bar (it lives outside .pay-split — see the note in index.html). Because it is
   not inside the grid whose tracks collapse for My Account, it holds its position across both
   panes. That is what makes the indicator slide cleanly instead of chasing a moving bar. */
/* Sticky so the tabs stay reachable instead of scrolling off. Needs an opaque background or
   the page content shows through underneath it. */
/* position: sticky pins the bar to the top on scroll AND acts as the positioning context for the
   sliding indicator below (one rule, not the two competing ones that were here — a later
   position:relative was silently overriding the sticky, which is why it never locked). Opaque
   page-coloured background so scrolled content doesn't show through under it. */
.paytabs { flex: none; justify-content: center; margin: 0; padding: 10px 0 0; border-bottom: 0;
  position: sticky; top: 0; z-index: 60; background: var(--bg-page); }

/* Sliding tab indicator. Attaché draws the active underline as a per-tab ::after that fades in
   and out, which reads as two separate bars blinking. Here ONE bar physically travels between
   the tabs, so switching panes is a single continuous motion. */
.paytabs .tab::after { display: none !important; }
.paytabs__ind {
  position: absolute; bottom: -1px; left: 0; height: 2px; width: 0;
  background: var(--red-bright); border-radius: 2px 2px 0 0; pointer-events: none;
  box-shadow: 0 0 10px 1px var(--red-bright), 0 4px 16px 0 var(--red-light), 0 8px 26px -2px var(--red-light);
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), width .34s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .paytabs__ind, .pay-split { transition: none; } }
/* The active pane fills the space under the tabs and vertically centres the card, so the card
   grows to fill a tall viewport (capped 812) and shrinks on a short one — no page scroll. */
/* BOTH panes are always rendered and stacked in the same grid cell. The inactive one is only
   hidden by opacity, so it keeps real dimensions and can fully boot AND paint in the background.
   With display:none the Commerce SPA gets zero dimensions and defers painting, so switching tabs
   made it lay out from scratch — that was the grey flash on switch. Now the switch is instant. */
.formside__in .tabpane { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 0; justify-content: center; opacity: 0; pointer-events: none; z-index: 1; background: #fff; }
[data-theme="dark"] .formside__in .tabpane { background: #0b0b0f; }
.formside__in .tabpane.on { opacity: 1; pointer-events: auto; z-index: 2; }

/* "My Account" = the customer portal, which is a full app (own sidebar, logo, contact, dark theme).
   In this mode we hide our rail and let it fill the frame full-bleed. */
/* Collapse the rail track to 0 rather than swapping to a single column — same end state, but
   grid-template-columns interpolates between two tracks, so the rail slides closed and the form
   column (and the tab bar with it) glides to full-bleed instead of snapping. */
.pay-split.is-account { grid-template-columns: 0px minmax(0, 1fr); }
.pay-split.is-account .brandside { opacity: 0; pointer-events: none; }
/* Crossfade on tab switch. The layout swap (rail track -> 0, form column -> full bleed) happens
   INSTANTLY at the midpoint, while every animated element is at opacity 0, so the reflow is
   never seen. Animating the grid tracks instead was the glitchy jumping: the tracks moved while
   content was still visible and the tab bar rode along with them. */


.formside__in .tabpane.on { animation: none; }
.pay-split.is-account .formside { padding: clamp(10px, 1.4vw, 20px); align-items: stretch; }
.pay-split.is-account .formside__in { max-width: 2400px; }

/* Pre-paint tab restore. pay.js reads the URL hash in <head> and stamps it on <html> before the
   body paints, so refreshing on #account lands straight on the portal instead of flashing the
   one-time payment form for a frame first. These mirror the .is-account rules above. */
html[data-pane="account"] .pay-split { grid-template-columns: 0px minmax(0, 1fr); }
html[data-pane="account"] .brandside { opacity: 0; pointer-events: none; }
html[data-pane="account"] .formside { padding: clamp(10px, 1.4vw, 20px); align-items: stretch; }
html[data-pane="account"] .formside__in { max-width: 2400px; }
html[data-pane="account"] .formside__in .tabpane[data-pane="pay"] { opacity: 0; pointer-events: none; }
html[data-pane="account"] .formside__in .tabpane[data-pane="account"] { opacity: 1; pointer-events: auto; }
/* Flex-filled like the pay card, so the portal takes the space left above the footer instead of
   a fixed 100vh calc that would push the footer off the bottom. */
.accountframe { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; }
.accountframe iframe { display: block; border: 0; width: 100%; height: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-float); }

/* ==================== responsive ==================== */

/* Stack into one column on tablet/phone. Below ~700px the Commerce form drops to a SINGLE
   column (taller), so the iframe needs more height there. */
/* The DESKTOP layout deliberately constrains everything to the viewport height so the page never
   scrolls (card flex-shrinks, form scrolls in its own frame). MOBILE is the opposite: the stacked
   layout is intentionally taller than the screen and the page scrolls normally. So every height
   cap from the desktop chain has to be undone here, or the rail gets squashed into one grid row
   and the tall single-column form gets clipped by the card's 812px cap. */
@media (max-width: 980px) {
  .pay-split { grid-template-columns: 1fr; grid-template-rows: auto auto; max-width: 640px; margin: 0 auto; flex: 0 0 auto; min-height: 0; }
  .brandside { position: static; height: auto; overflow: visible; min-height: 0; border-right: 0; border-bottom: 1px solid var(--border-red-subtle); }
  .brandside__in { max-width: none; padding: 30px 28px; }
  .brandside__top { margin-bottom: 28px; }
  .formside { min-height: 0; }
  .formside__in { max-width: none; flex: 0 0 auto; }

  /* Mobile does NOT stack the panes. On desktop both panes share one grid cell (preloaded,
     cross-fade). On mobile that made the cell as tall as the TALLEST pane — the ~1600px payment
     form — so switching to My Account left a screen of empty space below the short portal, and
     the whole page inherited the payment form's height. Here the inactive pane is display:none
     and takes zero space, so each pane is exactly as tall as its own content. */
  .formside__in { display: block; }
  .formside__in .tabpane { grid-area: auto; opacity: 1; pointer-events: auto; display: none; }
  .formside__in .tabpane.on { display: block; }
  .paycard { max-height: none; flex: 0 0 auto; display: block; }
  .paycard__body { flex: 0 0 auto; display: block; }
  .payplate { flex: 0 0 auto; }

  /* Payment iframe height = the form's MEASURED single-column content height, plus ~90px for the
     subtotal/surcharge/total rows that appear once an amount is entered. Measured directly with
     a real device viewport (not guessed): 600px wide -> 1347, 390 -> 1443, 360 -> 1460.
     Sized this way there is no internal scroll (so the page scrolls normally, no touch-scroll
     trap) and no dead gap above Commerce's bottom-pinned button. Re-measure if they change
     fields: load the paymentLink directly at that width and read the tallest element. */
  .payplate, .payplate iframe { height: 1440px; }

  /* Rail out of flow entirely in account mode (display:none, not opacity) so the portal isn't
     pushed down by an invisible row — that was the black nothingness above My Account. */
  .pay-split.is-account .brandside,
  html[data-pane="account"] .brandside { display: none; }
  .pay-split.is-account,
  html[data-pane="account"] .pay-split { grid-template-rows: auto; }

  /* The portal is a self-contained full-height app (measured 844px = viewport, own internal
     scroll), so it gets viewport height minus the sticky tab bar, not a content-sized box. */
  .accountframe { flex: 0 0 auto; }
  .accountframe iframe { height: calc(100dvh - 58px); }
}
/* Narrower screens wrap more, so the single-column form is taller. */
@media (max-width: 430px) {
  .payplate, .payplate iframe { height: 1540px; }
}
@media (max-width: 360px) {
  .brandside__in { padding: 24px 18px; }
  .payplate, .payplate iframe { height: 1560px; }
}

/* ==================== hover glow — left pane ==================== */
/* Every item on the brand rail lights up in its OWN colour on hover: security = blue,
   Commerce Bank = green, statement/brand = red, refunds note = amber, contact pills = their
   own tint. The glow eases in, and is disabled under prefers-reduced-motion. */
.brandside__logo { transition: filter .3s ease; }
.brandside__logolink { transition: transform .2s ease; }
.brandside__logolink:hover { transform: translateY(-1px); }
.brandside__logolink:hover .brandside__logo { filter: drop-shadow(0 0 6px var(--red-glow-50)) drop-shadow(0 0 22px var(--red-glow-40)); }

.trust li { padding: clamp(6px, 1.05vh, 10px) 12px; border-radius: 12px; transition: transform .22s ease, box-shadow .3s ease, background-color .3s ease; }
.trust li .ic { transition: box-shadow .3s ease, transform .3s ease; }
.trust li:hover { transform: translateX(3px); }
.trust li:hover .ic { transform: translateY(-1px); box-shadow: 0 0 14px -2px currentColor; }
.trust li:has(.ic--secure):hover  { background: var(--order-bg); box-shadow: 0 0 22px -7px var(--order-text); }
.trust li:has(.ic--commerce):hover { background: rgba(13,110,79,.08); box-shadow: 0 0 22px -7px #0B6247; }
[data-theme="dark"] .trust li:has(.ic--commerce):hover { background: rgba(114,182,79,.10); box-shadow: 0 0 22px -7px #86C866; }
.trust li:has(.ic--brand):hover  { background: var(--red-glow-10); box-shadow: 0 0 22px -7px var(--red-light); }

.note { transition: transform .22s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease; }
.note:hover { transform: translateY(-1px); border-color: rgba(240,169,57,.45); background: rgba(240,169,57,.12); box-shadow: 0 0 24px -7px rgba(240,169,57,.6); }

.contact { transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease; }
.contact:hover { transform: translateY(-1px); border-color: var(--border-red-subtle); box-shadow: var(--shadow-pop), 0 0 30px -8px var(--red-glow-30); }
.contact .ep { transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
.contact .ep:hover { transform: translateY(-1px); border-color: currentColor; box-shadow: 0 0 16px -4px currentColor; }

@media (prefers-reduced-motion: reduce) {
  .brandside__logolink, .brandside__logolink:hover, .trust li, .trust li:hover, .trust li .ic,
  .note, .note:hover, .contact .ep, .contact .ep:hover, .brandside__logo { transition: none; transform: none; }
}

/* ==================== cross-origin frame load cover ====================
   Commerce's embed is an SPA: it paints a grey overlay while it boots, which reads as a harsh
   flash inside our card. We can't touch their DOM cross-origin, so instead we hold a branded
   skeleton over the frame and only reveal it once it has actually painted.

   FAIL-SAFE IS THE POINT: on a payment page a stuck skeleton is far worse than a grey flash.
   pay.js reveals on the iframe's load event AND on an unconditional timeout, so the customer
   always reaches a usable form even if load never fires. */
.payplate, .accountframe { position: relative; }
.payplate iframe, .accountframe iframe { opacity: 0; transition: opacity .18s ease; }
.payplate.is-ready iframe, .accountframe.is-ready iframe { opacity: 1; }

.plateskel {
  position: absolute; inset: 0; z-index: 2; display: flex; gap: 26px;
  padding: 30px 26px; background: #fff; border-radius: var(--r-md);
  transition: opacity .18s ease;
}
.plateskel--acct { justify-content: center; align-items: center; background: var(--bg-card); }
.payplate.is-ready .plateskel, .accountframe.is-ready .plateskel { opacity: 0; pointer-events: none; }
.plateskel__col { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Skeleton bars. Neutral grey on white so it reads as OUR placeholder rather than a broken
   render, with a slow red-tinted sweep tying it to the Neon Glow language. */
.skl { display: block; height: 34px; border-radius: 7px; background: #eceef1; position: relative; overflow: hidden; }
.skl--sm { height: 9px; width: 38%; border-radius: 4px; }
.skl--tall { height: 150px; }
.skl::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,0,8,.09) 45%, rgba(255,0,8,.05) 55%, transparent);
  transform: translateX(-100%); animation: sklsweep 1.5s ease-in-out infinite;
}
@keyframes sklsweep { to { transform: translateX(100%); } }
[data-theme="dark"] .plateskel--acct { background: #0b0b0f; }
[data-theme="dark"] .plateskel--acct .skl { background: rgba(255,255,255,.06); }
[data-theme="dark"] .plateskel--acct .skl::after {
  background: linear-gradient(90deg, transparent, rgba(255,71,87,.10) 50%, transparent);
}
@media (prefers-reduced-motion: reduce) { .skl::after { animation: none; } }