@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --white:#FFFFFF;
  --ink:#161616;
  --grey:#5C5C5C;
  --line:#E4E4E4;
  --green:#0BC268;
  --green-deep:#059B52;
  --mint:#DFF7EA;
  --mint-soft:#EFFBF4;
  --dark:#171717;
  --dark-line:#2E2E2E;
  --amber:#B8791F;

  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

/**
 * Keep the footer at the bottom on short pages.
 *
 * A page with little content — the dashboard, sign-in, a 404 — ends its
 * footer partway down the screen with white below it, which reads as a
 * rendering fault rather than a design choice.
 *
 * Flex column with the footer pushed down by margin-top:auto. Unlike
 * position:fixed this does not overlay content on long pages; the footer
 * simply sits at the bottom of the viewport when there is nothing else to
 * fill it, and flows normally when there is.
 */
html{min-height:100%}

body{
  background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;

  min-height:100vh;
  min-height:100dvh;          /* accounts for mobile browser chrome */
  display:flex;
  flex-direction:column;
}

/* Everything between header and footer takes the slack. */
body > .foot{margin-top:auto}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:760px}

/* ============ HEADER ============ */
.head{position:sticky;top:0;z-index:80;background:var(--white);border-bottom:1px solid var(--line)}
.head__in{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px}
.logo{
  display:flex;align-items:center;gap:7px;font-weight:800;font-size:20px;
  letter-spacing:-.035em;color:var(--ink);text-decoration:none;flex:none;
}
.logo__dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block}

.nav{display:flex;align-items:center;gap:4px}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;gap:5px;color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:500;padding:10px 12px;border-radius:8px;background:none;
  border:none;font-family:var(--sans);cursor:pointer;
}
.nav__link:hover{color:var(--green-deep);background:var(--mint-soft)}
.nav__link[aria-current="page"]{color:var(--green-deep)}
.nav__caret{transition:transform .16s}
.nav__item.is-open .nav__caret{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% + 8px);left:0;min-width:262px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.09);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.nav__item.is-open .drop{opacity:1;visibility:visible;transform:none}
.drop a{
  display:block;padding:10px 12px;border-radius:9px;text-decoration:none;
  color:var(--ink);font-size:14.5px;font-weight:500;
}
.drop a:hover{background:var(--mint-soft);color:var(--green-deep)}
.drop a span{display:block;font-size:12.5px;font-weight:400;color:var(--grey);margin-top:2px}
.drop__rule{height:1px;background:var(--line);margin:7px 10px}

.head__right{display:flex;align-items:center;gap:14px;flex:none}
.head__login{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.head__login:hover{color:var(--green-deep)}
.head__cta{
  background:var(--green);color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;
  padding:10px 18px;border-radius:999px;white-space:nowrap;
}
.head__cta:hover{background:var(--green-deep)}

.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px}
.burger:hover{background:var(--mint-soft)}

