/* The Practice Journal.
   trivizi.com is two things that never mix: a PUBLIC blog, and a PRIVATE
   tools shelf at /tools/ that only Tri uses. The public side carries no
   employer branding, which is what makes the footer disclaimer true.

   The look is adapted from blumbergdigital.com at Tri's request, 2026-10-20.
   What was taken: fluid type keyed to a 1600px artboard, display headings set
   near solid with hard negative tracking, headings hand broken into short
   lines, two grounds alternating as the only section separator, two digit
   indices instead of ornament, and a lot of air.

   What was deliberately NOT taken:
     * Their typeface. HK Grotesk is licensed to them. A system grotesk with
       the same tracking and weight gets most of the way there and costs no
       network request, which matters more on a blog than on an agency site.
     * html{font-size:0.0625vw}, their fluid trick. It makes every rem on the
       page a viewport unit, which would have silently broken the funnel
       captions and anything else measured in rem. clamp() keyed to the same
       1600px artboard draws the identical curve without hijacking the root.
     * line-height 1.0 on body copy. Fine for display, unreadable over 1,800
       words.

   The .pb-* classes come from the app's shared formatter
   (blueprints/community.py). They are styled here and never written twice. */

:root{
  /* --- the palette the tool pages also read. Do not rename these. --- */
  --ink:#14181c;          /* headings and body */
  --soft:#5a636b;         /* secondary prose */
  --faint:#89929a;        /* bylines, meta */
  --paper:#f4f5f7;        /* page ground, cool off white not cream */
  --card:rgba(255,255,255,.72);
  --card-solid:#ffffff;
  --rule:rgba(15,20,25,.10);
  --accent:#0f6b4f;       /* links, rules, the quiet accent */
  --accent-ink:#ffffff;   /* text ON the green accent */
  --accent-soft:#e7efeb;
  /* The loud accent. Yellow type on an off white page is unreadable, so it
     never carries text colour: filled chips on a dark ground only. */
  --hi:#f9ed1f;
  --hi-ink:#14181c;
  --serp:#0f6b4f;
  --pb-chart-gap:#ffffff;
  /* These two were used by the funnel but never declared, so its border fell
     back to currentColor. Declared now. */
  --line:var(--rule);
  --dim:var(--faint);

  /* --- the dark band. The alternation between --paper and --deep is the
     only section separator on the site. There are no horizontal rules. --- */
  --deep:#0c3b2c;
  --deep-ink:#f3f6f4;     /* type on --deep */
  --deep-soft:#9db5a9;    /* secondary type on --deep */
  --deep-rule:rgba(255,255,255,.14);

  /* --- type. Sans builds the structure, serif carries the reading. --- */
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  /* Fluid scale. The vw figure is the 1600px artboard size divided by 1600,
     so --h2 at 3vw is 48px on a 1600px window. Floors keep a phone readable,
     ceilings stop a 32in monitor turning a blog into a billboard. */
  --t-display:clamp(42px,7.1vw,114px);
  --t-h1:clamp(32px,4.4vw,70px);
  --t-h2:clamp(25px,3vw,48px);
  --t-h3:clamp(20px,1.5vw,25px);
  --t-lede:clamp(19px,1.35vw,22px);
  --t-body:clamp(17px,1.13vw,18px);
  --t-small:clamp(13px,.88vw,14px);
  --t-micro:11px;

  /* Rhythm. Blumberg runs 90px to 147px of section padding; this is the
     same gesture, floored for a phone. */
  --bay:clamp(56px,7.5vw,120px);
  --gutter:clamp(20px,4vw,64px);
  --measure:720px;    /* the reading column, unchanged */
  --wide:1240px;

  --ease:cubic-bezier(.16,1,.3,1);
  --glass-blur:blur(14px);
}

*{box-sizing:border-box}
/* scroll-padding keeps the sticky masthead from covering whatever you
   just jumped to, the skip link's target included. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* Nothing on this site may scroll sideways on a phone. */
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--accent)}

/* Display type. Weight 500 not 700: the size does the shouting. Set near
   solid, tracked hard negative. This single rule is most of the look. */
