/* ============================================================
   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 {
  /* 5 Oct 2026 (UI review): the reviewer's palette - one blue scale, one grey scale, three status sets */
  --blue-50:#eef4fd; --blue-100:#dce8fa; --blue-200:#b9d2f5; --blue-300:#8bb4ec; --blue-400:#4a8ae0; --blue-600:#1257b8; --blue-900:#0a2c6b; --blue-950:#071d48;
  --gray-50:#f4f7fa; --gray-100:#ebeff4; --gray-200:#e3e9f0; --gray-300:#d3dbe4; --gray-400:#9aa4b1; --gray-500:#6b7684; --gray-600:#5f6b79; --gray-700:#3f4a57; --gray-900:#16202c;
  --success-text:#157a4b; --success-bg:#e8f6ef; --warning:#f59e0b; --warning-text:#b45309; --warning-bg:#fff4e5;
  --danger-text:#b42318; --danger-bg:#fdecec; --orange-200:#ffc999; --green-200:#a8dcc1; --danger-200:#f3b4ae;
  --primary: #1769D2;            /* the one accent — warm orange */
  --primary-2: #4C8FE6;          /* gradient partner */
  --primary-dark: #0D3B8E;
  --navy-deep: #0b1f3a;          /* warm near-black (name kept) */
  --navy-hero: #0D3B8E;
  --stage-navy: #081628;
  --ink: #16202c;
  --body: #3F4A57;
  --muted: #5F6B7A;
  --faint: #64748B;
  --border: #e3e9f0;
  --border-soft: #d8e0e9;
  --bg-soft: #f4f7fa;
  --bg-teal: #EAF2FD;            /* warm peach tint (name kept) */
  --bg-teal-2: #D3E4FA;
  --track: #e6ecf2;
  --dot-idle: #cfd8e2;
  --disabled-bg: #e4e9ef;
  --disabled-text: #6b7684;   /* 5 Oct 2026 (UI review): was #9aa3ad, too faint to read */
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: 32px;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;
  --accent-light: #9EC3F2;
  --accent-orange: #FF8A1F;
  --success: #1E9E63;
  --warn: #f59e0b;
  --danger: #dc2626;
  --gold: #f5b942;
  --coral: #ff7a63;
  --violet: #7c6cf0;
  --result-grad-end: #0D3B8E;
  --grad-primary: linear-gradient(135deg, #2F7FDC, #1462C8);
  --grad-hero: linear-gradient(160deg, #2F7FDC 0%, #1769D2 50%, #0D3B8E 100%);
  --shadow-card: 0 6px 24px rgba(1, 40, 90, .07);
  --shadow-pop: 0 10px 24px rgba(23, 105, 210, .24);
  /* 2 Oct 2026: UI v2 - the DISHA brand palette */
  --brand-navy: #0D3B8E; --brand-blue: #1769D2; --brand-orange: #FF8A1F; --brand-green: #1E9E63;
  --howto-bg: #F0F6FE; --howto-ink: #33465E; --err: #C8251B; --err-bg: #FDECEA; --err-line: #F2A7A1;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  width:100%; height:100%; overflow:hidden;
  overscroll-behavior:none;   /* a drag must never reach the app around the page */
  font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #E2E8F0;
}
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 } }

/* 15 Sep 2026: inside the app only, the window may scroll by exactly one pixel and is held there,
   so the shell around us never believes the page is stuck at the top. Nothing moves on screen. */
/* height:100% on html and body pins the document; min-height cannot beat the .desk rule
   `height:100svh` either. Both have to be released for the one pixel to exist at all. */
.in-app, .in-app body { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; }
.in-app .desk { height: calc(100svh + 1px); }

