/* Final page adapters for public/customer-facing screens.
   Always fetched before first paint; activated atomically by this media guard. */
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
  :root {
    --public-page-canvas: #080f20;
    --public-page-canvas-soft: #0c1628;
    --public-page-surface: #111b2c;
    --public-page-raised: #17243a;
    --public-page-soft: #1d2c44;
    --public-page-hover: #243650;
    --public-page-border: rgba(174, 194, 224, .18);
    --public-page-border-strong: rgba(174, 194, 224, .32);
    --public-page-text: #f4f7fc;
    --public-page-text-soft: #c1cce0;
    --public-page-text-muted: #8fa0bb;
    --public-page-blue: #4f83ff;
    --public-page-blue-hover: #6d98ff;
    --public-page-blue-deep: #2458d8;
  }

  html body.external-page,
  html body.tw-login,
  html body.tw-register {
    color-scheme: dark;
    color: var(--public-page-text) !important;
    background:
      radial-gradient(circle at 10% -12%, rgba(47, 107, 255, .18), transparent 32rem),
      radial-gradient(circle at 92% 110%, rgba(56, 189, 248, .07), transparent 28rem),
      var(--public-page-canvas) !important;
    background-color: var(--public-page-canvas) !important;
  }

  /* Shared public navigation: every resting, hover and keyboard state remains dark. */
  html body.external-page :is(.navbar, .main-header, .mobile-menu, .mobile-menu-content) {
    color: var(--public-page-text) !important;
    background: rgba(8, 15, 32, .96) !important;
    background-image: none !important;
    border-color: var(--public-page-border) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22) !important;
  }

  html body.external-page :is(.nav-links a, .mobile-links a, .mobile-nav-item) {
    color: var(--public-page-text-soft) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html body.external-page :is(.nav-links a, .mobile-links a, .mobile-nav-item):is(:hover, :focus-visible) {
    color: var(--public-page-blue-hover) !important;
    background: var(--public-page-raised) !important;
    border-color: rgba(79, 131, 255, .3) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html body.external-page :is(
    .nav-links .highlighted, .nav-links a.active,
    .mobile-links .highlighted, .mobile-links a.active
  ) {
    color: var(--public-page-blue-hover) !important;
    background: rgba(79, 131, 255, .14) !important;
    background-image: none !important;
    border-color: rgba(79, 131, 255, .38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  }

  html body.external-page :is(
    .nav-links .highlighted, .nav-links a.active,
    .mobile-links .highlighted, .mobile-links a.active
  ) :is(i, svg) {
    color: var(--public-page-blue-hover) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  html body.external-page :is(.hamburger, .mobile-menu-toggle) {
    color: var(--public-page-text) !important;
    background: var(--public-page-raised) !important;
    border-color: var(--public-page-border) !important;
  }

  html body.external-page :is(.hamburger, .mobile-menu-toggle):is(:hover, :focus-visible) {
    color: #fff !important;
    background: var(--public-page-hover) !important;
    border-color: rgba(109, 152, 255, .48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075) !important;
    filter: none !important;
  }

  html:root body.external-page.tw-homepage .navbar .logout-btn {
    color: var(--public-page-text-soft) !important;
    background: var(--public-page-raised) !important;
    border-color: var(--public-page-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    filter: none !important;
  }

  html:root body.external-page.tw-homepage .navbar .logout-btn:is(:hover, :focus-visible) {
    color: #fff !important;
    background: var(--public-page-hover) !important;
    border-color: rgba(109, 152, 255, .48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .085) !important;
    filter: none !important;
  }

  html:root body.external-page.tw-homepage .mobile-menu .logout-btn {
    color: #fda4af !important;
    background: rgba(239, 68, 68, .1) !important;
    border-color: rgba(251, 113, 133, .7) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    filter: none !important;
  }

  html:root body.external-page.tw-homepage .mobile-menu .logout-btn:is(:hover, :focus-visible) {
    color: #fff !important;
    background: rgba(239, 68, 68, .2) !important;
    border-color: #fb7185 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075) !important;
    filter: none !important;
  }

  /* Neutral public controls must not flash white on hover or focus. */
  html body.external-page :is(
    .navbar .btn-login, .mobile-login-btn, .btn-secondary, .btn-cancel,
    .btn-manage, .btn-close, .btn-google-login, .social-google-btn,
    .google-btn, .back-link
  ),
  html body.tw-login :is(.btn-google-login, .btn-secondary),
  html body.tw-register :is(.social-google-btn, .btn-google-login) {
    --public-button-neutral-depth: #0b1425;
    --public-button-local-depth: #0b1425;
    color: var(--public-page-text) !important;
    background: var(--public-page-raised) !important;
    background-image: none !important;
    border-color: var(--public-page-border-strong) !important;
    border-bottom-color: #0b1425 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    filter: none !important;
  }

  html body.external-page :is(
    .navbar .btn-login, .mobile-login-btn, .btn-secondary, .btn-cancel,
    .btn-manage, .btn-close, .btn-google-login, .social-google-btn,
    .google-btn, .back-link
  ):is(:hover, :focus-visible),
  html body.tw-login :is(.btn-google-login, .btn-secondary):is(:hover, :focus-visible),
  html body.tw-register :is(.social-google-btn, .btn-google-login):is(:hover, :focus-visible) {
    color: var(--public-page-text) !important;
    background: var(--public-page-hover) !important;
    background-image: none !important;
    border-color: rgba(109, 152, 255, .48) !important;
    border-bottom-color: #0b1425 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075) !important;
    filter: none !important;
  }

  html body.external-page :is(
    .navbar .btn-login, .mobile-login-btn, .btn-secondary, .btn-cancel,
    .btn-manage, .btn-close, .btn-google-login, .social-google-btn,
    .google-btn, .back-link
  ):active,
  html body.tw-login :is(.btn-google-login, .btn-secondary):active,
  html body.tw-register :is(.social-google-btn, .btn-google-login):active {
    color: var(--public-page-text) !important;
    background: var(--public-page-soft) !important;
    border-bottom-color: #0b1425 !important;
  }

  html body.external-page :is(
    .btn-primary, .btn-oldprimary, .btn-register, .btn-enter, .submit-btn, .contact-btn,
    .checkout-btn, .btn-checkout, .mobile-register-btn
  ),
  html body.tw-login .btn-login,
  html body.tw-register .submit-btn {
    color: #fff !important;
    background: #2f6bff !important;
    background-image: none !important;
    border-color: #1849bb !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  }

  html body.external-page :is(
    .btn-primary, .btn-oldprimary, .btn-register, .btn-enter, .submit-btn, .contact-btn,
    .checkout-btn, .btn-checkout, .mobile-register-btn
  ):is(:hover, :focus-visible),
  html body.tw-login .btn-login:is(:hover, :focus-visible),
  html body.tw-register .submit-btn:is(:hover, :focus-visible) {
    color: #fff !important;
    background: #255fe8 !important;
    background-image: none !important;
    border-color: #153fa5 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32) !important;
    filter: none !important;
  }

  html body.external-page :is(a, button, input, select, textarea):focus-visible,
  html body.tw-login :is(a, button, input):focus-visible,
  html body.tw-register :is(a, button, input, select):focus-visible {
    outline: 3px solid rgba(109, 152, 255, .5) !important;
    outline-offset: 3px !important;
  }

  html body.external-page :is(button, .btn, input, select, textarea):disabled,
  html body.external-page :is(.btn, button).disabled,
  html body.tw-login :is(button, input):disabled,
  html body.tw-register :is(button, input, select):disabled {
    color: var(--public-page-text-muted) !important;
    background: var(--public-page-soft) !important;
    border-color: var(--public-page-border) !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: .72;
  }

  /* Login and account-entry family. */
  html body.tw-login .login-container {
    color: var(--public-page-text) !important;
    background: var(--public-page-surface) !important;
    background-image: none !important;
    border: 1px solid rgba(109, 152, 255, .28) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  }

  html body.tw-login :is(.form-header, .login-form, .input-group, .form-options, .remember-me, .signup-link) {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html body.tw-login :is(.form-title, .remember-label) {
    color: var(--public-page-text) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html body.tw-login :is(.form-subtitle, .divider-text, .signup-link) {
    color: var(--public-page-text-soft) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html body.tw-login :is(.forgot-password, .signup-link a, .input-icon) {
    color: var(--public-page-blue-hover) !important;
  }

  html body.tw-login :is(.forgot-password, .signup-link a):hover {
    color: #91adff !important;
  }

  html body.tw-login :is(input.form-input, input[type="email"], input[type="password"], input[type="text"]) {
    color: var(--public-page-text) !important;
    background: var(--public-page-raised) !important;
    background-image: none !important;
    border-color: var(--public-page-border-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  }

  html body.tw-login :is(input.form-input, input[type="email"], input[type="password"], input[type="text"]):is(:hover, :focus) {
    color: var(--public-page-text) !important;
    background: var(--public-page-soft) !important;
    border-color: rgba(109, 152, 255, .62) !important;
    box-shadow: 0 0 0 3px rgba(79, 131, 255, .15) !important;
    transform: none !important;
  }

  html body.tw-login .password-toggle {
    color: var(--public-page-text-muted) !important;
    background: transparent !important;
  }

  html body.tw-login .password-toggle:is(:hover, :focus-visible) {
    color: var(--public-page-blue-hover) !important;
    background: transparent !important;
  }

  html body.tw-login .divider {
    color: var(--public-page-text-muted) !important;
    background: transparent !important;
  }

  html body.tw-login .divider::before,
  html body.tw-login .divider::after {
    background: var(--public-page-border) !important;
  }

  html body.tw-login .divider:hover::before,
  html body.tw-login .divider:hover::after {
    background: rgba(109, 152, 255, .42) !important;
  }

  html body.tw-login .remember-checkbox {
    color-scheme: dark;
    accent-color: #4f83ff;
  }

  /* Registration and password/reset/OTP cards. */
  html body.external-page.tw-register .registration-container,
  html body.external-page.tw-register .registration-container .form-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html body.tw-register .form-card,
  html body:not(.external-page):not(.tw-dashboard) :is(
    .forgot-form, .new-password-form, .password-card, .otp-card,
    .code-inputs-container, .confirmation-form, .ban-card
  ) {
    color: var(--public-page-text) !important;
    background: var(--public-page-surface) !important;
    background-image: none !important;
    border-color: var(--public-page-border) !important;
    box-shadow: 0 22px 52px rgba(0, 0, 0, .38) !important;
  }

  html body.tw-register :is(.registration-hero p, .terms-text, .login-link, .requirement-item, .password-strength-text),
  html body:not(.external-page):not(.tw-dashboard) :is(.helper-text, .form-subtitle, .instruction, .description) {
    color: var(--public-page-text-soft) !important;
  }

  html body.tw-register :is(.birthdate-picker, .password-requirements) {
    color: var(--public-page-text-soft) !important;
    background: var(--public-page-raised) !important;
    background-image: none !important;
    border-color: var(--public-page-border) !important;
  }

  html body.tw-register :is(.form-control, .picker-input, .picker-select),
  html body:not(.external-page):not(.tw-dashboard) :is(.input-field, .code-input) {
    color: var(--public-page-text) !important;
    background: var(--public-page-raised) !important;
    border-color: var(--public-page-border-strong) !important;
  }

  html body.tw-register :is(.form-control, .picker-input, .picker-select):is(:hover, :focus),
  html body:not(.external-page):not(.tw-dashboard) :is(.input-field, .code-input):is(:hover, :focus) {
    color: var(--public-page-text) !important;
    background: var(--public-page-soft) !important;
    border-color: rgba(109, 152, 255, .62) !important;
  }

  /* Homepage: one coherent dark canvas, intentional raised cards and no white hover flash. */
  html:root body.external-page.tw-homepage section.hero,
  html:root body.external-page.tw-homepage section.hero::before {
    color: var(--public-page-text) !important;
    background: var(--public-page-canvas) !important;
    background-image: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  html body.tw-homepage .hero :is(h1, .home-hero-title, .home-hero-title-line, .home-hero-title-dream) {
    color: var(--public-page-text) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html body.tw-homepage .hero .home-hero-title-accent {
    color: var(--public-page-blue) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html body.tw-homepage .hero p {
    color: var(--public-page-text-soft) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html body.tw-homepage .hero-image .video-wrapper {
    color: var(--public-page-text-soft) !important;
    background: var(--public-page-raised) !important;
    background-image: none !important;
    border-color: rgba(109, 152, 255, .28) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .3) !important;
  }

  html:root body.external-page.tw-homepage .hero :is(.university-logos, .logos-container) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body.tw-homepage .logo-promo-text {
    color: var(--public-page-text-soft) !important;
  }

  html body.tw-homepage .university-logo {
    opacity: .82 !important;
    filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0, 0, 0, .22)) !important;
  }

  html body.tw-homepage .university-logo:hover {
    opacity: 1 !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0, 0, 0, .28)) !important;
  }

  html:root body.external-page.tw-homepage .hero .btn.btn-secondary,
  html:root body.external-page.tw-homepage .hero .btn.btn-secondary:is(:hover, :focus-visible) {
    --home-secondary-surface: #17243a;
    --home-secondary-border: #60728e;
    --home-secondary-depth: #60728e;
    --public-button-local-depth: #60728e;
    color: #dbe4f2 !important;
    background: #17243a !important;
    background-image: none !important;
    border-top: 0 solid transparent !important;
    border-right: 1px solid #60728e !important;
    border-bottom: 4px solid #60728e !important;
    border-left: 1px solid #60728e !important;
    box-shadow: inset 0 1px 0 rgba(244, 247, 252, .075) !important;
    filter: none !important;
    transform: none !important;
  }

  html:root body.external-page.tw-homepage .hero .btn.btn-secondary:is(:hover, :focus-visible) {
    --home-secondary-depth: #7890b3;
    --public-button-local-depth: #7890b3;
    color: #f4f7fc !important;
    background: #1a2941 !important;
    border-right-color: #7890b3 !important;
    border-bottom-color: #7890b3 !important;
    border-left-color: #7890b3 !important;
    box-shadow: inset 0 1px 0 rgba(244, 247, 252, .1) !important;
  }

  html:root body.external-page.tw-homepage .hero .btn.btn-secondary:active {
    color: #f4f7fc !important;
    background: #17243a !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
    border-top: 3px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-left: 1px solid transparent !important;
    box-shadow: inset 0 2px 4px rgba(6, 11, 24, .28) !important;
    filter: none !important;
    transform: none !important;
  }

  /* Desktop and mobile Login CTAs share the same neutral tactile geometry as
     the competitive confirmation modal's Cancel action. */
  html:root body.external-page.tw-homepage.tw-homepage :is(.navbar.navbar .btn-login.btn-login, .mobile-menu .mobile-login-btn.mobile-login-btn),
  html:root body.external-page.tw-register.tw-register :is(.navbar.navbar .btn-login.btn-login, .mobile-menu .mobile-login-btn.mobile-login-btn),
  html:root body.external-page.tw-homepage.tw-homepage :is(.navbar.navbar .btn-login.btn-login, .mobile-menu .mobile-login-btn.mobile-login-btn):is(:hover, :focus-visible),
  html:root body.external-page.tw-register.tw-register :is(.navbar.navbar .btn-login.btn-login, .mobile-menu .mobile-login-btn.mobile-login-btn):is(:hover, :focus-visible) {
    --public-button-neutral-depth: #60728e;
    --public-button-local-depth: #60728e;
    color: #dbe4f2 !important;
    background: #17243a !important;
    background-image: none !important;
    border-top: 0 solid transparent !important;
    border-right: 1px solid #60728e !important;
    border-bottom: 4px solid #60728e !important;
    border-left: 1px solid #60728e !important;
    box-shadow: inset 0 1px 0 rgba(244, 247, 252, .075) !important;
    filter: none !important;
    transform: none !important;
  }

  html:root body.external-page.tw-homepage.tw-homepage :is(.navbar.navbar .btn-login.btn-login, .mobile-menu .mobile-login-btn.mobile-login-btn):is(:hover, :focus-visible),
  html:root body.external-page.tw-register.tw-register :is(.navbar.navbar .btn-login.btn-login, .mobile-menu .mobile-login-btn.mobile-login-btn):is(:hover, :focus-visible) {
    --public-button-local-depth: #7890b3;
    color: #f4f7fc !important;
    background: #1a2941 !important;
    border-right-color: #7890b3 !important;
    border-bottom-color: #7890b3 !important;
    border-left-color: #7890b3 !important;
    box-shadow: inset 0 1px 0 rgba(244, 247, 252, .1) !important;
  }

  html:root body.external-page.tw-homepage.tw-homepage :is(.navbar.navbar .btn-login.btn-login, .mobile-menu .mobile-login-btn.mobile-login-btn):active,
  html:root body.external-page.tw-register.tw-register :is(.navbar.navbar .btn-login.btn-login, .mobile-menu .mobile-login-btn.mobile-login-btn):active {
    color: #f4f7fc !important;
    background: #17243a !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
    border-top: 3px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-left: 1px solid transparent !important;
    box-shadow: inset 0 2px 4px rgba(6, 11, 24, .28) !important;
    filter: none !important;
    transform: none !important;
  }

  html body.tw-homepage :is(.how-it-works, .benefits, .gamification, .faq-section) {
    color: var(--public-page-text) !important;
    background: var(--public-page-canvas) !important;
    background-image: none !important;
  }

  html body.tw-homepage :is(.exercise-features, .testimonials) {
    color: var(--public-page-text) !important;
    background: linear-gradient(145deg, #102859, #0c1b38 58%, #111b2c) !important;
  }

  html body.tw-homepage :is(.section-header h2, .section-header h3) {
    color: var(--public-page-text) !important;
  }

  html body.tw-homepage .section-header p {
    color: var(--public-page-text-soft) !important;
  }

  html body.tw-homepage :is(
    .step, .benefit-card, .feature-card, .support-card, .testimonial-card,
    .gamification-container, .progress-container, .faq-item
  ) {
    color: var(--public-page-text) !important;
    background: var(--public-page-surface) !important;
    background-image: none !important;
    border-color: var(--public-page-border) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .25) !important;
  }

  html body.tw-homepage :is(
    .step, .benefit-card, .feature-card, .support-card, .testimonial-card,
    .gamification-container, .faq-item
  ):is(:hover, :focus-within) {
    color: var(--public-page-text) !important;
    background: var(--public-page-raised) !important;
    background-image: none !important;
    border-color: rgba(109, 152, 255, .38) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .32) !important;
    filter: none !important;
  }

  html body.tw-homepage :is(
    .step, .benefit-card, .feature-card, .support-card, .testimonial-card,
    .gamification-container, .faq-item
  ) :is(h3, h4, strong, .feature-title, .author-info h4) {
    color: var(--public-page-text) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html body.tw-homepage :is(
    .step, .benefit-card, .feature-card, .support-card, .testimonial-card,
    .gamification-container, .faq-item
  ) :is(p, span, li, .feature-text, .testimonial-text, .author-info p) {
    color: var(--public-page-text-soft) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html body.tw-homepage :is(.benefit-icon, .feature-icon, .step-icon, .badge) {
    color: var(--public-page-blue-hover) !important;
    background: rgba(79, 131, 255, .13) !important;
    border-color: rgba(109, 152, 255, .24) !important;
  }

  /* The step icon is part of the card, not a nested surface. Inheriting the
     card paint also keeps both layers identical while the card is hovered. */
  html:root body.external-page.tw-homepage .how-it-works .step > .step-icon {
    background: inherit !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html:root body.external-page.tw-homepage .exercise-features :is(.highlight-badge, .golden-badge) {
    color: #bdd0ff !important;
    background: rgba(79, 131, 255, .14) !important;
    border-color: rgba(109, 152, 255, .3) !important;
  }

  html:root body.external-page.tw-homepage .support-badge {
    color: #bdd0ff !important;
    background: rgba(79, 131, 255, .14) !important;
    border: 1px solid rgba(109, 152, 255, .3) !important;
  }

  html body.tw-homepage .faq-question {
    color: var(--public-page-text) !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  html body.tw-homepage .faq-question:is(:hover, :focus-visible),
  html body.tw-homepage .faq-question[aria-expanded="true"] {
    color: var(--public-page-blue-hover) !important;
    background: var(--public-page-raised) !important;
    border-color: rgba(109, 152, 255, .3) !important;
  }

  html body.tw-homepage .faq-answer,
  html body.tw-homepage .faq-answer-inner {
    color: var(--public-page-text-soft) !important;
    background: transparent !important;
  }

  html body.tw-homepage .faq-answer-inner {
    border-top-color: var(--public-page-border) !important;
  }

  html body.tw-homepage .faq-item.open {
    border-color: rgba(109, 152, 255, .4) !important;
  }

  /* Other landing, contact, pricing and checkout pages. */
  html body.external-page :is(
    .how-it-works-main, .about-us, .contact-container, .checkout-container,
    .plans-container, .page-content
  ) {
    color: var(--public-page-text) !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body.external-page :is(
    .platform-preview, .comparison-section, .story-section, .team-section,
    .distinct-section, .contact-card, .checkout-card, .checkout-section,
    .checkout-form-container, .order-summary-container, .plan-card,
    .benefits-card, .panel, .info-card, .faq-container, .form-card
  ) {
    color: var(--public-page-text) !important;
    background: var(--public-page-surface) !important;
    background-image: none !important;
    border-color: var(--public-page-border) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .27) !important;
  }

  html body.external-page :is(
    .contact-item, .info-item, .plan-option, .price-row, .summary-row,
    .order-summary-title, .benefit-item, .option-info
  ) {
    color: var(--public-page-text-soft) !important;
    background: var(--public-page-raised) !important;
    background-image: none !important;
    border-color: var(--public-page-border) !important;
  }

  html body.external-page :is(.contact-item, .plan-option):is(:hover, :focus-within) {
    color: var(--public-page-text) !important;
    background: var(--public-page-hover) !important;
    border-color: rgba(109, 152, 255, .42) !important;
    box-shadow: none !important;
  }

  html body.external-page .call-to-action .btn,
  html body.external-page .call-to-action .btn:is(:hover, :focus-visible) {
    --public-button-local-depth: #173f9f;
    color: #fff !important;
    background: #2f6bff !important;
    background-image: none !important;
    border-color: #1849bb !important;
    border-bottom-color: #173f9f !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26) !important;
    filter: none !important;
  }

  html body.external-page .call-to-action .btn:is(:hover, :focus-visible) {
    background: #255fe8 !important;
    border-color: #153fa5 !important;
    border-bottom-color: #173f9f !important;
  }

  html body.external-page :is(
    .contact-icon, .card-icon, .plan-icon, .premium-icon, .cancel-icon,
    .checkout-modal-icon
  ) {
    color: var(--public-page-blue-hover) !important;
    background: rgba(79, 131, 255, .13) !important;
    border-color: rgba(109, 152, 255, .25) !important;
  }

  html:root body.external-page .feature-card .icon {
    color: var(--public-page-blue-hover) !important;
    background: rgba(79, 131, 255, .13) !important;
    background-image: none !important;
    border-color: rgba(109, 152, 255, .26) !important;
    box-shadow: none !important;
  }

  html:root body.external-page.about-tailwind .highlight-text {
    color: var(--public-page-text-soft) !important;
    background: var(--public-page-soft) !important;
    background-image: none !important;
    border-color: var(--public-page-border) !important;
    border-left-color: var(--public-page-blue) !important;
  }

  html:root body .cancel-card .next-steps {
    color: var(--public-page-text-soft) !important;
    background: var(--public-page-soft) !important;
    background-image: none !important;
    border-color: rgba(109, 152, 255, .28) !important;
  }

  html body.external-page .public-auth-modal-backdrop {
    background: rgba(2, 8, 20, .76) !important;
    backdrop-filter: blur(4px);
  }

  html body.external-page .public-auth-modal {
    color: var(--public-page-text) !important;
    background: var(--public-page-surface) !important;
    background-image: none !important;
    border: 1px solid var(--public-page-border) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .48) !important;
  }

  html body.external-page .public-auth-modal h3 {
    color: var(--public-page-text) !important;
  }

  html body.external-page .public-auth-modal-copy {
    color: var(--public-page-text-soft) !important;
  }

  html body.external-page .public-auth-modal-close:is(:hover, :focus-visible) {
    color: #fff !important;
    background: #255fe8 !important;
    box-shadow: 0 0 0 3px rgba(109, 152, 255, .28) !important;
  }

  html body.external-page :is(input, textarea, select, .form-control) {
    color: var(--public-page-text) !important;
    background: var(--public-page-raised) !important;
    background-image: none !important;
    border-color: var(--public-page-border-strong) !important;
  }

  html body.external-page :is(input, textarea, select, .form-control):is(:hover, :focus) {
    color: var(--public-page-text) !important;
    background: var(--public-page-soft) !important;
    border-color: rgba(109, 152, 255, .62) !important;
  }

  html body.external-page :is(input, textarea)::placeholder {
    color: var(--public-page-text-muted) !important;
    opacity: 1;
  }

  html body.external-page :is(.checkout-modal, .checkout-modal-overlay) {
    background-color: rgba(2, 6, 15, .82) !important;
  }

  html body.external-page .checkout-modal .modal-content,
  html body.external-page .checkout-modal-content {
    color: var(--public-page-text) !important;
    background: var(--public-page-surface) !important;
    border-color: var(--public-page-border-strong) !important;
    box-shadow: 0 26px 64px rgba(0, 0, 0, .48) !important;
  }

  /* Standalone legal/error/payment-result pages have no body class. */
  html body:not(.external-page):not(.tw-dashboard):not(.subscription-cancel-page) {
    color: var(--public-page-text) !important;
    background: var(--public-page-canvas) !important;
    background-color: var(--public-page-canvas) !important;
  }

  html body:not(.external-page):not(.tw-dashboard):not(.subscription-cancel-page) > :is(
    main, .container, .wrapper, .page-shell, .error-shell
  ) {
    color: var(--public-page-text) !important;
    background: var(--public-page-surface) !important;
    background-image: none !important;
    border-color: var(--public-page-border) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3) !important;
  }

  html body:not(.external-page):not(.tw-dashboard):not(.subscription-cancel-page) :is(
    .legal-content, .policy-content, .terms-content, .card, .success-card,
    .cancel-card, .error-card, .payment-card
  ) {
    color: var(--public-page-text) !important;
    background: var(--public-page-surface) !important;
    background-image: none !important;
    border-color: var(--public-page-border) !important;
  }

  html body:not(.external-page):not(.tw-dashboard):not(.subscription-cancel-page) :is(
    p, li, dd, dt, .helper-text, .description
  ) {
    color: var(--public-page-text-soft) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* Shared footer and notifications. */
  html body.external-page .footer {
    color: var(--public-page-text) !important;
    background: #070d19 !important;
    border-color: var(--public-page-border) !important;
  }

  html body.external-page .footer :is(.footer-p, .footer-links a, .legal-links a, .copyright) {
    color: var(--public-page-text-soft) !important;
  }

  html body.external-page .footer :is(.footer-links a, .legal-links a):is(:hover, :focus-visible) {
    color: var(--public-page-blue-hover) !important;
    background: transparent !important;
  }

  html body.external-page :is(.notification, .alert, .form-error, .error-message) {
    color: #fecdd3 !important;
    background: rgba(244, 63, 94, .13) !important;
    border-color: rgba(251, 113, 133, .34) !important;
  }

  html body.external-page :is(.notification.success, .success-message, .alert-success) {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, .13) !important;
    border-color: rgba(74, 222, 128, .34) !important;
  }

  /* Auth Google CTAs share the login's resting, hover and pressed treatment.
     The shared light contract otherwise leaves a bright inset highlight over
     an almost-black bottom border, which reads as a clipped button in dark. */
  html:root body.external-page.tw-login .btn-google-login.btn-google-login,
  html:root body.external-page.tw-register .form-card .social-google-btn.social-google-btn {
    --public-button-neutral-depth: #536783;
    --public-button-local-depth: #536783;
    background: #17243a !important;
    background-image: none !important;
    color: #f4f7fc !important;
    border-top: 0 solid transparent !important;
    border-right: 1px solid #60728e !important;
    border-bottom: 4px solid #536783 !important;
    border-left: 1px solid #60728e !important;
    box-shadow: inset 0 1px 0 rgba(244, 247, 252, .075) !important;
    filter: none !important;
  }

  html:root body.external-page.tw-login .btn-google-login.btn-google-login:is(:hover, :focus-visible),
  html:root body.external-page.tw-register .form-card .social-google-btn.social-google-btn:is(:hover, :focus-visible) {
    --public-button-local-depth: #667d9f;
    background: #1b2b43 !important;
    color: #fff !important;
    border-right-color: #7890b3 !important;
    border-bottom-color: #667d9f !important;
    border-left-color: #7890b3 !important;
    box-shadow: inset 0 1px 0 rgba(244, 247, 252, .1) !important;
  }

  html:root body.external-page.tw-login .btn-google-login.btn-google-login:is(:active, .is-site-tactile-pressed, .is-site-action-pending),
  html:root body.external-page.tw-register .form-card .social-google-btn.social-google-btn:is(:active, .is-site-tactile-pressed, .is-site-action-pending) {
    background: #17243a !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
    border-top: 3px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-left: 1px solid transparent !important;
    box-shadow: inset 0 2px 4px rgba(2, 8, 20, .28) !important;
  }

  @media (max-width: 767px) {
    html body.external-page .mobile-menu {
      box-shadow: 0 22px 44px rgba(0, 0, 0, .45) !important;
    }

    html body.tw-homepage .hero,
    html body.tw-homepage .hero::before {
      background: var(--public-page-canvas-soft) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html body.external-page *,
    html body.tw-login *,
    html body.tw-register * {
      scroll-behavior: auto !important;
    }

    html body.external-page :is(.btn, button, a, .card, .faq-item),
    html body.tw-login :is(button, a, input),
    html body.tw-register :is(button, a, input, select) {
      transition-duration: .01ms !important;
    }
  }
}

/* Public pages share the same seamless pressed face as the authenticated app.
   The page stylesheet loads last, so this guard also covers page-specific CTA
   variants without changing their resting elevation or branding. */
html:root body:is(.external-page, .tw-login, .tw-register)
  :is(
    button,
    input[type="button"], input[type="submit"], input[type="reset"],
    [role="button"],
    a.btn, a[class*="-btn"], a[class*="btn-"],
    a[class*="-button"], a[class$="button"]
  ):not(#dark-public-pressed-face-lock-1):not(#dark-public-pressed-face-lock-2):not(#dark-public-pressed-face-lock-3):not(#dark-public-pressed-face-lock-4):not(#dark-public-pressed-face-lock-5):not(#dark-public-pressed-face-lock-6):not(#dark-public-pressed-face-lock-7):not(#dark-public-pressed-face-lock-8):not(:disabled):not(.disabled):not(.is-disabled):active {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  translate: none !important;
  transition: background-color 80ms ease, color 80ms ease !important;
}
}