/* ==========================================================================
   SIHI GOLDEN HUE — canonical theme for every screen in the estate
   --------------------------------------------------------------------------
   One hue make-up everywhere:

       page    golden cream wash   #FBF2DC
       cards   ice blue            #EAF4FF -> #DBEAFE
       banners ice blue glass
       ink     deep navy           #0B2545
       accent  Sihi violet         #7C3AED

   This file is the last stylesheet on the page, so at equal specificity it
   wins over each site's own rules. Every token family used across the estate
   (landing/spa, legacy spa, aww/nav, MusicVoice landing) is remapped here,
   which is what lets one file paint a Flutter app harness and a marketing
   landing with the same hues.
   ========================================================================== */

:root {
  /* ---- landing / spa family ---------------------------------------- */
  --ink: #0B2545;
  --ink2: #F7E9C6;
  --surface: #EAF4FF;
  --surface2: #DBEAFE;
  --surface3: #C7DEFB;
  --surface4: #BFDBFE;
  --bg: #FBF2DC;
  --bg2: #F7E9C6;
  --bg3: #EAF4FF;
  --bg4: #DBEAFE;

  --border: rgba(37, 99, 235, .20);
  --border2: rgba(37, 99, 235, .34);
  --line: rgba(37, 99, 235, .18);

  --text: #0B2545;
  --text2: #2C4A72;
  --text3: #4A678C;
  --text4: #4A678C;
  /* Muted copy sits on the ice-blue cards, where #4A678C fell to 3.9:1. The
     deeper editorial ink clears AA on the tints without reading as body text. */
  --muted: #2C4A72;

  --teal: #7C3AED;
  --teal2: #6D28D9;
  --green: #1D4ED8;
  --green-d: #1E40AF;
  --green-glow: rgba(29, 78, 216, .18);
  --indigo: #4F46E5;
  --orchid: #A21CAF;
  --purple: #7C3AED;
  --amber: #9A3412;
  --gold: #6E4A08;
  --lime: #3F6810;
  --red: #B91C1C;
  --sky: #0E7490;
  --orange: #9A3412;
  --blue: #1D4ED8;
  --live: #B91C1C;
  --cyan: #0E7490;
  --pink: #A21CAF;
  --yellow: #8A5A06;

  /* the dark gradient is for gradient text on the cream page; the fill
     gradient is for button surfaces, where the ink on top stays dark */
  --grad: linear-gradient(135deg, #B45309 0%, #C2410C 50%, #92400E 100%);
  --grad-warm: linear-gradient(135deg, #B45309 0%, #C2410C 50%, #7C3AED 100%);
  --grad-fill: linear-gradient(135deg, #F7C948 0%, #E8A317 55%, #D08F14 100%);

  /* ---- legacy spa family ------------------------------------------ */
  --card: rgba(234, 244, 255, .78);
  --card-border: rgba(37, 99, 235, .22);
  --accent: #7C3AED;
  --accent-light: #7C3AED;
  --accent-deep: #6D28D9;
  --accent-dim: rgba(124, 58, 237, .12);
  --accent2: #6D28D9;
  --surface-hover: #DBEAFE;
  --surface-2: #DBEAFE;
  --surface-3: #C7DEFB;
  --surface-4: #BFDBFE;
  --bg-soft: #F7E9C6;

  /* ---- dark-surface family (saas-sports harness) -------------------- */
  --near-black: #0B2545;
  --dark-card: #EAF4FF;
  --dark-alt: #DBEAFE;
  --dark-surface: #F7E9C6;
  --white: #0B2545;
  --w70: rgba(11, 37, 69, .78);
  --w54: rgba(11, 37, 69, .62);
  --w38: rgba(11, 37, 69, .46);
  --w20: rgba(11, 37, 69, .28);
  --border-light: rgba(37, 99, 235, .34);
  --emerald: #1D4ED8;
  --coral: #B91C1C;

  /* ---- MusicVoice landing family ----------------------------------- */
  --primary: #7C3AED;
  --primary-dark: #5B21B6;
  --secondary: #0E7490;
  --background: #FBF2DC;
  --text-primary: #0B2545;
  --text-secondary: #2C4A72;
  --text-color: #0B2545;
  --text-muted: #4A678C;
  --body-bg: #FBF2DC;
  --card-bg: #EAF4FF;

  /* ---- ice blue card + banner palette ------------------------------ */
  --ice: #EAF4FF;
  --ice2: #DBEAFE;
  --ice3: #BFDBFE;
  --ice-line: rgba(37, 99, 235, .24);
  --ice-ink: #0B2545;
  --ice-ink2: #2C4A72;
  --ice-glass: rgba(234, 244, 255, .93);
  --ice-glass-2: rgba(234, 244, 255, .98);
  --ice-shadow: 0 18px 44px -30px rgba(12, 45, 90, .45);
}

/* ==========================================================================
   PAGE
   ========================================================================== */

html {
  background: #FBF2DC !important;
}

body {
  background:
    radial-gradient(1200px 640px at 12% -8%, rgba(247, 201, 72, .38), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(233, 169, 58, .20), transparent 60%),
    #FBF2DC !important;
  color: var(--ice-ink);
}

body::after {
  opacity: .16;
  mix-blend-mode: multiply;
}

::selection {
  background: rgba(217, 165, 33, .35);
  color: #231A09;
}

sub {
  color: var(--text3);
}

/* ==========================================================================
   CARDS — every card-like surface becomes ice blue with navy writing
   ========================================================================== */

:is(
  .bento-card, .featured-card, .price-card, .blog-card, .card, .card-body,
  .app-card, .product-card, .post-card, .feature-card, .stat-card, .panel,
  .tile, .item-card, .service-card, .course-card, .module-card, .exercise-card,
  .lesson-card, .game-card, .player-card, .match-card, .team-card, .fixture-card,
  .result-card, .plan-card, .pricing-card, .contact-card, .form-card,
  .info-card, .notice-card, .alert-card, .tool-card, .hub-card, .surface-card,
  .glass-card, .metric-card, .kpi-card, .summary-card, .detail-card,
  .value-card, .benefit-card, .step-card, .testimonial-card, .faq-item,
  .accordion-item, .social-card, .quick-link-card, .newsletter, .stat,
  .stat-item, .feature-box, .glass, .menu-card, .report-card, .table-card
) {
  background: linear-gradient(158deg, var(--ice) 0%, var(--ice2) 100%) !important;
  border: 1px solid var(--ice-line);
  box-shadow: var(--ice-shadow);
  color: var(--ice-ink);
}

:is(
  .bento-card, .featured-card, .price-card, .blog-card, .card, .card-body,
  .app-card, .product-card, .post-card, .feature-card, .stat-card, .panel,
  .tile, .item-card, .service-card, .course-card, .module-card, .exercise-card,
  .lesson-card, .game-card, .player-card, .match-card, .team-card, .fixture-card,
  .result-card, .plan-card, .pricing-card, .contact-card, .form-card,
  .info-card, .notice-card, .alert-card, .tool-card, .hub-card, .surface-card,
  .glass-card, .metric-card, .kpi-card, .summary-card, .detail-card,
  .value-card, .benefit-card, .step-card, .testimonial-card, .faq-item,
  .accordion-item, .social-card, .quick-link-card, .newsletter, .stat,
  .stat-item, .feature-box, .glass, .menu-card, .report-card, .table-card
) :is(h1, h2, h3, h4, h5, h6, b, strong) {
  color: var(--ice-ink);
}

:is(
  .bento-card, .featured-card, .price-card, .blog-card, .card, .card-body,
  .app-card, .product-card, .post-card, .feature-card, .stat-card, .panel,
  .tile, .item-card, .service-card, .course-card, .module-card, .exercise-card,
  .lesson-card, .game-card, .player-card, .match-card, .team-card, .fixture-card,
  .result-card, .plan-card, .pricing-card, .contact-card, .form-card,
  .info-card, .notice-card, .alert-card, .tool-card, .hub-card, .surface-card,
  .glass-card, .metric-card, .kpi-card, .summary-card, .detail-card,
  .value-card, .benefit-card, .step-card, .testimonial-card, .faq-item,
  .accordion-item, .social-card, .quick-link-card, .newsletter, .stat,
  .stat-item, .feature-box, .glass, .menu-card, .report-card, .table-card
) p {
  color: var(--ice-ink2);
}

.bento-card:hover,
.featured-card:hover,
.blog-card:hover,
.card:hover {
  border-color: var(--ice3);
  box-shadow: 0 26px 60px -34px rgba(12, 45, 90, .55);
}

.bento-card .card-num {
  color: rgba(11, 37, 69, .12);
}

.bento-card:hover .card-num {
  color: rgba(11, 37, 69, .22);
}

.featured-card .platforms span {
  background: rgba(37, 99, 235, .12);
  color: var(--ice-ink2);
}

/* ==========================================================================
   BANNERS — nav, drawers, menus, the switcher rail
   ========================================================================== */

nav.scrolled,
nav:not(#nav),
.navbar,
.site-header,
.topbar {
  background: var(--ice-glass) !important;
  backdrop-filter: blur(20px) saturate(1.1);
  border-bottom: 1px solid var(--ice-line) !important;
}

.nav-links li a {
  color: var(--ice-ink2);
}

.nav-links li a:hover {
  color: var(--ice-ink);
}

.nav-links[style] {
  background-color: var(--ice-glass-2) !important;
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--ice-line);
}

.nav-cta {
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE) !important;
  color: var(--ice-ink) !important;
  border: 1px solid var(--ice-line);
}

.nav-cta::before {
  background: linear-gradient(135deg, #C7DEFB, #93C5FD) !important;
}

.mobile-menu {
  background: var(--ice-glass-2) !important;
  border-bottom-color: var(--ice-line) !important;
}

.mobile-menu a {
  color: var(--ice-ink) !important;
}

/* app chrome bars */
.topbar,
.bottom-nav,
.tabbar,
.app-bar,
.status-bar,
.action-bar {
  background: var(--ice-glass) !important;
  border-color: var(--ice-line) !important;
}

.bottom-nav a,
.tabbar a,
.topbar a {
  color: var(--ice-ink2) !important;
}

.bottom-nav a.active,
.tabbar a.active,
.bottom-nav .active,
.tabbar .active {
  color: var(--ice-ink) !important;
}

.subnav {
  background: var(--ice-glass) !important;
  backdrop-filter: blur(20px) saturate(1.1);
  border-bottom: 1px solid var(--ice-line);
}

.chip.on {
  background: var(--ice3) !important;
  color: var(--ice-ink) !important;
  border-color: var(--ice-line) !important;
}

/* active tabs keep the ice language instead of a violet slab with black text */
.tab.active,
.tabs .active,
.pill.active,
.chip.active,
.chip.green,
.cat-btn.active,
.seg .active {
  background: var(--ice3) !important;
  color: var(--ice-ink) !important;
}

/* media controls: a saturated accent disc with white glyph reads as blank */
.play-btn,
.video-placeholder .play-btn,
.circle-play,
.fab {
  background: var(--grad-fill) !important;
  color: #2A1D05 !important;
}

/* the bottom switcher rail is injected at runtime, after this file */
#sihiNavCtl {
  background: var(--ice-glass) !important;
  border: 1px solid var(--ice-line) !important;
  box-shadow: 0 12px 30px -18px rgba(12, 45, 90, .55);
}

#sihiNavCtl button,
#sihiNavCtl button span {
  color: var(--ice-ink2) !important;
}

#sihiNavCtl button[data-nav="home"],
#sihiNavCtl button[data-nav="home"] span {
  color: var(--ice-ink) !important;
}

