/* ── Variables ──────────────────────────────────────────── */
:root{
  --paper:#f3efe4;
  --paper-2:#ece6d6;
  --ink:#181410;
  --ink-soft:#5b5346;
  --line:#c8bfa9;
  --signal:#e8431f;
  --signal-2:#ff6a3c;
  --good:#2f6f4f;
  --bad:#c0392b;
  --card:#fbf9f2;
  --shadow:18px 18px 0 rgba(24,20,16,.08);
}

/* ── Reset & base ───────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans",sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(232,67,31,.06), transparent 40%),
    radial-gradient(circle at 88% 8%, rgba(47,111,79,.05), transparent 35%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  min-height:100%;
}
.wrap{max-width:980px;margin:0 auto;padding:28px 20px 64px}
a{color:inherit}

/* ── Header ─────────────────────────────────────────────── */
header.top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);
  padding-bottom:16px;margin-bottom:0;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) both;
}
.brand{display:flex;align-items:center;gap:14px}
.logo{
  width:46px;height:46px;border:2px solid var(--ink);background:var(--signal);
  display:grid;place-items:center;color:#fff;flex:0 0 auto;
  box-shadow:4px 4px 0 var(--ink);
}
.logo svg{width:26px;height:26px}
.brand h1{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:22px;letter-spacing:-.03em;line-height:.9;
}
.brand-title{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:22px;letter-spacing:-.03em;line-height:.9;
}
.brand-title a{text-decoration:none;color:var(--ink)}
.brand-title a:hover{color:var(--signal)}
.brand .sub{font-size:12.5px;color:var(--ink-soft);font-weight:500;letter-spacing:.02em;margin-top:3px}
.trust{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-soft);
  border:1px dashed var(--line);padding:7px 11px;border-radius:2px;background:var(--card);
  display:flex;align-items:center;gap:7px;
}
.trust .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(47,111,79,.18)}

/* ── Site navigation ────────────────────────────────────── */
nav.site-nav{
  display:flex;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);
  margin-bottom:22px;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .04s both;
}
nav.site-nav a{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-soft);padding:10px 15px;
  border-right:1px solid var(--line);
  transition:.13s;white-space:nowrap;
}
nav.site-nav a:last-child{border-right:0}
nav.site-nav a:hover{background:var(--paper-2);color:var(--ink)}
nav.site-nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
nav.site-nav a:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}

/* ── Ad slots ───────────────────────────────────────────── */
.ad-slot{
  border:1px dashed var(--line);
  background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 10px,var(--card) 10px,var(--card) 20px);
  color:var(--ink-soft);font-family:"JetBrains Mono",monospace;font-size:11px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:3px;margin:22px 0;letter-spacing:.04em;overflow:hidden;
}
.ad-slot span{background:var(--paper);padding:2px 10px}

/* ── Panels & controls (tool page) ─────────────────────── */
.panel{
  background:var(--card);border:2px solid var(--ink);border-radius:4px;
  box-shadow:var(--shadow);padding:20px;margin-bottom:22px;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .08s both;
}
.panel-title{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.panel-title::before{content:"";width:18px;height:2px;background:var(--signal)}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.ctl label{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;margin-bottom:9px;text-transform:uppercase;color:var(--ink-soft)}
.seg{display:flex;border:2px solid var(--ink);border-radius:3px;overflow:hidden}
.seg button{
  flex:1;border:0;background:var(--card);font-family:"JetBrains Mono",monospace;font-weight:700;
  font-size:13px;padding:10px 4px;cursor:pointer;color:var(--ink);transition:.15s;border-right:2px solid var(--ink);
}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:not([aria-pressed="true"]):not(:disabled):hover{background:var(--paper-2)}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.slider-row{display:flex;align-items:center;gap:12px}
input[type=range]{flex:1;accent-color:var(--signal);height:4px}
.qval{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:14px;min-width:46px;text-align:right}
.num{
  width:100%;border:2px solid var(--ink);border-radius:3px;padding:9px 11px;
  font-family:"JetBrains Mono",monospace;font-size:14px;background:var(--card);color:var(--ink);
}
.num:focus{outline:none;box-shadow:3px 3px 0 var(--signal)}
.hint{font-size:11.5px;color:var(--ink-soft);margin-top:7px;line-height:1.4}
.ctl.disabled{opacity:.4;pointer-events:none}

/* ── Drop zone (tool page) ──────────────────────────────── */
.drop{
  border:2px dashed var(--line);border-radius:4px;background:var(--card);
  padding:46px 22px;text-align:center;cursor:pointer;transition:.18s;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .16s both;
}
.drop:hover,.drop.over{border-color:var(--signal);background:#fff7f3;transform:translateY(-2px)}
.drop:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.drop .big{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:23px;letter-spacing:-.02em;margin-bottom:6px}
.drop .small{font-size:13px;color:var(--ink-soft)}
.drop .icon{width:54px;height:54px;margin:0 auto 14px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:var(--paper)}
.drop .icon svg{width:26px;height:26px}

/* ── Notice & live region ───────────────────────────────── */
.notice{
  margin-top:14px;border:2px solid var(--bad);border-radius:3px;background:#fbeae7;
  color:var(--bad);font-size:13px;padding:10px 13px;display:none;
  animation:pop .3s ease both;
}
.notice.show{display:block}

/* ── Results (tool page) ────────────────────────────────── */
.results{margin-top:26px}
.results-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.results-head h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em}
.results-head .count{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-soft)}
.totals{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);padding:6px 11px;border-radius:3px}
.totals b{color:var(--good)}
.item{
  display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;
  background:var(--card);border:2px solid var(--ink);border-radius:4px;
  padding:13px;margin-bottom:12px;box-shadow:6px 6px 0 rgba(24,20,16,.07);
  animation:pop .35s cubic-bezier(.2,.8,.2,1) both;
}
.item.error{border-color:var(--bad)}
.thumb{width:64px;height:64px;border:1.5px solid var(--line);border-radius:3px;object-fit:cover;background:var(--paper-2);display:block}
.thumb.ph{display:grid;place-items:center;color:var(--ink-soft)}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--signal);border-radius:50%;animation:spin .8s linear infinite}
.meta .name{font-weight:600;font-size:14px;word-break:break-all;margin-bottom:5px}
.meta .sizes{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta .errline{color:var(--bad);font-size:12.5px;font-weight:600}
.arrow{color:var(--signal);font-weight:700}
.save-badge{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:12px;padding:3px 8px;border-radius:3px;background:rgba(47,111,79,.14);color:var(--good)}
.save-badge.bad{background:rgba(232,67,31,.12);color:var(--signal)}
.item .act{display:flex;flex-direction:column;gap:7px}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:13.5px;cursor:pointer;
  border:2px solid var(--ink);border-radius:3px;padding:9px 15px;background:var(--card);color:var(--ink);
  transition:.14s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(1px,1px);box-shadow:none}
