/* ============================================================
   CORTEX — Windows-native agent IDE
   Light (75%): Gray Nurse paper · Heavy Metal ink · Forest Green accent
   Dark  (25%): IDE product windows keep warm-dark chrome (scoped below)
   Redesign: 2026-08 — light surface, instrument-panel windows
   Palette: color-palettes.md (color cube / median cut / material)
   ============================================================ */

:root {
    color-scheme: light;

    /* ── Theme RGB triplets (alpha-composable via rgba(var(--x), a)) ── */
    --cream-rgb: 39, 40, 38;    /* Heavy Metal — hairlines, chips, dim text */
    --pearl-rgb: 15, 13, 12;    /* Cod Gray — headings, chrome text */
    --accent-rgb: 51, 164, 37;  /* Forest Green — glows, CTA halos, selection */

    /* ── Solid surfaces (theme-aware) ── */
    --card-solid: #ffffff;        /* White — cards, panels */
    --card-solid-hi: #fafafa;     /* Alabaster hover */
    --card-deep: #f2f4f2;         /* Gray Nurse wells */
    --cream-solid: #33a425;       /* Forest Green */
    --cream-solid-deep: #496a33;  /* Chalet Green */
    --pearl-solid: #272826;       /* Heavy Metal — headings */
    --hi-text: #436143;           /* Tom Thumb — highlight values */
    --win-tint-rgb: 255, 255, 255; /* white glass tint */
    --gold-rgb: 51, 164, 37;      /* Forest Green — metallics, glows, chrome */
    --green-rgb: 48, 156, 56;     /* Sea Green — status green */
    --green-deep: #496a33;        /* Chalet Green */
    --scrim-rgb: 242, 244, 242;   /* Gray Nurse — stage shades, nav scrim */
    --shadow-rgb: 39, 40, 38;     /* Heavy Metal — tinted drop shadows */
    --on-accent: #ffffff;         /* text on green accent surfaces */

    /* ── Core surface ramp (light paper) ── */
    --ink-950: #f2f4f2;  /* Gray Nurse — page background */
    --ink-900: #f9f9f9;  /* Alabaster — elevated */
    --ink-800: #ffffff;  /* White — surfaces */
    --ink-700: #e3e3e3;  /* Mercury — wells */
    --ink-600: #d2d7d2;  /* deep hairline surface */

    /* ── Text ramp (dark ink on paper) ── */
    --slate-400: #636261; /* Ironside Gray — muted */
    --slate-300: #5c7073; /* Nevada — secondary */
    --slate-100: #272826; /* Heavy Metal — body */
    --white: #272826;     /* Heavy Metal */

    /* ── Single accent: Forest Green ── */
    --azure-500: #33a425; /* Forest Green */
    --azure-400: #309c38; /* Sea Green */
    --azure-600: #496a33; /* Chalet Green */
    --azure-glow: rgba(var(--accent-rgb), 0.10);
    --azure-border: rgba(var(--accent-rgb), 0.28);

    /* ── Status ── */
    --green-500: #309c38; /* Sea Green */
    --red-500: #f7493f;   /* Sunset Orange */

    /* ── Borders ── */
    --hairline: rgba(var(--cream-rgb), 0.10);
    --hairline-hi: rgba(var(--cream-rgb), 0.18);

    /* ── Legacy aliases (kept so 5000+ lines of rules still resolve) ── */
    --obsidian: var(--ink-950);
    --graphite: var(--ink-900);
    --pearl: var(--slate-100);
    --amber-metal: var(--azure-500);
    --amber-bright: var(--azure-400);
    --amber-deep: var(--azure-600);
    --sand: var(--slate-400);

    /* Surfaces */
    --bg: var(--ink-950);
    --bg-elevated: var(--ink-900);
    --bg-surface: var(--ink-800);
    --bg-soft: var(--ink-800);

    /* Accent aliases */
    --gold: var(--azure-500);
    --gold-bright: var(--azure-400);
    --gold-deep: var(--azure-600);

    /* Status (instrument panels) */
    --blue: #258095;        /* Jelly Bean */
    --blue-bright: #a1c8d7; /* Sinbad */
    --blue-deep: #1d6475;   /* deep Jelly Bean */
    --violet: #855c42;      /* Spicy Mix */
    --violet-bright: #e5a584; /* Tonys Pink */
    --green: var(--green-500);
    --green-bright: #7fc775; /* Mantis */

    /* Text */
    --ink: var(--slate-100);
    --muted: var(--slate-400);
    --faint: #838280; /* Friar Gray */

    /* Surfaces / borders */
    --glass: rgba(var(--cream-rgb), 0.03);
    --glass-strong: rgba(var(--cream-rgb), 0.06);
    --glass-border: var(--hairline);
    --glass-border-hi: var(--azure-border);

    /* Layout */
    --radius: 14px;
    --radius-lg: 18px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Fluid type scale ── */
    --text-display: clamp(2.75rem, 5vw + 1rem, 4.5rem);
    --text-h2: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
    --text-h3: clamp(1.125rem, 1.5vw + 0.25rem, 1.375rem);
    --text-body: clamp(0.9375rem, 1vw + 0.25rem, 1.0625rem);
    --text-small: 0.8125rem;
    --text-mono: 0.8125rem;

    /* ── Brand gradient (reserved: logo + one hero moment only) ── */
    --brand-gradient: linear-gradient(135deg, #436143 0%, #33a425 45%, #7fc775 100%);
}

/* ============================================================
   DARK IDE WINDOWS — the 25% dark mix (2026-08-27)
   Page chrome is light; the hero product windows keep the
   warm-dark IDE chrome so the screenshots stay unchanged.
   Same recipe as .proof-stage .pw-win below.
   ============================================================ */
.hs-win {
    color-scheme: dark;

    --cream-rgb: 226, 240, 204;
    --pearl-rgb: 240, 247, 229;
    --accent-rgb: 139, 197, 61;

    --card-solid: #1a1713;
    --card-solid-hi: #1a1713;
    --card-deep: #1a1713;
    --cream-solid: #e2f0cc;
    --cream-solid-deep: #bcd894;
    --pearl-solid: #f0f7e5;
    --hi-text: #e2f0cc;
    --win-tint-rgb: 2, 20, 10;
    --gold-rgb: 139, 197, 61;
    --green-rgb: 78, 201, 120;
    --green-deep: #4ade80;
    --scrim-rgb: 6, 10, 8;
    --shadow-rgb: 0, 0, 0;
    --on-accent: #04180a;

    --ink-950: #011207;
    --ink-900: #021a0d;
    --ink-800: #012f13;

    --slate-400: #9ab189;
    --slate-300: #b9cda6;
    --slate-100: #e2f0cc;
    --white: #f4faec;

    --azure-500: #8bc53d;
    --azure-400: #a5d45f;
    --azure-600: #6da32a;
    --azure-glow: rgba(139, 197, 61, 0.12);
    --azure-border: rgba(139, 197, 61, 0.28);

    --green-500: #22c55e;

    --hairline: rgba(226, 240, 204, 0.08);
    --hairline-hi: rgba(226, 240, 204, 0.14);

    --gold: #8bc53d;
    --gold-bright: #a5d45f;
    --gold-deep: #6da32a;
    --amber-metal: #8bc53d;
    --amber-bright: #a5d45f;
    --amber-deep: #6da32a;

    --blue: #5a9a7a;
    --blue-bright: #7aba9a;
    --blue-deep: #3d7a5a;
    --violet: #4a8a6a;
    --violet-bright: #6aaa8a;
    --green-bright: #4ade80;

    --ink: #e2f0cc;
    --muted: #9ab189;
    --faint: #647d59;

    --glass: rgba(226, 240, 204, 0.03);
    --glass-strong: rgba(226, 240, 204, 0.055);
    --glass-border: rgba(226, 240, 204, 0.08);
    --glass-border-hi: rgba(139, 197, 61, 0.28);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    cursor: default;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}

a:hover {
    color: var(--gold-bright);
}

::selection {
    background: var(--sel-bg, rgba(var(--accent-rgb), 0.25));
    color: var(--sel-fg, #fff);
}

/* ===== CINEMATIC CURSOR GLOW (azure) ===== */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.07), transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: normal;
    transition: opacity 0.5s ease;
    will-change: left, top;
}

/* ===== AMBIENT AURORA ===== */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.aurora::before {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(55vw 55vw at 75% -5%, rgba(var(--accent-rgb), 0.07), transparent 60%),
        radial-gradient(40vw 40vw at 10% 20%, rgba(var(--accent-rgb), 0.04), transparent 60%);
    animation: meshShift 26s ease-in-out infinite alternate;
}

@keyframes meshShift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-2%, 2%) scale(1.06);
    }
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    animation: float 24s var(--ease) infinite alternate;
    will-change: transform;
}

.blob.b1 {
    width: 540px;
    height: 540px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.10), transparent 70%);
}

.blob.b2 {
    width: 480px;
    height: 480px;
    bottom: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06), transparent 70%);
    animation-delay: -8s;
}

.blob.b3 {
    width: 400px;
    height: 400px;
    top: 40%;
    left: 46%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.05), transparent 70%);
    animation-delay: -15s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(46px, -34px) scale(1.14);
    }
}

.grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CINEMATIC LOAD SEQUENCE
   ============================================================ */
@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(34px);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.seq {
    opacity: 0;
    animation: riseIn 1.1s var(--ease-soft) both;
}

/* ============================================================
   NAVBAR — floating liquid-glass pill
   ============================================================ */
.nav-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 0;
    animation: riseIn 1s var(--ease-soft) both;
}

.navbar {
    width: 100%;
    max-width: none;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 clamp(20px, 4vw, 48px);
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.nav-links { margin-left: clamp(28px, 4vw, 64px); }
.nav-right { margin-left: auto; }

.navbar.scrolled {
    background: var(--bg);
    box-shadow: none;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 700;
    font-size: 16px;
    color: var(--pearl-solid);
    letter-spacing: -0.01em;
}

/* Brand lockup: hexagon "C" mark + "Cortex AI IDE" as real text. The mark is
   the user's re-designed hexagon badge (transparent PNG rendered dark), and the
   wordmark is set as actual HTML text in the site's dark ink so it stays crisp
   and readable at every size. The text pairs a bold "Cortex" with a lighter
   "AI IDE" label. */
.brand-mark-img {
    height: 30px;
    width: auto;
    display: block;
    filter: brightness(0) saturate(100%) invert(9%) sepia(4%) saturate(0%) hue-rotate(0deg) brightness(97%) contrast(90%);
    transition: filter 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.brand-text-top {
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -0.02em;
    color: var(--pearl-solid);
}
.brand-text-sub {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--slate-300);
    text-transform: uppercase;
    margin-top: 1px;
}
.brand:hover .brand-mark-img {
    filter: brightness(0) saturate(100%) invert(9%) sepia(4%) saturate(0%) hue-rotate(0deg) brightness(97%) contrast(90%);
    opacity: 0.86;
    transform: translateY(-1px);
}
.footer .brand-mark-img { height: 34px; }
@media (max-width: 640px) { .brand-mark-img { height: 28px; } }

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: var(--on-accent);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.22);
}

.brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    object-fit: contain;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.18);
    transition: transform 0.25s var(--ease, cubic-bezier(0.22,1,0.36,1));
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-links a {
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    transition: all 0.25s var(--ease);
}

.nav-links a:hover {
    color: var(--ink);
    background: var(--glass-strong);
}

/* Sign In link shown only inside the mobile dropdown — on narrow screens
   the nav-right ghost button hides so the pill never wraps or overflows. */
.nav-mobile-auth { display: none; }

.nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--ink);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    padding: 9px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: all 0.25s var(--ease);
}

.btn-ghost:hover {
    color: var(--ink);
    background: var(--glass-strong);
}

.btn-gold {
    background: var(--amber-metal);
    border: 1px solid var(--amber-bright);
    color: var(--obsidian);
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    padding: 10px 20px;
    border-radius: 9px;
    cursor: pointer;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.28);
}

.btn-gold:hover {
    background: var(--amber-bright);
    box-shadow: 0 8px 28px rgba(var(--accent-rgb), 0.38);
    color: var(--obsidian);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--ink);
    font-size: 20px;
    cursor: pointer;
    padding: 6px 10px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    /* Top padding must clear the FIXED navbar (top:16px + ~64px pill) with
       breathing room — the "v2.7 is live" banner used to provide the gap. */
    padding: clamp(140px, 18vh, 200px) 70px clamp(30px, 4vh, 50px);
    text-align: center;
    will-change: transform, opacity;
    overflow: hidden;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 7px 8px 7px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 32px;
}

.pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber-metal);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
    animation: pulse 2.4s ease-in-out infinite;
}

.pill .tag {
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--amber-bright);
    font-weight: 600;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

.hero h1 {
    font-size: clamp(28px, 4.5vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--pearl);
    margin: 0 auto 18px;
    max-width: 800px;
    overflow: visible;
}

.hero h1 .grad {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #258095;
    color: #258095;
    animation: riseIn 1.1s var(--ease-soft) both;
    display: inline-block;
    padding: 8px 8px;
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 300% center;
    }
}

.hero .sub {
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--muted);
    max-width: 600px;
    margin: 0 auto 28px;
    font-weight: 400;
    line-height: 1.5;
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-lg {
    position: relative;
    font-size: 16px;
    padding: 16px 32px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}

.btn-lg.primary {
    background: #f7493f;
    color: #ffffff;
    font-weight: 600;
    box-shadow: none;
    border: none;
}

.btn-lg.primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg);
    transition: left 0.7s var(--ease);
}

.btn-lg.primary:hover::after {
    left: 130%;
}

.btn-lg.primary:hover {
    background: var(--amber-bright);
    box-shadow: 0 10px 36px rgba(var(--accent-rgb), 0.42);
    color: var(--obsidian);
}

.btn-lg.glass {
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    color: var(--ink);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn-lg.glass:hover {
    background: rgba(var(--pearl-rgb), 0.12);
    border-color: var(--glass-border-hi);
}

.hero-meta {
    margin-top: 24px;
    font-size: 13px;
    color: var(--faint);
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   APP SHOWCASE — real screenshot/video with glass frame
   ============================================================ */
.showcase {
    width: 100%;
    margin: 20px auto 0;
    padding: 0px 75px;
    perspective: 1602px;
}

.glass-frame {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    overflow: hidden;
    transform: perspective(1200px) rotateX(4deg) scale(0.94);
    transform-origin: center top;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
    box-shadow:
        0 1px 0 rgba(var(--pearl-rgb), 0.08) inset,
        0 50px 110px rgba(0, 0, 0, 0.65),
        0 0 80px rgba(var(--accent-rgb), 0.28);
    will-change: transform;
}

.frame-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.2);
}

.traffic {
    display: flex;
    gap: 7px;
}

.traffic i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: block;
}

.traffic i:nth-child(1) {
    background: #ff5f57;
}

.traffic i:nth-child(2) {
    background: #febc2e;
}

.traffic i:nth-child(3) {
    background: var(--green-500);
}

.frame-title {
    margin-left: 8px;
    font-size: 12px;
    color: var(--faint);
    font-family: 'JetBrains Mono', monospace;
}

.frame-body-real {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #000;
}

.showcase-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.showcase-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Screenshot gallery */
.showcase-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
    padding: 0 4px;
}

.gallery-item {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-hi);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.gallery-item img {
    width: 100%;
    display: block;
    aspect-ratio: 16/10;
    object-fit: cover;
    background: var(--bg-elevated);
}

.gallery-item span {
    display: block;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--glass-border);
}

@media (max-width: 768px) {
    .showcase-gallery {
        grid-template-columns: 1fr;
    }
}

/* Legacy frame-body for backward compatibility */
.frame-body {
    height: 452px;
    display: grid;
    grid-template-columns: 176px 1fr 268px;
    background:
        radial-gradient(90% 130% at 50% 0%, rgba(var(--accent-rgb), 0.30), transparent 60%),
        rgba(0, 0, 0, 0.28);
    text-align: left;
    font-size: 12px;
}

/* ---- file explorer ---- */
.ide-files {
    border-right: 1px solid var(--glass-border);
    padding: 14px 10px;
    background: rgba(var(--pearl-rgb), 0.014);
}

.ide-files .ttl {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 10px 8px;
}

.ide-files .f {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 7px;
    color: var(--muted);
    white-space: nowrap;
}

.ide-files .f.dir {
    color: #d4d4d8;
}

.ide-files .f.ind {
    padding-left: 22px;
}

.ide-files .f.active {
    background: rgba(var(--accent-rgb), 0.1);
    color: #fff;
}

.ide-files .f .mod {
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.ext {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 8.5px;
    color: #3178c6;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ---- editor ---- */
.ide-editor {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ide-tabs {
    display: flex;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.22);
}

.ide-tab {
    padding: 9px 14px;
    color: var(--muted);
    border-right: 1px solid var(--glass-border);
    display: flex;
    gap: 7px;
    align-items: center;
    white-space: nowrap;
}

.ide-tab.active {
    color: #fff;
    background: rgba(var(--pearl-rgb), 0.03);
    box-shadow: inset 0 -2px 0 var(--gold);
}

.ide-code {
    flex: 1;
    padding: 12px 0;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.75;
    overflow: hidden;
}

.ide-code .ln {
    display: flex;
}

.ide-code .ln .n {
    width: 36px;
    text-align: right;
    padding-right: 14px;
    color: #3f3f46;
    user-select: none;
    flex-shrink: 0;
}

.ide-code .ln .c {
    white-space: pre;
}

.ide-code .ln.add {
    background: rgba(var(--green-rgb), 0.09);
}

.ide-code .ln.add .n {
    color: var(--green-500);
}

.tk-key { color: var(--blue-bright); }
.tk-fn { color: var(--azure-500); }
.tk-str { color: var(--green-bright); }
.tk-var { color: var(--azure-400); }

.caret {
    display: inline-block;
    width: 7px;
    height: 14px;
    background: var(--gold);
    vertical-align: -2px;
    animation: blink 1.05s steps(2) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ---- agent chat panel ---- */
.ide-chat {
    border-left: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    background: rgba(var(--pearl-rgb), 0.014);
}

.ide-chat .head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
}

.ide-chat .head .mdl {
    margin-left: auto;
    font-size: 10px;
    color: var(--gold-bright);
    background: rgba(var(--accent-rgb), 0.30);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 500;
}

.ide-chat .body {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    overflow: hidden;
}

.msg-user {
    align-self: flex-end;
    max-width: 92%;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    color: #fff;
    padding: 8px 11px;
    border-radius: 13px 13px 4px 13px;
}

.step {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    color: var(--muted);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.step.show {
    opacity: 1;
    transform: none;
}

.step .ic {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: rgba(var(--accent-rgb), 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    color: var(--gold-bright);
}

.step .ic.done {
    background: rgba(var(--green-rgb), 0.16);
    color: var(--green-500);
}

.step b {
    color: #fff;
    font-weight: 600;
}

.step code {
    font-family: 'JetBrains Mono', monospace;
    color: var(--gold-bright);
    font-size: 11px;
}

.ide-status {
    border-top: 1px solid var(--glass-border);
    padding: 8px 14px;
    display: flex;
    gap: 16px;
    color: var(--faint);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
}

.ide-status .g {
    color: var(--green-500);
}

@media (max-width: 820px) {
    .frame-body {
        grid-template-columns: 1fr 244px;
    }

    .ide-files {
        display: none;
    }
}

@media (max-width: 560px) {
    .frame-body {
        grid-template-columns: 1fr;
        height: 360px;
    }

    .ide-chat {
        display: none;
    }
}

/* ============================================================
   PROVIDER MARQUEE
   ============================================================ */
.providers {
    margin: 64px auto 0;
    text-align: center;
}

.providers .eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 26px;
    font-weight: 600;
}

.marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: scrollX 32s linear infinite;
}

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

@keyframes scrollX {
    to {
        transform: translateX(-50%);
    }
}

.provider-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 14px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.25s var(--ease);
}

.provider-chip:hover {
    color: var(--ink);
    border-color: var(--glass-border-hi);
}

.provider-chip .pdot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
    width: 100%;
    margin: 0 auto;
    padding: clamp(30px, 4.2vw, 48px) 70px;
    position: relative;
}

/* Features & security stages use the same width formula as the hero stage,
   so their side padding comes from the stage itself, not the section. */
#features.section,
#security.section,
#how.section {
    padding-left: 0;
    padding-right: 0;
}
/* These sections zero their side padding (wide stages own the gutter),
   so their heads carry the same responsive gutter the rest of the site uses. */
#features .section-head,
#security .section-head,
#how .section-head,
#loop-engineering .section-head {
    padding-inline: clamp(20px, 3vw, 70px);
}

.section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 28px;
}

.section-head .eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    font-weight: 600;
}

.section-head h2 {
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 800;
    letter-spacing: -0.038em;
    color: var(--pearl-solid);
    line-height: 1.06;
    margin-bottom: 16px;
}

.section-head p {
    font-size: 15px;
    color: var(--muted);
}

/* ── Editorial section heads (homepage) ─────────────────────────
   Left-aligned under a hairline rule, with the section's REAL anchor
   id as a quiet mono tag on the right — structure that encodes
   something true (the nav anchors), not decoration. Scoped to .sec-ed
   so the download page keeps its centered heads. */
.section-head.sec-ed {
    text-align: left;
    max-width: 1120px;
    margin: 0 auto 34px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: baseline;
}
.section-head.sec-ed .eyebrow { margin-bottom: 14px; }
.section-head.sec-ed .sec-anchor {
    grid-row: 1;
    grid-column: 2;
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--faint);
}
.section-head.sec-ed h2,
.section-head.sec-ed > p {
    grid-column: 1 / -1;
}
.section-head.sec-ed h2 { max-width: 820px; }
.section-head.sec-ed > p { max-width: 760px; }
.section-head.sec-ed .section-answer {
    margin-left: 0 !important;
    margin-right: auto;
    max-width: 760px;
}

/* ── Per-section atmosphere ─────────────────────────────────────
   One quiet radial glow per section, alternating sides, so the page
   stops reading as flat black-green between the cards. */
#overview::before,
#skills::before,
#memory::before,
#pricing::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(760px 380px at var(--gx, 50%) var(--gy, 0%),
        rgba(var(--accent-rgb), 0.055), transparent 70%);
}
#overview { --gx: 10%; --gy: 4%; }
#skills { --gx: 12%; --gy: 16%; }
#memory { --gx: 88%; --gy: 12%; }
#pricing { --gx: 50%; --gy: 0%; }

/* ── Skills: asymmetric bento, not three equal cards ────────────
   Row 1: wide card (2 cols) + single. Row 2: full-width horizontal bar. */
#skills .info-card.skill-wide { grid-column: span 2; }
#skills .info-card.skill-bar {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 20px 26px;
}
#skills .skill-bar .info-ico { margin-bottom: 0; flex-shrink: 0; }
#skills .skill-bar h3 { margin-bottom: 4px; }
.skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.skill-chips span {
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 11.5px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(var(--pearl-rgb), 0.12);
    background: rgba(var(--pearl-rgb), 0.03);
    color: var(--muted);
}
.skill-chips span.hot {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 32%, transparent);
    background: color-mix(in srgb, var(--gold) 7%, transparent);
}

/* ── Memory panel zigzag: visual left, copy right ─────────────── */
#memory .info-panel { grid-template-columns: auto minmax(0, 1fr); }
#memory .info-panel-visual { order: -1; }

@media (max-width: 1023px) {
    .section-head.sec-ed { max-width: 640px; }
}
@media (max-width: 900px) {
    #skills .info-card.skill-wide,
    #skills .info-card.skill-bar { grid-column: auto; }
    #skills .info-card.skill-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 26px 24px;
    }
    #skills .skill-bar .info-ico { margin-bottom: 16px; }
    #memory .info-panel-visual { order: 0; }
}

/* ===== BENTO ===== */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.card {
    position: relative;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-radius: var(--radius);
    padding: 24px;
    overflow: hidden;
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}

/* spotlight follows cursor */
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), 0.14), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}

.card:hover::after {
    opacity: 1;
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(var(--pearl-rgb), 0.18), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--glass-border-hi);
    background: var(--glass-strong);
}

.card .glyph {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--accent-rgb), 0.18);
}

.card h3 {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: var(--pearl-solid);
    margin-bottom: 9px;
    letter-spacing: -0.01em;
}

.card p {
    position: relative;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65;
}

.col-2 {
    grid-column: span 2;
}

.col-4 {
    grid-column: span 4;
}

.card.feature-wide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb), 0.08), transparent 55%),
        var(--glass);
}

.card.feature-wide h3 {
    font-size: 24px;
}

.card.feature-wide p {
    font-size: 15px;
    max-width: 460px;
}

/* ============================================================
   FEATURES — Cursor-concept warm cards
   Forest-green chrome, sage hairline, deep layered shadow,
   warm spotlight hover, staggered reveal entrance.
   ============================================================ */

/* section head: warm cream text */
#features .section-head h2 {
    color: rgba(var(--pearl-rgb), .95);
}
#features .section-head p {
    color: rgba(var(--pearl-rgb), .50);
}

/* ── wallpaper stage — same recipe as hero & proof ── */
/* ===== FEATURES — always-light card =====
   Same treatment as the security card: white paper, navy ink,
   blue + orange accents forced in BOTH OS themes by re-mapping
   the theme tokens on the stage container. */
.feat-stage {
    color-scheme: light;
}

.feat-stage {
    position: relative;
    width: min(1760px, calc(100% - clamp(24px, 3vw, 56px)));
    margin-inline: auto;
    border-radius: 14px;
    overflow: hidden;
    padding: clamp(22px, 3vw, 44px);
    background: var(--card-solid);
    box-shadow:
        0 0 0 1px rgba(var(--gold-rgb), .14),
        0 24px 60px rgba(var(--shadow-rgb), .30);
}
.feat-wall {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(16px) brightness(1.35) saturate(.8);
    transform: scale(1.08);
    opacity: .85;
    pointer-events: none;
}
.feat-wall-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(var(--scrim-rgb), .22) 0%, rgba(var(--scrim-rgb), .50) 100%),
        radial-gradient(90% 70% at 50% 50%, rgba(var(--scrim-rgb), 0) 40%, rgba(var(--scrim-rgb), .28) 100%);
}
.feat-stage .bento {
    position: relative;
    z-index: 2;
}