#sihiNavCtl button:hover {
  background: rgba(37, 99, 235, .10) !important;
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

#sihiNavCtl button:focus-visible {
  outline: 2px solid var(--ice3);
  outline-offset: 1px;
}

/* ==========================================================================
   AWW SCREEN LAYER — menu, intro, stat band
   ========================================================================== */

.aww-menu {
  background: var(--ice-glass-2) !important;
}

.aww-menu .hd b {
  color: var(--ice-ink) !important;
}

.aww-menu .hd b em {
  color: var(--ice-ink2) !important;
}

.aww-menu .hd button {
  color: var(--ice-ink2) !important;
  border-color: var(--ice-line) !important;
}

.aww-menu .hd button:hover {
  color: var(--ice-ink) !important;
}

.aww-menu .grp>span {
  color: var(--ice-ink2) !important;
}

.aww-menu a {
  color: var(--ice-ink) !important;
}

.aww-menu a i {
  color: var(--ice-ink2) !important;
}

.aww-menu a:hover {
  background: rgba(37, 99, 235, .10) !important;
  border-color: var(--ice-line) !important;
}

.aww-menu-btn {
  color: var(--ice-ink2) !important;
  border-color: var(--ice-line) !important;
}

.aww-menu-btn:hover {
  color: var(--ice-ink) !important;
  border-color: var(--ice-ink2) !important;
}

