/* ==========================================================================
   SITES/EBIKE.CSS - coride e-bike fleet page styling
   All selectors must be scoped with .site-ebike

   Generated from marine.css by rescoping (.site-marine -> .site-ebike) and
   substituting the palette, per the one-stylesheet-per-site rule in
   docs/STRUCTURE.md. The transformation is purely mechanical:

     .site-marine            -> .site-ebike
     rgba(0, 75, 255, a)     -> rgba(162, 28, 175, a)      accent at alpha
     #004bff / --royal-blue  -> var(--ebike-accent)
     --blue-gradient-end     -> var(--ebike-accent-2)
     #f7f9fc                 -> var(--ebike-page)
     #eef2f8 / --light-blue  -> var(--ebike-tint)
     rgba(1, 9, 43, a<=0.2)  -> rgba(38, 8, 48, a)         structural hairlines
     rgba(1, 9, 43, a>0.2)   -> unchanged                  that is text ink
     #0039c4                 -> var(--ebike-accent-2)      solid-button hover
     #0b3ce8 / #12279c       -> #c33ad8 / #5c0f73          close-card gradient
     #c1ccff                 -> #e2d3f2                    pale tint

   Those last four are hardcoded marine blues rather than tokens, so the first
   pass missed them and two were visible defects: the primary button hovered
   blue, and the closing card's gradient ran blue -> violet -> navy. The
   gradient stops are now a lighter and a darker shade of this page's own accent,
   which is how camper.css handles the same rule.
     rgba(30,211,202) / rgba(91,196,250) -> accent tints

   The palette is electric violet on a violet-tinged off-white. Three reasons,
   in docs/concepts/ebike-fleet.md section 3, most load-bearing first:

   1. The accent must not compete with an alert colour, and this page is about
      alerts — its dashboard shots are full of red and amber rows by design. The
      product reserves #d91e18, #eb9532 and #2abf2a for status, which rules out
      every warm accent including camper's terracotta before taste gets a say.
   2. #a21caf sits at hue ~296 degrees, against marine's 211 and camper's 14 —
      inside the one wide arc neither of them occupies, so no page reads as a
      variant of another.
   3. Blue product screens on a violet-tinged ground separate by hue rather than
      by camper's temperature contrast, so the screens still read as *the
      product* and the page still reads as the page.

   Contrast: #a21caf on white is 6.3:1, on #f8f6fb 5.8:1 — AA for body text and
   for white text on the solid button.

   `ink` stays #01092B so the family resemblance holds at the one moment the
   page goes dark.

   KNOWN DEBT, now 3x: this duplicates the whole band system for a third time.
   camper-fleet.md section 3 called this page the moment to lift those rules
   into a shared bands.css. It was deliberately NOT done here, because it means
   editing two live industries' stylesheets to ship a third — the one thing
   docs/STRUCTURE.md says adding an industry must never require. It is recorded
   as the next refactor, to be done on its own against all three pages at once.
   ========================================================================== */

.site-ebike {
  --ebike-accent: #a21caf;
  --ebike-accent-2: #7c1489;
  --ebike-page: #f8f6fb;
  --ebike-paper: #ffffff;
  --ebike-tint: #efeaf7;
}

.site-ebike {
  --bg: var(--ebike-page);
  --bg-alt: var(--ebike-tint);
  --ink: var(--midnight-blue);
  --ink-soft: rgba(1, 9, 43, 0.65);
  --accent: var(--ebike-accent);
  --accent-2: var(--ebike-accent-2);

  position: relative;
  overflow-x: hidden;
  background: var(--bg);
}
.site-ebike .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
}
/* The frosted bar lives on a pseudo-element so it can fade in: backdrop-filter
   does not animate out of `none`, and a tint the colour of the page (#f8f6fb)
   would be invisible against it. Sitting behind the nav's own content, it
   blurs the page scrolling underneath and lifts the header off it. */
.site-ebike .nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(254, 253, 255, 0.74);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(38, 8, 48, 0.07);
  box-shadow: 0 10px 30px rgba(38, 8, 48, 0.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.site-ebike .nav--scrolled::before {
  opacity: 1;
}
@supports 
  not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-ebike .nav::before {
    background: rgba(254, 253, 255, 0.96);
  }
}
.site-ebike .nav__link {
  position: relative;
  padding: 6px 0;
  transition: color 200ms ease;
}
.site-ebike .nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 250ms ease, transform 250ms ease;
}
.site-ebike .nav__link:hover::after {
  opacity: 0.6;
  transform: scaleX(1);
}
.site-ebike .nav__link--cta {
  padding: 8px 12px;
  /* Wins over the .site-ebike .nav__link ink colour further down the file. */
  color: var(--text-on-primary-color);
}
.site-ebike .nav__logo-wordmark {
  height: 42px;
  width: auto;
  display: block;
}
.site-ebike .nav__product-badge {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(162, 28, 175, 0.1);
  border: 1px solid rgba(162, 28, 175, 0.25);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
/* =========================
   HERO – Calm Ambient Mesh
   ========================= */
/* Base gradient layer */
/* Interactive cursor glow */
/* Smooth ambient drift animation */
/* Reduce motion */
/* Parallax transition zone - content scrolls over hero */
.site-ebike main {
  position: relative;
}
.site-ebike .section, .site-ebike .logo-banner {
  position: relative;
  z-index: 2;
}
/* Mobile breakpoints for hero */
@media (max-width: 900px) {
  .site-ebike .nav {
    height: auto;
    min-height: 58px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .site-ebike .nav__brand {
    gap: 10px;
    flex-shrink: 0;
  }
  .site-ebike .nav__logo-wordmark {
    height: 34px;
  }
  .site-ebike .nav__links {
    width: auto;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .site-ebike .nav__link--section, .site-ebike .nav__link--login {
    display: none;
  }
  .site-ebike .nav__link--cta {
    width: auto;
    padding: 6px 12px;
    font-size: 0.84rem;
  }
  .site-ebike .lang-selector__select {
    min-height: 32px;
    min-width: 64px;
    font-size: 0.74rem;
  }
  .site-ebike--pricing .pricing-hero {
    padding-top: 122px;
  }
}
@media (max-width: 640px) {
  .site-ebike .nav {
    min-height: 52px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .site-ebike .nav__logo-wordmark {
    height: 30px;
  }
  .site-ebike .nav__product-badge {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 2px 8px;
  }
  .site-ebike .nav__link--pricing {
    display: none;
  }
  .site-ebike--pricing .pricing-hero {
    padding-top: 104px;
  }
}
.site-ebike p {
  line-height: 1.65;
}
/* =========================
   BUTTONS
   ========================= */
.site-ebike .button--cta {
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(162, 28, 175, 0.3);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.site-ebike .button--cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(162, 28, 175, 0.4);
}
.site-ebike .button--primary {
  background: rgba(162, 28, 175, 0.12);
  color: var(--accent);
  border: 1px solid rgba(162, 28, 175, 0.3);
  box-shadow: 0 8px 20px rgba(162, 28, 175, 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.site-ebike .button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(162, 28, 175, 0.18);
}
.site-ebike .button--ghost {
  border-color: rgba(38, 8, 48, 0.18);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
}
/* Meta cards */
.site-ebike .meta-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(38, 8, 48, 0.12);
  color: var(--ink-soft);
}
/* Image placeholders */
/* Remove background from hero mockup */
/* Typography colors */
.site-ebike .nav__link:not(.nav__link--cta),
.site-ebike .section p,
.site-ebike .footer p,
.site-ebike .footer__links,
.site-ebike .meta-card {
  color: var(--ink-soft);
}
.site-ebike h1, .site-ebike h2, .site-ebike h3 {
  color: var(--ink);
}
.site-ebike .eyebrow {
  color: var(--accent-2);
}
/* Section styles */
.site-ebike .section {
  padding: 120px 6vw;
  position: relative;
  background: var(--bg);
}
.site-ebike .section__heading {
  max-width: 680px;
  margin-bottom: 56px;
}
.site-ebike .section__heading h2 {
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.site-ebike .section__heading p {
  font-size: 1.05rem;
  line-height: 1.6;
}
/* LogoBanner backdrop for hero transition */
.site-ebike .logo-banner {
  background: var(--bg);
  position: relative;
  padding: 60px 6vw;
}
/* CTA styles */
/* Workflow styles */
/* Revenue styles */
/* Hardware / Connectivity Section */
/* Responsive adjustments */
/* Footer styles */
.site-ebike .footer {
  background: var(--ebike-tint);
  border-top-color: rgba(38, 8, 48, 0.1);
}
/* =========================
   CASE STUDIES
   ========================= */
/* Responsive */
/* =========================
   Max-width container
   Backgrounds/borders remain full-width, content is constrained
   ========================= */
/* Logo banner content max-width */
.site-ebike .logo-banner__container {
  max-width: 1400px;
}
/* Constrain section content while keeping backgrounds full-width */
.site-ebike .section > .section__heading {
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
}
.site-ebike .section--split > div {
  width: 100%;
}
/* Tab section: controls & content constrained */
/* Case-studies section: heading constrained, cards overflow but start within bounds */
/* Cards container can overflow, but wrapper provides the constraint context */
/* Case studies scroll starts within bounds (first card has 6vw margin which aligns with heading) */
/* Footer separator stays full-width */
.site-ebike .footer {
  position: relative;
  z-index: 2;
}
/* ── Language Selector (marine overrides) ────────────────────── */
.site-ebike .lang-selector__select {
  min-height: 34px;
  min-width: 70px;
  padding: 0 26px 0 10px;
  border-color: rgba(38, 8, 48, 0.2);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.76rem;
}
.site-ebike .lang-selector__select:hover {
  background: rgba(38, 8, 48, 0.06);
  border-color: var(--accent);
}
/* ==========================================================================
   MARINE LANDING — REV A VISUAL SYSTEM
   Hairlines carry structure. Elevation is reserved for product screens.
   One accent, used only on actions. Two radii. One vertical rhythm.
   ========================================================================== */

.site-ebike {
  --page: var(--ebike-page);
  --paper: #ffffff;
  --ink-2: rgba(1, 9, 43, 0.68);
  --ink-3: rgba(1, 9, 43, 0.56);
  --hairline: rgba(38, 8, 48, 0.1);
  --hairline-soft: rgba(38, 8, 48, 0.06);
  --r-surface: 10px;
  --r-control: 6px;
  --band-y: 120px;
  --measure: 62ch;

  /* WIDTH SYSTEM — three classes, no exceptions.
     Ground: a band's background + top hairline, full bleed, nothing else.
     Shell:  every read element. One left edge for the whole page, set as
             padding on the band so no child can drift out of alignment.
     Bleed:  imagery only — the hero product screen and the logo marquee. */
  --shell: 1400px;
  --gutter: max(6vw, calc((100% - var(--shell)) / 2));

  background: var(--page);
}

/* ---------- typography ---------- */

.site-ebike .eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.site-ebike .band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: 24ch;
  text-wrap: balance;
  margin: 0;
}

.site-ebike .band__lead {
  margin-top: 14px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ---------- band shell ---------- */

/* Ground is full bleed; the shell is the band's own inline padding, so every
   child inherits one left edge instead of centring itself independently. */
.site-ebike .band {
  padding: var(--band-y) var(--gutter);
  background: var(--page);
  border-top: 1px solid var(--hairline-soft);
  position: relative;
  z-index: 2;
}

.site-ebike .band__head {
  margin-bottom: 52px;
}

/* ---------- buttons: two states, no lift ---------- */

.site-ebike .button {
  border-radius: var(--r-control);
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.site-ebike .button:hover {
  transform: none;
}

.site-ebike .button--solid {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}

.site-ebike .button--solid:hover {
  background: var(--ebike-accent-2);
  border-color: var(--ebike-accent-2);
}

.site-ebike .button--link {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  box-shadow: none;
  border-bottom: 1px solid transparent;
}

.site-ebike .button--link:hover {
  border-bottom-color: var(--accent);
}

.site-ebike .button--on-ink.button--solid {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.site-ebike .button--on-ink.button--solid:hover {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.86);
}

.site-ebike .button--on-ink.button--link {
  color: #fff;
}

.site-ebike .button--on-ink.button--link:hover {
  border-bottom-color: #fff;
}

.site-ebike a:focus-visible,
.site-ebike .button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-ebike .band--ink a:focus-visible {
  outline-color: #fff;
}

/* ---------- nav ---------- */

.site-ebike .nav__link--page {
  position: relative;
  padding: 6px 0;
}

.site-ebike .nav__link--current {
  color: var(--ink);
  font-weight: 600;
}

.site-ebike .nav__link--current::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ---------- hero ---------- */

.site-ebike .mhero {
  position: relative;
  overflow: hidden;
  background: var(--page);
  padding: calc(var(--nav-height, 72px) + 72px) var(--gutter) 96px;
}

.site-ebike .mhero__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
  opacity: 0.07;
  pointer-events: none;
}

.site-ebike .mhero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}

.site-ebike .mhero__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}

.site-ebike .mhero__lead {
  margin-top: 20px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}

.site-ebike .mhero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.site-ebike .mhero__microcopy {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.site-ebike .chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-soft);
}

.site-ebike .chip {
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  padding: 6px 11px;
}

.site-ebike .mhero__visual {
  min-width: 0;
}

/* ---------- 03 · three pieces ---------- */

.site-ebike .pieces {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper);
  overflow: hidden;
}

.site-ebike .piece {
  padding: 30px 28px 34px;
  border-left: 1px solid var(--hairline-soft);
}

.site-ebike .piece:first-child {
  border-left: 0;
}

.site-ebike .piece__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  color: var(--accent);
  margin-bottom: 20px;
}

