/* Storytelling scenes: a fixed-size stage scaled to fit its slot.
   Each .scene fills a .cs-img / .img-placeholder box; .scene-stage is authored
   at a fixed size (data-w × data-h) and scaled by scenes.js. */
.scene {
  position: absolute; inset: 0; overflow: hidden;
  background: #121210;
  color: #A8A8A0;
  font-family: 'DM Sans', sans-serif;
  text-align: left;
  /* stop iOS Safari from inflating text inside the scaled-down stage */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  --s: 1;
}
.scene::before {
  /* faint dot grid */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}
.scene { display: flex; align-items: center; justify-content: center; }
/* Scale with transform, not zoom: Safari clamps zoomed text to its minimum font
   size, so small labels grew, wrapped and overlapped. A transform scales the stage
   as one picture in every browser. */
.scene-stage { position: relative; flex: none; transform: scale(var(--s)); transform-origin: center center; }
.scene-stage > * { position: absolute; }

/* shared parts */
.sc-label {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #5C5C54;
}
.sc-label b { color: #FF6B00; font-weight: 500; }
.sc-caption {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.1;
  color: #F2F2EE; letter-spacing: -0.01em;
}
.sc-caption em { font-style: normal; color: #FF6B00; }

.sc-field {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 18px; border-radius: 10px;
  background: #1C1C19; border: 1px solid rgba(255,255,255,0.08);
  font-size: 15px; color: #F2F2EE; white-space: nowrap; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.sc-field .sc-caret { width: 2px; height: 20px; background: #FF6B00; }
.sc-field .sc-go {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px; background: #FF6B00;
  color: #0A0A0A; display: grid; place-items: center; font-weight: 700; flex: none;
}

.sc-row {
  display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px;
  border-radius: 10px; background: #1A1A17; border: 1px solid rgba(255,255,255,0.06);
}
.sc-avatar { width: 26px; height: 26px; border-radius: 50%; background: #2E2E2A; flex: none; }
.sc-bar { height: 8px; border-radius: 4px; background: #2E2E2A; }
.sc-bar.light { background: #3A3A34; }

.sc-stamp {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #5C5C54;
  padding: 6px 10px; border: 1px dashed #3A3A34; border-radius: 6px;
}

.sc-card {
  width: 100%; border-radius: 14px; background: #1A1A17;
  border: 1px solid rgba(255,107,0,0.25);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4);
  padding: 18px 20px 16px;
}
.sc-card-head { display: flex; align-items: center; gap: 12px; }
.sc-card-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px; color: #F2F2EE; }
.sc-pill {
  margin-left: auto; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 9px; border-radius: 999px;
  background: rgba(255,107,0,0.14); color: #FF6B00; display: inline-flex; align-items: center; gap: 6px;
}
.sc-pill i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #FF6B00; display: inline-block; }
.sc-brief { margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: #A8A8A0; }
.sc-brief q { color: #F2F2EE; }
.sc-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.sc-stat .sc-num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 24px; color: #F2F2EE; line-height: 1; font-variant-numeric: tabular-nums; }
.sc-stat .sc-num.hot { color: #FF6B00; }
.sc-stat .sc-k { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5C5C54; margin-top: 5px; }
.sc-track { height: 3px; background: #2E2E2A; border-radius: 2px; margin-top: 14px; overflow: hidden; }
.sc-track i { display: block; height: 100%; width: 0%; background: #FF6B00; }
.sc-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-family: 'DM Mono', monospace; font-size: 11px; color: #5C5C54; }
.sc-status i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #FF6B00; }

.sc-cand {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 10px; background: #1A1A17; border: 1px solid rgba(255,255,255,0.06);
}
.sc-cand .sc-avatar { width: 30px; height: 30px; }
.sc-cand-name { font-weight: 500; font-size: 13.5px; color: #F2F2EE; }
.sc-cand-why { font-size: 12px; color: #A8A8A0; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cand-fit { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: #FF6B00; border: 1px solid rgba(255,107,0,0.45); padding: 4px 7px; border-radius: 6px; flex: none; }

.sc-mini {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: 12px; background: #1A1A17; border: 1px solid rgba(255,255,255,0.07);
}
.sc-mini .sc-card-title { font-size: 15px; }
.sc-mini .sc-mini-nums { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 11px; color: #5C5C54; letter-spacing: 0.02em; }
.sc-mini .sc-mini-nums b { color: #A8A8A0; font-weight: 500; }
.sc-ghost {
  display: flex; align-items: center; justify-content: center; height: 44px;
  border-radius: 12px; border: 1px dashed #3A3A34; color: #5C5C54;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ===== Covers: layered product compositions ===== */
.cover { 
  --cv-bg: #100D0E; --cv-bg-hi: #1D1516; --cv-text: #15121A; --cv-muted: #6F6A78; --cv-line: rgba(21,18,26,0.09); --cv-sub: #F5F4F7;
  --cv-card: #FFFFFF; --cv-accent: #E0397A; --cv-accent-2: #FF7BAA; --cv-glow: 224,57,122; --cv-glow-2: 255,140,90;
  --cv-good: #1F9E63; --cv-warn: #B7791F; --cv-nav: #1B1719;
  background: var(--cv-bg); color: var(--cv-text); }
.cover::before { display: none; }
.cover .scene-stage { background:
  radial-gradient(1200px 700px at 20% 110%, rgba(var(--cv-glow),0.10), transparent 60%),
  linear-gradient(135deg, var(--cv-bg-hi) 0%, var(--cv-bg) 55%, var(--cv-bg) 100%); }
.cv-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.cv-glow-a { width: 70%; height: 90%; right: -20%; top: -35%;
  background: radial-gradient(closest-side, rgba(var(--cv-glow),0.26), rgba(var(--cv-glow),0.08) 55%, transparent 100%); }
.cv-glow-b { width: 55%; height: 70%; left: -15%; bottom: -30%;
  background: radial-gradient(closest-side, rgba(var(--cv-glow-2),0.20), rgba(var(--cv-glow-2),0.06) 55%, transparent 100%); }

.cv-card {
  border-radius: 16px; background: var(--cv-card);
  border: 1px solid var(--cv-line);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 1px 0 var(--cv-sub) inset;
  padding: 26px 30px; font-family: 'DM Sans', sans-serif;
  will-change: transform, opacity; backface-visibility: hidden;
}
.cv-cand { opacity: 1; }
.cv-cand-head { display: flex; align-items: center; gap: 14px; }
.cv-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: #DAD7DE center/cover no-repeat; box-shadow: 0 0 0 2px var(--cv-line); }
.cv-avatar.sm { width: 36px; height: 36px; }
.cv-name { font-weight: 600; font-size: 20px; }
.cv-name span { color: var(--cv-muted); font-weight: 400; }
.cv-sub { font-size: 14px; color: var(--cv-muted); margin-top: 2px; }
.cv-fit { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  color: var(--cv-good); background: rgba(31,158,99,0.12); border: 1px solid rgba(31,158,99,0.3);
  padding: 6px 10px; border-radius: 8px; flex: none; }
.cv-why { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--cv-text); }
.cv-why b { color: var(--cv-text); font-weight: 600; }
.cv-cand-foot { margin-top: 16px; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--cv-muted); display: flex; align-items: center; gap: 8px; }
.cv-cand-foot b { color: var(--cv-good); font-weight: 500; }
.cv-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cv-good); box-shadow: 0 0 0 3px rgba(31,158,99,0.15); display: inline-block; }

.cv-agent { padding: 30px 34px 26px; border-color: rgba(var(--cv-glow),0.35);
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--cv-glow),0.12), 0 0 60px rgba(var(--cv-glow),0.12); }
.cv-agent-head { display: flex; align-items: center; gap: 16px; }
.cv-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--cv-nav); color: #fff; background-size: 72%; background-position: center; background-repeat: no-repeat;
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 24px; display: grid; place-items: center; letter-spacing: -0.05em; }
.cv-kicker { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cv-muted); }
.cv-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -0.01em; margin-top: 2px; }
.cv-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cv-accent);
  background: rgba(var(--cv-glow),0.12); border: 1px solid rgba(var(--cv-glow),0.4); padding: 8px 14px; border-radius: 999px; }
.cv-pill i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cv-accent); }
.cv-brief { margin-top: 20px; font-size: 17px; line-height: 1.45; color: var(--cv-text); }
.cv-funnel { display: flex; align-items: center; margin-top: 26px; gap: 14px; }
.cv-stat { flex: 1; }
.cv-num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cv-num.hot { color: var(--cv-accent); }
.cv-k { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-muted); margin-top: 8px; }
.cv-arrow { width: 28px; height: 2px; background: var(--cv-line); position: relative; flex: none; margin-top: -18px; }
.cv-arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-right: 2px solid var(--cv-line); border-top: 2px solid var(--cv-line); transform: rotate(45deg); }
.cv-track { height: 4px; background: var(--cv-line); border-radius: 2px; margin-top: 22px; overflow: hidden; }
.cv-track i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--cv-accent), var(--cv-accent-2)); }
.cv-minis { margin-top: 20px; display: grid; gap: 8px; }
.cv-mini { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px;
  background: var(--cv-sub); border: 1px solid var(--cv-sub); }
