/* ===================================================
   earthity — charging-dock.css: rules only the charging-dock page uses.
   Load after base.css. Split from the former site.css (2026-09-11).
   =================================================== */

/* ============================================================
   CHARGING DOCK PAGE
   Light theme (matches outpost / drone-program). Rebuilds a CAD/
   blueprint Stitch mockup with DS tokens: single Blue 60 accent,
   carbon-on-white type, mono-style technical labels (IBM Plex Sans
   uppercase + tracking — DS ships no mono woff2), CSS blueprint
   frames in place of raster renders.
   ============================================================ */

.charging-dock-page {
  background-color: var(--white);
  color: var(--gray-100);
}

/* Shared container: 80rem measure, centered, section padding. Generic
   sections add a hairline top divider — the mockup's `border-t … pt-24`. */
.charging-dock__hero,
.charging-dock__section {
  padding: var(--spacing-10) max(var(--spacing-07), calc((100% - 1376px) / 2));
}

.charging-dock__section {
  border-top: 1px solid var(--gray-20);
}

/* ─── Charging Dock — shared type ─── */
.charging-dock__eyebrow,
.charging-dock__index {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-60);
  margin: 0 0 var(--spacing-04);
}

/* Section headers use the site pattern (matches home / outpost):
   .section-bar + .wf-h2.section-heading with .section-title + secondary.
   .section-heading already sets the 22px size; these add the spacing. */
.charging-dock__section-head {
  margin-bottom: var(--spacing-08);
}

.charging-dock__compat-copy .section-heading,
.charging-dock__milestones-intro .section-heading,
.charging-dock__section-head .section-heading {
  margin: 0 0 var(--spacing-05);
}

/* "Recharges any drone." header — mirrors the home Match Engine intro
   ("Shop qualified roofs"): Manrope-300 headline with a Blue 60 <em> accent,
   a muted IBM Plex body, right-justified, no accent bar. */
.charging-dock__section-head--feature {
  text-align: right;
}
.charging-dock__section-head--feature .section-title {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #161616;
}
.charging-dock__section-head--feature .section-title em {
  font-style: normal;
  font-weight: 400;
  color: #0f62fe;
}
.charging-dock__section-head--feature .section-heading__secondary {
  display: block;
  margin-top: 12px;
  margin-left: auto;
  text-align: right;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: #525252;
  max-width: 80ch;
}

.charging-dock__body {
  font-family: var(--font-sans);
  font-size: var(--type-body-long-01-size);
  line-height: var(--type-body-long-01-lh);
  color: var(--gray-70);
  margin: 0;
}

/* Display headline — Manrope, matching the home page's .wf-display
   (Manrope 300, 52px). This is what keeps the big titles in harmony
   with the rest of the site. */
.charging-dock__display {
  font-family: var(--font-brand);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-light);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--gray-100);
  margin: 0;
}

/* Subtext matches the home hero body (.wf-body/.hero__body) as it actually
   renders: IBM Plex Sans, 14px, line-height 1.5, #525252. */
.charging-dock__lead {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: #525252;
  margin: 0;
  max-width: 480px;
}

/* ─── Charging Dock — buttons (uppercase tracked, CAD feel) ─── */
.charging-dock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-05);
  margin-top: var(--spacing-04);
}

.charging-dock__actions--center {
  justify-content: center;
}

/* CTA buttons stretch to fill the grid columns on mobile; centre their labels
   (wf-btn only sets align-items, not justify-content). */
.charging-dock__actions .wf-btn-primary,
.charging-dock__actions .wf-btn-secondary {
  justify-content: center;
}

/* ─── Charging Dock — blueprint frames (replace raster renders) ─── */
.charging-dock__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-20);
  background-color: var(--gray-10);
  background-image:
    linear-gradient(to right, rgba(22, 22, 22, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 22, 22, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--gray-30);
  overflow: hidden;
}

.charging-dock__frame--hero {
  min-height: 0;
  background-color: var(--white);
  background-image: none;
  border: none;
  border-left: 1px solid var(--gray-20);
  padding: var(--spacing-08);
  /* Let the floating drones spill past the frame edges. */
  overflow: visible;
}

.charging-dock__frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero image: cover-fill the frame (zoomed in), cropping to the frame's
   aspect instead of letterboxing on white. Frame/section size is unchanged. */