.btn:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.btn.primary{background:var(--signal);color:#fff;border-color:var(--ink)}
.btn.primary:hover{box-shadow:3px 3px 0 var(--ink)}
.btn.sm{padding:7px 12px;font-size:12.5px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.bar .working{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-soft);display:none;align-items:center;gap:8px}
.bar .working.show{display:flex}

/* ── Feature highlights (home) ──────────────────────────── */
.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin:24px 0 0;
}
.feature{
  background:var(--card);border:2px solid var(--ink);border-radius:4px;
  padding:16px;box-shadow:4px 4px 0 rgba(24,20,16,.06);
}
.feature-label{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);font-weight:700;margin-bottom:6px;
}
.feature h3{font-size:14px;font-weight:700;margin-bottom:5px}
.feature p{font-size:13px;color:var(--ink-soft);margin:0}

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-soft);
  margin-bottom:18px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .06s both;
}
.breadcrumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{opacity:.4}

/* ── Article header ─────────────────────────────────────── */
.article-header{
  margin-bottom:24px;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .1s both;
}
.article-header h1{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:32px;letter-spacing:-.03em;line-height:1.1;margin-bottom:12px;
}
.article-meta{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-soft);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.article-meta .tag{
  background:var(--signal);color:#fff;padding:2px 8px;border-radius:2px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}

/* ── Article body prose ─────────────────────────────────── */
.article-body{
  background:var(--card);border:2px solid var(--ink);border-radius:4px;
  padding:28px;box-shadow:var(--shadow);
  font-size:15px;line-height:1.72;color:var(--ink-soft);
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .14s both;
}
.article-body h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:21px;
  letter-spacing:-.02em;color:var(--ink);margin:36px 0 10px;
  padding-top:10px;border-top:2px solid var(--line);
}
.article-body > h2:first-child,.article-body > p:first-child + h2{border-top:0;margin-top:0;padding-top:0}
.article-body h3{font-size:16px;font-weight:700;color:var(--ink);margin:22px 0 8px}
.article-body p{margin-bottom:16px;max-width:72ch}
.article-body ul,.article-body ol{margin:0 0 16px 22px}
.article-body li{margin-bottom:7px}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--ink);border-bottom:1.5px solid var(--signal);text-decoration:none}
.article-body a:hover{background:rgba(232,67,31,.07)}

/* ── Tip / callout box ──────────────────────────────────── */
.tip{
  border:2px solid var(--line);border-left:4px solid var(--signal);
  background:var(--paper);border-radius:3px;
  padding:14px 16px;margin:20px 0;
}
.tip strong{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);display:block;margin-bottom:5px;
}
.tip p{margin:0;font-size:14px}

