/* SheetGenie iOS/Safari dark surface fallback for pages that can wash out when
   WebKit drops color-mix()/glass custom-property declarations. Keep this file
   small and page-scoped so it can be loaded after the normal page CSS. */

:root {
  --ios-fallback-bg-1: #07152c;
  --ios-fallback-bg-2: #0b2143;
  --ios-fallback-bg-3: #123267;
  --ios-fallback-accent-rgb: 37, 135, 232;
  --ios-fallback-accent-2-rgb: 238, 106, 95;
  --ios-fallback-accent-3-rgb: 31, 169, 141;
  --ios-fallback-surface: linear-gradient(165deg, rgba(var(--ios-fallback-accent-rgb), 0.28), rgba(13, 38, 66, 0.92) 48%, rgba(var(--ios-fallback-accent-2-rgb), 0.2));
  --ios-fallback-surface-soft: rgba(var(--ios-fallback-accent-rgb), 0.14);
  --ios-fallback-border: rgba(var(--ios-fallback-accent-rgb), 0.32);
  --ios-fallback-text: #f3f8ff;
  --ios-fallback-muted: #c7d8f0;
  --ios-fallback-accent: var(--sgv2-accent, #2587e8);
  --ios-fallback-accent-2: var(--sgv2-accent-2, #ee6a5f);
  --ios-fallback-accent-3: var(--sgv2-accent-3, #1fa98d);
  --ios-fallback-shadow: 0 22px 56px rgba(0, 0, 0, 0.32);
}

html[data-index-v2-theme="coral"] {
  --ios-fallback-bg-1: #22141b;
  --ios-fallback-bg-2: #361e2a;
  --ios-fallback-bg-3: #50304a;
  --ios-fallback-accent-rgb: 238, 106, 95;
  --ios-fallback-accent-2-rgb: 37, 135, 232;
  --ios-fallback-accent-3-rgb: 31, 169, 141;
}

html[data-index-v2-theme="mint"] {
  --ios-fallback-bg-1: #071f20;
  --ios-fallback-bg-2: #0d3331;
  --ios-fallback-bg-3: #164b44;
  --ios-fallback-accent-rgb: 31, 169, 141;
  --ios-fallback-accent-2-rgb: 238, 106, 95;
  --ios-fallback-accent-3-rgb: 37, 135, 232;
}

html[data-index-v2-theme="sun"] {
  --ios-fallback-bg-1: #241b0a;
  --ios-fallback-bg-2: #332711;
  --ios-fallback-bg-3: #4b3715;
  --ios-fallback-accent-rgb: 217, 154, 21;
  --ios-fallback-accent-2-rgb: 37, 135, 232;
  --ios-fallback-accent-3-rgb: 31, 169, 141;
}

body.pricing-page-v2,
body.sheetgenie-shared-bg,
.policy-shell,
html[data-index-v2-theme] body {
  color: var(--ios-fallback-text);
}

body.pricing-page-v2,
body.sheetgenie-shared-bg,
body.policy-page-ios-fallback {
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--ios-fallback-accent-rgb), 0.42), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(var(--ios-fallback-accent-2-rgb), 0.24), transparent 28%),
    linear-gradient(140deg, var(--ios-fallback-bg-1), var(--ios-fallback-bg-2) 46%, var(--ios-fallback-bg-3)) !important;
}

/* Pricing page */
body.pricing-page-v2 {
  --pricing-surface: rgba(13, 34, 62, 0.92);
  --pricing-surface-strong: rgba(15, 40, 72, 0.96);
  --pricing-soft: rgba(18, 50, 103, 0.38);
  --pricing-line: var(--ios-fallback-border);
  --pricing-line-strong: rgba(184, 213, 255, 0.42);
  --pricing-text: var(--ios-fallback-text);
  --pricing-muted: var(--ios-fallback-muted);
}

body.pricing-page-v2 .breadcrumb,
body.pricing-page-v2 .hero-card,
body.pricing-page-v2 .panel,
body.pricing-page-v2 .faq details,
body.pricing-page-v2 .site-footer,
body.pricing-page-v2 .pricing-card,
body.pricing-page-v2 .cta-band {
  background: var(--ios-fallback-surface) !important;
  border-color: var(--ios-fallback-border) !important;
  color: var(--ios-fallback-text) !important;
  box-shadow: var(--ios-fallback-shadow) !important;
}

