/* Dark bands follow the visitor's system setting. The same page stays light otherwise. */
@media (prefers-color-scheme: dark) {
.marketing-site { color-scheme: dark; }

:root { --night: #060b16; --night-2: #0c1527; --night-3: #121d33; }

/* ---------- the flip: dark bands redefine the colour tokens ---------- */
.is-dark {
  --ink: #f4f7fb;
  --ink-2: #a8b3c7;
  --line: rgba(255, 255, 255, .1);
  --bg-soft: rgba(255, 255, 255, .05);
  --blue-50: rgba(54, 154, 255, .14);
  --blue-100: rgba(54, 154, 255, .24);
  --blue-700: #8cc5ff;
  color: var(--ink);
}
.band-dark { background: var(--night); margin-top: var(--gap); padding-bottom: var(--gap); position: relative; overflow: hidden; }
.band-dark::before {
  content: ""; position: absolute; left: 50%; top: -30%; width: min(1200px, 120vw); height: 60%;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(54, 154, 255, .22), transparent);
}
.band-dark > * { position: relative; }

/* product fragments stay light: they are the app's own windows */
.is-dark .tray, .is-dark .toast, .is-dark .ui-card, .is-dark .board {
  --ink: #0b1b33; --ink-2: #44506a; --line: #e4e9f1; --bg-soft: #f5f8fc;
  --blue-50: #eef6ff; --blue-100: #dcebff; --blue-700: #0858ad;
  color: var(--ink);
}

/* ---------- nav: a dark glass pill ---------- */
.marketing-site .nav-inner { background: rgba(10, 17, 32, .78); border-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 36px -12px rgba(0, 0, 0, .6); }
.marketing-site .logo { color: #fff; }
.marketing-site .nav-links a, .marketing-site .nav-signin { color: #b9c3d6; }
.marketing-site .nav-links a:hover, .marketing-site .nav-signin:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- hero ---------- */
.hero.is-dark {
  margin-top: -12px; /* run under the floating nav's top gap, so no white strip shows above it */
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(54, 154, 255, .28), transparent 70%),
    var(--night);
}
.hero.is-dark::before { opacity: .9; }
.hero.is-dark::after { background: radial-gradient(closest-side, rgba(54, 154, 255, .65), rgba(0, 100, 201, .35) 55%, transparent 100%); }
.is-dark .hero-title { color: #fff; }
.is-dark .grad-text { background: linear-gradient(135deg, #6db8ff 0%, #369aff 55%, #1f7ee8 100%); -webkit-background-clip: text; background-clip: text; }
.is-dark .pill { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #c9d2e3; }
.is-dark .tray { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: 0 40px 100px -30px rgba(0, 100, 201, .7), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.is-dark .toast { box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55); }

/* ---------- buttons on dark ---------- */
.is-dark .btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.is-dark .btn-ghost:hover { border-color: #fff; }
.is-dark .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.is-dark .btn-outline:hover { background: #fff; border-color: #fff; color: var(--night); }
.is-dark .btn-primary { box-shadow: 0 10px 30px -8px rgba(54, 154, 255, .65); }
.is-dark .text-link, .is-dark .section-sub a, .is-dark .pricing-fine a { color: #6fb6ff; }

/* ---------- channels strip ---------- */
.channels.is-dark { background: var(--night); padding-bottom: clamp(56px, 7vw, 88px); }
.is-dark .channels-list li { color: #7f8ba3; }

/* ---------- features ---------- */
.is-dark .feature { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
.is-dark .feature:hover { background: rgba(255, 255, 255, .05); border-color: rgba(54, 154, 255, .45); box-shadow: 0 20px 50px -20px rgba(54, 154, 255, .35); }
.is-dark .icon { box-shadow: 0 8px 22px -6px rgba(54, 154, 255, .7); }

/* ---------- facts ---------- */
.is-dark .fact { background: var(--night-3); }
.is-dark .fact-blue { background: linear-gradient(160deg, #369aff 0%, #0064c9 100%); box-shadow: 0 30px 70px -30px rgba(54, 154, 255, .7); }
.is-dark .fact-dark { background: #fff; color: #0b1b33; }
.is-dark .fact-dark p:last-child { color: #44506a; }

/* ---------- pricing ---------- */
.is-dark .plan { background: var(--night-2); border-color: rgba(255, 255, 255, .08); }
.is-dark .plan-featured { background: linear-gradient(160deg, #369aff 0%, #0064c9 100%); border-color: transparent; box-shadow: 0 40px 90px -30px rgba(54, 154, 255, .7); }
.is-dark .plan-featured .plan-for, .is-dark .plan-featured .price-per { color: rgba(255, 255, 255, .85); }
.is-dark .plan-featured .plan-tag { background: #fff; color: #0064c9; }
.is-dark .plan-featured .btn-primary { background: #fff; color: #0064c9; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
.is-dark .plan-featured .btn-primary:hover { background: #eef6ff; filter: none; }
.is-dark .plan-featured .checks li::before { background-color: rgba(255, 255, 255, .22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.is-dark .checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%238cc5ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- footer ---------- */
.band-footer { margin-top: var(--gap); padding-bottom: 0; }
.band-footer::before { top: auto; bottom: -40%; }
.is-dark .footer nav a { color: #a8b3c7; }
.is-dark .footer nav a:hover { color: #fff; }
.is-dark .footer-h { color: #fff; }
.is-dark .footer .logo,
.is-dark .footer-mail,
.is-dark .footer-word { color: #fff; }
.is-dark .footer-mail:hover { color: #fff; }

/* =========================================================
   Inner pages (features, pricing, download, support, training, vs Loom)
   ========================================================= */
.marketing-site .nav-links a[aria-current="page"] { background: rgba(54, 154, 255, .2); color: #fff; }

/* a dark band that continues straight from the hero, with no white gap */
.band-flush { margin-top: 0; }

/* cards and panels */
.is-dark .card { background: var(--night-2); border-color: rgba(255, 255, 255, .08); }
.is-dark .card:hover { border-color: rgba(54, 154, 255, .45); box-shadow: 0 20px 50px -20px rgba(54, 154, 255, .35); }
.is-dark .card-pick { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(54, 154, 255, .3); }
.is-dark .card-icon { box-shadow: 0 8px 22px -6px rgba(54, 154, 255, .7); }
.is-dark .note { background: var(--night-3); }
.is-dark .choose-card:not(.choose-a) { background: var(--night-3); }
.is-dark .icon-sm { color: #8cc5ff; }
.is-dark .visual { background: linear-gradient(160deg, rgba(54, 154, 255, .22), rgba(54, 154, 255, .06) 70%); }
.is-dark .shelf { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: 0 40px 100px -30px rgba(0, 100, 201, .7); }

/* the comparison table */
.is-dark .table-wrap { background: var(--night-2); border-color: rgba(255, 255, 255, .1); }
.is-dark .compare thead th { background: rgba(255, 255, 255, .04); }
.is-dark .compare thead .col-on { background: rgba(54, 154, 255, .3); color: #fff; }
.is-dark .compare .col-on { background: rgba(54, 154, 255, .1); }
.is-dark .compare .yes { background: rgba(54, 154, 255, .25); color: #8cc5ff; }
.is-dark .compare .no { background: rgba(255, 255, 255, .08); color: #7f8ba3; }

/* questions on a dark band */
.is-dark.faq, .is-dark .faq { color: var(--ink); }
.is-dark .faq details { background: var(--night-2); border-color: rgba(255, 255, 255, .08); }
.is-dark .faq details[open] { border-color: rgba(54, 154, 255, .45); box-shadow: none; }
.is-dark .faq summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.is-dark .faq details a { color: #6fb6ff; }

.marketing-site .lang summary { color: #b9c3d6; }
.marketing-site .lang summary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.marketing-site .lang-menu { background: #121a2b; border-color: rgba(255, 255, 255, .08); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.marketing-site .lang-menu a { color: #e8eef8; }
.marketing-site .lang-menu a:hover,
.marketing-site .lang-menu a[aria-current='page'] { background: rgba(54, 154, 255, .2); color: #fff; }
}