/* CoverSift tokens
   ink:#16323F  sky:#EAF3F8  deep:#1B3A4B  coral:#EF6C57  slate:#5C7183  line:#D3E2E9
   display:'Sora'  body:'Merriweather'
*/
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Merriweather:wght@300;400;700&display=swap');

:root{
  --ink:#16323F; --sky:#EAF3F8; --deep:#1B3A4B; --coral:#EF6C57; --slate:#5C7183; --line:#D3E2E9; --good:#2C9C7A;
}
*{box-sizing:border-box;}
body{ margin:0; background:#fff; color:var(--ink); font-family:'Merriweather',serif; line-height:1.65;}
h1,h2,h3,.display{ font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-0.01em;}
a{ color:var(--deep);}
a:focus-visible,button:focus-visible,input:focus-visible{ outline:3px solid var(--coral); outline-offset:2px;}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px;}
header.site{ border-bottom:1px solid var(--line);}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px;}
.brand{ font-family:'Sora'; font-weight:800; font-size:1.3rem; color:var(--ink); text-decoration:none; display:flex; gap:8px; align-items:center;}
.brand .mark{ width:26px;height:26px;border-radius:50%;background:var(--coral); display:inline-block;}
nav.main a{ color:var(--ink); text-decoration:none; margin-left:22px; font-family:'Sora'; font-size:0.92rem; font-weight:600;}
nav.main a:hover{ color:var(--coral);}

.hero{ background:var(--sky); padding:60px 0 50px;}
.hero .eyebrow{ color:var(--good); font-family:'Sora'; font-weight:700; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em;}
.hero h1{ font-size:2.5rem; max-width:18ch; margin:12px 0 14px;}
.hero p.lead{ max-width:56ch; color:var(--slate); font-size:1.08rem; font-family:'Merriweather';}

/* comparison table - signature element */
.compare-wrap{ overflow-x:auto; margin-top:36px; border-radius:12px; box-shadow:0 10px 30px rgba(22,50,63,0.10);}
table.compare{ width:100%; border-collapse:collapse; background:#fff; min-width:640px;}
table.compare th, table.compare td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); font-family:'Sora'; font-size:0.92rem;}
table.compare thead th{ background:var(--deep); color:#fff; font-size:0.85rem;}
table.compare tbody tr:nth-child(even){ background:#F7FAFC;}
table.compare td.best{ position:relative;}
.ribbon{ position:absolute; top:-11px; right:10px; background:var(--coral); color:#fff; font-size:0.68rem; font-weight:700; padding:3px 8px; border-radius:4px;}
td.price{ font-family:'Sora'; font-weight:700; font-size:1.05rem;}

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:44px 0;}
.card{ border:1px solid var(--line); border-radius:10px; padding:20px; background:#fff;}
.card .tag{ font-family:'Sora'; font-size:0.72rem; color:var(--good); text-transform:uppercase; letter-spacing:0.06em; font-weight:700;}
.card h3{ margin:8px 0 6px; font-size:1.05rem;}
.card p{ color:var(--slate); font-size:0.92rem; margin:0;}
.card a.readmore{ display:inline-block; margin-top:10px; font-size:0.88rem; font-weight:700; font-family:'Sora';}

.ad-slot{ border:1px dashed #B9C8D1; border-radius:8px; padding:22px; text-align:center; color:#7C8D9A; font-size:0.82rem; margin:36px 0; background:#F5F9FB;}
.ad-slot span{ display:block; font-family:'Sora'; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; font-weight:700;}

section.section{padding:36px 0;}
section.section h2{font-size:1.6rem;margin-bottom:6px;}
section.section p.section-sub{color:var(--slate);margin-top:0;font-family:'Merriweather';}

article.post{ max-width:70ch; margin:0 auto; padding:48px 24px;}
article.post .eyebrow{ font-family:'Sora'; color:var(--good); font-size:0.8rem; text-transform:uppercase; font-weight:700;}
article.post h1{ font-size:2.1rem; margin:8px 0 20px;}
article.post h2{ font-size:1.3rem; margin-top:34px; font-family:'Sora';}
article.post p{ font-size:1.05rem; color:#2B3E48;}
.disclaimer{ background:var(--sky); border-left:3px solid var(--coral); padding:14px 18px; font-size:0.9rem; color:var(--slate); border-radius:0 6px 6px 0; margin:24px 0;}

footer.site{ border-top:1px solid var(--line); margin-top:60px; padding:36px 0; color:var(--slate); font-size:0.88rem;}
footer.site .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}
footer.site a{ color:var(--slate); margin-right:16px; text-decoration:none; font-family:'Sora';}
footer.site a:hover{color:var(--coral);}

@media (max-width:820px){ .grid{grid-template-columns:1fr;} .hero h1{font-size:2rem;} }