/* ClinicalTrialSpot — B2B design system (Phase A.4)
   Per docs/design/phaseA4-blind-gate-reconciliation.md + Rev 2 §6.10.
   Design system: ink-navy anchor, teal/azure accents, medical-blue CTA (white text),
   sentence-case grotesk headings, uniform single-accent cards. */

:root {
  --ink:      #0C2740;   /* anchor: header/footer/dark bands, headings */
  --ink-2:    #12303e;
  --teal:     #12A2A8;   /* primary accent: rules, icons, focus */
  --teal-dk:  #0B7A80;
  --azure:    #1C6FB0;   /* links, secondary accent */
  --slate:    #3A4A57;   /* body text */
  --surface:  #F4F8FB;   /* alt section bg */
  --paper:    #FFFFFF;
  --line:     #DCE6EC;
  --cta:      #1C6FB0;   /* primary CTA fill (medical blue / azure) — WHITE text (5.32:1 AA). Supersedes coral #F26A3D (RB 2026-07-12). */
  --cta-hover:#175E96;   /* hover darker step — white text 6.82:1 AA */
  --cta-ink:  #FFFFFF;   /* CTA text: white (was ink-navy under coral) */
  --footer:   #0C2229;

  --font-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --wrap: 1160px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.15;
  font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .5em; } /* sentence case, not uppercase */
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
a { color: var(--azure); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* Accessibility: visible focus + skip link + reduced motion */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 3px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
  padding: .6rem 1rem; z-index: 200; }
.skip-link:focus { left: 8px; top: 8px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; } }

/* Layout — single source of gutters: centered max-width + responsive side padding.
   Gutters never collapse below 1.5rem and grow to 4rem on wide viewports, so content
   is never flush to the edge. Sections that add vertical padding MUST use padding-block
   (not the `padding: X 0` shorthand) or they reset these horizontal gutters to 0. */
.wrap, .nav-container, .utility-inner, .footer-container { max-width: var(--wrap);
  margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem); }
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); color: #cdd9e1; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section__head { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.section__head p { font-size: 1.05rem; }
.eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; font-weight: 600; color: var(--teal-dk); margin: 0 0 .5rem; } /* teal-dk = 5.12:1 on light */
.section--ink .eyebrow, .cta-band .eyebrow { color: var(--teal); } /* bright teal on dark = 4.9:1 AA */

