/* ==========================================================================
   Lead That Convert — design layer v2 "modern"
   Alternative to design.css. Same structure, same copy, same sections.
   Deviates from brief §4/§9/§13 on three specific points, deliberately:
     · a real display typeface instead of system-only
     · layered depth restored on hero + proof surfaces
     · dark full-bleed sections to break a 21-section white scroll
   Swap the <link> back to /assets/design.css to revert instantly.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap');
/* FONT FALLBACK NOTE: if the webfont is blocked the stack below still renders
   the same layout, just in the system face. Nothing breaks. */

:root{
  /* ── surfaces: warmer, with real tonal range ─────────────────────── */
  --paper:#FFFFFF;
  --cream:#F7F6F4;
  --mist:#F2F1EE;
  --blush:#F7F6F4;
  --ink:#0F1115;
  --ink2:#2A2E36;
  --ink3:#6B7280;
  --ink4:#8A909B;
  --hair:#E4E4E2;
  --red:#D01414;
  --red-soft:#FF4D4D;
  --teal:#0E7C66;

  --sec:clamp(64px,7.5vw,108px);
  --mw:1120px;
  --r:20px;
  --r-lg:28px;

  /* layered elevation — depth is what reads as "modern" */
  --sh:0 1px 2px rgba(15,17,21,.04), 0 4px 12px rgba(15,17,21,.04);
  --sh-md:0 2px 4px rgba(15,17,21,.04), 0 12px 32px rgba(15,17,21,.07);
  --sh-lg:0 4px 8px rgba(15,17,21,.05), 0 24px 64px rgba(15,17,21,.10);

  --f:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --f-display:"Instrument Sans",-apple-system,system-ui,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
}

body{
  font-family:var(--f);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── TYPOGRAPHY: editorial scale, tight tracking ────────────────────── */
.h1{
  font-family:var(--f-display);
  font-size:clamp(44px,6.4vw,86px);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.045em;
}
.h2{
  font-family:var(--f-display);
  font-size:clamp(32px,4.4vw,56px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.035em;
}
.h3{ font-size:20px; font-weight:600; letter-spacing:-.018em; line-height:1.3; }
.lede{
  font-size:clamp(18px,1.55vw,22px);
  line-height:1.55;
  color:var(--ink3);
  letter-spacing:-.011em;
  font-weight:400;
}
p{ font-size:17px; line-height:1.65; letter-spacing:-.006em; }

/* serif italic accent — one editorial touch, used on emphasis spans */
.h1 em, .h2 em, .gap-line .hl{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.02em;
}

/* ── HERO: depth + atmosphere ───────────────────────────────────────── */
.hero{
  position:relative;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(208,20,20,.055), transparent 62%),
    radial-gradient(760px 460px at 88% 4%,  rgba(14,124,102,.05),  transparent 60%),
    linear-gradient(180deg,#FBFAF9 0%, var(--paper) 70%);
  background-size:auto;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,var(--paper) 100%);
}

/* ── NAV: floating pill, not a bar ──────────────────────────────────── */
#nav{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(228,228,226,.7);
  box-shadow:none;
}
#nav.scrolled{
  background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--hair);
  box-shadow:0 1px 24px rgba(15,17,21,.05);
}
.nav-in{ min-height:60px; }
#navlogo{ height:40px; width:auto; }
.nav-links a{
  font-size:14px; font-weight:500; color:var(--ink2);
  letter-spacing:-.008em; transition:color .2s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-right .btn.btn-1{
  height:40px; padding:0 20px; font-size:14px; font-weight:600;
  background:var(--ink); border-color:var(--ink); color:#fff;
  box-shadow:0 1px 2px rgba(15,17,21,.16), 0 6px 18px rgba(15,17,21,.14);
}
.nav-right .btn.btn-1:hover{ transform:translateY(-1px); box-shadow:var(--sh-md); }

/* ── CARDS: real elevation, gradient hairline top edge ──────────────── */
.card,.proof,.qcard,.person,.tcard,.mech-card,.sym-card,.gterm,.lic-card,.hstat{
  position:relative;
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--r);
  box-shadow:var(--sh);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.card:hover,.proof:hover,.mech-card:hover,.sym-card:hover,.hstat:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-lg);
  border-color:#DCDCDA;
}
/* proof cards get an accent edge — red means something here */
.proof::before,.hstat::before{
  content:""; position:absolute; top:0; left:22px; right:22px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(208,20,20,.5),transparent);
  opacity:0; transition:opacity .35s ease;
}
.proof:hover::before,.hstat:hover::before{ opacity:1; }

