:root{--ink:#17262e;--muted:#637078;--navy:#183647;--green:#496d5a;--cream:#fbfaf6;--line:#dfe6e8;--white:#fff;--accent:#c78141}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--cream);line-height:1.66}
a{color:#245d75}img{max-width:100%;display:block}.topbar{background:var(--navy);color:#fff;text-align:center;padding:9px 16px;font-size:.9rem}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.nav{max-width:1180px;margin:auto;padding:16px 24px;display:flex;gap:24px;align-items:center}
.brand{font-weight:850;color:var(--navy);text-decoration:none}.navlinks{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}.navlinks a{text-decoration:none;color:var(--ink);font-weight:700;font-size:.94rem}
.container{max-width:1180px;margin:auto;padding:0 24px}.hero{padding:50px 0 34px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.kicker{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:850;color:var(--green)}h1{font-size:clamp(2.1rem,4.5vw,4.3rem);line-height:1.03;margin:.25em 0;color:var(--navy)}
h2{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.16;color:var(--navy);margin-top:1.6em}h3{color:var(--navy)}
.lead{font-size:1.12rem;color:var(--muted)}.hero img{border-radius:20px;box-shadow:0 18px 50px rgba(17,39,52,.14)}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;background:var(--navy);color:#fff;text-decoration:none;font-weight:800}.btn.alt{background:var(--green)}.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 50px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:21px;box-shadow:0 6px 20px rgba(30,50,60,.05)}
.pill{display:inline-block;padding:6px 10px;background:#edf4f6;border-radius:999px;font-size:.78rem;font-weight:800;color:var(--navy)}
.article-wrap{display:grid;grid-template-columns:minmax(0,760px) 290px;gap:42px;align-items:start;padding:36px 24px 70px}.article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px}
.article h1{font-size:clamp(2rem,4vw,3.4rem)}.meta{display:flex;gap:14px;flex-wrap:wrap;color:#748087;font-size:.88rem;margin:10px 0 18px}
.sidebar{position:sticky;top:92px}.toc a{display:block;padding:7px 0;text-decoration:none;border-bottom:1px solid #edf1f2}
.callout{background:#eef5f1;border-left:4px solid var(--green);padding:16px 18px;border-radius:10px;margin:22px 0}.warn{background:#fff5ea;border-left-color:var(--accent)}
.specs{width:100%;border-collapse:collapse;margin:20px 0}.specs th,.specs td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.specs th{width:34%;color:var(--navy)}
.shop-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}.shop-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fafcfc}
.source-note{font-size:.9rem;color:#65727a;background:#f7f9fa;padding:14px 16px;border-radius:10px}
footer{background:var(--navy);color:#e8eff2;margin-top:40px}.footer{padding:30px 24px;max-width:1180px;margin:auto}.footer a{color:#fff}.disclosure{font-size:.88rem;color:#c7d2d8}
@media(max-width:860px){.hero-grid,.article-wrap{grid-template-columns:1fr}.card-grid{grid-template-columns:1fr 1fr}.sidebar{position:static}}
@media(max-width:580px){.card-grid,.shop-row{grid-template-columns:1fr}.article{padding:22px}.navlinks{display:none}}


/* v3 mobile polish */
@media(max-width:580px){
  .topbar{
    font-size:.76rem;
    line-height:1.35;
    padding:8px 12px;
  }

  .nav{
    padding:12px 16px 10px;
    flex-wrap:wrap;
    gap:10px;
  }

  .brand{
    font-size:1rem;
  }

  .navlinks{
    display:flex;
    width:100%;
    margin-left:0;
    gap:7px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .navlinks::-webkit-scrollbar{display:none}

  .navlinks a{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:.78rem;
    padding:6px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
  }

  .container{
    padding-left:18px;
    padding-right:18px;
  }

  .hero{
    padding:30px 0 24px;
  }

  .hero-grid{
    gap:20px;
  }

  .kicker{
    font-size:.7rem;
    line-height:1.45;
    letter-spacing:.1em;
  }

  h1{
    font-size:2.35rem;
    line-height:1.03;
    letter-spacing:-.025em;
  }

  .hero h1{
    margin:.22em 0 .35em;
  }

  .lead{
    font-size:1rem;
    line-height:1.55;
  }

  .hero img{
    border-radius:15px;
  }

  .article-wrap{
    padding:22px 16px 48px;
    gap:20px;
  }

  .article{
    padding:20px;
    border-radius:14px;
  }

  .article h1{
    font-size:2.15rem;
    line-height:1.04;
  }

  .meta{
    gap:8px 12px;
    font-size:.8rem;
  }

  .sidebar .card{
    padding:16px;
  }
}

/* v4 hero quality */
.hero-grid > img{width:100%;height:auto;max-height:720px;object-fit:contain;object-position:center;background:#fff}
@media(max-width:860px){.hero-grid > img{max-height:none;width:100%;height:auto}}