/* ===========================================================================
   Prospecting OS - Chirag Shah Coaching
   Direction A: ink and emerald. Locked 2026-07-25.
   Tokens must match prospecting-os_spec.md and the X-Ray design block in the
   starter zip. Do not introduce a colour that is not declared here.
   =========================================================================== */

/* Variable fonts, subset to Latin + the punctuation this site uses.
   1.3MB of source TTF down to 283KB. Both are SIL Open Font License.
   Georgia and Arial sit behind them, so nothing breaks if a file is missing. */
@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader.woff') format('woff');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter.woff') format('woff');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --ink:#1C3530;
  --ink-80:rgba(28,53,48,.82);
  --ink-60:rgba(28,53,48,.60);
  --ink-40:rgba(28,53,48,.40);
  --ink-12:rgba(28,53,48,.12);
  --emerald:#25CC89;
  --emerald-deep:#1FA772;   /* fills and hovers only, 2.61:1 on cream: never for text */
  --emerald-text:#115A3E;   /* text-safe green: 6.97:1 on cream, 8.22:1 on white */
  --cream:#EFECE6;
  --mint:#94EBC8;
  --highlight:#FDFF91;
  --white:#FFFFFF;
  --line:#E4E1D9;

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --measure:68ch;

  --r:14px; --r-sm:9px; --r-pill:999px;
  --shadow:0 2px 0 var(--ink-12), 0 10px 26px rgba(28,53,48,.07);
  --gap:clamp(52px,7vw,92px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--emerald-text);outline-offset:3px;border-radius:4px}

/* Keyboard users should not have to tab the whole masthead on every page. */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--white);
  border:2px solid var(--ink);border-radius:var(--r-sm);padding:12px 18px;
  font-weight:700;text-decoration:none}

/* ---------- layout ---------- */
/* Sticky masthead would otherwise swallow the top of every anchor target. */
:root{scroll-padding-top:110px}
section[id],.guide-body section{scroll-margin-top:110px}
.shell{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
section{padding:var(--gap) 0}
section+section{border-top:1px solid var(--line)}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;
  letter-spacing:-.015em;line-height:1.08}
h1{font-size:clamp(38px,6.2vw,66px)}
h2{font-size:clamp(29px,4.2vw,44px);line-height:1.12}
h3{font-size:clamp(21px,2.4vw,27px);line-height:1.2}
h4{font-size:19px;line-height:1.25}
p{margin:0;max-width:var(--measure)}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink-80)}
.muted{color:var(--ink-60)}
.small{font-size:15.5px;line-height:1.55}
/* The client skims bold text, buttons and first lines only, so bold has to
   actually read as bold: full weight and full ink, never a lighter grey. */
strong,b{font-weight:700;color:var(--ink)}

.eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--emerald-text);margin:0 0 16px;display:block;
}
.eyebrow.plain{color:var(--ink-60)}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;max-width:var(--measure)}

/* ---------- header / footer ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--cream);
  position:sticky;top:0;z-index:50}
.masthead .shell{display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.brand .mark{width:30px;height:30px;flex:none}
.brand .txt{display:flex;flex-direction:column;line-height:1.15}
.brand .txt b{font-family:var(--serif);font-size:17px;font-weight:400;letter-spacing:-.01em}
.brand .txt i{font-style:normal;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-80)}
.footlogo{height:26px;width:auto;margin-bottom:6px}
.nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav a{font-size:15.5px;font-weight:550;text-decoration:none;color:var(--ink-80);
  padding:11px 0;min-height:44px;display:flex;align-items:center;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--emerald)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* Mobile masthead: the nav wrapped to three rows and ate 145px of a 812px screen.
   Below 820px the brand stays put and the links become one compact scrollable row. */
