/* ============================================================================
   CELIO HEALTH — CONTENT PAGE DESIGN SYSTEM
   Class-based recreation of the design handoff (design_handoff_celio_content
   _system). Applies to all programmatic content pages (biomarker/test/symptom/
   condition/category/comparison). Storefront pages keep style.css.
   All classes are prefixed `cg-` to avoid collision with the storefront CSS.
   ============================================================================ */
:root {
  /* Canvas + surfaces aligned to the storefront home page (--color-parchment
     #fcfcf7) so content pages read as the same site. Cards are the same
     parchment delineated by borders (as on home); warm cream is kept only for
     subtle inset bands. */
  --cg-bg:#fcfcf7; --cg-surface:#fcfcf7; --cg-surface-2:#F1F0E6;
  --cg-card:#fcfcf7; --cg-card-inset:#F2F1E6;
  --cg-forest:#22381E; --cg-forest-deep:#1B2E15; --cg-forest-ink:#182913;
  --cg-lime:#A6CE4E; --cg-lime-deep:#7FA733;
  --cg-ink:#2C3327; --cg-ink-strong:#3C4436; --cg-heading:#22381E;
  --cg-muted:#5E6656; --cg-muted-2:#8A9078;
  --cg-on-dark:#F5F5EC; --cg-on-dark-body:#C7CDBB; --cg-on-dark-faint:#AEB6A2;
  --cg-border:#E3E2D3; --cg-hairline:#E1E0D2; --cg-border-strong:#C6C6B2;
  --cg-border-dark:rgba(255,255,255,.12);
  --cg-alert-bg:#FBEEE6; --cg-alert-border:#E7C9B4; --cg-alert-accent:#B5642F;
  --cg-alert-head:#7A3D18; --cg-alert-body:#6E4223;
  --cg-font-sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cg-font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --cg-r-pill:100px; --cg-r-card:24px; --cg-r-card-lg:30px; --cg-r-inset:14px; --cg-r-faq:16px;
  --cg-measure:820px; --cg-lede-measure:640px; --cg-pad-x:40px;
  --cg-shadow:0 30px 70px -30px rgba(24,41,19,.40);
  --cg-ease:cubic-bezier(.22,.61,.36,1);
}
@keyframes cg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes cg-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---- reset / base ---- */
*{box-sizing:border-box;}
html,body{margin:0;}
body.cg{background:var(--cg-bg);font-family:var(--cg-font-sans);color:var(--cg-ink);
  -webkit-font-smoothing:antialiased;}
.cg a{color:var(--cg-lime-deep);text-decoration:none;transition:color .18s var(--cg-ease);}
.cg a:hover{color:var(--cg-forest);}
.cg h1,.cg h2,.cg h3{margin:0;color:var(--cg-heading);}
.cg p{margin:0;}
.cg :focus-visible{outline:2px solid var(--cg-forest);outline-offset:2px;border-radius:6px;}
.cg-mono{font-family:var(--cg-font-mono);}
/* Flat, full-width parchment like the home page — a centered content column,
   no floating page-card. (No overflow:hidden here so the sticky nav works;
   each hero/banner clips its own decorative rings.) */
.cg-page{max-width:1200px;margin:0 auto;background:var(--cg-surface);position:relative;}

/* ---- top nav: sticky floating parchment pill (matches home: thin + wide) ---- */
.cg-navwrap{position:sticky;top:0;z-index:50;background:var(--cg-surface);
  display:flex;justify-content:center;padding:16px 16px 8px;}
.cg-nav{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--cg-surface);border:1px solid #1c3a13;border-radius:var(--cg-r-pill);
  padding:8px 12px 8px 22px;}
