/*
Theme Name: SaaSListy
Theme URI: https://saaslisty.local/
Author: Dani
Author URI: https://saaslisty.local/
Description: Modern AI & SaaS tools directory with Workflow Stacks, Free Reality Check, Alive Tracker, Tool Duels, Bento grid layouts, user reviews, bookmark accounts, head-to-head comparisons, and SEO HowTo schema.
Version: 4.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saaslisty
Tags: directory, bento-grid, dark-mode, modern, orange, yellow, custom-post-types
*/

:root {
  --bg: #121212;
  --s1: #1A1A1A;
  --s2: #242424;
  --line: #2E2E2E;
  --ink: #FFFFFF;
  --mut: #A3A3A3;
  --or: #FF4A12;
  --ye: #FFE81F;
  --on: #121212;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --f: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--f);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a, button {
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1;
  font-weight: 800;
}

.o { color: var(--or); }
.y { color: var(--ye); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ----------------------------------------------------
   SITE HEADER / NAV
---------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 36px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(14px);
  z-index: 1000;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  flex: none;
  margin-right: 20px;
  text-decoration: none;
  color: var(--ink);
}

.logo-mark {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s var(--ease);
}

.logo:hover .logo-mark {
  transform: scale(1.05);
}

.nav nav {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.nav nav a:hover {
  color: var(--ink);
}

.nav .btn-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-left: auto;
}

.btn {
  background: var(--or);
  color: var(--on);
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 26px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn.y {
  background: var(--ye);
  color: var(--on);
}

.btn.dk {
  background: var(--on);
  color: var(--or);
  align-self: flex-start;
}

.btn.dk:hover {
  filter: brightness(1.2);
}

.mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  color: var(--ink);
}

/* ----------------------------------------------------
   HERO BENTO GRID (DESIGN 3)
---------------------------------------------------- */
.t {
  border-radius: 32px;
  padding: 36px;
  background: var(--s1);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

/* Tile A: Main Hero (spans 2 cols, 2 rows) */
.t.a {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 520px;
}

.pill {
  margin: 0;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
  width: fit-content;
  background: rgba(255, 255, 255, 0.03);
}

.t.a h1 {
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.sl {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.search {
  display: flex;
  gap: 8px;
  max-width: 580px;
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 6px 6px 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search:focus-within {
  border-color: var(--ye);
  box-shadow: 0 0 0 2px rgba(255, 232, 31, 0.2);
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 17px var(--f);
  height: 50px;
}

.search input::placeholder {
  color: #777777;
}

.search .btn {
  min-height: 50px;
  padding: 0 28px;
}

.pop {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--mut);
  font-size: 14px;
}

.pop a, .pop button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pop a:hover, .pop button:hover {
  border-color: var(--ye);
  background: rgba(255, 232, 31, 0.05);
}

/* Tile B: Electric Orange CTA */
.t.b {
  background: var(--or);
  color: var(--on);
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  transition: transform 0.2s ease;
}

.t.b:hover {
  transform: translateY(-2px);
}

.t.b h3 {
  font-size: 32px;
  line-height: 1.1;
  color: var(--on);
}

.t.b p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on);
  opacity: 0.9;
}

/* Tile C: Bright Yellow Quick Tools */
.t.c {
  background: var(--ye);
  color: var(--on);
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.2s ease;
}

.t.c:hover {
  transform: translateY(-2px);
}

.t.c .lab {
  color: var(--on);
  opacity: 0.75;
}

.t.c a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 21px;
  padding: 12px 0;
  border-top: 1px solid rgba(18, 18, 18, 0.2);
  color: var(--on);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.t.c a:hover {
  opacity: 0.8;
  transform: translateX(4px);
}

.t.c a span {
  font-size: 22px;
  line-height: 1;
}

.lab {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mut);
}

/* Tile D: Categories Selector (spans 2 cols) */
.t.d {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.t.d .chips {
  margin: 0;
}

/* ----------------------------------------------------
   DIRECTORY SECTION
---------------------------------------------------- */
.dir {
  padding: 72px 48px 88px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.dh {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
}

h2 {
  font-size: clamp(32px, 4vw, 56px);
}

.count {
  color: var(--mut);
  font-size: 15px;
  margin: 0;
  font-weight: 500;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chips button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--mut);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s ease;
}

.chips button:hover {
  color: var(--ink);
  border-color: var(--mut);
}

.chips .on, .chips button.active {
  background: var(--ye);
  color: var(--on);
  border-color: var(--ye);
  font-weight: 700;
}

/* Pricing pills */
.pricing-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pricing-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sort-group { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sort-group .lab { font-size: 13px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.dir-sort-select { background: var(--s2); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; height: 38px; padding: 0 16px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; outline: none; transition: border-color .2s; }
.dir-sort-select:focus { border-color: var(--ye); }

.pricing-group .lab {
  margin-right: 4px;
}

.pricing-chip {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--mut);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.pricing-chip:hover {
  color: var(--ink);
  border-color: var(--mut);
}

.pricing-chip.active {
  background: var(--or);
  color: var(--on);
  border-color: var(--or);
  font-weight: 700;
}

/* ----------------------------------------------------
   TOOL GRID + COLOUR-FLOOD CARD
   Desktop: hover floods the card from where the cursor entered.
   Touch: the card crossing the middle of the screen floods; tap to hold.
   (.on is toggled by main.js)
---------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  --c: var(--or);
  --x: 100%;
  --y: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 28px;
  min-height: 330px;
  background: var(--s1);
  border: 1px solid var(--line);
  animation: sl-rise .8s var(--ease) both;
  animation-delay: calc(min(var(--i, 0), 8) * 70ms);
  transition: transform .5s var(--ease), border-color .5s;
  -webkit-tap-highlight-color: transparent;
}
.card[data-tone="1"] { --c: var(--ye); }
.card[data-tone="2"] { --c: #fff; }

.card .fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  clip-path: circle(0 at var(--x, 100%) var(--y, 100%));
  transition: clip-path .75s cubic-bezier(.7, 0, .2, 1);
}
.card:hover .fill, .card.on .fill { clip-path: circle(160% at var(--x, 100%) var(--y, 100%)); }
.card:hover, .card.on { transform: translateY(-4px) scale(1.012); border-color: var(--c); }

.card .wm {
  position: absolute;
  right: -6px;
  bottom: -46px;
  z-index: -1;
  pointer-events: none;
  font-size: 250px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px #333;
  transition: transform .8s var(--ease), -webkit-text-stroke-color .5s;
}
.card:hover .wm, .card.on .wm { transform: translate(-14px, -16px) rotate(-4deg); -webkit-text-stroke-color: rgba(18, 18, 18, .16); }

.card .top { display: flex; justify-content: space-between; align-items: flex-start; }

.card .av {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px; font-weight: 800;
  background: var(--c); color: var(--on);
  transition: background .4s .1s, color .4s .1s, transform .6s var(--ease);
}
.card:hover .av, .card.on .av { background: var(--on); color: var(--c); transform: rotate(360deg); }

.card .rt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700;
  color: var(--ye);
  transition: color .4s .1s;
}
.card:hover .rt, .card.on .rt { color: var(--on); }

.card .cat {
  margin-top: 8px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut);
  transition: color .4s .1s;
}
.card:hover .cat, .card.on .cat { color: rgba(18, 18, 18, .7); }

.card h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 30px; line-height: 1.02; font-weight: 800; letter-spacing: -.035em;
  transition: color .4s .1s;
}
.card:hover h3, .card.on h3, .card:hover h3 a, .card.on h3 a { color: var(--on); }
.card .vf { display: inline-flex; font-size: 20px; color: #4ade80; --chk: #121212; transition: color .4s; }
.card:hover .vf, .card.on .vf { color: var(--on); --chk: var(--c); }

.card p {
  margin: 0; max-width: 92%; min-height: 46px;
  font-size: 15px; line-height: 1.5;
  color: var(--mut);
  transition: color .4s .1s;
}
.card:hover p, .card.on p { color: rgba(18, 18, 18, .82); }

.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.card .tags span {
  font-size: 13px; font-weight: 500;
  color: var(--mut);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
  transition: .4s .1s;
}
.card:hover .tags span, .card.on .tags span { color: var(--on); border-color: rgba(18, 18, 18, .35); }

.card .ft {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 14px;
  border: 0;
  color: var(--mut); font-size: 14px;
  transition: color .4s .1s;
}
.card:hover .ft, .card.on .ft { color: rgba(18, 18, 18, .75); }
.card .ft b { display: inline-block; color: var(--ink); transition: color .4s .1s; }
.card:hover .ft b, .card.on .ft b { color: var(--on); }
.card .n.bump { animation: sl-bump .5s var(--ease); }

.card .acts { display: flex; gap: 8px; align-items: center; }

.card .save {
  min-height: 46px; padding: 0 20px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink);
  font-weight: 700;
  touch-action: manipulation;
  transition: .3s var(--ease);
}
.card .save .i { font-size: 15px; }
.card:hover .save, .card.on .save { border-color: rgba(18, 18, 18, .4); color: var(--on); }
.card .save:hover,
.card .save.saved { background: var(--on); color: var(--c); border-color: var(--on); }
.card .save.saved .i { animation: sl-pop .5s var(--ease); }

.card .go {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px;
  background: var(--c); color: var(--on);
  touch-action: manipulation;
  transition: transform .5s var(--ease), background .4s, color .4s;
}
.card .go .i { transform: rotate(-45deg); transition: transform .5s var(--ease); }
.card.on .go { background: var(--on); color: var(--c); }
.card.on .go .i { transform: rotate(0); }
.card .go:hover { transform: scale(1.12); }

.i { width: 1em; height: 1em; fill: currentColor; flex: none; }

@keyframes sl-rise { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sl-bump { 40% { transform: translateY(-6px) scale(1.3); } }
@keyframes sl-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.5) rotate(-12deg); } 100% { transform: scale(1); } }

/* Empty state */
.tools-empty-state {
  grid-column: 1 / -1;
  padding: 64px 20px;
  text-align: center;
  font-size: 24px;
  color: var(--mut);
  border: 1px dashed var(--line);
  border-radius: 24px;
}

/* ----------------------------------------------------
   CTA BANNER (YELLOW)
---------------------------------------------------- */
.cta {
  margin: 0 48px 72px;
  border-radius: 32px;
  background: var(--ye);
  color: var(--on);
  padding: 72px 56px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 1440px;
}

.cta h2 {
  font-size: clamp(34px, 4.6vw, 64px);
  max-width: 760px;
  line-height: 1.05;
  color: var(--on);
}

.cta p {
  margin: 16px 0 0;
  font-size: 18px;
  max-width: 520px;
  line-height: 1.5;
  color: var(--on);
  opacity: 0.9;
}

.cta .btn {
  background: var(--on);
  color: var(--ye);
  min-height: 56px;
  padding: 0 36px;
  font-size: 17px;
  font-weight: 700;
}

.cta .btn:hover {
  background: #000000;
  color: #FFFFFF;
}

/* ----------------------------------------------------
   FOOTER
---------------------------------------------------- */
footer.site-footer,
footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--mut);
  font-size: 14px;
  margin-top: auto;
  padding: 56px 48px 32px;
  width: 100%;
}

.footer-wrap {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2.8fr;
  gap: 48px;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 320px;
}

.footer-brand .logo {
  margin-right: 0;
}

.footer-tagline {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mut);
  margin: 0;
}

.footer-nav {
  display: block;
}

.footer-grid-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: var(--mut);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
  display: inline-flex;
  align-items: center;
}

.footer-links a:hover {
  color: var(--ink);
  transform: translateX(2px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--mut);
}

.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10B981;
  font-size: 12px;
  font-weight: 600;
}

.footer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

/* ----------------------------------------------------
   MODALS (Submit a Tool, Sign In)
---------------------------------------------------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  max-width: 560px;
  width: 100%;
  padding: 36px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  color: var(--ink);
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--s2);
  color: var(--mut);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.modal-close-btn:hover {
  color: var(--ink);
  border-color: var(--or);
}

.modal-h2 {
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.modal-desc {
  font-size: 15px;
  color: var(--mut);
  margin-bottom: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.form-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--s2);
  color: var(--ink);
  font-family: var(--f);
  font-size: 15px;
  outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--ye);
}

.form-textarea {
  min-height: 90px;
  resize: vertical;
}

.btn-modal-submit {
  width: 100%;
  min-height: 50px;
  border-radius: 999px;
  background: var(--or);
  color: var(--on);
  font-weight: 700;
  font-size: 16px;
  border: 0;
  cursor: pointer;
  margin-top: 8px;
  transition: filter 0.15s ease;
}

.btn-modal-submit:hover {
  filter: brightness(1.1);
}

/* ----------------------------------------------------
   LAYOUT HELPERS
---------------------------------------------------- */
#main { flex: 1 0 auto; width: 100%; }
.skip-link:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; clip: auto; padding: 10px 18px; background: var(--ye); color: var(--on); border-radius: 999px; z-index: 10000; font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 2px solid var(--ye); outline-offset: 3px; }

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
}
.nav nav .nav-menu a {
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  color: var(--mut);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: color .15s;
}
.nav nav .nav-menu a:hover,
.nav nav .nav-menu .current-menu-item a {
  color: var(--ink);
}
.nav-submit-highlight {
  color: var(--or) !important;
  font-weight: 800 !important;
}

/* EXPLORE DROPDOWN FLYOUT */
.nav-dropdown-item {
  position: relative;
}
.nav-dropdown-toggle {
  cursor: pointer;
}
.nav-drop-arrow {
  font-size: 10px;
  opacity: .7;
  transition: transform .15s;
}
.nav-dropdown-item:hover .nav-drop-arrow {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 310px;
  background: #18181B;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  display: none;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  z-index: 1010;
}
.nav-dropdown-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-dropdown-item:hover .nav-dropdown-menu,
.nav-dropdown-item:focus-within .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-dropdown-menu a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s;
  white-space: normal !important;
}
.nav-dropdown-menu a:hover {
  background: #27272A;
}
.nav-dropdown-menu .nav-ico {
  font-size: 18px;
  flex: none;
}
.nav-dropdown-menu strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  font-weight: 800;
}
.nav-dropdown-menu small {
  display: block;
  font-size: 11px;
  color: var(--mut);
  font-weight: 500;
}

:root[data-theme="light"] .nav-dropdown-menu {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
}
:root[data-theme="light"] .nav-dropdown-menu a:hover {
  background: #F1F5F9;
}

.nav nav { font-size: inherit; letter-spacing: 0; text-transform: none; display: flex; justify-content: flex-start; }

.tools-empty-state { padding: 64px 20px; text-align: center; font-size: 24px; color: var(--mut); border: 1px dashed var(--line); border-radius: 24px; margin-bottom: 20px; }
.tools-empty-state[hidden] { display: none; }

/* ----------------------------------------------------
   MODAL: WordPress login form + status
---------------------------------------------------- */
#saaslisty-loginform p { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
#saaslisty-loginform label { font-weight: 600; font-size: 14px; }
#saaslisty-loginform input[type="text"],
#saaslisty-loginform input[type="password"] { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--s2); color: var(--ink); font: 15px var(--f); outline: 0; }
#saaslisty-loginform input[type="text"]:focus,
#saaslisty-loginform input[type="password"]:focus { border-color: var(--ye); }
#saaslisty-loginform .login-remember { flex-direction: row; align-items: center; }
#saaslisty-loginform .login-remember label { display: flex; gap: 8px; align-items: center; color: var(--mut); font-weight: 500; }
#saaslisty-loginform input[type="submit"] { width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: var(--or); color: var(--on); font: 700 16px var(--f); cursor: pointer; }
#saaslisty-loginform input[type="submit"]:hover { filter: brightness(1.1); }