/* ── card base ── */
#features .card {
    background: var(--card-solid);
    border: 1px solid rgba(var(--cream-rgb), .09);
    border-radius: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 20px 50px rgba(var(--shadow-rgb), .40),
        0 8px 20px rgba(var(--shadow-rgb), .28),
        inset 0 1px 0 rgba(var(--cream-rgb), .06);
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.45s var(--ease);
}

#features .card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--cream-rgb), .18);
    background: var(--card-solid-hi);
    box-shadow:
        0 28px 64px rgba(var(--shadow-rgb), .50),
        0 14px 32px rgba(var(--shadow-rgb), .35),
        inset 0 1px 0 rgba(var(--cream-rgb), .10);
}

/* Claude-style contrast: pure white cards + windows on the warm white stage */
#features .card { background: #fafafa; }
#features .card:hover { background: #f2f4f2; }
#features .fx-win { background: #f2f4f2; }
#features .fx-term { background: #f2f4f2 !important; }
.sec-stage .fx-win { background: #ffffff; }

/* ── feat-stage: dark ink + green prompts on paper white ── */
#features .fx-bar-title { color: #636261; }
#features .fx-bar-live { color: #636261; }
#features .fx-bar-live b { color: #272826; }
#features .fx-bar-store { color: #636261; }
#features .fx-wg { color: #838280; }
#features .fx-chip { color: #436143; background: rgba(39, 40, 38, .06); border-color: rgba(39, 40, 38, .14); }
#features .fx-chip.live { color: #258095; background: rgba(37, 128, 149, .10); border-color: rgba(37, 128, 149, .30); }
#features .fx-chip.fx-more { color: #838280; }
#features .fx-foot { color: #436143; }
#features .fx-prompt { color: #33a425; }
#features .fx-cursor { background: #436143; }
#features .fx-row { color: #436143; background: rgba(39, 40, 38, .04); border-color: rgba(39, 40, 38, .10); }
#features .fx-row.live { color: #272826; background: rgba(39, 40, 38, .08); border-color: rgba(39, 40, 38, .20); }
#features .fx-row .fx-mono { color: #636261; }
#features .fx-dir { color: #838280; }
#features .fx-row-ghost,
#features .fx-row-add { color: #838280; }
#features .fx-tl { color: #436143; }
#features .fx-tl.fx-dim { color: #838280; }
#features .fx-ok-line { color: #272826; }
#features .fx-app-meta b { color: #272826; }
#features .fx-app-meta i { color: #838280; }
#features .fx-dl-meta .fx-mono { color: #636261; }
#features .fx-dl-meta .fx-dim { color: #838280; }

/* warm spotlight follows cursor */
#features .card::after {
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--cream-rgb), 0.07), transparent 45%);
}

/* top light line */
#features .card::before {
    background: linear-gradient(140deg, rgba(var(--cream-rgb), 0.10), transparent 42%);
    opacity: 0.8;
}

/* ── typography ── */
#features .card h3 {
    color: #436143;                  /* Tom Thumb headings on paper white */
    font-weight: 650;
    letter-spacing: -0.02em;
}

#features .card p {
    color: #636261;                  /* Ironside body — no washed text */
    line-height: 1.7;
}

/* ── glyph: chalet-green icon on green tile ── */
#features .card .glyph {
    background: rgba(67, 97, 67, .07);
    border: 1px solid rgba(67, 97, 67, .16);
    color: #436143;
    border-radius: 11px;
    filter: none;
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

#features .card:hover .glyph {
    background: rgba(67, 97, 67, .11);
    border-color: rgba(67, 97, 67, .26);
    color: #496a33;
    box-shadow: 0 0 16px rgba(67, 97, 67, .10);
}

/* ── wide card: warm radial accent glow top-right ── */
#features .card.feature-wide {
    background:
        radial-gradient(130% 130% at 100% 0%, rgba(var(--cream-rgb), 0.05), transparent 50%),
        var(--card-solid);
}

#features .card.feature-wide:hover {
    background:
        radial-gradient(130% 130% at 100% 0%, rgba(var(--cream-rgb), 0.08), transparent 50%),
        var(--card-solid-hi);
}

#features .card.feature-wide h3 {
    color: #436143;
}

#features .card.feature-wide p {
    color: #636261;
}

/* ── staggered entrance: cards rise with blur, staggered by --i ── */
#features .bento .card.reveal {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    filter: blur(6px);
    transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft), filter 0.7s var(--ease-soft);
    transition-delay: calc(var(--i, 0) * 100ms);
}

#features .bento .card.reveal.in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ── mobile: single column, reduce shadow depth ── */
@media (max-width: 860px) {
    .feat-stage {
        padding: 16px;
    }
    #features .card {
        box-shadow:
            0 12px 32px rgba(0, 0, 0, .30),
            0 4px 12px rgba(0, 0, 0, .20),
            inset 0 1px 0 rgba(var(--cream-rgb), .05);
    }
    #features .card:hover {
        transform: translateY(-3px);
    }
    #features .card.feature-wide {
        min-height: 180px;
    }
}

/* ============================================================
   FEATURES — living mini product UIs
   Same vocabulary as the hero & proof windows: titlebar dots,
   mono tool chips, step/diff lines, status dots, blinking cursor.
   ============================================================ */

/* ── card structure: copy on top, visual pinned to the bottom ── */
#features .bento > .card:not(.feature-wide) {
    display: flex;
    flex-direction: column;
}

#features .card p {
    margin-bottom: 0;
}

#features .bento > .card:not(.feature-wide) .fx-visual {
    margin-top: auto;
    padding-top: 16px;
}

/* inner visuals rise in just after their card lands */
#features .card .fx-anim {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft);
    transition-delay: calc(var(--i, 0) * 100ms + 260ms);
}

#features .card.in .fx-anim {
    opacity: 1;
    transform: none;
}

/* ── wide card: copy left, live toolchain window right ── */
#features .card.feature-wide {
    display: block;
}

#features .fx-split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 30px;
    align-items: center;
    min-height: 230px;
}

/* ── mini window chrome (shared) ── */
.fx-win {
    border: 1px solid rgba(var(--cream-rgb), .10);
    background: rgba(var(--win-tint-rgb), .50);
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 16px 36px rgba(var(--shadow-rgb), .35),
        inset 0 1px 0 rgba(var(--cream-rgb), .05);
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
}

.fx-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(var(--cream-rgb), .07);
    background: rgba(var(--cream-rgb), .03);
}

.fx-dots {
    display: inline-flex;
    gap: 5px;
}

.fx-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--cream-rgb), .14);
}

.fx-dots i:nth-child(2) { background: rgba(var(--cream-rgb), .22); }
.fx-dots i:nth-child(3) { background: rgba(var(--cream-rgb), .30); }

.fx-bar-title {
    font-size: 11px;
    letter-spacing: .05em;
    color: rgba(var(--cream-rgb), .45);
}

.fx-bar-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: rgba(var(--cream-rgb), .55);
}

.fx-bar-live b {
    color: rgba(var(--pearl-rgb), .9);
    font-weight: 600;
    display: inline-block;
    min-width: 46px;
}

/* ── status dot with soft pulse ── */
.fx-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-bright);
    animation: fxPulse 2.2s infinite;
}

.fx-dot.fx-idle {
    background: rgba(var(--cream-rgb), .25);
    animation: none;
}

@keyframes fxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--green-rgb), .35); }
    70%  { box-shadow: 0 0 0 6px rgba(var(--green-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0); }
}

/* ── tool chip rail (wide card) ── */
.fx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px 12px 12px;
}

.fx-chip {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 7px;
    color: rgba(var(--cream-rgb), .60);
    background: rgba(var(--cream-rgb), .05);
    border: 1px solid rgba(var(--cream-rgb), .08);
    transition: color .35s, background .35s, border-color .35s, box-shadow .35s;
}

.fx-chip.live {
    color: var(--hi-text);
    background: rgba(var(--cream-rgb), .13);
    border-color: rgba(var(--cream-rgb), .30);
    box-shadow: 0 0 14px rgba(var(--cream-rgb), .14);
}

.fx-chip.fx-more {
    color: rgba(var(--cream-rgb), .35);
    border-style: dashed;
    background: transparent;
}

.fx-foot {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 9px 12px;
    border-top: 1px solid rgba(var(--cream-rgb), .07);
    font-size: 11.5px;
    color: rgba(var(--cream-rgb), .70);
}

.fx-prompt { color: rgba(var(--cream-rgb), .40); }

.fx-cursor {
    width: 7px;
    height: 13px;
    margin-left: 4px;
    background: rgba(var(--cream-rgb), .65);
    animation: fxBlink 1.1s steps(1) infinite;
}

@keyframes fxBlink { 50% { opacity: 0; } }

/* live tool-demo line in the toolchain window footer */
.fx-foot-txt {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fx-foot-txt.swap { animation: fxFootSwap .38s cubic-bezier(.2, .7, .3, 1) both; }
.fx-foot-txt .fx-hl { color: #0077b6; font-weight: 600; }
@keyframes fxFootSwap {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

/* ── key / server rows (BYOK + MCP cards) ── */
.fx-keys {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fx-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--cream-rgb), .06);
    background: rgba(var(--cream-rgb), .03);
    font-size: 12px;
    color: rgba(var(--cream-rgb), .66);
    transition: background .35s, border-color .35s, color .35s;
}

.fx-row.live {
    background: rgba(var(--cream-rgb), .08);
    border-color: rgba(var(--cream-rgb), .18);
    color: rgba(var(--pearl-rgb), .92);
}

.fx-row .fx-mono {
    margin-left: auto;
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 400;
    color: rgba(var(--cream-rgb), .40);
}

.fx-dir {
    font-style: normal;
    font-size: 10px;
    color: rgba(var(--cream-rgb), .35);
}

.fx-row-ghost,
.fx-row-add {
    border-style: dashed;
    background: transparent;
    color: rgba(var(--cream-rgb), .38);
}

.fx-ok { color: var(--green-bright) !important; }
.fx-hi { color: var(--hi-text) !important; }

/* ── mini terminal (run & verify) ── */
.fx-term {
    background: var(--card-solid) !important;
}

.fx-term-body {
    padding: 11px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11.5px;
}

.fx-tl {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(var(--cream-rgb), .72);
}

.fx-tl.fx-dim { color: rgba(var(--cream-rgb), .42); }

.fx-ok-line { color: rgba(var(--pearl-rgb), .85); }
.fx-check { color: var(--green-bright); }

/* ── windows-native mini window ── */
.fx-bar-win { justify-content: space-between; }

.fx-wg {
    display: inline-flex;
    gap: 11px;
    font-size: 9px;
    color: rgba(var(--cream-rgb), .40);
}

.fx-wg i { font-style: normal; }

/* ── Microsoft Store install moment ── */
.fx-bar-store {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.fx-ms { color: rgba(var(--cream-rgb), .55); flex: none; }

.fx-store {
    padding: 12px 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fx-app {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fx-app-tile {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex: none;
    display: grid;
    place-items: center;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--card-deep);
    background: linear-gradient(140deg, var(--cream-solid) 0%, var(--cream-solid-deep) 100%);
    box-shadow:
        0 4px 12px rgba(var(--shadow-rgb), .35),
        inset 0 1px 0 rgba(var(--pearl-rgb), .35);
}

.fx-app-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.fx-app-meta b {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(var(--pearl-rgb), .92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fx-app-meta i {
    font-style: normal;
    font-size: 10px;
    color: rgba(var(--cream-rgb), .38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fx-get {
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 5px 16px;
    border-radius: 999px;
    color: var(--card-deep);
    background: linear-gradient(180deg, var(--cream-solid), var(--cream-solid-deep));
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .30);
    transition: background .45s var(--ease-soft), color .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}

.fx-get.done {
    color: var(--green-bright);
    background: rgba(var(--green-rgb), .10);
    box-shadow: inset 0 0 0 1px rgba(var(--green-rgb), .35);
}

.fx-dl {
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(var(--cream-rgb), .08);
}

.fx-dl-fill {
    display: block;
    height: 100%;
    width: 62%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--cream-rgb), .35), var(--cream-solid));
}

.fx-dl-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
}

.fx-dl-meta .fx-mono {
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
    color: rgba(var(--cream-rgb), .50);
}

.fx-dl-meta .fx-dim { color: rgba(var(--cream-rgb), .28); }

/* ── responsive + reduced motion ── */
@media (max-width: 980px) {
    #features .fx-split {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-dot, .fx-cursor { animation: none !important; }
    #features .card .fx-anim {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .sec-packet, .sec-tag { animation: none !important; }
    .sec-packet.sec-out { opacity: 1; transform: translateX(45%); }
    .sec-tag-out { opacity: .8; }
    .sec-stage .fx-anim,
    .sec-stage .sec-rise {
        transition: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ===== BYOK SECURITY — always-light card =====
   The one light moment on the page: white paper, navy ink type,
   blue + orange accents. Forced light palette in BOTH OS themes by
   re-mapping the theme tokens on the stage itself — every rule below
   resolves through these scoped values. */
.sec-stage {
    color-scheme: light;
}
.sec-stage {
    position: relative;
    width: min(1760px, calc(100% - clamp(24px, 3vw, 56px)));
    margin-inline: auto;
    border-radius: 14px;
    overflow: hidden;
    /* tight uniform inset — the panels carry their own padding */
    padding: clamp(12px, 1.6vw, 20px);
    background: var(--card-solid);
    box-shadow:
        0 0 0 1px rgba(var(--gold-rgb), .14),
        0 24px 60px rgba(var(--shadow-rgb), .30);
}
.sec-wall {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) brightness(1.05) saturate(.95);
    transform: scale(1.08);
    opacity: .9;
    pointer-events: none;
}
.sec-wall-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--scrim-rgb), .16) 0%, rgba(var(--scrim-rgb), .38) 100%);
}
.sec-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    /* stretch: the key-vault window matches the copy panel top-to-bottom */
    align-items: stretch;
}

/* frosted wrapper between the wallpaper and the copy — the text never
   sits on the raw image; it reads on this blurred warm-white pane while
   the wallpaper stays visible around it as ambient color */
.sec-copy {
    background: rgba(var(--scrim-rgb), .72);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 18px;
    /* uniform padding on all four sides — bottom matches the rest */
    padding: clamp(14px, 1.8vw, 22px);
    box-shadow: 0 18px 44px rgba(var(--shadow-rgb), .14);
}

.sec-copy h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--pearl-solid);
    line-height: 1.1;
    /* kill the UA heading margin so the panel's own padding is the only
       space above the title — top reads the same as bottom */
    margin-top: 0;
    margin-bottom: 14px;
}

.sec-copy h2 .grad {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--gold);
    color: var(--gold);
}

.sec-copy p {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 18px;
    line-height: 1.6;
}

.sec-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sec-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--muted);
}

.sec-list strong {
    color: var(--ink);
    font-weight: 600;
}

.sec-list .ck {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(var(--gold-rgb), .09);
    border: 1px solid rgba(var(--gold-rgb), .28);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 1px;
}

.sec-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.7;
}

/* ── living key-vault window — light chrome ── */
/* fill the stretched column so the window runs top-to-bottom with the copy */
.sec-win {
    padding-bottom: 4px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* scoped overrides: turn the shared dark .fx-* chrome light */
#security .fx-win {
    background: var(--card-solid);
    border: 1px solid rgba(var(--gold-rgb), .18);
    box-shadow:
        0 18px 44px rgba(var(--shadow-rgb), .16),
        0 2px 8px rgba(var(--shadow-rgb), .08),
        inset 0 1px 0 rgba(var(--pearl-rgb), .08);
}
#security .fx-bar {
    border-bottom: 1px solid rgba(var(--gold-rgb), .12);
    background: rgba(var(--cream-rgb), .14);
}
#security .fx-dots i { background: rgba(var(--gold-rgb), .22); }
#security .fx-dots i:nth-child(2) { background: rgba(var(--gold-rgb), .34); }
#security .fx-dots i:nth-child(3) { background: rgba(var(--gold-rgb), .55); }
#security .fx-bar-title { color: var(--muted); }
#security .fx-bar-live { color: var(--muted); }
#security .fx-bar-live b { color: var(--pearl-solid); }
#security .fx-dot { background: var(--green-deep); }
#security .fx-tl { color: var(--slate-300); }
#security .fx-tl.fx-dim { color: var(--faint); }
#security .fx-ok-line { color: var(--green-deep); }
#security .fx-check { color: var(--green-deep); }
#security .fx-prompt { color: var(--gold); }
#security .fx-foot {
    border-top: 1px solid rgba(var(--gold-rgb), .12);
    color: var(--muted);
}
#security .fx-foot b { color: var(--pearl-solid); }
#security .fx-cursor { background: var(--slate-300); }

/* entrance: window lands just after the stage, inner blocks cascade */
.sec-stage .fx-anim {
    opacity: 0;
    transform: translateY(14px) scale(.985);
    filter: blur(5px);
    transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft), filter .7s var(--ease-soft);
    transition-delay: .22s;
}
.sec-stage.in .fx-anim { opacity: 1; transform: none; filter: none; }

.sec-stage .sec-rise {
    opacity: 0;
    transform: translateY(9px);
    transition: opacity .55s var(--ease-soft), transform .55s var(--ease-soft);
    transition-delay: calc(.5s + var(--d, 0) * 120ms);
}
.sec-stage.in .sec-rise { opacity: 1; transform: none; }


.sec-seal {
    margin: 12px 14px 0;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--gold-rgb), .12);
    /* absorb the extra height: seal lines centre in the taller window */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

/* ── direct-to-provider wire with a travelling packet ── */
.sec-flow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 14px 0;
    padding: 12px;
    border: 1px dashed rgba(var(--gold-rgb), .28);
    border-radius: 9px;
    background: rgba(var(--cream-rgb), .10);
    flex: 1;   /* the wire diagram grows with the taller window */
}
.sec-node {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}
.sec-node-hi { color: var(--gold); }
.sec-wire {
    position: relative;
    flex: 1;
    height: 18px;              /* room for the phase label above the line */
}
.sec-wire::before {            /* the line itself, low in the box */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--gold-rgb), .38), rgba(var(--gold-rgb), .16), rgba(var(--gold-rgb), .38));
}
.sec-node { position: relative; top: 4px; }   /* optically centre nodes on the line */
/* ── round-trip packets: terracotta = encrypted request out, green = response back ── */
.sec-packet {                /* full-width carrier; the dot rides one edge */
    position: absolute;
    inset: 0;
    opacity: 0;
}
.sec-packet::before {
    content: '';
    position: absolute;
    top: 9.5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.sec-packet.sec-out { animation: secPacketOut 5.2s cubic-bezier(.55, .06, .35, .95) infinite; }
.sec-packet.sec-out::before {
    left: 0;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(var(--gold-rgb), .50);
}
.sec-packet.sec-back { animation: secPacketBack 5.2s cubic-bezier(.55, .06, .35, .95) infinite; }
.sec-packet.sec-back::before {
    right: 0;
    background: var(--green-deep);
    box-shadow: 0 0 10px rgba(var(--green-rgb), .45);
}
@keyframes secPacketOut {
    0%   { transform: translateX(0); opacity: 0; }
    6%   { opacity: 1; }
    44%  { transform: translateX(calc(100% - 7px)); opacity: 1; }
    50%  { transform: translateX(calc(100% - 7px)); opacity: 0; }
    100% { transform: translateX(calc(100% - 7px)); opacity: 0; }
}
@keyframes secPacketBack {
    0%   { transform: translateX(0); opacity: 0; }
    50%  { transform: translateX(0); opacity: 0; }
    56%  { opacity: 1; }
    94%  { transform: translateX(calc(-100% + 7px)); opacity: 1; }
    100% { transform: translateX(calc(-100% + 7px)); opacity: 0; }
}
/* phase labels riding above the line, synced to each leg */
.sec-tag {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-family: var(--mono, ui-monospace, 'Cascadia Code', Consolas, monospace);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .08em;
    white-space: nowrap;
    opacity: 0;
}
.sec-tag-out  { color: rgba(var(--gold-rgb), .85); animation: secTagOut 5.2s linear infinite; }
.sec-tag-back { color: rgba(var(--green-rgb), .90);  animation: secTagBack 5.2s linear infinite; }
@keyframes secTagOut  { 0% { opacity: 0; } 8% { opacity: 1; } 40% { opacity: 1; } 48% { opacity: 0; } 100% { opacity: 0; } }
@keyframes secTagBack { 0%, 52% { opacity: 0; } 58% { opacity: 1; } 90% { opacity: 1; } 98%, 100% { opacity: 0; } }
.sec-flow-x {
    margin: 8px 14px 0;
    font-size: 11px;
    color: var(--faint);
}
.sec-flow-x i {
    font-style: normal;
    color: var(--gold-deep);
    margin-right: 6px;
}

/* ===== HOW STEPS (onboarding) — green cards, red h3, live animated windows ===== */
.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    /* same width formula as hero / feat / sec stages — NOT shrunk */
    width: min(1760px, calc(100% - clamp(24px, 3vw, 56px)));
    margin-inline: auto;
}

.how-step {
    display: flex;
    flex-direction: column;
    background: #7fc775;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--radius);
    padding: 22px 18px 18px;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}

.how-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

.hw-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #1a1713;
    background: rgba(0, 0, 0, .08);
    border-radius: 6px;
    padding: 3px 8px;
    display: inline-block;
    margin-bottom: 12px;
}

.how-step h3 {
    font-size: 17px;
    font-weight: 700;
    color: #f7493f;
    margin-bottom: 8px;
}

.how-step p {
    font-size: 13.5px;
    color: rgba(26, 23, 19, .72);
    margin-bottom: 16px;
    line-height: 1.55;
}

/* ── dark mini-window inside green card ── */
.hw-win {
    border: 1px solid rgba(240, 247, 229, .10);
    background: #1a1713;
    border-radius: 10px;
    overflow: hidden;
    /* standard size for all three windows — same start & end position */
    height: 240px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .30);
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
}

.hw-win .fx-bar {
    border-bottom: 1px solid rgba(240, 247, 229, .07);
    background: rgba(240, 247, 229, .03);
}

.hw-win .fx-bar-title { color: rgba(240, 247, 229, .45); }
.hw-win .fx-dots i { background: rgba(240, 247, 229, .14); }
.hw-win .fx-dots i:nth-child(2) { background: rgba(240, 247, 229, .22); }
.hw-win .fx-dots i:nth-child(3) { background: rgba(240, 247, 229, .30); }

/* ── file tree (step 1) ── */
.hw-tree {
    padding: 12px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.hw-file {
    font-size: 12px;
    color: rgba(240, 247, 229, .70);
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .4s ease, transform .4s ease, background .3s;
}

.hw-file.hw-folder {
    color: rgba(165, 212, 95, .9);
    font-weight: 600;
}

.hw-file.hw-indent { padding-left: 22px; }

.hw-file.visible {
    opacity: 1;
    transform: none;
}

.hw-status {
    padding: 8px 14px 10px;
    font-size: 11px;
    color: rgba(240, 247, 229, .45);
    border-top: 1px solid rgba(240, 247, 229, .06);
    transition: color .4s;
}

.hw-status.done { color: rgba(165, 212, 95, .9); }

/* ── API keys (step 2) ── */
.hw-keys {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: space-evenly;
}

.hw-key-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(240, 247, 229, .06);
    background: rgba(240, 247, 229, .03);
    font-size: 12px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease, background .3s, border-color .3s;
}

.hw-key-row.visible {
    opacity: 1;
    transform: none;
}

.hw-key-row.active {
    background: rgba(165, 212, 95, .08);
    border-color: rgba(165, 212, 95, .25);
}

.hw-prov {
    color: rgba(240, 247, 229, .85);
    font-weight: 600;
    min-width: 72px;
}

.hw-key {
    color: rgba(240, 247, 229, .45);
    flex: 1;
}

.hw-check {
    color: rgba(165, 212, 95, .9);
    font-weight: 700;
    opacity: 0;
    transition: opacity .3s;
}

.hw-key-row.visible .hw-check { opacity: 1; }

/* ── agent prompt + steps (step 3) ── */
.hw-prompt {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px 6px;
    font-size: 12px;
    color: rgba(240, 247, 229, .80);
}

.hw-prompt .fx-prompt { color: rgba(165, 212, 95, .7); }

.hw-agent-steps {
    padding: 6px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    justify-content: space-evenly;
}

.hw-agent-step {
    font-size: 11.5px;
    color: rgba(240, 247, 229, .60);
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .4s ease, transform .4s ease;
}

.hw-agent-step.visible {
    opacity: 1;
    transform: none;
}

.hw-agent-step.hw-done {
    color: rgba(165, 212, 95, .9);
    font-weight: 600;
}

.hw-agent-step .hs-add { color: #4ade80; }
.hw-agent-step .fx-hl { color: #a5d45f; font-weight: 600; }

/* ===== LANGS ===== */
.langs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 760px;
    margin: 0 auto;
}

.lang {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--muted);
    transition: all 0.25s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.lang:hover {
    color: var(--ink);
    border-color: var(--glass-border-hi);
    transform: translateY(-2px);
}

.lang .d {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ===== FAQ (split light band, Qoder-style) ===== */
#faq {
    background: #ececec;
}

#faq .faq-layout {
    display: grid;
    grid-template-columns: minmax(280px, 5fr) 7fr;
    gap: clamp(40px, 5vw, 96px);
    align-items: stretch;
}

#faq .faq-left {
    display: flex;
    flex-direction: column;
}

#faq .faq-left h2 {
    color: #17181a;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0 0 16px;
}

/* .faq-sub becomes a mono eyebrow above the heading (CSS order only —
   DOM/SEO order untouched). Green ties the head to the accordion chevrons. */
#faq .faq-sub {
    order: -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: #55700f;
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}
#faq .faq-sub::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 2px;
    background: #6da32a;
}

#faq .faq-note {
    margin-top: auto;
    padding-top: 56px;
    color: #6b7075;
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 36ch;
}

