/* ============================================================
   Dupixent Respiratory Decision Lab — shared design system
   White clinical "lab" canvas · Dupixent green system accent
   Static build: no external fonts or trackers
   ============================================================ */

:root{
  --paper:#FCFCFB;
  --ink:#0B0D11;
  --studio-black:#080A0C;
  --type:#16181B;
  --type-mute:rgba(20,22,25,.56);
  --type-faint:rgba(20,22,25,.40);
  --rule:rgba(0,0,0,.12);
  --rule-soft:rgba(0,0,0,.07);
  --card:#FAFAF8;
  --green:#009B77;
  --green-bright:#00B98C;
  --green-deep:#0A7A52;
  --lime:#97D700;
  --gold:#F2A900;
  --gold-deep:#B07700;
  --teal:#00B9A0;
  --dupixent-blue:#00A3E0;
  --dupixent-orange:#F28C00;
  --dupi-1:#009B77;
  --dupi-2:#00B9A0;
  --dupi-3:#97D700;
  --dupi-4:#F2A900;
  --dupi-5:#00A3E0;
  --dupi-6:#F28C00;
  --mono:"Courier New",ui-monospace,monospace;
  --sans:Arial,-apple-system,"Segoe UI",Helvetica,sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
.review-code,[data-review-code]>.review-code{ display:none !important; }
body{
  background:var(--paper);
  color:var(--type);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
/* Dupixent stripe — thin brand accent across the very top of every page */
body::before{ content:""; position:fixed; top:0; left:0; right:0; height:4px; z-index:60; background:linear-gradient(90deg,#009B77 0%,#00B9A0 34%,#97D700 66%,#F2A900 100%); }
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ---------- top bar / chrome ---------- */
.frame{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px;
  background:rgba(252,252,251,.92);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--rule);
}
.frame.dark{
  background:rgba(8,10,12,.92);
  border-bottom-color:rgba(255,255,255,.08);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:118px; height:auto; flex:0 0 auto; }
.brand.has-logo .chev{ display:none; }
.nav-logo{ width:136px; height:auto; margin:0 0 12px; }
.foot-logo{ width:112px; height:auto; flex:0 0 auto; }
.chev{ color:var(--green); font-weight:800; letter-spacing:-2px; font-size:18px; }
.brand .bt{ font-weight:800; font-size:13.5px; letter-spacing:-.01em; }
.brand .bs{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--type-mute); }
.frame.dark .brand .bt{ color:#EDEFF1; }
.frame.dark .brand .bs{ color:rgba(237,239,241,.5); }
.crumb{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--type-mute); }
.frame.dark .crumb{ color:rgba(237,239,241,.6); }

/* burger */
.burger{
  position:fixed; top:13px; right:22px; z-index:60;
  width:40px; height:40px; border:1px solid rgba(0,155,119,.24); background:rgba(255,255,255,.92);
  border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,75,58,.08); transition:background .18s, border-color .18s, box-shadow .18s;
}
.burger:hover{ border-color:var(--dupi-2); box-shadow:0 10px 26px rgba(0,155,119,.14); }
.burger span{ display:block; width:18px; height:2px; background:var(--dupi-1); position:relative; }
.burger span:before,.burger span:after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--dupi-1); transition:.2s; }
.burger span:before{ top:-6px; } .burger span:after{ top:6px; }
body.nav-open .burger span{ background:transparent; }
body.nav-open .burger{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); box-shadow:none; }
body.nav-open .burger span:before{ top:0; transform:rotate(45deg); background:var(--dupi-4); }
body.nav-open .burger span:after{ top:0; transform:rotate(-45deg); background:var(--dupi-5); }

