.price-cad,
.currency-cad {
  display: none;
}

html[data-currency="CAD"] .price-usd,
html[data-currency="CAD"] .currency-usd {
  display: none;
}

html[data-currency="CAD"] .price-cad,
html[data-currency="CAD"] .currency-cad {
  display: inline;
}

html[data-currency="CAD"] p.currency-cad,
html[data-currency="CAD"] .pricing-note .currency-cad {
  display: revert;
}

.site-prefs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: 4px;
}

.site-currency {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.1));
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink, #182130) 4%, transparent);
}

.site-currency-btn {
  min-width: 42px;
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: var(--muted, #42597a);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.site-currency-btn[aria-pressed="true"] {
  background: var(--blue, #0078d4);
  color: var(--on-blue, #fff);
}

html[data-site-theme="dark"] .site-currency-btn[aria-pressed="true"] {
  background: rgba(77, 166, 255, 0.18);
  color: #cfe6ff;
}

.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 88px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #182130) 4%, transparent);
  color: var(--ink, #182130);
  cursor: pointer;
}

.site-theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

.site-theme-track { width: 32px; height: 18px; padding: 2px; border-radius: 20px; background: var(--muted, #42597a); flex: none; }
.site-theme-thumb { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.site-theme-toggle[aria-checked="true"] .site-theme-track { background: var(--blue, #0078d4); }
.site-theme-toggle[aria-checked="true"] .site-theme-thumb { transform: translateX(14px); }
.site-theme-toggle[aria-checked="false"] .site-theme-dark,
.site-theme-toggle[aria-checked="true"] .site-theme-light { color: var(--muted, #42597a); }
.site-theme-toggle:focus-visible { outline: 2px solid var(--blue, #0078d4); outline-offset: 3px; }
html[data-site-theme="light"] { color-scheme: light; }
@media (prefers-reduced-motion: reduce) { .site-theme-thumb { transition: none; } }

html[data-site-theme="dark"],
html[data-site-theme="dark"] body {
  color-scheme: dark;
  --bg: #070b15;
  --bg2: #060911;
  --paper: #0e1524;
  --paper2: #141d30;
  --ink: #e6edf5;
  --muted: #a1b1c4;
  --quiet: #8b9cb1;
  --line: rgba(148, 178, 220, 0.14);
  --line-strong: rgba(77, 166, 255, 0.5);
  --blue: #4da6ff;
  --blue2: #7cc0ff;
  --green: #1ed96b;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
  --surface: #0b111e;
  --surface-2: #0e1524;
  --blue-ink: #7cc0ff;
  --nav-bg: rgba(7, 11, 21, 0.9);
  --nav-line: rgba(148, 178, 220, 0.1);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 30px rgba(0, 0, 0, 0.35);
  --badge-ink: #9fd0ff;
  --badge-fill: #9fd0ff;
  --badge-fill-soft: rgba(77, 166, 255, 0.16);
  --badge-line: rgba(77, 166, 255, 0.45);
  --s0: #0b111e;
  --s1: #0e1524;
  --s2: #141d30;
  --bd: rgba(148, 178, 220, 0.12);
  --bd2: rgba(148, 178, 220, 0.22);
  --tx: #e6edf5;
  --tx2: #a1b1c4;
  --tx3: #8b9cb1;
  --amber: #f0b429;
  --red: #f05050;
  --indigo: #7c5cff;
  --blue-2: #7cc0ff;
  --on-blue: #041018;
  --on-badge: #04121c;
  --card: rgba(14, 21, 36, 0.94);
  --card-soft: rgba(14, 21, 36, 0.62);
  --card-veil: rgba(14, 21, 36, 0.9);
  --card-glass: rgba(14, 21, 36, 0.8);
  --card-thin: rgba(14, 21, 36, 0.6);
  --frame: #0e1524;
  --tint: rgba(94, 178, 242, 0.09);
  --tint-2: rgba(94, 178, 242, 0.15);
  --chrome: rgba(9, 14, 25, 0.92);
  --stage: #0b111e;
  --focus-ring: #9fd0ff;
  --link-ink: #9fd0ff;
  --link-ink-hover: #cfe6ff;
  --link-line: rgba(77, 166, 255, 0.5);
  background: #070b15;
}

/* The palette block above also matches body, and would paint it opaque. The
   backdrop layers (.canvas-bg, .legal-bg and their light pools) sit at a
   negative z-index under body, so an opaque body hides the whole lit canvas.
   html carries the base colour; body stays clear. */
html[data-site-theme="dark"] body {
  color: var(--ink);
  background: transparent;
}

/* CoLateral Dark is a deep near-black navy lit by soft colour fields. The
   backdrop itself (.canvas-bg / .legal-bg and its light pools) is painted by
   site-atmosphere.css so every page shares one lit canvas. */

/* The bar's glass (fill, blur, border) is drawn by site-header.css from
   --nav-bg and --nav-line above; nothing else here restates it. */

html[data-site-theme="dark"] .plan-card,
html[data-site-theme="dark"] .pack-card,
html[data-site-theme="dark"] .faq-item,
html[data-site-theme="dark"] .plan-detail article,
html[data-site-theme="dark"] .pricing-cta,
html[data-site-theme="dark"] .cvf,
html[data-site-theme="dark"] .pack-feature-side,
html[data-site-theme="dark"] .pack-addons,
html[data-site-theme="dark"] .pack-addon,
html[data-site-theme="dark"] .legal-card,
html[data-site-theme="dark"] .card {
  background: var(--atm-card, var(--card));
  border-color: var(--atm-card-line, rgba(148, 178, 220, 0.12));
  box-shadow: var(--atm-card-shadow);
}

html[data-site-theme="dark"] .plan-card.is-later,
html[data-site-theme="dark"] .plan-card.is-sold,
html[data-site-theme="dark"] .pack-card.is-planned {
  background: var(--card-soft);
}


/* Frame edges follow the palette alongside the themed workspace captures. */
html[data-site-theme="dark"] .tool-shot img,
html[data-site-theme="dark"] .video-frame,
html[data-site-theme="dark"] .shot img {
  border-color: var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

html[data-site-theme="dark"] .social-btn:hover {
  background: rgba(77, 166, 255, 0.16);
}

html[data-site-theme="dark"] .btn:focus-visible,
html[data-site-theme="dark"] .plan-cta:focus-visible,
html[data-site-theme="dark"] .text-link:focus-visible,
html[data-site-theme="dark"] .navlinks a.nav-cta:focus-visible {
  box-shadow: 0 0 0 6px rgba(77, 166, 255, 0.28);
}

@media (max-width: 760px) {
  .site-prefs {
    margin-left: 0;
  }

  .site-currency {
    display: none;
  }

  .site-theme-toggle {
    width: 94px;
    height: 40px;
  }
}


/* Cards carry a soft, static blue halo in dark. It used to breathe on an 8s
   loop on every card at once, which read as a screensaver rather than light;
   the glow now sits still. */
html[data-site-theme="dark"] :is(
  .plan-card, .pack-card, #packs .pack-card, .faq-item, .legal-card, .card, .panel,
  .proof-card, .case-card, .responsibility, .task-map, .topology-panel,
  .topology-card, .plan-detail article, .pricing-cta, .pack-feature-side,
  .pack-addons, .stream-card, .reel-slide
) {
  box-shadow: var(--atm-card-halo);
}