/* ----------------------------------------------------
   INNER PAGES: archive / search / blog / 404
---------------------------------------------------- */
.page-wrap { max-width: 1440px; margin: 0 auto; padding: 48px 48px 88px; width: 100%; }
.page-head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; margin-bottom: 36px; }
.page-head h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -.04em; line-height: 1.02; }
.page-desc { color: var(--mut); font-size: 18px; max-width: 640px; }
.empty-note { color: var(--mut); font-size: 20px; padding: 48px; border: 1px dashed var(--line); border-radius: 24px; text-align: center; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--s1); border: 1px solid var(--line); border-radius: 28px; transition: border-color .2s, transform .3s var(--ease); }
.post-card:hover { border-color: var(--or); transform: translateY(-3px); }
.post-card h2 { font-size: 26px; line-height: 1.1; letter-spacing: -.03em; }
.post-card p { color: var(--mut); }
.read-more { margin-top: auto; font-weight: 700; color: var(--ye); }

.navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.nav-links .page-numbers { min-width: 44px; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; color: var(--mut); font-weight: 600; }
.nav-links .page-numbers:hover { color: var(--ink); border-color: var(--mut); }
.nav-links .page-numbers.current { background: var(--ye); border-color: var(--ye); color: var(--on); font-weight: 700; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.notfound { align-items: center; text-align: center; display: flex; flex-direction: column; gap: 18px; padding-top: 96px; }
.notfound .big404 { font-size: clamp(120px, 24vw, 280px); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: transparent; -webkit-text-stroke: 2px var(--or); }

/* ----------------------------------------------------
   SINGLE TOOL / POST / PAGE
---------------------------------------------------- */
.single-tool-container { max-width: 1040px; margin: 40px auto 80px; padding: 0 24px; width: 100%; }
.single-tool-container .related { margin-top: 64px; }
.single-tool-container .related h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 24px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--mut); margin-bottom: 24px; min-height: 44px; }
.back-link:hover { color: var(--ye); }

.single-tool-card { background: var(--s1); border: 1px solid var(--line); border-radius: 32px; padding: 48px; display: flex; flex-direction: column; gap: 28px; }
.single-tool-title { font-size: clamp(32px, 4vw, 52px); letter-spacing: -.04em; line-height: 1.02; }
.badge { font-size: 13px; border-radius: 999px; padding: 4px 14px; font-weight: 700; border: 1px solid; }
.badge-ye { color: var(--ye); border-color: var(--ye); }
.tags-line { border-top: 1px solid var(--line); padding-top: 24px; }
.tags-line span { font-size: 13px; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; }

.single-tool-content { font-size: 17px; line-height: 1.75; color: var(--ink); }
.single-tool-content > * + * { margin-top: 1.2em; }
.single-tool-content p { color: #ccc; }
.single-tool-content h2, .single-tool-content h3 { margin-top: 1.6em; line-height: 1.15; }
.single-tool-content h2 { font-size: 30px; } .single-tool-content h3 { font-size: 22px; }
.single-tool-content a { color: var(--ye); text-decoration: underline; text-underline-offset: 3px; }
.single-tool-content ul, .single-tool-content ol { padding-left: 1.4em; color: #ccc; }
.single-tool-content blockquote { border-left: 3px solid var(--or); padding-left: 20px; color: var(--mut); }
.single-tool-content img { border-radius: 20px; }

.comments { margin-top: 24px; }
.comment-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--s2); color: var(--ink); font: 15px var(--f); }
.comment-form .submit { min-height: 48px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--or); color: var(--on); font-weight: 700; }

/* ----------------------------------------------------
   RESPONSIVE
---------------------------------------------------- */
@media (max-width: 1100px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav, .dir, footer { padding-left: 24px; padding-right: 24px; }
  .page-wrap { padding: 32px 24px 64px; }
  .cta { margin: 0 24px 48px; padding: 40px 28px; }

  /* Header: logo | sign-in + burger, nav drops down */
  .nav { padding-top: 14px; padding-bottom: 14px; }
  .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .nav nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #121212; border-bottom: 1px solid var(--line); padding: 8px 24px 20px; }
  .nav.open nav { display: block; }
  .nav nav .nav-menu { flex-direction: column; gap: 0; }
  .nav nav .nav-menu a { display: flex; align-items: center; min-height: 50px; font-size: 15px; border-bottom: 1px solid var(--line); }
  .nav-dropdown-menu { position: static; transform: none; width: 100%; box-shadow: none; border: none; background: transparent; padding: 0 0 8px 16px; display: flex; }
  .nav-dropdown-item::after { display: none; }

  .t.a, .t.d { grid-column: span 1 !important; grid-row: span 1 !important; }
  .t.a { min-height: 0; }
  .post-grid { grid-template-columns: 1fr !important; }
  .single-tool-card { padding: 28px; border-radius: 28px; }
}

@media (max-width: 640px) {
  .t { padding: 26px; border-radius: 28px; }
  .dir { padding-top: 48px; padding-bottom: 64px; }
  .dh { flex-direction: column; align-items: flex-start; }
  .filter-row { flex-direction: column; align-items: flex-start; }
  .chips { overflow-x: auto; flex-wrap: nowrap; margin: 0 -24px; padding: 0 24px 4px; scrollbar-width: none; max-width: calc(100% + 48px); }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: none; }
  .t.d .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; max-width: none; }
  .search { padding-left: 18px; }
  .search .btn { padding: 0 20px; }
  .card { padding: 22px; min-height: 0; border-radius: 24px; gap: 12px; }
  .card.on { transform: none; }
  .card h3 { font-size: 27px; }
  .card .wm { font-size: 190px; right: -8px; bottom: -34px; }
  .card p { max-width: 100%; }
  .card .ft { padding-top: 8px; }
  .card .save { min-height: 48px; }
  .card .go { width: 48px; height: 48px; }
  .cta { padding: 32px 24px; }
  .cta .btn { width: 100%; }
  .modal-card { padding: 28px 22px; border-radius: 24px; }
  .single-tool-card { padding: 22px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { max-width: 100%; }
  .footer-grid-cols { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 360px) {
  .card .save .st { display: none; }
  .card .save { padding: 0 16px; }
}

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


/* ----------------------------------------------------
   TRENDING THIS WEEK (LEADERBOARD TABLE)
   Columns: rank, tool, category, rating, saves + trend line, week movement, go.
---------------------------------------------------- */
.trend {
  padding: 24px 48px 96px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.trend-box {
  background: #161616;
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 36px;
  overflow: hidden;
}

.trend-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ye);
  margin: 0 0 14px;
}
.trend-pill svg { width: 13px; height: 13px; fill: var(--or); }

.trend h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}

.trend-intro p.lead {
  margin: 10px 0 0;
  color: var(--mut);
  max-width: 460px;
}

.trend-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trend-actions .btn,
.trend-actions .btn-ghost {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  transition: transform .3s var(--ease), border-color .3s, color .3s;
}
.trend-actions .btn { background: var(--ye); color: var(--on); }
.trend-actions .btn:hover { background: var(--ye); color: var(--on); transform: translateY(-3px); }
.trend-actions .btn .i { width: 18px; height: 18px; }
.trend-actions .btn-ghost { border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.trend-actions .btn-ghost:hover { border-color: var(--ye); color: var(--ye); transform: translateY(-3px); }

/* the table */
.trend-table { display: flex; flex-direction: column; }

.tt-head,
.tr-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1fr) .7fr minmax(0, 1.6fr) .7fr 36px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}

.tt-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
  border-bottom: 1px solid var(--line);
}

.trend-list { list-style: none; margin: 0; padding: 0; min-width: 0; }

.tr-row {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: 14px;
  transition: background .25s var(--ease);
}
.tr-row:hover,
.tr-row:focus-visible { background: var(--s1); }

.tr-num { font-size: 20px; font-weight: 900; color: var(--mut); }
.tr-row.first .tr-num { color: var(--ye); }

.tr-tool { display: flex; align-items: center; gap: 12px; min-width: 0; }

.tr-av {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--s2);
  color: var(--or);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
}

.tr-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tr-name .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-name .vf { --chk: var(--bg); flex: none; display: inline-flex; width: 18px; height: 18px; }
.tr-name .vf .i { width: 18px; height: 18px; fill: var(--ye); }

.tr-cat { color: var(--mut); font-size: 14px; }
.tr-rate { color: var(--ye); font-weight: 700; font-size: 14px; }
.tr-rate.none { color: var(--mut); font-weight: 600; }

/* saves number + trend line */
.tr-saves { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tr-saves b { flex: none; min-width: 34px; font-size: 18px; font-weight: 800; line-height: 1; }
.tr-spark { flex: 1; min-width: 60px; max-width: 120px; height: 30px; overflow: visible; }
.tr-spark polyline { fill: none; stroke: var(--or); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tr-spark circle { fill: var(--or); stroke: #161616; stroke-width: 2; }
.tr-row.first .tr-spark polyline { stroke: var(--ye); }
.tr-row.first .tr-spark circle { fill: var(--ye); }

/* live update flash */
.tr-saves b.live-pulse { animation: livePulse .9s var(--ease); }
@keyframes livePulse { 0% { color: var(--ye); transform: scale(1.35); } 100% { color: inherit; transform: scale(1); } }
.tr-saves b { display: inline-block; transform-origin: left center; }
.trend-list li { position: relative; }

/* week movement */
.tr-move { font-style: normal; font-size: 13px; font-weight: 800; color: var(--mut); }
.tr-move.up { color: #4ade80; }
.tr-move.dn { color: #ff6b6b; }
.tr-move.new { color: var(--ye); letter-spacing: .06em; }

.tr-go {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--s2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background .25s, color .25s;
}
.tr-go .i { width: 15px; height: 15px; }
.tr-row:hover .tr-go,
.tr-row:focus-visible .tr-go { background: var(--ye); color: var(--on); }

/* trending: responsive */
@media (max-width: 900px) {
  .trend { padding: 8px 24px 72px; }
  .trend-box { padding: 28px 22px; border-radius: 26px; }
}

@media (max-width: 760px) {
  .tt-head, .tr-row { grid-template-columns: 30px minmax(0, 1.6fr) minmax(0, 1.5fr) 52px 30px; gap: 10px; padding: 12px 6px; }
  .hm { display: none; }
  .tr-name { font-size: 15px; }
  .tr-av { width: 38px; height: 38px; border-radius: 12px; font-size: 17px; }
  .tr-spark { min-width: 40px; }
  .trend-actions { width: 100%; }
  .trend-actions .btn, .trend-actions .btn-ghost { flex: 1; }
}

@media (max-width: 420px) {
  .tr-spark { display: none; }
  .tr-av { display: none; }
}

/* ----------------------------------------------------
   HERO: CENTERED STATEMENT
---------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 88px 24px 80px;
  max-width: 1440px;
  margin: 0 auto;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mut);
}
.hero-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--or); display: inline-block; }

.hero h1 {
  font-size: clamp(48px, 9.4vw, 128px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .9;
}

.hero .search {
  width: 100%;
  max-width: 720px;
  margin: 44px auto 0;
  padding: 8px 8px 8px 30px;
  align-items: center;
  gap: 14px;
  background: var(--s1);
  border: 1.5px solid var(--line);
  text-align: left;
}
.hero .search .s-ic { flex: none; color: var(--mut); }
.hero .search input { font-size: 20px; font-weight: 500; height: 58px; }
.hero .search .btn { min-height: 60px; padding: 0 38px; font-size: 18px; }

.hero .pop { justify-content: center; margin-top: 26px; font-size: 15px; font-weight: 500; }
.hero .pop button { min-height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600; }

/* floating tool pills (hover to lift, click to search) */
.hf {
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 10px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  transform: rotate(var(--r, 0deg));
  transition: transform .4s var(--ease);
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--ink);
}
.hf:hover { transform: translateY(-6px) rotate(0deg); }
.hf-av {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
  background: var(--or); color: var(--on);
}
.hf1 { --r: -8deg; left: 5%;  top: 120px; }
.hf2 { --r: 7deg;  right: 5%; top: 92px; background: var(--ye); color: var(--on); border-color: var(--ye); }
.hf2 .hf-av { background: var(--on); color: var(--ye); }
.hf3 { --r: 6deg;  left: 7%;  top: 400px; background: var(--or); color: var(--on); border-color: var(--or); }
.hf3 .hf-av { background: var(--on); color: var(--or); }
.hf4 { --r: -6deg; right: 7%; top: 380px; }
.hf4 .hf-av { background: var(--ye); }

@media (max-width: 1180px) {
  .hf { display: none; }
  .hero-inner { padding-top: 72px; padding-bottom: 64px; }
}

@media (max-width: 640px) {
  .hero-inner { padding: 48px 20px 48px; }
  .hero h1 { letter-spacing: -.045em; }
  .hero .search { margin-top: 32px; padding: 6px 6px 6px 20px; gap: 10px; }
  .hero .search .s-ic { display: none; }
  .hero .search input { font-size: 17px; height: 52px; }
  .hero .search .btn { min-height: 52px; padding: 0 22px; font-size: 16px; }
  .hero .pop { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf { transition: none; }
}


/* ----------------------------------------------------
   SINGLE TOOL: BENTO DETAIL
---------------------------------------------------- */
.bd { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 48px 96px; }
.bd-back { display: inline-flex; align-items: center; gap: 10px; margin: 30px 0 24px 16px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--mut); transition: color .25s, transform .25s; }
.bd-back:hover { color: var(--ye); transform: translateX(-4px); }

.bd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 252px 252px minmax(262px, auto); gap: 16px; }
.bd-tile { position: relative; min-width: 0; border-radius: 32px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .4s var(--ease), border-color .3s; }
.bd-tile:hover { transform: translateY(-5px); }
.bd-label { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bd-label-mut { color: var(--mut); }

/* name */
.bd-name { grid-column: span 2; grid-row: span 2; overflow: hidden; background: var(--s1); border: 1px solid var(--line); border-radius: 36px; padding: 40px; }
.bd-wm { position: absolute; right: -20px; top: -90px; font-size: 560px; font-weight: 900; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--line); pointer-events: none; user-select: none; }
.bd-name-top { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.bd-av { width: 72px; height: 72px; border-radius: 22px; background: var(--or); color: var(--on); display: grid; place-items: center; font-size: 34px; font-weight: 800; }
.bd-pill { padding: 8px 14px; border-radius: 99px; color: var(--on); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bd-pill-ye { background: var(--ye); }
.bd-pill-or { background: var(--or); }
.bd-name-bot { position: relative; }
.bd-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 12px; }
.bd-title { margin: 0 0 18px; font-weight: 900; letter-spacing: -.065em; line-height: .86; overflow-wrap: anywhere; }
.bd-title-lg { font-size: 124px; }
.bd-title-md { font-size: 84px; }
.bd-title-sm { font-size: 60px; line-height: .92; }
.bd-lead { font-size: 22px; line-height: 1.4; font-weight: 500; max-width: 520px; }

/* rating */
.bd-rating { background: var(--ye); color: var(--on); }
.bd-big { font-size: 110px; font-weight: 900; letter-spacing: -.07em; line-height: .8; }
.bd-big-sm { font-size: 72px; }
.bd-sub { font-size: 15px; font-weight: 700; margin-top: 12px; }

/* visit */
.bd-visit { overflow: hidden; background: var(--or); color: var(--on); }
.bd-visit-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bd-visit-txt { font-size: 34px; font-weight: 900; letter-spacing: -.04em; line-height: .95; }
.bd-arrow { flex: none; transition: transform .4s var(--ease); }
.bd-visit:hover .bd-arrow { transform: translate(8px, -8px); }
.bd-visit-off { background: var(--s2); color: var(--mut); }
.bd-visit-off:hover { transform: none; }

/* saves */
.bd-saves, .bd-facts, .bd-about { background: var(--s1); border: 1px solid var(--line); }
.bd-saves-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bd-outline { font-size: 96px; font-weight: 900; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--or); }
.bd-people { font-size: 14px; font-weight: 600; color: var(--mut); margin-top: 10px; }
.bd-save { height: 52px; min-width: 48px; padding: 0 22px; border-radius: 99px; border: 0; background: var(--or); color: var(--on); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 15px; transition: transform .2s var(--ease), background .2s; }
.bd-save:hover { transform: translateY(-2px); }
.bd-save .i { font-size: 18px; }
.bd-save.saved { background: var(--ye); }
.bd-save.saved .i { animation: sl-pop .5s var(--ease); }

/* facts */
.bd-fact { font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 8px; display: block; overflow-wrap: anywhere; }
.bd-fact-link { color: var(--ye); }
.bd-fact-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.bd-facts-sep { border-top: 1px solid var(--line); padding-top: 18px; }

/* about */
.bd-about { grid-column: span 3; justify-content: center; padding: 36px; }
.bd-about h2 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 14px; }
.bd-content { font-size: 17px; line-height: 1.65; color: var(--mut); max-width: 760px; }
.bd-content > * + * { margin-top: 1em; }
.bd-content h2, .bd-content h3 { color: var(--ink); line-height: 1.15; margin-top: 1.4em; }
.bd-content h2 { font-size: 24px; } .bd-content h3 { font-size: 19px; }
.bd-content a { color: var(--ye); text-decoration: underline; text-underline-offset: 3px; }
.bd-content ul, .bd-content ol { padding-left: 1.4em; }
.bd-content blockquote { border-left: 3px solid var(--or); padding-left: 18px; }
.bd-content img { border-radius: 20px; }

/* tags */
.bd-tags { background: var(--or); color: var(--on); gap: 18px; }
.bd-tag-list { display: flex; flex-direction: column; gap: 10px; }
.bd-tag { min-height: 48px; padding: 0 20px; border-radius: 99px; border: 2px solid var(--on); background: var(--on); color: var(--ink); display: flex; align-items: center; font-size: 16px; font-weight: 700; transition: border-color .25s, color .25s, transform .25s var(--ease); }
.bd-tag:hover { border-color: var(--ye); color: var(--ye); transform: translateX(5px); }

/* related */
.bd-related { margin-top: 60px; padding: 0 16px; }
.bd-related h2 { font-size: clamp(34px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 24px; }
.bd-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 -16px; }
.bd-rc { min-height: 250px; padding: 26px; border-radius: 28px; background: var(--s1); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; transition: background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease); }
.bd-rc-top { display: flex; justify-content: space-between; align-items: center; }
.bd-rc-av { width: 48px; height: 48px; border-radius: 14px; background: var(--s2); color: var(--or); display: grid; place-items: center; font-size: 22px; font-weight: 800; transition: background .35s, color .35s; }
.bd-rc-st { color: var(--ye); font-weight: 700; font-size: 15px; transition: color .35s; }
.bd-rc-meta { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; transition: color .35s; }
.bd-rc-name { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 8px; }
.bd-rc-desc { font-size: 14px; line-height: 1.45; color: var(--mut); transition: color .35s; }
.bd-rc:hover, .bd-rc:focus-visible { background: var(--or); color: var(--on); border-color: var(--or); transform: translateY(-6px); }
.bd-rc:hover .bd-rc-meta, .bd-rc:hover .bd-rc-desc, .bd-rc:hover .bd-rc-st { color: var(--on); }
.bd-rc:hover .bd-rc-av { background: var(--on); color: var(--ye); }

/* alternatives */
.bd-alt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.bd-alt-head h2 { margin-bottom: 0; }
.bd-alt .bd-rel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-alt .bd-rc { min-height: 280px; }
.bd-alt .bd-rc[hidden] { display: none; }
.bd-alt .bd-rc-name { font-size: 24px; }
.bd-rc-price { color: var(--mut); }
.bd-rc-price.free { color: #4ade80; }
.bd-rc-why { font-size: 14px; line-height: 1.45; color: var(--ink); }
.bd-rc-why b { color: var(--ye); font-weight: 700; }
.bd-rc-foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--mut); border-top: 1px solid var(--line); padding-top: 14px; transition: color .35s, border-color .35s; }
.bd-rc-go { width: 30px; height: 30px; border-radius: 50%; background: var(--s2); display: grid; place-items: center; color: var(--ink); transition: background .35s, color .35s; }
.bd-rc:hover .bd-rc-foot { color: var(--on); border-color: rgba(18,18,18,.25); }
.bd-rc:hover .bd-rc-price, .bd-rc:hover .bd-rc-price.free, .bd-rc:hover .bd-rc-why, .bd-rc:hover .bd-rc-why b { color: var(--on); }
.bd-rc:hover .bd-rc-go { background: var(--on); color: var(--ye); }
.alt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.alt-chips button { min-height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--mut); font-size: 14px; font-weight: 700; transition: border-color .25s, color .25s, background .25s; }
.alt-chips button:hover { border-color: var(--ye); color: var(--ye); }
.alt-chips button.on { background: var(--ye); border-color: var(--ye); color: var(--on); }
@media (max-width: 1280px) { .bd-alt .bd-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 1100px) {
  .bd { padding: 0 32px 80px; }
  .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(230px, auto); }
  .bd-name { grid-row: auto; min-height: 460px; }
  .bd-about { grid-column: span 2; }
  .bd-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bd { padding: 0 24px 72px; }
}
@media (max-width: 640px) {
  .bd { padding: 0 16px 64px; }
  .bd-back { margin-left: 0; }
  .bd-grid { grid-template-columns: 1fr; gap: 12px; }
  .bd-name, .bd-about { grid-column: auto; }
  .bd-name { padding: 28px; min-height: 400px; border-radius: 28px; }
  .bd-wm { font-size: 380px; top: -60px; }
  .bd-title-lg { font-size: 72px; }
  .bd-title-md { font-size: 54px; }
  .bd-title-sm { font-size: 40px; }
  .bd-lead { font-size: 18px; }
  .bd-tile { border-radius: 26px; }
  .bd-about { padding: 26px; }
  .bd-tile:hover { transform: none; }
  .bd-related { padding: 0; margin-top: 44px; }
  .bd-rel-grid, .bd-alt .bd-rel-grid { grid-template-columns: 1fr; margin: 0; }
  .bd-rc { min-height: 0; }
}
@media (hover: none) {
  .bd-tile:hover, .bd-rc:hover { transform: none; }
}


