/* ============================================================
   Case Study 1 — editorial chaptered layout
   (kicker + display heading, full-bleed statement bands,
   meta grid, numbered insight rows, big stat numerals)
   Scoped to this page only.
   ============================================================ */

/* full-bleed bands use 100vw — clip the scrollbar-width overflow */
body { overflow-x: hidden; }

/* ---- chapter rhythm ---- */
.ncs-chapter { margin-top: 128px; }
.ncs-chapter.tight { margin-top: 88px; }

/* ---- kicker label (small caps + dot) ---- */
.ncs-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}
.ncs-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text); flex: none;
}

/* ---- display headings ---- */
.ncs-h2, .cs-h2 {
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.12;
  margin: 0 0 28px;
}
.ncs-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: #3c3c42; max-width: 760px;
}

/* ---- hero ---- */
.ncs-hero-head { max-width: var(--maxw); margin: 56px auto 36px; padding: 0 24px; }
.ncs-hero-head .ncs-kicker { margin-bottom: 0; }

/* ---- overview: meta left, lead right ---- */
.ncs-overview { display: grid; grid-template-columns: 1fr 2.1fr; gap: 140px; align-items: start; }
.ncs-overview .ncs-meta { order: 1; }
.ncs-overview .ncs-overview-lead { order: 2; }
.ncs-overview-lead {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.6; font-weight: 500; letter-spacing: -.005em;
}
.ncs-meta { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.ncs-meta .k {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.ncs-meta .v { font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
@media (max-width: 800px) { .ncs-overview { grid-template-columns: 1fr; gap: 40px; } }

/* ---- full-bleed statement band ---- */
.ncs-band {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--bg-alt);
  padding: 96px 24px;
  margin-top: 128px;
}
.ncs-band .inner { max-width: 900px; margin: 0 auto; text-align: center; }
.ncs-band .ncs-kicker { justify-content: center; margin-bottom: 24px; }
.ncs-band .statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.3;
}

/* ---- numbered insight rows ---- */
.ncs-insights { margin-top: 12px; }
.ncs-insight {
  display: grid; grid-template-columns: 72px 260px 1fr;
  gap: 24px; align-items: start;
  padding: 32px 0; border-top: 1px solid var(--border);
}
.ncs-insight:last-child { border-bottom: 1px solid var(--border); }
.ncs-insight .n {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 700; line-height: 1;
}
.ncs-insight .t {
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; padding-top: 8px;
}
.ncs-insight ul { list-style: none; padding: 0; margin: 0; }
.ncs-insight li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 1.05rem; }
.ncs-insight li:last-child { margin-bottom: 0; }
.ncs-insight li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
@media (max-width: 760px) {
  .ncs-insight { grid-template-columns: 56px 1fr; }
  .ncs-insight ul { grid-column: 2; }
}

/* ---- big quote restyle (left-aligned, accent bar) ---- */
.cs-quote { margin: 80px 0; max-width: 880px; text-align: left; }
.cs-quote .q {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.35;
}
.cs-quote .cite {
  text-align: left; padding-left: 32px; color: var(--muted);
  font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
  margin-top: 22px;
}

/* ---- giant stat numerals ---- */
.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.cs-stats.two { grid-template-columns: repeat(2, 1fr); }
.cs-stat { text-align: center; }
.cs-stat .big {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 5rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1;
  margin-bottom: 14px;
}
.cs-stat h4 {
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text); margin-bottom: 10px;
}
.cs-stat p { color: var(--muted); font-size: .98rem; max-width: 280px; margin: 0 auto; }
@media (max-width: 760px) { .cs-stats, .cs-stats.two { grid-template-columns: 1fr; gap: 44px; } }

/* ---- phase rail ---- */
.cs-phases {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: 128px 0 20px;
}
.cs-phase {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 20px;
}
.cs-phase .pn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--muted);
  font-size: .75rem;
}
.cs-phase.active { color: var(--text-inverse); background: var(--bg-dark); border-color: var(--bg-dark); }
.cs-phase.active .pn { background: rgba(255,255,255,.16); color: var(--text-inverse); }

