/* ============================================================================
   KEYNIGHT — official dark re-theme (additive r28 extension)
   Re-skins the whole public site with the brand's own stage palette from
   content/tokens.json (ink #07080B · key cyan #4BEAFF · blue spectrum)
   so the Key Journey film is a native citizen of every page. Additive only:
   keylight.css is untouched; this layer simply wins by cascade order.
   ============================================================================ */

:root {
  /* --- canvas & typography ------------------------------------------------ */
  --canvas-base: #07080B;
  --bg: #07080B;
  --text-main: #F5F7FA;
  --text-body: #C6CCD9;
  --text-muted: #A2A9B8;
  --text-dim: #6B7280;

  /* --- liquid glass → obsidian glass -------------------------------------- */
  --glass-bg: rgba(13, 15, 20, 0.58);
  --glass-bg-hover: rgba(19, 22, 30, 0.78);
  --glass-border: rgba(245, 247, 250, 0.10);
  --glass-border-subtle: rgba(245, 247, 250, 0.06);
  --glass-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30);
  --glass-shadow-hover: 0 26px 60px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(75, 234, 255, 0.10);
  --glass-specular: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.06), inset 0 -1.5px 2px rgba(75, 234, 255, 0.03);
  --bg-surface: rgba(13, 15, 20, 0.74);

  /* --- nude scale → ink scale ---------------------------------------------- */
  --nude-50: rgba(20, 23, 31, 0.68);
  --nude-100: #14171F;
  --nude-200: #1D212B;
  --nude-dark: #A9B2C2;

  /* --- accent pills (brand-faithful) --------------------------------------- */
  --peach-bg: rgba(74, 144, 255, 0.10);
  --peach-border: rgba(74, 144, 255, 0.34);
  --peach-text: #7FB0FF;

  --amber-bg: rgba(91, 147, 255, 0.10);
  --amber-border: rgba(91, 147, 255, 0.32);
  --amber-text: #8FAEFF;

  --green-soft: #3FDD9A;
  --green-soft-bg: rgba(63, 221, 154, 0.10);
  --green-soft-border: rgba(63, 221, 154, 0.32);

  --red-soft: #FF5A5F;
  --red-soft-bg: rgba(255, 90, 95, 0.10);
  --red-soft-border: rgba(255, 90, 95, 0.30);

  /* --- key accent (CTA) ----------------------------------------------------- */
  --accent-primary: #4BEAFF;
  --accent-primary-hover: #8CF0FF;

  --border: rgba(245, 247, 250, 0.10);
  --border-focus: #4BEAFF;
}

