/* =============================================================
   copilotBC — marketing landing page (apps/marketing/main.css)
   -------------------------------------------------------------
   Page-specific styles only. Tokens, primitives, components,
   marketing layer, motion utilities all come from
   design-system/. Anything reused across pages should graduate
   into design-system/components.css.
   ============================================================= */

/* ─── Page chrome ────────────────────────────────────────── */
body { background: var(--marketing-bg-default); overflow-x: hidden; }

.marketing-topbar {
  position: absolute; inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  color: var(--marketing-text-on-deep);
  pointer-events: none;
}
.marketing-topbar > * { pointer-events: auto; }
.marketing-topbar__brand {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 14;
}
.marketing-topbar__nav { display: flex; gap: var(--space-2); }
.marketing-topbar__nav .nav__item { color: var(--marketing-text-on-deep-muted); }
.marketing-topbar__nav .nav__item:hover { background: rgba(255,255,255,0.06); color: var(--color-neutral-0); text-decoration: none; }
@media (max-width: 720px) {
  .marketing-topbar__nav { display: none; }
  /* The CTA wraps to two lines on a phone and reaches the bottom-anchored
     scroll cue. Extra bottom padding lifts the centred hero content clear of
     the cue, and a shorter cue line keeps the gap comfortable. */
  .hero { padding-bottom: var(--space-24); }
  .scroll-cue { bottom: var(--space-5); gap: var(--space-1); }
  .scroll-cue__line { height: 32px; }
}

/* ─── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--marketing-gradient-deep);
  color: var(--marketing-text-on-deep);
  overflow: hidden;
  padding: var(--space-24) var(--space-6) var(--space-16);
}
.hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 30vh;
  background: var(--marketing-gradient-edge);
  pointer-events: none;
}
.hero__inner { max-width: 1100px; position: relative; z-index: 1; }
.hero__eyebrow { color: var(--marketing-text-on-deep-muted); }
.hero__heading {
  margin-top: var(--space-4);
  color: var(--color-neutral-0);
}
.hero__heading em {
  font-style: italic;
  color: var(--marketing-electric);
  font-variation-settings: "opsz" 144;
}
.hero__lead {
  margin: var(--space-6) auto 0;
  color: var(--marketing-text-on-deep-muted);
  max-width: 50ch;
}
.hero__cta {
  display: inline-flex; gap: var(--space-3);
  margin-top: var(--space-8);
  flex-wrap: wrap; justify-content: center;
}

.hero__glow {
  position: absolute;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  left: 50%; top: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(46,125,255,0.32), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.scroll-cue {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
  color: var(--marketing-text-on-deep-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  z-index: 2;
}
.scroll-cue__line {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, currentColor 40%, currentColor 60%, transparent);
  animation: scroll-cue-pulse 2.4s var(--ease-confident) infinite;
}
@keyframes scroll-cue-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue__line { animation: none; } }

/* ============================================================
   REEL — the scroll-pan moment
   The section is 4× viewport tall. Inside it, .reel__pin sticks
   to the top for the duration. JS computes --reel-progress
   (0..1) over the pin window and sets .reel[data-active-scene].
   ============================================================ */

/* Reel framing is handled by a JS *magnetic* snap (see main.js), not CSS
   scroll-snap: native scroll-snap (esp. iOS Safari) is inconsistent and with
   `proximity` leaves you stranded mid-frame. We keep scroll-snap off so the
   two don't fight. The .reel__snaps anchors below are now inert markers. */
html { scroll-snap-type: none; }

.reel {
  position: relative;
  /* One viewport of pinned space + one per frame transition. 4 frames → 4
     stops over 400dvh. dvh (not vh) so the pin matches the *actual* mobile
     viewport — with vh the pin was taller than the screen and never locked. */
  height: 400dvh;
  background: var(--color-neutral-0);
  --reel-progress: 0;
}

/* Snap anchors — one per frame, at each 100dvh boundary of the pin window. */
.reel__snaps { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.reel__snaps i {
  position: absolute;
  left: 0; width: 1px; height: 1px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.reel__snaps i:nth-child(1) { top: 0; }
.reel__snaps i:nth-child(2) { top: 100dvh; }
.reel__snaps i:nth-child(3) { top: 200dvh; }
.reel__snaps i:nth-child(4) { top: 300dvh; }

.reel__pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-8);
  overflow: hidden;
}