.cv-mini.ghost { border-style: dashed; opacity: 0.6; }
.cv-mini-name { font-weight: 600; font-size: 15px; }
.cv-mini-nums { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--cv-muted); }
.cv-mini-nums b { color: var(--cv-text); font-weight: 500; }
.cv-mini-pill { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cv-accent); background: rgba(var(--cv-glow),0.12); padding: 5px 9px; border-radius: 999px; }
.cv-mini-pill.alt { color: var(--cv-warn); background: rgba(183,121,31,0.12); }

.cv-ask { padding: 24px 26px; }
.cv-ask-head { display: flex; align-items: center; gap: 10px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px; }
.cv-spark { width: 18px; height: 18px; background: var(--cv-accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.cv-bubble { margin-top: 18px; padding: 12px 16px; border-radius: 14px 14px 4px 14px; background: var(--cv-line); font-size: 15px; align-self: flex-end; width: fit-content; max-width: 100%; margin-left: auto; min-height: 44px; }
.cv-steps { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.cv-step { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--cv-muted); padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); }
.cv-step::before { content: '✓ '; color: var(--cv-good); }
.cv-answer { margin-top: 14px; font-size: 15px; line-height: 1.4; color: var(--cv-text); }
.cv-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.cv-chip { font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 10px; background: var(--cv-sub); border: 1px solid var(--cv-line); }
.cv-chip.more { color: var(--cv-muted); background: transparent; border-style: dashed; }
.cv-pool { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cv-line); display: flex; align-items: baseline; gap: 14px; }
.cv-pool .cv-k { margin-top: 0; }
.cv-pool-n { font-size: 15px; color: var(--cv-muted); }
.cv-pool-n em { font-style: normal; color: var(--cv-text); }
.cv-pool-n b { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 26px; color: var(--cv-accent); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cv-created { margin-top: 12px; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--cv-muted); display: flex; align-items: center; gap: 8px; }

.cv-toast { position: absolute; will-change: transform, opacity; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px;
  background: #1B1719; color: #F5F0F2; width: 560px; box-shadow: 0 30px 70px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); font-family: 'DM Sans', sans-serif; }
.cv-toast .cv-avatar { box-shadow: none; }
.cv-toast-t { font-size: 14px; font-weight: 600; }
.cv-toast-t b { color: #4ADE80; }
.cv-toast-s { font-size: 13px; color: #A8999E; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.cv-toast-tag { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #A8999E; border: 1px solid rgba(255,255,255,0.15); padding: 5px 8px; border-radius: 6px; flex: none; }

/* cover in the case-study hero */
.cs-cover { position: relative; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5); border: 1px solid var(--cv-sub); }

/* product scenes default to the Reach palette; .cover-<name> overrides */
.prod, .proc .dev-mac, .proc .dev-phone { --cv-bg: #100D0E; --cv-bg-hi: #1D1516; --cv-text: #15121A; --cv-muted: #6F6A78; --cv-line: rgba(21,18,26,0.09); --cv-sub: #F5F4F7; --cv-card: #FFFFFF;
  --cv-accent: #E0397A; --cv-accent-2: #FF7BAA; --cv-glow: 224,57,122; --cv-glow-2: 255,140,90; --cv-good: #1F9E63; --cv-warn: #B7791F; --cv-nav: #1B1719; }
/* per-cover palettes (must follow .prod defaults) */
.cover-track { --cv-bg: #0A0E18; --cv-bg-hi: #141B2E; --cv-text: #141821; --cv-muted: #6B7280; --cv-card: #FFFFFF;
  --cv-accent: #2F6BFF; --cv-accent-2: #7FA3FF; --cv-glow: 47,107,255; --cv-glow-2: 229,72,77; --cv-good: #1F9E63; --cv-warn: #B7791F; --cv-nav: #1B1B1F; }
.cover-bp { --cv-bg: #0D0F13; --cv-bg-hi: #1A1E26; --cv-text: #16181D; --cv-muted: #6B7078; --cv-card: #FFFFFF;
  --cv-accent: #F28C28; --cv-accent-2: #FFB469; --cv-glow: 242,140,40; --cv-glow-2: 59,130,246; --cv-good: #1F9E63; --cv-warn: #B7791F; --cv-nav: #101114; }
.cover-ess { --cv-bg: #0B1012; --cv-bg-hi: #13201F; --cv-text: #14191A; --cv-muted: #67706F; --cv-card: #FFFFFF;
  --cv-accent: #0F9B8E; --cv-accent-2: #5EEAD4; --cv-glow: 15,155,142; --cv-glow-2: 245,158,11; --cv-good: #1F9E63; --cv-warn: #B7791F; --cv-nav: #121414; }
.cover-peeks { --cv-bg: #0A0A0A; --cv-bg-hi: #1A1A14; --cv-text: #F7F7F2; --cv-muted: #9A9A90; --cv-card: #161614; --cv-line: rgba(255,255,255,0.1); --cv-sub: var(--cv-sub);
  --cv-accent: #E9FF70; --cv-accent-2: #F4FFB0; --cv-glow: 233,255,112; --cv-glow-2: 255,255,255; --cv-good: #E9FF70; --cv-warn: #FFB020; --cv-nav: #0A0A0A; }
.cover-bp .cv-mark, .cover-track .cv-mark, .cover-ess .cv-mark, .cover-peeks .cv-mark { background: var(--cv-accent); color: #0A0A0A; }

/* shared extra parts */
.cv-h { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.cv-s { font-size: 14px; color: var(--cv-muted); }
.cv-tag { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1); color: var(--cv-muted); }
.cv-tag.on { color: var(--cv-accent); border-color: rgba(var(--cv-glow),0.45); background: rgba(var(--cv-glow),0.12); }
.cv-tag.good { color: var(--cv-good); border-color: rgba(255,255,255,0.1); }
.cv-tag.bad { color: #FF7A7A; }
.cv-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 10px;
  background: var(--cv-accent); color: #fff; font-weight: 600; font-size: 14px; }
.cv-btn.ghost { background: transparent; color: var(--cv-text); border: 1px solid rgba(21,18,26,0.2); }
.cv-row { display: flex; align-items: center; gap: 12px; }
.cv-line { height: 1px; background: var(--cv-line); margin: 16px 0; }

/* Track: kanban */
.tk-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tk-col-h { font-size: 15px; font-weight: 600; padding-bottom: 10px; border-bottom: 3px solid var(--c); margin-bottom: 12px; display: flex; align-items: center; }
.tk-col-h span { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--cv-muted); }
.tk-card { border-radius: 12px; background: var(--cv-sub); border: 1px solid var(--cv-line); padding: 12px 14px; margin-bottom: 10px; }
.tk-card .cv-avatar { width: 30px; height: 30px; }
.tk-name { font-weight: 600; font-size: 14px; }
.tk-loc { font-size: 12px; color: var(--cv-muted); }
.tk-meta { margin-top: 10px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--cv-muted); display: flex; gap: 8px; align-items: center; }
.tk-meta .hot { color: #E5484D; }
.tk-drop { border: 2px dashed rgba(var(--cv-glow),0.5); border-radius: 12px; height: 84px; margin-bottom: 10px; background: rgba(var(--cv-glow),0.06); }
.tk-drag { position: absolute; width: 300px; border-radius: 12px; background: var(--cv-card); border: 1px solid rgba(var(--cv-glow),0.7);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 0 0 4px rgba(var(--cv-glow),0.15); padding: 12px 14px; will-change: transform; }
.tk-hand { position: absolute; right: 14px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px var(--cv-line); }
.tk-dots { display: flex; gap: 6px; }
.tk-dots i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.1); }
.tk-dots i.on { background: var(--cv-accent); }
.tk-score { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: center; font-size: 14px; }
.tk-cal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.tk-slot { font-family: 'DM Mono', monospace; font-size: 12px; text-align: center; padding: 10px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); color: var(--cv-muted); }
.tk-slot.on { color: #fff; background: var(--cv-accent); border-color: var(--cv-accent); font-weight: 500; }

/* Bold Penguin: form + eligibility */
.bp-steps { display: grid; gap: 14px; }
.bp-step { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--cv-muted); }
.bp-step i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cv-line); display: grid; place-items: center; font-family: 'DM Mono', monospace; font-size: 10px; flex: none; }
.bp-step.done { color: var(--cv-text); } .bp-step.done i { background: var(--cv-text); color: #fff; border-color: var(--cv-text); }
.bp-step.cur { color: var(--cv-text); font-weight: 600; } .bp-step.cur i { border-color: var(--cv-accent); color: var(--cv-accent); }
.bp-field { border-radius: 10px; border: 1px solid var(--cv-line); padding: 10px 14px; margin-top: 12px; }
.bp-field .cv-k { margin-top: 0; }
.bp-field .val { font-size: 16px; margin-top: 4px; min-height: 22px; }
.bp-field.focus { border-color: var(--cv-accent); box-shadow: 0 0 0 3px rgba(var(--cv-glow),0.2); }
.bp-toggle { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--cv-line); margin-top: 12px; }
.bp-toggle span { padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--cv-muted); }
.bp-toggle span.on { background: var(--cv-accent); color: #fff; }
.bp-carrier { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--cv-sub); border: 1px solid var(--cv-sub); margin-top: 10px; }
.bp-logo { width: 38px; height: 38px; border-radius: 9px; background: #fff; color: #15121A; border: 1px solid var(--cv-line); background-size: 70%; background-position: center; background-repeat: no-repeat; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: none; }
.bp-cn { font-weight: 600; font-size: 15px; } .bp-cl { font-size: 12px; color: var(--cv-muted); margin-top: 1px; }
.bp-st { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cv-muted); display: inline-flex; align-items: center; gap: 7px; }
.bp-st i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cv-line); }
.bp-st.ok { color: var(--cv-good); } .bp-st.ok i { background: var(--cv-good); }
.bp-st.no { color: #D64545; } .bp-st.no i { background: #D64545; }
.bp-why { font-size: 12px; color: var(--cv-muted); margin-top: 6px; padding-left: 52px; }
.bp-big { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.02em; line-height: 1; }
.bp-big b { color: var(--cv-accent); }

/* Essentials: applicants */
.es-tabs { display: flex; gap: 22px; font-size: 15px; color: var(--cv-muted); margin-top: 8px; }
.es-tabs span.on { color: var(--cv-text); font-weight: 600; border-bottom: 2px solid var(--cv-text); padding-bottom: 8px; }
.es-tabs b { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400; padding: 2px 7px; border-radius: 999px; background: var(--cv-line); margin-left: 6px; }
.es-div { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; }
.es-div i { flex: 1; height: 1px; background: rgba(var(--cv-glow),0.35); }
.es-div span { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--cv-accent); padding: 5px 10px; border-radius: 999px; background: rgba(var(--cv-glow),0.12); }
.es-app { border-radius: 14px; background: var(--cv-sub); border: 1px solid var(--cv-line); padding: 16px 18px; margin-bottom: 12px; }
.es-app .cv-avatar { width: 44px; height: 44px; }
.es-name { font-weight: 600; font-size: 17px; }
.es-name span { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--cv-good); margin-left: 10px; vertical-align: middle; }
.es-sub { font-size: 13px; color: var(--cv-muted); margin-top: 2px; }
.es-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.es-chip { font-size: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(var(--cv-glow),0.1); color: var(--cv-accent); }
.es-chip::before { content: '✓ '; }
.es-actions { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.es-ic { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--cv-line); display: grid; place-items: center; color: var(--cv-muted); font-size: 14px; }
.es-ic.on { border-color: var(--cv-good); color: var(--cv-good); background: rgba(31,158,99,0.1); }
.es-tip { font-size: 12px; color: var(--cv-muted); }
.es-msg { font-size: 14px; line-height: 1.5; color: var(--cv-text); margin-top: 12px; min-height: 60px; }

