/* ─────────────────────────────────────────────────────────────────────────
   Migration cluster: standalone LIGHT editorial theme.

   This file no longer sits on top of the dark blog stylesheet, it replaces it.
   The dark navy article page read as heavy and unsellable. Reference pages that
   convert (landingpagesexplained.com and the pages it collects) are light, image
   led and repeat the call to action down the page, so that is what this is.

   Palette stays Neurobird: navy #17172B for type, blue #3431A5 for action, lime
   #F5FFAB used the way lime actually works on white, as a highlighter behind
   words and as a chip, never as text.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --navy:#17172B; --blue:#3431A5; --lime:#F5FFAB; --white:#fff;
  --ink:#17172B; --body:#43485F; --muted:#6B7089; --muted-d:rgba(23,23,43,.66);
  --line:#E6E8F2; --tint:#F7F8FC; --tint2:#EFF1F8;
  --max:748px; --wide:1080px; --pad:clamp(20px,4vw,40px);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--white);color:var(--body);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:clip;font-size:17px;
}
img{max-width:100%;display:block}
a{color:inherit}

/* reading progress */
.rp{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--blue),#6C67E8);transition:width .12s linear}

/* ── top bar ── */
.bnav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px var(--pad);background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.bnav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;
  letter-spacing:-.02em;font-size:18px;color:var(--ink)}
.bnav__brand img{width:28px;height:28px}
.bnav__links{display:flex;gap:20px;align-items:center}
.bnav__links a{text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:650;transition:color .18s}
.bnav__links a:hover{color:var(--ink)}
.bnav__cta{background:var(--navy);color:#fff!important;padding:10px 17px;border-radius:9px;
  font-weight:800;font-size:13px;letter-spacing:.03em;transition:transform .16s,box-shadow .16s}
.bnav__cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(23,23,43,.24)}
@media(max-width:640px){.bnav__links a:not(.bnav__cta){display:none}}

/* ── article shell ── */
.article{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 40px}
.crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:26px 0 16px;
  font:650 12px/1.5 inherit;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--blue)}
.crumb span{opacity:.45}
.article__eyebrow{display:inline-block;background:var(--lime);color:var(--navy);
  padding:6px 13px;border-radius:999px;font:800 11.5px/1 inherit;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:18px}
.article__h1{font-size:clamp(31px,5vw,50px);font-weight:900;letter-spacing:-.032em;
  line-height:1.06;color:var(--ink);margin-bottom:18px}
.article__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--muted);
  font-size:14px;font-weight:600;margin-bottom:28px}
.article__meta span,.article__meta time{display:inline-flex;align-items:center;gap:7px}
.article__meta span+span::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--muted);opacity:.5}

/* hero image */
.hero-img{margin:0 0 clamp(26px,4vw,38px);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--tint);aspect-ratio:1200/630}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* ── tldr ── */
.tldr{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:10px;padding:22px 24px;margin-bottom:28px}
.tldr b{display:block;color:var(--blue);font:800 11.5px/1 inherit;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:10px}
.tldr p{margin:0;color:var(--ink);font-size:16.5px;font-weight:550;line-height:1.62}

.article__lede{font-size:clamp(18px,2.1vw,21px);line-height:1.58;color:var(--ink);
  margin-bottom:34px;font-weight:550}

/* ── prose ── */
.prose h2{font-size:clamp(23px,3.1vw,31px);font-weight:900;letter-spacing:-.026em;
  line-height:1.16;color:var(--ink);margin:clamp(40px,5vw,58px) 0 15px;scroll-margin-top:80px}
.prose h3{font-size:clamp(18.5px,2vw,22px);font-weight:800;letter-spacing:-.014em;
  color:var(--ink);margin:34px 0 11px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink);font-weight:750}
.prose a{color:var(--blue);text-decoration:none;border-bottom:1.5px solid rgba(52,49,165,.28)}
.prose a:hover{border-bottom-color:var(--blue)}
.prose em{font-style:normal;background:linear-gradient(transparent 62%,var(--lime) 62%);
  padding:0 2px;color:var(--ink);font-weight:600}

