/* ==========================================================================
   The Lead Gen Company - Guides layer
   Loads AFTER css/leadhq-lab.css. Adds two things:
     1. Dark-shell extras for guide heroes (breadcrumb box, byline, progress)
     2. The light "paper" content box that sits under the H1 and form
   Nothing here restyles the header, hero, console or footer. Those stay dark.
   ========================================================================== */

/* ---------- sticky enablement ----------
   leadhq-lab.css sets body{overflow-x:hidden}, which makes the body a scroll
   container and stops position:sticky working. clip does the same job without
   creating a scroll container, so the contents rail can stick. */
html, body { overflow-x: clip; }

/* ---------- reading progress ---------- */
.readbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--lime); box-shadow: var(--glow-sm);
  z-index: 99; transition: width .1s linear;
}

/* ---------- breadcrumb, boxed so it never fights the grid ---------- */
.crumbbox {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .02em;
  color: var(--ink-3);
  background: rgba(10,16,32,.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.crumbbox a { color: var(--ink-3); }
.crumbbox a:hover { color: var(--lime); }
.crumbbox i { font-style: normal; opacity: .45; padding: 0 7px; }
.crumbbox span[aria-current] { color: var(--ink-2); }

/* eyebrow without the // prefix */
.label--plain::before { content: none; }

/* ---------- author byline on dark ---------- */
.byline {
  display: flex; align-items: center; gap: 14px;
  padding-top: 20px; margin-top: 4px;
  border-top: 1px solid var(--line);
}
.byline__pic {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--lime); color: #08120a;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: .88rem;
  box-shadow: var(--glow-sm);
}
.byline__who { font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.byline__who a { color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--lime-dim); }
.byline__who a:hover { color: var(--lime); border-bottom-color: var(--lime); }
.byline__meta {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .02em;
  color: var(--ink-3); margin-top: 4px;
}
.byline__meta em { font-style: normal; color: var(--lime); }

/* ---------- quote console: heading lives inside the panel ---------- */
.console--quote { position: relative; }
.console--quote::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(184,255,58,.10);
}
.console__intro {
  position: relative;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(184,255,58,.07), rgba(184,255,58,0) 78%);
}
.console__intro::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 2px;
  background: linear-gradient(180deg, var(--lime), transparent);
  opacity: .75;
}
.console__intro h2 {
  font-size: 1.22rem; line-height: 1.2; letter-spacing: -.022em; margin: 0 0 8px;
}
.console__intro p { font-size: .92rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
.console--quote .console__intro .console__assure { margin: 16px 0 0; gap: 7px 16px; }
.console--quote .console__body { padding-top: 24px; }
@media (max-width: 520px) {
  .console__intro { padding: 20px 20px 18px; }
  .console__intro h2 { font-size: 1.1rem; }
}

.hero--guide { padding: 54px 0 30px; }
.hero--guide .hero__sub { margin-bottom: 26px; }

/* ==========================================================================
   THE PAPER BOX
   Light content area on the dark page. Faint square grid, no ruled lines.
   Design tokens are re-declared here so every child inherits the light theme.
   ========================================================================== */
.paper-section { padding: 0 0 90px; position: relative; z-index: 1; }

.paper {
  /* light-theme token overrides, inherited by everything inside */
  --ink:      #101a2e;
  --ink-2:    #3f4d66;
  --ink-3:    #78859c;
  --line:     #e3e7ee;
  --line-2:   #ccd3e0;
  --panel:    #ffffff;
  --panel-2:  #fbfbf7;
  --paper-bg: #fcfbf7;
  --accent:   #4d7a05;
  --accent-soft: #f3ffdd;
  --link:     #2a5fb5;
  --warn:     #b8562c;
  --bad:      #c0392b;

  position: relative;
  isolation: isolate;
  background: var(--paper-bg);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(184,255,58,.08);
  color: var(--ink);
}
/* the faint squares, same 44px module as the site grid */
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(16,26,46,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,26,46,.038) 1px, transparent 1px);
  background-size: 44px 44px;
}
.paper__inner { position: relative; z-index: 1; padding: 54px 46px 60px; }
@media (max-width: 900px) { .paper__inner { padding: 34px 24px 40px; } .paper { border-radius: 16px; } }
@media (max-width: 520px) { .paper__inner { padding: 26px 18px 34px; } }