.site-ebike .piece__icon svg {
  width: 20px;
  height: 20px;
}

.site-ebike .piece__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.site-ebike .piece__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.32;
  letter-spacing: -0.004em;
  color: var(--ink);
  margin-bottom: 10px;
}

.site-ebike .piece__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.site-ebike .pieces__note {
  margin-top: 26px;
  font-size: 1rem;
  color: var(--ink);
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}

/* ---------- 04 · capability rows ---------- */

.site-ebike .caps {
  display: grid;
}

.site-ebike .cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--hairline-soft);
}

.site-ebike .cap:first-child {
  border-top: 0;
  padding-top: 0;
}

.site-ebike .cap--flip .cap__copy {
  order: 2;
}

.site-ebike .cap--feature {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr);
}

.site-ebike .cap__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.site-ebike .cap__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
}

.site-ebike .cap--feature .cap__title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.site-ebike .cap__body {
  margin-top: 14px;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 52ch;
}

.site-ebike .cap__list {
  list-style: none;
  display: grid;
  gap: 9px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-soft);
}

.site-ebike .cap__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.site-ebike .cap__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 1px;
  background: var(--ink-3);
}

.site-ebike .cap__visual {
  min-width: 0;
}

.site-ebike .caps__closer {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 1rem;
  color: var(--ink-2);
}

/* ---------- 05 / 08 · strips ---------- */

.site-ebike .band--strip {
  padding-top: 44px;
  padding-bottom: 44px;
}

.site-ebike .strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 24px 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper);
}

.site-ebike .strip--quiet {
  background: transparent;
  border-style: dashed;
}

.site-ebike .strip .eyebrow {
  margin-bottom: 8px;
}

.site-ebike .strip__copy {
  min-width: 0;
}

.site-ebike .strip__text {
  font-size: 0.98rem;
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 74ch;
}

.site-ebike .strip__text strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- 06 · evidence ---------- */

.site-ebike .stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper);
  overflow: hidden;
}

.site-ebike .stat {
  padding: 28px 26px;
  border-left: 1px solid var(--hairline-soft);
}

.site-ebike .stat:first-child {
  border-left: 0;
}

.site-ebike .stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.site-ebike .stat__label {
  margin: 10px 0 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}

.site-ebike .stat__source {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.site-ebike .quote {
  margin-top: 40px;
  max-width: 40ch;
}

.site-ebike .quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.site-ebike .quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-ebike .cases__heading {
  margin-top: 64px;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-ebike .cases {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper);
  overflow: hidden;
}

/* Two cases would otherwise sit in a three-column grid and leave a dead
   column. /marine ships three, /marine/fleet ships two. */
.site-ebike .cases:has(> :last-child:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-ebike .evcase {
  padding: 26px;
  border-left: 1px solid var(--hairline-soft);
}

.site-ebike .evcase:first-child {
  border-left: 0;
}

.site-ebike .evcase__logo {
  height: 26px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 20px;
  filter: grayscale(1);
  opacity: 0.62;
}

.site-ebike .evcase__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.004em;
  color: var(--ink);
}

.site-ebike .evcase__meta {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--ink-3);
}

.site-ebike .evcase__result {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* A photograph, not a mockup. Held to a centred column rather than bled full
   width: the source is 4:3, and the proof here is legibility — the reader has
   to be able to make out the fleet map on the wall screens, so it is never
   cropped to a letterbox. */
.site-ebike .evphoto {
  margin: 8px auto 0;
  max-width: 900px;
}

.site-ebike .evphoto__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
}

.site-ebike .evphoto__caption {
  margin-top: 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

/* /marine/fleet ships no casesHeading, so the case grid would otherwise butt
   straight up against the caption. */
.site-ebike .evphoto + .cases {
  margin-top: 48px;
}

/* ---------- 07 · the offer (the page's one inverted band) ---------- */

.site-ebike .band--ink {
  background: var(--ink);
  border-top-color: transparent;
}

.site-ebike .band--ink h2,
.site-ebike .band--ink .offer__label,
.site-ebike .band--ink .offer__value {
  color: #fff;
}

.site-ebike .band--ink .band__lead {
  color: rgba(254, 253, 255, 0.74);
}

.site-ebike .band--ink .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}

