/* ============================================================
   3DOGS DESIGN SYSTEM v1 — 2026-08
   One file. Layers: tokens → base → layout → components → utilities.
   Light-first, typographic, hunter-green accent, heritage gold secondary.
   No JS required for any styling. WCAG AA contrast throughout.
   ============================================================ */

/* ----------------------------- TOKENS ----------------------------- */
:root{
  /* Ink — never pure black */
  --ink:#14181d;            /* headings, primary text */
  --ink-2:#41474f;          /* body secondary */
  --ink-3:#6b7280;          /* captions, meta */
  --ink-inv:#f6f7f5;

  /* Surfaces — warm light-first */
  --bg:#ffffff;
  --bg-2:#f7f7f4;           /* alternating sections, warm off-white */
  --bg-3:#eef0ea;           /* subtle tint panels */
  --bg-dark:#101512;        /* inverted bands (footer, proof) */
  --bg-dark-2:#18201b;

  /* Accent — hunter green (the working-dog brand, made enterprise) */
  --brand:#1d5c3f;
  --brand-strong:#154730;
  --brand-tint:#e8f1ec;
  --brand-ring:rgba(29,92,63,.28);

  /* Heritage gold — secondary only: paw, dissent highlights, small marks */
  --gold:#b08742;
  --gold-tint:#f6efe2;

  /* Semantic */
  --ok:#1d6f42; --warn:#7a5314; --err:#8f2a20;
  --line:#e4e6e1; --line-strong:#cfd3cb;

  /* Type */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;

  /* Scale (rem) — tracking tightens as size grows */
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-lg:1.125rem;
  --t-xl:1.375rem; --t-2xl:1.75rem; --t-3xl:2.25rem; --t-4xl:3rem;
  --t-5xl:3.75rem; --t-6xl:4.75rem;

  /* Space */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;

  /* Shape + elevation */
  --r-s:8px; --r-m:12px; --r-l:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,24,29,.06);
  --sh-2:0 4px 14px rgba(20,24,29,.07),0 1px 3px rgba(20,24,29,.05);
  --sh-3:0 24px 48px -12px rgba(20,24,29,.14);

  --container:1140px;
  --container-wide:1280px;
  --nav-h:64px;
}

