/* =========================================================================
   Interactive Clinical Case Study — Semaglutide in Type 2 Diabetes
   Pitchman Labs

   White editorial ground. The photography is the only dark thing on the
   page — it sits in a full-height column that bleeds off the edge, and the
   copy lives beside it on paper.
   ========================================================================= */

:root {
  /* Brand — from the Pitchman Labs mark */
  --coral:        #EE8FA3;
  --coral-ink:    #C24E68;   /* the coral, darkened enough to read on white */
  --lilac:        #B39BDA;
  --lilac-ink:    #6F58AE;

  /* Paper */
  --paper:        #FFFFFF;
  --paper-2:      #F7F8FA;
  --paper-3:      #EFF2F5;

  /* Ink */
  --ink:          #0E1116;
  --ink-2:        #3D4653;
  --ink-3:        #6B7686;
  --ink-4:        #98A2B0;

  --rule:         rgba(14,17,22,.11);
  --rule-2:       rgba(14,17,22,.20);

  /* Clinical semantics, tuned for white */
  --high:         #C0392F;
  --warn:         #A9720B;
  --ok:           #10795A;

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body.stage-body { overflow: hidden; }
::selection { background: var(--coral); color: #2A0D15; }

/* =========================================================================
   LOGIN — the mark, a user id, a password. Nothing else.
   ========================================================================= */

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--paper);
}

.login-card {
  width: 100%;
  max-width: 400px;      /* the form never stretches, however wide the screen */
}

/* An <img> inside a column flex or grid container is stretched to the
   container width by the default `stretch` alignment, which distorts a wide
   logo. Pinning both dimensions is what actually stops it. */
.brand-mark {
  display: block;
  width: 300px;
  height: auto;
  margin: 0 auto 44px;   /* centred over the form */
}

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px;
}
.field input {
  display: block; width: 100%; padding: 16px 18px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 9px;
  font-size: 17px; font-family: var(--sans);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--ink-4); }
.field input:focus {
  outline: none; border-color: var(--coral-ink);
  box-shadow: 0 0 0 4px rgba(194,78,104,.10);
}

.btn {
  display: block; width: 100%; margin-top: 24px;
  padding: 17px 22px; border: 0; border-radius: 10px;
  background: linear-gradient(96deg, var(--coral) 0%, var(--lilac) 100%);
  color: #230C13; font-family: var(--sans); font-weight: 600;
  font-size: 17px; cursor: pointer;
  transition: transform .18s var(--ease), filter .18s;
  box-shadow: 0 10px 26px -14px rgba(194,78,104,.7);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }

.error-msg {
  background: #FDF0EE; border: 1px solid rgba(192,57,47,.30);
  color: #93291F; padding: 11px 13px; border-radius: 8px;
  font-size: 15px; margin-bottom: 20px;
}

/* =========================================================================
   STAGE — white page, photograph in a bleeding column
   ========================================================================= */

.stage { position: fixed; inset: 0; overflow: hidden; background: #0d1014; }

/* --- the photograph: full-bleed story frame -------------------------------
   `cover` keeps every scene edge-to-edge with no letterbox bands. Individual
   shots that need protected headroom provide their own focal position.
   ------------------------------------------------------------------------ */
.media { position: absolute; inset: 0; overflow: hidden; background: #0d1014; }

.bg-layer {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 620ms var(--ease);
  will-change: opacity;
}
.bg-layer.on { opacity: 1; }

/* Only visible on a display wider than the frame itself; harmless otherwise. */
.bg-layer .fill {
  position: absolute; inset: -5%; width: 110%; height: 110%;
  object-fit: cover;
  filter: blur(30px) brightness(.6);
}
.bg-layer .frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}

.lower {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(8,11,16,.80) 0%, rgba(8,11,16,.40) 44%, rgba(8,11,16,0) 100%);
}

/* --- the copy: a lower-third over the picture ------------------------- */
.slide-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start;
  padding: 0 clamp(32px, 5vw, 88px) clamp(96px, 12vh, 128px);
  z-index: 3; pointer-events: none;
}

.slide-caption {
  font-family: var(--serif); font-weight: 400; color: #fff;
  font-size: clamp(28px, 3.2vw, 54px); line-height: 1.08;
  letter-spacing: -.02em; margin: 0; max-width: 20ch;
  text-shadow: 0 2px 26px rgba(0,0,0,.6);
}