.site-ebike .offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.site-ebike .offer__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.site-ebike .offer__lines {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.site-ebike .offer__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.site-ebike .offer__label {
  font-size: 0.98rem;
  line-height: 1.4;
}

.site-ebike .offer__hint {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.site-ebike .offer__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.site-ebike .offer__note {
  margin-top: 20px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  max-width: 54ch;
}

/* ---------- 09 · close ---------- */

.site-ebike .band--close {
  padding-bottom: calc(var(--band-y) + 16px);
}

.site-ebike .close__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.site-ebike .close__microcopy {
  margin-top: 18px;
  font-size: 0.8rem;
  color: var(--ink-3);
}

/* ---------- logo strip: one row, normalised ---------- */

.site-ebike .logo-banner {
  background: var(--page);
  padding: 44px 6vw;
  border-top: 1px solid var(--hairline-soft);
}

.site-ebike .logo-banner__image {
  max-height: 26px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .site-ebike .mhero__inner,
  .site-ebike .cap,
  .site-ebike .cap--feature,
  .site-ebike .offer {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .site-ebike .cap--flip .cap__copy {
    order: 0;
  }

  .site-ebike .mhero__title,
  .site-ebike .cap__title {
    max-width: 24ch;
  }
}

@media (max-width: 900px) {
  .site-ebike {
    --band-y: 72px;
  }

  .site-ebike .mhero {
    padding-top: calc(var(--nav-height, 58px) + 48px);
    padding-bottom: 64px;
  }

  .site-ebike .band__head {
    margin-bottom: 36px;
  }

  .site-ebike .pieces,
  .site-ebike .stats,
  .site-ebike .cases {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-ebike .piece,
  .site-ebike .stat,
  .site-ebike .evcase {
    border-left: 0;
    border-top: 1px solid var(--hairline-soft);
  }

  .site-ebike .piece:first-child,
  .site-ebike .stat:first-child,
  .site-ebike .evcase:first-child {
    border-top: 0;
  }

  .site-ebike .cap {
    padding: 40px 0;
    gap: 28px;
  }

  .site-ebike .strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-ebike .offer__value {
    font-size: 1.25rem;
  }
}

@media (max-width: 620px) {
  .site-ebike .mhero__actions,
  .site-ebike .offer__actions,
  .site-ebike .close__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .site-ebike .mhero__actions .button--solid,
  .site-ebike .offer__actions .button--solid,
  .site-ebike .close__actions .button--solid {
    justify-content: center;
  }

  .site-ebike .mhero__actions .button--link,
  .site-ebike .offer__actions .button--link,
  .site-ebike .close__actions .button--link {
    align-self: flex-start;
  }

  .site-ebike .offer__line {
    flex-direction: column;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-ebike * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   REV A — REVIEW FIXES (rendered at 1440 / 900 / 390)
   ========================================================================== */

/* BLEED — the hero product screen. It starts on the shell's grid column and
   runs off the right edge of the viewport, so the dashboard reads at full size
   and is obviously a crop of something larger rather than a shrunken whole.
   `.mhero` clips it, so the page never scrolls sideways. */
.site-ebike .mhero__visual {
  min-width: 0;
}

/* Logo strip: legible, not decorative. Title joins the eyebrow system. */
.site-ebike .logo-banner__image {
  opacity: 0.7;
}

/* BLEED — the marquee track runs edge to edge, because a row of logos that
   stops at an arbitrary line reads as broken. Its title stays on the shell. */
.site-ebike .logo-banner {
  padding-inline: 0;
}

.site-ebike .logo-banner__container {
  max-width: none;
  margin-inline: 0;
}

.site-ebike .logo-banner__title {
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-3);
  margin-bottom: 26px;
}

/* Keep the aside links on one line at desktop widths. */
.site-ebike .strip__text {
  max-width: 64ch;
}

/* Mobile nav: keep one action. Page links get the same treatment the section
   anchors already had, so nothing wraps to a second line. */
@media (max-width: 900px) {
  .site-ebike .nav__link--page {
    display: none;
  }

  .site-ebike .nav__link--cta {
    white-space: nowrap;
  }
}

/* Named customers are proof, not decoration — let their marks read. */
.site-ebike .evcase__logo {
  opacity: 0.8;
}

/* ==========================================================================
   WIDTH SYSTEM — responsive behaviour of the bleed
   ========================================================================== */

/* Stacked layouts keep the hero bleed. Sized off the column rather than the
   viewport so the crop stays decisive — roughly 90–170px past the edge — at
   every width instead of accidentally fitting at some of them. The rule now
   lives with the other `.slot` rules, since both marine heroes render a real
   product capture rather than the old `.md` mockup. */

/* ==========================================================================
   REV B — GRADIENT HERO, GROUND LAYERING, CAPABILITY TABS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Ambient gradient behind the hero, restored. The gradient carries the
   colour; the chart contours sit on top of it and keep the wash specific to
   harbours rather than generic SaaS.
   -------------------------------------------------------------------------- */

.site-ebike .mhero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      900px circle at 20% 30%,
      rgba(162, 28, 175, 0.25),
      transparent 70%
    ),
    radial-gradient(
    800px circle at 80% 60%,
    rgba(124, 20, 137, 0.2),
    transparent 70%
  ),
    radial-gradient(
    1000px circle at 40% 80%,
    rgba(162, 28, 175, 0.18),
    transparent 70%
  );
  filter: blur(120px);
  animation: drift 28s ease-in-out infinite alternate;
}

@keyframes drift {
  0% {
    transform: translate3d(-2%, -2%, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, 1%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(-1%, 2%, 0) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-ebike .mhero::before {
    animation: none;
  }
}

/* Contours read as linework over the wash, not as a second ambient layer. */
.site-ebike .mhero__chart {
  opacity: 0.055;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   6 · Ground layering. Three neutrals plus ink, assigned by role:
       page  — reading ground
       paper — the brighter ground reading bands alternate onto
       tint  — asides (the two forks), so they read as set apart
       ink   — the offer, the page's one anchor
   Adjacent bands never share a ground, so the tone step separates them and no
   dividing rule is needed. The hairline only survives as a fallback.
   -------------------------------------------------------------------------- */

.site-ebike {
  --ground-page: var(--ebike-page);
  --ground-paper: #ffffff;
  --ground-tint: var(--ebike-tint);
}

.site-ebike .band {
  border-top: 0;
}

.site-ebike .band--page {
  background: var(--ground-page);
}

.site-ebike .band--paper {
  background: var(--ground-paper);
}

.site-ebike .band--tint {
  background: var(--ground-tint);
}

.site-ebike .band--ink {
  background: var(--ink);
}

/* Panels need to stay distinct from whatever they sit on, so on the paper
   ground they pick up the page tone instead of disappearing into white. */
.site-ebike .band--paper .pieces,
.site-ebike .band--paper .stats,
.site-ebike .band--paper .cases,
.site-ebike .band--paper .strip {
  background: var(--ground-page);
}

.site-ebike .band--tint .strip {
  background: var(--ground-paper);
}

.site-ebike .band--tint .strip--quiet {
  background: transparent;
}

/* The trust strip is the bright shelf directly under the hero. */
.site-ebike .logo-banner {
  background: var(--ground-paper);
}

/* --------------------------------------------------------------------------
   4 · Three pieces, now carrying the product photography that used to sit in
   the commercial-model section.
   -------------------------------------------------------------------------- */

.site-ebike .piece {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Fixed height rather than aspect-ratio: the three source images have very
   different intrinsic proportions and were stretching their own boxes, which
   pushed the copy in each card out of alignment. */
.site-ebike .piece__media {
  height: 200px;
  display: block;
  padding: 22px;
  background: linear-gradient(
    180deg,
    rgba(38, 8, 48, 0.03),
    rgba(38, 8, 48, 0.01)
  );
  border-bottom: 1px solid var(--hairline-soft);
}

/* The parent has a definite height, so `height: 100%` + contain letterboxes
   each image inside it regardless of its intrinsic proportions. */
.site-ebike .piece__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.site-ebike .piece__copy {
  padding: 26px 28px 32px;
}

/* --------------------------------------------------------------------------
   5 · Capability tabs. Pure CSS: one radio per panel, the label row drives it.
   -------------------------------------------------------------------------- */

.site-ebike .caps__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-ebike .caps__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-ebike .caps__tabs::-webkit-scrollbar {
  display: none;
}

.site-ebike .caps__tab {
  flex: 0 0 auto;
  padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.002em;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}

.site-ebike .caps__tab:hover {
  color: var(--ink);
}

/* Panels are hidden by default; the matching radio reveals one. */
.site-ebike .cap {
  display: none;
}

.site-ebike
  .caps__radio:nth-of-type(1):checked
  ~ .caps__tabs
  .caps__tab:nth-child(1),
.site-ebike
  .caps__radio:nth-of-type(2):checked
  ~ .caps__tabs
  .caps__tab:nth-child(2),
.site-ebike
  .caps__radio:nth-of-type(3):checked
  ~ .caps__tabs
  .caps__tab:nth-child(3),
.site-ebike
  .caps__radio:nth-of-type(4):checked
  ~ .caps__tabs
  .caps__tab:nth-child(4) {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.site-ebike
  .caps__radio:nth-of-type(1):checked
  ~ .caps__panels
  .cap:nth-child(1),
.site-ebike
  .caps__radio:nth-of-type(2):checked
  ~ .caps__panels
  .cap:nth-child(2),
.site-ebike
  .caps__radio:nth-of-type(3):checked
  ~ .caps__panels
  .cap:nth-child(3),
.site-ebike
  .caps__radio:nth-of-type(4):checked
  ~ .caps__panels
  .cap:nth-child(4) {
  display: grid;
}

/* Keyboard focus has to be visible on the label, since the radio is offscreen. */
.site-ebike .caps__radio:focus-visible ~ .caps__tabs .caps__tab {
  outline: none;
}

.site-ebike
  .caps__radio:nth-of-type(1):focus-visible
  ~ .caps__tabs
  .caps__tab:nth-child(1),
.site-ebike
  .caps__radio:nth-of-type(2):focus-visible
  ~ .caps__tabs
  .caps__tab:nth-child(2),
.site-ebike
  .caps__radio:nth-of-type(3):focus-visible
  ~ .caps__tabs
  .caps__tab:nth-child(3),
.site-ebike
  .caps__radio:nth-of-type(4):focus-visible
  ~ .caps__tabs
  .caps__tab:nth-child(4) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tabs removed the per-row alternation, so every panel uses one layout. */
.site-ebike .caps {
  display: block;
}

.site-ebike .cap {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 56px;
  align-items: center;
  padding: 0;
  border-top: 0;
}

@media (max-width: 1080px) {
  .site-ebike .cap {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .site-ebike .caps__tabs {
    margin-bottom: 32px;
  }

  .site-ebike .caps__tab {
    padding: 12px 14px;
    font-size: 0.86rem;
  }
}

@media (max-width: 900px) {
  .site-ebike .pieces {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-ebike .piece {
    border-left: 0;
    border-top: 1px solid var(--hairline-soft);
  }

  .site-ebike .piece:first-child {
    border-top: 0;
  }

  .site-ebike .piece__media {
    height: 180px;
  }
}

/* Below ~620px the four tab labels always overflow, so the row gets a fade to
   show it scrolls. Above that they fit and no affordance is needed. */
@media (max-width: 620px) {
  .site-ebike .caps__tabs {
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }
}

/* ==========================================================================
   CLOSING CARD
   The page's last move. The offer band states the facts in ink; this states
   the next ten minutes in the action colour, so the two read as different
   moments rather than two dark slabs.
   ========================================================================== */

.site-ebike .band--close {
  padding-bottom: calc(var(--band-y) + 8px);
}

.site-ebike .close-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-surface);
  padding: 60px clamp(28px, 4vw, 64px);
  color: #fff;
  background: linear-gradient(
    152deg,
    #c33ad8 0%,
    var(--accent) 42%,
    #5c0f73 100%
  );
}

.site-ebike .close-card__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  opacity: 0.16;
  pointer-events: none;
}

.site-ebike .close-card__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.site-ebike .close-card .eyebrow {
  color: rgba(255, 255, 255, 0.62);
}

.site-ebike .close-card h2 {
  color: #fff;
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.014em;
  max-width: 20ch;
}

.site-ebike .close-card__lead {
  margin-top: 18px;
  font-size: 1.04rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
}

.site-ebike .close__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.site-ebike .button--lg {
  padding: 16px 30px;
  font-size: 1.02rem;
}

/* Risk removal, stated as flatly as possible. */
/* Two columns rather than a wrapping row, so four items never break 3 + 1. */
.site-ebike .assurances {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.site-ebike .assurances li {
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.86);
}

.site-ebike .assurances li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.9);
  transform: rotate(-45deg);
}

/* A real sequence, so it is the one numbered thing on the page. */
.site-ebike .close-steps {
  list-style: none;
  display: grid;
  gap: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-surface);
  overflow: hidden;
}

.site-ebike .close-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 16px;
  padding: 22px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.site-ebike .close-step:first-child {
  border-top: 0;
}

.site-ebike .close-step__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.site-ebike .close-step__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.004em;
  color: #fff;
}

.site-ebike .close-step__body {
  margin-top: 6px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
}

.site-ebike .close__microcopy {
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--ink-3);
}

@media (max-width: 1080px) {
  .site-ebike .close-card__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-ebike .close-card {
    padding: 44px clamp(22px, 5vw, 40px);
  }
}

@media (max-width: 620px) {
  .site-ebike .close__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .site-ebike .close__actions .button--lg {
    justify-content: center;
  }

  .site-ebike .close__actions .button--link {
    align-self: flex-start;
  }

  .site-ebike .close-step {
    padding: 18px 18px;
  }
}

@media (max-width: 620px) {
  .site-ebike .assurances {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   CAPABILITY TABS — EQUAL PANEL HEIGHTS
   All four panels share one grid cell, so the container is always as tall as
   the tallest panel and switching tabs never changes the page height. Inactive
   panels use `visibility: hidden`, which also takes them out of the tab order
   and the accessibility tree — `opacity` alone would not.
   ========================================================================== */

.site-ebike .caps__panels {
  display: grid;
  grid-template-areas: "panel";
}

.site-ebike .cap {
  grid-area: panel;
  display: grid;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
}

.site-ebike
  .caps__radio:nth-of-type(1):checked
  ~ .caps__panels
  .cap:nth-child(1),
.site-ebike
  .caps__radio:nth-of-type(2):checked
  ~ .caps__panels
  .cap:nth-child(2),
.site-ebike
  .caps__radio:nth-of-type(3):checked
  ~ .caps__panels
  .cap:nth-child(3),
.site-ebike
  .caps__radio:nth-of-type(4):checked
  ~ .caps__panels
  .cap:nth-child(4) {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .site-ebike .cap {
    transition: none;
  }
}

/* ==========================================================================
   OWNER-APP STACK
   Restores the original arrangement: the person photo smaller and behind on
   the left, the app screenshot larger and on top to the right. No wrapping
   card, so neither image is letterboxed against a white panel.
   ========================================================================== */

.site-ebike .owner-stack {
  position: relative;
  width: min(100%, 420px);
  margin-inline: auto;
  padding-right: 24px;
}

.site-ebike .owner-stack__person {
  position: absolute;
  z-index: 1;
  top: 28px;
  left: -36px;
  width: clamp(200px, 62%, 262px);
  aspect-ratio: 1408 / 3042;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 14px 36px rgba(38, 8, 48, 0.14);
}

/* cover + a matching aspect box means no white letterboxing */
.site-ebike .owner-stack__person img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 46% 4%;
  transform: scale(1.06);
}

.site-ebike .owner-stack__phone {
  position: relative;
  z-index: 2;
  width: clamp(240px, 72%, 296px);
  margin-left: auto;
  transform: translateX(24px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 54px rgba(38, 8, 48, 0.2);
}

.site-ebike .owner-stack__phone img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 620px) {
  .site-ebike .owner-stack {
    padding-right: 12px;
  }

  .site-ebike .owner-stack__person {
    left: -12px;
    width: clamp(150px, 54%, 210px);
  }

  .site-ebike .owner-stack__phone {
    transform: translateX(10px);
  }
}

/* ==========================================================================
   PARTNER CONSOLE (.pc) — alternative hero product screen, design 1a
   Not currently mounted; see components/mockups/PartnerConsole.tsx.
   Light, dense, straight-on. Hairline dividers carry the structure; the
   numbers are the only loud thing. Drawn at the webapp's own density and
   cropped by the hero bleed, so it reads as a crop of something larger
   rather than a shrunken whole.
   ========================================================================== */

.site-ebike .pc,
.site-ebike .pc * {
  font-family:
    "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.site-ebike .pc {
  /* The webapp's own palette, not the landing page's — this is a product
     screen and should look like the product. */
  --pc-paper: #ffffff;
  --pc-ground: var(--ebike-page);
  --pc-border: #e3e8f0;
  --pc-border-2: #dde3ec;
  --pc-fill: #e9edf3;
  --pc-ink: #101425;
  --pc-slate: #708094;
  --pc-accent: var(--ebike-accent);
  --pc-tint: #e1ebff;
  --pc-mint: #1ed3ca;
  --pc-red: #d91e18;
  --pc-orange: #eb9532;
  --pc-green: #2abf2a;
  --pc-gray: #b3b3b3;
  --pc-mono: Menlo, Monaco, Consolas, "Courier New", monospace;

  /* BLEED — never narrower than 1040px, so the internal column proportions
     stay the design's; caps at the design's native 1320px. */
  width: clamp(1040px, 82vw, 1320px);
  max-width: none;
  line-height: 1.4;
}

.site-ebike .pc__screen {
  background: var(--pc-paper);
  border: 1px solid var(--pc-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(38, 8, 48, 0.04),
    0 24px 60px -20px rgba(38, 8, 48, 0.18);
}

.site-ebike .pc__spacer {
  flex: 1;
}

/* ---------- top bar ---------- */

.site-ebike .pc__topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--pc-border);
}

.site-ebike .pc__logo {
  display: block;
  height: 20px;
  width: auto;
  flex: 0 0 auto;
}

.site-ebike .pc__topDivider {
  width: 1px;
  height: 22px;
  background: var(--pc-border);
  flex: 0 0 auto;
}

.site-ebike .pc__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.site-ebike .pc__crumbMuted {
  color: var(--pc-slate);
}

.site-ebike .pc__crumbSep {
  color: var(--pc-border-2);
}

.site-ebike .pc__crumbCurrent {
  font-weight: 600;
  color: var(--pc-ink);
}

.site-ebike .pc__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 236px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--pc-border);
  border-radius: 3px;
  background: var(--pc-ground);
  flex: 0 0 auto;
}