/* ── Left: copy column with crossfading scenes ───────────── */
.reel__copy {
  position: relative;
  min-height: 320px;
  max-width: 460px;
}
.reel__copy .scene {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity   500ms var(--ease-confident),
    transform 700ms var(--ease-confident);
  pointer-events: none;
}
.reel[data-active-scene="0"] .scene[data-scene="0"],
.reel[data-active-scene="1"] .scene[data-scene="1"],
.reel[data-active-scene="2"] .scene[data-scene="2"],
.reel[data-active-scene="3"] .scene[data-scene="3"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.reel__copy .scene__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-tertiary);
}
.reel__copy .scene__heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: var(--weight-medium);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-3);
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}
.reel__copy .scene__heading em {
  font-style: italic;
  color: var(--color-primary);
}
.reel__copy .scene__body {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  max-width: 38ch;
  line-height: var(--leading-relaxed);
}

/* ── Scene progress — small ticks indicating which scene ── */
.reel__scenes-meta {
  position: absolute;
  bottom: 0; left: 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.reel__ticks { display: flex; gap: 6px; }
.reel__tick {
  width: 24px; height: 2px;
  background: var(--color-border);
  border-radius: 2px;
  transition: background 400ms var(--ease-standard);
}
.reel[data-active-scene="0"] .reel__tick:nth-child(1),
.reel[data-active-scene="1"] .reel__tick:nth-child(2),
.reel[data-active-scene="2"] .reel__tick:nth-child(3),
.reel[data-active-scene="3"] .reel__tick:nth-child(4) {
  background: var(--color-primary);
}

/* ── Right: tilted macOS window with internal panorama ──── */
.reel__viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  perspective: 2200px;
  perspective-origin: 30% 50%;
  height: 100%;
  /* The window is wider than its column and pokes off the right
     edge for the slanted-at-the-side feel. */
  overflow: visible;
}

.mac-window {
  width: 122%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: var(--color-bg-surface);
  box-shadow:
    0 70px 140px -40px rgba(15, 23, 42, 0.45),
    0 30px 60px  -20px rgba(15, 23, 42, 0.20),
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(15,23,42,0.08);
  /* The slant. Rotated around the right edge so the window appears
     anchored to the side and recedes into depth. The slight scale
     factor is folded into the transform so it composites in one
     pass; do NOT add a transition here — this transform is driven
     1:1 by scroll position via --reel-progress, and a transition
     would queue on every scroll frame and feel laggy. */
  transform-origin: 100% 50%;
  transform:
    translateX(8%)
    rotateY(-22deg)
    rotateX(3deg)
    scale(calc(1 + var(--reel-progress, 0) * 0.04));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
}

.mac-window__chrome {
  height: 32px;
  background: linear-gradient(180deg, #f6f6f8 0%, #ececef 100%);
  border-bottom: 1px solid #d8d8de;
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  gap: 8px;
  flex-shrink: 0;
  position: relative;
}
.mac-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18);
}
.mac-dot--red    { background: #FF5F57; }
.mac-dot--yellow { background: #FEBC2E; }
.mac-dot--green  { background: #28C840; }
.mac-window__title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 12px;
  color: #6e6e73;
  font-weight: 500;
  pointer-events: none;
}

.mac-window__viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--color-bg-app);
}

.mac-window__panorama {
  display: flex;
  width: 400%;
  height: 100%;
  /* Each frame is 25% of panorama width = exactly the viewport.
     translateX 0 → -75% pans across all four frames. */
  transform: translate3d(calc(var(--reel-progress, 0) * -75%), 0, 0);
  will-change: transform;
}

.frame {
  flex: 0 0 25%;
  width: 25%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
/* Inside each frame we re-create a tiny app surface. .app-shell
   activates the app token overrides (smaller text, density). We
   override min-height so it lives inside our finite mac viewport. */
.frame.app-shell {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ── Mini app skeleton inside frames ─────────────────────── */
.mini-app {
  display: grid;
  grid-template-columns: 56px 1fr;
  height: 100%;
  background: var(--color-bg-app);
}
.mini-sidebar {
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.mini-sidebar__brand {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--color-primary);
  margin: 4px 0 12px 4px;
}
.mini-sidebar__item {
  width: 40px; height: 36px;
  display: grid; place-items: center;
  color: var(--color-text-tertiary);
  border-radius: 6px;
  flex-shrink: 0;
}
.mini-sidebar__item.is-active {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}
.mini-sidebar__item svg { width: 16px; height: 16px; }

.mini-main { display: flex; flex-direction: column; min-width: 0; }
.mini-topbar {
  height: 44px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}
.mini-topbar__title {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.mini-topbar__sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-left: 8px;
  font-weight: var(--weight-regular);
}
.mini-content { flex: 1; overflow: hidden; padding: 12px 16px; }

/* Scoped type/spacing inside the mini app, since the panorama
   fits in a small area regardless of viewport size. */
.frame .mini-content {
  font-size: 11px;
  line-height: 1.45;
}
.frame h6 { font-size: 9px; }

/* ── Frame 1: Schedule ───────────────────────────────────── */
.sched-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
}
.sched-row:last-child { border-bottom: 0; }
.sched-row__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
}
.sched-row__name { font-weight: var(--weight-medium); color: var(--color-text-primary); font-size: 11px; }
.sched-row__sub  { font-size: 10px; color: var(--color-text-secondary); }
.sched-row--now {
  background: var(--color-primary-tint);
  border-radius: 6px;
}
.sched-row--now .sched-row__time { color: var(--color-primary); font-weight: var(--weight-semibold); }
.sched-pill {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-neutral-0);
}
.sched-status {
  font-size: 10px;
  color: var(--color-success-bold);
  font-weight: var(--weight-medium);
}

