@font-face{font-family:"Satoshi";font-style:normal;font-weight:300 900;font-display:swap;src:url("/api/site-fonts/e739aff9b4d02c264341d6d4872edcda28e79373aeda936f659566a1cd3eb47f.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/api/site-fonts/e4507fb4fb5f832fbbb6c06aea4206274ba3083007f23fa8cbc0e87a10acf95b.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/api/site-fonts/85b99e603f84a47dc8118b5af058ad8f387d7c507a00faeef1b5b60eb371e844.woff2") format("woff2")}
:root{--font-satoshi:"Satoshi";--font-geist-mono:"Geist Mono"}
:root{--cf-white:#ffffff;--cf-black:#000000;--cf-gray-015:#fafaf8;--cf-zinc-017:#f8f9ff;--cf-zinc-072:#e6e7eb;--cf-zinc-073:#e3e7ef;--cf-zinc-100:#dddde4;--cf-zinc-117:#d4d8e6;--cf-zinc-172:#c6c6cb;--cf-zinc-200:#bdbdc3;--cf-zinc-212:#b9b9bf;--cf-zinc-260:#aaaab1;--cf-zinc-288:#a1a1aa;--cf-zinc-292:#a0a0a6;--cf-zinc-315:#99999f;--cf-zinc-324:#96969e;--cf-zinc-338:#929298;--cf-zinc-348:#8f8f95;--cf-zinc-351:#8e8e96;--cf-zinc-364:#8a8a91;--cf-zinc-404:#7e7e86;--cf-zinc-418:#7a7a81;--cf-zinc-428:#77777e;--cf-zinc-439:#74747b;--cf-zinc-440:#72747e;--cf-zinc-442:#73737a;--cf-zinc-445:#71727e;--cf-zinc-448:#71717a;--cf-zinc-452:#707077;--cf-zinc-463:#6d6d74;--cf-zinc-487:#66666d;--cf-zinc-489:#646574;--cf-zinc-491:#656472;--cf-zinc-501:#62626a;--cf-zinc-512:#5f5f67;--cf-zinc-523:#5c5c63;--cf-zinc-537:#58585f;--cf-zinc-548:#55555d;--cf-zinc-552:#54545b;--cf-zinc-558:#53515e;--cf-zinc-559:#52525a;--cf-zinc-562:#50515d;--cf-zinc-585:#4b4b51;--cf-zinc-611:#44444a;--cf-zinc-630:#3f3f46;--cf-zinc-665:#36363b;--cf-zinc-688:#303036;--cf-zinc-689:#303034;--cf-zinc-709:#2b2b2f;--cf-zinc-726:#27272a;--cf-zinc-739:#22242a;--cf-zinc-752:#20202a;--cf-zinc-755:#202023;--cf-zinc-790:#18181b;--cf-zinc-808:#141416;--cf-stone-006:#fffdf8;--cf-stone-007:#fffdf6;--cf-stone-021:#fff7ec;--cf-stone-028:#f6f6f3;--cf-stone-040:#fff0d5;--cf-stone-101:#deded9;--cf-stone-147:#cfcfca;--cf-stone-754:#27200b;--cf-mauve-016:#faf9fc;--cf-mauve-055:#f0eaf7;--cf-mauve-076:#e8e2f7;--cf-mauve-123:#d8d5dc;--cf-mauve-436:#77747c;--cf-mauve-451:#756d80;--cf-mauve-495:#69616f;--cf-mauve-498:#6a5e75;--cf-mauve-728:#2a2335;--cf-sage-008:#fbfdfb;--cf-sage-016:#f7fbf7;--cf-sage-023:#eefbf7;--cf-sage-030:#eff8f1;--cf-sage-031:#edf8f2;--cf-sage-036:#e9f7ef;--cf-sage-039:#edf4f0;--cf-sage-040:#e4f7ee;--cf-sage-042:#e4f6ee;--cf-sage-046:#e0f6ed;--cf-sage-047:#edf1ed;--cf-sage-048:#e2f5e9;--cf-sage-049:#e2f4ed;--cf-sage-053:#e9efec;--cf-sage-059:#e5eee9;--cf-sage-082:#dce7e2;--cf-sage-151:#c4d1cb;--cf-sage-189:#b1c7bf;--cf-sage-224:#a7bbb8;--cf-sage-231:#a2bab3;--cf-sage-271:#a0aaa5;--cf-sage-276:#9baaa4;--cf-sage-285:#8fa9a8;--cf-sage-286:#9aa6a1;--cf-sage-287:#8fa9a5;--cf-sage-295:#98a39f;--cf-sage-329:#8b9996;--cf-sage-354:#84918f;--cf-sage-357:#82918d;--cf-sage-358:#81918f;--cf-sage-360:#81908d;--cf-sage-376:#7a8c87;--cf-sage-382:#7a898a;--cf-sage-385:#788984;--cf-sage-392:#6c8a82;--cf-sage-395:#718783;--cf-sage-404:#73837f;--cf-sage-411:#70817e;--cf-sage-425:#638078;--cf-sage-431:#6b7b78;--cf-sage-436:#5e7d77;--cf-sage-439:#657a76;--cf-sage-450:#607773;--cf-sage-462:#5d7373;--cf-sage-476:#5f6e69;--cf-sage-486:#5c6b66;--cf-sage-488:#4f6e66;--cf-sage-497:#52696a;--cf-sage-499:#53686a;--cf-sage-505:#56665f;--cf-sage-518:#48655f;--cf-slate-276:#92abb0;--cf-slate-357:#78929a;--cf-slate-504:#52666b;--cf-slate-507:#56636e;--cf-slate-520:#486368;--cf-slate-548:#405b61;--cf-slate-568:#42535d;--cf-slate-629:#29454b;--cf-slate-728:#122a37;--cf-slate-745:#19242e;--cf-slate-757:#17212b;--cf-slate-760:#0d222d;--cf-slate-767:#0d202a;--cf-clay-046:#ffebe3;--cf-clay-051:#fde9e5;--cf-clay-053:#ffe8df;--cf-cobalt-041:#edf1ff;--cf-cobalt-052:#e8edff;--cf-cobalt-101:#d4dcff;--cf-cobalt-455:#315cf5;--cf-cobalt-519:#535e75;--cf-violet-505:#6b4ea2;--cf-plum-530:#6a498a;--cf-plum-559:#694171;--cf-plum-614:#4e3866;--cf-red-422:#c84a3c;--cf-red-485:#a34739;--cf-orange-172:#ffb195;--cf-orange-238:#ff8f61;--cf-orange-306:#e57b54;--cf-orange-362:#d9633c;--cf-orange-381:#c96542;--cf-orange-398:#c65e39;--cf-orange-401:#b46a45;--cf-orange-437:#a75f48;--cf-amber-036:#fff2d4;--cf-amber-115:#f9d66b;--cf-amber-164:#e8c65c;--cf-amber-168:#edc25b;--cf-amber-174:#f2bd48;--cf-amber-231:#d9ae35;--cf-amber-356:#b98124;--cf-amber-381:#af7a24;--cf-amber-475:#925d0c;--cf-amber-592:#5c4617;--cf-mint-047:#d5f9ec;--cf-mint-078:#b9f4e2;--cf-mint-187:#55ddb7;--cf-mint-228:#9bbeb2;--cf-mint-230:#62cbaa;--cf-mint-254:#30c997;--cf-mint-325:#58a98b;--cf-mint-336:#42a982;--cf-mint-338:#69a08e;--cf-mint-348:#48a481;--cf-mint-351:#6d9a8d;--cf-mint-362:#67978b;--cf-mint-363:#5a9c78;--cf-mint-365:#4a9d7c;--cf-mint-382:#4a9777;--cf-mint-392:#4e927b;--cf-mint-396:#3c9472;--cf-mint-400:#3c9277;--cf-mint-402:#548d79;--cf-mint-421:#3f8b6b;--cf-mint-422:#3b8b70;--cf-mint-437:#38866e;--cf-mint-448:#4d7d72;--cf-mint-449:#16856b;--cf-mint-450:#438069;--cf-mint-451:#308366;--cf-mint-452:#427f6f;--cf-mint-476:#43756a;--cf-mint-477:#387861;--cf-mint-478:#4d726c;--cf-mint-479:#087c5a;--cf-mint-513:#426861;--cf-mint-521:#226c53;--cf-mint-574:#27594f;--cf-mint-635:#20473b;--cf-mint-668:#1c3d34;--cf-teal-246:#62bfd1;--cf-teal-344:#4a9eb5;--cf-teal-527:#42616c;--cf-amber-115-a250:color-mix(in srgb, var(--cf-amber-115) 25%, transparent);--cf-mint-078-a140:color-mix(in srgb, var(--cf-mint-078) 14%, transparent);--cf-mint-187-a270:color-mix(in srgb, var(--cf-mint-187) 27%, transparent);--cf-mint-187-a300:color-mix(in srgb, var(--cf-mint-187) 30%, transparent);--cf-mint-228-a600:color-mix(in srgb, var(--cf-mint-228) 60%, transparent);--cf-mint-230-a160:color-mix(in srgb, var(--cf-mint-230) 16%, transparent);--cf-mint-254-a140:color-mix(in srgb, var(--cf-mint-254) 14%, transparent);--cf-mint-336-a120:color-mix(in srgb, var(--cf-mint-336) 12%, transparent);--cf-mint-635-a130:color-mix(in srgb, var(--cf-mint-635) 13%, transparent);--cf-mint-668-a080:color-mix(in srgb, var(--cf-mint-668) 8%, transparent);--cf-orange-238-a140:color-mix(in srgb, var(--cf-orange-238) 14%, transparent);--cf-slate-728-a045:color-mix(in srgb, var(--cf-slate-728) 4.5%, transparent);--cf-slate-728-a090:color-mix(in srgb, var(--cf-slate-728) 9%, transparent);--cf-slate-728-a160:color-mix(in srgb, var(--cf-slate-728) 16%, transparent);--cf-slate-728-a170:color-mix(in srgb, var(--cf-slate-728) 17%, transparent);--cf-slate-728-a220:color-mix(in srgb, var(--cf-slate-728) 22%, transparent);--cf-slate-757-a094:color-mix(in srgb, var(--cf-slate-757) 9.4%, transparent);--cf-white-a070:color-mix(in srgb, var(--cf-white) 7%, transparent);--cf-white-a080:color-mix(in srgb, var(--cf-white) 8%, transparent);--cf-white-a100:color-mix(in srgb, var(--cf-white) 10%, transparent);--cf-white-a120:color-mix(in srgb, var(--cf-white) 12%, transparent);--cf-white-a780:color-mix(in srgb, var(--cf-white) 78%, transparent);--cf-white-a800:color-mix(in srgb, var(--cf-white) 80%, transparent);--cf-zinc-739-a025:color-mix(in srgb, var(--cf-zinc-739) 2.5%, transparent);--cf-zinc-790-a020:color-mix(in srgb, var(--cf-zinc-790) 2%, transparent);--cf-zinc-790-a025:color-mix(in srgb, var(--cf-zinc-790) 2.5%, transparent);--cf-zinc-790-a035:color-mix(in srgb, var(--cf-zinc-790) 3.5%, transparent);--cf-zinc-790-a060:color-mix(in srgb, var(--cf-zinc-790) 6%, transparent);--cf-zinc-790-a071:color-mix(in srgb, var(--cf-zinc-790) 7.1%, transparent);--cf-zinc-790-a080:color-mix(in srgb, var(--cf-zinc-790) 8%, transparent);--cf-zinc-790-a120:color-mix(in srgb, var(--cf-zinc-790) 12%, transparent);--cf-color-ink:var(--cf-zinc-790);--cf-color-ink-2:var(--cf-zinc-630);--cf-color-ink-3:var(--cf-zinc-512);--cf-color-muted:var(--cf-zinc-448);--cf-color-meta:var(--cf-sage-505);--cf-color-paper:var(--cf-stone-028);--cf-color-surface:var(--cf-white);--cf-color-on-ink:var(--cf-white);--cf-color-on-ink-muted:var(--cf-zinc-288);--cf-color-line:var(--cf-stone-101);--cf-color-signal:var(--cf-cobalt-455);--cf-color-signal-soft:var(--cf-cobalt-041);--cf-color-signal-tint:var(--cf-cobalt-052);--cf-color-negative:var(--cf-red-422);--cf-color-accent-orange:var(--cf-orange-362);--cf-color-accent-yellow:var(--cf-amber-164);--cf-color-research-accent:var(--cf-plum-559);--cf-color-research-muted:var(--cf-mauve-436);--cf-color-compare-ink:var(--cf-zinc-739);--cf-color-compare-muted:var(--cf-zinc-440);--cf-color-compare-subtle:var(--cf-mauve-451);--cf-color-compare-accent:var(--cf-violet-505);--cf-color-consent-ink:var(--cf-slate-745);--cf-color-consent-muted:var(--cf-slate-507);--cf-color-consent-link:var(--cf-slate-568);--cf-color-consent-accent:var(--cf-mint-521);--cf-font-sans:var(--font-satoshi), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--cf-font-serif:"Georgia", serif;--cf-font-mono:var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;--cf-font-size-3xs:8px;--cf-font-size-2xs:9px;--cf-font-size-xs:10px;--cf-font-size-sm:11px;--cf-font-size-md:12px;--cf-font-size-lg:13px;--cf-font-size-xl:14px;--cf-font-size-2xl:15px;--cf-font-size-3xl:16px;--cf-font-size-4xl:18px;--cf-font-size-5xl:20px;--cf-font-size-6xl:24px;--cf-font-size-7xl:28px;--cf-font-size-display:clamp(2.75rem, 6vw, 4.75rem);--cf-font-size-section:clamp(2rem, 4vw, 3.25rem);--cf-font-weight-regular:400;--cf-font-weight-medium:500;--cf-font-weight-medium-plus:550;--cf-font-weight-semibold:600;--cf-font-weight-semibold-plus:650;--cf-font-weight-bold:700;--cf-font-weight-bold-plus:750;--cf-font-weight-extrabold:800;--cf-font-weight-extrabold-plus:850;--cf-font-weight-black:900;--cf-leading-none:1;--cf-leading-display:1.02;--cf-leading-heading:1.08;--cf-leading-snug:1.35;--cf-leading-compact:1.45;--cf-leading-normal:1.5;--cf-leading-comfortable:1.55;--cf-leading-relaxed:1.6;--cf-leading-loose:1.7;--cf-tracking-normal:0;--cf-tracking-display:-.055em;--cf-tracking-heading:-.045em;--cf-tracking-title:-.04em;--cf-tracking-snug:-.025em;--cf-tracking-label:.08em;--cf-tracking-caps:.1em;--cf-space-1:4px;--cf-space-2:8px;--cf-space-3:12px;--cf-space-4:16px;--cf-space-6:24px;--cf-space-8:32px;--cf-space-12:48px;--cf-space-18:72px;--cf-space-24:96px;--cf-page-max:1200px;--cf-gutter:24px;--cf-gutter-mobile:16px;--cf-radius-xs:4px;--cf-radius-sm:6px;--cf-radius-md:8px;--cf-radius-button:9px;--cf-radius-lg:12px;--cf-radius-xl:16px;--cf-radius-pill:99px;--cf-radius-round:50%;--cf-shadow-brand-mark:0 8px 16px var(--cf-slate-728-a160);--cf-shadow-button:0 10px 22px var(--cf-slate-728-a170);--cf-shadow-button-hover:0 14px 27px var(--cf-slate-728-a220);--cf-shadow-raised:0 8px 24px var(--cf-zinc-790-a060);--cf-shadow-hairline:0 1px 3px var(--cf-zinc-790-a071);--cf-shadow-overlay:0 6px 28px var(--cf-slate-757-a094);--cf-z-raised:1;--cf-z-chart-grid:2;--cf-z-chart-mark:3;--cf-z-chart-mark-active:4;--cf-z-sticky-subnav:10;--cf-z-sticky-tabs:12;--cf-z-selection-tray:18;--cf-z-header:20;--cf-z-consent:70;--cf-duration-150:0.15s;--cf-duration-160:0.16s;--cf-duration-200:0.2s;--cf-duration-250:0.25s;--cf-ease-standard:ease;--cf-ui-bg:#fbfaf8;--cf-ui-bg-subtle:#f3f1ed;--cf-ui-surface:#ffffff;--cf-ui-surface-2:#f7f7f5;--cf-ui-border:#e5e5e1;--cf-ui-border-strong:#d2d2cc;--cf-ui-fg:#0d0e10;--cf-ui-fg-2:#373b41;--cf-ui-fg-muted:#62676f;--cf-ui-fg-faint:#9aa0a7;--cf-ui-brand:#5b3f7a;--cf-ui-brand-hover:#4b3266;--cf-ui-brand-fg:#ffffff;--cf-ui-brand-text:#5b3f7a;--cf-ui-brand-subtle:#f2edf8;--cf-ui-brand-border:#dccfeb;--cf-ui-data:#087a56;--cf-ui-data-subtle:#e3f4ec;--cf-ui-warn:#95590a;--cf-ui-warn-subtle:#fbf0dd;--cf-ui-danger:#b3380b;--cf-ui-danger-subtle:#fcebe3;--cf-ui-inverse:#0d0e10;--cf-ui-inverse-fg:#fbfbfa;--cf-ui-ring:#7a57a3;--cf-ui-overlay:#08080a6b;--cf-ui-glass:#fbfbfad6;--cf-ui-deep:#140b24;--cf-ui-deep-2:#1d1033;--cf-ui-deep-3:#2b1a4a;--cf-ui-deep-glow:#3a2463;--cf-ui-on-deep:#f5f2fb;--cf-ui-on-deep-2:#c9c1d9;--cf-ui-on-deep-3:#a79fb9;--cf-ui-deep-line:#ffffff1a;--cf-ui-deep-glass:#ffffff14;--cf-ui-data-bright:#30c997;--cf-ui-data-deep:#0f8a63;--cf-ui-gold:#e8c983;--cf-ui-shadow-xl:0 2px 6px rgba(20, 11, 36, 0.06), 0 50px 100px -40px rgba(20, 11, 36, 0.35);--cf-ui-shadow-deep:0 60px 120px -30px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(91, 63, 122, 0.6);--cf-ui-tone-green:#0f7a57;--cf-ui-tone-green-bg:#e3f5ed;--cf-ui-tone-violet:#6b4ea2;--cf-ui-tone-violet-bg:#efe9f7;--cf-ui-tone-amber:#9a5d08;--cf-ui-tone-amber-bg:#fbf0dc;--cf-ui-tone-blue:#2f5fd0;--cf-ui-tone-blue-bg:#e6edfc;--cf-ui-tone-teal:#0f766e;--cf-ui-tone-teal-bg:#dff3f1;--cf-ui-tone-rose:#b4325a;--cf-ui-tone-rose-bg:#fbe6ec;--cf-ui-tone-cyan:#0e7490;--cf-ui-tone-cyan-bg:#def3f8;--cf-ui-tone-slate:#55526a;--cf-ui-tone-slate-bg:#eeecf2;--cf-ui-deep-glass-2:#ffffff24;--cf-ui-deep-edge:#ffffff38;--cf-ui-deep-nav:#140b248c;--cf-ui-deep-panel:#221537;--cf-ui-deep-panel-2:#180e2a;--cf-ui-deep-ink:#0d0716;--cf-ui-deep-accent:#b79fdb;--cf-ui-deep-title:#ffffff;--cf-ui-deep-title-2:#cfc3e6;--cf-ui-deep-shade:#00000073;--cf-ui-glow-data:#30c99729;--cf-ui-glow-violet:#b79fdb2e;--cf-ui-glow-pulse:#30c997b3;--cf-ui-glow-pulse-0:#30c99700;--cf-ui-glow-deep:#5b3f7a73;--cf-ui-pill-fg:#1b1523;--cf-ui-shadow-float:inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 40px -18px rgba(0, 0, 0, 0.6);--cf-ui-shadow-device:inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 120px -30px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(91, 63, 122, 0.6);--cf-ui-shadow-key:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 0 rgba(0, 0, 0, 0.4);--cf-ui-logo-mark:#30c997;--cf-ui-shadow-sm:0 1px 2px rgba(16, 17, 20, 0.05);--cf-ui-shadow-md:0 1px 2px rgba(16, 17, 20, 0.04), 0 8px 24px rgba(16, 17, 20, 0.08);--cf-ui-shadow-lg:0 2px 6px rgba(16, 17, 20, 0.06), 0 24px 64px rgba(16, 17, 20, 0.16);--cf-ui-provider-openai:#10a37f;--cf-ui-provider-anthropic:#c96442;--cf-ui-provider-google:#4285f4;--cf-ui-provider-mistral:#e8590c;--cf-ui-provider-deepseek:#4d6bfe;--cf-ui-provider-other:#5f6670;--cf-ui-font-sans:var(--font-satoshi), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--cf-ui-font-display:var(--font-satoshi), ui-sans-serif, system-ui, sans-serif;--cf-ui-font-mono:var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;--cf-ui-text-2xs:11px;--cf-ui-text-xs:12px;--cf-ui-text-sm:13px;--cf-ui-text-base:14px;--cf-ui-text-md:15px;--cf-ui-text-lg:17px;--cf-ui-text-xl:20px;--cf-ui-text-2xl:24px;--cf-ui-text-3xl:clamp(28px, 3.4vw, 36px);--cf-ui-text-4xl:clamp(32px, 4.4vw, 48px);--cf-ui-text-display:clamp(38px, 5.8vw, 66px);--cf-ui-leading-tight:1.1;--cf-ui-leading-snug:1.3;--cf-ui-leading-normal:1.55;--cf-ui-tracking-display:-0.04em;--cf-ui-tracking-heading:-0.02em;--cf-ui-tracking-label:0.07em;--cf-ui-space-1:4px;--cf-ui-space-2:8px;--cf-ui-space-3:12px;--cf-ui-space-4:16px;--cf-ui-space-5:20px;--cf-ui-space-6:24px;--cf-ui-space-8:32px;--cf-ui-space-10:40px;--cf-ui-space-12:48px;--cf-ui-space-16:64px;--cf-ui-radius-xs:5px;--cf-ui-radius-sm:8px;--cf-ui-radius-md:10px;--cf-ui-radius-lg:14px;--cf-ui-radius-xl:18px;--cf-ui-radius-pill:999px;--cf-ui-control-sm:30px;--cf-ui-control:36px;--cf-ui-control-lg:44px;--cf-ui-container:1240px;--cf-ui-gutter:20px;--cf-ui-header:60px;--cf-ui-duration-fast:120ms;--cf-ui-duration:180ms;--cf-ui-duration-slow:280ms;--cf-ui-ease:cubic-bezier(0.2, 0.7, 0.2, 1);--cf-ui-z-header:50;--cf-ui-z-menu:60;--cf-ui-z-drawer:70;--cf-ui-z-overlay:80;--cf-ui-z-toast:90;color-scheme:light}
:root[data-pages-color-mode="dark"],[data-pages-theme-scope][data-pages-color-mode="dark"],:root[data-theme="dark"]{--cf-ui-bg-base:#0c0a12;--cf-ui-bg-subtle:#110e19;--cf-ui-border-base:#28233a;--cf-ui-border-strong:#372f4d;--cf-ui-brand-base:#a585d0;--cf-ui-brand-border:#3a2c50;--cf-ui-brand-fg:#0b0710;--cf-ui-brand-hover:#b89ddb;--cf-ui-brand-subtle:#1d1626;--cf-ui-brand-text:#b99fdc;--cf-ui-danger-base:#f08a5d;--cf-ui-danger-subtle:#2c1610;--cf-ui-data-base:#3ad29f;--cf-ui-data-bright:#30c997;--cf-ui-data-deep:#0f8a63;--cf-ui-data-subtle:#0f2a21;--cf-ui-deep-2:#1d1033;--cf-ui-deep-3:#2b1a4a;--cf-ui-deep-accent:#b79fdb;--cf-ui-deep-base:#140b24;--cf-ui-deep-edge:#ffffff38;--cf-ui-deep-glass-2:#ffffff24;--cf-ui-deep-glass-base:#ffffff14;--cf-ui-deep-glow:#3a2463;--cf-ui-deep-ink:#0d0716;--cf-ui-deep-line:#ffffff1a;--cf-ui-deep-nav:#140b248c;--cf-ui-deep-panel-2:#180e2a;--cf-ui-deep-panel-base:#221537;--cf-ui-deep-shade:#00000073;--cf-ui-deep-title-2:#cfc3e6;--cf-ui-deep-title-base:#ffffff;--cf-ui-fg-2:#cdced4;--cf-ui-fg-base:#f2f2f4;--cf-ui-fg-faint:#62656d;--cf-ui-fg-muted:#9a9da6;--cf-ui-glass:#09090bcc;--cf-ui-glow-data:#30c99729;--cf-ui-glow-deep:#5b3f7a73;--cf-ui-glow-pulse-0:#30c99700;--cf-ui-glow-pulse-base:#30c997b3;--cf-ui-glow-violet:#b79fdb2e;--cf-ui-gold:#e8c983;--cf-ui-inverse-base:#f2f2f4;--cf-ui-inverse-fg:#09090b;--cf-ui-logo-mark:#30c997;--cf-ui-on-deep-2:#c9c1d9;--cf-ui-on-deep-3:#a79fb9;--cf-ui-on-deep-base:#f5f2fb;--cf-ui-overlay:#0000009e;--cf-ui-pill-fg:#1b1523;--cf-ui-provider-anthropic:#e08563;--cf-ui-provider-deepseek:#7d93ff;--cf-ui-provider-google:#6ea2f7;--cf-ui-provider-mistral:#f47b36;--cf-ui-provider-openai:#3cc59a;--cf-ui-provider-other:#8b919b;--cf-ui-ring:#b99fdc;--cf-ui-shadow-deep:0 60px 120px -30px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(91, 63, 122, 0.6);--cf-ui-shadow-device:inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 120px -30px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(91, 63, 122, 0.6);--cf-ui-shadow-float:inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 40px -18px rgba(0, 0, 0, 0.6);--cf-ui-shadow-key:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 0 rgba(0, 0, 0, 0.4);--cf-ui-shadow-lg:0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.6);--cf-ui-shadow-md:0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);--cf-ui-shadow-sm:0 1px 2px rgba(0, 0, 0, 0.4);--cf-ui-shadow-xl:0 2px 6px rgba(0, 0, 0, 0.4), 0 50px 100px -40px rgba(0, 0, 0, 0.75);--cf-ui-surface-2:#1b1726;--cf-ui-surface-base:#15121e;--cf-ui-tone-amber-base:#f0b44c;--cf-ui-tone-amber-bg:#2a2011;--cf-ui-tone-blue-base:#7aa2ff;--cf-ui-tone-blue-bg:#16203a;--cf-ui-tone-cyan-base:#4cc3e0;--cf-ui-tone-cyan-bg:#0f2530;--cf-ui-tone-green-base:#3ad29f;--cf-ui-tone-green-bg:#10261f;--cf-ui-tone-rose-base:#f47a9b;--cf-ui-tone-rose-bg:#2c1520;--cf-ui-tone-slate-base:#a79fb9;--cf-ui-tone-slate-bg:#1f1b2b;--cf-ui-tone-teal-base:#3cc9bb;--cf-ui-tone-teal-bg:#0f2624;--cf-ui-tone-violet-base:#b79fdb;--cf-ui-tone-violet-bg:#221a33;--cf-ui-warn-base:#e7a54b;--cf-ui-warn-subtle:#2a1f0f;color-scheme:dark}
@media (prefers-color-scheme:dark){[data-pages-theme-scope][data-pages-follow-system][data-pages-color-mode="auto"]{--cf-ui-bg-base:#0c0a12;--cf-ui-bg-subtle:#110e19;--cf-ui-border-base:#28233a;--cf-ui-border-strong:#372f4d;--cf-ui-brand-base:#a585d0;--cf-ui-brand-border:#3a2c50;--cf-ui-brand-fg:#0b0710;--cf-ui-brand-hover:#b89ddb;--cf-ui-brand-subtle:#1d1626;--cf-ui-brand-text:#b99fdc;--cf-ui-danger-base:#f08a5d;--cf-ui-danger-subtle:#2c1610;--cf-ui-data-base:#3ad29f;--cf-ui-data-bright:#30c997;--cf-ui-data-deep:#0f8a63;--cf-ui-data-subtle:#0f2a21;--cf-ui-deep-2:#1d1033;--cf-ui-deep-3:#2b1a4a;--cf-ui-deep-accent:#b79fdb;--cf-ui-deep-base:#140b24;--cf-ui-deep-edge:#ffffff38;--cf-ui-deep-glass-2:#ffffff24;--cf-ui-deep-glass-base:#ffffff14;--cf-ui-deep-glow:#3a2463;--cf-ui-deep-ink:#0d0716;--cf-ui-deep-line:#ffffff1a;--cf-ui-deep-nav:#140b248c;--cf-ui-deep-panel-2:#180e2a;--cf-ui-deep-panel-base:#221537;--cf-ui-deep-shade:#00000073;--cf-ui-deep-title-2:#cfc3e6;--cf-ui-deep-title-base:#ffffff;--cf-ui-fg-2:#cdced4;--cf-ui-fg-base:#f2f2f4;--cf-ui-fg-faint:#62656d;--cf-ui-fg-muted:#9a9da6;--cf-ui-glass:#09090bcc;--cf-ui-glow-data:#30c99729;--cf-ui-glow-deep:#5b3f7a73;--cf-ui-glow-pulse-0:#30c99700;--cf-ui-glow-pulse-base:#30c997b3;--cf-ui-glow-violet:#b79fdb2e;--cf-ui-gold:#e8c983;--cf-ui-inverse-base:#f2f2f4;--cf-ui-inverse-fg:#09090b;--cf-ui-logo-mark:#30c997;--cf-ui-on-deep-2:#c9c1d9;--cf-ui-on-deep-3:#a79fb9;--cf-ui-on-deep-base:#f5f2fb;--cf-ui-overlay:#0000009e;--cf-ui-pill-fg:#1b1523;--cf-ui-provider-anthropic:#e08563;--cf-ui-provider-deepseek:#7d93ff;--cf-ui-provider-google:#6ea2f7;--cf-ui-provider-mistral:#f47b36;--cf-ui-provider-openai:#3cc59a;--cf-ui-provider-other:#8b919b;--cf-ui-ring:#b99fdc;--cf-ui-shadow-deep:0 60px 120px -30px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(91, 63, 122, 0.6);--cf-ui-shadow-device:inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 120px -30px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(91, 63, 122, 0.6);--cf-ui-shadow-float:inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 40px -18px rgba(0, 0, 0, 0.6);--cf-ui-shadow-key:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 0 rgba(0, 0, 0, 0.4);--cf-ui-shadow-lg:0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.6);--cf-ui-shadow-md:0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);--cf-ui-shadow-sm:0 1px 2px rgba(0, 0, 0, 0.4);--cf-ui-shadow-xl:0 2px 6px rgba(0, 0, 0, 0.4), 0 50px 100px -40px rgba(0, 0, 0, 0.75);--cf-ui-surface-2:#1b1726;--cf-ui-surface-base:#15121e;--cf-ui-tone-amber-base:#f0b44c;--cf-ui-tone-amber-bg:#2a2011;--cf-ui-tone-blue-base:#7aa2ff;--cf-ui-tone-blue-bg:#16203a;--cf-ui-tone-cyan-base:#4cc3e0;--cf-ui-tone-cyan-bg:#0f2530;--cf-ui-tone-green-base:#3ad29f;--cf-ui-tone-green-bg:#10261f;--cf-ui-tone-rose-base:#f47a9b;--cf-ui-tone-rose-bg:#2c1520;--cf-ui-tone-slate-base:#a79fb9;--cf-ui-tone-slate-bg:#1f1b2b;--cf-ui-tone-teal-base:#3cc9bb;--cf-ui-tone-teal-bg:#0f2624;--cf-ui-tone-violet-base:#b79fdb;--cf-ui-tone-violet-bg:#221a33;--cf-ui-warn-base:#e7a54b;--cf-ui-warn-subtle:#2a1f0f}}
/* src/app/chrome.css */
/*
 * Site chrome on design system v2: the header bar, supermenu, ⌘K palette and mobile drawer
 * (src/components/site-header.tsx). Only --cf-ui-* tokens, so it follows the light/dark theme.
 */

.cfh {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: var(--cf-ui-z-header);
  background: var(--cf-ui-glass);
  border-bottom: 1px solid var(--cf-ui-border);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  font-size: var(--cf-ui-text-base);
}

.cfh-bar {
  display: flex;
  align-items: center;
  gap: var(--cf-ui-space-2);
  height: var(--cf-ui-header);
}

.cfh-home { display: inline-flex; align-items: center; margin-right: var(--cf-ui-space-3); flex: none; border-radius: var(--cf-ui-radius-xs); }
.cfh-home:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 3px; }
.cfh-logo { display: inline-flex; }
.cfh-logo img { display: block; width: 104px; height: 26px; aspect-ratio: 4 / 1; }
.cfh-logo .cfh-logo-dark { display: none; }
[data-theme="dark"] .cfh-logo .cfh-logo-light { display: none; }
[data-theme="dark"] .cfh-logo .cfh-logo-dark { display: block; }

.cfh-nav { display: flex; align-items: center; gap: 2px; }
.cfh-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding-inline: 11px;
  border: 0;
  border-radius: var(--cf-ui-radius-sm);
  background: transparent;
  color: var(--cf-ui-fg-2);
  font: 500 var(--cf-ui-text-base) / 1 var(--cf-ui-font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cf-ui-duration) var(--cf-ui-ease), color var(--cf-ui-duration) var(--cf-ui-ease);
}
.cfh-nav-btn svg { width: 13px; height: 13px; opacity: 0.6; transition: transform var(--cf-ui-duration) var(--cf-ui-ease); }
/* Text-only items (LLM Stats style): muted, the current section and the open one in full ink. */
.cfh-nav-btn { color: var(--cf-ui-fg-muted); }
.cfh-nav-btn:hover,
.cfh-nav-btn.is-current,
.cfh-nav-btn[aria-expanded="true"] { color: var(--cf-ui-fg); }
.cfh-nav-btn.is-current { font-weight: 600; }
.cfh-nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.cfh-nav-btn:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }

.cfh-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 240px;
  max-width: 340px;
  height: var(--cf-ui-control);
  margin-left: auto;
  padding: 0 8px 0 12px;
  border: 1px solid var(--cf-ui-border);
  border-radius: var(--cf-ui-radius-sm);
  background: var(--cf-ui-surface);
  color: var(--cf-ui-fg-muted);
  font: 400 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--cf-ui-duration) var(--cf-ui-ease);
}
.cfh-search:hover { border-color: var(--cf-ui-border-strong); }
.cfh-search:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.cfh-search svg { width: 16px; height: 16px; flex: none; }
.cfh-search-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfh-search-block { max-width: none; width: 100%; margin: var(--cf-ui-space-3) 0; height: var(--cf-ui-control-lg); }

.cfh-actions { display: flex; align-items: center; gap: 2px; margin-left: var(--cf-ui-space-2); }
.cfh-subscribe { margin-left: var(--cf-ui-space-2); }
.cfh-burger { display: none; }

.cfh-lang { position: relative; }
.cfh-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--cf-ui-control);
  padding-inline: 8px;
  border: 0;
  border-radius: var(--cf-ui-radius-sm);
  background: transparent;
  color: var(--cf-ui-fg-2);
  font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono);
  cursor: pointer;
}
.cfh-lang-btn:hover { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }
.cfh-lang-btn:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.cfh-lang-btn svg { width: 15px; height: 15px; }
.cfh-lang-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--cf-ui-z-menu);
  display: grid;
  min-width: 170px;
  padding: 5px;
  border: 1px solid var(--cf-ui-border);
  border-radius: var(--cf-ui-radius-md);
  background: var(--cf-ui-surface);
  box-shadow: var(--cf-ui-shadow-lg);
}
.cfh-lang-pop a {
  display: flex;
  justify-content: space-between;
  gap: var(--cf-ui-space-3);
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--cf-ui-fg-2);
  font-size: var(--cf-ui-text-sm);
  text-decoration: none;
}
.cfh-lang-pop a span { font: 500 var(--cf-ui-text-2xs) / 1.6 var(--cf-ui-font-mono); color: var(--cf-ui-fg-muted); }
.cfh-lang-pop a:hover { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }
.cfh-lang-pop a[aria-current="true"] { color: var(--cf-ui-fg); font-weight: 600; }
.cfh-lang-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cfh-lang-list a {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
  border: 1px solid var(--cf-ui-border);
  border-radius: var(--cf-ui-radius-pill);
  color: var(--cf-ui-fg-2);
  font-size: var(--cf-ui-text-sm);
  text-decoration: none;
}
.cfh-lang-list a[aria-current="true"] { background: var(--cf-ui-inverse); border-color: var(--cf-ui-inverse); color: var(--cf-ui-inverse-fg); }