/* ---- Desk & phone frame ---- */
.desk {
  display:flex; justify-content:center; align-items:center; height:100svh;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(224, 112, 0,.10), transparent 60%),
    radial-gradient(800px 600px at 110% 110%, rgba(255, 165, 82,.10), transparent 55%),
    linear-gradient(160deg, #EEF2F7, #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(179, 89, 0,.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:none;      /* 14 Sep: a drag must stop at the edge of this box */
  touch-action:pan-y;            /* say plainly that this box pans up and down, nothing else */
  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:700; color:var(--primary); flex:0 0 auto;
  box-shadow:0 4px 12px rgba(47, 127, 220,.16);
}
.auto-next-note{flex:0 0 auto;text-align:center;padding:13px 18px 18px;color:var(--muted);font-size:14px;font-weight:600;background:#fff}
/* 26 Sep 2026: the dock inside the scrolling area (see baseRender) */
.scroll.with-dock{display:flex;flex-direction:column}
.scroll.with-dock>*{flex-shrink:0}
.scroll.with-dock>.cta-dock{margin-top:auto}
.scroll.with-dock>.cta-dock+.auto-next-note,.scroll.with-dock>.cta-dock+.gate-note{margin-top:0}
/* Replay beside Next (owner, 26 Sep 2026) */
.cta-dock.dock-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.cta-dock.dock-row .btn-ghost{flex:0 0 auto;width:auto;margin:0!important;padding:13px 16px;white-space:nowrap}
.cta-dock.dock-row .btn-primary{flex:1 1 auto;width:auto;min-width:0}
.cta-dock.dock-row .gate-note{flex:1 1 100%;margin-top:0}
.vi-select-scroll{padding:8px 22px 24px}.vi-select-title{text-align:center;padding:14px 10px 18px}.vi-select-title h1{font-size:32px;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:#1E293B;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:16px;font-style:normal;font-weight:700;letter-spacing:.08em;color:#FFE3C4}.vi-select-copy b{font-size:26px;line-height:1.05}.vi-select-copy em{font-size:16px;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:32px;font-weight:700}.vi-select-save{text-align:center;color:var(--muted);font-size:16px;font-weight:600;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:12px; font-weight:700; color:var(--muted); flex:0 0 auto; }

/* ---- Mentor avatar video (placeholder) ---- */
@keyframes ringpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(158, 195, 242,.55) } 60% { box-shadow: 0 0 0 9px rgba(158, 195, 242,0) } }
.video-hero {
  margin:18px 0 0; border-radius:20px; overflow:hidden; position:relative;
  background: linear-gradient(160deg, #4a2c1a, #B35900);
  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:12px; font-weight:700; 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:12px; font-weight:700; 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:12px; font-weight:700; 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:12px;
  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:12px; font-weight:700; 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 #C8EBD8;
  animation: fadeup .3s ease both;
}
.guide-mini .mini-pip {
  width:30px; height:30px; border-radius:50%; flex:0 0 auto; font-size:16px;
  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:12px;
}
.guide-mini .mini-txt { flex:1; font-size:12px; font-weight:600; 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(7, 30, 74,.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:16px; 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:12px; font-weight:700; color:var(--primary-dark); letter-spacing:.8px; margin-bottom:4px; text-transform:uppercase; }

/* ---- Headings, common bits ---- */
.pad { padding: 8px 20px 20px; }
.h1 { font-size:26px; font-weight:700; line-height:1.22; margin:12px 0 6px; }
.h2 { font-size:18px; font-weight:700; 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:18px; font-weight:700; 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(91, 155, 232,.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:14px; font-weight:700; 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(158, 195, 242,.35), transparent 70%); }
.hero::after  { width:180px; height:180px; left:-60px; bottom:-80px; background:radial-gradient(circle, rgba(255, 165, 82,.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:700; font-size:22px; color:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.brand-name { font-weight:700; font-size:16px; line-height:1.2; }
.brand-sub { font-size:12px; opacity:.85; }
.hero-h1 { font-size:32px; font-weight:700; margin:24px 0 10px; line-height:1.15; position:relative; }
.hero-sub { font-size:16px; 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:14px; 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(158, 195, 242,.25); color:var(--accent-light);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}

/* ---- 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:700; 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:600; 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(91, 155, 232,.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:16px; font-weight:700;
  transition: all .15s ease;
}
.chip:active { transform: scale(.94); }
.chip.on {
  background: var(--grad-primary); color:#fff;
  box-shadow: 0 6px 16px rgba(91, 155, 232,.35);
  transform: translateY(-1px);
}

/* ---- Image pairs ---- */
.pair-q { font-size:22px; font-weight:700; text-align:center; margin:8px 0 4px; }
.pair-hint { font-size:14px; color:var(--faint); text-align:center; margin-bottom:8px; font-weight:600; }
.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(91, 155, 232,.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, #FFE3C4); }
.tint-2 { background: linear-gradient(150deg, #ece9fd, #ddd8f8); }
.tint-3 { background: linear-gradient(150deg, var(--warning-bg), var(--orange-200)); }
.tint-4 { background: linear-gradient(150deg, #F0F6FE, #E3EEFC); }
.tint-5 { background: linear-gradient(150deg, #EAF7F0, #C8EBD8); }
.pair-img .ph-tag {
  position:absolute; top:10px; left:10px; font-size:12px; font-weight:700;
  letter-spacing:.6px; color:#fff; background:rgba(7, 30, 74,.45);
  padding:4px 8px; border-radius:999px; backdrop-filter: blur(2px);
}
.pair-cap {
  flex:0 0 auto; font-size:12px; 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(91, 155, 232,.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:26px; font-weight:700;
  animation: pop .32s ease both; box-shadow: 0 8px 20px rgba(91, 155, 232,.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(91, 155, 232,.05) 9px 18px),
    linear-gradient(150deg, #F0F6FE, #E3EEFC);
  text-align:left;
}
.slot.empty .slot-prompt {
  font-size:12px; 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:12px; font-weight:700;
  letter-spacing:.5px; color:#fff; background:rgba(7, 30, 74,.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:18px; font-weight:700; 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(91, 155, 232,.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:14px; font-weight:700; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(7, 30, 74,.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(91, 155, 232,.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:700; 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(91, 155, 232,.04) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(91, 155, 232,.04) 34px 35px),
    linear-gradient(180deg, #F0F6FE, #E3EEFC);
  box-shadow: inset 0 0 0 2px var(--border-soft), inset 0 8px 24px rgba(7, 30, 74,.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:32px;
  box-shadow: 0 6px 14px rgba(7, 30, 74,.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:12px; font-weight:700; 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:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 8px rgba(30, 158, 99,.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(158, 195, 242,.3), transparent 70%);
}
.big-count { font-size:52px; font-weight:700; line-height:1; text-shadow: 0 4px 18px rgba(0,0,0,.25); }
.big-count small { font-size:18px; font-weight:700; opacity:.8; }
.style-badge {
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  background:linear-gradient(135deg, rgba(255, 165, 82,.25), rgba(255, 165, 82,.12));
  box-shadow: inset 0 0 0 1.5px rgba(255, 165, 82,.6);
  border-radius:999px; padding:10px 20px; font-weight:700; font-size:18px;
  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:22px; 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:26px;
}
.locked-path .q { filter: blur(5px); font-weight:700; font-size:14px; 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:26px; font-style:normal; font-weight:700; }
.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:18px;
}
.journey-step span { display:block; font-size:12px; font-weight:700; white-space:nowrap; }
.journey-step.done b { background:#EAF7F0; 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:700;
}
.balanced-icon.success { background:#EAF7F0; color:var(--success); font-size:32px; }
.balanced-kicker { color:var(--primary-dark); font-size:12px; font-weight:700; letter-spacing:.85px; }
.balanced-title { margin-top:7px; font-size:22px; font-weight:700; 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:12px; line-height:1.45; font-weight:600; }
.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(10, 44, 107,.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:12px; 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); }
/* 6 Oct 2026: 'still exploring' set apart below the careers */
.int-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--muted);font-size:13px;font-weight:600}
.int-or::before,.int-or::after{content:"";flex:1;height:1px;background:var(--border)}
.int-none{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px dashed #A9C6EE;border-radius:16px;background:#F7FAFF;text-align:left}
.int-none-ic{flex:0 0 40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:20px;box-shadow:inset 0 0 0 1px #CFE0F7}
.int-none .or-lab{flex:1;display:flex;flex-direction:column;gap:2px}.int-none .or-lab b{font-size:15px;color:var(--ink)}.int-none .or-lab small{font-size:13px;color:var(--muted);font-weight:500}
.int-none.on{border-style:solid;border-color:var(--primary);background:#EEF6FF}
html.wide .int-none{max-width:560px;margin:0 auto}
html.wide:not(.wide-nav) .interest-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px}   /* 11 careers in three rows, the option below in view */
html.wide .int-or{margin:12px 0 10px}html.wide .int-none{padding:9px 14px}
.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(91, 155, 232,.11); }
@media (max-width:360px) {
  .interest-thumbs { flex-basis:82px; width:82px; }
  .interest-card { gap:9px; }
  .interest-card .or-lab { font-size:14px; }
}

/* ---- 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(7, 30, 74,.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:700; }
.pay-price small { font-size:14px; color:var(--warn); font-weight:700; }
.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:18px; 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:14px; font-weight:700; 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:12px; font-weight:700; 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:18px; font-weight:700; 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:16px; font-weight:600; 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:14px; font-weight:700; 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:var(--warning-bg); color:#E07000; }
.opt:nth-of-type(4) .key { background:var(--danger-bg); color:var(--danger); }
.opt.on {
  box-shadow: 0 8px 22px rgba(91, 155, 232,.22), inset 0 0 0 2.5px var(--primary);
  background: var(--bg-teal);
}
.opt.on .key { background:var(--grad-primary); color:#fff; }
/* 7 Oct 2026: on a laptop the four answers sit two by two - the question, the answers and the button fit without scrolling */
html.wide .opt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin-bottom:12px}
html.wide .opt-grid .opt{margin:0;padding:12px 14px;min-height:58px}

/* ---- 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:16px; font-weight:600; 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:12px; font-weight:700; 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(91, 155, 232,.3); transform: translateY(-1px);
}
.rstep.done { color:var(--success); background:#EAF7F0; box-shadow: inset 0 0 0 1.5px #C8EBD8; }
.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(7, 30, 74,.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(158, 195, 242,.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:22px; }
.ip-head .t1 { font-size:12px; font-weight:700; letter-spacing:.6px; opacity:.85; }
.ip-head .t2 { font-size:16px; font-weight:700; }
.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:700; 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:22px; margin-top:6px; font-weight:700; }

.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:16px; flex:0 0 auto;
  box-shadow: 0 5px 14px rgba(91, 155, 232,.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:12px; font-weight:700; 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:16px; font-weight:700; 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:12px; font-weight:700; 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:14px; color:var(--body); line-height:1.6; font-weight:600;
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px #C8EBD8;
  animation: fadeup .3s ease both;
}
.outcome-who {
  margin:12px 20px 0; font-size:14px; 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:14px; 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:700; font-size:14px; 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:16px; line-height:1.6; font-weight:600;
  animation: pop .45s ease both .2s;
  box-shadow: 0 12px 30px rgba(7, 30, 74,.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(255, 165, 82,.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:12px; font-weight:700; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(7, 30, 74,.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(91, 155, 232,.05) 9px 18px),
    var(--bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--border-soft);
  font-size:12px; color:var(--muted); line-height:1.5; font-weight:600;
}
.ph-img .ph-t {
  display:inline-block; font-size:12px; font-weight:700; 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:12px; 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:12px; font-weight:700; 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:12px; 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:12px;
  display:flex; align-items:center; justify-content:center;
}
.img-say b { font-style:normal; color:var(--primary-dark); }
.img-say .atag { font-size:12px; font-weight:700; 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:14px; font-weight:700; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(7, 30, 74,.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(7, 30, 74,.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(158, 195, 242,.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:18px; 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(91, 155, 232,.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:18px; 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:32px;
  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(158, 195, 242,.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:16px; font-weight:700; }
.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(91, 155, 232,.15);
}
.path-rank { font-size:12px; font-weight:700; color:var(--primary-dark); letter-spacing:.6px; }
.path-card.top .path-rank::before { content:'⭐ '; }
.path-name { font-size:18px; font-weight:700; margin:3px 0 5px; }
.fact-tag {
  display:inline-block; font-size:12px; font-weight:700; 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:12px; color:var(--muted); font-weight:700; }

/* ---- 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:#E3EEFC; 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:12px; line-height:1.55;
}
.eval-drawer h4 { margin:12px 0 4px; font-size:12px; 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:12px; }
.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:#C9DDF8; font-size:12px; border-radius:9px; padding:5px 10px; font-weight:700;
}
.api-pill {
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 11px;
  background:rgba(158, 195, 242,.15); box-shadow: inset 0 0 0 1px rgba(158, 195, 242,.45);
  color:var(--accent-light); font-weight:700; font-size:12px;
}

/* ---- 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:12px; color:var(--muted); line-height:1.55; font-weight:600;
  background:var(--warning-bg); border-radius:13px; padding:10px 13px;
  box-shadow: inset 0 0 0 1.5px #FFE3C4;
}
.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(7, 30, 74,.3);
}
.offer-card::after {
  content:''; position:absolute; width:170px; height:170px; right:-60px; top:-70px;
  border-radius:50%; background:radial-gradient(circle, rgba(255, 165, 82,.3), transparent 70%);
}
.offer-card h3 { margin:0 0 7px; font-size:18px; font-weight:700; position:relative; }
.offer-card p { font-size:14px; opacity:.93; line-height:1.6; margin:0 0 14px; font-weight:600; position:relative; }
/* 3 Oct 2026: a base style for every gold button - it was only styled inside offer cards, the account plan and
   the extension cards, so elsewhere (the report, the upgrade page) it showed as a bare grey browser button */
.btn-gold{display:block;width:100%;border:0;border-radius:999px;background:linear-gradient(135deg,#0D3B8E,#1769D2);color:#fff;
  font:inherit;font-size:16px;font-weight:700;padding:15px 18px;cursor:pointer;box-shadow:0 8px 20px rgba(13,59,142,.25)}
.btn-gold:active{transform:scale(.97)}
.offer-card .btn-gold {
  width:100%; border:0; border-radius:15px; padding:14px; font-size:16px; font-weight:700;
  background:linear-gradient(135deg, #FFC285, var(--gold)); color:var(--stage-navy);
  box-shadow: 0 8px 20px rgba(255, 165, 82,.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:12px; 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:12px; color:#C9DDF8; font-weight:700; }

/* ---- 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:600; 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:14px; font-weight:700;
}
.rank-item.placed .rank-badge { background: var(--primary); color:#fff; }
.rank-emoji { font-size:22px; }
.rank-label { flex:1; line-height:1.35; }
.rank-reset {
  border:0; background:none; color:var(--muted); font-family:inherit;
  font-size:12px; font-weight:700; 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:16px; font-weight:700; 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(7, 30, 74,.3); }
.rec-dot {
  width:11px; height:11px; border-radius:50%; background:#fff; display:inline-block;
}
.rec-dot.blink { animation: recblink 1s infinite; background:var(--danger); }
@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:14px; font-weight:700; 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:#C8EBD8; background:#EAF7F0; color:#167A4C; }
.voice-privacy {
  margin-top:14px; font-size:12px; font-weight:600; 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:12px; font-weight:700; 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:14px; font-weight:600; 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:18px;
}
.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:700; font-size:16px; }

.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:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 10px rgba(91, 155, 232,.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:14px; font-weight:600; }
.ev-card .or-tick { margin-left:auto; font-size:12px; font-weight:700; 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:14px; 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:14px; font-weight:600; color:var(--ink);
  font-variant-numeric: tabular-nums;
}
.budget-bar.over { background:var(--danger-bg); border-color:var(--danger-200); color:var(--danger-text); }
.opt-row .or-cost { flex:0 0 auto; font-weight:700; 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:14px; 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:14px;
  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, #5B9BE8); color: #fff; font-size:26px; font-weight:700;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(10, 44, 107,.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) ---- */
/* 2 Oct 2026: the question block is centred by auto margins, not justify-content. Since the dock scrolls with
   the page (26 Sep) it pushed the block to the top; now the block sits in the free space above the buttons
   (a little above the middle) - and when it is taller than the screen it starts at the top and scrolls,
   instead of losing its top edge the way justify-content:center does. */
.basics-center { display: flex; flex-direction: column; justify-content: flex-start; padding: 0 22px; }
.basics-center > .bq { margin-top: auto; margin-bottom: auto; }
.bq { text-align: center; }
.bq-ic { font-size:46px; }
.bq-q { font-size:22px; font-weight:700; 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:18px; text-align: center;
  border: 2px solid var(--border); border-radius: 14px; font-family: inherit;
}
.bq input[type="text"]:focus { border-color: var(--primary, #5B9BE8); outline: none; }
.bq .opt-rows { text-align: left; }

/* ---- Progress Report skill-level badges (rev 3 stage 2) ---- */
.lv-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.3px}
.lv-strong{background:#EAF7F0;color:#167A4C}
.lv-grow{background:var(--warning-bg);color:#B35900}
.lv-build{background:var(--warning-bg);color:var(--warning-text)}

/* ---- 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 #5B9BE8}
.vc-name{font-weight:700;font-size:16px}
.vc-role{font-size:12px;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:14px;font-weight:600;box-shadow:0 1px 6px rgba(0,0,0,.05)}
.vi-lines li::before{content:'•  ';color:#5B9BE8;font-weight:700}
@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:12px;font-weight:600;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:12px; font-weight:700; letter-spacing:.8px; }
.people-intro h1 { margin:7px 0 6px; font-size:26px; line-height:1.2; }
.people-intro p { margin:0 auto; max-width:360px; color:var(--muted); font-size:14px; line-height:1.55; }
.people-rule-top{margin-top:2px}
.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:600; }
.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:12px; 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:12px; font-weight:700; box-shadow:inset 0 0 0 1.5px var(--border); }
.people-mute { background:#EAF7F0; color:#167A4C; }
.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:#CBD5E1; 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:600; opacity:.88; }
.people-hero b { display:block; margin-top:2px; font-size:22px; line-height:1.2; }
.people-progress { margin:10px 14px; padding:10px 13px; border-radius:13px; background:#fff7e7; color:#70532d; font-size:12px; line-height:1.4; }
.people-progress b { color:#B35900; }
.people-progress.ready { background:#EAF7F0; color:#0F5735; }
.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:14px; font-weight:700; }
.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(91, 155, 232,.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:14px; line-height:1.5; text-align:center; }
.people-qgroup { margin:15px 2px 7px; color:var(--primary-dark); font-size:12px; font-weight:700; 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(10, 44, 107,.04); }
.people-qa.open { border-color:var(--accent-light); box-shadow:0 5px 16px rgba(91, 155, 232,.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:12px; line-height:1.4; font-weight:700; }
.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:700; }
.people-qa.seen .pq-mark { background:#EAF7F0; color:var(--success); }
.people-answer { padding:0 13px 13px 49px; border-top:1px solid var(--border); background:#F0F6FE; }
.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:16px; 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:12px; font-weight:700; }
.pa-speaker button { border:0; border-radius:999px; padding:6px 9px; background:#fff; color:var(--primary-dark); font-size:12px; font-weight:700; 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:14px; 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:12px; 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) ---- */
.cc-row{display:flex;gap:8px;align-items:stretch}
.cc-row .cc-pick{flex:0 0 40%;max-width:190px;font:inherit;padding:12px 8px;border-radius:12px;border:1.5px solid var(--gray-100);background:#fff;color:inherit}
.cc-row input{flex:1 1 auto;min-width:0}
.vh-sound{position:absolute;left:10px;bottom:10px;z-index:7;border:0;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700;background:rgba(15, 23, 42,.62);color:#fff;backdrop-filter:blur(3px);cursor:pointer}
.vh-sound:active{transform:scale(.96)}
.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:14px;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:600}
.ri-opt span{font-size:16px;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:14px;font-weight:700;color:var(--primary-dark);background:#fff;
  box-shadow:0 8px 20px rgba(10, 44, 107,.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(10, 44, 107,.12)}
.ri-art .ri-emoji{font-size:52px;align-items:center;justify-content:center}

/* ---- report carousel (28 Aug) ---- */
.rep-say{margin:0 18px 8px;padding:11px 14px;border-radius:14px;background:#F0F6FE;border:1px solid #FFE3C4;color:#4a3a30;font-size:14px;line-height:1.5;font-weight:600;max-height:30vh;overflow-y:auto;overscroll-behavior:contain}
.rep-say p{margin:0 0 7px}
.rep-say p:last-child{margin:0}
/* 14 Sep 2026: the mentor's script is a card of its own, so it reads at full size */
.say-body{font-size:16px;line-height:1.55;color:#4a3a30}
.say-body p{margin:0 0 10px}
.say-body p:last-child{margin:0}
.free-head-line{font-size:16px;font-weight:700;line-height:1.3;margin-top:3px}
.free-speak{align-items:flex-start}
.free-speak .free-face{width:52px;height:52px}
/* 14 Sep 2026: the speaker switch inside an internship bar, sized like its neighbours */
.hc-head-actions .hc-mute{font-size:16px;line-height:1;padding:6px 9px}
.rep-count{text-align:center;font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--faint);margin:0 0 2px}
.rep-say[hidden]{display:none}
.rep-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0;overscroll-behavior-x:contain;overscroll-behavior-y:auto}
/* 10 Oct 2026 (owner: scrolling felt difficult): overscroll-behavior:none kept an up-or-down scroll that started on a card from reaching the page - only sideways stays inside the row of cards */
.rep-slide{min-width:100%;scroll-snap-align:center;padding:4px 0;overflow-y:auto;overscroll-behavior:contain}
/* 14 Sep 2026: a short opening or closing card sits in the middle of its own space, not stranded at the top */
/* 14 Sep 2026: a card fills the height it is given, and not a pixel more. 100% here is the slide minus
   its 8px of padding, and 30px is the card's own top and bottom margin - so a short card reaches the
   bottom with no scroll that is not really there, and a long one keeps its height and the slide
   scrolls it. Done with min-height, not flex: a flex item that cannot shrink kept a stale height when
   the swipe hint appeared and shortened the row. */
.rep-slide > .report-card{min-height:calc(100% - 30px)}
.rep-dots{justify-content:center;margin:4px 0}
.rep-hint{text-align:center;font-size:12px;color:var(--faint);font-weight:600;margin-bottom:2px}
/* 26 Sep 2026: the progress page's foot in one line, a slimmer dock and hero, a shorter caption box */
.rep-foot{display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;padding:2px 0}
.rep-foot .dots{padding:0;margin:0}
.rep-foot .rep-count,.rep-foot .rep-hint{margin:0;font-size:12px;color:var(--faint);font-weight:600}
.cta-dock.slim{padding:8px 20px calc(10px + env(safe-area-inset-bottom))}
.cta-dock.slim .btn-primary{padding:14px}
.compact-report-hero.compact-report-hero{padding:18px 16px 12px;flex:0 0 auto}   /* 3 Oct 2026: 18px - the floating row above is now the top bar */   /* the floating Stop / sound / language row sits on top; flex 0 0 auto: overflow:hidden let the column squeeze it and clip the title */
.compact-report-hero .report-title{font-size:16px;line-height:1.25;margin-top:2px}
/* 3 Oct 2026: the Clarity report header must not be squeezed either - the column shrank it and its overflow:hidden
   cut off its bottom, the Printable report button */
.report-hero{flex:0 0 auto}
/* 3 Oct 2026: Clarity report - badge and Printable report on one row, the two outline buttons side by side,
   so a short phone still shows the cards; a mouse drag across the dock no longer selects its buttons */
.rep-hero-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.rep-hero-row .style-badge{margin:0;padding:8px 16px;font-size:16px}
.report-hero .rep-print{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0 0 0 auto;padding:9px 14px;
  border:0;background:#fff;color:var(--primary);font-size:13px;position:relative;z-index:1}
.rep-dock-row{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.rep-dock-row .btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;font-size:15px;
  border:1.5px solid var(--primary);color:var(--primary);background:#fff}
.rep-dock-row .rep-ic{width:20px;height:20px;flex:0 0 20px}
.rep-dock-row button > span{pointer-events:none}
.rep-dock-row button > svg{pointer-events:none}
/* 11 Oct 2026 (school pilot, computer lab): the school sign-in - a narrower form on a laptop, the code from the school's
   link shown as fixed text with a quiet Change; Assessment complete - the parents' button on two clean lines */
html.wide:not(.wide-nav) #app>.screen.sl-screen{width:min(560px,calc(100% - 48px))!important}
.sl-code-fixed{display:flex;align-items:center;gap:10px;margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:#F5F8FC;border:1px solid #E6ECF3;font-size:14px;color:#667085}
.sl-code-fixed b{font-size:16px;color:#0D3B8E;letter-spacing:.04em}
.sl-code-fixed button{margin-left:auto;border:0;background:none;color:#1769D2;font:inherit;font-weight:600;cursor:pointer;padding:4px 6px}
.sd-parent{display:flex!important;flex-direction:column;align-items:center;gap:1px;line-height:1.3;height:auto!important;padding-top:10px!important;padding-bottom:10px!important}
.sd-parent small{font-size:12px;font-weight:500;color:#667085}
/* 10 Oct 2026 (owner: "this section is confusing"): a pager under the cards - ‹ and ›, "Part 1 of 11" and the part's name,
   a progress line; the ways out under their own label, side by side and quieter than the pager */
.rep-carousel{scrollbar-width:none}.rep-carousel::-webkit-scrollbar{display:none}
.rep-pager{display:flex!important;align-items:center;gap:10px;margin:10px 16px 0;padding:10px 12px;background:#fff;border:1px solid #E6ECF3;border-radius:14px}
.rep-nav{flex:0 0 40px;width:40px;height:40px;border-radius:50%;border:0;background:#1769D2;color:#fff;font-size:24px;line-height:1;font-weight:700;
  display:grid;place-items:center;padding:0 0 3px;cursor:pointer}
.rep-nav:disabled{background:#EEF1F5;color:#B4BFCC;cursor:default}
.rep-pg-mid{flex:1;min-width:0;text-align:center}
.rep-pager .rep-count{display:block;font-size:12px!important;font-weight:600;color:#667085!important}
.rep-pg-t{display:block;font-size:14.5px;font-weight:700;color:#0D3B8E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.rep-pager .rep-dots{display:flex;gap:3px;margin:7px 0 0!important}
.rep-pager .rep-dots i{flex:1;height:4px;width:auto!important;border-radius:4px;background:#E3EAF4;margin:0!important}
.rep-pager .rep-dots i.on,.rep-pager .rep-dots i.now{background:#1769D2}
.rep-done-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#667085;text-align:center;margin:4px 0 0}
html:not(.wide) .rdoc .rep-dock-row{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
html:not(.wide) .rdoc .rep-dock-row .btn-ghost{padding:10px 8px!important;font-size:14px!important;min-height:44px;border-width:1.5px}
html.wide .rep-done-k,html.wide .rep-pager{display:none!important}
/* 3 Oct 2026: the report cards in the brand colours - a numbered navy heading, a blue-to-orange stripe,
   key words in blue, the counts in orange, skill levels colour-coded, notices and evidence in tinted boxes */
.rep-page .rep-carousel{counter-reset:repcard}
.rep-page .rep-slide{counter-increment:repcard}
.rep-page .report-card{position:relative;overflow:hidden;padding-top:21px;
  background:linear-gradient(90deg,#1769D2,#2F7FDC 55%,#FF8A1F) top/100% 4px no-repeat,#fff}
.rep-page .report-card h3{display:flex;align-items:center;gap:10px;font-size:18px;color:#0D3B8E;margin:0 0 12px}
.rep-page .report-card h3::before{content:counter(repcard);flex:0 0 28px;width:28px;height:28px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0D3B8E,#1769D2);color:#fff;
  font-size:14px;font-weight:700;box-shadow:0 4px 10px rgba(13,59,142,.22)}
.rep-page .report-card p b,.rep-page .readback-choice b{color:#0D3B8E}
.rep-page .report-card b.rep-num{display:inline-block;padding:0 7px;border-radius:7px;background:#FFF1E3;color:#C2410C;font-weight:800}
.rep-page .hc-evidence{padding:12px 14px;border-radius:14px;background:#FFF6EC;border:1px solid #FFD9B3;border-left:4px solid #FF8A1F}
.rep-page .hc-evidence b{color:#B45309;font-size:13px}
.rep-page .hc-evidence span{background:transparent;padding:0;color:#5b4636;font-size:13px}
.rep-page .hc-evidence .btn-ghost{border:1.5px solid var(--primary);color:var(--primary);background:#fff;padding:11px}
.rep-page .rep-trait{margin:12px 0 0;padding:11px 13px;border-radius:12px;background:#F0F6FE;border-left:3px solid #1769D2}
.rep-page .free-ev{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#F0F6FE;border-left:3px solid #1769D2;color:#0D3B8E;font-weight:600}
.rep-page .meter-row span:first-child{color:var(--ink)}
.rep-page b.rep-lv{color:#1E9E63}
.rep-page b.rep-lv[data-lv="Growing"]{color:#D97706}
.rep-page b.rep-lv[data-lv="To build"]{color:#DC2626}
.rep-page .improve-card>b{color:#0D3B8E}
.rep-page .mw-world,.rep-page .mw-career>b,.rep-page .path-name{color:#0D3B8E}
.rep-page .improve-why{color:#C2410C;font-weight:600}
.cta-dock{-webkit-user-select:none;user-select:none}
/* 3 Oct 2026: the report scrolls as one page under the top bar; each card keeps its natural height */
.rep-page .rep-carousel{flex:0 0 auto;align-items:flex-start;overflow-y:hidden;transition:height .25s ease}
.rep-page .rep-slide{overflow:visible}
.rep-page .rep-slide > .report-card{min-height:0}
.rep-page .rep-say{flex:0 0 auto}
/* 3 Oct 2026: the gold trophy from the DISHA app's Future Leaders Lab, in place of the trophy emoji */
.report-hero::before{content:'';width:50px;height:50px;right:16px;top:14px;border-radius:50%;animation:none;
  background:rgba(37,99,235,.38) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><defs><linearGradient id='g' x1='22' y1='18' x2='112' y2='104' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23fff176'/><stop offset='.38' stop-color='%23FF8A1F'/><stop offset='.72' stop-color='%23D97706'/><stop offset='1' stop-color='%23b45309'/></linearGradient><linearGradient id='b' x1='42' y1='92' x2='98' y2='126' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%239f5b35'/><stop offset='1' stop-color='%235b2f22'/></linearGradient><filter id='s' x='-20%25' y='-20%25' width='140%25' height='150%25'><feDropShadow dx='0' dy='10' stdDeviation='8' flood-color='%23000' flood-opacity='.22'/></filter></defs><g filter='url(%23s)'><path d='M41 31H24c-9 0-15 7-15 16 0 18 13 32 31 34l4-12c-14-1-23-10-23-22 0-3 2-5 5-5h15V31Z' fill='none' stroke='%23FF8A1F' stroke-width='8' stroke-linecap='round'/><path d='M99 31h17c9 0 15 7 15 16 0 18-13 32-31 34l-4-12c14-1 23-10 23-22 0-3-2-5-5-5H99V31Z' fill='none' stroke='%23FF8A1F' stroke-width='8' stroke-linecap='round'/><path d='M39 24h62v29c0 21-12 38-31 38S39 74 39 53V24Z' fill='url(%23g)'/><path d='M54 91h32l5 23H49l5-23Z' fill='%237c3f27'/><path d='M39 116h62l7 14H32l7-14Z' fill='url(%23b)'/><rect x='54' y='105' width='32' height='11' rx='2' fill='%23f8c35b'/><path d='M51 27h16c-1 24-7 39-20 48-5-7-8-15-8-25V27h12Z' fill='rgba(255,255,255,.28)'/></g></svg>") center/36px no-repeat}
.report-hero > div:not([class]),.report-hero > .report-title{padding-right:58px}   /* the label and title lines keep clear of the trophy in the corner (badges and buttons untouched) */
.rep-say{max-height:22vh}
.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:700;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:12px;background:#fff}
/* 18 Sep 2026: the speaker button floats on pages without a top bar; when Stop floats there too, it sits to its left */
.stop-top.floating.cap{opacity:.85;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.stop-top.floating.beside-stop{right:92px}

/* ---- 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-count,.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 #5B9BE8;margin-bottom:8px}
  .ph-logo{width:44px;height:44px;border-radius:12px;background:#5B9BE8;color:#fff;font-weight:700;font-size:26px;display:flex;align-items:center;justify-content:center}
  .ph-t{font-weight:700;font-size:16px}
  .ph-s{font-size:12px;color:#475569}
}

/* ---- Healthcare VI 2.0: long-form, chaptered shadowing visit ---- */
.hc-scroll { background:#EEF2F7; }
.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:22px; font-weight:700;
}
/* 18 Sep 2026 (owner circled this bar in a photograph): the title, the progress and FOUR buttons
   were fighting for one row on a phone. The sector came out as "MEDIA & ..." and the progress as
   "9 of 20 · About 1...", so the two things a child actually needs - where am I, and how much is
   left - were the two things cut off. Now the bar is two rows: the scene and the progress get the
   full width on top, and the buttons sit underneath on their own line, sliding sideways if there
   are too many. Nothing is hidden and nothing is truncated. */
.hc-head { flex-wrap:wrap; }
.hc-head-main { flex:1 1 auto; min-width:0; }
.hc-head-actions { flex:1 0 100%; margin-top:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
                   padding-bottom:2px; scrollbar-width:none; }
.hc-head-actions::-webkit-scrollbar { display:none; }
.hc-eyebrow { font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--muted);
              white-space:normal; overflow:visible; }
.hc-time-left { white-space:normal; }
.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:var(--gray-50); color:#B35900; border-radius:999px; padding:8px 10px; font-size:12px; font-weight:700; }
.hc-media { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#CBD5E1; }
.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:#CBD5E1}
.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:12px;font-weight:700;line-height:1.15}
.hc-time-left{margin-top:3px;color:var(--primary-dark);font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}
.hc-video { position:absolute; inset:0; z-index:2; background:#0F172A; }
.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:12px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.hc-chapter-card h1, .hc-checkpoint h1 { margin:8px 0; font-size:26px; 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:16px; font-weight:700; }
.hc-scene-label span { display:block; color:var(--primary-dark); font-size:12px; 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:700; 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:12px; 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:16px; line-height:1.65; box-shadow:var(--shadow-card); }
.hc-question-card h2 { font-size:18px; 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:14px; line-height:1.4; font-weight:600; }
.hc-option.on { border-color:var(--primary); background:#F0F6FE; color:#B35900; box-shadow:0 3px 10px rgba(91, 155, 232,.11); }
.hc-option.answer-correct{border-color:#1E9E63;background:#EAF7F0;color:#167A4C;box-shadow:0 3px 10px rgba(30, 158, 99,.12)}
.hc-option.answer-wrong{border-color:var(--danger);background:var(--danger-bg);color:var(--danger-text);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 #CBD5E1; 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(91, 155, 232,.11); }
.hc-char { text-align:right; color:var(--faint); font-size:12px; margin-top:4px; }
.hc-feedback { margin-top:14px; border-radius:14px; background:#EAF7F0; color:#0F5735; padding:12px 13px; font-size:12px; line-height:1.55; }
.hc-feedback b { display:block; margin-bottom:3px; color:#167A4C; }
.hc-feedback.incorrect{background:var(--warning-bg);color:#B35900}.hc-feedback.incorrect b{color:#B35900}
.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:12px;font-weight:700}
.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:#EAF7F0; color:var(--success); font-size:26px; font-weight:700; }
.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:14px; 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:12px;font-weight:700;white-space:nowrap}
.hc-head-actions .hc-pause{background:var(--gray-50)}
.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:12px;font-weight:700;letter-spacing:.6px;color:var(--muted)}
.hc-simple-head .back{width:34px;height:34px;padding:0;font-size:22px}
.hc-intro-hero{position:relative;margin:14px;border-radius:24px;overflow:hidden;min-height:230px;background:#CBD5E1}
.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:12px;font-weight:700;letter-spacing:.8px}
.hc-intro-hero h1{font-size:26px;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:18px;margin:0 0 7px}.hc-intro-card p{font-size:14px;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:12px;font-weight:600}.hc-look-for{border-left:3px solid var(--gold);padding-left:11px}
/* the pause button on the voice bar (owner, 13 Sep 2026) */
.voice-btn{flex:0 0 auto;width:40px;height:40px;margin-left:8px;border:0;border-radius:50%;cursor:pointer;background:var(--accent-light,#ffe4d6);color:var(--primary,#2F7FDC);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.voice-btn:active{transform:scale(.94)}
.voice-btn.playing{background:var(--primary,#2F7FDC);color:#fff}
.voice-btn:focus-visible{outline:3px solid var(--primary,#2F7FDC);outline-offset:2px}
.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)}
/* 26 Sep 2026 (tester): with the pause button beside the wave the name was squeezed into a one-word column;
   the name keeps its room and the wave gives way */
.hc-speaker-meta{min-width:96px;flex:1 1 auto}.hc-speaker-meta b{display:block;font-size:14px;line-height:1.25}.hc-speaker-meta small{display:block;margin-top:2px;color:var(--muted);font-size:12px;white-space:nowrap}
.hc-wave{position:relative;width:190px;max-width:46vw;height:40px;display:flex;flex:1 1 90px;min-width:64px;align-items:center;justify-content:space-between;gap:0;padding:6px 11px;border-radius:14px;background:#F0F6FE;overflow:hidden}
.hc-wave:before{content:"";position:absolute;right:100%;top:50%;width:16px;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,var(--primary),#FFA552)}
.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(47, 127, 220,.12),var(--shadow-card)}
@keyframes speakerLive{0%,100%{box-shadow:0 0 0 2px var(--primary),0 0 0 4px rgba(47, 127, 220,.1)}50%{box-shadow:0 0 0 3px #FFA552,0 0 0 11px rgba(47, 127, 220,.18)}}
.btn-primary.audio-gated:disabled{background:#E2E8F0!important;color:#64748B!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(47, 127, 220,.18),0 10px 22px rgba(47, 127, 220,.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:12px;font-weight:700;letter-spacing:.6px}.hc-visual-card h2{font-size:18px;line-height:1.25;margin:6px 0}.hc-visual-card p{margin:0;color:var(--body);font-size:12px;line-height:1.5}
.hc-scene-title{padding:13px 18px 2px}.hc-scene-title span{color:var(--primary-dark);font-size:12px;font-weight:700;letter-spacing:.65px}.hc-scene-title h2{font-size:22px;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:16px;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:12px;font-weight:700;letter-spacing:.7px}.hc-mode-title h1,.vi-switch-panel h1{margin:6px 0;font-size:26px}.hc-mode-title p,.vi-switch-panel>p{margin:0;color:var(--muted);font-size:14px;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:12px;font-weight:700}.vi-switch-list b{font-size:14px}.vi-switch-list small{color:var(--muted);font-size:12px}.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:12px;font-weight:700;letter-spacing:.7px;opacity:.85}.report-title{font-size:22px;font-weight:700;line-height:1.25;margin-top:5px}.progress-slide{margin:10px 14px;min-height:calc(100% - 20px)}.progress-slide h3{font-size:18px}.progress-slide .path-card{margin-bottom:10px}.progress-note{font-size:12px;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:4px}.hc-head-actions button{font-size:12px;padding:7px 10px}.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:12px}.hc-script-card p{padding:15px 16px;font-size:14px}}

/* ============================================================
   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:32px;font-weight:700;color:var(--primary);line-height:1}
.lib-status-row span:last-child{font-weight:700;color:var(--ink);font-size:14px}
.lib-status-note{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--body)}
.lib-status-note.open{color:var(--success);font-weight:600}

/* 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:#1E293B;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:14px;line-height:1.2;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.lib-copy em{font-size:12px;font-style:normal;opacity:.92;font-weight:600;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:16px;font-weight:700}
.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:14px}
.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:12px;font-weight:700;letter-spacing:.08em;opacity:.9}
.lib-upsell b{display:block;font-size:22px;font-weight:700;margin:5px 0 5px}
.lib-upsell em{display:block;font-size:14px;font-style:normal;line-height:1.5;opacity:.95}
.lib-upsell-cta{display:inline-block;margin-top:11px;font-weight:700;font-size:14px;
  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:12px;font-weight:700;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:18px;line-height:1.2}
.lib-extra-row b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.lib-extra-row em{display:block;font-size:12px;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:12px;color:var(--body);line-height:1.5;margin-top:2px;font-weight:400}
.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:700;color:var(--primary);line-height:1}
.pay-price-s{font-size:12px;color:var(--muted);margin-top:5px;font-weight:600}

/* 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:16px;font-weight:700;color:var(--ink);margin:0 0 10px}
.acct-card label{display:block;font-size:12px;font-weight:700;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:16px;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:12px;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:12px;line-height:1.55;font-weight:400;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:14px;font-weight:600;margin-bottom:13px}
.acct-msg.ok{background:#EAF7F0;color:#167A4C;border:1px solid #C8EBD8}
.acct-msg.err{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger-bg)}
.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:#EAF7F0}
.acct-plan-t{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.acct-plan-t b{font-size:16px}
.acct-plan p{font-size:12px;line-height:1.55;color:var(--body);margin:6px 0 0}
.acct-pill{font-size:12px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:99px}
.acct-pill.yes{background:#EAF7F0;color:#167A4C}
.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:14px}
.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:14px;font-weight:600;color:var(--ink);text-align:left}
.acct-link:last-child{border-bottom:0}
.acct-link span{color:var(--faint);font-size:18px;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}
/* 3 Oct 2026: My account - a profile header, five labelled groups (details, plan, reports, this device, help and
   legal), one main button per group, blue outlines for the rest, and one compact card for the device actions */
.acct-profile{display:flex;align-items:center;gap:14px;padding:8px 2px 2px}
.acct-avatar{width:58px;height:58px;flex:0 0 58px;border-radius:50%;background:var(--grad-primary);color:#fff;font-size:24px;
  font-weight:var(--fw-bold,700);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(23,105,210,.25)}
.acct-who{min-width:0}
.acct-who b{display:block;font-size:var(--fs-xl,22px);font-weight:var(--fw-bold,700);color:var(--ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-who small{display:block;font-size:var(--fs-sm,14px);color:var(--muted);margin-top:3px}
.acct-badge{display:inline-block;margin-top:7px;padding:3px 10px;border-radius:99px;background:var(--bg-teal);color:var(--primary);
  font-size:var(--fs-xs,12px);font-weight:var(--fw-bold,700)}
.acct-backlink{display:flex;align-items:center;width:100%;margin:16px 0 0;padding:13px 16px;border:1px solid var(--border);
  border-radius:14px;background:#fff;color:var(--primary);font:inherit;font-size:var(--fs-sm,14px);font-weight:var(--fw-semibold,600);
  text-align:left;cursor:pointer}
.acct-sec{margin:28px 4px 10px;font-size:var(--fs-xs,12px);font-weight:var(--fw-bold,700);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.acct-sec-sub{margin:-4px 4px 12px;font-size:13px;line-height:1.5;color:var(--muted)}
.acct-card h3{font-size:var(--fs-md,16px);font-weight:var(--fw-bold,700)}
.acct-card .acct-check{text-transform:none;letter-spacing:0;font-size:13px;font-weight:var(--fw-regular,500);color:var(--body);margin-top:16px}
.acct-card .acct-check span{text-transform:none}
.acct-card .btn-ghost.sm:not(.acct-link){border:1.5px solid var(--primary);color:var(--primary);background:#fff}
.acct-textlink{display:block;margin:10px auto 0;padding:6px;background:none;border:0;color:var(--primary);font:inherit;
  font-size:13px;font-weight:var(--fw-semibold,600);text-decoration:underline;cursor:pointer}
.acct-list{padding:2px 18px}
.acct-item{padding:16px 0;border-bottom:1px solid var(--border)}
.acct-item:last-child{border-bottom:0}
.acct-item h3{margin:0 0 4px}
.acct-item .btn-primary.sm{background:#fff;color:var(--primary);border:1.5px solid var(--primary);box-shadow:none}
.acct-item .btn-primary.sm::after{display:none}
/* the device actions are secondary: compact, one line */
.acct-item .btn-primary.sm,.acct-item .btn-ghost.sm{width:100%;margin:10px 0 0;padding:11px 14px;font-size:var(--fs-sm,14px);
  font-weight:var(--fw-semibold,600);white-space:nowrap}
.acct-item .acct-row2 .btn-ghost.sm{margin:10px 0 0}
.mono-s{font-family:Consolas,Menlo,monospace;font-size:12px}
.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:600}
.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:12px;font-weight:700;letter-spacing:.1em;color:var(--primary);margin-bottom:7px}
.dl-title{font-size:22px;font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:5px}
.dl-note{font-size:14px;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:14px;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:24px}
.dl-nums span:last-child{color:var(--muted);font-weight:600}
.dl-why{font-size:12px;line-height:1.6;color:var(--faint)}
/* ---- Skill Studios (26 Sep 2026) ---- */
.st-card{display:flex;gap:12px;align-items:center;width:100%;margin:0 0 8px;padding:12px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-card);text-align:left;color:var(--ink);font:inherit}
.st-ic{flex:0 0 46px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:var(--bg-teal)}
.st-main{flex:1;min-width:0}.st-main b{display:block;font-size:14px}.st-main small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.st-bar{display:block;height:6px;border-radius:4px;background:var(--track);margin-top:7px;overflow:hidden}.st-bar i{display:block;height:100%;background:var(--grad-primary)}
.st-card.soon{opacity:.62}.st-card.soon .st-ic{background:var(--bg-soft)}
.st-ev{margin:0 14px 10px;padding:12px;border-radius:18px;border:1px dashed var(--border);background:#fff}
.st-ev-item{margin:0 0 10px;padding:8px;border-radius:14px;background:var(--bg-soft)}.st-ev-item audio{width:100%;display:block}.st-ev-item img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:10px}
.st-ev-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--muted)}.st-ev-meta .link{font-size:12px}
.st-ev-btn{width:100%;display:block;text-align:center;padding:12px;font-size:14px}
.st-ev-rec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 2px}.st-ev-rec b{flex:1 1 auto;font-size:14px}.st-ev-rec small{color:var(--muted);font-size:12px}.st-ev-rec .btn-primary{padding:10px 18px}
.st-ev-dot{width:12px;height:12px;border-radius:50%;background:var(--danger);animation:evblink 1s infinite}@keyframes evblink{50%{opacity:.25}}
.st-ev-prev audio{width:100%;display:block;margin:0 0 10px}.st-ev-err{color:var(--danger-text);padding:6px 2px 0}
.jr-order{padding:0}
.pa-note{font-size:14px;line-height:1.55;white-space:normal;margin:0 0 10px}
.cert{margin:10px 14px;padding:22px 18px;border:3px double #0D3B8E;border-radius:6px;background:#fffdf8;text-align:center;color:#071E4A}
.cert-k{font-size:12px;letter-spacing:1.5px;font-weight:700;color:#0D3B8E}.cert-t{font-size:26px;font-weight:700;margin:6px 0 10px;line-height:1.15}
.cert-p{margin:6px 0;font-size:14px;color:#475569}.cert-name{font-size:22px;font-weight:700;margin:4px 0;border-bottom:1px solid var(--gray-300);display:inline-block;padding:0 12px 4px}
.cert-studio{font-size:18px;font-weight:700;margin:4px 0 8px}.cert-list{text-align:left;margin:8px auto 14px;padding:0 0 0 18px;font-size:12px;line-height:1.5;max-width:320px}.cert-list li{margin:3px 0}
.cert-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:14px;text-align:left}.cert-foot small{display:block;font-size:12px;color:#64748B}.cert-date{font-weight:700;font-size:14px}
.cert-sign{text-align:center}.cert-sign img{height:44px;display:block;margin:0 auto 2px}.cert-line{width:120px;border-bottom:1px solid #071E4A;height:34px;margin:0 auto 4px}.cert-sign b{display:block;font-size:12px}
.cert-note{margin-top:14px;font-size:12px;color:#64748B}
@media print{.cert-screen .cert{margin:0;border-width:4px;page-break-inside:avoid}.cert-screen .topbar,.cert-screen .cta-dock{display:none!important}}
.ch-card{display:flex;gap:10px;align-items:center;width:100%;margin:0 0 8px;padding:11px 12px;border:1px solid var(--border);border-radius:16px;background:#fff;text-align:left;color:var(--ink);font:inherit}
.ch-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--bg-soft)}
.ch-main{flex:1;min-width:0}.ch-main b{display:block;font-size:14px}.ch-main small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ch-lv{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--bg-soft);color:var(--muted)}
.ch-bronze{background:#FFE3C4;color:#B35900}.ch-silver{background:var(--gray-100);color:#475569}.ch-gold{background:#fbeec4;color:#B35900}.ch-returned{background:var(--danger-bg);color:var(--danger-text)}
.ch-planned,.ch-doing,.ch-submitted{background:var(--bg-teal);color:var(--primary-dark)}
.ch-fold{margin:0 14px 8px;padding:0;border:1px solid var(--border);border-radius:14px;background:#fff}.ch-fold summary{padding:11px 14px;font-size:14px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.ch-fold summary::after{content:'+';color:var(--muted)}.ch-fold[open] summary::after{content:'–'}
.ch-fold p,.ch-fold ul,.ch-fold ol{margin:0 14px 12px;font-size:14px;line-height:1.55}.ch-fold ul,.ch-fold ol{padding-left:18px}.ch-fold li{margin:4px 0}.ch-note{color:var(--muted);font-size:12px!important}
.ch-hero{margin:8px 14px 10px;padding:16px;border-radius:18px;background:var(--grad-hero);color:#fff}.ch-hero h2{margin:0 0 6px;font-size:18px;line-height:1.2}.ch-hero p{margin:0 0 6px;font-size:14px;line-height:1.5;opacity:.95}.ch-hero small{font-size:12px;opacity:.85}
.ch-status{margin:6px 14px 16px;padding:12px;border-radius:16px;background:var(--bg-soft)}.ch-st-line{font-size:14px;line-height:1.5;margin:0 0 10px}
.ch-mail{display:block;text-align:center;text-decoration:none;margin:0 0 8px}
.ch-result{margin:6px 14px 16px;padding:14px;border-radius:16px;background:#fff;border:1.5px solid var(--border)}.ch-result b{font-size:16px;letter-spacing:1px}.ch-result p{margin:6px 0;font-size:14px;line-height:1.5}.ch-result small{color:var(--muted);font-size:12px;display:block;margin-bottom:8px}
.ch-result.ch-gold{border-color:#e2c25a}.ch-result.ch-silver{border-color:#CBD5E1}.ch-result.ch-bronze{border-color:#FF8A1F}
.cert-line{font-size:14px;line-height:1.5;margin:6px 0 4px;color:#334155}.cert-line-sig{width:120px;border-bottom:1px solid #071E4A;height:34px;margin:0 auto 4px}
.cert-ch-gold{border-color:#c9a227}.cert-ch-silver{border-color:#94A3B8}.cert-ch-bronze{border-color:#B35900}
.jr-days{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 10px}
.jr-day{text-align:left;padding:8px 10px;border:1.5px solid var(--border);border-radius:14px;background:#fff;font:inherit;color:var(--ink);min-height:54px}.jr-day b{display:block;font-size:12px}.jr-day small{display:block;font-size:12px;color:var(--muted)}
.jr-day.ready{border-color:var(--primary);background:var(--bg-teal)}.jr-day.rev{grid-column:1/3;background:var(--bg-soft)}.jr-day.over{border-color:var(--danger);background:var(--danger-bg)}.jr-day .jr-in{display:inline-block;margin:4px 4px 0 0;font-size:12px}
.jr-breathe{margin:6px 14px 10px;padding:18px;border-radius:20px;background:var(--bg-soft);text-align:center}
.jr-ring{position:relative;width:150px;height:150px;margin:0 auto 8px;border-radius:50%;border:6px solid var(--gray-100);display:grid;place-items:center;overflow:hidden}
.jr-ring i{position:absolute;left:0;right:0;bottom:0;height:8%;background:var(--grad-primary);opacity:.55;transition:height 1s linear}
.jr-breathe.in .jr-ring i{height:100%;transition:height var(--dur,4s) linear}.jr-breathe.out .jr-ring i{height:8%;transition:height var(--dur,6s) linear}
.jr-ring b{position:relative;font-size:18px}.jr-breathe small{display:block;color:var(--muted);font-size:12px}
.jr-habit{margin:0 14px 10px;padding:12px;border-radius:16px;background:#fff;border:1px solid var(--border)}
.jr-habit-row{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:8px 0}
.jr-hday{padding:8px 2px;border:1.5px solid var(--border);border-radius:12px;background:#fff;font:inherit;color:var(--ink)}.jr-hday b{display:block;font-size:14px}.jr-hday small{display:block;font-size:12px;color:var(--muted)}
.jr-hday.on{background:var(--success);border-color:var(--success);color:#fff}.jr-hday.on small{color:#fff}
.comp-pick{display:block;width:100%;text-align:left;margin:6px 0 0;padding:9px 10px;border:1.5px solid var(--border);border-radius:12px;background:#fff;font:inherit;color:var(--ink)}
.comp-pick b{display:block;font-size:14px}.comp-pick small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
.comp-pick.on{border-color:var(--success);background:#eaf7f0}.comp-pick:disabled{opacity:.45}
.jr-ideas{margin:6px 14px 10px;padding:12px;border-radius:16px;background:var(--bg-soft)}
.jr-ideas-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}.jr-ideas-top span{font-weight:700;color:var(--primary-dark);font-variant-numeric:tabular-nums}
.jr-ideas-count{text-align:center;margin:8px 0}.jr-ideas-count b{font-size:34px;line-height:1}.jr-ideas-count small{display:block;color:var(--muted);font-size:12px}
.jr-ideas-form{display:flex;gap:8px;margin:6px 0}.jr-ideas-form input{flex:1;min-width:0;font-size:16px}.jr-ideas-form .btn-primary{padding:10px 16px;flex:0 0 auto}
.jr-ideas-list{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.5}.jr-ideas-list li{margin:2px 0}
.mo-door{margin:0 0 10px}.mo-q{font-size:16px;font-weight:700;margin:2px 0 8px}
.mo-chips{display:flex;flex-wrap:wrap;gap:7px}
.mo-chip{padding:8px 12px;border:1.5px solid var(--border);border-radius:999px;background:#fff;font:inherit;font-size:12px;font-weight:600;color:var(--ink)}.mo-chip:active{background:var(--bg-teal)}.mo-more{color:var(--primary-dark);border-style:dashed}
.mo-sug{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:11px 12px;border:0;border-radius:16px;background:var(--bg-teal);text-align:left;font:inherit;color:var(--ink)}.mo-sug small{display:block;font-size:12px;color:var(--muted)}.mo-sug>b{flex:1;min-width:0;display:block;font-size:14px}
.aw-card{border:1.5px solid var(--border)}.aw-card.aw-ok{border-color:#c9a227;background:#fffbea}
.aw-dots{display:flex;gap:8px;margin:6px 0}.aw-dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:var(--bg-soft);opacity:.45;border:2px solid transparent}
.aw-dot.on{opacity:1}.aw-dot.aw-bronze{border-color:#B35900;background:#FFE3C4}.aw-dot.aw-silver{border-color:#94A3B8;background:var(--gray-100)}.aw-dot.aw-gold{border-color:#c9a227;background:#fbeec4}
.aw-line{margin:4px 0 8px;font-size:14px;line-height:1.5}
.cert-award{border-color:#c9a227;border-width:4px}.cert-award .cert-t{color:#B35900}.cert-list .ch-lv{font-size:12px;padding:2px 6px}
.var{margin:10px 14px;padding:18px 16px;border:1px solid var(--gray-300);border-radius:6px;background:#fff;color:#071E4A}
.var-head{display:flex;justify-content:space-between;gap:10px;border-bottom:2px solid #0D3B8E;padding-bottom:8px;margin-bottom:8px}.var-org{font-size:12px;letter-spacing:1.2px;font-weight:700;color:#0D3B8E}.var-title{font-size:18px;font-weight:700;line-height:1.15}.var-meta{text-align:right;font-size:12px;color:#475569;font-variant-numeric:tabular-nums}
.var-who{font-size:14px;margin:4px 0 8px}.var-p{font-size:12px;line-height:1.55;margin:6px 0;color:#334155}.var-none{color:#64748B;font-style:italic}
.var-h{font-size:12px;margin:14px 0 6px;letter-spacing:.3px;color:#0D3B8E}
.var-t{width:100%;border-collapse:collapse;font-size:12px}.var-t th,.var-t td{border:1px solid #e3dcd3;padding:5px 6px;text-align:left;vertical-align:top}.var-t th{background:#F0F6FE;font-size:12px}.var-t small{color:#475569}
.var-foot{margin-top:16px}
@media print{.var-screen .var{margin:0;border:0}.var-screen .topbar,.var-screen .cta-dock{display:none!important}}
.jr-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px 16px 0 0;background:#F0F6FE}
.ch-hint{display:block;text-align:center;font-size:12px;color:var(--muted);margin:-4px 0 10px}
.st-soon{margin:6px 0 16px;padding:12px 14px;border-radius:14px;background:var(--bg-soft);font-size:12px;line-height:1.5;color:var(--muted)}.st-soon b{color:var(--body)}
.st-cover{margin:6px 14px 10px;padding:14px;border-radius:20px;background:var(--grad-hero);color:#fff;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-card)}
.st-cover-ic{flex:0 0 52px;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:26px}
.st-cover small{display:block;font-size:12px;opacity:.9;margin-top:3px}
.st-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;opacity:.9}.topbar-tt .st-kicker{color:var(--primary);opacity:1;display:block}
.st-title{font-size:16px;font-weight:700;line-height:1.25;margin-top:2px}
.topbar-tt{flex:1 1 auto;min-width:0}.topbar-tt b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-tt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-h{padding:2px 18px 4px;font-size:18px;font-weight:700;line-height:1.25}
.st-steps{margin:0 14px 10px}
.st-step{display:flex;gap:10px;align-items:flex-start;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:#fff;margin-bottom:8px;text-align:left;color:var(--ink);font:inherit}
.st-n{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--bg-teal);color:var(--primary-dark)}
.st-step.done .st-n{background:var(--success);color:#fff}.st-step.now{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91, 155, 232,.15)}
.st-t{flex:1;min-width:0}.st-t b{display:block;font-size:14px}.st-t small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.st-experts{margin:0 14px 12px}
.st-expert,.st-video{display:flex;gap:10px;align-items:center;width:100%;padding:8px;border:1px solid var(--border);border-radius:14px;background:#fff;margin-bottom:8px;text-align:left;color:var(--ink);font:inherit;position:relative}
.st-expert img,.st-video img{width:84px;height:48px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:#000}
.st-expert span,.st-video span{flex:1;min-width:0}.st-expert b,.st-video b{display:block;font-size:12px;line-height:1.3}.st-expert small,.st-video small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.st-video{margin:0 14px 10px;width:calc(100% - 28px)}.st-video .crs-play{position:static;flex:0 0 auto;width:30px;height:30px;font-size:12px}
.st-pieces{display:flex;gap:5px;padding:6px 14px 6px}.st-pieces span{flex:1;height:5px;border-radius:3px;background:var(--track)}.st-pieces span.on{background:var(--primary)}.st-pieces span.done{background:var(--success)}
.st-plabel{padding:0 18px 8px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--primary)}
.st-say{margin:0 14px 10px;padding:14px 16px;border-radius:18px;background:var(--bg-teal);font-size:14px;line-height:1.55;color:var(--ink)}
.st-more{margin:0 14px 10px;display:flex;flex-direction:column;gap:4px}.st-more small{font-size:12px;color:var(--muted);font-weight:600}.st-more .link{text-align:left;font-size:12px;padding:4px 0}
.st-scene{margin:0 14px 10px;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-card);background:#fff}
.st-pic{height:96px;background:linear-gradient(135deg,#FFE3C4,#FFA552 60%,#FF8A1F);display:grid;place-items:center;font-size:44px}
.st-q{padding:12px 14px 4px;font-size:14px;font-weight:700;line-height:1.35}.st-hint{padding:0 14px 10px;font-size:12px;color:var(--muted);line-height:1.4}
.st-opt{display:flex;gap:10px;align-items:center;width:calc(100% - 28px);margin:0 14px 8px;padding:12px;border:1.5px solid var(--border);border-radius:16px;background:#fff;color:var(--ink);text-align:left;font:inherit;font-size:14px;font-weight:600;line-height:1.35}
.st-opt .k{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--bg-teal);color:var(--primary-dark)}
.st-opt.on{border-color:var(--primary);background:var(--bg-teal)}.st-opt.on .k{background:var(--primary);color:#fff}
.st-opt.good{border-color:var(--success);background:#eaf7f0}.st-opt.good .k{background:var(--success);color:#fff}
.st-opt.half{border-color:var(--warn);background:#fff7e6}.st-opt.half .k{background:var(--warn);color:#fff}
.st-opt.bad{border-color:var(--danger);background:var(--danger-bg)}.st-opt.bad .k{background:var(--danger);color:#fff}
.st-opt:disabled{opacity:1}
.st-fb{margin:0 14px 10px;padding:12px 14px;border-radius:16px;font-size:14px;line-height:1.5;border:1px solid var(--border);background:var(--bg-soft);color:var(--body)}.st-fb small{color:var(--muted);font-weight:600}
.st-ta{width:calc(100% - 28px);margin:0 14px 10px;display:block}
.st-qlab{padding:0 18px 6px;font-size:14px;font-weight:700;line-height:1.4}
.st-ck{margin:0 14px 10px;padding:12px;border:1px solid var(--border);border-radius:16px;background:#fff}.st-ck b{display:block;font-size:14px;margin-bottom:8px;line-height:1.4}
.st-ck .c{display:flex;gap:8px;flex-wrap:wrap}.st-ck .c button{border:1.5px solid var(--border);background:#fff;color:var(--ink);border-radius:999px;padding:8px 12px;font:inherit;font-size:12px;font-weight:600;text-align:left}
.st-ck .c button.good{border-color:var(--success);background:#eaf7f0}.st-ck .c button.bad{border-color:var(--danger);background:var(--danger-bg)}.st-ck .c button:disabled{opacity:1}
.st-done{margin:0 14px 10px;padding:18px 16px;border-radius:20px;background:var(--grad-hero);color:#fff;text-align:center}.st-done .big{font-size:40px;line-height:1}.st-done b{display:block;font-size:18px;margin-top:6px}.st-done p{margin:6px 0 0;font-size:12px;opacity:.92;line-height:1.5}
.dock-row-inner{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}.dock-row-inner .gate-note{flex:1 1 100%;margin-top:0}.dock-row-inner .btn-ghost{flex:0 0 auto;width:auto;margin:0;padding:13px 16px;white-space:nowrap}.dock-row-inner .btn-primary{flex:1 1 auto;width:auto;min-width:0}
/* ---- Skill Studios, junior track (26 Sep 2026): big buttons, little text, one thing at a time ---- */
.jr-cast{display:flex;gap:8px;margin:0 14px 10px}.jr-cast span{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 4px;border:1px solid var(--border);border-radius:14px;background:#fff;font-size:12px;text-align:center}.jr-cast i{font-style:normal;font-size:26px}.jr-cast b{font-size:12px}.jr-cast small{color:var(--muted);font-size:12px}
.jr-verb{display:inline-block;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;letter-spacing:.04em;flex:0 0 auto;align-self:center}
.jr-earn{background:#eaf7f0;color:#167A4C}.jr-save{background:#E3EEFC;color:#1158B4}.jr-spend{background:var(--bg-teal);color:var(--primary-dark)}.jr-give{background:#f3ecff;color:#6a4fd0}
.jr-story{margin:0 14px 10px;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-card)}
.jr-pic{height:92px;background:linear-gradient(135deg,#fde7d3,#FFC285 60%,#FF8A1F);display:grid;place-items:center;font-size:40px;letter-spacing:6px}
.jr-story p{margin:0;padding:12px 14px;font-size:14px;line-height:1.55}
.jr-do{margin:0 14px 10px;padding:10px 14px;border-radius:14px;background:var(--bg-teal);font-size:14px;line-height:1.45}.jr-do small{display:block;font-size:12px;color:var(--muted);margin-top:3px;font-weight:600}
.jr-cash{margin:0 14px 10px;display:flex;align-items:baseline;gap:8px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--border)}.jr-cash span{font-size:12px;color:var(--muted);font-weight:600}.jr-cash b{font-size:22px;font-weight:700;color:var(--primary-dark);margin-left:auto}.jr-cash small{font-size:12px;color:var(--faint)}
.jr-items{display:flex;flex-wrap:wrap;gap:8px;margin:0 14px 10px}
.jr-item{display:flex;align-items:center;gap:6px;border:2px solid var(--border);border-radius:999px;background:#fff;padding:9px 12px;font:inherit;font-size:14px;font-weight:600;color:var(--ink)}.jr-item i{font-style:normal;font-size:16px}.jr-item b{color:var(--primary-dark)}.jr-item.on{border-color:var(--primary);background:var(--bg-teal);box-shadow:0 0 0 3px rgba(91, 155, 232,.18)}
.jr-pockets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 14px 10px}
.jr-pocket{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:84px;padding:10px;border:2px dashed var(--border);border-radius:16px;background:#fff;font:inherit;text-align:left;color:var(--ink)}.jr-pocket i{font-style:normal;font-size:22px}.jr-pocket b{font-size:14px}.jr-pocket small{font-size:12px;color:var(--muted);line-height:1.3}.jr-pocket.ready{border-color:var(--primary);border-style:solid;background:#fff8f3}
.jr-in{display:inline-block;margin:4px 4px 0 0;padding:3px 8px;border-radius:999px;background:var(--bg-teal);font-size:12px;font-weight:700;color:var(--primary-dark)}
.jr-hint{margin:0 18px 10px;font-size:12px;color:var(--muted);line-height:1.45}
.jr-result{margin:0 14px 10px;padding:12px 14px;border-radius:16px;background:#fff7e6;border:1px solid #FFC285;font-size:14px;line-height:1.5}.jr-result.ok{background:#eaf7f0;border-color:#8FD3AF}.jr-result small{color:var(--muted);display:block;margin-top:4px}
.jr-opt{display:block;width:calc(100% - 28px);margin:0 14px 8px;padding:13px 14px;border:2px solid var(--border);border-radius:16px;background:#fff;color:var(--ink);text-align:left;font:inherit;font-size:14px;font-weight:600;line-height:1.35}.jr-opt.good{border-color:var(--success);background:#eaf7f0}.jr-opt.bad{border-color:var(--danger);background:var(--danger-bg)}.jr-opt.dim{opacity:.55}.jr-opt:disabled{opacity:1}.jr-opt.dim:disabled{opacity:.55}
.jr-prices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 14px 10px}.jr-price{padding:12px 4px;border:2px solid var(--border);border-radius:16px;background:#fff;font:inherit;font-size:18px;font-weight:700;color:var(--primary-dark)}.jr-price small{display:block;font-size:12px;color:var(--muted);font-weight:600}.jr-price.on{border-color:var(--primary);background:var(--bg-teal)}.jr-price.dim{opacity:.5}
.jr-card{margin:0 14px 10px;padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:#fff}.jr-card-k{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--primary);margin-bottom:6px}.jr-card .jr-opt{width:100%;margin:0 0 8px}.jr-card p{margin:0 0 8px;font-size:14px;line-height:1.5}
.jr-q{font-weight:700}.jr-why{font-size:12px;color:var(--muted);line-height:1.45;margin:2px 0 0}
.jr-ach{font-size:14px;line-height:1.5;padding:3px 0}
.jr-family{background:#f7f3ff;border-color:#dcd0ff}.jr-family small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.jr-maxim{margin:0 14px 10px;padding:14px 16px;border-radius:18px;background:var(--bg-teal);font-size:16px;font-weight:700;line-height:1.4;text-align:center}.jr-maxim small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:6px}
.jr-note{margin:0 14px 12px;font-size:12px;color:var(--faint);line-height:1.45}
.screen.jr .btn-primary{font-size:18px;padding:16px}
/* 26 Sep 2026: the first-open holding page carries the brand row instead of the compass */
.dl-brand{justify-content:center;text-align:left;margin-bottom:26px;color:var(--ink)}
.dl-brand .logo-mark{color:#fff}
/* the front video's own progress, while its pack comes down after the language choice */
.vh-getting{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  background:rgba(0,0,0,.55);color:#fff;font-size:14px;font-weight:700;padding:8px 15px;border-radius:99px;
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Payment screen, once the gateway became real (30 Aug). The old fake
   UPI/Card/Net-banking buttons were replaced by a plain line — Easebuzz
   asks for the method itself, so offering a choice here was a promise the
   app could not keep. */
.pay-methods-note{text-align:center;font-size:14px;font-weight:600;color:var(--muted);
  letter-spacing:.02em;margin:14px 0 4px}
.pay-safe{margin:12px 18px 0;background:var(--bg-soft);border:1px solid var(--border);
  border-radius:14px;padding:12px 14px;font-size:12px;line-height:1.55;color:var(--body);
  text-align:center}
.pay-safe b{color:var(--ink)}

/* A permanent way into My Account, and the checkout screen (owner, 30 Aug). */
.topbar-acct{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:#fff;font-size:16px;line-height:1;display:grid;place-items:center;color:var(--body);
  padding:0;margin-left:8px}
.topbar-acct:active{background:var(--bg-soft)}

.co-head{padding:8px 0 16px}
.co-head .h1{margin-top:4px}
.co-box{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:16px 18px;
  margin-bottom:16px;box-shadow:var(--shadow-card)}
.co-row{display:flex;gap:12px;align-items:flex-start;padding-bottom:12px}
.co-row>span{font-size:18px;line-height:1.2;flex-shrink:0}
.co-row b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.co-row em{display:block;font-size:12px;font-style:normal;color:var(--muted);line-height:1.45;margin-top:1px}
.co-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1.5px solid var(--border);padding-top:14px;margin-top:2px}
.co-total span{font-size:14px;font-weight:600;color:var(--body)}
.co-total b{font-size:26px;font-weight:700;color:var(--primary)}
.co-gst{font-size:12px;color:var(--faint);margin-top:6px;text-align:right}

/* A flex column will happily crush its children. The payment card once
   collapsed to zero height with 576px of content inside it, spilling the
   benefit rows over everything below. Cards in a flex column keep their size. */
.pay-card, .pay-methods-note, .pay-safe, .co-box { flex-shrink: 0; }

/* Step through the career questions by tapping (owner, 30 Aug). The dropdown
   stays for jumping straight to one; these are for working through them. */
.q-nav{display:flex;align-items:center;gap:10px;margin:10px 0 2px}
.q-nav button{flex:1;padding:11px 10px;border-radius:12px;border:1.5px solid var(--border-soft);
  background:#fff;color:var(--primary);font:inherit;font-size:14px;font-weight:700;
  white-space:nowrap}
.q-nav button:active:not([disabled]){background:var(--bg-teal)}
.q-nav button[disabled]{color:var(--disabled-text);border-color:var(--border);background:var(--bg-soft)}
.q-nav-pos{flex-shrink:0;font-size:12px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:64px;text-align:center}

/* ---- Finance cinematic module (supplied by the module team) ---- */
/* Add these Finance-only rules to the CURRENT live styles.css. */
.finance-v3 .fin-progress{height:5px;background:#C9DDF8}.finance-v3 .fin-progress i{display:block;height:100%;background:linear-gradient(90deg,#E07000,#FFA552);transition:width .25s}.fin-scene{position:relative;margin:0;background:#071E4A}.fin-scene>img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.fin-scene>div{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;background:linear-gradient(transparent,#10233fef)}.fin-scene span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFA552}.fin-scene h1{font-size:22px;line-height:1.15;margin:4px 0 0}.fin-question{margin:12px 14px 22px;padding:16px;border:1px solid #d9e1ea;border-radius:14px;background:#fff}.fin-question h2{font-size:18px;line-height:1.3;margin:5px 0 12px}.fin-question>p{font-size:12px;color:#64748B;margin:-5px 0 10px}.fin-opt{width:100%;text-align:left;margin:6px 0}.fin-feedback{margin-top:12px;padding:12px;border-radius:10px;background:#EAF7F0;border-left:4px solid #1E9E63}.fin-feedback.review{background:#fff5e8;border-left-color:#E07000}.fin-feedback p{margin:5px 0 0;font-size:14px}.finance-v3 .hc-speaker-live{margin-top:10px}
.fin-story-note{margin:14px 18px 24px;padding:14px 18px;border-radius:18px;background:#fff7f1;color:#7a4a32;font-weight:600;text-align:center}
.fin-role-label{display:flex;align-items:center;gap:7px;margin:5px 0 4px;flex-wrap:wrap}.fin-role-label small{display:inline-block;background:#FF8A1F;color:#fff;border-radius:999px;padding:3px 7px;font-size:12px;line-height:1;font-weight:700;letter-spacing:.08em}.fin-role-label b{color:#fff;font-size:14px;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.55)}

/* ---- Meet the People: full-width workplace hero + one-question flow (owner, 1 Sep) ---- */
.people-stage{position:relative;margin:0 14px;overflow:hidden;border-radius:24px;background:#20160f;box-shadow:var(--shadow-card)}
.people-stage img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center}
.people-stage-shade{position:absolute;inset:38% 0 0;background:linear-gradient(transparent,rgba(18,12,8,.92))}
.people-stage-title{position:absolute;z-index:2;left:16px;right:16px;bottom:14px;color:#fff}
.people-stage-title b{display:block;font-size:22px;line-height:1.15}
.people-stage-title span{display:block;margin-top:2px;font-size:14px;font-weight:700;color:#FFA552}
.people-stage-title em{display:block;margin-top:5px;font-style:normal;font-size:12px;font-weight:600;opacity:.94;line-height:1.35}

/* ---- final report: skills-to-grow, tappable careers, road map, DISHA 360 (1 Sep) ---- */
.improve-card{margin:0 0 12px;padding:12px 14px;border:1.5px solid var(--accent-light);border-radius:14px;background:#F0F6FE}
.improve-card>b{font-size:16px}
.improve-why{font-size:12px;color:#4d5b6b;margin:3px 0 8px}
.path-card.tappable{display:block;width:100%;text-align:left;font:inherit;cursor:pointer}
.path-go{float:right;font-size:12px;font-weight:700;color:var(--accent, #2F7FDC)}
.rm-chips{display:flex;flex-wrap:wrap;gap:8px}
.rm-chip{font:inherit;font-size:14px;font-weight:600;padding:8px 12px;border:1.5px solid var(--accent-light);border-radius:999px;background:#fff;cursor:pointer}
.rm-scroll .report-card{margin:0 14px 12px}
.rm-step{margin:0 0 12px;padding-left:12px;border-left:3px solid var(--accent, #2F7FDC)}
.rm-when{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent, #2F7FDC);text-transform:uppercase}
.rm-step p{margin:3px 0 0;font-size:14px}
.d360-sec{margin:6px 14px 18px}
.d360-sec>h3{font-size:18px;margin:0 0 4px}
.d360-note{font-size:14px;color:#4d5b6b;margin:0 0 10px}
.d360-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.d360-grid .lib-tile{aspect-ratio:16/11}
.d360-weeks{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent, #2F7FDC);margin:0 0 4px}
.d360-cls{display:inline-block;margin-left:6px;font-size:12px;font-weight:700;color:#4d5b6b}

/* ---- the 18-worlds library + the free result (4 Sep 2026) ---- */
.wl-near{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px}
.wl-rest{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 16px 8px}
.wl-kicker{font-size:12px;font-weight:700;letter-spacing:.6px;opacity:.7;padding:18px 18px 8px;text-transform:uppercase}
.wl-tile{position:relative;border:0;padding:0;border-radius:16px;overflow:hidden;background:#CBD5E1;aspect-ratio:4/3;text-align:left;cursor:pointer}
.wl-tile.big{aspect-ratio:1/1.05}
.wl-tile img{width:100%;height:100%;object-fit:cover;display:block}
.wl-tile .wl-copy{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;color:#fff;font-size:12px;line-height:1.25}
.wl-tile .wl-copy b{display:block;font-size:14px}
.wl-tile.big .wl-copy b{font-size:16px}
.wl-tile .wl-copy em{display:block;font-style:normal;font-size:12px;opacity:.9;margin-top:3px}
.wl-tile.on{outline:3px solid var(--primary, #2F7FDC)}
.wl-tile.seen::after{content:'✓';position:absolute;top:6px;right:8px;background:#fff;color:#167A4C;border-radius:50%;width:20px;height:20px;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.wl-open{margin:12px 16px 0}
.wl-open-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:8px}
.wl-careers{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.wl-growing{font-size:14px;margin:6px 0 10px}
.wl-close{width:100%}
.free-ev{margin:6px 0;font-size:14px;line-height:1.45}
.free-world{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed rgba(0,0,0,.08)}
.free-world:first-of-type{border-top:0}
.free-world img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:none}
.free-grow{font-size:14px;opacity:.85;margin:2px 0 0}
.free-pill{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.06);opacity:.8;white-space:nowrap}
.free-q{margin:14px 16px 8px;font-weight:700;font-size:16px;line-height:1.35}

/* ---- the skill-matching table (4 Sep 2026) ---- */
.mw-card{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:10px 12px;margin:8px 0;background:#fff}
.mw-label{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:#EEF2F7;color:#64748B}
.mw-label.interest{background:#E3EEFC;color:#1158B4}.mw-label.skills{background:#E2E8F0;color:#1f6f66}.mw-label.agree{background:var(--warning-bg);color:#B35900}
.mw-world{font-weight:700;font-size:16px;margin:6px 0 4px}
.mw-career{padding:6px 0;border-top:1px dashed rgba(0,0,0,.08)}
.mw-career b{font-size:14px}
.ml-rows{margin-top:4px}
.ml-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;padding:2px 0}
.lv-badge.lv-none{background:rgba(0,0,0,.06);color:#64748B}

/* ---- the 60-question test (4 Sep 2026) ---- */
.apt-kicker{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--muted,#64748B);margin:2px 0 8px}
.apt-kicker.first{color:var(--primary,#2F7FDC)}
.apt-first-note{font-size:14px;margin:0 0 10px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.05)}
.apt-timer{height:6px;border-radius:4px;background:rgba(0,0,0,.08);overflow:hidden;margin:0 0 12px}
/* 26 Sep 2026: the bar is driven by aptPaintTimer (a CSS animation restarted on every redraw, so it never showed the truth) */
.apt-timer i{display:block;height:100%;width:100%;background:var(--primary,#2F7FDC);transition:width .25s linear}
.apt-timer.over i{background:var(--danger)}
.apt-clock{color:var(--primary);font-variant-numeric:tabular-nums}
.apt-clock.over{color:var(--danger)}

/* ---- government test already taken (4 Sep 2026) ---- */
.gov-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.gov-chip{border:1.5px solid rgba(0,0,0,.14);background:#fff;border-radius:999px;padding:8px 12px;font-size:14px;font-weight:600;color:inherit;cursor:pointer}
.gov-chip.on{background:var(--primary,#2F7FDC);border-color:var(--primary,#2F7FDC);color:#fff}
.gov-chip.weak.on{background:#64748B;border-color:#64748B}
.gov-theirs{font-style:normal;font-size:12px;opacity:.7;margin-left:6px}

/* ---- captions, bands, practice, booking (4 Sep 2026) ---- */
.cap-box{pointer-events:none;position:fixed;left:12px;right:12px;bottom:74px;z-index:60;background:rgba(15, 23, 42,.92);color:#fff;font-size:14px;line-height:1.4;padding:10px 14px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.cap-box[hidden]{display:none}
.stop-top.cap{font-size:12px;font-weight:700;letter-spacing:.5px;opacity:.6;margin-right:6px;padding-left:9px;padding-right:9px}
.stop-top.cap.on{opacity:1;background:var(--primary,#2F7FDC);color:#fff;border-color:var(--primary,#2F7FDC)}
small.band{font-weight:600;font-size:12px;opacity:.7;margin-left:4px}
.opt.wrong{border-color:var(--danger);background:var(--danger-bg)}

/* ---- the mentor's internship introduction (v115, 5 Sep 2026) ---- */
.vi-intro-screen{display:flex;flex-direction:column;min-height:100%}
.vi-intro-speaker{position:sticky;top:0;z-index:3}
.vi-intro-avatar{width:58px;height:58px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,var(--accent-light),var(--primary));border:3px solid #fff;box-shadow:0 0 0 2px var(--primary)}
.vi-intro-body{flex:1 1 auto;padding:4px 16px 12px}
.vi-intro-kicker{margin-top:6px;font-size:12px;letter-spacing:.8px;font-weight:700;color:var(--primary)}
.vi-intro-title{margin:2px 0 8px;font-size:22px;font-weight:700;line-height:1.2}
.vi-intro-text{margin:0 0 10px;font-size:16px;line-height:1.6;font-weight:600;color:var(--body)}
.vi-intro-where{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;font-size:14px;font-weight:600;color:var(--muted)}
.vi-intro-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 -4px}
.vi-intro-card{margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow-card,0 4px 14px rgba(0,0,0,.08))}
.vi-intro-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.vi-intro-card figcaption{padding:7px 9px 9px;font-size:12px;font-weight:700;line-height:1.3}
.vi-intro-dock{display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0}
.vi-intro-dock .btn-primary,.vi-intro-dock .btn-ghost{width:100%;margin:0}
.vi-intro-dock .btn-ghost{background:#fff}
@media (min-width:560px){.vi-intro-grid{grid-template-columns:repeat(3,1fr)}}

/* ---- two offers after the free part (v119) ---- */
.oc-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 14px 6px}
/* owner, 5 Sep: the two offers are stacked — Clarity on top, DISHA 360 below — never side by side */
.oc-grid{max-width:520px;margin-left:auto;margin-right:auto}
.oc-card{background:#fff;border:1px solid var(--line,#E3EEFC);border-radius:18px;padding:16px 16px 14px;box-shadow:var(--shadow-card,0 4px 14px rgba(0,0,0,.06));display:flex;flex-direction:column;gap:8px;color:var(--ink,#071E4A)}
.oc-card.oc-full{border-color:var(--gold,#FF8A1F);box-shadow:0 8px 24px rgba(255, 138, 31,.18)}
.oc-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted,#4d5b6b)}
.oc-full .oc-kicker{color:var(--gold,#FF8A1F)}
.oc-name{font-size:22px;font-weight:700;line-height:1.1;color:var(--ink,#071E4A)}
.oc-price{font-size:18px;font-weight:700;color:var(--primary,#2F7FDC)}.oc-price small{font-size:12px;font-weight:600;color:var(--muted,#4d5b6b);margin-left:4px}
.oc-lead{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--ink,#071E4A)}
.oc-sub{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted,#4d5b6b);margin-top:4px}
.oc-rows{display:flex;flex-direction:column;gap:6px;margin:2px 0 4px}
.oc-rows .pay-row{font-size:14px;color:var(--ink,#071E4A)}
.oc-card .btn-primary,.oc-card .btn-gold{width:100%;margin-top:auto}
/* owner, 5 Sep: "Choose DISHA 360" in the same style as "Choose Clarity", in the DISHA 360 blue */
.oc-card .btn-gold{display:block;border:0;border-radius:999px;background:linear-gradient(135deg,#0D3B8E,#1769D2);color:#fff;font-size:18px;font-weight:700;letter-spacing:.2px;padding:16px;box-shadow:0 8px 22px rgba(13, 59, 142,.28);transition:transform .1s ease,box-shadow .1s ease;cursor:pointer}
.oc-card .btn-gold:active{transform:scale(.97);box-shadow:0 4px 12px rgba(13, 59, 142,.3)}
.oc-star{max-width:520px;margin:10px auto 4px;padding:10px 14px;border-radius:12px;background:#fff7e8;border:1px solid #FFE3C4;color:#B35900;font-size:14px;font-weight:600;line-height:1.4}
/* ---- DISHA 360 hub (v119 order) ---- */
.d360-h{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.d360-n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.d360-h h3{margin:0;font-size:18px}
.d360-lock{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:#fff4dc;color:#B35900;font-size:12px;font-weight:700}
.d360-hero-note{margin:8px 0 0;font-size:14px;opacity:.9}
.d360-phase{background:#fff;border:1px solid var(--line,#E3EEFC);border-radius:14px;padding:10px 12px;margin:0 0 8px}
.d360-phase summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.d360-phase summary::-webkit-details-marker{display:none}
.d360-phase-what{font-size:14px;color:var(--muted);margin:8px 0 6px}
.d360-weeklist{margin:0;padding-left:22px;font-size:14px}
.d360-weeklist li{margin:4px 0}.d360-weeklist li.is-done{color:var(--success,#167A4C)}
.d360-week{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;text-decoration:underline dotted;cursor:pointer}
.d360-videos{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.d360-videos{grid-template-columns:1fr 1fr}}
.d360-video{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line,#E3EEFC)}
.d360-video video,.d360-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.d360-video-t{padding:8px 10px 10px;font-size:14px}.d360-video-t small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

.d360-old{display:block;text-align:center;margin:10px 0 0;font-size:14px}

.wl-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#4d5b6b);margin:10px 0 2px}
.wl-trends .chip-trend{background:var(--warning-bg);border-color:#FFC285}

/* ---- DISHA 360 dashboard (v127) ---- */
.d360-dash{margin:10px 14px 4px}
.d360-dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.d360-meter{background:#fff;border:1px solid var(--line,#E3EEFC);border-radius:14px;padding:10px 12px}
.d360-meter-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted)}.d360-meter-h b{font-size:16px;color:var(--ink)}
.d360-meter .meter{margin:6px 0 4px}.d360-meter small{display:block;font-size:12px;color:var(--muted)}
.d360-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--primary);margin-bottom:4px}
.d360-this-week{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line,#E3EEFC);border-left:5px solid var(--primary);border-radius:14px;padding:12px 14px;margin-top:10px}
.d360-this-week b{display:block;font-size:16px}.d360-this-week p{margin:4px 0 0;font-size:14px;color:var(--muted)}.d360-this-week .btn-primary{flex:0 0 auto;padding:10px 14px}
.d360-continue{margin-top:10px}.d360-continue .rm-chip{margin:4px 6px 0 0}
.d360-task{border-left:5px solid var(--primary)}
.d360-q{display:block;font-weight:600;font-size:14px;margin:8px 0}.d360-q textarea{display:block;width:100%;margin-top:4px;font:inherit;font-weight:400;padding:8px 10px;border:1px solid var(--line,#E3EEFC);border-radius:10px;resize:vertical}
@media (max-width:380px){.d360-this-week{flex-direction:column;align-items:stretch}}

.d360-q input{display:block;width:100%;margin-top:4px;font:inherit;font-weight:600;padding:10px 12px;border:1px solid var(--line,#E3EEFC);border-radius:10px;background:#fff}

/* ---- The Future Leaders Lab + Ask a mentor (6 Sep 2026) ---- */
.fll-tile{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid #e3e9f0;border-radius:14px;padding:10px;margin:8px 0;font:inherit;color:var(--ink);cursor:pointer}
.fll-tile img{width:84px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.fll-tile > span{flex:1;min-width:0}
.fll-tile b{display:block;font-size:16px}
.fll-tile .fll-fmt{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--primary);margin-top:2px}
.fll-tile small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.fll-tile .fll-state{font-size:12px;font-weight:700;color:#167A4C;flex:none}
/* 12 Oct 2026 (owner): the Leaders Lab in the previous web app's layout */
.fll-hero{position:relative;border-radius:22px;padding:24px 22px 40px;color:#fff;background:linear-gradient(135deg,#0D3B8E,#1769D2);overflow:hidden}
.fll-hero-k{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:#FF9A3C}
.fll-hero h2{margin:6px 0 6px;font-size:26px;line-height:1.15;color:#fff;font-weight:800}
.fll-hero p{margin:0;max-width:560px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.9)}
.fll-cup{position:absolute;right:22px;top:22px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:32px;background:rgba(255,255,255,.12)}
.fll-how{position:relative;z-index:2;margin:-24px 18px 16px;border-radius:14px;background:#FF8A1F;color:#fff;box-shadow:0 10px 22px rgba(255,138,31,.32)}
.fll-how>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px 16px;font-weight:800;font-size:14.5px;cursor:pointer}
.fll-how>summary::-webkit-details-marker{display:none}
.fll-how-i{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font-size:11px;font-style:normal}
.fll-how-a{margin-left:auto;transition:transform .2s}.fll-how[open] .fll-how-a{transform:rotate(90deg)}
.fll-how ol{margin:0;padding:4px 18px 14px 36px;font-size:13.5px;line-height:1.5}.fll-how li{margin:4px 0}
.fll-arenas{background:#fff;border:1px solid #E3E9F0;border-radius:18px;padding:20px 16px 16px;text-align:center;box-shadow:0 6px 20px rgba(13,59,142,.06)}
.fll-arenas h3{margin:0;font-size:16px;font-weight:800;letter-spacing:.04em;color:#0D3B8E}.fll-arenas h3 span{color:#E8962E}
.fll-arenas>p{margin:6px 0 14px;font-size:13px;color:#5F6B7A}
.fll-grid{display:grid;grid-template-columns:1fr;gap:10px;text-align:left}
.fll-row{display:flex;align-items:center;gap:14px;width:100%;padding:10px;border:1px solid #E3E9F0;border-radius:14px;background:#fff;font:inherit;color:inherit;cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s,border-color .12s}
.fll-row:not(.soon):hover{transform:translateY(-1px);border-color:#B9D3F3;box-shadow:0 8px 18px rgba(13,59,142,.08)}
.fll-row img{flex:0 0 108px;width:108px;height:72px;object-fit:cover;border-radius:10px}
.fll-row>span{flex:1;min-width:0}.fll-row b{display:block;font-size:15px;color:#0D3B8E}.fll-row small{display:block;font-size:12.5px;color:#5F6B7A;margin-top:2px}
.fll-st{display:inline-block;margin-top:5px;font-style:normal;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:#E8F6EE;color:#167A4C}
.fll-row.soon{cursor:default}.fll-row.soon .fll-st{background:#EEF1F5;color:#5F6B7A}
.fll-row>em{font-style:normal;color:#1769D2;font-size:18px;padding-right:6px}.fll-row.soon>em{color:#C6D2E2}
.fll-track{margin:16px 0 12px;padding:20px 16px;border:1.5px solid #F4B566;border-radius:18px;background:#FFFAF2;text-align:center}
.fll-track-i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #E3E9F0}
.fll-track h3{margin:8px 0 4px;font-size:16px;color:#0D3B8E}.fll-track>p{margin:0;font-size:13px;color:#3F4A57}
.fll-track-list{text-align:left;margin-top:8px}
html.wide-nav .fll-scroll>*{max-width:1000px;margin-left:auto;margin-right:auto}
html.wide-nav .fll-hero{padding:30px 34px 52px}html.wide-nav .fll-hero h2{font-size:32px}
html.wide-nav .fll-how{max-width:480px;margin:-26px auto 20px}
html.wide-nav .fll-grid{grid-template-columns:1fr 1fr;gap:12px}
html.wide-nav .fll-arenas{padding:26px 26px 22px}
/* 12 Oct 2026 (owner): My account, redone */
.ac-scroll{padding-bottom:28px!important}
.ac-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#0D3B8E,#1769D2);box-shadow:0 10px 26px rgba(13,59,142,.18);margin-bottom:16px}
.ac-av{flex:0 0 60px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55)}
.ac-who{flex:1;min-width:0}.ac-who b{display:block;font-size:20px;font-weight:800;line-height:1.2}.ac-who small{display:block;font-size:13px;color:rgba(255,255,255,.82);margin-top:2px}
.ac-plan-b{display:inline-block;margin-top:7px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.2);color:#fff}
.ac-plan-b.p360,.ac-plan-b.pcl{background:#FF8A1F}
.ac-hero-go{flex:0 0 auto;margin:0!important;border:0;border-radius:999px;background:#fff!important;color:#0D3B8E!important;font:inherit;font-weight:800;font-size:13.5px;padding:10px 16px!important;cursor:pointer;width:auto!important;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.ac-cols{display:grid;grid-template-columns:1fr;gap:14px}.ac-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.ac-card{background:#fff;border:1px solid #E3E9F0;border-radius:18px;padding:16px;box-shadow:0 4px 16px rgba(13,59,142,.05)}
.ac-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.ac-h h3{margin:0;font-size:16.5px;color:#0D3B8E}.ac-h p{margin:2px 0 0;font-size:12.5px;color:#5F6B7A;line-height:1.45}
.ac-ic{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#EAF2FD;color:#1769D2}
.ac-ic svg{width:18px;height:18px}.ac-ic.gold{background:#FFF1E3;color:#C2560A}.ac-ic.green{background:#E8F6EE;color:#167A4C}.ac-ic.grey{background:#EEF1F5;color:#475467}
.ac-sub{margin:14px 0 2px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1769D2}.ac-sub span{text-transform:none;letter-spacing:0;font-weight:500;color:#5F6B7A;margin-left:6px}
.ac-card label{font-size:12.5px;font-weight:600;color:#3F4A57;text-transform:none;letter-spacing:0}
.ac-card .acct-in{border:1.5px solid #E3E9F0;border-radius:12px;background:#fff}
.ac-card .acct-in:focus{border-color:#1769D2;box-shadow:0 0 0 3px rgba(23,105,210,.15);outline:none}
.ac-fine{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:#5F6B7A}
.ac-actions{display:flex;justify-content:flex-end;margin-top:14px}.ac-actions .btn-primary{width:auto!important;min-width:200px}
.ac-plans{display:grid;grid-template-columns:1fr;gap:10px}
.ac-plan{border:1.5px solid #E3E9F0;border-radius:14px;padding:14px;background:#FAFCFF}
.ac-plan.on{border-color:#A8DCC1;background:#F3FBF6}.ac-plan.on.p360{border-color:#F4B566;background:#FFFAF2}
.ac-plan-t{display:flex;align-items:center;justify-content:space-between;gap:8px}.ac-plan-t b{font-size:15px;color:#0D3B8E}
.ac-plan p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:#5F6B7A}
.ac-plan .btn-gold,.ac-plan .btn-primary{width:100%;margin-top:10px}
.ac-link-b{display:block;width:100%;margin-top:8px;border:0;background:none;color:#1769D2;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.ac-plan-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:12px;color:#5F6B7A}
.ac-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #EEF2F7}.ac-h+.ac-row{border-top:0;padding-top:2px}
.ac-row .ac-ic{flex-basis:32px;width:32px;height:32px;border-radius:10px}
.ac-row-t{flex:1;min-width:0}.ac-row-t b{display:block;font-size:14px;color:#16202c}.ac-row-t small{display:block;font-size:12px;color:#5F6B7A;line-height:1.4}
.ac-row-b{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.ac-chip{border:1.5px solid #CFE0F7;background:#fff;color:#1769D2;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ac-chip:hover{background:#EAF2FD}.ac-chip.danger{border-color:#F3B4AE;color:#B42318}.ac-chip.danger:hover{background:#FDECEC}
.ac-links .acct-link{border-radius:10px}
/* account form: more air, smaller type in the parent section */
.ac-sub span{display:block;margin:3px 0 0!important;font-size:12px}
.ac-sub{margin-top:20px;padding-top:16px;border-top:1px solid #EEF2F7}.ac-h+.ac-sub,.ac-h+.acct-msg+.ac-sub{border-top:0;padding-top:0;margin-top:4px}
.ac-card label{display:block;margin:12px 0 5px}
.ac-card .acct-in{font-size:14px;padding:10px 12px;min-height:42px}
.ac-card .acct-in::placeholder{color:#9AA6B5}
.ac-card .acct-row2{gap:12px}
.ac-card .acct-check{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:12px;border-radius:12px;background:#F5F8FC}
.ac-card .acct-check span{font-size:12.5px;line-height:1.5;font-weight:500;color:#3F4A57}
.ac-card .acct-check input{margin-top:2px;flex:0 0 auto}
.ac-actions{margin-top:18px}.ac-actions .btn-primary{min-width:0!important;padding:11px 22px!important;font-size:14.5px!important;min-height:0!important}.ac-links .acct-link:hover{background:#F5F8FC}
@media (max-width:520px){.ac-row{flex-wrap:wrap}.ac-row-b{width:100%;justify-content:flex-start;padding-left:44px}.ac-hero-go{width:100%!important;text-align:center}}
html.wide-nav .ac-scroll>*{max-width:1100px;margin-left:auto;margin-right:auto}
html.wide-nav .ac-cols{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
html.wide-nav .ac-plans{grid-template-columns:1fr 1fr}
html.wide-nav .ac-hero{padding:22px 26px}
html.wide-nav .ac-scroll{scrollbar-width:none}html.wide-nav .ac-scroll::-webkit-scrollbar{display:none}
/* 12 Oct 2026 (owner): Skill Studios and DISHA Challenges in the Leaders Lab look */
.sth-hero{position:relative;border-radius:20px;padding:20px 20px 18px;color:#fff;background:linear-gradient(135deg,#0D3B8E,#1769D2);overflow:hidden;margin-bottom:14px;box-shadow:0 10px 26px rgba(13,59,142,.16)}
.sth-hero h2{margin:6px 0 6px;padding-right:70px;font-size:22px;line-height:1.2;color:#fff;font-weight:800}
.sth-hero p{margin:0;max-width:620px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.9)}
.sth-hero .fll-cup{width:54px;height:54px;font-size:26px;right:18px;top:18px}
.sth-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sth-stats span{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12.5px;color:#fff}.sth-stats b{font-weight:800;color:#FFB15C}
.sth-now{background:#fff;border:1px solid #E3E9F0;border-radius:18px;padding:16px 16px 4px;margin-bottom:6px;box-shadow:0 4px 16px rgba(13,59,142,.05)}
.sth-now .mo-q{font-size:15.5px;color:#0D3B8E;font-weight:800}
.sth-now .mo-sug{background:#FFF4E8;border:1px solid #F8D3A6}
.sth-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:16px 2px 10px}
.sth-h h3{margin:0;font-size:16px;font-weight:800;color:#0D3B8E}.sth-h small{font-size:12.5px;color:#5F6B7A}
.sth-grid{display:grid;grid-template-columns:1fr;gap:10px}
.sth-card{margin:0;align-items:flex-start;padding:14px;border:1px solid #E3E9F0;border-radius:16px;box-shadow:0 4px 14px rgba(13,59,142,.05);cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
.sth-card:hover{transform:translateY(-1px);border-color:#B9D3F3;box-shadow:0 8px 18px rgba(13,59,142,.08)}
.sth-card .st-ic{background:#EAF2FD}
.sth-card .st-main b{font-size:15px;color:#0D3B8E}
.sth-card .st-bar{height:5px;background:#EEF2F7}
.sth-st{display:block;margin-top:8px;font-style:normal;font-size:12.5px;font-weight:700;color:#1769D2}
.sth-card.going .sth-st{color:#C2560A}.sth-card.done{background:#F3FBF6;border-color:#A8DCC1}.sth-card.done .sth-st{color:#167A4C}
.chx-top{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px}
.chx-top .sth-hero{margin:0}
.chx-top .aw-card{margin:0;background:#fff;border:1px solid #E3E9F0;border-radius:18px;padding:16px}
.chx-folds{display:grid;grid-template-columns:1fr;gap:10px}
.chx-folds .ch-fold{margin:0;border-color:#E3E9F0;border-radius:14px}.chx-folds .ch-fold summary{color:#0D3B8E}
.chx-mine .ch-card{border-color:#F4B566;background:#FFFAF2}
.chx-areas{display:grid;grid-template-columns:1fr;gap:12px}
.chx-area{background:#fff;border:1px solid #E3E9F0;border-radius:18px;padding:14px 14px 6px;box-shadow:0 4px 16px rgba(13,59,142,.05)}
.chx-area-h{display:flex;align-items:center;gap:12px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid #EEF2F7}
.chx-area-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:#FFF1E3}
.chx-area-h h3{margin:0;font-size:15.5px;font-weight:800;color:#0D3B8E}.chx-area-h small{display:block;font-size:12.5px;color:#5F6B7A}
.chx-row{margin:0;border:0;border-radius:12px;padding:10px 8px;box-shadow:none;cursor:pointer}
.chx-row+.chx-row{border-top:1px solid #EEF2F7;border-radius:0}
.chx-row:hover{background:#F5F8FC}.chx-row .ch-main b{font-size:14px;color:#16202c}.chx-row .ch-main small{font-size:12.5px;line-height:1.4}
html.wide-nav .sth-scroll>*,html.wide-nav .chx-scroll>*{max-width:1100px;margin-left:auto;margin-right:auto}
html.wide-nav .sth-hero{padding:24px 28px 22px}html.wide-nav .sth-hero h2{font-size:26px}
html.wide-nav .sth-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html.wide-nav .chx-top{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:stretch}
html.wide-nav .chx-folds{grid-template-columns:1fr 1fr;align-items:start}
html.wide-nav .chx-areas{display:block;columns:2;column-gap:12px}html.wide-nav .chx-area{break-inside:avoid;margin-bottom:12px}

/* 12 Oct 2026 (owner): the bell and the Notifications page, as in the previous web app */
.nt-bell{position:relative}
.nt-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#EF4444;color:#fff;font-style:normal;font-size:10px;font-weight:800;line-height:17px;text-align:center;border:2px solid #0D3B8E;box-sizing:content-box}
.nt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.nt-head b{display:block;font-size:17px;font-weight:800;color:#0D3B8E}.nt-head small{display:block;font-size:12.5px;color:#5F6B7A;margin-top:2px}
.nt-list{display:flex;flex-direction:column;gap:10px}
.nt-item{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;padding:14px 16px;border:1px solid #E3E9F0;border-radius:16px;background:#fff;text-align:left;font:inherit;color:inherit;cursor:pointer;box-shadow:0 2px 10px rgba(13,59,142,.04);transition:border-color .12s,box-shadow .12s}
.nt-item:hover{border-color:#B9D3F3;box-shadow:0 8px 18px rgba(13,59,142,.08)}
.nt-item.new{background:#F5F9FF;border-color:#CFE0F7}
.nt-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:#EAF2FD}
.nt-ic.nt-fll,.nt-ic.nt-challenge{background:#FFF1E3}.nt-ic.nt-app{background:#E8F6EE}
.nt-body{flex:1;min-width:0}
.nt-type{display:inline-block;padding:2px 8px;border-radius:999px;background:#E8EEFC;color:#1D4ED8;font-size:10.5px;font-weight:800;letter-spacing:.05em;margin-bottom:5px}
.nt-body b{display:block;font-size:14.5px;font-weight:800;color:#0F172A;line-height:1.35}
.nt-body small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.5;color:#475569;margin-top:3px}
.nt-body em{display:block;margin-top:7px;font-style:normal;font-size:11.5px;font-weight:700;color:#94A3B8}
.nt-dot{position:absolute;top:16px;right:16px;width:9px;height:9px;border-radius:50%;background:#FF8A1F}
.nt-empty{background:#fff;border:1px dashed #CBD5E1;border-radius:18px;padding:34px 20px;text-align:center}
.nt-empty span{font-size:30px}.nt-empty b{display:block;margin-top:8px;font-size:16px;color:#0D3B8E}.nt-empty p{margin:6px auto 0;max-width:380px;font-size:13px;line-height:1.5;color:#64748B}
html.wide-nav .nt-scroll>*{max-width:760px;margin-left:auto;margin-right:auto}
html.wide-nav .sth-scroll,html.wide-nav .chx-scroll{scrollbar-width:none}html.wide-nav .sth-scroll::-webkit-scrollbar,html.wide-nav .chx-scroll::-webkit-scrollbar{display:none}
html.wide-nav .fll-scroll,html.wide-nav .mt-scroll{scrollbar-width:none}html.wide-nav .fll-scroll::-webkit-scrollbar,html.wide-nav .mt-scroll::-webkit-scrollbar{display:none}
@media (max-width:520px){.fll-row img{flex-basis:84px;width:84px;height:62px}.fll-row b{font-size:14px}.fll-how>summary{font-size:13.5px}}
.fll-hero-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin:8px 0}
.fll-slot{display:block;width:100%;text-align:left;border:1.5px solid #e3e9f0;background:#fff;border-radius:12px;padding:10px 12px;margin:6px 0;font:inherit;color:var(--ink)}
.fll-slot.on{border-color:var(--primary);box-shadow:0 0 0 2px rgba(91, 155, 232,.18)}
.fll-slot small{color:var(--muted)}
.fll-reg{border-top:1px solid #E2E8F0;padding:10px 0}
.fll-reg:first-of-type{border-top:0}
.fll-reg.is-new b::before{content:'● ';color:var(--primary)}
.fll-reg .link{margin-top:4px}
.fll-links a{display:inline-block;margin:6px 8px 0 0;font-weight:600}
.fll-input{display:block;width:100%;font:inherit;padding:10px 12px;border:1.5px solid #e3e9f0;border-radius:12px;margin-top:8px;background:#fff}
.msg-list{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.msg{max-width:88%;padding:10px 12px;border-radius:14px;font-size:16px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg.me{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.msg.them{align-self:flex-start;background:#EEF2F7;color:var(--ink);border-bottom-left-radius:4px}
.msg time{display:block;font-size:12px;opacity:.75;margin-top:4px}
.msg-compose{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.msg-compose textarea{flex:1;min-height:64px;font:inherit;padding:10px 12px;border:1.5px solid #e3e9f0;border-radius:12px;resize:vertical;background:#fff;color:var(--ink)}
.msg-compose .btn-primary{width:auto;padding-left:18px;padding-right:18px}
/* 12 Oct 2026 (owner): the Ask Mentor page in the previous web app's layout */
.mt-scroll{padding-bottom:90px!important}
.mt-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:4px 0 12px;background:#fff;border-radius:16px;box-shadow:0 10px 26px rgba(13,59,142,.12);position:relative;z-index:2}
.mt-tabs button{border:0;border-radius:12px;padding:11px 6px;background:none;font:inherit;font-size:13px;line-height:1.25;font-weight:700;color:#3F4A57;cursor:pointer}
.mt-tabs button.on{background:linear-gradient(135deg,#0D3B8E,#1769D2);color:#fff;box-shadow:0 6px 14px rgba(13,59,142,.22)}
.mt-dot{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;border-radius:999px;background:#FF8A1F;color:#fff;font-style:normal;font-size:11px;padding:0 5px}
.mt-card{background:#fff;border-radius:18px;padding:16px;box-shadow:0 6px 20px rgba(13,59,142,.07);min-height:200px}
.mt-card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid #EEF2F7;font-size:12.5px;color:#5F6B7A}
.mt-refresh{flex:0 0 auto;border:1.5px solid #CFE0F7;background:#fff;color:#1769D2;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.mt-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:140px;text-align:center}
.mt-empty b{font-size:14.5px;color:#3F4A57}.mt-empty span{font-size:12.5px;color:#1769D2}
.mt-screen .msg{font-size:14.5px}
.mt-compose{position:absolute;left:0;right:0;bottom:var(--bnav-h,64px);z-index:20;display:flex;gap:10px;align-items:center;padding:10px 14px;background:#fff;border-top:1px solid #E3E9F0}
.mt-compose textarea{flex:1;min-width:0;height:44px;min-height:44px;max-height:120px;resize:none;font:inherit;font-size:14.5px;padding:11px 18px;border:1.5px solid #E3E9F0;border-radius:999px;background:#fff;color:#16202c}
.mt-compose textarea:focus{outline:none;border-color:#1769D2;box-shadow:0 0 0 3px rgba(23,105,210,.15)}
.mt-send{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0D3B8E,#1769D2);color:#fff;cursor:pointer;box-shadow:0 6px 14px rgba(13,59,142,.25)}
.mt-send svg{width:18px;height:18px}.mt-send:disabled{opacity:.6}
html.wide-nav .mt-compose{position:fixed;left:var(--wsb-w);bottom:0;padding:10px max(28px,calc((100% - var(--wsb-w) - 1100px)/2))}
html.wide-nav .mt-scroll>*{max-width:930px;margin-left:auto;margin-right:auto}
html.wide-nav .mt-tabs{margin-top:4px}
html.wide-nav .mt-card{min-height:220px}html.wide-nav .mt-tabs button{font-size:14px;padding:12px 8px}

/* the "put DISHA on your home screen" screen (6 Sep 2026) */
/* the install steps sit in the middle of the screen, not at the top (owner, 6 Sep 2026) */
.ins-scroll { display: flex; flex-direction: column; justify-content: center; }
.ins-mid { text-align: center; padding: 10px 4px; }
.ins-icon { width: 84px; height: 84px; border-radius: 20px; display: block; margin: 0 auto 16px; box-shadow: 0 8px 22px rgba(10, 44, 107,.16); }
.ins-big { font-size:54px; line-height: 1; color: var(--primary, #2F7FDC); margin-bottom: 10px; }
.ins-picks { display: grid; gap: 12px; margin-top: 8px; }
.ins-pick { min-height: 60px; padding: 16px; border-radius: 16px; border: 1px solid var(--line, #e6ded6); background: #fff;
            color: var(--ink, #2b241d); font: inherit; font-size:18px; font-weight:700; text-align: left; }
.ins-steps { margin: 6px 0 0; padding-left: 24px; color: var(--body, #334155); font-size:16px; line-height: 1.7; }
.ins-steps li { margin: 0 0 8px; }

/* the mentor speaking over the first reading (owner, 8 Sep 2026): the face in a circle, the wave beside it */
.free-speak { display:flex; align-items:center; gap:14px; margin:10px 16px 0; padding:12px 14px; border-radius:18px;
              background:var(--bg-warm, #fdf1e8); border:1px solid var(--line, #FFE3C4); }
.free-speak .free-face { flex:none; width:62px; height:62px; border-radius:50%; object-fit:cover;
                         box-shadow:0 4px 14px rgba(10, 44, 107,.18); border:2px solid #fff; }
.free-speak-body { flex:1; min-width:0; }
.free-speak-who { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary, #2F7FDC); }
.free-wave { display:flex; gap:3px; height:22px; align-items:center; margin-top:6px; }
.free-wave i { width:4px; border-radius:2px; background:linear-gradient(180deg, var(--accent-light, #FFA552), var(--primary, #2F7FDC));
               animation: wavebar 1s ease-in-out infinite; }
.free-wave i:nth-child(2n){ animation-delay:.18s } .free-wave i:nth-child(3n){ animation-delay:.32s }
.free-wave i:nth-child(5n){ animation-delay:.46s }
.ri-opt.on { border-color: var(--primary, #2F7FDC); background: var(--bg-warm, #fdf1e8); }

/* signing in from the account screen, when the number already has a journey (owner, 9 Sep 2026) */
.reg-signin { margin:12px 0 4px; padding:12px 14px; border-radius:16px;
              background:var(--bg-soft, var(--bg-soft)); border:1px solid var(--line, #ecdccd); }
.reg-signin p { margin:0 0 8px; font-size:14px; line-height:1.5; }
.reg-signin .cta-dock-inline { margin:0; }

/* the coordinator's guide (9 Sep 2026): one picture per spoken part */
.guide-img { margin: 10px 14px 12px; border-radius: 18px; overflow: hidden; background: var(--bg-soft, var(--bg-soft)); box-shadow: var(--shadow-card); }
.guide-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- the home page and the bottom navigation (owner, 12 Sep 2026) ---- */
.bnav{flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(10, 44, 107,.06)}
.bnav-b{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;padding:5px 1px 3px;color:var(--muted);font:inherit;font-size:12px;font-weight:700;min-width:0;border-radius:12px}
.bnav-i{position:relative;font-size:22px;line-height:1;width:40px;height:30px;display:grid;place-items:center;border-radius:12px;transition:background .15s}
.bnav-b.on{color:var(--primary-dark)}.bnav-b.on .bnav-i{background:var(--bg-teal)}
.bnav-b:active .bnav-i{transform:scale(.92)}
.bnav-l{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnav-lock{position:absolute;right:-1px;bottom:-3px;font-size:12px;font-style:normal}
.bnav-dot{position:absolute;right:3px;top:0;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid #fff}
/* 3 Oct 2026: the footer in the DISHA Android app's style - line icons, grey #7C8799; the open tab: a soft blue wash,
   a lavender pill behind a blue #1769D2 icon, a navy #0D3B8E label and a short orange bar on top */
.bnav{padding-top:0}
.bnav-b{position:relative;color:#7C8799;border-radius:0;padding:8px 1px 5px;font-weight:800}
.bnav-i{font-size:0;color:#7C8799;width:40px;height:30px}
.bnav-i .nav-svg{width:23px;height:23px;display:block}
.bnav-b.on{color:#0D3B8E;background:linear-gradient(180deg,#dbe4ff 0%,#f6f8ff 78%)}
.bnav-b.on .bnav-i{background:#c7d2fe;color:#1769D2;border-radius:16px}
.bnav-b.on .bnav-i .nav-svg{transform:translateY(-1px) scale(1.08);filter:drop-shadow(0 2px 6px rgba(26,42,108,.34))}
.bnav-b.on::after{content:'';position:absolute;top:0;left:50%;width:34px;height:4px;margin-left:-17px;border-radius:99px;background:#FF8A1F}
.bnav-lock{font-size:12px}
.wsb-ic .nav-svg{width:20px;height:20px;display:block}
.hub-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px 8px}
.hub-head>div:first-child{flex:1 1 auto;min-width:0}.hub-head .stop-top.lang{flex:0 0 auto}
.hub-title{font-size:22px;font-weight:700;line-height:1.2;margin-top:2px}
.hub-plan{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.5px;padding:5px 10px;border-radius:999px;background:var(--bg-teal);color:var(--primary-dark)}
.hub-plan.full{background:linear-gradient(135deg,#0D3B8E,#1769D2);color:#fff}
.hub-scroll{padding:4px 18px 22px}
.hub-sec{margin:18px 0 0}
.hub-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px}
.hub-sec-h h3{margin:0;font-size:16px;font-weight:700}.hub-sec-h small{font-size:12px;font-weight:600;color:var(--muted);text-align:right}
.home-report{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:20px;padding:16px;background:var(--grad-hero);color:#fff;box-shadow:var(--shadow-pop);font:inherit}
.home-report-ic{font-size:26px;flex:0 0 auto}.home-report>span:nth-child(2){flex:1;min-width:0}
.home-report b{display:block;font-size:18px;font-weight:700}.home-report em{display:block;font-style:normal;font-size:12px;opacity:.92;margin-top:2px;line-height:1.4}
.home-arrow{font-size:26px;font-weight:700;opacity:.9;flex:0 0 auto}
.home-line{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 4px 0;font:inherit;font-size:14px;font-weight:700;color:var(--primary-dark)}
.home-any{display:flex;align-items:center;gap:12px;width:100%;border:1.5px solid var(--border);border-radius:18px;background:#fff;padding:10px 12px;font:inherit;font-weight:700;font-size:14px;color:var(--ink);text-align:left;box-shadow:var(--shadow-card)}
.home-any-strip{display:flex;flex:0 0 auto}.home-any-strip img{width:44px;height:44px;object-fit:cover;border-radius:12px;border:2px solid #fff;margin-left:-12px;box-shadow:0 2px 6px rgba(0,0,0,.15)}.home-any-strip img:first-child{margin-left:0}
.home-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-tile{display:grid;gap:3px;text-align:left;border:1.5px solid var(--border);border-radius:18px;background:#fff;padding:14px;font:inherit;color:var(--ink);box-shadow:var(--shadow-card)}
.home-tile>span{font-size:26px}.home-tile b{font-size:14px;font-weight:700;line-height:1.2}.home-tile em{font-style:normal;font-size:12px;color:var(--muted);line-height:1.35}
.home-foot{font-size:12px;color:var(--muted);text-align:center;margin:18px 0 0;line-height:1.5}
.vi-select-card.is-done{outline:3px solid var(--success);outline-offset:-3px}
/* 10 Oct 2026: "Your virtual internships" on a laptop - the three internships side by side as tall picture cards sized to
   the window, so the page needs no scrolling; the words at the foot of each picture, the arrow in its top corner */
html.wide .vi-select-scroll{padding:4px 32px 16px}
html.wide .vi-select-title{padding:4px 10px 16px}
html.wide .vi-select-title h1{font-size:28px;margin:4px 0 8px}
html.wide .vi-select-title>p{font-size:14.5px;padding:8px 16px}
html.wide .vi-select-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
html.wide .vi-select-card{height:clamp(220px,calc(100svh - 450px),400px);border-radius:20px;transition:transform .15s ease,box-shadow .15s ease}
html.wide .vi-select-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(13,59,142,.22)}
html.wide .vi-select-card:focus-visible{outline:3px solid #9CC3F5;outline-offset:3px}
html.wide .vi-select-shade{background:linear-gradient(180deg,rgba(12,14,19,.05) 30%,rgba(12,14,19,.55) 58%,rgba(12,14,19,.9))}
html.wide .vi-select-copy{left:18px;right:18px;bottom:16px;gap:3px}
html.wide .vi-select-copy small{font-size:11.5px;letter-spacing:.1em}
html.wide .vi-select-copy b{font-size:21px;line-height:1.15}
html.wide .vi-select-copy em{font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html.wide .vi-select-arrow{top:14px;right:14px;transform:none;width:34px;height:34px;font-size:26px}
html.wide .vi-select-card[data-vi-round]:first-child{box-shadow:0 0 0 3px #FF8A1F,0 12px 28px rgba(13,59,142,.18)}
html.wide .vi-select-card.is-done{outline-offset:-3px}
/* the fourth world ("also matched", swap into internship 3) - a slim strip under the three cards instead of a fourth picture */
html.wide .vi-select-title:has(+.vi-select-list>[data-vi-swap]){display:none}
html.wide .vi-select-list:has(>[data-vi-swap]){grid-template-columns:1fr;margin-top:16px}
html.wide .vi-select-list>[data-vi-swap]{height:auto;padding:11px 60px 11px 18px;border-radius:14px;background:#F7FAFF;box-shadow:inset 0 0 0 1.5px #A9C6EE}
html.wide .vi-select-list>[data-vi-swap]:hover{transform:none;box-shadow:inset 0 0 0 1.5px #1769D2;background:#EEF6FF}
html.wide .vi-select-list>[data-vi-swap] img,html.wide .vi-select-list>[data-vi-swap] .vi-select-shade{display:none}
html.wide .vi-select-list>[data-vi-swap] .vi-select-copy{position:static;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;color:var(--ink)}
html.wide .vi-select-list>[data-vi-swap] .vi-select-copy small{color:#B45309}
html.wide .vi-select-list>[data-vi-swap] .vi-select-copy b{font-size:16px;color:#0D3B8E}
html.wide .vi-select-list>[data-vi-swap] .vi-select-copy em{font-size:13.5px;color:var(--muted);-webkit-line-clamp:1}
html.wide .vi-select-list>[data-vi-swap] .vi-select-arrow{top:50%;transform:translateY(-50%);right:12px;width:32px;height:32px;font-size:18px;background:#1769D2;color:#fff}
html.wide .vi-select-save{font-size:13.5px;margin:14px 0 0}
.ext-card{margin:18px 0 0;padding:16px;border-radius:20px;background:#fff;border:1.5px solid #9EC3F2;box-shadow:0 8px 24px rgba(13, 59, 142,.10)}
.ext-card>b{display:block;font-size:18px;font-weight:700;margin:4px 0 4px}.ext-card p{font-size:14px;line-height:1.5;color:var(--body);margin:0 0 12px}
.ext-card .btn-gold,.ext-inline .btn-gold,.acct-plan .btn-gold.sm{display:block;width:100%;border:0;border-radius:999px;background:linear-gradient(135deg,#0D3B8E,#1769D2);color:#fff;font-size:16px;font-weight:700;padding:15px;box-shadow:0 8px 22px rgba(13, 59, 142,.28);font-family:inherit}
.ext-inline{border:1.5px solid #9EC3F2}.ext-inline b{display:block;font-size:16px;margin-bottom:4px}.ext-inline p{font-size:14px;line-height:1.5;margin:0 0 10px}
.ext-asked{display:block;margin-top:10px;font-size:12px;color:var(--success);font-weight:600}
.crs-player{margin:0 0 12px}.crs-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000;margin-bottom:8px}
.crs-group{background:#fff;border:1px solid var(--border);border-radius:16px;padding:10px 12px;margin:0 0 8px}
.crs-group summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;list-style:none}.crs-group summary::-webkit-details-marker{display:none}
.crs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.crs-tile{display:block;padding:0;border:0;background:#fff;text-align:left;font:inherit;color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)}
.crs-img{position:relative;display:block}.crs-img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#CBD5E1}
.crs-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:14px;font-style:normal;padding-left:3px}
.crs-t{display:block;padding:8px 9px 10px}.crs-t b{display:block;font-size:12px;line-height:1.3}.crs-t small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.crs-tile.on{outline:2px solid var(--primary)}
.crs-sectors{display:flex;flex-wrap:wrap;gap:8px}
/* 12 Oct 2026 (owner): every topic starts closed - a tidy list to open; smaller video cards */
.crs-group{padding:0;margin:0 0 10px;overflow:hidden;transition:box-shadow .12s ease}.crs-group:hover{box-shadow:0 6px 18px rgba(13,59,142,.07)}
.crs-group summary{padding:14px 16px;font-size:15px}.crs-group summary b{color:var(--primary-dark)}
.crs-group summary::after{content:"";flex:0 0 9px;width:9px;height:9px;margin-left:8px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.crs-group[open] summary::after{transform:rotate(225deg) translate(-3px,0)}.crs-group[open] summary{border-bottom:1px solid var(--border)}
.crs-group summary .d360-weeks{margin-left:auto}.crs-group>.crs-grid{padding:0 14px 14px}
.crs-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
html.wide .crs-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.crs-play{width:30px;height:30px;font-size:12px}
.ap-list{display:grid;gap:10px;margin-top:6px}
.ap-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid var(--border);border-radius:18px;background:#fff;padding:14px;font:inherit;color:var(--ink);box-shadow:var(--shadow-card)}
.ap-opt.suggested{border-color:var(--primary);box-shadow:0 8px 22px rgba(91, 155, 232,.16)}
.ap-ic{font-size:26px;flex:0 0 auto}.ap-opt>span:nth-child(2){flex:1;min-width:0}.ap-opt b{display:block;font-size:16px;font-weight:700}.ap-opt em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.ap-opt.suggested em::after{content:' · this device';color:var(--primary-dark);font-weight:700}
/* 15 Sep 2026: the store badge reads as a store badge - the tile is the button */
.ap-store{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;border:1.5px solid var(--border);border-radius:18px;background:#fff;padding:14px;font:inherit;color:var(--ink);box-shadow:var(--shadow-card);cursor:pointer}
.ap-store.suggested{border-color:var(--primary);box-shadow:0 8px 22px rgba(91, 155, 232,.16)}
.ap-store .sb-svg{width:172px;max-width:70%;height:auto;display:block}
.ap-store em{font-style:normal;font-size:12px;color:var(--muted);line-height:1.4;text-align:center}
.ap-store.suggested em::after{content:' \00b7 this device';color:var(--primary-dark);font-weight:700}
.store-links{display:grid;gap:8px;margin-top:10px}
/* ---- skill modules, any order (12 Sep 2026) ---- */
.home-skills{display:grid;gap:6px;width:100%;text-align:left;border:1.5px solid var(--border);border-radius:18px;background:#fff;padding:14px;font:inherit;color:var(--ink);box-shadow:var(--shadow-card)}
.home-skills b{font-size:14px;font-weight:700;line-height:1.3}.home-skills-list{display:grid;gap:2px;font-size:12px;color:var(--body)}.home-skills em{font-style:normal;font-size:14px;font-weight:700;color:var(--primary-dark)}
.skl-list{display:grid;gap:8px}
.skl-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1.5px solid var(--border);border-radius:14px;background:#fff;padding:10px 12px;font:inherit;color:var(--ink)}
.skl-row.is-done{border-color:var(--success);background:#EAF7F0}
.skl-n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--bg-teal);color:var(--primary-dark);font-weight:700;font-size:14px;display:grid;place-items:center}.skl-row.is-done .skl-n{background:var(--success);color:#fff}
.skl-t{flex:1;min-width:0}.skl-t b{display:block;font-size:14px;line-height:1.25}.skl-t small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.skl-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}.skl-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--bg-teal);color:var(--primary-dark)}
/* ---- one skill activity (12 Sep 2026) ---- */
.act-card h3{margin:0 0 8px}
.act-lead{margin:0;font-size:14px;line-height:1.55}
.act-note{margin:6px 0 8px;font-size:14px;color:var(--muted);line-height:1.5}
.act-list{margin:4px 0 0;padding-left:20px;font-size:14px;line-height:1.5}.act-list li{margin:4px 0}
.act-quote{margin:12px 20px 0;padding:14px 16px;border-left:4px solid var(--gold);background:#fff8ec;border-radius:0 14px 14px 0;font-size:14px;line-height:1.55;font-style:italic;color:var(--ink)}
.act-quote small{display:block;margin-top:6px;font-style:normal;font-weight:700;font-size:12px;color:var(--primary-dark)}
.act-video{margin:2px 0 6px}.act-video small{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.act-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#000}
.act-play{position:relative;display:block;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;background:#1E293B}.act-play img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.act-in{display:block;width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;background:#fff;color:var(--ink);margin-top:4px}
textarea.act-in{resize:vertical;min-height:56px}
.act-blank{display:block;margin:8px 0}.act-blank span{display:block;font-size:14px;font-weight:600;color:var(--body)}
.act-check{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--border);font-size:14px;line-height:1.4}.act-check:last-of-type{border-bottom:0}.act-check input{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.act-q{display:block;margin:10px 0}.act-q>span{display:block;font-size:14px;font-weight:700}.act-q>span em{font-style:normal;font-weight:600;font-size:12px;color:var(--muted)}.act-q small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.act-topic{font-size:16px;font-weight:700;line-height:1.4;margin:0 0 6px}
.act-answers{margin-top:10px}.act-answers summary{cursor:pointer;font-weight:700;color:var(--primary-dark)}
.act-rate{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;font-size:14px}.act-rate>span:first-child{flex:1;min-width:0}
.act-rate-btns{display:flex;gap:4px;flex:0 0 auto}.act-rate-b{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border);background:#fff;font:inherit;font-size:14px;font-weight:700;color:var(--muted)}.act-rate-b.on{background:var(--primary);border-color:var(--primary);color:#fff}
.act-done{margin:12px 20px;padding:14px 16px;border-radius:14px;background:#EAF7F0;color:#167A4C;font-size:14px;line-height:1.5}.act-done small{display:block;margin-top:6px;color:#167A4C}
.act-card audio{display:block;width:100%;margin:6px 0 10px}
/* ---- Meet the People: choose a question from the list (13 Sep 2026) ---- */
.people-ask-lead{margin:4px 0 8px;font-size:16px;font-weight:700}
.people-qlist{display:grid;gap:8px}.people-qlist-h{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin:14px 0 2px}
.people-q{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:1.5px solid var(--border);border-radius:14px;background:#fff;padding:11px 12px;font:inherit;font-size:14px;line-height:1.35;color:var(--ink)}
.people-q>span{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--bg-teal);color:var(--primary-dark);font-weight:700;font-size:12px;display:grid;place-items:center;margin-top:-1px}
.people-q.asked>span{background:var(--success);color:#fff}.people-q.on{border-color:var(--primary);background:#fff7f2}
.people-more{margin-top:10px}.people-more summary{cursor:pointer;font-weight:700;color:var(--primary-dark);font-size:14px;margin-bottom:8px}
.gate-note{font-size:12px;color:var(--muted);text-align:center;margin:6px 0 0;line-height:1.4}
.btn-primary.ready + .gate-note, .btn-primary:not(:disabled) + .gate-note{display:none}
/* ---- tap-to-explain glossary (13 Sep 2026) ---- */
.gl{position:relative;text-decoration:underline dotted var(--primary);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer}
.gl .gl-def{display:none;font-style:normal;font-size:14px;line-height:1.45;color:var(--ink);background:#fff8ec;border:1px solid #FFE3C4;border-radius:10px;padding:8px 10px;margin:6px 0 2px}
.gl.open .gl-def{display:block}
.fin-feedback.wrong{background:var(--danger-bg);border-color:var(--danger-200)}.fin-feedback.wrong b{color:var(--danger-text)}
/* a picture still arriving (13 Sep 2026) */
.img-loading{position:relative;background:var(--gray-100)}
.img-loading::after{content:'Loading scene…';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:14px;font-weight:600;color:var(--muted);pointer-events:none}
/* the safety line under every try-at-home activity (13 Sep 2026) */
.safety-note{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fff4dc;color:#B35900;font-size:14px;line-height:1.45}
.safety-note b{color:#B35900}

/* ============================================================================
   16 Sep 2026 — WHY EVERY FIELD IS AT LEAST 16px.

   The owner tested on an iPhone and reported "many pages are going out of the screen of the phone".
   Nothing was too wide. iOS Safari zooms the whole page in whenever you tap a field whose text is
   smaller than 16px — and it never zooms back out. So one tap on the phone-number box, and every
   page afterwards is bigger than the screen and has to be dragged sideways. It looks exactly like a
   broken layout, which is why it was reported as one.

   Measured before the fix: 8 of the 13 kinds of field were under 16px, including the phone number on
   the sign-in, register and forgotten-password screens (13.3px) and the "something else" box in the
   free part (13.3px).

   The bare input/select/textarea rule catches every field that never had a size of its own. The named
   ones below set a smaller size deliberately and have to be named to be overruled. Nothing moves on a
   desktop; on a phone the fields simply read a little larger, which is right anyway. */
input, select, textarea { font-size: 16px; }
.interest-other-input,
.people-conversation select,
.d360-q input, .d360-q textarea,
.cc-row input, .cc-row .cc-pick,
.act-in, textarea.act-in { font-size:16px; }
/* .cc-row .cc-pick is the country-code dropdown, and it was missed on the first pass because a
   standalone test page did not reproduce its real nesting: inside a .d360-q label it takes `font:inherit`
   from the label's 14px, and its two-class selector outranks a bare `select` rule. It is the FIRST thing
   a student touches on sign-in, register and forgotten-password. Lesson: check the live screens, not a
   mock-up, when the rule that bites depends on where the element sits. */

/* ============================================================================
   18 Sep 2026 — the first card of the first reading.

   It used to print the whole narration the mentor was speaking, so a child read every word twice.
   The owner: "no need to display all the narrated wording ... show important and highlighted words
   alone ... and by tapping the student can go to the list of careers, skills and other things."

   So it is now four short rows that follow the narration beat for beat. Each of the three steps is a
   button that slides the carousel to the card holding that detail; the fourth is the finish, drawn
   differently because it is not a step you do. Big touch targets, one idea per line, nothing to read
   twice. */
.step-map { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.step-row {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:14px 14px; border:1.5px solid var(--border-soft); border-radius:16px;
  background:#fff; color:var(--ink); font:inherit; cursor:pointer;
}
.step-row.now { border-color:var(--primary); background:#F0F6FE; }
.step-row:active { transform:scale(.99); }
.step-n {
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:#E3EEFC; color:var(--muted); font-size:16px; font-weight:700;
}
.step-row.now .step-n { background:var(--primary); color:#fff; }
.step-row > span:nth-child(2) { flex:1 1 auto; min-width:0; }
.step-row b { display:block; font-size:16px; font-weight:700; line-height:1.25; }
.step-row em { display:block; font-style:normal; font-size:14px; color:var(--muted); margin-top:2px; }
.step-row.now em { color:var(--primary); font-weight:700; }
.step-go { flex:0 0 auto; color:var(--muted); font-size:22px; font-weight:700; line-height:1; }
.step-end {
  margin-top:2px; padding:14px 14px; border-radius:16px; text-align:center;
  background:linear-gradient(135deg,#fff3e9,#ffe8db); border:1.5px dashed var(--primary);
}
.step-end b { display:block; font-size:16px; font-weight:700; color:var(--primary-dark,#B35900); }
.step-end em { display:block; font-style:normal; font-size:14px; color:var(--muted); margin-top:2px; }

/* 21 Sep 2026 (owner, iPhone testers' report): the journey on the Clarity home, the request-sent
   card, the one-time note on the payment page, and a phone row that fits a narrow screen. */
.jr-list{display:flex;flex-direction:column;gap:8px}
.jr{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border:1.5px solid var(--border-soft);border-radius:16px;background:#fff;color:var(--ink);font:inherit;position:relative}
button.jr{cursor:pointer}
button.jr:active{transform:scale(.99)}
.jr.now{border-color:var(--primary);background:#F0F6FE;box-shadow:0 6px 18px rgba(91, 155, 232,.14)}
.jr.off{opacity:.55}
.jr-n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#E3EEFC;color:var(--muted);font-size:14px;font-weight:700}
.jr.done .jr-n{background:#EAF7F0;color:#167A4C}
.jr.now .jr-n{background:var(--primary);color:#fff}
.jr-t{flex:1 1 auto;min-width:0}
.jr-t b{display:block;font-size:16px;font-weight:700;line-height:1.25}
.jr-t em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35}
.jr.now .jr-t em{color:var(--primary);font-weight:700}
.jr-go{flex:0 0 auto;font-size:22px;color:var(--muted)}
.jr.now .jr-go{color:var(--primary)}
.jr-note{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 2px 0}
.ext-sent{font-size:14px;line-height:1.5;color:var(--success);background:#EAF7F0;border-radius:12px;padding:10px 12px}
.ext-sent b{display:inline;font-size:inherit;margin:0}
.pay-note-once{margin:14px 16px 0;padding:12px 14px;border-radius:14px;background:#F0F6FE;border:1.5px solid #C9DDF8;font-size:14px;line-height:1.5;color:var(--body)}
.pay-note-once b{display:inline}
.cc-row .cc-pick{flex:0 1 auto;width:auto;min-width:0;max-width:46%;text-overflow:ellipsis}
@media (max-width:359px){.cc-row{flex-wrap:wrap}.cc-row .cc-pick{flex:1 1 100%;max-width:none}}

/* 22 Sep 2026: the printable first reading, and My reports in My Account */
.acct-rep{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:10px 0 4px;border-top:1px solid var(--border-soft)}
.acct-rep b{flex:1 1 100%;font-size:14px}
.acct-rep small{flex:1 1 55%;color:var(--muted);font-size:12px;line-height:1.4}
.acct-rep span{display:flex;gap:6px;flex:0 0 auto}
.acct-rep .btn-ghost.sm{width:auto;padding:8px 12px;font-size:14px;margin:0}
.pr-world{padding:8px 0;border-top:1px solid var(--border-soft)}
.pr-world:first-of-type{border-top:0;padding-top:0}
.pr-world b{display:block;font-size:16px}
.pr-world p{margin:4px 0 0;font-size:14px;line-height:1.5}
.pr-list{margin:0;padding-left:18px;font-size:14px;line-height:1.6}
.pr-next{border:1.5px solid var(--primary);background:#F0F6FE}
.pr-next .readback-choice{margin-bottom:8px}
@media print{
  .bnav,#mute-toggle,.stop-top{display:none!important}
  .print-doc .scroll{display:block!important;overflow:visible!important;padding:0 6mm}
  .print-doc .report-card{page-break-inside:avoid;box-shadow:none;border:1px solid #CBD5E1}
  .print-doc .print-head{display:flex}
}
/* 22 Sep 2026: printing - the phone frame is centred in the window, so anything taller than one
   sheet was cut at the top AND the bottom. On paper everything flows from the top. */
@media print{
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  .desk{display:block!important;height:auto!important;min-height:0!important;padding:0!important;overflow:visible!important}
  .phone{display:block!important;height:auto!important;max-height:none!important;overflow:visible!important;border:0!important;border-radius:0!important}
  #app,.screen,.print-doc{display:block!important;height:auto!important;min-height:0!important;overflow:visible!important}
  .print-doc .scroll{height:auto!important}
}

/* 22 Sep 2026: the first reading as a document - hero band, journey map, sector cards with the
   system's own thumbnails, the interest shape, skill meters, the three steps */
.fr-doc .scroll{background:#F0F6FE}
.fr-hero{display:flex;align-items:center;gap:14px;padding:22px 18px 20px;background:var(--grad-hero);color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.fr-face{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.7);flex:0 0 auto}
.fr-hero-t{min-width:0}
.fr-hero-t small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;opacity:.9}
.fr-hero-t b{display:block;font-size:26px;font-weight:700;line-height:1.15;margin-top:2px}
.fr-hero-t span{display:block;font-size:14px;opacity:.92;margin-top:3px}
.fr-body{padding:14px 16px 20px;display:flex;flex-direction:column;gap:12px}
.fr-card{background:#fff;border:1px solid var(--border-soft);border-radius:18px;padding:14px 16px;page-break-inside:avoid;break-inside:avoid}
.fr-card h3{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--ink)}
.fr-map{width:100%;height:auto;display:block}
.fr-quote{display:flex;gap:12px;align-items:flex-start;background:#F0F6FE;border:1.5px solid #C9DDF8;border-radius:18px;padding:14px;page-break-inside:avoid;break-inside:avoid}
.fr-quote img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.fr-quote p{margin:0;font-size:16px;line-height:1.5;font-weight:600;color:var(--ink)}
.fr-sectors{display:flex;flex-direction:column;gap:12px}
.fr-sector{display:flex;gap:12px;align-items:flex-start}
.fr-thumb{position:relative;flex:0 0 96px;width:96px;height:96px;border-radius:14px;overflow:hidden;background:#EEF2F7}
.fr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fr-thumb b{position:absolute;left:6px;top:6px;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:14px;font-weight:700;display:grid;place-items:center}
.fr-sector-t{min-width:0;flex:1}
.fr-sector-t b{display:block;font-size:16px;font-weight:700}
.fr-sector-t p{margin:4px 0 6px;font-size:14px;line-height:1.5;color:var(--body)}
.fr-chip{display:inline-block;font-size:12px;font-weight:600;color:#0D3B8E;background:#F0F6FE;border-radius:999px;padding:4px 10px}
.fr-more{margin:10px 0 0;font-size:12px;color:var(--muted)}
.fr-radar-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fr-radar svg{width:230px;max-width:100%;height:auto;flex:0 0 auto}
.fr-radar-note{flex:1 1 160px;min-width:0}
.fr-radar-note b{display:block;font-size:14px;line-height:1.35}
.fr-radar-note p{margin:6px 0;font-size:14px;line-height:1.5;color:var(--body)}
.fr-radar-note small{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.fr-p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--body)}
.fr-shown{background:#EAF7F0;border-radius:12px;padding:10px 12px;margin-top:4px}
.fr-shown b{display:block;color:#167A4C;font-size:14px}
.fr-shown p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--body)}
.fr-meters{display:flex;flex-direction:column;gap:8px}
.fr-meter{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;font-size:14px;font-weight:600}
.fr-meter i{grid-column:1/-1;display:block;height:10px;border-radius:6px;border:1.5px dashed #e0b8a5;background:repeating-linear-gradient(90deg,#F0F6FE 0 8px,#fff 8px 16px)}
.fr-meter em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;color:#0D3B8E;text-transform:uppercase}
.fr-next{border:1.5px solid var(--primary);background:#F0F6FE}
.fr-steps{display:flex;flex-direction:column;gap:10px}
.fr-step{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:14px;padding:10px 12px}
.fr-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#F0F6FE;display:grid;place-items:center;font-size:22px}
.fr-step b{display:block;font-size:14px;font-weight:700}
.fr-step p{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--body)}
.fr-cta{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--grad-hero);color:#fff;font-size:14px;font-weight:600;line-height:1.5;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.fr-foot{text-align:center;font-size:12px;color:var(--muted);margin:4px 0 0}
@media print{.fr-doc .scroll{background:#fff!important}.fr-doc *{-webkit-print-color-adjust:exact;print-color-adjust:exact}.fr-doc .scroll{padding:0!important}.fr-body{padding:10px 0 0}.fr-hero{border-radius:14px}}

/* 22 Sep 2026: the first reading told page by page - one illustration, one card, one narration, Next */
.fs-screen .scroll{background:#F0F6FE}
.fs-img{margin:10px 16px 0;border-radius:18px;overflow:hidden;background:#F0F6FE;box-shadow:0 8px 22px rgba(10, 44, 107,.08)}
.fs-img img{width:100%;display:block;max-height:38vh;object-fit:cover}
.fs-card{margin:12px 16px 16px;background:#fff;border:1px solid var(--border-soft);border-radius:18px;padding:14px 16px}
.fs-dots{display:flex;align-items:center;gap:5px;margin:0 0 10px}
.fs-dots i{width:8px;height:8px;border-radius:50%;background:var(--gray-100);display:block}
.fs-dots i.done{background:#C9DDF8}.fs-dots i.now{background:var(--primary);width:22px;border-radius:4px}
.fs-dots span{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.fs-h{margin:2px 0 6px;font-size:22px;font-weight:700;line-height:1.2;color:var(--ink)}
.fs-h3{margin:14px 0 6px;font-size:16px;font-weight:700;color:var(--ink)}
.fs-p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--body)}
.fs-foot{margin:10px 0 0;font-size:14px;font-weight:600;color:#0D3B8E}
.fs-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.fs-tile{position:relative;border-radius:14px;overflow:hidden;background:#1E293B;aspect-ratio:4/3}
.fs-tile img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.fs-tile b{position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:14px;font-weight:700;display:grid;place-items:center}
.fs-tile span{position:absolute;left:8px;right:8px;bottom:8px;color:#fff;font-weight:700;font-size:14px;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.fs-flow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.fs-box{background:#F0F6FE;border:1.5px solid #C9DDF8;border-radius:12px;padding:10px 12px;font-size:14px;font-weight:700;text-align:center}
.fs-arrow{grid-column:1/-1;text-align:center;color:var(--primary);font-size:22px;line-height:1}
.fs-box-out{grid-column:1/-1;background:var(--grad-hero);color:#fff;border:0}
.fs-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:6px}
.fs-three div{text-align:center;font-size:22px;background:#F0F6FE;border-radius:12px;padding:10px 4px}
.fs-three b{display:block;font-size:12px;line-height:1.25;margin-top:4px;color:var(--ink)}
.fs-dock{display:flex;gap:8px}
.fs-dock .btn-primary{flex:1 1 auto}
.fs-dock .fs-back{flex:0 0 auto;width:auto;padding-left:14px;padding-right:14px}
.fs-dock-2{margin-top:8px}
.fs-dock-2 .btn-ghost{flex:1 1 0;font-size:14px;padding-left:6px;padding-right:6px}
.fs-dock{flex-wrap:wrap}
.fs-dock .gate-note{flex:1 1 100%;text-align:center;margin-top:6px}
/* 22 Sep 2026: the 360 list under the Clarity journey */
.jr.locked{opacity:.75}
.jr-n.lock{background:#E3EEFC;font-size:14px}
.jr.todo .jr-n{background:#F0F6FE;color:#0D3B8E}
/* 22 Sep 2026: the video opens over the list, never out of sight */
.crs-modal{position:fixed;inset:0;z-index:80;background:rgba(20,12,8,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.crs-modal-box{width:100%;max-width:560px}
.crs-modal-box iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.crs-modal-box .btn-primary{width:100%;margin-top:12px}
/* 22 Sep 2026: the coupon box on the checkout page */
.co-coupon-row{display:flex;gap:8px;align-items:stretch}
.co-coupon-row .acct-in{flex:1 1 auto;min-width:0;text-transform:uppercase}
.co-coupon-row .btn-ghost.sm{flex:0 0 auto;width:auto;padding:0 16px;margin:0}
.co-coupon-line{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:var(--success);padding:6px 0 0}
.co-total s{font-size:16px;color:var(--muted);font-weight:600;margin-right:6px}
/* 23 Sep 2026: "a newer version is ready" bar, and the sign-out row */
.upd-toast{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:90;background:#071E4A;color:#fff;border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;box-shadow:0 12px 30px rgba(0,0,0,.35);font-size:14px;font-weight:600}
.upd-toast span{flex:1 1 160px}
.upd-toast .btn-primary.sm,.upd-toast .btn-ghost.sm{width:auto;padding:8px 14px;margin:0;font-size:14px}
.upd-toast .btn-ghost.sm{color:#fff;border-color:rgba(255,255,255,.4)}
.acct-row2 .btn-ghost.sm{width:100%;margin:0}

/* 23 Sep 2026: the Clarity report as a document (shares the .fr-* first-reading design) */
.rp-style{display:inline-block;margin-top:6px;background:rgba(255,255,255,.2);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.rp-hero-career{background:#F0F6FE;border:1.5px solid var(--primary);border-radius:18px;padding:14px 16px;page-break-inside:avoid;break-inside:avoid}
.rp-hero-career small{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:#0D3B8E}
.rp-hero-career b{display:block;font-size:22px;font-weight:700;line-height:1.2;margin:2px 0 4px}
.rp-hero-career p{margin:0;font-size:14px;line-height:1.5;color:var(--body)}
.rp-paths{display:flex;flex-direction:column;gap:10px}
.rp-path{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:14px;border:1px solid var(--border-soft);page-break-inside:avoid;break-inside:avoid}
.rp-path.top{background:#F0F6FE;border-color:#C9DDF8}
.rp-rank{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#E3EEFC;color:var(--muted);font-weight:700;display:grid;place-items:center;font-size:16px}
.rp-path.top .rp-rank{background:var(--primary);color:#fff}
.rp-path-t{min-width:0;flex:1}
.rp-path-t small{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.rp-path.top .rp-path-t small{color:#0D3B8E}
.rp-path-t b{display:block;font-size:16px;font-weight:700;margin:1px 0 3px}
.rp-path-t p{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--body)}
.rp-chips{display:flex;flex-wrap:wrap;gap:6px}
.rp-chip{font-size:12px;font-weight:700;background:#E3EEFC;color:var(--body);border-radius:999px;padding:4px 9px}
.rp-chip.lv-strong{background:#EAF7F0;color:#167A4C}.rp-chip.lv-grow{background:#F0F6FE;color:#0D3B8E}.rp-chip.lv-build{background:#E3EEFC;color:var(--muted)}
.rp-vis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rp-vi{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#1E293B}
.rp-vi img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.rp-vi span{position:absolute;left:6px;right:6px;bottom:6px;color:#fff;font-weight:700;font-size:12px;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.rp-legend{display:flex;gap:12px;font-size:12px;font-weight:700;margin:0 0 8px}
.rp-legend span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;background:currentColor}
.lv-build{color:#64748B}.lv-grow{color:#FF8A1F}.lv-strong{color:#1E9E63}
.rp-meters{display:flex;flex-direction:column;gap:10px}
.rp-meter-h{display:flex;justify-content:space-between;font-size:14px;font-weight:700}
.rp-bar{position:relative;height:10px;border-radius:6px;background:#E3EEFC;margin:4px 0 2px;overflow:hidden}
.rp-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#9EC3F2,#2F7FDC)}
.rp-bar em{position:absolute;top:0;bottom:0;width:2px;background:#fff}
.rp-meter small{font-size:12px;color:var(--muted)}
.rp-grow{padding:10px 0;border-top:1px solid var(--border-soft);page-break-inside:avoid;break-inside:avoid}
.rp-grow:first-of-type{border-top:0;padding-top:0}
.rp-grow b{font-size:16px}.rp-grow p{margin:3px 0 6px;font-size:14px;line-height:1.5;color:var(--body)}
.rp-grow ol{margin:0;padding-left:20px;font-size:14px;line-height:1.55}
.rp-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.rp-pgrid div{background:#F0F6FE;border-radius:12px;padding:10px 12px;page-break-inside:avoid;break-inside:avoid}
.rp-pgrid b{font-size:14px}.rp-pgrid p{margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--body)}
@media (max-width:420px){.rp-pgrid{grid-template-columns:1fr}.rp-vis{grid-template-columns:1fr 1fr}}
.fr-card.rp-flow{page-break-inside:auto;break-inside:auto}
.rp-bar.lv-strong i{background:#1E9E63}.rp-bar.lv-grow i{background:linear-gradient(90deg,#9EC3F2,#2F7FDC)}.rp-bar.lv-build i{background:#CBD5E1}
.rp-plan .fr-step{align-items:center;padding:8px 12px}
.rp-plan .fr-ic{font-size:16px;font-weight:700;color:#0D3B8E;flex-basis:30px;width:30px;height:30px}

/* ---- Malayalam edition (24 Sep 2026): Malayalam first, the English in a small line under it ---- */
.ml-pair{display:inline}
.ml-t,[lang="ml"]{font-family:'Noto Sans Malayalam','Manrope',system-ui,sans-serif}
.ml-en{display:block;font-size:.76em;font-weight:400;opacity:.66;line-height:1.3;margin-top:2px;letter-spacing:0}
.lang-pick{position:fixed;inset:0;z-index:300;background:rgba(24,18,12,.55);display:grid;place-items:center;padding:16px}
.lang-card{background:#fff;border-radius:22px;padding:26px 20px 20px;max-width:360px;width:100%;display:grid;gap:12px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.lang-h{font-weight:700;font-size:18px;line-height:1.35;color:#1f1a16}
.lang-card .btn-primary{width:100%;font-size:18px}
.lang-note{font-size:14px;line-height:1.5;color:#64748B;margin:4px 0 0}
.stop-top.cap.lang{letter-spacing:0;opacity:1;font-family:'Noto Sans Malayalam','Manrope',system-ui,sans-serif}
.topbar.has-lang{gap:6px}
.topbar.has-lang .stop-top.cap{margin-right:0}
.topbar.has-lang .step-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar.has-lang .step-label .ml-pair,.topbar.has-lang .step-label .ml-t{white-space:nowrap}
/* 24 Sep 2026: the four-language chooser */
.lang-card{position:relative}
.lang-list{display:grid;gap:8px}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid var(--gray-100);background:#fff;cursor:pointer;text-align:left;font:inherit}
.lang-opt.on{border-color:#2F7FDC;background:var(--warning-bg)}
.lang-native{font-size:18px;font-weight:700;color:#1f1a16;font-family:'Noto Sans Malayalam','Manrope',system-ui,sans-serif}
.lang-name{font-size:14px;color:#64748B}
.lang-tick{margin-left:auto;color:#2F7FDC;font-weight:700}
.lang-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:26px;line-height:1;color:#64748B;cursor:pointer;padding:4px 8px}
.lang-wish{width:100%;border:1.5px solid var(--gray-100);border-radius:12px;padding:10px 12px;font-family:inherit;font-size:16px;line-height:1.4;resize:vertical}
.lang-card .btn-ghost{width:100%}
/* 24 Sep 2026: the language button shows both, the running one highlighted */
.stop-top.lang{display:inline-flex;align-items:center;gap:2px;padding:3px!important}
.stop-top.lang .seg{padding:4px 9px;border-radius:999px;opacity:.55;line-height:1.2}
.stop-top.lang .seg.on{background:var(--primary,#2F7FDC);color:#fff;opacity:1}
.stop-top.in-bar.lang .seg{padding:4px 7px}

/* 26 Sep 2026 (owner): "Your career journey" - the first reading as one page that grows, part by part.
   Laid out like the owner's reference picture, in DISHA's colours: green = done, peach = still ahead,
   orange = the lines and icons. */
.fj-scroll{position:relative;background:#F6F9FD!important}   /* 3 Oct 2026: the app's cool light background, not beige */
.fj{padding:14px 14px 28px;display:flex;flex-direction:column;gap:12px;font-family:Manrope,system-ui,sans-serif}
.fj-top .fj-brand{font-size:14px;font-weight:700;letter-spacing:.32em;color:var(--ink)}
.fj-top h1{margin:0;font-size:26px;line-height:1.1;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.fj-sub{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:5px;font-size:14px;color:var(--body)}
.fj-chip{background:#EAF7F0;color:#167A4C;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:600;white-space:nowrap}
.fj-row{display:grid;grid-template-columns:34px 1fr;gap:8px;animation:fjIn .45s ease both}
@keyframes fjIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fj-row{animation:none}}
.fj-rail{display:flex;flex-direction:column;align-items:center}
.fj-rail i{flex:1 1 auto;width:0;border-left:2px dashed var(--gray-300);margin-top:4px}
.fj-r-done .fj-rail i{border-left:3px solid #1E9E63}
.fj-r-end .fj-rail i{display:none}
.fj-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;background:#E2E8F0;color:var(--ink)}
.fj-r-done .fj-num{background:#167A4C;color:#fff;box-shadow:0 0 0 4px #EAF7F0}
.fj-num-t .fj-ic{width:20px;height:20px;color:var(--muted)}
.fj-card{position:relative;border-radius:16px;padding:12px 12px 14px;background:var(--bg-teal);border:1px solid #FFE3C4;min-width:0}
.fj-card.fj-done{background:#EAF7F0;border-color:#C8EBD8}
.fj-end-card{background:#EEF2F7;border-color:var(--gray-100)}
.fj-head{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.fj-head h2{margin:0;font-size:18px;line-height:1.15;font-weight:700;color:var(--ink)}
.fj-head p{margin:2px 0 0;font-size:14px;color:var(--body)}
.fj-badge{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;border-radius:999px;padding:3px 9px 3px 6px;font-size:12px;font-weight:600;border:1.5px solid;background:#fff}
.fj-b-done{color:#167A4C;border-color:#167A4C}
.fj-b-done .fj-ic{width:15px;height:15px;background:#167A4C;color:#fff;border-radius:50%;padding:2px;stroke-width:3}
.fj-b-next,.fj-b-explore{color:var(--primary-dark);border-color:var(--primary)}
.fj-badge i{width:11px;height:11px;border-radius:50%;border:2px solid currentColor}
.fj-ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--primary);flex:0 0 auto}
.fj-big{width:44px;height:44px;color:var(--muted);opacity:.8}
.fj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fj-tile{background:#fff;border-radius:10px;padding:7px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;border:1.5px solid transparent}
.fj-tile span{font-size:12px;line-height:1.15;color:var(--ink)}
.fj-tile.on{border-color:var(--primary);box-shadow:0 2px 8px rgba(91, 155, 232,.18)}
.fj-tile.on span{font-weight:600}
.fj-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:22px}
.fj-slot{background:#fff;border:1.5px solid #334155;border-radius:9px;min-height:52px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.fj-slot span{font-size:12px;line-height:1.1;font-weight:600;color:var(--ink)}
.fj-slot.fj-more{background:transparent;border:1.5px dashed var(--primary)}
.fj-todo-card .fj-slots{margin-top:0}
.fj-todo-card .fj-slot{border-color:var(--gray-300)}
.fj-arrows{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;color:var(--primary)}
.fj-arrows path{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.fj-svg{display:block;width:100%;height:auto;overflow:visible;font-family:Manrope,system-ui,sans-serif}
.fj-line{fill:none;stroke:var(--primary);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fj-fill{fill:var(--primary)}
.fj-dash{fill:#fff;stroke:var(--primary);stroke-width:1.5;stroke-dasharray:4 3}
.fj-pill{fill:#fde7db;stroke:var(--primary);stroke-width:1.5}
.fj-win{fill:#fff;stroke:var(--gray-300);stroke-width:1.5}
.fj-edge{stroke:var(--gray-100);stroke-width:1.5}
.fj-dot{fill:var(--gray-300)}
.fj-g{fill:none;stroke:var(--primary);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fj-t,.fj-t-b,.fj-t-m,.fj-t-s,.fj-t-o{text-anchor:middle;fill:var(--ink)}
.fj-t{font-size:12px;font-weight:600}
.fj-t-b{font-size:14px;font-weight:700}
.fj-t-m{font-size:12px;fill:var(--body)}
.fj-t-s{font-size:12px;font-weight:600}
.fj-t-o{font-size:16px;font-weight:700;fill:var(--primary-dark)}
.fj-next{background:var(--warning-bg);border:1px solid #FFC285;border-radius:16px;padding:14px;animation:fjIn .45s ease both}
.fj-next h3{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--primary-dark)}
.fj-task{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:9px 12px;margin-bottom:6px;font-size:14px;color:var(--ink)}
.fj-task i{width:16px;height:16px;border-radius:50%;border:2px solid var(--primary);flex:0 0 auto}
.fj-next p{margin:8px 0 10px;font-size:14px;color:var(--body)}
.fj-go{width:100%}
.fj-price{display:block;text-align:center;margin-top:6px;color:var(--muted);font-size:12px}
.fj-more-btns{display:flex;gap:8px;margin-top:10px}
.fj-more-btns .btn-ghost{flex:1 1 0;font-size:12px;padding-left:6px;padding-right:6px}
/* 6 Oct 2026: milestones 02 and 03 (fjx) - your matches -> the step -> what you will get; and "When you finish, you will have" */
/* 6 Oct 2026: the journey tracker at the top of the free reading (it scrolls with the page) */
.fjt{position:relative;margin:-14px -14px 4px;padding:14px 14px 16px;background:rgba(246,249,253,.97);border-bottom:1px solid #DCE8F8}
.fjt-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;margin-bottom:30px}
.fjt-head h2{margin:0;font-size:17px;color:#0D3B8E;line-height:1.3}.fjt-head h2 span{color:#1769D2}
.fjt-head small{font-size:12.5px;font-weight:700;color:#167A4C;background:#EAF7F0;border-radius:999px;padding:3px 10px}
.fjt-steps{display:grid;grid-template-columns:repeat(4,1fr)}
.fjt-st{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px}
.fjt-st:not(.fjt-goal)::before{content:"";position:absolute;top:16px;left:calc(50% + 19px);right:calc(-50% + 19px);height:4px;border-radius:4px;background:#D6E4F5}
.fjt-done::before{background:linear-gradient(90deg,#1E9E63,#1769D2)!important}
.fjt-dot{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:#fff;color:var(--muted);border:2px dashed #A9C6EE}
.fjt-dot .fj-ic{width:18px;height:18px;color:#fff;stroke-width:2.6}
.fjt-done .fjt-dot{background:#167A4C;color:#fff;border:0;box-shadow:0 0 0 4px #EAF7F0}
.fjt-now .fjt-dot{background:#1769D2;color:#fff;border:0;box-shadow:0 0 0 5px #D6E8FD;animation:fjtPulse 1.8s ease-in-out infinite}
@keyframes fjtPulse{50%{box-shadow:0 0 0 9px rgba(23,105,210,.12)}}
@media (prefers-reduced-motion:reduce){.fjt-now .fjt-dot{animation:none}}
.fjt-goal .fjt-dot{border:0;background:linear-gradient(135deg,#FF8A1F,#F59E0B)}
.fjt-st b{display:block;margin-top:8px;font-size:12.5px;color:var(--ink);line-height:1.25}
.fjt-goal b{color:#B45309}
.fjt-sub,.fjt-tag{display:none}
.fjt-here{position:absolute;top:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#FF8A1F;border-radius:999px;padding:3px 9px}
.fjt-here::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#FF8A1F}
.fjt-k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1769D2;margin-bottom:3px}
.fj-done .fjt-k{color:#167A4C}.fjt-k-goal{color:#B45309}
html.wide .fjt{margin:-28px -32px 6px;padding:18px 32px 18px}
html.wide .fjt-head{margin-bottom:36px}
html.wide .fjt-head h2{font-size:20px}
html.wide .fjt-dot{width:44px;height:44px;font-size:15px}
html.wide .fjt-st:not(.fjt-goal)::before{top:21px;left:calc(50% + 24px);right:calc(-50% + 24px)}
html.wide .fjt-st b{margin-top:10px;font-size:14.5px}
html.wide .fjt-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
html.wide .fjt-tag{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-style:normal;border-radius:999px;padding:2px 9px}
html.wide .fjt-done .fjt-tag{background:#EAF7F0;color:#167A4C}html.wide .fjt-now .fjt-tag{background:#1769D2;color:#fff}html.wide .fjt-later .fjt-tag{background:#fff;color:var(--muted);border:1px solid #D6E4F5}
html.wide .fjt-here{top:-30px;font-size:11px}
.fjx-next{border:2px solid #7FB3EE!important;box-shadow:0 14px 34px rgba(13,59,142,.10)}
.fjx-flow{display:grid;grid-template-columns:1fr;gap:6px;margin-top:6px}
.fjx-arrow{display:flex;justify-content:center;color:#1769D2}
.fjx-arrow .fj-ic{width:24px;height:24px;transform:rotate(90deg);color:#1769D2}
.fjx-stack{display:grid;gap:12px}
.fjx-match{position:relative;display:flex;align-items:center;gap:8px;padding:10px 14px;border:2px solid #1769D2;border-radius:12px;background:#fff;font-weight:700;color:var(--ink);font-size:15px}
.fjx-match .fj-ic{width:18px;height:18px}
.fjx-match>b{position:absolute;left:-9px;top:-9px;width:20px;height:20px;border-radius:50%;background:#FF8A1F;color:#fff;font-size:11px;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.fjx-ghost{border:1.5px dashed #A9C6EE;background:#F7FAFF;color:#7FA6D6;justify-content:center;font-weight:600}
.fjx-likes{border-radius:14px;background:#F3FBF7;border:1px solid #CBEBDC;padding:12px 14px}
.fjx-likes .fjx-k{color:#167A4C}.fjx-likes p{margin:8px 0 0;font-size:12px;color:var(--muted)}
.fjx-like{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fjx-like span{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 16px;border-radius:999px;background:#fff;border:1.5px solid #1769D2;font-size:14px;font-weight:700;color:var(--ink)}
.fjx-like span .fj-ic{width:16px;height:16px}
.fjx-like span>b{position:absolute;left:-7px;top:-7px;width:18px;height:18px;border-radius:50%;background:#FF8A1F;color:#fff;font-size:10px;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
/* 6 Oct 2026: the empty slots of milestone 01 shown here too - more careers come after the skill test */
.fjx-like-more{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:33px;border-radius:999px;border:1.5px dashed #9EC3F2;background:#F7F9FC}
.fjx-like-more .fj-ic{width:14px;height:14px;color:#9EC3F2}
.fjx-note{margin:6px 0 0;font-size:13px;font-weight:600;color:#167A4C}
.fjx-step{border-radius:14px;background:#EEF6FF;border:1px solid #CFE0F7;padding:14px 16px}
.fjx-k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1769D2}
.fjx-step h3,.fjx-out h3{margin:4px 0 2px;font-size:17px;color:var(--ink)}
.fjx-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin-top:2px}
.fjx-meta span{display:inline-flex;align-items:center;gap:5px}.fjx-meta .fj-ic{width:16px;height:16px;color:var(--muted)}
.fjx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fjx-chips span{font-size:12px;font-weight:600;color:var(--ink);background:#fff;border:1px solid #CFE0F7;border-radius:999px;padding:4px 10px}
.fjx-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.fjx-trio span{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid #CFE0F7;border-radius:12px;padding:10px 4px;font-size:13px;font-weight:700;color:var(--ink)}
.fjx-trio .fj-ic{width:22px;height:22px}
.fjx-out{border-radius:14px;border:1.5px dashed #A9C6EE;background:#F7FAFF;padding:14px 16px;text-align:center}
.fjx-out>.fj-ic{width:26px;height:26px;color:#1769D2}
.fjx-out .fjx-k{color:var(--muted)}
.fjx-out p{margin:0;font-size:13px;color:var(--muted)}
/* 6 Oct 2026: milestone 03 - "What is a virtual internship?" line that opens to the four steps and what you will know */
.vx{margin-top:14px;border:1.5px solid #CFE0F7;border-radius:14px;background:#F7FAFF}
.vx>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-radius:14px}
.vx>summary::-webkit-details-marker{display:none}
.vx>summary:focus-visible{outline:3px solid #9CC3F5;outline-offset:2px}
.vx-q{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#1769D2,#0D3B8E);color:#fff;font-weight:800;font-size:16px}
.vx-sum{flex:1;font-weight:700;font-size:14.5px;color:#1769D2;line-height:1.35}
.vx-sum small{display:block;font-weight:600;font-size:12px;color:var(--muted)}
.vx-chev{flex:0 0 auto;width:10px;height:10px;border-right:2.5px solid #1769D2;border-bottom:2.5px solid #1769D2;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.vx[open] .vx-chev{transform:rotate(225deg) translate(-2px,-2px)}
.vx[open]{background:#fff}
.vx[open]>summary{border-bottom:1px solid #E3ECF8;border-radius:14px 14px 0 0}
.vx-body{padding:12px 14px 14px}
.vx-lead{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--body)}
.vx-lead b{color:var(--ink)}
.vx-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px;counter-reset:vx}
.vx-st{background:#fff;border:1px solid #DCE8F8;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(13,59,142,.06)}
.vx-st figure{margin:0;position:relative;aspect-ratio:16/10;background:#E8F0FB}
.vx-st img{width:100%;height:100%;object-fit:cover;display:block}
.vx-st figure::after{counter-increment:vx;content:counter(vx);position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:50%;background:#FF8A1F;color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.vx-st>div{padding:8px 10px 10px}
.vx-st b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
.vx-st span{display:block;font-size:12px;line-height:1.45;color:var(--muted)}
.vx-eg{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.vx-get{margin-top:12px;border-radius:12px;background:linear-gradient(135deg,#F3F8FF,#EAF3FF);border:1px solid #CFE0F7;padding:12px 14px}
.vx-get h4{margin:0 0 8px;font-size:14px;color:#0D3B8E}
.vx-get ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.vx-get li{position:relative;padding-left:28px;font-size:12px;line-height:1.45;color:var(--muted)}
.vx-get li .fj-ic{position:absolute;left:0;top:0;width:20px;height:20px;color:#1769D2}
.vx-get li b{display:block;font-size:13px;color:var(--ink)}
html.wide .vx-steps{grid-template-columns:repeat(4,1fr);gap:14px}
html.wide .vx-get ul{grid-template-columns:repeat(4,1fr);gap:12px}
html.wide .vx-st b{font-size:14px}html.wide .vx-st span{font-size:12.5px}
.fjx-gets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 12px}
.fjx-gets>div{border-radius:14px;padding:12px;border:1px solid #DCE8F8;background:linear-gradient(90deg,#1769D2,#2F7FDC 55%,#FF8A1F) top/100% 4px no-repeat,#fff}
.fjx-gets .fj-ic{width:24px;height:24px;color:#1769D2}
.fjx-gets b{display:block;margin-top:6px;color:var(--ink);font-size:14px}
.fjx-gets span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}
html.wide .fjx-flow{grid-template-columns:minmax(0,1fr) 40px minmax(0,1.2fr) 40px minmax(0,1fr);align-items:center;gap:0}
html.wide .fjx-arrow .fj-ic{transform:none}
html.wide .fjx-gets{grid-template-columns:repeat(4,1fr);gap:12px}
/* 6 Oct 2026: the closing box in the brand's light blue, with a warm glow - the beige looked dull */
.fj-next{background:radial-gradient(circle at 100% 0,rgba(255,138,31,.16),transparent 42%),linear-gradient(160deg,#E6F0FD,#F5F9FF 60%,#FFFFFF)!important;
  border:1.5px solid #BFD6F6!important;box-shadow:0 14px 34px rgba(13,59,142,.10)}
.fj-next h3{color:#0D3B8E}.fjx-gets>div{box-shadow:0 4px 12px rgba(13,59,142,.06)}
/* 3 Oct 2026: the rest of the free reading - the two matches get wide boxes with their numbers, the step numbers on the
   two next steps (empty circles looked like choices), the two small buttons stacked, cool borders instead of peach */
.fj-card{border-color:#D6E4F5}
.fj-end-card{border-color:#DCE3EC}
.fj-todo-card .fj-slots{grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.fj-todo-card .fj-slot{border-color:#C9DDF8}
.fj-todo-card .fj-slot[data-pick]{position:relative;border:2px solid #1769D2;padding:6px 4px}
.fj-todo-card .fj-slot[data-pick]::before{content:attr(data-pick);position:absolute;left:-7px;top:-8px;width:18px;height:18px;border-radius:50%;
  background:#FF8A1F;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #EEF5FE}
.fj-todo-card .fj-slot span{font-size:12px;letter-spacing:-.1px}
.fj-todo-card .fj-slot.fj-more{border:1.5px dashed #9EC3F2}
.fj-next{background:#FFF6EC;border-color:#FFD9B3}
.fj-task i{width:auto;height:auto;border:0;border-radius:8px;padding:3px 7px;background:#EEF2F7;color:var(--muted);font-style:normal;font-size:12px;font-weight:800}
.fj-more-btns{flex-direction:column}
.fj-more-btns .btn-ghost{flex:0 0 auto;width:100%;font-size:14px;padding:12px;border:1.5px solid #1769D2;color:#1769D2;background:#fff}
/* 29 Sep 2026: the challenge evidence checklist (before the mail button) and the plan picture page */
.ch-check{margin:0 0 10px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--border)}.ch-check b{display:block;font-size:14px;line-height:1.4;margin-bottom:4px}
.ch-ck{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;border:0;background:none;padding:6px 0;font-size:14px;line-height:1.4;color:inherit;font:inherit;font-size:14px}
.ch-ck .k{flex:0 0 20px;height:20px;border-radius:6px;border:1.5px solid var(--border-soft);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.ch-ck.on .k{background:var(--primary);border-color:var(--primary);color:#fff}.ch-ck.on{color:var(--muted)}
.ch-check small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.ch-mail:disabled,.ch-mail[disabled]{opacity:.45;width:100%}
.pc-wrap{margin:0 14px 12px}.pc-wrap canvas{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 8px 26px rgba(0,0,0,.16)}
.pc-tog{display:flex;align-items:center;gap:10px;width:calc(100% - 28px);margin:0 14px 8px;padding:11px 12px;border:1px solid var(--border);border-radius:14px;background:#fff;font:inherit;font-size:14px;text-align:left;color:inherit}
.pc-tog .k{flex:0 0 22px;height:22px;border-radius:7px;border:1.5px solid var(--border-soft);font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.pc-tog.on .k{background:var(--primary);border-color:var(--primary);color:#fff}
/* 30 Sep 2026: the first-reading summary before payment - the locked list */
.fr-locked{border:1.5px dashed var(--primary);background:var(--bg-teal)}
.fr-lock-list{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}.fr-lock-list li{font-size:14px;color:var(--body)}
/* 30 Sep 2026 (team): the country code on its own line, the number below it */
.cc-row{flex-direction:column;flex-wrap:nowrap}.cc-row .cc-pick{flex:none;width:100%;max-width:none}.cc-row input{width:100%}
/* registration by code; Google outside India; the saving under DISHA 360 */
.reg-code-box{margin:10px 0;padding:14px;border-radius:16px;background:var(--bg-teal);border:1px solid var(--border)}.reg-code-box p{margin:6px 0 10px;font-size:14px;line-height:1.5;color:var(--body)}
.reg-or{text-align:center;font-size:14px;color:var(--muted);margin:8px 0 6px}.g-btn{display:flex;justify-content:center;min-height:44px}
.oc-save{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--bg-teal);font-size:14px;line-height:1.5;color:var(--body)}.oc-save span{color:var(--success);font-weight:700}
/* 3 Oct 2026: payment page - two plan tiles (Clarity first), only the chosen plan's details, Please note folded,
   one button that follows the pick, and the two other ways on as quiet links */
.pp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 14px 0;max-width:520px}
.pp-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:2px solid var(--border);border-radius:18px;
  padding:14px 12px 12px;background:#fff;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.pp-k{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.pp-n{font-size:16px;font-weight:800;line-height:1.2}
.pp-p{font-size:20px;font-weight:800;color:#1769D2;margin-top:4px;line-height:1.1}
.pp-p small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.pp-dot{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;border:2px solid var(--border);background:#fff}
.pp-rib{position:absolute;top:-10px;left:12px;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,#FF8A1F,#F59E0B);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em}
.pay-two[data-plan="cl"] .pp-t-cl,.pay-two[data-plan="full"] .pp-t-full{border-color:#1769D2;background:linear-gradient(180deg,#F3F8FF,#fff);box-shadow:0 8px 20px rgba(23,105,210,.15)}
.pay-two[data-plan="full"] .pp-t-full{border-color:#0D3B8E}
.pay-two[data-plan="cl"] .pp-t-cl .pp-dot,.pay-two[data-plan="full"] .pp-t-full .pp-dot{border-color:#1769D2;background:#1769D2;box-shadow:inset 0 0 0 4px #fff}
.pay-two .oc-kicker,.pay-two .oc-name,.pay-two .oc-price{display:none}
.pay-two[data-plan="cl"] .oc-full,.pay-two[data-plan="full"] .oc-clarity{display:none}
.pay-two .oc-card{border:0;box-shadow:0 6px 24px rgba(15,23,42,.06),inset 0 0 0 1.5px var(--border);padding-top:20px;
  background:linear-gradient(90deg,#1769D2,#2F7FDC 55%,#FF8A1F) top/100% 4px no-repeat,#fff}
.pay-two .oc-sub{color:#0D3B8E;font-weight:800;letter-spacing:.08em;margin-top:8px;text-transform:uppercase}
.pay-two .oc-grid{margin:14px 14px 0;max-width:none}
.pay-two .pp-tiles{max-width:none}
.oc-card .pay-row{align-items:flex-start}
.oc-card .pay-row .ic{flex:0 0 34px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;margin-top:-2px}
.oc-more{display:flex;flex-direction:column;gap:8px}
.pay-two .oc-card:not(.open) .oc-more{display:none}
.oc-see{display:none}
.pay-two .oc-see{display:block;width:100%;margin-top:4px;padding:10px;border:1.5px dashed #BFD6F6;border-radius:12px;background:#F7FAFF;
  color:#1769D2;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
details.pay-note-once{padding:0 14px;background:#fff;border:1px solid var(--border);border-left:4px solid #FF8A1F;font-size:13px;line-height:1.55;color:var(--body)}
details.pay-note-once[open]{padding-bottom:12px}
details.pay-note-once summary{list-style:none;display:flex;justify-content:space-between;align-items:center;margin:0 -14px;padding:12px 14px;cursor:pointer;color:#B45309}
details.pay-note-once[open] > summary{padding-bottom:6px}
details.pay-note-once summary::-webkit-details-marker{display:none}
details.pay-note-once summary::after{content:'+';font-size:18px;font-weight:700;color:#B45309}
details.pay-note-once[open] summary::after{content:'\2212'}
.pay-two details.pay-note-once{margin:14px 14px 0}
.pp-b-cl,.pp-b-full{display:none;width:100%}
.pay-two[data-plan="cl"] .pp-b-cl,.pay-two[data-plan="full"] .pp-b-full{display:block}
.pp-b-full{background:linear-gradient(135deg,#0D3B8E,#1769D2)}
.pp-safe{margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.pp-safe b{color:var(--ink)}
.pay-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:12px}
.pay-link{background:none;border:0;padding:8px 2px;font:inherit;font-size:14px;font-weight:700;color:#1769D2;cursor:pointer}
.pay-link.quiet{color:var(--muted)}

/* 1 Oct 2026 (owner): the shared report header - DISHA logo, label + date, title, short introduction, who it is for */
.rh{background:#fff;padding:18px 18px 6px}
.rh-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:3px solid #5B9BE8}
.rh-logo{height:34px;width:auto;display:block;flex:0 0 auto}
/* 3 Oct 2026: the parent report in the brand style (scoped to .parent-rep) - a smaller logo, At a glance first, links to
   each part, numbered cards with the blue-to-orange stripe, flat rows, the strengths as a list, the questions as bubbles */
.parent-rep .rh-logo{height:26px}
.pr-glance{position:relative;overflow:hidden;margin:14px 14px 0;padding:18px 16px 16px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,#1769D2,#0D3B8E);box-shadow:0 12px 28px rgba(13,59,142,.28)}
.pr-glance::after{content:'';position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.pr-gk{font-size:12px;font-weight:800;letter-spacing:.12em;opacity:.85}
.pr-gl{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.pr-gl:last-of-type{border-bottom:0}
.pr-gi{flex:0 0 34px;height:34px;border-radius:11px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:17px}
.pr-gl small{display:block;font-size:12px;opacity:.85;font-weight:600}.pr-gl b{display:block;font-size:16px;line-height:1.3}
.pr-gl-cta{position:relative;z-index:1;display:block;width:100%;margin-top:12px;border:0;border-radius:999px;padding:13px;font:inherit;font-size:15px;font-weight:800;background:#fff;color:#0D3B8E;cursor:pointer}
.pr-jump{display:flex;gap:8px;overflow-x:auto;padding:14px 14px 2px;scrollbar-width:none}
.pr-jump::-webkit-scrollbar{display:none}
.pr-jump button{flex:0 0 auto;padding:7px 12px;border-radius:999px;background:#fff;border:1.5px solid #CFE0F7;color:#1769D2;font:inherit;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer}
.parent-rep .scroll{counter-reset:prcard}
.parent-rep .report-card{counter-increment:prcard;margin:14px 14px 0;padding:20px 16px 16px;border-radius:20px;scroll-margin-top:12px;
  background:linear-gradient(90deg,#1769D2,#2F7FDC 55%,#FF8A1F) top/100% 4px no-repeat,#fff}
.parent-rep .report-card h3{display:flex;align-items:center;gap:10px;font-size:17px;color:#0D3B8E;line-height:1.3;margin:0 0 10px}
.parent-rep .report-card h3::before{content:counter(prcard);flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#0D3B8E,#1769D2);color:#fff;font-size:13px;font-weight:700;box-shadow:0 4px 10px rgba(13,59,142,.22)}
.parent-rep .report-card p b{color:#0D3B8E}
.parent-rep b.rep-num{display:inline-block;padding:0 6px;border-radius:6px;background:#FFF1E3;color:#C2410C;font-weight:800}
.parent-rep .report-card .readback-choice{margin:0;padding:12px 0;border-radius:0;box-shadow:none;background:none;border-top:1px solid #EEF2F7;font-weight:500;animation:none}
.parent-rep .report-card .readback-choice:first-of-type{border-top:0;padding-top:4px}
.parent-rep .report-card .readback-choice .n{width:26px;height:26px;border-radius:50%;background:#EAF2FD;color:#1769D2;font-weight:800;font-size:13px}
.parent-rep .report-card .readback-choice > div:last-child{min-width:0;flex:1}
.parent-rep .report-card .readback-choice > div > b:first-child{color:var(--ink)}
.pr-sk{margin-top:6px}
.pr-sk-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:var(--ink);font-weight:600}
.pr-sk-row small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.pr-sk-row .lv-badge{flex:0 0 auto}
.pr-fine{font-size:12px!important;color:var(--muted)!important;line-height:1.5!important;margin:6px 0 0!important;font-weight:500!important}
.pr-path{padding:12px 14px;border-radius:14px;border:1.5px solid var(--border);margin-top:10px}
.pr-path.top{border-color:#7FB3EE;background:linear-gradient(180deg,#F3F8FF,#fff)}
.pr-path-r{font-size:12px;font-weight:800;letter-spacing:.08em;color:#1769D2}
.pr-path-n{font-size:16px;font-weight:800;margin:2px 0 4px;color:var(--ink)}
.pr-path-t{font-size:13.5px;color:var(--body);line-height:1.5;margin-bottom:6px}
.parent-rep .report-card p.pr-limits{margin:12px 0 0;padding:12px 14px;border-radius:14px;background:#FFF6EC;border:1px solid #FFD9B3;border-left:4px solid #FF8A1F;font-size:13px;line-height:1.55;color:#5b4636}
.parent-rep .report-card p.pr-limits b{color:#B45309}
.parent-rep .pr-mentor{background:linear-gradient(90deg,#1769D2,#2F7FDC 55%,#FF8A1F) top/100% 4px no-repeat,#F3F8FF}
.parent-rep .pr-mentor p{font-style:italic;color:#0D3B8E}
.pr-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 4px}
.pr-help-grid > div{padding:10px;border-radius:12px;background:#F0F6FE;font-size:12.5px;line-height:1.4;color:var(--body);font-weight:500}
.pr-help-grid b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.pr-help-grid a{display:inline-block;margin-top:4px;color:#1769D2;font-weight:700;font-size:12px;word-break:break-all}
.parent-rep .pr-q{background:linear-gradient(90deg,#1769D2,#2F7FDC 55%,#FF8A1F) top/100% 4px no-repeat,#EEF5FE}
.pr-bubble{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-top:8px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid #CFE0F7;font-size:14px;line-height:1.5;color:var(--ink);font-weight:600}
.pr-bubble span{font-size:16px;line-height:1.3}
.parent-rep .pr-back{border:1.5px solid #1769D2;color:#1769D2}
/* 10 Oct 2026 (owner): "both reports do not look professional - multiple font sizes, no proper colour system and box
   layouts". The Clarity report and the parent report on a laptop as one calm document: a white page in a reading
   column, sections divided by a line instead of boxes inside boxes, one type scale (22 / 17 / 15 / 14 / 13), one colour
   system (navy headings, blue links and bars, green / amber / grey only for Strong / Growing / To build), and a key
   that says how to read the levels and the ranges. Phones keep their own design. */
.parent-rep .pr-back{background:#fff!important;box-shadow:none!important}
.rep-legend{display:none}
.rdoc{--d-ink:#1F2937;--d-body:#3B4554;--d-mute:#667085;--d-navy:#0D3B8E;--d-blue:#1769D2;--d-line:#E6ECF3;--d-soft:#F5F8FC;
  --d-ok:#167A4C;--d-ok-bg:#E8F6EE;--d-grow:#A85A0B;--d-grow-bg:#FFF2E0;--d-build:#475467;--d-build-bg:#EEF1F5}
/* the parent report gets the whole window too (the Clarity report already has it) */
html.wide:not(.wide-nav) #app>.screen.parent-rep{width:100%!important;max-width:none!important;max-height:none!important;height:100%;margin:0;
  border:0;border-radius:0;box-shadow:none;background:var(--w-ground)!important;padding:0}
html.wide:not(.wide-nav) #app>.screen.parent-rep>*:not(.topbar){zoom:1!important}
html.wide .parent-rep>.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;background:transparent!important;padding:28px max(32px,calc((100% - 880px)/2)) 40px!important}
html.wide .parent-rep>.scroll>*{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box}
/* the page: header, at a glance, the section links (they stay in view), the key, then the sections on one white sheet */
html.wide .parent-rep .rh{background:#fff;border:1px solid var(--d-line);border-radius:18px 18px 0 0;border-bottom:0;padding:28px 40px 8px;margin-bottom:0!important}
html.wide .parent-rep .rh-title{font-size:28px;line-height:1.25;letter-spacing:-.01em}
html.wide .parent-rep .rh-intro{font-size:15px;line-height:1.6;color:var(--d-body);max-width:640px}
html.wide .parent-rep .pr-glance{margin-top:0!important;border-radius:0;box-shadow:none;padding:22px 40px}
html.wide .parent-rep .pr-jump{position:sticky;top:-28px;z-index:5;background:#fff;border-left:1px solid var(--d-line);border-right:1px solid var(--d-line);
  padding:14px 40px;margin-top:0!important;margin-bottom:0!important;border-bottom:1px solid var(--d-line);display:flex;flex-wrap:wrap;gap:8px}
html.wide .parent-rep .pr-jump button{font-size:13px;font-weight:600;color:var(--d-blue);background:var(--d-soft);border:1px solid var(--d-line);border-radius:999px;padding:6px 13px}
html.wide .parent-rep .pr-jump button:hover{background:#EAF2FD}
.rdoc .rep-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;background:var(--d-soft);border:1px solid var(--d-line);
  padding:16px 24px;font-size:13.5px;color:var(--d-body)}
.rdoc .rep-legend>b{font-size:14px;color:var(--d-navy);margin-right:4px}
.rdoc .rep-legend span{display:inline-flex;align-items:center;gap:6px}
.rdoc .rep-legend i{font-style:normal}
.rdoc .rep-legend p{flex:1 0 100%;margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--d-mute)}
html.wide .parent-rep .rep-legend{border-radius:0;border-top:0;border-bottom:0;padding:16px 40px}
html.wide .rdoc #rep-car{max-width:880px}
html.wide .rdoc .wrep-main>.rep-legend{max-width:880px;border-radius:18px 18px 0 0;border-bottom:0;box-sizing:border-box}
html.wide .rdoc .wrep-main>.rep-say:empty{display:none}
/* the sheet */
html.wide .rdoc #rep-car{display:block!important;background:#fff;border:1px solid var(--d-line);border-radius:0 0 18px 18px;padding:0 40px;
  box-shadow:0 1px 3px rgba(16,24,40,.05)}
html.wide .rdoc #rep-car .rep-slide{padding:0!important;border-top:1px solid var(--d-line)}
html.wide .rdoc #rep-car .rep-slide:first-child{border-top:0}
html.wide .parent-rep>.scroll>.report-card{background:#fff!important;border-left:1px solid var(--d-line);border-right:1px solid var(--d-line);
  border-top:1px solid var(--d-line);border-radius:0;margin-top:0!important;margin-bottom:0!important}
html.wide .parent-rep>.scroll>#pr-home{border-bottom:1px solid var(--d-line);border-radius:0 0 18px 18px}
html.wide .rdoc .report-card{background:none!important;box-shadow:none!important;border-radius:0;margin:0!important;padding:34px 0 32px!important;overflow:visible}
html.wide .parent-rep>.scroll>.report-card{padding:34px 40px 32px!important}
/* type */
.rdoc .report-card h3{display:flex;align-items:center;gap:12px;font-size:22px!important;font-weight:700;line-height:1.3;color:var(--d-navy);margin:0 0 14px!important;letter-spacing:-.005em}
.rdoc .report-card h3::before{flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:var(--d-navy)!important;box-shadow:none!important;font-size:14px!important}
.rdoc .report-card p,.rdoc .report-card li{font-size:15px!important;font-weight:400!important;line-height:1.65!important;color:var(--d-body)}
.rdoc .report-card p b,.rdoc .readback-choice b{font-weight:600;color:var(--d-ink)}
.rdoc b.rep-num{background:#EEF4FC!important;color:var(--d-navy)!important;font-weight:700!important;border-radius:6px;padding:0 6px}
.rdoc .progress-note,.rdoc .pr-fine{font-size:13.5px!important;color:var(--d-mute)!important;font-weight:400!important;line-height:1.55!important}
.rdoc .report-card a{color:var(--d-blue);font-weight:600;text-underline-offset:3px}
/* level labels: one look everywhere */
.rdoc .lv-badge{display:inline-block;font-size:12.5px!important;font-weight:700;letter-spacing:0;padding:3px 10px;border-radius:999px;white-space:nowrap}
.rdoc .lv-badge.lv-strong{background:var(--d-ok-bg);color:var(--d-ok)}
.rdoc .lv-badge.lv-grow{background:var(--d-grow-bg);color:var(--d-grow)}
.rdoc .lv-badge.lv-build,.rdoc .lv-badge.lv-none{background:var(--d-build-bg);color:var(--d-build)}
.rdoc b.rep-lv{display:inline-block;font-size:12.5px!important;font-weight:700!important;padding:2px 9px;border-radius:999px;margin:0 6px;background:var(--d-ok-bg);color:var(--d-ok)!important}
.rdoc b.rep-lv[data-lv="Growing"]{background:var(--d-grow-bg);color:var(--d-grow)!important}
.rdoc b.rep-lv[data-lv="To build"]{background:var(--d-build-bg);color:var(--d-build)!important}
/* meters: name, level and range on one line, a calm blue bar under it */
.rdoc .meter-row{align-items:center;gap:12px;font-size:14.5px!important;font-weight:600;color:var(--d-ink)!important;margin-top:14px}
.rdoc .meter-row span:first-child{color:var(--d-ink)!important}
.rdoc .meter-row small.band{font-size:13px!important;font-weight:400!important;color:var(--d-mute)!important}
.rdoc .meter-row>span:last-child:not(.lv-badge){font-size:13.5px;font-weight:600;color:var(--d-mute)}
.rdoc .meter{height:8px;border-radius:8px;background:#EDF1F6;margin:7px 0 0}
.rdoc .meter>i{background:var(--d-blue)!important;border-radius:8px}
/* numbered lists: rows, not boxes */
.rdoc .readback-choice{display:flex;gap:14px;align-items:flex-start;margin:0!important;padding:13px 0!important;border-radius:0!important;box-shadow:none!important;
  background:none!important;border:0!important;border-top:1px solid var(--d-line)!important;animation:none!important;font-size:15px;font-weight:400;color:var(--d-body);line-height:1.6}
.rdoc .readback-choice:first-of-type{border-top:0!important}
.rdoc .readback-choice .n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#EEF4FC!important;color:var(--d-blue)!important;
  font-size:13px;font-weight:700;display:grid;place-items:center;box-shadow:none!important;margin-top:1px}
.rdoc .readback-choice>div:last-child{font-size:15px!important;font-weight:400!important;color:var(--d-body)!important;line-height:1.6}
/* skills to grow: a sub-section per skill */
.rdoc .improve-card{background:none!important;border:0!important;box-shadow:none!important;border-left:3px solid #CFE0F7!important;border-radius:0!important;
  padding:2px 0 2px 18px!important;margin:18px 0 0!important}
.rdoc .improve-card>b{display:block;font-size:17px;color:var(--d-ink)!important}
.rdoc .improve-card .improve-why{font-size:14px!important;color:var(--d-mute)!important;margin:2px 0 4px!important}
/* careers: one bordered row each, the strongest marked in blue */
.rdoc .path-card,.rdoc .pr-path{display:block;width:100%;text-align:left;background:#fff!important;border:1px solid var(--d-line)!important;
  border-radius:14px!important;padding:18px 22px!important;margin:12px 0 0!important;box-shadow:none!important;font:inherit}
.rdoc .path-card.top,.rdoc .pr-path.top{border-left:4px solid var(--d-blue)!important;background:var(--d-soft)!important}
.rdoc .path-card.tappable:hover{border-color:#B9D3F3!important}
.rdoc .path-rank,.rdoc .pr-path-r{font-size:12px!important;font-weight:700!important;letter-spacing:.08em;color:var(--d-blue)!important}
.rdoc .path-name,.rdoc .pr-path-n{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:18px!important;font-weight:700!important;color:var(--d-ink)!important;margin:3px 0 4px!important}
.rdoc .path-go{font-size:13px!important;font-weight:600!important;color:var(--d-blue)!important}
.rdoc .path-card p,.rdoc .pr-path-t{font-size:14.5px!important;color:var(--d-body)!important;font-weight:400!important;margin:0 0 8px!important}
.rdoc .ml-rows{border-top:1px solid var(--d-line);padding-top:6px}
.rdoc .ml-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:14px;color:var(--d-body)}
.rdoc .ml-row span:first-child{font-size:14px!important;color:var(--d-body)!important}
/* notices, quotes, small tags */
.rdoc .hc-evidence{display:block;background:#FFF8EC!important;border:1px solid #F3DDB5!important;border-left:4px solid #E8962E!important;border-radius:12px!important;padding:14px 18px!important;margin:0 0 16px}
.rdoc .hc-evidence b{display:block;font-size:14.5px!important;color:#8A4B0F!important}
.rdoc .hc-evidence span{display:block;font-size:14px!important;font-weight:400!important;color:var(--d-body)!important;margin:2px 0 10px}
.rdoc .hc-evidence .btn-ghost{width:auto!important;min-height:0!important;padding:8px 16px!important;font-size:14px!important}
.rdoc .rep-trait,.rdoc .free-ev,.parent-rep .pr-mentor p{background:var(--d-soft)!important;border-left:3px solid var(--d-blue)!important;border-radius:0 10px 10px 0!important;
  padding:12px 16px!important;font-size:15px!important;font-style:normal!important;font-weight:500!important;color:var(--d-navy)!important}
.rdoc .rep-trait b{color:var(--d-navy)!important;font-weight:600}
.parent-rep .pr-mentor p::before{content:"“";font-size:28px;line-height:0;vertical-align:-10px;margin-right:4px;color:var(--d-blue)}
.rdoc .report-card p.pr-limits{background:#FFF8EC!important;border:1px solid #F3DDB5!important;border-left:4px solid #E8962E!important;border-radius:12px!important;
  font-size:14px!important;color:var(--d-body)!important;padding:14px 18px!important;margin-top:16px!important}
.rdoc .report-card p.pr-limits b{color:#8A4B0F!important}
.rdoc .fact-tag{display:inline-block;font-size:12.5px!important;font-weight:500!important;color:var(--d-mute)!important;background:var(--d-build-bg)!important;border:0!important;border-radius:999px;padding:4px 12px;margin-top:12px}
.rdoc .pattern-card{border-radius:14px!important;padding:18px 22px!important;font-size:15px!important;font-weight:600!important;line-height:1.55;margin-top:18px!important}
.rdoc .rm-chip{font-size:14px!important;font-weight:600!important;color:var(--d-blue)!important;background:#fff!important;border:1px solid #CFE0F7!important;border-radius:999px!important;padding:7px 14px!important}
/* parent report: measured strengths, free help, questions for home */
.rdoc .pr-sk-row{padding:9px 0;border-top:1px solid var(--d-line);font-size:14.5px!important;color:var(--d-ink)}
.rdoc .pr-sk-row:first-child{border-top:0}
.rdoc .pr-sk-row small{display:inline!important;margin-left:8px;font-size:13px!important;font-weight:400!important;color:var(--d-mute)!important}
.rdoc .pr-help-grid{gap:12px;margin:10px 0 6px}
.rdoc .pr-help-grid>div{background:var(--d-soft)!important;border:1px solid var(--d-line);border-radius:12px;padding:14px 16px;font-size:14px!important;font-weight:400!important;color:var(--d-body)!important;line-height:1.5}
.rdoc .pr-help-grid b{font-size:15px!important;color:var(--d-ink)!important;margin-bottom:3px}
.rdoc .pr-help-grid a{font-size:13.5px!important;font-weight:600!important;margin-top:6px}
.parent-rep .pr-mentor,.parent-rep .pr-q{background:#fff!important}
.rdoc .pr-bubble{border-radius:12px!important;background:var(--d-soft)!important;border:1px solid var(--d-line)!important;padding:12px 16px!important;font-size:15px!important;font-weight:500!important;color:var(--d-ink)!important;margin-top:10px!important}
html.wide .parent-rep>.scroll>.cta-dock{background:none!important;padding:22px 0 0!important;position:static!important}
html.wide .parent-rep .pr-back{width:auto!important;min-width:280px;min-height:48px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:15px!important}
/* the parent report's "Skills to grow" list has no numbers - a small dot, not an empty circle */
.parent-rep #pr-grow .readback-choice .n{flex:0 0 8px;width:8px;height:8px;margin-top:10px;color:transparent!important;background:var(--d-blue)!important;font-size:0}
/* the Clarity report's two buttons at the foot: side by side, a set size */
html.wide .rdoc .wrep-main>.cta-dock{max-width:880px}
html.wide .rdoc .wrep-main>.cta-dock .rep-dock-row{display:flex!important;flex-direction:row!important;justify-content:center;gap:12px}
html.wide .rdoc #parent-report-btn{display:flex;align-items:center;justify-content:center;width:320px!important;height:50px;min-height:0;margin:8px 0 0;font-size:16px!important}
/* 10 Oct 2026 (owner): the name card beside the Clarity report, in the same calm document style - a white card, a small
   "Your Clarity report" kicker instead of the trophy, the student's line in navy, the way of working under its own label,
   Printable report as an outlined button; no emoji */
.rh-emo{font-style:normal}
.rdoc .report-hero{background:linear-gradient(150deg,#1769D2 0%,#0D3B8E 100%)!important;color:#fff;border:0;border-radius:16px;
  box-shadow:0 8px 22px rgba(13,59,142,.18);padding:22px 22px 20px!important;overflow:visible}
.rdoc .report-hero::after{display:none}
.rdoc .report-hero::before{content:"YOUR CLARITY REPORT";position:static;display:block;width:auto;height:auto;background:none;
  border-radius:0;box-shadow:none;animation:none;transform:none;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#BFD8F8;margin:0 0 8px}
.rdoc .report-hero>div:not([class]){font-size:20px!important;font-weight:700!important;line-height:1.3;color:#fff;margin:0!important;padding-right:0!important}
.rdoc .report-hero .rep-hero-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:16px}
.rdoc .report-hero .style-badge{display:block;margin:0;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  box-shadow:none;color:#fff;font-size:15.5px;font-weight:700;text-align:left}
.rdoc .report-hero .style-badge::before{content:"Way of working";display:block;font-size:12px;font-weight:500;color:#BFD8F8;margin-bottom:2px}
.rdoc .report-hero .rh-emo{display:none}
.rdoc .report-hero .rep-print{display:flex;align-items:center;justify-content:center;width:100%!important;margin:0!important;height:42px;padding:0 14px;
  border:0!important;border-radius:999px;background:#fff!important;color:#0D3B8E!important;font-size:14px;font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.rdoc .report-hero .rep-print:hover{background:#EEF6FF!important}
.rdoc .report-hero .rep-print::before{content:"";width:16px;height:16px;margin-right:8px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/></svg>") center/contain no-repeat}
html.wide .rdoc .wrep-side>.wrep-nav{margin-top:18px}
html.wide .rdoc .wrep-main>.cta-dock .rep-dock-row>.btn-ghost{flex:none!important;width:280px!important;height:46px!important;min-height:0!important;max-height:46px}
/* 10 Oct 2026 (owner): "the reports look good on a laptop, not so good on a phone" - the same type scale, colours, level
   labels, lists, notices and name card on a phone (the rules above now apply everywhere); on a phone each part stays a
   card of its own (the Clarity report still swipes part by part, the mentor speaking each one), at phone sizes */
.rdoc .rep-say:empty{display:none}
html:not(.wide) .rdoc .report-card{background:#fff!important;border:1px solid var(--d-line);border-radius:16px!important;
  box-shadow:0 1px 3px rgba(16,24,40,.05)!important;padding:20px 18px 18px!important}
html:not(.wide) .rdoc .report-card h3{font-size:19px!important;gap:10px!important;margin:0 0 12px!important}
html:not(.wide) .rdoc .report-card h3::before{flex:0 0 26px!important;width:26px!important;height:26px!important;font-size:13px!important;border-radius:7px!important}
html:not(.wide) .rdoc .rep-legend{display:flex;margin:4px 16px 12px;border-radius:14px;padding:14px 16px;gap:6px 12px}
html:not(.wide) .parent-rep .rep-legend{margin:14px 14px 0}
html:not(.wide) .rdoc .rep-legend>b{flex:1 0 100%}
html:not(.wide) .rdoc .report-hero{margin:10px 16px 12px!important;border-radius:16px!important}
html:not(.wide) .rdoc .path-card,html:not(.wide) .rdoc .pr-path{padding:14px 16px!important}
html:not(.wide) .rdoc .path-name,html:not(.wide) .rdoc .pr-path-n{font-size:17px!important}
html:not(.wide) .rdoc .pr-help-grid{grid-template-columns:1fr}
html:not(.wide) .rdoc .meter-row{flex-wrap:wrap;row-gap:2px}
html:not(.wide) .rdoc .pr-sk-row small{display:block!important;margin-left:0}
html:not(.wide) .parent-rep .pr-back{min-height:48px;font-size:15px!important}
@media print{.pr-jump,.pr-gl-cta{display:none!important}}
.rh-meta{text-align:right;line-height:1.35;min-width:0}
.rh-meta b{display:block;font-size:12px;letter-spacing:.12em;color:#1158B4;font-weight:700}
.rh-meta span{display:block;font-size:12px;color:var(--muted)}
.rh-title{font-size:26px;line-height:1.15;color:#0D3B8E;margin:16px 0 6px;font-weight:700;text-wrap:balance}
.rh-intro{font-size:14px;line-height:1.55;color:#3d4a59;margin:0 0 12px;max-width:62ch}
.rh-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;background:#F0F6FE;border:1px solid #C9DDF8;border-radius:12px;padding:10px 14px}
.rh-who b{font-size:18px;color:var(--ink)}
.rh-who span{font-size:14px;color:#475569}
.rh-who em{font-style:normal;font-size:12px;font-weight:600;color:#1158B4;background:#fff;border:1px solid #C9DDF8;border-radius:999px;padding:2px 10px}
.fr-doc .rh{margin:0 0 4px}
.cert-logo{height:30px;width:auto;display:block;margin:0 auto 10px}
@media print{.rh{padding:0 0 6px}.rh,.rh *{-webkit-print-color-adjust:exact;print-color-adjust:exact}.rh-title{font-size:26px}}
/* 1 Oct 2026: the interests ring (fjRing) */
.fj-ring{display:block;width:100%;height:auto;overflow:visible;font-family:Manrope,system-ui,sans-serif}
/* 3 Oct 2026: the interests card's careers as readable chips, then the matches card (fjMap) */
.fjm{margin-top:10px}
.fjm-t,.fjm-bt{font-size:12px;font-weight:800;letter-spacing:.12em;color:#0D3B8E;text-align:center}
.fjm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.fjm-chip{position:relative;display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 7px;border-radius:999px;background:#fff;
  border:1px solid #D6E4F5;font-size:12px;font-weight:600;line-height:1.2;color:var(--body)}
.fjm-chip .fjm-ic{width:14px;height:14px;stroke-width:2}
.fjm-chip.on{background:#1769D2;border-color:#1769D2;color:#fff;font-weight:800;padding-left:20px}
.fjm-chip.on .fjm-ic{color:#fff}
.fjm-bd{position:absolute;left:-6px;top:-7px;width:18px;height:18px;border-radius:50%;background:#FF8A1F;color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #EAF7F0}
.fjm-arrow{text-align:center;color:#1769D2;font-size:22px;line-height:1;margin:8px 0 4px}
.fjm-box{background:#fff;border:1.5px solid #C9DDF8;border-radius:16px;padding:12px;box-shadow:0 6px 14px rgba(13,59,142,.10)}
.fjm-slot{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;margin-top:10px;padding:8px 12px;border:2px solid #1769D2;
  border-radius:12px;font-size:14px;font-weight:700;color:var(--ink)}
.fjm-slot .fjm-ic{width:18px;height:18px}
.fjm-sn{position:absolute;left:-8px;top:-8px;width:20px;height:20px;border-radius:50%;background:#1769D2;color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center}
.fjm-empty{justify-content:center;min-height:34px;padding:6px;border:1.5px dashed #9EC3F2;background:#F7F9FC}
.fjm-empty .fjm-ic{color:#9EC3F2}
.fjm-cap{margin-top:8px;font-size:12px;color:var(--muted);text-align:center}
.fj-rt{text-anchor:middle;font-size:12px;font-weight:700;letter-spacing:.14em;fill:var(--primary-dark)}
.fj-band{fill:none;stroke:#E3EEFC;stroke-width:38}
.fj-core{fill:#fff4e8;stroke:#FFC285;stroke-width:1.5}
.fj-ct{text-anchor:middle;font-size:8.2px;font-weight:700;letter-spacing:.06em;fill:#B35900}
.fj-av{fill:#E3EEFC}.fj-me{fill:#5B9BE8}
.fj-node{fill:#fff;stroke:#C9DDF8;stroke-width:1.5}
.fj-node.fj-m1,.fj-node.fj-m2{fill:#F0F6FE;stroke-width:2.6}
.fj-node.fj-m1{stroke:var(--primary)}.fj-node.fj-m2{stroke:#1158B4}
.fj-lb{text-anchor:middle;font-size:8.4px;font-weight:600;fill:var(--ink)}
.fj-chip{fill:#fff;stroke-width:2}
.fj-chip.fj-m1{stroke:var(--primary)}.fj-chip.fj-m2{stroke:#1158B4}
.fj-cl{text-anchor:middle;font-size:7.8px;font-weight:600;fill:var(--ink)}
.fj-ra{fill:none;stroke-width:2;stroke-linecap:round}
.fj-ra.fj-m1{stroke:var(--primary)}.fj-ra.fj-m2{stroke:#1158B4}
.fj-mf.fj-m1{fill:var(--primary)}.fj-mf.fj-m2{fill:#1158B4}
.fj-bd.fj-m1{fill:var(--primary)}.fj-bd.fj-m2{fill:#1158B4}
.fj-bn{text-anchor:middle;font-size:8px;font-weight:700;fill:#fff}

/* ==== 1 Oct 2026: the full-screen web view on a laptop (app.js wideSync). The layout of the old DISHA web app - a dark
   sidebar with the tabs on the left, the page wide on the right - in today's DISHA blue. html.wide = full screen;
   html.wide-nav = a page that has the tab bar, which becomes the sidebar. Phones never get these classes. ==== */
.ap-opt.wide-rec{border-color:var(--primary);box-shadow:0 8px 22px rgba(91, 155, 232,.16)}
.wide-chip{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--bg-teal);color:var(--primary-dark);font-size:12px;font-weight:700;vertical-align:2px}
.wide-fab{position:fixed;right:20px;bottom:20px;z-index:50;border:1.5px solid var(--border-soft);background:#fff;color:var(--primary-dark);font:inherit;font-size:14px;font-weight:700;padding:11px 18px;border-radius:999px;box-shadow:0 10px 26px rgba(10, 44, 107,.16);cursor:pointer}
.wide-fab:hover{border-color:var(--primary);background:var(--bg-teal)}
.wide-fab:focus-visible,.wsb-link:focus-visible,.wsb-switch:focus-visible{outline:3px solid var(--accent-light);outline-offset:2px}
html.wide{--wsb-w:248px;--w-col:1000px;--w-hub:1160px;--w-ground:#F0F6FE}
html.wide body{background:var(--w-ground)}
html.wide .desk{display:block;height:100svh;background:var(--w-ground)}
html.wide .phone{max-width:none;width:auto;height:100svh;border-radius:0;box-shadow:none;background:var(--w-ground)}
html.wide-nav .phone{margin-left:var(--wsb-w);background:var(--w-ground)}
html.wide .bnav{display:none}
/* pages without the sidebar: the page is one wide column in the middle, like a form on a website */
html.wide #app{align-items:center;overflow:hidden}
html.wide #app>.screen{width:100%;max-width:var(--w-col);background:#fff;box-shadow:0 0 0 1px var(--border),0 18px 50px rgba(10, 44, 107,.08)}
/* pages with the sidebar: wide, starting from the left, the way the old web app did */
html.wide-nav #app{align-items:flex-start}
html.wide-nav #app>.screen{max-width:calc(var(--w-hub) + 64px);background:none;box-shadow:none}
html.wide-nav #app>.screen{padding:0 clamp(8px,2vw,32px)}

html.wide-nav .hub-head{padding-top:28px;padding-bottom:12px}
html.wide-nav .hub-title{font-size:26px}
html.wide .cta-dock{background:linear-gradient(180deg,rgba(255,255,255,0),#fff 30%)}
html.wide-nav .cta-dock{background:linear-gradient(180deg,rgba(240, 246, 254,0),var(--w-ground) 30%)}
html.wide .cta-dock>.btn-primary,html.wide .cta-dock>.btn-ghost,html.wide .cta-dock>.dock-row-inner,html.wide .fs-dock>.btn-primary{max-width:460px;margin-left:auto;margin-right:auto}
html.wide .cta-dock.dock-row{justify-content:center}
html.wide .cta-dock.dock-row .btn-primary{flex:0 1 420px}
html.wide .btn-primary,html.wide .btn-ghost,html.wide .ap-opt,html.wide .jr,html.wide .st-card,html.wide .lib-tile{cursor:pointer}
html.wide .balanced-actions{max-width:460px;width:100%;margin-left:auto;margin-right:auto}
html.wide .ap-list{max-width:620px;margin-left:auto;margin-right:auto}
html.wide .ins-mid{max-width:680px;margin:0 auto}
/* the hub pages, wider */
html.wide-nav .home-scroll{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:28px;align-content:start}
html.wide-nav .home-scroll>.home-foot{grid-column:1/-1}
html.wide-nav .home-scroll .hub-sec{background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px 18px 16px;box-shadow:0 6px 20px rgba(10, 44, 107,.05)}
html.wide-nav .lib-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
html.wide-nav .lib-tile{height:168px}
html.wide-nav .prof-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
html.wide-nav .prof-scroll>*:not(.st-card){grid-column:1/-1}
html.wide-nav .prof-scroll>.st-card{margin:0;height:100%}
@media (min-width:1400px){html.wide-nav .prof-scroll{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the sidebar */
#wsb{display:none}
html.wide-nav #wsb{position:fixed;left:0;top:0;bottom:0;width:var(--wsb-w);z-index:40;display:flex;flex-direction:column;background:#071E4A;color:#E3EEFC}
.wsb-brand{display:flex;align-items:center;gap:12px;padding:22px 18px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.wsb-logo{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden}
.wsb-logo img{width:34px;height:34px;object-fit:contain}
.wsb-word b{display:block;color:#fff;font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1.1}
.wsb-word small{display:block;color:#9EC3F2;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.wsb-who{display:flex;align-items:center;gap:10px;margin:14px 12px 4px;padding:10px;border-radius:14px;background:rgba(255,255,255,.06)}
.wsb-who b{display:block;color:#fff;font-size:14px;line-height:1.2;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsb-who small{display:block;color:#9EC3F2;font-size:12px;font-weight:600}
.wsb-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--grad-primary);color:#fff;display:grid;place-items:center;font-weight:700}
.wsb-nav{flex:1 1 auto;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:3px}
.wsb-link{position:relative;display:flex;align-items:center;gap:13px;width:100%;padding:12px 14px;border:0;border-radius:12px;background:none;color:#E3EEFC;font:inherit;font-size:16px;font-weight:600;text-align:left;cursor:pointer}
.wsb-link:hover{background:rgba(255,255,255,.08);color:#fff}
.wsb-link.on{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(91, 155, 232,.35)}
.wsb-ic{width:24px;text-align:center;font-size:18px;line-height:1}
.wsb-dot{position:absolute;left:32px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid #071E4A}
.wsb-foot{flex:0 0 auto;padding:12px 10px 16px;border-top:1px solid rgba(255,255,255,.08)}
.wsb-switch{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:none;color:#C9DDF8;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.wsb-switch:hover{background:rgba(255,255,255,.07);color:#fff}
/* 12 Oct 2026 (owner): the home area in the styling of the previous DISHA web app - same layout and elements: a white
   sidebar with the page on show in a soft blue pill and an orange marker, a blue greeting band across the top, white
   cards with navy headings, and rows that lift a little on hover */
html.wide-nav #wsb{background:#fff;color:#3F4A57;border-right:1px solid #E3E9F0;box-shadow:2px 0 12px rgba(16,24,40,.03)}
html.wide-nav .wsb-brand{border-bottom:1px solid #E3E9F0}
html.wide-nav .wsb-logo{background:#fff;border:1px solid #E3E9F0}
html.wide-nav .wsb-word b{color:#0D3B8E}html.wide-nav .wsb-word small{color:#5F6B7A}
html.wide-nav .wsb-who{background:#EAF2FD}html.wide-nav .wsb-who b{color:#16202c}html.wide-nav .wsb-who small{color:#B45309}
html.wide-nav .wsb-link{color:#3F4A57}html.wide-nav .wsb-link:hover{background:#F2F6FC;color:#0D3B8E}
html.wide-nav .wsb-link.on{background:#EAF2FD;color:#0D3B8E;box-shadow:none}
html.wide-nav .wsb-link.on::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:4px;border-radius:4px;background:#FF8A1F}
html.wide-nav .wsb-link .wsb-ic{color:#6B7684}html.wide-nav .wsb-link.on .wsb-ic{color:#1769D2}
html.wide-nav .wsb-dot{border-color:#fff}
html.wide-nav .wsb-foot{border-top:1px solid #E3E9F0}
html.wide-nav .wsb-switch{border-color:#CFE0F7;color:#1769D2}html.wide-nav .wsb-switch:hover{background:#EAF2FD;color:#0D3B8E}
/* the greeting band: blue across the top of the hub pages */
.hub-head.v2{position:relative;isolation:isolate;color:#fff;background:none;clip-path:inset(0 -100vmax);padding-bottom:16px!important}.hub-head.v2::before{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;z-index:-1;background:linear-gradient(180deg,#1A5BC4,#0D3B8E)}
.hub-head.v2 .hub-title{color:#fff}
.hub-head.v2 .people-kicker{color:#C9DDF8}
.hub-head.v2 .hub-plan{background:#FF8A1F;color:#fff;border-color:transparent}
.hub-head.v2 .tb2-icon{color:#fff;background:rgba(255,255,255,.16);border-radius:50%}
.hub-head.v2 .tb2-icon:hover{background:rgba(255,255,255,.26)}
html.wide-nav .hub-head.v2{padding-top:22px;margin-bottom:18px}
/* cards and rows */
.home-scroll .hub-sec-h h3{color:#0D3B8E;font-size:17px}
html.wide-nav .home-scroll .hub-sec{border-color:#E3E9F0;border-radius:20px;box-shadow:0 8px 24px rgba(13,59,142,.06)}
.jr{border-color:#E3E9F0;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
button.jr:hover{transform:translateY(-1px);border-color:#B9D3F3;box-shadow:0 8px 18px rgba(13,59,142,.08)}
.jr.done .jr-n{background:#1E9E63;color:#fff}
.jr.todo .jr-n{background:#EAF2FD;color:#1769D2;font-weight:800}
.jr-go{color:#9AA4B1}button.jr:hover .jr-go{color:#1769D2}
/* 12 Oct 2026 (owner): the sidebar logo as on the other pages (the full DISHA Career Mentoring logo), a smaller menu, and
   no scroll bar beside the cards (the page still scrolls with the wheel or the trackpad) */
html.wide{--wsb-w:224px}
html.wide-nav .wsb-brand{padding:16px 18px 14px}
html.wide-nav .wsb-full{height:34px;width:auto;display:block}
html.wide-nav .wsb-who{margin:12px 10px 2px;padding:8px 10px}
html.wide-nav .wsb-who b{font-size:13.5px}html.wide-nav .wsb-who small{font-size:11.5px}
html.wide-nav .wsb-av{width:30px;height:30px;font-size:13px}
html.wide-nav .wsb-nav{padding:10px 10px;gap:2px}
html.wide-nav .wsb-link{padding:9px 12px;font-size:14.5px;gap:11px}
html.wide-nav .wsb-link .wsb-ic{width:20px;font-size:16px}
html.wide-nav .wsb-link .wsb-ic svg{width:19px;height:19px}
html.wide-nav .wsb-link.on::before{top:7px;bottom:7px}
html.wide-nav .wsb-switch{padding:8px 12px;font-size:13px}
html.wide-nav .hub-head.v2{padding-top:16px;padding-bottom:12px!important;margin-bottom:14px}
html.wide-nav .hub-head.v2 .hub-title{font-size:23px}
html.wide-nav .hub-scroll{scrollbar-width:none}html.wide-nav .hub-scroll::-webkit-scrollbar{display:none}
/* 12 Oct 2026 (owner): one compact, professional header on every page of the home area - the hub pages (Home, Internships,
   Profile, Skill Studios, Courses) and the pages that used the white top bar (Mentor, Account, Future Leaders Lab,
   Challenges) all get the same slim blue band: 11px kicker, 19px title, small badge, 34px round icons */
.hub-head.v2{padding:12px 20px 12px!important;margin-bottom:12px!important;align-items:center!important}
.hub-head.v2 .people-kicker{font-size:11px;letter-spacing:.09em}
.hub-head.v2 .hub-title{font-size:19px!important;font-weight:700;margin-top:1px;letter-spacing:-.005em}
.hub-head.v2 .hub-kick-row{gap:7px}
.hub-head.v2 .hub-plan{font-size:10.5px!important;padding:2px 8px!important;letter-spacing:.05em}
.hub-head.v2 .tb2-icon{width:34px;height:34px;border-radius:50%}.hub-head.v2 .tb2-icon svg{width:18px;height:18px}
.hub-head.v2 .hub-acts{gap:6px}
html.wide-nav .hub-head.v2{padding:12px 28px!important}
/* the white top bar inside the home area becomes the same band */
#app>.screen:has(.bnav)>.topbar.v2,html.wide-nav #app>.screen>.topbar.v2{position:relative;isolation:isolate;background:none!important;border:0!important;clip-path:inset(0 -100vmax);
  margin-bottom:12px;padding:6px 12px!important}
#app>.screen:has(.bnav)>.topbar.v2::before,html.wide-nav #app>.screen>.topbar.v2::before{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;z-index:-1;background:linear-gradient(180deg,#1A5BC4,#0D3B8E)}
#app>.screen:has(.bnav)>.topbar.v2 .tb2-row,html.wide-nav #app>.screen>.topbar.v2 .tb2-row{min-height:50px;gap:8px}
#app>.screen:has(.bnav)>.topbar.v2 .tb2-logo,html.wide-nav #app>.screen>.topbar.v2 .tb2-logo{display:none}
#app>.screen:has(.bnav)>.topbar.v2 .tb2-tt,html.wide-nav #app>.screen>.topbar.v2 .tb2-tt{text-align:left;border:0;padding-left:4px;margin:0}
#app>.screen:has(.bnav)>.topbar.v2 .tb2-tt b,html.wide-nav #app>.screen>.topbar.v2 .tb2-tt b{color:#fff;font-size:19px;font-weight:700}
#app>.screen:has(.bnav)>.topbar.v2 .tb2-tt small,html.wide-nav #app>.screen>.topbar.v2 .tb2-tt small{color:#C9DDF8;font-size:12px}
#app>.screen:has(.bnav)>.topbar.v2 .back,#app>.screen:has(.bnav)>.topbar.v2 .tb2-icon,html.wide-nav #app>.screen>.topbar.v2 .back,html.wide-nav #app>.screen>.topbar.v2 .tb2-icon{
  width:34px;height:34px;border-radius:50%;border:0!important;background:rgba(255,255,255,.16);color:#fff}
#app>.screen:has(.bnav)>.topbar.v2 .back svg,#app>.screen:has(.bnav)>.topbar.v2 .tb2-icon svg,html.wide-nav #app>.screen>.topbar.v2 .back svg,html.wide-nav #app>.screen>.topbar.v2 .tb2-icon svg{width:18px;height:18px}
html.wide-nav #app>.screen>.topbar.v2{padding:6px 28px!important;position:relative!important;top:auto!important}
/* smaller cards across the home area */
.jr{padding:9px 12px;gap:10px;border-radius:14px}
.jr-n{width:26px;height:26px;font-size:12.5px}
.jr-t b{font-size:14.5px}.jr-t em{font-size:12px}
.jr-go{font-size:19px}
.jr-list{display:flex;flex-direction:column;gap:7px}
html.wide-nav .home-scroll .hub-sec{padding:14px 14px 12px;border-radius:18px}
.home-scroll .hub-sec-h h3{font-size:15.5px}
html.wide-nav .lib-tile{height:140px}
html.wide-nav .lib-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
/* 12 Oct 2026 (owner): the student's name looked like one more menu option - now a profile block: no pill, a larger
   avatar, the plan as a small orange badge, and a line between it and the menu */
html.wide-nav .wsb-who{background:none!important;margin:0;padding:16px 18px 14px;border-radius:0;border-bottom:1px solid #E3E9F0;gap:12px}
html.wide-nav .wsb-av{width:40px;height:40px;font-size:16px;box-shadow:0 0 0 3px #EAF2FD}
html.wide-nav .wsb-who b{font-size:15px;color:#16202c;font-weight:700}
html.wide-nav .wsb-who small{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:999px;background:#FFF1E3;color:#C2560A!important;font-size:10.5px!important;font-weight:800;letter-spacing:.04em}
html.wide-nav .wsb-nav{padding-top:12px}
.screen:has(.home-scroll) .hub-head.v2 .people-kicker,.screen:has(.home-scroll) .hub-head.v2 .hub-plan{display:none!important}/* 12 Oct 2026 (owner): the header properties of the previous web app (its desktop.css .dsk-topbar): a 78px band, padding
   22px 32px, a 135deg gradient #0D3B8E -> #1769D2, 34px round buttons at 18% white with 18px icons; the greeting 11.5px/700
   at 70% white and the name 18.4px/800 white on one line */
.hub-head.v2::before,#app>.screen:has(.bnav)>.topbar.v2::before,html.wide-nav #app>.screen>.topbar.v2::before{background:linear-gradient(135deg,#0D3B8E,#1769D2)!important}
html.wide-nav .hub-head.v2{min-height:78px;padding:16px 32px!important}
.hub-head.v2 .tb2-icon,#app>.screen:has(.bnav)>.topbar.v2 .back,#app>.screen:has(.bnav)>.topbar.v2 .tb2-icon,html.wide-nav #app>.screen>.topbar.v2 .tb2-icon{width:34px;height:34px;background:rgba(255,255,255,.18)}
.hub-head.v2 .hub-title,#app>.screen:has(.bnav)>.topbar.v2 .tb2-tt b,html.wide-nav #app>.screen>.topbar.v2 .tb2-tt b{font-size:18.4px!important;font-weight:800}
.screen:has(.home-scroll) .hub-head.v2 .hub-title{margin:0;line-height:1.15;display:flex;align-items:baseline;gap:4px}
.hub-title .hi-w{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.7)}.hub-title .hi-n{font-size:18.4px;font-weight:800;color:#fff}.hub-title .hi-wave{font-size:16px;margin-left:3px}
@media print{#wsb,.wide-fab{display:none!important}html.wide-nav .phone{margin-left:0}}
html.wide .fj-ring{max-width:440px;margin:0 auto}
html.wide .fj{max-width:760px;margin:0 auto}
html.wide-nav #app>.screen>.center>.btn-ghost{max-width:460px;margin-left:auto;margin-right:auto}
/* 2 Oct 2026: the card shown while a section's voice in the new language comes down */
.lh-bar{height:9px;border-radius:6px;background:var(--track);overflow:hidden;margin-top:14px}
.lh-bar>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent-light),var(--primary));transition:width .3s ease}
/* 2 Oct 2026: the school student's details, to confirm (schoolCheck) */
.sc-card{margin:16px auto 0;max-width:520px;text-align:left;background:#fff;border:1.5px solid var(--border);border-radius:18px;box-shadow:var(--shadow-card);overflow:hidden}
.sc-row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 16px;border-top:1px solid var(--border)}
.sc-row:first-child{border-top:0}
.sc-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.sc-v{font-size:16px;font-weight:700;color:var(--ink)}
.sc-v em{font-style:normal;font-weight:600;color:var(--faint);font-size:14px}
@media (max-width:380px){.sc-row{grid-template-columns:1fr;gap:2px}}
.sc-ask .sc-v input,.sc-ask .sc-v select{text-align:left;width:100%;font:inherit;font-size:16px;font-weight:600;padding:9px 11px;border:1.5px solid var(--primary);border-radius:10px;background:#fff;color:var(--ink)}
.sc-ask{background:var(--bg-teal)}
.sc-err{margin:12px 0 0;color:var(--danger);font-weight:600;font-size:14px}
/* 2 Oct 2026 (owner: "rearrange the options so that all can be seen in this page - side by side"): on a laptop the question
   pages show every option without scrolling. A picture with answers: the picture on the left, the answers on the right. */
html.wide .scroll:has(> .scene-banner + .opt-rows){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:24px;align-content:start;align-items:center}
html.wide .scroll:has(> .scene-banner + .opt-rows)>*{grid-column:1/-1}
html.wide .scroll:has(> .scene-banner + .opt-rows)>.scene-banner{grid-column:1;grid-row:1;margin:0;height:auto;aspect-ratio:4/3;max-height:calc(100svh - 230px)}
html.wide .scroll:has(> .scene-banner + .opt-rows)>.opt-rows{grid-column:2;grid-row:1}
/* four photo cards in one row */
html.wide .card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:8px 20px 6px}
html.wide .act-card{aspect-ratio:1/1.3}
/* the four closest worlds in one row */
html.wide .wl-near{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
html.wide .wl-tile.big{aspect-ratio:3/4}
/* the twelve career areas in three columns */
html.wide .interest-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html.wide .interest-card{min-height:0;padding:8px 10px 8px 8px}
html.wide .interest-card .interest-thumbs{transform:none}
/* 6 Oct 2026: on a laptop each career card is the pictures on top, full width, and the name under them - beside the
   pictures (96 px wide) a four-across card left the name too little room and long words ran out of the card */
html.wide .interest-card{position:relative;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;padding:8px 8px 10px;text-align:left}
html.wide .interest-card .interest-thumbs{flex:0 0 auto;width:100%;height:64px}
html.wide .interest-card .or-lab{padding:0 4px;overflow-wrap:break-word;hyphens:none}
html.wide .interest-card .or-tick{position:absolute;top:12px;right:12px}
@media (max-height:820px){html.wide .interest-card .interest-thumbs{height:46px}html.wide .int-none small{display:none}}
@media (max-height:700px){html.wide .interest-card .interest-thumbs{height:40px}html.wide .interest-card{gap:5px;padding:6px 6px 7px}html.wide .interest-card .or-lab{font-size:13px;line-height:1.25}}
html.wide .wl-rest{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
html.wide .wl-rest .wl-tile .wl-copy em{display:none}
/* 6 Oct 2026: seven across, a tile is about 150 px wide - the names smaller, wrapping only between words, so none runs out of its tile */
html.wide .wl-rest .wl-tile .wl-copy{padding:6px 7px}
html.wide .wl-rest .wl-tile .wl-copy b{font-size:12px;line-height:1.2;overflow-wrap:break-word;hyphens:none}
html.wide:not(.wide-nav) .wl-near .wl-tile.big{aspect-ratio:4/3!important}html.wide:not(.wide-nav) .wl-rest .wl-tile{aspect-ratio:16/11}   /* flatter tiles: every world and Continue in view */
@media (max-height:740px){html.wide:not(.wide-nav) .wl-near .wl-tile.big{aspect-ratio:16/9!important}html.wide:not(.wide-nav) .wl-rest .wl-tile{aspect-ratio:16/10}}
@media (max-height:680px){html.wide:not(.wide-nav) .wl-near .wl-tile.big{aspect-ratio:21/9!important}html.wide:not(.wide-nav) .wl-rest .wl-tile{aspect-ratio:2/1}}
@media (max-height:740px){html.wide .wl-tile.big .wl-copy{padding:6px 7px}html.wide .wl-tile.big .wl-copy b{font-size:12px;line-height:1.2}}
/* A2 - the parent's cards on a laptop: the picture whole on the left, the words on the right, the buttons always in view */
html.wide #app>.screen.parent-v2:not(.consent-v2){width:min(1100px,calc(100% - 64px));max-height:calc(100svh - 120px);margin:auto}
html.wide .parent-v2 .pc-scroll{padding:28px 0 4px;overflow:visible;flex:0 0 auto}
html.wide .parent-v2 .pc-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:40px;text-align:left;padding:0 8px;align-content:center}
html.wide .parent-v2 .pc-card .pc-img{grid-column:1;grid-row:1/-1;height:auto;aspect-ratio:4/3;max-height:calc(100svh - 330px);margin:0}
html.wide .parent-v2 .pc-t{grid-column:2;align-items:flex-start;min-height:0;font-size:28px;margin-top:8px}
html.wide .parent-v2 .pc-ic{font-size:32px}
html.wide .parent-v2 .pc-d{grid-column:2;min-height:0;font-size:18px;line-height:1.65;margin-top:14px}
html.wide .parent-v2 .pc-dots{margin-top:18px}
/* the card fits any screen height: the picture takes whatever room is left, the dots and buttons always show */
html.wide #app>.screen.parent-v2:not(.consent-v2){height:calc(100svh - 96px);max-height:min(560px,calc(100svh - 96px))!important;display:flex;flex-direction:column}
@media (max-height:760px){html.wide #app>.screen.consent-v2>*:not(.topbar){zoom:1!important}html.wide .consent-v2 .bq-ic{display:none}html.wide #app>.screen.consent-v2{max-height:calc(100svh - 40px)}}
html.wide .parent-v2 .pc-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-top:18px}
html.wide .parent-v2 .pc-view{flex:1 1 auto;min-height:0}
html.wide .parent-v2 .pc-track,html.wide .parent-v2 .pc-card{height:100%}
html.wide .parent-v2 .pc-card{grid-template-rows:auto auto 1fr;align-content:stretch}
html.wide .parent-v2 .pc-card .pc-img{height:100%;max-height:none;aspect-ratio:auto;min-height:0}
html.wide .parent-v2 .pc-card .pc-img img{object-fit:cover}
html.wide .parent-v2 .pc-dots{flex:0 0 auto;margin-top:14px}
html.wide .parent-v2 .cta-dock{flex:0 0 auto}
html.wide .parent-v2 .cta-dock{display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:center;gap:12px;padding:14px 0 6px}
html.wide .parent-v2 .cta-dock>.why-note{order:9;flex:0 0 100%;text-align:center;margin:0}
html.wide .parent-v2 .cta-dock>.btn-primary,html.wide .parent-v2 .cta-dock>.btn-ghost{width:auto;min-width:200px;margin:0!important}
/* ==== 5 Oct 2026: the web view redesigned - page templates for laptops (html.wide; phones never get these) ====
   A Welcome (start) · B Question (one centred card) · C Mentor and story · D Report · E Hub (the sidebar pages) */
.tb2-logo,.sv-web-lead,.sv-web-facts{display:none}
/* the journey frame: the page is the light ground, the top bar runs the full width */
html.wide:not(.wide-nav) #app>.screen{max-width:none;background:var(--w-ground);box-shadow:none}
html.wide .topbar.v2{padding:0 max(24px,calc((100% - 1240px)/2));border-bottom:1px solid var(--border);background:#fff}
html.wide .tb2-row{min-height:68px;gap:12px}
html.wide .tb2-logo{display:block;height:40px;width:auto;margin:0 6px 0 4px}
html.wide .tb2-tt{flex:1 1 auto;text-align:left;padding-left:18px;margin-left:4px;border-left:1px solid var(--border)}
html.wide .tb2-tt b{font-size:17px;font-weight:700}
html.wide .tb2-tt small{font-size:13px}
html.wide .topbar.v2 .back{border:1px solid var(--border)}
html.wide .tb2-seg,html.wide .tb2-line{margin:0 0 10px;padding:0}
html.wide .tb2-seg{padding:0 0 10px}
/* B - Question: everything below the top bar is one centred white card (the top bar stays fixed across the top) */
html.wide:not(.wide-nav) #app{padding-top:69px}
html.wide:not(.wide-nav) #app>.screen>.topbar.v2{position:fixed;left:0;right:0;top:0;z-index:30}
html.wide:not(.wide-nav) #app>.screen:not(.start-v2){width:min(1040px,calc(100% - 64px));
  max-width:none;flex:0 1 auto;margin:auto;
  max-height:calc(100svh - 69px - 104px);min-height:0;background:#fff;border:1px solid var(--border);border-radius:24px;
  box-shadow:0 18px 48px rgba(15,23,42,.07);padding:18px 32px 12px;overflow:hidden}
html.wide:not(.wide-nav) #app>.screen>.scroll .cta-dock,html.wide:not(.wide-nav) #app>.screen>.cta-dock{background:none}
html.wide:not(.wide-nav) #app>.screen .balanced-main{min-height:0}
html.wide:not(.wide-nav) #app>.screen:not(.start-v2):not(:has(#rep-car))>*:not(.topbar){zoom:1.12}   /* laptop reading size: everything in the card a little larger */
/* 6 Oct 2026: buttons on a laptop - a set size, not stretched or enlarged: the main button 360 px and 52 px high, the
   smaller buttons under it in one row exactly as wide as the main button, every button centred on the page */
html.wide .cta-dock{zoom:1!important}
html.wide:not(.wide-nav) #app>.screen:not(.start-v2):not(:has(#rep-car)) .cta-dock{zoom:.893!important}
html.wide .cta-dock .btn-primary{font-size:16px;padding:0 24px;min-height:52px;line-height:1.2}
html.wide .cta-dock>.btn-primary,html.wide .cta-dock>.btn-ghost,html.wide .cta-dock>.dock-row-inner,html.wide .cta-dock>.why-note,
html.wide .cta-dock>.gate-note{width:100%;max-width:360px;margin-left:auto!important;margin-right:auto!important}
html.wide .cta-dock .btn-ghost{font-size:14px;padding:0 16px;min-height:44px;line-height:1.2}
html.wide .cta-dock>.dock-row-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
html.wide .cta-dock>.dock-row-inner>.btn-ghost{width:100%;margin:0!important;white-space:nowrap}
html.wide .cta-dock>.btn-ghost{margin-top:10px!important}
/* 6 Oct 2026: the free reading ("Your career journey") on a laptop - the first report after sign-up, so not a small framed
   box with its own scrollbar: the page uses the whole window under the top bar, the reading in a wide centred column, the
   Next button in a bar along the bottom; milestone 01 puts the careers and the matches side by side */
html.wide:not(.wide-nav) #app>.screen.fj-screen{width:100%!important;max-width:none!important;max-height:none!important;height:100%;margin:0;
  border:0;border-radius:0;box-shadow:none;background:var(--w-ground);padding:0}
html.wide .fj-screen>.fj-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;background:transparent!important}
html.wide .fj-screen .fj{max-width:1080px;margin:0 auto;padding:28px 32px 40px}
html.wide .fj-screen>.fs-cta{flex:0 0 auto;background:#fff!important;border-top:1px solid var(--border);padding:12px 24px 14px}
html.wide .fj-card[data-fj="0"] .fjm{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:28px;align-items:center}
html.wide .fj-card[data-fj="0"] .fjm>.fjm-t,html.wide .fj-card[data-fj="0"] .fjm>.fjm-chips{grid-column:1}
html.wide .fj-card[data-fj="0"] .fjm>.fjm-arrow{display:none}
html.wide .fj-card[data-fj="0"] .fjm>.fjm-box{grid-column:2;grid-row:1/span 2}
html.wide .fj-card[data-fj="0"] .fjm>.fjm-t{align-self:end;margin-bottom:4px}html.wide .fj-card[data-fj="0"] .fjm>.fjm-chips{align-self:start}
/* the milestone drawings at a reading size, centred - they scaled with the wide column (the boxes above drawing 02 share its width so the lines still meet them) */
html.wide .fj-screen .fj-todo-card .fj-slots,html.wide .fj-screen .fj-todo-card .fj-svg{max-width:440px;margin-left:auto;margin-right:auto}
html.wide .fj-screen .fj-todo-card .fj-svg{display:block;width:100%}
html.wide .fj-next .fj-go,html.wide .fj-next .fj-more-btns{max-width:360px;margin-left:auto;margin-right:auto}
html.wide .fj-next .fj-go{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;font-size:16px}
html.wide .fj-next .fj-more-btns .btn-ghost{min-height:44px;padding:0 16px;font-size:14px}
html.wide .fj-next>p,html.wide .fj-next .fj-price{text-align:center}
html.wide .cta-dock .btn-primary,html.wide .cta-dock .btn-ghost{display:flex;align-items:center;gap:8px}
html.wide .cta-dock .btn-primary:not(.btn-arrow),html.wide .cta-dock .btn-ghost:not(.btn-arrow){justify-content:center;text-align:center}
/* the plan page: only the chosen plan's button shows (the flex rule above must not reveal the other one); it keeps the set width */
html.wide .pay-two[data-plan="cl"] .pp-b-full,html.wide .pay-two[data-plan="full"] .pp-b-cl{display:none!important}
html.wide .cta-dock>.pp-cta,html.wide .cta-dock>.pp-safe,html.wide .cta-dock>.pay-links{max-width:360px;margin-left:auto;margin-right:auto}
/* 6 Oct 2026: the plan page on a laptop - a package page: the whole window like the free reading, the two packages side by
   side, each with its name, price, what it is for, everything it includes, and its own button; DISHA 360 highlighted */
html.wide:not(.wide-nav) #app>.screen.pay-two{width:100%!important;max-width:none!important;max-height:none!important;height:100%;margin:0;
  border:0;border-radius:0;box-shadow:none;background:var(--w-ground);padding:0}
html.wide .pay-two>.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;background:transparent;padding:0 32px 32px}
html.wide .pay-two>.scroll>*{max-width:1080px;margin-left:auto!important;margin-right:auto!important}
html.wide .pay-two>.scroll>.pad{padding:26px 0 0;text-align:center}
html.wide .pay-two>.scroll>.pad .sub{max-width:680px;margin:8px auto 0}
html.wide .pay-two .pp-tiles{display:none}
html.wide .pay-two .oc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:26px;align-items:stretch}
html.wide .pay-two .oc-grid:has(.oc-full.open){align-items:start}   /* equal heights on load; 360 opened grows on its own */
html.wide .pay-two .oc-card{display:flex!important;flex-direction:column;position:relative;padding:26px 24px 24px;border-radius:22px;background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.06),inset 0 0 0 1.5px var(--border)}
html.wide .pay-two .oc-full{box-shadow:0 18px 44px rgba(13,59,142,.16),inset 0 0 0 2px #1769D2}
html.wide .pay-two .oc-full::before{content:"THE FULL YEAR";position:absolute;top:-12px;left:24px;padding:4px 12px;border-radius:999px;
  background:linear-gradient(135deg,#FF8A1F,#F59E0B);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em}
html.wide .pay-two .oc-kicker,html.wide .pay-two .oc-name,html.wide .pay-two .oc-price{display:block}
html.wide .pay-two .oc-kicker{font-size:12px;letter-spacing:.1em;color:var(--muted)}
html.wide .pay-two .oc-name{font-size:26px;color:#0D3B8E;margin-top:4px}
html.wide .pay-two .oc-price{font-size:34px;font-weight:800;color:#1769D2;margin:10px 0 2px;line-height:1.1}
html.wide .pay-two .oc-price small{display:block;font-size:12px;margin:4px 0 0}
html.wide .pay-two .oc-lead{font-size:14.5px;line-height:1.6;color:var(--body);padding-bottom:14px;border-bottom:1px solid var(--border)}
html.wide .pay-two .oc-card:not(.open) .oc-more{display:none!important}
html.wide .pay-two .oc-see{display:block!important;margin:4px 0 20px}
html.wide .pay-two .oc-card .pay-row{font-size:14px;padding:8px 0;border-bottom:0}
html.wide .pay-two .oc-card .pay-row .ic{width:30px;height:30px;flex-basis:30px;font-size:15px;border-radius:9px;background:#EEF6FF}
html.wide .pay-two .oc-card>#pay-now,html.wide .pay-two .oc-card>#pay-full{display:flex!important;align-items:center;justify-content:center;width:100%;
  min-height:52px;margin-top:auto;padding:0 20px;font-size:16px;font-weight:800;border:0;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,#1769D2,#0D3B8E);box-shadow:0 10px 22px rgba(13,59,142,.24)}
html.wide .pay-two .oc-card>.oc-rows:last-of-type,html.wide .pay-two .oc-card>.oc-more{margin-bottom:20px}
html.wide .pay-two .oc-save{order:9;margin-top:14px;text-align:center}
html.wide .pay-two details.pay-note-once{display:block;width:100%;margin-top:22px!important;max-width:720px!important}
html.wide .pay-two .oc-full .pay-row{padding:6px 0;font-size:13.5px;line-height:1.45}
html.wide .pay-two .oc-full .oc-sub{margin-top:10px}
html.wide .pay-two .cta-dock{max-width:720px!important;background:none;padding:14px 0 0}
html.wide .pay-two .cta-dock>.pp-cta{display:none}
html.wide .balanced-actions{max-width:360px!important}
html.wide .balanced-actions .btn-primary,html.wide .cta-dock-inline .btn-primary{display:flex;align-items:center;justify-content:center;font-size:16px;padding:0 24px;min-height:52px;line-height:1.2}
html.wide .balanced-actions .btn-ghost,html.wide .cta-dock-inline .btn-ghost{display:flex;align-items:center;justify-content:center;font-size:14px;padding:0 16px;min-height:44px;line-height:1.2}
html.wide .cta-dock-inline{max-width:360px;margin-left:auto;margin-right:auto}
html.wide .bq-q{font-size:30px}
html.wide .opt-row,html.wide .opt{font-size:17px}
/* A - Welcome: the mentor's video on the left; the promise, the facts and the buttons on the right */
html.wide #app>.screen.start-v2{display:grid;grid-template-columns:auto minmax(0,540px);grid-template-rows:auto 1fr auto auto auto 1fr;
  column-gap:64px;justify-content:center;align-content:center;padding:28px 40px;background:var(--w-ground)}
html.wide .start-v2>.scroll,html.wide .start-v2 .hero{display:contents}
html.wide .start-v2 .brand-row{grid-column:1/-1;grid-row:1;margin-bottom:22px}
html.wide .start-v2 .video-hero{grid-column:1;grid-row:2/7;margin:0;height:min(72vh,660px);width:auto;aspect-ratio:9/16;border-radius:24px;box-shadow:0 24px 60px rgba(13,59,142,.2)}
html.wide .start-v2 .vh-video{object-fit:contain;background:#0b1730}   /* the mentor's video is portrait (720x1280): shown whole */
html.wide .start-v2 .hero-h1{grid-column:2;grid-row:2;align-self:end;margin:0;font-size:52px;line-height:1.08;letter-spacing:-.03em;color:#0D3B8E}
html.wide .start-v2 .sv-web-lead{display:block;grid-column:2;grid-row:3;margin:18px 0 0;font-size:19px;line-height:1.6;color:var(--muted)}
html.wide .start-v2 .sv-web-facts{display:flex;grid-column:2;grid-row:4;gap:20px;margin:22px 0 4px;padding:0;list-style:none;font-size:15px;font-weight:600;color:var(--body)}
html.wide .start-v2 .sv-web-facts li::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#1769D2;color:#fff;font-size:12px}
html.wide .start-v2 .cta-dock{grid-column:2;grid-row:5;align-self:start;padding:18px 0 0;background:none;max-width:420px}
html.wide .start-v2 .cta-dock>.btn-primary,html.wide .start-v2 .cta-dock>.btn-ghost{max-width:none;margin-left:0}
/* C - Mentor and story (internship rooms, the mentor's introductions): the picture large on the left, shown whole;
   the mentor, the words and the buttons on the right */
html.wide:not(.wide-nav) #app>.screen:has(>.scroll>.guide-img){width:min(1320px,calc(100% - 48px));max-height:calc(100svh - 69px - 140px)}
html.wide .scroll:has(>.guide-img){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);grid-template-rows:auto auto 1fr auto;
  column-gap:32px;row-gap:14px;align-content:stretch}
html.wide .scroll:has(>.guide-img)>*{grid-column:2}
html.wide .scroll:has(>.guide-img)>.mentor-speak{display:none}
html.wide .scroll:has(>.guide-img)>.guide-img{grid-column:1;grid-row:1/-1;margin:0;align-self:center;display:flex;justify-content:center;
  background:#EEF3FA;border-radius:18px;padding:14px}
html.wide .scroll:has(>.guide-img)>.guide-img img{width:100%;height:auto;max-height:calc(100svh - 260px);object-fit:contain;border-radius:14px}
html.wide .scroll:has(>.guide-img)>.hc-speaker-live{grid-row:1;margin:0}
html.wide .scroll:has(>.guide-img)>.hc-script-card{grid-row:2;margin:0;box-shadow:none;border:0;padding:4px 2px}
html.wide .scroll:has(>.guide-img)>.hc-script-card p{font-size:18px;line-height:1.7}
html.wide .scroll:has(>.guide-img)>.cta-dock{grid-row:4;align-self:end;padding:8px 0 0}
html.wide .scroll:has(>.guide-img)>.cta-dock .btn-primary{flex:1 1 auto}
/* D - Report (progress report, Clarity report): the hero and the list of parts on the left, the cards as a two-column grid
   on the right, the whole page scrolls; the dots and "swipe" lines are not needed */
/* 7 Oct 2026: an important page, so not a small framed box - the reports use the whole window under the top bar (like the
   free reading); the content in a centred 1280 px column, the left column stays in view while the cards scroll */
html.wide:not(.wide-nav) #app>.screen:has(#rep-car){width:100%!important;max-width:none!important;max-height:none!important;height:100%;margin:0;
  border:0;border-radius:0;box-shadow:none;background:var(--w-ground);padding:0;overflow-y:auto}
html.wide:not(.wide-nav) #app>.screen:has(#rep-car) :has(>.wrep-main){width:100%;max-width:1280px;margin:0 auto!important;padding:28px 32px 40px!important;
  box-sizing:border-box;background:transparent!important;overflow:visible!important;height:auto!important;max-height:none!important}
html.wide:not(.wide-nav) #app>.screen:has(#rep-car) .wrep-side{top:20px;max-height:calc(100svh - 69px - 40px);overflow-y:auto;scrollbar-width:thin}
html.wide:not(.wide-nav) #app>.screen:has(#rep-car) :has(>.wrep-main){flex:none!important;min-height:0}
/* card 1 (four worlds, two reasons) is the tallest - across the full width, the four worlds two by two */
html.wide #rep-car .rep-slide:has(.mw-card){grid-column:1/-1}
html.wide #rep-car .report-card:has(>.mw-card){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start}
html.wide #rep-car .report-card:has(>.mw-card)>:not(.mw-card){grid-column:1/-1;margin-bottom:0}
html.wide #rep-car .report-card>.mw-card{margin:0}
.wrep-side,.wrep-main{display:contents}
html.wide :has(>.wrep-main){display:flex!important;flex-direction:row;align-items:flex-start;gap:28px}
html.wide .wrep-side{display:block;flex:0 0 280px;position:sticky;top:0}
html.wide .wrep-main{display:block;flex:1 1 auto;min-width:0}
html.wide .wrep-side>.report-hero{margin:0;border-radius:18px;height:auto!important;max-height:none!important;overflow:visible;padding-bottom:18px}
html.wide .wrep-side>.report-hero .btn-ghost{width:auto;margin-top:12px}
html.wide .wrep-side>.wrep-nav{margin-top:14px}
html.wide .wrep-main>.rep-say{margin:0 0 14px}
html.wide .wrep-main>.rep-foot,html.wide .wrep-main>.rep-dots,html.wide .wrep-main>.rep-count,html.wide .wrep-main>.rep-hint{display:none}
html.wide .wrep-main>.cta-dock{padding:18px 0 4px;background:none;position:static!important;transform:none!important}
html.wide #rep-car{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;overflow:visible;height:auto!important;min-height:max-content!important;flex:none;scroll-snap-type:none}
html.wide #rep-car .rep-slide{min-width:0;overflow:visible;padding:0;scroll-margin-top:12px}
html.wide #rep-car .rep-slide>.report-card{margin:0;min-height:0;height:100%}
.wrep-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wrep-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:none;font:inherit;
  font-size:14px;font-weight:600;color:var(--body);text-align:left;cursor:pointer}
.wrep-nav button:hover{background:#EEF6FF;color:var(--ink)}
.wrep-nav i{flex:0 0 24px;height:24px;border-radius:7px;background:#EEF6FF;color:#1769D2;font-style:normal;font-size:12px;font-weight:800;display:grid;place-items:center}
/* 2 Oct 2026: what a switched-off button is still waiting for */
.why-note{font-size:14px;font-weight:600;color:var(--primary-dark);text-align:center;margin:8px 0 0;line-height:1.4}
.btn-primary:not(:disabled)+.why-note{display:none}
.interest-other-label{display:block;margin:14px 2px 6px;font-weight:700;font-size:16px;color:var(--ink)}
.interest-other-input{border:2px solid var(--primary)!important}
.int-msg{display:block;margin-top:6px;color:var(--warn);font-weight:600;font-size:14px}
.interest-head .int-msg{color:#B35900}
/* 2 Oct 2026: the richer parts of a student's own report (summary, two pages per best career, action plan) */
.rr-wait{color:var(--muted);font-weight:600;font-size:14px}
.rr-headline{font-size:16px;font-weight:600;line-height:1.45;color:var(--primary-dark);background:var(--bg-teal);border-left:4px solid var(--primary);border-radius:0 12px 12px 0;padding:10px 12px;margin:4px 0 12px}
.rr-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:0 0 10px}
.rr-cols>div{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff}
.rr-cols>div>b:first-child{display:block;color:var(--primary-dark);margin:0 0 4px}.rr-cols p,.rr-cols ul,.rr-cols ol{margin:0;font-size:14px;line-height:1.45}.rr-cols ul,.rr-cols ol{padding-left:18px}
.rr-steps{margin:4px 0 0;padding-left:20px}
.rr-rank{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--primary)}
.rr-title{font-size:22px!important;margin:2px 0 10px!important;border-bottom:2px solid var(--primary);padding-bottom:6px}
.rr-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 10px}.rr-two ul{margin:4px 0 0;padding-left:18px}.rr-two p{margin:4px 0 0}
.rr-why{background:var(--bg-teal);border-radius:10px;padding:9px 12px;margin:0}
.rr-90{border:1.5px dashed var(--primary);border-radius:12px;padding:8px 12px}
.rr-sub{display:block;margin:12px 0 6px;color:var(--primary-dark)}
.rr-tl{list-style:none;margin:0;padding:0 0 0 14px;border-left:3px solid var(--bg-teal-2)}
.rr-tl li{display:grid;grid-template-columns:120px 1fr;column-gap:10px;margin:0 0 7px;font-size:14px}
.rr-tl li span{grid-row:1/span 2;font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.03em}
.rr-tl li em{font-style:normal;color:var(--body);font-size:14px}
.rr-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 20px}.rr-kv>div{border-top:1px solid var(--border);padding-top:6px}.rr-kv>div>b:first-child{display:block;color:var(--primary-dark);margin-bottom:3px}.rr-kv p,.rr-kv ul{margin:0;font-size:14px}.rr-kv ul{padding-left:18px}
.rr-muted{color:var(--muted)}.rr-caution{background:#fff5e0;border-radius:10px;padding:8px 12px;font-size:14px;margin:12px 0 0}
.rm-list{margin:6px 0 0;padding-left:18px}.rm-list li{margin:3px 0}
@media print{.rr-pg{break-before:page;page-break-before:always}.rr-career,.rr-glance{break-inside:auto}.rr-career p,.rr-career li,.rr-kv p,.rr-kv ul,.rr-tl li{font-size:12px;line-height:1.4}.rr-tl li em{font-size:12px}.rr-title{font-size:18px!important}.rr-two,.rr-kv>div{break-inside:avoid}}

/* ================================================================================================
   2 Oct 2026 - UI v2, phase 1 (from the UI expert's PDF): instruction boxes and errors
   ================================================================================================ */
/* every how-to line: the same soft-blue box */
.bq-help, .pair-hint, .vi-select-title > p, .interest-head > span:not(.int-msg), .howto {
  display:block; background:var(--howto-bg); color:var(--howto-ink); border-radius:12px; padding:10px 14px;
  font-size:14px; font-weight:400; line-height:1.5; opacity:1; text-align:center; margin:8px 0 14px; }
.interest-head > span:not(.int-msg) { text-align:left; margin:8px 0 4px; }
.vi-select-title > p { margin-left:auto; margin-right:auto; }   /* 6 Oct 2026: the instruction box centred under its heading (its width is capped) */
.pair-hint { margin:6px 16px 10px; }
/* one red alert style everywhere */
.err-alert { display:flex; gap:10px; align-items:flex-start; background:var(--err-bg); color:var(--err);
  border:1px solid var(--err-line); border-radius:12px; padding:12px 14px; margin:12px 0; font-size:14px; font-weight:600; line-height:1.45; text-align:left; }
.err-alert svg { flex:none; width:20px; height:20px; margin-top:1px; }
.field-err, .cc-row.field-err { border-color:var(--err) !important; box-shadow:0 0 0 3px rgba(200, 37, 27, .12) !important; }
.cc-row.field-err { border:1.5px solid var(--err); border-radius:12px; }
.field-err-msg { color:var(--err); font-size:12px; font-weight:600; margin:6px 2px 0; }

/* 2 Oct 2026 - UI v2 top bar and its menu sheet */
.topbar.v2 { display:block; padding:4px 6px 0; gap:0; background:#fff; border-bottom:1px solid var(--border); }
.tb2-row { display:flex; align-items:center; gap:2px; min-height:52px; }
/* 10 Oct 2026: the internship pages in the app's top bar (viBarV2) - Meet people / Journey and Expert Speaks as two
   buttons under the bar */
.vi-chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 2px}
.vi-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #CFE0F7;background:#EEF6FF;color:#1769D2;border-radius:999px;
  padding:7px 13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.vi-chip:hover{background:#E1EEFF}
.vi-chip.gold{color:#B45309;background:#FFF6EA;border-color:#FAD9AE}
html.wide .vi-chips{padding:12px 0 2px}
.topbar.v2 .back, .tb2-icon { flex:none; width:44px; height:44px; border:0; border-radius:12px; background:transparent; color:var(--ink);
  display:grid; place-items:center; padding:0; box-shadow:none; font-size:0; }
.topbar.v2 .back svg, .tb2-icon svg { width:24px; height:24px; }
.topbar.v2 .back:active, .tb2-icon:active { background:var(--bg-soft); }
.tb2-icon.on { color:var(--muted); }
.tb2-tt { flex:1 1 auto; min-width:0; text-align:center; line-height:1.25; }
.tb2-tt b { display:block; font-size:16px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb2-tt small { display:block; font-size:12px; font-weight:400; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb2-seg { display:flex; gap:5px; padding:4px 10px 10px; }
.tb2-seg i { flex:1; height:4px; border-radius:4px; background:var(--track); }
.tb2-seg i.on { background:var(--brand-blue); }
.tb2-line { height:3px; margin:4px 10px 10px; border-radius:3px; background:var(--track); overflow:hidden; }
.tb2-line i { display:block; height:100%; background:var(--brand-blue); border-radius:3px; }
.tb2-sheet { position:fixed; inset:0; z-index:900; }
.tb2-sheet[hidden] { display:none; }
.tb2-back { position:absolute; inset:0; background:rgba(15, 23, 42, .38); }
.tb2-panel { position:absolute; left:0; right:0; bottom:0; max-width:560px; margin:0 auto; background:#fff; border-radius:20px 20px 0 0;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(15, 23, 42, .18); animation:tb2Up .18s ease-out; }
@keyframes tb2Up { from { transform:translateY(24px); opacity:.6; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .tb2-panel { animation:none; } }
.tb2-grab { display:block; width:40px; height:4px; border-radius:4px; background:var(--border-soft); margin:2px auto 10px; }
/* 6 Oct 2026: on a laptop - a dropdown under the three dots over a dimmed page, no handle; a click outside closes it */
html.wide .tb2-back{background:rgba(15,23,42,.38);animation:tb2Fade .16s ease-out}
@keyframes tb2Fade{from{opacity:0}to{opacity:1}}
html.wide .tb2-panel{left:auto;bottom:auto;width:380px;max-width:calc(100vw - 24px);margin:0;border-radius:14px;padding:6px 14px;
  box-shadow:0 18px 44px rgba(15,23,42,.18),0 0 0 1px var(--border);animation:tb2Drop .14s ease-out}
html.wide .tb2-grab{display:none}
@keyframes tb2Drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tb2-r, .tb2-link { display:flex; align-items:center; gap:12px; min-height:56px; border-bottom:1px solid var(--border); width:100%; }
.tb2-link { border:0; border-bottom:1px solid var(--border); background:transparent; padding:0; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.tb2-link:last-child, .tb2-panel > :last-child { border-bottom:0; }
.tb2-ic { flex:none; width:22px; height:22px; color:var(--muted); display:grid; place-items:center; }
.tb2-ic svg { width:22px; height:22px; }
.tb2-l { flex:1 1 auto; font-size:16px; font-weight:400; color:var(--ink); }
.tb2-chev { flex:none; width:18px; height:18px; color:var(--faint); }
.tb2-chev svg { width:18px; height:18px; }
.tb2-break .tb2-l, .tb2-break .tb2-ic { color:var(--brand-blue); font-weight:600; }
.tb2-lang { flex:none; display:inline-flex; gap:2px; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--bg-soft); cursor:pointer; font:inherit; }
.tb2-lang .seg { padding:6px 12px; border-radius:999px; font-size:14px; font-weight:600; color:var(--muted); }
.tb2-lang .seg.on { background:var(--brand-blue); color:#fff; }
.tb2-switch { flex:none; position:relative; width:46px; height:28px; border-radius:999px; border:0; padding:0; background:var(--border-soft); cursor:pointer; transition:background .15s; }
.tb2-switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15, 23, 42, .25); transition:transform .15s; }
.tb2-switch.on { background:var(--brand-blue); }
.tb2-switch.on::after { transform:translateX(18px); }
.tb2-switch:focus-visible, .tb2-link:focus-visible, .tb2-lang:focus-visible, .tb2-icon:focus-visible, .topbar.v2 .back:focus-visible { outline:3px solid var(--brand-blue); outline-offset:2px; }

/* 2 Oct 2026 - UI v2 phase 2 (the UI expert's PDF) */
/* the cap */
.logo-mark.cap { background:var(--brand-navy); box-shadow:0 6px 16px rgba(13, 59, 142, .25); padding:0; }
.logo-mark.cap svg { width:30px; height:30px; }
.dl-cap { width:64px; height:64px; border-radius:20px; margin:0 auto 14px; }
.dl-cap svg { width:42px; height:42px; }
/* the start page */
.start-v2 { background:#F5F8FD; }
.start-v2 .hero { background:radial-gradient(circle at 92% 6%, rgba(23, 105, 210, .10) 0 86px, transparent 87px),
    radial-gradient(circle at -6% 46%, rgba(23, 105, 210, .07) 0 120px, transparent 121px),
    radial-gradient(circle at 104% 88%, rgba(23, 105, 210, .06) 0 96px, transparent 97px), #F5F8FD;
  color:var(--ink); border-radius:0; padding:22px 22px 18px; }
.start-v2 .hero::before, .start-v2 .hero::after { display:none; }
.start-v2 .brand-name { color:var(--ink); }
.start-v2 .brand-sub { color:var(--muted); opacity:1; }
.start-v2 .hero-h1 { color:var(--ink); font-size:26px; margin:20px 0 6px; }
.start-v2 .h1-accent { color:var(--brand-blue); }
.start-v2 .video-hero { border:6px solid #fff; border-radius:26px; box-shadow:0 14px 34px rgba(13, 59, 142, .16), 0 2px 6px rgba(15, 23, 42, .06); background:#dfe8f5; }
.start-v2 .video-hero .vh-tag { background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(15, 23, 42, .12); }
.start-v2 .video-hero .vh-tag i { background:#E5372B; }
.start-v2 .vh-sound { background:rgba(15, 23, 42, .82); }
.start-v2 .cta-dock { background:#F5F8FD; }
.btn-arrow { display:flex; align-items:center; justify-content:center; gap:10px; position:relative; }
.btn-arrow .btn-arrow-ic { position:absolute; right:22px; width:20px; height:20px; }
.start-v2 .stop-top.floating.lang { top:24px; right:18px; }
.start-v2 .video-hero::after { content:""; position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; z-index:6; pointer-events:none;
  background:rgba(15, 23, 42, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='white'/%3E%3C/svg%3E") center/30px no-repeat;
  opacity:0; transition:opacity .15s; }
.start-v2 .video-hero.is-paused::after { opacity:1; }
/* the download screen */
.dl-screen .dl-brand { position:absolute; top:18px; left:18px; margin:0; justify-content:flex-start; }
.dl-screen .dl-brand .logo-mark.cap { width:40px; height:40px; border-radius:12px; }
/* the parent cards */
.parent-v2 .pc-scroll { padding:64px 0 8px; display:flex; flex-direction:column; justify-content:center; }
.pc-view { overflow:hidden; width:100%; }
.pc-track { display:flex; will-change:transform; }
.pc-card { flex:0 0 100%; padding:0 22px; text-align:center; box-sizing:border-box; }
.pc-card .pc-img { height:200px; border-radius:18px; overflow:hidden; background:var(--bg-soft); margin-bottom:16px; }
.pc-card .pc-img img { width:100%; height:100%; max-height:none; object-fit:cover; margin:0; border-radius:0; }
.pc-card .pc-img.pc-noimg img { display:none; }
.pc-t { font-size:22px; font-weight:700; color:var(--ink); line-height:1.25; min-height:56px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.pc-ic { font-size:26px; line-height:1; }
.pc-d { font-size:16px; line-height:1.6; color:var(--body); margin-top:10px; min-height:128px; }
.pc-dots { justify-content:center; margin-top:14px; }
.consent-v2 .basics-center { padding-top:56px; }
/* sign-up */
.reg-ic { width:56px; height:56px; border-radius:16px; background:var(--howto-bg); color:var(--brand-blue); display:grid; place-items:center; margin:6px 0 16px; }
.reg-ic svg { width:28px; height:28px; }
.form-card { border:1px solid var(--border); border-radius:20px; background:#fff; padding:16px 16px 6px; margin:16px 0 10px; box-shadow:0 4px 18px rgba(15, 23, 42, .04); }
.form-card .d360-q { font-weight:600; }
.form-card .cc-row { display:flex; flex-direction:column; gap:0; border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; margin-top:8px; }
.form-card .cc-row select { border:0; border-radius:0; background:var(--bg-soft); margin:0; }
.form-card .cc-row .inp-wrap { border-top:1px solid var(--border-soft); }
.form-card .cc-row input { border:0 !important; border-radius:0; margin:0; }
.inp-wrap { position:relative; display:block; margin-top:8px; }
.cc-row .inp-wrap { margin-top:0; }
.inp-wrap input { padding-left:46px !important; width:100%; }
.inp-wrap input[type=password], .inp-wrap input.pw-shown { padding-right:46px !important; }
.inp-ic { position:absolute; left:15px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); pointer-events:none; }
.inp-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; background:transparent; color:var(--muted); display:grid; place-items:center; border-radius:10px; padding:0; }
.inp-eye svg { width:20px; height:20px; }
.reg-note { margin:6px 2px 10px; }
/* the opened world: a light list */
.wl-open .wl-label, .wl-label { color:var(--brand-blue) !important; font-weight:700; letter-spacing:.06em; font-size:12px; }
.wl-list { margin:4px 0 10px; font-size:14px; line-height:1.7; color:var(--body); }
/* question pages: centred above the button; a long list starts at the top and scrolls */
.basics-center { justify-content:flex-start !important; }
.basics-center > .bq { margin-top:auto; margin-bottom:auto; padding:12px 0; }

/* 2 Oct 2026 - UI v2: the waiting screen - a filling ring with %, a turning arc, the steps */
.think-dial { position:relative; width:132px; height:132px; margin-bottom:22px; }
.think-dial > svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.think-track { fill:none; stroke:var(--bg-teal-2); stroke-width:9; }
.think-fill { fill:none; stroke:var(--brand-blue); stroke-width:9; stroke-linecap:round; stroke-dasharray:301.6; transition:stroke-dashoffset .25s linear; }
.think-orbit { animation:spin 1.4s linear infinite; }
.think-orbit circle { fill:none; stroke:var(--brand-orange); stroke-width:3; stroke-linecap:round; stroke-dasharray:46 300; }
.think-pct { position:absolute; inset:0; display:grid; place-items:center; font-size:26px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.think-title { font-size:18px; font-weight:700; color:var(--ink); margin-bottom:14px; }
.think-steps { display:flex; flex-direction:column; gap:10px; text-align:left; max-width:320px; width:100%; }
.think-step { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--faint); }
.think-step i { flex:none; width:18px; height:18px; border-radius:50%; border:2px solid var(--border-soft); box-sizing:border-box; }
.think-step.now { color:var(--ink); font-weight:600; }
.think-step.now i { border-color:var(--brand-blue); border-top-color:transparent; animation:spin .9s linear infinite; }
.think-step.done { color:var(--muted); }
.think-step.done i { border:0; background:var(--brand-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.think-note { margin-top:18px; font-size:12px; color:var(--muted); }
@media (prefers-reduced-motion: reduce) { .think-orbit, .think-step.now i { animation:none; } }

/* 2 Oct 2026 - UI v2: the interests drawing - a rounded track and a white card in the middle */
.fj-track { fill:none; stroke:#E3EEFC; stroke-width:30; }
.fj-core2 { fill:#fff; stroke:#C9DDF8; stroke-width:1.5; filter:drop-shadow(0 6px 14px rgba(13, 59, 142, .10)); }
.fj-ct2 { text-anchor:middle; font-size:10px; font-weight:700; letter-spacing:.08em; fill:var(--brand-blue); }
.fj-lb2 { font-size:12px; font-weight:600; fill:var(--body); }
.fj-lb2.on { fill:var(--brand-blue); font-weight:700; }
.fj-cl2 { text-anchor:start; font-size:10px; font-weight:600; fill:var(--ink); }
.fj-slot2 { fill:#F7F9FC; stroke:#9EC3F2; stroke-width:1.5; stroke-dasharray:4 3; }
.fj-cap2 { text-anchor:middle; font-size:9.5px; font-weight:400; fill:var(--muted); }
.fj-bn { font-size:12px; }
/* the payment page: two plan buttons side by side at the bottom (India) */
.pay-dock-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pay-dock-two button { margin:0; width:100%; padding-left:10px; padding-right:10px; white-space:nowrap; }
/* the interim signature on the certificates (a role in a handwriting font, not anyone's real signature) */
.cert-script { font-family:'Great Vibes', 'Segoe Script', cursive; font-size:30px; line-height:1; color:#0D3B8E; margin:0 0 -6px; }

/* 3 Oct 2026: hub heads - kicker and plan badge on one line, the title under them, the speaker and the menu at the right */
.hub-head.v2{align-items:flex-start}
.hub-kick-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hub-kick-row .hub-plan{font-size:12px;padding:3px 9px}
.hub-acts{display:flex;align-items:center;gap:2px;flex:0 0 auto;margin:-4px -8px 0 0}
.hub-acts .tb2-icon{position:static}

/* ---- 5 Oct 2026 (UI review, older branches): the small items the live code did not yet have ---- */
.sit-line.rk-line{padding:18px 22px 0}                                  /* ranking: room above the two-line title */
.wl-list span{white-space:nowrap}                                       /* worlds: a career never breaks across two lines */
.form-card .d360-q input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,105,210,.15)}   /* registration: a blue ring on the field in use */
.form-card .cc-row:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,105,210,.15)}
.form-card .cc-row input:focus{box-shadow:none}
.form-card .cc-row input::placeholder{font-size:13px}                   /* the whole phone hint fits on a small phone; typed text stays 16px */
.form-card .d360-q input::placeholder{font-size:14px}
/* 6 Oct 2026: 'Save your progress' with the brand colours - a blue icon tile, a navy heading, the card with the blue-to-orange
   stripe and navy labels, the SMS line as a soft blue note, and the one-number rule as an amber notice */
.screen:is(:has(#reg-phone),:has(#reg-code)) .reg-ic{background:linear-gradient(135deg,#1769D2,#0D3B8E);color:#fff;box-shadow:0 8px 18px rgba(13,59,142,.24)}
.screen:is(:has(#reg-phone),:has(#reg-code)) .h1{color:#0D3B8E}
.reg-code-box:has(#reg-code){border:1px solid #DCE8F8;background:linear-gradient(90deg,#1769D2,#2F7FDC 55%,#FF8A1F) top/100% 4px no-repeat,#F7FAFF}
.reg-code-box:has(#reg-code)>b{color:#0D3B8E}.reg-code-box:has(#reg-code) .d360-q{color:#0D3B8E;font-weight:700}.reg-code-box:has(#reg-code) input{border-color:#CFE0F7}
.screen:is(:has(#reg-phone),:has(#reg-code)) .sub{color:#475467}
.screen:is(:has(#reg-phone),:has(#reg-code)) .form-card{border-color:#DCE8F8;padding-top:20px;
  background:linear-gradient(90deg,#1769D2,#2F7FDC 55%,#FF8A1F) top/100% 4px no-repeat,linear-gradient(180deg,#F7FAFF,#fff 140px)}
.screen:is(:has(#reg-phone),:has(#reg-code)) .form-card .d360-q{color:#0D3B8E;font-weight:700}
.screen:is(:has(#reg-phone),:has(#reg-code)) .form-card .d360-q input,.screen:is(:has(#reg-phone),:has(#reg-code)) .form-card .cc-row{border-color:#CFE0F7}
.screen:is(:has(#reg-phone),:has(#reg-code)) .form-card .cc-row select{background:#EEF6FF;color:#0D3B8E;font-weight:700}
.screen:is(:has(#reg-phone),:has(#reg-code)) .reg-note{display:block;padding:8px 12px;border-radius:10px;background:#EEF6FF;color:#1769D2;font-weight:600}
.screen:is(:has(#reg-phone),:has(#reg-code)) .reg-info{padding:10px 14px 10px 40px;border-radius:12px;background-color:#FFF6EC;border:1px solid #FFD9B3;
  border-left:4px solid #FF8A1F;color:#7A4A12;background-position:14px 11px;font-size:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.1'/%3E%3C/svg%3E")}
.reg-info{display:block;padding-left:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.1'/%3E%3C/svg%3E") no-repeat 0 1px / 16px;font-size:12px;color:var(--muted);line-height:1.5}

/* ---- 5 Oct 2026 (UI review): the front page, his version ---- */
.start-v2 .hero-h1{font-size:32px;line-height:1.12;letter-spacing:-.01em;margin:30px 0 4px}
.start-v2 .video-hero .vh-tag{color:#dc2626;font-size:12px;letter-spacing:.4px;padding:6px 12px 6px 10px}
.start-v2 .video-hero .vh-tag i{width:8px;height:8px;background:#dc2626}
.start-v2 .video-hero::after{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 6.2v11.6a1 1 0 0 0 1.5.86l9.3-5.8a1 1 0 0 0 0-1.72L10 5.34a1 1 0 0 0-1.5.86z' fill='%231769D2'/%3E%3C/svg%3E") 54% 50%/28px no-repeat;box-shadow:0 8px 22px rgba(0,0,0,.22);transition:opacity .2s}
html:not(.wide) .start-v2 .scroll.with-dock>.hero{flex:1 0 auto}                      /* Start scrolls with the page on a phone */
html:not(.wide) .start-v2 .scroll.with-dock>.hero+.cta-dock{background:#F5F8FD;padding-top:18px}
html:not(.wide) .start-v2 .brand-row{padding-right:136px}                              /* the brand line stays clear of the language switch */
.start-v2 .brand-sub{text-wrap:balance}
/* ---- 5 Oct 2026 (owner: "all the options visible directly - without scrolling"): laptop question pages ----
   The card may use more of the screen height, the heading takes less room, and four or more options sit side by side. */
html.wide:not(.wide-nav) #app>.screen:not(.start-v2):not(.parent-v2){max-height:calc(100svh - 69px - 32px)}
html.wide .bq-ic{font-size:36px;line-height:1.1}
html.wide .bq-q{margin:6px 0 6px}
html.wide .bq-help{margin-bottom:14px}
html.wide .basics-center>.bq{padding:4px 0}
html.wide:not(.wide-nav) .scroll:not(:has(>.scene-banner)) .opt-rows:not(.interest-list):has(>.opt-row:nth-child(4)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:stretch}
html.wide:not(.wide-nav) #f-class{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
html.wide:not(.wide-nav) #f-class .opt-row{flex-direction:column;text-align:center;gap:8px;padding:16px 8px}
html.wide:not(.wide-nav) #f-class .or-tick:empty{display:none}
html.wide:not(.wide-nav) #f-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
@media (max-height:800px){
  html.wide:not(.wide-nav) #app>.screen:not(.start-v2):not(:has(#rep-car))>*:not(.topbar){zoom:1}   /* 6 Oct 2026: 1.04 left Careers you like and Worlds of work 13-17 px short at 1366x768 after the reviewer's branch */
  html.wide:not(.wide-nav) #app>.screen:not(.start-v2):not(.parent-v2){padding-top:12px;padding-bottom:8px;max-height:calc(100svh - 69px - 20px)}
}
html.wide:not(.wide-nav) .scroll:has(>.rank-item){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;align-content:start}   /* ranking: the six jobs in two columns */
html.wide:not(.wide-nav) .scroll:has(>.rank-item)>*:not(.rank-item){grid-column:1/-1}
@media (max-height:800px){
  html.wide:not(.wide-nav) .interest-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}   /* 12 careers: three rows of four on a short laptop screen */
  html.wide:not(.wide-nav) .wl-tile.big{aspect-ratio:4/3}                                           /* worlds of work: every world in view */
}
@media (max-height:740px){html.wide:not(.wide-nav) .wl-tile.big{aspect-ratio:16/9}}
@media (max-height:740px){
  html.wide:not(.wide-nav) #app>.screen:not(.start-v2):not(:has(#rep-car))>*:not(.topbar){zoom:1}
  html.wide:not(.wide-nav) .wl-tile.big .wl-copy em{display:none}
}
html.wide:not(.wide-nav) :has(>.ri-opt){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}   /* "How work feels": the three answers in one row */
html.wide:not(.wide-nav) .ri-opt{justify-content:center}
/* 5 Oct 2026 (owner): "Save your progress" fits a laptop screen without scrolling - the country beside the number, the two passwords side by side */
html.wide:not(.wide-nav) .form-card:has(.cc-row){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:start}
html.wide:not(.wide-nav) .form-card:has(.cc-row)>*{grid-column:1/-1}
html.wide:not(.wide-nav) .form-card:has(.cc-row)>label:has(.inp-eye){grid-column:auto}
html.wide:not(.wide-nav) .form-card .cc-row{display:flex;flex-direction:row;align-items:stretch}
html.wide:not(.wide-nav) .form-card .cc-row>.cc-pick{flex:0 0 230px;width:230px;border-bottom:0;border-right:1px solid var(--border)}
html.wide:not(.wide-nav) .form-card .cc-row>.inp-wrap{flex:1 1 auto;min-width:0}
html.wide:not(.wide-nav) .scroll:has(>.form-card)>.reg-ic{transform:scale(.8);transform-origin:left top;margin-bottom:-12px}
@media (max-height:800px){html.wide:not(.wide-nav) .scroll:has(>.form-card)>.reg-ic{display:none}}
/* 6 Oct 2026: after the reviewer's Worlds of work tiles, the page was 6 px short at 1366x768 - the four big tiles a little flatter there */
@media (max-height:800px){html.wide:not(.wide-nav) .wl-near .wl-tile.big{aspect-ratio:16/9!important}}

/* 7 Oct 2026: "How you work" statements */
.ws-art{font-size:54px;line-height:1;margin:6px 0 10px}
html.wide:not(.wide-nav) .ws-art{font-size:46px}
.lv-badge.lv-strong{background:var(--oks,#e5f5eb);color:var(--ok,#1f7a45)}.lv-badge.lv-grow{background:#fff1e3;color:#9a5410}.lv-badge.lv-build{background:#f1f3f5;color:#5b6670}

/* 12 Oct 2026 (owner): one header height on every page of the home area, its bottom edge level with the bottom of the
   logo section on a laptop; the name block under the logo replaced by a small plan line */
:root{--hdr-h:60px}
html.wide-nav{--hdr-h:72px}
html.wide-nav .wsb-brand{height:var(--hdr-h);box-sizing:border-box;padding:0 18px!important;display:flex;align-items:center}
.hub-head.v2,#app>.screen:has(.bnav)>.topbar.v2,html.wide-nav #app>.screen>.topbar.v2{height:var(--hdr-h)!important;min-height:0!important;box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!important;display:flex!important;align-items:center!important;margin-top:0!important}
#app>.screen:has(.bnav)>.topbar.v2 .tb2-row,html.wide-nav #app>.screen>.topbar.v2 .tb2-row{flex:1;min-width:0;min-height:0!important}
#app>.screen:has(.bnav)>.topbar.v2>.tb2-seg,#app>.screen:has(.bnav)>.topbar.v2>.tb2-line{display:none}
html.wide-nav .wsb-status{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin:14px 18px 4px;padding:4px 11px;border-radius:999px;background:#FFF1E3;color:#C2560A;font-size:11px;font-weight:800;letter-spacing:.04em}
html.wide-nav .wsb-status i{width:7px;height:7px;border-radius:50%;background:#FF8A1F;box-shadow:0 0 0 3px rgba(255,138,31,.18)}
.wsb-status{display:none}html.wide-nav .wsb-status{display:inline-flex}

/* 12 Oct 2026 (owner): a page for every Leaders Lab arena */
.fll-row.soon{cursor:pointer}.fll-row.soon>em{color:#1769D2}
.fla-hero{position:relative;border-radius:20px;overflow:hidden;margin-bottom:14px;box-shadow:0 10px 26px rgba(13,59,142,.16);background:#0D3B8E}
.fla-hero img{display:block;width:100%;height:220px;object-fit:cover}
.fla-hero-t{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 18px;color:#fff;background:linear-gradient(180deg,rgba(7,30,74,0),rgba(7,30,74,.92))}
.fla-k{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:#FFB15C}
.fla-hero-t h2{margin:4px 0 2px;font-size:24px;font-weight:800;color:#fff;line-height:1.2}.fla-hero-t p{margin:0;font-size:14px;color:rgba(255,255,255,.9)}
.fla-cols{display:grid;grid-template-columns:1fr;gap:14px}.fla-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.fla-p{margin:0 0 8px;font-size:14px;line-height:1.6;color:#3F4A57}.fla-p:last-child{margin-bottom:0}
.fla-chips{display:flex;flex-wrap:wrap;gap:8px}.fla-chips span{padding:6px 12px;border-radius:999px;background:#E8F6EE;color:#167A4C;font-size:13px;font-weight:700}
.fla-lab{display:block;margin:14px 0 5px;font-size:12.5px;font-weight:600;color:#3F4A57}.fla-lab span{font-weight:500;color:#5F6B7A}
.fla-screen .fll-slot{width:100%;text-align:left;margin:0 0 8px;padding:10px 12px;border:1.5px solid #E3E9F0;border-radius:12px;background:#fff;font:inherit;cursor:pointer}
.fla-screen .fll-slot.on{border-color:#1769D2;background:#EAF2FD}
.fla-screen .acct-in{width:100%;box-sizing:border-box;border:1.5px solid #E3E9F0;border-radius:12px;padding:10px 12px;font:inherit;font-size:14px}
html.wide-nav .fla-scroll>*{max-width:1100px;margin-left:auto;margin-right:auto}
html.wide-nav .fla-hero img{height:300px}html.wide-nav .fla-hero-t{padding:60px 30px 24px}html.wide-nav .fla-hero-t h2{font-size:30px}
html.wide-nav .fla-cols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
html.wide-nav .fla-scroll{scrollbar-width:none}html.wide-nav .fla-scroll::-webkit-scrollbar{display:none}
.fla-back{display:block;margin:18px auto 8px;border:1.5px solid #CFE0F7;background:#fff;color:#1769D2;border-radius:999px;padding:9px 20px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}.fla-back:hover{background:#EAF2FD}

/* 12 Oct 2026 (owner): the mentor's advice after the internships */
.adv-hero h2{padding-right:70px}.adv-hero p{font-size:14.5px}
.adv-cols{display:grid;grid-template-columns:1fr;gap:14px}.adv-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.adv-worlds{display:flex;flex-direction:column}
.adv-world{display:flex;gap:12px;padding:12px 0;border-top:1px solid #EEF2F7}.adv-world:first-child{border-top:0;padding-top:2px}
.adv-n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#EAF2FD;color:#1769D2;font-size:12.5px;font-weight:800}
.adv-world b{display:block;font-size:14.5px;color:#0D3B8E}.adv-world p{margin:3px 0 0;font-size:13.5px;line-height:1.55;color:#3F4A57}
.adv-list{margin:0;padding:0;list-style:none;counter-reset:adv}
.adv-list li{position:relative;counter-increment:adv;padding:9px 0 9px 36px;border-top:1px solid #EEF2F7;font-size:14px;line-height:1.55;color:#3F4A57}
.adv-list li:first-child{border-top:0;padding-top:2px}
.adv-list li::before{content:counter(adv);position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#FFF1E3;color:#C2560A;font-size:12px;font-weight:800}
.adv-list li:first-child::before{top:1px}
.adv-try span{background:#EAF2FD;color:#1769D2}
.adv-parent{background:#FFFAF2;border-color:#F4D3A6}
.adv-foot{margin:16px 2px 0;font-size:12.5px;color:#5F6B7A;text-align:center}
.adv-scroll{scrollbar-width:none}.adv-scroll::-webkit-scrollbar{display:none}
html.wide-nav .adv-scroll>*{max-width:1100px;margin-left:auto;margin-right:auto}
html.wide-nav .adv-cols{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}

/* 12 Oct 2026 (owner): the page for a parent */
.pp-bar{height:5px;background:#EEF2F7;margin:0 0 10px}
.pp-ach{margin:0;padding:0;list-style:none}.pp-ach li{position:relative;padding:6px 0 6px 24px;font-size:13.5px;line-height:1.5;color:#3F4A57;border-top:1px solid #EEF2F7}
.pp-ach li:first-child{border-top:0}.pp-ach li::before{content:"✓";position:absolute;left:2px;top:6px;color:#167A4C;font-weight:800}
.pp-ev{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pp-cert{margin-top:10px}
.pp-empty{min-height:90px}
.pp-ch{display:flex;flex-direction:column}
.pp-ch-r{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid #EEF2F7}.pp-ch-r:first-child{border-top:0;padding-top:0}
.pp-ch-r b{display:block;font-size:14px;color:#16202c}.pp-ch-r small{display:block;font-size:12.5px;color:#5F6B7A;margin-top:2px}.pp-ch-r.going{opacity:.75}
.pp-note-card{background:#F3FBF6;border-color:#BFE5CF}
.pp-note{margin:0;padding:14px 16px;border-left:3px solid #25A35A;border-radius:10px;background:#fff;font-size:14px;line-height:1.6;color:#16202c}
.pp-acts{display:flex;gap:10px;align-items:center;margin-top:12px}
.pp-acts .ac-chip{padding:10px 18px;font-size:13.5px}
.pp-wa{flex:1;width:auto!important;min-height:0!important;padding:11px 16px!important;font-size:14.5px!important;background:#25A35A!important;box-shadow:0 6px 14px rgba(37,163,90,.25)!important}
.pp-full{width:100%}
.pp-screen .aw-card{margin:0;background:#fff;border:1px solid #E3E9F0;border-radius:18px;padding:16px}
.pp-scroll{scrollbar-width:none}.pp-scroll::-webkit-scrollbar{display:none}
html.wide-nav .pp-scroll>*{max-width:1100px;margin-left:auto;margin-right:auto}
.pp-wa{background-image:none!important}.pp-wa::before,.pp-wa::after{display:none!important}

/* the monthly note, drawn as a message */
.pp-note{padding:16px 18px!important;border-left:0!important;border:1px solid #D7EEDF!important;border-radius:14px!important;box-shadow:0 4px 12px rgba(22,122,76,.06)}
.pp-note .pn-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#167A4C;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #EEF2F7}
.pp-note p{margin:0 0 8px;font-size:14px;line-height:1.6;color:#16202c}
.pp-note ul{margin:0 0 8px;padding-left:18px}.pp-note li{font-size:14px;line-height:1.6;color:#16202c}
.pp-note .pn-sign{margin-top:12px;font-size:13.5px;line-height:1.5;color:#3F4A57}
.pp-note .pn-sign br+*,.pp-note .pn-sign{font-weight:500}
/* 12 Oct 2026 (owner): the bell and the menu stand in exactly the same place on every page of the home area */
html.wide-nav .hub-head.v2{padding-left:28px!important;padding-right:28px!important}
.hub-head.v2 .hub-acts{gap:8px!important;align-self:center!important;margin-top:0!important;margin-bottom:0!important}
.hub-head.v2 .hub-acts{margin-right:0!important}
.hub-head.v2{padding-right:12px!important}

/* 12 Oct 2026 (owner): Profile building - module cards with line icons */
.prf-cup svg{width:28px;height:28px;color:#FFB15C}
.prf-grid{display:grid;grid-template-columns:1fr;gap:12px}
.prf-card{--t:#1769D2;--tb:#EAF2FD;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;padding:18px;border:1px solid #E3E9F0;border-radius:18px;background:#fff;text-align:left;font:inherit;color:inherit;cursor:pointer;box-shadow:0 4px 16px rgba(13,59,142,.05);overflow:hidden;transition:transform .12s,box-shadow .12s,border-color .12s}
.prf-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--t)}
.prf-card:hover{transform:translateY(-2px);border-color:#C9DAF0;box-shadow:0 12px 24px rgba(13,59,142,.10)}
.prf-orange{--t:#E8761A;--tb:#FFF1E3}.prf-purple{--t:#6D4AD8;--tb:#F0EBFF}.prf-teal{--t:#0E8C8C;--tb:#E3F6F5}.prf-green{--t:#1F9254;--tb:#E8F6EE}
.prf-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--tb);color:var(--t)}
.prf-ic svg{width:24px;height:24px}
.prf-t b{display:block;font-size:16px;font-weight:800;color:#0D3B8E}.prf-t small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:#5F6B7A}
.prf-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:auto;padding-top:12px;border-top:1px solid #EEF2F7}
.prf-foot em{font-style:normal;font-size:12.5px;font-weight:700;color:#3F4A57}
.prf-foot i{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:13px;font-weight:800;color:var(--t)}
.prf-foot i svg{width:14px;height:14px}
.prf-card.locked .prf-foot i{color:#8A94A3}.prf-card.locked .prf-ic{filter:grayscale(.3)}
html.wide-nav .prf-scroll>*{max-width:1100px;margin-left:auto;margin-right:auto}
html.wide-nav .prf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
html.wide-nav .prf-scroll{scrollbar-width:none}html.wide-nav .prf-scroll::-webkit-scrollbar{display:none}
@media (min-width:600px){html:not(.wide-nav) .prf-grid{grid-template-columns:1fr 1fr}}
html.wide-nav .prof-scroll.prf-scroll{display:block}
html:not(.wide-nav) .prf-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:0;padding:16px}
html:not(.wide-nav) .prf-card .prf-ic{width:44px;height:44px;border-radius:12px}
html:not(.wide-nav) .prf-card .prf-foot{grid-column:1/-1;margin-top:12px}

/* 12 Oct 2026 (owner): the Profile page's icon treatment in Skill Studios and DISHA Challenges */
.prf-blue{--t:#1769D2;--tb:#EAF2FD}.prf-pink{--t:#C2417A;--tb:#FCE8F1}
.prf-ic.sm{flex:0 0 38px;width:38px;height:38px;border-radius:11px}.prf-ic.sm svg{width:19px;height:19px}
.chx-area-h .prf-ic{flex:0 0 44px;width:44px;height:44px;border-radius:12px}.chx-area-h .prf-ic svg{width:22px;height:22px}
.sth-card,.chx-area{position:relative;overflow:hidden}
.sth-card::before,.chx-area::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--t,#1769D2)}
.sth-card .prf-ic{flex:0 0 46px;width:46px;height:46px;border-radius:13px}.sth-card .prf-ic svg{width:23px;height:23px}
.sth-card .st-main b{color:#0D3B8E}.sth-card .st-bar i{background:var(--t,#1769D2)}
.sth-card .sth-st{color:var(--t,#1769D2)}.sth-card.done .sth-st{color:#167A4C}
.st-cover-ic svg{width:26px;height:26px;color:#fff}
.aw-dot{border-radius:12px!important;background:var(--tb,#EAF2FD)!important;color:var(--t,#1769D2);opacity:.5}.aw-dot svg{width:19px;height:19px}.aw-dot.on{opacity:1}

/* 12 Oct 2026 (owner): the two cards on Home */
.hm-card .hub-sec-h{margin-bottom:6px}
.hm-prog{display:flex;align-items:center;gap:10px;margin:0 2px 10px}
.hm-prog>span{flex:1;height:6px;border-radius:999px;background:#EEF2F7;overflow:hidden}.hm-prog>span i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1E9E63,#2FBF7A)}
.hm-prog small{font-size:12.5px;color:#5F6B7A;white-space:nowrap}.hm-prog b{color:#167A4C}
.hm-tl{gap:0!important}
.hm-tl .jr{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:12px;padding:9px 10px!important;transform:none!important;opacity:1}
.hm-tl button.jr:hover{background:#F5F8FC!important}
.hm-tl .jr:not(:last-child)::after{content:"";position:absolute;left:22px;top:37px;bottom:-9px;width:2px;background:#E3E9F0}
.hm-tl .jr.done:not(:last-child)::after{background:#A8DCC1}
.hm-tl .jr-n{position:relative;z-index:1;width:26px!important;height:26px!important;font-size:12px!important;font-weight:800;background:#fff!important;color:#9AA6B5!important;box-shadow:inset 0 0 0 2px #E3E9F0}
.hm-tl .jr-n svg{width:15px;height:15px;stroke-width:2.6}
.hm-tl .jr.done .jr-n{background:#1E9E63!important;color:#fff!important;box-shadow:none}
.hm-tl .jr.now .jr-n{background:#1769D2!important;color:#fff!important;box-shadow:0 0 0 4px #DCEAFB}
.hm-tl .jr.todo .jr-n{color:#1769D2!important;box-shadow:inset 0 0 0 2px #B9D3F3}
.hm-tl .jr.now{background:#F0F6FE!important}
.hm-tl .jr.now .jr-t b{color:#0D3B8E}
.hm-tl .jr.off .jr-t b{color:#7A8594}.hm-tl .jr.off .jr-t em{color:#9AA6B5}
.hm-tl .jr-t b{font-size:14.5px}
.hm-360{gap:0!important}
.hm-360 .jr{border:0!important;border-top:1px solid #EEF2F7!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:12px 8px!important;transform:none!important;gap:14px}
.hm-360 .jr:first-child{border-top:0!important}
.hm-360 button.jr:hover{background:#F5F8FC!important;border-radius:12px!important}
.hm-360 .prf-ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px}.hm-360 .prf-ic svg{width:21px;height:21px}
.hm-360 .jr.locked{opacity:1}.hm-360 .jr.locked .prf-ic{filter:grayscale(.6);opacity:.7}
.hm-lock svg{width:16px;height:16px;color:#9AA6B5}

/* 12 Oct 2026 (owner): Courses & careers - topic and Expert Speaks picture cards, a chosen topic as one panel */
.crs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.crs-card{display:flex;flex-direction:column;padding:0;border:1px solid #E3E9F0;border-radius:16px;background:#fff;overflow:hidden;text-align:left;font:inherit;color:inherit;cursor:pointer;box-shadow:0 4px 14px rgba(13,59,142,.05);transition:transform .12s,box-shadow .12s,border-color .12s}
.crs-card:hover{transform:translateY(-2px);border-color:#C9DAF0;box-shadow:0 12px 24px rgba(13,59,142,.10)}
.crs-card-img{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#0D3B8E,#1769D2);overflow:hidden}
.crs-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.crs-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,30,74,0) 45%,rgba(7,30,74,.55))}
.crs-card-play{position:absolute;z-index:1;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#1769D2;font-style:normal;font-size:11px;padding-left:2px;box-sizing:border-box}
.crs-card-t{display:block;padding:11px 13px 13px}.crs-card-t b{display:block;font-size:14.5px;font-weight:800;color:#0D3B8E;line-height:1.3}
.crs-card-t small{display:block;margin-top:3px;font-size:12px;color:#5F6B7A}
.crs-panel{background:#fff;border:1px solid #E3E9F0;border-radius:18px;padding:16px;box-shadow:0 6px 20px rgba(13,59,142,.06);margin-bottom:6px}
.crs-panel-h{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.crs-panel-h h3{margin:0;font-size:18px;font-weight:800;color:#0D3B8E}.crs-panel-h small{font-size:12.5px;color:#5F6B7A}
.crs-panel .crs-grid{margin-top:0}
.crs-note{margin:-4px 2px 12px;font-size:13px;color:#5F6B7A}
html.wide-nav .crs-scroll>*{max-width:1100px;margin-left:auto;margin-right:auto}
html.wide-nav .crs-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
html.wide-nav .crs-panel .crs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
html.wide-nav .crs-scroll{scrollbar-width:none}html.wide-nav .crs-scroll::-webkit-scrollbar{display:none}
.hub-tw{display:flex;align-items:center;gap:12px;min-width:0}
.hub-head .hub-back{flex:0 0 34px;width:34px;height:34px;padding:0;border:0!important;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18)!important;color:#fff!important;cursor:pointer}
.hub-head .hub-back svg{width:18px;height:18px}.hub-head .hub-back:hover{background:rgba(255,255,255,.28)!important}
/* 12 Oct 2026 (owner: the orange bar was hard to read): a white bar with dark text and an orange accent */
.fll-how{background:#fff!important;color:#0D3B8E!important;border:1px solid #F4D3A6;border-left:4px solid #FF8A1F;box-shadow:0 10px 24px rgba(13,59,142,.14)!important}
.fll-how>summary{color:#0D3B8E;font-size:15px}
.fll-how-i{border-color:#E8761A!important;color:#E8761A}
.fll-how-a{color:#E8761A;font-weight:800}
.fll-how ol{color:#3F4A57}.fll-how ol b{color:#0D3B8E}
.fll-how:hover{border-color:#F4B566}
.fll-arenas h3{display:flex;align-items:center;justify-content:center;gap:12px}
.fll-rule{display:inline-block;width:28px;height:2px;border-radius:2px;background:#FF8A1F;position:relative}
.fll-rule::after{content:"";position:absolute;top:50%;width:6px;height:6px;border-radius:1px;background:#FF8A1F;transform:translateY(-50%) rotate(45deg)}
.fll-arenas h3 .fll-rule:first-child::after{right:-3px}.fll-arenas h3 .fll-rule:last-child::after{left:-3px}
.fll-track-i{width:42px!important;height:42px!important;border-radius:12px!important;background:#FFF1E3!important;border:0!important;color:#E8761A}.fll-track-i svg{width:21px;height:21px}
/* 12 Oct 2026 (owner): the arenas' new drawings - shown whole, never cropped: on the arena page the drawing sits beside the title on the blue panel */
.fll-row img{object-fit:cover;background:#EEF5FF}
.fla-hero{display:flex;flex-direction:column;background:linear-gradient(135deg,#0D3B8E,#1769D2)!important}
.fla-hero img{height:auto!important;aspect-ratio:16/10;object-fit:cover}
.fla-hero-t{position:static!important;background:none!important;padding:16px 20px 20px!important}
html.wide-nav .fla-hero{flex-direction:row-reverse;align-items:stretch}
html.wide-nav .fla-hero img{width:44%;height:auto!important;aspect-ratio:16/10}
html.wide-nav .fla-hero-t{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 34px!important}
/* 12 Oct 2026 (owner): Internships - the recommended worlds and the rest as two clearly separate sections */
.vi-sec{border-radius:20px;padding:16px;margin:0 0 16px}
.vi-rec{background:#FFF7EE;border:1px solid #F8D3A6}
.vi-all{background:#fff;border:1px solid #E3E9F0;box-shadow:0 4px 16px rgba(13,59,142,.04)}
.vi-sec-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.vi-sec-h .prf-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px}.vi-sec-h .prf-ic svg{width:20px;height:20px}
.vi-sec-h h3{margin:0;font-size:16.5px;font-weight:800;color:#0D3B8E}.vi-sec-h small{display:block;font-size:12.5px;color:#5F6B7A;margin-top:2px}
.vi-sec-h>div{flex:1;min-width:0}
.vi-count{flex:0 0 auto;min-width:30px;height:30px;padding:0 10px;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:800;background:#fff;color:#0D3B8E;border:1px solid #E3E9F0}
.vi-rec .vi-count{color:#C2560A;border-color:#F8D3A6}
.vi-sec .lib-grid{margin:0}

/* 12 Oct 2026 (owner): the home area's menu */
.tb2-link .tb2-ic svg{width:20px;height:20px}
.tb2-badge{margin-left:auto;margin-right:6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#EF4444;color:#fff;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center}
.tb2-badge+.tb2-chev{margin-left:0}
.tb2-out{color:#B42318!important}.tb2-out .tb2-ic{color:#B42318}
.tb2-out .tb2-l{color:#B42318}
/* 12 Oct 2026 (owner): an open-lock icon on a green tile instead of the sparkle */
.lib-status-note.open{display:flex;align-items:center;gap:10px}
.lib-open-ic{flex:0 0 28px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#E8F6EE;color:#1F9254}.lib-open-ic svg{width:16px;height:16px}
#lib-advice{display:flex;align-items:center;justify-content:center;gap:10px}
.adv-btn-ic{flex:0 0 26px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#E3F6F5;color:#0E8C8C}.adv-btn-ic svg{width:16px;height:16px}
/* 12 Oct 2026 (owner): line icons in place of the compass and the other emoji in the Clarity journey */
.vi-intro-where span{display:inline-flex;align-items:center;gap:6px}.vi-intro-where svg{width:16px;height:16px;color:#1769D2}
.int-none-ic{color:#1769D2}.int-none-ic svg{width:20px;height:20px}
.think-emoji svg{width:44px;height:44px;color:#1769D2}
.balanced-icon svg{width:32px;height:32px}
.pr-gi{color:#fff}.pr-gi svg{width:18px;height:18px}
.vi-chip{display:inline-flex;align-items:center;gap:6px}.vi-chip svg{width:16px;height:16px;flex:0 0 16px}
.ac-ic svg{width:18px;height:18px}