.charging-dock__frame--hero .charging-dock__frame-img {
  position: static;
  align-self: stretch;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Charging Dock hero — floating decorative drones ───
   Two parallax depth layers (--dock-d); js/charging-dock.js sets --dock-mx/
   --dock-my on the frame so they drift on pointer move. Each drone also idles
   with a slow float + rotate. Decorative, pointer-events:none, hidden on
   mobile + reduced-motion. Glow is a solid blurred blue disc (no gradient). */
.dock-fx {
  position: absolute;
  inset: -5% -3%;
  pointer-events: none;
  transform: translate3d(
    calc(var(--dock-mx, 0) * var(--dock-d) * 1px),
    calc(var(--dock-my, 0) * var(--dock-d) * 1px), 0);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dock-fx--near { --dock-d: 0.7; z-index: 2; }
.dock-fx--far { --dock-d: 1.6; z-index: 3; }

.dock-rk {
  position: absolute;
  margin: 0;
  isolation: isolate;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  will-change: transform;
}
.dock-rk img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.55));
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.dock-rk--1 {
  top: -4%; left: 7%; width: 312px; height: 312px;
  animation-name: dock-flt2; animation-duration: 13s;
}
.dock-rk--1 img { animation-name: dock-rot1; animation-duration: 11s; }

/* Lower left: clear of the live dock at every framing and of the range input centred
   on the bottom edge, and it balances the two drones along the top. */
.dock-rk--2 {
  bottom: 14%; left: 2%; width: 188px; height: 188px;
  animation-name: dock-flt1; animation-duration: 11s;
}
.dock-rk--2 img { animation-name: dock-rot2; animation-duration: 9s; }

.dock-rk--3 {
  top: 14%; right: 15%; width: 184px; height: 184px;
  animation-name: dock-flt3; animation-duration: 8s;
}
.dock-rk--3 img { animation-name: dock-rot3; animation-duration: 7s; }

@keyframes dock-flt1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(16px, -26px, 0); } }
@keyframes dock-flt2 { from { transform: translate3d(6px, 8px, 0); } to { transform: translate3d(-18px, -18px, 0); } }
@keyframes dock-flt3 { from { transform: translate3d(-10px, 4px, 0); } to { transform: translate3d(12px, -30px, 0); } }
@keyframes dock-rot1 { from { transform: rotate(-9deg); } to { transform: rotate(8deg); } }
@keyframes dock-rot2 { from { transform: rotate(7deg); } to { transform: rotate(-8deg); } }
@keyframes dock-rot3 { from { transform: rotate(-4deg) scale(0.98); } to { transform: rotate(12deg) scale(1.02); } }

@media (prefers-reduced-motion: reduce) {
  .dock-rk, .dock-rk img { animation: none; }
  .dock-fx { transition: none; }
}

/* ─── Charging Dock hero — live 3D dock (js/dock-hero.js) ───
   The canvas fills the whole frame (grass runs to the edges) and fades in once
   the first frame is drawn. The floating drones (.dock-fx, z 2–3) stay above it;
   the range input sits over the bottom edge, above the drones. */
.dock-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Drag turns the model in every direction, touch included. touch-action: none
   keeps the browser out of it: pan-y let the browser claim any mostly-vertical
   swipe a few pixels in, so one drag tilted the model and then scrolled the
   page. On a phone the frame is a 340px band; the copy above and the buttons
   below still scroll the page. */
.dock-stage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
  cursor: grab;
  touch-action: none;
}
.dock-stage__canvas.is-ready { opacity: 1; }
.dock-stage__canvas.is-dragging { cursor: grabbing; }

.dock-stage__control {
  position: absolute;
  left: 50%;
  bottom: var(--spacing-06);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--spacing-04);
  padding: var(--spacing-03) var(--spacing-05);
  background-color: var(--white);
  border: 1px solid var(--gray-20);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
  color: var(--gray-70);
  transform: translateX(-50%);
}

/* A big round thumb, at the owner's request: the one deliberate exception to the
   square-corner rule on this page (DS --radius-circle). */
.dock-stage__range {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(160px, 24vw, 240px);
  height: 36px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.dock-stage__range:disabled { cursor: default; opacity: 0.4; }
.dock-stage__range:focus-visible { outline: 2px solid var(--blue-60); outline-offset: 4px; }
.dock-stage__range::-webkit-slider-runnable-track { height: 4px; background-color: var(--gray-30); }
.dock-stage__range::-moz-range-track { height: 4px; background-color: var(--gray-30); }
.dock-stage__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  margin-top: -14px;
  border: 3px solid var(--white);
  border-radius: var(--radius-circle);
  background-color: var(--blue-60);
  box-shadow: 0 0 0 1px var(--gray-30), 0 2px 6px rgba(22, 22, 22, 0.25);
  cursor: grab;
}
.dock-stage__range::-moz-range-thumb {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 3px solid var(--white);
  border-radius: var(--radius-circle);
  background-color: var(--blue-60);
  box-shadow: 0 0 0 1px var(--gray-30), 0 2px 6px rgba(22, 22, 22, 0.25);
  cursor: grab;
}
.dock-stage__range:active::-webkit-slider-thumb { cursor: grabbing; }
.dock-stage__range:active::-moz-range-thumb { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .dock-stage__canvas { transition: none; }
}

