/* ═══════════════════════════════════════════════════════════════════════
   TotumTeams — public site, dark redesign
   Source of truth for the look: scratch/redesign/css/{app,home}.css

   Every rule is scoped under `.public-page.tt-dark`, which PublicLayout
   adds only for routes listed in its RedesignedRoutes set. Pages not on
   that list keep the light stylesheet untouched, so the site can convert
   one page at a time instead of in a single change.

   Loaded after public.css and public-pages.css, so equal-specificity
   rules here win.
═══════════════════════════════════════════════════════════════════════ */

.public-page.tt-dark {
    /* Aliases kept so the older rules in this file keep reading. */
    --tt-glass: var(--tt-panel);
    --tt-glass-border: var(--tt-border);
    --tt-orange-soft: var(--tt-orange-wash);

    /* The light stylesheets are token-driven — .value-card uses var(--white),
       borders use var(--grey), and so on. Mapping those onto the palette tokens
       flips the bulk of public.css and public-pages.css in one place. */
    --white: var(--tt-panel);
    --bg: var(--tt-band);
    --grey: var(--tt-border);
    --text: var(--tt-text);
    --muted: var(--tt-muted);
    --blue: var(--tt-orange);

    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    /* Plus Jakarta Sans sets narrow default word spaces, and the headline
       letter-spacing pulls glyphs closer still, so words ran together. Open the
       word gap and let body copy sit at normal tracking. */
    word-spacing: .06em;
    letter-spacing: .005em;
    color: var(--tt-text);
    background-color: var(--tt-band);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, var(--tt-glow), transparent 55%),
        linear-gradient(180deg, var(--tt-grad-top) 0%, var(--tt-band) 100%);
    background-attachment: fixed;
}

.public-page.tt-dark h1,
.public-page.tt-dark h2,
.public-page.tt-dark h3,
.public-page.tt-dark h4,
.public-page.tt-dark strong { color: var(--tt-text); }

.public-page.tt-dark p,
.public-page.tt-dark li { color: var(--tt-lede); }

.public-page.tt-dark h1 { letter-spacing: -.04em; }
.public-page.tt-dark h2 { letter-spacing: -.03em; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.public-page.tt-dark .pub-nav {
    background: var(--tt-topbar);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--tt-glass-border);
    box-shadow: none;
}

.public-page.tt-dark .pub-nav-logo .logo-totum { color: var(--tt-text); }
.public-page.tt-dark .pub-nav-logo .logo-teams { color: var(--tt-orange); }

.public-page.tt-dark .pub-nav-links a,
.public-page.tt-dark .pub-lang-btn { color: var(--tt-muted); font-weight: 600; }

.public-page.tt-dark .pub-nav-links a:hover,
.public-page.tt-dark .pub-lang-btn:hover { color: var(--tt-text); }

.public-page.tt-dark .pub-lang-dropdown {
    background: var(--tt-menu);
    border: 1px solid var(--tt-glass-border);
}
.public-page.tt-dark .pub-lang-dropdown a { color: var(--tt-text); }
.public-page.tt-dark .pub-lang-dropdown a:hover { background: var(--tt-fill-2); }