/* ----------------------------- BASE ----------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 var(--t-base)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0 0 var(--s-4);font-weight:600;line-height:1.12;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(var(--t-4xl),6vw,var(--t-6xl));letter-spacing:-.032em}
h2{font-size:clamp(var(--t-2xl),3.4vw,var(--t-4xl));letter-spacing:-.026em}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p{margin:0 0 var(--s-4);color:var(--ink-2)}
.lead{font-size:clamp(var(--t-lg),1.9vw,var(--t-xl));line-height:1.5;color:var(--ink-2);max-width:44ch}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
strong{color:var(--ink);font-weight:600}
img,video{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 var(--s-4);padding-left:1.2em;color:var(--ink-2)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-7) 0}
code,kbd{font:.9em var(--mono);background:var(--bg-3);padding:.1em .35em;border-radius:5px}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:var(--s-3) var(--s-5);z-index:1000;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

/* ----------------------------- LAYOUT ----------------------------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(var(--s-5),4vw,var(--s-7))}
.wrap-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:clamp(var(--s-5),4vw,var(--s-7))}
.section{padding-block:clamp(var(--s-8),9vw,var(--s-10))}
.section-tight{padding-block:clamp(var(--s-7),6vw,var(--s-8))}
.section-alt{background:var(--bg-2)}
.section-dark{background:var(--bg-dark);color:var(--ink-inv)}
.section-dark h2,.section-dark h3,.section-dark strong{color:#fff}
.section-dark p{color:#c3ccc5}
.eyebrow{display:block;font:600 var(--t-xs)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:var(--s-4)}
.section-dark .eyebrow{color:var(--gold)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.grid-2{display:grid;gap:var(--s-6);grid-template-columns:repeat(2,1fr)}
.grid-3{display:grid;gap:var(--s-5);grid-template-columns:repeat(3,1fr)}
.grid-4{display:grid;gap:var(--s-5);grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr}}

/* ----------------------------- NAV ----------------------------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--container-wide);margin-inline:auto;height:var(--nav-h);
  display:flex;align-items:center;gap:var(--s-6);padding-inline:clamp(var(--s-5),4vw,var(--s-7))}
.nav-logo{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:var(--t-lg);color:var(--ink);letter-spacing:-.02em}
.nav-logo:hover{text-decoration:none}
.nav-logo .paw{color:var(--gold);font-size:1.1em;line-height:1}
.nav-logo .mark{width:30px;height:30px;border-radius:8px;object-fit:cover;display:block}
.nav-links{display:flex;gap:var(--s-5);margin-left:auto;align-items:center}
.nav-links a{color:var(--ink-2);font-size:var(--t-sm);font-weight:500}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-links a.btn-primary{color:#fff}
.nav-links a.btn-primary:hover{color:#fff}
.nav-cta{margin-left:var(--s-4)}
.nav-toggle{display:none}
.nav-burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r-s);
  padding:.5rem .7rem;font:inherit;cursor:pointer;color:var(--ink)}
@media(max-width:920px){
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:var(--s-5);gap:var(--s-4);display:none;box-shadow:var(--sh-2)}
  .nav-toggle:checked ~ .nav-links{display:flex}
  .nav-burger{display:block}
  .nav-cta{margin-left:0}
}

/* ----------------------------- BUTTONS ----------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:600 var(--t-sm)/1 var(--sans);letter-spacing:.01em;border-radius:var(--r-pill);
  padding:.85rem 1.5rem;cursor:pointer;border:1px solid transparent;transition:all .15s ease;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-strong);box-shadow:0 6px 18px var(--brand-ring)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--ink-3);background:var(--bg-2)}
.btn-ghost{background:transparent;color:var(--brand);padding-inline:.5rem}
.btn-lg{padding:1.05rem 1.9rem;font-size:var(--t-base)}
.section-dark .btn-secondary{color:#fff;border-color:#3a463e}
.section-dark .btn-secondary:hover{background:var(--bg-dark-2)}

/* ----------------------------- HERO ----------------------------- */
.hero{padding-block:clamp(var(--s-8),10vw,var(--s-10)) clamp(var(--s-7),7vw,var(--s-9))}
.hero h1{max-width:17ch}
.hero .lead{max-width:52ch;margin-top:var(--s-4)}
.hero-ctas{display:flex;gap:var(--s-4);margin-top:var(--s-6);flex-wrap:wrap;align-items:center}
.hero-note{font-size:var(--t-sm);color:var(--ink-3);margin-top:var(--s-4)}

/* ----------------------------- CARDS ----------------------------- */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);
  padding:var(--s-6);box-shadow:var(--sh-1);transition:box-shadow .2s ease,transform .2s ease}
a.card{display:block;color:inherit}
a.card:hover{text-decoration:none;box-shadow:var(--sh-3);transform:translateY(-3px)}
.card h3{margin-bottom:var(--s-2)}
.card p{font-size:var(--t-sm);margin:0}
.card .go{display:inline-block;margin-top:var(--s-4);font:600 var(--t-sm)/1 var(--sans);color:var(--brand)}
.card-num{font:600 var(--t-xs)/1 var(--mono);color:var(--ink-3);letter-spacing:.1em;display:block;margin-bottom:var(--s-3)}
.card-media{margin:calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5);border-radius:var(--r-l) var(--r-l) 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--bg-3)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
a.card:hover .card-media img{transform:scale(1.035)}
.photo-band{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-7);align-items:center}
.photo-band .shot{aspect-ratio:4/3}
.photo-band .shot img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.photo-band{grid-template-columns:1fr}}

