@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

:root{
  --ink:#111827; --body:#374151; --muted:#6b7280; --line:#e5e7eb;
  --accent:#4f46e5; --accent-dark:#4338ca; --accent-light:#6366f1;
  --bg:#ffffff; --soft:#f9fafb;
  --warn-bg:#fffbeb; --warn-line:#fcd34d;
  --max:680px;
  --max-wide:880px;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--body); font:1rem/1.7 var(--sans);}
a{color:var(--accent); text-decoration:none; transition:color .15s;}
a:hover{text-decoration:underline;}
a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}

.skip-link{
  position:absolute; top:-100%; left:16px; z-index:100;
  background:var(--accent); color:#fff; padding:8px 16px;
  border-radius:0 0 6px 6px; font-size:.85rem; font-weight:600;
}
.skip-link:focus{top:0;}

/* ── nav ── */
.site-nav{
  display:flex; flex-wrap:wrap; gap:24px; align-items:center;
  max-width:var(--max-wide); margin:0 auto; padding:20px 24px;
  position:relative; font-size:.875rem; font-weight:500;
}
.site-nav::after{
  content:""; position:absolute; left:24px; right:24px; bottom:0;
  height:1px; background:var(--line);
}
.site-nav .logo{
  font-weight:700; color:var(--ink); font-size:1rem; margin-right:auto;
  display:inline-flex; align-items:center; gap:8px; letter-spacing:-.01em;
}
.site-nav .logo::before{
  content:"H"; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  background:var(--ink); color:#fff;
  border-radius:50%; font-size:.72rem; font-weight:800;
  transition:background .2s;
}
.site-nav .logo:hover{color:var(--ink); text-decoration:none;}
.site-nav .logo:hover::before{background:var(--accent);}
.site-nav a{color:var(--muted); transition:color .15s;}
.site-nav a:hover{color:var(--ink); text-decoration:none;}
.site-nav a[aria-current="page"]{color:var(--ink); font-weight:600;}

/* ── article ── */
.article{max-width:var(--max); margin:0 auto; padding:48px 24px 80px; position:relative;}
.article::before{
  content:""; position:absolute; top:0; left:24px; right:24px;
  height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-light),transparent 70%);
  border-radius:0 0 2px 2px;
}
h1{
  font-family:var(--serif); font-size:2.2rem; line-height:1.12;
  color:var(--ink); letter-spacing:-.025em; margin:.3em 0 .35em;
  text-wrap:balance;
}
.article > h1:first-child::after,
.article > h1:first-of-type::after{
  content:""; display:block; width:40px; height:3px; margin:18px 0 6px;
  border-radius:2px; background:var(--accent);
}
h2{
  font-family:var(--serif); font-size:1.375rem; color:var(--ink);
  margin:2.8em 0 .7em; letter-spacing:-.01em; line-height:1.2;
  padding-top:.5em; border-top:1px solid var(--line);
}
h3{font-size:1rem; color:var(--ink); margin:1.5em 0 .4em; font-weight:600;}
p{margin:.85em 0; max-width:65ch;}
.byline{color:var(--muted); font-size:.82rem; margin:0 0 1.5em; max-width:none; letter-spacing:.01em;}
.lede{font-size:1.08rem; color:var(--ink); line-height:1.8; max-width:60ch; font-family:var(--serif);}
ul,ol{padding-left:1.2em;}
li{margin:.5em 0; max-width:65ch;}
blockquote{
  margin:1.5em 0; padding:16px 24px; border-left:3px solid var(--accent);
  background:var(--soft); font-family:var(--serif); font-style:italic;
  color:var(--ink); font-size:1rem; border-radius:0 8px 8px 0;
}

.disclosure{
  background:var(--soft); border:1px solid var(--line); border-left:3px solid var(--muted);
  border-radius:0 8px 8px 0; padding:12px 16px;
  font-size:.8rem; color:var(--muted); margin:0 0 1.8em; line-height:1.6;
}
.cta-box{
  background:var(--soft);
  border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0; padding:20px 24px; margin:2em 0;
  font-size:.93rem; line-height:1.7;
}
.cta-box a{font-weight:600;}