/* ── Frame 2: Pre-trip checklist ─────────────────────────── */
.pretrip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.pretrip-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 11px;
}
.pretrip-item__check {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pretrip-item--done {
  border-color: var(--color-success-bold);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.pretrip-item--done .pretrip-item__check {
  background: var(--color-success-bold);
  border-color: var(--color-success-bold);
}
.pretrip-item--current {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}
.pretrip-item--current .pretrip-item__check {
  border-color: var(--color-primary);
}
.pretrip-progress {
  margin-top: 4px;
  display: flex; align-items: center; gap: 8px;
  font-size: 10px;
  color: var(--color-text-secondary);
}
.pretrip-progress__bar {
  flex: 1;
  height: 4px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.pretrip-progress__fill {
  height: 100%;
  width: 75%;
  background: var(--color-primary);
}

/* ── Frame 3: Readiness score ────────────────────────────── */
.readiness-layout {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  align-items: start;
}
.readiness-gauge {
  --pct: 72;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: conic-gradient(var(--color-primary) calc(var(--pct) * 1%), var(--color-bg-subtle) 0);
  display: grid; place-items: center;
  position: relative;
}
.readiness-gauge::before {
  content: "";
  position: absolute; inset: 8px;
  background: var(--color-bg-surface);
  border-radius: 50%;
}
.readiness-gauge__num {
  position: relative;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  font-variation-settings: "opsz" 36;
}
.readiness-gauge__sub {
  position: relative;
  font-size: 9px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-top: -2px;
}
.skill-row {
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.skill-row__label { font-size: 11px; color: var(--color-text-primary); }
.skill-row__bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-pill);
  position: relative;
}
.skill-row__fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}
.skill-row__pct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
  text-align: right;
}