/* Compat image: fit to the frame height (whole image, proportional width),
   centered on white. */
.charging-dock__compat-art .charging-dock__frame-img {
  position: static;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* ─── Charging Dock — hero ─── */
/* Full-bleed split hero: left copy sits on the blueprint grid, right half is
   a solid white panel to the screen edge. Section padding is zeroed here and
   re-applied inside the copy column (via a viewport-based gutter) so the copy
   still aligns to the 1376px container used by the sections below. */
.charging-dock__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 600px;
  padding: 0;
  gap: 0;
  /* Match the home hero: cap at 1440 and centre so the copy's left/right
     insets line up with index.html's .hero. */
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  /* Clip horizontal only (floating drones can drift past the right edge);
     overflow-y stays visible so they can still float above/below the frame. */
  overflow-x: clip;
}

.charging-dock__hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Padding matches the home hero copy (80/32/80/48). */
  padding: 80px 32px 80px 48px;
}
/* Vertical rhythm matches the home hero: 24px title→subtext, 40px subtext→CTAs
   (home uses .hero__display margin 0 0 24px + .hero__body margin-bottom 40px).
   Reset on mobile, where the stacked hero controls spacing via its flex gap. */
.charging-dock__hero-copy .charging-dock__display { margin-bottom: 24px; }
.charging-dock__hero-copy .charging-dock__lead { margin-bottom: 40px; }

/* ─── Charging Dock — universal compatibility ─── */
.charging-dock__compat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-09);
  align-items: center;
  position: relative;
  /* Left half white (image), right half the warm "While Fortune 500s wait"
     field (copy), split hard at the centre rule. Hard stop = two solid fields,
     not a blend (consistent with the blueprint-grid line-drawing elsewhere). */
  background: linear-gradient(to right, #ffffff 0 50%, #f5f1ea 50% 100%);
}
/* Single vertical rule down the section's horizontal centre, full section
   height (replaces the box border around the compat image). */
.charging-dock__compat::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--gray-20, #e0e0e0);
  pointer-events: none;
}

.charging-dock__compat-art {
  min-height: 340px;
  background-color: var(--white);
  background-image: none;
  align-self: stretch;
  /* Box border removed — the centred full-height rule on the section
     stands in for it. */
  border: none;
}

.charging-dock__checklist {
  list-style: none;
  margin: var(--spacing-07) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
}

.charging-dock__check {
  display: flex;
  gap: var(--spacing-04);
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: var(--type-body-long-01-size);
  line-height: var(--type-body-long-01-lh);
  color: var(--gray-70);
}

.charging-dock__check-icon {
  flex-shrink: 0;
  color: var(--blue-60);
  margin-top: 2px;
}

/* ─── Charging Dock — modular architecture ─── */
.charging-dock__arch-grid {
  display: grid;
  /* Five cards on a 6-track grid. Visual order 4,3,2,5,1 (set via `order`;
     cards are non-interactive so this doesn't disturb focus order):
       Row 1 — cards 4,3,2 span 2 tracks each.
       Row 2 — cards 5,1 span 3 tracks each (wider). */
  grid-template-columns: repeat(6, 1fr);
  gap: var(--spacing-06);
}
.charging-dock__arch-grid > * { grid-column: span 2; }
.charging-dock__arch-grid > :nth-child(4) { order: 1; }               /* Compatibility */
.charging-dock__arch-grid > :nth-child(3) { order: 2; }               /* Connectivity */
.charging-dock__arch-grid > :nth-child(2) { order: 3; }               /* Modularity */
.charging-dock__arch-grid > :nth-child(5) { order: 4; grid-column: span 3; } /* Revenue */
.charging-dock__arch-grid > :nth-child(1) { order: 5; grid-column: span 3; } /* Origin */

.charging-dock__arch-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gray-20);
  background: var(--gray-10);
  padding: var(--spacing-09);
  transition: border-color 200ms ease;
}

.charging-dock__arch-card:hover {
  border-color: var(--blue-60);
}