.site-ebike .pc__searchLabel {
  flex: 1;
  font-size: 12px;
  color: var(--pc-slate);
}

.site-ebike .pc__kbd {
  font-family: var(--pc-mono);
  font-size: 10px;
  color: var(--pc-slate);
  border: 1px solid var(--pc-border-2);
  border-radius: 2px;
  padding: 1px 4px;
}

.site-ebike .pc__live {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--pc-border);
  border-radius: 3px;
  flex: 0 0 auto;
}

.site-ebike .pc__liveDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pc-mint);
}

.site-ebike .pc__liveText {
  font-family: var(--pc-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--pc-ink);
}

.site-ebike .pc__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pc-tint);
  color: var(--pc-accent);
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ---------- body ---------- */

.site-ebike .pc__body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
}

/* ---------- sidebar ---------- */

.site-ebike .pc__sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 604px;
  padding: 14px 12px;
  border-right: 1px solid var(--pc-border);
}

.site-ebike .pc__navGroup {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.site-ebike .pc__navItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13.5px;
  color: var(--pc-ink);
}

.site-ebike .pc__navItem--active {
  background: var(--pc-tint);
  color: var(--pc-accent);
  font-weight: 600;
}

.site-ebike .pc__navIcon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--pc-slate);
}

.site-ebike .pc__navItem--active .pc__navIcon {
  color: currentColor;
}