@media(max-width:819px){
  .masthead .shell{min-height:56px;gap:0;flex-wrap:nowrap;
    flex-direction:column;align-items:stretch;padding-top:8px;padding-bottom:4px}
  .brand{min-height:38px}
  .brand .mark{width:26px;height:26px}
  .brand .txt b{font-size:15.5px}
  .brand .txt i{font-size:11px}
  .nav{gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;flex-wrap:nowrap;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:15.5px;white-space:nowrap;padding:11px 0;min-height:44px}
  :root{scroll-padding-top:104px}
  section[id],.guide-body section{scroll-margin-top:104px}
}

/* Desktop-required notice. Shown only where the user cannot finish the job. */
.deskonly{display:none}
@media(max-width:819px){
  .deskonly{display:flex;flex-direction:column;gap:12px;
    border:2px solid var(--ink);border-radius:var(--r);background:var(--highlight);
    padding:22px 20px;box-shadow:var(--shadow)}
  .deskonly h3{font-size:20px}
  .deskonly p{font-size:17px;max-width:none}
}

.sitefoot{border-top:1px solid var(--line);padding:38px 0 54px;font-size:15px;color:var(--ink-80)}
.sitefoot .shell{display:flex;flex-direction:column;gap:8px}
.sitefoot a{color:var(--ink);text-decoration:underline;
  display:inline-block;padding:6px 0;min-height:32px}
.sitefoot b{color:var(--ink-80);font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;min-height:48px;
  font-family:var(--sans);font-size:16px;font-weight:650;
  text-decoration:none;cursor:pointer;
  background:var(--emerald);color:#0C221D;
  border:1.5px solid var(--ink);border-radius:var(--r-sm);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
/* Was background:none with a bottom border, which read as body text next to the
   heavy primary button. Secondary paths need to look like controls. */
.btn-quiet{
  display:inline-flex;align-items:center;min-height:48px;padding:15px 22px;
  font-size:16px;font-weight:600;text-decoration:none;
  background:var(--white);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--r-sm);
}
.btn-quiet:hover{background:var(--mint)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* The one button that must be unmissable. */
.btn-xl{
  padding:20px 40px;min-height:64px;font-size:20px;font-weight:750;
  letter-spacing:-.01em;box-shadow:4px 4px 0 var(--ink);
}
.btn-xl:hover{box-shadow:6px 6px 0 var(--ink)}

/* Hero gate: Start here dominates, the prerequisite sits second but is not quiet. */
.gate-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:34px}
.gate-note{
  margin:0;max-width:34ch;font-size:16.5px;line-height:1.45;color:var(--ink-80);
  border-left:4px solid var(--ink);padding-left:16px;
}
.gate-note b{color:var(--ink);font-weight:700}

/* ---------- pill / chip ---------- */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:var(--r-pill);
  background:var(--white);border:1.5px solid var(--ink);
  font-size:15.5px;font-weight:600;width:fit-content;
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);flex:none}
.chip{
  display:inline-block;padding:6px 13px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--ink-12);
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-60);
}
.chip-row{display:flex;flex-wrap:wrap;gap:9px}

/* ---------- cards ---------- */
.cards{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:680px){.cards.two,.cards.four{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:11px;
}
.card h3{font-size:22px}
.card p{font-size:17px;color:var(--ink-80);max-width:none}
a.card{text-decoration:none;transition:transform .12s ease}
a.card:hover{transform:translateY(-3px)}
a.card .more{margin-top:auto;padding-top:8px;font-size:15px;font-weight:650;
  color:var(--emerald-text)}

/* ---------- steps ----------
   Each step is its own card. Rows separated by hairlines blended into one grey
   wall and people lost their place. A card has edges you can see. */
.steps{display:flex;flex-direction:column;gap:18px;counter-reset:s}
.step{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;
  align-items:start;padding:26px 26px 26px 22px;
  background:var(--card,var(--white));border:2px solid var(--ink);
  border-radius:var(--r);box-shadow:var(--shadow);
}
.step .n{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:52px;height:52px;border-radius:50%;
  background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:24px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.step h3{font-size:22px;margin-bottom:8px}
.step p{font-size:17px;color:var(--ink-80)}
.step .stack{gap:13px}
@media(max-width:560px){
  .step{grid-template-columns:1fr;gap:14px;padding:22px 20px}
  .step .n{width:44px;height:44px;font-size:21px}
}

/* the one step that is genuinely the user's own work */
.step.homework{background:var(--mint)}

/* ---------- sticky position bar ---------- */
#where{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  transform:translateY(110%);transition:transform .22s ease;
  background:var(--ink);color:var(--cream);
  border-top:2px solid var(--ink);
}
#where.on{transform:translateY(0)}
#where .in{max-width:1080px;margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px}
/* Must restate the colour: the global strong,b rule sets ink, which is this
   bar's own background, so the step number would render invisible. */
#where b{font-weight:700;color:var(--cream)}
#where .say{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#where code{font-family:var(--sans);font-weight:700;background:var(--emerald);
  color:#0C221D;padding:5px 11px;border-radius:6px;font-size:15px}
#where button{font:700 12px/1 var(--sans);cursor:pointer;background:transparent;
  color:var(--cream);border:1.5px solid var(--cream);border-radius:6px;
  padding:9px 12px;min-height:38px}
