/* ═══════════════════════════════════════════════════════════
   NS theme — hand-maintained components and fixes.

   Two kinds of thing live here:

   1. Components for the content & community pages — About, Inter/Final
      eNotes, Market Updates and the whole Forum. These are the pages
      reachable from the front header (nav + mobile drawer) that were still
      on the legacy Bootstrap markup; the views under
      application/views/frontend/ns/ render the classes below.
      (Reviews is not one of them: /review 301s to /feedback, which has its
      own view and its own ns-feedback.css.)

   2. Fixes that apply site-wide and must not be lost when ns-theme.css is
      regenerated — the leftover custom.css collision (§8b) and the
      one-screen home hero (§8d).

   Anything the front header itself needs on small screens lives in
   ns-legacy.css, which loads after this file with a body.ns-theme prefix.

   Everything reuses the tokens and primitives already defined in
   ns-theme.css (--paper, --ink-900, .btn, .phero, .pagesec, .shell, .tl,
   .dlink, .empty, .helpbar …). Only components that genuinely did not
   exist yet live here.

   Every selector is scoped to .ns-theme, same as ns-theme.css, so the
   legacy pages are untouched. This file is hand-maintained — it is NOT
   regenerated from the prototype, so editing it is safe.
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. SHARED: section head, split rows, media frame ---------- */

/* A left-aligned section title with the same rhythm as .sectitle/.secsub,
   but carrying an optional action on the right. */
.ns-theme .csechead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(18px,2vw,28px);
}
.ns-theme .csechead > div{min-width:0}

/* Alternating image / copy rows — About uses three of them. */
.ns-theme .csplit{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;
}
.ns-theme .csplit + .csplit{margin-top:clamp(32px,4.4vw,64px)}
.ns-theme .csplit--flip .csplit__media{order:2}
/* no image on the row (uploads/about not filled in) — one measured column
   rather than a blank frame beside the copy */
.ns-theme .csplit--solo{grid-template-columns:minmax(0,1fr);max-width:74ch}
.ns-theme .csplit h2{font-size:clamp(24px,2.7vw,36px);letter-spacing:-.018em;margin-bottom:14px}
.ns-theme .csplit h2 em{
  font-style:italic;font-weight:700;background:var(--accent-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ns-theme .csplit__body{color:var(--muted);font-size:15.5px;line-height:1.76}
.ns-theme .csplit__body p{margin-bottom:12px}
.ns-theme .csplit__body p:last-child{margin-bottom:0}
.ns-theme .csplit__body ul{margin:0 0 12px;padding-left:20px;list-style:disc}
.ns-theme .csplit__body li{margin-bottom:6px}
.ns-theme .csplit__body a{color:var(--blue-2);font-weight:600}
.ns-theme .csplit__body a:hover{text-decoration:underline}
.ns-theme .csplit__body img{border-radius:var(--r-sm);margin:10px 0}

/* Portrait / photo frame: gold hairline, soft lift, graceful when the file
   is missing (the ::before ground still reads as a deliberate panel). */
.ns-theme .figframe{
  position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);box-shadow:var(--sh-md);
  aspect-ratio:4 / 3;
}
.ns-theme .figframe::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(217,180,92,.30);
}
.ns-theme .figframe img{width:100%;height:100%;object-fit:cover}
.ns-theme .figframe--tall{aspect-ratio:3 / 4}
.ns-theme .figframe--free{aspect-ratio:auto}
.ns-theme .figframe--free img{height:auto}

/* ---------- 2. ABOUT: promise cards + guarantee list ---------- */

.ns-theme .pledges{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;
}

/* Numbered, accent-tinted panel. Same family as .svc but taller copy and no
   arrow, because nothing here is a link. */
.ns-theme .pledge{
  --accent:var(--blue-2);
  position:relative;padding:24px 24px 26px;border-radius:20px;overflow:hidden;
  background:linear-gradient(158deg,
    color-mix(in srgb,var(--accent) 9%,#fff) 0%,
    color-mix(in srgb,var(--accent) 3%,#fff) 52%,
    var(--surface) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
  box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.ns-theme .pledge:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--accent) 60%,transparent),0 4px 14px rgba(12,31,61,.07);
  border-color:color-mix(in srgb,var(--accent) 44%,transparent);
}
.ns-theme .pledge::before{
  content:"";position:absolute;right:-38%;top:-58%;width:112%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 64%);
  opacity:.55;transition:opacity .45s var(--ease);
}
.ns-theme .pledge:hover::before{opacity:1}
.ns-theme .pledge__top{display:flex;align-items:center;gap:12px;position:relative;z-index:2;margin-bottom:12px}
.ns-theme .pledge__ico{
  display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent));
  color:#fff;box-shadow:0 10px 20px -10px color-mix(in srgb,var(--accent) 85%,transparent);
  transition:.4s var(--ease);
}
.ns-theme .pledge__ico svg{width:21px;height:21px}
.ns-theme .pledge:hover .pledge__ico{transform:rotate(-7deg) scale(1.07)}
.ns-theme .pledge h3{
  position:relative;z-index:2;font-size:17.5px;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--accent) 55%,var(--ink-900));
}
.ns-theme .pledge p{position:relative;z-index:2;font-size:13.5px;line-height:1.68;color:var(--muted)}
.ns-theme .pledge p + p{margin-top:9px}
.ns-theme .pledge b{color:var(--text);font-weight:600}

