/* Self-hosted Inter (VI UI font). Latin subset; CJK falls back to native system fonts
   (PingFang SC / Microsoft YaHei) so no multi-MB CJK webfont is needed and text renders
   natively for China users — Google Fonts' CSS API is unreachable from this network. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/inter-800.woff2') format('woff2')}
/* VI data + editorial fonts, self-hosted like Inter (Google Fonts unreachable from this network;
   binaries from google/fonts, OFL-licensed). Names match --cd-font-data / --cd-font-editorial. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibmplexmono-400.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibmplexmono-500.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibmplexmono-600.ttf') format('truetype')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/sourceserif4-var.ttf') format('truetype')}
:root{
  /* CompareDeals VI v1.1 — "Proof Frame". Evidence Ink / Proof Teal / Paper Sand.
     The --brand-* and --ink-* scales are re-hued from the old blue/slate to the VI
     teal/ink, so every var() consumer across the site re-skins without per-rule edits. */
  --cd-ink:#152A2E;--cd-teal:#147D78;--cd-sand:#F5F1E8;--cd-coral:#E96F51;--cd-gold:#C79A43;--cd-graphite:#293437;--cd-slate:#5E6C70;--cd-mist:#DCE3E0;--cd-cloud:#FAFBFA;--cd-mint:#DDF3EC;--cd-pending:#F8ECCD;--cd-risk:#FBE2DC;--cd-declared:#E1EFF5;
  --brand-50:#EBF6F4;--brand-100:#DDF3EC;--brand-200:#BCE6DC;--brand-300:#8AD2C3;--brand-400:#47AC9C;--brand-500:#1E8D80;--brand-600:#147D78;--brand-700:#116963;--brand-800:#0E544F;--brand-900:#0B453F;
  --indigo-500:#1E8D80;--indigo-600:#147D78;--emerald-600:#1E8D80;--amber-600:#C79A43;--cyan-500:#47AC9C;
  --ink-50:#FAFBFA;--ink-100:#EFF4F1;--ink-200:#DCE3E0;--ink-300:#C2CFCB;--ink-400:#8FA09B;/* --ink-450 is the lightest "quiet" grey that still clears WCAG AA for small text: --ink-400 is
     ~3.1:1 on white, below the 4.5:1 requirement. */--ink-450:#5C6E6A;--ink-500:#5E6C70;--ink-600:#46545A;--ink-700:#35434A;--ink-800:#293437;--ink-900:#152A2E;--ink-950:#0C1719;
  --sand:#F5F1E8;
  --cd-font-ui:'Inter','Noto Sans SC',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --cd-font-editorial:'Source Serif 4','Noto Serif SC',Georgia,'Times New Roman',serif;
  --cd-font-data:'IBM Plex Mono',ui-monospace,'Cascadia Code','JetBrains Mono',Consolas,'Courier New',monospace;
  /* VI v1.1 modular type scale (manual p7): Hero 56/64, H1 40/48, H2 28/36, Body 16/26, UI 14/20.
     Desktop peaks are the spec values; clamp() keeps small screens responsive. */
  --text-hero:56px;--leading-hero:1.143;--text-h1:40px;--leading-h1:1.2;--text-h2:28px;--leading-h2:1.286;--text-body:16px;--leading-body:1.625;--text-ui:14px;--leading-ui:1.429;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:9999px;
  --shadow-soft:0 1px 2px rgba(21,42,46,.04),0 8px 24px rgba(21,42,46,.06);
  --shadow-card:0 1px 3px rgba(21,42,46,.08),0 4px 12px rgba(21,42,46,.04);
  --shadow-glow:0 10px 40px -10px rgba(20,125,120,.35);
  --container:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--cd-font-ui);font-size:var(--text-body);color:var(--ink-900);background:#fff;line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
