/* RateStork — comparison-portal stylesheet */
:root{
  --blue:#1D4ED8; --blue-dark:#173FAE; --teal:#0D9488; --teal-soft:#E6F6F4;
  --ink:#15213B; --muted:#5A6B85; --line:#DCE4F0; --bg:#F6F8FC; --card:#FFFFFF;
  --amber:#D97706; --red:#DC2626; --green:#059669;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65; font-size:16.5px;
}
h1,h2,h3,h4{font-family:'Heebo',sans-serif; line-height:1.22; color:var(--ink)}
h1{font-size:clamp(1.7rem,4vw,2.5rem); font-weight:800; letter-spacing:-.02em}
h2{font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:700; margin:2.2rem 0 .8rem}
h3{font-size:1.15rem; font-weight:700; margin:1.6rem 0 .5rem}
p{margin:.7rem 0}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%; height:auto}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.narrow{max-width:820px}

/* header */
.site-head{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; max-width:1080px; margin:0 auto}
.wordmark{font-family:'Heebo',sans-serif; font-weight:800; font-size:1.45rem; color:var(--ink); letter-spacing:-.02em}
.wordmark .stork{color:var(--teal)}
.wordmark:hover{text-decoration:none}
.tagline{display:block; font-family:'Inter',sans-serif; font-size:.68rem; font-weight:500; color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
.nav{display:flex; gap:4px; flex-wrap:wrap}
.nav a{font-size:.86rem; font-weight:600; color:var(--muted); padding:7px 11px; border-radius:8px}
.nav a:hover{color:var(--blue); background:#EEF3FE; text-decoration:none}

/* crumbs + meta */
.crumb{font-size:.78rem; color:var(--muted); margin:18px 0 6px}
.crumb a{color:var(--muted)}
.byline{display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--muted); margin:10px 0 4px; flex-wrap:wrap}
.byline .avatar{width:34px;height:34px;border-radius:50%; background:var(--blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:'Heebo'; font-weight:700; font-size:.8rem}
.byline .avatar.tl{background:var(--teal)}
.byline b{color:var(--ink)}
.chip{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px; border-radius:99px; background:#EEF3FE; color:var(--blue); margin-right:6px}
.chip.tl{background:var(--teal-soft); color:var(--teal)}

/* answer-first box */
.direct-answer{
  background:var(--card); border:1px solid var(--line); border-left:5px solid var(--teal);
  border-radius:10px; padding:16px 20px; margin:20px 0; font-size:1.02rem;
}
.direct-answer b{color:var(--blue)}

/* hero */
.hero{background:linear-gradient(135deg,#10245E 0%,#1D4ED8 55%,#0D9488 130%); color:#fff; padding:56px 0 48px; margin-bottom:34px}
.hero h1{color:#fff}
.hero p{color:#D7E3FF; max-width:640px}
.hero .btn{display:inline-block; margin-top:18px; background:#fff; color:var(--blue); font-weight:700; padding:11px 22px; border-radius:10px}
.hero .btn:hover{background:var(--teal-soft); text-decoration:none}

/* cards / grids */
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin:22px 0}
.panel{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px}
.panel h3{margin-top:0}
.panel .more{font-size:.85rem; font-weight:600}

/* ranked listicle items */
.rankitem{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; margin:22px 0; position:relative}
.rankitem.winner{border:2px solid var(--blue); box-shadow:0 8px 24px rgba(29,78,216,.10)}
.rank-badge{position:absolute; top:-14px; left:18px; background:var(--blue); color:#fff; font-family:'Heebo'; font-weight:700; font-size:.78rem; padding:4px 14px; border-radius:99px; letter-spacing:.04em}
.rank-badge.tl{background:var(--teal)}
.rank-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.rank-head h3{margin:0; font-size:1.3rem}
.scorenum{font-family:'Heebo'; font-weight:800; font-size:1.5rem; color:var(--blue)}
.scorenum small{font-size:.8rem; color:var(--muted); font-weight:500}

/* score bars */
.scoretrack{background:#E6ECF6; border-radius:99px; height:10px; overflow:hidden; margin:6px 0 2px}
.scorefill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue),var(--teal))}
.score-row{display:grid; grid-template-columns:170px 1fr 52px; align-items:center; gap:12px; margin:9px 0; font-size:.9rem}
.score-row .lbl{color:var(--muted); font-weight:600}
.score-row .val{font-family:'Heebo'; font-weight:700; text-align:right}

/* pros / cons */
.pc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:16px 0}
.pros,.cons{border-radius:12px; padding:16px 18px; font-size:.93rem}
.pros{background:#EDFAF6; border:1px solid #B8E8DE}
.cons{background:#FDF1F1; border:1px solid #F3C8C8}
.pros h4{color:var(--green); margin-bottom:8px}
.cons h4{color:var(--red); margin-bottom:8px}
.pros ul,.cons ul{list-style:none}
.pros li,.cons li{padding:4px 0 4px 24px; position:relative}
.pros li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700}
.cons li::before{content:"✕"; position:absolute; left:0; color:var(--red); font-weight:700}

/* score table (listicle) */
.scoretable{width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; margin:18px 0; font-size:.92rem; box-shadow:0 0 0 1px var(--line)}
.scoretable th{background:var(--blue); color:#fff; font-family:'Heebo'; text-align:left; padding:11px 14px; font-size:.85rem}
.scoretable td{padding:11px 14px; border-top:1px solid var(--line); vertical-align:middle}
.scoretable tr:nth-child(even) td{background:#FAFCFF}
.scoretable .mini-track{width:110px}
.scoretable .num{font-family:'Heebo'; font-weight:700; color:var(--blue)}
.scoretable .crown{background:var(--teal-soft) !important}

/* versus table */
.duel{width:100%; border-collapse:collapse; margin:20px 0; background:var(--card); border-radius:12px; overflow:hidden; box-shadow:0 0 0 1px var(--line); font-size:.93rem}
.duel th{padding:13px 16px; font-family:'Heebo'; font-size:1rem; text-align:left}
.duel th.a{background:var(--blue); color:#fff; width:33%}
.duel th.b{background:var(--teal); color:#fff; width:33%}
.duel th.cat{background:#10245E; color:#fff; width:34%}
.duel td{padding:12px 16px; border-top:1px solid var(--line); vertical-align:top}
.duel td.cat{font-weight:600; color:var(--muted); background:#F2F6FD}
.duel td.win{background:#EDFAF6; font-weight:600}
.duel td.win::after{content:" ●"; color:var(--teal)}

/* verdict box */
.verdict{background:linear-gradient(135deg,#10245E,#1D4ED8); color:#fff; border-radius:14px; padding:24px 26px; margin:28px 0}
.verdict h2,.verdict h3{color:#fff; margin-top:0}
.verdict p{color:#D7E3FF}
.verdict .big{font-family:'Heebo'; font-size:2rem; font-weight:800; color:#7FE7DB}

/* faq */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:10px; margin:10px 0; padding:0}
.faq summary{cursor:pointer; font-family:'Heebo'; font-weight:700; padding:14px 18px; list-style:none}
.faq summary::before{content:"+"; color:var(--teal); font-weight:800; margin-right:10px}
.faq details[open] summary::before{content:"–"}
.faq details p{padding:0 18px 14px}

/* glossary */
.term{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:10px; padding:16px 20px; margin:14px 0}
.term h3{margin:0 0 4px; color:var(--blue)}

/* lists of articles */
.artlist{list-style:none}
.artlist li{display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:12px 0}
.artlist .date{font-size:.75rem; color:var(--muted); min-width:86px; font-weight:600; padding-top:3px}
.artlist h3{margin:0 0 2px; font-size:1.05rem}
.artlist p{margin:2px 0 0; font-size:.88rem; color:var(--muted)}

/* figures */
.figure{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin:22px 0}
.figure figcaption{font-size:.8rem; color:var(--muted); margin-top:8px; text-align:center}

/* buttons in reviews */
.cta-row{margin:14px 0}
.btn-outline{display:inline-block; border:2px solid var(--blue); color:var(--blue); font-weight:700; padding:9px 20px; border-radius:10px; font-size:.92rem}
.btn-outline:hover{background:var(--blue); color:#fff; text-decoration:none}
.btn-teal{display:inline-block; border:2px solid var(--teal); color:var(--teal); font-weight:700; padding:9px 20px; border-radius:10px; font-size:.92rem}
.btn-teal:hover{background:var(--teal); color:#fff; text-decoration:none}

/* footer */
.site-foot{background:#0E1B3D; color:#9FB0D4; margin-top:60px; padding:40px 0 26px; font-size:.86rem}
.site-foot a{color:#C9D6F5}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin-bottom:24px}
.site-foot h4{color:#fff; font-size:.9rem; margin-bottom:10px}
.site-foot ul{list-style:none}
.site-foot li{margin:5px 0}
.foot-note{border-top:1px solid #22325C; padding-top:16px; font-size:.78rem; color:#7285AD}

@media(max-width:640px){
  .score-row{grid-template-columns:120px 1fr 44px; font-size:.82rem}
  .head-in{flex-direction:column; align-items:flex-start; gap:8px}
  .duel th,.duel td{padding:9px 10px; font-size:.82rem}
  .scoretable .mini-track{width:70px}
}