/* ==========================================================
   CodeStory: new campus batch page (bootcamp-new.html only)
   Loads after home-new.css and online-new.css and reuses their tokens,
   nav, buttons, hero parts (.on-pills, .on-title, .on-inc, .on-cta),
   callback form, footer and callbar. Classes are prefixed cb-.
   Owner rules: no eyebrow labels, green CTAs, no drop shadows, H1 600.
   ========================================================== */

/* ---------- hero (owner picked "A": pick your desk) ---------- */
.cb-hero {
  background: radial-gradient(50% 70% at 88% 28%, rgba(207, 64, 32, .08), transparent 70%),
              linear-gradient(180deg, #FFF8F4, var(--bg) 80%);
}
.cb-hero-in {
  max-width: 1320px; margin: 0 auto; padding: 44px var(--nh-gutter) 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 52px; align-items: center;
}
.cb-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.cb-pill svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* owner: only the first line of the H1 is thin; poppins 500 is the lightest weight the site ships */
.cb-hero .cb-thin { font-weight: 500; }
/* owner: every tile title on one line. Columns size to their text on wide screens,
   drop to two columns where the copy column is too narrow for three, and on phones
   "Placement support" shortens to "Placement". */
.cb-hero .on-inc { grid-template-columns: repeat(3, auto); }
.cb-hero .on-inc b { white-space: nowrap; }
/* ".on-inc span" styles the grey second line; the word inside the title must not pick it up */
.cb-hero .on-inc li b span.cb-hide-sm { display: inline; font: inherit; color: inherit; }
@media (min-width: 1101px) and (max-width: 1239px) { .cb-hero .on-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cb-hero .on-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-hero .on-inc li { padding: 10px; gap: 9px; }
  .cb-hero .on-inc i { width: 30px; height: 30px; }
  .cb-hero .on-inc b { white-space: nowrap; font-size: 13.5px; }
  .cb-hero .on-inc li b span.cb-hide-sm { display: none; }
}
.cb-hero .on-inc li.cb-win { background: #E8F5EE; border-color: #BFE3CD; }
.cb-hero .on-inc li.cb-win i { background: var(--nh-green); color: #fff; }
.cb-hero .on-inc li.cb-win span { color: var(--nh-green); }

/* the lab: 20 desks, one screen, a mentor on the floor */
.cb-lab {
  border-radius: 24px; padding: 20px 22px 18px; border: 1px solid var(--line);
  background-color: #fff;
  background-image: radial-gradient(circle at 1px 1px, #E6EAF2 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.cb-lab-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cb-lab-h b { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.cb-lab-h span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .03em; color: var(--nh-muted); }
.cb-lab-h span i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.cb-screen { position: relative; margin-top: 12px; height: 52px; border-radius: 12px; background: var(--ink); overflow: hidden; }
.cb-screen p {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 44px 0 16px;
  font-size: 14px; color: #C9CEE0; opacity: 0; transform: translateY(8px);
  transition: opacity .5s, transform .5s var(--ease-out);
}
.cb-screen p.is-on { opacity: 1; transform: none; }
.cb-screen b { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .03em; color: #F6A283; white-space: nowrap; }
.cb-screen p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-dots { position: absolute; right: 12px; top: 50%; display: flex; gap: 4px; transform: translateY(-50%); }
.cb-dots i { width: 5px; height: 5px; border-radius: 50%; background: #3A4368; transition: background-color .3s; }
.cb-dots i.is-on { background: #F6A283; }

.cb-floor { position: relative; max-width: 456px; margin: 18px auto 0; }
.cb-desks { display: grid; grid-template-columns: 1fr 1fr 30px 1fr 1fr 1fr; gap: 12px 10px; }
.cb-desk { position: relative; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--nh-muted); }
.cb-desk::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 0; height: 30px; border-radius: 8px;
  background: var(--bg-alt); border: 1.5px solid var(--line-2); transition: background-color .2s, border-color .2s;
}
.cb-desk::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 22px; height: 14px; margin-left: -11px;
  border-radius: 7px 7px 4px 4px; background: #DCE1EB; transition: background-color .2s;
}
.cb-desk em { position: absolute; z-index: 1; left: 0; right: 0; top: 7px; text-align: center; font-style: normal; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; }
.cb-desk:hover::before { background: var(--accent-tint); border-color: #F6A283; }
.cb-desk.is-me::before { background: var(--accent); border-color: var(--accent); }
.cb-desk.is-me::after { background: #F6A283; }
.cb-desk.is-me em { color: #fff; }
.cb-desk:focus-visible { outline: 2.5px solid var(--nh-green-ring); outline-offset: 2px; border-radius: 8px; }

.cb-mentor {
  position: absolute; z-index: 3; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--nh-green); color: var(--nh-green);
  visibility: hidden; pointer-events: none; transition: transform 1.25s cubic-bezier(.65, 0, .35, 1);
}
.cb-mentor.is-placed { visibility: visible; }
.cb-mentor svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* left/top are set by initLab: centred on the desk, kept inside the floor */
.cb-say {
  position: absolute; left: 0; top: -44px; margin: -2px 0 0 -2px; padding: 7px 11px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  opacity: 0; transition: opacity .3s;
}
.cb-say::after { content: ""; position: absolute; left: var(--tail, 14px); bottom: -5px; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
.cb-say.is-below::after { bottom: auto; top: -5px; }
.cb-mentor.is-talk .cb-say { opacity: 1; }

/* seat slip with a track picker */
.cb-slip { position: relative; margin-top: 14px; display: grid; grid-template-columns: 118px minmax(0, 1fr); border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--line); }
.cb-slip::before, .cb-slip::after { content: ""; position: absolute; left: 111px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
.cb-slip::before { top: -8px; clip-path: inset(50% 0 0 0); }
.cb-slip::after { bottom: -8px; clip-path: inset(0 0 50% 0); }
.cb-slip small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--nh-muted); }
.cb-slip-l { padding: 12px 16px; border-right: 1.5px dashed var(--line-2); }
.cb-slip-l b { display: block; margin-top: 2px; font-family: var(--f-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--accent); }
.cb-slip-l span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.cb-slip-r { padding: 12px 16px; }
.cb-trk { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-trk button {
  padding: 6px 11px; border-radius: 99px; border: 1.5px solid var(--line-2); background: #fff; cursor: pointer;
  font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--ink-2);
  transition: background-color .2s, border-color .2s, color .2s;
}
.cb-trk button:hover { border-color: var(--ink); }
.cb-trk button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cb-trk button:focus-visible { outline: 2px solid var(--nh-green-ring); outline-offset: 2px; }
.cb-legend { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--nh-muted); }
.cb-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cb-legend i { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--nh-green); background: #fff; }
.cb-legend i.cb-key-me { border: 0; border-radius: 4px; background: var(--accent); }

/* next batch strip (AccioJob / Coding Blocks) */
.cb-next { display: flex; align-items: stretch; background: var(--ink); color: #C9CEE0; font-size: 15px; }
.cb-next > b { display: flex; align-items: center; padding: 0 28px; background: var(--accent); color: #fff; font-family: var(--f-display); font-weight: 600; white-space: nowrap; }
.cb-next ul { list-style: none; flex: 1; display: flex; }
.cb-next li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 15px 22px; border-left: 1px solid #2A3150; }
.cb-next li:first-child { border-left: 0; }
.cb-next li.cb-wide { flex: 1.6; }
/* owner: each fact on one line; wide screens size the cells to their text */
@media (min-width: 1241px) { .cb-next li, .cb-next li.cb-wide { flex: 1 1 auto; white-space: nowrap; } }
.cb-next svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #F6A283; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-next strong { color: #fff; font-weight: 600; }

/* where mentors work: a running strip of logos */
.cb-logos { display: flex; align-items: center; gap: 28px; padding: 14px var(--nh-gutter); background: #fff; border-bottom: 1px solid var(--line); }
.cb-logos > p { flex: none; font-size: 14px; color: var(--nh-muted); }
.cb-marq {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cb-marq-track { display: flex; width: max-content; animation: cb-run 36s linear infinite; }
.cb-marq:hover .cb-marq-track { animation-play-state: paused; }
.cb-marq ul { list-style: none; display: flex; align-items: center; }
.cb-marq li { display: flex; align-items: center; gap: 10px; padding-right: 52px; white-space: nowrap; }
.cb-marq li svg { width: 24px; height: 24px; flex: none; }
.cb-marq li svg.cb-word { width: 52px; height: 20px; }
.cb-marq li span { font-family: var(--f-display); font-weight: 600; font-size: 18px; color: var(--ink-2); }
.cb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes cb-run { to { transform: translateX(-50%); } }

/* ---------- responsive ---------- */
@media (min-width: 1101px) { .cb-hero .on-title { white-space: nowrap; } }
@media (max-width: 1100px) {
  .cb-hero-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cb-lab { max-width: 560px; }
  .cb-next { flex-direction: column; }
  .cb-next > b { padding: 12px var(--nh-gutter); }
  .cb-next ul { flex-wrap: wrap; }
  .cb-next li { flex: 1 1 50%; border-left: 0; border-top: 1px solid #2A3150; padding: 12px var(--nh-gutter); }
  .cb-next li.cb-wide { flex: 1 1 50%; }
}
@media (max-width: 720px) {
  .cb-hero-in { padding-top: 32px; }
  .cb-lab { padding: 16px 14px 14px; }
  .cb-desks { gap: 12px 6px; grid-template-columns: 1fr 1fr 22px 1fr 1fr 1fr; }
  .cb-desk { height: 48px; }
  .cb-desk::before { height: 26px; }
  .cb-desk::after { height: 12px; }
  .cb-desk em { top: 5px; font-size: 10.5px; }
  .cb-screen p { font-size: 13px; }
  .cb-slip { grid-template-columns: 96px minmax(0, 1fr); }
  .cb-slip::before, .cb-slip::after { left: 89px; }
  .cb-legend { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cb-next > b { padding: 10px var(--nh-gutter); }
  .cb-next li, .cb-next li.cb-wide { flex-basis: 100%; padding: 10px var(--nh-gutter); font-size: 14px; }
  .cb-next li:last-child { display: none; } /* the H1 already says twenty seats */
  .cb-logos { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
  .cb-marq li { padding-right: 36px; }
  .cb-marq li span { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-mentor, .cb-screen p, .cb-say { transition: none; }
  .cb-marq-track { animation: none; }
  .cb-marq { -webkit-mask-image: none; mask-image: none; }
  .cb-marq-track > ul[aria-hidden], .cb-marq li[aria-hidden] { display: none; }
  .cb-marq-track { width: auto; justify-content: center; }
  .cb-marq ul { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
}

/* ==========================================================
   Section 2: a day on campus (owner picked "A": the sky moves with your day,
   and the sun can be tapped or dragged). The sky geometry hangs off the horizon:
   the arc's flat edge sits 190px above the card's bottom, and --cb-r is its radius,
   so a set sun or moon always ends up behind the lab however tall the card grows.
   ========================================================== */
/* owner: heading block centred */
.cb-day-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cb-day-head h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--nh-h2); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.cb-day-head .on-lede { margin-left: auto; margin-right: auto; max-width: 56ch; }

.cb-day-grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 40px; align-items: stretch; }

/* the five stops */
.cb-stops { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cb-stop {
  width: 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; text-align: left;
  padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; background: none; cursor: pointer; font: inherit; color: inherit;
  transition: background-color .25s, border-color .25s;
}
.cb-stop:hover { background: #fff; border-color: var(--line); }
.cb-stop.is-on { background: #fff; border-color: var(--line-2); }
.cb-stop:focus-visible { outline: 2.5px solid var(--nh-green-ring); outline-offset: 2px; }
.cb-stop-t { padding-top: 4px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--nh-muted); }
.cb-stop.is-on .cb-stop-t { color: var(--accent); }
.cb-stop-b b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 18px; color: var(--ink); }
.cb-stop-b small { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.cb-stop-b em { display: none; margin-top: 10px; align-items: center; gap: 8px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--nh-green); }
.cb-stop.is-on .cb-stop-b em { display: flex; }
.cb-stop-b em svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb-stop-ic { display: none; }   /* the icon the scene shows for this stop */

/* the sky: day blue is the base, morning / evening / night layers fade over it by weight */
.cb-sky {
  --cb-r: 200px;
  position: relative; min-height: 470px; overflow: hidden; border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #CFE2FF 0%, #F3F8FF 70%); -webkit-user-select: none; user-select: none;
}
.cb-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cb-layer--m { background: linear-gradient(180deg, #FFE3CC 0%, #FFF6EE 70%); }
.cb-layer--e { background: linear-gradient(180deg, #EE8A62 0%, #F9C9AE 55%, #FCE6D8 80%); }
.cb-layer--n { background: linear-gradient(180deg, #0B1022 0%, #1F2750 80%); }
.cb-stars { position: absolute; inset: 0 0 150px; opacity: 0; pointer-events: none; }
.cb-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: cb-twinkle 2.6s ease-in-out infinite; }
.cb-stars i:nth-child(2n) { width: 2px; height: 2px; }
.cb-stars i:nth-child(3n) { animation-duration: 3.4s; }
@keyframes cb-twinkle { 50% { opacity: .25; } }
.cb-arc {
  position: absolute; left: 50%; bottom: 190px; width: calc(var(--cb-r) * 2); height: var(--cb-r); margin-left: calc(var(--cb-r) * -1);
  border: 2px dashed rgba(20, 26, 46, .22); border-bottom: 0; border-radius: var(--cb-r) var(--cb-r) 0 0; transition: border-color .9s;
}
.cb-sky.is-night .cb-arc { border-color: rgba(255, 255, 255, .25); }
.cb-arm { position: absolute; left: 50%; bottom: calc(190px - var(--cb-r)); width: 2px; height: calc(var(--cb-r) * 2); margin-left: -1px; pointer-events: none; }
.cb-orb {
  position: absolute; left: 50%; top: -24px; width: 48px; height: 48px; margin-left: -24px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto; touch-action: none;
}
.cb-orb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb-orb:focus-visible { outline: 2.5px solid var(--nh-green-ring); outline-offset: 4px; }
.cb-sun { background: #FFB23E; color: #fff; cursor: grab; transition: background-color .6s; }
.cb-sun.is-late { background: var(--accent); }
.cb-sky.is-dragging .cb-sun { cursor: grabbing; }
.cb-moon { background: #E9ECF8; color: var(--ink); }
/* a ring pulses around the sun and moon until the first touch */
.cb-orb::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #FFB23E; opacity: 0; pointer-events: none; }
.cb-moon::after { border-color: #E9ECF8; }
.cb-sky.is-fresh .cb-orb::after { animation: cb-ring 2s ease-out infinite; }
@keyframes cb-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.cb-hint {
  position: absolute; left: 18px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(20, 26, 46, .1); font-size: 13px; font-weight: 600; color: var(--ink-2);
  opacity: 0; transition: opacity .4s;
}
.cb-sky.is-fresh .cb-hint { opacity: 1; }
.cb-hint svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-scene { position: absolute; left: 50%; bottom: 214px; width: 300px; margin-left: -150px; text-align: center; pointer-events: none; }
.cb-scene i { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 20px; background: #fff; color: var(--accent); border: 1px solid var(--line); transition: background-color .9s, border-color .9s, color .9s; }
.cb-scene i svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cb-scene p { margin-top: 12px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--accent); transition: color .9s; }
.cb-scene h3 { margin-top: 4px; font-family: var(--f-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; color: var(--ink); transition: color .9s; }
.cb-sky.is-night .cb-scene i { background: #1B2240; border-color: #333B5C; color: #F6A283; }
.cb-sky.is-night .cb-scene p { color: #F6A283; }
.cb-sky.is-night .cb-scene h3 { color: #fff; }
.cb-town { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none; }
.cb-town svg { width: 100%; height: 100%; }
.cb-bld { fill: #232B48; transition: fill 1s; }
.cb-sky.is-night .cb-bld { fill: #0A0E1C; }
.cb-win { fill: #3A4368; }
.cb-lit { fill: #FFC66B; opacity: 0; }
.cb-sign { fill: var(--accent); }

/* what the room gives you, on a dark band */
.cb-room { list-style: none; margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 20px; background: var(--ink); color: #fff; }
.cb-room li { padding: 22px 22px 24px; border-right: 1px solid #2A3150; }
.cb-room li:last-child { border-right: 0; }
.cb-room i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(207, 64, 32, .2); color: #F6A283; }
.cb-room i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-room b { display: block; margin-top: 14px; font-family: var(--f-display); font-weight: 600; font-size: 17px; }
.cb-room p { margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: #B7BDD3; }
.cb-who { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.cb-who b { color: var(--ink); }
.cb-who a { flex: none; font-weight: 600; color: var(--nh-green); }
.cb-who a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .cb-day-grid { grid-template-columns: minmax(0, 1fr); }
  .cb-sky { max-width: 640px; }
  .cb-room { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-room li:nth-child(2) { border-right: 0; }
  .cb-room li:nth-child(-n+2) { border-bottom: 1px solid #2A3150; }
}
@media (max-width: 720px) {
  /* phones: sky first, then a compact list where only the chosen stop opens up */
  .cb-day-grid { margin-top: 24px; gap: 16px; }
  .cb-sky { order: -1; --cb-r: 138px; min-height: 420px; }
  .cb-stops { gap: 2px; }
  .cb-stop { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
  .cb-stop-t { font-size: 11.5px; }
  .cb-stop-b b { font-size: 16.5px; }
  .cb-stop-b small { display: none; }
  .cb-stop.is-on .cb-stop-b small { display: block; }
  .cb-scene { bottom: 184px; width: 240px; margin-left: -120px; }
  .cb-scene i { width: 52px; height: 52px; border-radius: 16px; }
  .cb-scene i svg { width: 24px; height: 24px; }
  .cb-scene h3 { font-size: 22px; }
  .cb-room { margin-top: 24px; }
  .cb-room li { padding: 16px; }
  .cb-room b { margin-top: 10px; font-size: 15px; line-height: 1.3; }
  .cb-room p { display: none; }
  .cb-who { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 14px 16px; font-size: 14.5px; }
  .cb-day-head { gap: 12px; }
  .cb-who a { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-stars i, .cb-sky.is-fresh .cb-orb::after { animation: none; }
}

/* ==========================================================
   Section 3: three AI builds (owner picked v4, brand theme). Left, the builds as an
   accordion; right, a dark "AI console" with one live simulation per build, whose edge
   carries a travelling orange light. Fits one screen at 1440.
   ========================================================== */
.cb-ai { position: relative; overflow: hidden; padding: clamp(48px, 5vw, 64px) 0; background: #F7F7F5; }
.cb-ai::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 40% at 50% 0%, rgba(207, 64, 32, .10), transparent 70%),
              radial-gradient(circle at 1px 1px, rgba(20, 26, 46, .08) 1px, transparent 1.3px) 0 0 / 22px 22px;
}
.cb-ai > .on-in { position: relative; }
.cb-ai-head { text-align: center; }
.cb-ai-head h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--nh-h2); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.cb-ai-head .on-lede { max-width: 76ch; margin-top: 12px; }
.cb-ai-path { list-style: none; margin-top: 16px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cb-ai-path li { display: flex; align-items: center; gap: 6px; }
.cb-ai-path li + li::before {
  content: ""; width: 14px; height: 14px; margin-right: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3AAC2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cb-ai-path i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--accent-tint); color: var(--accent); font-family: var(--f-mono); font-style: normal; font-size: 11px; }

.cb-ai-grid { margin-top: 30px; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: stretch; }

/* the builds */
.cb-ai-list { display: flex; flex-direction: column; gap: 10px; }
.cb-ai-b { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .25s; }
.cb-ai-b:hover { border-color: var(--line-2); }
.cb-ai-b.is-on { border-color: var(--accent); }
.cb-ai-b:focus-visible { outline: 2.5px solid var(--nh-green-ring); outline-offset: 2px; }
.cb-ai-bt { display: flex; align-items: flex-start; gap: 12px; }
.cb-ai-n { flex: none; padding-top: 2px; font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1; color: var(--accent); }
.cb-ai-name b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 17px; }
.cb-ai-name small { display: block; margin-top: 2px; font-size: 13px; color: var(--nh-muted); }
.cb-ai-spark { flex: none; margin-left: auto; padding: 4px 9px; border-radius: 99px; background: var(--accent-tint); color: var(--accent); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cb-ai-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.cb-ai-b.is-on .cb-ai-more { grid-template-rows: 1fr; }
.cb-ai-more-in { display: block; min-height: 0; overflow: hidden; }
.cb-ai-what { display: block; margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.cb-ai-kv { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cb-ai-k { display: block; margin-bottom: 1px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #8A90A8; }
.cb-ai-q { padding: 9px 11px; border-radius: 10px; background: var(--bg-alt); font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.cb-ai-res { padding: 9px 11px; border-radius: 10px; background: #E8F5EE; color: #0F5A37; }
.cb-ai-res em { margin-left: 4px; padding: 1px 7px; border-radius: 99px; border: 1px dashed #9FD6B8; font-style: normal; font-size: 11px; color: #2C7A52; }

/* the console: the home page's dark window, with an orange light running round its edge */
.cb-ai-console { position: relative; isolation: isolate; overflow: hidden; padding: 1.5px; border-radius: 22px; background: #262D45; }
.cb-ai-console::before {
  content: ""; position: absolute; z-index: -1; inset: -60%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(207, 64, 32, .9) 78%, #F6A283 86%, transparent 94%);
  animation: cb-edge 6s linear infinite;
}
@keyframes cb-edge { to { transform: rotate(360deg); } }
.cb-ai-console-in { height: 100%; display: flex; flex-direction: column; border-radius: 20.5px; background: #131829; color: #EEF0F7; }
.cb-ai-ch { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #262D45; }
.cb-ai-path2 { font-family: var(--f-mono); font-size: 12.5px; color: #99A0BA; }
.cb-ai-path2 b { font-weight: 500; color: #fff; }
.cb-ai-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #8FE3B4; }
.cb-ai-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--nh-green-ring); animation: cb-live 1.6s ease-in-out infinite; }
@keyframes cb-live { 50% { opacity: .3; } }
.cb-ai-sim { padding: 2px 8px; border-radius: 99px; border: 1px dashed #3A4368; font-size: 11.5px; font-weight: 600; color: #99A0BA; }
.cb-ai-cb { flex: 1; padding: 16px; }
.cb-ai-pane[hidden] { display: none; }
.cb-ai-cf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; border-top: 1px solid #262D45; }
.cb-ai-cf > span { font-size: 12.5px; font-weight: 600; color: #6B7392; }
.cb-ai-seg, .cb-ai-sw { display: inline-flex; padding: 3px; border-radius: 10px; background: #1B2140; }
.cb-ai-seg button, .cb-ai-sw button { padding: 5px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 12.5px; color: #99A0BA; }
.cb-ai-seg button { font-family: var(--f-display); }
.cb-ai-seg button[aria-pressed="true"], .cb-ai-sw button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.cb-ai-seg button:focus-visible, .cb-ai-sw button:focus-visible, .cb-ai-go:focus-visible, .cb-ai-qs button:focus-visible { outline: 2px solid var(--nh-green-ring); outline-offset: 2px; }
.cb-ai-stack { display: flex; flex-wrap: wrap; gap: 5px; }
.cb-ai-stack span { padding: 3px 8px; border-radius: 7px; background: #1B2140; border: 1px solid #262D45; font-family: var(--f-mono); font-size: 11.5px; color: #C9CEE0; }

/* simulation parts */
.cb-ai-ctl { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: #C9CEE0; }
.cb-ai-end { margin-top: 6px; }
.cb-ai-go { height: 38px; padding: 0 15px; border: 0; border-radius: 10px; background: var(--nh-green); color: #fff; cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 14px; transition: background-color .2s; }
.cb-ai-go:hover { background: var(--nh-green-h); }
.cb-ai-go:disabled { opacity: .5; cursor: default; }
.cb-ai-req { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cb-ai-req p { padding: 8px 10px; border-radius: 10px; background: #1B2140; }
.cb-ai-req span { display: block; font-size: 11px; color: #6B7392; }
.cb-ai-req b { display: block; margin-top: 1px; font-size: 13.5px; font-weight: 600; color: #fff; }
.cb-ai-steps { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.cb-ai-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; background: #1B2140; font-size: 13px; color: #C9CEE0; opacity: .35; transition: opacity .3s; }
.cb-ai-step.is-in { opacity: 1; }
.cb-ai-step i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #262D45; font-style: normal; font-size: 11px; font-weight: 700; }
.cb-ai-step.cb-k-ok i, .cb-ai-step.is-ok i { background: rgba(60, 179, 113, .22); color: #8FE3B4; }
.cb-ai-step.cb-k-warn i, .cb-ai-step.is-warn i { background: rgba(245, 165, 36, .22); color: #F5C66B; }
.cb-ai-step.cb-k-ai i { background: linear-gradient(135deg, var(--accent), #F6A283); color: #fff; }
.cb-ai-step em { font-style: normal; font-family: var(--f-mono); font-size: 11.5px; color: #99A0BA; }
.cb-ai-agent .cb-ai-step { padding: 7px 12px; }
.cb-ai-gauge { display: block; height: 7px; margin-top: 6px; border-radius: 9px; background: #262D45; overflow: hidden; }
.cb-ai-gauge s { display: block; height: 100%; border-radius: 9px; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); background: linear-gradient(90deg, #3CB371, #8FE3B4); }
.cb-ai-gauge s.is-risky { background: linear-gradient(90deg, #F5A524, #FF6B4A); }
.cb-ai-why { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.cb-ai-why span { padding: 4px 9px; border-radius: 8px; background: rgba(245, 165, 36, .14); color: #F5C66B; font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.cb-ai-why span.is-in { opacity: 1; transform: none; }
.cb-ai-verdict { flex: 1; min-height: 38px; padding: 10px 12px; border-radius: 11px; font-weight: 600; font-size: 13.5px; opacity: 0; transition: opacity .3s; }
.cb-ai-verdict.is-ok { opacity: 1; background: rgba(60, 179, 113, .14); color: #8FE3B4; }
.cb-ai-verdict.is-warn { opacity: 1; background: rgba(245, 165, 36, .14); color: #F5C66B; }
.cb-ai-qs { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-ai-qs button { padding: 6px 10px; border-radius: 99px; border: 1.5px solid #343E66; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: #C9CEE0; }
.cb-ai-qs button:hover { border-color: #fff; }
.cb-ai-qs button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.cb-ai-chat { margin-top: 10px; min-height: 188px; padding: 12px; border-radius: 14px; background: #0B0F1D; display: flex; flex-direction: column; gap: 9px; }
.cb-ai-bub { max-width: 88%; padding: 9px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.5; }
.cb-ai-me { align-self: flex-end; background: #262D45; color: #fff; border-bottom-right-radius: 4px; }
.cb-ai-bot { align-self: flex-start; background: #1B2140; color: #E6E8F2; border-bottom-left-radius: 4px; }
.cb-ai-who { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #F6A283; }
.cb-ai-cite { display: inline-flex; margin-top: 7px; padding: 3px 8px; border-radius: 7px; background: rgba(207, 64, 32, .22); color: #F6A283; font-family: var(--f-mono); font-size: 11px; }
.cb-ai-mark { display: inline-block; margin-top: 7px; padding: 3px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; }
.cb-ai-mark.is-bad { background: rgba(194, 54, 43, .22); color: #FFB3A8; }
.cb-ai-mark.is-good { background: rgba(60, 179, 113, .2); color: #8FE3B4; }
.cb-ai-caret { display: inline-block; width: 2px; height: 13px; margin-left: 1px; vertical-align: -2px; background: #F6A283; animation: cb-caret 1s steps(1) infinite; }
@keyframes cb-caret { 50% { opacity: 0; } }
.cb-ai-evals, .cb-ai-meter { margin-top: 10px; display: grid; gap: 6px; }
.cb-ai-evals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-ai-meter { margin-top: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-ai-evals p, .cb-ai-meter p { padding: 8px 11px; border-radius: 11px; background: #1B2140; }
.cb-ai-evals span, .cb-ai-meter span { display: block; font-size: 11.5px; color: #99A0BA; }
.cb-ai-evals b, .cb-ai-meter b { display: block; margin-top: 1px; font-family: var(--f-display); font-weight: 700; font-size: 16.5px; color: #fff; }
.cb-ai-evals .cb-lo { color: #FF8F80; } .cb-ai-evals .cb-hi { color: #8FE3B4; }
.cb-ai-issue { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #1B2140; }
.cb-ai-issue i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(194, 54, 43, .22); color: #FF8F80; font-style: normal; font-weight: 700; }
.cb-ai-issue small { display: block; font-family: var(--f-mono); font-size: 11px; color: #6B7392; }
.cb-ai-issue b { display: block; margin-top: 1px; font-size: 14px; color: #fff; }
.cb-ai-issue .cb-ai-go { margin-left: auto; }
/* without the script, everything in the console simply shows */
html:not(.nh-js) .cb-ai-step { opacity: 1; }

@media (max-width: 1100px) {
  .cb-ai-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cb-ai-path { display: grid; grid-template-columns: 1fr 1fr; justify-items: start; gap: 8px 12px; max-width: 340px; margin-left: auto; margin-right: auto; }
  .cb-ai-path li + li::before { display: none; }
  .cb-ai { padding: 40px 0; }
  .cb-ai-grid { margin-top: 22px; gap: 16px; }
  .cb-ai-list { gap: 8px; }
  .cb-ai-b { padding: 12px 14px; }
  .cb-ai-what { display: none; }   /* phones: the subtitle and the console already say it */
  .cb-ai-kv { margin-top: 7px; }
  .cb-ai-req { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-ai-cb { padding: 12px; }
  .cb-ai-issue { flex-wrap: wrap; }
  .cb-ai-meter b { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-ai-console::before, .cb-ai-live i, .cb-ai-caret { animation: none; }
  .cb-ai-more, .cb-ai-step, .cb-ai-why span, .cb-ai-verdict, .cb-ai-gauge s { transition: none; }
}

/* ==========================================================
   Section 5: the four tracks (owner picked the metro map). Four coloured lines share
   day one, story classes and AI tools, run through their own stack, meet again at the
   three AI builds and the mock rounds, and end at a job. Pick a line: the others fade,
   a train rides it, the card beside it shows the track. The pick is shared with the
   hero slip and the builds console.
   ========================================================== */
.cb-tr { padding: var(--nh-section) 0; background: var(--bg); }
.cb-tr .on-lede { max-width: 70ch; }
.cb-tr-grid { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: stretch; }

.cb-mt { min-width: 0; padding: 18px 18px 12px; border-radius: 24px; background: #FAFAF7; border: 1px solid var(--line); }
.cb-mt-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-mt-legend button {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; border: 1.5px solid var(--line-2);
  background: #fff; cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 13.5px; color: var(--ink);
  transition: border-color .2s, background-color .2s, color .2s;
}
.cb-mt-legend button i { display: grid; place-items: center; width: 18px; height: 18px; }
.cb-tr-ic { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-mt-legend button[aria-pressed="true"] i { color: #fff !important; }   /* the icon turns white on the dark pill */
.cb-mt-legend button:hover { border-color: var(--ink); }
.cb-mt-legend button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.cb-mt-legend button:focus-visible { outline: 2px solid var(--nh-green-ring); outline-offset: 2px; }
.cb-mt-scroll { margin-top: 6px; }
.cb-mt-svg { display: block; width: 100%; height: auto; }
.cb-mt-line { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; transition: opacity .3s, stroke-width .3s; }
.cb-mt-stn { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.cb-mt-big { stroke-width: 3.5; }
.cb-mt-lbl { font-family: var(--f-body, Inter), sans-serif; font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.cb-mt-sub { font-family: var(--f-body, Inter), sans-serif; font-size: 11.5px; fill: var(--nh-muted); }
.cb-mt-end { font-family: var(--f-display); font-size: 13px; font-weight: 700; fill: var(--ink); }
.cb-mt-branch { transition: opacity .3s; }
.cb-mt.is-focus .cb-mt-line { opacity: .14; }
.cb-mt.is-focus .cb-mt-line.is-on { opacity: 1; stroke-width: 9; }
.cb-mt.is-focus .cb-mt-branch { opacity: .2; }
.cb-mt.is-focus .cb-mt-branch.is-on { opacity: 1; }
.cb-mt-train { fill: var(--ink); stroke: #fff; stroke-width: 2.5; pointer-events: none; }

/* the track card: three facts with icons, no labels, one button */
.cb-tr-side { display: flex; }
.cb-tr-card { flex: 1; display: flex; flex-direction: column; padding: 24px; border-radius: 20px; background: #fff; border: 1.5px solid var(--line); }
.cb-tr-card[hidden] { display: none; }
.cb-tr-name { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; color: var(--ink); }
.cb-tr-name i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 8px; border-radius: 11px; }
.cb-tr-why { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cb-tr-facts { list-style: none; margin-top: 20px; display: grid; gap: 14px; }
.cb-tr-facts li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cb-tr-facts i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-alt); color: var(--ink); }
.cb-tr-facts svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-tr-facts b { color: var(--ink); font-weight: 600; }
.cb-tr-facts .cb-tr-ai i { background: var(--accent-tint); color: var(--accent); }
.cb-tr-facts .cb-tr-ai span { padding-top: 1px; color: #8A2A12; }
.cb-tr-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.cb-tr-chips span { padding: 4px 9px; border-radius: 8px; background: var(--bg-alt); font-family: var(--f-mono); font-size: 12px; color: var(--ink); }
.cb-tr-go { margin-top: auto; width: 100%; height: 50px; justify-content: center; font-size: 15.5px; }

@media (max-width: 1100px) {
  .cb-tr-grid { grid-template-columns: minmax(0, 1fr); }
  .cb-tr-go { margin-top: 24px; }
}
@media (max-width: 720px) {
  /* phones: the map keeps its size and scrolls sideways inside its frame */
  .cb-mt { padding: 14px 0 10px 14px; }
  .cb-mt-legend { padding-right: 14px; }
  .cb-mt-scroll { overflow-x: auto; scrollbar-width: none; }
  .cb-mt-scroll::-webkit-scrollbar { display: none; }
  .cb-mt-svg { width: 840px; max-width: none; }
  .cb-tr-card { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-mt-line, .cb-mt-branch { transition: none; }
}

/* ==========================================================
   Section 4, founder weekends. Owner picked A (#founders): four closed 3D doors.
   B (#founders-room, the spotlight room) is hidden: its fragment stays in src/campus-new/
   and is not built; its styles below and initFounderLight stay in case it comes back.
   ========================================================== */
/* ---------- A: the doors ---------- */
.cb-dr { background: linear-gradient(180deg, var(--bg) 0%, #F3EFE9 100%); }
.cb-hall { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px; }
.cb-dw { position: relative; height: 392px; perspective: 1400px; cursor: pointer; }
.cb-dw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; border-radius: 3px; background: var(--ink); }
.cb-dw-room {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 22px 20px 20px; overflow: hidden;
  border: 10px solid var(--ink); border-bottom-width: 0; border-radius: 16px 16px 6px 6px;
  background: radial-gradient(120% 70% at 50% 0%, #FFF6EC 0%, #FFE0C4 55%, #FFC9A2 100%);
}
.cb-dw-no { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--accent); }
.cb-dw-room h3 { margin-top: 8px; font-family: var(--f-display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.cb-dw-p { margin-top: 10px; font-size: 14px; line-height: 1.55; color: #5B4A3E; }
.cb-dw-get { margin-top: auto; padding: 12px 13px; border-radius: 12px; background: rgba(255, 255, 255, .7); font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.cb-dw-get small { display: block; margin-bottom: 3px; font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: .06em; color: var(--accent); }
.cb-door {
  position: absolute; inset: 0 -1px; padding: 0; border: 0; border-radius: 6px 6px 0 0; cursor: pointer;
  background: linear-gradient(180deg, #27305A, #1B2240); transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.cb-door::before, .cb-door::after { content: ""; position: absolute; left: 18px; right: 18px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, .08); }
.cb-door::before { top: 74px; height: 118px; }
.cb-door::after { top: 206px; bottom: 22px; }
.cb-door:focus-visible { outline: 3px solid var(--nh-green-ring); outline-offset: 4px; }
/* the plaque, sign and knob are on the front only; an open door shows its plain back */
.cb-door > span { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cb-door-plaque { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); padding: 6px 14px; border-radius: 8px; background: #F6E2C8; color: var(--ink); font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
.cb-door-sign { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; border: 1.5px solid #FF8F80; color: #FF8F80; font-size: 11px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.cb-door-sign i { width: 7px; height: 7px; border-radius: 50%; background: #FF5C47; }
.cb-door-knob { position: absolute; right: 16px; top: 52%; width: 14px; height: 14px; border-radius: 50%; background: #E8B86B; }
.cb-door-peek { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; color: #99A0BA; white-space: nowrap; }
.cb-dw:hover .cb-door { transform: rotateY(-18deg); }
.cb-dw.is-open .cb-door { transform: rotateY(-98deg); }
.cb-dw-spill {
  position: absolute; left: -10%; right: -10%; top: calc(100% + 6px); height: 70px; opacity: 0; pointer-events: none; transition: opacity .8s .2s;
  background: linear-gradient(180deg, rgba(255, 196, 150, .75), rgba(255, 196, 150, 0)); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.cb-dw.is-open .cb-dw-spill { opacity: 1; }
.cb-dr-hint { margin-top: 48px; text-align: center; font-size: 14px; color: var(--nh-muted); }

/* ---------- B: the spotlight ---------- */
.cb-sl { padding: var(--nh-section) 0; background: #0B0F1D; color: #fff; }
.cb-sl .on-head h2 { color: #fff; }
.cb-sl .on-lede { color: #A3AAC2; }
.cb-sl-stage { position: relative; margin-top: 40px; border-radius: 28px; background: #0E1326; border: 1px solid #1F2744; overflow: hidden; }
.cb-sl-tip { position: absolute; z-index: 3; left: 22px; top: 22px; font-size: 13px; font-weight: 600; color: #6B7392; }
.cb-sl-onair { position: absolute; z-index: 3; right: 22px; top: 20px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid #FF5C47; color: #FF8F80; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; }
.cb-sl-onair i { width: 8px; height: 8px; border-radius: 50%; background: #FF5C47; animation: cb-rec 1.6s steps(1) infinite; }
@keyframes cb-rec { 50% { opacity: .2; } }
.cb-sl-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; padding: 72px 48px 44px; min-height: 500px; }
.cb-sl-wall--lit {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 230px at var(--cb-x, 30%) var(--cb-y, 35%), #000 55%, transparent 100%);
          mask-image: radial-gradient(circle 230px at var(--cb-x, 30%) var(--cb-y, 35%), #000 55%, transparent 100%);
}
.cb-sl-beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 260px at var(--cb-x, 30%) var(--cb-y, 35%), rgba(255, 214, 170, .1), transparent 70%); }
.cb-sl-topic { display: flex; flex-direction: column; justify-content: center; border-radius: 16px; }
.cb-sl-topic:focus-visible { outline: 2px solid var(--nh-green-ring); outline-offset: 6px; }
.cb-sl-no { font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; }
.cb-sl-topic h3, .cb-sl-h { margin-top: 6px; font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -.03em; }
.cb-sl-p { margin-top: 10px; max-width: 44ch; font-size: 15px; line-height: 1.55; }
.cb-sl-get { margin-top: 10px; font-size: 14px; font-weight: 600; }
.cb-sl-wall--dim .cb-sl-no { color: #3A4368; }
.cb-sl-wall--dim h3 { color: transparent; -webkit-text-stroke: 1.2px #2F3860; }
.cb-sl-wall--dim .cb-sl-p, .cb-sl-wall--dim .cb-sl-get { color: #262E4E; }
.cb-sl-wall--lit .cb-sl-no { color: #F6A283; }
.cb-sl-wall--lit .cb-sl-h { color: #fff; }
.cb-sl-wall--lit .cb-sl-p { color: #C9CEE0; }
.cb-sl-wall--lit .cb-sl-get { color: #8FE3B4; }
.cb-sl-rules { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cb-sl-rules span { padding: 7px 13px; border-radius: 99px; border: 1px solid #2A3150; font-size: 13.5px; font-weight: 600; color: #C9CEE0; }

@media (max-width: 1100px) {
  .cb-hall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 60px; }
}
@media (max-width: 720px) {
  /* phones: the doors become a row you swipe through */
  .cb-hall { margin-top: 32px; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 40px;
             overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 8px 84px 44px; margin-left: -16px; margin-right: -16px; scrollbar-width: none; }
  .cb-hall::-webkit-scrollbar { display: none; }
  .cb-dw { height: 360px; scroll-snap-align: center; }
  .cb-dr-hint { margin-top: -40px; }
  .cb-sl-wall { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 64px 22px 32px; min-height: 0; }
  .cb-sl-tip { display: none; }
  .cb-sl-onair { left: 22px; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-door, .cb-dw-spill { transition: none; }
  .cb-sl-onair i { animation: none; }
}

/* ==========================================================
   Section 6, the people (#mentors). Owner picked C: four campus ID badges on lanyards.
   Each hangs from one rail and sways a little; a tap flips it to the credentials on the
   back (initIdBadges). The ground is a dotted wall so it does not repeat the warm doors
   section above it. The last badge is the visitor's, with the seat picked in the hero.
   ========================================================== */
.cb-id {
  padding: var(--nh-section) 0;
  background: radial-gradient(circle, #D6DCE7 1px, transparent 1.3px) 0 0 / 22px 22px, #F6F8FB;
}
.cb-id .on-lede { text-wrap: balance; }
.cb-id-stage { position: relative; margin-top: 36px; }
.cb-id-rail { height: 10px; margin: 0 24px; border-radius: 99px; background: var(--ink); }
.cb-id-row { list-style: none; margin: 0; padding: 0 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.cb-id-hang { display: flex; justify-content: center; transform-origin: 50% 0; animation: cb-id-sway var(--cb-sw) ease-in-out var(--cb-sd) infinite alternate; }
.cb-id-stage.is-off .cb-id-hang { animation-play-state: paused; }
@keyframes cb-id-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.cb-id-tilt {
  width: 100%; max-width: 264px; display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 0; transform: rotate(var(--cb-tilt, 0deg)); transition: transform .6s var(--ease-out);
}
.cb-id-hook { width: 26px; height: 14px; margin-top: -2px; border: 3px solid var(--ink-2); border-top: 0; border-radius: 0 0 14px 14px; }
.cb-id-strap {
  width: 26px; height: 74px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--cb-c); color: rgba(255, 255, 255, .85); writing-mode: vertical-rl; white-space: nowrap;
  font-family: var(--f-display); font-weight: 700; font-size: 9px; letter-spacing: .18em;
}
.cb-id-clip { position: relative; z-index: 2; width: 34px; height: 16px; margin-top: -2px; border-radius: 5px; background: #C9CFDC; border: 2px solid #AAB2C4; }

/* the badge: two faces on one card that turns */
.cb-id-badge { position: relative; width: 100%; height: 352px; margin-top: -6px; perspective: 1200px; }
.cb-id-card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease-out); }
.cb-id-badge.is-flipped .cb-id-card { transform: rotateY(180deg); }
.cb-id-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
  background: #fff; border: 1.5px solid var(--line-2); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cb-id-back { transform: rotateY(180deg); padding: 22px 20px 18px; background: var(--ink); border-color: var(--ink); color: #fff; }
.cb-id-band { position: relative; flex: none; height: 62px; padding: 0 18px 9px; display: flex; align-items: flex-end; justify-content: flex-end;
  background: var(--cb-c); color: rgba(255, 255, 255, .92); font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cb-id-band::before { content: ""; position: absolute; left: 50%; top: 12px; width: 48px; height: 9px; margin-left: -24px; border-radius: 99px; background: #fff; opacity: .9; }
.cb-id-body { flex: 1; display: flex; flex-direction: column; padding: 0 18px 14px; }
.cb-id-av {
  position: relative; width: 78px; height: 78px; margin-top: -30px; display: grid; place-items: center; border-radius: 18px;
  background: #fff; border: 3px solid #fff; outline: 1.5px solid var(--line-2); color: var(--cb-c);
}
.cb-id-av--you { outline-style: dashed; outline-color: var(--cb-c); }
.cb-id-ic { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-id-body h3 { margin: 12px 0 0; font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.cb-id-body h3.cb-id-flat { margin-top: 16px; }
.cb-id-body > p:not(.cb-id-meta) { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.cb-id-body > p b { font-weight: 700; color: var(--ink); }
.cb-id-logos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cb-id-logos li { height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1.5px solid var(--line); }
.cb-id-logos svg { width: 20px; height: 20px; }
.cb-id-logos svg.cb-id-word { width: 36px; height: 13px; }
.cb-id-meta { margin: auto 0 0; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; font-size: 11.5px; line-height: 1.35; color: var(--nh-muted); }
.cb-id-meta b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--ink); }
.cb-id-meta i { flex: none; width: 72px; height: 30px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); }
/* each face's button covers the whole face, so a tap anywhere flips the badge */
.cb-id-flip {
  margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--cb-c);
}
.cb-id-flip::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.cb-id-flip:focus-visible { outline: none; }
.cb-id-flip:focus-visible::after { outline: 3px solid var(--nh-green-ring); outline-offset: 3px; }
.cb-id-flip .cb-id-ic { width: 15px; height: 15px; }
.cb-id-front .cb-id-flip:hover { text-decoration: underline; text-underline-offset: 3px; }
.cb-id-flip--back { position: absolute; top: 16px; right: 16px; margin: 0; width: 30px; height: 30px; justify-content: center; border-radius: 9px; background: rgba(255, 255, 255, .08); color: #B8BED3; }
.cb-id-flip--back .cb-id-ic { width: 16px; height: 16px; }

.cb-id-bt { margin: 0; padding-right: 36px; font-family: var(--f-display); font-weight: 600; font-size: 15px; color: #B8BED3; }
.cb-id-back ul { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cb-id-back li { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; line-height: 1.35; color: #D5D9E6; }
.cb-id-back li b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: #fff; }
.cb-id-note { margin: auto 0 0; font-size: 12.5px; line-height: 1.45; color: #99A0BA; }
.cb-id-go { position: relative; z-index: 1; margin-top: auto; width: 100%; }
/* without the script the back still shows on hover or keyboard focus */
html:not(.nh-js) .cb-id-badge:hover .cb-id-card, html:not(.nh-js) .cb-id-badge:focus-within .cb-id-card { transform: rotateY(180deg); }

@media (max-width: 959px) {
  /* narrow screens: one rail, the badges in a row you swipe through */
  .cb-id-rail { display: none; }
  .cb-id-row {
    display: flex; gap: 16px; margin: 0 calc(var(--nh-gutter) * -1); padding: 0 var(--nh-gutter) 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    background: linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 10px no-repeat local;
  }
  .cb-id-row::-webkit-scrollbar { display: none; }
  .cb-id-hang { flex: 0 0 240px; scroll-snap-align: center; }
  .cb-id-hook { margin-top: 8px; }
}
@media (max-width: 720px) {
  .cb-id-stage { margin-top: 26px; }
  .cb-id-badge { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-id-hang { animation: none; }
  .cb-id-tilt, .cb-id-card { transition: none; }
}

/* ==========================================================
   Section 7, student reviews (#reviews). The old page's nine reviews as a story reel: bars on
   top fill while a story shows, one story at a time with its key phrase marked, a tray of
   rings below (seen ones turn grey). initStories plays it while it is on screen and stops
   for good at the first tap. Without the script the reviews are a plain list.
   ========================================================== */
.cb-rv { padding: var(--nh-section) 0; background: #FFF8F4; }
.cb-rv-in { display: grid; grid-template-columns: minmax(0, 490px) minmax(0, 1fr); gap: 52px; align-items: center; }
.cb-rv-l h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--nh-h2); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); }
.cb-rv-lede { margin: 16px 0 0; font-size: var(--nh-lede); line-height: 1.6; color: var(--ink-2); }
.cb-rv-score { margin-top: 26px; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1.5px solid #F1DDD2; }
.cb-rv-n { margin: 0; display: flex; align-items: center; gap: 14px; }
.cb-rv-n > b { font-family: var(--f-display); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.cb-rv-n > span { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--nh-muted); }
.cb-rv-stars { position: relative; display: block; width: 110px; height: 22px; }
.cb-rv-stars svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #E7E1DC; }
.cb-rv-stars svg + svg { fill: #E8A33D; clip-path: inset(0 calc(100% - var(--cb-fill)) 0 0); }
.cb-rv-bars { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.cb-rv-bars li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 16px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.cb-rv-bars u { position: relative; height: 7px; border-radius: 99px; background: #F3ECE7; overflow: hidden; }
.cb-rv-bars u::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #E8A33D; transform-origin: left; transform: scaleX(var(--cb-w)); }
.cb-rv-bars b { text-align: right; font-weight: 600; color: var(--ink); }

/* the story card */
.cb-rv-card { position: relative; padding: 18px 30px 20px; border-radius: 26px; background: #fff; border: 1.5px solid #F1DDD2; }
.cb-rv-prog { display: flex; gap: 5px; }
.cb-rv-prog i { position: relative; flex: 1; height: 4px; border-radius: 99px; background: #F1E6DF; overflow: hidden; }
.cb-rv-prog i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.cb-rv-prog i.is-done::after { transform: scaleX(1); }
.cb-rv-prog i.is-now::after { animation: cb-rv-fill 7s linear forwards; }
@keyframes cb-rv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cb-rv-card:hover .cb-rv-prog i.is-now::after, .cb-rv-card:focus-within .cb-rv-prog i.is-now::after,
.cb-rv.is-off .cb-rv-prog i.is-now::after { animation-play-state: paused; }
.cb-rv.is-manual .cb-rv-prog i.is-now::after { animation: none; transform: scaleX(1); }

.cb-rv-stories { margin-top: 22px; display: grid; gap: 28px; }
.cb-rv-s { margin: 0; }
.cb-rv-s figcaption { display: flex; align-items: center; gap: 12px; }
.cb-rv-av {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--cb-av); color: #fff; font-family: var(--f-display); font-weight: 600; font-size: 18px;
}
.cb-rv-who { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35; color: var(--nh-muted); }
.cb-rv-who b { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.cb-rv-tag { margin-left: auto; padding: 5px 11px; border-radius: 99px; background: #FBEEE9; color: #9A3216; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cb-rv-s blockquote {
  position: relative; margin: 20px 0 0; padding-left: 44px;
  font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 1.75vw, 25px); line-height: 1.45; letter-spacing: -.01em; color: var(--ink);
}
.cb-rv-s blockquote::before { content: "\201C"; position: absolute; left: 0; top: -12px; font-family: var(--f-display); font-weight: 700; font-size: 64px; line-height: 1; color: var(--accent); }
.cb-rv-s mark {
  color: inherit; padding: 0 2px; border-radius: 4px;
  background: linear-gradient(transparent 55%, rgba(232, 163, 61, .45) 55%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cb-rv-nav { margin-top: 20px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 13.5px; color: var(--nh-muted); }
.cb-rv-nav b { color: var(--ink); }
.cb-rv-nav button {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); transition: border-color .2s, background-color .2s, color .2s;
}
.cb-rv-nav button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.cb-rv-nav button:focus-visible, .cb-rv-tray button:focus-visible { outline: 2px solid var(--nh-green-ring); outline-offset: 2px; }
.cb-rv-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb-rv-prev { order: -1; margin-right: auto; }
.cb-rv-prev svg { transform: scaleX(-1); }
.cb-rv-count { margin-left: auto; }

/* the tray of rings */
.cb-rv-tray { margin-top: 18px; display: flex; gap: 12px; justify-content: space-between; }
.cb-rv-tray button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.cb-rv-ring { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--accent), #E8A33D, var(--accent)); transition: transform .25s var(--ease-out); }
.cb-rv-ring .cb-rv-av { width: 46px; height: 46px; border: 2.5px solid #FFF8F4; font-size: 16px; }
.cb-rv-tray button.is-seen .cb-rv-ring { background: #D9D3CE; }
.cb-rv-tray button[aria-pressed="true"] { color: var(--ink); }
.cb-rv-tray button[aria-pressed="true"] .cb-rv-ring { background: var(--ink); transform: scale(1.08); }
.cb-rv-tray button:hover .cb-rv-ring { transform: scale(1.08); }

/* with the script: the stories share one spot and only the current one shows */
.nh-js .cb-rv-stories { gap: 0; }
.nh-js .cb-rv-s { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s, transform .45s var(--ease-out), visibility 0s .45s; }
.nh-js .cb-rv-s.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .45s var(--ease-out); }
.nh-js .cb-rv-s mark { background-size: 0 100%; transition: background-size .9s var(--ease-out) .35s; }
.nh-js .cb-rv-s.is-on mark { background-size: 100% 100%; }
html:not(.nh-js) .cb-rv-prog, html:not(.nh-js) .cb-rv-nav, html:not(.nh-js) .cb-rv-tray { display: none; }

@media (max-width: 1100px) {
  .cb-rv-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cb-rv-l { max-width: 640px; }
  .cb-rv-tray { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 16px calc(var(--nh-gutter) * -1) 0; padding: 4px var(--nh-gutter); }
  .cb-rv-tray::-webkit-scrollbar { display: none; }
  .cb-rv-tray button { flex: none; }
}
@media (max-width: 720px) {
  .cb-rv-lede { font-size: 15.5px; }
  .cb-rv-score { margin-top: 18px; padding: 16px; display: flex; align-items: center; gap: 18px; }
  .cb-rv-n > b { font-size: 38px; }
  .cb-rv-bars { display: none; }
  .cb-rv-card { padding: 16px 18px 16px; border-radius: 22px; }
  .cb-rv-tag { display: none; }
  .cb-rv-s blockquote { margin-top: 16px; padding-left: 0; font-size: 18.5px; }
  .cb-rv-s blockquote::before { position: static; display: block; height: 30px; font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .nh-js .cb-rv-s, .nh-js .cb-rv-s.is-on, .nh-js .cb-rv-s mark { transition: none; }
  .cb-rv-prog i.is-now::after { animation: none; transform: scaleX(1); }
}