/* Interior page header + prose */
.page-hero { background: var(--surface); border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.page-hero .lead { color: var(--slate); font-size: 1.12rem; max-width: 46rem; margin: .75rem 0 0; }
.wrap--narrow { max-width: 780px; }
.prose h2 { margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .4rem; }
.prose a { text-decoration: underline; } /* in-text links need non-color distinction (a11y) */
.muted { color: #5a6771; } /* 5.81:1 on white, 5.44:1 on surface — AA */
.prose .muted { font-size: .9rem; }

/* Buttons */
.btn { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: .8rem 1.5rem; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
.btn-primary { background: var(--cta); color: var(--cta-ink); }   /* medical blue + white = 5.32:1 AA */
.btn-primary:hover { background: var(--cta-hover); color: var(--cta-ink); text-decoration: none; }
.btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-secondary:hover { border-color: #fff; text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); text-decoration: none; }

/* Utility topbar */
.utility-bar { background: var(--ink); color: #b8c6d1; font-size: .82rem; }
.utility-inner { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.utility-tag { font-family: var(--font-head); letter-spacing: .04em; }
.utility-contact { color: #dbe6ee; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper);
  border-bottom: 1px solid var(--line); }
.nav-container { display: flex; align-items: center; justify-content: space-between;
  min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--teal);
  font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; text-decoration: none; }
.logo-mark { flex: none; }
.logo-text { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a { color: var(--ink); font-family: var(--font-head); font-weight: 500;
  font-size: .95rem; }
.nav-links a:hover { color: var(--teal); text-decoration: none; }
.nav-links .nav-cta { background: var(--cta); color: var(--cta-ink); padding: .5rem 1rem;
  border-radius: var(--radius); }
.nav-links .nav-cta:hover { background: var(--cta-hover); color: var(--cta-ink); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); display: block; }

/* Hero */
.hero { background: linear-gradient(180deg, var(--surface), var(--paper)); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem); } /* padding-block only — must not reset .wrap side gutters */
.hero h1 { margin-bottom: 1rem; }
.hero__lead { font-size: 1.18rem; color: var(--slate); max-width: 34rem; }
.hero__cta { margin-top: 1.75rem; display: flex; gap: .9rem; flex-wrap: wrap; }
.hero__art { display: flex; justify-content: center; }
/* Fixed width=340 SVG must scale down, or on mobile the 1fr grid track's min-content blows past
   the column and forces page-wide horizontal scroll (clips every row's right edge). */
.hero__art svg { max-width: 100%; height: auto; }
.trust-strip { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  align-items: center; color: var(--slate); font-size: .85rem; }
.trust-strip span { display: inline-flex; align-items: center; gap: .4rem; }

/* Performance proof band — stat tiles (on-system tokens) */
.stats { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; }
.stat { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--teal);
  border-radius: var(--radius); padding: 1.5rem; }
.stat__num { font-family: var(--font-head); font-weight: 700; color: var(--ink);
  font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.stat__label { color: var(--slate); font-size: .92rem; margin: .45rem 0 0; }
.stat__sub { display: block; color: var(--slate); }
.stats-lead { margin: 1.75rem auto 0; max-width: 60rem; text-align: center; color: var(--slate); }
.stats-note { margin: 1rem auto 0; max-width: 60rem; text-align: center; color: #5a6771;
  font-size: .8rem; line-height: 1.5; } /* #5a6771 = AA on surface */

/* Metrics / capability statements (legacy helper) */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.metric__title { color: var(--teal-dk); font-family: var(--font-head); font-weight: 600;
  font-size: 1.05rem; margin: 0 0 .25rem; } /* not a heading — keeps heading order clean */
.metric p { font-size: .95rem; margin: 0; }

/* Feature tiles (dark band) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tile { background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding: 1.6rem; }
.tile .tile__icon { color: var(--teal); margin-bottom: .8rem; }
.tile h3 { color: #fff; }
.tile p { color: #b8c6d1; margin: 0; font-size: .95rem; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; counter-reset: step; }
.step { position: relative; padding-top: 3rem; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--teal); color: var(--teal-dk); font-family: var(--font-head); font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.step h3 { font-size: 1rem; }
.step p { font-size: .9rem; margin: 0; }

/* Capability cards — uniform single-accent */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--teal);
  border-radius: var(--radius); padding: 1.5rem; }
.card__icon { color: var(--teal); margin-bottom: .6rem; }
.card h3 { margin-bottom: .35rem; }
.card p { font-size: .93rem; margin: 0; }

/* Compliance callout */
.callout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
.callout ul { margin: 0; padding-left: 1.1rem; }
.callout li { margin-bottom: .4rem; }

/* Inquiry / CTA band */
.cta-band { background: var(--ink); color: #cdd9e1; text-align: center; }
.cta-band h2 { color: #fff; }
.inquiry { max-width: 560px; margin: 2rem auto 0; text-align: left; display: grid; gap: .9rem; }
.field label { display: block; font-family: var(--font-head); font-weight: 500; font-size: .85rem;
  color: var(--ink); margin-bottom: .3rem; }
.section--ink .field label, .cta-band .field label { color: #e6eef3; }
.field input, .field textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-family: var(--font-body); background: #fff; color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; }
.form-error { color: #ffd7cb; font-size: .9rem; }
.form-success { color: #bff0e6; font-size: .95rem; }
.form-result { margin-top: .5rem; }

/* Flash messages */
.flash-messages { max-width: var(--wrap); margin: 1rem auto 0; padding-inline: clamp(1.5rem, 5vw, 4rem); }
.flash { padding: .75rem 1rem; border-radius: 8px; margin-bottom: .5rem; }
.flash-error { background: #fdece7; color: #9a3412; }
.flash-success { background: #e6f6f1; color: #0b6b53; }

/* Footer */
.site-footer { background: var(--footer); color: #9fb1bd; }
.footer-container { padding-top: 3rem; padding-bottom: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
.footer-brand .logo-text { color: #fff; }
.footer-brand .logo { color: var(--teal); }
.footer-tagline { margin-top: .75rem; font-size: .9rem; max-width: 30rem; }
.footer-col h2 { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 .75rem; }
.footer-col a { display: block; color: #9fb1bd; font-size: .92rem; margin-bottom: .45rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2rem; padding-top: 1.25rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }

/* Empty state (Active Trials) */
.empty-state { text-align: center; max-width: 520px; margin: 0 auto; }

/* Responsive */
@media (max-width: 860px) {
  .hero__grid, .callout { grid-template-columns: 1fr; }
  .hero__grid > *, .callout > * { min-width: 0; }  /* let 1fr tracks shrink below content — no h-scroll */
  .hero__art { order: -1; }
  /* Mobile: hero art is centered, so center the stacked text too (eyebrow/H1/subhead/CTAs/trust)
     and the compliance-band intro — left-aligned text under centered art read as off-center. */
  .hero__grid > div:first-child { text-align: center; }
  .hero__lead { margin-inline: auto; }        /* max-width block: recenter under text-align:center */
  .hero__cta { justify-content: center; }      /* center the CTA pair */
  .trust-strip { justify-content: center; }    /* center the trust bullets */
  .callout > div:first-child { text-align: center; }  /* heading + subhead + button (inline-block centers via text-align) */
  .tiles, .cards, .metrics { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: flex; }
  .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; background: var(--paper);
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .7rem 0; }
  .nav-links .nav-cta { text-align: center; margin-top: .5rem; }
  .utility-inner { font-size: .76rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}