.charging-dock__arch-bg {
  position: absolute;
  top: var(--spacing-05);
  right: var(--spacing-05);
  color: var(--gray-100);
  opacity: 0.06;
  pointer-events: none;
}

/* US flag watermark on the origin card — colored, faint, corner-set. Matched
   to the other cards' RENDERED graphic (same top/right buffer + height); width
   runs to the flag's natural wider aspect. */
.charging-dock__arch-flag {
  position: absolute;
  top: var(--spacing-06);
  right: var(--spacing-06);
  height: 62px;
  width: auto;
  opacity: 0.2;
  pointer-events: none;
}

.charging-dock__card-title {
  font-family: var(--font-sans);
  font-size: var(--type-heading-03-size);
  font-weight: var(--fw-semibold);
  line-height: var(--type-heading-03-lh);
  color: var(--gray-100);
  margin: 0 0 var(--spacing-04);
}

/* ─── Charging Dock — technology milestones (3-card grid) ─── */
.charging-dock__milestones-intro {
  margin-bottom: var(--spacing-08);
}

/* ─── Technology milestones — dark section (matches the outpost Match Engine
   panel: #161616 field, #f4f4f4 text). Content colours are inverted here. ─── */
.charging-dock__milestones {
  background: #161616;
}
.charging-dock__milestones .section-title {
  color: #f4f4f4;
}
.charging-dock__milestones .section-heading__secondary {
  color: #c6c6c6;
}
.charging-dock__milestones .charging-dock__milestone-card {
  background: #262626;
  border-color: #393939;
}
.charging-dock__milestones .charging-dock__milestone-title {
  color: #f4f4f4;
}
.charging-dock__milestones .charging-dock__body {
  color: #c6c6c6;
}
.charging-dock__milestones .charging-dock__spec-row {
  color: #a8a8a8;
  border-bottom-color: #393939;
}
/* Values (dd) default to gray-100 (dark) — unreadable on the dark card.
   Brighten them; labels (dt) stay muted for hierarchy. */
.charging-dock__milestones .charging-dock__spec-row dd {
  color: #f4f4f4;
}

.charging-dock__milestones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-06);
}

/* Surface = --gray-10 over page white, 1px --gray-20 border, square corners,
   NO shadow. Hover shifts border to the single accent only — matches
   .charging-dock__arch-card on this page. */
.charging-dock__milestone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-none);
  background: var(--gray-10);
  padding: var(--spacing-09) var(--spacing-07);
  transition: border-color 200ms ease;
}
.charging-dock__milestone-card:hover {
  border-color: var(--blue-60);
}

.charging-dock__milestone-icon {
  width: 48px;
  height: 48px;
  color: var(--blue-60);
  margin-bottom: var(--spacing-06);
}

.charging-dock__milestone-title {
  font-family: var(--font-sans);
  font-size: var(--type-heading-04-size);   /* 18px — tighter for a 3-up card */
  font-weight: var(--fw-semibold);
  line-height: var(--type-heading-04-lh);
  color: var(--gray-100);
  margin: 0 0 var(--spacing-04);
}

/* .charging-dock__body already sets type/color; guarantee full-width wrap. */
.charging-dock__milestone-card .charging-dock__body {
  width: 100%;
}

/* Spec sheet — mirrors the Outpost Infrastructure spec rows (label left,
   value right, hairline divider between). Pinned to the card bottom so the
   sheets align across equal-height cards. */
.charging-dock__specs {
  width: 100%;
  margin: auto 0 0;           /* margin-top:auto pins the sheet to the bottom */
  padding: var(--spacing-05) 0 0;
  display: flex;
  flex-direction: column;
}

.charging-dock__spec-row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-04);
  padding: var(--spacing-03) 0;
  border-bottom: 1px solid var(--gray-20);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-70);
  text-align: left;
}

.charging-dock__spec-row:last-child {
  border-bottom: none;
}

.charging-dock__spec-row dt,
.charging-dock__spec-row dd {
  margin: 0;
}

.charging-dock__spec-row dd {
  color: var(--gray-100);
  text-align: right;
}

/* ─── Charging Dock — CTA ─── */
/* Full-bleed white band (no blueprint grid behind the closing CTA). */
.charging-dock__cta {
  text-align: center;
  background: var(--white);
}

.charging-dock__cta-title {
  margin: 0 auto var(--spacing-06);
  max-width: 18ch;
}

.charging-dock__cta-body {
  margin: 0 auto var(--spacing-08);
  max-width: 44rem;
}

/* ─── Charging Dock — spec-sheet download gate (eu-modal) ───
   Chrome comes from .eu-modal (DS); fields reuse the DS .eu-field*
   classes (as the contact form does). Only the intro/asterisk/status
   copy is bespoke here. */

