:root { --ink:#191919; --muted:#505660; --line:#e2e3e6; --accent:#405cf5; }
html { scroll-behavior:smooth; scroll-padding-top:105px; }
body { background:#fff; color:var(--ink); font-family:"Helvetica Neue",Helvetica,"Avenir Next",sans-serif; line-height:1.75; }
.ad-bar { display:none; }
.masthead { background:#0b0b0b; width:100%; padding:12px max(24px,calc((100% - 1104px)/2)); display:flex; align-items:center; min-height:84px; position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:16px; text-decoration:none; color:#fff; font-size:24px; font-weight:700; letter-spacing:-.8px; line-height:1.2; }
.brand-mark { display:grid; place-items:center; background:#000; width:60px; height:60px; font-family:Georgia,serif; font-size:34px; font-style:italic; color:#fff; }
.wrap { max-width:768px; padding:0 24px; }
h1 { font-family:inherit; font-size:42px; line-height:1.28; font-weight:800; letter-spacing:-1.6px; text-align:center; margin:40px 0 8px; }
.gift-tip { text-align:center; font-size:18px; font-style:italic; color:var(--muted); margin-bottom:22px; }
.meta { color:var(--muted); border-top:1px solid var(--line); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; padding-top:12px; text-align:center; margin-bottom:24px; }
.meta a { color:inherit; text-underline-offset:3px; }
.hero { margin:0 0 24px; }
.hero img { width:100%; height:auto; display:block; border-radius:8px; }
.intro { font-size:17px; line-height:1.8; color:var(--ink); margin-bottom:32px; }
.intro p + p { margin-top:16px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.card { border:0; border-top:1px solid var(--line); border-radius:0; padding:38px 0 40px; margin:0; box-shadow:none; background:#fff; }
.card h2 { font-family:inherit; font-size:24px; font-weight:750; line-height:1.5; letter-spacing:-.55px; margin:0 0 16px; }
.rank { position:static; display:inline-flex; align-items:center; justify-content:center; min-width:35px; width:auto; height:36px; padding:0 8px; border-radius:5px; background:#eef1f4; color:var(--ink); font-size:18px; font-weight:800; vertical-align:middle; margin-right:9px; }
.product-link { color:var(--accent); text-decoration:none; }
.product-link:hover { text-decoration:underline; text-underline-offset:4px; }
.card .pimg { display:flex; align-items:center; justify-content:center; aspect-ratio:16 / 9; margin:0 0 22px; background:#f1f3f5; border-radius:12px; overflow:hidden; box-shadow:0 2px 5px #00000018; }
.card .pimg img { display:block; width:100%; height:100%; object-fit:contain; border-radius:0; }
.card p.blurb { font-size:17px; line-height:1.8; color:var(--ink); margin-bottom:17px; }
.card strong { font-weight:700; }
.card ul.ticks { list-style:none; padding:0; margin:18px 0 22px; background:none; }
.card ul.ticks li { font-size:16px; color:var(--ink); padding-left:26px; position:relative; margin:5px 0; line-height:1.65; }
.card ul.ticks li::before { content:"\2713"; position:absolute; top:4px; left:0; width:18px; height:18px; display:grid; place-items:center; border-radius:4px; background:#50b989; color:#fff; font-size:13px; line-height:1; }
.cta { display:block; width:100%; text-align:center; background:var(--accent); color:#fff; padding:17px 20px; font-size:18px; line-height:1.5; font-weight:750; border-radius:8px; text-decoration:none; transition:background .15s; }
.cta:hover { background:#3048d5; }
.cta.disabled { background:#858b95; cursor:default; }
.note { color:var(--muted); text-align:center; }
a:focus-visible { outline:3px solid #8192ff; outline-offset:4px; }
footer { border-top:1px solid var(--line); color:var(--muted); padding:24px 0 40px; margin-top:0; font-size:12px; line-height:1.8; }
@media (max-width:600px) {
  html { scroll-padding-top:84px; }
  .masthead { min-height:68px; padding:10px 20px; }
  .brand { font-size:21px; gap:12px; }
  .brand-mark { width:46px; height:46px; font-size:29px; }
  .wrap { padding:0 20px; }
  h1 { font-size:32px; letter-spacing:-1px; margin-top:28px; }
  .gift-tip { font-size:16px; margin-top:12px; }
  .meta { font-size:9px; letter-spacing:.9px; }
  .intro,.card p.blurb { font-size:16px; }
  .card { padding:28px 0 32px; }
  .card h2 { font-size:22px; line-height:1.4; }
  .rank { height:32px; min-width:32px; font-size:16px; margin-right:6px; }
  .cta { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .cta { transition:none; } }