.d1,.d2,.d3,h1,h2,h3{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.04;
  text-wrap:balance;
  margin:0;
}
.d1{font-size:var(--t-display);letter-spacing:-.045em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);letter-spacing:-.035em}
h3{font-size:var(--t-h3);letter-spacing:-.025em;line-height:1.15}
/* Hand broken heading lines. The break is the composition, so it is written
   into the markup rather than left to the wrap. Below 700px the breaks are
   released, because a phone column breaks them for you. */
.br{display:block}
@media (max-width:700px){.br{display:inline}}

.eyebrow{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  margin:0 0 18px;
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;position:fixed;z-index:99;background:var(--card-solid);
  color:var(--ink);padding:10px 14px;border-radius:8px;border:1px solid var(--rule)}

/* ── layout primitives ─────────────────────────────────────────────────── */
.band{padding-block:var(--bay)}
.band--deep{background:var(--deep);color:var(--deep-ink)}
.band--deep h1,.band--deep h2,.band--deep h3,.band--deep .d1{color:var(--deep-ink)}
.band--deep .eyebrow{color:var(--deep-soft)}
.band--deep a{color:var(--deep-ink)}
.band--tight{padding-block:calc(var(--bay) * .6)}
.holder{max-width:var(--wide);margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
/* Centre the lede, left align the detail. Straight off the reference. */
.lede-centre{max-width:58ch;margin-inline:auto;text-align:center}

/* ── site header ───────────────────────────────────────────────────────── */
.site-head{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:0;z-index:50;
}
.site-head .holder{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-block:18px;
}
.wordmark{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;white-space:nowrap;
}
.wordmark:hover{color:var(--accent)}
.head-link{
  font-family:var(--sans);font-size:var(--t-small);font-weight:500;
  letter-spacing:-.01em;text-decoration:none;color:var(--soft);
}
.head-link:hover{color:var(--accent)}
@media (max-width:420px){
  .wordmark{letter-spacing:.14em}
  .head-link{display:none}
}

/* ── index hero ────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(60px,9vw,150px) var(--bay)}
.hero .d1{max-width:16ch}
.hero .sub{
  font-family:var(--sans);font-size:var(--t-lede);line-height:1.45;
  color:var(--deep-soft);max-width:46ch;margin:28px 0 0;letter-spacing:-.012em;
}
/* The one place --hi is allowed: a filled chip, on a dark ground. */
.chip{
  display:inline-block;background:var(--hi);color:var(--hi-ink);
  font-family:var(--sans);font-size:var(--t-micro);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;margin-bottom:26px;
}

/* The house rules strip, where the reference puts its agency statistics.
   Tri's site does not claim client results, so this states how the writing
   works instead. */
.rules{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--deep-rule);
  border-block:1px solid var(--deep-rule);margin-top:clamp(44px,5vw,76px);
}
.rules div{background:var(--deep);padding:26px 22px 28px}
.rules dt{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--deep-soft);
  margin-bottom:10px;
}
.rules dd{
  margin:0;font-family:var(--sans);font-size:clamp(16px,1.1vw,18px);
  line-height:1.4;letter-spacing:-.015em;color:var(--deep-ink);
}
@media (max-width:760px){
  .rules{grid-template-columns:1fr}
}

/* ── the post list ─────────────────────────────────────────────────────── */
.list-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,48px)}
.count{font-family:var(--sans);font-size:var(--t-small);color:var(--faint);
  font-variant-numeric:tabular-nums;margin:0}

.cards{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.card{
  display:grid;
  grid-template-columns:5.5ch 268px minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);
  align-items:start;
  padding-block:clamp(26px,3vw,44px);
  border-bottom:1px solid var(--rule);
}
/* The two digit index, lifted from the reference. Cheap, and it reads as
   rigour rather than ornament. */
