explaining what it does and what it needs to show data. Loads on every plugin page (main.css is in the app ); the .page-head/.crumb classes are per-plugin, this is the one shared addition. */ .page-desc{margin:5px 0 0;font-size:13px;line-height:1.5;color:#5A6472;max-width:74ch} .page-desc .page-desc-needs{display:block;margin-top:2px;font-size:12px;color:#8A94A3}

/* main.css — base + typography + utilities */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
a{text-decoration:none;color:inherit}
svg{display:block}
.gs-num,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.gs-muted{color:var(--muted)}
.gs-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.gs-h1{font-size:clamp(21px,3vw,26px);font-weight:800;letter-spacing:-.02em;margin:5px 0 0}
.gs-hint{border-bottom:1px dashed var(--muted-2);cursor:help}
.gs-delta{display:inline-flex;align-items:center;gap:4px;font-weight:800}
.gs-delta.up{color:var(--pos)} .gs-delta.down{color:var(--neg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== type scale — redline sheet, rendered in Open Sans ===== */
h1{font-size:22px;line-height:26px;font-weight:700;letter-spacing:-.01em;margin:0}
h2{font-size:16px;line-height:19px;font-weight:600;margin:0}
h3{font-size:14px;line-height:17px;font-weight:600;margin:0}
h4{font-size:12px;line-height:14px;font-weight:600;margin:0}
.gs-h1{font-size:22px;line-height:26px;font-weight:700;letter-spacing:-.01em}
.gs-h2{font-size:16px;line-height:19px;font-weight:600}
.gs-body{font-size:14px;line-height:16px;font-weight:400}
.gs-step-lg{font-size:22px;line-height:26px;font-weight:300}
.gs-step-sm{font-size:16px;line-height:19px;font-weight:300}
.gs-cta-lg{font-size:14px;line-height:19px;font-weight:400}
.gs-cta-md{font-size:14px;line-height:16px;font-weight:600}
.gs-cta-sm{font-size:11px;line-height:13px;font-weight:600}
/* Featured numeric (GTACondensedBold -> Open Sans 700, tightened) */
.gs-fn-lg{font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gs-fn-md{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gs-fn-sm{font-size:20px;line-height:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gs-fn-xs{font-size:16px;line-height:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Tabular number (GTACondensedRegular -> Open Sans 400) */
.gs-tnum{font-size:18px;line-height:22px;font-weight:400;font-variant-numeric:tabular-nums}
.gs-tnum-sm{font-size:14px;line-height:17px;font-weight:400;font-variant-numeric:tabular-nums}

/* Plugin page description — one shared line under a plugin page's <h1> explaining what it does and
   what it needs to show data. Loads on every plugin page (main.css is in the app <head>); the
   .page-head/.crumb classes are per-plugin, this is the one shared addition. */
.page-desc{margin:5px 0 0;font-size:13px;line-height:1.5;color:#5A6472;max-width:74ch}
.page-desc .page-desc-needs{display:block;margin-top:2px;font-size:12px;color:#8A94A3}