/* Editorial article layout for magneety.com guides.
   Loads after styles.css + home-layers.css, so it inherits the brand tokens
   and only adds what an article needs.

   Structure borrowed from the blogs that do long-form well - Stripe, Linear,
   Vercel, PostHog: a narrow measure for the prose, a sticky rail carrying the
   table of contents and the offer, a reading-progress bar, and generous space
   between sections so the page breathes instead of stacking boxes. */

/* ── Reading progress ─────────────────────────────────────────────────────── */
.rp {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
  z-index: 200;
  transition: width 0.08s linear;
}

/* ── Article hero ─────────────────────────────────────────────────────────── */
.ah {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border);
  background: var(--bg-warm);
}
.ah__glow {
  position: absolute;
  inset: -55% -20% auto -20%;
  height: 190%;
  z-index: -1;
  filter: blur(80px);
  opacity: 0.42;
  pointer-events: none;
}
.ah__glow i { position: absolute; border-radius: 50%; display: block; mix-blend-mode: multiply }
.ah__glow i:nth-child(1) { width: 40vw; height: 40vw; left: -4%;  top: 10%; background: #cddcff }
.ah__glow i:nth-child(2) { width: 32vw; height: 32vw; right: 2%;  top: 0;   background: #e6d5ff }
.ah__glow i:nth-child(3) { width: 26vw; height: 26vw; left: 44%;  top: 40%; background: #ffdfee }

.ah__inner { max-width: 820px; margin: 0 auto; padding: 26px clamp(16px,4vw,32px) clamp(38px,5vw,56px) }
.ah .crumb { font-size: 0.8rem; color: var(--muted); margin-bottom: 22px }
.ah .crumb a { color: var(--muted); text-decoration: none }
.ah .crumb a:hover { color: var(--navy); text-decoration: underline }
.ah h1 {
  font-family: 'Funnel Display','Inter',sans-serif;
  font-size: clamp(2.05rem, 4.6vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.08;
  color: var(--navy);
  margin: 12px 0 16px;
  text-wrap: balance;
}
.ah__lede { font-size: clamp(1.05rem,1.6vw,1.2rem); color: var(--muted); line-height: 1.6; max-width: 62ch }

/* byline */
.ah__by { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap }
.ah__av {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 0.9rem; flex: 0 0 auto;
  box-shadow: 0 4px 14px rgba(27,89,248,0.28);
}
.ah__who b { display: block; font-size: 0.9rem; color: var(--navy) }
.ah__who span { font-size: 0.8rem; color: var(--muted) }
.ah__facts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }
.ah__facts span {
  font-size: 0.74rem; font-weight: 700; color: var(--muted);
  background: #fff; border: 1px solid var(--border);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}

/* ── Two-column shell ─────────────────────────────────────────────────────── */
.ashell {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(34px,4vw,56px) clamp(16px,4vw,32px) clamp(64px,8vw,104px);
  display: grid;
  grid-template-columns: minmax(0,1fr) 274px;
  gap: clamp(28px,4vw,56px);
  align-items: start;
}
.aprose { min-width: 0; max-width: 70ch }

/* sticky rail */
.arail { position: sticky; top: 88px; display: grid; gap: 14px }
.arail__box {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 18px 20px;
}
.arail__box b.t {
  display: block; font-size: 0.66rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 800;
}
.atoc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.atoc a {
  display: block; font-size: 0.87rem; line-height: 1.4;
  color: var(--muted); text-decoration: none;
  padding: 7px 10px; border-radius: 9px;
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.atoc a:hover { background: var(--bg-warm); color: var(--navy) }
.atoc a.on { background: rgba(27,89,248,0.07); color: var(--blue); border-left-color: var(--blue); font-weight: 700 }

/* rail CTA */
.arail__cta { background: var(--navy); border: 0; color: #cfd9f5 }
.arail__cta b.t { color: #8fb0ff }
.arail__cta p { font-size: 0.86rem; color: #9fb0d8; margin: 0 0 14px; line-height: 1.5 }
.arail__cta a {
  display: block; text-align: center; background: var(--blue); color: #fff;
  text-decoration: none; font-weight: 800; font-size: 0.86rem;
  padding: 11px; border-radius: 11px;
}
.arail__cta small { display: block; text-align: center; margin-top: 9px; font-size: 0.72rem; color: #7286b3 }

@media (max-width: 1000px) {
  .ashell { grid-template-columns: 1fr }
  .arail { position: static; order: -1 }
  .arail__cta { display: none }
  .aprose { max-width: none }
}

/* ── Prose ────────────────────────────────────────────────────────────────── */
.aprose > * { animation: none }
.aprose h2 {
  font-family: 'Funnel Display','Inter',sans-serif;
  font-size: clamp(1.5rem,2.5vw,1.95rem);
  font-weight: 800; letter-spacing: -0.03em; color: var(--navy);
  line-height: 1.16; margin: 56px 0 16px; scroll-margin-top: 92px;
  text-wrap: balance;
}
.aprose h2:first-child { margin-top: 0 }
.aprose h3 { font-size: 1.14rem; font-weight: 800; color: var(--navy); margin: 32px 0 10px; letter-spacing: -0.012em }
.aprose p { margin: 0 0 18px; font-size: 1.045rem; line-height: 1.72; color: #26324a }
.aprose ul, .aprose ol { margin: 0 0 20px; padding-left: 22px }
.aprose li { margin-bottom: 10px; line-height: 1.66; color: #26324a }
.aprose strong { color: var(--navy); font-weight: 700 }
.aprose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(27,89,248,0.32) }
.aprose a:hover { text-decoration-color: var(--blue) }

/* first paragraph gets a little more presence */
.aprose > p:first-of-type { font-size: 1.1rem; color: #1d2942 }

/* ── Key takeaways ────────────────────────────────────────────────────────── */
.kt {
  background: linear-gradient(155deg, #fff, var(--bg-warm));
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: 24px 26px;
  margin: 0 0 40px;
  position: relative;
}
.kt b.t {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px; font-weight: 800;
}
.kt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px }
.kt li { position: relative; padding-left: 27px; font-size: 0.97rem; line-height: 1.55; color: #26324a }
.kt li svg { position: absolute; left: 0; top: 3px; width: 17px; height: 17px; color: var(--green) }

/* ── Callouts ─────────────────────────────────────────────────────────────── */
.cal {
  display: flex; gap: 14px;
  border-radius: 18px; padding: 18px 20px; margin: 28px 0;
  border: 1.5px solid var(--border); background: #fff;
  font-size: 0.97rem; line-height: 1.6; color: #26324a;
}
.cal svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 2px }
.cal b { display: block; color: var(--navy); margin-bottom: 3px }
.cal p:last-child { margin-bottom: 0 }
.cal--warn { background: #fff8ee; border-color: #f3dfbe }
.cal--warn svg { color: #b26a00 }
.cal--tip  { background: #eef7f1; border-color: #bfe3ce }
.cal--tip svg { color: #05815c }
.cal--info { background: #eef2ff; border-color: #d3ddff }
.cal--info svg { color: var(--blue) }

/* ── Pull quote ───────────────────────────────────────────────────────────── */
.pq {
  margin: 40px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--blue);
  font-family: 'Funnel Display','Inter',sans-serif;
  font-size: clamp(1.24rem,2.2vw,1.55rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.34;
  color: var(--navy);
  text-wrap: balance;
}

/* ── Stat strip ───────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 32px 0 }
.stats > div {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 18px; padding: 20px; text-align: center; min-width: 0;
}
.stats b {
  font-family: 'Funnel Display','Inter',sans-serif;
  font-size: clamp(1.7rem,3vw,2.25rem); font-weight: 800;
  color: var(--navy); letter-spacing: -0.035em; display: block; line-height: 1;
}
.stats span { font-size: 0.83rem; color: var(--muted); display: block; margin-top: 8px; line-height: 1.45 }
@media (max-width: 620px) { .stats { grid-template-columns: 1fr } }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.tw { overflow-x: auto; border: 1.5px solid var(--border); border-radius: 18px; margin: 30px 0; background: #fff }
.aprose table { border-collapse: collapse; width: 100%; font-size: 0.94rem; min-width: 460px }
.aprose th {
  background: var(--bg-warm-deep); text-align: left; padding: 13px 17px;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 800; white-space: nowrap;
}
.aprose td { padding: 13px 17px; border-top: 1px solid var(--border); vertical-align: top; color: var(--muted); line-height: 1.55 }
.aprose td:first-child { color: var(--navy); font-weight: 600 }
.aprose tr:hover td { background: rgba(27,89,248,0.022) }
.yes { color: #05815c; font-weight: 700 }
.no  { color: #a8261e; font-weight: 700 }

/* ── Steps ────────────────────────────────────────────────────────────────── */
.steps { list-style: none; counter-reset: st; margin: 26px 0; padding: 0; display: grid; gap: 14px }
.steps li {
  counter-increment: st; position: relative;
  background: #fff; border: 1.5px solid var(--border); border-radius: 18px;
  padding: 18px 20px 18px 62px; margin: 0;
}
.steps li::before {
  content: counter(st);
  position: absolute; left: 18px; top: 17px;
  width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 0.85rem;
}
.steps b { display: block; color: var(--navy); margin-bottom: 4px }

/* ── Inline product offer ─────────────────────────────────────────────────── */
.offer {
  background: var(--navy);
  border-radius: 24px;
  padding: 30px 32px;
  margin: 40px 0;
  color: #cfd9f5;
  position: relative;
  overflow: hidden;
}
.offer::after {
  content: ''; position: absolute; width: 320px; height: 320px;
  right: -110px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,89,248,0.5), transparent 68%);
  pointer-events: none;
}
.offer__k {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8fb0ff; margin-bottom: 11px;
}
.offer__k svg { width: 15px; height: 15px }
.offer h3 { color: #fff; font-size: 1.28rem; margin: 0 0 9px; letter-spacing: -0.025em; font-family: 'Funnel Display','Inter',sans-serif }
.offer p { color: #9fb0d8; font-size: 0.97rem; margin: 0 0 18px; max-width: 52ch; line-height: 1.6 }
.offer .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; position: relative }
.offer a.btn {
  background: var(--blue); color: #fff; text-decoration: none;
  font-weight: 800; padding: 12px 24px; border-radius: 12px; font-size: 0.93rem;
  display: inline-block; transition: transform 0.15s, box-shadow 0.15s;
}
.offer a.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(27,89,248,0.4) }
.offer a.ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.32); color: #fff; font-weight: 700 }
.offer small { display: block; margin-top: 13px; color: #7286b3; font-size: 0.78rem; position: relative }

/* ── Pain -> solution pairs ───────────────────────────────────────────────── */
.pains { display: grid; gap: 12px; margin: 28px 0 }
.pain {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  background: #fff; border: 1.5px solid var(--border); border-radius: 18px; padding: 18px 20px;
}
.pain__p { color: var(--muted); font-size: 0.95rem; line-height: 1.5 }
.pain__p b { display: block; color: #a8261e; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 4px }
.pain__s { color: #26324a; font-size: 0.95rem; line-height: 1.5 }
.pain__s b { display: block; color: #05815c; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 4px }
.pain__arrow { color: var(--blue); flex: 0 0 auto }
.pain__arrow svg { width: 20px; height: 20px; display: block }
@media (max-width: 640px) {
  .pain { grid-template-columns: 1fr; gap: 10px }
  .pain__arrow { transform: rotate(90deg); justify-self: start }
}

/* ── Feature link cards ───────────────────────────────────────────────────── */
.feats { display: grid; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); gap: 13px; margin: 28px 0 }
.feats a {
  background: #fff; border: 1.5px solid var(--border); border-radius: 18px;
  padding: 18px 20px; text-decoration: none; display: block;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.feats a:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(13,22,48,0.08) }
.feats svg { width: 19px; height: 19px; color: var(--blue); margin-bottom: 9px; display: block }
.feats b { display: block; color: var(--navy); font-size: 0.96rem; margin-bottom: 4px }
.feats span { color: var(--muted); font-size: 0.855rem; line-height: 1.5 }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.afaq { display: grid; gap: 10px; margin: 22px 0 }
.afaq details {
  background: #fff; border: 1.5px solid var(--border); border-radius: 16px;
  padding: 16px 20px; transition: border-color 0.18s;
}
.afaq details[open] { border-color: rgba(27,89,248,0.42) }
.afaq summary {
  font-weight: 700; color: var(--navy); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  font-size: 1rem;
}
.afaq summary::-webkit-details-marker { display: none }
.afaq summary::after {
  content: ''; width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform 0.2s;
}
.afaq details[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px) }
.afaq p { margin: 13px 0 0; color: var(--muted); font-size: 0.96rem; line-height: 1.65 }

/* ── Author card ──────────────────────────────────────────────────────────── */
.author {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--bg-warm); border: 1.5px solid var(--border);
  border-radius: 22px; padding: 24px 26px; margin: 48px 0 0;
}
.author__av {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.author b { display: block; color: var(--navy); font-size: 1rem }
.author span.r { font-size: 0.83rem; color: var(--muted); display: block; margin-bottom: 9px }
.author p { font-size: 0.92rem; color: var(--muted); margin: 0; line-height: 1.6 }

/* ── Related ──────────────────────────────────────────────────────────────── */
.related { margin: 52px 0 0 }
.related > b.t {
  display: block; font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; font-weight: 800;
}

/* ── Closing CTA ──────────────────────────────────────────────────────────── */
.aend {
  background: var(--navy); color: #cfd9f5;
  border-radius: 28px; padding: clamp(34px,5vw,52px) 32px;
  text-align: center; margin: 56px 0 0; position: relative; overflow: hidden;
}
.aend::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% -10%, rgba(27,89,248,0.42), transparent 62%);
  pointer-events: none;
}
.aend h2 {
  font-family: 'Funnel Display','Inter',sans-serif; color: #fff;
  font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 800; letter-spacing: -0.032em;
  margin: 0 0 12px; position: relative; text-wrap: balance;
}
.aend p { color: #9fb0d8; max-width: 50ch; margin: 0 auto; font-size: 1rem; position: relative; line-height: 1.6 }
.aend a.btn {
  display: inline-block; margin-top: 22px; background: var(--blue); color: #fff;
  text-decoration: none; font-weight: 800; padding: 15px 32px; border-radius: 14px;
  position: relative; transition: transform 0.15s, box-shadow 0.15s;
}
.aend a.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(27,89,248,0.45) }
.aend small { display: block; margin-top: 14px; color: #7286b3; font-size: 0.82rem; position: relative }
.aend small a { color: #9fb0d8 }

/* ── Scroll reveal ────────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease }
.rv.in { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none }
  .rp { transition: none }
  .ah__glow { animation: none }
}

/* ── Tech-flavoured accents ───────────────────────────────────────────────────
   Adapted from the patterns 21st.dev popularised (spotlight cards, animated
   gradient borders, dot-grid backdrops, shimmer text). Rebuilt in plain CSS -
   those components ship as React + Tailwind and this site is static. */

/* dot grid behind the hero, masked so it fades out */
.ah__dots {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(13,22,48,0.13) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 32%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 32%, #000, transparent 72%);
}

/* shimmer sweep across a headline span */
.shine {
  background: linear-gradient(100deg, var(--navy) 30%, var(--blue) 48%, var(--purple) 56%, var(--navy) 74%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shine 5.5s linear infinite;
}
@keyframes shine { from { background-position: 180% 0 } to { background-position: -80% 0 } }

/* spotlight follows the cursor across a card group */
.spot { position: relative; overflow: hidden }
.spot::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.25s;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(27,89,248,0.11), transparent 42%);
}
.spot:hover::before { opacity: 1 }

/* animated gradient border - one conic sweep behind a 1.5px inset */
.gborder { position: relative; border-radius: 24px; padding: 1.5px; overflow: hidden; margin: 40px 0 }
.gborder::before {
  content: ''; position: absolute; inset: -140%;
  background: conic-gradient(from 0deg, transparent 62%, var(--blue), var(--purple), var(--pink), transparent);
  animation: gspin 7s linear infinite;
}
.gborder > * { position: relative; border-radius: 22.5px; margin: 0 }
@keyframes gspin { to { transform: rotate(1turn) } }

/* terminal-ish snippet block for showing a real number or command */
.snip {
  background: #0d1220; border: 1px solid #1c2740; border-radius: 16px;
  padding: 18px 20px; margin: 26px 0; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.87rem; line-height: 1.7; color: #cfd9f5;
}
.snip .c { color: #6d7a99 }
.snip .g { color: #4ecb8f }
.snip .b { color: #7eb0ff }

@media (prefers-reduced-motion: reduce) {
  .shine { animation: none; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--navy) }
  .gborder::before { animation: none }
}

/* ── Components the existing article bodies already use ──────────────────────
   Carried over so content written against the previous template keeps working
   when the page moves to the site-wide stylesheet stack. */
.aprose .card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 20px;
  padding: 22px 24px; margin: 26px 0;
}
.aprose .card h3 { margin-top: 0 }
.aprose .card ul { list-style: none; margin: 0; padding: 0 }
.aprose .card li { padding-left: 26px; position: relative; color: var(--muted); font-size: 0.96rem }
.aprose .card li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 800 }

.aprose .note {
  font-size: 0.95rem; color: var(--muted);
  background: var(--bg-warm); border: 1.5px solid var(--border);
  border-left: 3px solid var(--blue); border-radius: 16px;
  padding: 17px 20px; margin: 26px 0; line-height: 1.62;
}
.aprose .note b { color: var(--navy) }

.aprose .proof {
  background: #fff; border: 1.5px solid var(--border); border-left: 3px solid var(--green);
  border-radius: 18px; padding: 22px 24px; margin: 28px 0;
}
.aprose .proof .big {
  font-family: 'Funnel Display','Inter',sans-serif; font-size: 1.85rem; font-weight: 800;
  color: var(--navy); letter-spacing: -0.03em; display: block; line-height: 1.1; margin-bottom: 6px;
}
.aprose .proof .lbl { font-size: 0.9rem; color: var(--muted); line-height: 1.55 }

.aprose .chip {
  font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-warm); border: 1px solid var(--border); color: var(--navy);
}

/* calculators */
.aprose .calc {
  background: #fff; border: 1.5px solid var(--border); border-radius: 22px;
  padding: 26px 28px; margin: 28px 0;
}
.aprose .calc label { display: block; font-size: 0.88rem; font-weight: 700; color: var(--navy); margin: 18px 0 7px }
.aprose .calc label:first-child { margin-top: 0 }
.aprose .calc input {
  width: 100%; max-width: 320px; font: inherit; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-warm);
  transition: border-color 0.16s, background 0.16s;
}
.aprose .calc input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(27,89,248,0.1) }
.aprose .calc .result {
  margin-top: 22px; padding: 20px; border-radius: 18px;
  background: var(--bg-warm-deep); border: 1px solid var(--border);
  font-size: 1rem; color: var(--muted);
}
.aprose .calc .result b {
  font-family: 'Funnel Display','Inter',sans-serif; font-size: 1.9rem;
  color: var(--navy); letter-spacing: -0.03em;
}
.aprose .calc .result .note {
  display: block; margin: 10px 0 0; background: none; border: none;
  padding: 0; font-size: 0.9rem;
}

/* Every icon slot gets an explicit size. The takeaways spark shipped once at
   natural size - a 400px blue star - because its label had no rule, so these
   are declared per context rather than relied on from a shared default. */
.kt b.t svg,
.arail__box b.t svg,
.related > b.t svg { width: 15px; height: 15px; flex: 0 0 auto }
.aprose svg { max-width: 100%; vertical-align: middle }