/* The site-wide night theme.
 *
 * Every rule is scoped under .page-dark on <body>, so this file is inert
 * until the switch is thrown and the light site is byte-for-byte what it was.
 * Loaded on every page from base.html for exactly that reason: it costs
 * nothing where it does not apply, and a theme that only exists on some pages
 * strands a visitor in a half-dark site the moment they follow a link.
 *
 * Only shared chrome and shared components live here -- the header, the
 * footer, Bootstrap's cards, the blog, the about page. Page-specific dark
 * styling stays with its page (scroll_landing.css, product_dark.css), which
 * is what keeps this file from becoming a second copy of the whole site.
 *
 * Colours come from tokens.css. The dark set is defined once, here, so the
 * landing pages and the blog cannot drift into two different darks.
 */

.page-dark {
  --nt-ground: var(--oa-stage);
  --nt-ground-deep: #0b0e13;
  --nt-card: #161a23;
  --nt-ink-strong: #f3f5f9;
  --nt-ink: #e8ecf3;
  --nt-muted: #9aa4b5;
  --nt-faint: #7b8698;
  --nt-line: #222836;
  --nt-border: #2b3240;
  --nt-accent-ink: #a9a3ff;
}

.page-dark,
.page-dark body {
  background: var(--nt-ground);
  color: var(--nt-ink);
}

/* --- chrome -------------------------------------------------------------- */