/* ---- objective cards ---- */
.cs-obj-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.cs-obj-card {
  background: var(--bg-alt); border-radius: 20px;
  padding: 40px 36px; min-height: 240px;
  display: flex; flex-direction: column;
}
.cs-obj-card .on {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: auto;
}
.cs-obj-card h3 { font-size: 1.9rem; font-weight: 700; margin: 40px 0 10px; }
.cs-obj-card p { font-size: 1.02rem; color: #3c3c42; }
@media (max-width: 820px) { .cs-obj-wrap { grid-template-columns: 1fr; } .cs-obj-card { min-height: auto; } }

/* ---- section-level body copy ---- */
.cs-body { max-width: 760px; }

/* ---- split screenshots on solid panels, zigzag text/image ---- */
.ncs-shot {
  background: var(--bg-alt); border-radius: 24px;
  padding: 40px 36px;
}
.ncs-shot .cap {
  text-align: center;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 22px;
}
.ncs-shot img { width: 100%; border-radius: 12px; display: block; box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.cs-split .media img { border: none; }
.cs-split { margin-top: 72px; }
/* true zigzag: 2nd split puts text left, image right */
.cs-split.rev .txt { order: 1; }
.cs-split.rev .media { order: 2; }

/* ---- square corners: guidelines boards + legacy tools landscape ---- */
.cs-guides img, .ncs-flat img { border-radius: 0 !important; }

/* ---- Before tools: flow arrows + tighter title/image spacing ---- */
.cs-tools-grid { gap: 30px; }
.cs-tool { position: relative; }
.cs-tool h4 {
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 2.2em; margin-bottom: 12px;
}
.cs-tool:not(:last-child)::after {
  content: "";
  position: absolute; right: -24px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2 9 H15 M10 4 L16 9 L10 14' fill='none' stroke='%236b6b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
@media (max-width: 900px) { .cs-tool:not(:last-child)::after { display: none; } }

/* ---- chat card: previews sized proportionally to source design ---- */
.cs-chatcard { background: #f7f7f5; }
.cs-chat-imgs { align-items: flex-start; gap: 18px; }
.cs-chat-imgs img { width: 100%; }
.cs-chat-imgs img.pv { box-shadow: none; }

/* ---- student view demo: narrower, centered to balance the chat card ---- */
.ncs-student-view { max-width: 720px; margin: 72px auto 56px; }
.ncs-student-view img { border-radius: 24px; }
.ncs-student-view figcaption { margin-top: 20px; }

/* ---- In-Class panes: single hi-res shot + switch-mode badge ---- */
.ncs-switch { position: relative; gap: 0; }
.ncs-switch .pane { display: flex; flex-direction: column; }
.ncs-switch .pane img { margin-bottom: 0; margin-top: auto; }
.ncs-switch-badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 2; pointer-events: none;
}
.ncs-switch-badge span {
  background: #4f46e5; color: #fff;
  font-family: var(--font-display);
  font-weight: 700; font-size: .82rem; line-height: 1.2;
  text-align: center; padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(79, 70, 229, .35);
}
@media (max-width: 820px) { .ncs-switch-badge { display: none; } }

/* ---- "After" panel: tall table left, dashboard + notes right ---- */
.ncs-after2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: start; }
.ncs-after2 .tbl { width: 100%; border-radius: 12px; display: block; }
.ncs-after2 .side { display: flex; flex-direction: column; gap: 32px; }
.ncs-after2 .side > img { width: 100%; border-radius: 12px; display: block; }
@media (max-width: 820px) { .ncs-after2 { grid-template-columns: 1fr; gap: 32px; } }
.ncs-after2 .blk h4 {
  font-size: .82rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 12px;
}
.ncs-after2 .blk p { color: #16161a; font-size: 1rem; line-height: 1.65; }
.ncs-after2 .blk ul { list-style: none; padding: 0; margin-top: 14px; }
.ncs-after2 .blk li {
  position: relative; padding-left: 22px;
  color: #16161a; font-size: 1rem; margin-bottom: 8px;
}
.ncs-after2 .blk li::before {
  content: "◆"; position: absolute; left: 0; top: 1px;
  font-size: .7rem; color: var(--muted);
}

/* ---- next case study band ---- */
.ncs-next {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--bg-dark); color: var(--text-inverse);
  padding: 110px 24px; margin-top: 128px;
}
.ncs-next .inner { max-width: var(--maxw); margin: 0 auto; }
.ncs-next .ncs-kicker { color: rgba(255,255,255,.6); }
.ncs-next .ncs-kicker::before { background: var(--text-inverse); }
.ncs-next h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 700;
  letter-spacing: -.02em; max-width: 760px; margin-bottom: 32px;
}
.ncs-next .link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 1.02rem;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  padding: 14px 28px; transition: background .25s ease, color .25s ease;
}
.ncs-next .link:hover { background: var(--text-inverse); color: var(--bg-dark); }