body.pricing-page-v2 h1,
body.pricing-page-v2 h2,
body.pricing-page-v2 h3,
body.pricing-page-v2 .pricing-card-price,
body.pricing-page-v2 .hero-card__top strong,
body.pricing-page-v2 .faq summary {
  color: var(--ios-fallback-text) !important;
}

body.pricing-page-v2 p,
body.pricing-page-v2 li,
body.pricing-page-v2 .trust-line,
body.pricing-page-v2 .pricing-card p,
body.pricing-page-v2 .site-footer p,
body.pricing-page-v2 .site-footer a {
  color: var(--ios-fallback-muted) !important;
}

body.pricing-page-v2 .eyebrow,
body.pricing-page-v2 .pill,
body.pricing-page-v2 .tag,
body.pricing-page-v2 .pricing-card-badge,
body.pricing-page-v2 .mini-table div {
  background: rgba(37, 135, 232, 0.16) !important;
  border-color: rgba(184, 213, 255, 0.3) !important;
  color: #dff0ff !important;
}

body.pricing-page-v2 .btn-secondary,
body.pricing-page-v2 .plan-select-btn--free {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(184, 213, 255, 0.36) !important;
  color: var(--ios-fallback-text) !important;
}

/* Policy page */
body.policy-page-ios-fallback {
  --policy-page: var(--ios-fallback-bg-1);
  --policy-page-soft: var(--ios-fallback-bg-2);
  --policy-surface: rgba(13, 34, 62, 0.92);
  --policy-surface-strong: rgba(15, 40, 72, 0.96);
  --policy-text: var(--ios-fallback-text);
  --policy-muted: var(--ios-fallback-muted);
  --policy-line: var(--ios-fallback-border);
}

.policy-shell .card,
.policy-shell .policy-hero,
.policy-shell .policy-toc,
.policy-shell .policy-card,
.policy-shell .policy-hero-art,
.policy-shell .policy-hero-chip,
.policy-shell .policy-hero-badge {
  background: var(--ios-fallback-surface) !important;
  border-color: var(--ios-fallback-border) !important;
  color: var(--ios-fallback-text) !important;
  box-shadow: var(--ios-fallback-shadow) !important;
}

.policy-shell h1,
.policy-shell h2,
.policy-shell h3,
.policy-shell strong,
.policy-shell summary,
.policy-shell .policy-card-index {
  color: var(--ios-fallback-text) !important;
}

.policy-shell p,
.policy-shell li,
.policy-shell a,
.policy-shell .policy-toc-label,
.policy-shell .policy-hero-copy p,
.policy-shell .policy-card p {
  color: var(--ios-fallback-muted) !important;
}

/* Change password and shared-background auth/status pages */
body.sheetgenie-shared-bg .card,
body.sheetgenie-shared-bg .hero-card,
body.sheetgenie-shared-bg .account-box,
body.sheetgenie-shared-bg .checkout-option,
body.sheetgenie-shared-bg .payment-progress-card,
body.sheetgenie-shared-bg .account-state-card,
body.sheetgenie-shared-bg .footer-card {
  background: var(--ios-fallback-surface) !important;
  border-color: var(--ios-fallback-border) !important;
  color: var(--ios-fallback-text) !important;
  box-shadow: var(--ios-fallback-shadow) !important;
}

body.sheetgenie-shared-bg h1,
body.sheetgenie-shared-bg h2,
body.sheetgenie-shared-bg h3,
body.sheetgenie-shared-bg strong,
body.sheetgenie-shared-bg label,
body.sheetgenie-shared-bg .title,
body.sheetgenie-shared-bg .form-label,
body.sheetgenie-shared-bg .option-price {
  color: var(--ios-fallback-text) !important;
}

body.sheetgenie-shared-bg p,
body.sheetgenie-shared-bg li,
body.sheetgenie-shared-bg .desc,
body.sheetgenie-shared-bg .subtitle,
body.sheetgenie-shared-bg .option-desc,
body.sheetgenie-shared-bg .payment-progress-desc,
body.sheetgenie-shared-bg .payment-progress-meta,
body.sheetgenie-shared-bg .account-box span {
  color: var(--ios-fallback-muted) !important;
}

