@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ONTRAC V4 shared stylesheet — DARK PORT (SPEC bc884a94 / defe8d01 item 4a)
   Tokens below now mirror the live homepage design system so the specialist
   pages inherit the production brand and no longer flash a white page.
   Class names stay v4- prefixed so they cannot collide with homepage styles. */

:root{
  --v4-ink:#EAF1FA;        /* primary text      = homepage --ink   */
  --v4-paper:#070C16;      /* page background   = homepage --bg    */
  --v4-panel:#0E1A2E;      /* card / panel bg   = homepage --bg-3  */
  --v4-line:rgba(255,255,255,.10);  /* hairlines = homepage --line */
  --v4-steel:#90A2BE;      /* secondary text    = homepage --muted */
  --v4-signal:#2DD4C4;     /* accent (teal)     = homepage --teal  */
  --v4-signal-ink:#06231d; /* text on a teal fill (dark, for contrast) */
  --v4-amber:#F5B94D;      /* caution highlight, lightened for dark */
  --v4-radius:10px;
  --v4-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --v4-body:"IBM Plex Sans", system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--v4-paper);color:var(--v4-ink);font-family:var(--v4-body);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
/* subtle ambient field, matched to the homepage depth */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1000px 640px at 82% -6%, rgba(39,170,225,.08), transparent 60%),
    radial-gradient(820px 560px at 8% 4%, rgba(45,212,196,.06), transparent 60%);}
.v4-wrap{max-width:1040px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.v4-topbar{border-bottom:1px solid var(--v4-line);background:rgba(7,12,22,.72);backdrop-filter:blur(14px);position:sticky;top:0;z-index:40}
.v4-topbar .v4-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.v4-logo{font-family:var(--v4-display);font-weight:700;letter-spacing:.10em;text-decoration:none;color:var(--v4-ink);font-size:19px}
.v4-logo em{font-style:normal;color:var(--v4-signal)}
.v4-nav a{color:var(--v4-steel);text-decoration:none;margin-left:20px;font-size:15px;transition:color .15s}
.v4-nav a:hover{color:var(--v4-ink)}
.v4-eyebrow{color:var(--v4-signal);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:56px 0 8px}
h1{font-family:var(--v4-display);font-size:clamp(30px,4.5vw,44px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;font-weight:600}
h2{font-family:var(--v4-display);font-size:26px;margin:44px 0 10px;font-weight:600;letter-spacing:-.01em}
h3{font-family:var(--v4-display);font-size:18px;margin:0 0 6px;font-weight:600}
.v4-lede{font-size:19px;color:var(--v4-steel);max-width:46em;margin:0 0 28px}
.v4-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:26px 0}
.v4-card{background:var(--v4-panel);border:1px solid var(--v4-line);border-radius:var(--v4-radius);padding:22px}
.v4-card p{margin:6px 0 0;color:var(--v4-steel);font-size:15.5px}
.v4-tag{display:inline-block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-signal);font-weight:700;margin-bottom:6px}
.v4-math{background:var(--v4-panel);border:1px solid var(--v4-line);border-left:4px solid var(--v4-signal);border-radius:var(--v4-radius);padding:18px 22px;margin:22px 0;font-size:16px}
.v4-math code{font-size:15px;background:transparent;color:var(--v4-ink)}
.v4-note{color:var(--v4-steel);font-size:14.5px;border-top:1px solid var(--v4-line);margin-top:40px;padding-top:14px}
.v4-cta{display:inline-block;background:var(--v4-signal);color:var(--v4-signal-ink);text-decoration:none;padding:12px 22px;border-radius:999px;font-family:var(--v4-display);font-weight:600;margin:10px 0 60px;box-shadow:0 8px 26px -10px var(--v4-signal);transition:transform .12s,box-shadow .2s}
.v4-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px var(--v4-signal)}
.v4-list{padding-left:0;list-style:none;margin:14px 0}
.v4-list li{padding:9px 0 9px 26px;position:relative;border-bottom:1px dashed var(--v4-line)}
.v4-list li::before{content:"—";position:absolute;left:0;color:var(--v4-signal);font-weight:700}
.v4-kv{display:flex;gap:26px;flex-wrap:wrap;color:var(--v4-steel);font-size:14.5px;margin:6px 0 0}
.v4-kv b{color:var(--v4-ink)}
.v4-caution{border-left:4px solid var(--v4-amber);background:var(--v4-panel);border-radius:var(--v4-radius);padding:14px 20px;margin:20px 0;font-size:15.5px}
/* dark form controls so inputs/selects on the pages match the theme */
.v4-wrap input,.v4-wrap select,.v4-wrap textarea{background:var(--v4-panel);color:var(--v4-ink);border:1px solid var(--v4-line);border-radius:8px;font-family:inherit}
.v4-wrap input:focus,.v4-wrap select:focus,.v4-wrap textarea:focus{outline:none;border-color:var(--v4-signal)}
footer{border-top:1px solid var(--v4-line);margin-top:70px;padding:26px 0 40px;color:var(--v4-steel);font-size:14px;position:relative;z-index:1}
@media (prefers-reduced-motion: no-preference){
  .v4-card{transition:transform .15s ease,border-color .15s ease}
  .v4-card:hover{transform:translateY(-2px);border-color:var(--v4-line)}
}
@media (prefers-reduced-motion: reduce){
  .v4-cta,.v4-card{transition:none}
}
a:focus-visible,.v4-cta:focus-visible,button:focus-visible{outline:2px solid var(--v4-signal);outline-offset:3px}