.toc{
  background:var(--soft); border:1px solid var(--line); border-radius:10px;
  padding:18px 24px; margin:2em 0; font-size:.9rem;
}
.toc strong{
  display:block; margin-bottom:10px; color:var(--muted);
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.toc ul{margin:0; padding-left:1.1em;}
.toc li{margin:.3em 0; max-width:none;}

/* ── tables ── */
.comparison-table-wrap{overflow-x:auto; margin:2em -24px; padding:0 24px;}
.comparison-table{
  border-collapse:collapse; width:100%; font-size:.85rem; min-width:480px;
  font-variant-numeric:tabular-nums;
}
.comparison-table th{
  background:var(--ink); color:#fff; text-align:left;
  padding:10px 14px; font-weight:600; font-size:.78rem;
  letter-spacing:.03em; text-transform:uppercase;
}
.comparison-table td{border:1px solid var(--line); padding:10px 14px; vertical-align:top;}
.comparison-table tr:nth-child(even) td{background:var(--soft);}
.comparison-table td.pro{color:#059669; font-weight:500;}
.comparison-table td.con{color:#dc2626; font-weight:500;}

/* ── charts ── */
.chart-fig{
  margin:2.5em -24px; border:1px solid var(--line); border-radius:12px;
  padding:20px 24px 16px; background:var(--soft);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.chart-fig svg{width:100%; height:auto; display:block;}
.chart-fig figcaption{font-size:.8rem; color:var(--muted); margin-top:12px; line-height:1.55;}

/* ── FAQ ── */
.faq-item{
  background:var(--soft); border:1px solid var(--line); border-radius:10px;
  padding:16px 20px; margin:14px 0;
}
.faq-item h3{margin:0 0 .3em; font-size:.95rem; font-family:var(--serif);}
.faq-item p{margin:0; font-size:.88rem; line-height:1.65; max-width:none;}

.checklist{list-style:none; padding-left:0;}
.checklist li{padding-left:1.5em; position:relative;}
.checklist li::before{content:"\26A0"; position:absolute; left:0; color:#d97706;}
.note{font-size:.85rem; color:var(--muted); font-style:italic;}
.related{
  font-size:.85rem; color:var(--muted);
  border-top:1px solid var(--line); padding-top:1.5em; margin-top:3.5em;
}

/* ── footer ── */
.site-footer{
  max-width:var(--max-wide); margin:0 auto; padding:40px 24px 60px;
  border-top:1px solid var(--line);
  font-size:.82rem; color:var(--muted); line-height:1.6;
}
.site-footer a{color:var(--muted);}
.site-footer a:hover{color:var(--ink); text-decoration:none;}
.copyright{font-size:.75rem; color:#9ca3af; margin-top:1em;}
.footer-inner{
  display:flex; gap:40px; justify-content:space-between; align-items:flex-start;
  margin-bottom:24px;
}
.footer-brand{flex:1; min-width:0;}
.footer-name{font-weight:700; color:var(--ink); font-size:.9rem; display:block; margin-bottom:6px;}
.footer-brand p{font-size:.82rem; color:var(--muted); line-height:1.6; margin:0; max-width:360px;}
.footer-links{display:flex; gap:20px; flex-shrink:0; font-size:.82rem;}

/* ── hero ── */
.hero{
  max-width:var(--max-wide); margin:0 auto;
  padding:56px 24px 0; text-align:center;
  position:relative; overflow:hidden;
}
.hero-deco{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.hero h1{
  font-family:var(--serif); font-size:3rem; max-width:500px;
  margin:0 auto .25em; letter-spacing:-.04em; line-height:1.05;
  color:var(--ink); text-wrap:balance; position:relative;
}
.hero .tagline{
  font-size:.93rem; color:var(--muted); max-width:460px;
  margin:0 auto; line-height:1.7; position:relative;
}
.hero .hero-badge{
  display:inline-block; margin:0 0 20px; padding:0;
  font-size:.68rem; font-weight:600; letter-spacing:.12em;
  color:var(--accent); text-transform:uppercase; position:relative;
}
.hero::after{
  content:""; display:block; width:40px; height:2px;
  background:var(--accent); margin:40px auto 0; border-radius:1px;
  position:relative;
}

/* ── sections ── */
.section-head{max-width:var(--max-wide); margin:0 auto; padding:48px 24px 0;}
.section-head:first-of-type{padding-top:20px;}
.section-head h2{
  margin:0; font-family:var(--serif); font-size:1.25rem;
  letter-spacing:-.01em; color:var(--ink);
  border-top:none; padding-top:0;
}

/* featured grid */
.featured-grid{
  max-width:var(--max-wide); margin:0 auto; padding:16px 24px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}

/* regular grid */
.card-grid{
  max-width:var(--max-wide); margin:0 auto; padding:16px 24px 0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;
}

/* card */
.card{
  border:1px solid var(--line); border-radius:10px; padding:20px; background:#fff;
  transition:transform .15s ease, box-shadow .25s ease, border-color .2s;
  text-decoration:none !important; position:relative;
}
.card:hover{
  border-color:#c7d2fe;
  box-shadow:0 8px 30px rgba(79,70,229,.08);
  transform:translateY(-3px);
}
.card:active{transform:translateY(0) scale(.99);}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.card h3{margin:0 0 .3em; font-size:.95rem; color:var(--ink); font-weight:600;}
.card p{margin:0; font-size:.85rem; color:var(--muted); line-height:1.55;}

/* featured card */
.card.card-featured{
  border-top:3px solid var(--accent); padding:28px 28px 28px; background:linear-gradient(180deg,#fafbff,#fff);
  display:flex; flex-direction:column;
}
.card-featured .card-illust{
  width:100%; height:120px; margin-bottom:18px; border-radius:8px;
  background:var(--soft); overflow:hidden; display:flex;
  align-items:center; justify-content:center;
}
.card-featured .card-illust svg{width:100%; height:100%;}
.card-featured h3{font-family:var(--serif); font-size:1.2rem; margin-bottom:.5em; letter-spacing:-.01em;}
.card-featured p{font-size:.9rem; line-height:1.65; color:var(--body);}
.card-label{
  display:inline-block; font-size:.62rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}

/* section divider */
.section-divider{
  max-width:var(--max-wide); margin:0 auto; padding:0 24px;
  height:1px; position:relative;
}
.section-divider::after{
  content:""; display:block; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
}

/* card icon */
.card-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; margin:0 0 12px;
  color:#fff; font-weight:700; font-size:.78rem; line-height:1;
}
.card-ico.dual{font-size:.6rem; font-weight:700;}

.ico-red{background:#dc2626;}
.ico-indigo{background:#4f46e5;}
.ico-indigo-light{background:#6366f1;}
.ico-purple{background:#4338ca;}
.ico-blue{background:#2563eb;}
.ico-slate{background:#64748b;}
.ico-green{background:#059669;}
.ico-sky{background:#0ea5e9;}
.ico-amber{background:#d97706;}

/* ── grain ── */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:256px;
}

/* ── responsive ── */
@media(max-width:640px){
  h1{font-size:1.5rem;}
  h2{margin-top:2.2em;}
  .hero{padding:36px 20px 0;}
  .hero h1{font-size:2.1rem;}
  .hero .tagline{font-size:.88rem; max-width:none;}
  .hero::after{margin-top:28px;}
  .article{padding:28px 20px 56px;}
  .site-nav{gap:16px; padding:16px 20px; font-size:.82rem;}
  .site-nav .logo{flex-basis:100%;}
  .site-nav::after{left:20px; right:20px;}
  .featured-grid{grid-template-columns:1fr; padding:12px 20px 0;}
  .card-grid{grid-template-columns:1fr; padding:12px 20px 0;}
  .section-head{padding:32px 20px 0;}
  .chart-fig{margin:1.8em -12px; padding:14px; border-radius:10px;}
  .comparison-table-wrap{margin:1.5em -12px; padding:0 12px;}
  .cta-box{padding:16px 18px;}
  .toc{padding:14px 18px;}
  .site-footer{padding:28px 20px 48px;}
  .footer-inner{flex-direction:column; gap:16px;}
  .footer-links{flex-wrap:wrap; gap:10px 20px;}
}