/* Drawer panel on narrow screens shares the topbar's glass. */
.public-page.tt-dark .pub-nav-drawer,
.public-page.tt-dark .pub-nav-shell .pub-nav-links {
    background-color: transparent;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.public-page.tt-dark .pub-btn-primary {
    background: var(--tt-orange);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
}
.public-page.tt-dark .pub-btn-primary:hover { background: var(--tt-orange-hover); }

.public-page.tt-dark .pub-btn-ghost,
.public-page.tt-dark .pub-btn-outline {
    background: transparent;
    border: 1px solid var(--tt-border-input);
    color: var(--tt-text);
    border-radius: 999px;
    font-weight: 600;
}
.public-page.tt-dark .pub-btn-ghost:hover,
.public-page.tt-dark .pub-btn-outline:hover { background: var(--tt-fill-3); }

/* The light theme used a white button on its orange CTA band; on dark that
   inverts to the orange fill so the CTA still reads as the primary action. */
.public-page.tt-dark .pub-btn-white {
    background: var(--tt-orange);
    color: #fff;
    border: none;
}
.public-page.tt-dark .pub-btn-white:hover { background: var(--tt-orange-hover); }

/* ── Founding banner → hero ──────────────────────────────────────────── */
/* The artwork is a photograph on a flat ground, so its edges would otherwise
   land as a visible rectangle. The band is painted in the same near-black to
   navy the photograph was shot on, and the edges disappear into it. Sampled
   from the corners of hero2.jpg: #000610 at the top, #06152c at the bottom. */
.public-page.tt-dark .pub-founding-banner {
    background: linear-gradient(180deg, #000610 0%, #06152c 100%);
    padding: 56px 0 72px;
    border: none;
}

/* The copy sits on a glass panel so it holds together against the page ground
   and balances the weight of the artwork opposite it. */
.public-page.tt-dark .pub-founding-text {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    border-radius: 28px;
    backdrop-filter: blur(16px);
    padding: 3rem;
}

.public-page.tt-dark .pub-founding-headline {
    line-height: 1.02;
    letter-spacing: -.04em;
}
.public-page.tt-dark .pub-founding-free { color: var(--tt-text); font-weight: 800; }
.public-page.tt-dark .pub-founding-until { color: var(--tt-orange); }
.public-page.tt-dark .pub-founding-until-lg { text-shadow: 0 0 34px var(--tt-orange-ring); }
.public-page.tt-dark .pub-founding-deadline { color: var(--tt-lede); }

.public-page.tt-dark .pub-founding-text > p { color: var(--tt-lede); max-width: 38rem; font-size: 1.05rem; }

/* The "founding discounts" block and the FREE orb become the two glass cards. */

/* The FREE orb is an inline SVG drawn in near-transparent white, which disappears
   against the photograph. Give it the same glass disc the redesign uses. */

.public-page.tt-dark .pub-founding-more { color: var(--tt-muted); font-weight: 600; }
.public-page.tt-dark .pub-founding-more:hover { color: var(--tt-text); }

/* ── Generic section bands ───────────────────────────────────────────── */
.public-page.tt-dark .pub-hero,
.public-page.tt-dark .pub-pain-strip,
.public-page.tt-dark .pub-audience-split,
.public-page.tt-dark .pub-secondary-features,
.public-page.tt-dark .pub-cta-section {
    background: transparent;
    border: none;
}

/* Alternating bands give the long page some rhythm against the fixed
   gradient, matching the redesign's .home-band. */
.public-page.tt-dark .pub-pain-strip,
.public-page.tt-dark .pub-secondary-features {
    background: var(--tt-band);
}

.public-page.tt-dark .pub-hero-tagline,
.public-page.tt-dark .pub-section-eyebrow { color: var(--tt-muted); font-weight: 700; }

.public-page.tt-dark .pub-hero-headline,
.public-page.tt-dark .pub-section-title,
.public-page.tt-dark .pub-section-title-large,
.public-page.tt-dark .pub-pain-heading { color: var(--tt-orange); }

.public-page.tt-dark .pub-hero-sub,
.public-page.tt-dark .pub-section-title-sub { color: var(--tt-lede); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.public-page.tt-dark .pub-pain-card,
.public-page.tt-dark .pub-fg-item,
.public-page.tt-dark .pub-trust-pill {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    border-radius: 18px;
    backdrop-filter: blur(16px);
    color: var(--tt-text);
    box-shadow: none;
}

.public-page.tt-dark .pub-trust-pill { border-radius: 999px; }

.public-page.tt-dark .pub-pain-card p,
.public-page.tt-dark .pub-fg-item p { color: var(--tt-lede); }

.public-page.tt-dark .pub-feature-link { color: var(--tt-orange); font-weight: 700; }

/* ── Pricing strip + CTA ─────────────────────────────────────────────── */
.public-page.tt-dark .pub-cta-section h2 { color: var(--tt-orange); }

.public-page.tt-dark .pub-cta-section {
    text-align: center;
    padding-block: 72px;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.public-page.tt-dark .pub-footer {
    background: var(--tt-footer);
    border-top: 1px solid var(--tt-glass-border);
    color: var(--tt-muted);
}
.public-page.tt-dark .pub-footer a,
.public-page.tt-dark .pub-footer p,
.public-page.tt-dark .pub-footer span { color: var(--tt-muted); }
.public-page.tt-dark .pub-footer a:hover { color: var(--tt-text); }
.public-page.tt-dark .pub-footer-logo .logo-totum { color: var(--tt-text); }
.public-page.tt-dark .pub-footer-logo .logo-teams { color: var(--tt-orange); }

/* ── Cookie notice sits above the dark ground ────────────────────────── */
.public-page.tt-dark .cookie-notice {
    background: var(--tt-menu);
    border-top: 1px solid var(--tt-glass-border);
    color: var(--tt-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   Vertical rhythm

   The light stylesheet was tuned for a denser, lighter page. On the dark
   ground the same gaps read as cramped, because there are no card shadows
   or rule lines to separate blocks — only space. One scale, used
   throughout, so the page has a rhythm rather than ad-hoc margins.
═══════════════════════════════════════════════════════════════════════ */

.public-page.tt-dark {
    --tt-space-1: .5rem;    /* within a line group: label to value        */
    --tt-space-2: 1rem;     /* between related lines: heading to sub      */
    --tt-space-3: 1.75rem;  /* between blocks inside a section            */
    --tt-space-4: 2.75rem;  /* between a section's parts: text to cards   */
    --tt-space-5: 6rem;     /* between sections                           */
}

/* ── Section bands ───────────────────────────────────────────────────── */
.public-page.tt-dark .pub-hero,
.public-page.tt-dark .pub-pain-strip,
.public-page.tt-dark .pub-audience-split,
.public-page.tt-dark .pub-secondary-features,
.public-page.tt-dark .pub-cta-section {
    padding-block: var(--tt-space-5);
}

.public-page.tt-dark .pub-founding-banner { padding-block: 4.5rem 5.5rem; }

/* ── Hero stack ──────────────────────────────────────────────────────── */
.public-page.tt-dark .pub-founding-headline { margin-bottom: var(--tt-space-3); }
.public-page.tt-dark .pub-founding-text > p { margin-bottom: var(--tt-space-4); line-height: 1.65; }
.public-page.tt-dark .pub-founding-inner { gap: 4rem; }

/* ── Section headings ────────────────────────────────────────────────── */
.public-page.tt-dark .pub-hero-tagline,
.public-page.tt-dark .pub-section-eyebrow { margin-bottom: var(--tt-space-2); display: block; }

.public-page.tt-dark .pub-hero-headline,
.public-page.tt-dark .pub-section-title,
.public-page.tt-dark .pub-section-title-large,
.public-page.tt-dark .pub-pain-heading { margin-bottom: var(--tt-space-2); line-height: 1.15; }

.public-page.tt-dark .pub-hero-sub,
.public-page.tt-dark .pub-section-title-sub { margin-bottom: var(--tt-space-4); line-height: 1.65; }

/* ── Card grids ──────────────────────────────────────────────────────── */
.public-page.tt-dark .pub-pain-grid,
.public-page.tt-dark .pub-feature-grid { gap: var(--tt-space-3); margin-top: var(--tt-space-4); }

.public-page.tt-dark .pub-pain-card,
.public-page.tt-dark .pub-fg-item { padding: var(--tt-space-3); }

.public-page.tt-dark .pub-pain-card p,
.public-page.tt-dark .pub-fg-item p { line-height: 1.6; }

.public-page.tt-dark .pub-pain-icon,
.public-page.tt-dark .pub-fg-icon { margin-bottom: var(--tt-space-2); display: block; }

.public-page.tt-dark .pub-fg-item strong { display: block; margin-bottom: var(--tt-space-1); }

/* ── Button rows ─────────────────────────────────────────────────────── */
.public-page.tt-dark .pub-hero-ctas,
.public-page.tt-dark .pub-founding-ctas { gap: var(--tt-space-2) var(--tt-space-3); }

.public-page.tt-dark .pub-hero-trust-bar { margin-top: var(--tt-space-4); gap: var(--tt-space-2); }
.public-page.tt-dark .pub-trust-pill { padding: .55rem 1.1rem; }

/* ── Pricing strip, CTA ───────────────────────────────────────────────── */
.public-page.tt-dark .pub-cta-section h2 { margin-bottom: var(--tt-space-2); }
.public-page.tt-dark .pub-cta-section p { margin-bottom: var(--tt-space-4); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.public-page.tt-dark .pub-footer { padding-block: var(--tt-space-4); }
.public-page.tt-dark .pub-footer-inner { gap: var(--tt-space-4); }
.public-page.tt-dark .pub-footer-brand p { margin-top: var(--tt-space-1); }

/* Narrow screens: sections keep rhythm but do not run the page too long. */
@media (max-width: 800px) {
    .public-page.tt-dark {
        --tt-space-4: 2rem;
        --tt-space-5: 4rem;
    }
    .public-page.tt-dark .pub-founding-inner { gap: 2.5rem; }
}

/* This band carries only a title and a line of copy — no cards follow it, so the
   section's bottom padding is the whole gap and the sub's margin just adds a void. */
.public-page.tt-dark .pub-audience-split .pub-section-title-sub { margin-bottom: 0; }
.public-page.tt-dark .pub-audience-split { padding-block: 4rem; }

/* The eyebrow outsized the heading it introduces. Match the redesign: small, muted,
   bold, so the orange title stays the loudest thing in the band. */
.public-page.tt-dark .pub-section-eyebrow {
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 800;
}

/* ── Typography: word spacing ────────────────────────────────────────────
   Headlines carry tight negative letter-spacing for the display look, which
   closes up the spaces between words as well as between letters. Widen the
   word gap in proportion so "Totally free. Until 2027." still reads as
   separate words at display size.
─────────────────────────────────────────────────────────────────────────── */
.public-page.tt-dark h1,
.public-page.tt-dark h2,
.public-page.tt-dark .pub-founding-headline,
.public-page.tt-dark .pub-hero-headline,
.public-page.tt-dark .pub-section-title,
.public-page.tt-dark .pub-section-title-large,
.public-page.tt-dark .pub-pain-heading { word-spacing: .12em; }

.public-page.tt-dark p,
.public-page.tt-dark li,
.public-page.tt-dark .pub-hero-sub,
.public-page.tt-dark .pub-section-title-sub { word-spacing: .08em; }

/* Buttons and nav are short strings where a wide gap reads as a gap, not rhythm. */
.public-page.tt-dark .pub-btn-primary,
.public-page.tt-dark .pub-btn-ghost,
.public-page.tt-dark .pub-btn-outline,
.public-page.tt-dark .pub-nav-links a { word-spacing: normal; }

/* ═══════════════════════════════════════════════════════════════════════
   The rest of the public site

   Token remapping above handles anything written as var(--white) / var(--grey)
   / var(--text). What remains is the hardcoded light values, listed here by
   the page they belong to.
═══════════════════════════════════════════════════════════════════════ */

/* ── Alternating light bands → the dark band colour ──────────────────── */
.public-page.tt-dark .about-section.alt,
.public-page.tt-dark .feat-section.alt,
.public-page.tt-dark .ensemble-section,
.public-page.tt-dark .squad-section,
.public-page.tt-dark .youth-section,
.public-page.tt-dark .sports-types-section,
.public-page.tt-dark .ensembles-section,
.public-page.tt-dark .pricing-section,
.public-page.tt-dark .faq-section,
.public-page.tt-dark .sg-feature:nth-child(even),
.public-page.tt-dark .sg-feature:nth-child(odd) { background: var(--tt-band); }

/* ── Page heroes: the light gradients become the hero photo treatment ── */
.public-page.tt-dark .about-hero,
.public-page.tt-dark .feat-hero,
.public-page.tt-dark .music-hero,
.public-page.tt-dark .sports-hero,
.public-page.tt-dark .policy-hero,
.public-page.tt-dark .sg-hero,
.public-page.tt-dark .pricing-page-hero {
    background:
        linear-gradient(180deg, var(--tt-scrim-bottom), var(--tt-scrim-deep)),
        url("../images/redesign/hero-bg.jpg") center / cover no-repeat;
    border: none;
    padding-block: 5rem;
}

.public-page.tt-dark .about-hero h1,
.public-page.tt-dark .feat-hero h1,
.public-page.tt-dark .music-hero h1,
.public-page.tt-dark .sports-hero h1,
.public-page.tt-dark .policy-hero h1,
.public-page.tt-dark .sg-hero h1,
.public-page.tt-dark .pricing-page-hero h1 { color: var(--tt-text); }

/* The pricing page puts the first-year banner directly under this hero, and that
   banner carries the same photograph. Two copies of one image stacked read as a
   tiling bug, so here the hero keeps the scrim and lets the banner hold the photo. */
.public-page.tt-dark .pricing-page-hero {
    background: linear-gradient(180deg, var(--tt-scrim-bottom), var(--tt-scrim-deep));
}

/* ── Cards and panels → glass ────────────────────────────────────────── */
.public-page.tt-dark .value-card,
.public-page.tt-dark .feat-card,
.public-page.tt-dark .editor-panel,
.public-page.tt-dark .ensemble-card,
.public-page.tt-dark .squad-card,
.public-page.tt-dark .stype-card,
.public-page.tt-dark .etype-card,
.public-page.tt-dark .pricing-card,
.public-page.tt-dark .pub-feature-card,
.public-page.tt-dark .pub-audience-card,
.public-page.tt-dark .youth-feature-card,
.public-page.tt-dark .sg-contact-box,
.public-page.tt-dark .avail-ui {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    border-radius: 18px;
    backdrop-filter: blur(16px);
    box-shadow: none;
    color: var(--tt-text);
}

.public-page.tt-dark .value-card:hover,
.public-page.tt-dark .feat-card:hover,
.public-page.tt-dark .ensemble-card:hover,
.public-page.tt-dark .squad-card:hover,
.public-page.tt-dark .pricing-card:hover,
.public-page.tt-dark .pub-feature-card:hover,
.public-page.tt-dark .pub-audience-card:hover {
    border-color: var(--tt-orange-ring);
    box-shadow: 0 12px 32px var(--tt-shadow);
}

/* ── Callouts keep their accent rule, lose the cream fill ────────────── */
.public-page.tt-dark .story-quote,
.public-page.tt-dark .editor-callout,
.public-page.tt-dark .policy-callout,
.public-page.tt-dark .policy-toc,
.public-page.tt-dark .sg-intro,
.public-page.tt-dark .sg-step-note,
.public-page.tt-dark .feat-unique-badge,
.public-page.tt-dark .role-pill,
.public-page.tt-dark .feat-tag,
.public-page.tt-dark .editor-panel-label {
    background: var(--tt-orange-wash);
    border-color: var(--tt-orange);
    color: var(--tt-text);
}

/* ── Nav strips and section rules ────────────────────────────────────── */
.public-page.tt-dark .feat-nav-strip,
.public-page.tt-dark .trust-strip,
.public-page.tt-dark .eu-strip {
    background: var(--tt-strip);
    border-color: var(--tt-glass-border);
    backdrop-filter: blur(16px);
}

.public-page.tt-dark .policy-section h2 { border-bottom-color: var(--tt-glass-border); }

/* ── Tables ──────────────────────────────────────────────────────────── */
.public-page.tt-dark .roles-table td,
.public-page.tt-dark .policy-table td,
.public-page.tt-dark .sg-data-table td { border-bottom-color: var(--tt-glass-border); color: var(--tt-lede); }

.public-page.tt-dark .roles-table tr:nth-child(even) td,
.public-page.tt-dark .policy-table tr:nth-child(even) td,
.public-page.tt-dark .sg-data-table tr:nth-child(even) td { background: var(--tt-fill-stripe); }

.public-page.tt-dark .roles-table th,
.public-page.tt-dark .policy-table th,
.public-page.tt-dark .sg-data-table th { color: var(--tt-text); }

.public-page.tt-dark .roles-table td:first-child { color: var(--tt-text); }

/* Availability demo grid on the features page. */
.public-page.tt-dark .avail-cell.ok { background: var(--tt-ok-bg); color: var(--tt-ok-fg); }
.public-page.tt-dark .avail-cell.conflict { background: var(--tt-danger-bg); color: var(--tt-danger-fg); }
.public-page.tt-dark .avail-cell.partial { background: var(--tt-warn-bg); color: var(--tt-warn-fg); }
.public-page.tt-dark .avail-cell.empty { background: var(--tt-fill-0); color: var(--tt-muted); }

/* ── Headings and copy on the per-page sections ──────────────────────── */
.public-page.tt-dark .about-inner h2,
.public-page.tt-dark .feat-text h2,
.public-page.tt-dark .feat-grid-header h2,
.public-page.tt-dark .editor-dual-text h2,
.public-page.tt-dark .sg-feature-text h2,
.public-page.tt-dark .sg-contact-inner h2,
.public-page.tt-dark .policy-section h2,
.public-page.tt-dark .policy-section h3 { color: var(--tt-orange); }

.public-page.tt-dark .value-card h3,
.public-page.tt-dark .feat-card h3,
.public-page.tt-dark .squad-card h3,
.public-page.tt-dark .sg-check-body h4,
.public-page.tt-dark .pub-audience-card-text h3 { color: var(--tt-text); }

.public-page.tt-dark .about-inner p,
.public-page.tt-dark .value-card p,
.public-page.tt-dark .feat-text p,
.public-page.tt-dark .feat-card p,
.public-page.tt-dark .feat-grid-header p,
.public-page.tt-dark .editor-dual-text p,
.public-page.tt-dark .sg-feature-text p,
.public-page.tt-dark .sg-check-body p,
.public-page.tt-dark .sg-contact-inner p,
.public-page.tt-dark .policy-section p,
.public-page.tt-dark .policy-section li,
.public-page.tt-dark .squad-card p,
.public-page.tt-dark .pub-audience-card-text p { color: var(--tt-lede); }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.public-page.tt-dark .pricing-card .plan-price,
.public-page.tt-dark .pricing-card .plan-name { color: var(--tt-text); }
.public-page.tt-dark .pricing-card .feature-list li { color: var(--tt-lede); }
.public-page.tt-dark .pricing-from-notice {
    background: var(--tt-warn-bg);
    border-color: var(--tt-warn-border);
    color: var(--tt-warn-fg);
}
.public-page.tt-dark .pricing-from-notice strong { color: var(--tt-warn-fg-strong); }
.public-page.tt-dark .founding-cta-section { background: transparent; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.public-page.tt-dark .faq-list summary { color: var(--tt-text); }
.public-page.tt-dark .faq-list details {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    border-radius: 14px;
    backdrop-filter: blur(16px);
}
.public-page.tt-dark .faq-list details p { color: var(--tt-lede); }

/* ── About page odds and ends ────────────────────────────────────────── */
.public-page.tt-dark .founder-avatar { border-color: var(--tt-orange); }
.public-page.tt-dark .contact-email-link { color: var(--tt-orange); }
.public-page.tt-dark .about-eyebrow { color: var(--tt-muted); }

/* ═══════════════════════════════════════════════════════════════════════
   Account pages (login, register, password reset)

   These render raw MudBlazor markup — .mud-input-control and friends —
   statically, rather than through Mud components, so they do not pick up
   the theme provider's palette variables. Style them directly.
═══════════════════════════════════════════════════════════════════════ */
.public-page.tt-dark .mud-typography,
.public-page.tt-dark .mud-typography-h4,
.public-page.tt-dark .mud-typography-h5,
.public-page.tt-dark .mud-typography-h6,
.public-page.tt-dark h1.mud-typography,
.public-page.tt-dark h2.mud-typography { color: var(--tt-text); }

.public-page.tt-dark .mud-input-slot,
.public-page.tt-dark .mud-input-root {
    background: var(--tt-input-bg);
    color: var(--tt-text);
    border-radius: 10px;
}
.public-page.tt-dark .mud-input-slot::placeholder { color: var(--tt-muted); }
.public-page.tt-dark .mud-input-outlined-border { border-color: var(--tt-glass-border); }
.public-page.tt-dark .mud-input-label,
.public-page.tt-dark .mud-input-helper-text { color: var(--tt-muted); }
.public-page.tt-dark .mud-input-error,
.public-page.tt-dark .validation-message { color: var(--tt-danger-fg); }

/* The account card itself. */
.public-page.tt-dark .account-card,
.public-page.tt-dark .mud-paper {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    color: var(--tt-text);
    backdrop-filter: blur(16px);
}

/* Account pages set their heading colour inline (Style="color: ..."), which no
   stylesheet can override. The literal navy was replaced with this variable so
   the value lives here with the rest of the palette. */
.public-page.tt-dark { --tt-heading: var(--tt-text); }

/* ── Fixes from the rendered-page contrast audit ─────────────────────────
   Found by walking each page and flagging any element still painted light,
   plus any text under a 3:1 ratio against its own background.
─────────────────────────────────────────────────────────────────────────── */

/* Still-white blocks. */
.public-page.tt-dark .,
.public-page.tt-dark .sg-contact { background: var(--tt-band); }

.public-page.tt-dark .sg-visual,
.public-page.tt-dark .policy-body > div {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    border-radius: 18px;
    backdrop-filter: blur(16px);
}

/* Safeguarding tick / cross discs: pale mint and pink on white originally. */
.public-page.tt-dark .sg-check-icon { background: var(--tt-ok-bg); color: var(--tt-ok-fg); }
.public-page.tt-dark .sg-check-icon.cross { background: var(--tt-danger-bg); color: var(--tt-danger-fg); }

/* Table headers were mid-grey on the dark ground — 2.7:1. */
.public-page.tt-dark th,
.public-page.tt-dark .roles-table th,
.public-page.tt-dark .policy-table th,
.public-page.tt-dark .sg-data-table th {
    color: var(--tt-text);
    background: var(--tt-fill-1);
    border-bottom: 1px solid var(--tt-glass-border);
}

/* Body links kept the light theme's navy, which all but vanishes here. */
.public-page.tt-dark .policy-section a,
.public-page.tt-dark .sg-contact a,
.public-page.tt-dark .about-inner a,
.public-page.tt-dark .feat-text a,
.public-page.tt-dark p a { color: var(--tt-link); text-decoration: underline; }
.public-page.tt-dark p a:hover { color: var(--tt-orange); }

/* Headings inside these panels inherited the light theme's near-black. */
.public-page.tt-dark .sg-step h4,
.public-page.tt-dark .sg-visual h4,
.public-page.tt-dark .sg-visual strong,

.public-page.tt-dark .sg-visual p,
.public-page.tt-dark .sg-table-note,
.public-page.tt-dark .policy-body td { color: var(--tt-lede); }

/* Was an inline light panel on both privacy pages, which no stylesheet could
   reach; the markup now carries this class instead. */
.public-page.tt-dark .policy-contact-box {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    border-left: 4px solid var(--tt-orange);
    border-radius: 14px;
    padding: 24px 28px;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--tt-lede);
}
.public-page.tt-dark .policy-contact-box strong { color: var(--tt-text); }
.public-page.tt-dark .policy-contact-box a { color: var(--tt-link); }

/* ── Fixes from the light-theme contrast audit ───────────────────────────
   These all rendered white-on-dark before. The heroes and banners are pale in
   light mode, so the text has to come from the palette rather than be assumed
   white.
─────────────────────────────────────────────────────────────────────────── */
.public-page.tt-dark .sports-hero p,
.public-page.tt-dark .music-hero p,
.public-page.tt-dark .about-hero p,
.public-page.tt-dark .feat-hero p,
.public-page.tt-dark .sg-hero p,
.public-page.tt-dark .policy-hero p,
.public-page.tt-dark .pricing-page-hero p,
.public-page.tt-dark .-label,
.public-page.tt-dark .pub-founding-text strong { color: var(--tt-lede); }

.public-page.tt-dark .pub-founding-text strong { color: var(--tt-text); }

.public-page.tt-dark .pub-trust-pill-light {
    background: var(--tt-panel);
    border: 1px solid var(--tt-border);
    color: var(--tt-text);
}

.public-page.tt-dark .tick { color: var(--tt-ok-fg); }
.public-page.tt-dark .cross { color: var(--tt-danger-fg); }

/* ── Bootstrap classes on the account form pages ────────────────────────
   Sign-in, 2FA and external-login carry Bootstrap markup from the Identity
   template. They render under PublicLayout rather than .portal-shell, so
   nothing else retints it and an alert would stay a pale light-mode box on
   the dark form page. The .tt-field classes those pages use are in
   theme.css, shared with the portal shell.
─────────────────────────────────────────────────────────────────────────── */
/* Bootstrap's .text-* utilities carry !important, so this needs it too. */
.public-page.tt-dark .text-danger,
.public-page.tt-dark .validation-summary-errors { color: var(--tt-danger-fg) !important; }
.public-page.tt-dark .validation-message { display: block; margin-top: 4px; font-size: .78rem; }

.public-page.tt-dark .alert {
    background: var(--tt-fill-2);
    border: 1px solid var(--tt-border);
    color: var(--tt-text);
    border-radius: 12px;
}
.public-page.tt-dark .alert-success { background: var(--tt-ok-bg); border-color: transparent; color: var(--tt-ok-fg); }
.public-page.tt-dark .alert-warning { background: var(--tt-warn-bg); border-color: var(--tt-warn-border); color: var(--tt-warn-fg); }
.public-page.tt-dark .alert-danger { background: var(--tt-danger-bg); border-color: transparent; color: var(--tt-danger-fg); }
.public-page.tt-dark .alert-info { background: var(--tt-info-bg); border-color: transparent; color: var(--tt-info-fg); }

/* Phone: the offer card keeps a 16px gutter rather than touching the screen edges. */
@media (max-width: 600px) {
    .public-page.tt-dark .pub-founding-banner { padding-inline: 16px; }
    .public-page.tt-dark .pub-founding-text { padding: 2rem 1.25rem; }
}