/* Peeks: video */
.pk-video { position: relative; border-radius: 16px; overflow: hidden; background: #1A1A16 center/cover no-repeat; aspect-ratio: 16/9; }
.pk-video::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 45%, rgba(233,255,112,0.10), transparent 70%); }
.pk-video[data-photo]::before { display: none; } .pk-video::before { content: ''; position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(8% 13% at 50% 46%, #35332C 0 70%, rgba(53,51,44,0.5) 85%, transparent 100%),
  radial-gradient(30% 34% at 50% 108%, #2E2C26 0 70%, rgba(46,44,38,0.5) 85%, transparent 100%),
  radial-gradient(18% 24% at 50% 56%, rgba(233,255,112,0.10), transparent 100%),
  linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%); }
.pk-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--cv-line); border: 2px solid rgba(255,255,255,0.6); z-index: 2; }
.pk-play::after { content: ''; position: absolute; left: 31px; top: 23px; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.pk-bar { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 4px; background: var(--cv-line); border-radius: 2px; z-index: 2; }
.pk-bar i { display: block; height: 100%; width: 0%; background: var(--cv-accent); border-radius: 2px; box-shadow: 0 0 12px rgba(var(--cv-glow),0.7); }
.pk-time { position: absolute; right: 18px; bottom: 30px; font-family: 'DM Mono', monospace; font-size: 12px; color: #fff; z-index: 2; }
.pk-prompt { position: absolute; left: 18px; top: 16px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cv-accent); z-index: 2; }
.pk-cap { position: absolute; left: 18px; bottom: 36px; right: 80px; font-size: 16px; line-height: 1.4; color: #fff; z-index: 2; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.pk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.pk-card { border-radius: 12px; overflow: hidden; background: var(--cv-sub); border: 1px solid var(--cv-line); }
.pk-thumb { aspect-ratio: 16/10; background: #2A2A24 center/cover no-repeat; position: relative; }
.pk-thumb i { position: absolute; right: 8px; bottom: 8px; font-family: 'DM Mono', monospace; font-size: 10px; color: #fff; background: rgba(0,0,0,0.7); padding: 3px 6px; border-radius: 5px; font-style: normal; }
.pk-card p { margin: 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.35; color: var(--cv-text); }
.pk-rec { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 12px; color: #FF5A5A; }
.pk-rec i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #FF5A5A; box-shadow: 0 0 12px #FF5A5A; }
.pk-wave { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 14px; }
.pk-wave i { width: 6px; background: var(--cv-accent); border-radius: 3px; height: 20%; opacity: 0.9; }
.pk-skill { display: inline-block; font-size: 12px; padding: 6px 10px; border-radius: 8px; background: var(--cv-text); color: var(--cv-card); font-weight: 600; margin: 0 6px 6px 0; }
.pk-skill.alt { background: var(--cv-sub); color: var(--cv-text); font-weight: 500; }

/* ===== Supporting scenes ===== */
/* process world: the designer's desk (site palette) */
.proc { background: #121210; color: #F2F2EE; --acc: #FF6B00; --ink2: #A8A8A0; --ink3: #5C5C54; }
.proc .scene-stage { background: radial-gradient(900px 500px at 50% 0%, rgba(255,107,0,0.07), transparent 70%); }
.pr-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.pr-title span { color: var(--ink3); font-weight: 500; }
.pr-k { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.pr-k b { color: var(--acc); font-weight: 500; }
.pr-note { position: absolute; width: 128px; min-height: 86px; padding: 10px 12px; border-radius: 4px; font-size: 12.5px; line-height: 1.3;
  color: #2A2416; background: var(--paper, #F2E8C8); box-shadow: 0 8px 18px rgba(0,0,0,0.35); font-family: 'DM Sans', sans-serif; font-weight: 500; will-change: transform; }
.pr-note::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: rgba(0,0,0,0.05); }
.pr-col { position: absolute; top: 96px; width: 212px; }
.pr-col-h { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); padding-bottom: 8px; border-bottom: 1px solid #2E2E2A; display: flex; }
.pr-col-h b { margin-left: auto; color: var(--ink3); font-weight: 400; }
.pr-col.hot .pr-col-h { color: var(--acc); border-color: var(--acc); }
.pr-cluster { position: absolute; border: 2px solid var(--acc); border-radius: 10px; box-shadow: 0 0 0 6px rgba(255,107,0,0.12), 0 0 40px rgba(255,107,0,0.25); }
.pr-insight { position: absolute; padding: 18px 20px; border-radius: 12px; background: #1C1C19; border: 1px solid rgba(255,107,0,0.5); box-shadow: 0 30px 60px rgba(0,0,0,0.5); width: 400px; }
.pr-insight .pr-k { margin-bottom: 8px; }
.pr-insight p { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.pr-insight p em { font-style: normal; color: var(--acc); }

/* IA tree */
.ia-node { position: absolute; padding: 9px 14px; border-radius: 9px; background: #1E1E1B; border: 1px solid #2E2E2A; font-size: 13.5px; font-weight: 500; white-space: nowrap; will-change: transform; }
.ia-node.root { background: var(--acc); color: #0A0A0A; border-color: var(--acc); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; padding: 11px 18px; }
.ia-node.l1 { background: #26261F; border-color: rgba(255,107,0,0.4); }
.ia-node.l2 { color: var(--ink2); font-size: 12.5px; padding: 7px 11px; }
.ia-node.new { border-style: dashed; border-color: var(--acc); color: #F2F2EE; }
.ia-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ia-lines line { stroke: #3A3A34; stroke-width: 1.5; }
.ia-ver { position: absolute; right: 36px; top: 30px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.ia-ver b { color: #F2F2EE; font-weight: 500; }

/* wireframe explorations */
.wf { position: absolute; top: 96px; width: 340px; height: 420px; border-radius: 12px; background: #1A1A17; border: 1px solid #2E2E2A; padding: 16px; }
.wf h4 { margin: 0 0 12px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); font-weight: 500; }
.wf.pick { border-color: var(--acc); box-shadow: 0 0 0 5px rgba(255,107,0,0.14), 0 30px 60px rgba(0,0,0,0.5); }
.wf-bar { height: 8px; border-radius: 4px; background: #2E2E2A; margin: 8px 0; }
.wf-bar.w60 { width: 60%; } .wf-bar.w40 { width: 40%; } .wf-bar.w80 { width: 80%; } .wf-bar.hot { background: rgba(255,107,0,0.5); }
.wf-row { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 8px; background: #22221F; margin-bottom: 8px; }
.wf-dot { width: 22px; height: 22px; border-radius: 50%; background: #2E2E2A; flex: none; }
.wf-txt { font-size: 12px; color: var(--ink2); }
.wf-txt b { color: #F2F2EE; font-weight: 600; display: block; font-size: 13px; }
.wf-fun { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.wf-fun div { text-align: center; }
.wf-fun .n { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 20px; }
.wf-fun .k { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); margin-top: 3px; }
.wf-chat { padding: 10px 12px; border-radius: 10px; background: #22221F; font-size: 12px; color: var(--ink2); margin-bottom: 8px; }
.wf-sticky { position: absolute; width: 150px; padding: 10px 12px; background: #FFE98A; color: #3A2E00; font-size: 12px; line-height: 1.3; border-radius: 3px; box-shadow: 0 10px 20px rgba(0,0,0,0.4); transform: rotate(-3deg); font-weight: 500; }
.wf-verdict { position: absolute; left: 60px; right: 60px; bottom: 36px; padding: 14px 18px; border-radius: 10px; background: #1C1C19; border: 1px solid #2E2E2A; display: flex; gap: 14px; align-items: center; font-size: 14px; color: var(--ink2); }
.wf-verdict b { color: #F2F2EE; font-weight: 600; } .wf-verdict em { font-style: normal; color: var(--acc); font-weight: 600; }
.wf-cursor { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px var(--cv-line); z-index: 5; }

/* usability test */
.ut-card { position: absolute; top: 96px; width: 330px; padding: 18px 20px; border-radius: 12px; background: #1A1A17; border: 1px solid #2E2E2A; }
.ut-card h4 { margin: 0 0 14px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; }
.ut-task { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #26261F; font-size: 13px; color: var(--ink2); }
.ut-task i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #3A3A34; display: grid; place-items: center; font-size: 12px; font-style: normal; flex: none; }
.ut-task i.ok { background: rgba(80,200,120,0.18); border-color: #50C878; color: #50C878; }
.ut-task i.no { background: rgba(255,90,90,0.15); border-color: #FF5A5A; color: #FF5A5A; }
.ut-rate { margin-top: 14px; }
.ut-rate .pr-k { margin-bottom: 6px; }
.ut-bar { height: 10px; border-radius: 5px; background: #26261F; overflow: hidden; }
.ut-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: #FF5A5A; }
.ut-bar i.good { background: #50C878; }
.ut-pct { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 26px; margin-top: 6px; }
.ut-find { position: absolute; left: 760px; top: 96px; width: 380px; }
.ut-f { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #1A1A17; border: 1px solid #2E2E2A; margin-bottom: 10px; font-size: 13.5px; line-height: 1.35; }
.ut-f b { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink3); font-weight: 400; padding-top: 2px; }
.ut-f.hot { border-color: var(--acc); background: #1F1A15; } .ut-f.hot b { color: var(--acc); }
.ut-quote { position: absolute; left: 760px; top: 430px; width: 380px; padding: 14px 16px; border-radius: 14px 14px 14px 4px; background: #F2F2EE; color: #0A0A0A; font-size: 15px; font-weight: 500; }
.ut-quote .ut-src { display: block; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5C5C54; margin-top: 6px; }

/* product world scenes (Reach palette via .cover vars) */
.prod { color: var(--cv-text); background: var(--cv-bg); }
.proc .dev-mac .cv-card, .proc .dev-phone .cv-card { color: var(--cv-text); }
.prod::before { display: none; }
.prod .scene-stage { background: linear-gradient(135deg, var(--cv-bg-hi) 0%, var(--cv-bg) 70%); }
.prod .cv-card { padding: 20px 22px; }
.sc-tok { display: inline-block; padding: 1px 6px; border-radius: 5px; background: rgba(var(--cv-glow),0.12); color: var(--cv-accent); font-family: 'DM Mono', monospace; font-size: 13px; }
.sc-tok.ai { background: rgba(183,121,31,0.14); color: var(--cv-warn); }
.sc-mail { font-size: 14.5px; line-height: 1.55; color: var(--cv-text); min-height: 120px; }
.sc-from { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--cv-muted); margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.sc-from b { color: var(--cv-text); font-weight: 500; }
.sc-reply { padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: var(--cv-sub); font-size: 14px; line-height: 1.45; }
.sc-reply .cv-k { margin: 0 0 6px; }
.sc-draft { padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(var(--cv-glow),0.6); font-size: 14px; line-height: 1.45; min-height: 64px; }

.prod .sc-field { background: var(--cv-sub); border-color: rgba(255,255,255,0.1); color: var(--cv-text); }
.prod .sc-field .sc-caret, .prod .sc-field .sc-go { background: var(--cv-accent); }
.prod .sc-row { background: var(--cv-sub); border-color: var(--cv-sub); }
.prod .sc-avatar, .prod .sc-bar { background: var(--cv-line); } .prod .sc-bar.light { background: var(--cv-sub); }
.prod .sc-stamp { border-color: var(--cv-line); color: var(--cv-muted); }
.prod .cv-h { font-family: 'Outfit', sans-serif; font-weight: 700; }

/* journey maps (process) */
.jm-line { position: absolute; height: 2px; background: #2E2E2A; }
.jm-stage { position: absolute; width: 150px; text-align: center; }
.jm-stage i { flex: none; display: block; width: 14px; height: 14px; border-radius: 50%; background: #1E1E1B; border: 2px solid #5C5C54; margin: 0 auto 10px; }
.jm-stage.hot i { border-color: var(--acc); background: var(--acc); box-shadow: 0 0 14px rgba(255,107,0,0.6); }
.jm-stage b { display: block; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; }
.jm-stage span { display: block; font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--ink3); margin-top: 3px; letter-spacing: 0.04em; }
.jm-tool { position: absolute; font-family: 'DM Mono', monospace; font-size: 11px; padding: 6px 10px; border-radius: 7px; background: #1E1E1B; border: 1px solid #2E2E2A; color: var(--ink2); white-space: nowrap; }
.jm-pain { position: absolute; width: 170px; padding: 10px 12px; border-radius: 8px; background: rgba(255,90,90,0.1); border: 1px solid rgba(255,90,90,0.45); color: #FFB4B4; font-size: 12px; line-height: 1.3; }
.jm-pain b { color: #FF5A5A; font-weight: 600; display: block; font-size: 11px; font-family: 'DM Mono', monospace; letter-spacing: 0.08em; margin-bottom: 3px; }
.jm-drop { position: absolute; width: 120px; height: 6px; border-radius: 3px; background: #2E2E2A; overflow: hidden; }
.jm-drop i { display: block; height: 100%; width: 0; background: #FF5A5A; }
.jm-wait { position: absolute; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink3); letter-spacing: 0.1em; }

/* candidate-centered IA */
.ia-hub { position: absolute; width: 260px; padding: 16px 18px; border-radius: 14px; background: #1E1E1B; border: 1px solid var(--acc); box-shadow: 0 0 0 6px rgba(255,107,0,0.12); }
.ia-hub .cv-row { gap: 12px; }
.ia-hub .pr-k { margin-top: 8px; }
.ia-sat { position: absolute; padding: 10px 14px; border-radius: 10px; background: #1E1E1B; border: 1px solid #2E2E2A; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.ia-sat.gone { border-style: dashed; color: var(--ink3); }

/* whiteboard sketch (marker look) */
.sk { position: absolute; border: 2px dashed var(--cv-line); border-radius: 10px; }
.sk-t { position: absolute; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.sk-c { position: absolute; width: 110px; height: 34px; border: 2px solid var(--cv-line); border-radius: 6px; transform: rotate(-1deg); }

/* form that shrinks */
.fs-page { position: absolute; width: 54px; height: 70px; border-radius: 5px; background: #1E1E1B; border: 1px solid #3A3A34; }
.fs-page.lit { border-color: var(--acc); background: #26201A; }
.fs-big { position: absolute; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 64px; letter-spacing: -0.03em; line-height: 1; }
.fs-big small { font-family: 'DM Mono', monospace; font-weight: 400; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); display: block; margin-top: 8px; }
.fs-big em { font-style: normal; color: var(--acc); }

/* thumbs scorecard */
.tk-th { display: inline-flex; gap: 6px; }
.tk-th span { width: 36px; height: 30px; border-radius: 8px; border: 1px solid var(--cv-line); display: grid; place-items: center; font-size: 13px; color: var(--cv-muted); }
.tk-th span.on { background: var(--cv-accent); color: #fff; border-color: var(--cv-accent); font-weight: 700; }
.tk-th span.on.neg { background: #D64545; color: #fff; }
.tk-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--cv-sub); border: 1px solid var(--cv-line); font-size: 14px; min-height: 44px; }
.tk-timer { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--cv-muted); }
.tk-timer b { color: var(--cv-accent); font-weight: 500; }

/* before / after rows (product) */
.ba-row { position: absolute; left: 40px; width: 880px; padding: 18px 22px; border-radius: 14px; background: var(--cv-card); border: 1px solid var(--cv-line); }
.ba-row.hot { border-color: rgba(var(--cv-glow),0.5); }
.ba-bar { height: 10px; border-radius: 5px; background: var(--cv-line); overflow: hidden; margin-top: 12px; position: relative; }
.ba-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--cv-line); }
.ba-bar i.good { background: var(--cv-accent); }
.ba-x { position: absolute; right: -2px; top: -8px; width: 26px; height: 26px; border-radius: 50%; background: #D64545; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.ba-k { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-muted); display: flex; gap: 12px; }
.ba-k b { color: var(--cv-text); font-weight: 500; margin-left: auto; }
.ba-k b.hot { color: var(--cv-accent); }

/* carrier match cards */
.cm { position: absolute; left: 40px; width: 880px; padding: 16px 20px; border-radius: 14px; background: var(--cv-card); border: 1px solid var(--cv-line); }
.cm .cv-row { gap: 14px; }
.cm-pct { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 30px; width: 86px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cm-pct.no { color: #D64545; font-size: 15px; font-family: 'DM Mono', monospace; font-weight: 500; letter-spacing: 0.08em; width: 132px; white-space: nowrap; }
.cm-why { font-size: 14px; color: var(--cv-muted); margin-top: 3px; }
.cm-why b { color: var(--cv-text); font-weight: 500; }
.cm-bar { height: 6px; border-radius: 3px; background: var(--cv-line); margin-top: 12px; overflow: hidden; }
.cm-bar i { display: block; height: 100%; width: 0; background: var(--cv-accent); border-radius: 3px; }
.cm-bar i.no { background: #D64545; }
.cm-act { margin-left: auto; }
.cm-pct.no { font-size: 12px; width: 118px; letter-spacing: 0.06em; }


/* inbox (Essentials) */
.ib-src { position: absolute; padding: 10px 14px; border-radius: 12px; font-size: 13px; max-width: 240px; line-height: 1.35; will-change: transform; }
.ib-src.mail { background: #1E1E1B; border: 1px solid #2E2E2A; color: #F2F2EE; }
.ib-src.slack { background: #2A2320; border: 1px solid #4A3A32; color: #F2F2EE; }
.ib-src.sms { background: #1B2A1E; border: 1px solid #2F5236; color: #F2F2EE; }
.ib-src b { display: block; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #A8A8A0; margin-bottom: 4px; font-weight: 400; }
.ib-box { position: absolute; width: 520px; border-radius: 14px; background: #1A1A17; border: 1px solid #2E2E2A; padding: 16px 18px; }
.ib-th { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #26261F; font-size: 13.5px; }
.ib-th .cv-avatar { width: 30px; height: 30px; }
.ib-th b { font-weight: 600; display: block; font-size: 14px; }
.ib-th span { color: #A8A8A0; font-size: 12.5px; }
.ib-th .cv-tag { margin-left: auto; }

/* week calendar (Essentials team) */
.wk { position: absolute; left: 40px; top: 40px; width: 880px; border-radius: 14px; background: var(--cv-card); border: 1px solid var(--cv-line); padding: 18px 20px; }
.wk-grid { display: grid; grid-template-columns: 60px repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.wk-h { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cv-muted); text-align: center; padding-bottom: 6px; }
.wk-t { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--cv-muted); padding-top: 6px; }
.wk-c { height: 46px; border-radius: 8px; background: var(--cv-sub); border: 1px solid var(--cv-sub); position: relative; }
.wk-ev { position: absolute; inset: 3px; border-radius: 6px; padding: 5px 7px; font-size: 11px; line-height: 1.2; background: rgba(var(--cv-glow),0.16); border: 1px solid rgba(var(--cv-glow),0.4); overflow: hidden; }
.wk-ev b { display: block; font-weight: 600; font-size: 11.5px; }
.wk-ev i { position: absolute; right: 5px; top: 5px; width: 16px; height: 16px; border-radius: 50%; font-style: normal; font-size: 8px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--cv-accent); }
.wk-who { display: flex; gap: 14px; margin-top: 14px; font-size: 12.5px; color: var(--cv-muted); }
.wk-who span i { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; background: var(--cv-accent); margin-right: 6px; }

/* phone frame (Peeks) */
.ph { position: absolute; width: 300px; height: 600px; border-radius: 36px; background: #0A0A0A; border: 6px solid #2A2A24; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,0.6); }
.ph-card { position: absolute; inset: 0; background: #1A1A16 center/cover no-repeat; }
.ph-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.78) 100%); }
.ph-ov { position: absolute; left: 18px; right: 18px; bottom: 26px; color: #fff; }
.ph-ov b { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px; display: block; }
.ph-ov span { font-size: 12.5px; color: rgba(255,255,255,0.75); display: block; margin-top: 2px; }
.ph-ov p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.35; color: #fff; }
.ph-ov em { font-style: normal; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--cv-accent); }
.ph-prog { position: absolute; left: 18px; right: 18px; top: 16px; height: 3px; background: var(--cv-line); border-radius: 2px; }
.ph-prog i { display: block; height: 100%; width: 0; background: var(--cv-accent); border-radius: 2px; }
.ph-gest { position: absolute; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-muted); display: flex; align-items: center; gap: 10px; }
.ph-gest i { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--cv-line); display: grid; place-items: center; font-style: normal; color: #fff; font-size: 14px; }
.ph-gest.on { color: var(--cv-accent); } .ph-gest.on i { border-color: var(--cv-accent); background: rgba(var(--cv-glow),0.15); }
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: #161614; border-radius: 22px 22px 0 0; padding: 18px; transform: translateY(100%); }
.ph-sheet b { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; }
.ph-sheet .cv-k { margin-top: 12px; }
.ph-sheet p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--cv-muted); }

/* prompt comparison + rounds (Peeks process) */
.pq { position: absolute; top: 96px; width: 540px; padding: 18px 20px; border-radius: 12px; background: #1A1A17; border: 1px solid #2E2E2A; }
.pq h4 { margin: 0 0 6px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px; }
.pq .pr-k { margin: 10px 0 6px; }
.pq .ut-bar { height: 12px; }
.pq.pick { border-color: var(--acc); box-shadow: 0 0 0 5px rgba(255,107,0,0.14); }
.pq-q { font-size: 13px; color: var(--ink2); line-height: 1.4; font-style: italic; margin-top: 10px; }
.rd { position: absolute; width: 200px; }
.rd i { flex: none; display: block; width: 14px; height: 14px; border-radius: 50%; background: #1E1E1B; border: 2px solid #5C5C54; margin-bottom: 10px; }
.rd.hot i { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 14px rgba(255,107,0,0.6); }
.rd b { display: block; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.rd strong { display: block; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; margin: 4px 0 6px; }
.rd span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink2); }

/* cards for defaults (Essentials product) */
.df-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.df-list span { font-size: 13px; padding: 6px 11px; border-radius: 8px; background: var(--cv-sub); border: 1px solid var(--cv-line); }
.df-list span.on { background: rgba(var(--cv-glow),0.14); border-color: rgba(var(--cv-glow),0.45); color: var(--cv-accent-2); }
.df-sec { margin-top: 16px; }
.df-sec .cv-k { margin: 0; }

.bp-logo[data-logo] { color: transparent; }

/* text that sits directly on the dark stage, outside any card */
.prod .scene-stage > .cv-h, .prod .scene-stage > .cv-kicker, .prod .scene-stage > .cv-k,
.co-where .cv-k, .prod .scene-stage > .sc-stamp { color: #F5F0F2; }
.prod .scene-stage > .cv-kicker span, .prod .scene-stage > .cv-h span { color: var(--cv-accent-2); }
.co-where .cv-tag { color: #F5F0F2; border-color: rgba(255,255,255,0.22); }
.cv-cand { background: var(--cv-card); border-radius: 12px; }
.df-list span.on { color: var(--cv-accent); }
.ph-card { background-position: center 22%; }
.cover-peeks .cv-h, .cover-peeks .cv-kicker { color: var(--cv-text); }

/* covers sit on the site background; the card border carries the affordance */
.cover { background: #0A0A0A; }
.cover .scene-stage { background: radial-gradient(55% 45% at 50% 48%, rgba(var(--cv-glow),0.10), transparent 70%), #0A0A0A; }
.cover .cv-glow { display: none; }
.cs-cover { border: 1px solid rgba(255,255,255,0.1); box-shadow: none; background: #0A0A0A; }

/* elevation on black: a soft light halo plus a tight dark edge */
.cover .scene-stage { background: radial-gradient(60% 50% at 50% 48%, rgba(var(--cv-glow),0.14), transparent 70%), #0A0A0A; }
.cover .cv-card, .prod .cv-card, .cover .tk-drag, .prod .ba-row, .prod .cm, .prod .wk, .prod .cv-mini, .prod .cv-cand {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.55), 0 0 90px rgba(255,255,255,0.07);
}
.cover .cv-agent { box-shadow: 0 0 0 1px rgba(var(--cv-glow),0.25), 0 2px 6px rgba(0,0,0,0.6), 0 30px 80px rgba(0,0,0,0.6), 0 0 110px rgba(var(--cv-glow),0.18); }
.cover .cv-toast, .prod .cv-toast { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.6), 0 0 80px rgba(255,255,255,0.06); }
.cover-peeks .cv-card, .cover-peeks .cv-toast { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.6), 0 0 90px rgba(233,255,112,0.08); }
.cv-mark[data-logo] { background-color: #fff; background-size: 100%; border: 1px solid rgba(21,18,26,0.12); border-radius: 10px; }
.cover-peeks .cv-mark[data-logo] { border-color: rgba(255,255,255,0.15); }

/* site-orange glow ties the covers to the page */
.cover .scene-stage { background: radial-gradient(60% 50% at 50% 48%, rgba(255,107,0,0.10), transparent 70%), #0A0A0A; }
.cover .cv-card, .prod .cv-card, .cover .tk-drag, .prod .ba-row, .prod .cm, .prod .wk, .prod .cv-mini, .prod .cv-cand,
.cover .cv-toast, .prod .cv-toast, .cover-peeks .cv-card, .cover-peeks .cv-toast {
  box-shadow: 0 0 0 1px rgba(255,107,0,0.10), 0 2px 6px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.55), 0 0 90px rgba(255,107,0,0.16);
}
.cover .cv-agent { box-shadow: 0 0 0 1px rgba(255,107,0,0.22), 0 2px 6px rgba(0,0,0,0.6), 0 30px 80px rgba(0,0,0,0.6), 0 0 120px rgba(255,107,0,0.26); }

/* lime accent needs dark text */
.cover-peeks .cv-btn, .cover-peeks .tk-slot.on, .cover-peeks .tk-th span.on, .cover-peeks .bp-toggle span.on,
.cover-peeks .wk-ev i, .cover-peeks .wk-who span i, .cover-peeks .bp-step.done i { color: #0A0A0A; }
.cover-peeks .cv-btn.ghost { color: var(--cv-text); }

/* research synthesis rows (Peeks) */
.rs-row { display: grid; grid-template-columns: 150px 1fr 40px; gap: 12px; align-items: center; margin-top: 10px; font-size: 13px; color: #F2F2EE; }
.rs-row .ut-bar { height: 10px; }
.rs-row b { font-family: 'DM Mono', monospace; font-size: 12px; color: #A8A8A0; font-weight: 400; text-align: right; }
.rs-track { position: relative; height: 6px; border-radius: 3px; background: #26261F; margin-top: 14px; }
.rs-track i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #FF6B00; border-radius: 3px; }
.rs-track em { position: absolute; top: -5px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #FF6B00; box-shadow: 0 0 0 4px rgba(255,107,0,0.2); margin-left: -8px; }

.pr-cohort .rs-row { grid-template-columns: 78px 1fr 36px; gap: 8px; }
.pr-fast .ut-pct { font-size: 40px; }

/* every scene sits on the site background */
.prod, .proc { background: #0A0A0A; }
.prod .scene-stage, .proc .scene-stage { background: radial-gradient(60% 50% at 50% 48%, rgba(255,107,0,0.08), transparent 70%), #0A0A0A; }

/* time-and-motion (Track) */
.tm-row { display: grid; grid-template-columns: 190px 1fr 56px; gap: 12px; align-items: center; margin-top: 12px; font-size: 13.5px; color: #F2F2EE; }
.tm-row .ut-bar { height: 14px; }
.tm-row .ut-bar i { background: #FF6B00; }
.tm-row .ut-bar i.dim { background: #5C5C54; }
.tm-row b { font-family: 'DM Mono', monospace; font-size: 12px; color: #A8A8A0; font-weight: 400; text-align: right; }
.tm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tm-chips span { font-family: 'DM Mono', monospace; font-size: 11px; padding: 6px 10px; border-radius: 7px; background: #1E1E1B; border: 1px solid #2E2E2A; color: #A8A8A0; }
.tm-days { position: relative; height: 6px; background: #26261F; border-radius: 3px; margin-top: 18px; }
.tm-days i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #FF6B00; border-radius: 3px; }
.tm-days em { position: absolute; top: -9px; left: 0; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #FF5A5A; color: #fff; font-style: normal; font-weight: 700; font-size: 12px; display: grid; place-items: center; opacity: 0; }
.tm-dlabels { display: flex; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 10px; color: #5C5C54; margin-top: 8px; letter-spacing: 0.08em; }

/* quote funnel (Bold Penguin) */
.fn-step { display: grid; grid-template-columns: 170px 1fr 70px; gap: 12px; align-items: center; margin-top: 10px; font-size: 13.5px; color: #F2F2EE; }
.fn-step .ut-bar { height: 22px; border-radius: 6px; }
.fn-step .ut-bar i { background: #FF6B00; border-radius: 6px; }
.fn-step .ut-bar i.dim { background: #3A3A34; }
.fn-step b { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 18px; color: #F2F2EE; text-align: right; }
.fn-step small { display: block; font-family: 'DM Mono', monospace; font-size: 10.5px; color: #5C5C54; letter-spacing: 0.06em; margin-top: 2px; }
.fn-drop { position: absolute; font-family: 'DM Mono', monospace; font-size: 11px; color: #FF5A5A; letter-spacing: 0.08em; }
.fn-why { margin-top: 10px; display: flex; gap: 12px; align-items: center; font-size: 13px; color: #F2F2EE; }
.fn-why .ut-bar { height: 8px; flex: 1; }
.fn-why .ut-bar i { background: #FF5A5A; }
.fn-why span { width: 180px; }
.fn-why b { font-family: 'DM Mono', monospace; font-size: 11px; color: #A8A8A0; font-weight: 400; width: 36px; text-align: right; }

/* diary study (Essentials) */
.dy { position: absolute; width: 520px; padding: 14px 16px; border-radius: 12px; background: #1A1A17; border: 1px solid #2E2E2A; display: flex; gap: 12px; align-items: flex-start; }
.dy .cv-avatar { width: 34px; height: 34px; box-shadow: none; }
.dy b { display: block; font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #FF6B00; margin-bottom: 4px; }
.dy p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #F2F2EE; }
.dy p em { font-style: normal; color: #A8A8A0; }
.dy.hot { border-color: rgba(255,107,0,0.5); }
.dy-tally { position: absolute; left: 640px; top: 96px; width: 480px; padding: 18px 20px; border-radius: 12px; background: #1A1A17; border: 1px solid #2E2E2A; }
.dy-tally .rs-row { grid-template-columns: 170px 1fr 40px; }

/* ===== IEP Guide (Understood) ===== */
.cover-iep { --cv-bg: #0A0A0A; --cv-bg-hi: #141210; --cv-text: #0B1C2A; --cv-muted: #5B6B78; --cv-card: #FFFDFB; --cv-line: rgba(11,28,42,0.1); --cv-sub: #F6F3EE;
  --cv-accent: #1C73B9; --cv-accent-2: #5A9BD8; --cv-glow: 28,115,185; --cv-glow-2: 242,107,97; --cv-good: #1F9E63; --cv-warn: #B7791F; --cv-nav: #002938;
  --u-navy: #002938; --u-coral: #F26B61; --u-cream: #FFF8ED; --u-peach: #FBE4D6; --u-lav: #DDE1F5; --u-blue: #1C73B9; }
.u-hero { background: var(--u-navy); color: var(--u-cream); border-radius: 16px; padding: 26px 28px; }
.u-eyebrow { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13px; color: var(--u-coral); letter-spacing: 0.01em; }
.u-h1 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 34px; line-height: 1.05; letter-spacing: -0.01em; margin-top: 10px; color: var(--u-cream); }
.u-lede { font-size: 14.5px; line-height: 1.5; color: rgba(255,248,237,0.85); margin-top: 12px; }
.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 12px; background: var(--u-blue); color: #fff; font-weight: 700; font-size: 14px; }
.u-btn.ghost { background: transparent; color: var(--u-cream); text-decoration: underline; text-underline-offset: 4px; }
.u-toggle { display: inline-flex; border-radius: 999px; background: #fff; border: 1px solid var(--cv-line); padding: 4px; }
.u-toggle span { padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--cv-text); }
.u-toggle span.on { background: var(--u-navy); color: #fff; }
.u-sec { border-radius: 14px; overflow: hidden; border: 1px solid var(--cv-line); background: #fff; }
.u-sec-h { background: var(--u-lav); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.u-sec-h b { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; color: var(--cv-text); display: block; }
.u-sec-h span { font-size: 12.5px; color: var(--cv-muted); }
.u-sec-h i { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; color: var(--cv-text); }
.u-step { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--cv-line); background: var(--u-cream); font-size: 13.5px; color: var(--cv-text); }
.u-step i { width: 26px; height: 26px; border-radius: 50%; background: var(--u-navy); color: #fff; font-style: normal; font-weight: 700; font-size: 12px; display: grid; place-items: center; flex: none; }
.u-step i.done { background: var(--cv-good); }
.u-step b { font-weight: 700; display: block; }
.u-step small { display: block; font-size: 12px; color: var(--cv-muted); }
.u-step em { margin-left: auto; font-style: normal; color: var(--cv-muted); }
.u-drawer { border-radius: 14px; border: 1px solid var(--cv-line); background: #fff; padding: 16px 18px; }
.u-drawer .cv-k { color: var(--cv-muted); }
.u-drawer h5 { margin: 8px 0 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px; color: var(--cv-text); }
.u-drawer p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--cv-text); }
.u-drawer .u-chev { float: right; color: var(--u-coral); }
/* chevrons are drawn, not typed: glyphs like ⌃ ⌄ sit differently in every font */
.u-chev { float: right; display: grid; place-items: center; width: 18px; height: 1.25em; height: 1lh; margin-left: 8px; }
.u-sec-h i { flex: none; }
.u-ico { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease; }
.down > .u-ico { transform: rotate(180deg); }
.u-modes { display: flex; gap: 8px; margin-top: 10px; }
.u-modes span { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--cv-line); color: var(--cv-text); }
.u-modes span.on { background: var(--u-navy); color: #fff; border-color: var(--u-navy); }
.u-tpl { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--u-cream); border: 1px solid var(--cv-line); }
.u-tpl i { width: 34px; height: 42px; border-radius: 6px; background: #fff; border: 1px solid var(--cv-line); position: relative; flex: none; }
.u-tpl i::after { content: ''; position: absolute; left: 7px; right: 7px; top: 10px; height: 3px; background: var(--u-coral); box-shadow: 0 7px 0 var(--cv-line), 0 14px 0 var(--cv-line), 0 21px 0 var(--cv-line); }
.u-tpl b { font-size: 13.5px; color: var(--cv-text); display: block; }
.u-tpl small { font-size: 11.5px; color: var(--cv-muted); }
.u-tpl .u-btn { margin-left: auto; height: 34px; font-size: 12.5px; padding: 0 14px; }
.u-quote { border-radius: 14px; background: var(--u-peach); padding: 16px 18px; font-size: 13.5px; line-height: 1.5; color: var(--cv-text); }
.u-quote .cv-k { color: var(--cv-muted); }
.u-quote em { font-style: italic; }
.u-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--cv-good); }
.u-check i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cv-good); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 11px; }
.u-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; border: 2px solid var(--u-navy); background: #fff; font-size: 12px; color: var(--cv-text); }
.u-pill b { font-weight: 700; }
.u-mark { width: 44px; height: 44px; border-radius: 12px; background: #fff center/70% no-repeat; border: 1px solid var(--cv-line); }
.cover-iep .cv-toast { background: var(--u-navy); color: var(--u-cream); }
.cover-iep .cv-toast-s { color: rgba(255,248,237,0.75); }
.u-blob { width: 64px; height: 56px; border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; background: #1C73B9 center/cover no-repeat; margin-left: auto; flex: none; }
.u-blob + i { margin-left: 8px; }
.u-jump { border-radius: 14px; background: var(--u-navy); color: var(--u-cream); padding: 16px 18px; }
.u-jump .cv-k { color: var(--u-coral); }
.u-jump b { display: block; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; margin-top: 4px; }
.u-jump-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.u-jump-chips span { font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 999px; background: #CFE3F7; color: var(--u-navy); }
.u-pager { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--cv-text); }
.u-pager i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--u-navy); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.u-pager b { color: var(--u-coral); border-bottom: 2px solid var(--u-coral); padding-bottom: 2px; }
.u-pager .u-btn { height: 30px; font-size: 12px; padding: 0 12px; background: var(--u-navy); }
.u-tree { position: absolute; padding: 10px 14px; border-radius: 10px; background: #1E1E1B; border: 1px solid #2E2E2A; font-size: 13.5px; font-weight: 500; color: #F2F2EE; white-space: nowrap; }
.u-tree.root { background: var(--u-navy, #002938); border-color: #1C73B9; color: #FFF8ED; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; }
.u-tree.req { border-color: rgba(255,107,0,0.6); }
.u-tree small { display: block; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: #A8A8A0; margin-top: 2px; }
.u-rule { position: absolute; font-family: 'DM Mono', monospace; font-size: 11px; padding: 6px 10px; border-radius: 7px; border: 1px dashed #5C5C54; color: #A8A8A0; }
.u-conceptcard { position: absolute; top: 96px; width: 260px; height: 300px; border-radius: 12px; background: #1A1A17; border: 1px solid #2E2E2A; padding: 16px; }
.u-conceptcard h4 { margin: 0 0 10px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #A8A8A0; font-weight: 500; }
.u-conceptcard.pick { border-color: #FF6B00; box-shadow: 0 0 0 5px rgba(255,107,0,0.14); }
.u-conceptcard .wf-txt { font-size: 12px; line-height: 1.4; }
.u-react { margin-top: 10px; font-size: 12px; color: #F2F2EE; padding: 8px 10px; border-radius: 8px; background: #22221F; font-style: italic; }
.u-react.good { border-left: 3px solid #50C878; } .u-react.bad { border-left: 3px solid #FF5A5A; }
.u-var { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.u-var span { font-size: 12px; padding: 8px 10px; border-radius: 8px; background: #22221F; color: #A8A8A0; text-align: center; }
.u-var span.on { background: rgba(255,107,0,0.18); color: #FF6B00; border: 1px solid rgba(255,107,0,0.5); }
.u-eng { position: relative; height: 10px; border-radius: 5px; background: var(--cv-sub); overflow: hidden; margin-top: 8px; }
.u-eng i { display: block; height: 100%; width: 0; background: var(--u-blue); border-radius: 5px; }
.u-btn { white-space: nowrap; flex: none; }
.u-tpl > div { min-width: 0; flex: 1; }
.u-tpl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== IEP Guide: Apple-grade finish ===== */
.cover-iep { --cv-line: rgba(11,28,42,0.08); }
.cover-iep .cv-card, .prod.cover-iep .cv-card { border-radius: 22px; border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 0 1px rgba(11,28,42,0.06), 0 1px 2px rgba(0,0,0,0.25), 0 30px 70px rgba(0,0,0,0.55), 0 0 90px rgba(255,107,0,0.12); }
.cover-iep .u-hero { background: radial-gradient(120% 90% at 10% 0%, #0E4A5C 0%, #002938 55%, #001E2B 100%); position: relative; overflow: hidden; }
.cover-iep .u-hero::before { content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%;
  background: repeating-radial-gradient(circle at 60% 40%, transparent 0 14px, rgba(255,255,255,0.10) 14px 15px); opacity: 0.8; transform: rotate(-12deg) scale(1.1, 0.85); }
.cover-iep .u-hero::after { content: ''; position: absolute; left: 18px; bottom: -8px; width: 160px; height: 70px;
  background-image: radial-gradient(rgba(255,248,237,0.35) 1.2px, transparent 1.3px); background-size: 10px 10px; opacity: 0.6; mask-image: linear-gradient(90deg,#000,transparent); -webkit-mask-image: linear-gradient(90deg,#000,transparent); }
.cover-iep .u-hero > * { position: relative; z-index: 1; }
.cover-iep .u-eyebrow { letter-spacing: 0.06em; text-transform: uppercase; font-size: 11.5px; font-weight: 700; }
.cover-iep .u-h1 { letter-spacing: -0.025em; font-weight: 700; }
.cover-iep .u-lede { color: rgba(255,248,237,0.78); }
.cover-iep .u-btn { border-radius: 999px; background: linear-gradient(180deg, #2E8BD6 0%, #1A6FB5 100%); color: #fff; font-weight: 600; letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 -1px 0 rgba(0,0,0,0.12) inset, 0 8px 20px rgba(28,115,185,0.35), 0 1px 2px rgba(0,0,0,0.2); }
.cover-iep .u-btn.ghost { background: transparent; box-shadow: none; color: rgba(255,248,237,0.85); font-weight: 500; }
.cover-iep .u-toggle { background: #ECEAE4; border: 0; padding: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.06) inset; }
.cover-iep .u-toggle span { color: #4B5A66; font-weight: 600; }
.cover-iep .u-toggle span.on { background: linear-gradient(180deg, #0C3D4F, #002938); color: #fff; box-shadow: 0 2px 6px rgba(0,41,56,0.35), 0 1px 0 rgba(255,255,255,0.12) inset; }
.cover-iep .u-sec { border-radius: 18px; border: 1px solid rgba(11,28,42,0.06); box-shadow: 0 1px 2px rgba(11,28,42,0.05), 0 10px 24px rgba(11,28,42,0.06); }
.cover-iep .u-sec-h { background: linear-gradient(180deg, #E4E7F8, #D6DBF3); }
.cover-iep .u-sec-h i { box-shadow: 0 1px 3px rgba(11,28,42,0.15); }
.cover-iep .u-step { background: #FFFCF7; border-top: 1px solid rgba(11,28,42,0.06); }
.cover-iep .u-step i { background: linear-gradient(180deg, #0C3D4F, #002938); box-shadow: 0 1px 3px rgba(0,41,56,0.35), 0 1px 0 rgba(255,255,255,0.15) inset; }
.cover-iep .u-step i.done { background: linear-gradient(180deg, #2DBB79, #1A8F57); box-shadow: 0 1px 3px rgba(31,158,99,0.4); }
.cover-iep .u-drawer { border-radius: 18px; border: 1px solid rgba(11,28,42,0.06); box-shadow: 0 1px 2px rgba(11,28,42,0.05), 0 12px 30px rgba(11,28,42,0.06); }
.cover-iep .u-drawer h5 { letter-spacing: -0.015em; }
.cover-iep .u-modes span { border-radius: 999px; border-color: rgba(11,28,42,0.14); font-weight: 600; }
.cover-iep .u-modes span.on { background: linear-gradient(180deg, #0C3D4F, #002938); border-color: transparent; box-shadow: 0 2px 6px rgba(0,41,56,0.3); }
.cover-iep .u-tpl { border-radius: 16px; background: #fff; border: 1px solid rgba(11,28,42,0.06); box-shadow: 0 1px 2px rgba(11,28,42,0.05), 0 8px 20px rgba(11,28,42,0.05); }
.cover-iep .u-tpl i { border-radius: 8px; box-shadow: 0 1px 2px rgba(11,28,42,0.1); }
.cover-iep .u-pill { border-radius: 999px; border: 1px solid rgba(11,28,42,0.12); background: #fff; box-shadow: 0 1px 2px rgba(11,28,42,0.06); }
.cover-iep .u-quote { border-radius: 18px; }
.cover-iep .u-jump { border-radius: 18px; background: radial-gradient(120% 100% at 0% 0%, #0E4A5C, #002938 60%); }
.cover-iep .u-jump-chips span { background: linear-gradient(180deg, #E3F0FB, #CFE3F7); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset; border-radius: 999px; }
.u-caret { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.u-caret svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.u-check i { flex: none; }
.u-check i svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cover-iep .cv-toast-t { white-space: nowrap; }
.cover-iep .u-check i { background: linear-gradient(180deg, #2DBB79, #1A8F57); box-shadow: 0 1px 3px rgba(31,158,99,0.4); }
.cover-iep .u-blob { box-shadow: 0 6px 16px rgba(11,28,42,0.18); }
.cover-iep .cv-toast { border-radius: 18px; background: radial-gradient(120% 100% at 0% 0%, #0E4A5C, #002938 60%); border: 1px solid rgba(255,255,255,0.1); }
/* device frames */
.dev-phone { position: absolute; border-radius: 44px; background: #0B0B0C; padding: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.5), 0 40px 90px rgba(0,0,0,0.6), 0 0 100px rgba(255,107,0,0.14); }
.dev-phone::before { content: ''; position: absolute; left: 50%; top: 20px; width: 96px; height: 26px; margin-left: -48px; border-radius: 999px; background: #0B0B0C; z-index: 3; }
.dev-phone .cv-card { position: relative; border-radius: 36px !important; box-shadow: none !important; border: 0 !important; }
.dev-mac { position: absolute; border-radius: 16px; background: #F5F3EF; box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.4), 0 40px 90px rgba(0,0,0,0.6), 0 0 100px rgba(255,107,0,0.14); overflow: hidden; }
.dev-mac .dev-bar { height: 34px; background: linear-gradient(180deg, #F8F7F4, #ECEAE5); border-bottom: 1px solid rgba(11,28,42,0.08); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.dev-mac .dev-bar i { flex: none; width: 11px; height: 11px; border-radius: 50%; display: block; }
.dev-mac .dev-bar .dev-url { margin-left: 12px; flex: 1; height: 20px; border-radius: 6px; background: #fff; border: 1px solid rgba(11,28,42,0.08); font-family: 'DM Mono', monospace; font-size: 10px; color: #6B7580; display: flex; align-items: center; justify-content: center; }
.dev-mac .cv-card { position: relative; left: 0 !important; top: 0 !important; width: 100% !important; box-sizing: border-box; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; }

/* ===== Scene language v2: materials, camera, tilt ===== */
.cam { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.cam > * { position: absolute; }
.tilt { position: absolute; transform-style: preserve-3d; }
.tilt > * { position: relative; }
.lamp { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 30% 20%, rgba(255,214,170,0.10), transparent 70%); }
.hand { font-family: 'Caveat', cursive; font-weight: 700; color: #FF6B00; font-size: 26px; line-height: 1; letter-spacing: 0; text-transform: none; }
.hand.ink { color: #F2F2EE; }
.hand.blue { color: #7FB4FF; }
.hand.sm { font-size: 20px; font-weight: 500; }
.hand.lg { font-size: 38px; }
.paper { position: absolute; padding: 14px 16px; width: 170px; min-height: 110px; color: #2A2416; font-family: 'Caveat', cursive; font-weight: 500; font-size: 22px; line-height: 1.05;
  background: linear-gradient(160deg, #FFF3A8 0%, #FBE68A 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 2px 10px 18px rgba(0,0,0,0.45), 0 30px 40px rgba(0,0,0,0.25); will-change: transform; }
.paper::after { content: ''; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.04) 100%); }
.paper.pink { background: linear-gradient(160deg, #FFC9C2, #FFB3A8); } .paper.blue { background: linear-gradient(160deg, #CFE4FF, #B9D5FA); } .paper.green { background: linear-gradient(160deg, #D9F2C8, #C5E8AD); } .paper.cream { background: linear-gradient(160deg, #FFFDF5, #F3EEDC); }
.paper b { font-weight: 700; display: block; font-size: 15px; font-family: 'DM Sans', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(42,36,22,0.6); margin-bottom: 4px; }
.tape { position: absolute; width: 70px; height: 22px; background: rgba(255,255,255,0.35); backdrop-filter: none; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transform: rotate(-4deg); opacity: 0.9; mix-blend-mode: screen; }
.index { position: absolute; width: 300px; padding: 16px 18px 18px; background: linear-gradient(180deg, #FFFEFA, #F6F2E8); color: #1E1B16; border-radius: 3px;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(70,110,180,0.18) 27px 28px), linear-gradient(180deg, #FFFEFA, #F6F2E8); box-shadow: 2px 10px 18px rgba(0,0,0,0.45), 0 30px 40px rgba(0,0,0,0.25); will-change: transform; }
.index h6 { margin: 0 0 10px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #C0392B; border-bottom: 2px solid #E26A5F; padding-bottom: 6px; }
.index p { margin: 0; font-family: 'Caveat', cursive; font-size: 22px; line-height: 28px; color: #1E1B16; }
.polaroid { position: absolute; width: 150px; padding: 8px 8px 30px; background: #FBFAF6; box-shadow: 2px 8px 16px rgba(0,0,0,0.5), 0 24px 36px rgba(0,0,0,0.3); will-change: transform; }
.polaroid .pphoto { width: 100%; aspect-ratio: 1; background: #DAD7DE center/cover no-repeat; }
.polaroid span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: 'Caveat', cursive; font-size: 17px; color: #333; }
.circle { position: absolute; border: 3px solid #FF6B00; border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; transform: rotate(-3deg); opacity: 0; }
.arrow { position: absolute; width: 120px; height: 60px; opacity: 0; }
.arrow path { fill: none; stroke: #FF6B00; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stamp { position: absolute; font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border: 3px solid currentColor; border-radius: 6px; transform: rotate(-12deg); opacity: 0; mix-blend-mode: normal; }
.stamp.ok { color: #2DBB79; } .stamp.no { color: #E5484D; }
.hl { background: linear-gradient(180deg, transparent 35%, rgba(255,214,0,0.55) 35% 92%, transparent 92%); padding: 0 3px; }
.chapter { position: absolute; left: 40px; top: 30px; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -0.02em; color: #F2F2EE; line-height: 1; }
.chapter small { display: block; font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 14px; color: #A8A8A0; letter-spacing: 0; margin-top: 8px; }
.chapter .hand { display: inline-block; margin-left: 10px; vertical-align: baseline; }
.bignum { position: absolute; font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 130px; max-width: 360px; line-height: 0.85; letter-spacing: -0.05em; color: #F2F2EE; }
.bignum small { display: block; font-size: 16px; font-weight: 600; letter-spacing: 0; color: #A8A8A0; margin-top: 14px; line-height: 1.4; font-family: 'DM Sans', sans-serif; }
.bignum em { font-style: normal; color: #FF6B00; }
.wire { position: absolute; width: 180px; padding: 10px; background: #FBFAF6; border-radius: 4px; box-shadow: 2px 8px 16px rgba(0,0,0,0.45); will-change: transform; }
.wire i { display: block; height: 6px; border-radius: 3px; background: #D8D4CA; margin: 6px 0; }
.wire i.h { height: 12px; width: 60%; background: #B8B3A6; } .wire i.b { height: 18px; width: 50%; background: #2F6BFF; border-radius: 9px; margin-top: 10px; }
.wire b { display: block; font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #6B665B; margin-bottom: 4px; }
.screen-glow { position: absolute; inset: -40px; border-radius: 60px; background: radial-gradient(60% 60% at 50% 50%, rgba(28,115,185,0.35), transparent 70%); filter: none; pointer-events: none; }
.cursor { position: absolute; width: 20px; height: 20px; z-index: 9; opacity: 0; }
.cursor svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.ripple { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid #1C73B9; opacity: 0; z-index: 8; }
.dev-phone.p3d { transform: perspective(1800px) rotateY(-14deg) rotateX(4deg); }
.dev-mac.p3d { transform: perspective(2200px) rotateY(10deg) rotateX(5deg); }

/* drawn UI icons (check, chevrons, arrows): one stroke style, sized by the parent's font */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.u-check, .bp-step, .ph-gest, .u-pager, .es-ic) i > .ico, .es-ic > .ico { display: block; }