/* ===== Fonts (bundled, offline) ===== */
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-display:swap;src:url('../fonts/jakarta-400.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-display:swap;src:url('../fonts/jakarta-500.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-display:swap;src:url('../fonts/jakarta-600.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-display:swap;src:url('../fonts/jakarta-700.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-display:swap;src:url('../fonts/jakarta-800.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url('../fonts/mono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url('../fonts/mono-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:600;font-display:swap;src:url('../fonts/mono-600.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url('../fonts/mono-700.woff2') format('woff2');}

/* ===== Tokens ===== */
:root{
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --bg:hsl(30 20% 98%); --card:hsl(0 0% 100%); --muted:hsl(220 14% 96%);
  --fg:hsl(222 47% 11%); --muted-fg:hsl(220 9% 44%);
  --primary:hsl(168 76% 32%); --accent:hsl(25 95% 53%);
  /* text tier: same hues, deepened to >=4.5:1 on --bg for small text and on #fff-labelled fills */
  --primary-deep:hsl(168 76% 28%); --accent-deep:hsl(25 90% 38%);
  --success:hsl(160 84% 39%); --success-deep:hsl(160 84% 26%);
  --border:hsl(220 13% 91%); --ring:hsl(168 76% 32%);
  --radius:10px; --radius-sm:8px; --radius-lg:16px; --radius-xl:18px;
  --shadow-card:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);
  --shadow-hover:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
  --shadow-glow:0 0 24px -6px hsl(168 76% 32%/.45);
}
/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:76px} /* anchored jumps must clear the 64px sticky header */
body{font-family:var(--font);font-weight:500;background:var(--bg);color:var(--fg);
  line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 24px}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:hsl(0 0% 100%/.7);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.01em}
.brand-mark{width:32px;height:32px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--primary),var(--accent))}

/* ===== Typography helpers ===== */
.eyebrow{font-family:var(--mono);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:11px;color:var(--primary-deep)}
/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:600;
  font-size:14px;border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s}
.btn svg{width:16px;height:16px}
.btn-lg{padding:13px 28px;font-size:15px}
.btn-primary{background:var(--primary-deep);color:#fff;box-shadow:var(--shadow-glow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.btn-ghost:hover{background:var(--muted)}
/* one focus ring for every interactive element (links, buttons, cards, pills, journey nav) */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ===== Badges / status ===== */
.badge-row{display:flex;flex-wrap:wrap;gap:8px}
.badge{font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;
  background:var(--muted);color:var(--muted-fg)}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:999px;background:hsl(160 84% 39%/.12);color:var(--success-deep)} /* tint = --success @12% */
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ===== Project detail ===== */
.breadcrumb{font-family:var(--mono);font-size:12px;color:var(--muted-fg);
  display:inline-flex;align-items:center;gap:6px;padding:28px 0 0}
