/* ==========================================================================
   SIFRA UI — Production Design Layer  (sifra-ui.css)
   Loaded AFTER each page's inline <style>, so it refines and overrides it.
   Sections:
     1. Tokens            6. Glow & light effects
     2. Base & typography 7. Scroll effects (reveal, scroll-driven)
     3. Readability floor 8. Tables, charts & media (responsive)
     4. Navigation        9. Screen classes: phone → 4K / Smart TV
     5. Buttons & cards  10. Accessibility, motion, print
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

    --ink: #ece9ff;
    --ink-strong: #ffffff;
    --mute: #a59fc9;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --surface: rgba(14, 12, 24, 0.72);

    --glow-a: color-mix(in srgb, var(--a, #6ff3e4) 45%, transparent);
    --glow-a-soft: color-mix(in srgb, var(--a, #6ff3e4) 16%, transparent);

    /* Fluid type scale (min @ 320px → max @ ~1600px) */
    --fs-hero: clamp(2.2rem, 1.2rem + 3.1vw, 4.4rem);
    --fs-h2: clamp(1.7rem, 1rem + 2.1vw, 3rem);
    --fs-h3: clamp(1.2rem, 1.02rem + 0.8vw, 1.65rem);
    --fs-lead: clamp(1.02rem, 0.95rem + 0.35vw, 1.28rem);

    --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
    --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
    --header-h: 4.25rem;

    color-scheme: dark;
}


/* 2. BASE & TYPOGRAPHY ----------------------------------------------------- */
html {
    scroll-padding-top: calc(var(--header-h) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-feature-settings: "ss01", "cv11", "kern";
    font-kerning: normal;
    min-height: 100svh;
    overflow-wrap: break-word;
}

::selection {
    background: color-mix(in srgb, var(--a, #6ff3e4) 32%, transparent);
    color: #ffffff;
}

h1, h2, h3, h4,
.h-display, .h-display-hero, .h-display-section {
    text-wrap: balance;
    font-optical-sizing: auto;
}

p, li, dd, blockquote {
    text-wrap: pretty;
}

.h-display-hero {
    font-size: var(--fs-hero) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.048em !important;
    font-weight: 700;
}

.h-display-hero .block {
    letter-spacing: -0.02em;
}

.h-display-section {
    font-size: var(--fs-h2) !important;
    line-height: 1.06 !important;
}

/* Section headings: the HTML uses .h-display text-3xl sm:text-5xl — make it fluid */
section h2.h-display {
    font-size: var(--fs-h2);
    line-height: 1.07;
    letter-spacing: -0.042em;
}

section h3.h-display,
section h3.font-display {
    letter-spacing: -0.025em;
    line-height: 1.2;
}

/* Lead paragraphs directly under section headings */
section h2 + p.text-mute,
section h2 + p.text-lg,
.h-display-hero + p {
    font-size: var(--fs-lead);
    line-height: 1.65;
    color: var(--mute);
}

/* Numbers line up in stats, prices, tables and terminals */
.font-mono, table, [data-to], #stats, .tabular {
    font-variant-numeric: tabular-nums;
}

code, kbd, pre, .font-mono {
    font-feature-settings: "liga" 0, "calt" 1;
}

/* Gradient text renders a touch heavier so it doesn't look washed out */
.text-gradient, .text-gradient-hero, .text-gradient-cyan,
.text-gradient-pink, .text-gradient-amber, .text-gradient-nvidia {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-bottom: 0.04em;
}

/* Flowing light inside accent gradient words */
.text-gradient-cyan {
    background-image: linear-gradient(110deg, #ffffff 0%, var(--a, #6ff3e4) 28%, #00d4ff 50%, var(--a, #6ff3e4) 72%, #ffffff 100%) !important;
}

.text-gradient-pink {
    background-image: linear-gradient(110deg, #ffffff 0%, #ff7eb3 30%, var(--b, #ff4d94) 55%, #ff7eb3 80%, #ffffff 100%) !important;
}


/* Long strings (emails, hashes, URLs) never push the layout sideways */
a[href^="mailto:"], .break-anywhere {
    overflow-wrap: anywhere;
}

pre {
    overflow-x: auto;
    max-width: 100%;
}

/* 3. READABILITY FLOOR ----------------------------------------------------- */
/* Pixel-locked micro text (text-[9px], [10px], [11px]) can't scale on large
   screens and is too small on phones. Re-base it on rem with a legible floor. */
.text-\[8px\],
.text-\[9px\]  { font-size: max(10px, 0.64rem) !important; line-height: 1.45; }
.text-\[10px\] { font-size: max(10.5px, 0.68rem) !important; line-height: 1.5; }
.text-\[11px\] { font-size: max(11.5px, 0.74rem) !important; line-height: 1.5; }
.text-\[12px\] { font-size: max(12px, 0.78rem) !important; }
.text-\[13px\] { font-size: max(13px, 0.84rem) !important; }

/* 4. NAVIGATION ------------------------------------------------------------ */
#mainHeader {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

#mainHeader:not(.scrolled) {
    background: linear-gradient(180deg, rgba(7, 6, 13, 0.55), rgba(7, 6, 13, 0));
}

#mainHeader.scrolled {
    background: rgba(7, 6, 13, 0.72) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -20px rgba(0, 0, 0, 0.8) !important;
}

/* Apple-style hairline underline that draws in from the centre */
.top-nav-link {
    position: relative;
    padding-block: 0.35rem;
    transition: color 0.25s var(--ease-out);
}

.top-nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--a, #6ff3e4), transparent);
    box-shadow: 0 0 10px var(--glow-a);
    transition: left 0.35s var(--ease-out), right 0.35s var(--ease-out);
}

.top-nav-link:hover::after,
.top-nav-link:focus-visible::after,
.top-nav-link[aria-current="page"]::after {
    left: 0;
    right: 0;
}

/* Policies dropdown also opens for keyboard / D-pad users */
#legalNavDropdown:focus-within > div {
    display: block;
}