.aww-menu-btn.aww-float {
  background: var(--ice-glass) !important;
}

.aww-intro {
  background: var(--ice) !important;
}

.aww-intro .mark {
  color: var(--ice-ink) !important;
}

.aww-intro .pct {
  color: var(--ice-ink2) !important;
}

.aww-intro .rule {
  background: rgba(37, 99, 235, .16) !important;
}

.aww-stats {
  background: var(--ice-line) !important;
}

.aww-stats div {
  background: var(--ice) !important;
}

.aww-stats b {
  color: var(--ice-ink) !important;
}

.aww-stats span {
  color: var(--ice-ink2) !important;
}

/* ==========================================================================
   FOOTERS, BUTTONS, ORNAMENTS
   ========================================================================== */

footer {
  background: linear-gradient(180deg, transparent, rgba(217, 165, 33, .12)) !important;
  border-top-color: var(--border) !important;
  color: var(--text2) !important;
}

footer a {
  color: var(--text2) !important;
}

footer::before {
  -webkit-text-stroke: 1px rgba(11, 37, 69, .18) !important;
}

.btn-fill,
.price-btn-fill,
.cta,
.cta-btn,
.cta-button,
.btn-cta,
.primary-btn,
.primary-cta,
.signup button,
.nav-btn-primary,
.btn-gold,
.howto-step .num {
  background: var(--grad-fill) !important;
  color: #2A1D05 !important;
  box-shadow: 0 6px 22px rgba(180, 131, 12, .28);
}

