/* ============================================================
   Ekly marketing feature pages — DARK THEME + landing parity
   Applied when <html> has class "dark" (set by theme.js, synced
   with the landing site's next-themes localStorage key 'theme').

   Token values below are mapped 1:1 to the landing site's design
   tokens (apps/landing-page/src/app/globals.css :root / .dark) so
   the marketing pages render as the same design system. Single
   source — linked by all feature pages, loads after each page's
   inline <style> so it wins the cascade.
   ============================================================ */
html.dark{
  /* surfaces — landing .dark tokens */
  --bg:#0A0810;        /* plum-950  (background) */
  --paper:#120E18;     /* plum-900  (soft sections) */
  --tint:#1A1522;      /* plum-800  (tint sections) */
  --card:#120E18;      /* plum-900  (card / surface fill) */
  /* text */
  --ink:#EDE5D8;       /* bone      (headings / foreground) */
  --body:#B6AFC0;      /* dimmed lavender for body copy */
  --muted:#9A9098;     /* warm-500  (muted-foreground) */
  --faint:#6E6570;     /* warm-600 */
  /* hairlines — landing border = warm-800 */
  --line:#2D2835;      /* warm-800 */
  --line-2:#3A3442;    /* warm-700  (emphasis border) */
  /* accents — landing dark primary / ring = plum-300 */
  --accent:#7A5A96;        /* plum-300 */
  --accent-strong:#A88CC0; /* plum-200 */
  --accent-ink:#A88CC0;
  --accent-soft:rgba(122,90,150,.16);
  --plum-300:#A88CC0;  /* one step lighter on dark for hover/emphasis */
  --plum-400:#7A5A96;
  --plum-500:#7A5A96;
  --plum-600:#7A5A96;  /* link / accent TEXT → plum-300 lavender */
  --plum-900:#120E18;  /* real plum-900 (also the .final band base) */
  --plum-950:#0A0810;
  /* deeper shadows on dark */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-md:0 2px 6px rgba(0,0,0,.45), 0 26px 54px -22px rgba(0,0,0,.7);
}

/* ---- nav (hardcoded light values in the base CSS) ---- */
html.dark header.nav{background:rgba(10,8,16,.7)}        /* matches landing --nav-bg dark */
html.dark .nav-links a{color:rgba(237,229,216,.72)}      /* bone / 72 */
html.dark .nav-links a:hover{color:var(--accent-strong);background:rgba(255,255,255,.06)}
html.dark .nav-cta .contact{color:var(--ink);background:rgba(255,255,255,.06)}
html.dark .nav-cta .contact:hover{background:rgba(255,255,255,.12)}
html.dark .nav-hairline{background:linear-gradient(to right,transparent 0%,rgba(255,255,255,.12) 25%,rgba(255,255,255,.12) 75%,transparent 100%)}

/* ---- theme toggle button ---- */
html.dark .theme-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--ink)}
html.dark .theme-toggle:hover{background:rgba(255,255,255,.12)}

/* ---- primary button = landing dark primary (plum-300 fill, plum-950 text) ---- */
html.dark .btn-primary{background:#7A5A96;color:#F4F0EA}
html.dark .btn-primary:hover{background:#A88CC0}
html.dark .step .sn,
html.dark .pbadge{background:#7A5A96;color:#F4F0EA}

/* ---- ghost button ---- */
html.dark .btn-ghost:hover{background:rgba(255,255,255,.05);border-color:var(--accent-strong);color:var(--accent-strong)}

/* ---- final CTA band: lift it off the page bg + keep a bright button ---- */
html.dark .final{background:#1A1522}                     /* plum-800, sits above plum-950 page */
html.dark .final .btn-primary{background:#EDE5D8;color:#2E1A3A}
html.dark .final .btn-primary:hover{background:#F4F0EA}

/* ---- screenshot frames: swap the warm plum drop-shadow for a black one ---- */
html.dark .shot{box-shadow:0 2px 8px rgba(0,0,0,.45), 0 40px 84px -34px rgba(0,0,0,.7)}

/* ---- partner logo strip: dark monochrome marks → light silhouettes ---- */
html.dark .logo-row img{filter:grayscale(1) brightness(0) invert(1);opacity:.5}
html.dark .logo-row img:hover{filter:grayscale(1) brightness(0) invert(1);opacity:.85}

/* ---- brand logo (header + footer): swap the dark-plum mark for the
        bone variant in dark mode (matches the landing /features page).
        Both render display:block in BOTH modes so toggling never changes
        the box (same 112x46 geometry) — no layout shift. ---- */
.logo-light,.logo-dark{display:block}
.logo-dark{display:none}
html.dark .logo-light{display:none}
html.dark .logo-dark{display:block}

/* ---- TEMPORARY: hide the testimonials section (placeholder quotes) until
        real, attributed testimonials are ready. Delete this rule to restore. ---- */
#proof{display:none}