.faq {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: #f7f7f8;
    border: none;
    border-radius: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: hidden;
    transition: background 0.3s var(--ease);
}

.faq-item.open {
    background: #ffffff;
    border: none;
}

.faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #17181a;
    font-size: 15.5px;
    font-weight: 600;
    font-family: inherit;
    padding: 17px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.faq-q .chev {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #6da32a;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.3s var(--ease);
}

.faq-item.open .chev {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s var(--ease);
}

.faq-a p {
    padding: 0 60px 20px 20px;
    margin: 0;
    color: #43474b;
    font-size: 14.5px;
    line-height: 1.7;
}

.faq-a p strong {
    color: #17181a;
    font-weight: 600;
}

.faq-a p code {
    background: rgba(23, 24, 26, 0.08);
    color: #17181a;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 13px;
}


@media (max-width: 900px) {
    #faq .faq-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    #faq .faq-note {
        margin-top: 8px;
        padding-top: 0;
    }
}

/* ===== FINAL CTA ===== */
.final-cta {
    width: 100%;
    margin: 0 auto;
    /* zero side padding — card uses the shared content-column width */
    padding: clamp(48px, 6vw, 80px) 0 40px;
}

.cta-glass {
    position: relative;
    border-radius: var(--radius-lg);
    text-align: center;
    /* same outer size as .info-panel — homepage content column */
    width: min(1120px, calc(100% - clamp(24px, 3vw, 56px)));
    margin-inline: auto;
    padding: clamp(22px, 3vw, 32px) 28px;
    background:
        radial-gradient(80% 120% at 50% -20%, rgba(var(--accent-rgb), 0.14), transparent 65%),
        radial-gradient(60% 80% at 50% 120%, rgba(var(--accent-rgb), 0.06), transparent 70%),
        linear-gradient(180deg, rgba(var(--cream-rgb), 0.03) 0%, rgba(var(--cream-rgb), 0.01) 100%),
        var(--bg-elevated);
    border: 1px solid var(--hairline);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(var(--pearl-rgb), 0.04) inset;
    transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.cta-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
    opacity: 0.7;
}

.cta-glass:hover {
    border-color: var(--azure-border);
    box-shadow:
        0 1px 0 rgba(var(--pearl-rgb), 0.06) inset;
}

.cta-glass h2 {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -0.045em;
    color: var(--pearl);
    line-height: 1.08;
    margin-bottom: 10px;
    background: linear-gradient(180deg, var(--pearl) 0%, var(--slate-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-glass p {
    font-size: clamp(14px, 1.4vw, 15.5px);
    color: var(--slate-400);
    max-width: 480px;
    margin: 0 auto 20px;
    line-height: 1.55;
    font-weight: 400;
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.cta-glass .btn-lg {
    border-radius: 12px;
    padding: 12px 26px;
    font-size: 14.5px;
    font-weight: 600;
    transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}

.cta-glass .btn-lg.primary {
    background: linear-gradient(180deg, #ff6a5e 0%, #f7493f 55%, #e23c33 100%);
    color: #ffffff;
    border: 1px solid rgba(247, 73, 63, 0.55);
    box-shadow:
        0 1px 0 rgba(var(--pearl-rgb), 0.20) inset;
    position: relative;
    overflow: hidden;
}

.cta-glass .btn-lg.primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
    transform: skewX(-15deg);
    transition: left 0.65s var(--ease);
}

.cta-glass .btn-lg.primary:hover::after {
    left: 130%;
}

.cta-glass .btn-lg.primary:hover {
    background: linear-gradient(180deg, #f7493f 0%, #e23c33 100%);
    box-shadow:
        0 1px 0 rgba(var(--pearl-rgb), 0.24) inset;
}

.cta-glass .btn-lg.primary:active {
    box-shadow:
        0 1px 0 rgba(var(--pearl-rgb), 0.16) inset;
}

.cta-glass .btn-lg.glass {
    background: rgba(var(--cream-rgb), 0.04);
    border: 1px solid var(--hairline);
    color: var(--pearl);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.cta-glass .btn-lg.glass:hover {
    background: rgba(var(--cream-rgb), 0.09);
    border-color: var(--azure-border);
    color: var(--azure-400);
}

.cta-glass .btn-lg.glass:active {
    transform: none;
}

.hero-meta {
    margin-top: 28px;
    font-size: 13px;
    color: var(--faint);
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-meta span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--azure-600);
    opacity: 0.6;
}

/* ===== FOOTER ===== */
.footer {
    border-top: 1px solid var(--glass-border);
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.footer .brand {
    font-size: 15px;
}

.footer-note {
    font-size: 12.5px;
    color: var(--faint);
    max-width: 360px;
}

.footer-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--faint);
    font-size: 13px;
}

.footer-links a:hover {
    color: var(--ink);
}

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(8px);
    transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft), filter 0.9s var(--ease-soft);
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* stagger children */
.stagger>.reveal {
    transition-delay: calc(var(--i, 0) * 90ms);
}

/* ===== BACK TO TOP ===== */
#toTop {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(var(--scrim-rgb), 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    color: var(--azure-400);
    font-size: 18px;
    cursor: pointer;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s var(--ease);
}

#toTop:hover {
    border-color: var(--glass-border-hi);
    transform: translateY(-2px);
}

/* ============================================================
   SOCIAL PROOF BAR
   ============================================================ */
.social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.social-proof .proof-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

.social-proof .proof-item .stars {
    color: var(--gold);
    letter-spacing: 2px;
}

.social-proof .proof-item b {
    color: var(--pearl-solid);
    font-weight: 700;
}

/* ============================================================
   PRICING — matches HTML classes in pricing.html
   ============================================================ */

/* Grid: 2 equal columns, equal-height cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: stretch;
}

/* Card: flex column so CTA always sticks to bottom */
.pricing-card {
    position: relative;
    background: var(--ink-900);
    border: 1px solid var(--hairline);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 16px;
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.pricing-card:hover {
    transform: translateY(-3px);
    border-color: var(--hairline-hi);
    box-shadow: none;
}

/* Featured (Starter) card */
.pricing-card.featured {
    border-color: var(--azure-border);
    background: var(--ink-900);
    box-shadow: none;
    z-index: 2;
}

.pricing-card.featured:hover {
    transform: translateY(-3px);
    box-shadow: none;
    border-color: var(--azure-400);
}

/* "Most Popular" badge */
.pricing-featured-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--azure-500);
    color: var(--on-accent);
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 18px;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Header block */
.pricing-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
}

.pricing-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.pricing-price .amount {
    font-size: clamp(40px, 5vw, 52px);
    font-weight: 800;
    color: var(--pearl-solid);
    letter-spacing: -0.04em;
    line-height: 1;
}

.pricing-price .period {
    font-size: 16px;
    color: var(--faint);
    font-weight: 500;
}

.pricing-desc {
    font-size: 13.5px;
    color: var(--faint);
    margin: 0;
}

/* Feature list */
.pricing-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    margin: 0 0 24px;
    padding: 0;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

/* Check icon — gold on featured, green on normal */
.pricing-features li .check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(var(--green-rgb), 0.14);
    border: 1px solid rgba(var(--green-rgb), 0.25);
    color: var(--green-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

.pricing-card.featured .pricing-features li .check {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.25);
    color: var(--gold-bright);
}

/* No / disabled features */
.pricing-features li .no,
.pricing-features li .cross {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(var(--pearl-rgb), 0.03);
    border: 1px solid rgba(var(--pearl-rgb), 0.06);
    color: var(--faint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

.pricing-features li:has(.no),
.pricing-features li:has(.cross) {
    opacity: 0.5;
}

/* CTA buttons — ALL gold */
.pricing-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 28px;
    margin-top: auto;
    border: none;
    border-radius: 999px;
    background: var(--azure-500);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    box-shadow: none;
}

.pricing-cta:hover {
    box-shadow: none;
    background: var(--azure-400);
    transform: translateY(-1px);
    color: #fff;
}

.pricing-cta:active {
    transform: translateY(0) scale(0.98);
}

.pricing-cta.primary {
    box-shadow: none;
}

.pricing-cta.primary:hover {
    box-shadow: none;
    background: var(--azure-400);
}

/* BYOK note */
.pricing-note {
    text-align: center;
    font-size: 14px;
    color: var(--faint);
    max-width: 680px;
    margin: 36px auto 0;
    line-height: 1.6;
}

.pricing-note strong {
    color: var(--gold-bright);
}

@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .pricing-card.featured {
        order: -1;
    }

    .pricing-card.featured:hover {
        transform: translateY(-6px);
    }

    .pricing-card {
        padding: 28px 20px 24px;
    }

    .pricing-price .amount {
        font-size: 40px;
    }

    .pricing-cta {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.testimonial-card {
    position: relative;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-radius: var(--radius);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease);
}

.testimonial-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(var(--pearl-rgb), 0.14), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: var(--glass-border-hi);
}

.testimonial-card .quote {
    font-size: 15px;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 20px;
}

.testimonial-card .quote::before {
    content: '\201C';
    color: var(--gold);
    font-size: 28px;
    line-height: 0;
    vertical-align: -6px;
    margin-right: 4px;
}

.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-card .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azure-500), var(--azure-600));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--on-accent);
    flex-shrink: 0;
}

.testimonial-card .author-info {
    display: flex;
    flex-direction: column;
}

.testimonial-card .author-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--pearl-solid);
}

.testimonial-card .author-role {
    font-size: 12px;
    color: var(--faint);
}

/* ============================================================
   CHANGELOG (removed — section deleted from index.html)
   ============================================================ */

/* ============================================================
   ENHANCED CARD HOVER GLOW
   ============================================================ */
.card {
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--glass-border-hi);
    background: var(--glass-strong);
    box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.06);
}

/* ============================================================
   WHAT'S NEW BADGE (navbar)
   ============================================================ */
.whats-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.25s var(--ease);
}

.whats-new-badge:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: var(--gold);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .col-2,
    .col-4 {
        grid-column: span 2;
    }

    .sec-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .sec-stage {
        padding: 12px 10px;
    }

    .how-steps {
        grid-template-columns: 1fr;
    }

    .glass-frame {
        transform: none;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: clamp(28px, 5.5vw, 50px);
        letter-spacing: -0.02em;
        padding: 0 8px;
    }
}

@media (max-width: 560px) {
    .hero {
        padding: 130px 24px 30px;
    }

    .section {
        padding: 56px 20px;
    }

    .bento {
        grid-template-columns: 1fr;
    }

    .col-2,
    .col-4 {
        grid-column: span 1;
    }

    .hero-cta {
        flex-direction: column;
    }

    .btn-lg {
        width: 100%;
        justify-content: center;
    }

    .nav-right .btn-ghost {
        display: none;
    }

    .hero h1 {
        font-size: clamp(24px, 7vw, 38px);
        letter-spacing: -0.015em;
        padding: 0 6px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .blob,
    .pill .dot,
    .hero h1 .grad,
    .marquee-track,
    .aurora::before {
        animation: none !important;
    }

    .seq,
    .reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .cursor-glow {
        display: none;
    }
}

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

/* --- Hero --- */
.dl-hero {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding: 180px 24px 0;
    text-align: center;
    overflow: hidden;
}

.dl-hero-glow {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.07), transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: heroPulse 6s ease-in-out infinite;
}

@keyframes heroPulse {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.dl-hero h1 {
    font-size: clamp(42px, 7vw, 76px);
    font-weight: 800;
    letter-spacing: -0.045em;
    color: var(--pearl-solid);
    line-height: 1.02;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.dl-hero h1 .grad {
    background: linear-gradient(120deg, #436143 0%, #33a425 55%, #2c8f21 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dl-sub {
    font-size: clamp(16px, 2vw, 19px);
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 30px;
    position: relative;
    z-index: 1;
}

/* --- Download Card --- */
.dl-card {
    position: relative;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(var(--accent-rgb), 0.06), transparent 55%),
        var(--card-solid);
    border: 1px solid var(--hairline);
    padding: 48px 36px 40px;
    box-shadow:
        0 24px 60px rgba(var(--shadow-rgb), 0.08),
        0 4px 16px rgba(var(--shadow-rgb), 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.dl-card:hover {
    border-color: var(--hairline-hi);
    box-shadow:
        0 28px 70px rgba(var(--shadow-rgb), 0.10),
        0 6px 20px rgba(var(--shadow-rgb), 0.06);
}

.dl-card-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.07), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.dl-os {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.dl-os-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.dl-os-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--pearl-solid);
    text-align: left;
}

.dl-os-meta {
    font-size: 13px;
    color: var(--faint);
    text-align: left;
    margin-top: 2px;
}

.dl-btn {
    position: relative;
    z-index: 1;
    min-width: 280px;
    padding: 16px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

/* macOS is not built yet: render the download action as a disabled "Coming soon"
   button instead of a link users would click into a dead release page. */
.btn-lg.dl-btn-disabled,
.dl-card > .btn-lg.dl-btn-disabled {
    background: #e6e2da;
    color: #8a8577;
    cursor: not-allowed;
    box-shadow: none;
    border: none;
    font-weight: 600;
    opacity: 1;
}
.btn-lg.dl-btn-disabled:hover,
.btn-lg.dl-btn-disabled:active,
.dl-card > .btn-lg.dl-btn-disabled:hover,
.dl-card > .btn-lg.dl-btn-disabled:active {
    background: #e6e2da;
    color: #8a8577;
    box-shadow: none;
    transform: none;
}

/* Store CTA — on-brand Forest Green (matches the site's primary CTA; the old
   flat signal-red override was off-brand on the light paper theme) */
.btn-lg.primary.dl-store-btn {
    background: #496a33;
    color: #ffffff;
    font-weight: 600;
    box-shadow: none;
    border: none;
}

/* Installer cards: all three (Windows, Linux, macOS) render side by side at
   equal width. No OS-based filtering or highlight is applied. */
.btn-lg.primary.dl-store-btn:hover {
    background: #436143;
    color: #ffffff;
    box-shadow: none;
}
.btn-lg.primary.dl-store-btn:active {
    transform: none;
}

.dl-meta-row {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.dl-meta-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--faint);
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(var(--pearl-rgb), 0.04);
    border: 1px solid rgba(var(--pearl-rgb), 0.06);
    letter-spacing: 0.02em;
}

.dl-hint {
    font-size: 13px;
    color: var(--faint);
    position: relative;
    z-index: 1;
}

/* Linux package-format dropdown: x64 (.deb) / x64 (.rpm), only available builds shown. */
.dl-select {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 280px;
    text-align: left;
}

.dl-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--pearl-solid);
    background: rgba(var(--pearl-rgb), 0.05);
    border: 1px solid rgba(var(--pearl-rgb), 0.10);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.dl-select-btn:hover {
    border-color: rgba(var(--pearl-rgb), 0.22);
    background: rgba(var(--pearl-rgb), 0.08);
}

.dl-select-chev {
    flex: 0 0 auto;
    color: var(--faint);
    transition: transform 0.18s ease;
}

.dl-select.is-open .dl-select-chev {
    transform: rotate(180deg);
}

.dl-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bg);
    border: 1px solid rgba(var(--pearl-rgb), 0.10);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
    z-index: 30;
}

.dl-select.is-open .dl-select-menu {
    display: flex;
}

.dl-select-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--pearl-solid);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.dl-select-opt:hover {
    background: rgba(var(--pearl-rgb), 0.08);
}

.dl-select-opt.is-selected {
    background: rgba(var(--pearl-rgb), 0.10);
}


/* Final-CTA Linux dropdown: a glass button that opens a format picker.
   Reuses the .dl-select interaction model, styled to sit inline with the
   Windows Store button and open a clean industry-standard file menu. */
.dl-cta-select {
    position: relative;
    z-index: 30;
}

/* Lift the row that holds the buttons above the meta line so the open
   menu always paints on top. */
.cta-glass .hero-cta {
    position: relative;
    z-index: 2;
}

.dl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.dl-cta-btn .dl-cta-label {
    display: inline;
}

.dl-cta-chev {
    flex: 0 0 auto;
    color: var(--faint);
    transition: transform 0.18s ease;
}

/* Dropup — opens upward into the card interior so the card's
   overflow:hidden can never clip it at the bottom edge. */
.dl-cta-select.is-open .dl-cta-chev {
    transform: rotate(180deg);
}

.dl-cta-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline-hi);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.14);
    z-index: 60;
}

.dl-cta-select.is-open .dl-cta-menu {
    display: flex;
}

.dl-cta-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 13px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-100);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.dl-cta-opt:hover {
    background: rgba(139, 197, 61, 0.12);
}

.dl-cta-opt.is-selected {
    background: rgba(139, 197, 61, 0.16);
}


.dl-alt {
    font-size: 14px;
    color: var(--muted);
    position: relative;
    z-index: 1;
}

/* --- Sections --- */
.dl-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 24px;
}

.dl-section .section-head {
    text-align: center;
    margin-bottom: 48px;
}

.dl-section .section-head .eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
    font-weight: 600;
}

.dl-section .section-head h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--pearl-solid);
    line-height: 1.1;
}

/* --- Steps (redesigned) --- */
.dl-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.dl-step {
    flex: 1;
    background: var(--card-solid);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 36px 28px;
    text-align: center;
    transition: all 0.45s var(--ease);
    position: relative;
}

.dl-step:hover {
    transform: translateY(-6px);
    border-color: var(--hairline-hi);
    box-shadow: 0 12px 40px rgba(var(--shadow-rgb), 0.07);
}

.dl-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    color: var(--gold);
    margin-bottom: 20px;
}

.dl-step-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 12px;
    letter-spacing: 0.08em;
}

.dl-step h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--pearl-solid);
    margin-bottom: 10px;
}

.dl-step p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
}

.dl-step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    position: relative;
}

.dl-step-connector::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.08));
    transform: translateY(-50%);
}

.dl-step-connector::after {
    content: '→';
    position: relative;
    z-index: 1;
    font-size: 16px;
    color: var(--gold);
    background: var(--bg);
    padding: 4px 8px;
    border-radius: 8px;
}

/* --- Features Grid --- */
.dl-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dl-feature {
    background: var(--card-solid);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 32px 24px;
    transition: all 0.4s var(--ease);
}

.dl-feature:hover {
    transform: translateY(-4px);
    border-color: var(--hairline-hi);
    box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.06);
}

.dl-feature-icon {
    font-size: 28px;
    margin-bottom: 16px;
}

.dl-feature h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--pearl-solid);
    margin-bottom: 8px;
}

.dl-feature p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
}

/* --- System Requirements --- */
.dl-req-card {
    background: var(--card-solid);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
}

.dl-req-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(var(--pearl-rgb), 0.04);
    transition: background 0.3s var(--ease);
}

.dl-req-row:last-child {
    border-bottom: none;
}

.dl-req-row:hover {
    background: rgba(var(--pearl-rgb), 0.02);
}

.dl-req-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pearl-solid);
    min-width: 160px;
}

.dl-req-value {
    font-size: 14px;
    color: var(--muted);
    text-align: right;
}

/* --- Key Takeaway / Summary Card --- */
.dl-summary-card {
    background: var(--card-solid);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 32px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(var(--shadow-rgb), 0.05);
}

.dl-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}

.dl-summary-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--azure-400);
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 6px;
    padding: 4px 10px;
    margin-bottom: 16px;
}

.dl-summary-lead {
    font-size: 16px;
    line-height: 1.7;
    color: var(--pearl);
    margin-bottom: 18px;
}

.dl-summary-lead strong {
    color: var(--pearl-solid);
}

.dl-summary-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dl-summary-list li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.dl-summary-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--azure-500);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

.dl-summary-list li a {
    color: var(--azure-400);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
    transition: border-color 0.2s;
}

.dl-summary-list li a:hover {
    border-color: var(--azure-400);
}

/* --- Hero bottom line (AEO/GEO signals: summary + audience cues) ---
   Now sits side-by-side with the Key takeaway card in .dl-duo. */
.dl-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;
    margin-top: 34px;
}
.dl-bottomline {
    background: var(--card-solid);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 32px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(var(--shadow-rgb), 0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.dl-bottomline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
.dl-bottomline .dl-sub-lead {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--slate-100);
}
.dl-bottomline .dl-bl-line {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.66;
    color: var(--muted);
}
.dl-bottomline .dl-bl-lead {
    color: var(--azure-500);
    font-weight: 600;
    margin-right: 5px;
}

/* --- Direct Answer (below question H2s) --- */
.dl-direct-answer {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 10px;
    max-width: 640px;
}

/* --- Linux card: supported-distro note under the format picker --- */
.dl-card-osnote {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--faint);
    background: rgba(var(--pearl-rgb), 0.03);
    border: 1px dashed rgba(var(--pearl-rgb), 0.12);
    border-radius: 8px;
    padding: 7px 12px;
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 100%;
    line-height: 1.5;
}

/* --- Dedicated Linux install guide (two terminal cards) --- */
.dl-install {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;
    margin-top: 34px;
}
.dl-install-card {
    background: var(--card-solid);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 32px 34px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(var(--shadow-rgb), 0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.dl-install-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
.dl-install-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dl-install-fmt {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    border-radius: 7px;
    padding: 4px 12px;
    letter-spacing: 0.02em;
}
.dl-install-distro {
    font-size: 12.5px;
    color: var(--faint);
}
.dl-install-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--pearl-solid);
    margin: 0;
    letter-spacing: -0.01em;
}
.dl-install-card p {
    font-size: 13.5px;
    line-height: 1.66;
    color: var(--muted);
    margin: 0;
}
.dl-install-term {
    position: relative;
    background: #1a1713;               /* dark island to match the product windows */
    border: 1px solid rgba(var(--pearl-rgb), 0.10);
    border-radius: 12px;
    padding: 18px 52px 18px 18px;
    overflow: hidden;
    margin-top: 2px;
}
.dl-install-term::before {
    content: '$';
    position: absolute;
    left: 15px;
    top: 16px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 13px;
    color: #8bc53d;
}
.dl-install-term code {
    display: block;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 13px;
    line-height: 1.78;
    color: #ecf5dd;
    padding-left: 20px;
    white-space: pre-wrap;
    word-break: break-word;
}
.dl-install-copy {
    position: absolute;
    top: 12px;
    right: 13px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: rgba(240, 247, 229, 0.65);
    background: rgba(240, 247, 229, 0.06);
    border: 1px solid rgba(240, 247, 229, 0.14);
    border-radius: 7px;
    padding: 5px 11px;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1;
}
.dl-install-copy:hover {
    color: #ffffff;
    background: rgba(240, 247, 229, 0.14);
}
.dl-install-copy.copied {
    color: #8bc53d;
    border-color: rgba(139, 197, 61, 0.5);
}
.dl-install-note {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--faint);
    line-height: 1.6;
}
.dl-install-note code {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.86em;
    color: var(--gold-bright);
}
@media (max-width: 820px) {
    .dl-install { grid-template-columns: 1fr; }
    .dl-install-card { padding: 26px 22px; }
}

/* --- First-hand screenshots (GEO original-experience signal) --- */
.dl-shots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 34px;
}
.dl-shot {
    margin: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline);
    background: var(--card-solid);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dl-shot img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(var(--pearl-rgb), 0.06);
}
.dl-shot figcaption {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}
@media (max-width: 900px) {
    .dl-shots { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
    .dl-duo { grid-template-columns: 1fr; }
}

/* --- Comparison Table --- */
.dl-compare-card {
    background: var(--card-solid);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
}

.dl-compare-table {
    width: 100%;
    border-collapse: collapse;
}

.dl-compare-table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 16px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(var(--pearl-rgb), 0.08);
    background: rgba(var(--pearl-rgb), 0.02);
}

.dl-compare-table thead th:first-child {
    text-align: left;
}

.dl-compare-table thead th:last-child {
    color: var(--azure-400);
}

.dl-compare-table tbody td {
    padding: 14px 24px;
    font-size: 14px;
    color: var(--pearl);
    text-align: center;
    border-bottom: 1px solid rgba(var(--pearl-rgb), 0.04);
}

.dl-compare-table tbody td:first-child {
    text-align: left;
    color: var(--muted);
}

.dl-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.dl-compare-table tbody tr:hover {
    background: rgba(var(--pearl-rgb), 0.02);
}

.dl-ck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--azure-400);
    font-size: 12px;
    font-weight: 700;
}

.dl-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--pearl-rgb), 0.04);
    border: 1px solid rgba(var(--pearl-rgb), 0.08);
    color: var(--muted);
    font-size: 12px;
}

.dl-compare-note {
    padding: 16px 24px;
    font-size: 13px;
    color: var(--muted);
    border-top: 1px solid rgba(var(--pearl-rgb), 0.06);
    background: rgba(var(--pearl-rgb), 0.015);
}

.dl-compare-note a {
    color: var(--azure-400);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
    transition: border-color 0.2s;
}

.dl-compare-note a:hover {
    border-color: var(--azure-400);
}

/* --- FAQ --- */
.dl-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dl-faq-item {
    background: var(--card-solid);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s var(--ease);
}

.dl-faq-item[open] {
    border-color: rgba(var(--accent-rgb), 0.22);
}

.dl-faq-item summary {
    padding: 20px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pearl-solid);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.3s var(--ease);
}

.dl-faq-item summary::-webkit-details-marker {
    display: none;
}

.dl-faq-item summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: var(--gold);
    transition: transform 0.3s var(--ease);
}

.dl-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.dl-faq-item summary:hover {
    color: var(--gold-bright);
}

.dl-faq-body {
    padding: 0 24px 20px;
}

.dl-faq-body p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
}

/* --- Privacy Card --- */
.dl-privacy-card {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 32px 36px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0.02));
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    transition: border-color 0.4s var(--ease);
}

.dl-privacy-card:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
}

.dl-privacy-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--gold);
}

.dl-privacy-text {
    flex: 1;
}

.dl-privacy-text h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--pearl-solid);
    margin-bottom: 6px;
}

.dl-privacy-text p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65;
}

.dl-privacy-link {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ============================================================
   EQUAL-SIZE CARD SYSTEM — download page + homepage value band
   ============================================================ */

/* Download cards stacked, one per row */
.dl-download-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    max-width: 1060px;
    margin: 30px auto 28px;
    position: relative;
    z-index: 1;
}