/* ----------------------------------------------------
   TOOL LOGOS (featured image / logo URL)
   Avatars with a logo are rounded squares (app-icon style):
   .logo-bleed = icon brings its own background, fills the tile edge to edge;
   .logo-pad   = transparent logo, centred with breathing room on a light (or dark) tile.
   The image is absolutely positioned so its pixel size can never change the avatar size.
---------------------------------------------------- */
.has-logo, .card .av.has-logo, .card.on .av.has-logo, .tr-row .tr-av.has-logo, .tr-row:hover .tr-av.has-logo, .tr-row.first .tr-av.has-logo,
.hf .hf-av.has-logo, .bd-rc .bd-rc-av.has-logo, .bd-rc:hover .bd-rc-av.has-logo { position: relative; background: transparent; overflow: hidden; padding: 0; }
.has-logo img { position: absolute; max-width: none; border: 0; border-radius: 0; }
.has-logo img.logo-bleed { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-logo img.logo-pad { inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 17%; box-sizing: border-box; }
.has-logo img { image-rendering: auto; }

/* Same rounded-square shape for letter avatars so the grid looks consistent */
.card .av, .card.on .av { border-radius: 18px; }
.hf-av { border-radius: 14px; }
.card .av.has-logo, .card.on .av.has-logo { transform: none; flex: none; width: 56px; height: 56px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.bd-av.has-logo { border-radius: 22px; }


/* ----------------------------------------------------
   COMPACT CARDS (4 per row) + STAR RATING
---------------------------------------------------- */
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1280px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .grid { grid-template-columns: 1fr; } }

.card { padding: 20px; border-radius: 24px; min-height: 0; gap: 10px; }
.card .av { width: 48px; height: 48px; font-size: 22px; }
.card .av.has-logo, .card.on .av.has-logo { width: 48px; height: 48px; }
.card .cat { margin-top: 4px; font-size: 11px; }
.card h3 { font-size: 23px; }
.card .vf { font-size: 17px; }
.card p { max-width: 100%; min-height: 0; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .tags { gap: 6px; }
.card .tags span { font-size: 12px; padding: 2px 10px; }
.card .wm { font-size: 170px; bottom: -34px; right: -4px; }
.card .ft { padding-top: 8px; font-size: 13px; }
.card .save { min-height: 38px; padding: 0 14px; font-size: 14px; }
.card .go { width: 38px; height: 38px; font-size: 17px; }
.card.on { transform: translateY(-4px) scale(1.01); }

/* rating row */
.card .rate { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.card .stars { display: inline-flex; flex-direction: row-reverse; gap: 1px; }
.card .star { border: 0; background: none; padding: 2px 1px; font-size: 19px; line-height: 1; color: #3a3a3a; cursor: pointer; transition: color .15s, transform .15s var(--ease); touch-action: manipulation; }
.card .star.f { color: var(--ye); }
.card .stars:hover .star { color: #3a3a3a; }
.card .stars:hover .star:hover, .card .stars:hover .star:hover ~ .star { color: var(--ye); }
.card .star:hover { transform: scale(1.25); }
.card .rate-txt { font-size: 13px; color: var(--mut); white-space: nowrap; transition: color .4s .1s; }
.card .rate-txt b { color: var(--ink); font-weight: 700; transition: color .4s .1s; }
.card .rate.thanks .rate-txt::after { content: ' \2713'; color: #4ade80; }
.card .ft { margin-top: 0; }

.card.on .star { color: rgba(18, 18, 18, .22); }
.card.on .star.f, .card.on .stars:hover .star:hover, .card.on .stars:hover .star:hover ~ .star { color: var(--on); }
.card.on .stars:hover .star { color: rgba(18, 18, 18, .22); }
.card.on .rate-txt, .card.on .rate-txt b { color: rgba(18, 18, 18, .8); }


/* ----------------------------------------------------
   BROWSE BY CATEGORY (HEAT BARS) - NEW in 4.0.0
---------------------------------------------------- */
.cats { padding: 0 48px 96px; max-width: 1440px; margin: 0 auto; width: 100%; }
.cats-head { margin-bottom: 28px; }
.cats-head h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.cats-head .lead { margin: 10px 0 0; color: var(--mut); max-width: 460px; }
.cats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.cc { background: var(--s1); border: 1px solid var(--line); border-radius: 24px; padding: 0 0 20px; overflow: hidden; display: flex; flex-direction: column; }
.cc::before { content: ""; display: block; height: 6px; background: var(--or); flex: none; }
.cc-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 22px 22px 0; }
.cc-hd h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cc-cnt { background: var(--or); color: var(--on); font-weight: 800; font-size: 13px; padding: 4px 11px; border-radius: 8px; flex: none; }
.cc-tg { color: var(--mut); font-style: italic; font-size: 14px; padding: 6px 22px 14px; }
.cc-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.cc-row { display: block; padding: 10px 22px; color: var(--ink); text-decoration: none; transition: background .2s var(--ease); }
.cc-row:hover, .cc-row:focus-visible { background: var(--s2); }
.cc-row:focus-visible, .cc-btn:focus-visible { outline: 2px solid var(--ye); outline-offset: -2px; }
.cc-top { display: flex; align-items: center; gap: 12px; }
.cc-rk { font-size: 13px; font-weight: 600; width: 22px; color: var(--mut); flex: none; }
.cc-nm { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cc-sv { font-size: 12px; font-weight: 700; color: var(--ye); flex: none; }
.cc-av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--on); flex: none; }
.cc-c0 { background: var(--or); }
.cc-c1 { background: var(--ye); }
.cc-bar { display: block; height: 5px; border-radius: 9px; background: var(--line); margin: 8px 0 0 64px; overflow: hidden; }
.cc-bar i { display: block; height: 100%; width: var(--w); border-radius: 9px; background: var(--or); transform-origin: left; animation: cc-grow 1.1s var(--ease) both; transition: background .2s; }
.cc-row:hover .cc-bar i { background: var(--ye); }
@keyframes cc-grow { from { transform: scaleX(0); } }

.cc-ft { display: flex; align-items: center; justify-content: space-between; margin: 10px 22px 0; padding-top: 16px; border-top: 2px dashed var(--line); }
.cc-stack { display: flex; }
.cc-stack .cc-av { width: 28px; height: 28px; font-size: 12px; border: 2px solid var(--s1); margin-left: -8px; border-radius: 50%; }
.cc-stack .cc-av:first-child { margin-left: 0; }
.cc-btn { background: var(--ye); color: var(--on); font-family: inherit; font-weight: 700; font-size: 14px; padding: 9px 18px; border: 0; border-radius: 99px; cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease); }
.cc-btn:hover { background: var(--or); transform: translateY(-2px); }

@media (max-width: 1100px) { .cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cats { padding: 0 24px 64px; } }
@media (max-width: 680px) { .cats-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cc-bar i { animation: none; } .cc-btn:hover { transform: none; } }

/* ----------------------------------------------------
   CATEGORY & PRICING LANDING PAGES (SEO)
---------------------------------------------------- */
.tax-page { max-width: 1200px; margin: 0 auto; padding: 48px 48px 96px; }
.tax-hero { margin-bottom: 40px; }
.tax-breadcrumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mut); margin-bottom: 24px; font-weight: 500; }
.tax-breadcrumbs a { color: var(--mut); transition: color .2s; }
.tax-breadcrumbs a:hover { color: var(--ink); }
.tax-breadcrumbs .tax-sep { opacity: .4; }
.tax-breadcrumbs .tax-cur { color: var(--ye); font-weight: 600; }

.tax-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tax-tag { display: inline-block; background: var(--or); color: var(--on); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-radius: 999px; }
.tax-count-badge { display: inline-block; background: var(--s2); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.tax-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 16px; }
.tax-lead { font-size: 18px; color: var(--mut); line-height: 1.6; max-width: 760px; }

.tax-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 20px 24px; background: var(--s1); border: 1px solid var(--line); border-radius: 18px; margin-bottom: 36px; }
.tax-pills-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tax-ctrl-lbl { font-size: 13px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.tax-pricing-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tax-pricing-chips .chip { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); color: var(--mut); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .2s; }
.tax-pricing-chips .chip:hover { color: var(--ink); border-color: var(--mut); }
.tax-pricing-chips .chip.active { background: var(--ye); border-color: var(--ye); color: var(--on); font-weight: 700; }

.tax-sort-wrap { display: flex; align-items: center; gap: 10px; }
.tax-sort-form { display: flex; align-items: center; gap: 10px; }
.tax-sort-form select { background: var(--s2); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; height: 38px; padding: 0 14px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; outline: none; }
.tax-sort-form select:focus { border-color: var(--ye); }

.tax-empty-state { text-align: center; padding: 64px 24px; background: var(--s1); border: 1px dashed var(--line); border-radius: 24px; }
.tax-empty-state h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.tax-empty-state p { color: var(--mut); font-size: 15px; margin-bottom: 24px; }

.tax-related-cats { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--line); }
.tax-related-cats h2 { font-size: 22px; font-weight: 800; margin-bottom: 20px; letter-spacing: -.02em; }
.tax-related-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.tax-other-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--s1); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s; }
.tax-other-pill:hover { border-color: var(--ye); background: var(--s2); }
.tax-pill-n { font-size: 11px; font-weight: 700; background: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--mut); }

.tax-cta { margin: 64px 0 0; }