.breadcrumb:hover{color:var(--primary-deep)}
.project-head{padding:20px 0 8px;max-width:760px}
.project-head h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.02em;margin:12px 0}
.project-head .lede{font-size:1.15rem;color:var(--muted-fg)}
.detail-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:20px 0 8px}
.detail-body{display:grid;gap:14px;max-width:760px;padding:28px 0;color:var(--fg)}
.detail-body h2{font-size:1.25rem;font-weight:700;margin-top:12px}
.detail-body ul{padding-left:20px;color:var(--muted-fg);display:grid;gap:6px}
.detail-body a{color:var(--primary-deep);text-decoration:underline;text-underline-offset:3px}
.proof-block{padding:20px 22px;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:var(--radius);background:linear-gradient(120deg,hsl(168 76% 32%/.07),transparent 70%)}
.proof-block .ph{font-size:1.12rem;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.proof-block p{color:var(--muted-fg);margin:0;font-size:.97rem;line-height:1.6}
.bridge-note{padding:14px 16px;border-radius:var(--radius);background:var(--muted);font-size:.92rem;line-height:1.55;color:var(--fg)}
.shot-strip{padding:8px 0 80px}
.shot{display:block;width:100%;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-card)}
.shot-link,.shot-launch{display:block;text-decoration:none}
.shot-link .shot,.shot-launch .shot{transition:box-shadow .3s,transform .3s}
.shot-link:hover .shot,.shot-launch:hover .shot{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.shot-caption{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted-fg)}
.shot-link:hover .shot-caption,.shot-launch:hover .shot-caption{color:var(--primary-deep)}
.shot-caption svg{width:14px;height:14px}
/* Inline demo embed (used when served over http; see main.js embedDemoIfOnline) */
.demo-embed{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);background:var(--card)}
.demo-embed-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted-fg)}
.demo-embed-bar a{color:var(--primary-deep);font-weight:600;text-decoration:none}
.demo-embed-bar a:hover{text-decoration:underline}
.demo-embed iframe{display:block;width:100%;height:78vh;min-height:520px;border:0;background:#fff}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border);padding:40px 0;color:var(--muted-fg);font-size:14px}
.site-footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ===== Animations ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* hidden-until-revealed is gated on html.js (set inline in <head>) so content stays
   visible when scripts never run: no-JS browsers, crawlers, reader modes */
.js .stagger > *{opacity:0}
.stagger.in > *{animation:fadeInUp .5s ease-out forwards}
.stagger.in > *:nth-child(1){animation-delay:0ms}
.stagger.in > *:nth-child(2){animation-delay:60ms}
.stagger.in > *:nth-child(3){animation-delay:120ms}
.stagger.in > *:nth-child(4){animation-delay:180ms}
.stagger.in > *:nth-child(5){animation-delay:240ms}
.stagger.in > *:nth-child(6){animation-delay:300ms}
.stagger.in > *:nth-child(7){animation-delay:360ms}
@media(prefers-reduced-motion:reduce){.js .stagger > *{opacity:1;animation:none}}

/* ===== Lifecycle homepage (index) ===== */
.lc-hero{padding:54px 0 32px}
@media(min-width:768px){.lc-hero{padding:72px 0 44px}}
.lc-eyebrow{display:block;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:18px}
.lc-title{font-weight:800;line-height:.94;letter-spacing:-.03em;font-size:clamp(1.95rem,7.6vw,6rem);max-width:14ch;overflow-wrap:break-word}
.lc-title .tl{color:var(--primary);background:linear-gradient(transparent 64%,hsl(25 95% 53%/.32) 64%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lc-intro{margin-top:26px;max-width:48ch;font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.5;color:var(--muted-fg)}
/* flagship spotlight band (top of page, above the lifecycle flow) */
.lc-flagship{position:relative;display:block;margin:4px 0 30px;padding:26px 26px 24px;border-radius:var(--radius-xl);border:1px solid var(--border);background:linear-gradient(135deg,hsl(168 76% 32%/.10),hsl(25 95% 53%/.05));overflow:hidden;box-shadow:var(--shadow-card);transition:transform .25s,box-shadow .25s}
@media(min-width:768px){.lc-flagship{padding:32px 36px 28px}}
.lc-flagship:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.lc-flagship::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--primary),var(--accent))}
.lc-flag-eyebrow{display:block;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:12px}
.lc-flag-title{font-weight:800;letter-spacing:-.025em;line-height:1.02;font-size:clamp(1.6rem,4.4vw,2.6rem)}
.lc-flag-sub{margin-top:12px;max-width:64ch;font-size:clamp(.95rem,1.7vw,1.08rem);line-height:1.55;color:var(--muted-fg)}
.lc-flag-cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--primary-deep)}
.lc-flag-cta svg{width:16px;height:16px;transition:transform .2s}
.lc-flagship:hover .lc-flag-cta svg{transform:translate(3px,-3px)}

.lc-flow{position:relative;padding:8px 0 8px 30px;margin-top:4px}
@media(min-width:768px){.lc-flow{padding-left:48px}}
.lc-flow::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(var(--primary),var(--accent))}
@media(min-width:768px){.lc-flow::before{left:18px}}
.lc-stage{position:relative;margin-bottom:22px}
@media(min-width:768px){.lc-stage:nth-child(even){margin-left:7%}}
.lc-dot{position:absolute;left:-30px;top:11px;width:18px;height:18px;border-radius:50%;background:var(--primary);border:3px solid var(--bg)}
@media(min-width:768px){.lc-dot{left:-48px}}
.lc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-card);max-width:760px;transition:transform .25s,box-shadow .25s}
.lc-card:hover{box-shadow:var(--shadow-hover)}
.lc-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.lc-num{flex:none;font-weight:800;font-size:clamp(44px,7vw,64px);line-height:.7;letter-spacing:-.04em;-webkit-text-stroke:2px var(--accent);color:transparent}
.lc-phase-name{font-size:clamp(21px,3.2vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.02}
.lc-phase-desc{font-size:14px;color:var(--muted-fg);margin-top:4px}
.lc-pills{display:flex;flex-wrap:wrap;gap:10px}
.lc-pill{display:inline-flex;align-items:center;font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--fg);transition:transform .18s,background .18s,color .18s,border-color .18s}
@media(max-width:767.98px){.lc-pill{padding:11px 16px}} /* 44px+ touch target */
.lc-pill:hover{transform:translateY(-2px);background:var(--fg);color:var(--bg);border-color:var(--fg)}