/* "What's new" card spans the full width beneath the three installer cards
   when no OS is detected (unknown desktop OS). */
.dl-download-grid .dl-card-free {
    grid-column: 1 / -1;
}

/* When a desktop OS matches, only that installer card + the "What's new"
   card are shown, side by side in a two-column grid. */
.dl-download-grid.dl-grid-os-target {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    align-items: stretch;
}

.dl-download-grid.dl-grid-os-target .dl-card-free {
    grid-column: auto;
}

/* Both cards fill the same row height, so the installer card and the
   "What's new" panel read as one balanced, equal-size unit. The "What's new"
   content is centered vertically so it doesn't sit top-heavy. */
.dl-download-grid.dl-grid-os-target .dl-card {
    height: 100%;
    justify-content: center;
}


.dl-download-grid .dl-card {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    align-items: center;
    padding: 32px 24px 28px;
    gap: 14px;
}

.dl-download-grid .dl-card > .dl-os,
.dl-download-grid .dl-card > .dl-btn,
.dl-download-grid .dl-card > .dl-meta-row,
.dl-download-grid .dl-card > .dl-hint,
.dl-download-grid .dl-card > .dl-select {
    align-self: center;
    align-items: center;
}

.dl-download-grid .dl-card > .dl-select {
    width: 100%;
    max-width: none;
}

.dl-download-grid .dl-card > .dl-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-content: center;
    padding: 14px 14px !important;
    font-size: 14px !important;
    white-space: normal;
}

.dl-download-grid .dl-os {
    flex-direction: column;
    text-align: center;
    gap: 10px;
}

.dl-download-grid .dl-os-name,
.dl-download-grid .dl-os-meta {
    text-align: center;
}

.dl-meta-row {
    flex-wrap: wrap;
    justify-content: center;
}

.dl-free-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 1;
    text-align: left;
}

.dl-download-grid .dl-free-list {
    flex: 1;
    justify-content: center;
}

.dl-free-list li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
}

.dl-free-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.52em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--gold), var(--gold-bright));
    box-shadow: 0 0 0 3px color-mix(in srgb, #496a33 10%, transparent);
}

.dl-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 0 auto 14px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #436143;
    background: color-mix(in srgb, #496a33 12%, var(--card-solid));
    border: 1px solid color-mix(in srgb, #496a33 22%, transparent);
}

/* Equal-height feature cards (download page + homepage value band) */
.dl-features {
    grid-auto-rows: 1fr;
}

.dl-feature {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dl-feature p {
    flex: 1;
}

.dl-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    color: var(--gold);
    font-size: 24px;
}

.dl-feature-icon svg {
    display: block;
}

/* SEO prose — keyword themes live in the blog, not on this page */
.dl-seo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

.dl-seo-prose {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius);
    padding: 32px 28px;
}

.dl-seo-prose p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 14px;
}

.dl-seo-prose p:last-child {
    margin-bottom: 0;
}

.dl-seo-prose strong {
    color: var(--pearl-solid);
    font-weight: 600;
}

.dl-seo-prose a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
    transition: border-color 0.2s;
}

.dl-seo-prose a:hover {
    border-color: var(--accent);
}

/* Homepage value band reuses the equal card grid, contained */
.why-grid {
    max-width: 1120px;
    margin: 0 auto;
}

/* ============================================================
   INFO CARDS — Skills / Memory / Pricing (homepage)
   Compact glass cards with spotlight hover + gradient border,
   matching the bento card language but scaled down to sit
   cleanly inside these lighter sections.
   ============================================================ */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
}

.info-card {
    position: relative;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-radius: var(--radius);
    padding: 26px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}

.info-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), 0.13), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}

.info-card:hover::after {
    opacity: 1;
}

.info-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(var(--pearl-rgb), 0.18), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

.info-card:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-hi);
    background: var(--glass-strong);
}

.info-ico {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--gold);
    flex-shrink: 0;
}

.info-ico svg {
    display: block;
}

.info-card h3 {
    position: relative;
    font-size: 17px;
    font-weight: 700;
    color: var(--pearl-solid);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.info-card p {
    position: relative;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.62;
    margin: 0;
}

/* Wide panel cards (Memory + Pricing) */
.info-panel {
    position: relative;
    width: min(1120px, calc(100% - clamp(24px, 3vw, 56px)));
    max-width: none;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-radius: var(--radius);
    padding: 24px 28px;
    overflow: hidden;
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}

.info-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), 0.1), transparent 48%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}

.info-panel:hover::after {
    opacity: 1;
}

.info-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(var(--pearl-rgb), 0.18), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

.info-panel:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-hi);
    background: var(--glass-strong);
}

.info-panel-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.info-ico-lg {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.info-panel-copy h3 {
    position: relative;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pearl-solid);
    margin-bottom: 8px;
}

.info-panel-copy p {
    position: relative;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    max-width: 560px;
}

.info-panel-copy code {
    color: var(--gold-bright);
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 0.92em;
}

.info-panel-visual {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(var(--scrim-rgb, 6, 10, 8), 0.55);
    border: 1px solid rgba(var(--pearl-rgb), 0.09);
}

.mem-path {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 13px;
    color: var(--muted);
}

.mem-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.45);
    flex-shrink: 0;
}

.mem-folder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mem-live .mem-dot {
    background: var(--gold);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
}

.mem-live .mem-folder {
    color: var(--pearl-solid);
}

.info-panel-cta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    flex-shrink: 0;
}

.info-panel-cta .btn-lg {
    white-space: nowrap;
}

.info-note {
    font-size: 12.5px;
    color: var(--faint);
    max-width: 200px;
    line-height: 1.45;
}

/* ============================================================
   OVERVIEW 2-UP — Agent card (wide) + BYOK card (narrow)
   Qoder-style pitch pair. Cards restack vertically on tablets.
   ============================================================ */
.overview-grid {
    width: min(1120px, calc(100% - clamp(24px, 3vw, 56px)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    align-items: stretch;
}

/* The two overview cards: copy stacks over visual so the narrow
   BYOK card doesn't cramp its mem-list. Same white paper as .info-panel. */
.overview-grid .op-card {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 26px 28px;
    background: var(--card-solid);
    border: 1px solid var(--glass-border);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.04),
                0 18px 34px -26px rgba(var(--shadow-rgb), 0.28);
}

.overview-grid .op-card .info-panel-copy {
    max-width: none;
}

/* Copy uses the full card width: no narrow text column, no dead
   margin left or right of the paragraph. */
.overview-grid .op-card .info-panel-copy p {
    max-width: none;
}

/* Visual absorbs the leftover card height (flex: 1) so a stretched
   card fills with panel, never with a white blank gap. */
.overview-grid .op-card .info-panel-visual {
    width: 100%;
    min-width: 0;
    margin-top: 0;
    flex: 1;
}

.overview-grid .op-byok .info-panel-visual {
    justify-content: space-evenly;
}

/* Card accent: Agent = Forest Green, BYOK = Jelly Bean blue */
.overview-grid .op-agent {
    --card-accent-rgb: 51, 164, 37;   /* Forest Green */
}
.overview-grid .op-agent .info-ico-lg {
    background: rgba(var(--card-accent-rgb), 0.12);
    color: var(--azure-600);
}
.overview-grid .op-agent .mem-dot {
    background: rgba(var(--card-accent-rgb), 0.5);
}
.overview-grid .op-agent .mem-live .mem-dot {
    background: var(--azure-500);
}

.overview-grid .op-byok {
    --card-accent-rgb: 37, 128, 149;  /* Jelly Bean */
}
.overview-grid .op-byok .info-ico-lg {
    background: rgba(var(--card-accent-rgb), 0.12);
    color: var(--blue-deep);
}
.overview-grid .op-byok .mem-dot {
    background: rgba(var(--card-accent-rgb), 0.5);
}
.overview-grid .op-byok .mem-live .mem-dot {
    background: var(--blue);
}

/* --- Overview card fill: live agent loop, provider mini-grid, spec bar ---
   The visual is flex: 1, so any leftover card height is absorbed by the
   panel itself (the loop steps spread evenly inside it). No white blank
   gap can appear between copy and visual at any card height. */

/* 4-step agent loop with connector line and pulsing live step */
.op-loop {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}
/* One continuous connector, first dot centre to last dot centre
   (4 equal flex segments => centres at 12.5% / 87.5%). It stretches
   with the panel so the timeline never breaks. */
.op-loop::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12.5%;
    bottom: 12.5%;
    width: 1px;
    background: linear-gradient(rgba(var(--card-accent-rgb), 0.5), rgba(var(--card-accent-rgb), 0.12));
}
.op-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-height: 34px;
}
.op-step-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--card-solid);
    border: 1px solid rgba(var(--card-accent-rgb), 0.45);
    flex-shrink: 0;
}
.op-step-dot.done {
    background: rgb(var(--card-accent-rgb));
    border-color: transparent;
}
.op-step.live .op-step-dot {
    background: var(--azure-500);
    border-color: transparent;
    animation: op-pulse 2.2s ease-out infinite;
}
.op-step-name {
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 13px;
    font-weight: 700;
    color: var(--pearl-solid);
    min-width: 52px;
}
.op-step-note {
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@keyframes op-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--card-accent-rgb), 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(var(--card-accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--card-accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
    .op-step.live .op-step-dot { animation: none; }
}

/* 2-col provider mini-grid inside the BYOK visual */
.op-prov-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--pearl-rgb), 0.09);
}
.op-prov {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(var(--pearl-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--pearl-rgb), 0.04);
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 12px;
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.op-prov .pdot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
}

/* Pinned spec bar — hairline top, mono micro-facts with accent ticks */
.op-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--hairline);
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 11.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--faint);
}
.op-specs span::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: rgba(var(--card-accent-rgb), 0.65);
    margin-right: 7px;
    vertical-align: 1px;
}

/* Full-width provider marquee beneath the two cards,
   contained to the same content column so it lines up with the grid. */
.overview-marquee {
    width: min(1120px, calc(100% - clamp(24px, 3vw, 56px)));
    margin: 22px auto 0;
    border-top: 1px solid var(--hairline);
    padding-top: 18px;
}

/* ── Overview band: near full-bleed ─────────────────────────────────
   The two cards span the viewport with a 24px outside gutter and a
   20px gap between them; head and marquee align to the same gutter. */
#overview.section {
    padding-inline: 24px;
}
#overview .section-head.sec-ed {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-inline: clamp(10px, 4vw, 55px);
    display: block;
    text-align: center;
}
#overview .section-head.sec-ed .eyebrow { margin-bottom: 12px; }
#overview .section-head.sec-ed .sec-anchor { margin-left: 10px; }
#overview .section-head.sec-ed h2 { max-width: none; margin-inline: auto; }
#overview .section-head.sec-ed .section-answer {
    margin: 16px auto 0 !important;
    text-align: left;
}
#overview .overview-marquee {
    width: 100%;
    max-width: none;
    margin: 22px 0 0;
    padding: 18px 24px 20px;
    border-bottom: 1px solid var(--hairline);
}

#overview .section-head.sec-ed .section-answer {
    background: var(--card-solid);
    border: 1px solid var(--glass-border);
    border-left: 3px solid #33a425;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04),
                0 18px 36px -26px rgba(var(--shadow-rgb), .30);
    padding: 18px 22px;
    font-size: 15px;
    color: var(--slate-300);
}

/* ── Tabbed showcase — Qoder-style "Build Your Way" band ─────────────
   Four stories share one compact panel: centered pill tabs swap the
   card below in place (CSS-only radios + sibling selectors). Each tab
   pairs the original copy with a colored visual plate carrying a glass
   mini-UI card — the page stays short without losing any content. */
.ov-showcase { position: relative; }
.ov-radio { position: absolute; opacity: 0; pointer-events: none; }

.ov-tablist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 26px;
}
.ov-tablist label {
    padding: 11px 24px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--slate-300);
    background: var(--card-deep);
    border: 1px solid transparent;
    transition: background .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), box-shadow .25s var(--ease),
                transform .25s var(--ease);
    user-select: none;
}
.ov-tablist label:hover {
    color: var(--ink);
    background: var(--ink-700);
    transform: translateY(-1px);
}
#ovt-agent:checked ~ .ov-tablist [for="ovt-agent"],
#ovt-byok:checked ~ .ov-tablist [for="ovt-byok"],
#ovt-skills:checked ~ .ov-tablist [for="ovt-skills"],
#ovt-memory:checked ~ .ov-tablist [for="ovt-memory"] {
    background: var(--card-solid);
    color: var(--pearl-solid);
    border-color: var(--hairline-hi);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06),
                0 12px 28px -14px rgba(var(--shadow-rgb), .32);
}
#ovt-agent:focus-visible ~ .ov-tablist [for="ovt-agent"],
#ovt-byok:focus-visible ~ .ov-tablist [for="ovt-byok"],
#ovt-skills:focus-visible ~ .ov-tablist [for="ovt-skills"],
#ovt-memory:focus-visible ~ .ov-tablist [for="ovt-memory"] {
    outline: 2px solid rgba(var(--accent-rgb), .75);
    outline-offset: 2px;
}

/* Rail — Qoder peek carousel: the active card centers on screen with
   half of its neighbours visible at both edges; selecting a tab slides
   the track by one card step. JS clones front/back sets so the first
   and last tabs also have neighbours (progressive: without JS the rail
   still works, just without left peek on tab 1 / right peek on tab 4). */
.ov-showcase { --ovc: clamp(430px, 46vw, 880px); --ovg: 24px; }
.ov-viewport {
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 6px 0 16px;
}
.ov-track {
    --ovi: 0;
    display: flex;
    gap: var(--ovg);
    width: max-content;
    transform: translateX(calc((100vw - var(--ovc)) / 2
        - (var(--ovi) + var(--ovbase, 0)) * (var(--ovc) + var(--ovg))));
    transition: transform .62s var(--ease-soft);
}
.ov-track.ov-rail-js { --ovbase: 4; }
#ovt-agent:checked  ~ .ov-viewport .ov-track { --ovi: 0; }
#ovt-byok:checked   ~ .ov-viewport .ov-track { --ovi: 1; }
#ovt-skills:checked ~ .ov-viewport .ov-track { --ovi: 2; }
#ovt-memory:checked ~ .ov-viewport .ov-track { --ovi: 3; }
@media (prefers-reduced-motion: reduce) {
    .ov-track { transition: none; }
}

.ov-panel {
    flex: 0 0 var(--ovc);
    width: var(--ovc);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    background: var(--card-solid);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04),
                0 26px 54px -30px rgba(var(--shadow-rgb), .30);
}

.ov-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(30px, 3.6vw, 56px);
}
.ov-copy h3 {
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 750;
    letter-spacing: -0.028em;
    line-height: 1.12;
    color: var(--pearl-solid);
    margin: 14px 0 12px;
}
.ov-copy .ov-subh {
    font-size: 16px;
    font-weight: 700;
    color: rgb(var(--card-accent-rgb, 51, 164, 37));
    margin: 0 0 8px;
}
.ov-copy > p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--slate-300);
    margin: 0 0 10px;
}
.ov-badge-row { display: flex; align-items: center; gap: 14px; }
.ov-badge-row .eyebrow { margin: 0; color: rgb(var(--card-accent-rgb, 51, 164, 37)); }
.ov-badge-row .sec-anchor { margin-left: auto; }
.ov-copy .op-specs { margin-top: 22px; padding-top: 14px; }

/* Visual plate — colored field + blueprint grid + floating glass card */
.ov-plate {
    position: relative;
    margin: 14px 14px 14px 0;
    border-radius: 16px;
    overflow: hidden;
    min-height: 380px;
    display: grid;
    place-items: center;
    padding: clamp(18px, 2.4vw, 30px);
    isolation: isolate;
}
.ov-plate::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 26px);
    opacity: .30;
    pointer-events: none;
}
.plate-agent { background: #e3f0d9; }
.plate-agent::after {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: -1;
    /* Matte glass finish — lighter blur so the neural filaments read */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .10) 100%),
        url('/media/img/background-agent.png') center / cover no-repeat;
    filter: blur(18px) saturate(1.10) brightness(1.05);
}
.plate-byok { background: #dbeaf2; }
.plate-byok::after {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: -1;
    /* Matte glass finish — same recipe as the skills plate */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .12) 100%),
        url('/media/img/background-byok.png') center / cover no-repeat;
    filter: blur(22px) saturate(1.10) brightness(1.04);
}
.plate-skills { background: #f4e3d3; }
.plate-skills::after {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: -1;
    /* Matte glass finish — same recipe as the hero frost: milky film +
       fine grain over a 22px blur; bleeds past the rounded corners */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .10) 55%, rgba(255, 255, 255, .16) 100%),
        url('/media/img/background-skills.png') center / cover no-repeat;
    filter: blur(22px) saturate(1.12) brightness(1.06);
}
.plate-memory { background: #e2ead8; }
.plate-memory::after {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: -1;
    /* Matte glass finish — same recipe as the other plate artworks */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .12) 100%),
        url('/media/img/background-memory.png') center / cover no-repeat;
    filter: blur(22px) saturate(1.10) brightness(1.05);
}

.plate-card {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 14px;
    box-shadow: 0 30px 60px -30px rgba(39, 40, 38, .45),
                0 2px 6px rgba(39, 40, 38, .06);
    padding: clamp(18px, 2.2vw, 26px);
}
.plate-stack { display: grid; gap: 10px; }
.plate-stack .info-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--hairline);
    box-shadow: none;
}
.plate-stack .info-card::before,
.plate-stack .info-card::after { display: none; }
.plate-stack .info-card .info-ico { width: 30px; height: 30px; border-radius: 9px; }
.plate-stack .info-card .info-ico svg { width: 16px; height: 16px; }
.plate-stack .info-card h3 { font-size: 14px; margin: 0 0 3px; color: var(--pearl-solid); }
.plate-stack .info-card p { font-size: 12.5px; line-height: 1.5; color: var(--slate-300); margin: 0; }
.plate-stack .skill-chips { margin-top: 7px; gap: 5px; }
.plate-stack .skill-chips span { font-size: 10.5px; padding: 3px 9px; }
.plate-card { padding: clamp(14px, 1.8vw, 20px); }
.plate-card .op-loop { min-height: 210px; }
.plate-card .mem-path { background: rgba(var(--cream-rgb), .05); border: 1px solid rgba(var(--cream-rgb), .12); }

/* ── Memory plate — IDE "memory window" micro-widget ─────────────
   Title-bar dots, icon tree rows on a connector rail, trailing
   status dots, blinking caret after the live row. */
.mem-win { padding: 0; overflow: hidden; }
.mem-bar {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    background: rgba(var(--cream-rgb), .05);
    border-bottom: 1px solid rgba(var(--cream-rgb), .10);
}
.mem-bar-dots i {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(var(--cream-rgb), .28);
    margin-right: 5px;
}
.mem-bar-dots i:nth-child(2) { background: rgba(var(--cream-rgb), .20); }
.mem-bar-dots i:nth-child(3) { background: rgba(var(--cream-rgb), .13); }

.mem-tree {
    position: relative;
    padding: 16px 16px 18px;
    display: grid;
    gap: 9px;
}
.mem-tree::before {
    content: '';
    position: absolute;
    left: 31px;
    top: 26px;
    bottom: 30px;
    width: 1px;
    background: linear-gradient(rgba(51, 164, 37, .45), rgba(51, 164, 37, .10));
}
.mem-win .mem-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 10px 13px !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(var(--cream-rgb), .12) !important;
    box-shadow: 0 2px 8px -4px rgba(39, 40, 38, .18);
}
.mem-ic { flex: none; color: #33a425; }
.mem-row .mem-folder {
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 12.5px;
    color: var(--pearl-solid);
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mem-win .mem-row .mem-dot {
    order: 3;
    margin-left: auto;
    flex: none;
    width: 8px; height: 8px;
    background: rgba(var(--cream-rgb), .28);
    box-shadow: none;
}
.mem-win .mem-live .mem-dot {
    background: #33a425;
    animation: mem-pulse 2.2s ease-out infinite;
}
@keyframes mem-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(51, 164, 37, .35); }
    70%  { box-shadow: 0 0 0 8px rgba(51, 164, 37, 0); }
    100% { box-shadow: 0 0 0 0 rgba(51, 164, 37, 0); }
}
.mem-caret {
    order: 2;
    flex: none;
    width: 7px; height: 14px;
    background: #33a425;
    border-radius: 1px;
    animation: mem-blink 1.1s steps(1) infinite;
}
@keyframes mem-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .mem-caret { animation: none; }
    .mem-win .mem-live .mem-dot { animation: none; }
}

/* BYOK console — blue icon accents + provider chips as mini-cards */
.byok-win .mem-ic { color: #258095; }
.byok-win .mem-tree::before { height: 118px; bottom: auto; }
.byok-win .op-prov-grid {
    border-top-color: rgba(var(--cream-rgb), .12);
}
.byok-win .op-prov {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(var(--cream-rgb), .12);
    box-shadow: 0 2px 8px -4px rgba(39, 40, 38, .18);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.byok-win .op-prov:hover {
    transform: translateY(-1px);
    border-color: var(--hairline-hi);
}

/* ── Features peek carousel — same rail, five tabs ───────────── */
#ftt-tools:checked    ~ .ov-viewport .ov-track { --ovi: 0; }
#ftt-codebase:checked ~ .ov-viewport .ov-track { --ovi: 1; }
#ftt-run:checked      ~ .ov-viewport .ov-track { --ovi: 2; }
#ftt-mcp:checked      ~ .ov-viewport .ov-track { --ovi: 3; }
#ftt-win:checked      ~ .ov-viewport .ov-track { --ovi: 4; }
#ftt-sec:checked      ~ .ov-viewport .ov-track { --ovi: 5; }

/* Matte-glass plate artwork — same recipe as the overview showcase plates.
   Each features card gets a base accent (fallback while the art loads) plus a
   grain + milky-film + blurred image layer that bleeds -30px past the corners.
   Drop the art into /media/img/ and it renders (gitignored, so push via scp). */
.plate-ft-tools    { --ft-art: url('/media/img/background-ft-tools.png');    background: #e3f0d9; }
.plate-ft-codebase { --ft-art: url('/media/img/background-ft-codebase.png'); background: #dbeaf2; }
.plate-ft-run      { --ft-art: url('/media/img/background-ft-run.png');      background: #e2ead8; }
.plate-ft-mcp      { --ft-art: url('/media/img/background-ft-mcp.png');      background: #f4e3d3; }
.plate-ft-win      { --ft-art: url('/media/img/background-ft-win.png');      background: #dbeaf2; }
.plate-ft-sec      { --ft-art: url('/media/img/background-ft-sec.png');      background: #f6ecda; }
.plate-ft-tools::after,
.plate-ft-codebase::after,
.plate-ft-run::after,
.plate-ft-mcp::after,
.plate-ft-win::after,
.plate-ft-sec::after {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: -1;
    /* Matte glass finish — fine grain + milky film over a mid blur so the
       painterly art reads through a frosted sheet, not as a hard photo. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .12) 100%),
        var(--ft-art) center / cover no-repeat;
    filter: blur(20px) saturate(1.10) brightness(1.05);
}

/* Glyph tile in the copy column (was #features .card .glyph) */
#features .ov-copy .glyph {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(67, 97, 67, .07);
    border: 1px solid rgba(67, 97, 67, .16);
    color: #436143;
    border-radius: 11px;
}
#features .ov-copy h3 .grad {
    color: rgb(var(--card-accent-rgb, 51, 164, 37));
    background: none;
    -webkit-text-fill-color: rgb(var(--card-accent-rgb, 51, 164, 37));
}
#features .ov-copy .sec-list { margin: 14px 0 0; }

/* Features band: same near-full-bleed gutter + centered head as overview */
#features.section {
    padding-inline: 24px;
}
#features .section-head.sec-ed {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-inline: clamp(10px, 4vw, 55px);
    display: block;
    text-align: center;
}
#features .section-head.sec-ed .eyebrow { margin-bottom: 12px; }
#features .section-head.sec-ed .sec-anchor { margin-left: 10px; }
#features .section-head.sec-ed h2 { max-width: none; margin-inline: auto; }
#features .section-head.sec-ed > p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1300px) and (min-width: 901px) {
    .ov-panel { grid-template-columns: 1fr; }
    .ov-plate { margin: 0 14px 14px; min-height: 260px; }
}
@media (max-width: 900px) {
    .ov-viewport { overflow: visible; width: 100%; margin-left: 0; }
    .ov-track {
        width: 100%;
        flex-direction: column;
        transform: none !important;
        gap: 18px;
    }
    .ov-dup { display: none !important; }
    .ov-panel {
        width: 100%;
        grid-template-columns: 1fr;
        border-radius: 16px;
    }

    /* tab strip scrolls sideways instead of wrapping to two rows */
    .ov-tablist {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 8px;
        margin: 16px 0;
        padding: 4px 16px 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ov-tablist::-webkit-scrollbar { display: none; }
    .ov-tablist label {
        flex: 0 0 auto;
        padding: 9px 16px;
        font-size: 13.5px;
    }

    /* copy: tighter, plate hugs its content — no empty green field */
    .ov-copy { padding: 24px 20px 6px; }
    .ov-copy h3 { font-size: 24px; margin: 10px 0 10px; }
    .ov-copy > p { font-size: 14px; line-height: 1.65; }
    .ov-copy .op-specs { margin-top: 14px; padding-top: 12px; font-size: 10.5px; gap: 6px 14px; }
    .ov-plate {
        margin: 6px 12px 12px;
        min-height: 0;
        padding: 16px;
    }
    .plate-card { padding: 16px; }
    .plate-card .op-loop { min-height: 0; gap: 2px; }
    .op-step { min-height: 30px; }
    .op-step-note { font-size: 11px; }
    #features .ov-copy .glyph { width: 34px; height: 34px; border-radius: 9px; }
    #features .ov-copy .glyph svg { width: 17px; height: 17px; }
}
@media (max-width: 560px) {
    .ov-copy { padding: 20px 16px 4px; }
    .ov-copy h3 { font-size: 22px; }
    .ov-plate { padding: 12px; margin: 4px 10px 10px; }
    .plate-card { padding: 14px; }
    .op-step-name { min-width: 46px; font-size: 12px; }
    .op-step-note { font-size: 10.5px; }
}
/* Top summary — first text after the hero strip */
.top-summary {
    max-width: 780px;
    margin: 0 auto;
    padding: 34px 24px 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: rgba(226, 232, 240, 0.82);
    text-align: center;
}

/* "In short" reads as an editorial eyebrow chip, not inline prose */
.top-summary-label {
    display: block;
    width: max-content;
    margin: 0 auto 14px;
    padding: 5px 14px;
    border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 9%, transparent);
    color: var(--gold);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* SEO/AEO signal card inside the hero copy column.
   It sits at the very top of the text stream (before the living scene),
   so scanners read the summary + audience signals first.
   Designed as a quiet glass card: label chip + left-aligned text rows,
   so every line starts from the same left edge. */
.hero-signal-card {
    margin-top: 26px;
    max-width: 680px;
    text-align: left;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gold) 6%, transparent),
        color-mix(in srgb, var(--gold) 2%, transparent));
    border: 1px solid color-mix(in srgb, var(--gold) 16%, transparent);
    border-radius: 16px;
    padding: 4px 22px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hero-signal-card .hsc-row { padding: 15px 0; }
.hero-signal-card .hsc-row + .hsc-row {
    border-top: 1px solid color-mix(in srgb, var(--gold) 12%, transparent);
}
.hero-signal-card .hsc-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
}
.hero-signal-card .hsc-label::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 70%, transparent);
}
.hero-signal-card .hsc-text {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(var(--pearl-rgb), .68);
}