/* ---------- 3. NOTES: pack grid + download rows ---------- */

.ns-theme .ncards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px;
}
.ns-theme .ncard{
  --accent:var(--blue-2);
  position:relative;display:flex;flex-direction:column;gap:14px;
  padding:22px 22px 20px;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(150deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.ns-theme .ncard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease);
}
.ns-theme .ncard:hover{
  transform:translateY(-6px);box-shadow:var(--sh-md);
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
}
.ns-theme .ncard:hover::before{transform:scaleY(1)}
.ns-theme .ncard__ico{
  display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:13px;
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  color:var(--accent);transition:.5s var(--ease);
}
.ns-theme .ncard__ico svg{width:23px;height:23px}
.ns-theme .ncard:hover .ncard__ico{transform:rotate(-8deg) scale(1.06)}
.ns-theme .ncard h3{font-size:17px;line-height:1.32;letter-spacing:-.014em}
.ns-theme .ncard h3 a::after{content:"";position:absolute;inset:0}
.ns-theme .ncard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}
.ns-theme .ncard__n{
  font-family:var(--label);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
.ns-theme .ncard__go{
  display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;
  border:1px solid var(--line-2);color:var(--accent);background:rgba(255,255,255,.6);
  transition:.4s var(--ease);
}
.ns-theme .ncard__go svg{width:16px;height:16px}
.ns-theme .ncard:hover .ncard__go{background:var(--accent);color:#fff;border-color:transparent;transform:translateX(3px)}

/* ---------- 4. MARKET: dated row list ---------- */

.ns-theme .mlist{display:flex;flex-direction:column;gap:10px}
.ns-theme .mrow{
  display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:18px;
  padding:16px 20px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.ns-theme .mrow:hover{transform:translateX(5px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.ns-theme .mrow__date{
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-2);font-variant-numeric:tabular-nums;
}
.ns-theme .mrow h3{font-size:16px;line-height:1.4;letter-spacing:-.01em}
.ns-theme .mrow h3 a{transition:color .3s}
.ns-theme .mrow:hover h3 a{color:var(--blue-2)}
.ns-theme .mrow__go{
  display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;
  border:1px solid var(--line-2);color:var(--blue-2);background:rgba(255,255,255,.6);
  transition:.4s var(--ease);
}
.ns-theme .mrow__go svg{width:16px;height:16px}
.ns-theme .mrow:hover .mrow__go{background:var(--blue-2);color:#fff;border-color:transparent}

/* Long-form body copy coming out of the rich-text editor (market details,
   forum posts, about description). The admin pastes arbitrary HTML, so this
   has to tame tables, images and inline colours without fighting them. */
.ns-theme .prose{font-size:15.5px;line-height:1.78;color:var(--text)}
.ns-theme .prose p{margin-bottom:14px}
.ns-theme .prose h1,.ns-theme .prose h2,.ns-theme .prose h3,
.ns-theme .prose h4,.ns-theme .prose h5,.ns-theme .prose h6{
  margin:26px 0 10px;font-family:var(--display);letter-spacing:-.016em;line-height:1.2;
}
.ns-theme .prose h1{font-size:28px}
.ns-theme .prose h2{font-size:24px}
.ns-theme .prose h3{font-size:20px}
.ns-theme .prose h4,.ns-theme .prose h5,.ns-theme .prose h6{font-size:17px}
.ns-theme .prose ul,.ns-theme .prose ol{margin:0 0 14px;padding-left:22px;list-style:revert}
.ns-theme .prose li{margin-bottom:7px}
.ns-theme .prose a{color:var(--blue-2);font-weight:600;word-break:break-word}
.ns-theme .prose a:hover{text-decoration:underline}
.ns-theme .prose img{height:auto;border-radius:var(--r-sm);margin:12px 0}
.ns-theme .prose blockquote{
  margin:16px 0;padding:14px 18px;border-left:3px solid var(--gold-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;background:rgba(217,180,92,.10);color:var(--muted);
}
.ns-theme .prose blockquote p:last-child{margin-bottom:0}
.ns-theme .prose pre{
  overflow-x:auto;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--ink-900);color:#EDE9E1;font-size:13px;line-height:1.6;
}
.ns-theme .prose code{font-family:var(--num);font-size:.92em}
.ns-theme .prose hr{margin:22px 0;border:0;border-top:1px solid var(--line)}
.ns-theme .prose iframe,.ns-theme .prose video{max-width:100%;border-radius:var(--r-sm)}
/* tables come out of the editor with fixed pixel widths — let them scroll */
.ns-theme .prose > table,.ns-theme .prose .table{display:block;overflow-x:auto;max-width:100%}
.ns-theme .prose table{border-collapse:collapse;font-size:14px}
.ns-theme .prose th,.ns-theme .prose td{border:1px solid var(--line-2);padding:9px 12px;text-align:left}
.ns-theme .prose th{background:var(--surface-2);font-weight:600}

/* ---------- 6. FORUM: categories, threads, sidebar ---------- */

/* two-column shell: threads + a rail. Collapses under 900px. */
.ns-theme .flayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}

/* breadcrumb trail of category / subcategory pills */
.ns-theme .ftrail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
.ns-theme .ftrail a,.ns-theme .ftrail span{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:100px;
  font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.01em;
  border:1px solid var(--line-2);background:rgba(255,255,255,.72);color:var(--muted);
  transition:.35s var(--ease);
}
.ns-theme .ftrail a:hover{border-color:var(--blue-2);color:var(--blue-2);background:#fff;transform:translateY(-2px)}
.ns-theme .ftrail .is-here{background:var(--blue-2);border-color:var(--blue-2);color:#fff}

/* a forum category, with its subcategories inline */
.ns-theme .fcats{display:flex;flex-direction:column;gap:12px}
.ns-theme .fcat{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:18px;align-items:start;
  padding:20px 22px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.ns-theme .fcat:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.ns-theme .fcat__ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:rgba(27,75,150,.10);border:1px solid rgba(27,75,150,.20);color:var(--blue-2);
}
.ns-theme .fcat__ico svg{width:24px;height:24px}
.ns-theme .fcat h3{font-size:18px;letter-spacing:-.014em;margin-bottom:4px}
.ns-theme .fcat h3 a:hover{color:var(--blue-2)}
.ns-theme .fcat__subs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ns-theme .fcat__subs a{
  padding:4px 11px;border-radius:100px;border:1px solid var(--line-2);
  font-family:var(--label);font-weight:600;font-size:11px;color:var(--muted);
  transition:.3s var(--ease);
}
.ns-theme .fcat__subs a:hover{border-color:var(--blue-2);color:var(--blue-2);background:rgba(27,75,150,.07)}
.ns-theme .fcat__side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}

/* count pill used on category rows and thread rows */
.ns-theme .fcount{
  display:inline-flex;align-items:baseline;gap:5px;padding:6px 13px;border-radius:100px;
  background:rgba(27,75,150,.09);border:1px solid rgba(27,75,150,.18);white-space:nowrap;
}
.ns-theme .fcount b{font-family:var(--num);font-weight:700;font-size:14px;color:var(--blue-2);font-variant-numeric:tabular-nums}
.ns-theme .fcount span{font-family:var(--label);font-weight:600;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.ns-theme .fcount--gold{background:rgba(217,180,92,.16);border-color:rgba(217,180,92,.32)}
.ns-theme .fcount--gold b{color:var(--gold-3)}

/* author line: avatar + name + relative time */
.ns-theme .fby{display:flex;align-items:center;gap:9px;min-width:0}
.ns-theme .fby__av{
  display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;overflow:hidden;
  background:linear-gradient(145deg,#2C63B5,#0F2C5C);color:#fff;
  font-family:var(--display);font-size:15px;font-weight:600;line-height:1;
  border:1px solid var(--line);
}
.ns-theme .fby__av img{width:100%;height:100%;object-fit:cover}
.ns-theme .fby__meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.ns-theme .fby__name{
  font-family:var(--label);font-weight:600;font-size:12.5px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ns-theme .fby__name:hover{color:var(--blue-2)}
.ns-theme .fby__time{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ns-theme .fby--lg .fby__av{width:44px;height:44px;font-size:19px}
.ns-theme .fby--lg .fby__name{font-size:14.5px}

/* a discussion row */
.ns-theme .fthreads{display:flex;flex-direction:column;gap:10px}
.ns-theme .fthread{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 20px;align-items:center;
  padding:16px 20px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.ns-theme .fthread:hover{transform:translateX(5px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.ns-theme .fthread h3{font-size:16px;line-height:1.4;letter-spacing:-.01em;margin-bottom:9px}
.ns-theme .fthread h3 a:hover{color:var(--blue-2)}
.ns-theme .fthread__stats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ns-theme .fthread__last{
  grid-column:1 / -1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--faint);
}
.ns-theme .fthread__last a{color:var(--blue-2)}
.ns-theme .fthread__last a:hover{text-decoration:underline}

/* sidebar rail */
.ns-theme .frail{
  position:sticky;top:96px;padding:22px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
}
.ns-theme .frail h2{
  font-family:var(--label);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.ns-theme .frail ol{margin:0;padding:0;list-style:none;counter-reset:frail}
.ns-theme .frail li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.ns-theme .frail li:last-child{border-bottom:0;padding-bottom:0}
.ns-theme .frail li::before{
  counter-increment:frail;content:counter(frail,decimal-leading-zero);
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.1em;
  color:var(--gold-3);padding-top:3px;flex:none;
}
.ns-theme .frail a{font-size:13.5px;line-height:1.55;color:var(--muted);transition:color .3s}
.ns-theme .frail a:hover{color:var(--blue-2)}
.ns-theme .frail__empty{font-size:13px;color:var(--faint);padding-top:12px}

/* ---------- 7. FORUM: single post + replies ---------- */

.ns-theme .fpost{
  padding:clamp(20px,2.4vw,30px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
}
.ns-theme .fpost + .fpost{margin-top:14px}
.ns-theme .fpost--reply{background:linear-gradient(150deg,var(--surface),var(--surface-2))}
.ns-theme .fpost__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.ns-theme .fpost__links{display:flex;gap:14px;flex-wrap:wrap}
.ns-theme .fpost__links a{
  font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--blue-2);
}
.ns-theme .fpost__links a:hover{text-decoration:underline}
.ns-theme .fpost__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:16px;margin-top:18px;border-top:1px solid var(--line);
}

/* like / quote action buttons */
.ns-theme .fact{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:100px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.7);color:var(--muted);
  font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.04em;
  cursor:pointer;transition:.35s var(--ease);
}
.ns-theme .fact svg{width:15px;height:15px}
.ns-theme .fact:hover{border-color:var(--blue-2);color:var(--blue-2);background:#fff;transform:translateY(-2px)}
.ns-theme .fact.is-on{background:rgba(194,69,31,.11);border-color:rgba(194,69,31,.32);color:var(--coral)}
.ns-theme .fact b{font-family:var(--num);font-variant-numeric:tabular-nums}
.ns-theme .fmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* action bar above the thread */
.ns-theme .fbarline{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 20px;margin-bottom:18px;border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);box-shadow:var(--sh-sm);
}
.ns-theme .fbarline p{font-size:14px;color:var(--muted)}
.ns-theme .fbarline b{color:var(--text);font-weight:600}
.ns-theme .fbarline__act{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 8. FORUM: member profile ---------- */

.ns-theme .mprof{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,34px);align-items:center;
  padding:clamp(22px,2.6vw,32px);border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);box-shadow:var(--sh-md);
}
.ns-theme .mprof__av{
  display:grid;place-items:center;width:118px;height:118px;flex:none;border-radius:50%;overflow:hidden;
  background:linear-gradient(145deg,#2C63B5,#0F2C5C);color:#fff;
  font-family:var(--display);font-size:46px;font-weight:600;line-height:1;
  border:1px solid var(--line);box-shadow:var(--sh-md);
}
.ns-theme .mprof__av img{width:100%;height:100%;object-fit:cover}
.ns-theme .mprof h1{font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;margin-bottom:6px}
.ns-theme .mprof__role{
  font-family:var(--label);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.ns-theme .mprof__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ns-theme .mprof__bio{margin-top:14px;font-size:14.5px;line-height:1.72;color:var(--muted);max-width:62ch}

/* ---------- 8b. LEGACY custom.css COLLISIONS ---------- */

/* custom.css loads on themed pages too, and ns-theme.css only ever scopes to
   `.ns-theme .x`, so a bare-class or id rule left over from the old site can
   still win. Two of those bit us; dev's ns-legacy.css (which is prefixed
   body.ns-theme and loads after this file) now owns the #sign_up one and the
   small-screen header row that came with it, so only this is left here.

   `.field{height:79px}` outlived the component it was written for.
   ns-theme.css redeclares .field's display and direction but never its
   height, so that 79px survived and clipped anything taller than one input —
   the contact form's textarea overflowed its field by 62px, the legacy
   checkout fields' labels overlapped the next input, and a summernote editor
   lost everything below the toolbar. Same specificity as the theme's own
   rule, loaded after it. */
.ns-theme .field{height:auto}

/* ---------- 8d. HOME HERO ---------- */

/* Descenders were being cut off the headline — "finally" lost the tail of its
   y, "sense." lost the bottom of the italic s. The word-reveal animation needs
   `overflow:hidden` on each .line, but the line box is only font-size tall
   (line-height:1) while Playfair Display draws about .17em below it, and the
   theme's .06em of padding does not cover that. Give the clip box enough room
   and pull the same amount back off the margin, so the three lines keep their
   present spacing. The words start at translateY(110%), far below either
   value, so the reveal still begins out of sight. */
.ns-theme .hero__title .line{
  padding-bottom:.2em;
  margin-bottom:-.14em;
}

/* The hero was sized from its contents — a fixed 560px art block plus the
   nav padding, the grid's own padding and the 51px ticker. That came to a
   flat 726px whatever the window was: dead space under it on a tall screen,
   and the ticker pushed past the fold on a short laptop.

   Make the whole block exactly one viewport instead: the section is 100svh,
   the grid takes whatever is left over (so copy and art stay centred between
   the nav and the ticker), and the ticker lands flush on the bottom edge.
   The art is capped against the available height as well as its own 560px,
   so a short window shrinks the card rather than losing the ticker.

   Desktop only. Below 1180px the theme stacks the hero into one column, and
   squeezing a stacked headline + card + ticker into a phone screen would
   leave both unreadable — those widths keep scrolling, as designed. */
@media (min-width:1181px){
  .ns-theme .hero{
    min-height:100vh;            /* fallback first */
    min-height:100svh;           /* excludes mobile browser chrome */
    /* the nav is position:fixed and 98px tall; the old 83px floor let it sit
       over the top of the hero content */
    padding-top:clamp(104px,8.8vh,116px);
  }
  /* absorb the leftover height, which pushes .ticker onto the bottom edge */
  .ns-theme .hero__inner{
    flex:1;
    padding-bottom:clamp(18px,2.4vh,32px);
  }
  .ns-theme .hero__art{
    /* 214px ≈ padding-top + inner padding-bottom + the ticker */
    height:min(560px,58vw,calc(100vh - 214px));
    height:min(560px,58vw,calc(100svh - 214px));
  }
}

/* ---------- 9. FORMS: editor-backed fields ---------- */

/* The legacy custom.css carries a global `.field{height:79px}` from an old
   component of the same name. ns-theme.css redeclares .field's display and
   direction but never its height, so that 79px survives and clips anything
   taller than one input — the contact form's textarea overflowed its field
   by 62px, and a summernote editor lost everything below the toolbar.
   Same specificity as the theme's own rule, loaded after it. */
.ns-theme .field{height:auto}

/* Summernote replaces the textarea with .note-editor; pull it into the theme
   so the reply box and the create-post form stop looking like Bootstrap 3. */
.ns-theme .editorwrap .note-editor.note-frame{
  /* .field is a flex column, and the row was already sized from the bare
     <textarea> before summernote replaced it — without flex:none the frame
     shrinks to the toolbar and the typing area is clipped away. */
  flex:none;
  margin:0;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--surface);overflow:hidden;box-shadow:none;
}
.ns-theme .editorwrap .note-toolbar{
  background:var(--surface-2);border-bottom:1px solid var(--line);padding:6px 8px;
}
.ns-theme .editorwrap .note-btn{
  border-radius:8px;border-color:var(--line-2);background:#fff;color:var(--text);
}
.ns-theme .editorwrap .note-btn:hover{border-color:var(--blue-2);color:var(--blue-2)}
.ns-theme .editorwrap .note-editable{
  padding:14px 16px;font-family:var(--body);font-size:15px;line-height:1.7;color:var(--text);
}
.ns-theme .editorwrap .note-statusbar{background:var(--surface-2);border-top:1px solid var(--line)}
.ns-theme .editorwrap .note-placeholder{color:var(--faint)}

/* the anti-spam / helper note under a form */
.ns-theme .formnote{
  margin-top:14px;padding:12px 16px;border-radius:var(--r-sm);
  background:rgba(217,180,92,.13);border:1px solid rgba(217,180,92,.28);
  font-size:13px;line-height:1.6;color:var(--muted);
}
.ns-theme .formnote b{color:var(--text);font-weight:600}

/* flash messages coming from the controller (they arrive as raw HTML) */
.ns-theme .flashwrap .alert{
  padding:13px 18px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--surface);font-size:14px;color:var(--text);margin-bottom:16px;
}
.ns-theme .flashwrap .alert-success{background:rgba(15,122,82,.10);border-color:rgba(15,122,82,.28);color:#0B5A3D}
.ns-theme .flashwrap .alert-danger{background:rgba(194,69,31,.10);border-color:rgba(194,69,31,.28);color:#8C2F14}

/* ---------- 9b. SPACING & VARIANT HELPERS ---------- */

/* Named modifiers so the views carry no inline layout styles. */
.ns-theme .u-gap{margin-top:clamp(24px,3vw,38px)}
.ns-theme .u-gap-lg{margin-top:clamp(28px,3vw,44px)}
.ns-theme .u-gap-sm{margin-top:16px}
.ns-theme .subhead{font-size:22px;margin:clamp(24px,3vw,38px) 0 14px}
/* a .qform used as bare content inside a modal — no card of its own */
.ns-theme .qform--plain{padding:0;border:0;box-shadow:none;background:none}
/* the rail reused outside the sticky two-column shell */
.ns-theme .frail--static{position:static}

/* ---------- 9c. FOOTER CREDIT ---------- */

/* "Designed & Developed by Dibi Tech" sits on the same line as the copyright.
   The separator is a pseudo-element rather than a character in the markup so
   it disappears cleanly when the line wraps onto a phone. */
.ns-theme .footer_credit{display:inline-block}
.ns-theme .footer_credit::before{
  content:"\00B7";
  margin:0 9px 0 5px;
  opacity:.5;
}
.ns-theme .footer_credit a{
  font-weight:600;
  border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;
}
.ns-theme .footer_credit a:hover{
  color:var(--blue-3);
  border-bottom-color:currentColor;
}
@media (max-width:560px){
  /* on a narrow screen the credit gets its own line, and the dot would then
     be a stray mark at the start of it */
  .ns-theme .footer_credit{display:block;margin-top:6px}
  .ns-theme .footer_credit::before{content:none}
}

/* The themed two-band footer is not switched on yet ($ns_new_footer), but it
   carries the same credit so turning it on never drops it. Its band is dark
   and redefines the gold tokens for that ground, so these pick up the right
   values on their own. */
.ns-theme .foot__credit{display:block;margin-top:5px}
.ns-theme .foot__credit a{color:var(--gold-2);font-weight:600}
.ns-theme .foot__credit a:hover{color:var(--gold-1);text-decoration:underline}

/* ---------- 11. TESTIMONIALS: the home wall ---------- */

/* The reviews page got the accent mosaic; the home page's own testimonial
   wall is a different component (.quote inside .says__wall) and kept the old
   flat cream card, so the two no longer matched. Same four hues, same order,
   same parts — edge, tint, bloom, mark — so a student sees one design
   whichever wall they land on. Colours cycle per column, because .says__wall
   splits the rows into three scrolling columns. */
.ns-theme .quote{
  --accent:#1B4B96;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:
    linear-gradient(158deg,
      color-mix(in srgb,var(--accent) 7%,#fff) 0%,
      color-mix(in srgb,var(--accent) 2%,#fff) 46%,
      var(--surface) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
}
.ns-theme .says__col .quote:nth-child(4n+2){--accent:#C2451F}
.ns-theme .says__col .quote:nth-child(4n+3){--accent:#0F6E75}
.ns-theme .says__col .quote:nth-child(4n+4){--accent:#9A7420}

.ns-theme .quote::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent));
  opacity:.5;transition:opacity .45s var(--ease);
}
.ns-theme .quote::after{
  content:"";position:absolute;right:-30%;top:-46%;width:88%;aspect-ratio:1;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 66%);
  opacity:.6;transition:opacity .45s var(--ease);
}
.ns-theme .quote:hover{
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:0 24px 50px -28px color-mix(in srgb,var(--accent) 55%,transparent),
             0 4px 14px rgba(12,31,61,.07);
}
.ns-theme .quote:hover::before,
.ns-theme .quote:hover::after{opacity:1}

/* the mark becomes a watermark, as on the reviews page */
.ns-theme .quote__mark{
  top:4px;right:18px;z-index:0;
  font-size:96px;
  color:color-mix(in srgb,var(--accent) 17%,transparent);
}
/* Only the flow children get position:relative. .stars is already absolute
   (bottom right of the card) — giving it position:relative drops it back into
   the flow, where it lands on top of the name. It just needs the z-index. */
.ns-theme .quote > p,
.ns-theme .quote > figcaption{position:relative;z-index:1}
.ns-theme .quote > .stars{z-index:1}
.ns-theme .quote figcaption{border-top-color:color-mix(in srgb,var(--accent) 14%,var(--line))}
.ns-theme .quote figcaption span{color:color-mix(in srgb,var(--accent) 72%,var(--ink-900))}
.ns-theme .quote .stars{color:var(--gold-2)}


/* ---------- 11b. TESTIMONIALS: type scale by length ---------- */

/* One size for every review is what made the wall monotonous: a twelve-word
   note and a four-hundred-word essay were set identically, so the short one
   read as a half-empty card and the long one as a wall of grey. The view
   measures the text and tags the card, and the three treatments below give
   the wall some rhythm without touching a word of what students wrote. */

/* SHORT — set as a pull-quote: display serif, italic, and large enough to
   carry the card on its own. */
.ns-theme .rvcard--short .rvcard__body p,
.ns-theme .quote--short > p{
  /* !important is unavoidable on a <p>'s font here. custom.css sets
     `a,li,p{font-family:"Nanum Myeongjo",serif !important}`, and ns-app.css
     already answers it with `body.ns-theme p{font-family:var(--body)
     !important}` — so a normal declaration, at any specificity, loses to
     that pair. This is the third link in the same chain, not a new one. */
  font-family:var(--display) !important;
  font-size:clamp(17.5px,1.45vw,20.5px);
  font-style:italic;
  font-weight:500;
  line-height:1.46;
  letter-spacing:-.012em;
  color:var(--ink-900);
}
/* the accent picks the pull-quote up rather than leaving it floating */
.ns-theme .rvcard--short .rvcard__body,
.ns-theme .quote--short > p{
  border-left:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  padding-left:15px;
}

/* MID — the reading size, unchanged. */

/* LONG — a shade smaller and tighter, so an essay does not tower over the
   cards beside it. */
.ns-theme .rvcard--long .rvcard__body p,
.ns-theme .quote--long > p{
  font-size:14px;
  line-height:1.68;
  color:var(--muted);
}

@media (max-width:640px){
  /* the pull-quote drops to reading size on a phone, where a single column
     makes the size contrast pointless and only costs scrolling */
  .ns-theme .rvcard--short .rvcard__body p,
  .ns-theme .quote--short > p{font-size:17px;line-height:1.5}
}

/* ---------- 12. JUMP TO TOP / BOTTOM ---------- */

/* ns-theme.css pins .fab--top to the viewport itself (position:fixed, its own
   right/bottom). With a second button that would mean maintaining two sets of
   coordinates at three breakpoints, so the pair goes in a fixed column
   instead and the buttons become ordinary flow items inside it. The column
   inherits the same right/bottom the single button used, and sits above the
   WhatsApp bubble. */
.ns-theme .fabjump{
  position:fixed;right:26px;bottom:92px;z-index:880;
  display:flex;flex-direction:column;gap:9px;
  /* the column spans both slots even when one arrow is hidden, and would
     otherwise swallow clicks meant for the page underneath */
  pointer-events:none;
}
.ns-theme .fabjump .fab{pointer-events:auto}
.ns-theme .fabjump .fab:not(.is-on){pointer-events:none}
.ns-theme .fabjump .fab{
  position:static;                       /* undo the theme's fixed placement */
  width:46px;height:46px;padding:0;
  background:rgba(255,255,255,.92);color:var(--blue-2);
  backdrop-filter:blur(10px);box-shadow:var(--sh-md);
  cursor:pointer;
}
.ns-theme .fabjump .fab svg{width:19px;height:19px}
.ns-theme .fabjump .fab:hover{background:var(--gold-fill);color:#241A05;border-color:transparent}
.ns-theme .fabjump .fab:active{transform:scale(.94)}

/* Each arrow is hidden until it has somewhere to go — the up arrow near the
   top, the down arrow at the bottom — and both are hidden on a page that does
   not scroll. `visibility` as well as opacity, so a hidden arrow cannot be
   tabbed to or clicked. main.js sets .is-on. */
.ns-theme .fabjump .fab{
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease),visibility .35s,transform .35s var(--ease),
             background .35s,color .35s,border-color .35s;
}
.ns-theme .fabjump .fab.is-on{opacity:1;visibility:visible;transform:none}
.ns-theme .fabjump .fab.is-on:active{transform:scale(.94)}

@media (max-width:767px){
  /* the phone quick-action bar takes the bottom of the screen */
  .ns-theme .fabjump{bottom:96px}
}
@media (max-width:640px){
  .ns-theme .fabjump{right:19px;gap:8px}
  .ns-theme .fabjump .fab{width:42px;height:42px}
  .ns-theme .fabjump .fab svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .ns-theme .fabjump .fab{transition:opacity .2s,visibility .2s;transform:none}
  .ns-theme .fabjump .fab.is-on{transform:none}
}

/* ---------- 13. F2F BATCH CARD ---------- */

/* The batch row read as a table line: specs strung across one loose row, and
   the fee floating alone at the far right with a lake of white between it and
   the words it belonged to. With a single batch listed the whole page looked
   like a stub. This gives the row three real zones — the date, the details,
   and a bordered panel that the price and the CTA live inside — so the eye
   lands on what a visitor came for. */
/* The ground is the one the "what a seat buys" cards used before that section
   was dropped — an accent-tinted gradient with a bloom in the corner — so the
   batch card carries the colour that block was giving the page. */
.ns-theme .batch--rich{
  grid-template-columns:104px minmax(0,1fr) 252px;
  gap:24px;
  align-items:stretch;
  padding:24px;
  overflow:hidden;
  background:
    linear-gradient(158deg,
      color-mix(in srgb,var(--accent) 9%,#fff) 0%,
      color-mix(in srgb,var(--accent) 3%,#fff) 52%,
      var(--surface) 100%);
  border-color:color-mix(in srgb,var(--accent) 20%,var(--line));
}
.ns-theme .batch--rich::after{
  content:"";position:absolute;right:-14%;top:-62%;width:46%;aspect-ratio:1;
  pointer-events:none;border-radius:50%;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 66%);
  opacity:.6;transition:opacity .45s var(--ease);
}
.ns-theme .batch--rich:hover::after{opacity:1}
.ns-theme .batch--rich > *{position:relative;z-index:1}

/* a finished batch keeps the shape but loses the colour */
.ns-theme .batch--done{--accent:#7C8794}
.ns-theme .batch--done::after{opacity:.35}

/* Headings on this page only. The theme's display sizes were set for pages
   that open on a single statement; here the headline and three section
   titles stack up on one screen, and at full width they shouted over the
   batch cards they were introducing. Scoped to .f2fpage so no other page
   moves. */
.ns-theme .f2fpage .phero h1{font-size:clamp(27px,3.3vw,42px)}
.ns-theme .f2fpage .phero__lede{font-size:15px;max-width:58ch}
.ns-theme .f2fpage .sectitle{font-size:clamp(20px,2.05vw,27px);margin-bottom:6px}
.ns-theme .f2fpage .secsub{font-size:14px;margin-bottom:20px}
.ns-theme .f2fpage .csechead{margin-bottom:clamp(14px,1.5vw,20px)}

/* the date block carries the year too, and greys out for a finished batch */
.ns-theme .batch--rich .batch__date{align-content:center;padding:18px 10px}
.ns-theme .batch--rich .batch__date em{
  font-family:var(--label);font-style:normal;font-weight:600;
  font-size:9.5px;letter-spacing:.14em;margin-top:5px;opacity:.72;
}
.ns-theme .batch--rich .batch__date.is-past{
  background:linear-gradient(150deg,#8E9AA6,#5B6472);
}

.ns-theme .batch__body{display:flex;flex-direction:column;min-width:0}
.ns-theme .batch__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ns-theme .batch__when{
  font-family:var(--label);font-weight:600;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
}

/* the batch type — "Regular Batch", "Exam Oriented" — reads as a tag beside
   the status, in the card's own accent so the two pills do not compete */
.ns-theme .batch__type{
  padding:5px 12px;border-radius:100px;
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  color:color-mix(in srgb,var(--accent) 76%,var(--ink-900));
  font-family:var(--label);font-weight:700;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;
}

.ns-theme .batch--rich h3{font-size:21px;margin-bottom:10px}

/* where the class is held */
.ns-theme .batch__venue{
  display:flex;align-items:center;gap:7px;
  margin-bottom:16px;
  font-size:13.5px;color:var(--muted);
}
.ns-theme .batch__venue svg{width:16px;height:16px;flex:none;color:var(--accent)}
.ns-theme .batch__venue span{min-width:0}

/* Specs as a measured grid with hairlines rather than a wrapping flex row —
   four values in a line all looked equally unimportant. */
.ns-theme .batch--rich .batch__specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:0;
  border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;
  background:rgba(255,255,255,.5);
}
.ns-theme .batch--rich .batch__specs div{
  padding:11px 15px;
  border-right:1px solid var(--line);
}
.ns-theme .batch--rich .batch__specs div:last-child{border-right:0}
.ns-theme .batch--rich .batch__specs dt{margin-bottom:4px}
.ns-theme .batch--rich .batch__specs dd{font-size:14.5px;letter-spacing:-.005em}

/* the offer line is the strongest commercial message on the card and was the
   quietest thing on it */
.ns-theme .batch--rich .batch__note{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:14px;padding:11px 14px;font-size:13px;
  color:color-mix(in srgb,var(--gold-3) 88%,var(--ink-900));
  background:rgba(217,180,92,.16);
  border-color:rgba(168,128,31,.3);
}
.ns-theme .batch--rich .batch__note svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--gold-3)}

/* the panel that gives the price somewhere to sit */
.ns-theme .batch__buy{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;text-align:center;
  padding:20px 18px;border-radius:var(--r-md);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 8%,#fff),var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
}
.ns-theme .batch__buy .price{flex-direction:column;align-items:center;gap:2px}
.ns-theme .batch__buy .price b{font-size:30px;line-height:1.1}
.ns-theme .batch__buy .price small{margin-top:2px}
.ns-theme .batch__buy .btn{width:100%;justify-content:center}
.ns-theme .batch__call{
  font-size:11.5px;line-height:1.5;color:var(--faint);
}
.ns-theme .batch__call a{color:var(--blue-2);font-weight:600;white-space:nowrap}
.ns-theme .batch__call a:hover{text-decoration:underline}

@media (max-width:1024px){
  .ns-theme .batch--rich{grid-template-columns:92px minmax(0,1fr);gap:20px}
  .ns-theme .batch__buy{
    grid-column:1 / -1;
    flex-direction:row;flex-wrap:wrap;justify-content:space-between;text-align:left;
  }
  .ns-theme .batch__buy .price{align-items:baseline;flex-direction:row}
  .ns-theme .batch__buy .btn{width:auto}
  .ns-theme .batch__call{width:100%}
}
@media (max-width:640px){
  .ns-theme .batch--rich{grid-template-columns:minmax(0,1fr);padding:18px}
  .ns-theme .batch--rich .batch__date{width:86px}
  .ns-theme .batch--rich .batch__specs{grid-template-columns:minmax(0,1fr)}
  .ns-theme .batch--rich .batch__specs div{border-right:0;border-bottom:1px solid var(--line)}
  .ns-theme .batch--rich .batch__specs div:last-child{border-bottom:0}
  .ns-theme .batch__buy{flex-direction:column;align-items:stretch;text-align:center}
  .ns-theme .batch__buy .price{justify-content:center}
  .ns-theme .batch__buy .btn{width:100%}
}

/* ---------- 10. RESPONSIVE ---------- */

@media (max-width:1024px){
  .ns-theme .flayout{grid-template-columns:minmax(0,1fr)}
  .ns-theme .frail{position:static}
}
@media (max-width:900px){
  .ns-theme .csplit{grid-template-columns:minmax(0,1fr)}
  .ns-theme .csplit--flip .csplit__media{order:0}
  .ns-theme .mprof{grid-template-columns:minmax(0,1fr);justify-items:start;text-align:left}
}
@media (max-width:640px){
  .ns-theme .csechead{align-items:flex-start}
  .ns-theme .mrow{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px}
  .ns-theme .mrow__date{grid-column:1 / -1}
  .ns-theme .fcat{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .ns-theme .fcat__ico{width:44px;height:44px}
  .ns-theme .fcat__side{grid-column:1 / -1;align-items:flex-start;text-align:left}
  .ns-theme .fthread{grid-template-columns:minmax(0,1fr)}
  .ns-theme .fthread__stats{justify-content:flex-start}
  .ns-theme .mprof__av{width:88px;height:88px;font-size:34px}
  .ns-theme .ncards{grid-template-columns:minmax(0,1fr)}
  .ns-theme .fbarline{flex-direction:column;align-items:stretch}
}

/* ---------- 14. F2F: LEVEL TAG AND THE BATCH'S OWN PAGE ---------- */

/* Both CA Inter and CA Final batches are listed on /face-to-face now, so the
   level has to be visible on the card. It reads as the primary tag — solid,
   where the batch type beside it is only outlined — because "is this my
   level?" is the first question a visitor asks. */
.ns-theme .batch__level{
  padding:5px 12px;border-radius:100px;
  background:color-mix(in srgb,var(--accent) 88%,var(--ink-900));
  color:#fff;
  font-family:var(--label);font-weight:700;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;
}

/* the batch name opens the batch's own page */
.ns-theme .batch--rich h3 .batch__link{color:inherit}
.ns-theme .batch--rich h3 .batch__link:hover{color:var(--accent)}

/* ---- the batch's own page (.ns-pd markup, from ns-product.css) ---- */

/* Enrolling now / Batch running / Completed, above the fee in the buy card.
   The lecture page has a discount badge in this slot; a batch has a state. */
.ns-theme .ns-f2fpd__state{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:0 0 14px;
  font-family:var(--label);font-weight:700;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;
}
.ns-theme .ns-f2fpd__state i{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:currentColor;
}
.ns-theme .ns-f2fpd__state em{
  font-family:var(--body);font-style:normal;font-weight:500;
  font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--faint);
}
.ns-theme .ns-f2fpd__state--open{color:#1C7A4A}
.ns-theme .ns-f2fpd__state--open i{animation:nsF2fPulse 2.2s ease-in-out infinite}
.ns-theme .ns-f2fpd__state--running{color:#A8681F}
.ns-theme .ns-f2fpd__state--done{color:var(--faint)}

@keyframes nsF2fPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(28,122,74,.45)}
  70%{box-shadow:0 0 0 6px rgba(28,122,74,0)}
}
@media (prefers-reduced-motion:reduce){
  .ns-theme .ns-f2fpd__state--open i{animation:none}
}

/* A batch has one fee and one mode, so the buy card is much shorter than the
   lecture one. Without this it floated in a tall box of empty space. */
.ns-theme .ns-f2fpd .ns-pd__card{align-self:start}

/* A batch name is a sentence — "CA Final AFM Regular Batch — May 2027 Attempt
   (Demo)" — where a lecture's title is a subject. At the product page's 17ch
   it broke into four short lines beside a mostly empty head. */
.ns-theme .ns-f2fpd .ns-pd__title{max-width:26ch}

/* the batch's own offer line, under the spec sheet */
.ns-theme .ns-f2fpd .ns-pd__prose{margin-top:18px}