body.sheetgenie-shared-bg .input-wrap,
body.sheetgenie-shared-bg input,
body.sheetgenie-shared-bg .secondary-btn,
body.sheetgenie-shared-bg .ghost-btn,
body.sheetgenie-shared-bg .option-badge,
body.sheetgenie-shared-bg .brand-row img,
body.sheetgenie-shared-bg .promptpay-logo-wrap {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(184, 213, 255, 0.3) !important;
  color: var(--ios-fallback-text) !important;
}

body.sheetgenie-shared-bg input::placeholder {
  color: rgba(199, 216, 240, 0.62) !important;
}

/* Keep the light topbar readable when shared pages force dark-card text. */
html[data-index-v2-theme] body.has-site-topbar-v2 .sgv2-topbar,
html[data-index-v2-theme] body.has-site-topbar-v2 .sgv2-topbar :where(
  .sgv2-brand,
  .sgv2-brand-name,
  .sgv2-plan-badge,
  .sgv2-topbar-btn:not(.sgv2-topbar-btn-primary),
  .sgv2-account-btn
) {
  color: var(--sgv2-topbar-text, #10233f) !important;
}

html[data-index-v2-theme] body.has-site-topbar-v2 .sgv2-topbar :where(
  .sgv2-brand-tagline,
  .sgv2-nav a,
  .sgv2-lang-btn,
  .sgv2-account-plan
) {
  color: var(--sgv2-topbar-muted, #40536e) !important;
}

html[data-index-v2-theme] body.has-site-topbar-v2 .sgv2-topbar :where(
  .sgv2-topbar-btn-primary,
  .sgv2-mobile-cta,
  .sgv2-menu-btn,
  .sgv2-menu-btn span,
  .sgv2-avatar,
  .sgv2-menu-avatar,
  .sgv2-mobile-avatar,
  .sgv2-lang-btn.is-active
) {
  color: #ffffff !important;
}

/* If :has is not available, the page-specific load on policy still covers the
   main card colors through .policy-shell selectors above. */

/* Legacy WebKit fallback: keep this last and avoid CSS variables/functions that
   older iPad Safari builds may drop as invalid declarations. */
body.pricing-page-v2,
body.sheetgenie-shared-bg,
body.policy-page-ios-fallback,
body.login-page-v2 {
  background-color: #07152c !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(37, 135, 232, 0.42), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(238, 106, 95, 0.24), transparent 28%),
    linear-gradient(140deg, #07152c 0%, #0b2143 46%, #123267 100%) !important;
  color: #f3f8ff !important;
}

body.pricing-page-v2 .breadcrumb,
body.pricing-page-v2 .hero-card,
body.pricing-page-v2 .panel,
body.pricing-page-v2 .faq details,
body.pricing-page-v2 .site-footer,
body.pricing-page-v2 .pricing-card,
body.pricing-page-v2 .cta-band,
.policy-shell .card,
.policy-shell .policy-hero,
.policy-shell .policy-toc,
.policy-shell .policy-card,
.policy-shell .policy-hero-art,
.policy-shell .policy-hero-chip,
.policy-shell .policy-hero-badge,
body.sheetgenie-shared-bg .card,
body.sheetgenie-shared-bg .hero-card,
body.sheetgenie-shared-bg .account-box,
body.sheetgenie-shared-bg .checkout-option,
body.sheetgenie-shared-bg .payment-progress-card,
body.sheetgenie-shared-bg .account-state-card,
body.sheetgenie-shared-bg .footer-card,
body.login-page-v2 .hero-panel,
body.login-page-v2 .login-card,
body.login-page-v2 .preview-widget,
body.login-page-v2 .trial-btn {
  background-color: rgba(13, 38, 66, 0.96) !important;
  background-image: linear-gradient(165deg, rgba(37, 135, 232, 0.28), rgba(13, 38, 66, 0.96) 48%, rgba(238, 106, 95, 0.2)) !important;
  border-color: rgba(184, 213, 255, 0.36) !important;
  color: #f3f8ff !important;
}

body.pricing-page-v2 h1,
body.pricing-page-v2 h2,
body.pricing-page-v2 h3,
body.pricing-page-v2 strong,
body.pricing-page-v2 .pricing-card-price,
.policy-shell h1,
.policy-shell h2,
.policy-shell h3,
.policy-shell strong,
.policy-shell summary,
body.sheetgenie-shared-bg h1,
body.sheetgenie-shared-bg h2,
body.sheetgenie-shared-bg h3,
body.sheetgenie-shared-bg strong,
body.sheetgenie-shared-bg label,
body.sheetgenie-shared-bg .title,
body.sheetgenie-shared-bg .form-label,
body.sheetgenie-shared-bg .option-price,
body.login-page-v2 h1,
body.login-page-v2 h2,
body.login-page-v2 h3,
body.login-page-v2 strong,
body.login-page-v2 label,
body.login-page-v2 .hero-title,
body.login-page-v2 .form-label,
body.login-page-v2 .trial-title {
  color: #f3f8ff !important;
  -webkit-text-fill-color: #f3f8ff;
}

body.pricing-page-v2 p,
body.pricing-page-v2 li,
body.pricing-page-v2 .trust-line,
body.pricing-page-v2 .site-footer a,
.policy-shell p,
.policy-shell li,
.policy-shell a,
.policy-shell .policy-toc-label,
body.sheetgenie-shared-bg p,
body.sheetgenie-shared-bg li,
body.sheetgenie-shared-bg .desc,
body.sheetgenie-shared-bg .subtitle,
body.sheetgenie-shared-bg .option-desc,
body.sheetgenie-shared-bg .payment-progress-desc,
body.sheetgenie-shared-bg .payment-progress-meta,
body.sheetgenie-shared-bg .account-box span,
body.login-page-v2 p,
body.login-page-v2 li,
body.login-page-v2 .subtitle,
body.login-page-v2 .hero-subtitle,
body.login-page-v2 .widget-copy,
body.login-page-v2 .google-hint,
body.login-page-v2 .bottom-text,
body.login-page-v2 .trial-subtitle,
body.login-page-v2 .remember {
  color: #c7d8f0 !important;
  -webkit-text-fill-color: #c7d8f0;
}

body.sheetgenie-shared-bg .input-wrap,
body.sheetgenie-shared-bg input,
body.sheetgenie-shared-bg .secondary-btn,
body.sheetgenie-shared-bg .ghost-btn,
body.sheetgenie-shared-bg .option-badge,
body.sheetgenie-shared-bg .brand-row img,
body.sheetgenie-shared-bg .promptpay-logo-wrap,
body.pricing-page-v2 .btn-secondary,
body.pricing-page-v2 .plan-select-btn--free,
body.pricing-page-v2 .eyebrow,
body.pricing-page-v2 .pill,
body.pricing-page-v2 .tag,
body.pricing-page-v2 .pricing-card-badge,
body.login-page-v2 .input-wrap,
body.login-page-v2 input,
body.login-page-v2 .feature-chip,
body.login-page-v2 .hero-kicker,
body.login-page-v2 .trial-badge,
body.login-page-v2 .google-divider span {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(184, 213, 255, 0.34) !important;
  color: #f3f8ff !important;
}

body.login-page-v2 .submit-btn,
body.login-page-v2 .trial-btn,
body.login-page-v2 .option-btn,
body.login-page-v2 .btn-primary {
  background-image: linear-gradient(135deg, #2587e8, #ee6a5f) !important;
  border-color: rgba(184, 213, 255, 0.4) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

body.login-page-v2 .link,
body.login-page-v2 .toggle-password {
  color: #dff0ff !important;
  -webkit-text-fill-color: #dff0ff;
}

/* Index material Safari bridge: keep the Safari-safe dark material, but inherit
   the active Index V2 theme tokens so iPad users can still change themes/colors. */
body.pricing-page-v2,
body.policy-page-ios-fallback,
body.sheetgenie-shared-bg,
body.checkout-page,
body.change-password-page,
body.login-page-v2 {
  --ios-material-bg-1: var(--bg-primary, var(--ios-fallback-bg-1, #07152c));
  --ios-material-bg-2: var(--bg-secondary, var(--ios-fallback-bg-2, #0b2143));
  --ios-material-bg-3: var(--bg-tertiary, var(--ios-fallback-bg-3, #123267));
  --ios-material-accent: var(--sgv2-accent, var(--ios-fallback-accent, #2587e8));
  --ios-material-accent-2: var(--sgv2-accent-2, var(--ios-fallback-accent-2, #ee6a5f));
  --ios-material-accent-3: var(--sgv2-accent-3, var(--ios-fallback-accent-3, #1fa98d));
  --ios-material-glow-a: var(--index-v2-glow-a, rgba(var(--ios-fallback-accent-rgb), 0.42));
  --ios-material-glow-b: var(--index-v2-glow-b, rgba(var(--ios-fallback-accent-2-rgb), 0.28));
  --ios-material-glow-c: var(--card-bg, rgba(var(--ios-fallback-accent-3-rgb), 0.3));
  --ios-material-panel-bg: var(--index-v2-panel-bg, linear-gradient(165deg, rgba(var(--ios-fallback-accent-rgb), 0.24), rgba(10, 23, 42, 0.98) 52%, rgba(var(--ios-fallback-accent-2-rgb), 0.16)));
  --ios-material-card-bg: var(--index-v2-card-bg, linear-gradient(165deg, rgba(var(--ios-fallback-accent-rgb), 0.2), rgba(255, 255, 255, 0.08) 48%, rgba(var(--ios-fallback-accent-2-rgb), 0.14)));
  --ios-material-card-strong-bg: var(--index-v2-card-bg-strong, linear-gradient(160deg, rgba(var(--ios-fallback-accent-rgb), 0.18), rgba(9, 20, 38, 0.98) 58%, rgba(var(--ios-fallback-accent-3-rgb), 0.12)));
  --ios-material-chip-bg: var(--card-bg-soft, rgba(255, 255, 255, 0.1));
  --ios-material-border: var(--card-border, rgba(184, 213, 255, 0.42));
  --ios-material-border-soft: var(--card-border-soft, rgba(184, 213, 255, 0.36));
  background-color: var(--ios-material-bg-1) !important;
  background-image:
    radial-gradient(circle at 10% 12%, var(--ios-material-glow-a), transparent 34%),
    radial-gradient(circle at 86% 80%, var(--ios-material-glow-c), transparent 30%),
    radial-gradient(circle at 72% 18%, var(--ios-material-glow-b), transparent 26%),
    linear-gradient(140deg, var(--ios-material-bg-1) 0%, var(--ios-material-bg-2) 46%, var(--ios-material-bg-3) 100%) !important;
  color: #f3f8ff !important;
}

body.pricing-page-v2::before,
body.policy-page-ios-fallback::before,
body.checkout-page::before,
body.change-password-page::before,
body.login-page-v2::before {
  background: transparent !important;
  opacity: 0.2 !important;
}

body.pricing-page-v2 .background-scene,
body.policy-page-ios-fallback .background-scene,
body.sheetgenie-shared-bg .background-scene,
body.checkout-page .background-scene,
body.change-password-page .background-scene,
body.login-page-v2 .background-scene {
  background-color: var(--ios-material-bg-1) !important;
  background-image:
    radial-gradient(circle at 12% 18%, var(--ios-material-glow-a), transparent 34%),
    radial-gradient(circle at 82% 74%, var(--ios-material-glow-c), transparent 30%),
    linear-gradient(140deg, var(--ios-material-bg-1) 0%, var(--ios-material-bg-2) 48%, var(--ios-material-bg-3) 100%) !important;
  opacity: 1 !important;
}

body.pricing-page-v2 .background-scene .blob,
body.policy-page-ios-fallback .background-scene .blob,
body.sheetgenie-shared-bg .background-scene .blob,
body.checkout-page .background-scene .blob,
body.change-password-page .background-scene .blob,
body.login-page-v2 .background-scene .blob {
  opacity: 0.34 !important;
}

body.pricing-page-v2 .breadcrumb,
body.pricing-page-v2 .hero--compact > div:first-child,
body.pricing-page-v2 .hero-card,
body.pricing-page-v2 .panel,
body.pricing-page-v2 .pricing-v2-head,
body.pricing-page-v2 .pricing-card,
body.pricing-page-v2 .faq details,
body.pricing-page-v2 .site-footer,
body.pricing-page-v2 .cta-band,
.policy-shell .card,
.policy-shell .policy-hero,
.policy-shell .policy-toc,
.policy-shell .policy-card,
.policy-shell .policy-contact,
.policy-shell .policy-footer,
.policy-shell .landing-footer-inner,
.policy-shell .policy-hero-art,
.policy-shell .policy-hero-chip,
.policy-shell .policy-hero-badge,
body.sheetgenie-shared-bg .card,
body.sheetgenie-shared-bg .hero-card,
body.sheetgenie-shared-bg .account-box,
body.sheetgenie-shared-bg .checkout-option,
body.sheetgenie-shared-bg .payment-progress-card,
body.sheetgenie-shared-bg .account-state-card,
body.sheetgenie-shared-bg .footer-card,
body.checkout-page .hero-card,
body.checkout-page .account-box,
body.checkout-page .checkout-option,
body.checkout-page .payment-progress-card,
body.checkout-page .account-state-card,
body.checkout-page .footer-card,
body.change-password-page .card,
body.login-page-v2 .hero-panel,
body.login-page-v2 .login-card,
body.login-page-v2 .preview-widget,
body.login-page-v2 .trial-btn {
  background-color: var(--ios-material-bg-2) !important;
  background-image: var(--ios-material-panel-bg) !important;
  border-color: var(--ios-material-border) !important;
  color: #f3f8ff !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.pricing-page-v2 .pricing-card,
body.pricing-page-v2 .pricing-card--pro,
body.pricing-page-v2 .pricing-card--yearly,
body.pricing-page-v2 .mini-table,
body.pricing-page-v2 .mini-table div,
.policy-shell .policy-card,
.policy-shell .policy-contact,
.policy-shell .policy-footer .landing-footer-inner,
body.checkout-page .checkout-option,
body.change-password-page .card {
  background-color: var(--ios-material-bg-3) !important;
  background-image: var(--ios-material-card-strong-bg) !important;
}

body.pricing-page-v2 .hero--compact > div:first-child::after,
body.pricing-page-v2 .hero-card::before,
body.pricing-page-v2 .panel::after,
body.pricing-page-v2 .pricing-card::before,
body.pricing-page-v2 .faq details::before,
body.pricing-page-v2 .site-footer::before,
.policy-shell .card::before,
.policy-shell .policy-card::before,
.policy-shell .policy-hero::before,
.policy-shell .policy-footer::before,
body.checkout-page .hero-card::before,
body.checkout-page .checkout-option::before,
body.change-password-page .card::before,
body.login-page-v2 .hero-panel::before,
body.login-page-v2 .login-card::before {
  background: none !important;
  opacity: 0 !important;
}

body.pricing-page-v2 .hero--compact > div:first-child::before {
  background: linear-gradient(90deg, var(--ios-material-accent), var(--ios-material-accent-2), var(--ios-material-accent-3)) !important;
  opacity: 0.95 !important;
}

body.pricing-page-v2 h1,
body.pricing-page-v2 h2,
body.pricing-page-v2 h3,
body.pricing-page-v2 summary,
body.pricing-page-v2 strong,
body.pricing-page-v2 .pricing-v2-head h2,
body.pricing-page-v2 .pricing-card-price,
body.pricing-page-v2 .pricing-price-major,
.policy-shell h1,
.policy-shell h2,
.policy-shell h3,
.policy-shell strong,
.policy-shell summary,
.policy-shell .policy-contact-copy h2,
body.sheetgenie-shared-bg h1,
body.sheetgenie-shared-bg h2,
body.sheetgenie-shared-bg h3,
body.sheetgenie-shared-bg strong,
body.sheetgenie-shared-bg label,
body.checkout-page h1,
body.checkout-page h2,
body.checkout-page h3,
body.checkout-page strong,
body.change-password-page h1,
body.change-password-page h2,
body.change-password-page h3,
body.change-password-page strong,
body.change-password-page label,
body.login-page-v2 h1,
body.login-page-v2 h2,
body.login-page-v2 h3,
body.login-page-v2 strong,
body.login-page-v2 label {
  color: #f3f8ff !important;
  -webkit-text-fill-color: #f3f8ff !important;
}

body.pricing-page-v2 p,
body.pricing-page-v2 li,
body.pricing-page-v2 .section-head p,
body.pricing-page-v2 .pricing-v2-head p,
body.pricing-page-v2 .pricing-price-period,
body.pricing-page-v2 .pricing-card-price-note,
body.pricing-page-v2 .pricing-card-desc,
body.pricing-page-v2 .pricing-pro-note,
body.pricing-page-v2 .trust-line,
body.pricing-page-v2 .site-footer a,
.policy-shell p,
.policy-shell li,
.policy-shell a,
.policy-shell .policy-toc-label,
.policy-shell .policy-contact-copy p,
.policy-shell .landing-footer-inner > p,
body.sheetgenie-shared-bg p,
body.sheetgenie-shared-bg li,
body.sheetgenie-shared-bg .desc,
body.sheetgenie-shared-bg .subtitle,
body.checkout-page p,
body.checkout-page li,
body.checkout-page .option-desc,
body.checkout-page .payment-progress-desc,
body.checkout-page .payment-progress-meta,
body.change-password-page p,
body.change-password-page li,
body.change-password-page .desc,
body.login-page-v2 p,
body.login-page-v2 li,
body.login-page-v2 .subtitle,
body.login-page-v2 .hero-subtitle,
body.login-page-v2 .widget-copy,
body.login-page-v2 .google-hint,
body.login-page-v2 .bottom-text,
body.login-page-v2 .remember {
  color: #d3e6ff !important;
  -webkit-text-fill-color: #d3e6ff !important;
}

body.pricing-page-v2 .eyebrow,
body.pricing-page-v2 .pill,
body.pricing-page-v2 .tag,
body.pricing-page-v2 .pricing-card-badge,
body.pricing-page-v2 .pricing-price-box,
body.pricing-page-v2 .pricing-price-box--pro,
body.pricing-page-v2 .pricing-price-box--yearly,
body.pricing-page-v2 .btn-secondary,
body.pricing-page-v2 .plan-select-btn--free,
body.pricing-page-v2 .plan-select-btn--ghost,
.policy-shell .policy-toc-pill,
.policy-shell .policy-footer .landing-footer-nav a,
body.sheetgenie-shared-bg .input-wrap,
body.sheetgenie-shared-bg input,
body.sheetgenie-shared-bg .secondary-btn,
body.sheetgenie-shared-bg .ghost-btn,
body.checkout-page .option-badge,
body.checkout-page .brand-row img,
body.checkout-page .promptpay-logo-wrap,
body.change-password-page .input-wrap,
body.change-password-page input,
body.change-password-page .secondary-btn,
body.login-page-v2 .input-wrap,
body.login-page-v2 input,
body.login-page-v2 .feature-chip,
body.login-page-v2 .hero-kicker,
body.login-page-v2 .trial-badge,
body.login-page-v2 .google-divider span {
  background-color: var(--ios-material-chip-bg) !important;
  background-image: none !important;
  border-color: var(--ios-material-border-soft) !important;
  color: #f3f8ff !important;
  -webkit-text-fill-color: #f3f8ff !important;
}

body.pricing-page-v2 .btn-primary,
body.pricing-page-v2 .plan-select-btn--monthly,
body.pricing-page-v2 .plan-select-btn--yearly,
body.pricing-page-v2 .plan-select-btn--final,
.policy-shell .policy-contact-cta,
body.sheetgenie-shared-bg .option-btn,
body.checkout-page .option-btn,
body.change-password-page .submit-btn,
body.login-page-v2 .submit-btn,
body.login-page-v2 .trial-btn,
body.login-page-v2 .option-btn,
body.login-page-v2 .btn-primary {
  background-color: var(--ios-material-accent) !important;
  background-image: linear-gradient(135deg, var(--ios-material-accent), var(--ios-material-accent-2)) !important;
  border-color: var(--ios-material-border) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--button-shadow, 0 16px 34px rgba(var(--ios-fallback-accent-rgb), 0.3)) !important;
}

body.login-page-v2 .form-panel,
body.login-page-v2 .hero-panel {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.login-page-v2 .hero-panel::before {
  display: none !important;
}