.site-ebike .pc__navLabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-ebike .pc__navCount {
  font-family: var(--pc-mono);
  font-size: 11px;
  color: var(--pc-slate);
}

.site-ebike .pc__navBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pc-red);
  color: #fff;
  font-family: var(--pc-mono);
  font-size: 10px;
  font-weight: 600;
}

.site-ebike .pc__navChevron {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  color: var(--pc-slate);
}

.site-ebike .pc__navRule {
  height: 1px;
  margin: 4px 12px;
  background: var(--pc-border);
}

.site-ebike .pc__tier {
  padding: 12px;
  border: 1px solid var(--pc-border);
  border-radius: 4px;
  background: var(--pc-ground);
}

.site-ebike .pc__tierLabel {
  font-family: var(--pc-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pc-slate);
}

.site-ebike .pc__tierName {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pc-ink);
}

.site-ebike .pc__tierId {
  margin-top: 2px;
  font-family: var(--pc-mono);
  font-size: 11px;
  color: var(--pc-slate);
}

/* ---------- main ---------- */

.site-ebike .pc__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  background: var(--pc-ground);
}

/* ---------- KPI strip: one surface, hairline-divided ---------- */

.site-ebike .pc__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--pc-paper);
  border: 1px solid var(--pc-border);
  border-radius: 6px;
  overflow: hidden;
}

.site-ebike .pc__kpi {
  padding: 16px 18px;
}

.site-ebike .pc__kpi + .pc__kpi {
  border-left: 1px solid var(--pc-border);
}

.site-ebike .pc__kpiLabel {
  font-family: var(--pc-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-slate);
  white-space: nowrap;
}

.site-ebike .pc__kpiRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.site-ebike .pc__kpiValue {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pc-ink);
}

.site-ebike .pc__kpiValue--accent {
  color: var(--pc-accent);
}

.site-ebike .pc__kpiDelta {
  font-family: var(--pc-mono);
  font-size: 11px;
  color: var(--pc-slate);
  white-space: nowrap;
}

.site-ebike .pc__kpiDelta--up {
  color: var(--pc-green);
}

.site-ebike .pc__kpiDelta--warn {
  color: var(--pc-orange);
}

/* ---------- panels ---------- */

.site-ebike .pc__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
  gap: 16px;
}

.site-ebike .pc__panel {
  background: var(--pc-paper);
  border: 1px solid var(--pc-border);
  border-radius: 6px;
  min-width: 0;
}

.site-ebike .pc__panel--chart {
  padding: 18px 20px 14px;
}

.site-ebike .pc__panelHead {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

.site-ebike .pc__panelHead--pipe {
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 18px 14px;
}

.site-ebike .pc__panelTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--pc-ink);
  white-space: nowrap;
}

.site-ebike .pc__panelSub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--pc-slate);
  white-space: nowrap;
}

.site-ebike .pc__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 3px;
}

.site-ebike .pc__legendItem {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-ebike .pc__legendLine {
  width: 14px;
  height: 2px;
  background: var(--pc-accent);
}

.site-ebike .pc__legendLine--dashed {
  height: 0;
  background: none;
  border-top: 1px dashed var(--pc-slate);
}

.site-ebike .pc__legendLabel {
  font-family: var(--pc-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-slate);
  white-space: nowrap;
}

/* MiniButton, per the design system: flat fill, 3px radius, no lift. */
.site-ebike .pc__mini {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--pc-fill);
  color: #575757;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- chart ---------- */

.site-ebike .pc__chart {
  position: relative;
  margin-top: 16px;
}

/* Geometry stretches to the panel; strokes are pinned to device pixels so the
   plot never thickens or shears as the crop width changes. */
.site-ebike .pc__chartSvg {
  display: block;
  width: 100%;
  height: 140px;
}

.site-ebike .pc__chartPoint,
.site-ebike .pc__chartHalo {
  position: absolute;
  left: 98.38%;
  top: 37.2px;
  border-radius: 50%;
  background: var(--pc-accent);
  transform: translate(-50%, -50%);
}

.site-ebike .pc__chartPoint {
  width: 7px;
  height: 7px;
}

.site-ebike .pc__chartHalo {
  width: 13px;
  height: 13px;
  opacity: 0.15;
}

.site-ebike .pc__chartBadge {
  position: absolute;
  right: 0;
  top: 6px;
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--pc-accent);
  color: #fff;
  font-family: var(--pc-mono);
  font-size: 10px;
}

.site-ebike .pc__chartAxis {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  margin-top: 5px;
  font-family: var(--pc-mono);
  font-size: 9.5px;
  color: var(--pc-slate);
}

/* ---------- service pipeline ---------- */

.site-ebike .pc__panel--pipe {
  padding: 18px 0 0;
}

.site-ebike .pc__pipeHead,
.site-ebike .pc__pipeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 78px;
}

.site-ebike .pc__pipeHead {
  padding: 0 18px 6px;
  border-bottom: 1px solid var(--pc-border);
  font-family: var(--pc-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-slate);
}

.site-ebike .pc__pipeHeadRight {
  text-align: right;
}

.site-ebike .pc__pipeRow {
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--pc-border);
}

.site-ebike .pc__pipeVessel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.site-ebike .pc__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.site-ebike .pc__pipeName {
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-ebike .pc__pipeJob {
  font-size: 12px;
  color: var(--pc-slate);
  white-space: nowrap;
}

.site-ebike .pc__pipeStatus {
  text-align: right;
}

/* Tag, per the design system: solid severity fill, white text, 3px radius. */
.site-ebike .pc__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.site-ebike .pc__tag--danger {
  background: var(--pc-red);
}

.site-ebike .pc__tag--warning {
  background: var(--pc-orange);
}

.site-ebike .pc__tag--info {
  background: var(--pc-accent);
}

.site-ebike .pc__tag--gray {
  background: var(--pc-gray);
}

.site-ebike .pc__pipeFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  font-family: var(--pc-mono);
  font-size: 10.5px;
  color: var(--pc-slate);
}

/* ---------- event stream ---------- */

.site-ebike .pc__streamHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--pc-border);
}

.site-ebike .pc__streamDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pc-mint);
  flex: 0 0 auto;
}

.site-ebike .pc__streamLabel {
  font-family: var(--pc-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-slate);
}

.site-ebike .pc__streamMeta {
  font-family: var(--pc-mono);
  font-size: 10.5px;
  color: var(--pc-slate);
  white-space: nowrap;
}

.site-ebike .pc__streamRow {
  display: grid;
  grid-template-columns: 68px 96px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--pc-border);
  font-size: 12.5px;
}

