/* ============================================================
   EUROBAHN CAR DETAIL · V2 SKIN  (redesign/v2 branch)
   ------------------------------------------------------------
   A reskin layer loaded AFTER site.css. It changes how things
   look, never what they are: same markup order, same navigation,
   same copy. Visual grammar borrowed from CARPRO Global (see
   REDESIGN.md): black / white / green only, cut-corner rectangles
   instead of pills, slanted tag chips, headline bars, hatch-filled
   ghost words behind section heads, one hover move (0.3s ease-in-out,
   the cut grows and the surface floods).

   Only index.html (and later quote.html) load this file. The other
   five pages keep site.css alone until the header and footer are
   restyled sitewide.
   ============================================================ */

/* ---------- 0. Registered property for the animated cut ---------- */
@property --c {
  syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}

/* ---------- 1. TOKENS · palette cut to black, white, green ---------- */
:root {
  /* neutral ramp, now true black and neutral greys (CARPRO greys) */
  --ink-950: #000000;
  --ink-900: #0A0A0A;
  --ink-850: #111111;
  --ink-800: #1A1A1A;
  --ink-750: #222222;
  --ink-700: #2E2E2E;
  --ink-600: #454545;
  --ink-500: #5C5C5C;
  --ink-400: #8A8A8A;
  --ink-300: #A8A8A8;
  --ink-200: #CFCFCF;
  --ink-100: #E8E8E8;
  --ink-050: #F4F4F4;
  --hero-ink: #000000;

  --line:       #DCDDE2;   /* CARPRO card outline grey */
  --line-dark:  #262626;   /* its counterpart on black */

  --green:      #1FE08C;
  --green-mid:  #12C778;
  --green-deep: #0A7E4D;   /* AA on white: 5.1:1 */
  --green-wash: rgba(31, 224, 140, 0.12);

  /* the old service hues collapse onto the new palette */
  --qualify-bright:  var(--green);
  --qualify:         var(--green-mid);
  --qualify-deep:    var(--green-deep);
  --qualify-wash:    var(--green-wash);
  --maintain-bright: var(--green);
  --maintain-deep:   var(--green-deep);
  --maintain-wash:   var(--green-wash);
  --protect-bright:  #FFFFFF;
  --protect-wash:    rgba(255, 255, 255, 0.08);
  --addon-bright:    #FFFFFF;
  --addon-wash:      rgba(255, 255, 255, 0.08);
  --plan-reserve:    #FFFFFF;
  --plan-reserve-wash: rgba(255, 255, 255, 0.08);
  --plan-concierge:  #FFFFFF;
  --plan-preservation: #FFFFFF;
  --status-info:     var(--green);
  --status-warning:  #FFFFFF;

  --border-strong:   var(--ink-700);
  --border-subtle:   var(--ink-800);
  --border-hairline: rgba(255, 255, 255, 0.10);
  --surface-1: var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-hover: var(--ink-750);

  /* shapes */
  --cut:        12px;   /* button corner at rest */
  --cut-hover:  22px;   /* button corner on hover */
  --cut-card:   28px;   /* card corner */
  --cut-tile:   22px;   /* bento tile corner */
  --slant:      24px;   /* tag chip slant: equal to the chip height, so the edge is 45° like every corner cut */
  --bw:         1.5px;  /* outline width */
  --move:       0.3s ease-in-out;

  /* labels: Archivo, small, tracked, uppercase (CARPRO's label voice) */
  --label: 600 11px/1 var(--font-body);
  --label-ls: 0.12em;

  /* GREEN ROLE · "accent", decided by Julio 2026-10-23 after the live
     comparison. Buttons are black and white; green lives in thin rules,
     tag chips, the "+" bullets, small highlights and the Explore glow. */
  --btn-fill:         #000;
  --btn-text:         #fff;
  --btn-border:       #fff;
  --btn-bw:           1.5px;
  --btn-hover-fill:   #fff;
  --btn-hover-text:   #000;
  --btn-hover-border: #fff;
  --price-on-white:   #000;
  --price-on-black:   #fff;
  --emph:             var(--green-deep);   /* "+" bullets, small emphasis on white */
  --emph-dark:        var(--green);        /* the same on black */
  --rule:             var(--green-deep);   /* marker rules, step top borders */
  --chip-bg:          var(--green);
  --chip-fg:          #000;
  --feat-head:        #000;
  --feat-head-fg:     #fff;
  --feat-line:        var(--green);
  --band-bg:          #000;
  --band-fg:          #fff;
  --band-sub:         rgba(255,255,255,0.72);
  --ticker-bg:        #fff;
  --ticker-fg:        #7A7A7A;
  --ticker-b:         #000;
  --stat-num:         var(--green-deep);
}

/* light sections: same palette, text flips to black */
[data-theme="light"] {
  --qualify-bright:  var(--green-deep);
  --maintain-bright: var(--green-deep);
  --protect-bright:  #000;
  --addon-bright:    #000;
  --plan-reserve:    #000;
  --plan-concierge:  #000;
  --plan-preservation: #000;
  --text-primary:    #000;
  --text-secondary:  #3D3D3D;
  --text-muted:      #6B6B6B;
  --border-strong:   #C9CACF;
  --border-subtle:   var(--line);
  --border-hairline: rgba(0, 0, 0, 0.10);
  --surface-1: #fff;
  --surface-2: #F6F6F7;
  --surface-hover: #EFEFF1;
  --action-fill: #000;
  --action-fill-hover: #1A1A1A;
  --action-text: #fff;
  --signal-fill: var(--green-deep);
  --signal-text: #fff;
  /* on white, the black button is outlined black and inverts to white */
  --btn-border: #000;
  --btn-hover-border: #000;
}