.nav-backdrop{ position:fixed; inset:0; background:rgba(8,10,12,.45); opacity:0; pointer-events:none; transition:.25s; z-index:50; }
body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
.nav-panel{
  position:fixed; top:0; right:0; height:100%; width:340px; max-width:86vw; z-index:55;
  background:linear-gradient(180deg,#0B0D11 0%,#0D1314 58%,#101310 100%); color:#fff; transform:translateX(100%); transition:transform .28s ease;
  padding:64px 24px 24px; overflow-y:auto;
}
body.nav-open .nav-panel{ transform:none; }
.nav-eyebrow{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(11,13,17,.58); margin:-64px -24px 18px; padding:18px 24px 16px; line-height:1.5; background:#fff; border-bottom:4px solid transparent; border-image:linear-gradient(90deg,var(--green),var(--teal),var(--lime),var(--gold),var(--dupixent-blue),var(--dupixent-orange)) 1; }
.nav-eyebrow b{ color:var(--green-deep); }
.nav-panel ul{ list-style:none; margin:0; padding:0; }
.nav-divider{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); padding:18px 0 8px; border-top:1px solid rgba(255,255,255,.08); margin-top:10px; }
.nav-divider:first-child{ border-top:0; margin-top:0; padding-top:0; }
.nav-panel li a{ position:relative; display:flex; gap:12px; align-items:flex-start; padding:11px 10px; text-decoration:none; border-radius:4px; overflow:hidden; transition:background .15s, transform .15s; }
.nav-panel li a:before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,155,119,.24),rgba(0,185,160,.18),rgba(151,215,0,.16),rgba(242,169,0,.15),rgba(0,163,224,.18),rgba(242,140,0,.14)); opacity:0; transition:opacity .18s ease; pointer-events:none; }
.nav-panel li a:hover:before{ opacity:1; }
.nav-panel li a:active{ transform:translateX(1px); }
.nav-panel li a > *{ position:relative; z-index:1; }
.nav-num{ font-family:var(--mono); font-size:11px; color:var(--green-bright); min-width:22px; padding-top:1px; }
.nav-panel li.locked .nav-num{ color:var(--gold); }
.nav-t{ font-size:13.5px; font-weight:700; }
.nav-sub{ display:block; font-size:11px; font-weight:400; color:rgba(255,255,255,.55); margin-top:2px; }
.nav-panel li.locked .nav-t{ color:rgba(255,255,255,.55); }
.nav-stat{ margin-left:auto; font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; padding:2px 6px; border:1px solid; align-self:flex-start; margin-top:2px; }
.nav-stat.on{ color:var(--green-bright); border-color:rgba(0,185,140,.4); }
.nav-stat.soon{ color:var(--gold); border-color:rgba(242,169,0,.4); }
.nav-foot{ margin-top:26px; font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.35); }

/* ---------- page base ---------- */
.page{ max-width:1100px; margin:0 auto; padding:38px 26px 30px; }
.eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--green); font-weight:700; margin:0 0 14px; }
.mark{ display:inline-grid; grid-template-columns:repeat(2,5px); gap:2px; }
.mark i{ width:5px; height:5px; border-radius:50%; display:block; }
.mark i:nth-child(1){ background:var(--green); } .mark i:nth-child(2){ background:var(--teal); }
.mark i:nth-child(3){ background:var(--lime); } .mark i:nth-child(4){ background:var(--gold); }
.h1{ font-size:34px; line-height:1.12; letter-spacing:-.018em; font-weight:800; margin:0 0 12px; max-width:none; }
.h2{ font-size:24px; line-height:1.18; letter-spacing:-.01em; font-weight:800; margin:0 0 8px; }
.sub{ font-size:16px; line-height:1.55; color:var(--type-mute); margin:0; max-width:88ch; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; text-decoration:none; padding:13px 22px; border-radius:4px; cursor:pointer; border:0; }
.btn-primary{ background:var(--green); color:#fff; }
.btn-primary:hover{ background:var(--green-bright); }
.btn-ghost{ background:transparent; color:var(--type); border:1px solid var(--rule); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green-deep); }

/* ---------- footer ---------- */
.foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; max-width:1100px; margin:30px auto 0; padding:18px 26px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--type-mute); }
.foot a{ color:var(--green-deep); text-decoration:none; }

