/* PharmaSynapse — design system v4
   Page layer — legal
   Generated from the standalone build. Edit here, not in the pages. */

/* ============================================================
   PAGE LAYER — /privacy and /terms
   Legal pages are a different page type from a marketing page and are
   built as one: dense prose, a table of contents, numbered clauses, and
   a print stylesheet, because these are the two pages on the site most
   likely to be printed and put in a supplier file.
   ============================================================ */

/* ---- current-page state. Neither page is in the header nav, so this only
        fires in the footer. Same rule shape as /about and /resources. ---- */
.site-header__link:not([href]){color:var(--ink);cursor:default}
.footer-nav a:not([href]){color:var(--on-dark);cursor:default;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--teal-bright)}
.footer-nav a:not([href]):hover{color:var(--on-dark)}

.sec.sunken{background:var(--paper)}

/* ---- legal hero. Shorter than a marketing hero: nobody arrives here to be
        persuaded, they arrive to find a clause. ---- */
.hero--legal{padding:56px 0 64px}
.hero--legal .d1{font-size:clamp(30px,3.6vw,44px);margin-bottom:20px}
.eff{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--on-dark-2);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-pill);padding:6px 14px;margin-top:26px;font-variant-numeric:tabular-nums}
.eff b{color:var(--on-dark);font-weight:500}

/* ---- .toc — a legal page without a contents list makes the reader scroll
        looking for the clause they came for. ---- */
.toc{margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.toc p{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-3);margin:0 0 16px}
.toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 40px;list-style:none;counter-reset:toc;padding:0;margin:0}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:12px;align-items:baseline;min-height:34px;font-size:14.5px;color:var(--on-dark-2);text-decoration:none;transition:color var(--t-fast) var(--ease-io)}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;color:var(--on-dark-3);flex:none;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--teal-bright)}
.toc a:hover::before{color:var(--teal-bright)}

/* ---- .glance — the summary panel. Not a substitute for the clauses and it
        says so; it exists because a reader deserves to know in fifteen seconds
        whether this page contains anything that should worry her. ---- */
.glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:40px;border-top:1px solid var(--line)}
.gi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.gi .gk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--teal);display:grid;place-items:center;flex:none;margin-top:2px}
.gi .gk svg{width:12px;height:12px;stroke:#0A6D6E;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gi h3{font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0 0 5px}
.gi p{font-size:14.5px;line-height:1.56;color:var(--ink-2);margin:0}
.glance-note{margin-top:24px;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:76ch}

/* ---- .clause — a numbered legal section. The number is a real anchor: a
        supplier-qualification reviewer quotes clause numbers, so they have to
        be visible, linkable and stable. ---- */
.clauses{margin-top:8px}
.clause{padding:44px 0;border-bottom:1px solid var(--line)}
.clause:last-child{border-bottom:0}
.clause>.ch{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:baseline}
.clause .cnum{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;color:#0A6D6E;font-variant-numeric:tabular-nums;padding-top:5px}
.clause h2{font-size:23px;font-weight:600;letter-spacing:-.026em;line-height:1.22;color:var(--ink);margin:0}
.cbody{margin-top:18px;padding-left:44px;max-width:78ch}
.cbody p{font-size:16px;line-height:1.68;color:var(--ink-2);margin:0 0 16px}
.cbody p:last-child{margin-bottom:0}
.cbody b,.cbody strong{color:var(--ink);font-weight:600}
.cbody h3{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:26px 0 10px}
.cbody ul{display:grid;gap:0;margin:8px 0 16px}
.cbody ul li{font-size:15.5px;line-height:1.6;color:var(--ink-2);padding:11px 0;border-bottom:1px solid var(--line)}
.cbody ul li:first-child{border-top:1px solid var(--line)}
.cbody ul li b{color:var(--ink)}
/* Field register — what a form actually collects, named field by field.
   A privacy policy that says "typically your name and email" when the form
   asks six questions is not describing the form. */
.fields{margin:14px 0 18px;border-top:1px solid var(--line)}
.fld{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
.fld .fn{font-size:15px;color:var(--ink);flex:1 1 auto;min-width:0}
.fld .fw{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right;flex:0 1 auto;letter-spacing:.03em}
.on-dark .clause{border-bottom-color:rgba(255,255,255,.12)}
.on-dark .clause h2{color:var(--on-dark)}
.on-dark .clause .cnum{color:var(--teal-bright)}
.on-dark .cbody p{color:var(--on-dark-2)}
.on-dark .cbody b,.on-dark .cbody strong{color:var(--on-dark)}
.on-dark .cbody h3{color:var(--on-dark)}
.on-dark .cbody ul li{color:var(--on-dark-2);border-bottom-color:rgba(255,255,255,.12)}
.on-dark .cbody ul li:first-child{border-top-color:rgba(255,255,255,.12)}
.on-dark .cbody ul li b{color:var(--on-dark)}

/* ---- .callout — the one statement on each page that a reader should leave
        with. One per page, never two. ---- */
.callout{margin-top:40px;padding:30px 32px;border-radius:var(--radius-card);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-left:2px solid var(--teal-bright);max-width:80ch}
/* Same rule as .verdict: emphasis is weight and a step of contrast, never the
   interaction colour. The base drops to secondary so the emphasis has somewhere
   to go — bold white on white is weight with no contrast behind it. */
.callout p{font-size:18px;line-height:1.56;letter-spacing:-.012em;color:var(--on-dark-2);margin:0}
.callout p b{color:var(--on-dark);font-weight:600}

/* ---- .blocked — an unresolved value rendered honestly rather than faked.
        A placeholder email in a privacy policy is worse than a visible gap:
        one is an open item, the other is a false statement of fact. ---- */
.blocked{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--draft);background:var(--draft-bg);border-radius:4px;padding:3px 9px;letter-spacing:.02em}
.on-dark .blocked{color:var(--draft);background:var(--draft-bg)}

/* ---- close band ---- */
.lclose{max-width:74ch}
.lclose .lead{margin-bottom:24px}
.xref{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}

/* ---- responsive ---- */
@media(max-width:960px){
  .glance{grid-template-columns:1fr}
  .toc ol{grid-template-columns:1fr}
  .cbody{padding-left:0}
  .clause>.ch{grid-template-columns:1fr;gap:6px}
  .clause .cnum{padding-top:0}
}
@media(max-width:640px){
  .callout{padding:24px 20px}
  .callout p{font-size:16.5px}
  .fld{flex-direction:column;gap:3px}
  .fld .fw{text-align:left}
  .clause{padding:34px 0}
}

/* ============================================================
   PRINT
   These are the two pages on the site most likely to be printed and
   filed. Navy bands print as ink-heavy slabs and the chrome is noise on
   paper, so both are dropped and the type falls back to a serif-free
   black-on-white document with clause numbers intact.
   ============================================================ */
@media print{
  .site-header,.site-footer,.toc,.hero .glow,.grain::before{display:none!important}
  body.mkt{background:#FFFFFF;color:#000000;font-size:11pt}
  .on-dark,.hero,.sec.sunken{background:#FFFFFF!important;color:#000000!important}
  .on-dark .d1,.on-dark .d2,.on-dark .d3,.on-dark .lead,.on-dark p,.on-dark h2,
  .on-dark h3,.on-dark li,.callout p,.callout p b{color:#000000!important}
  .eyebrow,.clause .cnum,.on-dark .clause .cnum{color:#000000!important}
  .sec,.hero{padding:14pt 0!important}
  .callout{border:1pt solid #000;background:none!important}
  .clause{page-break-inside:avoid;border-bottom:0.5pt solid #999}
  .blocked{background:none!important;border:1pt solid #000;color:#000!important}
  a[href^="/"]::after,a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
  .shell{max-width:none;padding:0}
}