:root{--c-bg: #F8FAFC;--c-surface: #FFFFFF;--c-surface-alt: #F1F5F9;--c-text: #0F172A;--c-text-2: #64748B;--c-text-3: #94A3B8;--c-border: #E2E8F0;--c-accent: #0d9488;--c-accent-light: #ccfbf1;--c-accent-hover: #0f766e;--c-cta: #0D9488;--c-cta-hover: #0F766E;--c-cta-light: #CCFBF1;--c-accent-2: #2563EB;--c-accent-2-light: #EFF6FF;--c-coral: #e85d3a;--c-coral-light: #fef0ec;--c-amber: #c07d1a;--c-amber-light: #fdf4e3;--c-green: #16a34a;--c-green-light: #dcfce7;--c-star: #f59e0b;--c-bg-2:#f1f5f9;--font-display: "Space Grotesk", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--max-w: 1140px;--radius: 10px;--radius-lg: 16px;--shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);--shadow-md: 0 4px 16px rgba(0,0,0,.06);--shadow-lg: 0 12px 40px rgba(0,0,0,.08)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--c-text);background:var(--c-bg);line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:-.03em;color:var(--c-text)}h1{font-size:clamp(2.2rem,5vw,3.2rem)}h2{font-size:clamp(1.6rem,3.5vw,2.1rem)}h3{font-size:clamp(1.2rem,2.5vw,1.45rem)}.overline{font-family:var(--font-body);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--c-accent)}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-family:var(--font-body);font-size:.9rem;font-weight:600;border:none;cursor:pointer;transition:all .2s}.btn-primary{background:var(--c-cta);color:#fff}.btn-primary:hover{background:var(--c-cta-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-outline{background:transparent;color:var(--c-text);border:1.5px solid var(--c-border)}.btn-outline:hover{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-accent-light)}.btn-sm{padding:8px 16px;font-size:.82rem}.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:28px;transition:all .25s}.card:hover{box-shadow:var(--shadow-md);border-color:#d0cec8;transform:translateY(-2px)}.card-flat{box-shadow:none}.card-flat:hover{transform:none}.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:100px;font-size:.75rem;font-weight:700}.badge-accent{background:var(--c-accent-light);color:var(--c-accent)}.badge-green{background:var(--c-green-light);color:var(--c-green)}.badge-coral{background:var(--c-coral-light);color:var(--c-coral)}.badge-amber{background:var(--c-amber-light);color:var(--c-amber)}.badge-orange{background:#fff7ed;color:#ea580c}.badge-blue{background:#eff6ff;color:#2563eb}.rating{display:inline-flex;align-items:center;gap:4px;font-size:.85rem;font-weight:600;color:var(--c-star)}.rating span{color:var(--c-text-3);font-weight:400}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.section{padding:80px 0}.section-sm{padding:48px 0}.section-divider{border-top:1px solid var(--c-border)}.hero{padding:100px 0 80px;text-align:center}.hero h1{margin-bottom:20px}.hero .subtitle{font-size:1.15rem;color:var(--c-text-2);max-width:600px;margin:0 auto 36px}.hero-search{max-width:560px;margin:0 auto;position:relative}.hero-search input{width:100%;padding:16px 24px 16px 48px;border:2px solid var(--c-border);border-radius:var(--radius-lg);font-size:1rem;font-family:var(--font-body);background:var(--c-surface);transition:all .2s}.hero-search input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 4px var(--c-accent-light)}.hero-search .search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--c-text-3);font-size:1.1rem}.stats-bar{display:flex;justify-content:center;gap:48px;padding:24px 0;margin:0 auto;flex-wrap:wrap}.stat-item{text-align:center}.stat-number{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--c-text);letter-spacing:-.03em}.stat-label{font-size:.82rem;color:var(--c-text-3);margin-top:2px}.tool-card{display:flex;gap:20px;align-items:flex-start}.tool-logo{flex-shrink:0;width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:var(--c-surface-alt);border:1px solid var(--c-border);overflow:hidden;padding:6px}.tool-info{flex:1;min-width:0}.tool-info h3{font-family:var(--font-body);font-size:1.05rem;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}.tool-info .tool-tagline{font-size:.88rem;color:var(--c-text-2);margin-bottom:10px}.tool-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.compare-table{width:100%;border-collapse:collapse}.compare-table th{text-align:left;padding:14px 16px;font-size:.82rem;font-weight:600;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--c-border)}.compare-table td{padding:14px 16px;font-size:.9rem;border-bottom:1px solid var(--c-border);vertical-align:top}.compare-table tr:hover td{background:var(--c-surface-alt)}.nav{position:sticky;top:0;z-index:100;background:#F8FAFCe0;backdrop-filter:blur(16px);border-bottom:1px solid var(--c-border)}.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}.nav-logo{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.04em;display:flex;align-items:center;gap:0;color:var(--c-text)}.nav-logo em{font-style:normal;color:var(--c-accent)}.logo-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#b87333;margin-left:1px;margin-bottom:-2px;flex-shrink:0}.nav-links{display:flex;gap:28px;align-items:center}.nav-links a{font-size:.88rem;font-weight:600;color:var(--c-text-2);transition:color .15s}.nav-links a:hover{color:var(--c-accent)}.nav-mobile-btn{display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--c-text);padding:4px}.nav-mobile{display:none;flex-direction:column;gap:4px;padding:0 24px 20px;background:var(--c-surface);border-bottom:1px solid var(--c-border)}.nav-mobile a{padding:12px 0;font-size:.92rem;font-weight:600;color:var(--c-text-2);border-bottom:1px solid var(--c-surface-alt);transition:color .15s}.nav-mobile a:last-child{border-bottom:none;margin-top:8px}.nav-mobile a:hover{color:var(--c-accent)}.nav-mobile.open{display:flex}.footer{background:var(--c-surface);border-top:1px solid var(--c-border);padding:60px 0 40px;margin-top:80px}.footer-brand p{font-size:.88rem;color:var(--c-text-2);margin-top:12px;max-width:280px}.footer-col h4{font-family:var(--font-body);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-3);margin-bottom:16px}.footer-col ul{list-style:none}.footer-col li{margin-bottom:10px}.footer-col a{font-size:.88rem;color:var(--c-text-2);transition:color .15s}.footer-col a:hover{color:var(--c-accent)}.footer-bottom{border-top:1px solid var(--c-border);padding-top:24px;font-size:.8rem;color:var(--c-text-3);display:flex;justify-content:space-between}.feature-list{list-style:none}.feature-list li{padding:8px 0;font-size:.9rem;display:flex;align-items:flex-start;gap:10px}.feature-list li:before{content:"✓";color:var(--c-green);font-weight:700;flex-shrink:0}.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:20px}.pros-list li:before{content:"✓";color:var(--c-green);font-weight:700}.cons-list li:before{content:"✗";color:var(--c-coral);font-weight:700}.pros-list li,.cons-list li{list-style:none;padding:6px 0;font-size:.9rem;display:flex;gap:8px}.breadcrumbs{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--c-text-3);margin-bottom:24px}.breadcrumbs a{color:var(--c-text-2)}.breadcrumbs a:hover{color:var(--c-accent)}.breadcrumbs .sep{color:var(--c-border)}.cta-section{text-align:center;background:linear-gradient(135deg,#0d9488,#0f766e);color:#fff;padding:64px 40px;border-radius:var(--radius-lg);margin:80px auto;max-width:900px}.cta-section h2{color:#fff;margin-bottom:12px}.cta-section p{color:#ffffffe0;margin-bottom:28px}.cta-section .btn{background:#fff;color:var(--c-accent);font-weight:700}.cta-section .btn:hover{background:#f0fdfa}@media(max-width:768px){.container{padding:0 16px}.nav-links{display:none}.nav-inner{height:56px}.hero{padding:48px 0 36px}.hero .subtitle{font-size:1rem;line-height:1.6}.hero-search input{padding:14px 16px 14px 44px;font-size:.95rem}.stats-bar{gap:16px}.stat-number{font-size:1.5rem}.stat-label{font-size:.78rem}.section{padding:40px 0}.section-sm{padding:24px 0}.footer-bottom{flex-direction:column;gap:8px;text-align:center}.grid-2,.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr 1fr;gap:10px}.pros-cons{grid-template-columns:1fr}.card{padding:16px}.cta-section{padding:36px 20px;margin:40px auto;border-radius:var(--radius)}.breadcrumbs{font-size:.78rem;margin-bottom:16px;flex-wrap:wrap}body{font-size:.95rem;line-height:1.7}p{font-size:.92rem;line-height:1.7}.tool-card{gap:14px;padding:16px}.tool-logo{width:48px;height:48px;border-radius:12px;padding:5px}.tool-info h3{font-size:.98rem;line-height:1.3}.tool-info .tool-tagline{font-size:.85rem;margin-bottom:8px;line-height:1.5}.tool-meta{gap:8px}.compare-hero{grid-template-columns:1fr!important;gap:0!important}.compare-vs{padding:10px 0!important}.compare-pros{grid-template-columns:1fr!important;gap:16px!important}.compare-table-wrap{margin-left:-16px;margin-right:-16px;border-radius:0;border-left:none;border-right:none;padding:16px!important;position:relative}.compare-table-wrap:after{content:"→ scroll";position:absolute;top:16px;right:16px;font-size:.7rem;color:var(--c-text-3);background:var(--c-surface-alt);padding:2px 8px;border-radius:4px}.compare-table{font-size:.82rem;min-width:520px}.compare-table th{padding:12px 10px;font-size:.72rem;white-space:nowrap}.compare-table td{padding:12px 10px;font-size:.82rem;line-height:1.5}@media(max-width:900px){.tool-layout{grid-template-columns:1fr!important;gap:24px!important}.tool-layout aside .card{position:static!important}}.tool-hero{flex-direction:column!important;gap:16px!important;align-items:flex-start!important}.pricing-grid{grid-template-columns:1fr!important;max-width:400px;margin:0 auto}.calc-inputs{grid-template-columns:1fr!important;gap:12px!important}.prompt-cat-grid{grid-template-columns:1fr 1fr!important}.prompt-options,.about-stats,.contact-cards{grid-template-columns:1fr!important}.btn{font-size:.88rem;padding:11px 20px}.btn-sm{padding:9px 16px;font-size:.82rem}.rating{font-size:.82rem}.badge{font-size:.72rem;padding:3px 10px}.badge-accent{font-size:.68rem}.feature-list li{font-size:.88rem;line-height:1.6;padding:10px 0}.pros-list li,.cons-list li{font-size:.88rem;line-height:1.5;padding:7px 0}.card[style*="border-left:4px"],.card[style*="border-top:3px"]{padding:16px!important}details summary{font-size:.9rem;padding:4px 0}details p{font-size:.88rem}.overline{font-size:.72rem}.nav-mobile-btn{display:flex}}@media(max-width:480px){h1{font-size:1.55rem;line-height:1.25}h2{font-size:1.2rem}h3{font-size:1.02rem}.container{padding:0 14px}.grid-4{grid-template-columns:1fr}.stats-bar{flex-direction:row;flex-wrap:wrap;justify-content:space-around;gap:12px}.stat-item{width:45%;text-align:center}.stat-number{font-size:1.25rem}.hero-search .search-icon{left:14px}.nav-logo{font-size:1.25rem}.prompt-cat-grid{grid-template-columns:1fr!important}.cta-section h2{font-size:1.15rem}.cta-section p{font-size:.85rem}.tool-logo{width:42px;height:42px;padding:4px}.footer-brand p{font-size:.82rem;line-height:1.6}.compare-table{min-width:460px}.compare-table td{font-size:.8rem}.card{padding:14px}}.tool-logo img{width:100%;height:100%;object-fit:contain;border-radius:inherit}

/* === GLOBAL OVERFLOW PROTECTION === */
html{overflow-x:clip}body{overflow-x:clip;max-width:100vw}

/* === SUBSCRIBE CTA === */
.subscribe-cta{background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;padding:48px 32px;margin:48px auto;max-width:640px;text-align:center}
.subscribe-cta-title{font-family:var(--font-display),sans-serif;font-size:1.6rem;font-weight:700;color:var(--c-text);margin:0 0 12px}
.subscribe-cta-sub{font-family:var(--font-body),sans-serif;font-size:0.95rem;color:var(--c-text-2);line-height:1.5;margin:0 0 24px}
.subscribe-cta-btn{display:inline-block;background:var(--c-accent);color:#fff;text-decoration:none;font-family:var(--font-body),sans-serif;font-weight:600;font-size:0.95rem;padding:12px 24px;border-radius:8px;transition:background .15s ease}
.subscribe-cta-btn:hover{background:#0b7a70}

/* === MOBILE NAV === */
.nav-mobile{
  display:none;
  flex-direction:column;
  gap:0;
  padding:0;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  width:100%;
  max-width:100vw;
  overflow:hidden;
}
.nav-mobile.open{
  display:flex;
}
.nav-mobile a{
  display:block;
  padding:14px 24px;
  font-size:.92rem;
  font-weight:600;
  color:var(--c-text-2);
  border-bottom:1px solid var(--c-border);
  transition:background .15s,color .15s;
}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile a:hover,.nav-mobile a:active{
  background:var(--c-surface-alt);
  color:var(--c-accent);
}

/* === FOOTER GRID === */
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:32px}

/* === QUICK VERDICT === */
@media(max-width:600px){
.quick-verdict>div{grid-template-columns:1fr !important}
}

/* === RESPONSIVE OVERRIDES === */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:20px !important}
  .footer-brand{grid-column:1/-1}
}