/* ----------------------------------------------------
   CATEGORY TOP 3 EDITORIAL PODIUM
---------------------------------------------------- */
.tax-podium-section { margin: 10px 0 36px; }
.tax-podium-header { margin-bottom: 20px; }
.tax-podium-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ye); background: rgba(255, 232, 31, 0.1); border: 1px solid rgba(255, 232, 31, 0.25); padding: 4px 12px; border-radius: 999px; margin-bottom: 8px; }
.tax-podium-title { font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.02em; }
.tax-podium-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) {
  .tax-podium-grid { grid-template-columns: 1fr; }
}
.tax-podium-card { position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease; }
.tax-podium-card:hover { transform: translateY(-4px); border-color: var(--ye); }
.tax-podium-card.podium-card-1 { border-color: rgba(255, 232, 31, 0.45); box-shadow: 0 10px 30px rgba(255, 232, 31, 0.08); }
.tax-podium-card.podium-card-2 { border-color: rgba(148, 163, 184, 0.35); }
.tax-podium-card.podium-card-3 { border-color: rgba(217, 119, 6, 0.35); }
.podium-rank-pill { display: inline-flex; align-items: center; align-self: flex-start; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; letter-spacing: 0.03em; }
.podium-card-1 .podium-rank-pill { background: rgba(255, 232, 31, 0.18); color: #FFE81F; border: 1px solid rgba(255, 232, 31, 0.35); }
.podium-card-2 .podium-rank-pill { background: rgba(203, 213, 225, 0.15); color: #E2E8F0; border: 1px solid rgba(203, 213, 225, 0.3); }
.podium-card-3 .podium-rank-pill { background: rgba(245, 158, 11, 0.15); color: #FBBF24; border: 1px solid rgba(245, 158, 11, 0.3); }
.podium-card-body { display: flex; flex-direction: column; flex: 1; }
.podium-tool-av { width: 52px; height: 52px; border-radius: 12px; margin-bottom: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--s2); border: 1px solid var(--line); font-size: 22px; font-weight: 800; color: var(--ink); }
.podium-tool-av img { width: 100%; height: 100%; object-fit: cover; }
.podium-tool-name { font-size: 18px; font-weight: 800; margin: 0 0 8px; line-height: 1.3; }
.podium-tool-name a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
.podium-tool-name a:hover { color: var(--ye); }
.podium-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.podium-score { font-size: 13px; font-weight: 800; color: #F59E0B; }
.podium-price-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--mut); border: 1px solid var(--line); }
.podium-desc { font-size: 13.5px; line-height: 1.5; color: var(--mut); margin: 0 0 20px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.podium-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.btn-podium-detail { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: rgba(255, 74, 18, 0.12); color: var(--ye); border: 1px solid rgba(255, 74, 18, 0.3); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: all 0.15s ease; }
.btn-podium-detail:hover { background: var(--ye); color: #000; border-color: var(--ye); }
.btn-podium-visit { display: inline-flex; align-items: center; justify-content: center; padding: 9px 12px; border-radius: 10px; background: var(--s2); color: var(--ink); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: all 0.15s ease; }
.btn-podium-visit:hover { background: var(--s3); color: var(--ink); }

/* ----------------------------------------------------
   USER REVIEWS WITH TEXT & STAR RATINGS
---------------------------------------------------- */
.tr-section { margin-top: 56px; padding: 40px; background: var(--s1); border: 1px solid var(--line); border-radius: 28px; }
.tr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.tr-head h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.tr-lead { font-size: 15px; color: var(--mut); }
.tr-write-btn { background: var(--ye); color: var(--on); font-weight: 700; border-radius: 999px; padding: 12px 24px; font-size: 14px; }
.tr-write-btn:hover { background: var(--or); }

.tr-scorecard { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 28px; background: var(--s2); border: 1px solid var(--line); border-radius: 20px; margin-bottom: 36px; align-items: center; }
.tr-score-left { text-align: center; border-right: 1px solid var(--line); padding-right: 32px; }
.tr-big-num { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.tr-score-stars { font-size: 24px; color: var(--line); letter-spacing: 2px; margin: 10px 0 6px; }
.tr-score-stars .star.on { color: var(--ye); }
.tr-score-sub { font-size: 13px; color: var(--mut); font-weight: 500; }

.tr-bars { display: flex; flex-direction: column; gap: 8px; }
.tr-bar-row { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--mut); }
.tr-bar-lbl { width: 32px; flex: none; text-align: right; }
.tr-bar-track { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; position: relative; }
.tr-bar-fill { height: 100%; background: var(--or); border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.tr-bar-count { width: 32px; flex: none; font-size: 12px; text-align: left; }

.tr-form-wrap { margin-bottom: 36px; }
.tr-form-box { background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 32px; }
.tr-form-box h3 { font-size: 20px; font-weight: 800; margin-bottom: 20px; letter-spacing: -.02em; }
.tr-field-rating { margin-bottom: 20px; }
.tr-field-rating label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin-bottom: 8px; }
.tr-star-picker { display: flex; align-items: center; gap: 6px; }
.tr-star-picker .star-btn { background: none; border: 0; font-size: 32px; line-height: 1; color: var(--line); cursor: pointer; padding: 0 2px; transition: color .15s, transform .15s; }
.tr-star-picker .star-btn:hover, .tr-star-picker .star-btn.on { color: var(--ye); }
.tr-star-picker .star-btn:active { transform: scale(1.2); }
.tr-picker-lbl { margin-left: 14px; font-size: 14px; font-weight: 600; color: var(--ink); }

.tr-row-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.tr-field { margin-bottom: 18px; }
.tr-field label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin-bottom: 8px; }
.tr-field input, .tr-field textarea { width: 100%; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; color: var(--ink); font-family: inherit; font-size: 14px; outline: none; transition: border-color .2s; }
.tr-field input:focus, .tr-field textarea:focus { border-color: var(--ye); }
.tr-user-badge { font-size: 14px; color: var(--ye); font-weight: 600; margin-bottom: 16px; }

.tr-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.tr-cancel-btn { background: var(--s2); color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px; font-size: 14px; }
.tr-cancel-btn:hover { color: var(--ink); border-color: var(--mut); }
.tr-status-msg { font-size: 14px; font-weight: 600; }
.tr-status-msg.ok { color: #4ade80; }
.tr-status-msg.err { color: #f87171; }

.tr-list { display: flex; flex-direction: column; gap: 16px; }
.tr-card { background: var(--s2); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.tr-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.tr-card-user { display: flex; align-items: center; gap: 14px; }
.tr-card-av { width: 38px; height: 38px; border-radius: 50%; background: var(--or); color: var(--on); font-weight: 800; font-size: 16px; display: grid; place-items: center; flex: none; }
.tr-card-author { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tr-verified-pill { font-size: 11px; font-weight: 700; background: var(--s1); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: #4ade80; }
.tr-card-date { font-size: 12px; color: var(--mut); display: block; margin-top: 2px; }
.tr-card-rating { font-size: 18px; color: var(--ye); letter-spacing: 2px; }
.tr-card-body { font-size: 15px; line-height: 1.6; color: var(--ink); }

.tr-empty-card { text-align: center; padding: 48px 24px; border: 1px dashed var(--line); border-radius: 16px; background: var(--s2); }
.tr-empty-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.tr-empty-sub { font-size: 14px; color: var(--mut); max-width: 500px; margin: 0 auto; }

/* ----------------------------------------------------
   SAVED TOOLS & NAVIGATION BADGE
---------------------------------------------------- */
.btn-saved { display: inline-flex; align-items: center; gap: 8px; background: var(--s1); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .2s; }
.btn-saved:hover { border-color: var(--ye); color: var(--ye); }
.btn-saved svg { width: 14px; height: 14px; fill: currentColor; }
.saved-badge { background: var(--or); color: var(--on); font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; min-width: 18px; text-align: center; }

.saved-page .tax-hero { margin-bottom: 32px; }
.saved-sync-callout { display: flex; align-items: center; gap: 14px; background: var(--s2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; font-size: 14px; color: var(--ink); margin-top: 24px; flex-wrap: wrap; }
.saved-sync-callout .sync-icon { font-size: 18px; }
.saved-sync-callout .btn-sm { font-size: 12px; padding: 6px 14px; background: var(--ye); color: var(--on); font-weight: 700; border-radius: 999px; margin-left: auto; }

@media (max-width: 900px) {
  .tax-page { padding: 32px 24px 64px; }
  .tr-section { padding: 24px; border-radius: 20px; }
  .tr-scorecard { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .tr-score-left { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 20px; }
  .tr-row-inputs { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------
   SPONSORED / FEATURED LISTINGS
---------------------------------------------------- */
.card.sponsored { border-color: rgba(255, 232, 31, 0.45); box-shadow: 0 0 24px rgba(255, 232, 31, 0.08); position: relative; }
.card.sponsored::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ye), var(--or)); border-radius: 24px 24px 0 0; }
.badge-sponsored { display: inline-flex; align-items: center; gap: 4px; background: var(--ye); color: var(--on); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; margin-left: auto; }
.card-deal-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 74, 18, 0.15); color: #FF4A12; border: 1px solid rgba(255, 74, 18, 0.35); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; margin-left: auto; box-shadow: 0 0 12px rgba(255, 74, 18, 0.15); }
:root[data-theme="light"] .card-deal-badge { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
.bd-pill-sp { background: var(--ye); color: var(--on); font-weight: 800; }

/* Modal Tier Selection */
.tier-select-group { margin-top: 20px; margin-bottom: 24px; }
.tier-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.tier-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--s2); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; transition: all .2s; }
.tier-card input { margin-top: 3px; cursor: pointer; accent-color: var(--ye); }
.tier-card:hover { border-color: var(--mut); }
.tier-card.active, .tier-card:has(input:checked) { border-color: var(--ye); background: rgba(255, 232, 31, 0.06); }
.tier-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tier-info b { font-size: 14px; color: var(--ink); }
.tier-gold { color: var(--ye) !important; }
.tier-desc { font-size: 11px; color: var(--mut); line-height: 1.4; }
.tier-price { font-size: 15px; font-weight: 800; color: var(--mut); flex: none; }
.tier-price-sp { color: var(--ye); }

/* ----------------------------------------------------
   NEWSLETTER CAPTURE SECTION
---------------------------------------------------- */
.newsletter-bar { max-width: 1200px; margin: 48px auto 0; padding: 0 48px; }
.nl-container { background: linear-gradient(135deg, var(--s1) 0%, #201a14 100%); border: 1px solid var(--line); border-radius: 28px; padding: 48px 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
.nl-container::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255, 74, 18, 0.2) 0%, transparent 70%); pointer-events: none; }
.nl-badge { display: inline-block; background: var(--or); color: var(--on); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 12px; border-radius: 999px; margin-bottom: 14px; }
.nl-info h2 { font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 12px; }
.nl-desc { font-size: 16px; color: var(--mut); line-height: 1.5; }

.nl-input-row { display: flex; gap: 10px; background: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 20px; transition: border-color .2s; }
.nl-input-row:focus-within { border-color: var(--ye); }
.nl-email-field { flex: 1; background: transparent; border: 0; outline: none; font-family: inherit; font-size: 15px; color: var(--ink); }
.nl-email-field::placeholder { color: var(--mut); }
.nl-submit-btn { background: var(--ye); color: var(--on); font-weight: 700; font-size: 14px; padding: 12px 24px; border-radius: 999px; border: 0; cursor: pointer; flex: none; transition: background .2s, transform .2s; }
.nl-submit-btn:hover { background: var(--or); transform: translateY(-1px); }

.nl-status-msg { margin-top: 10px; font-size: 13px; font-weight: 600; min-height: 20px; }
.nl-status-msg.ok { color: #4ade80; }
.nl-status-msg.err { color: #f87171; }
.nl-micro { display: block; font-size: 12px; color: var(--mut); margin-top: 8px; opacity: .8; }

@media (max-width: 900px) {
  .newsletter-bar { padding: 0 24px; }
  .nl-container { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; }
  .tier-options { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .nl-input-row { flex-direction: column; background: transparent; border: 0; padding: 0; gap: 10px; }
  .nl-email-field { background: var(--s2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; width: 100%; }
  .nl-submit-btn { width: 100%; border-radius: 14px; padding: 14px; }
}

/* ----------------------------------------------------
   SIDE-BY-SIDE TOOL COMPARISON
---------------------------------------------------- */
.compare-page { max-width: 1200px; margin: 0 auto; padding: 48px 48px 96px; }
.cmp-pickers { background: var(--s1); border: 1px solid var(--line); border-radius: 20px; padding: 24px; margin-bottom: 40px; }
.cmp-dropdowns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cmp-slot { display: flex; flex-direction: column; gap: 8px; }
.cmp-slot label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.cmp-select { background: var(--s2); border: 1px solid var(--line); border-radius: 12px; height: 44px; padding: 0 16px; color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; outline: none; transition: border-color .2s; }
.cmp-select:focus { border-color: var(--ye); }

.cmp-table-wrap { overflow-x: auto; background: var(--s1); border: 1px solid var(--line); border-radius: 24px; margin-bottom: 48px; }
.cmp-table { width: 100%; border-collapse: collapse; text-align: left; }
.cmp-table th, .cmp-table td { padding: 20px 24px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; }
.cmp-table th:last-child, .cmp-table td:last-child { border-right: 0; }
.cmp-table tr:last-child td { border-bottom: 0; }

.cmp-metric-col { width: 220px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); background: var(--bg); }
.cmp-metric-lbl { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); background: var(--s1); }

.cmp-head-box { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cmp-av { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: var(--or); color: var(--on); }
.cmp-head-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.cmp-head-name a { color: var(--ink); text-decoration: none; }
.cmp-head-name a:hover { color: var(--ye); }
.cmp-head-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.vf-badge { background: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; color: #4ade80; }
.cmp-visit-btn { background: var(--ye); color: var(--on); font-size: 13px; font-weight: 700; border-radius: 999px; padding: 8px 16px; margin-top: 4px; }
.cmp-visit-btn:hover { background: var(--or); }

.cmp-pill-cat { background: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cmp-price-badge { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); }
.cmp-price-free { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }
.cmp-price-freemium { color: var(--ye); border-color: rgba(255, 232, 31, 0.4); }
.cmp-price-paid { color: var(--or); border-color: rgba(255, 74, 18, 0.4); }

.cmp-score-cell { display: flex; align-items: center; gap: 6px; }
.cmp-score-num { font-size: 20px; font-weight: 800; color: var(--ink); }
.cmp-score-stars { font-size: 18px; color: var(--ye); }
.cmp-score-sub { font-size: 13px; color: var(--mut); }
.cmp-desc-cell { font-size: 14px; line-height: 1.6; color: var(--ink); max-width: 340px; }

.cmp-tags-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-tag { font-size: 12px; background: var(--s2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--mut); }
.cmp-detail-link { background: var(--s2); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; border-radius: 999px; padding: 8px 18px; }
.cmp-detail-link:hover { border-color: var(--ye); color: var(--ye); }


@media (max-width: 900px) {
  .compare-page { padding: 32px 24px 64px; }
  .cmp-dropdowns { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------
   EXTENDED TOOL FIELDS (Features, Plans, FAQs, Updated)
---------------------------------------------------- */
.bd-pill-date {
  font-size: 12px;
  color: var(--mut);
  background: var(--s2);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 500;
}

.bd-features-box {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.bd-features-box h3, .bd-pricing-box h3, .bd-faq-box h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 16px;
  color: var(--ink);
}
.bd-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}
@media (max-width: 640px) {
  .bd-features-list { grid-template-columns: 1fr; }
}
.bd-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
.feat-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  font-size: 11px;
  font-weight: 900;
  flex: none;
  margin-top: 1px;
}

.bd-pricing-box {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.bd-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 768px) {
  .bd-plans-grid { grid-template-columns: 1fr; }
}
.bd-plan-card {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s, transform .2s;
}
.bd-plan-card:hover {
  border-color: var(--ye);
  transform: translateY(-2px);
}
.bd-plan-card .plan-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.bd-plan-card .plan-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--ye);
  letter-spacing: -.02em;
}
.bd-plan-card .plan-feat {
  font-size: 13px;
  color: var(--mut);
  line-height: 1.45;
}

.bd-faq-box {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.bd-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bd-faq-item {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.bd-faq-item[open] {
  border-color: rgba(255, 232, 31, 0.4);
}
.bd-faq-q {
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.bd-faq-q::-webkit-details-marker {
  display: none;
}
.bd-faq-q::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--mut);
  transition: transform .2s;
}
.bd-faq-item[open] .bd-faq-q::after {
  content: "–";
  color: var(--ye);
}
.bd-faq-a {
  padding: 0 20px 18px;
  font-size: 14px;
  color: var(--mut);
  line-height: 1.6;
}
.bd-faq-a p {
  margin: 0;
}

/* ----------------------------------------------------
   CLAIM THIS LISTING BAR & MODAL
---------------------------------------------------- */
.bd-claim-bar {
  margin-top: 48px;
  background: linear-gradient(135deg, var(--s1) 0%, rgba(255, 74, 18, 0.08) 100%);
  border: 1px dashed var(--line);
  border-radius: 20px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 768px) {
  .bd-claim-bar { flex-direction: column; align-items: flex-start; padding: 20px; }
}
.bd-claim-txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bd-claim-txt b {
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
}
.bd-claim-txt span {
  font-size: 13px;
  color: var(--mut);
  line-height: 1.4;
}
.bd-claim-trigger-btn {
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: all .2s;
}
.bd-claim-trigger-btn:hover {
  background: var(--ye);
  border-color: var(--ye);
  color: var(--on);
  transform: translateY(-1px);
}

/* ----------------------------------------------------
   THEME TOGGLE BUTTON (LIGHT / DARK)
---------------------------------------------------- */
.btn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s, transform .2s;
  flex: none;
}
.btn-theme-toggle:hover {
  border-color: var(--ye);
  transform: scale(1.05);
}
.btn-theme-toggle .icon-sun,
.btn-theme-toggle .icon-moon {
  font-size: 16px;
  line-height: 1;
  display: none;
}
:root:not([data-theme="light"]) .btn-theme-toggle .icon-sun {
  display: block;
}
:root[data-theme="light"] .btn-theme-toggle .icon-moon {
  display: block;
}

/* ----------------------------------------------------
   LIGHT MODE PALETTE & OVERRIDES
---------------------------------------------------- */
:root[data-theme="light"] {
  --bg: #F8F9FA;
  --s1: #FFFFFF;
  --s2: #F1F3F5;
  --line: #E5E7EB;
  --ink: #111827;
  --mut: #6B7280;
  --or: #E63D07;
  --ye: #D97706;
  --on: #FFFFFF;
}

:root[data-theme="light"] body {
  background: var(--bg);
  color: var(--ink);
}

:root[data-theme="light"] .card {
  background: var(--s1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.03);
}
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .card.on {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .card.sponsored {
  border-color: rgba(217, 119, 6, 0.45);
  box-shadow: 0 2px 14px rgba(217, 119, 6, 0.12);
}
:root[data-theme="light"] .modal-card {
  background: #FFFFFF;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--line);
}
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-textarea,
:root[data-theme="light"] .form-select {
  background: #FFFFFF;
  border-color: #D1D5DB;
  color: #111827;
}
:root[data-theme="light"] .form-input:focus,
:root[data-theme="light"] .form-textarea:focus,
:root[data-theme="light"] .form-select:focus {
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(230, 61, 7, 0.12);
}
:root[data-theme="light"] .bd-tile {
  background: var(--s1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
:root[data-theme="light"] .nl-container {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7ED 100%);
  border-color: #FED7AA;
}
:root[data-theme="light"] .cmp-metric-col {
  background: #F3F4F6;
}
:root[data-theme="light"] .tag-filter-chip.on {
  background: var(--ink);
  color: #FFFFFF;
}
:root[data-theme="light"] .card .star {
  color: #D1D5DB;
}
:root[data-theme="light"] .card .star.f {
  color: #F59E0B;
}
:root[data-theme="light"] .card .rate-txt b {
  color: #111827;
}

/* ----------------------------------------------------
   LIVE SEARCH AUTOCOMPLETE DROPDOWN
---------------------------------------------------- */
.search-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 12px;
  background: var(--s1);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  z-index: 9999;
  text-align: left;
  animation: slSlideDown .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes slSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-auto-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.search-auto-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background .15s ease;
}
.search-auto-item:hover,
.search-auto-item.active {
  background: var(--s2);
}
.search-auto-av {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--s2);
}
.search-auto-av .av {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--on);
}
.search-auto-info {
  flex: 1;
  min-width: 0;
}
.search-auto-name {
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-auto-meta {
  font-size: 12px;
  color: var(--mut);
  margin-top: 2px;
}
.search-auto-go {
  font-size: 16px;
  color: var(--mut);
  flex: none;
  transition: transform .15s, color .15s;
}
.search-auto-item:hover .search-auto-go,
.search-auto-item.active .search-auto-go {
  color: var(--ye);
  transform: translate(2px, -2px);
}
.search-auto-empty {
  padding: 24px;
  text-align: center;
  color: var(--mut);
  font-size: 14px;
}
.search-auto-foot {
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  background: var(--s2);
  text-align: center;
}
.search-auto-viewall {
  background: none;
  border: 0;
  color: var(--ye);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.search-auto-viewall:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------
   SINGLE TOOL SHARE TILE
---------------------------------------------------- */
.bd-share {
  background: var(--s1);
  border: 1px solid var(--line);
  gap: 16px;
}
.bd-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.bd-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.bd-share-btn:hover {
  border-color: var(--ye);
  background: var(--ye);
  color: var(--on);
  transform: translateY(-2px);
}

:root[data-theme="light"] .search-autocomplete-dropdown {
  background: #FFFFFF;
  border-color: #E5E7EB;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}
:root[data-theme="light"] .search-auto-item:hover,
:root[data-theme="light"] .search-auto-item.active {
  background: #F3F4F6;
}
:root[data-theme="light"] .search-auto-foot {
  background: #F9FAFB;
  border-color: #E5E7EB;
}
:root[data-theme="light"] .bd-share {
  background: #FFFFFF;
  border-color: #E5E7EB;
}
:root[data-theme="light"] .bd-share-btn {
  background: #F3F4F6;
  border-color: #E5E7EB;
  color: #111827;
}

/* ----------------------------------------------------
   ABOUT CARD SHARE STRIP
---------------------------------------------------- */
.bd-about-share {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.bd-about-share-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ----------------------------------------------------
   FREE REALITY CHECK & ALIVE TRACKER (Full-width Trust Section)
---------------------------------------------------- */
.bd-reality-box {
  width: 100%;
  max-width: 1280px;
  margin: 36px auto 48px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  box-sizing: border-box;
  position: relative;
}

.bd-reality-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.bd-reality-title {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bd-reality-badge {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}

.bd-reality-verified {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mut);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--s2);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.dot-green, .dot-yellow, .dot-red {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.dot-green {
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.dot-yellow {
  background: #F59E0B;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.dot-red {
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.bd-reality-trust-note {
  font-size: 13px;
  color: var(--mut);
  font-weight: 500;
}

.bd-reality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.bd-reality-card {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rc-label {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--mut);
  margin-bottom: 8px;
}

.rc-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.rc-txt {
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.rc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
}

.rc-tag-green {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.rc-tag-orange {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.rc-tag-red {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.rc-tag-gray {
  background: var(--s1);
  color: var(--mut);
  border: 1px solid var(--line);
}

.bd-reality-catch {
  background: rgba(255, 74, 18, 0.08);
  border: 1px solid rgba(255, 74, 18, 0.25);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.catch-pill {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--or);
  background: rgba(255, 74, 18, 0.15);
  padding: 3px 8px;
  border-radius: 6px;
  flex: none;
}

.catch-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

/* ----------------------------------------------------
   FEATURE 5: STACK OF THE WEEK SPOTLIGHT
---------------------------------------------------- */
.stack-spotlight-section {
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 20px;
}

.spotlight-card {
  background: linear-gradient(145deg, var(--s1) 0%, rgba(24, 24, 27, 0.95) 100%);
  border: 1px solid rgba(255, 74, 18, 0.3);
  border-radius: 24px;
  padding: 36px 40px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.spotlight-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.spotlight-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #FFE81F;
  background: rgba(255, 232, 31, 0.12);
  border: 1px solid rgba(255, 232, 31, 0.3);
  padding: 5px 14px;
  border-radius: 999px;
}

.spotlight-verified-badge {
  font-size: 12px;
  font-weight: 700;
  color: #10B981;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.spotlight-hero-content {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 960px) {
  .spotlight-hero-content {
    grid-template-columns: 1fr;
  }
}

.spotlight-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.spotlight-narrative {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mut);
  margin: 0 0 24px;
}

.spotlight-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

@media (max-width: 600px) {
  .spotlight-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.metric-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-val {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.m-val.text-green { color: #10B981; }
.m-val.text-orange { color: #FF4A12; }
.m-val.text-yellow { color: #FFE81F; }

.m-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.spotlight-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-spotlight-clone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--or);
  color: #FFF;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s, background .15s;
}

.btn-spotlight-clone:hover {
  background: #E03E0B;
  transform: translateY(-1px);
}

.btn-spotlight-browse {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mut);
  text-decoration: none;
  transition: color .15s;
}

.btn-spotlight-browse:hover {
  color: var(--ink);
}

.spotlight-pipeline-col {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}

.pipeline-heading {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mut);
  margin: 0 0 16px;
}

.spotlight-steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.spotlight-step-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.step-num-pill {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--s2);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 900;
  color: var(--ye);
  display: grid;
  place-items: center;
  flex: none;
}

.step-detail {
  flex: 1;
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.step-header strong {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 800;
}

.step-price {
  font-size: 11px;
  font-weight: 800;
  color: var(--or);
  background: rgba(255, 74, 18, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.step-price.free {
  color: #10B981;
  background: rgba(16, 185, 129, 0.1);
}

.step-role {
  font-size: 12px;
  color: var(--mut);
  line-height: 1.4;
  margin: 0;
}

.spotlight-newsletter-box {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.sn-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 4px;
}

.sn-sub {
  font-size: 11.5px;
  color: var(--mut);
  margin: 0 0 10px;
  line-height: 1.4;
}

.sn-form {
  display: flex;
  gap: 8px;
}

.sn-input {
  flex: 1;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink);
}

.sn-btn {
  background: var(--or);
  border: none;
  color: #FFF;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .15s;
}

.sn-btn:hover {
  opacity: .9;
}

/* ----------------------------------------------------
   FEATURE 3: LIVE AI SERVICE HEALTH & UPTIME RADAR
---------------------------------------------------- */
.status-page-main {
  max-width: 1180px;
  margin: 0 auto 64px;
  padding: 0 20px;
}

.status-hero {
  padding: 48px 0 36px;
  text-align: center;
}

.status-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}

.status-global-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #34D399;
  margin-bottom: 18px;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulse-green 1.8s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.status-headline {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 12px;
}

.status-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  margin: 0 0 32px;
}

.status-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 720px) {
  .status-metrics-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.status-metric-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.metric-val {
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  font-family: ui-monospace, monospace;
}

.metric-val.text-green { color: #10B981; }

.metric-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mut);
  letter-spacing: .04em;
}

.status-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 36px 0 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.status-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.status-chip {
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
}

.status-chip:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.2);
}

.status-chip.active {
  background: var(--or);
  border-color: var(--or);
  color: #FFF;
}

.status-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--mut);
  font-weight: 600;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.op { background: #10B981; }
.legend-dot.deg { background: #F59E0B; }
.legend-dot.out { background: #EF4444; }

.status-services-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-service-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .15s;
}

.status-service-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.service-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.service-identity {
  display: flex;
  align-items: center;
  gap: 16px;
}

.service-status-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  flex: none;
}

.service-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 2px;
}

.service-desc {
  font-size: 13px;
  color: var(--mut);
  margin: 0;
}

.service-stats-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.service-latency-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  font-family: ui-monospace, monospace;
}

.lat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
}

.service-uptime-pill {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  gap: 4px;
  align-items: baseline;
}

.service-uptime-pill strong {
  color: #10B981;
  font-weight: 900;
}

.service-uptime-pill small {
  color: var(--mut);
  font-size: 10px;
  text-transform: uppercase;
}

.btn-report-outage {
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}

.btn-report-outage:hover {
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

.service-history-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mut);
  font-weight: 700;
}

.history-center-metric {
  color: var(--ink);
}

.uptime-bar-stream {
  display: flex;
  gap: 3px;
  height: 28px;
  align-items: stretch;
  background: var(--bg);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.bar-unit {
  flex: 1;
  border-radius: 3px;
  background: #10B981;
  transition: transform .1s, opacity .1s;
  cursor: pointer;
  position: relative;
}

.bar-unit:hover {
  transform: scaleY(1.2);
  opacity: .85;
}

.bar-unit.degraded {
  background: #F59E0B;
}

.bar-unit.outage {
  background: #EF4444;
}
.bar-unit.nodata {
  background: #374151;
  opacity: .45;
}

.bar-unit.nodata:hover {
  opacity: .85;
}

.status-pulse-dot.unknown,
.status-mini-bullet.unknown {
  background: #6b7280;
  color: #9ca3af;
}

.status-pulse-dot.degraded,
.status-mini-bullet.degraded {
  background: #F59E0B;
  color: #F59E0B;
}

.status-pulse-dot.outage,
.status-mini-bullet.outage {
  background: #EF4444;
  color: #EF4444;
}

.service-status-icon.unknown {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
  border-color: rgba(107, 114, 128, 0.3);
}

.service-status-icon.degraded {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border-color: rgba(245, 158, 11, 0.3);
}

.service-status-icon.outage {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.service-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.service-status-text {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #10B981;
  font-weight: 700;
}

.status-mini-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
}

.service-ext-link {
  color: var(--mut);
  text-decoration: none;
  font-weight: 700;
  transition: color .15s;
}

.service-ext-link:hover {
  color: var(--or);
}

.status-incidents-section {
  margin-top: 48px;
}

.incidents-heading {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 18px;
}

.incidents-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.incident-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
}

.incident-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.incident-status-pill.resolved {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
}

.incident-timestamp {
  font-size: 12px;
  color: var(--mut);
  font-family: ui-monospace, monospace;
}

.incident-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
}

.incident-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mut);
  margin: 0;
}

.status-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #10B981;
  color: #FFF;
  font-size: 13px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 9999;
  transform: translateY(20px);
  opacity: 0;
  transition: all .25s ease;
}

.status-toast.active {
  transform: translateY(0);
  opacity: 1;
}

/* ----------------------------------------------------
   LIGHT MODE OVERRIDES FOR NEW FEATURES
---------------------------------------------------- */
:root[data-theme="light"] .spotlight-card,
:root[data-theme="light"] .status-metric-card,
:root[data-theme="light"] .status-service-card,
:root[data-theme="light"] .incident-card {
  background: #FFFFFF;
  border-color: #E5E7EB;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

:root[data-theme="light"] .metric-box,
:root[data-theme="light"] .spotlight-pipeline-col,
:root[data-theme="light"] .uptime-bar-stream,
:root[data-theme="light"] .service-latency-pill,
:root[data-theme="light"] .service-uptime-pill {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

:root[data-theme="light"] .status-chip,
:root[data-theme="light"] .btn-report-outage,
:root[data-theme="light"] .btn-copy-prompt,
:root[data-theme="light"] .code-box-toolbar,
:root[data-theme="light"] .step-num-pill,
:root[data-theme="light"] .spotlight-step-item,
:root[data-theme="light"] .sn-input,
:root[data-theme="light"] .starter-model-badge {
  background: #F1F5F9;
  border-color: #E2E8F0;
  color: #334155;
}

/* ----------------------------------------------------
   ARCHIVE WORKFLOW STACKS HERO & PAGE
----------------------------------------------------- */
.stacks-archive-main {
  min-height: calc(100vh - 80px);
}

.stacks-hero-banner {
  padding: 60px 20px 44px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.stacks-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.stacks-hero-inner .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.stacks-hero-inner h1 {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 18px;
}

.stacks-hero-inner h1 .y {
  color: var(--ye);
}

.stacks-hero-lead {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--mut);
  max-width: 720px;
  margin: 0;
}

.stacks-section {
  max-width: 1200px;
  margin: 48px auto 32px;
  padding: 0 20px;
}

.stacks-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stacks-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ye);
  margin-bottom: 6px;
}

.stacks-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 6px;
}

.stacks-desc {
  font-size: 14px;
  color: var(--mut);
  margin: 0;
  max-width: 620px;
  line-height: 1.5;
}

.btn-stacks-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ye);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--s1);
  border: 1px solid var(--line);
  transition: all .2s;
}