/* statistic: one of the three GEO methods that beat baseline, so make it look
   like the finding it is rather than like body text */
.statline{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--lime);
  border-radius:10px;padding:18px 22px;margin:26px 0;font-size:16px;font-weight:600;
  color:var(--ink);box-shadow:0 2px 14px rgba(23,23,43,.05)}
.statline a{color:var(--blue);font-weight:700;text-decoration:none;
  border-bottom:1.5px solid rgba(52,49,165,.3)}

/* verbatim vendor quote */
.prose blockquote.q{margin:28px 0;padding:24px 26px;background:var(--tint);
  border:1px solid var(--line);border-radius:12px;position:relative}
.prose blockquote.q::before{content:"\201C";position:absolute;top:6px;left:16px;
  font:900 54px/1 Georgia,serif;color:var(--lime)}
.prose blockquote.q p{margin:0 0 12px;color:var(--ink);font:600 17px/1.6 inherit;
  position:relative;z-index:1}
.prose blockquote.q cite{font-style:normal;font-size:13.5px;color:var(--muted);font-weight:600}
.prose blockquote.q cite a{color:var(--blue);text-decoration:none;
  border-bottom:1.5px solid rgba(52,49,165,.3)}

/* tables */
.ctab__wrap{overflow-x:auto;margin:28px 0;border:1px solid var(--line);border-radius:12px;
  -webkit-overflow-scrolling:touch}
.ctab{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;background:#fff}
.ctab th{text-align:left;font-weight:800;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:14px 16px;background:var(--tint);
  border-bottom:1px solid var(--line);white-space:nowrap}
.ctab td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top}
.ctab tbody tr:last-child td{border-bottom:none}
.ctab tbody tr:hover{background:var(--tint)}
.ctab td strong{color:var(--ink);font-weight:750}
.ctab td em{font-style:normal;color:var(--muted);font-size:13.5px}

/* ── repeated inline CTA band ── */
.midcta{margin:40px 0;padding:26px 28px;border-radius:var(--r);background:var(--navy);
  color:#fff;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  box-shadow:0 14px 40px rgba(23,23,43,.2)}
.midcta__t{flex:1 1 260px;min-width:230px}
.midcta__t b{display:block;font:800 19px/1.28 inherit;color:#fff;margin-bottom:5px;
  letter-spacing:-.018em}
.midcta__t span{font-size:14.5px;color:rgba(255,255,255,.72);font-weight:500}
.midcta__a{display:flex;gap:10px;flex-wrap:wrap}
.midcta__b{display:inline-flex;align-items:center;gap:8px;padding:13px 21px;border-radius:999px;
  font:800 12.5px/1 inherit;letter-spacing:.045em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;transition:transform .15s,box-shadow .15s;cursor:pointer;border:none}
.midcta__b--go{background:var(--lime);color:var(--navy)}
.midcta__b--go:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(245,255,171,.32)}
.midcta__b--wa{background:#25D366;color:#08130a}
.midcta__b--wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.32)}
@media(max-width:560px){.midcta{flex-direction:column;align-items:stretch}
  .midcta__b{justify-content:center;width:100%}}

/* ── FAQ ── */
.afaq{margin:48px 0 0}
.afaq h2{font-size:clamp(23px,3.1vw,31px);font-weight:900;letter-spacing:-.026em;
  color:var(--ink);margin-bottom:18px}
.afaq__i{border:1px solid var(--line);border-radius:11px;margin-bottom:10px;background:#fff;
  overflow:hidden;transition:border-color .18s,box-shadow .18s}
.afaq__i[open]{border-color:rgba(52,49,165,.35);box-shadow:0 6px 22px rgba(23,23,43,.07)}
.afaq__i summary{cursor:pointer;list-style:none;padding:17px 48px 17px 20px;position:relative;
  font-weight:750;color:var(--ink);font-size:16.5px;line-height:1.42}
