/*
 * DESIGN-004: Warm Signal palette for the active Tailwind public surfaces.
 *
 * The original Tailwind utility sheet remains available for layout and
 * behavior. These scoped rules are loaded after page-specific styles so the
 * public UI can use a calm light canvas, charcoal surfaces, and restrained
 * Cloudflare-inspired orange without changing routes, data, or integrations.
 */

body.gempixel-804-warm-signal {
    --tsw-page: #fbfaf7;
    --tsw-surface: #ffffff;
    --tsw-surface-soft: #f3efe8;
    --tsw-ink: #1f2937;
    --tsw-body: #475569;
    --tsw-muted: #64748b;
    --tsw-border: #e7e5e0;
    --tsw-orange: #f48120;
    --tsw-orange-action: #b54708;
    --tsw-orange-dark: #923a06;
    --tsw-orange-soft: #fff1e8;
    --tsw-steel: #2f6f8f;
    --tsw-steel-dark: #22566d;
    --tsw-teal: #0f766e;
    --tsw-teal-soft: #e6f6f1;
    --tsw-charcoal: #20252b;
    --tsw-charcoal-soft: #2b3138;
    background: var(--tsw-page) !important;
    color: var(--tsw-body) !important;
    color-scheme: light;
}

body.gempixel-804-warm-signal #main-content {
    background: var(--tsw-page) !important;
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal [class~="bg-neutral-50"],
body.gempixel-804-warm-signal [class~="dark:bg-neutral-950"],
body.gempixel-804-warm-signal [class~="dark:bg-neutral-900"] {
    background: var(--tsw-page) !important;
}

body.gempixel-804-warm-signal [class~="bg-white"] {
    background: var(--tsw-surface) !important;
}