/* ---- Supermenu ------------------------------------------------------------ */
.cfh-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--cf-ui-z-menu);
  border-bottom: 1px solid var(--cf-ui-border);
  background: var(--cf-ui-surface);
  box-shadow: var(--cf-ui-shadow-lg);
  animation: cfh-drop var(--cf-ui-duration) var(--cf-ui-ease);
}
@keyframes cfh-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }



.cfh-rail-title {
  padding: var(--cf-ui-space-2) 10px 6px;
  color: var(--cf-ui-fg-muted);
  font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono);
  letter-spacing: var(--cf-ui-tracking-label);
  text-transform: uppercase;
}

/* Coloured icon tiles, one tone per goal (resources stay neutral). */
.cfh-tile { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--cf-ui-tone-slate-bg); color: var(--cf-ui-tone-slate); }
.cfh-tile svg { width: 17px; height: 17px; }
.cfh-tone-green { background: var(--cf-ui-tone-green-bg); color: var(--cf-ui-tone-green); }
.cfh-tone-violet { background: var(--cf-ui-tone-violet-bg); color: var(--cf-ui-tone-violet); }
.cfh-tone-amber { background: var(--cf-ui-tone-amber-bg); color: var(--cf-ui-tone-amber); }
.cfh-tone-blue { background: var(--cf-ui-tone-blue-bg); color: var(--cf-ui-tone-blue); }
.cfh-tone-teal { background: var(--cf-ui-tone-teal-bg); color: var(--cf-ui-tone-teal); }
.cfh-tone-rose { background: var(--cf-ui-tone-rose-bg); color: var(--cf-ui-tone-rose); }
.cfh-tone-cyan { background: var(--cf-ui-tone-cyan-bg); color: var(--cf-ui-tone-cyan); }












.cfh-col-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--cf-ui-fg-muted);
  font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono);
  letter-spacing: var(--cf-ui-tracking-label);
  text-transform: uppercase;
}
.cfh-col-title a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--cf-ui-fg-muted);
  font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.cfh-col-title a:hover { color: var(--cf-ui-fg); }
.cfh-col-title a svg { width: 12px; height: 12px; }









.cfh-link-figure { color: var(--cf-ui-data); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); white-space: nowrap; }
.cfh-link-meta { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); white-space: nowrap; }
/* Goal panels: rows with a tile, a two-line label and the figure below it. */



.cfh-tile-sm { width: 30px; height: 30px; border-radius: 8px; }
.cfh-tile-sm svg { width: 15px; height: 15px; }






.cfh-mega-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--cf-ui-space-5);
  padding-block: var(--cf-ui-space-3);
  border-top: 1px solid var(--cf-ui-border);
  font-size: var(--cf-ui-text-sm);
}
.cfh-mega-foot a { color: var(--cf-ui-fg-muted); text-decoration: none; }
.cfh-mega-foot a:hover { color: var(--cf-ui-fg); }
.cfh-mega-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }

/* ---- ⌘K palette ------------------------------------------------------------ */
.cfh-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cf-ui-z-overlay);
  display: grid;
  place-items: start center;
  padding: calc(10vh + env(safe-area-inset-top, 0px)) var(--cf-ui-space-4) var(--cf-ui-space-4);
  background: var(--cf-ui-overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: cfh-fade var(--cf-ui-duration) var(--cf-ui-ease);
}
@keyframes cfh-fade { from { opacity: 0; } to { opacity: 1; } }
.cfh-palette {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(640px, 100%);
  max-height: min(560px, 76vh);
  overflow: hidden;
  border: 1px solid var(--cf-ui-border);
  border-radius: var(--cf-ui-radius-xl);
  background: var(--cf-ui-surface);
  box-shadow: var(--cf-ui-shadow-lg);
}
.cfh-palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-muted); }
.cfh-palette-input svg { width: 18px; height: 18px; flex: none; }
.cfh-palette-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--cf-ui-fg); font: 400 var(--cf-ui-text-lg) / 1.3 var(--cf-ui-font-sans); }
.cfh-palette-input input::placeholder { color: var(--cf-ui-fg-faint); }
.cfh-palette-list { overflow: auto; padding: 6px; }
.cfh-palette-group { padding: 12px 10px 6px; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.cfh-hit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cf-ui-space-3);
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--cf-ui-fg-2);
  font-size: var(--cf-ui-text-base);
  text-decoration: none;
}
.cfh-hit svg { width: 14px; height: 14px; color: var(--cf-ui-fg-faint); }
.cfh-hit[aria-selected="true"] { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }
.cfh-hit-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfh-palette-empty { display: grid; gap: 6px; justify-items: center; padding: 32px 16px; text-align: center; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.cfh-palette-empty b { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-md); }
.cfh-palette-foot { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-4); padding: 9px 14px; border-top: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.cfh-palette-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Mobile drawer ---------------------------------------------------------- */
.cfh-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--cf-ui-z-drawer);
  overflow: auto;
  padding: calc(var(--cf-ui-space-3) + env(safe-area-inset-top, 0px)) var(--cf-ui-gutter) calc(var(--cf-ui-space-8) + env(safe-area-inset-bottom, 0px));
  background: var(--cf-ui-bg);
  animation: cfh-fade var(--cf-ui-duration) var(--cf-ui-ease);
}
.cfh-drawer-head { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.cfh-drawer-group { display: grid; gap: 2px; margin-top: var(--cf-ui-space-4); }
.cfh-drawer-section { border-bottom: 1px solid var(--cf-ui-border); }
.cfh-drawer-section summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 13px 4px;
  color: var(--cf-ui-fg);
  font-size: var(--cf-ui-text-md);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.cfh-drawer-section summary::-webkit-details-marker { display: none; }
.cfh-drawer-section summary .cfh-drawer-chevron { width: 17px; height: 17px; color: var(--cf-ui-fg-muted); }
.cfh-drawer-section[open] .cfh-drawer-chevron { transform: rotate(180deg); }
.cfh-drawer-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0 0 12px; }
.cfh-drawer-cta { display: grid; gap: var(--cf-ui-space-2); margin-top: var(--cf-ui-space-6); }

/* ---- Responsive ---------------------------------------------------------- */
/* Five menu buttons plus search: tighten before the drawer takes over at 1040px. */
@media (max-width: 1240px) {
  .cfh-nav-link,
  .cfh-search .ui-kbd { display: none; }
  .cfh-nav-btn { padding-inline: 8px; }
  .cfh-search { flex-basis: 160px; min-width: 0; }
}
@media (max-width: 1040px) {
  .cfh-nav,
  .cfh-mega,
  .cfh-hide-sm { display: none; }
  .cfh-burger { display: inline-grid; }
  .cfh-search { max-width: none; }
}
@media (max-width: 560px) {
  .cfh-search { flex: 0 0 var(--cf-ui-control); justify-content: center; padding: 0; }
  .cfh-search-text,
  .cfh-search .ui-kbd { display: none; }
  .cfh-search-block .cfh-search-text { display: block; }
  .cfh-search-block { justify-content: flex-start; padding: 0 12px; flex: none; }
  .cfh-subscribe { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cfh-mega,
  .cfh-overlay,
  .cfh-drawer { animation: none; }
  .cfh-nav-btn svg { transition: none; }
}

/* ---- Footer ---------------------------------------------------------------- */
.cff { border-top: 1px solid var(--cf-ui-border); background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.cff-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--cf-ui-space-8); padding-block: var(--cf-ui-space-12) var(--cf-ui-space-8); }
.cff-brand { display: grid; align-content: start; gap: var(--cf-ui-space-3); }
.cff-brand p { margin: 0; max-width: 34ch; line-height: 1.5; }
.cff-logo { display: inline-flex; width: max-content; }
.cff-logo img { display: block; width: 104px; height: 26px; aspect-ratio: 4 / 1; }
.cff-logo .cfh-logo-dark { display: none; }
[data-theme="dark"] .cff-logo .cfh-logo-light { display: none; }
[data-theme="dark"] .cff-logo .cfh-logo-dark { display: block; }
.cff nav { display: grid; align-content: start; gap: 9px; }
.cff a { color: var(--cf-ui-fg-2); text-decoration: none; }
.cff a:hover { color: var(--cf-ui-fg); }
.cff a:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; border-radius: 4px; }
.cff-label { margin-bottom: 3px; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.cff-langs { display: grid; gap: 6px; margin-top: var(--cf-ui-space-2); }
.cff-lang-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cff-lang-links a { display: inline-flex; align-items: center; gap: 5px; }
.cff-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cf-ui-space-3) var(--cf-ui-space-6); padding-block: var(--cf-ui-space-5); border-top: 1px solid var(--cf-ui-border); font-size: var(--cf-ui-text-xs); }
.cff-legal { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-4); }
@media (max-width: 960px) { .cff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cff-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .cff-grid { grid-template-columns: 1fr; } }

/* ---- Over a deep hero (home): dark glass until the hero scrolls away ---------------- */
.cfh { transition: background-color var(--cf-ui-duration-slow) var(--cf-ui-ease), border-color var(--cf-ui-duration-slow) var(--cf-ui-ease); }
.cfh.is-deep { background: var(--cf-ui-deep-nav); border-bottom-color: var(--cf-ui-deep-line); color: var(--cf-ui-on-deep); }
.cfh.is-deep .cfh-logo .cfh-logo-light { display: none; }
.cfh.is-deep .cfh-logo .cfh-logo-dark { display: block; }
.cfh.is-deep .cfh-nav-btn,
.cfh.is-deep .cfh-lang-btn,
.cfh.is-deep .ui-icon-btn { color: var(--cf-ui-on-deep-2); }
.cfh.is-deep .cfh-nav-btn:hover,
.cfh.is-deep .cfh-lang-btn:hover,
.cfh.is-deep .ui-icon-btn:hover { background: var(--cf-ui-deep-glass); color: var(--cf-ui-on-deep); }
.cfh.is-deep .cfh-search { border-color: var(--cf-ui-deep-line); background: var(--cf-ui-deep-glass); color: var(--cf-ui-on-deep-2); }
.cfh.is-deep .cfh-search:hover { border-color: var(--cf-ui-deep-edge); }
.cfh.is-deep .cfh-search .ui-kbd { border-color: var(--cf-ui-deep-line); background: var(--cf-ui-deep-glass); color: var(--cf-ui-on-deep-2); }
.cfh.is-deep .cfh-subscribe { background: var(--cf-ui-on-deep); color: var(--cf-ui-pill-fg); }
@media (prefers-reduced-motion: reduce) { .cfh { transition: none; } }

/* ---- Nav panels: tiled rows, floating list, Rankings megamenu, Models explorer ------------ */
.cfh-nav-item { position: relative; }
.cfh-tile-sm { width: 28px; height: 28px; border-radius: 8px; }
.cfh-tile-sm svg { width: 14px; height: 14px; }
.cfh-tile-md { width: 34px; height: 34px; border-radius: 9px; }
.cfh-tile-md svg { width: 16px; height: 16px; }
.cfh-tile-lg { width: 40px; height: 40px; border-radius: 11px; }
.cfh-tile-lg svg { width: 18px; height: 18px; }

.cfh-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 10px 7px 7px; border-radius: 12px; color: var(--cf-ui-fg-2); text-decoration: none; transition: background-color var(--cf-ui-duration-fast) var(--cf-ui-ease), color var(--cf-ui-duration-fast) var(--cf-ui-ease); }
.cfh-row:hover { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }
.cfh-row:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: -2px; }
.cfh-row-text { display: grid; gap: 2px; min-width: 0; }
.cfh-row-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; line-height: 1.3; }
.cfh-row-lg .cfh-row-label { font-size: var(--cf-ui-text-md); }
.cfh-row-md .cfh-row-label { font-size: var(--cf-ui-text-base); }
.cfh-row-sm .cfh-row-label { font-size: var(--cf-ui-text-sm); }
.cfh-row-meta { overflow: hidden; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); white-space: nowrap; text-overflow: ellipsis; }
.cfh-row-figure { color: var(--cf-ui-data); font: 500 var(--cf-ui-text-xs) / 1.2 var(--cf-ui-font-mono); white-space: nowrap; }
.cfh-badge { flex: none; padding: 2px 6px; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-brand-subtle); color: var(--cf-ui-brand-text); font: 600 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-sans); font-style: normal; letter-spacing: 0.01em; }

.cfh-drop { position: absolute; top: calc(100% + 14px); left: -12px; z-index: var(--cf-ui-z-menu); display: grid; gap: 2px; width: 340px; padding: 10px; border: 1px solid var(--cf-ui-border); border-radius: 18px; background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-xl); animation: cfh-drop var(--cf-ui-duration) var(--cf-ui-ease); }
/* Bridges the gap to the card so the pointer can travel from the button without closing it. */
.cfh-drop::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.cfh-drop-foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 10px 10px 4px; border-top: 1px solid var(--cf-ui-border); color: var(--cf-ui-brand-text); font-size: var(--cf-ui-text-sm); font-weight: 600; text-decoration: none; }
.cfh-drop-foot svg { width: 15px; height: 15px; }
.cfh-drop-foot:hover { text-decoration: underline; text-underline-offset: 3px; }

.cfh-mega-wrap { padding-block: var(--cf-ui-space-4); }
.cfh-mega2 { display: grid; grid-template-columns: 330px minmax(0, 1fr); border: 1px solid var(--cf-ui-border); border-radius: 20px; overflow: hidden; background: var(--cf-ui-surface); }
.cfh-mega2-rail { display: grid; align-content: start; gap: 2px; padding: 12px; border-right: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); }
.cfh-mega2-lead .cfh-row { background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-sm), inset 0 0 0 1px var(--cf-ui-border); color: var(--cf-ui-fg); }
.cfh-mega2-lead .cfh-row-label { font-weight: 650; }
.cfh-mega2-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cf-ui-space-2) var(--cf-ui-space-6); align-content: start; padding: 22px 26px; }
.cfh-mega2-col { display: grid; align-content: start; gap: 4px; min-width: 0; }

.cfh-explorer { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 420px; border: 1px solid var(--cf-ui-border); border-radius: 20px; overflow: hidden; background: var(--cf-ui-surface); }
.cfh-explorer-tabs { display: grid; align-content: start; gap: 4px; padding: 22px 14px; border-right: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); }
.cfh-explorer-tabs button { padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--cf-ui-fg-muted); font: 600 var(--cf-ui-text-lg) / 1.2 var(--cf-ui-font-display); letter-spacing: -0.02em; text-align: left; cursor: pointer; }
.cfh-explorer-tabs button:hover { color: var(--cf-ui-fg-2); }
.cfh-explorer-tabs button[aria-selected="true"] { background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-sm), inset 0 0 0 1px var(--cf-ui-border); color: var(--cf-ui-fg); }
.cfh-explorer-tabs button:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 1px; }
.cfh-explorer-body { display: grid; align-content: start; gap: var(--cf-ui-space-4); min-width: 0; padding: 18px 26px 24px; }
.cfh-explorer-search { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-muted); }
.cfh-explorer-search svg { width: 18px; height: 18px; flex: none; }
.cfh-explorer-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--cf-ui-fg); font: 400 var(--cf-ui-text-md) / 1.4 var(--cf-ui-font-sans); outline: none; }
.cfh-explorer-search input::placeholder { color: var(--cf-ui-fg-muted); }
.cfh-explorer-search:focus-within { border-bottom-color: var(--cf-ui-ring); }
.cfh-explorer-section { display: grid; gap: 8px; }
.cfh-explorer-section + .cfh-explorer-section { padding-top: var(--cf-ui-space-4); border-top: 1px solid var(--cf-ui-border); }
.cfh-explorer-title { margin: 0; color: var(--cf-ui-fg-2); font: 500 var(--cf-ui-text-sm) / 1.2 var(--cf-ui-font-sans); }
.cfh-explorer-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 18px; }
.cfh-key { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; margin-inline: -8px; border-radius: 10px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-base); text-decoration: none; }
.cfh-key svg { width: 18px; height: 18px; flex: none; color: var(--cf-ui-fg-muted); }
.cfh-key:hover { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }
.cfh-key:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: -2px; }
.cfh-explorer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 18px; }
.cfh-product { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; margin-inline: -8px; border-radius: 10px; color: var(--cf-ui-fg); text-decoration: none; }
.cfh-product:hover { background: var(--cf-ui-bg-subtle); }
.cfh-product:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: -2px; }
.cfh-product .ui-provider { width: 26px; height: 26px; }
.cfh-product-text { display: grid; min-width: 0; }
.cfh-product-name { overflow: hidden; font-size: var(--cf-ui-text-sm); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.cfh-explorer-empty { grid-column: 1 / -1; margin: 0; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }

.cfh-drawer-plain { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; color: var(--cf-ui-fg); font-weight: 500; text-decoration: none; }

@media (max-width: 1240px) {
  .cfh-explorer-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfh-explorer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfh-mega2 { grid-template-columns: 290px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cfh-drop { animation: none; }
  .cfh-row { transition: none; }
}
/* Megamenu rows can carry a one-line outcome: let it wrap to two lines instead of clipping. */
.cfh-mega2 .cfh-row-meta { display: -webkit-box; white-space: normal; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Language hint: a suggestion, never a redirect (client-only, so crawlers and the CDN see one HTML). */
/* Out of flow on purpose: it mounts after hydration, so in-flow it pushed the whole page down (CLS 0.106). */
.cfh-hint { position: fixed; top: 72px; right: 16px; left: 16px; z-index: var(--cf-ui-z-header); max-width: 420px; margin-left: auto; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-lg); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); }
.cfh-hint .cfh-hint-in { max-width: none; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 48px; padding: 8px 14px; }
.cfh-hint-in > svg { width: 16px; height: 16px; flex: none; color: var(--cf-ui-brand-text); }
.cfh-hint-in > span { flex: 1 1 220px; min-width: 0; }
.cfh-hint-stay { min-height: 32px; padding: 0 6px; border: 0; background: transparent; color: var(--cf-ui-fg-muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cfh-hint-stay:hover { color: var(--cf-ui-fg); }
.cfh-hint-stay:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; border-radius: 4px; }

/* src/app/comparison-interface.css */
/* Codifly data interface: quiet surfaces, high information density, explicit units. */
.cx-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--cf-zinc-100); border-radius:var(--cf-radius-sm); padding:9px 13px; font-size:var(--cf-font-size-sm); font-weight:var(--cf-font-weight-medium-plus); background:var(--cf-color-surface); color:var(--cf-zinc-558); white-space:nowrap; min-height:36px; }
.cx-button:hover { background:var(--cf-mauve-016); }.site-header .nav { gap:15px; }

/* src/app/dev-articles.css */
/* Developer guides share the editorial identity and keep code scroll local. */
.dev-hero { background: radial-gradient(ellipse at 90% 5%, var(--cf-mauve-076), transparent 48%), var(--cf-mauve-016); }
.dev-hero h1 { max-width: 930px; }
.dev-grid { width: min(1120px, calc(100% - 48px)); grid-template-columns: minmax(0, 760px) 240px; gap: 64px; }
.dev-body { min-width: 0; }
.dev-body > section { scroll-margin-top: 105px; }
.dev-body > section:first-child h2 { margin-top: 0; }
.dev-body ul { padding-left: 22px; margin: 22px 0; }
.dev-body li { margin: 10px 0; }
.dev-body a { text-decoration: underline; text-underline-offset: 3px; color: var(--cf-plum-530); overflow-wrap: anywhere; }
.dev-body .cx-button { color: var(--cf-color-on-ink); text-decoration: none; }
.dev-next { margin-top: 42px; padding: 25px; background: var(--cf-mauve-055); border-radius: var(--cf-radius-lg); }
.dev-next h2 { margin-top: 12px; font-size: var(--cf-font-size-7xl); }
@media(max-width: 900px) { .dev-grid { grid-template-columns: minmax(0,1fr); gap: 35px; } }
@media(max-width: 640px) {.dev-grid { width: calc(100% - 32px); }.dev-hero h1 { font-size: 42px; line-height: 1.04; }.dev-body h2 { font-size: 27px; } }
.dev-body section { scroll-margin-top: 88px; }
/* WCAG AA (4.5:1) for small text, measured with Lighthouse on /research and the guides. Same hues, darker. */
#latest .section-heading p { color: var(--cf-color-ink-3); }
/* The comparison CTA reuses the comparator's dark button, whose colours are scoped to .cx-page. */
.dev-next .cx-button-dark { background: var(--cf-mauve-728); color: var(--cf-color-on-ink); border-color: var(--cf-mauve-728); }
.dev-next .cx-button-dark:hover { background: var(--cf-plum-614); color: var(--cf-color-on-ink); }
/* Contextual internal link at the end of a section: quiet, but clearly a link. */

/* src/app/editorial-styles.css */
/* Scoped to the legacy forms; explicit consent must remain readable at 390px. */
.save-report { align-items: flex-start; flex-wrap: wrap; }
.save-report form { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; max-width: 100%; }
.save-report form input[type="email"] { min-width: 0; width: 100%; box-sizing: border-box; }
.save-report .cf-consent, .newsletter .cf-consent { align-items: flex-start; font-size: var(--cf-font-size-md); line-height: var(--cf-leading-normal); }
.cx-account-alert { display: grid; grid-template-columns: auto auto; align-items: center; gap: 9px 12px; margin-top: 10px; }
.cx-account-alert > span, .cx-account-alert > small { grid-column: 1 / -1; }
.cx-account-alert small { color: var(--cf-color-research-muted); font-size: var(--cf-font-size-sm); line-height: 1.4; }
.cx-alert-options { display: flex; flex-wrap: wrap; gap: 10px; }
.cx-alert-options label { display: inline-flex; align-items: center; gap: 5px; color: var(--cf-color-research-muted); font-size: var(--cf-font-size-sm); }
.cx-alert-options input { width: 14px; height: 14px; accent-color: inherit; }
.save-report .cf-consent input, .newsletter .cf-consent input { flex: 0 0 16px; width: 16px; height: 16px; min-width: 16px; padding: 0; margin-top: 2px; }
.newsletter { flex-wrap: wrap; }
.newsletter > .cf-consent { flex-basis: 100%; order: 3; }

/* src/app/embed.css */
/* Embeddable widgets (src/app/embed). Only --cf-ui-* tokens; theme chosen by ?theme. */
.embed { margin: 0; background: transparent; font-family: var(--cf-ui-font-sans); }
.embed *,
.embed *::before,
.embed *::after { box-sizing: border-box; }
.embed-card { display: grid; gap: 10px; width: 100%; max-width: 100%; padding: 16px; border: 1px solid var(--cf-ui-border); border-radius: 14px; background: var(--cf-ui-surface); color: var(--cf-ui-fg); }
.embed-card[data-theme="dark"] { border-color: var(--cf-ui-deep-line); background: var(--cf-ui-deep); color: var(--cf-ui-on-deep); }
.embed-card header { display: grid; gap: 2px; }
.embed-card header b { font: 650 16px / 1.25 var(--cf-ui-font-display); }
.embed-card header span,
.embed-card small { color: var(--cf-ui-fg-muted); font-size: 12px; }
.embed-card[data-theme="dark"] header span,
.embed-card[data-theme="dark"] small { color: var(--cf-ui-on-deep-3); }
.embed-card ol { display: grid; margin: 0; padding: 0; list-style: none; }
.embed-card li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--cf-ui-border); font-size: 14px; }
.embed-card[data-theme="dark"] li { border-top-color: var(--cf-ui-deep-line); }
.embed-rank { color: var(--cf-ui-fg-muted); font: 500 12px / 1 var(--cf-ui-font-mono); }
.embed-name { display: grid; min-width: 0; font-weight: 600; }
.embed-price { color: var(--cf-ui-data); font: 600 13px / 1 var(--cf-ui-font-mono); }
.embed-card[data-theme="dark"] .embed-price { color: var(--cf-ui-data-bright); }
.embed-card footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 12px; }
.embed-card footer a { color: var(--cf-ui-brand-text); text-decoration: none; }
.embed-card[data-theme="dark"] footer a { color: var(--cf-ui-deep-accent); }
.embed-card footer a:hover { text-decoration: underline; }

/* src/app/globals.css */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cf-color-paper); color: var(--cf-color-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.shell { min-height: 100vh; overflow: hidden; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: var(--cf-font-weight-extrabold); letter-spacing: var(--cf-tracking-title); font-size: var(--cf-font-size-3xl); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 11px; padding: 12px 17px; font-weight: 780; font-size: var(--cf-font-size-lg); transition: transform var(--cf-duration-200) var(--cf-ease-standard), box-shadow var(--cf-duration-200) var(--cf-ease-standard), background var(--cf-duration-200) var(--cf-ease-standard); }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--cf-color-ink); color: var(--cf-color-on-ink); box-shadow: var(--cf-shadow-button); }
.button-primary:hover { background: var(--cf-slate-767); box-shadow: var(--cf-shadow-button-hover); }
.button-ghost { background: var(--cf-color-surface); color: var(--cf-color-ink); border: 1px solid var(--cf-color-line); }
.button-lime { background: var(--cf-color-signal-tint); color: var(--cf-color-ink); }

.hero { position: relative; padding: 76px 0 42px; background: radial-gradient(circle at 83% 12%, var(--cf-mint-187-a270), transparent 26%), radial-gradient(circle at 16% 13%, var(--cf-amber-115-a250), transparent 24%), linear-gradient(180deg, var(--cf-sage-016) 0%, var(--cf-sage-031) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none; background-image: linear-gradient(var(--cf-slate-728-a045) 1px, transparent 1px), linear-gradient(90deg, var(--cf-slate-728-a045) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, var(--cf-black), transparent 75%); }
.hero-grid { position: relative; z-index: var(--cf-z-raised); display: grid; grid-template-columns: 1.03fr .97fr; gap: 60px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--cf-mint-476); font-weight: var(--cf-font-weight-extrabold); font-size: var(--cf-font-size-sm); letter-spacing: .13em; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; background: var(--cf-color-accent-orange); border-radius: var(--cf-radius-pill); box-shadow: 0 0 0 5px var(--cf-orange-238-a140); }
h1 { font-size: clamp(47px, 6.1vw, 82px); line-height: .96; letter-spacing: -.075em; margin: 20px 0 24px; color: var(--cf-color-ink); max-width: 750px; }
.highlight { display: inline; background: linear-gradient(transparent 63%, var(--cf-color-accent-yellow) 63%); }
.hero-copy { max-width: 555px; color: var(--cf-slate-504); font-size: var(--cf-font-size-4xl); line-height: 1.62; margin: 0 0 28px; }
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; }
.hero-note { color: var(--cf-sage-382); font-size: var(--cf-font-size-md); margin-top: 17px; }
.hero-note strong { color: var(--cf-slate-520); }
.signal-card { background: var(--cf-white-a780); border: 1px solid var(--cf-mint-228-a600); border-radius: 23px; box-shadow: 0 25px 70px var(--cf-mint-635-a130); padding: 16px; transform: rotate(1deg); }
.signal-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 15px; }
.signal-title { color: var(--cf-color-ink); font-size: var(--cf-font-size-xl); font-weight: var(--cf-font-weight-extrabold); letter-spacing: -.02em; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-mint-452); font-size: var(--cf-font-size-xs); font-weight: var(--cf-font-weight-extrabold); text-transform: uppercase; letter-spacing: var(--cf-tracking-label); }
.live::before { content: ""; width: 6px; height: 6px; border-radius: var(--cf-radius-round); background: var(--cf-mint-254); box-shadow: 0 0 0 4px var(--cf-mint-254-a140); }
.terminal { background: var(--cf-color-ink); border-radius: var(--cf-radius-xl); color: var(--cf-mint-047); overflow: hidden; }
.terminal-bar { display: flex; gap: 5px; padding: 13px 15px; border-bottom: 1px solid var(--cf-white-a080); }
.terminal-bar span { width: 7px; height: 7px; border-radius: var(--cf-radius-round); background: var(--cf-teal-527); }
.terminal-bar span:first-child { background: var(--cf-color-accent-orange); }
.terminal-body { padding: 16px 18px 18px; font-family: var(--cf-font-mono); font-size: var(--cf-font-size-md); line-height: 1.75; }
.code-muted { color: var(--cf-slate-357); }.code-lime { color: var(--cf-color-signal); }.code-orange { color: var(--cf-orange-172); }.code-white { color: var(--cf-sage-023); }
.terminal-result { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--cf-white-a100); display: flex; align-items: end; justify-content: space-between; }
.result-label { color: var(--cf-slate-276); font-family: Inter, sans-serif; font-size: var(--cf-font-size-xs); text-transform: uppercase; letter-spacing: var(--cf-tracking-caps); }.result-number { color: var(--cf-color-on-ink); font-family: Inter, sans-serif; font-size: 30px; font-weight: var(--cf-font-weight-extrabold-plus); letter-spacing: -.07em; }.result-badge { color: var(--cf-color-signal); font-family: Inter, sans-serif; font-size: var(--cf-font-size-sm); font-weight: var(--cf-font-weight-extrabold); margin-bottom: 5px; }
.source-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 7px 3px; color: var(--cf-sage-411); font-size: var(--cf-font-size-xs); }.source-row strong { color: var(--cf-slate-548); font-size: var(--cf-font-size-sm); }

