/* apple-dark.css: dark mode for the Apple theme. GENERATED by
   scripts/build-dark-css.js from apple-theme.css; edit that script (its
   DARK_EXTRA block for hand-written fixes), not this file.
   Loaded with media="(prefers-color-scheme: dark)". */
:root { color-scheme: dark; }
:root {
    --neon-pink: rgb(82, 168, 255);
    --neon-cyan: rgb(82, 168, 255);
    --neon-yellow: rgb(255, 160, 82);
    --neon-green: rgb(110, 226, 140);
    --neon-orange: rgb(255, 160, 82);
    --neon-purple: rgb(161, 161, 166);
    --neon-blue: rgb(82, 168, 255);
    --bg-dark: rgb(28, 28, 30);
    --bg-darker: rgb(28, 28, 30);
    --bg-card: rgb(28, 28, 30);
    --bg-card-hover: rgb(28, 28, 30);
    --primary-color: rgb(82, 168, 255);
    --dark-bg: rgb(28, 28, 30);
    --darker-bg: rgb(28, 28, 30);
    --light-text: rgb(245, 245, 247);
    --gray-text: rgb(161, 161, 166);
    --text-color: rgb(245, 245, 247);
    --text-primary: rgb(245, 245, 247);
    --text-secondary: rgb(161, 161, 166);
    --text-muted: rgb(152, 152, 157);
    --accent-gradient: linear-gradient(rgb(82, 168, 255), rgb(82, 168, 255));
    --card-bg: rgb(28, 28, 30);
    --surface-1: rgb(28, 28, 30);
    --surface-2: rgb(28, 28, 30);
    --surface-solid-1: rgb(28, 28, 30);
    --surface-solid-2: rgb(28, 28, 30);
    --border-subtle: rgba(255, 255, 255, 0.16);
    --border-soft: rgb(72, 72, 74);
    --border-strong: rgb(72, 72, 74);
    --a-bg: rgb(28, 28, 30);
    --a-tile: rgb(28, 28, 30);
    --a-line: rgba(255, 255, 255, 0.16);
    --a-line-2: rgb(72, 72, 74);
    --a-text: rgb(245, 245, 247);
    --a-text-2: rgb(209, 209, 214);
    --a-dim: rgb(161, 161, 166);
    --a-faint: rgb(161, 161, 166);
    --a-blue: rgb(82, 168, 255);
    --a-blue-hover: rgb(82, 169, 255);
    --a-link: rgb(82, 168, 255);
    --a-green: rgb(110, 226, 140);
    --a-orange: rgb(255, 160, 82);
    --a-red: rgb(255, 82, 82);
    --a-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    --a-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.32)
}
header {
    background: rgba(36, 36, 40, 0.88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.112) !important
}
.nav-links {
    background: rgb(36, 36, 40) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.112) !important
}
main > section:nth-of-type(even) {
    --a-tile: rgb(28, 28, 30)
}
.features-grid .feature-item {
    background: rgb(28, 28, 30) !important
}
.app-card .platform-badge, .app-card .app-badge {
    background: rgb(28, 28, 30) !important
}
input, select, textarea {
    background: rgb(28, 28, 30) !important
}
.modal-content, .policy-dialog, [id$="Modal"] > div {
    background: rgb(28, 28, 30) !important
}
.floating-back-to-top, .floating-fb, .jb-helpbot-toggle {
    background: rgb(36, 36, 40) !important;
    border: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body :is(.floating-back-to-top, .floating-fb, .jb-helpbot-toggle) {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28) !important
}
.floating-fb svg path {
    fill: rgb(87, 158, 250) !important
}
.jb-helpbot-popup {
    background: rgb(28, 28, 30) !important
}
.jb-helpbot-chip, .jb-helpbot-action {
    background: rgb(28, 28, 30) !important
}
.hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href]:hover {
    background: rgb(28, 28, 30) !important
}
#announcementsContent > div, #serviceStatusContent > div {
    background: rgb(28, 28, 30) !important
}
.carousel-nav {
    background: rgba(36, 36, 40, 0.98) !important
}
.apps-nav a:hover, .apps-nav button:hover, .apps-nav .is-active, .apps-nav .is-current, .apps-nav [aria-current], .apps-nav .active {
    background: rgb(28, 28, 30) !important
}
.app-screenshots-wrapper::after {
    background: linear-gradient(90deg, rgba(36, 36, 40, 0.08), var(--a-tile)) !important
}
.ss-shot {
    background: rgb(28, 28, 30) !important
}
html body .profile-glow-badge img.profile-pic, html body img.profile-pic {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.36) !important
}
@media (max-width: 1099px) {
    .nav-links {
        background: rgb(28, 28, 30) !important
    }
}
:root {
    --a-card: rgb(28, 28, 30);
    --a-sh-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.1), 0 16px 40px rgba(0, 0, 0, 0.12);
    --a-sh-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 12px 28px rgba(0, 0, 0, 0.18), 0 32px 72px rgba(0, 0, 0, 0.24);
    --a-sh-img: 0 2px 6px rgba(0, 0, 0, 0.12), 0 18px 48px rgba(0, 0, 0, 0.32)
}
html body {
    background: rgb(28, 28, 30) !important
}
html body :is(.card, .method-card, .pricing-card, .app-card, .stat-box, .ss-card, .wa-app, .loc-cta, .ss-feature, .ss-cta,
  .success-card, .dl-help-cta, .featured-section, .wa-step,
  .live-telemetry, .loc-stats, .apps-stat, .wa-stat, .sc-stat, .wp-stat, .sc-search-shell, .modal-content, .net-card) {
    border: 1px solid rgba(255, 255, 255, 0.07) !important
}
html body :is(.card, .app-card, .ss-feature, .wa-app, .pricing-card) :is(.platform-badge, .app-badge, .loc-badge, .wa-badge, .ss-badge, .ss-plat, .sc-chip) {
    background: rgb(28, 28, 30) !important
}
html body .app-card .features-grid .feature-item {
    background: rgb(28, 28, 30) !important
}
html body .app-card .features-grid .feature-item:hover {
    background: rgb(28, 28, 30) !important
}
html body #announcementsContent > div, html body #serviceStatusContent > div {
    background: rgb(28, 28, 30) !important
}
html body .card-icon {
    background: linear-gradient(180deg, rgb(28, 28, 30), rgb(14, 26, 42)) !important
}
html body .hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href] {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body .hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href]:hover {
    background: rgb(28, 28, 30) !important
}
html body header.scrolled {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.12) !important
}
html body .site-notice {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body :is(.floating-back-to-top, .floating-fb, .jb-helpbot-toggle) {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 10px 30px rgba(0, 0, 0, 0.28) !important
}
html body .jb-helpbot-popup {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16), 0 30px 80px rgba(0, 0, 0, 0.44) !important
}
html body .profile-glow-badge img.profile-pic {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 24px 50px rgba(0, 0, 0, 0.44) !important
}
html body footer {
    border-top: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body .app-screenshots-wrapper::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(28, 28, 30)) !important
}
html body .app-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body main :is(div, section, aside)[style*="solid #00ff"], html body main :is(div, section, aside)[style*="solid #0ff"],
html body main :is(div, section, aside)[style*="solid rgba(0, 255"], html body main :is(div, section, aside)[style*="solid rgba(0,255"],
html body main :is(div, section, aside)[style*="solid #ff00ff"], html body main :is(div, section, aside)[style*="solid rgba(255, 0, 255"],
html body main :is(div, section, aside)[style*="solid #FFB800"], html body main :is(div, section, aside)[style*="solid #ffb800"] {
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: rgb(28, 28, 30) !important
}
:root {
    --g-fill: rgba(36, 36, 40, 0.66);
    --g-fill-strong: rgba(36, 36, 40, 0.82);
    --g-rim: inset 0 1px 0 rgba(255, 255, 255, 0.114), inset 0 -1px 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.054);
    --g-edge: linear-gradient(135deg, rgb(36, 36, 40) 0%, rgba(255, 255, 255, 0.055) 35%, rgba(255, 255, 255, 0.018) 60%, rgba(36, 36, 40, 0.78) 100%)
}
html {
    background: radial-gradient(900px 700px at 8% 4%, rgba(120, 170, 255, .30), transparent 60%),
    radial-gradient(800px 640px at 96% 18%, rgba(196, 160, 255, .26), transparent 62%),
    radial-gradient(900px 700px at 70% 92%, rgba(42, 25, 14, 0.22), transparent 62%),
    radial-gradient(700px 600px at 12% 88%, rgba(14, 42, 34, 0.22), transparent 60%),
    rgb(28, 28, 30) !important
}
html body main > section:nth-of-type(even)::before {
    background: rgba(255, 255, 255, 0.062) !important
}
html body header {
    background: rgba(36, 36, 40, 0.63) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.108) !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.1) !important
}
html body header.scrolled {
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 10px 34px rgba(0, 0, 0, 0.16) !important
}
@media (min-width: 1100px) {
    html body .nav-links a:hover {
        background: rgba(36, 36, 40, 0.78) !important;
        box-shadow: var(--g-rim), 0 2px 8px rgba(0, 0, 0, 0.12) !important
    }
    html body .nav-links a.active {
        background: rgba(36, 36, 40, 0.93) !important;
        box-shadow: var(--g-rim), 0 2px 10px rgba(0, 0, 0, 0.16) !important
    }
}
@media (max-width: 1099px) {
    html body .nav-links {
        background: rgba(36, 36, 40, 0.78) !important
    }
}
html body :is(.card, .method-card, .pricing-card, .app-card, .stat-box, .ss-card, .wa-app, .loc-cta, .ss-feature, .ss-cta,
  .success-card, .dl-help-cta, .featured-section, .wa-step,
  .live-telemetry, .loc-stats, .apps-stat, .wa-stat, .sc-stat, .wp-stat, .sc-search-shell, .net-card, .site-notice, .modal-content,
  .apps-nav, main :is(div, section, aside)[style*="solid #00ff"]) {
    border: 1px solid rgba(255, 255, 255, 0.099) !important
}
html body :is(.card, .app-card, .ss-feature, .wa-app, .pricing-card) :is(.platform-badge, .app-badge, .loc-badge, .wa-badge, .ss-badge, .ss-plat, .sc-chip),
html body .app-card .features-grid .feature-item, html body #announcementsContent > div, html body #serviceStatusContent > div {
    background: rgba(36, 36, 40, 0.63) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.108), 0 1px 3px rgba(0, 0, 0, 0.1) !important
}
html body .app-card .features-grid .feature-item:hover {
    background: rgba(36, 36, 40, 0.93) !important
}
html body .card-icon {
    background: linear-gradient(180deg, rgba(36, 36, 40, 0.98), rgba(36, 36, 40, 0.78)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(0, 113, 227, .1), 0 4px 12px rgba(0, 113, 227, .12) !important
}
html body .hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href] {
    border: 1px solid rgba(255, 255, 255, 0.108) !important
}
html body .hero .loc-badge {
    box-shadow: var(--g-rim), 0 2px 8px rgba(0, 0, 0, 0.1) !important
}
html body :is(.btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn, .ss-btn:not(.ss-btn--ghost), .download-btn, .jb-helpbot-send) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.054), inset 0 -1px 0 rgba(0, 0, 0, 0.24), 0 6px 18px rgba(0, 113, 227, .32) !important
}
html body :is(.btn, .cyber-btn, .cyber-btn-gold, .nav-btn, .ss-btn--ghost, .wa-cta, .vpn-btn-sm, .vpn-btn-xs, .apps-cta, .paypal-service-btn, #paypalBtn, #paypalDropOffBtn, .paypal-btn, .buy-btn):not(.btn-primary):not(.wa-cta--primary):not(.apps-cta--primary) {
    background: rgba(36, 36, 40, 0.63) !important;
    border: 1px solid rgba(255, 255, 255, 0.135) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.114), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 4px 14px rgba(0, 0, 0, 0.14) !important
}
html body :is(.btn, .cyber-btn, .cyber-btn-gold, .nav-btn, .ss-btn--ghost, .wa-cta, .apps-cta, .paypal-service-btn, #paypalBtn, #paypalDropOffBtn, .paypal-btn, .buy-btn):not(.btn-primary):not(.wa-cta--primary):not(.apps-cta--primary):hover {
    background: rgba(36, 36, 40, 0.93) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(0, 0, 0, 0.2) !important
}
html body :is(.floating-back-to-top, .floating-fb, .jb-helpbot-toggle) {
    background: rgba(36, 36, 40, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.144) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 8px 26px rgba(0, 0, 0, 0.28) !important
}
html body .jb-helpbot-popup {
    background: rgba(36, 36, 40, 0.86) !important;
    border: 1px solid rgba(255, 255, 255, 0.144) !important
}
html body .jb-helpbot-header {
    background: rgba(36, 36, 40, 0.48) !important
}
html body :is(input, select, textarea) {
    background: rgba(36, 36, 40, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.112) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important
}
html body footer {
    background: rgba(36, 36, 40, 0.53) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.126) !important
}
html body :is(.app-card, .wa-app, .ss-feature) {
    background: rgba(36, 36, 40, 0.74) !important
}
html body :is(.app-card, .wa-app, .ss-feature):hover {
    background: rgba(36, 36, 40, 0.86) !important
}
html body :is(.app-screenshots-container, .wa-shots) :is(.ap-shot-frame, .app-screenshot, .wa-shot) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.36) !important
}
html body .primary-cta {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.054), inset 0 -1px 0 rgba(0, 0, 0, 0.24), 0 6px 18px rgba(0, 113, 227, .32) !important
}
html body .secondary-cta, html body .secondary-cta[style] {
    background: rgba(36, 36, 40, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.144) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.114), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 4px 14px rgba(0, 0, 0, 0.16) !important
}
html body .secondary-cta:hover {
    background: rgba(36, 36, 40, 0.96) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(0, 0, 0, 0.2) !important
}
html body .response-time, html body :is(.method-card, .card) [class*="availability"], html body .card p[style*="border-radius"] {
    background: rgba(36, 36, 40, 0.63) !important;
    border: 1px solid rgba(255, 255, 255, 0.144) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important
}
html body .wp-command {
    background: rgba(36, 36, 40, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.126) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 30px rgba(0, 0, 0, 0.14) !important
}
html body .wp-search, html body .wp-sort {
    background: rgba(36, 36, 40, 0.93) !important;
    border: 1px solid rgba(255, 255, 255, 0.112) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important
}
html body .wp-density button[aria-pressed="true"], html body .wp-density button.is-on, html body .wp-density button.active {
    background: rgb(28, 28, 30) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24) !important
}
html body .wp-iconbtn {
    background: rgba(36, 36, 40, 0.93) !important;
    border: 1px solid rgba(255, 255, 255, 0.112) !important
}
html body .wp-chip {
    background: rgba(36, 36, 40, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.098) !important
}
html body .wp-support {
    background: rgba(36, 36, 40, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.135) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--a-sh-1) !important
}
html body .wp-stat {
    border-top: 1px solid rgba(255, 255, 255, 0.099) !important
}
html body .wp-tile {
    background: rgb(28, 28, 30) !important
}
html body .availability-badge {
    background: rgba(36, 36, 40, 0.63) !important;
    border: 1px solid rgba(255, 255, 255, 0.144) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important
}
html body .wp-tile__badge {
    background: rgba(36, 36, 40, 0.93) !important
}
html body .wp-act {
    background: rgba(36, 36, 40, 0.93) !important
}
html body .wp-lb__img {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important
}
html body :is(.wp-lb__btn, .wp-lb__close, .wp-lb__nav) {
    background: rgba(255, 255, 255, 0.031) !important;
    border: 1px solid rgba(255, 255, 255, 0.032) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024) !important
}
html body :is(.wp-lb__btn, .wp-lb__close, .wp-lb__nav):hover {
    background: rgba(255, 255, 255, 0.057) !important
}
html body .wp-lb__btn:not(.wp-lb__btn--ghost), html body #wp-lb-download {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.048), 0 8px 24px -6px rgba(0, 113, 227, .7) !important
}
html body .wp-lb__pos, html body .wp-lb__meter {
    background: rgba(255, 255, 255, 0.033) !important
}
html body :is(.wp-chip[aria-pressed="true"], .wp-chip.is-on, .wp-chip.active,
  .wa-nav-btn.is-current, .cyber-tab.active, .setup-tab.active,
  .droid-tabs button[aria-pressed="true"], .apps-nav .is-current, .apps-nav .is-active),