/* Direct answer paragraph immediately after a question heading.
   Rendered as a quiet answer callout: centered as a block under the
   centered heading, but the text itself is left-aligned inside the
   card so every line starts from the same left edge. */
.section-answer {
    margin: 16px auto 0 !important;
    max-width: 720px;
    text-align: left;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(226, 232, 240, 0.72);
    background: rgba(var(--pearl-rgb), .035);
    border: 1px solid rgba(var(--pearl-rgb), .09);
    border-left: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
    border-radius: 12px;
    padding: 13px 18px;
}

.section-head .section-answer {
    margin-left: auto;
    margin-right: auto;
}

/* The FAQ band is a light paper surface (#ececec) — the answer card is
   re-inked as a white index card: navy hairline, soft tinted shadow and
   a green bookmark tick that ties the head to the accordion chevrons.
   Left-aligned to the heading edge (overrides the centered base margin). */
#faq .section-answer {
    margin: 18px 0 0 !important;
    max-width: 56ch;
    color: #3a4149;
    background: #ffffff;
    border: 1px solid rgba(9, 38, 52, .12);
    border-radius: 12px;
    box-shadow: 0 18px 34px -26px rgba(9, 38, 52, .4);
    padding: 20px 22px 18px;
    font-size: 15px;
    line-height: 1.7;
    position: relative;
}
#faq .section-answer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 22px;
    width: 34px;
    height: 3px;
    background: #6da32a;
    border-radius: 0 0 3px 3px;
}

/* Marquee nested inside an info panel spans the full card width */
.info-panel .prov-marquee {
    grid-column: 1 / -1;
    margin-top: 6px;
}

/* --- Comparison table card (same container as info panels) --- */
.cmp-card {
    position: relative;
    width: min(1120px, calc(100% - clamp(24px, 3vw, 56px)));
    margin: 2rem auto 0;
    background: var(--card-solid);
    border: 1px solid var(--glass-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 18px;
    padding: 32px 36px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04),
                0 26px 54px -30px rgba(var(--shadow-rgb), .30);
    overflow: hidden;
}

.cmp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(var(--pearl-rgb), 0.18), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

.cmp-card h3 {
    position: relative;
    text-align: center;
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--pearl-solid);
}

.cmp-sub {
    position: relative;
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
    margin: 6px auto 20px;
    max-width: 560px;
    line-height: 1.55;
}

.cmp-scroll {
    position: relative;
    overflow-x: auto;
}

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cmp-table th,
.cmp-table td {
    padding: 13px 18px;
}

.cmp-table thead th {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    text-align: center;
    border-bottom: 1px solid rgba(var(--cream-rgb), .14);
    padding-bottom: 14px;
}

.cmp-table thead th:first-child {
    text-align: left;
}

.cmp-table thead th.th-accent {
    color: #496a33;
}
.cmp-table thead th.th-accent span,
.cmp-table thead th.th-accent {
    white-space: nowrap;
}
.cmp-table td:nth-child(3) {
    background: rgba(51, 164, 37, .05);
}
.cmp-table thead th:nth-child(3) {
    background: rgba(51, 164, 37, .07);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.cmp-table tbody td {
    text-align: center;
    color: var(--pearl);
    border-top: 1px solid rgba(var(--pearl-rgb), .06);
}

.cmp-table tbody tr:first-child td {
    border-top: 0;
}

.cmp-table tbody td:first-child {
    text-align: left;
    font-weight: 600;
}

.cmp-table tbody tr {
    transition: background .25s var(--ease);
}

.cmp-table tbody tr:hover {
    background: rgba(var(--pearl-rgb), .03);
}

/* check / minus badges */
.cmp-table .ck,
.cmp-table .no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    vertical-align: middle;
    font-size: 13px;
}

.cmp-table .ck {
    color: #fff;
    background: #33a425;
    border: none;
    box-shadow: 0 2px 8px -2px rgba(51, 164, 37, .55);
}

.cmp-table .no {
    color: var(--faint);
    background: var(--card-deep);
    border: 1px solid var(--hairline);
}

@media (max-width: 640px) {
    .cmp-card {
        padding: 20px 16px;
    }

    .cmp-table th,
    .cmp-table td {
        padding: 10px 10px;
        font-size: 13px;
    }
}

/* --- Info cards responsive --- */
@media (max-width: 900px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .info-panel {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 20px;
    }

    .info-panel-visual {
        min-width: 0;
    }

    .info-panel-cta {
        align-items: flex-start;
        text-align: left;
    }

    .info-note {
        max-width: none;
    }

    /* Overview 2-up collapses to a single column on tablets/phones */
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .overview-grid .op-card {
        padding: 22px 22px;
    }
    .overview-marquee {
        margin-top: 18px;
        padding-top: 14px;
    }

    #overview .overview-marquee {
        margin-top: 18px;
        padding: 14px 24px 0;
    }
}

@media (max-width: 560px) {
    .info-card {
        padding: 22px 20px;
    }

    .info-panel {
        padding: 18px 16px;
    }
}

/* ============================================================
   PROVIDERS MARQUEE — seamless infinite scroll
   ============================================================ */
.providers {
    position: relative;
    /* Same gutter formula as .section — without it the sec-ed head and
       answer card touch the screen edges on phones/tablets. Desktop is
       unchanged: at wide viewports the 1120px head/panel still center. */
    padding: 32px clamp(20px, 4vw, 70px) 48px;
    overflow: hidden;
}

.providers .eyebrow {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 28px;
}

.marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.marquee-track {
    display: flex;
    gap: 28px;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
}

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

.provider-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid rgba(var(--pearl-rgb), 0.08);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.provider-chip:hover {
    background: var(--glass-strong);
    border-color: rgba(var(--pearl-rgb), 0.15);
    transform: translateY(-2px);
}

.pdot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.333%);
    }
}

/* Langs track travels right to left (standard marquee direction) */
.langs-track {
    gap: 14px;
    animation: langsScroll 32s linear infinite;
}

@keyframes langsScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.333%);
    }
}

/* --- Download Page Responsive --- */
@media (max-width: 760px) {
    .dl-hero {
        padding-top: 140px;
    }

    .dl-steps {
        flex-direction: column;
        gap: 16px;
    }

    .dl-step-connector {
        width: auto;
        height: 32px;
    }

    .dl-step-connector::before {
        top: 0;
        bottom: 0;
        left: 50%;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.08));
        transform: translateX(-50%);
    }

    .dl-step-connector::after {
        content: '↓';
    }

    .dl-features {
        grid-template-columns: 1fr;
    }

    .dl-req-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .dl-req-value {
        text-align: left;
    }

    .dl-privacy-card {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
    }

    .dl-card {
        padding: 36px 20px 32px;
    }

    .dl-meta-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .provider-chip {
        padding: 10px 18px;
        font-size: 13px;
        gap: 8px;
    }

    .marquee-track {
        gap: 18px;
        animation-duration: 20s;
    }
}

/* (duplicate pricing block removed — canonical block is above) */

/* (third duplicate pricing block removed — canonical block is above) */

/* ==========================================================================
   LEGAL PAGES — Terms of Service, Privacy, EULA
   ========================================================================== */

/* --- Hero --- */
.legal-hero {
    padding: 140px 24px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.legal-hero-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

.legal-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--gold-rgb), 0.1);
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 20px;
}

.legal-pill svg {
    opacity: 0.8;
}

.legal-hero h1,
.legal-hero h2 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    color: var(--heading);
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.legal-hero-sub {
    font-size: 17px;
    color: var(--body);
    line-height: 1.7;
    margin: 0 0 24px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.legal-meta {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.legal-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--faint);
}

.legal-meta-item svg {
    opacity: 0.5;
}

/* --- Body Layout --- */
.legal-body {
    padding: 0 24px 100px;
}

.legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

/* --- Sticky Sidebar TOC --- */
.legal-toc {
    display: block;
}

.legal-toc-sticky {
    position: sticky;
    top: 100px;
}

.legal-toc-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--faint);
    margin: 0 0 16px;
    padding-left: 12px;
}

.legal-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 2px solid rgba(var(--pearl-rgb), 0.06);
}

.legal-toc-link {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--faint);
    text-decoration: none;
    padding: 6px 12px;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    border-radius: 0 6px 6px 0;
}

.legal-toc-link:hover {
    color: var(--heading);
    background: rgba(var(--pearl-rgb), 0.03);
}

.legal-toc-link.active {
    color: var(--gold);
    border-left-color: var(--gold);
    background: rgba(var(--gold-rgb), 0.05);
}

/* --- Main Content --- */
.legal-content {
    max-width: 720px;
    min-width: 0;
}

/* --- Sections --- */
.legal-section {
    padding: 40px 0;
    border-bottom: 1px solid rgba(var(--pearl-rgb), 0.06);
    scroll-margin-top: 90px;
}

.legal-section:first-child {
    padding-top: 0;
}

.legal-section:last-of-type {
    border-bottom: none;
}

.legal-section h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 20px;
    line-height: 1.3;
}

.legal-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(var(--gold-rgb), 0.1);
    color: var(--gold);
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

.legal-section p {
    font-size: 15px;
    color: var(--body);
    line-height: 1.8;
    margin: 0 0 16px;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s;
}

.legal-section a:hover {
    opacity: 0.8;
}

.legal-section strong {
    color: var(--heading);
    font-weight: 600;
}

/* --- Lists --- */
.legal-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.legal-section ul li {
    position: relative;
    font-size: 15px;
    color: var(--body);
    line-height: 1.8;
    padding-left: 22px;
    margin-bottom: 10px;
}

.legal-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--gold);
    opacity: 0.6;
}

.legal-section ul li:last-child {
    margin-bottom: 0;
}

/* --- Callout Boxes --- */
.legal-callout {
    display: flex;
    gap: 14px;
    background: rgba(var(--gold-rgb), 0.06);
    border: 1px solid rgba(var(--gold-rgb), 0.15);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 20px;
}

.legal-callout-warning {
    background: rgba(255, 100, 80, 0.06);
    border-color: rgba(255, 100, 80, 0.15);
}

.legal-callout-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1.4;
}

.legal-callout-body {
    font-size: 14px;
    color: var(--body);
    line-height: 1.7;
}

.legal-callout-body strong {
    color: var(--heading);
}

/* --- Blog byline (author + dates inside article content, GEO/E-E-A-T) --- */
.post-byline {
    font-size: 12.5px;
    color: rgba(var(--pearl-rgb), 0.45);
    letter-spacing: 0.02em;
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(var(--pearl-rgb), 0.07);
}

.post-byline strong {
    color: rgba(var(--pearl-rgb), 0.72);
    font-weight: 600;
}

/* --- Key takeaway box (AEO: quotable direct answer at the top) --- */
.post-takeaway {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.07), rgba(var(--gold-rgb), 0.03));
    border: 1px solid rgba(var(--gold-rgb), 0.16);
    border-left: 3px solid var(--gold);
    border-radius: 12px;
    padding: 22px 24px 20px;
    margin: 0 0 26px;
}

.post-takeaway-label {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    background: rgba(var(--gold-rgb), 0.12);
    border: 1px solid rgba(var(--gold-rgb), 0.22);
    border-radius: 6px;
    padding: 3px 9px;
    margin-bottom: 12px;
}

.post-takeaway p {
    font-size: 15px;
    color: var(--body);
    line-height: 1.8;
    margin: 0;
}

.post-takeaway p strong {
    color: var(--heading);
}

.blog-crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--faint);
    margin: 0 0 16px;
}

.blog-crumbs a {
    color: var(--gold);
    text-decoration: none;
}

.blog-crumbs a:hover {
    text-decoration: underline;
}

.blog-index-h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 8px;
}

.blog-index-lead {
    font-size: 15px;
    color: var(--body);
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: 62ch;
}

.blog-topics {
    overflow-x: auto;
    margin: 8px 0 0;
}

.blog-topics table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.blog-topics th,
.blog-topics td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(var(--pearl-rgb), 0.08);
    vertical-align: top;
    color: var(--body);
}

.blog-topics th {
    color: var(--heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blog-topics a {
    color: var(--gold);
}

.blog-exp,
.post-shot {
    margin: 18px 0 22px;
}

.blog-exp img,
.post-shot img {
    display: block;
    width: 100%;
    max-height: 480px;
    height: auto;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px;
    border: 1px solid rgba(var(--pearl-rgb), 0.10);
}

.blog-exp figcaption,
.post-shot figcaption {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--faint);
    line-height: 1.5;
}

/* Blog index FAQ — paper cards with green bookmark, answers always visible */
.blog-faq {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    margin: 72px calc(50% - 50vw) 0;
    padding: 72px max(24px, calc(50vw - 550px)) 80px;
    background: #ececec;
}

.blog-faq-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: #55700f;
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.blog-faq-kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    background: #6da32a;
}

.blog-faq-left h2 {
    margin: 0 0 14px;
    color: #17181a;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.blog-faq-note {
    margin: 0;
    max-width: 34ch;
    color: #6b7075;
    font-size: 14.5px;
    line-height: 1.65;
}

.blog-faq-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-faq-card {
    position: relative;
    background: #f7f7f8;
    border: none;
    border-radius: 10px;
    padding: 20px 22px 18px 56px;
    box-shadow: none;
}

.blog-faq-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 5px;
    background: #6da32a;
    border-radius: 0 3px 3px 0;
}

.blog-faq-num {
    position: absolute;
    left: 16px;
    top: 22px;
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #55700f;
}

.blog-faq-card h3 {
    margin: 0 0 8px;
    color: #17181a;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
}

.blog-faq-card p {
    margin: 0;
    color: #43474b;
    font-size: 14.5px;
    line-height: 1.65;
}

@media (max-width: 800px) {
    .blog-faq {
        grid-template-columns: 1fr;
        gap: 28px;
        margin: 56px calc(50% - 50vw) 0;
        padding: 48px 20px 56px;
    }

    .blog-faq-card {
        padding: 18px 18px 16px 52px;
    }
}

/* --- Comparison table (AEO: structured answer support) --- */
.post-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(var(--pearl-rgb), 0.09);
    background: rgba(var(--pearl-rgb), 0.025);
    margin: 0 0 22px;
    scrollbar-width: thin;
}

.post-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.post-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(var(--pearl-rgb), 0.55);
    text-align: center;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(var(--pearl-rgb), 0.09);
    background: rgba(var(--pearl-rgb), 0.03);
    white-space: nowrap;
}

.post-table thead th:first-child {
    text-align: left;
}

.post-table thead th:last-child {
    color: var(--gold);
}

.post-table tbody td {
    font-size: 13.5px;
    color: var(--body);
    line-height: 1.5;
    text-align: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(var(--pearl-rgb), 0.055);
}

.post-table tbody td:first-child {
    text-align: left;
    color: var(--heading);
    font-weight: 500;
    white-space: nowrap;
}

.post-table tbody tr:last-child td {
    border-bottom: none;
}

.post-table tbody tr:hover {
    background: rgba(var(--gold-rgb), 0.035);
}

/* Circular check / minus badges inside the table */
.post-ck,
.post-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.post-ck {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.post-no {
    color: rgba(var(--pearl-rgb), 0.35);
    background: rgba(var(--pearl-rgb), 0.05);
    border: 1px solid rgba(var(--pearl-rgb), 0.1);
}

/* --- Contact Card --- */
.legal-contact-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(var(--pearl-rgb), 0.03);
    border: 1px solid rgba(var(--pearl-rgb), 0.08);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.legal-contact-method {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--heading);
    font-weight: 500;
}

.legal-contact-method svg {
    color: var(--gold);
    opacity: 0.7;
    flex-shrink: 0;
}

/* --- Disclaimer --- */
.legal-disclaimer {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(var(--pearl-rgb), 0.02);
    border: 1px solid rgba(var(--pearl-rgb), 0.06);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 40px;
}

.legal-disclaimer svg {
    color: var(--faint);
    flex-shrink: 0;
    margin-top: 2px;
}

.legal-disclaimer p {
    font-size: 13px;
    color: var(--faint);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* --- Back & Print --- */
.legal-back-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(var(--pearl-rgb), 0.06);
}

.legal-back,
.legal-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--faint);
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(var(--pearl-rgb), 0.1);
    background: rgba(var(--pearl-rgb), 0.03);
    cursor: pointer;
    transition: all 0.2s;
}

.legal-back:hover,
.legal-print-btn:hover {
    color: var(--heading);
    border-color: rgba(var(--pearl-rgb), 0.2);
    background: rgba(var(--pearl-rgb), 0.06);
    transform: translateY(-1px);
}

.legal-print-btn {
    font-family: inherit;
}

/* --- Print Styles --- */
@media print {
    .legal-hero::before,
    .aurora,
    .grain,
    .cursor-glow,
    .legal-toc,
    .legal-print-btn,
    #toTop,
    .nav-shell,
    .footer,
    footer + div {
        display: none !important;
    }

    .legal-hero {
        padding: 20px 0;
    }

    .legal-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .legal-section {
        page-break-inside: avoid;
    }

    body {
        background: white;
        color: #111;
    }
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .legal-hero {
        padding: 120px 20px 40px;
    }

    .legal-hero h1,
    .legal-hero h2 {
        font-size: 28px;
    }

    .legal-hero-sub {
        font-size: 15px;
    }

    .legal-meta {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .legal-body {
        padding: 0 20px 60px;
    }

    .legal-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .legal-toc {
    margin-bottom: 20px;
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(var(--pearl-rgb), 0.06);
    }

    .legal-toc-sticky {
        position: relative;
        top: 0;
    }

    .legal-toc-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        border-left: none;
    }

    .legal-toc-link {
        font-size: 12px;
        padding: 5px 10px;
        border-left: none;
        margin-left: 0;
        background: rgba(var(--pearl-rgb), 0.04);
        border-radius: 6px;
    }

    .legal-toc-link.active {
        background: rgba(var(--gold-rgb), 0.12);
    }

    .legal-section h2 {
        font-size: 18px;
    }

    .legal-num {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .legal-back-wrap {
        flex-direction: column;
    }

    .legal-back,
    .legal-print-btn {
        width: 100%;
        justify-content: center;
    }

    /* Blog SEO/AEO components, mobile */
    .post-takeaway {
        padding: 18px 16px 16px;
    }

    .post-takeaway p {
        font-size: 14px;
    }

    .post-table thead th {
        padding: 11px 10px;
        font-size: 10px;
    }

    .post-table tbody td {
        padding: 10px;
        font-size: 12.5px;
    }

    .post-table tbody td:first-child {
        white-space: normal;
    }
}

/* Legal sub-headings (3.1, 3.2, etc.) */
.legal-section h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin: 24px 0 12px;
    padding-left: 44px;
}

/* ---- Nav Avatar (Account Panel) ---- */
.nav-avatar-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-left: 8px;
}

.nav-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-deep), var(--gold));
    color: var(--on-accent);
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: transform 0.25s var(--ease);
    border: 2px solid transparent;
}

.nav-avatar-link:hover .nav-avatar {
    transform: scale(1.08);
    box-shadow: none;
    border-color: var(--azure-border);
}


/* ============================================================
   V3 — PRODUCT SURFACE LAYER
   Flat graphite panels, pearl type, amber-metal primary CTA.
   Tokens live in :root above — this layer only shapes chrome.
   ============================================================ */

/* ── Canvas: one quiet azure glow + soft dot grid ── */
.blob { display: none; }

.aurora::before {
    inset: 0;
    background:
        radial-gradient(900px 480px at 50% -12%, rgba(var(--accent-rgb), 0.06), transparent 65%),
        radial-gradient(1200px 700px at 50% -20%, rgba(var(--pearl-rgb), 0.02), transparent 60%);
    animation: none;
}

.aurora::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--pearl-rgb), 0.035) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 42%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 42%);
}

.grain { opacity: 0.025; }

/* ── Navbar: flat full-width bar (Qoder-style) ── */
.navbar {
    height: 64px;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}

.navbar.scrolled {
    background: var(--bg);
    box-shadow: none;
}

.btn-gold {
    background: #496a33;
    color: #fff;
    border: none;
    box-shadow: none;
    border-radius: 999px;
    font-weight: 600;
}

.btn-gold:hover {
    background: #436143;
    border-color: transparent;
    box-shadow: none;
    color: #fff;
}

.btn-gold:active {
    transform: none;
}

.btn-ghost {
    border-radius: 999px;
    border: 1px solid var(--hairline-hi);
    color: var(--slate-100);
}

.btn-ghost:hover { color: var(--azure-400); border-color: var(--azure-border); background: transparent; }

/* ── Hero type: bigger, tighter, solid pearl (no gradient fill) ── */
.hero h1 {
    font-size: clamp(42px, 6.2vw, 84px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
    color: var(--pearl);
}

.hero h1 .grad {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #258095;
    color: #258095;
    animation: riseIn 1.1s var(--ease-soft) both;
}

.hero .sub {
    font-size: clamp(16px, 1.8vw, 20px);
    color: rgba(var(--pearl-rgb), .82);
    max-width: 640px;
    line-height: 1.6;
    font-weight: 500;
}
.hero .sub .sub-hl {
    color: var(--azure-400);
    font-weight: 700;
    text-shadow: 0 0 22px rgba(var(--accent-rgb), .35);
}

.pill {
    background: var(--glass);
    border: 1px solid var(--hairline);
    box-shadow: none;
    font-size: 13px;
    color: var(--muted);
}

.eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 600;
}

/* ── CTAs: azure pill primary, hairline ghost secondary ── */
.btn-lg { border-radius: 999px; padding: 14px 28px; font-size: 15px; }

.btn-lg.primary {
    background: #496a33;
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    border: none;
}

.btn-lg.primary::after { display: none; }

.btn-lg.primary:hover {
    background: #436143;
    box-shadow: none;
    transform: translateY(-1px);
    color: #fff;
}

.btn-lg.primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-lg.glass {
    background: transparent;
    border: 1px solid var(--hairline-hi);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--slate-100);
}

.btn-lg.glass:hover {
    background: transparent;
    border-color: var(--azure-border);
    color: var(--azure-400);
}

/* ── Surfaces: flat, hairline, restrained hover ── */
.card,
.testimonial-card,
.gallery-item {
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.card:hover,
.testimonial-card:hover,
.gallery-item:hover {
    background: var(--bg-surface);
    border-color: var(--hairline-hi);
    transform: translateY(-2px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.card h3 { letter-spacing: -0.015em; font-weight: 600; }

.glyph {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--glass);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    margin-bottom: 14px;
    filter: grayscale(0.35);
}

/* ── Showcase frame: hairline + deep shadow + top light line ── */
.glass-frame {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: 0 60px 160px -40px rgba(0, 0, 0, 0.85);
    position: relative;
}

.glass-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
    z-index: 2;
}

/* ── Chips & marquee ── */
.provider-chip,
.lang {
    background: var(--glass);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--muted);
    box-shadow: none;
}

.provider-chip:hover { border-color: var(--hairline-hi); color: var(--ink); }

/* ── Section headings ── */
.section-head h2,
.cta-glass h2 {
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--pearl);
}



/* ── Final CTA: quiet amber wash on graphite panel ── */
.cta-glass {
    background:
        radial-gradient(720px 300px at 50% -30%, rgba(var(--accent-rgb), 0.10), transparent 70%),
        var(--bg-elevated);
}

/* ── Focus & selection polish ── */
/* One selection style project-wide: Mantis green highlight + dark ink */
:root {
    --sel-bg: #7fc775; /* Mantis */
    --sel-fg: #14130f; /* near-black */
}
::selection { background: var(--sel-bg); color: var(--sel-fg); }

a:focus-visible,
button:focus-visible,
.btn-lg:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.75);
    outline-offset: 2px;
    border-radius: 10px;
}

/* ── V3.1 Hero refinements ── */
.hero h1 { text-wrap: balance; }

.pill { padding: 6px 9px 6px 15px; gap: 10px; }

.pill-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--gold-bright);
    font-weight: 600;
    font-size: 12.5px;
    padding: 2px 4px 2px 11px;
    border-left: 1px solid var(--hairline-hi);
    line-height: 1;
}

.pill-link:hover { color: var(--pearl); }

.pill-link .pill-arr {
    display: inline-block;
    transition: transform 0.3s var(--ease);
}

.pill-link:hover .pill-arr { transform: translateX(3px); }

.btn-lg .arr {
    display: inline-block;
    margin-left: 2px;
    transition: transform 0.3s var(--ease);
}

.btn-lg.primary:hover .arr { transform: translateX(3px); }

.hero-note {
    margin-top: 18px;
    font-size: 13px;
    color: var(--faint);
    letter-spacing: 0.01em;
}