a{color:var(--brand-600);text-decoration:none}
a:hover{color:var(--brand-700)}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.grid{display:grid}
.hidden{display:none!important}
.text-sm{font-size:13px}.text-xs{font-size:12px}.text-lg{font-size:18px}
.muted{color:var(--ink-500)}
.section{padding:96px 0}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-600);margin-bottom:10px}
.h1{font-size:clamp(30px,5vw,52px);line-height:1.08;letter-spacing:-.02em;font-weight:800}
.h2{font-size:clamp(20px,2vw,22px);line-height:1.25;letter-spacing:-.01em;font-weight:700;margin-bottom:12px}
.theme-home .h2{font-size:clamp(28px,3.6vw,48px);line-height:1.15;letter-spacing:-.02em;margin-bottom:14px}
.h3{font-size:18px;font-weight:600;margin-bottom:8px}
.h1-inner{font-size:clamp(28px,3.6vw,var(--text-h1));font-weight:700;line-height:var(--leading-h1);letter-spacing:-.02em;margin-bottom:12px}
.h1-page{font-size:clamp(30px,3.6vw,52px);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.h2-section{font-size:clamp(22px,2.6vw,var(--text-h2));font-weight:700;line-height:var(--leading-h2);letter-spacing:-.01em;margin-bottom:12px}
.h2-card{font-size:22px;font-weight:700;line-height:1.25;margin-bottom:10px}
.h2-sub{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:10px;color:var(--ink-800)}
.h1-community{font-size:clamp(28px,3vw,40px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.lead{font-size:17px;color:var(--ink-500);max-width:760px}

/* VI typography: editorial serif for longform, tabular mono for data/figures */
.font-editorial,.prose,.article p,.article li{font-family:var(--cd-font-editorial)}
.font-data,.product-price,.product-specs,.stat b{font-family:var(--cd-font-data);font-variant-numeric:tabular-nums}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:12px;font-weight:700;font-size:14px;border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-lg{padding:14px 32px;font-size:16px;font-weight:700}
.btn-primary{background:var(--brand-600);color:#fff;box-shadow:var(--shadow-glow)}
.btn-primary:hover{background:var(--brand-700);color:#fff}
.btn-ghost{background:transparent;color:var(--ink-700);border-color:var(--ink-200)}
.btn-ghost:hover{border-color:var(--brand-300);color:var(--brand-700)}
.btn-light{background:#fff;color:var(--ink-900);border-color:var(--ink-200)}
.btn-light:hover{box-shadow:var(--shadow-card)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:var(--radius-sm)}

/* Header — light glass nav, matching the reference structure */
body{padding-top:82px}
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(220,227,224,.8)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 16px;height:82px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-logo-icon{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--brand-500),var(--indigo-500));display:grid;place-items:center;font-size:18px;color:#fff;box-shadow:var(--shadow-glow)}
.nav-logo-text{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink-900)}
.nav-logo-img{height:26px;width:auto;display:block;flex-shrink:0}
.nav-logo-dark{display:none}
.theme-dark .nav-logo-light{display:none}
.theme-dark .nav-logo-dark{display:block}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;color:var(--ink-600)}
.nav-links > a{transition:color .15s ease;color:var(--ink-600)}
.nav-links > a:hover{color:var(--ink-900)}
.nav-links > a:first-child{font-weight:500;color:var(--ink-900)}
.nav-group{position:relative}
.nav-group::before{content:"";position:absolute;top:100%;left:0;right:0;height:14px;z-index:99}
.nav-group-label{cursor:pointer;display:flex;align-items:center;gap:4px;user-select:none;padding:6px 0;background:none;border:none;color:var(--ink-600);font:inherit}
.nav-group-label:hover{color:var(--ink-900)}
.nav-arrow{display:inline-block;font-size:10px;transition:transform .2s;margin-left:2px;opacity:.5}
.nav-group.open .nav-arrow{transform:rotate(180deg);opacity:1}
.nav-dropdown{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:210px;padding:8px;margin-top:8px;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border:1px solid rgba(220,227,224,.9);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.1);z-index:100}
.nav-group.open .nav-dropdown,.nav-group:hover .nav-dropdown{display:block}
.nav-dropdown a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink-700);font-size:14px;white-space:nowrap}
.nav-dropdown a:hover{background:var(--brand-50);color:var(--brand-700)}
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.lang-toggle{display:flex;align-items:center;gap:2px;font-size:14px;color:var(--ink-450)}
.lang-toggle a{padding:4px 8px;border-radius:6px;color:var(--ink-600)}
.lang-toggle a.active{background:var(--ink-100);color:var(--ink-900);font-weight:500}
.nav-cta{background:var(--brand-600);color:#fff;padding:8px 16px;border-radius:9px;font-size:14px;font-weight:600;box-shadow:var(--shadow-glow)}
.nav-cta:hover{background:var(--brand-700);color:#fff}
.nav-toggle{display:none;background:rgba(21,42,46,.06);border:1px solid rgba(21,42,46,.08);color:var(--ink-700);padding:8px 10px;border-radius:8px;cursor:pointer}
.mobile-nav{display:none;background:#fff;padding:8px 20px 20px;border-top:1px solid var(--ink-200);max-height:70vh;overflow:auto}

/* Hero — light background with grid + aurora, matching the reference */
.hero{position:relative;background:var(--sand);color:var(--ink-900);padding:44px 0 96px;overflow:hidden}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(21,42,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(21,42,46,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 75%)}
.aurora{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;pointer-events:none}
.aurora-blue{background:#147D78}.aurora-indigo{background:#C79A43}.aurora-cyan{background:#47AC9C}
.hero-inner{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:0 20px;text-align:center}
.hero h1{font-size:clamp(34px,4.6vw,var(--text-hero));line-height:var(--leading-hero);letter-spacing:-.025em;font-weight:700;margin:18px 0 0}
.text-gradient{background:linear-gradient(120deg,#147D78 0%,#116963 52%,#152A2E 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:18px;color:var(--ink-600);max-width:672px;margin:16px auto 0}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ink-200);padding:6px 12px;border-radius:999px;font-size:13px;margin-bottom:16px;box-shadow:var(--shadow-card)}
.role-toggle{display:inline-flex;background:var(--ink-100);border-radius:999px;padding:4px;margin-bottom:8px;gap:4px}
.role-toggle button{background:transparent;border:0;color:var(--ink-600);padding:8px 20px;border-radius:999px;font-weight:500;cursor:pointer;font-size:14px;transition:.18s}
.role-toggle button.active{background:#fff;color:var(--ink-900);box-shadow:var(--shadow-card)}
.role-panel{display:none}
.role-panel.active{display:block;animation:fadeUp .35s ease both}
.ai-box{background:#fff;color:var(--ink-900);border-radius:20px;padding:20px 24px;box-shadow:0 18px 50px -12px rgba(21,42,46,.18);border:1px solid var(--ink-200);max-width:896px;margin:22px auto 0;text-align:left}
.ai-box .ai-input-row{display:flex;align-items:center;gap:8px;padding:4px 6px}
.ai-box textarea{flex:1;border:0;resize:none;font:inherit;font-size:16px;padding:10px 4px;min-height:44px;outline:none}
.ai-box .ai-actions{display:flex;justify-content:flex-end;padding:2px 6px 4px}
.ai-box .ai-hint{font-size:12.5px;color:var(--ink-450);padding:0 10px 8px}
.intent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:896px;margin:20px auto 0}
.intent-card{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--ink-200);color:var(--ink-900);border-radius:16px;padding:14px 20px;cursor:pointer;transition:.18s;text-align:left;box-shadow:var(--shadow-card)}
.intent-card:hover{border-color:var(--brand-300);transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(20,125,120,.35)}
.intent-icon{font-size:20px}
.intent-card .intent-label{font-weight:700;font-size:14px}
.intent-card .intent-desc{font-size:12px;color:var(--ink-500)}

/* Stats / trust bar */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-70px;position:relative;z-index:2}
.stat{background:#fff;border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-card)}
.stat b{font-size:30px;display:block;letter-spacing:-.02em}
.stat span{color:var(--ink-500);font-size:13px}
.stat-ico{width:34px;height:34px;border-radius:10px;margin-bottom:10px;object-fit:cover}
.stat em{display:block;color:var(--ink-450);font-size:12px;font-style:normal;margin-top:2px}
.hero-visual-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:896px;margin:22px auto 0}
.hero-visual-row img{height:132px;width:100%;object-fit:cover;border-radius:14px;border:1px solid var(--ink-200);background:#fff}
.section-banner{width:100%;aspect-ratio:16/7;height:auto;object-fit:cover;border-radius:18px;margin:18px 0 6px;border:1px solid var(--ink-200);display:block}
.feature-card-img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:12px;margin-bottom:10px;display:block}
.verify-img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:10px;margin-bottom:10px;display:block}
.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.trust-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--ink-200);padding:16px;border-radius:14px}
.trust-item b{display:block;font-size:14px}
.trust-item span{font-size:12px;color:var(--ink-500)}

/* Cards & sections */
.card{background:rgba(255,255,255,.78);border-radius:14px;border:1px solid rgba(220,227,224,.6);box-shadow:var(--shadow-card);padding:24px}
/* Heading-level look-alikes: some cards must read like a heading for information architecture
   (the reference page nests them under an H2) without pulling extra H3s into the outline. */
.card-title{font-size:16px;font-weight:700;line-height:1.3;margin:0 0 6px}
.h3-quiet{font-size:14.5px;font-weight:700;line-height:1.35;margin:0 0 4px}
.theme-dark .card-title,.theme-dark .h3-quiet{color:#C79A43}
/* Key Takeaways bulleted list (lighting home) — custom markers, readable measure. */
.takeaways{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:760px}
.takeaways li{position:relative;padding-left:26px;font-size:15px;line-height:1.6;color:var(--ink-700)}
.takeaways li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--brand-600);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.theme-dark .takeaways li{color:#c8cad8}
.theme-dark .takeaways li::before{background:#C79A43;color:#1a1a26}
/* Crawler-only block: same GEO pattern the reference uses — readable by AI/search crawlers,
   never shown to people and never focusable. */
.crawler-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.crawler-only a,.crawler-only button{pointer-events:none}
/* Links that sit inside running text must not rely on colour alone (WCAG 1.4.1). */
p a:not(.btn):not(.tag):not(.card),li a:not(.btn):not(.tag):not(.card),td a:not(.btn):not(.tag):not(.card),
.callout a:not(.btn):not(.tag),.muted a:not(.btn):not(.tag),.faq-body a:not(.btn):not(.tag),.breadcrumb a,.list-flat h3 a{text-decoration:underline;text-underline-offset:2px}
/* Visible to screen readers only — used for table columns that exist for actions, not data. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.grid-2{grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{grid-template-columns:repeat(4,1fr);gap:18px}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature .ico{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--brand-50)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:#116963;color:#fff}
.badge.amber{background:var(--amber-600)}
.badge.blue{background:var(--brand-600)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--ink-200);vertical-align:top}
.table th{background:var(--ink-100);font-weight:700;color:var(--ink-700)}
.table tr:last-child td{border-bottom:0}
.table.wrap{overflow-x:auto}

/* Product cards */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.product-card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:8px;transition:.18s}
.product-card:hover{box-shadow:var(--shadow-card);border-color:var(--brand-200)}
.product-card .rank{font-size:12px;font-weight:800;color:var(--brand-600)}
.product-card h3,.product-card .card-title{font-size:16px;line-height:1.3}
.product-card .meta{font-size:12px;color:var(--ink-500)}
.product-card .specs{display:flex;flex-wrap:wrap;gap:5px;font-size:11px;color:var(--ink-600)}
.product-card .specs span{background:var(--ink-100);padding:2px 7px;border-radius:6px}
.price{font-weight:800;font-size:17px;color:var(--ink-900)}

/* Filter bar */
.filter-bar{background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-lg);padding:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:13px;font-weight:600;color:#374151}
.field input,.field select,.field textarea{border:1px solid #d1d5db;border-radius:10px;padding:12px 14px;font:inherit;font-size:14px;background:rgba(255,255,255,.75);color:#293437}
.field select,.field textarea{padding:10px 14px;border-radius:8px;border-color:#DCE3E0}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brand-200);border-color:var(--brand-400)}

/* Footer */
.site-footer{background:var(--ink-900);color:#9ca3af;padding:64px 0 20px;margin-top:0;border-top:1px solid rgba(255,255,255,.1)}
.site-footer .container{max-width:1280px;padding:0 16px}
.footer-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.footer-grid h4{color:#fff;font-size:16px;font-weight:600;margin-bottom:14px}
.footer-grid a{display:block;color:#9ca3af;font-size:14px;padding:4px 0}
.site-footer p{font-size:14px;color:#9ca3af}
.footer-grid a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;display:flex;justify-content:space-between;gap:14px;font-size:12px;color:#9ca3af;flex-wrap:wrap}
.footer-bottom a{color:#8AD2C3}

/* Tabs, steps, modals */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab{padding:8px 14px;border-radius:999px;border:1px solid var(--ink-200);background:#fff;font-size:13px;font-weight:600;cursor:pointer}
.tab.active{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}
.tab.active .muted{color:#fff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-lg);padding:18px}
.step .num{width:30px;height:30px;border-radius:999px;background:var(--brand-600);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;margin-bottom:10px}
.faq-item{border:0;border-bottom:1px solid var(--ink-200);border-radius:0;margin-bottom:0;background:transparent;padding:16px 0}
.faq-item summary{padding:0 0 8px;cursor:pointer;font-weight:700;font-size:18px;color:#1f2937;list-style:none}
.faq-item summary::after{content:'+';float:right;color:var(--brand-600)}
.faq-item[open] summary::after{content:'–'}
.faq-item .faq-body{padding:0 0 4px;color:#4b5563;font-size:15px;line-height:1.75}
.callout{background:var(--brand-50);border:1px solid var(--brand-200);border-radius:12px;padding:14px 16px;font-size:14px}
.callout .muted{color:var(--ink-600)}
.breadcrumb{font-size:13px;color:var(--ink-500);margin:16px 0}
.article{max-width:780px;padding:48px 24px 64px}
.article h1{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:12px 0}
.article h2{font-size:22px;font-weight:700;margin:28px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--ink-200)}
.article h3{font-size:17px;font-weight:700;margin:20px 0 8px}
.article p{margin:12px 0;color:var(--ink-700);font-size:15px;line-height:1.75}
.article table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px;border-radius:12px;overflow:hidden}
.article-hero{background:#152A2E;color:#EDF7F5;padding:56px 0 48px}
.article-hero h1{color:#EDF7F5;font-size:32px;font-weight:700;line-height:1.25;max-width:780px}
.article-hero .breadcrumb{color:#8FA09B}
.article-hero .tag{background:rgba(255,255,255,.08);color:#C2CFCB}
.article th,.article td{border:1px solid var(--ink-200);padding:9px 11px;text-align:left}
.article th{background:var(--ink-100)}
.tag{display:inline-block;background:var(--ink-100);color:var(--ink-600);font-size:12px;padding:3px 9px;border-radius:999px;margin:2px}
.compare-table td.win{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.modal-mask{position:fixed;inset:0;background:rgba(12,23,25,.5);display:none;place-items:center;z-index:80;padding:20px}
.modal-mask.open{display:grid}
.modal{background:#fff;border-radius:var(--radius-2xl);max-width:620px;width:100%;padding:24px;max-height:90vh;overflow:auto}
.alert{background:#EBF6F4;border:1px solid #BCE6DC;color:#116963;padding:12px 16px;border-radius:12px;font-size:14px;margin:12px 0}
.empty{text-align:center;padding:48px 20px;color:var(--ink-500)}
@media(max-width:920px){
  .stats,.trust-bar,.grid-4,.intent-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .main-nav{display:none}
  .nav-toggle{display:block}
  .header-actions .lang-switch{display:none}
  .mobile-nav{display:none;background:var(--ink-950);padding:12px 20px 20px;border-top:1px solid rgba(255,255,255,.1)}
  .mobile-nav.open{display:block}
  .mobile-nav a{display:block;color:#DCE3E0;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
}
@media(max-width:560px){
  .stats,.trust-bar,.grid-4,.intent-grid,.grid-2,.steps{grid-template-columns:1fr}
}

/* ---- v2 additions ---- */
.card-img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:12px;margin-bottom:12px;background:var(--ink-100);display:block}
.guide-card .card-img{aspect-ratio:4/3}
.cat-banner{width:100%;height:120px;object-fit:cover;border-radius:12px;margin-bottom:14px;background:var(--ink-100)}
.cat-items{grid-template-columns:repeat(4,1fr);gap:14px}
.cat-item{display:flex;flex-direction:column;gap:5px;border:1px solid var(--ink-200);border-radius:14px;padding:18px 16px;color:var(--ink-800);background:#fff;transition:.16s}
.cat-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--brand-50);font-size:21px;line-height:1;margin-bottom:6px}
.cat-item b{font-size:14.5px;font-weight:700}
.cat-item span{font-size:12.5px;color:var(--ink-500)}
.cat-item:hover{border-color:var(--brand-300);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.cat-card .card-img{height:130px}
.room-card .card-img{aspect-ratio:16/10}
.logo-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}
.logo-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--ink-200);background:#fff;border-radius:12px;padding:12px}
.logo-chip .logo-dot{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex:0 0 36px}
.post-row{display:flex;gap:14px;padding:14px 4px;border-bottom:1px solid var(--ink-200)}
.post-row:last-child{border-bottom:0}
.vote-box{width:54px;flex:0 0 54px;text-align:center;background:var(--ink-50);border-radius:10px;padding:6px 0}
.vote-box b{display:block;font-size:16px}
.vote-box span{font-size:10px;color:var(--ink-500)}
.badge-widget{display:inline-flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--ink-200);border-radius:12px;padding:12px 20px;background:linear-gradient(135deg,#fff,#EBF6F4);box-shadow:var(--shadow-card);margin:10px 0}
.badge-widget b{font-size:13px;color:var(--brand-700)}
.badge-widget span{font-size:20px;font-weight:800}
.badge-widget.bw-sm{padding:8px 14px}
.badge-widget.bw-sm span{font-size:15px}
.badge-widget.bw-lg{padding:16px 26px}
.badge-widget.bw-lg span{font-size:26px}
.badge-widget.bw-dark{background:#152A2E;border-color:rgba(255,255,255,.12)}
.badge-widget.bw-dark b{color:#8AD2C3}
.badge-widget.bw-dark span{color:#fff}
.stars{font-size:30px;color:var(--ink-300);letter-spacing:4px;cursor:pointer}
.stars span.active{color:#C79A43}
pre{background:var(--ink-950);color:#DCE3E0;padding:14px;border-radius:12px;overflow:auto;font-size:12.5px;margin:12px 0;line-height:1.5}
.table-wrap{overflow-x:auto}
.rating-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.progress{flex:1;height:6px;background:var(--ink-100);border-radius:999px;overflow:hidden}
.progress > i{display:block;height:6px;background:var(--brand-600);border-radius:999px}
.sidebar-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px}
.sidebar{position:sticky;top:86px;align-self:start}
.sidebar a{display:block;padding:8px 12px;border-radius:9px;color:var(--ink-700);font-size:14px}
.sidebar a:hover,.sidebar a.active{background:var(--brand-50);color:var(--brand-700)}
.price-tag{font-weight:800;color:var(--brand-700)}
.hero-visual{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.hero-visual img{height:120px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.2)}
.animate-float{animation:float 6s ease-in-out infinite}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.16s}.reveal-delay-3{transition-delay:.24s}.reveal-delay-4{transition-delay:.32s}
.ob-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ob-step{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--ink-200);border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-500);background:var(--ink-50)}
.ob-step b{width:22px;height:22px;border-radius:999px;background:var(--ink-200);color:var(--ink-600);display:grid;place-items:center;font-size:12px}
.ob-step.active{border-color:var(--brand-300);background:var(--brand-50);color:var(--brand-700)}
.ob-step.active b{background:var(--brand-600);color:#fff}
.ob-panel{animation:fadeUp .25s ease both}
.picker-list{max-height:420px;overflow:auto}
.picker-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px;border-bottom:1px solid var(--ink-200)}
.picker-row:last-child{border-bottom:0}
.social-row{display:flex;gap:10px;margin-top:14px}
.social-btn{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);color:#9ca3af;display:grid;place-items:center;font-size:14px;font-weight:700;border:1px solid rgba(255,255,255,.08)}
.social-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.tool-card{display:flex;flex-direction:column;gap:8px;min-height:200px;transition:.18s}
.tool-card:hover{transform:translateY(-3px);border-color:var(--brand-300);box-shadow:0 16px 34px -16px rgba(20,125,120,.35)}
.tool-link{margin-top:auto;font-size:13px;font-weight:600;color:var(--brand-600)}
/* Tool center grid: section head (icon + title + count) and card field order
   (tag → icon → title → copy → promise line) follow the reference tools page. */
.tool-section{margin-bottom:48px}
.tool-section:last-child{margin-bottom:0}
.tool-section-head{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.tool-section-head .icon{font-size:20.8px;line-height:1}
.tool-section-head h2{font-size:20.8px;font-weight:700;letter-spacing:-.01em;margin:0}
.tool-section-head .count{font-size:12.8px;color:var(--ink-600);background:var(--ink-100);padding:3.2px 9.6px;border-radius:999px}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-grid .tool-card{gap:0;min-height:196px;padding:24px;border-radius:14px}
.tool-grid .tool-card:hover{background:#fff}
.tool-grid .card-tag{align-self:flex-start;display:inline-flex;align-items:center;font-size:10.9px;font-weight:600;letter-spacing:.04em;padding:3.2px 8.8px;border-radius:5px;margin-bottom:12px}
.card-tag.tag-buyer{background:rgba(20,125,120,.1);color:#0E544F}
.card-tag.tag-supplier{background:rgba(20,125,120,.12);color:#0E544F}
.card-tag.tag-resource{background:rgba(20,125,120,.12);color:#116963}
.tool-grid .card-icon{font-size:24px;line-height:1.2;margin-bottom:8px}
.tool-grid .tool-card h3{font-size:15.7px;font-weight:600;line-height:1.35;margin:0 0 6.4px}
.tool-grid .tool-card p{font-size:13.3px;color:var(--ink-500);line-height:1.5;margin:0;flex:1}
.tool-grid .card-sub{font-size:12px;color:var(--ink-450);margin-top:4px}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--brand-600);animation:pulse-dot 2s infinite}
/* Glossary index: the reference renders every term as a tile in an auto-fill grid (term in bold,
   definition underneath) rather than as link cards, with a gold accent on the term itself. */
.glossary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.glossary-tile{background:#fff;padding:16px 20px;border-radius:8px;border:1px solid rgba(199,154,67,.18);
  text-decoration:none;color:inherit;display:block;transition:border-color .18s ease,transform .18s ease}
.glossary-tile:hover{border-color:rgba(199,154,67,.55);transform:translateY(-2px)}
.glossary-tile strong{color:#7A5E1F;font-size:15px}
.glossary-tile p{color:var(--ink-600);font-size:13.5px;line-height:1.55;margin:6px 0 0}
/* Guide and insight indexes mirror the reference: a flat run of H3 links, not a card grid. */
.list-flat{margin-top:10px;columns:2;column-gap:34px}
.list-flat h3{font-size:14px;font-weight:500;margin:0 0 8px;break-inside:avoid;line-height:1.45}
.list-flat h3 a{color:var(--ink-700);text-decoration:underline;text-underline-offset:2px}
.list-flat h3 a:hover{color:var(--brand-700);text-decoration:underline}
@media (max-width:760px){.list-flat{columns:1}}
@media (max-width:900px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tool-grid{grid-template-columns:1fr}}
.svc-stat{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.svc-stat span{font-size:12px;color:var(--ink-500)}
.stars-line{color:#C79A43;font-size:14px;letter-spacing:1px}
.cat-layout{display:grid;grid-template-columns:250px 1fr;gap:36px;margin-top:26px;align-items:start}
.cat-sidebar-wrap{position:sticky;top:88px}
.cat-sidebar{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--ink-200);border-radius:16px;padding:14px;box-shadow:var(--shadow-card)}
.cat-sidebar-title{font-size:13px;font-weight:700;color:var(--ink-800);padding:6px 10px 10px}
.cat-tab{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:10px;border-radius:10px;border:none;background:transparent;font-size:13.5px;font-weight:600;color:var(--ink-600);cursor:pointer;transition:.16s;text-decoration:none}
.cat-tab.active,.cat-tab:hover{background:var(--brand-50);color:var(--brand-700)}
.cat-tab.active{box-shadow:inset 2px 0 0 var(--brand-600)}
.cat-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--dot,#147D78)}
.cat-tab-name{flex:1;min-width:0}
.cat-tab-count{flex:none;font-size:11.5px;font-weight:700;color:var(--brand-700);background:var(--brand-50);border-radius:6px;padding:1px 6px}
.cat-tab.active .cat-tab-count{background:#fff}
.cat-tab-cta{margin-top:8px;border-top:1px solid var(--ink-100);border-radius:0 0 10px 10px;padding-top:12px}
.cat-new{flex:none;font-size:10.5px;font-weight:700;color:var(--brand-600);background:var(--brand-50);border-radius:6px;padding:2px 7px;line-height:1.3;text-align:center}
.cat-section{display:none;padding:0 0 10px}
.cat-section.active{display:block}
.cat-section h2{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.01em}
.cat-compare-link{font-size:14px;font-weight:600;color:var(--brand-600)}
.cat-wide{width:100%;aspect-ratio:16/6;height:auto;object-fit:cover;border-radius:16px;margin-top:16px;border:1px solid var(--ink-200);display:block}
.cat-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.cat-quick-item{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--ink-200);border-radius:12px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink-700)}
.cat-quick-item:hover{border-color:var(--brand-300);color:var(--brand-700);box-shadow:var(--shadow-card)}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}
.btn-group .tab{background:#fff}
@media(max-width:920px){.cat-layout{grid-template-columns:1fr}.cat-sidebar-wrap{position:static}.cat-items{grid-template-columns:repeat(3,1fr)}.cat-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cat-items{grid-template-columns:repeat(2,1fr)}.cat-quick{grid-template-columns:1fr}.cat-wide{height:160px}}
@media(max-width:1100px){
  .nav-links{gap:18px}
  .theme-dark .adv-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:920px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-right{gap:8px}
  .hero h1{font-size:clamp(28px,7vw,40px)}
  .hero-subtitle{font-size:16px}
  .intent-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid,.theme-dark .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .article{max-width:100%}
  .sidebar-layout{grid-template-columns:1fr}
  .ob-steps{grid-template-columns:1fr}
}
@media(max-width:560px){
  .nav-inner{padding:0 12px}
  .nav-logo-text{font-size:16px}
  .intent-grid,.product-grid,.theme-dark .product-grid,.footer-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .hero{padding:28px 0 64px}
  .section{padding:56px 0}
  .stats{grid-template-columns:1fr 1fr}
  .filter-row{flex-direction:column;align-items:stretch}
  .theme-dark .filter-row{flex-direction:column;align-items:stretch}
  .theme-dark .adv-filter-grid{grid-template-columns:1fr}
  .table{font-size:12px}
  .card{overflow-x:auto}
  .card > .table{min-width:520px}
  .card > table{min-width:520px}
  .toggleable-table{min-width:520px}
  .grid{min-width:0}
  .card img{max-width:100%}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fade-up{animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
/* Comparison pages: hero → intro → winner table → conclusion → quote CTA, the field order the
   reference comparison pages use (its hero is a dark gradient block with a gold accent). */
.cmp-hero{background:linear-gradient(135deg,#152A2E,#293437);border-radius:14px;padding:40px 34px;margin:18px 0 22px}
.cmp-hero h1{font-size:32px;font-weight:800;color:#fff;margin:0 0 10px;line-height:1.2;letter-spacing:-.01em}
.cmp-hero p{color:#b9bed4;font-size:16px;max-width:820px;margin:0}
.cmp-intro{color:var(--ink-600);line-height:1.8;font-size:15px;margin-bottom:22px}
.cmp-conclusion{background:var(--brand-50);border-left:3px solid var(--brand-500);border-radius:10px;padding:20px 22px;margin:22px 0}
.cmp-conclusion h2{font-size:19px;color:var(--brand-700);margin:0 0 8px}
.cmp-conclusion p{color:var(--ink-700);line-height:1.75;margin:0}
.cmp-cta{background:var(--ink-50);border:1px solid var(--ink-200);border-radius:10px;padding:24px;text-align:center;margin-bottom:24px}
.cmp-cta h3{font-size:18px;margin:0 0 8px}
.cmp-cta p{color:var(--ink-500);font-size:14px;margin:0 0 16px}
.cmp-cta .btn{margin:0 6px}
.compare-table .win{background:var(--brand-50);color:var(--brand-700);font-weight:600}
@media (max-width:640px){.cmp-hero{padding:26px 20px}.cmp-hero h1{font-size:24px}}
@media(max-width:920px){.sidebar-layout{grid-template-columns:1fr}.sidebar{position:static}}

/* ================= Product card (structure measured from reference) ================= */
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.product-card{background:#fff;border:1px solid var(--ink-200);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.product-card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
.product-img{position:relative;height:200px;background:var(--ink-100);overflow:hidden}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .product-img img{transform:scale(1.05)}
.product-brand-logo{position:absolute;left:12px;bottom:12px}
.product-brand-logo span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#fff;font-weight:800;font-size:12px;box-shadow:var(--shadow-card)}
.product-rank{position:absolute;top:12px;left:12px;background:#fff;color:var(--ink-900);font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}
.product-info{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.product-card h3{font-size:16px;font-weight:700;line-height:1.35}
.product-brand{font-size:12px;color:var(--ink-450)}
.product-price{font-size:18px;font-weight:700;color:var(--brand-700);margin-top:2px}
.product-price .unit{font-size:12px;font-weight:400;color:var(--ink-450)}
.product-specs{font-size:13px;color:var(--ink-500);margin:2px 0 4px}
.product-certs{display:flex;flex-wrap:wrap;gap:5px;min-height:22px}
.cert-badge{font-size:10px;font-weight:500;padding:2px 7px;border-radius:3px;color:var(--ink-500);border:1px solid var(--ink-200);background:var(--ink-50)}
.product-actions{display:flex;gap:8px;margin-top:10px}
.btn-detail{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:6px 14px;border-radius:8px;color:#1E8D80;background:rgba(20,125,120,.1)}
.btn-detail:hover{background:rgba(20,125,120,.18);color:#116963}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:8px}
.add-compare{font-size:12px!important;font-weight:700}
/* Reference parity: solid green "Details" + solid brand "+ Compare" buttons, and a blue verified
   checkmark pinned to the bottom-right of the product photo. */
.btn-solid-detail{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:7px 14px;border-radius:8px;background:#1E8D80;color:#fff;border:none;cursor:pointer;text-decoration:none}
.btn-solid-detail:hover{background:#116963;color:#fff}
.product-verified{position:absolute;right:12px;bottom:12px;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--cd-mint);display:grid;place-items:center;box-shadow:0 1px 4px rgba(21,42,46,.18)}
.product-verified img{width:18px;height:18px;display:block}

/* ================= Dark data theme (products / lighting library) ================= */
.theme-dark{background:#0a0a0f;color:#f0f0f5}
/* The lighting sub-site also runs a dark chrome: fixed nav, hero band and footer. */
.theme-dark .site-nav{background:rgba(10,10,15,.82);border-bottom:1px solid rgba(255,255,255,.07)}
.theme-dark .site-nav a:not(.nav-cta),.theme-dark .nav-links,.theme-dark .nav-links > a{color:#b9bed4}
.theme-dark .nav-links > a:hover,.theme-dark .nav-group-label:hover{color:#f0f0f5}
.theme-dark .nav-logo-text{color:#f0f0f5}
.theme-dark .lang-toggle a{color:#9a9ab0}
.theme-dark .lang-toggle a.active{background:rgba(199,154,67,.14);color:#C79A43}
.theme-dark .nav-cta{background:#C79A43;color:#0a0a0f}
.theme-dark .nav-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#f0f0f5}
.theme-dark .mobile-nav{background:#0a0a0f;border-top-color:rgba(255,255,255,.08)}
.theme-dark .mobile-nav a{color:#b9bed4}
.theme-dark .hero{background:#0a0a0f;color:#f0f0f5;background-size:cover;background-position:center}
/* The reference lighting hero is a dimmed photograph rather than a flat colour. */
.theme-lighting .hero{background-image:linear-gradient(rgba(10,10,15,.86),rgba(10,10,15,.94)),url('/images/home-hero-1.jpg');background-size:cover;background-position:center}
/* Reference hero pairing: blue primary action, gold secondary action. */
.theme-lighting .hero .btn-primary{background:#147D78;color:#fff}
.theme-lighting .hero .btn-light{background:#C79A43;color:#0a0a0f;border-color:transparent}
.theme-dark .hero h1,.theme-dark .hero .h2,.theme-dark .hero b{color:#fff}
.theme-dark .hero p,.theme-dark .hero .lead{color:#b9bed4}
.theme-dark .hero .eyebrow,.theme-dark .hero .hero-badge{color:#C79A43}
.theme-dark .footer{background:#0a0a0f;color:#9a9ab0;border-top:1px solid rgba(255,255,255,.07)}
.theme-dark .footer a{color:#b9bed4}
.theme-dark .footer h4,.theme-dark .footer h3{color:#f0f0f5}
/* Lighting sub-site article pages (glossary / guides / compare / specs / best) on the dark theme:
   tables, callouts, FAQ and breadcrumbs need their own colours or they stay light-on-light. */
.theme-dark .table th,.theme-dark .table td{border-bottom:1px solid rgba(255,255,255,.08)}
.theme-dark .table th{background:rgba(255,255,255,.04);color:#C79A43}
.theme-dark .table td{color:#c8cad8}
.theme-dark .callout{background:rgba(199,154,67,.08);border:1px solid rgba(199,154,67,.28);color:#f0f0f5}
.theme-dark .callout a{color:#C79A43}
.theme-dark .breadcrumb{color:#9a9ab0}
.theme-dark .breadcrumb a{color:#b9bed4}
.theme-dark .lead{color:#b9bed4}
/* Article body copy sits brighter than the muted grey, matching the reference's dark pages. */
.theme-dark .article p,.theme-dark .article li{color:#e8e9f0}
.theme-dark details{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;background:rgba(255,255,255,.02)}
.theme-dark details summary{color:#f0f0f5}
.theme-dark details p{color:#b9bed4}
.theme-dark ul{color:#c8cad8}
.theme-dark a{color:#C79A43}
.theme-dark .btn-primary{background:#C79A43;color:#0a0a0f}
.theme-dark .btn-light{background:#1a1a26;color:#f0f0f5;border-color:rgba(255,255,255,.12)}
.theme-dark .btn-ghost{color:#C79A43;border-color:rgba(199,154,67,.35)}
.theme-dark .stat b{color:#f0f0f5}
.theme-dark .stat span,.theme-dark .stat em{color:#9a9ab0}
.theme-dark .stat{background:#1a1a26;border:1px solid rgba(255,255,255,.06)}
.theme-dark .tag,.theme-dark .badge{background:rgba(199,154,67,.12);color:#C79A43;border-color:rgba(199,154,67,.3)}
.theme-dark .page-hero{position:relative;padding:72px 0 0;background:#0a0a0f;color:#f0f0f5;overflow:hidden}
.theme-dark .page-hero .hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 75%)}
.theme-dark .container{max-width:1200px;margin:0 auto;padding:30px 24px 20px;position:relative;z-index:1}
.theme-dark .page-hero h1{font-size:clamp(30px,4vw,var(--text-h1));line-height:var(--leading-h1);font-weight:800;letter-spacing:-.02em;color:#f0f0f5}
.theme-dark .page-hero p{color:#9a9ab0;font-size:15px;max-width:760px;margin-top:8px}
.theme-dark .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(199,154,67,.1);color:#C79A43;font-size:13px;font-weight:500;padding:8px 18px;border-radius:20px;margin-bottom:14px}
.theme-dark .section{padding:64px 0}
.theme-dark .section h2{font-size:var(--text-h2);line-height:var(--leading-h2);font-weight:700;color:#f0f0f5}
.theme-dark .card{background:#1a1a26;border:1px solid rgba(255,255,255,.06);color:#f0f0f5}
.theme-dark .card h3{color:#f0f0f5}
.theme-dark .muted{color:#9a9ab0}
.theme-dark .filter-bar-compact{background:#1a1a26;border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden}
.theme-dark .filter-toggle-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.theme-dark .results-count{font-size:13px;color:#9a9ab0}
.theme-dark .results-count strong{color:#f0f0f5}
.theme-dark .adv-toggle{font-size:12px;color:#C79A43;cursor:pointer}
.theme-dark .filter-bar{padding:14px 18px}
.theme-dark .filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.theme-dark .filter-item{display:flex;flex-direction:column;gap:6px;min-width:150px;flex:1}
.theme-dark .filter-item label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#9a9ab0}
.theme-dark .filter-item input,.theme-dark .filter-item select{font-size:13px;color:#f0f0f5;background:#0a0a0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px 10px;font-family:inherit}
.theme-dark .filter-item input::placeholder{color:#6a6a80}
.theme-dark .btn-action{font-size:13px;font-weight:700;padding:8px 16px;border-radius:12px;background:#C79A43;color:#0a0a0f;border:0;cursor:pointer}
.theme-dark .btn-action-reset{font-size:13px;padding:8px 12px;border-radius:6px;background:transparent;color:#9a9ab0;border:1px solid rgba(255,255,255,.1);cursor:pointer}
.theme-dark .adv-filters{padding:14px 18px;border-top:1px solid rgba(255,255,255,.06);display:none}
.theme-dark .adv-filters.open{display:block}
.theme-dark .adv-filter-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.theme-dark .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.theme-dark .product-card{background:#1a1a26;border:1px solid rgba(255,255,255,.06);border-radius:12px;color:#f0f0f5}
.theme-dark .product-img{background:#12121a}
.theme-dark .product-card h3,.theme-dark .product-card .card-title{color:#f0f0f5;font-size:16px;font-weight:700}
.theme-dark .product-brand{color:#6a6a80}
.theme-dark .product-price{color:#C79A43;font-size:18px;font-weight:700}
.theme-dark .product-specs{color:#9a9ab0}
.theme-dark .cert-badge{color:#9a9ab0;border:1px solid rgba(255,255,255,.12);background:transparent}
.theme-dark .btn-detail{color:#47AC9C;background:rgba(20,125,120,.1)}
.theme-dark .btn-detail:hover{background:rgba(20,125,120,.2);color:#47AC9C}
.theme-dark .add-compare{background:#C79A43;color:#0a0a0f;border:0;cursor:pointer;padding:6px 14px;border-radius:12px}
.theme-dark .empty{color:#9a9ab0}
.theme-dark .table{color:#f0f0f5}
/* --- dark-theme gaps found by the axe sweep (tools/_a11y.js): these components only had light
     rules, so on the lighting sub-site they rendered light text on a white card or dark text on a
     dark card. --- */
.theme-dark .step{background:#1a1a26;border-color:rgba(255,255,255,.08)}
.theme-dark .step p,.theme-dark .step .step-text{color:#c8cad8}
.theme-dark .logo-chip{background:#1a1a26;border-color:rgba(255,255,255,.08)}
.theme-dark .logo-chip b{color:#f0f0f5}
.theme-dark .logo-chip .muted{color:#9a9ab0}
.theme-dark .tool-link{color:#C79A43}
.theme-dark .eyebrow{color:#C79A43}
.theme-dark .card ul,.theme-dark .card ol,.theme-dark .card li{color:#c8cad8}
.theme-dark ul li,.theme-dark ol li{color:#c8cad8}
.theme-dark .card p{color:#c8cad8}
.theme-dark .product-price .unit,.theme-dark .product-brand{color:#9a9ab0}
.theme-dark .cat-card,.theme-dark .cat-item{background:#1a1a26;border-color:rgba(255,255,255,.08)}
.theme-dark .cat-sidebar{background:#1a1a26;border-color:rgba(255,255,255,.08)}
.theme-dark .cat-tab{color:#c8cad8}
.theme-dark .cat-tab.active,.theme-dark .cat-tab:hover{background:rgba(199,154,67,.12);color:#D9B566}
.theme-dark .cat-tab.active{box-shadow:inset 2px 0 0 #C79A43}
.theme-dark .cat-sidebar-title{color:#f0f0f5}
.theme-dark .cat-tab-count{background:rgba(199,154,67,.12);color:#D9B566}
.theme-dark .cat-tab.active .cat-tab-count{background:rgba(199,154,67,.2)}
.theme-dark .cat-new{background:rgba(199,154,67,.12);color:#D9B566}
.theme-dark .cat-tab-cta{border-top-color:rgba(255,255,255,.08)}
.theme-dark .cat-ico{background:rgba(199,154,67,.12)}
.theme-dark .callout{background:rgba(199,154,67,.08);border-color:rgba(199,154,67,.25);color:#E5D9BE}
.theme-dark label.tag{color:#D9B566}
.theme-dark .table th{background:#1a1a26;color:#9a9ab0;border-color:rgba(255,255,255,.08)}
.theme-dark .table td{border-color:rgba(255,255,255,.08)}
.theme-dark .filter-bar{background:#1a1a26;border:1px solid rgba(255,255,255,.06);border-radius:12px}
.theme-dark .field label{color:#c8cad8}
.theme-dark .field input,.theme-dark .field select,.theme-dark .field textarea{background:#0a0a0f;color:#f0f0f5;border-color:rgba(255,255,255,.1)}
.theme-dark .btn-ghost{color:#C79A43;border-color:rgba(199,154,67,.35);background:transparent}
.theme-dark .btn-primary{background:#C79A43;color:#0a0a0f}
.theme-dark .tabs .tab{background:#1a1a26;border-color:rgba(255,255,255,.1);color:#9a9ab0}
.theme-dark .tabs .tab.active{background:#C79A43;color:#0a0a0f;border-color:#C79A43}
.theme-dark .page-hero h1,.theme-dark h2,.theme-dark h3{color:#f0f0f5}
.theme-dark .lead{color:#9a9ab0}
.theme-dark table{font-size:12px}
.theme-dark th{font-size:12px;font-weight:600;color:#9a9ab0;background:#0a0a0f;padding:6px 10px;border-color:rgba(255,255,255,.08)}
.theme-dark td{font-size:12px;padding:6px 10px;color:#f0f0f5;border-color:rgba(255,255,255,.08)}
.theme-dark label{font-size:12px;font-weight:600;color:#9a9ab0}
.theme-dark .field input,.theme-dark .field select,.theme-dark .field textarea{font-size:12px;background:#0a0a0f;color:#f0f0f5;border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:7px 10px}
.theme-dark .card h3{color:#C79A43;font-size:15px;font-weight:600}
.theme-dark .h2-section{font-size:var(--text-h2);line-height:var(--leading-h2);color:#f0f0f5}
.theme-dark .h2-card{color:#f0f0f5}
.theme-dark .h1-inner{font-size:clamp(28px,4vw,var(--text-h1));line-height:var(--leading-h1);font-weight:800;color:#f0f0f5}
.theme-dark .filter-bar,.theme-dark .filter-bar-compact{background:#1a1a26}

/* ===================== Auth + account area ===================== */
.auth-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;max-width:1040px;margin:12px auto 0}
.auth-aside h1{font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:16px}
.auth-points{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0 0 20px}
.auth-points li{font-size:14.5px;color:var(--ink-700);background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:12px 14px}
.auth-card{padding:24px}
/* Reference-style centered single sign-in card. */
.auth-center{max-width:420px;margin:24px auto 0;text-align:center}
.auth-brand{font-size:clamp(28px,3vw,36px);font-weight:800;letter-spacing:-.02em;background:linear-gradient(120deg,#147D78,#47AC9C);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
.auth-sub{font-size:15px;color:var(--ink-500);margin:6px 0 22px}
.auth-center .auth-card{text-align:left;padding:26px}
.pwd-wrap{position:relative}
.pwd-wrap input{width:100%;padding-right:56px}
.pwd-show{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--ink-500);font-size:13px;font-weight:600;cursor:pointer;padding:4px 6px}
.pwd-show:hover{color:var(--brand-600)}
.remember{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-600);margin:12px 0 16px;cursor:pointer}
.remember input{width:15px;height:15px;accent-color:var(--brand-600);margin:0}
.auth-switch{text-align:center;font-size:14px;color:var(--ink-600);margin:18px 0 0}
.auth-switch a{color:var(--brand-600);font-weight:600;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}
.btn-group{display:inline-flex;gap:0;background:var(--ink-100);border-radius:12px;padding:4px}
.btn-group .tab{border:0;background:transparent;padding:9px 18px;border-radius:9px;font-weight:600;font-size:14px;color:var(--ink-600);cursor:pointer;transition:.16s}
.btn-group .tab.active{background:#fff;color:var(--ink-900);box-shadow:var(--shadow-card)}
.form-error{margin-top:10px;font-size:13px;color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:8px 10px}

.acct-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.acct-avatar{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,var(--brand-500),var(--indigo-500));color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800;letter-spacing:.02em}
.acct-head-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:22px 0 6px}
.acct-stat{background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-card)}
.acct-stat-value{font-size:26px;font-weight:800;letter-spacing:-.02em}
.acct-stat-label{font-size:12.5px;font-weight:600;color:var(--ink-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-top:16px}
.acct-grid .card{padding:18px}
.acct-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0}
.acct-list li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-bottom:1px solid var(--ink-100);padding-bottom:8px}
.acct-list li:last-child{border-bottom:0;padding-bottom:0}
.nav-bell{margin-left:8px;font-size:13px;font-weight:700;color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-200);border-radius:999px;padding:5px 10px;text-decoration:none}
.nav-cta-user{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.nav-signout{margin-left:10px;font-size:13.5px;font-weight:600;color:var(--ink-500);text-decoration:none;white-space:nowrap}
.nav-signout:hover{color:var(--brand-700)}

.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pill-grey{background:var(--ink-100);color:var(--ink-600)}
.pill-green{background:#DDF3EC;color:#116963}
.pill-red{background:var(--cd-risk);color:#C0452B}
.pill-gold{background:#F8ECCD;color:#9A7430}
.pill-blue{background:var(--brand-50);color:var(--brand-700)}
/* VI v1.1 evidence-status set (manual p6/p9): each status = its tint background + a darkened status
   shade for AA text, and is shown with both an icon and a text label (never colour alone). */
.pill-verified{background:var(--cd-mint);color:#116963}
.pill-pending{background:var(--cd-pending);color:#7A5A1E}
.pill-review{background:var(--cd-risk);color:#C0452B}
.pill-declared{background:var(--cd-declared);color:#3D5560}

.live-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink-900);color:#fff;font-size:14px;font-weight:600;padding:12px 20px;border-radius:12px;box-shadow:0 18px 40px -12px rgba(21,42,46,.5);opacity:0;pointer-events:none;transition:.22s;z-index:9999}
.live-toast.show{opacity:1;transform:translate(-50%,0)}
.live-toast.error{background:#b91c1c}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-600)}
.theme-dark .live-toast{background:#f0f0f5;color:#0a0a0f}

.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.pagination a{text-decoration:none}

/* The data-heavy theme (products / compare / parameters) needs a matching navigation bar,
   otherwise the default light glass sits on a dark page and the links lose contrast. */
.theme-dark .site-nav{background:rgba(10,10,15,.78);border-bottom-color:rgba(255,255,255,.08)}
.theme-dark .nav-logo-text{color:#f2f3f8}
.theme-dark .nav-logo-icon{background:var(--brand-600);color:#fff}
.theme-dark .nav-links > a,.theme-dark .nav-group-label{color:#b9bed4}
.theme-dark .nav-links > a:hover,.theme-dark .nav-group-label:hover{color:#fff}
.theme-dark .nav-group.open .nav-group-label{color:#fff}
.theme-dark .nav-arrow{opacity:.7}
.theme-dark .nav-dropdown{background:#14141f;border-top-color:rgba(255,255,255,.08);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.theme-dark .nav-dropdown a{color:#c6cadb}
.theme-dark .nav-dropdown a:hover{background:rgba(20,125,120,.14);color:#fff}
.theme-dark .lang-toggle a{color:#8b8fa7}
.theme-dark .lang-toggle a.active{background:rgba(255,255,255,.12);color:#fff}
.theme-dark .lang-toggle span{color:#3a3a4a}
.theme-dark .nav-toggle{color:#e8e9f3}
.theme-dark .mobile-nav{background:#0d0d14;border-top-color:rgba(255,255,255,.08)}
.theme-dark .mobile-nav a{color:#c6cadb;border-bottom-color:rgba(255,255,255,.06)}

/* ===================== Motion + interaction polish ===================== */
.hero-inner > *{animation:fadeUp .6s ease both}
.hero-inner > *:nth-child(1){animation-delay:.02s}
.hero-inner > *:nth-child(2){animation-delay:.08s}
.hero-inner > *:nth-child(3){animation-delay:.14s}
.hero-inner > *:nth-child(4){animation-delay:.20s}
.hero-inner > *:nth-child(5){animation-delay:.26s}
.hero-inner > *:nth-child(6){animation-delay:.32s}

.cat-card,.guide-card,.feature-card,.tool-card,.acct-stat{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease}
.cat-card:hover,.guide-card:hover,.feature-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(21,42,46,.35);border-color:var(--brand-200)}
.cat-card .card-img,.guide-card .card-img,.feature-card .feature-card-img{transition:transform .5s ease}
.cat-card:hover .card-img,.guide-card:hover .card-img,.feature-card:hover .feature-card-img{transform:scale(1.04)}
.card-img,.feature-card-img{overflow:hidden}

.hero-visual-row img{transition:transform .5s ease,box-shadow .3s ease;border-radius:18px}
.hero-visual-row img:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 24px 50px -22px rgba(20,125,120,.45)}

.btn{position:relative;overflow:hidden}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}

.section-banner{border-radius:var(--radius-xl);transition:transform .6s ease}
.section-banner:hover{transform:scale(1.01)}

.stats .stat b{transition:color .3s ease}
.trust-item{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.trust-item:hover{transform:translateY(-3px);border-color:var(--brand-200);box-shadow:0 14px 30px -18px rgba(21,42,46,.35)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr;gap:24px}
  .acct-grid{grid-template-columns:1fr}
  .acct-head-right{margin-left:0}
}

/* In the dark theme the active tab is gold, so the count inside it needs the dark ink. */
.theme-dark .tab.active .muted{color:#0a0a0f}