/* ── CTA box ────────────────────────────────────────────── */
.cta-box{
  background:var(--ink);color:var(--paper);border-radius:4px;
  padding:20px 24px;margin:28px 0 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.cta-box p{color:rgba(243,239,228,.75);font-size:14px;margin:0;max-width:none}
.cta-box strong{color:var(--paper);display:block;font-size:16px;margin-bottom:4px}
.cta-box .btn{background:var(--signal);color:#fff;border-color:transparent;flex-shrink:0}
.cta-box .btn:hover{box-shadow:3px 3px 0 rgba(255,255,255,.25)}

/* ── Comparison table ───────────────────────────────────── */
.table-wrap{overflow-x:auto;margin:20px 0}
.comparison-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.comparison-table th{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);
  padding:10px 13px;text-align:left;white-space:nowrap;
}
.comparison-table td{padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.comparison-table tr:nth-child(even) td{background:var(--paper-2)}
.comparison-table .yes{color:var(--good);font-weight:600}
.comparison-table .no{color:var(--bad);font-weight:600}
.comparison-table .partial{color:var(--ink-soft)}

/* ── Decision steps ─────────────────────────────────────── */
.decision-guide{margin:18px 0}
.decision-step{
  border:2px solid var(--ink);border-radius:3px;background:var(--card);
  padding:12px 16px;margin-bottom:9px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  box-shadow:4px 4px 0 rgba(24,20,16,.06);
}
.decision-step .q{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap}
.decision-step .a{font-size:14px;color:var(--ink-soft)}
.decision-step .a strong{color:var(--signal)}

/* ── Guide cards (guides index) ─────────────────────────── */
.guides-intro{
  margin-bottom:24px;font-size:15px;color:var(--ink-soft);max-width:68ch;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .08s both;
}
.guide-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.guide-card{
  background:var(--card);border:2px solid var(--ink);border-radius:4px;
  padding:20px;box-shadow:6px 6px 0 rgba(24,20,16,.07);
  display:flex;flex-direction:column;gap:10px;
  transition:.14s;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) both;
}
.guide-card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 rgba(24,20,16,.09)}
.guide-card .card-tag{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);font-weight:700;
}
.guide-card h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:17px;
  letter-spacing:-.02em;margin:0;
}
.guide-card h3 a{
  text-decoration:none;color:var(--ink);
  border-bottom:2px solid transparent;transition:.13s;
}
.guide-card h3 a:hover{border-bottom-color:var(--signal)}
.guide-card p{font-size:13px;color:var(--ink-soft);margin:0;flex:1}
.guide-card .read-link{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--signal);
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;
}
.guide-card .read-link:hover{text-decoration:underline}

/* ── Legal / standalone content pages ───────────────────── */
.page-header{
  margin-bottom:24px;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .1s both;
}
.page-header h1{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:30px;letter-spacing:-.03em;line-height:1.1;margin-bottom:8px;
}
.page-meta{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-soft);
}
.prose{
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .14s both;
}
.prose-block{
  background:var(--card);border:2px solid var(--ink);border-radius:4px;
  padding:24px;margin-bottom:16px;
  box-shadow:6px 6px 0 rgba(24,20,16,.06);
}
.prose-block h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:20px;
  letter-spacing:-.02em;margin-bottom:12px;
}
.prose-block h3{font-size:15px;font-weight:600;margin:16px 0 6px;color:var(--ink)}
.prose-block p{font-size:14px;color:var(--ink-soft);margin-bottom:10px;max-width:70ch}
.prose-block ul,.prose-block ol{margin:0 0 10px 20px}
.prose-block li{font-size:14px;color:var(--ink-soft);margin-bottom:5px}
.prose-block a{color:var(--ink);border-bottom:1.5px solid var(--signal);text-decoration:none}
.prose-block a:hover{background:rgba(232,67,31,.07)}
.prose-block dt{font-weight:600;font-size:14px;margin-top:14px}
.prose-block dd{font-size:14px;color:var(--ink-soft);margin:4px 0 0 0}

/* ── Footer ─────────────────────────────────────────────── */
footer{
  margin-top:46px;border-top:2px solid var(--ink);padding-top:18px;
  font-size:12.5px;color:var(--ink-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
footer a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--signal)}
footer .links{display:flex;gap:18px;flex-wrap:wrap}

/* ── Utility ────────────────────────────────────────────── */
.empty{font-size:13px;color:var(--ink-soft);text-align:center;padding:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* ── Animations ─────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:640px){
  .brand h1,.brand-title{font-size:17px}
  .article-header h1{font-size:24px}
  .page-header h1{font-size:24px}
  .item{grid-template-columns:52px 1fr}
  .item .act{grid-column:1/-1;flex-direction:row}
  .thumb{width:52px;height:52px}
  nav.site-nav a{padding:9px 12px;font-size:10.5px;letter-spacing:.08em}
  .article-body{padding:18px}
  .cta-box{flex-direction:column;align-items:flex-start}
  .comparison-table th,.comparison-table td{padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}