/* ── Product facts: premium spec card ─ */
.hero-strip {
    margin-top: 0;
    background: var(--ink-800);
    border: 1px solid var(--ink-700);
    border-radius: 14px;
    padding: 22px 32px;
    max-width: 820px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow: 0 1px 3px rgba(39, 40, 38, .04), 0 8px 24px rgba(39, 40, 38, .06);
}

.strip-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 20px;
    text-align: left;
    transition: background .2s ease;
    border-radius: 10px;
    cursor: default;
}

.strip-item:hover {
    background: rgba(51, 164, 37, .04);
}

.s-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(51, 164, 37, .45);
    transition: transform .25s ease, box-shadow .25s ease;
}

.sd-green {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(51, 164, 37, .45);
    animation: s-pulse 2.6s ease-in-out infinite;
}

.sd-azure {
    background: var(--azure-500);
    box-shadow: 0 0 8px rgba(37, 128, 149, .4);
}

.sd-azure2 {
    background: var(--azure-400);
    box-shadow: 0 0 8px rgba(48, 156, 56, .4);
}

.sd-pearl {
    background: var(--muted);
    box-shadow: 0 0 6px rgba(99, 98, 97, .3);
}

@keyframes s-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(51, 164, 37, .3); }
    50% { box-shadow: 0 0 14px rgba(51, 164, 37, .7); }
}

.strip-val {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
    line-height: 1.2;
    transition: color .2s ease;
}

.strip-val .strip-dim {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

.strip-lbl {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 500;
    margin-top: 2px;
}

.strip-item:hover .strip-val { color: var(--accent); }
.strip-item:hover .s-dot { transform: scale(1.4); }

.strip-div {
    width: 1px;
    height: 36px;
    background: var(--ink-700);
    flex: none;
}

@media (max-width: 640px) {
    /* Facts bar becomes a 2x2 spec card: left-aligned cells, hairline dividers */
    .hero-strip-bar { padding: 0 14px; }
    .hero-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        max-width: 460px;
        margin: 0 auto;
        padding: 0;
        border-radius: 14px;
        overflow: hidden;
    }
    .strip-item {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: center;
        text-align: left;
        padding: 16px 18px;
        border-radius: 0;
    }
    .strip-item:hover {
        background: rgba(51, 164, 37, .06);
    }
    .strip-item .s-dot { grid-row: 1 / 3; grid-column: 1; align-self: center; }
    .strip-item .strip-val { grid-column: 2; font-size: 16px; }
    .strip-item .strip-lbl { grid-column: 2; }
    /* hairline dividers: right of left column, below top row */
    .strip-item:nth-child(1),
    .strip-item:nth-child(5) { border-right: 1px solid var(--ink-700); }
    .strip-item:nth-child(1),
    .strip-item:nth-child(3) { border-bottom: 1px solid var(--ink-700); }
    .strip-div { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-green { animation: none; }
    .s-dot { transition: none; }
}

/* ── Footer: RIDA-style dark forest field + giant Cortex watermark ── */
.footer {
    display: block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-top: none;
    padding: 88px 40px 28px;
    background-color: #0b1f16;
    background-image:
        radial-gradient(ellipse 90% 80% at 48% 28%, #1a4a32 0%, rgba(13, 42, 28, 0) 58%),
        linear-gradient(180deg, #123528 0%, #0b1f16 42%, #07150f 100%);
}

.footer .brand-text-top { color: #f4f7f4; }
.footer .brand-text-sub { color: rgba(214, 228, 214, 0.62); }
.footer .brand-mark-img {
    filter: brightness(0) invert(1);
    height: 36px;
}
.footer .brand:hover .brand-mark-img {
    filter: brightness(0) invert(1);
    opacity: 0.88;
}

/* Giant static wordmark, RIDA recipe: pale green fill, behind copy, overflow. */
.footer-watermark {
    position: absolute;
    left: 46%;
    bottom: -0.22em;
    transform: translateX(-42%);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    font-family: var(--font-display, "Geist", "Satoshi", sans-serif);
    font-weight: 800;
    font-size: clamp(160px, 28vw, 440px);
    line-height: 0.78;
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: #6d9a72;
    -webkit-text-fill-color: #6d9a72;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-mask-image: none;
    mask-image: none;
    filter: none;
    opacity: 0.16;
}

.footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: 56px;
    padding-bottom: 64px;
    position: relative;
    z-index: 1;
}

.footer-brand-col .brand { margin-bottom: 16px; }

.footer-brand-col .footer-note {
    max-width: 320px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(232, 240, 232, 0.68);
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(232, 240, 232, 0.18);
    border-radius: 9px;
    color: rgba(232, 240, 232, 0.78);
    background: transparent;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.footer-social a:hover {
    color: #fff;
    border-color: rgba(232, 240, 232, 0.42);
    background: rgba(255, 255, 255, 0.08);
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col-title {
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0.01em;
    color: #f4f7f4;
    font-weight: 700;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #c9a227;
    width: fit-content;
}

.footer-col a {
    color: rgba(232, 240, 232, 0.72);
    font-size: 14.5px;
    width: fit-content;
    transition: color 0.2s var(--ease);
}

.footer-col a:hover { color: #fff; }

.footer-bottom {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 22px 0 18px;
    border-top: 1px solid rgba(232, 240, 232, 0.14);
    color: rgba(232, 240, 232, 0.52);
    font-size: 13px;
}

.footer-bottom-meta { color: rgba(232, 240, 232, 0.42); }

@media (max-width: 760px) {
    .footer { padding: 64px 22px 20px; }
    .footer-inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .footer-watermark { font-size: clamp(120px, 42vw, 280px); left: 50%; transform: translateX(-50%); }
}

/* ── V3.3 Download page: full-screen width, 70px edge padding both sides ── */
.dl-hero {
    max-width: none;
    padding-left: 70px;
    padding-right: 70px;
}

.dl-section {
    max-width: 1400px;
    padding-left: 40px;
    padding-right: 40px;
}

/* Download card: full-bleed like the page — spans edge to edge inside the
   hero's 70px gutters. */
.dl-card {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 720px) {
    .dl-hero,
    .dl-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .dl-download-grid {
        grid-template-columns: 1fr;
        padding-left: 0;
        padding-right: 0;
    }

    .dl-download-grid.dl-grid-os-target {
        grid-template-columns: 1fr;
        max-width: 1060px;
    }

    .dl-download-grid .dl-card {
        padding: 28px 20px 24px;
    }
}

/* ── V3.4 Navbar brand is a home link — keep its color stable on hover ── */
a.brand,
a.brand:hover { color: var(--pearl-solid); }
a.brand:hover .brand-mark,
a.brand:hover .brand-logo { transform: scale(1.06); }
.brand-mark { transition: transform 0.25s var(--ease); }
.brand-logo { transition: transform 0.25s var(--ease); }

/* ============================================================
   MAGICAL SHOWCASE — aurora, gradient ring, shine sweep, glow
   (final layer: intentionally overrides the flat-surface pass)
   ============================================================ */

/* Rotating angle for the gradient ring (falls back to static where
   @property is unsupported) */
@property --ring-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ── Aurora: two drifting light blobs behind the frame ── */
.showcase {
    position: relative;
    isolation: isolate;
}

.showcase::before,
.showcase::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.showcase::before {
    width: 55%;
    height: 60%;
    top: -12%;
    left: 4%;
    background: radial-gradient(circle at 40% 40%,
        rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.05) 55%, transparent 75%);
    animation: auroraDriftA 14s ease-in-out infinite alternate;
}

.showcase::after {
    width: 48%;
    height: 55%;
    bottom: 6%;
    right: 3%;
    background: radial-gradient(circle at 60% 60%,
        rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04) 55%, transparent 75%);
    animation: auroraDriftB 18s ease-in-out infinite alternate;
}

@keyframes auroraDriftA {
    from { transform: translate3d(-4%, 2%, 0) scale(1); opacity: .85; }
    to   { transform: translate3d(6%, -4%, 0) scale(1.15); opacity: 1; }
}

@keyframes auroraDriftB {
    from { transform: translate3d(4%, -2%, 0) scale(1.1); opacity: .7; }
    to   { transform: translate3d(-5%, 4%, 0) scale(0.95); opacity: 1; }
}

/* ── Frame: deepen glow + slowly rotating gold gradient ring ── */
.glass-frame {
    box-shadow:
        0 1px 0 rgba(var(--pearl-rgb), 0.07) inset,
        0 60px 160px -40px rgba(0, 0, 0, 0.85),
        0 0 120px rgba(var(--accent-rgb), 0.10);
}

.glass-frame::after {
    content: '';
    position: absolute;
    inset: 0; /* frame is overflow:hidden — a -1px ring would be clipped */
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--ring-ang, 0deg),
        transparent 0deg,
        rgba(var(--accent-rgb), 0.38) 40deg,
        rgba(var(--gold-rgb), 0.9) 60deg,
        rgba(var(--accent-rgb), 0.55) 80deg,
        transparent 130deg,
        transparent 250deg,
        rgba(var(--accent-rgb), 0.20) 300deg,
        transparent 340deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: ringSpin 9s linear infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes ringSpin {
    to { --ring-ang: 360deg; }
}

/* ── Shine sweep across the screenshot ── */
.frame-body-real::after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -30%;
    width: 34%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(var(--pearl-rgb), 0.045) 42%,
        rgba(var(--gold-rgb), 0.11) 50%,
        rgba(var(--pearl-rgb), 0.045) 58%,
        transparent 100%);
    transform: skewX(-14deg);
    animation: shineSweep 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes shineSweep {
    0%       { left: -35%; opacity: 0; }
    8%       { opacity: 1; }
    34%      { left: 108%; opacity: 1; }
    42%, 100%{ left: 108%; opacity: 0; }
}

/* ── Floor glow: soft gold light pooling under the frame ── */
.showcase .glass-frame {
    margin-bottom: 8px;
}

.showcase-gallery {
    position: relative;
}

.showcase-gallery::before {
    content: '';
    position: absolute;
    top: -46px;
    left: 12%;
    right: 12%;
    height: 60px;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(var(--accent-rgb), 0.10), transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
}

/* ── Gallery cards: gold ring, lift, image zoom, caption glow ── */
.gallery-item {
    position: relative;
    overflow: hidden;
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
                box-shadow 0.45s var(--ease), background 0.45s var(--ease);
}

.gallery-item img {
    transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
    filter: saturate(0.92) brightness(0.96);
}

.gallery-item span {
    transition: color 0.35s var(--ease), letter-spacing 0.35s var(--ease);
}

.gallery-item:hover {
    transform: translateY(-6px) scale(1.015);
    border-color: rgba(var(--accent-rgb), 0.32);
    background: var(--bg-surface);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(var(--accent-rgb), 0.12);
}

.gallery-item:hover img {
    transform: scale(1.045);
    filter: saturate(1.05) brightness(1.03);
}

.gallery-item:hover span {
    color: var(--gold);
    letter-spacing: 0.02em;
}

/* Small shine on gallery hover */
.gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 34%;
    left: -60%;
    width: 40%;
    background: linear-gradient(105deg, transparent,
        rgba(var(--pearl-rgb), 0.10) 50%, transparent);
    transform: skewX(-14deg);
    transition: left 0.7s var(--ease);
    pointer-events: none;
}

.gallery-item:hover::after {
    left: 130%;
}

/* ── Accessibility: kill the motion for reduced-motion users ── */
@media (prefers-reduced-motion: reduce) {
    .showcase::before,
    .showcase::after,
    .glass-frame::after,
    .frame-body-real::after {
        animation: none;
    }
    .frame-body-real::after { display: none; }
}

/* ============================================================
   DOCS PAGE — tables, inline code, kbd, key-format chips
   ============================================================ */
.legal-content code {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.86em;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    color: var(--gold-bright);
    padding: 1px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.legal-content kbd {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.8em;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline-hi);
    border-bottom-width: 2px;
    color: var(--ink);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.docs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 26px;
    font-size: 13.5px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    overflow: hidden;
    display: block;
    overflow-x: auto;
}

.docs-table thead th {
    background: var(--bg-elevated);
    color: var(--muted);
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
}

.docs-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
    color: var(--muted);
    vertical-align: top;
}

.docs-table tbody tr:last-child td { border-bottom: none; }
.docs-table tbody td:first-child { color: var(--ink); font-weight: 550; white-space: nowrap; }

.docs-step {
    display: flex;
    gap: 14px;
    margin: 14px 0;
    align-items: flex-start;
}

.docs-step-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--gold);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== AGENTIC LOOP ENGINEERING CARDS (index #loop-engineering) ===== */
#loop-engineering {
    padding-left: 0;
    padding-right: 0;
}

.loop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    width: min(1760px, calc(100% - clamp(24px, 3vw, 56px)));
    margin-inline: auto;
    /* three separate red cards — visible gap between, no shared surface */
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.loop-card {
    display: flex;
    flex-direction: column;
    background: #ef4444;
    border: none;
    border-radius: 16px;
    padding: 20px 20px 18px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* no hover lift, no deep-green flip — each red card stays flat red */
.loop-card:hover {
    transform: none;
    box-shadow: none;
    background: #ef4444;
    border-color: transparent;
}

.loop-card h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f4faec;
}

.loop-card > p {
    margin: 0 0 14px;
    font-size: 13px;
    color: #b9cda6;
    line-height: 1.5;
}

/* --- Dark inner window --- */
.loop-win {
    flex: 1;
    background: #1a1713;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- Card 1: phase pipeline --- */
.loop-phase-list {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
}

.loop-phase-list::before {
    content: '';
    position: absolute;
    left: 17.5px;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(rgba(165, 212, 95, 0.4), rgba(165, 212, 95, 0.05));
}

.loop-phase {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 6px;
    border-radius: 8px;
    position: relative;
    transition: background 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}

.loop-phase.active {
    background: rgba(165, 212, 95, 0.1);
    opacity: 1;
}

.lp-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6da32a;
    align-self: center;
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.loop-phase.active .lp-dot {
    background: #a5d45f;
    box-shadow: 0 0 10px rgba(165, 212, 95, 0.7);
}

.loop-phase.halt .lp-dot { background: #ef4444; }
.loop-phase.halt.active .lp-dot { background: #ff6b6b; box-shadow: 0 0 10px rgba(255, 107, 107, 0.7); }

.lp-name {
    flex: 0 0 72px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #9ab189;
    transition: color 0.3s ease;
}

.loop-phase.active .lp-name { color: #a5d45f; }
.loop-phase.halt.active .lp-name { color: #ff8080; }

.lp-desc {
    font-size: 12px;
    color: #9ab189;
    line-height: 1.4;
    opacity: 0.7;
}

.loop-phase.active .lp-desc { opacity: 1; color: #e2f0cc; }

/* --- Card 2: autonomy modes --- */
.loop-modes {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.loop-mode {
    border: 1px solid rgba(165, 212, 95, 0.15);
    border-left: 3px solid #6da32a;
    border-radius: 10px;
    background: rgba(165, 212, 95, 0.03);
    padding: 12px 14px;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.loop-mode.auto { border-left-color: #a5d45f; }

.loop-mode.glow {
    background: rgba(165, 212, 95, 0.08);
    border-color: rgba(165, 212, 95, 0.35);
    box-shadow: 0 0 16px rgba(165, 212, 95, 0.12);
}

.lm-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #e2f0cc;
    margin-bottom: 5px;
}

.lm-tag {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(165, 212, 95, 0.1);
    color: #9ab189;
}

.lm-desc {
    font-size: 12.5px;
    color: #9ab189;
    line-height: 1.5;
}

.loop-blocked {
    margin-top: auto;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(165, 212, 95, 0.1);
}

.lb-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ff8080;
    margin-bottom: 7px;
}

.lb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lb-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ff9b9b;
    white-space: nowrap;
}

/* --- Card 3: reviewer rules + budgets --- */
.loop-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
}

.loop-rule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: #9ab189;
    line-height: 1.5;
    padding: 6px 8px;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
}

.loop-rule.visible {
    opacity: 1;
    transform: translateY(0);
}

.loop-rule.reject.flash { background: rgba(239, 68, 68, 0.1); }
.loop-rule.pass.flash { background: rgba(165, 212, 95, 0.1); }

.lr-ico {
    flex: 0 0 18px;
    height: 18px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
}

.loop-rule.reject .lr-ico {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ff6b6b;
}

.loop-rule.pass .lr-ico {
    background: rgba(165, 212, 95, 0.15);
    border: 1px solid rgba(165, 212, 95, 0.35);
    color: #a5d45f;
}

.loop-budgets {
    margin-top: auto;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(165, 212, 95, 0.1);
}

.lbg-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ab189;
    margin-bottom: 7px;
}

.lbg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lbg-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(165, 212, 95, 0.08);
    border: 1px solid rgba(165, 212, 95, 0.25);
    color: #b9cda6;
    white-space: nowrap;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.lbg-chip.pulse {
    border-color: rgba(165, 212, 95, 0.6);
    color: #e2f0cc;
}

/* --- Mobile --- */
@media (max-width: 900px) {
    .loop-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V4 — IA + agent cinema + demoted engineering
   ============================================================ */

.card .glyph,
.glyph {
    color: var(--amber-metal);
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    filter: none;
}

.card .glyph svg,
.glyph svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Langs marquee — light sage band, paper chips travel right to left */
.langs-strip {
    padding: 0;
    background: linear-gradient(180deg, #f6f8f2 0%, #eef2e6 100%);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.langs-strip .marquee {
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    padding: 16px 0;
}

/* White paper chips, dark ink, brand-color dots */
.langs-marquee .lang {
    background: #ffffff;
    border: 1px solid var(--hairline);
    color: var(--ink);
    font-weight: 600;
    padding: 9px 18px;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 8px -4px rgba(39, 40, 38, .14);
    transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.langs-marquee .lang:hover {
    color: var(--ink);
    border-color: rgba(51, 164, 37, .4);
    box-shadow: 0 8px 20px -8px rgba(39, 40, 38, .22);
    transform: translateY(-2px);
}

.langs-marquee .lang .d {
    box-shadow: 0 0 0 3px rgba(39, 40, 38, .06);
}

/* (loop-details removed — section is now always visible) */
.section-quiet {
    padding-top: 12px;
    padding-bottom: 28px;
}

/* (.loop-details styles removed) */

/* (remaining loop-details pseudo-element styles removed) */

.loop-details[open] > summary::after { content: '–'; color: var(--amber-metal); }

.loop-details .loop-grid {
    padding: 4px 18px 22px;
    border-top: 1px solid var(--hairline);
}

@media (max-width: 720px) {
    .loop-details > summary {
        grid-template-columns: 1fr;
        grid-template-areas: "eye" "title" "hint";
    }
    .loop-details > summary::after {
        position: absolute;
        right: 18px;
        top: 18px;
    }
    .loop-details > summary { position: relative; padding-right: 56px; }
    .loop-summary-hint { justify-self: start; }
}

/* Agent cinema showcase */
.showcase-caption {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 22px;
}

.showcase-lede {
    margin: 8px 0 0;
    font-size: clamp(15px, 1.5vw, 17px);
    color: var(--muted);
    line-height: 1.55;
}

.frame-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
    background: rgba(var(--win-tint-rgb), 0.72);
}

.frame-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(var(--pearl-rgb), 0.14);
}

.frame-dot:nth-child(1) { background: var(--gold); }
.frame-dot:nth-child(2) { background: var(--gold); }
.frame-dot:nth-child(3) { background: var(--green-deep); }

.frame-title {
    margin-left: 8px;
    font-size: 12px;
    color: var(--faint);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.frame-body-real {
    position: relative;
}

.cinema-hud {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    pointer-events: none;
    z-index: 2;
}

.cinema-chip,
.cinema-status {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--win-tint-rgb), 0.78);
    color: var(--pearl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cinema-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--amber-bright);
}

.cinema-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber-metal);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
    animation: cinemaPulse 1.8s ease-out infinite;
}

@keyframes cinemaPulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.showcase-gallery .gallery-item {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: inherit;
    width: 100%;
}

.gallery-item.is-active {
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
}

.gallery-item.is-active span {
    color: var(--amber-bright);
}

@media (prefers-reduced-motion: reduce) {
    .cinema-pulse { animation: none; }
}

/* ============================================================
   V4.1 — Nav simplify + CSS mobile drawer
   ============================================================ */

.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--pearl);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.menu-toggle .menu-bar {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s ease;
}

.navbar.is-open .menu-toggle .menu-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.navbar.is-open .menu-toggle .menu-bar:nth-child(2) {
    opacity: 0;
}
.navbar.is-open .menu-toggle .menu-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 900px) {
    .menu-toggle {
        display: inline-flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px;
        border-radius: 14px;
        background: rgba(var(--win-tint-rgb), 0.94);
        border: 1px solid var(--hairline);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        z-index: 50;
    }

    .navbar.is-open .nav-links {
        display: flex;
    }

    .nav-links a {
        padding: 12px 14px;
        border-radius: 10px;
        color: var(--pearl);
    }

    .nav-links a:hover {
        background: var(--glass);
        color: var(--amber-bright);
    }

    .navbar {
        position: relative;
    }

    .nav-mobile-auth {
        display: block;
    }
}

/* Narrow phones: compact the nav pill so Sign Up never wraps to two lines.
   Sign In moves into the hamburger dropdown (.nav-mobile-auth). */
@media (max-width: 560px) {
    .nav-shell { top: 12px; padding: 0 10px; }
    .navbar { height: 66px; padding: 0 8px 0 14px; }
    .nav-right { gap: 6px; }
    .nav-right .btn-ghost { display: none; }
    .nav-right .btn-gold { padding: 8px 14px; font-size: 12.5px; }
}

@media (max-width: 400px) {
    .brand-mark-img { height: 26px; }
    .brand-text-sub { font-size: 10.5px; }
    .nav-right .btn-gold { padding: 7px 12px; font-size: 12px; }
}

/* ============================================================
   V4.2 — Agent cinema: stage + story rail (kills 3+1 grid)
   ============================================================ */

.showcase {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px clamp(20px, 4vw, 48px) 8px;
}

/* Kill equal-column gallery — rail is a film strip */
.showcase-gallery {
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 14px;
    margin-top: 0;
    padding: 4px 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent;
}

.showcase-gallery::-webkit-scrollbar {
    height: 6px;
}

.showcase-gallery::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.35);
    border-radius: 999px;
}

.showcase-gallery::before {
    display: none; /* old floor glow under equal grid */
}

/* Header: left copy / right reel counter — breaks center symmetry */
.cinema-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: 28px;
    max-width: none;
    text-align: left;
}

.cinema-head-copy {
    max-width: 34rem;
}

.cinema-head .eyebrow {
    display: inline-block;
    margin-bottom: 10px;
}

.cinema-title {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.55rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--pearl);
    text-wrap: balance;
}

.showcase-caption {
    text-align: left;
    max-width: none;
    margin: 0;
}

.showcase-lede {
    margin: 10px 0 0;
    max-width: 36ch;
    font-size: clamp(15px, 1.4vw, 17px);
    color: var(--sand);
    line-height: 1.55;
}

.cinema-head-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-bottom: 4px;
}

.cinema-reel-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
}

.cinema-counter {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    color: var(--amber-bright);
    line-height: 1;
}

.cinema-counter-sep {
    margin: 0 0.12em;
    color: rgba(var(--pearl-rgb), 0.28);
    font-weight: 400;
}

/* Stage: hero frame + floating beat card (asymmetric, layered) */
.cinema-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.cinema-stage .glass-frame {
    margin-bottom: 0;
    width: 100%;
    max-width: min(100%, 980px);
    transform: perspective(1400px) rotateX(2.5deg) scale(0.985);
    transform-origin: center top;
}

.cinema-stage:hover .glass-frame {
    transform: perspective(1400px) rotateX(0deg) scale(1);
}

.showcase-poster {
    transition: opacity 0.28s ease, filter 0.45s var(--ease);
}

/* Beat card — overlaps frame edge, not another equal column */
.cinema-beat {
    position: relative;
    z-index: 4;
    width: min(100%, 320px);
    margin: -52px 0 0 auto;
    margin-right: clamp(0px, 2vw, 28px);
    padding: 18px 20px 20px;
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background:
        linear-gradient(165deg, rgba(var(--win-tint-rgb), 0.96), rgba(var(--win-tint-rgb), 0.92));
    box-shadow:
        0 1px 0 rgba(var(--pearl-rgb), 0.06) inset,
        0 24px 48px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(var(--accent-rgb), 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.cinema-beat-kicker {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber-metal);
    margin-bottom: 8px;
}

.cinema-beat-title {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--pearl);
    line-height: 1.2;
}

.cinema-beat-copy {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sand);
    max-width: 28ch;
}

/* Storyboard rail */
.cinema-rail-wrap {
    margin-top: 36px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
}

.cinema-rail-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sand);
}

.cinema-rail-hint {
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(var(--cream-rgb), 0.7);
}

.rail-card.gallery-item,
.showcase-gallery .gallery-item.rail-card {
    --rail-w: clamp(200px, 22vw, 248px);
    flex: 0 0 var(--rail-w);
    width: var(--rail-w);
    max-width: var(--rail-w);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 12px;
    align-items: start;
    padding: 12px;
    margin: 0;
    border-radius: 14px;
    border: 1px solid var(--hairline);
    background: rgba(var(--win-tint-rgb), 0.72);
    box-shadow: none;
    scroll-snap-align: start;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    transform: none;
    overflow: visible;
}

.rail-card.gallery-item::after {
    display: none; /* kill old shine sweep on equal cards */
}

.rail-card .rail-index {
    grid-column: 1;
    grid-row: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: rgba(var(--pearl-rgb), 0.35);
    padding-top: 2px;
    transition: color 0.25s ease;
}

.rail-card .rail-thumb {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(var(--pearl-rgb), 0.08);
    aspect-ratio: 16 / 10;
    background: var(--graphite);
}

.rail-card .rail-thumb img,
.rail-card.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: auto;
    filter: saturate(0.88) brightness(0.9);
    transition: transform 0.45s var(--ease), filter 0.35s ease;
}

.rail-card .rail-meta {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    min-width: 0;
}

.rail-card .rail-title,
.rail-card.gallery-item span.rail-title {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pearl);
    line-height: 1.25;
    text-align: left;
}