.trust-strip { border-bottom: 1px solid var(--cf-color-line); padding: 17px 0; background: var(--cf-color-surface); }.trust-inner { display: flex; justify-content: space-between; align-items: center; gap: 22px; color: var(--cf-sage-358); font-size: var(--cf-font-size-sm); }.trust-label { font-weight: var(--cf-font-weight-bold-plus); color: var(--cf-sage-450); }.trust-items { display: flex; gap: 28px; align-items: center; }.trust-items span { display: inline-flex; align-items: center; gap: 7px; font-weight: 760; }.trust-items span::before { content: "↗"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--cf-radius-sm); background: var(--cf-sage-039); color: var(--cf-mint-402); font-weight: var(--cf-font-weight-black); }
.section { padding: 96px 0; }.section-cream { background: var(--cf-stone-007); }.section-heading { max-width: 660px; margin-bottom: 38px; }.section-kicker { color: var(--cf-mint-362); text-transform: uppercase; letter-spacing: .13em; font-size: var(--cf-font-size-sm); font-weight: var(--cf-font-weight-extrabold-plus); }.section h2 { font-size: clamp(34px, 4vw, 55px); letter-spacing: -.065em; line-height: var(--cf-leading-none); margin: 14px 0 15px; }.section-heading p { color: var(--cf-color-muted); line-height: 1.62; font-size: var(--cf-font-size-3xl); margin: 0; }
.tool-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: stretch; }.tool-copy { padding: 28px 4px 28px 0; }.tool-copy h3 { margin: 12px 0 10px; font-size: 27px; letter-spacing: -.05em; line-height: 1.05; }.tool-copy p { color: var(--cf-color-muted); line-height: 1.58; font-size: var(--cf-font-size-xl); }.tool-points { display: grid; gap: 11px; margin-top: 23px; }.tool-point { display: flex; gap: 10px; align-items: start; font-size: var(--cf-font-size-lg); color: var(--cf-sage-499); }.tool-point i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; background: var(--cf-sage-046); color: var(--cf-mint-451); font-size: var(--cf-font-size-md); font-style: normal; font-weight: var(--cf-font-weight-black); }
.calculator { background: var(--cf-color-surface); border: 1px solid var(--cf-color-line); border-radius: 22px; padding: 26px; box-shadow: 0 20px 50px var(--cf-mint-668-a080); }.calc-header { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 19px; border-bottom: 1px solid var(--cf-sage-053); }.calc-title { font-weight: var(--cf-font-weight-extrabold-plus); font-size: var(--cf-font-size-3xl); color: var(--cf-color-ink); letter-spacing: -.03em; }.calc-subtitle { color: var(--cf-sage-354); font-size: var(--cf-font-size-sm); margin-top: 5px; }.calc-pill { color: var(--cf-mint-450); background: var(--cf-sage-036); border-radius: var(--cf-radius-pill); padding: 6px 9px; font-size: var(--cf-font-size-xs); font-weight: var(--cf-font-weight-extrabold); white-space: nowrap; }.calc-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 21px; }.field { display: grid; gap: 7px; }.field label { color: var(--cf-sage-411); font-size: var(--cf-font-size-sm); font-weight: var(--cf-font-weight-bold-plus); }.field input, .field select { width: 100%; border: 1px solid var(--cf-sage-082); border-radius: 10px; padding: 11px 12px; color: var(--cf-color-ink); background: var(--cf-sage-008); outline: none; font-size: var(--cf-font-size-xl); }.field input:focus, .field select:focus { border-color: var(--cf-mint-230); box-shadow: 0 0 0 3px var(--cf-mint-230-a160); }.calc-footer { display: flex; align-items: end; justify-content: space-between; border-top: 1px solid var(--cf-sage-053); margin-top: 21px; padding-top: 18px; }.calc-output-label { color: var(--cf-sage-385); font-size: var(--cf-font-size-xs); text-transform: uppercase; letter-spacing: var(--cf-tracking-caps); }.calc-output { color: var(--cf-color-ink); font-size: 31px; font-weight: 880; letter-spacing: -.07em; line-height: var(--cf-leading-none); margin-top: 7px; }.calc-output span { color: var(--cf-mint-338); font-size: var(--cf-font-size-md); letter-spacing: var(--cf-tracking-normal); font-weight: 760; }.calc-small { color: var(--cf-sage-360); font-size: var(--cf-font-size-xs); max-width: 170px; text-align: right; line-height: var(--cf-leading-snug); }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.insight-card { background: var(--cf-color-surface); border: 1px solid var(--cf-color-line); padding: 23px; border-radius: 17px; min-height: 215px; transition: transform var(--cf-duration-200) var(--cf-ease-standard), box-shadow var(--cf-duration-200) var(--cf-ease-standard); }.insight-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px var(--cf-mint-668-a080); }.card-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: var(--cf-sage-042); color: var(--cf-mint-400); margin-bottom: 25px; }.insight-card:nth-child(2) .card-icon { background: var(--cf-amber-036); color: var(--cf-amber-356); }.insight-card:nth-child(3) .card-icon { background: var(--cf-clay-053); color: var(--cf-orange-381); }.insight-card h3 { font-size: 19px; letter-spacing: var(--cf-tracking-title); margin: 0 0 9px; }.insight-card p { color: var(--cf-color-muted); font-size: var(--cf-font-size-lg); line-height: var(--cf-leading-comfortable); margin: 0; }.card-link { display: inline-flex; margin-top: 19px; color: var(--cf-mint-437); font-size: var(--cf-font-size-md); font-weight: var(--cf-font-weight-extrabold); }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }.compare-table { background: var(--cf-white-a070); border: 1px solid var(--cf-mint-078-a140); border-radius: 18px; overflow: hidden; }.compare-row { display: grid; grid-template-columns: 1.25fr .8fr .8fr; border-bottom: 1px solid var(--cf-white-a100); padding: 15px 17px; align-items: center; font-size: var(--cf-font-size-md); }.compare-row:last-child { border-bottom: 0; }.compare-row.header { color: var(--cf-sage-285); font-size: var(--cf-font-size-xs); text-transform: uppercase; letter-spacing: var(--cf-tracking-label); }.compare-row strong { color: var(--cf-color-on-ink); }.compare-row .good { color: var(--cf-color-signal); font-weight: var(--cf-font-weight-extrabold); }.compare-row .neutral { color: var(--cf-sage-151); }.compare-note { padding: 24px 6px 24px 10px; }.compare-note h3 { font-size: var(--cf-font-size-7xl); letter-spacing: -.05em; line-height: 1.06; margin: 0 0 13px; }.compare-note p { color: var(--cf-sage-224); font-size: var(--cf-font-size-xl); line-height: var(--cf-leading-relaxed); }.compare-note .button { margin-top: 10px; }
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }.story { padding: 24px 0; border-top: 1px solid var(--cf-color-line); }.story:first-child { padding-top: 0; border-top: 0; }.story-tag { color: var(--cf-mint-351); font-size: var(--cf-font-size-xs); font-weight: var(--cf-font-weight-extrabold-plus); text-transform: uppercase; letter-spacing: .12em; }.story h3 { margin: 9px 0 8px; font-size: var(--cf-font-size-5xl); letter-spacing: var(--cf-tracking-title); line-height: 1.15; }.story p { margin: 0; color: var(--cf-color-muted); font-size: var(--cf-font-size-lg); line-height: var(--cf-leading-comfortable); }.story-meta { margin-top: 13px; color: var(--cf-sage-329); font-size: var(--cf-font-size-sm); }.editorial-side { background: var(--cf-color-signal-tint); border-radius: 21px; padding: 28px; position: relative; overflow: hidden; }.editorial-side::after { content: "LATAM"; position: absolute; right: -18px; bottom: -26px; color: var(--cf-slate-728-a090); font-size: 92px; font-weight: var(--cf-font-weight-black); letter-spacing: -.1em; transform: rotate(-12deg); }.editorial-side h3 { position: relative; z-index: var(--cf-z-raised); color: var(--cf-color-ink); font-size: 30px; letter-spacing: -.065em; line-height: var(--cf-leading-none); max-width: 290px; margin: 0 0 25px; }.newsletter { position: relative; z-index: var(--cf-z-raised); display: flex; gap: 8px; margin-top: 24px; }.newsletter input { min-width: 0; flex: 1; border: 0; border-radius: 10px; padding: 12px; background: var(--cf-white-a800); color: var(--cf-color-ink); outline: none; }.newsletter button { flex: 0 0 auto; }.consent { position: relative; z-index: var(--cf-z-raised); font-size: var(--cf-font-size-xs); color: var(--cf-mint-448); margin-top: 11px; }.form-message { color: var(--cf-mint-477); font-size: var(--cf-font-size-sm); margin-top: 10px; font-weight: var(--cf-font-weight-bold); }
.footer { background: var(--cf-slate-760); color: var(--cf-color-on-ink); padding: 33px 0; }.footer p { color: var(--cf-sage-285); font-size: var(--cf-font-size-sm); margin: 5px 0 0; }
.back-link { color: var(--cf-sage-425); font-size: var(--cf-font-size-md); font-weight: var(--cf-font-weight-bold-plus); }
.back-link:hover { color: var(--cf-color-ink); }
.content-hero { padding: 80px 0 58px; background: radial-gradient(circle at 78% 0%, var(--cf-mint-187-a300), transparent 27%), linear-gradient(180deg, var(--cf-sage-031) 0%, var(--cf-sage-016) 100%); }
.content-hero .back-link { display: inline-block; margin-bottom: 42px; }.content-kicker { color: var(--cf-mint-392); font-size: var(--cf-font-size-sm); font-weight: var(--cf-font-weight-extrabold-plus); letter-spacing: .13em; text-transform: uppercase; }.content-hero h1 { font-size: clamp(45px, 6vw, 76px); max-width: 850px; margin: 18px 0; }.content-hero p { max-width: 630px; color: var(--cf-sage-462); font-size: var(--cf-font-size-4xl); line-height: 1.58; margin: 0; }.content-meta { display: flex; flex-wrap: wrap; gap: 22px; color: var(--cf-sage-395); font-size: var(--cf-font-size-sm); margin-top: 26px; }.content-meta span { display: inline-flex; align-items: center; gap: 7px; }.metric { padding: 25px 22px 25px 0; margin-right: 22px; border-right: 1px solid var(--cf-color-line); }.metric:last-child { border-right: 0; }.metric strong { display: block; color: var(--cf-color-ink); font-size: 29px; letter-spacing: -.07em; }.metric span { display: block; color: var(--cf-sage-385); font-size: var(--cf-font-size-sm); line-height: var(--cf-leading-snug); margin-top: 5px; }
.article-shell { padding: 78px 0 100px; background: var(--cf-stone-006); }.article-grid { width: min(960px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 680px) 210px; gap: 70px; align-items: start; }.article-body { color: var(--cf-sage-497); font-size: var(--cf-font-size-3xl); line-height: 1.72; }.article-body h2 { color: var(--cf-color-ink); font-size: 34px; line-height: var(--cf-leading-heading); letter-spacing: -.06em; margin: 48px 0 16px; }.article-body p { margin: 0 0 18px; }.article-body strong { color: var(--cf-color-ink); }.lead-paragraph { color: var(--cf-slate-629); font-size: 22px; line-height: var(--cf-leading-compact); letter-spacing: var(--cf-tracking-snug); }.article-aside { position: sticky; top: 105px; display: grid; gap: 16px; }.aside-card { display: grid; gap: 12px; padding: 17px; border: 1px solid var(--cf-color-line); border-radius: 14px; background: var(--cf-color-surface); }.aside-card a { color: var(--cf-sage-436); font-size: var(--cf-font-size-sm); font-weight: 760; }.aside-card a:hover { color: var(--cf-color-ink); }.aside-mint { background: var(--cf-color-signal-tint); border: 0; color: var(--cf-color-ink); }.aside-mint strong { font-size: var(--cf-font-size-2xl); line-height: 1.2; }.aside-mint p { color: var(--cf-mint-478); font-size: var(--cf-font-size-md); line-height: var(--cf-leading-compact); margin: 0; }.aside-mint a { display: inline-flex; gap: 6px; align-items: center; color: var(--cf-mint-574); }.full-compare { border: 1px solid var(--cf-color-line); border-radius: 14px; overflow: hidden; margin: 25px 0; background: var(--cf-color-surface); }.full-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 13px; padding: 14px 15px; border-bottom: 1px solid var(--cf-sage-047); font-size: var(--cf-font-size-md); line-height: var(--cf-leading-snug); }.full-row:last-child { border-bottom: 0; }.full-row.head { color: var(--cf-sage-376); font-size: var(--cf-font-size-xs); text-transform: uppercase; letter-spacing: var(--cf-tracking-label); }.full-row strong { color: var(--cf-color-ink); }.question-list { display: grid; gap: 11px; margin: 25px 0; }.question-list div { display: flex; gap: 10px; align-items: start; padding: 13px 15px; border-radius: 10px; background: var(--cf-sage-030); color: var(--cf-mint-513); font-size: var(--cf-font-size-lg); }.question-list svg { flex: 0 0 auto; color: var(--cf-mint-348); margin-top: 2px; }.article-callout { margin: 28px 0; padding: 22px; border-radius: 14px; background: var(--cf-color-ink); color: var(--cf-sage-189); }.article-callout strong { color: var(--cf-color-signal); font-size: var(--cf-font-size-md); text-transform: uppercase; letter-spacing: var(--cf-tracking-caps); }.article-callout p { margin: 9px 0 0; }.signal-list { display: grid; gap: 22px; margin: 26px 0; }.signal-list > div { display: flex; gap: 14px; }.signal-list svg { color: var(--cf-mint-336); flex: 0 0 auto; margin-top: 4px; }.signal-list strong { display: block; font-size: var(--cf-font-size-4xl); }.signal-list p { font-size: var(--cf-font-size-xl); margin-top: 4px; }.step-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 25px 0; }.step-grid > div { padding: 17px; border: 1px solid var(--cf-color-line); border-radius: var(--cf-radius-lg); background: var(--cf-color-surface); }.step-grid span { display: block; color: var(--cf-mint-325); font-size: var(--cf-font-size-sm); font-weight: var(--cf-font-weight-black); }.step-grid strong { display: block; color: var(--cf-color-ink); margin: 10px 0 5px; }.step-grid p { font-size: var(--cf-font-size-md); line-height: 1.4; }.inline-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cf-mint-422); font-weight: var(--cf-font-weight-extrabold); }.narrow { max-width: 800px; }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; gap: 35px; }.article-aside { position: static; grid-template-columns: 1fr 1fr; }.metric:nth-child(2) { border-right: 0; }.metric { margin-right: 15px; }.metric:nth-child(n+3) { border-top: 1px solid var(--cf-color-line); } }
@media (max-width: 560px) { .content-hero { padding: 58px 0 45px; }.content-hero .back-link { margin-bottom: 30px; }.content-hero p { font-size: var(--cf-font-size-3xl); }.metric { padding-right: 8px; margin-right: 8px; }.metric strong { font-size: 23px; }.article-grid { width: min(100% - 32px, 960px); }.article-body h2 { font-size: 29px; }.article-aside, .step-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {.hero-grid, .tool-layout, .comparison, .editorial { grid-template-columns: 1fr; gap: 30px; }.hero { padding-top: 55px; }.signal-card { max-width: 650px; transform: none; }.tool-copy { padding: 0; }.cards-grid { grid-template-columns: 1fr; }.trust-inner { align-items: start; flex-direction: column; }.trust-items { flex-wrap: wrap; gap: 14px 24px; } }
@media (max-width: 560px) { .container { width: min(100% - 32px, 1160px); }.nav { height: 66px; } h1 { font-size: 51px; }.hero-copy { font-size: var(--cf-font-size-3xl); }.hero-actions .button { width: 100%; }.section { padding: 68px 0; }.calc-fields { grid-template-columns: 1fr; }.calculator { padding: 18px; }.calc-footer { align-items: start; gap: 16px; flex-direction: column; }.calc-small { text-align: left; }.newsletter { flex-direction: column; }.newsletter button { width: 100%; } }

/* Research system */.trend-head, .g2-score-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Scorecards and article visuals */
.g2-score-card { flex: 1; padding: 21px; border: 1px solid var(--cf-color-line); border-radius: var(--cf-radius-xl); background: var(--cf-color-surface); }.g2-score-top { color: var(--cf-sage-392); font-size: var(--cf-font-size-xs); letter-spacing: .12em; font-weight: var(--cf-font-weight-extrabold-plus); }.g2-score-top svg { color: var(--cf-mint-348); }.g2-badge { color: var(--cf-mint-382); }.g2-score-number { color: var(--cf-color-ink); font-size: 43px; line-height: var(--cf-leading-none); font-weight: var(--cf-font-weight-black); letter-spacing: -.08em; margin-top: 28px; }.g2-score-number span { color: var(--cf-sage-286); font-size: var(--cf-font-size-xl); letter-spacing: var(--cf-tracking-normal); margin-left: 4px; }.g2-stars { display: flex; gap: 3px; color: var(--cf-amber-174); margin: 10px 0 20px; }.g2-score-card strong { display: block; color: var(--cf-color-ink); font-size: 17px; }.g2-score-card p { color: var(--cf-sage-439); font-size: var(--cf-font-size-md); line-height: 1.4; min-height: 35px; margin: 5px 0 12px; }.g2-score-card small { color: var(--cf-sage-286); font-size: var(--cf-font-size-xs); }.score-bars { display: grid; gap: 16px; }.score-bar-row { display: grid; gap: 7px; }.score-bar-label { display: flex; justify-content: space-between; gap: 15px; color: var(--cf-sage-431); font-size: var(--cf-font-size-sm); }.score-bar-label strong { color: var(--cf-color-ink); }.score-track { height: 7px; background: var(--cf-sage-047); border-radius: var(--cf-radius-pill); overflow: hidden; }.score-track span { display: block; height: 100%; border-radius: var(--cf-radius-pill); background: var(--cf-color-signal); }.score-bars-orange .score-track span { background: var(--cf-color-accent-orange); }.score-bars-blue .score-track span { background: var(--cf-teal-246); }.score-bar-row small { color: var(--cf-sage-295); font-size: var(--cf-font-size-xs); line-height: 1.3; }.matrix { overflow: hidden; border: 1px solid var(--cf-color-line); border-radius: 15px; background: var(--cf-color-surface); }.matrix-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--cf-sage-047); color: var(--cf-sage-411); font-size: var(--cf-font-size-sm); }.matrix-row:last-child { border-bottom: 0; }.matrix-row strong { color: var(--cf-color-ink); }.matrix-head { color: var(--cf-sage-357); text-transform: uppercase; letter-spacing: .09em; font-size: var(--cf-font-size-2xs); font-weight: var(--cf-font-weight-extrabold); }.matrix-row > span:not(:first-child) { display: grid; grid-template-columns: 1fr; gap: 5px; }.matrix-meter { display: block; height: 5px; border-radius: var(--cf-radius-pill); background: var(--cf-sage-059); overflow: hidden; }.matrix-meter b { display: block; height: 100%; background: var(--cf-color-accent-orange); border-radius: inherit; }.matrix-meter-blue b { background: var(--cf-teal-246); }.chart-footnote { color: var(--cf-sage-286); font-size: var(--cf-font-size-xs); line-height: 1.4; margin-top: 12px; }.article-chart-card { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: center; padding: 20px; margin: 28px 0; border: 1px solid var(--cf-color-line); border-radius: 15px; background: var(--cf-color-surface); }.mini-trend { min-width: 0; }.trend-head { color: var(--cf-sage-411); font-size: var(--cf-font-size-xs); text-transform: uppercase; letter-spacing: var(--cf-tracking-label); }.trend-head strong { color: var(--cf-mint-396); font-size: 23px; letter-spacing: -.05em; }.mini-trend svg { display: block; width: 100%; height: 125px; margin-top: 11px; overflow: visible; }.mini-trend polyline { fill: none; stroke: var(--cf-mint-336); stroke-width: 2.2; vector-effect: non-scaling-stroke; }.mini-trend .trend-area { fill: var(--cf-mint-336-a120); }.trend-labels { display: flex; justify-content: space-between; color: var(--cf-sage-271); font-size: var(--cf-font-size-2xs); }.chart-annotation { padding: 16px; border-left: 3px solid var(--cf-color-accent-orange); background: var(--cf-stone-021); }.chart-annotation strong { color: var(--cf-orange-401); font-size: var(--cf-font-size-xs); text-transform: uppercase; letter-spacing: var(--cf-tracking-caps); }.chart-annotation p { color: var(--cf-sage-404); font-size: var(--cf-font-size-md); line-height: 1.48; margin: 7px 0 0; }.layer-diagram { padding: 18px; margin: 25px 0; border-radius: 15px; background: var(--cf-color-ink); }.layer-row { display: grid; grid-template-columns: 125px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--cf-white-a120); }.layer-row span { color: var(--cf-sage-287); font-size: var(--cf-font-size-xs); text-transform: uppercase; letter-spacing: var(--cf-tracking-caps); }.layer-row strong { color: var(--cf-color-on-ink); font-size: var(--cf-font-size-xl); }.layer-row:nth-child(1) strong { color: var(--cf-color-signal); }.layer-row:nth-child(2) strong { color: var(--cf-color-accent-yellow); }.layer-row:nth-child(3) strong { color: var(--cf-color-accent-orange); }.layer-caption { display: flex; align-items: center; gap: 7px; color: var(--cf-sage-231); font-size: var(--cf-font-size-sm); padding-top: 15px; }.tco-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 25px 0; }.tco-grid > div { padding: 17px; border: 1px solid var(--cf-color-line); border-radius: 13px; background: var(--cf-color-surface); }.tco-grid span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--cf-mint-365); background: var(--cf-sage-040); border-radius: var(--cf-radius-md); }.tco-grid strong { display: block; color: var(--cf-color-ink); font-size: var(--cf-font-size-2xl); margin: 14px 0 5px; }.tco-grid p { color: var(--cf-sage-411); font-size: var(--cf-font-size-md); line-height: var(--cf-leading-compact); margin: 0; }

@media (max-width: 900px) {.article-chart-card { grid-template-columns: 1fr; } }
@media (max-width: 560px) {.g2-score-card { padding: 17px; }.tco-grid { grid-template-columns: 1fr; }.matrix-row { grid-template-columns: 1fr 1fr; gap: 10px; }.matrix-row strong { grid-column: 1 / -1; }.matrix-head strong { grid-column: auto; }.matrix-head { grid-template-columns: 1fr 1fr 1fr; }.matrix-head span:first-child { grid-column: 1 / -1; }.layer-row { grid-template-columns: 1fr; gap: 6px; } }

/* Shared platform chrome */.site-header .brand { color: var(--cf-color-ink); }

/* Codifly leaderboard */.rank { color: var(--cf-sage-276); font-size: var(--cf-font-size-md); font-weight: var(--cf-font-weight-extrabold); }.product-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--cf-color-on-ink); background: var(--cf-color-ink); font-size: var(--cf-font-size-sm); font-style: normal; font-weight: var(--cf-font-weight-black); }.product-mark.blue { background: var(--cf-teal-344); }.product-mark.green { background: var(--cf-mint-363); }.product-mark.yellow { color: var(--cf-amber-592); background: var(--cf-amber-168); }.product-mark.orange { background: var(--cf-orange-306); }.confidence { width: fit-content; padding: 5px 7px; border-radius: 5px; font-size: var(--cf-font-size-2xs); font-weight: var(--cf-font-weight-extrabold); }.confidence.high { color: var(--cf-mint-421); background: var(--cf-sage-048); }.confidence.medium { color: var(--cf-amber-381); background: var(--cf-amber-036); }.confidence.pending { color: var(--cf-orange-437); background: var(--cf-clay-046); }
@media (max-width: 560px) {.product-mark { width: 29px; height: 29px; border-radius: var(--cf-radius-md); font-size: var(--cf-font-size-2xs); } }

/* Codifly Design System v2 — editorial product UI */
body { background: var(--cf-color-paper); color: var(--cf-color-ink); font-family: var(--cf-font-sans); -webkit-font-smoothing: antialiased; }
::selection { color: var(--cf-color-on-ink); background: var(--cf-color-signal); }
.container { width: min(1200px, calc(100% - 48px)); }
.shell { overflow: clip; }
.nav { height: 68px; gap: 24px; }
.brand { gap: 10px; color: var(--cf-color-ink); font-size: var(--cf-font-size-xl); font-weight: 730; letter-spacing: var(--cf-tracking-snug); }
.codifly-logo { display: block; width: 128px; height: 32px; object-fit: contain; }
.button { border-radius: var(--cf-radius-button); padding: 11px 15px; font-size: var(--cf-font-size-md); font-weight: 680; transition: transform var(--cf-duration-160) var(--cf-ease-standard), border-color var(--cf-duration-160) var(--cf-ease-standard), background var(--cf-duration-160) var(--cf-ease-standard); }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--cf-color-ink); box-shadow: none; }
.button-primary:hover { background: var(--cf-zinc-689); box-shadow: none; }
.button-ghost { color: var(--cf-color-ink); background: var(--cf-color-surface); border: 1px solid var(--cf-color-line); }
.button-lime { color: var(--cf-color-on-ink); background: var(--cf-color-signal); }

.hero, .content-hero { background-color: var(--cf-color-paper); background-image: linear-gradient(var(--cf-zinc-790-a035) 1px, transparent 1px), linear-gradient(90deg, var(--cf-zinc-790-a035) 1px, transparent 1px); background-size: 48px 48px; border-bottom: 1px solid var(--cf-color-line); }
.hero { padding: 86px 0 54px; }
.hero::before { display: none; }
.eyebrow, .section-kicker, .content-kicker { color: var(--cf-zinc-487); font-size: var(--cf-font-size-xs); font-weight: var(--cf-font-weight-bold); letter-spacing: var(--cf-tracking-caps); }
.eyebrow-dot { width: 6px; height: 6px; background: var(--cf-color-signal); box-shadow: none; }
h1, .hero h1, .content-hero h1 { color: var(--cf-color-ink); font-size: clamp(45px, 6vw, 76px); line-height: .99; letter-spacing: var(--cf-tracking-display); }
.hero-copy, .content-hero p { color: var(--cf-color-ink-3); line-height: 1.58; }
.highlight { background: none; color: var(--cf-color-signal); }
.signal-card { transform: none; border: 1px solid var(--cf-stone-147); border-radius: var(--cf-radius-xl); box-shadow: 0 14px 35px var(--cf-zinc-790-a080); }
.terminal { background: var(--cf-zinc-755); border-radius: 11px; }
.terminal-result { font-variant-numeric: tabular-nums; }
.source-row { color: var(--cf-zinc-428); }

.section { padding: 88px 0; }
.section-cream, .article-shell { background: var(--cf-gray-015); }
.footer { background: var(--cf-color-ink); }
.section h2 { letter-spacing: var(--cf-tracking-heading); }
.cards-grid { gap: 12px; }
.insight-card, .calculator, .g2-score-card, .aside-card, .tco-grid > div { border-color: var(--cf-color-line); border-radius: var(--cf-radius-lg); box-shadow: none; }
.insight-card:hover { transform: translateY(-2px); box-shadow: var(--cf-shadow-raised); }
.card-icon, .tco-grid span { color: var(--cf-color-signal); background: var(--cf-color-signal-soft); border-radius: var(--cf-radius-md); }
.inline-link, .card-link { color: var(--cf-color-signal); }
.editorial-side { color: var(--cf-color-ink); background: var(--cf-color-signal-tint); border: 1px solid var(--cf-cobalt-101); border-radius: 14px; }
.editorial-side::after { display: none; }
.newsletter input { border: 1px solid var(--cf-zinc-117); border-radius: var(--cf-radius-md); background: var(--cf-color-surface); }

.content-hero { padding-top: 68px; }
.content-hero .back-link { margin-bottom: 34px; }
.article-body, .article-body p { color: var(--cf-zinc-559); }
.article-body h2 { color: var(--cf-color-ink); letter-spacing: var(--cf-tracking-title); }
.lead-paragraph { color: var(--cf-zinc-665); }
.article-callout, .layer-diagram { background: var(--cf-zinc-755); border-radius: var(--cf-radius-lg); }
.question-list div { color: var(--cf-cobalt-519); background: var(--cf-color-signal-soft); }
.question-list svg { color: var(--cf-color-signal); }
.matrix-meter b, .mini-trend polyline, .score-track span { background: var(--cf-color-signal); stroke: var(--cf-color-signal); }
.rank { font-variant-numeric: tabular-nums; }
.product-mark { border-radius: var(--cf-radius-md); background: var(--cf-color-ink); }
.product-mark.blue { background: var(--cf-color-signal); }.product-mark.green { background: var(--cf-mint-449); }.product-mark.yellow { color: var(--cf-stone-754); background: var(--cf-amber-231); }.product-mark.orange { background: var(--cf-orange-398); }
.confidence { border-radius: 5px; font-style: normal; }
.confidence.high { color: var(--cf-mint-479); background: var(--cf-sage-049); }
.confidence.medium { color: var(--cf-amber-475); background: var(--cf-stone-040); }
.confidence.pending { color: var(--cf-red-485); background: var(--cf-clay-051); }

@media (max-width: 900px) {
  .container { width: min(100% - 36px, 1200px); }
}

@media (max-width: 560px) {
  .container { width: min(100% - 32px, 1200px); }
  .nav { height: 62px; }
  .hero, .content-hero { background-size: 36px 36px; }
  h1, .hero h1, .content-hero h1 { font-size: 46px; letter-spacing: -.05em; }
  .section { padding: 68px 0; }
}

/* Industries intelligence directory */

/* Discovery home — marketplace-style topic exploration */
.topic-explorer { display: grid; gap: 24px; }

/* Deep analysis — benchmark-first editorial surface */

/* src/app/home.css */
/* Home page, premium direction (src/components/home/): deep-violet hero with the product as the
 * image, then paper and deep sections. Only --cf-ui-* tokens; deep sections look the same in
 * both themes, paper sections follow the light/dark theme. */

.hv { background: var(--cf-ui-bg); min-height: 100vh; }
.hv h1,
.hv h2,
.hv h3 { margin: 0; color: var(--cf-ui-fg); text-wrap: balance; }
.hv p { margin: 0; }

.hv-kicker { display: inline-block; color: var(--cf-ui-brand-text); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.hv-kicker-deep { color: var(--cf-ui-deep-accent); }
.hv-h2 { font: 700 clamp(36px, 5.2vw, 68px) / 1 var(--cf-ui-font-display); letter-spacing: -0.042em; }
.hv-h3 { font: 650 var(--cf-ui-text-xl) / 1.15 var(--cf-ui-font-display); letter-spacing: -0.018em; }
.hv-display { font: 700 clamp(42px, 7vw, 96px) / 0.98 var(--cf-ui-font-display); letter-spacing: -0.045em; }

/* Pill buttons */
.hv-pill { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding-inline: 22px; border-radius: var(--cf-ui-radius-pill); font: 600 var(--cf-ui-text-base) / 1 var(--cf-ui-font-sans); text-decoration: none; transition: transform var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease); }
.hv-pill:hover { transform: translateY(-1px); }
.hv-pill:focus-visible { outline: 2px solid var(--cf-ui-deep-accent); outline-offset: 3px; }
.hv-pill-light { background: var(--cf-ui-deep-title); color: var(--cf-ui-pill-fg); box-shadow: 0 8px 24px -8px var(--cf-ui-deep-shade); }
.hv-pill-ghost { background: var(--cf-ui-deep-glass); color: var(--cf-ui-on-deep); box-shadow: inset 0 0 0 1px var(--cf-ui-deep-edge); }
.hv-pill-dark { background: var(--cf-ui-inverse); color: var(--cf-ui-inverse-fg); box-shadow: var(--cf-ui-shadow-lg); }
.hv-pill-dark:focus-visible { outline-color: var(--cf-ui-ring); }

/* ---- Hero (deep, under the glass header) ----------------------------------------- */
.hv-hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(var(--cf-ui-header) * -1 - 1px);
  padding-top: var(--cf-ui-header);
  background: radial-gradient(120% 90% at 50% -10%, var(--cf-ui-deep-glow) 0%, var(--cf-ui-deep-2) 42%, var(--cf-ui-deep) 78%);
  color: var(--cf-ui-on-deep);
}
.hv-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 35% at 78% 38%, var(--cf-ui-glow-data), transparent 70%), radial-gradient(35% 30% at 15% 70%, var(--cf-ui-glow-violet), transparent 70%); pointer-events: none; }
.hv-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: clamp(56px, 9vw, 104px); text-align: center; }
.hv .hv-h1 {
  max-width: 13ch;
  margin-top: 26px;
  font: 700 clamp(44px, 7.4vw, 108px) / 0.98 var(--cf-ui-font-display);
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, var(--cf-ui-deep-title) 30%, var(--cf-ui-deep-title-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hv-lede { max-width: 50ch; margin: 26px 0 32px !important; color: var(--cf-ui-on-deep-2); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; }
.hv-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.hv-search {
  display: flex;
  align-items: center;
  gap: var(--cf-ui-space-3);
  width: min(560px, 100%);
  height: 52px;
  margin-top: 28px;
  padding: 0 6px 0 18px;
  border: 0;
  border-radius: var(--cf-ui-radius-pill);
  background: var(--cf-ui-deep-glass);
  box-shadow: inset 0 0 0 1px var(--cf-ui-deep-line);
  color: var(--cf-ui-on-deep-2);
  font: 400 var(--cf-ui-text-base) / 1.3 var(--cf-ui-font-sans);
  text-align: left;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease);
}
.hv-search:hover { background: var(--cf-ui-deep-glass-2); box-shadow: inset 0 0 0 1px var(--cf-ui-deep-edge); }
.hv-search:focus-visible { outline: 2px solid var(--cf-ui-deep-accent); outline-offset: 3px; }
.hv-search > svg { width: 18px; height: 18px; flex: none; color: var(--cf-ui-on-deep-3); }
.hv-search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-search-kbd { padding: 4px 7px; border-radius: 6px; background: var(--cf-ui-deep-glass); color: var(--cf-ui-on-deep-2); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }
.hv-search-cta { display: inline-flex; align-items: center; height: 40px; padding-inline: 16px; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-on-deep); color: var(--cf-ui-pill-fg); font-weight: 600; font-size: var(--cf-ui-text-sm); }

/* Product shot */
.hv-stage { position: relative; width: min(1080px, 100%); margin-top: clamp(48px, 7vw, 76px); perspective: 1600px; }
.hv-device {
  position: relative;
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 10px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, var(--cf-ui-deep-glass-2), var(--cf-ui-deep-glass));
  box-shadow: var(--cf-ui-shadow-device);
  transform: rotateX(14deg) translateY(10px);
  transform-origin: 50% 0;
  transition: transform 1.2s var(--cf-ui-ease);
}
.hv-device.is-in { transform: none; }
.hv-screen { overflow: hidden; border-radius: 14px 14px 0 0; background: var(--cf-ui-bg); color: var(--cf-ui-fg); text-align: left; }
.hv-screen-bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface); }
.hv-screen-bar i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--cf-ui-border-strong); }
.hv-screen-bar span { margin-left: 10px; padding: 6px 12px; overflow: hidden; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); white-space: nowrap; text-overflow: ellipsis; }
.hv-screen-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.hv-screen-main { min-width: 0; overflow: hidden; padding: 20px 22px; border-right: 1px solid var(--cf-ui-border); }
.hv-screen-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.hv-screen-head .hv-value { font: 650 var(--cf-ui-text-md) / 1.2 var(--cf-ui-font-display); letter-spacing: -0.018em; }
.hv-screen-head span:not(.hv-value) { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.hv-shot-table { width: 100%; border-collapse: collapse; font-size: var(--cf-ui-text-sm); }
.hv-shot-table th { padding: 8px 6px; border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: 0.08em; text-align: left; text-transform: uppercase; }
.hv-shot-table td { padding: 9px 6px; border-bottom: 1px solid var(--cf-ui-border); white-space: nowrap; }
.hv-shot-table tr:last-child td { border-bottom: 0; }
.hv-shot-table th.hv-num { text-align: right; }
.hv-shot-table .ui-provider { margin-right: 10px; vertical-align: middle; }
.hv-screen-side { display: grid; align-content: start; gap: 16px; padding: 20px 22px; background: var(--cf-ui-surface); }
.hv-kpi { display: grid; gap: 4px; }
.hv-kpi > span:first-child,
.hv-kpi small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.hv-kpi-value { color: var(--cf-ui-data); font: 500 34px / 1.05 var(--cf-ui-font-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hv-mini { display: grid; gap: 8px; }
.hv-mini div { display: grid; grid-template-columns: 96px minmax(0, 1fr) 66px; gap: 8px; align-items: center; font-size: var(--cf-ui-text-xs); }
.hv-mini span:not(.hv-value) { overflow: hidden; color: var(--cf-ui-fg-2); white-space: nowrap; text-overflow: ellipsis; }
.hv-mini em { display: block; height: 7px; border-radius: 4px; background: var(--cf-ui-border-strong); }
.hv-mini em.is-best { background: linear-gradient(90deg, var(--cf-ui-data-deep), var(--cf-ui-data-bright)); }
.hv-mini .hv-value { font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); text-align: right; }

.hv-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--cf-ui-deep-panel), var(--cf-ui-deep-panel-2));
  box-shadow: var(--cf-ui-shadow-float);
  color: var(--cf-ui-on-deep);
  font-size: var(--cf-ui-text-sm);
  text-align: left;
  will-change: transform;
  animation: hv-drift 7s var(--cf-ui-ease) infinite alternate;
}
.hv-float .hv-value { display: block; font: 500 var(--cf-ui-text-md) / 1.1 var(--cf-ui-font-mono); }
.hv-float small { display: block; color: var(--cf-ui-on-deep-3); font-size: var(--cf-ui-text-2xs); }
.hv-f1 { left: -2%; top: 24%; }
.hv-f2 { right: -1%; top: 6%; animation-delay: -2.5s; }
.hv-f3 { right: 3%; bottom: 20%; animation-delay: -4.5s; }
@keyframes hv-drift { from { transform: translateY(0); } to { transform: translateY(-14px); } }

/* ---- Proof strip ------------------------------------------------------------------ */
.hv-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--cf-ui-border); }
.hv-proof div { padding: 34px 24px; border-right: 1px solid var(--cf-ui-border); }
.hv-proof div:last-child { border-right: 0; }
.hv-proof .hv-value { display: block; color: var(--cf-ui-fg); font: 600 clamp(34px, 4.4vw, 54px) / 1 var(--cf-ui-font-display); letter-spacing: -0.038em; font-variant-numeric: tabular-nums; }
.hv-proof div > span:not(.hv-value) { display: block; margin-top: 10px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }

/* ---- Sections --------------------------------------------------------------------- */
.hv-section { padding-block: clamp(56px, 8vw, 104px) 0; }
.hv-last { padding-bottom: var(--cf-ui-space-16); }
.hv-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: var(--cf-ui-space-8); }
.hv-head > p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-lg); line-height: 1.5; }
.hv-head-row { display: flex; justify-content: space-between; align-items: end; gap: var(--cf-ui-space-4); max-width: none; flex-wrap: wrap; }
.hv-head-row > div { display: grid; gap: 14px; }
.hv-underline { display: inline-flex; align-items: center; min-height: 24px; color: var(--cf-ui-fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cf-ui-border-strong); text-underline-offset: 5px; }
.hv-underline:hover { text-decoration-color: var(--cf-ui-fg); }

/* ---- Categories -------------------------------------------------------------- */
.hv-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--cf-ui-space-3); }
.hv-cat {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--cf-ui-space-3);
  padding: var(--cf-ui-space-5);
  border: 1px solid var(--cf-ui-border);
  border-radius: var(--cf-ui-radius-lg);
  background: var(--cf-ui-surface);
  transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease), transform var(--cf-ui-duration) var(--cf-ui-ease);
}
.hv-cat:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); transform: translateY(-1px); }
.hv-cat:focus-within { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.hv-cat-top { display: flex; justify-content: space-between; align-items: center; }
.hv-cat-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-2); }
.hv-cat-icon svg { width: 18px; height: 18px; }
.hv-cat h3 { font: 600 var(--cf-ui-text-lg) / 1.25 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.hv-cat p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.hv-stretch { color: inherit; text-decoration: none; }
.hv-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hv-stretch:focus-visible { outline: none; }
.hv-cat-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cf-ui-space-3); padding-top: var(--cf-ui-space-3); border-top: 1px solid var(--cf-ui-border); }
.hv-from { display: inline-flex; align-items: baseline; gap: 6px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.hv-from .hv-value { color: var(--cf-ui-data); font-size: var(--cf-ui-text-md); font-weight: 600; }
.hv-from small { font-size: var(--cf-ui-text-2xs); }
.hv-cat-links { position: relative; z-index: 1; }
.hv-cat-links a { display: inline-flex; align-items: center; gap: 3px; min-height: 24px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: none; }
.hv-cat-links a:hover { color: var(--cf-ui-fg); }
.hv-cat-links svg { width: 14px; height: 14px; }

/* ---- Panels (ranking + guides) ------------------------------------------------ */
.hv-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--cf-ui-space-4); align-items: start; }
.hv-panel { display: grid; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); overflow: hidden; }
.hv-panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-4) var(--cf-ui-space-5); border-bottom: 1px solid var(--cf-ui-border); }
.hv-panel-head h2 { font: 650 var(--cf-ui-text-lg) / 1.2 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.hv-panel-head p { margin-top: 2px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.hv-panel-body { display: grid; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-3) var(--cf-ui-space-5) 0; }
.hv-panel-foot { padding: var(--cf-ui-space-3) var(--cf-ui-space-5); border-top: 1px solid var(--cf-ui-border); }
.hv-panel-foot a { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: none; }
.hv-panel-foot a:hover { color: var(--cf-ui-fg); }
.hv-panel-foot svg { width: 14px; height: 14px; }

.hv-table-wrap { overflow-x: auto; margin-inline: calc(var(--cf-ui-space-5) * -1); }
.hv-table { width: 100%; border-collapse: collapse; font-size: var(--cf-ui-text-sm); }
.hv-table th { padding: 9px var(--cf-ui-space-3); border-block: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.hv-table td { padding: 10px var(--cf-ui-space-3); border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-2); white-space: nowrap; }
.hv-table tbody tr:last-child td { border-bottom: 0; }
.hv-table tbody tr:hover { background: var(--cf-ui-surface-2); }
.hv-table th:first-child,
.hv-table td:first-child { padding-left: var(--cf-ui-space-5); }
.hv-table th:last-child,
.hv-table td:last-child { padding-right: var(--cf-ui-space-5); }
.hv-rank { width: 32px; color: var(--cf-ui-fg-muted); font-family: var(--cf-ui-font-mono); }
.hv-num { text-align: right; }
.hv-table th.hv-num { text-align: right; }
.hv-model { display: flex; align-items: center; gap: 10px; color: var(--cf-ui-fg); text-decoration: none; }
.hv-model:hover .hv-value { text-decoration: underline; text-underline-offset: 3px; }
.hv-model .hv-value { display: block; font-weight: 600; }
.hv-model small { display: block; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }
.hv-bar-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--cf-ui-space-2); }
.hv-bar { width: 72px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--cf-ui-bg-subtle); }
.hv-bar i { display: block; height: 100%; border-radius: 3px; background: var(--cf-ui-data); }