/* The site's `* { margin: 0 }` reset (line ~747) overrides the UA
   `dialog:modal { margin: auto }` that centers a modal <dialog>, pinning
   it top-left. Restore centering on this instance (ID beats the universal
   selector; this does not redefine the .eu-modal DS class). */
#spec-modal { margin: auto; }

.spec-form__intro {
  margin: 0 0 var(--spacing-05);
}

.spec-form__required {
  color: var(--red-60);
  margin-left: 2px;
}

.spec-form__error {
  margin: var(--spacing-04) 0 0;
  color: var(--red-60);
  font-size: var(--type-body-short-01-size);
  letter-spacing: var(--type-body-short-01-ls);
}
.spec-form__error[hidden] { display: none; }

.spec-form__toast {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-short-01-size);
  letter-spacing: var(--type-body-short-01-ls);
  color: var(--blue-70);
}
.spec-form__toast[hidden] { display: none; }

/* ─── Charging Dock — tablet / mobile ─── */
@media (max-width: 880px) {
  .charging-dock__hero,
  .charging-dock__section {
    padding: var(--spacing-08) var(--spacing-05);
  }

  /* Stack order on mobile: heading, lead, image, then CTAs (buttons BELOW the
     image). hero-copy is display:contents so its children reorder freely with
     the image sibling; the copy's gutter moves onto the text/buttons. */
  .charging-dock__hero {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-06);
    min-height: 0;
    padding: var(--spacing-08) 0;
  }

  .charging-dock__hero-copy {
    display: contents;
  }

  /* Match the home hero heading/body type on mobile. */
  .charging-dock__display {
    order: 1;
    padding: 0 var(--spacing-05);
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: normal;
  }

  .charging-dock__lead {
    order: 2;
    padding: 0 var(--spacing-05);
    font-size: 14px;
    line-height: 1.5;
  }

  /* Stacked hero spaces items with its own flex gap — drop the desktop
     title/subtext margins so they don't stack on top of it. */
  .charging-dock__hero-copy .charging-dock__display,
  .charging-dock__hero-copy .charging-dock__lead {
    margin-bottom: 0;
  }

  .charging-dock__hero-actions {
    order: 4;
    padding: var(--spacing-04) var(--spacing-05) 0;
    justify-content: center;
  }

  /* Match the home hero CTAs on mobile: side-by-side, equal-width pair,
     centered labels, home's compact padding/size. Each column caps at 11rem
     (per-track cap keeps tablet tidy) and the pair centers via
     justify-content — consistent in both the flex hero-copy and the block CTA
     section (a max-width + margin:auto would shrink only the flex one). */
  .charging-dock__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 11rem));
    justify-content: center;
    gap: var(--spacing-03);
  }

  /* Full-bleed render on mobile: no padding/border, image covers the band
     edge-to-edge; its bottom sits flush on the next section's border. */
  .charging-dock__frame--hero {
    order: 3;
    border: none;
    padding: 0;
    min-height: 340px;
  }
  /* Floating drones are a desktop delight; hide on the stacked mobile hero. */
  .charging-dock__frame--hero .dock-fx { display: none; }
  .dock-stage__control { bottom: var(--spacing-05); }

  .charging-dock__frame--hero .charging-dock__frame-img {
    position: static;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .charging-dock__compat {
    grid-template-columns: 1fr;
    gap: var(--spacing-07);
    background: #f5f1ea;
  }
  /* No centre rule when the section stacks. */
  .charging-dock__compat::before { display: none; }

  /* Mobile stacks image (first in DOM) on top, copy below on cream. */

  /* Image sits on a full-bleed white band that runs to the section's side and
     top edges (negative margins cancel the section padding), so it reads as a
     distinct white zone above the cream copy — no cream box or strip around it. */
  .charging-dock__compat-art {
    min-height: 0;
    background: #ffffff;
    margin-left: calc(-1 * var(--spacing-05));
    margin-right: calc(-1 * var(--spacing-05));
    margin-top: calc(-1 * var(--spacing-08));
    padding: var(--spacing-06) var(--spacing-05);
  }

  .charging-dock__compat-art .charging-dock__frame-img {
    width: 100%;
    height: auto;
  }

  /* Flex column so the cards' desktop grid-column spans (span 2/3) don't
     create implicit tracks and unequal widths — all cards full width. */
  .charging-dock__arch-grid {
    display: flex;
    flex-direction: column;
  }

  .charging-dock__milestones-grid {
    grid-template-columns: 1fr;
  }
}