.lc-etmf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding:20px 24px;border-radius:var(--radius-lg);background:var(--fg);color:var(--bg);transition:transform .25s}
.lc-etmf:hover{transform:translateY(-2px)}
.lc-etmf .inf{flex:none;font-size:38px;font-weight:800;line-height:.8;color:var(--accent)}
.lc-etmf b{font-size:18px;font-weight:700;letter-spacing:-.01em}
.lc-etmf .sub{font-size:14px;opacity:.72}
.lc-etmf .go{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
/* closing band: the CRO / web-design capability, at the very bottom (a different category from the clinical tools) */
.lc-cro{margin:26px 0 8px;padding:26px 26px 22px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--muted)}
@media(min-width:768px){.lc-cro{padding:30px 34px 26px}}
.lc-cro .ey{display:block;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:10px}
.lc-cro h2{font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.4rem,3.4vw,2rem)}
.lc-cro p{margin:12px 0 0;max-width:68ch;font-size:clamp(.95rem,1.5vw,1.04rem);line-height:1.6;color:var(--muted-fg)}
.lc-cro .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.03em;color:var(--primary-deep)}
.lc-cro .go svg{width:16px;height:16px;transition:transform .2s}
.lc-cro a.go:hover svg{transform:translate(3px,-3px)}

/* ===== Follow-the-trial journey ===== */
.lc-journey-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:26px}
.lc-journey-cta .ar{font-size:11px}
.lc-journey-resume{font-family:var(--mono);font-size:12px;color:var(--muted-fg)}
.lc-journey-resume:hover{color:var(--primary-deep)}
.lc-pill-stop{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;margin-right:7px;border-radius:999px;background:var(--muted);color:var(--muted-fg);
  font-family:var(--mono);font-size:10px;font-weight:600;vertical-align:middle}

.journey-nav{margin:6px 0 18px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow-card);overflow:hidden}
.journey-track{height:4px;background:var(--muted)}
.journey-track i{display:block;height:100%;border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .35s}
.journey-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:12px 16px}
/* grid items default to min-width:auto, so nowrap children (the ctrls buttons) would set the
   column's minimum and push the row past the viewport on phones; zero it so they can shrink */
.journey-row > *{min-width:0}
.journey-meta{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.journey-step{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--primary-deep);letter-spacing:.03em}
.journey-phase{font-family:var(--mono);font-size:10px;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.05em}
.journey-narr{font-size:14px;color:var(--fg);line-height:1.45;margin:0}
.journey-chip{display:inline-block;margin-left:4px;font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--accent-deep);background:hsl(25 95% 53%/.13);padding:1px 7px;border-radius:999px;
  white-space:nowrap;vertical-align:middle}
.journey-ctrls{display:flex;gap:8px;white-space:nowrap}
.journey-btn{display:inline-block;font-family:var(--font);font-weight:600;font-size:13px;line-height:1.2;
  padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--fg);background:var(--card);
  min-width:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .2s,color .2s,filter .2s}
.journey-btn .ar{opacity:.8}
.journey-btn:hover{background:var(--muted);color:var(--primary-deep)}
.journey-btn.next{background:var(--primary-deep);color:#fff;border-color:transparent}
.journey-btn.next:hover{filter:brightness(1.07);color:#fff}
.journey-btn.next.finish{background:var(--accent-deep)}
.journey-btn.ghost{color:var(--muted-fg);opacity:.55;pointer-events:none}
@media(max-width:767.98px){
  .journey-row{grid-template-columns:1fr;gap:11px}
  .journey-ctrls{justify-content:space-between}
  .journey-btn{flex:1;max-width:none;text-align:center;padding:13px 12px}
}