.card-idx{
  font-family:var(--sans);font-size:var(--t-small);font-weight:600;
  color:var(--faint);font-variant-numeric:tabular-nums;
  letter-spacing:.04em;padding-top:.45em;
}
.card-thumb{
  display:block;border:1px solid var(--rule);border-radius:12px;
  overflow:hidden;background:var(--card-solid);line-height:0;
  transition:border-color .25s var(--ease),transform .35s var(--ease);
}
.card-thumb img{width:100%;height:auto;display:block}
.card:hover .card-thumb{border-color:var(--accent);transform:translateY(-3px)}
.card-body{min-width:0}
.card h2{font-size:clamp(22px,1.95vw,31px);line-height:1.1;margin-bottom:10px}
.card h2 a{color:inherit;text-decoration:none}
.card h2 a:hover{color:var(--accent)}
.card .excerpt{color:var(--soft);margin:12px 0 14px;font-size:var(--t-small);
  font-family:var(--sans);line-height:1.55;letter-spacing:-.006em}
.more-link{font-family:var(--sans);font-size:var(--t-small);
  text-decoration:none;font-weight:600;letter-spacing:-.01em}
.more-link:hover{text-decoration:underline}

@media (max-width:1000px){
  .card{grid-template-columns:4.5ch minmax(0,1fr);row-gap:14px}
  .card-thumb{grid-column:2;max-width:420px}
  .card-body{grid-column:2}
}
@media (max-width:520px){
  .card{grid-template-columns:1fr}
  .card-idx{padding-top:0}
  .card-thumb,.card-body{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .card-thumb{transition:none}
  .card:hover .card-thumb{transform:none}
}

.byline{font-family:var(--sans);font-size:var(--t-small);color:var(--faint);margin:0;
  letter-spacing:-.005em}
.tags{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tag{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:4px 11px}
.tag.muted{color:var(--faint);background:transparent;padding-inline:0;letter-spacing:.11em}

/* ── article ───────────────────────────────────────────────────────────── */
.crumb{padding-block:28px 0;font-family:var(--sans);font-size:var(--t-small)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.art-head{padding-block:clamp(26px,3vw,44px) clamp(24px,2.6vw,36px);
  border-bottom:1px solid var(--rule)}
.art-head h1{margin:14px 0 12px}
.art-head .tags{margin-bottom:4px}

.post{padding-top:clamp(28px,3vw,44px)}
.post .pb-lede{font-size:var(--t-lede);line-height:1.5;color:var(--soft);
  margin:0 0 30px;padding-left:18px;border-left:3px solid var(--accent)}
.post .pb-p{margin:0 0 18px}
.post .pb-h{font-family:var(--sans);font-weight:500;margin:48px 0 16px;
  font-size:clamp(21px,1.5vw,26px);letter-spacing:-.03em;
  line-height:1.15;text-wrap:balance;position:relative;padding-top:18px}
.post .pb-h::before{content:"";position:absolute;top:0;left:0;width:34px;
  height:3px;background:var(--accent);border-radius:2px}

.post .pb-list,.post .pb-steps{margin:0 0 20px;padding-left:0;list-style:none}
.post .pb-list li{position:relative;padding-left:22px;margin-bottom:10px}
.post .pb-list li::before{content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}
.post .pb-steps{counter-reset:s}
.post .pb-steps li{counter-increment:s;position:relative;padding-left:40px;margin-bottom:13px}
.post .pb-steps li::before{content:counter(s);position:absolute;left:0;top:.05em;
  width:27px;height:27px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-family:var(--sans);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center}

.post .pb-data{margin:0 0 26px;border-top:1px solid var(--rule);
  font-family:var(--sans)}
.post .pb-data>div{display:flex;align-items:baseline;gap:10px;padding:9px 2px;
  border-bottom:1px solid var(--rule)}
.post .pb-data dt{flex:1;min-width:0;font-size:15px;color:var(--soft)}
.post .pb-data dd{margin:0;font-weight:600;font-size:15px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.post .pb-data .pb-row3 .pb-mid{font-weight:600;color:var(--soft);
  min-width:96px;text-align:right}

.post .pb-stat{display:flex;align-items:baseline;gap:16px;margin:0 0 22px;
  padding:19px 21px;border-radius:12px;background:var(--card);
  border:1px solid var(--rule);border-left:4px solid var(--accent)}
.post .pb-stat b{font-family:var(--sans);font-size:clamp(26px,2.1vw,34px);
  font-weight:500;line-height:1.05;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.post .pb-stat span{font-family:var(--sans);font-size:15px;
  color:var(--soft);line-height:1.5;letter-spacing:-.008em}

.post .pb-note{display:block;margin:0 0 22px;padding:18px 20px;border-radius:12px;
  background:var(--accent-soft);border:1px solid var(--rule);
  font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--faint)}
.post .pb-note-label{display:block;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px;font-weight:700}

/* donut */
.post .pb-chart{margin:0 0 28px;padding:24px;background:var(--card);
  border:1px solid var(--rule);border-radius:14px;
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:center}
.post .pb-chart svg{width:100%;height:auto;display:block}
.post .pb-slice,.post .pb-swatch{
  --t:calc(var(--i) / var(--n));
  --h:calc(var(--pb-h0) + (var(--pb-h1) - var(--pb-h0)) * var(--t));
  --l:calc(var(--pb-l0) + (var(--pb-l1) - var(--pb-l0)) * var(--t));
}
.post .pb-donut-num{fill:var(--ink);font-size:34px;font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  font-family:var(--sans)}
.post .pb-donut-cap{fill:var(--faint);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-family:var(--sans)}
.post .pb-legend{list-style:none;margin:0;padding:0;
  font-family:var(--sans);font-size:13px}
.post .pb-legend li{display:flex;align-items:center;gap:9px;padding:3px 0;color:var(--soft)}
.post .pb-swatch{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.post .pb-leg-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post .pb-leg-val{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ranked ladder */
.post .pb-ladder{margin:0 0 28px;padding:22px;background:var(--card);
  border:1px solid var(--rule);border-radius:14px}
.post .pb-ladder ul{list-style:none;margin:0;padding:0}
.post .pb-rung{display:grid;grid-template-columns:76px minmax(0,1fr) 42%;
  align-items:center;gap:12px;padding:6px 0}
/* The badge sits ON the accent, so its text takes the dark ground. */
.post .pb-badge{display:inline-block;padding:4px 14px 4px 9px;background:var(--serp);
  color:var(--accent-ink);font-family:var(--sans);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:center;
  clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%)}
.post .pb-rung-label{font-family:var(--sans);font-size:14px;
  color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post .pb-rung-track{background:var(--rule);border-radius:4px;height:12px;overflow:hidden}
.post .pb-rung-fill{display:block;height:100%;border-radius:4px;background:var(--accent)}

/* funnel */
.post .pb-funnel{margin:0 0 28px;padding:24px;background:var(--card);
  border:1px solid var(--rule);border-radius:14px}
.post .pb-funnel ol{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px}
.post .pb-fn-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:5px}
.post .pb-fn-label{color:var(--soft);font-size:15px;font-family:var(--sans)}
.post .pb-fn-n{color:var(--ink);font-size:19px;font-weight:600;font-family:var(--sans);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.post .pb-fn-bar{display:block;height:16px;border-radius:5px;
  background:var(--accent);min-width:6%}
.post .pb-fn-step{display:block;margin-top:5px;font-size:13px;color:var(--faint);
  font-family:var(--sans)}
.post .pb-funnel figcaption{margin-top:18px;padding-top:14px;
  border-top:1px solid var(--rule);font-size:14px;color:var(--soft);
  font-family:var(--sans)}

/* ── cta, on the dark ground ───────────────────────────────────────────── */
.cta-band .d2{font-size:var(--t-h2);font-family:var(--sans);font-weight:500;
  letter-spacing:-.035em;line-height:1.04;max-width:18ch;margin:0}
.cta-band p{font-family:var(--sans);color:var(--deep-soft);font-size:var(--t-small);
  max-width:46ch;margin:18px 0 30px;line-height:1.6}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);
  text-decoration:none;font-family:var(--sans);font-weight:600;font-size:var(--t-small);
  letter-spacing:-.01em;padding:14px 26px;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,107,79,.3)}
.band--deep .btn{background:var(--hi);color:var(--hi-ink)}
.band--deep .btn:hover{box-shadow:0 8px 22px rgba(249,237,31,.22)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* The in article CTA keeps the lighter treatment: it sits inside the reading
   column, where a full dark band would cut the article in half. */
.cta{margin:52px 0 0;padding:26px;background:var(--accent-soft);
  border:1px solid var(--rule);border-radius:14px}
.cta p{margin:0 0 12px;font-family:var(--sans);font-size:15px;color:var(--soft)}
.cta p:last-child{margin-bottom:0}
.cta strong{color:var(--ink)}
.more{padding-block:34px;font-family:var(--sans);font-size:15px}

footer{padding-block:clamp(40px,4vw,64px);color:var(--faint);
  font-family:var(--sans);font-size:13px;line-height:1.75;
  border-top:1px solid var(--rule)}
footer p{margin:0 0 6px;max-width:62ch}
footer a{color:var(--soft)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}
.band--deep a:focus-visible{outline-color:var(--hi)}

/* ── the private tools shelf, /tools/ ──────────────────────────────────── */
/* noindex, Disallowed, and linked from nowhere public. Tri bookmarks it. */
.tools-nav{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:clamp(30px,3vw,46px);
  border-bottom:1px solid var(--rule);padding-bottom:0}
.tools-nav a{
  font-family:var(--sans);font-size:var(--t-small);font-weight:500;
  text-decoration:none;color:var(--soft);padding:12px 16px;
  border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:-.01em;
}
.tools-nav a:hover{color:var(--ink)}
.tools-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

.shelf{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.shelf li{
  background:var(--card-solid);border:1px solid var(--rule);border-radius:14px;
  padding:24px;transition:border-color .2s var(--ease),transform .25s var(--ease);
}
.shelf li:hover{border-color:var(--accent);transform:translateY(-2px)}
.shelf .card-idx{padding-top:0;display:block;margin-bottom:14px}
.shelf h2{font-size:21px;margin-bottom:8px;letter-spacing:-.03em}
.shelf h2 a{color:inherit;text-decoration:none}
.shelf p{font-family:var(--sans);font-size:var(--t-small);color:var(--soft);
  margin:0;line-height:1.55}
.shelf .state{display:inline-block;margin-top:14px;font-family:var(--sans);
  font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--faint)}
@media (prefers-reduced-motion:reduce){
  .shelf li{transition:none}.shelf li:hover{transform:none}
}

.tool-form{background:var(--card-solid);border:1px solid var(--rule);
  border-radius:14px;padding:clamp(20px,2.4vw,30px);margin-top:26px}
.tool-form label{display:block;font-family:var(--sans);font-size:var(--t-small);
  font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.tool-form .hint{font-family:var(--sans);font-size:13px;color:var(--faint);
  margin:0 0 18px;line-height:1.55;font-weight:400}
.tool-form input[type=text],.tool-form input[type=url],.tool-form textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:13px 15px;margin-bottom:16px;line-height:1.5;
}
.tool-form textarea{min-height:110px;resize:vertical}
.tool-form button{
  font-family:var(--sans);font-size:var(--t-small);font-weight:600;
  background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;
  padding:14px 26px;cursor:pointer;letter-spacing:-.01em;
}
.tool-form button:hover{opacity:.92}
.tool-form .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tool-note{font-family:var(--sans);font-size:13px;color:var(--faint);
  line-height:1.6;margin:18px 0 0}
.tool-out{margin-top:26px}
.tool-out:empty{display:none}
.tool-out ol{font-family:var(--sans);font-size:15px;line-height:1.5;
  padding-left:22px;margin:0}
.tool-out li{margin-bottom:11px;color:var(--ink)}
.tool-out h3{margin:0 0 14px}

/* ── motion ────────────────────────────────────────────────────────────
   Everything below applies only once the reveal script adds .pb-anim to
   <html>. Without it every chart renders finished, so no-JS clients and
   crawlers see a complete page rather than a blank one. */
.pb-anim .pb-funnel .pb-fn-bar,
.pb-anim .pb-ladder .pb-rung-fill{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1s var(--ease);
}
.pb-anim .pb-funnel.is-in .pb-fn-bar,
.pb-anim .pb-ladder.is-in .pb-rung-fill{transform:scaleX(1)}

.pb-anim .pb-funnel .pb-fn-row:nth-child(1) .pb-fn-bar{transition-delay:.04s}
.pb-anim .pb-funnel .pb-fn-row:nth-child(2) .pb-fn-bar{transition-delay:.13s}
.pb-anim .pb-funnel .pb-fn-row:nth-child(3) .pb-fn-bar{transition-delay:.22s}
.pb-anim .pb-funnel .pb-fn-row:nth-child(4) .pb-fn-bar{transition-delay:.31s}
.pb-anim .pb-funnel .pb-fn-row:nth-child(5) .pb-fn-bar{transition-delay:.40s}
.pb-anim .pb-funnel .pb-fn-row:nth-child(6) .pb-fn-bar{transition-delay:.49s}
.pb-anim .pb-ladder .pb-rung:nth-child(1) .pb-rung-fill{transition-delay:.04s}
.pb-anim .pb-ladder .pb-rung:nth-child(2) .pb-rung-fill{transition-delay:.13s}
.pb-anim .pb-ladder .pb-rung:nth-child(3) .pb-rung-fill{transition-delay:.22s}
.pb-anim .pb-ladder .pb-rung:nth-child(4) .pb-rung-fill{transition-delay:.31s}
.pb-anim .pb-ladder .pb-rung:nth-child(5) .pb-rung-fill{transition-delay:.40s}
.pb-anim .pb-ladder .pb-rung:nth-child(6) .pb-rung-fill{transition-delay:.49s}

.pb-anim .pb-funnel .pb-fn-n,
.pb-anim .pb-funnel .pb-fn-step{
  opacity:0;transform:translateY(5px);
  transition:opacity .55s ease,transform .55s var(--ease);transition-delay:.3s;
}
.pb-anim .pb-funnel.is-in .pb-fn-n,
.pb-anim .pb-funnel.is-in .pb-fn-step{opacity:1;transform:none}

.pb-anim .pb-chart svg{transform:rotate(-8deg) scale(.94);opacity:0;
  transition:transform .9s var(--ease),opacity .6s ease}
.pb-anim .pb-chart.is-in svg{transform:none;opacity:1}
.pb-anim .pb-chart .pb-legend li{opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s var(--ease)}
.pb-anim .pb-chart.is-in .pb-legend li{opacity:1;transform:none}
.pb-anim .pb-chart.is-in .pb-legend li:nth-child(2){transition-delay:.06s}
.pb-anim .pb-chart.is-in .pb-legend li:nth-child(3){transition-delay:.12s}
.pb-anim .pb-chart.is-in .pb-legend li:nth-child(4){transition-delay:.18s}
.pb-anim .pb-chart.is-in .pb-legend li:nth-child(5){transition-delay:.24s}
.pb-anim .pb-chart.is-in .pb-legend li:nth-child(6){transition-delay:.30s}

.pb-anim .pb-data,.pb-anim .pb-stat{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .6s var(--ease);
}
.pb-anim .pb-data.is-in,.pb-anim .pb-stat.is-in{opacity:1;transform:none}

/* The reference reveals headings line by line off a clip mask. Same idea,
   one element rather than a splitlines pass, and the default state is
   visible so nothing depends on the script running. */
.pb-anim .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .8s var(--ease)}
.pb-anim .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .pb-anim *,.pb-anim *::before,.pb-anim *::after{
    transition:none!important;transform:none!important;opacity:1!important;
  }
}

/* ── responsive tail ───────────────────────────────────────────────────── */
@media (max-width:640px){
  .post .pb-chart{grid-template-columns:1fr;gap:18px;padding:18px}
  .post .pb-stat{flex-direction:column;gap:6px}
  .post .pb-rung{grid-template-columns:70px minmax(0,1fr);gap:10px}
  .post .pb-rung-track{display:none}
  .post .pb-data>div{flex-wrap:wrap}
}