body.gempixel-804-warm-signal [class~="text-black"],
body.gempixel-804-warm-signal [class~="dark:text-black"],
body.gempixel-804-warm-signal [class~="dark:text-white"],
body.gempixel-804-warm-signal [class*="text-black/"],
body.gempixel-804-warm-signal [class*="dark:text-white/"] {
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal [class*="border-black/"],
body.gempixel-804-warm-signal [class*="dark:border-white/"],
body.gempixel-804-warm-signal [class*="divide-black/"] {
    border-color: var(--tsw-border) !important;
}

body.gempixel-804-warm-signal > header {
    border-color: var(--tsw-border) !important;
    background: rgba(255, 255, 255, .96) !important;
    color: var(--tsw-ink) !important;
    box-shadow: 0 1px 0 rgba(31, 41, 55, .03);
}

body.gempixel-804-warm-signal > header a:not([class*="bg-"]),
body.gempixel-804-warm-signal > header summary {
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal > header a:not([class*="bg-"]):hover,
body.gempixel-804-warm-signal > header a:not([class*="bg-"]):focus,
body.gempixel-804-warm-signal > header summary:hover,
body.gempixel-804-warm-signal > header summary:focus {
    color: var(--tsw-orange-action) !important;
}

body.gempixel-804-warm-signal > header a[class*="bg-white"],
body.gempixel-804-warm-signal > header a[class*="bg-black"] {
    border-color: transparent !important;
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(181, 71, 8, .18);
}

body.gempixel-804-warm-signal > header a[class*="bg-white"]:hover,
body.gempixel-804-warm-signal > header a[class*="bg-white"]:focus,
body.gempixel-804-warm-signal > header a[class*="bg-black"]:hover,
body.gempixel-804-warm-signal > header a[class*="bg-black"]:focus {
    background: var(--tsw-orange-dark) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal > header details nav {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-surface) !important;
    box-shadow: 0 18px 44px rgba(31, 41, 55, .14);
}

body.gempixel-804-warm-signal > header details nav a:hover,
body.gempixel-804-warm-signal > header details nav a:focus {
    background: var(--tsw-orange-soft) !important;
    color: var(--tsw-orange-action) !important;
}

body.gempixel-804-warm-signal > footer {
    border-color: var(--tsw-border) !important;
    background: linear-gradient(180deg, var(--tsw-surface), var(--tsw-surface-soft)) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal > footer a,
body.gempixel-804-warm-signal > footer p {
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal > footer *[class] {
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal > footer h2,
body.gempixel-804-warm-signal > footer .ts-footer-name {
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal > footer a:hover,
body.gempixel-804-warm-signal > footer a:focus {
    color: var(--tsw-orange-action) !important;
}

/* Homepage: light-first canvas with one calm charcoal/orange hero panel. */
body.gempixel-804-warm-signal .ts-warm-home,
body.gempixel-804-warm-signal .ts-warm-home + section {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-page) !important;
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal .ts-warm-home > div > div {
    min-width: 0;
}

body.gempixel-804-warm-signal .ts-warm-home > div > div:first-child {
    background: var(--tsw-page) !important;
}

body.gempixel-804-warm-signal .ts-warm-home h1,
body.gempixel-804-warm-signal .ts-warm-home h2,
body.gempixel-804-warm-signal .ts-warm-home h3 {
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .ts-warm-home p[class*="uppercase"],
body.gempixel-804-warm-signal .ts-warm-home > div > div:first-child > p:first-child {
    color: var(--tsw-orange-action) !important;
}

body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel {
    background:
        radial-gradient(circle at 88% 16%, rgba(244, 129, 32, .25), transparent 34%),
        linear-gradient(135deg, var(--tsw-charcoal), var(--tsw-charcoal-soft)) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel h1,
body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel h2,
body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel h3,
body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel p,
body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel span {
    color: inherit !important;
}

body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel > div > div {
    border-color: rgba(255, 255, 255, .22) !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}

body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel [class*="bg-black/"] {
    background: rgba(0, 0, 0, .18) !important;
}

body.gempixel-804-warm-signal .ts-warm-home form[data-tailwind-shortener] > div,
body.gempixel-804-warm-signal .ts-warm-home details,
body.gempixel-804-warm-signal .ts-warm-home input,
body.gempixel-804-warm-signal .ts-warm-home select {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-surface) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .ts-warm-home input::placeholder {
    color: var(--tsw-muted) !important;
    opacity: 1;
}

body.gempixel-804-warm-signal .ts-warm-home form[data-tailwind-shortener] button[type="submit"],
body.gempixel-804-warm-signal .ts-warm-home #output-result button[class*="bg-black"] {
    border-color: transparent !important;
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(181, 71, 8, .18);
}

body.gempixel-804-warm-signal .ts-warm-home form[data-tailwind-shortener] button[type="submit"]:hover,
body.gempixel-804-warm-signal .ts-warm-home form[data-tailwind-shortener] button[type="submit"]:focus,
body.gempixel-804-warm-signal .ts-warm-home #output-result button[class*="bg-black"]:hover,
body.gempixel-804-warm-signal .ts-warm-home #output-result button[class*="bg-black"]:focus {
    background: var(--tsw-orange-dark) !important;
}

body.gempixel-804-warm-signal .ts-warm-home #output-result {
    border-color: rgba(15, 118, 110, .3) !important;
    background: var(--tsw-teal-soft) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel [class*="bg-emerald"] {
    color: #b9f2df !important;
}

body.gempixel-804-warm-signal .ts-warm-home + section [class~="bg-neutral-50"],
body.gempixel-804-warm-signal .ts-warm-home + section [class~="dark:bg-neutral-950"] {
    background: var(--tsw-surface) !important;
}

body.gempixel-804-warm-signal .ts-warm-home + section a:hover {
    background: var(--tsw-orange-soft) !important;
}

body.gempixel-804-warm-signal .ts-warm-home-final {
    border-color: rgba(255, 255, 255, .12) !important;
    background: var(--tsw-charcoal) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .ts-warm-home-final h2 {
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .ts-warm-home-final p {
    color: #d8dee5 !important;
}

body.gempixel-804-warm-signal .ts-warm-home-final a[class*="bg-black"] {
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .ts-warm-home-final a[class*="bg-black"]:hover,
body.gempixel-804-warm-signal .ts-warm-home-final a[class*="bg-black"]:focus {
    background: var(--tsw-orange-dark) !important;
}

body.gempixel-804-warm-signal .ts-warm-home-final a[class*="border"] {
    border-color: rgba(255, 255, 255, .32) !important;
    background: transparent !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .ts-warm-home-final a[class*="border"]:hover,
body.gempixel-804-warm-signal .ts-warm-home-final a[class*="border"]:focus {
    background: rgba(255, 255, 255, .1) !important;
}

/* Pricing: charcoal hero, orange action system, and warm popular-plan state. */
body.gempixel-804-warm-signal .g804-pricing-screen {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-page) !important;
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal .g804-pricing-screen > div {
    border-color: var(--tsw-border) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(255, 255, 255, .12) !important;
    background:
        radial-gradient(circle at 82% 10%, rgba(244, 129, 32, .24), transparent 34%),
        linear-gradient(135deg, var(--tsw-charcoal), var(--tsw-charcoal-soft)) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 176, 109, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 222, 229, .06) 1px, transparent 1px);
    background-size: 36px 36px;
    content: "";
    pointer-events: none;
}

body.gempixel-804-warm-signal .g804-pricing-hero h1 {
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero > p:first-child {
    color: #ffb06d !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero > p:not(:first-child) {
    color: #d8dee5 !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero [role="group"] {
    border-color: rgba(255, 255, 255, .22) !important;
    background: rgba(0, 0, 0, .18) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero [data-tailwind-cycle][aria-pressed="true"] {
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(181, 71, 8, .22);
}

body.gempixel-804-warm-signal .g804-pricing-hero [data-tailwind-cycle][aria-pressed="false"] {
    background: transparent !important;
    color: #d8dee5 !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero [data-tailwind-cycle][aria-pressed="false"]:hover,
body.gempixel-804-warm-signal .g804-pricing-hero [data-tailwind-cycle][aria-pressed="false"]:focus {
    background: rgba(255, 176, 109, .14) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero p[class*="text-emerald"] {
    color: #8ee3cf !important;
}

body.gempixel-804-warm-signal .g804-pricing-plans {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-page) !important;
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal .g804-pricing-grid {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-surface) !important;
}

body.gempixel-804-warm-signal .g804-pricing-grid > article {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-surface) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .g804-pricing-grid > article.g804-pricing-card-popular {
    border-color: var(--tsw-orange) !important;
    background: linear-gradient(180deg, var(--tsw-orange-soft) 0%, #ffffff 62%) !important;
    box-shadow: inset 0 0 0 2px var(--tsw-orange), 0 16px 36px rgba(181, 71, 8, .12);
}

body.gempixel-804-warm-signal .g804-pricing-card > p:first-of-type {
    color: var(--tsw-orange-action) !important;
}

body.gempixel-804-warm-signal .g804-pricing-card [data-tailwind-price] {
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .g804-pricing-card [data-tailwind-period],
body.gempixel-804-warm-signal .g804-pricing-card > p[class*="mt-3"] {
    color: var(--tsw-muted) !important;
}

body.gempixel-804-warm-signal .g804-pricing-card ul {
    border-color: var(--tsw-border) !important;
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal .g804-pricing-card ul > li > span:first-child {
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal .g804-pricing-card ul > li > span:last-child {
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .g804-pricing-card-popular > span {
    background: var(--tsw-orange) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .g804-pricing-actions a:not([data-tailwind-trial]) {
    border-color: transparent !important;
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(181, 71, 8, .16);
}

body.gempixel-804-warm-signal .g804-pricing-actions a:not([data-tailwind-trial]):hover,
body.gempixel-804-warm-signal .g804-pricing-actions a:not([data-tailwind-trial]):focus {
    background: var(--tsw-orange-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

body.gempixel-804-warm-signal .g804-pricing-actions a[data-tailwind-trial] {
    border-color: rgba(47, 111, 143, .5) !important;
    background: #ffffff !important;
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal .g804-pricing-actions a[data-tailwind-trial]:hover,
body.gempixel-804-warm-signal .g804-pricing-actions a[data-tailwind-trial]:focus {
    border-color: var(--tsw-steel) !important;
    background: #edf5f8 !important;
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal .g804-pricing-actions p {
    color: var(--tsw-muted) !important;
}

body.gempixel-804-warm-signal .g804-pricing-details {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-surface) !important;
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal .g804-pricing-details h2 {
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .g804-pricing-details p {
    color: var(--tsw-muted) !important;
}

body.gempixel-804-warm-signal .g804-pricing-details > div > div:last-child,
body.gempixel-804-warm-signal .g804-pricing-details details {
    border-color: var(--tsw-border) !important;
}

body.gempixel-804-warm-signal .g804-pricing-details a[class*="bg-black"],
body.gempixel-804-warm-signal .g804-pricing-details a[class*="bg-white"] {
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal :focus-visible {
    outline: 3px solid rgba(244, 129, 32, .58) !important;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    body.gempixel-804-warm-signal *,
    body.gempixel-804-warm-signal *::before,
    body.gempixel-804-warm-signal *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* DESIGN-004: final utility normalization for all Tailwind public surfaces.
 * This keeps 8.0.4 spacing, rounded controls, and responsive layout while
 * translating legacy black/indigo/violet utility colors into Warm Signal. */
body.gempixel-804-warm-signal {
    --tsw-page: #fbfaf7;
    --tsw-surface: #ffffff;
    --tsw-surface-soft: #f3efe8;
    --tsw-ink: #1f2937;
    --tsw-body: #475569;
    --tsw-muted: #64748b;
    --tsw-border: #e7e5e0;
    --tsw-orange: #f48120;
    --tsw-orange-action: #b54708;
    --tsw-orange-dark: #923a06;
    --tsw-orange-soft: #fff1e8;
    --tsw-steel: #2f6f8f;
    --tsw-steel-dark: #22566d;
    --tsw-teal: #0f766e;
    --tsw-teal-dark: #0b5e59;
    --tsw-teal-soft: #e6f6f1;
    --tsw-info-soft: #eff6f8;
    --tsw-charcoal: #20252b;
    --tsw-charcoal-soft: #2b3138;
    /* Bridge Bootstrap-era fallback components to the same Warm Signal
     * roles without changing user-selected Bio theme variables. */
    --bs-primary: var(--tsw-orange-action);
    --bs-primary-rgb: 181, 71, 8;
    --bs-secondary: var(--tsw-steel-dark);
    --bs-secondary-rgb: 34, 86, 109;
    --bs-info: var(--tsw-steel);
    --bs-info-rgb: 47, 111, 143;
    --bs-success: var(--tsw-teal);
    --bs-success-rgb: 15, 118, 110;
    --bs-warning: var(--tsw-orange);
    --bs-warning-rgb: 244, 129, 32;
    --bs-danger: #b42318;
    --bs-danger-rgb: 180, 35, 24;
    --bs-dark: var(--tsw-charcoal);
    --bs-dark-rgb: 32, 37, 43;
    --bs-light: var(--tsw-page);
    --bs-light-rgb: 251, 250, 247;
    --bs-body-bg: var(--tsw-page);
    --bs-body-color: var(--tsw-body);
    color-scheme: light;
}

body.gempixel-804-warm-signal [class~="bg-black"],
body.gempixel-804-warm-signal [class~="dark:bg-black"],
body.gempixel-804-warm-signal [class~="bg-neutral-900"] {
    background-color: var(--tsw-charcoal) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal [class~="dark:bg-neutral-900"] {
    background-color: var(--tsw-surface) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal [class~="dark:bg-neutral-950"] {
    background-color: var(--tsw-page) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal [class~="bg-indigo-600"],
body.gempixel-804-warm-signal [class~="bg-indigo-700"],
body.gempixel-804-warm-signal [class~="bg-violet-600"],
body.gempixel-804-warm-signal [class~="bg-purple-600"],
body.gempixel-804-warm-signal [class~="bg-blue-600"],
body.gempixel-804-warm-signal [class~="bg-blue-700"] {
    background-color: var(--tsw-orange-action) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal [class~="hover:bg-indigo-600"]:hover,
body.gempixel-804-warm-signal [class~="hover:bg-indigo-700"]:hover,
body.gempixel-804-warm-signal [class~="hover:bg-violet-600"]:hover,
body.gempixel-804-warm-signal [class~="hover:bg-purple-600"]:hover,
body.gempixel-804-warm-signal [class~="hover:bg-blue-600"]:hover,
body.gempixel-804-warm-signal [class~="hover:bg-blue-700"]:hover {
    background-color: var(--tsw-orange-dark) !important;
}

body.gempixel-804-warm-signal [class~="text-indigo-600"],
body.gempixel-804-warm-signal [class~="text-indigo-700"],
body.gempixel-804-warm-signal [class~="text-violet-600"],
body.gempixel-804-warm-signal [class~="text-purple-600"] {
    color: var(--tsw-orange-action) !important;
}

body.gempixel-804-warm-signal [class~="text-blue-600"],
body.gempixel-804-warm-signal [class~="text-blue-700"],
body.gempixel-804-warm-signal [class~="text-sky-950"] {
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal [class~="border-indigo-600"],
body.gempixel-804-warm-signal [class~="border-indigo-700"],
body.gempixel-804-warm-signal [class~="border-violet-600"],
body.gempixel-804-warm-signal [class~="border-purple-600"] {
    border-color: var(--tsw-orange) !important;
}

body.gempixel-804-warm-signal [class~="bg-emerald-50"],
body.gempixel-804-warm-signal [class~="bg-green-50"] {
    background-color: var(--tsw-teal-soft) !important;
    color: var(--tsw-teal) !important;
}

body.gempixel-804-warm-signal [class~="bg-emerald-300"],
body.gempixel-804-warm-signal [class~="bg-emerald-500"],
body.gempixel-804-warm-signal [class~="bg-emerald-600"],
body.gempixel-804-warm-signal [class~="bg-green-500"],
body.gempixel-804-warm-signal [class~="bg-green-600"] {
    background-color: var(--tsw-teal) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal [class~="text-emerald-700"],
body.gempixel-804-warm-signal [class~="text-emerald-900"],
body.gempixel-804-warm-signal [class~="text-green-700"],
body.gempixel-804-warm-signal [class~="text-green-900"] {
    color: var(--tsw-teal) !important;
}

body.gempixel-804-warm-signal [class~="border-emerald-500"],
body.gempixel-804-warm-signal [class~="border-green-500"] {
    border-color: var(--tsw-teal) !important;
}

body.gempixel-804-warm-signal [class~="ring-indigo-600"],
body.gempixel-804-warm-signal [class~="ring-violet-600"],
body.gempixel-804-warm-signal [class~="ring-blue-600"] {
    --tw-ring-color: rgba(181, 71, 8, .34) !important;
}

body.gempixel-804-warm-signal.dark {
    --tsw-page: #20252b;
    --tsw-surface: #2b3138;
    --tsw-surface-soft: #353c44;
    --tsw-ink: #f7f7f5;
    --tsw-body: #e7e5e4;
    --tsw-muted: #b9c0c8;
    --tsw-border: rgba(255, 255, 255, .18);
    color-scheme: dark;
}

body.gempixel-804-warm-signal.dark > header {
    background: rgba(32, 37, 43, .96) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal.dark > footer {
    background: #15191d !important;
}

body.gempixel-804-warm-signal input,
body.gempixel-804-warm-signal textarea,
body.gempixel-804-warm-signal select {
    accent-color: var(--tsw-orange-action);
}

/* DESIGN-004: keep the consent surface inside the same calm action system. */
body.gempixel-804-warm-signal #cm {
    border: 1px solid var(--tsw-border) !important;
    background: var(--tsw-surface) !important;
    color: var(--tsw-ink) !important;
    box-shadow: 0 14px 34px rgba(31, 41, 55, .14) !important;
}

body.gempixel-804-warm-signal #cm #c-ttl {
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal #cm #c-txt {
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal #cm .cc-link {
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal #cm .cc-link:hover,
body.gempixel-804-warm-signal #cm .cc-link:focus-visible {
    color: var(--tsw-orange-action) !important;
}

body.gempixel-804-warm-signal #cm #c-p-bn {
    border-color: var(--tsw-orange-action) !important;
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal #cm #c-p-bn:hover,
body.gempixel-804-warm-signal #cm #c-p-bn:focus-visible {
    border-color: var(--tsw-orange-dark) !important;
    background: var(--tsw-orange-dark) !important;
}

body.gempixel-804-warm-signal #cm #c-s-bn {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-surface-soft) !important;
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal #cm #c-s-bn:hover,
body.gempixel-804-warm-signal #cm #c-s-bn:focus-visible {
    border-color: var(--tsw-steel) !important;
    background: #edf5f8 !important;
    color: var(--tsw-steel-dark) !important;
}

/* Dashboard progress: use the same calm in-progress role across quota and
 * usage cards instead of the legacy near-black fill. */
body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] .progress {
    background: var(--tsw-orange-soft) !important;
    border: 1px solid var(--tsw-border) !important;
}

body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] .progress-bar {
    background: var(--tsw-orange-action) !important;
}

/* File uploader: Upload is an initiating action; teal stays reserved for
 * confirmed success and availability states. */
body[data-ts-dashboard-ui="tailwind"] form[action*="filehosting/upload"] .btn-success {
    border-color: var(--tsw-orange-action) !important;
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
}

body[data-ts-dashboard-ui="tailwind"] form[action*="filehosting/upload"] .btn-success:hover,
body[data-ts-dashboard-ui="tailwind"] form[action*="filehosting/upload"] .btn-success:focus-visible {
    border-color: var(--tsw-orange-dark) !important;
    background: var(--tsw-orange-dark) !important;
    color: #ffffff !important;
}

body[data-ts-dashboard-ui="tailwind"] form[action*="filehosting/upload"] .dz-dragdrop {
    border-color: var(--tsw-border) !important;
    background: var(--tsw-surface) !important;
}

body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] form[action*="filehosting/upload"] .progress {
    background: var(--tsw-orange-soft) !important;
    border: 1px solid var(--tsw-border) !important;
}

body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] form[action*="filehosting/upload"] .progress-bar {
    background: var(--tsw-orange-action) !important;
}

/* AI Copilot: keep the editorial 8.0.4 layout, but use the calmer Warm Signal
 * roles and allow its two-column sections to collapse at very narrow widths. */
body.gempixel-804-warm-signal .ts-ai-page .ts-ai-gradient {
    background-image: linear-gradient(135deg, var(--tsw-orange-action), var(--tsw-steel)) !important;
}

body.gempixel-804-warm-signal .ts-ai-page .ts-ai-hero-wash {
    background: radial-gradient(circle at 84% 12%, rgba(244, 129, 32, .18), transparent 42%), linear-gradient(135deg, rgba(255, 241, 232, .92), rgba(237, 245, 248, .96)) !important;
}

body.gempixel-804-warm-signal .ts-ai-page .ts-ai-action {
    border-color: var(--tsw-orange-action) !important;
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .ts-ai-page .ts-ai-action:hover,
body.gempixel-804-warm-signal .ts-ai-page .ts-ai-action:focus-visible {
    border-color: var(--tsw-orange-dark) !important;
    background: var(--tsw-orange-dark) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .ts-ai-page .ts-ai-check {
    background: var(--tsw-teal) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal .ts-ai-page .text-emerald-600 {
    color: var(--tsw-teal) !important;
}

body.gempixel-804-warm-signal .ts-ai-page .grid > div {
    min-width: 0;
}

@media (max-width: 767.98px) {
    body.gempixel-804-warm-signal .ts-ai-page .max-w-7xl {
        max-width: 100%;
    }

    body.gempixel-804-warm-signal .ts-ai-page .text-3xl {
        overflow-wrap: anywhere;
    }
}

/* Dashboard views use Tailwind's hidden utility for Bootstrap-era modal roots.
 * Keep those roots closed until their existing scripts explicitly reveal them. */
body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] .hidden {
    display: none !important;
}

/* Admin navigation: keep the light-first Warm Signal surface readable after
 * the legacy dashboard utility classes are remapped. */
body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar:not([data-ts-dashboard-admin-sidebar]),
body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar:not([data-ts-dashboard-admin-sidebar]) .sidebar-content {
    background: var(--tsw-charcoal) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar[data-ts-dashboard-admin-sidebar] {
    background: var(--tsw-surface) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar[data-ts-dashboard-admin-sidebar] a {
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar[data-ts-dashboard-admin-sidebar] a:hover,
body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar[data-ts-dashboard-admin-sidebar] a:focus-visible {
    background: var(--tsw-orange-soft) !important;
    color: var(--tsw-orange-action) !important;
}

body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar[data-ts-dashboard-admin-sidebar] a[aria-current="page"],
body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar[data-ts-dashboard-admin-sidebar] a.active {
    background: var(--tsw-orange-soft) !important;
    color: var(--tsw-orange-action) !important;
    font-weight: 700;
}

body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar[data-ts-dashboard-admin-sidebar] a i,
body.gempixel-804-warm-signal[data-ts-dashboard-ui="tailwind"] #sidebar[data-ts-dashboard-admin-sidebar] a svg {
    color: currentColor !important;
}

/* DESIGN-004: normalize the remaining Tailwind status variants emitted by
 * legacy user/admin screens. These selectors preserve semantic meaning while
 * ensuring the Warm Signal roles win over the bundled utility CSS. */
body.gempixel-804-warm-signal .ts-warm-accent-text,
body.gempixel-804-warm-signal .ts-warm-ai-label {
    display: inline-block;
    background-image: linear-gradient(135deg, var(--tsw-orange-action), var(--tsw-steel)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

body.gempixel-804-warm-signal .ts-warm-ai-action {
    border-color: var(--tsw-orange-action) !important;
    background: var(--tsw-orange-action) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(181, 71, 8, .18) !important;
}

body.gempixel-804-warm-signal .ts-warm-ai-action:hover,
body.gempixel-804-warm-signal .ts-warm-ai-action:focus-visible {
    border-color: var(--tsw-orange-dark) !important;
    background: var(--tsw-orange-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(146, 58, 6, .24) !important;
}

body.gempixel-804-warm-signal .ts-warm-ai-meter {
    background: linear-gradient(90deg, var(--tsw-orange-action), var(--tsw-steel)) !important;
}

body.gempixel-804-warm-signal [class~="bg-neutral-50"],
body.gempixel-804-warm-signal [class~="bg-gray-50"] {
    background-color: var(--tsw-page) !important;
}

body.gempixel-804-warm-signal [class~="bg-neutral-100"],
body.gempixel-804-warm-signal [class~="bg-gray-100"] {
    background-color: var(--tsw-surface-soft) !important;
}

body.gempixel-804-warm-signal [class~="bg-white"] {
    background-color: var(--tsw-surface) !important;
}

body.gempixel-804-warm-signal [class~="text-black"] {
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal [class~="border-black/5"],
body.gempixel-804-warm-signal [class~="border-black/10"] {
    border-color: var(--tsw-border) !important;
}

body.gempixel-804-warm-signal [class~="bg-emerald-50"],
body.gempixel-804-warm-signal [class~="bg-emerald-500/10"],
body.gempixel-804-warm-signal [class~="bg-emerald-500/15"],
body.gempixel-804-warm-signal [class~="bg-green-50"],
body.gempixel-804-warm-signal [class~="bg-green-500/10"],
body.gempixel-804-warm-signal [class~="bg-green-500/15"] {
    background-color: var(--tsw-teal-soft) !important;
    color: var(--tsw-teal-dark, #0b5e59) !important;
}

body.gempixel-804-warm-signal [class~="bg-emerald-300"],
body.gempixel-804-warm-signal [class~="bg-emerald-500"],
body.gempixel-804-warm-signal [class~="bg-emerald-600"],
body.gempixel-804-warm-signal [class~="bg-green-500"],
body.gempixel-804-warm-signal [class~="bg-green-600"],
body.gempixel-804-warm-signal [class~="bg-green-700"] {
    background-color: var(--tsw-teal) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal [class~="text-emerald-600"],
body.gempixel-804-warm-signal [class~="text-emerald-700"],
body.gempixel-804-warm-signal [class~="text-emerald-800"],
body.gempixel-804-warm-signal [class~="text-emerald-900"],
body.gempixel-804-warm-signal [class~="text-green-600"],
body.gempixel-804-warm-signal [class~="text-green-700"],
body.gempixel-804-warm-signal [class~="text-green-900"] {
    color: var(--tsw-teal-dark, #0b5e59) !important;
}

body.gempixel-804-warm-signal [class~="border-emerald-500"],
body.gempixel-804-warm-signal [class~="border-emerald-600"],
body.gempixel-804-warm-signal [class~="border-green-500"],
body.gempixel-804-warm-signal [class~="border-green-600"] {
    border-color: var(--tsw-teal) !important;
}

body.gempixel-804-warm-signal [class~="bg-amber-500/10"],
body.gempixel-804-warm-signal [class~="bg-amber-500/15"],
body.gempixel-804-warm-signal [class~="bg-amber-500/20"] {
    background-color: var(--tsw-orange-soft) !important;
    color: var(--tsw-orange-dark) !important;
}

body.gempixel-804-warm-signal [class~="bg-amber-400"],
body.gempixel-804-warm-signal [class~="bg-amber-500"] {
    background-color: var(--tsw-orange) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal [class~="text-amber-500"],
body.gempixel-804-warm-signal [class~="text-amber-600"],
body.gempixel-804-warm-signal [class~="text-amber-800"],
body.gempixel-804-warm-signal [class~="text-amber-900"],
body.gempixel-804-warm-signal [class~="text-orange-600"] {
    color: var(--tsw-orange-dark) !important;
}

body.gempixel-804-warm-signal [class~="border-amber-200"],
body.gempixel-804-warm-signal [class~="border-amber-500"] {
    border-color: var(--tsw-orange) !important;
}

body.gempixel-804-warm-signal [class~="bg-blue-500/10"],
body.gempixel-804-warm-signal [class~="bg-blue-500/15"],
body.gempixel-804-warm-signal [class~="bg-blue-500/20"],
body.gempixel-804-warm-signal [class~="bg-violet-500/15"],
body.gempixel-804-warm-signal [class~="bg-violet-500/20"] {
    background-color: var(--tsw-info-soft, #eff6f8) !important;
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal [class~="text-blue-600"],
body.gempixel-804-warm-signal [class~="text-blue-700"],
body.gempixel-804-warm-signal [class~="text-blue-800"],
body.gempixel-804-warm-signal [class~="text-violet-600"],
body.gempixel-804-warm-signal [class~="text-violet-700"],
body.gempixel-804-warm-signal [class~="text-purple-600"],
body.gempixel-804-warm-signal [class~="text-purple-700"] {
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal [class~="border-blue-500"],
body.gempixel-804-warm-signal [class~="border-blue-600"],
body.gempixel-804-warm-signal [class~="border-violet-600"],
body.gempixel-804-warm-signal [class~="border-purple-600"] {
    border-color: var(--tsw-steel) !important;
}

body.gempixel-804-warm-signal [class~="bg-blue-600"],
body.gempixel-804-warm-signal [class~="bg-blue-700"],
body.gempixel-804-warm-signal [class~="bg-indigo-600"],
body.gempixel-804-warm-signal [class~="bg-violet-600"],
body.gempixel-804-warm-signal [class~="bg-purple-600"] {
    background-color: var(--tsw-orange-action) !important;
    color: #ffffff !important;
}

body.gempixel-804-warm-signal [class~="ring-blue-600"],
body.gempixel-804-warm-signal [class~="ring-indigo-600"],
body.gempixel-804-warm-signal [class~="ring-violet-600"],
body.gempixel-804-warm-signal [class~="ring-purple-600"] {
    --tw-ring-color: rgba(181, 71, 8, .34) !important;
}

html.dark body.gempixel-804-warm-signal [class~="dark:bg-neutral-950"],
html.dark body.gempixel-804-warm-signal [class~="dark:bg-neutral-900"] {
    background-color: var(--tsw-page) !important;
    color: var(--tsw-ink) !important;
}

html.dark body.gempixel-804-warm-signal [class~="dark:bg-emerald-500/20"],
html.dark body.gempixel-804-warm-signal [class~="dark:bg-green-500/20"] {
    background-color: rgba(15, 118, 110, .2) !important;
}

html.dark body.gempixel-804-warm-signal [class~="dark:bg-amber-500/20"] {
    background-color: rgba(244, 129, 32, .2) !important;
}

html.dark body.gempixel-804-warm-signal [class~="dark:bg-blue-500/20"],
html.dark body.gempixel-804-warm-signal [class~="dark:bg-violet-500/20"] {
    background-color: rgba(47, 111, 143, .2) !important;
}

html.dark body.gempixel-804-warm-signal [class~="dark:text-emerald-300"],
html.dark body.gempixel-804-warm-signal [class~="dark:text-green-300"] {
    color: #8de5d7 !important;
}

html.dark body.gempixel-804-warm-signal [class~="dark:text-amber-300"] {
    color: #ffc48f !important;
}

html.dark body.gempixel-804-warm-signal [class~="dark:text-blue-200"],
html.dark body.gempixel-804-warm-signal [class~="dark:text-blue-300"],
html.dark body.gempixel-804-warm-signal [class~="dark:text-blue-400"],
html.dark body.gempixel-804-warm-signal [class~="dark:text-violet-300"] {
    color: #9fc9da !important;
}

/* Legacy AI/pricing gradient utilities are kept in older templates for
 * compatibility, but their rendered colour must follow Warm Signal. */
body.gempixel-804-warm-signal [class~="bg-gradient-to-r"][class~="from-orange-600"][class~="via-purple-500"][class~="to-pink-500"],
body.gempixel-804-warm-signal [class~="bg-gradient-to-br"][class~="from-orange-600"][class~="via-purple-500"][class~="to-pink-500"],
body.gempixel-804-warm-signal [class~="bg-gradient-to-r"][class~="from-orange-500"][class~="to-pink-500"],
body.gempixel-804-warm-signal [class~="bg-gradient-to-br"][class~="from-orange-500"][class~="to-pink-500"] {
    background-image: linear-gradient(135deg, var(--tsw-orange-action), var(--tsw-steel)) !important;
}

body.gempixel-804-warm-signal [class~="bg-gradient-to-r"][class~="from-orange-500"][class~="via-purple-500"][class~="to-pink-500"],
body.gempixel-804-warm-signal [class~="bg-gradient-to-br"][class~="from-orange-500"][class~="via-purple-500"][class~="to-pink-500"] {
    background-image: linear-gradient(135deg, var(--tsw-orange-action), var(--tsw-steel)) !important;
}

body.gempixel-804-warm-signal [class~="bg-gradient-to-tr"][class~="from-orange-500"][class~="via-fuchsia-500"][class~="to-pink-500"] {
    background-image: linear-gradient(135deg, var(--tsw-orange-action), var(--tsw-steel)) !important;
    box-shadow: 0 8px 18px rgba(181, 71, 8, .18) !important;
}

body.gempixel-804-warm-signal [class*="shadow-fuchsia-"] {
    --tw-shadow-color: rgba(181, 71, 8, .18) !important;
    box-shadow: 0 8px 18px rgba(181, 71, 8, .18) !important;
}

/* DESIGN-004: close the remaining utility gaps used by the full user/admin
 * and Bio-editor template inventory. Surfaces stay quiet; interactive black
 * utilities become the Warm Signal primary action. */
body.gempixel-804-warm-signal [class~="bg-amber-50"] {
    background-color: var(--tsw-orange-soft) !important;
    color: var(--tsw-orange-dark) !important;
}

/* DESIGN-004: keep informational and fallback notices on the same steel-blue
 * and orange scales as the rest of the Warm Signal system. These explicit
 * mappings cover the remaining Tailwind status utilities used by pricing and
 * dashboard templates without changing their semantic meaning. */
body.gempixel-804-warm-signal [class~="bg-sky-50"] {
    background-color: var(--tsw-info-soft) !important;
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal [class~="border-sky-500/25"],
body.gempixel-804-warm-signal [class~="border-sky-500/30"] {
    border-color: rgba(47, 111, 143, .32) !important;
}

body.gempixel-804-warm-signal [class~="dark:bg-sky-950/20"] {
    background-color: rgba(47, 111, 143, .2) !important;
}

body.gempixel-804-warm-signal [class~="text-sky-950"],
body.gempixel-804-warm-signal [class~="dark:text-sky-100"] {
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal [class~="border-amber-500/25"],
body.gempixel-804-warm-signal [class~="border-amber-500/30"] {
    border-color: rgba(244, 129, 32, .42) !important;
}

body.gempixel-804-warm-signal [class~="dark:bg-amber-950/20"] {
    background-color: rgba(244, 129, 32, .2) !important;
}

body.gempixel-804-warm-signal [class~="text-amber-950"],
body.gempixel-804-warm-signal [class~="dark:text-amber-100"] {
    color: var(--tsw-orange-dark) !important;
}

body.gempixel-804-warm-signal [class~="bg-emerald-500/20"],
body.gempixel-804-warm-signal [class~="bg-green-500/20"] {
    background-color: var(--tsw-teal-soft) !important;
    color: var(--tsw-teal-dark) !important;
}

body.gempixel-804-warm-signal [class~="bg-neutral-200"],
body.gempixel-804-warm-signal [class~="bg-neutral-200/20"] {
    background-color: var(--tsw-surface-soft) !important;
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal [class~="bg-neutral-300"] {
    background-color: #e8e3da !important;
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal [class~="text-neutral-400"] {
    color: var(--tsw-muted) !important;
}

body.gempixel-804-warm-signal [class~="border-neutral-200"],
body.gempixel-804-warm-signal [class~="border-neutral-600/50"] {
    border-color: var(--tsw-border) !important;
}

body.gempixel-804-warm-signal a[class~="bg-black"],
body.gempixel-804-warm-signal button[class~="bg-black"],
body.gempixel-804-warm-signal input[class~="bg-black"],
body.gempixel-804-warm-signal [role="button"][class~="bg-black"],
body.gempixel-804-warm-signal a[class~="dark:bg-white"],
body.gempixel-804-warm-signal button[class~="dark:bg-white"],
body.gempixel-804-warm-signal input[class~="dark:bg-white"],
body.gempixel-804-warm-signal [role="button"][class~="dark:bg-white"] {
    border-color: var(--tsw-orange-action) !important;
    background-color: var(--tsw-orange-action) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(181, 71, 8, .14);
}

body.gempixel-804-warm-signal a[class~="bg-black"]:hover,
body.gempixel-804-warm-signal a[class~="bg-black"]:focus-visible,
body.gempixel-804-warm-signal button[class~="bg-black"]:hover,
body.gempixel-804-warm-signal button[class~="bg-black"]:focus-visible,
body.gempixel-804-warm-signal input[class~="bg-black"]:hover,
body.gempixel-804-warm-signal input[class~="bg-black"]:focus-visible,
body.gempixel-804-warm-signal [role="button"][class~="bg-black"]:hover,
body.gempixel-804-warm-signal [role="button"][class~="bg-black"]:focus-visible,
body.gempixel-804-warm-signal a[class~="dark:bg-white"]:hover,
body.gempixel-804-warm-signal a[class~="dark:bg-white"]:focus-visible,
body.gempixel-804-warm-signal button[class~="dark:bg-white"]:hover,
body.gempixel-804-warm-signal button[class~="dark:bg-white"]:focus-visible,
body.gempixel-804-warm-signal input[class~="dark:bg-white"]:hover,
body.gempixel-804-warm-signal input[class~="dark:bg-white"]:focus-visible,
body.gempixel-804-warm-signal [role="button"][class~="dark:bg-white"]:hover,
body.gempixel-804-warm-signal [role="button"][class~="dark:bg-white"]:focus-visible {
    border-color: var(--tsw-orange-dark) !important;
    background-color: var(--tsw-orange-dark) !important;
    color: #ffffff !important;
}

/* DESIGN-004: keep the large public heroes light-first. Charcoal remains
 * reserved for compact CTA/footer moments, so the main viewing area does not
 * recreate the high-contrast navy/purple treatment being retired. */
body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel,
body.gempixel-804-warm-signal .g804-pricing-hero {
    border-color: rgba(47, 111, 143, .2) !important;
    background:
        radial-gradient(circle at 86% 12%, rgba(244, 129, 32, .16), transparent 34%),
        linear-gradient(135deg, var(--tsw-info-soft), var(--tsw-orange-soft)) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel h1,
body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel h2,
body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel h3,
body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel p,
body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel span {
    color: inherit !important;
}

body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel > div > div {
    border-color: rgba(47, 111, 143, .22) !important;
    background: rgba(255, 255, 255, .76) !important;
    box-shadow: 0 18px 42px rgba(31, 41, 55, .1) !important;
}

body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel [class*="bg-black/"] {
    background: rgba(31, 41, 55, .06) !important;
}

body.gempixel-804-warm-signal .ts-warm-home .ts-warm-hero-panel [class*="bg-emerald"] {
    color: var(--tsw-teal-dark) !important;
}

/* Keep the domain selector aligned with the light URL bar. A legacy
 * dark:bg-neutral-950 utility sets background-color later than the initial
 * form normalization, so both background properties are restated here. */
body.gempixel-804-warm-signal .ts-warm-home form[data-tailwind-shortener] select,
body.gempixel-804-warm-signal .ts-warm-home .ts-domain-select {
    background: var(--tsw-surface) !important;
    background-color: var(--tsw-surface) !important;
    border-color: var(--tsw-border) !important;
    color: var(--tsw-ink) !important;
    color-scheme: light;
}

body.gempixel-804-warm-signal .ts-warm-home form[data-tailwind-shortener] select option,
body.gempixel-804-warm-signal .ts-warm-home .ts-domain-select option {
    background: var(--tsw-surface) !important;
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero::before {
    background-image:
        linear-gradient(rgba(47, 111, 143, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 129, 32, .08) 1px, transparent 1px) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero h1 {
    color: var(--tsw-ink) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero > p:first-child {
    color: var(--tsw-orange-action) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero > p:not(:first-child) {
    color: var(--tsw-body) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero [role="group"] {
    border-color: rgba(47, 111, 143, .24) !important;
    background: rgba(255, 255, 255, .72) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero [data-tailwind-cycle][aria-pressed="false"] {
    color: var(--tsw-steel-dark) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero [data-tailwind-cycle][aria-pressed="false"]:hover,
body.gempixel-804-warm-signal .g804-pricing-hero [data-tailwind-cycle][aria-pressed="false"]:focus {
    background: var(--tsw-orange-soft) !important;
    color: var(--tsw-orange-action) !important;
}

body.gempixel-804-warm-signal .g804-pricing-hero p[class*="text-emerald"] {
    color: var(--tsw-teal) !important;
}

/* Narrow screens: keep the Tailwind hero and pricing copy inside the viewport
 * even when translated strings or inherited utility widths are longer than
 * the available column. */
@media (max-width: 767.98px) {
    body.gempixel-804-warm-signal .ts-warm-home,
    body.gempixel-804-warm-signal .ts-warm-home > div,
    body.gempixel-804-warm-signal .ts-warm-home > div > div,
    body.gempixel-804-warm-signal .g804-pricing-hero {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.gempixel-804-warm-signal .ts-warm-home h1,
    body.gempixel-804-warm-signal .ts-warm-home p,
    body.gempixel-804-warm-signal .g804-pricing-hero h1,
    body.gempixel-804-warm-signal .g804-pricing-hero > p {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }
}