.cg-brand{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:700;color:#000;}
.cg-brand__dot{width:9px;height:9px;border-radius:50%;background:var(--cg-lime);display:inline-block;}
.cg-nav__links{display:flex;align-items:center;gap:26px;font-size:14.5px;color:#1c3a13;
  list-style:none;margin:0;padding:0;}
.cg-nav__links a{color:#1c3a13;}
.cg-nav__links a:hover{color:var(--cg-lime-deep);}
.cg-nav__right{display:flex;align-items:center;gap:16px;font-size:14.5px;color:#1c3a13;}
.cg-nav__cart{color:#1c3a13;white-space:nowrap;}
.cg-btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--cg-r-pill);
  font-weight:600;font-size:15.5px;line-height:1;cursor:pointer;border:1.5px solid transparent;
  transition:filter .18s var(--cg-ease),background .18s var(--cg-ease);}
.cg-btn--sm{padding:8px 18px;font-size:14px;}
.cg-btn--primary{background:var(--cg-forest);color:var(--cg-surface);padding:15px 28px;}
.cg-btn--primary:hover{filter:brightness(1.12);color:var(--cg-surface);}
.cg-btn--secondary{background:transparent;color:var(--cg-heading);border-color:var(--cg-border-strong);padding:15px 26px;}
.cg-btn--secondary:hover{border-color:var(--cg-forest);color:var(--cg-forest);}
.cg-btn--accent{background:var(--cg-lime);color:var(--cg-forest-ink);padding:15px 26px;font-weight:700;}
.cg-btn--accent:hover{filter:brightness(1.06);color:var(--cg-forest-ink);}
.cg-btn--block{width:100%;justify-content:center;}
.cg-nav__toggle{display:none;background:none;border:none;font-size:20px;color:var(--cg-heading);cursor:pointer;}
/* dark nav variant (inside dark hero) */
.cg-nav--dark{background:rgba(255,255,255,.06);border-color:var(--cg-border-dark);}
.cg-nav--dark .cg-brand,.cg-nav--dark .cg-nav__links a,.cg-nav--dark .cg-nav__cart{color:var(--cg-on-dark-body);}
.cg-nav--dark .cg-brand{color:var(--cg-on-dark);}

/* ---- breadcrumb / eyebrow ---- */
.cg-crumb{font-family:var(--cg-font-mono);font-size:12.5px;letter-spacing:.14em;color:var(--cg-muted-2);margin-bottom:20px;}
.cg-crumb a{color:var(--cg-muted-2);}
.cg-crumb__cur{color:var(--cg-heading);}
.cg-eyebrow{display:inline-block;font-family:var(--cg-font-mono);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cg-lime-deep);}
.cg-eyebrow--pill{background:var(--cg-lime);color:var(--cg-forest-ink);padding:6px 14px;border-radius:var(--cg-r-pill);font-size:11.5px;letter-spacing:.14em;}
.cg-crumb--dark a,.cg-crumb--dark{color:#8FA97E;}
.cg-crumb--dark .cg-crumb__cur{color:#E7ECDD;}

/* ---- heroes ---- */
.cg-hero{position:relative;padding:64px var(--cg-pad-x) 56px;overflow:hidden;}
.cg-hero__inner{position:relative;max-width:720px;}
.cg-h1{font-size:60px;line-height:1.02;font-weight:700;letter-spacing:-.03em;color:var(--cg-heading);margin:14px 0 22px;}
.cg-lede{font-size:20px;line-height:1.6;color:#454C3E;max-width:var(--cg-lede-measure);margin:0 0 32px;}
.cg-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;}
/* decorative rings/orb */
.cg-ring{position:absolute;border-radius:50%;pointer-events:none;}
.cg-ring--a{top:-120px;right:-120px;width:420px;height:420px;border:1.5px solid #D8D8C7;}
.cg-ring--b{top:-40px;right:-40px;width:260px;height:260px;border:1.5px solid #D2D2BE;}
.cg-orb{position:absolute;top:60px;right:70px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#B7D967,#7FA733);opacity:.9;
  animation:cg-float 7s ease-in-out infinite;pointer-events:none;}
/* dark hero (nav is the shared floating parchment pill above it) */
.cg-hero--dark{background:var(--cg-forest-deep);padding:56px var(--cg-pad-x) 60px;margin-top:8px;}
.cg-hero--dark .cg-h1{color:var(--cg-on-dark);}
.cg-hero--dark .cg-lede{color:var(--cg-on-dark-body);}
.cg-hero__dots{position:absolute;inset:0;background-image:radial-gradient(#3A5230 1.3px,transparent 1.3px);
  background-size:26px 26px;opacity:.35;pointer-events:none;}
.cg-ring--dark{top:-80px;right:-60px;width:320px;height:320px;border:1.5px solid rgba(166,206,78,.3);}
.cg-orb--dark{top:20px;right:80px;width:150px;height:150px;opacity:.85;}
.cg-hero--dark .cg-hero__inner{margin-top:56px;}
/* split hero */
.cg-hero--split{padding:56px var(--cg-pad-x) 48px;}
.cg-hero__grid>*{min-width:0;}
.cg-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
.cg-hero__grid .cg-h1{font-size:54px;line-height:1.03;}
.cg-hero__grid .cg-hero__inner{max-width:none;}
.cg-hero__viz{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;}

/* ---- marquee ---- */
.cg-marquee{overflow:hidden;border-top:1px solid var(--cg-border);border-bottom:1px solid var(--cg-border);
  background:var(--cg-surface-2);padding:13px 0;}
.cg-marquee__track{display:flex;width:max-content;animation:cg-marquee 26s linear infinite;
  font-family:var(--cg-font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#6A7162;white-space:nowrap;}
.cg-marquee__track span{padding:0 26px;}
.cg-marquee__track .cg-sep{padding:0;}

/* ---- jump bar ---- */
.cg-jumpbar{position:sticky;top:0;z-index:30;margin-top:22px;background:rgba(242,241,230,.86);
  backdrop-filter:blur(10px);border-top:1px solid var(--cg-border);border-bottom:1px solid var(--cg-border);}
.cg-jumpbar__inner{display:flex;align-items:center;justify-content:space-between;padding:12px var(--cg-pad-x);
  font-family:var(--cg-font-mono);font-size:12.5px;letter-spacing:.04em;}
.cg-jumpbar__links{display:flex;gap:26px;color:var(--cg-muted);overflow-x:auto;}
.cg-jumpbar__links a{color:var(--cg-muted);}
.cg-jumpbar__cta{display:flex;align-items:center;gap:8px;color:var(--cg-heading);font-weight:600;white-space:nowrap;}

/* ---- body / sections ---- */
.cg-body{padding:64px var(--cg-pad-x) 20px;max-width:var(--cg-measure);}
.cg-body--wide{max-width:none;}
.cg-section{scroll-margin-top:70px;padding:44px 0;border-bottom:1px solid var(--cg-hairline);}
.cg-section:first-child{padding-top:0;}
.cg-section:last-child{border-bottom:none;}
.cg-section__head{display:flex;align-items:baseline;gap:16px;margin-bottom:18px;}
.cg-section__num{font-family:var(--cg-font-mono);font-size:14px;color:var(--cg-lime);font-weight:600;}
.cg-h2{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--cg-heading);}
.cg-section p{font-size:18px;line-height:1.72;color:var(--cg-ink-strong);margin:0 0 16px;}
.cg-section p:last-child{margin-bottom:0;}

/* ---- card section ---- */
.cg-card{background:var(--cg-card);border:1px solid var(--cg-border);border-radius:var(--cg-r-card);padding:34px;}
.cg-card__head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.cg-disc{width:44px;height:44px;border-radius:50%;background:var(--cg-forest);display:flex;
  align-items:center;justify-content:center;font-size:20px;color:var(--cg-on-dark);flex-shrink:0;}
.cg-card p{font-size:17px;line-height:1.7;color:var(--cg-ink-strong);margin:0 0 14px;}
.cg-card p:last-child{margin-bottom:0;}
.cg-cardstack{display:flex;flex-direction:column;gap:22px;}

/* ---- chips / icon grid ---- */
.cg-chips{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 24px;}
.cg-chip{font-family:var(--cg-font-mono);font-size:12.5px;background:var(--cg-card);border:1px solid #DCDBCB;
  color:var(--cg-ink-strong);padding:8px 15px;border-radius:var(--cg-r-pill);}
a.cg-chip{color:var(--cg-ink-strong);}
a.cg-chip:hover{border-color:var(--cg-forest);color:var(--cg-forest);}
.cg-icongrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0;}
.cg-icongrid__tile{background:var(--cg-card-inset);border-radius:var(--cg-r-inset);padding:16px 12px;text-align:center;}
.cg-icongrid__label{font-family:var(--cg-font-mono);font-size:12px;color:var(--cg-ink-strong);margin-top:6px;}

/* ---- timeline ---- */
.cg-timeline{display:flex;flex-direction:column;border-left:2px solid #DADAC8;padding-left:24px;margin-left:6px;}
.cg-timeline__item{position:relative;padding-bottom:18px;}
.cg-timeline__item:last-child{padding-bottom:0;}
.cg-timeline__node{position:absolute;left:-31px;top:2px;width:12px;height:12px;border-radius:50%;
  background:var(--cg-lime);border:2px solid var(--cg-card);}
.cg-timeline__step{font-family:var(--cg-font-mono);font-size:12px;color:var(--cg-lime-deep);}
.cg-timeline__txt{font-size:16px;color:var(--cg-ink-strong);}

/* ---- two-node systems ---- */
.cg-systems{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cg-systems>*{min-width:0;}
.cg-system{background:var(--cg-forest);border-radius:22px;padding:30px;color:var(--cg-on-dark);}
.cg-system__label{font-family:var(--cg-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cg-lime);}
.cg-system h3{margin:8px 0 6px;font-size:22px;font-weight:700;color:var(--cg-on-dark);}
.cg-system p{margin:0;font-size:14.5px;line-height:1.6;color:var(--cg-on-dark-body);}

/* ---- bundle banner ---- */
.cg-bundle{background:var(--cg-forest);border-radius:26px;padding:44px;position:relative;overflow:hidden;}
.cg-bundle__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cg-bundle__txt{max-width:560px;}
.cg-bundle h2{margin:10px 0 8px;font-size:30px;font-weight:700;color:var(--cg-on-dark);letter-spacing:-.02em;}
.cg-bundle p{margin:0;font-size:16px;line-height:1.6;color:var(--cg-on-dark-body);}
.cg-bundle .cg-eyebrow{color:var(--cg-lime);}
.cg-bundle__ring{position:absolute;top:-60px;right:-40px;width:240px;height:240px;border-radius:50%;border:1.5px solid rgba(166,206,78,.25);}
.cg-bandwrap{padding:20px var(--cg-pad-x) 44px;}

/* ---- inline test CTA / spec panel ---- */
.cg-spec{background:var(--cg-card);border:1px solid var(--cg-border);border-radius:var(--cg-r-card);padding:28px;}
.cg-spec__price{font-size:40px;font-weight:700;color:var(--cg-heading);letter-spacing:-.02em;}
.cg-spec__row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;flex-wrap:wrap;
  border-bottom:1px solid var(--cg-hairline);font-size:14.5px;color:var(--cg-ink-strong);}
.cg-spec__row:last-of-type{border-bottom:none;}
.cg-spec__row .cg-mono{color:var(--cg-muted);font-size:13px;}
.cg-spec ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;}
.cg-spec li{font-size:14px;color:var(--cg-muted);}
.cg-note{font-size:13px;color:var(--cg-muted);margin-top:10px;}
.cg-field{display:block;margin-bottom:16px;}
.cg-field span{display:block;font-family:var(--cg-font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--cg-ink-strong);margin-bottom:6px;}
.cg-field input{width:100%;border:1px solid var(--cg-border-strong);background:var(--cg-card);
  border-radius:var(--cg-r-inset);padding:12px 16px;color:var(--cg-heading);outline:none;font-family:inherit;font-size:15px;}
.cg-field input:focus{border-color:var(--cg-forest);}

/* ---- alert callout (terracotta) ---- */
.cg-alert{background:var(--cg-alert-bg);border:1px solid var(--cg-alert-border);border-radius:22px;
  padding:28px 30px;display:flex;gap:18px;align-items:flex-start;}
.cg-alert__disc{width:44px;height:44px;border-radius:50%;background:var(--cg-alert-accent);display:flex;
  align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.cg-alert .cg-eyebrow{color:var(--cg-alert-accent);}
.cg-alert h3{margin:6px 0 8px;font-size:21px;font-weight:700;color:var(--cg-alert-head);}
.cg-alert p{margin:0;font-size:16px;line-height:1.65;color:var(--cg-alert-body);}

/* ---- cross-link grid ---- */
.cg-xgrid{display:grid;gap:16px;}
.cg-xgrid--2{grid-template-columns:1fr 1fr;}
.cg-xgrid--3{grid-template-columns:1fr 1fr 1fr;}
/* min-width:0 stops the classic grid blowout: a long unbreakable test name in
   a row otherwise forces its track wider than the viewport (268px of real
   horizontal scroll at 390px before this fix). */
.cg-xcard{background:var(--cg-card);border:1px solid var(--cg-border);border-radius:20px;padding:24px;min-width:0;}
.cg-xcard .cg-eyebrow{font-size:11px;letter-spacing:.14em;}
.cg-xrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;
  padding:14px 16px;background:var(--cg-card-inset);border-radius:var(--cg-r-inset);color:var(--cg-heading);font-weight:600;}
.cg-xrow>span:first-child{min-width:0;overflow-wrap:anywhere;}
.cg-xrow:hover{color:var(--cg-forest);background:#EDECDE;}
.cg-xrow__sub{display:block;font-family:var(--cg-font-sans);font-weight:400;font-size:12.5px;color:var(--cg-muted);margin-top:2px;}
.cg-xrow .cg-mono{font-family:var(--cg-font-mono);font-weight:500;color:var(--cg-lime-deep);white-space:nowrap;}
.cg-xstack{display:flex;flex-direction:column;gap:8px;margin-top:12px;}

/* ---- FAQ ---- */
.cg-faqs{display:flex;flex-direction:column;gap:12px;}
.cg-faq{background:var(--cg-card);border:1px solid var(--cg-border);border-radius:var(--cg-r-faq);padding:18px 22px;}
.cg-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:17.5px;font-weight:600;color:var(--cg-heading);}
.cg-faq summary .cg-mono{color:var(--cg-lime);font-size:20px;line-height:1;}
.cg-faq[open] summary .cg-plus{display:none;}
.cg-faq .cg-minus{display:none;}
.cg-faq[open] .cg-minus{display:inline;}
.cg-faq p{margin:14px 0 0;font-size:16px;line-height:1.65;color:#4A5142;}

/* ---- research module ---- */
.cg-research{display:flex;flex-direction:column;background:var(--cg-card);border:1px solid var(--cg-border);
  border-radius:var(--cg-r-card);overflow:hidden;}
.cg-research a{display:block;padding:20px 24px;border-bottom:1px solid var(--cg-hairline);color:var(--cg-heading);}
.cg-research a:last-child{border-bottom:none;}
.cg-research a:hover{background:#EDECDE;}
.cg-research__meta{font-family:var(--cg-font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cg-muted);}
.cg-research__title{margin-top:6px;letter-spacing:-.01em;}

/* ---- disclaimer / footer ---- */
.cg-disclaimer{background:var(--cg-forest);padding:44px var(--cg-pad-x);}
.cg-disclaimer .cg-eyebrow{color:var(--cg-lime);font-size:11px;letter-spacing:.14em;}
.cg-disclaimer p{margin:12px 0 0;font-size:13.5px;line-height:1.7;color:var(--cg-on-dark-faint);max-width:760px;}
.cg-footer{background:var(--cg-forest-deep);padding:40px var(--cg-pad-x);
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--cg-on-dark-faint);}
.cg-footer a{color:var(--cg-on-dark-body);}
.cg-footer__links{display:flex;gap:20px;flex-wrap:wrap;}

/* ---- viz: rings / orbit ---- */
.cg-viz-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:1.5px dashed #CFCFBB;animation:cg-spin 40s linear infinite;}
.cg-viz-ring2{position:absolute;width:74%;height:74%;border-radius:50%;border:1.5px solid #D8D8C7;}
.cg-viz-core{position:absolute;width:48%;height:48%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2E4A24,#1B2E15);display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:var(--cg-surface);text-align:center;padding:8px;}
.cg-viz-core__label{font-family:var(--cg-font-mono);font-size:11px;letter-spacing:.1em;color:var(--cg-lime);}
.cg-viz-core__val{font-size:30px;font-weight:700;line-height:1.05;}
.cg-viz-pill{position:absolute;font-family:var(--cg-font-mono);font-size:11px;padding:6px 12px;border-radius:var(--cg-r-pill);
  background:var(--cg-card);border:1px solid #DCDBCB;color:var(--cg-heading);white-space:nowrap;}
.cg-viz-pill--accent{background:var(--cg-lime);color:var(--cg-forest-ink);border:none;}
.cg-viz-pos-t{top:6%;left:50%;transform:translateX(-50%);}
.cg-viz-pos-bl{bottom:12%;left:2%;}
.cg-viz-pos-r{top:32%;right:-2%;}
.cg-viz-pos-br{bottom:16%;right:2%;}
.cg-viz-pos-l{top:40%;left:-2%;}

/* ---- index grid (category) ---- */
.cg-index{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.cg-index>*{min-width:0;}
.cg-index__card{background:var(--cg-card);border:1px solid var(--cg-border);border-radius:20px;padding:24px;color:var(--cg-heading);display:block;min-width:0;}
.cg-index__card h3{overflow-wrap:anywhere;}
.cg-index__card:hover{color:var(--cg-forest);border-color:var(--cg-border-strong);}
.cg-index__card h3{font-size:18px;font-weight:700;margin-bottom:6px;}
.cg-index__card p{font-size:14px;color:var(--cg-muted);line-height:1.5;}
.cg-index__price{font-family:var(--cg-font-mono);color:var(--cg-lime-deep);font-size:15px;margin-top:10px;}

/* ---- illustrative caption ---- */
.cg-illus-note{font-family:var(--cg-font-mono);font-size:11px;letter-spacing:.04em;color:var(--cg-muted-2);margin-top:14px;}

/* ---- draft banner ---- */
.cg-draft{margin:0 var(--cg-pad-x);margin-top:24px;background:#EEF1E4;border:1px solid #D6DCC4;
  border-radius:var(--cg-r-inset);padding:14px 18px;font-size:14px;color:var(--cg-muted);}

/* ---- generic spacing helpers ---- */
.cg-pad{padding:26px var(--cg-pad-x) 8px;}
.cg-pad-b{padding:8px var(--cg-pad-x) 44px;}
.cg-maxw{max-width:820px;}
.cg-mt{margin-top:18px;}

/* ---- silo artwork figure ---- */
.cg-art{padding:0 var(--cg-pad-x);margin:26px 0 4px;}
.cg-art img{display:block;max-width:420px;width:100%;height:auto;border:1px solid var(--cg-border);border-radius:var(--cg-r-inset);}

/* ---- footer explore strip (category hubs + flat indexes) ---- */
.cg-explore{padding:34px var(--cg-pad-x) 26px;border-top:1px solid var(--cg-border);}
.cg-explore__links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:14px;font-size:14.5px;}
.cg-explore__links a{color:#1c3a13;}
.cg-explore__links a:hover{color:var(--cg-lime-deep);}

/* ---- responsive ---- */
@media(max-width:900px){
  :root{--cg-pad-x:22px;}
  .cg-h1,.cg-hero__grid .cg-h1{font-size:40px;}
  .cg-h2{font-size:26px;}
  .cg-nav__links{display:none;}
  /* 44px-min tap targets (nav toggle measured 24x29, cart 55x20 — 2026-07-28
     visual audit); padding, not font-size, carries the hit area. */
  .cg-nav__toggle{display:block;padding:10px 12px;min-width:44px;min-height:44px;}
  .cg-nav__cart{padding:12px 4px;}
  .cg-hero__grid,.cg-systems,.cg-xgrid--2,.cg-xgrid--3,.cg-index,.cg-icongrid{grid-template-columns:1fr;}
  .cg-hero__viz{display:none;}
  .cg-jumpbar__links{gap:16px;}
  .cg-body{padding:40px var(--cg-pad-x) 12px;}
  .cg-hero{padding:44px var(--cg-pad-x) 40px;}
}
@media(max-width:520px){
  .cg-icongrid{grid-template-columns:1fr 1fr;}
  /* The nav row (brand + cart + Shop-tests pill + toggle) overflowed 390px
     viewports by 18-24px, giving every content page horizontal scroll and
     pushing the toggle off-screen (2026-07-28 visual audit). Tighten the row
     and drop the redundant Shop-tests pill — /bundles stays one tap away in
     the menu and in every hero CTA. */
  .cg-nav{gap:8px;padding:6px 8px 6px 14px;}
  .cg-brand{font-size:17px;}
  .cg-nav__right{gap:6px;}
  .cg-nav__right .cg-btn{display:none;}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important;}}

/* ---- comparison "at a glance" table (compare/* pages) ---- */
.cg-table { border: 1px solid var(--cg-border); }
.cg-table th, .cg-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cg-border); }
.cg-table thead th { font-weight: 600; }
.cg-table tbody th { font-weight: 500; white-space: nowrap; opacity: .75; }
.cg-table tbody tr:last-child th, .cg-table tbody tr:last-child td { border-bottom: none; }

/* ---- visible freshness line (page footer) ---- */
.cg-updated { opacity: .7; }