.slide-stat { margin-bottom: 10px; }
.slide-stat .v {
  display: block; color: #fff;
  font-family: var(--serif); font-size: clamp(66px, 7.8vw, 138px);
  line-height: .9; letter-spacing: -.04em;
  text-shadow: 0 2px 32px rgba(0,0,0,.65);
}
.slide-stat .l {
  display: block; margin-top: 6px;
  font-size: clamp(16px, 1.35vw, 22px); color: rgba(255,255,255,.92);
  max-width: 26ch; line-height: 1.4;
  text-shadow: 0 1px 16px rgba(0,0,0,.65);
}

.rv { opacity: 0; transform: translateY(14px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

/* --- references --- */
.refs {
  position: absolute; right: clamp(32px, 5vw, 88px); left: auto;
  max-width: 44ch; bottom: clamp(50px, 6.4vh, 66px);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: baseline; justify-content: flex-end; text-align: right;
  z-index: 4; font-size: 12.5px; color: rgba(255,255,255,.7);
  text-shadow: 0 1px 9px rgba(0,0,0,.75); pointer-events: none;
}
.stage.media-left .refs { left: auto; right: clamp(38px, 4.6vw, 84px); }
.refs .refs-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
.refs a {
  color: rgba(255,255,255,.74); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3); line-height: 1.5; pointer-events: auto;
}
.refs a:hover { color: #fff; border-color: #fff; }
.refs .loc { color: rgba(255,255,255,.5); font-style: italic; }

/* =========================================================================
   CHROME
   ========================================================================= */

.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 2.2vw, 34px) 18px 20px;
  pointer-events: none;
}
.quiz-root .topbar { left: 0; right: 0; padding-left: clamp(30px, 4.4vw, 76px); }
/* The stage chrome is white so it reads on a photograph. The assessment is on
   paper, so it needs the opposite. */
.quiz-root .topbar img.logo { filter: none; }
.quiz-root .topbar .slide-count { color: var(--ink-4); text-shadow: none; }
.quiz-root .topbar a.exit { color: var(--ink-4); text-shadow: none; }
.quiz-root .topbar a.exit:hover { color: var(--coral-ink); }
/* The mark is used exactly as supplied - never recoloured or reversed. Over a
   photograph it sits on a soft light plate so it stays legible without being
   altered. */
/* The mark is used exactly as supplied: no plate, no recolouring. A soft dark
   gradient at the very top of the picture gives it something to sit on. */
.topbar .mark { display: inline-flex; align-items: center; pointer-events: auto; }
.stage::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 130px;
  z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.topbar img.logo { height: 44px; display: block; }
.quiz-root .topbar .mark { background: none; backdrop-filter: none; padding: 0; }
.topbar .right { display: flex; align-items: center; gap: 16px; pointer-events: auto; }
.topbar .slide-count {
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 9px rgba(0,0,0,.7);
}
.topbar a.exit {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s;
  text-shadow: 0 1px 9px rgba(0,0,0,.7);
}
.topbar a.exit:hover { color: #fff; }

.progress-rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,.20); z-index: 12;
  transition: left .9s var(--ease-out), right .9s var(--ease-out);
}
.progress-rail .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--coral), var(--lilac)); transition: width .12s linear; }

.controls {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%); z-index: 12;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 9px; border-radius: 999px;
  background: rgba(16,20,26,.58);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16);
  opacity: .42; transition: opacity .3s, left .9s var(--ease-out);
}
.stage:hover .controls, .controls:hover { opacity: 1; }
.ctl {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: rgba(255,255,255,.85);
  display: grid; place-items: center; transition: background .2s, color .2s;
}
.ctl:hover { background: rgba(255,255,255,.16); color: #fff; }
.ctl svg { width: 17px; height: 17px; fill: currentColor; }
.ctl.off { color: rgba(255,255,255,.45); }
.dots { display: flex; gap: 4px; padding: 0 8px; align-items: center; }
.dot {
  width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.34); cursor: pointer;
  transition: background .25s, width .25s, border-radius .25s;
}
.dot:hover { background: rgba(255,255,255,.65); }
.dot.done { background: rgba(255,255,255,.58); }
.dot.active { background: var(--coral); width: 20px; border-radius: 3px; }

.hint {
  position: absolute; bottom: 60px; left: 50%;
  transform: translateX(-50%); z-index: 11;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); pointer-events: none;
  text-shadow: 0 1px 9px rgba(0,0,0,.7);
  animation: hintfade 5s ease forwards;
}
@keyframes hintfade { 0%,60% { opacity: 1; } 100% { opacity: 0; } }