/* Respiratory Vision / agenda mark */
.rv-mark{
  --rv-scale:1;
  position:relative;
  width:min(390px,100%);
  min-height:168px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#F7FBF8);
  overflow:hidden;
}
.rv-mark:before,.rv-mark:after{ content:""; position:absolute; top:60px; width:43%; height:56px; border-top:5px solid; border-radius:50% 50% 0 0; }
.rv-mark:before{ left:28px; border-color:var(--green); transform:rotate(-11deg); }
.rv-mark:after{ right:28px; border-color:var(--dupixent-blue); transform:rotate(11deg); }
.rv-core,.rv-node{ position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; letter-spacing:-.01em; }
.rv-core{ left:50%; top:54px; transform:translateX(-50%); width:150px; height:56px; border-radius:10px; color:#fff; background:var(--green-deep); font-size:15px; line-height:1.05; box-shadow:0 12px 28px rgba(0,75,58,.18); }
.rv-node{ bottom:22px; width:132px; height:46px; border-radius:8px; background:#fff; font-size:14px; line-height:1.05; }
.rv-node.asthma{ left:30px; color:var(--green-deep); border:1px solid rgba(0,155,119,.35); }
.rv-node.copd{ right:30px; color:#0475A1; border:1px solid rgba(0,163,224,.35); }
.rv-chevs{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); display:flex; gap:3px; }
.rv-chevs i{ display:block; width:18px; height:18px; clip-path:polygon(0 0,62% 50%,0 100%,38% 100%,100% 50%,38% 0); }
.rv-chevs i:nth-child(1){ background:var(--dupixent-orange); }
.rv-chevs i:nth-child(2){ background:var(--green); }
.rv-chevs i:nth-child(3){ background:var(--dupixent-blue); }
.rv-caption{ position:absolute; left:16px; right:16px; top:14px; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--type-faint); text-align:center; }
@media(max-width:560px){
  .rv-mark{ min-height:152px; }
  .rv-core{ width:132px; height:52px; font-size:13px; }
  .rv-node{ width:112px; font-size:12.5px; }
  .rv-node.asthma{ left:16px; }
  .rv-node.copd{ right:16px; }
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- generic status pill ---------- */
.pill{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border:1px solid; }
.pill.on{ color:var(--green-deep); border-color:rgba(0,155,119,.4); }
.pill.soon{ color:var(--gold-deep); border-color:rgba(242,169,0,.45); }

@media (max-width:760px){
  .h1{ font-size:24px; } .h2{ font-size:20px; } .page{ padding:26px 18px; }
}

/* ============================================================
   Preview / loading components (locked sections 05–08)
   Calm "waiting for data" states — no fake activity
   ============================================================ */
.prev-banner{ display:flex; align-items:center; gap:14px; border:1px solid rgba(242,169,0,.35); background:#FFFCF5; border-radius:8px; padding:16px 18px; margin:18px 0 0; }
.prev-banner.grey{ border-color:var(--rule); background:var(--card); }
.prev-banner .pb-ic{ flex:0 0 auto; }
.prev-banner .pb-t{ font-size:15px; font-weight:800; letter-spacing:-.01em; }
.prev-banner .pb-s{ font-size:13px; color:var(--type-mute); margin-top:2px; }
.prev-status{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border:1px solid var(--gold); color:var(--gold-deep); border-radius:3px; white-space:nowrap; }

.spin{ width:18px; height:18px; border:2px solid rgba(0,0,0,.12); border-top-color:var(--gold); border-radius:50%; animation:spin .9s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.loadbar{ height:7px; background:rgba(0,0,0,.07); border-radius:4px; overflow:hidden; }
.loadbar i{ display:block; height:100%; width:8%; background:var(--gold); border-radius:4px; animation:loadwait 2.8s ease-in-out infinite; }
@keyframes loadwait{ 0%{ width:6%; } 50%{ width:24%; } 100%{ width:6%; } }
.loadlabel{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--type-mute); margin-top:7px; }

.prev-purpose{ font-size:15px; line-height:1.6; color:var(--type); max-width:64ch; margin:16px 0 0; }
.prev-sech{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--type-mute); margin:24px 0 12px; }
.prev-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.prev-grid.g3{ grid-template-columns:repeat(3,1fr); }
.prev-grid.g2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){ .prev-grid,.prev-grid.g3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .prev-grid,.prev-grid.g3,.prev-grid.g2{ grid-template-columns:1fr; } }
.prev-card{ border:1px solid var(--rule); border-radius:6px; background:#fff; padding:14px 15px 16px; position:relative; }
.prev-card.example{ background:repeating-linear-gradient(135deg,#fff,#fff 10px,#FBFBF9 10px,#FBFBF9 20px); }
.prev-card .pcn{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--type-faint); }
.prev-card .pct{ font-size:14px; font-weight:700; margin:5px 0 4px; letter-spacing:-.01em; }
.prev-card .pcd{ font-size:12.5px; line-height:1.45; color:var(--type-mute); }
.ex-tag{ position:absolute; top:10px; right:10px; font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--type-faint); border:1px solid var(--rule); padding:1px 5px; border-radius:3px; }

.state{ display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border:1px solid; border-radius:3px; }
.state.confirmed{ color:var(--green-deep); border-color:rgba(0,155,119,.4); background:rgba(0,155,119,.05); }
.state.emerging{ color:var(--gold-deep); border-color:rgba(242,169,0,.45); background:#FFFCF5; }
.state.unresolved{ color:var(--type-mute); border-color:var(--rule); }
.state.shift{ color:#0B0D11; border-color:#0B0D11; }

/* drawer / pop-down (fieldwork plan, previews) */
.drawer{ border:1px solid rgba(255,255,255,.12); border-radius:7px; overflow:hidden; margin-top:10px; }
.drawer summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.drawer summary::-webkit-details-marker{ display:none; }
.drawer .dw-chev{ transition:transform .25s; }
.drawer[open] .dw-chev{ transform:rotate(180deg); }
.drawer .dw-body{ padding:4px 16px 16px; }

.cta-row{ max-width:1040px; margin:32px auto 0; padding:22px 26px 0; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.cta-prev{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--type-mute); text-decoration:none; }

/* ============================================================
   Shared stepwise builder (landing, mission brief, war-game)
   One layer at a time · progress rail fills as you go
   ============================================================ */
.build{ max-width:1000px; margin:0 auto; padding:8px 26px 0; }
.rail{ display:flex; flex-wrap:wrap; gap:6px 4px; margin:18px 0 8px; }
.rail-step{ display:flex; align-items:center; gap:7px; padding:6px 10px 6px 8px; border:1px solid var(--rule); border-radius:20px; background:#fff; cursor:pointer; font-size:11.5px; color:var(--type-mute); }
.rail-step .rn{ width:18px; height:18px; border-radius:50%; background:var(--card); border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:9px; color:var(--type-mute); }
.rail-step.current{ border-color:var(--green); color:var(--green-deep); background:rgba(0,155,119,.05); font-weight:700; }
.rail-step.current .rn{ background:var(--green); color:#fff; border-color:var(--green); }
.rail-step.done .rn{ background:var(--green-deep); color:#fff; border-color:var(--green-deep); }
.rail-bar{ height:4px; background:rgba(0,0,0,.07); border-radius:3px; overflow:hidden; margin:0 0 4px; }
.rail-bar i{ display:block; height:100%; width:12%; background:var(--green); border-radius:3px; transition:width .4s ease; }
.stage{ min-height:340px; position:relative; }
.scene{ display:none; }
.scene.active{ display:block; animation:sceneIn .4s ease; }
@keyframes sceneIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.scene-grid{ display:grid; grid-template-columns:minmax(0,1.28fr) minmax(240px,.72fr); gap:42px; align-items:center; padding:18px 0 6px; }
@media(max-width:780px){ .scene-grid{ grid-template-columns:1fr; gap:18px; } }
.scene .lyr{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); }
.scene h2{ font-size:34px; line-height:1.1; letter-spacing:-.02em; font-weight:800; margin:8px 0 14px; }
@media(max-width:780px){ .scene h2{ font-size:26px; } }
.scene .lead{ font-size:18px; line-height:1.5; color:var(--type); margin:0 0 12px; max-width:58ch; }
.scene .sub2{ font-size:15px; line-height:1.55; color:var(--type-mute); margin:0; max-width:58ch; }
.scene-vis{ display:flex; align-items:center; justify-content:center; }
.scene-vis svg{ width:100%; height:auto; max-width:360px; }
.bnav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 0; padding-top:20px; border-top:1px solid var(--rule); }
.bnav .count{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--type-mute); }
.bbtn{ font-family:var(--sans); font-weight:800; font-size:15px; border-radius:8px; padding:14px 24px; cursor:pointer; border:1px solid var(--rule); background:#fff; color:var(--type); min-height:48px; }
.bbtn:disabled{ opacity:.4; cursor:default; }
.bbtn.primary{ background:var(--green); color:#fff; border-color:var(--green); }
.bbtn.primary:hover{ background:var(--green-bright); }
.bnav-mid{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.bbtn.deeper{ font-size:12px; font-weight:700; padding:8px 15px; border:1px solid var(--green); color:var(--green-deep); background:rgba(0,155,119,.06); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.bbtn.deeper:hover{ background:var(--green); color:#fff; }
.bbtn.deeper .ar{ display:inline-block; animation:deeperBob 1.5s ease-in-out infinite; }
@keyframes deeperBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(3px);} }
@media(max-width:600px){ .bbtn.deeper{ font-size:11px; padding:7px 11px; } }

/* between-sections bar — distinct from the in-page carousel controls */
.pagenav{ max-width:1040px; margin:38px auto 0; padding:22px 26px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.pagenav a{ text-decoration:none; }
.pagenav .pn-c{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--type-mute); border:1px solid var(--rule); padding:10px 16px; border-radius:20px; }
.pagenav .pn-c:hover{ border-color:var(--green); color:var(--green-deep); }
.pagenav .pn-r{ font-weight:800; font-size:14px; color:#fff; background:var(--green); padding:12px 20px; border-radius:7px; }
.pagenav .pn-r:hover{ background:var(--green-bright); }
.pagenav .pn-lbl{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; opacity:.75; display:block; margin-bottom:1px; }
@media(max-width:560px){ .pagenav{ flex-direction:column; align-items:stretch; text-align:center; } .pagenav .pn-r,.pagenav .pn-c{ width:100%; } }
.dark-page .pagenav{ border-top-color:rgba(255,255,255,.1); }
.dark-page .pagenav .pn-c{ color:rgba(237,239,241,.6); border-color:rgba(255,255,255,.2); }

/* ============================================================
   Light page load — dot signature
   ============================================================ */
.page-load{ position:fixed; inset:0; z-index:240; background:#050607; display:flex; align-items:center; justify-content:center; transition:opacity .38s ease, visibility .38s ease; }
.page-load.done{ opacity:0; visibility:hidden; pointer-events:none; }
.page-load-mark{ display:flex; gap:10px; }
.page-load-mark span{ width:14px; height:14px; border-radius:50%; display:block; opacity:0; animation:pageDotIn .85s ease forwards, pageDotPulse 1.4s ease-in-out .85s infinite; }
.page-load-mark span:nth-child(1){ background:#F030A0; }
.page-load-mark span:nth-child(2){ background:#00F0E0; animation-delay:.06s,.91s; }
.page-load-mark span:nth-child(3){ background:#10E080; animation-delay:.12s,.97s; }
.page-load-mark span:nth-child(4){ background:#D0F000; animation-delay:.18s,1.03s; }
@keyframes pageDotIn{ from{ opacity:0; transform:rotate(-25deg) scale(.7); } to{ opacity:1; transform:rotate(0) scale(1); } }
@keyframes pageDotPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.82); } }
@media(prefers-reduced-motion:reduce){ .page-load-mark span{ animation:none; opacity:1; } .page-load{ transition:none; } }

/* ============================================================
   Entry transition — "stepping into the lab"
   ============================================================ */
.enter-overlay{ position:fixed; inset:0; z-index:200; background:radial-gradient(circle at 50% 42%, #0e141a, #080A0C); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; animation:enterOut .7s ease forwards; animation-delay:1.8s; }
.enter-overlay.gone{ display:none; }
.eo-mark{ display:inline-grid; grid-template-columns:repeat(2,9px); gap:5px; margin-bottom:2px; }
.eo-mark i{ width:9px; height:9px; border-radius:50%; display:block; animation:eoPulse 1.4s ease-in-out infinite; }
.eo-mark i:nth-child(1){ background:#009B77; } .eo-mark i:nth-child(2){ background:#00B9A0; animation-delay:.15s; }
.eo-mark i:nth-child(3){ background:#97D700; animation-delay:.3s; } .eo-mark i:nth-child(4){ background:#F2A900; animation-delay:.45s; }
.eo-kicker{ font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:#00B98C; }
.eo-title{ font-size:26px; font-weight:700; letter-spacing:-.015em; }
.eo-track{ width:240px; height:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.eo-track > span{ display:block; height:100%; width:42%; background:#00B98C; animation:eoSweep 1.15s cubic-bezier(.5,0,.4,1) infinite; }
.eo-status{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:rgba(255,255,255,.6); animation:eoBlink 1.2s ease-in-out infinite; }
@keyframes enterOut{ to{ opacity:0; visibility:hidden; } }
@keyframes eoSweep{ from{ transform:translateX(-110%);} to{ transform:translateX(360%);} }
@keyframes eoBlink{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }
@keyframes eoPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.78);} }
@media(prefers-reduced-motion:reduce){ .enter-overlay{ animation-delay:.2s; } .eo-track,.eo-status,.eo-mark i{ animation:none; } }

/* ============================================================
   Intro splash — Pulse AI · Unity Arc → into the lab
   ============================================================ */
.intro{ position:fixed; inset:0; z-index:300; background:#FFFFFF; color:#0B0D11; display:grid; grid-template-rows:auto 1fr auto; align-items:center; justify-items:center; gap:0; text-align:left; padding:42px clamp(22px,5vw,76px) 42px; overflow:hidden; transition:background .45s ease, color .45s ease; }
.intro:before{ content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#009B77,#00B9A0,#97D700,#F2A900); opacity:.92; pointer-events:none; }
.intro:after{ content:""; position:absolute; inset:auto 0 0; height:44%; background:linear-gradient(0deg,rgba(0,155,119,.08),transparent 70%); opacity:0; transition:opacity .45s ease; pointer-events:none; }
.intro.is-dupixent:after{ opacity:1; }
.intro.hidden{ display:none; }
.intro-close{ position:absolute; top:18px; right:20px; z-index:2; min-width:94px; height:42px; border-radius:22px; border:1px solid rgba(11,13,17,.16); background:#fff; color:rgba(11,13,17,.65); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 14px; }
.intro-close span{ font-family:var(--sans); font-size:12px; font-weight:800; color:rgba(11,13,17,.58); }
.intro-close:hover{ background:#F7F9F8; color:#0B0D11; }
.intro-brandrow{ position:relative; z-index:1; width:min(980px,100%); display:flex; align-items:center; gap:12px; opacity:0; animation:introFade .6s ease .1s forwards; align-self:start; justify-self:center; }
.intro-mark{ display:flex; gap:9px; }
.intro-mark span{ width:12px; height:12px; border-radius:50%; display:block; opacity:0; animation:introSpin 1s ease forwards; }
.intro-mark span:nth-child(1){ background:#009B77; }
.intro-mark span:nth-child(2){ background:#00B9A0; animation-delay:.06s; }
.intro-mark span:nth-child(3){ background:#97D700; animation-delay:.12s; }
.intro-mark span:nth-child(4){ background:#F2A900; animation-delay:.18s; }
.intro-brand{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(11,13,17,.54); transition:color .45s ease; }
.intro.is-dupixent .intro-brand{ color:#0A7A52; }
.intro.is-dupixent .intro-brand:after{ content:" · Dupixent Respiratory"; color:#0B0D11; }
.intro-quotes{ position:relative; z-index:1; width:min(980px,100%); min-height:22em; margin:0; align-self:center; }
.intro-quotes:before{ content:""; position:absolute; left:-32px; top:18%; bottom:18%; width:1px; background:rgba(11,13,17,.10); }
.intro-quotes .iq{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; font-size:clamp(38px,5vw,68px); font-weight:820; letter-spacing:0; line-height:1.02; opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s ease; padding:34px 0 0; text-wrap:balance; }
.intro-quotes .iq small{ display:block; max-width:760px; margin-top:30px; font-family:var(--sans); font-size:clamp(19px,2vw,26px); letter-spacing:0; text-transform:none; color:#3F4744; font-weight:560; line-height:1.42; text-wrap:balance; }
.intro-quotes .iq.show{ opacity:1; transform:none; }
.intro-actions{ position:relative; z-index:1; width:min(980px,100%); display:grid; grid-template-columns:auto 1fr auto; align-items:center; justify-content:center; gap:28px; opacity:0; animation:introFade .5s ease .25s forwards; align-self:end; }
.intro-nav{ font-family:var(--sans); font-size:14px; font-weight:800; letter-spacing:0; text-transform:none; color:#0B0D11; background:#fff; border:1px solid rgba(11,13,17,.16); border-radius:999px; padding:13px 20px; cursor:pointer; }
.intro-nav:disabled{ opacity:.32; cursor:default; }
.intro-dots{ display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; width:100%; }
.intro-dot{ flex:1 1 0; height:3px; border-radius:4px; background:rgba(11,13,17,.13); }
.intro-dot.is-active{ background:#009B77; }
.intro-final{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:16px; opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.intro-final.show{ opacity:1; transform:none; }
.intro-arch{ width:min(360px,72vw); height:auto; }
.intro-arch .ln{ stroke-dasharray:160; stroke-dashoffset:160; }
.intro-final.show .intro-arch .ln{ animation:archDraw 1.1s ease .15s forwards; }
.intro-arch .nd{ opacity:0; }
.intro-final.show .intro-arch .nd{ animation:introFade .5s ease .9s forwards; }
.intro-tag{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); max-width:70ch; line-height:1.7; }
.intro-enter{ font-family:var(--sans); font-weight:800; font-size:15px; color:#fff; background:#009B77; border:0; border-radius:999px; padding:14px 24px; cursor:pointer; letter-spacing:.005em; margin-top:0; min-width:132px; }
.intro-enter:hover{ background:#00B98C; }
.intro-enter:after{ content:""; display:inline-block; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); margin-left:12px; vertical-align:1px; }
@keyframes introFade{ to{ opacity:1; } }
@keyframes introSpin{ from{ opacity:0; transform:rotate(-25deg) scale(.7);} to{ opacity:1; transform:rotate(0) scale(1);} }
@keyframes archDraw{ to{ stroke-dashoffset:0; } }
@keyframes introDrift{ from{ transform:translate3d(-1.5%, -1%, 0) scale(1); } to{ transform:translate3d(1.5%, 1%, 0) scale(1.03); } }
/* clean fade into the lab */
.intro.exit{ animation:introExit .55s ease forwards; }
@keyframes introExit{ 0%{ opacity:1; } 100%{ opacity:0; visibility:hidden; } }
/* loading phase (after Enter) */
.intro-load{ display:none; flex-direction:column; align-items:center; gap:16px; }
.intro.loading .intro-brandrow, .intro.loading .intro-quotes, .intro.loading .intro-final, .intro.loading .intro-actions, .intro.loading .intro-close{ display:none; }
.intro.loading{ background:#FFFFFF; color:#0B0D11; }
.intro.loading .intro-load{ display:flex; animation:introFade .4s ease forwards; opacity:0; }
.il-mark{ display:flex; gap:9px; margin-bottom:2px; }
.il-mark span{ width:10px; height:10px; border-radius:50%; display:block; }
.il-mark span:nth-child(1){ background:#009B77; } .il-mark span:nth-child(2){ background:#00B9A0; }
.il-mark span:nth-child(3){ background:#97D700; } .il-mark span:nth-child(4){ background:#F2A900; }
.il-label{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#009B77; }
.il-title{ font-size:clamp(20px,3.4vw,27px); font-weight:800; letter-spacing:-.01em; }
.il-progress{ font-family:var(--mono); font-size:34px; line-height:1; letter-spacing:-.03em; color:#0B0D11; font-weight:800; }
.il-bar{ width:min(300px,72vw); height:3px; background:rgba(11,13,17,.12); border-radius:3px; overflow:hidden; }
.il-bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#009B77,#00B9A0,#97D700); border-radius:3px; }
.intro.loading .il-bar > i{ animation:loadFill 4.4s cubic-bezier(.45,.05,.2,1) forwards; }
.rlst-radar{ max-width:340px; }
.presentable.is-presenting .rlst-radar{ max-width:min(420px,40vw); }
@media(prefers-reduced-motion:reduce){ .rlst-radar animate,.rlst-radar animateTransform{ display:none; } }
@keyframes loadFill{ from{ width:0; } to{ width:100%; } }
@media(prefers-reduced-motion:reduce){ .intro-mark span,.intro-brandrow,.intro-final,.intro-actions{ animation:none !important; opacity:1; transform:none; } .intro-arch .ln{ stroke-dashoffset:0; } .intro-arch .nd{ opacity:1; } .intro.exit{ animation:introExit .3s ease forwards; } }

/* proposal-phase nav items (removed at handover) */
.nav-panel li.proposal a{ opacity:.62; }
.nav-panel li.proposal a:hover{ opacity:.85; }
.nav-stat.rm{ color:rgba(255,255,255,.4); border-color:rgba(255,255,255,.16); }
.support-row{ max-width:1100px; margin:18px auto 0; padding:0 26px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.support-card{ display:flex; justify-content:space-between; gap:18px; text-decoration:none; color:inherit; border:1px solid var(--rule); border-radius:6px; background:#fff; padding:16px 18px; transition:transform .16s, box-shadow .16s, border-color .16s; }
.support-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.07); border-color:rgba(0,155,119,.45); }
.support-card b{ display:block; font-size:15px; margin-bottom:3px; }
.support-card span span{ display:block; font-size:12.5px; color:var(--type-mute); line-height:1.45; }
.support-card i{ font-style:normal; color:var(--green); font-weight:800; white-space:nowrap; }
@media(max-width:700px){ .support-row{ grid-template-columns:1fr; } }
.method-reveal{ margin-top:18px; padding:16px 18px; border:1px solid rgba(0,155,119,.22); border-left:3px solid var(--green); background:rgba(0,155,119,.045); border-radius:6px; max-width:60ch; }
.method-reveal b{ display:block; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); margin-bottom:4px; }
.method-reveal span{ display:block; font-size:14.5px; line-height:1.55; color:var(--type); }
.detail{ margin-top:16px; }
.detail summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); }
.detail summary::-webkit-details-marker{ display:none; }
.detail summary .c{ transition:transform .2s; } .detail[open] summary .c{ transform:rotate(180deg); }
.detail-body{ margin-top:12px; animation:sceneIn .3s ease; }

/* ============================================================
   Presenter mode — expand a section to fullscreen, X to exit
   ============================================================ */
.present-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:14px; letter-spacing:0; text-transform:none; font-weight:800; color:#fff; background:var(--green); border:1px solid var(--green); border-radius:8px; padding:12px 18px; cursor:pointer; min-height:46px; }
.present-btn:hover{ border-color:var(--green); }
.dark-page .present-btn{ background:rgba(255,255,255,.06); color:#7FE3C4; border-color:rgba(255,255,255,.2); }
body.presenting{ overflow:hidden; }
.presentable.is-presenting{ position:fixed; inset:0; z-index:120; background:var(--paper); max-width:none !important; width:100%; margin:0; padding:54px max(6vw,40px) 40px; overflow:auto; }
.dark-page .presentable.is-presenting{ background:#080A0C; }
.present-x{ position:fixed; top:16px; right:18px; z-index:130; width:44px; height:44px; border-radius:50%; border:1px solid var(--rule); background:#fff; color:var(--type); font-size:20px; cursor:pointer; display:none; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.present-x:hover{ border-color:var(--green); color:var(--green-deep); }
body.presenting .present-x{ display:flex; }
.presentable.is-presenting .present-btn{ display:none; }
.presentable.is-presenting .stage{ min-height:64vh; display:flex; flex-direction:column; justify-content:center; }
.presentable.is-presenting .scene h2{ font-size:clamp(34px,5vw,58px); }
.presentable.is-presenting .scene .lead{ font-size:clamp(18px,2.4vw,26px); line-height:1.42; max-width:48ch; }
.presentable.is-presenting .scene .sub2{ font-size:clamp(15px,1.6vw,19px); line-height:1.5; max-width:56ch; }
.presentable.is-presenting .scene-vis svg{ max-width:min(560px,46vw); }
.presentable.is-presenting .rail{ justify-content:center; }
.presentable.is-presenting .bnav{ max-width:1000px; margin-left:auto; margin-right:auto; }

/* collapsed "pop-down box" — the walkthrough tucked away so the Lab is the star */
.build.collapsed{ border:1px solid var(--rule); border-radius:10px; padding:13px 18px; background:linear-gradient(180deg,#fff,#F4F6F4); }
.build.collapsed .rail,
.build.collapsed .rail-bar,
.build.collapsed .stage,
.build.collapsed .bnav{ display:none; }
.build.collapsed .eyebrow{ margin:0; }
.build.collapsed .present-btn{ background:var(--green); color:#fff; border-color:var(--green); font-size:14px; padding:12px 18px; }
.build.collapsed .present-btn:hover{ background:var(--green-bright); }

/* ============================================================
   Mobile experience pass — phone-first behaviour for the builder,
   present mode, rail, nav and chrome. Safe-area aware.
   ============================================================ */
@media (max-width:680px){
  .intro{ padding:34px 22px 28px; }
  .intro-close{ top:14px; right:14px; min-width:82px; height:38px; }
  .intro-brandrow{ width:100%; }
  .intro-mark span{ width:10px; height:10px; }
  .intro-brand{ font-size:9.5px; letter-spacing:.16em; }
  .intro-quotes{ width:100%; min-height:24em; }
  .intro-quotes:before{ display:none; }
  .intro-quotes .iq{ font-size:clamp(32px,10vw,44px); line-height:1.05; padding-top:30px; }
  .intro-quotes .iq small{ font-size:clamp(17px,5vw,21px); margin-top:24px; line-height:1.42; }
  .intro-actions{ width:100%; grid-template-columns:1fr 1fr; gap:12px; }
  .intro-dots{ grid-column:1 / -1; grid-row:1; }
  .intro-nav{ grid-column:1; grid-row:2; padding:12px 14px; }
  .intro-enter{ grid-column:2; grid-row:2; padding:13px 14px; min-width:0; }

  /* respect the notch / home indicator */
  .frame{ padding:12px 16px; padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
  .burger{ top:11px; right:14px; width:42px; height:42px; }

  /* builder shell tighter */
  .build{ padding:8px 16px 0; }
  .stage{ min-height:0; }
  .scene-grid{ gap:16px; padding:10px 0 4px; }
  .scene h2{ font-size:23px; }
  .scene .lead{ font-size:16px; max-width:none; }
  .scene .sub2{ font-size:14px; max-width:none; }
  .scene-vis svg{ max-width:300px; }
  .rlst-radar{ max-width:248px; }

  /* progress rail → single scrollable row, no giant chip wall */
  .rail{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:6px; margin:14px -16px 8px; padding:0 16px 4px; scrollbar-width:none; }
  .rail::-webkit-scrollbar{ display:none; }
  .rail-step{ flex:0 0 auto; white-space:nowrap; }

  /* builder nav buttons: thumb-friendly */
  .bnav{ gap:10px; margin-top:16px; padding-top:14px; }
  .bbtn{ padding:13px 16px; font-size:14px; min-height:46px; }
  .bnav .count{ font-size:10px; }

  /* page-to-page nav already stacks at 560; widen the trigger here */
  .pagenav{ margin-top:28px; padding:20px 16px; }
}

/* present mode on phones: real fullscreen, larger art, reachable controls */
@media (max-width:680px){
  .presentable.is-presenting{ padding:62px 18px 28px; padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)); }
  .presentable.is-presenting .scene h2{ font-size:clamp(26px,7vw,34px); }
  .presentable.is-presenting .scene .lead{ font-size:clamp(16px,4.4vw,20px); max-width:none; }
  .presentable.is-presenting .scene .sub2{ font-size:clamp(14px,3.6vw,16px); }
  .presentable.is-presenting .scene-vis svg{ max-width:min(360px,80vw); }
  .presentable.is-presenting .rlst-radar{ max-width:min(300px,72vw); }
  .presentable.is-presenting .stage{ min-height:auto; }
  .present-x{ top:max(12px,env(safe-area-inset-top)); right:14px; width:46px; height:46px; }
}

/* tap targets across touch devices */
@media (hover:none){
  .nav-panel li a{ padding:13px 10px; }
  .present-btn{ padding:9px 15px; }
  .drawer summary{ padding:15px 16px; }
  .detail summary{ padding:4px 0; min-height:30px; }
}