#where button:hover{background:var(--cream);color:var(--ink)}
@media(max-width:560px){
  #where .in{font-size:14px;gap:9px;padding:10px 16px}
  #where .say{margin-left:0;width:100%}
}
@media print{#where{display:none}}

/* ---------- floating help dock ----------
   Must sit AFTER #where in the DOM so the sibling rule below can lift it
   clear of the step bar. Without that the dock lands on the bar's
   "continue my setup" Copy button, which is the resume affordance. */
.helpdock{
  position:fixed;right:18px;bottom:18px;z-index:80;
  background:var(--ink);color:var(--cream);border:2px solid var(--ink);
  border-radius:var(--r-pill);padding:13px 20px;
  font-size:15px;font-weight:700;text-decoration:none;
  box-shadow:0 6px 20px rgba(28,53,48,.28);
  display:inline-flex;gap:9px;align-items:center;
  transition:bottom .22s ease
}
.helpdock:hover{background:var(--emerald);color:#0C221D;border-color:var(--ink)}
.helpdock:focus{outline:3px solid var(--emerald);outline-offset:2px}
/* --barh is the bar's measured height, set by copy.js. The fallback covers the
   one-row desktop case if JS has not run yet.
   Row 17 removed the sticky bar from installation.html, but these rules STAY:
   installation-v1.html still carries the bar and the dock, and is still linked
   from install-v2.html. The sibling selector simply never matches on a page with
   no #where, so it is inert on the new install page. */
#where.on ~ .helpdock{bottom:calc(var(--barh, 56px) + 14px)}
@media(max-width:620px){
  .helpdock{right:12px;bottom:12px;padding:11px 16px;font-size:14px}
  #where.on ~ .helpdock{bottom:calc(var(--barh, 56px) + 12px)}
}
@media print{.helpdock{display:none}}

/* ---------- inline answer, so nobody has to leave the page ---------- */
.ask{border:none;background:transparent;padding:0;margin-top:10px}
.ask summary{
  font-family:var(--sans);font-size:15.5px;font-weight:650;color:var(--emerald-text);
  padding:9px 0;min-height:40px;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.ask summary::after{content:""}
.ask summary::before{content:"?";flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--emerald-text);color:var(--white);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.ask[open] summary{margin-bottom:2px}
.ask .body{padding:0 0 6px 29px;border-left:2px solid var(--mint);margin-left:9px}
.ask .body p{font-size:16px;color:var(--ink-80);max-width:60ch}

/* ---------- callouts ---------- */
.callout{
  border:1.5px solid var(--ink);border-radius:var(--r);padding:24px 26px;
  background:var(--white);display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shadow);
}
.callout h3{font-size:20px}
.callout p{font-size:17px;color:var(--ink-80);max-width:none}
.callout.soft{background:var(--mint);border-color:var(--ink)}
.callout.warn{background:var(--highlight);border-color:var(--ink)}
.callout.flat{box-shadow:none;background:transparent;border-style:dashed;
  border-color:var(--ink-40)}

/* ---------- copy block (never call it a prompt) ---------- */
.saythis{
  border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow);max-width:var(--measure);
}
.saythis-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px;background:var(--ink);color:var(--cream);
  font-size:12px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
}
.copybtn{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;
  background:var(--emerald);color:#0C221D;border:1px solid var(--ink);
  padding:11px 16px;border-radius:5px;min-height:44px;
}
.copybtn:hover{background:var(--mint)}
.saythis code{
  display:block;padding:22px 18px;font-family:var(--sans);
  font-size:19px;font-weight:600;letter-spacing:-.005em;word-break:break-word;
}
.saythis .where{padding:0 18px 16px;font-size:15px;color:var(--ink-80)}

