/* ================================================================
   Merge & Land - Dark mode
   Applies automatically when the visitor's device is set to dark.
   Loaded after each page's inline <style> so these rules win.
   ================================================================ */

:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {

  /* ---- remap the core palette (covers most text, borders, alt panels) ---- */
  :root {
    --ink:#EDEEEF;
    --body:#C2C6C8;
    --faint:#8C9296;
    --line:#2C2F33;
    --bg:#0F1113;
    --bg-alt:#17191C;
    --accent-tint:#13251E;   /* light green band -> deep green band */
  }

  /* ---- page canvas ---- */
  body { background:#0F1113 !important; }

  /* ---- sticky nav (was frosted white) ---- */
  nav { background:rgba(16,18,20,.82) !important; border-bottom-color:#26292D !important; }

  /* ---- links / accents that were deep green (too dark on black) ---- */
  a { color:#4FBF95; }
  .back, .link-chevron, .link-chevron:hover,
  .doc-note a, .tier-bullets li::before { color:#4FBF95 !important; }
  /* keep nav + hero + footer link colours as their own rules set them */
  .nav-links a:not(.btn) { color:var(--body) !important; }

  /* ---- white cards / panels across every page ---- */
  .card, .faq, .item, .panel, .tier,
  .tier-card {
    background:#1B1E21 !important;
    border-color:#2C2F33 !important;
    box-shadow:0 1px 2px rgba(0,0,0,.35), 0 20px 44px -26px rgba(0,0,0,.7) !important;
  }
  /* keep the Pro "Most popular" gold glow + ring in dark mode too */
  .tier-card.featured {
    box-shadow:0 1px 2px rgba(0,0,0,.4), 0 26px 52px -20px rgba(217,177,92,.45), 0 0 0 2px var(--gold) !important;
  }

  /* ---- form inputs ---- */
  input[type=email], input[type=text], input[type=tel], textarea, select {
    background:#101315 !important;
    color:#EDEEEF !important;
    border-color:#33363B !important;
  }
  input::placeholder, textarea::placeholder { color:#7C8286 !important; }

  /* ---- tinted lead-magnet bands ---- */
  .rl { background:#13251E !important; border-top-color:#26292D !important; }

  /* the Integration Risk Starter sits in a white card in both colour
     schemes, like the Board View cards. Its heading and body colours are
     hardcoded dark in the page, so they only read on a white surface -
     which also means the global input override has to be undone inside it. */
  .rl-inner {
    background:#ffffff !important;
    border-color:transparent !important;
    box-shadow:0 1px 2px rgba(29,29,31,.08),0 30px 60px -30px rgba(0,0,0,.7) !important;
  }
  .rl-inner input[type=email] {
    background:#ffffff !important;
    color:#1D1D1F !important;
    border-color:#D2D2D7 !important;
  }
  .rl-inner input::placeholder { color:#6E6E73 !important; }

  /* ---- misc light fills ---- */
  .bar-track { background:#2C2F33 !important; }
  /* ...but the board preview is a faithful copy of the Board View output,
     which is light in every colour scheme ---- */
  .doc-frame .bar-track { background:#E9E9EC !important; }

  /* ---- email capture pill: white in light mode, dark glass in dark mode.
         A white slab in the middle of the green descent reads as a hole. ---- */
  /* ---- email capture card: white in both colour schemes, styled like the
         Board View cards - white surface, no hard border, soft shadow.
         The light palette is re-declared inside it so the nested text,
         which uses these variables, stays dark and readable. ---- */
  .lm-form {
    background:#ffffff !important;
    border-color:transparent !important;
    box-shadow:0 1px 2px rgba(29,29,31,.08),0 30px 60px -30px rgba(0,0,0,.7) !important;
    --ink:#1D1D1F;
    --body:#424245;
    --faint:#6E6E73;
    --line:#E9E9EC;
    --bg:#FFFFFF;
    --bg-alt:#F5F5F7;
  }
  .lm-form h3, .lm-form strong { color:#1D1D1F !important; }
  .lm-form p, .lm-form li, .lm-form span { color:#424245 !important; }
  .lm-form input[type=email] {
    background:#FFFFFF !important;
    color:#1D1D1F !important;
    border-color:#D2D2D7 !important;
  }
  .lm-form input[type=email]:focus { border-color:#1E8E5A !important; }
  .lm-form input::placeholder { color:#6E6E73 !important; }
  .lm-form .lm-note { color:#6E6E73 !important; }
  .lm-form .lm-note a { color:#0E5C43 !important; }

  /* ---- feature cards: they flip to white on hover in light mode ---- */
  .feature:hover { background:linear-gradient(165deg,#163A2E 0%,#0E241C 100%) !important; }
  .feature:hover h3, .feature:hover .f-files { color:#ffffff !important; }
  .feature:hover p { color:#C7DAD2 !important; }
  .feature:hover .area, .feature:hover .f-files i { color:var(--gold) !important; }
  .feature:hover .f-files { border-top-color:rgba(185,207,198,.16) !important; }

  /* ---- section flow, dark mode.
         In light mode the page breaks to white at #author for relief. In
         dark mode there is no white to break to, so the deep-green descent
         carries all the way to the footer. Each section starts on exactly
         the colour the one above ends on:
         pricing #0F2A22 > author > lm > final > footer #071411 ---- */
  #author { background:linear-gradient(180deg,#0F2A22 0%,#000000 100%) !important; }
  #author h2 { color:#ffffff !important; }
  #author .sec-head p { color:#B9CFC6 !important; }
  .verify-lead { background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.14) !important; }
  .verify-lead h3 { color:#ffffff !important; }
  .verify-lead p { color:#B9CFC6 !important; }
  .vcard { background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.12) !important; }
  .vcard h4 { color:#ffffff !important; }
  .vcard p { color:#B9CFC6 !important; }
  .vcard a { color:#5FCFA0 !important; }
  .cred-row { border-color:rgba(185,207,198,.16) !important; }
  .cred-row span { color:#B9CFC6 !important; }
  .cred-row b { color:#ffffff !important; }

  /* .lm is black in both colour schemes - set in the page, nothing to override */

  /* ---- final CTA: white in light mode (set in page), continues the green
         descent into the footer in dark mode ---- */
  .final { background:linear-gradient(180deg,#000000 0%,#0A1F19 100%) !important; border-top-color:transparent !important; }
  .final h2 { color:#ffffff !important; }
  .final p { color:#C2C6C8 !important; }
  .final .final-note { color:#8C9296 !important; }
  .final .final-note a { color:var(--gold) !important; }

  /* ---- download page hero panel ---- */
  .download-section { background:#13251E !important; border-color:rgba(79,191,149,.22) !important; }

  /* ---- proof / screenshot gallery ----
         Nothing to do here: the band is permanently dark in both colour
         schemes and styles itself with fixed colours, and the screenshot
         frames stay white because a picture of Excel shouldn't invert. ---- */

  /* ---- verification lead-in + cards ---- */
  .verify-lead { background:#13251E !important; border-color:rgba(79,191,149,.22) !important; }
  .vcard { background:#1B1E21 !important; border-color:#2C2F33 !important; }
  .vcard a { color:#4FBF95 !important; }

  /* the deep-green hero / pricing / final / footer sections are already
     dark with light text, so they read fine and are left untouched. */
}