.site-ebike .pc__streamRow:last-child {
  border-bottom: 0;
}

.site-ebike .pc__streamTime {
  font-family: var(--pc-mono);
  font-size: 11px;
  color: var(--pc-slate);
}

.site-ebike .pc__streamKind {
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-family: var(--pc-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-align: center;
}

.site-ebike .pc__streamKind--geo {
  color: var(--pc-accent);
  border-color: #e2d3f2;
  background: #f3f7ff;
}

.site-ebike .pc__streamKind--battery {
  color: #a35c00;
  border-color: #f3ddbe;
  background: #fdf6ec;
}

.site-ebike .pc__streamKind--handover {
  color: #1f7a3a;
  border-color: #cbe8d4;
  background: #eff8f1;
}

.site-ebike .pc__streamText {
  color: var(--pc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-ebike .pc__streamDetail {
  color: var(--pc-slate);
}

.site-ebike .pc__streamId {
  font-family: var(--pc-mono);
  font-size: 10.5px;
  color: var(--pc-slate);
  text-align: right;
}

/* ---------- responsive: the crop stays decisive at every width ---------- */

/* Stacked hero. Sized off the column so the console runs a fixed distance
   past the edge rather than accidentally fitting at some widths. The chart
   takes the full main width here, which suits it better than the crop does. */
@media (max-width: 1080px) {
  .site-ebike .pc {
    width: max(calc(100% + max(120px, 16vw)), 880px);
  }

  .site-ebike .pc__panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: the sidebar would eat the whole visible strip, so drop it and let
   the numbers carry the screen. */
@media (max-width: 620px) {
  .site-ebike .pc {
    width: calc(100% + 80px);
  }

  .site-ebike .pc__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-ebike .pc__sidebar,
  .site-ebike .pc__search,
  .site-ebike .pc__streamId {
    display: none;
  }

  .site-ebike .pc__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-ebike .pc__kpi:nth-child(odd) {
    border-left: 0;
  }

  .site-ebike .pc__kpi:nth-child(n+3) {
    border-top: 1px solid var(--pc-border);
  }

  .site-ebike .pc__streamRow {
    grid-template-columns: 68px 96px minmax(0, 1fr);
  }
}

/* ==========================================================================
   PRICING PAGE — REV B
   Same system as the landing page: one shell edge, hairlines carry structure,
   elevation only on product screens, two radii, one accent used on actions.
   Section grounds alternate page · paper · page · paper · tint · page · tint ·
   paper · page, so no adjacent bands share a tone.
   ========================================================================== */

/* ---------- 01 · price hero ---------- */

/* Left-aligned like every other band head. The mesh gradient stays exclusive
   to the landing hero — people arrive here already interested. */
.site-ebike--pricing .price-hero {
  padding-top: calc(var(--nav-height, 72px) + 78px);
  padding-bottom: 76px;
  border-top: 0;
}

.site-ebike--pricing .price-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
  margin: 0;
}

.site-ebike--pricing .price-hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
}

/* The four selling facts. Were glass pills; now a plain hairline-separated
   row, because they are facts, not controls. */
.site-ebike--pricing .price-facts {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.site-ebike--pricing .price-facts li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.site-ebike--pricing .price-facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.44em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- shared tick list ---------- */

.site-ebike--pricing .ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.site-ebike--pricing .ticks li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.site-ebike--pricing .ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- outline control ---------- */

.site-ebike .button--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}

.site-ebike .button--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- 02 · the two lines on the bill ---------- */

/* One surface, split by a single hairline. No plus bubble, no card in a card —
   the bill genuinely has two lines and nothing more. */
.site-ebike--pricing .bill {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper);
  overflow: hidden;
}

.site-ebike--pricing .bill__line {
  padding: 34px clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--hairline-soft);
}

.site-ebike--pricing .bill__line:first-child {
  border-left: 0;
}

.site-ebike--pricing .bill__kicker {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-ebike--pricing .bill__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: -0.004em;
  color: var(--ink);
}

.site-ebike--pricing .bill__price {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.site-ebike--pricing .bill__price strong {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.site-ebike--pricing .bill__price span {
  font-size: 0.92rem;
  color: var(--ink-3);
}

.site-ebike--pricing .bill__billing {
  margin-top: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* ---------- 03 · plans ---------- */

.site-ebike--pricing .tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.site-ebike--pricing .tier-card {
  display: flex;
  flex-direction: column;
  padding: 28px clamp(20px, 2vw, 28px) 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper);
}

/* The recommendation is carried by one accent hairline, not by elevation. */
.site-ebike--pricing .tier-card--highlight {
  border-color: var(--accent);
}

.site-ebike--pricing .tier-card--disabled {
  background: transparent;
}

.site-ebike--pricing .tier-card--disabled .tier-card__tagline,
.site-ebike--pricing .tier-card--disabled .ticks li {
  color: var(--ink-3);
}

.site-ebike--pricing .tier-card--disabled .ticks li::before {
  border-color: var(--ink-3);
}

.site-ebike--pricing .tier-card--disabled .tier-card__name,
.site-ebike--pricing .tier-card--disabled .tier-card__price strong {
  color: var(--ink-3);
}

.site-ebike--pricing .tier-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}

.site-ebike--pricing .tier-card__name {
  font-family: var(--font-display);
  font-size: 1.24rem;
  letter-spacing: -0.006em;
  color: var(--ink);
}

.site-ebike--pricing .tier-card__badge {
  flex-shrink: 0;
  padding: 4px 9px;
  border: 1px solid var(--accent);
  border-radius: var(--r-control);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.site-ebike--pricing .tier-card__tagline {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-3);
  min-height: 2.7em;
}

.site-ebike--pricing .tier-card__price {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.site-ebike--pricing .tier-card__price strong {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.site-ebike--pricing .tier-card__price span {
  font-size: 0.88rem;
  color: var(--ink-3);
}

.site-ebike--pricing .tier-card__limits {
  margin: 20px 0 0;
  border-top: 1px solid var(--hairline-soft);
}

.site-ebike--pricing .tier-card__limit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.site-ebike--pricing .tier-card__limit dt {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-ebike--pricing .tier-card__limit dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.site-ebike--pricing .tier-card__cta {
  margin-top: 22px;
  justify-content: center;
  text-align: center;
}

.site-ebike--pricing .tier-card__cta--none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-control);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-ebike--pricing .tier-card__features {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-soft);
}

/* Pushes the note to the bottom so all three cards align on their last line. */
.site-ebike--pricing .tier-card__note {
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.site-ebike--pricing .tier-grid__note {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.site-ebike--pricing .tier-enterprise {
  margin-top: 34px;
}

/* ---------- 04 · comparison ---------- */

.site-ebike--pricing .compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper);
}

.site-ebike--pricing .compare {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.site-ebike--pricing .compare thead th {
  padding: 18px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  vertical-align: top;
}

.site-ebike--pricing .compare thead th:first-child {
  text-align: left;
  color: var(--ink-3);
  font-weight: 500;
}

/* The recommended column is marked by a faint field and an accent label —
   no filled block, so the table stays one flat surface. */
.site-ebike--pricing .compare-col--lead {
  background: rgba(162, 28, 175, 0.035);
}

.site-ebike--pricing .compare thead th.compare-col--lead {
  color: var(--accent);
  background: rgba(162, 28, 175, 0.05);
}

.site-ebike--pricing .compare-col--muted {
  color: var(--ink-3);
}

.site-ebike--pricing .compare-col__note {
  display: block;
  margin-top: 5px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-ebike--pricing .compare tbody th[scope="row"] {
  padding: 13px 16px;
  text-align: left;
  font-weight: 400;
  color: var(--ink-2);
  border-top: 1px solid var(--hairline-soft);
}

.site-ebike--pricing .compare tbody td {
  padding: 13px 16px;
  text-align: center;
  border-top: 1px solid var(--hairline-soft);
}

.site-ebike--pricing .compare__group th {
  padding: 22px 16px 8px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--page);
  border-top: 1px solid var(--hairline);
}

/* Bare marks — the filled circles read as buttons. */
.site-ebike--pricing .mark {
  display: inline-flex;
}

.site-ebike--pricing .mark--yes {
  color: var(--accent);
}

.site-ebike--pricing .mark--no {
  color: rgba(1, 9, 43, 0.22);
}

.site-ebike--pricing td.mark--text {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------- 05 · always included ---------- */

/* The tint ground separates this band, so the old rounded blue panel is gone.
   The phone keeps its shadow: it is a product screen, the one exception. */
.site-ebike--pricing .included {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.site-ebike--pricing .included .ticks {
  margin-top: 22px;
}

.site-ebike--pricing .included__label {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.site-ebike--pricing .included__visual {
  display: grid;
  place-items: center;
}

.site-ebike--pricing .included__visual img {
  width: auto;
  max-width: 264px;
  max-height: 540px;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--hairline-soft);
  box-shadow: 0 24px 54px rgba(38, 8, 48, 0.16);
}

/* ---------- 06 · hardware terms ---------- */

.site-ebike--pricing .terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper);
  overflow: hidden;
}

.site-ebike--pricing .term {
  padding: 30px clamp(22px, 2.4vw, 32px);
  border-left: 1px solid var(--hairline-soft);
}

.site-ebike--pricing .term:first-child {
  border-left: 0;
}

.site-ebike--pricing .term__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.site-ebike--pricing .term__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.004em;
  color: var(--ink);
}

.site-ebike--pricing .term__body {
  margin-top: 9px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---------- 08 · FAQ ---------- */

.site-ebike--pricing .faq {
  border-top: 1px solid var(--hairline);
  max-width: 84ch;
}

.site-ebike--pricing .faq__item {
  border-bottom: 1px solid var(--hairline);
}

.site-ebike--pricing .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--ink);
}

.site-ebike--pricing .faq__q::-webkit-details-marker {
  display: none;
}

.site-ebike--pricing .faq__q:hover {
  color: var(--accent);
}

/* A plus drawn in CSS, rotating to a minus — no bubble, no glyph font. */
.site-ebike--pricing .faq__mark {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  transition: transform 220ms ease;
}

.site-ebike--pricing .faq__mark::before,
.site-ebike--pricing .faq__mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 1.5px;
  background: var(--ink-3);
}