@media(max-width:768px){
  /* Nav */
  .nav-links{display:none}
  .nav-mobile-btn{display:flex}
  .nav-inner{height:56px}

  /* Quick Specs */
  .quick-specs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .quick-specs table{min-width:100%;font-size:.75rem}
  .quick-specs th,.quick-specs td{padding:6px 8px !important;word-break:break-word}

  /* Read reviews */
  .read-reviews{grid-template-columns:1fr !important}

  /* Switching note */
  .switching-note{font-size:.8rem !important}

  /* How it works */
  .how-it-works div[style*="grid-template-columns"]{grid-template-columns:1fr !important}

  /* All inline grids that might overflow */
  [style*="grid-template-columns:1fr 1fr"]{word-break:break-word}
}

@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr !important;gap:16px !important}

  .quick-specs table{min-width:320px}
  .quick-specs th:first-child,.quick-specs td:first-child{min-width:65px;max-width:75px}
  .quick-specs th,.quick-specs td{font-size:.7rem !important;padding:5px 6px !important}

  .read-reviews{grid-template-columns:1fr !important}

  .nav-mobile a{padding:14px 16px;font-size:.9rem}

  /* Collapse any inline 2-col grid (e.g. "Go deeper" on alternatives pages) */
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
}

/* === DARK MODE === */
:root{color-scheme:light}
[data-theme="dark"]{
  color-scheme:dark;
  --c-bg:#0a0a0b;
  --c-surface:#141416;
  --c-surface-alt:#1c1c20;
  --c-bg-2:#1c1c20;
  --c-text:#f4f4f5;
  --c-text-2:#a1a1aa;
  --c-text-3:#71717a;
  --c-border:#27272a;
  --c-accent:#2dd4bf;
  --c-accent-light:#0f2826;
  --c-accent-hover:#5eead4;
  --c-cta:#fb923c;
  --c-cta-hover:#fdba74;
  --c-cta-light:#1f1208;
  --c-accent-2:#818cf8;
  --c-accent-2-light:#1a1d36;
  --c-coral:#fb7185;
  --c-coral-light:#1d0c0f;
  --c-amber:#fbbf24;
  --c-amber-light:#1c1408;
  --c-green:#22c55e;
  --c-green-light:#0a1f0d;
  --c-star:#fbbf24;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6);
}
html.theme-transitioning,html.theme-transitioning body,html.theme-transitioning .card,html.theme-transitioning .nav,html.theme-transitioning .footer,html.theme-transitioning input,html.theme-transitioning select,html.theme-transitioning textarea,html.theme-transitioning button{transition:background-color .25s ease,border-color .25s ease,color .25s ease}