body { background: #000; }
.section--dark { background: #000; }
.section--light { background: #fff; }
.section--hairline-top { border-top: 1px solid var(--line-dark); }

/* ---------- 2. LABEL VOICE · Archivo replaces the mono for words ---------- */
.eyebrow, .hero__eyebrow, .marker__label, .stat__label, .stat__unit, .plan__eyebrow,
.plan__per, .plan__rates-label, .plan__rates-note, .reel__tag, .review__name,
.hud__label, .hud__price-cap, .hero__scroll-cue-label, .hero__link, .hero__proof,
.hero-cta__link, .book-cta__eyebrow, .menu__kicker, .menu__syslink, .tile__cta-meta,
.tile__mini-eyebrow, .tile__label-meta, .tile__mini-meta, .tile__badge, .footer__meta,
.detail-link, .note-mono, .interstitial__sub, .nav__pillbtn span, .menu__close,
.sticky-cta__btn, .faq__q::after {
  font-family: var(--font-body);
}
.eyebrow, .marker__label, .stat__label, .plan__eyebrow, .plan__rates-label, .reel__tag,
.review__name, .hud__label, .hud__price-cap, .book-cta__eyebrow, .menu__kicker,
.tile__mini-eyebrow, .footer__meta, .interstitial__sub, .hero__scroll-cue-label {
  font-weight: 600; font-size: 11px; letter-spacing: var(--label-ls); text-transform: uppercase;
}

/* ---------- 3. CUT-CORNER BUTTONS (replace pills) ----------
   Architecture: the element itself is unclipped and transparent, so a
   glow (filter: drop-shadow) can follow its shape. ::before paints the
   outline polygon, ::after paints the fill polygon inset by the outline
   width. On hover both corners grow from --cut to --cut-hover and the
   fill floods to the hover color. One move, 0.3s ease-in-out. */
.btn, .menu__close, .nav__pillbtn, .wiz__hud-toggle {
  position: relative; isolation: isolate;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none;
  --c: var(--cut);
  --fill: var(--btn-fill); --edge: var(--btn-border); --ink: var(--btn-text);
  --hover-fill: var(--btn-hover-fill); --hover-edge: var(--btn-hover-border); --hover-ink: var(--btn-hover-text);
  color: var(--ink);
  transition: color var(--move);
}
.btn::before, .btn::after,
.menu__close::before, .menu__close::after,
.nav__pillbtn::before, .nav__pillbtn::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  --c: var(--cut);
  transition: --c var(--move), background-color var(--move), clip-path var(--move);
}
.btn::before, .menu__close::before, .nav__pillbtn::before {
  inset: 0; background: var(--edge);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  top: 0; bottom: 0;   /* cancel the v1.3 tap-target pseudo on .nav__pillbtn */
}
.btn::after, .menu__close::after, .nav__pillbtn::after {
  inset: var(--btn-bw); background: var(--fill);
  clip-path: polygon(calc(var(--c) - var(--btn-bw) * 0.41) 0, 100% 0, 100% calc(100% - var(--c) + var(--btn-bw) * 0.41), calc(100% - var(--c) + var(--btn-bw) * 0.41) 100%, 0 100%, 0 calc(var(--c) - var(--btn-bw) * 0.41));
  box-shadow: none; opacity: 1; animation: none;
}
.btn:hover, .menu__close:hover, .nav__pillbtn:hover { color: var(--hover-ink); background: transparent; }
.btn:hover::before, .menu__close:hover::before, .nav__pillbtn:hover::before { --c: var(--cut-hover); background: var(--hover-edge); }
.btn:hover::after, .menu__close:hover::after, .nav__pillbtn:hover::after { --c: var(--cut-hover); background: var(--hover-fill); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .menu__close:focus-visible, .nav__pillbtn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.btn {
  height: 46px; padding: 0 24px; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.btn--sm { height: 36px; padding: 0 16px; font-size: 11px; }
.btn--lg { height: 56px; padding: 0 32px; font-size: 13px; }

/* primary = signal (green role decides the colors) */
.btn--signal, .btn--primary { --fill: var(--btn-fill); --edge: var(--btn-border); --ink: var(--btn-text); }
/* secondary = quiet outline that inverts on hover; on black it is white-lined, on white black-lined */
.btn--secondary {
  --fill: #000; --edge: #fff; --ink: #fff;
  --hover-fill: #fff; --hover-edge: #fff; --hover-ink: #000;
}
[data-theme="light"] .btn--secondary {
  --fill: #fff; --edge: #000; --ink: #000;
  --hover-fill: #000; --hover-edge: #000; --hover-ink: #fff;
}
.btn--ghost { --fill: transparent; --edge: transparent; --ink: var(--text-secondary); --hover-fill: transparent; --hover-edge: transparent; --hover-ink: var(--text-primary); }
.btn:disabled, .btn.is-disabled { opacity: 0.4; }

/* ---------- 4. SLANTED TAG CHIPS ---------- */
.chip, .reel__tag, .tile__badge, .plan__badge, .hero__eyebrow, .book-cta__eyebrow, .eyebrow, .menu__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  height: 24px; padding: 0 16px 0 10px; margin: 0;
  border: 0; border-radius: 0;
  background: var(--chip-bg); color: var(--chip-fg);
  font: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase; line-height: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  white-space: nowrap;
}
.chip + .chip { margin-left: -4px; }
/* chips that sit on black */
.hero__eyebrow, .book-cta__eyebrow, .section--dark .eyebrow, .menu__kicker, .tile__badge {
  background: #fff; color: #000;
}
.hero__chip-dot { background: var(--green); }

/* ---------- 5. HEADLINE BARS ---------- */
.bars { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
.bars__line {
  display: inline-block; max-width: 100%;
  background: #fff; color: #000;
  font-family: var(--font-display); font-weight: 800; font-style: normal; text-transform: uppercase;
  line-height: 0.9; padding: 0.08em 0.18em 0.04em;
  letter-spacing: -0.01em;
}
.bars { --shift: 0; } /* Julio 2026-10-24: bars sit flush left, no stagger */
.bars__shift { margin-left: var(--shift); }
.bars__shift--2 { margin-left: calc(var(--shift) * 2); }
.bars--ink .bars__line { background: #000; color: #fff; }
.bars__line .hero__title-accent, .bars__line .accent { color: var(--green-deep); }

.section-title.bars { font-size: clamp(34px, 7vw, 66px); margin-top: 14px; }
.section-title.bars .bars__line { font-size: inherit; }
.section--light .section-title.bars .bars__line, [data-theme="light"] .section-title.bars .bars__line { background: #000; color: #fff; }
.section--dark .section-title.bars .bars__line { background: #fff; color: #000; }
.section-lead { font-size: 15px; color: var(--text-secondary); }
.section--dark .section-lead { color: rgba(255,255,255,0.72); }

/* ---------- 6. GHOST WORDS · hatch-filled section names ---------- */
.section { position: relative; overflow: hidden; }
.section > .container { position: relative; z-index: 1; }
.ghost {
  position: absolute; left: 50%; top: -0.1em; z-index: 0;
  transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: min(22vw, calc(185vw / var(--ghost-chars, 8)));
  line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
  color: transparent;
  background-image: url("../img/hatch.svg"); background-size: 12px 12px;
  -webkit-background-clip: text; background-clip: text;
  opacity: 0.22; pointer-events: none; user-select: none;
}
.section--dark .ghost { background-image: url("../img/hatch-white.svg"); opacity: 0.12; }

/* ---------- 7. NAV ---------- */
.nav { background: #000; border-bottom: 1px solid var(--line-dark); }
.nav__pillbtn {
  height: 38px; padding: 0 16px; gap: 9px;
  --fill: #000; --edge: var(--green); --ink: #fff; --btn-bw: 1.5px;
  --hover-fill: var(--green); --hover-edge: var(--green); --hover-ink: #000;
  --cut: 10px; --cut-hover: 16px;
}
.nav__pillbtn span { font-weight: 600; font-size: 11px; letter-spacing: 0.12em; }
/* Explore glow, now green and shaped to the polygon: a drop-shadow on the
   unclipped button follows the clipped pseudo-layers. filter is composited,
   so the sticky header does not repaint. Pauses on hover, off under
   reduced motion (section 20 of site.css already zeroes animations). */
@keyframes explore-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(31, 224, 140, 0.25)); }
  50%      { filter: drop-shadow(0 0 14px rgba(31, 224, 140, 0.75)); }
}
.nav__explore { animation: explore-glow 2.6s ease-in-out infinite; }
.nav__explore:hover { animation-play-state: paused; filter: drop-shadow(0 0 10px rgba(31, 224, 140, 0.6)); }
.nav__explore::after { box-shadow: none; opacity: 1; animation: none; }

/* ---------- 8. HERO ---------- */
.hero__eyebrow { margin: 0; }
.hero__title { margin-top: 18px; }
.hero__title.bars { font-size: clamp(38px, 10.5vw, 104px); }
.hero__title.bars .bars__line { font-size: inherit; letter-spacing: -0.015em; }
.hero__lede { color: rgba(255,255,255,0.86); }
.hero__link { color: #fff; border-bottom-color: rgba(255,255,255,0.5); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; }
.hero__proof { color: rgba(255,255,255,0.8); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; }
.hero__proof-stars { color: var(--green); }

/* HUD: the glass panel becomes a solid white cut-corner panel */
.hud, .hud.glass {
  background: #fff; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  color: #000;
}
.hud__icon { background: #000; border: 0; border-radius: 0; }
.hud__icon svg { stroke: var(--green); }
.hud__label { color: #6B6B6B; }
.hud__headline { color: #000; }
.hud__price { border-left-color: var(--line); }
.hud__price-num { color: var(--price-on-white); }
.hud__price-cap { color: #6B6B6B; }
@media (max-width: 480px) { .hud__price { border-top: 1px solid var(--line); } }

.hero__scroll-cue, .hero__scroll-cue.glass {
  background: transparent; border: 1px solid rgba(255,255,255,0.45); border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.hero__scroll-cue-label { color: #fff; }
.hero__scroll-chevron { color: #fff; }
.hero-cta__link { color: #fff; font-weight: 600; }

/* ---------- 9. STATS · white under the hero ---------- */
.stats { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); padding: 34px 0; }
.stat__num { color: var(--stat-num); font-weight: 800; }
.stat__unit { color: #6B6B6B; }
.stat__label { color: #000; }
.stat__desc { color: #3D3D3D; }

/* ---------- 10. TICKER ---------- */
.ticker { background: var(--ticker-bg); border-color: var(--line); transition: background-color var(--move); }
.ticker__item { color: var(--ticker-fg); font-weight: 600; }
.ticker__item b { color: var(--ticker-b); }

/* ---------- 11. HOW IT WORKS ---------- */
.marker__num { color: #000; }
.marker__label { color: #000; }
.marker__rule { background: var(--rule) !important; opacity: 1; }
.marker--qualify .marker__num, .marker--maintain .marker__num, .marker--protect .marker__num { color: #000; }
.section--dark .marker__num, .section--dark .marker__label { color: #fff; }
.step { border-top-color: var(--line); }
.step:first-child { border-top-color: #000; }
.step__num { color: #000; }
.step--qualify .step__num, .step--maintain .step__num, .step--protect .step__num { color: #000; }
.step__title { color: #000; }
.step__desc { color: #3D3D3D; }
.step__desc em { color: var(--emph); }
@media (min-width: 1024px) {
  .step, .step:first-child, .step--maintain, .step--protect { border-top: 2px solid var(--rule); }
}

/* "Learn more ———→" long-arrow link (CARPRO's line-with-arrow) */
.detail-link {
  gap: 14px; border-bottom: 0; padding: 12px 0; margin-top: 18px;
  font-weight: 600; font-size: 11px; letter-spacing: 0.12em; color: var(--text-primary);
}
.detail-link::after {
  content: ""; position: static; top: auto; bottom: auto;
  width: 72px; height: 1px; background: currentColor;
  transition: width var(--move);
}
.detail-link:hover::after { width: 120px; }
.detail-link:hover { border-color: transparent; }
.section--dark .detail-link { color: #fff; }

/* ---------- 12. CARDS · white, hairline grey outline, cut corners ----------
   Same layering as the buttons: the element paints the outline color,
   ::before paints the inner fill inset by 1px, children sit above. */
.plan, .review, .reel, .tile {
  position: relative; isolation: isolate;
  border: 0; border-radius: 0; box-shadow: none;
  background: var(--line);
  clip-path: polygon(var(--cut-card) 0, 100% 0, 100% calc(100% - var(--cut-card)), calc(100% - var(--cut-card)) 100%, 0 100%, 0 var(--cut-card));
  transition: background-color var(--move), transform var(--move);
}
.plan::before, .review::before, .reel::before, .tile::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #fff;
  clip-path: polygon(calc(var(--cut-card) - 0.41px) 0, 100% 0, 100% calc(100% - var(--cut-card) + 0.41px), calc(100% - var(--cut-card) + 0.41px) 100%, 0 100%, 0 calc(var(--cut-card) - 0.41px));
  transition: background-color var(--move);
}
.plan > *, .review > *, .reel > * { position: relative; z-index: 1; }
.plan:hover, .review:hover, .reel:hover { background: #000; transform: translateY(-2px); }

/* plan cards */
.plan {
  --text-primary: #000; --text-secondary: #333; --text-muted: #666;
  --border-hairline: var(--line);
  --plan-ink: #fff; --plan-ink-soft: rgba(255,255,255,0.72);
}
.plan__header, .plan--qualify .plan__header, .plan--maintain .plan__header, .plan--featured .plan__header {
  background: #000; padding: 24px 26px 22px;
}
.plan--featured .plan__header { background: var(--feat-head); }
.plan--featured { background: var(--feat-line); }
.plan--featured .plan__eyebrow, .plan--featured .plan__price, .plan--featured .plan__per { color: var(--feat-head-fg); }
.plan__eyebrow { color: rgba(255,255,255,0.72); }
.plan__price { color: #fff; font-weight: 800; }
.plan__per { color: rgba(255,255,255,0.72); font-size: 12px; font-weight: 500; }
.plan__badge, .plan--qualify .plan__badge {
  top: 0; right: 0; height: 26px; padding: 0 14px 0 20px;
  background: var(--feat-line); color: #000; font-size: 11px;
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: none;
}
.plan__body { background: transparent; }
.plan__desc { color: #333; }
.plan__list li { color: #1A1A1A; }
.plan__list li span, .plan--qualify .plan__list li span, .plan--maintain .plan__list li span { color: var(--emph); font-weight: 700; }
.plan__rates { border-top-color: var(--line); }
.plan__rates-label { color: #6B6B6B; }
.plan__rates-row { color: #333; }
.plan__rates-row b { color: #000; }
.plan__rates-note { color: #6B6B6B; font-family: var(--font-body); }
.plan__rates-row a { color: #000; border-bottom-color: var(--green); }
.plan__rates-row a:hover { color: var(--green-deep); }
.plans__deposit { color: rgba(255,255,255,0.8); }
.plans__foot { color: rgba(255,255,255,0.6); }
.plans__foot b { color: rgba(255,255,255,0.86); }
.note-mono { color: rgba(255,255,255,0.6); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; }
[data-theme="light"] .note-mono { color: #6B6B6B; }

/* reels */
.reel { --cut-card: 22px; }
.reel__video { background: #000; transition: transform var(--move); }
.reel { overflow: hidden; }
.reel:hover .reel__video { transform: scale(1.03); }
.reel__cap { background: transparent; color: #333; padding: 16px 18px 20px; }
.reel__tag { margin-bottom: 10px; }

/* reviews */
.review { --cut-card: 22px; }
.review__stars { color: #000; font-size: 14px; letter-spacing: 0.18em; }
.review__quote { color: #111; }
.review__by { border-top-color: var(--line); }
.review__name { color: #000; font-family: var(--font-body); }
.review__meta { color: #6B6B6B; }

/* ---------- 13. DARK BANDS · pricing + FAQ stay plain black (no texture, decided 2026-10-23) ---------- */
.band { background: #000; }
.band > .container { z-index: 1; }

/* interstitial: bars over the video */
.interstitial__line.bars { font-size: clamp(26px, 7vw, 56px); }
.interstitial__line.bars .bars__line { font-size: inherit; }
.interstitial__sub { color: rgba(255,255,255,0.72); }

/* FAQ */
.faq { border-top-color: rgba(255,255,255,0.14); }
.faq__item { border-bottom-color: rgba(255,255,255,0.14); }
.faq__q { color: #fff; }
.faq__q::after { color: var(--green); font-weight: 400; font-size: 24px; }
.faq__a { color: rgba(255,255,255,0.74); }

/* ---------- 14. BOOK CTA band ---------- */
#book { background: var(--band-bg); transition: background-color var(--move); }
.book-cta__eyebrow { margin: 0; }
.book-cta__title { color: var(--band-fg); }
.book-cta__title.bars { font-size: clamp(30px, 6vw, 60px); margin-top: 16px; }
.book-cta__title.bars .bars__line { font-size: inherit; background: #fff; color: #000; }
.book-cta__body { color: var(--band-sub); }

/* ---------- 15. FOOTER · black, ghosted wordmark behind ---------- */
.footer {
  position: relative; overflow: hidden; background: #000; border-top: 1px solid var(--line-dark);
  padding: 64px var(--gutter-mobile) 44px;
}
.footer::before {
  content: "EUROBAHN"; position: absolute; left: 50%; bottom: -0.22em; z-index: 0;
  transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: min(24vw, 360px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
  color: #0F0F0F; pointer-events: none; user-select: none;
}
.footer__inner { position: relative; z-index: 1; }
.footer__meta { color: #8A8A8A; line-height: 2; }
.footer__meta a { color: #CFCFCF; }
.footer__meta a:hover { color: #fff; }
@media (min-width: 1024px) { .footer { padding: 88px var(--gutter-desk) 56px; } }

/* ---------- 16. STICKY MOBILE CTA ---------- */
.sticky-cta, .sticky-cta.glass {
  background: #000; border: 1px solid var(--green); border-radius: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sticky-cta__label { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; }
.sticky-cta__btn {
  border-radius: 0; background: var(--green); color: #000;
  font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ---------- 17. MENU OVERLAY (bento) ---------- */
.menu { background: rgba(0,0,0,0.88); }
.menu__panel { background: #000; border-bottom: 1px solid var(--line-dark); box-shadow: none; }
.menu__bar { background: #000; border-bottom-color: var(--line-dark); }
.menu__close {
  height: 40px; padding: 0 16px;
  --fill: #000; --edge: #fff; --ink: #fff; --btn-bw: 1px;
  --hover-fill: #fff; --hover-edge: #fff; --hover-ink: #000;
  --cut: 10px; --cut-hover: 16px;
  font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
}
.menu__kicker { margin: 0; }
.menu__title { color: #fff; font-style: normal; font-weight: 800; margin-top: 12px; }
.menu__syslink { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 3px; }
.menu__syslink:hover { border-bottom-color: var(--green); }
.menu__foot { color: #8A8A8A; font-family: var(--font-body); letter-spacing: 0; }

.tile { --cut-card: var(--cut-tile); background: var(--line-dark); overflow: hidden; }
.tile::before { background: #0A0A0A; }
.tile > :not(.tile__img):not(.tile__scrim):not(.tile__badge):not(.tile__corner):not(.tile__label) { position: relative; }
.tile > * { z-index: 1; }
.tile:hover { background: #fff; }
.tile--media .tile__img { transition: transform var(--move); }
.tile--media:hover .tile__img { transform: scale(1.04); }
.menu .tile { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background-color var(--move); }
.menu.is-open .tile:hover { transform: translateY(-2px); }

.tile--cta { background: var(--green); overflow: hidden; border: 0; }
.tile--cta::before { background: #000; }
.tile--cta::after {
  inset: 1px; border-radius: 0; z-index: 1;
  clip-path: polygon(calc(var(--cut-tile) - 0.41px) 0, 100% 0, 100% calc(100% - var(--cut-tile) + 0.41px), calc(100% - var(--cut-tile) + 0.41px) 100%, 0 100%, 0 calc(var(--cut-tile) - 0.41px));
  box-shadow: inset 0 0 0 1px rgba(31, 224, 140, 0.55), inset 0 0 32px rgba(31, 224, 140, 0.35);
}
.tile__num { color: var(--green); }
.tile__cta-title { color: #fff; }
.tile__cta-meta { color: var(--green); margin-top: 6px; }
.tile__arrow {
  border-radius: 0; background: var(--green); color: #000;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.tile__badge, .tile__badge--qualify, .tile__badge--maintain { border: 0; background: #fff; color: #000; top: 0; left: 0; height: 26px; }
.tile__badge .chip__dot { background: var(--green) !important; }
.tile__label-title { color: #fff; }
.tile__label-meta { color: rgba(255,255,255,0.72); }
.tile--mini.tile--protect, .tile--mini.tile--addon { border-top: 0; }
.tile--protect .tile__mini-eyebrow, .tile--addon .tile__mini-eyebrow { color: #8A8A8A; }
.tile__mini-title { color: #fff; }
.tile__mini-meta { color: #8A8A8A; }

/* ---------- 18. INPUTS (shared with the quote builder later) ---------- */
.input, .wiz-input {
  border-radius: 0; border: 1px solid var(--line-dark); background: #000; color: #fff;
}
[data-theme="light"] .input, [data-theme="light"] .wiz-input { border-color: var(--line); background: #fff; color: #000; }
.input:focus, .wiz-input:focus-visible { border-color: var(--green); outline: 0; box-shadow: 0 0 0 1px var(--green); }

/* ---------- 19. RESPONSIVE TOUCHES ---------- */
@media (min-width: 1024px) {
  .section { padding: 104px 0; }
  .bars { --shift: 0.9em; }
  .section-title.bars { font-size: 66px; }
  .hero__title.bars { font-size: clamp(72px, 7.6vw, 112px); }
  .hero__actions { gap: 16px; }
  .plans { gap: 20px; }
}
@media (max-width: 480px) {
  .ghost { opacity: 0.18; }
  .bars__line { padding: 0.1em 0.14em 0.06em; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__explore { animation: none; filter: drop-shadow(0 0 8px rgba(31, 224, 140, 0.45)); }
  .btn::before, .btn::after, .plan, .review, .reel, .tile, .tile__img, .reel__video, .detail-link::after { transition: none !important; }
}


/* ---------- 20. INSTALLED WITH CARPRO · product tiles in the pricing band ---------- */
.coatings { margin-top: 30px; }
.coatings__label {
  margin: 0; font: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.coatings__row {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.coating {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px;
  background: var(--line);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: background-color var(--move), transform var(--move);
}
.coating::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #fff;
  clip-path: polygon(17.6px 0, 100% 0, 100% calc(100% - 17.6px), calc(100% - 17.6px) 100%, 0 100%, 0 17.6px);
}
.coating > * { position: relative; z-index: 1; }
.coating:hover { background: var(--green); transform: translateY(-2px); }
.coating__img { flex: none; width: 84px; height: 84px; object-fit: contain; transition: transform var(--move); }
.coating:hover .coating__img { transform: scale(1.06); }
.coating__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.coating__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 21px; line-height: 1; color: #000;
}
.coating__name small { font-weight: 400; font-size: 0.8em; color: #555; margin-left: 2px; }
.coating__chip { margin-top: 9px; }
@media (max-width: 760px) {
  .coatings__row { grid-template-columns: 1fr; gap: 10px; }
  .coating__img { width: 72px; height: 72px; }
}
@media (min-width: 1024px) {
  .coatings { margin-top: 36px; }
  .coatings__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .coating { padding: 14px 18px 14px 12px; gap: 14px; }
  .coating__img { width: 88px; height: 88px; }
  .coating__name { font-size: 19px; }
}

/* ============================================================
   21. QUOTE BUILDER (quote.html) · same pieces, same flow
   quote.js is untouched: every selector it reads (name=, data-*,
   .is-active, .is-done, .is-included, .is-locked, .is-invalid,
   .is-expanded) keeps its meaning. Only the look changes.
   ============================================================ */
.wiz-hero { padding-top: 72px; padding-bottom: 40px; }
.wiz-hero .page-hero__title.bars { font-size: clamp(40px, 9vw, 92px); margin-top: 18px; }
.wiz-hero .page-hero__title.bars .bars__line { font-size: inherit; }
.wiz-hero .lede { color: rgba(255,255,255,0.8); font-size: clamp(16px, 2vw, 19px); }
.wiz-hero .marker__num, .wiz-hero .marker__label { color: #fff; }
.wiz-hero .marker__rule { background: var(--green) !important; }

/* progress rail: three cut-corner steps. Active is black, done turns green */
.wiz__progress { gap: 8px; margin-bottom: 32px; }
.wiz__prog {
  position: relative; isolation: isolate;
  padding: 12px 16px; border: 0; border-radius: 0; background: var(--line); opacity: 1;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background-color var(--move);
}
.wiz__prog::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #fff;
  clip-path: polygon(9.6px 0, 100% 0, 100% calc(100% - 9.6px), calc(100% - 9.6px) 100%, 0 100%, 0 9.6px);
  transition: background-color var(--move);
}
.wiz__prog > * { position: relative; z-index: 1; }
.wiz__prog-num { font-family: var(--font-mono); color: #8A8A8A; }
.wiz__prog-label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em; color: #6B6B6B; }
.wiz__prog.is-active { background: #000; }
.wiz__prog.is-active::before { background: #000; }
.wiz__prog.is-active .wiz__prog-num { color: var(--green); }
.wiz__prog.is-active .wiz__prog-label { color: #fff; }
.wiz__prog.is-done { background: var(--green); opacity: 1; }
.wiz__prog.is-done::before { background: var(--green); }
.wiz__prog.is-done .wiz__prog-num { color: var(--green-deep); }
.wiz__prog.is-done .wiz__prog-label { color: #000; }

/* legends, notes, group labels */
.wiz__legend, .section--dark .wiz__legend {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0;
  text-transform: uppercase; color: #000; margin-bottom: 14px;
}
.wiz__note { color: #5A5A5A; }
.wiz__note b { color: #000; }
.wiz-addon__group {
  display: inline-block; margin: 30px 0 10px; padding: 6px 14px 5px;
  border: 0; background: #000; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* package cards (radio) */
.wiz-tiers { gap: 12px; }
.wiz-tier__card {
  position: relative; isolation: isolate;
  padding: 20px 22px; border: 0; border-radius: 0; background: var(--line);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: background-color var(--move), transform var(--move);
}
.wiz-tier__card::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #fff;
  clip-path: polygon(19.6px 0, 100% 0, 100% calc(100% - 19.6px), calc(100% - 19.6px) 100%, 0 100%, 0 19.6px);
}
.wiz-tier__card > * { position: relative; z-index: 1; }
.wiz-tier:hover .wiz-tier__card { background: #000; }
.wiz-tier__input:checked + .wiz-tier__card { background: #000; box-shadow: none; }
.wiz-tier__input:checked + .wiz-tier__card::before { inset: 2px; }
.wiz-tier__input:focus-visible + .wiz-tier__card { outline: 2px solid var(--green); outline-offset: 3px; }
.wiz-tier__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em; color: #6B6B6B; }
.wiz-tier__price { color: #000; font-weight: 800; font-size: 32px; }
.wiz-tier__desc { color: #3D3D3D; }
.wiz-tier__tag { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.1em; color: var(--green-deep); }
.wiz-tier__badge {
  top: 0; right: 0; height: 26px; display: inline-flex; align-items: center;
  padding: 0 14px 0 20px; border-radius: 0; background: var(--green); color: #000;
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em;
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}

/* coating cards with the CARPRO renders */
.wiz-coats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wiz-coat { position: relative; cursor: pointer; display: block; }
.wiz-coat input { position: absolute; opacity: 0; }
.wiz-coat__card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%;
  background: var(--line);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: background-color var(--move), transform var(--move);
}
.wiz-coat__card::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #fff;
  clip-path: polygon(19.6px 0, 100% 0, 100% calc(100% - 19.6px), calc(100% - 19.6px) 100%, 0 100%, 0 19.6px);
}
.wiz-coat__card > * { position: relative; z-index: 1; }
.wiz-coat:hover .wiz-coat__card { background: #000; }
.wiz-coat input:checked + .wiz-coat__card { background: #000; }
.wiz-coat input:checked + .wiz-coat__card::before { inset: 2px; }
.wiz-coat input:focus-visible + .wiz-coat__card { outline: 2px solid var(--green); outline-offset: 3px; }
.wiz-coat__img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  padding: 18px 18px 6px; box-sizing: border-box;
  transition: transform var(--move);
}
.wiz-coat:hover .wiz-coat__img, .wiz-coat input:checked + .wiz-coat__card .wiz-coat__img { transform: scale(1.04); }
.wiz-coat__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 6px 18px 18px; margin-top: auto; }
.wiz-coat__label {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 18px; line-height: 1.05; color: #000;
}
.wiz-coat input:checked + .wiz-coat__card .wiz-coat__label::after {
  content: "Selected"; display: block; margin-top: 6px;
  font: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--green-deep);
}

/* option chips (vehicle class, add-on choices, maintenance client) */
.wiz-pills { gap: 8px; }
.wiz-pill span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px 0 14px;
  border: 0; border-radius: 0; background: var(--line); color: #1A1A1A;
  font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transition: background-color var(--move), color var(--move);
}
.wiz-pills--sm .wiz-pill span { min-height: 36px; font-size: 11px; padding: 0 18px 0 12px; }
.wiz-pill:hover span { background: #000; color: #fff; }
.wiz-pill input:checked + span { background: var(--green); color: #000; }
.wiz-pill input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }
.wiz-pill input:disabled + span { opacity: 0.35; }

/* add-on rows */
.wiz-addon { border-bottom-color: var(--line); padding: 16px 0; }
.wiz-addon__name { color: #000; font-weight: 700; }
.wiz-addon__included { font-family: var(--font-body); color: var(--green-deep); }
.wiz-addon__desc { color: #5A5A5A; }

/* detail fields */
.wiz-field__label { font-family: var(--font-body); color: #3D3D3D; }
.wiz-input { background: #fff; border: 1px solid #C9CACF; color: #000; }
.wiz-input:focus-visible { border-color: #000; box-shadow: 0 0 0 1px #000; outline: 0; }
.wiz-field.is-invalid .wiz-input { border-color: #B42318; box-shadow: 0 0 0 1px #B42318; }

/* summary + deposit */
.wiz-summary dt, .wiz-summary dd { border-bottom-color: var(--line); }
.wiz-summary dt { color: #3D3D3D; }
.wiz-summary dd { color: #000; font-family: var(--font-body); }
.wiz-deposit {
  border-radius: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green);
}
.wiz-deposit__label { font-family: var(--font-body); color: var(--green-deep); }
.wiz-deposit__body { color: #000; }
.wiz-status { border-radius: 0; border-color: var(--line); background: #F6F6F7; color: #3D3D3D; }
.wiz-status.is-sent { background: #fff; border-color: var(--green); border-left-width: 4px; color: #000; }
.wiz-status.is-error { background: #fff; border-color: #B42318; border-left-width: 4px; color: #000; }

/* live total HUD: a black cut-corner panel */
.wiz__hud {
  border-radius: 0; border: 0; box-shadow: none; background: #000;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  padding: 24px 22px 22px;
  --qualify-bright: var(--green);
}
.wiz__hud .hud__label { color: var(--green); }
.wiz__total { color: #fff; font-weight: 800; }
.wiz__lines li { border-bottom-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.72); }
.wiz__lines b { color: #fff; font-family: var(--font-body); }
.wiz__hudnote { color: rgba(255,255,255,0.55); }
.wiz__hud .btn--signal { --fill: #fff; --edge: #fff; --ink: #000; --hover-fill: var(--green); --hover-edge: var(--green); --hover-ink: #000; }
.wiz__hud-toggle { color: #CFCFCF; font-family: var(--font-body); }

/* step navigation */
.wiz__nav { margin-top: 10px; }

@media (max-width: 860px) {
  .wiz__hud {
    clip-path: none; border-radius: 0; border-top: 1px solid var(--line-dark);
    padding: 12px var(--gutter-mobile) calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .wiz__hud-toggle { border-radius: 0; }
  .wiz-coats { grid-template-columns: 1fr; }
  .wiz-coat__card { flex-direction: row; align-items: center; }
  .wiz-coat__img { width: 110px; height: 110px; padding: 10px; flex: none; }
  .wiz-coat__body { padding: 14px 16px 14px 4px; margin-top: 0; }
  .wiz__prog { padding: 10px 12px; }
}

/* ============================================================
   22. INNER PAGES · assessment, how-it-works, memberships,
   protection, add-ons. Shared header, footer and bento come from
   the sections above; this block covers the parts only those
   pages use.
   ============================================================ */
.page-hero { background: #000; }
.page-hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.9) 100%); }
.page-hero__title.bars { font-size: clamp(40px, 9.5vw, 96px); margin-top: 18px; }
.page-hero__title.bars .bars__line { font-size: inherit; }
.bars__line [class^="accent-"] { color: var(--green-deep); }
.page-hero__lead { color: rgba(255,255,255,0.84); }
.back-link { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; color: rgba(255,255,255,0.72); }
.back-link:hover { color: #fff; }

/* big intro paragraph */
.section--dark .lede { color: rgba(255,255,255,0.86); }
.section--dark .lede strong { color: #fff !important; }
[data-theme="light"] .lede { color: #111; }

/* tick lists: the "+" takes the emphasis color */
.ticklist li span, .ticklist--qualify li span, .ticklist--protect li span, .ticklist--addon li span { color: var(--emph-dark); font-weight: 700; }
[data-theme="light"] .ticklist li span, [data-theme="light"] .ticklist--qualify li span,
[data-theme="light"] .ticklist--protect li span, [data-theme="light"] .ticklist--addon li span { color: var(--emph); }
.ticklist li b { color: inherit; }
.section--dark .ticklist li { color: rgba(255,255,255,0.8); }
.section--dark .ticklist li b { color: #fff; }

/* category labels over price lists */
.cat-label__dot { border-radius: 0; width: 10px; height: 10px; clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); }
.cat-label--protect .cat-label__dot, .cat-label--addon .cat-label__dot { background: var(--green); }
.cat-label--protect .cat-label__text, .cat-label--addon .cat-label__text { color: #fff; font-family: var(--font-body); font-weight: 600; }
[data-theme="light"] .cat-label--protect .cat-label__text, [data-theme="light"] .cat-label--addon .cat-label__text { color: #000; }
.price-row { border-bottom-color: rgba(255,255,255,0.14); }
[data-theme="light"] .price-row { border-bottom-color: var(--line); }
.price-row__val--from { font-family: var(--font-body); }

/* info cards (light sections) */
.info-card, .info-card--qualify, .info-card--protect, .info-card--maintain, .info-card--addon {
  position: relative; isolation: isolate; border: 0; border-radius: 0; background: var(--line);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: background-color var(--move), transform var(--move);
}
.info-card::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #fff;
  clip-path: polygon(19.6px 0, 100% 0, 100% calc(100% - 19.6px), calc(100% - 19.6px) 100%, 0 100%, 0 19.6px);
}
.info-card > * { position: relative; z-index: 1; }
.info-card:hover { background: #000; transform: translateY(-2px); }
.info-card__k { font-family: var(--font-body); color: #6B6B6B; }
.info-card__title { color: #000; }
.info-card__desc { color: #3D3D3D; }

/* crosslinks (dark sections): black tiles that light up white */
.crosslink a, .crosslink a.cl--qualify, .crosslink a.cl--maintain, .crosslink a.cl--protect, .crosslink a.cl--addon {
  position: relative; isolation: isolate; border: 0; border-radius: 0; background: var(--line-dark);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: background-color var(--move), transform var(--move);
}
.crosslink a::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #0A0A0A;
  clip-path: polygon(15.6px 0, 100% 0, 100% calc(100% - 15.6px), calc(100% - 15.6px) 100%, 0 100%, 0 15.6px);
}
.crosslink a > * { position: relative; z-index: 1; }
.crosslink a:hover, .crosslink a.cl--qualify:hover, .crosslink a.cl--maintain:hover, .crosslink a.cl--protect:hover, .crosslink a.cl--addon:hover { background: #fff; transform: translateY(-2px); }
.cl-icon, .crosslink a.cl--qualify .cl-icon, .crosslink a.cl--maintain .cl-icon, .crosslink a.cl--protect .cl-icon, .crosslink a.cl--addon .cl-icon {
  border-radius: 0; background: #000; border: 1px solid var(--line-dark); color: var(--green);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.crosslink__t { color: #fff; }
.crosslink__m { color: #8A8A8A; font-family: var(--font-body); }
.crosslink__corner { color: var(--green); }

/* lead block (closing CTA card on dark sections) */
.lead {
  position: relative; isolation: isolate; border: 0; border-radius: 0; background: var(--line);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.lead::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #fff;
  clip-path: polygon(23.6px 0, 100% 0, 100% calc(100% - 23.6px), calc(100% - 23.6px) 100%, 0 100%, 0 23.6px);
}
.lead > * { position: relative; z-index: 1; }
.lead .eyebrow, .lead .marker__num, .lead .marker__label { color: #000; }
.lead .eyebrow { background: var(--chip-bg); color: var(--chip-fg); }
.lead__title { color: #000; }
.lead__desc { color: #3D3D3D; }
.lead .btn--signal { --fill: #000; --edge: #000; --ink: #fff; --hover-fill: #fff; --hover-edge: #000; --hover-ink: #000; }
.lead .btn--secondary { --fill: #fff; --edge: #000; --ink: #000; --hover-fill: #000; --hover-edge: #000; --hover-ink: #fff; }
.lead .form__alt { color: #3D3D3D; }

/* service categories (protection.html) */
.svc-cat {
  position: relative; isolation: isolate; border: 0; border-radius: 0; background: var(--line); box-shadow: none;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.svc-cat::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #fff;
  clip-path: polygon(23.6px 0, 100% 0, 100% calc(100% - 23.6px), calc(100% - 23.6px) 100%, 0 100%, 0 23.6px);
}
.svc-cat > * { position: relative; z-index: 1; }
.svc-cat__media { background: #000; }
.svc-cat__eyebrow {
  display: inline-flex; align-items: center; height: 24px; padding: 0 16px 0 10px;
  background: var(--chip-bg); color: var(--chip-fg);
  font: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}
.svc-cat__intro { color: #000; }
.svc-cat__purpose { color: #3D3D3D; }
.svc-cat__label { color: #000; font-family: var(--font-body); }
.svc-disclaimer { border-radius: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); }
.svc-disclaimer p { color: #3D3D3D; }

/* gallery (dark sections) */
.gallery figure {
  border: 0; border-radius: 0; background: var(--line-dark);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.gallery img { transition: transform var(--move); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { font-family: var(--font-body); font-weight: 600; }

/* maintenance plan grid + the single plan card inherit .plan from section 12 */
.maint-grid .plan { background: var(--line); }

/* flagship card, if it ever returns */
.flagship { border-radius: 0; border-color: var(--line-dark); border-top-color: var(--green); background: #0A0A0A; box-shadow: none; }
.flagship__badge { border-radius: 0; background: var(--green); color: #000; font-family: var(--font-body); clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
.flagship__eyebrow { color: var(--green); font-family: var(--font-body); }
.flagship__opt { border-radius: 0; border-color: var(--line-dark); background: #000; }
.flagship__opt-price { color: var(--green); }

/* the loud placeholder-price flag keeps its job, in the new palette */
.price-flag, [data-theme="light"] .price-flag {
  border-radius: 0; background: #000; border: 1px solid var(--green); color: var(--green);
  font-family: var(--font-body);
}

/* markers and eyebrows inside dark inner sections */
.section--dark .eyebrow { background: #fff; color: #000; }
.section--dark .marker__rule { background: var(--green) !important; }

/* Some tick lists wrap their text in a second span (assessment.html).
   Only the first span is the "+" marker; the rest reads as body text. */
.ticklist li span:not(:first-child) { font-family: var(--font-body); font-weight: 400; color: inherit; }

/* ---------- 23. PRODUCT POP-UPS · the CARPRO tiles open a description ---------- */
.coating__btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 18px 12px 12px; position: relative; z-index: 1;
}
.coating { padding: 0; }
.coating:focus-within { background: var(--green); }
.coating__more {
  margin-top: 8px;
  font: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase;
  color: #6B6B6B; display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--move);
}
.coating__more::after { content: ""; width: 22px; height: 1px; background: currentColor; transition: width var(--move); }
.coating__btn:hover .coating__more, .coating:focus-within .coating__more { color: #000; }
.coating__btn:hover .coating__more::after { width: 36px; }
@media (min-width: 1024px) {
  .coating__btn { padding: 14px 18px 14px 12px; gap: 14px; }
}

.pdlg {
  padding: 0; border: 0; background: transparent; max-width: none; max-height: none;
  width: min(600px, calc(100vw - 32px));
}
.pdlg::backdrop { background: rgba(0, 0, 0, 0.78); }
.pdlg[open] { animation: rise-in 220ms var(--ease-out) both; }
.pdlg__panel {
  position: relative; background: #fff; color: #000;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  padding: 26px 26px 26px; max-height: calc(100vh - 32px); overflow: auto;
}
.pdlg__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  height: 32px; padding: 0 12px; border: 0; background: #000; color: #fff; cursor: pointer;
  font: 600 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: background-color var(--move), color var(--move);
}
.pdlg__close:hover { background: var(--green); color: #000; }
.pdlg__close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pdlg__head { display: flex; align-items: center; gap: 18px; padding-right: 88px; }
.pdlg__img { flex: none; width: 110px; height: 110px; object-fit: contain; }
.pdlg__title {
  margin: 10px 0 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 30px; line-height: 0.95; color: #000;
}
.pdlg__title small { font-weight: 400; font-size: 0.72em; color: #555; }
.pdlg__use { margin: 8px 0 0; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: #5A5A5A; }
.pdlg__plain { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.pdlg__plain p { margin: 0 0 12px; font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; color: #111; }
.pdlg__plain p:last-child { margin-bottom: 0; }
.pdlg__nerd-toggle {
  margin-top: 16px; padding: 10px 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep);
}
.pdlg__nerd-toggle::after { content: ""; width: 40px; height: 1px; background: currentColor; transition: width var(--move); }
.pdlg__nerd-toggle:hover::after { width: 72px; }
.pdlg__nerd-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.pdlg__nerd {
  margin-top: 8px; padding: 14px 16px; border-left: 4px solid var(--green); background: #F6F6F7;
  animation: fade-in 160ms var(--ease-out) both;
}
.pdlg__nerd p { margin: 0 0 10px; font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: #222; }
.pdlg__nerd p:last-child { margin-bottom: 0; }
.pdlg__src { font-size: 12px !important; color: #6B6B6B !important; }
.pdlg__foot { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.pdlg .btn--signal { --fill: #000; --edge: #000; --ink: #fff; --hover-fill: #fff; --hover-edge: #000; --hover-ink: #000; }
@media (max-width: 480px) {
  .pdlg__panel { padding: 20px 18px 20px; }
  .pdlg__head { gap: 12px; padding-right: 0; flex-wrap: wrap; }
  .pdlg__img { width: 84px; height: 84px; }
  .pdlg__title { font-size: 26px; }
  .pdlg__close { top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdlg[open], .pdlg__nerd { animation: none; }
}

/* ---------- 24. PACKAGES ON WHITE · collapsible cards ----------
   The pricing section is a light section now, so the card shapes and the
   hover move read against white. Each card opens from its header. */
#qualify .coatings__label { color: #6B6B6B; }
[data-theme="light"] .plans__deposit { color: #3D3D3D; }
[data-theme="light"] .plans__foot { color: #6B6B6B; }
[data-theme="light"] .plans__foot b { color: #000; }
[data-theme="light"] .plans__deposit b { color: #000; }
.plans--four { align-items: start; }
.plans--four .plan { display: block; }
.plans--four .plan__body { display: block; }

.plan__header { position: relative; }
.plan__toggle {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font: 600 11px/1 var(--font-body); letter-spacing: var(--label-ls); text-transform: uppercase;
  color: rgba(255,255,255,0.86);
  transition: color var(--move);
}
.plan--featured .plan__toggle { border-top-color: rgba(255,255,255,0.18); color: var(--feat-head-fg); }
.plan__toggle:hover { color: #fff; }
.plan__toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.plan__toggle-icon {
  position: relative; flex: none; width: 18px; height: 18px;
  background: var(--green);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.plan__toggle-icon::before, .plan__toggle-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #000;
  transform: translate(-50%, -50%);
  transition: transform var(--move), opacity var(--move);
}
.plan__toggle-icon::before { width: 10px; height: 2px; }
.plan__toggle-icon::after { width: 2px; height: 10px; }
.plan.is-open .plan__toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.plan__fold {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
.plan__fold-inner { overflow: hidden; min-height: 0; }
.plan.is-open .plan__fold { grid-template-rows: 1fr; }
.plan__body { padding-top: 22px; }
/* while closed the body is out of the tab order and hidden from readers */
.plan:not(.is-open) .plan__fold-inner { visibility: hidden; transition: visibility 0s 0.3s; }
.plan.is-open .plan__fold-inner { visibility: visible; transition: visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  .plan__fold, .plan:not(.is-open) .plan__fold-inner { transition: none; }
}

/* the Most Booked badge is a direct child of .plan; keep it pinned to the header corner */
.plan > .plan__badge { position: absolute; z-index: 2; }

/* ---------- 25. HERO · option A (2026-10-23) ----------
   Three staggered bars that never wrap. On phones and tablets the headline
   moves into the empty top third over the darkest video, the status panel
   keeps the bottom, and the lede leaves the video for the CTA block below.
   Desktop keeps the lede beside the bars; it has the room. */
.hero__title.bars { font-size: clamp(40px, 12vw, 104px); gap: 5px; }
.hero__scrim {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.40) 26%,
    rgba(0,0,0,0.22) 52%, rgba(0,0,0,0.62) 78%, rgba(0,0,0,0.92) 100%);
}
@media (max-width: 1023px) {
  .hero__inner { top: 26px; bottom: auto; padding-bottom: 0; }
  .hero__eyebrow { margin: 0; }
  .hero__title { margin-top: 14px; }
  .hero__lede { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__inner { top: 40px; padding-left: 32px; padding-right: 32px; }
}
.hero-cta { padding-top: 16px; }
.hero-cta__lede {
  margin: 0 0 8px; text-align: center;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: rgba(255,255,255,0.78); max-width: 34em; margin-left: auto; margin-right: auto;
}
@media (min-width: 1024px) {
  .hero__title.bars { font-size: clamp(64px, 6.6vw, 96px); }
  .hero__scrim {
    background:
      linear-gradient(95deg,
        rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.84) 30%,
        rgba(0,0,0,0.62) 52%, rgba(0,0,0,0.28) 74%, rgba(0,0,0,0.18) 100%),
      linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%);
  }
}

/* Bars are blocks sized to their text, so the hero's line-split animation
   sees one bar per line instead of packing two short bars onto one row. */
.bars__line { display: block; width: fit-content; max-width: 100%; }
/* the eyebrow chip must fit a 375px phone */
.hero__eyebrow { letter-spacing: 0.12em; max-width: 100%; }
@media (min-width: 1024px) { .hero__eyebrow { letter-spacing: 0.16em; font-size: 11px; } }

/* hero video fallback: when playback never starts the poster is the hero */
.hero__video.is-fallback { object-fit: cover; }
.hero { background: #000 url("../media/eurobahn-hero-poster.jpg") center / cover no-repeat; }

/* status panel: the pin sits bare on white, no box, and "Free" reads once */
.hud__icon { background: transparent; border: 0; width: 34px; height: 34px; }
.hud__icon svg { width: 26px; height: 26px; stroke: var(--green-deep); }
@media (min-width: 1024px) { .hud__icon { width: 38px; height: 38px; } .hud__icon svg { width: 28px; height: 28px; } }
.hud__price-num { font-size: 24px; }
@media (min-width: 1024px) { .hud__price-num { font-size: 28px; } }

/* ---------- hero eyebrow: dark outlined chip with the glowing dot ----------
   Outline on a slanted shape = the element paints the hairline, ::before
   paints the dark fill one pixel inside. */
.hero__eyebrow {
  position: relative; isolation: isolate;
  height: 28px; padding: 0 20px 0 12px; gap: 10px;
  background: rgba(255, 255, 255, 0.55); color: #fff;
}
.hero__eyebrow::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: rgba(0, 0, 0, 0.72);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant) + 0.4px) 100%, 0 100%);
}
@keyframes eb-dot-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(31, 224, 140, 0.18), 0 0 12px 2px rgba(31, 224, 140, 0.85); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 1px rgba(31, 224, 140, 0.10), 0 0 4px 0 rgba(31, 224, 140, 0.35); }
}
.hero__chip-dot, .hero__eyebrow .hero__chip-dot {
  display: inline-block; margin: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); animation: eb-dot-glow 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero__chip-dot { animation: none; box-shadow: 0 0 10px 2px rgba(31, 224, 140, 0.7); }
}
.hero__chip-dot { flex: none; }

/* ---------- hero status panel: dark outlined, like the eyebrow ---------- */
.hud, .hud.glass {
  position: relative; isolation: isolate;
  background: rgba(255, 255, 255, 0.55); color: #fff;
}
.hud::before {
  content: ""; position: absolute; inset: 1px; z-index: 0;
  background: rgba(0, 0, 0, 0.74);
  clip-path: polygon(15.6px 0, 100% 0, 100% calc(100% - 15.6px), calc(100% - 15.6px) 100%, 0 100%, 0 15.6px);
}
.hud > * { position: relative; z-index: 1; }
.hud__label, .hud__price-cap { color: rgba(255, 255, 255, 0.72); }
.hud__headline { color: #fff; }
.hud__price { border-left-color: rgba(255, 255, 255, 0.18); }
.hud__price-num { color: var(--green); }
@media (max-width: 480px) { .hud__price { border-top-color: rgba(255, 255, 255, 0.18); } }
@keyframes hud-pin-glow {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(31, 224, 140, 0.9)) drop-shadow(0 0 2px rgba(31, 224, 140, 0.9)); opacity: 1; }
  50%      { filter: drop-shadow(0 0 2px rgba(31, 224, 140, 0.35)); opacity: 0.75; }
}
.hud__icon svg { stroke: var(--green); animation: hud-pin-glow 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hud__icon svg { animation: none; filter: drop-shadow(0 0 6px rgba(31, 224, 140, 0.8)); }
}

/* ---------- ticker: green band, scrolls on every screen size ----------
   site.css stops the marquee and wraps the items under 480px; the phone
   gets the same moving strip as everyone else now. */
.ticker { background: var(--green); border-top: 0; border-bottom: 0; padding: 12px 0; }
.ticker__item { color: rgba(0, 0, 0, 0.62); }
.ticker__item b { color: #000; }
@media (max-width: 480px) {
  .ticker { white-space: nowrap; padding: 12px 0; }
  .ticker__track { animation: ticker-scroll 38s linear infinite; will-change: transform; display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; row-gap: 0; }
  .ticker__item { padding: 0 14px; }
  .ticker__item:nth-child(n+12) { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- 26. VEHICLE PICKER (quote builder) · image-only cards ----------
   Ten transparent line-art drawings on white cards. No names, no class
   chips (Julio, 2026-10-24): hover outlines black, the pick outlines green. */
.wiz-bodies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wiz-body { position: relative; cursor: pointer; display: block; }
.wiz-body input { position: absolute; opacity: 0; }
.wiz-body__card {
  position: relative; isolation: isolate; display: block; height: 100%; padding: 8px 10px;
  background: var(--line);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: background-color var(--move);
}
.wiz-body__card::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: #fff;
  clip-path: polygon(13.6px 0, 100% 0, 100% calc(100% - 13.6px), calc(100% - 13.6px) 100%, 0 100%, 0 13.6px);
}
.wiz-body__card > * { position: relative; z-index: 1; }
.wiz-body:hover .wiz-body__card { background: #000; }
.wiz-body input:checked + .wiz-body__card { background: var(--green); }
.wiz-body input:checked + .wiz-body__card::before { inset: 2px; }
.wiz-body input:focus-visible + .wiz-body__card { outline: 2px solid var(--green); outline-offset: 3px; }
.wiz-body__art { display: block; width: 100%; height: auto; aspect-ratio: 560 / 376; object-fit: contain; transition: transform var(--move); }
.wiz-body:hover .wiz-body__art, .wiz-body input:checked + .wiz-body__card .wiz-body__art { transform: scale(1.05); }
@media (min-width: 1024px) { .wiz-bodies { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 560px) { .wiz-bodies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ---------- 27. BUILDER FLOW · the next decision pulses once ---------- */
@keyframes flow-pulse {
  0%   { color: var(--green-deep); }
  60%  { color: var(--green-deep); }
  100% { color: #000; }
}
.wiz__fs.is-flow > .wiz__legend { animation: flow-pulse 1.4s ease-out both; }
.wiz__fs.is-flow > .wiz__legend::after {
  content: ""; display: block; height: 3px; width: 0; margin-top: 6px; background: var(--green);
  animation: flow-underline 1.4s ease-out both;
}
@keyframes flow-underline { 0% { width: 0; } 40% { width: 64px; } 100% { width: 64px; opacity: 0; } }
.wiz-addon.is-flow .wiz-addon__name { color: var(--green-deep); transition: color 0.6s ease 0.8s; }
.wiz__nav.is-flow .btn--signal { --edge: var(--green); --fill: var(--green); --ink: #000; }
@media (prefers-reduced-motion: reduce) {
  .wiz__fs.is-flow > .wiz__legend, .wiz__fs.is-flow > .wiz__legend::after { animation: none; }
}

/* ---------- 28. LAUNCH AUDIT (2026-10-24) · fixes from the phone walk ---------- */
/* "Pay for the year" inside the white maintenance card: site.css styles .plan .math
   for a dark card (white 5% wash, cyan label), unreadable on the v2 white body. */
.plan .math { background: #F3F3F3; border-color: #000; }
.plan .math__label, .plan .math__body .save { color: var(--green-deep); }
.plan .math__body { color: #3D3D3D; }
.plan .math__body strong { color: #000; }
/* FAQ on a white band (memberships): section 15 only styled the dark bands,
   so the questions were white on white. */
.section--light .faq { border-top-color: var(--line); }
.section--light .faq__item { border-bottom-color: var(--line); }
.section--light .faq__q { color: #000; }
.section--light .faq__q::after { color: var(--green-deep); }
.section--light .faq__a { color: #3D3D3D; }
/* Footer: the ghost wordmark rises about 0.8em above the bottom edge, which on
   phones put it under the phone number. On the quote page the fixed estimate
   bar covered the footer entirely. */
@media (max-width: 1023px) { .footer { padding-bottom: max(44px, 20vw); } }
@media (max-width: 860px) { .footer--wiz { padding-bottom: calc(max(44px, 20vw) + 118px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- 29. REVIEW ROUND (2026-10-24) · eyebrow, ghost words ---------- */
/* Hero eyebrow: the glowing dot and the words, no chip around them (Julio). */
.hero__eyebrow {
  height: auto; padding: 0; background: transparent; clip-path: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.hero__eyebrow::before { content: none; }
/* Ghost words: under desktop width they are a band of hatching, not a word. */
@media (max-width: 1023px) { .ghost { display: none; } }

/* ---------- 30. 45° EVERYWHERE (2026-10-24) · chip slant matches the corner cuts ----------
   The slanted edge is 45° only when --slant equals the element's height.
   Chips are 24px (the root token), badges 26px, the builder pills 40px.
   Right or left padding grows with the slant so the label clears the cut. */
.chip, .reel__tag, .book-cta__eyebrow, .eyebrow, .menu__kicker, .svc-cat__eyebrow {
  --slant: 24px; padding-right: 20px;
}
.plan__badge, .plan--qualify .plan__badge, .wiz-tier__badge, .flagship__badge,
.tile__badge, .tile__badge--qualify, .tile__badge--maintain {
  --slant: 26px;
}
.plan__badge, .plan--qualify .plan__badge, .wiz-tier__badge, .flagship__badge { padding-left: 24px; }
/* the badge sits in the tile's cut top-left corner (22px at 45°): 16px of left padding
   keeps the 5px dot clear of the diagonal, 10px left its edge nicked */
.tile__badge, .tile__badge--qualify, .tile__badge--maintain { padding-right: 20px; padding-left: 16px; }
/* builder option pills are 36 to 40px tall: a full-height 45° slant would eat 40px and
   crowd the label (it clipped "No thanks"), so they take the button corner cut instead */
.wiz-pill span, .wiz-pills--sm .wiz-pill span {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.wiz-pill span { padding: 0 18px; }
.wiz-pills--sm .wiz-pill span { padding: 0 16px; }

/* ---------- 31. "from" leads the price (Julio, 2026-10-24) ---------- */
/* site.css already lays the row out flex, baseline, 6px gap; the lead label needs nothing more */
.plan__per--lead { margin: 0; }

/* ---------- 32. MAINTENANCE RHYTHMS (2026-10-24) · three plan cards ---------- */
.maint-grid--three { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 1024px) { .maint-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ---------- 33. PHOTOS IN THE BUILDER (2026-10-24) ---------- */
.wiz-input--file { padding: 10px 12px; font-family: var(--font-body); font-size: 14px; cursor: pointer; }
.wiz-input--file::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid #000; background: #000; color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.wiz-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wiz-photos:empty { display: none; }
.wiz-photos img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); background: #F3F3F3; }

/* ---------- 34. CONTRAST FIXES (2026-10-25, pricing-oct-2026-coatings) ----------
   Found by the WCAG pass in the brief's checklist. All three predate the branch. */
/* inner-page hero markers: the "02" and "·" were black on the black hero */
.page-hero .marker__num { color: #fff; }
/* add-on description cards on dark bands read #3D3D3D on black (1.9:1) */
.section--dark :not(.info-card) > .info-card__desc { color: rgba(255, 255, 255, 0.82); }
/* builder progress rail: inactive step numbers were #8A8A8A on white (3.5:1) */
.wiz__prog-num { color: #6B6B6B; }
.wiz__prog.is-active .wiz__prog-num, .wiz__prog.is-done .wiz__prog-num { color: inherit; }