/*
 * EVBoy-Buy-V2 shared OpenDesign layout styles.
 * Tokens are hoisted into tokens.css; this file keeps the accepted
 * OpenDesign layout/component rules on V2-native asset paths.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: linear-gradient(180deg, color-mix(in oklch, var(--surface) 96%, var(--bg)) 0, var(--bg) 360px, var(--surface) 100%); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0; letter-spacing: var(--tracking-display); text-wrap: balance; }
h1 { font-size: clamp(30px, 4vw, var(--text-2xl)); line-height: 1.14; font-weight: 950; }
h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.18; font-weight: 920; }
h3 { font-size: var(--text-xl); line-height: 1.22; font-weight: 900; }
h4 { font-size: var(--text-lg); line-height: 1.26; font-weight: 900; }
h5, h6 { font-size: var(--text-base); line-height: 1.3; font-weight: 900; }
p { margin: 0; text-wrap: pretty; }
.container { width: min(var(--container-max), calc(100% - var(--container-gutter-desktop) * 2)); margin-inline: auto; }
.section { padding-block: var(--section-y-desktop); }
.section-tight { padding-block: var(--space-12); }
.section-mini { padding-block: var(--space-4); }
.stack { display: grid; gap: var(--space-5); }
.page-heading {
  padding-block: var(--space-5);
  background: color-mix(in oklch, var(--evboy-ink) 94%, var(--surface));
  border-bottom: 1px solid var(--border);
  color: #fff;
}
.section.page-heading {
  padding-block: var(--space-5);
}
.page-heading h1 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.28;
  letter-spacing: 0;
  font-weight: 900;
}
.page-heading a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklch, var(--evboy-yellow) 72%, transparent);
  text-decoration-thickness: .14em;
  text-underline-offset: .18em;
  text-decoration-skip-ink: none;
}
.page-heading a:hover,
.page-heading a:focus-visible {
  color: var(--evboy-yellow);
  outline: none;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.checklist li {
  position: relative;
  padding-left: 22px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--list-marker);
}
.checklist li > ul,
.checklist li > ol {
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  color: var(--fg-2);
}
.checklist li > ul {
  list-style: none;
}
.checklist li > ul > li {
  padding-left: 20px;
}
.checklist li > ul > li::before {
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--evboy-aqua);
  transform: rotate(45deg);
}
.checklist li > ol {
  list-style: none;
  counter-reset: nested-steps;
}
.checklist li > ol > li {
  counter-increment: nested-steps;
  padding-left: 30px;
}
.checklist li > ol > li::before {
  content: counter(nested-steps);
  top: .16em;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-aqua) 14%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--evboy-aqua) 45%, transparent);
  color: var(--fg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
}
.checklist li.warning {
  color: var(--fg);
  font-weight: 950;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklch, var(--evboy-yellow) 56%, transparent);
  text-decoration-thickness: .55em;
  text-underline-offset: -.36em;
  text-decoration-skip-ink: none;
}
.eyebrow { color: var(--evboy-aqua); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lead { color: var(--fg-2); font-size: var(--text-sm); line-height: var(--leading-body); max-width: 68ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.inline-link,
.footer a:not(.btn),
:where(
  .card,
  .summary-card,
  .insight-card,
  .soft-panel,
  .content-card,
  .tutorial-card,
  .price-detail-card,
  .story-copy,
  .faq-item,
  .product-card-body,
  .catalog-body,
  .route-card,
  .source-copy-grid,
  .purchase-container,
  .payment-review,
  .payment-status,
  .footer
) :where(p, li, dd, td, span) a:not(.btn):not(.campaign-card):not(.catalog-item):not(.logo-lockup) {
  color: color-mix(in oklch, var(--evboy-aqua), var(--evboy-ink) 32%);
  font-weight: 900;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklch, var(--evboy-yellow) 70%, var(--evboy-aqua));
  text-decoration-thickness: .15em;
  text-underline-offset: .18em;
  text-decoration-skip-ink: none;
  overflow-wrap: anywhere;
  transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), text-decoration-color var(--motion-fast) var(--ease-standard);
}
.inline-link:hover,
.inline-link:focus-visible,
.footer a:not(.btn):hover,
.footer a:not(.btn):focus-visible,
:where(
  .card,
  .summary-card,
  .insight-card,
  .soft-panel,
  .content-card,
  .tutorial-card,
  .price-detail-card,
  .story-copy,
  .faq-item,
  .product-card-body,
  .catalog-body,
  .route-card,
  .source-copy-grid,
  .purchase-container,
  .payment-review,
  .payment-status,
  .footer
) :where(p, li, dd, td, span) a:not(.btn):not(.campaign-card):not(.catalog-item):not(.logo-lockup):hover,
:where(
  .card,
  .summary-card,
  .insight-card,
  .soft-panel,
  .content-card,
  .tutorial-card,
  .price-detail-card,
  .story-copy,
  .faq-item,
  .product-card-body,
  .catalog-body,
  .route-card,
  .source-copy-grid,
  .purchase-container,
  .payment-review,
  .payment-status,
  .footer
) :where(p, li, dd, td, span) a:not(.btn):not(.campaign-card):not(.catalog-item):not(.logo-lockup):focus-visible {
  color: var(--evboy-ink);
  background-color: color-mix(in oklch, var(--evboy-yellow) 34%, transparent);
  text-decoration-color: var(--evboy-aqua);
  outline: none;
}
.inline-link[target="_blank"]::after,
:where(
  .card,
  .summary-card,
  .insight-card,
  .soft-panel,
  .content-card,
  .tutorial-card,
  .price-detail-card,
  .story-copy,
  .faq-item,
  .product-card-body,
  .catalog-body,
  .route-card,
  .source-copy-grid,
  .purchase-container,
  .payment-review,
  .payment-status,
  .footer
) :where(p, li, dd, td, span) a[target="_blank"]:not(.btn):not(.campaign-card):not(.catalog-item):not(.logo-lockup)::after {
  content: "↗";
  display: inline-block;
  margin-left: .22em;
  font-size: .82em;
  line-height: 1;
  text-decoration: none;
}
.card p:not(.eyebrow):not(.price),
.summary-card p:not(.eyebrow):not(.price),
.insight-card p:not(.eyebrow):not(.price),
.soft-panel p:not(.eyebrow):not(.price),
.content-card p:not(.eyebrow):not(.price):not(.remarks),
.tutorial-card p:not(.eyebrow):not(.price),
.price-detail-card p:not(.eyebrow):not(.price),
.story-copy p:not(.eyebrow):not(.price),
.faq-item p:not(.eyebrow):not(.price),
.product-card-body p:not(.eyebrow):not(.price),
.catalog-body p:not(.eyebrow):not(.price),
.route-card p:not(.eyebrow):not(.price) {
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.topnav { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--surface) 91%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px); }
.topnav-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.logo-lockup { display: inline-flex; align-items: center; min-width: 154px; }
.logo-lockup img { width: 154px; height: auto; object-fit: contain; }
.navlinks { display: flex; align-items: center; gap: var(--space-6); color: var(--fg-2); font-size: var(--text-sm); font-weight: 760; }
.navlinks a { white-space: nowrap; }
.navlinks a:hover, .navlinks a:focus-visible { color: var(--evboy-aqua); outline: none; }
.menu-btn { display: none; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-weight: 850; transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.btn:focus-visible, .input:focus-visible, .textarea:focus-visible, .select:focus-visible, .chip:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in oklch, var(--evboy-aqua) 26%, transparent); border-color: var(--evboy-aqua); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--evboy-ink); color: var(--surface); border-color: var(--evboy-ink); box-shadow: 0 10px 24px rgba(17, 24, 39, .16); }
.btn-primary:hover { background: color-mix(in oklch, var(--evboy-ink), var(--evboy-aqua) 20%); }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--evboy-aqua); color: var(--evboy-aqua); }
.btn-full { width: 100%; }
.cart-add-form { margin: 0; }
.cart-feedback { margin-block: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-weight: 800; }
.cart-feedback.success { background: color-mix(in oklch, var(--success) 10%, var(--surface)); border-color: color-mix(in oklch, var(--success) 36%, var(--border)); }
.cart-feedback.error { background: color-mix(in oklch, var(--danger) 9%, var(--surface)); border-color: color-mix(in oklch, var(--danger) 34%, var(--border)); }
.cart-feedback a { color: color-mix(in oklch, var(--evboy-aqua), var(--evboy-ink) 32%); text-decoration: underline; text-underline-offset: 3px; }
.campaign-hero .hero-cta .btn-primary,
.purchase-route-section .btn-primary,
a.btn[href*="Purchase.html"],
button[data-select-item],
.cart-add-form .btn,
.cart-layer .btn-primary,
.payment-grid form .btn-primary {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  padding-inline: var(--space-6);
  background:
    linear-gradient(135deg, var(--evboy-yellow), color-mix(in oklch, var(--evboy-yellow) 68%, var(--evboy-aqua)));
  color: var(--evboy-ink);
  border-color: color-mix(in oklch, var(--evboy-yellow), var(--evboy-ink) 16%);
  border-width: 2px;
  box-shadow: 0 18px 38px rgba(17, 24, 39, .22), 0 0 0 1px rgba(255, 255, 255, .72) inset;
  letter-spacing: .01em;
}
.campaign-hero .hero-cta .btn-primary:hover,
.purchase-route-section .btn-primary:hover,
a.btn[href*="Purchase.html"]:hover,
button[data-select-item]:hover,
.cart-add-form .btn:hover,
.cart-layer .btn-primary:hover,
.payment-grid form .btn-primary:hover {
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--evboy-yellow), white 12%), color-mix(in oklch, var(--evboy-aqua) 46%, var(--evboy-yellow)));
  color: var(--evboy-ink);
  transform: translateY(-1px);
  box-shadow: 0 20px 42px rgba(17, 24, 39, .22), 0 0 0 1px rgba(255, 255, 255, .78) inset;
}
.campaign-hero .hero-cta .btn-primary::after,
.purchase-route-section .btn-primary::after,
a.btn[href*="Purchase.html"]::after,
button[data-select-item]::after,
.cart-add-form .btn::after,
.cart-layer .btn-primary::after,
.payment-grid form .btn-primary::after {
  content: "→";
  margin-left: var(--space-2);
  font-weight: 950;
}
.home-hero, .campaign-hero { overflow: hidden; position: relative; }
.home-hero::before, .campaign-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in oklch, var(--evboy-aqua) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--evboy-aqua) 6%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, black, transparent 58%); pointer-events: none; }
.home-hero h1 {
  font-size: 48px;
  line-height: 1.08;
}
.home-hero h1 span {
  display: block;
}
.campaign-hero h1 {
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.08;
}
.home-hero .lead,
.campaign-hero .lead {
  font-size: var(--text-base);
}
.hero-copy-list {
  max-width: 68ch;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  list-style: none;
  color: var(--fg-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.hero-copy-list li {
  position: relative;
  padding-left: 24px;
  overflow-wrap: anywhere;
}
.hero-copy-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--evboy-yellow);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--evboy-yellow) 22%, transparent);
}
.home-hero-grid, .campaign-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .92fr); gap: var(--space-12); align-items: center; }
.home-copy, .campaign-hero-copy { display: grid; gap: var(--space-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.home-visual, .home-order-flow, .hero-product { background: color-mix(in oklch, var(--surface) 92%, transparent); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display: grid; }
.home-visual, .home-order-flow { overflow: hidden; }
.home-order-flow { aspect-ratio: 3 / 2; scroll-margin-top: 84px; }
.home-hero-image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bg); }
.hero-product { padding: var(--space-6); gap: var(--space-5); }
.hero-product img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--border-soft); }
.hero-product { min-height: 430px; }
.hero-product img { min-height: 320px; padding: var(--space-5); }
.spec-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.spec-strip span, .tag, .product-tag { display: inline-flex; align-items: center; border-radius: var(--radius-pill); border: 1px solid color-mix(in oklch, var(--evboy-aqua) 30%, var(--border)); background: color-mix(in oklch, var(--evboy-aqua) 9%, var(--surface)); padding: var(--space-2) var(--space-3); color: var(--fg-2); font-size: var(--text-sm); font-weight: 850; }
.bullet-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); color: var(--fg-2); font-size: var(--text-sm); }
.bullet-list li { position: relative; display: block; padding-left: 22px; }
.bullet-list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--list-marker); }
.bullet-list li > ul,
.bullet-list li > ol {
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  color: var(--fg-2);
  font-size: 1em;
}
.bullet-list li > ul {
  list-style: none;
}
.bullet-list li > ul > li {
  padding-left: 20px;
}
.bullet-list li > ul > li::before {
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--evboy-aqua);
  transform: rotate(45deg);
}
.bullet-list li > ol {
  list-style: none;
  counter-reset: nested-steps;
}
.bullet-list li > ol > li {
  counter-increment: nested-steps;
  padding-left: 30px;
}
.bullet-list li > ol > li::before {
  content: counter(nested-steps);
  top: .16em;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-aqua) 14%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--evboy-aqua) 45%, transparent);
  color: var(--fg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
}
.protected-email {
  white-space: nowrap;
}
.section-head, .page-head { display: grid; gap: var(--space-4); max-width: 820px; }
.section-head-wide,
.section-head-wide .lead {
  max-width: none;
}
#campaigns > .container { width: min(1440px, calc(100% - var(--container-gutter-desktop) * 2)); }
#campaigns { padding-top: var(--space-8); }
#campaigns .section-head,
#campaigns .lead { max-width: none; }
.section-head-spaced { margin-top: var(--space-6); }
.campaign-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.campaign-card, .card, .summary-card, .insight-card, .faq-item, .source-item, .route-card { background: color-mix(in oklch, var(--surface) 94%, transparent); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-ring); }
.campaign-card { padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; overflow: hidden; transition: transform var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.campaign-card:hover { border-color: var(--evboy-aqua); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.campaign-card-body { padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.campaign-card .card-title { width: 100%; max-width: none; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; margin: 0; text-wrap: wrap; }
.campaign-card .bullet-list { font-size: var(--text-sm); gap: var(--space-2); }
.thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; background: transparent; border: 0; overflow: hidden; display: grid; place-items: center; padding: var(--space-3); }
.thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-md); }
.card-title { font-size: var(--text-lg); line-height: 1.25; margin: var(--space-1) 0 var(--space-2); }
.product-subnav { position: sticky; top: 72px; z-index: 30; background: color-mix(in oklch, var(--surface) 88%, transparent); border-block: 1px solid var(--border); backdrop-filter: blur(14px); }
.subnav-track { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: 8px; }
.subnav-track a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  color: var(--fg-2);
  font-weight: 820;
  font-size: var(--text-sm);
  background: var(--surface);
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.subnav-track a.subnav-back-link {
  border-radius: var(--radius-md);
  padding-inline: var(--space-3) var(--space-4);
  color: var(--evboy-ink);
  border-color: color-mix(in oklch, var(--evboy-ink) 22%, var(--border));
  background: color-mix(in oklch, var(--evboy-ink) 5%, var(--surface));
  box-shadow: inset 3px 0 0 var(--evboy-aqua);
}
.subnav-track a.subnav-back-link::before {
  content: "←";
  font-family: var(--font-mono);
  font-size: 1.08em;
  font-weight: 950;
  line-height: 1;
}
.subnav-track a.subnav-back-link:hover,
.subnav-track a.subnav-back-link:focus-visible {
  color: var(--evboy-ink);
  border-color: color-mix(in oklch, var(--evboy-aqua) 54%, var(--border));
  background: color-mix(in oklch, var(--evboy-aqua) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--evboy-aqua);
}
.product-subnav .subnav-track a[href*="/Purchase"] {
  color: var(--fg);
  border-color: color-mix(in oklch, var(--evboy-yellow), var(--evboy-ink) 16%);
  background: linear-gradient(135deg, var(--evboy-yellow), color-mix(in oklch, var(--evboy-yellow) 68%, var(--evboy-aqua)));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .72) inset;
}
.product-subnav .subnav-track a[href*="/Purchase"]::after {
  content: "→";
  font-family: var(--font-mono);
  font-weight: 950;
}
.product-subnav .subnav-track a[href*="/Purchase"]:hover {
  color: var(--fg);
  border-color: color-mix(in oklch, var(--evboy-yellow), var(--evboy-ink) 16%);
  background: linear-gradient(135deg, var(--evboy-yellow), color-mix(in oklch, var(--evboy-yellow) 68%, var(--evboy-aqua)));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .72) inset;
}
.product-subnav .subnav-track a[href*="/Purchase"]:focus-visible {
  color: var(--fg);
  border-color: color-mix(in oklch, var(--evboy-yellow), var(--evboy-ink) 16%);
  background: linear-gradient(135deg, var(--evboy-yellow), color-mix(in oklch, var(--evboy-yellow) 68%, var(--evboy-aqua)));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--evboy-aqua) 24%, transparent), 0 0 0 1px rgba(255, 255, 255, .72) inset;
  outline: none;
}
.detail-grid, .payment-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .86fr); gap: var(--space-6); align-items: start; }
.card, .summary-card { padding: var(--space-6); }
.soft-panel { background: color-mix(in oklch, var(--evboy-aqua) 8%, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-4); }
.logistics-band .detail-grid { grid-template-columns: minmax(0, 920px); }
.story-section > .section-head, .story-section > .container:first-child { margin-inline: auto; }
.story-stack { display: grid; gap: var(--space-6); }
.story-card { display: grid; grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr); gap: var(--space-6); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--elev-ring); }
.story-card.is-reverse { grid-template-columns: minmax(320px, 1.08fr) minmax(0, .92fr); }
.story-card.is-reverse .story-copy { order: 2; }
.story-copy { display: grid; gap: var(--space-4); }
.image-cluster { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 170px 170px; gap: var(--space-3); }
.image-cluster img { width: 100%; height: 100%; object-fit: contain; background: transparent; border: 0; border-radius: var(--radius-sm); }
.image-cluster img:first-child { grid-row: span 2; }
.insight-grid, .route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 920px); gap: var(--space-3); }
.insight-card { padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; }
.insight-card img { width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--radius-sm); background: transparent; border: 0; }
.content-band { background: color-mix(in oklch, var(--surface) 80%, var(--bg)); }
.content-grid,
.tutorial-grid,
.price-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.content-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campaign-info-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
}
.campaign-info-grid .content-card {
  height: 100%;
}
.remarks {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.48;
}
.content-card > p.remarks {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.48;
}
.remarks::before {
  content: "※ ";
  color: color-mix(in oklch, var(--evboy-aqua), var(--muted) 45%);
  font-weight: 900;
}
.content-grid.compact.charging-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.charging-problem-grid .content-card {
  height: 100%;
}
.content-card,
.tutorial-card,
.price-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-ring);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.content-card .source-images,
.tutorial-card .source-images,
.price-detail-card .source-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.content-card .source-images:has(> img:only-child),
.tutorial-card .source-images:has(> img:only-child),
.price-detail-card .source-images:has(> img:only-child),
.faq-item .source-images:has(> img:only-child) {
  grid-template-columns: 1fr;
}
.content-card img,
.tutorial-card img,
.price-detail-card img,
.video-card img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}
.solution-callout,
.price-note-card,
.safety-callout,
.cert-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-6);
}
.solution-callout {
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  border-color: color-mix(in oklch, var(--evboy-aqua) 34%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--evboy-aqua) 10%, var(--surface)), var(--surface) 52%),
    var(--surface);
}
.solution-callout h3,
.price-note-card h3,
.safety-callout h3 {
  font-size: var(--text-xl);
  line-height: 1.22;
}
.faq-with-media {
  display: grid;
  grid-template-columns: minmax(220px, .36fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.faq-media-card {
  position: sticky;
  top: 148px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--elev-ring);
}
.faq-media-card img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--bg);
}
.tutorial-section {
  background: color-mix(in oklch, var(--evboy-aqua) 5%, var(--surface));
}
#gbt-tutorial.tutorial-section {
  background: var(--surface);
}
.step-kicker {
  color: var(--evboy-aqua);
  font-weight: 900;
}
.video-card {
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--surface);
}
.homecharger-hero .campaign-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
  align-items: center;
}
.homecharger-video-card {
  width: 100%;
  max-width: 560px;
  justify-self: end;
  padding: var(--space-4);
  min-height: 0;
}
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--fg);
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.media-feature-grid { align-items: stretch; }
.carplay-fit-layout {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.carplay-fit-panels {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
}
.carplay-fit-panel {
  padding: var(--space-5);
  gap: var(--space-3);
}
.carplay-fit-panel h3 {
  font-size: var(--text-lg);
  line-height: 1.22;
}
.fit-intro,
.fit-test,
.fit-warning {
  grid-column: span 4;
}
.fit-models {
  grid-column: 1 / -1;
}
.fit-models .bullet-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-2);
}
.fit-models p {
  max-width: none;
}
.carplay-hero .campaign-hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .78fr);
  gap: clamp(var(--space-6), 5vw, var(--space-12));
}
.carplay-hero .campaign-hero-copy {
  min-width: 0;
  max-width: 720px;
}
.carplay-hero h1 {
  overflow-wrap: break-word;
}
.carplay-hero .title-line {
  display: block;
}
.carplay-hero .title-line + .title-line {
  margin-top: var(--space-2);
}
.carplay-hero .hero-product {
  justify-self: end;
  width: min(100%, 430px);
  min-height: 0;
  align-content: center;
}
.carplay-hero .hero-product img {
  min-height: 0;
  height: auto;
  max-height: 300px;
  padding: 0;
}
.carplay-image-stack {
  padding: var(--space-4);
}
.carplay-image-stack .source-images {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.carplay-image-stack img {
  max-height: 280px;
}
.product-card-grid, .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.product-card-grid-duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-card-grid-single {
  grid-template-columns: minmax(0, 720px);
}
.product-card, .catalog-item { height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--elev-ring); display: grid; grid-template-rows: auto 1fr; align-content: stretch; }
.product-media, .catalog-image { aspect-ratio: 1.25 / 1; background: var(--bg); overflow: hidden; }
.product-media img, .catalog-image img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); }
.product-card-body, .catalog-body { min-height: 100%; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
.product-card-body .bullet-list,
.catalog-body .bullet-list { margin-bottom: var(--space-2); }
.product-card-body > .btn:last-child,
.catalog-body > .btn:last-child,
.catalog-body > .cart-add-form:last-child { margin-top: auto; }
.catalog-cart-form {
  display: grid;
  gap: var(--space-3);
}
.catalog-option-select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  padding: var(--space-2) var(--space-3);
  font-weight: 750;
}
.package-feature-list {
  gap: var(--space-1);
  font-size: var(--text-xs);
}
.package-tabs {
  display: grid;
  gap: var(--space-5);
}
.package-tabs .tab-header ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.package-tabs .tab-header a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg);
  padding: var(--space-2) var(--space-4);
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--elev-ring);
}
.package-tabs .tab-header .active-tab a {
  border-color: color-mix(in oklch, var(--evboy-ink) 80%, var(--evboy-aqua));
  background: var(--evboy-ink);
  color: var(--surface);
}
.package-tabs .tab-content,
.package-tabs .tab {
  min-width: 0;
}
.package-tabs .tab:not(.active) {
  display: none;
}
.homecharger-product-grid .product-card {
  grid-template-rows: 260px 1fr;
}
.homecharger-product-grid .product-media {
  aspect-ratio: auto;
  display: grid;
  place-items: center;
}
.homecharger-product-grid .product-media img {
  max-height: 230px;
}
.homecharger-product-grid .product-card-body {
  display: grid;
  grid-template-rows: auto minmax(56px, auto) auto minmax(0, 1fr) auto;
}
.homecharger-product-grid .bullet-list {
  align-content: start;
}
.install-service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.install-service-card {
  grid-template-rows: 1fr;
}
.install-service-card .product-card-body {
  min-height: 100%;
}
.install-service-card h3 {
  font-size: 22px;
  white-space: nowrap;
}
.charging-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.charging-price-grid .product-card {
  align-content: stretch;
  grid-template-rows: 238px 1fr;
  min-height: 100%;
}
.charging-price-grid .product-media {
  aspect-ratio: auto;
  min-height: 238px;
  display: grid;
  place-items: center;
}
.charging-price-grid .product-media img {
  max-height: 218px;
}
.charging-price-grid .product-card-body {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  row-gap: var(--space-2);
  min-height: 100%;
}
.charging-price-grid .product-card-body h3 {
  align-self: start;
}
.charging-price-grid .price {
  margin-block: var(--space-1) var(--space-2);
}
.charging-price-grid .price-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  color: var(--fg);
  white-space: normal;
}
.charging-price-grid .price-option {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in oklch, var(--danger) 26%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--danger) 5%, var(--surface));
  padding: 7px 9px;
}
.charging-price-grid .price-length {
  color: var(--fg-2);
  font-size: var(--text-xs);
  font-weight: 850;
  line-height: 1;
}
.charging-price-grid .price-value {
  color: var(--danger);
  font-size: var(--text-xl);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}
.charging-price-grid .product-card-body .bullet-list {
  align-content: start;
}
.charging-price-grid .product-card-body > .btn:last-child {
  align-self: end;
  margin-top: 0;
}
.price { color: var(--danger); font-size: var(--text-2xl); font-weight: 900; line-height: 1; white-space: nowrap; }
.price-suffix { display: inline-flex; font-size: .56em; line-height: 1; font-weight: 850; margin-inline-start: .12em; vertical-align: baseline; }
.price-table-section {
  background: color-mix(in oklch, var(--surface) 86%, var(--evboy-aqua) 4%);
  border-block: 1px solid var(--border);
}
.price-note-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  box-shadow: var(--elev-ring);
}
.price-note-card p { color: var(--fg-2); max-width: 62ch; }
.safety-callout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: var(--space-6);
  align-items: center;
  overflow: hidden;
  padding: var(--space-6);
  border: 1px solid color-mix(in oklch, var(--warn) 52%, var(--border));
  border-radius: var(--radius-lg);
  border-color: color-mix(in oklch, var(--warn) 52%, var(--border));
  background:
    radial-gradient(circle at top left, color-mix(in oklch, var(--warn) 26%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in oklch, var(--warn) 12%, var(--surface)) 0%, var(--surface) 58%),
    var(--surface);
  box-shadow: 0 28px 80px rgba(217, 119, 6, .18), var(--elev-ring);
}
.safety-callout::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 8px;
  background: linear-gradient(180deg, var(--warn), var(--evboy-yellow));
}
.safety-callout::after {
  content: "!";
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--warn);
  color: var(--surface);
  font-family: var(--font-mono);
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(217, 119, 6, .24);
}
.safety-callout > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-3);
}
.safety-callout p { color: var(--fg-2); font-size: var(--text-sm); line-height: var(--leading-body); max-width: none; }
.safety-callout p + p { margin-top: var(--space-3); }
.safety-callout .eyebrow { color: color-mix(in oklch, var(--warn), var(--evboy-ink) 24%); }
.safety-callout h3 { color: var(--evboy-ink); max-width: none; font-size: var(--text-xl); }
.safety-callout strong {
  color: var(--evboy-ink);
  background: linear-gradient(transparent 58%, color-mix(in oklch, var(--evboy-yellow) 58%, transparent) 0);
}
.safety-callout img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
}
.cert-section { background: var(--surface); }
.cert-panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(280px, 1fr);
  gap: var(--space-6);
  align-items: center;
  box-shadow: var(--elev-ring);
}
.cert-panel img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-ring);
}
.comparison-table th,
.comparison-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.comparison-table th {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bg);
}
.comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table strong { color: var(--evboy-aqua); }
#gbt-sales .comparison-table th {
  text-transform: none;
}
.price-table-section .section-head,
.catalog-band .section-head {
  max-width: none;
}
.price-table-section .section-head .lead,
.catalog-band .section-head .lead {
  max-width: none;
}
.purchase-route-section {
  background: color-mix(in oklch, var(--surface) 94%, var(--evboy-aqua) 3%);
  color: var(--fg);
  border-block: 1px solid var(--border);
}
.purchase-route-section .lead,
.purchase-route-section .bullet-list {
  color: var(--fg-2);
}
.purchase-route-section .card,
.purchase-route-section .soft-panel {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--elev-ring);
}
.purchase-route-single {
  max-width: 820px;
}
.purchase-page-header {
  padding-block: var(--space-8);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.purchase-page-header .container {
  display: grid;
  gap: var(--space-3);
}
.purchase-page-header h1 {
  font-size: clamp(30px, 4vw, var(--text-2xl));
}
.purchase-page-header .hero-cta {
  margin-top: var(--space-2);
}
.dark-band { background: var(--evboy-ink); color: var(--surface); }
.dark-band .lead, .dark-band > .container > .stack > .section-head + .catalog-grid .bullet-list { color: color-mix(in oklch, var(--surface) 76%, transparent); }
.dark-band .catalog-item,
.dark-band .content-card,
.dark-band .tutorial-card,
.dark-band .price-detail-card { color: var(--fg); }
.dark-band .content-card .bullet-list,
.dark-band .tutorial-card .bullet-list,
.dark-band .price-detail-card .bullet-list { color: var(--fg-2); }
.haloblk-hero { background: radial-gradient(circle at 78% 18%, color-mix(in oklch, var(--evboy-aqua) 30%, transparent), transparent 24rem), linear-gradient(135deg, color-mix(in oklch, var(--evboy-ink) 92%, var(--evboy-aqua)), color-mix(in oklch, var(--evboy-ink) 82%, var(--evboy-aqua)) 58%, var(--evboy-ink)); color: var(--surface); }
.haloblk-hero .lead, .haloblk-hero .bullet-list { color: color-mix(in oklch, var(--surface) 78%, transparent); }
.haloblk-hero .hero-product {
  background: color-mix(in oklch, var(--surface) 8%, transparent);
  border-color: color-mix(in oklch, var(--surface) 18%, transparent);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .24);
}
.haloblk-hero .hero-product img {
  background: color-mix(in oklch, var(--surface) 96%, var(--evboy-aqua) 4%);
}
#haloblk-price {
  background: linear-gradient(180deg, color-mix(in oklch, var(--evboy-aqua) 7%, var(--surface)), color-mix(in oklch, var(--evboy-aqua) 4%, var(--bg)));
  border-block: 1px solid color-mix(in oklch, var(--evboy-aqua) 22%, var(--border));
}
#section-haloblk-halodisc {
  background: linear-gradient(180deg, var(--surface), color-mix(in oklch, var(--surface-warm) 62%, var(--surface)));
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 14%, var(--border));
}
.halodisc-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
  gap: var(--space-5);
  align-items: stretch;
}
.halodisc-overview-card,
.halodisc-fitment-card {
  height: 100%;
}
.halodisc-demo-images {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.halodisc-demo-images img {
  aspect-ratio: 4 / 3;
  max-height: none;
  background: color-mix(in oklch, var(--evboy-aqua) 4%, var(--surface));
}
.halodisc-fitment-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
}
.halodisc-rail-shell {
  display: grid;
  gap: var(--space-4);
}
.halodisc-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.halodisc-rail-count {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid color-mix(in oklch, var(--evboy-aqua) 34%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-aqua) 10%, var(--surface));
  color: var(--fg);
  padding-inline: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 900;
}
.halodisc-rail-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--surface) 94%, var(--evboy-aqua) 4%);
  padding: var(--space-2);
  box-shadow: var(--elev-ring);
}
.halodisc-rail-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in oklch, var(--evboy-ink) 84%, var(--evboy-aqua));
  border-radius: var(--radius-pill);
  background: var(--evboy-ink);
  color: var(--surface);
  font-size: var(--text-lg);
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}
.halodisc-rail-button:hover,
.halodisc-rail-button:focus-visible {
  background: color-mix(in oklch, var(--evboy-ink) 86%, var(--evboy-aqua));
}
.halodisc-rail-button:disabled {
  cursor: default;
  opacity: .42;
}
.halodisc-rail-progress {
  position: relative;
  display: block;
  width: min(160px, 18vw);
  height: 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-ink) 12%, var(--surface));
  overflow: hidden;
}
.halodisc-rail-progress > span {
  display: block;
  width: 16%;
  min-width: 18px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--evboy-yellow), var(--evboy-aqua));
  transition: width .18s ease;
}
.halodisc-rail-frame {
  position: relative;
  min-width: 0;
}
.halodisc-rail-frame::before,
.halodisc-rail-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 18px;
  z-index: 3;
  width: clamp(34px, 8vw, 90px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.halodisc-rail-frame::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface), transparent);
}
.halodisc-rail-frame::after {
  right: 0;
  background: linear-gradient(270deg, var(--surface), transparent);
}
.halodisc-rail-shell.is-scrollable:not(.is-at-start) .halodisc-rail-frame::before,
.halodisc-rail-shell.is-scrollable:not(.is-at-end) .halodisc-rail-frame::after {
  opacity: 1;
}
.halodisc-product-rail.catalog-grid {
  display: flex;
  grid-template-columns: none;
  gap: var(--space-5);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 clamp(44px, 6vw, 80px) var(--space-4) 0;
  scroll-padding-inline: var(--space-2);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: color-mix(in oklch, var(--evboy-ink) 58%, var(--evboy-aqua)) color-mix(in oklch, var(--evboy-aqua) 12%, var(--surface));
  scrollbar-width: auto;
}
.halodisc-product-rail.catalog-grid::-webkit-scrollbar {
  height: 14px;
}
.halodisc-product-rail.catalog-grid::-webkit-scrollbar-track {
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-aqua) 12%, var(--surface));
}
.halodisc-product-rail.catalog-grid::-webkit-scrollbar-thumb {
  border: 3px solid color-mix(in oklch, var(--evboy-aqua) 12%, var(--surface));
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-ink) 62%, var(--evboy-aqua));
}
.halodisc-product-rail .catalog-item {
  flex: 0 0 clamp(300px, 32vw, 380px);
  scroll-snap-align: start;
}
#section-haloblk-accessories {
  background: color-mix(in oklch, var(--evboy-yellow) 8%, var(--surface));
  border-bottom: 1px solid color-mix(in oklch, var(--evboy-yellow) 34%, var(--border));
}
#haloblk-order-notes {
  background: linear-gradient(180deg, color-mix(in oklch, var(--evboy-ink) 5%, var(--bg)), var(--surface));
  border-top: 1px solid color-mix(in oklch, var(--evboy-ink) 12%, var(--border));
}
.v2l-hero .hero-product {
  align-content: center;
}
.v2l-hero .hero-product .v2l-hero-image {
  width: min(100%, 420px);
  height: auto;
  min-height: 0;
  justify-self: center;
  object-fit: contain;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .26));
}
.v2l-hero .video-embed {
  border-color: color-mix(in oklch, var(--surface) 22%, transparent);
}
.v2l-video-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: var(--space-6);
  align-items: center;
}
.v2l-video-copy {
  display: grid;
  gap: var(--space-4);
}
.v2l-video-copy h2 {
  max-width: 100%;
}
.v2l-video-player {
  width: min(100%, 420px);
  justify-self: end;
}
.v2l-video-player lite-youtube {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-ring);
}
.faq-item { padding: 0; overflow: hidden; }
.faq-item summary { cursor: pointer; font-weight: 900; font-size: var(--text-lg); padding: var(--space-5); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--evboy-aqua); font-family: var(--font-mono); font-weight: 900; }
.faq-item[open] summary::after { content: "−"; }
.faq-item > div { margin-top: var(--space-4); display: grid; gap: var(--space-4); }
.faq-item[open] > div { margin: 0; padding: 0 var(--space-5) var(--space-5); }
.faq-item img { width: 100%; max-height: 260px; object-fit: contain; background: transparent; border-radius: var(--radius-sm); border: 0; }
.order-section { background: linear-gradient(180deg, var(--bg), var(--surface)); border-block: 1px solid var(--border); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { color: var(--fg-2); font-weight: 850; font-size: var(--text-sm); }
.input, .textarea, .select { width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); padding: var(--space-3) var(--space-4); }
.textarea { min-height: 112px; resize: vertical; }
.field-full { grid-column: 1 / -1; }
.is-conditional { display: none; }
.is-conditional.is-active { display: grid; }
.error-text { color: var(--danger); font-size: var(--text-sm); min-height: 1.2em; }
.summary-card { display: grid; gap: var(--space-4); position: sticky; top: 104px; }
.summary-line { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); border-bottom: 1px solid var(--border-soft); }
.summary-line strong { text-align: right; }
.total { color: var(--danger); font-weight: 900; }
.notice { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--surface); display: grid; gap: var(--space-2); }
.notice-warn { background: color-mix(in oklch, var(--evboy-yellow) 18%, var(--surface)); border-color: color-mix(in oklch, var(--evboy-yellow) 48%, var(--border)); }
.page-flash {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 84px);
  right: var(--space-6);
  z-index: 120;
  width: min(520px, calc(100vw - var(--space-6) * 2));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.page-flash.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.page-flash-panel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 40px;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  border: 2px solid color-mix(in oklch, var(--danger) 76%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--danger) 10%, var(--surface));
  box-shadow: 0 26px 80px rgba(239, 68, 68, .24), 0 18px 58px rgba(17, 24, 39, .16);
}
.page-flash-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1;
}
.page-flash-body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.page-flash-title {
  color: var(--fg);
  font-size: var(--text-lg);
  font-weight: 900;
}
.page-flash-message {
  margin: 0;
  color: var(--fg);
  line-height: var(--leading-body);
}
.page-flash-close {
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
}
.page-flash-close:hover {
  border-color: var(--border);
  background: color-mix(in oklch, var(--danger) 8%, var(--surface));
}
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block: calc(var(--space-2) * -1) var(--space-1);
}
.vehicle-filter-pills {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.vehicle-filter-pill {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  font: inherit;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: var(--elev-ring);
  cursor: pointer;
}
.vehicle-filter-pill:hover,
.vehicle-filter-pill:focus-visible {
  border-color: color-mix(in oklch, var(--evboy-ink) 54%, var(--evboy-aqua));
}
.vehicle-filter-pill.is-active {
  border-color: color-mix(in oklch, var(--evboy-ink) 80%, var(--evboy-aqua));
  background: var(--evboy-ink);
  color: var(--surface);
}
.catalog-item.is-hidden {
  display: none;
}
.product-slideshow {
  position: relative;
}
.slideshow-controls {
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  pointer-events: none;
}
.slideshow-controls button,
.slideshow-count {
  pointer-events: auto;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  color: var(--fg);
  font-weight: 900;
  box-shadow: var(--elev-ring);
}
.slideshow-controls button {
  min-width: 40px;
  font-size: var(--text-xl);
  line-height: 1;
}
.slideshow-count {
  display: inline-grid;
  min-width: 54px;
  padding-inline: var(--space-3);
  place-items: center;
  font-size: var(--text-xs);
}
.cart-preview {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: var(--space-4);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--evboy-aqua) 8%, var(--surface));
  padding: var(--space-4);
}
.cart-preview img {
  width: 148px;
  aspect-ratio: 1 / .78;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.cart-preview-body {
  display: grid;
  gap: var(--space-2);
}
.cart-picker { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-4); align-items: end; }
.cart-picker .field-full { grid-column: 1 / -1; }
.cart-list { display: grid; gap: var(--space-3); }
.cart-line { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); }
.cart-line button { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.cart-layer {
  position: fixed;
  z-index: 60;
  top: 92px;
  right: var(--space-6);
  transform: translateY(-8px);
  width: min(380px, calc(100% - var(--container-gutter-phone) * 2));
  display: grid;
  grid-template-rows: auto auto minmax(0, auto) auto;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid color-mix(in oklch, var(--surface) 24%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--evboy-ink) 94%, transparent);
  color: var(--surface);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .28);
  max-height: min(520px, calc(100dvh - 120px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), visibility 0s linear var(--motion-base);
}
.cart-layer.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.cart-layer.is-active button,
.cart-layer.is-active a {
  pointer-events: auto;
}
.cart-layer-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
}
.cart-layer-close {
  border: 1px solid color-mix(in oklch, var(--surface) 22%, transparent);
  background: color-mix(in oklch, var(--surface) 10%, transparent);
  color: var(--surface);
  border-radius: var(--radius-sm);
  min-width: 48px;
  min-height: 30px;
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 850;
  line-height: 1;
}
.cart-layer-close:hover {
  border-color: color-mix(in oklch, var(--surface) 52%, transparent);
  background: color-mix(in oklch, var(--surface) 16%, transparent);
}
.cart-layer span {
  color: color-mix(in oklch, var(--surface) 72%, transparent);
}
.cart-layer-message {
  border: 1px solid color-mix(in oklch, var(--success) 48%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in oklch, var(--success) 16%, transparent);
  color: var(--surface);
  font-size: var(--text-sm);
  font-weight: 850;
}
.cart-layer-message.is-error {
  border-color: color-mix(in oklch, var(--danger) 48%, transparent);
  background: color-mix(in oklch, var(--danger) 18%, transparent);
}
.cart-layer-list {
  display: grid;
  gap: var(--space-2);
  max-height: 260px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: var(--space-1);
}
.cart-layer-empty {
  color: color-mix(in oklch, var(--surface) 66%, transparent);
  font-size: var(--text-sm);
}
.cart-layer-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid color-mix(in oklch, var(--surface) 16%, transparent);
  align-items: center;
}
.cart-layer-line span {
  color: var(--surface);
  font-size: var(--text-sm);
}
.cart-layer-line button {
  grid-column: 2;
  border: 1px solid color-mix(in oklch, var(--danger) 48%, transparent);
  background: color-mix(in oklch, var(--danger) 18%, transparent);
  color: color-mix(in oklch, var(--surface) 94%, transparent);
  border-radius: var(--radius-sm);
  min-height: 30px;
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 850;
}
.cart-layer-line button:hover {
  border-color: color-mix(in oklch, var(--danger) 70%, transparent);
  background: color-mix(in oklch, var(--danger) 28%, transparent);
}
.cart-layer .btn.is-disabled {
  opacity: .56;
  cursor: not-allowed;
}
.cart-layer-toggle {
  position: fixed;
  z-index: 55;
  right: var(--space-6);
  bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in oklch, var(--surface) 24%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-ink) 94%, transparent);
  color: var(--surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}
.cart-layer-toggle[hidden] {
  display: none;
}
.cart-layer-toggle strong,
.cart-layer-toggle .mono {
  color: var(--surface);
}
#haloblk-cart { display: none; }
.catalog-item { position: relative; }
.catalog-vehicle-tags {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: calc(100% - var(--space-6));
}
.catalog-vehicle-tag {
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-ink) 88%, transparent);
  color: var(--surface);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1.25;
}
.highlight-text {
  color: var(--fg);
  font-weight: 950;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklch, var(--evboy-yellow) 56%, transparent);
  text-decoration-thickness: .55em;
  text-underline-offset: -.36em;
  text-decoration-skip-ink: none;
}
.source-emphasis {
  display: inline;
  color: var(--fg);
  font-weight: 950;
  border-radius: 5px;
  padding: 0 .12em;
  box-shadow: inset 0 -.45em 0 color-mix(in oklch, var(--evboy-yellow) 46%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.source-callout {
  display: inline;
  color: var(--fg);
  font-weight: 950;
  border-radius: 5px;
  padding: 0 .12em;
  box-shadow: inset 0 -.45em 0 color-mix(in oklch, var(--evboy-yellow) 46%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.support-phone-box {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) auto 0;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in oklch, var(--evboy-aqua) 34%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-aqua) 7%, var(--surface));
}
.support-phone-box span {
  color: var(--fg-2);
  font-size: var(--text-xs);
  font-weight: 850;
}
.support-phone-box a {
  color: color-mix(in oklch, var(--evboy-aqua) 72%, var(--fg));
  font-family: var(--font-mono);
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.bullet-list li.source-note-item {
  display: block;
}
.bullet-list li.source-note-item::before {
  display: block;
}
.gbt-hero {
  padding-block: clamp(48px, 7vw, 84px);
  background:
    radial-gradient(circle at 78% 18%, color-mix(in oklch, var(--evboy-aqua) 32%, transparent), transparent 25rem),
    linear-gradient(135deg, color-mix(in oklch, var(--evboy-ink) 92%, var(--evboy-aqua)), color-mix(in oklch, var(--evboy-ink) 86%, black) 62%, var(--evboy-ink));
  color: var(--surface);
}
.gbt-hero .campaign-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 430px);
  gap: var(--space-8);
  align-items: center;
}
.gbt-hero h1 {
  overflow-wrap: normal;
}
.gbt-hero .campaign-hero-copy {
  max-width: 760px;
}
.gbt-hero .lead,
.gbt-hero .bullet-list {
  max-width: 680px;
  color: color-mix(in oklch, var(--surface) 82%, transparent);
}
.gbt-hero .bullet-list li::before {
  background: color-mix(in oklch, var(--list-marker) 78%, var(--surface));
}
.gbt-hero .btn-secondary {
  background: color-mix(in oklch, var(--surface) 10%, transparent);
  border-color: color-mix(in oklch, var(--surface) 24%, transparent);
  color: var(--surface);
}
.gbt-hero .hero-product {
  min-height: 0;
  align-content: center;
  justify-self: end;
  width: 100%;
  max-width: 430px;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in oklch, var(--evboy-aqua) 18%, transparent), transparent 16rem),
    color-mix(in oklch, var(--evboy-ink) 88%, var(--surface));
  border-color: color-mix(in oklch, var(--evboy-aqua) 25%, transparent);
}
.gbt-hero .hero-product img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 330px;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}
.gbt-hero .spec-strip span {
  background: color-mix(in oklch, var(--surface) 10%, transparent);
  border-color: color-mix(in oklch, var(--surface) 22%, transparent);
  color: var(--surface);
}
.question-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.question-card {
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--evboy-aqua) 28%, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--elev-ring);
  display: grid;
  gap: var(--space-3);
}
.document-card img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  background: var(--surface);
}
.document-card .source-images {
  grid-template-columns: 1fr;
}
.warning-section {
  background: color-mix(in oklch, var(--evboy-yellow) 7%, var(--surface));
  border-block: 1px solid color-mix(in oklch, var(--evboy-yellow) 34%, var(--border));
}
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--evboy-ink);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
lite-youtube {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--evboy-ink);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.video-frame > lite-youtube,
.video-embed > lite-youtube {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}
.modal-layer[hidden] { display: none; }
.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: rgba(17, 24, 39, .48);
}
.modal-panel {
  width: min(760px, 100%);
  max-height: min(720px, 86vh);
  overflow: auto;
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--elev-raised);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: start;
}
.modal-close {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  width: 40px;
  height: 40px;
  font-weight: 900;
}
.source-library { background: color-mix(in oklch, var(--bg) 72%, var(--surface)); }
.source-details { display: grid; gap: var(--space-3); }
.source-item { padding: 0; overflow: hidden; }
.source-item summary { cursor: pointer; padding: var(--space-4); display: flex; gap: var(--space-3); align-items: center; font-weight: 850; }
.source-item summary span { font-family: var(--font-mono); color: var(--evboy-aqua); }
.source-item > div { padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-4); }
.source-images { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.source-images img { width: 100%; aspect-ratio: 1 / .75; object-fit: contain; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.content-card .source-images img,
.tutorial-card .source-images img,
.price-detail-card .source-images img,
.faq-item .source-images img,
.source-item .source-images img {
  aspect-ratio: auto;
  max-height: 360px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}
.document-card .source-images img {
  max-height: 620px;
}
.source-copy-grid { columns: 2 320px; column-gap: var(--space-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--elev-ring); }
.source-copy-grid p { break-inside: avoid; margin: 0 0 var(--space-3); color: var(--fg-2); font-size: var(--text-sm); line-height: 1.65; }
.step-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding: 0; margin: 0; counter-reset: steps; list-style: none; }
.step-list li { counter-increment: steps; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); font-weight: 850; }
.step-list li::before { content: counter(steps); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: var(--space-2); border-radius: var(--radius-pill); background: var(--evboy-yellow); color: var(--fg); }
.purchase-flow-card {
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  padding: clamp(var(--space-5), 3.5vw, 56px);
  gap: var(--space-5);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--evboy-aqua) 16%, var(--surface)), var(--surface) 62%),
    var(--surface);
}
.purchase-flow-card .eyebrow {
  display: none;
}
.purchase-flow-card h2 {
  max-width: none;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
}
.purchase-flow-card .step-list {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.purchase-flow-card .step-list li {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--surface) 88%, var(--evboy-aqua) 8%);
  box-shadow: 0 10px 24px rgba(17, 24, 39, .06);
  font-size: var(--text-base);
  line-height: 1.25;
  text-wrap: balance;
}
.purchase-flow-card .step-list li::before {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0;
  font-size: var(--text-sm);
}
.purchase-flow-card .step-list li:not(:last-child)::after {
  content: none;
}
.route-card { padding: var(--space-5); display: grid; gap: var(--space-2); }
.route-card-centered { max-width: 780px; margin-inline: auto; }
.route-card span, .route-card em { color: var(--muted); font-size: var(--text-sm); font-style: normal; }
.route-card strong { font-size: var(--text-xl); }
.review-grid { display: grid; gap: var(--space-3); }
.review-grid div, .order-review-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3); border-bottom: 1px solid var(--border-soft); padding-block: var(--space-3); }
.review-grid span { color: var(--muted); }
.payment-option { width: 100%; border: 2px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--surface); text-align: center; display: grid; gap: var(--space-1); }
.payment-option[aria-pressed="true"] { border-color: var(--evboy-aqua); background: color-mix(in oklch, var(--evboy-aqua) 10%, var(--surface)); }
.success-wrap { text-align: center; max-width: 760px; margin-inline: auto; display: grid; gap: var(--space-5); }
.success-mark { width: 148px; height: 148px; border-radius: var(--radius-pill); border: 10px solid var(--evboy-aqua); display: grid; place-items: center; margin: 0 auto var(--space-4); color: var(--evboy-yellow); font-size: var(--text-4xl); font-weight: 900; }
.success-order { display: inline-grid; gap: var(--space-3); justify-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--surface); }
.footer { border-top: 1px solid var(--border); padding: var(--space-8) 0; color: var(--muted); font-size: var(--text-sm); background: var(--surface); }
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}
.footer-inner > span:first-child {
  justify-self: start;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.footer-inner > .mono {
  justify-self: end;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: var(--space-2);
}
.footer-social a:not(.btn) {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  color: var(--fg-2);
  background: var(--surface);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  overflow: visible;
}
.footer-social a[aria-label="Instagram"] svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.footer-social-dot {
  fill: currentColor;
  stroke: none;
}
.footer-social-play {
  fill: var(--surface);
}
.footer-social a:not(.btn):hover,
.footer-social a:not(.btn):focus-visible {
  color: var(--evboy-aqua);
  border-color: color-mix(in oklch, var(--evboy-aqua) 46%, var(--border));
  background: color-mix(in oklch, var(--evboy-aqua) 8%, var(--surface));
  text-decoration: none;
  transform: translateY(-1px);
  outline: none;
}
@media (max-width: 1100px) {
  .container { width: min(100% - var(--container-gutter-tablet) * 2, var(--container-max)); }
  #campaigns > .container { width: min(100% - var(--container-gutter-tablet) * 2, 1440px); }
  #how-to-buy {
    padding-block: 0;
  }
  .section { padding-block: var(--section-y-tablet); }
  .home-hero-grid, .campaign-hero-grid, .gbt-hero .campaign-hero-grid, .homecharger-hero .campaign-hero-grid, .carplay-hero .campaign-hero-grid, .detail-grid, .payment-grid, .story-card, .story-card.is-reverse, .faq-with-media, .cert-panel, .solution-callout, .safety-callout, .halodisc-detail-grid, .v2l-video-feature { grid-template-columns: 1fr; }
  .home-hero .hero-cta,
  .home-hero .home-visual { display: none; }
  .home-order-flow {
    width: 100%;
    margin-inline: 0;
    aspect-ratio: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .home-order-flow .purchase-flow-card {
    min-height: 0;
    align-content: start;
    padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-8));
    gap: var(--space-3);
  }
  .home-order-flow .purchase-flow-card h2 {
    font-size: 22px;
  }
  .home-order-flow .purchase-flow-card .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .home-order-flow .purchase-flow-card .step-list li {
    padding: var(--space-3);
    font-size: var(--text-sm);
  }
  .home-order-flow .purchase-flow-card .step-list li::before {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
  .v2l-video-player { justify-self: start; }
  .campaign-hero-grid { gap: var(--space-8); }
  .campaign-hero-copy { gap: var(--space-5); }
  .home-hero h1 { font-size: 42px; }
  .campaign-hero h1 { font-size: clamp(32px, 5.4vw, 46px); }
  .campaign-hero .hero-product { display: none; }
  .fit-intro, .fit-test, .fit-warning { grid-column: span 6; }
  .fit-models .bullet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-media-card { position: static; }
  .story-card.is-reverse .story-copy { order: 0; }
  .campaign-grid, .product-card-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-toolbar { grid-template-columns: 1fr 1fr; }
  .summary-card { position: static; }
}
@media (max-width: 900px) {
  .purchase-flow-card {
    grid-template-columns: 1fr;
  }
  .purchase-flow-card .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .purchase-flow-card .step-list li {
    min-height: 0;
  }
  .purchase-flow-card .step-list li:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
}
@media (max-width: 640px) {
  .purchase-flow-card {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer-inner > span:first-child,
  .footer-inner > .mono,
  .footer-social {
    justify-self: center;
  }
}
@media (max-width: 760px) {
  .container { width: min(100% - var(--container-gutter-phone) * 2, var(--container-max)); }
  #campaigns > .container { width: min(100% - var(--container-gutter-phone) * 2, 1440px); }
  .page-heading h1 {
    font-size: var(--text-lg);
  }
  #how-to-buy {
    padding-block: 0;
  }
  .section { padding-block: var(--section-y-phone); }
  .topnav-inner { min-height: 64px; gap: var(--space-3); }
  .logo-lockup { min-width: 132px; }
  .logo-lockup img { width: 132px; }
  .navlinks { gap: var(--space-3); font-size: 13px; margin-left: auto; }
  .menu-btn { display: none; }
  .campaign-grid, .product-card-grid, .catalog-grid, .insight-grid, .faq-grid, .form-grid, .route-grid, .cart-picker, .catalog-toolbar, .cart-preview, .content-grid, .tutorial-grid, .price-detail-grid, .content-grid.compact, .content-grid.compact.charging-problem-grid, .question-grid { grid-template-columns: 1fr; }
  .campaign-card { grid-template-columns: 1fr; padding: 0; }
  .campaign-card-body { padding: var(--space-5); }
  .campaign-card .thumb { width: 100%; aspect-ratio: 16 / 10; }
  h1 { font-size: clamp(28px, 9vw, 36px); }
  .home-hero h1 { font-size: 34px; line-height: 1.12; }
  .hero-copy-list { font-size: var(--text-sm); }
  .home-order-flow .purchase-flow-card { padding: 10px clamp(var(--space-4), 4vw, var(--space-6)); gap: var(--space-2); }
  .home-order-flow .purchase-flow-card h2 { font-size: 18px; line-height: 1.12; }
  .home-order-flow .purchase-flow-card .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .home-order-flow .purchase-flow-card .step-list li {
    min-height: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px;
    font-size: 13px;
    line-height: 1.2;
  }
  .home-order-flow .purchase-flow-card .step-list li::before {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
  }
  .home-order-flow .purchase-flow-card .step-list li:nth-child(3) {
    grid-column: auto;
  }
  .home-order-flow .purchase-flow-card .step-list li:not(:last-child)::after {
    content: none;
  }
  .campaign-hero { padding-block: var(--space-8); }
  .campaign-hero h1 { font-size: clamp(30px, 8.5vw, 38px); line-height: 1.12; }
  .campaign-hero .lead { font-size: var(--text-sm); }
  .campaign-hero-copy { gap: var(--space-4); }
  .campaign-hero .hero-product { padding: var(--space-4); gap: var(--space-3); }
  .campaign-hero .hero-product img { max-height: 260px; }
  .campaign-hero .hero-cta .btn { width: 100%; }
  .image-cluster { grid-template-columns: 1fr; grid-template-rows: repeat(3, 170px); }
  .image-cluster img:first-child { grid-row: auto; }
  .carplay-image-stack .source-images,
  .carplay-fit-panels,
  .halodisc-demo-images,
  .halodisc-fitment-list,
  .fit-models .bullet-list { grid-template-columns: 1fr; }
  .fit-intro, .fit-test, .fit-warning, .fit-models { grid-column: 1 / -1; }
  .source-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-grid div, .order-review-row { grid-template-columns: 1fr; }
  .cart-preview img { width: 100%; }
  .cart-layer {
    top: auto;
    right: var(--container-gutter-phone);
    left: var(--container-gutter-phone);
    bottom: var(--container-gutter-phone);
    width: auto;
    max-height: min(420px, 46dvh);
  }
  .cart-layer-list { max-height: 18dvh; }
  .cart-layer .btn { width: 100%; }
  .cart-layer-toggle {
    right: var(--container-gutter-phone);
    left: var(--container-gutter-phone);
    bottom: var(--container-gutter-phone);
    justify-content: space-between;
  }
  .halodisc-rail-head {
    align-items: stretch;
    flex-direction: column;
  }
  .halodisc-rail-controls {
    justify-content: space-between;
    width: 100%;
  }
  .halodisc-rail-progress {
    flex: 1;
    width: auto;
  }
  .halodisc-product-rail.catalog-grid {
    gap: var(--space-4);
    padding-right: var(--space-6);
  }
  .halodisc-product-rail .catalog-item {
    flex-basis: min(84vw, 340px);
  }
}
@media (max-width: 520px) {
  .page-flash {
    top: calc(env(safe-area-inset-top, 0px) + 104px);
    right: var(--space-4);
    left: var(--space-4);
    width: auto;
  }
  .page-flash-panel {
    grid-template-columns: minmax(0, 1fr) 36px;
  }
  .page-flash-icon {
    display: none;
  }
  .topnav-inner {
    flex-wrap: wrap;
    justify-content: center;
    min-height: 0;
    padding-block: var(--space-2);
    row-gap: var(--space-2);
  }
  .logo-lockup { min-width: 0; }
  .navlinks {
    flex: 1 0 100%;
    justify-content: space-between;
    gap: var(--space-2);
    margin-left: 0;
    font-size: 12px;
  }
  .home-order-flow .purchase-flow-card {
    padding: 8px var(--space-4);
    gap: 6px;
  }
  .home-order-flow .purchase-flow-card h2 {
    font-size: 17px;
  }
  .home-order-flow .purchase-flow-card .step-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .home-order-flow .purchase-flow-card .step-list li {
    padding: 2px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-wrap: auto;
  }
  .home-order-flow .purchase-flow-card .step-list li::before {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 420px) {
  .topnav-inner {
    flex-wrap: wrap;
    justify-content: center;
    min-height: 0;
    padding-block: var(--space-2);
    row-gap: var(--space-2);
  }
  .logo-lockup { min-width: 0; }
  .navlinks {
    flex: 1 0 100%;
    justify-content: space-between;
    gap: var(--space-2);
    margin-left: 0;
    font-size: 12px;
  }
}