.v2x{
  /* ── Brand palette (design.md §3) ───────────────────────────────── */
  --brand-blue:#3680ED; --brand-blue-light:#60A4F5; --brand-blue-dark:#2060C0;
  /* legacy aliases kept so existing inline styles (var(--v2-accent)…) work */
  --v2-accent:#3680ED; --v2-accent2:#2060C0; --v2-accent-light:#60A4F5;
  --v2-accent-soft:#eaf1fe; --v2-accent-soft2:#f3f7ff;

  /* ── Neutrals ───────────────────────────────────────────────────── */
  --black:#000000; --grey-900:#0F0F12; --grey-800:#1A1A24; --grey-600:#4A4A5A;
  --grey-300:#C4C4D0; --grey-100:#F4F4F8; --white:#ffffff;
  --v2-ink:#0F0F12; --v2-muted:#4A4A5A; --v2-line:#e7eaf0; --v2-bg:#f6f8fc;

  /* ── Semantic ───────────────────────────────────────────────────── */
  --success:#22C55E; --warning:#F59E0B; --error:#EF4444; --new-badge:#8B5CF6;
  --v2-green:#16a34a; --v2-amber:#F59E0B; --v2-red:#EF4444; --v2-violet:#8B5CF6;

  /* ── Brand gradient (§3) ────────────────────────────────────────── */
  --brand-gradient:linear-gradient(135deg,#2060C0 0%,#3680ED 50%,#60A4F5 100%);

  /* ── Type scale (§4.2) ──────────────────────────────────────────── */
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem;

  /* ── Line height & tracking (§4.3) ──────────────────────────────── */
  --leading-tight:1.2; --leading-normal:1.5; --leading-loose:1.75;
  --tracking-tight:-.02em; --tracking-base:0; --tracking-wide:.05em;

  /* ── Spacing (§5) ───────────────────────────────────────────────── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px; --space-32:128px;

  /* ── Radius (§6) ────────────────────────────────────────────────── */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;

  /* ── Elevation (§8) ─────────────────────────────────────────────── */
  --shadow-sm:0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px rgba(0,0,0,.10),0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:0 20px 25px rgba(0,0,0,.10),0 8px 10px rgba(0,0,0,.04);
  --shadow-brand:0 0 0 3px rgba(54,128,237,.30);

  /* ── Motion (§10) ───────────────────────────────────────────────── */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --duration-fast:100ms; --duration-base:200ms; --duration-enter:300ms; --duration-page:400ms;

  /* ── Fonts (§4) — Inter is the single product typeface (decision 2026-06-17) ── */
  --font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  color:var(--v2-ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  letter-spacing:-.011em;                 /* Inter reads cleaner with a hair of negative tracking */
  font-feature-settings:'cv11','ss01';    /* Inter's friendlier 1/a/g glyphs — premium polish */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ── Optional dark surface (design.md §11). Off by default because the
      shipped public pages are the light presentation shown in the mockups;
      add class="v2x v2-dark" on the wrapper to flip a section. ────────── */
.v2x.v2-dark{
  --v2-ink:#F4F4F8; --v2-muted:#A0A0B0; --v2-line:rgba(255,255,255,.08);
  --v2-bg:#0F0F12; --white:#1A1A24; color:var(--v2-ink);
}

/* ── Headings — Playfair Display, high-contrast editorial (§4.1) ───── */
.v2x h1,.v2x h2,.v2x h3,.v2x h4,.v2x h5,.v2x .v2-section-title{
  font-family:var(--font-body); font-weight:700;
  letter-spacing:var(--tracking-tight); line-height:var(--leading-tight);
  color:var(--v2-ink);
}
.v2x h1{font-weight:800;}
.v2x .mono,.v2x code,.v2x kbd,.v2x .v2-mono{
  font-family:var(--font-mono); font-feature-settings:"ss01"; font-size:.92em;
}

.v2x a{color:var(--brand-blue); text-decoration:none; transition:color var(--duration-fast) var(--ease-out);}
.v2x a:hover{text-decoration:underline;}
.v2x .v2-muted{color:var(--v2-muted);}

/* ── Cards ──────────────────────────────────────────────────────────── */
.v2x .v2-card{background:var(--white); border:1px solid var(--v2-line); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);}
.v2x .v2-card.pad{padding:var(--space-6);}

/* ── Section scaffolding ────────────────────────────────────────────── */
.v2x .v2-section{margin-bottom:var(--space-6); scroll-margin-top:90px;}
.v2x .v2-section-title{font-size:var(--text-2xl); font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.v2x .v2-section-title i{color:var(--brand-blue);}

/* ── Chips / pills (§4.3 wide tracking on labels) ───────────────────── */
.v2x .v2-chip{display:inline-flex; align-items:center; gap:6px; background:var(--v2-accent-soft); color:var(--brand-blue-dark); border-radius:var(--radius-full); padding:5px 12px; font-size:var(--text-xs); font-weight:500; letter-spacing:var(--tracking-wide); border:1px solid #d6e4fc;}
.v2x .v2-chip.gray{background:#f3f5f9; color:#3a424f; border-color:#e6e9f0;}
.v2x .v2-chip.green{background:#ecfdf3; color:#067647; border-color:#abefc6;}
.v2x .v2-chip.violet{background:#f3eefe; color:#6d28d9; border-color:#e2d6fb;}
.v2x .v2-chip.amber{background:#fff7e6; color:#b45309; border-color:#fde9c8;}

/* ── Badges ─────────────────────────────────────────────────────────── */
.v2x .v2-badge{display:inline-flex; align-items:center; gap:5px; font-size:var(--text-xs); font-weight:600; padding:3px 9px; border-radius:var(--radius-sm);}
.v2x .v2-badge.featured{background:#fff7e6; color:#b45309; border:1px solid #fde9c8;}
.v2x .v2-badge.verified{background:var(--v2-accent-soft); color:var(--brand-blue-dark); border:1px solid #d6e4fc;}
.v2x .v2-badge.new{background:#f3eefe; color:#6d28d9; border:1px solid #e2d6fb;}

/* ── Buttons (§9.1) — radius md, 10/20 padding, Playfair 500, 150ms ──── */
.v2x .v2-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:.95rem; border-radius:var(--radius-md); padding:10px 20px; border:1px solid transparent; cursor:pointer; transition:background var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out); text-decoration:none;}
.v2x .v2-btn:hover{text-decoration:none; transform:translateY(-1px);}
.v2x .v2-btn-sm{padding:8px 16px; font-size:.88rem;}
.v2x .v2-btn-primary{background:var(--brand-blue); color:#fff; box-shadow:0 1px 2px rgba(32,96,192,.25);}
.v2x .v2-btn-primary:hover{background:var(--brand-blue-dark); color:#fff; box-shadow:0 8px 20px rgba(54,128,237,.30);}
.v2x .v2-btn-primary:active{background:var(--brand-blue-dark); box-shadow:var(--shadow-brand);}
.v2x .v2-btn-secondary{background:transparent; border-color:var(--brand-blue); color:var(--brand-blue);}
.v2x .v2-btn-secondary:hover{background:var(--v2-accent-soft2); color:var(--brand-blue);}
.v2x .v2-btn-outline{background:var(--white); border-color:var(--v2-line); color:var(--v2-ink);}
.v2x .v2-btn-outline:hover{border-color:var(--brand-blue); color:var(--brand-blue); background:var(--v2-accent-soft2);}
.v2x .v2-btn-ghost{background:transparent; border-color:var(--grey-300); color:var(--grey-600);}
.v2x .v2-btn-ghost:hover{border-color:var(--brand-blue); color:var(--brand-blue);}
.v2x .v2-btn-danger{background:var(--error); color:#fff;}
.v2x .v2-btn-danger:hover{background:#dc2626; color:#fff;}
.v2x .v2-btn:focus-visible{outline:none; box-shadow:var(--shadow-brand);}

/* ── Hero ───────────────────────────────────────────────────────────── */
.v2x .v2-hero{background:linear-gradient(180deg,#f4f8ff 0%,#fff 70%); border:1px solid var(--v2-line); border-radius:20px; padding:26px;}
.v2x .v2-hero h1{font-family:var(--font-display);}  /* Playfair reserved for the hero headline (design decision: sans UI elsewhere) */
.v2x .v2-logo{width:84px; height:84px; border-radius:var(--radius-xl); object-fit:cover; background:#fff; border:1px solid var(--v2-line);}
.v2x .v2-stars{color:var(--warning); letter-spacing:1px;}

/* ── Sticky section tabs ────────────────────────────────────────────── */
.v2x .v2-tabs{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid var(--v2-line); border-radius:var(--radius-lg); padding:6px; display:flex; gap:4px; overflow-x:auto;}
.v2x .v2-tabs a{white-space:nowrap; padding:9px 14px; border-radius:var(--radius-md); color:var(--v2-muted); font-family:var(--font-body); font-weight:600; font-size:.92rem;}
.v2x .v2-tabs a:hover{background:var(--v2-accent-soft); color:var(--brand-blue); text-decoration:none;}
.v2x .v2-tabs a.active{background:var(--brand-blue); color:#fff;}

/* ── Feature tiles ──────────────────────────────────────────────────── */
.v2x .v2-feature{display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--v2-line); border-radius:var(--radius-lg); height:100%; background:#fff; transition:border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);}
.v2x .v2-feature:hover{border-color:#cfe0fb; box-shadow:var(--shadow-md); transform:translateY(-1px);}
.v2x .v2-feature .ic{width:40px; height:40px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; background:var(--v2-accent-soft); color:var(--brand-blue); flex:0 0 auto;}

/* ── Pricing ────────────────────────────────────────────────────────── */
.v2x .v2-price{border:1px solid var(--v2-line); border-radius:var(--radius-xl); padding:20px; height:100%; display:flex; flex-direction:column; background:#fff; transition:box-shadow var(--duration-enter) var(--ease-out),transform var(--duration-enter) var(--ease-out);}
.v2x .v2-price:hover{box-shadow:var(--shadow-lg); transform:translateY(-2px);}
.v2x .v2-price.popular{border-color:var(--brand-blue); box-shadow:0 12px 30px rgba(54,128,237,.16); position:relative;}
.v2x .v2-price .amt{font-family:var(--font-body); font-size:var(--text-4xl); font-weight:800; letter-spacing:var(--tracking-tight);}
.v2x .v2-pop-tag{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--brand-blue); color:#fff; font-size:.7rem; font-weight:700; padding:4px 12px; border-radius:var(--radius-full);}

/* ── Rating-distribution bars ───────────────────────────────────────── */
.v2x .v2-bar{height:9px; border-radius:var(--radius-full); background:#eef1f6; overflow:hidden;}
.v2x .v2-bar>span{display:block; height:100%; background:linear-gradient(90deg,#f7b733,var(--warning));}

/* ── Key/value fact rows ────────────────────────────────────────────── */
.v2x .v2-fact{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid #eef1f6; font-size:.95rem;}
.v2x .v2-fact:last-child{border-bottom:0;}
.v2x .v2-fact .k{color:var(--v2-muted);}
.v2x .v2-fact .v{font-weight:600; text-align:right;}

/* ── Mini list rows (alternatives, comparisons) ─────────────────────── */
.v2x .v2-mini{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #eef1f6; border-radius:var(--radius-md); transition:padding var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out);}
.v2x .v2-mini:last-child{border-bottom:0;}
.v2x .v2-mini:hover{background:var(--v2-accent-soft2); padding-inline:8px; margin-inline:-8px;}
.v2x .v2-mini img,.v2x .v2-mini .ph{width:34px; height:34px; border-radius:var(--radius-md); object-fit:cover; border:1px solid var(--v2-line); display:flex; align-items:center; justify-content:center; background:var(--v2-accent-soft); color:var(--brand-blue); font-weight:700;}

/* ── Accordion (FAQ) ────────────────────────────────────────────────── */
.v2x .v2-accordion{border:1px solid var(--v2-line); border-radius:var(--radius-lg); overflow:hidden;}
.v2x .v2-accordion details{border-bottom:1px solid var(--v2-line);}
.v2x .v2-accordion details:last-child{border-bottom:0;}
.v2x .v2-accordion summary{list-style:none; cursor:pointer; padding:16px 18px; font-family:var(--font-body); font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.v2x .v2-accordion summary:hover{background:var(--v2-accent-soft2);}
.v2x .v2-accordion summary::-webkit-details-marker{display:none;}
.v2x .v2-accordion summary .pm{color:var(--brand-blue); transition:transform var(--duration-base) var(--ease-out); flex:0 0 auto;}
.v2x .v2-accordion details[open] summary .pm{transform:rotate(45deg);}
.v2x .v2-accordion .bd{padding:0 18px 16px; color:#475061; line-height:var(--leading-loose);}

/* ── Generic tool / content card ────────────────────────────────────── */
.v2x .v2-toolcard{background:#fff; border:1px solid var(--v2-line); border-radius:var(--radius-lg); padding:16px; height:100%; display:flex; flex-direction:column; transition:border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);}
.v2x .v2-toolcard:hover{border-color:var(--brand-blue); box-shadow:var(--shadow-lg); transform:translateY(-2px);}

/* ── CTA banner ─────────────────────────────────────────────────────── */
.v2x .v2-cta{background:linear-gradient(135deg,#eaf1fe,#f3f7ff); border:1px solid #d6e4fc; border-radius:var(--radius-xl); padding:26px;}
.v2x .v2-divider{height:1px; background:var(--v2-line); margin:18px 0;}

/* ── Long-form rich text — readable Playfair body (§4) ──────────────── */
.v2x .v2-rich{line-height:var(--leading-loose); color:#39414d; font-size:1.05rem;}
.v2x .v2-rich p{margin-bottom:1rem;}
.v2x .v2-rich h2,.v2x .v2-rich h3,.v2x .v2-rich h4{font-family:var(--font-body); font-weight:700; color:var(--v2-ink); margin:1.4rem 0 .6rem;}
.v2x .v2-rich strong{color:var(--v2-ink); font-weight:700;}

/* ── Accessibility: honour reduced-motion (§10) ─────────────────────── */
@media (prefers-reduced-motion: reduce){
  .v2x *,.v2x *::before,.v2x *::after{animation:none !important; transition:none !important;}
  .v2x .v2-btn:hover,.v2x .v2-feature:hover,.v2x .v2-price:hover,.v2x .v2-toolcard:hover{transform:none;}
}

@media (max-width:991px){.v2x .v2-tabs{top:0;}}
@media (max-width:575px){.v2x .v2-card.pad{padding:18px;} .v2x .v2-section-title{font-size:var(--text-xl);}}

/* ═══════════════════════════════════════════════════════════════════════
   V2 listings — shared chrome: grid/rows toggle · premium glassmorphism
   filters · newsletter band. Used by all the admin-editable listing pages.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Results header row (count · sort · view toggle) ────────────────── */
.v2x .v2-rhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.v2x .v2-rtools{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;}
.v2x .v2-sort{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--v2-muted);}
.v2x .v2-sort select{border:1px solid var(--v2-line);border-radius:var(--radius-md);padding:7px 30px 7px 11px;font-size:.88rem;font-weight:600;color:var(--v2-ink);background:#fff;cursor:pointer;}
.v2x .v2-sort select:focus{outline:none;box-shadow:var(--shadow-brand);}

/* ── Grid / rows toggle ─────────────────────────────────────────────── */

/* ── Card collection — grid ⇄ rows ──────────────────────────────────── */

/* Whole-card click target — an overlay <a class="v2-cardlink"> covers the card so
   a click anywhere opens the item; real links/buttons sit above it (z-index 2).
   Applies to both card roots used across the listings (.v2-card and .v2-toolcard).
   NB: only add the overlay where the card root is a <div> — cards whose root is
   already an <a> are clickable on their own (no overlay needed). */

/* ── Premium glassmorphism filter panel + shape accents ─────────────── */
.v2x .v2-fclear{background:none;border:0;color:var(--brand-blue);font-size:.82rem;font-weight:600;cursor:pointer;padding:0;}
.v2x .v2-fclear:hover{text-decoration:underline;}

/* ── 1 · Token remap ───────────────────────────────────────────────── */
body.theme-dark .v2x{
  --v2-ink:#ECEDF3; --v2-muted:#9CA2B3; --v2-line:#2A2D3A; --v2-bg:#0E0F14;
  --white:#171922;                 /* card / panel surface */
  --grey-900:#ECEDF3; --grey-800:#E2E3EC; --grey-600:#B9BDCC; --grey-300:#3A3D4D; --grey-100:#1F2230;
  --v2-accent-soft:rgba(54,128,237,.20); --v2-accent-soft2:rgba(54,128,237,.10);
  --shadow-sm:0 1px 3px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 4px 12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.40);
  --shadow-lg:0 12px 26px rgba(0,0,0,.60),0 4px 10px rgba(0,0,0,.45);
  --shadow-xl:0 22px 40px rgba(0,0,0,.65),0 8px 14px rgba(0,0,0,.50);
  --shadow-brand:0 0 0 3px rgba(54,128,237,.45);
  color:var(--v2-ink);
}

/* ── 2 · Hardcoded-literal overrides for the shared components ─────── */
/* Surfaces that hardcode #fff */
body.theme-dark .v2x .v2-feature,
body.theme-dark .v2x .v2-price,
body.theme-dark .v2x .v2-toolcard,
body.theme-dark .v2x .v2-logo,
body.theme-dark .v2x .v2-sort select,
body.theme-dark .v2x .v2-feature:hover{border-color:rgba(54,128,237,.45);}

/* Hero & CTA gradients (light → dark) */
body.theme-dark .v2x .v2-hero{background:linear-gradient(180deg,#191b26 0%,#121319 70%);}
body.theme-dark .v2x .v2-cta{background:linear-gradient(135deg,rgba(54,128,237,.16),rgba(54,128,237,.05));border-color:rgba(54,128,237,.30);}

/* Sticky tabs glass */
body.theme-dark .v2x .v2-tabs{background:rgba(23,25,34,.92);}

/* Faint dividers / bars that hardcode #eef1f6 */
body.theme-dark .v2x .v2-bar{background:rgba(255,255,255,.10);}
body.theme-dark .v2x .v2-fact,
body.theme-dark .v2x .v2-mini{border-bottom-color:var(--v2-line);}

/* Rich text & accordion body greys */
body.theme-dark .v2x .v2-rich{color:#C2C6D4;}
body.theme-dark .v2x .v2-accordion .bd{color:#AEB3C2;}

/* Chips & badges — translucent tints so they read on a dark panel */
body.theme-dark .v2x .v2-chip{border-color:rgba(54,128,237,.32);color:#9DC0F6;}
body.theme-dark .v2x .v2-chip.gray{background:rgba(255,255,255,.07);color:#C2C6D4;border-color:rgba(255,255,255,.12);}
body.theme-dark .v2x .v2-chip.green{background:rgba(34,197,94,.16);color:#5fdd97;border-color:rgba(34,197,94,.28);}
body.theme-dark .v2x .v2-chip.violet{background:rgba(139,92,246,.18);color:#c4abfb;border-color:rgba(139,92,246,.30);}
body.theme-dark .v2x .v2-chip.amber{background:rgba(245,158,11,.16);color:#f4be60;border-color:rgba(245,158,11,.30);}
body.theme-dark .v2x .v2-badge.featured{background:rgba(245,158,11,.16);color:#f4be60;border-color:rgba(245,158,11,.30);}
body.theme-dark .v2x .v2-badge.verified{background:rgba(54,128,237,.20);color:#9DC0F6;border-color:rgba(54,128,237,.32);}
body.theme-dark .v2x .v2-badge.new{background:rgba(139,92,246,.18);color:#c4abfb;border-color:rgba(139,92,246,.30);}

/* Premium glassmorphism filter panel */

/* Newsletter band keeps the brand gradient; only the white input needs dark ink */