/* ---------- base type inside the paper ---------- */
.paper p { margin: 0 0 1.1em; color: var(--ink-2); font-size: 1.02rem; line-height: 1.68; }
.paper strong { color: var(--ink); font-weight: 600; }
.paper a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(42,95,181,.3); }
.paper a:hover { color: #1c4a92; border-bottom-color: var(--link); }
.paper h2, .paper h3, .paper h4 { color: var(--ink); line-height: 1.12; }
.paper h4 { font-size: 1.04rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.paper ul, .paper ol { padding-left: 22px; color: var(--ink-2); margin: 0 0 1.15em; }
.paper li { margin-bottom: 9px; line-height: 1.62; }
.paper li::marker { color: var(--accent); }
.paper :focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; border-radius: 3px; }

.paper .hl { color: var(--accent); }
.mark { background: linear-gradient(180deg, transparent 54%, #d5ff85 54%, #d5ff85 92%, transparent 92%); padding: 0 .06em; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- article grid + contents rail ---------- */
.article { display: grid; grid-template-columns: 198px minmax(0,1fr); gap: 42px; align-items: start; }
.article > * { min-width: 0; }
@media (max-width: 1040px) { .article { grid-template-columns: minmax(0,1fr); gap: 0; } }

.article__body { position: relative; min-width: 0; max-width: 100%; }
.article__body > h2 { margin: 54px 0 16px; scroll-margin-top: 92px; font-size: clamp(1.55rem,1.1rem + 1.7vw,2.25rem); letter-spacing: -.025em; }
.article__body > h2:first-of-type { margin-top: 0; }
.article__body > h3 { margin: 34px 0 12px; scroll-margin-top: 92px; font-size: clamp(1.15rem,1rem + .6vw,1.42rem); }

.h2num {
  display: block; margin-bottom: 9px;
  font-family: var(--mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}

.toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; }
.toc::-webkit-scrollbar { width: 4px; }
.toc::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
@media (max-width: 1040px) {
  .toc { position: static; margin-bottom: 32px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; }
}
.toc__ttl { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin: 0 0 2px; }
.toc a { display: block; position: relative; padding: 6px 8px 6px 30px; border-radius: 7px; font-size: .86rem; line-height: 1.4; color: var(--ink-2); border-bottom: 0; }
.toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 8px; top: 7px; font-family: var(--mono); font-size: .64rem; color: var(--ink-3); }
.toc a:hover { background: #f1f3ec; color: var(--ink); }
.toc a.is-current { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.toc a.is-current::before { color: var(--accent); }

/* ---------- share row ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 32px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.share__lbl { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.share a, .share button {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel); color: var(--ink-2); cursor: pointer;
}
.share a:hover, .share button:hover { border-color: var(--ink); color: var(--ink); }
.share svg { width: 14px; height: 14px; }

/* ---------- highlight boxes ---------- */
.answerbox { background: var(--accent-soft); border: 1px solid #b6da79; border-left: 5px solid var(--accent); border-radius: 12px; padding: 22px 26px; margin: 0 0 28px; }
.answerbox p:last-child { margin-bottom: 0; }
.answerbox .kicker { display: block; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }

.keybox { background: var(--panel); border: 1.5px solid var(--ink); border-radius: 14px; padding: 26px 28px; margin: 0 0 34px; box-shadow: 5px 5px 0 rgba(16,26,46,.09); }
.keybox__ttl { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.keybox__ttl h2 { font-size: 1.26rem; margin: 0; }
.keybox ol { list-style: none; margin: 0; padding: 0; counter-reset: k; }
.keybox ol li { counter-increment: k; position: relative; padding-left: 38px; margin-bottom: 13px; font-size: .99rem; }
.keybox ol li:last-child { margin-bottom: 0; }
.keybox ol li::before {
  content: counter(k); position: absolute; left: 0; top: 1px;
  width: 25px; height: 25px; border-radius: 6px; background: var(--ink); color: var(--lime);
  display: grid; place-items: center; font-family: var(--mono); font-size: .74rem; font-weight: 700;
}

.notebox { background: var(--panel); border: 1px solid var(--line-2); border-left: 4px solid var(--orange); border-radius: 10px; padding: 18px 22px; margin: 26px 0; }
.notebox p:last-child, .notebox ol:last-child, .notebox ul:last-child { margin-bottom: 0; }
.notebox h4 { margin-bottom: 8px; }
.notebox--flag { border-left-color: var(--bad); background: #fff8f7; }
.notebox--new { border-left-color: var(--accent); background: #fbffef; }
.formula { font-family: var(--mono); font-size: .95rem; color: var(--ink); background: #f7f9f1; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line-2); }

.callout-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px,1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; margin: 28px 0; }
.callout-stat > div { background: var(--panel); padding: 20px 18px; }
.callout-stat .n { font-family: var(--mono); font-weight: 700; font-size: 1.55rem; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.callout-stat .n em { font-style: normal; color: var(--accent); }
.callout-stat .c { font-size: .78rem; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 26px 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); -webkit-overflow-scrolling: touch; }
.paper table { border-collapse: collapse; width: 100%; min-width: 660px; font-size: .87rem; line-height: 1.5; }
.paper thead th {
  text-align: left; padding: 11px 13px; background: #f2f4ec; border-bottom: 1.5px solid var(--line-2);
  font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700; white-space: nowrap;
}
.paper tbody td { padding: 11px 13px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.paper tbody tr:last-child td { border-bottom: 0; }
.paper tbody tr:hover { background: #fbfcf7; }
.paper tbody td:first-child { color: var(--ink); font-weight: 600; }
.num { font-family: var(--mono); white-space: nowrap; }
.tbl-score { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.tbl-note { display: block; font-size: .77rem; color: var(--ink-3); font-weight: 400; margin-top: 3px; }
.row-own { background: var(--accent-soft) !important; }
.tag-own { display: inline-block; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--lime); padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }

/* ---------- specimen scorecards ---------- */
.spec { background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; margin: 0 0 26px; overflow: hidden; box-shadow: 0 12px 30px -22px rgba(16,26,46,.5); }
.spec__head { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; padding: 22px 24px 18px; border-bottom: 1px dashed var(--line-2); background: #fbfbf5; }
.spec__rank { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.spec__head h3 { margin: 0 0 6px; font-size: 1.42rem; }
.spec__best { margin: 0; font-size: .92rem; font-weight: 600; color: var(--accent); }
.spec__score { text-align: center; flex: none; }
.spec__score .val { display: block; font-family: var(--mono); font-weight: 700; font-size: 2.05rem; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.spec__score .val sub { font-size: .82rem; font-weight: 400; color: var(--ink-3); vertical-align: baseline; }
.spec__score .lbl { display: block; margin-top: 5px; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.spec__body { padding: 22px 24px 24px; }
.spec__body p { font-size: .97rem; }
.spec__body p:last-child { margin-bottom: 0; }
.spec__note { font-size: .89rem; color: var(--ink-3); border-bottom: 1px dashed var(--line-2); padding-bottom: 14px; }

.spec__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0 0 22px; }
.spec__meta > div { background: #fbfbf5; padding: 13px 15px; }
.spec__meta dt { font-family: var(--mono); font-size: .61rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.spec__meta dd { margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.4; }

.bars { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 26px; margin: 0 0 22px; }
@media (max-width: 640px) { .bars { grid-template-columns: 1fr; } }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.bar__k { font-family: var(--mono); font-size: .71rem; letter-spacing: .03em; color: var(--ink-3); }
.bar__v { font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--ink); }
.bar__t { grid-column: 1 / -1; height: 6px; background: #eceff4; border-radius: 999px; overflow: hidden; }
.bar__f { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.bar__f.mid { background: var(--orange); }
.bar__f.low { background: #d16a5f; }

.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 20px; }
@media (max-width: 640px) { .pc { grid-template-columns: 1fr; } }
.pc h4 { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.pc--pro h4 { color: var(--accent); }
.pc--con h4 { color: var(--warn); }
.pc ul { list-style: none; margin: 0; padding: 0; }
.pc li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: .89rem; line-height: 1.5; }
.pc li::before { position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 700; }
.pc--pro li::before { content: "+"; color: var(--accent); }
.pc--con li::before { content: "-"; color: var(--warn); }

.spec--own { border: 2px solid var(--ink); }
.spec--own .spec__head { background: var(--accent-soft); }

/* ---------- FAQ ----------
   leadhq-lab.css already renders each item as a bordered card with its own
   padding. Only re-colour for the light box and keep the gutters intact. */
.faq details { border-color: var(--line-2); background: var(--panel); }
.faq details[open] { border-color: #b6da79; background: var(--panel); }
.faq summary { padding: 18px 24px; font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { color: var(--accent); }
.faq details > div { padding: 0 24px 22px; }
.faq details p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .faq summary { padding: 16px 18px; font-size: .97rem; gap: 12px; }
  .faq details > div { padding: 0 18px 18px; }
}

/* ---------- in-article CTA, deliberately dark for contrast ---------- */
.ctastrip { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: #0b1122; border-radius: 14px; padding: 32px 34px; margin: 44px 0; }
@media (max-width: 760px) { .ctastrip { grid-template-columns: 1fr; padding: 26px 22px; } }
.ctastrip h3 { color: #fff; margin: 0 0 8px; }
.ctastrip p { color: #a9b6cd; margin: 0; font-size: .95rem; max-width: 52ch; }
.ctastrip .btn { white-space: nowrap; }

/* ---------- method + sources ---------- */
.method { background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 26px 28px; margin: 32px 0; }
.method h3 { margin: 0 0 12px; }
.srclist { list-style: none; padding: 0; margin: 0; column-count: 2; column-gap: 34px; }
@media (max-width: 760px) { .srclist { column-count: 1; } }
.srclist li { font-size: .83rem; color: var(--ink-3); margin-bottom: 7px; break-inside: avoid; }

.paper .byline { border-top: 1px solid var(--line-2); }
.paper .byline__pic { background: var(--ink); color: var(--lime); box-shadow: none; }
.paper .byline__who { color: var(--ink-2); }
.paper .byline__who a { color: var(--ink); border-bottom: 2px solid #d5ff85; }
.paper .byline__who a:hover { color: var(--ink); border-bottom-color: var(--orange); }
.paper .byline__meta { color: var(--ink-3); }
.paper .byline__meta em { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .readbar { transition: none; }
}

/* guide H1 sits a step below the homepage headline */
.hero--guide h1 { font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.55rem); line-height: 1.04; }

/* header CTA must stay on one line once the nav links drop away */
@media (max-width: 560px) {
  .lab-header .btn--go { font-size: .78rem; padding: 10px 13px; white-space: nowrap; }
  .lab-header .brand { font-size: 1.1rem; }
  .lab-header .brand svg { width: 21px; height: 21px; }
  .crumbbox { font-size: .68rem; padding: 6px 12px; }
}


/* ==========================================================================
   GUIDES INDEX
   Additive only - every selector below is new, nothing above is modified.
   ========================================================================== */
.hero--index { padding: 56px 0 28px; text-align: center; }
.hero--index h1 { font-size: clamp(2.2rem, 1.35rem + 2.8vw, 3.5rem); max-width: 17ch; margin: 18px auto 20px; }
.hero--index .crumbbox { display: flex; width: fit-content; margin: 0 auto 20px; }
.hero--index .hero__eyebrow { display: flex; justify-content: center; }
.guides-lede { font-size: 1.12rem; color: var(--ink-2); max-width: 58ch; margin: 0 auto; }

.guides-sec { margin: 0 0 46px; }
.guides-sec:last-child { margin-bottom: 0; }
.guides-sec__head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 20px; }
.guides-sec__head h2 { font-size: 1.35rem; letter-spacing: -.02em; margin: 0; }
.guides-sec__head span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

.guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
@media (max-width: 700px) { .guides-grid { grid-template-columns: 1fr; gap: 18px; } }

.gcard {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  overflow: hidden; text-decoration: none; border-bottom: 1px solid var(--line-2);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gcard:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 34px -22px rgba(16,26,46,.55); text-decoration: none; }
.gcard:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; }

.gcard__art {
  position: relative; display: block; background: #f6f8f0;
  border-bottom: 1px solid var(--line-2); padding: 0; line-height: 0;
}
.gcard__art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(16,26,46,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,26,46,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.gcard__art svg { position: relative; width: 100%; height: auto; display: block; }

.gcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.gcard__tag {
  font-family: var(--mono); font-size: .63rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 9px;
}
.gcard__title {
  font-family: var(--sans); font-weight: 700; font-size: 1.16rem; line-height: 1.25;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 9px;
}
.gcard:hover .gcard__title { color: var(--link); }
.gcard__desc { font-size: .93rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; flex: 1; }
.gcard__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-family: var(--mono); font-size: .69rem; letter-spacing: .02em; color: var(--ink-3);
  border-top: 1px dashed var(--line-2); padding-top: 13px;
}
.gcard__meta em { font-style: normal; color: var(--accent); }
.gcard__meta .go { margin-left: auto; color: var(--ink); font-weight: 700; }
.gcard:hover .gcard__meta .go { color: var(--accent); }
@media (max-width: 420px) { .gcard__meta .go { margin-left: 0; } }


/* ==========================================================================
   INTERACTIVE CALCULATORS + SCOPE PILLS
   Additive only. Every selector below is new, nothing above is modified.
   Lives here rather than in leadhq-asset.css so standard guide pages can
   use calculators without loading the asset layer.
   Uses the light .paper theme tokens, so it inherits correctly inside an
   article body.
   ========================================================================== */

.calc { border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); overflow: hidden; margin: 28px 0; }
.calc__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; background: #f2f4ec; border-bottom: 1px solid var(--line-2); }
.calc__head h3 { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.calc__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); }
@media (max-width: 820px) { .calc__grid { grid-template-columns: 1fr; } }
.calc__in { padding: 20px 22px; border-right: 1px solid var(--line-2); }
@media (max-width: 820px) { .calc__in { border-right: 0; border-bottom: 1px solid var(--line-2); } }
.calc__out { padding: 20px 22px; background: #fff; }

.calcf { margin: 0 0 15px; }
.calcf:last-child { margin-bottom: 0; }
.calcf label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); margin: 0 0 5px; }
.calcf .hint { display: block; font-size: .74rem; line-height: 1.45; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.calcf__row { display: flex; align-items: center; gap: 9px; }
.calcf__pre { font-family: var(--mono); font-size: .88rem; color: var(--ink-3); flex: 0 0 auto; }
.calcf input[type="number"] { flex: 1 1 auto; min-width: 0; width: 100%; font: inherit; font-size: .94rem; font-family: var(--mono); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 11px; transition: border-color .15s, box-shadow .15s; }
.calcf input[type="number"]:focus { outline: none; border-color: var(--lime, #b8ff3a); box-shadow: 0 0 0 3px rgba(184,255,58,.25); }
.calcf input[type="range"] { width: 100%; margin: 7px 0 0; accent-color: var(--accent); }

.calcout { border-bottom: 1px dashed var(--line); padding: 9px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.calcout:last-of-type { border-bottom: 0; }
.calcout__k { font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.calcout__v { font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.calcout--hero { background: #f2f4ec; border: 1px solid #dfe6d3; border-radius: 11px; padding: 13px 15px; margin: 0 0 14px; border-bottom: 0; }
.calcout--hero .calcout__k { font-weight: 600; color: var(--ink); }
.calcout--hero .calcout__v { font-size: 1.45rem; color: var(--accent); }

.calcverdict { margin: 15px 0 0; border-radius: 11px; padding: 13px 15px; font-size: .88rem; line-height: 1.6; border: 1px solid; }
.calcverdict strong { display: block; font-size: .93rem; margin-bottom: 4px; }
.calcverdict--ok { background: var(--accent-soft); border-color: #b6da79; color: #2f4d05; }
.calcverdict--warn { background: #fff8e6; border-color: #f0dfae; color: #6b5310; }
.calcverdict--bad { background: #fdefee; border-color: #f2cdc9; color: #7d2f27; }

.calcflags { margin: 11px 0 0; padding: 0; list-style: none; }
.calcflags li { font-size: .82rem; line-height: 1.55; color: var(--ink-2); padding: 5px 0 5px 20px; position: relative; }
.calcflags li::before { content: "!"; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 4px; background: #f0dfae; color: #6b5310; font-size: .62rem; font-weight: 700; display: grid; place-items: center; }
.calcnote { margin: 14px 0 0; font-size: .76rem; line-height: 1.55; color: var(--ink-3); }
.calcreset { appearance: none; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-size: .78rem; font-weight: 600; padding: 6px 13px; border-radius: 7px; cursor: pointer; }
.calcreset:hover { background: #f2f4ec; border-color: var(--accent); }

/* multi-row comparison calculator */
.calctable { width: 100%; border-collapse: collapse; font-size: .84rem; }
.paper .calctable { min-width: 0; }
.calctable th { background: var(--ink); color: #fff; font-family: var(--mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; padding: 9px 6px; text-align: left; white-space: nowrap; vertical-align: bottom; }
.calctable th.n { text-align: right; }
.calctable td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.calctable tbody tr:hover td { background: var(--panel); }
.calctable input { width: 100%; min-width: 0; font: inherit; font-size: .84rem; font-family: var(--mono); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 8px; text-align: right; }
.calctable input.name { text-align: left; font-family: var(--sans); min-width: 96px; }
.calctable input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.calctable input[type="number"]::-webkit-outer-spin-button,
.calctable input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calctable input:focus { outline: none; border-color: var(--lime, #b8ff3a); box-shadow: 0 0 0 3px rgba(184,255,58,.22); }
.calctable td:first-child { min-width: 108px; }
.calctable td:nth-child(2) { min-width: 82px; }
.calctable td:nth-child(n+3):nth-child(-n+5) { min-width: 70px; }
.calctable td.out { min-width: 72px; font-family: var(--mono); font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; padding-right: 10px; }
.calctable td.out.dim { color: var(--ink-3); font-weight: 400; }
.calctable tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; padding: 11px 6px; font-weight: 700; background: #f2f4ec; }
.calctable tfoot td.out { color: var(--accent); }
.calctable .best { position: relative; padding-left: 40px; }
.calctable .best::after { content: "BEST"; position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font-family: var(--mono); font-size: .52rem; letter-spacing: .08em; font-weight: 700; color: #3f6604; background: var(--accent-soft); border: 1px solid #cfe89a; border-radius: 4px; padding: 1px 4px; pointer-events: none; }
@media (max-width: 760px) { .calctable { min-width: 700px; } .calctable .best { padding-left: 6px; } .calctable .best::after { display: none; } }

/* scope pills for UK vs global figures in tables */
.scope { display: inline-block; font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.scope--uk { background: var(--accent-soft); color: #3f6604; border: 1px solid #cfe89a; }
.scope--other { background: #eef1f6; color: #5a6579; border: 1px solid #dbe0ea; }