/* Content shell cap (1600px) is set once in layouts/seo-page.blade.php —
   applies to every V2 route. No per-page override needed here anymore. */

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE-STYLE HERO (.dir-hh) — matches the / hero band. Own namespace,
   no shared `.dir-*` legacy rules; the redesign will grow from here.
   ═══════════════════════════════════════════════════════════════════════════ */
.v2x .dir-hh{position:relative;display:flex;flex-direction:column;align-items:center;padding:44px 16px 8px;text-align:center;isolation:isolate}
.v2x .dir-hh.is-solo{padding-top:24px}
.v2x .dir-hh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* orbit — decorative arcs + dots + soft glow */
.v2x .dir-hh-orbit{position:absolute;inset:44px 0 auto;height:520px;pointer-events:none;z-index:0;color:rgba(54,128,237,.42);max-width:1100px;left:50%;transform:translateX(-50%);width:100%}
body.theme-dark .v2x .dir-hh-orbit{color:rgba(96,164,245,.4)}
.v2x .dir-hh-arc{position:absolute;top:0;width:260px;height:460px;opacity:.9}
.v2x .dir-hh-arc-l{left:2%}
.v2x .dir-hh-arc-r{right:2%}
.v2x .dir-hh-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--brand-blue);opacity:.75;box-shadow:0 0 12px rgba(54,128,237,.45);animation:dir-hh-float 4.2s ease-in-out infinite}
.v2x .dir-hh-d1{left:10%;top:6%;animation-delay:-.2s}
.v2x .dir-hh-d2{left:2%;top:44%;animation-delay:-1.1s}
.v2x .dir-hh-d3{left:11%;top:80%;animation-delay:-2.3s}
.v2x .dir-hh-d4{right:10%;top:6%;animation-delay:-.7s}
.v2x .dir-hh-d5{right:2%;top:44%;animation-delay:-1.8s}
.v2x .dir-hh-d6{right:11%;top:80%;animation-delay:-3s}
@keyframes dir-hh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.v2x .dir-hh-glow{position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.v2x .dir-hh-glow{left:-90px;top:30px;background:rgba(54,128,237,.4)}
.v2x .dir-hh-glow-2{left:auto;right:-90px;top:140px;background:rgba(139,92,246,.28)}
body.theme-dark .v2x .dir-hh-glow{background:rgba(54,128,237,.28);opacity:.42}
body.theme-dark .v2x .dir-hh-glow-2{background:rgba(139,92,246,.22)}

/* orbit tiles — real links, keyboard reachable */
.v2x .dir-hh-tiles{position:absolute;inset:44px 0 auto;height:520px;pointer-events:none;z-index:1;max-width:1100px;left:50%;transform:translateX(-50%);width:100%}
.v2x .dir-hh-tile{position:absolute;pointer-events:auto;width:78px;height:78px;border-radius:20px;background:#fff;border:1px solid var(--v2-line);display:flex;align-items:center;justify-content:center;padding:14px;box-shadow:0 12px 30px -12px rgba(16,24,40,.22),0 2px 4px rgba(16,24,40,.04);transition:transform .3s var(--ease-out),box-shadow .3s ease;color:inherit;text-decoration:none}
.v2x .dir-hh-tile:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 20px 42px -14px rgba(54,128,237,.4);text-decoration:none}
.v2x .dir-hh-tile img{width:100%;height:100%;object-fit:contain;display:block}
body.theme-dark .v2x .dir-hh-tile{background:rgba(28,31,42,.9);border-color:rgba(255,255,255,.09);box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
/* tile positions on the arcs */
.v2x .dir-hh-t1{left:6%;top:8%}
.v2x .dir-hh-t2{right:6%;top:8%}
.v2x .dir-hh-t3{left:2%;top:46%;width:66px;height:66px;border-radius:16px;padding:11px}
.v2x .dir-hh-t4{right:2%;top:46%;width:66px;height:66px;border-radius:16px;padding:11px}
/* labels beneath the tile */
.v2x .dir-hh-tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);font-size:12px;color:var(--v2-ink);font-weight:700;white-space:nowrap;pointer-events:none;letter-spacing:-.005em}
.v2x .dir-hh-tip b{display:block;font-weight:500;color:var(--v2-muted);font-size:11px;margin-top:1px}

/* copy stack */
.v2x .dir-hh-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;max-width:860px;margin:0 auto}

/* badge pill */
.v2x .dir-hh-badge{position:relative;display:inline-flex;align-items:center;gap:9px;padding:8px 18px 8px 10px;border:0;border-radius:999px;background:rgba(255,255,255,.9);color:var(--v2-ink);font-size:13.5px;font-weight:600;letter-spacing:-.004em;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(16,24,40,.05),0 12px 26px -14px rgba(54,128,237,.5);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.v2x .dir-hh-badge::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(54,128,237,.6) 0%,rgba(199,207,224,.7) 42%,rgba(199,207,224,.7) 58%,rgba(139,92,246,.55) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
body.theme-dark .v2x .dir-hh-badge{background:rgba(28,31,42,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.4),0 12px 26px -14px rgba(0,0,0,.7)}
body.theme-dark .v2x .dir-hh-badge::before{background:linear-gradient(135deg,rgba(96,164,245,.55) 0%,rgba(255,255,255,.14) 42%,rgba(255,255,255,.14) 58%,rgba(139,92,246,.5) 100%)}
.v2x .dir-hh-badge-chip{display:inline-grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:8px;background:var(--v2-accent-soft);box-shadow:inset 0 0 0 1px #d6e4fc;color:var(--brand-blue)}
body.theme-dark .v2x .dir-hh-badge-chip{background:rgba(54,128,237,.2);box-shadow:inset 0 0 0 1px rgba(96,164,245,.4);color:var(--brand-blue-light)}
.v2x .dir-hh-badge-chip svg{width:14px;height:14px;animation:dir-hh-twinkle 3.2s ease-in-out infinite}
@keyframes dir-hh-twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.85}}

