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

:root{
  --cream:#FAF8F4;
  --white:#FFFFFF;
  --ink:#1A1814;
  --ink2:#4A4640;
  --ink3:#9A9590;
  --line:#E8E4DC;
  --accent:#D64C2C;
  --accent-bg:#FDF1EE;
  --green:#2A7A4B;
  --green-bg:#EEF7F2;
  --blue-bg:#EFF6FF;
  --r:12px;
  --shadow:0 2px 16px rgba(26,24,20,.07);
  --shadow-md:0 6px 28px rgba(26,24,20,.11);
  --ease:cubic-bezier(.4,0,.2,1);
  --ff-d:'Lora',Georgia,serif;
  --ff-b:'Outfit',system-ui,sans-serif;
}

html{scroll-behavior:smooth;scroll-padding-top:78px}
/* scroll-padding-top = header height (62px) + 16px gap.
   This makes ALL anchor links (#section) clear the sticky header automatically. */
body{background:var(--cream);color:var(--ink);font-family:var(--ff-b);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:rgba(214,76,44,.15)}

.wrap{max-width:902px;margin:0 auto;padding:0 24px}
.wrap--n{max-width:none;margin:0 auto;padding:0 24px}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:200}
.hdr{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-icon{width:34px;height:34px;background:var(--ink);border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.logo-icon svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.logo-name{font-family:var(--ff-d);font-size:20px;font-weight:600;letter-spacing:-.01em}
.logo-name span{color:var(--accent)}
/* Desktop nav */
.nav{display:flex;align-items:center;gap:24px}
.nav a{font-size:15px;font-weight:500;color:var(--ink2);text-decoration:none;transition:color .18s}
.nav a:hover{color:var(--accent)}
/* Hamburger button — hidden on desktop */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink);border-radius:6px;transition:background .18s}
.nav-toggle:hover{background:var(--cream)}
.nav-toggle svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Mobile drawer */
.mobile-nav{display:none;position:fixed;inset:0;z-index:300;pointer-events:none}
.mobile-nav.open{pointer-events:auto}
.mobile-nav-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .25s}
.mobile-nav.open .mobile-nav-overlay{opacity:1}
.mobile-nav-drawer{position:absolute;top:0;right:0;bottom:0;width:min(280px,85vw);background:var(--white);box-shadow:-4px 0 24px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto}
.mobile-nav.open .mobile-nav-drawer{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer-logo{font-family:var(--ff-d);font-size:18px;font-weight:600}
.drawer-logo span{color:var(--accent)}
.drawer-close{background:none;border:none;cursor:pointer;padding:6px;color:var(--ink2);border-radius:6px;transition:background .18s}
.drawer-close:hover{background:var(--cream);color:var(--ink)}
.drawer-close svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drawer-links{padding:12px 0;flex:1}
.drawer-links a{display:flex;align-items:center;gap:10px;padding:13px 20px;font-size:15px;font-weight:500;color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line);transition:background .15s,color .15s}
.drawer-links a:last-child{border-bottom:none}
.drawer-links a:hover,.drawer-links a:active{background:var(--cream);color:var(--accent)}
.drawer-links a svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--ink3)}
.drawer-footer{padding:16px 20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink3)}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.hero{padding:32px 0 40px;text-align:center;background:var(--white);border-bottom:1px solid var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.eyebrow::before,.eyebrow::after{content:'';width:22px;height:1px;background:currentColor;opacity:.4}
.hero h1{font-family:var(--ff-d);font-size:clamp(36px,6vw,64px);font-weight:600;line-height:1.1;letter-spacing:-.02em;margin-bottom:18px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-desc{font-size:17px;font-weight:300;color:var(--ink2);max-width:500px;margin:0 auto 40px;line-height:1.75}

/* ── Search ──────────────────────────────────────────────────────────────────── */
.search-box{display:flex;align-items:center;max-width:620px;margin:0 auto;background:var(--cream);border:1.5px solid var(--line);border-radius:100px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(214,76,44,.1)}
.sb-icon{padding:0 14px 0 20px;flex-shrink:0;color:var(--ink3);display:flex}
.sb-icon svg{width:18px;height:18px;fill:currentColor}
.search-box input{flex:1;min-width:0;background:transparent;border:none;outline:none;font-family:var(--ff-b);font-size:15px;color:var(--ink);padding:14px 0}
.search-box input::placeholder{color:var(--ink3)}
.btn-search{background:var(--ink);color:#fff;border:none;cursor:pointer;font-family:var(--ff-b);font-weight:500;font-size:14px;padding:0 26px;height:44px;margin:4px;border-radius:100px;flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:background .2s,transform .15s}
.btn-search:hover{background:var(--accent);transform:translateY(-1px)}
.btn-search:active{transform:none}
.btn-search:disabled{opacity:.65;pointer-events:none}
.btn-search svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.search-hints{margin-top:14px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink3)}
.search-hints code{background:var(--line);padding:1px 7px;border-radius:4px;font-family:'Courier New',monospace;font-size:11.5px;color:var(--ink2)}
/* Clear button inside search box */
.btn-clear{display:none;background:none;border:none;cursor:pointer;padding:0 10px;color:var(--ink3);flex-shrink:0;line-height:0;transition:color .15s}
.btn-clear:hover{color:var(--accent)}
.btn-clear svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn-clear.visible{display:flex;align-items:center}

/* ── Trust bar ───────────────────────────────────────────────────────────────── */
.trust-bar{padding:13px 0;background:var(--cream);border-bottom:1px solid var(--line)}
.trust-inner{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px}
.trust-item{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink2)}
.trust-item svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ── Error ───────────────────────────────────────────────────────────────────── */
.error-banner{display:flex;align-items:flex-start;gap:12px;background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:var(--r);padding:14px 18px;font-size:14px;margin:32px 0}
.error-banner.hidden{display:none}
.error-banner svg{flex-shrink:0;margin-top:1px;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Results panel ───────────────────────────────────────────────────────────── */
#results-panel{padding:48px 0 0}
#results-panel.hidden{display:none}
#result-content.hidden{display:none}

.result-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:20px;animation:fadeUp .4s var(--ease) both}

/* Preview */
.result-preview{background:#111;line-height:0}
.result-preview img{width:100%;display:block;max-height:480px;object-fit:contain}

/* Meta row */
.result-meta{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.rm-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid var(--line);flex-shrink:0}
.rm-title{font-weight:600;font-size:14.5px;line-height:1.3}
.rm-author{font-size:12.5px;color:var(--ink3);margin-top:2px}

/* Download list */
.dl-section-head{padding:12px 20px 10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);background:var(--cream);border-bottom:1px solid var(--line)}
.dl-row{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line);transition:background .15s}
.dl-row:last-child{border-bottom:none}
.dl-row:hover{background:var(--cream)}
.dl-badge{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.07em;padding:3px 10px;border-radius:5px;text-transform:uppercase;color:#fff;min-width:40px;text-align:center}
.dl-info{flex:1;min-width:0}
.dl-label{font-weight:600;font-size:14px}
.dl-sub{font-size:12px;color:var(--ink3);margin-top:1px}
.dl-actions{display:flex;gap:8px;flex-shrink:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;text-decoration:none;font-family:var(--ff-b);font-weight:500;font-size:13px;border-radius:8px;padding:8px 16px;transition:all .18s var(--ease)}
.btn:disabled{opacity:.6;pointer-events:none}
.btn svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn-dl{background:var(--ink);color:#fff}
.btn-dl:hover{background:var(--accent)}
.btn-open{background:var(--cream);border:1px solid var(--line);color:var(--ink2)}
.btn-open:hover{border-color:var(--ink2);color:var(--ink)}
.btn-copy{background:var(--cream);border:1px solid var(--line);color:var(--ink2);padding:8px 11px}
.btn-copy:hover{border-color:var(--accent);color:var(--accent)}

/* Legal note */
.legal-note{display:flex;align-items:flex-start;gap:10px;background:var(--green-bg);border:1px solid rgba(42,122,75,.2);border-radius:var(--r);padding:14px 18px;font-size:13px;color:#1a5c34;line-height:1.65;margin:0 0 52px}
.legal-note svg{flex-shrink:0;margin-top:2px;width:15px;height:15px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.legal-note code{background:rgba(42,122,75,.12);padding:1px 6px;border-radius:4px;font-family:'Courier New',monospace;font-size:12px}

/* ── Stats bar ───────────────────────────────────────────────────────────────── */
.stats-bar{background:var(--white);border-bottom:1px solid var(--line);padding:28px 0}
.stats-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0}
.stat-item{text-align:center;padding:12px 20px;border-right:1px solid var(--line)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--ff-d);font-size:28px;font-weight:600;color:var(--accent);line-height:1}
.stat-label{font-size:12.5px;color:var(--ink3);margin-top:4px;font-weight:500}

/* ── Sections ────────────────────────────────────────────────────────────────── */
.section{padding:42px 0;border-top:1px solid var(--line)}
.section-title{font-family:var(--ff-d);font-size:clamp(24px,4vw,34px);font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.section-sub{font-size:17px;font-weight:300;color:var(--ink2);margin-bottom:38px;max-width:none;line-height:1.75}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.step{background:var(--white);padding:28px 22px}
.step-n{font-family:var(--ff-d);font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.07em;margin-bottom:10px}
.step h3{font-size:15px;font-weight:600;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--ink2);line-height:1.65}

/* Resolution table */
.table-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);overflow-x:auto}
.res-table{width:100%;border-collapse:collapse;font-size:14px;min-width:540px}
.res-table th{text-align:left;padding:12px 16px;background:var(--cream);font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line);white-space:nowrap}
.res-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink2)}
.res-table tr:last-child td{border-bottom:none}
.res-table tr:hover td{background:var(--cream)}
.res-table td:first-child{font-weight:600;color:var(--ink)}
.res-table code{background:var(--cream);padding:1px 7px;border-radius:4px;font-family:'Courier New',monospace;font-size:12px;color:var(--ink);border:1px solid var(--line)}
.chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;color:#fff}