/* ── Frame 4: Lesson report ──────────────────────────────── */
.report-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
}
.report-row:last-child { border-bottom: 0; }
.report-row__label { color: var(--color-text-primary); }
.report-mark {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-align: center;
}
.report-mark--good     { background: var(--color-success-bg); color: var(--color-success-text); }
.report-mark--working  { background: var(--color-warning-bg); color: var(--color-warning-text); }
.report-mark--needs    { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.report-comment {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  font-size: 10px;
  color: var(--color-text-secondary);
  font-style: italic;
  border-left: 2px solid var(--color-primary);
}

/* ─── Mobile: collapse the 3D effect, stack copy + window ── */
@media (max-width: 900px) {
  /* Stay pinned on mobile too — copy stacked above the app window, both
     fitting one viewport. Each swipe snaps to the next frame. */
  .reel__pin {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    gap: var(--space-5);
    padding: var(--space-10) var(--space-5) var(--space-8);
  }
  /* Copy keeps crossfading (scenes stay absolutely stacked) — give the column
     a fixed slice of the viewport so the absolute scenes have room. */
  .reel__copy { min-height: 0; height: 34dvh; max-width: none; }
  .reel__copy .scene__heading { font-size: clamp(26px, 7vw, 38px); margin-top: var(--space-2); }
  .reel__copy .scene__body { font-size: var(--text-sm); max-width: none; margin-top: var(--space-3); }
  .reel__viewport { perspective: none; justify-content: center; }
  .mac-window {
    width: 100%;
    transform: none;
    scale: 1 !important;
    aspect-ratio: 16 / 11;
  }
  .reel__scenes-meta { display: none; }
}

/* Reduced motion (or no-JS): no pin, no snap — a calm static stack where
   every scene shows in full and the window sits on the first frame. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .reel { height: auto; }
  .reel__snaps { display: none; }
  .reel__pin {
    position: relative;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    padding: var(--space-16) var(--space-5);
  }
  .reel__copy { min-height: 0; height: auto; }
  .reel__copy .scene {
    position: relative; opacity: 1; transform: none; pointer-events: auto;
    margin-bottom: var(--space-12);
  }
  .reel__scenes-meta { display: none; }
  .mac-window__panorama { transform: none; }
}

/* ─── Manifesto ──────────────────────────────────────────── */
.manifesto blockquote {
  font-family: var(--font-display);
  font-size: var(--marketing-display-md);
  font-weight: var(--weight-medium);
  line-height: var(--marketing-display-leading);
  letter-spacing: var(--marketing-display-tracking);
  color: var(--color-text-primary);
  text-wrap: balance;
  font-variation-settings: "opsz" 144;
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
}
.manifesto blockquote em {
  font-style: italic;
  color: var(--color-primary);
}
.manifesto cite {
  display: block;
  margin-top: var(--space-6);
  font-style: normal;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-align: center;
}

/* ─── Tap don't type split ───────────────────────────────── */
.split {
  display: grid; gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.1fr 1fr; gap: var(--space-20); }
}
.split__media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(120% 80% at 0% 0%,  var(--color-blue-100) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 100%, var(--color-blue-200) 0%, transparent 60%),
    var(--marketing-cream-100);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.split__media::after {
  content: "Photography placeholder · ask design before shipping";
  position: absolute; bottom: var(--space-3); left: var(--space-4);
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ─── Big stats deep ─────────────────────────────────────── */
.big-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  border-top: 1px solid var(--marketing-border-on-deep);
  padding-top: var(--space-10);
}
.big-stat__value {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-neutral-0);
  font-variation-settings: "opsz" 144;
}
.big-stat__label {
  margin-top: var(--space-3);
  color: var(--marketing-text-on-deep-muted);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .big-stats { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ─── CTA panel ──────────────────────────────────────────── */
.cta-panel { text-align: center; }
.cta-panel h2 {
  font-family: var(--font-display);
  font-size: var(--marketing-display-md);
  font-weight: var(--weight-medium);
  line-height: var(--marketing-display-leading);
  letter-spacing: var(--marketing-display-tracking);
  text-wrap: balance;
  margin-bottom: var(--space-6);
  font-variation-settings: "opsz" 144;
  max-width: 22ch;
  margin-inline: auto;
}

/* ─── Canadian data residency ───────────────────────────── */
/* A flat navy "secure node" panel — an outlined map of Canada with a
   single glowing Toronto node (the one accent) — pairs with a Fraunces
   statement. The glow is localized to the node, not a surface gradient,
   so it reads as a real status indicator, not decorative fill. */
.canada-residency__grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .canada-residency__grid {
    grid-template-columns: minmax(260px, 0.78fr) 1.22fr;
    gap: var(--space-16);
  }
}
.canada-residency em {
  font-style: italic;
  color: var(--color-primary);
}

.residency-card {
  text-align: center;
  padding: var(--space-7) var(--space-7) var(--space-6);
  background: var(--marketing-navy-900);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-2xl);
  box-shadow: 0 1px 2px rgba(5, 11, 31, 0.5), 0 30px 60px -34px rgba(5, 11, 31, 0.8);
}
.residency-card__map {
  width: 100%;
  margin-bottom: var(--space-5);
}
.residency-card__map img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: contain;
}
.residency-card__region {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 36;
  color: var(--color-neutral-0);
}
.residency-card__meta {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.5);
}
.residency-card__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: var(--space-5) auto;
  width: 56px;
}
.residency-card__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.66);
}
.residency-card__status {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--marketing-electric);
  box-shadow: 0 0 0 3px rgba(46, 125, 255, 0.18);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .residency-card { padding: var(--space-6) var(--space-6) var(--space-5); }
}

/* ─── Security trust grid ────────────────────────────────── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.trust-card {
  padding: var(--space-6);
  background: var(--color-bg-default);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: box-shadow 260ms ease, border-color 260ms ease, transform 260ms ease;
}
.trust-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-primary) 12%, transparent);
  transform: translateY(-2px);
}
.trust-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  display: grid; place-items: center;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.trust-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.trust-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
}
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }

/* ─── Footer ─────────────────────────────────────────────── */
.marketing-footer {
  padding: var(--space-16) var(--space-6) var(--space-10);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}
.marketing-footer .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
}
.marketing-footer h6 {
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
}
.marketing-footer ul { display: flex; flex-direction: column; gap: var(--space-2); }
.marketing-footer__brand {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 36;
}
.marketing-footer__tagline { margin-top: var(--space-2); max-width: 28ch; }
.marketing-footer__legal {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
@media (max-width: 720px) {
  .marketing-footer .container { grid-template-columns: 1fr 1fr; }
  .marketing-footer__legal { flex-direction: column; gap: var(--space-2); }
}

/* ─── ICBC disclaimer footnote ──────────────────────────────
   Small grey note tying an asterisk (on a form name / strong claim)
   to a softened disclaimer + Terms of Service link. */
.icbc-note {
  margin-top: var(--space-6);
  max-width: 64ch;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-tertiary);
}
.icbc-note a { color: inherit; text-decoration: underline; }
.icbc-note sup, sup.icbc-star { font-weight: 600; }