/* ─────────────────────────────────────────────────────────────────────────
   Additions on top of the partner's clean theme (clean.css), for the parts
   of this site his copy does not have or does not cover yet. Loaded right
   after clean.css on every page; kept apart so a new clean.css from him can
   replace the old one whole.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Top bar: the sun/moon button makes it one button wider, so on small
   laptops and tablets the page links give up a little padding to keep
   "Get started" on screen. ── */
@media (min-width: 721px) and (max-width: 880px) {
  .nav-links a {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ── Night mode in pure black: the page is #000, cards and raised fills
   only a step above it, in neutral greys instead of clean.css's zinc. ── */
html[data-theme="dark"] {
  --page: #000000;
  --paper: #0a0a0a;
  --paper-deep: #141414;
  --line: #262626;
  --line-strong: #363636;
  --dk-sub: #141414;
  --dk-sub-2: #1f1f1f;
  /* The day's orange: white button text on clean.css's brighter night orange
     read at 2.8:1; this one holds 3.6:1, and still 5:1 as text on black. */
  --accent: #ea580c;
  --azure: #ea580c;
  --sanguine: #ea580c;
}
html[data-theme="dark"] .sky {
  background: var(--page);
}
html[data-theme="dark"] .nav,
html[data-theme="dark"] .nav.has-menu,
html[data-theme="dark"] .nav.has-menu.is-scrolled {
  background: rgba(0, 0, 0, 0.8);
}

/* ── The home headline in capitals. ── */
.hero h1.hero-tagline,
.hero h1.hero-tagline .shine {
  text-transform: uppercase;
}

/* ── Night mode: the home page's opening cover (intro.css paints it on
   light paper with dark letters). ── */
html[data-theme="dark"] .intro-stage {
  color: #f4f4f5;
}
html[data-theme="dark"] .intro-stage::before {
  background: var(--page);
}
html[data-theme="dark"] .intro-btn.intro-register {
  color: #f4f4f5;
  border-color: rgba(244, 244, 245, 0.75);
  box-shadow: none;
}
html[data-theme="dark"] .intro-welcome-line {
  color: rgba(244, 244, 245, 0.82);
}
html[data-theme="dark"] .intro-welcome-tag {
  color: rgba(244, 244, 245, 0.7);
}
html[data-theme="dark"] .intro-hint {
  color: rgba(244, 244, 245, 0.6);
}

/* ── Night mode: the checkout card stays light. The QR code needs a white
   ground to scan, so the card reads from the light tokens again. ── */
html[data-theme="dark"] .pay-page {
  color-scheme: light;
  --ink: #18181b;
  --ink-soft: #52525b;
  --ink-faint: #71717a;
  --graphite: #18181b;
  --accent: #ea580c;
  --accent-deep: #c2410c;
  --accent-soft: #fff4ec;
  --azure: #ea580c;
  --azure-deep: #c2410c;
  --sanguine: #ea580c;
  --leaf: #15803d;
  --paper: #ffffff;
  --paper-deep: #f4f4f5;
  --page: #fafaf9;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --pencil: rgba(24, 24, 27, 0.08);
}

/* ── Readable small print: the install note and the footer's year sat in a
   fixed light grey, and a few text links and the Plans FAQ headings in the
   bright button orange - all under 3.5:1 on the white page. ── */
html .show > .cli-install-note,
html body .site-foot .foot-copy {
  color: var(--ink-faint);
}

.auth-alt a,
.st-help a,
.pay-note a,
.pay-link,
.pl-faq h3 {
  color: var(--accent-deep);
}

/* ── Night mode: the unselected pills ("Desktop app", "10x") keep their
   light-mode grey in clean.css, too faint on the dark switch. ── */
html[data-theme="dark"] .show-foot .show-tab:not(.is-on):not(:hover),
html[data-theme="dark"] .plans .card .plan-switch-opt:not(.is-on):not(:hover) {
  color: var(--ink-faint);
}

/* ── Night mode: the Status page's state colours, as dark tints. ── */
html[data-theme="dark"] .status-main {
  --st-ok-ink: #4ade80;
  --st-ok-tint: rgba(34, 197, 94, 0.14);
  --st-warn-ink: #fbbf24;
  --st-warn-tint: rgba(245, 158, 11, 0.14);
  --st-down-ink: #f87171;
  --st-down-tint: rgba(239, 68, 68, 0.14);
  --st-none: #3b3b42;
}

/* ── What's new on the home page: two films side by side. Each frame lifts
   and glows a little under the pointer; the play button starts it with
   sound and the browser's own controls (home.js). ── */
.films {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  margin-top: 40px;
}

.film {
  margin: 0;
}

.film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0b0907;
  box-shadow: var(--shadow-lg);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease;
}

.film:hover .film-frame {
  transform: translateY(-4px);
  box-shadow: 0 34px 60px -30px rgba(234, 88, 12, 0.45), var(--shadow-lg);
}

.film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.film:not(.is-on):hover video {
  transform: scale(1.035);
}

.film-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end start;
  padding: 14px;
  border: 0;
  background: none;
  cursor: pointer;
}

/* A small pill in the corner, so the poster stays clear. */
.film-play span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 11px;
  border: 1px solid rgba(24, 24, 27, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #18181b;
  font: 600 14px/1 var(--font-body);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.film-play svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.film-play small {
  font: 500 12px/1 var(--font-mono);
  opacity: 0.6;
}

.film:hover .film-play span,
.film-play:focus-visible span {
  transform: scale(1.05);
  background: var(--accent);
  color: #fff;
}

.film-play:focus-visible {
  outline: none;
}

.film-play:focus-visible span {
  box-shadow: var(--ring), 0 8px 24px -8px rgba(0, 0, 0, 0.35);
}

.film.is-on .film-play {
  display: none;
}

.film figcaption {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 18px;
  padding: 0 4px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.film-num {
  color: var(--accent);
  font: 500 12px/1 var(--font-mono);
}

.film figcaption strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .films {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-frame,
  .film video,
  .film-play span {
    transition: none;
  }

  .film:hover .film-frame,
  .film:not(.is-on):hover video {
    transform: none;
  }
}

/* Support cards: each channel shows its own brand mark in its brand colour. */
.contact-icon.brand {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}
.contact-icon.brand svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  stroke: none;
}