.btn-stacks-all:hover {
  background: var(--ye);
  color: var(--on);
  border-color: var(--ye);
}

.btn-submit-workflow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--or);
  border: 1px solid var(--or);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}

.btn-submit-workflow-pill:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.stack-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.stack-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stack-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.stack-chip:hover {
  border-color: var(--ye);
  color: var(--ink);
}

.stack-chip.on {
  background: var(--ye);
  color: var(--on);
  border-color: var(--ye);
}

.stacks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

.stack-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
}

.stack-card:hover {
  border-color: var(--ye);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.stack-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.stack-card-goal-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--s2);
  color: var(--ye);
  border: 1px solid var(--line);
}

.stack-card-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
}

.stack-card-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 8px;
}

.stack-card-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color .2s;
}

.stack-card-title a:hover {
  color: var(--ye);
}

.stack-card-goal {
  font-size: 13.5px;
  color: var(--mut);
  line-height: 1.5;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stack-card-pipeline {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.stack-mini-pill {
  display: inline-flex;
  flex-direction: column;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
}

.stack-mini-pill strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.stack-mini-pill small {
  font-size: 10px;
  color: var(--mut);
  line-height: 1.2;
}

.stack-mini-arrow {
  color: var(--ye);
  font-weight: 800;
  font-size: 13px;
}

.stack-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  gap: 10px;
}

.stack-card-cost {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stack-card-cost .cost-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.stack-card-cost .cost-free-badge {
  font-size: 11px;
  font-weight: 700;
  color: #34D399;
}

.btn-stack-explore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--ye);
  color: var(--on);
  text-decoration: none;
  transition: transform .2s, opacity .2s;
}

