/* Articles at /blog/<slug> (worker/site.ts SITE_PAGES): the guide styles of the
   engagement rate calculator's guide, without its calculator. */
.guide{padding-top:48px}
.guide-head{max-width:760px;margin-inline:auto;text-align:center}
.guide-head h2{margin-top:23px;font-size:45px;line-height:1.2;letter-spacing:-.045em}
.guide-lede{margin-top:20px;font-size:18px;font-weight:500;line-height:1.7;color:#454545}
.guide-byline{display:inline-flex;align-items:center;gap:12px;margin-top:26px;text-align:left;font-size:14px;line-height:1.45;color:#3d3d3d}
.guide-byline small{font-size:12px;color:#6b6b6b}
.author-photo{display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#dfeee0,#c0efad);font-size:20px;font-weight:600;letter-spacing:-.02em;color:#2f4a26;object-fit:cover}
.author-photo-small{width:40px;height:40px;font-size:13px}
.guide-layout{display:grid;grid-template-columns:220px minmax(0,720px);justify-content:center;gap:64px;margin-top:64px}
.guide-toc{position:sticky;top:100px;align-self:start}
.guide-toc ol{list-style:none;display:grid;gap:2px;margin:14px 0 0;padding:0;counter-reset:toc}
.guide-toc li{counter-increment:toc}
.guide-toc a{display:flex;gap:10px;padding:7px 10px;border-radius:10px;font-size:14px;line-height:1.45;color:#515151}
.guide-toc a::before{content:counter(toc);font-size:12px;font-weight:600;color:#9a9a9a;min-width:12px;padding-top:1px}
.guide-toc a:hover{background:#fff;color:var(--ink)}
.guide-body{background:#fff;border-radius:22px;box-shadow:0 2px 4px #00000005;padding:52px 56px}
.guide-body>section+section{margin-top:52px;padding-top:44px;border-top:1px solid #efefef}
.guide-body section{scroll-margin-top:96px}
.guide-body h2{font-size:30px;line-height:1.25;letter-spacing:-.035em}
.guide-body h3{font-size:18px;letter-spacing:-.02em}
.guide-body p,.guide-body li{font-size:17px;line-height:1.8;color:#2e2e2e}
.guide-body h2+p{margin-top:16px}
.guide-body p+p,.guide-body ul+p,.guide-body ol+p,.guide-body p+ul,.guide-body p+ol{margin-top:16px}
.guide-body ul,.guide-body ol{padding-left:22px}
.guide-body li+li{margin-top:8px}
.guide-body li::marker{color:#9a9a9a}
.guide-body a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.guide-body a.button{color:#fff;text-decoration:none}
.guide-body .eyebrow{font-size:12px;line-height:1.5;color:#6b6b6b}
.guide-body strong{font-weight:600;color:var(--ink)}
.guide-formula{margin-top:22px !important;padding:16px 20px;border-radius:14px;background:#f4f8f1;border-left:3px solid #8cc56f;font-weight:500}
.guide-formula span{font-weight:600}
.guide-table{margin-top:22px;overflow-x:auto;border:1px solid #ececec;border-radius:14px}
.guide-table+p,.guide-table+.guide-caption{margin-top:14px}
.guide-body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.guide-body th,.guide-body td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid #efefef}
.guide-body tbody tr:last-child td{border-bottom:0}
.guide-body th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#737373;background:#fafafa}
.guide-body .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.guide-body td:first-child{white-space:nowrap}
/* The spread under the benchmarks: a log scale from 0.05% to 10%, each
 * band's middle half as a bar and its median as a tick (positions are worked
 * out in the page's HTML from the same numbers as the table). */
.guide-caption{font-size:13px !important;line-height:1.65 !important;color:#6b6b6b !important}
.guide-note{margin-top:22px;padding:20px 22px;border-radius:14px;background:#f6f7f5}
.guide-note h3{font-size:16px}
.guide-note p{margin-top:6px;font-size:15px;line-height:1.75;color:#454545}
.guide-callout{margin-top:24px}
.guide-callout+p{margin-top:20px}
.guide-callout p{color:#454545 !important;font-size:15px !important;line-height:1.7 !important}
.guide-quote{margin:24px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--green)}
.guide-quote p{font-size:21px !important;font-weight:600;line-height:1.5 !important;letter-spacing:-.02em;color:var(--ink) !important}
.guide-quote footer{margin-top:10px;font-size:14px;line-height:1.65;color:#6b6b6b}
.author-card{display:flex;gap:20px;align-items:flex-start;margin-top:52px;padding:24px;border-radius:18px;background:#f6f7f5}
.author-card h3{margin-top:6px;font-size:19px}
.author-card p:not(.eyebrow){margin-top:6px;font-size:15px;line-height:1.7;color:#454545}
.article-hero{padding:132px 0 8px;text-align:center}
.article-hero h1{margin-top:20px;font-size:56px;line-height:1.12;letter-spacing:-.05em}
.article-hero .guide-lede{max-width:700px;margin-inline:auto}
.answer{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.answer div{padding:16px 18px;border-radius:14px;background:#f6f7f5}
.answer dt{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#737373}
.answer dd{margin:6px 0 0;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.answer dd small{display:block;margin-top:4px;font-size:13px;font-weight:400;letter-spacing:0;line-height:1.5;color:#5b5b5b}
.reel-figure{margin:24px 0 0;display:flex;gap:28px;align-items:center;padding:22px;border:1px solid #ececec;border-radius:14px}
.reel-figure svg{flex-shrink:0;width:150px;height:auto}
.reel-figure figcaption{font-size:14px;line-height:1.7;color:#515151}
.reel-figure figcaption b{font-weight:600;color:var(--ink)}
.key{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px}
@media(max-width:1100px){
 .guide-layout{grid-template-columns:minmax(0,760px);gap:28px}
 .guide-toc{position:static;background:#fff;border-radius:18px;padding:20px 22px;box-shadow:0 2px 4px #00000005}
 .guide-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
}
@media(max-width:900px){.article-hero{padding-top:112px}.article-hero h1{font-size:42px}}
@media(max-width:650px){
 .article-hero{padding-top:100px}
 .article-hero h1{font-size:34px}
 .guide-lede{font-size:16px}
 .guide-toc ol{grid-template-columns:1fr}
 .guide-body{padding:30px 20px;border-radius:18px}
 .guide-body h2{font-size:24px}
 .guide-body p,.guide-body li{font-size:16px;line-height:1.75}
 .guide-body>section+section{margin-top:40px;padding-top:34px}
 .guide-body th,.guide-body td{padding:10px}
 .guide-body td:first-child{white-space:normal}
 .guide-quote p{font-size:18px !important}
 .guide{padding-top:28px}
 .answer{grid-template-columns:1fr}
 .guide-body table.stack thead{display:none}
 .guide-body table.stack tr{display:block;padding:12px 14px;border-bottom:1px solid #efefef}
 .guide-body table.stack tr:last-child{border-bottom:0}
 .guide-body table.stack td{display:inline;padding:0;border:0;white-space:normal}
 .guide-body table.stack td+td::before{content:" · ";color:#9a9a9a}
 .guide-body table.stack td:last-child{display:block;margin-top:4px;color:#515151}
 .guide-body table.stack td:last-child::before{content:none}
 .reel-figure{flex-direction:column;align-items:flex-start;padding:16px}
 .reel-figure svg{width:130px}
 .author-card{flex-direction:column;gap:14px;padding:20px}
}
.reel-figure+p{margin-top:18px !important}