:root {
  color-scheme: light dark;
  --af-font-sans: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --af-font-mono: "SFMono-Regular", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  --m3-seed-primary: #1769e0;
  --m3-seed-secondary: #006a60;
  --m3-primary: #1769e0;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #d7e2ff;
  --m3-on-primary-container: #001a41;
  --m3-secondary: #566174;
  --m3-on-secondary: #ffffff;
  --m3-secondary-container: #dae3f4;
  --m3-on-secondary-container: #131c2b;
  --m3-tertiary: #006a60;
  --m3-on-tertiary: #ffffff;
  --m3-tertiary-container: #8df2df;
  --m3-on-tertiary-container: #00201c;
  --m3-surface: #fbfcff;
  --m3-surface-container-lowest: #ffffff;
  --m3-surface-container-low: #f4f6fb;
  --m3-surface-container: #eef1f6;
  --m3-surface-container-high: #e8ebf0;
  --m3-surface-container-highest: #e1e5eb;
  --m3-on-surface: #171c20;
  --m3-on-surface-variant: #42474f;
  --m3-outline: #727780;
  --m3-outline-variant: #c2c7d0;
  --m3-error: #ba1a1a;
  --m3-on-error: #ffffff;

  --m3-type-display: 57px;
  --m3-type-headline: 32px;
  --m3-type-title: 22px;
  --m3-type-body: 16px;
  --m3-type-label: 14px;
  --m3-line-display: 64px;
  --m3-line-headline: 40px;
  --m3-line-title: 28px;
  --m3-line-body: 24px;
  --m3-line-label: 20px;
  --m3-weight-regular: 400;
  --m3-weight-medium: 520;
  --m3-weight-bold: 680;

  --m3-shape-small: 8px;
  --m3-shape-medium: 12px;
  --m3-shape-large: 16px;
  --m3-shape-extra-large: 28px;
  --m3-shape-full: 999px;

  --m3-elevation-0: none;
  --m3-elevation-1: 0 1px 2px rgba(29, 33, 39, .14), 0 1px 3px 1px rgba(29, 33, 39, .08);
  --m3-elevation-2: 0 1px 2px rgba(29, 33, 39, .14), 0 2px 6px 2px rgba(29, 33, 39, .08);
  --m3-elevation-3: 0 4px 8px 3px rgba(29, 33, 39, .10), 0 1px 3px rgba(29, 33, 39, .14);
  --m3-elevation-4: 0 6px 10px 4px rgba(29, 33, 39, .10), 0 2px 3px rgba(29, 33, 39, .14);
  --m3-elevation-5: 0 8px 12px 6px rgba(29, 33, 39, .10), 0 4px 4px rgba(29, 33, 39, .14);

  --af-size-0: 12px;
  --af-size-1: var(--m3-type-label);
  --af-size-2: var(--m3-type-body);
  --af-size-3: 18px;
  --af-size-4: var(--m3-type-title);
  --af-size-5: var(--m3-type-headline);
  --af-size-6: var(--m3-type-display);
  --af-space-1: 8px;
  --af-space-2: 16px;
  --af-space-3: 24px;
  --af-space-4: 32px;
  --af-space-5: 48px;
  --af-space-6: 64px;
  --af-space-7: 96px;
  --af-color-bg: var(--m3-surface);
  --af-color-bg-soft: var(--m3-surface-container-low);
  --af-color-surface: var(--m3-surface-container-lowest);
  --af-color-surface-alt: var(--m3-surface-container);
  --af-color-ink: var(--m3-on-surface);
  --af-color-text: var(--m3-on-surface);
  --af-color-muted: var(--m3-on-surface-variant);
  --af-color-line: var(--m3-outline-variant);
  --af-color-accent: var(--m3-primary);
  --af-color-accent-strong: color-mix(in srgb, var(--m3-primary) 78%, #000000);
  --af-color-company: #174a7a;
  --af-color-danger: var(--m3-error);
  --af-product-standard: #f2cc2f;
  --af-product-opencore: #60bd16;
  --af-product-sdk: #f36b1d;
  --af-product-asickit: #23a7c8;
  --af-product-labs: #174a7a;
  --af-gradient-soft: linear-gradient(180deg, var(--m3-surface-container-lowest) 0%, var(--m3-surface-container-low) 100%);
  --af-radius-card: var(--m3-shape-medium);
  --af-radius-control: var(--m3-shape-extra-large);
  --af-shadow-card: var(--m3-elevation-1);
  --af-content: 1180px;
  --af-wide: 1512px;
  --af-nav-h: 52px;

  --font: var(--af-font-sans);
  --ink: var(--af-color-ink);
  --muted: var(--af-color-muted);
  --faint: #7a8491;
  --page: var(--af-color-bg);
  --paper: var(--af-color-surface);
  --surface: var(--af-color-bg-soft);
  --surface-strong: var(--af-color-surface-alt);
  --surface-soft: var(--m3-surface-container-lowest);
  --line: var(--af-color-line);
  --accent: var(--af-color-accent);
  --accent-strong: var(--af-color-accent-strong);
  --accent-soft: var(--m3-primary-container);
  --link: var(--af-color-accent);
  --content: var(--af-content);
  --nav-h: var(--af-nav-h);
  --shadow-soft: var(--m3-elevation-1);
  --shadow-card: var(--m3-elevation-1);
}

@supports (color: color-mix(in oklab, #000, #fff)) {
  :root {
    --m3-primary: color-mix(in oklab, var(--m3-seed-primary) 88%, #000000);
    --m3-primary-container: color-mix(in oklab, var(--m3-seed-primary) 16%, #ffffff);
    --m3-secondary: color-mix(in oklab, var(--m3-seed-primary) 26%, #526071);
    --m3-secondary-container: color-mix(in oklab, var(--m3-secondary) 18%, #ffffff);
    --m3-tertiary: color-mix(in oklab, var(--m3-seed-secondary) 86%, #000000);
    --m3-tertiary-container: color-mix(in oklab, var(--m3-seed-secondary) 20%, #ffffff);
    --m3-surface-container-low: color-mix(in oklab, var(--m3-primary) 4%, #ffffff);
    --m3-surface-container: color-mix(in oklab, var(--m3-primary) 7%, #ffffff);
    --m3-surface-container-high: color-mix(in oklab, var(--m3-primary) 10%, #ffffff);
    --m3-surface-container-highest: color-mix(in oklab, var(--m3-primary) 13%, #ffffff);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m3-primary: #adc6ff;
    --m3-on-primary: #002e69;
    --m3-primary-container: #004493;
    --m3-on-primary-container: #d8e2ff;
    --m3-secondary: #c0c7d8;
    --m3-on-secondary: #2a3142;
    --m3-secondary-container: #40475a;
    --m3-on-secondary-container: #dce2f4;
    --m3-tertiary: #82d5c8;
    --m3-on-tertiary: #003731;
    --m3-tertiary-container: #005048;
    --m3-on-tertiary-container: #9ff2e3;
    --m3-surface: #0a0a0a;
    --m3-surface-container-lowest: #0a0a0a;
    --m3-surface-container-low: #171717;
    --m3-surface-container: #18181b;
    --m3-surface-container-high: #27272a;
    --m3-surface-container-highest: #3f3f46;
    --m3-on-surface: #f5f5f5;
    --m3-on-surface-variant: #a1a1aa;
    --m3-outline: #a1a1aa;
    --m3-outline-variant: #3f3f46;
    --m3-error: #ffb4ab;
    --m3-on-error: #690005;
    --af-color-accent-strong: #d8e2ff;
    --faint: #a1a1aa;
  }
}

@supports (color: color-mix(in oklab, #000, #fff)) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --m3-primary: color-mix(in oklab, var(--m3-seed-primary) 36%, #ffffff);
      --m3-primary-container: color-mix(in oklab, var(--m3-seed-primary) 62%, #000000);
      --m3-secondary: color-mix(in oklab, var(--m3-seed-primary) 18%, #dce2f4);
      --m3-secondary-container: color-mix(in oklab, var(--m3-secondary) 42%, #000000);
      --m3-tertiary: color-mix(in oklab, var(--m3-seed-secondary) 40%, #ffffff);
      --m3-tertiary-container: color-mix(in oklab, var(--m3-seed-secondary) 62%, #000000);
      --m3-surface-container-low: #171717;
      --m3-surface-container: #18181b;
      --m3-surface-container-high: #27272a;
      --m3-surface-container-highest: #3f3f46;
    }
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --m3-primary: #1769e0;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #d7e2ff;
  --m3-on-primary-container: #001a41;
  --m3-secondary: #566174;
  --m3-on-secondary: #ffffff;
  --m3-secondary-container: #dae3f4;
  --m3-on-secondary-container: #131c2b;
  --m3-tertiary: #006a60;
  --m3-on-tertiary: #ffffff;
  --m3-tertiary-container: #8df2df;
  --m3-on-tertiary-container: #00201c;
  --m3-surface: #fbfcff;
  --m3-surface-container-lowest: #ffffff;
  --m3-surface-container-low: #f4f6fb;
  --m3-surface-container: #eef1f6;
  --m3-surface-container-high: #e8ebf0;
  --m3-surface-container-highest: #e1e5eb;
  --m3-on-surface: #171c20;
  --m3-on-surface-variant: #42474f;
  --m3-outline: #727780;
  --m3-outline-variant: #c2c7d0;
  --m3-error: #ba1a1a;
  --m3-on-error: #ffffff;
  --af-color-accent-strong: color-mix(in srgb, var(--m3-primary) 78%, #000000);
  --faint: #7a8491;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --m3-primary: #adc6ff;
  --m3-on-primary: #002e69;
  --m3-primary-container: #004493;
  --m3-on-primary-container: #d8e2ff;
  --m3-secondary: #c0c7d8;
  --m3-on-secondary: #2a3142;
  --m3-secondary-container: #40475a;
  --m3-on-secondary-container: #dce2f4;
  --m3-tertiary: #82d5c8;
  --m3-on-tertiary: #003731;
  --m3-tertiary-container: #005048;
  --m3-on-tertiary-container: #9ff2e3;
  --m3-surface: #0a0a0a;
  --m3-surface-container-lowest: #0a0a0a;
  --m3-surface-container-low: #171717;
  --m3-surface-container: #18181b;
  --m3-surface-container-high: #27272a;
  --m3-surface-container-highest: #3f3f46;
  --m3-on-surface: #f5f5f5;
  --m3-on-surface-variant: #a1a1aa;
  --m3-outline: #a1a1aa;
  --m3-outline-variant: #3f3f46;
  --m3-error: #ffb4ab;
  --m3-on-error: #690005;
  --af-color-accent-strong: #d8e2ff;
  --faint: #a1a1aa;
}

html,
body {
  font-family: var(--af-font-sans);
  letter-spacing: 0;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--m3-surface);
  color: var(--m3-on-surface);
}

.legal-footer {
  background: #2a2a2a;
  color: #b0b0b0;
}

.legal-footer a,
.legal-footer strong,
.legal-footer h2,
.legal-footer p,
.legal-footer span {
  color: #b0b0b0;
}

.legal-footer a {
  color: #9ecaff;
}

.legal-footer a:hover {
  color: #d3e4ff;
}

.button,
.button.secondary {
  min-height: 44px;
  border: 1px solid var(--m3-outline);
  border-radius: var(--m3-shape-extra-large);
  background: transparent;
  color: var(--m3-primary);
  box-shadow: var(--m3-elevation-0);
}

.button.primary,
.btn-buy-gradient,
.hero-upgrade,
.pro-cta,
.max-cta,
.max-plus-cta {
  border-color: var(--m3-primary);
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  box-shadow: var(--m3-elevation-1);
}

.button.tonal,
.m3-tonal-button {
  border-color: transparent;
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
}

.button:hover,
.button:focus-visible {
  border-color: var(--m3-primary);
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  box-shadow: var(--m3-elevation-1);
}

.button:active,
.button.secondary:active {
  border-color: var(--m3-primary);
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  box-shadow: var(--m3-elevation-1);
}

.button.primary:hover,
.button.primary:focus-visible,
.btn-buy-gradient:hover,
.btn-buy-gradient:focus-visible,
.hero-upgrade:hover,
.hero-upgrade:focus-visible,
.pro-cta:hover,
.pro-cta:focus-visible,
.max-cta:hover,
.max-cta:focus-visible,
.max-plus-cta:hover,
.max-plus-cta:focus-visible {
  background: color-mix(in srgb, var(--m3-primary) 88%, var(--m3-on-surface));
  color: var(--m3-on-primary);
  box-shadow: var(--m3-elevation-2);
}

.login-panel,
.commerce-panel,
.panel,
.package-card,
.legal-section,
.pricing-card,
.compare-table {
  border-radius: var(--m3-shape-medium);
}

.fab,
.m3-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--m3-shape-large);
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  box-shadow: var(--m3-elevation-3);
}

/* Contrast-only CTA guards for light/dark hover, focus, and active states. */
.button.primary,
.btn-buy-gradient,
.hero-upgrade,
.plan-button,
.pro-cta,
.max-cta,
.exact-plans .pro-cta,
.exact-plans .max-cta {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #ffffff;
}

.button.primary:hover,
.button.primary:focus-visible,
.button.primary:active,
.btn-buy-gradient:hover,
.btn-buy-gradient:focus-visible,
.btn-buy-gradient:active,
.hero-upgrade:hover,
.hero-upgrade:focus-visible,
.hero-upgrade:active,
.plan-button:hover,
.plan-button:focus-visible,
.plan-button:active,
.pro-cta:hover,
.pro-cta:focus-visible,
.pro-cta:active,
.max-cta:hover,
.max-cta:focus-visible,
.max-cta:active,
.exact-plans .pro-cta:hover,
.exact-plans .pro-cta:focus-visible,
.exact-plans .pro-cta:active,
.exact-plans .max-cta:hover,
.exact-plans .max-cta:focus-visible,
.exact-plans .max-cta:active {
  border-color: #1e40af;
  background: #1e40af;
  color: #ffffff;
}

.max-plus-cta,
.exact-plans .max-plus-cta {
  border-color: #6d28d9;
  background: linear-gradient(135deg, #6d28d9, #be185d);
  background-color: #6d28d9;
  color: #ffffff;
}

.max-plus-cta:hover,
.max-plus-cta:focus-visible,
.max-plus-cta:active,
.exact-plans .max-plus-cta:hover,
.exact-plans .max-plus-cta:focus-visible,
.exact-plans .max-plus-cta:active {
  border-color: #581c87;
  background: linear-gradient(135deg, #581c87, #9d174d);
  background-color: #581c87;
  color: #ffffff;
}

.exact-plans #alti-pro .pro-cta {
  border-color: #0078d4;
  background: linear-gradient(135deg, #0078d4, #4338ca);
  background-color: #0078d4;
  color: #ffffff;
}

.exact-plans #alti-pro .pro-cta:hover,
.exact-plans #alti-pro .pro-cta:focus-visible,
.exact-plans #alti-pro .pro-cta:active {
  border-color: #1e40af;
  background: linear-gradient(135deg, #0078d4, #1e40af);
  background-color: #1e40af;
  color: #ffffff;
}

.free-cta,
.exact-plans .free-cta {
  border-color: #d4d4d4;
  background: #f5f5f5;
  color: #0a0a0a;
}

.free-cta:hover,
.free-cta:focus-visible,
.free-cta:active,
.exact-plans .free-cta:hover,
.exact-plans .free-cta:focus-visible,
.exact-plans .free-cta:active {
  border-color: #c7c7c7;
  background: #ececec;
  color: #0a0a0a;
}

html[data-theme="dark"] .free-cta,
html[data-theme="dark"] .exact-plans .free-cta {
  border-color: #3f3f46;
  background: #18181b;
  color: var(--m3-on-surface);
}

html[data-theme="dark"] .free-cta:hover,
html[data-theme="dark"] .free-cta:focus-visible,
html[data-theme="dark"] .free-cta:active,
html[data-theme="dark"] .exact-plans .free-cta:hover,
html[data-theme="dark"] .exact-plans .free-cta:focus-visible,
html[data-theme="dark"] .exact-plans .free-cta:active {
  border-color: #a1a1aa;
  background: #27272a;
  color: var(--m3-on-surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .free-cta,
  :root:not([data-theme="light"]) .exact-plans .free-cta {
    border-color: #3f3f46;
    background: #18181b;
    color: var(--m3-on-surface);
  }

  :root:not([data-theme="light"]) .free-cta:hover,
  :root:not([data-theme="light"]) .free-cta:focus-visible,
  :root:not([data-theme="light"]) .free-cta:active,
  :root:not([data-theme="light"]) .exact-plans .free-cta:hover,
  :root:not([data-theme="light"]) .exact-plans .free-cta:focus-visible,
  :root:not([data-theme="light"]) .exact-plans .free-cta:active {
    border-color: #a1a1aa;
    background: #27272a;
    color: var(--m3-on-surface);
  }
}

html[data-theme="dark"] .feature-table-wrap {
  background: var(--m3-surface-container-lowest);
}

html[data-theme="dark"] .feature-table {
  border: 0;
  background: var(--m3-surface-container-lowest);
  color: var(--m3-on-surface);
}

html[data-theme="dark"] .feature-table th,
html[data-theme="dark"] .feature-table td {
  background: var(--m3-surface-container-lowest) !important;
  color: var(--m3-on-surface) !important;
  box-shadow: inset 0 -1px 0 var(--m3-outline-variant);
}

html[data-theme="dark"] .feature-table thead th,
html[data-theme="dark"] .feature-table tbody th,
html[data-theme="dark"] .feature-table .feature-category th {
  background: var(--m3-surface-container-low) !important;
  color: var(--m3-on-surface) !important;
}

@media (max-width: 760px) {
  html[data-theme="dark"] .feature-table tbody tr {
    background: var(--m3-surface-container-lowest) !important;
  }

  html[data-theme="dark"] .feature-table tbody td::before {
    color: var(--m3-on-surface-variant) !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) body {
    background: var(--m3-surface);
    color: var(--m3-on-surface);
  }

  :root:not([data-theme="light"]) .feature-table-wrap {
    background: var(--m3-surface-container-lowest);
  }

  :root:not([data-theme="light"]) .feature-table {
    border: 0;
    background: var(--m3-surface-container-lowest);
    color: var(--m3-on-surface);
  }

  :root:not([data-theme="light"]) .feature-table th,
  :root:not([data-theme="light"]) .feature-table td {
    background: var(--m3-surface-container-lowest) !important;
    color: var(--m3-on-surface) !important;
    box-shadow: inset 0 -1px 0 var(--m3-outline-variant);
  }

  :root:not([data-theme="light"]) .feature-table thead th,
  :root:not([data-theme="light"]) .feature-table tbody th,
  :root:not([data-theme="light"]) .feature-table .feature-category th {
    background: var(--m3-surface-container-low) !important;
    color: var(--m3-on-surface) !important;
  }

  @media (max-width: 760px) {
    :root:not([data-theme="light"]) .feature-table tbody tr {
      background: var(--m3-surface-container-lowest) !important;
    }

    :root:not([data-theme="light"]) .feature-table tbody td::before {
      color: var(--m3-on-surface-variant) !important;
    }
  }
}

input::placeholder,
textarea::placeholder {
  color: #5f6368;
  opacity: 1;
}

#login-email::placeholder {
  color: #5f6368 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #a1a1aa;
}

html[data-theme="dark"] #login-email::placeholder {
  color: #a1a1aa !important;
}

.exact-hero h1 span,
.benefits-section h2 span {
  color: #1d4ed8;
}

html[data-theme="dark"] .faq-list details {
  background: var(--m3-surface-container-lowest);
  color: var(--m3-on-surface);
}

html[data-theme="dark"] .faq-list summary {
  color: var(--m3-on-surface) !important;
}

html[data-theme="dark"] .benefit-grid article p {
  color: var(--m3-on-surface-variant) !important;
}

html[data-theme="dark"] .exact-hero h1 span,
html[data-theme="dark"] .benefits-section h2 span {
  color: var(--m3-primary);
}

html[data-theme="dark"] .faq-list details p {
  color: var(--m3-on-surface-variant) !important;
}

/* v3 visible-contrast guards for billing plan cards and CTA states. */
.exact-plans .plan-card,
.plan-card,
.pricing-card,
.package-card,
.commerce-panel,
.panel {
  background: #ffffff !important;
  color: #171c20 !important;
}

.exact-plans .plan-card:hover,
.exact-plans .plan-card:focus-within,
.exact-plans .plan-card:active,
.plan-card:hover,
.plan-card:focus-within,
.plan-card:active,
.pricing-card:hover,
.pricing-card:focus-within,
.pricing-card:active {
  background: #f3f6fb !important;
  color: #171c20 !important;
}

.exact-plans .plan-card h2,
.exact-plans .price-stack strong,
.exact-plans .inquiry-price strong,
.plan-card h2,
.price-stack strong,
.pricing-card h2,
.pricing-card h3,
.package-card h2,
.panel h2 {
  color: #0a0a0a !important;
}

.exact-plans .plan-value,
.exact-plans .price-stack span,
.exact-plans .price-sub,
.exact-plans .plan-features li,
.plan-card > p,
.plan-card li,
.pricing-card p,
.pricing-card li,
.package-card p,
.panel p {
  color: #343a40 !important;
}

.exact-plans .recommended-pill,
.exact-plans .recommended-overline {
  background: #f3e8ff !important;
  color: #5b21b6 !important;
}

.plan-card .button:hover,
.plan-card .button:focus-visible,
.plan-card .button:active,
.exact-plans .plan-card .button:hover,
.exact-plans .plan-card .button:focus-visible,
.exact-plans .plan-card .button:active {
  color: #ffffff !important;
}

.free-cta:hover,
.free-cta:focus-visible,
.free-cta:active,
.exact-plans .free-cta:hover,
.exact-plans .free-cta:focus-visible,
.exact-plans .free-cta:active {
  color: #0a0a0a !important;
}

html[data-theme="dark"] .exact-plans .plan-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .package-card,
html[data-theme="dark"] .commerce-panel,
html[data-theme="dark"] .panel {
  background: #18181b !important;
  color: #f5f5f5 !important;
  border-color: #3f3f46;
}

html[data-theme="dark"] .exact-plans .free-plan,
html[data-theme="dark"] .exact-plans .pro-plan,
html[data-theme="dark"] .exact-plans .max-plan,
html[data-theme="dark"] .exact-plans .max-plus-plan {
  background: #18181b !important;
}

html[data-theme="dark"] .exact-plans .plan-card:hover,
html[data-theme="dark"] .exact-plans .plan-card:focus-within,
html[data-theme="dark"] .exact-plans .plan-card:active,
html[data-theme="dark"] .plan-card:hover,
html[data-theme="dark"] .plan-card:focus-within,
html[data-theme="dark"] .plan-card:active,
html[data-theme="dark"] .pricing-card:hover,
html[data-theme="dark"] .pricing-card:focus-within,
html[data-theme="dark"] .pricing-card:active {
  background: #27272a !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .exact-plans .plan-card h2,
html[data-theme="dark"] .exact-plans .price-stack strong,
html[data-theme="dark"] .exact-plans .inquiry-price strong,
html[data-theme="dark"] .plan-card h2,
html[data-theme="dark"] .price-stack strong,
html[data-theme="dark"] .pricing-card h2,
html[data-theme="dark"] .pricing-card h3,
html[data-theme="dark"] .package-card h2,
html[data-theme="dark"] .panel h2 {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .exact-plans .plan-value,
html[data-theme="dark"] .exact-plans .price-stack span,
html[data-theme="dark"] .exact-plans .price-sub,
html[data-theme="dark"] .exact-plans .plan-features li,
html[data-theme="dark"] .plan-card > p,
html[data-theme="dark"] .plan-card li,
html[data-theme="dark"] .pricing-card p,
html[data-theme="dark"] .pricing-card li,
html[data-theme="dark"] .package-card p,
html[data-theme="dark"] .panel p {
  color: #a1a1aa !important;
}

html[data-theme="dark"] .exact-plans .plan-features li::before {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .exact-plans .recommended-pill,
html[data-theme="dark"] .exact-plans .recommended-overline {
  background: #312e81 !important;
  color: #e0e7ff !important;
}

html[data-theme="dark"] .plan-card .button:hover,
html[data-theme="dark"] .plan-card .button:focus-visible,
html[data-theme="dark"] .plan-card .button:active,
html[data-theme="dark"] .exact-plans .plan-card .button:hover,
html[data-theme="dark"] .exact-plans .plan-card .button:focus-visible,
html[data-theme="dark"] .exact-plans .plan-card .button:active {
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .exact-plans .plan-card,
  :root:not([data-theme="light"]) .plan-card,
  :root:not([data-theme="light"]) .pricing-card,
  :root:not([data-theme="light"]) .package-card,
  :root:not([data-theme="light"]) .commerce-panel,
  :root:not([data-theme="light"]) .panel {
    background: #18181b !important;
    color: #f5f5f5 !important;
    border-color: #3f3f46;
  }

  :root:not([data-theme="light"]) .exact-plans .plan-card:hover,
  :root:not([data-theme="light"]) .exact-plans .plan-card:focus-within,
  :root:not([data-theme="light"]) .exact-plans .plan-card:active,
  :root:not([data-theme="light"]) .plan-card:hover,
  :root:not([data-theme="light"]) .plan-card:focus-within,
  :root:not([data-theme="light"]) .plan-card:active,
  :root:not([data-theme="light"]) .pricing-card:hover,
  :root:not([data-theme="light"]) .pricing-card:focus-within,
  :root:not([data-theme="light"]) .pricing-card:active {
    background: #27272a !important;
    color: #f5f5f5 !important;
  }

  :root:not([data-theme="light"]) .exact-plans .plan-card h2,
  :root:not([data-theme="light"]) .exact-plans .price-stack strong,
  :root:not([data-theme="light"]) .exact-plans .inquiry-price strong,
  :root:not([data-theme="light"]) .plan-card h2,
  :root:not([data-theme="light"]) .price-stack strong,
  :root:not([data-theme="light"]) .pricing-card h2,
  :root:not([data-theme="light"]) .pricing-card h3,
  :root:not([data-theme="light"]) .package-card h2,
  :root:not([data-theme="light"]) .panel h2 {
    color: #f5f5f5 !important;
  }

  :root:not([data-theme="light"]) .exact-plans .plan-value,
  :root:not([data-theme="light"]) .exact-plans .price-stack span,
  :root:not([data-theme="light"]) .exact-plans .price-sub,
  :root:not([data-theme="light"]) .exact-plans .plan-features li,
  :root:not([data-theme="light"]) .plan-card > p,
  :root:not([data-theme="light"]) .plan-card li,
  :root:not([data-theme="light"]) .pricing-card p,
  :root:not([data-theme="light"]) .pricing-card li,
  :root:not([data-theme="light"]) .package-card p,
  :root:not([data-theme="light"]) .panel p {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .exact-plans .plan-features li::before {
    color: #f5f5f5 !important;
  }

  :root:not([data-theme="light"]) .exact-plans .recommended-pill,
  :root:not([data-theme="light"]) .exact-plans .recommended-overline {
    background: #312e81 !important;
    color: #e0e7ff !important;
  }

  :root:not([data-theme="light"]) .plan-card .button:hover,
  :root:not([data-theme="light"]) .plan-card .button:focus-visible,
  :root:not([data-theme="light"]) .plan-card .button:active,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button:hover,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button:focus-visible,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button:active {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .exact-hero h1 span,
  :root:not([data-theme="light"]) .benefits-section h2 span {
    color: var(--m3-primary);
  }

  :root:not([data-theme="light"]) .faq-list details {
    background: var(--m3-surface-container-lowest);
    color: var(--m3-on-surface);
  }

  :root:not([data-theme="light"]) .faq-list summary {
    color: var(--m3-on-surface) !important;
  }

  :root:not([data-theme="light"]) .faq-list details p,
  :root:not([data-theme="light"]) .benefit-grid article p {
    color: var(--m3-on-surface-variant) !important;
  }

  :root:not([data-theme="light"]) input::placeholder,
  :root:not([data-theme="light"]) textarea::placeholder {
    color: #a1a1aa;
  }
}

/* Monochrome CTA inversion: commercial CTAs and the recommended pill render as
   ink-on-surface (dark button in light theme, white button in dark theme).
   Final layer — outranks the colorful base rules and the contrast guards. */
.btn-buy-gradient,
.hero-upgrade,
.pro-cta,
.max-cta,
.max-plus-cta,
.exact-plans .pro-cta,
.exact-plans .max-cta,
.exact-plans .max-plus-cta,
.exact-plans #alti-pro .pro-cta {
  border-color: var(--m3-on-surface) !important;
  background: var(--m3-on-surface) !important;
  color: var(--m3-surface) !important;
  box-shadow: var(--m3-elevation-1) !important;
}

.btn-buy-gradient:hover,
.btn-buy-gradient:focus-visible,
.btn-buy-gradient:active,
.hero-upgrade:hover,
.hero-upgrade:focus-visible,
.hero-upgrade:active,
.pro-cta:hover,
.pro-cta:focus-visible,
.pro-cta:active,
.max-cta:hover,
.max-cta:focus-visible,
.max-cta:active,
.max-plus-cta:hover,
.max-plus-cta:focus-visible,
.max-plus-cta:active,
.exact-plans #alti-pro .pro-cta:hover,
.exact-plans #alti-pro .pro-cta:focus-visible,
.exact-plans #alti-pro .pro-cta:active {
  border-color: color-mix(in srgb, var(--m3-on-surface) 84%, var(--m3-surface)) !important;
  background: color-mix(in srgb, var(--m3-on-surface) 84%, var(--m3-surface)) !important;
  color: var(--m3-surface) !important;
  box-shadow: var(--m3-elevation-2) !important;
}

/* The dark-mode plan-card hover guards force #ffffff text with !important at
   higher specificity; these mirrors outrank them so the inverted text keeps
   contrast on the light hover surface. */
html[data-theme="dark"] .exact-plans .plan-card .button.pro-cta:hover,
html[data-theme="dark"] .exact-plans .plan-card .button.pro-cta:focus-visible,
html[data-theme="dark"] .exact-plans .plan-card .button.pro-cta:active,
html[data-theme="dark"] .exact-plans .plan-card .button.max-cta:hover,
html[data-theme="dark"] .exact-plans .plan-card .button.max-cta:focus-visible,
html[data-theme="dark"] .exact-plans .plan-card .button.max-cta:active,
html[data-theme="dark"] .exact-plans .plan-card .button.max-plus-cta:hover,
html[data-theme="dark"] .exact-plans .plan-card .button.max-plus-cta:focus-visible,
html[data-theme="dark"] .exact-plans .plan-card .button.max-plus-cta:active {
  color: var(--m3-surface) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .exact-plans .plan-card .button.pro-cta:hover,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button.pro-cta:focus-visible,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button.pro-cta:active,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button.max-cta:hover,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button.max-cta:focus-visible,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button.max-cta:active,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button.max-plus-cta:hover,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button.max-plus-cta:focus-visible,
  :root:not([data-theme="light"]) .exact-plans .plan-card .button.max-plus-cta:active {
    color: var(--m3-surface) !important;
  }
}

.recommended-pill,
.recommended-overline,
.exact-plans .recommended-pill,
.exact-plans .recommended-overline {
  background: var(--m3-on-surface) !important;
  color: var(--m3-surface) !important;
}

html[data-theme="dark"] .exact-plans .recommended-pill,
html[data-theme="dark"] .exact-plans .recommended-overline {
  background: var(--m3-on-surface) !important;
  color: var(--m3-surface) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .exact-plans .recommended-pill,
  :root:not([data-theme="light"]) .exact-plans .recommended-overline {
    background: var(--m3-on-surface) !important;
    color: var(--m3-surface) !important;
  }
}