.site-ebike--pricing .faq__mark::after {
  transform: rotate(90deg);
  transition: opacity 220ms ease;
}

.site-ebike--pricing .faq__item[open] .faq__mark {
  transform: rotate(180deg);
}

.site-ebike--pricing .faq__item[open] .faq__mark::after {
  opacity: 0;
}

.site-ebike--pricing .faq__item[open] .faq__mark::before {
  background: var(--accent);
}

.site-ebike--pricing .faq__a {
  padding: 0 4px 24px;
  max-width: var(--measure);
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ---------- 09 · close ---------- */

/* Same accent card as the landing page, minus the steps grid, so both pages
   end on one identical action. */
.site-ebike--pricing .close-card--lean {
  padding: clamp(44px, 5vw, 68px) clamp(28px, 4vw, 64px);
}

.site-ebike--pricing .close-card__inner {
  position: relative;
  z-index: 1;
  max-width: 62ch;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .site-ebike--pricing .tier-grid,
  .site-ebike--pricing .terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-ebike--pricing .term:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--hairline-soft);
  }

  .site-ebike--pricing .included {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-ebike--pricing .included__visual {
    order: -1;
    justify-items: start;
  }
}

@media (max-width: 900px) {
  .site-ebike--pricing .price-hero {
    padding-top: calc(var(--nav-height, 58px) + 52px);
    padding-bottom: 52px;
  }

  .site-ebike--pricing .bill,
  .site-ebike--pricing .tier-grid,
  .site-ebike--pricing .terms {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-ebike--pricing .bill__line,
  .site-ebike--pricing .term {
    border-left: 0;
    border-top: 1px solid var(--hairline-soft);
  }

  .site-ebike--pricing .bill__line:first-child,
  .site-ebike--pricing .term:first-child {
    border-top: 0;
  }

  .site-ebike--pricing .tier-card__tagline {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .site-ebike--pricing .price-hero__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .site-ebike--pricing .price-facts {
    flex-direction: column;
    gap: 8px;
  }
}

/* ==========================================================================
   Rental page — bento (long tail) and FAQ. Both live inside the existing
   hairline system: no shadows, no icons, one radius. Loaded on every marine
   page; only /marine/rental currently renders them.
   ========================================================================== */

.site-ebike .bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper);
  overflow: hidden;
}

/* Hairlines come from the tiles themselves so the grid reads as one surface
   with divisions, not as nine floating cards. */
.site-ebike .bento__tile {
  padding: 26px 26px 30px;
  border-left: 1px solid var(--hairline-soft);
  border-top: 1px solid var(--hairline-soft);
}

.site-ebike .bento__tile:nth-child(3n+1) {
  border-left: 0;
}

.site-ebike .bento__tile:nth-child(-n+3) {
  border-top: 0;
}

.site-ebike .bento__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.site-ebike .bento__body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 42ch;
}

/* ---------- FAQ ---------- */

.site-ebike .faq {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.site-ebike .faq__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.site-ebike .faq__q {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 28ch;
}

.site-ebike .faq__a {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

/* ---------- image placeholders ---------- */

/* Capability and hero slots render an SVG brief until the real asset lands.
   Sized like the mockups they stand in for, so swapping the file in changes
   nothing about the layout. */
.site-ebike .slot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-surface);
  border: 1px solid var(--hairline);
  background: var(--paper);
}

/* The hero screen is one of the two elements allowed past the shell — same
   bleed as the `.md` mockup it stands in for, so /marine and /marine/fleet
   crop their product shot identically. `.mhero` already clips the overflow. */
.site-ebike .mhero__visual .slot {
  width: min(1180px, 66vw);
  max-width: none;
  box-shadow: 0 18px 50px rgba(38, 8, 48, 0.1);
}

@media (max-width: 1080px) {
  .site-ebike .mhero__visual .slot {
    width: calc(100% + max(120px, 16vw));
  }
}

@media (max-width: 900px) {
  .site-ebike .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-ebike .bento__tile:nth-child(3n+1) {
    border-left: 1px solid var(--hairline-soft);
  }

  .site-ebike .bento__tile:nth-child(-n+3) {
    border-top: 1px solid var(--hairline-soft);
  }

  .site-ebike .bento__tile:nth-child(2n+1) {
    border-left: 0;
  }

  .site-ebike .bento__tile:nth-child(-n+2) {
    border-top: 0;
  }

  .site-ebike .faq__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

@media (max-width: 620px) {
  .site-ebike .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-ebike .bento__tile,
  .site-ebike .bento__tile:nth-child(2n+1),
  .site-ebike .bento__tile:nth-child(3n+1) {
    border-left: 0;
    border-top: 1px solid var(--hairline-soft);
  }

  .site-ebike .bento__tile:first-child {
    border-top: 0;
  }
}

/* ==========================================================================
   THE WRONG-PAGE SIGNPOST
   One line between the logo banner and the first reading band, on both marine
   pages, pointing at the other one.

   It is styled *down*, deliberately. marine fleet and marine marina are two
   products now, each with its own card on the coride home page, and each page
   sells itself end to end — so the sibling gets a signpost, not a band. Small
   type, the page's own ground, no card, no eyebrow, no rule of its own: the
   right reader's eye slides over it, the wrong reader's eye catches on it.
   ========================================================================== */

.site-ebike .switch-note {
  background: var(--ground-page);
  padding: 26px var(--gutter) 0;
  position: relative;
  z-index: 2;
  text-align: center;
}

.site-ebike .switch-note p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.site-ebike .switch-note a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.site-ebike .switch-note a:hover {
  border-bottom-color: var(--accent);
}

/* The band underneath opens on its own ground, so the note has to sit on the
   same ground to read as a lead-in line rather than a stripe of its own. Both
   marine pages put a `page`-ground band directly after it; if that ever
   changes, this pairing is what needs revisiting. */
.site-ebike .switch-note + .band--page {
  padding-top: 22px;
}

/* ==========================================================================
   HERO PHOTOGRAPHS — both marine pages
   Every other image on these pages is a generated product screen. These are
   the water itself: each page opens on the thing being operated before the
   board opens it on a table.

   Same construction as the camper hero, and the same reasoning (2026 research
   § 1.2: a product-first hero beats a photo hero) — the photograph goes
   *behind* the hero rather than replacing the product shot, so the page keeps
   its board and buys the atmosphere underneath it.

   One thing differs from camper: the light is cool rather than golden, because
   these pages sit on a blue-white ground beside a royal-blue accent and a warm
   sunset would fight it.

   The two pages take different frames on purpose. `/marine/fleet` opens on one
   boat out on open water — the asset being used. `/marine` opens on the basin
   itself, other people's mixed boats in their berths — the place being run.
   Everything below the two `background-image` rules is shared: only the
   picture and its anchor point differ.
   ========================================================================== */

.site-ebike--fleet .mhero {
  background-image: url("/photos/marine/fleet/hero-bg.jpg");
  background-size: cover;
  /* Anchored low and just right of centre: the moored line of boats runs
     through the lower right of the frame, and the left half — flat water and
     mist, no subject in it — is what ends up under the headline. Cropping off
     the sky rather than the pontoon keeps the boats in the picture at wide
     viewports, where the hero is much wider than the photograph. */
  background-position: 62% 52%;
  background-repeat: no-repeat;
}

.site-ebike--yard .mhero {
  background-image: url("/photos/marine/yard/hero-bg.jpg");
  background-size: cover;
  /* The berths and pontoons sit right of centre in the frame; the left is open
     water and mist, which is what ends up under the headline. */
  background-position: 52% 66%;
  background-repeat: no-repeat;
}

/* The scrim is the load-bearing part. It stays near-opaque over the left
   column, where the headline, lead, CTA and chips live, so body copy keeps its
   contrast against the page ground rather than against a photograph — and
   thins out to the right, where the picture is allowed to be a picture. The
   second gradient settles the frame back into the page at the foot, so the
   hero ends on the page rather than on a hard photographic border. */
.site-ebike--fleet .mhero::after,
.site-ebike--yard .mhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(248, 246, 251, 0.86) 0%,
      rgba(248, 246, 251, 0.8) 30%,
      rgba(248, 246, 251, 0.66) 48%,
      rgba(248, 246, 251, 0.4) 66%,
      rgba(248, 246, 251, 0.22) 100%
    ),
    linear-gradient(
    to bottom,
    rgba(248, 246, 251, 0.42) 0%,
    rgba(248, 246, 251, 0) 24%,
    rgba(248, 246, 251, 0) 66%,
    var(--page) 100%
  );
}