.rail-card .rail-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--sand);
    letter-spacing: 0.02em;
}

.rail-card.gallery-item:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--win-tint-rgb), 0.9);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(var(--accent-rgb), 0.08);
}

.rail-card.gallery-item:hover img {
    transform: scale(1.04);
    filter: saturate(1.02) brightness(1.02);
}

.rail-card.gallery-item:hover span {
    color: inherit;
    letter-spacing: inherit;
}

.rail-card.gallery-item.is-active {
    border-color: rgba(var(--accent-rgb), 0.55);
    background:
        linear-gradient(145deg, rgba(var(--win-tint-rgb), 0.95), rgba(var(--win-tint-rgb), 0.92));
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.2),
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(var(--accent-rgb), 0.12);
}

.rail-card.gallery-item.is-active .rail-index {
    color: var(--amber-bright);
}

.rail-card.gallery-item.is-active .rail-title {
    color: var(--amber-bright);
}

.rail-card.gallery-item.is-active .rail-thumb {
    border-color: rgba(var(--accent-rgb), 0.35);
}

.rail-card.gallery-item.is-active img {
    filter: saturate(1.05) brightness(1.04);
}

.rail-card.gallery-item:focus-visible {
    outline: 2px solid var(--amber-metal);
    outline-offset: 3px;
}

/* Wide: stage + beat side-by-side feel via overlap only */
@media (min-width: 960px) {
    .cinema-stage .glass-frame {
        max-width: calc(100% - 72px);
    }

    .cinema-beat {
        position: absolute;
        right: 0;
        bottom: 28px;
        margin: 0;
        width: min(300px, 28vw);
    }
}

@media (max-width: 768px) {
    .cinema-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 20px;
    }

    .cinema-head-meta {
        align-items: flex-start;
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
    }

    .cinema-stage .glass-frame {
        transform: none;
        max-width: 100%;
    }

    .cinema-stage:hover .glass-frame {
        transform: none;
    }

    .cinema-beat {
        position: relative;
        width: 100%;
        max-width: none;
        margin: 14px 0 0;
        right: auto;
        bottom: auto;
    }

    .cinema-beat-copy {
        max-width: none;
    }

    .showcase-gallery {
        gap: 12px;
    }

    .rail-card.gallery-item,
    .showcase-gallery .gallery-item.rail-card {
        --rail-w: min(78vw, 240px);
    }

    .showcase {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cinema-stage .glass-frame,
    .cinema-stage:hover .glass-frame,
    .rail-card.gallery-item:hover,
    .rail-card .rail-thumb img {
        transform: none;
        transition: border-color 0.2s ease, opacity 0.2s ease;
    }
}


/* ============================================================
   2026-08 landing refresh (preserve-mode redesign)
   Display typography, split hero, facts bar, static language strip.
   ============================================================ */

h1, h2, h3, .strip-val, .cinema-title {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -0.022em;
}

/* Stacked hero (Cursor composition): headline + CTAs on the plain page
   background, then a rounded wallpaper STAGE that wraps the product
   windows. The painting exists only inside the stage — never behind copy. */
.hero.hero-scene {
    max-width: none;
    padding-inline: 0;
    /* Base .hero top padding + .hero-inner's own were STACKING (~300px+ of
       dead air above the headline). Zero the outer one; .hero-inner alone
       clears the fixed navbar. */
    padding-top: 0;
    padding-bottom: clamp(40px, 6vh, 64px);
}
.hero.hero-scene .hero-inner {
    position: relative;
    z-index: 3;
    display: block;
    text-align: left;
    max-width: 1440px;
    margin-inline: auto;
    width: 100%;
    padding-inline: clamp(20px, 4vw, 70px);
    /* Must clear the FIXED navbar (64px bar). */
    padding-top: clamp(96px, 12vh, 132px);
    padding-bottom: clamp(20px, 3vh, 36px);
}
.hero.hero-scene .hero-copy {
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.hero.hero-scene h1 {
    font-size: clamp(2.7rem, 6.4vw, 4.85rem);
    line-height: 1.04;
    letter-spacing: -0.052em;
    font-weight: 700;
    color: var(--pearl);
    margin: 0;
    max-width: none;
    text-wrap: balance;
    padding-bottom: 2px;
}
.hero.hero-scene .hero-lede {
    margin: 14px 0 0;
    padding: 0 0 4px;
    font-size: clamp(1.12rem, 1.7vw, 1.4rem);
    font-weight: 400;
    font-style: normal;
    line-height: 1.32;
    letter-spacing: -0.018em;
    color: rgba(var(--pearl-rgb), .72);
    max-width: none;
}
.hero.hero-scene .hero-lede em {
    font-style: italic;
    font-weight: 600;
    color: #258095;
    font-synthesis: none;
}
.hero.hero-scene .hero-verbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 22px 0 0;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f7493f;
}
.hero.hero-scene .hero-verbs span {
    display: inline-flex;
    align-items: center;
}
.hero.hero-scene .hero-verbs span + span::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #f7493f;
    margin: 0 11px;
    opacity: .75;
}
/* Hero sub copy: quiet answer-callout card (same language as
   .section-answer) so every line starts from the same left edge —
   centered as a block on mobile, text always left-aligned. */
.hero.hero-scene .sub {
    margin: 20px 0 0;
    margin-inline: 0;
    max-width: 620px;
    font-size: clamp(14px, 1.15vw, 15.5px);
    line-height: 1.7;
    font-weight: 400;
    color: rgba(var(--pearl-rgb), .66);
    text-wrap: pretty;
    text-align: left;
    background: transparent;
    border: none;
    border-left: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
    border-radius: 0;
    padding: 4px 0 4px 18px;
}
.hero.hero-scene .sub .sub-hl {
    color: var(--azure-400);
    font-weight: 600;
    text-shadow: none;
}
.hero.hero-scene .hero-cta {
    justify-content: flex-start;
    margin-top: 30px;
}

/* Two-column hero: copy left, signal spec-sheet right.
   Fills the dead right half of the hero on desktop; the aside stacks
   under the copy below 1024px (see the scene responsive block). */
.hero.hero-scene .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 32vw, 440px);
    gap: clamp(36px, 4.5vw, 80px);
    align-items: center;
}
.hero-aside {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.hero-aside .hero-signal-card {
    margin-top: 0;
    max-width: none;
    padding: 6px 8px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Hero must stay fully opaque — the legacy scroll-fade (inline opacity)
   washes the dark IDE windows with a milky fog on the light page.
   !important beats the inline style even from cached old JS. */
#hero { opacity: 1 !important; }

/* Wallpaper stage — the painting lives ONLY here, around the windows. */
.hero-stage {
    position: relative;
    z-index: 2;
    width: calc(100% + 140px);
    margin-left: -70px;
    height: clamp(560px, 66vw, 920px);
    overflow: hidden;
}
.hero-wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Matte glass frost — milky, like frosted pane glass; the IDE
       windows above stay razor sharp. */
    filter: blur(22px) saturate(1.12) brightness(1.06);
    transform: scale(1.10);
}
.hero-wall-shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* White glass film over the frost + light vignette framing the windows */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .13) 45%, rgba(248, 248, 246, .10) 100%),
        radial-gradient(115% 95% at 50% 44%, rgba(6, 10, 8, 0) 55%, rgba(6, 10, 8, .16) 100%);
    /* Soft rim highlight — the lit edge of a matte glass sheet */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .75),
        inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.hero-wall-shade::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Fine matte grain on the glass surface */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .07;
    pointer-events: none;
}

/* ============================================================
   HERO SCENE — living product windows (Cursor-style composition)
   Desktop window: sidebar | agent chat | browser preview.
   Agent terminal window overlaps bottom-right. Warm chrome.
   ============================================================ */
.hs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.hs-stage {
    position: absolute;
    inset: 0;
}
.hs-win {
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-solid);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, .45),
        0 14px 32px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(var(--cream-rgb), .10);
    /* 'backwards' (not 'both') so the JS pointer-parallax transform applies
       once the intro finishes instead of being frozen by the fill. */
    animation: hs-win-in .7s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes hs-win-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Desktop window: centered with wallpaper visible on every side, like the
   painting matting a framed picture. Positioned by insets — no transforms,
   so the parallax translate3d composes cleanly. */
.hs-win-desktop {
    left: 18%;
    right: 26%;
    top: 5%;
    bottom: 8%;
    z-index: 10;
}
/* Agent terminal: overlaps the desktop window's bottom-right corner, sits
   ON TOP of it, pokes slightly past its right edge. The desktop window is
   nudged 4% left so desktop-left margin (18%) equals the CLI's right margin
   (18%) — the whole two-window composition reads centered on the stage. */
.hs-win-cli {
    right: 18%;
    bottom: 6%;
    z-index: 15;
    width: min(500px, 44%);
    height: min(430px, 58%);
    animation-delay: .12s;
}
.hs-titlebar {
    position: relative;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 1px solid rgba(var(--cream-rgb), .10);
    background: var(--card-solid);
}
.hs-dots { display: flex; gap: 6px; }
.hs-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--pearl-rgb), .16); }
.hs-titlebar .hs-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: rgba(var(--pearl-rgb), .55);
    white-space: nowrap;
}
.hs-tb-actions { display: flex; gap: 2px; }
.hs-tb-btn {
    opacity: 0;
    transition: opacity .2s;
    border: 0;
    background: none;
    color: rgba(var(--pearl-rgb), .55);
    font: 500 12px 'Geist', 'Segoe UI', system-ui, sans-serif;
    padding: 4px 8px;
    border-radius: 5px;
}
.hs-win:hover .hs-tb-btn { opacity: .9; }
.hs-tb-btn:hover { background: rgba(var(--pearl-rgb), .08); color: var(--pearl-solid); }
.hs-body { flex: 1; display: flex; min-height: 0; }

/* sidebar */
.hs-side {
    flex: 0 0 240px;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid rgba(var(--cream-rgb), .10);
    background: var(--card-solid);
    text-align: left;
}
.hs-side-sec {
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--pearl-rgb), .35);
}
.hs-row { display: flex; gap: 9px; padding: 9px 12px; }
.hs-row-active { background: rgba(var(--pearl-rgb), .06); }
.hs-ic { flex: 0 0 15px; margin-top: 2px; height: 15px; color: rgba(var(--pearl-rgb), .55); }
.hs-ic svg { display: block; }
.hs-spin {
    width: 13px;
    height: 13px;
    margin: 2px auto 0;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--pearl-rgb), .22);
    border-top-color: var(--azure-400);
    animation: hs-rot 1s linear infinite;
}
@keyframes hs-rot { to { transform: rotate(360deg); } }
.hs-row-txt { min-width: 0; flex: 1; }
.hs-row-top { display: flex; justify-content: space-between; gap: 8px; }
.hs-row-name {
    font-size: 12.5px;
    color: rgba(var(--pearl-rgb), .55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hs-row-active .hs-row-name { color: var(--pearl-solid); }
.hs-row-time { font-size: 11px; color: rgba(var(--pearl-rgb), .35); flex: 0 0 auto; }
.hs-row-sub {
    font-size: 11.5px;
    color: rgba(var(--pearl-rgb), .35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hs-add { color: var(--green-bright); font-family: 'Geist Mono', ui-monospace, Consolas, monospace; font-size: .92em; }
.hs-del { color: #f0645a; font-family: 'Geist Mono', ui-monospace, Consolas, monospace; font-size: .92em; }

/* git review panel — mirrors the real Cortex IDE source-control view */
.hs-git-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 6px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(var(--pearl-rgb), .45);
}
.hs-git-head svg { opacity: .55; }
.hs-git-count { opacity: .6; }
.hs-git-branch { display: flex; align-items: center; gap: 7px; padding: 3px 12px; font-size: 12px; color: rgba(var(--pearl-rgb), .8); }
.hs-git-branch svg { opacity: .7; }
.hs-git-status { display: flex; gap: 14px; padding: 5px 12px 9px; font-size: 11px; }
.hs-git-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.hs-git-status b { font-weight: 600; }
.hs-git-unstaged { color: var(--gold); }
.hs-git-unstaged i { background: var(--gold); }
.hs-git-untracked { color: var(--blue-bright); }
.hs-git-untracked i { background: var(--blue-bright); }
.hs-git-files { border-top: 1px solid rgba(var(--cream-rgb), .08); overflow: hidden; }
.hs-git-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; }
.hs-git-row + .hs-git-row { border-top: 1px solid rgba(var(--cream-rgb), .05); }
.hs-git-row.active { background: rgba(var(--pearl-rgb), .10); }
.hs-git-name {
    flex: 1; min-width: 0; font-size: 12px; color: rgba(var(--pearl-rgb), .75);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-git-row.active .hs-git-name { color: var(--pearl-solid); }
.hs-git-nums { display: flex; gap: 6px; flex: 0 0 auto; }
.hs-badge {
    flex: 0 0 16px; width: 16px; height: 16px; border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
}
.hs-badge.m { background: var(--azure-600); color: #fff; }
.hs-badge.u { background: var(--gold-deep); color: var(--on-accent); }
.hs-git-new { animation: hs-row-in .55s cubic-bezier(.2, .9, .3, 1); }
@keyframes hs-row-in {
    from { opacity: 0; transform: translateY(-8px); background: rgba(var(--accent-rgb), .22); }
}

/* chat pane */
.hs-chat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(var(--cream-rgb), .10);
    background: var(--card-solid);
}
.hs-chat-title { padding: 11px 14px 9px; font-size: 13px; font-weight: 600; color: var(--pearl-solid); }
.hs-chat-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 0 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
}
.hs-chat-scroll::-webkit-scrollbar { display: none; }
/* children keep their natural height — never collapse or overlap when the pane is short */
.hs-chat-scroll > * { flex: 0 0 auto; }
.hs-bubble {
    border: 1px solid rgba(var(--cream-rgb), .10);
    background: rgba(var(--pearl-rgb), .04);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    min-height: 40px;
    color: var(--pearl-solid);
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.5;
}
/* story rows start hidden and reveal in real-time as the agent works */
.hs-step, .hs-msg, .hs-diff, .hs-questions {
    opacity: 0;
    transform: translateY(10px);
}
.hs-step.on, .hs-msg.on, .hs-diff.on, .hs-questions.on {
    animation: hs-reveal .5s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes hs-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.hs-step { font-size: 12.5px; color: rgba(var(--pearl-rgb), .55); }
.hs-step-k { color: var(--pearl-solid); font-weight: 600; margin-right: 7px; }
.hs-step-k.hs-azure { color: var(--azure-400); }
.hs-msg { font-size: 13px; color: var(--pearl-solid); line-height: 1.5; }
.hs-diff {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(var(--cream-rgb), .10);
    background: var(--card-deep);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
}
.hs-f-ic { flex: 0 0 10px; height: 12px; border: 1px solid rgba(var(--pearl-rgb), .35); border-radius: 2px; }
.hs-diff b { font-weight: 600; color: var(--pearl-solid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-questions {
    border: 1px solid rgba(var(--cream-rgb), .12);
    border-radius: 10px;
    background: var(--card-deep);
    padding: 10px 12px 9px;
}
/* .hs-questions.on reveal is handled by the combined rule above */
.hs-q-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: rgba(var(--pearl-rgb), .45); margin-bottom: 6px; }
.hs-q-arrows { letter-spacing: 6px; }
.hs-q-title { font-size: 13px; font-weight: 600; color: var(--pearl-solid); margin-bottom: 6px; }
.hs-q-opt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(var(--pearl-rgb), .75); padding: 3px 0; }
.hs-q-num { flex: 0 0 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--cream-rgb), .18); border-radius: 4px; font-size: 10.5px; color: rgba(var(--pearl-rgb), .55); }
.hs-q-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 7px; }
.hs-q-skip { font-size: 12px; color: rgba(var(--pearl-rgb), .5); }
.hs-q-continue { border: 0; border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; background: var(--azure-500); color: var(--on-accent); transition: box-shadow .3s ease, transform .3s ease; }
.hs-q-continue.picked { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .28); transform: scale(.97); }
.hs-composer { padding: 8px 14px 14px; }
.hs-composer-box {
    border: 1px solid rgba(var(--cream-rgb), .10);
    border-radius: 10px;
    padding: 10px 12px 9px;
    background: rgba(0, 0, 0, .18);
}
.hs-composer-box .hs-ph { display: block; color: rgba(var(--pearl-rgb), .35); font-size: 13px; margin-bottom: 12px; }
.hs-composer-row { display: flex; align-items: center; gap: 8px; }
.hs-pill {
    font-size: 11.5px;
    color: rgba(var(--pearl-rgb), .55);
    background: rgba(var(--pearl-rgb), .07);
    border-radius: 999px;
    padding: 3px 9px;
}
.hs-send {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--pearl-rgb), .12);
    color: rgba(var(--pearl-rgb), .55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* editor + integrated terminal pane (mirrors the real Cortex IDE) */
.hs-ed { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: var(--card-solid); }
.hs-ed-tabs {
    flex: 0 0 32px;
    display: flex;
    align-items: stretch;
    background: var(--card-deep);
    border-bottom: 1px solid rgba(var(--cream-rgb), .08);
    overflow: hidden;
}
.hs-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    font: 11.5px 'Geist Mono', ui-monospace, Consolas, monospace;
    color: rgba(var(--pearl-rgb), .42);
    border-right: 1px solid rgba(var(--cream-rgb), .06);
    white-space: nowrap;
}
.hs-tab i { font-style: normal; font-size: 10px; color: rgba(var(--pearl-rgb), .3); }
.hs-tab.on {
    background: var(--card-solid);
    color: #f0ede7;
    font-weight: 600;
    box-shadow: inset 0 2px 0 rgba(var(--gold-rgb), .55);
}
.hs-ed-icons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    color: rgba(var(--pearl-rgb), .4);
}
.hs-ed-icons i { width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 2px; display: block; }
.hs-ed-icons i.ic-term { border-bottom-width: 3px; }
.hs-ed-icons i.ic-play { border: 0; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 1px; }
.hs-ed-icons i.ic-clip { border-radius: 3px; }
.hs-ed-crumbs {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    font: 10.5px 'Geist Mono', ui-monospace, Consolas, monospace;
    color: rgba(var(--pearl-rgb), .5);
    border-bottom: 1px solid rgba(var(--cream-rgb), .06);
    white-space: nowrap;
    overflow: hidden;
}
.hs-ed-crumbs b { font-weight: 400; color: rgba(var(--pearl-rgb), .25); }
.hs-copy { margin-left: auto; color: rgba(var(--pearl-rgb), .35); }
.hs-ed-body { flex: 1; min-height: 0; display: flex; }
.hs-code {
    flex: 1;
    min-width: 0;
    padding: 8px 0 10px;
    overflow: hidden;
    font: 10.5px/1.62 'Geist Mono', ui-monospace, Consolas, monospace;
    color: #cfcac2;
}
.hs-line { display: flex; padding: 0 12px 0 0; white-space: nowrap; }
.hs-ln {
    flex: 0 0 34px;
    text-align: right;
    padding-right: 12px;
    color: rgba(var(--pearl-rgb), .28);
    user-select: none;
}
.hs-cl { overflow: hidden; text-overflow: ellipsis; }
.hs-kw { color: var(--azure-400); }
.hs-str { color: var(--gold-bright); }
.hs-minimap {
    position: relative;
    flex: 0 0 42px;
    border-left: 1px solid rgba(var(--cream-rgb), .06);
    background: rgba(var(--pearl-rgb), .015);
}
.hs-minimap i { position: absolute; left: 5px; right: 8px; border-radius: 1px; background: rgba(var(--pearl-rgb), .16); }
.hs-minimap i.mm-o { background: rgba(var(--gold-rgb), .5); }
.hs-minimap i.mm-b { background: rgba(var(--accent-rgb), .45); }
.hs-minimap i.mm-w { background: rgba(var(--pearl-rgb), .22); }
.hs-mm-view {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 34%;
    background: rgba(var(--pearl-rgb), .06);
    border: 1px solid rgba(var(--pearl-rgb), .08);
}
.hs-term { flex: 0 0 38%; min-height: 96px; display: flex; flex-direction: column; border-top: 1px solid rgba(var(--cream-rgb), .10); background: var(--card-deep); }
.hs-term-bar {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: #1d1915;
    border-bottom: 1px solid rgba(var(--cream-rgb), .06);
}
.hs-term-sel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid rgba(var(--cream-rgb), .14);
    border-radius: 4px;
    font: 11px 'Geist', 'Segoe UI', system-ui, sans-serif;
    color: rgba(var(--pearl-rgb), .75);
}
.hs-term-sel b { font-weight: 400; font-size: 8px; color: rgba(var(--pearl-rgb), .4); }
.hs-term-acts { display: flex; align-items: center; gap: 6px; }
.hs-term-btn {
    padding: 3px 9px;
    border: 1px solid rgba(var(--cream-rgb), .12);
    border-radius: 4px;
    font: 11px 'Geist', 'Segoe UI', system-ui, sans-serif;
    color: rgba(var(--pearl-rgb), .6);
}
.hs-term-body {
    flex: 1;
    min-height: 0;
    padding: 8px 12px;
    overflow-y: auto;
    scrollbar-width: none;
    font: 10.5px/1.55 'Geist Mono', ui-monospace, Consolas, monospace;
    color: rgba(var(--pearl-rgb), .78);
    text-align: left;
}
.hs-term-body::-webkit-scrollbar { display: none; }
.hs-tl { white-space: normal; word-break: break-word; }
/* boot-up: log lines stream in one by one, like a real server start */
@media (prefers-reduced-motion: no-preference) {
    .hs-tl:not(.hs-tl-new) { animation: hs-tl-in .3s both; }
    .hs-tl:nth-child(1) { animation-delay: .10s; }
    .hs-tl:nth-child(2) { animation-delay: .18s; }
    .hs-tl:nth-child(3) { animation-delay: .26s; }
    .hs-tl:nth-child(4) { animation-delay: .34s; }
    .hs-tl:nth-child(5) { animation-delay: .42s; }
    .hs-tl:nth-child(6) { animation-delay: .50s; }
    .hs-tl:nth-child(7) { animation-delay: .58s; }
    .hs-tl:nth-child(8) { animation-delay: .66s; }
    .hs-tl:nth-child(9) { animation-delay: .74s; }
    .hs-tl:nth-child(12) { animation-delay: .90s; }
}
@keyframes hs-tl-in { from { opacity: 0; transform: translateY(3px); } }
.hs-tl.warn { color: #e0876a; }
.hs-tl.dim { color: rgba(var(--pearl-rgb), .45); }
.hs-tl-new {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .4s, transform .4s;
}
.hs-tl-new.on { opacity: 1; transform: none; }
.hs-tcursor {
    display: inline-block;
    width: 7px;
    height: 12px;
    background: rgba(var(--pearl-rgb), .8);
    vertical-align: -2px;
    animation: hs-blink 1.1s steps(1) infinite;
}

/* agent terminal window */
.hs-cli-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    font: 12.5px/1.6 'Geist Mono', ui-monospace, Consolas, monospace;
    color: var(--pearl-solid);
    overflow: hidden;
    text-align: left;
}
/* scrollable conversation region — content bottom-anchored like a real
   terminal, thin stable scrollbar so the column never jumps */
