/* ─────────────────────────────────────────────────────────────────────────
   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}

/* ── 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}}

/* ── 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}
}

/* ═══════════ CALLS TO ACTION, in the signature grammar ═══════════
   The main site earns authority through typography, whitespace and a single
   hairline, not through filled boxes with three coloured buttons stacked in
   them. One solid action per block, everything else quiet. Micro-labels match
   the form labels on the homepage: 12px, 700, .12em, uppercase. */

/* inline band between sections */
.ncta{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin:46px 0;padding:26px 0 0;border-top:1px solid var(--ink);
  border-image:linear-gradient(90deg,var(--ink) 0 42%,var(--line) 42% 100%) 1}
.ncta__l{flex:1 1 320px}
.ncta__tag{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.ncta__h{font:800 clamp(21px,2.9vw,27px)/1.18 inherit;letter-spacing:-.028em;color:var(--ink);
  margin:0 0 6px;max-width:22ch}
.ncta__s{color:var(--muted);font-size:15.5px;margin:0;max-width:46ch}
.ncta__r{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ncta__alt{color:var(--blue);font-weight:700;font-size:14.5px;text-decoration:none;
  border-bottom:1.5px solid rgba(52,49,165,.3);cursor:pointer;transition:border-color .18s}
.ncta__alt:hover{border-bottom-color:var(--blue)}

/* the primary ask after the playbook */
.hcta{margin:0 0 52px;padding:clamp(34px,5vw,58px);border-radius:20px;color:#fff;
  background:var(--navy);position:relative;overflow:hidden}
.hcta::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(52,49,165,.55) 0%,transparent 68%);
  pointer-events:none}
.hcta>*{position:relative;z-index:1}
.hcta .tag{color:var(--lime)}
.hcta__h{font:900 clamp(28px,4.4vw,50px)/1.04 inherit;letter-spacing:-.035em;color:#fff;
  margin:0 0 14px}
.hcta__p{color:rgba(255,255,255,.7);font-size:17px;line-height:1.5;max-width:52ch;margin:0 0 30px}
.hcta__r{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hcta__alt{color:var(--lime);font-weight:700;font-size:14.5px;text-decoration:none;
  border-bottom:1.5px solid rgba(245,255,171,.34);cursor:pointer;transition:border-color .18s}
.hcta__alt:hover{border-bottom-color:var(--lime)}
.hcta__meta{display:flex;gap:32px;flex-wrap:wrap;margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16)}
.hcta__meta span{color:rgba(255,255,255,.55);font-size:13.5px;letter-spacing:.01em}
.hcta__meta b{display:block;color:#fff;font-weight:800;font-size:19px;letter-spacing:-.02em;
  margin-bottom:2px}

/* end of article */
.fcta{margin:52px 0 10px;padding:clamp(30px,4.4vw,50px) 0 0;border-top:2px solid var(--ink)}
.fcta .tag{color:var(--blue)}
.fcta__h{font:900 clamp(25px,3.8vw,40px)/1.08 inherit;letter-spacing:-.032em;color:var(--ink);
  margin:0 0 12px;max-width:20ch}
.fcta__p{color:var(--body);font-size:17px;line-height:1.55;max-width:54ch;margin:0 0 28px}
.fcta__r{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fcta__alt{color:var(--blue);font-weight:700;font-size:14.5px;text-decoration:none;
  border-bottom:1.5px solid rgba(52,49,165,.3);cursor:pointer;transition:border-color .18s}
.fcta__alt:hover{border-bottom-color:var(--blue)}
.fcta__fine{margin:24px 0 0;color:var(--muted);font-size:14px;max-width:52ch}

@media(max-width:640px){
  .ncta{flex-direction:column;align-items:stretch;gap:20px}
  .ncta__r,.hcta__r,.fcta__r{flex-direction:column;align-items:stretch;gap:16px}
  .ncta__r .btn,.hcta__r .btn,.fcta__r .btn{width:100%}
  .ncta__alt,.hcta__alt,.fcta__alt{text-align:center;border-bottom:none;
    min-height:44px;display:flex;align-items:center;justify-content:center}
  .hcta__meta{gap:18px;margin-top:26px}
  .hcta{padding:28px 22px}
}