/* ---------------- canvas --------------------------------------------------- */
html { background-color: var(--canvas-base); }
body { background: var(--canvas-base); color: var(--text-body); }
::selection { background: rgba(75, 234, 255, 0.28); color: #F5F7FA; }

/* sub-brand scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #07080B; }
::-webkit-scrollbar-thumb { background: #1D212B; border-radius: 99px; border: 2px solid #07080B; }
::-webkit-scrollbar-thumb:hover { background: #2A3140; }

/* ---------------- liquid mesh → key nebula --------------------------------- */
.liquid-mesh-wrap { opacity: 0.5; filter: blur(70px); }
.mesh-orb { mix-blend-mode: screen; }
.mesh-orb-peach {
  background: radial-gradient(circle, rgba(75, 234, 255, 0.30) 0%, rgba(75, 234, 255, 0) 70%);
}
.mesh-orb-lavender {
  background: radial-gradient(circle, rgba(124, 92, 255, 0.26) 0%, rgba(124, 92, 255, 0) 70%);
}
.mesh-orb-champagne {
  background: radial-gradient(circle, rgba(74, 144, 255, 0.26) 0%, rgba(74, 144, 255, 0) 70%);
}
.mesh-orb-mint {
  background: radial-gradient(circle, rgba(63, 221, 154, 0.18) 0%, rgba(63, 221, 154, 0) 70%);
}

/* ---------------- header ---------------------------------------------------- */
.header-inner {
  background: rgba(9, 11, 16, 0.66);
  border: 1.5px solid rgba(245, 247, 250, 0.10);
  box-shadow: 0 16px 38px -14px rgba(0, 0, 0, 0.6), var(--glass-specular);
}
.brand-icon-box {
  background: rgba(75, 234, 255, 0.08);
  border: 1px solid rgba(75, 234, 255, 0.22);
  box-shadow: 0 0 14px rgba(75, 234, 255, 0.18);
}
.nav-links a:hover { background: rgba(245, 247, 250, 0.07); }
.nav-links a.active, .desktop-nav-list a.active { color: var(--text-main); }
.header-icon-button {
  background: rgba(20, 23, 31, 0.68);
  border-color: var(--glass-border);
  color: var(--text-body);
}
.site-menu[open] > .header-icon-button { background: rgba(75, 234, 255, 0.12); border-color: rgba(75, 234, 255, 0.30); }
.header-cta {
  background: linear-gradient(135deg, #4BEAFF 0%, #28C8E4 100%);
  border: 1px solid rgba(75, 234, 255, 0.65);
  color: #05222B !important;
  box-shadow: 0 8px 22px -6px rgba(75, 234, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.header-cta:hover { background: linear-gradient(135deg, #8CF0FF 0%, #4BEAFF 100%); }
.header-popover, .site-menu-popover {
  background: rgba(11, 13, 19, 0.92);
  border-color: var(--glass-border);
  box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.75);
}
.mobile-nav-list a:hover, .lang-menu-option:hover { background: rgba(245, 247, 250, 0.06); }
.lang-menu-option.active { color: var(--accent-primary); }
.menu-divider { background: var(--border); }

/* ---------------- buttons ---------------------------------------------------- */
.btn-primary {
  background: linear-gradient(135deg, #4BEAFF 0%, #28C8E4 100%) !important;
  color: #05222B !important;
  box-shadow: 0 10px 26px -8px rgba(75, 234, 255, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8CF0FF 0%, #4BEAFF 100%) !important;
  box-shadow: 0 14px 32px -8px rgba(75, 234, 255, 0.65);
}
.btn-secondary, .btn-glass {
  background: rgba(20, 23, 31, 0.62);
  border: 1.5px solid rgba(245, 247, 250, 0.12);
  color: var(--text-main);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), var(--glass-specular);
}
.btn-secondary:hover, .btn-glass:hover {
  background: rgba(28, 32, 43, 0.8);
  border-color: rgba(75, 234, 255, 0.25);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.btn-outline { background: rgba(13, 15, 20, 0.4); }
.btn-outline:hover { background: rgba(20, 23, 31, 0.75); border-color: rgba(75, 234, 255, 0.3); }
.btn-outline[style] { background: rgba(13, 15, 20, 0.4); }

/* ---------------- pills, badges, kickers ------------------------------------- */
.kicker-badge { border-color: rgba(75, 234, 255, 0.28); }
.kicker-dot { background: #4BEAFF; box-shadow: 0 0 8px rgba(75, 234, 255, 0.8); }
.tag-pill { background: rgba(20, 23, 31, 0.68); }
.service-step-num { color: rgba(75, 234, 255, 0.65); }

/* ---------------- cards & pricing -------------------------------------------- */
.pricing-card.featured {
  border-color: rgba(75, 234, 255, 0.55);
  box-shadow: 0 20px 48px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(75, 234, 255, 0.12), var(--glass-specular);
}
.pricing-period-btn:hover:not(.active) { background: rgba(245, 247, 250, 0.05); }

/* ---------------- hero -------------------------------------------------------- */
.hero-headline {
  background: linear-gradient(180deg, #FFFFFF 24%, #8CA0B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------- forms & wizards --------------------------------------------- */
.form-input, .form-select, .form-textarea {
  background: rgba(13, 15, 20, 0.6);
  border: 1.5px solid rgba(245, 247, 250, 0.12);
  color: var(--text-main);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-dim); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(75, 234, 255, 0.14);
  background: rgba(13, 15, 20, 0.8);
}
.option-card {
  background: rgba(20, 23, 31, 0.62);
  border: 1.5px solid rgba(245, 247, 250, 0.10);
}
.option-card:hover { border-color: rgba(75, 234, 255, 0.3); }
.option-card.selected, .option-card[aria-checked="true"], .option-card.active {
  border-color: rgba(75, 234, 255, 0.6);
  background: rgba(75, 234, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(75, 234, 255, 0.2);
}
select.form-select, .form-select { color-scheme: dark; }

/* ---------------- command palette --------------------------------------------- */
.cmd-modal { background: rgba(4, 6, 9, 0.55); }
.cmd-box {
  background: rgba(11, 13, 19, 0.94);
  border: 1.5px solid rgba(245, 247, 250, 0.12);
  box-shadow: 0 28px 64px -16px rgba(0, 0, 0, 0.8);
}
.cmd-input-wrap { border-bottom: 1px solid rgba(245, 247, 250, 0.07); }
.cmd-input { color: var(--text-main); }
.cmd-input::placeholder { color: var(--text-dim); }
.cmd-item:hover, .cmd-item.active { background: rgba(75, 234, 255, 0.08); }
.cmd-item kbd, .cmd-input-wrap kbd {
  background: rgba(20, 23, 31, 0.8);
  border-color: rgba(245, 247, 250, 0.14);
  color: var(--text-dim);
}
.cmd-floating-pill {
  background: rgba(11, 13, 19, 0.7);
  border: 1.5px solid rgba(245, 247, 250, 0.1);
  color: var(--text-muted);
}
.cmd-floating-pill:hover { border-color: rgba(75, 234, 255, 0.35); color: var(--text-main); }

/* ---------------- footer ------------------------------------------------------- */
.footer {
  border-top: 1.5px solid rgba(245, 247, 250, 0.08);
  background: rgba(9, 11, 16, 0.6);
}
.footer a:hover { color: var(--accent-primary) !important; }

/* ---------------- data & document surfaces -------------------------------------- */
table { color: var(--text-body); }
th { color: var(--text-main); }
pre, code, kbd.samp {
  background: rgba(20, 23, 31, 0.8);
  border-color: var(--border);
  color: #B8F4FF;
}
hr { border-color: var(--border); }

/* images with baked-on light frames sit too loudly on ink: soften them */
.card img, .grid-2 img, .grid-3 img { border-radius: 12px; }

/* ---------------- reduced motion stays untouched ------------------------------- */

/* mobile: keep ink deep, nebula subtle.
   Mother CSS strips blend-mode on touch/small screens (perf); re-assert screen
   so the recolored orbs never wash the ink canvas to gray. */
@media (max-width: 768px) {
  .liquid-mesh-wrap { opacity: 0.24; }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .liquid-mesh-wrap { opacity: 0.22; filter: blur(38px); }
  .mesh-orb { mix-blend-mode: screen; }
}

/* mother's mobile light-canvas replacement (html.keylight-mobile-runtime body
   paints warm radials at 0.34 alpha) — re-tone to key/cyan ambience on ink;
   selector specificity must beat the mother rule, this sheet already loads last */
@media (max-width: 760px) {
  html.keylight-mobile-runtime body {
    /* r30: percentage stops on an 11,000px-tall body stretched these glows over the whole page (phone background
       was ~3x brighter than desktop). Fixed-size, non-repeating glows keep the ink canvas as dark as desktop. */
    background-image: radial-gradient(circle 360px at 92% 0, rgba(75, 234, 255, 0.07), transparent),
      radial-gradient(circle 320px at 0 560px, rgba(124, 92, 255, 0.05), transparent);
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  html.keylight-mobile-runtime .header-inner,
  html.keylight-mobile-runtime .card,
  html.keylight-mobile-runtime .wizard-box,
  html.keylight-mobile-runtime .glass-panel {
    box-shadow: 0 9px 24px -14px rgba(0, 0, 0, 0.65);
  }
}

/* ---------------- public content blocks (additive overrides) -----------------
   Mother ships these cards with baked light chrome (white gradients on
   .glass-panel, pastel ship-logs, light trust/configurator panes, the
   interactive system map). Re-tone them to obsidian glass on ink. */
.glass-panel {
  border: 1px solid rgba(245, 247, 250, 0.10);
  background: linear-gradient(135deg, rgba(17, 20, 27, 0.88), rgba(11, 13, 19, 0.72));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), var(--glass-specular);
}
.ship-log-card { background: rgba(15, 18, 25, 0.75); }
.ship-log-meta { color: var(--text-dim); }
.ship-log-meta span { color: var(--green-soft); }
.ship-log-card h2 { color: var(--text-main); }
.ship-log-card p { color: var(--text-muted); }
.public-back-link { color: var(--green-soft); }
.public-back-link:hover { color: var(--accent-primary); }
.ship-log-detail-grid section { border-color: var(--border); background: rgba(20, 23, 31, 0.55); }
.ship-log-detail-grid h2 { color: var(--accent-primary); }
.ship-log-steps, .ship-log-proof { color: var(--text-muted); }
.ship-log-note {
  border-inline-start-color: var(--green-soft);
  background: linear-gradient(100deg, rgba(63, 221, 154, 0.10), rgba(124, 92, 255, 0.07));
}
.ship-log-note strong { color: var(--green-soft); }
.ship-log-note p { color: var(--text-muted); }

.configurator-grid label { color: var(--text-muted); }
.configurator-privacy { color: var(--text-dim); }
.configurator-result {
  border-color: rgba(63, 221, 154, 0.35);
  background: linear-gradient(130deg, rgba(63, 221, 154, 0.10), rgba(75, 234, 255, 0.06));
}
.configurator-result[data-kind="error"] {
  border-color: rgba(255, 90, 95, 0.4);
  background: rgba(255, 90, 95, 0.08);
  color: var(--red-soft);
}
.configurator-result[data-kind="busy"] { color: var(--text-muted); }
.configurator-result h2 { color: var(--text-main); }
.configurator-fit { color: var(--green-soft); }
.configurator-facts strong, .configurator-facts span {
  border-color: rgba(63, 221, 154, 0.28);
  background: rgba(63, 221, 154, 0.08);
  color: var(--green-soft);
}
.configurator-next-step { color: var(--text-muted); }
.configurator-qualified-notice { color: var(--text-dim); }

.trust-card { background: rgba(15, 18, 25, 0.75); }
.trust-card h2 { color: var(--text-main); }
.trust-card p { color: var(--text-muted); }
.trust-boundary {
  border-color: rgba(74, 144, 255, 0.45);
  background: rgba(74, 144, 255, 0.06);
}
.trust-boundary strong { color: var(--peach-text); }
.trust-boundary p { color: var(--text-muted); }

/* interactive system map */
.system-map-flow::before {
  background: linear-gradient(90deg, rgba(61,123,255,.55), rgba(124,92,255,.55), rgba(75,234,255,.65));
  opacity: .55;
}
.system-map-node {
  border-color: rgba(245, 247, 250, 0.12);
  background: rgba(17, 20, 27, 0.85);
  color: var(--text-body);
}
.system-map-node:hover, .system-map-node:focus-visible, .system-map-node.active {
  border-color: rgba(75, 234, 255, 0.65);
  box-shadow: 0 8px 22px rgba(75, 234, 255, 0.14), 0 0 0 1px rgba(75, 234, 255, .12);
}
.system-map-node.active strong { color: var(--accent-primary); }
.system-map-node strong { color: var(--text-main); }
.system-map-node small { color: var(--text-dim); }
.system-map-detail {
  background: linear-gradient(110deg, rgba(124, 92, 255, 0.10), rgba(75, 234, 255, 0.07));
  border: 1px solid rgba(245, 247, 250, 0.08);
}
.system-map-detail-kicker { color: var(--green-soft); }
.system-map-detail h2 { color: var(--text-main); }
.system-map-detail p { color: var(--text-muted); }
.system-map-caption { color: var(--text-dim); }

/* checkout funnel chrome (app/sales.py) */
.sales-checkout-intro h1 { color: var(--text-main); }
.sales-checkout-intro p { color: var(--text-muted); }
.sales-security-note { color: var(--text-dim) !important; border-color: var(--green-soft) !important; }
.sales-checkout-card .form-label { color: var(--text-muted); }
.sales-checkout-message {
  background: rgba(63, 221, 154, 0.08);
  border-color: rgba(63, 221, 154, 0.3);
  color: var(--green-soft);
}
.sales-checkout-message.error {
  background: rgba(255, 90, 95, 0.08);
  border-color: rgba(255, 90, 95, 0.3);
  color: var(--red-soft);
}

/* touch fallback parity: mother's touch media repaints .card/.wizard-box/
   .glass-panel/.footer/.header-inner with light rgba(.88) — re-ink those too */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .card, .wizard-box, .glass-panel { background: rgba(13, 15, 20, 0.86); }
  .header-inner { background: rgba(9, 11, 16, 0.85); }
  .footer { background: rgba(9, 11, 16, 0.8); }
}

/* sales-checkout.css loads via extra_head AFTER this sheet — prefix with body
   to win specificity over its same-weight light rules regardless of order */
body .sales-quote { border-color: rgba(245,247,250,.10); background: rgba(20,23,31,.72); }
body .sales-quote-row.total { border-top-color: rgba(245,247,250,.12); }
body .sales-quote-row.discount { color: var(--green-soft); }
body .sales-checkout-message { color: var(--green-soft); background: rgba(63,221,154,.10); }
body .sales-checkout-message.error { color: var(--red-soft); background: rgba(255,90,95,.09); }
body .sales-order-status { background: rgba(20,23,31,.68); color: var(--text-muted); }
body .sales-order-status strong { color: var(--text-main); }
body .sales-delivery-secret { border-color: rgba(63,221,154,.3); background: rgba(63,221,154,.09); }
body .sales-delivery-secret code { color: #A8F5D0; }
body .sales-delivery-file { background: rgba(20,23,31,.72); }
body .sales-delivery-file a { color: var(--accent-primary); }
body #sales-card-receipt { background: rgba(74, 144, 255, 0.08); border: 1px solid rgba(74, 144, 255, 0.25); }
body .sales-card-details { color: #8FAEFF; }
body .sales-card-details span { color: #A9C4FF; }
body .sales-card-details small { color: #8FA3CC; }

/* ---------------- automation command center (demo) ------------------------ */
.automation-command-center {
  border-color: rgba(245, 247, 250, 0.12);
  background: linear-gradient(145deg, rgba(15, 18, 25, 0.92), rgba(9, 11, 16, 0.96));
}
.automation-command-center::before {
  background: radial-gradient(circle at 9% 4%, rgba(63, 221, 154, 0.13), transparent 25%),
    radial-gradient(circle at 88% 10%, rgba(124, 92, 255, 0.14), transparent 28%),
    radial-gradient(circle at 60% 96%, rgba(75, 234, 255, 0.10), transparent 30%);
}
.automation-scenario-strip { background: rgba(20, 23, 31, 0.55); }
.automation-scenario-card { background: rgba(20, 23, 31, 0.6); border-color: rgba(245,247,250,.10); color: var(--text-body); }
.automation-scenario-card:hover { background: rgba(28, 32, 43, 0.85); border-color: rgba(75,234,255,.3); }
.automation-scenario-card strong, .automation-scenario-card span { color: var(--text-main); }
.automation-scenario-card small, .automation-scenario-card p { color: var(--text-dim); }
.automation-replay { color: var(--green-soft); background: rgba(63, 221, 154, 0.10); }
.automation-control-deck { background: linear-gradient(155deg, rgba(17, 20, 27, 0.9), rgba(13, 15, 20, 0.8)); }
.automation-demo-input { color: var(--text-main); background: rgba(13, 15, 20, 0.66); border-color: rgba(245,247,250,.12); }
.automation-demo-input::placeholder { color: var(--text-dim); }
.automation-demo-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 4px rgba(75,234,255,.14); }
.automation-privacy-note > span { color: var(--green-soft); }
.automation-privacy-note { color: var(--text-dim); }
.automation-insight-label { color: var(--accent-primary); }
.automation-events-heading p { color: var(--text-dim); }
.automation-events-heading strong { color: var(--text-main); }
.automation-event-row { background: rgba(20, 23, 31, 0.55); border-color: rgba(245,247,250,.07); }
.automation-event-marker { color: var(--green-soft); background: rgba(63, 221, 154, 0.12); }
.automation-event-copy small { color: var(--text-dim); }
.automation-event-copy p { color: var(--text-muted); }
.automation-event-copy strong { color: var(--text-main); }
.automation-demo-cta { background: linear-gradient(100deg, rgba(74, 144, 255, 0.10), rgba(75, 234, 255, 0.07)); }
.automation-demo-cta p { color: var(--text-muted); }
.automation-demo-cta strong { color: var(--text-main); }
.automation-flow-label, .automation-flow-node strong { color: var(--text-main); }
.automation-flow-node small { color: var(--text-dim); }

.automation-scenario-card.active {
  color: var(--text-main);
  border-color: rgba(75, 234, 255, 0.55);
  background: linear-gradient(135deg, rgba(75, 234, 255, 0.14), rgba(124, 92, 255, 0.09));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 10px 22px -14px rgba(75, 234, 255, 0.22);
}
.automation-scenario-card:focus-visible, .automation-replay:focus-visible { outline-color: rgba(75,234,255,.4); }
body .automation-flow-node { background: rgba(15, 18, 25, 0.8); border-color: rgba(245,247,250,.10); }
body .automation-flow-node.is-active, body .automation-flow-node.is-running { border-color: rgba(75,234,255,.55); box-shadow: 0 0 0 1px rgba(75,234,255,.15); }

/* every orange accent → related blue spectrum */
.brand-wordmark .brand-wordmark-accent,
.brand-wordmark .brand-wordmark-dot { color: #5B93FF !important; }
.trust-boundary { border-color: rgba(74, 144, 255, 0.45); background: rgba(74, 144, 255, 0.06); }
.system-map-flow::before {
  background: linear-gradient(90deg, rgba(74,144,255,.55), rgba(124,92,255,.55), rgba(75,234,255,.65));
}
/* duplicate overrides removed — the sales-card + automation-demo-cta rules
   above now carry the blue values directly (single source of truth) */

/* pricing billing switch: fully in key-night theme — cyan-glass track, and
   the active period reuses the site's primary CTA gradient for unmistakable,
   high-contrast selection (mirrors the heading/discount copy beneath it) */
.pricing-period-switch {
  background: rgba(13, 17, 24, 0.92);
  border-color: rgba(75, 234, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px -14px rgba(0, 0, 0, 0.8), 0 0 18px -4px rgba(75, 234, 255, 0.22);
}
.pricing-period-btn { color: #B9C4D4; font-weight: 650; }
.pricing-period-btn:hover:not(.active) {
  color: var(--text-main);
  border-color: rgba(75, 234, 255, 0.38);
  background: rgba(75, 234, 255, 0.08);
}
.pricing-period-btn.active {
  background: linear-gradient(135deg, #4BEAFF 0%, #28C8E4 100%);
  border-color: rgba(75, 234, 255, 0.65);
  color: #05222B;
  box-shadow: 0 8px 22px -8px rgba(75, 234, 255, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.pricing-period-btn:focus-visible { outline: 3px solid rgba(75, 234, 255, 0.40); outline-offset: 2px; }
/* keep the tick + discount badge inside the active pill in the same cyan family */
.pricing-period-btn.active .pricing-period-check {
  color: #03657C;
  background: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.90);
}
.pricing-period-btn.active .pricing-period-saving { color: #05222B; background: rgba(255, 255, 255, 0.92); }
.pricing-period-btn:not(.active) .pricing-period-saving {
  background: rgba(75, 234, 255, 0.14);
  color: #4BEAFF;
  border: 1px solid rgba(75, 234, 255, 0.30);
}
.brand-wordmark-dot.is-amber, .amber { color: #5B93FF !important; }

/* r30: the footer grid was 4 fixed columns with inline styles, which pushed the page ~27px wider than a phone
   screen (horizontal overflow -> empty strip on the side, fixed UI clipped). Stack it responsively. */
.footer-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px !important; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer-grid { gap: 24px 14px !important; }
}
html, body { max-width: 100%; }

/* r30: phone-width safety. The base grids demanded 320/290/220px columns, wider than a phone's content box, so
   cards overflowed their container and text spilled out of the boxes. Columns now shrink to the container. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
@media (max-width: 760px) {
  main { overflow-x: clip; }
  .card, .glass-panel { min-width: 0; overflow-wrap: anywhere; }
  .card li, .card span, .card p, .card h2, .card h3, .card h4 { overflow-wrap: anywhere; }
}