html body .cyber-btn-gold:not(#_x):not(#_y),
html body a[href*="buymeacoffee"]:not(#_x):not(#_y) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.054), inset 0 -1px 0 rgba(0, 0, 0, 0.24), 0 4px 14px rgba(0, 113, 227, .3) !important
}
html body :is(.cyber-btn-gold, a[href*="buymeacoffee"]):not(#_x):not(#_y):hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.054), 0 10px 26px rgba(0, 113, 227, .38) !important
}
html body select option, html body select optgroup {
    background: rgb(28, 28, 30) !important
}
html body select option:checked {
    background: rgb(28, 28, 30) !important
}
html body :is(#feedbackModal, #allFeedbackModal) > div, html body .wp-keys__panel {
    background: rgba(36, 36, 40, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 80px rgba(0, 0, 0, 0.5) !important
}
html body .wp-keys__panel kbd {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.168) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) !important
}
html body .wp-keys__row {
    border-color: rgba(255, 255, 255, 0.084) !important
}
html body #allFeedbackList > .fb-item:not(#_x) {
    background: rgba(36, 36, 40, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important
}
html body #allFeedbackModal .fb-item__off:not(#_x) {
    color: rgba(245, 245, 247, 0.16) !important;
    -webkit-text-fill-color: rgba(245, 245, 247, 0.16) !important
}
html body :is(a[href*="google.com/maps"], a[href*="maps.app.goo"], a[href*="goo.gl/maps"]):not(.jb-google-review):not(#_x):not(#_y) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.054), 0 6px 18px rgba(0, 113, 227, .3) !important
}
html body :is(.sc-honest, .wa-app-desc, .instructions, .net-banner) {
    border: 1px solid rgba(255, 255, 255, 0.135) !important;
    background: rgba(36, 36, 40, 0.68) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 10px rgba(0, 0, 0, 0.1) !important
}
html body .net-refresh {
    background: rgba(36, 36, 40, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.153) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.16) !important
}
html body .net-refresh:hover {
    background: rgb(36, 36, 40) !important
}
html body {
    --sc-surface-1: rgba(36, 36, 40, 0.7);
    --sc-surface-2: rgba(36, 36, 40, 0.88);
    --sc-surface-3: rgb(28, 28, 30);
    --sc-border: rgba(255, 255, 255, 0.098);
    --sc-border-soft: rgba(255, 255, 255, 0.14);
    --sc-text: rgb(245, 245, 247);
    --sc-dim: rgb(161, 161, 166)
}
html body .sc-reader-panel {
    background: rgba(36, 36, 40, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 80px rgba(0, 0, 0, 0.5) !important
}
html body .sc-reader-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.098) !important
}
html body .sc-code-pill mark {
    background: rgba(42, 36, 14, 0.35) !important
}
html body .sc-fix {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.084) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important
}
html body .sc-fix-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body .sc-meta span {
    background: rgb(28, 28, 30) !important
}
html body .sc-meta .sc-risk--high, html body .sc-meta .sc-irrev {
    color: rgb(255, 82, 99) !important
}
html body .sc-meta .sc-risk--medium {
    color: rgb(255, 198, 82) !important;
    background: rgba(42, 36, 14, 0.16) !important
}
html body .sc-meta .sc-risk--low {
    color: rgb(110, 226, 140) !important
}
html body .sc-when {
    background: rgb(28, 28, 30) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body .sc-why {
    background: rgb(28, 28, 30) !important
}
html body .sc-cmd {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body .sc-cmd-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body .sc-cmd pre, html body .sc-cmd pre * {
    color: rgb(245, 245, 247) !important;
    -webkit-text-fill-color: rgb(245, 245, 247) !important
}
html body .sc-copy {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.112) !important
}
html body .sc-outcome .sc-verify strong {
    color: rgb(110, 226, 140) !important
}
html body .sc-outcome .sc-rollback strong {
    color: rgb(255, 82, 99) !important
}
html body :is(.sc-script-get, .sc-refs a, .sc-related-item, .sc-open, .sc-ask) {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.112) !important
}
html body .sc-console {
    background: rgba(36, 36, 40, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.153) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--a-sh-1) !important
}
html body .sc-console-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body .sc-console-reset {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.112) !important
}
html body .sc-line--you .sc-who {
    color: rgb(110, 226, 140) !important
}
html body .sc-console-input {
    border-top: 1px solid rgba(255, 255, 255, 0.084) !important
}
html body .sc-console-input input {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important
}
html body .sc-console-send {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.054), 0 4px 14px rgba(0, 113, 227, .3) !important
}
html body .sc-console-hint {
    color: rgb(110, 226, 140) !important
}
html body :is(.sc-console-keys kbd, .sc-ask kbd) {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.168) !important
}
html body :is(.modal .modal-content, .policy-dialog) {
    background: rgba(36, 36, 40, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 80px rgba(0, 0, 0, 0.5) !important
}
html body .screenshot-lightbox :is(.lightbox-close, .lightbox-prev, .lightbox-next, button[class*="nav"], button[class*="prev"], button[class*="next"]) {
    background: rgba(255, 255, 255, 0.031) !important;
    border: 1px solid rgba(255, 255, 255, 0.032) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024) !important
}
html body .ap-lb-thumbs .active, html body .ap-lb-thumbs [aria-current="true"], html body .ap-lb-thumbs .is-active, html body .ap-lb-thumbs .is-on {
    border-color: rgba(255, 255, 255, 0.16) !important
}
html body :is(.quick-nav, .dl-faq-item, .loc-faq__item, .wa-feature, .requirements, .download-section, .price-section, .instructions) {
    background: rgba(36, 36, 40, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.144) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12) !important
}
html body .quick-nav a {
    background: rgba(36, 36, 40, 0.93) !important
}
html body :is(.app-card, .wa-app, .ss-feature):not(.jb-lift):not(#_x):not(#_y):hover {
    background: rgba(36, 36, 40, 0.74) !important
}
html body .feature-item:not(.jb-lift):not(#_x):not(#_y):hover, html body .app-card .features-grid .feature-item:not(.jb-lift):not(#_x):not(#_y):hover {
    background: rgba(36, 36, 40, 0.63) !important
}
html body .apps-nav a.apps-nav-btn:not(#_x):not(#_y):hover {
    background: rgba(36, 36, 40, 0.78) !important;
    box-shadow: var(--g-rim), 0 2px 8px rgba(0, 0, 0, 0.12) !important
}
html body .apps-nav a.apps-nav-btn.is-current:not(#_x):not(#_y), html body .apps-nav a.apps-nav-btn[aria-current]:not(#_x):not(#_y) {
    background: rgba(36, 36, 40, 0.98) !important;
    box-shadow: var(--g-rim), 0 2px 10px rgba(0, 0, 0, 0.16) !important
}
html body .jb-point {
    border: 1px solid rgba(255, 255, 255, 0.108)
}
html body .jb-ico {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.054), 0 8px 18px rgba(0, 113, 227, .28)
}
html body :is(.net-note) {
    border: 1px solid rgba(255, 255, 255, 0.108) !important
}
html body a.jb-place {
    border: 1px solid rgba(255, 255, 255, 0.108)
}
html body .jb-place__ico {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.054), 0 6px 16px rgba(0, 113, 227, .26)
}
html body .loc-cta.jb-cta:not(#_x):not(#_y) {
    background: radial-gradient(700px 260px at 50% -10%, rgba(0, 113, 227, .16), rgba(0, 113, 227, 0) 70%),
    radial-gradient(500px 220px at 85% 110%, rgba(175, 82, 222, .10), rgba(175, 82, 222, 0) 70%),
    rgba(36, 36, 40, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.135) !important;
    box-shadow: var(--g-rim), 0 20px 60px rgba(0, 0, 0, 0.2) !important
}
html body .site-notice:not(#_x) {
    background: rgba(36, 36, 40, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.153) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 10px rgba(0, 0, 0, 0.1) !important
}
html body .card-icon:not(#_x), html body .method-icon:not(.jb-brand):not(#_x) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.054), 0 8px 18px rgba(0, 113, 227, .26) !important
}
html body #viewAllFeedbackBtn:not(#_x):not(#_y) {
    background: rgba(36, 36, 40, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.144) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.16) !important
}
html body .app-meta > span:not(#_x) {
    border-color: rgba(255, 255, 255, 0.112) !important
}
html body .wp-spinner:not(#_x) {
    border-color: rgba(255, 255, 255, 0.14) !important
}
html body .net-hardware:not(#_x) {
    border-color: rgba(255, 255, 255, 0.112) !important
}
html body main div[style*="border-radius: 20px"][style*="overflow: hidden"]:not(#_x) {
    border-color: rgba(255, 255, 255, 0.112) !important
}
html body .sc-search:not(#_x) {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.168) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important
}
html body #sc-q::placeholder {
    color: rgb(152, 152, 157) !important
}
html body .sc-search-shell kbd {
    border: 1px solid rgba(255, 255, 255, 0.196) !important;
    background: rgb(28, 28, 30) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16) !important
}
@media (max-width: 1099px) {
    html body header::before {
        background: rgba(36, 36, 40, 0.63) !important
    }
}
@media (max-width: 1099px) {
    html body .nav-links:not(#_x) {
        background: linear-gradient(180deg, rgba(36, 36, 40, 0.63) 0%, rgba(255, 255, 255, 0.055) 100%),
      rgba(36, 36, 40, 0.7) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.144) !important
    }
}
@media (max-width: 1099px) {
    html body .nav-links.active:not(#_x) {
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.108), -24px 0 60px rgba(0, 0, 0, 0.28), 0 0 0 100vmax rgba(20, 20, 30, .18) !important
    }
}
:root {
    --g-fill: rgba(36, 36, 40, 0.52);
    --g-fill-strong: rgba(36, 36, 40, 0.7);
    --g-rim: inset 0 1px 0 rgba(255, 255, 255, 0.114), inset 0 -1px 0 rgba(255, 255, 255, 0.048), inset 0 0 0 1px rgba(255, 255, 255, 0.038),
    inset 0 12px 20px -14px rgba(255, 255, 255, 0.114), inset 0 -14px 24px -18px rgba(255, 255, 255, 0.09);
    --g-edge: linear-gradient(135deg, rgb(28, 28, 30) 0%, rgba(255, 255, 255, 0.066) 28%, rgba(255, 255, 255, 0.013) 52%, rgba(255, 255, 255, 0.066) 76%, rgb(36, 36, 40) 100%);
    --jb-sheen: linear-gradient(180deg, rgba(36, 36, 40, 0.58) 0%, rgba(255, 255, 255, 0.031) 34%, rgba(255, 255, 255, 0) 58%)
}
html body * {
    --jb-light: radial-gradient(circle 240px at var(--jx) var(--jy), rgba(36, 36, 40, NaN))), rgba(255, 255, 255, 0) 72%)
}
html {
    background: radial-gradient(1100px 820px at 4% 0%, rgba(86, 148, 255, .40), transparent 62%),
    radial-gradient(940px 760px at 100% 12%, rgba(178, 132, 255, .34), transparent 62%),
    radial-gradient(1000px 780px at 74% 100%, rgba(255, 160, 120, .30), transparent 62%),
    radial-gradient(860px 720px at 0% 94%, rgba(96, 214, 184, .30), transparent 60%),
    radial-gradient(640px 520px at 48% 50%, rgba(36, 36, 40, 0.58), transparent 70%),
    rgb(28, 28, 30) !important
}
html body :is(.btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn, .ss-btn:not(.ss-btn--ghost), .download-btn):not(#_g1):not(#_g2):not(#_g3) {
    background-image: var(--jb-light), linear-gradient(180deg, rgba(255, 255, 255, 0.062) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.072), inset 0 -1px 0 rgba(0, 0, 0, 0.24), inset 0 -8px 14px -8px rgba(160, 210, 255, .55), 0 8px 22px rgba(0, 113, 227, .32) !important
}
html body .loc-cta.jb-cta:not(#_g1):not(#_g2):not(#_g3) {
    background-color: rgba(36, 36, 40, 0.58) !important
}
html body :is(.app-card, .wa-app, .ss-feature):not(#_g1) {
    background-color: rgba(36, 36, 40, 0.64) !important
}
html body :is(.app-card, .wa-app, .ss-feature):not(#_g1):hover {
    background-color: rgba(36, 36, 40, 0.78) !important
}
html body :is(.btn, .cyber-btn, .nav-btn, .ss-btn--ghost, .wa-cta, .vpn-btn-sm, .vpn-btn-xs, .apps-cta, .paypal-service-btn, #paypalBtn, #paypalDropOffBtn, .paypal-btn, .buy-btn):not(.btn-primary):not(.wa-cta--primary):not(.apps-cta--primary):not(#_g1) {
    background-color: rgba(36, 36, 40, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.153) !important;
    box-shadow: var(--g-rim), 0 6px 18px rgba(0, 0, 0, 0.16) !important
}
html body :is(.btn, .cyber-btn, .nav-btn, .ss-btn--ghost, .wa-cta, .apps-cta, .paypal-service-btn, #paypalBtn, #paypalDropOffBtn, .paypal-btn, .buy-btn):not(.btn-primary):not(.wa-cta--primary):not(.apps-cta--primary):not(#_g1):hover {
    background-color: rgba(36, 36, 40, 0.74) !important
}
html body :is(.floating-back-to-top, .floating-fb, .jb-helpbot-toggle):not(#_g1) {
    background-color: rgba(36, 36, 40, 0.48) !important;
    border: 1px solid rgba(255, 255, 255, 0.153) !important;
    box-shadow: var(--g-rim), 0 10px 30px rgba(0, 0, 0, 0.28) !important
}
html body .site-notice:not(#_x):not(#_g1) {
    background-color: rgba(36, 36, 40, 0.58) !important;
    box-shadow: var(--g-rim), 0 6px 20px rgba(0, 0, 0, 0.14) !important
}
html body > footer:not(#_g1) {
    background: var(--jb-sheen), rgba(36, 36, 40, 0.46) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.114), inset 0 14px 24px -18px rgba(255, 255, 255, 0.12) !important
}
@media (min-width: 1100px) {
    html body > header > nav:not(#_g1) {
        background: var(--jb-light), var(--jb-sheen), rgba(36, 36, 40, 0.54) !important;
        border: 1px solid rgba(255, 255, 255, 0.126) !important;
        box-shadow: var(--g-rim), 0 10px 32px rgba(20, 30, 60, .10), 0 1px 3px rgba(0, 0, 0, 0.1) !important
    }
}
@media (min-width: 1100px) {
    html body > header.scrolled > nav:not(#_g1) {
        box-shadow: var(--g-rim), 0 14px 40px rgba(20, 30, 60, .16), 0 1px 3px rgba(0, 0, 0, 0.12) !important
    }
}
@media (min-width: 1100px) {
    html body > header:not(#_g1)::before {
        background: linear-gradient(180deg, rgba(36, 36, 40, 0.68), rgba(36, 36, 40, 0.08)) !important
    }
}
@media (min-width: 1100px) {
    html body .nav-links a.active:not(#_g1) {
        background: var(--jb-sheen), rgba(36, 36, 40, 0.8) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.072), 0 2px 10px rgba(20, 30, 60, .1) !important
    }
}
@media (max-width: 1099px) {
    html body header::before {
        background: var(--jb-sheen), rgba(36, 36, 40, 0.58) !important;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.084), 0 6px 24px rgba(20, 30, 60, .07)
    }
}
@media (prefers-reduced-transparency: reduce) {
    html body :is(.card, .method-card, .pricing-card, .app-card, .stat-box, .ss-card, .wa-app, .ss-feature, .ss-cta, .success-card,
    .dl-help-cta, .featured-section, .wa-step, .live-telemetry, .loc-stats, .apps-stat,
    .wa-stat, .sc-stat, .wp-stat, .sc-search-shell, .net-card, .site-notice, .apps-nav, .jb-point, a.jb-place, .loc-cta,
    .quick-nav, .dl-faq-item, .loc-faq__item, .wa-feature, .requirements, .download-section, .floating-back-to-top, .floating-fb, .jb-helpbot-toggle,
    .jb-helpbot-popup, header > nav, .nav-links):not(#_g1):not(#_g2):not(#_g3):not(#_g4) {
        background-color: rgb(28, 28, 30) !important
    }
    html body header::before {
        background: rgb(28, 28, 30) !important
    }
    html body > footer:not(#_g1) {
        background: rgb(28, 28, 30) !important
    }
}
html body :is(.card, .method-card, .pricing-card, .ss-card, .live-telemetry, .apps-stat, .wa-stat, .sc-stat, .wp-stat, .net-card, .loc-stats,
  .site-notice, .jb-point, a.jb-place):not(#_g1)::after,
html body > header > nav:not(#_g1)::after {
    background: radial-gradient(circle 160px at var(--jx) var(--jy), rgba(36, 36, 40, NaN)), rgba(255, 255, 255, 0) 70%), var(--g-edge) !important
}
html body main > section:nth-of-type(even)::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.062) 140px, rgba(255, 255, 255, 0.062) calc(100% - 140px), rgba(255, 255, 255, 0) 100%) !important
}
html body :is(.btn, .cyber-btn, .nav-btn, .apps-cta, .wa-cta, .ss-btn--ghost, .paypal-btn, .paypal-service-btn, .buy-btn, .secondary-cta,
  .net-refresh, #paypalBtn, #paypalDropOffBtn, #viewAllFeedbackBtn):not(.btn-primary):not(.wa-cta--primary):not(.apps-cta--primary):not(#_b1):not(#_b2):not(#_b3):not(#_b4) {
    background: rgb(28, 28, 30) !important;
    color: rgb(82, 168, 255) !important;
    -webkit-text-fill-color: rgb(82, 168, 255) !important;
    border: 1px solid rgba(255, 255, 255, 0.084) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(0, 0, 0, 0.18) !important
}
html body :is(.btn, .cyber-btn, .nav-btn, .apps-cta, .wa-cta, .ss-btn--ghost, .paypal-btn, .paypal-service-btn, .buy-btn, .secondary-cta,
  .net-refresh, #paypalBtn, #paypalDropOffBtn, #viewAllFeedbackBtn):not(.btn-primary):not(.wa-cta--primary):not(.apps-cta--primary):not(#_b1):not(#_b2):not(#_b3):not(#_b4):hover {
    background: rgb(28, 28, 30) !important;
    color: rgb(82, 168, 255) !important;
    -webkit-text-fill-color: rgb(82, 168, 255) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.12), 0 12px 28px rgba(0, 0, 0, 0.26) !important
}
html body :is(.btn, .cyber-btn, .nav-btn, .apps-cta, .wa-cta, .ss-btn--ghost, .paypal-btn, .paypal-service-btn, .buy-btn, .secondary-cta,
  .net-refresh, #paypalBtn, #paypalDropOffBtn, #viewAllFeedbackBtn):not(.btn-primary):not(.wa-cta--primary):not(.apps-cta--primary) svg :is([fill]:not([fill="none"])):not(#_b1) {
    fill: rgb(82, 168, 255) !important
}
html body :is(.btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn, .ss-btn:not(.ss-btn--ghost), .download-btn,
  .primary-cta, .sc-search-go, a.cyber-btn-gold, a[href*="maps.app.goo.gl"][style*="padding"]):not(#_b1):not(#_b2):not(#_b3):not(#_b4) {
    background-image: var(--jb-light), linear-gradient(180deg, rgba(255, 255, 255, 0.062) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.072), inset 0 -1px 0 rgba(0, 0, 0, 0.24), inset 0 -8px 14px -8px rgba(160, 210, 255, .55), 0 8px 22px rgba(0, 113, 227, .32) !important
}
html body :is(.btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn, .ss-btn:not(.ss-btn--ghost), .download-btn,
  .primary-cta, .sc-search-go, a.cyber-btn-gold, a[href*="maps.app.goo.gl"][style*="padding"]):not(#_b1):not(#_b2):not(#_b3):not(#_b4):hover {
    background-image: var(--jb-light), linear-gradient(180deg, rgba(255, 255, 255, 0.062) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #3d97ff 0%, #0a7bf0 55%, #0071e3 100%) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.072), inset 0 -1px 0 rgba(0, 0, 0, 0.24), inset 0 -8px 14px -8px rgba(160, 210, 255, .55), 0 12px 28px rgba(0, 113, 227, .38) !important
}
html body .troubleshooting-item:not(#_b1) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important
}
html body .troubleshooting-item:not(.troubleshooting-item + .troubleshooting-item):not(#_b1) {
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important
}
html body :is(.wp-tile, .ap-shot-frame)::after {
    background: rgba(0, 0, 0, .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(28, 28, 30)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 15px no-repeat;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.026), 0 2px 8px rgba(0, 0, 0, 0.5)
}
html body .site-notices-pill {
    background: rgba(36, 36, 40, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.096)), 0 6px 20px rgba(0, 0, 0, 0.16)
}
html body .site-notices-pill:hover {
    background: rgba(36, 36, 40, 0.93)
}
html body .site-notices-pill .site-notice--important.site-notice-icon {
    color: rgb(255, 91, 82) !important
}
@media (max-width: 767px) {
    html body .site-notices.is-open .site-notice:not(#_x):not(#_g1) {
        background-color: rgb(36, 36, 40) !important
    }
}
html body .app-meta .jb-glyph {
    color: var(--a-dim, rgb(161, 161, 166))
}
html body > footer.jb-footer:not(#_g1):not(#_g2) {
    background: rgba(36, 36, 40, 0.9) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.112) !important
}
html body .jb-footer__inner {
    color: rgb(161, 161, 166)
}
html body .jb-footer__lede {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: rgb(161, 161, 166)
}
html body .jb-footer__col h3:not(#_g1) {
    color: rgb(245, 245, 247) !important
}
html body .jb-footer__col :is(a, span):not(#_g1) {
    color: rgb(209, 209, 214) !important
}
html body .jb-footer__col a:not(#_g1):hover {
    color: rgb(245, 245, 247) !important
}
html body .jb-footer__base {
    border-top: 1px solid rgba(255, 255, 255, 0.14)
}
html body .jb-footer__base p {
    color: rgb(161, 161, 166)
}
html body .jb-bento__tile {
    color: rgb(245, 245, 247);
    background: rgba(36, 36, 40, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 10px 30px rgba(0, 0, 0, 0.12)
}
html body a.jb-bento__tile:hover {
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 18px 40px rgba(0, 0, 0, 0.2)
}
html body .jb-bento__tile > .jb-glyph {
    color: var(--a-blue, rgb(82, 168, 255))
}
html body .jb-bento__kicker:not(#_g1) {
    color: rgb(161, 161, 166) !important
}
html body .jb-bento__big:not(#_g1) {
    color: rgb(245, 245, 247) !important
}
html body .jb-bento__cap:not(#_g1) {
    color: rgb(161, 161, 166) !important
}
html body .jb-bento__tile--dark:not(#_g1) {
    border-color: rgba(255, 255, 255, 0.014) !important
}
html body .jb-bento__tile--dark :is(.jb-bento__kicker, .jb-bento__cap):not(#_g1) {
    color: rgb(152, 152, 157) !important
}
html body .jb-story__kicker:not(#_g1) {
    color: rgb(152, 152, 157) !important
}
html body .jb-story__step p:not(#_g1) {
    color: rgb(152, 152, 157) !important
}
html body .jb-band__kicker:not(#_g1) {
    color: rgb(152, 152, 157) !important
}
html body .jb-band__lede:not(#_g1) {
    color: rgb(152, 152, 157) !important
}
html body .jb-compare__title:not(#_g1) {
    color: rgb(245, 245, 247) !important
}
html body .jb-compare__sub:not(#_g1) {
    color: rgb(161, 161, 166) !important
}
html body .jb-compare__scroll {
    background: rgba(36, 36, 40, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 10px 30px rgba(0, 0, 0, 0.1)
}
html body table.jb-compare {
    color: rgb(245, 245, 247)
}
html body .jb-compare :is(th, td) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.098)
}
html body .jb-compare tbody th {
    color: rgb(245, 245, 247)
}
html body .jb-compare thead th {
    color: rgb(245, 245, 247)
}
html body .jb-compare thead th span {
    color: rgb(161, 161, 166)
}
html body .jb-compare thead th span.jb-compare__pop:not(#_g1) {
    color: rgb(255, 147, 82) !important
}
html body .jb-compare__yes:not(#_g1) {
    color: var(--a-blue, rgb(82, 168, 255))
}
html body .jb-compare__no {
    color: rgb(152, 152, 157)
}
html body .jb-compare__note:not(#_g1) {
    color: rgb(161, 161, 166) !important
}
@media (max-width: 600px) {
    html body .jb-compare tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.098)
    }
    html body .jb-compare tbody th {
        color: rgb(245, 245, 247)
    }
}
html body .jb-form, html body .jb-form-done {
    background: rgba(36, 36, 40, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 12px 34px rgba(0, 0, 0, 0.12)
}
html body .jb-form__title:not(#_g1) {
    color: rgb(245, 245, 247) !important
}
html body .jb-form__note:not(#_g1) {
    color: rgb(161, 161, 166) !important
}
html body .jb-form__note .jb-glyph {
    color: var(--a-blue, rgb(82, 168, 255))
}
html body .jb-form__group legend {
    color: rgb(245, 245, 247)
}
html body .jb-chip span {
    color: rgb(245, 245, 247);
    background: rgb(28, 28, 30);
    border: 1px solid rgba(255, 255, 255, 0.14)
}
html body .jb-chip:hover span {
    border-color: rgba(255, 255, 255, 0.16)
}
html body .jb-seg {
    background: rgba(58, 58, 60, 0.12)
}
html body .jb-seg span {
    color: rgb(245, 245, 247)
}
html body .jb-seg input:checked + span {
    background: rgb(28, 28, 30);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28)
}
html body .jb-field > span {
    color: rgb(245, 245, 247)
}
html body .jb-field em {
    color: rgb(161, 161, 166)
}
html body .jb-field :is(input, textarea):not(#_g1) {
    border: 1px solid rgba(255, 255, 255, 0.168) !important;
    background: rgb(28, 28, 30) !important;
    color: rgb(245, 245, 247) !important
}
html body .jb-form__error:not(#_g1) {
    color: rgb(237, 106, 99) !important
}
html body .jb-form__privacy:not(#_g1) {
    color: rgb(161, 161, 166) !important
}
html body .jb-form-done h2:not(#_g1) {
    color: rgb(245, 245, 247) !important
}
html body .jb-form-done p {
    color: rgb(161, 161, 166)
}
html body .app-site-link:not(#_g1) {
    color: var(--a-blue, rgb(82, 168, 255)) !important
}
html body .jb-search-btn {
    color: rgb(245, 245, 247)
}
html body .jb-search__box {
    background: rgb(36, 36, 40);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6)
}
html body .jb-search__field {
    border-bottom: 1px solid rgba(255, 255, 255, 0.112)
}
html body .jb-search__field > svg {
    color: rgb(161, 161, 166)
}
html body .jb-search__field input:not(#_g1) {
    color: rgb(245, 245, 247) !important
}
html body .jb-search__close {
    color: var(--a-blue, rgb(82, 168, 255))
}
html body .jb-search__results a {
    color: rgb(245, 245, 247)
}
html body .jb-search__kind {
    color: var(--a-blue, rgb(82, 168, 255))
}
html body .jb-search__title {
    color: rgb(245, 245, 247)
}
html body .jb-search__desc {
    color: rgb(161, 161, 166)
}
html body .jb-search__hint {
    color: rgb(161, 161, 166)
}
html body .sc-cmd-bar span:not(#_g1) {
    color: rgb(161, 161, 166) !important
}
html body .sc-related-item span:not(#_g1) {
    color: rgb(161, 161, 166) !important
}
html body .jb-form-done__alt summary {
    color: var(--a-blue, rgb(82, 168, 255))
}
html body .jb-form-done__alt textarea {
    border: 1px solid rgba(255, 255, 255, 0.168)
}
html body .sc-console-input input:not(#_g1) {
    border-color: rgba(255, 255, 255, 0.196) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important
}
html body section.jb-app-promo:not(#_g1) {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5) !important
}
html body .jb-app-promo__icon {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6))
}
html body .jb-app-promo__kicker:not(#_g1) {
    color: rgb(152, 152, 157) !important
}
html body .jb-app-promo__lede:not(#_g1) {
    color: rgb(152, 152, 157) !important
}
html body .jb-app-promo__meta {
    color: rgb(152, 152, 157)
}
html body .jb-app-promo__shot img {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.014), 0 30px 60px rgba(0, 0, 0, 0.6)
}
html body .sc-fault-head:not(#_g1) {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(36, 36, 40, 0.74) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 22px 60px rgba(30, 40, 90, .12) !important
}
html body .sc-fault-head .sc-reader-eyebrow:not(#_g1) {
    color: var(--sc-sev, rgb(82, 168, 255)) !important
}
html body .sc-fault-body > .sc-block:nth-child(-n+2):not(#_g1) {
    background: rgb(28, 28, 30) !important;
    border: 1px solid rgba(255, 255, 255, 0.084) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important
}
html body .sc-fault-body > .sc-block:nth-child(2):not(#_g1) {
    background: linear-gradient(160deg, rgb(28, 28, 30) 40%, color-mix(in srgb, var(--sc-sev, #0071e3) 7%, rgb(28, 28, 30))) !important
}
html body .jb-app-promo__safe:not(#_g1) {
    border: 1px solid rgba(255, 255, 255, 0.025) !important;
    background: rgba(255, 255, 255, 0.013) !important
}
html body .jb-app-promo__safe:not(#_g1):hover {
    background: rgba(255, 255, 255, 0.024) !important;
    border-color: rgba(255, 255, 255, 0.043) !important
}
html body dialog.jb-dlsheet:not(#_g1) {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgb(36, 36, 40);
    color: rgb(245, 245, 247);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 40px 120px rgba(20, 20, 60, .35) !important
}
html body .jb-dlsheet__x:not(#_g1) {
    color: rgb(245, 245, 247)
}
html body .jb-dlsheet__head h2:not(#_g1) {
    color: rgb(245, 245, 247) !important
}
html body .jb-dlsheet__file {
    color: rgb(161, 161, 166)
}
html body .jb-dlsheet__why {
    background: rgb(28, 28, 30);
    border: 1px solid rgba(255, 255, 255, 0.084);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important
}
html body .jb-dlsheet__why p {
    color: rgb(209, 209, 214)
}
html body .jb-dlsheet__why b {
    color: rgb(245, 245, 247)
}
html body .jb-dlsheet__steps > li:not(#_g1) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.084)
}
html body .jb-dlsheet__step-text b {
    color: rgb(245, 245, 247)
}
html body .jb-dlsheet__step-text p {
    color: rgb(161, 161, 166)
}
html body .jb-ss__btn {
    border: 1px solid rgba(255, 255, 255, 0.153)
}
html body .jb-dlsheet__foot {
    border-top: 1px solid rgba(255, 255, 255, 0.084)
}
html body .jb-dlsheet__foot > p {
    color: rgb(161, 161, 166)
}
html body .jb-dlsheet__foot > p .jb-glyph {
    color: rgb(115, 222, 141)
}
html body .jb-dlsheet__again:not(#_g1) {
    color: rgb(82, 168, 255)
}
html body .jb-dlsheet.is-info .jb-dlsheet__ok:not(#_g1):not(#_g2):not(#_g3):not(#_g4) {
    color: rgb(245, 245, 247) !important
}
html body .jb-hero-more a:not(#_g1) {
    color: var(--a-blue, rgb(82, 168, 255)) !important
}
html body .jb-trust > li {
    color: rgb(245, 245, 247);
    background: rgba(36, 36, 40, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 6px 18px rgba(0, 0, 0, 0.12)
}
html body .jb-trust .jb-glyph {
    color: var(--a-blue, rgb(82, 168, 255))
}
html body .card .jb-price {
    color: rgb(245, 245, 247)
}
html body .jb-also__title:not(#_g1):not(#_g2) {
    color: rgb(245, 245, 247) !important
}
html body .jb-also__links a:not(#_g1) {
    color: rgb(245, 245, 247) !important;
    background: rgba(36, 36, 40, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 6px 18px rgba(0, 0, 0, 0.12)
}
html body .jb-also__links a:hover {
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 12px 26px rgba(0, 0, 0, 0.2)
}
html body .jb-also__links .jb-glyph {
    color: rgb(209, 209, 214)
}
html body .jb-also__links span {
    color: rgb(255, 157, 82)
}
@media (min-width: 1100px) {
    html body .nav-group__btn:not(#_g1) {
        color: var(--a-text, rgb(245, 245, 247))
    }
}
@media (min-width: 1100px) {
    html body .nav-group__btn:is(:hover, :focus-visible) {
        background: rgba(36, 36, 40, 0.78);
        box-shadow: var(--g-rim), 0 2px 8px rgba(0, 0, 0, 0.12)
    }
}
@media (min-width: 1100px) {
    html body .nav-group:has(a.active) .nav-group__btn {
        background: rgba(36, 36, 40, 0.93);
        box-shadow: var(--g-rim), 0 2px 10px rgba(0, 0, 0, 0.16)
    }
}
@media (min-width: 1100px) {
    html body .nav-flyout:popover-open {
        color: rgb(245, 245, 247);
        border: 1px solid rgba(255, 255, 255, 0.153);
        background: rgba(36, 36, 40, 0.94);
        box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 24px 60px rgba(20, 30, 60, .18), 0 2px 8px rgba(0, 0, 0, 0.1)
    }
}
@media (min-width: 1100px) {
    html body .nav-flyout a:not(#_g1):not(#_g2) {
        color: rgb(245, 245, 247) !important
    }
}
@media (min-width: 1100px) {
    html body .nav-flyout a span {
        color: rgb(161, 161, 166)
    }
}
@media (min-width: 1100px) {
    html body .nav-links .nav-cta a:not(#_g1):not(#_g2) {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.036), 0 4px 12px rgba(0, 113, 227, .3) !important
    }
}
html body .jb-reviews__score:not([hidden]) {
    color: rgb(245, 245, 247)
}
html body .jb-review {
    background: rgba(36, 36, 40, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 10px 30px rgba(0, 0, 0, 0.12)
}
html body .jb-review__quote:not(#_g1) {
    color: rgb(245, 245, 247) !important
}
html body .jb-review__who {
    border-top: 1px solid rgba(255, 255, 255, 0.098)
}
html body .jb-review__avatar--3:not(#_g1) {
    background: linear-gradient(135deg, rgb(14, 42, 21), #1f9d55) !important
}
html body .jb-review__avatar--4:not(#_g1) {
    background: linear-gradient(135deg, rgb(42, 34, 14), #ff9500) !important
}
html body .jb-review__avatar--5:not(#_g1) {
    background: linear-gradient(135deg, rgb(58, 58, 60), #48484a) !important
}
html body .jb-review__name b {
    color: rgb(245, 245, 247)
}
html body .jb-review__name small {
    color: rgb(161, 161, 166)
}
html body .jb-reviews__arrow:not(#_g1) {
    color: rgb(245, 245, 247)
}
html body .jb-reviews__empty {
    color: rgb(161, 161, 166)
}
html body .jb-reviews__arrow:not(#_g1):not(#_g2) {
    background: rgba(58, 58, 60, 0.16)
}
html body .jb-reviews__arrow:not(#_g1):not(#_g2):hover:not(:disabled) {
    background: rgba(58, 58, 60, 0.26)
}
html body .jb-reach-head p {
    color: rgb(161, 161, 166)
}
html body .jb-reach {
    background: rgba(36, 36, 40, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--g-rim, inset 0 1px 0 rgba(255, 255, 255, 0.12)), 0 10px 30px rgba(0, 0, 0, 0.12)
}
html body .jb-reach > li > :is(a, div):not(#_g1) {
    color: rgb(245, 245, 247) !important
}
html body .jb-reach__icon--phone:not(#_g1) {
    background: linear-gradient(180deg, rgb(14, 42, 21), #28c840) !important
}
html body .jb-reach__icon--whatsapp:not(#_g1) {
    background: linear-gradient(180deg, rgb(14, 42, 24), #20b35a) !important
}
html body .jb-reach__text > span {
    color: rgb(161, 161, 166)
}
html body .jb-reach__chev {
    color: rgb(152, 152, 157)
}
html body .jb-steps__count:not(#_g1) {
    color: rgb(161, 161, 166) !important
}
html body .jb-steps__bar {
    background: rgba(58, 58, 60, 0.16)
}
html body .jb-steps__summary:not([hidden]) {
    background: rgba(58, 58, 60, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.084)
}
html body .jb-steps__summary > div + div {
    border-top: 1px solid rgba(255, 255, 255, 0.084)
}
html body .jb-steps__summary dt {
    color: rgb(161, 161, 166)
}
html body .jb-steps__summary dd {
    color: rgb(245, 245, 247)
}
html body .jb-steps__edit:not(#_g1) {
    color: rgb(82, 168, 255)
}
html body .jb-story__avatar {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.014), 0 12px 40px rgba(90, 200, 250, .25)
}
html body [data-open-status] .jb-open-dot {
    background: rgb(58, 58, 60)
}

/* ═══ Hand-written dark fixes (scripts/build-dark-css.js, DARK_EXTRA) ═══ */
html, html body { background-color: #000 !important; }
/* Links in running text: in dark mode the link blue and the body grey are
   equally bright, so colour alone doesn't mark them out. Underline them. */
html body main :is(p, li, dd, td) a:not([class]):not(#_g1) { text-decoration: underline !important; text-underline-offset: 2px; text-decoration-thickness: 1px; }
html body .wp-chip__n:not(#_g1) { color: #a1a1a6 !important; opacity: 1 !important; }
html body .sc-crumbs a:not(#_g1) { color: #2997ff !important; }
html body .jb-dlsheet__body { scrollbar-color: rgba(255, 255, 255, .25) transparent; }
html body .jb-dlsheet.is-info .jb-dlsheet__ok:not(#_g1):not(#_g2):not(#_g3):not(#_g4) { background: rgba(255, 255, 255, .12) !important; }
html body .jb-dlsheet.is-info .jb-dlsheet__ok:not(#_g1):not(#_g2):not(#_g3):not(#_g4):hover { background: rgba(255, 255, 255, .18) !important; }
/* Severity colours bright enough to read on the dark fault-page chips. */
html body [data-severity="critical"] { --sc-sev: #ff6961; }
html body [data-severity="high"] { --sc-sev: #ffa64d; }
html body [data-severity="medium"] { --sc-sev: #ffd60a; }
html body [data-severity="low"] { --sc-sev: #4cd964; }
/* Downloads filter bar (its light styles live in downloads.html). */
html body .dl-filter:not(#_dl) { background: rgba(36, 36, 40, .72) !important; border-color: rgba(255, 255, 255, .1) !important; }
html body .dl-search:not(#_dl) { background: #1c1c1e !important; color: #f5f5f7 !important; border-color: rgba(255, 255, 255, .14) !important; }
html body .dl-search-clear:not(#_dl) { background: rgba(255, 255, 255, .14) !important; color: #f5f5f7 !important; }
html body .dl-platforms:not(#_dl) { background: rgba(118, 118, 128, .24) !important; }
html body .dl-platform:not(#_dl):not(#_dl2) { color: #f5f5f7 !important; }
html body .dl-platform.is-active:not(#_dl):not(#_dl2) { background: #636366 !important; }
html body .dl-platform:not(.is-active):not(#_dl):not(#_dl2):hover { background: rgba(255, 255, 255, .08) !important; }
html body .feedback-like:not(.is-liked):not(#_x):not(:hover) { background: rgba(255, 255, 255, .08) !important; }
html body .dl-filter-count:not(#_dl) { color: #a1a1a6 !important; }
/* Forms, chips and switches (Book a Repair, Track a Repair). */
html body .jb-chip span { background: #1c1c1e; color: #f5f5f7; border-color: rgba(255, 255, 255, .16); }
html body .jb-seg { background: rgba(118, 118, 128, .24); }
html body .jb-seg span { color: #f5f5f7; }
html body .jb-seg input:checked + span { background: #636366; }
html body .jb-field :is(input, textarea):not(#_g1) { background: #1c1c1e !important; color: #f5f5f7 !important; border-color: rgba(255, 255, 255, .16) !important; }
html body :is(.jb-form__group legend, .jb-field > span) { color: #f5f5f7; }
/* Search panel and compare tables. */
html body .jb-search__box { background: rgba(28, 28, 30, .94); }
html body .jb-search__field { border-bottom-color: rgba(255, 255, 255, .1); }
html body .jb-search-btn { color: #f5f5f7; }
html body .jb-search-btn:hover { background: rgba(255, 255, 255, .1); }
html body .jb-compare :is(th, td) { border-bottom-color: rgba(255, 255, 255, .1); }
html body .jb-compare tr { border-bottom-color: rgba(255, 255, 255, .1); }
/* Review row arrows and loading bars (homepage). */
html body .jb-reviews__arrow:not(#_g1):not(#_g2):not(#_g3) { background: rgba(118, 118, 128, .28); }
html body .jb-reviews__arrow:not(#_g1):not(#_g2):not(#_g3):hover:not(:disabled) { background: rgba(118, 118, 128, .4); }
html body .jb-skel { background: rgba(255, 255, 255, .1); }
html body .jb-reach > li + li::after { background: rgba(255, 255, 255, .1); }
html body .jb-reach__chev { color: #636366; }
html body .jb-steps__summary:not([hidden]) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
html body .jb-steps__summary > div + div { border-top-color: rgba(255, 255, 255, .1); }
html body .jb-steps__edit:not(#_g1) { color: #4aa3ff; }