.btn-stack-explore:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ----------------------------------------------------
   SINGLE WORKFLOW STACK PAGE (Redesigned & Polished)
---------------------------------------------------- */
.stack-single-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 30px 24px 80px;
}

.stack-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mut);
  text-decoration: none;
  transition: color .2s, transform .2s;
}

.stack-back-link:hover {
  color: var(--ye);
  transform: translateX(-4px);
}

.stack-hero-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  margin-bottom: 40px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .stack-hero-layout {
    grid-template-columns: 1fr;
  }
}

.stack-hero-main {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stack-pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.stack-badge-primary {
  background: var(--ye);
  color: var(--on);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stack-badge-subtle {
  background: var(--s2);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}

.stack-hero-title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 14px;
}

.stack-hero-goal {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  margin: 0 0 28px;
  max-width: 660px;
}

.stack-hero-stats {
  display: flex;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.stack-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stack-stat-item .stat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.stack-stat-item .stat-lab {
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Sidebar Cost Card */
.stack-hero-sidebar {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.cost-small-label {
  font-size: 11.5px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--mut);
}

.cost-big-val {
  font-size: 40px;
  font-weight: 900;
  color: var(--ye);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 8px 0 4px;
}

.cost-sub-text {
  font-size: 13px;
  color: var(--mut);
  font-weight: 500;
}

.stack-cost-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cost-guarantee-note {
  font-size: 12px;
  color: var(--mut);
  line-height: 1.5;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Pipeline Flow */
.stack-pipeline-section {
  margin-top: 48px;
}

.stack-pipeline-header {
  margin-bottom: 28px;
}

.stack-pipeline-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
}

.stack-pipeline-desc {
  font-size: 14.5px;
  color: var(--mut);
  margin: 0;
}

.stack-steps-flow {
  display: flex;
  flex-direction: column;
}

.stack-step-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 28px;
  transition: border-color .2s, transform .2s;
}

.stack-step-card:hover {
  border-color: var(--ye);
  transform: translateY(-2px);
}

.stack-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.stack-step-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.stack-step-index {
  background: var(--s2);
  color: var(--ye);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}

.stack-step-role {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.step-price-tag {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mut);
  background: var(--s2);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.stack-step-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.stack-step-tool-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 280px;
}

.stack-step-tool-av {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--s2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}

.stack-step-tool-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stack-step-tool-meta {
  flex: 1;
}

.stack-step-tool-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 4px;
}

.stack-step-tool-why {
  font-size: 13.5px;
  color: var(--mut);
  margin: 0;
  line-height: 1.5;
}

.stack-step-tool-why strong {
  color: var(--ink);
  margin-right: 4px;
}

.stack-step-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-step-detail {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--s2);
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: all .2s;
}

.btn-step-detail:hover {
  border-color: var(--ye);
  color: var(--ye);
}

.btn-step-visit {
  font-size: 13px;
  font-weight: 700;
  color: var(--on);
  background: var(--or);
  border: 1px solid var(--or);
  padding: 9px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}

.btn-step-visit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Workflow Multi-Tab Launcher */
.btn-launch-workflow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #FF4A12 0%, #FF6B3D 100%);
  color: #FFFFFF;
  border: 1px solid #FF4A12;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 74, 18, 0.28);
  transition: all .2s ease;
}
.btn-launch-workflow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 74, 18, 0.4);
}

/* Step Starter Prompt Box */
.stack-step-prompt-box {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s;
}
.stack-step-prompt-box:hover {
  border-color: rgba(255, 232, 31, 0.4);
}
.stack-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.stack-prompt-lbl {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ye);
}
.btn-copy-step-prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.btn-copy-step-prompt:hover {
  background: var(--ye);
  color: #000000;
  border-color: var(--ye);
}
.btn-copy-step-prompt.copied {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
}
.stack-prompt-code-wrap {
  overflow-x: auto;
}
.stack-prompt-code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #D1D5DB;
  white-space: pre-wrap;
  word-break: break-word;
}

.stack-step-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  gap: 5px;
}

.stack-connector-line {
  width: 2px;
  height: 18px;
  background: var(--line);
}

.stack-connector-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mut);
}

.stack-connector-pill svg {
  color: var(--ye);
}

/* Verdict Box */
.stack-verdict-section {
  margin-top: 48px;
}

.stack-verdict-box {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
}

.stack-verdict-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.verdict-icon {
  font-size: 26px;
  line-height: 1;
}

.verdict-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 4px;
}

.verdict-sub {
  font-size: 13px;
  color: var(--mut);
  margin: 0;
}

.verdict-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mut);
  margin-bottom: 24px;
}

.verdict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.verdict-card {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vc-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.vc-val {
  font-size: 13px;
  color: var(--mut);
  line-height: 1.4;
}

.stack-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.related-stacks-section {
  margin-top: 56px;
}

.related-stacks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.related-stacks-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.btn-related-all {
  font-size: 13px;
  color: var(--ye);
  text-decoration: none;
  font-weight: 700;
}

/* ----------------------------------------------------
   COMMUNITY TOOL DUEL / VS BATTLE ARENA
---------------------------------------------------- */
.cmp-duel-arena {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px 36px;
  margin-bottom: 32px;
  text-align: center;
}

.duel-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ye);
  margin-bottom: 8px;
}

.duel-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
}

.duel-desc {
  font-size: 14px;
  color: var(--mut);
  margin: 0 0 28px;
}

.duel-battle-wrap {
  max-width: 720px;
  margin: 0 auto 28px;
}

.duel-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.duel-team-left {
  color: var(--or);
}

.duel-team-right {
  color: var(--ye);
}

.duel-vs-badge {
  font-size: 12px;
  font-weight: 900;
  color: var(--mut);
  background: var(--s2);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.duel-progress-track {
  height: 20px;
  border-radius: 999px;
  background: var(--s2);
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
}

.duel-bar-fill-left {
  background: var(--or);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.duel-bar-fill-right {
  background: var(--ye);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.duel-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-duel-vote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: transform .2s, opacity .2s;
}

.btn-duel-vote:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn-duel-left {
  background: var(--or);
  color: #FFFFFF;
}

.btn-duel-right {
  background: var(--ye);
  color: var(--on);
}

.duel-vote-status {
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #34D399;
}

/* ----------------------------------------------------
   LIGHT MODE OVERRIDES FOR REALITY CHECK & STACKS
---------------------------------------------------- */
:root[data-theme="light"] .bd-reality-box,
:root[data-theme="light"] .stack-hero-main,
:root[data-theme="light"] .stack-hero-sidebar,
:root[data-theme="light"] .stack-step-card,
:root[data-theme="light"] .stack-verdict-box,
:root[data-theme="light"] .stack-card,
:root[data-theme="light"] .cmp-duel-arena {
  background: #FFFFFF;
  border-color: #E5E7EB;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .bd-reality-card,
:root[data-theme="light"] .verdict-card,
:root[data-theme="light"] .stack-badge-subtle,
:root[data-theme="light"] .stack-step-index,
:root[data-theme="light"] .step-price-tag,
:root[data-theme="light"] .btn-step-detail,
:root[data-theme="light"] .stack-card-pipeline,
:root[data-theme="light"] .stack-step-tool-av,
:root[data-theme="light"] .duel-vs-badge,
:root[data-theme="light"] .duel-progress-track {
  background: #F9FAFB;
  border-color: #E5E7EB;
}

:root[data-theme="light"] .stack-chip {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #4B5563;
}

:root[data-theme="light"] .stack-chip.on {
  background: var(--ye);
  border-color: var(--ye);
  color: #FFFFFF;
}

:root[data-theme="light"] .bd-reality-verified,
:root[data-theme="light"] .stack-connector-pill {
  background: #F3F4F6;
  border-color: #E5E7EB;
  color: #4B5563;
}

:root[data-theme="light"] .rc-tag-green {
  background: #ECFDF5;
  color: #059669;
  border-color: #A7F3D0;
}

:root[data-theme="light"] .rc-tag-orange {
  background: #FFFBEB;
  color: #D97706;
  border-color: #FDE68A;
}

:root[data-theme="light"] .rc-tag-red {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
}

:root[data-theme="light"] .bd-reality-catch {
  background: #FFF7ED;
  border-color: #FFEDD5;
}

:root[data-theme="light"] .stack-mini-pill {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

:root[data-theme="light"] .tax-podium-card {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

:root[data-theme="light"] .tax-podium-card.podium-card-1 {
  border-color: #FCD34D;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.1);
}

:root[data-theme="light"] .podium-card-1 .podium-rank-pill {
  background: #FEF3C7;
  color: #B45309;
  border-color: #FDE68A;
}

:root[data-theme="light"] .podium-card-2 .podium-rank-pill {
  background: #F1F5F9;
  color: #475569;
  border-color: #CBD5E1;
}

:root[data-theme="light"] .podium-card-3 .podium-rank-pill {
  background: #FFF7ED;
  color: #C2410C;
  border-color: #FFEDD5;
}

:root[data-theme="light"] .podium-price-badge {
  background: #F3F4F6;
  color: #4B5563;
  border-color: #E5E7EB;
}

:root[data-theme="light"] .btn-podium-detail {
  background: #FFF7ED;
  color: #EA580C;
  border-color: #FED7AA;
}

:root[data-theme="light"] .btn-podium-detail:hover {
  background: #EA580C;
  color: #FFFFFF;
}

:root[data-theme="light"] .btn-podium-visit {
  background: #F9FAFB;
  border-color: #E5E7EB;
  color: #1F2937;
}

:root[data-theme="light"] .btn-podium-visit:hover {
  background: #F3F4F6;
}

:root[data-theme="light"] .stack-step-prompt-box {
  background: #F9FAFB;
  border-color: #E5E7EB;
}

:root[data-theme="light"] .btn-copy-step-prompt {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #1F2937;
}

:root[data-theme="light"] .stack-prompt-code {
  color: #374151;
}

/* ----------------------------------------------------
   AI STACK BUDGET CALCULATOR
---------------------------------------------------- */
.calc-page { max-width: 1200px; margin: 0 auto; padding: 48px 24px 96px; }
.calc-hero { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.calc-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.calc-tag { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ye); background: rgba(255, 232, 31, 0.1); border: 1px solid rgba(255, 232, 31, 0.25); padding: 4px 12px; border-radius: 999px; }
.calc-status-badge { font-size: 12px; font-weight: 600; color: var(--mut); background: var(--s2); border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; }
.calc-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; color: var(--ink); }
.calc-lead { font-size: 16px; color: var(--mut); line-height: 1.6; margin: 0; }

.calc-workspace { display: flex; flex-direction: column; gap: 32px; }
.calc-controls-card { background: var(--s1); border: 1px solid var(--line); border-radius: 24px; padding: 32px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); }
.calc-ctrl-label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin-bottom: 14px; }
.calc-ctrl-label .step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--or); color: #FFF; font-size: 12px; display: grid; place-items: center; }

.calc-goal-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.goal-chip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--s2); border: 2px solid var(--line); color: var(--ink); cursor: pointer; transition: all .2s; font-family: inherit; text-align: left; }
.goal-chip:hover { border-color: var(--mut); }
.goal-chip.active { border-color: var(--ye); background: rgba(255, 232, 31, 0.08); box-shadow: 0 0 20px rgba(255, 232, 31, 0.1); }
.goal-icon { font-size: 20px; }
.goal-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }

.calc-slider-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.calc-budget-display { display: flex; align-items: baseline; gap: 6px; }
.budget-sub { font-size: 13px; color: var(--mut); font-weight: 600; }
.budget-big-val { font-size: 32px; font-weight: 900; color: var(--ye); line-height: 1; letter-spacing: -.02em; }
.budget-freq { font-size: 14px; color: var(--mut); font-weight: 600; }

.calc-slider-wrap { position: relative; margin-bottom: 20px; }
.calc-range-input { width: 100%; height: 10px; border-radius: 999px; background: var(--s2); outline: none; -webkit-appearance: none; accent-color: var(--ye); cursor: pointer; }
.calc-slider-ticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mut); font-weight: 600; margin-top: 8px; }

.calc-preset-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.preset-label { font-size: 12px; color: var(--mut); font-weight: 600; }
.btn-preset { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); color: var(--mut); cursor: pointer; transition: all .15s; font-family: inherit; }
.btn-preset:hover { color: var(--ink); border-color: var(--ye); }