/* Override hardcoded nav backdrop for both themes */
.nav{background:rgba(250,250,248,.88) !important}
[data-theme="dark"] .nav{background:rgba(10,10,11,.88) !important;border-bottom-color:#27272a}
[data-theme="dark"] .logo-dot{background:var(--c-cta)}

/* Theme toggle button (header right corner) */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--c-surface-alt);border:1px solid var(--c-border);
  cursor:pointer;color:var(--c-text-2);
  transition:all .2s;flex-shrink:0;margin-left:12px;padding:0;
}
.theme-toggle:hover{color:var(--c-accent);border-color:var(--c-accent);background:var(--c-accent-light)}
.theme-toggle .icon-moon{display:none}
.theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
.theme-toggle-mobile{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:14px 24px;font-size:.92rem;font-weight:600;
  color:var(--c-text-2);background:var(--c-surface-alt);
  border:none;border-bottom:1px solid var(--c-border);
  cursor:pointer;font-family:inherit;text-align:left;
}
.theme-toggle-mobile:hover{color:var(--c-accent);background:var(--c-accent-light)}
.theme-toggle-mobile .icon-moon{display:none}
.theme-toggle-mobile .icon-sun{display:block}
[data-theme="dark"] .theme-toggle-mobile .icon-moon{display:block}
[data-theme="dark"] .theme-toggle-mobile .icon-sun{display:none}