.hv-guides { display: grid; margin: 0; padding: 0; list-style: none; }
.hv-guides a { display: grid; gap: 3px; padding: var(--cf-ui-space-3) var(--cf-ui-space-5); border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg); text-decoration: none; }
.hv-guides li:last-child a { border-bottom: 0; }
.hv-guides a:hover { background: var(--cf-ui-surface-2); }
.hv-guides a:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: -2px; }
.hv-guides .hv-value { font-size: var(--cf-ui-text-base); font-weight: 600; line-height: 1.35; }
.hv-guide-topic { color: var(--cf-ui-brand-text); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.hv-guide-meta { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }

/* ---- Feature: one comparison, Apple-sized ------------------------------------------ */
.hv-feature { padding-block: clamp(80px, 12vw, 150px) 0; text-align: center; }
.hv-feature .hv-display { max-width: 14ch; margin: 22px auto; }
.hv-feature .hv-display span { color: var(--cf-ui-fg-faint); }
.hv-feature-lead { max-width: 52ch; margin: 0 auto !important; color: var(--cf-ui-fg-muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.hv-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; margin: clamp(40px, 6vw, 70px) auto 0; text-align: left; }
.hv-vs { padding: 30px; border-radius: 26px; background: var(--cf-ui-surface); box-shadow: 0 0 0 1px var(--cf-ui-border), var(--cf-ui-shadow-xl); }
.hv-vs-top { display: flex; align-items: center; gap: 12px; }
.hv-vs-top .ui-provider { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
.hv-vs-top .hv-value { display: block; color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-xl) / 1.1 var(--cf-ui-font-display); letter-spacing: -0.018em; }
.hv-vs-top small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.hv-vs dl { display: grid; margin: 26px 0 0; }
.hv-vs dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 1px solid var(--cf-ui-border); }
.hv-vs dt { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.hv-vs dd { margin: 0; color: var(--cf-ui-fg); font: 500 var(--cf-ui-text-lg) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.hv-vs dd small { margin-left: 4px; color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans); }
.hv-vs dd.is-win { color: var(--cf-ui-data); }
.hv-feature-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 32px; }
.hv-feature-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--cf-ui-brand-text); font-weight: 600; text-decoration: none; }
.hv-feature-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hv-feature-links svg { width: 16px; height: 16px; }

/* ---- Developers (deep) --------------------------------------------------------------- */
.hv-dev { position: relative; overflow: hidden; margin-top: clamp(80px, 12vw, 140px); padding-block: clamp(80px, 11vw, 130px); background: var(--cf-ui-deep); color: var(--cf-ui-on-deep); }
.hv-dev::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 85% 10%, var(--cf-ui-glow-deep), transparent 70%); pointer-events: none; }
.hv-dev-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.hv .hv-dev h2 { margin: 20px 0; color: var(--cf-ui-on-deep); }
.hv-dev-lead { max-width: 44ch; margin-bottom: 28px !important; color: var(--cf-ui-on-deep-2); font-size: var(--cf-ui-text-lg); line-height: 1.55; }
.hv-keys { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0; padding: 0; list-style: none; }
.hv-keys li { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-ui-on-deep-2); font-size: var(--cf-ui-text-sm); }
.hv-keys kbd { padding: 6px 9px; border-radius: 7px; background: linear-gradient(180deg, var(--cf-ui-deep-glass-2), var(--cf-ui-deep-glass)); box-shadow: var(--cf-ui-shadow-key); color: var(--cf-ui-on-deep); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); }
.hv-dev-stack { display: grid; gap: 18px; min-width: 0; }
.hv-palette { overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, var(--cf-ui-deep-panel), var(--cf-ui-deep-panel-2)); box-shadow: var(--cf-ui-shadow-deep), inset 0 0 0 1px var(--cf-ui-deep-line); }
.hv-palette-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--cf-ui-deep-line); font-size: 17px; }
.hv-palette-input svg { width: 18px; height: 18px; flex: none; color: var(--cf-ui-on-deep-3); }
.hv-caret { display: inline-block; width: 2px; height: 20px; margin-left: 1px; background: var(--cf-ui-data-bright); vertical-align: -4px; animation: hv-blink 1s steps(1) infinite; }
@keyframes hv-blink { 50% { opacity: 0; } }
.hv-palette-group { padding: 12px 18px 4px; color: var(--cf-ui-on-deep-3); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.hv-palette-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 18px; color: var(--cf-ui-on-deep-2); font-size: var(--cf-ui-text-sm); }
.hv-palette-row.is-sel { background: var(--cf-ui-deep-glass); color: var(--cf-ui-on-deep); }
.hv-palette-row .hv-value { color: var(--cf-ui-data-bright); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); }
.hv-term { overflow-x: auto; padding: 18px 20px; border-radius: 18px; background: var(--cf-ui-deep-ink); box-shadow: inset 0 0 0 1px var(--cf-ui-deep-line); color: var(--cf-ui-on-deep-2); font: 13px / 1.8 var(--cf-ui-font-mono); white-space: nowrap; }
.hv-term-p { color: var(--cf-ui-data-bright); }
.hv-term-c { color: var(--cf-ui-on-deep-3); }
.hv-term-k { color: var(--cf-ui-deep-accent); }
.hv-copy { float: right; padding: 5px 10px; border: 0; border-radius: 8px; background: var(--cf-ui-deep-glass); color: var(--cf-ui-on-deep-2); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-sans); cursor: pointer; }
.hv-copy:hover { background: var(--cf-ui-deep-glass-2); color: var(--cf-ui-on-deep); }
.hv-copy:focus-visible { outline: 2px solid var(--cf-ui-deep-accent); outline-offset: 2px; }

/* ---- Calculator (Mercury calm) ------------------------------------------------------- */
.hv-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; padding-block: clamp(80px, 12vw, 140px); }
.hv-calc > div:first-child { display: grid; gap: 20px; }
.hv-calc > div:first-child > p { max-width: 44ch; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-lg); line-height: 1.55; }
.hv-meter { display: grid; gap: 22px; padding: 34px; border-radius: 28px; background: var(--cf-ui-surface); box-shadow: 0 0 0 1px var(--cf-ui-border), var(--cf-ui-shadow-xl); }
.hv-meter label { display: grid; gap: 10px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.hv-meter-row { display: flex; justify-content: space-between; gap: 12px; }
.hv-meter output { color: var(--cf-ui-fg); font: 500 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-mono); }
.hv-meter input { width: 100%; accent-color: var(--cf-ui-brand); }
.hv-meter input:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 4px; }
.hv-meter-result { display: grid; gap: 4px; padding-top: 22px; border-top: 1px solid var(--cf-ui-border); }
.hv-meter-result span:not(.hv-value),
.hv-meter-result small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.hv-meter-result .hv-value { color: var(--cf-ui-data); font: 600 clamp(44px, 6vw, 68px) / 1 var(--cf-ui-font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.hv-meter .ui-btn { justify-self: start; }

/* ---- Advisory ------------------------------------------------------------------------------ */
.hv-adv { padding-block: clamp(56px, 8vw, 90px); background: linear-gradient(180deg, var(--cf-ui-bg) 0%, var(--cf-ui-bg-subtle) 100%); }
.hv-adv-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.hv-adv-in > div:last-child { display: grid; justify-items: start; gap: 20px; }
.hv-adv-lead { max-width: 46ch; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-lg); line-height: 1.55; }
.hv-checks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hv-checks li { display: flex; align-items: center; gap: 12px; color: var(--cf-ui-fg-2); }
.hv-checks li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--cf-ui-data-subtle); color: var(--cf-ui-data); font-size: 12px; font-weight: 700; }
/* Advisory flow: inputs travel along light paths into the symbol, which writes the recommendation. */
.hv-flow { margin: 0; padding: clamp(12px, 3vw, 28px); border-radius: 28px; background: radial-gradient(90% 80% at 50% 45%, var(--cf-ui-deep-2) 0%, var(--cf-ui-deep) 70%); box-shadow: var(--cf-ui-shadow-deep), inset 0 0 0 1px var(--cf-ui-deep-line); }
.hv-flow svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--cf-ui-font-sans); }
.hv-flow-s1 { stop-color: var(--cf-ui-deep-glow); }
.hv-flow-s2 { stop-color: var(--cf-ui-deep-2); }
.hv-flow-s3 { stop-color: var(--cf-ui-deep); }
.hv-flow-m1 { stop-color: var(--cf-ui-data-deep); }
.hv-flow-m2 { stop-color: var(--cf-ui-data-bright); }
.hv-flow-g1 { stop-color: var(--cf-ui-glow-violet); }
.hv-flow-g2 { stop-color: var(--cf-ui-glow-pulse-0); }
.hv-flow-track { fill: none; stroke: var(--cf-ui-deep-glass-2); stroke-width: 1.5; }
.hv-flow-beam { fill: none; stroke: var(--cf-ui-data-bright); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 18 140; opacity: 0.8; animation: hv-flow-beam 2.7s linear infinite; }
@keyframes hv-flow-beam { from { stroke-dashoffset: 158; } to { stroke-dashoffset: 0; } }
.hv-flow-dot { fill: var(--cf-ui-data-bright); offset-rotate: 0deg; animation: hv-flow-travel 2.1s var(--cf-ui-ease) infinite; }
.hv-flow-dot-out { animation-duration: 1.4s; animation-delay: 1.9s; }
@keyframes hv-flow-travel { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.hv-flow-chip rect { fill: var(--cf-ui-deep-glass); stroke: var(--cf-ui-deep-line); }
.hv-flow-chip circle { fill: var(--cf-ui-data-bright); }
.hv-flow-chip text { fill: var(--cf-ui-on-deep); font-size: 13.5px; font-weight: 500; }
.hv-flow-chip { animation: hv-flow-chip 2.1s var(--cf-ui-ease) infinite; }
@keyframes hv-flow-chip { 0%, 100% { opacity: 1; } 10% { opacity: 0.7; } }
.hv-flow-halo { transform-box: fill-box; transform-origin: center; animation: hv-flow-halo 2.1s var(--cf-ui-ease) infinite; }
@keyframes hv-flow-halo { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }
.hv-flow-edge { fill: none; stroke: var(--cf-ui-deep-edge); stroke-width: 1.5; }
.hv-flow-chevron { fill: none; stroke: var(--cf-ui-on-deep); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.hv-flow-cursor { animation: hv-blink 1.05s steps(1) infinite; }
.hv-flow-doc > rect { fill: var(--cf-ui-surface); stroke: var(--cf-ui-border); }
.hv-flow-doc-title { fill: var(--cf-ui-fg); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.hv-flow-line { fill: var(--cf-ui-fg-faint); transform-box: fill-box; transform-origin: left center; animation: hv-flow-write 4.2s var(--cf-ui-ease) infinite; }
@keyframes hv-flow-write { 0%, 70% { transform: scaleX(1); } 78% { transform: scaleX(0.05); } 100% { transform: scaleX(1); } }
.hv-flow-bar { fill: var(--cf-ui-fg-faint); transform-box: fill-box; transform-origin: bottom; animation: hv-flow-grow 4.2s var(--cf-ui-ease) infinite; }
.hv-flow-bar.is-best { fill: var(--cf-ui-data); }
@keyframes hv-flow-grow { 0%, 70% { transform: scaleY(1); } 78% { transform: scaleY(0.1); } 100% { transform: scaleY(1); } }
.hv-flow-verdict circle { fill: var(--cf-ui-data-subtle); }
.hv-flow-verdict path { fill: none; stroke: var(--cf-ui-data); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv-flow-verdict text { fill: var(--cf-ui-fg-2); font-size: 12.5px; font-weight: 600; }
.hv-flow-verdict { animation: hv-flow-verdict 4.2s var(--cf-ui-ease) infinite; }
@keyframes hv-flow-verdict { 0%, 70% { opacity: 1; } 78%, 90% { opacity: 0.2; } 100% { opacity: 1; } }

/* ---- Guide covers ----------------------------------------------------------------------- */
.hv-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hv-cover-card { position: relative; display: grid; align-content: start; gap: 8px; color: var(--cf-ui-fg); }
.hv-cover-art { overflow: hidden; margin-bottom: 10px; border-radius: 20px; aspect-ratio: 4 / 3; background: var(--cf-ui-deep); box-shadow: var(--cf-ui-shadow-md); }
.hv-cover { display: block; width: 100%; height: 100%; transition: transform 0.8s var(--cf-ui-ease); }
.hv-cover-card:hover .hv-cover { transform: scale(1.04); }
.hv-cover-card:focus-within { outline: 2px solid var(--cf-ui-ring); outline-offset: 4px; border-radius: 20px; }
.hv-cover-card small { color: var(--cf-ui-brand-text); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.hv-cover-card h3 { font: 650 var(--cf-ui-text-xl) / 1.2 var(--cf-ui-font-display); letter-spacing: -0.018em; text-wrap: balance; }
.hv-cover-card h3 a { color: inherit; text-decoration: none; }
.hv-cover-card h3 a::after { content: ""; position: absolute; inset: 0; }
.hv-cover-card p { display: -webkit-box; overflow: hidden; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hv-source-links { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 24px 20px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.hv-source-links a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 1000px) {
  .hv-float { display: none; }
  .hv-split,
  .hv-dev-in,
  .hv-calc,
  .hv-adv-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hv-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hv-screen-body { grid-template-columns: minmax(0, 1fr); }
  .hv-screen-main { padding: 16px 14px; }
  .hv-screen-side { padding: 16px 14px; }
  .hv-shot-table .hv-bar { display: none; }
  .hv-device { padding: 6px; }
  .hv-screen-main { border-right: 0; border-bottom: 1px solid var(--cf-ui-border); }
  .hv-shot-table th:nth-child(4),
  .hv-shot-table td:nth-child(4) { display: none; }
  .hv-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-proof div:nth-child(2) { border-right: 0; }
  .hv-proof div:nth-child(-n + 2) { border-bottom: 1px solid var(--cf-ui-border); }
  .hv-proof div { padding: 24px 16px; }
  .hv-versus { grid-template-columns: minmax(0, 1fr); }
  .hv-covers { grid-template-columns: minmax(0, 1fr); }
  .hv-search-kbd { display: none; }
  .hv-meter { padding: 22px; }
  .hv-vs { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-device { transform: none; transition: none; }
  .hv-float,
  .hv-caret,
  .hv-flow-beam,
  .hv-flow-chip,
  .hv-flow-halo,
  .hv-flow-cursor,
  .hv-flow-line,
  .hv-flow-bar,
  .hv-flow-verdict { animation: none; }
  .hv-flow-dot { display: none; }
  .hv-pill,
  .hv-cat,
  .hv-search,
  .hv-cover { transition: none; }
  .hv-cat:hover { transform: none; }
}

/* Below-the-fold sections skip style, layout and paint (and their loops) until they near the viewport. */
.hv-feature,
.hv-dev,
.hv-split,
.hv-calc,
.hv-adv,
.hv-covers { content-visibility: auto; contain-intrinsic-size: auto 720px; }

/* src/app/research-interface.css */
/* Editorial research interface: compact navigation, serif display, consistent scales. */
.cf-eyebrow { display: block; color: var(--cf-color-research-accent); font-size: var(--cf-font-size-xs); letter-spacing: var(--cf-tracking-label); text-transform: uppercase; font-weight: var(--cf-font-weight-semibold-plus); }
.cf-newsletter { padding: 46px 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; scroll-margin-top: 140px; }
.cf-newsletter h2 { font: 400 31px/1.15 Georgia, serif; letter-spacing: -.02em; margin: 13px 0 10px; }
.cf-newsletter p { color: var(--cf-color-research-muted); font-size: var(--cf-font-size-md); }.cf-newsletter form > label { font-size: var(--cf-font-size-md); }
.cf-email-row { display: flex; gap: 8px; margin: 10px 0 14px; }
.cf-email-row input { border: 1px solid var(--cf-mauve-123); padding: 11px; border-radius: var(--cf-radius-xs); min-width: 0; flex: 1; font-size: var(--cf-font-size-lg); }
.cf-email-row button { color: var(--cf-color-on-ink); background: var(--cf-color-research-accent); border: 0; border-radius: var(--cf-radius-xs); padding: 10px 16px; font-size: var(--cf-font-size-md); }
.cf-email-row button:disabled { opacity: .6; cursor: default; }.cf-consent { display: flex; align-items: center; gap: 8px; color: var(--cf-mauve-495); }
.cf-newsletter form > p { margin-top: 10px; font-size: var(--cf-font-size-sm); }
.content-hero { background: var(--cf-color-surface); background-image: none; padding-top: 48px; padding-bottom: 40px; }
.content-hero h1 { font-family: var(--cf-font-serif); font-weight: var(--cf-font-weight-regular); font-size: clamp(40px, 5vw, 64px); letter-spacing: var(--cf-tracking-title); }
@media (min-width: 901px) and (max-width: 1100px) {.site-header .nav { gap: 12px; } }
@media (max-width: 700px) {
  .cf-newsletter { grid-template-columns: 1fr; gap: 25px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* src/app/site-core.css */
/* Shared base, navigation, footer and brief. Editorial layouts load their own styles. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cf-color-paper); color: var(--cf-color-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: var(--cf-font-weight-extrabold); letter-spacing: var(--cf-tracking-title); font-size: var(--cf-font-size-3xl); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 11px; padding: 12px 17px; font-weight: 780; font-size: var(--cf-font-size-lg); transition: transform var(--cf-duration-200) var(--cf-ease-standard), box-shadow var(--cf-duration-200) var(--cf-ease-standard), background var(--cf-duration-200) var(--cf-ease-standard); }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--cf-color-ink); color: var(--cf-color-on-ink); box-shadow: var(--cf-shadow-button); }
.button-primary:hover { background: var(--cf-slate-767); box-shadow: var(--cf-shadow-button-hover); }
.button-ghost { background: var(--cf-color-surface); color: var(--cf-color-ink); border: 1px solid var(--cf-color-line); }
.button-lime { background: var(--cf-color-signal-tint); color: var(--cf-color-ink); }
h1 { font-size: clamp(47px, 6.1vw, 82px); line-height: .96; letter-spacing: -.075em; margin: 20px 0 24px; color: var(--cf-color-ink); max-width: 750px; }
.footer { background: var(--cf-slate-760); color: var(--cf-color-on-ink); padding: 33px 0; }.footer p { color: var(--cf-sage-285); font-size: var(--cf-font-size-sm); margin: 5px 0 0; }
@media (max-width: 560px) { .container { width: min(100% - 32px, 1160px); }.nav { height: 66px; } h1 { font-size: 51px; } }.site-header .brand { color: var(--cf-color-ink); }
body { background: var(--cf-color-paper); color: var(--cf-color-ink); font-family: var(--cf-font-sans); -webkit-font-smoothing: antialiased; }
::selection { color: var(--cf-color-on-ink); background: var(--cf-color-signal); }
.container { width: min(1200px, calc(100% - 48px)); }
.nav { height: 68px; gap: 24px; }
.brand { gap: 10px; color: var(--cf-color-ink); font-size: var(--cf-font-size-xl); font-weight: 730; letter-spacing: var(--cf-tracking-snug); }
.codifly-logo { display: block; width: 128px; height: 32px; object-fit: contain; }
.button { border-radius: var(--cf-radius-button); padding: 11px 15px; font-size: var(--cf-font-size-md); font-weight: 680; transition: transform var(--cf-duration-160) var(--cf-ease-standard), border-color var(--cf-duration-160) var(--cf-ease-standard), background var(--cf-duration-160) var(--cf-ease-standard); }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--cf-color-ink); box-shadow: none; }
.button-primary:hover { background: var(--cf-zinc-689); box-shadow: none; }
.button-ghost { color: var(--cf-color-ink); background: var(--cf-color-surface); border: 1px solid var(--cf-color-line); }
.button-lime { color: var(--cf-color-on-ink); background: var(--cf-color-signal); }
h1 { color: var(--cf-color-ink); font-size: clamp(45px, 6vw, 76px); line-height: .99; letter-spacing: var(--cf-tracking-display); }
.footer { background: var(--cf-color-ink); }

@media (max-width: 900px) {
  .container { width: min(100% - 36px, 1200px); }
}

@media (max-width: 560px) {
  .container { width: min(100% - 32px, 1200px); }
  .nav { height: 62px; }
  h1 { font-size: 46px; letter-spacing: -.05em; }
}
.cf-eyebrow { display: block; color: var(--cf-color-research-accent); font-size: var(--cf-font-size-xs); letter-spacing: var(--cf-tracking-label); text-transform: uppercase; font-weight: var(--cf-font-weight-semibold-plus); }
.cf-newsletter { padding: 46px 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; scroll-margin-top: 140px; }
.cf-newsletter h2 { font: 400 31px/1.15 Georgia, serif; letter-spacing: -.02em; margin: 13px 0 10px; }
.cf-newsletter p { color: var(--cf-color-research-muted); font-size: var(--cf-font-size-md); }.cf-newsletter form > label { font-size: var(--cf-font-size-md); }
.cf-email-row { display: flex; gap: 8px; margin: 10px 0 14px; }
.cf-email-row input { border: 1px solid var(--cf-mauve-123); padding: 11px; border-radius: var(--cf-radius-xs); min-width: 0; flex: 1; font-size: var(--cf-font-size-lg); }
.cf-email-row button { color: var(--cf-color-on-ink); background: var(--cf-color-research-accent); border: 0; border-radius: var(--cf-radius-xs); padding: 10px 16px; font-size: var(--cf-font-size-md); }
.cf-email-row button:disabled { opacity: .6; cursor: default; }.cf-consent { display: flex; align-items: center; gap: 8px; color: var(--cf-mauve-495); }
.cf-newsletter form > p { margin-top: 10px; font-size: var(--cf-font-size-sm); }
@media (min-width: 901px) and (max-width: 1100px) {.site-header .nav { gap: 12px; } }
@media (max-width: 700px) {
  .cf-newsletter { grid-template-columns: 1fr; gap: 25px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* src/app/ui.css */
/*
 * Codifly design system v2 — component primitives.
 * Only --cf-ui-* tokens (codifly-tokens.css); every rule works in light and dark.
 * Classes are prefixed ui- and kept flat (one class per rule) so page styles can extend them
 * without specificity fights. React wrappers live in src/components/ui/.
 */

/* ---- Base (every page): the document itself follows the theme ------------------ */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cf-ui-bg);
  color: var(--cf-ui-fg);
  font-family: var(--cf-ui-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button,
input,
select,
textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img,
svg { max-width: 100%; }
::selection { background: var(--cf-ui-brand); color: var(--cf-ui-brand-fg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.ui-root {
  font-family: var(--cf-ui-font-sans);
  color: var(--cf-ui-fg);
  -webkit-font-smoothing: antialiased;
}

/* Headlines use the display face everywhere (Inter Tight, tight tracking). The extra `html`
   out-specifies page rules that set `font` with the text face, without touching size or weight. */
html .ui-root :is(h1, h2) { font-family: var(--cf-ui-font-display); letter-spacing: -0.032em; }
html .ui-root h3 { font-family: var(--cf-ui-font-display); letter-spacing: -0.018em; }

.ui-container {
  width: 100%;
  max-width: var(--cf-ui-container);
  margin-inline: auto;
  padding-inline: var(--cf-ui-gutter);
}

.ui-mono {
  font-family: var(--cf-ui-font-mono);
  font-variant-numeric: tabular-nums;
}

.ui-eyebrow {
  font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono);
  letter-spacing: var(--cf-ui-tracking-label);
  text-transform: uppercase;
  color: var(--cf-ui-fg-muted);
}

.ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ui-focus:focus-visible,
.ui-btn:focus-visible,
.ui-icon-btn:focus-visible,
.ui-input:focus-visible,
.ui-link:focus-visible {
  outline: 2px solid var(--cf-ui-ring);
  outline-offset: 2px;
}

/* ---- Buttons ------------------------------------------------------------ */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-ui-space-2);
  height: var(--cf-ui-control);
  padding-inline: 14px;
  border: 1px solid transparent;
  border-radius: var(--cf-ui-radius-sm);
  font: 600 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cf-ui-duration) var(--cf-ui-ease), border-color var(--cf-ui-duration) var(--cf-ui-ease), transform var(--cf-ui-duration-fast) var(--cf-ui-ease);
}
.ui-btn:active { transform: translateY(1px); }
.ui-btn svg { width: 15px; height: 15px; flex: none; }
.ui-btn-sm { height: var(--cf-ui-control-sm); padding-inline: 10px; font-size: var(--cf-ui-text-xs); }
.ui-btn-lg { height: var(--cf-ui-control-lg); padding-inline: 18px; font-size: var(--cf-ui-text-base); border-radius: var(--cf-ui-radius-md); }
.ui-btn-primary { background: var(--cf-ui-inverse); color: var(--cf-ui-inverse-fg); }
.ui-btn-primary:hover { background: var(--cf-ui-fg-2); }
.ui-btn-brand { background: var(--cf-ui-brand); color: var(--cf-ui-brand-fg); }
.ui-btn-brand:hover { background: var(--cf-ui-brand-hover); }
.ui-btn-outline { background: var(--cf-ui-surface); border-color: var(--cf-ui-border); color: var(--cf-ui-fg); }
.ui-btn-outline:hover { border-color: var(--cf-ui-border-strong); }
.ui-btn-ghost { background: transparent; color: var(--cf-ui-fg-2); }
.ui-btn-ghost:hover { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }

.ui-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--cf-ui-control);
  height: var(--cf-ui-control);
  border: 0;
  border-radius: var(--cf-ui-radius-sm);
  background: transparent;
  color: var(--cf-ui-fg-2);
  cursor: pointer;
  transition: background-color var(--cf-ui-duration) var(--cf-ui-ease);
}
.ui-icon-btn:hover { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }
.ui-icon-btn svg { width: 17px; height: 17px; }

/* ---- Small pieces --------------------------------------------------------- */
.ui-kbd {
  display: inline-flex;
  align-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border: 1px solid var(--cf-ui-border);
  border-bottom-width: 2px;
  border-radius: var(--cf-ui-radius-xs);
  background: var(--cf-ui-surface-2);
  color: var(--cf-ui-fg-muted);
  font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono);
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-ui-space-1);
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--cf-ui-radius-xs);
  background: var(--cf-ui-bg-subtle);
  color: var(--cf-ui-fg-muted);
  font: 600 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.ui-badge-data { background: var(--cf-ui-data-subtle); color: var(--cf-ui-data); }
.ui-badge-brand { background: var(--cf-ui-brand-subtle); color: var(--cf-ui-brand-text); }
.ui-badge-warn { background: var(--cf-ui-warn-subtle); color: var(--cf-ui-warn); }

.ui-card {
  display: grid;
  gap: var(--cf-ui-space-3);
  padding: var(--cf-ui-space-4);
  border: 1px solid var(--cf-ui-border);
  border-radius: var(--cf-ui-radius-lg);
  background: var(--cf-ui-surface);
}
.ui-card-link { transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease), transform var(--cf-ui-duration) var(--cf-ui-ease); }
.ui-card-link:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); transform: translateY(-1px); }

.ui-input {
  height: var(--cf-ui-control-lg);
  padding-inline: 14px;
  border: 1px solid var(--cf-ui-border-strong);
  border-radius: var(--cf-ui-radius-md);
  background: var(--cf-ui-surface);
  color: var(--cf-ui-fg);
  font: 400 var(--cf-ui-text-md) / 1 var(--cf-ui-font-sans);
}
.ui-input::placeholder { color: var(--cf-ui-fg-faint); }

.ui-link { color: var(--cf-ui-fg-2); text-decoration: none; }
.ui-link:hover { color: var(--cf-ui-fg); }

/* Segmented control: a small group of mutually exclusive options. */
.ui-seg {
  display: inline-flex;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  gap: 2px;
  padding: 2px;
  border-radius: var(--cf-ui-radius-sm);
  background: var(--cf-ui-bg-subtle);
}
.ui-seg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cf-ui-fg-muted);
  font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans);
  cursor: pointer;
}
.ui-seg-item svg { width: 14px; height: 14px; }
.ui-seg-item[aria-pressed="true"],
.ui-seg-item[aria-checked="true"] { background: var(--cf-ui-surface); color: var(--cf-ui-fg); box-shadow: var(--cf-ui-shadow-sm); }

/* Weekly brief signup (BriefSignup variant="v2"), shared by every page that offers it. */
.hv-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--cf-ui-space-8);
  align-items: center;
  padding: var(--cf-ui-space-8);
  border: 1px solid var(--cf-ui-brand-border);
  border-radius: var(--cf-ui-radius-xl);
  background: var(--cf-ui-brand-subtle);
}
.hv-brief h2 { margin-top: var(--cf-ui-space-2); font: 650 var(--cf-ui-text-3xl) / 1.1 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.hv-brief > div > p { margin-top: var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-md); }
.hv-brief .ui-eyebrow { color: var(--cf-ui-brand-text); }
.hv-brief-form { display: grid; gap: var(--cf-ui-space-3); }
.hv-brief-form > label:not(.hv-brief-consent) { color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; }
.hv-brief-row { display: flex; gap: var(--cf-ui-space-2); flex-wrap: wrap; }
.hv-brief-row .ui-input { flex: 1 1 220px; min-width: 0; }
.hv-brief-consent { display: flex; gap: var(--cf-ui-space-2); align-items: flex-start; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.45; }
.hv-brief-consent input { margin-top: 3px; accent-color: var(--cf-ui-brand); }
.hv-brief-status { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }

/* Compact brief card inside a sidebar (topic pages): one column, no card chrome of its own. */
.ui-compact-brief .hv-brief { grid-template-columns: 1fr; gap: var(--cf-ui-space-3); padding: 0; border: 0; background: transparent; }
.ui-compact-brief .hv-brief > div:first-child { display: none; }
@media (max-width: 960px) { .hv-brief { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hv-brief { padding: var(--cf-ui-space-5); } }

/* Provider chip: two-letter mark in the provider's colour (decorative; the name is always shown). */
.ui-provider { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; color: var(--cf-ui-bg); font: 700 10px / 1 var(--cf-ui-font-sans); text-transform: uppercase; }
.ui-provider-openai { background: var(--cf-ui-provider-openai); }
.ui-provider-anthropic { background: var(--cf-ui-provider-anthropic); }
.ui-provider-google { background: var(--cf-ui-provider-google); }
.ui-provider-mistral { background: var(--cf-ui-provider-mistral); }
.ui-provider-deepseek { background: var(--cf-ui-provider-deepseek); }
.ui-provider-other { background: var(--cf-ui-provider-other); }

@media (prefers-reduced-motion: reduce) {
  .ui-btn,
  .ui-icon-btn,
  .ui-card-link { transition: none; }
  .ui-btn:active { transform: none; }
}

/* Data-driven FAQs (src/components/faq.tsx): plain disclosure widgets, readable without JS. */
.ui-faq { display: grid; gap: var(--cf-ui-space-2); max-width: 860px; padding-block: var(--cf-ui-space-6); }
.ui-faq h2 { margin: 0 0 var(--cf-ui-space-2); color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-2xl) / 1.15 var(--cf-ui-font-display); letter-spacing: -0.025em; }
.ui-faq details { border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.ui-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-4) var(--cf-ui-space-5); color: var(--cf-ui-fg); font-weight: 600; list-style: none; cursor: pointer; }
.ui-faq summary::-webkit-details-marker { display: none; }
.ui-faq summary::after { content: "+"; flex: none; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-lg) / 1 var(--cf-ui-font-mono); }
.ui-faq details[open] summary::after { content: "−"; }
.ui-faq summary:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; border-radius: var(--cf-ui-radius-lg); }
.ui-faq p { margin: 0; padding: 0 var(--cf-ui-space-5) var(--cf-ui-space-4); color: var(--cf-ui-fg-2); line-height: 1.65; }

/* src/app/v2-ai-costs.css */
/* Topic hub "AI model costs" + calculator (src/components/tools/ai-cost-*). Only --cf-ui-* tokens. */

.aih { background: var(--cf-ui-bg); min-height: 100vh; }
.aih h1,
.aih h2 { margin: 0; color: var(--cf-ui-fg); text-wrap: balance; }
.aih p { margin: 0; }

.aih-head { display: grid; gap: var(--cf-ui-space-3); padding-block: var(--cf-ui-space-12) var(--cf-ui-space-8); max-width: 820px; }
.aih-eyebrow { color: var(--cf-ui-brand-text); }
.aih-head h1 { font: 700 var(--cf-ui-text-4xl) / 1.05 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-display); }
.aih-head > p { max-width: 62ch; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-lg); line-height: var(--cf-ui-leading-normal); }
.aih-meta { display: flex; flex-wrap: wrap; gap: 6px var(--cf-ui-space-5); margin: var(--cf-ui-space-1) 0 0; padding: 0; list-style: none; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.aih-meta li { display: inline-flex; align-items: center; gap: 6px; }
.aih-meta svg { width: 15px; height: 15px; color: var(--cf-ui-data); }

.aih-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--cf-ui-space-5); align-items: start; padding-bottom: var(--cf-ui-space-16); }
.aih-primary { display: grid; gap: var(--cf-ui-space-4); min-width: 0; }
.aih-side { display: grid; gap: var(--cf-ui-space-3); position: sticky; top: calc(var(--cf-ui-header) + var(--cf-ui-space-4)); }

/* ---- Calculator -------------------------------------------------------------- */
.aic { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-surface); overflow: hidden; }
.aic-side { display: grid; align-content: start; gap: var(--cf-ui-space-5); padding: var(--cf-ui-space-5); border-right: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); }
.aic-side h2 { font: 650 var(--cf-ui-text-lg) / 1.2 var(--cf-ui-font-sans); }
.aic-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.aic-preset { height: 30px; padding-inline: 11px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-surface); color: var(--cf-ui-fg-2); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans); cursor: pointer; }
.aic-preset:hover { border-color: var(--cf-ui-border-strong); color: var(--cf-ui-fg); }
.aic-preset[aria-pressed="true"] { background: var(--cf-ui-inverse); border-color: var(--cf-ui-inverse); color: var(--cf-ui-inverse-fg); }
.aic-preset:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.aic-field { display: grid; gap: var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.aic-field-row { display: flex; justify-content: space-between; gap: var(--cf-ui-space-3); }
.aic-field output { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); font-weight: 500; }
.aic-field input[type="range"] { width: 100%; accent-color: var(--cf-ui-brand); }
.aic-field input[type="range"]:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 4px; }
.aic-note { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.5; }

.aic-main { display: grid; align-content: start; gap: var(--cf-ui-space-4); padding: var(--cf-ui-space-5); min-width: 0; }
.aic-headline { display: grid; gap: 4px; padding-bottom: var(--cf-ui-space-4); border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.aic-headline b { color: var(--cf-ui-data); font: 650 var(--cf-ui-text-3xl) / 1.05 var(--cf-ui-font-mono); letter-spacing: -0.02em; }
.aic-headline small { color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-base) / 1 var(--cf-ui-font-sans); letter-spacing: 0; }