/* ---------- misc ---------- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bands{display:flex;flex-wrap:wrap;gap:0;border:1.5px solid var(--ink);
  border-radius:var(--r);overflow:hidden;min-width:640px}
.band{flex:1;padding:16px 14px;text-align:center;border-right:1px solid var(--ink)}
.band:last-child{border-right:none}
.band b{display:block;font-size:15px}
.band span{font-size:12.5px;color:var(--ink-60);font-variant-numeric:tabular-nums}

table{border-collapse:collapse;width:100%;min-width:520px;font-size:16.5px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);
  font-weight:700}
td code{font-family:var(--sans);font-weight:650}

details{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--white);
  padding:0;box-shadow:var(--shadow)}
details+details{margin-top:14px}
summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:var(--serif);font-size:21px;line-height:1.25;
  display:flex;gap:14px;align-items:flex-start;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-family:var(--sans);font-size:22px;
  color:var(--emerald-text);line-height:1;flex:none}
/* true minus U+2212, not an en dash. House rule: no em/en dashes anywhere. */
details[open] summary::after{content:"\2212"}
details .body{padding:0 24px 22px;display:flex;flex-direction:column;gap:12px}
details .body p{font-size:17px;color:var(--ink-80);max-width:none}

.placeholder{
  border:2px dashed var(--ink-40);border-radius:var(--r);background:var(--white);
  padding:44px 24px;text-align:center;color:var(--ink-60);font-size:14.5px;
}

/* ---------- guide sidebar ---------- */
.guide-wrap{display:grid;grid-template-columns:1fr;gap:34px;
  max-width:1080px;margin:0 auto;padding:0 22px}
/* Grid items default to min-width:auto, so the 520px min-width on tables inside
   .scroller propagated up and forced the whole guide to 542px on a 375px phone.
   Verified live 2026-07-26: track 520px -> 331px, page 542px -> 375px. */
.guide-body,.toc{min-width:0}
@media(min-width:1000px){
  .guide-wrap{grid-template-columns:250px 1fr;gap:56px;align-items:start}
  .toc{position:sticky;top:88px;max-height:calc(100vh - 120px);overflow-y:auto}
}
.toc{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--white);
  padding:20px;box-shadow:var(--shadow)}
.toc b{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;
  font-size:16px}
.toc a{text-decoration:none;color:var(--ink-80);display:block;padding:7px 0;min-height:32px}
.toc a:hover{color:var(--ink);text-decoration:underline}
.guide-body{display:flex;flex-direction:column;gap:var(--gap);padding-bottom:var(--gap)}
.guide-body section{padding:0;border-top:none}
.guide-body section+section{padding-top:var(--gap);border-top:1px solid var(--line)}