/* Dark mode fixes for inline-styled white backgrounds & light surfaces */
[data-theme="dark"] [style*="background:#fff"]:not([style*="background:#fff7"]):not([style*="background:#fff0"]){background:var(--c-surface) !important}
[data-theme="dark"] [style*="background: #fff"]:not([style*="background: #fff7"]):not([style*="background: #fff0"]){background:var(--c-surface) !important}
[data-theme="dark"] [style*="background:#ffffff"]{background:var(--c-surface) !important}
[data-theme="dark"] [style*="background:#fafaf8"]{background:var(--c-bg) !important}
[data-theme="dark"] [style*="background:#f4f3ef"]{background:var(--c-surface-alt) !important}
[data-theme="dark"] [style*="background:#fefce8"]{background:#1f1c08 !important;border-color:#854d0e !important}
[data-theme="dark"] [style*="background:#fef3c7"]{background:#231806 !important;border-color:#92400e !important}
[data-theme="dark"] [style*="background:#eff6ff"]{background:#0c1526 !important;border-color:#1e3a8a !important}
[data-theme="dark"] [style*="background:#fef0ec"]{background:#1f0c08 !important}
[data-theme="dark"] [style*="background:#dcfce7"]{background:#082010 !important}
[data-theme="dark"] [style*="background:#fdf4e3"]{background:#1f1808 !important}
[data-theme="dark"] [style*="background:#ccfbf1"]{background:#0a2624 !important}
[data-theme="dark"] [style*="background:#fde68a"]{background:#3a2a08 !important}
[data-theme="dark"] [style*="background:linear-gradient(135deg,#fef3c7"]{background:#1c1408 !important}
[data-theme="dark"] [style*="color:#854d0e"]{color:#fbbf24 !important}
[data-theme="dark"] [style*="color:#92400e"]{color:#fbbf24 !important}
[data-theme="dark"] [style*="color:#78350f"]{color:#fde68a !important}
[data-theme="dark"] [style*="color:#713f12"]{color:#fde68a !important}
[data-theme="dark"] [style*="color:#3f2705"]{color:#f4e8c8 !important}
[data-theme="dark"] [style*="color:#1e40af"]{color:#93c5fd !important}
[data-theme="dark"] [style*="border:2px solid #facc15"]{border-color:#a16207 !important}
[data-theme="dark"] [style*="border:2px solid #f59e0b"]{border-color:#92400e !important}
[data-theme="dark"] [style*="border:1px solid #fde68a"]{border-color:#422f04 !important}
[data-theme="dark"] [style*="border:1px solid #bfdbfe"]{border-color:#1e3a8a !important}

/* Make filter pills and badges dark-mode safe */
[data-theme="dark"] .badge-orange{background:#431407;color:#fb923c}
[data-theme="dark"] .badge-blue{background:#1e3a5f;color:#60a5fa}
[data-theme="dark"] .filter-btn{background:var(--c-surface);color:var(--c-text-2);border-color:var(--c-border)}
[data-theme="dark"] .filter-btn:hover{color:var(--c-accent);border-color:var(--c-accent)}
[data-theme="dark"] .filter-btn.active{background:var(--c-accent);color:#0a0a0b;border-color:var(--c-accent)}

/* Skip link */
[data-theme="dark"] a[href="#main-content"]{background:var(--c-accent) !important;color:#0a0a0b !important}

/* Mobile theme toggle label swap */
.theme-toggle-mobile .theme-label-dark{display:none}
.theme-toggle-mobile .theme-label-light{display:inline}
[data-theme="dark"] .theme-toggle-mobile .theme-label-dark{display:inline}
[data-theme="dark"] .theme-toggle-mobile .theme-label-light{display:none}

/* === HEADER STICKY-ON-SCROLL BEHAVIOR === */
/* Default: nav sits at top in normal flow */
.nav{position:sticky !important;top:0;z-index:100;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
/* After user scrolls 30% viewport, JS adds .nav-floating */
.nav-floating{box-shadow:0 1px 12px rgba(0,0,0,0.06)}
[data-theme="dark"] .nav-floating{box-shadow:0 1px 12px rgba(0,0,0,0.06)}
@keyframes navSlideDown{
  from{transform:translateY(-100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* === HIDE DESKTOP THEME TOGGLE ON MOBILE === */
/* Only the mobile-menu version remains visible on small screens */
@media(max-width:768px){
  .nav-inner > .theme-toggle{display:none !important}
}

/* === BLOG GRID — masonry columns (no dead vertical space) === */
.blog-articles-grid{column-count:2;column-gap:14px}
.blog-articles-grid>.blog-card{break-inside:avoid;margin-bottom:14px;display:inline-block;width:100%}
.blog-card h3{font-size:0.92rem !important;line-height:1.35 !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card p{font-size:0.82rem !important;line-height:1.5 !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px !important}
.blog-feat-card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-feat-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:768px){
.blog-articles-grid{column-count:1}
}

/* === FEEDBACK WIDGET === */
.feedback-widget{position:fixed;bottom:24px;right:24px;z-index:90}
.feedback-toggle{background:var(--c-cta);color:#fff;border:none;padding:12px 18px;border-radius:99px;font-size:0.88rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow-md);font-family:var(--font-body)}
.feedback-toggle:hover{background:var(--c-cta-hover)}
.feedback-panel{display:none;position:absolute;bottom:56px;right:0;width:340px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-lg)}
.feedback-panel.open{display:block}
.feedback-panel h4{font-family:var(--font-display);margin:0 0 4px}
.feedback-panel .small{font-size:0.82rem;color:var(--c-text-3);margin:0 0 14px}
.feedback-panel label{display:block;font-size:0.85rem;font-weight:600;margin-bottom:12px;color:var(--c-text)}
.feedback-panel select,.feedback-panel textarea,.feedback-panel input[type="email"]{width:100%;padding:8px 12px;border:1.5px solid var(--c-border);border-radius:var(--radius);font-size:0.88rem;font-family:var(--font-body);margin-top:4px;background:var(--c-surface)}
.feedback-panel textarea{min-height:80px;resize:vertical}
.feedback-panel button[type="submit"]{width:100%;margin-top:12px;padding:10px;background:var(--c-cta);color:#fff;border:none;border-radius:var(--radius);font-weight:600;cursor:pointer;font-family:var(--font-body)}
@media(max-width:480px){.feedback-panel{width:calc(100vw - 32px);right:-8px}}
[data-theme="dark"] .feedback-panel{background:var(--c-surface);border-color:var(--c-border)}

/* === FORM STYLES === */
.tc-form label{display:block;font-size:0.88rem;font-weight:600;margin-bottom:14px;color:var(--c-text)}
.tc-form input,.tc-form select,.tc-form textarea{width:100%;padding:10px 14px;border:1.5px solid var(--c-border);border-radius:var(--radius);font-size:0.9rem;font-family:var(--font-body);margin-top:4px;background:var(--c-surface);color:var(--c-text)}
.tc-form textarea{min-height:100px;resize:vertical}
.tc-form input:focus,.tc-form select:focus,.tc-form textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-light)}
.tc-form button[type="submit"]{display:inline-block;padding:14px 28px;background:var(--c-cta);color:#fff;border:none;border-radius:var(--radius);font-weight:600;font-size:0.95rem;cursor:pointer;font-family:var(--font-body);margin-top:8px}
.tc-form button[type="submit"]:hover{background:var(--c-cta-hover)}
.tc-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.tc-form .form-grid{grid-template-columns:1fr}}

/* === NAV BADGE (FREE) === */
.nav-badge{display:inline-block;background:#16a34a;color:#fff;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:4px;margin-left:4px;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;line-height:1}

/* === FREE BANNER (submit page) === */
.free-banner{display:inline-block;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-size:.82rem;font-weight:700;padding:8px 20px;border-radius:99px;margin-bottom:20px;letter-spacing:.04em}

/* === SUBMIT STRIP (homepage) === */
.submit-strip{text-align:center;padding:40px 24px;background:var(--c-surface-alt);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);margin:0}
.submit-strip h3{font-size:1.15rem;margin-bottom:6px}
.submit-strip p{font-size:.88rem;color:var(--c-text-2);margin-bottom:16px}

/* === PROCESS STEPS === */
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0 0}
.process-step{text-align:center;padding:20px 16px}
.process-step .step-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--c-accent);color:#fff;font-weight:700;font-size:.95rem;margin-bottom:12px}
.process-step h4{font-size:.95rem;margin-bottom:6px}
.process-step p{font-size:.82rem;color:var(--c-text-2);line-height:1.55}
@media(max-width:600px){.process-steps{grid-template-columns:1fr}}

.tool-tagline{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.8em}
/* Mobile-first footer list — see docs/MOBILE_FIRST_DESIGN.md */
.footer-mega ul, .footer-grid ul, .footer-col ul{list-style:none;padding:0;margin:0}
/* Default (mobile + tablet up to 900px): 2 internal columns so 16 items show as 8x2 grid */
.footer-mega ul, .footer-grid ul{column-count:2;column-gap:20px;column-fill:balance}
.footer-mega ul li, .footer-grid ul li{break-inside:avoid;-webkit-column-break-inside:avoid;display:block}
.footer-mega ul a, .footer-grid ul a{display:inline-block;width:100%}
/* Tiny phone — slightly tighter gap + smaller font */
@media(max-width:480px){
  .footer-mega ul, .footer-grid ul{column-gap:14px}
  .footer-mega ul a, .footer-grid ul a{font-size:0.86rem}
}
/* Large desktop — keep 2 internal cols even when outer 5-col grid kicks in (cuts list height in half) */
@media(min-width:1100px){
  .footer-mega ul, .footer-grid ul{column-count:2;column-gap:18px}
}
/* TL;DR — green accent callout, optimized for mobile + desktop + dark mode */
.tldr{
  position:relative;
  margin:24px 0;
  padding:20px 24px 22px;
  background:linear-gradient(135deg,#ecfdf5 0%,#f0fdfa 100%);
  border:1px solid #99f6e4;
  border-left:4px solid #0d9488;
  border-radius:12px;
  box-shadow:0 1px 3px rgba(13,148,136,0.06);
  color:#134e4a;
}
.tldr h2{
  display:inline-block;
  font-family:var(--font-body);
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#fff;
  background:#0d9488;
  padding:4px 12px;
  border-radius:99px;
  margin:0 0 14px;
  letter-spacing:0.1em;
}
.tldr p{
  margin:0;
  font-size:0.95rem;
  line-height:1.7;
  color:#134e4a;
}
.tldr p + p{
  margin-top:10px;
}
.tldr ul{
  margin:0;
  padding-left:22px;
  list-style:none;
}
.tldr ul li{
  position:relative;
  margin:8px 0;
  font-size:0.93rem;
  line-height:1.6;
  color:#134e4a;
  padding-left:6px;
}
.tldr ul li::before{
  content:"";
  position:absolute;
  left:-16px;
  top:0.65em;
  width:6px;
  height:6px;
  background:#0d9488;
  border-radius:50%;
}
.tldr strong,.tldr b{color:#0d9488;font-weight:700}
.tldr a{color:#0f766e;text-decoration:underline;text-underline-offset:2px}
.tldr a:hover{color:#115e59}

[data-theme="dark"] .tldr{
  background:linear-gradient(135deg,rgba(13,148,136,0.10) 0%,rgba(45,212,191,0.06) 100%);
  border-color:rgba(45,212,191,0.25);
  border-left-color:#2dd4bf;
  color:#ccfbf1;
}
[data-theme="dark"] .tldr h2{background:#0d9488;color:#fff}
[data-theme="dark"] .tldr p,[data-theme="dark"] .tldr ul li{color:#ccfbf1}
[data-theme="dark"] .tldr ul li::before{background:#2dd4bf}
[data-theme="dark"] .tldr strong,[data-theme="dark"] .tldr b{color:#5eead4}
[data-theme="dark"] .tldr a{color:#5eead4}
[data-theme="dark"] .tldr a:hover{color:#99f6e4}
@media(max-width:480px){
  .tldr{padding:16px 18px 18px;margin:18px 0;border-radius:10px}
  .tldr h2{font-size:0.68rem;padding:3px 10px}
  .tldr p,.tldr ul li{font-size:0.9rem}
}

.quick-stats{width:100%;border-collapse:collapse;margin:24px 0;font-size:.92rem;background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;overflow:hidden}
.quick-stats thead tr{background:var(--c-bg-2)}
.quick-stats th{text-align:left;padding:12px 14px;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--c-text-3);border-bottom:1px solid var(--c-border)}
.quick-stats td{padding:12px 14px;border-bottom:1px solid var(--c-border);color:var(--c-text-2);line-height:1.55;vertical-align:top}
.quick-stats tbody tr:last-child td{border-bottom:none}
.quick-stats tbody tr:hover{background:var(--c-bg-2)}
.quick-stats td strong,.quick-stats td b{color:var(--c-text)}
@media(max-width:640px){.quick-stats{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.quick-stats th,.quick-stats td{padding:10px 12px;white-space:nowrap}}
/* Mobile-safe table fallback — applies to any table inside <article> or .blog-content */
@media(max-width:768px){
  article table:not(.quick-stats),
  .blog-content table:not(.quick-stats),
  main table:not(.quick-stats):not(.compare-table){
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
    border-collapse:collapse;
  }
  article table:not(.quick-stats) th,
  article table:not(.quick-stats) td,
  .blog-content table th,
  .blog-content table td{
    white-space:normal;
    word-wrap:break-word;
    min-width:100px;
  }
}
/* Wide tables on desktop should also not exceed container */
article table, .blog-content table, main > section table{
  max-width:100%;
  border-collapse:collapse;
}
/* Table of Contents — auto-rendered on long-form posts (≥4 H2s) */
details.toc{margin:24px 0;padding:14px 18px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;font-family:var(--font-body)}
details.toc summary{cursor:pointer;font-weight:600;font-size:0.95rem;color:var(--c-text);user-select:none}
details.toc summary::marker{color:var(--c-accent)}
details.toc ul{margin:12px 0 0;padding-left:22px;list-style:disc}
details.toc li{margin:6px 0;font-size:0.92rem;line-height:1.5}
details.toc a{color:#4f46e5;text-decoration:none}
details.toc a:hover{text-decoration:underline;color:#4338ca}
[data-theme="dark"] details.toc{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)}
[data-theme="dark"] details.toc summary{color:var(--c-text)}
[data-theme="dark"] details.toc a{color:#818cf8}
[data-theme="dark"] details.toc a:hover{color:#a5b4fc}
@media(max-width:480px){details.toc{padding:12px 14px}details.toc summary{font-size:0.92rem}details.toc li{font-size:0.88rem}}
/* Body prose links — visible accent color across article AND post-article sections.
   Catches links in <main> regardless of whether body content sits in <article> wrapper.
   Excludes nav/footer/btn/hero links via cascade — they have their own selectors with
   higher or equal specificity that explicitly set color. */
main article p a, main article ul a, main article ol a, main article td a,
main article details a, main article li a,
main > section p a, main > section ul a, main > section ol a, main > section li a,
main > section td a, main > section details a,
main > article p a, main > article ul a, main > article ol a, main > article li a,
.blog-content p a, .blog-content ul a, .blog-content ol a, .blog-content li a,
.tldr a, details.toc a {
  color:var(--c-accent);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(13,148,136,0.4);
}
main article p a:hover, main article ul a:hover, main article ol a:hover,
main article td a:hover, main article details a:hover, main article li a:hover,
main > section p a:hover, main > section ul a:hover, main > section li a:hover,
main > article p a:hover, main > article ul a:hover, main > article li a:hover,
.blog-content p a:hover, .blog-content ul a:hover, .blog-content li a:hover,
details.toc a:hover {
  text-decoration-color:var(--c-accent);
  color:var(--c-accent-hover);
}
[data-theme="dark"] main article p a, [data-theme="dark"] main article ul a,
[data-theme="dark"] main article ol a, [data-theme="dark"] main article td a,
[data-theme="dark"] main article details a, [data-theme="dark"] main article li a,
[data-theme="dark"] main > section p a, [data-theme="dark"] main > section ul a,
[data-theme="dark"] main > section li a, [data-theme="dark"] main > section td a,
[data-theme="dark"] main > article p a, [data-theme="dark"] main > article ul a,
[data-theme="dark"] main > article li a {
  color:#5eead4;
  text-decoration-color:rgba(94,234,212,0.4);
}
[data-theme="dark"] main article p a:hover, [data-theme="dark"] main article ul a:hover,
[data-theme="dark"] main article li a:hover, [data-theme="dark"] main article details a:hover,
[data-theme="dark"] main > section p a:hover, [data-theme="dark"] main > section li a:hover,
[data-theme="dark"] main > article p a:hover {
  color:#99f6e4;
  text-decoration-color:#5eead4;
}
/* Article body H2 — copper-orange accent (matches logo dot) for visual rhythm.
   Uses simple :not() (CSS3-safe, no descendant combinator inside).
   Also covers H2s inside <main> for blogs whose body sits outside <article>. */
article h2, main article h2, main > section h2, main > div h2 {
  color:#b87333;
}
[data-theme="dark"] article h2,
[data-theme="dark"] main article h2,
[data-theme="dark"] main > section h2,
[data-theme="dark"] main > div h2 {
  color:#d49968;
}
/* TL;DR pill stays teal-on-white in both modes — !important wins over orange */
.tldr h2,[data-theme="dark"] .tldr h2{color:#fff !important;background:#0d9488 !important}
/* <details> summary headings keep default text color */
details h2, details summary h2 { color: var(--c-text) !important; }
[data-theme="dark"] details h2, [data-theme="dark"] details summary h2 { color: var(--c-text) !important; }