.calc-result-area { display: flex; flex-direction: column; gap: 24px; }
.calc-summary-card { background: var(--s1); border: 2px solid rgba(255, 74, 18, 0.35); border-radius: 24px; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; box-shadow: 0 10px 30px rgba(255, 74, 18, 0.08); }
.calc-summary-left { flex: 1; min-width: 280px; }
.summary-eyebrow { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--or); display: block; margin-bottom: 6px; }
.summary-title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 10px; letter-spacing: -.02em; }
.summary-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.summary-chip { font-size: 11.5px; font-weight: 700; background: var(--s2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; color: var(--ink); }

.calc-summary-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.summary-total-box { text-align: right; }
.total-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--mut); letter-spacing: .05em; display: block; }
.total-val { font-size: 36px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.total-val small { font-size: 14px; font-weight: 600; color: var(--mut); }
.total-note { font-size: 11.5px; font-weight: 700; color: #10B981; display: block; margin-top: 2px; }

.summary-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-calc-launch { background: linear-gradient(135deg, #FF4A12, #FF6B3D); color: #FFF; border: none; font-size: 13px; font-weight: 800; padding: 11px 18px; border-radius: 12px; cursor: pointer; transition: all .2s; font-family: inherit; white-space: nowrap; }
.btn-calc-launch:hover { transform: translateY(-2px); opacity: .95; }
.btn-calc-copy { background: var(--s2); color: var(--ink); border: 1px solid var(--line); font-size: 12px; font-weight: 700; padding: 9px 16px; border-radius: 12px; cursor: pointer; transition: all .15s; font-family: inherit; white-space: nowrap; }
.btn-calc-copy:hover { border-color: var(--ye); color: var(--ye); }

.calc-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.calc-step-card { background: var(--s1); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.calc-step-card:hover { transform: translateY(-3px); border-color: var(--ye); }
.calc-step-card .step-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.calc-step-card .step-pill { font-size: 11px; font-weight: 800; color: var(--ye); background: rgba(255, 232, 31, 0.12); border: 1px solid rgba(255, 232, 31, 0.25); padding: 3px 8px; border-radius: 6px; }
.calc-step-card .step-cost-pill { font-size: 11px; font-weight: 800; background: var(--s2); border: 1px solid var(--line); padding: 3px 8px; border-radius: 6px; color: var(--ink); }
.calc-step-card .step-tool-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.calc-step-card .step-tool-av { width: 44px; height: 44px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 18px; font-weight: 800; color: var(--ink); flex: none; }
.calc-step-card .step-tool-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 2px; }
.calc-step-card .step-role-lbl { font-size: 12px; color: var(--mut); font-weight: 600; display: block; }
.calc-step-card .step-why-text { font-size: 13px; color: var(--mut); line-height: 1.5; margin: 0 0 16px; flex: 1; }
.calc-step-card .btn-step-out { display: block; text-align: center; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: all .15s; margin-top: auto; }
.calc-step-card .btn-step-out:hover { background: var(--ye); color: #000; border-color: var(--ye); }

/* Light Mode Overrides for Calculator */
:root[data-theme="light"] .calc-controls-card,
:root[data-theme="light"] .calc-summary-card,
:root[data-theme="light"] .calc-step-card {
  background: #FFFFFF;
  border-color: #E5E7EB;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .goal-chip,
:root[data-theme="light"] .btn-preset,
:root[data-theme="light"] .summary-chip,
:root[data-theme="light"] .calc-step-card .step-cost-pill,
:root[data-theme="light"] .calc-step-card .step-tool-av,
:root[data-theme="light"] .calc-step-card .btn-step-out,
:root[data-theme="light"] .btn-calc-copy {
  background: #F9FAFB;
  border-color: #E5E7EB;
  color: #1F2937;
}
:root[data-theme="light"] .calc-range-input {
  background: #E5E7EB;
}

/* ----------------------------------------------------
   FEATURE 1: INTERACTIVE AI STACK RECOMMENDER QUIZ
---------------------------------------------------- */
.quiz-page-main {
  max-width: 980px;
  margin: 0 auto 64px;
  padding: 0 20px;
}

.quiz-hero {
  padding: 48px 0 32px;
  text-align: center;
}

.quiz-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.quiz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--or);
  background: rgba(255, 74, 18, 0.12);
  border: 1px solid rgba(255, 74, 18, 0.3);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.quiz-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF4A12;
  box-shadow: 0 0 10px #FF4A12;
  animation: pulse-dot 1.8s infinite;
}

.quiz-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 10px;
}

.quiz-lead {
  font-size: 15.5px;
  color: var(--mut);
  line-height: 1.55;
  margin: 0;
}

.quiz-wizard-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 40px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
}

.quiz-progress-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF4A12, #FFE81F);
  transition: width .3s ease;
}

.quiz-step-indicator {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mut);
  margin-bottom: 24px;
}

.quiz-question {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
}

.quiz-sub {
  font-size: 14px;
  color: var(--mut);
  margin: 0 0 24px;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.quiz-opt-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  font-family: inherit;
}

.quiz-opt-btn:hover {
  border-color: var(--or);
  transform: translateY(-1px);
}

.opt-emoji {
  font-size: 28px;
  flex: none;
}

.opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opt-text strong {
  font-size: 16px;
  color: var(--ink);
  font-weight: 800;
}

.opt-text small {
  font-size: 13px;
  color: var(--mut);
  line-height: 1.4;
}

.quiz-nav-row {
  display: flex;
  justify-content: flex-start;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.quiz-btn-back {
  background: none;
  border: none;
  color: var(--mut);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
}

.quiz-btn-back:hover {
  color: var(--ink);
}

.result-header {
  margin-bottom: 24px;
}

.result-eyebrow {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--or);
  letter-spacing: .06em;
}

.result-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  margin: 4px 0 8px;
}

.result-desc {
  font-size: 15px;
  color: var(--mut);
  line-height: 1.55;
  margin: 0;
}

.result-metrics-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.res-metric-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.res-m-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
}

.res-m-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mut);
  letter-spacing: .04em;
}

.result-pipeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.quiz-res-step-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
}

.q-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--s2);
  color: var(--ye);
  font-size: 13px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex: none;
}

.q-step-info {
  flex: 1;
}

.q-step-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.q-step-top strong {
  font-size: 15px;
  color: var(--ink);
  font-weight: 800;
}

.q-cost-pill {
  font-size: 11px;
  font-weight: 800;
  color: var(--or);
  background: rgba(255, 74, 18, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
}

.q-step-role {
  font-size: 12.5px;
  color: var(--mut);
  margin: 0;
}

.result-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.btn-res-clone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--or);
  color: #FFF;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: opacity .15s;
}

.btn-res-clone:hover { opacity: .9; }

.btn-res-browse {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mut);
  text-decoration: none;
}

.btn-res-browse:hover { color: var(--ink); }

.btn-res-restart {
  margin-left: auto;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}

/* ----------------------------------------------------
   FEATURE 2: AI TOKEN & API COST MATRIX
---------------------------------------------------- */
.tokens-page-main {
  max-width: 1220px;
  margin: 0 auto 64px;
  padding: 0 20px;
}

.tokens-hero {
  padding: 48px 0 36px;
  text-align: center;
}

.tokens-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}

.tokens-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.tokens-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulse-green 1.8s infinite;
}

.tokens-title {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 10px;
}

.tokens-lead {
  font-size: 16px;
  color: var(--mut);
  line-height: 1.6;
  margin: 0;
}

.cost-estimator-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px 36px;
  margin-bottom: 36px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.estimator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}

.estimator-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 4px;
}

.estimator-sub {
  font-size: 13.5px;
  color: var(--mut);
  margin: 0;
}

.estimator-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ye);
  background: rgba(255, 232, 31, 0.1);
  border: 1px solid rgba(255, 232, 31, 0.3);
  padding: 4px 10px;
  border-radius: 8px;
}

.estimator-controls-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .estimator-controls-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.est-control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.control-val {
  color: var(--or);
  font-family: ui-monospace, monospace;
  font-weight: 900;
}

.est-slider {
  width: 100%;
  accent-color: var(--or);
  cursor: pointer;
}

.est-token-totals-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 20px;
  flex-wrap: wrap;
  gap: 14px;
}

.token-total-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.ttl-lbl { color: var(--mut); }
.ttl-num { color: var(--ink); font-family: ui-monospace, monospace; }
.token-total-item.highlight .ttl-num { font-size: 16px; font-weight: 900; }

.pricing-matrix-section {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.matrix-table-wrap {
  overflow-x: auto;
}

.pricing-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.pricing-matrix-table th {
  background: var(--s2);
  color: var(--mut);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.pricing-matrix-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink);
  vertical-align: middle;
}

.model-name-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.model-name-cell strong {
  font-size: 14.5px;
  color: var(--ink);
}

.model-badge-pill {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--or);
  background: rgba(255, 74, 18, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.provider-pill {
  font-size: 12px;
  font-weight: 700;
  color: var(--mut);
  background: var(--s2);
  padding: 3px 8px;
  border-radius: 6px;
}

.num-cell {
  font-family: ui-monospace, monospace;
  font-weight: 700;
}

.context-pill, .speed-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mut);
  font-family: ui-monospace, monospace;
}

.app-bill-cell strong {
  font-size: 16px;
  font-weight: 900;
  color: #10B981;
  font-family: ui-monospace, monospace;
}

.app-bill-sub {
  font-size: 10.5px;
  color: var(--mut);
}

.btn-api-portal {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--mut);
  background: var(--s2);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s;
}

.btn-api-portal:hover {
  color: var(--ye);
  border-color: var(--ye);
}

/* ----------------------------------------------------
   FEATURE 3: CURATED TOOL COLLECTIONS & PLAYLISTS
---------------------------------------------------- */
.collections-page-main {
  max-width: 1200px;
  margin: 0 auto 64px;
  padding: 0 20px;
}

.collections-hero {
  padding: 48px 0 36px;
  text-align: center;
}

.collections-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}

.collections-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #A855F7;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.col-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #A855F7;
  box-shadow: 0 0 10px #A855F7;
  animation: pulse-dot 1.8s infinite;
}

.collections-title {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 10px;
}

.collections-lead {
  font-size: 16px;
  color: var(--mut);
  line-height: 1.6;
  margin: 0;
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 960px) {
  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .collections-grid {
    grid-template-columns: 1fr;
  }
}

.playlist-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s, border-color .2s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.playlist-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
}

.playlist-cover {
  height: 140px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.cover-emoji {
  font-size: 36px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}

.cover-curator-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #FFF;
  background: rgba(0,0,0,0.35);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.playlist-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.playlist-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.playlist-track-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mut);
}

.btn-playlist-upvote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 74, 18, 0.1);
  border: 1px solid rgba(255, 74, 18, 0.3);
  color: var(--or);
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}

.btn-playlist-upvote:hover {
  background: var(--or);
  color: #FFF;
}

.btn-playlist-upvote.voted {
  background: #10B981 !important;
  border-color: #059669 !important;
  color: #FFF !important;
}

.playlist-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
}

.playlist-desc {
  font-size: 13px;
  color: var(--mut);
  line-height: 1.45;
  margin: 0 0 18px;
}

.playlist-tracklist {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  flex: 1;
}

.tracklist-heading {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--mut);
  letter-spacing: .06em;
  display: block;
  margin-bottom: 8px;
}

.tracklist-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tracklist-item {
  font-size: 12px;
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.track-name { color: var(--ink); font-weight: 700; }
.track-role { color: var(--mut); }

.playlist-actions {
  margin-top: auto;
}

.btn-playlist-launch {
  display: block;
  text-align: center;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: all .15s;
}

.btn-playlist-launch:hover {
  border-color: var(--or);
  color: var(--or);
}

/* ----------------------------------------------------
   FEATURE 4: EXIT-INTENT DEAL SNATCHER MODAL
---------------------------------------------------- */
.exit-deal-box {
  max-width: 480px;
  text-align: center;
  padding: 32px 36px;
  border: 1px solid rgba(255, 74, 18, 0.4);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.exit-deal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.exit-deal-icon {
  font-size: 40px;
  animation: pulse-dot 2s infinite;
}

.exit-deal-pill {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--or);
  background: rgba(255, 74, 18, 0.15);
  border: 1px solid rgba(255, 74, 18, 0.35);
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: .05em;
}

.exit-deal-heading {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 6px;
}

.exit-deal-sub {
  font-size: 13.5px;
  color: var(--mut);
  line-height: 1.5;
  margin: 0 0 20px;
}

.exit-coupon-box {
  background: var(--bg);
  border: 1px dashed rgba(255, 74, 18, 0.4);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 22px;
}

.coupon-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mut);
  display: block;
  margin-bottom: 6px;
}

.coupon-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.coupon-code {
  font-family: ui-monospace, monospace;
  font-size: 18px;
  font-weight: 900;
  color: var(--ye);
  letter-spacing: .1em;
}

.btn-copy-code {
  background: rgba(255, 232, 31, 0.12);
  border: 1px solid rgba(255, 232, 31, 0.3);
  color: var(--ye);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}

.btn-copy-code:hover {
  background: var(--ye);
  color: #121212;
}

.btn-copy-code.copied {
  background: #10B981 !important;
  color: #FFF !important;
  border-color: #059669 !important;
}

.exit-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-claim-deal {
  display: block;
  background: linear-gradient(135deg, #FF4A12 0%, #FF7B25 100%);
  color: #FFF;
  font-size: 15px;
  font-weight: 800;
  padding: 14px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(255, 74, 18, 0.3);
  transition: opacity .15s;
}

.btn-claim-deal:hover { opacity: .9; }

.btn-exit-dismiss {
  background: none;
  border: none;
  color: var(--mut);
  font-size: 12px;
  cursor: pointer;
}

.btn-exit-dismiss:hover { color: var(--ink); }

/* ----------------------------------------------------
   LIGHT MODE OVERRIDES FOR NEW FEATURES
---------------------------------------------------- */
:root[data-theme="light"] .quiz-wizard-card,
:root[data-theme="light"] .cost-estimator-card,
:root[data-theme="light"] .pricing-matrix-section,
:root[data-theme="light"] .playlist-card,
:root[data-theme="light"] .exit-deal-box {
  background: #FFFFFF;
  border-color: #E5E7EB;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

:root[data-theme="light"] .quiz-opt-btn,
:root[data-theme="light"] .res-metric-box,
:root[data-theme="light"] .quiz-res-step-item,
:root[data-theme="light"] .est-token-totals-strip,
:root[data-theme="light"] .playlist-tracklist,
:root[data-theme="light"] .exit-coupon-box {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

:root[data-theme="light"] .pricing-matrix-table th {
  background: #F1F5F9;
  color: #475569;
}

:root[data-theme="light"] .btn-res-restart,
:root[data-theme="light"] .btn-api-portal,
:root[data-theme="light"] .btn-playlist-launch {
  background: #F1F5F9;
  border-color: #E2E8F0;
  color: #334155;
}

/* ----------------------------------------------------
   PHASE 1: TRUST & FRESHNESS ENHANCEMENTS
----------------------------------------------------- */

/* Verified Tested Trust Banner on Single Tool */
.bd-tested-trust-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 18px;
}
.tested-shield {
  font-size: 20px;
  line-height: 1;
  flex: none;
  margin-top: 2px;
}
.tested-meta {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.tested-meta strong {
  color: #10B981;
  font-weight: 700;
}
.tested-author {
  color: var(--mut);
  margin-left: 4px;
}
.tested-notes-text {
  color: var(--mut);
  font-size: 12.5px;
}

/* Price History & Stability Card */
.pricing-history-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  margin-top: 28px;
}
.ph-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ye);
  margin-bottom: 6px;
}
.ph-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.ph-change-alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 74, 18, 0.12);
  border: 1px solid rgba(255, 74, 18, 0.35);
  color: var(--or);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.ph-stable-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #10B981;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}
.ph-timeline-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.ph-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.ph-table th {
  background: var(--s2, #222226);
  color: var(--mut);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.ph-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.ph-row-current {
  background: rgba(255, 232, 31, 0.03);
}
.ph-current-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--ye);
  color: var(--on);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 6px;
}
.ph-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink);
}
.ph-stat-ok {
  color: #10B981;
  font-weight: 700;
  font-size: 12.5px;
}
.ph-footer-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.5;
}

/* Offline & Status Tags */
.badge-offline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  background: #DC2626;
  color: #FFFFFF;
  border-radius: 999px;
  text-transform: uppercase;
}
.card-tested-tag {
  font-weight: 600;
  font-size: 12px;
  opacity: .85;
}
.btn-refresh-radar-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  background: rgba(255, 74, 18, 0.12);
  border: 1px solid rgba(255, 74, 18, 0.35);
  color: var(--or);
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}
.btn-refresh-radar-pill:hover {
  background: var(--or);
  color: #FFFFFF;
}

/* Light Mode Overrides */
:root[data-theme="light"] .bd-tested-trust-strip {
  background: #ECFDF5;
  border-color: #A7F3D0;
}
:root[data-theme="light"] .pricing-history-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
:root[data-theme="light"] .ph-table th {
  background: #F8FAFC;
  color: #64748B;
}
:root[data-theme="light"] .ph-code {
  background: #F1F5F9;
  color: #0F172A;
}











/* Honest demo-data notes (v4.2.1) */
.demo-note{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--mut);font-style:italic}

/* ==========================================================================
   PHASE 2: "WHICH TOOL FOR MY TASK?" AI SEARCH & RETENTION SUITE
   ========================================================================== */