.page-dark header a,
.page-dark header .nav-link,
.page-dark .navbar a { color: #cfd5e0; }

.page-dark header a:hover,
.page-dark .navbar a:hover { color: #ffffff; }

/* brightness(0) crushes every pixel to black while keeping the alpha, then
   invert(1) flips it to white -- a clean silhouette with no second asset.
   It discards colour, which is the trade. Dark theme only, so the light
   site shows the real mark. */
.page-dark header img,
.page-dark .navbar img { filter: brightness(0) invert(1); }

.page-dark footer,
.page-dark footer.bg-grey {
  background: var(--nt-ground-deep) !important;
  border-top: 1px solid var(--nt-line);
}

.page-dark footer,
.page-dark footer a,
.page-dark footer p,
.page-dark footer li,
.page-dark .footer-links a,
.page-dark .copyright { color: var(--nt-faint) !important; }

.page-dark footer a:hover,
.page-dark .footer-links a:hover { color: #cfd5e0 !important; }

.page-dark footer img { filter: brightness(0) invert(1); opacity: 0.72; }

/* --- shared type --------------------------------------------------------- */

.page-dark h1, .page-dark h2, .page-dark h3,
.page-dark h4, .page-dark h5, .page-dark h6,
.page-dark .header-2 { color: var(--nt-ink-strong); }

.page-dark p, .page-dark li, .page-dark dd { color: var(--nt-muted); }

.page-dark .highlight-tag {
  background: var(--oa-accent-track);
  color: var(--nt-accent-ink);
}

/* --- Bootstrap cards, used across the blog ------------------------------- */

.page-dark .card,
.page-dark .equal-height-card {
  background: var(--nt-card);
  border: 1px solid var(--nt-line);
  color: var(--nt-ink);
}

.page-dark .card-title { color: var(--nt-ink-strong); }
.page-dark .card-text { color: var(--nt-muted); }
.page-dark .card-link { color: var(--nt-accent-ink); }

/* --- blog ---------------------------------------------------------------- */

.page-dark .blog-hero,
.page-dark .latest-articles,
.page-dark .about-us,
.page-dark .background-image-section { background: var(--nt-ground); }

/* No ground of its own: in a post it sits inside the card, whose colour it
   should show, not the page's. */
.page-dark .blog-content { color: var(--nt-ink); }

/* An article's body is long-form reading, so it gets the softer ink rather
   than the headline white -- pure white body text on a dark ground is what
   makes people call a dark theme "harsh". */
.page-dark .blog-content p,
.page-dark .blog-content li { color: var(--nt-muted); }

.page-dark .blog-content a { color: var(--nt-accent-ink); }

.page-dark .blog-content blockquote {
  border-left: 3px solid var(--nt-border);
  color: var(--nt-muted);
}

.page-dark .blog-content code,
.page-dark .blog-content pre {
  background: var(--nt-card);
  border: 1px solid var(--nt-line);
  color: var(--nt-ink);
}

.page-dark .group-banner-overlay { background: rgba(10, 13, 18, 0.62); }

.page-dark .blog-btn-primary {
  background: var(--oa-accent);
  color: #ffffff;
  border: none;
}

.page-dark .blog-btn-secondary {
  background: transparent;
  border: 1px solid var(--nt-border);
  color: var(--nt-ink);
}

.page-dark .a-pagination a { color: var(--nt-muted); }
.page-dark .a-pagination .current { color: var(--nt-ink-strong); }

/* --- the switch itself --------------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--oa-radius-pill);
  background: var(--oa-surface-sunken);
  border: 1px solid var(--oa-line);
}

.theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 34px, not 44: this is secondary chrome sitting in a dense bar, and the
     44px floor is for primary targets on a phone. It stays comfortably
     tappable because the row around it is generously spaced. */
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--oa-radius-pill);
  background: transparent;
  color: var(--oa-muted);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.theme-toggle__btn svg { width: 17px; height: 17px; }

.theme-toggle__btn:hover { color: var(--oa-ink); }

.theme-toggle__btn.is-current {
  background: var(--oa-surface);
  color: var(--oa-accent);
  box-shadow: var(--oa-shadow-sm);
}

.page-dark .theme-toggle {
  background: var(--nt-card);
  border-color: var(--nt-line);
}

.page-dark .theme-toggle__btn { color: var(--nt-faint); }
.page-dark .theme-toggle__btn:hover { color: var(--nt-ink); }

.page-dark .theme-toggle__btn.is-current {
  background: #1d2330;
  color: var(--nt-accent-ink);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__btn { transition: none; }
}

/* --- components the first pass missed ------------------------------------ */

/* Found by querying the rendered page for light backgrounds rather than by
   reading templates: these are the modules that stayed white on a dark home
   page. Listed explicitly rather than caught with a blanket rule, because a
   blanket "anything white goes dark" also repaints the radiograph, the
   product screenshots and the pack cards' deliberate white. */

.page-dark .stat-card,
.page-dark .feature-card,
.page-dark .testimonial-card,
.page-dark .trial-how,
.page-dark .value-card,
.page-dark .pack-card {
  background: var(--nt-card) !important;
  border: 1px solid var(--nt-line);
  color: var(--nt-ink);
}

.page-dark .stat-card *,
.page-dark .feature-card p,
.page-dark .testimonial-card p,
.page-dark .trial-how p { color: var(--nt-muted); }

.page-dark .stat-value,
.page-dark .feature-card h3,
.page-dark .testimonial-card h3 { color: var(--nt-ink-strong); }

/* The trust pills are <button class="highlight-tag">, so they inherit the
   pill styling and a white ground from the button reset. */
.page-dark button.highlight-tag,
.page-dark .trial-how__pill {
  background: var(--nt-card) !important;
  border: 1px solid var(--nt-line);
  color: var(--nt-muted);
}

.page-dark button.highlight-tag.active,
.page-dark .trial-how__pill.active {
  background: var(--oa-accent-track) !important;
  border-color: var(--oa-accent-border);
  color: var(--nt-accent-ink);
}

.page-dark .hero-secondary-btn {
  background: transparent !important;
  border: 1px solid var(--nt-border);
  color: var(--nt-ink);
}

/* Translucent white over a dark page reads as haze, not glass. */
.page-dark .hero-video-wrapper {
  background: var(--nt-card) !important;
  border: 1px solid var(--nt-line);
}

.page-dark input,
.page-dark textarea,
.page-dark select {
  background: var(--nt-card);
  border: 1px solid var(--nt-border);
  color: var(--nt-ink);
}

.page-dark input::placeholder,
.page-dark textarea::placeholder { color: var(--nt-faint); }

/* --- the language picker ------------------------------------------------- */

.page-dark .language-switcher {
  background: var(--nt-card);
  border: 1px solid var(--nt-line);
  color: var(--nt-muted);
}

/* Only the pill is a control; its wrapper painted a second, square box
   around it -- in the desktop bar and as a band across the mobile menu. */
.page-dark .header__language {
  background: transparent;
  border: 0;
  color: var(--nt-muted);
}

.page-dark .language-switcher a,
.page-dark .header__language a { color: var(--nt-faint); }

.page-dark .language-switcher a:hover,
.page-dark .header__language a:hover { color: var(--nt-ink); }

.page-dark .language-switcher .active,
.page-dark .language-switcher a.active,
.page-dark .header__language .active {
  background: var(--oa-accent-track);
  color: var(--nt-accent-ink);
}

/* --- mobile header and drawer -------------------------------------------- */

/* The burger, the drawer it opens and the overlay behind it were all built
   on the light header. On a dark page the drawer opened as a white sheet. */
.page-dark .header__content,
.page-dark .header__nav,
.page-dark .header__metanav,
.page-dark .header__mobilebtn-wrap {
  background: transparent;
}

.page-dark .header__nav__list {
  background: transparent;
}

.page-dark .header__mobilebtn,
.page-dark .header__mobilebtn--menu {
  background: transparent;
  border: 1px solid var(--nt-border);
  color: var(--nt-ink);
}

/* The rule above is for the burger; it also caught the call to action and
   turned it into a dark outlined box. The CTA keeps its fill. */
.page-dark .header__mobilebtn.try-mobile {
  background: #6c63ff;
  border-color: transparent;
  color: #fff;
}

.page-dark .header__mobilebtn.try-mobile:hover { background: #574fd6; }

.page-dark .header__mobilebtn svg,
.page-dark .header__mobilebtn--menu svg { stroke: var(--nt-ink); }

.page-dark .nav-overlay { background: rgba(6, 8, 12, 0.72); }

.page-dark .nav-link,
.page-dark .nav-link--mobile-only { color: var(--nt-ink); }

/* The FAQ, restyled to match the education pages: hairline rules and two
   columns rather than a stack of filled cards. Purely visual -- the markup
   and the accordion JS that toggles it are untouched, so this is one block
   to delete if the card look is ever wanted back.

   The question row carried its own near-white (#f9f9f9) to separate it from
   the answer. With the card gone there is nothing to separate it from, so it
   loses the fill entirely. */
.page-dark .faq-container {
  columns: 2;
  column-gap: clamp(24px, 4vw, 56px);
  max-width: 1180px;
}

.page-dark .faq-item {
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid var(--nt-line);
  border-radius: 0;
  /* Without this a column break can split a question from its answer. */
  break-inside: avoid;
}

.page-dark .faq-question {
  background: transparent !important;
  padding: 18px 0;
  color: var(--nt-ink);
  cursor: pointer;
}

.page-dark .faq-question-text {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--nt-ink);
}

.page-dark .faq-preview { color: var(--nt-faint); font-size: 13px; }

.page-dark .faq-answer {
  padding: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--nt-muted);
}

.page-dark .faq-answer a { color: var(--nt-accent-ink); }

.page-dark .faq__title {
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -0.025em;
  color: var(--nt-ink-strong);
}

@media (max-width: 860px) {
  .page-dark .faq-container { columns: 1; }
}

/* The clinic block, the withdrawal notice and the remaining translucent
   whites. Each pass of this file came from querying the rendered page for
   light backgrounds rather than from reading templates -- which is the only
   way to find a `li` styled with rgba(255,255,255,.78) by a rule three
   stylesheets away. */
.page-dark .clinic-solution-main-card,
.page-dark .clinic-solution-side-card,
.page-dark .packs-unavailable {
  background: var(--nt-card) !important;
  border: 1px solid var(--nt-line);
  color: var(--nt-ink);
}

.page-dark .clinic-solution-main-card p,
.page-dark .clinic-solution-side-card p,
.page-dark .packs-unavailable p { color: var(--nt-muted); }

.page-dark .clinic-solution-secondary,
.page-dark .btn-secondary,
.page-dark .download-example {
  background: transparent !important;
  border: 1px solid var(--nt-border);
  color: var(--nt-ink);
}

/* Translucent white list chips -- a "glass" effect that only works over a
   light ground. Over the stage they turned into pale slabs. */
.page-dark .clinic-solution-side-card li,
.page-dark .clinic-solution-main-card li,
.page-dark ul li[style*="255"] {
  background: rgba(255, 255, 255, 0.04);
  color: var(--nt-muted);
}

.page-dark .clinic-solution-badge,
.page-dark .clinic-solution-card-badge {
  background: var(--oa-accent-track);
  color: var(--nt-accent-ink);
}

/* Declared with !important in its own stylesheet, so it needs the same here. */
.page-dark button.btn-secondary,
.page-dark .btn-secondary.download-example {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--nt-border) !important;
  color: var(--nt-ink) !important;
}

