/* The engagement rate calculator's own pieces, on top of landing.css and the
 * free tools' tool.css: the @ in the form, the result (profile card, the
 * spread chart, posts against the usual) and the guide below it, set like a
 * blog post. */

/* The form: the @ sits in the pill, before the input. */
.er-form{padding-left:24px}
.er-at{font-size:17px;font-weight:600;color:#8a8a8a;margin-right:-6px}

/* The CAPTCHA, only when the worker has one (GET /api/public/turnstile);
 * Turnstile's interaction-only widget stays empty for most visitors. */
.er-turnstile{display:flex;justify-content:center;margin-top:14px}
.er-turnstile:empty{display:none}

/* The result. */
.tool-result{scroll-margin-top:96px}
.er-result{display:grid;gap:14px}
.er-result h2:focus{outline:none}

.er-profile{display:flex;align-items:center;gap:20px;padding:20px 22px}
.er-avatar{position:relative;flex-shrink:0;width:84px;height:84px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.er-avatar>*{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:3px solid #fff;object-fit:cover;background:#eceff3}
.er-avatar-letter{font-size:30px;font-weight:600;color:#3d3d3d;background:#f1f3ee}
.er-profile-text{flex:1;min-width:0}
.er-profile h2{display:flex;align-items:center;gap:6px;font-size:22px;letter-spacing:-.03em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.er-verified{display:inline-flex;color:#3897f0}
.er-verified .icon{width:20px;height:20px;fill:#3897f0;stroke:#fff;stroke-width:1.8}
.er-handle{margin-top:2px;font-size:15px;color:#6b6b6b}
.er-handle a:hover{color:#2465d6}
.er-facts{list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 0;padding:0;font-size:13px;color:#6b6b6b}
.er-facts strong{color:var(--ink);font-weight:600}
.er-profile-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.er-profile-actions .chip-button{justify-content:center}

.er-rate{padding:26px 28px 22px}
.er-rate-head{display:flex;justify-content:space-between;align-items:flex-start;gap:28px}
.er-big{margin-top:8px;font-size:56px;font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.er-chip{display:inline-block;margin-top:14px;padding:5px 12px;border-radius:99px;font-size:13px;font-weight:600}
.er-chip-low{background:#fbe0dc;color:#8c2f22}
.er-chip-below{background:#fcecc9;color:#7a5410}
.er-chip-average{background:#eceef1;color:#3d4450}
.er-chip-above{background:#dcf3cf;color:#2f5e1f}
.er-chip-high{background:var(--green);color:#1f4a12}
.er-rate-facts{display:grid;gap:12px;margin:0;max-width:300px;text-align:right}
.er-rate-facts dt{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#737373}
.er-rate-facts dd{margin:2px 0 0;font-size:14px;font-weight:600;line-height:1.45}
.er-chart-title{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:17px;letter-spacing:-.01em}
.er-chart-title strong{font-weight:600;background:var(--green);border-radius:5px;padding:0 .2em}
.er-chart{margin-top:14px;min-height:168px}
.er-chart-svg{display:block;overflow:visible}
.er-chart .zone-low{fill:#f8d9d4}
.er-chart .zone-below{fill:#fbe8c2}
.er-chart .zone-average{fill:#e7eaee}
.er-chart .zone-above{fill:#d7f0c9}
.er-chart .zone-high{fill:#b8e6a2}
.er-chart .curve{fill:none;stroke:#3f4a3a;stroke-width:1.6;stroke-opacity:.55}
.er-chart .baseline{stroke:#d9d9d9;stroke-width:1}
.er-chart .tick line{stroke:#cfcfcf}
.er-chart .tick text{font-size:11px;fill:#7a7a7a;font-variant-numeric:tabular-nums}
.er-chart .median{stroke:#7a7a7a;stroke-width:1.2;stroke-dasharray:3 3}
.er-chart .median-label{font-size:11px;font-weight:500;fill:#6b6b6b}
.er-chart .you{stroke:var(--ink);stroke-width:2}
.er-chart .you-dot{fill:var(--ink);stroke:#fff;stroke-width:2.5}
.er-chart .you-pill{fill:var(--ink)}
.er-chart .you-label{font-size:12px;font-weight:600;fill:#fff}
.er-legend{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0}
.er-legend li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 7px;padding:8px 10px;border-radius:10px;font-size:12px;line-height:1.45;color:#5c5c5c}
.er-legend li.is-here{background:#f4f5f2;box-shadow:inset 0 0 0 1px #e2e5dd}
.er-legend i{width:10px;height:10px;border-radius:3px}
.er-legend strong{font-weight:600;color:var(--ink)}
.er-legend span{grid-column:2;font-variant-numeric:tabular-nums}
.er-zone-low i{background:#f1b5ab}.er-zone-below i{background:#f2cf86}.er-zone-average i{background:#cdd2d9}.er-zone-above i{background:#acdd93}.er-zone-high i{background:#79c95a}
.er-chart-note{margin-top:14px;font-size:13px;line-height:1.65;color:#6b6b6b}

.er-stats{grid-template-columns:repeat(3,minmax(0,1fr))}

.er-insights ul{list-style:none;display:grid;gap:10px;margin:12px 0 0;padding:0}
.er-insights li{display:flex;gap:12px;font-size:15px;line-height:1.65;color:#2b2b2b}
.er-insights .icon{width:18px;height:18px;margin-top:3px;color:var(--blue)}

.er-posts-card{padding:24px 26px 18px}
.er-posts-head{padding-bottom:16px;border-bottom:1px solid var(--line)}
.er-posts-head h2{font-size:22px;letter-spacing:-.03em}
.er-posts-head p{margin-top:4px;font-size:13px;color:#6b6b6b}
.er-controls{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:16px}
.er-chips{display:flex;flex-wrap:wrap;gap:6px}
.er-chips .chip-button{min-height:32px;padding:6px 12px;font-size:12px}
.er-posts{list-style:none;margin:0;padding:0}
.post{display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:center;gap:8px 24px;padding:14px 0;border-bottom:1px solid #efefef}
.post:last-child{border-bottom:0}
.post-text{min-width:0}
.post-title{display:block;font-size:15px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.post-title:hover{color:#2465d6}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:4px;font-size:12px;color:#6b6b6b;font-variant-numeric:tabular-nums}
.post-type{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:600;background:#f0f1ee;color:#4a4a4a}
.post-type-reel{background:#eaf1fd;color:#2b5bb5}
.post-type-carousel{background:#f3ecfb;color:#6a3fa0}
.post-score{display:grid;grid-template-columns:1fr 48px;align-items:center;gap:12px}
.post-bar{position:relative;height:10px;border-radius:5px;background:#f0f0f0}
.post-fill{position:absolute;inset:0 auto 0 0;border-radius:5px;background:#d4d4d4}
.post.standout .post-fill{background:var(--blue)}
.post-usual{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:1px;background:var(--ink)}
.post-multiple{margin:0;text-align:right;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.post.standout .post-multiple{color:#2465d6}
.post-tag{margin:0;font-size:12px;color:#6b6b6b;text-align:right}
.post.skipped .post-text{opacity:.6}
.er-footnote{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:#6b6b6b}

.er-next{align-items:center}
.er-next h2{max-width:520px}
.er-next p:not(.eyebrow){max-width:540px}
.er-next-points{list-style:none;display:grid;gap:8px;margin:16px 0 0;padding:0}
.er-next-points li{display:flex;gap:10px;font-size:14px;font-weight:500;line-height:1.5;color:#26344a}
.er-next-points .icon{width:18px;height:18px;color:var(--blue);stroke-width:2.2}

/* The guide: a blog post on the landing's grid, with its contents beside it. */
.guide{padding-top:112px}
.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-spread{margin:18px 0 0;padding:18px 20px 14px;border:1px solid #ececec;border-radius:14px}
.spread-row,.spread-axis{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:12px;min-height:26px}
.spread-row>span{font-size:13px;font-weight:500;color:#3d3d3d;white-space:nowrap}
.spread-track{position:relative;height:26px}
.spread-row .spread-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#ececec}
.spread-axis b{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:500;color:#8a8a8a}
.spread-bar{position:absolute;top:50%;height:10px;margin-top:-5px;border-radius:5px;background:#bfe5aa}
.spread-median{position:absolute;top:50%;width:2px;height:18px;margin:-9px 0 0 -1px;border-radius:1px;background:#2f4a26}
.guide-spread figcaption{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:#6b6b6b}
.spread-key-bar{width:18px;height:8px;border-radius:4px;background:#bfe5aa}
.spread-key-median{width:2px;height:12px;margin-left:10px;background:#2f4a26}
.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}

@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){
 .guide{padding-top:88px}
 .guide-head h2{font-size:36px}
 .er-rate-head{flex-direction:column;gap:18px}
 .er-rate-facts{text-align:left;max-width:none;grid-template-columns:1fr 1fr}
 .er-legend{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:650px){
 .er-form{padding:8px}
 .er-at{display:none}
 .er-profile{flex-wrap:wrap;gap:14px;padding:18px}
 .er-avatar{width:64px;height:64px}
 .er-profile h2{font-size:19px}
 .er-profile-actions{flex-direction:row;width:100%}
 .er-profile-actions .chip-button{flex:1}
 .er-rate{padding:20px}
 .er-big{font-size:46px}
 .er-rate-facts{grid-template-columns:1fr}
 .er-chart-title{font-size:15px}
 .er-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
 .er-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .er-posts-card{padding:20px 18px 14px}
 .post{grid-template-columns:1fr;gap:8px}
 .post-tag{text-align:left}
 .guide{padding-top:72px}
 .guide-head h2{font-size:30px}
 .guide-head h2 br{display:none}
 .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}
 .spread-row,.spread-axis{grid-template-columns:70px 1fr;gap:8px}
 .guide-spread{padding:14px}
 .guide-quote p{font-size:18px !important}
 .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:block;padding:0;border:0;white-space:normal}
 .guide-body table.stack td:nth-child(2)::before{content:"÷ "}
 .guide-body table.stack td+td{margin-top:2px;color:#515151}
 .author-card{flex-direction:column;gap:14px;padding:20px}
}
.guide-note+p{margin-top:20px !important}