/* ---------- print ---------- */
@media print{
  :root{--gap:26px}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}
  .masthead,.toc,.copybtn,.noprint{display:none!important}
  /* Buttons used to be hidden outright, which took the download and the
     upgrade link off the page with nothing in their place. Print them as
     underlined text and spell out any absolute URL. */
  .btn,.btn-quiet{background:none!important;border:none!important;
    box-shadow:none!important;color:#000!important;padding:0!important;
    min-height:0!important;font-weight:700;text-decoration:underline}
  .btn-row{display:block;margin:8px 0}
  .btn[href^="http"]::after,.btn-quiet[href^="http"]::after{
    content:" (" attr(href) ")";font-weight:400;font-size:9pt;text-decoration:none}
  .shell,.guide-wrap,.narrow{max-width:none;padding:0}
  .guide-wrap{display:block}
  .card,.callout,.saythis,details{border:1pt solid #000;box-shadow:none;
    break-inside:avoid;page-break-inside:avoid}
  .step{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  details{border:none;padding:0}
  details .body{padding:0}
  summary::after{content:""}
  .saythis-head{background:#fff;color:#000;border-bottom:1pt solid #000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  section{padding:0}
}

/* X-Ray example label: was 12.5px at 60% opacity above a 64px numeral, so the
   eye read the number as real. Now it competes. */
.exlabel{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.03em;
  color:var(--ink);background:var(--highlight);border:2px solid var(--ink);
  border-radius:var(--r-sm);padding:10px 15px;display:inline-block;max-width:none}

/* The five bands must not lose Elite and Rainmaker off the side of a phone. */
@media(max-width:700px){
  .bands{min-width:0;flex-wrap:wrap}
  .band{flex:1 1 45%;border-right:none;border-bottom:1px solid var(--ink)}
  .band:nth-child(odd){border-right:1px solid var(--ink)}
  .band:last-child{flex-basis:100%;border-bottom:none}
}

/* Orientation box. Exists because a first-time reader assembled four wrong beliefs
   from fragments: that Claude was a person, that this product had a price, that a
   free tier of it existed, and that Gmail was optional. */
.facts{margin-top:30px;background:var(--white);border:2px solid var(--ink);
  border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);max-width:62ch}
.facts-h{font-size:19px;margin:0 0 12px;font-family:var(--sans);font-weight:700;
  letter-spacing:0}
.facts ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.facts li{font-size:16.5px;line-height:1.5;color:var(--ink-80);
  padding-left:26px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  border-radius:50%;background:var(--emerald);border:1.5px solid var(--ink)}
.facts li b{color:var(--ink)}

/* FAQ summaries were the fear with the reassurance hidden behind a click, so a
   headline-only scan delivered the opposite of the intent. The answer now shows. */
.ans{display:block;font-style:normal;font-family:var(--sans);font-size:16px;
  font-weight:650;color:var(--emerald-text);margin-top:5px}

/* Instructional screenshots. Cropped tight to the one control being described,
   because cropped task-relevant shots measurably beat full-screen captures. */
.shot{width:100%;height:auto;margin-top:6px;border:1.5px solid var(--ink);
  border-radius:var(--r-sm);background:#1b1b1b;display:block}
.ask .shot{margin-top:10px}

/* Checkmark on a payoff heading. Sized down so it reads as a marker, not a word,
   and optically aligned with the serif cap height. */
.tick{font-size:.72em;margin-right:6px;vertical-align:.06em;line-height:1}

/* Benefit list inside a card. Same green marker as .facts, without the box. */
ul.bullets{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
ul.bullets li{font-size:16.5px;line-height:1.5;color:var(--ink-80);
  padding-left:24px;position:relative}
ul.bullets li::before{content:"";position:absolute;left:2px;top:10px;
  width:7px;height:7px;border-radius:50%;background:var(--emerald-text)}
ul.bullets li b{color:var(--ink)}

/* Sub-steps inside a step card. */
ol.mini{margin:2px 0 0;padding-left:0;list-style:none;counter-reset:mini;
  display:flex;flex-direction:column;gap:9px}
ol.mini li{counter-increment:mini;position:relative;padding-left:34px;
  font-size:17px;color:var(--ink-80)}
ol.mini li::before{content:counter(mini);position:absolute;left:0;top:1px;
  width:24px;height:24px;border-radius:50%;background:var(--mint);
  border:1.5px solid var(--ink);color:var(--ink);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
ol.mini li b{color:var(--ink)}