/* The marina frame is a pale misty dawn, where the fleet frame is dark water.
   The same scrim that keeps ink legible over deep blue erases a photograph
   that is already almost the page's own colour — at the fleet page's values
   this hero read as fog with nothing in it. So the yard takes roughly half the
   opacity. The copy keeps its contrast anyway: midnight-blue ink on pale mist
   is a wider gap than the scrim was buying in the first place. Anything
   swapped in here that is dark rather than pale wants the fleet values back. */
.site-ebike--yard .mhero::after {
  background:
    linear-gradient(
      100deg,
      rgba(247, 249, 252, 0.6) 0%,
      rgba(247, 249, 252, 0.5) 30%,
      rgba(247, 249, 252, 0.34) 48%,
      rgba(247, 249, 252, 0.16) 66%,
      rgba(247, 249, 252, 0.06) 100%
    ),
    linear-gradient(
    to bottom,
    rgba(247, 249, 252, 0.3) 0%,
    rgba(247, 249, 252, 0) 24%,
    rgba(247, 249, 252, 0) 62%,
    var(--page) 100%
  );
}

/* The ambient blue wash and the chart linework were both drawn to sit on a
   flat ground. Over a photograph the wash turns the water to fog and the
   contours read as dirt on the lens, so both step back rather than compete. */
.site-ebike--fleet .mhero::before,
.site-ebike--yard .mhero::before {
  opacity: 0.45;
}

.site-ebike--fleet .mhero__chart,
.site-ebike--yard .mhero__chart {
  opacity: 0.035;
}

/* Below the split the columns stack, the copy runs the full width and the
   scrim's horizontal falloff no longer lines up with anything. Go vertical:
   dense at the top where the words are, open at the bottom where the picture
   can breathe behind the fleet board. */
@media (max-width: 900px) {
  .site-ebike--fleet .mhero {
    background-position: 70% 42%;
  }

  .site-ebike--yard .mhero {
    background-position: 66% 45%;
  }

  .site-ebike--fleet .mhero::after,
  .site-ebike--yard .mhero::after {
    background: linear-gradient(
      to bottom,
      rgba(247, 249, 252, 0.97) 0%,
      rgba(247, 249, 252, 0.95) 46%,
      rgba(247, 249, 252, 0.74) 74%,
      rgba(247, 249, 252, 0.58) 100%
    );
  }
}

/* ==========================================================================
   FEELING BANDS — the two photographs, at full strength
   Full-bleed, taller than a strip and shorter than a hero. The fleet page
   opens on boats that have not gone out yet and closes on one coming back;
   between them sit the product screens, which is the whole argument in the
   order the headline makes it.

   Neither of these could live behind the hero. The pontoon frame puts a bow
   directly under the lead paragraph, and the sunset frame is warm against a
   royal-blue accent — as a wash they fight the page, given their own strip
   they carry it. The hero keeps the one frame that works underneath copy: open
   water and a wake, no subject on the left.
   ========================================================================== */

.site-ebike .feeling {
  position: relative;
  width: 100%;
  height: clamp(340px, 42vw, 560px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  z-index: 2;
}

.site-ebike .feeling__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 62%;
  display: block;
  z-index: 0;
}

/* Dark at the foot, clear at the head: the words take their contrast from the
   bottom of the frame — water and hull shadow — and the light stays where the
   light is. Midnight blue rather than the camper page's brown, so the scrim
   belongs to this palette. */
.site-ebike .feeling__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(1, 9, 43, 0.74) 0%,
    rgba(1, 9, 43, 0.44) 26%,
    rgba(38, 8, 48, 0.1) 54%,
    rgba(38, 8, 48, 0) 78%
  );
}

.site-ebike .feeling__copy {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) clamp(30px, 4vw, 52px);
  width: 100%;
}

.site-ebike .feeling__copy .eyebrow {
  color: rgba(254, 253, 255, 0.74);
  margin-bottom: 10px;
}

.site-ebike .feeling__line {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 26ch;
  text-wrap: balance;
}

.site-ebike .feeling__credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .site-ebike .feeling {
    height: clamp(300px, 62vw, 420px);
  }

  .site-ebike .feeling__line {
    max-width: 20ch;
  }
}

/* ==========================================================================
   HERO BACKGROUND — the photograph behind the words

   Marine and camper both open on light and atmosphere; this page opened on a
   flat gradient, which read as clinical next to them. The frame is blue hour on
   a wet city square, a long row of city e-bikes falling away into mist, one
   cargo bike among them — so the picture carries the fleet argument and the
   feeling at the same time, and the left half is nothing but wet paving and
   reflected lamplight.

   Blue hour rather than golden hour on purpose. Camper takes warm amber to carry
   its terracotta; this page sits on a violet ground beside an electric-violet
   accent, and a warm sunset would fight that accent instead of carrying it.

   The scrim is the whole trick, and it is denser on the left column where the
   headline, lead and CTA live, so body copy keeps its contrast against the page
   ground rather than against a photograph — then thins to the right, where the
   picture is allowed to be a picture behind and below the fleet board. The
   source frame is pre-lifted (see photography/hero_photo.py and the gamma pass
   that writes photos/ebike/hero-bg.jpg), which is what lets this scrim sit
   lighter than camper's and keep the bikes visible instead of dissolving them.
   ========================================================================== */

.site-ebike .mhero {
  background-image: url("/photos/ebike/hero-bg.jpg");
  background-size: cover;
  /* Anchored so the wet paving and its lamp reflections fall through the lower
     left of the hero — the one large empty region a split hero has, below the
     chips and beside the board. The row of bikes stays right, behind and under
     the product shot, where it reads as depth rather than as a subject competing
     with the screen. */
  background-position: 60% 70%;
  background-repeat: no-repeat;
}

.site-ebike .mhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* A soft ellipse behind the copy block, so the *text* is protected rather
       than the whole left half of the frame. A uniform left-hand wash was the
       first attempt: it bleached the wet paving and its lamp reflections along
       with the words, and left the hero's lower left as dead pale space. This
       hugs the copy and lets the picture stay a picture 200px below it. */
    radial-gradient(
      82% 46% at 22% 44%,
      rgba(248, 246, 251, 0.96) 0%,
      rgba(248, 246, 251, 0.93) 38%,
      rgba(248, 246, 251, 0.66) 66%,
      rgba(248, 246, 251, 0.24) 86%,
      rgba(248, 246, 251, 0) 100%
    ),
    linear-gradient(
    100deg,
    rgba(248, 246, 251, 0.52) 0%,
    rgba(248, 246, 251, 0.44) 30%,
    rgba(248, 246, 251, 0.32) 52%,
    rgba(248, 246, 251, 0.2) 72%,
    rgba(248, 246, 251, 0.12) 100%
  ),
     /* Settles the picture back into the page ground at both edges, so the hero
    ends on the page rather than on a hard photographic border. */linear-gradient(
    to bottom,
    rgba(248, 246, 251, 0.5) 0%,
    rgba(248, 246, 251, 0) 18%,
    rgba(248, 246, 251, 0) 68%,
    rgba(248, 246, 251, 0.42) 94%,
    var(--page) 100%
  );
}

/* The contour linework was drawn to sit on a flat ground. Over a photograph it
   reads as dirt on the lens, so it steps back rather than competing. */
.site-ebike .mhero__chart {
  opacity: 0.04;
}

/* Below the split the columns stack, the copy runs the full width and the
   scrim's horizontal falloff no longer lines up with anything. Go vertical:
   dense at the top where the words are, open at the bottom where the picture
   can breathe behind the product shot. */
@media (max-width: 900px) {
  .site-ebike .mhero {
    background-position: 72% 34%;
  }

  .site-ebike .mhero::after {
    background: linear-gradient(
      to bottom,
      rgba(248, 246, 251, 0.97) 0%,
      rgba(248, 246, 251, 0.95) 44%,
      rgba(248, 246, 251, 0.74) 70%,
      rgba(248, 246, 251, 0.56) 100%
    );
  }
}