.hs-cli-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--pearl-rgb), .22) transparent;
    scrollbar-gutter: stable;
}
.hs-cli-scroll::-webkit-scrollbar { width: 8px; }
.hs-cli-scroll::-webkit-scrollbar-track { background: transparent; }
.hs-cli-scroll::-webkit-scrollbar-thumb { background: rgba(var(--pearl-rgb), .18); border-radius: 4px; }
.hs-cli-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--pearl-rgb), .32); }
.hs-cli-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
}
.hs-cli-path { color: rgba(var(--pearl-rgb), .45); margin-bottom: 8px; }
.hs-cli-head { color: var(--pearl-solid); margin-bottom: 10px; }
.hs-cli-diffbox {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .35s, transform .35s;
    border: 1px solid rgba(var(--cream-rgb), .14);
    background: rgba(var(--cream-rgb), .05);
    border-radius: 4px;
    padding: 6px 10px;
    margin: 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hs-cli-diffbox.on { opacity: 1; transform: none; }
.hs-cli-difffile { font-weight: 500; }
.hs-cli-line {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .35s, transform .35s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hs-cli-line.on { opacity: 1; transform: none; }
.hs-prompt-c { color: var(--azure-400); margin-right: 7px; }
.hs-hex { color: rgba(var(--pearl-rgb), .55); margin-right: 7px; }
.hs-dim { color: rgba(var(--pearl-rgb), .35); }
.hs-cli-msg { margin-top: 6px; white-space: normal; color: var(--pearl-solid); }
.hs-caret {
    display: inline-block;
    width: 7px;
    height: 13px;
    margin-left: 2px;
    background: var(--azure-400);
    vertical-align: -2px;
    animation: hs-blink 1s steps(1) infinite;
}
@keyframes hs-blink { 50% { opacity: 0; } }
.hs-cli-follow {
    margin-top: 10px;
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(var(--cream-rgb), .10);
    border-radius: 6px;
    padding: 7px 10px;
    color: rgba(var(--pearl-rgb), .55);
    font-size: 12px;
}
.hs-cli-foot { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: rgba(var(--pearl-rgb), .35); }

/* scene responsive */
/* Below 1400px the full chat story no longer fits inside a fixed-height
   matted window, so the window joins the normal flow and the stage grows
   with it: every row stays visible, nothing clips or scrolls away. The CLI
   terminal keeps overlapping the window's bottom-right corner. */
@media (max-width: 1399px) {
    .hero-stage { height: auto; padding: clamp(14px, 2vw, 26px); }
    /* window is back in flow, so the stage wrapper must flow with it —
       while it stayed absolute/inset:0 the auto-height stage collapsed and
       overflow:hidden clipped the IDE window down to its titlebar */
    .hs-stage { position: relative; inset: auto; }
    .hs-win-desktop { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; min-height: clamp(420px, 72vw, 560px); }
    .hs-chat-scroll { overflow-y: visible; }
    .hs-win-cli { right: 3.5%; bottom: 4%; }
}
@media (max-width: 1020px) {
    .hs-ed { display: none; }
    .hs-chat { flex: 1; border-right: 0; }
    .hs-win-cli { right: 3%; bottom: 4%; width: min(440px, 52%); }
}
@media (max-width: 760px) {
    .hs-side { display: none; }
    .hs-win-cli { display: none; }
    /* The desktop full-bleed math (100% + 140px, -70px margin) assumes 70px
       hero padding; mobile padding is smaller, so the stage overflowed the
       viewport and clipped the window on both sides. Pin the stage to the
       exact viewport width instead: wallpaper still edge-to-edge, window
       fully on-screen. */
    .hero-stage { width: 100vw; margin-left: calc(50% - 50vw); padding: 12px 12px 16px; }
    /* prompt bubble + chat pane compact so the typed prompt fits the card */
    .hs-chat-title { padding: 9px 12px 7px; font-size: 12px; }
    .hs-chat-scroll { padding: 0 12px 10px; gap: 8px; }
    .hs-bubble { font-size: 12px; text-align: left; padding: 9px 11px; min-height: 0; line-height: 1.45; }
}
@media (max-width: 400px) {
    .hs-bubble { font-size: 11.5px; padding: 8px 10px; }
    .hs-step, .hs-diff { font-size: 11.5px; }
    .hs-msg { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hs-win, .hs-spin, .hs-caret { animation: none !important; }
    .hs-step, .hs-msg, .hs-diff, .hs-questions, .hs-cli-line, .hs-cli-diffbox, .hs-tl-new, .hs-tcursor { transition: none; animation: none !important; }
    /* items start at opacity:0 for the reveal animation — force visible when motion is off */
    .hs-step, .hs-msg, .hs-diff, .hs-questions { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 1023px) {
    .hero-inner {
        display: block;
        text-align: center;
    }
    /* The scene hero's two-column grid (specificity 0,3,0) was beating the
       plain .hero-inner block fallback above, so phones kept the grid: the
       copy column collapsed to 0 width and its text spilled OVER the aside
       card. Force single-column flow here — same specificity, later in the
       file, wins. */
    .hero.hero-scene .hero-inner {
        display: block;
    }
    .hero-aside {
        margin-top: 30px;
    }
    .hero-aside .hero-signal-card {
        max-width: 560px;
        margin-inline: auto;
    }
    .hero.hero-scene .hero-copy {
        max-width: 640px;
        margin-inline: auto;
        align-items: center;
        text-align: center;
    }
    .hero.hero-scene h1 { max-width: none; }
    .hero.hero-scene .hero-lede,
    .hero.hero-scene .hero-verbs,
    .hero.hero-scene .sub { margin-inline: auto; }
    .hero.hero-scene .hero-verbs { justify-content: center; }
    .hero.hero-scene .hero-cta { justify-content: center; }
    .hero.hero-scene .hero-signal-card { margin-inline: auto; }
    .hero-shot-frame { transform: none; }
}

/* ── Product facts: premium spec card ─ */
.hero-strip-bar {
    margin-top: clamp(40px, 7vh, 72px);
    padding: 0 20px;
}
.hero-strip-bar .hero-strip { margin: 0 auto; }

/* (.langs-static removed — strip is now a marquee) */

/* Center the Views rail: 3 cards no longer fill the row, so the rail and
   its label sit centered on desktop; narrow screens keep scroll-from-left. */
@media (min-width: 900px) {
    .cinema-rail { justify-content: center; }
    .cinema-rail-label { justify-content: center; }
}


/* ================================================================
   HERO ATMOSPHERE — drifting smoke, dot-matrix constellation,
   node grid, and the cursor-repelling capability chip field.
   ================================================================ */
.hero.hero-split { position: relative; }
.hero.hero-split .hero-copy,
.hero.hero-split .hero-visual { position: relative; z-index: 2; }

/* Ambient layer: faint node grid + slow smoke blobs, clipped to the hero */
.hero-atmo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(var(--cream-rgb), 0.13) 1.5px, transparent 1.6px) 0 0 / 120px 120px,
        linear-gradient(rgba(var(--cream-rgb), 0.045) 1px, transparent 1px) 0 0 / 120px 120px,
        linear-gradient(90deg, rgba(var(--cream-rgb), 0.045) 1px, transparent 1px) 0 0 / 120px 120px;
    -webkit-mask-image: radial-gradient(90% 85% at 50% 42%, #000 35%, transparent 100%);
    mask-image: radial-gradient(90% 85% at 50% 42%, #000 35%, transparent 100%);
}

.atmo-dots {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    opacity: 0.6;
    animation: atmoCanvasDrift 46s ease-in-out infinite alternate;
}
@keyframes atmoCanvasDrift {
    from { transform: translate3d(-1.4%, -1%, 0); }
    to   { transform: translate3d(1.4%, 1.6%, 0); }
}

.atmo-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}
.atmo-blob--a {
    width: 52vw; height: 34vw; left: -14%; top: -20%;
    background: radial-gradient(closest-side, rgba(var(--pearl-rgb), 0.14), transparent 70%);
    animation: atmoSmokeA 28s ease-in-out infinite alternate;
}
.atmo-blob--b {
    width: 46vw; height: 30vw; right: -12%; top: 2%;
    background: radial-gradient(closest-side, rgba(var(--pearl-rgb), 0.10), transparent 70%);
    animation: atmoSmokeB 36s ease-in-out infinite alternate;
}
.atmo-blob--c {
    width: 40vw; height: 26vw; left: 28%; bottom: -24%;
    background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.09), transparent 70%);
    animation: atmoSmokeA 32s ease-in-out infinite alternate-reverse;
}
@keyframes atmoSmokeA {
    from { transform: translate3d(-4%, -2%, 0) rotate(-5deg) scale(1); }
    to   { transform: translate3d(7%, 5%, 0) rotate(7deg) scale(1.14); }
}
@keyframes atmoSmokeB {
    from { transform: translate3d(4%, 2%, 0) scale(1.06); }
    to   { transform: translate3d(-6%, -5%, 0) scale(0.94); }
}

/* Capability chips: sit at home positions, spring away from the cursor.
   --p (0..1) is proximity, driven by JS; it brightens border + fill. */
.chip-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.hchip {
    --p: 0;
    position: absolute;
    left: var(--hx);
    top: var(--hy);
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid rgba(var(--cream-rgb), calc(0.14 + var(--p) * 0.42));
    background: rgba(var(--win-tint-rgb), 0.55);
    color: var(--slate-300, var(--faint));
    font-family: 'Geist Mono', 'Cascadia Code', 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: calc(0.42 + var(--p) * 0.58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}

@media (max-width: 900px) {
    .hchip--wide { display: none; }
    .chip-field { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .atmo-blob, .atmo-dots { animation: none; }
    .hchip { opacity: 0.42; }
}

/* Product shots stay in the DOM for Google Images, take no page space. */
.seo-shots {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

/* ============================================================
   PROOF CARD — Cursor-style split after the provider marquee.
   Wallpaper (same painting as the hero) lives only inside the
   rounded stage. Copy sits left; product shot sits right.
   Right side is a DOM-built product window (data-based, no image).
   ============================================================ */
.proof {
    padding: clamp(28px, 4vw, 56px) 0 0;
}
.proof-stage {
    position: relative;
    width: min(1760px, calc(100% - clamp(24px, 3vw, 56px)));
    margin-inline: auto;
    min-height: clamp(460px, 48vw, 640px);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(var(--cream-rgb), .09);
}
.proof-wall {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(16px) brightness(.55) saturate(.9);
    transform: scale(1.08);
    pointer-events: none;
}
.proof-wall-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(var(--scrim-rgb), .78) 0%, rgba(var(--scrim-rgb), .42) 38%, rgba(var(--scrim-rgb), .18) 100%),
        radial-gradient(120% 90% at 70% 50%, rgba(var(--scrim-rgb), 0) 40%, rgba(var(--scrim-rgb), .45) 100%);
}
.proof-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(260px, 0.86fr) minmax(0, 1.4fr);
    /* breathing room between copy panel and product window */
    column-gap: clamp(20px, 2.6vw, 44px);
    min-height: inherit;
    align-items: stretch;
}
.proof-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    margin: 0;
    padding: clamp(28px, 3.4vw, 52px) clamp(24px, 3vw, 48px);
    background: rgba(var(--scrim-rgb), .82);
    border: none;
    border-radius: 0;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: none;
}
.proof-copy h2 {
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 650;
    color: #436143;
}
.proof-copy p {
    margin: 0 0 22px;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    line-height: 1.45;
    color: var(--slate-300);
    max-width: 36ch;
}
.proof-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--gold);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.proof-link:hover { color: var(--gold-bright); }
.proof-link span { transition: transform .2s var(--ease); }
.proof-link:hover span { transform: translateX(3px); }
/* --- data-based product window (mirrors cursor.html structure) --- */
.proof-media {
    display: flex;
    align-items: stretch;
    /* top + bottom strips — right edge bleeds, bottom keeps its gap */
    padding: clamp(20px, 2.6vw, 36px) 0;
}
.pw-win {
    width: 100%;
    max-width: none;
    /* bleed past the stage's right edge only — clipped by
       .proof-stage overflow, the Cursor product-shot look */
    margin-right: calc(-1 * clamp(28px, 3vw, 64px));
    display: flex;
    flex-direction: column;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    background: var(--card-solid);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, .45),
        0 14px 32px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(var(--cream-rgb), .10);
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(var(--pearl-rgb), .85);
    text-align: left;
}
.pw-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--card-solid);
    border-bottom: 1px solid rgba(var(--cream-rgb), .10);
}
.pw-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--pearl-rgb), .16); }
.pw-dot:nth-child(2) { background: rgba(var(--pearl-rgb), .16); }
.pw-dot:nth-child(3) { background: rgba(var(--pearl-rgb), .16); }
.pw-title { margin-left: 8px; font-size: 12px; letter-spacing: .02em; color: rgba(var(--pearl-rgb), .55); }
.pw-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    min-height: clamp(430px, 42vw, 620px);
    flex: 1;
}
.pw-agent {
    padding: 16px 18px;
    border-right: 1px solid rgba(var(--cream-rgb), .10);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.pw-prompt {
    align-self: flex-start;
    background: var(--card-deep);
    border: 1px solid rgba(var(--accent-rgb), .25);
    color: var(--pearl-solid);
    border-radius: 10px 10px 10px 3px;
    padding: 9px 12px;
}
.pw-line { color: rgba(var(--pearl-rgb), .78); }
.pw-k {
    display: inline-block;
    margin-right: 7px;
    color: var(--pearl-solid);
    font-size: 12.5px;
    font-weight: 700;
}
.pw-k.thought { color: var(--azure-400); }
.pw-t { font-style: normal; color: rgba(var(--pearl-rgb), .4); font-size: 11px; margin-right: 6px; }
.pw-file {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-solid);
    border: 1px solid rgba(var(--cream-rgb), .10);
    border-radius: 8px;
    padding: 8px 11px;
}
.pw-check { flex: 0 0 12px; height: 12px; border: 1px solid rgba(var(--pearl-rgb), .35); border-radius: 3px; }
.pw-fname { font-weight: 600; color: var(--pearl-solid); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-nums { margin-left: auto; display: flex; gap: 9px; font-family: 'Geist Mono', ui-monospace, Consolas, monospace; font-size: 11.5px; }
.pw-plus { color: var(--green-bright); font-weight: 600; }
.pw-minus { color: #f0645a; font-weight: 600; }
.pw-card {
    background: var(--card-solid);
    border: 1px solid rgba(var(--cream-rgb), .10);
    border-radius: 10px;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pw-card strong { color: var(--pearl-solid); font-size: 12.5px; }
.pw-opts { display: flex; gap: 6px; }
.pw-opts i {
    font-style: normal;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), .35);
    color: var(--azure-400);
    font-size: 11.5px;
}
.pw-input {
    margin-top: auto;
    border: 1px solid rgba(var(--cream-rgb), .10);
    border-radius: 999px;
    padding: 7px 12px;
    color: rgba(var(--pearl-rgb), .38);
    background: var(--card-deep);
}
.pw-ed { display: flex; flex-direction: column; min-width: 0; }
.pw-tabs {
    display: flex;
    background: var(--card-solid);
    border-bottom: 1px solid rgba(var(--cream-rgb), .10);
}
.pw-tabs span {
    padding: 8px 14px;
    color: rgba(var(--pearl-rgb), .4);
    font-size: 12px;
    border-right: 1px solid rgba(var(--cream-rgb), .08);
}
.pw-tabs span.on {
    color: var(--pearl-solid);
    background: var(--card-solid);
    box-shadow: inset 0 2px 0 var(--azure-400);
}
.pw-crumb {
    padding: 7px 12px;
    color: rgba(var(--pearl-rgb), .35);
    font-size: 11.5px;
    border-bottom: 1px solid rgba(var(--cream-rgb), .05);
}
.pw-doc { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.pw-h1 { color: var(--pearl-solid); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.pw-p { color: rgba(var(--ink), .55); }
.pw-tasks {
    margin-top: auto;
    border-top: 1px solid rgba(var(--cream-rgb), .07);
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pw-tasks-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; }
.pw-tasks strong { font-size: 12px; color: var(--pearl-solid); }
.pw-count {
    font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
    font-size: 10.5px;
    color: var(--blue-bright);
    background: rgba(var(--accent-rgb), .12);
    border: 1px solid rgba(var(--accent-rgb), .28);
    border-radius: 4px;
    padding: 1px 7px;
}
.pw-task {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(var(--cream-rgb), .09);
    border-radius: 6px;
    padding: 7px 10px;
    color: rgba(var(--pearl-rgb), .5);
    font-size: 12px;
}
.pw-tico {
    flex: 0 0 12px;
    height: 12px;
    border: 1px solid rgba(var(--pearl-rgb), .3);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
}
.pw-task.done { color: rgba(var(--pearl-rgb), .82); border-color: rgba(var(--green-rgb), .25); }
.pw-task.done .pw-tico { border-color: rgba(var(--green-rgb), .7); }
.pw-task.done .pw-tico::before { content: "✓"; font-size: 8px; line-height: 1; color: var(--green-deep); }
.pw-task.run { color: rgba(var(--pearl-rgb), .82); border-color: rgba(var(--accent-rgb), .3); }
.pw-tspin { flex: 0 0 14px; width: 14px; height: 14px; display: none; }
.pw-task.run .pw-tspin { display: block; }

@media (max-width: 860px) {
    .proof-inner {
        grid-template-columns: 1fr;
    }
    .proof-copy {
        max-width: none;
        margin: 0;
        padding: 28px 20px 24px;
        border-right: none;
        border-bottom: 1px solid rgba(var(--pearl-rgb), .07);
    }
    .proof-copy p { max-width: 48ch; }
    .proof-media {
        padding: 18px 16px 24px;
    }
    .pw-win {
        margin-right: 0;
        border-radius: 12px;
    }
    .pw-body {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .pw-agent {
        border-right: 0;
        border-bottom: 1px solid rgba(var(--cream-rgb), .08);
    }
}

/* ---- proof window: living session (same pattern as the hero .hs timeline) ----
   Lines, diffs, plan rows and tasks start hidden; main.js adds .on in
   sequence when the stage scrolls into view. */
.pw-win .pw-line,
.pw-win .pw-file,
.pw-win .pw-card,
.pw-win .pw-doc .pw-p,
.pw-win .pw-tasks .pw-task {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .45s ease, transform .45s ease;
}
.pw-win .pw-line.on,
.pw-win .pw-file.on,
.pw-win .pw-card.on,
.pw-win .pw-doc .pw-p.on,
.pw-win .pw-tasks .pw-task.on {
    opacity: 1;
    transform: none;
}

/* the picked option glows azure (agent chose) */
.pw-opts.picked i:last-child {
    background: rgba(var(--accent-rgb), .16);
    border-color: rgba(var(--accent-rgb), .55);
    color: var(--azure-400);
}

/* follow-up input keeps a blinking gold caret — the session stays "live" */
.pw-input::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin-left: 6px;
    vertical-align: -2px;
    background: var(--gold-bright, var(--gold-bright));
    animation: pw-blink 1.1s steps(1) infinite;
}
@keyframes pw-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .pw-win .pw-line,
    .pw-win .pw-file,
    .pw-win .pw-card,
    .pw-win .pw-doc .pw-p,
    .pw-win .pw-tasks .pw-task { transition: none; }
    .pw-input::after { animation: none; }
}

/* ============================================================
   PROOF STAGE - always light (paper white) in both themes
   ============================================================ */
.proof-stage {
    color-scheme: light;
}
/* dark black body copy on the white panel */
.proof-copy p { color: #272826; }
/* wallpaper: matte glass frost — same recipe as the hero */
.proof-wall {
    filter: blur(22px) saturate(1.12) brightness(1.06);
    opacity: 1;
    transform: scale(1.10);
}
.proof-wall-shade {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .14) 100%),
        linear-gradient(90deg, rgba(var(--scrim-rgb), .50) 0%, rgba(var(--scrim-rgb), .26) 38%, rgba(var(--scrim-rgb), .12) 100%),
        radial-gradient(120% 90% at 70% 50%, rgba(var(--scrim-rgb), 0) 40%, rgba(var(--scrim-rgb), .30) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .75),
        inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.proof-wall-shade::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Fine matte grain on the glass surface */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    opacity: .07;
    pointer-events: none;
}
.pw-win {
    box-shadow:
        0 28px 70px rgba(var(--shadow-rgb), .22),
        0 14px 32px rgba(var(--shadow-rgb), .16),
        0 0 0 1px rgba(var(--cream-rgb), .10);
}
/* the product window IS the real IDE: dark-mode chrome (#1a1713)
   sitting on the warm white stage — tokens re-scoped dark */
.proof-stage .pw-win {
    color-scheme: dark;
    --card-solid: #1a1713;
    --card-solid-hi: #1a1713;
    --card-deep: #1a1713;
    --pearl-solid: #f0f7e5;
    --pearl-rgb: 240, 247, 229;
    --cream-rgb: 226, 240, 204;
    --ink: 226, 240, 204;
    --muted: #9ab189;
    --faint: #647d59;
    --accent-rgb: 139, 197, 61;
    --azure-400: #a5d45f;
    --blue-bright: #7aba9a;
    --green-bright: #4ade80;
    --green-rgb: 78, 201, 120;
    --green-deep: #4ade80;
    --hi-text: #e2f0cc;
}

/* ============================================================
   Mobile hero CTAs — compact single-line pills, side by side.
   Desktop keeps the large pills; phones get a tidy pair that
   never wraps to two lines (secondary shortens to "GitHub").
   ============================================================ */
.gh-short { display: none; }
@media (max-width: 640px) {
    .hero.hero-scene .hero-cta {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 22px;
    }
    .hero.hero-scene .hero-cta .btn-lg {
        width: auto;
        font-size: 13.5px;
        line-height: 1;
        padding: 11px 16px;
        border-radius: 999px;
        gap: 6px;
        white-space: nowrap;
    }
    .hero.hero-scene .hero-cta .btn-lg svg {
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
    }
    .hero.hero-scene .hero-cta .gh-full { display: none; }
    .hero.hero-scene .hero-cta .gh-short { display: inline; }
}

/* ============================================================
   FINAL CTA — white sheet, dark ink, one orange action
   ============================================================ */
.cta-glass {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    border: 1px solid var(--hairline);
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 26px 54px -30px rgba(39, 40, 38, .16),
        0 2px 8px rgba(39, 40, 38, .04);
}
/* Pure white milk glass — the frosted art sits BEHIND a near-opaque white
   film, so it reads as a matte milky pane (not a photo). Swap the art by
   overriding --cta-art (defaults to the hero wallpaper, already deployed). */
.cta-glass::before {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: -2;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        var(--cta-art, url('/media/img/background-hero-2.png')) center / cover no-repeat;
    filter: blur(22px) saturate(1.08) brightness(1.06);
    opacity: .45;
    pointer-events: none;
}
.cta-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .88) 55%, rgba(255, 255, 255, .94) 100%);
    pointer-events: none;
}
.cta-glass h2,
.cta-glass p,
.cta-glass .hero-cta,
.cta-glass .hero-meta,
.cta-glass .cta-loop,
.cta-glass .cta-chips {
    position: relative;
    z-index: 1;
}
.cta-glass h2 {
    color: var(--ink);
    background: none;
    -webkit-text-fill-color: var(--ink);
}
.cta-glass p { color: var(--muted); }
.cta-glass .btn-lg.primary {
    background: linear-gradient(180deg, #ff6a5e 0%, #f7493f 55%, #e23c33 100%);
    color: #ffffff;
    border: 1px solid rgba(247, 73, 63, .55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
}
.cta-glass .btn-lg.primary:hover {
    background: linear-gradient(180deg, #f7493f 0%, #e23c33 100%);
    color: #ffffff;
    transform: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset;
}
.cta-glass .btn-lg.glass {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--hairline);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.cta-glass .btn-lg.glass:hover {
    background: rgba(39, 40, 38, .05);
    color: var(--ink);
    border-color: var(--hairline-hi);
    transform: none;
}
.cta-glass .hero-meta,
.cta-glass .hero-meta span { color: var(--muted); }
.cta-glass .hero-meta span::before { background: rgba(39, 40, 38, .35); }

/* ---------- CTA agent-loop centerpiece ----------
   Same Read/Think/Edit/Verify motion as the overview Agent plate,
   flattened to a horizontal rail so the final CTA carries the product's
   core story in one glance. Accent defaults to the on-brand forest green. */
.cta-loop {
    --cta-accent: #33a425;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: min(560px, 100%);
    margin: 30px auto 0;
    padding: 4px 0 2px;
    position: relative;
}
/* continuous connector: first dot centre -> last dot centre (5 equal flex
   segments => centres at 10% / 90%) */
.cta-loop::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 7px;
    height: 1px;
    background: linear-gradient(90deg, rgba(51, 164, 37, .55), rgba(51, 164, 37, .15));
}
.cta-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}
.cta-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid rgba(51, 164, 37, .5);
    box-shadow: 0 0 0 3px #ffffff;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.cta-step.done .cta-dot {
    background: var(--cta-accent);
    border-color: var(--cta-accent);
}
.cta-step.live .cta-dot {
    background: var(--cta-accent);
    border-color: var(--cta-accent);
    animation: cta-pulse 2.2s ease-out infinite;
}
.cta-name {
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink);
    white-space: nowrap;
}
.cta-note {
    font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 92px;
}
@keyframes cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(51, 164, 37, .45); }
    70%  { box-shadow: 0 0 0 9px rgba(51, 164, 37, 0); }
    100% { box-shadow: 0 0 0 0 rgba(51, 164, 37, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .cta-step.live .cta-dot { animation: none; }
}

/* SEO keyword chips — scannable proof + provider keywords, not a wall of text */
.cta-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(39, 40, 38, .08);
}
.cta-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #496a33;
    background: rgba(51, 164, 37, .07);
    border: 1px solid rgba(51, 164, 37, .18);
    border-radius: 999px;
    padding: 6px 13px;
    white-space: nowrap;
}
.cta-chips span::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #33a425;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .cta-loop { width: 100%; margin-top: 24px; }
    .cta-name { font-size: 11px; }
    .cta-note { font-size: 9.5px; max-width: 68px; }
    .cta-chips { gap: 6px; }
    .cta-chips span { font-size: 11px; padding: 5px 10px; }
}

/* ============================================================
   KEY VAULT CONSOLE — vault-grade polish (Security tab plate)
   ============================================================ */
.sec-win { position: relative; border-radius: 12px; }
#security .fx-bar {
    background: linear-gradient(180deg, rgba(51, 164, 37, .08), rgba(51, 164, 37, .02));
}
.fx-shield { flex: none; color: #33a425; margin-right: 6px; }
#security .fx-bar-title {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-weight: 600;
    letter-spacing: .03em;
}

/* seal block — vault card with gradient rail */
.sec-seal {
    position: relative;
    margin: 12px 14px 0;
    padding: 12px 14px 12px 18px;
    background: #ffffff;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: 0 2px 10px -6px rgba(39, 40, 38, .18);
}
.sec-seal::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(#7fc775, #33a425);
}
#security .fx-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #33a425;
    color: #fff;
    font-size: 10px;
    margin-right: 7px;
}

/* the 0-bytes proof line as a dashed chip */
.sec-zero {
    display: block;
    margin-top: 9px;
    padding: 7px 10px;
    font-size: 11px;
    letter-spacing: .02em;
    background: rgba(51, 164, 37, .06);
    border: 1px dashed rgba(51, 164, 37, .42);
    border-radius: 8px;
    color: #496a33 !important;
}

/* flow nodes as status pills */
#security .sec-node {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11px;
    color: var(--muted);
}
#security .sec-node::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(39, 40, 38, .28);
}
#security .sec-node-hi {
    color: #258095;
    border-color: rgba(37, 128, 149, .35);
    background: rgba(37, 128, 149, .06);
}
#security .sec-node-hi::before { background: #258095; }

/* wire tags take the direction's colour */
#security .sec-tag-out { color: #496a33; }
#security .sec-tag-back { color: #258095; }

/* hard-blocked ✕ badge */
#security .sec-flow-x i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(247, 73, 63, .12);
    color: #f7493f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-style: normal;
    margin-right: 7px;
}

/* round-trip row: one clean wire line — no nested dashed box, no stretch */
#security .sec-flow {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 10px 14px 2px;
    padding: 0 2px;
    border: none;
    border-radius: 0;
    background: transparent;
}
#security .sec-node { top: 0; }
#security .sec-wire { height: 32px; }
#security .sec-wire::before {
    top: 21px;
    background: linear-gradient(90deg, rgba(51, 164, 37, .45), rgba(37, 128, 149, .35), rgba(51, 164, 37, .45));
}
#security .sec-tag { top: 2px; font-size: 9px; letter-spacing: .07em; }
#security .sec-packet::before { top: 18.5px; }
#security .sec-packet.sec-out::before {
    background: #33a425;
    box-shadow: 0 0 10px rgba(51, 164, 37, .5);
}
#security .sec-packet.sec-back::before {
    background: #258095;
    box-shadow: 0 0 10px rgba(37, 128, 149, .45);
}