/* =========================================================================
   ASSESSMENT
   ========================================================================= */

.quiz-root {
  position: fixed; inset: 0; z-index: 40; display: none; overflow: hidden;
  background: #FDFDFD;   /* the avatar's studio white, so the edge vanishes */
}
.quiz-root.on { display: block; }
.quiz-root::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 40% at 92% 6%, rgba(179,155,218,.10), transparent 72%);
}

/* The avatar is not a picture in a frame - he is a person standing in the
   room. The studio background of both the still and the HeyGen render measures
   253,253,253, so the page is set to the same value and the edge disappears.
   No border, no card, no shadow, no gradient. */
.quiz-inner {
  position: relative; z-index: 2; height: 100%;
  display: grid;
  grid-template-columns: 50vw 1fr;
  gap: 0;
  padding: clamp(48px, 6vh, 76px) clamp(28px, 3vw, 56px) clamp(24px, 3vh, 40px) 0;
  align-items: center;
}
@media (max-width: 1080px) {
  .quiz-inner { grid-template-columns: 1fr; padding: 88px clamp(24px, 6vw, 48px) 24px; }
}

/* He stands in the middle of the left half, not jammed against the edge.
   White page either side of him, so no mask or seam is needed. */
.avatar-col {
  position: absolute; left: 0; bottom: 0;
  width: 50vw; height: 96vh;
  display: block; pointer-events: none;
}
@media (max-width: 1080px) {
  .avatar-col { position: relative; width: 100%; height: 34vh; }
}

.avatar-frame {
  position: absolute; bottom: 0; top: 0;
  left: 50%; transform: translateX(-50%);
  width: clamp(300px, 30vw, 540px);
  overflow: hidden;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  /* Feathered on both sides: the frame has to end somewhere, and a dissolve
     cannot show as a line the way a hard cut can. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.avatar-frame::after { content: none; }

/* Cropped at the bottom edge so he rises out of it rather than floating. */
/* Only the video. When he is not speaking the space is simply empty - a
   frozen still of a man staring out of the page reads as a glitch. */
.avatar-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 4%;
  opacity: 0; transition: opacity .45s var(--ease);
}
.avatar-frame.speaking video { opacity: 1; }

.avatar-name { display: none; }
.speaking-dot { display: none; }

.q-col {
  max-width: 760px; grid-column: 2; margin: 0 auto;
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px;
}
.q-col::-webkit-scrollbar { width: 8px; }
.q-col::-webkit-scrollbar-thumb { background: rgba(14,17,22,.16); border-radius: 4px; }
.q-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.q-head .qnum { color: var(--coral-ink); }
.q-head .qbar { flex: 1; height: 1px; background: var(--rule); }
.q-head .qscore { color: var(--ink-3); }

/* The question stem is dense clinical prose full of numbers and units. It is
   read, not admired, so it gets the text face at a comfortable size. */
.q-stem {
  font-family: var(--sans); font-weight: 500; color: var(--ink);
  font-size: clamp(20px, 1.6vw, 28px); line-height: 1.5;
  letter-spacing: -.005em; margin: 0 0 24px; max-width: 62ch;
}