/* ============================================================
   Adapters: legacy case-study components -> cs1 editorial look
   ============================================================ */
.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.12;
  margin: 120px 0 28px; text-align: left;
}
.prose h3 { font-size: 1.35rem; margin: 56px 0 14px; }
.prose p, .prose li { font-size: 1.02rem; }

.stat-row { gap: 40px; margin: 56px 0; }
.stat { text-align: center; border: none; background: none; padding: 0; }
.stat .num {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  letter-spacing: -.03em; line-height: 1; color: var(--text);
}
.stat .lbl {
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; margin-top: 14px;
}
.stat .sub { color: var(--muted); }

.quote {
  border: none; background: none;
  margin: 88px auto; max-width: 880px; text-align: center; padding: 0;
}
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 700; font-style: normal; letter-spacing: -.015em; line-height: 1.35;
}
.quote cite {
  display: block; color: var(--muted); font-style: normal;
  font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 20px;
}

.divider-banner {
  background: var(--bg-dark); color: var(--text-inverse);
  border-radius: 24px; padding: 72px 48px; margin: 128px 0 0;
}
.divider-banner h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.02em; }

/* ---- tighten hero -> overview spacing ---- */
.cs-hero { padding-bottom: 8px; }
.ncs-chapter.ncs-overview { margin-top: 28px; }

/* ---- split rows support video media ---- */
.cs-split .media video { width: 100%; border-radius: 12px; display: block; }