.aic-table { width: 100%; border-collapse: collapse; font-size: var(--cf-ui-text-sm); }
.aic-table thead th { padding: 0 var(--cf-ui-space-2) var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.aic-table tbody th,
.aic-table tbody td { padding: 7px var(--cf-ui-space-2); border-top: 1px solid var(--cf-ui-border); font-weight: 400; text-align: left; white-space: nowrap; }
.aic-table tbody tr.is-best { background: var(--cf-ui-data-subtle); }
.aic-table tbody tr.is-best .aic-num { color: var(--cf-ui-data); font-weight: 600; }
.aic-num { text-align: right; }
.aic-table thead th.aic-num,
.aic-table tbody td.aic-num { text-align: right; }
.aic-bar-col { width: 40%; }
.aic-bar { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--cf-ui-bg-subtle); }
.aic-bar i { display: block; height: 100%; border-radius: 4px; background: var(--cf-ui-fg-faint); transition: width var(--cf-ui-duration-slow) var(--cf-ui-ease); }
.aic-table tr.is-best .aic-bar i { background: var(--cf-ui-data); }
.aic-model { display: flex; align-items: center; gap: 10px; color: var(--cf-ui-fg); text-decoration: none; }
.aic-model:hover b { text-decoration: underline; text-underline-offset: 3px; }
.aic-model:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; border-radius: 6px; }
.aic-model b { display: block; font-weight: 600; }
.aic-model small { display: block; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }

/* ---- Partner (only when configured) --------------------------------------------- */
.aih-partner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--cf-ui-space-4); align-items: center; padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.aih-partner-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-inverse); color: var(--cf-ui-inverse-fg); font: 700 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-sans); }
.aih-partner-label { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.aih-partner b { display: block; margin: 4px 0 2px; color: var(--cf-ui-fg); font-size: var(--cf-ui-text-md); }
.aih-partner p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.aih-partner-act { display: grid; justify-items: end; gap: 6px; }
.aih-partner-act small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }

/* ---- Side cards ------------------------------------------------------------------ */
.aih-card { display: grid; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.aih-card h2 { font: 650 var(--cf-ui-text-md) / 1.3 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.aih-card p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.aih-card .ui-btn { justify-self: start; }
.aih-card .ui-btn svg { width: 15px; height: 15px; }
.aih-follow { border-color: var(--cf-ui-brand-border); background: var(--cf-ui-brand-subtle); }
.aih-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-ui-brand-text); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.aih-kicker svg { width: 14px; height: 14px; }
.aih-follow .hv-brief { grid-template-columns: 1fr; gap: var(--cf-ui-space-3); padding: 0; border: 0; background: transparent; }
.aih-follow .hv-brief > div:first-child { display: none; }
.aih-links { display: grid; gap: 6px; }
.aih-links a,
.aih-guides a { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: none; }
.aih-links a:hover,
.aih-guides a:hover { color: var(--cf-ui-fg); }
.aih-links svg { width: 14px; height: 14px; }
.aih-guides { display: grid; gap: var(--cf-ui-space-2); margin: 0; padding: 0; list-style: none; }

@media (max-width: 1100px) {
  .aih-grid { grid-template-columns: 1fr; }
  .aih-side { position: static; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
}
@media (max-width: 760px) {
  .aic { grid-template-columns: 1fr; }
  .aic-side { border-right: 0; border-bottom: 1px solid var(--cf-ui-border); }
  .aic-bar-col { display: none; }
  .aih-partner { grid-template-columns: 1fr; }
  .aih-partner-act { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) { .aic-bar i { transition: none; } }

/* src/app/v2-best.css */
/* "Best AI models for <task>" rankings (src/components/pages/best-models.tsx). Only --cf-ui-* tokens. */

.bm-hero { display: grid; gap: var(--cf-ui-space-3); max-width: 860px; padding-block: var(--cf-ui-space-12) var(--cf-ui-space-6); }
.bm-hero h1 { margin: 0; color: var(--cf-ui-fg); font: 700 clamp(34px, 5vw, 60px) / 1.02 var(--cf-ui-font-display); letter-spacing: -0.04em; text-wrap: balance; }
.bm-lead { max-width: 64ch; margin: 0; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-lg); line-height: var(--cf-ui-leading-normal); }
.bm-meta { margin: 0; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1.4 var(--cf-ui-font-mono); }

.bm-criteria { max-width: 72ch; margin: 0; padding: 10px 14px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.bm-criteria b { color: var(--cf-ui-fg); }
.bm-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--cf-ui-space-3); }
.bm-tabs + .bm-podium,
.bm-tabs + .bm-table-wrap { margin-top: var(--cf-ui-space-4); }
.bm-tabs-label { min-width: 104px; margin-right: var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.bm-tabs a { display: inline-flex; align-items: center; min-height: 34px; padding-inline: 14px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-surface); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: none; transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), color var(--cf-ui-duration) var(--cf-ui-ease); }
.bm-tabs a:hover { border-color: var(--cf-ui-border-strong); color: var(--cf-ui-fg); }
.bm-tabs a[aria-current="page"] { border-color: var(--cf-ui-inverse); background: var(--cf-ui-inverse); color: var(--cf-ui-inverse-fg); }
.bm-tabs a:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }

.bm-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cf-ui-space-3); margin: 0 0 var(--cf-ui-space-6); padding: 0; list-style: none; }
.bm-podium li { position: relative; display: grid; gap: var(--cf-ui-space-4); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-sm); }
.bm-podium li:focus-within { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.bm-podium li.is-first { border-color: var(--cf-ui-data); box-shadow: 0 0 0 1px var(--cf-ui-data), var(--cf-ui-shadow-md); }
.bm-place { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); letter-spacing: 0.08em; }
.bm-who { display: flex; align-items: center; gap: 12px; }
.bm-who div { display: grid; gap: 2px; min-width: 0; }
.bm-who small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.bm-stretch { color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-lg) / 1.2 var(--cf-ui-font-display); letter-spacing: -0.02em; text-decoration: none; }
.bm-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bm-stretch:focus-visible { outline: none; }
.bm-figure { display: grid; gap: 4px; }
.bm-figure b { color: var(--cf-ui-fg); font: 600 clamp(30px, 3.6vw, 44px) / 1 var(--cf-ui-font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bm-podium li.is-first .bm-figure b { color: var(--cf-ui-data); }
.bm-figure small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.bm-bar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--cf-ui-bg-subtle); }
.bm-bar i { display: block; height: 100%; border-radius: 3px; background: var(--cf-ui-fg-faint); }
.is-first .bm-bar i,
.is-top .bm-bar i { background: linear-gradient(90deg, var(--cf-ui-data-deep), var(--cf-ui-data-bright)); }
.bm-bar-sm { width: 84px; height: 5px; }

.bm-table-wrap { overflow-x: auto; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.bm-table { width: 100%; border-collapse: collapse; font-size: var(--cf-ui-text-sm); }
.bm-table th { padding: 10px var(--cf-ui-space-4); border-bottom: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.bm-table td { padding: 11px var(--cf-ui-space-4); border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-2); white-space: nowrap; }
.bm-table tbody tr:last-child td { border-bottom: 0; }
.bm-table tbody tr:hover { background: var(--cf-ui-surface-2); }
.bm-table tr.is-top { background: var(--cf-ui-data-subtle); }
.bm-table tr.is-top .ui-mono { color: var(--cf-ui-data); font-weight: 600; }
.bm-right { text-align: right; }
.bm-table th.bm-right { text-align: right; }
.bm-num-col { width: 44px; color: var(--cf-ui-fg-muted); font-family: var(--cf-ui-font-mono); }
.bm-model { display: flex; align-items: center; gap: 10px; color: var(--cf-ui-fg); text-decoration: none; }
.bm-model b { display: block; font-weight: 600; }
.bm-model small { display: block; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }
.bm-model:hover b { text-decoration: underline; text-underline-offset: 3px; }
.bm-model:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; border-radius: 6px; }
.bm-cell-bar { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }

.bm-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cf-ui-space-4); margin-top: var(--cf-ui-space-8); }
.bm-card { display: grid; align-content: start; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-6); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.bm-card h2 { margin: 0; color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-xl) / 1.2 var(--cf-ui-font-display); letter-spacing: -0.02em; }
.bm-card p { margin: 0; color: var(--cf-ui-fg-muted); line-height: var(--cf-ui-leading-normal); }
.bm-card ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.bm-card-cta { border-color: var(--cf-ui-brand-border); background: var(--cf-ui-brand-subtle); }
.bm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bm-link { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; color: var(--cf-ui-brand-text); font-size: var(--cf-ui-text-sm); font-weight: 600; text-decoration: none; }
.bm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bm-link svg { width: 15px; height: 15px; }
.bm-brief { padding-block: var(--cf-ui-space-8) var(--cf-ui-space-16); }

@media (max-width: 900px) {
  .bm-podium,
  .bm-bottom { grid-template-columns: minmax(0, 1fr); }
  .bm-hide-md { display: none; }
}
@media (max-width: 600px) { .bm-hide-sm,
  .bm-bar-sm { display: none; } }
@media (prefers-reduced-motion: reduce) { .bm-tabs a { transition: none; } }

/* src/app/v2-catalog.css */
/*
 * Data pages on design system v2: category rankings (/leaderboards/*), product pages
 * (/catalog/*), and the compare pages (/compare, /compare/*). Only --cf-ui-* tokens, so every
 * rule works in light and dark. Prefix vc- (v2 catalog).
 */

.vc { min-height: 100vh; background: var(--cf-ui-bg); }
.vc h1,
.vc h2,
.vc h3 { margin: 0; color: var(--cf-ui-fg); text-wrap: balance; }
.vc p { margin: 0; }
.vc-main { padding-bottom: var(--cf-ui-space-16); }
.vc a:focus-visible,
.vc button:focus-visible,
.vc select:focus-visible,
.vc input:focus-visible,
.vc [tabindex]:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }

/* ---- Category nav ------------------------------------------------------------ */
.vc-catnav {
  display: flex;
  gap: var(--cf-ui-space-1);
  margin-inline: calc(var(--cf-ui-gutter) * -1);
  padding: var(--cf-ui-space-3) var(--cf-ui-gutter);
  overflow-x: auto;
  border-bottom: 1px solid var(--cf-ui-border);
  scrollbar-width: thin;
}
.vc-catnav a {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-ui-space-2);
  flex: none;
  height: var(--cf-ui-control-sm);
  padding-inline: 10px;
  border: 1px solid transparent;
  border-radius: var(--cf-ui-radius-sm);
  color: var(--cf-ui-fg-muted);
  font: 500 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-sans);
  text-decoration: none;
  white-space: nowrap;
}
.vc-catnav a:hover { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }
.vc-catnav a[aria-current="page"] { border-color: var(--cf-ui-border); background: var(--cf-ui-surface); color: var(--cf-ui-fg); box-shadow: var(--cf-ui-shadow-sm); }
.vc-catnav svg { width: 15px; height: 15px; flex: none; }
.vc-catnav-count { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }
.vc-catnav-sep { flex: none; width: 1px; margin: 6px var(--cf-ui-space-2); background: var(--cf-ui-border); }

.vc-crumb { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--cf-ui-space-5); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); text-decoration: none; }
.vc-crumb:hover { color: var(--cf-ui-fg); }
.vc-crumb svg { width: 14px; height: 14px; }

/* ---- Hero -------------------------------------------------------------------- */
.vc-hero { display: grid; gap: var(--cf-ui-space-4); padding-block: var(--cf-ui-space-10) var(--cf-ui-space-6); }
.vc-hero h1 { max-width: 22ch; font: 700 var(--cf-ui-text-4xl) / 1.05 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-display); }
.vc-hero h1 span { color: var(--cf-ui-fg-muted); }
.vc-lead { max-width: 64ch; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-lg); line-height: var(--cf-ui-leading-normal); }
.vc-proof { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2) var(--cf-ui-space-5); margin: 0; padding: 0; list-style: none; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.vc-proof li { display: inline-flex; align-items: center; gap: 6px; }
.vc-proof svg { width: 15px; height: 15px; color: var(--cf-ui-data); }

.vc-edition { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-xs) / 1.5 var(--cf-ui-font-mono); }
.vc-edition-sep { color: var(--cf-ui-fg-faint); }

/* ---- Highlights (KPI tiles) ---------------------------------------------------- */
.vc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--cf-ui-space-3); margin-block: var(--cf-ui-space-5) var(--cf-ui-space-8); }
.vc-kpi {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--cf-ui-space-3);
  padding: var(--cf-ui-space-5);
  overflow: hidden;
  border: 1px solid var(--cf-ui-border);
  border-radius: var(--cf-ui-radius-xl);
  background: radial-gradient(120% 90% at 100% 0%, var(--cf-ui-data-subtle), transparent 55%), var(--cf-ui-surface);
  box-shadow: var(--cf-ui-shadow-sm);
  color: var(--cf-ui-fg);
  text-decoration: none;
  transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease), transform var(--cf-ui-duration) var(--cf-ui-ease);
}
.vc-kpi:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); transform: translateY(-2px); }
.vc-kpi-label { display: flex; justify-content: space-between; gap: var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.4 var(--cf-ui-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.vc-kpi-label svg { width: 14px; height: 14px; flex: none; }
.vc-kpi-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cf-ui-space-2); font: 600 var(--cf-ui-text-base) / 1.3 var(--cf-ui-font-sans); }
.vc-kpi-name small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); font-weight: 400; }
.vc-kpi-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; color: var(--cf-ui-data); font: 600 var(--cf-ui-text-4xl) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.vc-kpi-value small { color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-xs) / 1.2 var(--cf-ui-font-sans); letter-spacing: 0; }
.vc-kpi-edge { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); }
.vc-kpi-cta { border-style: dashed; background: transparent; box-shadow: none; align-content: space-between; }
.vc-kpi-cta svg { width: 18px; height: 18px; color: var(--cf-ui-fg-2); }
.vc-kpi-cta span { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.vc-kpi-cta span svg { width: 14px; height: 14px; }

/* ---- Panels ------------------------------------------------------------------ */
.vc-panel { display: grid; min-width: 0; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); overflow: hidden; }
.vc-panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); flex-wrap: wrap; padding: var(--cf-ui-space-4) var(--cf-ui-space-5); border-bottom: 1px solid var(--cf-ui-border); }
.vc-panel-head h2 { display: flex; align-items: center; gap: var(--cf-ui-space-2); font: 650 var(--cf-ui-text-lg) / 1.2 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.vc-panel-head h3 { font: 600 var(--cf-ui-text-md) / 1.25 var(--cf-ui-font-sans); }
.vc-panel-head p { margin-top: 2px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.45; }
.vc-panel-body { display: grid; gap: var(--cf-ui-space-4); min-width: 0; padding: var(--cf-ui-space-4) var(--cf-ui-space-5); }
.vc-panel-foot { display: flex; align-items: flex-start; gap: var(--cf-ui-space-2); padding: var(--cf-ui-space-3) var(--cf-ui-space-5); border-top: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.5; }
.vc-panel-foot > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.vc-panel-foot a { color: var(--cf-ui-fg-2); text-underline-offset: 3px; }

/* ---- Toolbar ----------------------------------------------------------------- */
.vc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-2); }
.vc-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 0; }
.vc-search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--cf-ui-fg-muted); pointer-events: none; }
.vc-search input { width: 100%; padding-left: 34px; }
.vc-field {
  height: var(--cf-ui-control);
  min-width: 0;
  padding-inline: 11px;
  border: 1px solid var(--cf-ui-border-strong);
  border-radius: var(--cf-ui-radius-sm);
  background: var(--cf-ui-surface);
  color: var(--cf-ui-fg);
  font: 400 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-sans);
}
.vc-field::placeholder { color: var(--cf-ui-fg-muted); }
select.vc-field { padding-right: 28px; cursor: pointer; }
.vc-label { display: inline-flex; align-items: center; gap: var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); font-weight: 500; }
.vc-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); flex-wrap: wrap; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-seg-icon { gap: 0; }

/* ---- Tables ------------------------------------------------------------------ */
.vc-table-wrap { overflow-x: auto; margin-inline: calc(var(--cf-ui-space-5) * -1); border-top: 1px solid var(--cf-ui-border); }
.vc-table-wrap:focus-visible { outline-offset: -2px; }
.vc-table { width: 100%; border-collapse: collapse; font-size: var(--cf-ui-text-sm); }
.vc-table caption { text-align: left; }
.vc-table thead th { padding: 9px var(--cf-ui-space-3); border-bottom: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-align: left; text-transform: uppercase; white-space: nowrap; vertical-align: bottom; }
.vc-table tbody th,
.vc-table tbody td { padding: 10px var(--cf-ui-space-3); border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-2); text-align: left; font-weight: 400; white-space: nowrap; vertical-align: middle; }
.vc-table tbody tr:last-child th,
.vc-table tbody tr:last-child td { border-bottom: 0; }
.vc-table tbody tr:hover { background: var(--cf-ui-surface-2); }
.vc-table th:first-child,
.vc-table td:first-child { padding-left: var(--cf-ui-space-5); }
.vc-table th:last-child,
.vc-table td:last-child { padding-right: var(--cf-ui-space-5); }
.vc-table .vc-num { text-align: right; font-family: var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.vc-table thead .vc-num { text-align: right; }
.vc-table .vc-col-active { background: var(--cf-ui-surface-2); color: var(--cf-ui-fg); }
.vc-table tbody .vc-row-selected { background: var(--cf-ui-bg-subtle); }
.vc-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--cf-ui-fg); cursor: pointer; }
.vc-table input[type="checkbox"]:disabled { cursor: not-allowed; }
.vc-check-col { width: 1%; }
.vc-missing { color: var(--cf-ui-fg-muted); }

.vc-sort {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.vc-sort > span { display: inline-flex; align-items: center; gap: 4px; }
.vc-sort svg { width: 12px; height: 12px; flex: none; }
.vc-sort small { color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-sans); letter-spacing: 0; text-transform: none; }
.vc-sort:hover,
th[aria-sort="ascending"] .vc-sort,
th[aria-sort="descending"] .vc-sort { color: var(--cf-ui-fg); }

.vc-product { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vc-product a { color: var(--cf-ui-fg); font-weight: 600; text-decoration: none; }
.vc-product a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vc-product small { display: block; margin-top: 2px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }

.vc-heat { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.vc-bar { width: 64px; height: 6px; flex: none; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-bg-subtle); }
.vc-bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--cf-ui-fg) 18%, transparent), color-mix(in srgb, var(--cf-ui-fg) 34%, transparent)); transform-origin: left center; transition: width var(--cf-ui-duration-slow) var(--cf-ui-ease); }

/* Ranking table: a scroll box so the header can stay put, rank numerals, leader row. */
.vc-rank-wrap { max-height: min(78vh, 860px); overflow: auto; overscroll-behavior: contain; }
.vc-rank thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--cf-ui-border); }
.vc-rank tbody tr { transition: background var(--cf-ui-duration-fast) var(--cf-ui-ease); }
.vc-rank tbody tr:hover { background: var(--cf-ui-bg-subtle); }
.vc-rank-col { width: 1%; text-align: right; }
.vc-table .vc-check-col + .vc-rank-col { padding-left: 0; }
.vc-rank-num { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.vc-rank tbody .vc-row-lead { background: linear-gradient(90deg, var(--cf-ui-data-subtle), transparent 70%); }
.vc-rank tbody .vc-row-lead td:first-child { box-shadow: inset 3px 0 0 var(--cf-ui-data); }
.vc-row-lead .vc-rank-num,
.vc-row-lead .vc-heat { color: var(--cf-ui-data); font-weight: 600; }
.vc-table .vc-row-lead .vc-col-active { background: transparent; }
.vc-row-lead .vc-bar i { background: linear-gradient(90deg, var(--cf-ui-data), var(--cf-ui-logo-mark)); box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--cf-ui-logo-mark) 60%, transparent); }

.vc-best { background: var(--cf-ui-data-subtle); }
.vc-table .vc-best { color: var(--cf-ui-data); font-weight: 600; }
.vc-best svg { width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; }
.vc-src { display: block; margin-top: 3px; color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-sans); }
.vc-src a { color: var(--cf-ui-fg-muted); text-underline-offset: 2px; }
.vc-src a:hover { color: var(--cf-ui-fg); }
.vc-row-head b { display: block; color: var(--cf-ui-fg); font-weight: 600; }
.vc-row-head small { display: block; margin-top: 2px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }
.vc-wrap-cells tbody td,
.vc-wrap-cells tbody th { white-space: normal; min-width: 160px; line-height: 1.45; }
.vc-dot { display: inline-block; width: 8px; height: 8px; flex: none; margin-right: 6px; border-radius: 50%; vertical-align: 0; }

/* ---- Product mark (provider chip) ----------------------------------------------- */
.vc-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--cf-ui-border);
  border-radius: 8px;
  background: var(--cf-ui-surface-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cf-ui-surface) 40%, transparent), var(--cf-ui-shadow-sm);
  color: var(--cf-ui-fg);
  font: 700 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-sans);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.vc-mark[data-provider] { border-color: transparent; color: var(--cf-ui-bg); }
.vc-mark[data-provider="openai"] { background: var(--cf-ui-provider-openai); }
.vc-mark[data-provider="anthropic"] { background: var(--cf-ui-provider-anthropic); }
.vc-mark[data-provider="google"] { background: var(--cf-ui-provider-google); }
.vc-mark[data-provider="mistral"] { background: var(--cf-ui-provider-mistral); }
.vc-mark[data-provider="deepseek"] { background: var(--cf-ui-provider-deepseek); }
.vc-mark-sm { width: 22px; height: 22px; border-radius: 6px; }
.vc-mark-lg { width: 44px; height: 44px; border-radius: var(--cf-ui-radius-md); font-size: var(--cf-ui-text-md); }

/* ---- Empty and notes ---------------------------------------------------------- */
.vc-empty { display: grid; justify-items: center; gap: var(--cf-ui-space-2); padding: var(--cf-ui-space-10) var(--cf-ui-space-4); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); text-align: center; }
.vc-empty > svg { width: 24px; height: 24px; color: var(--cf-ui-fg-faint); }
.vc-empty h2,
.vc-empty h3 { font: 600 var(--cf-ui-text-lg) / 1.25 var(--cf-ui-font-sans); }
.vc-empty .ui-btn { margin-top: var(--cf-ui-space-2); }
.vc-warn { padding: var(--cf-ui-space-3) var(--cf-ui-space-4); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-warn-subtle); color: var(--cf-ui-warn); font-size: var(--cf-ui-text-sm); }
.vc-status { min-height: 1em; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }

/* ---- Selection tray ------------------------------------------------------------ */
.vc-tray {
  position: sticky;
  bottom: var(--cf-ui-space-4);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cf-ui-space-3);
  flex-wrap: wrap;
  margin-top: var(--cf-ui-space-3);
  padding: var(--cf-ui-space-3) var(--cf-ui-space-4);
  border-radius: var(--cf-ui-radius-lg);
  background: var(--cf-ui-inverse);
  color: var(--cf-ui-inverse-fg);
  box-shadow: var(--cf-ui-shadow-lg);
}
.vc-tray-items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-2); font-size: var(--cf-ui-text-sm); }
.vc-tray-items strong { font: 600 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); }
.vc-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding-inline: 8px; border: 1px solid var(--cf-ui-fg-muted); border-radius: var(--cf-ui-radius-xs); background: transparent; color: var(--cf-ui-inverse-fg); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans); cursor: pointer; }
.vc-chip svg { width: 12px; height: 12px; }
.vc-tray-actions { display: flex; align-items: center; gap: var(--cf-ui-space-2); font-size: var(--cf-ui-text-xs); }
.vc-tray-clear { padding: 6px 8px; border: 0; background: transparent; color: var(--cf-ui-inverse-fg); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vc-tray .ui-btn { background: var(--cf-ui-inverse-fg); color: var(--cf-ui-inverse); }
.vc-tray .vc-chip:focus-visible,
.vc-tray .vc-tray-clear:focus-visible,
.vc-tray .ui-btn:focus-visible { outline-color: var(--cf-ui-inverse-fg); }

/* ---- Charts ------------------------------------------------------------------- */
.vc-chart-view { display: grid; gap: var(--cf-ui-space-4); padding-block: var(--cf-ui-space-2); }
.vc-chart-view > p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.vc-axis-controls { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-3); }
.vc-bars { display: grid; gap: var(--cf-ui-space-2); min-width: 0; }
.vc-foot-note { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }

/* Entrance: bars grow from zero, points pop in. Played on first paint; charts below the fold are
 * parked by components/charts/reveal.tsx (data-reveal="wait") and replayed on scroll ("go"). */
@keyframes vc-grow { from { transform: scaleX(0); } }
@keyframes vc-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes vc-fade { from { opacity: 0; transform: translateY(-4px); } }
.vc-grow { transform-origin: left center; animation: vc-grow 900ms var(--cf-ui-ease) backwards; }
.vc-pop { transform-box: fill-box; transform-origin: center; animation: vc-pop 620ms var(--cf-ui-ease) backwards; }
[data-reveal="wait"] .vc-grow,
[data-reveal="wait"] .vc-pop { animation: none; }
[data-reveal="wait"] .vc-grow { transform: scaleX(0); }
[data-reveal="wait"] .vc-pop { opacity: 0; }

/* Ranked bars (components/charts/rank-bars.tsx). */
.vc-rb { display: grid; gap: var(--cf-ui-space-1); min-width: 0; }
.vc-rb-scale,
.vc-rb-row { display: grid; grid-template-columns: 22px minmax(96px, 30%) minmax(0, 1fr) minmax(72px, auto); align-items: center; column-gap: var(--cf-ui-space-3); }
.vc-rb-scale { height: 18px; color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.vc-rb-ticks { position: relative; align-self: stretch; }
.vc-rb-ticks span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.vc-rb-ticks span[data-edge="start"] { transform: none; }
.vc-rb-ticks span[data-edge="end"] { transform: translateX(-100%); }
.vc-rb-list { display: grid; margin: 0; padding: 0; list-style: none; }
.vc-rb-row { position: relative; min-height: 34px; border-radius: var(--cf-ui-radius-sm); font-size: var(--cf-ui-text-sm); transition: background var(--cf-ui-duration-fast) var(--cf-ui-ease); }
.vc-rb-row[tabindex] { cursor: default; }
.vc-rb-row:hover { background: var(--cf-ui-bg-subtle); }
.vc .vc-rb-row:focus-visible { outline-offset: -2px; }
.vc-rb-rank { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.vc-rb-name { display: flex; align-items: center; min-width: 0; color: var(--cf-ui-fg-2); }
.vc-rb-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-rb-track { display: flex; align-items: center; align-self: stretch; min-width: 0; border-right: 1px solid var(--cf-ui-border); background-image: linear-gradient(90deg, var(--cf-ui-border) 1px, transparent 1px); background-repeat: repeat-x; }
.vc-rb-fill { display: block; height: 10px; min-width: 3px; border-radius: var(--cf-ui-radius-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--cf-ui-fg) 14%, transparent), color-mix(in srgb, var(--cf-ui-fg) 28%, transparent)); transition: width var(--cf-ui-duration-slow) var(--cf-ui-ease); }
.vc-rb-row[data-win] .vc-rb-fill { background: linear-gradient(90deg, var(--cf-ui-data), var(--cf-ui-logo-mark)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cf-ui-data) 25%, transparent), 0 4px 14px -3px color-mix(in srgb, var(--cf-ui-logo-mark) 60%, transparent); }
.vc-rb-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--cf-ui-fg); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vc-rb-value svg { width: 13px; height: 13px; flex: none; }
.vc-rb-row[data-win] .vc-rb-rank,
.vc-rb-row[data-win] .vc-rb-value { color: var(--cf-ui-data); font-weight: 600; }
.vc-rb-row[data-win] .vc-rb-name { color: var(--cf-ui-fg); font-weight: 600; }
/* Compact (cards): name and value on one line, the bar full width underneath. */
.vc-rb-compact .vc-rb-scale { display: block; margin-left: 30px; }
.vc-rb-compact .vc-rb-ticks { display: block; height: 18px; }
.vc-rb-compact .vc-rb-row { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "rank name value" ". track track"; row-gap: 4px; padding-block: 6px; }
.vc-rb-compact .vc-rb-rank { grid-area: rank; }
.vc-rb-compact .vc-rb-name { grid-area: name; }
.vc-rb-compact .vc-rb-value { grid-area: value; }
.vc-rb-compact .vc-rb-track { grid-area: track; height: 12px; }
.vc-rb-compact .vc-rb-fill { height: 8px; }
.vc-rb-compact .vc-tip { left: 30px; }

/* Tooltips: exact value, unit, source and date on hover or keyboard focus. */
.vc-tip {
  position: absolute;
  top: calc(100% - 4px);
  left: calc(22px + 30% + var(--cf-ui-space-6));
  z-index: 6;
  display: grid;
  gap: 3px;
  min-width: 180px;
  max-width: 300px;
  padding: 9px 11px;
  border-radius: var(--cf-ui-radius-md);
  background: var(--cf-ui-inverse);
  box-shadow: var(--cf-ui-shadow-lg);
  color: var(--cf-ui-inverse-fg);
  font: 400 var(--cf-ui-text-2xs) / 1.35 var(--cf-ui-font-mono);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--cf-ui-duration) var(--cf-ui-ease), transform var(--cf-ui-duration) var(--cf-ui-ease);
}
.vc-tip b { display: flex; align-items: center; font: 600 var(--cf-ui-text-xs) / 1.3 var(--cf-ui-font-sans); }
.vc-rb-row:nth-last-child(-n + 2):not(:nth-child(-n + 2)) .vc-tip { top: auto; bottom: calc(100% - 4px); transform: translateY(4px); }
.vc-rb-row:hover .vc-tip,
.vc-rb-row:focus-visible .vc-tip { opacity: 1; transform: none; }

/* Scatter. */
.vc-scatter { display: grid; gap: var(--cf-ui-space-3); min-width: 0; }
.vc-scatter-plot { position: relative; }
.vc-scatter svg { display: block; width: 100%; height: auto; overflow: visible; }
.vc-grid-line { stroke: var(--cf-ui-border); stroke-width: 1; shape-rendering: crispEdges; }
.vc-grid-line-v { stroke: var(--cf-ui-border); stroke-width: 1; stroke-dasharray: 2 4; shape-rendering: crispEdges; }
.vc-axis-line { stroke: var(--cf-ui-border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.vc-axis-text { fill: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.vc-axis-title { fill: var(--cf-ui-fg-2); font: 500 var(--cf-ui-text-xs) var(--cf-ui-font-sans); }
.vc-sweet-stop { stop-color: var(--cf-ui-data); stop-opacity: 0.16; }
.vc-sweet-stop-end { stop-opacity: 0; }
.vc-sweet-label { fill: var(--cf-ui-data); font: 500 var(--cf-ui-text-2xs) var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.vc-scatter g.vc-pop { cursor: pointer; transition: opacity var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-point { stroke: var(--cf-ui-surface); stroke-width: 2; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--cf-ui-fg) 22%, transparent)); transition: r var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-halo { opacity: 0.2; transition: r var(--cf-ui-duration-slow) var(--cf-ui-ease); }
.vc-point-label { fill: var(--cf-ui-fg-2); font: 500 var(--cf-ui-text-2xs) var(--cf-ui-font-sans); paint-order: stroke; stroke: var(--cf-ui-surface); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.vc-tip-float { top: 0; left: 0; opacity: 1; transform: translate(14px, -50%); animation: vc-fade var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-tip-float[data-side="left"] { transform: translate(calc(-100% - 14px), -50%); }
.vc-readout { display: flex; flex-wrap: wrap; gap: 4px var(--cf-ui-space-2); min-height: 20px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-readout strong { color: var(--cf-ui-fg); }
.vc-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-legend button { display: inline-flex; align-items: center; height: 26px; padding-inline: 9px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-surface); color: var(--cf-ui-fg-2); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans); cursor: pointer; transition: border-color var(--cf-ui-duration-fast) var(--cf-ui-ease), background var(--cf-ui-duration-fast) var(--cf-ui-ease); }
.vc-legend button:hover { border-color: var(--cf-ui-border-strong); background: var(--cf-ui-bg-subtle); }
.vc-legend button[aria-pressed="true"] { border-color: var(--cf-ui-fg); color: var(--cf-ui-fg); }

/* Deltas ("3,2× más barato", "+18%"). */
.vc-delta { display: inline-flex; align-items: center; height: 20px; padding-inline: 7px; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg-2); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vc-delta-win { background: var(--cf-ui-data-subtle); color: var(--cf-ui-data); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cf-ui-data) 22%, transparent); }

/* ---- Sections ------------------------------------------------------------------ */
.vc-section { padding-top: var(--cf-ui-space-12); scroll-margin-top: calc(var(--cf-ui-header) + var(--cf-ui-space-12)); }
.vc-section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--cf-ui-space-4); flex-wrap: wrap; margin-bottom: var(--cf-ui-space-5); }
.vc-section-head h2 { font: 650 var(--cf-ui-text-2xl) / 1.15 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-section-head p { max-width: 70ch; margin-top: var(--cf-ui-space-1); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-base); line-height: 1.5; }
.vc-more { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: none; }
.vc-more:hover { color: var(--cf-ui-fg); }
.vc-more svg { width: 14px; height: 14px; }

.vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--cf-ui-space-3); }
.vc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-ui-space-3); }
.vc-chart-card { display: grid; align-content: start; gap: var(--cf-ui-space-3); min-width: 0; padding: var(--cf-ui-space-6); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: linear-gradient(180deg, var(--cf-ui-surface), var(--cf-ui-surface-2)); box-shadow: var(--cf-ui-shadow-sm); }
.vc-chart-card h3 { font: 600 var(--cf-ui-text-md) / 1.25 var(--cf-ui-font-sans); }
.vc-chart-card > p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.45; }

/* Link cards (starter comparisons, compare index). */
.vc-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--cf-ui-space-3);
  padding: var(--cf-ui-space-5);
  border: 1px solid var(--cf-ui-border);
  border-radius: var(--cf-ui-radius-lg);
  background: var(--cf-ui-surface);
  transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease), transform var(--cf-ui-duration) var(--cf-ui-ease);
}
.vc-card:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); transform: translateY(-1px); }
.vc-card:focus-within { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.vc-card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-2); }
.vc-card-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-2); }
.vc-card-icon svg { width: 18px; height: 18px; }
.vc-card h2,
.vc-card h3 { font: 600 var(--cf-ui-text-lg) / 1.25 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.vc-card p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.vc-card-foot { display: inline-flex; align-items: center; gap: 4px; padding-top: var(--cf-ui-space-3); border-top: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; }
.vc-card-foot svg { width: 14px; height: 14px; }
.vc-stretch { color: inherit; text-decoration: none; }
.vc-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vc .vc-stretch:focus-visible { outline: none; }

/* Reading list (beyond the table). */
.vc-catalog-reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--cf-ui-space-8); align-items: start; }
.vc-catalog-reading-intro { display: grid; justify-items: start; gap: var(--cf-ui-space-3); }
.vc-catalog-reading-intro h2 { font: 650 var(--cf-ui-text-2xl) / 1.15 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-catalog-reading-intro p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-base); line-height: 1.55; }
.vc-list { display: grid; margin: 0; padding: 0; list-style: none; }
.vc-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-3) var(--cf-ui-space-5); border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg); text-decoration: none; }
.vc-list li:last-child a { border-bottom: 0; }
.vc-list a:hover { background: var(--cf-ui-surface-2); }
.vc .vc-list a:focus-visible { outline-offset: -2px; }
.vc-list a > svg { width: 15px; height: 15px; flex: none; color: var(--cf-ui-fg-muted); }
.vc-list-text { display: grid; gap: 3px; min-width: 0; }
.vc-list-text b { font-size: var(--cf-ui-text-base); font-weight: 600; line-height: 1.35; }
.vc-list-topic { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }

/* ---- Lead blocks ---------------------------------------------------------------- */
.vc-advice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cf-ui-space-6);
  flex-wrap: wrap;
  padding: var(--cf-ui-space-8);
  border-radius: var(--cf-ui-radius-xl);
  background: var(--cf-ui-inverse);
}
.vc-advice h2 { color: var(--cf-ui-inverse-fg); font: 650 var(--cf-ui-text-3xl) / 1.1 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-advice p { max-width: 60ch; margin-top: var(--cf-ui-space-2); color: var(--cf-ui-inverse-fg); font-size: var(--cf-ui-text-md); line-height: var(--cf-ui-leading-normal); opacity: 0.86; }
.vc-advice .ui-btn:focus-visible { outline-color: var(--cf-ui-inverse-fg); }

.vc-lead-card { display: grid; align-content: start; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-brand-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-brand-subtle); }
.vc-lead-card .ui-eyebrow { color: var(--cf-ui-brand-text); }
.vc-lead-card h2 { font: 650 var(--cf-ui-text-xl) / 1.2 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.vc-lead-card p { color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.vc-lead-card ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); }
.vc-lead-card li { display: flex; gap: var(--cf-ui-space-2); }
.vc-lead-card li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--cf-ui-brand-text); }
.vc-lead-card .ui-btn { justify-self: start; }
.vc-lead-card small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }

/* ---- Product page ------------------------------------------------------------- */
.vc-product-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--cf-ui-space-8); align-items: start; padding-block: var(--cf-ui-space-8) var(--cf-ui-space-4); }
.vc-product-id { display: grid; justify-items: start; gap: var(--cf-ui-space-4); }
.vc-product-id h1,
.vc-hero-compare h1 { font: 700 var(--cf-ui-text-display) / 1.02 var(--cf-ui-font-display); letter-spacing: var(--cf-ui-tracking-display); }
.vc-vs-word { color: var(--cf-ui-fg-muted); font-weight: 500; }
.vc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-2); }

.vc-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); overflow: hidden; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
/* Cell rules drawn right and below each card (clipped at the frame), so a short last row leaves clean surface, not a grey hole. */
.vc-metric { display: grid; align-content: start; gap: var(--cf-ui-space-2); padding: var(--cf-ui-space-4) var(--cf-ui-space-5); background: var(--cf-ui-surface); box-shadow: 1px 0 0 var(--cf-ui-border), 0 1px 0 var(--cf-ui-border); }
.vc-metric-top { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-2); }
.vc-metric h3 { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1.3 var(--cf-ui-font-sans); }
.vc-metric-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-2xl) / 1.1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.vc-metric-value small { color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-xs) / 1.2 var(--cf-ui-font-sans); }
.vc-metric[data-win] { background: linear-gradient(180deg, var(--cf-ui-data-subtle), var(--cf-ui-surface) 70%); }
.vc-metric p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.45; }

.vc-specs { display: grid; margin: 0; }
.vc-specs > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--cf-ui-space-4); padding: 10px var(--cf-ui-space-5); border-bottom: 1px solid var(--cf-ui-border); font-size: var(--cf-ui-text-sm); }
.vc-specs > div:last-child { border-bottom: 0; }
.vc-specs dt { color: var(--cf-ui-fg-muted); }
.vc-specs dd { margin: 0; color: var(--cf-ui-fg); overflow-wrap: anywhere; }
.vc-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--cf-ui-space-4); align-items: start; }

.vc-evidence { display: grid; align-content: start; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.vc-evidence h3 { font: 600 var(--cf-ui-text-md) / 1.25 var(--cf-ui-font-sans); }
.vc-evidence p { color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.vc-evidence ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vc-evidence li a { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); text-decoration: underline; text-decoration-color: var(--cf-ui-border-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
.vc-evidence li a:hover { text-decoration-color: var(--cf-ui-fg); }
.vc-evidence li svg { width: 12px; height: 12px; flex: none; }
.vc-evidence small { color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) / 1.4 var(--cf-ui-font-mono); }

.vc-catalog-related { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); }
.vc-catalog-related a { display: inline-flex; align-items: center; gap: 6px; height: var(--cf-ui-control-sm); padding-inline: 10px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-sm); background: var(--cf-ui-surface); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); text-decoration: none; }
.vc-catalog-related a:hover { border-color: var(--cf-ui-border-strong); color: var(--cf-ui-fg); }
.vc-catalog-related svg { width: 13px; height: 13px; }

/* Account save / alert (only when accounts are enabled). */
.vc-account { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-2) var(--cf-ui-space-3); }
.vc-account > span { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); overflow-wrap: anywhere; }
.vc-account > span a { margin-left: 4px; color: var(--cf-ui-fg); text-underline-offset: 3px; }
.vc-account > small { flex-basis: 100%; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.45; }
.vc-account-alert { padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); }
.vc-alert-options { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-3); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); }
.vc-alert-options label { display: inline-flex; align-items: center; gap: 6px; }
.vc-alert-options input { accent-color: var(--cf-ui-fg); }
.vc-account .ui-btn:disabled { cursor: default; opacity: 0.7; }

/* ---- Compare page -------------------------------------------------------------- */
.vc-compare-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--cf-ui-space-4); flex-wrap: wrap; }
/* Versus header: one large card per product; the best key figure is data green. */
.vc-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-ui-space-4); margin-block: var(--cf-ui-space-6); }
.vc-versus[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, 0.62fr); }
.vc-versus[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(160px, 0.5fr); }
.vc-versus[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vc-vcard {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--cf-ui-space-4);
  min-width: 0;
  padding: var(--cf-ui-space-5);
  border: 1px solid var(--cf-ui-border);
  border-radius: var(--cf-ui-radius-xl);
  background: radial-gradient(130% 80% at 0% 0%, var(--cf-ui-brand-subtle), transparent 62%), var(--cf-ui-surface);
  box-shadow: var(--cf-ui-shadow-md);
}
.vc-vcard[data-win] { border-color: color-mix(in srgb, var(--cf-ui-data) 45%, var(--cf-ui-border)); background: radial-gradient(120% 70% at 100% 0%, var(--cf-ui-data-subtle), transparent 60%), radial-gradient(130% 80% at 0% 0%, var(--cf-ui-brand-subtle), transparent 62%), var(--cf-ui-surface); }
.vc-vcard-empty { place-content: center stretch; border-style: dashed; background: transparent; box-shadow: none; }
.vc-vcard-empty > small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-vs {
  position: absolute;
  top: 50%;
  left: calc(var(--cf-ui-space-4) / -2);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cf-ui-inverse);
  box-shadow: 0 0 0 4px var(--cf-ui-bg), var(--cf-ui-shadow-md);
  color: var(--cf-ui-inverse-fg);
  font: 600 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}
.vc-slot-top { display: flex; align-items: center; gap: var(--cf-ui-space-2); min-height: 28px; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.vc-slot-top > svg { width: 18px; height: 18px; color: var(--cf-ui-fg-faint); }
.vc-slot-top .ui-icon-btn { width: var(--cf-ui-control-sm); height: var(--cf-ui-control-sm); margin-left: auto; }
.vc-slot-top .ui-icon-btn svg { width: 14px; height: 14px; }
.vc-vcard-id { display: grid; gap: 4px; min-width: 0; }
.vc-vcard-id h2 { font: 650 var(--cf-ui-text-2xl) / 1.1 var(--cf-ui-font-display); letter-spacing: var(--cf-ui-tracking-heading); overflow-wrap: anywhere; }
.vc-vcard-id span { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.vc-vcard-fig { display: grid; gap: 4px; padding-top: var(--cf-ui-space-4); border-top: 1px solid var(--cf-ui-border); }
.vc-vcard-fig > span { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.vc-vcard-fig b { display: flex; align-items: center; gap: 6px; color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-4xl) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.vc-vcard-fig b svg { width: 22px; height: 22px; flex: none; }
.vc-vcard[data-win] .vc-vcard-fig b { color: var(--cf-ui-data); }
.vc-vcard-fig small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-vcard-wins { display: grid; gap: 6px; color: var(--cf-ui-fg-2); font: 500 var(--cf-ui-text-xs) / 1.2 var(--cf-ui-font-sans); }
.vc-wins-bar { display: flex; gap: 3px; }
.vc-wins-bar i { flex: 1; height: 4px; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-border-strong); }
.vc-wins-bar i[data-on] { background: linear-gradient(90deg, var(--cf-ui-data), var(--cf-ui-logo-mark)); }
.vc-vcard-foot { display: grid; gap: var(--cf-ui-space-2); }
.vc-vcard .vc-field { width: 100%; }
.vc-vcard-foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-xs); text-decoration: none; }
.vc-vcard-foot a:hover { color: var(--cf-ui-fg); }
.vc-vcard-foot a svg { width: 12px; height: 12px; }

/* Sticky bar: section anchors, plus a compact versus summary once the cards scroll away. */
.vc-sticky {
  position: sticky;
  top: var(--cf-ui-header);
  z-index: 4;
  margin-inline: calc(var(--cf-ui-gutter) * -1);
  margin-top: var(--cf-ui-space-6);
  border-bottom: 1px solid var(--cf-ui-border);
  background: var(--cf-ui-glass);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}
.vc-sticky-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-2) var(--cf-ui-gutter); border-bottom: 1px solid var(--cf-ui-border); animation: vc-fade var(--cf-ui-duration-slow) var(--cf-ui-ease); }
.vc-sticky-summary ul { display: flex; gap: var(--cf-ui-space-2) var(--cf-ui-space-5); min-width: 0; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.vc-sticky-summary li { display: inline-flex; align-items: center; gap: var(--cf-ui-space-2); flex: none; color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); font-weight: 600; }
.vc-sticky-summary li b { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.vc-sticky-summary li[data-win] b { color: var(--cf-ui-data); }
.vc-sticky-summary .ui-btn { flex: none; }
.vc-anchors { display: flex; gap: var(--cf-ui-space-1); padding: var(--cf-ui-space-2) var(--cf-ui-gutter); overflow-x: auto; }
.vc-anchors a { flex: none; padding: 6px 10px; border-radius: var(--cf-ui-radius-sm); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.vc-anchors a:hover { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }

.vc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-2) var(--cf-ui-space-5); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); }
.vc-controls label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.vc-controls input { width: 15px; height: 15px; margin: 0; accent-color: var(--cf-ui-fg); }
.vc-controls > span { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-controls > span i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cf-ui-data-subtle); box-shadow: inset 0 0 0 1px var(--cf-ui-data); }

/* Head-to-head metric rows: value, winner check, gap to the best and a mini bar per cell. */
.vc-duel tbody td { vertical-align: top; }
.vc-duel-head { display: inline-flex; align-items: center; gap: var(--cf-ui-space-2); }
.vc-cell-top { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.vc-cell-value { font-size: var(--cf-ui-text-base); }
.vc-gap { color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }
.vc-mini { display: block; width: 100%; max-width: 140px; height: 4px; margin: 7px 0 0 auto; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-bg-subtle); }
.vc-mini i { display: block; height: 100%; min-width: 3px; margin-left: auto; border-radius: inherit; background: color-mix(in srgb, var(--cf-ui-fg) 26%, transparent); transform-origin: right center; }
.vc-best .vc-mini i { background: linear-gradient(90deg, var(--cf-ui-logo-mark), var(--cf-ui-data)); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--cf-ui-logo-mark) 60%, transparent); }
.vc-verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 34ch; margin-top: 8px; color: var(--cf-ui-data); font: 600 var(--cf-ui-text-xs) / 1.3 var(--cf-ui-font-sans); white-space: normal; }
.vc-verdict svg { width: 13px; height: 13px; flex: none; }

/* Cost at scale. */
.vc-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--cf-ui-space-3); }
.vc-level { display: grid; align-content: start; gap: var(--cf-ui-space-4); min-width: 0; padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: linear-gradient(180deg, var(--cf-ui-surface), var(--cf-ui-surface-2)); box-shadow: var(--cf-ui-shadow-sm); }
.vc-level header { display: grid; gap: 2px; }
.vc-level h3 { font: 650 var(--cf-ui-text-lg) / 1.2 var(--cf-ui-font-display); letter-spacing: -0.01em; }
.vc-level header p { color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) / 1.4 var(--cf-ui-font-mono); }
.vc-level-hero { display: grid; gap: 6px; padding-block: var(--cf-ui-space-3); border-block: 1px solid var(--cf-ui-border); }
.vc-level-hero > span:first-child { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.vc-level-hero b { display: flex; align-items: baseline; gap: 6px; color: var(--cf-ui-data); font: 600 var(--cf-ui-text-3xl) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.vc-level-hero b small { color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans); letter-spacing: 0; }
.vc-level-who { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cf-ui-space-2); color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); font-weight: 600; }
.vc-levels-note { display: flex; align-items: flex-start; gap: var(--cf-ui-space-2); margin-top: var(--cf-ui-space-3); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.5; }
.vc-levels-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.vc-cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); margin-top: var(--cf-ui-space-4); }
.vc-cost-inputs { display: grid; align-content: start; gap: var(--cf-ui-space-4); padding: var(--cf-ui-space-5); border-right: 1px solid var(--cf-ui-border); }
.vc-cost-inputs h3 { font: 650 var(--cf-ui-text-lg) / 1.2 var(--cf-ui-font-sans); }
.vc-cost-inputs label { display: grid; gap: 6px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; }
.vc-cost-inputs input { width: 100%; font-family: var(--cf-ui-font-mono); }
.vc-cost-inputs input[aria-invalid="true"] { border-color: var(--cf-ui-danger); }
.vc-cost-inputs p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.5; }
.vc-cost-results { display: grid; align-content: start; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-5); }
.vc-cost-results > small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); text-align: right; }

/* Product page: hero figures, position in category, closest alternatives. */
.vc-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--cf-ui-space-4); width: 100%; margin: var(--cf-ui-space-2) 0 0; }
.vc-figures > div { display: grid; align-content: start; gap: 6px; padding-left: var(--cf-ui-space-4); border-left: 1px solid var(--cf-ui-border-strong); }
.vc-figures > div[data-win] { border-left-color: var(--cf-ui-data); }
.vc-figures dt { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.vc-figures dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; }
.vc-figures dd small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-figure { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-4xl) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.vc-figures > div[data-win] .vc-figure { color: var(--cf-ui-data); }
.vc-figures .vc-figure-rank { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }

.vc-pos { display: grid; gap: 4px; margin-block: 2px 4px; }
.vc-pos-line { position: relative; height: 20px; margin-inline: 7px; }
.vc-pos-line::before { content: ""; position: absolute; top: 50%; right: -7px; left: -7px; height: 2px; margin-top: -1px; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-bg-subtle); }
.vc-pos-dot { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--cf-ui-fg-faint); }
.vc-pos-me { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--cf-ui-brand); box-shadow: 0 0 0 3px var(--cf-ui-surface), 0 0 0 5px color-mix(in srgb, var(--cf-ui-brand) 28%, transparent); }
.vc-pos-me[data-win] { background: linear-gradient(90deg, var(--cf-ui-data), var(--cf-ui-logo-mark)); box-shadow: 0 0 0 3px var(--cf-ui-surface), 0 0 14px 2px color-mix(in srgb, var(--cf-ui-logo-mark) 55%, transparent); }
.vc-pos-axis { display: flex; justify-content: space-between; color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }

.vc-closest { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--cf-ui-space-3); }
.vc-closest-card { display: grid; align-content: start; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); color: var(--cf-ui-fg); text-decoration: none; transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease), transform var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-closest-card:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); transform: translateY(-2px); }
.vc-closest-top { display: flex; align-items: center; gap: var(--cf-ui-space-2); min-width: 0; }
.vc-closest-top > span { display: grid; gap: 2px; min-width: 0; }
.vc-closest-top b { overflow: hidden; font-size: var(--cf-ui-text-sm); text-overflow: ellipsis; white-space: nowrap; }
.vc-closest-top small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }
.vc-closest-top > svg { width: 14px; height: 14px; flex: none; margin-left: auto; color: var(--cf-ui-fg-muted); }
.vc-closest-figs { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-closest-figs b { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-md) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.vc-closest-delta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.vc-closest-delta small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }
.vc-subhead { margin: var(--cf-ui-space-6) 0 var(--cf-ui-space-3); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }

/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .vc-product-hero,
  .vc-two,
  .vc-catalog-reading,
  .vc-grid-2,
  .vc-cost { grid-template-columns: 1fr; }
  .vc-versus[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-vs { display: none; }
  .vc-cost-inputs { border-right: 0; border-bottom: 1px solid var(--cf-ui-border); }
}
@media (max-width: 560px) {
  .vc-hero { padding-block: var(--cf-ui-space-8) var(--cf-ui-space-4); }
  .vc-toolbar { flex-direction: column; align-items: stretch; }
  .vc-toolbar > * { width: 100%; flex: none; }
  .vc-toolbar .ui-seg { width: max-content; }
  .vc-panel-head,
  .vc-panel-body { padding-inline: var(--cf-ui-space-4); }
  .vc-table-wrap { margin-inline: calc(var(--cf-ui-space-4) * -1); }
  .vc-table th:first-child,
  .vc-table td:first-child { padding-left: var(--cf-ui-space-4); }
  .vc-versus[data-count] { grid-template-columns: 1fr; }
  .vc-controls > span { margin-left: 0; }
  .vc-advice { padding: var(--cf-ui-space-5); }
  .vc-rb-scale,
  .vc-rb-row { grid-template-columns: 18px minmax(72px, 34%) minmax(0, 1fr) auto; column-gap: var(--cf-ui-space-2); }
  .vc-tip { left: var(--cf-ui-space-6); }
  .vc-specs > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-kpi,
  .vc-card,
  .vc-closest-card,
  .vc-point,
  .vc-halo,
  .vc-tip,
  .vc-bar i,
  .vc-rb-fill,
  .vc-scatter g.vc-pop { transition: none; }
  .vc-grow,
  .vc-pop,
  .vc-tip-float,
  .vc-sticky-summary { animation: none; }
  .vc-card:hover,
  .vc-kpi:hover,
  .vc-closest-card:hover { transform: none; }
}

/* Guides linked from comparators, rankings and product pages (components/category-guides.tsx). */
.vc-guides { margin: var(--cf-ui-space-12) 0 var(--cf-ui-space-8); }
.vc-guides h2 { margin: 0 0 var(--cf-ui-space-2); font: 650 var(--cf-ui-text-xl) / 1.25 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-guides p { margin: 0 0 var(--cf-ui-space-4); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); }
.vc-guides ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.vc-guides a { display: grid; gap: 6px; height: 100%; padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); color: var(--cf-ui-fg); text-decoration: none; }
.vc-guides a:hover { border-color: var(--cf-ui-border-strong); }
.vc-guides a:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.vc-guides small { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.vc-guides b { font-size: var(--cf-ui-text-md); font-weight: 600; line-height: 1.35; }

/* Price in pesos and other currencies on product pages (components/pages/catalog-pages.tsx, lib/fx.ts). */
.vc-fx { margin: var(--cf-ui-space-10) 0; }
.vc-fx h2 { margin: 0 0 var(--cf-ui-space-2); font: 650 var(--cf-ui-text-xl) / 1.25 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-fx p { margin: 0 0 var(--cf-ui-space-3); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: var(--cf-ui-leading-normal); }
.vc-fx-scroll { overflow-x: auto; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.vc-fx table { width: 100%; border-collapse: collapse; font-size: var(--cf-ui-text-sm); }
.vc-fx th, .vc-fx td { padding: var(--cf-ui-space-3) var(--cf-ui-space-4); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--cf-ui-border); }
.vc-fx th:first-child, .vc-fx thead th:first-child { text-align: left; }
.vc-fx tbody tr:last-child th, .vc-fx tbody tr:last-child td { border-bottom: 0; }
.vc-fx thead th { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: 0.05em; }
.vc-fx tbody th { color: var(--cf-ui-fg); font-weight: 600; }
.vc-fx small { color: var(--cf-ui-fg-muted); font-weight: 400; }
.vc-fx-src { margin-top: var(--cf-ui-space-3); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-fx-src a { color: var(--cf-ui-fg-2); text-decoration: underline; text-underline-offset: 3px; }

/* src/app/v2-content.css */
/*
 * Library and content pages on design system v2: the developer library hub, the guide view,
 * the legacy editorial notes, methodology, editorial team and legal pages.
 * Only --cf-ui-* tokens, so every rule follows the light/dark theme. Classes are prefixed vc-.
 */

.vc { min-height: 100vh; background: var(--cf-ui-bg); }
.vc h1,
.vc h2,
.vc h3 { margin: 0; color: var(--cf-ui-fg); text-wrap: balance; }
.vc p { margin: 0; }
.vc :where(a, button, summary, [tabindex="0"]):focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; border-radius: var(--cf-ui-radius-xs); }

/* ---- Reading grid: centred column, table of contents on the right ---------------- */
.vc-reading {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  max-width: 1120px;
  justify-content: center;
  column-gap: var(--cf-ui-space-12);
  padding-bottom: var(--cf-ui-space-16);
}
.vc-reading > * { grid-column: 1; min-width: 0; }
.vc-aside { display: none; }

@media (min-width: 1180px) {
  .vc-reading { grid-template-columns: minmax(0, 720px) minmax(0, 240px); }
  .vc-reading > * { grid-column: 1; }
  .vc-reading > .vc-aside {
    display: grid;
    grid-column: 2;
    grid-row: 2 / span 4;
    align-self: start;
    align-content: start;
    gap: var(--cf-ui-space-6);
    position: sticky;
    top: calc(var(--cf-ui-header) + var(--cf-ui-space-8));
    max-width: 260px;
    max-height: calc(100vh - var(--cf-ui-header) - var(--cf-ui-space-12));
    overflow-y: auto;
    padding-bottom: var(--cf-ui-space-4);
  }
  .vc-toc-mobile { display: none; }
}

/* ---- Hero ------------------------------------------------------------------------ */
.vc-hero { display: grid; gap: var(--cf-ui-space-4); padding-block: var(--cf-ui-space-12) var(--cf-ui-space-8); }
.vc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.vc-crumbs a { color: var(--cf-ui-fg-muted); text-decoration: none; }
.vc-crumbs a:hover { color: var(--cf-ui-fg); }
.vc-crumbs svg { width: 14px; height: 14px; }
.vc-title { font: 700 var(--cf-ui-text-4xl) / 1.08 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-display); }
.vc-title span { color: var(--cf-ui-fg-muted); }
.vc-lead { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xl); line-height: var(--cf-ui-leading-normal); }
.vc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-2) var(--cf-ui-space-4); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.vc-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.vc-meta a { display: inline-flex; align-items: center; min-height: 24px; padding-block: 4px; }
.vc-meta svg { width: 14px; height: 14px; flex: none; }
.vc-meta a { color: var(--cf-ui-fg-2); text-decoration: underline; text-decoration-color: var(--cf-ui-border-strong); text-underline-offset: 3px; }
.vc-meta a:hover { color: var(--cf-ui-fg); text-decoration-color: var(--cf-ui-fg); }

.vc-byline { display: flex; align-items: center; gap: var(--cf-ui-space-3); padding-top: var(--cf-ui-space-4); border-top: 1px solid var(--cf-ui-border); }
.vc-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-inverse); color: var(--cf-ui-inverse-fg); font: 700 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-sans); }
.vc-byline-text { display: grid; gap: 2px; min-width: 0; }
.vc-byline-text > a { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-base); font-weight: 600; text-decoration: none; }
.vc-byline-text > a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- "In 30 seconds" and callouts -------------------------------------------------- */
.vc-summary { display: grid; gap: var(--cf-ui-space-2); margin-bottom: var(--cf-ui-space-8); padding: var(--cf-ui-space-5) var(--cf-ui-space-6); border: 1px solid var(--cf-ui-border); border-left: 3px solid var(--cf-ui-data); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); }
.vc-summary .ui-eyebrow { color: var(--cf-ui-data); }
.vc-summary p { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-lg); font-weight: 500; line-height: var(--cf-ui-leading-normal); }

.vc-callout { display: grid; gap: var(--cf-ui-space-2); margin-block: var(--cf-ui-space-8); padding: var(--cf-ui-space-5) var(--cf-ui-space-6); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface-2); }
.vc-callout > strong { display: inline-flex; align-items: center; gap: var(--cf-ui-space-2); color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-md) / 1.3 var(--cf-ui-font-sans); }
.vc-callout > strong svg { width: 16px; height: 16px; }
.vc-prose .vc-callout p { margin: 0; font-size: var(--cf-ui-text-md); }

/* ---- Prose ------------------------------------------------------------------------ */
.vc-prose { color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-lg); line-height: 1.7; overflow-wrap: break-word; }
.vc-prose p { margin: 0 0 1.15em; }
.vc-prose section[id] { scroll-margin-top: calc(var(--cf-ui-header) + var(--cf-ui-space-6)); }
.vc-prose h2 { position: relative; margin: 2.2em 0 0.65em; font: 650 var(--cf-ui-text-2xl) / 1.25 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); scroll-margin-top: calc(var(--cf-ui-header) + var(--cf-ui-space-6)); }
.vc-prose > :first-child,
.vc-prose > section:first-child > h2:first-child { margin-top: 0; }
.vc-prose h2 svg { width: 20px; height: 20px; margin-right: var(--cf-ui-space-2); vertical-align: -2px; color: var(--cf-ui-fg-muted); }
.vc-prose h3 { margin: 1.8em 0 0.5em; font: 600 var(--cf-ui-text-xl) / 1.3 var(--cf-ui-font-sans); }
.vc-prose ul,
.vc-prose ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.vc-prose li { margin-bottom: 0.45em; padding-left: 0.2em; }
.vc-prose li::marker { color: var(--cf-ui-fg-faint); }
.vc-prose strong { color: var(--cf-ui-fg); font-weight: 600; }
.vc-prose a { color: var(--cf-ui-fg); text-decoration: underline; text-decoration-color: var(--cf-ui-border-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vc-prose a:hover { text-decoration-color: var(--cf-ui-fg); }
.vc-prose code { padding: 0.1em 0.35em; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xs); background: var(--cf-ui-bg-subtle); font: 0.86em / 1.4 var(--cf-ui-font-mono); }
.vc-lead-paragraph { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-xl); line-height: 1.6; }

.vc-anchor { margin-left: var(--cf-ui-space-2); color: var(--cf-ui-fg-faint); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-prose .vc-anchor { color: var(--cf-ui-fg-faint); text-decoration: none; }
.vc-prose h2:hover .vc-anchor,
.vc-anchor:focus-visible { opacity: 1; }
@media (hover: none) { .vc-anchor { opacity: 1; } }

/* Code blocks (copy button: CopyCodeButton) */
.vc-code { margin: 1.6em 0; overflow: hidden; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface-2); }
.vc-code-head { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); padding: 6px var(--cf-ui-space-2) 6px var(--cf-ui-space-4); border-bottom: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface); }
.vc-code-lang { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.vc-code pre { margin: 0; padding: var(--cf-ui-space-4); overflow-x: auto; color: var(--cf-ui-fg); font: 400 var(--cf-ui-text-sm) / 1.65 var(--cf-ui-font-mono); tab-size: 2; }
.vc-prose .vc-code code { padding: 0; border: 0; background: transparent; font: inherit; }
.vc-code pre:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: -2px; }
.vc-published pre { max-width: 100%; overflow-x: auto; padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg); font: 400 var(--cf-ui-text-sm) / 1.65 var(--cf-ui-font-mono); tab-size: 2; }
.vc-published pre code { padding: 0; border: 0; background: transparent; font: inherit; white-space: pre; }
.vc-published pre:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.vc-code figcaption { padding: 10px var(--cf-ui-space-4); border-top: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.vc-copy { display: inline-flex; align-items: center; gap: 6px; height: var(--cf-ui-control-sm); padding-inline: 10px; border: 1px solid transparent; border-radius: var(--cf-ui-radius-sm); background: transparent; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans); cursor: pointer; transition: background-color var(--cf-ui-duration) var(--cf-ui-ease), color var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-copy:hover { border-color: var(--cf-ui-border); background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }
.vc-copy:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 1px; }

/* Tables scroll inside their own container */
.vc-table { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); }
.vc-table:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.vc-table table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: var(--cf-ui-text-base); line-height: 1.5; }
.vc-table th,
.vc-table td { padding: 10px var(--cf-ui-space-4); border-bottom: 1px solid var(--cf-ui-border); text-align: left; vertical-align: top; }
.vc-table thead th { background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.vc-table tbody th { color: var(--cf-ui-fg); font-weight: 600; }
.vc-table td { color: var(--cf-ui-fg-2); }
.vc-table tbody tr:last-child > * { border-bottom: 0; }

/* Contextual link and per-section sources */
.vc-deeper { display: flex; flex-wrap: wrap; gap: 4px var(--cf-ui-space-2); align-items: baseline; margin: 1.4em 0; padding: var(--cf-ui-space-3) var(--cf-ui-space-4); border-left: 2px solid var(--cf-ui-border-strong); background: var(--cf-ui-bg-subtle); border-radius: 0 var(--cf-ui-radius-sm) var(--cf-ui-radius-sm) 0; font-size: var(--cf-ui-text-md); line-height: 1.5; }
.vc-prose .vc-deeper { margin: 1.4em 0; }
.vc-deeper > span { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.5 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.vc-prose .vc-deeper a { font-weight: 600; }
.vc-prose .vc-section-sources { margin-top: 1em; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.6; }
.vc-prose .vc-section-sources a { color: var(--cf-ui-fg-muted); }
.vc-prose .vc-section-sources a:hover { color: var(--cf-ui-fg); }

.vc-sources { margin-top: var(--cf-ui-space-12); padding-top: var(--cf-ui-space-2); border-top: 1px solid var(--cf-ui-border); }
.vc-prose .vc-sources h2 { margin-top: var(--cf-ui-space-6); font-size: var(--cf-ui-text-xl); }
.vc-prose .vc-sources p,
.vc-prose .vc-sources li { font-size: var(--cf-ui-text-base); line-height: 1.6; }
.vc-prose .vc-sources ul { columns: 2 260px; column-gap: var(--cf-ui-space-8); }
.vc-prose .vc-sources li { break-inside: avoid; }

/* ---- Weekly brief inside the reading column ------------------------------------------ */
.vc-brief-card { display: grid; gap: var(--cf-ui-space-3); margin: var(--cf-ui-space-10) 0; padding: var(--cf-ui-space-6); border: 1px solid var(--cf-ui-brand-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-brand-subtle); font-size: var(--cf-ui-text-base); line-height: var(--cf-ui-leading-normal); }
.vc-brief-card .ui-eyebrow { color: var(--cf-ui-brand-text); }
.vc-prose .vc-brief-card p { margin: 0; }
.vc-brief-title { color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-xl) / 1.25 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-prose .vc-brief-lead { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-md); }
.vc-prose .vc-brief-card .hv-brief-status { font-size: var(--cf-ui-text-xs); }

/* ---- End of guide: next steps and related ------------------------------------------ */
.vc-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--cf-ui-space-3); margin-top: var(--cf-ui-space-12); }
.vc-next-card { display: grid; align-content: start; gap: var(--cf-ui-space-2); padding: var(--cf-ui-space-6); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.vc-next-card h2 { font: 650 var(--cf-ui-text-xl) / 1.25 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-next-card p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-base); line-height: var(--cf-ui-leading-normal); }
.vc-next-card .ui-btn { justify-self: start; margin-top: var(--cf-ui-space-3); }
.vc-next-card .ui-btn svg { width: 15px; height: 15px; }
.vc-next-advice { border-color: var(--cf-ui-brand-border); background: var(--cf-ui-brand-subtle); }
.vc-next-advice .ui-eyebrow { color: var(--cf-ui-brand-text); }

.vc-related { display: grid; gap: var(--cf-ui-space-4); margin-top: var(--cf-ui-space-12); }
.vc-related > h2 { font: 650 var(--cf-ui-text-xl) / 1.25 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-related ul { display: grid; gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.vc-related a { display: grid; gap: 4px; padding: var(--cf-ui-space-4) var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); color: var(--cf-ui-fg); text-decoration: none; transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-related a:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); }
.vc-related b { font-size: var(--cf-ui-text-md); font-weight: 600; line-height: 1.35; }

.vc-topic-label { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.vc-small-meta { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }

/* ---- Table of contents with reading progress ------------------------------------------ */
.vc-toc { display: grid; gap: var(--cf-ui-space-3); }
.vc-toc ol { display: grid; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--cf-ui-border); }
.vc-toc a { display: block; margin-left: -1px; padding: 6px 0 6px var(--cf-ui-space-3); border-left: 2px solid transparent; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.4; text-decoration: none; transition: color var(--cf-ui-duration) var(--cf-ui-ease), border-color var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-toc a:hover { color: var(--cf-ui-fg); }
.vc-toc a[aria-current="true"] { border-left-color: var(--cf-ui-fg); color: var(--cf-ui-fg); font-weight: 500; }
.vc-toc-progress { height: 2px; overflow: hidden; border-radius: 1px; background: var(--cf-ui-border); }
.vc-toc-progress > span { display: block; height: 100%; background: var(--cf-ui-fg); transform-origin: left center; transition: transform var(--cf-ui-duration-fast) linear; }
.vc-progress-top { position: fixed; top: var(--cf-ui-header); left: 0; right: 0; z-index: var(--cf-ui-z-header); height: 2px; pointer-events: none; }
.vc-progress-top > span { display: block; height: 100%; background: var(--cf-ui-fg); transform-origin: left center; }
@media (min-width: 1180px) { .vc-progress-top { display: none; } }

.vc-toc-mobile { margin-bottom: var(--cf-ui-space-8); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); }
.vc-toc-mobile summary { display: flex; justify-content: space-between; align-items: center; min-height: var(--cf-ui-control-lg); padding-inline: var(--cf-ui-space-4); color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-base) / 1.2 var(--cf-ui-font-sans); cursor: pointer; list-style: none; }
.vc-toc-mobile summary::-webkit-details-marker { display: none; }
.vc-toc-mobile summary svg { width: 16px; height: 16px; color: var(--cf-ui-fg-muted); transition: transform var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-toc-mobile[open] summary svg { transform: rotate(180deg); }
.vc-toc-mobile ol { margin: 0; padding: 0 var(--cf-ui-space-4) var(--cf-ui-space-3) calc(var(--cf-ui-space-4) + 1.2em); }
.vc-toc-mobile li { padding-block: 5px; color: var(--cf-ui-fg-faint); font-size: var(--cf-ui-text-base); }
.vc-toc-mobile a { color: var(--cf-ui-fg-2); text-decoration: none; }
.vc-toc-mobile a:hover { color: var(--cf-ui-fg); text-decoration: underline; }

.vc-aside-card { display: grid; gap: var(--cf-ui-space-2); padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.vc-aside-card strong { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-base); }
.vc-aside-card p { color: var(--cf-ui-fg-muted); }
.vc-aside-card a { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-ui-fg-2); font-weight: 500; text-decoration: none; }
.vc-aside-card a:hover { color: var(--cf-ui-fg); }
.vc-aside-card svg { width: 14px; height: 14px; }
.vc-aside-links { display: grid; gap: 2px; }
.vc-aside-links a { padding-block: 4px; }

/* ---- Editorial building blocks (notes, methodology, editorial team) -------------------- */
.vc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--cf-ui-space-10); border-block: 1px solid var(--cf-ui-border); }
.vc-stats > div { display: grid; gap: 4px; padding: var(--cf-ui-space-4) var(--cf-ui-space-4) var(--cf-ui-space-4) 0; }
.vc-stats > div + div { padding-left: var(--cf-ui-space-4); border-left: 1px solid var(--cf-ui-border); }
.vc-stats strong { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-2xl) / 1.1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.vc-stats span { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.4; }

.vc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--cf-ui-space-3); margin: 1.6em 0; }
.vc-cards > div { display: grid; align-content: start; gap: var(--cf-ui-space-2); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); font-size: var(--cf-ui-text-base); line-height: 1.55; }
.vc-cards > div > svg,
.vc-cards .vc-num { color: var(--cf-ui-fg-muted); }
.vc-cards > div > svg { width: 18px; height: 18px; }
.vc-cards h3,
.vc-cards strong { margin: 0; color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-md) / 1.3 var(--cf-ui-font-sans); }
.vc-cards p { margin: 0; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-base); }
.vc-num { font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); color: var(--cf-ui-fg-muted); }
.vc-pillars { margin: 0 0 var(--cf-ui-space-10); }

