/* Gen AI Media Gate tool — extracted from template-gen-image-gate.php */
        :root {
            --font-mono: "Menlo", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

            /* Cloudinary-leaning palette (from reference) */
            --ink: #16181d;
            --fg: #2b2f36;
            --muted: #6b7280;
            --faint: #9aa0aa;
            --line: #e8e9ec;
            --line-soft: #eef0f2;
            --rail-bg: #ffffff;
            --canvas: #f1f2f5;
            --field-bg: #f7f8fa;
            --blue: #3454d1;
            --blue-ink: #2c3fb0;
            --blue-soft: #eef0fc;
            --blue-softer: #f4f5fd;
            --play: #d9dbe1;
            --grad: linear-gradient(96deg, #ec1e96 0%, #b51fa6 42%, #6722b0 72%, #3a3fc6 100%);

            /* Shared brand tokens used by marketing sections */
            --brand: #0c163b;
            --brand-d: #3f3792;
            --cta: #0195ff;
            --gen1: #f59e0b;

            --r-sm: 6px;

            /* Dark mode transition */
            --dm-speed: .25s;
        }

        /* ── Dark mode overrides ── */
        [data-theme="dark"] {
            --ink: #e8edf4;
            --fg: #cdd5df;
            --muted: #7f8fa0;
            --faint: #4a5568;
            --line: rgba(255, 255, 255, .08);
            --line-soft: rgba(255, 255, 255, .05);
            --rail-bg: #0d1e32;
            --canvas: #0a1828;
            --field-bg: #122540;
            --blue-soft: rgba(52, 84, 209, .18);
            --blue-softer: rgba(52, 84, 209, .1);
            --play: rgba(255, 255, 255, .12);
        }

        /* Apply transitions to key elements */
        .gen-ai-gate .app, .gen-ai-gate .hdr, .gen-ai-gate .rail, .gen-ai-gate .main, .gen-ai-gate .body, .gen-ai-gate .gen-card, .gen-ai-gate .optbar, .gen-ai-gate .code-panel, .gen-ai-gate .code-card, .gen-ai-gate .feat-card, .gen-ai-gate .how-step, .gen-ai-gate .res-card, .gen-ai-gate .tool-card, .gen-ai-gate .model-tile, .gen-ai-gate .pricing-card, .gen-ai-gate .mkt-wrap, .gen-ai-gate .split-section, .gen-ai-gate .pricing-section, .gen-ai-gate .how-section, .gen-ai-gate .res-section, .gen-ai-gate .aud-section, .gen-ai-gate .disc-section, .gen-ai-gate .models-section, .gen-ai-gate .feat-section {
            transition: background var(--dm-speed) ease, border-color var(--dm-speed) ease, color var(--dm-speed) ease;
        }

        /* ── Dark: app shell ── */
        [data-theme="dark"] .gen-ai-gate { background: #0a1828; }
        [data-theme="dark"] .gen-ai-gate .app { background: #0d1e32; }
        [data-theme="dark"] .gen-ai-gate .hdr { background: #0d1e32; border-bottom-color: rgba(255, 255, 255, .06); }
        [data-theme="dark"] .gen-ai-gate .rail { background: #0d1e32; border-right-color: rgba(255, 255, 255, .06); }
        [data-theme="dark"] .gen-ai-gate .body { background: #0a1828; }

        /* ── Dark: sandbox cards ── */
        [data-theme="dark"] .gen-ai-gate .gen-card { background: #122540; border-color: rgba(255, 255, 255, .07); }
        [data-theme="dark"] .gen-ai-gate .gen-card__img { background: #0a1828; }
        /* optbar + urlrow */
        [data-theme="dark"] .gen-ai-gate .optbar { background: #0a1828; border-color: rgba(255, 255, 255, .07); }
        [data-theme="dark"] .gen-ai-gate .optbar .urlrow { background: #0d1e32; border-color: rgba(255, 255, 255, .08); }
        [data-theme="dark"] .gen-ai-gate .optbar code { color: #8fb3cc; }
        [data-theme="dark"] .gen-ai-gate .optbar code .hl { color: #a78bfa; }
        [data-theme="dark"] .gen-ai-gate .optbar .lblgrp b { color: var(--ink); }
        [data-theme="dark"] .gen-ai-gate .optbar .cpy { background: #122540; border-color: rgba(255, 255, 255, .1); color: #7f8fa0; }
        [data-theme="dark"] .gen-ai-gate .optbar .cpy:hover { background: #1e3a56; color: var(--ink); }

        /* pane-bar preview */
        [data-theme="dark"] .gen-ai-gate .pane-bar--preview { background: rgba(13, 30, 50, .9); border-bottom-color: rgba(255, 255, 255, .06); }
        [data-theme="dark"] .gen-ai-gate .pane-bar--code { background: #0d1e32; border-bottom-color: rgba(255, 255, 255, .06); }
        [data-theme="dark"] .gen-ai-gate .pane-label--preview, [data-theme="dark"] .gen-ai-gate .pane-label--code { color: #4a5f78; }

        /* download button */
        [data-theme="dark"] .gen-ai-gate .dl-btn { background: #122540; border-color: rgba(255, 255, 255, .1); color: #a0b4c8; }
        [data-theme="dark"] .gen-ai-gate .dl-btn:hover { background: #1e3a56; color: var(--ink); }
        [data-theme="dark"] .gen-ai-gate .code-panel { background: #0d1e32; }
        [data-theme="dark"] .gen-ai-gate .code-card { background: #122540; border-color: rgba(255, 255, 255, .07); }
        [data-theme="dark"] .gen-ai-gate .code-card__bar { background: #0f2035; border-bottom-color: rgba(255, 255, 255, .06); }
        [data-theme="dark"] .gen-ai-gate .code { color: #a8c0d6; }
        [data-theme="dark"] .gen-ai-gate .code-foot { color: var(--muted); }
        [data-theme="dark"] .gen-ai-gate .code-tabs { border-bottom-color: rgba(255, 255, 255, .07); }
        [data-theme="dark"] .gen-ai-gate .code-tab { color: var(--muted); }
        [data-theme="dark"] .gen-ai-gate .code-tab.is-active { color: var(--ink); border-bottom-color: var(--blue); }
        [data-theme="dark"] .gen-ai-gate .segmented { background: rgba(255, 255, 255, .06); }
        [data-theme="dark"] .gen-ai-gate .segmented__btn.is-active { background: #1e3a56; color: var(--ink); }
        [data-theme="dark"] .gen-ai-gate textarea, [data-theme="dark"] .gen-ai-gate input, [data-theme="dark"] .gen-ai-gate select { background: #122540 !important; color: var(--fg) !important; border-color: rgba(255, 255, 255, .1) !important; }
        [data-theme="dark"] .gen-ai-gate .adv-body { border-color: rgba(255, 255, 255, .06); }
        [data-theme="dark"] .gen-ai-gate .credits-panel { background: #122540; border-color: rgba(255, 255, 255, .08); }

        /* ── Dark: marketing sections ── */
        [data-theme="dark"] .gen-ai-gate .mkt-wrap { background: #0a1828; border-top-color: rgba(255, 255, 255, .06); }
        [data-theme="dark"] .gen-ai-gate .feat-section { background: #0d1e32 !important; }
        [data-theme="dark"] .gen-ai-gate .how-section, [data-theme="dark"] .gen-ai-gate .models-section, [data-theme="dark"] .gen-ai-gate .pricing-section { background: #0a1828; }
        [data-theme="dark"] .gen-ai-gate .feat-card { background: #122540; border-color: rgba(255, 255, 255, .07); }
        [data-theme="dark"] .gen-ai-gate .feat-icon { background: rgba(1, 149, 255, .18); }
        [data-theme="dark"] .gen-ai-gate .how-step { background: #122540; border-color: rgba(255, 255, 255, .07); }
        [data-theme="dark"] .gen-ai-gate .how-chip { background: rgba(255, 255, 255, .05); color: #9dc9ff; }
        [data-theme="dark"] .gen-ai-gate .model-tile { background: #122540; border-color: rgba(255, 255, 255, .07); }
        [data-theme="dark"] .gen-ai-gate .res-card, [data-theme="dark"] .gen-ai-gate .tool-card { background: #122540; border-color: rgba(255, 255, 255, .07); }
        [data-theme="dark"] .gen-ai-gate .mkt-label { background: rgba(1, 149, 255, .28); color: #fff; }
        [data-theme="dark"] .gen-ai-gate .split-section { background: #0d1e32 !important; }
        [data-theme="dark"] .gen-ai-gate .split-img-frame { box-shadow: 0 16px 56px rgba(0, 0, 0, .45); }
        [data-theme="dark"] .gen-ai-gate .split-bullet-icon { background: rgba(1, 149, 255, .18); }
        [data-theme="dark"] .gen-ai-gate .split-bullets li code { background: rgba(1, 149, 255, .15); }
        [data-theme="dark"] .gen-ai-gate .pricing-card { background: #122540; border-color: rgba(255, 255, 255, .08); }
        [data-theme="dark"] .gen-ai-gate .pricing-card.featured { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(1, 149, 255, .25); }
        [data-theme="dark"] .gen-ai-gate .pricing-card__btn.ghost { background: rgba(1, 149, 255, .18); color: #eaf4ff; }
        [data-theme="dark"] .gen-ai-gate .pricing-card__btn.outline { background: transparent; }
        [data-theme="dark"] .gen-ai-gate .pricing-card__price { color: var(--ink); }
        [data-theme="dark"] .gen-ai-gate .pricing-note a { color: #a78bfa; }
        [data-theme="dark"] .gen-ai-gate .pricing-card__features li svg { color: #5fb2ff; }

        .gen-ai-gate .dm-toggle {width: 36px;height: 36px;border-radius: var(--r-md);border: 1px solid var(--line);background: transparent;color: var(--muted);display: inline-flex;align-items: center;justify-content: center;cursor: pointer;margin-right: 6px;transition: background var(--dm-speed), color var(--dm-speed), border-color var(--dm-speed)}
        .gen-ai-gate .dm-toggle:hover {background: var(--canvas);color: var(--ink)}
        .gen-ai-gate .dm-icon {display: none}
        .gen-ai-gate .dm-icon--moon {display: block}
        [data-theme="dark"] .gen-ai-gate .dm-icon--moon {display: none}
        [data-theme="dark"] .gen-ai-gate .dm-icon--sun {display: block}
        :root {--r-md: 8px;--r-lg: 10px}
        .gen-ai-gate *, .gen-ai-gate *::before, .gen-ai-gate *::after {box-sizing: border-box}
        .gen-ai-gate {background: var(--rail-bg);color: var(--fg);font-size: 14px;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility}
        .gen-ai-gate button {font-family: inherit;cursor: pointer}
        .gen-ai-gate ::selection {background: #d9defb}
        .gen-ai-gate .app {display: flex;flex-direction: column;height: 100vh;background: var(--rail-bg)}
        .gen-ai-gate .hdr {height: 68px;flex: 0 0 68px;display: flex;align-items: center;padding: 0 24px;border-bottom: 1px solid var(--line);background: #fff}
        .gen-ai-gate .hdr__title {font-size: 22px;font-weight: 300;color: var(--ink);letter-spacing: -.01em}
        .gen-ai-gate .hdr__spacer {flex: 1}
        .gen-ai-gate .hdr__right {display: flex;align-items: center;gap: 6px}
        .gen-ai-gate .hbtn {display: inline-flex;align-items: center;gap: 8px;height: 38px;padding: 0 12px;background: transparent;border: none;border-radius: var(--r-md);color: var(--fg);font-size: 14px;font-weight: 500;transition: background .12s ease}
        .gen-ai-gate .hbtn:hover {background: var(--line-soft)}
        .gen-ai-gate .hbtn svg {color: var(--muted)}
        .gen-ai-gate .hbtn .chev {color: var(--faint)}
        .gen-ai-gate .hbtn--pill {background: #f0f1f4;color: var(--fg);font-weight: 500;padding: 0 16px;border: 1px solid transparent}
        .gen-ai-gate .hbtn--pill:hover {background: #e9eaef}
        .gen-ai-gate .hbtn--share {background: var(--blue-soft);color: var(--blue-ink);font-weight: 500;padding: 0 20px}
        .gen-ai-gate .hbtn--share:hover {background: #e6e9fb}
        .gen-ai-gate .credits-trigger {display: inline-flex;align-items: center;gap: 3px;height: 38px;padding: 0 14px;border-radius: var(--r-md);border: 1px solid var(--line);background: #fff;font-size: 14px;cursor: pointer;transition: background .12s ease, border-color .12s ease}
        .gen-ai-gate .credits-trigger:hover, .gen-ai-gate .credits-trigger.is-open {background: var(--field-bg);border-color: #c4c8d6}
        .gen-ai-gate .credits-used {font-size: 15px;font-weight: 400;color: var(--ink)}
        .gen-ai-gate .credits-sep {color: var(--faint);margin: 0 1px}
        .gen-ai-gate .credits-tot {font-size: 14px;font-weight: 400;color: var(--fg)}
        .gen-ai-gate .credits-word {margin-left: 5px;font-weight: 400;color: var(--muted)}
        .gen-ai-gate .credits-panel {position: absolute;top: calc(100% + 8px);right: 0;width: 272px;background: #fff;border: 1px solid var(--line);border-radius: 14px;box-shadow: 0 10px 30px #14182421;overflow: hidden;z-index: 100}
        .gen-ai-gate .credits-panel__sec {padding: 16px 18px}
        .gen-ai-gate .credits-panel__lbl {font-size: 11px;font-weight: 400;text-transform: uppercase;letter-spacing: .07em;color: var(--faint);margin-bottom: 8px}
        .gen-ai-gate .credits-panel__row {display: flex;align-items: baseline;gap: 3px;margin-bottom: 10px}
        .gen-ai-gate .credits-panel__big {font-size: 28px;font-weight: 400;color: var(--ink);letter-spacing: -.04em}
        .gen-ai-gate .credits-panel__of {font-size: 13px;color: var(--muted);font-weight: 400}
        .gen-ai-gate .cbar-track {height: 7px;background: #eff0f3;border-radius: 4px;overflow: hidden}
        .gen-ai-gate .cbar-fill {height: 100%;border-radius: 4px;background: linear-gradient(90deg, #ec1e96 0%, #6722b0 55%, #3454d1 100%)}
        .gen-ai-gate .credits-panel__div {height: 1px;background: var(--line-soft)}
        .gen-ai-gate .credits-panel__plan {font-size: 13.5px;font-weight: 400;color: var(--ink);margin-bottom: 3px}
        .gen-ai-gate .credits-panel__inc {font-size: 13px;color: var(--muted)}
        .gen-ai-gate .credits-panel__up {display: block;width: 100%;padding: 14px 18px;text-align: left;font-size: 14px;font-weight: 500;color: var(--blue-ink);background: var(--blue-softer);border: none;cursor: pointer;transition: background .12s ease}
        .gen-ai-gate .credits-panel__up:hover {background: #dce2f9}
        .gen-ai-gate .body {flex: 1;display: flex;min-height: 0}
        .gen-ai-gate .rail {width: 408px;flex: 0 0 408px;border-right: 1px solid var(--line);background: #fff;overflow-y: auto;padding: 18px 28px 40px}
        .gen-ai-gate .rail__toolbar {display: flex;justify-content: flex-end;margin-bottom: 4px}
        .gen-ai-gate .icon-btn {width: 34px;height: 34px;display: inline-flex;align-items: center;justify-content: center;border: none;background: transparent;border-radius: var(--r-md);color: var(--fg);transition: background .12s ease}
        .gen-ai-gate .icon-btn:hover {background: var(--line-soft)}
        .gen-ai-gate .field {margin-bottom: 22px}
        .gen-ai-gate .label {display: block;font-size: 15px;font-weight: 400;color: var(--ink);margin-bottom: 10px;letter-spacing: -.005em}
        .gen-ai-gate .label .req {color: #e0286f;margin-left: 2px}
        .gen-ai-gate .label--sm {font-size: 13px;font-weight: 400;color: var(--fg);margin-bottom: 8px}
        .gen-ai-gate .textarea {width: 100%;min-height: 168px;resize: vertical;border: 1px solid var(--line);border-radius: var(--r-lg);background: var(--field-bg);padding: 14px 16px;font-family: inherit;font-size: 14px;line-height: 1.55;color: var(--fg)}
        .gen-ai-gate .textarea::placeholder {color: var(--faint);font-style: italic}
        .gen-ai-gate .textarea:focus {outline: none;border-color: #c3c9f0;box-shadow: 0 0 0 3px var(--blue-softer);background: #fff}
        .gen-ai-gate .dropzone {width: 104px;height: 104px;border: 1.5px dashed #cdd1d8;border-radius: var(--r-lg);display: flex;align-items: center;justify-content: center;color: var(--faint);cursor: pointer;background: #fff;transition: border-color .12s ease, background .12s ease}
        .gen-ai-gate .dropzone:hover {border-color: var(--blue);background: var(--blue-softer);color: var(--blue)}
        .gen-ai-gate .dropzone--required {border-color: #f59e0b;background: #fffbeb;color: #d97706}
        .gen-ai-gate .seg-vars {display: inline-flex;gap: 4px}
        .gen-ai-gate .seg-var {width: 38px;height: 38px;border-radius: var(--r-md);border: 1px solid transparent;background: transparent;font-size: 14px;font-weight: 500;color: var(--fg);display: flex;align-items: center;justify-content: center;transition: background .12s ease, color .12s ease}
        .gen-ai-gate .seg-var:hover {background: var(--line-soft)}
        .gen-ai-gate .seg-var.is-active {background: var(--blue-soft);color: var(--blue-ink)}
        .gen-ai-gate .accordion-head {display: inline-flex;align-items: center;gap: 7px;background: none;border: none;padding: 4px 0;color: var(--blue);font-size: 14px;font-weight: 500}
        .gen-ai-gate .accordion-head svg {transition: transform .18s ease}
        .gen-ai-gate .accordion-head.is-open svg {transform: rotate(0deg)}
        .gen-ai-gate .accordion-body {padding-top: 18px}
        .gen-ai-gate .row {display: flex;gap: 14px;margin-bottom: 18px}
        .gen-ai-gate .col {flex: 1;min-width: 0}
        .gen-ai-gate .select-wrap {position: relative}
        .gen-ai-gate .select {width: 100%;height: 40px;padding: 0 36px 0 12px;border: 1px solid var(--line);border-radius: var(--r-md);background: #fff;color: var(--fg);font-family: inherit;font-size: 14px;appearance: none;-webkit-appearance: none}
        .gen-ai-gate .select:focus {outline: none;border-color: #c3c9f0;box-shadow: 0 0 0 3px var(--blue-softer)}
        .gen-ai-gate .select-wrap .chev {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);pointer-events: none;color: var(--faint)}
        .gen-ai-gate .dims {display: flex;align-items: flex-end;gap: 8px}
        .gen-ai-gate .input {width: 100%;height: 40px;padding: 0 12px;border: 1px solid var(--line);border-radius: var(--r-md);background: #fff;font-family: inherit;font-size: 14px;color: var(--fg)}
        .gen-ai-gate .input::placeholder {color: var(--faint)}
        .gen-ai-gate .input:focus {outline: none;border-color: #c3c9f0;box-shadow: 0 0 0 3px var(--blue-softer)}
        .gen-ai-gate .lock {color: var(--faint);padding-bottom: 11px}
        .gen-ai-gate .unit {width: 64px;flex: 0 0 64px}
        .gen-ai-gate .generate {width: 100%;height: 52px;margin-top: 6px;border: none;border-radius: var(--r-lg);background: var(--cta);color: #fff;font-size: 15px;font-weight: 500;letter-spacing: .01em;display: flex;align-items: center;justify-content: center;gap: 9px;box-shadow: 0 6px 16px rgba(1, 149, 255, .28);transition: box-shadow .15s ease, transform .08s ease, filter .15s ease}
        .gen-ai-gate .generate:hover {box-shadow: 0 8px 22px rgba(1, 149, 255, .34);filter: brightness(.96)}
        .gen-ai-gate .generate:active {transform: translateY(1px)}
        .gen-ai-gate .main {flex: 1;min-width: 0;display: flex;flex-direction: row}
        .gen-ai-gate .split-pane {flex: 1;min-width: 0;display: flex;flex-direction: column;position: relative}
        .gen-ai-gate .split-pane--preview {background: var(--canvas)}
        .gen-ai-gate .split-pane--code {background: #fff;border-left: 1px solid var(--line)}
        .gen-ai-gate .pane-bar {height: 50px;flex: 0 0 50px;display: flex;align-items: center;justify-content: space-between;padding: 0 18px}
        .gen-ai-gate .pane-bar--preview {border-bottom: 1px solid #e2e4e8;background: #f1f2f5d1;backdrop-filter: blur(8px)}
        .gen-ai-gate .pane-bar--code {border-bottom: 1px solid var(--line);background: #fff}
        .gen-ai-gate .pane-label {font-size: 12px;font-weight: 400;letter-spacing: .06em;text-transform: uppercase}
        .gen-ai-gate .pane-label--preview {color: var(--muted)}
        .gen-ai-gate .pane-label--code {color: var(--muted)}
        .gen-ai-gate .drag-handle {width: 5px;flex: 0 0 5px;cursor: col-resize;background: var(--line);position: relative;transition: background .15s ease;z-index: 10}
        .gen-ai-gate .drag-handle:hover, .gen-ai-gate .drag-handle.is-dragging {background: #b0b8d1}
        .gen-ai-gate .drag-handle::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 3px;height: 32px;border-radius: 2px;background: #c8cdd8}
        .gen-ai-gate .drag-handle:hover::after, .gen-ai-gate .drag-handle.is-dragging::after {background: #8893b0}
        .gen-ai-gate .segmented {display: inline-flex;padding: 4px;gap: 2px;background: #e7e9ee;border-radius: var(--r-md);border: 1px solid #e0e2e8}
        .gen-ai-gate .segmented__btn {height: 32px;padding: 0 16px;border: none;border-radius: 6px;background: transparent;color: var(--muted);font-size: 14px;font-weight: 500;display: inline-flex;align-items: center;gap: 6px;transition: background .12s ease, color .12s ease, box-shadow .12s ease}
        .gen-ai-gate .segmented__btn.is-active {background: #fff;color: var(--ink);box-shadow: 0 1px 2px #14181e1f}
        .gen-ai-gate .segmented__btn .check {color: var(--blue)}
        .gen-ai-gate .preview {flex: 1;display: flex;align-items: center;justify-content: center;min-height: 0}
        .gen-ai-gate .play {width: 0;height: 0;border-style: solid;border-width: 40px 0 40px 66px;border-color: transparent transparent transparent var(--play);border-radius: 6px;filter: drop-shadow(0 1px 0 #00000005)}
        .gen-ai-gate .code-panel {flex: 1;display: flex;flex-direction: column;min-height: 0;padding: 14px 16px 16px}
        .gen-ai-gate .code-tabs {display: flex;gap: 2px;margin-bottom: 12px;border-bottom: 1px solid var(--line)}
        .gen-ai-gate .code-tab {height: 36px;padding: 0 13px;border: none;background: none;color: var(--muted);font-size: 13px;font-weight: 500;border-bottom: 2px solid transparent;margin-bottom: -1px;transition: color .12s ease, border-color .12s ease}
        .gen-ai-gate .code-tab:hover {color: var(--fg)}
        .gen-ai-gate .code-tab.is-active {color: var(--ink);border-bottom-color: var(--blue)}
        .gen-ai-gate .code-card {flex: 1;min-height: 0;position: relative;background: #181a20;border-radius: 12px;overflow: hidden;box-shadow: 0 10px 30px #14182429;display: flex;flex-direction: column}
        .gen-ai-gate .code-card__bar {height: 44px;flex: 0 0 44px;display: flex;align-items: center;padding: 0 14px 0 16px;border-bottom: 1px solid #262932;gap: 8px}
        .gen-ai-gate .code-card__dots {display: flex;gap: 7px}
        .gen-ai-gate .code-card__dots i {width: 11px;height: 11px;border-radius: 50%;display: block}
        .gen-ai-gate .dot-r {background: #ff5f57}
        .gen-ai-gate .dot-y {background: #febc2e}
        .gen-ai-gate .dot-g {background: #28c840}
        .gen-ai-gate .code-card__name {color: #8b909c;font-family: var(--font-mono);font-size: 12px;margin-left: 6px}
        .gen-ai-gate .code-card__bar .sp {flex: 1}
        .gen-ai-gate .copy-btn {display: inline-flex;align-items: center;gap: 7px;height: 30px;padding: 0 12px;border-radius: 6px;border: 1px solid #2e313c;background: #20232b;color: #c2c7d2;font-size: 12.5px;font-weight: 500;transition: background .12s ease, color .12s ease}
        .gen-ai-gate .copy-btn:hover {background: #272b35;color: #fff}
        .gen-ai-gate .copy-btn.is-done {color: #5fd17e;border-color: #2f5238}
        .gen-ai-gate .code-scroll {flex: 1;min-height: 0;overflow: auto;padding: 18px 20px 22px}
        .gen-ai-gate pre.code {display: block;margin: 0;padding: 0;background: transparent;border: 0;border-radius: 0;word-break: normal;word-wrap: normal;font-family: var(--font-mono);font-size: 13px;line-height: 1.75;color: #d6dae3;white-space: pre;tab-size: 2}
        .gen-ai-gate .code .tok-com {color: #6b7280;font-style: italic}
        .gen-ai-gate .code .tok-str {color: #9ece6a}
        .gen-ai-gate .code .tok-key {color: #bb9af7}
        .gen-ai-gate .code .tok-fn {color: #7aa2f7}
        .gen-ai-gate .code .tok-num {color: #ff9e64}
        .gen-ai-gate .code .tok-prop {color: #7dcfff}
        .gen-ai-gate .code .tok-punc {color: #89909e}
        .gen-ai-gate .code-foot {display: flex;align-items: center;gap: 8px;margin-top: 14px;color: var(--muted);font-size: 13px;flex-wrap: wrap}
        .gen-ai-gate .code-foot code {font-family: var(--font-mono);font-size: 12px;color: var(--fg);background: #fff;border: 1px solid var(--line);padding: 2px 7px;border-radius: 5px}
        .gen-ai-gate .try-it-btn {display: inline-flex;align-items: center;gap: 9px;height: 48px;padding: 0 32px;border: none;border-radius: 10px;background: var(--cta);color: #fff;font-size: 14px;font-weight: 500;box-shadow: 0 4px 16px rgba(1, 149, 255, .24);transition: box-shadow .15s ease, transform .08s ease, opacity .2s ease}
        .gen-ai-gate .try-it-btn:hover {box-shadow: 0 6px 22px #961e8252}
        .gen-ai-gate .try-it-btn:active {transform: translateY(1px)}
        .gen-ai-gate .try-it-btn.done {background: #e6f4ee;color: #1a7a44;box-shadow: none;border: 1.5px solid #b5dfca}
        @keyframes shimmer {
            0% {background-position: -200% 0}
            100% {background-position: 200% 0}
        }
        .gen-ai-gate .shimmer-tile {background: linear-gradient(90deg, #e8e9ec 25%, #f4f5f7 50%, #e8e9ec 75%);background-size: 200% 100%;animation: shimmer 1.5s infinite ease-in-out;animation-delay: inherit}
        .gen-ai-gate .gen-prompt-bar {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;margin-bottom: 14px;padding-bottom: 14px;border-bottom: 1px solid var(--line-soft)}
        .gen-ai-gate .gen-prompt-text {flex: 1;min-width: 0;font-size: 13.5px;color: var(--fg);font-style: italic;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
        .gen-ai-gate .gen-pill {display: inline-flex;align-items: center;height: 26px;padding: 0 10px;border-radius: 6px;background: var(--field-bg);border: 1px solid var(--line);font-size: 12px;font-weight: 400;color: var(--muted);white-space: nowrap}
        .gen-ai-gate .gen-reset {display: inline-flex;align-items: center;gap: 5px;height: 26px;padding: 0 10px;border-radius: 6px;border: 1px solid var(--line);background: #fff;font-size: 12px;font-weight: 500;color: var(--blue);cursor: pointer;transition: background .12s ease}
        .gen-ai-gate .gen-reset:hover {background: var(--blue-softer)}
        .gen-ai-gate .gen-card {display: flex;flex-direction: column;border-radius: 12px;overflow: hidden;background: #fff;box-shadow: 0 2px 16px #1418241a;transition: box-shadow .15s ease;min-height: 0}
        .gen-ai-gate .gen-card:hover {box-shadow: 0 6px 24px #14182429}
        .gen-ai-gate .gen-card__img {flex: 1;position: relative;min-height: 160px}
        .gen-ai-gate .gen-action {display: inline-flex;align-items: center;gap: 5px;height: 32px;padding: 0 10px;border-radius: 7px;border: 1px solid var(--line);background: #fff;font-size: 12.5px;font-weight: 500;color: var(--fg);cursor: pointer;white-space: nowrap;transition: background .12s ease, border-color .12s ease}
        .gen-ai-gate .gen-action:hover {background: var(--field-bg)}
        .gen-ai-gate .gen-action--primary {background: var(--blue-soft);border-color: transparent;color: var(--blue-ink)}
        .gen-ai-gate .gen-action--primary:hover {background: #dce2f9}
        .gen-ai-gate .gen-action--icon {padding: 0 10px}
        .gen-ai-gate .asset-bar {display: flex;align-items: center;gap: 10px;margin-top: 14px;padding: 11px 14px;border-radius: 10px;background: var(--field-bg);border: 1px solid var(--line);flex-shrink: 0}
        .gen-ai-gate .asset-bar__cloud {display: flex;align-items: center;gap: 6px;font-size: 12.5px;font-weight: 400;color: var(--blue-ink);white-space: nowrap}
        .gen-ai-gate .asset-bar__sep {width: 1px;height: 18px;background: var(--line);flex-shrink: 0}
        .gen-ai-gate .asset-bar__url {flex: 1;min-width: 0;font-family: var(--font-mono);font-size: 11.5px;color: var(--muted);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
        .gen-ai-gate .asset-bar__copy {display: inline-flex;align-items: center;gap: 6px;height: 30px;padding: 0 12px;border-radius: 7px;border: 1px solid var(--line);background: #fff;font-size: 12px;font-weight: 500;color: var(--fg);cursor: pointer;transition: background .12s ease;flex-shrink: 0}
        .gen-ai-gate .asset-bar__copy:hover {background: var(--blue-softer);color: var(--blue-ink)}
        .gen-ai-gate .asset-bar__copy.is-done {color: #1a7a44;border-color: #b5dfca;background: #edf8f2}
        @keyframes flash-border {
            0% {border-color: var(--blue);box-shadow: 0 0 0 3px #3454d138}
            60% {border-color: var(--blue);box-shadow: 0 0 0 3px #3454d138}
            100% {border-color: var(--line);box-shadow: none}
        }
        .gen-ai-gate .textarea--flash {animation: flash-border 1s ease forwards}
        .gen-ai-gate .uc-nav {display: flex;align-items: center;justify-content: center;padding: 18px 0 26px;gap: 8px;flex-shrink: 0}
        .gen-ai-gate .uc-chip {height: 36px;padding: 0 18px;border-radius: 100px;border: none;background: #eaebf0;font-size: 13.5px;font-weight: 500;color: var(--fg);cursor: pointer;white-space: nowrap;transition: background .15s ease, color .15s ease, box-shadow .15s ease}
        .gen-ai-gate .uc-chip:hover {background: #dfe1e8}
        .gen-ai-gate .uc-chip.is-active {background: #3a3fc6;color: #fff;box-shadow: 0 3px 12px #3a3fc647}
        .gen-ai-gate .story-tag {font-size: 11px;font-weight: 400;color: var(--faint);letter-spacing: .07em;text-transform: uppercase;margin-bottom: 10px}
        .gen-ai-gate .toast {position: fixed;bottom: 28px;left: 50%;transform: translateX(-50%) translateY(20px);background: var(--ink);color: #fff;padding: 11px 20px;border-radius: 10px;font-size: 13.5px;font-weight: 400;opacity: 0;pointer-events: none;transition: opacity .2s ease, transform .2s ease;z-index: 50;box-shadow: 0 8px 24px #00000038}
        .gen-ai-gate .toast.show {opacity: 1;transform: translateX(-50%) translateY(0)}
        .gen-ai-gate .icon-btn {display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: 8px;border: 1px solid var(--line);background: #fff;color: var(--muted);cursor: pointer}
        .gen-ai-gate .credit-est {display: flex;align-items: center;gap: 6px;padding: 8px 0 4px;color: var(--muted);font-size: 12px}
        .gen-ai-gate .docs-btn {display: inline-flex;align-items: center;gap: 5px;height: 28px;padding: 0 12px;border-radius: 7px;border: 1px solid var(--line);background: #fff;font-size: 12px;font-weight: 500;color: var(--fg);text-decoration: none}
        [data-theme="dark"] .gen-ai-gate .docs-btn {background: rgba(255, 255, 255, .1);color: #eef4ff;border-color: rgba(255, 255, 255, .18)}
        .gen-ai-gate .demo-chips {display: flex;flex-wrap: wrap;gap: 6px;margin-top: 12px}
        .gen-ai-gate .demo-chip {height: 30px;padding: 0 12px;border-radius: 100px;border: 1px solid var(--line);background: #fff;color: var(--fg);font-size: 12.5px;font-weight: 500;cursor: pointer;transition: background .12s, border-color .12s, color .12s}
        .gen-ai-gate .demo-chip:hover {background: var(--field-bg)}
        .gen-ai-gate .demo-chip.is-active {background: var(--blue-soft);border-color: transparent;color: var(--blue-ink)}
        [data-theme="dark"] .gen-ai-gate .demo-chip {background: #122540;border-color: #ffffff1a;color: var(--fg)}
        [data-theme="dark"] .gen-ai-gate .demo-chip:hover {background: #1e3a56}
        .gen-ai-gate .pv-state {flex: 1;min-height: 0;display: flex;flex-direction: column}
        .gen-ai-gate .pv-hide {display: none !important}
        .gen-ai-gate .gen-wrap {flex: 1;min-height: 0;display: flex;flex-direction: column;padding: 16px 20px 14px}
        .gen-ai-gate .gen-card__img.beach {background: #dfe6ee !important}
        .gen-ai-gate .gen-card__img.beach img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;display: block}
        .gen-ai-gate .optbar {flex-shrink: 0;background: #f6f7fb;border: 1px solid #e4e6ef;border-radius: 12px;padding: 12px 14px}
        .gen-ai-gate .optbar .row1 {display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px}
        .gen-ai-gate .optbar .lblgrp {display: flex;align-items: center;gap: 7px}
        .gen-ai-gate .optbar .lblgrp b {font-size: 12px;font-weight: 400;color: var(--ink)}
        .gen-ai-gate .optbar .lblgrp i {font-style: normal;font-size: 11.5px;color: var(--muted)}
        .gen-ai-gate .optbar .urlrow {display: flex;align-items: center;gap: 8px;background: #fff;border: 1px solid #e4e6ef;border-radius: 7px;padding: 8px 11px}
        .gen-ai-gate .optbar code {font-family: var(--font-mono);font-size: 11px;color: var(--fg);flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; background-color: transparent; }
        .gen-ai-gate .optbar code .hl {color: #6722b0;font-weight: 400}
        .gen-ai-gate .optbar .cpy {flex-shrink: 0;display: inline-flex;align-items: center;gap: 5px;height: 26px;padding: 0 10px;border-radius: 6px;border: 1px solid #dde0ea;background: #fff;color: var(--muted);font-size: 11.5px;font-weight: 500;cursor: pointer}
        .gen-ai-gate .dl-btn {display: none;align-items: center;gap: 6px;height: 32px;padding: 0 14px;border-radius: 7px;border: 1px solid var(--line);background: #fff;font-size: 12.5px;font-weight: 500;color: var(--fg);text-decoration: none;transition: background .15s, border-color .15s, color .15s}
        .gen-ai-gate .dl-btn:hover {background: var(--canvas)}
        .gen-ai-gate .tgl {width: 36px;height: 20px;border-radius: 10px;border: none;padding: 2px;background: #3454d1;display: flex;align-items: center;justify-content: flex-end}
        .gen-ai-gate .tgl i {width: 16px;height: 16px;border-radius: 50%;background: #fff;box-shadow: 0 1px 3px #00000038;display: block}
        .gen-ai-gate .shimmer-wrap {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 60px 40px 40px;gap: 24px}
        .gen-ai-gate .shimmer-wrap .st {width: 100%;max-width: 420px}
        .gen-ai-gate .shimmer-wrap p {margin: 0;font-size: 14px;color: var(--muted);font-weight: 400}
        .gen-ai-gate .quota-overlay {position: fixed;inset: 0;z-index: 9999;display: none;align-items: center;justify-content: center;background: #16181d75;backdrop-filter: blur(2px)}
        .gen-ai-gate .quota-overlay.show {display: flex !important;align-items: center;justify-content: center;animation: qfade .3s ease}
        @keyframes qfade {
            from {opacity: 0}
            to {opacity: 1}
        }
        .gen-ai-gate .quota-card {background: #fff;width: 460px;max-width: 86%;border-radius: 16px;padding: 30px 30px 26px;text-align: center;box-shadow: 0 24px 70px #14182857}
        .gen-ai-gate .quota-card .qico {width: 56px;height: 56px;margin: 0 auto 14px;border-radius: 50%;background: var(--blue-soft);display: flex;align-items: center;justify-content: center;color: var(--blue)}
        .gen-ai-gate .quota-card h3 {margin: 0 0 8px;font-size: 21px;font-weight: 300;color: var(--ink);letter-spacing: -.01em}
        .gen-ai-gate .quota-card p {margin: 0 auto 20px;font-size: 14px;color: var(--muted);line-height: 1.55;max-width: 340px}
        .gen-ai-gate .quota-btns {display: flex;gap: 10px;justify-content: center}
        .gen-ai-gate .quota-btns button {font-family: inherit;font-weight: 500;font-size: 16px;padding: 11px 20px;border-radius: 9px;cursor: pointer}
        .gen-ai-gate .quota-btns .ghost {border: 1.5px solid var(--line);background: #fff;color: var(--fg)}
        .gen-ai-gate .quota-btns .primary {border: none;color: #fff;background: var(--blue)}
        .gen-ai-gate .credits-trigger {display: inline-flex;align-items: center;gap: 3px;height: 34px;padding: 0 12px;border-radius: 9px;border: 1px solid var(--line);background: #fff;font-size: 13px;cursor: pointer;color: var(--fg)}
        .gen-ai-gate .credits-trigger.low {border-color: #d63a4a59;background: #fdeef0}
        .gen-ai-gate .credits-trigger.low .credits-used {color: #c0392b}
        .gen-ai-gate .credits-trigger {display: none}
        .gen-ai-gate .hdr__left {display: flex;align-items: center;gap: 10px}
        .gen-ai-gate .hdr__badge {display: inline-block;margin-left: 10px;font-size: 11px;font-weight: 400;letter-spacing: .04em;text-transform: uppercase;background: #ece9f9;color: #3f3792;padding: 3px 9px;border-radius: 99px;vertical-align: middle}
        .gen-ai-gate .mkt-wrap {background: #f8f8fc;border-top: 1px solid #e8e6f4}
        .gen-ai-gate .mkt-section {padding: 80px 0}
        .gen-ai-gate .mkt-inner {max-width: 1280px;margin: 0 auto;padding: 0 30px}
        @media (max-width: 900px) {.gen-ai-gate .mkt-inner {padding: 0 25px}}
        @media (max-width: 600px) {.gen-ai-gate .mkt-inner {padding: 0 20px}}
        .gen-ai-gate .mkt-label {display: inline-block;font-size: 11px;font-weight: 400;letter-spacing: .1em;text-transform: uppercase;color: var(--brand);background: #e6f4ff;border-radius: 20px;padding: 4px 12px;margin-bottom: 18px}
        .gen-ai-gate .mkt-label.light {background: #ffffff26;color: #ffffffe6}
        .gen-ai-gate .mkt-heading {font-size: clamp(22px, 3vw, 34px);font-weight: 300;color: var(--ink);margin: 0 0 12px;line-height: 1.2}
        .gen-ai-gate .mkt-heading.light {color: #fff}
        .gen-ai-gate .mkt-sub {font-size: 18px;color: var(--muted);margin: 0 0 48px;max-width: 560px;line-height: 1.6}
        .gen-ai-gate .mkt-sub.light {color: #fffc;margin-bottom: 28px}
        .gen-ai-gate .feat-section {background: #fff !important}
        .gen-ai-gate .feat-grid {display: grid;grid-template-columns:repeat(3, 1fr);gap: 24px}
        @media (max-width: 900px) {.gen-ai-gate .feat-grid {grid-template-columns:repeat(2, 1fr)}}
        @media (max-width: 560px) {.gen-ai-gate .feat-grid {grid-template-columns:1fr}}
        .gen-ai-gate .feat-card {background: #f8f8fc;border: 1px solid #e8e6f4;border-radius: 14px;padding: 28px;transition: box-shadow .2s, transform .2s}
        .gen-ai-gate .feat-card:hover {box-shadow: 0 8px 32px #0c163b1a;transform: translateY(-2px)}
        .gen-ai-gate .feat-icon {width: 44px;height: 44px;background: #e6f4ff;border-radius: 12px;display: flex;align-items: center;justify-content: center;color: var(--brand);margin-bottom: 18px}
        .gen-ai-gate .feat-icon img {width: 24px;height: 24px;object-fit: contain;display: block}
        .gen-ai-gate .feat-card h3 {font-size: 16px;font-weight: 300;color: var(--ink);margin: 0 0 8px}
        .gen-ai-gate .feat-card p {font-size: 16px;font-weight: 400;color: var(--muted);line-height: 1.6;margin: 0}
        .gen-ai-gate .how-section {background: #f8f8fc}
        .gen-ai-gate .how-steps {display: flex;align-items: flex-start;gap: 8px}
        .gen-ai-gate .how-steps.is-wrapped {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px}
        .gen-ai-gate .how-step {flex: 1;background: #fff;border: 1px solid #e8e6f4;border-radius: 14px;padding: 28px}
        .gen-ai-gate .how-num {font-size: 36px;font-weight: 300;color: #e6f4ff;line-height: 1;margin-bottom: 14px;letter-spacing: -.02em}
        .gen-ai-gate .how-body h3 {font-size: 16px;font-weight: 300;color: var(--ink);margin: 0 0 8px}
        .gen-ai-gate .how-body p {font-size: 16px;font-weight: 400;color: var(--muted);line-height: 1.6;margin: 0 0 16px}
        .gen-ai-gate .how-chip {background: #eef6ff;border-radius: 8px;padding: 8px 12px;font-size: 11px;color: var(--brand);overflow-x: auto}
        .gen-ai-gate .how-chip code {background: none;padding: 0;color: inherit;font-size: inherit;white-space: pre;font-family: var(--font-mono)}
        .gen-ai-gate .how-arrow {flex: 0 0 24px;margin-top: 48px;color: #c0b8e8}
        @media (max-width: 720px) {
            .gen-ai-gate .how-steps {flex-direction: column}
            .gen-ai-gate .how-steps.is-wrapped {grid-template-columns: 1fr}
            .gen-ai-gate .how-arrow {transform: rotate(90deg);margin: 0 auto}
        }
        @media (max-width: 980px) and (min-width: 721px) {
            .gen-ai-gate .how-steps.is-wrapped {grid-template-columns: repeat(2, 1fr)}
        }
        /* New content sections: light surface in light mode, dark surface in dark mode */
        .gen-ai-gate .res-section, .gen-ai-gate .aud-section, .gen-ai-gate .disc-section {background: #fff}
        [data-theme="dark"] .gen-ai-gate .res-section, [data-theme="dark"] .gen-ai-gate .aud-section, [data-theme="dark"] .gen-ai-gate .disc-section {background: #0d1e32}
        /* Resources: center the section header; cards stay left-aligned */
        .gen-ai-gate .res-section .mkt-head {text-align: center}
        .gen-ai-gate .res-section .mkt-head .res-intro {margin-left: auto;margin-right: auto}

        /* ── Resources (card grid; optional tag overlay + outbound link) ── */
        .gen-ai-gate .res-intro {font-size: 16px;color: var(--muted);line-height: 1.6;max-width: 640px;margin: 0 0 40px}
        .gen-ai-gate .res-intro p {margin: 0 0 12px}
        .gen-ai-gate .res-intro > *:last-child {margin-bottom: 0}
        .gen-ai-gate .res-grid {display: grid;grid-template-columns:repeat(4, 1fr);gap: 24px}
        @media (max-width: 900px) {.gen-ai-gate .res-grid {grid-template-columns:repeat(2, 1fr)}}
        @media (max-width: 560px) {.gen-ai-gate .res-grid {grid-template-columns:1fr}}
        .gen-ai-gate .res-card {display: flex;flex-direction: column;border-radius: 14px;overflow: hidden;border: 1px solid #e8e6f4;background: #f8f8fc;text-decoration: none;transition: box-shadow .2s, transform .2s}
        .gen-ai-gate a.res-card:hover {box-shadow: 0 8px 32px #0c163b1a;transform: translateY(-2px)}
        .gen-ai-gate .res-card__img {position: relative;aspect-ratio: 16 / 10;overflow: hidden;background: #e6f4ff}
        .gen-ai-gate .res-card__img img {width: 100%;height: 100%;object-fit: cover;display: block}
        .gen-ai-gate .res-card__img--ph {display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #e6f4ff, #d3e9ff)}
        .gen-ai-gate .res-card__img--ph::after {content: "✦";font-size: 30px;color: #a9c9ef}
        .gen-ai-gate .res-card__tag {position: absolute;top: 10px;left: 10px;background: #0c163bd9;color: #fff;font-size: 11px;font-weight: 400;letter-spacing: .06em;padding: 3px 10px;border-radius: 20px;backdrop-filter: blur(4px)}
        .gen-ai-gate .res-card__content {padding: 16px 18px 18px}
        .gen-ai-gate .res-card__title {font-size: 18px;font-weight: 400;color: var(--ink);margin: 0;line-height: 1.3}
        .gen-ai-gate .res-card__desc {margin-top: 6px}
        .gen-ai-gate .res-card__desc p,
        .gen-ai-gate .res-card__desc {font-size: 15px;font-weight: 400;color: var(--muted);line-height: 1.55;}
        .gen-ai-gate .res-card__desc p {margin: 0}
        .gen-ai-gate .res-card__desc p + p {margin-top: 8px}

        /* ── Audiences (centered; max 3 per row on desktop, 2 tablet, 1 mobile) ── */
        .gen-ai-gate .aud-section .mkt-inner {text-align: center}
        .gen-ai-gate .aud-section .mkt-sub {margin: 0 auto 48px}
        .gen-ai-gate .aud-grid {display: flex;flex-wrap: wrap;justify-content: center;gap: 44px 24px}
        .gen-ai-gate .aud-item {flex: 0 1 calc((100% - 48px) / 3);max-width: calc((100% - 48px) / 3);display: flex;flex-direction: column;align-items: center;text-align: center;gap: 14px}
        .gen-ai-gate .aud-item__icon {width: 72px;height: 72px;display: flex;align-items: center;justify-content: center}
        .gen-ai-gate .aud-item__icon img {max-width: 100%;max-height: 100%;object-fit: contain}
        .gen-ai-gate .aud-item__title {font-size: 18px;font-weight: 400;color: var(--ink);margin: 0}
        .gen-ai-gate .aud-item__desc {margin-top: 8px;max-width: 300px}
        .gen-ai-gate .aud-item__desc,
        .gen-ai-gate .aud-item__desc p {font-size: 16px;font-weight: 400;color: var(--muted);line-height: 1.6;}
        .gen-ai-gate .aud-item__desc p {margin: 0}
        .gen-ai-gate .aud-item__desc p + p {margin-top: 8px}
        @media (max-width: 900px) {.gen-ai-gate .aud-item {flex-basis: calc((100% - 24px) / 2);max-width: calc((100% - 24px) / 2)}}
        @media (max-width: 600px) {.gen-ai-gate .aud-item {flex-basis: 100%;max-width: 100%}}

        /* ── Discover more tools (category-driven; scroll or grid) ── */
        .gen-ai-gate .tools-row {display: flex;gap: 20px;overflow-x: auto;padding-bottom: 14px;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch}
        .gen-ai-gate .tools-row .tool-card {flex: 0 0 240px;scroll-snap-align: start}
        .gen-ai-gate .tools-grid {display: grid;grid-template-columns:repeat(4, 1fr);gap: 20px}
        @media (max-width: 900px) {.gen-ai-gate .tools-grid {grid-template-columns:repeat(2, 1fr)}}
        @media (max-width: 560px) {.gen-ai-gate .tools-grid {grid-template-columns:1fr}}
        .gen-ai-gate .tool-card {display: flex;flex-direction: column;border-radius: 14px;overflow: hidden;border: 1px solid #e8e6f4;background: #f8f8fc;text-decoration: none;transition: box-shadow .2s, transform .2s}
        .gen-ai-gate .tool-card:hover {box-shadow: 0 8px 32px #0c163b1a;transform: translateY(-2px)}
        .gen-ai-gate .tool-card__img {aspect-ratio: 16 / 10;overflow: hidden;background: #e6f4ff}
        .gen-ai-gate .tool-card__img img {width: 100%;height: 100%;object-fit: cover;display: block}
        .gen-ai-gate .tool-card__img--ph {display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, var(--brand), var(--brand-d))}
        .gen-ai-gate .tool-card__img--ph span {font-size: 40px;font-weight: 700;color: #fff;opacity: .9}
        .gen-ai-gate .tool-card__name {font-size: 15px;font-weight: 300;color: var(--ink);padding: 15px 16px;text-align: center}
        @media (max-width: 640px) {.gen-ai-gate .tools-row .tool-card {flex-basis: 78%}}
        .gen-ai-gate .models-section {background: #f8f8fc}
        .gen-ai-gate .models-grid {display: grid;grid-template-columns:repeat(4, 1fr);gap: 20px}
        @media (max-width: 900px) {.gen-ai-gate .models-grid {grid-template-columns:repeat(2, 1fr)}}
        @media (max-width: 560px) {.gen-ai-gate .models-grid {grid-template-columns:1fr}}
        .gen-ai-gate .model-tile {background: #fff;border: 1px solid #e8e6f4;border-radius: 14px;padding: 24px;position: relative;transition: box-shadow .2s, transform .2s}
        .gen-ai-gate .model-tile:hover {box-shadow: 0 8px 32px #0c163b1a;transform: translateY(-2px)}
        .gen-ai-gate .model-tile__badge {display: inline-block;font-size: 10px;font-weight: 400;letter-spacing: .08em;text-transform: uppercase;border-radius: 20px;padding: 3px 10px;margin-bottom: 12px}
        .gen-ai-gate .model-tile__badge.standard {background: #e6f4ff;color: var(--brand)}
        .gen-ai-gate .model-tile__badge.premium {background: #fef3cd;color: #92600a}
        .gen-ai-gate .model-tile__badge.new {background: #d4f8e8;color: #1a6640}
        .gen-ai-gate .model-tile__name {font-size: 17px;font-weight: 300;color: var(--ink);margin-bottom: 8px}
        .gen-ai-gate .model-tile__desc {font-size: 16px;font-weight: 400;color: var(--muted);line-height: 1.5;margin-bottom: 14px}
        .gen-ai-gate .model-tile__tag {font-size: 11px;color: #a098d8;font-weight: 400}
        .gen-ai-gate .cta-section {background-color: #0c163b !important;background-image: linear-gradient(135deg, #0c163b 0%, #3f3792 100%) !important;border-bottom: none}
        .gen-ai-gate .cta-inner {display: flex;align-items: center;gap: 60px}
        .gen-ai-gate .cta-copy {flex: 1}
        .gen-ai-gate .cta-bullets {list-style: none;margin: 20px 0 0;padding: 0;display: flex;flex-direction: column;gap: 10px}
        .gen-ai-gate .cta-bullets li {display: flex;align-items: center;gap: 10px;font-size: 14px;color: #ffffffe6}
        .gen-ai-gate .cta-bullets li svg {flex-shrink: 0;color: #a8f0c8}
        .gen-ai-gate .cta-cards {flex: 0 0 auto;display: flex;gap: 16px}
        .gen-ai-gate .price-card {background: #ffffff2e;border: 1px solid #ffffff59;border-radius: 16px;padding: 28px 24px;min-width: 190px;position: relative}
        .gen-ai-gate .price-card.featured {background: #fff;border-color: #fff;box-shadow: 0 8px 32px #0000002e}
        .gen-ai-gate .price-card__badge {position: absolute;top: -12px;left: 50%;transform: translateX(-50%);background: var(--gen1, #f59e0b);color: #fff;font-size: 10px;font-weight: 400;letter-spacing: .06em;text-transform: uppercase;padding: 3px 12px;border-radius: 20px;white-space: nowrap}
        .gen-ai-gate .price-card__name {font-size: 13px;font-weight: 400;color: #ffffffb3;margin-bottom: 4px}
        .gen-ai-gate .price-card.featured .price-card__name {color: var(--muted)}
        .gen-ai-gate .price-card__price {font-size: 32px;font-weight: 300;color: #fff;line-height: 1;margin-bottom: 8px}
        .gen-ai-gate .price-card__price span {font-size: 14px;font-weight: 400;opacity: .7}
        .gen-ai-gate .price-card.featured .price-card__price {color: var(--ink)}
        .gen-ai-gate .price-card.featured .price-card__price span {color: var(--muted)}
        .gen-ai-gate .price-card__desc {font-size: 12px;color: #ffffffa6;line-height: 1.5;margin-bottom: 20px}
        .gen-ai-gate .price-card.featured .price-card__desc {color: var(--muted)}
        .gen-ai-gate .price-card__btn {display: block;width: 100%;padding: 10px;border-radius: 8px;font-size: 13px;font-weight: 500;cursor: pointer;border: none;transition: opacity .15s, transform .15s;text-align: center}
        .gen-ai-gate .price-card__btn:hover {opacity: .85;transform: translateY(-1px)}
        .gen-ai-gate .price-card__btn.primary {background: #fff3;color: #fff;border: 1px solid #ffffff4d}
        .gen-ai-gate .price-card__btn.white {background: var(--cta);color: #fff}
        @media (max-width: 860px) {
            .gen-ai-gate .cta-inner {flex-direction: column;gap: 40px}
            .gen-ai-gate .cta-cards {flex-wrap: wrap;justify-content: center}
        }
        .gen-ai-gate .split-section {background: #fff}
        .gen-ai-gate .split-inner {display: grid;grid-template-columns:1fr 1fr;gap: 64px;align-items: center}
        /* Image side toggle (desktop only; mobile always stacks image-on-top). Default DOM order = image left. */
        @media (min-width: 801px) {
            .gen-ai-gate .split-inner.is-img-right .split-img {order: 2}
            .gen-ai-gate .split-inner.is-img-right .split-content {order: 1}
        }
        .gen-ai-gate .split-img-frame {position: relative;border-radius: 18px;overflow: hidden;box-shadow: 0 16px 56px #0c163b2e;background: #e6f4ff;aspect-ratio: 700/540}
        .gen-ai-gate .split-img-frame img {width: 100%;height: 100%;object-fit: cover;display: block}
        .gen-ai-gate .split-img-badge {position: absolute;top: 14px;left: 14px;background: #ffffffeb;backdrop-filter: blur(8px);border-radius: 20px;padding: 6px 14px;font-size: 12px;font-weight: 400;color: #1a6640;display: flex;align-items: center;gap: 6px;box-shadow: 0 2px 8px #00000014}
        .gen-ai-gate .split-img-url {position: absolute;bottom: 0;left: 0;right: 0;background: #16181dd1;backdrop-filter: blur(8px);padding: 10px 14px;font-size: 11px;font-family: var(--font-mono);color: #ffffffb3;display: flex;align-items: center;gap: 8px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
        .gen-ai-gate .split-url-dot {width: 7px;height: 7px;border-radius: 50%;background: #4ade80;flex-shrink: 0}
        .gen-ai-gate .split-img-url .hl {color: #a78bfa}
        .gen-ai-gate .split-body {font-size: 16px;font-weight: 400;color: var(--muted);line-height: 1.7;margin: 0 0 28px}
        .gen-ai-gate .split-body p {margin: 0 0 12px}
        .gen-ai-gate .split-body > *:last-child {margin-bottom: 0}
        .gen-ai-gate .split-bullets {list-style: none;margin: 0 0 32px;padding: 0;display: flex;flex-direction: column;gap: 16px}
        .gen-ai-gate .split-bullets li {display: flex;gap: 12px;font-size: 14px;color: var(--ink);line-height: 1.5}
        .gen-ai-gate .split-bullet-icon {flex-shrink: 0;width: 30px;height: 30px;background: #e6f4ff;border-radius: 8px;display: flex;align-items: center;justify-content: center;color: var(--brand);margin-top: 1px}
        .gen-ai-gate .split-bullet-icon img {width: 16px;height: 16px;object-fit: contain;display: block}
        .gen-ai-gate .split-bullets li code {background: #eef6ff;color: var(--brand);border-radius: 4px;padding: 1px 5px;font-size: 12px}
        .gen-ai-gate .split-cta {display: inline-block;margin-top: 12px;background: var(--cta);color: #fff;border: none;border-radius: 8px;padding: 12px 24px;font-size: 16px;font-weight: 500;text-decoration: none;cursor: pointer;transition: opacity .15s, transform .15s}
        .gen-ai-gate a.split-cta:hover {color: #fff}
        .gen-ai-gate .split-cta:hover {opacity: .88;transform: translateY(-1px)}
        @media (max-width: 800px) {
            .gen-ai-gate .split-inner {grid-template-columns:1fr;gap: 36px}
            .gen-ai-gate .split-img {order: -1}
        }
        .gen-ai-gate .pricing-section {background: #f8f8fc}
        .gen-ai-gate .pricing-section .mkt-label {margin-left: auto;margin-right: auto;display: block;text-align: center;width: fit-content}
        .gen-ai-gate .pricing-grid {display: grid;grid-template-columns:repeat(3, 1fr);gap: 20px;margin-top: 48px}
        @media (max-width: 760px) {
            .gen-ai-gate .pricing-grid {grid-template-columns:1fr;max-width: 380px;margin-left: auto;margin-right: auto}
        }
        .gen-ai-gate .pricing-card {background: #fff;border: 1.5px solid #e8e6f4;border-radius: 18px;padding: 28px;display: flex;flex-direction: column;position: relative;transition: box-shadow .2s, transform .2s}
        .gen-ai-gate .pricing-card:hover {box-shadow: 0 8px 32px #0c163b1a;transform: translateY(-2px)}
        .gen-ai-gate .pricing-card.featured {border-color: var(--cta);box-shadow: 0 0 0 3px rgba(1, 149, 255, .15), 0 8px 32px rgba(1, 149, 255, .18)}
        .gen-ai-gate .pricing-card__popular {position: absolute;top: -13px;left: 50%;transform: translateX(-50%);background: var(--brand);color: #fff;font-size: 11px;font-weight: 400;letter-spacing: .05em;text-transform: uppercase;padding: 4px 14px;border-radius: 20px;white-space: nowrap}
        .gen-ai-gate .pricing-card__head {margin-bottom: 24px}
        .gen-ai-gate .pricing-card__name {font-size: 13px;font-weight: 400;text-transform: uppercase;letter-spacing: .08em;color: var(--muted);margin-bottom: 8px}
        .gen-ai-gate .pricing-card.featured .pricing-card__name {color: var(--cta)}
        .gen-ai-gate .pricing-card__price {font-size: 40px;font-weight: 300;color: var(--ink);line-height: 1;margin-bottom: 6px;letter-spacing: -.03em}
        .gen-ai-gate .pricing-card__price span {font-size: 16px;font-weight: 400;color: var(--muted);letter-spacing: 0}
        .gen-ai-gate .pricing-card__tagline {font-size: 13px;color: var(--muted);line-height: 1.4}
        .gen-ai-gate .pricing-card__features {list-style: none;margin: 0 0 28px;padding: 0;display: flex;flex-direction: column;gap: 10px;flex: 1}
        .gen-ai-gate .pricing-card__features li {display: flex;align-items: center;gap: 9px;font-size: 13.5px;color: var(--ink)}
        .gen-ai-gate .pricing-card__features li svg {flex-shrink: 0;color: var(--brand)}
        .gen-ai-gate .pricing-card__features li.muted {color: var(--muted)}
        .gen-ai-gate .pricing-card__features li.muted svg {color: #d1d5db}
        .gen-ai-gate .pricing-card__btn {display: block;width: 100%;padding: 12px;border-radius: 9px;font-size: 16px;font-weight: 500;text-align: center;cursor: pointer;border: none;transition: opacity .15s, transform .15s}
        .gen-ai-gate .pricing-card__btn:hover {opacity: .85;transform: translateY(-1px)}
        .gen-ai-gate .pricing-card__btn.ghost {background: #eef6ff;color: var(--brand)}
        .gen-ai-gate .pricing-card__btn.primary {background: var(--cta);color: #fff}
        .gen-ai-gate .pricing-card__btn.outline {background: #fff;color: var(--brand);border: 1.5px solid var(--brand)}
        .gen-ai-gate .pricing-note {text-align: center;font-size: 13px;color: var(--muted);margin-top: 28px}
        .gen-ai-gate .pricing-note p {margin: 0}
        .gen-ai-gate .pricing-note a {color: var(--brand);text-decoration: none;font-weight: 500}
        .gen-ai-gate .pricing-note a:hover {text-decoration: underline}
        .gen-ai-gate .cta-section, .gen-ai-gate .cta-inner, .gen-ai-gate .cta-copy, .gen-ai-gate .cta-bullets, .gen-ai-gate .cta-cards, .gen-ai-gate .price-card, .gen-ai-gate .price-card__badge, .gen-ai-gate .price-card__name, .gen-ai-gate .price-card__price, .gen-ai-gate .price-card__desc, .gen-ai-gate .price-card__btn {display: none !important}
        .gen-ai-gate .mkt-footer {display: none}

        /* Reusable image + text sections (repeater) */
        .gen-ai-gate .content-section__inner {display: flex;align-items: center;gap: 64px}
        .gen-ai-gate .content-section--img-right .content-section__inner {flex-direction: row-reverse}
        .gen-ai-gate .content-section--img-left .content-section__inner {flex-direction: row}
        .gen-ai-gate .content-section__media {flex: 1;min-width: 0}
        .gen-ai-gate .content-section__media img {width: 100%;height: auto;display: block;border-radius: 18px;box-shadow: 0 16px 56px rgba(12, 22, 59, .18)}
        .gen-ai-gate .content-section__body {flex: 1;min-width: 0}
        .gen-ai-gate .content-section__body--center {text-align: center}
        .gen-ai-gate .content-section__body--right {text-align: right}
        .gen-ai-gate .content-section__title {margin: 0 0 14px}
        .gen-ai-gate .content-section__subtitle {font-size: 20px;color: var(--muted);line-height: 1.6;margin: 0 0 22px}
        .gen-ai-gate .content-section__content {font-size: 16px;color: var(--muted);line-height: 1.7}
        .gen-ai-gate .content-section__content > *:last-child {margin-bottom: 0}
        .gen-ai-gate .content-section__content p {margin: 0 0 16px}
        .gen-ai-gate .content-section__content ul {margin: 0 0 20px;padding-left: 20px}
        .gen-ai-gate .content-section__content ol {margin: 0 0 20px;padding: 0;list-style: none;counter-reset: cs-counter}
        .gen-ai-gate .content-section__content ol > li {position: relative;padding-left: 44px;margin-bottom: 18px;counter-increment: cs-counter}
        .gen-ai-gate .content-section__content ol > li::before {content: counter(cs-counter);position: absolute;left: 0;top: -2px;width: 28px;height: 28px;border-radius: 50%;background: var(--brand);color: #fff;font-size: 13px;font-weight: 400;display: flex;align-items: center;justify-content: center}
        .gen-ai-gate .content-section__cta {display: inline-block;margin-top: 24px;background: var(--cta);color: #fff;border: none;border-radius: 8px;padding: 12px 26px;font-size: 16px;font-weight: 500;text-decoration: none;transition: opacity .15s, transform .15s}
        .gen-ai-gate .content-section__cta:hover {color: #fff;opacity: .9;transform: translateY(-1px)}
        [data-theme="dark"] .gen-ai-gate .content-section__media img {box-shadow: 0 16px 56px rgba(0, 0, 0, .45)}
        @media (max-width: 800px) {
            .gen-ai-gate .content-section__inner, .gen-ai-gate .content-section--img-right .content-section__inner, .gen-ai-gate .content-section--img-left .content-section__inner {flex-direction: column;gap: 36px}
        }

        /* FAQ accordion */
        .gen-ai-gate .faq-section {background: #fff}
        .gen-ai-gate .faq-inner {max-width: 820px}
        .gen-ai-gate .faq-title {text-align: center}
        .gen-ai-gate .faq-sub {text-align: center;margin-left: auto;margin-right: auto}
        .gen-ai-gate .faq-list {margin-top: 32px;border-top: 1px solid var(--line)}
        .gen-ai-gate .faq-item {border-bottom: 1px solid var(--line)}
        .gen-ai-gate .faq-q {width: 100%;display: flex;align-items: center;justify-content: space-between;gap: 16px;background: none;border: none;padding: 22px 4px;text-align: left;font-size: 18px;font-weight: 300;color: var(--ink);cursor: pointer}
        .gen-ai-gate .faq-chevron {flex-shrink: 0;color: var(--muted);transition: transform .2s ease}
        .gen-ai-gate .faq-q[aria-expanded="true"] .faq-chevron {transform: rotate(180deg)}
        .gen-ai-gate .faq-a {overflow: hidden;max-height: 0;transition: max-height .25s ease}
        .gen-ai-gate .faq-a__inner {padding: 0 4px 22px;font-size: 16px;font-weight: 400;color: var(--muted);line-height: 1.7}
        .gen-ai-gate .faq-a__inner p {margin: 0 0 12px}
        .gen-ai-gate .faq-a__inner > *:last-child {margin-bottom: 0}
        .gen-ai-gate .faq-a__inner a {color: var(--brand);font-weight: 500}
        [data-theme="dark"] .gen-ai-gate .faq-section {background: #0d1e32}