.mnav{display:none;border-top:1px solid var(--line);background:var(--white);padding:12px 0 20px}
.mnav.is-open{display:block}
.mnav a{
  display:block;padding:13px 0;font-size:16px;font-weight:500;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
}
.mnav a:last-of-type{border-bottom:none}
.mnav__foot{margin-top:16px;display:grid;gap:10px}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;font-family:var(--sans);font-size:16px;font-weight:600;
  border-radius:999px;padding:15px 28px;cursor:pointer;text-align:center;text-decoration:none;
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;
}
.btn--green{background:var(--green);color:#fff;border-color:var(--green)}
.btn--green:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn--out{background:transparent;color:var(--ink);border-color:#CFCFCF}
.btn--out:hover{border-color:var(--ink)}
.btn--onDark{background:transparent;color:#fff;border-color:#4A4A4A}
.btn--onDark:hover{border-color:#fff}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ============ TYPE ============ */
.h1{font-size:clamp(38px,6.2vw,62px);font-weight:800;line-height:1.04;letter-spacing:-.035em;max-width:17ch;margin-bottom:20px}
.h2{font-size:clamp(29px,4.2vw,44px);font-weight:800;line-height:1.09;letter-spacing:-.03em;max-width:21ch;margin-bottom:18px}
.h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.h4{font-size:17px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.dot{color:var(--green)}
.mark{background:var(--mint);padding:0 .12em;border-radius:3px}
.lede{font-size:clamp(16px,1.8vw,18.5px);line-height:1.55;color:var(--grey);max-width:56ch}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:15px}

.prose{max-width:66ch}
.prose p{color:var(--grey);font-size:16.5px;margin-bottom:18px}
.prose p strong{color:var(--ink);font-weight:600}
.prose h3{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:38px 0 12px}
.prose ul{list-style:none;margin:0 0 22px}
.prose li{color:var(--grey);font-size:16.5px;padding-left:22px;position:relative;margin-bottom:9px}
.prose li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.prose a{color:var(--green-deep)}

/* ============ BANDS ============ */
.band{padding:92px 0}
.band--sm{padding:64px 0}
.band--mint{background:var(--mint-soft)}
.band--dark{background:var(--dark);color:#fff}
.band--dark .lede{color:#A6A6A6}
.band--dark .eyebrow{color:#8A8A8A}
.band--dark .prose p,.band--dark .prose li{color:#A6A6A6}
.band--line{border-top:1px solid var(--line)}

.phead{padding:70px 0 46px}
.phead .lede{margin-top:4px}

/* ============ HERO BITS ============ */
.hero{padding:64px 0 50px}
.ticks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:30px}
.tick{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--grey)}
.tick svg{flex:none}

.finder{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 20px;
  max-width:560px;background:var(--white);
}
.finder:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(11,194,104,.15)}
.finder__in{
  flex:1 1 200px;border:none;outline:none;background:none;
  font-family:var(--mono);font-size:15px;color:var(--ink);padding:9px 0;
}
.finder__in::placeholder{color:#9B9B9B}
.finder .btn{padding:13px 24px;font-size:15px}
.hero__note{font-size:14px;color:var(--grey);margin-top:14px}
.hero__note a{color:var(--green-deep)}

/* ============ LEDGER ============ */
.ledger{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:44px;background:var(--white)}
.ledger__head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--mint-soft);
}
.ledger__phase{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--green-deep);font-weight:500}
.ledger__count{font-family:var(--mono);font-size:11px;color:var(--grey);font-variant-numeric:tabular-nums}
.ledger__count b{color:var(--ink);font-weight:500}
.ledger__body{height:232px;padding:12px 22px}

.row{
  display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:baseline;
  font-family:var(--mono);font-size:12.5px;line-height:1.5;padding:6px 0;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(5px);transition:opacity .32s ease,transform .32s ease;
}
.row.is-in{opacity:1;transform:none}
.row__date{color:var(--grey);font-variant-numeric:tabular-nums}
.row__text{color:var(--ink)}
.row__tag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.row__tag--found{color:var(--amber)}
.row__tag--ok{color:var(--green-deep)}
.row__tag--seal{color:var(--grey)}

.ledger__line{height:3px;background:var(--green);width:0%;transition:width .5s linear}
.ledger__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding:15px 22px;border-top:1px solid var(--line)}
.ledger__since{font-size:17px;font-weight:600;letter-spacing:-.02em}
.ledger__since span{font-variant-numeric:tabular-nums}
.ledger__hash{font-family:var(--mono);font-size:11px;color:var(--grey)}

.replay{
  margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);background:none;border:none;cursor:pointer;padding:4px 0;
}
.replay:hover{color:var(--green-deep)}
.replay:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ============ LAYOUT HELPERS ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:44px}
.three p{color:var(--grey);font-size:15.5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:44px}
.two p{color:var(--grey);font-size:15.5px}

