:root{
  --bg:#FAF7F1; --bg-alt:#F5F2EA; --ink:#111111; --muted:#5C554C;
  --accent:#FF6B2C; --accent-ink:#C94A12; --peach:#FFE9DC; --pale:#FFB48F;
  --beige:#D8C8B2; --line:#E4DBCD;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --text:"Newsreader", Georgia, "Times New Roman", serif;
  --container:1240px; --pad:56px; --sec:108px;
  --h1:70px; --h2:46px; --h3:26px; --body:18px;
  --header-h:84px;
}
@media (max-width:1100px){:root{--pad:36px;--sec:80px;--h1:45px;--h2:34px;--h3:23px;--body:17px;--header-h:72px}}
@media (max-width:640px){:root{--pad:22px;--sec:60px;--h1:36px;--h2:30px;--h3:21px;--body:16px;--header-h:64px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--h1);font-weight:800;text-transform:uppercase}
h2{font-size:var(--h2);font-weight:800}
h3{font-size:var(--h3);font-weight:700;line-height:1.2}
p{margin:0}
.o{color:var(--accent)}
.caps{text-transform:uppercase}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:var(--sec);scroll-margin-top:var(--header-h)}
section.alt{background:var(--bg-alt)}
.sec-intro{font-size:calc(var(--body) + 2px);color:var(--muted);margin-top:18px}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .container{height:var(--header-h);display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{width:46px;height:46px}
.brand span{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.05;white-space:nowrap}
.divider-v{width:1px;align-self:stretch;margin-block:22px;background:var(--line)}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{text-decoration:none;font-size:15px;white-space:nowrap;padding-block:6px;border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--accent-ink);border-bottom-color:var(--accent)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--ink);position:relative;content:""}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
@media (max-width:1100px){
  .site-header .divider-v{display:none}
  .burger{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);flex-direction:column;gap:0;padding:8px var(--pad) 20px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding-block:14px;border-bottom:1px solid var(--line);font-size:17px}
}
@media (max-width:420px){.brand span{font-size:18px}.brand img{width:38px;height:38px}}

/* ---------- hero ---------- */
.hero{padding-block:72px 96px}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:center}
.hero-text{grid-column:1 / span 6}
.hero-img{grid-column:7 / span 6}
.eyebrow{font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:26px}
.hero-sub{font-size:calc(var(--body) + 3px);line-height:1.55;margin-top:30px;max-width:580px}
.stats{display:grid;grid-template-columns:auto auto 1fr;margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.stat{padding-inline:32px;border-left:1px solid var(--line)}
.stat:first-child{padding-left:0;border-left:0}
.stat b{display:flex;align-items:flex-end;height:52px;font-family:var(--display);font-weight:800;font-size:48px;line-height:1;color:var(--accent)}
.stat b.word{font-size:28px;white-space:nowrap;padding-bottom:3px}
.stat span{display:block;font-size:15px;margin-top:8px;color:var(--ink)}
@media (max-width:1100px){
  .hero-text,.hero-img{grid-column:1 / -1}
  .hero-img{max-width:640px;margin-inline:auto}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr 1fr;row-gap:24px}
  .stat{padding-inline:20px}
  .stat:nth-child(3){grid-column:1 / -1;padding-left:0;border-left:0}
  .stat b{font-size:40px;height:44px}
  .stat b.word{font-size:24px}
}

/* ---------- about ---------- */
.about p{font-size:calc(var(--body) + 3px);line-height:1.65;margin-top:28px}
.about .rule{height:1px;background:var(--line);margin-top:48px}