.avatar-img {
  color: #fff;
}

/* accent discs and round avatars carry a glyph, so the glyph must be light */
.audio-play,
.AI,
.avatar-circle,
.initials,
.avatar {
  color: #fff !important;
}

/* --- fixed broadcast bars that were saturated green ---------------------- */
#globalAudioBar,
.aBar {
  background: var(--ice-glass) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

#globalAudioBar button,
.aBar button {
  background: var(--grad-fill) !important;
  color: #2A1D05 !important;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-secondary {
  color: var(--primary);
  border-color: var(--primary);
}

.marquee-item {
  color: var(--text3);
}

.featured-placeholder,
.card-placeholder {
  background: var(--ice2) !important;
}

.post-category,
.featured-label {
  background: var(--ice3) !important;
  color: var(--ice-ink) !important;
}

.hero-grid-overlay {
  background-image:
    linear-gradient(rgba(122, 87, 17, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 87, 17, .06) 1px, transparent 1px);
}

.hero-bg .orb,
.orb {
  opacity: .30;
  filter: blur(120px);
}

.hero-bg .orb-1 { background: #F5C542; }
.hero-bg .orb-2 { background: #E9A93A; }
.hero-bg .orb-3 { background: #F7D98A; }

/* ==========================================================================
   RESIDUAL LAYER — the long tail of site-specific class names and tokens
   ========================================================================== */

/* --- brand tokens the sites define for themselves ------------------------ */
:root {
  --sz-green: #1D4ED8;
  --sz-green-d: #1E40AF;
  --sz-green-glow: rgba(29, 78, 216, .26);
  --sz-gold: #8A5A06;
  --sz-live: #B91C1C;
  --sz-blue: #1D4ED8;
  --sz-purple: #7C3AED;
  --sz-grad: linear-gradient(135deg, #B45309 0%, #C2410C 50%, #92400E 100%);
  --sz-glow: rgba(29, 78, 216, .26);

  --panel: #EAF4FF;
  --panel2: #DBEAFE;
  --line2: rgba(37, 99, 235, .24);
  --line-soft: rgba(37, 99, 235, .10);
  --warn: #9A3412;
  --danger: #B91C1C;
  --good: #1D4ED8;
  --accent-ink: #2C4A72;
  --accent-glow: rgba(124, 58, 237, .22);
  --accent-soft: rgba(124, 58, 237, .14);
  --accent-light: #7C3AED;
  --accent2: #7C3AED;
  --accent3: #A21CAF;
  --accent-rgb: 124, 58, 237;
  --teal-rgb: 124, 58, 237;

  --bone: #FBF2DC;
  --bone-2: #F7E9C6;
  --bone-3: #FBEFD2;
  --paper: #FFFDF7;
  --ink-2: #2C4A72;
  --ink-dark: #0B2545;
  --fg: #0B2545;
  --blush: #DBEAFE;
  --cream: #FBF2DC;
  --cream-orange: #9A3412;
  --light-gold: #8A5A06;
  --silver: #4A678C;
  --navy: #0B2545;
  --sage: #3F6810;
  --sage-deep: #2F4A2B;
  --clay: #9A3412;
  --violet: #7C3AED;
  --violet-ink: #4A2F96;
  --violet-light: #CDBCF4;
  --violet-soft: rgba(124, 58, 237, .14);
  --violet-glow: rgba(124, 58, 237, .26);
  --faint: #4A678C;
  --muted2: #4A678C;
  --text-muted: #4A678C;
  --text4: #4A678C;
  --bg3: #EAF4FF;
  --bg4: #DBEAFE;
  --surface-hover: #DBEAFE;
  --grad-cta: var(--grad-fill);
}

/* --- the last dark content surfaces become ice --------------------------- */
.note,
.pf-code,
.pf-log,
.path,
.toast,
.reel .meta,
.audio-item,
pre {
  background: linear-gradient(158deg, var(--ice) 0%, var(--ice2) 100%) !important;
  border: 1px solid var(--ice-line);
  color: var(--ice-ink) !important;
}

.pf-code,
.pf-log,
pre,
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.note b,
.note strong {
  color: var(--ice-ink) !important;
}

/* --- bars that use short class names ------------------------------------- */
.TB,
.BN,
header,
header.hdr {
  background: var(--ice-glass) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  border-color: var(--ice-line) !important;
  color: var(--ice-ink);
}

.TT {
  color: var(--ice-ink) !important;
}

.deck {
  background: var(--ice-glass) !important;
  border-left-color: var(--ice-line) !important;
  color: var(--ice-ink);
}

/* --- media discs and badges ---------------------------------------------- */
.reel-play {
  background: var(--grad-fill) !important;
  color: #2A1D05 !important;
}

.tier .ribbon {
  background: var(--grad-fill) !important;
  color: #2A1D05 !important;
}

.trail a.cur {
  background: var(--ice3) !important;
  color: var(--ice-ink) !important;
}

.atl-ladder span.on {
  background: rgba(37, 99, 235, .12) !important;
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

.pill {
  background: rgba(37, 99, 235, .12) !important;
  color: var(--green) !important;
}

.badge.built,
.pill-amber {
  background: rgba(180, 131, 12, .14) !important;
  border-color: rgba(180, 131, 12, .38) !important;
  color: var(--gold) !important;
}

.depthmeter .dm i {
  background: rgba(37, 99, 235, .18) !important;
}

.sw-toggle {
  background: var(--ice3) !important;
  border-color: var(--ice-line) !important;
}

.sw-toggle::after {
  background: var(--ice-ink) !important;
}

.sw-toggle.on {
  background: rgba(37, 99, 235, .35) !important;
  border-color: var(--ice-line) !important;
}

.sw-toggle.on::after {
  background: var(--ice-ink) !important;
}

.sihi-avatar-strip {
  border-color: var(--ice-line) !important;
}

/* --- ink that was hard-coded light for a dark ground --------------------- */
nav .brand,
.hero .tag,
.hero .eyebrow,
.stat b,
.metric-value,
.card-title,
.topbar .brand,
.mod-card .v .vv,
.pv-card .num,
.batch-card .meta .v,
.sp .hd,
.sihi-avatar-cap b,
td b,
ul.spec li b,
.mvtp-breadcrumb .current {
  color: var(--green) !important;
}

ul.list li,
.stages li,
.sihi-avatar-strip-copy p,
.note,
.toast,
.howto-step .body p {
  color: var(--ice-ink2) !important;
}

.sihi-avatar-strip-copy h4,
.sihi-avatar-pill {
  color: var(--ice-ink) !important;
}

.back:hover,
footer a:hover {
  color: var(--green) !important;
}

.err {
  color: var(--red) !important;
}

td {
  color: var(--ice-ink) !important;
}

td.port {
  color: var(--gold) !important;
}

.sp input {
  background: var(--paper) !important;
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

.code,
code {
  background: var(--surface3) !important;
  color: var(--lime) !important;
}

.btn-outline,
.btn-ghost,
button[class*="outline"] {
  background: none !important;
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

.btn-outline:hover,
.btn-ghost:hover,
button[class*="outline"]:hover {
  background: rgba(37, 99, 235, .10) !important;
  color: var(--ice-ink) !important;
}

/* ==========================================================================
   HUE REMAP — hard-coded colours are pulled into the Sihi palette so that a
   screen built from an older theme still lands on cream, ice and navy
   ========================================================================== */

/* --- AWW harness: buttons, subtitles, avatar discs ---------------------- */
.pf-btn {
  color: #fff !important;
}

.pf-btn.gold {
  background: var(--grad-fill) !important;
  color: #2A1D05 !important;
}

.pf-btn.ghost {
  background: transparent !important;
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

.sub {
  color: var(--ice-ink2) !important;
}

.avatar .circ {
  color: var(--ice-ink) !important;
}

.avatar .nm {
  color: var(--ice-ink2) !important;
}

.tb,
.bn {
  background: var(--ice-glass) !important;
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

/* the monogram mark sits on its own dark gold gradient, so it reads cream */
.ed-hero .ed-monogram em {
  color: #FBF2DC !important;
}

/* --- the sign-in gate keeps a dark scrim, its box is already ice --------- */
.pf-gate-box input,
.pf-gate-box select,
.pf-gate-box textarea {
  background: var(--paper) !important;
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

/* --- the guide modal turns its box to ice ------------------------------- */
.guide-modal .box {
  background: linear-gradient(158deg, var(--ice) 0%, var(--ice2) 100%) !important;
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

.guide-modal h3 {
  color: var(--ice-ink) !important;
}

.guide-modal p {
  color: var(--ice-ink2) !important;
}

.guide-modal .wave i {
  background: var(--green) !important;
}

/* --- the splash loader keeps a light ground for its gradient wordmark --- */
.loader {
  background: var(--ice-glass-2) !important;
}

/* --- the spa family header band ----------------------------------------- */
.hdr {
  background: var(--ice-glass) !important;
  backdrop-filter: blur(20px) saturate(1.1);
  border-bottom-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

.skip {
  background: var(--ice) !important;
  color: var(--ice-ink) !important;
  border: 1px solid var(--ice-line);
}

/* --- the featured tier becomes ice with navy writing --------------------- */
.tier.hi {
  background: linear-gradient(158deg, var(--ice2) 0%, var(--ice3) 100%) !important;
  border-color: var(--ice-line) !important;
  color: var(--ice-ink) !important;
}

.tier.hi .t-name,
.tier.hi .t-price {
  color: var(--ice-ink) !important;
}

.tier.hi .t-desc,
.tier.hi li {
  color: var(--ice-ink2) !important;
}

.tier.hi .t-flag {
  background: rgba(37, 99, 235, .14) !important;
  color: var(--ice-ink) !important;
}

.tier.hi .btn {
  background: var(--ice) !important;
  color: var(--ice-ink) !important;
  border-color: var(--ice-line) !important;
}

.tier.hi .btn:hover {
  background: var(--ice3) !important;
  border-color: var(--ice-line) !important;
}

/* --- the newsletter block becomes ice ------------------------------------ */
.news {
  background: linear-gradient(158deg, var(--ice) 0%, var(--ice2) 100%) !important;
  color: var(--ice-ink) !important;
}

.news h2 {
  color: var(--ice-ink) !important;
}

.news h2 em {
  color: var(--violet) !important;
}

.news .eyebrow {
  color: var(--violet) !important;
}

.news .eyebrow::before {
  background: var(--violet) !important;
}

.news p {
  color: var(--ice-ink2) !important;
}

.news .fine {
  color: var(--ice-ink2) !important;
}

/* --- scrollbars and sliders follow the cream page ------------------------ */
::-webkit-scrollbar-track {
  background: rgba(37, 99, 235, .10) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, .38) !important;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, .58) !important;
}

input[type=range]::-webkit-slider-runnable-track {
  background: rgba(37, 99, 235, .14) !important;
}

input[type=range]::-moz-range-track {
  background: rgba(37, 99, 235, .14) !important;
}

input[type=range]::-webkit-slider-thumb {
  background: var(--green) !important;
}

input[type=range]::-moz-range-thumb {
  background: var(--green) !important;
}

/* --- inline colours, written straight into the style attribute ----------- */
[style*="color:#A855F7" i] { color: #7C3AED !important; }
[style*="color:#A66BFF" i] { color: #7C3AED !important; }
[style*="color:#22E07A" i] { color: #1D4ED8 !important; }
[style*="color:#8C99AB" i] { color: #4A678C !important; }
[style*="color:#9A96A0" i] { color: #4A678C !important; }
[style*="color:#C7C3CC" i] { color: #4A678C !important; }
[style*="color:#6B7B8F" i] { color: #4A678C !important; }
[style*="color:#9FB0C3" i] { color: #4A678C !important; }
[style*="color:#D4AF37" i] { color: #8A5A06 !important; }
[style*="color:#FFC23D" i] { color: #8A5A06 !important; }
[style*="color:#CD7F32" i] { color: #7C2D12 !important; }
[style*="color:#C0C7D0" i] { color: #2C4A72 !important; }
[style*="color:#E63946" i] { color: #B91C1C !important; }
[style*="color:#FF6B6B" i] { color: #B91C1C !important; }
[style*="color:#FF4D5E" i] { color: #B91C1C !important; }
[style*="color:#FF3B30" i] { color: #B91C1C !important; }
[style*="color:#FF7D9C" i] { color: #9D174D !important; }
[style*="color:#F4A261" i] { color: #9A3412 !important; }
[style*="color:#FF9800" i] { color: #9A3412 !important; }
[style*="color:#FF9F43" i] { color: #9A3412 !important; }
[style*="color:#00B4D8" i] { color: #0E7490 !important; }
[style*="color:#48CAE4" i] { color: #0E7490 !important; }
[style*="color:#90E0EF" i] { color: #0E7490 !important; }
[style*="color:#457B9D" i] { color: #2C4A72 !important; }

/* ==========================================================================
   DEVICE MOCKUPS — keep their own dark island so the UI inside stays legible
   ========================================================================== */

.phone {
  --bg: #080B10;
  --surface: #121822;
  --surface2: #1A2230;
  --surface3: #22303F;
  --line: #2C3A4C;
  --text: #E9EFF8;
  --text2: #C6D3E3;
  --text3: #A9B7C9;
  --muted: #A9B7C9;
  --accent: #4F9DFF;
  background: #080B10;
  color: #E9EFF8;
}

/* the in-phone marks stay light, they live on that dark island */
.phone [style*="color:#FF4D5E" i] { color: #FF4D5E !important; }
.phone [style*="color:#FF3B30" i] { color: #FF3B30 !important; }
.phone [style*="color:#FF7D9C" i] { color: #FF7D9C !important; }