/* ----------------------------- STAT BAND ----------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.stat{background:var(--bg);padding:var(--s-6) var(--s-5)}
.stat b{display:block;font-size:clamp(var(--t-2xl),3vw,var(--t-3xl));font-weight:650;letter-spacing:-.03em;color:var(--ink)}
.stat span{font-size:var(--t-sm);color:var(--ink-3)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.section-dark .stats{background:#2a332c;border-color:#2a332c}
.section-dark .stat{background:var(--bg-dark-2)}
.section-dark .stat b{color:#fff}
.section-dark .stat span{color:#93a096}

/* ----------------------------- PROOF / QUOTE ----------------------------- */
.quote{border-left:3px solid var(--gold);padding-left:var(--s-5);margin:var(--s-6) 0}
.quote p{font-size:var(--t-lg);color:var(--ink);font-weight:500;letter-spacing:-.01em}
.quote cite{font-style:normal;font-size:var(--t-sm);color:var(--ink-3)}
.dissent{background:var(--gold-tint);border:1px solid #e6d9bd;border-radius:var(--r-m);padding:var(--s-5);font-size:var(--t-sm)}
.dissent b{color:var(--warn)}

/* ----------------------------- TABLE ----------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.tbl th{text-align:left;font-weight:600;color:var(--ink);border-bottom:2px solid var(--ink);padding:var(--s-3) var(--s-4)}
.tbl td{border-bottom:1px solid var(--line);padding:var(--s-3) var(--s-4);color:var(--ink-2)}
.tbl th[scope="row"]{border-bottom:1px solid var(--line);border-top:0;
  padding:var(--s-3) var(--s-4);font-weight:600;color:var(--ink);text-align:left}
.tbl tr:last-child td{border-bottom:0}
.tbl .yes{color:var(--ok);font-weight:600}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ----------------------------- STEPS ----------------------------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-4);counter-reset:step}
.step{position:relative;padding-top:var(--s-5)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font:600 var(--t-xs)/1 var(--mono);color:var(--brand);letter-spacing:.08em}
.step b{display:block;margin:.4rem 0 .25rem;color:var(--ink);font-size:var(--t-sm)}
.step p{font-size:var(--t-xs);color:var(--ink-3);margin:0}
@media(max-width:960px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}

/* ----------------------------- MEDIA / FIGURE ----------------------------- */
.shot{border-radius:var(--r-l);border:1px solid var(--line);box-shadow:var(--sh-3);overflow:hidden}
.shot img{width:100%}
.figure-cap{font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s-3);text-align:center}

/* ----------------------------- FORMS ----------------------------- */
.form-row{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}
.input{flex:1 1 260px;min-width:0;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--bg);color:var(--ink);padding:.85rem 1.25rem;font:inherit;font-size:var(--t-sm)}
.input:focus{border-color:var(--brand);outline:2px solid var(--brand-ring);outline-offset:0}
.form-note{font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s-3)}
textarea.input{resize:vertical;min-height:96px;border-radius:var(--r-m);line-height:1.55}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-row{width:100%}
.form-msg{font-size:var(--t-sm);color:var(--brand);margin-top:var(--s-3);min-height:1.2em}

/* ----------------------------- BADGES ----------------------------- */
.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.35rem .8rem;font:500 var(--t-xs)/1 var(--sans);color:var(--ink-2);background:var(--bg)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}

/* ----------------------------- CASE STUDY ARTICLE ----------------------------- */
.article{max-width:760px;margin-inline:auto}
.article h1{font-size:clamp(var(--t-3xl),4.6vw,var(--t-5xl))}
.byline{display:flex;gap:var(--s-3);align-items:center;color:var(--ink-3);font-size:var(--t-sm);margin:var(--s-4) 0 var(--s-6)}
.article h2{margin-top:var(--s-8)}
.article .lead{max-width:none}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin:var(--s-6) 0;
  border-block:1px solid var(--line);padding-block:var(--s-5)}
