/* ==========================================================================
   SITES/CAMPER.CSS - coride camper fleet page styling
   All selectors must be scoped with .site-camper

   Generated from marine.css by rescoping (.site-marine -> .site-camper) and
   substituting the palette, per the "self-contained stylesheet per page, no
   shared stylesheets" rule in CSS_ARCHITECTURE.md.

   The palette is terracotta on warm sand. Three reasons, in CAMPER_CONCEPT.md
   section 3: it is maximally far from marine's cool blue so the two pages do
   not read as one; it is red enough not to be mistaken for the product's
   #eb9532 status orange; and warm grounds make the blue dashboard shots read
   as *the product*, distinct from the page around them.

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

   KNOWN DEBT: this duplicates the whole band system. The third industry page is
   the point at which those rules should be lifted into a shared bands.css on a
   common class.
   ========================================================================== */

.site-camper {
  --camper-accent: #e2603c;
  --camper-accent-2: #c9502f;
  --camper-page: #fbf8f4;
  --camper-paper: #ffffff;
  --camper-tint: #f3ebe0;
}

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

  position: relative;
  overflow-x: hidden;
  background: var(--bg);
}
.site-camper .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 (#fbf8f4)
   would be invisible against it. Warm white keeps it in the camper palette. */
.site-camper .nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 253, 250, 0.74);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(58, 30, 14, 0.08);
  box-shadow: 0 10px 30px rgba(58, 30, 14, 0.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.site-camper .nav--scrolled::before {
  opacity: 1;
}
@supports 
  not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-camper .nav::before {
    background: rgba(255, 253, 250, 0.96);
  }
}
.site-camper .nav__link {
  position: relative;
  padding: 6px 0;
  transition: color 200ms ease;
}
.site-camper .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-camper .nav__link:hover::after {
  opacity: 0.6;
  transform: scaleX(1);
}
.site-camper .nav__link--cta {
  padding: 8px 12px;
  /* Wins over the .site-camper .nav__link ink colour further down the file. */
  color: var(--text-on-primary-color);
}
.site-camper .nav__logo-wordmark {
  height: 42px;
  width: auto;
  display: block;
}
.site-camper .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(226, 96, 60, 0.1);
  border: 1px solid rgba(226, 96, 60, 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-camper main {
  position: relative;
}
.site-camper .section, .site-camper .logo-banner {
  position: relative;
  z-index: 2;
}
/* Mobile breakpoints for hero */
@media (max-width: 900px) {
  .site-camper .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-camper .nav__brand {
    gap: 10px;
    flex-shrink: 0;
  }
  .site-camper .nav__logo-wordmark {
    height: 34px;
  }
  .site-camper .nav__links {
    width: auto;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .site-camper .nav__link--section, .site-camper .nav__link--login {
    display: none;
  }
  .site-camper .nav__link--cta {
    width: auto;
    padding: 6px 12px;
    font-size: 0.84rem;
  }
  .site-camper .lang-selector__select {
    min-height: 32px;
    min-width: 64px;
    font-size: 0.74rem;
  }
  .site-camper--pricing .pricing-hero {
    padding-top: 122px;
  }
}
@media (max-width: 640px) {
  .site-camper .nav {
    min-height: 52px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .site-camper .nav__logo-wordmark {
    height: 30px;
  }
  .site-camper .nav__product-badge {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 2px 8px;
  }
  .site-camper .nav__link--pricing {
    display: none;
  }
  .site-camper--pricing .pricing-hero {
    padding-top: 104px;
  }
}
.site-camper p {
  line-height: 1.65;
}
/* =========================
   BUTTONS
   ========================= */
.site-camper .button--cta {
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(226, 96, 60, 0.3);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.site-camper .button--cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(226, 96, 60, 0.4);
}
.site-camper .button--primary {
  background: rgba(226, 96, 60, 0.12);
  color: var(--accent);
  border: 1px solid rgba(226, 96, 60, 0.3);
  box-shadow: 0 8px 20px rgba(226, 96, 60, 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.site-camper .button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(226, 96, 60, 0.18);
}
.site-camper .button--ghost {
  border-color: rgba(1, 9, 43, 0.18);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
}
/* Meta cards */
.site-camper .meta-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(58, 30, 14, 0.14);
  color: var(--ink-soft);
}
/* Image placeholders */
/* Remove background from hero mockup */
/* Typography colors */
.site-camper .nav__link:not(.nav__link--cta),
.site-camper .section p,
.site-camper .footer p,
.site-camper .footer__links,
.site-camper .meta-card {
  color: var(--ink-soft);
}
.site-camper h1, .site-camper h2, .site-camper h3 {
  color: var(--ink);
}
.site-camper .eyebrow {
  color: var(--accent-2);
}
/* Section styles */
.site-camper .section {
  padding: 120px 6vw;
  position: relative;
  background: var(--bg);
}
.site-camper .section__heading {
  max-width: 680px;
  margin-bottom: 56px;
}
.site-camper .section__heading h2 {
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.site-camper .section__heading p {
  font-size: 1.05rem;
  line-height: 1.6;
}
/* LogoBanner backdrop for hero transition */
.site-camper .logo-banner {
  background: var(--bg);
  position: relative;
  padding: 60px 6vw;
}
/* CTA styles */
/* Workflow styles */
/* Revenue styles */
/* Hardware / Connectivity Section */
/* Responsive adjustments */
/* Footer styles */
.site-camper .footer {
  background: var(--camper-tint);
  border-top-color: rgba(58, 30, 14, 0.12);
}
/* =========================
   CASE STUDIES
   ========================= */
/* Responsive */
/* =========================
   Max-width container
   Backgrounds/borders remain full-width, content is constrained
   ========================= */
/* Logo banner content max-width */
.site-camper .logo-banner__container {
  max-width: 1400px;
}
/* Constrain section content while keeping backgrounds full-width */
.site-camper .section > .section__heading {
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
}
.site-camper .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-camper .footer {
  position: relative;
  z-index: 2;
}
/* ── Language Selector (marine overrides) ────────────────────── */
.site-camper .lang-selector__select {
  min-height: 34px;
  min-width: 70px;
  padding: 0 26px 0 10px;
  border-color: rgba(1, 9, 43, 0.2);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.76rem;
}
.site-camper .lang-selector__select:hover {
  background: rgba(58, 30, 14, 0.07);
  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-camper {
  --page: var(--camper-page);
  --paper: #ffffff;
  --ink-2: rgba(1, 9, 43, 0.68);
  --ink-3: rgba(1, 9, 43, 0.56);
  --hairline: rgba(58, 30, 14, 0.12);
  --hairline-soft: rgba(58, 30, 14, 0.07);
  --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-camper .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-camper .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-camper .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-camper .band {
  padding: var(--band-y) var(--gutter);
  background: var(--page);
  border-top: 1px solid var(--hairline-soft);
  position: relative;
  z-index: 2;
}

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

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

.site-camper .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-camper .button:hover {
  transform: none;
}

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

.site-camper .button--solid:hover {
  background: #0039c4;
  border-color: #0039c4;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.site-camper .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-camper .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-camper .mhero__lead {
  margin-top: 20px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}

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

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

.site-camper .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-camper .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-camper .mhero__visual {
  min-width: 0;
}

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

.site-camper .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-camper .piece {
  padding: 30px 28px 34px;
  border-left: 1px solid var(--hairline-soft);
}

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

.site-camper .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-camper .piece__icon svg {
  width: 20px;
  height: 20px;
}

.site-camper .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-camper .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-camper .piece__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
}

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

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

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

.site-camper .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-camper .cap:first-child {
  border-top: 0;
  padding-top: 0;
}

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

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

.site-camper .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-camper .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-camper .cap--feature .cap__title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

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

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

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

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

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

.site-camper .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-camper .band--strip {
  padding-top: 44px;
  padding-bottom: 44px;
}

.site-camper .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-camper .strip--quiet {
  background: transparent;
  border-style: dashed;
}

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

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

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

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

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

.site-camper .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-camper .stat {
  padding: 28px 26px;
  border-left: 1px solid var(--hairline-soft);
}

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

.site-camper .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-camper .stat__label {
  margin: 10px 0 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}

.site-camper .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-camper .quote {
  margin-top: 40px;
  max-width: 40ch;
}

.site-camper .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-camper .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-camper .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-camper .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-camper .cases:has(> :last-child:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

.site-camper .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-camper .evcase__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.004em;
  color: var(--ink);
}

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

.site-camper .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-camper .evphoto {
  margin: 8px auto 0;
  max-width: 900px;
}

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

.site-camper .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-camper .evphoto + .cases {
  margin-top: 48px;
}

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

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

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

.site-camper .band--ink .band__lead {
  color: rgba(255, 255, 255, 0.72);
}

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

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

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

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

.site-camper .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-camper .offer__label {
  font-size: 0.98rem;
  line-height: 1.4;
}

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

.site-camper .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-camper .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-camper .band--close {
  padding-bottom: calc(var(--band-y) + 16px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .site-camper * {
    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-camper .mhero__visual {
  min-width: 0;
}

/* Logo strip: legible, not decorative. Title joins the eyebrow system. */
.site-camper .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-camper .logo-banner {
  padding-inline: 0;
}

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

.site-camper .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-camper .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-camper .nav__link--page {
    display: none;
  }

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

/* Named customers are proof, not decoration — let their marks read. */
.site-camper .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-camper .mhero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      900px circle at 20% 30%,
      rgba(226, 96, 60, 0.25),
      transparent 70%
    ),
    radial-gradient(
    800px circle at 80% 60%,
    rgba(230, 150, 90, 0.20),
    transparent 70%
  ),
    radial-gradient(
    1000px circle at 40% 80%,
    rgba(214, 178, 130, 0.20),
    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-camper .mhero::before {
    animation: none;
  }
}

/* Contours read as linework over the wash, not as a second ambient layer. */
.site-camper .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-camper {
  --ground-page: var(--camper-page);
  --ground-paper: #ffffff;
  --ground-tint: var(--camper-tint);
}

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

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

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

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

.site-camper .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-camper .band--paper .pieces,
.site-camper .band--paper .stats,
.site-camper .band--paper .cases,
.site-camper .band--paper .strip {
  background: var(--ground-page);
}

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

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

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

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

.site-camper .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-camper .piece__media {
  height: 200px;
  display: block;
  padding: 22px;
  background: linear-gradient(
    180deg,
    rgba(1, 9, 43, 0.03),
    rgba(1, 9, 43, 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-camper .piece__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

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

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

.site-camper .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-camper .caps__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.site-camper .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-camper .caps__tab:hover {
  color: var(--ink);
}

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

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

.site-camper
  .caps__radio:nth-of-type(1):checked
  ~ .caps__panels
  .cap:nth-child(1),
.site-camper
  .caps__radio:nth-of-type(2):checked
  ~ .caps__panels
  .cap:nth-child(2),
.site-camper
  .caps__radio:nth-of-type(3):checked
  ~ .caps__panels
  .cap:nth-child(3),
.site-camper
  .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-camper .caps__radio:focus-visible ~ .caps__tabs .caps__tab {
  outline: none;
}

.site-camper
  .caps__radio:nth-of-type(1):focus-visible
  ~ .caps__tabs
  .caps__tab:nth-child(1),
.site-camper
  .caps__radio:nth-of-type(2):focus-visible
  ~ .caps__tabs
  .caps__tab:nth-child(2),
.site-camper
  .caps__radio:nth-of-type(3):focus-visible
  ~ .caps__tabs
  .caps__tab:nth-child(3),
.site-camper
  .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-camper .caps {
  display: block;
}

.site-camper .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-camper .cap {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

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

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

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

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

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

  .site-camper .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-camper .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-camper .band--close {
  padding-bottom: calc(var(--band-y) + 8px);
}

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

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

.site-camper .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-camper .close-card .eyebrow {
  color: rgba(255, 255, 255, 0.62);
}

.site-camper .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-camper .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-camper .close__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.site-camper .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-camper .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-camper .assurances li {
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.86);
}

.site-camper .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-camper .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-camper .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-camper .close-step:first-child {
  border-top: 0;
}

.site-camper .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-camper .close-step__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.004em;
  color: #fff;
}

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

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

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

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

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

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

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

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

@media (max-width: 620px) {
  .site-camper .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-camper .caps__panels {
  display: grid;
  grid-template-areas: "panel";
}

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

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

@media (prefers-reduced-motion: reduce) {
  .site-camper .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-camper .owner-stack {
  position: relative;
  width: min(100%, 420px);
  margin-inline: auto;
  padding-right: 24px;
}

.site-camper .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(1, 9, 43, 0.14);
}

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

.site-camper .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(1, 9, 43, 0.2);
}

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

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

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

  .site-camper .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-camper .pc,
.site-camper .pc * {
  font-family:
    "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.site-camper .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(--camper-page);
  --pc-border: #e3e8f0;
  --pc-border-2: #dde3ec;
  --pc-fill: #e9edf3;
  --pc-ink: #101425;
  --pc-slate: #708094;
  --pc-accent: #e2603c;
  --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-camper .pc__screen {
  background: var(--pc-paper);
  border: 1px solid var(--pc-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(1, 9, 43, 0.04),
    0 24px 60px -20px rgba(1, 9, 43, 0.18);
}

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

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

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

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

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

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

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

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

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

.site-camper .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-camper .pc__searchLabel {
  flex: 1;
  font-size: 12px;
  color: var(--pc-slate);
}

.site-camper .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-camper .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-camper .pc__liveDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pc-mint);
}

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

.site-camper .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-camper .pc__body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
}

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

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

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

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

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

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

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

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

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

.site-camper .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-camper .pc__navChevron {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  color: var(--pc-slate);
}

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

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

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

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

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

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

.site-camper .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-camper .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-camper .pc__kpi {
  padding: 16px 18px;
}

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

.site-camper .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-camper .pc__kpiRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.site-camper .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-camper .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-camper .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-camper .pc__chartSvg {
  display: block;
  width: 100%;
  height: 140px;
}

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

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

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

.site-camper .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-camper .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-camper .pc__panel--pipe {
  padding: 18px 0 0;
}

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

.site-camper .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-camper .pc__pipeHeadRight {
  text-align: right;
}

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

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

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

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

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

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

/* Tag, per the design system: solid severity fill, white text, 3px radius. */
.site-camper .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-camper .pc__tag--danger {
  background: var(--pc-red);
}

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

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

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

.site-camper .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-camper .pc__streamHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--pc-border);
}

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

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

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

.site-camper .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-camper .pc__streamRow:last-child {
  border-bottom: 0;
}

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

.site-camper .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-camper .pc__streamKind--geo {
  color: var(--pc-accent);
  border-color: #c1ccff;
  background: #f3f7ff;
}

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

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

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

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

.site-camper .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-camper .pc {
    width: max(calc(100% + max(120px, 16vw)), 880px);
  }

  .site-camper .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-camper .pc {
    width: calc(100% + 80px);
  }

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

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

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

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

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

  .site-camper .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-camper--pricing .price-hero {
  padding-top: calc(var(--nav-height, 72px) + 78px);
  padding-bottom: 76px;
  border-top: 0;
}

.site-camper--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-camper--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-camper--pricing .price-facts {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

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

.site-camper--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-camper--pricing .ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

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

.site-camper--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-camper .button--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}

.site-camper .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-camper--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-camper--pricing .bill__line {
  padding: 34px clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--hairline-soft);
}

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

.site-camper--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-camper--pricing .bill__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: -0.004em;
  color: var(--ink);
}

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

.site-camper--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-camper--pricing .bill__price span {
  font-size: 0.92rem;
  color: var(--ink-3);
}

.site-camper--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-camper--pricing .tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.site-camper--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-camper--pricing .tier-card--highlight {
  border-color: var(--accent);
}

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

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

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

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

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

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

.site-camper--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-camper--pricing .tier-card__tagline {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-3);
  min-height: 2.7em;
}

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

.site-camper--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-camper--pricing .tier-card__price span {
  font-size: 0.88rem;
  color: var(--ink-3);
}

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

.site-camper--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-camper--pricing .tier-card__limit dt {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

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

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

.site-camper--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-camper--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-camper--pricing .tier-card__note {
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-3);
}

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

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

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

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

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

.site-camper--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-camper--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-camper--pricing .compare-col--lead {
  background: rgba(226, 96, 60, 0.035);
}

.site-camper--pricing .compare thead th.compare-col--lead {
  color: var(--accent);
  background: rgba(226, 96, 60, 0.05);
}

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

.site-camper--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-camper--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-camper--pricing .compare tbody td {
  padding: 13px 16px;
  text-align: center;
  border-top: 1px solid var(--hairline-soft);
}

.site-camper--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-camper--pricing .mark {
  display: inline-flex;
}

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

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

.site-camper--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-camper--pricing .included {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

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

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

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

.site-camper--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(1, 9, 43, 0.16);
}

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

.site-camper--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-camper--pricing .term {
  padding: 30px clamp(22px, 2.4vw, 32px);
  border-left: 1px solid var(--hairline-soft);
}

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

.site-camper--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-camper--pricing .term__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.004em;
  color: var(--ink);
}

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

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

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

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

.site-camper--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-camper--pricing .faq__q::-webkit-details-marker {
  display: none;
}

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

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

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

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

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

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

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

.site-camper--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-camper--pricing .close-card--lean {
  padding: clamp(44px, 5vw, 68px) clamp(28px, 4vw, 64px);
}

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

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

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

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

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

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

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

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

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

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

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

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

  .site-camper--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-camper .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-camper .bento__tile {
  padding: 26px 26px 30px;
  border-left: 1px solid var(--hairline-soft);
  border-top: 1px solid var(--hairline-soft);
}

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

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

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

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

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

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

.site-camper .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-camper .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-camper .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-camper .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-camper .mhero__visual .slot {
  width: min(1180px, 66vw);
  max-width: none;
  box-shadow: 0 18px 50px rgba(58, 30, 14, 0.12);
}

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   TWO-SIDED BAND — one event, both screens
   The camper page's signature band. Two columns that are deliberately
   different shapes: a dashboard (landscape) and a phone (portrait), so the
   band reads as two audiences rather than two screenshots of one thing.
   ========================================================================== */

.site-camper .sides {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.site-camper .side {
  display: flex;
  flex-direction: column;
  background: var(--ground-paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  overflow: hidden;
}

.site-camper .band--paper .side {
  background: var(--ground-page);
}

.site-camper .side__copy {
  padding: 26px 28px 22px;
}

.site-camper .side__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.site-camper .side__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.2;
}

.site-camper .side__body {
  margin-top: 9px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}

/* The screenshot is the one element on the page allowed elevation. */
.site-camper .side__media {
  margin-top: auto;
  padding: 0 28px 28px;
}

.site-camper .side__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-control);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 44px rgba(58, 30, 14, 0.14);
}

/* The phone is portrait and would tower over its neighbour at full width.

   It also brings its own frame: the shot is a transparent PNG of a handset with
   a bezel, rounded corners and a drop shadow already in it. Adding the border,
   radius and elevation above put a rectangle around a rounded phone — a box
   inside a box — so the phone opts out of all three and the card's own edge is
   the only one. The dashboard beside it keeps them: it is an opaque landscape
   capture with square corners and genuinely needs an edge. */
.site-camper .side:last-child .side__media img {
  max-width: 300px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-camper .sides__closer {
  margin-top: 26px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: var(--measure);
}

.site-camper .sides__closer strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .site-camper .sides {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .site-camper .side:last-child .side__media img {
    max-width: 260px;
  }
}

/* ==========================================================================
   HERO PHOTOGRAPH — the one emotional image on the page
   Every other image here is a generated product screen. This one is the reason
   anyone hires a camper, and it opens the page on a feeling before the fleet
   board opens it on a table.

   It sits *behind* the hero rather than replacing the product shot. The 2026
   research is unambiguous that a product-first hero beats an illustration or
   photo hero; this keeps the board and buys the atmosphere underneath it.

   The scrim is the load-bearing part. It stays near-opaque over 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 — and
   thins out to the right, where the picture is allowed to be a picture.
   ========================================================================== */

.site-camper .mhero {
  background-image: url("/photos/camper/hero-bg.jpg");
  background-size: cover;
  /* Anchored on the mist, the trunks and the low sun — the part of the frame
     that has no subject in it. The product shot owns the right half of this
     hero, so anything with a subject either hides behind the board or gets
     cropped into a fragment. Here the photograph does the one job it can do
     well at this size: put warm low light behind the words. A different frame
     from the one in the band below, so the page does not show the same picture
     twice — an empty road at golden hour, where the left of the frame is
     nothing but tarmac, grass and haze. */
  background-position: 42% 58%;
  background-repeat: no-repeat;
}

.site-camper .mhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(251, 248, 244, 0.9) 0%,
      rgba(251, 248, 244, 0.84) 30%,
      rgba(251, 248, 244, 0.7) 48%,
      rgba(251, 248, 244, 0.42) 66%,
      rgba(251, 248, 244, 0.24) 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(251, 248, 244, 0.4) 0%,
    rgba(251, 248, 244, 0) 22%,
    rgba(251, 248, 244, 0) 68%,
    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-camper .mhero__chart {
  opacity: 0.045;
}

/* 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-camper .mhero {
    background-position: 68% 38%;
  }

  .site-camper .mhero::after {
    background: linear-gradient(
      to bottom,
      rgba(251, 248, 244, 0.97) 0%,
      rgba(251, 248, 244, 0.95) 46%,
      rgba(251, 248, 244, 0.72) 72%,
      rgba(251, 248, 244, 0.55) 100%
    );
  }
}

/* ==========================================================================
   FEELING BAND — the photograph, at full strength
   Full-bleed, taller than a strip and shorter than a hero. Its whole job is to
   put the reason anyone hires a camper on the page once, properly, before the
   argument turns to devices and dashboards.
   ========================================================================== */

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

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

/* Dark at the foot, clear at the head: the words get their contrast from the
   bottom of the frame, which is grass and shadow, and the light stays where
   the light is. */
.site-camper .feeling__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(30, 14, 5, 0.72) 0%,
    rgba(30, 14, 5, 0.42) 26%,
    rgba(30, 14, 5, 0.08) 54%,
    rgba(30, 14, 5, 0) 78%
  );
}

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

.site-camper .feeling__copy .eyebrow {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 10px;
}

.site-camper .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: 24ch;
  text-wrap: balance;
}

.site-camper .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-camper .feeling {
    height: clamp(300px, 62vw, 420px);
  }
  .site-camper .feeling__line {
    max-width: 18ch;
  }
}