/* Task Search Hero Autocomplete Featured Stack */
.search-auto-stack-card {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255, 74, 18, 0.08) 0%, rgba(255, 184, 0, 0.04) 100%);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.search-auto-stack-card:hover {
  background: linear-gradient(135deg, rgba(255, 74, 18, 0.12) 0%, rgba(255, 184, 0, 0.07) 100%);
}
.s-auto-stack-left {
  flex: 1;
  min-width: 0;
}
.s-auto-stack-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--or);
  background: rgba(255, 74, 18, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.s-auto-stack-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.s-auto-stack-meta {
  font-size: 11px;
  color: var(--mut);
}
.s-auto-stack-btn {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--or);
  color: #FFFFFF !important;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.s-auto-stack-btn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* Match Tag & Task Pill */
.task-match-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  margin-left: 8px;
  flex: none;
}
.task-match-reason {
  display: block;
  font-size: 11px;
  color: var(--mut);
  margin-top: 2px;
  font-style: italic;
}

/* Task Search Active Filter Banner */
.task-search-banner {
  margin: 0 0 24px;
  padding: 14px 20px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-left: 4px solid var(--or);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.task-search-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.task-search-banner-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.task-banner-badge {
  font-size: 12px;
  font-weight: 800;
  color: var(--or);
  background: rgba(255, 74, 18, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
}
.task-banner-query {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.task-banner-count {
  font-size: 12px;
  color: var(--mut);
}
.task-search-banner-stack {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.tb-stack-lbl {
  color: var(--mut);
  font-weight: 600;
}
.tb-stack-link {
  color: var(--ye);
  font-weight: 700;
  text-decoration: underline;
}
.btn-clear-task-search {
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-clear-task-search:hover {
  background: var(--line);
  border-color: var(--mut);
}


/* ==========================================================================
   PERSONAL STACK BUILDER & SHAREABLE WORKFLOW STUDIO
   ========================================================================== */
.calc-mode-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 28px;
  flex-wrap: wrap;
}
.calc-mode-btn {
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.calc-mode-btn:hover {
  color: var(--ink);
  border-color: var(--mut);
}
.calc-mode-btn.active {
  background: var(--or);
  color: #FFFFFF;
  border-color: var(--or);
  box-shadow: 0 4px 16px rgba(255, 74, 18, 0.25);
}

.calc-shared-banner {
  max-width: 680px;
  margin: 0 auto 24px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 12px 20px;
}
.csb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.csb-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: #10B981;
}
.csb-text {
  font-size: 13px;
  color: var(--ink);
  flex: 1;
}
.btn-fork-stack {
  background: #10B981;
  color: #FFFFFF;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.custom-stack-input {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}
.tool-add-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.custom-tool-select {
  flex: 1;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
}
.btn-add-tool-to-stack {
  background: var(--ye);
  color: #121212;
  border: 0;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  flex: none;
}
.quick-add-suggestions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.q-add-lbl {
  font-size: 11.5px;
  color: var(--mut);
  font-weight: 600;
}
.btn-quick-add {
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.btn-quick-add:hover {
  color: var(--ink);
  border-color: var(--or);
}

.btn-calc-share {
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.3);
  color: var(--ye);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-calc-share:hover {
  background: var(--ye);
  color: #121212;
}

/* Share Modal */
.calc-share-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.calc-share-modal-content {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
.share-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.share-modal-head h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.btn-close-share-modal {
  background: none;
  border: 0;
  color: var(--mut);
  font-size: 24px;
  cursor: pointer;
}
.share-modal-sub {
  font-size: 14px;
  color: var(--mut);
  line-height: 1.5;
  margin: 0 0 20px;
}
.share-link-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.share-link-url {
  flex: 1;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
}
.btn-copy-share-url {
  background: var(--or);
  color: #FFFFFF;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  flex: none;
}
.share-social-buttons {
  display: flex;
  gap: 12px;
}
.btn-share-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.btn-share-social:hover {
  transform: translateY(-1px);
}
.btn-share-x {
  background: #000000;
  color: #FFFFFF;
  border: 1px solid #333333;
}
.btn-share-li {
  background: #0A66C2;
  color: #FFFFFF;
}

/* Light mode overrides for Stack Builder & Share Modal */
:root[data-theme="light"] .calc-mode-btn {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #64748B;
}
:root[data-theme="light"] .calc-mode-btn.active {
  background: var(--or);
  color: #FFFFFF;
  border-color: var(--or);
}
:root[data-theme="light"] .calc-share-modal-content {
  background: #FFFFFF;
  border-color: #E5E7EB;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] .custom-stack-input,
:root[data-theme="light"] .custom-tool-select,
:root[data-theme="light"] .share-link-url {
  background: #F9FAFB;
  border-color: #E5E7EB;
  color: #111827;
}

/* ==========================================================================
   PERSONA & INDUSTRY ROLE USE-CASE LANDING PAGES
   ========================================================================== */
.use-case-page {
  padding: 50px 24px 100px;
  max-width: 1100px;
  margin: 0 auto;
}
.uc-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 48px;
}
.uc-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.uc-tag {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--or);
  background: rgba(255, 74, 18, 0.1);
  border: 1px solid rgba(255, 74, 18, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
}
.uc-status-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
  background: var(--s2);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 999px;
}
.uc-title {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  color: var(--ink);
}
.uc-lead {
  font-size: 16.5px;
  color: var(--mut);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Starter Stack Card */
.uc-starter-stack {
  background: var(--s1);
  border: 1px solid var(--line);
  border-left: 4px solid var(--or);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.uc-stack-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.uc-sb-left {
  flex: 1;
  min-width: 0;
}
.uc-sb-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--or);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: inline-block;
}
.uc-sb-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
}
.uc-sb-title a {
  color: var(--ink);
  text-decoration: none;
}
.uc-sb-title a:hover {
  color: var(--ye);
}
.uc-sb-goal {
  font-size: 14px;
  color: var(--mut);
  line-height: 1.5;
  margin: 0;
}
.uc-sb-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: none;
}
.uc-sb-meta {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--mut);
}
.uc-sb-meta strong {
  color: var(--ink);
}
.btn-uc-view-stack {
  background: var(--or);
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.btn-uc-view-stack:hover {
  opacity: 0.95;
}

.uc-stack-pipeline-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}
.uc-pipeline-node {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--s2);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 10px;
  flex: none;
}
.node-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--ye);
}
.node-content strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}
.node-content small {
  display: block;
  font-size: 11px;
  color: var(--mut);
}
.node-arrow {
  color: var(--mut);
  font-size: 14px;
  flex: none;
}

/* Checklist Card */
.uc-checklist-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 50px;
}
.uc-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.uc-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--s2);
  border: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: 12px;
}
.check-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  flex: none;
}
.check-txt {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* Light mode overrides for Use Cases */
:root[data-theme="light"] .uc-starter-stack,
:root[data-theme="light"] .uc-checklist-card {
  background: #FFFFFF;
  border-color: #E5E7EB;
  border-left-color: var(--or);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
:root[data-theme="light"] .uc-pipeline-node,
:root[data-theme="light"] .uc-check-item {
  background: #F9FAFB;
  border-color: #E5E7EB;
}
:root[data-theme="light"] .node-content strong,
:root[data-theme="light"] .check-txt {
  color: #111827;
}

/* Light mode overrides for task search banner */
:root[data-theme="light"] .task-search-banner {
  background: #FFFFFF;
  border-color: #E5E7EB;
  border-left-color: var(--or);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
:root[data-theme="light"] .search-auto-stack-card {
  background: linear-gradient(135deg, rgba(255, 74, 18, 0.06) 0%, rgba(255, 184, 0, 0.03) 100%);
  border-color: #E5E7EB;
}
:root[data-theme="light"] .btn-clear-task-search {
  background: #F3F4F6;
  border-color: #E5E7EB;
  color: #111827;
}



/* ============================================================
 * PHASE 3: MOAT & CONTENT HARD TO COPY
 * Dev Filters, Prompt Library, Video/Gallery, Matrix & Verification
 * ============================================================ */

/* Developer & Enterprise Specs Filter Row */
.dev-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 20px;
  flex-wrap: wrap;
}
.dev-filter-row .lab {
  font-size: 12px;
  font-weight: 800;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.dev-filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dev-filter-chip {
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dev-filter-chip:hover {
  border-color: var(--or);
  color: var(--or);
}
.dev-filter-chip.active {
  background: var(--or);
  border-color: var(--or);
  color: #FFFFFF;
}

/* Tool Card Spec Pills */
.card-spec-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--mut);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Affiliate Independence Disclosure Strip */
.affiliate-disclosure-strip {
  max-width: 1200px;
  margin: 10px auto 24px;
  padding: 10px 18px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.5;
}
.affiliate-disclosure-strip strong {
  color: var(--ink);
}

/* Bento Tile: Developer & Enterprise Specs */
.bd-tile.bd-dev-specs {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.bd-specs-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.bd-specs-grid .spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.bd-specs-grid .spec-row:last-child {
  border-bottom: none;
}
.bd-specs-grid .spec-name {
  color: var(--mut);
  font-weight: 600;
}
.bd-specs-grid .spec-val {
  font-weight: 700;
  font-size: 12.5px;
}
.bd-specs-grid .val-on {
  color: #10b981;
}
.bd-specs-grid .val-off {
  color: var(--mut);
}
.bd-specs-grid .val-mono {
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink);
}

/* Tested Prompt Library Section */
.bd-prompts-section {
  max-width: 1200px;
  margin: 40px auto 36px;
  padding: 0 20px;
}
.prompts-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.prompts-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: var(--ye);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-block;
  margin-bottom: 4px;
}
.prompt-filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prompt-chip {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mut);
  cursor: pointer;
  transition: all 0.15s ease;
}
.prompt-chip.on,
.prompt-chip:hover {
  background: var(--s2);
  border-color: var(--ye);
  color: var(--ink);
}
.prompts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}
.prompt-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.prompt-card:hover {
  border-color: rgba(255, 232, 31, 0.35);
  transform: translateY(-2px);
}
.prompt-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.prompt-badge-cat {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(255, 74, 18, 0.12);
  color: var(--or);
  padding: 2px 8px;
  border-radius: 6px;
}
.prompt-badge-model {
  font-size: 11px;
  color: var(--mut);
  font-weight: 600;
}
.prompt-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.4;
}
.prompt-tip-box {
  background: rgba(255, 232, 31, 0.08);
  border: 1px solid rgba(255, 232, 31, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.prompt-code-wrap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  flex: 1;
  overflow-x: auto;
  margin-bottom: 16px;
}
.prompt-code {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}
.prompt-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.btn-copy-prompt {
  background: var(--or);
  color: #FFFFFF;
  border: none;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s ease;
}
.btn-copy-prompt:hover {
  opacity: 0.9;
}
.btn-run-prompt {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--mut);
  text-decoration: none;
  transition: color 0.15s ease;
}
.btn-run-prompt:hover {
  color: var(--ye);
}

/* Video & Screenshot Gallery Section */
.bd-media-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}
.media-section-head {
  margin-bottom: 22px;
}
.media-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: var(--or);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-block;
  margin-bottom: 4px;
}
.media-video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  margin-bottom: 24px;
  background: #000000;
}
.media-video-container iframe,
.media-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
}
.media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.gallery-thumb-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16/10;
  display: block;
  background: var(--s2);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.gallery-thumb-card:hover {
  transform: translateY(-2px);
  border-color: var(--or);
}
.gallery-thumb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-thumb-card .zoom-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Light Theme Overrides for Phase 3 Components */
:root[data-theme="light"] .affiliate-disclosure-strip {
  background: #F9FAFB;
  border-color: #E5E7EB;
}
:root[data-theme="light"] .bd-tile.bd-dev-specs,
:root[data-theme="light"] .prompt-card,
:root[data-theme="light"] .tax-matrix-section > div {
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .prompt-code-wrap {
  background: #F9FAFB;
  border-color: #E5E7EB;
}
:root[data-theme="light"] .prompt-tip-box {
  background: #FEF9C3;
  border-color: #FDE047;
}
:root[data-theme="light"] .dev-filter-chip {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #374151;
}
:root[data-theme="light"] .dev-filter-chip.active {
  background: var(--or);
  border-color: var(--or);
  color: #FFFFFF;
}
:root[data-theme="light"] .tr-maker-reply-box {
  background: #F9FAFB !important;
  border-left-color: var(--or) !important;
}
/* ----------------------------------------------------
   SITEEFY-INSPIRED HOMEPAGE SECTIONS
---------------------------------------------------- */
.hero-try-prompts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  font-size: 13px;
}

.try-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mut);
  margin-right: 4px;
}

.try-chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--s1);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.try-chip:hover {
  border-color: var(--ye);
  color: var(--ye);
  transform: translateY(-2px);
}

.promoted-sponsor-strip {
  max-width: 1200px;
  margin: 0 auto 36px;
  padding: 0 20px;
}

.promoted-sponsor-box {
  background: linear-gradient(90deg, rgba(255, 232, 31, 0.05) 0%, var(--s1) 100%);
  border: 1px solid rgba(255, 232, 31, 0.25);
  border-radius: 20px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  transition: border-color .2s;
}

.promoted-sponsor-box:hover {
  border-color: rgba(255, 232, 31, 0.45);
}

.promoted-sponsor-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.promoted-sponsor-av {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex: none;
  background: var(--s2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  overflow: hidden;
}

.promoted-sponsor-info {
  min-width: 0;
  flex: 1;
}

.promoted-sponsor-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.promoted-sponsor-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255, 232, 31, 0.15);
  color: var(--ye);
  border: 1px solid rgba(255, 232, 31, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
}

.promoted-sponsor-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.promoted-sponsor-desc {
  font-size: 13px;
  color: var(--mut);
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
}

.promoted-sponsor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.btn-promoted-visit {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: all .15s;
}

.btn-promoted-visit:hover {
  background: var(--ink);
  color: var(--bg);
}

.promoted-sponsor-cta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ye);
  transition: color .15s;
}

.promoted-sponsor-cta:hover {
  color: #FFF;
}

.must-try-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px 48px;
  width: 100%;
}

.must-try-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.must-try-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ye);
  display: block;
  margin-bottom: 4px;
}

.must-try-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0;
}

.must-try-desc {
  font-size: 13px;
  color: var(--mut);
  margin: 4px 0 0;
}

.must-try-view-all {
  font-size: 13px;
  font-weight: 700;
  color: var(--ye);
  transition: color .15s;
}

.must-try-view-all:hover {
  color: var(--ink);
}

.must-try-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.must-try-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .2s var(--ease);
}

.must-try-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 232, 31, 0.4);
}

.must-try-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.must-try-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--s2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  overflow: hidden;
}

.must-try-price-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.must-try-card-name {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.must-try-card-name a {
  color: var(--ink);
  text-decoration: none;
  transition: color .15s;
}

.must-try-card-name a:hover {
  color: var(--or);
}

.must-try-card-desc {
  font-size: 12.5px;
  color: var(--mut);
  margin: 6px 0 16px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.must-try-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 12px;
}

.must-try-rating {
  font-weight: 700;
  color: #F59E0B;
}

.must-try-link {
  font-weight: 700;
  color: var(--ye);
  transition: color .15s;
}

.must-try-link:hover {
  color: var(--ink);
}

/* Light Mode Refinements */
:root[data-theme="light"] .promoted-sponsor-box {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.06) 0%, #FFFFFF 100%);
  border-color: rgba(217, 119, 6, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .promoted-sponsor-box:hover {
  border-color: rgba(217, 119, 6, 0.45);
}

:root[data-theme="light"] .promoted-sponsor-pill {
  background: rgba(217, 119, 6, 0.12);
  color: #B45309;
  border-color: rgba(217, 119, 6, 0.25);
}

:root[data-theme="light"] .promoted-sponsor-cta:hover {
  color: #111827;
}

:root[data-theme="light"] .must-try-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .must-try-card:hover {
  border-color: rgba(217, 119, 6, 0.45);
}

@media (max-width: 1100px) {
  .must-try-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .must-try-section {
    padding-left: 24px;
    padding-right: 24px;
  }
  .must-try-grid {
    grid-template-columns: 1fr;
  }
  .promoted-sponsor-desc {
    white-space: normal;
  }
  .promoted-sponsor-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .promoted-sponsor-actions {
    width: 100%;
    justify-content: space-between;
  }
}