.q-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.q-opt {
  display: flex; gap: 13px; align-items: flex-start; width: 100%; text-align: left;
  padding: 16px 20px; border-radius: 12px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule-2);
  color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.5;
  transition: background .18s, border-color .18s, transform .18s var(--ease), color .18s, box-shadow .18s;
}
.q-opt:hover:not(:disabled) {
  background: var(--paper-2); border-color: var(--ink-4); color: var(--ink);
  transform: translateX(3px); box-shadow: 0 6px 18px -14px rgba(14,17,22,.5);
}
.q-opt:disabled { cursor: default; }
.q-opt .key {
  flex: 0 0 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--paper-3); border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 13px; color: var(--ink-3);
  transition: background .2s, color .2s, border-color .2s;
}
.q-opt.correct { background: #F1FBF7; border-color: rgba(16,121,90,.45); color: var(--ink); }
.q-opt.correct .key { background: var(--ok); color: #fff; border-color: transparent; }
.q-opt.wrong { background: #FEF6F5; border-color: rgba(192,57,47,.42); color: var(--ink); }
.q-opt.wrong .key { background: var(--high); color: #fff; border-color: transparent; }
.q-opt.dim { opacity: .42; }

.feedback {
  border-radius: 12px; padding: 17px 19px; margin-bottom: 16px;
  border: 1px solid var(--rule); background: var(--paper-2);
  opacity: 0; transform: translateY(10px); max-height: 0; overflow: hidden;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.feedback.in { opacity: 1; transform: none; max-height: 620px; }
.feedback .fb-verdict {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 12px; font-weight: 700;
}
.feedback.good { border-color: rgba(16,121,90,.30); background: #F5FCF9; }
.feedback.good .fb-verdict { color: var(--ok); }
.feedback.bad { border-color: rgba(192,57,47,.28); background: #FEF9F8; }
.feedback.bad .fb-verdict { color: var(--high); }
.feedback .fb-text { font-size: 17.5px; line-height: 1.7; color: var(--ink-2); max-width: 66ch; }
.feedback .fb-refs {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-4); display: flex; flex-wrap: wrap; gap: 5px 15px;
}
.feedback .fb-refs a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.feedback .fb-refs a:hover { color: var(--coral-ink); border-color: var(--coral-ink); }

.q-foot { display: flex; align-items: center; gap: 12px; }
.btn-next {
  padding: 14px 30px; border: 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(96deg, var(--coral), var(--lilac));
  color: #230C13; font-family: var(--sans); font-weight: 600; font-size: 16.5px;
  transition: transform .18s var(--ease), filter .18s, opacity .3s;
  box-shadow: 0 10px 24px -16px rgba(194,78,104,.75);
  opacity: 0; pointer-events: none;
}
.btn-next.in { opacity: 1; pointer-events: auto; }
.btn-next:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-ghost {
  padding: 14px 24px; border-radius: 11px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule-2);
  color: var(--ink-3); font-family: var(--sans); font-size: 15px;
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-4); }

.gate { max-width: 660px; }
.gate h2 {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: clamp(29px, 3vw, 46px); line-height: 1.16;
  letter-spacing: -.02em; margin: 0 0 14px;
}
.gate p { font-size: 18.5px; line-height: 1.68; color: var(--ink-2); margin: 0 0 24px; max-width: 52ch; }

.score-ring { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; }
.score-ring .big {
  font-family: var(--serif); font-size: clamp(74px, 8.4vw, 126px); line-height: .9;
  background: linear-gradient(120deg, var(--coral-ink), var(--lilac-ink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.045em;
}
.score-ring .of { font-family: var(--serif); font-size: 33px; color: var(--ink-4); }

.breakdown { display: flex; flex-wrap: wrap; gap: 5px; margin: 18px 0 24px; }
.bd {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13.5px;
  border: 1px solid var(--rule-2); color: var(--ink-3);
}
.bd.ok { background: #EDF9F4; border-color: rgba(16,121,90,.40); color: var(--ok); }
.bd.no { background: #FDF3F2; border-color: rgba(192,57,47,.38); color: var(--high); }

.replay-note { font-size: 14px; color: var(--ink-4); margin-top: 20px; line-height: 1.6; }

/* --- transitions and boot --- */
.veil {
  position: fixed; inset: 0; z-index: 60; background: #0d1014;
  opacity: 0; pointer-events: none; transition: opacity 1.3s var(--ease);
}
.veil.on { opacity: 1; pointer-events: auto; }

.boot { position: fixed; inset: 0; z-index: 80; background: var(--paper); display: grid; place-items: center; transition: opacity .8s var(--ease); }
.boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; }
.boot img { height: 62px; margin-bottom: 30px; }
.boot .bar { width: 240px; height: 2px; background: var(--paper-3); border-radius: 2px; overflow: hidden; margin: 0 auto 14px; }
.boot .bar i { display: block; height: 100%; width: 34%; background: linear-gradient(90deg, var(--coral), var(--lilac)); animation: slide 1.3s var(--ease) infinite; }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
.boot p { font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
/* A browser will not play narration until the viewer has interacted, so the
   story starts on a deliberate press rather than silently failing to speak. */
.boot .begin {
  margin-top: 30px; padding: 16px 44px; border: 0; border-radius: 999px;
  background: linear-gradient(96deg, var(--coral), var(--lilac));
  color: #230C13; font-family: var(--sans); font-weight: 600; font-size: 18px;
  cursor: pointer; box-shadow: 0 12px 30px -16px rgba(194,78,104,.8);
  transition: transform .18s var(--ease), filter .18s;
}
.boot .begin:hover { transform: translateY(-1px); filter: brightness(1.05); }
.boot .begin[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bg-layer.on img { animation: none; transform: scale(1.02); }
  .rv { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
}