.kv div b{display:block;font-size:var(--t-xl);letter-spacing:-.02em;color:var(--ink)}
.kv div span{font-size:var(--t-xs);color:var(--ink-3)}
@media(max-width:700px){.kv{grid-template-columns:repeat(2,1fr)}}
.report-frame{width:100%;aspect-ratio:8.5/11;max-height:720px;border:1px solid var(--line);border-radius:var(--r-m)}

/* ------------------- ARTICLE RHYTHM (migrated pages) -------------------
   The hand-built pages get cards and bands; migrated long-form pages get the
   same *rhythm* through typography alone, so every page reads as one system. */
.article > h2{
  margin-top:var(--s-9);padding-top:var(--s-6);border-top:1px solid var(--line);
  font-size:clamp(var(--t-2xl),3vw,var(--t-3xl));letter-spacing:-.026em}
.article > h2:first-of-type{border-top:0;padding-top:0}
.article > h3{margin-top:var(--s-7);font-size:var(--t-xl)}
.article > h4{margin-top:var(--s-6);color:var(--ink);font-size:var(--t-base);
  letter-spacing:.02em;text-transform:uppercase;font-weight:600}
/* first paragraph after the title reads as a lead */
.article > h1 + p{font-size:clamp(var(--t-lg),1.8vw,var(--t-xl));line-height:1.5;color:var(--ink-2)}
.article > p{max-width:68ch}
.article > ul,.article > ol{max-width:66ch;margin-block:var(--s-4) var(--s-5)}
.article > ul > li,.article > ol > li{margin-bottom:var(--s-2);padding-left:.15em}
.article > ul{list-style:none;padding-left:0}
.article > ul > li{position:relative;padding-left:1.35em}
.article > ul > li::before{content:"";position:absolute;left:.15em;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.55}
.article > blockquote{margin:var(--s-6) 0;padding:var(--s-5) var(--s-6);
  background:var(--bg-2);border-left:3px solid var(--gold);border-radius:0 var(--r-m) var(--r-m) 0}
.article > blockquote p:last-child{margin-bottom:0}
.article strong{color:var(--ink)}
.article > p + h4{margin-top:var(--s-7)}
.article .tbl-scroll{margin-block:var(--s-6)}
.article > hr{margin-block:var(--s-8)}
.article iframe{margin-block:var(--s-6)}
.article img{border-radius:var(--r-m);margin-block:var(--s-5)}