/* --- specificity ties ---------------------------------------------------- */

/* These lost to index.css not on !important but on SOURCE ORDER: this file
   loads early in <head> so every page can use it, index.css loads later with
   the page, and at equal specificity the later rule wins. Matching their
   selectors exactly and adding .page-dark is what breaks the tie -- raising
   specificity deliberately, rather than reaching for another !important. */

.page-dark .trial-how .btn-secondary.download-example {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--nt-border) !important;
  color: var(--nt-ink) !important;
}

.page-dark .trial-how__steps li {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--nt-line);
  color: var(--nt-muted);
}

.page-dark .trial-how__steps li strong { color: var(--nt-ink-strong); }

.page-dark .trial-how input,
.page-dark .trial-how__form input,
.page-dark form input[type="text"],
.page-dark form input[type="email"] {
  background: var(--nt-card);
  border: 1px solid var(--nt-border);
  color: var(--nt-ink);
}

/* --- the shared reveal --------------------------------------------------- */

/* Visible by default; js-reveal is added by reveal.js, which is also what
   removes it again. A page whose content is invisible until a script runs is
   a page that is sometimes blank -- so the hiding and the showing are always
   the same script's responsibility. Lives here rather than with the landing
   page because any page can now opt a block in. */
[data-reveal] { opacity: 1; }

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.js-reveal [data-reveal].is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* The disclosure marker. The template ships a ▶ glyph; rotating it to point
   down when the answer opens matches the student pages' +/− without touching
   the markup or the script. `.open` lands on .faq-answer, not the item, so
   the marker is reached with a sibling selector rather than a descendant one. */
