/* PharmaSynapse — design system v4
   Base — reset, layout, typography
   Generated from the standalone build. Edit here, not in the pages. */

/* ============================================================
   2 - BASE
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:has(body.mkt){scroll-behavior:smooth}
body{
  margin:0;background:#FFFFFF;color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Zero-specificity anchor defaults. `:where()` around the whole compound means
   any component rule that follows wins without !important. A plain
   `body.mkt a` selector (0,1,1) outranks .btn and .site-header__cta and paints
   teal text on a teal button. */
:where(body.mkt) :where(a){color:var(--teal)}
:where(body.mkt) :where(a:hover){color:#0A6D6E}
:where(.on-dark) :where(a){color:var(--teal-bright)}
:where(.on-dark) :where(a:hover){color:#FFFFFF}
svg,img{display:block;max-width:100%}
input,select,button,textarea{font-family:inherit}
::selection{background:#E4F3F3}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.on-dark :focus-visible{outline-color:var(--teal-bright)}
/* DEFECT FIX - main section[id] had no scroll-margin-top, so every in-page
   anchor landed under the sticky header. Every CTA on this page is an
   in-page anchor, so this rule is load-bearing. */
main section[id]{scroll-margin-top:84px}
/* ============================================================
   3 - LAYOUT
   ============================================================ */
.shell{max-width:var(--shell-max);margin:0 auto;padding:0 var(--shell-pad)}
.sec{padding:112px 0;position:relative}
.sec-sm{padding:76px 0;position:relative}
.on-dark{background:var(--ink-800);color:var(--on-dark)}
.on-dark .d1,.on-dark .d2,.on-dark .d3{color:var(--on-dark)}
.deep{background:var(--ink-850)}
.grain{position:relative;overflow:hidden}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(115% 88% at 50% 0%,#000 8%,transparent 70%);
  mask-image:radial-gradient(115% 88% at 50% 0%,#000 8%,transparent 70%);
}
.glow{position:absolute;border-radius:50%;filter:blur(92px);pointer-events:none;background:rgba(62,197,193,.16)}
.head-wide{max-width:66ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* ============================================================
   4 - TYPE
   The display scale is locked: H1 clamp(32px,4.4vw,53px)/1.06,
   lead 18px max 64ch, body 16px/1.68.
   ============================================================ */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#0A6D6E;display:inline-flex;align-items:center;
  gap:10px;margin:0 0 22px;
}
.eyebrow::before{content:"";width:20px;height:1px;background:currentColor;flex:none}
.on-dark .eyebrow{color:var(--teal-bright)}
.d1{font-size:clamp(32px,4.4vw,53px);line-height:1.06;letter-spacing:-.032em;font-weight:600;margin:0 0 26px}
.d2{font-size:clamp(27px,3.4vw,40px);line-height:1.1;letter-spacing:-.028em;font-weight:600;margin:0 0 22px}
.d3{font-size:19px;line-height:1.3;letter-spacing:-.018em;font-weight:600;margin:0 0 8px}
.lead{font-size:18px;line-height:1.62;color:var(--ink-2);max-width:64ch;margin:0}
.on-dark .lead{color:var(--on-dark-2)}
.hi{color:var(--teal-bright)}
.hi-l{color:#0A6D6E}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tab{font-variant-numeric:tabular-nums}
/* The cleft: a rule that breaks before it finishes. Static on this page -
   the motion cap allows the header logo cut and nothing else above 250ms. */
.cleft{position:relative;padding-bottom:20px}
.cleft::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--teal)}
.cleft::before{content:"";position:absolute;left:36px;bottom:-2px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.on-dark .cleft::after,.on-dark .cleft::before{background:var(--teal-bright)}
/* Caption / annotation scale. Tertiary here is a caption colour, never body
   copy: no paragraph of running prose on this page uses --ink-3. */
.cap{font-size:13px;line-height:1.6;color:var(--ink-3);margin:0}
.kicker{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#0A6D6E;margin:0 0 12px}