/* ============================================================
   finditrate.com — Design System
   Modern · minimal · airy · neutral, with a magenta accent.
   Type: Archivo (display/headline) + Public Sans (body/UI)
   ============================================================ */

:root {
  --accent: #E63462;
  --accent-ink: #ffffff;
  --accent-soft: #fdeef2;

  --ink:      #15171c;   /* near-black text */
  --ink-2:    #3d424d;   /* secondary text */
  --ink-3:    #6b7280;   /* muted */
  --ink-4:    #9aa0ab;   /* faint */
  --line:     #e8e9ec;   /* hairline borders */
  --line-2:   #f1f2f4;
  --bg:       #ffffff;
  --bg-2:     #f7f8fa;   /* page wash */
  --bg-3:     #fbfbfc;
  --paper:    #ffffff;

  --radius:   14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(20,23,28,.04), 0 1px 3px rgba(20,23,28,.06);
  --shadow:    0 4px 16px rgba(20,23,28,.07), 0 1px 3px rgba(20,23,28,.05);
  --shadow-lg: 0 18px 50px rgba(20,23,28,.16);

  --maxw: 1160px;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin: 0; color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }

/* ---------- eyebrow / kicker ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.kicker::before { content: ""; width: 18px; height: 2px; background: var(--accent); border-radius: 2px; }

/* ---------- pill / category chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 5px 10px; border-radius: 999px; line-height: 1;
}
.chip.ghost { color: var(--ink-2); background: var(--bg-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  background: var(--ink); color: #fff; transition: transform .15s var(--ease), background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.accent { background: var(--accent); }
.btn.outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.outline:hover { border-color: var(--ink); }
.btn.ghost { background: var(--bg-2); color: var(--ink); }
.btn.sm { padding: 8px 14px; font-size: 13px; }
.btn.lg { padding: 14px 26px; font-size: 16px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- form fields ---------- */
.field {
  width: 100%; font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; transition: border-color .15s, box-shadow .15s;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.field { resize: vertical; min-height: 90px; line-height: 1.55; }
.label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; font-family: var(--font-display); letter-spacing: .01em; }
.field-row { margin-bottom: 16px; }

/* repeatable editor rows (pre-blog benefits/pros) */
.rep-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.rep-num { width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; margin-top: 7px; font-family: var(--font-display); }

/* small icon button */
.icon-btn.sm { width: 28px; height: 28px; border-radius: 7px; }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }

/* block builder */
.blk { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.blk-head { display: flex; align-items: center; gap: 6px; padding: 9px 10px 9px 14px; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.blk-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.blk-body { padding: 14px; }
.blk-add { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: transparent; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; cursor: pointer; font-family: var(--font-display); }
.blk-add:hover { background: var(--bg-2); color: var(--accent); }

/* pre-blog list rows */
.pre-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
.pre-row--head { background: var(--bg-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.pre-col { width: 110px; flex-shrink: 0; }
@media (max-width: 720px) { .pre-col { display: none; } }

/* logs table */
.logtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.logtable th { text-align: left; font-family: var(--font-display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.logtable td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.logtable tbody tr:hover { background: var(--bg-3); }
.rep-tab { background: none; border: 0; padding: 12px 6px; margin-bottom: -1px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; cursor: pointer; }

/* ---------- cards ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* ============================================================
   AD SLOTS — responsive, AdSense-optimized placeholders
   ============================================================ */
.ad {
  position: relative; width: 100%;
  background:
    repeating-linear-gradient(135deg, #fafbfc 0 12px, #f4f5f7 12px 24px);
  border: 1px dashed #d7dae0; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink-4); text-align: center; min-height: 90px; overflow: hidden;
}
.ad__tag { position: absolute; top: 8px; left: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.ad__size { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-3); letter-spacing: .02em; }
.ad__meta { font-size: 11px; color: var(--ink-4); margin-top: 3px; }
.ad--leaderboard { min-height: 90px; max-width: 728px; margin: 0 auto; }
.ad--rect { aspect-ratio: 300/250; max-width: 300px; }
.ad--large { aspect-ratio: 336/280; max-width: 336px; margin: 0 auto; }
.ad--infeed { min-height: 120px; }
.ad--article { min-height: 110px; margin: 28px 0; }
.ad--live { background: #fff; border-style: solid; border-color: var(--line); }

/* sticky anchor ad */
.anchor-ad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(20,23,28,.08);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px; animation: anchorUp .4s var(--ease);
}
@keyframes anchorUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.anchor-ad .ad { min-height: 60px; max-width: 728px; }
.anchor-ad__close {
  position: absolute; top: -13px; right: 14px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--ink); color: #fff; border: 2px solid #fff;
  display: grid; place-items: center; box-shadow: var(--shadow);
}

/* ---------- skip / utility ---------- */
.hide { display: none !important; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* fill-mode backwards (not both): a forwards-filled transform keeps an identity
   matrix on the wrapper forever, which hijacks position:fixed descendants
   (gate modals would center against the page instead of the viewport). */
.fade-in { animation: fadeIn .4s var(--ease) backwards; }
/* while a gate is open the page must not scroll behind the modal (competitor
   parity). JS pins the body with position:fixed; this backs it up on <html>. */
html.gate-lock { overflow: hidden !important; overscroll-behavior: none; }
/* while a gate is open, no auto/anchor/side-rail ads may sit over or around it */
body.gate-open ins.adsbygoogle,
body.gate-open .google-auto-placed,
body.gate-open ins[data-anchor-status],
body.gate-open iframe[id^="google_ads_iframe"],
body.gate-open [id^="google-anchor-ad"],
body.gate-open .adsbygoogle-noablate { display: none !important; visibility: hidden !important; }
/* advertorial landing blocks */
.emp-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 0 0 26px; }
@media (max-width: 640px) { .emp-grid { grid-template-columns: 1fr; } }
.emp-card { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--card, #fff); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.emp-card:hover { border-color: var(--accent); box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.06)); }
.emp-hd { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; color: var(--ink-3); }
.emp-hd h4 { font-family: var(--font-display); font-size: 19px; margin: 0; color: var(--ink); }
.emp-roles { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }
.emp-note { margin: 10px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.emp-cta { display: inline-flex; margin-top: 16px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 9px; }
.pre-banner { background: #15171c; color: #fff; border-radius: 18px; padding: 36px 28px; text-align: center; margin: 8px 0 26px; }
.pre-banner h2 { font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); margin: 0 0 8px; color: #fff; }
.pre-banner p { color: rgba(255,255,255,.75); max-width: 480px; margin: 0 auto 18px; }
.pre-banner-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pre-banner-btn { background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 10px; text-decoration: none; }
.pre-banner-btn.alt { background: #fff; color: #15171c; }
.pre-disclosure { font-size: 12px; color: var(--ink-3); margin: 6px 0 20px; }
.pre-disclosure summary { cursor: pointer; text-decoration: underline; }
.pre-disclosure p { margin-top: 8px; line-height: 1.6; }
/* rewarded-gate searching animation */
.gate-spinner { width: 54px; height: 54px; border-radius: 50%; border: 4px solid var(--accent-soft); border-top-color: var(--accent); animation: gatespin .8s linear infinite; margin: 4px auto 18px; }
@keyframes gatespin { to { transform: rotate(360deg); } }
.gate-dots::after { content: ""; animation: gatedots 1.2s steps(4) infinite; }
@keyframes gatedots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- prose (article body) ---------- */
.prose { font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.prose > p, .prose > h2, .prose > h3, .prose > blockquote, .prose > ul, .prose > ol, .prose > img { margin: 0 0 22px; }
.prose h2 { font-size: 27px; color: var(--ink); margin-top: 38px; }
.prose h3 { font-size: 21px; color: var(--ink); margin-top: 30px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-size: 22px; line-height: 1.4; font-weight: 600; color: var(--ink); font-style: normal;
}
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose img { border-radius: var(--radius); }
.admin-editor:empty::before { content: "Write your story…"; color: var(--ink-4); }
.admin-editor:focus { outline: none; }

/* ---------- rich article body elements ---------- */
.prose .lead { font-size: 20px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.prose .callout { display: block; background: var(--accent-soft); border-radius: 12px; padding: 16px 20px; color: var(--ink); font-size: 15.5px; line-height: 1.6; margin: 0 0 24px; }
.prose .callout-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-right: 10px; }
.prose figure.media { margin: 0 0 28px; }
.prose figure.media img { width: 100%; border-radius: var(--radius); aspect-ratio: 16/9; object-fit: cover; background: var(--line-2); }
.prose figure.media figcaption { text-align: center; font-size: 13px; color: var(--ink-4); margin-top: 10px; }

.prose ul.feature-list { list-style: none; padding: 0; margin: 0 0 24px; }
.prose ul.feature-list li { position: relative; padding: 13px 0 13px 40px; border-bottom: 1px solid var(--line-2); font-size: 15.5px; color: var(--ink-2); margin: 0; }
.prose ul.feature-list li:last-child { border-bottom: 0; }
.prose ul.feature-list li::before { content: "✓"; position: absolute; left: 0; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; text-align: center; line-height: 26px; }
.prose ul.feature-list strong { color: var(--ink); }

.prose .proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0 0 24px; }
.prose .pc-col h4 { font-size: 15px; margin: 0 0 10px; font-family: var(--font-display); }
.prose ul.check-list, .prose ul.x-list { list-style: none; padding: 0; margin: 0; }
.prose ul.check-list li, .prose ul.x-list li { position: relative; padding: 7px 0 7px 28px; font-size: 14.5px; color: var(--ink-2); margin: 0; }
.prose ul.check-list li::before { content: "✓"; position: absolute; left: 0; top: 7px; color: #0e9f6e; font-weight: 800; }
.prose ul.x-list li::before { content: "✕"; position: absolute; left: 0; top: 7px; color: var(--accent); font-weight: 800; }

.prose details.faq { border-bottom: 1px solid var(--line); margin: 0; }
.prose details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); }
.prose details.faq summary::-webkit-details-marker { display: none; }
.prose details.faq summary::after { content: "+"; color: var(--accent); font-size: 24px; font-weight: 400; line-height: 1; flex-shrink: 0; }
.prose details.faq[open] summary::after { content: "–"; }
.prose details.faq p { margin: -4px 0 16px; font-size: 14.5px; color: var(--ink-2); }

.prose .inline-cta-wrap { margin: 32px 0; }
.prose a.inline-cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  background: linear-gradient(180deg, #f15c83 0%, #E63462 55%, #cf1d4d 100%); color: #fff; text-decoration: none;
  padding: 22px 56px; border-radius: 14px; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(230,52,98,.30), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .15s var(--ease), box-shadow .2s;
}
.prose a.inline-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(230,52,98,.40), inset 0 1px 0 rgba(255,255,255,.28); }
.prose .inline-cta__icon { position: absolute; left: 22px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; font-size: 20px; }
@media (max-width: 560px) { .prose .proscons { grid-template-columns: 1fr; } }

/* ---------- 3-column reading layout ---------- */
.post3 { display: grid; grid-template-columns: 186px minmax(0,1fr) 186px; gap: 56px; align-items: start; }
.post3 .col-side { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; }
.post3 .col-side::-webkit-scrollbar { width: 6px; }
.post3 .col-side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.toc-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; }
.toc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc-list li { margin: 0; }
.toc-list a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--ink-3); cursor: pointer; transition: color .15s, border-color .15s; }
.toc-list a.lvl3 { padding-left: 26px; font-size: 13px; }
.toc-list a:hover { color: var(--ink); }
.toc-list a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* deliberately understated 'relevant reads' list — text only, low emphasis */
.rel-list { list-style: none; margin: 0; padding: 0; }
.rel-list li { padding: 11px 0; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.rel-list li:first-child { padding-top: 0; }
.rel-list li:last-child { border-bottom: 0; }
.rel-list .rel-title { display: block; font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--ink-3); transition: color .15s; }
.rel-list li:hover .rel-title { color: var(--ink-2); }
.rel-list .rel-meta { display: block; font-size: 10.5px; color: var(--ink-4); margin-top: 3px; letter-spacing: .01em; }

/* ---------- PRE-BLOG (paid-traffic funnel — bridge layout) ---------- */
.prelead { max-width: 600px; margin: 0 auto; }
.prelead-title { font-size: clamp(24px,3.4vw,33px); line-height: 1.18; margin: 0 0 22px; text-align: center; }
.prelead-intro { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 4px; }
.adlabel { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px; }

/* big gradient CTA */
.cta-xl {
  position: relative; width: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f15c83 0%, #E63462 55%, #cf1d4d 100%);
  color: #fff; border: 0; border-radius: 14px; padding: 27px 56px;
  font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(230,52,98,.30), inset 0 1px 0 rgba(255,255,255,.28);
  cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s; margin: 32px 0;
}
.cta-xl:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(230,52,98,.40), inset 0 1px 0 rgba(255,255,255,.28); }
.cta-xl:active { transform: translateY(0); }
.cta-xl__icon { position: absolute; left: 22px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; }

/* hero banner */
.prelead-banner { position: relative; border-radius: var(--radius); overflow: hidden; margin: 4px 0 30px; box-shadow: var(--shadow); }
.prelead-banner img { width: 100%; aspect-ratio: 16/8; object-fit: cover; display: block; background: var(--line-2); }
.prelead-banner__badge { position: absolute; top: 12px; right: 12px; background: var(--ink); padding: 6px 12px; border-radius: 8px; box-shadow: var(--shadow-sm); }

.prelead-h2 { font-size: 21px; margin: 6px 0 8px; }

/* benefit list */
.bz-list { margin-top: 8px; }
.bz-item { display: flex; gap: 16px; padding: 19px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.bz-item:last-child { border-bottom: 0; }
.bz-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.bz-item h4 { font-size: 16.5px; margin: 2px 0 5px; }
.bz-item p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* pros */
.pros-head { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pros-list { margin-top: 10px; }
.pros-item { display: flex; gap: 14px; padding: 16px 0 16px 6px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.pros-item:last-child { border-bottom: 0; }
.pros-check { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.pros-item h4 { font-size: 15.5px; margin: 0 0 4px; }
.pros-item p { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* editorial bio */
.prebio { text-align: center; margin-top: 44px; padding-top: 8px; }
.prebio-logo { width: 92px; height: 92px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; margin: 0 auto 16px; overflow: hidden; }
.prebio-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.prebio-text { font-size: 14px; color: var(--ink-3); line-height: 1.6; max-width: 460px; margin: 0 auto 12px; }
.prebio-link { color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; }
.prebio-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .cta-xl { font-size: 17px; padding: 22px 48px; }
  .cta-xl__icon { width: 32px; height: 32px; left: 16px; }
}

/* ---------- icon button ---------- */
.icon-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink-2); display: grid; place-items: center; transition: all .15s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- mobile nav links ---------- */
.mob-link { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line-2); font-family: var(--font-display); font-weight: 600; font-size: 16px; cursor: pointer; color: var(--ink); }
.mob-link:active { color: var(--accent); }

/* ============================================================
   HOMEPAGE — hero, editor's-picks rail, news cards, sections
   ============================================================ */
.hero-row { display: grid; grid-template-columns: 1.9fr 1fr; gap: 30px; margin-bottom: 14px; align-items: start; }

.feature-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: var(--paper); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.feature-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.feature-card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--line-2); }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-card__body { padding: 22px 26px 26px; }
.feature-card__title { font-size: clamp(22px,2.6vw,30px); line-height: 1.14; margin: 8px 0 12px; }
.feature-card__excerpt { color: var(--ink-3); font-size: 15.5px; margin: 0; line-height: 1.6; }

.hero-rail { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 18px 8px; }
.rail-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; padding: 0 2px; }
.rail-list { display: flex; flex-direction: column; }
.rail-item { display: flex; gap: 13px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.rail-item:last-child { border-bottom: 0; }
.rail-item img { width: 86px; height: 62px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--line-2); }
.rail-item h4 { font-size: 14.5px; line-height: 1.3; margin: 0; letter-spacing: -.01em; transition: color .15s; }
.rail-item:hover h4 { color: var(--accent); }
.rail-item__date { font-size: 11.5px; color: var(--ink-4); margin-top: 5px; }

/* news card */
.news-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--paper); display: flex; flex-direction: column; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.news-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.news-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--line-2); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__body { padding: 14px 16px 18px; }
.news-card__date { font-size: 11.5px; color: var(--ink-4); margin-bottom: 7px; }
.news-card__title { font-size: 16px; line-height: 1.28; letter-spacing: -.01em; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* card grid */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* centered section heading */
.section-head { display: flex; align-items: center; gap: 20px; margin: 44px 0 22px; }
.section-head__line { flex: 1; height: 1px; background: var(--line); }
.section-head h2 { font-size: 23px; letter-spacing: -.01em; white-space: nowrap; }
.section-head h2:hover { color: var(--accent); }

@media (max-width: 900px) {
  .hero-row { grid-template-columns: 1fr; gap: 20px; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .section-head { gap: 12px; margin: 32px 0 18px; }
  .section-head h2 { font-size: 19px; }
}
@media (max-width: 430px) {
  .card-grid { grid-template-columns: 1fr; }
}

.mob-only { }
.mob-search-overlay { display: none; }

/* ============================================================
   RESPONSIVE — mobile-first breakpoints
   ============================================================ */
@media (max-width: 1080px) {
  .home-layout, .post-layout { grid-template-columns: 1fr !important; }
  aside { order: 2; }
  .post-layout aside, .home-layout aside { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  /* 3-col reading -> drop the contents index, keep main + related */
  .post3 { grid-template-columns: minmax(0,1fr) 260px !important; }
  .post3 .col-toc { display: none !important; }
}
@media (max-width: 900px) {
  .desk-nav, .desk-search { display: none !important; }
  .mob-only { display: grid !important; }
  /* The phone's search entry point is the icon on the header line, not a field.
     A permanent 44px input under a 54px header spent most of the first screen on
     a control almost nobody uses on arrival; the icon is always reachable and
     costs no vertical space, and the field it reveals overlays the header row
     rather than adding one. */
  .mob-search-overlay { display: flex !important; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; }
  .admin-side { width: 68px !important; }
  .admin-side .label, .admin-side nav span:not(:empty), .admin-side button span { display: none; }
  .admin-side nav button { justify-content: center; }
  .admin-side > div:first-child { display: none; }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .feed-grid { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .post-layout aside, .home-layout aside { grid-template-columns: 1fr; }
  .post-layout .feed-grid, .post-layout div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .post3 { grid-template-columns: 1fr !important; gap: 28px; }
  .post3 .col-side { position: static !important; max-height: none !important; overflow: visible !important; }
  .post3 .col-related { order: 3; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .ad--leaderboard { min-height: 70px; }
  .post-editor-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .prose { font-size: 16.5px; }
}

code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; }
select.field { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

/* ============================================================
   Clean single-column landing layout (money pages, .landing)
   ============================================================ */
.landing { max-width: 760px; margin: 0 auto; padding: 10px 22px 76px; }
.landing-hero { text-align: center; padding: 30px 0 6px; }
.landing-kicker { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.landing-hero h1 { font-size: clamp(28px,4.6vw,46px); line-height: 1.12; margin: 0 0 16px; max-width: none; text-wrap: balance; }
.landing-sub { font-size: 18px; line-height: 1.6; color: var(--ink-3); margin: 0 auto; max-width: 60ch; }
.landing-cover { width: 100%; border-radius: 16px; margin: 30px 0 6px; aspect-ratio: 16/9; object-fit: cover; }
.landing-prose { font-size: 17px; line-height: 1.75; }
.landing-prose > h2 { font-size: clamp(21px,2.6vw,27px); margin: 42px 0 14px; letter-spacing: -.02em; }
.landing-prose > h3 { font-size: 19px; margin: 28px 0 8px; }
.landing-prose p { margin: 0 0 18px; color: var(--ink-2); }
.landing-prose img { border-radius: 14px; }
/* ad slots sit centered with clear breathing room */
.landing-prose [data-rsoc-ad] { display: flex; justify-content: center; margin: 32px 0; }
/* calmer CTA than the global loud gradient */
.landing-prose .inline-cta-wrap { margin: 30px 0; text-align: center; }
.landing-prose a.inline-cta { background: var(--accent); box-shadow: 0 6px 16px rgba(20,24,33,.14); font-size: 16px; padding: 15px 26px; }
.landing-prose a.inline-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(20,24,33,.18); }
.landing-prose .emp-grid { margin: 10px 0 26px; }
/* related reads */
.landing-related { margin-top: 50px; border-top: 1px solid var(--line); padding-top: 28px; }
.landing-related h2 { font-size: 20px; margin: 0 0 16px; }
.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }
.lr-card { display: block; cursor: pointer; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card,#fff); transition: border-color .15s, box-shadow .15s; }
.lr-card:hover { border-color: var(--accent); box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.06)); }
.lr-card img { width: 100%; height: 112px; object-fit: cover; display: block; }
.lr-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.lr-cat { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.lr-title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
@media (max-width: 640px) { .landing { padding: 4px 18px 56px; } .landing-prose { font-size: 16px; } .landing-hero { padding: 18px 0 4px; } }

/* ============================================================
   Vacancy / platform cards + attractive CTA panel
   (used in landing posts AND custom pages; mobile-first)
   ============================================================ */
.vac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 8px 0 26px; }
.vac-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--card, #fff);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.vac-card:hover { border-color: var(--accent); box-shadow: var(--shadow, 0 10px 28px rgba(20,23,28,.10)); transform: translateY(-2px); }
.vac-top { display: flex; align-items: center; gap: 12px; }
.vac-logo { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff; background: var(--c, var(--accent)); letter-spacing: -.02em; }
.vac-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); line-height: 1.15; }
.vac-meta { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.vac-desc { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.vac-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.vac-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0e9f6e; background: #e7f6ee; padding: 5px 10px; border-radius: 999px; }
.vac-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #0e9f6e; box-shadow: 0 0 0 3px rgba(14,159,110,.18); }
.vac-cta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--accent); }

/* attractive CTA panel */
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--accent); /* fallback for browsers without color-mix */
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #7b2ff7));
  border-radius: 18px; padding: 26px 28px; margin: 30px 0; color: #fff; box-shadow: 0 14px 34px rgba(20,23,28,.16); }
.cta-panel-txt h3 { color: #fff; font-size: clamp(19px,2.4vw,24px); margin: 0 0 6px; line-height: 1.2; }
.cta-panel-txt p { color: rgba(255,255,255,.9); font-size: 14.5px; margin: 0; line-height: 1.5; }
.cta-btn { flex: none; display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--accent);
  font-family: var(--font-display); font-weight: 800; font-size: 15.5px; padding: 15px 24px; border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.14); transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.cta-btn .cta-arrow { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 15px; }

/* mobile-first: 90% of traffic is phones */
@media (max-width: 640px) {
  .vac-grid { grid-template-columns: 1fr; gap: 12px; }
  .cta-panel { flex-direction: column; align-items: stretch; text-align: center; padding: 22px 20px; gap: 16px; }
  .cta-btn { justify-content: center; width: 100%; font-size: 16px; padding: 16px; }
  .landing-prose .emp-grid { grid-template-columns: 1fr; }
}

/* card links must never inherit the .prose underline */
.prose a.vac-card, .prose a.vac-card:hover { text-decoration: none; }
.vac-card, .vac-card * { text-decoration: none; }

/* ---- card entrance animation + interactive polish ---- */
@media (prefers-reduced-motion: no-preference) {
  .vac-card { animation: vacIn .5s cubic-bezier(.2,.7,.2,1) backwards; }
  .vac-grid .vac-card:nth-child(2) { animation-delay: .05s; }
  .vac-grid .vac-card:nth-child(3) { animation-delay: .10s; }
  .vac-grid .vac-card:nth-child(4) { animation-delay: .15s; }
  .vac-grid .vac-card:nth-child(5) { animation-delay: .20s; }
  .vac-grid .vac-card:nth-child(6) { animation-delay: .25s; }
  .vac-grid .vac-card:nth-child(7) { animation-delay: .30s; }
  .vac-grid .vac-card:nth-child(8) { animation-delay: .35s; }
  .vac-grid .vac-card:nth-child(9) { animation-delay: .40s; }
  .applyco { animation: vacIn .5s cubic-bezier(.2,.7,.2,1) backwards; }
}
@keyframes vacIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.vac-logo { transition: transform .2s var(--ease, ease); }
.vac-card:hover .vac-logo { transform: scale(1.07) rotate(-2deg); }
.vac-cta { transition: gap .15s ease; }
.vac-card:hover .vac-cta { gap: 9px; }

/* ---- "how to apply" per-company blocks (Page A) ---- */
.applyco { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--card,#fff); margin: 0 0 16px; scroll-margin-top: 80px; }
.applyco:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.apply-steps { list-style: none; counter-reset: s; padding: 0; margin: 14px 0 16px; display: grid; gap: 10px; }
.apply-steps li { counter-increment: s; position: relative; padding: 0 0 0 38px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.apply-steps li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.apply-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 14.5px; padding: 12px 20px; border-radius: 11px; box-shadow: 0 6px 16px rgba(20,23,28,.12); transition: transform .15s, box-shadow .15s; }
.apply-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(20,23,28,.18); }
/* small type/pay tag for cards */
.vac-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vac-tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; }