.vc-steps { display: grid; gap: 0; margin: 1.4em 0 1.8em; padding: 0; list-style: none; counter-reset: vc-step; }
.vc-prose .vc-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px var(--cf-ui-space-3); margin: 0; padding: var(--cf-ui-space-4) 0; border-top: 1px solid var(--cf-ui-border); }
.vc-steps li:last-child { border-bottom: 1px solid var(--cf-ui-border); }
.vc-steps li::before { counter-increment: vc-step; content: counter(vc-step, decimal-leading-zero); grid-row: span 2; color: var(--cf-ui-fg-faint); font: 500 var(--cf-ui-text-sm) / 1.7 var(--cf-ui-font-mono); }
.vc-steps strong { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-md); }
.vc-prose .vc-steps p { margin: 0; font-size: var(--cf-ui-text-md); line-height: 1.6; }

.vc-checks { display: grid; gap: var(--cf-ui-space-2); margin: 1.2em 0 1.6em; padding: 0; list-style: none; }
.vc-prose .vc-checks li { display: flex; gap: var(--cf-ui-space-3); align-items: flex-start; margin: 0; padding: 0; }
.vc-checks svg { width: 18px; height: 18px; flex: none; margin-top: 0.3em; color: var(--cf-ui-data); }
.vc-checks strong { display: block; }
.vc-prose .vc-checks p { margin: 2px 0 0; font-size: var(--cf-ui-text-md); }
.vc-checks-boxed li { padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); }
.vc-prose .vc-checks-boxed li { padding: var(--cf-ui-space-4); }

.vc-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cf-ui-space-3); margin: 1.2em 0 1.6em; }
.vc-scale > div { display: grid; gap: var(--cf-ui-space-1); padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); }
.vc-scale b { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-3xl) / 1 var(--cf-ui-font-mono); }
.vc-scale span { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.4; }




.vc-inline-cta { display: inline-flex; align-items: center; gap: 4px; }
.vc-inline-cta svg { width: 15px; height: 15px; }
.vc-back { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--cf-ui-space-8); }

/* ---- Library hub ------------------------------------------------------------------------- */
.vc-hub-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--cf-ui-space-10); align-items: center; padding-block: var(--cf-ui-space-16) var(--cf-ui-space-10); }
.vc-hub-hero > div:first-child { display: grid; gap: var(--cf-ui-space-5); justify-items: start; }
.vc-hub-hero h1 { max-width: 16ch; font: 700 var(--cf-ui-text-display) / 1.02 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-display); }
.vc-hub-hero .vc-lead { max-width: 56ch; font-size: var(--cf-ui-text-lg); }
.vc-actions { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); }
.vc-actions .ui-btn svg { width: 15px; height: 15px; }

.vc-edition { display: grid; gap: var(--cf-ui-space-4); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-sm); }
.vc-edition-top { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); }
.vc-edition-count { display: flex; align-items: baseline; gap: var(--cf-ui-space-2); color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-4xl) / 1 var(--cf-ui-font-mono); letter-spacing: -0.03em; }
.vc-edition-count span { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-md) / 1 var(--cf-ui-font-sans); letter-spacing: 0; }
.vc-edition > p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.vc-edition ul { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cf-ui-border); }
.vc-edition li a { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); padding: 9px 2px; border-bottom: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); text-decoration: none; }
.vc-edition li a:hover { color: var(--cf-ui-fg); }
.vc-edition li a b { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); }
.vc-edition-foot { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-edition-foot svg { width: 14px; height: 14px; color: var(--cf-ui-data); }

.vc-hub-stats { margin-bottom: 0; }
.vc-section { padding-block: var(--cf-ui-space-10); scroll-margin-top: var(--cf-ui-header); }
.vc-section-head { display: grid; gap: var(--cf-ui-space-2); max-width: 70ch; margin-bottom: var(--cf-ui-space-6); }
.vc-section-head h2 { font: 650 var(--cf-ui-text-3xl) / 1.12 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-section-head p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-md); line-height: var(--cf-ui-leading-normal); }

.vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.vc-card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--cf-ui-space-3); height: 100%; padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease), transform var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-card:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); transform: translateY(-1px); }
.vc-card:focus-within { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.vc-card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-2); }
.vc-card-top > span:last-child { color: var(--cf-ui-fg-faint); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); }
.vc-card h3 { font: 600 var(--cf-ui-text-lg) / 1.3 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.vc-card p { display: -webkit-box; overflow: hidden; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.vc-card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); padding-top: var(--cf-ui-space-3); border-top: 1px solid var(--cf-ui-border); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.vc-card-foot b { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; }
.vc-card-foot svg { width: 14px; height: 14px; }
.vc-stretch { color: inherit; text-decoration: none; }
.vc-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vc .vc-stretch:focus-visible { outline: none; }

.vc-chips { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); margin-bottom: var(--cf-ui-space-8); }
.vc-chips a { display: inline-flex; align-items: center; gap: var(--cf-ui-space-2); height: var(--cf-ui-control-sm); padding-inline: 12px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-surface); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); text-decoration: none; transition: border-color var(--cf-ui-duration) var(--cf-ui-ease); }
.vc-chips a:hover { border-color: var(--cf-ui-border-strong); color: var(--cf-ui-fg); }
.vc-chips a span { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }

.vc-topic { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--cf-ui-space-8); padding-block: var(--cf-ui-space-6); border-top: 1px solid var(--cf-ui-border); scroll-margin-top: calc(var(--cf-ui-header) + var(--cf-ui-space-4)); }
.vc-topic-head { display: grid; align-content: start; gap: 4px; }
.vc-topic-head h3 { font: 650 var(--cf-ui-text-xl) / 1.2 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-topic-head span { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.vc-topic ul { display: grid; margin: 0; padding: 0; list-style: none; }
.vc-topic li + li { border-top: 1px solid var(--cf-ui-border); }
.vc-topic li a { display: grid; gap: 4px; padding: var(--cf-ui-space-3) var(--cf-ui-space-3); margin-inline: calc(var(--cf-ui-space-3) * -1); border-radius: var(--cf-ui-radius-md); color: var(--cf-ui-fg); text-decoration: none; }
.vc-topic li a:hover { background: var(--cf-ui-surface); }
.vc-topic li b { font-size: var(--cf-ui-text-md); font-weight: 600; line-height: 1.35; }
.vc-topic li span { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }

.vc-criteria { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--cf-ui-space-10); align-items: start; padding: var(--cf-ui-space-8); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-surface-2); }
.vc-criteria > div:first-child { display: grid; gap: var(--cf-ui-space-3); justify-items: start; }
.vc-criteria h2 { font: 650 var(--cf-ui-text-2xl) / 1.2 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.vc-criteria > div:first-child > p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-md); line-height: var(--cf-ui-leading-normal); }
.vc-criteria .vc-cards { margin: 0; }
.vc-criteria .vc-cards p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.vc-link { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: underline; text-decoration-color: var(--cf-ui-border-strong); text-underline-offset: 3px; }
.vc-link:hover { text-decoration-color: var(--cf-ui-fg); }
.vc-link svg { width: 14px; height: 14px; }
.vc-last { padding-bottom: var(--cf-ui-space-16); }

/* ---- Responsive ---------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .vc-hub-hero,
  .vc-criteria { grid-template-columns: 1fr; }
  .vc-topic { grid-template-columns: 1fr; gap: var(--cf-ui-space-3); }
}
@media (max-width: 640px) {
  .vc-hero { padding-block: var(--cf-ui-space-8) var(--cf-ui-space-6); }
  .vc-hub-hero { padding-block: var(--cf-ui-space-10) var(--cf-ui-space-6); }
  .vc-lead { font-size: var(--cf-ui-text-lg); }
  .vc-prose { font-size: var(--cf-ui-text-lg); line-height: 1.65; }
  .vc-lead-paragraph { font-size: var(--cf-ui-text-lg); }
  .vc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .vc-stats > div:nth-child(n + 3) { border-top: 1px solid var(--cf-ui-border); }
  .vc-scale { grid-template-columns: 1fr; }
  .vc-summary,
  .vc-callout,
  .vc-brief-card,
  .vc-criteria { padding: var(--cf-ui-space-5); }
  .vc-code,
  .vc-table { margin-inline: calc(var(--cf-ui-gutter) * -1); border-radius: 0; border-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-card,
  .vc-related a,
  .vc-toc a,
  .vc-toc-progress > span,
  .vc-toc-mobile summary svg,
  .vc-copy,
  .vc-chips a,
  .vc-anchor { transition: none; }
  .vc-card:hover { transform: none; }
}

/* Legal pages: related documents below the text where the sidebar is hidden. */
.vc-legal-foot { margin-top: var(--cf-ui-space-10); }
@media (min-width: 1180px) { .vc-legal-foot { display: none; } }

/* ---- Legacy editorial notes -------------------------------------------------------------------
 * The note bodies keep their original markup (scripts/customy-editorial-drafts.mjs imports it as the
 * Content draft body), so these rules restyle those class names inside the v2 reading column only. */
.vc-note .lead-paragraph { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-xl); line-height: 1.6; }
.vc-note .inline-link { display: inline-flex; align-items: center; gap: 4px; }
.vc-note .inline-link svg { width: 15px; height: 15px; }

.vc-note .article-chart-card { display: grid; gap: var(--cf-ui-space-4); margin: 1.8em 0; padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.vc-note .mini-trend { display: grid; gap: var(--cf-ui-space-3); }
.vc-note .trend-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cf-ui-space-3); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.4; }
.vc-note .trend-head strong { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-xl) / 1 var(--cf-ui-font-mono); }
.vc-note .mini-trend svg { display: block; width: 100%; height: 140px; overflow: visible; }
.vc-note .mini-trend .trend-area { fill: var(--cf-ui-data-subtle); stroke: none; }
.vc-note .mini-trend polyline { fill: none; stroke: var(--cf-ui-data); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vc-note .trend-labels { display: flex; justify-content: space-between; color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }
.vc-note .chart-annotation { display: grid; gap: 4px; padding-top: var(--cf-ui-space-3); border-top: 1px solid var(--cf-ui-border); font-size: var(--cf-ui-text-base); line-height: 1.55; }
.vc-note .chart-annotation p { margin: 0; color: var(--cf-ui-fg-muted); }

.vc-note .signal-list { display: grid; gap: var(--cf-ui-space-3); margin: 1.2em 0 1.6em; }
.vc-note .signal-list > div { display: flex; gap: var(--cf-ui-space-3); align-items: flex-start; padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); }
.vc-note .signal-list > div > svg,
.vc-note .question-list svg { width: 18px; height: 18px; flex: none; margin-top: 0.3em; color: var(--cf-ui-data); }
.vc-note .signal-list p { margin: 2px 0 0; font-size: var(--cf-ui-text-md); }

.vc-note .step-grid { display: grid; margin: 1.4em 0 1.8em; }
.vc-note .step-grid > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px var(--cf-ui-space-3); padding: var(--cf-ui-space-4) 0; border-top: 1px solid var(--cf-ui-border); }
.vc-note .step-grid > div:last-child { border-bottom: 1px solid var(--cf-ui-border); }
.vc-note .step-grid span { grid-row: span 2; color: var(--cf-ui-fg-faint); font: 500 var(--cf-ui-text-sm) / 1.7 var(--cf-ui-font-mono); }
.vc-note .step-grid p { margin: 0; font-size: var(--cf-ui-text-md); line-height: 1.6; }

.vc-note .tco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--cf-ui-space-3); margin: 1.6em 0; }
.vc-note .tco-grid > div { display: grid; align-content: start; gap: var(--cf-ui-space-2); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); font-size: var(--cf-ui-text-base); line-height: 1.55; }
.vc-note .tco-grid span { color: var(--cf-ui-fg-muted); }
.vc-note .tco-grid svg { width: 18px; height: 18px; }
.vc-note .tco-grid p { margin: 0; color: var(--cf-ui-fg-muted); }

.vc-note .full-compare { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); font-size: var(--cf-ui-text-base); line-height: 1.5; }
.vc-note .full-row { display: grid; grid-template-columns: minmax(90px, 0.8fr) minmax(140px, 1fr) minmax(140px, 1fr); min-width: 420px; border-bottom: 1px solid var(--cf-ui-border); }
.vc-note .full-row:last-child { border-bottom: 0; }
.vc-note .full-row > * { padding: 10px var(--cf-ui-space-4); }
.vc-note .full-row.head { background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }

.vc-note .question-list { display: grid; gap: var(--cf-ui-space-2); margin: 1.2em 0 1.6em; }
.vc-note .question-list > div { display: flex; gap: var(--cf-ui-space-3); align-items: flex-start; }

.vc-note .layer-diagram { display: grid; gap: var(--cf-ui-space-2); margin: 1.6em 0; }
.vc-note .layer-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--cf-ui-space-3); align-items: center; padding: var(--cf-ui-space-3) var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); font-size: var(--cf-ui-text-base); }
.vc-note .layer-row span { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.vc-note .layer-row strong { font-weight: 500; }
.vc-note .layer-caption { display: flex; gap: var(--cf-ui-space-2); align-items: center; margin-top: var(--cf-ui-space-1); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.vc-note .layer-caption svg { width: 16px; height: 16px; flex: none; }

.vc-note .score-bars { display: grid; gap: var(--cf-ui-space-4); margin: 1.4em 0 0.8em; padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.vc-note .score-bar-row { display: grid; gap: 6px; font-size: var(--cf-ui-text-base); line-height: 1.4; }
.vc-note .score-bar-label { display: flex; justify-content: space-between; gap: var(--cf-ui-space-3); color: var(--cf-ui-fg); font-weight: 500; }
.vc-note .score-bar-label strong { font-family: var(--cf-ui-font-mono); }
.vc-note .score-track { height: 6px; overflow: hidden; border-radius: 3px; background: var(--cf-ui-bg-subtle); }
.vc-note .score-track > span { display: block; height: 100%; border-radius: 3px; background: var(--cf-ui-warn); }
.vc-note .score-bar-row small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.vc-note .chart-footnote { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }

.vc-note .article-callout { display: grid; gap: var(--cf-ui-space-2); margin-block: var(--cf-ui-space-8); padding: var(--cf-ui-space-5) var(--cf-ui-space-6); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface-2); }
.vc-note .article-callout strong { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-md) / 1.3 var(--cf-ui-font-sans); }
.vc-note .article-callout p { margin: 0; font-size: var(--cf-ui-text-md); }

@media (max-width: 640px) {
  .vc-note .lead-paragraph { font-size: var(--cf-ui-text-lg); }
  .vc-note .layer-row { grid-template-columns: 1fr; gap: 4px; }
  .vc-note .article-callout { padding: var(--cf-ui-space-5); }
  .vc-note .full-compare { margin-inline: calc(var(--cf-ui-gutter) * -1); border-radius: 0; border-inline: 0; }
}

/* src/app/v2-leads.css */
/*
 * Lead capture and account pages on design system v2: /contact, /advisory (ld-) and
 * /account, /login (ac-). Only --cf-ui-* tokens; every rule works in light and dark.
 */

.ld-page,
.ac-page { min-height: 100vh; background: var(--cf-ui-bg); }
.ld-page h1,
.ld-page h2,
.ld-page h3,
.ac-page h1,
.ac-page h2,
.ac-page h3 { margin: 0; max-width: none; color: var(--cf-ui-fg); text-wrap: balance; }
:where(.ld-page, .ac-page) :where(p) { margin: 0; }
.ld-page :focus-visible,
.ac-page :focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }

/* ---- Shared form pieces ---------------------------------------------------------- */
.ld-field { display: grid; gap: 6px; min-width: 0; }
.ld-field > label,
.ld-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--cf-ui-space-2); color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); font-weight: 550; }
.ld-field > label > span,
.ld-tag { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.ld-control { width: 100%; min-width: 0; height: var(--cf-ui-control-lg); padding: 0 14px; border: 1px solid var(--cf-ui-border-strong); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); color: var(--cf-ui-fg); font: 400 var(--cf-ui-text-md) / 1.4 var(--cf-ui-font-sans); transition: border-color var(--cf-ui-duration-fast) var(--cf-ui-ease), box-shadow var(--cf-ui-duration-fast) var(--cf-ui-ease); }
.ld-control::placeholder { color: var(--cf-ui-fg-faint); }
.ld-control:hover { border-color: var(--cf-ui-fg-faint); }
.ld-control:focus-visible { border-color: var(--cf-ui-ring); outline: 2px solid var(--cf-ui-ring); outline-offset: 1px; }
.ld-control:disabled { background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); cursor: not-allowed; }
.ld-control:user-invalid { border-color: var(--cf-ui-danger); }
textarea.ld-control { height: auto; min-height: 148px; padding-block: 12px; resize: vertical; line-height: var(--cf-ui-leading-normal); }
select.ld-control { padding-right: 38px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.ld-help { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.5; }
.ld-check { display: flex; gap: var(--cf-ui-space-3); align-items: flex-start; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: 1.5; cursor: pointer; }
.ld-check input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--cf-ui-brand); cursor: pointer; }
.ld-status { display: flex; gap: var(--cf-ui-space-2); align-items: flex-start; padding: var(--cf-ui-space-3) var(--cf-ui-space-4); border-radius: var(--cf-ui-radius-md); font-size: var(--cf-ui-text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.ld-status:empty { padding: 0; margin: 0; }
.ld-status svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ld-status-error { background: var(--cf-ui-danger-subtle); color: var(--cf-ui-danger); }
.ld-status-ok { background: var(--cf-ui-data-subtle); color: var(--cf-ui-data); }
.ld-status-info { background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-2); border: 1px solid var(--cf-ui-border); }

/* ---- Inquiry pages (/contact, /advisory) -------------------------------------------- */
.ld-main { padding-block: var(--cf-ui-space-8) var(--cf-ui-space-16); }
.ld-tabs { margin-bottom: var(--cf-ui-space-8); }
.ld-tabs .ui-seg-item { height: 36px; padding-inline: var(--cf-ui-space-4); font-size: var(--cf-ui-text-sm); text-decoration: none; }
.ld-tabs .ui-seg-item[aria-current="page"] { background: var(--cf-ui-surface); color: var(--cf-ui-fg); box-shadow: var(--cf-ui-shadow-sm); }
.ld-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--cf-ui-space-12); align-items: start; }
.ld-intro { display: grid; gap: var(--cf-ui-space-5); align-content: start; }
.ld-intro .ui-eyebrow { color: var(--cf-ui-brand-text); }
.ld-intro h1 { font: 700 var(--cf-ui-text-4xl) / 1.05 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-display); }
.ld-lead { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-lg); line-height: var(--cf-ui-leading-normal); }

.ld-value { display: grid; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-brand-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-brand-subtle); }
.ld-value h2 { color: var(--cf-ui-brand-text); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.ld-value ul { display: grid; gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.ld-value li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--cf-ui-space-3); align-items: start; }
.ld-value li > span:first-child { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--cf-ui-radius-sm); background: var(--cf-ui-surface); color: var(--cf-ui-brand-text); box-shadow: var(--cf-ui-shadow-sm); }
.ld-value li svg { width: 16px; height: 16px; }
.ld-value strong { display: block; color: var(--cf-ui-fg); font-size: var(--cf-ui-text-base); font-weight: 600; }
.ld-value p { margin-top: 2px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: 1.5; }

.ld-notes { display: grid; gap: var(--cf-ui-space-4); margin: 0; }
.ld-notes > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--cf-ui-space-3); }
.ld-notes svg { width: 18px; height: 18px; margin-top: 1px; color: var(--cf-ui-data); }
.ld-notes dt { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); font-weight: 600; }
.ld-notes dd { margin: 2px 0 0; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.55; }
.ld-intro-link { display: inline-flex; align-items: center; gap: 4px; justify-self: start; min-height: 32px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: none; }
.ld-intro-link:hover { color: var(--cf-ui-fg); }
.ld-intro-link svg { width: 15px; height: 15px; }

.ld-card { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-md); overflow: hidden; }
.ld-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--cf-ui-space-2) var(--cf-ui-space-4); padding: var(--cf-ui-space-5) var(--cf-ui-space-6); border-bottom: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); }
.ld-card-head h2 { font: 650 var(--cf-ui-text-lg) / 1.25 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.ld-card-head p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.ld-card-body { padding: var(--cf-ui-space-6); }

.ld-form fieldset { display: grid; gap: var(--cf-ui-space-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.ld-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-ui-space-4); }
.ld-context { display: grid; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-brand-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-brand-subtle); }
.ld-context-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-2); }
.ld-context-head > span { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-ui-brand-text); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.ld-context-head svg { width: 14px; height: 14px; }
.ld-context ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ld-context li { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-surface); color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); font-weight: 500; overflow-wrap: anywhere; }
.ld-context-clear { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--cf-ui-fg-2); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ld-context-clear:hover { color: var(--cf-ui-fg); }
.ld-context-clear svg { width: 13px; height: 13px; }
.ld-consent { padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface-2); }
.ld-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-3); }
.ld-submit .ui-btn { min-width: 220px; }
.ld-submit .ui-btn[disabled],
.ld-form fieldset:disabled .ui-btn { opacity: 0.7; cursor: progress; }
.ld-spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ld-spin 0.8s linear infinite; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
.ld-form > .ld-status:not(:empty) { margin-top: var(--cf-ui-space-4); }
.ld-form > .ui-btn { margin-top: var(--cf-ui-space-3); }

.ld-receipt { display: grid; justify-items: start; gap: var(--cf-ui-space-4); padding-block: var(--cf-ui-space-4); }
.ld-receipt-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cf-ui-data-subtle); color: var(--cf-ui-data); }
.ld-receipt-icon svg { width: 24px; height: 24px; }
.ld-receipt h2 { font: 650 var(--cf-ui-text-2xl) / 1.15 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.ld-receipt p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-md); line-height: var(--cf-ui-leading-normal); }

/* ---- Account (/account, /login) ------------------------------------------------------ */
.ac-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--cf-ui-space-12); align-items: start; padding-block: var(--cf-ui-space-12) var(--cf-ui-space-16); }
.ac-intro { display: grid; gap: var(--cf-ui-space-5); align-content: start; }
.ac-intro h1 { font: 700 var(--cf-ui-text-4xl) / 1.05 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-display); }
.ac-intro h1 span { color: var(--cf-ui-fg-muted); }
.ac-intro .ld-lead { max-width: 52ch; }
.ac-benefits { display: grid; gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.ac-benefits li { display: flex; gap: var(--cf-ui-space-3); align-items: flex-start; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.ac-benefits svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--cf-ui-data); }
.ac-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cf-ui-space-4); min-width: 0; padding: var(--cf-ui-space-6); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-md); }
.ac-card h2 { font: 650 var(--cf-ui-text-2xl) / 1.15 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); overflow-wrap: anywhere; }
.ac-card > p:not([class]) { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.55; overflow-wrap: anywhere; }
.ac-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.ac-tabs .ui-seg-item { justify-content: center; height: 36px; font-size: var(--cf-ui-text-sm); }
.ac-card .ui-btn { width: 100%; }
.ac-google svg { width: 16px; height: 16px; }
.ac-divider { display: flex; align-items: center; gap: var(--cf-ui-space-3); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.ac-divider::before,
.ac-divider::after { content: ""; flex: 1; height: 1px; background: var(--cf-ui-border); }
.ac-form { display: grid; gap: var(--cf-ui-space-4); }
.ac-form label { display: grid; gap: 6px; color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); font-weight: 550; }
.ac-note { display: flex; gap: var(--cf-ui-space-2); align-items: flex-start; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.5; }
.ac-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ac-note:empty { margin: 0; }
.ac-identity { display: flex; align-items: center; gap: var(--cf-ui-space-3); min-width: 0; }
.ac-avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--cf-ui-brand-subtle); color: var(--cf-ui-brand-text); font: 650 var(--cf-ui-text-lg) / 1 var(--cf-ui-font-sans); text-transform: uppercase; }
.ac-identity > div { display: grid; gap: 2px; min-width: 0; }
.ac-identity p { color: var(--cf-ui-fg-muted); font: 400 var(--cf-ui-text-sm) / 1.4 var(--cf-ui-font-mono); overflow-wrap: anywhere; }
.ac-actions { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); padding-top: var(--cf-ui-space-4); border-top: 1px solid var(--cf-ui-border); }
.ac-actions .ui-btn { width: auto; flex: 1 1 160px; }
.ac-loading { display: grid; gap: var(--cf-ui-space-3); }
.ac-skeleton { height: 14px; border-radius: var(--cf-ui-radius-xs); background: var(--cf-ui-bg-subtle); animation: ac-pulse 1.4s ease-in-out infinite; }
.ac-skeleton:nth-child(2) { width: 70%; }
.ac-skeleton:nth-child(3) { width: 45%; }
@keyframes ac-pulse { 50% { opacity: 0.5; } }
.ac-layout-wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

/* Library (favorites, comparisons, alerts, export). */
.ac-library { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cf-ui-space-4); min-width: 0; }
.ac-library-nav { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-library-nav .ui-seg-item { justify-content: center; height: 36px; font-size: var(--cf-ui-text-sm); }
.ac-library-nav .ui-seg-item:disabled { cursor: progress; }
.ac-library-head { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); }
.ac-library-head h3 { font: 600 var(--cf-ui-text-lg) / 1.2 var(--cf-ui-font-sans); }
.ac-library .ui-btn { width: auto; }
.ac-empty { display: grid; justify-items: start; gap: var(--cf-ui-space-2); padding: var(--cf-ui-space-5); border: 1px dashed var(--cf-ui-border-strong); border-radius: var(--cf-ui-radius-md); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.ac-empty svg { width: 22px; height: 22px; color: var(--cf-ui-fg-faint); }
.ac-empty a { color: var(--cf-ui-fg); font-weight: 500; text-underline-offset: 3px; }
.ac-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); }
.ac-list:empty { display: none; }
.ac-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-3) var(--cf-ui-space-4); border-bottom: 1px solid var(--cf-ui-border); }
.ac-list li:last-child { border-bottom: 0; }
.ac-list li > div { display: grid; gap: 3px; min-width: 0; }
.ac-list a { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-sm); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ac-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ac-list small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.ac-list .ui-badge { justify-self: start; }
.ac-list .ui-btn { flex: none; }
.ac-export { display: grid; gap: var(--cf-ui-space-2); padding-top: var(--cf-ui-space-4); border-top: 1px solid var(--cf-ui-border); }
.ac-export .ui-btn { justify-self: start; max-width: 100%; height: auto; min-height: var(--cf-ui-control); white-space: normal; text-align: left; }

/* ---- Responsive ------------------------------------------------------------------------ */
@media (max-width: 960px) {
  .ld-grid,
  .ac-layout,
  .ac-layout-wide { grid-template-columns: 1fr; gap: var(--cf-ui-space-8); }
}
@media (max-width: 640px) {
  .ld-main { padding-block: var(--cf-ui-space-5) var(--cf-ui-space-10); }
  .ld-tabs { margin-bottom: var(--cf-ui-space-5); }
  .ld-pair { grid-template-columns: 1fr; }
  .ld-card-head,
  .ld-card-body { padding: var(--cf-ui-space-4); }
  .ld-submit .ui-btn { width: 100%; min-width: 0; }
  .ld-control { font-size: var(--cf-ui-text-lg); }
  .ac-layout { padding-block: var(--cf-ui-space-6) var(--cf-ui-space-10); }
  .ac-card { padding: var(--cf-ui-space-4); }
  .ac-list li { flex-wrap: wrap; }
}
@media (pointer: coarse) {
  .ld-tabs .ui-seg-item,
  .ac-tabs .ui-seg-item,
  .ac-library-nav .ui-seg-item { height: 44px; }
  .ld-context-clear,
  .ld-intro-link { min-height: 44px; }
  .ac-card .ui-btn { height: var(--cf-ui-control-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .ld-control { transition: none; }
  .ld-spinner,
  .ac-skeleton { animation: none; }
}

/* src/app/v2-solutions.css */
/* Solutions by industry and by problem (src/components/pages/solution-page.tsx). Only --cf-ui-* tokens. */

.sol-hero { display: grid; gap: var(--cf-ui-space-3); max-width: 880px; padding-block: var(--cf-ui-space-12) var(--cf-ui-space-6); }
.sol-hero h1 { margin: 0; color: var(--cf-ui-fg); font: 700 clamp(34px, 5vw, 58px) / 1.04 var(--cf-ui-font-display); letter-spacing: -0.04em; text-wrap: balance; }
.sol-lead { max-width: 62ch; margin: 0; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-lg); line-height: var(--cf-ui-leading-normal); }
.sol-meta { margin: 0; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1.4 var(--cf-ui-font-mono); }
.sol-crumbs { display: flex; gap: 8px; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.sol-crumbs a { color: var(--cf-ui-brand-text); text-decoration: none; }
.sol-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sol-section { display: grid; gap: var(--cf-ui-space-4); padding-block: var(--cf-ui-space-6); }
.sol-h2 { margin: 0; color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-2xl) / 1.15 var(--cf-ui-font-display); letter-spacing: -0.025em; }

.sol-data { display: grid; gap: var(--cf-ui-space-4); }
.sol-data-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sol-block { display: grid; align-content: start; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-sm); }
.sol-block h3 { margin: 0; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.sol-block ol { display: grid; margin: 0; padding: 0; list-style: none; }
.sol-block li { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-block: 10px; border-bottom: 1px solid var(--cf-ui-border); }
.sol-block li:last-child { border-bottom: 0; }
.sol-rank { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); }
.sol-name { display: grid; min-width: 0; color: var(--cf-ui-fg); text-decoration: none; }
.sol-name b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sol-name small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.sol-name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sol-name:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; border-radius: 4px; }
.sol-value { color: var(--cf-ui-fg-2); font: 500 var(--cf-ui-text-sm) / 1.2 var(--cf-ui-font-mono); text-align: right; white-space: nowrap; }
.sol-value.is-top { color: var(--cf-ui-data); font-weight: 600; }
.sol-link { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; color: var(--cf-ui-brand-text); font-size: var(--cf-ui-text-sm); font-weight: 600; text-decoration: none; }
.sol-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sol-link svg { width: 15px; height: 15px; }

.sol-prose { max-width: 760px; }
.sol-prose p { margin: 0; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-md); line-height: 1.7; }

.sol-decide { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.sol-decide li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.sol-step { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cf-ui-brand-subtle); color: var(--cf-ui-brand-text); font: 600 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-mono); }
.sol-decide h3 { margin: 0 0 6px; color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-md) / 1.3 var(--cf-ui-font-display); letter-spacing: -0.01em; }
.sol-decide p { margin: 0; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.6; }

.sol-avoid { display: grid; gap: 10px; max-width: 820px; margin: 0; padding: 0; list-style: none; }
.sol-avoid li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--cf-ui-fg-2); line-height: 1.55; }
.sol-avoid svg { width: 18px; height: 18px; margin-top: 3px; color: var(--cf-ui-warn); }

.sol-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--cf-ui-space-3); }
.sol-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); color: var(--cf-ui-fg); font-weight: 500; text-decoration: none; transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease); }
.sol-tile:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); }
.sol-tile:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.sol-tile > svg { width: 16px; height: 16px; color: var(--cf-ui-fg-muted); }
.sol-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; }
.sol-icon svg { width: 17px; height: 17px; }
.sol-tone-green { background: var(--cf-ui-tone-green-bg); color: var(--cf-ui-tone-green); }
.sol-tone-violet { background: var(--cf-ui-tone-violet-bg); color: var(--cf-ui-tone-violet); }
.sol-tone-amber { background: var(--cf-ui-tone-amber-bg); color: var(--cf-ui-tone-amber); }
.sol-tone-blue { background: var(--cf-ui-tone-blue-bg); color: var(--cf-ui-tone-blue); }
.sol-tone-teal { background: var(--cf-ui-tone-teal-bg); color: var(--cf-ui-tone-teal); }
.sol-tone-rose { background: var(--cf-ui-tone-rose-bg); color: var(--cf-ui-tone-rose); }
.sol-tone-cyan { background: var(--cf-ui-tone-cyan-bg); color: var(--cf-ui-tone-cyan); }
.sol-tone-slate { background: var(--cf-ui-tone-slate-bg); color: var(--cf-ui-tone-slate); }

.sol-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.sol-guides a { display: grid; gap: 6px; height: 100%; padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); color: var(--cf-ui-fg); text-decoration: none; }
.sol-guides a:hover { border-color: var(--cf-ui-border-strong); }
.sol-guides a:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.sol-guides small { color: var(--cf-ui-brand-text); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.sol-guides b { font-weight: 600; line-height: 1.35; }

.sol-data-list { margin: 0; padding: 0; list-style: none; }
.sol-discovery-nav { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); padding-block: var(--cf-ui-space-3); }
.sol-discovery-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-pill); color: var(--cf-ui-fg-2); background: var(--cf-ui-surface); font-size: var(--cf-ui-text-sm); text-decoration: none; }
.sol-discovery-nav a:hover { border-color: var(--cf-ui-border-strong); color: var(--cf-ui-fg); }
.sol-discovery-nav a:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }

.sol-cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--cf-ui-space-6); align-items: center; margin-block: var(--cf-ui-space-6); padding: var(--cf-ui-space-8); border: 1px solid var(--cf-ui-brand-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-brand-subtle); }
.sol-cta h2 { margin: 0 0 8px; color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-2xl) / 1.15 var(--cf-ui-font-display); letter-spacing: -0.025em; }
.sol-cta p { margin: 0; color: var(--cf-ui-fg-2); line-height: 1.6; }
.sol-cta-actions { display: grid; justify-items: start; gap: var(--cf-ui-space-3); }
.sol-method { display: flex; gap: 8px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.5; }
.sol-method svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--cf-ui-data); }
.sol-method a { color: var(--cf-ui-brand-text); }

.sol-related,
.sol-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--cf-ui-space-3); }
.sol-related a,
.sol-card { position: relative; display: grid; gap: 6px; padding: var(--cf-ui-space-4) var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); color: var(--cf-ui-fg); text-decoration: none; transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease); }
.sol-related a:hover,
.sol-card:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); }
.sol-related a:focus-visible,
.sol-card:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.sol-related b,
.sol-card b { font: 650 var(--cf-ui-text-md) / 1.25 var(--cf-ui-font-display); letter-spacing: -0.01em; }
.sol-related span,
.sol-card span { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.sol-card { padding-right: var(--cf-ui-space-8); }
.sol-card > svg { position: absolute; top: var(--cf-ui-space-4); right: var(--cf-ui-space-4); width: 16px; height: 16px; color: var(--cf-ui-fg-muted); }
.sol-dot { width: 10px; height: 10px; border-radius: 50%; }
.sol-brief { padding-block: var(--cf-ui-space-6) var(--cf-ui-space-16); }

@media (max-width: 860px) {
  .sol-data-2,
  .sol-cta { grid-template-columns: minmax(0, 1fr); }
  .sol-cta { padding: var(--cf-ui-space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .sol-tile,
  .sol-card,
  .sol-related a { transition: none; }
}
.sol-h3 { margin: var(--cf-ui-space-2) 0 0; color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-md) / 1.3 var(--cf-ui-font-display); }
/* Copyable snippets on the open-data page. */
.od-code { max-width: 100%; margin: 0; padding: var(--cf-ui-space-4); overflow-x: auto; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-2); font: 400 var(--cf-ui-text-xs) / 1.6 var(--cf-ui-font-mono); white-space: pre-wrap; word-break: break-all; }
/* Headline figures and the full price table on the open-data page. */
.od-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--cf-ui-space-3); margin: var(--cf-ui-space-2) 0 0; }
.od-stats div { display: grid; align-content: start; gap: 6px; padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.od-stats dt { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.od-stats dd { display: grid; gap: 2px; margin: 0; color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-2xl) / 1.1 var(--cf-ui-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.od-stats small { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1.4 var(--cf-ui-font-sans); letter-spacing: 0; }
.od-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.od-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--cf-ui-text-sm); }
.od-table th, .od-table td { padding: 10px 14px; border-bottom: 1px solid var(--cf-ui-border); text-align: left; }
.od-table tbody tr:last-child > * { border-bottom: 0; }
.od-table thead th { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; background: var(--cf-ui-surface-2); }
.od-table tbody th { display: grid; font-weight: 600; }
.od-table tbody th a { color: var(--cf-ui-fg); text-decoration: none; }
.od-table tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.od-table tbody th small { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); font-weight: 400; }
.od-table .is-num { font-family: var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--cf-ui-fg-2); }
.od-table .is-key { color: var(--cf-ui-data); font-weight: 600; }