/* ----------------------------- FOOTER ----------------------------- */
.footer{background:var(--bg-dark);color:#aab5ac;padding-block:var(--s-8) var(--s-6);font-size:var(--t-sm)}
.footer a{color:#cfd8d0}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-6);margin-bottom:var(--s-7)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer h4{color:#fff;font-size:var(--t-sm);margin-bottom:var(--s-4)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:var(--s-2)}
.footer-brand p{color:#8d998f;max-width:34ch}
.footer-bar{border-top:1px solid #26302a;padding-top:var(--s-5);display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;color:#7e8a80;font-size:var(--t-xs)}

/* ----------------------------- MOTION -----------------------------
   Rule: content is NEVER hidden by default. Animation only ever moves
   from a fully-visible state; no opacity-gating of initial paint. */
@media(prefers-reduced-motion:no-preference){
  .reveal{animation:rise .6s ease}
  @keyframes rise{from{opacity:.01;transform:translateY(12px)}to{opacity:1;transform:none}}
  .reveal-2{animation-delay:.08s;animation-fill-mode:backwards}
  .reveal-3{animation-delay:.16s;animation-fill-mode:backwards}
}

/* ------- LINK DISTINGUISHABILITY (WCAG 1.4.1) -------
   Links in running text carry an underline so colour is never the only cue.
   Nav, buttons, cards and footers are excluded: they are unambiguous by position. */
p a, li a, .lead a, .dissent a, .article a, .form-note a, .figure-cap a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent)}
p a:hover, li a:hover, .article a:hover{text-decoration-color:currentColor}
.footer p a, .footer li a{text-decoration:none}
.btn, a.card, .nav a, .go{text-decoration:none!important}

/* ------- UTILITY CLASSES (replace blocked inline styles) -------
   A strict CSP (style-src 'self') silently DROPS every style="" attribute.
   Anything that used to be inline must live here or it will not render. */
.on-dark{color:#fff!important}
.footnote{color:#8b968d;margin-top:var(--s-5)}
.section-dark .footnote,.footer .footnote{color:#8b968d}
.mi-auto{margin-inline:auto}
.jc-center{justify-content:center}
.h-hero{font-size:clamp(var(--t-3xl),5vw,var(--t-5xl))}
.card-dark{background:var(--bg-dark-2);border-color:#2a332c}
.card-dark p{color:#c3ccc5}
.card-accent{border-color:var(--brand);border-width:2px}
.steps-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:960px){.steps-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.steps-5{grid-template-columns:repeat(2,1fr)}}
.t-xl{font-size:var(--t-xl)}
.t-2xl{font-size:var(--t-2xl)}
.card-row{display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap}

/* ----------------------------- UTILITIES ----------------------------- */
.mt-0{margin-top:0}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}
.mb-0{margin-bottom:0}.mb-6{margin-bottom:var(--s-6)}
.muted{color:var(--ink-3)}.small{font-size:var(--t-sm)}.xsmall{font-size:var(--t-xs)}
.maxw{max-width:64ch}.nowrap{white-space:nowrap}


/* ===================================================================
   3Dogs — supplement appended 2 Sep 2026.
   The 13 pages that requested /assets/site-v68.*.css (Pricing, About,
   Contact, Solutions, Trust, Research, Buy, AI-visibility,
   Accessibility) got a 404 and rendered unstyled. That build's CSS was
   not recoverable from anything the site serves, so this file is the
   working stylesheet plus the few classes those pages use that the
   working stylesheet does not define. Written to the site's own tokens
   only — no new colours, fonts or spacing values.
   If the real v68 stylesheet exists in the site source, it replaces
   this file at the same path and nothing else needs to change.
   =================================================================== */
.mt-5{margin-top:var(--s-5)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:var(--s-6)}
.table-wrap>table,table.evidence-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.table-wrap th,.evidence-table th{text-align:left;font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--ink);padding:var(--s-3) var(--s-4);vertical-align:bottom}
.table-wrap td,.evidence-table td{border-bottom:1px solid var(--line);padding:var(--s-3) var(--s-4);
  color:var(--ink-2);vertical-align:top}
.table-wrap th[scope="row"],.evidence-table th[scope="row"]{border-bottom:1px solid var(--line);
  font-weight:600;color:var(--ink)}
.table-wrap tr:last-child td,.evidence-table tr:last-child td{border-bottom:0}
.callout{margin:var(--s-6) 0;padding:var(--s-5) var(--s-6);background:var(--bg-2);
  border-left:3px solid var(--gold);border-radius:0 var(--r-m) var(--r-m) 0;color:var(--ink-2)}
.callout>:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}
.record-list{list-style:none;padding-left:0;margin-block:var(--s-5)}
.record-list>li{position:relative;padding-left:1.35em;margin-bottom:var(--s-3);color:var(--ink-2)}
.record-list>li::before{content:"";position:absolute;left:.15em;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--brand);opacity:.55}
.record-list>li strong{color:var(--ink)}
.stats-2x2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin-block:var(--s-6)}
.stats-2x2>div{background:var(--bg);padding:var(--s-6) var(--s-5)}
.stats-2x2 b{display:block;font-size:clamp(var(--t-2xl),3vw,var(--t-3xl));font-weight:650;
  letter-spacing:-.03em;color:var(--ink)}
.stats-2x2 span{font-size:var(--t-sm);color:var(--ink-3)}
.updated{display:block;font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.02em;margin-top:var(--s-4)}
@media (max-width:640px){.stats-2x2{grid-template-columns:1fr}}