*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#f9fafb; --fg:#1f2937; --muted:#f3f4f6; --muted-fg:#6b7280;
  --border:#e5e7eb; --accent:#1a73e8; --accent-hov:#1557b0; --accent-soft:#e8f0fe;
  --card:#ffffff; --dark:#1a1a2e;
  --success:#16a34a; --warning:#ea580c; --alert-bg:#fffbeb; --alert-border:#fbbf24;
  --max:1100px;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0f1a;--fg:#e6e8ee;--muted:#131826;--muted-fg:#94a3b8;
    --border:#1e293b;--accent:#4285f4;--accent-hov:#669df6;--accent-soft:#1a2236;
    --card:#0f1422;--dark:#0a0e18;
    --success:#22c55e;--warning:#fb923c;--alert-bg:#1f2937;--alert-border:#a16207;}
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-hov)}
.container{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.muted{color:var(--muted-fg)}
.accent{color:var(--accent)}
.link-strong{font-weight:600;color:var(--accent)}
code{background:var(--muted);padding:.1em .35em;border-radius:4px;font-size:.92em}
.hdr{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(8px)}
.hdr-row{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.logo-mark{display:inline-flex;width:30px;height:30px;border-radius:7px;background:var(--accent);color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}
.logo-sub{color:var(--muted-fg);font-weight:500}
.nav{display:flex;gap:.25rem}
.nav a{padding:.45rem .85rem;border-radius:6px;font-size:.92rem;font-weight:500}
.nav a:hover{background:var(--muted);color:var(--accent)}
.footer{border-top:1px solid var(--border);margin-top:5rem;color:var(--muted-fg);font-size:.88rem;background:var(--card)}
.footer-row{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between;padding:2.5rem 1.25rem;align-items:start}
.footer-row p{margin:0 0 .25rem}
.footer-small{font-size:.82rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.footer-links a{font-weight:500}
.footer-links a:hover{color:var(--accent)}
.hero{padding:4.5rem 0 2.5rem;text-align:center;background:radial-gradient(ellipse at top, color-mix(in srgb,var(--accent) 10%, transparent), transparent 60%)}
.hero-inner{max-width:780px;margin:0 auto;padding:0 1.25rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .85rem;border:1px solid var(--border);background:var(--card);border-radius:999px;font-size:.78rem;color:var(--muted-fg);margin-bottom:1.5rem;font-weight:500}
.dot{width:6px;height:6px;border-radius:50%;background:var(--success);display:inline-block}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:0 0 1rem;color:var(--fg)}
.hero .lead{font-size:1.1rem;color:var(--muted-fg);margin:0 auto 2rem;max-width:580px}
.lead{font-size:1.05rem;color:var(--muted-fg)}
.search-wrap{position:relative;display:flex;max-width:580px;margin:0 auto;gap:.5rem}
.search-input{flex:1;height:50px;padding:0 1.1rem;border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:10px;font-size:1rem;outline:none;transition:border-color .15s, box-shadow .15s;font-family:inherit}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-btn{height:50px;padding:0 1.5rem;border:none;background:var(--accent);color:#fff;border-radius:10px;font-weight:600;cursor:pointer;font-family:inherit;font-size:1rem}
.search-btn:hover{background:var(--accent-hov)}
.section{padding:2.5rem 1.25rem}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap}
.section-head h2{font-size:1.5rem;margin:0;font-weight:600;letter-spacing:-.015em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:1px solid var(--border);background:var(--card);border-radius:999px;font-size:.9rem;transition:all .15s;font-weight:500}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chip-n{color:var(--muted-fg);font-size:.78rem;font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.card{display:block;padding:1.25rem;border:1px solid var(--border);background:var(--card);border-radius:12px;transition:all .15s;position:relative}
.card:hover{border-color:var(--accent);color:inherit;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 8%, transparent)}
.card-rich::after{content:"";position:absolute;top:1rem;right:1rem;width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 2px color-mix(in srgb,var(--success) 25%, transparent)}
.card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.card-favicon{width:28px;height:28px;border-radius:6px;background:var(--muted);object-fit:contain;flex-shrink:0}
.card-title{font-size:1rem;font-weight:600;margin:0;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card:hover .card-title{color:var(--accent)}
.card-desc{font-size:.88rem;color:var(--muted-fg);margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-tags{margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.35rem}
.card-cat .card-title{white-space:normal}
.tag{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:6px;background:var(--muted);color:var(--muted-fg);font-size:.74rem;border:1px solid var(--border);font-weight:500}
.tag-soft{background:transparent}
.tool-cat-pill{display:inline-block;font-size:.75rem;font-weight:500;background:var(--accent-soft);color:var(--accent);padding:.2rem .65rem;border-radius:999px;vertical-align:middle;margin-left:.5rem}
.cta-card{padding:3rem 2rem;text-align:center;border:1px solid var(--border);background:var(--card);border-radius:16px}
.cta-card h2{font-size:1.8rem;margin:0 0 .75rem;letter-spacing:-.015em;font-weight:600}
.cta-card p{color:var(--muted-fg);max-width:520px;margin:0 auto 1.5rem}
.cta-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.3rem;border-radius:8px;font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;transition:all .15s;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hov);color:#fff}
.btn-ghost{background:transparent;border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.page{padding:2.5rem 1.25rem}
.page-narrow{max-width:760px}
.page-head{margin-bottom:2rem}
.page-head h1{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:700;letter-spacing:-.02em;margin:0 0 .5rem}
.cat-nav{display:flex;flex-wrap:wrap;gap:.4rem;padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid var(--border)}
.cat-link{padding:.4rem .85rem;border:1px solid var(--border);border-radius:6px;font-size:.85rem;background:var(--card);font-weight:500}
.cat-link:hover{border-color:var(--accent);color:var(--accent)}
.cat-section{margin-bottom:3rem}
.cat-intro{margin-bottom:2rem;padding:1.25rem;background:var(--muted);border-radius:10px;border:1px solid var(--border)}
.cat-intro p{margin:0;color:var(--fg);line-height:1.7}
.article{padding:2.5rem 1.25rem}
.breadcrumb{font-size:.85rem;color:var(--muted-fg);margin-bottom:1.5rem}
.breadcrumb a:hover{color:var(--fg)}
.tool-head{display:flex;gap:1.5rem;padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tool-favicon{width:64px;height:64px;border-radius:12px;background:var(--muted);object-fit:contain;flex-shrink:0;border:1px solid var(--border)}
.tool-head-body{flex:1;min-width:0}
.tool-head-body h1{font-size:clamp(1.8rem,4vw,2.2rem);margin:0 0 .25rem;letter-spacing:-.02em;font-weight:700;line-height:1.2}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0 1.25rem}
.alert{padding:.75rem 1rem;background:var(--alert-bg);border:1px solid var(--alert-border);border-radius:8px;color:var(--fg);font-size:.9rem;margin:.5rem 0 1rem}
.tldr{margin-bottom:2.5rem;padding:1.5rem;background:var(--accent-soft);border-radius:12px;border-left:4px solid var(--accent)}
.tldr-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 .75rem;font-weight:700}
.tldr ul{margin:0;padding-left:1.2rem;line-height:1.7}
.tldr li{margin-bottom:.3rem}
.tldr li:last-child{margin-bottom:0}
.tool-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:900px){.tool-grid{grid-template-columns:2fr 1fr}}
.tool-main section{margin-bottom:2rem}
.tool-main h2{font-size:1.4rem;margin:0 0 .85rem;font-weight:600;letter-spacing:-.01em}
.tool-main p{margin:0;color:var(--fg);line-height:1.7}
.tool-main ul{padding-left:1.25rem;margin:.5rem 0;line-height:1.7}
.tool-main details{padding:1rem 1.1rem;border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;background:var(--card)}
.tool-main details summary{cursor:pointer;font-weight:500}
.tool-main details p{margin-top:.5rem;color:var(--muted-fg);font-size:.92rem}
.tool-aside .aside-card{padding:1.25rem;border:1px solid var(--border);border-radius:12px;background:var(--card);margin-bottom:1rem}
.aside-muted{background:var(--muted)}
.aside-card h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-fg);margin:0 0 .75rem;font-weight:700}
.aside-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.9rem}
.aside-card dt{color:var(--muted-fg)}
.aside-card dd{margin:0;text-align:right;font-weight:500}
.alt-section{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.alt-section h2{font-size:1.5rem;margin:0 0 .25rem}
.faq-section{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.faq-section h2{font-size:1.5rem;margin:0 0 1.25rem;font-weight:600}
.faq-item{padding:1rem 1.1rem;border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;background:var(--card)}
.faq-item summary{cursor:pointer;font-weight:500}
.faq-item p{margin-top:.65rem;color:var(--muted-fg);font-size:.95rem;line-height:1.65}
.src-list{display:grid;gap:1rem;margin:1.5rem 0}
.src-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}
.src-head h2{font-size:1.1rem;margin:0}
.legal h2{font-size:1.25rem;margin-top:2rem;margin-bottom:.75rem;font-weight:600}
.legal h3{font-size:1.05rem;margin-top:1.25rem;margin-bottom:.5rem;font-weight:600}
.legal p{margin:.5rem 0 1rem;line-height:1.7}
.legal ul,.legal ol{padding-left:1.5rem;line-height:1.7}
.legal li{margin-bottom:.35rem}
/* === Phase 3 additions === */
.pill{display:inline-flex;align-items:center;padding:.22rem .65rem;border-radius:6px;background:var(--muted);color:var(--muted-fg);font-size:.75rem;border:1px solid var(--border);font-weight:500;line-height:1.2}
.pill-category{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.pill-soft{background:transparent}
.pill-verified{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.pill-featured{background:#fef3c7;color:#92400e;border-color:#fde68a}
.pricing-free{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.pricing-freemium{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.pricing-paid{background:#fed7aa;color:#9a3412;border-color:#fdba74}
.pricing-trial{background:#ede9fe;color:#6d28d9;border-color:#ddd6fe}
.pricing-oss{background:#f3f4f6;color:#374151;border-color:#d1d5db}
@media (prefers-color-scheme: dark){
  .pricing-free{background:#052e16;color:#86efac;border-color:#166534}
  .pricing-freemium{background:#172554;color:#93c5fd;border-color:#1e40af}
  .pricing-paid{background:#431407;color:#fdba74;border-color:#9a3412}
  .pricing-trial{background:#2e1065;color:#c4b5fd;border-color:#6d28d9}
  .pricing-oss{background:#1f2937;color:#d1d5db;border-color:#374151}
  .pill-verified{background:#172554;color:#93c5fd;border-color:#1e40af}
  .pill-featured{background:#431407;color:#fde68a;border-color:#a16207}
}
.card-meta{margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.badge-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .9rem}
.tool-url-line{margin:.15rem 0 .5rem;font-size:.92rem}
.action-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem}
.btn-icon{background:transparent;border:1px solid var(--border);color:var(--muted-fg);padding:.5rem .9rem;border-radius:8px;cursor:not-allowed;font-size:.88rem;font-family:inherit;opacity:.7;display:inline-flex;align-items:center;gap:.35rem}
.btn-icon:hover{background:var(--muted)}
.byline{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--muted-fg);margin:.5rem 0 0;flex-wrap:wrap}
.byline a{color:var(--accent);text-decoration:none}
.byline a:hover{color:var(--accent-hov);text-decoration:underline}
.byline strong{color:var(--fg)}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:#fff;font-weight:700;font-size:.78rem;flex-shrink:0;text-decoration:none}
.avatar:hover{filter:brightness(1.1)}
.avatar-lg{width:56px;height:56px;font-size:1.2rem}
.avatar-xl{width:80px;height:80px;font-size:1.6rem;border-radius:18px}
.author-mini{display:flex;align-items:center;gap:.7rem}
.author-mini > div p{margin:0;font-size:.85rem}
.authors-grid{display:grid;gap:1rem;grid-template-columns:1fr}
.author-card{display:flex;gap:1rem;padding:1.5rem;border:1px solid var(--border);border-radius:12px;background:var(--card);transition:border-color .15s}
.author-card:hover{border-color:var(--accent);color:inherit}
.author-card h2{margin:0 0 .15rem;font-size:1.15rem;font-weight:600}
.author-card .role{margin:0 0 .65rem;font-size:.88rem;font-weight:500}
.author-card .bio{margin:0 0 .6rem;font-size:.92rem;line-height:1.55;color:var(--fg)}
.author-card .tool-count{margin:0;font-size:.82rem}
.author-hero{display:flex;gap:1.5rem;padding-bottom:2rem;margin-bottom:1rem;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:start}
.author-hero h1{margin:0 0 .35rem;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:700}
.author-hero .role{margin:0 0 .85rem;font-weight:500}
.author-hero p{margin:0 0 .6rem;line-height:1.65}
/* === Phase 4 additions === */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:2rem}
.pick-card{padding:1.5rem;border:1px solid var(--border);border-radius:12px;background:var(--card);border-top:3px solid var(--accent)}
.pick-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;margin:0 0 .5rem}
.pick-card h2{font-size:1.15rem;margin:0 0 .5rem;font-weight:600}
.pick-card h2 a{color:var(--fg)}
.pick-card h2 a:hover{color:var(--accent)}
.pick-card .muted{margin:0 0 .75rem;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmp-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;margin:1rem 0}
.cmp-table{width:100%;border-collapse:collapse;font-size:.92rem}
.cmp-table th{text-align:left;padding:.85rem 1rem;background:var(--muted);color:var(--muted-fg);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.cmp-table td{padding:.85rem 1rem;border-bottom:1px solid var(--border)}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table tr:hover{background:var(--muted)}
.compare-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:1.5rem 0 2rem}
@media(min-width:780px){.compare-grid{grid-template-columns:1fr 1fr}}
.compare-col{padding:1.5rem;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.compare-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.85rem}
.compare-head h2{margin:0;font-size:1.4rem;font-weight:700}
.compare-col > .muted{margin:0 0 1rem;font-size:.92rem}
.cmp-dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.92rem;margin:1rem 0}
.cmp-dl dt{color:var(--muted-fg);font-weight:500}
.cmp-dl dd{margin:0;text-align:right;font-weight:500}
.compare-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
/* === Phase 5 additions === */
.nav-cta{background:var(--accent);color:#fff !important;padding:.4rem .85rem !important;border-radius:6px}
.nav-cta:hover{background:var(--accent-hov);color:#fff !important}
.form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.form-field{display:flex;flex-direction:column;gap:.4rem}
.form-field label{font-weight:600;font-size:.92rem}
.req{color:#dc2626}
.form-field input[type=text],.form-field input[type=url],.form-field input[type=email],
.form-field select,.form-field textarea{
  padding:.65rem .85rem;border:1px solid var(--border);background:var(--card);color:var(--fg);
  border-radius:8px;font-size:.95rem;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)
}
.form-field textarea{resize:vertical;min-height:90px}
.form-hint{margin:.25rem 0 0;font-size:.82rem;color:var(--muted-fg)}
.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none;height:0;width:0;overflow:hidden}
.form-actions{margin-top:.5rem}
.alert-success{background:#dcfce7;border-color:#86efac;color:#14532d}
@media (prefers-color-scheme: dark){
  .alert-success{background:#052e16;border-color:#166534;color:#86efac}
}
.auth-card{padding:2rem;border:1px solid var(--border);border-radius:14px;background:var(--card);text-align:center;margin:2rem 0}
.auth-card h2{font-size:1.4rem;margin:.5rem 0 .75rem;font-weight:600}
.auth-card p{color:var(--muted-fg);line-height:1.6;max-width:480px;margin:0 auto 1rem}
.auth-soon-badge{display:inline-block;padding:.3rem .85rem;background:var(--accent-soft);color:var(--accent);border-radius:999px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:0 auto .5rem}
.auth-providers{display:flex;flex-direction:column;gap:.5rem;max-width:320px;margin:1.5rem auto}
.auth-providers .btn{opacity:.6;cursor:not-allowed;justify-content:center}
/* === Phase 6 additions === */
.tool-tagline{font-size:1.1rem;color:var(--fg);margin:.25rem 0 .5rem;font-weight:500;line-height:1.4}
.feature-list,.use-case-list{padding-left:1.25rem;margin:.5rem 0;line-height:1.8}
.feature-list li,.use-case-list li{margin-bottom:.3rem}
.pros-cons{display:grid;grid-template-columns:1fr;gap:1rem;margin:1rem 0}
@media(min-width:720px){.pros-cons{grid-template-columns:1fr 1fr}}
.pros,.cons{padding:1.25rem;border-radius:10px;border:1px solid var(--border)}
.pros{background:color-mix(in srgb,#dcfce7 30%,var(--card));border-color:#86efac}
.cons{background:color-mix(in srgb,#fed7aa 30%,var(--card));border-color:#fdba74}
.pros h3,.cons h3{margin:0 0 .65rem;font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.pros h3{color:#15803d}
.cons h3{color:#9a3412}
.pros ul,.cons ul{margin:0;padding-left:1.25rem;line-height:1.7}
.pros li,.cons li{margin-bottom:.3rem;font-size:.95rem}
@media (prefers-color-scheme: dark){
  .pros{background:color-mix(in srgb,#052e16 50%,var(--card));border-color:#166534}
  .cons{background:color-mix(in srgb,#431407 50%,var(--card));border-color:#9a3412}
  .pros h3{color:#86efac}
  .cons h3{color:#fdba74}
}

/* ============================================
   MOBILE RESPONSIVE FIXES v4 — hamburger nav
   ============================================ */

html, body { overflow-x: hidden; max-width: 100%; }

.hdr-row, .footer-row, .grid, .chips, .tags, .badge-row, .card-meta,
.action-row, .auth-providers, .form, .picks, .compare-grid, .pros-cons,
.tool-grid, .hero-inner { min-width: 0; }

.card-desc, .tool-tagline, .card-title, .breadcrumb,
.tool-head-body h1, .page-head h1, .footer-row p, p, dd {
  overflow-wrap: anywhere; word-break: break-word;
}

table { max-width: 100%; }
.cmp-table-wrap, .src-list, .form { max-width: 100%; overflow-x: auto; }
.aside-card dd { word-break: break-word; max-width: 100%; }

/* ---------- Hamburger button ---------- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px; height: 40px;
  padding: 8px; gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--fg);
  flex-shrink: 0;
}
.nav-hamburger:hover { background: var(--muted); }
.nav-hamburger span {
  display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  .nav-hamburger { display: flex; }

  .hdr { position: sticky; }
  .hdr-row { height: 56px !important; flex-wrap: nowrap !important; padding: 0 1.25rem !important; }

  .nav.nav-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: .5rem; gap: .25rem;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    flex-wrap: nowrap !important;
  }
  .nav.nav-menu.nav-open { display: flex; }

  .nav.nav-menu a {
    padding: .75rem 1rem !important;
    font-size: .95rem !important;
    border-radius: 8px; width: 100%; display: block;
  }
  .nav.nav-menu a:hover { background: var(--muted); }
  .nav.nav-menu .nav-cta {
    background: var(--accent) !important;
    color: #fff !important;
    padding: .75rem 1rem !important;
    margin-top: .25rem; text-align: center;
  }
}

/* ---------- Phone (≤ 480px) ---------- */
@media (max-width: 480px) {
  .container { padding: 0 .85rem }
  .hdr-row { height: 52px !important; }
  .hero { padding: 2.5rem 0 1.5rem }
  .hero h1 { font-size: 1.85rem }
  .hero .lead { font-size: .98rem; padding: 0 .5rem }
  .grid { grid-template-columns: 1fr; gap: .85rem }
  .page-head h1 { font-size: 1.55rem }
  .tool-head-body h1 { font-size: 1.5rem }
  .section-head h2 { font-size: 1.25rem }
  .section-head { flex-direction: column; align-items: flex-start; gap: .4rem }
  .search-wrap { flex-direction: column; gap: .5rem }
  .search-input { height: 46px; padding: 0 1rem; font-size: .95rem }
  .search-btn { height: 44px; padding: 0 1.1rem; width: 100% }
  .card { padding: 1rem }
  .tool-head { gap: 1rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem }
  .tool-favicon { width: 48px; height: 48px }
  .tldr { padding: 1.1rem; margin-bottom: 1.75rem }
  .article, .page { padding: 1.5rem .85rem }
  .footer-row { padding: 1.5rem .85rem; gap: .85rem }
  .footer-links { gap: .25rem .85rem }
  .cta-card { padding: 1.75rem 1rem }
  .cta-card h2 { font-size: 1.45rem }
  .cta-actions .btn { width: 100%; justify-content: center }
  .action-row { gap: .4rem }
  .action-row .btn { flex: 1; justify-content: center }
  .tool-aside .aside-card { padding: 1rem }
  .aside-card dl { font-size: .85rem; gap: .3rem .6rem }
  .cmp-table th, .cmp-table td { padding: .6rem .7rem; font-size: .85rem }
  .author-hero { gap: 1rem; padding-bottom: 1.5rem }
  .avatar-xl { width: 64px; height: 64px; font-size: 1.3rem; border-radius: 14px }
  .form-field input, .form-field select, .form-field textarea { font-size: 16px }
}

/* Very small phones */
@media (max-width: 360px) {
  .container { padding: 0 .7rem }
  .hero h1 { font-size: 1.6rem }
  .page-head h1 { font-size: 1.35rem }
  .logo-sub { display: none }
  .badge { font-size: .72rem; padding: .25rem .65rem }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr) }
  .tool-grid { grid-template-columns: 1fr }
}