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

/* current page in the nav */
.nh-links a[aria-current="page"], .nh-menu a[aria-current="page"] { color: var(--accent); }

/* ---------- hero (owner picked "A2": value + instructor + trust) ---------- */
.on-hero {
  background: radial-gradient(55% 70% at 85% 30%, rgba(207, 64, 32, .09), transparent 70%),
              linear-gradient(180deg, #FFF8F4, var(--bg) 80%);
}
.on-hero-in {
  max-width: 1320px; margin: 0 auto; padding: 44px var(--nh-gutter) 46px;
  display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 52px; align-items: center;
}
.on-pills { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.on-rate, .on-open { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; font-size: 14px; }
.on-rate { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.on-rate svg { width: 15px; height: 15px; fill: #E0A82E; }
.on-rate b { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.on-open { background: #E8F5EE; color: var(--nh-green); font-weight: 600; }
.on-open i { width: 8px; height: 8px; border-radius: 50%; background: var(--nh-green-ring); animation: on-ping 2s infinite; }
@keyframes on-ping { 0% { box-shadow: 0 0 0 0 rgba(60, 179, 113, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(60, 179, 113, 0); } }
.on-title {
  margin-top: 18px; font-family: var(--f-display); font-weight: 600; font-size: clamp(38px, 4.1vw, 54px);
  line-height: 1.04; letter-spacing: -.035em; color: var(--ink);
}
.on-sub { margin-top: 16px; max-width: 46ch; font-size: var(--nh-lede); line-height: 1.6; color: var(--ink-2); }

.on-inc { list-style: none; margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.on-inc li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.on-inc i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.on-inc svg, .on-band svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.on-inc b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--ink); white-space: nowrap; }
.on-inc span { display: block; font-size: 12.5px; color: var(--nh-muted); }

.on-cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.on-btn { height: 56px; padding: 0 24px; font-size: 16.5px; }
.on-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.on-note { margin-top: 12px; font-size: 14px; color: var(--nh-muted); }

/* instructor card (PW Skills mentor banner pattern) */
.on-ins { position: relative; overflow: hidden; border-radius: 28px; color: #fff; background: linear-gradient(155deg, #212A4A, var(--ink) 55%, #0B0E1A); }
.on-ins::before { content: ""; position: absolute; right: -110px; top: -130px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(207, 64, 32, .4), transparent); pointer-events: none; }
.on-ins > * { position: relative; }
.on-ins-top { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; align-items: end; padding: 26px 26px 0; }
.on-ph { position: relative; width: 168px; height: 200px; border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(165deg, #43538A, #1A2038); border: 1px solid rgba(255, 255, 255, .14); }
.on-ph svg { width: 84px; height: 84px; fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; }
.on-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.on-ph b { position: absolute; z-index: 1; left: 10px; top: 10px; padding: 4px 9px; border-radius: 99px; background: var(--accent); font-family: var(--f-display); font-weight: 700; font-size: 12px; }
.on-who-k { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #F6A283; }
.on-who h2 { margin-top: 6px; font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.on-who p:last-child { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: #C9CEDD; }
.on-ranks { margin: 20px 26px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.on-ranks div { padding: 12px; border-right: 1px solid rgba(255, 255, 255, .1); }
.on-ranks div:last-child { border-right: 0; }
.on-ranks dt { font-size: 11.5px; color: #A3AAC2; white-space: nowrap; }
.on-ranks dd { margin: 2px 0 0; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: #fff; }
.on-also { margin-top: 18px; display: flex; align-items: center; gap: 14px; padding: 16px 26px; border-top: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .18); font-size: 14px; line-height: 1.4; color: #C9CEDD; }
.on-also b { color: #fff; }
.on-avs { flex: none; display: flex; }
.on-avs i { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #161C31; background: #C0582E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") center/20px no-repeat; }
.on-avs i + i { margin-left: -10px; background-color: #2F5B8A; }

/* stats band + where students work (Coding Ninjas band, Newton referrals strip) */
.on-band { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--ink); color: #fff; }
.on-band li { display: flex; gap: 14px; align-items: center; padding: 20px 24px; border-right: 1px solid #2A3150; }
.on-band li:last-child { border-right: 0; }
.on-band i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(207, 64, 32, .18); color: #F6A283; }
.on-band b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: -.02em; }
.on-band span { display: block; margin-top: 2px; font-size: 13px; color: #A3AAC2; }
.on-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 30px; padding: 18px var(--nh-gutter); background: #fff; border-bottom: 1px solid var(--line); }
.on-strip span { font-size: 14px; color: var(--nh-muted); }
.on-strip b { font-family: var(--f-display); font-weight: 600; font-size: 18px; color: #6B7290; }

/* ---------- callback bar (Newton pattern): shows after the hero, hides at the form ---------- */
.nh-callbar {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--nh-gutter); background: var(--nh-green); color: #fff; font-size: 15px;
  transform: translateY(100%); transition: transform .35s var(--ease-out);
}
.nh-callbar[hidden] { display: flex; visibility: hidden; }
.nh-callbar.is-on { transform: none; visibility: visible; }
.nh-callbar b { font-family: var(--f-display); }
.nh-callbar-go {
  flex: none; height: 42px; padding: 0 18px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--nh-green); font-family: var(--f-display); font-weight: 600; font-size: 15px;
}
.nh-callbar-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (min-width: 1101px) { .on-title { white-space: nowrap; } }
@media (max-width: 1100px) {
  .on-hero-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .on-ins { max-width: 560px; }
  .on-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .on-band li { border-bottom: 1px solid #2A3150; }
}
@media (max-width: 720px) {
  .on-hero-in { padding-top: 32px; }
  .on-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .on-inc b { white-space: normal; }
  .on-btn { width: 100%; }
  .on-ins-top { grid-template-columns: 110px minmax(0, 1fr); padding: 20px 20px 0; gap: 16px; }
  .on-ph { width: 110px; height: 132px; }
  .on-who h2 { font-size: 20px; }
  .on-ranks { margin: 16px 20px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .on-ranks div:nth-child(2) { border-right: 0; }
  .on-ranks div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .on-also { padding: 14px 20px; }
  .on-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .on-band li { padding: 16px; }
  .on-band li:last-child { grid-column: 1 / -1; }
  .nh-callbar p { font-size: 14px; }
  .nh-callbar p span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .on-open i { animation: none; }
  .nh-callbar { transition: none; }
}

/* ==========================================================
   Sections after the hero. Shared frame, then one block per section.
   ========================================================== */
.on-sec { padding: var(--nh-section) 0; background: var(--bg); }
.on-sec--alt { background: var(--bg-alt); }
.on-in { max-width: 1320px; margin: 0 auto; padding: 0 var(--nh-gutter); }
.on-in--narrow { max-width: 1040px; }
.on-head { max-width: 860px; margin: 0 auto; text-align: center; }
.on-head h2, .on-rev-l h2 {
  font-family: var(--f-display); font-weight: 700; font-size: var(--nh-h2); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.on-head p, .on-lede { margin: 16px auto 0; max-width: 62ch; font-size: var(--nh-lede); line-height: 1.6; color: var(--ink-2); }
.on-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.on-chips span { padding: 5px 10px; border-radius: 8px; background: var(--bg-alt); font-family: var(--f-mono); font-size: 12.5px; color: var(--ink); }
.on-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 15px; color: #fff; }

/* ---------- tracks ---------- */
.on-tracks { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.on-tr { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.on-tr-k { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.on-tr-k::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.on-tr h2, .on-tr h3 { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.on-tr-t { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.on-tr-ai { margin-top: auto; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: #D7DBE8; font-size: 14px; line-height: 1.5; }
.on-tr-ai b { display: block; margin-bottom: 3px; font-family: var(--f-display); font-size: 12.5px; color: #F6A283; }
.on-tr--hot { background: linear-gradient(160deg, #FFF3EE, #fff 60%); border-color: var(--accent-tint2); }
.on-why { list-style: none; margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.on-why li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.on-why li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: #E8F5EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/12px no-repeat; }

/* ---------- placement ---------- */
.on-steps { list-style: none; position: relative; margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.on-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px); }
.on-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.on-steps i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--f-display); font-weight: 700; font-size: 16px; background: #fff; border: 2px solid var(--accent); color: var(--accent); }
.on-steps li:last-child i { background: var(--nh-green); border-color: var(--nh-green); color: #fff; }
.on-steps b { margin-top: 6px; font-family: var(--f-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.on-steps span { max-width: 26ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.on-place-row { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.on-top20 { padding: 22px 24px; border-radius: 20px; background: var(--ink); color: #C9CEDD; font-size: 15.5px; line-height: 1.6; }
.on-top20 b { display: block; margin-bottom: 4px; font-family: var(--f-display); font-size: 19px; color: #fff; }
.on-net { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 10px 14px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.on-net span { flex-basis: 100%; font-size: 14px; font-weight: 600; color: var(--nh-muted); }
.on-net b { font-family: var(--f-display); font-weight: 600; font-size: 17px; color: #4A5170; }
.on-net em { font-style: normal; font-size: 13.5px; color: var(--accent); }

/* ---------- online vs campus ---------- */
.on-cmp { margin-top: 36px; border-radius: 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.on-cmp-r { display: grid; grid-template-columns: 1.1fr 1.3fr 1.3fr; border-bottom: 1px solid var(--line); }
.on-cmp-r:last-child { border-bottom: 0; }
.on-cmp-r > span { padding: 15px 20px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.on-cmp-r > span:first-child { font-weight: 600; color: var(--ink); }
.on-cmp-r .is-this { background: #F3FBF6; color: var(--ink); }
.on-cmp-h > span { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.on-cmp-h em { margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--nh-green); color: #fff; vertical-align: 2px; }
.on-cmp-foot { margin-top: 18px; text-align: center; font-size: 15.5px; color: var(--ink-2); }
.on-cmp-foot a { font-family: var(--f-display); font-weight: 600; color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-tint2); text-underline-offset: 4px; }

/* ---------- reviews ---------- */
.on-rev { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.on-score { margin-top: 26px; padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.on-score-n { display: flex; align-items: baseline; gap: 10px; }
.on-score-n b { font-family: var(--f-display); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.on-score-n span { font-size: 15px; color: var(--nh-muted); }
.on-score-s { margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.on-bars { list-style: none; margin-top: 16px; display: grid; gap: 7px; }
.on-bars li { display: grid; grid-template-columns: 34px 1fr 20px; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.on-bars u { height: 8px; border-radius: 5px; background: var(--bg-alt); position: relative; overflow: hidden; text-decoration: none; }
.on-bars u::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 5px; background: #E0A82E; }
.on-bars b { text-align: right; font-weight: 600; color: var(--ink); }
.on-score-f { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 13.5px; color: var(--nh-muted); }
.on-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.on-q { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.on-q blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.on-q figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--nh-muted); }
.on-q figcaption b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 15.5px; color: var(--ink); }

/* ---------- responsive for the sections ---------- */
@media (max-width: 1100px) {
  .on-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .on-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .on-week { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .on-rev { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 720px) {
  .on-tracks, .on-why, .on-quotes, .on-place-row { grid-template-columns: minmax(0, 1fr); }
  .on-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .on-steps::before { left: 25px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--accent) 0 8px, transparent 8px 14px); }
  .on-steps li { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 14px; text-align: left; align-items: start; }
  .on-steps i { grid-row: 1 / 3; }
  .on-steps b { margin-top: 4px; }
  .on-cmp-r { grid-template-columns: 1fr 1fr; }
  .on-cmp-r > span:first-child { grid-column: 1 / -1; padding-bottom: 4px; }
  .on-cmp-h > span:first-child { display: none; }
}

/* ---------- your week: the 24-hour dial (owner picked A) ---------- */
/* owner: heading and lede centred on top; below, three balanced columns so the whole section fits one
   screen: the batch cards, the dial, the week as a list */
.on-week { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.15fr) 380px minmax(0, .75fr); gap: 44px; align-items: center; }
.on-modes { margin-top: 26px; display: grid; gap: 10px; }
.on-mode {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%;
  padding: 14px 16px; border-radius: 18px; background: #fff; border: 1.5px solid var(--line); text-align: left;
  transition: border-color .2s, background-color .2s;
}
.on-mode i { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--bg-alt); color: var(--ink-2); }
.on-mode svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.on-mode-t b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.on-mode-t span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.on-mode em { font-style: normal; font-family: var(--f-mono); font-size: 12.5px; padding: 5px 9px; border-radius: 8px; background: var(--bg-alt); color: var(--ink-2); white-space: nowrap; }
.on-mode:hover { border-color: var(--line-2); }
.on-mode:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 2px; }
.on-mode.is-on { border-color: var(--nh-green); background: #F3FBF6; }
.on-mode.is-on i { background: var(--nh-green); color: #fff; }
.on-mode.is-on b { color: var(--nh-green); }
.on-mode.is-on em { background: var(--nh-green); color: #fff; }
.on-fine { margin-top: 14px; font-size: 13.5px; color: var(--nh-muted); }
.on-rec { margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #C9CEDD; font-size: 14.5px; }
.on-rec b { color: #fff; }
.on-rec i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; background: rgba(207, 64, 32, .2); color: #F6A283; }

.on-dialbox { display: grid; justify-items: center; gap: 22px; }
.on-dial { position: relative; width: min(380px, 100%); aspect-ratio: 1; }
.on-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.on-trk { fill: none; stroke: var(--bg-alt); stroke-width: 30; }
.on-arc { fill: none; stroke-width: 30; transition: stroke-dashoffset .8s var(--ease-out), stroke-dasharray .8s var(--ease-out), opacity .4s; }
.on-sleep { stroke: #DCE1EC; }
.on-work { stroke: #B9C3DA; }
.on-cls { stroke: var(--accent); }
.on-glow { stroke: rgba(207, 64, 32, .22); stroke-width: 44; }
.on-pin { transform-origin: 100px 100px; transition: transform .8s var(--ease-out); }
.on-pin circle { fill: var(--accent); stroke: #fff; stroke-width: 3; }
#week[data-mode="weekend"] .on-work { opacity: 0; }
.on-hr { position: absolute; font-family: var(--f-mono); font-size: 12px; color: var(--nh-muted); }
.on-hr-t { top: -2px; left: 50%; transform: translateX(-50%); }
.on-hr-b { bottom: -2px; left: 50%; transform: translateX(-50%); }
.on-hr-l { left: -6px; top: 50%; transform: translateY(-50%); }
.on-hr-r { right: -6px; top: 50%; transform: translateY(-50%); }
.on-face { position: absolute; inset: 23.6%; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; text-align: center; }
.on-face small { display: block; font-size: 13px; color: var(--nh-muted); }
.on-face strong { display: block; margin-top: 4px; font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.5vw, 38px); line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.on-face span { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 99px; background: var(--accent-tint); color: var(--accent); font-family: var(--f-display); font-weight: 600; font-size: 13.5px; }
.on-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13.5px; color: var(--ink-2); }
.on-legend span { display: inline-flex; align-items: center; gap: 7px; }
.on-legend i { width: 12px; height: 12px; border-radius: 4px; }
.k-sleep { background: #DCE1EC; } .k-work { background: #B9C3DA; } .k-cls { background: var(--accent); }
/* wide screens: the week is a list of seven rows beside the dial */
.on-wk { list-style: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.on-wk li { display: grid; grid-template-columns: 38px 10px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); transition: background-color .3s, border-color .3s; }
.on-wk small { font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--nh-muted); }
.on-wk i { width: 10px; height: 10px; border-radius: 50%; background: #CFD6E4; }
.on-wk b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.on-wk .live { background: var(--accent-tint); border-color: var(--accent-tint2); } .on-wk .live i { background: var(--accent); } .on-wk .live b { color: var(--ink); }
.on-wk .deep { background: var(--ink); border-color: var(--ink); } .on-wk .deep i { background: #F6A283; } .on-wk .deep b { color: #fff; } .on-wk .deep small { color: #A3AAC2; }
.on-wk .mock { background: #E8F5EE; border-color: #BFE3CE; } .on-wk .mock i { background: var(--nh-green); } .on-wk .mock b { color: var(--ink); }

/* ---------- plans: the value receipt (owner picked A) ---------- */
.on-pl { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; align-items: start; }
.on-rc { position: relative; padding: 26px 30px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.on-rc::before, .on-rc::after { content: ""; position: absolute; bottom: 104px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--line); }
.on-rc::before { left: -15px; } .on-rc::after { right: -15px; }
.on-rc-h { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1.5px dashed var(--line-2); }
.on-rc-h h3 { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--ink); }
.on-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--bg-alt); }
.on-seg button { padding: 8px 14px; border-radius: 9px; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.on-seg button.is-on { background: var(--ink); color: #fff; }
.on-seg button:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 2px; }
.on-ln { list-style: none; }
.on-ln li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 15px; transition: opacity .3s; }
.on-ln i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.on-ln svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.on-ln b { font-weight: 600; color: var(--ink); }
.on-ln small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--nh-muted); }
.on-qty { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.on-ln em { font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: 12.5px; padding: 4px 10px; border-radius: 99px; background: #E8F5EE; color: var(--nh-green); white-space: nowrap; }
#plans[data-plan="dsa"] [data-full] { opacity: .42; }
#plans[data-plan="dsa"] [data-full] b { text-decoration: line-through; text-decoration-color: rgba(207, 64, 32, .6); }
#plans[data-plan="dsa"] [data-full] em { background: var(--bg-alt); color: var(--nh-muted); }
.on-tot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 6px; padding-top: 20px; border-top: 1.5px dashed var(--line-2); }
.on-tot small { display: block; font-size: 14px; color: var(--ink-2); }
.on-tot b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--ink); }
.on-tot-r { text-align: right; }
.on-tot-r s { display: block; font-size: 17px; color: var(--ink-2); text-decoration-color: rgba(207, 64, 32, .7); text-decoration-thickness: 2px; }
.on-tot-r strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.on-save { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: #E8F5EE; color: var(--nh-green); font-size: 14.5px; }
.on-save b { font-family: var(--f-display); }
.on-pl-side { display: grid; gap: 14px; }
.on-unit { position: relative; overflow: hidden; padding: 22px; border-radius: 22px; background: var(--ink); color: #fff; }
.on-unit::before { content: ""; position: absolute; right: -90px; top: -110px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 179, 113, .35), transparent); pointer-events: none; }
.on-unit > * { position: relative; }
.on-unit-k { font-size: 13.5px; color: #A3AAC2; }
.on-unit-n strong { display: block; margin-top: 4px; font-family: var(--f-display); font-weight: 700; font-size: 54px; line-height: 1; letter-spacing: -.03em; color: #7FD8A4; }
.on-unit-n span { display: block; margin-top: 6px; font-size: 14.5px; color: #C9CEDD; }
.on-units { list-style: none; margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.on-units li { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.on-units b { display: block; font-family: var(--f-display); font-size: 18px; color: #fff; }
.on-units span { font-size: 12px; color: #A3AAC2; }
.on-promise { padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.on-promise h3 { margin-bottom: 10px; font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.on-list { list-style: none; display: grid; gap: 9px; }
.on-list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.on-list li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #E8F5EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/11px no-repeat; }
.on-pl-go { width: 100%; height: 56px; font-size: 16.5px; }

@media (max-width: 1100px) {
  .on-week, .on-pl { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* narrower screens: the week goes back to a strip of seven under the dial */
  .on-wk { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .on-wk li { grid-template-columns: none; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; }
  .on-wk small { font-size: 12.5px; }
  .on-wk b { font-size: 12px; text-align: center; }
  .on-pl-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .on-pl-go { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .on-wk { gap: 5px; }
  .on-wk li { padding: 8px 2px; }
  .on-wk b { font-size: 10.5px; }
  .on-rc { padding: 20px 18px; }
  .on-rc-h { flex-wrap: wrap; }
  .on-ln li { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .on-qty { grid-column: 2; grid-row: 2; }
  .on-ln em { grid-column: 3; grid-row: 1 / 3; }
  .on-tot-r strong { font-size: 38px; }
  .on-save { flex-direction: column; align-items: flex-start; }
  .on-pl-side { grid-template-columns: minmax(0, 1fr); }
  .on-rc::before, .on-rc::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .on-arc, .on-pin, .on-ln li, .on-wk li { transition: none; }
}

/* ==========================================================
   Alumni rows, shared by the campus page (#alumni) and the online page (#placed); written by
   tools/gen_alumni.py from the owner's photos. Four or more cards move: the list is drawn as often
   as it takes to cover any screen, the row pauses under the pointer or keyboard focus and stands
   still for reduced motion. Fewer cards stand still, centred (.is-still). Campus cards are white
   with the details on hover; the online page is a dark band of offer tickets (.al--dark, .al-tk)
   with the details always shown. A card shows role, company and CTC only when the owner has sent
   them; a CTC is pinned to the photo ring as a green stamp, the loudest thing on the card.
   ========================================================== */
.al { padding: var(--nh-section) 0; background: #fff; overflow: hidden; }
.al-marquee {
  margin-top: 44px; 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);
}
.al-track { list-style: none; margin: 0; padding: 12px 20px 12px 0; display: flex; gap: 20px; width: max-content; animation: al-slide var(--al-dur, 40s) linear infinite; }
.al-marquee:hover .al-track, .al-marquee:focus-within .al-track { animation-play-state: paused; }
@keyframes al-slide { to { transform: translateX(-50%); } }

.al-p { flex: none; width: 236px; }
.al-p figure {
  margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 18px 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line);
  transition: border-color .25s, transform .3s var(--ease-out);
}
.al-p:hover figure { border-color: var(--line-2); transform: translateY(-4px); }
/* the photo sits in a brand ring, like a story ring */
.al-ring { position: relative; display: block; padding: 3px; border-radius: 50%; background: conic-gradient(from 200deg, var(--accent), #E8A33D, var(--accent)); }
.al-ph { position: relative; display: block; width: 150px; height: 150px; border-radius: 50%; border: 4px solid #fff; overflow: hidden; background: #fff; }
.al-ph img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.al-p figcaption { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.al-p figcaption b { font-family: var(--f-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.al-batch { font-family: var(--f-mono); font-size: 12.5px; color: var(--nh-muted); }
.al-job { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.al-p figcaption .al-job b { display: inline; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); }
/* the CTC stamp: green, on the ring's lower edge, cut out of it by a white border. Every ring keeps
   room for it, so the names line up whether a card has a stamp or not. */
.al-ring { margin-bottom: 16px; }
.al-tag {
  position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); z-index: 1;
  display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap;
  padding: 6px 14px 7px; border-radius: 99px; border: 3px solid #fff; background: var(--nh-green); color: #fff;
  font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .06em;
}
.al-tag b { font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: -.01em; }
.al-q { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--bg-alt); font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: left; }

/* hover or keyboard focus on the photo: LinkedIn, company, role and CTC over it */
.al-link { display: block; border-radius: 50%; text-decoration: none; }
.al-link:focus-visible { outline: 3px solid var(--nh-green-ring); outline-offset: 4px; }
.al-over {
  position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 14px; text-align: center; background: rgba(20, 26, 46, .9); color: #fff;
  opacity: 0; transform: scale(.94); transition: opacity .25s, transform .3s var(--ease-out); pointer-events: none;
}
.al-over b { font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1.25; }
.al-over span { font-size: 12px; line-height: 1.3; color: #C9CEDD; }
.al-in { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 3px; border-radius: 8px; background: #0A66C2; color: #fff; }
.al-in svg { width: 15px; height: 15px; }
.al-p.has-card:hover .al-over, .al-link:focus-visible .al-over { opacity: 1; transform: none; }
.al-p.has-card:hover .al-ring { background: #0A66C2; }
.al-hint { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--nh-muted); }

/* a short row: no loop, no fade, centred; on a phone it scrolls sideways */
.al-marquee.is-still { -webkit-mask-image: none; mask-image: none; }
.al-marquee.is-still .al-track { animation: none; width: auto; justify-content: center; padding: 12px 20px; }

/* the online page: a dark band of offer tickets. Photo, name and batch above a tear line; role,
   company and the LinkedIn link below it. The whole ticket links to the profile. */
.al--dark { background: var(--ink); }
.al--dark .on-head h2 { color: #fff; }
.al--dark .on-head .nh-or { color: #F0714A; }  /* the brand orange, lifted for the dark ground */
.al--dark .on-head p { color: #AEB5CC; }
.al-tk-li { flex: none; width: 280px; }
.al-tk {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 22px 18px; border-radius: 22px; background: #1B2238; border: 1px solid #2A3350; color: #fff; text-decoration: none;
  transition: border-color .25s, transform .3s var(--ease-out);
}
a.al-tk:hover { border-color: rgba(240, 113, 74, .75); transform: translateY(-6px); }
a.al-tk:focus-visible { outline: 3px solid var(--nh-green-ring); outline-offset: 3px; }
.al-tk .al-ph { width: 128px; height: 128px; border-color: #1B2238; background: #1B2238; }
.al-tk .al-tag { border-color: #1B2238; }
a.al-tk:hover .al-ring { background: #0A66C2; }
.al-tk-who { display: flex; flex-direction: column; gap: 3px; }
.al-tk-who b { font-family: var(--f-display); font-weight: 600; font-size: 19px; color: #fff; }
.al-tk-who span { font-family: var(--f-mono); font-size: 12.5px; color: #8F97B3; }
/* the tear line, notched at both edges like a ticket stub */
.al-tk-cut { position: relative; align-self: stretch; margin: 20px -22px 18px; border-top: 2px dashed #323B5C; }
.al-tk-cut::before, .al-tk-cut::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); }
.al-tk-cut::before { left: -11px; }
.al-tk-cut::after { right: -11px; }
.al-tk-job { display: flex; flex-direction: column; gap: 4px; }
.al-tk-job span { font-size: 13.5px; color: #AEB5CC; }
.al-tk-job strong { font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.al-tk-in { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #C9CEDD; transition: color .2s; }
.al-tk-in i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #0A66C2; color: #fff; }
.al-tk-in i svg { width: 13px; height: 13px; }
a.al-tk:hover .al-tk-in { color: #fff; }
.al-cta { margin: 34px 0 0; padding: 0 var(--nh-gutter); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; text-align: center; }
.al-cta span { font-size: 15.5px; color: var(--ink-2); }
.al--dark .al-cta span { color: #C9CEDD; }

@media (max-width: 720px) {
  .al-marquee { margin-top: 30px; }
  .al-p { width: 200px; }
  .al-ph { width: 124px; height: 124px; }
  .al-tag { padding: 5px 12px 6px; }
  .al-tag b { font-size: 16px; }
  .al-marquee.is-still { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .al-marquee.is-still::-webkit-scrollbar { display: none; }
  .al-marquee.is-still .al-track { width: max-content; justify-content: flex-start; }
  .al-marquee.is-still .al-p { scroll-snap-align: center; }
  .al-tk-li { width: 250px; }
  .al-tk .al-ph { width: 112px; height: 112px; }
  .al-tk-job strong { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  /* no movement: the row scrolls by hand and the copy used for the loop is hidden */
  .al-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .al-track { animation: none; }
  .al-track > [aria-hidden="true"] { display: none; }
  .al-p figure, .al-over, .al-tk { transition: none; }
}