/* src/app/v2-status.css */
/* 404 and error pages (subset of v2-tools.css): loaded by every route's error/not-found boundary, so it stays small. */
/*
 * Tools, analysis and utility pages on design system v2 (AWS calculator, CloudOps index and
 * analysis, industries, FinOps guide, C4C7OPS vs Qovery, 404 and route errors).
 * Only --cf-ui-* tokens; every rule works in light and dark. Classes are prefixed tl-.
 */

.tl-page { min-height: 100vh; background: var(--cf-ui-bg); }
.tl-page h1,
.tl-page h2,
.tl-page h3 { margin: 0; max-width: none; color: var(--cf-ui-fg); text-wrap: balance; }
:where(.tl-page) :where(p) { margin: 0; }
.tl-page :focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }

/* ---- Hero ---------------------------------------------------------------------- */
.tl-actions { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); }

/* ---- Sections -------------------------------------------------------------------- */

/* Anchor navigation between the sections of a long page. */

/* ---- Surfaces --------------------------------------------------------------------- */

/* Callouts and notes. */

/* Stats and highlight tiles. */

/* ---- Data -------------------------------------------------------------------------- */

/* Horizontal bar chart: label, track, figure. Always 0–5 from zero. */

/* Segmented control that wraps and gets 44px targets on touch screens. */

/* Controls */

/* ---- Scatter and positioning maps ------------------------------------------------------ */

/* ---- Advisory call to action (end of every tool page) ------------------------------------- */

/* ---- Article layout (guides and comparison briefs) -------------------------------------------- */

/* ---- AWS savings calculator ---------------------------------------------------------------- */

/* ---- Empty states: 404 and route errors ----------------------------------------------------- */
.tl-empty { display: grid; place-items: center; min-height: 60vh; padding-block: var(--cf-ui-space-16); }
.tl-empty-card { display: grid; justify-items: start; gap: var(--cf-ui-space-4); width: min(560px, 100%); padding: var(--cf-ui-space-8); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-md); }
.tl-empty-card h1 { font: 650 var(--cf-ui-text-3xl) / 1.1 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.tl-empty-card p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-md); line-height: var(--cf-ui-leading-normal); }
.tl-empty-card .ui-badge { font-size: var(--cf-ui-text-2xs); }
.tl-empty-card section { display: grid; gap: var(--cf-ui-space-2); width: 100%; padding-top: var(--cf-ui-space-4); border-top: 1px solid var(--cf-ui-border); }
.tl-empty-card h2 { font: 600 var(--cf-ui-text-lg) / 1.25 var(--cf-ui-font-sans); }

/* ---- Responsive ------------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .tl-empty-card { padding: var(--cf-ui-space-5); }
}
body.tl-page { margin: 0; }
.tl-empty-card section a { color: var(--cf-ui-fg); text-decoration: underline; text-underline-offset: 3px; }

/* src/app/v2-tools.css */
/*
 * Tools, analysis and utility pages on design system v2 (AWS calculator, CloudOps index and
 * analysis, industries, FinOps guide, C4C7OPS vs Qovery, 404 and route errors).
 * Only --cf-ui-* tokens; every rule works in light and dark. Classes are prefixed tl-.
 */

.tl-page { min-height: 100vh; background: var(--cf-ui-bg); }
.tl-page h1,
.tl-page h2,
.tl-page h3 { margin: 0; max-width: none; color: var(--cf-ui-fg); text-wrap: balance; }
:where(.tl-page) :where(p) { margin: 0; }
.tl-page :focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }

/* ---- Hero ---------------------------------------------------------------------- */
.tl-hero { display: grid; gap: var(--cf-ui-space-8); padding-block: var(--cf-ui-space-12) var(--cf-ui-space-8); }
.tl-hero-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.tl-hero-main { display: grid; gap: var(--cf-ui-space-4); align-content: start; }
.tl-hero h1 { max-width: 22ch; font: 700 var(--cf-ui-text-4xl) / 1.05 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-display); }
.tl-lead { max-width: 62ch; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-lg); line-height: var(--cf-ui-leading-normal); }
.tl-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-2) var(--cf-ui-space-3); }
.tl-crumb a { color: var(--cf-ui-fg-muted); text-decoration: none; font-size: var(--cf-ui-text-sm); }
.tl-crumb a:hover { color: var(--cf-ui-fg); }
.tl-meta { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); margin: 0; padding: 0; list-style: none; }
.tl-meta li,
.tl-meta span { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.tl-meta svg { width: 15px; height: 15px; color: var(--cf-ui-data); }
.tl-meta a { color: var(--cf-ui-fg-2); text-underline-offset: 3px; }
.tl-actions { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); }

/* ---- Sections -------------------------------------------------------------------- */
.tl-section { padding-block: var(--cf-ui-space-8); scroll-margin-top: calc(var(--cf-ui-header) + var(--cf-ui-space-12)); }
.tl-section-last { padding-bottom: var(--cf-ui-space-16); }
.tl-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--cf-ui-space-4); margin-bottom: var(--cf-ui-space-5); }
.tl-section-head > div:first-child { display: grid; gap: var(--cf-ui-space-2); max-width: 70ch; }
.tl-section-head h2 { font: 650 var(--cf-ui-text-2xl) / 1.15 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.tl-section-head p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-base); line-height: var(--cf-ui-leading-normal); }
.tl-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: none; }
.tl-link:hover { color: var(--cf-ui-fg); }
.tl-link svg { width: 14px; height: 14px; flex: none; }
.tl-brand-text { color: var(--cf-ui-brand-text); }

/* Anchor navigation between the sections of a long page. */
.tl-anchors { position: sticky; top: var(--cf-ui-header); z-index: 5; border-block: 1px solid var(--cf-ui-border); background: var(--cf-ui-glass); backdrop-filter: blur(10px); }
.tl-anchors .ui-container { display: flex; gap: var(--cf-ui-space-1); overflow-x: auto; scrollbar-width: none; }
.tl-anchors a { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 44px; padding-inline: var(--cf-ui-space-3); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tl-anchors a:hover { color: var(--cf-ui-fg); }
.tl-anchors svg { width: 13px; height: 13px; }

/* ---- Surfaces --------------------------------------------------------------------- */
.tl-panel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); overflow: hidden; }
.tl-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-4) var(--cf-ui-space-5); border-bottom: 1px solid var(--cf-ui-border); }
.tl-panel-head h2,
.tl-panel-head h3 { font: 650 var(--cf-ui-text-lg) / 1.25 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.tl-panel-head p { margin-top: 2px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); }
.tl-panel-body { display: grid; gap: var(--cf-ui-space-4); padding: var(--cf-ui-space-5); min-width: 0; }
.tl-panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-2) var(--cf-ui-space-4); padding: var(--cf-ui-space-3) var(--cf-ui-space-5); border-top: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }

.tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--cf-ui-space-3); }
.tl-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-ui-space-3); }
.tl-card { position: relative; display: grid; align-content: start; gap: var(--cf-ui-space-2); min-width: 0; padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); color: var(--cf-ui-fg); text-decoration: none; }
.tl-card h3 { font: 600 var(--cf-ui-text-md) / 1.3 var(--cf-ui-font-sans); }
.tl-card p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.tl-card small { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.3 var(--cf-ui-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
a.tl-card { transition: border-color var(--cf-ui-duration) var(--cf-ui-ease), box-shadow var(--cf-ui-duration) var(--cf-ui-ease); }
a.tl-card:hover { border-color: var(--cf-ui-border-strong); box-shadow: var(--cf-ui-shadow-md); }
.tl-card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-2); color: var(--cf-ui-fg-muted); }
.tl-card-top svg { width: 15px; height: 15px; flex: none; }
.tl-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-2); }
.tl-icon svg { width: 17px; height: 17px; }

/* Callouts and notes. */
.tl-note { display: flex; gap: var(--cf-ui-space-3); align-items: flex-start; padding: var(--cf-ui-space-3) var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: var(--cf-ui-leading-normal); }
.tl-note > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--cf-ui-fg-muted); }
.tl-note strong { color: var(--cf-ui-fg); font-weight: 600; }
.tl-note .tl-link { margin-left: auto; min-height: 0; flex: none; }
.tl-disclaimer { display: flex; gap: var(--cf-ui-space-2); align-items: flex-start; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: var(--cf-ui-leading-normal); }
.tl-disclaimer svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.tl-disclaimer strong { color: var(--cf-ui-fg-2); font-weight: 600; }
.tl-callout { display: grid; gap: var(--cf-ui-space-2); padding: var(--cf-ui-space-4) var(--cf-ui-space-5); border: 1px solid var(--cf-ui-brand-border); border-left-width: 3px; border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-brand-subtle); }
.tl-callout > span { color: var(--cf-ui-brand-text); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: var(--cf-ui-tracking-label); text-transform: uppercase; }
.tl-callout strong { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-md); line-height: 1.45; }
.tl-callout p { color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: var(--cf-ui-leading-normal); }

/* Stats and highlight tiles. */
.tl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-border); list-style: none; }
.tl-stats > * { display: grid; gap: 4px; padding: var(--cf-ui-space-4) var(--cf-ui-space-5); background: var(--cf-ui-surface); }
.tl-stats b,
.tl-stats dt { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-xl) / 1.1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.tl-stats span,
.tl-stats dd { margin: 0; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.4; }
.tl-figure { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-3xl) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---- Data -------------------------------------------------------------------------- */
.tl-table-wrap { overflow-x: auto; max-width: 100%; }
.tl-table { width: 100%; border-collapse: collapse; font-size: var(--cf-ui-text-sm); }
.tl-table caption { padding: 0; }
.tl-table th { padding: 9px var(--cf-ui-space-3); border-bottom: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.tl-table td,
.tl-table tbody th { padding: 11px var(--cf-ui-space-3); border-bottom: 1px solid var(--cf-ui-border); background: transparent; color: var(--cf-ui-fg-2); font: 400 var(--cf-ui-text-sm) / 1.45 var(--cf-ui-font-sans); letter-spacing: 0; text-align: left; text-transform: none; vertical-align: middle; }
.tl-table tbody th { color: var(--cf-ui-fg); font-weight: 600; white-space: nowrap; }
.tl-table tbody tr:last-child td,
.tl-table tbody tr:last-child th { border-bottom: 0; }
.tl-table tbody tr:hover { background: var(--cf-ui-surface-2); }
.tl-table th:first-child,
.tl-table td:first-child { padding-left: var(--cf-ui-space-5); }
.tl-table th:last-child,
.tl-table td:last-child { padding-right: var(--cf-ui-space-5); }
.tl-table .tl-num { font-family: var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tl-table th.tl-num { text-align: right; }
.tl-table .tl-selected { color: var(--cf-ui-fg); font-weight: 600; background: var(--cf-ui-surface-2); }
.tl-table small { display: block; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); font-weight: 400; }
.tl-table a { color: var(--cf-ui-fg); font-weight: 600; text-decoration: none; }
.tl-table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tl-sort svg { width: 12px; height: 12px; }
.tl-product { display: inline-flex; align-items: center; gap: var(--cf-ui-space-2); min-width: 0; }
.tl-product > span:last-child { display: grid; min-width: 0; }
.tl-swatch { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--cf-ui-fg-faint); }
.tl-tone-1 { background: var(--cf-ui-brand); }
.tl-tone-2 { background: var(--cf-ui-warn); }
.tl-tone-3 { background: var(--cf-ui-data); }
.tl-tone-4 { background: var(--cf-ui-provider-google); }
.tl-tone-5 { background: var(--cf-ui-provider-other); }

/* Horizontal bar chart: label, track, figure. Always 0–5 from zero. */
.tl-bars { display: grid; gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.tl-bar { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 44px; align-items: center; gap: var(--cf-ui-space-3); }
.tl-bar-label { display: flex; align-items: center; gap: var(--cf-ui-space-2); min-width: 0; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); }
.tl-bar-label > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bar-label small { display: block; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-2xs); }
.tl-bar-track { position: relative; height: 10px; overflow: hidden; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-bg-subtle); }
.tl-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--cf-ui-data); transition: width var(--cf-ui-duration-slow) var(--cf-ui-ease); }
.tl-bar-value { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.tl-bars-compact { gap: var(--cf-ui-space-2); }
.tl-bars-compact .tl-bar { grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) 30px; gap: var(--cf-ui-space-2); }
.tl-bars-compact .tl-bar-label { font-size: var(--cf-ui-text-xs); }
.tl-bars-compact .tl-bar-track { height: 6px; }
.tl-bars-compact .tl-bar-value { font-size: var(--cf-ui-text-xs); }
.tl-scale { display: flex; justify-content: space-between; margin-left: calc(150px + var(--cf-ui-space-3)); margin-right: calc(44px + var(--cf-ui-space-3)); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }
.tl-mini { display: inline-flex; gap: 3px; align-items: center; }
.tl-mini i { display: block; width: 34px; height: 5px; overflow: hidden; border-radius: 3px; background: var(--cf-ui-bg-subtle); }
.tl-mini b { display: block; height: 100%; border-radius: inherit; }
.tl-mini i:nth-child(1) b,
.tl-legend i.tl-l1 { background: var(--cf-ui-brand); }
.tl-mini i:nth-child(2) b,
.tl-legend i.tl-l2 { background: var(--cf-ui-data); }
.tl-mini i:nth-child(3) b,
.tl-legend i.tl-l3 { background: var(--cf-ui-warn); }
.tl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-ui-space-2) var(--cf-ui-space-4); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tl-legend i { display: inline-block; width: 14px; height: 5px; border-radius: 3px; }
.tl-legend .tl-legend-source { margin-left: auto; }

/* Segmented control that wraps and gets 44px targets on touch screens. */
.tl-seg { flex-wrap: wrap; width: auto; }
.tl-seg .ui-seg-item { min-height: 32px; height: auto; }
.tl-seg .ui-seg-item:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 1px; }

/* Controls */
.tl-controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--cf-ui-space-3); }
.tl-field { display: grid; gap: 6px; min-width: 0; }
.tl-field > label,
.tl-field > span,
.tl-label { color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; }
.tl-help { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.45; }
.tl-select { width: 100%; min-width: 160px; height: var(--cf-ui-control-lg); padding: 0 34px 0 12px; border: 1px solid var(--cf-ui-border-strong); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); color: var(--cf-ui-fg); font: 400 var(--cf-ui-text-base) / 1 var(--cf-ui-font-sans); appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.tl-select:focus-visible,
.tl-search input:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.tl-search { position: relative; display: flex; align-items: center; min-width: 0; flex: 1 1 220px; }
.tl-search svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--cf-ui-fg-muted); pointer-events: none; }
.tl-search input { width: 100%; min-width: 0; height: var(--cf-ui-control-lg); padding: 0 12px 0 38px; border: 1px solid var(--cf-ui-border-strong); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); color: var(--cf-ui-fg); font: 400 var(--cf-ui-text-md) / 1 var(--cf-ui-font-sans); }
.tl-search input::placeholder { color: var(--cf-ui-fg-faint); }
.tl-count { color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); }

/* ---- Scatter and positioning maps ------------------------------------------------------ */
.tl-map { position: relative; height: clamp(300px, 40vw, 440px); margin: var(--cf-ui-space-2) 0 var(--cf-ui-space-6) var(--cf-ui-space-6); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); background-image: linear-gradient(var(--cf-ui-border), var(--cf-ui-border)), linear-gradient(var(--cf-ui-border), var(--cf-ui-border)); background-size: 1px 100%, 100% 1px; background-position: 50% 0, 0 50%; background-repeat: no-repeat; }
.tl-quad { position: absolute; display: grid; gap: 2px; max-width: 45%; padding: var(--cf-ui-space-3); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); line-height: 1.3; }
.tl-quad b { color: var(--cf-ui-fg-2); font-weight: 600; }
.tl-quad-tl { top: 0; left: 0; }
.tl-quad-tr { top: 0; right: 0; text-align: right; }
.tl-quad-bl { bottom: 0; left: 0; }
.tl-quad-br { bottom: 0; right: 0; text-align: right; }
.tl-quad-hot { top: 0; right: 0; bottom: 50%; left: 50%; max-width: none; border-radius: 0 var(--cf-ui-radius-md) 0 0; background: var(--cf-ui-brand-subtle); color: var(--cf-ui-brand-text); text-align: right; }
.tl-axis { position: absolute; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.tl-axis-x { right: 0; bottom: calc(var(--cf-ui-space-5) * -1); }
.tl-axis-y { top: 0; left: calc(var(--cf-ui-space-5) * -1); transform: rotate(-90deg) translateX(-100%); transform-origin: 0 0; }
.tl-point { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; transform: translate(-7px, 7px); color: var(--cf-ui-fg); font-size: var(--cf-ui-text-xs); font-weight: 600; white-space: nowrap; }
.tl-point i { display: block; width: 14px; height: 14px; flex: none; border: 2px solid var(--cf-ui-surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--cf-ui-border-strong); }
.tl-point-left { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), 7px); }

/* ---- Advisory call to action (end of every tool page) ------------------------------------- */
.tl-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--cf-ui-space-6); padding: var(--cf-ui-space-8); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-inverse); color: var(--cf-ui-inverse-fg); }
.tl-cta h2 { margin-top: var(--cf-ui-space-2); color: var(--cf-ui-inverse-fg); font: 650 var(--cf-ui-text-3xl) / 1.1 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.tl-cta p { max-width: 62ch; margin-top: var(--cf-ui-space-2); color: var(--cf-ui-inverse-fg); font-size: var(--cf-ui-text-md); line-height: var(--cf-ui-leading-normal); opacity: 0.86; }
.tl-cta .ui-eyebrow { color: var(--cf-ui-inverse-fg); opacity: 0.8; }
.tl-cta ul { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2) var(--cf-ui-space-5); margin: var(--cf-ui-space-4) 0 0; padding: 0; list-style: none; color: var(--cf-ui-inverse-fg); font-size: var(--cf-ui-text-sm); }
.tl-cta li { display: inline-flex; align-items: center; gap: 6px; opacity: 0.9; }
.tl-cta li svg { width: 15px; height: 15px; flex: none; }
.tl-cta .ui-btn { min-height: var(--cf-ui-control-lg); }
.tl-cta .ui-btn svg { width: 16px; height: 16px; }

/* ---- Article layout (guides and comparison briefs) -------------------------------------------- */
.tl-article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--cf-ui-space-12); align-items: start; padding-block: var(--cf-ui-space-8); }
.tl-prose { display: grid; gap: var(--cf-ui-space-4); min-width: 0; max-width: 72ch; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-md); line-height: 1.7; }
.tl-prose h2 { margin-top: var(--cf-ui-space-6); font: 650 var(--cf-ui-text-2xl) / 1.2 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); scroll-margin-top: calc(var(--cf-ui-header) + var(--cf-ui-space-4)); }
.tl-prose strong { color: var(--cf-ui-fg); font-weight: 600; }
.tl-prose > .tl-lead-para { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-lg); line-height: 1.6; }
.tl-prose a { color: var(--cf-ui-brand-text); text-underline-offset: 3px; }
.tl-aside { position: sticky; top: calc(var(--cf-ui-header) + var(--cf-ui-space-4)); display: grid; gap: var(--cf-ui-space-3); }
.tl-toc { display: grid; gap: 2px; padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); }
.tl-toc .ui-eyebrow { margin-bottom: var(--cf-ui-space-2); }
.tl-toc a { display: flex; align-items: center; min-height: 36px; padding-inline: var(--cf-ui-space-2); border-radius: var(--cf-ui-radius-sm); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); text-decoration: none; }
.tl-toc a:hover { background: var(--cf-ui-bg-subtle); color: var(--cf-ui-fg); }
.tl-checks { display: grid; gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.tl-checks li { display: flex; gap: var(--cf-ui-space-3); align-items: flex-start; }
.tl-checks li > svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--cf-ui-data); }
.tl-checks strong { display: block; }
.tl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--cf-ui-space-3); margin: 0; padding: 0; list-style: none; }
.tl-steps li { display: grid; gap: 4px; align-content: start; padding: var(--cf-ui-space-4); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.tl-steps li > span { color: var(--cf-ui-brand-text); font: 600 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-mono); }
.tl-steps strong { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-base); }
.tl-steps p { color: var(--cf-ui-fg-muted); }

/* ---- AWS savings calculator ---------------------------------------------------------------- */
.tl-calc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--cf-ui-space-6); align-items: start; }
.tl-calc-inputs { display: grid; gap: var(--cf-ui-space-5); }
.tl-calc-inputs fieldset { display: grid; gap: var(--cf-ui-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.tl-calc-inputs legend { margin-bottom: var(--cf-ui-space-2); padding: 0; color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); font-weight: 500; }
.tl-money { display: flex; align-items: center; height: var(--cf-ui-control-lg); border: 1px solid var(--cf-ui-border-strong); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface); overflow: hidden; }
.tl-money:focus-within { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.tl-money span { display: grid; place-items: center; align-self: stretch; padding-inline: 12px; border-right: 1px solid var(--cf-ui-border); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-sm) / 1 var(--cf-ui-font-mono); }
.tl-money input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: transparent; color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-lg) / 1 var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; }
.tl-money input:focus-visible { outline: none; }
.tl-range { width: 100%; height: 28px; margin: 0; accent-color: var(--cf-ui-brand); cursor: pointer; }
.tl-range-scale { display: flex; justify-content: space-between; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }
.tl-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-bg-subtle); }
.tl-option { position: relative; display: block; min-width: 0; }
.tl-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tl-option span { display: grid; place-items: center; min-height: 38px; padding: 6px 4px; border-radius: 7px; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-xs) / 1.2 var(--cf-ui-font-mono); text-align: center; transition: background-color var(--cf-ui-duration-fast) var(--cf-ui-ease); }
.tl-option input:checked + span { background: var(--cf-ui-surface); color: var(--cf-ui-fg); box-shadow: var(--cf-ui-shadow-sm); font-weight: 600; }
.tl-option input:focus-visible + span { outline: 2px solid var(--cf-ui-ring); outline-offset: 1px; }
.tl-option input:hover + span { color: var(--cf-ui-fg); }

.tl-result { display: grid; gap: var(--cf-ui-space-3); padding: var(--cf-ui-space-5); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface-2); }
.tl-result-label { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); font-weight: 500; }
.tl-result .tl-figure { color: var(--cf-ui-data); font-size: var(--cf-ui-text-4xl); overflow-wrap: anywhere; }
.tl-result p { color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); }
.tl-band { position: relative; height: 12px; border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-bg-subtle); overflow: hidden; }
.tl-band i { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var(--cf-ui-data); opacity: 0.85; transition: left var(--cf-ui-duration-slow) var(--cf-ui-ease), width var(--cf-ui-duration-slow) var(--cf-ui-ease); }
.tl-band-scale { display: flex; justify-content: space-between; color: var(--cf-ui-fg-muted); font: 500 var(--cf-ui-text-2xs) / 1 var(--cf-ui-font-mono); }
.tl-assumptions { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--cf-ui-border); }
.tl-assumptions > div { display: flex; justify-content: space-between; gap: var(--cf-ui-space-3); padding: 8px 0; border-bottom: 1px dashed var(--cf-ui-border); font-size: var(--cf-ui-text-xs); }
.tl-assumptions dt { color: var(--cf-ui-fg-muted); }
.tl-assumptions dd { margin: 0; color: var(--cf-ui-fg); font-family: var(--cf-ui-font-mono); font-variant-numeric: tabular-nums; text-align: right; }

.tl-lead-form { display: grid; gap: var(--cf-ui-space-3); }
.tl-lead-form .ui-input { width: 100%; min-width: 0; }
.tl-lead-form .ui-input:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
.tl-consent { display: flex; gap: var(--cf-ui-space-2); align-items: flex-start; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.45; cursor: pointer; }
.tl-consent input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--cf-ui-brand); }
.tl-lead-form .ui-btn { justify-self: start; }
.tl-status { display: flex; gap: var(--cf-ui-space-2); align-items: flex-start; padding: var(--cf-ui-space-3); border-radius: var(--cf-ui-radius-md); font-size: var(--cf-ui-text-sm); line-height: 1.45; }
.tl-status svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.tl-status-ok { background: var(--cf-ui-data-subtle); color: var(--cf-ui-data); }
.tl-status-error { background: var(--cf-ui-danger-subtle); color: var(--cf-ui-danger); }

/* ---- Empty states: 404 and route errors ----------------------------------------------------- */
.tl-empty { display: grid; place-items: center; min-height: 60vh; padding-block: var(--cf-ui-space-16); }
.tl-empty-card { display: grid; justify-items: start; gap: var(--cf-ui-space-4); width: min(560px, 100%); padding: var(--cf-ui-space-8); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-xl); background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-md); }
.tl-empty-card h1 { font: 650 var(--cf-ui-text-3xl) / 1.1 var(--cf-ui-font-sans); letter-spacing: var(--cf-ui-tracking-heading); }
.tl-empty-card p { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-md); line-height: var(--cf-ui-leading-normal); }
.tl-empty-card .ui-badge { font-size: var(--cf-ui-text-2xs); }
.tl-empty-card section { display: grid; gap: var(--cf-ui-space-2); width: 100%; padding-top: var(--cf-ui-space-4); border-top: 1px solid var(--cf-ui-border); }
.tl-empty-card h2 { font: 600 var(--cf-ui-text-lg) / 1.25 var(--cf-ui-font-sans); }

/* ---- Responsive ------------------------------------------------------------------------------ */
@media (max-width: 960px) {
  .tl-hero-split,
  .tl-calc-grid,
  .tl-article { grid-template-columns: 1fr; }
  .tl-aside { position: static; }
  .tl-cta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tl-hero { padding-block: var(--cf-ui-space-8) var(--cf-ui-space-6); gap: var(--cf-ui-space-6); }
  .tl-grid-2 { grid-template-columns: 1fr; }
  .tl-panel-head,
  .tl-panel-body { padding: var(--cf-ui-space-4); }
  .tl-panel-foot { padding-inline: var(--cf-ui-space-4); }
  .tl-table th:first-child,
  .tl-table td:first-child { padding-left: var(--cf-ui-space-4); }
  .tl-bar { grid-template-columns: minmax(80px, 104px) minmax(0, 1fr) 36px; gap: var(--cf-ui-space-2); }
  .tl-scale { margin-left: calc(104px + var(--cf-ui-space-2)); margin-right: calc(36px + var(--cf-ui-space-2)); }
  .tl-cta,
  .tl-empty-card { padding: var(--cf-ui-space-5); }
  .tl-cta .ui-btn { width: 100%; }
  .tl-note { flex-wrap: wrap; }
  .tl-note .tl-link { margin-left: 0; }
  .tl-map { height: 340px; }
  .tl-quad { font-size: var(--cf-ui-text-2xs); padding: var(--cf-ui-space-2); }
  .tl-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-select { min-width: 0; }
  .tl-controls > * { flex: 1 1 140px; }
  .tl-legend .tl-legend-source { margin-left: 0; }
}
@media (pointer: coarse) {
  .tl-seg .ui-seg-item,
  .tl-option span { min-height: 44px; }
  .tl-link { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  a.tl-card,
  .tl-bar-fill,
  .tl-band i,
  .tl-option span { transition: none; }
}
.tl-panel-foot > span { display: inline-flex; align-items: flex-start; gap: 6px; line-height: 1.45; }
.tl-panel-foot > span svg { flex: none; margin-top: 2px; }
.tl-after { margin-top: var(--cf-ui-space-3); }
.tl-panel-head .ui-eyebrow + h2,
.tl-panel-head .ui-eyebrow + h3 { margin-top: var(--cf-ui-space-2); }
.tl-figure-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cf-ui-space-2); }
.tl-checks .tl-help { display: block; margin-top: 2px; }
.tl-card-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--cf-ui-space-4) var(--cf-ui-space-6); }
.tl-card-row > div { display: grid; gap: var(--cf-ui-space-2); }
.tl-card-row h3 { font-size: var(--cf-ui-text-xl); }
@media (max-width: 640px) {
  .tl-card-row { grid-template-columns: 1fr; }
  .tl-card-row .ui-btn { width: 100%; white-space: normal; height: auto; min-height: var(--cf-ui-control-lg); }
}
.tl-atlas { scroll-margin-top: calc(var(--cf-ui-header) + var(--cf-ui-space-4)); }
.tl-atlas-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--cf-ui-space-3); align-items: start; }
.tl-table .tl-wrap { min-width: 220px; white-space: normal; }
@media (max-width: 960px) { .tl-atlas-layout { grid-template-columns: 1fr; } }
.tl-point span { padding: 1px 5px; border-radius: var(--cf-ui-radius-xs); background: var(--cf-ui-surface); box-shadow: var(--cf-ui-shadow-sm); }
.tl-defs { display: grid; gap: var(--cf-ui-space-3); margin: var(--cf-ui-space-2) 0 0; padding-top: var(--cf-ui-space-3); border-top: 1px solid var(--cf-ui-border); }
.tl-defs dt { color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-2xs) / 1.2 var(--cf-ui-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.tl-defs dd { margin: 2px 0 0; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-sm); line-height: 1.5; }
.tl-muted { color: var(--cf-ui-fg-muted); }
.tl-stack { display: grid; gap: var(--cf-ui-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-chips { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); }
.tl-chips a { display: inline-flex; align-items: center; min-height: 32px; padding-inline: var(--cf-ui-space-3); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-surface); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); text-decoration: none; }
.tl-chips a:hover { border-color: var(--cf-ui-border-strong); color: var(--cf-ui-fg); }
.tl-card .tl-card-top h3 { min-width: 0; }
@media (max-width: 640px) { .tl-stack { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .tl-chips a { min-height: 44px; } }
.tl-topics { display: grid; gap: var(--cf-ui-space-4); }
.tl-topics-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cf-ui-space-3); }
.tl-stars { display: inline-flex; gap: 2px; color: var(--cf-ui-warn); }
.tl-meter { display: grid; gap: 6px; min-width: 140px; }
.tl-meter i { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--cf-ui-bg-subtle); }
.tl-meter b { display: block; height: 100%; border-radius: inherit; }
.tl-callout > p { color: var(--cf-ui-fg); font-size: var(--cf-ui-text-md); }
.tl-prose .tl-checks p { margin-top: 2px; color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-base); }
.tl-prose .tl-table-wrap { margin: 0; }
.tl-table .tl-wrap { white-space: normal; }
body.tl-page { margin: 0; }
.tl-empty-card section a { color: var(--cf-ui-fg); text-decoration: underline; text-underline-offset: 3px; }

/* src/components/analytics-consent.module.css */
/* Consent banner and preferences panel on design system v2 (light and dark). Only --cf-ui-* tokens.
 * Reject, save and allow share one button style: no choice is visually pushed over another. */
/* The wrapper is a 0x0 anchor: only the cards (fixed, never in flow) change size, so swapping the pill for the
 * notice after hydration is not counted as a layout shift (it was 0.41 of the home's 0.42 mobile CLS). */
.root { position: fixed; bottom: 0; left: 0; width: 0; height: 0; z-index: var(--cf-ui-z-header); pointer-events: none; font-family: var(--cf-ui-font-sans); color: var(--cf-ui-fg); -webkit-font-smoothing: antialiased; }
.root > * { pointer-events: auto; }
.panel,
.notice { box-sizing: border-box; max-width: 100%; border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-lg); background: var(--cf-ui-surface); color: var(--cf-ui-fg); box-shadow: var(--cf-ui-shadow-lg); }
.panel,
.notice,
.settings { position: fixed; bottom: 16px; left: 16px; }
.panel,
.notice { max-width: calc(100vw - 32px); }
.panel { width: 440px; padding: var(--cf-ui-space-5); }
.notice { width: 380px; padding: var(--cf-ui-space-4); }
.panel h2,
.notice h2 { margin: 0 0 var(--cf-ui-space-2); color: var(--cf-ui-fg); font: 650 var(--cf-ui-text-lg) / 1.3 var(--cf-ui-font-sans); letter-spacing: -0.01em; }
.notice h2 { font-size: var(--cf-ui-text-md); }
.panel p,
.notice p { margin: 0 0 var(--cf-ui-space-3); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: var(--cf-ui-leading-normal); }
.panel .note { color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); }
.panel .note a { color: var(--cf-ui-fg); text-decoration: underline; text-underline-offset: 3px; }
.categories { display: grid; gap: var(--cf-ui-space-2); margin: 0 0 var(--cf-ui-space-3); padding: 0; list-style: none; }
.categories label { display: flex; gap: var(--cf-ui-space-3); align-items: flex-start; padding: var(--cf-ui-space-3); border: 1px solid var(--cf-ui-border); border-radius: var(--cf-ui-radius-md); background: var(--cf-ui-surface-2); color: var(--cf-ui-fg-2); font-size: var(--cf-ui-text-sm); line-height: var(--cf-ui-leading-normal); cursor: pointer; }
.categories strong { color: var(--cf-ui-fg); font-weight: 600; }
.categories input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--cf-ui-brand); }
.categories input:disabled + span { color: var(--cf-ui-fg-muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--cf-ui-space-2); }
.actions button,
.settings { min-height: 40px; padding: 0 var(--cf-ui-space-3); border: 1px solid var(--cf-ui-border-strong); border-radius: var(--cf-ui-radius-sm); background: var(--cf-ui-surface); color: var(--cf-ui-fg); font: 600 var(--cf-ui-text-sm) / 1.2 var(--cf-ui-font-sans); cursor: pointer; transition: background-color var(--cf-ui-duration) var(--cf-ui-ease), border-color var(--cf-ui-duration) var(--cf-ui-ease); }
.actions button { flex: 1; white-space: nowrap; }
.actions button:hover,
.settings:hover { border-color: var(--cf-ui-fg-faint); background: var(--cf-ui-bg-subtle); }
.actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.settings { min-height: 32px; border-color: var(--cf-ui-border); border-radius: var(--cf-ui-radius-pill); background: var(--cf-ui-glass); color: var(--cf-ui-fg-muted); font-size: var(--cf-ui-text-xs); font-weight: 500; box-shadow: var(--cf-ui-shadow-sm); backdrop-filter: blur(10px); }
.close { min-height: 32px; margin-top: var(--cf-ui-space-2); padding: 0; border: 0; background: transparent; color: var(--cf-ui-fg-2); cursor: pointer; font: 500 var(--cf-ui-text-xs) / 1 var(--cf-ui-font-sans); text-decoration: underline; text-underline-offset: 3px; }
.close:hover { color: var(--cf-ui-fg); }
.root button:focus-visible,
.root a:focus-visible,
.categories input:focus-visible { outline: 2px solid var(--cf-ui-ring); outline-offset: 2px; }
@media (max-width: 480px) {
  .panel,
  .notice,
  .settings { bottom: 12px; }
  .panel,
  .notice { right: 16px; width: auto; max-width: none; padding: var(--cf-ui-space-4); }
  .actions button { flex-basis: 100%; min-height: 44px; }
  /* Compact on phones: the card used to fill ~75% of the screen and was the page's LCP element. Same copy, same
   * controls, same visual weight per choice; only spacing, type size and button layout shrink. */
  .panel { max-height: calc(100dvh - 24px); overflow-y: auto; padding: var(--cf-ui-space-3); }
  .panel h2 { margin-bottom: var(--cf-ui-space-1); font-size: var(--cf-ui-text-md); }
  .panel p { margin-bottom: var(--cf-ui-space-2); font-size: var(--cf-ui-text-xs); line-height: 1.4; }
  .categories { gap: var(--cf-ui-space-1); margin-bottom: var(--cf-ui-space-2); }
  .categories label { padding: var(--cf-ui-space-2); font-size: var(--cf-ui-text-xs); line-height: 1.35; }
  .panel .actions { flex-wrap: nowrap; gap: var(--cf-ui-space-1); }
  .panel .actions button { flex: 1 1 0; min-width: 0; padding: 0 var(--cf-ui-space-1); white-space: normal; font-size: var(--cf-ui-text-xs); line-height: 1.15; }
}
@media (pointer: coarse) {
  .actions button,
  .settings,
  .close { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .actions button,
  .settings { transition: none; }
}

/* pages-import/section-compat.css */
:root {
  --font-satoshi: "Satoshi";
  --font-geist-mono: "Geist Mono";
}
.pgi-root { min-height: 0; }
.pgi-main { min-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }