:root{
    --ink:#14201f; --muted:#56635f; --line:#dfe6e3; --bg:#f7f9f8; --card:#ffffff;
    --brand:#0f3d3e; --brand-2:#14625f; --accent:#e8a33d; --accent-ink:#2a1a00;
    --ok:#1f7a4d; --warn:#9a3b17; --radius:14px;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --serif: Georgia, "Times New Roman", serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px}
  a{color:var(--brand-2)}
  img{max-width:100%}
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
  .narrow{max-width:780px}

  /* disclosure bar */
  .disclosure{background:#fff7e6;border-bottom:1px solid #f1dfb8;font-size:13.5px;color:#5a4416;padding:8px 0;text-align:center}

  /* header */
  header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
  .logo{font-weight:800;color:var(--brand);text-decoration:none;font-size:19px;letter-spacing:-.2px}
  .logo span{color:var(--accent)}
  nav.main{display:flex;gap:20px;font-size:15px}
  nav.main a{text-decoration:none;color:var(--muted)}
  nav.main a:hover{color:var(--brand)}
  @media (max-width:860px){nav.main{display:none}}

  .btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;
       padding:14px 24px;border-radius:999px;transition:transform .15s, box-shadow .15s;border:0;cursor:pointer}
  .btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(232,163,61,.35)}
  .btn.ghost{background:transparent;color:var(--brand);border:2px solid var(--brand)}
  .btn.sm{padding:9px 16px;font-size:14px}

  /* hero */
  .hero{background:linear-gradient(160deg,var(--brand) 0%,#0b2b2c 100%);color:#eaf3f1;padding:56px 0 64px}
  .hero .grid{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center}
  @media (max-width:860px){.hero .grid{grid-template-columns:1fr}}
  .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:#9fd3c9;font-weight:700}
  .hero h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,46px);line-height:1.15;margin:10px 0 16px;color:#fff}
  .hero p.lede{font-size:18.5px;color:#cfe2de;max-width:620px}
  .meta{font-size:14px;color:#9fbab4;margin-top:14px}
  .verdict-box{background:#fff;color:var(--ink);border-radius:var(--radius);padding:24px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
  .verdict-box h2{font-size:18px;margin:0 0 12px}
  .verdict-box ul{padding-left:0;list-style:none;margin:0 0 18px}
  .verdict-box li{padding:6px 0 6px 28px;position:relative;font-size:15.5px;border-bottom:1px dashed var(--line)}
  .verdict-box li:last-child{border-bottom:0}
  .verdict-box li::before{position:absolute;left:0;top:6px;font-weight:800}
  .verdict-box li.pro::before{content:"✓";color:var(--ok)}
  .verdict-box li.con::before{content:"!";color:var(--warn)}
  .verdict-box .price-line{font-size:14px;color:var(--muted);margin-top:10px;text-align:center}

  /* toc */
  .toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:-28px auto 0;position:relative;z-index:2}
  .toc strong{display:block;margin-bottom:8px}
  .toc ol{columns:2;margin:0;padding-left:20px;font-size:15.5px}
  @media (max-width:640px){.toc ol{columns:1}}

  section{padding:56px 0}
  section + section{border-top:1px solid var(--line)}
  h2{font-family:var(--serif);font-size:clamp(25px,3vw,32px);line-height:1.25;margin:0 0 14px;color:var(--brand)}
  h3{font-size:19px;margin:26px 0 8px}
  .quick{background:#eef6f4;border-left:4px solid var(--brand-2);padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0}

  table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:15.5px;margin:18px 0}
  th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
  th{background:#f0f4f3;font-weight:700}
  tr:last-child td{border-bottom:0}

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:22px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
  .card h3{margin-top:0;font-size:17.5px}
  .card p{margin:0;color:var(--muted);font-size:15.5px}

  ol.steps{counter-reset:s;list-style:none;padding:0}
  ol.steps li{counter-increment:s;position:relative;padding:4px 0 14px 48px}
  ol.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;
       background:var(--brand);color:#fff;font-weight:700;display:grid;place-items:center;font-size:15px}

  /* pricing */
  .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
  @media (max-width:860px){.prices{grid-template-columns:1fr}}
  .plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;position:relative}
  .plan.best{border:2px solid var(--accent);box-shadow:0 14px 30px rgba(15,61,62,.12)}
  .plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink);
       font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
  .plan h3{margin:4px 0 2px}
  .plan .per{font-size:40px;font-weight:800;color:var(--brand);line-height:1.1;margin:10px 0 0}
  .plan .per small{font-size:15px;font-weight:600;color:var(--muted)}
  .plan .total{color:var(--muted);font-size:15px;margin:4px 0 14px}
  .plan ul{list-style:none;padding:0;margin:0 0 20px;font-size:15px}
  .plan ul li{padding:4px 0}
  .fine{font-size:13.5px;color:var(--muted)}

  .two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media (max-width:760px){.two{grid-template-columns:1fr}}
  .box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  .box.good h3{color:var(--ok);margin-top:0}
  .box.bad h3{color:var(--warn);margin-top:0}
  .box ul{margin:0;padding-left:20px}

  .alert{background:#fff1ec;border:1px solid #f3c9b8;border-radius:var(--radius);padding:18px 20px;margin-top:20px}
  .alert strong{color:var(--warn)}

  details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 18px;margin:10px 0}
  summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";float:right;font-weight:800;color:var(--brand-2)}
  details[open] summary::after{content:"–"}
  details p{margin:0 0 16px;color:var(--muted)}

  .cta-band{background:var(--brand);color:#eaf3f1;text-align:center;padding:52px 0}
  .cta-band h2{color:#fff}
  .cta-band p{color:#cfe2de;max-width:640px;margin:0 auto 22px}

  footer{background:#0b2223;color:#9fb5b0;font-size:14px;padding:40px 0}
  footer a{color:#cfe2de}
  footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
  @media (max-width:760px){footer .cols{grid-template-columns:1fr}}
  footer h4{color:#fff;margin:0 0 10px;font-size:15px}
  footer ul{list-style:none;padding:0;margin:0}
  footer li{padding:3px 0}
  .legal{border-top:1px solid #1c3a3b;margin-top:28px;padding-top:18px;font-size:13px;line-height:1.6}

/* ---------- images ---------- */
.hero-img{width:100%;height:auto;border-radius:var(--radius);display:block}
figure{margin:24px 0}
figure img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff;display:block}
figcaption{font-size:13.5px;color:var(--muted);margin-top:8px;text-align:center}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:14px;color:var(--muted);padding:16px 0 0}
.crumbs a{color:var(--muted)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px}

/* ---------- article ---------- */
.article-head{padding:24px 0 8px}
.article-head h1{font-family:var(--serif);font-size:clamp(28px,4vw,42px);line-height:1.18;color:var(--brand);margin:8px 0 12px}
.article-head .meta{color:var(--muted)}
article.post{padding-bottom:40px}
article.post h2{margin-top:36px}
article.post ul,article.post ol{padding-left:22px}
article.post li{margin:4px 0}
.inline-cta{background:#fff;border:2px solid var(--accent);border-radius:var(--radius);padding:20px 22px;margin:30px 0;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.inline-cta p{margin:0;font-weight:600}
.related{background:#fff;border-top:1px solid var(--line);padding:40px 0}
.related h2{font-size:24px}

/* ---------- blog grid ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;margin-top:24px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,61,62,.1)}
.post-card img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.post-card .pc-body{padding:16px 18px 20px}
.post-card h3{font-size:17.5px;margin:0 0 6px;line-height:1.35;color:var(--brand)}
.post-card p{margin:0;font-size:14.5px;color:var(--muted)}
.post-card .cat{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-2);font-weight:700}

/* ---------- sticky buy bar ---------- */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .3s ease}
.sticky-buy.show{transform:translateY(0)}
.sticky-buy .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:10px;padding-bottom:10px}
.sticky-buy .sb-text{display:flex;align-items:center;gap:12px;min-width:0}
.sticky-buy img{width:44px;height:44px;flex:none}
.sticky-buy strong{display:block;font-size:15.5px;color:var(--brand)}
.sticky-buy span{font-size:13px;color:var(--muted)}
.sticky-buy .btn{white-space:nowrap}
body.has-sticky{padding-bottom:76px}
@media (max-width:640px){
  .sticky-buy img{display:none}
  .sticky-buy span{display:none}
  .sticky-buy strong{font-size:14px}
  .sticky-buy .btn{padding:12px 18px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.sticky-buy{transition:none}.btn,.post-card{transition:none}}

/* ---------- simple pages ---------- */
.page{padding:20px 0 56px}
.page h1{font-family:var(--serif);color:var(--brand);font-size:clamp(28px,4vw,40px);margin:12px 0 16px}
.official-note{background:#eef6f4;border:1px solid #cfe5df;border-radius:var(--radius);padding:16px 20px;margin:20px 0}

@media (max-width:640px){
  header.site .wrap{height:58px}
  .logo small{display:none}
  header.site .btn.sm{white-space:nowrap;padding:8px 14px;font-size:13.5px}
  .disclosure{font-size:12px}
}