/*
 * GEMP-804 Design Control - Tailwind pricing palette
 *
 * This is a color-only adaptation of the isolated 8.0.4 pricing screen.
 * The existing markup, plan data, checkout routes, trial behavior, and
 * responsive layout remain unchanged.
 */

body.gempixel-802-tailwind {
    --g804-navy: #20252b;
    --g804-navy-surface: #2b3138;
    --g804-violet: #f48120;
    --g804-violet-dark: #b54708;
    --g804-action-hover: #923a06;
    --g804-blue: #2f6f8f;
    --g804-lavender: #ffb06d;
    --g804-sky: #8db8cc;
    --g804-page: #fbfaf7;
    --g804-surface: #ffffff;
    --g804-ink: #1f2937;
    --g804-body: #475569;
    --g804-muted: #64748b;
    --g804-border: #e7e5e0;
    background: var(--g804-page) !important;
    color: var(--g804-body) !important;
}

/* Keep the Tailwind structure, but give the public shell the TheShortener
 * charcoal header and footer treatment. */
body.gempixel-802-tailwind > header {
    border-color: rgba(255, 176, 109, .24) !important;
    background: rgba(32, 37, 43, .97) !important;
    color: #fff !important;
}

body.gempixel-802-tailwind > header a,
body.gempixel-802-tailwind > header summary {
    color: #f3efe8 !important;
}

body.gempixel-802-tailwind > header a:hover,
body.gempixel-802-tailwind > header a:focus,
body.gempixel-802-tailwind > header summary:hover,
body.gempixel-802-tailwind > header summary:focus {
    color: #fff !important;
}

body.gempixel-802-tailwind > header a[class*="bg-black"],
body.gempixel-802-tailwind > header a[class*="bg-white"] {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--g804-violet-dark), var(--g804-violet)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(181, 71, 8, .2);
}

body.gempixel-802-tailwind > header details nav {
    border-color: rgba(255, 176, 109, .24) !important;
    background: var(--g804-navy-surface) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

body.gempixel-802-tailwind > header details nav a:hover,
body.gempixel-802-tailwind > header details nav a:focus {
    background: rgba(255, 176, 109, .12) !important;
}

body.gempixel-802-tailwind > footer {
    border-color: rgba(255, 176, 109, .24) !important;
    background: linear-gradient(135deg, var(--g804-navy), var(--g804-navy-surface)) !important;
    color: #f3efe8 !important;
}

body.gempixel-802-tailwind > footer a,
body.gempixel-802-tailwind > footer p,
body.gempixel-802-tailwind > footer h2 {
    color: #d8dee5 !important;
}

body.gempixel-802-tailwind > footer a:hover,
body.gempixel-802-tailwind > footer a:focus {
    color: var(--g804-lavender) !important;
}

/* Pricing hero */
body.gempixel-802-tailwind .g804-pricing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(255, 176, 109, .24) !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(244, 129, 32, .24), transparent 34%),
        radial-gradient(circle at 84% 12%, rgba(47, 111, 143, .18), transparent 32%),
        linear-gradient(145deg, var(--g804-navy), var(--g804-navy-surface)) !important;
    color: #fff !important;
}

body.gempixel-802-tailwind .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(141, 184, 204, .07) 1px, transparent 1px);
    background-size: 36px 36px;
    content: "";
    pointer-events: none;
}

body.gempixel-802-tailwind .g804-pricing-hero h1 {
    color: #fff !important;
}

body.gempixel-802-tailwind .g804-pricing-hero > p {
    color: #f3efe8 !important;
}