/* ============ CARDS ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.wcard{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:14px;padding:26px 22px;background:var(--white);
  transition:border-color .15s;
}
.wcard:hover{border-color:var(--green)}
.wcard__ico{
  width:40px;height:40px;border-radius:10px;background:var(--mint-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.wcard h3{font-size:17px;font-weight:600;letter-spacing:-.015em;margin-bottom:7px}
.wcard p{font-size:14.5px;color:var(--grey);line-height:1.5}
.wcard__more{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--green-deep)}

.callout{
  background:var(--dark);color:#fff;border-radius:16px;padding:38px 34px;margin-top:56px;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
}
.callout h3{font-size:24px;font-weight:800;letter-spacing:-.028em;margin-bottom:6px}
.callout__sub{color:var(--green);font-weight:600;font-size:16px;margin-bottom:16px}
.callout ul{list-style:none;display:grid;gap:8px}
.callout li{font-size:15px;color:#B4B4B4;display:flex;gap:10px;align-items:baseline}
.callout li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:none;transform:translateY(-3px)}

/* ============ DATA CARD ============ */
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:40px}
.card__bar{
  padding:14px 22px;border-bottom:1px solid var(--line);background:var(--mint-soft);
  font-family:var(--mono);font-size:11.5px;color:var(--grey);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.card__group{padding:16px 22px 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.card__list{list-style:none;padding:0 22px 12px}
.card__item{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;
}
.card__item:last-child{border-bottom:none}
.card__mark{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.card__mark--a{color:var(--amber)}
.card__mark--n{color:var(--grey)}
.card__fix{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--green-deep);text-decoration:none}
.card__fix:hover{text-decoration:underline}

.rec__head{padding:22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.rec__who{font-size:21px;font-weight:700;letter-spacing:-.025em}
.rec__url{font-family:var(--mono);font-size:12px;color:var(--grey)}
.rec__stat{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.rec__cell{padding:22px;border-right:1px solid var(--line)}
.rec__cell:last-child{border-right:none}
.rec__num{font-size:32px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.rec__lbl{font-size:13px;color:var(--grey);margin-top:7px}
.rec__rows{padding:8px 22px 16px}
.rec__seal{padding:14px 22px;border-top:1px solid var(--line);background:var(--mint-soft);font-family:var(--mono);font-size:11px;color:var(--grey)}

/* ============ COMPARE ============ */
.compare{max-width:62ch;margin-top:8px}
.compare p{color:var(--grey);font-size:16.5px;margin-bottom:18px}
.compare p:last-child{margin-bottom:0}
.compare strong{color:var(--ink);font-weight:600}
.compare__honest{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-top:30px;font-size:15.5px;color:var(--grey)}

/* ============ PRICING ============ */
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
.tier{border:1px solid var(--line);border-radius:14px;padding:24px 20px;background:var(--white);display:flex;flex-direction:column}
.tier--pick{border-color:var(--green);border-width:2px}
.tier__p{font-size:31px;font-weight:800;letter-spacing:-.035em;line-height:1}
.tier__n{font-size:13px;font-weight:600;color:var(--green-deep);margin:8px 0 14px}
.tier__w{font-size:14px;line-height:1.5;color:var(--grey);margin-bottom:16px}
.tier__list{list-style:none;display:grid;gap:8px;margin-top:auto}
.tier__list li{font-size:13.5px;color:var(--grey);padding-left:18px;position:relative}
.tier__list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.tiers__note{font-size:14.5px;color:var(--grey);margin-top:20px}

/* ============ TABLE ============ */
.tbl{width:100%;border-collapse:collapse;margin-top:36px;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:13px;font-weight:600;color:var(--grey);letter-spacing:.01em}
.tbl td{color:var(--grey)}
.tbl td:first-child{color:var(--ink);font-weight:500}

/* ============ FAQ ============ */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq__q{border-bottom:1px solid var(--line);padding:22px 0}
.faq__q h3{font-size:17.5px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px}
.faq__q p{color:var(--grey);font-size:15.5px;max-width:70ch}

/* ============ CLOSE ============ */
.close{text-align:center;padding:92px 0;background:var(--mint-soft)}
.close .h2{margin-left:auto;margin-right:auto}
.close .lede{margin:0 auto 28px}
.close__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============ FOOTER ============ */
.foot{background:var(--dark);color:#fff;padding:64px 0 0}
.foot__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px 32px;
  padding-bottom:52px;border-bottom:1px solid var(--dark-line);
}
.foot__logo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:20px;letter-spacing:-.035em;color:#fff;margin-bottom:14px;text-decoration:none}
.foot__blurb{font-size:14.5px;color:#9A9A9A;line-height:1.55;max-width:34ch;margin-bottom:20px}
.foot__proof{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;color:#B4B4B4;
  border:1px solid var(--dark-line);border-radius:999px;padding:8px 15px;text-decoration:none;
}
.foot__proof:hover{border-color:#5A5A5A;color:#fff}
.foot__pulse{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.foot__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#7A7A7A;margin-bottom:16px}
.foot__list{list-style:none;display:grid;gap:11px}
.foot__list a{color:#C4C4C4;text-decoration:none;font-size:14.5px}
.foot__list a:hover{color:#fff}
.foot__tag{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:rgba(11,194,104,.16);color:var(--green);padding:2px 7px;border-radius:4px;margin-left:7px}
.foot__bot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 0 30px}
.foot__legal{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.foot__legal a,.foot__copy{font-size:13.5px;color:#8A8A8A;text-decoration:none}
.foot__legal a:hover{color:#C4C4C4}
.foot__built{font-size:13.5px;color:#8A8A8A;display:flex;align-items:center;gap:8px}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .nav,.head__login{display:none}
  .burger{display:block}
}
@media (max-width:900px){
  .foot__top{grid-template-columns:1fr 1fr;gap:36px 28px}
  .cards{grid-template-columns:1fr 1fr}
  .split,.three,.two{grid-template-columns:1fr;gap:32px}
  .callout{grid-template-columns:1fr;gap:24px}
  .tiers{grid-template-columns:1fr 1fr}
  .rec__stat{grid-template-columns:1fr}
  .rec__cell{border-right:none;border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .band{padding:62px 0}
  .close{padding:62px 0}
  .hero{padding:40px 0 36px}
  .phead{padding:44px 0 34px}
  .cards,.cards--2,.tiers{grid-template-columns:1fr}
  .row{grid-template-columns:62px 1fr;font-size:11.5px}
  .row__tag{grid-column:2;padding-top:2px}
  .ledger__body{height:272px}
  .card__item{grid-template-columns:1fr auto}
  .card__mark{grid-column:1;order:-1}
  .foot__top{grid-template-columns:1fr;gap:32px}
  .foot__bot{flex-direction:column;align-items:flex-start;gap:14px}
  .tbl{font-size:14px}
  .tbl th,.tbl td{padding:12px 8px}
}
@media (prefers-reduced-motion:reduce){.row,.ledger__line,.drop{transition:none}}

/* ============ POSTS ============ */
.post__meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--grey);margin-bottom:11px;display:block;
}
.wcard--post h3{font-size:19px;line-height:1.28;margin-bottom:9px}
.sec__top{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.sec__all{font-size:15px;font-weight:600;color:var(--green-deep);text-decoration:none;white-space:nowrap;padding-bottom:4px}
.sec__all:hover{text-decoration:underline}

/* ============ DEFINITIVE GUIDE ============
   Adapted from the chaptered long-form format: full-bleed hero, a contents
   grid, and a coloured band opening every chapter. The structure is what
   makes it feel like a different class of page. The palette stays ours —
   copying someone's blue would be the obvious tell. */

.dg-hero{background:var(--dark);color:#fff;padding:74px 0 82px;position:relative;overflow:hidden}
.dg-hero__in{max-width:760px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.dg-hero__eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;text-align:center;
}
.dg-hero__title{
  font-size:clamp(38px,6vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  text-align:center;margin-bottom:22px;
}
.dg-hero__meta{
  display:flex;justify-content:center;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:#9A9A9A;padding-bottom:30px;margin-bottom:32px;
  border-bottom:1px solid var(--dark-line);
}
.dg-hero__meta b{color:#C4C4C4;font-weight:500}
.dg-hero p{font-size:17px;line-height:1.62;color:#C4C4C4;margin-bottom:18px}
.dg-hero__learn{
  background:rgba(11,194,104,.08);border:1px solid rgba(11,194,104,.25);
  border-radius:14px;padding:24px 26px;margin-top:28px;
}
.dg-hero__learn p{font-size:15px;color:#fff;font-weight:600;margin-bottom:14px}
.dg-hero__learn ul{list-style:none}
.dg-hero__learn li{
  font-size:15.5px;color:#C4C4C4;padding-left:24px;position:relative;margin-bottom:10px;line-height:1.5;
}
.dg-hero__learn li::before{
  content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--green);
}
/* the faint numeral behind the hero, so it reads as chaptered before you scroll */
.dg-hero__ghost{
  position:absolute;right:-40px;bottom:-70px;font-size:280px;font-weight:800;
  color:rgba(255,255,255,.025);letter-spacing:-.06em;line-height:1;z-index:1;user-select:none;
}

.dg-contents{padding:76px 0;background:var(--white)}
.dg-contents h2{
  font-size:clamp(26px,3.6vw,34px);font-weight:800;letter-spacing:-.03em;
  text-align:center;margin-bottom:44px;
}
.dg-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:960px;margin:0 auto;padding:0 24px;
}
.dg-card{
  display:block;text-decoration:none;color:inherit;text-align:center;
  border:1px solid var(--line);border-radius:14px;padding:26px 18px 22px;
  transition:border-color .15s,transform .15s;
}
.dg-card:hover{border-color:var(--green);transform:translateY(-2px)}
.dg-card__n{
  width:54px;height:54px;border-radius:50%;background:var(--mint-soft);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  font-size:20px;font-weight:800;color:var(--green-deep);letter-spacing:-.03em;
}
.dg-card h3{font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.015em;margin-bottom:6px}
.dg-card p{font-size:13px;color:var(--grey);line-height:1.45}

.dg-chapter{background:var(--mint);padding:60px 0;border-top:1px solid #C7EBD8}
.dg-chapter--alt{background:var(--dark);border-top-color:var(--dark-line)}
.dg-chapter__in{max-width:760px;margin:0 auto;padding:0 24px}
.dg-chapter__n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:10px;
}
.dg-chapter--alt .dg-chapter__n{color:var(--green)}
.dg-chapter__t{font-size:clamp(28px,4.2vw,40px);font-weight:800;letter-spacing:-.032em;line-height:1.08;margin-bottom:14px}
.dg-chapter--alt .dg-chapter__t{color:#fff}
.dg-chapter__b{font-size:17px;color:var(--grey);line-height:1.55;max-width:58ch}
.dg-chapter--alt .dg-chapter__b{color:#A6A6A6}

.dg-body{padding:56px 0;background:var(--white)}
.dg-body__in{max-width:720px;margin:0 auto;padding:0 24px}
.dg-body h3{font-size:23px;font-weight:700;letter-spacing:-.022em;margin:38px 0 12px}
.dg-body h3:first-child{margin-top:0}
.dg-body p{font-size:17px;line-height:1.66;color:#2E2E2E;margin-bottom:18px}
.dg-body ul{list-style:none;margin-bottom:22px}
.dg-body li{font-size:17px;line-height:1.6;color:#2E2E2E;padding-left:24px;position:relative;margin-bottom:10px}
.dg-body li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.dg-body a{color:var(--green-deep)}
.dg-body strong{font-weight:600;color:var(--ink)}
.dg-note{
  background:var(--mint-soft);border-left:3px solid var(--green);border-radius:0 12px 12px 0;
  padding:20px 24px;margin:26px 0;font-size:16px;line-height:1.6;color:var(--grey);
}
.dg-note b{color:var(--ink);font-weight:600}

/* sticky chapter rail, so an 8-chapter page stays navigable */
.dg-rail{
  position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:7px;
}
.dg-rail a{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:600;color:var(--grey);text-decoration:none;transition:all .14s;
}
.dg-rail a:hover{border-color:var(--green);color:var(--green-deep);background:var(--mint-soft)}

@media (max-width:1240px){ .dg-rail{display:none} }
@media (max-width:860px){
  .dg-grid{grid-template-columns:repeat(2,1fr)}
  .dg-hero__ghost{display:none}
}
@media (max-width:520px){
  .dg-grid{grid-template-columns:1fr}
  .dg-hero{padding:52px 0 58px}
  .dg-chapter{padding:44px 0}
}

/* Field guide: the same structure at five chapters rather than eight.
   Deliberately lighter — mint hero rather than dark, an inline contents list
   rather than a grid. Padding a five-chapter subject to eight is how this
   format stops feeling like a different class of page. */
.fg-hero{background:var(--mint);padding:60px 0 64px;border-bottom:1px solid #C7EBD8}
.fg-hero__in{max-width:720px;margin:0 auto;padding:0 24px}
.fg-hero__eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:11px;
}
.fg-hero__title{font-size:clamp(32px,5vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin-bottom:18px}
.fg-hero__meta{font-size:13.5px;color:var(--grey);margin-bottom:24px}
.fg-hero__meta b{color:var(--ink);font-weight:500}
.fg-hero p{font-size:17px;line-height:1.6;color:#31402F;margin-bottom:16px}
.fg-toc{background:var(--white);border-radius:14px;padding:22px 26px;margin-top:26px;border:1px solid #C7EBD8}
.fg-toc p{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:12px}
.fg-toc ol{list-style:none;counter-reset:fg}
.fg-toc li{counter-increment:fg;margin-bottom:9px;padding-left:30px;position:relative}
.fg-toc li::before{
  content:counter(fg);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  background:var(--mint-soft);color:var(--green-deep);font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.fg-toc a{font-size:15.5px;color:var(--ink);text-decoration:none;font-weight:500}
.fg-toc a:hover{color:var(--green-deep)}
.fg-toc span{display:block;font-size:13px;color:var(--grey);font-weight:400;margin-top:1px}
.fg-chapter{padding:46px 0 0;background:var(--white)}
.fg-chapter__in{max-width:720px;margin:0 auto;padding:0 24px}
.fg-chapter__n{
  font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:8px;
}
.fg-chapter__t{font-size:clamp(24px,3.4vw,31px);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-bottom:10px}
.fg-chapter__b{font-size:16.5px;color:var(--grey);line-height:1.55;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
@media (max-width:520px){ .fg-hero{padding:44px 0 48px} }

/* ============ BLOG INDEX ============ */
.blog-head{padding:56px 0 0}
.blog-head h1{font-size:clamp(32px,4.6vw,44px);font-weight:800;letter-spacing:-.034em;margin-bottom:12px}
.blog-head p{font-size:17px;color:var(--grey);max-width:64ch;line-height:1.55}
.blog-tabs{display:flex;gap:26px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-top:30px}
.blog-tabs a{
  font-size:15px;font-weight:500;color:var(--grey);text-decoration:none;
  padding:0 0 13px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.blog-tabs a:hover{color:var(--ink)}
.blog-tabs a.on{color:var(--ink);border-bottom-color:var(--green)}

.sec-label{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;letter-spacing:-.022em;margin:44px 0 20px}
.sec-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}

.blog-layout{display:grid;grid-template-columns:1fr 268px;gap:40px;align-items:start}

/* thumbnails: geometric, generated, no stock photography */
.thumb{
  position:relative;border-radius:12px 12px 0 0;overflow:hidden;
  display:flex;align-items:flex-end;padding:18px;min-height:132px;
}
.thumb::after{
  content:"";position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
}
.thumb--a{background:linear-gradient(135deg,#0BC268,#046B39)}
.thumb--b{background:linear-gradient(135deg,#1E4D3A,#0A1F16)}
.thumb--c{background:linear-gradient(135deg,#12A65C,#0C4A5E)}
.thumb--d{background:linear-gradient(135deg,#2B6B52,#123A2C)}
.thumb--e{background:linear-gradient(135deg,#0E8F6F,#04352D)}
.thumb__cat{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.72);position:relative;z-index:2;
}
.thumb__t{
  font-size:15px;font-weight:700;color:#fff;line-height:1.3;letter-spacing:-.015em;
  position:relative;z-index:2;margin-top:5px;
}
.thumb--big{min-height:236px;padding:26px}
.thumb--big .thumb__t{font-size:23px;letter-spacing:-.025em}
.thumb--big::after{width:260px;height:260px;right:-60px;top:-70px}

.pcard{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s;
}
.pcard:hover{border-color:var(--green);transform:translateY(-2px)}
.pcard__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.pcard__cat{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:8px;
}
.pcard__t{font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.018em;margin-bottom:8px}
.pcard__d{font-size:14px;color:var(--grey);line-height:1.5;margin-bottom:14px;flex:1}
.pcard__m{font-size:12.5px;color:#9A9A9A;font-family:var(--mono)}
.pcard--big .pcard__t{font-size:21px;letter-spacing:-.026em}
.pcard--big .pcard__d{font-size:15px}

.featured{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.rail{position:sticky;top:88px;display:grid;gap:16px}
.rail__box{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white)}
.rail__h{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey);padding:15px 17px 11px;
}
.rail__list{list-style:none;padding:0 8px 10px}
.rail__list a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 9px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:14.5px;
}
.rail__list a:hover{background:var(--mint-soft);color:var(--green-deep)}
.rail__n{
  font-family:var(--mono);font-size:11px;background:var(--mint-soft);color:var(--green-deep);
  min-width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;
}
.rail__item{display:block;padding:12px 17px;border-top:1px solid var(--line);text-decoration:none}
.rail__item:first-of-type{border-top:none}
.rail__item strong{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:-.012em}
.rail__item:hover strong{color:var(--green-deep)}
.rail__item span{display:block;font-family:var(--mono);font-size:11px;color:#9A9A9A;margin-top:5px}
.rail__cta{background:var(--dark);color:#fff;border-radius:12px;padding:20px}
.rail__cta h4{font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:7px}
.rail__cta p{font-size:13.5px;color:#A6A6A6;line-height:1.5;margin-bottom:14px}
.rail__cta .btn{width:100%;padding:11px 16px;font-size:14.5px;justify-content:center}
.rail__quick{background:var(--mint-soft);border:1px solid #C7EBD8;border-radius:12px;padding:18px}
.rail__quick .rail__h{padding:0 0 8px;color:var(--green-deep)}
.rail__quick strong{display:block;font-size:14.5px;font-weight:600;line-height:1.4;margin-bottom:6px}
.rail__quick p{font-size:13px;color:var(--grey);line-height:1.5;margin-bottom:10px}
.rail__quick a{font-size:13.5px;font-weight:600;color:var(--green-deep);text-decoration:none}
.rail__quick a:hover{text-decoration:underline}

/* ============ ARTICLE LAYOUT: three columns ============ */
.art{display:grid;grid-template-columns:210px minmax(0,1fr) 268px;gap:40px;align-items:start;padding:40px 0 70px}
.art__left{position:sticky;top:88px}
.art__leftH{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey);margin-bottom:12px;
}
.art__toc{list-style:none;border-left:2px solid var(--line);margin-bottom:26px}
.art__toc a{
  display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;
  font-size:13.5px;line-height:1.4;color:var(--grey);text-decoration:none;
}
.art__toc a:hover{color:var(--ink);border-left-color:var(--green)}
.art__toc a.on{color:var(--green-deep);border-left-color:var(--green);font-weight:500}
.art__share{display:flex;gap:8px;padding-top:18px;border-top:1px solid var(--line)}
.art__share a{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--grey);text-decoration:none;
  font-size:12px;font-weight:600;
}
.art__share a:hover{border-color:var(--green);color:var(--green-deep)}
.art__main{min-width:0}
/* The right rail scrolls with the article; only the CTA pins. Sticking the
   whole column meant the CTA sat wherever the widgets left it, frequently
   off-screen on a long post. */
.art__right{display:flex;flex-direction:column;gap:16px;height:100%}
.art__rightTop{display:flex;flex-direction:column;gap:16px}
.art__cta{
  position:sticky;bottom:24px;margin-top:auto;
  /* margin-top:auto pushes it to the foot of the column so that on a short
     post it sits below the widgets rather than floating mid-column. */
}
.art__cta .rail__cta{box-shadow:0 6px 24px rgba(0,0,0,.10)}

@media (max-width:1180px){
  .art{grid-template-columns:minmax(0,1fr) 268px;gap:32px}
  .art__left{display:none}
}
@media (max-width:940px){
  .art{grid-template-columns:1fr}
  .art__right{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;height:auto}
  .art__rightTop{display:contents}
  .art__cta{position:static;margin-top:0}
  .blog-layout{grid-template-columns:1fr}
  .rail{position:static;grid-template-columns:1fr 1fr;display:grid}
  .featured{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .grid3,.art__right,.rail{grid-template-columns:1fr}
}


/* Reading progress. Thin, at the very top, only on article pages. */
.readbar{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:var(--green);transition:width .08s linear;
}
.art__toc{max-height:calc(100vh - 260px);overflow-y:auto}
.art__toc::-webkit-scrollbar{width:3px}
.art__toc::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}

/* See-also strip, for cross-links between related pages in different sets. */
.seealso{
  margin:30px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:12px;
}
.seealso p{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey);margin-bottom:10px;
}
.seealso ul{list-style:none;margin:0}
.seealso li{margin-bottom:7px;font-size:15px;line-height:1.45}
.seealso li:last-child{margin-bottom:0}
.seealso a{color:var(--ink);text-decoration:none}
.seealso a:hover{color:var(--green-deep);text-decoration:underline}

/* ============ MEGA MENU ============
   The Learn menu had fifteen entries with identical descriptions, which is a
   list rather than navigation. Three columns grouped by what the reader is
   actually trying to do, with a description per item that says something
   different from its neighbour. */
.drop--mega{
  min-width:760px;padding:22px;
  display:grid;grid-template-columns:1fr 1fr 236px;gap:26px;
  left:auto;right:0;
}
.drop__col{min-width:0}
.drop__colH{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);padding:0 10px 9px;
}
.drop--mega a{padding:8px 10px}
.drop--mega a span{font-size:12px;line-height:1.35}
.drop__aside{
  background:var(--mint-soft);border-radius:12px;padding:16px;
  display:flex;flex-direction:column;
}
.drop__aside .drop__colH{padding:0 0 8px;color:var(--green-deep)}
.drop__aside a{padding:7px 0;font-size:14px}
.drop__aside a:hover{background:none;text-decoration:underline}
.drop__asideNote{
  font-size:12.5px;color:var(--grey);line-height:1.5;margin-top:auto;padding-top:14px;
  border-top:1px solid #C7EBD8;
}
.drop__more{
  display:block;margin-top:10px;padding:9px 10px !important;
  font-size:13.5px !important;color:var(--green-deep) !important;font-weight:600 !important;
  border-top:1px solid var(--line);border-radius:0 !important;
}
.drop__more:hover{background:none !important;text-decoration:underline}

@media (max-width:1080px){
  .drop--mega{min-width:520px;grid-template-columns:1fr 1fr}
  .drop__aside{grid-column:1 / -1}
}
@media (max-width:760px){
  .drop--mega{min-width:280px;grid-template-columns:1fr;gap:16px}
}

/* ============ SCAN PROGRESS ============
   A scan can take 25 seconds on a slow registry. Six lines appearing at a
   fixed interval implied progress that was not real — the bar now reflects
   elapsed time against a realistic ceiling, and each step is ticked off. */
.scanbar{
  height:8px;background:#EDEDEA;border-radius:99px;overflow:hidden;
  margin:22px 0 0;
}
.scanbar__fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--green-deep),var(--green));
  transition:width .35s cubic-bezier(.4,0,.2,1);
  position:relative;
}
/* A moving sheen, so a long scan still looks alive when the width is barely
   advancing. Removed entirely under reduced motion. */
.scanbar__fill::after{
  content:"";position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:scansheen 1.5s ease-in-out infinite;
}
@keyframes scansheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.scansteps{display:grid;gap:9px}
.scanstep{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;color:#9A9A9A;transition:color .2s;
}
.scanstep__dot{
  width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.scanstep.is-doing{color:var(--ink)}
.scanstep.is-doing .scanstep__dot{
  border-color:var(--green);
  animation:scanpulse 1.1s ease-in-out infinite;
}
.scanstep.is-done{color:var(--grey)}
.scanstep.is-done .scanstep__dot{background:var(--green);border-color:var(--green)}
.scanstep.is-done .scanstep__dot::after{
  content:"";width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
@keyframes scanpulse{0%,100%{box-shadow:0 0 0 0 rgba(11,194,104,.35)}50%{box-shadow:0 0 0 5px rgba(11,194,104,0)}}
@media (prefers-reduced-motion:reduce){
  .scanstep.is-doing .scanstep__dot{animation:none}
  .scanbar__fill{transition:none}
  .scanbar__fill::after{display:none}
}

/* ============ RESULT SUMMARY ============
   Findings were a flat list of text, so a domain with nothing wrong and one
   with four problems looked alike at a glance. */
.summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-bottom:1px solid var(--line);
}
.summary__cell{background:var(--white);padding:16px 18px;text-align:center}
.summary__n{
  font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.03em;
  color:var(--ink);line-height:1.1;
}
.summary__n--ok{color:var(--green-deep)}
.summary__n--warn{color:#B8791F}
.summary__n--none{color:#C4C4C4}
.summary__l{
  font-size:11.5px;color:var(--grey);margin-top:5px;line-height:1.3;
}
.card__item--unread{opacity:.72}
.card__mark--u{color:#9A9A9A}
.holding__ico{
  width:22px;height:22px;border-radius:6px;background:var(--mint-soft);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--green-deep);margin-right:10px;
}
.holding__ico--u{background:#F1F1F1;color:#9A9A9A}
@media (max-width:620px){
  .summary{grid-template-columns:repeat(2,1fr)}
}

/* Sample-record labelling. A product that says duration cannot be backdated
   must not show a fabricated customer with 1,247 days on the record. */
.rec__sample{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);background:#F1F1F1;border-radius:999px;padding:4px 10px;margin-left:10px;
}
.rec__note{
  padding:14px 22px;border-top:1px solid var(--line);background:var(--white);
  font-size:13.5px;color:var(--grey);line-height:1.5;
}
.rec__note a{color:var(--green-deep)}

/* First-scan explanation. A scan with no previous snapshot cannot report a
   change; saying so is clearer than leaving an apparent gap. */
.baseline{
  padding:20px 22px;border-bottom:1px solid var(--line);
  background:var(--mint-soft);
}
.baseline__h{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:9px;
}
.baseline p{font-size:14.5px;line-height:1.6;color:var(--grey);margin-bottom:8px}
.baseline p:last-child{margin-bottom:0}

/* ============ ACCOUNT MENU ============
   The signed-in control in the header. Replaces "Log in" with an avatar that
   opens a small menu — the pattern people already know, and it keeps the
   dashboard header free for the thing the page is actually about. */
.acct{position:relative;display:inline-flex;align-items:center}
.acct__btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--mint-soft);color:var(--green-deep);
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .15s;padding:0;
}
.acct__btn:hover{border-color:var(--green)}
.acct__btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}

.acct__menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:232px;
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.10);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s,transform .14s,visibility .14s;z-index:120;
}
.acct.is-open .acct__menu{opacity:1;visibility:visible;transform:translateY(0)}

.acct__head{padding:11px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct__email{
  font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acct__plan{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-deep);margin-top:4px;
}
.acct__menu a{
  display:block;padding:9px 12px;border-radius:8px;
  font-size:14.5px;color:var(--ink);text-decoration:none;
}
.acct__menu a:hover{background:var(--mint-soft);color:var(--green-deep)}
.acct__rule{height:1px;background:var(--line);margin:6px 0}
.acct__menu a.acct__out{color:var(--grey)}
.acct__menu a.acct__out:hover{color:#B4382C;background:#FBEBE9}

@media (max-width:640px){
  .acct__menu{right:-8px;min-width:210px}
}