/* headline */
.v2x .dir-hh-title{width:100%;margin:22px 0 0;font-size:clamp(32px,5.4vw,62px);line-height:1.08;font-weight:800;letter-spacing:-.032em;color:var(--v2-ink);text-wrap:balance}
.v2x .dir-hh-l1,.v2x .dir-hh-l2{display:block}
.v2x .dir-hh-l2{margin-top:.08em}
.v2x .dir-hh-accent{display:inline;color:var(--brand-blue);background:linear-gradient(100deg,var(--brand-blue) 6%,var(--brand-blue-dark) 58%,var(--brand-blue-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.theme-dark .v2x .dir-hh-accent{background:linear-gradient(100deg,var(--brand-blue-light) 6%,var(--brand-blue) 58%,var(--brand-blue-light) 100%);-webkit-background-clip:text;background-clip:text}

/* subtitle */
.v2x .dir-hh-sub{width:100%;margin:20px auto 0;max-width:60ch;color:var(--v2-muted);font-size:17px;line-height:1.6}

/* search — big pill */
.v2x .dir-hh-search{position:relative;display:flex;align-items:center;gap:12px;width:100%;max-width:780px;margin:32px auto 0;padding:8px 8px 8px 24px;background-color:#fff;background-image:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 46%);border:1px solid #f0f2f6;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(16,24,40,.04),0 14px 38px -14px rgba(16,24,40,.20),0 0 22px -6px rgba(124,77,240,.30),0 6px 26px -8px rgba(236,72,153,.22),0 24px 52px -30px rgba(54,128,237,.35);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.v2x .dir-hh-search:focus-within{border-color:transparent;box-shadow:0 0 0 5px rgba(54,128,237,.16),0 0 30px -4px rgba(124,77,240,.42),0 8px 34px -6px rgba(236,72,153,.30),0 18px 44px -12px rgba(16,24,40,.20);transform:translateY(-1px)}
body.theme-dark .v2x .dir-hh-search{background:rgba(28,31,42,.85);border-color:rgba(255,255,255,.09);box-shadow:0 2px 6px rgba(0,0,0,.46),0 18px 44px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
body.theme-dark .v2x .dir-hh-search:focus-within{box-shadow:0 2px 6px rgba(0,0,0,.46),0 18px 44px rgba(0,0,0,.55),0 0 0 3px rgba(96,164,245,.2)}
.v2x .dir-hh-search-ico{display:inline-flex;flex:0 0 auto;color:#b9bdc9;transition:color .2s ease}
.v2x .dir-hh-search:focus-within .dir-hh-search-ico{color:var(--brand-blue)}
.v2x .dir-hh-search-ico svg{width:20px;height:20px;display:block}
.v2x .dir-hh-search input{flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;font-size:15.5px;color:var(--v2-ink);padding:14px 0;font-family:inherit;letter-spacing:-.006em}
.v2x .dir-hh-search input::placeholder{color:#9ba0ae}
.v2x .dir-hh-search input::-webkit-search-cancel-button{-webkit-appearance:none}
body.theme-dark .v2x .dir-hh-search input::placeholder{color:#6c7280}

.v2x .dir-hh-search-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;border:0;background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-blue-dark) 100%);color:#fff;font-size:14.5px;font-weight:700;letter-spacing:-.005em;cursor:pointer;box-shadow:0 6px 18px -6px rgba(54,128,237,.55);transition:transform .2s ease,box-shadow .25s ease;overflow:hidden;flex:0 0 auto;font-family:inherit}
.v2x .dir-hh-search-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px -8px rgba(54,128,237,.6)}
.v2x .dir-hh-search-btn:active{transform:scale(.98)}
.v2x .dir-hh-search-btn svg{width:16px;height:16px;color:#fff;flex:0 0 auto}
.v2x .dir-hh-search-btn::after{content:'';position:absolute;top:0;left:-140%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .7s var(--ease-out);pointer-events:none}
.v2x .dir-hh-search-btn:hover::after{left:150%}
.v2x .dir-hh-search-spark{animation:dir-hh-twinkle 2.6s ease-in-out infinite}

/* chips */
.v2x .dir-hh-chips{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;margin:22px auto 0;font-size:13px}
.v2x .dir-hh-chips-lbl{color:var(--v2-muted);font-weight:500;font-size:13px}
.v2x .dir-hh-chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--v2-line);color:var(--v2-ink);font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s,color .2s,background .2s;text-decoration:none;letter-spacing:-.004em}
.v2x .dir-hh-chip:hover{transform:translateY(-2px);border-color:rgba(54,128,237,.5);color:var(--brand-blue);box-shadow:0 8px 20px -8px rgba(54,128,237,.3);text-decoration:none;background:#fff}
body.theme-dark .v2x .dir-hh-chip{background:rgba(28,31,42,.78);border-color:rgba(255,255,255,.08);color:var(--v2-ink)}
body.theme-dark .v2x .dir-hh-chip:hover{color:var(--brand-blue-light);border-color:rgba(96,164,245,.55);background:rgba(54,128,237,.12)}

/* counter card */
.v2x .dir-hh-stats{display:grid;grid-template-columns:repeat(var(--dir-hh-cols,4),minmax(0,1fr));gap:0;width:100%;max-width:960px;margin:34px auto 4px;background:#fff;border:1px solid var(--v2-line);border-radius:20px;padding:14px 8px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 16px 40px -18px rgba(16,24,40,.2);position:relative;z-index:2}
body.theme-dark .v2x .dir-hh-stats{background:rgba(28,31,42,.85);border-color:rgba(255,255,255,.09);box-shadow:0 2px 6px rgba(0,0,0,.46),0 20px 50px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.v2x .dir-hh-stat{display:flex;align-items:center;gap:12px;padding:12px 16px;text-align:left;color:var(--v2-ink);border-radius:12px;transition:background .2s ease,transform .2s ease;min-width:0}
.v2x .dir-hh-stat-ico{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;--dir-plate-ink:#1B5BB5;transition:transform .3s var(--ease-spring),box-shadow .3s ease}
.v2x .dir-hh-stat:hover .dir-hh-stat-ico{transform:scale(1.08)}
.v2x .dir-hh-stat-ico svg{width:20px;height:20px}
.v2x .dir-hh-stat[data-tone="green"]  .dir-hh-stat-ico{--dir-plate-ink:#08795A}
.v2x .dir-hh-stat[data-tone="violet"] .dir-hh-stat-ico{--dir-plate-ink:#5B33C4}
.v2x .dir-hh-stat[data-tone="rose"]   .dir-hh-stat-ico{--dir-plate-ink:#B31D3C}
.v2x .dir-hh-stat[data-tone="amber"]  .dir-hh-stat-ico{--dir-plate-ink:#A85B08}
.v2x .dir-hh-stat[data-tone="cyan"]   .dir-hh-stat-ico{--dir-plate-ink:#0A6E88}
/* Dark inks are the LIGHTENED twins — they are text inks on a dark surface,
   which is exactly why the plate rule below has to scrim them. */
body.theme-dark .v2x .dir-hh-stat-ico{--dir-plate-ink:#8CBEFA}
body.theme-dark .v2x .dir-hh-stat[data-tone="green"]  .dir-hh-stat-ico{--dir-plate-ink:#6EE7BE}
body.theme-dark .v2x .dir-hh-stat[data-tone="violet"] .dir-hh-stat-ico{--dir-plate-ink:#BFA6FB}
body.theme-dark .v2x .dir-hh-stat[data-tone="rose"]   .dir-hh-stat-ico{--dir-plate-ink:#FB9BB0}
body.theme-dark .v2x .dir-hh-stat[data-tone="amber"]  .dir-hh-stat-ico{--dir-plate-ink:#FBC97A}
body.theme-dark .v2x .dir-hh-stat[data-tone="cyan"]   .dir-hh-stat-ico{--dir-plate-ink:#7CD9EE}
.v2x .dir-hh-stat-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.v2x .dir-hh-stat-num{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--v2-ink)}
.v2x .dir-hh-stat-lbl{font-size:12.5px;color:var(--v2-muted);line-height:1.4;font-weight:500}

/* ── responsive: tablet ── */
@media (max-width:1180px){
  .v2x .dir-hh-orbit,.v2x .dir-hh-tiles{display:none}
  .v2x .dir-hh{padding:32px 16px 4px}
  .v2x .dir-hh-copy{max-width:760px}
}
@media (max-width:900px){
  .v2x .dir-hh-title{font-size:clamp(28px,calc(6.6vw - 1px),46px)}
}
@media (max-width:640px){
  .v2x .dir-hh{padding:24px 12px 4px}
  .v2x .dir-hh-title{font-size:clamp(24px,calc(7.4vw - 2px),34px)}
  .v2x .dir-hh-sub{font-size:15px;margin-top:14px;max-width:52ch}
  .v2x .dir-hh-search{padding:6px 6px 6px 16px;gap:8px}
  .v2x .dir-hh-search input{font-size:14px;padding:12px 0}
  .v2x .dir-hh-search-btn{padding:11px 16px;font-size:13.5px}
  .v2x .dir-hh-badge{font-size:12.5px;padding:6px 14px 6px 8px}
  .v2x .dir-hh-badge-chip{width:20px;height:20px;border-radius:6px}
  .v2x .dir-hh-badge-chip svg{width:12px;height:12px}
  .v2x .dir-hh-chips{gap:6px 8px;margin-top:18px}
  .v2x .dir-hh-chips-lbl{width:100%;text-align:center;margin-bottom:2px}
  .v2x .dir-hh-chip{padding:6px 12px;font-size:12.5px}
  .v2x .dir-hh-stat{padding:10px 12px;gap:10px}
  .v2x .dir-hh-stat-ico{width:36px;height:36px;border-radius:10px}
  .v2x .dir-hh-stat-num{font-size:17px}
  .v2x .dir-hh-stat-lbl{font-size:11.5px}
}
@media (max-width:420px){
  .v2x .dir-hh-search-btn span{display:none}
  .v2x .dir-hh-search-btn{padding:11px 13px}
}
@media (prefers-reduced-motion:reduce){
  .v2x .dir-hh-dot{animation:none}
  .v2x .dir-hh-badge-chip svg,.v2x .dir-hh-search-spark{animation:none}
  .v2x .dir-hh-search-btn::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARQUEE (.dir-mq)  ·  full-bleed brand ticker below the hero.
   Same loop mechanic as the homepage: two identical tracks translated by
   -100% of their own width, giving a seamless -50% pair loop.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Full-bleed: the seo-page shell caps content at 1600px, so `width:100%` here
   only fills that cap. `100vw` + a negative margin equal to `50% - 50vw` on
   each side pulls the strip out to the viewport edges regardless of what the
   parent container's width is. `margin-inline` covers both left and right so
   RTL is handled automatically. */
.v2x .dir-mq{position:relative;display:flex;width:100vw;margin-inline:calc(50% - 50vw);margin-top:34px;margin-bottom:0;overflow:hidden;padding:0;background-image:linear-gradient(135deg,var(--brand-blue-dark) 0%,var(--brand-blue) 55%,var(--brand-blue-light) 100%);background-color:var(--brand-blue-dark);border-block:1px solid rgba(255,255,255,.14);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);z-index:1}
body.theme-dark .v2x .dir-mq{background-image:linear-gradient(135deg,#0e2b58 0%,var(--brand-blue-dark) 55%,var(--brand-blue) 100%);background-color:#0e2b58;border-block-color:rgba(255,255,255,.08)}

/* dot field the brand surfaces share, so the bar belongs to the page rather
   than looking like an embedded advert */
.v2x .dir-mq::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.17) 1px,transparent 1.6px);background-size:15px 15px;opacity:.55;pointer-events:none}

.v2x .dir-mq-track{display:flex;align-items:center;flex:0 0 auto;gap:0;min-width:max-content;padding:13px 0;will-change:transform;animation:dir-mq-run var(--dir-mq-dur,42s) linear infinite}
.v2x .dir-mq[data-reverse="1"] .dir-mq-track{animation-direction:reverse}
@keyframes dir-mq-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
[dir="rtl"] .v2x .dir-mq-track{animation-direction:reverse}
[dir="rtl"] .v2x .dir-mq[data-reverse="1"] .dir-mq-track{animation-direction:normal}

.v2x .dir-mq-item{display:inline-flex;align-items:center;flex:0 0 auto;padding:4px 6px;border-radius:8px;color:#fff;font-size:17px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:background-color .18s ease,color .18s ease,transform .2s var(--ease-spring)}

.v2x .dir-mq-sep{flex:0 0 auto;width:19px;height:19px;margin:0 20px;color:rgba(255,255,255,.92)}
.v2x .dir-mq-sep.is-dot{width:6px;height:6px;margin:0 22px;border-radius:50%;background:rgba(255,255,255,.8)}
.v2x .dir-mq-sep.is-slash{display:inline-flex;width:auto;height:auto;margin:0 18px;font-size:17px;font-weight:700;color:rgba(255,255,255,.55)}

/* ── Hover — pause + swap link to white chip w/ brand ink ── */
@media (hover:hover){
  .v2x .dir-mq:hover .dir-mq-track{animation-play-state:paused}
  .v2x .dir-mq-item:hover{background-color:rgba(255,255,255,.96);color:var(--brand-blue-dark);transform:translateY(-1px);text-decoration:none}
}
/* Keyboard: pausing on focus-within, same chip on the focused link */
.v2x .dir-mq:focus-within .dir-mq-track{animation-play-state:paused}
.v2x .dir-mq-item:focus-visible{outline:3px solid #fff;outline-offset:2px;background-color:rgba(255,255,255,.96);color:var(--brand-blue-dark)}

/* ── Responsive ── */
@media (max-width:640px){
  .v2x .dir-mq{margin-top:24px}
  .v2x .dir-mq-track{padding:10px 0;animation-duration:calc(var(--dir-mq-dur,42s) * .68)}
  .v2x .dir-mq-item{font-size:14px;letter-spacing:.03em}
  .v2x .dir-mq-sep{width:15px;height:15px;margin:0 13px}
  .v2x .dir-mq-sep.is-dot{margin:0 15px}
  .v2x .dir-mq-sep.is-slash{margin:0 12px;font-size:14px}
}

/* ── Motion off — the strip becomes a normal scrollable rail; the duplicate
   is removed entirely so screen-readers don't hit it either. ── */
@media (prefers-reduced-motion:reduce){
  .v2x .dir-mq{overflow-x:auto;scrollbar-width:none}
  .v2x .dir-mq::-webkit-scrollbar{display:none}
  .v2x .dir-mq-track{animation:none;will-change:auto}
  .v2x .dir-mq-track[aria-hidden="true"]{display:none}
}
/* ── Forced colors: the tinted fill can be dropped by the OS, taking the
   white label with it, so restore a neutral canvas ── */
@media (forced-colors:active){
  .v2x .dir-mq{background:Canvas;border-block-color:CanvasText}
  .v2x .dir-mq::after{display:none}
  .v2x .dir-mq-item{color:LinkText}
  .v2x .dir-mq-track{animation:none}
  .v2x .dir-mq-track[aria-hidden="true"]{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2 — AI TOOLS DIRECTORY (.dir-lab)
   ---------------------------------------------------------------------------
   Quick filter bar · Filters sidebar · Toolbar · Tool card grid · Trending rail
   · Pagination · List mode · Empty state.  Cards mirror the homepage-showcase
   design (rank chip, per-card tone, tinted logo tile, full-width tone button)
   and are namespaced `.dir-tc-*` so they can't collide with `.dir-hh-*` or the
   older `.dir-hero`/`.dir-strip` classes still referenced by category/tag
   partials.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared container ─────────────────────────────────────────────────── */
.v2x .dir-lab{margin-top:42px;padding:0 4px;position:relative;z-index:1}

/* Spinner for wire:loading */
.v2x .dir-spin{animation:dir-spin .9s linear infinite}
@keyframes dir-spin{to{transform:rotate(360deg)}}

/* ═════════════ 3-COLUMN GRID (.dir-g) ═════════════
   Sidebars trimmed for a 4-col main grid (236 / 268). The right sidebar was
   widened 252→268 so trending rows fit product names like "GitHub Copilot"
   plus a category subtitle without ellipsising. */
.v2x .dir-g{display:grid;grid-template-columns:236px minmax(0,1fr) 268px;gap:20px;align-items:start}
.v2x .dir-g.no-l{grid-template-columns:minmax(0,1fr) 268px}
.v2x .dir-g.no-r{grid-template-columns:236px minmax(0,1fr)}
.v2x .dir-g.no-l.no-r{grid-template-columns:1fr}
.v2x .dir-fx,.v2x .dir-tr{position:sticky;top:130px;align-self:start}

/* ═════════════ FILTERS SIDEBAR (.dir-fx)  ·  premium redesign ═════════════
   Rows behave as chip toggles — hover paints a soft-blue background across
   the whole row; a checked row goes into a fuller blue-tint pill with a
   left accent bar + white check mark + blue count badge. Group headers get
   a small coloured dot so the eye can jump between groups without reading.
   Header + Apply button are STICKY inside the scrollable panel so the
   controls stay reachable when the filter list grows.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x .dir-fx-box{position:relative;background:linear-gradient(180deg,#F8FBFF 0%,#fff 32%);border:1px solid var(--v2-line);border-radius:20px;padding:0;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -20px rgba(16,24,40,.22);max-height:calc(100vh - 130px);overflow:hidden;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(54,128,237,.35) transparent}
body.theme-dark .v2x .dir-fx-box{background:linear-gradient(180deg,rgba(38,42,54,.9) 0%,rgba(28,31,42,.88) 32%);border-color:rgba(255,255,255,.08);box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -18px rgba(0,0,0,.55)}

/* ── Mobile-only expand/collapse chevron (inside the sticky filter header) ──
   Shown on ≤820px only; rotates 180° when the accordion panel is open. Big
   tap target (34×34) so it hits comfortably on small screens. */
.v2x .dir-fx-mtoggle{display:none;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin-left:2px;border:0;border-radius:9px;background:var(--v2-accent-soft);color:var(--brand-blue);cursor:pointer;font-family:inherit;transition:background .18s ease,color .18s ease}
.v2x .dir-fx-mtoggle:hover{background:#DDE9FC;color:var(--brand-blue-dark)}
body.theme-dark .v2x .dir-fx-mtoggle{background:rgba(54,128,237,.16);color:var(--brand-blue-light)}
body.theme-dark .v2x .dir-fx-mtoggle:hover{background:rgba(54,128,237,.24);color:var(--brand-blue-light)}
.v2x .dir-fx-mtoggle svg{width:16px;height:16px;transition:transform .28s var(--ease-spring)}

/* ── Mobile drawer backdrop element — kept in the DOM for backwards-compat
   but never displayed since the mobile UI is now an in-flow accordion. ── */
.v2x .dir-fx-backdrop{display:none !important}

/* ── Sticky Header ── */
.v2x .dir-fx-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 14px 12px;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.94) 92%,rgba(255,255,255,0) 100%);border-bottom:1px solid var(--v2-line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.theme-dark .v2x .dir-fx-head{background:linear-gradient(180deg,rgba(28,31,42,.95) 0%,rgba(28,31,42,.85) 92%,transparent 100%);border-bottom-color:rgba(255,255,255,.08)}

.v2x .dir-fx-title{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:800;color:var(--v2-ink);letter-spacing:-.008em;min-width:0;flex:1 1 auto}
.v2x .dir-fx-icochip{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-blue-dark) 100%);color:#fff;box-shadow:0 4px 10px -3px rgba(54,128,237,.55),inset 0 1px 0 rgba(255,255,255,.28);flex:0 0 auto}
.v2x .dir-fx-icochip svg{width:13px;height:13px}
/* Title text NEVER truncates — it's the section label; if space is tight, the
   Clear-all button collapses to icon-only instead (see .is-dim below). */
.v2x .dir-fx-title-tx{white-space:nowrap}
.v2x .dir-fx-title-badge{flex:0 0 auto;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--brand-blue);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:-.01em;box-shadow:0 4px 10px -3px rgba(54,128,237,.55);animation:dir-fx-badge-in .35s var(--ease-spring)}
@keyframes dir-fx-badge-in{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
body.theme-dark .v2x .dir-fx-title-badge{background:var(--brand-blue-light);color:#0F1420}

.v2x .dir-fx-clear{display:inline-flex;align-items:center;gap:4px;padding:6px 9px 6px 7px;border-radius:8px;border:0;background:transparent;color:var(--brand-blue);font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .18s ease,color .18s ease,opacity .18s ease,padding .18s ease;flex:0 0 auto;white-space:nowrap}
.v2x .dir-fx-clear svg{width:12px;height:12px;flex:0 0 auto}
.v2x .dir-fx-clear:hover{background:var(--v2-accent-soft);color:var(--brand-blue-dark)}
/* When no filters active: hide the "Clear all" text (icon-only) so the title
   never gets squeezed. Full label returns automatically once filters are on. */
.v2x .dir-fx-clear.is-dim{opacity:.4;pointer-events:none;padding:6px 7px;font-size:0}
.v2x .dir-fx-clear.is-dim svg{width:14px;height:14px}
body.theme-dark .v2x .dir-fx-clear{color:var(--brand-blue-light)}
body.theme-dark .v2x .dir-fx-clear:hover{background:rgba(54,128,237,.16)}

/* ── Scrollable group list (middle of the box) ── */
.v2x .dir-fx-box{overflow-y:auto}
.v2x .dir-fx-box::-webkit-scrollbar{width:6px}
.v2x .dir-fx-box::-webkit-scrollbar-thumb{background:rgba(54,128,237,.35);border-radius:99px}
.v2x .dir-fx-box::-webkit-scrollbar-track{background:transparent}

.v2x .dir-fx-group{padding:14px 14px 12px;border-top:1px solid var(--v2-line)}
.v2x .dir-fx-group:first-of-type{border-top:0;padding-top:10px}
body.theme-dark .v2x .dir-fx-group{border-top-color:rgba(255,255,255,.05)}

/* Group header with coloured dot */
.v2x .dir-fx-glbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--v2-muted);margin:0 0 10px;padding:0 4px}
body.theme-dark .v2x .dir-fx-glbl{color:#9CA2B3}
.v2x .dir-fx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--brand-blue);box-shadow:0 0 0 2px rgba(54,128,237,.16)}
.v2x .dir-fx-dot[data-tone="blue"]   {background:#3680ED;box-shadow:0 0 0 2px rgba(54,128,237,.18)}
.v2x .dir-fx-dot[data-tone="emerald"]{background:#10B981;box-shadow:0 0 0 2px rgba(16,185,129,.2)}
.v2x .dir-fx-dot[data-tone="violet"] {background:#7C3AED;box-shadow:0 0 0 2px rgba(124,58,237,.2)}
.v2x .dir-fx-dot[data-tone="cyan"]   {background:#06B6D4;box-shadow:0 0 0 2px rgba(6,182,212,.2)}
.v2x .dir-fx-dot[data-tone="amber"]  {background:#F59E0B;box-shadow:0 0 0 2px rgba(245,158,11,.2)}
.v2x .dir-fx-dot[data-tone="rose"]   {background:#EC4899;box-shadow:0 0 0 2px rgba(236,72,153,.2)}

/* ── Chip-style row ── */
.v2x .dir-fx-chk{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;margin:1px 0;font-size:13.5px;color:var(--v2-muted);cursor:pointer;border-radius:10px;transition:background .18s ease,color .18s ease,transform .16s ease;user-select:none;font-family:inherit;overflow:hidden}
.v2x .dir-fx-chk input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
@media (hover:hover){
  .v2x .dir-fx-chk:hover{background:#F4F8FE;color:var(--v2-ink);transform:translateX(2px)}
  body.theme-dark .v2x .dir-fx-chk:hover{background:rgba(255,255,255,.04);color:var(--v2-ink)}
}
/* Checked/on state — whole row becomes a soft-blue chip with a left accent bar */
.v2x .dir-fx-chk.is-on{background:#EAF2FD;color:var(--brand-blue-dark);font-weight:700;box-shadow:inset 0 0 0 1px #CFE0FA}
body.theme-dark .v2x .dir-fx-chk.is-on{background:rgba(54,128,237,.14);color:var(--brand-blue-light);box-shadow:inset 0 0 0 1px rgba(96,164,245,.28)}
.v2x .dir-fx-chk.is-on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:3px;background:linear-gradient(180deg,var(--brand-blue),var(--brand-blue-dark))}
@media (hover:hover){.v2x .dir-fx-chk.is-on:hover{background:#DDE9FC;transform:none}body.theme-dark .v2x .dir-fx-chk.is-on:hover{background:rgba(54,128,237,.18)}}
/* Empty-count rows: de-emphasise (still selectable) */
.v2x .dir-fx-chk.is-empty:not(.is-on){opacity:.55}

/* Custom checkbox mark */
.v2x .dir-fx-mk{flex:0 0 auto;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--v2-line);display:inline-grid;place-items:center;background:#fff;color:transparent;transition:border-color .2s,background .2s,color .2s,transform .22s var(--ease-spring),box-shadow .2s}
.v2x .dir-fx-mk.is-radio{border-radius:50%}
.v2x .dir-fx-mk svg{width:11px;height:11px;opacity:0;transform:scale(.6);transition:opacity .18s,transform .22s var(--ease-spring)}
body.theme-dark .v2x .dir-fx-mk{background:rgba(28,31,42,.7);border-color:rgba(255,255,255,.14)}
@media (hover:hover){.v2x .dir-fx-chk:hover .dir-fx-mk{border-color:var(--brand-blue)}}
.v2x .dir-fx-chk.is-on .dir-fx-mk{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;box-shadow:0 4px 10px -3px rgba(54,128,237,.55)}
.v2x .dir-fx-chk.is-on .dir-fx-mk svg{opacity:1;transform:scale(1)}
.v2x .dir-fx-chk.is-on .dir-fx-mk.is-radio{position:relative}
.v2x .dir-fx-chk.is-on .dir-fx-mk.is-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff}
.v2x .dir-fx-chk input:focus-visible ~ .dir-fx-mk{outline:2px solid var(--brand-blue);outline-offset:2px}

/* Label + verified badge + star row. min-width:0 lets the label shrink inside
   the flex row without pushing the count badge off-screen. Nowrap is dropped
   so a long label (e.g., a use-case title) wraps within the row instead of
   ellipsising — for a sidebar this reads cleaner than "AI Chatbots & …" */
.v2x .dir-fx-clbl{flex:1 1 auto;display:inline-flex;align-items:center;gap:6px;min-width:0}
.v2x .dir-fx-clbl > span:last-child{overflow:hidden;text-overflow:ellipsis}
.v2x .dir-fx-vrf{display:inline-flex;flex:0 0 auto}
/* Slightly smaller stars + tighter label so "4.5 & up" doesn't clip when
   competing with the count badge for room. */
.v2x .dir-fx-stars{display:inline-flex;align-items:center;gap:0;flex:0 0 auto}
.v2x .dir-fx-stars svg{width:10px;height:10px}
.v2x .dir-fx-stars svg.is-full{color:#F59E0B;filter:drop-shadow(0 1px 1.5px rgba(245,158,11,.35))}
.v2x .dir-fx-stars svg.is-empty{color:#E5E7EB}
body.theme-dark .v2x .dir-fx-stars svg.is-empty{color:rgba(255,255,255,.14)}
.v2x .dir-fx-rating-lbl{margin-left:5px;white-space:nowrap}

/* Count badge */
.v2x .dir-fx-cnt{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--v2-muted);background:#F1F3F8;padding:2px 8px;border-radius:99px;min-width:24px;text-align:center;font-variant-numeric:tabular-nums;transition:background .18s,color .18s,transform .2s var(--ease-spring);box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}
body.theme-dark .v2x .dir-fx-cnt{background:rgba(255,255,255,.06);color:#9CA2B3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.v2x .dir-fx-chk.is-on .dir-fx-cnt{background:var(--brand-blue);color:#fff;box-shadow:0 4px 10px -3px rgba(54,128,237,.5);transform:scale(1.05)}

/* ── Sticky Apply footer ── */
.v2x .dir-fx-foot{position:sticky;bottom:0;padding:12px 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 32%);border-top:1px solid var(--v2-line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin-top:auto;z-index:2}
body.theme-dark .v2x .dir-fx-foot{background:linear-gradient(180deg,transparent 0%,rgba(28,31,42,.9) 32%);border-top-color:rgba(255,255,255,.08)}

.v2x .dir-fx-apply{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 18px;border-radius:12px;border:0;background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-blue-dark) 100%);color:#fff;font-size:14px;font-weight:800;letter-spacing:-.005em;cursor:pointer;box-shadow:0 8px 20px -6px rgba(54,128,237,.55),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .2s ease,box-shadow .25s ease;font-family:inherit;overflow:hidden;position:relative}
.v2x .dir-fx-apply,.v2x .dir-fx-apply:hover,.v2x .dir-fx-apply:focus,.v2x .dir-fx-apply:focus-visible,.v2x .dir-fx-apply:active{color:#fff;text-decoration:none}
.v2x .dir-fx-apply:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(54,128,237,.65),inset 0 1px 0 rgba(255,255,255,.32)}
.v2x .dir-fx-apply:active{transform:scale(.98)}
.v2x .dir-fx-apply svg{color:#fff;flex:0 0 auto;width:16px;height:16px}
/* Sheen sweep on hover */
.v2x .dir-fx-apply::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-140%);transition:transform .8s var(--ease-out);pointer-events:none}
.v2x .dir-fx-apply:hover::before{transform:translateX(140%)}
/* Pending state — glow pulses when there are active filters */
.v2x .dir-fx-apply.is-pending{animation:dir-fx-apply-glow 2.6s ease-in-out infinite}
@keyframes dir-fx-apply-glow{0%,100%{box-shadow:0 8px 20px -6px rgba(54,128,237,.55),inset 0 1px 0 rgba(255,255,255,.28)}50%{box-shadow:0 12px 28px -6px rgba(54,128,237,.75),inset 0 1px 0 rgba(255,255,255,.32),0 0 0 4px rgba(54,128,237,.14)}}
.v2x .dir-fx-apply-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.24);color:#fff;font-size:11px;font-weight:800;letter-spacing:-.01em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* ── Featured star icon (inside the Featured row's label) ── */
.v2x .dir-fx-featico{width:12px;height:12px;color:#F59E0B;flex:0 0 auto;filter:drop-shadow(0 1px 1.5px rgba(245,158,11,.35))}

/* ── Categories collapsible group ──
   All rows render server-side; rows past the initial cap get `.is-collapsed`
   which hides them until the parent group toggles `.is-open`. The label swap
   ("Show N more" ⇄ "Show less") is handled with sibling display rules.
   No JS required beyond the tiny onclick toggle in the button. */
.v2x .dir-fx-catrow.is-collapsed{display:none}
.v2x .dir-fx-group-cat.is-open .dir-fx-catrow.is-collapsed{display:flex;animation:dir-fx-catrow-in .18s ease-out both}
@keyframes dir-fx-catrow-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.v2x .dir-fx-showmore{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:6px;padding:8px 10px;border:1px dashed var(--v2-line);border-radius:10px;background:transparent;color:var(--brand-blue);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
body.theme-dark .v2x .dir-fx-showmore{border-color:rgba(255,255,255,.12);color:var(--brand-blue-light)}
.v2x .dir-fx-showmore:hover{background:var(--v2-accent-soft);border-color:transparent;color:var(--brand-blue-dark)}
body.theme-dark .v2x .dir-fx-showmore:hover{background:rgba(54,128,237,.14);color:var(--brand-blue-light)}
.v2x .dir-fx-showmore svg{width:12px;height:12px;transition:transform .22s var(--ease-spring)}
.v2x .dir-fx-showmore .lbl-less{display:none}
.v2x .dir-fx-group-cat.is-open .dir-fx-showmore .lbl-more{display:none}
.v2x .dir-fx-group-cat.is-open .dir-fx-showmore .lbl-less{display:inline}
.v2x .dir-fx-group-cat.is-open .dir-fx-showmore svg{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .v2x .dir-fx-apply.is-pending{animation:none}
  .v2x .dir-fx-apply::before,.v2x .dir-fx-title-badge{animation:none}
  .v2x .dir-fx-catrow-in{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3 — BROWSE AI CATEGORIES  (.dir-cat-sect)
   Big head band (eyebrow · gradient title · subtitle · view-all pill) over a
   horizontal snap rail of tone-cycled category cards. Each card carries a
   tinted icon tile, a short pitch, a count pill, an arrow chip and a bottom
   accent bar that intensifies on hover. Rail nudge buttons + edge fade masks
   only appear when the row overflows (driven by data-* attributes toggled by
   the small script at the foot of this file).
   ═══════════════════════════════════════════════════════════════════════════ */
.v2x .dir-cat-sect{margin-top:56px;padding-bottom:8px}

/* ── Showcase head — centred, with sparkle flanks around the title ── */
.v2x .dir-cat-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:32px;padding:0 16px}

.v2x .dir-cat-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:7px 16px 7px 12px;border-radius:999px;background:#EAF2FD;color:var(--brand-blue-dark);font-size:13px;font-weight:700;letter-spacing:-.004em;box-shadow:inset 0 0 0 1px #CFE0FA;transition:transform .2s var(--ease-spring)}
body.theme-dark .v2x .dir-cat-eyebrow{background:rgba(54,128,237,.16);color:var(--brand-blue-light);box-shadow:inset 0 0 0 1px rgba(96,164,245,.28)}
.v2x .dir-cat-eyebrow svg{width:14px;height:14px;flex:0 0 auto}

/* Title — inline-flex so sparkle flanks sit tight against the words rather
   than flying to the container edges. margin auto keeps it centred. */
.v2x .dir-cat-title{margin:0;font-size:clamp(30px,3.6vw,48px);font-weight:800;line-height:1.1;color:var(--v2-ink);letter-spacing:-.024em;display:inline-flex;align-items:center;justify-content:center;gap:18px;text-wrap:balance;max-width:100%}
.v2x .dir-cat-title-inner{display:inline-block}
.v2x .dir-cat-title-accent{background:linear-gradient(100deg,var(--brand-blue) 6%,var(--brand-blue-dark) 58%,var(--brand-blue) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.theme-dark .v2x .dir-cat-title-accent{background:linear-gradient(100deg,var(--brand-blue-light) 6%,var(--brand-blue) 58%,var(--brand-blue-light) 100%);-webkit-background-clip:text;background-clip:text}

/* Sparkle flanks — matches the "Why choose AIToolsay?" showcase pattern:
   two tiny dots + a small 4-point star + a big 4-point star per side (big
   sits closest to the title). Each element carries its own drop-shadow so
   it reads as an emitter of light rather than a flat glyph, and each has
   its own twinkle delay so the row breathes without strobing. */
/* The sparkle flanks moved to §STAR at the end of this sheet, where they
   became masked pseudo-elements on the heading itself — same three shapes,
   scattered the way the reference arranges them instead of lined up in a
   row. The markup spans went with these rules. */

.v2x .dir-cat-sub{margin:0;font-size:15px;color:var(--v2-muted);line-height:1.55;max-width:60ch}

/* ── Rail wrapper — carries the edge fades + nudge buttons ── */
.v2x .dir-cat-railwrap{position:relative;--dir-cat-fade-l:0px;--dir-cat-fade-r:0px}
.v2x .dir-cat-railwrap[data-scrollable="1"]:not([data-at-start="1"]){--dir-cat-fade-l:56px}
.v2x .dir-cat-railwrap[data-scrollable="1"]:not([data-at-end="1"]){--dir-cat-fade-r:56px}

/* Nudge buttons — appear only when the rail is scrollable, hide at either end */
.v2x .dir-cat-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--brand-blue-dark);cursor:pointer;box-shadow:0 6px 20px -6px rgba(16,24,40,.28),inset 0 0 0 1px var(--v2-line);transition:transform .22s var(--ease-spring),box-shadow .22s ease,background .18s ease,opacity .2s ease}
body.theme-dark .v2x .dir-cat-nav{background:rgba(38,42,54,.95);color:var(--brand-blue-light);box-shadow:0 6px 20px -6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.v2x .dir-cat-railwrap[data-scrollable="1"] .dir-cat-nav{display:inline-flex}
.v2x .dir-cat-nav-prev{left:-8px}
.v2x .dir-cat-nav-next{right:-8px}
.v2x .dir-cat-nav svg{width:16px;height:16px}
.v2x .dir-cat-nav:hover{background:var(--brand-blue);color:#fff;transform:translateY(-50%) scale(1.06);box-shadow:0 12px 26px -6px rgba(54,128,237,.55)}
.v2x .dir-cat-railwrap[data-at-start="1"] .dir-cat-nav-prev,
.v2x .dir-cat-railwrap[data-at-end="1"] .dir-cat-nav-next{opacity:.3;pointer-events:none}

/* ── Rail — horizontal snap scroll with edge fade masks ── */
.v2x .dir-cat-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);grid-template-columns:none;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:8px;padding:6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--dir-cat-fade-l,0px),#000 calc(100% - var(--dir-cat-fade-r,0px)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--dir-cat-fade-l,0px),#000 calc(100% - var(--dir-cat-fade-r,0px)),transparent 100%)}
.v2x .dir-cat-rail::-webkit-scrollbar{display:none}

/* ── The card ── */
.v2x .dir-cat-card{--dtc-ink:#3680ED;--dtc-ink-dark:#2060C0;--dtc-bg:#EAF2FD;--dtc-line:#CFE0FA;--dtc-shadow:rgba(54,128,237,.42);position:relative;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 20px 22px;background:#fff;border:1px solid var(--v2-line);border-radius:20px;text-align:center;color:var(--v2-ink);text-decoration:none;box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 24px -20px rgba(16,24,40,.22);transition:transform .28s var(--ease-out),border-color .22s ease,box-shadow .28s ease;overflow:hidden;isolation:isolate}
body.theme-dark .v2x .dir-cat-card{background:rgba(28,31,42,.9);border-color:rgba(255,255,255,.08);box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px -20px rgba(0,0,0,.65)}

/* Tone tokens per data-tone (uses the SAME palette + hex values as the pills
   for consistency across every colored element on the page). */
.v2x .dir-cat-card[data-tone="blue"]   {--dtc-ink:#1B5BB5;--dtc-ink-dark:#144690;--dtc-bg:#EAF2FD;--dtc-line:#CFE0FA;--dtc-shadow:rgba(54,128,237,.4)}
.v2x .dir-cat-card[data-tone="violet"] {--dtc-ink:#5B33C4;--dtc-ink-dark:#452196;--dtc-bg:#F0EBFE;--dtc-line:#DED2FB;--dtc-shadow:rgba(139,92,246,.42)}
.v2x .dir-cat-card[data-tone="indigo"] {--dtc-ink:#3540B0;--dtc-ink-dark:#2A3288;--dtc-bg:#EBEEFE;--dtc-line:#D3D9FB;--dtc-shadow:rgba(99,102,241,.42)}
.v2x .dir-cat-card[data-tone="rose"]   {--dtc-ink:#B31D3C;--dtc-ink-dark:#8A1730;--dtc-bg:#FEECEF;--dtc-line:#FBD2DA;--dtc-shadow:rgba(236,72,153,.42)}
.v2x .dir-cat-card[data-tone="amber"]  {--dtc-ink:#A85B08;--dtc-ink-dark:#7C4306;--dtc-bg:#FEF4E4;--dtc-line:#FBE3C0;--dtc-shadow:rgba(245,158,11,.42)}
.v2x .dir-cat-card[data-tone="emerald"]{--dtc-ink:#08795A;--dtc-ink-dark:#065C44;--dtc-bg:#E6F8F1;--dtc-line:#C6EEDF;--dtc-shadow:rgba(16,185,129,.42)}
.v2x .dir-cat-card[data-tone="cyan"]   {--dtc-ink:#0A6E88;--dtc-ink-dark:#0A5468;--dtc-bg:#E4F6FB;--dtc-line:#C2E9F4;--dtc-shadow:rgba(6,182,212,.42)}
.v2x .dir-cat-card[data-tone="orange"] {--dtc-ink:#B4500C;--dtc-ink-dark:#8C3D08;--dtc-bg:#FEF0E6;--dtc-line:#FBD9C2;--dtc-shadow:rgba(234,88,12,.42)}
body.theme-dark .v2x .dir-cat-card[data-tone="blue"]   {--dtc-ink:#8CBEFA;--dtc-bg:rgba(54,128,237,.16);--dtc-line:rgba(96,164,245,.28)}
body.theme-dark .v2x .dir-cat-card[data-tone="violet"] {--dtc-ink:#BFA6FB;--dtc-bg:rgba(124,77,240,.18);--dtc-line:rgba(160,120,250,.3)}
body.theme-dark .v2x .dir-cat-card[data-tone="indigo"] {--dtc-ink:#A9B2FB;--dtc-bg:rgba(79,70,229,.18);--dtc-line:rgba(129,140,248,.3)}
body.theme-dark .v2x .dir-cat-card[data-tone="rose"]   {--dtc-ink:#FB9BB0;--dtc-bg:rgba(244,63,94,.18);--dtc-line:rgba(251,113,133,.3)}
body.theme-dark .v2x .dir-cat-card[data-tone="amber"]  {--dtc-ink:#FBC97A;--dtc-bg:rgba(245,158,11,.18);--dtc-line:rgba(251,191,36,.3)}
body.theme-dark .v2x .dir-cat-card[data-tone="emerald"]{--dtc-ink:#6EE7BE;--dtc-bg:rgba(16,185,129,.18);--dtc-line:rgba(52,211,153,.3)}
body.theme-dark .v2x .dir-cat-card[data-tone="cyan"]   {--dtc-ink:#7CD9EE;--dtc-bg:rgba(6,182,212,.18);--dtc-line:rgba(34,211,238,.3)}
body.theme-dark .v2x .dir-cat-card[data-tone="orange"] {--dtc-ink:#FBB07A;--dtc-bg:rgba(249,115,22,.18);--dtc-line:rgba(251,146,60,.3)}

/* Bottom accent bar — tone-colored, thickens on hover */
.v2x .dir-cat-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent 0%,var(--dtc-ink) 50%,transparent 100%);opacity:.65;transition:opacity .28s ease,height .28s ease}
@media (hover:hover){
  .v2x .dir-cat-card:hover{transform:translateY(-6px);border-color:var(--dtc-line);box-shadow:0 24px 46px -18px var(--dtc-shadow),0 4px 10px rgba(16,24,40,.06);text-decoration:none;color:var(--v2-ink)}
  body.theme-dark .v2x .dir-cat-card:hover{box-shadow:0 24px 46px -18px rgba(0,0,0,.6)}
  .v2x .dir-cat-card:hover::after{opacity:1;height:5px}
  .v2x .dir-cat-card:hover .dir-cat-card-ico{transform:translateY(-2px) scale(1.06)}
  .v2x .dir-cat-card:hover .dir-cat-card-nm{color:var(--dtc-ink)}
  .v2x .dir-cat-card:hover .dir-cat-card-arr{background:linear-gradient(135deg,var(--dtc-ink) 0%,var(--dtc-ink-dark) 100%);color:#fff;border-color:transparent;box-shadow:0 6px 14px -4px var(--dtc-shadow);transform:scale(1.06)}
}
.v2x .dir-cat-card:focus-visible{outline:none;border-color:var(--dtc-ink);box-shadow:0 0 0 3px var(--dtc-line),0 24px 46px -18px var(--dtc-shadow)}

/* Icon tile — tone-tinted rounded square */
.v2x .dir-cat-card-ico{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;--dir-plate-ink:var(--dtc-ink);transition:transform .3s var(--ease-spring),box-shadow .3s ease}
.v2x .dir-cat-card-ico svg{width:30px;height:30px}

/* Name / description */
.v2x .dir-cat-card-nm{margin:8px 0 0;font-size:16px;font-weight:800;color:var(--v2-ink);letter-spacing:-.012em;line-height:1.25;transition:color .18s ease}
.v2x .dir-cat-card-desc{margin:0;font-size:12.5px;line-height:1.55;color:var(--v2-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3 * 1.55em)}

/* Count pill — tone-tinted */
.v2x .dir-cat-card-cnt{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;background:var(--dtc-bg);color:var(--dtc-ink);font-size:11.5px;font-weight:700;letter-spacing:.005em;box-shadow:inset 0 0 0 1px var(--dtc-line);margin-top:4px}

/* Arrow chip at the bottom */
.v2x .dir-cat-card-arr{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:transparent;color:var(--dtc-ink);border:1.5px solid var(--dtc-line);margin-top:6px;transition:background .22s ease,color .18s ease,border-color .18s ease,box-shadow .22s ease,transform .22s var(--ease-spring)}
.v2x .dir-cat-card-arr svg{width:16px;height:16px}

/* Responsive card widths */
@media (max-width:1180px){.v2x .dir-cat-rail{grid-auto-columns:minmax(220px,240px)}}
@media (max-width:820px){
  .v2x .dir-cat-sect{margin-top:40px}
  .v2x .dir-cat-head{gap:12px;margin-bottom:24px}
  .v2x .dir-cat-sub{font-size:14px}
  .v2x .dir-cat-rail{grid-auto-columns:minmax(200px,220px);gap:14px}
  .v2x .dir-cat-card{padding:22px 16px 20px}
  .v2x .dir-cat-card-ico{width:60px;height:60px;border-radius:18px}
  .v2x .dir-cat-card-ico svg{width:26px;height:26px}
  .v2x .dir-cat-nav{width:38px;height:38px}
}
@media (max-width:480px){
}
@media (max-width:520px){
  .v2x .dir-cat-rail{grid-auto-columns:minmax(180px,200px)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4 — WHAT IS AN AI TOOL DIRECTORY?  (.dir-why-sect)
   Reuses the centred showcase head pattern (eyebrow / title with sparkle
   flanks / subtitle) already defined for .dir-cat-head. Below it, a row of
   6 explainer cards — the first is a solid brand-blue "OUR PROMISE" card
   with a dot-field background and a white icon chip; the rest are white
   cards tone-cycled through the palette with a matching accent bar under
   the title.
   ═══════════════════════════════════════════════════════════════════════════ */
.v2x .dir-why-sect{margin-top:64px;padding-bottom:8px}

/* Reuse the centred head styling from the categories section */
.v2x .dir-why-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:36px;padding:0 16px}
.v2x .dir-why-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:7px 16px 7px 12px;border-radius:999px;background:#EAF2FD;color:var(--brand-blue-dark);font-size:13px;font-weight:700;letter-spacing:-.004em;box-shadow:inset 0 0 0 1px #CFE0FA}
body.theme-dark .v2x .dir-why-eyebrow{background:rgba(54,128,237,.16);color:var(--brand-blue-light);box-shadow:inset 0 0 0 1px rgba(96,164,245,.28)}
.v2x .dir-why-eyebrow svg{width:14px;height:14px;flex:0 0 auto}

.v2x .dir-why-title{margin:0;font-size:clamp(30px,3.6vw,48px);font-weight:800;line-height:1.1;color:var(--v2-ink);letter-spacing:-.024em;display:inline-flex;align-items:center;justify-content:center;gap:18px;text-wrap:balance;max-width:100%}
.v2x .dir-why-title-inner{display:inline-block}
.v2x .dir-why-title-accent{background:linear-gradient(100deg,var(--brand-blue) 6%,var(--brand-blue-dark) 58%,var(--brand-blue) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.theme-dark .v2x .dir-why-title-accent{background:linear-gradient(100deg,var(--brand-blue-light) 6%,var(--brand-blue) 58%,var(--brand-blue-light) 100%);-webkit-background-clip:text;background-clip:text}
.v2x .dir-why-sub{margin:0;font-size:15px;color:var(--v2-muted);line-height:1.55;max-width:60ch}

/* ── Grid ── */
.v2x .dir-why-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}

/* ── Card shell (regular tone card) ── */
.v2x .dir-why-card{--dwc-ink:#1B5BB5;--dwc-ink-dark:#144690;--dwc-bg:#EAF2FD;--dwc-line:#CFE0FA;--dwc-shadow:rgba(54,128,237,.32);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 20px 26px;background:#fff;border:1px solid var(--v2-line);border-radius:20px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 24px -20px rgba(16,24,40,.22);transition:transform .28s var(--ease-out),border-color .22s ease,box-shadow .28s ease;overflow:hidden;isolation:isolate}
body.theme-dark .v2x .dir-why-card{background:rgba(28,31,42,.9);border-color:rgba(255,255,255,.08);box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px -20px rgba(0,0,0,.65)}

/* Tone tokens per data-tone — same hex values as the pill tokens / home page */
.v2x .dir-why-card[data-tone="blue"]   {--dwc-ink:#1B5BB5;--dwc-ink-dark:#144690;--dwc-bg:#EAF2FD;--dwc-line:#CFE0FA;--dwc-shadow:rgba(54,128,237,.36)}
.v2x .dir-why-card[data-tone="violet"] {--dwc-ink:#5B33C4;--dwc-ink-dark:#452196;--dwc-bg:#F0EBFE;--dwc-line:#DED2FB;--dwc-shadow:rgba(139,92,246,.36)}
.v2x .dir-why-card[data-tone="emerald"]{--dwc-ink:#08795A;--dwc-ink-dark:#065C44;--dwc-bg:#E6F8F1;--dwc-line:#C6EEDF;--dwc-shadow:rgba(16,185,129,.36)}
.v2x .dir-why-card[data-tone="amber"]  {--dwc-ink:#A85B08;--dwc-ink-dark:#7C4306;--dwc-bg:#FEF4E4;--dwc-line:#FBE3C0;--dwc-shadow:rgba(245,158,11,.36)}
.v2x .dir-why-card[data-tone="rose"]   {--dwc-ink:#B31D3C;--dwc-ink-dark:#8A1730;--dwc-bg:#FEECEF;--dwc-line:#FBD2DA;--dwc-shadow:rgba(236,72,153,.36)}
.v2x .dir-why-card[data-tone="cyan"]   {--dwc-ink:#0A6E88;--dwc-ink-dark:#0A5468;--dwc-bg:#E4F6FB;--dwc-line:#C2E9F4;--dwc-shadow:rgba(6,182,212,.36)}
body.theme-dark .v2x .dir-why-card[data-tone="blue"]   {--dwc-ink:#8CBEFA;--dwc-bg:rgba(54,128,237,.16);--dwc-line:rgba(96,164,245,.28)}
body.theme-dark .v2x .dir-why-card[data-tone="violet"] {--dwc-ink:#BFA6FB;--dwc-bg:rgba(124,77,240,.18);--dwc-line:rgba(160,120,250,.3)}
body.theme-dark .v2x .dir-why-card[data-tone="emerald"]{--dwc-ink:#6EE7BE;--dwc-bg:rgba(16,185,129,.18);--dwc-line:rgba(52,211,153,.3)}
body.theme-dark .v2x .dir-why-card[data-tone="amber"]  {--dwc-ink:#FBC97A;--dwc-bg:rgba(245,158,11,.18);--dwc-line:rgba(251,191,36,.3)}
body.theme-dark .v2x .dir-why-card[data-tone="rose"]   {--dwc-ink:#FB9BB0;--dwc-bg:rgba(244,63,94,.18);--dwc-line:rgba(251,113,133,.3)}
body.theme-dark .v2x .dir-why-card[data-tone="cyan"]   {--dwc-ink:#7CD9EE;--dwc-bg:rgba(6,182,212,.18);--dwc-line:rgba(34,211,238,.3)}

/* ── Card wash + gradient ring (both fade IN on hover) ──
   ::before is a soft radial tone-tint from the top that lights the card
   from within. ::after is a masked gradient border that reads as a glowing
   ring. z-index:0 keeps them under content (which is `position:relative`). */
.v2x .dir-why-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 70% at 50% -10%,var(--dwc-bg) 0%,transparent 62%);opacity:0;transition:opacity .32s ease;pointer-events:none;z-index:0}
.v2x .dir-why-card::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,var(--dwc-ink) 0%,var(--dwc-ink-dark) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .28s ease;pointer-events:none;z-index:2}
.v2x .dir-why-card > *{position:relative;z-index:1}

/* Card hover — lift + wash + gradient ring + tone shadow */
@media (hover:hover){
  .v2x .dir-why-card:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 28px 50px -18px var(--dwc-shadow),0 6px 14px rgba(16,24,40,.08)}
  .v2x .dir-why-card:hover::before{opacity:.9}
  .v2x .dir-why-card:hover::after{opacity:1}
  body.theme-dark .v2x .dir-why-card:hover{box-shadow:0 28px 50px -18px rgba(0,0,0,.7),0 6px 14px rgba(0,0,0,.35)}
}
.v2x .dir-why-card:focus-visible{outline:none;border-color:var(--dwc-ink);box-shadow:0 0 0 3px var(--dwc-line),0 24px 46px -18px var(--dwc-shadow)}

/* Icon tile — tone-tinted rounded square with an outer glow halo (fades in
   on hover). The halo is a positioned pseudo behind the tile with a heavy
   blur so it reads as ambient light, not a hard shape. */
.v2x .dir-why-ico{position:relative;display:grid;place-items:center;width:66px;height:66px;border-radius:20px;--dir-plate-ink:var(--dwc-ink);transition:transform .35s var(--ease-spring),box-shadow .3s ease}
.v2x .dir-why-ico svg{width:30px;height:30px;transition:transform .35s var(--ease-spring)}
.v2x .dir-why-ico::before{content:'';position:absolute;inset:-10px;border-radius:inherit;background:radial-gradient(circle at center,var(--dwc-ink) 0%,transparent 62%);opacity:0;filter:blur(14px);transition:opacity .35s ease;pointer-events:none;z-index:-1}
@media (hover:hover){
  .v2x .dir-why-card:hover .dir-why-ico{transform:translateY(-2px) scale(1.08) rotate(-6deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 22px -10px var(--dir-plate-ink)}
  .v2x .dir-why-card:hover .dir-why-ico::before{opacity:.55}
  .v2x .dir-why-card:hover .dir-why-ico svg{transform:scale(1.06)}
  body.theme-dark .v2x .dir-why-card:hover .dir-why-ico{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px var(--dwc-ink)}
}

/* Title — tone-coloured, underline-sweep on card hover */
.v2x .dir-why-title-c{margin:10px 0 0;font-size:17px;font-weight:800;color:var(--dwc-ink-dark);letter-spacing:-.014em;line-height:1.25;text-wrap:balance;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:50% calc(100% - 1px);background-size:0% 2px;transition:background-size .4s var(--ease-out),color .18s ease}
body.theme-dark .v2x .dir-why-title-c{color:var(--dwc-ink)}
@media (hover:hover){.v2x .dir-why-card:hover .dir-why-title-c{background-size:70% 2px}}

/* Thin tone accent bar under the title — widens on card hover */
.v2x .dir-why-rule{display:block;width:28px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--dwc-ink) 0%,var(--dwc-ink-dark) 100%);margin:6px 0 6px;transition:width .35s var(--ease-out),box-shadow .3s ease}
@media (hover:hover){.v2x .dir-why-card:hover .dir-why-rule{width:44px;box-shadow:0 4px 10px -2px var(--dwc-shadow)}}

/* Description — subtle ink shift on hover for warmth */
.v2x .dir-why-desc{margin:0;font-size:13px;line-height:1.55;color:var(--v2-muted);transition:color .2s ease}
@media (hover:hover){.v2x .dir-why-card:hover .dir-why-desc{color:var(--v2-ink)}body.theme-dark .v2x .dir-why-card:hover .dir-why-desc{color:#E4E7EE}}

/* Corner sparkle — small tone-colored star in the top-right, spins on hover */
.v2x .dir-why-corner{position:absolute;top:12px;right:12px;z-index:2;color:var(--dwc-ink);opacity:.28;transition:opacity .28s ease,transform .35s var(--ease-spring)}
.v2x .dir-why-corner svg{width:14px;height:14px;display:block}
@media (hover:hover){.v2x .dir-why-card:hover .dir-why-corner{opacity:1;transform:rotate(90deg) scale(1.25)}}

/* ─── LEAD CARD — solid brand-blue with dot field + white content ─── */
.v2x .dir-why-card.is-lead{background:linear-gradient(160deg,#3F91FA 0%,var(--brand-blue) 45%,var(--brand-blue-dark) 100%);border-color:transparent;color:#fff;box-shadow:0 14px 34px -12px rgba(54,128,237,.55),inset 0 1px 0 rgba(255,255,255,.22)}
body.theme-dark .v2x .dir-why-card.is-lead{box-shadow:0 14px 34px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14)}
.v2x .dir-why-card.is-lead::before,.v2x .dir-why-card.is-lead::after{display:none}
@media (hover:hover){
  .v2x .dir-why-card.is-lead:hover{transform:translateY(-8px);box-shadow:0 28px 54px -18px rgba(54,128,237,.7),inset 0 1px 0 rgba(255,255,255,.24)}
  body.theme-dark .v2x .dir-why-card.is-lead:hover{box-shadow:0 28px 54px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16)}
  .v2x .dir-why-card.is-lead:hover .dir-why-ico{transform:translateY(-2px) scale(1.08) rotate(-6deg)}
}

/* Dot-field background inside the lead card — a radial dot pattern in white
   at low alpha, sitting under the content (which lives at z-index:1). */
.v2x .dir-why-card.is-lead > *{position:relative;z-index:1}
.v2x .dir-why-dots{position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.6px);background-size:14px 14px;opacity:.75;pointer-events:none;mask-image:radial-gradient(120% 100% at 50% 30%,#000,transparent 78%);-webkit-mask-image:radial-gradient(120% 100% at 50% 30%,#000,transparent 78%)}

/* Floating particle sparkles on the lead card — 4 small dots, each drifting
   on its own delay so the field never repeats. Pure CSS, no JS. */
.v2x .dir-why-particle{position:absolute;z-index:0;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 0 8px rgba(255,255,255,.4);pointer-events:none;animation:dir-why-float 4.5s ease-in-out infinite}
.v2x .dir-why-particle-1{top:18%;left:12%;animation-delay:0s}
.v2x .dir-why-particle-2{top:66%;right:14%;width:4px;height:4px;animation-delay:1.2s;background:rgba(255,255,255,.55)}
.v2x .dir-why-particle-3{top:40%;right:22%;width:5px;height:5px;animation-delay:2.4s;background:rgba(255,255,255,.5)}
.v2x .dir-why-particle-4{top:80%;left:22%;width:4px;height:4px;animation-delay:3.1s;background:rgba(255,255,255,.6)}
@keyframes dir-why-float{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.55}
  33%    {transform:translate3d(-4px,-8px,0) scale(1.15);opacity:1}
  66%    {transform:translate3d(3px,-4px,0) scale(.9);opacity:.7}
}

/* "OUR PROMISE" tag — pill with inline star + pulsing glow */
.v2x .dir-why-card.is-lead .dir-why-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 12px 4px 10px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);animation:dir-why-tag-pulse 3s ease-in-out infinite}
.v2x .dir-why-card.is-lead .dir-why-tag svg{width:10px;height:10px;color:#fff;filter:drop-shadow(0 1px 2px rgba(255,255,255,.4))}
@keyframes dir-why-tag-pulse{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),0 0 0 0 rgba(255,255,255,0)}
  50%    {box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 20px 2px rgba(255,255,255,.18)}
}

/* Icon chip on the lead card — WHITE tile with brand-blue icon inside, glows
   with a soft white halo behind it that pulses gently. */
.v2x .dir-why-card.is-lead .dir-why-ico{background:#fff;color:var(--brand-blue-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px -8px rgba(0,0,0,.28),0 0 0 4px rgba(255,255,255,.16)}
.v2x .dir-why-card.is-lead .dir-why-ico::before{background:radial-gradient(circle at center,rgba(255,255,255,.6) 0%,transparent 60%);opacity:.5;animation:dir-why-lead-halo 3.2s ease-in-out infinite}
@keyframes dir-why-lead-halo{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.15)}}

/* Title + description on lead card — white ink; tag has its own pulse */
.v2x .dir-why-card.is-lead .dir-why-title-c{color:#fff;background-image:none}
.v2x .dir-why-card.is-lead .dir-why-desc{color:rgba(255,255,255,.88)}
@media (hover:hover){.v2x .dir-why-card.is-lead:hover .dir-why-desc{color:#fff}}

/* ── Staggered entrance animation — subtle rise + fade on load ── */
@media (prefers-reduced-motion:no-preference){
  .v2x .dir-why-card{animation:dir-why-rise .6s var(--ease-out) both;animation-delay:calc(var(--dwc-i,0)*.08s + .1s)}
  @keyframes dir-why-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}

/* ── Responsive ── */
@media (max-width:1180px){
  .v2x .dir-why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .v2x .dir-why-sect{margin-top:48px}
  .v2x .dir-why-head{margin-bottom:28px;gap:12px}
  .v2x .dir-why-title{gap:12px}
  .v2x .dir-why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .v2x .dir-why-card{padding:22px 18px 20px}
  .v2x .dir-why-ico{width:58px;height:58px;border-radius:18px}
  .v2x .dir-why-ico svg{width:26px;height:26px}
  .v2x .dir-why-title-c{font-size:16px}
  .v2x .dir-why-desc{font-size:12.5px}
}
@media (max-width:520px){
  .v2x .dir-why-grid{grid-template-columns:1fr}
  .v2x .dir-why-sub{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .v2x .dir-why-card,.v2x .dir-why-ico,.v2x .dir-why-ico svg,.v2x .dir-why-title-c,.v2x .dir-why-rule,.v2x .dir-why-desc,.v2x .dir-why-corner{transition:none;animation:none}
  .v2x .dir-why-card.is-lead .dir-why-tag,.v2x .dir-why-card.is-lead .dir-why-ico::before,.v2x .dir-why-particle{animation:none}
  .v2x .dir-why-card{animation:none;opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6 — NEWSROOM  (.dir-nr-sect)
   ---------------------------------------------------------------------------
   Two panels sharing a shell: a tinted head, a card body, a footer button.
   Panels differ by `data-tone` only (blog blue, news violet). Copied from
   .hpx-nr and re-namespaced under .dir-nr-* so the seo-page layout doesn't
   need to load homepage.css just for this band.
   ═══════════════════════════════════════════════════════════════════════════ */
.v2x .dir-nr-sect{margin-top:56px;padding:0 4px 8px}

/* ── Head — matches .dir-cat-head + .dir-why-head cadence ───────────────── */
.v2x .dir-nr-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:36px;padding:0 16px}
.v2x .dir-nr-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:7px 16px 7px 12px;border-radius:999px;background:#EAF2FD;color:var(--brand-blue-dark);font-size:13px;font-weight:700;letter-spacing:-.004em;box-shadow:inset 0 0 0 1px #CFE0FA}
body.theme-dark .v2x .dir-nr-eyebrow{background:rgba(54,128,237,.16);color:var(--brand-blue-light);box-shadow:inset 0 0 0 1px rgba(96,164,245,.28)}
.v2x .dir-nr-eyebrow svg{width:14px;height:14px;flex:0 0 auto}
.v2x .dir-nr-title{margin:0;font-size:clamp(30px,3.6vw,48px);font-weight:800;line-height:1.1;color:var(--v2-ink);letter-spacing:-.024em;display:inline-flex;align-items:center;justify-content:center;gap:18px;text-wrap:balance;max-width:100%}
.v2x .dir-nr-title-inner{display:inline-block}
.v2x .dir-nr-title-accent{background:linear-gradient(100deg,var(--brand-blue) 6%,var(--brand-blue-dark) 58%,var(--brand-blue) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.theme-dark .v2x .dir-nr-title-accent{background:linear-gradient(100deg,var(--brand-blue-light) 6%,var(--brand-blue) 58%,var(--brand-blue-light) 100%);-webkit-background-clip:text;background-clip:text}
.v2x .dir-nr-sub{margin:0;font-size:15px;color:var(--v2-muted);line-height:1.55;max-width:60ch}

/* ── Two-column grid ─────────────────────────────────────────────────────── */
.v2x .dir-nr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.v2x .dir-nr-grid.is-single{grid-template-columns:minmax(0,1fr)}

/* ── The shared panel shell ──────────────────────────────────────────────── */
.v2x .dir-nr-panel{--dnr-ink:#1B5BB5;--dnr-ink-dark:#144690;--dnr-bg:#F4F8FE;--dnr-line:#CFE0FA;--dnr-shadow:rgba(54,128,237,.28);position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--v2-line);border-radius:22px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 34px -22px rgba(16,24,40,.22);overflow:hidden}
body.theme-dark .v2x .dir-nr-panel{background:rgba(28,31,42,.9);border-color:rgba(255,255,255,.08);box-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -22px rgba(0,0,0,.6)}
.v2x .dir-nr-panel[data-tone="blue"]  {--dnr-ink:#1B5BB5;--dnr-ink-dark:#144690;--dnr-bg:#EAF2FD;--dnr-line:#CFE0FA;--dnr-shadow:rgba(54,128,237,.32)}
.v2x .dir-nr-panel[data-tone="violet"]{--dnr-ink:#5B33C4;--dnr-ink-dark:#452196;--dnr-bg:#F0EBFE;--dnr-line:#DED2FB;--dnr-shadow:rgba(139,92,246,.32)}
body.theme-dark .v2x .dir-nr-panel[data-tone="blue"]  {--dnr-ink:#8CBEFA;--dnr-ink-dark:#B8D5FB;--dnr-bg:rgba(54,128,237,.14);--dnr-line:rgba(96,164,245,.28)}
body.theme-dark .v2x .dir-nr-panel[data-tone="violet"]{--dnr-ink:#BFA6FB;--dnr-ink-dark:#D7C6FC;--dnr-bg:rgba(124,77,240,.14);--dnr-line:rgba(160,120,250,.28)}

/* ── Panel head ──────────────────────────────────────────────────────────── */
.v2x .dir-nr-phead{display:flex;align-items:center;gap:14px;padding:20px 22px 18px;background:linear-gradient(180deg,var(--dnr-bg) 0%,transparent 100%);border-bottom:1px solid var(--v2-line)}
body.theme-dark .v2x .dir-nr-phead{border-bottom-color:rgba(255,255,255,.08)}
.v2x .dir-nr-pico{flex:0 0 auto;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;--dir-plate-ink:var(--dnr-ink)}
.v2x .dir-nr-pico svg{width:22px;height:22px}
.v2x .dir-nr-pcopy{flex:1 1 auto;min-width:0}
.v2x .dir-nr-ptitle{margin:0;font-size:17px;font-weight:800;color:var(--v2-ink);letter-spacing:-.016em;line-height:1.2}
.v2x .dir-nr-psub{margin:2px 0 0;font-size:13px;color:var(--v2-muted);line-height:1.45}
.v2x .dir-nr-pcta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:#fff;color:var(--dnr-ink-dark);font-size:12.5px;font-weight:700;letter-spacing:-.004em;text-decoration:none;box-shadow:inset 0 0 0 1px var(--dnr-line),0 4px 10px -6px var(--dnr-shadow);transition:transform .2s ease,box-shadow .22s ease,background .18s ease,color .18s ease}
.v2x .dir-nr-pcta:hover{transform:translateY(-1px);background:var(--dnr-ink);color:#fff;box-shadow:0 10px 22px -8px var(--dnr-shadow);text-decoration:none}
body.theme-dark .v2x .dir-nr-pcta{background:rgba(38,42,54,.95);color:var(--dnr-ink-dark);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 4px 10px -6px rgba(0,0,0,.6)}
body.theme-dark .v2x .dir-nr-pcta:hover{background:var(--dnr-ink);color:#0F1420}
.v2x .dir-nr-pcta svg{width:14px;height:14px;flex:0 0 auto}

/* ── LIVE indicator (news head) ─────────────────────────────────────────── */
.v2x .dir-nr-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border-radius:99px;background:rgba(236,72,153,.14);color:#B31D3C;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(236,72,153,.28)}
body.theme-dark .v2x .dir-nr-live{background:rgba(236,72,153,.18);color:#FBB0C6;box-shadow:inset 0 0 0 1px rgba(251,113,133,.35)}
.v2x .dir-nr-live em{width:8px;height:8px;border-radius:50%;background:#EC4899;box-shadow:0 0 0 3px rgba(236,72,153,.24);animation:dir-nr-pulse 1.6s ease-in-out infinite}
@keyframes dir-nr-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.85);opacity:.6}}
@media (prefers-reduced-motion:reduce){.v2x .dir-nr-live em{animation:none}}

/* ── Tab strip (news panel only) ────────────────────────────────────────
   A recessed track with raised pill segments, matching the homepage
   .hpx-nrtabs pattern so the two pages read the same. Horizontal scroll
   with mask-image fades on both edges when the strip overflows the panel
   width; sync driven by JS at the foot of this file. */
.v2x .dir-nr-tabwrap{padding:2px 18px 0}
.v2x .dir-nr-tabs{display:inline-flex;gap:3px;max-width:100%;padding:4px;border-radius:99px;background:#F4F8FE;box-shadow:inset 0 0 0 1px var(--v2-line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.v2x .dir-nr-tabs::-webkit-scrollbar{display:none}
body.theme-dark .v2x .dir-nr-tabs{background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.v2x .dir-nr-tabs[data-overflow="1"][data-at-start="0"][data-at-end="0"]{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}
.v2x .dir-nr-tabs[data-overflow="1"][data-at-start="1"][data-at-end="0"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)}
.v2x .dir-nr-tabs[data-overflow="1"][data-at-start="0"][data-at-end="1"]{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 26px);mask-image:linear-gradient(to right,transparent 0,#000 26px)}

.v2x .dir-nr-tab{position:relative;flex:0 0 auto;padding:8px 14px;border:0;border-radius:99px;background:transparent;color:var(--v2-muted);font-size:12.8px;font-weight:700;letter-spacing:-.008em;white-space:nowrap;cursor:pointer;font-family:inherit;transition:background-color .18s ease,background-image .18s ease,color .18s ease,box-shadow .2s ease}
.v2x .dir-nr-tab.is-on{background:linear-gradient(135deg,var(--dnr-ink) 0%,var(--dnr-ink-dark) 100%);color:#fff;box-shadow:0 8px 18px -10px var(--dnr-shadow)}
@media (hover:hover){
  .v2x .dir-nr-tab:not(.is-on):hover{background:rgba(54,128,237,.08);color:var(--v2-ink)}
  body.theme-dark .v2x .dir-nr-tab:not(.is-on):hover{background:rgba(255,255,255,.04);color:var(--v2-ink)}
}
.v2x .dir-nr-tab:focus-visible{outline:2px solid var(--dnr-ink);outline-offset:2px}

/* Per-tab panel — only `.is-on` is visible; the rest use the native `hidden`
   attribute so they are fully removed from the a11y tree, not just clipped. */
.v2x .dir-nr-news{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.v2x .dir-nr-news[hidden]{display:none}

/* ── Panel body ─────────────────────────────────────────────────────────── */
.v2x .dir-nr-pbody{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;padding:18px 18px 6px}

/* ── Featured card (blog panel only) ──────────────────────────────────────
   Two-column grid — matches the homepage .hpx-nrlead layout: shot on the
   left (~44%), body on the right. Collapses to a single-column stack at
   ≤560px so the card breathes on phones. */
.v2x .dir-nr-lead{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:16px;padding:14px;border-radius:20px;text-decoration:none;color:var(--v2-ink);background:#fff;border:1px solid var(--v2-line);box-shadow:0 1px 2px rgba(16,24,40,.03);transition:transform .22s var(--ease-out),box-shadow .22s ease,border-color .22s ease}
body.theme-dark .v2x .dir-nr-lead{background:rgba(28,31,42,.85);border-color:rgba(255,255,255,.08)}
@media (hover:hover){
  .v2x .dir-nr-lead:hover{transform:translateY(-3px);border-color:var(--dnr-line);box-shadow:0 20px 40px -18px var(--dnr-shadow);text-decoration:none;color:var(--v2-ink)}
  .v2x .dir-nr-lead:hover .dir-nr-lead-shot img{transform:scale(1.04)}
}
.v2x .dir-nr-lead-shot{position:relative;display:block;overflow:hidden;border-radius:15px;background:linear-gradient(135deg,var(--dnr-ink) 0%,var(--dnr-ink-dark) 100%);aspect-ratio:4/3}
@supports not (aspect-ratio: 4 / 3){.v2x .dir-nr-lead-shot{min-height:190px}}
.v2x .dir-nr-lead-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.v2x .dir-nr-lead-plate{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.35)}
.v2x .dir-nr-lead-plate svg{width:56px;height:56px}
.v2x .dir-nr-lead-veil{position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(to top,rgba(6,12,22,.74) 0%,rgba(6,12,22,.28) 46%,transparent 100%);pointer-events:none}
.v2x .dir-nr-lead-flag{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:rgba(15,23,42,.72);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.02em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1}
.v2x .dir-nr-lead-flag svg{width:11px;height:11px;color:#FBBF24}
.v2x .dir-nr-lead-time{position:absolute;bottom:10px;left:10px;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1}
.v2x .dir-nr-lead-time svg{width:11px;height:11px}
.v2x .dir-nr-lead-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.v2x .dir-nr-lead-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:12px}
.v2x .dir-nr-lead-title{font-size:16px;font-weight:800;color:var(--dnr-ink-dark);line-height:1.32;letter-spacing:-.014em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.theme-dark .v2x .dir-nr-lead-title{color:var(--dnr-ink)}
.v2x .dir-nr-lead-desc{font-size:12.5px;color:var(--v2-muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v2x .dir-nr-lead-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:8px;border-top:1px solid var(--v2-line)}
body.theme-dark .v2x .dir-nr-lead-foot{border-top-color:rgba(255,255,255,.06)}
.v2x .dir-nr-lead-go{flex:0 0 auto;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--dnr-ink);color:#fff;box-shadow:0 8px 16px -6px var(--dnr-shadow);transition:transform .2s ease}
.v2x .dir-nr-lead:hover .dir-nr-lead-go{transform:translateX(3px)}
.v2x .dir-nr-lead-go svg{width:15px;height:15px}

/* Featured card stacks below 560px so the shot doesn't shrink to a strip */
@media (max-width:560px){
  .v2x .dir-nr-lead{grid-template-columns:minmax(0,1fr)}
  .v2x .dir-nr-lead-shot{aspect-ratio:16/9}
}

/* Pill (category chip) — shared between the featured card and row list */
.v2x .dir-nr-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;background:var(--dnr-bg);color:var(--dnr-ink-dark);font-size:11.5px;font-weight:700;letter-spacing:-.005em;box-shadow:inset 0 0 0 1px var(--dnr-line);white-space:nowrap}
body.theme-dark .v2x .dir-nr-pill{color:var(--dnr-ink)}
.v2x .dir-nr-pill.is-quiet{background:transparent;color:var(--dnr-ink);box-shadow:none;padding:2px 4px 2px 12px;position:relative}
.v2x .dir-nr-pill.is-quiet::before{content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--dir-nr-cat,var(--dnr-ink))}
.v2x .dir-nr-metabit{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--v2-muted);white-space:nowrap}
.v2x .dir-nr-metabit svg{width:11px;height:11px;flex:0 0 auto;opacity:.85}

/* Author cluster */
.v2x .dir-nr-author{display:inline-flex;align-items:center;gap:9px;min-width:0}
.v2x .dir-nr-author-face{flex:0 0 auto;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--dnr-bg);color:var(--dnr-ink-dark);font-size:12.5px;font-weight:800;overflow:hidden;box-shadow:inset 0 0 0 1px var(--dnr-line)}
.v2x .dir-nr-author-face img{width:100%;height:100%;object-fit:cover;display:block}
body.theme-dark .v2x .dir-nr-author-face{color:var(--dnr-ink)}
.v2x .dir-nr-author-id{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.v2x .dir-nr-author-name{font-size:12.5px;font-weight:800;color:var(--v2-ink);letter-spacing:-.006em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2x .dir-nr-author-role{font-size:11px;color:var(--v2-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Row list ────────────────────────────────────────────────────────────
   Homepage-proportion thumbnails: blog rows are 78×58, news rows 74×62 —
   wider than tall so the artwork actually reads. Rows sit flush left with
   no padding so the whole row is a big tap target. */
.v2x .dir-nr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.v2x .dir-nr-list li{margin:0}
.v2x .dir-nr-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--v2-ink);transition:background .18s ease,transform .18s ease}
@media (hover:hover){
  .v2x .dir-nr-row:hover{background:var(--dnr-bg);text-decoration:none;color:var(--v2-ink)}
  .v2x .dir-nr-row:hover .dir-nr-row-title{color:var(--dnr-ink-dark)}
  body.theme-dark .v2x .dir-nr-row:hover .dir-nr-row-title{color:var(--dnr-ink)}
  .v2x .dir-nr-row:hover .dir-nr-row-shot img{transform:scale(1.05)}
}
.v2x .dir-nr-row-shot{flex:0 0 auto;display:grid;place-items:center;width:78px;height:58px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--dnr-ink) 0%,var(--dnr-ink-dark) 100%);color:rgba(255,255,255,.55);box-shadow:0 4px 10px -6px var(--dnr-shadow),inset 0 0 0 1px var(--v2-line)}
.v2x .dir-nr-row-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease-out)}
.v2x .dir-nr-row-shot svg{width:22px;height:22px}
.v2x .dir-nr-row-shot.is-news{width:74px;height:62px;background:linear-gradient(135deg,#5B33C4 0%,#452196 100%)}
.v2x .dir-nr-panel[data-tone="violet"] .dir-nr-row-shot{background:linear-gradient(135deg,#5B33C4 0%,#452196 100%)}
.v2x .dir-nr-row-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}
.v2x .dir-nr-row-title{font-size:14.2px;font-weight:720;color:var(--v2-ink);line-height:1.42;letter-spacing:-.012em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .18s ease}
.v2x .dir-nr-row-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.v2x .dir-nr-row-live{display:inline-flex;align-items:center;padding:1px 8px;border-radius:99px;background:rgba(236,72,153,.14);color:#B31D3C;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(236,72,153,.28)}
body.theme-dark .v2x .dir-nr-row-live{background:rgba(236,72,153,.18);color:#FBB0C6;box-shadow:inset 0 0 0 1px rgba(251,113,133,.35)}

/* ── Panel foot ─────────────────────────────────────────────────────────── */
.v2x .dir-nr-pfoot{display:flex;align-items:center;gap:10px;padding:14px 18px 18px;margin-top:auto}
.v2x .dir-nr-fbtn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 18px;border-radius:16px;background:var(--dnr-bg);color:var(--dnr-ink-dark);font-size:14px;font-weight:800;letter-spacing:-.006em;text-decoration:none;box-shadow:inset 0 0 0 1px var(--dnr-line);transition:transform .2s ease,box-shadow .22s ease}
.v2x .dir-nr-fbtn:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--dnr-line),0 10px 22px -8px var(--dnr-shadow);text-decoration:none;color:var(--dnr-ink-dark)}
body.theme-dark .v2x .dir-nr-fbtn{color:var(--dnr-ink)}
body.theme-dark .v2x .dir-nr-fbtn:hover{color:var(--dnr-ink)}
.v2x .dir-nr-fbtn-chip{flex:0 0 auto;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--dnr-ink);color:#fff;box-shadow:0 6px 14px -6px var(--dnr-shadow)}
.v2x .dir-nr-fbtn-chip svg{width:13px;height:13px}
.v2x .dir-nr-fmore{flex:0 0 auto;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--dnr-bg);color:var(--dnr-ink-dark);text-decoration:none;box-shadow:inset 0 0 0 1px var(--dnr-line);transition:transform .2s ease,background .18s ease}
.v2x .dir-nr-fmore:hover{transform:translateY(-1px);background:var(--dnr-ink);color:#fff;text-decoration:none}
body.theme-dark .v2x .dir-nr-fmore{color:var(--dnr-ink)}
body.theme-dark .v2x .dir-nr-fmore:hover{color:#0F1420}
.v2x .dir-nr-fmore svg{width:18px;height:18px}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .v2x .dir-nr-grid{gap:16px}
  .v2x .dir-nr-phead{padding:16px 18px 14px;gap:12px}
  .v2x .dir-nr-pico{width:40px;height:40px;border-radius:12px}
  .v2x .dir-nr-pico svg{width:20px;height:20px}
}
@media (max-width:820px){
  .v2x .dir-nr-sect{margin-top:40px}
  .v2x .dir-nr-head{margin-bottom:28px;gap:10px}
  .v2x .dir-nr-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .v2x .dir-nr-panel{border-radius:18px}
  .v2x .dir-nr-pcta span{display:none}
  .v2x .dir-nr-pcta{padding:9px 11px}
  .v2x .dir-nr-lead-body{padding:14px 14px 16px}
  .v2x .dir-nr-lead-title{font-size:15.5px}
  .v2x .dir-nr-pbody{padding:14px 14px 4px}
  .v2x .dir-nr-pfoot{padding:12px 14px 14px}
}
@media (max-width:520px){
  .v2x .dir-nr-sub{font-size:14px}
  .v2x .dir-nr-row-shot{width:42px;height:42px;border-radius:10px}
  .v2x .dir-nr-row-title{font-size:13px}
  .v2x .dir-nr-fbtn{padding:11px 14px;font-size:13px}
  .v2x .dir-nr-fbtn-chip{width:26px;height:26px}
  .v2x .dir-nr-fmore{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .v2x .dir-nr-lead,.v2x .dir-nr-row,.v2x .dir-nr-fbtn,.v2x .dir-nr-fmore,.v2x .dir-nr-pcta{transition:none}
  .v2x .dir-nr-lead:hover,.v2x .dir-nr-row:hover,.v2x .dir-nr-fbtn:hover,.v2x .dir-nr-fmore:hover,.v2x .dir-nr-pcta:hover{transform:none}
}

/* ═════════════ FAQ WRAPPER (.dir-faq-sect)  ·  spacing only ═════════════
   The actual layout is owned by faq.css (.aitsq-* kit) — this rule just
   gives the section top margin that matches the other page bands so it
   doesn't collide with the "why" grid above it. */
.v2x .dir-faq-sect{margin-top:56px;padding-bottom:8px}
@media (max-width:820px){.v2x .dir-faq-sect{margin-top:40px}}

/* ═════════════ DIRECTORY TOOLBAR (.dir-tb)  ·  premium redesign ═════════════
   Left  = big gradient count + inline "Updating…" spinner.
   Right = sort dropdown with rotating chevron on focus + labeled segmented
           view toggle (grid | list) with brand-gradient active state.
   Wraps cleanly on mobile: left row on top, right controls stack below and
   take full width so the sort select spans the strip.
   */
.v2x .dir-tb{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;padding:14px 20px;background:#fff;border:1px solid var(--v2-line);border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px -16px rgba(16,24,40,.14);flex-wrap:wrap;transition:border-color .2s ease}
body.theme-dark .v2x .dir-tb{background:rgba(28,31,42,.9);border-color:rgba(255,255,255,.08);box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -18px rgba(0,0,0,.55)}

/* ── Mobile-only "Filters" toggle button (in the toolbar's left cluster).
   Hidden on desktop where the sidebar is visible; shown on ≤820 where the
   sidebar becomes a slide-in drawer. Badge shows active-filter count. */
.v2x .dir-tb-fxbtn{display:none;align-items:center;gap:8px;padding:9px 12px 9px 10px;border-radius:12px;border:1.5px solid var(--v2-line);background:linear-gradient(180deg,#fff 0%,#F4F8FE 100%);color:var(--v2-ink);font-size:13px;font-weight:700;letter-spacing:-.004em;cursor:pointer;font-family:inherit;transition:border-color .18s ease,box-shadow .2s ease,transform .2s ease}
.v2x .dir-tb-fxbtn svg{width:15px;height:15px;color:var(--brand-blue);flex:0 0 auto}
.v2x .dir-tb-fxbtn:hover{border-color:var(--brand-blue);box-shadow:0 8px 18px -10px rgba(54,128,237,.5);transform:translateY(-1px)}
.v2x .dir-tb-fxbtn-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--brand-blue);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:-.01em;box-shadow:0 4px 10px -3px rgba(54,128,237,.55)}
body.theme-dark .v2x .dir-tb-fxbtn{background:linear-gradient(180deg,rgba(28,31,42,.9) 0%,rgba(38,42,54,.9) 100%);border-color:rgba(255,255,255,.1);color:var(--v2-ink)}
body.theme-dark .v2x .dir-tb-fxbtn:hover{border-color:var(--brand-blue-light)}

/* ── Left — count + optional loader ── */
.v2x .dir-tb-left{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap}
.v2x .dir-tb-count{display:inline-flex;align-items:baseline;gap:8px}
.v2x .dir-tb-count-n{font-size:22px;font-weight:800;letter-spacing:-.028em;line-height:1;background:linear-gradient(135deg,var(--brand-blue-dark) 0%,var(--brand-blue) 55%,var(--brand-blue-light) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.theme-dark .v2x .dir-tb-count-n{background:linear-gradient(135deg,var(--brand-blue-light) 0%,var(--brand-blue) 55%,#B5D6FE 100%);-webkit-background-clip:text;background-clip:text}
.v2x .dir-tb-count-l{font-size:13.5px;font-weight:600;color:var(--v2-muted)}

.v2x .dir-tb-load{display:none;align-items:center;gap:6px;font-size:12px;color:var(--brand-blue);font-weight:600;padding:5px 12px;border-radius:99px;background:var(--v2-accent-soft)}
.v2x .dir-tb-load svg{width:14px;height:14px}
body.theme-dark .v2x .dir-tb-load{background:rgba(54,128,237,.14);color:var(--brand-blue-light)}

/* ── Right — sort + views ── */
.v2x .dir-tb-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ─────────────────────────────────────────────────────────────────────────
   Sort — custom listbox mirroring the /tools/ai-tools .tb-sortbox
   pattern (see components/resources/views/livewire/public/partials/
   category-styles.blade.php:243). Same anatomy: trigger with a 2-line
   caption+value, a panel with header + tinted-icon options + selected
   check + accent bar, a context footer that describes the current sort.
   Uses --v2-* / --brand-blue* tokens instead of --ez-*.
   ───────────────────────────────────────────────────────────────────── */
.v2x .dir-tb-sort{display:inline-flex;align-items:center;gap:10px;font-family:inherit}
.v2x .dir-tb-sort-lbl{display:none} /* the label lives inside the trigger now */

.v2x .dir-sortbox{position:relative;font-family:inherit}

.v2x .dir-sort-btn{
  display:inline-flex;align-items:center;gap:11px;
  background:linear-gradient(180deg,#fff 0%,#F4F8FE 100%);
  border:1.5px solid var(--v2-line);border-radius:14px;
  padding:8px 14px 8px 9px;min-height:52px;
  font-family:inherit;color:var(--v2-ink);cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.04),inset 0 1px 0 rgba(255,255,255,.7);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.v2x .dir-sort-btn:hover{background:#fff;border-color:var(--brand-blue-light);box-shadow:0 10px 20px -12px rgba(54,128,237,.55),inset 0 1px 0 rgba(255,255,255,.8);transform:translateY(-1px)}
.v2x .dir-sort-btn:focus-visible{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 4px rgba(54,128,237,.14)}
.v2x .dir-sortbox.is-open .dir-sort-btn{background:#fff;border-color:var(--brand-blue);box-shadow:0 0 0 4px rgba(54,128,237,.12)}
body.theme-dark .v2x .dir-sort-btn{background:rgba(28,31,42,.85);border-color:rgba(255,255,255,.1);color:var(--v2-ink);box-shadow:0 1px 2px rgba(0,0,0,.4)}
body.theme-dark .v2x .dir-sort-btn:hover{background:rgba(38,42,54,.9);box-shadow:0 10px 20px -12px rgba(0,0,0,.9)}
body.theme-dark .v2x .dir-sortbox.is-open .dir-sort-btn{background:rgba(38,42,54,.95);border-color:var(--brand-blue-light)}

/* 2-line label — static caption over live value */
.v2x .dir-ts-lb{flex:1;display:flex;flex-direction:column;gap:1px;text-align:left;min-width:0}
.v2x .dir-ts-cap{font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--v2-muted);line-height:1.1}
.v2x .dir-ts-val{font-size:14px;font-weight:750;letter-spacing:-.012em;color:var(--v2-ink);line-height:1.2}
.v2x .dir-sortbox.is-open .dir-ts-val,.v2x .dir-sort-btn:hover .dir-ts-val{color:var(--brand-blue-dark)}
body.theme-dark .v2x .dir-sortbox.is-open .dir-ts-val,body.theme-dark .v2x .dir-sort-btn:hover .dir-ts-val{color:var(--brand-blue-light)}
.v2x .dir-ts-cv{width:15px;height:15px;color:var(--v2-muted);flex:none;transition:transform .22s var(--ease-spring),color .18s ease}
.v2x .dir-sort-btn:hover .dir-ts-cv,.v2x .dir-sortbox.is-open .dir-ts-cv{color:var(--brand-blue)}
.v2x .dir-sortbox.is-open .dir-ts-cv{transform:rotate(180deg)}

/* Tinted icon chip — shared by the trigger and each option; data-tone picks the hue */
.v2x .dir-ts-ic,.v2x .dir-ts-opt-ic{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--so-bg,#EAF2FD);color:var(--so-ink,#1B5BB5);
  box-shadow:inset 0 0 0 1px var(--so-ln,#CFE0FA);
  transition:transform .22s var(--ease-spring);
}
.v2x .dir-ts-ic svg,.v2x .dir-ts-opt-ic svg{width:16px;height:16px}
/* Tone palette — uses the same hex values as home page --hpx-t-*-{ink,bg,line} */
.v2x .dir-ts-ic[data-tone="blue"],  .v2x .dir-ts-opt-ic[data-tone="blue"]  {--so-bg:#EAF2FD;--so-ink:#1B5BB5;--so-ln:#CFE0FA}
.v2x .dir-ts-ic[data-tone="cyan"],  .v2x .dir-ts-opt-ic[data-tone="cyan"]  {--so-bg:#E4F6FB;--so-ink:#0A6E88;--so-ln:#C2E9F4}
.v2x .dir-ts-ic[data-tone="indigo"],.v2x .dir-ts-opt-ic[data-tone="indigo"]{--so-bg:#EBEEFE;--so-ink:#3540B0;--so-ln:#D3D9FB}
.v2x .dir-ts-ic[data-tone="violet"],.v2x .dir-ts-opt-ic[data-tone="violet"]{--so-bg:#F0EBFE;--so-ink:#5B33C4;--so-ln:#DED2FB}
.v2x .dir-ts-ic[data-tone="amber"], .v2x .dir-ts-opt-ic[data-tone="amber"] {--so-bg:#FEF4E4;--so-ink:#A85B08;--so-ln:#FBE3C0}
body.theme-dark .v2x .dir-ts-ic[data-tone="blue"],body.theme-dark .v2x .dir-ts-opt-ic[data-tone="blue"]    {--so-bg:rgba(54,128,237,.18);--so-ink:#8CBEFA;--so-ln:rgba(96,164,245,.28)}
body.theme-dark .v2x .dir-ts-ic[data-tone="cyan"],body.theme-dark .v2x .dir-ts-opt-ic[data-tone="cyan"]    {--so-bg:rgba(6,182,212,.18); --so-ink:#7CD9EE;--so-ln:rgba(34,211,238,.30)}
body.theme-dark .v2x .dir-ts-ic[data-tone="indigo"],body.theme-dark .v2x .dir-ts-opt-ic[data-tone="indigo"]{--so-bg:rgba(79,70,229,.20); --so-ink:#A9B2FB;--so-ln:rgba(129,140,248,.32)}
body.theme-dark .v2x .dir-ts-ic[data-tone="violet"],body.theme-dark .v2x .dir-ts-opt-ic[data-tone="violet"]{--so-bg:rgba(124,77,240,.20);--so-ink:#BFA6FB;--so-ln:rgba(160,120,250,.32)}
body.theme-dark .v2x .dir-ts-ic[data-tone="amber"],body.theme-dark .v2x .dir-ts-opt-ic[data-tone="amber"]  {--so-bg:rgba(245,158,11,.20);--so-ink:#FBC97A;--so-ln:rgba(251,191,36,.32)}

/* ── Panel ── */
.v2x .dir-sort-menu{
  position:absolute;z-index:60;top:calc(100% + 10px);right:0;
  width:312px;padding:8px;
  background:linear-gradient(180deg,#F4F8FE 0%,#fff 34%);
  border:1px solid var(--v2-line);border-radius:20px;
  box-shadow:0 2px 6px rgba(15,23,42,.06),0 28px 60px -24px rgba(15,23,42,.42),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .2s ease,transform .22s cubic-bezier(.4,0,.2,1),visibility .22s;
}
body.theme-dark .v2x .dir-sort-menu{background:linear-gradient(180deg,rgba(28,31,42,.95) 0%,rgba(20,22,30,.95) 34%);border-color:rgba(255,255,255,.09);box-shadow:0 2px 6px rgba(0,0,0,.5),0 28px 60px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
/* Notch tying panel back to trigger */
.v2x .dir-sort-menu::before{content:'';position:absolute;top:-6px;right:22px;width:11px;height:11px;transform:rotate(45deg);background:#F4F8FE;border-left:1px solid var(--v2-line);border-top:1px solid var(--v2-line);border-radius:2px}
body.theme-dark .v2x .dir-sort-menu::before{background:rgba(28,31,42,.95);border-left-color:rgba(255,255,255,.09);border-top-color:rgba(255,255,255,.09)}
.v2x .dir-sortbox.is-open .dir-sort-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* Header */
.v2x .dir-ts-head{display:flex;align-items:center;padding:8px 12px 9px;margin:0 0 4px;border-bottom:1px solid var(--v2-line)}
body.theme-dark .v2x .dir-ts-head{border-bottom-color:rgba(255,255,255,.09)}
.v2x .dir-ts-head span{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--v2-muted)}

/* Options */
.v2x .dir-ts-list{display:flex;flex-direction:column;gap:2px}
.v2x .dir-ts-opt{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 11px;min-height:50px;
  background:transparent;border:0;border-radius:14px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--v2-muted);
  text-align:left;cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.v2x .dir-ts-opt-lb{flex:1;min-width:0;letter-spacing:-.005em}
.v2x .dir-ts-opt-ck{
  width:22px;height:22px;flex:none;padding:3px;border-radius:50%;
  color:#fff;background:var(--brand-blue);
  box-shadow:0 4px 10px -4px rgba(54,128,237,.9);
  opacity:0;transform:scale(.6);
  transition:opacity .18s ease,transform .22s var(--ease-spring);
}
.v2x .dir-ts-opt.is-on{background:#EAF2FD;color:var(--brand-blue-dark);font-weight:750;box-shadow:inset 0 0 0 1px #CFE0FA}
body.theme-dark .v2x .dir-ts-opt.is-on{background:rgba(54,128,237,.14);color:var(--brand-blue-light);box-shadow:inset 0 0 0 1px rgba(96,164,245,.28)}
.v2x .dir-ts-opt.is-on .dir-ts-opt-ck{opacity:1;transform:scale(1)}
body.theme-dark .v2x .dir-ts-opt-ck{box-shadow:none}
/* Left accent bar on the selected row */
.v2x .dir-ts-opt.is-on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--brand-blue),var(--brand-blue-dark))}
@media(hover:hover){
  .v2x .dir-ts-opt:hover{background:#F4F8FE;color:var(--v2-ink);transform:translateX(2px)}
  body.theme-dark .v2x .dir-ts-opt:hover{background:rgba(255,255,255,.05);color:var(--v2-ink)}
  .v2x .dir-ts-opt:hover .dir-ts-opt-ic{transform:scale(1.08)}
  .v2x .dir-ts-opt.is-on:hover{background:#EAF2FD;color:var(--brand-blue-dark);transform:none}
  body.theme-dark .v2x .dir-ts-opt.is-on:hover{background:rgba(54,128,237,.14);color:var(--brand-blue-light)}
}
.v2x .dir-ts-opt:active{transform:translateX(0) scale(.99)}
.v2x .dir-ts-opt:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px}

/* Context footer — describes what the current sort does */
.v2x .dir-ts-foot{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:13px;
  margin-top:8px;padding:14px 13px;border-radius:16px;
  background:#fff;
  box-shadow:inset 0 0 0 1px #CFE0FA,0 10px 22px -16px rgba(54,128,237,.8);
}
body.theme-dark .v2x .dir-ts-foot{background:rgba(28,31,42,.9);box-shadow:inset 0 0 0 1px rgba(96,164,245,.22),0 10px 22px -16px rgba(0,0,0,.7)}
.v2x .dir-ts-foot::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(110% 130% at 0% 100%,#EAF2FD 0%,transparent 62%)}
body.theme-dark .v2x .dir-ts-foot::before{background:radial-gradient(110% 130% at 0% 100%,rgba(54,128,237,.18) 0%,transparent 62%)}
.v2x .dir-ts-foot-ic{
  position:relative;width:38px;height:38px;border-radius:12px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand-blue) 0%,var(--brand-blue-dark) 100%);
  color:#fff;box-shadow:0 8px 16px -8px rgba(54,128,237,.85),inset 0 1px 0 rgba(255,255,255,.3);
}
.v2x .dir-ts-foot-ic svg{width:19px;height:19px}
.v2x .dir-ts-foot-tx{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.v2x .dir-ts-foot-tx b{font-size:13.5px;font-weight:800;color:var(--v2-ink);letter-spacing:-.014em;line-height:1.25}
.v2x .dir-ts-foot-tx>span{font-size:12.5px;font-weight:500;line-height:1.5;color:var(--v2-muted)}

@media(prefers-reduced-motion:reduce){.v2x .dir-sort-menu{transition:opacity .01s}}
@media (max-width:820px){
  .v2x .dir-sortbox,.v2x .dir-sort-btn{width:100%}
  .v2x .dir-sort-btn{justify-content:flex-start}
  .v2x .dir-sort-menu{left:0;right:0;width:auto;transform-origin:top center;border-radius:18px}
  .v2x .dir-sort-menu::before{right:auto;left:26px}
}

/* Views — segmented control with labeled active state */
.v2x .dir-tb-views{position:relative;display:inline-flex;background:var(--v2-accent-soft);border:1px solid var(--v2-line);border-radius:12px;padding:3px;gap:2px}
body.theme-dark .v2x .dir-tb-views{background:rgba(54,128,237,.1);border-color:rgba(255,255,255,.08)}
.v2x .dir-tb-views button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:34px;padding:0 12px;border:0;background:transparent;border-radius:9px;color:var(--v2-muted);cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:-.005em;transition:background .18s ease,color .18s ease,transform .18s var(--ease-spring),box-shadow .2s ease}
.v2x .dir-tb-views button svg{width:15px;height:15px;flex:0 0 auto;transition:transform .22s var(--ease-spring)}
.v2x .dir-tb-views-lbl{white-space:nowrap}
.v2x .dir-tb-views button:hover{color:var(--v2-ink);transform:translateY(-1px)}
.v2x .dir-tb-views button:hover svg{transform:scale(1.08)}
.v2x .dir-tb-views button.is-on,
.v2x .dir-tb-views button.is-on:hover{color:#fff;background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-blue-dark) 100%);box-shadow:0 6px 14px -4px rgba(54,128,237,.45),inset 0 1px 0 rgba(255,255,255,.2);transform:none}
.v2x .dir-tb-views button.is-on svg{color:#fff}
.v2x .dir-tb-views button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(54,128,237,.28)}
.v2x .dir-tb-views button.is-on:focus-visible{box-shadow:0 6px 14px -4px rgba(54,128,237,.45),inset 0 1px 0 rgba(255,255,255,.2),0 0 0 3px rgba(54,128,237,.28)}

/* ── Responsive ──
   On mobile the toolbar keeps a two-row layout: [count] on top, [sort ▸ views]
   on the second row. `nowrap` on the right cluster forces sort + views to
   share the row (sort flexes, views stays compact) — otherwise a full-width
   sort pill pushes views onto a third row and the toolbar reads as three
   floating pills instead of one control strip. */
@media (max-width:820px){
  .v2x .dir-tb{padding:12px 14px;gap:12px}
  .v2x .dir-tb-count-n{font-size:20px}
  .v2x .dir-tb-right{width:100%;flex-wrap:nowrap;gap:10px;justify-content:space-between}
  .v2x .dir-tb-sort,.v2x .dir-sortbox{flex:1 1 auto;min-width:0}
  .v2x .dir-tb-sort-lbl{display:none}
  .v2x .dir-tb-sel{flex:1 1 auto}
  .v2x .dir-tb-sel select{width:100%;min-width:0}
  .v2x .dir-tb-views{flex:0 0 auto;padding:2px}
  .v2x .dir-tb-views button{height:36px;min-width:38px;padding:0 10px}
}
@media (max-width:520px){
  .v2x .dir-tb{padding:10px 12px;gap:10px}
  .v2x .dir-tb-count-n{font-size:19px}
  .v2x .dir-tb-count-l{font-size:12.5px}
  .v2x .dir-tb-views-lbl{display:none}
  .v2x .dir-tb-views button{min-width:36px;padding:0 9px}
  .v2x .dir-sort-btn{padding:6px 12px 6px 8px;min-height:48px;gap:9px}
  .v2x .dir-ts-ic{width:28px;height:28px;border-radius:8px}
  .v2x .dir-ts-cap{font-size:9.5px}
  .v2x .dir-ts-val{font-size:13.5px}
}

/* ═════════════ TOOL CARD GRID (.dir-tc)  ·  homepage-showcase clone ═════════════
   Cascade (cards / row → card width):
     ≥ 1500   sidebars visible   ·  4-col  ·  ~230-260px
     1180-1500  sidebars stacked ·  4-col  ·  ~230-260px
     820-1180   sidebars stacked ·  3-col  ·  ~220-280px
     680-820    sidebars stacked ·  2-col  ·  ~350-400px
     ≤ 680      sidebars stacked ·  1-col  ·  full
   Sidebars stack at ≤1500 (see the shared responsive block below). */
.v2x .dir-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;transition:opacity .18s ease}
.v2x .dir-cards.is-loading{opacity:.6;pointer-events:none}

/* Tone system — cycles 8 hues per card position. Each card exposes
   --dtc-ink (mid-saturation for ink/hover), --dtc-ink-dark (darker for text),
   --dtc-bg (soft tint), --dtc-solid (gradient for solid fills). */
.v2x .dir-tc{--dtc-ink:#3680ED;--dtc-ink-dark:#2060C0;--dtc-bg:#eaf1fe;--dtc-solid:linear-gradient(135deg,#3680ED 0%,#2060C0 100%);--dtc-shadow:rgba(54,128,237,.42)}
.v2x .dir-tc:nth-child(8n+2){--dtc-ink:#7C3AED;--dtc-ink-dark:#5B21B6;--dtc-bg:#f3ecff;--dtc-solid:linear-gradient(135deg,#8B5CF6 0%,#6D28D9 100%);--dtc-shadow:rgba(139,92,246,.42)}
.v2x .dir-tc:nth-child(8n+3){--dtc-ink:#059669;--dtc-ink-dark:#047857;--dtc-bg:#dcfce7;--dtc-solid:linear-gradient(135deg,#10B981 0%,#047857 100%);--dtc-shadow:rgba(16,185,129,.42)}
.v2x .dir-tc:nth-child(8n+4){--dtc-ink:#C2410C;--dtc-ink-dark:#9A3412;--dtc-bg:#ffedd5;--dtc-solid:linear-gradient(135deg,#EA580C 0%,#9A3412 100%);--dtc-shadow:rgba(234,88,12,.42)}
.v2x .dir-tc:nth-child(8n+5){--dtc-ink:#DB2777;--dtc-ink-dark:#BE185D;--dtc-bg:#fce7f3;--dtc-solid:linear-gradient(135deg,#EC4899 0%,#BE185D 100%);--dtc-shadow:rgba(236,72,153,.42)}
.v2x .dir-tc:nth-child(8n+6){--dtc-ink:#0891B2;--dtc-ink-dark:#0E7490;--dtc-bg:#cffafe;--dtc-solid:linear-gradient(135deg,#06B6D4 0%,#0E7490 100%);--dtc-shadow:rgba(6,182,212,.42)}
.v2x .dir-tc:nth-child(8n+7){--dtc-ink:#4F46E5;--dtc-ink-dark:#4338CA;--dtc-bg:#e0e7ff;--dtc-solid:linear-gradient(135deg,#6366F1 0%,#4338CA 100%);--dtc-shadow:rgba(99,102,241,.42)}
.v2x .dir-tc:nth-child(8n+8){--dtc-ink:#B45309;--dtc-ink-dark:#92400E;--dtc-bg:#fef3c7;--dtc-solid:linear-gradient(135deg,#F59E0B 0%,#B45309 100%);--dtc-shadow:rgba(245,158,11,.42)}

/* Dark-mode tone adjustments — lighten inks so they read on dark surface;
   tints get a touch of alpha so they don't glare */
body.theme-dark .v2x .dir-tc{--dtc-ink:#60A4F5;--dtc-ink-dark:#8CBEFA;--dtc-bg:rgba(54,128,237,.16)}
body.theme-dark .v2x .dir-tc:nth-child(8n+2){--dtc-ink:#A78BFA;--dtc-ink-dark:#C4B5FD;--dtc-bg:rgba(139,92,246,.16)}
body.theme-dark .v2x .dir-tc:nth-child(8n+3){--dtc-ink:#34D399;--dtc-ink-dark:#6EE7B7;--dtc-bg:rgba(16,185,129,.16)}
body.theme-dark .v2x .dir-tc:nth-child(8n+4){--dtc-ink:#FB923C;--dtc-ink-dark:#FDBA74;--dtc-bg:rgba(234,88,12,.16)}
body.theme-dark .v2x .dir-tc:nth-child(8n+5){--dtc-ink:#F472B6;--dtc-ink-dark:#FBCFE8;--dtc-bg:rgba(236,72,153,.16)}
body.theme-dark .v2x .dir-tc:nth-child(8n+6){--dtc-ink:#22D3EE;--dtc-ink-dark:#67E8F9;--dtc-bg:rgba(6,182,212,.16)}
body.theme-dark .v2x .dir-tc:nth-child(8n+7){--dtc-ink:#818CF8;--dtc-ink-dark:#A5B4FC;--dtc-bg:rgba(99,102,241,.16)}
body.theme-dark .v2x .dir-tc:nth-child(8n+8){--dtc-ink:#FBBF24;--dtc-ink-dark:#FCD34D;--dtc-bg:rgba(245,158,11,.16)}

/* ── CARD SHELL ── pure white surface, subtle border, small radius,
   compact padding.  No tone wash behind — the reference reads as clean
   white cards; tone only appears in rank chip / logo tile / category /
   button. Rest state carries a very soft shadow so cards float rather
   than sit on the page; hover lifts and lights a gradient tone ring. */
/* ── Card shell (mirrors .hpx-card-showcase 1:1) ──
   Padding is 42px on top precisely because the rank chip and bookmark are
   absolute-positioned there. Cutting top padding without moving those
   controls first would overlap them onto the logo. */
.v2x .dir-tc{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:0;padding:42px 16px 18px;text-align:center;background:#fff;border:1px solid var(--v2-line);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(16,24,40,.04),0 10px 24px -20px rgba(16,24,40,.3);transition:transform .26s var(--ease-out),border-color .2s ease,box-shadow .26s ease;overflow:hidden}
body.theme-dark .v2x .dir-tc{background:rgba(28,31,42,.92);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4),0 10px 24px -20px rgba(0,0,0,.75)}

/* Whole-card click overlay */
.v2x .dir-tc-lnk{position:absolute;inset:0;z-index:1;border-radius:inherit;font-size:0}

/* Lift every content element above the click overlay — but keep the
   absolute-positioned rank chip and bookmark on their own layer, otherwise
   `align-items:center` on the flex column would drop them onto the logo.
   `:where()` keeps this at (0,1,0) so it cannot out-rank (0,2,0) styles. */
.v2x .dir-tc > *:not(:where(.dir-tc-lnk,.dir-tc-rank,.dir-tc-bk)){position:relative;z-index:1}

/* Rank chip — ABSOLUTE top-left, tone-tinted by default; cards 1/2/3 get
   the podium medal treatment (gold, silver, bronze) — a departure from the
   home page (which uses solid-brand for #1 and tone-cycle for the rest).
   Matches .hpx-sc-rank sizing exactly (24×24 min, 9px radius, 11.5px).
   The medal gradients use an inset white highlight to feel embossed and a
   coloured outer shadow to seat the pill against the card. Text contrast
   is picked per medal: dark on the bright golds/silvers, white on bronze. */
.v2x .dir-tc-rank{position:absolute;top:13px;left:13px;z-index:3;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:9px;background:var(--dtc-bg);color:var(--dtc-ink-dark);font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.005em;box-shadow:inset 0 0 0 1px var(--v2-line);transition:transform .3s var(--ease-spring)}
body.theme-dark .v2x .dir-tc-rank{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

@media (hover:hover){.v2x .dir-tc:hover .dir-tc-rank{transform:scale(1.1)}}

/* ─────────────────────────────────────────────────────────────────────────
   PODIUM MEDALS — applied to BOTH .dir-tc-rank (grid) AND .dir-lc-rank
   (list). Keyed on data-rank so paginated results only wear medals when the
   actual rank is 1/2/3 — a :nth-child based rule would mis-medal
   ranks 10/11/12 on page 2.
   ───────────────────────────────────────────────────────────────────────── */

/* 🥇 GOLD — rank 1 (grid card · list row · trending row) */
.v2x .dir-tc-rank[data-rank="1"],
.v2x .dir-lc-rank[data-rank="1"],
.v2x .dir-tr-rk[data-rank="1"]{
  background:linear-gradient(135deg,#FFE07A 0%,#F5C542 42%,#D69A00 100%);
  color:#523700;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(184,128,0,.35),0 4px 12px -3px rgba(214,154,0,.55)
}
/* 🥈 SILVER — rank 2 */
.v2x .dir-tc-rank[data-rank="2"],
.v2x .dir-lc-rank[data-rank="2"],
.v2x .dir-tr-rk[data-rank="2"]{
  background:linear-gradient(135deg,#F5F7FA 0%,#D6DBE3 42%,#A2AAB8 100%);
  color:#2D3446;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(120,130,145,.35),0 3px 10px -3px rgba(148,163,184,.5)
}
/* 🥉 BRONZE — rank 3 */
.v2x .dir-tc-rank[data-rank="3"],
.v2x .dir-lc-rank[data-rank="3"],
.v2x .dir-tr-rk[data-rank="3"]{
  background:linear-gradient(135deg,#E7A46E 0%,#C7743D 45%,#8B4E1F 100%);
  color:#fff;
  text-shadow:0 1px 1px rgba(80,40,10,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(120,60,20,.35),0 4px 12px -3px rgba(180,100,50,.5)
}

/* Dark mode — medals stay recognisable but drop the harsh gradient contrast
   so they don't glare on the dark surface. */
body.theme-dark .v2x .dir-tc-rank[data-rank="1"],
body.theme-dark .v2x .dir-lc-rank[data-rank="1"],
body.theme-dark .v2x .dir-tr-rk[data-rank="1"]{
  background:linear-gradient(135deg,#FFD35C 0%,#E5A800 55%,#B27F00 100%);
  color:#3A2400;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(80,50,0,.4),0 4px 14px -4px rgba(255,170,0,.42)
}
body.theme-dark .v2x .dir-tc-rank[data-rank="2"],
body.theme-dark .v2x .dir-lc-rank[data-rank="2"],
body.theme-dark .v2x .dir-tr-rk[data-rank="2"]{
  background:linear-gradient(135deg,#DEE4EF 0%,#AFB6C4 55%,#7B8395 100%);
  color:#1B2130;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(30,40,60,.35),0 3px 12px -4px rgba(180,190,210,.35)
}
body.theme-dark .v2x .dir-tc-rank[data-rank="3"],
body.theme-dark .v2x .dir-lc-rank[data-rank="3"],
body.theme-dark .v2x .dir-tr-rk[data-rank="3"]{
  background:linear-gradient(135deg,#D08553 0%,#A55E2A 55%,#6E3E17 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(60,30,10,.5),0 4px 14px -4px rgba(200,110,50,.4)
}

/* Bookmark — ABSOLUTE top-right, neutral, small. */
.v2x .dir-tc-bk{position:absolute;top:11px;right:11px;z-index:3;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:#c2c6d4;cursor:pointer;transition:background .18s ease,color .18s ease,transform .2s var(--ease-spring);font-family:inherit}
.v2x .dir-tc-bk:hover{background:var(--v2-accent-soft);color:var(--brand-blue);transform:scale(1.1)}
.v2x .dir-tc-bk.is-on{color:var(--brand-blue);animation:dir-tc-bk-pop .35s var(--ease-spring)}
@keyframes dir-tc-bk-pop{0%{transform:scale(1)}50%{transform:scale(1.28)}100%{transform:scale(1)}}
body.theme-dark .v2x .dir-tc-bk{color:#5c6270}
body.theme-dark .v2x .dir-tc-bk:hover{background:rgba(54,128,237,.16);color:var(--brand-blue-light)}
body.theme-dark .v2x .dir-tc-bk.is-on{color:var(--brand-blue-light)}

/* Logo tile — tone-tinted square, 66×66, radius 20px (matches .hpx-sc-logo). */
.v2x .dir-tc-logo{display:grid;place-items:center;width:66px;height:66px;margin-bottom:14px;border-radius:20px;background:var(--dtc-bg);color:var(--dtc-ink-dark);font-size:30px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);transition:transform .28s var(--ease-out),box-shadow .24s ease;flex:0 0 auto;overflow:hidden}
body.theme-dark .v2x .dir-tc-logo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.v2x .dir-tc-logo img{width:60%;height:60%;object-fit:contain;display:block}
.v2x .dir-tc-mono{display:grid;place-items:center;width:100%;height:100%;color:var(--dtc-ink-dark);font-size:26px;font-weight:800;line-height:1;letter-spacing:-.02em}

/* Name — 15.5px / weight 760 / -.016em (matches .hpx-sc-name). One line, ellipsised. */
.v2x .dir-tc-nm{display:flex;align-items:center;justify-content:center;gap:5px;max-width:100%;min-height:21px;margin:0;font-size:15.5px;font-weight:760;line-height:1.35;letter-spacing:-.016em;color:var(--v2-ink);transition:color .2s ease}
.v2x .dir-tc .dir-tc-nm a{color:inherit;text-decoration:none;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;transition:color .2s ease}
@media (hover:hover){.v2x .dir-tc:hover .dir-tc-nm{color:var(--dtc-ink)}}
body.theme-dark .v2x .dir-tc:hover .dir-tc-nm{color:#fff}
.v2x .dir-tc-vrf{display:inline-flex;flex:0 0 auto;transform:translateY(-1px)}

/* Category — tone-colored, one line, holds height when absent.
   Matches .hpx-sc-cat: 12px / weight 640, tone-ink color. */
.v2x .dir-tc .dir-tc-cat{display:block;max-width:100%;margin:7px 0 0;min-height:17px;font-size:12px;font-weight:640;line-height:1.4;color:var(--dtc-ink-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;transition:color .18s ease,text-decoration-color .18s ease}
.v2x .dir-tc a.dir-tc-cat:hover{color:var(--brand-blue-dark);text-decoration:underline;text-underline-offset:3px}
body.theme-dark .v2x .dir-tc .dir-tc-cat{color:var(--dtc-ink)}
body.theme-dark .v2x .dir-tc a.dir-tc-cat:hover{color:var(--brand-blue-light)}

/* Description — 2-line clamp, reserved height, 12.5px / 1.55. */
.v2x .dir-tc-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 0;min-height:calc(2 * 1.55em);font-size:12.5px;line-height:1.55;color:var(--v2-muted);max-width:100%}

/* Facts row — rating + pricing pill; centred */
.v2x .dir-tc-meta{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.v2x .dir-tc-rate{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:640;color:var(--v2-muted)}
.v2x .dir-tc-rate svg{color:var(--warning);filter:drop-shadow(0 1px 2px rgba(245,158,11,.25))}
.v2x .dir-tc-rate b{font-weight:780;color:var(--v2-ink);letter-spacing:-.005em}
.v2x .dir-tc-rate .rev{font-size:11px;font-weight:600;color:#8a8a99}
body.theme-dark .v2x .dir-tc-rate .rev{color:#6b7280}

/* Pricing pill — tone-tinted per pricing kind.
   Values are the EXACT --hpx-t-*-{ink,bg,line} tokens the home page
   compiles from hp_tokens (captured live 2026-08-05 from a homepage card
   inspection).  Using the same hex/rgba trio here means a "Freemium" chip
   in the AI Directory is pixel-identical to a "Freemium" chip on /.
   Light values are OPAQUE (solid hex), dark values are semi-transparent
   rgba so the tint reads against the dark card surface. */
.v2x .dir-tc-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:720;line-height:1.5;letter-spacing:.01em;white-space:nowrap;box-shadow:inset 0 0 0 1px transparent}
/* ── Light mode — matches --hpx-t-{tone}-{ink,bg,line} on the homepage ── */
.v2x .dir-tc-pill[data-tone="blue"]    {color:#1B5BB5;background:#EAF2FD;box-shadow:inset 0 0 0 1px #CFE0FA}
.v2x .dir-tc-pill[data-tone="emerald"] {color:#08795A;background:#E6F8F1;box-shadow:inset 0 0 0 1px #C6EEDF}
.v2x .dir-tc-pill[data-tone="teal"]    {color:#0B6E68;background:#E3F6F5;box-shadow:inset 0 0 0 1px #C1EAE7}
.v2x .dir-tc-pill[data-tone="orange"]  {color:#B4500C;background:#FEF0E6;box-shadow:inset 0 0 0 1px #FBD9C2}
.v2x .dir-tc-pill[data-tone="rose"]    {color:#B31D3C;background:#FEECEF;box-shadow:inset 0 0 0 1px #FBD2DA}
.v2x .dir-tc-pill[data-tone="cyan"]    {color:#0A6E88;background:#E4F6FB;box-shadow:inset 0 0 0 1px #C2E9F4}
.v2x .dir-tc-pill[data-tone="violet"]  {color:#5B33C4;background:#F0EBFE;box-shadow:inset 0 0 0 1px #DED2FB}
.v2x .dir-tc-pill[data-tone="amber"]   {color:#A85B08;background:#FEF4E4;box-shadow:inset 0 0 0 1px #FBE3C0}
.v2x .dir-tc-pill[data-tone="indigo"]  {color:#3540B0;background:#EBEEFE;box-shadow:inset 0 0 0 1px #D3D9FB}
.v2x .dir-tc-pill[data-tone="slate"]   {color:#38455A;background:#EFF2F6;box-shadow:inset 0 0 0 1px #DCE2EA}
/* ── Dark mode — matches --hpx-t-*-* dark twins ── */
body.theme-dark .v2x .dir-tc-pill[data-tone="blue"]    {color:#8CBEFA;background:rgba(54,128,237,.18); box-shadow:inset 0 0 0 1px rgba(96,164,245,.28)}
body.theme-dark .v2x .dir-tc-pill[data-tone="emerald"] {color:#6EE7BE;background:rgba(16,185,129,.18); box-shadow:inset 0 0 0 1px rgba(52,211,153,.30)}
body.theme-dark .v2x .dir-tc-pill[data-tone="teal"]    {color:#79DDD5;background:rgba(20,184,166,.18); box-shadow:inset 0 0 0 1px rgba(45,212,191,.30)}
body.theme-dark .v2x .dir-tc-pill[data-tone="orange"]  {color:#FBB07A;background:rgba(249,115,22,.20); box-shadow:inset 0 0 0 1px rgba(251,146,60,.32)}
body.theme-dark .v2x .dir-tc-pill[data-tone="rose"]    {color:#FB9BB0;background:rgba(244,63,94,.18);  box-shadow:inset 0 0 0 1px rgba(251,113,133,.30)}
body.theme-dark .v2x .dir-tc-pill[data-tone="cyan"]    {color:#7CD9EE;background:rgba(6,182,212,.18);  box-shadow:inset 0 0 0 1px rgba(34,211,238,.30)}
body.theme-dark .v2x .dir-tc-pill[data-tone="violet"]  {color:#BFA6FB;background:rgba(124,77,240,.20); box-shadow:inset 0 0 0 1px rgba(160,120,250,.32)}
body.theme-dark .v2x .dir-tc-pill[data-tone="amber"]   {color:#FBC97A;background:rgba(245,158,11,.20); box-shadow:inset 0 0 0 1px rgba(251,191,36,.32)}
body.theme-dark .v2x .dir-tc-pill[data-tone="indigo"]  {color:#A9B2FB;background:rgba(79,70,229,.20);  box-shadow:inset 0 0 0 1px rgba(129,140,248,.32)}
body.theme-dark .v2x .dir-tc-pill[data-tone="slate"]   {color:#B4BDCA;background:rgba(148,163,184,.16);box-shadow:inset 0 0 0 1px rgba(148,163,184,.28)}

/* Try Now button — SOLID tone-ink fill + subtle white sheen overlay, matching
   .hpx-sc-go exactly. Pinned to the card bottom with margin-top:auto so a
   card whose description clamps to 1 line still lines its button up with the
   next card's button. Colour set at (0,2,0) with explicit :hover/:focus so
   nothing drags the label into inherit. */
.v2x .dir-tc-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:auto;padding:11px 14px;border:0;border-radius:13px;background-color:var(--dtc-ink);background-image:linear-gradient(160deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 58%);color:#fff;font-size:13px;font-weight:720;letter-spacing:-.006em;text-decoration:none;cursor:pointer;box-shadow:0 8px 18px -10px var(--dtc-ink);transition:background-image .2s ease,box-shadow .22s ease,gap .2s ease,transform .2s var(--ease-out);font-family:inherit}
.v2x .dir-tc-meta + .dir-tc-btn{margin-top:14px}
.v2x .dir-tc-btn,.v2x .dir-tc-btn:hover,.v2x .dir-tc-btn:focus,.v2x .dir-tc-btn:focus-visible,.v2x .dir-tc-btn:active,.v2x .dir-tc-btn:visited{color:#fff;text-decoration:none}
.v2x .dir-tc-btn svg{flex:0 0 auto;color:#fff;width:14px;height:14px}
.v2x .dir-tc-btn .arr{transition:transform .22s var(--ease-out)}
/* Dark mode — the tone-ink twins are lightened to serve as ink on a dark
   surface, so white on them would measure ~1.5:1. A neutral black scrim
   layered UNDER the sheen pulls contrast back without desaturating the hue. */
body.theme-dark .v2x .dir-tc-btn{background-image:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),linear-gradient(160deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 58%);box-shadow:0 8px 18px -12px rgba(0,0,0,.9)}

/* ── Card hover ── */
@media (hover:hover){
  .v2x .dir-tc:hover{transform:translateY(-6px);border-color:var(--v2-line);box-shadow:0 26px 46px -30px var(--dtc-ink),0 8px 18px -10px rgba(16,24,40,.08)}
  .v2x .dir-tc:hover .dir-tc-logo{transform:translateY(-2px) scale(1.06);box-shadow:inset 0 0 0 1px var(--dtc-ink)}
  .v2x .dir-tc:hover .dir-tc-btn{gap:10px;transform:translateY(-1px);background-image:linear-gradient(160deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.04) 62%);box-shadow:0 14px 26px -10px var(--dtc-ink)}
  .v2x .dir-tc:hover .dir-tc-btn .arr{transform:translateX(3px)}
  /* (0,4,1) beats the (0,3,1) dark scrim so dark mode gets the sheen change too */
  body.theme-dark .v2x .dir-tc:hover .dir-tc-btn{background-image:linear-gradient(0deg,rgba(0,0,0,.44),rgba(0,0,0,.44)),linear-gradient(160deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.04) 62%);box-shadow:0 14px 26px -12px rgba(0,0,0,.95)}
  body.theme-dark .v2x .dir-tc:hover{box-shadow:0 26px 46px -30px rgba(0,0,0,.88)}
}
.v2x .dir-tc:focus-visible{outline:none;transform:translateY(-6px);border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(54,128,237,.28),0 8px 18px -10px rgba(16,24,40,.1)}
.v2x .dir-tc:active .dir-tc-btn{transform:scale(.98)}

/* ═════════════ TRENDING RAIL (.dir-tr)  ·  premium redesign ═════════════
   Leaderboard-style rail: flame + "Trending Tools" + LIVE chip in the head,
   5 numbered rows below (podium medals for 1/2/3 via the shared [data-rank]
   rules), each with a tone-tinted logo, name + category subtitle, star
   rating on the right, and a chevron that reveals on hover. Foot link with
   a labelled "View all trending" arrow-in-pill.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x .dir-tr-box{position:relative;background:linear-gradient(180deg,#F8FBFF 0%,#fff 24%);border:1px solid var(--v2-line);border-radius:20px;padding:16px 14px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -20px rgba(16,24,40,.22);overflow:hidden}
body.theme-dark .v2x .dir-tr-box{background:linear-gradient(180deg,rgba(38,42,54,.9) 0%,rgba(28,31,42,.88) 24%);border-color:rgba(255,255,255,.08);box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -18px rgba(0,0,0,.65)}
/* Soft brand wash rising from the top-right corner */
.v2x .dir-tr-box::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 100% 0%,rgba(234,88,12,.06) 0%,transparent 55%),radial-gradient(120% 60% at 0% 100%,rgba(54,128,237,.06) 0%,transparent 55%)}
body.theme-dark .v2x .dir-tr-box::before{background:radial-gradient(120% 60% at 100% 0%,rgba(234,88,12,.1) 0%,transparent 55%),radial-gradient(120% 60% at 0% 100%,rgba(54,128,237,.09) 0%,transparent 55%)}
.v2x .dir-tr-box > *{position:relative}

/* ── Header ── */
.v2x .dir-tr-head{display:flex;align-items:center;gap:9px;padding:2px 4px 12px;margin-bottom:8px;border-bottom:1px solid var(--v2-line)}
body.theme-dark .v2x .dir-tr-head{border-bottom-color:rgba(255,255,255,.08)}

.v2x .dir-tr-pulse{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 45%,#EA580C 100%);color:#fff;box-shadow:0 6px 14px -4px rgba(234,88,12,.55),inset 0 1px 0 rgba(255,255,255,.35);animation:dir-tr-pulse 2.4s ease-in-out infinite}
.v2x .dir-tr-pulse svg{width:16px;height:16px}
@keyframes dir-tr-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* halo pulse behind the chip */
.v2x .dir-tr-pulse::after{content:'';position:absolute;inset:-6px;border-radius:15px;background:radial-gradient(circle,rgba(234,88,12,.35),transparent 65%);opacity:.55;animation:dir-tr-halo 2.4s ease-in-out infinite;z-index:-1}
@keyframes dir-tr-halo{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.25);opacity:.15}}

.v2x .dir-tr-titlewrap{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.v2x .dir-tr-title{font-size:15px;font-weight:800;color:var(--v2-ink);letter-spacing:-.008em;line-height:1.2}
.v2x .dir-tr-sub{font-size:10.5px;font-weight:500;color:var(--v2-muted);letter-spacing:.02em;line-height:1.3}

.v2x .dir-tr-live{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 7px;border-radius:99px;background:rgba(234,88,12,.14);color:#B4500C;font-size:9.5px;font-weight:800;letter-spacing:.08em;box-shadow:inset 0 0 0 1px rgba(234,88,12,.24)}
body.theme-dark .v2x .dir-tr-live{background:rgba(234,88,12,.2);color:#FBB07A;box-shadow:inset 0 0 0 1px rgba(251,146,60,.28)}
.v2x .dir-tr-live-dot{width:6px;height:6px;border-radius:50%;background:#EA580C;box-shadow:0 0 0 2px rgba(234,88,12,.25);animation:dir-tr-blink 1.6s ease-in-out infinite}
body.theme-dark .v2x .dir-tr-live-dot{background:#FB923C}
@keyframes dir-tr-blink{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Rows ── */
.v2x .dir-tr-list{display:flex;flex-direction:column;gap:2px}

.v2x .dir-tr-row{position:relative;display:flex;align-items:center;gap:10px;padding:10px 8px;color:inherit;text-decoration:none;border-radius:12px;transition:background .18s ease,transform .2s var(--ease-spring),box-shadow .18s ease;overflow:hidden}
.v2x .dir-tr-row + .dir-tr-row{margin-top:2px}
/* Divider between rows — subtle line above each after the first */
.v2x .dir-tr-row + .dir-tr-row::before{content:'';position:absolute;top:-1px;left:8px;right:8px;height:1px;background:var(--v2-line);opacity:.6}
body.theme-dark .v2x .dir-tr-row + .dir-tr-row::before{background:rgba(255,255,255,.05)}
@media (hover:hover){
  .v2x .dir-tr-row:hover{background:linear-gradient(90deg,rgba(54,128,237,.08),rgba(54,128,237,.03));transform:translateX(3px);text-decoration:none;box-shadow:0 4px 12px -6px rgba(54,128,237,.28)}
  body.theme-dark .v2x .dir-tr-row:hover{background:linear-gradient(90deg,rgba(54,128,237,.14),rgba(54,128,237,.05))}
  .v2x .dir-tr-row:hover .dir-tr-lg{transform:scale(1.08)}
  .v2x .dir-tr-row:hover .dir-tr-arr{opacity:1;transform:translateX(0)}
  .v2x .dir-tr-row:hover .dir-tr-nm{color:var(--brand-blue-dark)}
  body.theme-dark .v2x .dir-tr-row:hover .dir-tr-nm{color:var(--brand-blue-light)}
  .v2x .dir-tr-row:hover .dir-tr-rt{opacity:0;transform:translateX(-6px)}
}
.v2x .dir-tr-row + .dir-tr-row:hover::before{opacity:0}

/* Rank chip — tone-tinted default; podium medals (1/2/3) via shared [data-rank] rule.
   The default (4+) uses the same style token so the transition looks intentional. */
.v2x .dir-tr-rk{flex:0 0 auto;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:var(--v2-accent-soft);color:var(--brand-blue-dark);font-size:11.5px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:transform .25s var(--ease-spring)}
body.theme-dark .v2x .dir-tr-rk{background:rgba(54,128,237,.16);color:var(--brand-blue-light);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
@media (hover:hover){.v2x .dir-tr-row:hover .dir-tr-rk{transform:scale(1.1)}}

/* Logo tile — bigger, tone-tinted background, subtle inner highlight */
.v2x .dir-tr-lg{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--v2-accent-soft);display:inline-grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.35);transition:transform .3s var(--ease-spring)}
body.theme-dark .v2x .dir-tr-lg{background:rgba(54,128,237,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.04)}
.v2x .dir-tr-lg img{width:76%;height:76%;object-fit:contain;display:block}
.v2x .dir-tr-mono{font-size:13px;font-weight:800;color:var(--brand-blue-dark);letter-spacing:-.02em}
body.theme-dark .v2x .dir-tr-mono{color:var(--brand-blue-light)}

/* Middle — name + optional category subtitle.
   Name allowed to wrap to 2 lines (was single-line ellipsis) so
   "GitHub Copilot" doesn't collapse to "GitHub C..." in the sidebar. Category
   stays 1-line since it's secondary information — if it clips, name still
   carries the full identity. */
.v2x .dir-tr-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.v2x .dir-tr-nm{font-size:13.5px;font-weight:700;color:var(--v2-ink);letter-spacing:-.008em;line-height:1.25;transition:color .18s ease;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
/* Category — up to 2 lines, no ellipsis. A truncated category ("AI Chatbots
   & A...") tells you less than the name already does; letting it wrap keeps
   the whole subtitle visible with only a small extra row height. */
.v2x .dir-tr-cat{font-size:11px;font-weight:500;color:var(--v2-muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}

/* Right — rating pill (visible at rest) + arrow chevron (fades in on hover) */
.v2x .dir-tr-rt{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:99px;background:rgba(245,158,11,.14);color:#A85B08;font-size:11px;font-weight:800;letter-spacing:-.005em;box-shadow:inset 0 0 0 1px rgba(245,158,11,.2);transition:opacity .2s ease,transform .2s ease}
body.theme-dark .v2x .dir-tr-rt{background:rgba(245,158,11,.2);color:#FBC97A;box-shadow:inset 0 0 0 1px rgba(251,191,36,.28)}
.v2x .dir-tr-rt svg{width:10px;height:10px;color:#F59E0B}
body.theme-dark .v2x .dir-tr-rt svg{color:#FBBF24}
.v2x .dir-tr-rt b{font-weight:800}

.v2x .dir-tr-arr{position:absolute;right:10px;flex:0 0 auto;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--brand-blue);color:#fff;opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .22s var(--ease-spring);pointer-events:none;box-shadow:0 4px 10px -2px rgba(54,128,237,.45)}
.v2x .dir-tr-arr svg{width:12px;height:12px}
body.theme-dark .v2x .dir-tr-arr{background:var(--brand-blue-light);color:#0F1420}

/* ── Foot link ── */
.v2x .dir-tr-more{display:inline-flex;align-items:center;justify-content:space-between;width:100%;gap:6px;margin-top:10px;padding:10px 12px;border-radius:12px;background:linear-gradient(90deg,rgba(54,128,237,.06) 0%,rgba(54,128,237,.02) 100%);border:1px dashed rgba(54,128,237,.28);font-size:13px;font-weight:700;color:var(--brand-blue-dark);text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .22s ease}
body.theme-dark .v2x .dir-tr-more{background:linear-gradient(90deg,rgba(54,128,237,.14) 0%,rgba(54,128,237,.04) 100%);border-color:rgba(96,164,245,.35);color:var(--brand-blue-light)}
.v2x .dir-tr-more:hover{background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-blue-dark) 100%);border-color:transparent;color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(54,128,237,.5)}
.v2x .dir-tr-more:hover,.v2x .dir-tr-more:hover span{color:#fff}
.v2x .dir-tr-more svg{width:14px;height:14px;transition:transform .22s var(--ease-spring)}
.v2x .dir-tr-more:hover svg{transform:translateX(3px)}

/* ═════════════ LIST MODE (.dir-lx / .dir-lc)  ·  tone-cycled per row ═════════════
   Each row picks up a palette hue (blue → violet → emerald → orange → rose →
   cyan → indigo → amber) via the same --dtc-* cycle the grid uses. Rank chip,
   logo tile, letter fallback, category pill, Try Now button and the hover
   shadow all read from the tone. Podium medals (rank 1/2/3) override the
   default rank via the shared [data-rank] rules above. */
.v2x .dir-lx{display:flex;flex-direction:column;gap:12px}

/* ── Per-row tone cycle (matches .dir-tc cycle) ── */
.v2x .dir-lc{--dtc-ink:#3680ED;--dtc-ink-dark:#2060C0;--dtc-bg:#eaf1fe;--dtc-solid:linear-gradient(135deg,#3680ED 0%,#2060C0 100%);--dtc-shadow:rgba(54,128,237,.42)}
.v2x .dir-lc:nth-child(8n+2){--dtc-ink:#7C3AED;--dtc-ink-dark:#5B21B6;--dtc-bg:#f3ecff;--dtc-solid:linear-gradient(135deg,#8B5CF6 0%,#6D28D9 100%);--dtc-shadow:rgba(139,92,246,.42)}
.v2x .dir-lc:nth-child(8n+3){--dtc-ink:#059669;--dtc-ink-dark:#047857;--dtc-bg:#dcfce7;--dtc-solid:linear-gradient(135deg,#10B981 0%,#047857 100%);--dtc-shadow:rgba(16,185,129,.42)}
.v2x .dir-lc:nth-child(8n+4){--dtc-ink:#C2410C;--dtc-ink-dark:#9A3412;--dtc-bg:#ffedd5;--dtc-solid:linear-gradient(135deg,#EA580C 0%,#9A3412 100%);--dtc-shadow:rgba(234,88,12,.42)}
.v2x .dir-lc:nth-child(8n+5){--dtc-ink:#DB2777;--dtc-ink-dark:#BE185D;--dtc-bg:#fce7f3;--dtc-solid:linear-gradient(135deg,#EC4899 0%,#BE185D 100%);--dtc-shadow:rgba(236,72,153,.42)}
.v2x .dir-lc:nth-child(8n+6){--dtc-ink:#0891B2;--dtc-ink-dark:#0E7490;--dtc-bg:#cffafe;--dtc-solid:linear-gradient(135deg,#06B6D4 0%,#0E7490 100%);--dtc-shadow:rgba(6,182,212,.42)}
.v2x .dir-lc:nth-child(8n+7){--dtc-ink:#4F46E5;--dtc-ink-dark:#4338CA;--dtc-bg:#e0e7ff;--dtc-solid:linear-gradient(135deg,#6366F1 0%,#4338CA 100%);--dtc-shadow:rgba(99,102,241,.42)}
.v2x .dir-lc:nth-child(8n+8){--dtc-ink:#B45309;--dtc-ink-dark:#92400E;--dtc-bg:#fef3c7;--dtc-solid:linear-gradient(135deg,#F59E0B 0%,#B45309 100%);--dtc-shadow:rgba(245,158,11,.42)}
/* dark-mode tone adjustments — lighten inks to read on dark surface */
body.theme-dark .v2x .dir-lc{--dtc-ink:#60A4F5;--dtc-ink-dark:#8CBEFA;--dtc-bg:rgba(54,128,237,.16)}
body.theme-dark .v2x .dir-lc:nth-child(8n+2){--dtc-ink:#A78BFA;--dtc-ink-dark:#C4B5FD;--dtc-bg:rgba(139,92,246,.16)}
body.theme-dark .v2x .dir-lc:nth-child(8n+3){--dtc-ink:#34D399;--dtc-ink-dark:#6EE7B7;--dtc-bg:rgba(16,185,129,.16)}
body.theme-dark .v2x .dir-lc:nth-child(8n+4){--dtc-ink:#FB923C;--dtc-ink-dark:#FDBA74;--dtc-bg:rgba(234,88,12,.16)}
body.theme-dark .v2x .dir-lc:nth-child(8n+5){--dtc-ink:#F472B6;--dtc-ink-dark:#FBCFE8;--dtc-bg:rgba(236,72,153,.16)}
body.theme-dark .v2x .dir-lc:nth-child(8n+6){--dtc-ink:#22D3EE;--dtc-ink-dark:#67E8F9;--dtc-bg:rgba(6,182,212,.16)}
body.theme-dark .v2x .dir-lc:nth-child(8n+7){--dtc-ink:#818CF8;--dtc-ink-dark:#A5B4FC;--dtc-bg:rgba(99,102,241,.16)}
body.theme-dark .v2x .dir-lc:nth-child(8n+8){--dtc-ink:#FBBF24;--dtc-ink-dark:#FCD34D;--dtc-bg:rgba(245,158,11,.16)}

/* Row shell */
.v2x .dir-lc{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px;background:#fff;border:1px solid var(--v2-line);border-radius:16px;transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease;overflow:hidden}
body.theme-dark .v2x .dir-lc{background:rgba(28,31,42,.9);border-color:rgba(255,255,255,.08)}
@media (hover:hover){
  .v2x .dir-lc:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px var(--dtc-shadow);border-color:transparent}
  .v2x .dir-lc:hover .dir-lc-logo{transform:scale(1.05);box-shadow:inset 0 0 0 1px var(--dtc-ink)}
  .v2x .dir-lc:hover .dir-lc-side .dir-tc-btn{transform:translateY(-1px);box-shadow:0 14px 26px -10px var(--dtc-ink)}
}
.v2x .dir-lc-lnk{position:absolute;inset:0;z-index:1;border-radius:inherit;font-size:0}
.v2x .dir-lc > :not(.dir-lc-lnk){position:relative;z-index:2}

/* Rank chip (default; medals for 1/2/3 override via [data-rank] rules) */
.v2x .dir-lc-rank{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--dtc-bg);color:var(--dtc-ink-dark);font-size:12.5px;font-weight:800;display:inline-grid;place-items:center;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:transform .25s var(--ease-spring)}
body.theme-dark .v2x .dir-lc-rank{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
@media (hover:hover){.v2x .dir-lc:hover .dir-lc-rank{transform:scale(1.06)}}

/* Logo tile — tone-tinted */
.v2x .dir-lc-logo{flex:0 0 auto;width:52px;height:52px;border-radius:12px;background:var(--dtc-bg);display:inline-grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.25);transition:transform .3s var(--ease-spring),box-shadow .24s ease}
body.theme-dark .v2x .dir-lc-logo{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.04)}
.v2x .dir-lc-logo img{width:70%;height:70%;object-fit:contain}
.v2x .dir-lc-mono{font-size:20px;font-weight:800;color:var(--dtc-ink-dark);letter-spacing:-.02em}

.v2x .dir-lc-mid{flex:1 1 auto;min-width:0}
.v2x .dir-lc-nmrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v2x .dir-lc .dir-lc-nm{color:var(--v2-ink);font-size:16px;font-weight:800;letter-spacing:-.01em;text-decoration:none;transition:color .18s ease}
.v2x .dir-lc .dir-lc-nm:hover{color:var(--dtc-ink-dark);text-decoration:none}
body.theme-dark .v2x .dir-lc .dir-lc-nm:hover{color:var(--dtc-ink)}
.v2x .dir-lc-vrf{display:inline-flex}

/* Category pill — tone-tinted, matches row hue */
.v2x .dir-lc .dir-lc-cat{padding:2px 10px;border-radius:99px;background:var(--dtc-bg);color:var(--dtc-ink-dark);font-size:11.5px;font-weight:700;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:transform .2s var(--ease-spring),box-shadow .18s ease}
.v2x .dir-lc a.dir-lc-cat:hover{background:var(--dtc-ink);color:#fff;text-decoration:none;box-shadow:0 4px 10px -3px var(--dtc-shadow)}
body.theme-dark .v2x .dir-lc .dir-lc-cat{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}

.v2x .dir-lc-desc{margin:4px 0 0;font-size:13px;color:var(--v2-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v2x .dir-lc-meta{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.v2x .dir-lc-side{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px}
.v2x .dir-lc-side .dir-tc-bk{position:static;width:36px;height:36px;border:1px solid var(--v2-line);border-radius:10px;background:#fff}
body.theme-dark .v2x .dir-lc-side .dir-tc-bk{background:rgba(28,31,42,.9);border-color:rgba(255,255,255,.1)}

/* Try Now button — solid tone-ink fill + subtle sheen (matches grid card) */
.v2x .dir-lc-side .dir-tc-btn{margin-top:0;width:auto;padding:10px 18px;font-size:13.5px;background-color:var(--dtc-ink);background-image:linear-gradient(160deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 58%);box-shadow:0 8px 18px -10px var(--dtc-ink)}
body.theme-dark .v2x .dir-lc-side .dir-tc-btn{background-image:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),linear-gradient(160deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 58%);box-shadow:0 8px 18px -12px rgba(0,0,0,.9)}
@media (hover:hover){
  body.theme-dark .v2x .dir-lc:hover .dir-lc-side .dir-tc-btn{background-image:linear-gradient(0deg,rgba(0,0,0,.44),rgba(0,0,0,.44)),linear-gradient(160deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.04) 62%)}
}

/* ═════════════ EMPTY STATE ═════════════ */
.v2x .dir-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 30px;background:#fff;border:1px dashed var(--v2-line);border-radius:20px;color:var(--v2-muted)}
body.theme-dark .v2x .dir-empty{background:rgba(28,31,42,.85);border-color:rgba(255,255,255,.1)}
.v2x .dir-empty-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--v2-accent-soft);color:var(--brand-blue);margin-bottom:14px}
body.theme-dark .v2x .dir-empty-ic{background:rgba(54,128,237,.14);color:var(--brand-blue-light)}
.v2x .dir-empty h3{margin:0;font-size:19px;color:var(--v2-ink);font-weight:800;letter-spacing:-.012em}
.v2x .dir-empty p{margin:6px 0 20px;font-size:14px}
.v2x .dir-empty .dir-fx-apply{max-width:220px}

/* ═════════════ PAGINATION (.dir-pg) ═════════════ */
.v2x .dir-pg{margin-top:26px;display:flex;justify-content:center}
.v2x .dir-pg .pagination{display:inline-flex;align-items:center;gap:4px;padding:6px;margin:0;list-style:none;background:#fff;border:1px solid var(--v2-line);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
body.theme-dark .v2x .dir-pg .pagination{background:rgba(28,31,42,.85);border-color:rgba(255,255,255,.08)}
.v2x .dir-pg .page-item{margin:0}
.v2x .dir-pg .page-item .page-link,.v2x .dir-pg .page-item span.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border:0;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--v2-muted);background:transparent;text-decoration:none;line-height:1;transition:background .18s ease,color .18s ease,transform .18s var(--ease-spring)}
.v2x .dir-pg .page-item .page-link:hover{background:var(--v2-accent-soft);color:var(--brand-blue-dark);transform:translateY(-1px);text-decoration:none}
body.theme-dark .v2x .dir-pg .page-item .page-link:hover{background:rgba(54,128,237,.14);color:var(--brand-blue-light)}
.v2x .dir-pg .page-item.active .page-link{background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-blue-dark) 100%);color:#fff;box-shadow:0 6px 16px -6px rgba(54,128,237,.45)}
.v2x .dir-pg .page-item.disabled .page-link,.v2x .dir-pg .page-item.disabled span.page-link{color:#c9ced9;pointer-events:none;background:transparent}
body.theme-dark .v2x .dir-pg .page-item.disabled .page-link{color:#4a5162}
.v2x .dir-pg .page-item .page-link[rel=prev]::before,.v2x .dir-pg .page-item .page-link[rel=next]::after{content:'';display:inline-block;width:8px;height:8px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:rotate(-135deg);opacity:.9}
.v2x .dir-pg .page-item .page-link[rel=next]::after{transform:rotate(45deg)}
/* hide the "Previous"/"Next" text; keep only the arrow, on both anchors and disabled spans */
.v2x .dir-pg .page-item .page-link[rel=prev],.v2x .dir-pg .page-item .page-link[rel=next]{font-size:0;padding:0 12px}
.v2x .dir-pg .page-item:first-child .page-link,.v2x .dir-pg .page-item:last-child .page-link{font-size:0;padding:0 12px}
.v2x .dir-pg .page-item:first-child .page-link::before,.v2x .dir-pg .page-item:last-child .page-link::after{content:'';display:inline-block;width:8px;height:8px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor}
.v2x .dir-pg .page-item:first-child .page-link::before{transform:rotate(-135deg)}
.v2x .dir-pg .page-item:last-child .page-link::after{transform:rotate(45deg)}

/* ═════════════ RESPONSIVE ═════════════
   Cascade for the 4-col grid.  Sidebars stack at ≤1500 so at typical 1440
   desktop the grid gets the full ~1360px main width (4-col at ~260px).
   Above 1500 sidebars stay visible with trimmed widths and cards still fit
   at ~230-260px inside the constrained main. */
@media (max-width:1500px){
  /* Sidebars STACK — filters above grid, trending below. Grid keeps 4-col. */
  .v2x .dir-g{grid-template-columns:1fr;gap:18px}
  .v2x .dir-fx,.v2x .dir-tr{position:static;max-height:none}
  .v2x .dir-fx-box{max-height:none;overflow:visible}
  .v2x .dir-tr{order:99}
}
@media (max-width:1180px){
  /* 3-col — spans 820-1180. Cards ~220-280px depending on where in the range. */
  .v2x .dir-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2x .dir-tb{padding:10px 14px}
  .v2x .dir-tb-count .n{font-size:17px}
}
@media (max-width:820px){
  /* 2-col — spans 680-820. Cards ~350-400px each. */
  .v2x .dir-cards{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ── Mobile filter panel — inline accordion (replaces the slide-in drawer) ──
     Panel keeps its normal spot at the top of the stacked grid but starts
     collapsed: only the header row is visible. Tapping the chevron on the
     right of the header expands the groups + sticky Apply footer below. No
     backdrop, no body-scroll lock — the panel behaves like any other page
     section, which reads more clearly on small screens than a full-height
     drawer. The toolbar "Filters" button is dropped since the accordion sits
     directly above the results and its trigger is right there. */
  .v2x .dir-tb-fxbtn{display:none}
  .v2x .dir-fx-mtoggle{display:inline-flex}
  .v2x .dir-g > .dir-fx{position:static;transform:none;margin:0}
  .v2x .dir-g > .dir-fx .dir-fx-box{max-height:none;height:auto;overflow:visible;border-radius:16px}
  /* Head sits on top; drop its own bottom rule while collapsed so the panel
     reads as a single pill rather than an underlined header on empty space */
  .v2x .dir-fx-head{position:static;border-bottom-color:transparent;padding:12px 14px}
  .v2x .dir-fx.is-open .dir-fx-head{border-bottom-color:var(--v2-line)}
  body.theme-dark .v2x .dir-fx.is-open .dir-fx-head{border-bottom-color:rgba(255,255,255,.08)}
  /* Collapse the body — every group AND the Apply footer are hidden when
     the panel is closed. When `.is-open` is set they come back in the normal
     flow (no max-height animation to keep layout jump-free with wire updates) */
  .v2x .dir-fx:not(.is-open) .dir-fx-group,
  .v2x .dir-fx:not(.is-open) .dir-fx-foot{display:none}
  /* Chevron rotates when open */
  .v2x .dir-fx.is-open .dir-fx-mtoggle svg{transform:rotate(180deg)}
  /* Apply footer no longer sticky on mobile — it flows at the bottom of the
     expanded panel, which lets the user see the whole filter list at once */
  .v2x .dir-fx-foot{position:static;padding:12px 14px 14px}
  /* Groups get a touch more breathing room since the panel isn't a scroll box */
  .v2x .dir-fx-group{padding:14px 14px 10px}
  .v2x .dir-fx-group:first-of-type{padding-top:12px}
  /* Ensure the deprecated body-scroll-lock class from the old drawer JS
     never leaves the page frozen after a resize */
  body.dir-fx-open{overflow:auto}
}
@media (max-width:520px){
  .v2x .dir-tb-fxbtn span{display:none}
  .v2x .dir-tb-fxbtn{padding:9px 10px}
}
@media (max-width:680px){
  .v2x .dir-lab{margin-top:28px}
  .v2x .dir-cards{grid-template-columns:1fr;gap:14px}
  .v2x .dir-tb{padding:10px 12px}
  .v2x .dir-tb-right{width:100%;justify-content:space-between}
  .v2x .dir-tb-sort .lbl{display:none}
  .v2x .dir-tc{padding:20px 16px 18px}
  .v2x .dir-tc-logo{width:60px;height:60px;border-radius:16px}
  .v2x .dir-tc-nm{font-size:16px}
  /* ── LIST MODE — compact horizontal row on mobile (NOT a stacked card) ──
     Row layout stays as a single horizontal flex line: [rank+logo] left,
     [content] middle, [bookmark over Try Now arrow] right. Description
     drops to 1-line, meta row wraps, Try Now becomes icon-only. */
  .v2x .dir-lc{flex-wrap:nowrap;align-items:center;padding:12px 14px;gap:10px;border-radius:14px}
  .v2x .dir-lc-rank{width:26px;height:26px;font-size:11px;border-radius:7px}
  .v2x .dir-lc-logo{width:48px;height:48px;border-radius:11px}
  .v2x .dir-lc-mono{font-size:18px}
  .v2x .dir-lc-mid{flex:1 1 auto;min-width:0}
  .v2x .dir-lc-nmrow{gap:6px;flex-wrap:wrap;align-items:center}
  .v2x .dir-lc .dir-lc-nm{font-size:14.5px;line-height:1.2}
  .v2x .dir-lc .dir-lc-cat{font-size:10.5px;padding:1px 8px}
  .v2x .dir-lc-desc{-webkit-line-clamp:1;font-size:12px;line-height:1.4;margin-top:2px;min-height:0}
  .v2x .dir-lc-meta{margin-top:4px;gap:8px;flex-wrap:wrap}
  .v2x .dir-lc-meta .dir-tc-rate{font-size:11.5px}
  .v2x .dir-lc-meta .dir-tc-pill{font-size:9.5px;padding:2px 7px}
  /* Right column — bookmark stacked over icon-only Try Now arrow */
  .v2x .dir-lc-side{width:auto;flex-direction:column;align-items:center;align-self:center;border-top:0;padding-top:0;margin-top:0;gap:6px}
  .v2x .dir-lc-side .dir-tc-bk{width:32px;height:32px;border-radius:8px}
  .v2x .dir-lc-side .dir-tc-btn{width:auto;min-width:44px;padding:9px 12px;gap:0;font-size:0}
  /* Hide the "Try Now" label on mobile — arrow-only button */
  .v2x .dir-lc-side .dir-tc-btn > *:not(svg){display:none}
  .v2x .dir-lc-side .dir-tc-btn svg{margin:0}
  .v2x .dir-tr-box{padding:14px}
  .v2x .dir-fx-box{padding:16px}
  .v2x .dir-pg{margin-top:20px}
  .v2x .dir-pg .page-item .page-link{min-width:32px;height:32px;font-size:13px}
}
@media (max-width:400px){
  /* Tightest phones — hide the description entirely so name/meta breathe */
  .v2x .dir-lc-desc{display:none}
  .v2x .dir-lc-rank{width:24px;height:24px}
  .v2x .dir-lc-logo{width:44px;height:44px;border-radius:10px}
  .v2x .dir-lc{padding:11px 12px;gap:9px}
}
@media (prefers-reduced-motion:reduce){
  .v2x .dir-tc,.v2x .dir-tc-logo,.v2x .dir-tc-btn,.v2x .dir-tc-btn .arr,.v2x .dir-lc,.v2x .dir-tr-row,.v2x .dir-tr-pulse{transition:none;animation:none;transform:none !important}
  .v2x .dir-tc:hover,.v2x .dir-lc:hover{transform:none !important}
  .v2x .dir-tc-btn::before,.v2x .dir-fx-apply::before{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE PARITY PASS (2026-08-12) — search bar + icon plates
   ═══════════════════════════════════════════════════════════════════════════
   The `.dir-hh` hero was built to "match the / hero band", then the homepage
   moved on: it gained the spectrum-ring search field and swapped every icon
   TINT for a solid tone PLATE. This block closes both gaps in the directory's
   own namespace rather than loading homepage.css — that sheet is 4,400 lines
   scoped to `.hpx` and would need the whole wrapper to behave.

   Appended last on purpose: every rule below either matches or exceeds the
   specificity of the one it replaces, so source order settles the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · SOLID ICON PLATE ────────────────────────────────────────────────────
   The homepage recipe verbatim: solid `ink` fill, WHITE glyph, a 135° sheen,
   a 1px inner highlight for the top edge, and a tone-coloured drop.

   THE DARK TWIN IS NOT OPTIONAL. The `-ink` dark values are LIGHTENED so they
   can serve as text on a dark surface — white on #8CBEFA is 2.4:1. Every dark
   rule re-declares `background-image` with an rgba(9,18,33,.45) scrim listed
   FIRST, which means it paints ON TOP of the sheen and drops the plate back
   into range. Remove the scrim and the glyph disappears at night.

   Measured white-on-plate at the worst point (the far corner of the 135deg
   sheen): light 3.14-4.26:1, dark 3.96-4.71:1 — all tones clear 3:1. Compose
   in that order (ink -> sheen -> scrim) or the dark figures come out ~1 point
   low and look like a failure that is not there. */

.v2x .dir-hh-stat[data-tone] .dir-hh-stat-ico,
.v2x .dir-cat-card-ico,
.v2x .dir-why-ico,
.v2x .dir-nr-pico {
  background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 100%);
  color: #fff;
}

body.theme-dark .v2x .dir-hh-stat[data-tone] .dir-hh-stat-ico,
body.theme-dark .v2x .dir-cat-card-ico,
body.theme-dark .v2x .dir-why-ico,
body.theme-dark .v2x .dir-nr-pico {
  background-image:
    linear-gradient(0deg, rgba(9,18,33,.45), rgba(9,18,33,.45)),
    linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 100%);
  color: #fff;
}

/* Hero stat plates. The per-tone rules above set `background` (shorthand) at
   (0,4,0); these match that weight and come later, so they win outright. The
   ink values are the homepage's --hpx-t-*-ink, light and dark. */
/* Hero stat plates moved to §DECK at the end of this sheet, where the tone ink
   became a token (`--dhs-t-ink`) that the plate, the wash and the hover bar all
   read. The per-tone `background-color` rules that stood here were deleted with
   it — two definitions of one surface is how a "fixed" colour comes back. */
/* `emerald` is the SAME hue under the name /best and /collections store for it
   (their $__statTones rotation uses "emerald" where the others use "green").
   Without this alias that card falls through to the default blue plate and two
   stats in the deck come out identical. The grouped [data-tone] rules above
   already give it the sheen, the white glyph and the 47% size — only the ink
   was missing. */



/* Category, why-choose and newsroom plates already resolve a per-tone ink
   token on their card, so the fill is one declaration each. */
.v2x .dir-cat-card-ico { background-color: var(--dtc-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 18px -10px var(--dtc-ink); }
.v2x .dir-why-ico      { background-color: var(--dwc-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 18px -10px var(--dwc-ink); }
.v2x .dir-nr-pico      { background-color: var(--dnr-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 14px -8px var(--dnr-ink); }

body.theme-dark .v2x .dir-cat-card-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -10px rgba(0,0,0,.8); }
body.theme-dark .v2x .dir-why-ico      { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -10px rgba(0,0,0,.8); }
body.theme-dark .v2x .dir-nr-pico      { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 14px -8px rgba(0,0,0,.8); }

/* A glyph sized for a tint is too big for a plate — the homepage sits every
   plate glyph at 47% where the tint version runs 55%. */
.v2x .dir-hh-stat[data-tone] .dir-hh-stat-ico svg { width: 47%; height: 47%; }
.v2x .dir-cat-card-ico svg { width: 47%; height: 47%; }
.v2x .dir-why-ico svg      { width: 47%; height: 47%; }
.v2x .dir-nr-pico svg      { width: 47%; height: 47%; }

/* The why-card hover ring used the ink as a 1px inset over a pale tint. On a
   solid plate of that same ink the ring is invisible, so it becomes a light
   rim instead. */
@media (hover: hover) {
  .v2x .dir-why-card:hover .dir-why-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.28), 0 12px 24px -10px var(--dwc-ink); }
}

/* ── 2 · SEARCH BAR ──────────────────────────────────────────────────────────
   The homepage field carries the hero on its own, and a flat white pill with a
   hairline is not that. Four things make the difference: a lit top edge, an
   iridescent ring that flows, a glint that crosses it, and a brand bloom
   underneath. */

.v2x .dir-hh-search {
  background-image: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 46%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(16,24,40,.04),
    0 14px 38px -14px rgba(16,24,40,.20),
    0 0 22px -6px rgba(124,77,240,.30),
    0 6px 26px -8px rgba(236,72,153,.22),
    0 24px 52px -30px rgba(54,128,237,.34);
}

/* ── The spectrum ring and its glint ──────────────────────────────────────
   Both are masked pseudo-elements: `padding` plus `mask-composite: exclude`
   leaves only the border band painted, so the ring is a border that can hold
   a gradient.

   The spectrum is listed TWICE across a 200% image, so shifting by exactly one
   element width lands on an identical pattern — the loop is seamless, with no
   reverse and no visible seam.

   The bloom under the pill is layered COLOURED shadows on the form itself
   rather than a blurred copy of the ring. A blurred pseudo would have to sit
   behind the pill, which means a negative z-index, which means giving the hero
   a stacking context — and that traps the counter deck below it. */
.v2x .dir-hh-search::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; padding: 3px;
  background-image: linear-gradient(90deg,
    #3680ED, #7C4DF0, #EC4899, #F43F5E, #F59E0B, #10B981, #06B6D4,
    #3680ED, #7C4DF0, #EC4899, #F43F5E, #F59E0B, #10B981, #06B6D4, #3680ED);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .88;
  animation: dir-hh-ring-flow 9s linear infinite;
  transition: opacity .3s ease, padding .3s ease, inset .3s ease;
  pointer-events: none;
}
.v2x .dir-hh-search::before {
  content: ''; position: absolute; z-index: 1; inset: -3px; border-radius: inherit; padding: 3px;
  background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%);
  background-size: 62% 100%; background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  animation: dir-hh-ring-glint 4.2s var(--ease-out) infinite;
  transition: opacity .3s ease;
  pointer-events: none;
}
.v2x .dir-hh-search:focus-within::after { opacity: 1; inset: -4px; padding: 4px; }
@keyframes dir-hh-ring-flow { to { background-position: 100% 50%; } }
@keyframes dir-hh-ring-glint {
  0%   { background-position: -70% 50%; opacity: 0; }
  8%   { opacity: .9; }
  38%  { opacity: .9; }
  50%  { background-position: 170% 50%; opacity: 0; }
  100% { background-position: 170% 50%; opacity: 0; }
}
/* The ring is the page's brightest object; at night it takes the volume down. */
body.theme-dark .v2x .dir-hh-search::after { opacity: .72; }

body.theme-dark .v2x .dir-hh-search {
  background-image: none;
  box-shadow:
    0 2px 6px rgba(0,0,0,.46),
    0 18px 44px rgba(0,0,0,.5),
    0 0 22px -6px rgba(124,77,240,.26),
    0 6px 26px -8px rgba(236,72,153,.18);
}
body.theme-dark .v2x .dir-hh-search:focus-within {
  box-shadow:
    0 0 0 5px rgba(96,164,245,.20),
    0 0 30px -4px rgba(124,77,240,.38),
    0 8px 34px -6px rgba(236,72,153,.26),
    0 18px 44px rgba(0,0,0,.55);
}

.v2x .dir-hh-search-ico { width: 22px; height: 22px; color: #7d8494; transition: color .25s ease, transform .25s cubic-bezier(.22,.61,.36,1); }
.v2x .dir-hh-search-ico svg { width: 22px; height: 22px; }
.v2x .dir-hh-search:focus-within .dir-hh-search-ico { transform: scale(1.06); }

/* The field wrapper exists so the clear button and the shortcut hint can share
   one absolutely-positioned slot at the right edge of the input. */
.v2x .dir-hh-search-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.v2x .dir-hh-search-field input { width: 100%; height: 56px; padding: 0 34px 0 0; }

.v2x .dir-hh-search-clear {
  position: absolute; right: 2px;
  display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #7d8494; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.v2x .dir-hh-search-clear svg { width: 12px; height: 12px; }
.v2x .dir-hh-search-field input:not(:placeholder-shown) ~ .dir-hh-search-clear { display: inline-flex; }
@media (hover: hover) { .v2x .dir-hh-search-clear:hover { background: var(--v2-accent-soft); color: var(--brand-blue-dark); } }
body.theme-dark .v2x .dir-hh-search-clear:hover { background: rgba(96,164,245,.16); color: var(--brand-blue-light); }

/* The shortcut hint. Shares the clear button's slot and swaps with it —
   `:placeholder-shown` means the field is empty, so the hint is up exactly
   while there is nothing to clear. The two can never overlap and no JS is
   involved. Gated to ≥1100px, where the 780px field has room to spare. */
.v2x .dir-hh-search-kbd {
  position: absolute; right: 2px;
  display: none; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 650; line-height: 1; letter-spacing: .01em;
  white-space: nowrap; pointer-events: none; user-select: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
/* A physical keycap: hairline ring for the edge, a solid 1px underneath for
   the side wall, a soft drop for the shadow it casts. Drop any one layer and
   it flattens into a label with a border. */
.v2x .dir-hh-search-kbd kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 6px;
  border: 0; border-radius: 6px;
  background: #fff; color: var(--v2-muted); font: inherit;
  box-shadow: inset 0 0 0 1px var(--v2-line), 0 1px 0 #d7dbe4, 0 2px 3px -1px rgba(16,24,40,.10);
  transition: color .25s ease, box-shadow .25s ease;
}
.v2x .dir-hh-search-kbd-plus { color: #9ba0ae; font-weight: 500; }
body.theme-dark .v2x .dir-hh-search-kbd kbd {
  background: rgba(255,255,255,.07); color: #c3c8d4;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 1px 0 rgba(0,0,0,.5), 0 2px 3px -1px rgba(0,0,0,.5);
}
@media (hover: hover) {
  /* brand-DARK, not --brand-blue: #3680ED measures 3.89:1 on white and this is
     10.5px text. The dark step is the same hue and clears AA. */
  .v2x .dir-hh-search:hover .dir-hh-search-kbd kbd {
    color: var(--brand-blue-dark);
    box-shadow: inset 0 0 0 1px #CFE0FA, 0 1px 0 #CFE0FA, 0 2px 6px -1px rgba(54,128,237,.3);
  }
}
body.theme-dark .v2x .dir-hh-search:hover .dir-hh-search-kbd kbd { color: var(--brand-blue-light); }
/* Once the caret is in the field the hint has said what it had to say. */
.v2x .dir-hh-search:focus-within .dir-hh-search-kbd { opacity: 0; transform: translateX(4px); }

@media (min-width: 1100px) {
  .v2x .dir-hh-search-field input:placeholder-shown ~ .dir-hh-search-kbd { display: inline-flex; }
  /* Load-bearing with the hint: without it the placeholder runs underneath. */
  .v2x .dir-hh-search-field input:placeholder-shown { padding-right: 84px; }
}

.v2x .dir-hh-search-btn { height: 56px; padding: 0 26px; }
.v2x .dir-hh-search-btn-ico { width: 16px; height: 16px; }
/* The spinner replaces the magnifier while Livewire is fetching, so the button
   reports the request instead of looking inert. */
.v2x .dir-hh-search-btn-spin { display: none; width: 16px; height: 16px; animation: dir-hh-spin .7s linear infinite; }
.v2x .dir-hh-search-btn.is-loading .dir-hh-search-btn-ico { display: none; }
.v2x .dir-hh-search-btn.is-loading .dir-hh-search-btn-spin { display: block; }
@keyframes dir-hh-spin { to { transform: rotate(360deg); } }

/* The ring and glint are already nulled by the reduced-motion block above;
   the spinner is the only new animation that needs it. */
@media (prefers-reduced-motion: reduce) {
  .v2x .dir-hh-search-btn-spin,
  .v2x .dir-hh-search::after,
  .v2x .dir-hh-search::before { animation: none; }
  .v2x .dir-hh-search::before { opacity: 0; }
}

@media (max-width: 700px) {
  .v2x .dir-hh-search-field input { height: 48px; }
  .v2x .dir-hh-search-btn { height: 48px; padding: 0 18px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §DECK — HOMEPAGE COUNTER-DECK PARITY (2026-08-13)
   ═══════════════════════════════════════════════════════════════════════════
   The hero counter card is now the homepage's `.hpx-herostats` recipe, ported
   into this page's `.dir-*` namespace: one card with a lit brand edge along the
   top, cells divided by hairlines that fade out at both ends, and a tile that
   answers the pointer with a tone wash, a bar along its bottom edge, a light
   sweep and a plate that tilts.

   PORTED, NOT LINKED. `--hpx-*` is compiled from `hp_tokens` into an inline
   <style> on `/` ONLY — none of those tokens exist on this page, and a
   `var(--hpx-line)` here would silently resolve to nothing. The values below
   were read off the rendered homepage and are re-declared as `--dhs-*` scoped
   to the card, so they cannot leak into the rest of the page either.

   Appended last on purpose: every rule matches or exceeds the specificity of
   the one it supersedes, so source order settles the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Surface + ink tokens ────────────────────────────────────────────────
   The homepage palette, scoped to the deck. */
.v2x .dir-hh-stats {
  --dhs-card:#FFFFFF; --dhs-line:#E7ECF3; --dhs-line-strong:#D6DEE9;
  --dhs-line-soft:#F0F3F8; --dhs-bg-2:#F7F9FC;
  --dhs-ink:#0B1220; --dhs-ink-2:#3D4757; --dhs-ink-3:#6B7686;
  --dhs-brand:#3680ED; --dhs-brand-600:#2060C0; --dhs-glow:rgba(54,128,237,.28);
  --dhs-ease:cubic-bezier(.22,.61,.36,1);
}
body.theme-dark .v2x .dir-hh-stats {
  --dhs-card:#17171B; --dhs-line:rgba(255,255,255,.10); --dhs-line-strong:rgba(255,255,255,.16);
  --dhs-line-soft:rgba(255,255,255,.06); --dhs-bg-2:#131317;
  --dhs-ink:#F4F5F7; --dhs-ink-2:#C7CAD1; --dhs-ink-3:#9AA0AB;
  --dhs-brand:#60A4F5; --dhs-brand-600:#4A8FE8; --dhs-glow:rgba(96,164,245,.32);
  --dhs-ease:cubic-bezier(.16,.84,.44,1);
}

/* ── 2 · Per-tone tokens ─────────────────────────────────────────────────────
   The homepage's `--hpx-t-*` triplet, on the TILE so the plate, the wash and
   the hover ring all read one source instead of three hard-coded copies.

   `green` and `emerald` are the SAME hue under two names — the settings rows
   store `green` on six pages and `emerald` on /best and /collections. Both are
   listed on every rule; drop either and that page's card falls back to blue. */
.v2x .dir-hh-stat[data-tone]           { --dhs-t-ink:#1B5BB5; --dhs-t-bg:#EAF2FD; --dhs-t-line:#CFE0FA; }
.v2x .dir-hh-stat[data-tone="blue"]    { --dhs-t-ink:#1B5BB5; --dhs-t-bg:#EAF2FD; --dhs-t-line:#CFE0FA; }
.v2x .dir-hh-stat[data-tone="green"],
.v2x .dir-hh-stat[data-tone="emerald"] { --dhs-t-ink:#08795A; --dhs-t-bg:#E6F8F1; --dhs-t-line:#C6EEDF; }
.v2x .dir-hh-stat[data-tone="violet"]  { --dhs-t-ink:#5B33C4; --dhs-t-bg:#F0EBFE; --dhs-t-line:#DED2FB; }
.v2x .dir-hh-stat[data-tone="rose"]    { --dhs-t-ink:#B31D3C; --dhs-t-bg:#FEECEF; --dhs-t-line:#FBD2DA; }
.v2x .dir-hh-stat[data-tone="amber"]   { --dhs-t-ink:#A85B08; --dhs-t-bg:#FEF4E4; --dhs-t-line:#FBE3C0; }
.v2x .dir-hh-stat[data-tone="cyan"]    { --dhs-t-ink:#0A6E88; --dhs-t-bg:#E4F6FB; --dhs-t-line:#C2E9F4; }
.v2x .dir-hh-stat[data-tone="indigo"]  { --dhs-t-ink:#3540B0; --dhs-t-bg:#EBEEFE; --dhs-t-line:#D3D9FB; }
.v2x .dir-hh-stat[data-tone="orange"]  { --dhs-t-ink:#B4500C; --dhs-t-bg:#FEF0E6; --dhs-t-line:#FBD9C2; }
.v2x .dir-hh-stat[data-tone="teal"]    { --dhs-t-ink:#0B6E68; --dhs-t-bg:#E3F6F5; --dhs-t-line:#C1EAE7; }
.v2x .dir-hh-stat[data-tone="pink"]    { --dhs-t-ink:#A81E75; --dhs-t-bg:#FDEBF6; --dhs-t-line:#FACFE8; }
.v2x .dir-hh-stat[data-tone="slate"]   { --dhs-t-ink:#38455A; --dhs-t-bg:#EFF2F6; --dhs-t-line:#DCE2EA; }

/* The dark inks are LIGHTENED twins — they are text inks for a dark surface, so
   white on #8CBEFA is 2.4:1 raw. §5's plate scrims them back into range. */
body.theme-dark .v2x .dir-hh-stat[data-tone]           { --dhs-t-ink:#8CBEFA; --dhs-t-bg:rgba(54,128,237,.18); --dhs-t-line:rgba(96,164,245,.28); }
body.theme-dark .v2x .dir-hh-stat[data-tone="blue"]    { --dhs-t-ink:#8CBEFA; --dhs-t-bg:rgba(54,128,237,.18); --dhs-t-line:rgba(96,164,245,.28); }
body.theme-dark .v2x .dir-hh-stat[data-tone="green"],
body.theme-dark .v2x .dir-hh-stat[data-tone="emerald"] { --dhs-t-ink:#6EE7BE; --dhs-t-bg:rgba(16,185,129,.18); --dhs-t-line:rgba(52,211,153,.30); }
body.theme-dark .v2x .dir-hh-stat[data-tone="violet"]  { --dhs-t-ink:#BFA6FB; --dhs-t-bg:rgba(124,77,240,.20); --dhs-t-line:rgba(160,120,250,.32); }
body.theme-dark .v2x .dir-hh-stat[data-tone="rose"]    { --dhs-t-ink:#FB9BB0; --dhs-t-bg:rgba(244,63,94,.18);  --dhs-t-line:rgba(251,113,133,.30); }
body.theme-dark .v2x .dir-hh-stat[data-tone="amber"]   { --dhs-t-ink:#FBC97A; --dhs-t-bg:rgba(245,158,11,.20); --dhs-t-line:rgba(251,191,36,.32); }
body.theme-dark .v2x .dir-hh-stat[data-tone="cyan"]    { --dhs-t-ink:#7CD9EE; --dhs-t-bg:rgba(6,182,212,.18);  --dhs-t-line:rgba(34,211,238,.30); }
body.theme-dark .v2x .dir-hh-stat[data-tone="indigo"]  { --dhs-t-ink:#A9B2FB; --dhs-t-bg:rgba(79,70,229,.20);  --dhs-t-line:rgba(129,140,248,.32); }
body.theme-dark .v2x .dir-hh-stat[data-tone="orange"]  { --dhs-t-ink:#FBB07A; --dhs-t-bg:rgba(249,115,22,.20); --dhs-t-line:rgba(251,146,60,.32); }
body.theme-dark .v2x .dir-hh-stat[data-tone="teal"]    { --dhs-t-ink:#79DDD5; --dhs-t-bg:rgba(20,184,166,.18); --dhs-t-line:rgba(45,212,191,.30); }
body.theme-dark .v2x .dir-hh-stat[data-tone="pink"]    { --dhs-t-ink:#F79CD1; --dhs-t-bg:rgba(236,72,153,.18); --dhs-t-line:rgba(244,114,182,.30); }
body.theme-dark .v2x .dir-hh-stat[data-tone="slate"]   { --dhs-t-ink:#B4BDCA; --dhs-t-bg:rgba(148,163,184,.16);--dhs-t-line:rgba(148,163,184,.28); }

/* ── 3 · The card ────────────────────────────────────────────────────────────
   `grid-auto-flow: column` instead of the old `repeat(var(--dir-hh-cols))`: the
   track count then follows the number of cells with no inline variable to keep
   in sync. (The `--dir-hh-cols` the markup still prints is now inert.)

   `overflow: visible`, deliberately — a non-visible overflow-x forces overflow-y
   to auto too, which would clip the very lift the tiles use to answer the
   pointer. Nothing needs to scroll: the grid reflows to 3 then 2 columns. */
.v2x .dir-hh-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  gap: 2px;
  width: 100%;
  max-width: 1120px;
  margin: 46px auto 4px;
  padding: 12px;
  background: var(--dhs-card);
  border: 1px solid var(--dhs-line);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(16,24,40,.04),
    0 26px 60px -30px var(--dhs-glow),
    0 22px 50px -26px rgba(16,24,40,.26);
  overflow: visible;
}

body.theme-dark .v2x .dir-hh-stats {
  /* background + border-color are re-declared, not inherited from the light
     rule above: the ORIGINAL dark rule is (0,3,1) and owns both, so a (0,2,0)
     declaration can never reach them. The blur goes with them — the homepage
     card is a solid surface. */
  background: var(--dhs-card);
  border-color: var(--dhs-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 6px rgba(0,0,0,.46),
    0 26px 60px -30px var(--dhs-glow),
    0 22px 50px -26px rgba(0,0,0,.6);
}

/* The lit top edge. Inset from the corners so it reads as a highlight along the
   card rather than as a border that failed to reach them. */
.v2x .dir-hh-stats::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset-block-start: -1px;
  inset-inline: 14%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent 0%, var(--dhs-brand) 32%, var(--dhs-brand-600) 68%, transparent 100%);
  opacity: .5;
  pointer-events: none;
}
body.theme-dark .v2x .dir-hh-stats::before { opacity: .7; }

/* ── 4 · One counter ─────────────────────────────────────────────────────────
   `isolation: isolate` gives the tile its own stacking context so the wash and
   the sweep stay under the figure without a z-index race against the card;
   `overflow: hidden` is what clips both to the tile's radius. */
.v2x .dir-hh-stat {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 13px 12px;
  text-align: left;
  color: var(--dhs-ink);
  border-radius: 17px;
  overflow: hidden;
  min-width: 0;
  box-shadow: none;
  transition: transform .3s var(--dhs-ease), box-shadow .3s ease, background-color .24s ease;
}

/* The column hairline, on a pseudo rather than in the box-shadow slot. It used
   to be `inset 1px 0 0` on the tile, which meant every later treatment — the
   tablet tile ring, the phone outline, the hover ring — had to out-specify it
   for the one box-shadow slot. Here box-shadow is left free for elevation.

   Faded at both ends: a hairline running a tile's full height cuts the card
   into six boxes, and the point is a set of six readings. */
.v2x .dir-hh-stat::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset-block: 24%;
  inset-inline-start: -1px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--dhs-line-strong) 50%, transparent 100%);
  transition: opacity .24s ease;
  pointer-events: none;
}
.v2x .dir-hh-stats > :first-child::before { opacity: 0; }

/* The tone wash and the bar along the bottom edge, hidden at rest. One pseudo
   carries both — the wash is the background, the bar an inset shadow that grows
   from nothing — so they arrive and leave together. */
.v2x .dir-hh-stat::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--dhs-t-bg) 0%, transparent 78%);
  box-shadow: inset 0 0 0 var(--dhs-t-ink);
  opacity: 0;
  transition: opacity .28s ease, box-shadow .34s var(--dhs-ease);
  pointer-events: none;
}

/* ── 5 · The sweep ───────────────────────────────────────────────────────────
   Its own element, not a pseudo: the tile already spends `::before` on the
   hairline and `::after` on the wash, and the skewed highlight needs a clipping
   box of its own so it is cut to the TILE's radius, not the card's. */
.v2x .dir-hh-stat-fx {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.v2x .dir-hh-stat-fx::before {
  content: '';
  position: absolute;
  inset-block: -40%;
  inset-inline-start: -55%;
  width: 42%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.7) 50%, transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
}
/* White at .7 is a flashbulb on a near-black card. */
body.theme-dark .v2x .dir-hh-stat-fx::before {
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.13) 50%, transparent 100%);
}
@keyframes dir-hh-sweep {
  0%   { opacity: 0; transform: translateX(0) skewX(-18deg); }
  16%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(430%) skewX(-18deg); }
}

/* ── 6 · The plate ───────────────────────────────────────────────────────────
   One rule for every tone now that the ink is a token — the seven hard-coded
   per-tone plate rules this replaces were deleted rather than left to rot as a
   second definition of the same surface. */
.v2x .dir-hh-stat .dir-hh-stat-ico {
  position: relative;
  z-index: 2;
  width: 46px; height: 46px;
  border-radius: 13px;
  background-color: var(--dhs-t-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 14px -8px var(--dhs-t-ink);
  transition: transform .3s var(--dhs-ease), box-shadow .3s ease;
}
body.theme-dark .v2x .dir-hh-stat .dir-hh-stat-ico {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 14px -8px rgba(0,0,0,.8);
}

/* ── 7 · The figure ──────────────────────────────────────────────────────────
   Fluid, not fixed. Six figures across a 1120px card get ~150px each at the
   narrow end, and a fixed 20px "50,000+" needs more than that — which is what
   used to force the card to scroll. The clamp lands 16px where it is tight and
   20px where there is room, so nothing is ever cut to fit.

   tabular-nums for two reasons: the six figures sit on one rhythm instead of
   drifting by the width of a 1, and the count-up rewrites this text frame by
   frame — proportional digits make the tile twitch as it counts. */
.v2x .dir-hh-stat-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: start;
  min-width: 0;
}
.v2x .dir-hh-stat-num {
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 820;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--dhs-ink);
  font-variant-numeric: tabular-nums;
  transition: color .24s ease;
}
/* No nowrap and no ellipsis: the label is admin-editable and translated, so a
   longer string is one edit or one locale away. It wraps and its row grows —
   the grid stretches the neighbouring cells to match. */
.v2x .dir-hh-stat-lbl {
  font-size: clamp(11.5px, .92vw, 13px);
  font-weight: 560;
  line-height: 1.35;
  color: var(--dhs-ink-3);
  text-wrap: balance;
  transition: color .24s ease;
}

/* ── 8 · Hover ───────────────────────────────────────────────────────────────
   The cells carry no URL on these pages, so this is a reading highlight, not a
   click affordance: no lift and no ring, which would promise a click the tile
   cannot honour. */
@media (hover: hover) {
  .v2x .dir-hh-stat:hover::after { opacity: 1; box-shadow: inset 0 -3px 0 var(--dhs-t-ink); }
  .v2x .dir-hh-stat:hover::before,
  .v2x .dir-hh-stat:hover + .dir-hh-stat::before { opacity: 0; }
  .v2x .dir-hh-stat:hover .dir-hh-stat-fx::before { animation: dir-hh-sweep .9s var(--dhs-ease); }

  .v2x .dir-hh-stat:hover .dir-hh-stat-ico {
    transform: scale(1.09) rotate(-5deg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 22px -10px var(--dhs-t-ink);
  }
  /* (0,5,0). The dark RESTING plate is (0,4,0), so a hover shadow written at
     (0,4,0) like the one above loses to it and the plate would scale under the
     pointer while its glow stayed put. */
  body.theme-dark .v2x .dir-hh-stat:hover .dir-hh-stat-ico {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 22px -10px rgba(0,0,0,.9);
  }

  /* Both stay on ink tokens, never on the tone's pale background twin — the
     figure is the content and it does not get to lose contrast to a hover. */
  .v2x .dir-hh-stat:hover .dir-hh-stat-num { color: var(--dhs-t-ink); }
  .v2x .dir-hh-stat:hover .dir-hh-stat-lbl { color: var(--dhs-ink-2); }
}

@media (prefers-reduced-motion: reduce) {
  .v2x .dir-hh-stat, .v2x .dir-hh-stat::after, .v2x .dir-hh-stat::before,
  .v2x .dir-hh-stat .dir-hh-stat-ico, .v2x .dir-hh-stat-num, .v2x .dir-hh-stat-lbl { transition: none; }
  .v2x .dir-hh-stat:hover .dir-hh-stat-ico { transform: none; }
  .v2x .dir-hh-stat:hover .dir-hh-stat-fx::before { animation: none; }
}

/* ── 9 · Responsive ──────────────────────────────────────────────────────────
   Six counters in one row below ~1100px leaves ~150px each, narrower than
   "50,000+" plus its plate. Three columns is the honest layout for that range.

   The hairlines go entirely here: a wrapped grid needs dividers on two axes,
   which the block this replaces drew with three nth-child rules at three
   specificities fighting over one box-shadow slot. Recessed tiles say the same
   thing with no rules to keep in sync. */
@media (max-width: 1100px) {
  .v2x .dir-hh-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 34px;
    padding: 10px;
  }
  .v2x .dir-hh-stat::before { display: none; }
  .v2x .dir-hh-stat {
    justify-content: flex-start;
    padding: 13px;
    background-color: var(--dhs-bg-2);
    box-shadow: inset 0 0 0 1px var(--dhs-line-soft);
  }
  body.theme-dark .v2x .dir-hh-stat {
    background-color: rgba(255,255,255,.035);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  }

  /* The label moves to ink-2 HERE, with the recessed surface it sits on.
     --dhs-ink-3 is 4.60:1 on the open card but only 4.37:1 on the recessed
     tile, and at 11.5-13px that is under AA. ink-2 measures 8.90:1. */
  .v2x .dir-hh-stat-lbl { color: var(--dhs-ink-2); }
}

/* Two columns of recessed tiles, plate BESIDE the figure rather than above it:
   stacked, six cells run the card to ~400px of a phone's fold for six numbers,
   and the hero's job is the search field underneath. */
@media (max-width: 640px) {
  .v2x .dir-hh-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
    padding: 8px;
    border-radius: 20px;
  }
  .v2x .dir-hh-stat { gap: 10px; padding: 11px 10px; border-radius: 14px; }
  .v2x .dir-hh-stat .dir-hh-stat-ico { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; }
  .v2x .dir-hh-stat-num { font-size: 17px; line-height: 1.25; }
  /* ink-2, not ink-3: at this size the muted tone starts to read as disabled
     rather than as secondary. */
  .v2x .dir-hh-stat-lbl { font-size: 11.4px; color: var(--dhs-ink-2); }
}

@media (max-width: 380px) {
  .v2x .dir-hh-stats { gap: 6px; padding: 7px; border-radius: 17px; }
  .v2x .dir-hh-stat { padding: 9px 8px; gap: 8px; border-radius: 12px; }
  .v2x .dir-hh-stat .dir-hh-stat-ico { width: 32px; height: 32px; border-radius: 10px; }
  .v2x .dir-hh-stat-num { font-size: 15.5px; }
  .v2x .dir-hh-stat-lbl { font-size: 10.8px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §WHY — HOMEPAGE FEATURE-CARD PARITY (2026-08-13)
   ═══════════════════════════════════════════════════════════════════════════
   The "why choose" row is now the homepage's `.hpx-ig-feature` recipe: the
   title carries its tone at REST (these cards are not links, so there is no
   hover left to put the hue in), the rule under it is a solid tone bar, and the
   lead card is the signature button gradient with a corner ribbon.

   Same rule as §DECK — `--hpx-*` exists only on `/`, so the values are
   re-declared here as `--dwy-*` scoped to the section.
   ═══════════════════════════════════════════════════════════════════════════ */

.v2x .dir-why-sect {
  --dwy-card:#FFFFFF; --dwy-line:#E7ECF3; --dwy-ink-2:#3D4757;
  --dwy-brand:#3680ED; --dwy-brand-600:#2060C0; --dwy-brand-700:#1B4E9C;
  --dwy-glow:rgba(54,128,237,.28); --dwy-ease:cubic-bezier(.22,.61,.36,1);
}
body.theme-dark .v2x .dir-why-sect {
  --dwy-card:#17171B; --dwy-line:rgba(255,255,255,.10); --dwy-ink-2:#C7CAD1;
  --dwy-brand:#60A4F5; --dwy-brand-600:#4A8FE8; --dwy-brand-700:#3B7BD4;
  --dwy-glow:rgba(96,164,245,.32); --dwy-ease:cubic-bezier(.16,.84,.44,1);
}

/* ── 1 · The card ────────────────────────────────────────────────────────────
   The inset white top edge is what stops the card reading as a flat rectangle
   with a border; it is the same 3-layer shadow the homepage card carries. */
.v2x .dir-why-card {
  gap: 0;
  padding: 26px 20px 24px;
  background: var(--dwy-card);
  border: 1px solid var(--dwy-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(16,24,40,.04),
    0 12px 26px -20px rgba(16,24,40,.3);
}
body.theme-dark .v2x .dir-why-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.4),
    0 12px 26px -20px rgba(0,0,0,.75);
}

/* Tone wash from the top, hidden at rest — the card already has a surface, so a
   resting tint would muddy it rather than identify it. */
.v2x .dir-why-card::before {
  background: radial-gradient(120% 78% at 50% 0%, var(--dwc-bg) 0%, transparent 68%);
}

/* ── 2 · The plate ───────────────────────────────────────────────────────────
   64/19px with the glow in the plate's own hue, matched to the counter deck so
   the two bands read as one family. */
.v2x .dir-why-ico {
  width: 64px; height: 64px;
  border-radius: 19px;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 22px -10px var(--dwc-ink);
}
body.theme-dark .v2x .dir-why-ico {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -10px rgba(0,0,0,.8);
}

/* ── 3 · Title, rule, copy ───────────────────────────────────────────────────
   Tone at REST. The reference card carries its hue in the title, and these
   cards are not links — there is no hover state left to put it in.

   `min-height: 2.7em` is 2 lines of the inherited 1.35: at six across,
   "Verified & Trusted" wraps and "Comprehensive" does not, and without a floor
   the rule and the copy under each title land at a different height on every
   other card — the row stops reading as a set. */
.v2x .dir-why-title-c {
  margin: 0;
  display: block;
  font-size: 16px;
  font-weight: 740;
  letter-spacing: -.016em;
  line-height: 1.35;
  color: var(--dwc-ink);
  min-height: 2.7em;
  background-image: none;
}
body.theme-dark .v2x .dir-why-title-c { color: var(--dwc-ink); }
/* The underline-grow went with the hue: an underline that appears under a
   title which is already the tone colour is two signals for one event. */
@media (hover: hover) { .v2x .dir-why-card:hover .dir-why-title-c { background-size: 0 2px; } }

.v2x .dir-why-rule {
  width: 26px; height: 3px;
  margin: 11px auto 12px;
  border-radius: 999px;
  background: var(--dwc-ink);
  opacity: .9;
  transition: width .3s var(--dwy-ease), opacity .2s ease;
}
@media (hover: hover) { .v2x .dir-why-card:hover .dir-why-rule { width: 46px; box-shadow: none; } }

.v2x .dir-why-desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dwy-ink-2);
}

/* ── 4 · The lead card ───────────────────────────────────────────────────────
   The signature button gradient, plus a scrim. White on `--dwy-brand` alone is
   3.84:1 light and 2.6:1 dark — the dark twins are LIGHTENED so they can serve
   as ink on a dark surface, which is exactly what makes them a poor fill under
   white text. The scrim deepens the fill without touching the tokens and takes
   both themes past 4.5:1. */
.v2x .dir-why-card.is-lead {
  justify-content: center;
  background-color: var(--dwy-brand-700);
  background-image:
    linear-gradient(0deg, rgba(9,18,33,.12), rgba(9,18,33,.12)),
    linear-gradient(135deg, var(--dwy-brand) 0%, var(--dwy-brand-600) 62%, var(--dwy-brand-700) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 18px 40px -24px var(--dwy-glow), 0 2px 4px rgba(16,24,40,.08);
}
body.theme-dark .v2x .dir-why-card.is-lead {
  /* Re-declared, not inherited from the light rule: the base dark card rule is
     (0,3,1) and owns background-color, which a (0,3,0) lead rule cannot reach. */
  background-color: var(--dwy-brand-700);
  background-image:
    linear-gradient(0deg, rgba(9,18,33,.34), rgba(9,18,33,.34)),
    linear-gradient(135deg, var(--dwy-brand) 0%, var(--dwy-brand-600) 62%, var(--dwy-brand-700) 100%);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.7), 0 2px 4px rgba(0,0,0,.3);
}

/* Soft light pooling in the bottom corner, so the fill is not a flat slab.
   `display` is re-enabled: the rule above this block switches BOTH pseudos off
   on the lead card, and this one is now carrying the pool. */
.v2x .dir-why-card.is-lead::before {
  display: block;
  background: radial-gradient(90% 70% at 18% 108%, rgba(255,255,255,.28) 0%, transparent 62%);
  opacity: 1;
}

.v2x .dir-why-card.is-lead .dir-why-ico {
  background: rgba(255,255,255,.96);
  background-image: none;
  color: var(--dwy-brand-600);
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.45);
}
/* Both at full white. The hierarchy is carried by size and weight — dimming the
   copy was buying elegance with the one thing this card cannot spare, which is
   contrast against its own fill. */
.v2x .dir-why-card.is-lead .dir-why-title-c,
.v2x .dir-why-card.is-lead .dir-why-desc { color: #fff; }
.v2x .dir-why-card.is-lead .dir-why-rule { background: rgba(255,255,255,.82); opacity: 1; }

/* ── 5 · The corner ribbon ───────────────────────────────────────────────────
   Absolute and flush to the corner, not an inline pill: a two-word promise and
   a five-word one then leave the plate at the same height on every card. */
.v2x .dir-why-card.is-lead .dir-why-tag {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-start: 0;
  gap: 5px;
  padding: 6px 12px 6px 14px;
  border-radius: 0;
  border-end-end-radius: 14px;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .1em;
  line-height: 1.4;
  box-shadow: none;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: none;
}

/* ── 6 · Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .v2x .dir-why-card { padding: 20px 14px 18px; }
  .v2x .dir-why-card.is-lead { grid-column: 1 / -1; padding: 22px 18px; }
  .v2x .dir-why-ico { width: 50px; height: 50px; border-radius: 15px; margin-bottom: 12px; }
  .v2x .dir-why-title-c { font-size: 14.5px; }
  .v2x .dir-why-desc { font-size: 12.5px; }
}

/* ── 7 · Heading sparkles ────────────────────────────────────────────────────
/* ── 8 · The dot motif ───────────────────────────────────────────────────────
   Four dots in the tone, scattered around the plate. FIXED positions, not
   random ones: the set has to look identical on every card or it reads as noise
   rather than as a motif. The lead card keeps its own dot FIELD and drifting
   particles, which do the same job against the gradient. */
.v2x .dir-why-dotset {
  position: absolute;
  inset-block-start: 18px;
  inset-inline: 0;
  z-index: 0;
  height: 76px;
  pointer-events: none;
}
.v2x .dir-why-dotset i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--dwc-ink);
  transition: opacity .3s ease, transform .4s var(--dwy-ease);
}
.v2x .dir-why-dotset i:nth-child(1) { width: 6px; height: 6px; inset-inline-start: calc(50% - 62px); top: 22px; opacity: .28; }
.v2x .dir-why-dotset i:nth-child(2) { width: 4px; height: 4px; inset-inline-start: calc(50% - 48px); top: 52px; opacity: .18; }
.v2x .dir-why-dotset i:nth-child(3) { width: 5px; height: 5px; inset-inline-start: calc(50% + 44px); top: 12px; opacity: .34; }
.v2x .dir-why-dotset i:nth-child(4) { width: 4px; height: 4px; inset-inline-start: calc(50% + 58px); top: 44px; opacity: .2; }

@media (hover: hover) {
  .v2x .dir-why-card:hover .dir-why-dotset i:nth-child(1) { transform: translate(-3px,-4px); opacity: .5; }
  .v2x .dir-why-card:hover .dir-why-dotset i:nth-child(2) { transform: translate(-5px, 3px); opacity: .34; }
  .v2x .dir-why-card:hover .dir-why-dotset i:nth-child(3) { transform: translate( 4px,-3px); opacity: .56; }
  .v2x .dir-why-card:hover .dir-why-dotset i:nth-child(4) { transform: translate( 6px, 4px); opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
  .v2x .dir-why-dotset i { transition: none; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §CAT — HOMEPAGE CATEGORY-TILE PARITY (2026-08-13)
   ═══════════════════════════════════════════════════════════════════════════
   The browse rail is now the homepage's `.hpx-cat` recipe. The piece that was
   missing is the RESTING TONE HALO behind the plate — the one bit of colour a
   tile carries at rest, and what makes a row read as a designed set rather than
   as a row of outlines.

   The other change that matters is alignment: the count pill and the action
   both take `margin-top: auto`, so they pin to the foot of the track and the
   row stays level whether a name runs to one line or two. A min-height on the
   name aligns it too, but leaves a visible hole under every short name — which
   is most of them.

   No `.hpx-cat-star` equivalent: the featured flag it keys off does not exist
   in this rail's data, and a star that never lights is worse than no star.
   ═══════════════════════════════════════════════════════════════════════════ */

.v2x .dir-cat-card {
  gap: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(16,24,40,.04),
    0 10px 22px -18px rgba(16,24,40,.28);
}
body.theme-dark .v2x .dir-cat-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.38),
    0 10px 22px -18px rgba(0,0,0,.7);
}

/* The halo. `::after` is already the tone bar along the bottom edge, so this
   takes `::before`, which was free. */
.v2x .dir-cat-card::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  z-index: 0;
  width: 116px; height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dtc-bg) 0%, transparent 70%);
  transform: translateX(-50%);
  opacity: .9;
  transition: opacity .26s ease, transform .3s var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  .v2x .dir-cat-card:hover::before { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

/* Load-bearing with the halo. An absolutely-positioned pseudo at z-index 0
   paints ABOVE non-positioned in-flow content — so without this the halo would
   cover the plate and the name it is supposed to sit behind. */
.v2x .dir-cat-card > * { position: relative; z-index: 1; }

/* ── The plate ─────────────────────────────────────────────────────────────
   66/19px with the glow in its own hue, matched to the counter deck and the
   feature row so all three bands read as one family. */
.v2x .dir-cat-card-ico {
  width: 66px; height: 66px;
  border-radius: 19px;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 22px -10px var(--dtc-ink);
}
body.theme-dark .v2x .dir-cat-card-ico {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -10px rgba(0,0,0,.8);
}

/* ── Copy ────────────────────────────────────────────────────────────────── */
.v2x .dir-cat-card-nm { margin: 0; font-size: 16px; font-weight: 740; line-height: 1.3; letter-spacing: -.012em; }
.v2x .dir-cat-card-desc { margin: 9px 0 0; font-size: 12.5px; line-height: 1.55; color: #3D4757; } /* 9.39:1 on the white card */
body.theme-dark .v2x .dir-cat-card-desc { color: #C7CAD1; }

/* ── The count and the action ──────────────────────────────────────────────
   Both pinned to the foot of the track. The `+` rule restores the gap between
   them: a tile with no count still needs the pill's slot or its button sits
   higher than its neighbours' and the row goes ragged. */
.v2x .dir-cat-card-cnt {
  margin-top: auto;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -.002em;
  white-space: nowrap;
}
.v2x .dir-cat-card-arr {
  width: 40px; height: 40px;
  margin-top: auto;
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--dtc-line);
}
.v2x .dir-cat-card-cnt + .dir-cat-card-arr { margin-top: 16px; }
/* The hover fill sets `border-color`, which is now nothing — carry the ring in
   the box-shadow slot it actually uses. */
@media (hover: hover) {
  .v2x .dir-cat-card:hover .dir-cat-card-arr {
    box-shadow: inset 0 0 0 1.5px transparent, 0 6px 14px -4px var(--dtc-shadow);
  }
}

@media (max-width: 900px) {
  .v2x .dir-cat-card-ico { width: 58px; height: 58px; border-radius: 17px; margin-bottom: 13px; }
  .v2x .dir-cat-card::before { width: 100px; height: 100px; top: -14px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §STAR — HOMEPAGE HEADING SPARKLES (2026-08-13)
   ═══════════════════════════════════════════════════════════════════════════
   The flanks are now MASKED PSEUDO-ELEMENTS, the homepage recipe verbatim: one
   74x44 cluster per side holding a large star, a small star and a dot,
   SCATTERED — big star upper-left, small star lower-middle, dot upper-right.

   The markup version this replaces laid the same three shapes out in a
   horizontal inline-flex ROW with an 11px gap. Same glyphs, wrong arrangement:
   a row reads as a bullet list of stars, a scatter reads as a sparkle. The
   spans were deleted rather than hidden.

   A MASK and not a coloured data-URI, so the shapes follow the brand token in
   BOTH themes — a baked-in fill would stay light-mode blue at night.

   The heading goes back to `inline-block`: the flanks anchor to 100% of it, and
   on a block `h2` that is the full column, so they would sit at the page edges
   instead of beside the words. As a flex item in a centred column it still
   shrink-wraps, which is what makes the anchor land on the text.
   ═══════════════════════════════════════════════════════════════════════════ */

.v2x .dir-cat-title,
.v2x .dir-why-title,
.v2x .dir-nr-title {
  position: relative;
  display: inline-block;
  gap: 0;
}

.v2x .dir-cat-title::before, .v2x .dir-cat-title::after,
.v2x .dir-why-title::before, .v2x .dir-why-title::after,
.v2x .dir-nr-title::before,  .v2x .dir-nr-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 74px; height: 44px;
  background: var(--brand-blue);
  opacity: .5;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 44'%3E%3Cpath d='M20 4c1.6 6.2 3.4 8 9.6 9.6C23.4 15.2 21.6 17 20 23.2 18.4 17 16.6 15.2 10.4 13.6 16.6 12 18.4 10.2 20 4z'/%3E%3Cpath d='M47 20c1.1 4.3 2.4 5.6 6.7 6.7-4.3 1.1-5.6 2.4-6.7 6.7-1.1-4.3-2.4-5.6-6.7-6.7 4.3-1.1 5.6-2.4 6.7-6.7z'/%3E%3Ccircle cx='60' cy='11' r='2.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 44'%3E%3Cpath d='M20 4c1.6 6.2 3.4 8 9.6 9.6C23.4 15.2 21.6 17 20 23.2 18.4 17 16.6 15.2 10.4 13.6 16.6 12 18.4 10.2 20 4z'/%3E%3Cpath d='M47 20c1.1 4.3 2.4 5.6 6.7 6.7-4.3 1.1-5.6 2.4-6.7 6.7-1.1-4.3-2.4-5.6-6.7-6.7 4.3-1.1 5.6-2.4 6.7-6.7z'/%3E%3Ccircle cx='60' cy='11' r='2.6'/%3E%3C/svg%3E");
  animation: dir-hd-twinkle 4.5s cubic-bezier(.22,.61,.36,1) infinite;
}

body.theme-dark .v2x .dir-cat-title::before, body.theme-dark .v2x .dir-cat-title::after,
body.theme-dark .v2x .dir-why-title::before, body.theme-dark .v2x .dir-why-title::after,
body.theme-dark .v2x .dir-nr-title::before,  body.theme-dark .v2x .dir-nr-title::after {
  background: var(--brand-blue-light);
}

/* The leading cluster is the trailing one mirrored, so the pair reads as a
   matched set rather than as the same shape printed twice. */
.v2x .dir-cat-title::before,
.v2x .dir-why-title::before,
.v2x .dir-nr-title::before {
  inset-inline-end: calc(100% + 10px);
  transform: translateY(-50%) scaleX(-1);
  animation-name: dir-hd-twinkle-flip;
}
.v2x .dir-cat-title::after,
.v2x .dir-why-title::after,
.v2x .dir-nr-title::after {
  inset-inline-start: calc(100% + 10px);
  animation-delay: 2.2s;
}

@keyframes dir-hd-twinkle {
  0%, 100% { opacity: .32; transform: translateY(-50%) scale(.94); }
  50%      { opacity: .62; transform: translateY(-50%) scale(1.04); }
}
/* `scaleX(-1)` is part of the mirrored cluster's transform, so it needs its own
   keyframes — sharing the one above drops the mirror on the first frame. */
@keyframes dir-hd-twinkle-flip {
  0%, 100% { opacity: .32; transform: translateY(-50%) scale(.94) scaleX(-1); }
  50%      { opacity: .62; transform: translateY(-50%) scale(1.04) scaleX(-1); }
}

/* A flanked heading plus two 74px clusters does not fit a tablet column, and
   they are pure decoration — the first thing to go. Same breakpoint as `/`. */
@media (max-width: 1024px) {
  .v2x .dir-cat-title::before, .v2x .dir-cat-title::after,
  .v2x .dir-why-title::before, .v2x .dir-why-title::after,
  .v2x .dir-nr-title::before,  .v2x .dir-nr-title::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v2x .dir-cat-title::before, .v2x .dir-cat-title::after,
  .v2x .dir-why-title::before, .v2x .dir-why-title::after,
  .v2x .dir-nr-title::before,  .v2x .dir-nr-title::after { animation: none; opacity: .45; }
}