.afaq__i summary::-webkit-details-marker{display:none}
.afaq__i summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2.4px solid var(--blue);border-bottom:2.4px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s}
.afaq__i[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.afaq__i div{padding:0 20px 18px;color:var(--body);font-size:16px}

/* ── end CTA ── */
.mcta{margin:46px 0 10px;padding:clamp(28px,5vw,42px);border-radius:18px;color:#fff;
  background:radial-gradient(120% 140% at 12% 0%,#2C2A78 0%,var(--navy) 58%);
  box-shadow:0 20px 54px rgba(23,23,43,.24)}
.mcta h3{margin:0 0 11px;font:900 clamp(23px,3.5vw,32px)/1.14 inherit;color:#fff;
  letter-spacing:-.028em}
.mcta>p{margin:0 0 22px;color:rgba(255,255,255,.78);font-size:16.5px;font-weight:500}
.mcta__row{display:flex;flex-wrap:wrap;gap:12px}
.mcta__btn{display:inline-flex;align-items:center;gap:9px;padding:16px 27px;border-radius:999px;
  font:800 13.5px/1 inherit;letter-spacing:.045em;text-transform:uppercase;text-decoration:none;
  transition:transform .16s,box-shadow .16s;cursor:pointer;border:none}
.mcta__btn--go{background:var(--lime);color:var(--navy)}
.mcta__btn--go:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(245,255,171,.3)}
.mcta__btn--wa{background:#25D366;color:#08130a}
.mcta__btn--wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,211,102,.32)}
.mcta__fine{margin:18px 0 0;color:rgba(255,255,255,.55);font-size:13.5px;font-weight:500}

/* ── related + guides ── */
.nbrel,.guides{max-width:var(--wide);margin:0 auto;padding:clamp(40px,6vw,72px) var(--pad);
  border-top:1px solid var(--line)}
.nbrel h2,.guides__h{font:900 clamp(22px,3.4vw,32px)/1.14 inherit;color:var(--ink);
  letter-spacing:-.026em;margin-bottom:8px}
.guides__s{color:var(--muted);margin-bottom:26px;max-width:620px}
.nbrel__g,.guides__g{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(266px,1fr))}
.nbrel__g a,.guides__g a{display:block;height:100%;padding:22px;border-radius:13px;
  text-decoration:none;background:#fff;border:1px solid var(--line);
  transition:border-color .18s,box-shadow .18s,transform .18s}
.nbrel__g a:hover,.guides__g a:hover{border-color:rgba(52,49,165,.4);
  box-shadow:0 12px 30px rgba(23,23,43,.09);transform:translateY(-3px)}
.nbrel__g strong,.guides__g strong{display:block;margin-bottom:7px;color:var(--ink);
  font:800 17px/1.32 inherit}
.nbrel__g span,.guides__g span{display:block;color:var(--muted);font-size:14.2px;line-height:1.55}

/* ── footer ── */
.bfoot{max-width:var(--wide);margin:0 auto;padding:26px var(--pad) 56px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px;
  border-top:1px solid var(--line)}
.bfoot a{color:var(--muted);text-decoration:none}
.bfoot a:hover{color:var(--blue)}

/* ── scroll reveal ── */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media(prefers-reduced-motion:reduce){.rv,.rv.in{opacity:1;transform:none;transition:none}}

