:root {
    --ink:#14201c; --deep:#0e2a23; --deep2:#16392f; --bg:#f6f4ee; --card:#fff; --line:#e2ded3;
    --gold:#c9a24b; --gold-ink:#3a2c08; --muted:#5b6661; --soft:#eef3ef;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:120px; }
  body { margin:0; font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
  a { color:#17594a; }
  :focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
  .wrap { max-width:1140px; margin:0 auto; padding:0 20px; }

  .top { position:sticky; top:0; z-index:5; background:var(--deep); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.08); }
  header { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; padding:14px 20px; max-width:1140px; margin:0 auto; }
  .logo { font-family:var(--serif); font-size:1.35rem; color:#fff; text-decoration:none; letter-spacing:.01em; }
  .logo em { font-style:normal; color:var(--gold); }
  .search { flex:1 1 280px; }
  .search input { width:100%; padding:11px 16px; border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:.98rem; background:rgba(255,255,255,.08); color:#fff; }
  .search input::placeholder { color:rgba(255,255,255,.7); }
  .search input:focus { background:#fff; color:var(--ink); }
  nav { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:0 20px 12px; max-width:1140px; margin:0 auto; }
  nav::-webkit-scrollbar { display:none; }
  nav button { background:none; border:1px solid transparent; color:rgba(255,255,255,.85); padding:6px 14px; border-radius:999px; font:inherit; font-size:.92rem; cursor:pointer; white-space:nowrap; }
  nav button:hover { border-color:rgba(255,255,255,.5); }
  nav button[aria-pressed=true] { background:var(--gold); color:var(--gold-ink); font-weight:600; }

  .hero { background:var(--deep2); color:#fff; padding:56px 0 64px; }
  .eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color:var(--gold); margin:0 0 12px; }
  .hero h1 { font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,5vw,3.1rem); line-height:1.12; margin:0 0 16px; max-width:18ch; }
  .hero p.lead { margin:0 0 28px; max-width:56ch; color:rgba(255,255,255,.85); font-size:1.08rem; }
  .trust { display:flex; flex-wrap:wrap; gap:10px 28px; list-style:none; padding:0; margin:0; font-size:.92rem; color:rgba(255,255,255,.85); }
  .trust li::before { content:"✓"; color:var(--gold); margin-right:8px; }

  main { padding:0 0 48px; }
  .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; list-style:none; padding:0; margin:-34px 0 20px; }
  .steps button { width:100%; height:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; font:inherit; color:inherit; cursor:pointer; box-shadow:0 8px 24px rgba(14,42,35,.08); transition:transform .15s, box-shadow .15s; }
  .steps button:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(14,42,35,.14); }
  .steps .n { font-family:var(--serif); color:var(--gold); font-size:1.5rem; display:block; line-height:1; margin-bottom:8px; }
  .steps b { display:block; }
  .steps small { color:var(--muted); }
  .disclosure { font-size:.84rem; color:var(--muted); margin:0 0 32px; }

  h2 { font-family:var(--serif); font-weight:500; font-size:1.6rem; margin:0 0 18px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:18px; }
  .card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s, transform .15s; }
  .card:hover { box-shadow:0 14px 32px rgba(14,42,35,.12); transform:translateY(-2px); }
  .card[hidden] { display:none; }
  .head { display:flex; gap:12px; align-items:center; }
  .mono { flex:none; width:44px; height:44px; border-radius:12px; background:var(--deep); color:var(--gold); font-family:var(--serif); font-size:1.25rem; display:grid; place-items:center; }
  .card h3 { margin:0; font-size:1.1rem; line-height:1.25; }
  .tag { font-size:.76rem; color:var(--muted); }
  .pick { position:absolute; top:-10px; right:16px; background:var(--gold); color:var(--gold-ink); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px; }
  .rating { font-size:.88rem; color:var(--muted); }
  .rating b { color:var(--ink); font-size:1rem; }
  .rating .star { color:var(--gold); }
  .card p { margin:0; font-size:.94rem; flex:1; }
  .best { font-size:.86rem; background:var(--soft); border-radius:8px; padding:8px 10px; }
  .cta { display:block; text-align:center; background:var(--deep); color:#fff; font-weight:600; padding:12px; border-radius:10px; text-decoration:none; }
  .cta:hover { background:var(--deep2); }
  .cta span { color:var(--gold); }
  #empty { padding:32px; text-align:center; color:var(--muted); }

  .how { margin-top:56px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; padding:32px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
  .how h2 { grid-column:1/-1; margin:0; }
  .how h3 { margin:0 0 4px; font-size:1rem; }
  .how p { margin:0; font-size:.93rem; color:var(--muted); }

  footer { background:var(--deep); color:rgba(255,255,255,.75); font-size:.85rem; padding:28px 0; }
  footer p { margin:0 0 8px; max-width:80ch; }
  footer a { color:#fff; }
  .footlinks { margin-bottom:14px !important; }
  .sr { position:absolute; left:-9999px; }
  @media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

  /* guide pages */
  .article { max-width:74ch; margin:0 auto; padding:40px 0 8px; }
  .article h2 { margin:40px 0 12px; }
  .article h3 { margin:24px 0 6px; font-size:1.05rem; }
  .article table { width:100%; border-collapse:collapse; margin:16px 0; background:var(--card); border:1px solid var(--line); font-size:.94rem; }
  .article th, .article td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
  .article th { background:var(--soft); }
  .tablewrap { overflow-x:auto; }
  .verdict { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:10px; padding:16px 20px; margin:20px 0; }
  .article .cta { display:inline-block; padding:12px 22px; margin:6px 8px 6px 0; }
  .sources { font-size:.85rem; color:var(--muted); }
  .guides { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:14px; }
  .guides a { display:block; height:100%; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; text-decoration:none; color:var(--ink); font-weight:600; }
  .guides a:hover { border-color:var(--deep); }