/* Shared appearance controls. Artwork and product screenshots retain their colours. */
:root {
  color-scheme: light;
  --page: #ffffff;
  --panel: #ffffff;
  --raised: #f2f5f7;
  --input: #ffffff;
  --accent-panel: #e7f5fb;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b1623;
  --panel: #122132;
  --raised: #192b3e;
  --input: #0d1b2a;
  --accent-panel: #14364a;
  --ink: #edf3f9;
  --muted: #afbdce;
  --line: #304358;
  --soft: #101e2d;
  --blue-soft: #14364a;
  --cyan-dark: #76d1f1;
}

body { background: var(--page); }
.site-header { background: var(--page); border-bottom-color: var(--line); }
#main-nav { margin-left: auto; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.theme-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.theme-toggle:hover { background: var(--raised); }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
.menu-toggle { color: var(--ink); }

/* Surface hierarchy throughout the nine pages. */
[data-theme="dark"] :is(.intro-strip, .section-nav, .comparison-table caption) { background: var(--soft); }
[data-theme="dark"] :is(.feature-note, .support-card, .download-card, .guide-card, .empty-state, .skip-link, dialog) { background: var(--panel); }
[data-theme="dark"] .feature-note:hover { background: var(--raised); }
[data-theme="dark"] :is(.feature-note-blue, .soft-support, .activation-banner, .price-card) { background: var(--accent-panel); border-color: var(--line); }
[data-theme="dark"] .feature-note-blue:hover { background: #1b4358; }
[data-theme="dark"] .pro-banner { background: linear-gradient(110deg, var(--panel), var(--soft)); }
[data-theme="dark"] :is(.featured-download, .price-card-bottom, .transparency-mark) { border-color: var(--line); }
[data-theme="dark"] .comparison-table thead th { background: var(--raised); color: var(--ink); }
[data-theme="dark"] .comparison-table tr:nth-child(even) { background: var(--soft); }
[data-theme="dark"] .noscript-note { background: #3b3218; color: #f5df9d; }

/* Controls, selected states and keyboard focus. */
[data-theme="dark"] #main-nav > .nav-support { background: var(--accent-panel); color: var(--cyan-dark); border-color: #315c71; }
[data-theme="dark"] .button-dark { background: #264a65; color: #f5faff; border-color: #40667f; }
[data-theme="dark"] .button-dark:hover { background: #325d7d; }
[data-theme="dark"] .button-outline { border-color: #62768c; }
[data-theme="dark"] .button-outline:hover { background: var(--raised); }
[data-theme="dark"] :is(.line-icon, .journey-steps > li > span, .pro-pill) { background: var(--accent-panel); color: var(--cyan-dark); border-color: #315c71; }
[data-theme="dark"] .frequency-switch { background: var(--input); }
[data-theme="dark"] .frequency-switch label > span { color: var(--muted); }
[data-theme="dark"] .frequency-switch input:checked + span { background: var(--raised); color: var(--cyan-dark); }
[data-theme="dark"] .amount-option > span { background: var(--input); color: var(--ink); border-color: #50677e; }
[data-theme="dark"] .amount-option input:checked + span { background: var(--accent-panel); color: #a7e6ff; border-color: #56bfe8; box-shadow: inset 0 0 0 1px #56bfe8; }
[data-theme="dark"] .amount-option:hover > span { border-color: #76d1f1; }
[data-theme="dark"] :is(.currency-input input, .help-search) { background: var(--input); border-color: #50677e; }
[data-theme="dark"] input::placeholder { color: #8c9fb4; opacity: 1; }
[data-theme="dark"] :focus-visible,
[data-theme="dark"] :is(.frequency-switch, .amount-option) input:focus-visible + span { outline-color: #76d1f1; }

/* Text originally coloured for white surfaces. */
[data-theme="dark"] :is(.feature-number, .image-caption, .article-meta, .price-card > .preview-price, .price-card-bottom, .support-summary > span, .currency-input > span, .dialog-close) { color: var(--muted); }
[data-theme="dark"] .checkout-note { color: var(--muted) !important; }
[data-theme="dark"] :is(.text-blue, .feature-note-blue .feature-number, .included, .support-card-footer a, .transparency-mark, .outline-list > div > span, .faq-list summary:after) { color: var(--cyan-dark); }
[data-theme="dark"] .check-list li::before,
[data-theme="dark"] .plain-steps li::marker { color: #76d1f1; }
[data-theme="dark"] .form-error { color: #ffb3a8; }

@media (min-width: 901px) and (max-width: 1100px) {
  .nav-wrap { gap: 16px; padding-inline: 24px; }
  #main-nav { gap: 16px; }
  #main-nav > a { font-size: 13px; }
}
@media (max-width: 900px) {
  #main-nav { margin-left: 0; background: var(--page); }
  .header-actions { margin-left: auto; }
}
@media (max-width: 600px) {
  .nav-wrap { padding-inline: 16px; gap: 12px; }
  .header-actions { gap: 8px; }
  .brand { font-size: 21px; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
}
@media (max-width: 370px) {
  .menu-toggle { width: 42px; height: 42px; justify-content: center; padding: 0; }
  .menu-toggle > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}