/* ---- numbered feature row: text left, captioned video right ---- */
.ncs-feature {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; align-items: center; margin: 96px 0 24px;
}
.ncs-feature .txt { padding-right: 48px; }
.ncs-feature .txt { padding-top: 0; }
.ncs-feature .fnum {
  font-family: var(--font-display);
  font-size: 3.4rem; font-weight: 700; line-height: 1;
  text-align: center; margin-bottom: 28px;
  background: linear-gradient(180deg, #232328 0%, #c4c4cb 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ncs-feature h3 { font-size: 1.45rem; margin-bottom: 14px; }
.ncs-feature p { color: #3a3a40; font-size: 1.02rem; }
.ncs-feature figure { margin: 0; }
.ncs-feature video { width: 100%; border-radius: 12px; display: block; }
.ncs-feature figcaption { font-size: .95rem; color: var(--text); margin-top: 14px; }
@media (max-width: 800px) { .ncs-feature { grid-template-columns: 1fr; gap: 28px; } }

/* ---- feature row, image-first variant ---- */
.ncs-feature.rev .txt { padding-right: 0; padding-left: 48px; }
.ncs-feature .media img { width: 100%; border-radius: 12px; display: block; }

/* ---- small interaction tiles ---- */
.ncs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ncs-tiles figure { margin: 0; }
.ncs-tiles img { width: 100%; border-radius: 16px; display: block; }
.ncs-tiles figcaption { font-size: .92rem; color: var(--text); margin-top: 12px; }
@media (max-width: 800px) { .ncs-tiles { grid-template-columns: repeat(3, 1fr); } }

/* ---- feature row: bullet list styling ---- */
.ncs-feature .txt ul { list-style: none; padding: 0; margin-top: 16px; }
.ncs-feature .txt li {
  position: relative; padding-left: 18px;
  color: #3a3a40; font-size: 1.02rem; margin-bottom: 12px;
}
.ncs-feature .txt li::before { content: "\2022"; position: absolute; left: 0; }

/* ---- figure with caption above, on a gray panel ---- */
.ncs-cap-top {
  margin: 48px 0;
  background: var(--bg-alt); border-radius: 24px;
  padding: 48px 44px;
}
.ncs-cap-top figcaption {
  text-align: center; font-weight: 600; color: var(--text);
  font-size: 1.15rem; margin: 0 0 28px;
}
.ncs-cap-top img { border: none; border-radius: 12px; }

/* ---- impact chart matrix: labels left, 3 charts per row, on tinted panel ---- */
.ncs-charts {
  background: #f2f5f8; border-radius: 24px;
  padding: 48px 44px; margin: 48px 0;
  display: flex; flex-direction: column; gap: 36px;
}
.ncs-charts .row {
  display: grid; grid-template-columns: 1fr 2.4fr;
  gap: 44px; align-items: center;
}
.ncs-charts .lbl { font-size: 1.05rem; color: var(--text); }
.ncs-charts .imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ncs-charts .imgs img {
  width: 100%; display: block;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
@media (max-width: 820px) {
  .ncs-charts .row { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- user feedback panel: table + takeaway card + quotes ---- */
.ncs-panel-title {
  text-align: center; font-weight: 700; font-size: 1.1rem;
  margin: 72px 0 20px;
}
.ncs-feedback {
  background: #f2f4f7; border-radius: 24px;
  padding: 40px 40px 32px;
}
.ncs-feedback .head { font-weight: 700; font-size: 1.05rem; margin-bottom: 20px; }
.ncs-feedback .cols {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 24px; align-items: stretch;
}
.ncs-feedback .cols img {
  width: 100%; display: block; border-radius: 12px; align-self: start;
}
.ncs-feedback .takeaway {
  background: #f2edfa; border-radius: 12px; padding: 28px 26px;
}
.ncs-feedback .takeaway .k {
  color: #8f2fe8; font-weight: 700; font-size: 1.02rem; margin-bottom: 12px;
}
.ncs-feedback .takeaway p:last-child { color: #26262b; font-size: .98rem; line-height: 1.6; }
.ncs-feedback .quotes { margin-top: 28px; }
.ncs-feedback .quotes blockquote { margin: 0 0 18px; }
.ncs-feedback .quotes p {
  font-style: italic; color: var(--muted); font-size: 1rem; line-height: 1.65;
}
.ncs-feedback .quotes b { color: var(--text); }
.ncs-feedback .quotes cite {
  display: block; font-style: italic; color: var(--muted);
  font-size: .95rem; margin-top: 4px;
}
@media (max-width: 820px) { .ncs-feedback .cols { grid-template-columns: 1fr; } }

/* ---- device mockups: desktop monitor (small) vs teaching display (large) ---- */
.ncs-devices {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: 56px; align-items: end; margin: 48px 0;
}
.ncs-devices .dev { margin: 0; text-align: center; }
.ncs-devices .screen {
  background: #15151a; border-radius: 12px; padding: 10px;
  box-shadow: 0 12px 32px rgba(16,16,20,.18);
}
.ncs-devices .screen img { width: 100%; display: block; border-radius: 6px; }
/* desktop monitor: slim bezel + neck + base */
.ncs-devices .monitor .stand {
  width: 12%; height: 34px; margin: 0 auto;
  background: linear-gradient(180deg, #3a3a42, #26262c);
}
.ncs-devices .monitor .base {
  width: 38%; height: 9px; margin: 0 auto;
  background: #2c2c33; border-radius: 5px;
}
/* teaching display: thicker bezel + two floor legs */
.ncs-devices .bigscreen .screen { padding: 16px; border-radius: 14px; }
.ncs-devices .bigscreen .legs {
  position: relative; height: 44px; width: 64%; margin: 0 auto;
}
.ncs-devices .bigscreen .legs::before,
.ncs-devices .bigscreen .legs::after {
  content: ""; position: absolute; top: 0; bottom: 6px;
  width: 12px; background: #2c2c33; border-radius: 0 0 4px 4px;
}
.ncs-devices .bigscreen .legs::before { left: 0; }
.ncs-devices .bigscreen .legs::after { right: 0; }
.ncs-devices figcaption { font-size: .92rem; color: var(--muted); margin-top: 16px; }
@media (max-width: 820px) { .ncs-devices { grid-template-columns: 1fr; gap: 40px; } }

/* ---- framework design: capability/structure cards + side considerations ---- */
.ncs-framework {
  display: grid; grid-template-columns: 2.3fr 1fr;
  gap: 48px; align-items: start; margin: 40px 0;
}
.ncs-framework .main { background: #f2f4f8; border-radius: 24px; padding: 32px; }
.ncs-framework .card {
  background: #fff; border-radius: 20px; padding: 32px 36px;
  box-shadow: 0 2px 10px rgba(16,16,20,.04);
}
.ncs-framework .ct {
  color: #2f6bff; font-weight: 700; font-size: .92rem;
  letter-spacing: .08em; text-transform: uppercase;
  text-align: center; margin-bottom: 28px;
}
.ncs-framework .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.ncs-framework .item .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; background: #e8efff;
  margin-bottom: 14px;
}
.ncs-framework .item .ic svg { width: 26px; height: 26px; }
.ncs-framework .item .lb { font-weight: 700; font-size: .98rem; }
.ncs-framework .arrow { text-align: center; padding: 18px 0; }
.ncs-framework .imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ncs-framework .imgs img { width: 100%; border-radius: 8px; display: block; }
.ncs-framework .side { padding-top: 24px; }
.ncs-framework .side .ct { text-align: left; }
.ncs-framework .side .itm { margin-bottom: 24px; }
.ncs-framework .side .itm h5 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.ncs-framework .side .itm p { color: var(--muted); font-size: .92rem; line-height: 1.6; }
@media (max-width: 900px) {
  .ncs-framework { grid-template-columns: 1fr; }
  .ncs-framework .items { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ---- design iteration: V1->V4 step cards with arrows ---- */
.ncs-iter-label {
  text-align: center; color: #2f6bff;
  font-weight: 700; font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase;
  margin: 48px 0 24px;
}
.ncs-iter {
  display: grid;
  grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr;
  gap: 6px; align-items: stretch;
}
.ncs-iter .step {
  background: #f7f8fa; border-radius: 16px;
  padding: 26px 22px; display: flex; flex-direction: column;
}
.ncs-iter h5 { font-size: 1.08rem; font-weight: 700; margin-bottom: 12px; }
.ncs-iter h5 .v { color: #2f6bff; margin-right: 6px; }
.ncs-iter .d { font-size: .95rem; color: #3a3a40; line-height: 1.55; min-height: 4.6em; }
.ncs-iter img { width: 100%; border-radius: 8px; display: block; margin: 4px 0 18px; }
.ncs-iter .note { font-style: italic; color: #3a3a40; font-size: .95rem; line-height: 1.6; }
.ncs-iter .sep { align-self: center; color: #9a9aa2; font-size: 1.5rem; text-align: center; }
@media (max-width: 900px) {
  .ncs-iter { grid-template-columns: 1fr; }
  .ncs-iter .sep { transform: rotate(90deg); padding: 4px 0; }
  .ncs-iter .d { min-height: 0; }
}

/* ---- NPS before/after strip ---- */
.ncs-nps {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(24px, 5vw, 64px); text-align: center;
  margin: 8px 0 56px;
}
.ncs-nps .num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.ncs-nps .before .num { color: #c5c5cc; }
.ncs-nps .after .num { color: #2f6bff; }
.ncs-nps .gain .num { color: #16c15b; }
.ncs-nps .lb { color: var(--muted); font-size: .95rem; margin-top: 12px; line-height: 1.4; }
.ncs-nps .gain .lb { color: var(--text); }
.ncs-nps .arr { color: #9a9aa2; font-size: 1.8rem; }
.ncs-nps .vdiv { width: 1px; height: 84px; background: var(--border); }
@media (max-width: 700px) {
  .ncs-nps { flex-wrap: wrap; gap: 24px; }
  .ncs-nps .vdiv { display: none; }
}

/* ---- validation methods panel ---- */
.ncs-methods {
  background: #f7f8fa; border-radius: 24px;
  padding: 44px 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
}
.ncs-methods h4 { font-size: 1.15rem; font-weight: 700; margin-bottom: 18px; }
.ncs-methods img {
  width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover;
  border-radius: 12px; display: block; margin-bottom: 18px;
}
.ncs-methods p { color: var(--muted); font-size: .98rem; line-height: 1.65; }
@media (max-width: 820px) { .ncs-methods { grid-template-columns: 1fr; } }

/* ---- learning flow: 4 phase columns with numbered circles + arrows ---- */
.ncs-flow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px; align-items: start; margin: 40px 0;
}
.ncs-flow .col { position: relative; }
.ncs-flow .cnum {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #2f7bfb; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  margin: 0 auto 12px;
}
.ncs-flow .col:not(:last-child)::after {
  content: "\2192"; position: absolute;
  top: 6px; right: -20px;
  color: #9a9aa2; font-size: 1.25rem;
}
.ncs-flow .phase {
  background: #2f7bfb; color: #fff;
  border-radius: 14px; text-align: center;
  padding: 13px 12px; margin-bottom: 10px;
  box-shadow: 0 6px 16px rgba(47, 123, 251, .22);
}
.ncs-flow .phase b { display: block; font-size: .98rem; margin-bottom: 2px; }
.ncs-flow .phase span { font-size: .82rem; opacity: .92; }
.ncs-flow .itm {
  background: #f7f8fa; border-radius: 10px;
  padding: 10px 13px; margin-bottom: 8px;
}
.ncs-flow .itm b { display: block; font-size: .88rem; margin-bottom: 2px; }
.ncs-flow .itm p { color: var(--muted); font-size: .8rem; line-height: 1.45; }
@media (max-width: 900px) {
  .ncs-flow { grid-template-columns: 1fr 1fr; }
  .ncs-flow .col:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) { .ncs-flow { grid-template-columns: 1fr; } }

/* ---- system architecture diagram: narrower, centered ---- */
.ncs-arch { max-width: 78%; margin-left: auto; margin-right: auto; }
@media (max-width: 800px) { .ncs-arch { max-width: 100%; } }

/* ---- numbered key cards (uppercase label + one-liner) ---- */
.ncs-keys {
  display: flex; flex-direction: column;
  gap: 18px; margin: 40px 0; max-width: 820px;
}
.ncs-keys .k {
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 24px 30px;
}
.ncs-keys .h {
  display: flex; gap: 8px; align-items: baseline;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.ncs-keys .h span::after { content: "."; }
.ncs-keys .k p:last-child { font-size: .98rem; color: var(--text); line-height: 1.6; }

/* ---- design goals: centered icon cards ---- */
.ncs-goals {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin: 40px 0;
}
.ncs-goals .g {
  background: #f9f9f8; border-radius: 16px;
  padding: 36px 26px; text-align: center;
}
.ncs-goals .ic { display: inline-block; width: 30px; height: 30px; color: var(--text); margin-bottom: 14px; }
.ncs-goals .ic svg { width: 100%; height: 100%; }
.ncs-goals h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.ncs-goals p { color: var(--muted); font-size: .95rem; line-height: 1.55; }
@media (max-width: 700px) { .ncs-goals { grid-template-columns: 1fr; } }

.ncs-goals .tag {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}

/* ---- user research data: fixed-height panel + scrollable evidence ---- */
.ncs-research-data {
  margin-top: 48px; margin-bottom: 96px;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px;
  height: 680px;
}
.ncs-research-data .txt { overflow-y: auto; padding-right: 4px; }
.ncs-research-data .txt h3 { font-size: 1.4rem; margin-bottom: 22px; }
.ncs-research-data .theme {
  background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 24px 26px; margin-bottom: 18px;
}
.ncs-research-data .theme .tt {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.ncs-research-data .theme p:not(.tt) { font-size: .95rem; color: #3a3a40; line-height: 1.6; margin-bottom: 10px; }
.ncs-research-data .theme p:last-child { margin-bottom: 0; }
.ncs-research-data .scrollcol {
  position: relative; min-height: 0;
  background: var(--bg-alt); border-radius: 24px; padding: 24px;
}
.ncs-research-data .scrollarea {
  height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 24px;
  border-radius: 12px; padding-right: 6px;
}
.ncs-research-data .scrollarea figure { margin: 0; background: #fff; border-radius: 12px; padding: 20px; }
.ncs-research-data .scrollarea figcaption {
  text-align: center; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px;
}
.ncs-research-data .scrollarea img { width: 100%; display: block; border-radius: 6px; }
.ncs-research-data .scrollbadge {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: #fff; box-shadow: 0 8px 24px rgba(16,16,20,.16);
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
  pointer-events: none;
}
@media (max-width: 860px) {
  .ncs-research-data { grid-template-columns: 1fr; height: auto; }
  .ncs-research-data .scrollarea { max-height: 520px; }
}

/* ---- figure on gray panel, no border ---- */
.ncs-graybg { background: var(--bg-alt); border-radius: 24px; padding: 36px; }
.ncs-graybg img { border: none; border-radius: 8px; }