/* ---- reserved-but-flexible ad slots -------------------------------------
   A *minimum* height reserves space so the page never reflows when an ad
   arrives (layout shift is what causes accidental clicks / inflated CTR),
   while the container is free to grow to whatever size AdSense fills — the
   units are data-ad-format="auto" + full-width-responsive, so a fixed height
   would only restrict which creatives can serve. */
[data-rsoc-ad]{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
/* space is reserved ONLY once a real, serving unit is attached (data-rsoc-live).
   An unconfigured slot collapses to nothing instead of leaving a blank gap. */
[data-rsoc-ad][data-rsoc-live]{ min-height:250px; margin:26px 0; contain-intrinsic-size:auto 250px; }
[data-rsoc-ad] ins.adsbygoogle{ width:100%; }
/* GAM/GPT slots: clean frames for LIVE creatives. Pending = a quiet block that
   reserves modest space (no stripes, no dashed border — that chrome is the
   design-time placeholder and must never wrap a real ad). Filled = the frame
   hugs the creative at its natural size, with a small compliance label. Empty
   slots are hidden by ad-manager.js. */
.gam-ad{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:90px; background:#fafbfc; border-radius:var(--radius-sm); overflow:visible; margin:22px 0; }
[data-rsoc-ad].gam-ad[data-rsoc-live]{ min-height:0; background:none; contain-intrinsic-size:unset; margin:22px auto; }
.gam-ad[data-rsoc-live]::before{ content:'Advertisement'; display:block; font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin-bottom:6px; }
.gam-ad > div{ max-width:100%; }
@media (min-width:1024px){ [data-rsoc-ad][data-rsoc-live]{ min-height:280px; } }
/* landing pages: let the slot span the full reading column for max eligible sizes */
.landing-prose [data-rsoc-ad]{ margin:32px 0; }

/* ============================================================
   RSOC — AdSense for Search (related-search blocks + results page)
   ------------------------------------------------------------
   Slots are reserved but NOT fixed-height: min-height stops the article
   reflowing when Google fills them (reflow is what produces accidental taps,
   and accidental taps are what turn CTR into an invalid-traffic flag), while
   the box is free to grow so any creative size can serve. A slot that comes
   back empty collapses to nothing rather than leaving a hole.
   ============================================================ */
/* min-height is unconditional on purpose, and it is what makes the unit request
   at all. CSA defers a relatedsearch call until its container is visible: on the
   content page it sets the iframe to src=about:blank with data-ad-src and
   data-observe, then waits. With no reserved height the container had zero area,
   so it could never become visible, so the request was never dispatched, so the
   slot never filled and never earned its --live height. A closed loop.

   The search page never had this problem because .afs-unit carries min-height
   unconditionally — which is exactly why AFS filled there and not here. */
.rsoc-slot { width: 100%; min-height: 100px; margin: 26px 0; }
.rsoc-slot--live { min-height: 90px; }
/* only collapse once a render has actually reported no-fill */
.rsoc-slot--empty { display: none; min-height: 0; }
/* No response at all (as distinct from an empty response): CSA built the request
   and never dispatched it, so the fill callback never fires and the slot would
   hold its reserved 100px as a dead gap mid-article. Drop the reservation but
   stay in flow and visible — display:none would make the container permanently
   unobservable, and CSA only dispatches on visibility, so collapsing it outright
   would guarantee no fill even once the account is entitled. */
.rsoc-slot--dormant { min-height: 0; margin: 0; }
/* ============================================================
   AFS-only property (body.afs-site)
   ------------------------------------------------------------
   An RSOC site earns from one unit per page, so the page is built around
   reading and around that unit rather than around a display roster.

   Two sections, not three. The contents index was the narrowest column and the
   least load-bearing on a 1000-word article, and dropping it hands its 186px
   plus a 56px gap to the reading column — which is also the related-search
   container, since Google renders that unit to fill whatever width it is given.
   This is the same shape the layout already collapses to below 1080px, so it is
   a proven arrangement rather than a new one.

   Type goes up across the board: at 596px the copy was set at 17.5px because
   the measure was narrow. A wider column carries larger type at the same
   characters-per-line, so readability improves rather than degrading.
   ============================================================ */
.afs-site { --maxw: 1240px; }
@media (min-width: 1081px) {
  .afs-site .post3 { grid-template-columns: minmax(0, 1fr) 288px; }
  .afs-site .post3 .col-toc { display: none; }
}
/* Body copy and headings, one step up. line-height falls slightly as size rises
   — the ratio that reads well at 17.5px is loose at 20px. */
.afs-site .prose { font-size: 20px; line-height: 1.7; }
.afs-site .prose h2 { font-size: 30px; line-height: 1.2; margin-top: 2em; }
.afs-site .prose h3 { font-size: 23px; line-height: 1.25; }
.afs-site .prose li { margin-bottom: .6em; }
.afs-site .prose .lead { font-size: 22.5px; line-height: 1.6; }
.afs-site .prose .faint { font-size: 16px; }
.afs-site .col-side { font-size: 16px; }
/* The search unit gets the reading column's full width, which is now the wide
   one. No negative margins: there is a rail to the right and overlapping it is
   exactly the bug this replaced. */
.afs-site .rsoc-slot { width: 100%; margin: 32px 0; }
@media (max-width: 1080px) {
  .afs-site .prose { font-size: 18.5px; }
  .afs-site .prose h2 { font-size: 26px; }
  .afs-site .prose .lead { font-size: 20px; }
}

/* An earlier attempt widened this slot with a negative margin so it spanned the
   two rails. It overlapped them instead of displacing them: the rails are grid
   siblings, and a wider child of the middle column just paints on top of both.
   The right fix was the layout, not the slot — see .afs-site below, which drops
   the property to two columns so the reading column is genuinely wider. */
.rsoc-prose .rsoc-slot:first-child { margin-top: 0; }

/* money-page chrome */
.rsoc-page { max-width: 760px; }
.rsoc-kicker {
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 10px;
}
.rsoc-byline { font-size: 13.5px; margin: 10px 0 0; }
.rsoc-cover {
  width: 100%; height: auto; border-radius: var(--radius);
  aspect-ratio: 16/9; object-fit: cover; margin: 22px 0 6px; background: #f1f1f4;
}
.rsoc-faq { margin: 34px 0 0; }
.rsoc-faq h2 { margin-bottom: 12px; }

/* ---- /search-results (the AFS results page) ---- */
.serp-search { display: flex; gap: 8px; margin: 0 0 18px; }
.serp-input {
  flex: 1; min-width: 0; padding: 13px 16px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  font-family: inherit;
}
.serp-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.serp-go { border-radius: 999px; padding: 0 22px; flex: none; }
.serp-meta { font-size: 14px; color: var(--ink-3); margin: 0 0 16px; }
.serp .adlabel {
  font: 600 10px/1 var(--font-display, sans-serif); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px;
}
.afs-unit { width: 100%; min-height: 120px; }
.serp-nofill { font-size: 13.5px; margin: 6px 0 0; }
.serp-organic { margin: 30px 0 0; border-top: 1px solid var(--line); padding-top: 22px; }
.serp-h2 { font-size: 17px; margin: 0 0 14px; }
.serp-list { list-style: none; margin: 0; padding: 0; }
.serp-list li { margin: 0 0 18px; }
.serp-list a {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--accent); text-decoration: none; cursor: pointer; line-height: 1.3;
}
.serp-list a:hover { text-decoration: underline; }
.serp-list p { margin: 4px 0 0; font-size: 14px; }
@media (max-width: 600px) {
  .serp-search { flex-direction: column; }
  .serp-go { padding: 12px 22px; }
}

/* ---- SERP: compliant sponsored-results presentation ---- */
.serp-ads { margin: 8px 0 26px; }
.serp-ads-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.serp-ads-hd .adlabel { font: 700 11px/1 var(--font-display, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.serp-ads-sub { font-size: 11.5px; color: var(--ink-4, #9aa0ab); }
.serp-ads .afs-unit { min-height: 120px; }

/* ============================================================
   SERP v2 — minimal, compact, mobile-first. Slim brand bar, then
   sponsored results immediately. Text-only organic list, no images,
   no nav, no diversions. Tiny legal footer for compliance.
   ============================================================ */
/* ============================================================
   /search-results — modelled on the lesothoeducation layout
   ------------------------------------------------------------
   Their shape, measured from their own stylesheet: a wide centred column
   (1280px), one section heading with a 2px accent rule under it, and results as
   white cards (padding 1rem, radius 8px, shadow 0 2px 8px rgba(0,0,0,.1),
   lifting 3px on hover) with bright-blue titles over a two-line excerpt.

   Three deliberate departures, all in our favour:
     - the accent is per-site (var(--accent)), not their fixed #6a62fe; finditrate's
       brand is not indigo and a borrowed hue reads as a borrowed template
     - the sponsored block keeps its label. They ship none, which is the one part
       of their page I would not copy
     - the organic list stays query-filtered. Theirs prints the same "Explore the
       Latest Topics" regardless of what was searched, which is thin for a results
       page — the results are the thing that makes it a search page rather than a
       doorway
   ============================================================ */
.serp2 { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.serp2-bar {
  display: flex; align-items: center; gap: 18px; padding: 12px 20px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 10;
}
.serp2-bar-inner {
  display: flex; align-items: center; gap: 20px;
  width: 100%; max-width: 1040px; margin: 0 auto;
}
.serp2-brand {
  font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em;
  color: var(--ink); cursor: pointer; flex: none; text-decoration: none; white-space: nowrap;
}
/* Their field: a rounded rect with the magnifier inside on the right, tinted with
   the accent. Not our old pill-with-a-solid-button — theirs is quieter and lets
   the results carry the colour. */
.serp2-form { flex: 1; display: flex; position: relative; max-width: 368px; margin-left: auto; }
.serp2-input {
  flex: 1; min-width: 0; padding: 10px 44px 10px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff;
}
.serp2-input:focus { outline: none; border-color: var(--accent); }
.serp2-go {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 34px; border: 0; border-radius: 7px;
  background: none; color: var(--accent); cursor: pointer; display: grid; place-items: center;
}
.serp2-go:hover { background: var(--accent-soft, rgba(0,0,0,.04)); }

.serp2-main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 22px 20px 48px; }

/* ONE heading treatment for both sections.
   The first version gave the sponsored block a 10px uppercase label and the
   organic block a 28px heading over a 2px accent rule. That is two different
   visual languages on one page, and it read as "the ads are over, the real
   content starts here" — a seam that helps nobody. Same size, same weight, same
   rule for both now, so the page is one design.

   What does NOT get equalised is the labelling. The sponsored section still says
   so in words, and Google renders its own "Sponsored" tag above every ad inside
   its iframe, which is not ours to style or remove. Matching the typography is
   design consistency; removing the distinction would be a policy problem on a
   partner account, which is a different thing entirely. */
.serp2-adlabel {
  font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25;
  letter-spacing: -.01em; text-transform: none; color: var(--ink);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.serp2-adlabel.dim { color: var(--ink); }
.serp2-ads { margin-bottom: 26px; }
.serp2-ads .afs-unit { min-height: 100px; }

/* Same rule, same weight — the heading class is now an alias of the label one. */
.serp2-head {
  font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25;
  letter-spacing: -.01em; color: var(--ink); margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.serp2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.serp2-list li {
  padding: 16px 18px; background: #fff; border: 1px solid var(--line-soft, #eceef2);
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.serp2-list li:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.13); }
.serp2-list a {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #2563eb;
  text-decoration: none; cursor: pointer; line-height: 1.3; display: block;
}
.serp2-list a:hover { text-decoration: underline; }
.serp2-list p {
  margin: 6px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.serp2-rel { margin-top: 30px; }
.serp2-empty { color: var(--ink-3); font-size: 15px; padding: 40px 0; text-align: center; }
.serp2-debug {
  font: 600 11px/1.5 ui-monospace, Menlo, monospace; background: #FEF3C7; color: #92400E;
  border: 1px solid #FDE68A; border-radius: 8px; padding: 7px 10px; margin: 10px 0 2px;
}
.serp2-foot {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  padding: 18px 14px; font-size: 12px; color: var(--ink-4, #9aa0ab); border-top: 1px solid var(--line);
}
.serp2-foot a { color: var(--ink-3); cursor: pointer; text-decoration: none; }

@media (max-width: 760px) {
  /* The icon-only header rule does NOT apply here, deliberately. Everywhere else
     the phone header hides the field because it is overhead; on a results page
     the field IS the page — it shows the query that produced these results and is
     how the reader changes it. Hiding that behind a tap would be worse UX and
     would bury the one control an AFS results page is required to have working. */
  .serp2-bar { padding: 9px 14px; }
  .serp2-bar-inner { gap: 10px; flex-wrap: wrap; }
  .serp2-brand { font-size: 16px; }
  .serp2-form { max-width: none; flex: 1 1 100%; margin-left: 0; order: 2; }
  .serp2-input { font-size: 16px; }   /* below 16px iOS zooms the page on focus */
  .serp2-main { padding: 16px 14px 34px; }
  .serp2-head, .serp2-adlabel { font-size: 17.5px; margin-bottom: 12px; }
  .serp2-list li { padding: 14px 15px; }
  .serp2-list a { font-size: 16.5px; }
  .serp2-list p { font-size: 14px; }
}


/* ============================================================
   Frequent Interstitial CTA cards
   ------------------------------------------------------------
   Modelled on the .rjl-card pattern orthavix injects: a card carrying a title
   and a sub-label, with a high-contrast arrow box on the right and a chevron
   that nudges sideways to draw the eye. Their chunky 0 4px 0 shadow reads as
   pressable, which is most of why the pattern works.

   The link is a plain <a href> on purpose. GPT only shows an armed web
   interstitial when the reader leaves via a real same-origin navigation — an SPA
   route change does not qualify, so intercepting this click would quietly
   disable the whole mechanism.
   ============================================================ */
.fi-ctas { display: grid; gap: 12px; margin: 26px 0; }
.fi-cta {
  display: flex; align-items: stretch; gap: 0; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0,0,0,.18); overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.fi-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 0 rgba(0,0,0,.2); }
.fi-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.fi-cta-body { flex: 1; min-width: 0; padding: 14px 16px; display: grid; gap: 3px; align-content: center; }
.fi-cta-title {
  font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25;
  color: var(--ink); letter-spacing: -.01em;
}
.fi-cta-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.35; }
.fi-cta-arrow {
  flex: none; width: 62px; display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.fi-cta-arrow svg { animation: fiArrow 1s ease-in-out infinite; }
@keyframes fiArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
/* Theirs animates unconditionally. A permanently moving element is exactly what
   this setting exists to stop, and honouring it costs one rule. */
@media (prefers-reduced-motion: reduce) {
  .fi-cta-arrow svg { animation: none; }
  .fi-cta { transition: none; }
}
@media (max-width: 480px) {
  .fi-cta-title { font-size: 16.5px; }
  .fi-cta-arrow { width: 54px; }
  .fi-cta-body { padding: 12px 14px; }
}

/* sponsored block on the internal /search page */
.search-ads { margin: 0 0 22px; }
.search-ads .afs-unit { min-height: 90px; }

/* ---- results page is AFS-only: hide any AdSense content/Auto ad that
        rendered before we got here (side rails, anchor, vignette, in-page) ---- */
body.afs-only ins.adsbygoogle,
body.afs-only .adsbygoogle,
body.afs-only [id^="aswift_"],
body.afs-only iframe[id^="aswift_"],
body.afs-only [aria-label="Advertisement"],
body.afs-only .google-auto-placed,
body.afs-only ins[data-anchor-status],
body.afs-only [data-google-query-id]:not(#afs-top):not(#afs-related):not(#afs-sitesearch),
body.afs-only #rsoc-anchor,
body.afs-only .anchor-ad { display: none !important; visibility: hidden !important; }
/* our own AFS containers must stay visible */
body.afs-only #afs-top,
body.afs-only #afs-top *,
body.afs-only #afs-related,
body.afs-only #afs-related * { display: revert !important; visibility: visible !important; }