body.gempixel-802-tailwind .g804-pricing-hero [role="group"] {
    border-color: rgba(255, 176, 109, .36) !important;
    background: rgba(32, 37, 43, .7) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

body.gempixel-802-tailwind .g804-pricing-hero [data-tailwind-cycle][aria-pressed="true"] {
    background: linear-gradient(135deg, var(--g804-violet-dark), var(--g804-violet)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(181, 71, 8, .2);
}

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

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

body.gempixel-802-tailwind .g804-pricing-hero p[class*="text-emerald"] {
    color: #0f766e !important;
}

/* Plan grid: charcoal framing, production-style light cards, orange highlight. */
body.gempixel-802-tailwind .g804-pricing-plans {
    border-color: rgba(255, 176, 109, .24) !important;
    background: linear-gradient(to bottom, var(--g804-navy-surface) 0 76px, var(--g804-page) 76px 100%) !important;
    color: var(--g804-body) !important;
}

body.gempixel-802-tailwind .g804-pricing-grid {
    border-color: rgba(244, 129, 32, .32) !important;
    background: rgba(255, 255, 255, .94) !important;
}

body.gempixel-802-tailwind .g804-pricing-grid > article {
    border-color: var(--g804-border) !important;
    background: var(--g804-surface) !important;
    color: var(--g804-ink) !important;
}

body.gempixel-802-tailwind .g804-pricing-grid > article.g804-pricing-card-popular {
    background: linear-gradient(180deg, #fff1e8 0%, #fff 58%) !important;
    box-shadow: inset 0 0 0 2px var(--g804-violet), 0 16px 36px rgba(181, 71, 8, .16);
}

body.gempixel-802-tailwind .g804-pricing-card > p:first-of-type {
    color: var(--g804-violet-dark) !important;
}

body.gempixel-802-tailwind .g804-pricing-card [data-tailwind-price] {
    color: var(--g804-navy) !important;
}

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

body.gempixel-802-tailwind .g804-pricing-card ul {
    border-color: var(--g804-border) !important;
    color: var(--g804-body) !important;
}

body.gempixel-802-tailwind .g804-pricing-card ul > li > span:first-child {
    color: var(--g804-body) !important;
}

body.gempixel-802-tailwind .g804-pricing-card ul > li > span:last-child {
    color: var(--g804-navy) !important;
}

body.gempixel-802-tailwind .g804-pricing-card-popular > span {
    background: linear-gradient(135deg, var(--g804-violet-dark), var(--g804-violet)) !important;
    color: #fff !important;
}

body.gempixel-802-tailwind .g804-pricing-actions a:not([data-tailwind-trial]) {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--g804-violet-dark), var(--g804-violet)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(181, 71, 8, .18);
}

body.gempixel-802-tailwind .g804-pricing-actions a:not([data-tailwind-trial]):hover,
body.gempixel-802-tailwind .g804-pricing-actions a:not([data-tailwind-trial]):focus {
    background: linear-gradient(135deg, var(--g804-action-hover), var(--g804-violet-dark)) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

body.gempixel-802-tailwind .g804-pricing-actions a[data-tailwind-trial] {
    border-color: rgba(181, 71, 8, .5) !important;
    background: #fff !important;
    color: var(--g804-violet-dark) !important;
}

body.gempixel-802-tailwind .g804-pricing-actions a[data-tailwind-trial]:hover,
body.gempixel-802-tailwind .g804-pricing-actions a[data-tailwind-trial]:focus {
    border-color: var(--g804-violet) !important;
    background: #fff1e8 !important;
    color: var(--g804-violet-dark) !important;
}

body.gempixel-802-tailwind .g804-pricing-actions p {
    color: var(--g804-muted) !important;
}

/* DESIGN-004: light-first Warm Signal pricing hero. Charcoal remains reserved
 * for the compact footer CTA; the public pricing entry surface stays calm. */
body.gempixel-802-tailwind > header {
    border-color: var(--g804-border) !important;
    background: rgba(255, 255, 255, .96) !important;
    color: var(--g804-ink) !important;
}

body.gempixel-802-tailwind > header a,
body.gempixel-802-tailwind > header summary {
    color: var(--g804-ink) !important;
}

body.gempixel-802-tailwind > header a:hover,
body.gempixel-802-tailwind > header a:focus,
body.gempixel-802-tailwind > header summary:hover,
body.gempixel-802-tailwind > header summary:focus {
    color: var(--g804-action) !important;
}

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

body.gempixel-802-tailwind > header details nav a:hover,
body.gempixel-802-tailwind > header details nav a:focus {
    background: var(--g804-orange-soft) !important;
    color: var(--g804-action) !important;
}

body.gempixel-802-tailwind .g804-pricing-hero {
    border-color: var(--g804-border) !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(244, 129, 32, .16), transparent 34%),
        radial-gradient(circle at 84% 12%, rgba(47, 111, 143, .14), transparent 32%),
        linear-gradient(145deg, var(--g804-orange-soft), var(--g804-info-soft)) !important;
    color: var(--g804-ink) !important;
}

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

body.gempixel-802-tailwind .g804-pricing-hero h1,
body.gempixel-802-tailwind .g804-pricing-hero .text-white {
    color: var(--g804-ink) !important;
}

body.gempixel-802-tailwind .g804-pricing-hero > p,
body.gempixel-802-tailwind .g804-pricing-hero .text-white\/70 {
    color: var(--g804-body) !important;
}

body.gempixel-802-tailwind .g804-pricing-hero [role="group"] {
    border-color: rgba(47, 111, 143, .28) !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 10px 28px rgba(31, 41, 55, .08);
}

body.gempixel-802-tailwind .g804-pricing-hero [data-tailwind-cycle][aria-pressed="true"] {
    background: var(--g804-action) !important;
    color: #fff !important;
}

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

body.gempixel-802-tailwind .g804-pricing-hero [data-tailwind-cycle][aria-pressed="false"]:hover,
body.gempixel-802-tailwind .g804-pricing-hero [data-tailwind-cycle][aria-pressed="false"]:focus {
    background: var(--g804-info-soft) !important;
    color: var(--g804-info-dark) !important;
}

body.gempixel-802-tailwind .g804-pricing-plans {
    border-color: var(--g804-border) !important;
    background: linear-gradient(to bottom, var(--g804-info-soft) 0 76px, var(--g804-page) 76px 100%) !important;
}

/* FAQ/details section */
body.gempixel-802-tailwind .g804-pricing-details {
    border-color: var(--g804-border) !important;
    background: #fff !important;
    color: var(--g804-body) !important;
}

body.gempixel-802-tailwind .g804-pricing-details h2 {
    color: var(--g804-ink) !important;
}

body.gempixel-802-tailwind .g804-pricing-details p {
    color: var(--g804-muted) !important;
}

body.gempixel-802-tailwind .g804-pricing-details > div > div:last-child {
    border-color: var(--g804-border) !important;
}

body.gempixel-802-tailwind .g804-pricing-details a[class*="bg-black"],
body.gempixel-802-tailwind .g804-pricing-details a[class*="bg-white"] {
    background: linear-gradient(135deg, var(--g804-violet-dark), var(--g804-violet)) !important;
    color: #fff !important;
}

body.gempixel-802-tailwind .g804-pricing-details details {
    border-color: var(--g804-border) !important;
}

body.gempixel-802-tailwind :focus-visible {
    outline: 3px solid rgba(181, 71, 8, .5) !important;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    body.gempixel-802-tailwind .g804-pricing-actions a {
        transform: none !important;
        transition: none !important;
    }
}