#legalNavDropdown > div > div {
    animation: sxMenuIn 0.28s var(--ease-out);
    transform-origin: top center;
}

@keyframes sxMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* 5. BUTTONS & CARDS ------------------------------------------------------- */
.btn {
    min-height: 2.75rem;
    letter-spacing: -0.012em;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    /* --sx-mx/--sx-my are set by the magnetic hover in sifra-ui.js */
    translate: var(--sx-mx, 0px) var(--sx-my, 0px);
    transition: transform 0.3s var(--ease-out), translate 0.4s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

.btn-main {
    background: linear-gradient(135deg, var(--a, #6ff3e4) 0%, #00d4ff 55%, #9aa8ff 100%);
    background-size: 160% 160%;
    background-position: 0% 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 10px 30px -10px var(--glow-a), 0 0 22px -6px var(--glow-a) !important;
}

.btn-main:hover {
    background-position: 100% 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 18px 44px -12px var(--glow-a), 0 0 40px -6px var(--glow-a) !important;
}

.btn-ghost:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--a, #6ff3e4) 45%, transparent) inset, 0 10px 30px -14px var(--glow-a) !important;
}

.btn:active {
    transform: scale(0.97) !important;
    transition-duration: 0.12s !important;
}

/* Cards: tighter radius rhythm, deeper layered shadow, smoother lift */
.glow-card,
.glass-card {
    isolation: isolate;
}

.glow-card:hover {
    transform: translateY(-6px) !important;
}

/* 6. GLOW & LIGHT EFFECTS -------------------------------------------------- */
/* Cursor-tracked border light (NVIDIA-style). sifra-ui.js sets --mx/--my on
   .glow-card, .glass, .glass-card and .border-beam-card. */
.glow-card:hover::after,
.glass-card:hover::after,
.sx-spot:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--a, #6ff3e4) 85%, white), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    z-index: 2;
    animation: sxFadeIn 0.35s var(--ease-out);
}

@keyframes sxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.glass-card,
.sx-spot {
    position: relative;
}

/* Hero light: a soft aurora sitting behind the headline */
.sx-hero {
    position: relative;
}

.sx-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 38%;
    width: min(1100px, 120vw);
    aspect-ratio: 2 / 1;
    translate: -50% -50%;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(closest-side at 30% 50%, color-mix(in srgb, var(--a, #6ff3e4) 18%, transparent), transparent),
        radial-gradient(closest-side at 72% 55%, color-mix(in srgb, var(--b, #ff4d94) 12%, transparent), transparent);
    animation: sxAurora 18s var(--ease-io) infinite alternate;
    will-change: transform;
}

@keyframes sxAurora {
    0%   { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.15) rotate(8deg); }
}



/* Glowing hairline that flows across section boundaries */
.sx-divider {
    position: relative;
    height: 1px;
    max-width: 72rem;
    margin-inline: auto;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
    overflow: hidden;
}

.sx-divider::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, var(--a, #6ff3e4), transparent);
    box-shadow: 0 0 12px var(--a, #6ff3e4);
    animation: sxBeamFlow 6s var(--ease-io) infinite;
}

@keyframes sxBeamFlow {
    from { transform: translateX(-100%); }
    to   { transform: translateX(400%); }
}

/* Marquee fades out at the edges instead of hard-clipping */
div:has(> .marquee) {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee:hover {
    animation-play-state: paused;
}

/* Badges get a breathing glow */
.badge-glow {
    box-shadow: 0 0 22px -6px var(--glow-a);
}

/* 7. SCROLL EFFECTS -------------------------------------------------------- */
/* Apple-style reveal: rise + un-blur, staggered via --sx-d (set in JS) */
.reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
    transition:
        opacity 0.9s var(--ease-out) var(--sx-d, 0s),
        transform 1.1s var(--ease-out) var(--sx-d, 0s) !important;
}

/* Elements auto-tagged by sifra-ui.js (only ones that start below the fold) */
.sx-pre {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

.sx-in {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.9s var(--ease-out) var(--sx-d, 0s),
        transform 1s var(--ease-out) var(--sx-d, 0s);
}

/* Hero content eases back and fades as you scroll past it (driven by JS var) */
.sx-hero-content {
    transform-origin: 50% 0%;
    will-change: transform, opacity;
}

/* Progressive enhancement: native scroll-driven animations (Chromium 115+) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .sx-parallax {
            animation: sxParallax linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }

        @keyframes sxParallax {
            from { transform: translate3d(0, 6%, 0); }
            to   { transform: translate3d(0, -6%, 0); }
        }

    }
}

/* Scroll progress bar: thinner, crisper */
#prog {
    height: 2px !important;
    transform-origin: 0 50%;
}

/* 8. TABLES, CHARTS & MEDIA ------------------------------------------------ */
img, video, canvas, svg, iframe, embed, object {
    max-width: 100%;
}

img, video {
    height: auto;
}

/* Every horizontally scrolling region gets edge fades that show "more →" */
.sx-scroll-x {
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    max-width: 100%;
}

.sx-scroll-x[data-sx-edge~="right"] {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.sx-scroll-x[data-sx-edge~="left"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px);
    mask-image: linear-gradient(90deg, transparent, #000 48px);
}

.sx-scroll-x[data-sx-edge~="left"][data-sx-edge~="right"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Swipe hint chip shown once on touch screens for wide tables */
.sx-swipe-hint {
    position: sticky;
    left: 100%;
    float: right;
    margin: 0.5rem 0.5rem -2.25rem 0;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font: 600 max(10.5px, 0.68rem)/1 ui-monospace, Menlo, monospace;
    color: var(--a, #6ff3e4);
    background: rgba(7, 6, 13, 0.85);
    border: 1px solid color-mix(in srgb, var(--a, #6ff3e4) 35%, transparent);
    pointer-events: none;
    animation: sxNudge 1.6s var(--ease-io) 3;
    transition: opacity 0.4s ease;
}

.sx-swiped .sx-swipe-hint {
    opacity: 0;
}

@keyframes sxNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-6px); }
}

/* Tables: readable rhythm, sticky header row, row hover light */
.table-responsive-container table thead th,
.sx-scroll-x table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #0e0c18;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

table th, table td {
    vertical-align: top;
}

table tbody tr {
    transition: background-color 0.25s ease;
}

table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.035);
}

/* Bar charts grow up from the baseline when they scroll into view */
.sx-chart > * > div[style*="height"] {
    transform-origin: 50% 100%;
}

.sx-chart.sx-pre > * > div[style*="height"] {
    transform: scaleY(0);
}

.sx-chart.sx-in > * > div[style*="height"] {
    transform: scaleY(1);
    transition: transform 0.9s var(--ease-out);
}

.bar > i,
.benchmark-bar-fill {
    box-shadow: 0 0 14px -2px var(--glow-a);
}

/* 9. SCREEN CLASSES -------------------------------------------------------- */

/* Very small phones (iPhone SE / Galaxy Fold folded: 280–374px) */
@media (max-width: 374px) {
    :root { --gutter: 0.875rem; }

    section.px-4, section.px-5, section.px-6, footer.px-5, main.px-5 {
        padding-left: var(--gutter) !important;
        padding-right: var(--gutter) !important;
    }
    .glow-card.p-6, .glass.p-6, .glow-card.p-8, .glass.p-8 { padding: 1.1rem !important; }
    .rounded-3xl { border-radius: 1.25rem !important; }
    .gap-14 { gap: 2.25rem !important; }
    .btn { padding-left: 1rem !important; padding-right: 1rem !important; font-size: 0.9rem; }
    .grid-cols-2 > * { min-width: 0; }
}

/* Phones */
@media (max-width: 639px) {
    /* Section rhythm: py-28 (7rem) is too tall on phones */
    #landingView > section.py-28,
    #landingView > section.py-24,
    #landingView > section.py-20 {
        padding-top: clamp(3.75rem, 14vw, 5rem) !important;
        padding-bottom: clamp(3.75rem, 14vw, 5rem) !important;
    }

    .glow-card.p-8, .glass.p-8 { padding: 1.4rem !important; }


    .glow-card:hover { transform: none !important; }
}

/* Short landscape screens (phones turned sideways, small laptops) */
@media (max-height: 540px) and (orientation: landscape) {
    .min-h-\[100svh\], .min-h-screen {
        min-height: auto !important;
        padding-top: 6rem !important;
        padding-bottom: 3rem !important;
    }

    #mobileDrawer { padding-top: 1rem !important; }
}

/* Notched devices in landscape */
@supports (padding: max(0px)) {
    main, footer {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* Large desktops 1680–2559px */
@media (min-width: 1680px) and (max-width: 2559px) {
    .max-w-6xl { max-width: 80rem !important; }
    .max-w-7xl { max-width: 90rem !important; }
}

/* 1440p / ultra-wide / 2K TVs */
@media (min-width: 2560px) {
    .max-w-7xl { max-width: 1960px !important; }
    .sx-hero::before { width: 1600px; }
}

/* 4K monitors and Smart TVs at native resolution */
@media (min-width: 3840px) {
    .max-w-7xl { max-width: 2900px !important; }
}

/* 10-foot UI: Smart TVs, consoles and big screens driven by a remote/D-pad.
   (pointer: coarse + hover: none at a wide viewport = TV-class device) */
@media (min-width: 1200px) and (hover: none) and (pointer: coarse) {
    html { font-size: clamp(18px, 1.15vw, 34px) !important; }

    a, button, [role="button"], [tabindex]:not([tabindex="-1"]) {
        scroll-margin: 15vh;
    }

    :focus-visible {
        outline-width: 3px !important;
        outline-offset: 5px !important;
        transform: scale(1.03);
        transition: transform 0.2s var(--ease-out);
    }

    /* Overscan-safe margins (TVs crop ~2.5–5% of the edges) */
    body { padding-left: 2.5vw; padding-right: 2.5vw; }
    #mainHeader nav { padding-left: 3vw !important; padding-right: 3vw !important; }

    #bg, #stage { opacity: 0.6; }
}

/* Touch devices: no sticky hover states, no magnetic offsets */
@media (hover: none) {
    .glow-card:hover, .glass:hover, .border-beam-card:hover, .btn:hover:not(:active) {
        transform: none !important;
    }

    .glow-card::after, .glass-card::after, .sx-spot::after { display: none; }

    .btn { translate: none; }
}

/* 10. ACCESSIBILITY, MOTION, PRINT ----------------------------------------- */
/* Focus ring follows the element's own shape (the old rule forced a 10px radius) */
:focus-visible {
    border-radius: revert !important;
    outline: 2px solid var(--a, #6ff3e4) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--a, #6ff3e4) 18%, transparent) !important;
}

:focus:not(:focus-visible) {
    outline: none;
}

.sx-skip {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: var(--a, #6ff3e4);
    color: #07060d;
    font-weight: 700;
    transform: translateY(-200%);
    transition: transform 0.25s var(--ease-out);
}

.sx-skip:focus {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .sx-pre, .sx-in, .sx-hero-content {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .sx-hero::before, .text-gradient-cyan, .text-gradient-pink,
    .badge-glow, .sx-divider::after, .marquee {
        animation: none !important;
    }

    .btn { translate: none !important; }

}

@media (prefers-contrast: more) {
    :root { --mute: #cfcae8; --line: rgba(255, 255, 255, 0.22); }
    .glass, .glow-card, .glass-card { border-color: rgba(255, 255, 255, 0.3) !important; }
}

@media (forced-colors: active) {
    .text-gradient, .text-gradient-hero, .text-gradient-cyan,
    .text-gradient-pink, .text-gradient-amber, .text-gradient-nvidia {
        -webkit-text-fill-color: CanvasText;
        background: none !important;
    }
}

@media print {
    #bg, #stage, #boot, #prog, #themes, #mainHeader, .ambient-bloom,
    .grain::after, body::before, .sx-hero::before, .marquee { display: none !important; }

    body { background: #fff !important; color: #000 !important; }

    .reveal, .sx-pre { opacity: 1 !important; transform: none !important; filter: none !important; }

    .glass, .glow-card, .glass-card {
        background: #fff !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        backdrop-filter: none !important;
    }

    .text-gradient, .text-gradient-cyan, .text-gradient-pink, .text-gradient-amber {
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }
}

/* 11. LIVE BACKGROUND FALLBACK -------------------------------------------- */
/* Painted instantly by CSS, so the page never looks empty while the WebGL
   background boots; the canvas draws on top of it once ready. */
#bg {
    background:
        radial-gradient(1200px 700px at 78% 18%, color-mix(in srgb, var(--a, #6ff3e4) 7%, transparent), transparent 65%),
        radial-gradient(900px 600px at 12% 85%, color-mix(in srgb, var(--b, #ff4d94) 5%, transparent), transparent 60%),
        var(--bg, #07060d);
}

#boot { display: none !important; }

/* 12. FULLSCREEN STUDIO ---------------------------------------------------- */
html.ws-fullscreen-open,
html.ws-fullscreen-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* <main> is its own stacking context (z-10); lift it above the fixed header */
html.ws-fullscreen-open main {
    z-index: 45 !important;
}

html.ws-fullscreen-open #mainHeader,
html.ws-fullscreen-open #themes,
html.ws-fullscreen-open #prog,
html.ws-fullscreen-open .sx-skip {
    display: none !important;
}

#workspaceCard.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 45 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    filter: none !important;
    display: flex !important;
    flex-direction: column;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background-color: rgba(7, 6, 13, 0.97) !important;
    backdrop-filter: blur(30px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(160%) !important;
    animation: wsFullIn 0.42s var(--ease-out);
}

@keyframes wsFullIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#workspaceCard.is-fullscreen::after { display: none; }

#workspaceCard.is-fullscreen > * { flex-shrink: 0; }

/* The chat + telemetry grid takes all remaining height */
#workspaceCard.is-fullscreen > .grid {
    flex: 1 1 auto;
    min-height: 0;
}

#workspaceCard.is-fullscreen #wsChatCol {
    min-height: 0 !important;
    height: 100%;
}

#workspaceCard.is-fullscreen #chat {
    max-height: none !important;
    min-height: 0;
    flex: 1 1 auto;
}

#workspaceCard.is-fullscreen #wsTeleCol {
    max-height: 100%;
    overflow-y: auto;
}

@media (min-width: 1024px) {
    #workspaceCard.is-fullscreen > .grid {
        grid-template-columns: 1fr clamp(310px, 24vw, 420px) !important;
    }
}

@media (max-width: 1023px) {
    #workspaceCard.is-fullscreen #wsTeleCol.ws-mobile-active {
        height: 100%;
    }
}

.ws-exit-full {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.75rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-strong);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ws-exit-full:hover {
    color: #fff;
    border-color: var(--a, #6ff3e4);
    background: color-mix(in srgb, var(--a, #6ff3e4) 12%, transparent);
}

#workspaceCard.is-fullscreen .ws-exit-full { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
    #workspaceCard.is-fullscreen { animation: none; }
}

/* 13. BILLING PERIOD TOGGLE (pricing page) -------------------------------- */
[data-billing-show][hidden] { display: none !important; }

[data-billing-toggle] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

[data-billing-toggle] button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.5rem 1.15rem;
}

.billing-save {
    font-size: max(10.5px, 0.66rem);
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    color: var(--a, #6ff3e4);
    background: color-mix(in srgb, var(--a, #6ff3e4) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--a, #6ff3e4) 35%, transparent);
}

[data-billing-toggle] button[aria-pressed="true"] .billing-save {
    color: #07060d;
    background: var(--a, #6ff3e4);
}

[data-billing-show] { animation: sxPriceIn 0.35s var(--ease-out); }

@keyframes sxPriceIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* 14. STUDIO TABS, CHAT LAYOUT & TOASTS ----------------------------------- */
/* Browser-style chat tabs (rendered by the workspace script) */
.tabb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.5rem 0.95rem;
    border-radius: 0.7rem 0.7rem 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mute);
    border: 1px solid transparent;
    border-bottom: 0;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.tabb:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.04);
}

.tabb[aria-selected="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line-strong);
    box-shadow: inset 0 2px 0 var(--a, #6ff3e4);
}

#tabs {
    flex-wrap: nowrap;
    min-width: 0;
}

#tabs > div { flex-shrink: 0; }

/* Grid children must be allowed to shrink, or wide content (code, chips)
   pushes the chat column past the card edge on phones */
#workspaceCard,
#workspaceCard > .grid > *,
#wsChatCol,
#chat {
    min-width: 0;
}

#chat pre,
#chat code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#chat .bub {
    max-width: min(85%, 46rem);
}

/* Toast notifications */
.toast {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    align-self: flex-end;
    max-width: min(92vw, 380px);
    padding: 0.7rem 1rem;
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    background: rgba(14, 12, 24, 0.92);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8), 0 0 24px -8px var(--glow-a);
    pointer-events: auto;
    animation: sxToastIn 0.38s var(--ease-out);
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}

@keyframes sxToastIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

#toasts {
    z-index: 80 !important;
    right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
}

@media (max-width: 639px) {
    #toasts {
        left: 1rem;
        right: 1rem !important;
        top: auto !important;
        bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        align-items: center;
    }

    .toast { align-self: center; }
}

/* 15. SCROLL PERFORMANCE --------------------------------------------------- */
/* Live canvases repaint every frame; a backdrop blur over them must be
   recomputed every frame for every visible card. Cards get a richer solid
   tint instead (visually near-identical on this dark palette). Blur is kept
   only on the header, menus, drawer, modals and toasts. */
.glass,
.glow-card,
.glass-card,
.bub,
.table-responsive-container,
.border-beam-inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.glass, .glow-card {
    background-color: rgba(15, 13, 26, 0.86) !important;
}

.glass-card { background-color: rgba(15, 13, 26, 0.86); }
.border-beam-inner { background: rgba(14, 12, 24, 0.94) !important; }
.bub { background: rgba(18, 16, 30, 0.92) !important; }
.table-responsive-container { background: rgba(12, 10, 20, 0.9) !important; }

/* Menus/dialogs that sit over content keep their frosted glass */
#mainHeader .glass,
#legalNavDropdown .glass,
[role="dialog"] .glass,
#mobileDrawer {
    backdrop-filter: blur(24px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
}

/* Ambient glow spots: soft radial gradients instead of 110–130px filter blurs */
.ambient-bloom {
    filter: none !important;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--a, #6ff3e4) 16%, transparent), transparent) !important;
    will-change: transform;
}

.ambient-bloom.bg-pink\/10,
.ambient-bloom[class*="bg-pink"] {
    background: radial-gradient(closest-side, color-mix(in srgb, var(--b, #ff4d94) 12%, transparent), transparent) !important;
}

/* The old full-screen cursor glow repainted the whole viewport on every mouse
   move; it is replaced by #sxCursorGlow, which moves on the GPU. */
body::before { display: none !important; }

#sxCursorGlow {
    position: fixed;
    left: 0;
    top: 0;
    width: 1400px;
    height: 1400px;
    margin: -700px 0 0 -700px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--a, #6ff3e4) 8%, transparent), transparent);
    transform: translate3d(50vw, 30vh, 0);
    will-change: transform;
    contain: strict;
}

/* Rendering work is skipped for sections far off-screen */
#landingView > #why,
#landingView > #features,
#landingView > #voice,
#landingView > #use,
#landingView > #testimonials,
#landingView > #faq,
body > footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

/* Promote the always-moving canvases to their own GPU layers */
#bg, #stage { transform: translateZ(0); }