/* ══════════════════════════════════════════════════════════════
   NEO — LIGHT THEME FOR INNER PAGES
   Companion to neo-light.css (which covers the homepage's own
   components). This one targets the shared subpage vocabulary in
   neo-page.css: .page-hero, .split, .vis-card, .member, .form-card,
   .stat, .cat-card, .job, .seg, .pill, .lead-hero, .ceo-*.

   Same system as the homepage: the hero stays dark, and the sections
   after it alternate white / lavender tint so no two neighbours share
   a surface.
   ══════════════════════════════════════════════════════════════ */

body.theme-light{
  --bg:#FBF9FD;
  --bg-2:#F3EEF8;
  --ink:#1B0D26;
  --ink-soft:#5C4A70;
  --line:#E5DBF0;
  --surface:#FFFFFF;
  --surface-2:#F7F3FB;
  --lead:#8A79A0;
  --nc-purple:#652D86;
  --nc-magenta:#F64477;
  /* The brand pink is light — white 13px text on it is only 3.5:1. This darker
     step is for SOLID FILLS behind small text and for pink used AS small text;
     --nc-magenta stays for display type, borders and large numerals. */
  --nc-magenta-ink:#8D2341;
  --nc-offwhite:#F2F0F3;
  --nc-lilac:#C3A5DC;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #F1E7FA 0%, transparent 58%),
    linear-gradient(180deg,#FBF9FD 0%,#F3EEF8 100%);
  background-attachment:fixed;
  color:var(--ink);
}

/* ── Dark hero, matching the homepage ────────────────────────── */
body.theme-light .page-hero,
body.theme-light .lead-hero{
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, #3A1B52 0%, transparent 55%),
    linear-gradient(180deg,#180A22 0%,#28123A 100%);
  color:rgba(255,255,255,0.95);
  margin-bottom:0;
}
body.theme-light .lead-hero{ padding-bottom:80px; }
body.theme-light h1.page-h,
body.theme-light .lead-hero h1{ color:#fff; }
body.theme-light h1.page-h .accent{ color:var(--nc-magenta); }
body.theme-light .page-hero .eyebrow,
body.theme-light .lead-hero .role{ color:var(--nc-lilac); }
body.theme-light .page-hero .page-lead,
body.theme-light .lead-hero .sub{ color:rgba(255,255,255,0.68); }
body.theme-light .page-lead{ color:var(--ink-soft); }
body.theme-light .page-hero .btn-ghost{
  color:#fff; background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.18); box-shadow:none;
}
body.theme-light .page-hero .btn-ghost:hover{ background:rgba(255,255,255,0.12); border-color:var(--nc-magenta); }

/* Nav sits over the dark hero only (it retreats on scroll) */
body.theme-light nav.top .nav-links a{ color:rgba(255,255,255,0.74); }
body.theme-light nav.top .nav-links a:hover,
body.theme-light nav.top .nav-links a.active{ color:var(--nc-lilac); }
body.theme-light nav.top .theme-switch{
  color:#fff; background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.18); box-shadow:none;
}
body.theme-light .nav-mark{
  background:rgba(255,255,255,0.9); border-color:var(--line);
  box-shadow:0 2px 10px rgba(27,13,38,0.1);
}

/* ── Alternating sections ──────────────────────────────────────
   Surfaces come from .surf-a / .surf-b, striped in neo-theme.js over
   the real sibling flow so mixed tags (a <div> band between two
   <section>s) still alternate. */
body.theme-light .surf-a{ background:#FFFFFF; }
body.theme-light .surf-b{ background:#F4EEFA; }
body.theme-light section{ border-top:1px solid var(--line); }
body.theme-light .page-hero{ border-top:none; }
/* .stat-strip is a <div>, so body.theme-light section:nth-of-type() cannot
   see it and it used to sit tint-beside-tint with the next section. White
   keeps the white → tint → white run intact through non-section blocks. */
body.theme-light .stat-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ── Type ────────────────────────────────────────────────────── */
body.theme-light .section-head h2,
body.theme-light .split h2,
body.theme-light .final-cta h2{ color:var(--lead); }
body.theme-light .section-head h2 .accent,
body.theme-light .split h2 .accent,
body.theme-light .final-cta h2 .accent{ color:var(--ink); }
body.theme-light .split p,
body.theme-light .member p,
body.theme-light .job .meta,
body.theme-light .form-note,
body.theme-light .ct .k{ color:var(--ink-soft); }
body.theme-light .section-head .lbl,
body.theme-light .split .lbl,
body.theme-light .member .role,
body.theme-light .ceo-sign span{ color:#8B4FA8; }
body.theme-light .stat .n{ color:var(--ink); }
body.theme-light .stat .l{ color:var(--ink-soft); }
body.theme-light .job h4,
body.theme-light .ceo-sign b,
body.theme-light .ct a{ color:var(--ink); }
body.theme-light .job .go{ color:var(--nc-magenta-ink); }

/* ── Surfaces ────────────────────────────────────────────────── */
body.theme-light .vis-card,
body.theme-light .member,
body.theme-light .form-card,
body.theme-light .ct,
body.theme-light .pill{
  background:var(--surface); border-color:var(--line);
  box-shadow:0 1px 2px rgba(27,13,38,0.04), 0 8px 24px rgba(27,13,38,0.04);
}
body.theme-light .member:hover{ border-color:var(--nc-magenta); }
body.theme-light .vis-card .quote{ color:var(--ink); }
body.theme-light .vis-card .who{ color:#8B4FA8; }
body.theme-light .vis-card .who small{ color:var(--ink-soft); }
body.theme-light .pill{ color:var(--ink); }

/* ── Buttons ─────────────────────────────────────────────────── */
body.theme-light .btn-primary{ background:var(--nc-magenta-ink); color:#fff; box-shadow:0 2px 8px rgba(246,68,119,0.22); }
body.theme-light .btn-primary:hover{ background:#6A1830; }
body.theme-light .btn-ghost{
  color:var(--ink); border-color:var(--line); background:#fff;
  box-shadow:0 1px 2px rgba(27,13,38,0.05);
}
body.theme-light .btn-ghost:hover{ background:var(--surface-2); border-color:var(--nc-magenta); }

/* ── Forms ───────────────────────────────────────────────────── */
body.theme-light .field label,
body.theme-light .pf-field span{ color:#8B4FA8; }
body.theme-light .field input,
body.theme-light .field select,
body.theme-light .field textarea{
  background:#fff; border-color:var(--line); color:var(--ink);
}
body.theme-light .field input::placeholder,
body.theme-light .field textarea::placeholder{ color:#9C8CAF; }
body.theme-light .field input:focus,
body.theme-light .field select:focus,
body.theme-light .field textarea:focus{ background:#fff; border-color:var(--nc-magenta); }
body.theme-light .field select option{ background:#fff; color:var(--ink); }

/* ── Segmented control ───────────────────────────────────────── */
body.theme-light .seg{ background:#fff; border-color:var(--line); }
body.theme-light .seg button{ color:var(--ink-soft); }
body.theme-light .seg button.active{ background:var(--nc-magenta-ink); color:#fff; }

/* ── Careers ─────────────────────────────────────────────────── */
body.theme-light .cat-card{ border-color:var(--line); background:#fff; }
body.theme-light .cat-card:hover{ border-color:var(--nc-magenta); }
body.theme-light .cat-card .cap{
  background:linear-gradient(0deg,rgba(27,13,38,0.9),transparent);
}
body.theme-light .cat-card .cap b{ color:#fff; }
body.theme-light .cat-card .cap span{ color:rgba(255,255,255,0.8); }
body.theme-light .jobs,
body.theme-light .job{ border-color:var(--line); }
body.theme-light .job:hover{ background:var(--surface-2); }
body.theme-light .photo-strip > *{ border-color:var(--line); }

/* ── Leadership ──────────────────────────────────────────────── */
body.theme-light .lead-portrait{ border-color:rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); }
body.theme-light .ceo-body{ color:var(--ink); }
body.theme-light .ceo-sign{ border-color:var(--line); }
body.theme-light .tw-caret{ background:var(--nc-magenta); }

/* ── Theme switch ────────────────────────────────────────────── */
.theme-switch{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,0.05);
  font-size:11.5px; font-weight:600; letter-spacing:0.04em;
  color:var(--ink); white-space:nowrap; cursor:pointer;
  transition:border-color .25s, background .25s;
}
.theme-switch:hover{ border-color:var(--nc-magenta); }
.theme-switch svg{ width:14px; height:14px; }
nav.top .nav-right{ display:flex; align-items:center; gap:12px; }@media(max-width:760px){ .theme-switch span{ display:none; } .theme-switch{ padding:9px; }}

/* The switch holds two labelled states; without an explicit inline-flex the
   inner spans default to block and stack the icon above the text, which
   inflates the whole nav row. */
.theme-switch .ts-light,
.theme-switch .ts-dark{ display:inline-flex; align-items:center; gap:7px; }
.theme-switch .ts-dark{ display:none; }
body.theme-light .theme-switch .ts-dark{ display:inline-flex; }
body.theme-light .theme-switch .ts-light{ display:none; }
/* The switch adds width to the nav row, so collapse the links earlier than
   the old 900px or they wrap into the logo. */
@media(max-width:1100px){ nav.top .nav-links{ display:none; } }

/* ══════════════════════════════════════════════════════════════
   PAGE-SPECIFIC COMPONENTS
   Services, Contact, Track Money and Forex Rates each carry their
   own inline component CSS with hardcoded white text and
   white-alpha surfaces. Those resolve to invisible on a light page,
   so every one is listed here. Class names are unique per page, so
   keeping them in one sheet is safe.
   ══════════════════════════════════════════════════════════════ */

/* Track Money / Forex heroes get the same dark treatment as .page-hero */
body.theme-light .track-hero,
body.theme-light .fx-hero{
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, #3A1B52 0%, transparent 55%),
    linear-gradient(180deg,#180A22 0%,#28123A 100%);
  padding-top:150px; border-top:none;
}
body.theme-light h1.track-h,
body.theme-light h1.fx-h{ color:#fff; }
body.theme-light .track-hero .eyebrow,
body.theme-light .fx-hero .eyebrow{ color:var(--nc-lilac); }
body.theme-light .track-hero .page-lead,
body.theme-light .fx-hero .page-lead,
body.theme-light .track-hero p,
body.theme-light .fx-hero p{ color:rgba(255,255,255,0.68); }

/* ── Services ────────────────────────────────────────────────── */
body.theme-light .svc{
  background:var(--surface); border-color:var(--line);
  box-shadow:0 1px 2px rgba(27,13,38,0.04), 0 10px 28px rgba(27,13,38,0.05);
}
body.theme-light .svc:hover{ border-color:var(--nc-magenta); }
body.theme-light .svc h3{ color:var(--ink); }
body.theme-light .svc .num{ color:#8B4FA8; }
body.theme-light .svc p,
body.theme-light .svc .stat .l{ color:var(--ink-soft); }

/* ── Contact ─────────────────────────────────────────────────── */
body.theme-light .route,
body.theme-light .info-card{
  background:var(--surface); border-color:var(--line);
  box-shadow:0 1px 2px rgba(27,13,38,0.04), 0 8px 24px rgba(27,13,38,0.04);
}
body.theme-light .route:hover{ border-color:var(--nc-magenta); }
body.theme-light .route h3{ color:var(--ink); }
body.theme-light .route p{ color:var(--ink-soft); }
body.theme-light .route a.lk{ color:var(--nc-magenta-ink); }
body.theme-light .form-card{
  background:var(--surface); border-color:var(--line);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 2px 6px rgba(27,13,38,0.05), 0 18px 44px rgba(27,13,38,0.07);
}
body.theme-light .form-card h3{ color:var(--ink); }
body.theme-light .field input,
body.theme-light .field select,
body.theme-light .field textarea{
  background:#fff; border-color:var(--line); color:var(--ink);
}
body.theme-light .field input::placeholder,
body.theme-light .field textarea::placeholder{ color:#9C8CAF; }
body.theme-light .form-card .submit{ background:var(--nc-magenta-ink); color:#fff; box-shadow:0 2px 8px rgba(246,68,119,0.22); }
body.theme-light .info-row .val{ color:var(--ink); }
body.theme-light .info-row .lbl{ color:var(--ink-soft); }
body.theme-light .faq-head h2{ color:var(--lead); }
body.theme-light .faq-head h2 .accent{ color:var(--ink); }
body.theme-light .faq-head .lbl{ color:#8B4FA8; }
body.theme-light .faq-item{ background:var(--surface); border-color:var(--line); }
body.theme-light .faq-q{ color:var(--ink); }
body.theme-light .faq-q .plus::before,
body.theme-light .faq-q .plus::after{ background:var(--nc-magenta); }
body.theme-light .faq-a,
body.theme-light .faq-a p{ color:var(--ink-soft); }

/* ── Track Money ─────────────────────────────────────────────── */
body.theme-light .track-card{
  background:var(--surface); border-color:var(--line);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 2px 6px rgba(27,13,38,0.05), 0 18px 44px rgba(27,13,38,0.07);
}
body.theme-light .track-card .field input{ background:#fff; border-color:var(--line); color:var(--ink); }
body.theme-light .track-card .submit{ background:var(--nc-magenta-ink); color:#fff; }
body.theme-light .tl-step .circle{ background:var(--surface-2); border-color:var(--line); color:var(--ink-soft); }
body.theme-light .tl-step.done .circle{ background:var(--nc-magenta-ink); border-color:transparent; color:#fff; }
body.theme-light .tl-step .ttl{ color:var(--ink); }
body.theme-light .tl-step .desc,
body.theme-light .tl-step .time{ color:var(--ink-soft); }
body.theme-light .tl-step .bar{ background:var(--line); }

/* ── Forex Rates ─────────────────────────────────────────────── */
body.theme-light .cv-card,
body.theme-light .rate-card{
  background:var(--surface); border-color:var(--line);
  box-shadow:0 1px 2px rgba(27,13,38,0.04), 0 8px 24px rgba(27,13,38,0.05);
}
body.theme-light .cv-input{ background:#fff; border-color:var(--line); }
body.theme-light .cv-input input,
body.theme-light .cv-input select{ color:var(--ink); background:none; }
body.theme-light .cv-input select{ background:#fff; border-color:var(--line); }
body.theme-light .cv-swap{ background:var(--nc-magenta-ink); color:#fff; box-shadow:0 2px 8px rgba(246,68,119,0.22); }
body.theme-light .cv-rate-note{ color:var(--ink-soft); }
body.theme-light .cv-rate-note b{ color:var(--ink); }
body.theme-light .rates-head h2{ color:var(--ink); }
body.theme-light .rates-head .live{ color:var(--ink-soft); }
body.theme-light .rate-card .pair,
body.theme-light .rate-card .rate{ color:var(--ink); }
body.theme-light .rate-card .country,
body.theme-light .rate-card .rate .unit{ color:var(--ink-soft); }

/* ── Shared final CTA ────────────────────────────────────────── */
body.theme-light .final-cta h2{ color:var(--lead); }
body.theme-light .final-cta h2 .accent{ color:var(--ink); }
/* The "currently open" badge uses a bright green tuned for a dark card. */
body.theme-light .status-badge{
  background:rgba(21,128,61,0.08); border-color:rgba(21,128,61,0.28); color:#15803D;
}
body.theme-light .status-badge .dot{ background:#15803D; box-shadow:0 0 8px rgba(21,128,61,0.5); }
/* Forex: the converter card is .converter (not .cv-card), and the up/down
   greens are tuned for a dark surface. */
body.theme-light .converter{
  background:var(--surface); border-color:var(--line);
  box-shadow:0 2px 6px rgba(27,13,38,0.05), 0 18px 44px rgba(27,13,38,0.07);
}
body.theme-light{ --green:#15803D; --red:#B91C1C; }
body.theme-light .cv-result{ color:var(--nc-magenta); }
body.theme-light .cv-label,
body.theme-light .converter label,
body.theme-light .cv-side > span{ color:var(--ink-soft); }
body.theme-light .rate-card .rate{ color:var(--ink); }
body.theme-light .fx-updated b{ color:var(--nc-lilac); }
/* .member h4 is white in neo-page.css; the light layer needs it too. */
body.theme-light .member h4{ color:var(--ink); }
body.theme-light .ceo-kicker{ color:#8B4FA8; }
body.theme-light .form-note a,
body.theme-light .ft-note a{ color:var(--nc-magenta-ink); }
body.theme-light .ilink{ color:var(--nc-magenta-ink); }
/* A third surface for the footer so it differs from either stripe. */
body.theme-light footer{ background:#EFE6F8; --lead:#6A5880; }

/* ── Blog (light) ───────────────────────────────────────────── */
body.theme-light .blog-cover{ border-color:var(--line); background:var(--surface-2); }
body.theme-light .post{
  background:var(--surface); border-color:var(--line);
  box-shadow:0 1px 2px rgba(27,13,38,0.04), 0 8px 24px rgba(27,13,38,0.04);
}
body.theme-light .post:hover{ border-color:var(--nc-magenta); }
body.theme-light .post h3,
body.theme-light .blog-feature h2{ color:var(--ink); }
body.theme-light .post p,
body.theme-light .blog-feature p,
body.theme-light .post-meta{ color:var(--ink-soft); }
body.theme-light .post-cat{ color:#8B4FA8; }
/* Pink as small text needs the darker step to clear AA on white. */
body.theme-light .read-on{ color:var(--nc-magenta-ink); }
body.theme-light .article p{ color:var(--ink); }
body.theme-light .article p.stand,
body.theme-light .article h3,
body.theme-light .article blockquote{ color:var(--ink); }
body.theme-light .article li{ color:var(--ink-soft); }
body.theme-light .author-card{ background:var(--surface); border-color:var(--line); }
body.theme-light .author-card b{ color:var(--ink); }
body.theme-light .author-card span{ color:var(--ink-soft); }
body.theme-light .member .avatar{ border-color:var(--line); }
/* The article hero stays dark in both themes, so its meta row stays light. */
body.theme-light .page-hero .post-meta{ color:rgba(255,255,255,0.62); }

/* ── Light theme, inside the deliberately-dark tracker/forex heroes ────────
   Track Money used to carry its own inline :root where --ink/--ink-soft meant
   WHITE. That block went when the page moved onto the shared sheets, so those
   tokens now resolve from the LIGHT palette (dark ink) while the hero behind
   them is still the dark gradient above. The existing rules here only cover
   <p> and .page-lead, so every div-based element inside the hero needs the
   same treatment explicitly. Value matches .track-sub. */
body.theme-light .track-hero .help,
body.theme-light .fx-hero .help,
body.theme-light .fx-hero .fx-sub,
body.theme-light .fx-hero .fx-updated,
body.theme-light .track-hero .result-head .ref,
body.theme-light .track-hero .tl-step .desc,
body.theme-light .track-hero .tl-step .time{ color:rgba(255,255,255,0.68); }
body.theme-light .track-hero .tl-step .ttl,
body.theme-light .track-hero .result-head .status{ color:#fff; }
body.theme-light .track-hero .help a,
body.theme-light .fx-hero .help a{ color:var(--nc-lilac); }

/* The tracked amount kept the gradient-text treatment: the reset list named
   headline accents only, so this one sat a level deeper and escaped it. */
.result-head .amt,
body.theme-light .result-head .amt{
  background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:#fff; color:#fff;
}

/* .info-row .ic was a dark-theme tile (rgba(255,255,255,0.06) + lilac glyph). On the
   light card that is 2.16:1. Give it a real tinted tile and brand-purple glyph. */
body.theme-light .info-row .ic{ background:#F1E7FA; color:var(--nc-purple); }