/* ---------- rating scale ---------- */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.criteria{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto auto auto;column-gap:40px;margin-top:48px}
.crit{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
.crit+.crit::before{content:"";position:absolute;left:-20px;top:0;bottom:0;width:1px;background:var(--line)}
.crit .n{font-family:var(--display);font-weight:700;font-size:54px;line-height:1;color:var(--pale)}
.crit h3{text-transform:uppercase;font-size:15px;line-height:1.3;letter-spacing:0;margin-top:22px;align-self:start;hyphens:none;overflow-wrap:normal}
.crit .w{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--accent);margin-top:12px}
.crit p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:16px}
@media (max-width:1100px){
  .criteria{grid-template-columns:repeat(6,220px)}
}
.scale{margin-top:56px;background:#F3EDE4;border-radius:20px;padding:26px 28px 30px}
.grades{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.grade{border-radius:10px;padding:14px 14px;display:flex;align-items:center;gap:12px}
.grade b{font-family:var(--display);font-weight:800;font-size:38px;line-height:1;min-width:46px}
.grade span{font-size:13px;line-height:1.35}
.grade span strong{display:block;font-size:15px;font-weight:700}
.g1{background:var(--accent);color:#fff}
.g2{background:#FF8C5A;color:#fff}
.g3{background:#FFB48F}
.g4{background:#FFD3BC}
.g5{background:var(--peach)}
.g6{background:#EDE3D6}
.g7{background:#E4DDD3}
.track{position:relative;height:18px;margin-top:22px}
.track::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:linear-gradient(90deg,var(--accent),var(--pale) 45%,var(--beige))}
.track i{position:absolute;top:0;width:18px;height:18px;border-radius:50%;background:#F3EDE4;border:3px solid var(--accent);transform:translateX(-50%)}
@media (max-width:1100px){.scale-inner{width:1040px}}

/* ---------- tables ---------- */
.table-wrap{margin-top:40px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--ink)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
th{font-weight:700;text-align:left;font-size:14px;padding:18px 14px;border-bottom:2px solid var(--ink);vertical-align:middle;white-space:nowrap}
td{padding:18px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:var(--bg-alt)}
tr.top td{background:var(--peach)}
tr.top:hover td{background:#FFDFCC}
th.sortable{cursor:pointer;user-select:none}
th.sortable button{all:unset;cursor:pointer;display:inline}
th.sortable button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sort-ic{display:inline-block;margin-left:6px;font-size:11px;color:var(--beige)}
th[aria-sort] .sort-ic{color:var(--accent)}
.stick{position:sticky;left:0;z-index:1;background:var(--bg)}
section.alt .stick{background:var(--bg-alt)}
tr.top .stick{background:var(--peach)}
tbody tr:hover .stick{background:var(--bg-alt)}
tr.top:hover .stick{background:#FFDFCC}

#ranking table{min-width:1080px}
#ranking td.rank{font-family:var(--display);font-weight:700;font-size:34px;width:64px;text-align:center}
#ranking td.name{font-family:var(--display);font-weight:700;font-size:21px;white-space:nowrap}
#ranking td.rating{font-family:var(--display);font-weight:700;font-size:19px;white-space:nowrap}
#ranking td.desc,#ranking td.feat{font-size:14.5px;line-height:1.55;color:var(--muted)}
#ranking td.desc{width:27%}#ranking td.feat{width:29%}
#ranking td.site a{color:var(--accent-ink);text-decoration:none;font-size:15px;white-space:nowrap}
#ranking td.site a:hover{text-decoration:underline}
#ranking tr.top td.rank,#ranking tr.top td.rating{color:var(--accent)}

#comparison table{min-width:1120px}
#comparison th{text-align:center;font-family:var(--display);font-size:15px;line-height:1.2;white-space:normal}
#comparison th{vertical-align:bottom}
#comparison th button{display:block;width:100%}
#comparison th .lbl{display:block}
#comparison th .wt{display:block;color:var(--accent);margin-top:6px;white-space:nowrap;min-height:1.2em}
#comparison th .wt .sort-ic{margin-left:4px}
#comparison th.l,#comparison td.l{text-align:left}
#comparison td{text-align:center;font-size:17px}
#comparison td.rank{width:56px;font-family:var(--display);font-weight:700;font-size:20px}
#comparison td.name{font-family:var(--display);font-weight:700;font-size:19px;white-space:nowrap}
#comparison th.total{background:var(--peach)}
#comparison td.total{background:var(--peach);font-family:var(--display);font-weight:800;font-size:24px}
#comparison tbody tr:hover td:not(.total){background:var(--bg-alt)}
#comparison tr.top td{background:var(--peach)}
#comparison td.grade-c{font-family:var(--display);font-weight:800;font-size:24px}
#comparison td.grade-c.hi{color:var(--accent)}
#comparison tr.top td.total{color:var(--accent)}

/* ---------- tone ---------- */
.center{text-align:center}

.tone h2{font-weight:700}
.tone-list{margin-top:52px;display:grid}
.tone-item{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:center;padding-block:22px;border-top:1px solid var(--line)}
.tone-item:last-child{border-bottom:1px solid var(--line)}
.tone-item img{grid-column:1 / span 5;width:100%;aspect-ratio:3/1;object-fit:cover}
.tone-item .t{grid-column:6 / span 7;display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:baseline}
.tone-item .n{font-family:var(--display);font-weight:700;font-size:28px;color:var(--accent);grid-row:1}
.tone-item h3{grid-column:2}
.tone-item p{grid-column:2;margin-top:10px;color:var(--muted)}
.callout{margin-top:44px;background:var(--peach);border-radius:20px;padding:26px 30px;text-align:center;font-family:var(--display);font-size:24px;line-height:1.35}
.callout strong{color:var(--accent-ink);font-weight:800}
@media (max-width:760px){
  .tone-item{grid-template-columns:1fr;gap:18px}
  .tone-item img,.tone-item .t{grid-column:1 / -1}
  .callout{font-size:20px;padding:22px}
}

/* ---------- safety ---------- */
.safe-list{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 56px}
.safe-list li{display:flex;align-items:center;gap:16px;font-size:calc(var(--body) + 1px);line-height:1.45}
.check{flex:0 0 32px;height:32px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.check svg{width:16px;height:16px}
@media (max-width:760px){.safe-list{grid-template-columns:1fr;gap:20px}.check{flex-basis:28px;height:28px}.check svg{width:14px;height:14px}}

/* ---------- trust ---------- */
.trust-body{margin-top:40px;display:grid;gap:30px}
.trust-body p{font-size:calc(var(--body) + 2px);line-height:1.7}
.trust-body strong{color:var(--accent-ink);font-weight:700}

/* ---------- faq ---------- */
.faq-title{font-size:calc(var(--h2) * 2.3);font-weight:900;line-height:.95}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;align-items:start}
.faq-col{display:grid;gap:16px}
details{background:#FDF0E6;border-radius:18px}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px 20px 26px;font-size:calc(var(--body) + 1px);line-height:1.4}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:18px}
.plus{flex:0 0 46px;height:46px;border-radius:50%;background:#FFD9C4;color:var(--accent);display:grid;place-items:center;font-size:26px;line-height:1;font-family:var(--text)}
details[open] .plus{background:var(--accent);color:#fff}
.faq-a{padding:0 26px 24px;color:var(--muted);font-size:calc(var(--body) - 1px)}
@media (max-width:760px){.faq-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-top:56px}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:center;padding-bottom:48px}
.foot-brand{grid-column:1 / span 4}
.foot-logo{display:flex;align-items:center;gap:16px;text-decoration:none}
.foot-logo img{width:72px;height:72px}
.foot-logo span{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.02}
.foot-brand p{margin-top:20px;font-size:15px;line-height:1.65;color:var(--ink)}
.foot-nav{grid-column:5 / span 3;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;padding-left:32px;border-left:1px solid var(--line);align-self:stretch;align-content:center}
.foot-nav a{text-decoration:none;font-size:15px}
.foot-nav a:hover{color:var(--accent-ink)}
.foot-photo{grid-column:8 / span 5;position:relative}
.foot-photo::after{content:"";position:absolute;left:50%;bottom:0;width:44px;height:12px;background:var(--accent)}
.foot-bottom{border-top:1px solid var(--line);padding-block:24px;font-size:14px;color:var(--muted)}
@media (max-width:1100px){
  .foot-brand,.foot-nav,.foot-photo{grid-column:1 / -1}
  .foot-nav{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
}