/* Use cases grid */
.use-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.use-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.use-icon{width:40px;height:40px;background:var(--accent-bg);border-radius:10px;display:grid;place-items:center;margin-bottom:14px;color:var(--accent)}
.use-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.use-card h3{font-size:15px;font-weight:600;margin-bottom:7px}
.use-card p{font-size:14.5px;color:var(--ink2);line-height:1.65}

/* Tips grid */
.tips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.tip-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.tip-icon{width:38px;height:38px;background:var(--blue-bg);border-radius:9px;display:grid;place-items:center;margin-bottom:14px;color:#2563eb}
.tip-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tip-card h3{font-size:15px;font-weight:600;margin-bottom:7px}
.tip-card p{font-size:14.5px;color:var(--ink2);line-height:1.65}

/* Comparison table */
.comp-table-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);overflow-x:auto}
.comp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:480px}
.comp-table th{padding:12px 16px;background:var(--cream);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line);text-align:left}
.comp-table td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink2)}
.comp-table tr:last-child td{border-bottom:none}
.comp-table tr:hover td{background:var(--cream)}
.comp-table td:first-child{font-weight:600;color:var(--ink)}
.tick{color:var(--green);font-size:16px}
.cross{color:#dc2626;font-size:16px}

/* FAQ */
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--ff-b);font-size:16px;font-weight:500;color:var(--ink);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color .18s}
.faq-q:hover{color:var(--accent)}
.faq-chev{flex-shrink:0;width:16px;height:16px;color:var(--ink3);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.faq-item.open .faq-chev{transform:rotate(180deg);color:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-item.open .faq-a{max-height:320px}
.faq-body{padding:0 24px 18px;font-size:14px;color:var(--ink2);line-height:1.75}

/* Prose */
.prose{max-width:740px}
.prose h2{font-family:var(--ff-d);font-size:clamp(22px,3.5vw,30px);font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.prose h3{font-family:var(--ff-d);font-size:18px;font-weight:600;margin:28px 0 10px;color:var(--ink)}
.prose p{font-size:16px;color:var(--ink2);line-height:1.8;margin-bottom:14px}
.prose ul{padding-left:22px;margin-bottom:14px}
.prose li{font-size:16px;color:var(--ink2);line-height:1.8;margin-bottom:6px}
.prose code{background:var(--cream);border:1px solid var(--line);padding:1px 7px;border-radius:4px;font-family:'Courier New',monospace;font-size:13px;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}

/* Info callout */
.callout{display:flex;align-items:flex-start;gap:12px;background:var(--blue-bg);border:1px solid rgba(37,99,235,.2);border-radius:var(--r);padding:14px 18px;font-size:14.5px;color:#1e40af;line-height:1.65;margin:20px 0}
.callout svg{flex-shrink:0;margin-top:2px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Footer */
.site-footer{background:var(--ink);color:rgba(255,255,255,.5);padding:48px 0 28px}
.footer-inner{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;margin-bottom:36px}
.footer-brand .fn{font-family:var(--ff-d);font-size:20px;font-weight:600;color:#fff;display:block;margin-bottom:10px}
.footer-brand .fn span{color:var(--accent)}
.footer-brand p{font-size:14px;line-height:1.75;max-width:270px}
/* Footer columns — accordion on mobile */
.footer-col{min-width:140px}
.footer-col h4{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;cursor:default}
.footer-col h4 .fc-arrow{display:none;width:14px;height:14px;fill:none;stroke:rgba(255,255,255,.3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.footer-col-links{display:block}
.footer-col a{display:block;font-size:14.5px;color:rgba(255,255,255,.5);text-decoration:none;margin-bottom:9px;transition:color .18s}
.footer-col a:hover{color:#fff}
.footer-btm{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:13px}
.footer-legal{display:flex;gap:16px;flex-wrap:wrap}
.footer-legal a{color:rgba(255,255,255,.3);text-decoration:none;transition:color .18s}
.footer-legal a:hover{color:rgba(255,255,255,.75)}

/* Toast */
.toast-stack{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{background:var(--ink);color:#fff;border-radius:10px;padding:11px 18px;font-size:13.5px;display:flex;align-items:center;gap:10px;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:fadeUp .3s var(--ease) both;min-width:200px}
.toast-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.toast.err .toast-dot{background:#F87171}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}


/* ── Save tip ────────────────────────────────────────────────────────────────── */
.save-tip{display:flex;align-items:flex-start;gap:12px;background:var(--blue-bg);border:1px solid rgba(37,99,235,.2);border-radius:var(--r);padding:14px 18px;font-size:13.5px;color:#1e40af;line-height:1.65;margin:0 0 12px}
.save-tip svg{flex-shrink:0;margin-top:2px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.save-tip-methods{display:flex;flex-direction:column;gap:4px;margin-top:5px}
.save-tip-methods span{font-size:13px}
.ext-link{color:#1d4ed8;text-decoration:underline;font-weight:600}
.ext-link:hover{color:var(--accent)}

/* ── Extension card ──────────────────────────────────────────────────────────── */
.ext-card{display:flex;gap:32px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:36px;box-shadow:var(--shadow-md)}
.ext-icon{flex-shrink:0;width:56px;height:56px;background:var(--accent-bg);border-radius:14px;display:grid;place-items:center;color:var(--accent)}
.ext-icon svg{width:28px;height:28px}
.ext-body{flex:1;min-width:0}
.ext-title{font-family:var(--ff-d);font-size:clamp(20px,3vw,26px);font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.ext-desc{font-size:16px;color:var(--ink2);line-height:1.75;margin-bottom:18px;max-width:580px}
.ext-features{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 24px;margin-bottom:22px}
.ext-features li{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink2);font-weight:500}
.ext-features li svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ext-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ext-badge{background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:100px}
.ext-note{font-size:13px;color:var(--ink3);max-width:400px}
@media(max-width:640px){
  .ext-card{flex-direction:column;gap:20px;padding:24px}
  .save-tip-methods{gap:8px}
}

/* ── Responsive — tablet ────────────────────────────────────────────────────── */
@media(max-width:768px){
  .stats-inner{grid-template-columns:1fr 1fr}
  .stat-item{border-right:none;border-bottom:1px solid var(--line)}
  .stat-item:last-child{border-bottom:none}
  .use-grid{grid-template-columns:1fr 1fr}
  .tips-grid{grid-template-columns:1fr 1fr}
  .footer-inner{gap:24px}
}

/* ── Responsive — mobile ────────────────────────────────────────────────────── */
@media(max-width:640px){
  /* Header: hide desktop nav, show hamburger */
  .nav{display:none}
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .mobile-nav{display:block}

  /* Hero */
  .hero{padding:40px 0 36px}
  .hero h1{font-size:clamp(32px,9vw,48px)}
  .hero-desc{font-size:15px}

  /* Search box: stack vertically */
  .search-box{border-radius:14px;flex-wrap:wrap;padding-bottom:2px}
  .search-box input{padding:13px 0;font-size:15px;width:100%}
  .btn-search{margin:4px 8px 8px 8px;flex:1;border-radius:10px;height:44px;justify-content:center;font-size:15px;align-self:center}
  .search-hints{font-size:11px;gap:4px 10px}

  /* Trust bar: 2 columns */
  .trust-inner{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-items:start}
  .trust-item{font-size:12.5px}

  /* Stats: 2 columns */
  .stats-inner{grid-template-columns:1fr 1fr}
  .stat-item{border-right:none;border-bottom:1px solid var(--line)}
  .stat-item:last-child{border-bottom:none}
  .stat-num{font-size:22px}

  /* Sections */
  .section{padding:44px 0}
  .section-title{font-size:clamp(22px,6vw,28px)}
  .section-sub{font-size:14.5px;margin-bottom:28px}

  /* Steps: single column */
  .steps{grid-template-columns:1fr}

  /* Result box */
  .result-meta{padding:12px 14px;gap:10px}
  .rm-thumb{width:34px;height:34px}
  .rm-title{font-size:13.5px}
  .dl-section-head{padding:10px 14px;font-size:10px}
  .dl-row{padding:11px 14px;gap:10px}
  .dl-badge{min-width:34px;font-size:9px;padding:2px 7px}
  .dl-label{font-size:13px}
  .dl-sub{font-size:11px}
  .dl-actions{gap:6px}
  .btn-copy{display:none}
  .btn-dl,.btn-open{padding:8px 12px;font-size:12.5px}
  .btn-open{padding:8px 10px}

  /* Save tip */
  .save-tip{padding:12px 14px;font-size:12.5px}
  .save-tip-methods{gap:6px}
  .save-tip-methods span{font-size:12px}

  /* Legal note */
  .legal-note{padding:12px 14px;font-size:12.5px}

  /* Grids: single column */
  .use-grid,.tips-grid{grid-template-columns:1fr}
  .comp-table-wrap,.table-wrap{font-size:12.5px}

  /* Extension card */
  .ext-card{flex-direction:column;gap:16px;padding:20px}
  .ext-features{grid-template-columns:1fr}
  .ext-cta{flex-direction:column;align-items:flex-start;gap:10px}

  /* Footer: accordion */
  .footer-inner{flex-direction:column;gap:0}
  .footer-brand{padding-bottom:20px;border-bottom:none;margin-bottom:4px}
  .footer-col{border-bottom:1px solid rgba(255,255,255,.08)}
  .footer-btm{border-top:none}
  .footer-col h4{padding:14px 0;margin-bottom:0;cursor:pointer;user-select:none}
  .footer-col h4 .fc-arrow{display:block}
  .footer-col.open h4 .fc-arrow{transform:rotate(180deg)}
  .footer-col-links{display:none;padding-bottom:8px}
  .footer-col.open .footer-col-links{display:block}
  .footer-col a{padding:6px 0;margin-bottom:0;font-size:14px}
  .footer-btm{flex-direction:column;align-items:flex-start;gap:10px;font-size:12px}
  .footer-legal{gap:12px}
  .callout{padding:12px 14px;font-size:13px}
  .prose h3{font-size:17px}
}






/* ═══════════════════════════════════════════════════════════════════════════
   BLOG STYLES — paste at the very bottom of style.css
   
   PHILOSOPHY: Every rule here is ONLY here because it does not exist in
   style.css. If style.css already has it, we use that class in the HTML
   instead of redefining it. Nothing is duplicated.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Blog card grid ──────────────────────────────────────────────────────── */
/* .hero, .hero h1, .hero h1 em, .hero-desc, .eyebrow → already in style.css  */
/* blog/index.php uses those classes directly — nothing to add here            */

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:48px 0 16px}

/* ── Blog card ───────────────────────────────────────────────────────────── */
.blog-card{display:flex;flex-direction:column;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.blog-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-cat{background:var(--accent);color:#fff;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;flex-shrink:0}
.card-date,.card-mins,.card-sep{font-size:12px;color:var(--ink3)}
.card-title{font-family:var(--ff-d);font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1.35;margin:0}
.card-desc{font-size:14px;color:var(--ink2);line-height:1.7;margin:0;flex:1}
.card-read{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--accent);margin-top:4px}
.card-read svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.blog-card:hover .card-read svg{transform:translateX(4px)}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.blog-empty{text-align:center;padding:80px 20px;color:var(--ink3)}
.blog-empty svg{width:40px;height:40px;margin:0 auto 16px;display:block;fill:none;stroke:var(--ink3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.blog-empty p{font-size:15px}

/* ── Bottom CTA strip ────────────────────────────────────────────────────── */
.blog-cta-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;margin:40px 0 64px;flex-wrap:wrap}
.bcs-text{display:flex;flex-direction:column;gap:4px}
.bcs-text strong{font-size:15px;color:var(--ink)}
.bcs-text span{font-size:13px;color:var(--ink3)}
.blog-cta-btn{text-decoration:none;height:auto;padding:12px 24px}

/* ── Article hero ────────────────────────────────────────────────────────── */
.art-hero{background:var(--cream);padding:52px 0 36px;border-bottom:1px solid var(--line)}
.breadcrumb{font-size:13px;color:var(--ink3);margin-bottom:18px}
.breadcrumb a{color:var(--accent);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.art-cat{display:inline-block;background:var(--accent);color:#fff;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;margin-bottom:14px}
.art-hero h1{font-family:var(--ff-d);font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.25;color:var(--ink);margin:0 0 16px;max-width:760px}
.art-byline{font-size:13px;color:var(--ink3)}

/* ── Article body ────────────────────────────────────────────────────────── */
/* .prose in style.css already covers: h2, h3, p, ul, li, code, strong       */
/* We use class="prose" on <article> and only add what .prose doesn't have    */

.art-body{max-width:760px;margin:0 auto;padding:48px 0 64px}

/* Links inside article — .prose doesn't style links */
.art-body a{color:var(--accent);text-decoration:underline}
.art-body a:hover{text-decoration:none}

/* ol — .prose only has ul */
.art-body ol{padding-left:1.5em;margin:0 0 1.4em}
.art-body ol li{line-height:1.7;color:var(--ink2);margin-bottom:.4em}

/* h2 section divider line — .prose h2 has no border */
.art-body h2{border-bottom:1px solid var(--line);padding-bottom:.4em;margin-top:2.2em}

/* Table spacing — .table-wrap and .res-table styles are already in style.css */
.art-body .table-wrap{margin:1.5em 0}

/* ── Article callout box ─────────────────────────────────────────────────── */
/* .callout in style.css is blue — this is the accent/red variant for articles */
.art-callout{background:var(--accent-bg);border-left:4px solid var(--accent);padding:16px 20px;border-radius:0 var(--r) var(--r) 0;margin:1.8em 0}
.art-callout p{margin:0;font-size:.95rem;color:var(--ink2)}

/* ── Back to blog link ───────────────────────────────────────────────────── */
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:.9rem;font-weight:600;text-decoration:none;margin-bottom:36px}
.back-link:hover{text-decoration:underline}

/* ── Article bottom CTA ──────────────────────────────────────────────────── */
.art-cta{background:var(--ink);border-radius:var(--r);padding:32px 36px;text-align:center;margin:3em 0}
.art-cta h3{font-family:var(--ff-d);color:#fff;font-size:1.3rem;margin:0 0 10px}
.art-cta p{color:rgba(255,255,255,.6);margin:0 0 20px;font-size:.95rem}
.art-cta a{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:13px 28px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.95rem;transition:opacity .2s}
.art-cta a:hover{opacity:.88}

/* ── Blog responsive ─────────────────────────────────────────────────────── */
@media(max-width:768px){
  .blog-grid{grid-template-columns:1fr 1fr;gap:18px}
  .blog-cta-strip{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr;padding:32px 0 12px}
  .blog-cta-strip{padding:20px}
  .art-hero{padding:36px 0 24px}
  .art-body{padding:32px 0 48px}
  .art-cta{padding:24px 20px}
}



/* ── Blog card thumbnail ─────────────────────────────────────────────────── */
.blog-card-thumb{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:calc(var(--r) - 2px);
  display:block;
  margin:-2px 0 4px;  /* pulls flush to card edge top */
}

/* ── Article hero thumbnail ──────────────────────────────────────────────── */
.art-thumb{
  width:100%;
  height:auto;
  border-radius:var(--r);
  display:block;
  margin:0 0 2em;
  border:1px solid var(--line);
}