.page-dark .faq-question .arrow {
  color: var(--nt-faint);
  font-size: 11px;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}

.page-dark .faq-item:hover .arrow { color: var(--nt-ink); }

.page-dark .faq-question:has(+ .faq-answer.open) .arrow {
  transform: rotate(90deg);
  color: var(--nt-accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .page-dark .faq-question .arrow { transition: none; }
}

/* The answer panel and the container it sits in both carried a light ground
   of their own. Closed answers showed as pale slivers under each question
   because the collapse is a max-height, so the panel is still painted. */
.page-dark .faq-container,
.page-dark .container-faq {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page-dark .faq-answer,
.page-dark .faq-answer.open {
  background: transparent !important;
  border: 0 !important;
}

/* --- the guest free-analysis section ------------------------------------- */

/* Built for the light page and carried onto the dark one with the port. The
   button is a bare <button>, so it was showing the browser's own #efefef and
   black text -- the one genuinely unstyled control on the page. */
.page-dark .guest-button {
  background: var(--oa-accent) !important;
  border: none;
  color: #ffffff !important;
  border-radius: var(--oa-radius-md);
  font-weight: 500;
}

.page-dark .guest-button:hover { background: var(--oa-accent-hover) !important; }

.page-dark .guest-button[disabled],
.page-dark .guest-button:disabled {
  background: var(--nt-card) !important;
  color: var(--nt-faint) !important;
}

.page-dark .guest-lead,
.page-dark .guest-panel,
.page-dark .free-analysis-panel {
  background: transparent;
  color: var(--nt-ink);
}

/* The anchors carry no colour of their own -- the role and hint spans do --
   so anything added directly to one would inherit the UA's black. */
.audience-chooser__option { color: var(--oa-ink-soft); }
.page-dark .audience-chooser__option { color: var(--nt-ink); }

.page-dark .guest-title,
.page-dark .guest-subtitle,
.page-dark .guest-step-title { color: var(--nt-ink-strong) !important; }

.page-dark .guest-step-text,
.page-dark .guest-note { color: var(--nt-muted) !important; }

/* --- cookie banner ------------------------------------------------------- */

/* Rendered on every page and fixed over the content, so a white slab on a
   dark site is the most visible thing on it. */
.page-dark .cookie-banner {
  background: var(--nt-card) !important;
  border: 1px solid var(--nt-line);
  color: var(--nt-ink) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.page-dark .cookie-text,
.page-dark .cookie-buttons { color: var(--nt-muted) !important; }

.page-dark .cookie-banner a { color: var(--nt-accent-ink) !important; }

.page-dark .cookie-btn.decline {
  background: transparent !important;
  border: 1px solid var(--nt-border) !important;
  color: var(--nt-ink) !important;
}

/* --- header: give it a surface of its own -------------------------------- */

/* It was painted --nt-ground, the same value as the page, so on mobile -- no
   border visible, no shadow -- the bar simply disappeared: black on black.
   A distinct surface is what makes it read as chrome rather than as nothing. */
.page-dark header,
.page-dark .site-header,
.page-dark .navbar {
  background: #12161f !important;
  border-bottom: 1px solid var(--nt-line);
}

/* The site header itself is glass rather than a flat #12161f: an opaque bar
   read as a different, lighter box over the pages' light (.oa-stage). The
   hairline keeps the edge the flat surface was there to give, so the bar
   still cannot vanish. Only .header -- a blur on the course heroes, which are
   <header> elements too, would smear the grid behind them. */
.page-dark .header {
  background: rgba(15, 18, 24, 0.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* The active item was violet ink on a violet 15% wash, both chosen against a
   white page. On the dark ground that is two dark things on a dark thing. */
.page-dark #mainNav > ul > li > .active {
  color: #ffffff !important;
  background-color: var(--oa-accent) !important;
}

/* --- the products dropdown ----------------------------------------------- */

.page-dark .products-dropdown {
  background: var(--nt-card) !important;
  border: 1px solid var(--nt-line) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55) !important;
}

.page-dark .products-dropdown a,
.page-dark .products-dropdown li { color: var(--nt-ink) !important; }

.page-dark .products-dropdown a:hover { background: #1d2330 !important; }

.page-dark .products-dropdown p,
.page-dark .products-dropdown span { color: var(--nt-muted) !important; }

/* --- product landing pages ----------------------------------------------- */

/* Translucent white "glass" -- works over a light ground, turns into a pale
   slab over the stage. */
.page-dark .product-trust-pills span,
.page-dark .product-trust-pills li,
.page-dark .product-hero__audience span {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--nt-line);
  color: var(--nt-muted) !important;
}

.page-dark .product-hero__visual {
  background: var(--nt-card) !important;
  border: 1px solid var(--nt-line);
}

/* The secondary CTA kept its light-page ink (#2f3e4d) on a transparent
   ground, so it was dark text on a dark button. */
.page-dark .product-btn--secondary,
.page-dark a.product-btn--secondary {
  background: transparent !important;
  border: 1px solid var(--nt-border) !important;
  color: var(--nt-ink) !important;
}

.page-dark .product-btn--secondary:hover { border-color: #3d4658 !important; }

/* The product FAQ, matched to the home page's.
 *
 * `.product-faq` is on the <details> element ITSELF, not on a wrapper, so an
 * earlier `.product-faq details` rule matched nothing -- which is why this
 * kept its old look after being "fixed". `details.product-faq` is the
 * selector that actually lands.
 *
 * Two columns, hairline rules, +/- markers: the same treatment as .reel-faq,
 * so the two pages do not disagree about what a FAQ looks like. */
.page-dark .product-faq-list {
  columns: 2;
  column-gap: clamp(24px, 4vw, 56px);
  max-width: 1180px;
  margin-inline: auto;
}

.page-dark details.product-faq {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nt-line) !important;
  border-radius: 0 !important;
  break-inside: avoid;
}

.page-dark details.product-faq summary {
  background: transparent !important;
  color: var(--nt-ink) !important;
  padding: 18px 0;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.page-dark details.product-faq summary::-webkit-details-marker { display: none; }
.page-dark details.product-faq summary::marker { content: ""; }

.page-dark details.product-faq summary::after {
  content: "+";
  float: right;
  color: var(--nt-faint);
  font-weight: 400;
}

.page-dark details.product-faq[open] summary::after { content: "\2212"; }

.page-dark details.product-faq p {
  padding: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--nt-muted) !important;
}

@media (max-width: 860px) {
  .page-dark .product-faq-list { columns: 1; }
}

/* --- the switch on mobile ------------------------------------------------ */

/* One copy per bar: the desktop one is inside .header__desktop-cta, which is
   display:none on a phone, so mobile had no switch at all. Each copy is shown
   only in its own bar so they never both render. */
.theme-toggle-wrap--mobile { display: none; }

@media (max-width: 991px) {
  .theme-toggle-wrap--mobile {
    display: inline-flex;
    align-items: center;
    margin-right: var(--oa-space-2);
  }

  /* Compact, or the extra control pushes the mobile bar wider than the
     screen and clips the CTA off the right edge. */
  .theme-toggle-wrap--mobile .theme-toggle { padding: 2px; gap: 0; }

  .theme-toggle-wrap--mobile .theme-toggle__btn { width: 30px; height: 30px; }

  .theme-toggle-wrap--mobile .theme-toggle__btn svg { width: 15px; height: 15px; }

  /* The row has to be allowed to shrink, or flex children at their natural
     width overflow no matter how small the toggle gets. */
  .header__mobilebtn-wrap { min-width: 0; }
  .header__mobilebtn-wrap > * { flex-shrink: 1; min-width: 0; }
}

/* Bare <span> children of the trust-pill rows, styled by the parent on the
   light page and therefore carrying its ink (#1e2d3a) into the dark one. */
.page-dark .trial-how__trust-pills span,
.page-dark .guest-trust-pills span {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--nt-line);
  color: var(--nt-muted) !important;
}

/* --- the gradient-border cards ------------------------------------------- */

/* `background: linear-gradient(#fff,#fff) padding-box, <gradient> border-box`
   is the gradient-border trick: the first layer fills the card, the second
   paints the transparent border. A plain `background:` override cannot reach
   the fill without also destroying the border, so both layers are restated --
   the card goes dark, the mint-to-lavender edge stays, and on this ground it
   reads as a deliberate accent rather than a leftover. */
.page-dark .trial-how .guest-card,
.page-dark .guest-card,
.page-dark .oa-modal__content {
  background:
    linear-gradient(var(--nt-card), var(--nt-card)) padding-box,
    linear-gradient(to right, #74ebd5, #9face6) border-box !important;
  color: var(--nt-ink);
}

.page-dark .guest-card p,
.page-dark .oa-modal__content p { color: var(--nt-muted); }

/* The closing banner is a full mint-to-lavender fill chosen against a white
   page. On the stage it glares, and its body copy -- dark ink picked for that
   pastel -- is close to unreadable. A dark card with the gradient kept as an
   edge says the same thing without shouting. */
.page-dark .product-final-cta__inner {
  background:
    linear-gradient(var(--nt-card), var(--nt-card)) padding-box,
    linear-gradient(to right, #74ebd5, #9face6) border-box !important;
  border: 2px solid transparent;
}

.page-dark .product-final-cta__inner h2 { color: var(--nt-ink-strong) !important; }
.page-dark .product-final-cta__inner p { color: var(--nt-muted) !important; }

/* --- mobile header ------------------------------------------------------- */

/* On a phone the floating card is the <header> (.header, glass above); its
   content row stays clear so the card reads as one surface, edged by a
   hairline all round rather than only at the bottom. */
.page-dark .header__content {
  background: transparent;
}

@media (max-width: 991px) {
  .page-dark .header {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 991px) {
  /* The switch belongs in the menu, not the bar: three controls plus a logo
     do not fit 390px, and it is a setting, not a primary action. */
  .theme-toggle-wrap--mobile { display: none !important; }

  .theme-toggle-wrap--menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oa-space-4);
    width: 100%;
    padding: var(--oa-space-4) 0 0;
    margin-top: var(--oa-space-3);
    border-top: 1px solid var(--nt-line);
  }
}

/* Desktop keeps it in the bar; the menu copy is mobile-only. */
.theme-toggle-wrap--menu { display: none; }

/* The banner's CTA was styled to sit on the old pastel gradient -- a pale
   fill with soft ink, which against the dark card it now sits on has almost
   no contrast. It is the page's last call to action, so it gets the solid
   accent every other primary button uses. */
.page-dark .product-final-cta__inner .product-btn,
.page-dark .product-final-cta .product-btn {
  background: var(--oa-accent) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(108, 99, 255, 0.35) !important;
}

.page-dark .product-final-cta__inner .product-eyebrow {
  background: var(--oa-accent-track) !important;
  color: var(--nt-accent-ink) !important;
}

/* --- the about page ------------------------------------------------------ */

/* Its hero picked up the dark ground from the shared rules, but the three
   sections below it carry their own white and kept it -- and because the
   shared heading rule had already turned their titles near-white, "Our Story"
   was white on white. A page half-converted reads worse than one not
   converted at all. */
.page-dark .section-light,
.page-dark .vision-section,
.page-dark .team-section {
  background: var(--nt-ground) !important;
  color: var(--nt-ink);
}

.page-dark .section-light h2,
.page-dark .vision-section h2,
.page-dark .team-section h2 { color: var(--nt-ink-strong) !important; }

.page-dark .section-light p,
.page-dark .vision-section p,
.page-dark .team-section p { color: var(--nt-muted) !important; }

.page-dark .section-light strong,
.page-dark .vision-section strong { color: var(--nt-ink) !important; }

/* The vision card is a pastel gradient chosen against a white section. Kept
   as an edge rather than a fill, the same treatment the guest card and the
   product banner get. */
.page-dark .vision-card {
  background:
    linear-gradient(var(--nt-card), var(--nt-card)) padding-box,
    linear-gradient(90deg, #a9f1df, #7cd3f7) border-box !important;
  border: 2px solid transparent;
  color: var(--nt-ink) !important;
}

.page-dark .vision-card h2,
.page-dark .vision-card h3 { color: var(--nt-ink-strong) !important; }
.page-dark .vision-card p { color: var(--nt-muted) !important; }

.page-dark .team-card,
.page-dark .team-member {
  background: var(--nt-card) !important;
  border: 1px solid var(--nt-line);
  color: var(--nt-ink);
}