.panel,.panel-mist{
  background:linear-gradient(180deg,#FAFAF9,var(--cream));
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
}

/* ── DARK SECTIONS: the thing that breaks the flat white scroll ─────── */
.cta-panel,.gtee{
  background:
    radial-gradient(680px 340px at 20% 0%, rgba(208,20,20,.16), transparent 60%),
    linear-gradient(165deg,#16191F 0%, #0F1115 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  color:#fff;
}
.cta-panel .h2,.gtee .h2{ color:#fff; }
.cta-panel .lede,.gtee .lede{ color:rgba(255,255,255,.62); }
.cta-panel p,.gtee p{ color:rgba(255,255,255,.62); }
.cta-panel .chip,.gtee .chip{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);
}
.cta-panel .btn-1,.gtee .btn-1{
  background:#fff; border-color:#fff; color:var(--ink);
}
.cta-panel .btn-1:hover,.gtee .btn-1:hover{ background:#F2F1EE; border-color:#F2F1EE; }
.gtee .gterm{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:none;
  color:rgba(255,255,255,.78);
}
.gtee::before{ opacity:.05; color:#fff; }

/* ── NUMBERS: the proof should dominate ─────────────────────────────── */
.num,.big,.hstat .n,.stat .n{
  font-family:var(--f-display);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  letter-spacing:-.045em;
}
.big{ font-size:clamp(44px,5.6vw,72px); line-height:.95; }
.big em{ color:var(--ink4); font-style:normal; font-weight:400; }
.hstat .n{ font-size:clamp(30px,3.2vw,40px); }
.stat .n{ font-size:clamp(32px,3.6vw,46px); }

/* ── CHIPS: quieter, modern ─────────────────────────────────────────── */
.chip{
  font-size:12px; font-weight:600; letter-spacing:.01em;
  border-radius:999px; padding:7px 14px;
}
.chip.grey{
  background:rgba(15,17,21,.035);
  border:1px solid transparent;
  color:var(--ink3);
}

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.btn{
  border-radius:999px; font-weight:600; letter-spacing:-.008em;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background .25s ease;
}
.btn-1{
  background:var(--ink); border-color:var(--ink); color:#fff;
  box-shadow:0 1px 2px rgba(15,17,21,.18), 0 8px 24px rgba(15,17,21,.16);
}
.btn-1:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(15,17,21,.2), 0 16px 40px rgba(15,17,21,.2); }
.btn-2{ background:transparent; border:1px solid var(--hair); color:var(--ink); }
.btn-2:hover{ border-color:var(--ink); transform:translateY(-2px); }

/* ── MOTION: fewer, better ──────────────────────────────────────────── */
.rv{
  opacity:0;
  transform:translateY(22px) scale(.994);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform;
}
.rv.vs{ opacity:1; transform:none; }
.flo-stat,.flo-quote{ animation:none !important; }

/* hero stat cards stay centred */
.hero-stats{ margin-left:auto; margin-right:auto; }

/* ── FOOTER ─────────────────────────────────────────────────────────── */
footer{
  background:linear-gradient(180deg,#0F1115,#0A0C0F);
  border-top:1px solid rgba(255,255,255,.07);
}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq-i{
  border:1px solid var(--hair); border-radius:16px;
  background:var(--paper); box-shadow:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq-i:hover{ border-color:#DCDCDA; box-shadow:var(--sh); }
.faq-i.on{ border-color:#D6D6D3; box-shadow:var(--sh); }

/* ── ACCESSIBILITY ──────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .rv{ opacity:1; transform:none; }
}

/* ==========================================================================
   HERO v3 — borrows the Gemini scale/restraint, keeps LTC proof
   ========================================================================== */
.hero-top{ padding-top:clamp(28px,5vw,72px); }

/* headline: much bigger, tighter, lighter weight */
.hero-top .h1{
  font-size:clamp(46px,8.2vw,104px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.05em;
  max-width:15ch;
  margin-inline:auto;
}

/* gradient accent on the payoff words */
.hero-top .h1 .grad{
  background:linear-gradient(96deg,#D01414 0%,#E4572E 38%,#0E7C66 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-style:normal; font-family:inherit;
}

/* subhead: lighter, roomier, single measure */
.hero-top .lede{
  font-size:clamp(18px,1.7vw,23px);
  color:var(--ink3);
  max-width:52ch;
  margin:26px auto 0;
  font-weight:400;
}
.hero-top .lede b{ color:var(--ink2); font-weight:600; }

/* one dominant CTA; secondary demoted to a quiet link */
.hero-top .btns{ margin-top:38px; align-items:center; gap:12px; }
.hero-top .btn-1{
  height:56px; padding:0 34px; font-size:16.5px; border-radius:999px;
}
.hero-top .btn-2{
  border:none; background:transparent; height:auto; padding:6px 10px;
  font-size:15px; color:var(--ink3); text-decoration:underline;
  text-underline-offset:4px; text-decoration-color:rgba(107,114,128,.35);
}
.hero-top .btn-2:hover{
  color:var(--ink); transform:none;
  text-decoration-color:var(--ink);
}

/* location chip: quieter, it is not the headline */
.hero-top .chip{
  background:transparent; border:1px solid var(--hair);
  color:var(--ink3); font-weight:500;
}

/* proof gets air beneath the fold line */
.hero-stats{ margin-top:clamp(48px,6vw,80px); }

/* ── industry-page parity with homepage surfaces ─────────────────────── */
.sym-card,.mech-card{ padding:28px 30px; }
.sym-card b{ font-size:17px; letter-spacing:-.015em; margin-bottom:8px; }
.mech-card .tag{
  font-family:var(--f-display); font-size:12px; font-weight:600;
  color:var(--red); letter-spacing:.02em;
}
.mech-card h3{ margin-bottom:10px; }
.story-block p{ font-size:17.5px; line-height:1.7; color:var(--ink2); }
.story-block h3{ margin-top:32px; }

/* adjacent-proof + stats rows read as data, not decoration */
.stat-plain .n{ font-family:var(--f-display); letter-spacing:-.04em; }
.stat-plain .l{ color:var(--ink3); font-size:14px; line-height:1.45; }

/* hero stat cards on inner pages: same weight as homepage */
.hero-stats .hstat{ padding:20px 16px; }
.hero-stats .hstat .n{ font-size:clamp(26px,2.9vw,36px); }
.hero-stats .hstat .l{ font-size:13px; color:var(--ink3); margin-top:8px; }

/* fit checklist */
.fitcol{ border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--sh); background:var(--paper); }
.fitcol li{ font-size:16.5px; }

/* ── book pre-registration block ─────────────────────────────────────── */
.book-wrap{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px); align-items:center;
}
@media(max-width:800px){ .book-wrap{ grid-template-columns:1fr; } }

/* ── cs-hero: bring internal sub-pages (Results, case studies, About,
   How it works, LTC AI) up to the same hero language as the homepage ── */
.cs-hero{
  position:relative;
  padding-top:clamp(40px,6vw,88px);
  text-align:center;
  background:
    radial-gradient(760px 420px at 14% -12%, rgba(208,20,20,.05), transparent 60%),
    radial-gradient(620px 380px at 90% 0%,  rgba(14,124,102,.045), transparent 58%);
}
.cs-hero .wrap{ max-width:900px; margin-left:auto; margin-right:auto; }
.cs-hero .chip{
  background:transparent; border:1px solid var(--hair); color:var(--ink3); font-weight:500;
}
.cs-hero .h1{
  font-family:var(--f-display);
  font-size:clamp(38px,6.2vw,78px);
  font-weight:500;
  line-height:.96;
  letter-spacing:-.045em;
  margin:16px auto 0;
  max-width:17ch;
}
.cs-hero .h1 .grad{
  background:linear-gradient(96deg,#D01414 0%,#E4572E 38%,#0E7C66 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.cs-hero .lede{
  font-size:clamp(17px,1.5vw,20px);
  max-width:56ch;
  margin-left:auto; margin-right:auto;
  color:var(--ink3);
}
.cs-attrib{
  font-size:14.5px; color:var(--ink4);
  margin:14px auto 0; max-width:60ch;
}

/* ── real book cover image ───────────────────────────────────────────── */
.book-cover-img{
  position:relative; border-radius:8px; overflow:hidden;
  box-shadow:0 3px 8px rgba(15,17,21,.2), 0 28px 60px rgba(15,17,21,.32);
  border:1px solid rgba(0,0,0,.08);
}
.book-cover-img img{ display:block; width:100%; height:auto; }

/* ── brand gradient sweep: replace solid red with the hero gradient on
   visible brand-accent elements. Functional elements (focus outlines,
   tiny leak-visualization dots) stay solid red for legibility/a11y. ── */
/* ── COMPREHENSIVE BRAND GRADIENT SWEEP ──────────────────────────────
   Every remaining solid-red brand accent, in one pass. Grouped by why
   each needs different handling: pure text, or a box with a background
   that background-clip:text would otherwise erase. ── */

/* GROUP 1 — pure text colour, safe for gradient-text treatment */
.tint,
.mech-card .tag,
.proof .go,
.lic-cta a,
.quote .mark,
.gterm .k,
.cmp .us b,
.northstar span,
.nq-i .mark,
.flo-stat .n,
.lic-card .lic-link a,
.leak-note.pop b,
.gap-line .hl{
  background-image:linear-gradient(96deg,#D01414 0%,#E4572E 45%,#0E7C66 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* GROUP 2 — badges/icons/pills with their own background box:
   gradient the box, white text, since background-clip:text would
   otherwise delete the box entirely */
.step .n,.tier.hi .tk,.blk-k,
.ico,.rstep.key .rdot,.rstep .flag,
.tmetric,.named-tag,.lic-card .badge{
  background:linear-gradient(96deg,#D01414 0%,#E4572E 45%,#0E7C66 100%) !important;
  color:#fff !important;
}

/* GROUP 3 — default .chip (the eyebrow pill used at the top of most
   sections — the single most visible remaining red spot on the site).
   Quiet bordered surface, like .chip.grey, but with gradient text so
   it still carries the brand colour instead of going fully neutral. */
.chip:not(.grey){
  background-color:transparent !important;
  background-image:linear-gradient(96deg,#D01414 0%,#E4572E 45%,#0E7C66 100%) !important;
  border:1px solid var(--hair);
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
.chip:not(.grey) .dot{
  background:linear-gradient(96deg,#D01414 0%,#0E7C66 100%) !important;
  -webkit-text-fill-color:initial !important;
}

/* GROUP 4 — small solid dots (bullets, live-pulse markers) */
.sector .d,.scarce .pulse,.lic-card .badge i{
  background:linear-gradient(135deg,#D01414 0%,#0E7C66 100%) !important;
}

/* GROUP 5 — hover-sweep pseudo-elements: this is the ACTUAL visible
   surface on button/nav hover (the plain-background overrides above
   were being covered by these sliding layers) */
.btn-1::before{
  background:linear-gradient(96deg,#D01414 0%,#E4572E 45%,#0E7C66 100%) !important;
}
.nav-links a::after{
  background:linear-gradient(90deg,#D01414 0%,#0E7C66 100%) !important;
}

/* GROUP 6 — funnel/pipeline active-step indicator bar */
.fnl-i.on::before{
  background:linear-gradient(90deg,#D01414 0%,#E4572E 50%,#0E7C66 100%) !important;
}

/* GROUP 7 — leak-visualisation grid cells (small, but per feedback
   the sweep should be complete rather than selectively partial) */
.leak-cell.lit{
  background:linear-gradient(135deg,#D01414 0%,#E4572E 50%,#0E7C66 100%) !important;
}

.btn-1:hover,
.cta-panel .btn-1:hover,
.gtee .btn-1:hover{
  background:linear-gradient(96deg,#D01414 0%,#E4572E 45%,#0E7C66 100%) !important;
  border-color:transparent !important;
  color:#fff !important;
}
.faq-i.on .faq-q span{
  background:linear-gradient(96deg,#D01414 0%,#E4572E 45%,#0E7C66 100%) !important;
}

/* proof-card hover accent: 3-stop brand gradient, not solid red */
.proof::before,.hstat::before{
  background:linear-gradient(90deg,transparent,#D01414 30%,#E4572E 55%,#0E7C66 80%,transparent) !important;
}

/* larger, more visible logo across nav, mobile menu, and footer */
.mob-top{ height:56px !important; }
.mob-top img{ height:44px !important; width:auto; }
.ft-logo{ height:52px !important; width:auto; }

/* ── convergence diagram: four channels into one measured outcome ──── */
.conv-panel{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(700px 380px at 15% 15%, rgba(208,20,20,.14), transparent 60%),
    radial-gradient(600px 340px at 90% 80%, rgba(14,124,102,.12), transparent 60%),
    linear-gradient(165deg,#16191F 0%,#0F1115 100%);
  border:1px solid rgba(255,255,255,.08);
  padding:clamp(28px,4vw,56px) clamp(20px,3vw,44px) clamp(20px,3vw,32px);
  margin:36px 0 8px;
}
.conv-svg{ width:100%; height:auto; display:block; }
.conv-svg .line{
  fill:none; stroke:rgba(255,255,255,.28); stroke-width:1.6;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1);
}
.conv-svg .line-growth{
  fill:none; stroke:url(#convGrad); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.3s cubic-bezier(.2,.7,.3,1) .5s;
  filter:drop-shadow(0 0 8px rgba(228,87,46,.35));
}
.rv.vs .conv-svg .line,
.rv.vs .conv-svg .line-growth{ stroke-dashoffset:0; }
.conv-svg .dot{ fill:#fff; opacity:0; transition:opacity .4s ease 1.5s; }
.rv.vs .conv-svg .dot{ opacity:1; }
.conv-svg .dot-end{ fill:#E4572E; opacity:0; transition:opacity .4s ease 1.7s; }
.rv.vs .conv-svg .dot-end{ opacity:1; }
.conv-label{ fill:#fff; font-family:var(--f); font-size:15px; font-weight:600; }
.conv-sub{ fill:rgba(255,255,255,.42); font-family:var(--f); font-size:11.5px; }
.conv-center{ fill:#fff; font-family:var(--f-display); font-size:13px; font-weight:600; letter-spacing:.06em; }
.conv-end{ fill:#E4572E; font-family:var(--f-display); font-size:15px; font-weight:700; letter-spacing:.04em; }
.conv-caption{
  display:flex; justify-content:space-between; margin-top:8px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
}
@media(max-width:640px){ .conv-caption span:last-child{ display:none; } }

/* mobile fallback: SVG text becomes illegible below ~640px when the
   whole 1200-unit diagram compresses to phone width, so swap to a
   simple stacked HTML list instead of fighting SVG scaling */
.conv-mobile{ display:none; }
@media(max-width:640px){
  .conv-svg{ display:none; }
  .conv-mobile{
    display:flex; flex-direction:column; gap:14px;
  }
  .conv-mobile .row{
    display:flex; align-items:baseline; justify-content:space-between;
    padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08);
    color:#fff;
  }
  .conv-mobile .row:last-of-type{ border-bottom:none; padding-bottom:0; }
  .conv-mobile .row .k{ font-weight:600; font-size:15px; }
  .conv-mobile .row .v{ color:rgba(255,255,255,.42); font-size:12.5px; text-align:right; max-width:56%; }
  .conv-mobile .outcome{
    margin-top:6px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);
    text-align:center;
  }
  .conv-mobile .outcome .arrow{ color:rgba(255,255,255,.35); font-size:13px; margin-bottom:8px; }
  .conv-mobile .outcome b{
    font-family:var(--f-display); font-size:19px; font-weight:700; color:#E4572E;
  }
}

/* tighter row rhythm — applies the same reduction to .sec-sm as .sec above */
.sec-sm{ padding:clamp(36px,5.5vw,60px) 0; }

/* qbar-3: three-item variant for rows that don't divide evenly into the
   default 4-column grid (leaving a gap that reads as off-center) */
.qbar.qbar-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .qbar.qbar-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .qbar.qbar-3{ grid-template-columns:1fr; } }

/* stats-3: three-item variant for proof rows with fewer than 4 stats,
   which would otherwise leave a gap and read as off-center */
.stats.stats-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:640px){ .stats.stats-3{ grid-template-columns:1fr; } }