/* ============================================================
   DISHA Clarity — prototype · visual system v3 (25 Aug 2026)
   Restyled to the owner's reference set: clean white / soft
   warm-grey ground, one confident orange accent, pill buttons,
   large rounded cards, warm sunset gradients for hero moments.
   Token names kept (navy-* now hold the warm dark neutrals) so
   every component retints without structural change.
   ============================================================ */
:root {
  --primary: #ef6a3a;            /* the one accent — warm orange */
  --primary-2: #f68a52;          /* gradient partner */
  --primary-dark: #d9531f;
  --navy-deep: #221c18;          /* warm near-black (name kept) */
  --navy-hero: #33291f;
  --stage-navy: #171310;
  --ink: #201b18;
  --body: #4a4440;
  --muted: #7a736d;
  --faint: #a39c96;
  --border: #ece7e1;
  --border-soft: #e3ddd6;
  --bg-soft: #f7f5f2;
  --bg-teal: #fdf1ea;            /* warm peach tint (name kept) */
  --bg-teal-2: #fbe4d8;
  --track: #efeae4;
  --dot-idle: #d9d2ca;
  --disabled-bg: #e7e2dc;
  --disabled-text: #a8a09a;
  --accent-light: #f7b28e;
  --success: #2e9e6b;
  --warn: #f59e0b;
  --danger: #dc2626;
  --gold: #f5b942;
  --coral: #ff7a63;
  --violet: #7c6cf0;
  --result-grad-end: #7a2408;
  --grad-primary: linear-gradient(135deg, #f68a52, #e85c28);
  --grad-hero: linear-gradient(160deg, #f28b52 0%, #e35f28 55%, #b8451a 100%);
  --shadow-card: 0 6px 24px rgba(64, 34, 14, .07);
  --shadow-pop: 0 10px 24px rgba(239, 106, 58, .24);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  width:100%; height:100%; overflow:hidden;
  font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #eceae6;
}
button { font-family: inherit; cursor: pointer; touch-action:manipulation; }
button:disabled { cursor: default; }

@keyframes fadeup  { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
@keyframes pop     { 0% { transform: scale(.7); opacity:0 } 60% { transform: scale(1.07) } 100% { transform: scale(1); opacity:1 } }
@keyframes pulse   { 0%,100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes spin    { to { transform: rotate(360deg) } }
@keyframes floaty  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes bob     { 0%,100% { transform: translateY(0) rotate(-1.5deg) } 50% { transform: translateY(-4px) rotate(1.5deg) } }
@keyframes wavebar { 0%,100% { transform: scaleY(.45) } 50% { transform: scaleY(1) } }
@keyframes shine   { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }

/* ---- Desk & phone frame ---- */
.desk {
  display:flex; justify-content:center; align-items:center; height:100svh;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(240,105,59,.10), transparent 60%),
    radial-gradient(800px 600px at 110% 110%, rgba(245,185,66,.10), transparent 55%),
    linear-gradient(160deg, #f6f3ee, #e7e2da);
}
.phone {
  width:100%; max-width:440px; height:100svh; background:#fdfefe;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
@media (min-width: 480px) {
  .phone {
    height: min(calc(100svh - 36px), 900px);
    border-radius: 30px;
    box-shadow: 0 30px 80px rgba(60,35,15,.22), 0 0 0 8px rgba(255,255,255,.55);
  }
}
#app { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.screen { display:flex; flex-direction:column; flex:1; min-height:0; }
.scroll {
  flex:1 1 auto; overflow-y:auto; min-height:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  overflow-anchor:none;
  scrollbar-gutter:stable;
}

/* ---- Top bar / progress ---- */
.topbar {
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:16px 18px 10px; background:transparent;
}
.topbar .back {
  width:44px; height:44px; border-radius:15px; border:2px solid var(--primary);
  background:#fff; font-size:26px; font-weight:900; color:var(--primary); flex:0 0 auto;
  box-shadow:0 4px 12px rgba(241,91,39,.16);
}
.auto-next-note{flex:0 0 auto;text-align:center;padding:13px 18px 18px;color:var(--muted);font-size:13px;font-weight:700;background:#fff}
.vi-select-scroll{padding:8px 22px 24px}.vi-select-title{text-align:center;padding:14px 10px 18px}.vi-select-title h1{font-size:30px;line-height:1.08;margin:7px 0 8px}.vi-select-title p{max-width:430px;margin:0 auto;color:var(--muted);line-height:1.5}.vi-select-list{display:grid;gap:14px}.vi-select-card{position:relative;display:block;width:100%;height:190px;padding:0;overflow:hidden;border:0;border-radius:24px;background:#222;text-align:left;box-shadow:0 10px 26px rgba(31,24,18,.13)}.vi-select-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.vi-select-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,14,19,.84),rgba(12,14,19,.28) 72%,rgba(12,14,19,.5))}.vi-select-copy{position:absolute;left:22px;right:55px;bottom:20px;color:#fff;display:grid;gap:4px}.vi-select-copy small{font-size:11px;font-style:normal;font-weight:900;letter-spacing:.08em;color:#ffd2bd}.vi-select-copy b{font-size:25px;line-height:1.05}.vi-select-copy em{font-size:13px;line-height:1.35;font-style:normal;opacity:.92}.vi-select-arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--primary);font-size:31px;font-weight:800}.vi-select-save{text-align:center;color:var(--muted);font-size:13px;font-weight:700;margin:18px 0 4px}
.topbar .bar { flex:1; height:9px; border-radius:6px; background:var(--track); overflow:hidden; }
.topbar .bar > i {
  display:block; height:100%; border-radius:6px;
  background: linear-gradient(90deg, var(--accent-light), var(--primary));
  transition: width .4s cubic-bezier(.2,.8,.3,1);
}
.topbar .step-label { font-size:12.5px; font-weight:800; color:var(--muted); flex:0 0 auto; }

/* ---- Mentor avatar video (placeholder) ---- */
@keyframes ringpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(244,155,114,.55) } 60% { box-shadow: 0 0 0 9px rgba(244,155,114,0) } }
.video-hero {
  margin:18px 0 0; border-radius:20px; overflow:hidden; position:relative;
  background: linear-gradient(160deg, #4a2c1a, #241207);
  aspect-ratio: 16/8.5; display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.3);
}
.video-hero .vh-face {
  width:74px; height:74px; border-radius:50%; font-size:38px;
  background: linear-gradient(150deg, var(--primary), var(--navy-hero));
  display:flex; align-items:center; justify-content:center;
  border: 3px solid rgba(255,255,255,.85);
  animation: ringpulse 1.8s ease-out infinite;
}
.video-hero .vh-tag {
  position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:6px;
  font-size:9.5px; font-weight:900; letter-spacing:.6px; color:#fff;
  background:rgba(220,38,38,.85); border-radius:999px; padding:4px 10px;
}
.video-hero .vh-tag i { width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.2s ease infinite; }
.video-hero .vh-sub { font-size:11.5px; font-weight:800; color:rgba(255,255,255,.75); margin-top:10px; letter-spacing:.3px; }
.video-hero .vh-bars { position:absolute; bottom:12px; display:flex; gap:3px; height:16px; align-items:center; }
.video-hero .vh-bars i { width:3.5px; border-radius:2px; background:var(--accent-light); animation: wavebar 1s ease-in-out infinite; }
.video-hero .vh-bars i:nth-child(2n){ animation-delay:.18s } .video-hero .vh-bars i:nth-child(3n){ animation-delay:.32s }

/* the persistent little "video call" avatar */
.pip-wrap { position:relative; flex:0 0 auto; }
.pip-tag {
  position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  font-size:7.5px; font-weight:900; letter-spacing:.5px; color:#fff;
  background:rgba(220,38,38,.9); border-radius:999px; padding:2px 7px; white-space:nowrap;
}
.mentor-avatar.live { animation: ringpulse 1.9s ease-out infinite, floaty 3.2s ease-in-out infinite; }

/* audio guidance row (inside mentor bubble / standalone) */
.gaudio {
  display:flex; align-items:center; gap:9px; margin-top:10px;
  background:#fff; border-radius:12px; padding:7px 10px;
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.gaudio .gplay {
  width:28px; height:28px; border-radius:50%; border:0; flex:0 0 auto;
  background:var(--grad-primary); color:#fff; font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
.gaudio .gwave { flex:1; display:flex; gap:2.5px; height:16px; align-items:center; }
.gaudio .gwave i { flex:1; max-width:5px; border-radius:2px; background:linear-gradient(180deg,var(--accent-light),var(--primary)); opacity:.7; animation: wavebar 1.1s ease-in-out infinite; }
.gaudio .gwave i:nth-child(2n){ animation-delay:.15s } .gaudio .gwave i:nth-child(3n){ animation-delay:.3s } .gaudio .gwave i:nth-child(5n){ animation-delay:.45s }
.gaudio .glab { font-size:8.5px; font-weight:900; color:var(--faint); letter-spacing:.4px; flex:0 0 auto; }

/* compact one-line guide (pairs, aptitude) */
.guide-mini {
  display:flex; align-items:center; gap:10px; margin:6px 18px 4px;
  background:var(--bg-teal); border-radius:999px; padding:7px 12px 7px 8px;
  box-shadow: inset 0 0 0 1.5px #cdeae5;
  animation: fadeup .3s ease both;
}
.guide-mini .mini-pip {
  width:30px; height:30px; border-radius:50%; flex:0 0 auto; font-size:15px;
  background:var(--grad-hero); display:flex; align-items:center; justify-content:center;
  animation: ringpulse 2s ease-out infinite;
}
.guide-mini .mini-play {
  width:26px; height:26px; border-radius:50%; border:0; flex:0 0 auto;
  background:var(--grad-primary); color:#fff; font-size:10px;
}
.guide-mini .mini-txt { flex:1; font-size:12px; font-weight:700; color:var(--primary-dark); line-height:1.3; }

/* ---- Mentor bubble ---- */
.mentor-row { display:flex; gap:11px; padding:14px 18px 4px; align-items:flex-start; }
.mentor-avatar {
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  background: var(--grad-hero);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--accent-light), 0 6px 14px rgba(50,32,20,.25);
  animation: floaty 3.2s ease-in-out infinite;
}
.mentor-bubble {
  background: linear-gradient(150deg, #eefaf8, #e2f5f2);
  border-radius: 6px 20px 20px 20px;
  padding:13px 16px; font-size:15.5px; line-height:1.55; color:var(--body);
  animation: fadeup .35s ease both;
  box-shadow: var(--shadow-card);
}
.mentor-bubble b { color: var(--primary-dark); }
.mentor-name { font-size:11px; font-weight:900; color:var(--primary-dark); letter-spacing:.8px; margin-bottom:4px; text-transform:uppercase; }

/* ---- Headings, common bits ---- */
.pad { padding: 8px 20px 20px; }
.h1 { font-size:24px; font-weight:900; line-height:1.22; margin:12px 0 6px; }
.h2 { font-size:17px; font-weight:900; margin:16px 0 8px; }
.sub { font-size:14px; color:var(--muted); line-height:1.55; }
.center { text-align:center; }

.btn-primary {
  display:block; width:100%; border:0; border-radius:999px;
  background: var(--grad-primary); color:#fff;
  font-size:17px; font-weight:900; letter-spacing:.2px; padding:16px;
  box-shadow: var(--shadow-pop);
  transition: transform .1s ease, box-shadow .1s ease;
  position:relative; overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  background-size: 200% 100%; animation: shine 3.2s ease-in-out infinite;
}
.btn-primary:active { transform: scale(.97); box-shadow: 0 4px 12px rgba(239,106,58,.3); }
.btn-primary:disabled { background: var(--disabled-bg); color:var(--disabled-text); box-shadow:none; }
.btn-primary:disabled::after { display:none; }
.btn-ghost {
  display:block; width:100%; border:2px solid var(--border); border-radius:999px;
  background:#fff; color:var(--body); font-size:14.5px; font-weight:800; padding:13px;
}
.cta-dock {
  flex:0 0 auto; padding:12px 20px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(253,254,254,0), #fdfefe 30%);
}

/* ---- Start screen ---- */
.hero {
  background: var(--grad-hero);
  color:#fff; padding:28px 24px 32px; flex:0 0 auto;
  position:relative; overflow:hidden;
  border-radius: 0 0 34px 34px;
}
.hero::before, .hero::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
.hero::before { width:220px; height:220px; right:-70px; top:-70px; background:radial-gradient(circle, rgba(244,155,114,.35), transparent 70%); }
.hero::after  { width:180px; height:180px; left:-60px; bottom:-80px; background:radial-gradient(circle, rgba(245,185,66,.28), transparent 70%); }
.brand-row { display:flex; align-items:center; gap:11px; position:relative; }
.logo-mark {
  width:44px; height:44px; border-radius:14px;
  background: linear-gradient(135deg, var(--accent-light), var(--primary));
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:23px; color:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.brand-name { font-weight:900; font-size:16px; line-height:1.2; }
.brand-sub { font-size:12.5px; opacity:.85; }
.hero-h1 { font-size:30px; font-weight:900; margin:24px 0 10px; line-height:1.15; position:relative; }
.hero-sub { font-size:15.5px; opacity:.93; line-height:1.55; position:relative; }
.hero-points { margin:20px 0 0; padding:0; list-style:none; position:relative; }
.hero-points li { display:flex; gap:11px; font-size:14.5px; margin:11px 0; align-items:flex-start; font-weight:600; }
.hero-points .tick {
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background: rgba(244,155,114,.25); color:var(--accent-light);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900;
}

/* ---- Onboarding form ---- */
.field { margin: 18px 0; animation: fadeup .35s ease both; }
.field:nth-child(2) { animation-delay:.05s } .field:nth-child(3) { animation-delay:.1s } .field:nth-child(4) { animation-delay:.15s }
.field label { display:block; font-size:14px; font-weight:900; color:var(--ink); margin-bottom:9px; }
.field input[type=text] {
  width:100%; border:2px solid transparent; border-radius:16px;
  padding:15px 16px; font-size:16px; font-weight:700; color:var(--ink);
  background:var(--bg-soft); outline:none; font-family:inherit;
  box-shadow: inset 0 0 0 1.5px var(--border);
  transition: all .15s ease;
}
.field input[type=text]::placeholder { color:var(--faint); font-weight:600; }
.field input[type=text]:focus {
  background:#fff; box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 4px rgba(239,106,58,.13);
}
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip {
  border:0; background:var(--bg-soft); color:var(--body);
  box-shadow: inset 0 0 0 1.5px var(--border);
  border-radius:999px; padding:12px 20px; font-size:15px; font-weight:800;
  transition: all .15s ease;
}
.chip:active { transform: scale(.94); }
.chip.on {
  background: var(--grad-primary); color:#fff;
  box-shadow: 0 6px 16px rgba(239,106,58,.35);
  transform: translateY(-1px);
}

/* ---- Image pairs ---- */
.pair-q { font-size:23px; font-weight:900; text-align:center; margin:8px 0 4px; }
.pair-hint { font-size:13px; color:var(--faint); text-align:center; margin-bottom:8px; font-weight:700; }
.pair-wrap { flex:1; display:flex; flex-direction:column; gap:14px; padding:8px 18px 18px; min-height:0; }
.pair-card {
  flex:1; min-height:0; border:0; border-radius:22px;
  background:#fff; overflow:hidden; position:relative; padding:0;
  display:flex; flex-direction:column; text-align:left;
  box-shadow: var(--shadow-card), inset 0 0 0 2px var(--border);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pair-card:active { transform: scale(.975); }
.pair-card.picked { box-shadow: 0 10px 26px rgba(239,106,58,.3), inset 0 0 0 3px var(--primary); }
.pair-img {
  flex:1; min-height:90px; display:flex; align-items:center; justify-content:center;
  font-size:54px; position:relative;
}
.pair-img > :first-child ~ * { animation: floaty 3s ease-in-out infinite; }
/* pastel tint variations, assigned per pair in app.js */
.tint-0 { background: linear-gradient(150deg, #e7f7f5, #d3efeb); }
.tint-1 { background: linear-gradient(150deg, #fdf3e3, #f8e7c8); }
.tint-2 { background: linear-gradient(150deg, #ece9fd, #ddd8f8); }
.tint-3 { background: linear-gradient(150deg, #ffeee9, #fcdcd3); }
.tint-4 { background: linear-gradient(150deg, #e8f3fe, #d4e7fa); }
.tint-5 { background: linear-gradient(150deg, #eaf9e9, #d7f0d5); }
.pair-img .ph-tag {
  position:absolute; top:10px; left:10px; font-size:9px; font-weight:900;
  letter-spacing:.6px; color:#fff; background:rgba(50,32,20,.45);
  padding:4px 8px; border-radius:999px; backdrop-filter: blur(2px);
}
.pair-cap {
  flex:0 0 auto; font-size:12.5px; color:var(--muted); line-height:1.45; font-weight:600;
  padding:10px 14px 12px; background:#fff;
}
.pick-flash {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(239,106,58,.18); border-radius:22px; backdrop-filter: blur(1px);
}
.pick-flash span {
  width:58px; height:58px; border-radius:50%;
  background:var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900;
  animation: pop .32s ease both; box-shadow: 0 8px 20px rgba(239,106,58,.4);
}

/* ---- Onboarding part 2: shared image slot ---- */
.slot { position:relative; }
.slot .slot-empty { display:none; }
.slot.empty .slot-empty {
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  position:absolute; inset:0; padding:10px 11px; overflow:hidden;
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(239,106,58,.05) 9px 18px),
    linear-gradient(150deg, #eef6f8, #e2edf2);
  text-align:left;
}
.slot.empty .slot-prompt {
  font-size:9.5px; line-height:1.42; color:var(--muted); font-weight:600;
  overflow:hidden; flex:1;
}
.slot .ph-tag {
  position:static; align-self:flex-start; font-size:8.5px; font-weight:900;
  letter-spacing:.5px; color:#fff; background:rgba(50,32,20,.5);
  padding:3px 8px; border-radius:999px; flex:0 0 auto;
}

/* ---- Block A: school situation, one line + two 4:3 images ---- */
.sit-line {
  font-size:19px; font-weight:900; line-height:1.3; text-align:center;
  padding:10px 22px 2px;
}
.sit-wrap { flex:1; display:flex; flex-direction:column; gap:13px; padding:8px 18px 18px; min-height:0; }
.sit-card {
  flex:1; min-height:0; border:0; border-radius:20px; overflow:hidden;
  background:#fff; padding:0; position:relative; text-align:left;
  box-shadow: var(--shadow-card), inset 0 0 0 2px var(--border);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sit-card:active { transform: scale(.975); }
.sit-card.picked { box-shadow: 0 10px 26px rgba(239,106,58,.3), inset 0 0 0 3px var(--primary); }
.sit-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sit-label {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px 14px 11px; font-size:14.5px; font-weight:800; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(11,23,48,.82));
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.slot.empty .sit-label { color:var(--ink); background:none; text-shadow:none; }

/* ---- Block B: 4 square activity cards ---- */
.card-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:11px; padding:8px 16px 6px;
}
.act-card {
  border:0; border-radius:18px; overflow:hidden; padding:0; position:relative;
  background:#fff; text-align:left; aspect-ratio: 1 / 1.24;
  box-shadow: var(--shadow-card), inset 0 0 0 2px var(--border);
  transition: transform .12s ease, box-shadow .12s ease;
  animation: fadeup .3s ease both;
}
.act-card:nth-child(2) { animation-delay:.05s } .act-card:nth-child(3) { animation-delay:.1s } .act-card:nth-child(4) { animation-delay:.15s }
.act-card:active { transform: scale(.965); }
.act-card.picked { box-shadow: 0 10px 24px rgba(239,106,58,.32), inset 0 0 0 3px var(--primary); }
.act-photo { position:absolute; inset:0 0 auto 0; width:100%; height:72%; object-fit:cover; }
.act-label {
  position:absolute; left:0; right:0; bottom:0; height:28%;
  display:flex; align-items:center;
  padding:8px 11px; font-size:12px; font-weight:800; line-height:1.3; color:var(--ink);
  background:#fff;
}
.slot.empty .act-label { background:rgba(255,255,255,.92); }
.act-card .pick-flash, .sit-card .pick-flash { border-radius:18px; }

/* ---- Fix-it ---- */
.fixit-stage {
  flex:1; position:relative; margin:10px 18px; border-radius:24px;
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(239,106,58,.04) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(239,106,58,.04) 34px 35px),
    linear-gradient(180deg, #eef6f9, #dfecf2);
  box-shadow: inset 0 0 0 2px var(--border-soft), inset 0 8px 24px rgba(50,32,20,.05);
  overflow:hidden; min-height:300px;
}
.fixit-item {
  position:absolute; width:66px; height:66px; border-radius:20px;
  background:#fff; border:0;
  display:flex; align-items:center; justify-content:center; font-size:31px;
  box-shadow: 0 6px 14px rgba(50,32,20,.14), inset 0 0 0 1.5px var(--border);
  transition: all .18s ease; padding:0;
  animation: bob 2.8s ease-in-out infinite;
}
.fixit-item:nth-child(2n) { animation-delay:.5s } .fixit-item:nth-child(3n) { animation-delay:1s }
.fixit-item .fx-lab {
  position:absolute; bottom:-17px; left:50%; transform:translateX(-50%);
  font-size:9.5px; font-weight:800; color:var(--faint); white-space:nowrap;
}
.fixit-item.done { background:var(--bg-teal-2); opacity:.6; animation:none; box-shadow: inset 0 0 0 2px var(--primary); }
.fixit-item.done::after {
  content:'✓'; position:absolute; top:-8px; right:-8px; width:22px; height:22px;
  background:var(--success); color:#fff; border-radius:50%; font-size:13px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 8px rgba(46,158,107,.4);
}

/* ---- Teaser ---- */
.teaser-hero {
  background: var(--grad-hero);
  color:#fff; padding:28px 24px 26px; border-radius:0 0 34px 34px;
  position:relative; overflow:hidden;
}
.teaser-hero::before {
  content:'✦'; position:absolute; right:26px; top:22px; font-size:22px;
  color:var(--gold); animation: floaty 2.6s ease-in-out infinite;
}
.teaser-hero::after {
  content:''; position:absolute; width:240px; height:240px; right:-80px; bottom:-120px;
  border-radius:50%; background:radial-gradient(circle, rgba(244,155,114,.3), transparent 70%);
}
.big-count { font-size:52px; font-weight:900; line-height:1; text-shadow: 0 4px 18px rgba(0,0,0,.25); }
.big-count small { font-size:17px; font-weight:800; opacity:.8; }
.style-badge {
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  background:linear-gradient(135deg, rgba(245,185,66,.25), rgba(245,185,66,.12));
  box-shadow: inset 0 0 0 1.5px rgba(245,185,66,.6);
  border-radius:999px; padding:10px 20px; font-weight:900; font-size:17px;
  animation: pop .5s ease both .3s; position:relative;
}
.locked-card {
  margin:16px 20px; border-radius:22px;
  padding:18px; background:#fff;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
}
.locked-card .lk { font-size:20px; margin-right:4px; }
.locked-paths { display:flex; gap:10px; margin-top:12px; }
.locked-path {
  flex:1; background:var(--bg-soft); border-radius:16px;
  box-shadow: inset 0 0 0 1.5px var(--border);
  padding:14px 6px; text-align:center; font-size:24px;
}
.locked-path .q { filter: blur(5px); font-weight:900; font-size:13px; color:var(--body); margin-top:5px; }

/* ---- Balanced transition pages ----
   Audio-only mentor prompts used to leave a large blank centre. These
   screens now keep the message, progress cue and action as one centred unit. */
.balanced-screen { overflow-y:auto; }
.balanced-main {
  width:100%; min-height:100%; margin:auto 0; padding:22px 0;
  display:flex; flex-direction:column; justify-content:center;
}
.balanced-main.with-topbar { min-height:calc(100% - 62px); }
.teaser-screen .teaser-hero { margin:0 12px; border-radius:30px; }
.journey-cue {
  margin:18px 20px 0; padding:15px 14px; display:flex; align-items:center;
  justify-content:space-between; gap:7px; background:#fff; border-radius:22px;
  box-shadow:var(--shadow-card), inset 0 0 0 1.5px var(--border);
}
.journey-cue > i { color:var(--dot-idle); font-size:25px; font-style:normal; font-weight:800; }
.journey-step { min-width:0; flex:1; text-align:center; color:var(--muted); }
.journey-step b {
  width:42px; height:42px; margin:0 auto 5px; display:flex; align-items:center;
  justify-content:center; border-radius:15px; background:var(--bg-soft); font-size:19px;
}
.journey-step span { display:block; font-size:11.5px; font-weight:800; white-space:nowrap; }
.journey-step.done b { background:#e8f7ef; color:var(--success); }
.journey-step.now { color:var(--primary-dark); }
.journey-step.now b { background:var(--bg-teal-2); box-shadow:inset 0 0 0 2px var(--accent-light); }
.balanced-card {
  margin:0 20px; padding:26px 22px; text-align:center; background:#fff;
  border-radius:26px; box-shadow:var(--shadow-card), inset 0 0 0 1.5px var(--border);
}
.balanced-icon {
  width:62px; height:62px; margin:0 auto 13px; display:flex; align-items:center;
  justify-content:center; border-radius:21px; background:var(--bg-teal-2);
  color:var(--primary-dark); font-size:22px; font-weight:900;
}
.balanced-icon.success { background:#e8f7ef; color:var(--success); font-size:29px; }
.balanced-kicker { color:var(--primary-dark); font-size:10.5px; font-weight:900; letter-spacing:.85px; }
.balanced-title { margin-top:7px; font-size:22px; font-weight:900; line-height:1.28; }
.balanced-sub { margin-top:9px; color:var(--muted); font-size:14px; line-height:1.55; }
.balanced-note { margin-top:15px; padding:10px 12px; border-radius:14px; background:var(--bg-soft); color:var(--body); font-size:12.5px; line-height:1.45; font-weight:700; }
.balanced-actions { padding:18px 20px 0; background:transparent; flex:0 0 auto; }

/* ---- Career-area introduction and visual choices ---- */
.career-mosaic {
  margin:0 auto 14px; width:214px; height:116px; display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr; overflow:hidden; border-radius:22px;
  border:4px solid #fff; box-shadow:0 10px 28px rgba(64,34,14,.18);
}
.career-mosaic img { width:100%; height:100%; object-fit:cover; display:block; }
.interest-intro-card { padding-top:22px; padding-bottom:22px; }
.interest-head { flex:0 0 auto; padding:8px 20px 11px; }
.interest-head b { display:block; font-size:18px; line-height:1.3; }
.interest-head span { display:block; margin-top:4px; color:var(--muted); font-size:12.5px; line-height:1.4; }
.interest-scroll { padding:2px 20px 16px; }
.interest-list { gap:11px; }
.interest-card { min-height:86px; padding:8px 11px 8px 8px; gap:12px; border-radius:19px; }
.interest-thumbs {
  flex:0 0 96px; width:96px; height:68px; display:flex; overflow:hidden;
  border-radius:14px; background:var(--bg-soft); box-shadow:inset 0 0 0 1px var(--border);
}
.interest-thumbs img { min-width:0; flex:1 1 0; height:100%; object-fit:cover; display:block; }
.interest-thumbs img:only-child { width:100%; }
.interest-card .or-lab { font-size:14px; line-height:1.35; }
.interest-card.on .interest-thumbs { box-shadow:0 0 0 2px var(--primary); }
.interest-other-input {
  width:100%; margin-top:11px; border:1.5px solid var(--border-soft);
  border-radius:15px; padding:13px 14px; font:14px/1.4 inherit; color:var(--ink); outline:none;
}
.interest-other-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(239,106,58,.11); }
@media (max-width:360px) {
  .interest-thumbs { flex-basis:82px; width:82px; }
  .interest-card { gap:9px; }
  .interest-card .or-lab { font-size:13px; }
}

/* ---- Stable interaction mode ----
   Student taps must never make a page or card visibly move. The app
   re-renders after many choices, so entrance animations and pressed-state
   transforms would replay on every tap and look like page jumping. */
.screen *, .screen *::before, .screen *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.screen button:active,
.screen [role="button"]:active {
  transform: none !important;
}
@media (max-height:680px) {
  .balanced-main { justify-content:flex-start; padding-top:16px; }
  .balanced-card { padding-top:20px; padding-bottom:20px; }
  .journey-cue { margin-top:12px; }
  .balanced-actions { padding-top:12px; }
}

/* ---- Payment ---- */
.pay-card {
  margin:14px 20px; border-radius:24px; overflow:hidden; background:#fff;
  box-shadow: 0 12px 34px rgba(50,32,20,.12), inset 0 0 0 1.5px var(--border);
}
.pay-head {
  background: linear-gradient(150deg, var(--bg-teal-2), var(--bg-teal));
  padding:18px; position:relative;
}
.pay-head::after { content:'💎'; position:absolute; right:18px; top:16px; font-size:26px; animation: floaty 3s ease-in-out infinite; }
.pay-price { font-size:38px; font-weight:900; }
.pay-price small { font-size:13px; color:var(--warn); font-weight:800; }
.pay-rows { padding:8px 18px 10px; }
.pay-row { display:flex; gap:12px; padding:11px 0; font-size:14px; font-weight:600; color:var(--body); border-bottom:1.5px dashed var(--bg-soft); align-items:center;}
.pay-row:last-child { border-bottom:0; }
.pay-row .ic {
  font-size:17px; flex:0 0 auto; width:34px; height:34px; border-radius:12px;
  background:var(--bg-teal-2); display:flex; align-items:center; justify-content:center;
}
.pay-methods { display:flex; gap:10px; padding: 4px 20px 0; }
.pay-m {
  flex:1; border:0; border-radius:14px; background:#fff;
  box-shadow: inset 0 0 0 1.5px var(--border);
  padding:13px 4px; font-size:13.5px; font-weight:800; color:var(--body);
}
.pay-m.on { box-shadow: inset 0 0 0 2px var(--primary); background:var(--bg-teal-2); color:var(--primary-dark); }

/* ---- Aptitude test ---- */
.q-num {
  display:inline-block; font-size:11.5px; font-weight:900; color:var(--primary-dark);
  background:var(--bg-teal-2); border-radius:999px; padding:5px 13px;
  margin:12px 0 10px; letter-spacing:.4px;
}
.q-text { font-size:19px; font-weight:900; line-height:1.4; margin-bottom:16px; }
.opt {
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  border:0; background:#fff; border-radius:18px;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
  padding:15px 16px; font-size:15px; font-weight:700; color:var(--body); margin-bottom:11px;
  transition: all .12s ease;
}
.opt:active { transform: scale(.98); }
.opt .key {
  width:32px; height:32px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:900; flex:0 0 auto;
  transition: all .12s ease;
}
.opt:nth-of-type(1) .key { background:#e0f5f3; color:#0d8f8f; }
.opt:nth-of-type(2) .key { background:#efe9fd; color:#6a58e0; }
.opt:nth-of-type(3) .key { background:#fdf0dc; color:#c07b12; }
.opt:nth-of-type(4) .key { background:#ffe9e4; color:#d8543d; }
.opt.on {
  box-shadow: 0 8px 22px rgba(239,106,58,.22), inset 0 0 0 2.5px var(--primary);
  background: var(--bg-teal);
}
.opt.on .key { background:var(--grad-primary); color:#fff; }

/* ---- Thinking / API call screen ---- */
.think-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; }
.think-ring {
  width:84px; height:84px; border-radius:50%; position:relative;
  border:6px solid var(--bg-teal-2);
  border-top-color: var(--primary); border-right-color: var(--accent-light);
  animation: spin .9s linear infinite; margin-bottom:8px;
}
.think-emoji { font-size:34px; margin:-62px 0 34px; position:relative; animation: floaty 2s ease-in-out infinite; }
.think-line { font-size:15px; font-weight:700; color:var(--muted); animation: pulse 1.6s ease infinite; margin-top:7px; }

/* ---- Round stepper ---- */
.round-stepper { display:flex; gap:8px; padding:12px 20px 0; }
.rstep {
  flex:1; text-align:center; font-size:11px; font-weight:900; color:var(--faint);
  padding:9px 2px; border-radius:12px; background:var(--bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--border);
  transition: all .2s ease;
}
.rstep.now {
  color:#fff; background:var(--grad-primary);
  box-shadow: 0 5px 14px rgba(239,106,58,.3); transform: translateY(-1px);
}
.rstep.done { color:var(--success); background:#eaf8f1; box-shadow: inset 0 0 0 1.5px #bfe7d2; }
.rstep.done::before { content:'✓ '; }

/* ---- Internship player ---- */
.ip-head {
  background: var(--grad-hero); color:#fff;
  margin:12px 16px 0; border-radius:22px;
  padding:13px 16px; display:flex; align-items:center; gap:12px;
  box-shadow: 0 10px 26px rgba(50,32,20,.25);
  position:relative; overflow:hidden;
}
.ip-head::after {
  content:''; position:absolute; width:130px; height:130px; right:-40px; top:-50px;
  border-radius:50%; background:radial-gradient(circle, rgba(244,155,114,.3), transparent 70%);
}
.ip-head .mentor-avatar { animation:none; box-shadow: 0 0 0 2.5px rgba(255,255,255,.85); width:42px; height:42px; font-size:20px; }
.ip-head .t1 { font-size:10.5px; font-weight:900; letter-spacing:.6px; opacity:.85; }
.ip-head .t2 { font-size:16px; font-weight:900; }
.ip-progress { display:flex; gap:5px; padding:12px 22px 2px; }
.ip-progress i { flex:1; height:5px; border-radius:3px; background:var(--track); transition: background .3s ease; }
.ip-progress i.on { background:var(--primary); }
.ip-progress i.now { background:linear-gradient(90deg, var(--primary), var(--accent-light)); }

.ip-screen-text {
  font-size:26px; font-weight:900; line-height:1.28; text-align:center;
  padding:24px 26px 8px; animation: fadeup .3s ease both;
}
.ip-screen-text .l2 { display:block; color:var(--muted); font-size:20px; margin-top:6px; font-weight:800; }

.voice-bar {
  margin:16px 20px 0; border-radius:18px;
  background:#fff; box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
  padding:12px 15px; display:flex; align-items:center; gap:12px;
}
.voice-bar .play {
  width:42px; height:42px; border-radius:50%;
  background:var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto;
  box-shadow: 0 5px 14px rgba(239,106,58,.35);
}
.voice-bar .wave { flex:1; display:flex; align-items:center; gap:3px; height:24px; }
.voice-bar .wave i {
  flex:1; background:linear-gradient(180deg, var(--accent-light), var(--primary));
  border-radius:3px; opacity:.65;
  animation: wavebar 1.1s ease-in-out infinite;
}
.voice-bar .wave i:nth-child(2n) { animation-delay:.15s } .voice-bar .wave i:nth-child(3n) { animation-delay:.3s }
.voice-bar .wave i:nth-child(5n) { animation-delay:.45s } .voice-bar .wave i:nth-child(7n) { animation-delay:.6s }
.voice-bar .vlab { font-size:9.5px; font-weight:900; color:var(--faint); letter-spacing:.4px; margin-top:3px; }
.transcript {
  margin:12px 22px 0; font-size:14px; color:var(--muted); line-height:1.65;
  font-style:italic; font-weight:600;
}
.transcript b { color:var(--body); }

.dec-opt {
  display:block; width:calc(100% - 40px); margin:11px 20px 0; text-align:left;
  border:0; background:#fff; border-radius:18px;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
  border-left:5px solid var(--primary);
  padding:16px 17px; font-size:15px; font-weight:800; color:var(--ink); line-height:1.45;
  transition: all .12s ease;
}
.dec-opt:nth-of-type(2) { border-left-color: var(--violet); }
.dec-opt:nth-of-type(3) { border-left-color: var(--gold); }
.dec-opt:active { transform: scale(.975); }
.dec-tag {
  margin:14px 22px 0; font-size:11.5px; font-weight:900; color:var(--coral);
  letter-spacing:.6px;
}
.outcome-card {
  margin:16px 20px 0; background:linear-gradient(150deg, #eefaf8, #e0f4f1);
  border-radius:18px; padding:15px 17px; font-size:14.5px; color:var(--body); line-height:1.6; font-weight:600;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px #cdeae5;
  animation: fadeup .3s ease both;
}
.outcome-who {
  margin:12px 20px 0; font-size:13.5px; color:var(--muted); line-height:1.6; font-weight:600;
  padding:12px 15px; background:var(--bg-soft); border-radius:14px;
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.readback-choice {
  margin:10px 20px 0; display:flex; gap:11px; align-items:flex-start;
  background:#fff; border-radius:16px; padding:12px 14px;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
  font-size:13.5px; color:var(--body); line-height:1.5; font-weight:600;
  animation: fadeup .35s ease both;
}
.readback-choice:nth-child(odd) { animation-delay:.08s }
.readback-choice .n {
  width:26px; height:26px; border-radius:10px; background:var(--grad-primary); color:#fff;
  font-weight:900; font-size:13px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.pattern-card {
  margin:16px 20px 0; background: var(--grad-hero);
  color:#fff; border-radius:20px; padding:17px 19px; font-size:15px; line-height:1.6; font-weight:700;
  animation: pop .45s ease both .2s;
  box-shadow: 0 12px 30px rgba(50,32,20,.3);
  position:relative; overflow:hidden;
}
.pattern-card::before { content:'✨'; margin-right:6px; }
.pattern-card::after {
  content:''; position:absolute; width:150px; height:150px; right:-50px; top:-60px;
  border-radius:50%; background:radial-gradient(circle, rgba(245,185,66,.3), transparent 70%);
}

/* ---- Images inside the internship player / round parts ---- */
.piece-img {
  margin:14px 20px 0; border-radius:18px; overflow:hidden; position:relative;
  aspect-ratio: 16/9; background:var(--bg-soft);
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
  animation: fadeup .35s ease both;
}
.piece-img img { width:100%; height:100%; object-fit:cover; display:block; }
.piece-thumbs { display:flex; gap:9px; margin:14px 20px 0; }
.piece-thumbs .th {
  flex:1; border-radius:14px; overflow:hidden; position:relative; aspect-ratio: 3/4;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
  animation: pop .4s ease both;
}
.piece-thumbs .th:nth-child(2){ animation-delay:.08s } .piece-thumbs .th:nth-child(3){ animation-delay:.16s }
.piece-thumbs .th img { width:100%; height:100%; object-fit:cover; display:block; }
.piece-thumbs .th span {
  position:absolute; left:0; right:0; bottom:0; padding:14px 8px 7px; text-align:center;
  font-size:11px; font-weight:900; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(50,32,20,.85));
}
/* image slot awaiting the designer — shows its own prompt */
.ph-img {
  margin:12px 20px 0; border-radius:16px; padding:12px 14px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(239,106,58,.05) 9px 18px),
    var(--bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--border-soft);
  font-size:11.5px; color:var(--muted); line-height:1.5; font-weight:600;
}
.ph-img .ph-t {
  display:inline-block; font-size:9px; font-weight:900; letter-spacing:.6px; color:#fff;
  background:var(--coral); border-radius:999px; padding:3px 8px; margin-bottom:6px;
}
.ph-img b { color:var(--ink); }
.pair-card .pair-prompt {
  flex:0 0 auto; font-size:11px; color:var(--muted); line-height:1.45; font-weight:600;
  padding:8px 12px 10px; background:#fff; max-height:92px; overflow:auto;
}
.pair-card .pair-prompt .ph-t {
  display:inline-block; font-size:8.5px; font-weight:900; letter-spacing:.6px; color:#fff;
  background:var(--coral); border-radius:999px; padding:2px 7px; margin-bottom:4px;
}

/* audio line attached to an image */
.img-say {
  display:flex; align-items:center; gap:9px; margin:8px 22px 0;
  font-size:12.5px; color:var(--muted); font-style:italic; font-weight:600; line-height:1.4;
}
.img-say .sp {
  width:24px; height:24px; border-radius:50%; border:0; flex:0 0 auto;
  background:var(--grad-primary); color:#fff; font-size:9px;
  display:flex; align-items:center; justify-content:center;
}
.img-say b { font-style:normal; color:var(--primary-dark); }
.img-say .atag { font-size:8px; font-weight:900; color:var(--faint); letter-spacing:.4px; flex:0 0 auto; font-style:normal; }
.part-banner {
  margin:12px 20px 0; border-radius:18px; overflow:hidden; position:relative; aspect-ratio: 16/7;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
}
.part-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.part-banner .pb-cap {
  position:absolute; left:0; right:0; bottom:0; padding:18px 14px 10px;
  font-size:13px; font-weight:900; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(50,32,20,.85));
}
.intern-head.has-img { padding:0; }
.intern-head.has-img img { width:100%; height:150px; object-fit:cover; display:block; opacity:.85; }
.intern-head.has-img .ih-body { padding:16px 22px 20px; position:relative; }

/* ---- Internship placeholder steps ---- */
.intern-head {
  background: var(--grad-hero); color:#fff;
  margin:12px 16px 0; padding:20px 22px; border-radius:24px;
  box-shadow: 0 10px 26px rgba(50,32,20,.25);
  position:relative; overflow:hidden;
}
.intern-head::after {
  content:''; position:absolute; width:180px; height:180px; right:-60px; top:-70px;
  border-radius:50%; background:radial-gradient(circle, rgba(244,155,114,.28), transparent 70%);
}
.intern-step {
  margin:13px 20px 0; border-radius:18px; padding:15px; background:#fff;
  display:flex; gap:13px; align-items:flex-start;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
}
.intern-step .n {
  width:36px; height:36px; border-radius:13px; background:var(--bg-teal-2);
  font-size:17px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.ph-block {
  margin-top:9px; border-radius:13px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 8px, rgba(239,106,58,.045) 8px 16px),
    var(--bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--border);
  padding:12px 13px; font-size:12px; color:var(--muted); font-weight:600; line-height:1.5;
  display:flex; align-items:flex-start; gap:9px;
}
.ph-block .ic { font-size:19px; flex:0 0 auto; }

/* ---- Report ---- */
.report-hero {
  background: var(--grad-hero); color:#fff;
  padding:28px 24px 24px; border-radius:0 0 34px 34px;
  position:relative; overflow:hidden;
}
.report-hero::before {
  content:'🏆'; position:absolute; right:24px; top:22px; font-size:30px;
  animation: floaty 2.8s ease-in-out infinite;
}
.report-hero::after {
  content:''; position:absolute; width:240px; height:240px; left:-90px; bottom:-140px;
  border-radius:50%; background:radial-gradient(circle, rgba(244,155,114,.25), transparent 70%);
}
.report-card {
  margin:15px 20px; border-radius:20px; padding:17px; background:#fff;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--border);
}
.report-card h3 { margin:0 0 9px; font-size:15.5px; font-weight:900; }
.report-card p, .report-card li { font-size:14px; color:var(--body); line-height:1.6; font-weight:600; }
.path-card {
  border-radius:16px; padding:14px; margin:11px 0;
  background:var(--bg-soft); box-shadow: inset 0 0 0 1.5px var(--border);
}
.path-card.top {
  background:linear-gradient(150deg, #eefaf8, #e0f4f1);
  box-shadow: inset 0 0 0 2px var(--primary), 0 6px 18px rgba(239,106,58,.15);
}
.path-rank { font-size:11px; font-weight:900; color:var(--primary-dark); letter-spacing:.6px; }
.path-card.top .path-rank::before { content:'⭐ '; }
.path-name { font-size:17px; font-weight:900; margin:3px 0 5px; }
.fact-tag {
  display:inline-block; font-size:10px; font-weight:800; color:var(--primary-dark);
  background:#fff; box-shadow: inset 0 0 0 1px var(--border-soft); border-radius:999px;
  padding:3px 9px; margin-top:7px;
}
.meter { height:9px; border-radius:6px; background:var(--track); overflow:hidden; margin:5px 0 4px; }
.meter > i {
  display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--accent-light), var(--primary));
  transition: width .8s cubic-bezier(.2,.8,.3,1);
}
.meter-row { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); font-weight:800; }

/* ---- Evaluator drawer ---- */
.eval-fab {
  position:absolute; right:14px; bottom:96px; z-index:40;
  width:44px; height:44px; border-radius:50%; border:0;
  background:var(--stage-navy); color:#fff; font-size:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.35); opacity:.7;
  transition: opacity .15s ease;
}
.eval-fab:active { opacity:1; }
.eval-drawer {
  position:absolute; inset:auto 0 0 0; z-index:50; max-height:72%;
  background:var(--stage-navy); color:#dbe6ee; border-radius:22px 22px 0 0;
  padding:16px 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y:auto; box-shadow: 0 -10px 30px rgba(0,0,0,.4);
  font-size:12.5px; line-height:1.55;
}
.eval-drawer h4 { margin:12px 0 4px; font-size:11.5px; color:var(--accent-light); text-transform:uppercase; letter-spacing:.7px; }
.eval-drawer code { background:rgba(255,255,255,.1); border-radius:5px; padding:1px 5px; font-size:11.5px; }
.eval-close { float:right; background:none; border:0; color:#8fa5b5; font-size:18px; }
.eval-jump { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.eval-jump button {
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.07);
  color:#cfe3ec; font-size:11px; border-radius:9px; padding:5px 10px; font-weight:800;
}
.api-pill {
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 11px;
  background:rgba(244,155,114,.15); box-shadow: inset 0 0 0 1px rgba(244,155,114,.45);
  color:var(--accent-light); font-weight:900; font-size:11px;
}

/* ---- Dots progress (pairs) ---- */
.dots { display:flex; gap:6px; justify-content:center; padding:4px 0 4px; }
.dots i { width:7px; height:7px; border-radius:50%; background:var(--dot-idle); transition: all .2s ease; }
.dots i.on { background:var(--primary); }
.dots i.now { background:var(--navy-hero); transform:scale(1.45); }

/* ---- misc ---- */
.tag-note {
  margin:12px 20px 0; font-size:11.5px; color:var(--muted); line-height:1.55; font-weight:600;
  background:#fdf6e8; border-radius:13px; padding:10px 13px;
  box-shadow: inset 0 0 0 1.5px #f3e2bb;
}
.offer-card {
  margin:16px 20px; border-radius:24px; overflow:hidden; position:relative;
  background: var(--grad-hero); color:#fff; padding:20px;
  box-shadow: 0 12px 30px rgba(50,32,20,.3);
}
.offer-card::after {
  content:''; position:absolute; width:170px; height:170px; right:-60px; top:-70px;
  border-radius:50%; background:radial-gradient(circle, rgba(245,185,66,.3), transparent 70%);
}
.offer-card h3 { margin:0 0 7px; font-size:18px; font-weight:900; position:relative; }
.offer-card p { font-size:13.5px; opacity:.93; line-height:1.6; margin:0 0 14px; font-weight:600; position:relative; }
.offer-card .btn-gold {
  width:100%; border:0; border-radius:15px; padding:14px; font-size:15px; font-weight:900;
  background:linear-gradient(135deg, #ffd35c, var(--gold)); color:var(--stage-navy);
  box-shadow: 0 8px 20px rgba(245,185,66,.4); position:relative;
}

/* ---- Drop-off funnel in evaluator drawer ---- */
.funnel-row { display:flex; align-items:center; gap:8px; margin:3px 0; }
.funnel-row .fl { flex:0 0 108px; font-size:10.5px; color:#9fb3c0; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.funnel-row .fb { height:11px; background:linear-gradient(90deg, var(--primary), var(--accent-light)); border-radius:4px; }
.funnel-row .fn { font-size:10.5px; color:#cfe3ec; font-weight:800; }

/* ---- Onboarding extras: annual-day ranking + trek voice screen ---- */
.rank-item {
  display:flex; align-items:center; gap:11px; width:100%;
  border:2px solid var(--border); border-radius:15px; background:#fff;
  padding:12px 13px; margin-bottom:9px; text-align:left;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--ink);
  box-shadow: var(--shadow-card); cursor:pointer;
}
.rank-item.placed {
  border-color: var(--primary); background: var(--bg-teal-2);
}
.rank-badge {
  flex:0 0 26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--track); color: var(--muted); font-size:13px; font-weight:900;
}
.rank-item.placed .rank-badge { background: var(--primary); color:#fff; }
.rank-emoji { font-size:20px; }
.rank-label { flex:1; line-height:1.35; }
.rank-reset {
  border:0; background:none; color:var(--muted); font-family:inherit;
  font-size:12.5px; font-weight:800; padding:6px 2px; cursor:pointer; text-decoration:underline;
}

.rec-btn {
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  border:0; border-radius:15px; padding:15px; margin-top:6px;
  font-family:inherit; font-size:15px; font-weight:900; color:#fff;
  background: linear-gradient(135deg, var(--coral), #e35a44);
  box-shadow: 0 8px 20px rgba(255,122,99,.35); cursor:pointer;
}
.rec-btn.stop { background: var(--navy-deep); box-shadow: 0 8px 20px rgba(50,32,20,.3); }
.rec-dot {
  width:11px; height:11px; border-radius:50%; background:#fff; display:inline-block;
}
.rec-dot.blink { animation: recblink 1s infinite; background:#ff5a45; }
@keyframes recblink { 0%,100% { opacity:1 } 50% { opacity:.25 } }
@media (prefers-reduced-motion: reduce) { .rec-dot.blink { animation:none } }
.rec-live {
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:800; color:var(--body);
  background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:13px; padding:11px 13px; margin:6px 0 10px;
}
.rec-live.done { border-color:#bfe0cd; background:#effaf3; color:#1d6f4b; }
.voice-privacy {
  margin-top:14px; font-size:12px; font-weight:700; color:var(--muted);
  background:var(--bg-teal); border:1.5px dashed var(--border-soft);
  border-radius:11px; padding:9px 11px; line-height:1.5;
}
.voice-evals .veval .rank-badge { background:transparent; color:var(--primary-dark); }

/* ---- 25 Aug comments round: speaking indicator, option rows, priority ranks ---- */
.mentor-speak {
  display:flex; align-items:center; gap:12px;
  margin:14px 18px 4px; padding:10px 14px;
  background:var(--bg-teal); border:1.5px solid var(--bg-teal-2); border-radius:18px;
}
.mentor-speak .ms-body { flex:1; }
.ms-wave { display:flex; gap:3px; height:16px; align-items:center; }
.ms-wave i { width:3.5px; border-radius:2px; background:var(--primary); animation: wavebar 1s ease-in-out infinite; }
.ms-wave i:nth-child(2n) { animation-delay:.18s } .ms-wave i:nth-child(3n) { animation-delay:.32s }
@media (prefers-reduced-motion: reduce) { .ms-wave i { animation:none; height:9px } }
.ms-tag { font-size:10px; font-weight:800; letter-spacing:.4px; color:var(--faint); text-transform:uppercase; }
.mentor-speak .ms-wave { margin-top:5px; }
.guide-mini .ms-wave { flex:0 0 auto; }
.guide-mini .ms-tag { margin-left:auto; }
.transcript { display:none; }   /* spoken lines are audio-only now; text stays in the DOM as the recording script */

.opt-rows { display:flex; flex-direction:column; gap:10px; }
.opt-row {
  display:flex; align-items:center; gap:12px; width:100%;
  border:2px solid var(--border); border-radius:16px; background:#fff;
  padding:14px 15px; text-align:left;
  font-family:inherit; font-size:14.5px; font-weight:700; color:var(--ink);
  box-shadow: var(--shadow-card); transition: all .12s ease;
}
.opt-row:active { transform: scale(.98); }
.opt-row.on { border-color: var(--primary); background: var(--bg-teal); }
.opt-row .or-ic {
  flex:0 0 34px; height:34px; border-radius:10px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.opt-row.on .or-ic { background:var(--bg-teal-2); }
.opt-row .or-lab { flex:1; line-height:1.35; }
.opt-row .or-tick { flex:0 0 auto; color:var(--primary); font-weight:900; font-size:15px; }

.act-rank {
  position:absolute; top:8px; left:8px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:13px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 10px rgba(239,106,58,.4);
  animation: pop .25s ease both;
}
.act-card { position:relative; }

.video-hero.big { aspect-ratio: 3/4; margin-top:14px; }   /* vertical mentor video (owner: 9:16); cover-crop is gentle at 3:4 */

/* ---- Block A scene banner (owner's request 25 Aug): shows the SITUATION, never an answer ---- */
.scene-banner {
  border-radius:18px; overflow:hidden; margin:2px 0 12px;
  aspect-ratio: 16/8; background:var(--bg-soft);
  box-shadow: var(--shadow-card); position:relative;
}
.scene-photo { width:100%; height:100%; object-fit:cover; display:block; }
.scene-banner .slot-empty { position:absolute; inset:0; padding:10px 12px; overflow:auto; }

/* ---- real mentor video (HeyGen) — covers the window; placeholder shows if the file is absent ---- */
.vh-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; background:#000; }
.video-hero .vh-tag { z-index:3; }

/* ---- the work challenge (owner's must #1) ---- */
.ev-card {
  display:block; width:100%; text-align:left; border:2px solid var(--border);
  border-radius:16px; background:#fff; padding:12px 14px; font-family:inherit;
  box-shadow: var(--shadow-card); color:var(--ink);
}
.ev-card .ev-head { display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:700; }
.ev-card .or-tick { margin-left:auto; font-size:11px; font-weight:800; color:var(--muted); }
.ev-card.open { border-color: var(--primary); }
.ev-card.open .or-tick { color: var(--primary); }
.ev-card .ev-body {
  margin-top:10px; padding:10px 12px; border-radius:11px;
  background:var(--bg-teal); font-size:13.5px; line-height:1.55; color:var(--body);
}
.budget-bar {
  border-radius:12px; padding:9px 13px; margin-bottom:10px;
  background:var(--bg-teal); border:1.5px solid var(--bg-teal-2);
  font-size:13.5px; font-weight:700; color:var(--ink);
  font-variant-numeric: tabular-nums;
}
.budget-bar.over { background:#fdecea; border-color:#f5c2ba; color:#a33224; }
.opt-row .or-cost { flex:0 0 auto; font-weight:800; color:var(--primary-dark); font-variant-numeric: tabular-nums; }
.pf-list { margin:6px 0 0; padding-left:18px; }
.pf-list li { margin-bottom:6px; font-size:13.5px; line-height:1.5; }
.pause-btn {
  flex:0 0 auto; width:32px; height:32px; border-radius:12px; border:0;
  background:var(--bg-soft); color:var(--muted); font-size:13px;
  box-shadow: inset 0 0 0 1.5px var(--border);
}

/* ---- rev 3: audio controls on every page (Restart + Pause/Continue) ---- */
.audio-bar {
  position: fixed; left: 14px; bottom: 96px; z-index: 200;
  display: flex; gap: 10px;
}
.audio-bar button {
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--primary, #ef6a3a); color: #fff; font-size: 26px; font-weight: 900;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(64,34,14,.30);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.audio-bar button:active { transform: scale(.94); }

/* ---- centered basics pages (owner 27 Aug: question + box in the middle) ---- */
.basics-center { display: flex; flex-direction: column; justify-content: center; padding: 0 22px; }
.bq { text-align: center; }
.bq-ic { font-size: 46px; }
.bq-q { font-size: 22px; font-weight: 800; line-height: 1.3; margin: 10px 0 6px; }
.bq-help { font-size: 14px; opacity: .72; margin-bottom: 18px; }
.bq input[type="text"] {
  width: 100%; padding: 16px; font-size: 17px; text-align: center;
  border: 2px solid var(--border); border-radius: 14px; font-family: inherit;
}
.bq input[type="text"]:focus { border-color: var(--primary, #ef6a3a); outline: none; }
.bq .opt-rows { text-align: left; }

/* ---- Progress Report skill-level badges (rev 3 stage 2) ---- */
.lv-badge{font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:20px;letter-spacing:.3px}
.lv-strong{background:#e3f6e8;color:#1d7a3d}
.lv-grow{background:#fff2d9;color:#a06a00}
.lv-build{background:#fde8e0;color:#c0492a}

/* ---- Stage 3: the new VI player ---- */
.vi-coord{display:flex;align-items:center;gap:12px;margin:12px 14px;padding:12px;background:#fff;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.vc-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid #ef6a3a}
.vc-name{font-weight:800;font-size:16px}
.vc-role{font-size:12.5px;opacity:.7}
.vi-lines{list-style:none;margin:10px 14px;padding:0}
.vi-lines li{opacity:0;animation:viLineIn .6s ease forwards;background:#fff;border-radius:12px;padding:10px 14px;margin-bottom:8px;font-size:14.5px;font-weight:600;box-shadow:0 1px 6px rgba(0,0,0,.05)}
.vi-lines li::before{content:'•  ';color:#ef6a3a;font-weight:900}
@keyframes viLineIn{to{opacity:1}}
.vi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 14px}
.vi-grid .vg{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.vi-grid .vg img{width:100%;height:96px;object-fit:cover;display:block}
.vi-grid .vg span{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:11.5px;font-weight:700;padding:14px 8px 6px}

/* ---- VI “Let us talk to the people” career interviews ---- */
.people-intro { padding:20px 20px 10px; text-align:center; }
.people-kicker { color:var(--primary-dark); font-size:10px; font-weight:900; letter-spacing:.8px; }
.people-intro h1 { margin:7px 0 6px; font-size:24px; line-height:1.2; }
.people-intro p { margin:0 auto; max-width:360px; color:var(--muted); font-size:13.5px; line-height:1.55; }
.people-rule { margin:13px auto 0; max-width:360px; padding:10px 12px; border-radius:14px; background:var(--bg-teal); color:var(--body); font-size:12px; line-height:1.45; font-weight:700; }
.people-careers { display:grid; grid-template-columns:1fr 1fr; gap:11px; padding:8px 16px 20px; }
.people-career { padding:0; overflow:hidden; border:1.5px solid var(--border); border-radius:18px; background:#fff; color:var(--ink); text-align:left; box-shadow:var(--shadow-card); }
.people-career img { display:block; width:100%; height:112px; object-fit:cover; }
.people-career > span { display:block; padding:10px 11px 11px; }
.people-career b { display:block; font-size:12.5px; line-height:1.3; }
.people-career:active { transform:scale(.98); }
.people-topbar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 14px 8px; }
.people-back, .people-mute { border:0; border-radius:999px; padding:9px 12px; background:var(--bg-soft); color:var(--body); font-size:11.5px; font-weight:800; box-shadow:inset 0 0 0 1.5px var(--border); }
.people-mute { background:#e9f7f1; color:#21694b; }
.people-mute.off { background:var(--bg-soft); color:var(--muted); }
.people-hero { position:relative; height:210px; margin:0 14px; overflow:hidden; border-radius:24px; background:#ddd; box-shadow:var(--shadow-card); }
.people-hero img { display:block; width:100%; height:100%; object-fit:cover; }
.people-hero::after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(20,14,10,.85)); }
.people-hero > div { position:absolute; z-index:2; left:17px; right:17px; bottom:15px; color:#fff; }
.people-hero span { display:block; font-size:12px; font-weight:700; opacity:.88; }
.people-hero b { display:block; margin-top:2px; font-size:21px; line-height:1.2; }
.people-progress { margin:10px 14px; padding:10px 13px; border-radius:13px; background:#fff7e7; color:#70532d; font-size:11.5px; line-height:1.4; }
.people-progress b { color:#9a5d17; }
.people-progress.ready { background:#e8f7ef; color:#275f47; }
.people-progress.ready b { color:var(--success); }
.people-conversation { padding:2px 14px 20px; }
.people-conversation label { display:block; margin:14px 2px 7px; color:var(--ink); font-size:13px; font-weight:800; }
.people-conversation select {
  display:block; width:100%; min-height:50px; padding:0 42px 0 14px;
  border:1.5px solid var(--border-soft); border-radius:14px;
  background:#fff; color:var(--ink); font:600 13px/1.4 inherit;
}
.people-conversation select:focus { outline:3px solid rgba(239,106,58,.18); border-color:var(--primary); }
.people-empty { margin-top:14px; padding:18px 15px; border-radius:15px; background:var(--bg-soft); color:var(--muted); font-size:13px; line-height:1.5; text-align:center; }
.people-qgroup { margin:15px 2px 7px; color:var(--primary-dark); font-size:10px; font-weight:900; letter-spacing:.55px; text-transform:uppercase; }
.people-qa { margin-bottom:8px; border:1.5px solid var(--border); border-radius:15px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(64,34,14,.04); }
.people-qa.open { border-color:var(--accent-light); box-shadow:0 5px 16px rgba(239,106,58,.10); }
.people-question { width:100%; display:grid; grid-template-columns:28px 1fr 18px; align-items:center; gap:9px; padding:12px; border:0; background:#fff; color:var(--ink); text-align:left; font-size:12.5px; line-height:1.4; font-weight:800; }
.people-question > b { color:var(--primary); font-size:18px; text-align:center; }
.pq-mark { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--bg-soft); color:var(--faint); font-size:12px; font-weight:900; }
.people-qa.seen .pq-mark { background:#e8f7ef; color:var(--success); }
.people-answer { padding:0 13px 13px 49px; border-top:1px solid var(--border); background:#fffaf7; }
.people-answer.single-answer { margin-top:14px; padding:0 15px 16px; border:1.5px solid var(--accent-light); border-radius:16px; }
.people-answer h2 { margin:12px 0 0; font-size:15px; line-height:1.45; }
.pa-speaker { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:9px; }
.pa-speaker span { color:var(--primary-dark); font-size:10.5px; font-weight:900; }
.pa-speaker button { border:0; border-radius:999px; padding:6px 9px; background:#fff; color:var(--primary-dark); font-size:9.5px; font-weight:800; box-shadow:inset 0 0 0 1px var(--border); }
.pa-speaker button:disabled { color:var(--faint); background:var(--bg-soft); }
.people-answer p { margin:7px 0 0; color:var(--body); font-size:13px; line-height:1.62; }
.people-fact-note { margin:15px 0 4px; padding:10px 12px; border-left:3px solid var(--gold); border-radius:4px 12px 12px 4px; background:#fff8e7; color:#6c5430; font-size:10.5px; line-height:1.5; }
@media (max-width:360px) {
  .people-careers { gap:8px; padding-left:11px; padding-right:11px; }
  .people-career img { height:96px; }
  .people-hero { height:184px; }
  .people-answer { padding-left:13px; }
}

/* ---- video completion ring (owner 27 Aug) ---- */
.vh-ring{position:absolute;top:10px;right:10px;width:44px;height:44px;transform:rotate(-90deg);z-index:6;transition:opacity .6s;pointer-events:none}
.vh-ring circle{fill:none;stroke-width:4.5}
.vr-bg{stroke:rgba(255,255,255,.35)}
.vr-fg{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset .3s linear}

/* ---- challenge per-stage instruction line (owner 27 Aug) ---- */
.chal-help{margin:6px 18px 2px;padding:9px 14px;background:var(--bg-teal);border-radius:12px;font-size:13.5px;font-weight:600;color:var(--body)}

/* ---- RIASEC tap options ---- */
.riasec-opts{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.ri-opt{display:flex;align-items:center;gap:14px;padding:14px 18px;border:2px solid var(--border);border-radius:16px;background:#fff;font-size:26px;font-weight:700}
.ri-opt span{font-size:15.5px;color:var(--ink)}
.ri-opt:active{border-color:var(--primary);background:var(--bg-teal);transform:scale(.98)}

/* ---- global "stop and continue later" pill (owner 27 Aug) ---- */
.break-pill{position:fixed;right:14px;bottom:96px;z-index:200;border:0;border-radius:999px;
  padding:12px 18px;font-size:13.5px;font-weight:800;color:var(--primary-dark);background:#fff;
  box-shadow:0 8px 20px rgba(64,34,14,.22), inset 0 0 0 1.5px var(--border);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.break-pill:active{transform:scale(.96)}

/* ---- RIASEC cartoon slot (icon fallback until images arrive) ---- */
.ri-art{height:190px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.ri-art img{max-height:190px;max-width:100%;border-radius:18px;box-shadow:0 4px 14px rgba(64,34,14,.12)}
.ri-art .ri-emoji{font-size:52px;align-items:center;justify-content:center}

/* ---- report carousel (28 Aug) ---- */
.rep-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
.rep-slide{min-width:100%;scroll-snap-align:center;padding:4px 0;overflow-y:auto}
.rep-dots{justify-content:center;margin:4px 0}
.rep-hint{text-align:center;font-size:11.5px;color:var(--faint);font-weight:700;margin-bottom:2px}
.pc-img img{width:100%;max-height:180px;object-fit:cover;border-radius:16px;margin-bottom:10px}

/* ---- topbar stop + floating stop (28 Aug: never over content) ---- */
.stop-top{border:0;border-radius:999px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:var(--bg-soft);color:var(--primary-dark);box-shadow:inset 0 0 0 1.5px var(--border)}
.stop-top.in-bar{flex:0 0 auto;padding:7px 12px;font-size:12px}
.stop-top.floating{position:absolute;top:14px;right:14px;z-index:50;padding:8px 14px;font-size:12.5px;background:#fff}

/* ---- print / PDF ---- */
.print-head{display:none}
@media print{
  .desk{background:#fff}
  .phone{box-shadow:none;height:auto;max-width:100%}
  .topbar,.stop-top,.audio-bar,.cta-dock,.rep-dots,.rep-hint,.guide-mini,#report-pdf,.eval-fab,.eval-drawer{display:none!important}
  .scroll,.rep-carousel{display:block!important;overflow:visible!important}
  .rep-slide{min-width:auto;page-break-inside:avoid}
  .print-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:3px solid #ef6a3a;margin-bottom:8px}
  .ph-logo{width:44px;height:44px;border-radius:12px;background:#ef6a3a;color:#fff;font-weight:900;font-size:26px;display:flex;align-items:center;justify-content:center}
  .ph-t{font-weight:900;font-size:16px}
  .ph-s{font-size:12.5px;color:#555}
}

/* ---- Healthcare VI 2.0: long-form, chaptered shadowing visit ---- */
.hc-scroll { background:#f7f4ef; }
.hc-head {
  flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 14px 9px;
  background:#fff; border-bottom:1px solid var(--border);
}
.hc-head .back {
  width:34px; height:34px; border:1px solid var(--border); border-radius:12px;
  background:#fff; color:var(--body); font-size:20px; font-weight:900;
}
.hc-head-main { flex:1; min-width:0; }
.hc-eyebrow { font-size:9.5px; font-weight:900; letter-spacing:.65px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hc-progress { height:6px; margin-top:6px; background:var(--track); border-radius:9px; overflow:hidden; }
.hc-progress i { display:block; height:100%; border-radius:9px; background:var(--grad-primary); transition:width .25s ease; }
.hc-pause { border:0; background:#f5eee7; color:#8d4b2d; border-radius:999px; padding:8px 10px; font-size:10px; font-weight:900; }
.hc-media { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#ddd; }
.hc-media > img, .hc-video { width:100%; height:100%; object-fit:cover; display:block; }
.hc-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;padding:3px;background:#fff;aspect-ratio:16/9}
.hc-media-grid.hc-media-2{grid-template-rows:1fr}.hc-media-grid.hc-media-3 figure:first-child{grid-row:1/3}
.hc-media-grid figure{position:relative;min-width:0;min-height:0;margin:0;overflow:hidden;background:#ddd}
.hc-media-grid figure img{width:100%;height:100%;display:block;object-fit:cover}
.hc-media-grid figcaption{position:absolute;left:7px;bottom:7px;max-width:calc(100% - 14px);padding:4px 7px;border-radius:8px;background:rgba(20,28,36,.78);color:#fff;font-size:9px;font-weight:800;line-height:1.15}
.hc-time-left{margin-top:3px;color:var(--primary-dark);font-size:9.5px;font-weight:850;line-height:1.2;white-space:nowrap}
.hc-video { position:absolute; inset:0; z-index:2; background:#111; }
.hc-chapter-card, .hc-question-card, .hc-checkpoint { margin:14px; padding:20px; border-radius:22px; background:#fff; box-shadow:var(--shadow-card); }
.hc-kicker { color:var(--primary-dark); font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; }
.hc-chapter-card h1, .hc-checkpoint h1 { margin:8px 0; font-size:24px; line-height:1.18; }
.hc-chapter-card p, .hc-checkpoint p { color:var(--body); font-size:14px; line-height:1.6; margin:8px 0; }
.hc-safety { margin-top:14px; border-left:4px solid var(--gold); background:#fff8e7; border-radius:4px 14px 14px 4px; padding:10px 12px; color:#6c5430; font-size:12px; line-height:1.5; }
.hc-scene-label { padding:12px 16px 6px; color:var(--ink); font-size:15px; font-weight:900; }
.hc-scene-label span { display:block; color:var(--primary-dark); font-size:9px; letter-spacing:.7px; margin-bottom:3px; }
.hc-speaker { display:flex; gap:10px; align-items:center; margin:8px 14px 0; }
.hc-avatar { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:var(--grad-hero); color:#fff; font-size:12px; font-weight:900; box-shadow:0 0 0 3px #fff,0 3px 10px rgba(0,0,0,.18); }
.hc-speaker b { display:block; font-size:14px; }
.hc-speaker small { display:block; color:var(--muted); font-size:10.5px; margin-top:2px; }
.hc-transcript { margin:10px 14px 18px; background:#fff; border-radius:6px 18px 18px 18px; padding:15px 16px; color:var(--body); font-size:15px; line-height:1.65; box-shadow:var(--shadow-card); }
.hc-question-card h2 { font-size:19px; line-height:1.35; margin:8px 0 4px; }
.hc-question-card > p { color:var(--muted); font-size:12px; margin:0 0 14px; }
.hc-options { display:grid; gap:9px; }
.hc-option { width:100%; text-align:left; border:1.5px solid var(--border-soft); border-radius:14px; background:#fff; color:var(--body); padding:12px 13px; font-size:13px; line-height:1.4; font-weight:700; }
.hc-option.on { border-color:var(--primary); background:#fff1e9; color:#8b3819; box-shadow:0 3px 10px rgba(239,106,58,.11); }
.hc-option.answer-correct{border-color:#22a06b;background:#eaf8f1;color:#176a47;box-shadow:0 3px 10px rgba(34,160,107,.12)}
.hc-option.answer-wrong{border-color:#e35d55;background:#fff0ee;color:#9b332d;box-shadow:0 3px 10px rgba(227,93,85,.12)}
.hc-check { display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; border:1px solid #cfc7bf; border-radius:6px; color:transparent; }
.hc-option.on .hc-check { background:var(--primary); border-color:var(--primary); color:#fff; }
.hc-text { width:100%; min-height:104px; resize:vertical; border:1.5px solid var(--border-soft); border-radius:15px; padding:12px 13px; font:13.5px/1.5 inherit; color:var(--ink); outline:none; }
.hc-text:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(239,106,58,.11); }
.hc-char { text-align:right; color:var(--faint); font-size:10px; margin-top:4px; }
.hc-feedback { margin-top:14px; border-radius:14px; background:#eaf8f1; color:#245b44; padding:12px 13px; font-size:12.5px; line-height:1.55; }
.hc-feedback b { display:block; margin-bottom:3px; color:#19744d; }
.hc-feedback.incorrect{background:#fff3e8;color:#75401e}.hc-feedback.incorrect b{color:#b54b1f}
.people-change-career{width:100%;margin:14px 0 4px;padding:13px 15px;border:1.5px solid var(--primary);border-radius:14px;background:#fff;color:var(--primary-dark);font-size:12.5px;font-weight:850}
.hc-checkpoint { text-align:center; }
.hc-checkmark { margin:0 auto 9px; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#e8f7ef; color:var(--success); font-size:25px; font-weight:900; }
.hc-checkpoint-dock { display:grid; grid-template-columns:1fr 1.25fr; gap:8px; }
.hc-checkpoint-dock .btn-primary, .hc-checkpoint-dock .btn-ghost { font-size:13px; padding:13px 8px; }
@media (max-width:360px) {
  .hc-chapter-card, .hc-question-card, .hc-checkpoint { margin:10px; padding:16px; }
  .hc-transcript { font-size:14px; }
}

/* ---- Healthcare VI rebuild: simple student-first presentation ---- */
.hc-head-actions{display:flex;gap:5px;align-items:center}
.hc-head-actions button,.hc-simple-head button,.ip-switch{border:0;border-radius:999px;padding:7px 9px;background:#f7f3ee;color:var(--primary-dark);font-size:9.5px;font-weight:900;white-space:nowrap}
.hc-head-actions .hc-pause{background:#f5eee7}
.hc-simple-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--border)}
.hc-simple-head span{font-size:10px;font-weight:900;letter-spacing:.6px;color:var(--muted)}
.hc-simple-head .back{width:34px;height:34px;padding:0;font-size:20px}
.hc-intro-hero{position:relative;margin:14px;border-radius:24px;overflow:hidden;min-height:230px;background:#ddd}
.hc-intro-hero img{width:100%;height:230px;object-fit:cover;display:block}
.hc-intro-hero::after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(20,14,10,.88))}
.hc-intro-hero>div{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;color:#fff}
.hc-intro-hero span{font-size:10px;font-weight:900;letter-spacing:.8px}
.hc-intro-hero h1{font-size:24px;line-height:1.2;margin:5px 0 0}
.hc-intro-card{margin:0 14px 18px;padding:18px;border-radius:20px;background:#fff;box-shadow:var(--shadow-card)}
.hc-intro-card h2{font-size:19px;margin:0 0 7px}.hc-intro-card p{font-size:13px;line-height:1.55;color:var(--body)}
.hc-evidence{display:grid;grid-template-columns:1fr;gap:6px;margin:13px 0}.hc-evidence b{font-size:12px}.hc-evidence span{padding:9px 11px;border-radius:11px;background:var(--bg-soft);font-size:11.5px;font-weight:700}.hc-look-for{border-left:3px solid var(--gold);padding-left:11px}
.hc-speaker-live{display:flex;align-items:center;gap:10px;margin:12px 14px 10px;padding:10px 12px;border-radius:18px;background:#fff;box-shadow:var(--shadow-card)}
.hc-speaker-live>img{width:58px;height:58px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:center top;border:3px solid #fff;box-shadow:0 0 0 2px var(--primary)}
.hc-speaker-meta{min-width:0;flex:1}.hc-speaker-meta b{display:block;font-size:14px}.hc-speaker-meta small{display:block;margin-top:2px;color:var(--muted);font-size:10.5px}
.hc-wave{position:relative;width:190px;max-width:46vw;height:40px;display:flex;flex:0 1 190px;align-items:center;justify-content:space-between;gap:0;padding:6px 11px;border-radius:14px;background:#fff1e9}
.hc-wave:before{content:"";position:absolute;right:100%;top:50%;width:16px;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,var(--primary),#ffb18d)}
.hc-wave i{width:2px;flex:0 0 2px;border-radius:2px;background:linear-gradient(var(--accent-light),var(--primary));transform:scaleY(.42)}
.screen .hc-wave.active i{animation:wavebar .85s ease-in-out infinite!important}.screen .hc-wave.active i:nth-child(2n){animation-delay:.12s!important}.screen .hc-wave.active i:nth-child(3n){animation-delay:.24s!important}
.screen .hc-speaker-live.audio-live>img{animation:speakerLive 1.05s ease-in-out infinite!important}.screen .hc-speaker-live.audio-live{box-shadow:0 0 0 2px rgba(241,91,39,.12),var(--shadow-card)}
@keyframes speakerLive{0%,100%{box-shadow:0 0 0 2px var(--primary),0 0 0 4px rgba(241,91,39,.1)}50%{box-shadow:0 0 0 3px #ff9a70,0 0 0 11px rgba(241,91,39,.18)}}
.btn-primary.audio-gated:disabled{background:#e7e2df!important;color:#aaa!important;box-shadow:none!important}.btn-primary.audio-gated.ready{animation:readyGlow 1.2s ease-in-out 2!important}@keyframes readyGlow{50%{box-shadow:0 0 0 7px rgba(241,91,39,.18),0 10px 22px rgba(241,91,39,.25)}}
.hc-visual-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(120px,.75fr);margin:0 14px 18px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--shadow-card);min-height:240px}
.hc-visual-card>img{width:100%;height:100%;min-height:240px;object-fit:cover}.hc-visual-card>div{display:flex;flex-direction:column;justify-content:center;padding:14px}
.hc-visual-card span{color:var(--primary-dark);font-size:9px;font-weight:900;letter-spacing:.6px}.hc-visual-card h2{font-size:17px;line-height:1.25;margin:6px 0}.hc-visual-card p{margin:0;color:var(--body);font-size:11.5px;line-height:1.5}
.hc-scene-title{padding:13px 18px 2px}.hc-scene-title span{color:var(--primary-dark);font-size:9px;font-weight:900;letter-spacing:.65px}.hc-scene-title h2{font-size:20px;line-height:1.2;margin:5px 0 0}.hc-script-card{display:block;margin:0 14px 18px;min-height:0;overflow:hidden;border-radius:20px;background:#fff;box-shadow:var(--shadow-card)}.hc-script-card p{margin:0;padding:18px 20px;font-size:15px;line-height:1.55;color:var(--body)}
.hc-mode-title,.vi-switch-panel{padding:20px 18px 4px;text-align:center}.hc-mode-title span{color:var(--primary-dark);font-size:10px;font-weight:900;letter-spacing:.7px}.hc-mode-title h1,.vi-switch-panel h1{margin:6px 0;font-size:24px}.hc-mode-title p,.vi-switch-panel>p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.vi-switch-list{display:grid;gap:10px;margin:18px 0}.vi-switch-list button{display:grid;grid-template-columns:52px 1fr;text-align:left;gap:2px 10px;padding:14px;border:1.5px solid var(--border);border-radius:16px;background:#fff;color:var(--ink)}.vi-switch-list button.current{border-color:var(--primary);background:#fff5ef}.vi-switch-list span{grid-row:1/3;align-self:center;color:var(--primary-dark);font-size:11px;font-weight:900}.vi-switch-list b{font-size:14px}.vi-switch-list small{color:var(--muted);font-size:10.5px}.vi-switch-back{width:100%}
.ip-head .ip-switch{margin-left:auto}.vi-intro-note{margin-top:12px;padding:11px;border-radius:13px;background:#fff7e7;color:#6c5430;font-size:12px;line-height:1.5}
.compact-report-hero{margin:8px 14px 4px;padding:18px;border-radius:22px}.report-kicker{font-size:10px;font-weight:900;letter-spacing:.7px;opacity:.85}.report-title{font-size:20px;font-weight:900;line-height:1.25;margin-top:5px}.progress-slide{margin:10px 14px;min-height:calc(100% - 20px)}.progress-slide h3{font-size:19px}.progress-slide .path-card{margin-bottom:10px}.progress-note{font-size:12.5px;line-height:1.5;color:var(--muted)}
@media(max-width:380px){.hc-head{gap:6px;padding-left:9px;padding-right:9px}.hc-head-actions{gap:3px}.hc-head-actions button{font-size:8.5px;padding:7px 6px}.hc-visual-card{grid-template-columns:1fr;min-height:0}.hc-visual-card>img{height:190px;min-height:190px}.hc-visual-card>div{padding:13px}.hc-visual-card p{font-size:11px}.hc-script-card p{padding:15px 16px;font-size:13.5px}}

/* ============================================================
   Career library, the second payment, and the mentor's advice
   (owner, 29 Aug). Built on the existing tokens so the new
   screens sit in the same visual world as the rest of the app.
   ============================================================ */
.lib-scroll{padding:6px 18px 26px}
.lib-status{background:var(--bg-soft);border:1px solid var(--border);border-radius:20px;padding:15px 18px;margin:2px 0 18px}
.lib-status-row{display:flex;align-items:baseline;gap:9px}
.lib-status-n{font-size:31px;font-weight:900;color:var(--primary);line-height:1}
.lib-status-row span:last-child{font-weight:800;color:var(--ink);font-size:14px}
.lib-status-note{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--body)}
.lib-status-note.open{color:var(--success);font-weight:700}

/* Two columns, always. The app draws inside a fixed phone shell, so a
   viewport-width media query here would report the desktop window and pack
   in a third column the shell has no room for. */
.lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lib-tile{position:relative;display:block;width:100%;height:142px;padding:0;overflow:hidden;
  border:0;border-radius:20px;background:#222;text-align:left;box-shadow:var(--shadow-card)}
.lib-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lib-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,14,19,.12) 30%,rgba(12,14,19,.86))}
.lib-copy{position:absolute;left:12px;right:10px;bottom:10px;color:#fff;display:grid;gap:3px}
.lib-copy b{font-size:13.5px;line-height:1.2;font-weight:900;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.lib-copy em{font-size:10.5px;font-style:normal;opacity:.92;font-weight:700;line-height:1.3}
.lib-tick{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--success);color:#fff;font-size:15px;font-weight:900}
.lib-lock{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:rgba(255,255,255,.92);font-size:13px}
.lib-tile.is-locked img{filter:grayscale(.85) brightness(.72)}
.lib-tile.is-locked .lib-copy em{color:var(--gold);opacity:1}
.lib-tile.is-done{outline:2px solid var(--success);outline-offset:-2px}

.lib-upsell{display:block;width:100%;text-align:left;margin:18px 0 4px;padding:18px;border:0;
  border-radius:22px;background:var(--grad-hero);color:#fff;box-shadow:var(--shadow-pop)}
.lib-upsell-k{display:block;font-size:11px;font-weight:900;letter-spacing:.08em;opacity:.9}
.lib-upsell b{display:block;font-size:21px;font-weight:900;margin:5px 0 5px}
.lib-upsell em{display:block;font-size:13px;font-style:normal;line-height:1.5;opacity:.95}
.lib-upsell-cta{display:inline-block;margin-top:11px;font-weight:900;font-size:13px;
  background:rgba(255,255,255,.2);padding:7px 14px;border-radius:99px}

.lib-extra{margin:18px 0 4px;background:var(--bg-teal);border:1px solid var(--bg-teal-2);
  border-radius:20px;padding:16px 18px}
.lib-extra-h{font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--primary-dark);margin-bottom:10px}
.lib-extra-row{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px}
.lib-extra-row:last-child{margin-bottom:0}
.lib-extra-row>span{font-size:19px;line-height:1.2}
.lib-extra-row b{display:block;font-size:14px;font-weight:900;color:var(--ink)}
.lib-extra-row em{display:block;font-size:12.5px;font-style:normal;color:var(--body);line-height:1.5}

.lib-dock{display:grid;gap:8px}
.btn-primary.is-off{background:var(--disabled-bg);color:var(--disabled-text);box-shadow:none}

.pay-hero{text-align:center;padding:16px 18px 6px}
.pay-row-sub{font-size:12.5px;color:var(--body);line-height:1.5;margin-top:2px;font-weight:500}
.pay-price{text-align:center;background:var(--bg-soft);border:1px solid var(--border);
  border-radius:20px;padding:17px;margin:16px 0 12px}
.pay-price-n{font-size:33px;font-weight:900;color:var(--primary);line-height:1}
.pay-price-s{font-size:12.5px;color:var(--muted);margin-top:5px;font-weight:700}

/* The shade needs to reach higher on a short tile, so two lines of title
   still read against a bright photograph. */
.lib-shade{background:linear-gradient(180deg,rgba(12,14,19,.1) 22%,rgba(12,14,19,.9))}

/* ============================================================
   My account + the legal disclosures (owner, 29 Aug).
   ============================================================ */
.acct-head{padding:10px 0 16px}
.acct-head .h1{margin-top:4px}
.acct-card{background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:17px 18px;margin-bottom:14px;box-shadow:var(--shadow-card)}
.acct-card h3{font-size:15px;font-weight:900;color:var(--ink);margin:0 0 10px}
.acct-card label{display:block;font-size:11.5px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:12px 0 5px}
.acct-card label:first-of-type{margin-top:0}
.acct-in{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);
  background:var(--bg-soft);border:1.5px solid var(--border-soft);border-radius:13px;
  padding:11px 13px;outline:none}
.acct-in:focus{border-color:var(--primary);background:#fff}
.acct-row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.acct-why{font-size:12.5px;line-height:1.6;color:var(--body);margin:0 0 4px}
.acct-check{display:flex!important;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:12.5px;line-height:1.55;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--body)}
.acct-check input{width:19px;height:19px;flex-shrink:0;margin-top:1px;accent-color:var(--primary)}
.acct-msg{border-radius:13px;padding:11px 14px;font-size:13.5px;font-weight:700;margin-bottom:13px}
.acct-msg.ok{background:#e8f7ef;color:#1c6b46;border:1px solid #bfe6d1}
.acct-msg.err{background:#fdecec;color:#9b2020;border:1px solid #f6cccc}
.cta-dock-inline{margin:0 0 16px}
.cta-dock-inline .btn-primary{width:100%}
.acct-plan{border:1.5px solid var(--border-soft);border-radius:15px;padding:14px;margin-bottom:11px}
.acct-plan.on{border-color:var(--success);background:#f4fbf7}
.acct-plan-t{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.acct-plan-t b{font-size:15px}
.acct-plan p{font-size:12.5px;line-height:1.55;color:var(--body);margin:6px 0 0}
.acct-pill{font-size:10.5px;font-weight:900;letter-spacing:.05em;padding:3px 9px;border-radius:99px}
.acct-pill.yes{background:#d8f3e5;color:#1c6b46}
.acct-pill.no{background:var(--track);color:var(--muted)}
.acct-plan .btn-primary.sm,.acct-plan .btn-gold.sm{width:100%;margin-top:11px;
  padding:11px 16px;font-size:14.5px}
.acct-locked{font-size:12px;color:var(--faint);font-style:italic;margin-top:9px!important}
.acct-link{display:flex;width:100%;align-items:center;justify-content:space-between;
  background:none;border:0;border-bottom:1px solid var(--border);padding:13px 2px;
  font:inherit;font-size:14.5px;font-weight:700;color:var(--ink);text-align:left}
.acct-link:last-child{border-bottom:0}
.acct-link span{color:var(--faint);font-size:19px;font-weight:400}
.acct-link.danger{color:var(--danger)}
.acct-foot{font-size:12px;line-height:1.6;color:var(--faint);text-align:center;margin:6px 0 10px}
.mono-s{font-family:Consolas,Menlo,monospace;font-size:11.5px}
.legal-body p{font-size:14px;line-height:1.68;color:var(--body);margin:0 0 13px}
.legal-body p:last-child{margin-bottom:0}
.legal-body b{color:var(--ink)}
.legal-body a{color:var(--primary);font-weight:700}
.danger-btn{margin-top:10px;width:100%;color:var(--danger);border-color:var(--danger)}

/* ============================================================
   Staged downloads — the screen shown while a part is fetched
   onto the phone (owner, 29 Aug: behave like an installed app).
   ============================================================ */
.dl-screen{display:flex;align-items:center;justify-content:center;min-height:100%}
.dl-wrap{width:100%;max-width:340px;padding:30px 26px;text-align:center}
.dl-mark{font-size:44px;line-height:1;margin-bottom:16px;
  animation:dl-pulse 2.4s ease-in-out infinite}
@keyframes dl-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.09);opacity:1}}
@media (prefers-reduced-motion:reduce){.dl-mark{animation:none}}
.dl-kicker{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--primary);margin-bottom:7px}
.dl-title{font-size:23px;font-weight:900;color:var(--ink);line-height:1.2;margin-bottom:5px}
.dl-note{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:22px}
.dl-track{height:10px;border-radius:99px;background:var(--track);overflow:hidden;margin-bottom:10px}
.dl-track>i{display:block;height:100%;border-radius:99px;background:var(--grad-primary);
  width:0;transition:width .28s ease}
.dl-nums{display:flex;justify-content:space-between;font-size:13px;font-weight:800;
  color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:24px}
.dl-nums span:last-child{color:var(--muted);font-weight:700}
.dl-why{font-size:12.5px;line-height:1.6;color:var(--faint)}