/* verbatim user quotes on the pillar (pillar keeps its own dark theme) */
.rmq{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:26px}
.rmq__i{margin:0;padding:18px 20px;border-radius:0 10px 10px 0;
  background:rgba(23,23,43,.055);border-left:3px solid #17172B}
.rmq__i p{margin:0 0 10px;color:#17172B;font:600 15.5px/1.55 Satoshi,system-ui,sans-serif}
.rmq__i cite{font-style:normal;font-size:13px;color:rgba(23,23,43,.62)}
.rmq__i cite b{color:#17172B;font-weight:800}
.rmq__i cite a{color:#3431A5;text-decoration:none;border-bottom:1px solid rgba(52,49,165,.35)}

/* ── classes used by the older /blog/ articles, so they can share this theme ── */
.article__hero{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  margin-bottom:clamp(28px,4vw,40px);aspect-ratio:1024/576;background:var(--tint)}
.article__hero img{width:100%;height:100%;object-fit:cover}
.endcta{margin:46px 0 10px;padding:clamp(28px,5vw,42px);border-radius:18px;color:#fff;
  background:radial-gradient(120% 140% at 12% 0%,#2C2A78 0%,var(--navy) 58%);
  box-shadow:0 20px 54px rgba(23,23,43,.24)}
.endcta h3{margin:0 0 11px;font:900 clamp(23px,3.5vw,32px)/1.14 inherit;color:#fff;
  letter-spacing:-.028em}
.endcta p{margin:0 0 22px;color:rgba(255,255,255,.78);font-size:16.5px;font-weight:500}
.endcta a{display:inline-flex;align-items:center;gap:9px;padding:16px 27px;border-radius:999px;
  background:var(--lime);color:var(--navy);font:800 13.5px/1 inherit;letter-spacing:.045em;
  text-transform:uppercase;text-decoration:none;border:none;
  transition:transform .16s,box-shadow .16s}
.endcta a:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(245,255,171,.3)}
.prose figure{margin:28px 0}
.prose figure img{border-radius:var(--r);border:1px solid var(--line)}
.prose figcaption{margin-top:9px;color:var(--muted);font-size:13.5px;text-align:center}

/* ═══════════════════════════════════════════════════════════════════════════
   NEUROBIRD DESIGN CODE
   Lifted from styles.css so the cluster is the same site, not a lookalike:
   buttons are 8px radius with 17px 32px padding and .06em tracking (NOT pills),
   eyebrows are .tag at 13px / .14em with a leading slash, and a section opens
   with a /0N label beside one huge word, then closes on a hairline rule that
   carries a label left and a note right. Almost nothing sits in a box.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:none;text-decoration:none;
  padding:17px 32px;border-radius:8px;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn--lime{background:var(--lime);color:var(--navy)}
.btn--lime:hover{box-shadow:0 12px 30px rgba(245,255,171,.4)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{box-shadow:0 12px 30px rgba(23,23,43,.3)}
.btn--outline{background:transparent;color:var(--white);padding:15.5px 30px;
  border:1.5px solid rgba(255,255,255,.55);border-radius:8px}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn--wa{background:#25D366;color:#08130a}
.btn--wa:hover{box-shadow:0 12px 30px rgba(37,211,102,.36)}
.btn--sm{padding:12px 22px;font-size:12px}

.tag{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime);margin-bottom:20px}
.tag--navy{color:var(--navy);opacity:.55}

/* section shell */
.secnb{margin:56px 0;padding:clamp(30px,4.6vw,56px);border-radius:20px;background:var(--tint);
  border:1px solid var(--line)}
.secnb--navy{background:var(--navy);border-color:transparent;color:#fff;
  box-shadow:0 24px 64px rgba(23,23,43,.26)}

/* /0N + one huge word */
.big{margin-bottom:34px;max-width:54ch}
.big__l{display:flex;align-items:flex-start;gap:14px}
.num{font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--navy);opacity:.42;
  padding-top:10px;flex:none}
.secnb--navy .num{color:var(--lime);opacity:.7}
.big__w{font-weight:900;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(46px,9vw,86px);margin:0;color:var(--ink)}
.secnb--navy .big__w{color:#fff}
.big__lead{margin-top:16px;font-size:clamp(15px,4vw,17.5px);line-height:1.55;color:var(--muted-d)}
.secnb--navy .big__lead{color:rgba(255,255,255,.7)}

/* hairline rule that closes a section */
.rule{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid var(--line);padding-top:14px;margin-top:34px;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.secnb--navy .rule{border-top-color:rgba(255,255,255,.2);color:rgba(255,255,255,.5)}
.rule__n{text-align:right;font-weight:600;text-transform:none;letter-spacing:.01em;
  font-size:13px;opacity:.9}

/* ── playbook steps: image on top, number badge over it, text beneath ── */
.pb__g{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.pb__s{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s}
.pb__s:hover{border-color:rgba(52,49,165,.3);box-shadow:0 14px 34px rgba(23,23,43,.1);
  transform:translateY(-3px)}
.pb__ic{position:relative;aspect-ratio:16/10;background:var(--tint);
  border-bottom:1px solid var(--line);overflow:hidden}
.pb__ic img{width:100%;height:100%;object-fit:cover}
.pb__n{position:absolute;left:12px;top:12px;background:var(--navy);color:var(--lime);
  padding:6px 11px;border-radius:7px;font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase}
.pb__c{padding:18px 20px 20px}
.pb__s b{display:block;color:var(--ink);font:800 17.5px/1.3 inherit;letter-spacing:-.018em;
  margin-bottom:7px}
.pb__d{color:var(--muted);font-size:15px;line-height:1.55}

/* ── cost stack rows ── */
.st__g{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.st__r{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:18px 22px;border-radius:12px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);transition:background .18s,border-color .18s}
.st__r:hover{background:rgba(245,255,171,.08);border-color:rgba(245,255,171,.3)}
.st__m{flex:1 1 250px}
.st__m b{display:block;color:#fff;font:800 17px/1.3 inherit;margin-bottom:3px}
.st__m span{color:rgba(255,255,255,.62);font-size:14.5px}
.st__p{text-align:right;flex:0 0 auto}
.st__p b{color:var(--lime);font:900 28px/1 inherit;letter-spacing:-.035em}
.st__p em{font-style:normal;color:rgba(255,255,255,.6);font-size:14px;font-weight:700}
.st__p span{display:block;color:rgba(255,255,255,.42);font-size:12.5px;margin-top:5px}
@media(max-width:560px){.st__r{flex-direction:column;align-items:flex-start}.st__p{text-align:left}}

/* ── the strong CTA that follows the playbook ── */
.bigcta{margin:0 0 52px;padding:clamp(30px,4.6vw,52px);border-radius:20px;color:#fff;
  background:radial-gradient(120% 150% at 10% 0%,#2C2A78 0%,var(--navy) 60%);
  box-shadow:0 24px 64px rgba(23,23,43,.28)}
.bigcta__h{font:900 clamp(25px,4vw,40px)/1.08 inherit;letter-spacing:-.032em;color:#fff;
  margin-bottom:12px;max-width:18ch}
.bigcta__p{color:rgba(255,255,255,.74);font-size:16.5px;margin-bottom:26px;max-width:56ch}
.bigcta__r{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:520px){.bigcta__r .btn{width:100%}}

/* mid-article CTA now uses the brand button, not a pill */
.midcta__b{border-radius:8px;padding:16px 28px;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700}
.mcta__btn{border-radius:8px;padding:17px 32px;letter-spacing:.06em}
.article__eyebrow{border-radius:8px}

/* Break the visual sections out of the reading column. On neurobird.com the
   prose is narrow but the sections are wide, which is what stops a long page
   feeling like a document. Uses the centring breakout so it stays inside the
   viewport with no horizontal scroll. */
.secnb,.bigcta{--bw:min(1080px,calc(100vw - 2*var(--pad)));
  width:var(--bw);margin-left:calc((100% - var(--bw)) / 2)}
.pb__g{grid-template-columns:repeat(auto-fit,minmax(286px,1fr))}
@media(min-width:900px){
  .big__l{align-items:baseline}
  .bigcta__h{font-size:clamp(30px,3.6vw,44px)}
}

/* ═══════════════ MOBILE ═══════════════
   Checked at a real 390px viewport with device metrics forced, not by resizing
   a desktop window (a desktop window would not go below 500px and would have
   reported these as fine). */
@media(max-width:640px){
  body{font-size:16.5px}
  .article{padding-bottom:24px}
  .article__h1{font-size:clamp(28px,8.4vw,34px);letter-spacing:-.028em}
  .big__w{font-size:clamp(40px,13vw,54px)}
  .big__l{gap:10px}
  .num{padding-top:6px;font-size:12px}
  .secnb,.bigcta{padding:24px 20px;border-radius:16px;margin:38px 0}
  .bigcta{margin-bottom:38px}
  /* label over note, both left aligned: side by side they collided at 390px */
  .rule{flex-direction:column;align-items:flex-start;gap:6px;margin-top:26px}
  .rule__n{text-align:left}
  .pb__g{grid-template-columns:1fr;gap:12px}
  /* seven full-height cards was a very long scroll on a phone; a wider
     crop keeps the illustration legible and halves the column height */
  .pb__ic{aspect-ratio:24/9}
  .pb__c{padding:16px 18px 18px}
  .tldr,.statline,.prose blockquote.q{padding:18px}
  .prose h2{margin-top:34px}
  .midcta{padding:22px 20px}
  .mcta{padding:26px 22px}
  .btn,.midcta__b,.mcta__btn{width:100%;justify-content:center;padding:16px 22px}
  .bigcta__r,.midcta__a,.mcta__row{flex-direction:column;gap:10px}
  .afaq__i summary{font-size:16px;padding:16px 42px 16px 17px}
  .afaq__i div{padding:0 17px 16px}
  /* the dock sits bottom centre on a phone, so keep the last section clear of it */
  .bfoot{padding-bottom:120px}
}
/* every tap target reaches the 44px minimum */
.bnav__links a,.crumb a,.prose a{min-height:24px}
.btn,.midcta__b,.mcta__btn,.afaq__i summary{min-height:44px}

/* ── mobile accessibility fixes, driven by the 390px audit ──────────────────
   The audit flagged tap targets under 44px and body-ish text under 13px on all
   18 pages. Small uppercase labels are legible on a desktop at 11px and are not
   on a phone held at arm's length. */
@media(max-width:640px){
  .rule{font-size:12.5px}
  .rule__n{font-size:13.5px}
  .st__p span,.st__m span{font-size:13.5px}
  .nbrel__g span,.guides__g span{font-size:13.5px}
  .crumb{font-size:12.5px}
  .article__meta{font-size:13.5px}
  .mcta__fine{font-size:13.5px}
  .midcta__t span{font-size:13.5px}
  .prose blockquote.q cite{font-size:13.5px}
  .statline{font-size:15.5px}
  .bfoot{font-size:13.5px}
  .pb__n{font-size:11.5px;padding:7px 12px}
}
/* Every interactive element clears the 44px minimum, including the FAQ
   accordions on the older blog pages, which use a bare <summary>. */
summary{min-height:44px;display:flex;align-items:center}
.afaq__i summary{display:flex}
a.btn,.btn{min-height:44px}

/* The older blog pages carry an inline <style> block from an earlier script that
   sets .nbrel__g span to 11px. An inline block comes after this file in source
   order, so it wins on equal specificity. A more specific selector wins
   regardless of order, which is why these carry the extra `a`. */
.nbrel__g a span,.guides__g a span{font-size:14px;line-height:1.5}
@media(max-width:640px){
  .rule{font-size:13px}
  .rule span{font-size:13px}
  .nbrel__g a span,.guides__g a span{font-size:13.5px}
}

/* ── the Replit pillar keeps its own rm.css, which loads AFTER this file, so
   these overrides carry an extra `body` to win on specificity rather than order.
   Its own mobile defects: 39px buttons and tabs, and 11 to 12.5px labels. ── */
@media(max-width:640px){
  body .btn,body .btn--lime,body .btn--navy,body .btn--outline,
  body .pb__tab,body .btn--sm{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
  body .rule__n{font-size:13px}
  body .pvnote{font-size:13px}
  body .pcard__u{font-size:13px}
}

/* Site-wide components that only the pillar loads (consent bar, chat toggle,
   nav toggle). Their buttons measured 38 to 43px at 390px, under the 44px
   minimum. Scoped to mobile so desktop layout is untouched. */
@media(max-width:640px){
  body .cookiebar__btn{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center}
  body .chat__toggle,body .nav__toggle{min-height:44px;min-width:44px}
}

/* The pillar's playbook prev/next controls (#pbPrev, #pbNext) measured 43px,
   one pixel under the minimum, and carry no class to target. */
@media(max-width:640px){
  body #pbPrev,body #pbNext{min-height:44px}
}