/* JbTecWiz — light theme in the manner of apple.com (2026-10-23).
   Loaded LAST on the main site's pages, over style.css / cyberpunk-theme.css and the pages' own styles.
   White and #f5f5f7 sections taking turns, #1d1d1f text, one blue (#0071e3), the system typeface (SF Pro on
   Apple devices, Inter elsewhere), pill buttons, a frosted bar, big rounded tiles, and a gentle rise as things
   scroll into view (where the browser can do it without script). Everything decorative from the old neon look
   is switched off. Previous versions: /css/pro-theme.css (dark, same day) and
   W:\jbtecwiz\.backups\2026-10-23-main-redesign (the original). */

:root {
  /* The old names, pointed at the new palette, so every rule that still uses them follows along. */
  --neon-pink: #0066cc;
  --neon-cyan: #0066cc;
  --neon-yellow: #b25000;
  --neon-green: #1b7a33;
  --neon-orange: #b25000;
  --neon-purple: #6e6e73;
  --neon-blue: #0071e3;
  --bg-dark: #ffffff;
  --bg-darker: #f5f5f7;
  --bg-card: #f5f5f7;
  --bg-card-hover: #f0f0f2;
  --gradient-primary: linear-gradient(#0071e3, #0071e3);
  --gradient-secondary: linear-gradient(#0071e3, #0071e3);
  --gradient-success: linear-gradient(#1b7a33, #1b7a33);
  --gradient-danger: linear-gradient(#e30000, #e30000);
  --primary-color: #0066cc;
  --secondary-color: #0071e3;
  --dark-bg: #ffffff;
  --darker-bg: #f5f5f7;
  --light-text: #1d1d1f;
  --gray-text: #6e6e73;
  --text-color: #1d1d1f;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-muted: #86868b;
  --accent-gradient: linear-gradient(#0071e3, #0071e3);
  --card-bg: #f5f5f7;
  --surface-1: #f5f5f7;
  --surface-2: #ffffff;
  --surface-solid-1: #f5f5f7;
  --surface-solid-2: #ffffff;
  --surface-blur: none;
  --border-subtle: #e3e3e8;
  --border-soft: #d2d2d7;
  --border-strong: #c7c7cc;
  --elev-1: none; --elev-2: none; --elev-3: none;
  --glow-pink: none; --glow-cyan: none; --glow-green: none;
  /* The site's motion switch (mobile-motion.css): 'reduced' stops the cursor sparkles and the particles. */
  --jb-motion: reduced;

  --a-bg: #ffffff;
  --a-grey: #f5f5f7;
  --a-tile: #f5f5f7;            /* a tile on a white section (sections in grey flip it to white) */
  --a-line: #e3e3e8;
  --a-line-2: #d2d2d7;
  --a-text: #1d1d1f;
  --a-text-2: #424245;
  --a-dim: #6e6e73;
  --a-faint: #6e6e73;   /* was #86868b: under 4.5:1 for small text */
  --a-blue: #0071e3;
  --a-blue-hover: #0077ed;
  --a-link: #0066cc;
  --a-green: #1b7a33;
  --a-orange: #b25000;
  --a-red: #e30000;
  --a-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Inter Fallback', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --a-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  --a-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  --a-shadow-lg: 0 18px 50px rgba(0, 0, 0, .16);
  --a-ease: cubic-bezier(.25, .1, .25, 1);
  color-scheme: light;
}

/* ── No neon effects ─────────────────────────────────────────────────── */
html body *, html body *::before, html body *::after {
  text-shadow: none !important;
  animation: none !important;
  clip-path: none !important;
  box-shadow: none !important;
}
html body *:not(svg):not(svg *) { filter: none !important; }
html body *:not(code):not(pre):not(kbd) { text-transform: none !important; letter-spacing: normal !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body::before, body::after,
.animated-bg, .cyber-streaks, .particles, #particles,
.profile-glow-badge > .lg-nebula, .profile-glow-badge > .lg-reticle, .profile-glow-badge > .lg-orbit, .profile-glow-badge > .lg-rim,
.profile-glow-badge::before, .profile-glow-badge::after,
header::after, footer::before, footer::after, .copyright::before,
.nav-links::before, .nav-links::after, .nav-links a::before, .nav-links a::after,
.logo::before, .hamburger::before,
.card::before, .card::after, .btn::before, .btn::after,
.section-title::before, .section-title::after,
.cyber-terminal-title::before, .cyber-terminal-title::after, .cyber-terminal-wrapper::after,
.footer-section a::before,
.android-graphics, .android-rings, .android-bot, .android-chip,
.card-scan, .card-terminal, .cursor-trail, .cursor-particle, .sparkle,
[class*="aurora"], [class*="atmos"], .wp-orb, .wp-term__caret, .wp-glitch::before, .wp-glitch::after,
.wp-ambient, .wp-hero__fx, .wp-tile__sheen, .wp-tile__veil::after,
.sc-grid, .sc-sweep, .wa-sweep, .wa-grid-fx, .ap-sweep, .ap-grid, .ap-card-fx, .ap-progress,
.apps-hero::before, .apps-hero::after, .apps-mascot, img[src*="promo-xr-droid"], img[src*="mm-promo-card-droid"],
.wa-app::before, .wa-app::after, .feature-item::before, .feature-item::after, .app-card::before, .app-card::after,
.app-card-inner::before, .app-card-inner::after, .success-card::before, .success-card::after,
.ss-feature::before, .ss-feature::after, .ss-card::before, .ss-card::after,
.live-telemetry::before, .live-telemetry::after, .live-telemetry__inner::before, .live-telemetry__inner::after,
.loc-stats::before, .loc-stats::after, .loc-stats__inner::before, .loc-stats__inner::after,
.cyber-tab::before, .cyber-tab::after, .setup-tab::before, .setup-tab::after, .apps-kicker::before, .apps-kicker::after,
.paypal-service-btn::before, #paypalBtn::before, #paypalDropOffBtn::before, .paypal-btn::before, .buy-btn::before,
.floating-back-to-top::before, .floating-back-to-top::after, .floating-fb::before, .floating-fb::after,
[class*="section-head"]::after, [class*="-btn"]::after, [class*="cta"]::after, [class*="kicker__dot"],
html body :is(h1, h2)::before, html body :is(h1, h2)::after,
.cyberfiles-bot {
  display: none !important;
  content: none !important;
}

/* ── Type ────────────────────────────────────────────────────────────── */
html, body { background: var(--a-bg) !important; }
body {
  font-family: var(--a-font) !important;
  color: var(--a-text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body :is(h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, select, textarea, label, td, th, dt, dd, small, strong, b, em, summary, figcaption, blockquote) {
  font-family: var(--a-font) !important;
}
body :is(code, pre, kbd, samp, .mono) { font-family: var(--a-mono) !important; }
html body :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600 !important; line-height: 1.1;
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--a-text) !important;
}
html body h1 { letter-spacing: -0.025em !important; }
html body h2 { letter-spacing: -0.02em !important; }
html body h3 { letter-spacing: -0.01em !important; }
/* Words the old theme filled with gradients: plain text. */
html body :is(.logo, .section-title, .shimmer-text, .gradient-text, .stat-number, .telemetry-value, .loc-stat__value,
  .app-title, .apps-stat b, .apps-title, .bot-auth-title, .bot-header-title, .cyber-confirm__title, .footer-section h3,
  .jb-helpbot-title, .price, .sc-stat b, .sc-title, .ss-brand h3, .ss-title, .success-title,
  .wa-app-name, .wa-stat b, .wa-title, .wp-keys__panel h2, .wp-stat__num),
html body [style*="text-fill-color"] {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--a-text) !important;
}
a { color: var(--a-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 3px solid rgba(0, 113, 227, .45) !important; outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(0, 113, 227, .2); }

/* ── The bar along the top: slim and frosted ─────────────────────────── */
header {
  background: rgba(251, 251, 253, .8) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}
header nav { max-width: 1024px; padding: 0 22px !important; min-height: 48px; gap: 24px; }
.logo {
  display: inline-flex !important; align-items: center; gap: 9px; text-decoration: none !important;
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: var(--a-text) !important;
}
.logo::after {
  content: ''; order: -1; width: 24px; height: 24px; border-radius: 6px; flex: none;
  background: url('/Images/logo-240.jpg') center / cover no-repeat;
}
.hamburger {
  border: 0 !important; background: transparent !important; transform: none !important;
  width: 40px !important; height: 40px !important; top: 4px !important; right: 12px !important; border-radius: 8px !important;
}
.hamburger span { background: var(--a-text) !important; width: 17px !important; height: 1.5px !important; }
.nav-links {
  background: rgba(251, 251, 253, .97) !important; backdrop-filter: saturate(180%) blur(20px) !important;
  border-left: 1px solid rgba(0, 0, 0, .08) !important;
}
.nav-links a {
  font-size: 17px !important; font-weight: 500 !important; color: var(--a-text) !important; opacity: .88;
  background: none !important; border: 0 !important; transform: none !important; border-radius: 8px !important; text-decoration: none !important;
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.active { opacity: 1; color: var(--a-text) !important; }
.nav-links a.active { font-weight: 600 !important; }
.nav-links li { transform: none !important; opacity: 1 !important; transition: none !important; }
@media (min-width: 1100px) {
  header nav { justify-content: flex-start; }
  .hamburger { display: none !important; }
  .nav-links {
    position: static !important; height: auto !important; width: auto !important; max-width: none !important;
    flex-direction: row !important; align-items: center !important; gap: 0 !important; padding: 0 !important;
    margin-left: auto !important; background: none !important; border: 0 !important; overflow: visible !important;
    backdrop-filter: none !important;
  }
  .nav-links li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .nav-links li:has(> a[href^="/services/"]) { display: none !important; }
  .nav-links a { padding: 0 9px !important; font-size: 12px !important; line-height: 48px; opacity: .8; white-space: nowrap; }
  .nav-links a.active { font-weight: 400 !important; opacity: 1; }
}

/* The notice under the bar: a quiet grey ribbon. */
.site-notice {
  background: var(--a-grey) !important; border: 0 !important; border-radius: 14px !important; color: var(--a-text) !important;
  margin-bottom: 8px;
}
.site-notice-icon { background: transparent !important; color: var(--a-orange) !important; border: 0 !important; }
.site-notice-title { color: var(--a-text) !important; font-size: 15px !important; }
.site-notice-message { color: var(--a-dim) !important; font-size: 14px !important; }

/* ── Sections: white and grey taking turns, with plenty of room ──────── */
.container { max-width: 1068px !important; padding: 0 22px !important; }
section { padding: 100px 0; }
main > section:nth-of-type(even) { background: var(--a-grey); --a-tile: #ffffff; }
@media (max-width: 760px) { section { padding: 64px 0; } }

/* ── The hero: big, centred, quiet ───────────────────────────────────── */
.hero { min-height: 0 !important; padding: 88px 0 100px !important; background: none !important; border: 0 !important; }
@media (max-width: 760px) { .hero { padding: 48px 0 64px !important; } }
.hero-content { max-width: 920px !important; margin: 0 auto; padding: 0 22px; }
html body .hero h1, html body .apps-title, html body .wa-title, html body .sc-title, html body #wp-title, html body .ss-title {
  font-size: clamp(40px, 6.2vw, 80px) !important; line-height: 1.05 !important; letter-spacing: -0.03em !important;
  margin-bottom: 16px !important; font-weight: 600 !important;
}
.hero .subtitle, .subtitle, .apps-subtitle, .loc-lead {
  font-size: clamp(19px, 2.2vw, 24px) !important; line-height: 1.33 !important; color: var(--a-dim) !important;
  font-weight: 400 !important; margin-bottom: 6px !important; letter-spacing: -0.01em !important;
}
.hero .subtitle:first-of-type { color: var(--a-text) !important; }
.hero-buttons { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.profile-glow-badge { width: auto !important; height: auto !important; margin: 0 auto 28px !important; background: none !important; border: 0 !important; }
.profile-glow-badge .profile-pic, .profile-pic {
  width: 96px !important; height: 96px !important; border-radius: 22px !important; border: 0 !important; transform: none !important;
}
html body .profile-pic { box-shadow: var(--a-shadow) !important; }

/* Section headings: centred, large, with their intro under them. */
.cyber-terminal-wrapper { justify-content: center !important; margin: 0 0 12px !important; }
.cyber-terminal-wrapper:not(:first-child), h2.section-title:not(:first-child) { margin-top: 88px !important; }
.cyber-terminal-title, .section-title {
  font-size: clamp(32px, 4.4vw, 48px) !important; line-height: 1.08 !important; color: var(--a-text) !important;
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 12px !important;
  text-align: center !important; max-width: 820px !important; white-space: normal !important; overflow: visible !important;
}
.cyber-terminal-wrapper + p, .cyber-terminal-wrapper + .scroll-reveal { color: var(--a-dim) !important; font-size: 19px; text-align: center; }

/* ── Tiles ───────────────────────────────────────────────────────────── */
.cards-grid { gap: 20px !important; margin-top: 40px !important; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important; }
.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, .apps-nav, .sc-search-shell {
  background: var(--a-tile) !important;
  border: 0 !important;
  border-radius: 18px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.card { padding: 32px !important; transition: box-shadow .3s var(--a-ease), transform .3s var(--a-ease) !important; }
html body a.card:hover, html body .app-card:hover { box-shadow: var(--a-shadow) !important; transform: translateY(-2px) !important; text-decoration: none !important; }
.card h3 { color: var(--a-text) !important; font-size: 21px !important; margin: 0 0 8px !important; }
.card p { color: var(--a-dim) !important; font-size: 17px; margin: 0; line-height: 1.47; }
.card-icon, .feature-icon, .method-icon, .app-icon:not(img), .ss-icon, .vpn-issue-icon {
  background: transparent !important; border: 0 !important; color: var(--a-blue) !important; justify-content: flex-start !important;
}
.card-icon { width: 36px !important; height: 36px !important; margin-bottom: 14px !important; }
.card-icon svg { width: 32px !important; height: 32px !important; fill: var(--a-blue) !important; }
.features-grid .feature-item { background: #ffffff !important; border: 0 !important; border-radius: 14px !important; }

/* ── Buttons: pills ──────────────────────────────────────────────────── */
.btn, .cyber-btn, .cyber-btn-gold, .nav-btn, .play-btn, .ss-btn, .wa-cta, .vpn-btn-sm, .vpn-btn-xs, .apps-cta,
.paypal-service-btn, #paypalBtn, #paypalDropOffBtn, .paypal-btn, .buy-btn, .download-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .45em;
  min-height: 44px; padding: 0 22px !important; margin: 0;
  border-radius: 980px !important; border: 1px solid var(--a-blue) !important;
  background: transparent !important; color: var(--a-blue) !important;
  font: 400 17px/1 var(--a-font) !important; letter-spacing: -0.01em !important;
  transform: none !important; text-decoration: none !important;
  transition: background-color .2s, color .2s, border-color .2s !important;
}
.btn:hover, .cyber-btn:hover, .cyber-btn-gold:hover, .nav-btn:hover, .ss-btn:hover, .wa-cta:hover, .apps-cta:hover,
.paypal-service-btn:hover, #paypalBtn:hover, #paypalDropOffBtn:hover, .paypal-btn:hover, .buy-btn:hover {
  background: var(--a-blue) !important; color: #fff !important;
}
.btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn, .ss-btn:not(.ss-btn--ghost), .download-btn,
.sc-go, .sc-search-btn, button[class*="search-go"], .jb-helpbot-send {
  background: var(--a-blue) !important; border-color: var(--a-blue) !important; color: #fff !important;
}
.btn-primary:hover, .wa-cta--primary:hover, .apps-cta--primary:hover, .play-btn:hover, .ss-btn:not(.ss-btn--ghost):hover, .download-btn:hover {
  background: var(--a-blue-hover) !important; border-color: var(--a-blue-hover) !important;
}
.btn svg, .apps-cta svg, .wa-cta svg { fill: currentColor !important; }

/* Small labels and badges. */
.platform-badge, .app-badge, .loc-badge, .wa-badge, .ss-badge, .sc-chip, .service-new-badge, .ss-plat, .ss-count {
  background: var(--a-tile) !important; border: 0 !important; border-radius: 980px !important; color: var(--a-text-2) !important;
  font-weight: 500 !important; font-size: 13px !important;
}
.app-card .platform-badge, .app-card .app-badge { background: #ffffff !important; }
/* On the store's cards the platform is a subtitle line under the name, not a pill:
   the badge fill stretched the full width as a pale bar behind the words. */
html body .ss-card .ss-plat { background: transparent !important; border-radius: 0 !important; }
.loc-badge__dot { background: var(--a-green) !important; }
[class*="kicker"]:not([class*="kicker__"]) {
  background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--a-orange) !important;
  font-weight: 600 !important; font-size: 17px !important;
  /* The pill's shadow and blur outlived its background and left a grey blob behind the words. */
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.sc-num, .wa-num, .ss-num { background: transparent !important; border: 0 !important; color: var(--a-faint) !important; font-weight: 600 !important; }

/* ── Forms and dialogs ───────────────────────────────────────────────── */
input, select, textarea {
  background: #ffffff !important; border: 1px solid var(--a-line-2) !important; border-radius: 12px !important; color: var(--a-text) !important;
}
html body :is(input, select, textarea):focus { border-color: var(--a-blue) !important; outline: none !important; box-shadow: 0 0 0 4px rgba(0, 113, 227, .2) !important; }
.modal-content, .policy-dialog, [id$="Modal"] > div { background: #ffffff !important; border: 0 !important; border-radius: 18px !important; }
html body :is(.modal-content, .policy-dialog, [id$="Modal"] > div) { box-shadow: var(--a-shadow-lg) !important; }

/* ── Floating buttons: round, white, softly shadowed ─────────────────── */
.floating-back-to-top, .floating-fb, .jb-helpbot-toggle {
  width: 48px !important; height: 48px !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important; border: 1px solid rgba(0, 0, 0, .06) !important; color: var(--a-text) !important; transform: none !important;
}
html body :is(.floating-back-to-top, .floating-fb, .jb-helpbot-toggle) { box-shadow: 0 4px 18px rgba(0, 0, 0, .14) !important; }
.floating-back-to-top svg { fill: var(--a-text) !important; }
.jb-helpbot { left: auto !important; right: 20px !important; bottom: 20px !important; }
.jb-helpbot-toggle { position: relative; }
.jb-bot-icon { font-size: 0 !important; }
.jb-helpbot-toggle::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: var(--a-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm3 6.5a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm3 6.5a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.floating-back-to-top { left: auto !important; right: 20px !important; bottom: 80px !important; }
.floating-fb { left: 20px !important; bottom: 20px !important; }
.floating-fb svg { width: 20px !important; height: 20px !important; }
.floating-fb svg circle { fill: transparent !important; }
.floating-fb svg path { fill: #1877f2 !important; }
.jb-helpbot-popup {
  left: auto !important; right: 0 !important; bottom: 60px !important; transform-origin: bottom right !important;
  background: #ffffff !important; border: 0 !important; border-radius: 18px !important; overflow: hidden;
}
html body .jb-helpbot-popup { box-shadow: var(--a-shadow-lg) !important; }
.jb-helpbot-header { background: var(--a-grey) !important; border-bottom: 1px solid var(--a-line) !important; }
.jb-helpbot-title { color: var(--a-text) !important; }
.jb-helpbot-msg { border-radius: 18px !important; background: var(--a-grey) !important; color: var(--a-text) !important; border: 0 !important; }
.jb-helpbot-msg.user, .jb-helpbot-msg[class*="user"] { background: var(--a-blue) !important; color: #fff !important; }
.jb-helpbot-chip, .jb-helpbot-action {
  background: #ffffff !important; border: 1px solid var(--a-line-2) !important; border-radius: 980px !important; color: var(--a-blue) !important;
}
.jb-helpbot-send { border-radius: 50% !important; }
@media (max-width: 600px) {
  .jb-helpbot { right: 12px !important; bottom: 16px !important; }
  .floating-fb { left: 12px !important; bottom: 16px !important; }
  .floating-back-to-top { right: 12px !important; bottom: 74px !important; }
  .jb-helpbot-popup { position: fixed !important; left: 12px !important; right: 12px !important; width: auto !important; bottom: 76px !important; }
}

/* ── Footer: small grey type on #f5f5f7 ──────────────────────────────── */
footer { background: var(--a-grey) !important; border-top: 0 !important; padding: 40px 22px 24px !important; margin-top: 0 !important; }
.footer-content { max-width: 980px !important; gap: 28px !important; }
html body .footer-section h3 { font-size: 12px !important; color: var(--a-text) !important; margin-bottom: 10px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
.footer-section p, .footer-section a { color: var(--a-dim) !important; font-size: 12px !important; line-height: 1.6; }
.footer-section a { padding-left: 0 !important; margin-bottom: 6px; }
.footer-section a:hover { color: var(--a-text) !important; }
.copyright { color: var(--a-faint) !important; font-size: 12px !important; border-top: 1px solid var(--a-line-2) !important; max-width: 980px; margin-left: auto !important; margin-right: auto !important; }

/* ── Home ────────────────────────────────────────────────────────────── */
.live-telemetry { max-width: 560px; margin: 44px auto 0 !important; }
.live-telemetry__inner { background: none !important; }
.telemetry-title { color: var(--a-dim) !important; font-size: 14px !important; }
.telemetry-label { color: var(--a-dim) !important; font-size: 12px !important; }
html body .telemetry-value { color: var(--a-text) !important; font-weight: 600 !important; }
.telemetry-stat::before, .loc-stat::before { background: var(--a-line-2) !important; }
.hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href] {
  background: var(--a-tile) !important; border: 0 !important; border-radius: 980px !important; color: var(--a-text) !important;
  font-weight: 500 !important; font-size: 15px !important; padding: 10px 18px !important; min-width: 0 !important;
}
.hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href]:hover { background: #ebebef !important; text-decoration: none !important; }
.hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href] span { background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }
.hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href] span:last-child:not(:first-child) {
  color: var(--a-orange) !important; background: transparent !important; border: 0 !important; font-size: 12px !important; font-weight: 600 !important; padding: 0 !important;
}
.hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href] svg { fill: var(--a-text-2) !important; }
.hero .cyber-terminal-wrapper { margin-top: 72px !important; }
#announcementsContent > div, #serviceStatusContent > div {
  border: 0 !important; background: #ffffff !important; border-radius: 12px !important; padding: 12px 14px !important;
}
#announcementsContent strong { color: var(--a-text) !important; }
#serviceStatusContent [style*="#00ff88"] { color: var(--a-green) !important; }
#serviceStatusContent span[style*="border-radius: 50%"] { background: #30d158 !important; }
.carousel-dot { background: var(--a-line-2) !important; }
.carousel-dot[style*="width: 24px"], .carousel-dot.active { background: var(--a-text) !important; }
.carousel-nav { background: rgba(255, 255, 255, .9) !important; color: var(--a-text) !important; border: 1px solid var(--a-line) !important; border-radius: 50% !important; }
.engineer-avatar { border: 0 !important; }
html body .engineer-avatar { box-shadow: var(--a-shadow) !important; }

/* ── Figures on the service and contact pages ────────────────────────── */
.loc-stat { border-color: var(--a-line-2) !important; }
.loc-stat__label { color: var(--a-dim) !important; }
.loc-stat__value { font-weight: 600 !important; }
.loc-badge { color: var(--a-text-2) !important; }

/* ── Apps ────────────────────────────────────────────────────────────── */
.apps-hero { background: none !important; }
.apps-stat :is(b, strong, .num, [class*="num"], [class*="value"]) { color: var(--a-text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.apps-stat :is(span, small, [class*="label"]) { color: var(--a-dim) !important; }
.apps-nav a, .apps-nav button { background: transparent !important; border: 0 !important; border-radius: 980px !important; color: var(--a-text-2) !important; }
.apps-nav a:hover, .apps-nav button:hover, .apps-nav .is-active, .apps-nav .is-current, .apps-nav [aria-current], .apps-nav .active { color: var(--a-text) !important; background: #ffffff !important; }
.apps-nav::before, .apps-nav::after { display: none !important; }
.app-card { border-radius: 28px !important; }
.app-card .app-name, .app-card h2, .app-card h3 { color: var(--a-text) !important; }
.app-tagline, .app-desc { color: var(--a-dim) !important; }
.app-screenshots-wrapper { background: transparent !important; }
.app-screenshots-wrapper::after { background: linear-gradient(90deg, rgba(245, 245, 247, 0), var(--a-tile)) !important; }
.app-screenshot { border-radius: 18px !important; border: 0 !important; }
.ap-shot-frame { background: #1d1d1f !important; border: 0 !important; border-radius: 28px !important; }

/* ── Store, downloads, web apps, wallpapers ──────────────────────────── */
.ss-shot { background: #ffffff !important; border: 0 !important; border-radius: 18px !important; }
.ss-feature li::before, .ss-promise li::before, .ss-cta li::before { background: var(--a-green) !important; }
/* The step number is clipped gradient text; a solid background turned it into a blank white bar. */
.wa-step::before {
  background: none !important; border: 0 !important; color: var(--a-blue) !important; -webkit-text-fill-color: currentColor !important;
  font: 600 15px/1 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; margin-bottom: 10px !important;
}
.wa-nav-btn.is-current { background: var(--a-text) !important; color: #fff !important; border-color: var(--a-text) !important; }
#wp-title, .wp-glitch { color: var(--a-text) !important; }
.wp-term { font-family: var(--a-font) !important; color: var(--a-dim) !important; }

/* ── Tabs and steps ──────────────────────────────────────────────────── */
.cyber-tab, .setup-tab {
  background: var(--a-tile) !important; border: 0 !important; border-radius: 980px !important; color: var(--a-text-2) !important;
}
/* The tab's size and shape, which used to come from cyberpunk-theme.css (no longer loaded). */
.cyber-tab { position: relative; overflow: hidden; padding: .75rem 1.5rem; font-size: .85rem; font-weight: 700; cursor: pointer; }
.cyber-tab.active, .setup-tab.active { color: #fff !important; background: var(--a-text) !important; }
.vpn-step-num { background: var(--a-blue) !important; border: 0 !important; color: #fff !important; border-radius: 50% !important; }
.video-wrap { border: 0 !important; border-radius: 18px !important; overflow: hidden; }
.success-icon { background: rgba(48, 209, 88, .14) !important; border: 0 !important; }

/* ── A gentle rise as things come into view (browsers that can do it from CSS alone) ── */
.scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes a-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
    html body :is(.card, .app-card, .cyber-terminal-wrapper, .section-title, .live-telemetry, .loc-stats, .ss-feature, .ss-card, .wa-app, .faq-item) {
      animation: a-rise linear both !important;
      animation-timeline: view() !important;
      animation-range: entry 0% entry 35% !important;
    }
  }
}

/* ── Fixes after a first look ────────────────────────────────────────── */
html body .card-icon svg, html body .feature-icon svg, html body .method-icon svg, html body .hero svg { filter: none !important; }
html body .profile-glow-badge img.profile-pic, html body img.profile-pic { box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important; }
.profile-glow-badge > span { display: none !important; }
/* Sections boxed by .container still get their grey across the full width. */
main > section:nth-of-type(even) { position: relative; isolation: isolate; background: transparent !important; }
main > section:nth-of-type(even)::before {
  content: '' !important; display: block !important; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background: var(--a-grey); z-index: -1;
}
/* The footer's four columns sit in one row on a computer. */
@media (min-width: 900px) { .footer-content { grid-template-columns: 1.6fr 1fr 1fr 1fr !important; } }
.loc-stats__inner, .dev-note { background: var(--a-tile) !important; border: 0 !important; border-radius: 18px !important; }
.features-grid .feature-item, .features-grid .feature-item * { color: var(--a-text) !important; }
.response-time { color: var(--a-green) !important; background: rgba(48, 209, 88, .12) !important; border: 0 !important; border-radius: 980px !important; }
.apps-hero [class*="glow"], .apps-hero [class*="orb"], .apps-hero [class*="blob"] { display: none !important; }
.pricing-card [class*="popular"], .pricing-card > div:first-child:not([class]) { background: var(--a-blue) !important; color: #fff !important; border-radius: 980px !important; }
.star, [class*="stars"] { color: #f5a623 !important; }

.ss-feature li, .ss-promise li { color: var(--a-text) !important; }
.wp-stat { border-top: 0 !important; }
.wp-kicker { display: block !important; width: 100%; text-align: center; margin-bottom: 8px !important; }
@media (max-width: 1099px) { .nav-links { background: #fbfbfd !important; } }

/* ═══ Polish: depth and motion (2026-10-23) ════════════════════════════════
   Cards are white and sit on soft, layered shadows (a tight contact shadow and a wide ambient one), lifting a
   little further on hover. Buttons, screenshots, the bar and the floating buttons get matching depth. */
:root {
  --a-card: #ffffff;
  --a-sh-1: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .05), 0 16px 40px rgba(0, 0, 0, .06);
  --a-sh-2: 0 2px 4px rgba(0, 0, 0, .05), 0 12px 28px rgba(0, 0, 0, .09), 0 32px 72px rgba(0, 0, 0, .12);
  --a-sh-img: 0 2px 6px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .16);
  --a-spring: cubic-bezier(.2, .8, .2, 1);
}
html body { background: #ffffff !important; }

/* The hero: a faint wash of light from above. */
html body .hero, html body .apps-hero, html body .wa-hero, html body .sc-hero, html body .wp-hero, html body .ss-hero {
  background: radial-gradient(1100px 520px at 50% -12%, rgba(0, 113, 227, .07), transparent 70%) !important;
}

/* Cards: white, rounded, on layered shadows. */
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) {
  background: var(--a-card) !important;
  border: 1px solid rgba(0, 0, 0, .05) !important;
  box-shadow: var(--a-sh-1) !important;
  transition: transform .45s var(--a-spring), box-shadow .45s var(--a-spring) !important;
}
html body :is(.loc-stats__inner, .dev-note) { background: transparent !important; }
html body :is(a.card, .card, .method-card, .app-card, .ss-card, .wa-app, .pricing-card, .wa-step, .net-card):hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--a-sh-2) !important;
  text-decoration: none !important;
}
/* Big cards hold still (they're whole sections); only their shadow deepens a touch. */
html body :is(.app-card, .ss-feature, .wa-app):hover { transform: translateY(-3px) !important; }
/* Pills and small tiles inside a white card stay grey so they still show. */
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: #f5f5f7 !important; }
html body .app-card .features-grid .feature-item {
  background: #f5f5f7 !important; border: 0 !important; box-shadow: none !important; transition: background .3s !important;
}
html body .app-card .features-grid .feature-item:hover { background: #ececf0 !important; }
html body #announcementsContent > div, html body #serviceStatusContent > div { background: #f5f5f7 !important; }
html body .card-icon {
  width: 48px !important; height: 48px !important; border-radius: 12px !important; justify-content: center !important;
  background: linear-gradient(180deg, #f0f6ff, #e3eefc) !important; box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .08) !important;
}
html body .card-icon svg { width: 24px !important; height: 24px !important; }

/* Buttons: the blue one floats a little. */
html body :is(.btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn, .ss-btn:not(.ss-btn--ghost), .download-btn) {
  box-shadow: 0 1px 2px rgba(0, 113, 227, .2), 0 6px 18px rgba(0, 113, 227, .28) !important;
  transition: transform .3s var(--a-spring), box-shadow .3s var(--a-spring), background-color .2s !important;
}
html body :is(.btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn, .ss-btn:not(.ss-btn--ghost), .download-btn):hover {
  transform: translateY(-2px) !important; box-shadow: 0 2px 4px rgba(0, 113, 227, .2), 0 12px 28px rgba(0, 113, 227, .34) !important;
}
html body :is(.btn, .cyber-btn, .apps-cta, .wa-cta):active { transform: scale(.98) !important; }
html body .hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href] {
  background: #ffffff !important; border: 1px solid rgba(0, 0, 0, .06) !important; box-shadow: var(--a-sh-1) !important;
  transition: transform .35s var(--a-spring), box-shadow .35s var(--a-spring) !important;
}
html body .hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href]:hover { transform: translateY(-3px) !important; box-shadow: var(--a-sh-2) !important; background: #ffffff !important; }

/* Pictures: screenshots and photos sit on a soft shadow. */
html body :is(.app-screenshot, .ss-shot, .wa-shot, .video-wrap, .wp-tile, .engineer-avatar, .ap-shot-frame) {
  box-shadow: var(--a-sh-img) !important; transition: transform .45s var(--a-spring), box-shadow .45s var(--a-spring) !important;
}
html body .wp-tile { border-radius: 14px !important; overflow: hidden; }
html body .wp-tile:hover { transform: translateY(-4px) scale(1.01) !important; box-shadow: var(--a-sh-2) !important; }
html body .app-screenshot:hover { transform: translateY(-4px) !important; }

/* The bar gains a soft edge once the page scrolls; the notice and floating buttons have depth. */
html body header.scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 8px 30px rgba(0, 0, 0, .06) !important; }
html body .site-notice { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, .06) !important; box-shadow: var(--a-sh-1) !important; }
html body :is(.floating-back-to-top, .floating-fb, .jb-helpbot-toggle) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .14) !important;
  transition: transform .3s var(--a-spring), box-shadow .3s var(--a-spring) !important;
}
html body :is(.floating-back-to-top, .floating-fb, .jb-helpbot-toggle):hover { transform: translateY(-3px) scale(1.04) !important; }
html body .jb-helpbot-popup { box-shadow: 0 4px 12px rgba(0, 0, 0, .08), 0 30px 80px rgba(0, 0, 0, .22) !important; }
html body .carousel-nav { box-shadow: var(--a-sh-1) !important; }

/* Details. */
html body a { transition: color .2s; }
html body .nav-links a { transition: opacity .2s !important; }
html body :is(input, select, textarea) { transition: border-color .2s, box-shadow .2s !important; }
html body .profile-glow-badge img.profile-pic { box-shadow: 0 4px 10px rgba(0, 0, 0, .1), 0 24px 50px rgba(0, 0, 0, .22) !important; }
html body footer { border-top: 1px solid rgba(0, 0, 0, .06) !important; }
@media (prefers-reduced-motion: reduce) {
  html body * { transition: none !important; }
  html body *:hover { transform: none !important; }
}
html body .app-screenshots-wrapper::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff) !important; }
html body .app-card-footer { border-top: 1px solid rgba(0, 0, 0, .06) !important; }
html body .app-card :is(.platform-badge, .app-badge) { border: 0 !important; }
html body .hero, html body .apps-hero, html body .wa-hero, html body .sc-hero, html body .wp-hero, html body .ss-hero {
  background: radial-gradient(1400px 640px at 50% -8%, rgba(0, 113, 227, .06), rgba(0, 113, 227, 0) 68%) !important;
}

/* ═══ Spacing fixes (card audit, 2026-10-23) ═══════════════════════════════ */
/* Sections that are also .container lost their vertical padding to the container rule. */
html body section.container { padding-top: 96px !important; padding-bottom: 96px !important; }
html body section.container + section.container { padding-top: 96px !important; }
@media (max-width: 760px) { html body section.container { padding-top: 64px !important; padding-bottom: 64px !important; } }
/* The first heading in a section needs no extra margin on top of the section's padding. */
html body section > .cyber-terminal-wrapper:first-child, html body section > div:first-child > .cyber-terminal-wrapper:first-child { margin-top: 0 !important; }
/* Cards straight under a heading get the same room as a card grid does. */
html body .cyber-terminal-wrapper + div:not(.cards-grid):not(.u-mb-sm),
html body .cyber-terminal-wrapper + .card,
html body .cyber-terminal-wrapper + p + div:not(.cards-grid),
html body .cyber-terminal-wrapper + .scroll-reveal + .cards-grid { margin-top: 40px !important; }
/* Cards that follow other content inside a section. */
html body .cards-grid + .card, html body .card + .card:not(.cards-grid .card), html body .pricing-cards-grid + * { margin-top: 32px !important; }
html body .cards-grid + .cyber-terminal-wrapper, html body .card + .cyber-terminal-wrapper { margin-top: 88px !important; }
/* Apps: room between the app tabs and the first app. */
html body .apps-nav { margin-bottom: 40px !important; }
html body .app-card + .app-card { margin-top: 40px !important; }
/* Wallpapers on a phone: even padding in the stat boxes. */
html body .wp-stat { padding: 20px 16px !important; }
/* Card padding: one size everywhere, a little less on phones. */
html body :is(.card, .method-card, .pricing-card) { padding: 32px !important; }
@media (max-width: 600px) { html body :is(.card, .method-card, .pricing-card) { padding: 24px !important; } }
html body .cards-grid { gap: 24px !important; }
@media (max-width: 600px) { html body .cards-grid { gap: 16px !important; } }

/* Pricing cards (remote support, VPN): even tops, buttons lined up along the bottom, a clear "Most popular". */
html body .pricing-cards-grid { align-items: stretch !important; padding-top: 14px; }
html body .pricing-card { display: flex !important; flex-direction: column !important; margin-top: 0 !important; overflow: visible !important; }
html body .pricing-card > div[style*="position: absolute"][style*="height: 3px"],
html body .pricing-card > div[style*="position: absolute"][style*="height:3px"] { display: none !important; }
html body .pricing-card > div[style*="position: absolute"]:not([style*="height: 3px"]):not(.card-icon) {
  top: -14px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  background: var(--a-blue) !important; color: #fff !important; border-radius: 980px !important; padding: 5px 14px !important;
  font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; width: auto !important; height: auto !important;
}
html body .pricing-card:has(> div[style*="position: absolute"]:not([style*="height: 3px"])) { border: 2px solid var(--a-blue) !important; }
html body .pricing-card .card-icon { margin: 0 auto 16px !important; }
html body .pricing-card h3 { margin-bottom: 4px !important; }
html body .pricing-card .rds-note { margin: 0 0 16px !important; color: var(--a-dim) !important; }
html body .pricing-card ul { text-align: left; margin: 0 0 24px !important; padding-left: 1.1em; }
html body .pricing-card li { margin-bottom: 8px !important; }
html body .pricing-card :is(.paypal-service-btn, .paypal-btn, .btn, a[class*="btn"], button) { margin-top: auto !important; width: 100%; }
html body .pricing-card:not(:hover) { transform: none !important; }
html body .pricing-card:hover { transform: translateY(-6px) !important; }

/* Boxes that set their own neon border inline become ordinary cards. */
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(0, 0, 0, .05) !important; border-radius: 18px !important; background: #ffffff !important;
  box-shadow: var(--a-sh-1) !important;
}
html body .cyber-terminal-wrapper + div[style*="border"] { margin-top: 32px !important; }

/* ═══ Liquid glass (2026-10-23) ═════════════════════════════════════════════
   A soft, still wash of colour sits behind the whole page, and the bar, the notice, the cards, the buttons and
   the floating buttons are panes of frosted glass over it: blurred and brightened behind, a bright rim of light
   along the edge, a faint dark rim underneath, and a soft shadow. Cards blur only on bigger screens (heavy work
   for a phone); there they are the same glass without the blur. */
:root {
  --g-fill: rgba(255, 255, 255, .58);
  --g-fill-strong: rgba(255, 255, 255, .74);
  --g-blur: saturate(180%) blur(22px);
  --g-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .04), inset 0 0 0 1px rgba(255, 255, 255, .45);
  --g-edge: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .25) 35%, rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .7) 100%);
}
/* The colour behind the glass. */
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(255, 190, 150, .22), transparent 62%),
    radial-gradient(700px 600px at 12% 88%, rgba(140, 225, 200, .22), transparent 60%),
    #f5f5f7 !important;
  background-attachment: fixed !important;
}
html body { background: transparent !important; }
html body main > section:nth-of-type(even) { background: transparent !important; }
html body main > section:nth-of-type(even)::before { background: rgba(255, 255, 255, .28) !important; }
html body .hero, html body .apps-hero, html body .wa-hero, html body .sc-hero, html body .wp-hero, html body .ss-hero { background: transparent !important; }

/* Headings: one line, as large as fits (apple-theme.js scales them). */
html body .hero-content { max-width: 1180px !important; }
html body :is(main h1, main h2, .cyber-terminal-title, .section-title) { max-width: 100% !important; }

/* The bar: a pane of glass along the top. */
html body header {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: saturate(200%) blur(28px) !important; -webkit-backdrop-filter: saturate(200%) blur(28px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .6) !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .05), 0 6px 24px rgba(0, 0, 0, .05) !important;
}
html body header.scrolled { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06), 0 10px 34px rgba(0, 0, 0, .08) !important; }
@media (min-width: 1100px) {
  html body .nav-links a { border-radius: 980px !important; padding: 0 12px !important; line-height: 30px !important; margin: 9px 1px !important; transition: background .2s, opacity .2s !important; }
  html body .nav-links a:hover { background: rgba(255, 255, 255, .7) !important; box-shadow: var(--g-rim), 0 2px 8px rgba(0, 0, 0, .06) !important; opacity: 1 !important; text-decoration: none !important; }
  html body .nav-links a.active { background: rgba(255, 255, 255, .85) !important; box-shadow: var(--g-rim), 0 2px 10px rgba(0, 0, 0, .08) !important; }
}
@media (max-width: 1099px) {
  html body .nav-links { background: rgba(255, 255, 255, .7) !important; backdrop-filter: saturate(200%) blur(30px) !important; -webkit-backdrop-filter: saturate(200%) blur(30px) !important; }
}

/* Glass panes. */
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"]) {
  background: var(--g-fill) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: var(--g-rim), var(--a-sh-1) !important;
}
@media (min-width: 768px) {
  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, .apps-nav) {
    backdrop-filter: var(--g-blur) !important; -webkit-backdrop-filter: var(--g-blur) !important;
  }
}
html body :is(.card, .method-card, .app-card, .ss-card, .wa-app, .pricing-card, .wa-step, .net-card):hover {
  background: var(--g-fill-strong) !important;
  box-shadow: var(--g-rim), var(--a-sh-2) !important;
}
html body .pricing-card:has(> div[style*="position: absolute"]:not([style*="height: 3px"])) { border: 2px solid rgba(0, 113, 227, .65) !important; }
/* The light caught along the glass edge. */
html body :is(.card, .method-card, .pricing-card, .ss-card, .live-telemetry, .apps-stat, .wa-stat, .sc-stat, .wp-stat, .net-card, .loc-stats) { position: relative; }
html body :is(.card, .method-card, .pricing-card, .ss-card, .live-telemetry, .apps-stat, .wa-stat, .sc-stat, .wp-stat, .net-card, .loc-stats)::after {
  content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important;
  width: auto !important; height: auto !important; border-radius: inherit !important; padding: 1px !important; margin: 0 !important;
  background: var(--g-edge) !important; transform: none !important; transition: none !important; opacity: 1 !important; z-index: 1 !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none !important;
}
/* Things sitting on glass: lighter glass. */
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(255, 255, 255, .55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(0, 0, 0, .05) !important;
}
html body .app-card .features-grid .feature-item:hover { background: rgba(255, 255, 255, .85) !important; }
html body .card-icon {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(228, 238, 252, .7)) !important;
  box-shadow: inset 0 1px 0 #fff, 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] {
  background: var(--g-fill) !important; border: 1px solid rgba(255, 255, 255, .6) !important;
  backdrop-filter: var(--g-blur) !important; -webkit-backdrop-filter: var(--g-blur) !important;
  box-shadow: var(--g-rim), var(--a-sh-1) !important;
}
html body .hero .loc-badge { background: var(--g-fill) !important; box-shadow: var(--g-rim), 0 2px 8px rgba(0, 0, 0, .05) !important; }

/* Buttons: the blue one is tinted glass with a gloss on top; the others are clear glass. */
html body :is(.btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn, .ss-btn:not(.ss-btn--ghost), .download-btn, .jb-helpbot-send) {
  background: linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important;
  border: 1px solid rgba(0, 90, 200, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 113, 227, .32) !important;
}
html body :is(.btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn, .download-btn):hover {
  background: linear-gradient(180deg, #3d97ff 0%, #0a7bf0 55%, #0071e3 100%) !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(255, 255, 255, .55) !important; border: 1px solid rgba(255, 255, 255, .75) !important; color: var(--a-blue) !important;
  backdrop-filter: var(--g-blur) !important; -webkit-backdrop-filter: var(--g-blur) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .05), 0 4px 14px rgba(0, 0, 0, .07) !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(255, 255, 255, .85) !important; color: var(--a-blue) !important; transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(0, 0, 0, .1) !important;
}

/* Floating buttons, the help window, inputs, the footer. */
html body :is(.floating-back-to-top, .floating-fb, .jb-helpbot-toggle) {
  background: rgba(255, 255, 255, .6) !important; border: 1px solid rgba(255, 255, 255, .8) !important;
  backdrop-filter: saturate(200%) blur(20px) !important; -webkit-backdrop-filter: saturate(200%) blur(20px) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .05), 0 8px 26px rgba(0, 0, 0, .14) !important;
}
html body .jb-helpbot-popup {
  background: rgba(255, 255, 255, .78) !important; border: 1px solid rgba(255, 255, 255, .8) !important;
  backdrop-filter: saturate(200%) blur(30px) !important; -webkit-backdrop-filter: saturate(200%) blur(30px) !important;
}
html body .jb-helpbot-header { background: rgba(255, 255, 255, .4) !important; }
html body :is(input, select, textarea) { background: rgba(255, 255, 255, .7) !important; border: 1px solid rgba(0, 0, 0, .08) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04) !important; }
html body footer { background: rgba(255, 255, 255, .45) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(255, 255, 255, .7) !important; }

/* Apps page leftovers: the colour blob beside the title, and the fade/strip behind the screenshots. */
html body .apps-title-row::before, html body .apps-title-row::after { display: none !important; }
html body .app-screenshots-wrapper::before, html body .app-screenshots-wrapper::after { display: none !important; }
html body :is(.app-screenshots-wrapper, .app-screenshots-container, .wa-shots-wrap, .wa-shots) { background: transparent !important; box-shadow: none !important; }

/* Big cards that hold scrolling screenshot rows: glass without the blur (Chrome shows the scroller as a lighter
   strip inside a blurred pane, and blurring a panel this size is heavy). */
html body :is(.app-card, .wa-app, .ss-feature) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255, 255, 255, .66) !important; }
html body :is(.app-card, .wa-app, .ss-feature):hover { background: rgba(255, 255, 255, .78) !important; }

/* Screenshots inside a scrolling row: a tight shadow (a wide one gets clipped by the row into a visible box). */
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, .18) !important; }
html body .app-screenshots-container .ap-shot-frame .app-screenshot { box-shadow: none !important; }

/* ═══ Contact page buttons: the same pills as everywhere else ═══════════════ */
html body :is(.primary-cta, .secondary-cta) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 26px !important; margin: 4px 0 !important;
  border-radius: 980px !important; font: 500 17px/1 var(--a-font) !important; letter-spacing: -0.01em !important;
  text-decoration: none !important; text-transform: none !important; transform: none;
  transition: transform .3s var(--a-spring), box-shadow .3s var(--a-spring), background .2s !important;
}
html body .primary-cta {
  background: linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important; color: #fff !important;
  border: 1px solid rgba(0, 90, 200, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 113, 227, .32) !important;
}
html body .primary-cta:hover { background: linear-gradient(180deg, #3d97ff 0%, #0a7bf0 55%, #0071e3 100%) !important; transform: translateY(-2px); }
html body .secondary-cta, html body .secondary-cta[style] {
  background: rgba(255, 255, 255, .6) !important; color: var(--a-blue) !important; border: 1px solid rgba(255, 255, 255, .8) !important;
  backdrop-filter: var(--g-blur) !important; -webkit-backdrop-filter: var(--g-blur) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .05), 0 4px 14px rgba(0, 0, 0, .08) !important;
}
html body .secondary-cta:hover { background: rgba(255, 255, 255, .88) !important; transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(0, 0, 0, .1) !important; }
html body :is(.primary-cta, .secondary-cta) :is(span, svg, img) { color: inherit !important; }
html body .primary-cta svg, html body .primary-cta svg * { fill: currentColor; }
/* The notes under them ("I'll get back to you…", "Most available…"): quiet pills. */
html body .response-time, html body :is(.method-card, .card) [class*="availability"], html body .card p[style*="border-radius"] {
  background: rgba(255, 255, 255, .55) !important; border: 1px solid rgba(255, 255, 255, .8) !important; border-radius: 980px !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

/* ═══ Wallpapers: a light, fast page ════════════════════════════════════════ */
/* The search and filter bar: a glass shelf, not a black strip. */
html body .wp-command {
  background: rgba(255, 255, 255, .62) !important; border: 1px solid rgba(255, 255, 255, .7) !important;
  backdrop-filter: saturate(200%) blur(26px) !important; -webkit-backdrop-filter: saturate(200%) blur(26px) !important;
  box-shadow: inset 0 1px 0 #fff, 0 8px 30px rgba(0, 0, 0, .07) !important; border-radius: 22px !important;
  max-width: 1240px; margin: 0 auto 24px !important; padding: 16px 20px !important;
}
html body .wp-command::before, html body .wp-command::after { display: none !important; }
html body .wp-search, html body .wp-sort {
  background: rgba(255, 255, 255, .85) !important; border: 1px solid rgba(0, 0, 0, .08) !important; border-radius: 980px !important;
  color: var(--a-text) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04) !important;
}
html body .wp-search input { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--a-text) !important; }
html body .wp-density { background: rgba(0, 0, 0, .05) !important; border: 0 !important; border-radius: 980px !important; padding: 3px !important; }
html body .wp-density button, html body .wp-iconbtn {
  background: transparent !important; border: 0 !important; border-radius: 980px !important; color: var(--a-text-2) !important;
}
html body .wp-density button[aria-pressed="true"], html body .wp-density button.is-on, html body .wp-density button.active {
  background: #fff !important; color: var(--a-text) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .12) !important;
}
html body .wp-iconbtn { background: rgba(255, 255, 255, .85) !important; border: 1px solid rgba(0, 0, 0, .08) !important; }
html body .wp-iconbtn svg, html body .wp-density svg { stroke: currentColor !important; color: inherit !important; }
html body .wp-chip {
  background: rgba(255, 255, 255, .8) !important; border: 1px solid rgba(0, 0, 0, .07) !important; border-radius: 980px !important;
  color: var(--a-text-2) !important; padding: 6px 14px !important;
}
html body .wp-chip__n { color: var(--a-faint) !important; }
html body .wp-chip[aria-pressed="true"], html body .wp-chip.is-on, html body .wp-chip.active {
  background: var(--a-text) !important; color: #fff !important; border-color: var(--a-text) !important;
}
html body .wp-chip[aria-pressed="true"] .wp-chip__n, html body .wp-chip.is-on .wp-chip__n, html body .wp-chip.active .wp-chip__n { color: rgba(255, 255, 255, .7) !important; }
html body .wp-chips__legend, html body .wp-count { color: var(--a-dim) !important; }
/* The coffee note: a glass card with readable words. */
html body .wp-support {
  background: rgba(255, 255, 255, .6) !important; border: 1px solid rgba(255, 255, 255, .75) !important; border-radius: 22px !important;
  backdrop-filter: var(--g-blur) !important; -webkit-backdrop-filter: var(--g-blur) !important;
  box-shadow: inset 0 1px 0 #fff, var(--a-sh-1) !important;
}
html body .wp-support p { color: var(--a-text-2) !important; }
html body .wp-support::before, html body .wp-support::after { display: none !important; }
/* The figures: no blue bar along the top. */
html body .wp-stat { border-top: 1px solid rgba(255, 255, 255, .55) !important; }
html body .wp-stat::before { display: none !important; }
/* The title and the line under it: plain, still text. */
html body #wp-title { font-family: var(--a-font) !important; }
html body .wp-term::before { content: none !important; }
/* Tiles: a soft lift; the picture fills the tile; no heavy reveal animation. */
html body .wp-tile { border-radius: 16px !important; background: #e9e9ee !important; }
html body .wp-tile.wp-reveal { opacity: 1 !important; transform: none !important; }
html body .wp-tile__img { transition: transform .5s var(--a-spring) !important; }
html body .wp-tile:hover .wp-tile__img { transform: scale(1.03) !important; }
html body .wp-tile__brackets { display: none !important; }

html body .availability-badge {
  display: inline-flex !important; background: rgba(255, 255, 255, .55) !important; border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: 980px !important; color: var(--a-text-2) !important; box-shadow: inset 0 1px 0 #fff !important; padding: 8px 16px !important;
}
/* Wallpaper tiles: the name and size sit on a soft dark fade at the foot of the picture, in white. */
html body .wp-tile__veil { display: block !important; background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .18) 34%, transparent 58%) !important; }
html body .wp-tile__meta, html body .wp-tile__meta * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body .wp-tile__title { font-size: 15px !important; font-weight: 600 !important; }
html body .wp-tile__data span { color: rgba(255, 255, 255, .8) !important; -webkit-text-fill-color: rgba(255, 255, 255, .8) !important; font-size: 12px !important; }
html body .wp-tile__badge { background: rgba(255, 255, 255, .85) !important; color: var(--a-text) !important; border-radius: 980px !important; border: 0 !important; }
html body .wp-act { background: rgba(255, 255, 255, .85) !important; color: var(--a-text) !important; border-radius: 50% !important; border: 0 !important; }

/* Wallpaper preview (lightbox): Apple's dark viewer — black behind, frosted bars, round glass controls. */
html body .wp-lb { background: rgba(0, 0, 0, .92) !important; }
html body .wp-lb__ambient { opacity: .35 !important; }
html body :is(.wp-lb__bar, .wp-lb__foot) {
  background: rgba(30, 30, 32, .55) !important; border: 0 !important;
  backdrop-filter: saturate(180%) blur(24px) !important; -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
}
html body .wp-lb__bar::before, html body .wp-lb__bar::after, html body .wp-lb__foot::before, html body .wp-lb__foot::after { display: none !important; }
html body .wp-lb__name { color: #f5f5f7 !important; font-weight: 600 !important; }
html body .wp-lb__index, html body .wp-lb__facts, html body .wp-lb__facts * { color: rgba(245, 245, 247, .72) !important; -webkit-text-fill-color: currentColor !important; }
html body .wp-lb__facts b, html body .wp-lb__facts strong { color: #f5f5f7 !important; }
html body .wp-lb__img { border-radius: 14px !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .6) !important; }
html body :is(.wp-lb__btn, .wp-lb__close, .wp-lb__nav) {
  background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #f5f5f7 !important;
  border-radius: 980px !important; font: 500 14px/1 var(--a-font) !important;
  backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
html body :is(.wp-lb__btn, .wp-lb__close, .wp-lb__nav):hover { background: rgba(255, 255, 255, .26) !important; }
html body :is(.wp-lb__btn, .wp-lb__close, .wp-lb__nav) svg { stroke: currentColor !important; color: inherit !important; }
html body .wp-lb__close, html body .wp-lb__nav { width: 44px !important; height: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
html body .wp-lb__btn:not(.wp-lb__btn--ghost), html body #wp-lb-download {
  background: linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important; border-color: rgba(120, 180, 255, .45) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 24px -6px rgba(0, 113, 227, .7) !important;
}
html body .wp-lb__zoomtag { background: rgba(30, 30, 32, .6) !important; color: #f5f5f7 !important; border: 0 !important; border-radius: 980px !important; }
html body .wp-lb__pos, html body .wp-lb__meter { background: rgba(255, 255, 255, .15) !important; }

/* ═══ Selected pills and Buy Me a Coffee: the site's blue (no black pills) ═══ */
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) {
  background: linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important;
  border: 1px solid rgba(0, 90, 200, .55) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 4px 14px rgba(0, 113, 227, .3) !important;
}
html body :is(.wp-chip[aria-pressed="true"], .wp-chip.is-on, .wp-chip.active) .wp-chip__n { color: rgba(255, 255, 255, .8) !important; -webkit-text-fill-color: rgba(255, 255, 255, .8) !important; }
html body :is(.cyber-btn-gold, a[href*="buymeacoffee"]):not(#_x):not(#_y) :is(svg, span, img) { color: #fff !important; stroke: currentColor; -webkit-text-fill-color: #fff !important; }
html body :is(.cyber-btn-gold, a[href*="buymeacoffee"]):not(#_x):not(#_y):hover {
  background: linear-gradient(180deg, #3d97ff 0%, #0a7bf0 55%, #0071e3 100%) !important; color: #fff !important; transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px rgba(0, 113, 227, .38) !important;
}
/* The selected view-size button: a blue dot of glass instead of white. */
html body .wp-density button[aria-pressed="true"], html body .wp-density button.is-on, html body .wp-density button.active {
  background: linear-gradient(180deg, #2b8cff, #0071e3) !important; color: #fff !important;
}

/* ═══ Dropdowns: light, like the rest (the old theme painted their option lists dark) ═══ */
html body select { color-scheme: light !important; }
html body select option, html body select optgroup {
  background: #ffffff !important; color: var(--a-text) !important; -webkit-text-fill-color: var(--a-text) !important;
  font-family: var(--a-font) !important;
}
html body select option:checked { background: #e8f1fd !important; color: var(--a-text) !important; }
html body select:not([multiple]):not([size]) {
  -webkit-appearance: none !important; appearance: none !important;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important;
}

/* ═══ Consistency pass (theme audit, 2026-10-24) ════════════════════════════
   Everything the audit found that still used the old look: pop-up windows, coloured labels, gold and neon
   buttons, coloured edge stripes. All now use the same blue, glass and greys as the rest. */

/* Pop-up windows (feedback, all feedback, keyboard shortcuts): a light dimmed backdrop and a glass sheet. */
html body :is(#feedbackModal, #allFeedbackModal, .wp-keys) {
  background: rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(8px) saturate(140%) !important; -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}
html body :is(#feedbackModal, #allFeedbackModal) > div, html body .wp-keys__panel {
  background: rgba(255, 255, 255, .86) !important; color: var(--a-text) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important; border-radius: 22px !important;
  backdrop-filter: saturate(200%) blur(30px) !important; -webkit-backdrop-filter: saturate(200%) blur(30px) !important;
  box-shadow: inset 0 1px 0 #fff, 0 30px 80px rgba(0, 0, 0, .25) !important;
}
html body :is(#feedbackModal, #allFeedbackModal, .wp-keys__panel) :is(h2, h3, label, p, span, div, li, td, th, kbd, b, strong) { color: var(--a-text) !important; -webkit-text-fill-color: currentColor !important; }
html body .wp-keys__panel kbd { background: #fff !important; border: 1px solid rgba(0, 0, 0, .12) !important; border-radius: 6px !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .1) !important; }
html body .wp-keys__row { border-color: rgba(0, 0, 0, .06) !important; }
html body :is(#closeFeedbackModal, #closeAllFeedbackModal, .wp-keys__close, .wp-keys [aria-label="Close"]) {
  background: rgba(0, 0, 0, .06) !important; color: var(--a-text) !important; border: 0 !important; border-radius: 50% !important;
  width: 32px !important; height: 32px !important; display: inline-flex !important; align-items: center; justify-content: center;
}
/* All Feedback: each review a card in a grouped list, like App Store reviews. Text sits inside 18px of padding
   (it touched the card edge), cards have room between them, stars are Apple's orange, the quote is upright
   body text, and the list scrolls with a thin overlay bar instead of the old chunky blue one. */
html body #allFeedbackList:not(#_x) {
  display: grid; gap: 10px; align-content: start; padding: 2px 6px 14px 2px !important;
  scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .22) transparent;
}
html body #allFeedbackList::-webkit-scrollbar { width: 8px; }
html body #allFeedbackList::-webkit-scrollbar-track { background: transparent; }
html body #allFeedbackList::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
html body #allFeedbackList > .fb-item:not(#_x) {
  padding: 16px 18px !important; margin: 0 !important;
  background: rgba(255, 255, 255, .72) !important; border: 1px solid rgba(0, 0, 0, .05) !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
}
html body #allFeedbackModal .fb-item__head:not(#_x) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
html body #allFeedbackModal .fb-item__name:not(#_x) { font: 600 16px/1.3 var(--a-font) !important; color: var(--a-text) !important; }
html body #allFeedbackModal .fb-item__service:not(#_x) { font: 400 13px/1.3 var(--a-font) !important; color: var(--a-dim) !important; white-space: nowrap; }
html body #allFeedbackModal .fb-item__stars:not(#_x) { display: block; margin: 0 0 8px; font-size: 14px; letter-spacing: 2px; line-height: 1; }
html body #allFeedbackModal .fb-item__on:not(#_x) { color: #ff9500 !important; -webkit-text-fill-color: #ff9500 !important; }
html body #allFeedbackModal .fb-item__off:not(#_x) { color: rgba(0, 0, 0, .16) !important; -webkit-text-fill-color: rgba(0, 0, 0, .16) !important; }
html body #allFeedbackModal .fb-item__text:not(#_x) { margin: 0 0 12px !important; font: 400 15px/1.55 var(--a-font) !important; font-style: normal !important; color: var(--a-text-2) !important; }
/* The like button: a quiet grey capsule; blue when it's yours. (style.css still had neon cyan and pink.) */
html body .feedback-like:not(#_x) {
  font: 500 13px/1 var(--a-font) !important; color: var(--a-dim) !important; padding: 6px 11px !important; gap: 6px !important;
  background: rgba(0, 0, 0, .04) !important; border: 1px solid transparent !important; box-shadow: none !important;
}
html body .feedback-like:not(#_x):hover { background: rgba(0, 113, 227, .08) !important; color: var(--a-blue) !important; }
html body .feedback-like.is-liked:not(#_x), html body .feedback-like.is-liked:not(#_x):hover { background: rgba(0, 113, 227, .12) !important; color: var(--a-blue) !important; }
html body .feedback-like:not(#_x):focus-visible { outline: 2px solid rgba(0, 113, 227, .5) !important; outline-offset: 2px; }
html body .feedback-like:not(#_x) .feedback-like-count { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html body .feedback-like:not(#_x):hover .feedback-like-icon svg { color: var(--a-blue); }
html body :is(#feedbackModal, #allFeedbackModal) button[type="submit"] {
  background: linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important; color: #fff !important; border-radius: 980px !important; border: 0 !important;
}

/* Gold, yellow and neon-green buttons: the site's blue. */
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) {
  background: linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important;
  border: 1px solid rgba(0, 90, 200, .55) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  border-radius: 980px !important; font-family: var(--a-font) !important; font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(0, 113, 227, .3) !important;
}
html body .featured-badge {
  background: linear-gradient(180deg, #2b8cff, #0071e3) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 0 !important; border-radius: 980px !important;
}

/* Coloured stripes down the side of notes: plain glass notes instead. */
html body :is(.sc-honest, .wa-app-desc, .instructions, .net-banner) {
  border: 1px solid rgba(255, 255, 255, .75) !important; border-radius: 16px !important;
  background: rgba(255, 255, 255, .6) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 10px rgba(0, 0, 0, .05) !important;
}
html body .net-banner::before, html body .net-banner::after { display: none !important; }
html body .net-banner, html body .net-banner * { color: var(--a-green) !important; -webkit-text-fill-color: currentColor !important; }

/* Coloured labels: one blue for tags, greys for counts; red/orange stay where they mean "bad". */
html body :is(.sc-topic-plat) {
  color: var(--a-link) !important; -webkit-text-fill-color: currentColor !important;
  background: rgba(0, 113, 227, .08) !important; border: 0 !important; border-radius: 980px !important;
}
html body .sc-topic b, html body [class*="sc-topic"] b { color: var(--a-text) !important; -webkit-text-fill-color: currentColor !important; }
html body .wa-mode i {
  font-family: var(--a-font) !important; font-style: normal !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  background: var(--a-blue) !important; border: 0 !important; border-radius: 50% !important;
}
html body .wa-mode b { color: var(--a-text) !important; -webkit-text-fill-color: currentColor !important; }

/* Text drawn inside charts and maps: the site's typeface. */
html body svg text, html body caption { font-family: var(--a-font) !important; }

/* Network page: the refresh button and status tags as pills. */
html body .net-refresh { background: rgba(255, 255, 255, .7) !important; color: var(--a-blue) !important; border: 1px solid rgba(255, 255, 255, .85) !important; border-radius: 980px !important; padding: 0 18px !important; min-height: 36px; box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0, 0, 0, .08) !important; }
html body .net-refresh:hover { background: rgba(255, 255, 255, .92) !important; }
html body .net-card__state { border-radius: 980px !important; background: rgba(48, 209, 88, .12) !important; color: var(--a-green) !important; -webkit-text-fill-color: currentColor !important; border: 0 !important; padding: 2px 10px !important; }

/* ═══ Support Centre: the fault reader and the ask-the-knowledge-base console, light like the rest ═══ */
html body {
  --sc-surface-1: rgba(255, 255, 255, .62); --sc-surface-2: rgba(255, 255, 255, .8); --sc-surface-3: #ffffff;
  --sc-border: rgba(0, 0, 0, .07); --sc-border-soft: rgba(0, 0, 0, .1);
  --sc-text: #1d1d1f; --sc-dim: #6e6e73; --sc-acc: #0071e3;
  --sc-elev-1: 0 2px 8px rgba(0, 0, 0, .06); --sc-elev-2: 0 12px 34px rgba(0, 0, 0, .12);
}
html body [data-platform] { --sc-acc: #0071e3; }
html body [data-severity="critical"] { --sc-sev: #d70015; }
html body [data-severity="high"] { --sc-sev: #b25000; }
html body [data-severity="medium"] { --sc-sev: #9a6700; }
html body [data-severity="low"] { --sc-sev: #1b7a33; }

/* The reader window. */
html body .sc-reader-scrim { background: rgba(0, 0, 0, .28) !important; backdrop-filter: blur(8px) saturate(140%) !important; -webkit-backdrop-filter: blur(8px) saturate(140%) !important; }
html body .sc-reader-panel {
  background: rgba(255, 255, 255, .9) !important; border: 1px solid rgba(255, 255, 255, .95) !important; border-radius: 22px !important;
  backdrop-filter: saturate(200%) blur(30px) !important; -webkit-backdrop-filter: saturate(200%) blur(30px) !important;
  box-shadow: inset 0 1px 0 #fff, 0 30px 80px rgba(0, 0, 0, .25) !important; color: var(--a-text) !important;
}
html body .sc-reader-panel::before, html body .sc-reader-panel::after { display: none !important; }
html body .sc-reader-head { background: transparent !important; border-bottom: 1px solid rgba(0, 0, 0, .07) !important; }
html body .sc-reader-eyebrow { color: var(--a-dim) !important; font-family: var(--a-font) !important; font-size: 13px !important; }
html body .sc-reader-head h2, html body #sc-reader-title { color: var(--a-text) !important; -webkit-text-fill-color: currentColor !important; font-size: 24px !important; }
html body .sc-reader-close {
  background: rgba(0, 0, 0, .06) !important; color: var(--a-text) !important; border: 0 !important; border-radius: 50% !important; transform: none !important;
}
html body .sc-reader-close:hover { background: rgba(0, 0, 0, .1) !important; }
html body .sc-reader-body { background: transparent !important; color: var(--a-text) !important; }
html body .sc-reader-body::after, html body .sc-reader-body::before { display: none !important; }
html body .sc-block h4 { color: var(--a-text) !important; font-family: var(--a-font) !important; font-size: 14px !important; font-weight: 600 !important; }
html body .sc-block h4::after { background: rgba(0, 0, 0, .08) !important; }
html body .sc-block p, html body .sc-reader-body p { color: var(--a-text-2) !important; font-family: var(--a-font) !important; }
html body .sc-code-pill { color: var(--a-link) !important; background: rgba(0, 113, 227, .08) !important; border: 0 !important; border-radius: 980px !important; }
html body .sc-code-pill mark { background: rgba(255, 204, 0, .35) !important; color: var(--a-text) !important; }

/* A fix: a white card; steps in dark text with blue numbers. */
html body .sc-fix {
  background: #ffffff !important; border: 1px solid rgba(0, 0, 0, .06) !important; border-radius: 18px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important;
}
html body .sc-fix::before { display: none !important; }
html body .sc-fix-head { border-bottom: 1px solid rgba(0, 0, 0, .06) !important; }
html body .sc-fix-head h5 { color: var(--a-text) !important; font-family: var(--a-font) !important; }
html body .sc-meta span {
  font-family: var(--a-font) !important; color: var(--a-text-2) !important; background: #f2f2f5 !important;
  border: 0 !important; border-radius: 980px !important;
}
html body .sc-meta .sc-risk--high, html body .sc-meta .sc-irrev { color: #d70015 !important; background: rgba(215, 0, 21, .08) !important; }
html body .sc-meta .sc-risk--medium { color: #9a6700 !important; background: rgba(255, 204, 0, .16) !important; }
html body .sc-meta .sc-risk--low { color: #1b7a33 !important; background: rgba(48, 209, 88, .12) !important; }
html body .sc-when { background: #f7f7f9 !important; border-bottom: 1px solid rgba(0, 0, 0, .06) !important; color: var(--a-text-2) !important; font-family: var(--a-font) !important; }
html body .sc-step-do { color: var(--a-text) !important; font-family: var(--a-font) !important; }
html body .sc-steps > li::before {
  font-family: var(--a-font) !important; font-weight: 600 !important; color: #fff !important;
  background: var(--a-blue) !important; border: 0 !important; border-radius: 50% !important;
}
html body .sc-steps > li::after { background: rgba(0, 0, 0, .08) !important; }
html body .sc-why { background: #f5f5f7 !important; border-left: 0 !important; border-radius: 12px !important; color: var(--a-text-2) !important; font-family: var(--a-font) !important; }
html body .sc-why::before { color: var(--a-dim) !important; font-family: var(--a-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
/* Commands: a light code box, dark monospace text. */
html body .sc-cmd { background: #f5f5f7 !important; border: 1px solid rgba(0, 0, 0, .06) !important; border-radius: 12px !important; }
html body .sc-cmd-bar { background: rgba(0, 0, 0, .03) !important; border-bottom: 1px solid rgba(0, 0, 0, .06) !important; }
html body .sc-cmd-bar span { color: var(--a-dim) !important; font-family: var(--a-font) !important; letter-spacing: 0 !important; }
html body .sc-cmd pre, html body .sc-cmd pre * { color: #1d1d1f !important; -webkit-text-fill-color: #1d1d1f !important; font-family: var(--a-mono) !important; }
html body .sc-copy { color: var(--a-blue) !important; background: #fff !important; border: 1px solid rgba(0, 0, 0, .08) !important; border-radius: 980px !important; font-family: var(--a-font) !important; }
html body .sc-copy.is-done { color: #fff !important; background: var(--a-green) !important; border-color: var(--a-green) !important; }
html body .sc-outcome .sc-verify { background: rgba(48, 209, 88, .08) !important; border: 0 !important; color: var(--a-text-2) !important; border-radius: 14px !important; }
html body .sc-outcome .sc-rollback { background: rgba(215, 0, 21, .05) !important; border: 0 !important; color: var(--a-text-2) !important; border-radius: 14px !important; }
html body .sc-outcome strong { font-family: var(--a-font) !important; letter-spacing: 0 !important; }
html body .sc-outcome .sc-verify strong { color: #1b7a33 !important; }
html body .sc-outcome .sc-rollback strong { color: #d70015 !important; }
html body :is(.sc-script-get, .sc-refs a, .sc-related-item, .sc-open, .sc-ask) {
  color: var(--a-blue) !important; background: #fff !important; border: 1px solid rgba(0, 0, 0, .08) !important; border-radius: 980px !important;
  font-family: var(--a-font) !important;
}
html body .sc-related-item { border-radius: 14px !important; }
html body .sc-related-item b { color: var(--a-text) !important; }
html body .sc-related-item span, html body .sc-script-note, html body .sc-disclaimer, html body .sc-refnote { color: var(--a-dim) !important; font-family: var(--a-font) !important; }
html body .sc-loading { color: var(--a-dim) !important; }

/* The console: a light chat window. */
html body .sc-console {
  background: rgba(255, 255, 255, .7) !important; border: 1px solid rgba(255, 255, 255, .85) !important; border-radius: 22px !important;
  backdrop-filter: saturate(200%) blur(26px) !important; -webkit-backdrop-filter: saturate(200%) blur(26px) !important;
  box-shadow: inset 0 1px 0 #fff, var(--a-sh-1) !important; color: var(--a-text) !important;
}
html body .sc-console-bar { background: rgba(0, 0, 0, .03) !important; border-bottom: 1px solid rgba(0, 0, 0, .06) !important; color: var(--a-dim) !important; }
html body .sc-console-bar b { color: var(--a-text) !important; font-family: var(--a-font) !important; letter-spacing: 0 !important; }
html body .sc-console-reset { background: #fff !important; color: var(--a-blue) !important; border: 1px solid rgba(0, 0, 0, .08) !important; border-radius: 980px !important; }
html body .sc-console-log { background: transparent !important; color: var(--a-text) !important; font-family: var(--a-font) !important; }
html body .sc-console-log::-webkit-scrollbar-track, html body .sc-reader-body::-webkit-scrollbar-track, html body .sc-cmd pre::-webkit-scrollbar-track { background: transparent !important; }
html body .sc-console-log::-webkit-scrollbar-thumb, html body .sc-reader-body::-webkit-scrollbar-thumb, html body .sc-cmd pre::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18) !important; border: 0 !important; border-radius: 8px !important; }
html body .sc-who { font-family: var(--a-font) !important; letter-spacing: 0 !important; font-weight: 600 !important; }
html body .sc-line--you .sc-who { color: #1b7a33 !important; }
html body .sc-line--bot .sc-who { color: var(--a-blue) !important; }
html body .sc-line--sys .sc-who { color: var(--a-faint) !important; }
html body .sc-say, html body .sc-line--you .sc-say { color: var(--a-text) !important; }
html body .sc-line--sys .sc-say { color: var(--a-dim) !important; }
html body .sc-say .sc-arrow { color: var(--a-faint) !important; }
html body .sc-say code, html body .sc-say b { color: var(--a-text) !important; }
html body .sc-verdict dt { color: var(--a-dim) !important; }
html body .sc-verdict dd { color: var(--a-text) !important; }
html body .sc-typing i { background: var(--a-blue) !important; }
html body .sc-console-input { background: transparent !important; border-top: 1px solid rgba(0, 0, 0, .06) !important; }
html body .sc-console-input input {
  background: #fff !important; color: var(--a-text) !important; border: 1px solid rgba(0, 0, 0, .1) !important; border-radius: 980px !important;
  padding: 0 16px !important; font-family: var(--a-font) !important;
}
html body .sc-console-input input::placeholder { color: var(--a-faint) !important; }
html body .sc-prompt { color: var(--a-blue) !important; font-family: var(--a-font) !important; }
html body .sc-console-send {
  background: linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important; color: #fff !important;
  border: 1px solid rgba(0, 90, 200, .55) !important; border-radius: 980px !important; text-transform: none !important;
  letter-spacing: 0 !important; font-family: var(--a-font) !important; font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px rgba(0, 113, 227, .3) !important;
}
html body .sc-console-hint { color: #1b7a33 !important; font-family: var(--a-font) !important; letter-spacing: 0 !important; }
html body .sc-console-keys { color: var(--a-dim) !important; }
html body :is(.sc-console-keys kbd, .sc-ask kbd) { color: var(--a-text) !important; background: #fff !important; border: 1px solid rgba(0, 0, 0, .12) !important; border-radius: 6px !important; font-family: var(--a-font) !important; }
html body .sc-dot { display: none !important; }

/* Refund notices (Services) and payment policy windows: the same light glass sheet as the other pop-ups. */
html body :is(.modal, .policy-modal) {
  background: rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(8px) saturate(140%) !important; -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}
html body :is(.modal .modal-content, .policy-dialog) {
  background: rgba(255, 255, 255, .9) !important; color: var(--a-text) !important;
  border: 1px solid rgba(255, 255, 255, .95) !important; border-radius: 22px !important;
  backdrop-filter: saturate(200%) blur(30px) !important; -webkit-backdrop-filter: saturate(200%) blur(30px) !important;
  box-shadow: inset 0 1px 0 #fff, 0 30px 80px rgba(0, 0, 0, .25) !important;
}
html body :is(.modal .modal-content, .policy-dialog)::before, html body :is(.modal .modal-content, .policy-dialog)::after { display: none !important; }
html body :is(.modal .modal-content, .policy-dialog) :is(h1, h2, h3, h4, p, li, span, strong, b, div, label) { color: var(--a-text) !important; -webkit-text-fill-color: currentColor !important; }
html body :is(.modal .modal-content, .policy-dialog) :is(p, li) { color: var(--a-text-2) !important; }
html body :is(.modal .modal-content, .policy-dialog) :is(h2, h3) { font-size: 22px !important; white-space: normal !important; text-wrap: balance !important; }
html body .policy-dialog h2#policy-title, html body .policy-dialog [id="policy-title"] { font-size: 22px !important; }

/* Apps screenshot viewer: dark like a photo viewer, with the same round glass controls as the wallpaper viewer. */
html body .screenshot-lightbox { background: rgba(0, 0, 0, .9) !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, .14) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #f5f5f7 !important;
  border-radius: 50% !important; width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center;
  backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important; font-size: 22px !important; line-height: 1 !important;
}
html body .screenshot-lightbox .lightbox-img { border-radius: 22px !important; }
html body .ap-lb-count { color: rgba(245, 245, 247, .75) !important; -webkit-text-fill-color: currentColor !important; font-family: var(--a-font) !important; }
html body .ap-lb-thumbs img, html body .ap-lb-thumbs button { border: 2px solid transparent !important; border-radius: 10px !important; box-shadow: none !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: #f5f5f7 !important; }

/* ═══ See-through dark boxes (Downloads, Web Apps, app pages): glass like the rest ═══ */
html body :is(.quick-nav, .dl-faq-item, .loc-faq__item, .wa-feature, .requirements, .download-section, .price-section, .instructions) {
  background: rgba(255, 255, 255, .6) !important; border: 1px solid rgba(255, 255, 255, .8) !important; border-radius: 20px !important;
  box-shadow: inset 0 1px 0 #fff, 0 4px 16px rgba(0, 0, 0, .06) !important; color: var(--a-text) !important;
}
@media (min-width: 768px) {
  html body :is(.quick-nav, .dl-faq-item, .loc-faq__item, .wa-feature, .requirements, .download-section) { backdrop-filter: var(--g-blur) !important; -webkit-backdrop-filter: var(--g-blur) !important; }
}
html body :is(.quick-nav, .dl-faq-item, .loc-faq__item, .wa-feature, .requirements, .download-section)::before,
html body :is(.quick-nav, .dl-faq-item, .loc-faq__item, .wa-feature, .requirements, .download-section)::after { display: none !important; }
html body :is(.dl-faq-item, .loc-faq__item, .wa-feature, .requirements, .download-section) :is(p, li, span, div, small, summary) { color: var(--a-text-2) !important; -webkit-text-fill-color: currentColor !important; }
html body :is(.dl-faq-item summary, .loc-faq__item summary, .wa-feature :is(h3, h4, b, strong), .requirements :is(h2, h3, h4)) { color: var(--a-text) !important; }
html body .quick-nav a { background: rgba(255, 255, 255, .85) !important; }

/* ═══ Card movement: only cards you click as a whole move ═══════════════════
   apple-theme.js gives a card .jb-lift when the card itself is the link or button and holds no buttons or links
   of its own. Every other card stays still on hover: no lift, no deeper shadow, no zoom, and no hand cursor. */
html body :is(.card, .method-card, .pricing-card, .app-card, .ss-card, .wa-app, .wa-step, .net-card, .ss-feature,
  .live-telemetry, .apps-stat, .wa-stat, .sc-stat, .wp-stat, .stat-box, .loc-cta, .feature-item, .sc-card, .wp-tile,
  .quick-nav, .dl-faq-item, .loc-faq__item, .wa-feature, .requirements, .download-section, .loc-stats,
  .success-card, .featured-section, .dl-help-cta, .ss-cta):not(.jb-lift):not(#_x):not(#_y) {
  transform: none !important; transition: none !important;
}
html body :is(.card, .method-card, .pricing-card, .app-card, .ss-card, .wa-app, .wa-step, .net-card, .ss-feature,
  .live-telemetry, .apps-stat, .wa-stat, .sc-stat, .wp-stat, .stat-box, .loc-cta, .sc-card, .loc-stats):not(.jb-lift):not(#_x):not(#_y):hover {
  box-shadow: var(--g-rim), var(--a-sh-1) !important; background: var(--g-fill) !important;
}
html body :is(.app-card, .wa-app, .ss-feature):not(.jb-lift):not(#_x):not(#_y):hover { background: rgba(255, 255, 255, .66) !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(255, 255, 255, .55) !important; }
html body :is(.card, .method-card, .pricing-card, .app-card, .wa-step, .feature-item, .stat-box, .wa-feature):not(.jb-lift):not(a):not(button) { cursor: auto !important; }
html body .wp-tile:not(.jb-lift):hover .wp-tile__img, html body .app-screenshot:hover, html body .wp-tile:not(.jb-lift):hover { transform: none !important; }

/* Cards that are one big link: a smooth lift. */
html body .jb-lift:not(#_x):not(#_y) { transition: transform .45s var(--a-spring), box-shadow .45s var(--a-spring), background .3s !important; cursor: pointer !important; }
html body .jb-lift:not(#_x):not(#_y):hover {
  transform: translateY(-6px) !important; box-shadow: var(--g-rim), var(--a-sh-2) !important; background: var(--g-fill-strong) !important;
  text-decoration: none !important;
}
@media (prefers-reduced-motion: reduce) { html body .jb-lift:not(#_x):not(#_y):hover { transform: none !important; } }

/* ═══ Apps page app switcher: works like the top navigation ═════════════════
   Every app shown (wrapping onto a second row if needed) instead of a clipped strip; plain text, a white glass
   pill on hover and on the app you're looking at; no blue fill and no underline. */
html body .apps-nav { overflow: visible !important; height: auto !important; padding: 8px !important; -webkit-mask: none !important; mask: none !important; }
html body .apps-nav-track { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; transform: none !important; width: auto !important; animation: none !important; }
html body .apps-nav-lane { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 2px 4px !important; padding: 0 !important; transform: none !important; animation: none !important; }
html body .apps-nav-lane + .apps-nav-lane { display: none !important; }
html body .apps-nav a.apps-nav-btn:not(#_x):not(#_y) {
  background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important;
  color: var(--a-text) !important; -webkit-text-fill-color: currentColor !important; opacity: .82;
  border-radius: 980px !important; padding: 6px 14px 6px 8px !important; font: 500 14px/1.2 var(--a-font) !important;
  text-decoration: none !important; transform: none !important; transition: background .2s, box-shadow .2s, opacity .2s !important;
}
html body .apps-nav a.apps-nav-btn:not(#_x):not(#_y):hover {
  background: rgba(255, 255, 255, .7) !important; box-shadow: var(--g-rim), 0 2px 8px rgba(0, 0, 0, .06) !important; opacity: 1;
}
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(255, 255, 255, .9) !important; box-shadow: var(--g-rim), 0 2px 10px rgba(0, 0, 0, .08) !important;
  color: var(--a-text) !important; font-weight: 600 !important; opacity: 1;
}
html body .apps-nav a.apps-nav-btn img { border-radius: 7px !important; box-shadow: none !important; }
html body .apps-nav a.apps-nav-btn::before, html body .apps-nav a.apps-nav-btn::after { display: none !important; }

/* No underlines on links that are buttons, pills, cards or navigation — only plain links inside sentences keep one. */
html body a:is([class], .nav-links a, nav a):hover, html body a[class]:focus-visible { text-decoration: none !important; }
html body a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; }
html body :is(nav, header, footer, .apps-nav, .wa-nav, .sc-filters, .quick-nav) a:hover { text-decoration: none !important; }

/* Phones: one row you swipe sideways, no scrollbar. */
@media (max-width: 600px) {
  html body .apps-nav { overflow: hidden !important; padding: 6px !important; }
  html body .apps-nav-track { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  html body .apps-nav-track::-webkit-scrollbar { display: none !important; }
  html body .apps-nav-track > .apps-nav-btn, html body .apps-nav-lane > .apps-nav-btn { flex: 0 0 auto !important; white-space: nowrap !important; scroll-snap-align: start; }
  html body .apps-nav-lane { flex-wrap: nowrap !important; }
}

/* ═══ Live Telemetry: the "Online now" dot pulses (the one animation allowed besides card lifts) ═══ */
@keyframes jb-live-ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes jb-live-dot { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
html body .live-telemetry .live-dot:not(#_x) {
  position: relative !important; display: inline-block !important; width: 8px !important; height: 8px !important;
  border-radius: 50% !important; background: #30d158 !important; margin-right: 7px !important; vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(48, 209, 88, .5) !important;
}
html body .live-telemetry .live-dot:not(#_x)::after {
  content: '' !important; display: block !important; position: absolute !important; inset: 0 !important;
  border-radius: 50% !important; background: #30d158 !important; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html body .live-telemetry .live-dot:not(#_x) { animation: jb-live-dot 2s ease-in-out infinite !important; animation-name: jb-live-dot !important; }
  html body .live-telemetry .live-dot:not(#_x)::after { animation: jb-live-ring 2s cubic-bezier(.2, .8, .2, 1) infinite !important; animation-name: jb-live-ring !important; }
}

/* ═══ Feature tiles from text walls (see apple-theme.js "Text walls into feature tiles") ═══ */
html body .jb-story { display: grid; gap: 20px; margin: 8px auto 64px; max-width: 1100px; }
html body .jb-story--1 { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
html body .jb-story--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .jb-story--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { html body :is(.jb-story--2, .jb-story--3) { grid-template-columns: minmax(0, 1fr); } }
html body .jb-point {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 34px 34px 32px; border-radius: 28px;
  background: var(--g-fill); border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--g-rim), var(--a-sh-1);
}
@media (min-width: 768px) { html body .jb-point { backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); } }
html body .jb-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: #fff;
  background: linear-gradient(180deg, #3d97ff 0%, #0071e3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px rgba(0, 113, 227, .28);
}
html body .jb-ico svg { width: 26px; height: 26px; }
html body .jb-point p, html body .jb-point p.loc-lead, html body .jb-point p.loc-areas {
  margin: 0 !important; padding: 0 !important; max-width: none !important; border: 0 !important; background: none !important;
  font-size: 20px !important; line-height: 1.5 !important; font-style: normal !important; text-align: left !important;
  color: var(--a-dim) !important; -webkit-text-fill-color: currentColor !important;
}
html body .jb-point .jb-lead { color: var(--a-text) !important; font-weight: 600; letter-spacing: -0.012em; }
html body .jb-point strong, html body .jb-point b { color: var(--a-text) !important; }
@media (max-width: 600px) {
  html body .jb-point { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 22px; border-radius: 22px; }
  html body .jb-ico { width: 44px; height: 44px; border-radius: 13px; }
  html body .jb-ico svg { width: 22px; height: 22px; }
  html body .jb-point p { font-size: 17px !important; }
}

/* Longer notes (network status): one tidy info card. */
html body :is(.net-note) {
  max-width: 980px; margin-left: auto !important; margin-right: auto !important; padding: 26px 30px !important; border-radius: 24px !important;
  background: var(--g-fill) !important; border: 1px solid rgba(255, 255, 255, .6) !important; box-shadow: var(--g-rim), var(--a-sh-1) !important;
}
html body :is(.net-note) p { color: var(--a-dim) !important; font-size: 15px !important; line-height: 1.6 !important; }
html body :is(.net-note) p:first-child { color: var(--a-text) !important; font-weight: 600 !important; }
html body .sc-section-lede { max-width: 820px !important; font-size: 19px !important; line-height: 1.5 !important; color: var(--a-dim) !important; }

/* ═══ Place / related cards (from link sentences) ═══════════════════════════ */
html body .jb-places-wrap { max-width: 1100px; margin: 20px auto 112px; text-align: center; }
html body .jb-places-wrap--more { margin-top: 72px; }
html body .jb-places-lede {
  max-width: 760px; margin: 0 auto 44px !important; font-size: 20px !important; line-height: 1.5 !important;
  color: var(--a-dim) !important; -webkit-text-fill-color: currentColor !important;
}
html body .jb-places-lede strong { color: var(--a-text) !important; font-weight: 600; }
/* Two across at most: four tiles in a row left no room for the detail line. */
html body .jb-places {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  max-width: 880px; margin: 0 auto; text-align: left;
}
html body a.jb-place {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 14px; gap: 18px; align-items: center;
  padding: 24px 26px 24px 24px; border-radius: 24px; text-decoration: none !important;
  background: var(--g-fill); border: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--g-rim), var(--a-sh-1);
}
@media (min-width: 768px) { html body a.jb-place { backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); } }
html body .jb-place__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff;
  background: linear-gradient(180deg, #3d97ff 0%, #0071e3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px rgba(0, 113, 227, .26);
}
html body .jb-place__ico svg { width: 23px; height: 23px; }
html body .jb-place__text { display: grid; gap: 4px; min-width: 0; }
html body .jb-place__text b { color: var(--a-text) !important; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
html body .jb-place__text small { color: var(--a-dim) !important; font-size: 14px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .jb-place__go { width: 18px; height: 18px; color: var(--a-faint); transition: transform .3s var(--a-spring), color .2s; }
html body a.jb-place:hover .jb-place__go { transform: translateX(3px); color: var(--a-blue); }

/* ═══ "Arrange a visit" panels: a big centred glass panel ending in a row of buttons ═══ */
html body .loc-cta.jb-cta:not(#_x):not(#_y) {
  display: block !important; position: relative; overflow: hidden; text-align: center;
  max-width: 980px; margin: 72px auto 24px !important; padding: 64px 48px 56px !important; border-radius: 32px !important;
  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(255, 255, 255, .62) !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  box-shadow: var(--g-rim), 0 20px 60px rgba(0, 0, 0, .10) !important;
  transform: none !important;
}
@media (min-width: 768px) { html body .loc-cta.jb-cta { backdrop-filter: var(--g-blur) !important; -webkit-backdrop-filter: var(--g-blur) !important; } }
html body .loc-cta.jb-cta::after { display: none !important; }
html body .jb-cta .loc-cta__body { max-width: 720px; margin: 0 auto; }
html body .jb-cta h3 {
  font-size: clamp(30px, 4vw, 44px) !important; line-height: 1.1 !important; letter-spacing: -0.025em !important;
  margin: 0 0 14px !important; color: var(--a-text) !important;
}
html body .jb-cta p { font-size: 19px !important; line-height: 1.5 !important; color: var(--a-dim) !important; margin: 0 auto 8px !important; }
html body .jb-cta p strong { color: var(--a-text) !important; }
html body .jb-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
html body .jb-cta__actions .btn { min-height: 50px !important; padding: 0 26px !important; font-size: 17px !important; font-weight: 500 !important; gap: 9px !important; }
html body .jb-cta__actions .btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 600px) {
  html body .loc-cta.jb-cta:not(#_x):not(#_y) { padding: 44px 22px 30px !important; border-radius: 26px !important; margin-top: 48px !important; }
  html body .jb-cta p { font-size: 17px !important; }
  html body .jb-cta__actions { flex-direction: column; }
  html body .jb-cta__actions .btn { width: 100%; }
}

/* ═══ Apple polish pass (2026-10-24) ═══════════════════════════════════════ */

/* Notices: slim one-line ribbons under the bar instead of big cards. */
html body .site-notices { max-width: 1024px; margin: 0 auto !important; padding: 0 16px 8px !important; display: grid; gap: 6px; }
html body .site-notice:not(#_x) {
  display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important;
  padding: 7px 10px 7px 14px !important; border-radius: 14px !important; min-height: 0 !important;
  background: rgba(255, 255, 255, .72) !important; border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 10px rgba(0, 0, 0, .05) !important;
}
html body .site-notice-icon { flex: none; width: 18px !important; height: 18px !important; }
html body .site-notice-icon svg { width: 16px !important; height: 16px !important; }
html body .site-notice-body { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; flex: 1; min-width: 0; }
html body .site-notice-title { font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; white-space: nowrap; }
html body .site-notice-message { font-size: 13px !important; margin: 0 !important; line-height: 1.4 !important; }
html body .site-notice-close { flex: none; width: 26px !important; height: 26px !important; border-radius: 50% !important; }
html body .site-notice-close:hover { background: rgba(0, 0, 0, .06) !important; }

/* FAQ: one glass card per question, the same as the Downloads page (.dl-faq-item), which is the house FAQ.
   The card itself (fill, rim, blur, dark-mode twin) comes from the shared glass-box rules above, which list
   .loc-faq__item beside .dl-faq-item; this block is only the layout, the type and the chevron. */
html body .loc-faq { display: grid; gap: 12px; max-width: 900px; margin: 40px auto 0 !important; border: 0 !important; }
html body .loc-faq__item, html body details.loc-faq__item { margin: 0 !important; padding: 0 !important; overflow: hidden; }
html body .loc-faq__q {
  position: relative; list-style: none; cursor: pointer; padding: 18px 54px 18px 22px !important;
  font-size: 1.06rem !important; font-weight: 600 !important; line-height: 1.47 !important; color: var(--a-text) !important;
}
html body .loc-faq__q::-webkit-details-marker { display: none; }
html body .loc-faq__q::before { content: none !important; display: none !important; }
/* The Downloads chevron, drawn from the same path as a mask so it takes the theme's grey in light and dark. */
html body .loc-faq__q::after {
  content: '' !important; position: absolute; right: 22px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 0 !important; background: var(--a-dim) !important; color: transparent !important; transform: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  transition: transform .35s var(--a-spring) !important;
}
html body details[open] > .loc-faq__q::after { transform: rotate(180deg) !important; }
html body .loc-faq__a { padding: 0 22px 20px !important; font-size: .95rem !important; line-height: 1.75 !important; color: var(--a-text-2) !important; background: none !important; border: 0 !important; }
html body .dl-faq-item summary::before, html body .dl-faq-chevron { color: var(--a-dim) !important; }

/* Card icons: the same blue tile everywhere. */
html body .card-icon:not(#_x), html body .method-icon:not(.jb-brand):not(#_x) {
  width: 52px !important; height: 52px !important; border-radius: 15px !important; display: grid !important; place-items: center !important;
  background: linear-gradient(180deg, #3d97ff 0%, #0071e3 100%) !important; border: 0 !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px rgba(0, 113, 227, .26) !important; font-size: 0 !important;
  margin: 0 0 18px !important;
}
html body .card-icon svg, html body .card-icon svg *, html body .method-icon:not(.jb-brand) svg { width: 26px !important; height: 26px !important; fill: #fff !important; color: #fff !important; }
html body .method-icon.jb-brand { width: 52px !important; height: 52px !important; border-radius: 15px !important; display: grid !important; place-items: center !important; box-shadow: 0 8px 18px rgba(37, 211, 102, .28) !important; }
html body .method-icon.jb-brand svg { width: 28px !important; height: 28px !important; }
html body .pricing-card .card-icon { margin: 0 auto 18px !important; }

/* Customer feedback: centred header, one blue and one glass button side by side, upright quotes, amber stars. */
html body div:has(> div > #leaveFeedbackBtn) { flex-direction: column !important; align-items: center !important; text-align: center; gap: 18px; }
html body div:has(> div > #leaveFeedbackBtn) > div:first-child, html body div:has(> div > #leaveFeedbackBtn) > div:first-child * { text-align: center !important; justify-content: center !important; }
html body div:has(> #leaveFeedbackBtn) { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: center !important; gap: 12px !important; }
/* Three buttons since Review us on Google: on a phone they wrap rather than squeeze, and no label breaks. */
html body div:has(> #leaveFeedbackBtn) > * { white-space: nowrap; }
html body #viewAllFeedbackBtn:not(#_x):not(#_y) {
  background: rgba(255, 255, 255, .6) !important; color: var(--a-blue) !important; -webkit-text-fill-color: var(--a-blue) !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0, 0, 0, .08) !important;
}
html body #feedbackGrid .card p, html body #feedbackGrid .card em, html body #feedbackGrid [style*="italic"] { font-style: normal !important; color: var(--a-text-2) !important; }
html body .star, html body #feedbackGrid [class*="star"] { color: #ff9f0a !important; -webkit-text-fill-color: #ff9f0a !important; }
html body .feedback-like-icon svg { width: 15px; height: 15px; color: var(--a-dim); vertical-align: -2px; }
html body .feedback-like.is-liked .feedback-like-icon svg { color: var(--a-blue); }

/* Announcements and service status: level with each other. */
html body #statusCardsContainer > div:last-child { align-items: stretch !important; }
html body #announcementsCard, html body #serviceStatusCard { margin-top: 0 !important; }

/* Every section heading centred, the same way. */
html body .cyber-terminal-wrapper { justify-content: center !important; }
html body .cyber-terminal-title { text-align: center !important; }

/* Contact cards: icons are squares, not bars; WhatsApp keeps its green. */
html body .method-card { display: flex !important; align-items: flex-start !important; gap: 22px !important; }
html body .method-icon:not(#_x) { flex: 0 0 52px !important; max-width: 52px !important; min-width: 52px !important; align-self: flex-start !important; }
html body .method-icon.jb-brand:not(#_x) { background: linear-gradient(180deg, #34d571 0%, #1fae55 100%) !important; color: #fff !important; }
html body .method-icon.jb-brand svg, html body .method-icon.jb-brand svg * { fill: #fff !important; }

/* The last of the neon. Cyan hairlines, cyan tints and #00ff41 "live" dots left over from the old theme;
   Apple's palette has one blue for links and actions, and green only for "on". */
html body .app-meta > span:not(#_x) { border-color: rgba(0, 0, 0, .08) !important; }
html body :is(.wa-live, .sc-live):not(#_x) { background: #34c759 !important; box-shadow: 0 0 0 3px rgba(52, 199, 89, .18) !important; }
html body .wp-spinner:not(#_x) { border-color: rgba(0, 0, 0, .1) !important; border-top-color: var(--a-blue) !important; }
html body :is(.net-projects li, .icon-item):not(#_x) { background-color: transparent !important; }
html body .net-hardware:not(#_x) { border-color: rgba(0, 0, 0, .08) !important; }
html body .ss-go:not(#_x), html body .ss-go:not(#_x) svg { color: var(--a-link) !important; }
html body :is(.wa-panel, .sc-honest) a:not(#_x) { color: var(--a-link) !important; }
html body main div[style*="border-radius: 20px"][style*="overflow: hidden"]:not(#_x) { border-color: rgba(0, 0, 0, .08) !important; }

/* Phones: a fingertip needs ~36px or more. The filter chips and small buttons were 26–30px tall, and the logo
   link 24px; the logo grows its tap area without moving. */
@media (max-width: 600px) {
  html body :is(.wp-chip, .dl-platform, .sc-sev, #sc-reset, #waExpandAll, .nav-btn):not(#_x):not(#_y) { min-height: 36px !important; }
  html body header a.logo:not(#_x) { padding-block: 10px !important; margin-block: -10px !important; }
  html body :is(.jb-band__link, .app-site-link):not(#_x) { padding-block: 10px !important; margin-block: -10px !important; }
  /* Three floating buttons covered card text on a phone screen. Facebook is in the footer, so its bubble goes;
     back-to-top and the help chat stay. */
  html body .floating-fb:not(#_x) { display: none !important; }
}

/* A centred call-to-action card ("Got a website idea?", "Let's Talk"): the card is a flex column, which
   stretched its button into a 950px bar. Apple sizes a button to its label. */
html body :is(.card[style*="text-align:center"], .card[style*="text-align: center"]) > :is(.btn, .btn-primary, .cyber-btn):not(#_x) {
  align-self: center !important; width: auto !important; margin-top: 8px !important;
}

/* Contact: the dividers between the ways to reach me were 33px of nothing with 32px either side, so the
   column read as items floating in empty space. A hairline, as in Apple's grouped lists. */
html body .contact-main .divider:not(#_x) {
  height: 1px !important; min-height: 0 !important; margin: 0 0 28px !important; padding: 0 !important;
  background: rgba(0, 0, 0, .08) !important; border: 0 !important;
}
html body .contact-main .divider:not(#_x)::before, html body .contact-main .divider:not(#_x)::after { content: none !important; display: none !important; }

/* Type that sets itself: centred intros break into even lines instead of leaving "starts." or "here." alone on
   the last one, and body copy avoids one-word last lines. Browsers without text-wrap just wrap as before. */
html body :is(.hero p, .hero-content p, .subtitle, .wa-sub, .cyber-terminal-wrapper + p, .jb-band__lede, .loc-lead, .jb-places-lede, h3, h4) { text-wrap: balance; }
html body main p { text-wrap: pretty; }

/* Nothing smaller than Apple's 12px caption. Stat labels, section numbers, hints and status chips were set
   between 8.8px and 11.2px, which reads as fine print rather than as part of the design. */
html body :is(.loc-stat__label, .apps-stat > span, .wa-stat > span, .wp-stat__label, .sc-stat > span, .wa-num, .sc-num,
  .sc-hint, #sc-reset, #waExpandAll, .wa-shot figcaption, .wp-chips__legend, .net-card__name, .net-card__state,
  .icon-caption, .app-shots-hint, .app-shots-hint > span, .sc-who, .wa-shots-hint, .sc-console-keys > span, .sc-console-keys kbd):not(#_x):not(#_y) {
  font-size: 12px !important; letter-spacing: 0 !important;
}

/* Card grids: a short last row sits in the middle, the way Apple lays out tiles. */
html body .cards-grid:not(.pricing-cards-grid) {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 24px !important;
}
html body .cards-grid:not(.pricing-cards-grid) > * { flex: 0 1 calc((100% - 48px) / 3) !important; min-width: 280px; max-width: 100%; }
/* Three to a row leaves one card on its own when there are 4, 7, 10… of them. Instead the last four pair up,
   two to a row (4 → 2×2, 7 → 3-2-2, 10 → 3-3-2-2), so every row is full. */
@media (min-width: 961px) {
  html body .cards-grid:not(.pricing-cards-grid):has(> :nth-child(4)):has(> :last-child:nth-child(3n+1)) > :nth-last-child(-n+4) { flex-basis: calc((100% - 24px) / 2) !important; }
}
@media (max-width: 960px) { html body .cards-grid:not(.pricing-cards-grid) > * { flex-basis: calc((100% - 24px) / 2) !important; } }
@media (max-width: 640px) { html body .cards-grid:not(.pricing-cards-grid) > * { flex-basis: 100% !important; min-width: 0; } }

/* "New" labels: blue. */
html body .service-new-badge, html body .service-new-badge * { color: var(--a-blue) !important; -webkit-text-fill-color: currentColor !important; }
html body .method-icon:not(#_x), html body .card-icon:not(#_x) { padding: 0 !important; justify-content: center !important; align-items: center !important; justify-items: center !important; line-height: 0 !important; text-align: center !important; }
html body .method-icon svg, html body .card-icon svg { margin: 0 !important; display: block !important; position: static !important; }
html body .method-icon.jb-brand svg { width: 28px !important; height: 28px !important; }
/* Phones: the notices stay compact (message trimmed to two lines). */
@media (max-width: 600px) {
  html body .site-notices { padding: 0 10px 6px !important; gap: 5px; }
  html body .site-notice:not(#_x) { padding: 6px 8px 6px 12px !important; border-radius: 12px !important; }
  html body .site-notice-body { display: block !important; }
  html body .site-notice-title { font-size: 12.5px !important; display: block; }
  html body .site-notice-message { font-size: 12px !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html body .site-notice-icon { display: none !important; }
}
html body details.loc-faq__item:focus-within { outline: none !important; }
html body .loc-faq__q:focus { outline: none !important; }
/* Inset, because the card clips anything drawn outside it. */
html body .loc-faq__q:focus-visible { outline: 2px solid rgba(0, 113, 227, .45) !important; outline-offset: -3px; border-radius: 20px; }
/* The feedback carousel is one wrapper inside its grid: it takes the full width, so its cards sit side by side again. */
html body #feedbackGrid { display: block !important; }
html body #feedbackGrid > * { flex: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; }
html body .cards-grid:not(.pricing-cards-grid) > :not(.card):not(.method-card):not(.app-card):not(.jb-point) { flex-basis: 100% !important; }
/* FAQ questions: no box of their own inside the card (page-components.css gives them one). Hover tints the row,
   as on Downloads; the text keeps its colour. */
html body .loc-faq__q:not(#_x), html body .loc-faq__item[open] .loc-faq__q:not(#_x) {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--a-text) !important; transition: background-color .2s ease !important;
}
html body .loc-faq__q:not(#_x):hover, html body .loc-faq__item[open] .loc-faq__q:not(#_x):hover { background: rgba(0, 212, 255, .05) !important; }

/* Support Centre search: the white pill is the field; the input inside has no box of its own, and text sits clear of the icon. */
html body .sc-search:not(#_x) {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 6px 6px 6px 18px !important; border-radius: 14px !important;
  background: #fff !important; border: 1px solid rgba(0, 0, 0, .12) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
html body .sc-search:not(#_x):focus-within { border-color: var(--a-blue) !important; box-shadow: 0 0 0 4px rgba(0, 113, 227, .18) !important; }
html body .sc-search .sc-search-icon:not(#_x) { flex: none; width: 20px !important; height: 20px !important; color: var(--a-dim) !important; fill: currentColor !important; }
html body .sc-search .sc-search-icon path { fill: currentColor !important; }
html body #sc-q:not(#_x):not(#_y) {
  flex: 1 1 auto !important; min-width: 0 !important; height: 48px !important; margin: 0 !important;
  padding: 0 8px 0 2px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: none !important;
  font-size: 17px !important; color: var(--a-text) !important;
}
html body #sc-q::placeholder { color: #8e8e93 !important; opacity: 1; }
html body #sc-q::-webkit-search-cancel-button { cursor: pointer; }
html body .sc-search-go:not(#_x) { flex: none; height: 48px !important; padding: 0 22px !important; border-radius: 10px !important; }

/* "Try:" suggestions and the / key: soft blue, not cyan. */
html body .sc-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html body .sc-eg:not(#_x) {
  border: 0 !important; background: rgba(0, 113, 227, .08) !important; color: var(--a-blue) !important;
  border-radius: 999px !important; padding: 5px 12px !important;
}
html body .sc-eg:not(#_x):hover { background: rgba(0, 113, 227, .14) !important; }
html body .sc-search-shell kbd { border: 1px solid rgba(0, 0, 0, .14) !important; background: #fff !important; color: var(--a-text-2) !important; border-radius: 6px !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .08) !important; }
@media (max-width: 600px) {
  html body .sc-search:not(#_x) { padding-left: 14px !important; }
  html body .sc-search:not(#_x) { flex-wrap: nowrap !important; gap: 8px !important; }
  html body .sc-search-go:not(#_x) { width: auto !important; height: 44px !important; padding: 0 14px !important; font-size: 15px !important; }
  html body #sc-q:not(#_x):not(#_y) { height: 44px !important; font-size: 16px !important; }
}


/* Phones and tablets: the bar's glass lives on a layer behind it, and the bar drops its page-transition name.
   A blur on the header itself, or a view-transition-name, stops the menu (inside the header) from blurring
   the page, which is why the menu looked see-through. Desktop keeps the bar as it was. */
@media (max-width: 1099px) {
  html body header:not(#_x) { view-transition-name: none !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html body header::before {
    content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: -1 !important;
    pointer-events: none; background: rgba(255, 255, 255, .55) !important;
    backdrop-filter: saturate(200%) blur(28px) !important; -webkit-backdrop-filter: saturate(200%) blur(28px) !important;
  }
}

/* Phone menu: a frosted liquid-glass sheet with the page dimmed behind it. */
@media (max-width: 1099px) {
  html body .nav-links:not(#_x) {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .25) 100%),
      rgba(246, 246, 250, .62) !important;
    backdrop-filter: saturate(180%) blur(40px) !important; -webkit-backdrop-filter: saturate(180%) blur(40px) !important;
    border-left: 1px solid rgba(255, 255, 255, .8) !important;
  }
  html body .nav-links.active:not(#_x) {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .9), -24px 0 60px rgba(0, 0, 0, .14), 0 0 0 100vmax rgba(20, 20, 30, .18) !important;
  }
}

/* ═══ Liquid glass, part two (2026-10-25) ═════════════════════════════════════
   Closer to Apple's Liquid Glass: clearer panes over more colour, a curved sheen across the top of each pane,
   light gathered along the edges, a soft light that follows the mouse across the glass, and the bar on computers
   as a floating capsule. In Chrome and Edge on computers the edges also bend what's behind them like a lens
   (apple-theme.js builds the lens for each pane). Nothing moves on its own; "reduce transparency" makes panes solid. */
@property --jl { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --jx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --jy { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
:root {
  --g-fill: rgba(255, 255, 255, .44);
  --g-fill-strong: rgba(255, 255, 255, .62);
  --g-blur: saturate(190%) blur(18px) brightness(1.03);
  --g-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .32),
    inset 0 12px 20px -14px rgba(255, 255, 255, .95), inset 0 -14px 24px -18px rgba(255, 255, 255, .75);
  --g-edge: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, .3) 28%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, .3) 76%, rgba(255, 255, 255, .95) 100%);
  --jb-sheen: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .14) 34%, rgba(255, 255, 255, 0) 58%);
}
html body * { --jb-light: radial-gradient(circle 240px at var(--jx) var(--jy), rgba(255, 255, 255, calc(.62 * var(--jl))), rgba(255, 255, 255, 0) 72%); }

/* More colour behind the glass (it stays still; the glass moves over it as the page scrolls). */
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(255, 255, 255, .5), transparent 70%),
    #f2f2f7 !important;
  background-attachment: fixed !important;
}

/* The sheen and the mouse light, on every pane of glass. */
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,
  .quick-nav, .dl-faq-item, .loc-faq__item, .wa-feature, .requirements, .download-section, .floating-back-to-top, .floating-fb, .jb-helpbot-toggle,
  .hero-content > div:not(.hero-buttons):not(.live-telemetry) > a[href],
  :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):not(#_g2):not(#_g3) {
  background-image: var(--jb-light), var(--jb-sheen) !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, .28) 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, .6), inset 0 -1px 0 rgba(0, 0, 0, .12), 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-image: var(--jb-light), var(--jb-sheen),
    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%) !important;
  background-color: rgba(255, 255, 255, .5) !important;
}
/* Cards that sat on the old fill pick up the clearer one. */
html body :is(.app-card, .wa-app, .ss-feature):not(#_g1) { background-color: rgba(255, 255, 255, .56) !important; }
html body :is(.app-card, .wa-app, .ss-feature):not(#_g1):hover { background-color: rgba(255, 255, 255, .7) !important; }
/* The light along the edge: on the small panes too. */
/* Not the floating buttons: they are position: fixed, which already anchors the
   rim, and relative here pulled them out of the corners into the page flow. */
html body :is(.site-notice, .jb-point, a.jb-place, .jb-helpbot-toggle) { position: relative; }
html body :is(.site-notice, .jb-point, a.jb-place)::after {
  content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1px !important;
  background: var(--g-edge) !important; pointer-events: none !important; z-index: 1 !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Glass buttons: clearer, with a bright rim that catches the light. */
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(255, 255, 255, .42) !important; border-color: rgba(255, 255, 255, .85) !important;
  box-shadow: var(--g-rim), 0 6px 18px rgba(0, 0, 0, .08) !important;
  backdrop-filter: saturate(190%) blur(6px) brightness(1.04) !important; -webkit-backdrop-filter: saturate(190%) blur(6px) brightness(1.04) !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(255, 255, 255, .66) !important;
}
/* Floating buttons: round drops of glass. */
html body :is(.floating-back-to-top, .floating-fb, .jb-helpbot-toggle):not(#_g1) {
  background-color: rgba(255, 255, 255, .4) !important; border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: var(--g-rim), 0 10px 30px rgba(0, 0, 0, .14) !important;
  backdrop-filter: saturate(190%) blur(5px) brightness(1.04) !important; -webkit-backdrop-filter: saturate(190%) blur(5px) brightness(1.04) !important;
}
/* Notices: glass ribbons. */
html body .site-notice:not(#_x):not(#_g1) { background-color: rgba(255, 255, 255, .5) !important; border-color: transparent !important; box-shadow: var(--g-rim), 0 6px 20px rgba(0, 0, 0, .07) !important; }
@media (min-width: 768px) {
  html body .site-notice:not(#_x):not(#_g1) { backdrop-filter: var(--g-blur) !important; -webkit-backdrop-filter: var(--g-blur) !important; }
}
/* The footer: one long pane of glass. */
html body > footer:not(#_g1) {
  background: var(--jb-sheen), rgba(255, 255, 255, .38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 14px 24px -18px #fff !important;
}

/* Computers: the bar becomes a floating capsule of glass, with the notices floating under it. */
@media (min-width: 1100px) {
  html body > header:not(#_x):not(#_g1) {
    background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border: 0 !important; box-shadow: none !important; padding-top: 10px !important; view-transition-name: none !important; pointer-events: none;
  }
  html body > header > nav:not(#_g1) {
    view-transition-name: site-header; pointer-events: auto; position: relative;
    max-width: 1024px; min-height: 50px; margin: 0 auto; padding: 0 8px 0 18px !important; border-radius: 999px;
    background: var(--jb-light), var(--jb-sheen), rgba(255, 255, 255, .46) !important;
    backdrop-filter: saturate(200%) blur(7px) brightness(1.04) !important; -webkit-backdrop-filter: saturate(200%) blur(7px) brightness(1.04) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    box-shadow: var(--g-rim), 0 10px 32px rgba(20, 30, 60, .10), 0 1px 3px rgba(0, 0, 0, .05) !important;
    transition: box-shadow .3s var(--a-ease);
  }
  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, .06) !important; }
  html body > header > nav::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--g-edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  /* Content passing under the capsule softens and fades, the way it does under Apple's floating bars. */
  html body > header:not(#_g1)::before {
    content: '' !important; display: block !important; position: absolute !important; inset: 0 0 -28px 0 !important; z-index: -1 !important;
    pointer-events: none; background: linear-gradient(180deg, rgba(242, 242, 247, .6), rgba(242, 242, 247, 0)) !important;
    backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%); mask: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
  }
  html body > header .site-notices { pointer-events: none; padding-top: 8px !important; }
  html body > header .site-notice { pointer-events: auto; }
  html body .nav-links a:not(#_g1) { margin: 10px 1px !important; }
  html body .nav-links a.active:not(#_g1) {
    background: var(--jb-sheen), rgba(255, 255, 255, .72) !important;
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .6), 0 2px 10px rgba(20, 30, 60, .1) !important;
  }
}
/* Phones and tablets: the same glass on the bar's layer. */
@media (max-width: 1099px) {
  html body header::before { background: var(--jb-sheen), rgba(255, 255, 255, .5) !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .7), 0 6px 24px rgba(20, 30, 60, .07); }
}

/* "Reduce transparency" (macOS, iOS, Windows contrast settings): solid panes, no blur, no lens. */
@media (prefers-reduced-transparency: reduce) {
  html body *, html body *::before, html body *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  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: #fff !important; }
  html body header::before { background: #fff !important; }
  html body > footer:not(#_g1) { background: #f5f5f7 !important; }
}
/* The rim brightens where the mouse is, like light caught on the edge of the glass. */
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)::after,
html body > header > nav::after {
  --jx: inherit; --jy: inherit; --jl: inherit;
}
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(255, 255, 255, var(--jl)), rgba(255, 255, 255, 0) 70%), var(--g-edge) !important;
}
/* Every other section: a soft wash of white that fades in and out, not a band with hard edges over the colour. */
html body main > section:nth-of-type(even)::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .28) 140px, rgba(255, 255, 255, .28) calc(100% - 140px), rgba(255, 255, 255, 0) 100%) !important;
}

/* ═══ Two buttons (2026-10-25) ════════════════════════════════════════════════
   Exactly two kinds of button, each identical wherever it appears: the blue one ("Explore Services") and the white
   one ("Get in Touch"). Both are 44px pills with 17px text. The white one is solid white, not see-through glass, so
   it looks the same on a white card as on the coloured page (the see-through one looked faint on cards). */
html body :is(.btn, .cyber-btn, .nav-btn, .apps-cta, .wa-cta, .ss-btn, .paypal-btn, .paypal-service-btn, .buy-btn, .secondary-cta,
  .net-refresh, #paypalBtn, #paypalDropOffBtn, #viewAllFeedbackBtn, .btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn,
  .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) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .45em !important;
  min-height: 44px !important; height: auto !important; padding: 0 22px !important; border-radius: 980px !important;
  font: 400 17px/1.2 var(--a-font) !important; letter-spacing: -0.01em !important; text-transform: none !important; text-decoration: none !important;
  text-shadow: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transform: none !important; transition: transform .3s var(--a-spring), box-shadow .3s var(--a-spring), background-color .2s !important;
}
html body :is(.btn, .cyber-btn, .nav-btn, .apps-cta, .wa-cta, .ss-btn, .paypal-btn, .paypal-service-btn, .buy-btn, .secondary-cta,
  .net-refresh, #paypalBtn, #paypalDropOffBtn, #viewAllFeedbackBtn, .btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn,
  .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 { transform: translateY(-2px) !important; text-decoration: none !important; }
html body :is(.btn, .cyber-btn, .nav-btn, .apps-cta, .wa-cta, .ss-btn, .paypal-btn, .paypal-service-btn, .buy-btn, .secondary-cta,
  .net-refresh, #paypalBtn, #paypalDropOffBtn, #viewAllFeedbackBtn, .btn-primary, .wa-cta--primary, .apps-cta--primary, .play-btn,
  .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):active { transform: scale(.98) !important; }
/* Words and icons inside take the button's colour. */
html body :is(.btn, .cyber-btn, .nav-btn, .apps-cta, .wa-cta, .ss-btn, .paypal-btn, .paypal-service-btn, .buy-btn, .secondary-cta,
  .net-refresh, #paypalBtn, #paypalDropOffBtn, #viewAllFeedbackBtn, .play-btn, .download-btn, .primary-cta,
  .sc-search-go, a.cyber-btn-gold, a[href*="maps.app.goo.gl"][style*="padding"]) :is(*):not(svg *):not(#_b1):not(#_b2):not(#_b3) {
  color: inherit !important; -webkit-text-fill-color: inherit !important; font-size: inherit !important; font-weight: inherit !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
}
html body :is(.btn, .cyber-btn, .nav-btn, .apps-cta, .wa-cta, .ss-btn, .paypal-btn, .paypal-service-btn, .buy-btn, .secondary-cta,
  .net-refresh, #paypalBtn, #paypalDropOffBtn, #viewAllFeedbackBtn, .play-btn, .download-btn, .primary-cta,
  .sc-search-go, a.cyber-btn-gold) svg:not(#_b1) { width: 18px !important; height: 18px !important; flex: none !important; }

/* The white button. */
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: #fff !important; color: #0071e3 !important; -webkit-text-fill-color: #0071e3 !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .09) !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: #fff !important; color: #0071e3 !important; -webkit-text-fill-color: #0071e3 !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, .06), 0 12px 28px rgba(0, 0, 0, .13) !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: #0071e3 !important; }

/* The blue button. */
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-color: #0071e3 !important;
  background-image: var(--jb-light), linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #2b8cff 0%, #0071e3 55%, #0068d6 100%) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important; border: 1px solid rgba(0, 90, 200, .55) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .12), 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, .28) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #3d97ff 0%, #0a7bf0 55%, #0071e3 100%) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .12), inset 0 -8px 14px -8px rgba(160, 210, 255, .55), 0 12px 28px rgba(0, 113, 227, .38) !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) svg :is([fill]:not([fill="none"])):not(#_b1) { fill: #fff !important; }
@media (prefers-reduced-motion: reduce) {
  html body :is(.btn, .cyber-btn, .nav-btn, .apps-cta, .wa-cta, .ss-btn, .paypal-btn, .paypal-service-btn, .buy-btn, .secondary-cta, .net-refresh,
    .play-btn, .download-btn, .primary-cta, .sc-search-go, a.cyber-btn-gold):not(#_b1):not(#_b2):not(#_b3):not(#_b4):is(:hover, :active) { transform: none !important; }
}

/* ═══ VPN page fixes (2026-10-25) ═════════════════════════════════════════════ */
/* Speed test: Start and Reset side by side in the middle, not two full-width bars run into each other. */
html body .card:has(> #start-test):not(#_b1) { display: block !important; }
html body :is(#start-test, #reset-test):not(#_b1):not(#_b2):not(#_b3):not(#_b4) { width: auto !important; margin: 6px !important; vertical-align: middle; }
html body .card:has(> #start-test) > :not(button) { text-align: center; }

/* Troubleshooting: the same question list as every other page's FAQ — hairlines between questions, no boxes,
   no emoji, a grey chevron that turns as it opens. */
html body .troubleshooting-item:not(#_b1) {
  margin: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
  border-radius: 0 !important; box-shadow: none !important; max-width: 860px; margin-left: auto !important; margin-right: auto !important;
}
html body .troubleshooting-item:not(.troubleshooting-item + .troubleshooting-item):not(#_b1) { border-top: 1px solid rgba(0, 0, 0, .1) !important; }
html body .troubleshooting-item:not(#_b1):has(+ :not(.troubleshooting-item)) { margin-bottom: 48px !important; }
html body .troubleshooting-header:not(#_b1) {
  position: relative; display: flex !important; align-items: center !important; cursor: pointer;
  padding: 24px 48px 24px 4px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html body .troubleshooting-header .vpn-flex-row { gap: 0 !important; margin: 0 !important; }
html body .troubleshooting-header .vpn-issue-icon:not(#_b1) { display: none !important; }
html body .troubleshooting-header .vpn-issue-title:not(#_b1) {
  margin: 0 !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.3 !important;
  color: var(--a-text) !important; -webkit-text-fill-color: currentColor !important; text-align: left !important; transition: color .2s;
}
html body .troubleshooting-header:hover .vpn-issue-title:not(#_b1) { color: var(--a-blue) !important; }
html body .troubleshooting-chevron:not(#_b1) {
  position: absolute !important; right: 10px; top: 50%; width: 10px !important; height: 10px !important; margin-top: -7px;
  font-size: 0 !important; color: transparent !important; background: none !important;
  border-right: 2px solid var(--a-dim) !important; border-bottom: 2px solid var(--a-dim) !important;
  transform: rotate(45deg) !important; transition: transform .3s var(--a-spring), margin .3s var(--a-spring) !important;
}
html body .troubleshooting-chevron[style*="180deg"]:not(#_b1) { transform: rotate(-135deg) !important; margin-top: -2px; }
html body .troubleshooting-content:not(#_b1) { background: transparent !important; border: 0 !important; }
html body .troubleshooting-body:not(#_b1) {
  padding: 0 48px 26px 4px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important;
  font-size: 17px !important; line-height: 1.55 !important; color: var(--a-dim) !important; text-align: left !important;
}
html body .troubleshooting-body :is(p, li):not(#_b1) { font-size: 17px !important; color: var(--a-dim) !important; }
html body .troubleshooting-body strong:not(#_b1) { color: var(--a-text) !important; }
html body .troubleshooting-body code:not(#_b1) { background: rgba(0, 0, 0, .05) !important; color: var(--a-text) !important; }
@media (max-width: 600px) {
  html body .troubleshooting-header:not(#_b1) { padding: 20px 40px 20px 2px !important; }
  html body .troubleshooting-header .vpn-issue-title:not(#_b1) { font-size: 17px !important; }
  html body .troubleshooting-body:not(#_b1) { padding: 0 40px 22px 2px !important; }
}

/* ═══ Clickable cards say so ═══════════════════════════════════════════════
   A pointer cursor and a hover lift only exist with a mouse, so on a phone a
   card that goes somewhere looked exactly like a plain panel. Every clickable
   card now carries something that is always on screen:
     · cards that open a page end in a blue "Learn more →" line (.card-go),
       the treatment the Software Store cards already had (.ss-go);
     · tiles that open a bigger preview carry an enlarge badge.
   Plain panels get neither — see "CARDS THAT ARE NOT LINKS" in style.css. */
html body a.card:has(> .card-go) { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
html body .card-go:not(#_x) {
  margin-top: auto !important; padding-top: 16px; display: inline-flex !important; align-items: center; gap: 6px;
  color: var(--a-blue) !important; -webkit-text-fill-color: currentColor !important;
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em; line-height: 1.3;
}
html body .card-go svg { width: 16px; height: 16px; flex: none; transition: transform .25s ease; }
html body a:is(:hover, :focus-visible) .card-go svg { transform: translateX(4px); }

/* Enlarge badge: wallpaper tiles (bottom right — the 4K tag and the download
   button own the top corners) and app screenshots (top right). */
html body :is(.wp-tile, .ap-shot-frame)::after {
  content: ''; position: absolute; z-index: 5; width: 30px; height: 30px; border-radius: 50%;
  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='white' 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;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 8px rgba(0, 0, 0, .25);
  pointer-events: none; transition: transform .2s ease, background-color .2s ease;
}
html body .wp-tile::after { right: 10px; bottom: 10px; }
html body .wp-tile .wp-tile__meta { padding-right: 52px; }
html body .ap-shot-frame::after { top: 14px; right: 12px; width: 26px; height: 26px; background-size: 13px; }
html body :is(.wp-tile, .ap-shot-frame):is(:hover, :focus-within)::after { transform: scale(1.1); background-color: rgba(0, 113, 227, .85); }

/* ═══ Decorations ═════════════════════════════════════════════════════════
   Product-page style art, all of it about Windows PCs: the hero shows a
   Windows laptop mid health-check beside a glass-sided tower, and each
   section heading on the homepage is flanked by a part or a symbol of the
   work (Images/decor/*.svg). Decorative only: aria-hidden, empty alt, never
   clickable, and gone from print.
   The one bit of motion is tied to scrolling, never a loop, so it costs
   nothing at rest; it beats the motion budget's universal kill the same way
   a-rise above does, and stays off for anyone who asks for reduced motion. */
/* Centred with symmetric negative margins rather than left/transform, so it
   lands in the middle whether its hero is a plain block or a centred flexbox. */
html body .jb-hero-art {
  --jb-art-w: min(1180px, calc(100vw - 32px));
  position: relative; width: var(--jb-art-w); max-width: none;
  margin: 56px calc((100% - var(--jb-art-w)) / 2) -24px;
  pointer-events: none; user-select: none; align-self: auto;
}
html body .jb-hero-art img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  /* The whole composition, edge to edge: cropping in cut the side notes mid-word. */
  html body .jb-hero-art { --jb-art-w: calc(100vw - 12px); margin-top: 32px; margin-bottom: -8px; }
}

/* Left-aligned section headings (store, web apps, support, contact) carry a
   tile just before the words instead. It sits inline inside the h2, in flow,
   so it can't overlap anything, and the heading stays one line — those
   headers are flex rows with a "01" number beside the h2, and a block icon
   above the words left that number stranded beside the icon. */
html body .jb-head-icon {
  display: inline-block; width: 48px; height: 48px; vertical-align: middle;
  margin: -12px 10px -10px -4px; pointer-events: none; user-select: none;
}
@media (max-width: 600px) { html body .jb-head-icon { width: 38px; height: 38px; margin: -8px 6px -8px -3px; } }

/* The tiles sit in line either side of the heading text, a fixed gap away,
   so they can never land on the words whatever the heading says or however
   wide its wrapper is. (They used to be pinned a set distance from the
   wrapper's centre; the reviews wrapper shrinks to its text, so there they sat
   right on top of "What Customers Say".) Negative block margins keep the row
   the heading's own height. */
html body .jb-float { pointer-events: none; user-select: none; flex: none; }
html body .jb-float--l { order: -1; transform: rotate(-8deg); }
html body .jb-float--r { transform: rotate(8deg); }
@media (min-width: 761px) {
  html body .cyber-terminal-wrapper:has(> .jb-float) { display: flex !important; align-items: center; justify-content: center; gap: 56px; }
  html body .cyber-terminal-wrapper:has(> .jb-float) > h2 { flex: 0 1 auto; min-width: 0; margin-left: 0 !important; margin-right: 0 !important; }
  html body .jb-float { width: 128px; height: 128px; margin: -38px 0; }
}
@media (min-width: 761px) and (max-width: 1060px) {
  html body .cyber-terminal-wrapper:has(> .jb-float) { gap: 28px; }
  html body .jb-float { width: 88px; height: 88px; margin: -18px 0; }
}
@media (max-width: 760px) { html body .jb-float { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes jb-drift-l { from { transform: translateY(46px) rotate(-16deg); } to { transform: translateY(-46px) rotate(-2deg); } }
    @keyframes jb-drift-r { from { transform: translateY(46px) rotate(16deg); } to { transform: translateY(-46px) rotate(2deg); } }
    html body .jb-float--l { animation: jb-drift-l linear both !important; animation-timeline: view() !important; animation-range: cover !important; }
    html body .jb-float--r { animation: jb-drift-r linear both !important; animation-timeline: view() !important; animation-range: cover !important; }
  }
}
@media print { html body :is(.jb-hero-art, .jb-float, .jb-head-icon) { display: none !important; } }

/* Card pages (CyberFiles Android, the payment page): objects float in the empty
   space either side of the card. Positioned against the card's own container
   and shown only when that space really exists, so they can't reach the card. */
html body :is(.app-container, .success-container):has(> .jb-side) { position: relative; }
html body .jb-side { display: none; }
@media (min-width: 1240px) {
  html body .jb-side { display: block; position: absolute; inset: 0; pointer-events: none; user-select: none; z-index: 0; }
  html body .jb-side img { position: absolute; width: 124px; height: 124px; }
  html body .jb-side__1 { left: -168px; top: 60px; transform: rotate(-10deg); }
  html body .jb-side__2 { left: -150px; top: 360px; transform: rotate(8deg); }
  html body .jb-side__3 { right: -168px; top: 110px; transform: rotate(10deg); }
  html body .jb-side__4 { right: -150px; top: 420px; transform: rotate(-6deg); }
}
/* Network Status labels are small capitals, so their icons are smaller too. */
html body .net-section .jb-head-icon { width: 30px; height: 30px; margin: -8px -6px -8px -2px; }   /* the heading is a flex row with a 1rem gap */
@media print { html body .jb-side { display: none !important; } }

/* ═══ Notices: one pill that opens into the list ══════════════════════════ */
html body .site-notices { justify-items: center; }
html body .site-notices-pill {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  margin: 0 auto; padding: 6px 12px 6px 8px; border-radius: 980px; cursor: pointer;
  font: 500 13px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: var(--a-text);
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--g-rim, inset 0 1px 0 rgba(255,255,255,.8)), 0 6px 20px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  transition: background-color .2s ease, transform .2s ease;
}
html body .site-notices-pill:hover { background: rgba(255, 255, 255, .85); }
html body .site-notices-pill:focus-visible { outline: 2px solid rgba(0, 113, 227, .5); outline-offset: 2px; }
html body .site-notices-pill .site-notice-icon:not(#_x) {
  display: grid !important; place-items: center; width: 22px !important; height: 22px !important; margin: 0 !important;
  border-radius: 50% !important; background: rgba(255, 149, 0, .14) !important; color: var(--a-orange, #ff9500) !important;
}
html body .site-notices-pill .site-notice--important.site-notice-icon { background: rgba(255, 59, 48, .12) !important; color: #ff3b30 !important; }
html body .site-notices-pill .site-notice--info.site-notice-icon { background: rgba(0, 113, 227, .12) !important; color: var(--a-blue) !important; }
html body .site-notices-pill .site-notice-icon svg { width: 14px !important; height: 14px !important; }
html body .site-notices-pill-text { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html body .site-notices-pill-more { color: var(--a-dim); white-space: nowrap; }
html body .site-notices-pill-more:empty { display: none; }
html body .site-notices-pill-chevron { display: grid; color: var(--a-dim); transition: transform .25s ease; }
html body .site-notices.is-open .site-notices-pill-chevron { transform: rotate(180deg); }
html body .site-notices-list { display: grid; gap: 6px; width: 100%; }
/* site-notices.js tucks the pill away while scrolling down and brings it back on the way up. */
html body .site-notices { transition: opacity .3s ease, transform .35s var(--a-spring, ease), visibility 0s linear 0s; }
html body .site-notices.is-tucked { opacity: 0; transform: translateY(-10px); visibility: hidden; transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s; }
@media (prefers-reduced-motion: reduce) { html body .site-notices, html body .site-notices.is-tucked { transition: none !important; transform: none !important; } }
html body .site-notices:not(.is-open) .site-notices-list { display: none; }
/* Below 768px the notices get no blur, and where the open list hangs over the page
   (CROSSFADE's bar) the half-clear glass let the hero text show through. */
@media (max-width: 767px) {
  html body .site-notices.is-open .site-notice:not(#_x):not(#_g1) { background-color: rgba(255, 255, 255, .96) !important; }
}
@media (max-width: 600px) {
  html body .site-notices-pill { font-size: 12.5px; padding: 5px 10px 5px 6px; }
  /* The icon hides on phones inside full notices, but the pill keeps its own. */
  html body .site-notices-pill .site-notice-icon:not(#_x) { display: grid !important; }
}

/* ═══ Icons instead of emoji ══════════════════════════════════════════════
   Images/decor/icons.svg, placed with <svg class="jb-glyph"><use …/></svg>.
   In running text an icon sits on the baseline like a letter, in the text's
   own colour; as a feature marker it gets a soft tinted tile. */
html body .jb-glyph {
  display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; margin-right: .4em;
  flex: none; color: inherit; overflow: visible;
}
html body :is(.feature-icon, .wa-feature > span[aria-hidden], .app-icon):has(> .jb-glyph) {
  display: inline-grid !important; place-items: center; flex: none;
  width: 34px !important; height: 34px !important; min-width: 34px; border-radius: 10px !important;
  background: rgba(0, 113, 227, .1) !important; color: var(--a-blue) !important;
  font-size: 18px !important; line-height: 1 !important; padding: 0 !important; box-shadow: none !important; border: 0 !important;
}
html body :is(.feature-icon, .wa-feature > span[aria-hidden], .app-icon) > .jb-glyph { margin: 0; width: 18px; height: 18px; }
html body .app-icon:has(> .jb-glyph) { width: 64px !important; height: 64px !important; border-radius: 16px !important; }
html body .app-icon > .jb-glyph { width: 32px; height: 32px; }
/* App details row (version · Android · price): quiet grey icons. */
html body .app-meta .jb-glyph { color: var(--a-dim, #6e6e73); }

/* ═══ Footer: the Apple layout ════════════════════════════════════════════
   Small grey type in tidy columns, a hairline, and a quiet base row. One copy
   for every page (public/footer.html). */
html body > footer.jb-footer:not(#_g1):not(#_g2) {
  margin-top: 96px; padding: 0 !important; border-radius: 0 !important; text-align: left;
  background: rgba(245, 245, 247, .82) !important; border: 0 !important; border-top: 1px solid rgba(0, 0, 0, .08) !important;
  box-shadow: none !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
html body .jb-footer::before, html body .jb-footer::after { content: none !important; }
html body .jb-footer__inner { max-width: 1024px; margin: 0 auto; padding: 22px 22px 26px; font: 400 12px/1.5 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73; }
html body .jb-footer__lede { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, .1); color: #6e6e73; font-size: 12px; }
html body .jb-footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
html body .jb-footer__col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
html body .jb-footer__col h3:not(#_g1) {
  margin: 0 0 3px !important; font: 600 12px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; color: #1d1d1f !important;
  -webkit-text-fill-color: currentColor !important; background: none !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body .jb-footer__col h3::before, html body .jb-footer__col h3::after, html body .jb-footer__col a::before, html body .jb-footer__col a::after { content: none !important; }
html body .jb-footer__col :is(a, span):not(#_g1) {
  color: #424245 !important; font-size: 12px !important; text-decoration: none !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; overflow-wrap: anywhere;
}
html body .jb-footer__col a:not(#_g1):hover { color: #1d1d1f !important; text-decoration: underline !important; }
html body .jb-footer__base { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .1); }
html body .jb-footer__base p { margin: 0; color: #6e6e73; font-size: 12px; }
html body .jb-footer__where { margin-left: auto !important; }
@media (max-width: 834px) { html body .jb-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; } }
@media (max-width: 560px) {
  html body .jb-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .jb-footer__where { margin-left: 0 !important; }
  /* Room for the floating buttons, so they never sit on the last line. */
  html body .jb-footer__inner { padding-bottom: 92px; }
}

/* ═══ Headlines: one word in colour ═══════════════════════════════════════
   Apple's product headlines put a single key word in a gradient. Each page's
   h1 wraps that word in .jb-grad. Tighter tracking on the h1 itself. */
html body h1 { letter-spacing: -0.035em !important; font-weight: 700 !important; }
html body h1 .jb-grad:not(#_g1):not(#_g2) {
  background: linear-gradient(95deg, #0071e3 0%, #6e4cff 52%, #e0457b 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  padding-bottom: .06em; /* descenders keep their colour */
}
@media print { html body h1 .jb-grad:not(#_g1):not(#_g2) { -webkit-text-fill-color: #0071e3 !important; color: #0071e3 !important; background: none !important; } }

/* ═══ Bento grid (homepage "At a Glance") ═════════════════════════════════
   Tiles of different sizes in one grid, the way Apple sums up a product.
   Links say so with a .card-go line; the rest are plain panels. */
html body .jb-bento {
  display: grid; gap: 18px; margin-top: 36px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(196px, auto);
}
html body .jb-bento__tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; overflow: hidden;
  padding: 24px 24px 22px; border-radius: 28px; text-decoration: none !important; color: #1d1d1f;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 10px 30px rgba(0, 0, 0, .06);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
html body a.jb-bento__tile { cursor: pointer; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
html body a.jb-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 18px 40px rgba(0, 0, 0, .1); }
html body a.jb-bento__tile:focus-visible { outline: 3px solid rgba(0, 113, 227, .45); outline-offset: 3px; }
html body .jb-bento__tile--hero { grid-column: span 2; grid-row: span 2; padding: 34px 34px 30px; }
html body .jb-bento__tile--wide { grid-column: span 2; }
html body .jb-bento__tile > .jb-glyph { width: 30px; height: 30px; margin: 0 0 8px; color: var(--a-blue, #0071e3); }
html body .jb-bento__kicker:not(#_g1) { font: 600 14px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73 !important; -webkit-text-fill-color: currentColor !important; }
html body .jb-bento__big:not(#_g1) {
  font: 700 28px/1.12 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); letter-spacing: -0.025em; color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important;
}
html body .jb-bento__tile--hero .jb-bento__big:not(#_g1) { font-size: 46px; max-width: 13ch; margin-top: 4px; }
html body .jb-bento__big em:not(#_g1) {
  font-style: normal; background: linear-gradient(95deg, #0071e3 0%, #6e4cff 52%, #e0457b 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html body .jb-bento__cap:not(#_g1) { font: 400 15px/1.45 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73 !important; -webkit-text-fill-color: currentColor !important; max-width: 34ch; }
html body .jb-bento__tile .card-go:not(#_x) { padding-top: 14px; }
html body .jb-bento__art { position: absolute; right: 18px; bottom: 4px; width: 46%; max-width: 250px; height: auto; pointer-events: none; transform: rotate(-6deg); }
html body .jb-bento__tile--hero .jb-bento__cap { max-width: 24ch; }
/* The dark tile: Apple's black product panel. */
html body .jb-bento__tile--dark:not(#_g1) { background: radial-gradient(120% 140% at 100% 0%, #26304a 0%, #0b0d12 60%) !important; border-color: rgba(255, 255, 255, .08) !important; }
html body .jb-bento__tile--dark .jb-bento__big:not(#_g1) { color: #f5f5f7 !important; font-size: 40px; }
html body .jb-bento__tile--dark :is(.jb-bento__kicker, .jb-bento__cap):not(#_g1) { color: #a1a1a6 !important; }
html body .jb-bento__tile--dark .jb-bento__big em:not(#_g1) { background-image: linear-gradient(95deg, #5ac8fa, #a78bfa 55%, #ff6fae); }
html body .jb-bento__tile--dark .card-go:not(#_x) { color: #5ac8fa !important; }
html body .jb-bento__tile--tint:not(#_g1) { background: linear-gradient(160deg, rgba(0, 113, 227, .12), rgba(110, 76, 255, .08)) !important; }
@media (max-width: 960px) {
  html body .jb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .jb-bento__tile--hero .jb-bento__big:not(#_g1) { font-size: 38px; }
}
@media (max-width: 600px) {
  html body .jb-bento { grid-template-columns: minmax(0, 1fr); gap: 14px; grid-auto-rows: auto; }
  html body :is(.jb-bento__tile--hero, .jb-bento__tile--wide) { grid-column: auto; grid-row: auto; }
  html body .jb-bento__tile { padding: 22px; border-radius: 24px; }
  html body .jb-bento__art { position: static; width: 64%; max-width: 230px; margin: 6px 0 -4px auto; }
  html body .jb-bento__tile--hero .jb-bento__big:not(#_g1) { font-size: 34px; }
}

/* ═══ Story band: dark, with a pinned picture that changes as you scroll ═══
   Computer Repairs, "How a repair goes". Full-bleed black like Apple's product
   panels. Without scroll-driven animation (Safari, Firefox, phones, reduced
   motion) every step simply shows its own picture; nothing depends on the
   animation running. The pinned version beats the motion budget's universal
   kill the same way a-rise does, and only ever follows the scroll. */
html body section.jb-story:not(#_g1) {
  position: relative; width: auto; max-width: 100vw; overflow-x: clip; margin: 110px calc(50% - 50vw) !important; padding: 110px 0 120px !important;
  background: radial-gradient(70% 60% at 80% 10%, #1b2440 0%, #000 62%) !important; color: #f5f5f7; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}
html body .jb-story__inner { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
html body .jb-story__head { text-align: center; margin-bottom: 56px; }
html body .jb-story__kicker:not(#_g1) { display: block; font: 600 17px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #a1a1a6 !important; -webkit-text-fill-color: currentColor !important; margin-bottom: 10px; }
html body .jb-story__title:not(#_g1):not(#_g2) {
  margin: 0 !important; font: 700 clamp(40px, 6vw, 72px)/1.05 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; letter-spacing: -0.035em !important;
  color: #f5f5f7 !important; -webkit-text-fill-color: currentColor !important; background: none !important; white-space: normal !important; text-align: center !important;
}
html body .jb-story__title::before, html body .jb-story__title::after { content: none !important; }
html body .jb-story__title em:not(#_g1) {
  font-style: normal; background: linear-gradient(95deg, #5ac8fa, #a78bfa 55%, #ff6fae) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html body .jb-story__grid { display: block; }
html body .jb-story__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
html body .jb-story__step { margin: 0; }
html body .jb-story__num:not(#_g1) { display: block; font: 600 15px/1 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #5ac8fa !important; -webkit-text-fill-color: currentColor !important; margin-bottom: 10px; letter-spacing: .04em; }
html body .jb-story__step h3:not(#_g1) {
  margin: 0 0 10px !important; font: 700 clamp(28px, 3.4vw, 40px)/1.1 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; letter-spacing: -0.03em !important;
  color: #f5f5f7 !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-align: left !important;
}
html body .jb-story__step p:not(#_g1) { margin: 0 !important; max-width: 30ch; font: 400 19px/1.5 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; color: #a1a1a6 !important; -webkit-text-fill-color: currentColor !important; }
html body .jb-story__inline { display: block; width: 100%; max-width: 640px; height: auto; margin-top: 22px; }
html body .jb-story__visual { display: none; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html body .jb-story { timeline-scope: --jb-st1, --jb-st2, --jb-st3, --jb-st4; }
    html body .jb-story__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 40px; }
    html body .jb-story__steps { gap: 0; }
    html body .jb-story__step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; }
    html body .jb-story__step:nth-child(1) { view-timeline-name: --jb-st1; }
    html body .jb-story__step:nth-child(2) { view-timeline-name: --jb-st2; }
    html body .jb-story__step:nth-child(3) { view-timeline-name: --jb-st3; }
    html body .jb-story__step:nth-child(4) { view-timeline-name: --jb-st4; }
    html body .jb-story__inline { display: none; }
    html body .jb-story__visual { display: block; }
    html body .jb-story__pin { position: sticky; top: calc(50vh - 220px); aspect-ratio: 720 / 470; }
    html body .jb-story__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
    /* A step is centred at 50% of its cover range and the next one at 50% of
       its own, 64vh later: the hand-over falls at about 70% / 30%, so each
       picture fades in a short window around that and is alone otherwise. */
    @keyframes jb-story-in-out { 0%, 27% { opacity: 0; transform: scale(.98); } 33%, 67% { opacity: 1; transform: none; } 73%, 100% { opacity: 0; transform: scale(.98); } }
    @keyframes jb-story-out { 0%, 67% { opacity: 1; transform: none; } 73%, 100% { opacity: 0; transform: scale(.98); } }
    @keyframes jb-story-in { 0%, 27% { opacity: 0; transform: scale(.98); } 33%, 100% { opacity: 1; transform: none; } }
    @keyframes jb-story-step { 0%, 22%, 78%, 100% { opacity: .3; } 32%, 68% { opacity: 1; } }
    html body .jb-story__frame--1 { animation: jb-story-out linear both !important; animation-timeline: --jb-st1 !important; animation-range: cover 0% cover 100% !important; }
    html body .jb-story__frame--2 { animation: jb-story-in-out linear both !important; animation-timeline: --jb-st2 !important; animation-range: cover 0% cover 100% !important; }
    html body .jb-story__frame--3 { animation: jb-story-in-out linear both !important; animation-timeline: --jb-st3 !important; animation-range: cover 0% cover 100% !important; }
    html body .jb-story__frame--4 { animation: jb-story-in linear both !important; animation-timeline: --jb-st4 !important; animation-range: cover 0% cover 100% !important; }
    html body .jb-story__step { animation: jb-story-step linear both !important; animation-timeline: view() !important; animation-range: cover 0% cover 100% !important; }
  }
}
@media (max-width: 600px) {
  html body section.jb-story:not(#_g1) { padding: 72px 0 80px !important; margin: 72px calc(50% - 50vw) !important; }
  html body .jb-story__steps { gap: 48px; }
}
@media print { html body section.jb-story:not(#_g1) { background: none !important; color: #000; } html body .jb-story__visual { display: none !important; } }

/* Dark product band (homepage): the same black panel as the story band, with
   one headline, one line, one link and the artwork underneath. */
html body section.jb-band:not(#_g1) {
  position: relative; width: auto; max-width: 100vw; overflow-x: clip; margin: 110px calc(50% - 50vw) !important; padding: 110px 0 40px !important;
  background: radial-gradient(70% 60% at 20% 0%, #1b2440 0%, #000 60%) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  text-align: center; display: block !important;
}
html body .jb-band__inner { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
html body .jb-band__kicker:not(#_g1) { display: block; font: 600 17px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #a1a1a6 !important; -webkit-text-fill-color: currentColor !important; margin-bottom: 10px; }
html body .jb-band__title:not(#_g1):not(#_g2) {
  margin: 0 auto 18px !important; font: 700 clamp(40px, 6vw, 76px)/1.05 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; letter-spacing: -0.035em !important;
  color: #f5f5f7 !important; -webkit-text-fill-color: currentColor !important; background: none !important; white-space: normal !important; text-align: center !important;
}
html body .jb-band__title::before, html body .jb-band__title::after { content: none !important; }
html body .jb-band__title em:not(#_g1) {
  font-style: normal; background: linear-gradient(95deg, #5ac8fa, #a78bfa 55%, #ff6fae) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html body .jb-band__lede:not(#_g1) { max-width: 38ch; margin: 0 auto 22px !important; font: 400 21px/1.45 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; color: #a1a1a6 !important; -webkit-text-fill-color: currentColor !important; }
html body .jb-band__link:not(#_g1) { display: inline-flex; align-items: center; gap: 6px; font: 500 19px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #5ac8fa !important; text-decoration: none !important; }
html body .jb-band__link svg { width: 18px; height: 18px; transition: transform .25s ease; }
html body .jb-band__link:is(:hover, :focus-visible) svg { transform: translateX(4px); }
html body .jb-band__link:hover { text-decoration: underline !important; }
html body .jb-band__art { display: block; width: min(1100px, 100%); height: auto; margin: 40px auto 0; }
@media (max-width: 600px) {
  html body section.jb-band:not(#_g1) { padding: 72px 0 24px !important; margin: 72px calc(50% - 50vw) !important; }
  html body .jb-band__lede:not(#_g1) { font-size: 18px !important; }
  html body .jb-band__art { width: calc(100% + 30px); margin-left: -15px; }
}
@media print { html body section.jb-band:not(#_g1) { background: none !important; } }
/* The glass sheen other sections get would grey out the black bands. */
html body :is(section.jb-band, section.jb-story)::before, html body :is(section.jb-band, section.jb-story)::after { content: none !important; display: none !important; }

/* ═══ Compare tables (Remote Support plans, VPN with and without) ═════════
   Apple's "compare models" layout: plan names across the top, features down
   the side, ticks and dashes in between, hairlines only. */
html body .jb-compare-wrap { max-width: 980px; margin: 56px auto 0; }
html body .jb-compare__head { text-align: center; margin-bottom: 22px; }
html body .jb-compare__title:not(#_g1) { margin: 0 0 6px !important; font: 700 clamp(28px, 4vw, 40px)/1.1 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; letter-spacing: -0.03em !important; color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important; text-align: center !important; }
html body .jb-compare__sub:not(#_g1) { margin: 0 !important; color: #6e6e73 !important; font-size: 17px !important; }
html body .jb-compare__scroll { overflow-x: auto; border-radius: 22px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 10px 30px rgba(0, 0, 0, .05); }
html body table.jb-compare { width: 100%; border-collapse: collapse; font: 400 15px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f; min-width: 520px; }
html body .jb-compare :is(th, td) { padding: 14px 18px; border-bottom: 1px solid rgba(0, 0, 0, .07); text-align: center; vertical-align: middle; background: none !important; }
html body .jb-compare tbody tr:last-child :is(th, td) { border-bottom: 0; }
html body .jb-compare tbody th { text-align: left; font-weight: 400; color: #1d1d1f; width: 42%; }
html body .jb-compare thead th { font: 600 17px/1.25 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f; padding-top: 20px; padding-bottom: 16px; }
html body .jb-compare thead th span { display: block; font: 400 15px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73; margin-top: 3px; }
html body .jb-compare thead th span.jb-compare__pop:not(#_g1) { color: #bf4800 !important; font-size: 12px !important; font-weight: 600 !important; }
html body .jb-compare__yes:not(#_g1) { width: 20px; height: 20px; margin: 0; color: var(--a-blue, #0071e3); vertical-align: middle; }
html body .jb-compare__no { color: #b0b0b5; }
html body .jb-compare__note:not(#_g1) { text-align: center; margin: 14px 0 0 !important; color: #6e6e73 !important; font-size: 14px !important; }
@media (max-width: 600px) {
  /* Phones: each feature name gets its own line, with the ticks in a row under it. */
  html body table.jb-compare { min-width: 0; }
  html body .jb-compare :is(thead, tbody) { display: block; }
  html body .jb-compare tr { display: grid; border-bottom: 1px solid rgba(0, 0, 0, .07); }
  html body .jb-compare--3 tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body .jb-compare--2 tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .jb-compare tbody tr:last-child { border-bottom: 0; }
  html body .jb-compare :is(th, td) { border: 0 !important; padding: 8px 6px; font-size: 14px; }
  html body .jb-compare thead td:first-child { display: none; }
  html body .jb-compare tbody th { grid-column: 1 / -1; width: auto; text-align: center; padding: 14px 12px 2px; color: #1d1d1f; font-weight: 500; }
  html body .jb-compare tbody td { padding-bottom: 14px; }
  html body .jb-compare thead th { font-size: 15px; padding: 18px 6px 12px; }
  html body .jb-compare thead th span { font-size: 13px; }
}

/* ═══ Forms: Book a Repair and Track a Repair ═════════════════════════════
   One glass card, choices as tappable chips and segmented switches (radios
   underneath, so they work with a keyboard and without JavaScript). */
html body .jb-form-wrap { max-width: 860px; margin: 0 auto; }
html body .jb-form, html body .jb-form-done {
  display: grid; gap: 22px; padding: 34px; border-radius: 28px;
  background: rgba(255, 255, 255, .64); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 12px 34px rgba(0, 0, 0, .06);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
html body .jb-form--narrow { max-width: 620px; margin: 0 auto; }
html body .jb-form[hidden], html body .jb-form-done[hidden] { display: none; }
html body .jb-form__title:not(#_g1) { margin: 0 0 4px !important; font: 700 28px/1.15 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; letter-spacing: -0.025em !important; color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important; text-align: left !important; }
html body .jb-form__title::before, html body .jb-form__title::after { content: none !important; }
html body .jb-form__note:not(#_g1) { margin: 0 !important; color: #6e6e73 !important; font-size: 15px !important; display: flex; align-items: center; }
html body .jb-form__note .jb-glyph { color: var(--a-blue, #0071e3); }
html body .jb-form__group { border: 0; margin: 0; padding: 0; min-width: 0; }
html body .jb-form__group legend { padding: 0; margin-bottom: 10px; font: 600 15px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f; }
html body .jb-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 22px; }
/* chips */
html body .jb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html body .jb-chip { position: relative; cursor: pointer; }
html body .jb-chip input, html body .jb-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
html body .jb-chip span {
  display: inline-block; padding: 9px 16px; border-radius: 980px; font: 500 15px/1.2 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif);
  color: #1d1d1f; background: #fff; border: 1px solid rgba(0, 0, 0, .1); transition: background-color .15s, border-color .15s, color .15s;
}
html body .jb-chip:hover span { border-color: rgba(0, 0, 0, .25); }
html body .jb-chip input:checked + span { background: var(--a-blue, #0071e3); border-color: var(--a-blue, #0071e3); color: #fff; }
html body .jb-chip input:focus-visible + span, html body .jb-seg input:focus-visible + span { outline: 3px solid rgba(0, 113, 227, .4); outline-offset: 2px; }
/* segmented switch */
html body .jb-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(118, 118, 128, .12); }
html body .jb-seg label { position: relative; cursor: pointer; }
html body .jb-seg span { display: block; padding: 8px 14px; border-radius: 9px; font: 500 14px/1.2 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f; transition: background-color .15s, box-shadow .15s; }
html body .jb-seg input:checked + span { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); font-weight: 600; }
/* fields */
html body .jb-field { display: grid; gap: 7px; min-width: 0; }
html body .jb-field > span { font: 600 15px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f; }
html body .jb-field em { font-style: normal; font-weight: 400; color: #6e6e73; }
html body .jb-field :is(input, textarea):not(#_g1) {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .12) !important; background: #fff !important;
  font: 400 16px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; color: #1d1d1f !important; box-shadow: none !important;
}
html body .jb-field textarea { resize: vertical; min-height: 120px; }
html body .jb-field :is(input, textarea):focus { outline: none; border-color: var(--a-blue, #0071e3) !important; box-shadow: 0 0 0 4px rgba(0, 113, 227, .15) !important; }
html body .jb-form__error:not(#_g1) { margin: 0 !important; padding: 10px 14px; border-radius: 12px; background: rgba(255, 59, 48, .1); color: #c4231b !important; font-size: 15px !important; }
html body .jb-form__error[hidden] { display: none; }
html body .jb-form__submit:not(#_g1) { justify-self: start; font-size: 17px !important; padding: 13px 26px !important; }
html body .jb-form__submit:disabled { opacity: .6; cursor: progress; }
html body .jb-form__privacy:not(#_g1) { margin: 0 !important; color: #6e6e73 !important; font-size: 13px !important; }
html body .jb-form-done { justify-items: center; text-align: center; }
html body .jb-form-done > .jb-glyph { width: 54px; height: 54px; margin: 0; color: #fff; background: #30c25a; border-radius: 50%; padding: 12px; }
html body .jb-form-done h2:not(#_g1) { margin: 0 !important; font: 700 30px/1.2 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important; }
html body .jb-form-done h2::before, html body .jb-form-done h2::after { content: none !important; }
html body .jb-form-done p { margin: 0; color: #6e6e73; }
@media (max-width: 600px) {
  html body .jb-form, html body .jb-form-done { padding: 22px 18px; border-radius: 22px; }
  html body .jb-form__submit:not(#_g1) { justify-self: stretch; }
}
html body section.jb-form-wrap:not(#_g1) { padding-top: 0 !important; }

/* Android app cards: a link to the app's own website beside Google Play. */
html body .app-site-link:not(#_g1) {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 14px;
  font: 600 15px/1.2 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: var(--a-blue, #0071e3) !important; text-decoration: none !important;
}
html body .app-site-link svg { width: 15px; height: 15px; transition: transform .25s ease; }
html body .app-site-link:is(:hover, :focus-visible) svg { transform: translateX(3px); }
html body .app-site-link:hover { text-decoration: underline !important; }
@media (max-width: 600px) { html body .app-site-link:not(#_g1) { margin: 0 0 8px; } }

/* ═══ Site search (js/site-search.js) ═════════════════════════════════════ */
html body .jb-search-btn {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: 4px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #1d1d1f; cursor: pointer; transition: background-color .2s;
}
html body .jb-search-btn:hover { background: rgba(0, 0, 0, .06); }
html body .jb-search-btn:focus-visible { outline: 3px solid rgba(0, 113, 227, .4); outline-offset: 1px; }
html body .jb-search-btn svg { width: 18px; height: 18px; }
html.jb-search-open, html.jb-search-open body { overflow: hidden; }
html body .jb-search { position: fixed; inset: 0; z-index: 10050; }
html body .jb-search[hidden] { display: none; }
html body .jb-search__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html body .jb-search__box {
  position: relative; width: min(680px, calc(100vw - 24px)); margin: 10vh auto 0; max-height: 76vh; display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .94); box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
}
html body .jb-search__field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
html body .jb-search__field > svg { width: 20px; height: 20px; flex: none; color: #6e6e73; }
html body .jb-search__field input:not(#_g1) {
  flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 6px 0 !important;
  font: 400 20px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; color: #1d1d1f !important;
}
html body .jb-search__field input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
html body .jb-search__close { flex: none; border: 0; background: none; color: var(--a-blue, #0071e3); font: 500 15px/1 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); cursor: pointer; padding: 8px 4px; }
html body .jb-search__results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
html body .jb-search__results:empty { display: none; }
html body .jb-search__results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none !important; color: #1d1d1f; }
html body .jb-search__results li.is-active a, html body .jb-search__results a:hover { background: rgba(0, 113, 227, .09); }
html body .jb-search__kind { font: 600 11.5px/1.2 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: var(--a-blue, #0071e3); text-transform: uppercase; letter-spacing: .04em; }
html body .jb-search__title { font: 600 16px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f; }
html body .jb-search__desc { font: 400 13.5px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73; }
html body .jb-search__hint { margin: 0; padding: 14px 18px 16px; color: #6e6e73; font-size: 14px; }
html body .jb-search__hint:empty { display: none; }
@media (max-width: 600px) {
  html body .jb-search__box { margin-top: 12px; max-height: calc(100vh - 24px); border-radius: 18px; }
  html body .jb-search__field input:not(#_g1) { font-size: 17px !important; }
}
/* Where the search button sits. Wide screens: inside the menu capsule, at its
   right end (the capsule gets room for it). Narrower screens, where the menu
   button is pinned top-right: just to the left of that button. */
@media (min-width: 1100px) {
  /* Ten links since Book a Repair: a little less padding each makes room. */
  html body > header nav .nav-links a:not(#_g1):not(#_g2) { padding-left: 9px !important; padding-right: 9px !important; }
  html body > header nav:has(> .jb-search-btn) > .nav-links:not(#_g1) { margin-right: 40px !important; }
  html body > header nav > .jb-search-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; }
}
@media (max-width: 1099px) {
  html body > header nav > .jb-search-btn { position: fixed; top: 6px; right: 58px; z-index: 1002; width: 38px; height: 38px; }
}
html body .sc-cmd-bar span:not(#_g1) { color: #55555a !important; }   /* 4.5:1 on the bar (axe) */
html body .sc-related-item span:not(#_g1) { color: #6e6e73 !important; opacity: 1 !important; }
/* Book a repair, done screen: the copy-and-send fallback. */
html body .jb-form-done__alt { width: 100%; max-width: 520px; text-align: left; }
html body .jb-form-done__alt summary { cursor: pointer; color: var(--a-blue, #0071e3); font-weight: 500; text-align: center; }
html body .jb-form-done__alt[open] { display: grid; gap: 10px; }
html body .jb-form-done__alt textarea { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .12); font: 400 14px/1.5 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); resize: vertical; }

/* Support Centre diagnostic console: a proper-sized message box and button.
   The box had its vertical padding zeroed, which left it a thin line. */
html body .sc-console-input:not(#_g1) { gap: 10px; padding: 16px 18px !important; align-items: center; }
html body .sc-console-input .sc-prompt { display: none !important; }
html body .sc-console-input input:not(#_g1) {
  height: 52px; padding: 0 20px !important; font-size: 17px !important; line-height: 52px !important;
  border-color: rgba(0, 0, 0, .14) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04) !important;
  transition: border-color .2s, box-shadow .2s;
}
html body .sc-console-input input:not(#_g1):focus { border-color: var(--a-blue, #0071e3) !important; box-shadow: 0 0 0 4px rgba(0, 113, 227, .15) !important; }
html body .sc-console-send:not(#_g1) { height: 52px; min-width: 96px; padding: 0 26px !important; font-size: 17px !important; flex: none; }
@media (max-width: 600px) {
  html body .sc-console-input:not(#_g1) { padding: 12px !important; gap: 8px; }
  html body .sc-console-input input:not(#_g1) { height: 48px; line-height: 48px !important; font-size: 16px !important; padding: 0 16px !important; }
  html body .sc-console-send:not(#_g1) { height: 48px; min-width: 0; padding: 0 18px !important; font-size: 16px !important; }
}

/* ═══ Windows app promo (Wallpapers page) ═════════════════════════════════
   A dark product panel: words and the download on the left, the app on the
   right. .jb-dark keeps apple-theme.js from lightening it. */
html body section.jb-app-promo:not(#_g1) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px; align-items: center;
  max-width: 1180px; margin: 30px auto 50px !important; padding: 52px 52px 52px 56px !important; border-radius: 32px !important;
  background: radial-gradient(80% 90% at 85% 10%, #2a2160 0%, #0b0d18 55%, #05060a 100%) !important; border: 0 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .25) !important; overflow: hidden; text-align: left;
}
html body section.jb-app-promo::before, html body section.jb-app-promo::after { content: none !important; display: none !important; }
html body .jb-app-promo__icon { display: block; width: 72px; height: 72px; margin-bottom: 18px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
html body .jb-app-promo__kicker:not(#_g1) { display: block; font: 600 15px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #a1a1a6 !important; -webkit-text-fill-color: currentColor !important; margin-bottom: 8px; }
html body .jb-app-promo__title:not(#_g1):not(#_g2) {
  margin: 0 0 14px !important; font: 700 clamp(32px, 4.2vw, 50px)/1.06 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; letter-spacing: -0.035em !important;
  color: #f5f5f7 !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-align: left !important; white-space: normal !important;
}
html body .jb-app-promo__title::before, html body .jb-app-promo__title::after { content: none !important; }
html body .jb-app-promo__title em:not(#_g1) {
  font-style: normal; background: linear-gradient(95deg, #5ac8fa, #a78bfa 55%, #ff6fae) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html body .jb-app-promo__lede:not(#_g1) { margin: 0 0 20px !important; font: 400 18px/1.5 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; color: #a1a1a6 !important; -webkit-text-fill-color: currentColor !important; max-width: 40ch; }
html body .jb-app-promo__points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
html body .jb-app-promo__points li:not(#_g1) { display: flex; align-items: center; gap: 4px; font: 500 15.5px/1.35 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #e5e5ea !important; -webkit-text-fill-color: currentColor !important; }
html body .jb-app-promo__points .jb-glyph { color: #5ac8fa; width: 18px; height: 18px; }
html body .jb-app-promo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
html body .jb-app-promo__btn:not(#_g1) { display: inline-flex !important; align-items: center; gap: 8px; font-size: 17px !important; padding: 13px 24px !important; }
html body .jb-app-promo__btn svg { width: 19px; height: 19px; }
html body .jb-app-promo__meta { font: 400 13px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #8e8e93; }
html body .jb-app-promo__shot { min-width: 0; }
html body .jb-app-promo__shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px rgba(0, 0, 0, .55); transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); }
@media (max-width: 900px) {
  html body section.jb-app-promo:not(#_g1) { grid-template-columns: minmax(0, 1fr); padding: 36px 26px !important; margin: 20px 12px 40px !important; border-radius: 26px !important; }
  html body .jb-app-promo__shot img { transform: none; }
}
@media print { html body section.jb-app-promo:not(#_g1) { display: none !important; } }
/* Store: four cards sit as a tidy 2×2 rather than three and an orphan. */
@media (min-width: 621px) { html body .ss-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A fault page (/support/<id>): the title sits in a frosted-glass card with a severity chip, and the two
   "what you see / what is actually wrong" blocks become a pair of cards, like the rest of the site. */
/* body (52px) and .sc-page (80px) already clear the fixed nav and the notices pill. */
html body .sc-fault .sc-container:not(#_g1) { padding-top: 12px !important; }
html body .sc-fault-head:not(#_g1) {
  position: relative; padding: 34px 38px 32px !important; margin-bottom: 26px !important; border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 28px !important; background: rgba(255, 255, 255, .66) !important;
  backdrop-filter: saturate(180%) blur(26px); -webkit-backdrop-filter: saturate(180%) blur(26px);
  box-shadow: inset 0 1px 0 #fff, 0 22px 60px rgba(30, 40, 90, .12) !important; overflow: hidden;
}
html body .sc-fault-head:not(#_g1)::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, #0071e3, #7b5cff 55%, var(--sc-sev, #0071e3));
}
html body .sc-fault-head .sc-reader-eyebrow:not(#_g1) {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 11px; border-radius: 980px;
  background: color-mix(in srgb, var(--sc-sev, #0071e3) 10%, transparent); color: var(--sc-sev, #0071e3) !important;
  font-size: 12.5px !important; font-weight: 600; letter-spacing: .01em;
}
html body .sc-fault-head .sc-reader-eyebrow:not(#_g1)::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
html body .sc-fault-head h1:not(#_g1) {
  margin: 16px 0 12px !important; font-size: clamp(1.7rem, 3.6vw, 2.55rem) !important; font-weight: 700 !important;
  letter-spacing: -.025em; line-height: 1.12 !important; text-shadow: none !important;
}
html body .sc-fault-head .sc-fault-summary:not(#_g1) {
  font-family: var(--a-font) !important; font-size: 1.16rem !important; line-height: 1.55 !important; color: var(--a-text-2) !important;
}
html body .sc-fault-body:not(#_g1) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
html body .sc-fault-body > :not(.sc-block:nth-child(-n+2)) { grid-column: 1 / -1; }
html body .sc-fault-body > .sc-block:nth-child(-n+2):not(#_g1) {
  margin: 0 0 30px !important; padding: 22px 24px 20px !important; border-radius: 22px !important;
  background: #ffffff !important; border: 1px solid rgba(0, 0, 0, .06) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .05) !important;
}
html body .sc-fault-body > .sc-block:nth-child(-n+2) h4:not(#_g1) { margin-top: 0 !important; }
html body .sc-fault-body > .sc-block:nth-child(-n+2) h4:not(#_g1)::after { display: none !important; }
html body .sc-fault-body > .sc-block:nth-child(-n+2) p:not(#_g1) { font-size: 1rem !important; line-height: 1.6 !important; margin-bottom: 0 !important; }
html body .sc-fault-body > .sc-block:nth-child(2):not(#_g1) { background: linear-gradient(160deg, #ffffff 40%, color-mix(in srgb, var(--sc-sev, #0071e3) 7%, #fff)) !important; }
@media (max-width: 700px) {
  html body .sc-fault .sc-container:not(#_g1) { padding-top: 4px !important; }
  html body .sc-fault-head:not(#_g1) { padding: 26px 22px 24px !important; border-radius: 24px !important; }
  html body .sc-fault-body:not(#_g1) { grid-template-columns: minmax(0, 1fr); }
  html body .sc-fault-body > .sc-block:nth-child(-n+2):not(#_g1) { margin-bottom: 14px !important; }
  html body .sc-fault-body > .sc-block:nth-child(2):not(#_g1) { margin-bottom: 28px !important; }
}

/* ── Desktop app download: the reassurance line and the "what happens next" sheet (js/app-download.js) ──
   The installer isn't code-signed, so Windows SmartScreen shows its blue box until the app builds a
   reputation. The sheet says so before people meet it, with a drawing of the two clicks that get past it. */
html body .jb-app-promo__safe:not(#_g1) {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 11px 16px 11px 12px; width: fit-content; max-width: 100%;
  border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 16px !important; background: rgba(255, 255, 255, .06) !important;
  color: #d2d2d7 !important; font: 400 14px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; text-align: left; cursor: pointer;
  transition: background .2s, border-color .2s; box-shadow: none !important; transform: none !important;
}
html body .jb-app-promo__safe:not(#_g1):hover { background: rgba(255, 255, 255, .11) !important; border-color: rgba(255, 255, 255, .24) !important; }
html body .jb-app-promo__safe b { color: #fff; font-weight: 600; }
html body .jb-app-promo__safe .jb-glyph { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: linear-gradient(145deg, #30d158, #0a9d3d); color: #fff; }

html body dialog.jb-dlsheet:not(#_g1) {
  width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 30px; background: rgba(250, 250, 252, .94); color: #1d1d1f;
  backdrop-filter: saturate(200%) blur(40px); -webkit-backdrop-filter: saturate(200%) blur(40px);
  box-shadow: inset 0 1px 0 #fff, 0 40px 120px rgba(20, 20, 60, .35) !important; font-family: var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif);
  opacity: 1; transform: none;
  transition: opacity .32s ease, transform .45s cubic-bezier(.2, .9, .25, 1.15), overlay .32s allow-discrete, display .32s allow-discrete;
}
html body dialog.jb-dlsheet:not([open]):not(#_g1) { opacity: 0; transform: translateY(26px) scale(.96); }
@starting-style { html body dialog.jb-dlsheet[open]:not(#_g1) { opacity: 0; transform: translateY(26px) scale(.96); } }
html body dialog.jb-dlsheet::backdrop {
  background: rgba(10, 10, 30, .38); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 1; transition: opacity .32s ease, overlay .32s allow-discrete, display .32s allow-discrete;
}
@starting-style { html body dialog.jb-dlsheet[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html body dialog.jb-dlsheet:not(#_g1) { transform: none !important; } }

/* The sheet scrolls inside its rounded edge, not past it: the dialog clips, the body scrolls, and the
   scrollbar is a thin grey one rather than the site's wide blue one. */
html body .jb-dlsheet__body { max-height: calc(100dvh - 34px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .22) transparent; }
html body .jb-dlsheet__x:not(#_g1) {
  position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: #1d1d1f; cursor: pointer;
}
html body .jb-dlsheet__x:not(#_g1):hover { background: rgba(0, 0, 0, .1); }
html body .jb-dlsheet__x svg { width: 16px; height: 16px; }
html body .jb-dlsheet__head { position: relative; isolation: isolate; padding: 30px 36px 4px; text-align: center; overflow: hidden; }
html body .jb-dlsheet__head::before {
  content: ''; position: absolute; inset: -60% -10% 20%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 30% 60%, rgba(48, 209, 88, .22), transparent), radial-gradient(closest-side at 70% 50%, rgba(0, 113, 227, .2), transparent);
}
html body .jb-dlsheet__badge {
  display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 50%;
  background: linear-gradient(145deg, #34c759, #0a9d3d); color: #fff;
  box-shadow: 0 0 0 8px rgba(52, 199, 89, .14), 0 14px 30px rgba(10, 157, 61, .35) !important;
}
html body .jb-dlsheet.is-info .jb-dlsheet__badge { background: linear-gradient(145deg, #0a84ff, #5e5ce6); box-shadow: 0 0 0 8px rgba(10, 132, 255, .14), 0 14px 30px rgba(10, 80, 220, .35) !important; }
html body .jb-dlsheet__badge .jb-glyph { width: 32px; height: 32px; }
html body .jb-dlsheet__head h2:not(#_g1) {
  margin: 0 0 10px !important; font: 700 clamp(24px, 4vw, 30px)/1.15 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; letter-spacing: -.025em;
  color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important;
}
html body .jb-dlsheet__head h2[hidden] { display: none !important; }
html body .jb-dlsheet__file { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 6px; border-radius: 980px; background: rgba(0, 0, 0, .05); color: #6e6e73; font-size: 13px; }
html body .jb-dlsheet__file img { border-radius: 6px; }

html body .jb-dlsheet__why { display: flex; gap: 14px; margin: 18px 28px 4px; padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 2px 10px rgba(0, 0, 0, .04) !important; }
html body .jb-dlsheet__why > .jb-glyph { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: linear-gradient(145deg, #0a84ff, #0060df); color: #fff; }
html body .jb-dlsheet__why p { margin: 0; color: #424245; font-size: 14.5px; line-height: 1.55; }
html body .jb-dlsheet__why b { color: #1d1d1f; }

html body ol.jb-dlsheet__steps:not(#_g1) { list-style: none; margin: 0; padding: 8px 28px 0; display: grid; gap: 0; }
html body .jb-dlsheet__steps > li:not(#_g1) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
html body .jb-dlsheet__steps > li:last-child:not(#_g1) { border-bottom: 0; }
html body .jb-dlsheet__step-text { display: flex; gap: 14px; align-items: flex-start; }
html body .jb-dlsheet__n {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #0071e3; color: #fff; font: 700 14px/1 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif);
}
html body .jb-dlsheet__step-text b { display: block; color: #1d1d1f; font-size: 15.5px; font-weight: 600; margin: 3px 0 2px; }
html body .jb-dlsheet__step-text p { margin: 0; color: #6e6e73; font-size: 14px; line-height: 1.5; }

/* A drawing of the SmartScreen box: Windows' own blue in both themes, with the thing to click ringed in yellow. */
html body .jb-ss {
  width: 230px; padding: 12px 14px; border-radius: 6px; background: #0b5cad; color: #fff;
  font: 400 9.5px/1.4 'Segoe UI', Inter, sans-serif; box-shadow: 0 10px 26px rgba(11, 60, 130, .35) !important; transform: rotate(-1.2deg);
}
html body .jb-dlsheet__steps > li:nth-child(3) .jb-ss { transform: rotate(1.2deg); }
html body .jb-ss__title { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
html body .jb-ss__win { width: 11px; height: 11px; }
html body .jb-ss p { margin: 0 0 7px; color: rgba(255, 255, 255, .9); }
html body .jb-ss__link { display: inline-block; text-decoration: underline; padding: 1px 3px; margin-left: -3px; border-radius: 3px; }
html body .jb-ss__btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
html body .jb-ss__btn { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 2px; }
html body .jb-ss__hl { box-shadow: 0 0 0 2px #0b5cad, 0 0 0 4.5px #ffd60a, 0 0 18px 4px rgba(255, 214, 10, .55) !important; }

html body .jb-dlsheet__foot { margin-top: 6px; padding: 14px 28px 20px; border-top: 1px solid rgba(0, 0, 0, .06); background: rgba(0, 0, 0, .02); }
html body .jb-dlsheet__foot > p { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #6e6e73; font-size: 13px; }
html body .jb-dlsheet__foot > p .jb-glyph { width: 16px; height: 16px; flex: none; color: #248a3d; }
html body .jb-dlsheet__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
html body .jb-dlsheet__again:not(#_g1) { color: #0066cc; font-size: 14.5px; text-decoration: none; }
html body .jb-dlsheet__again:not(#_g1):hover { text-decoration: underline; }
html body .jb-dlsheet__again[hidden] { display: none !important; }
/* Opened as an explainer, the sheet's main action is the download itself: a blue button on the right,
   with "Got it" beside it as the quieter grey one. Clicking it switches the sheet to "download started". */
html body .jb-dlsheet__dl:not(#_g1) { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px !important; font-size: 16px !important; text-decoration: none !important; }
html body .jb-dlsheet__dl[hidden] { display: none !important; }
html body .jb-dlsheet__dl svg { width: 18px; height: 18px; flex: none; }
html body .jb-dlsheet.is-info .jb-dlsheet__ok:not(#_g1):not(#_g2):not(#_g3):not(#_g4) { order: -1; background: rgba(0, 0, 0, .06) !important; color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important; border-color: transparent !important; box-shadow: none !important; }
html body .jb-dlsheet.is-info .jb-dlsheet__ok:not(#_g1):not(#_g2):not(#_g3):not(#_g4):hover { background: rgba(0, 0, 0, .1) !important; }
html body .jb-dlsheet__ok:not(#_g1) { min-width: 140px; margin-left: auto; padding: 12px 26px !important; font-size: 16px !important; }
/* Most laptop screens are under 1000px tall: tighten up so the whole sheet fits without scrolling. */
@media (max-height: 1000px) and (min-width: 561px) {
  html body .jb-dlsheet__head { padding-top: 24px; }
  html body .jb-dlsheet__badge { width: 48px; height: 48px; margin-bottom: 8px; }
  html body .jb-dlsheet__badge .jb-glyph { width: 26px; height: 26px; }
  html body .jb-dlsheet__head h2:not(#_g1) { font-size: 26px !important; margin-bottom: 8px !important; }
  html body .jb-dlsheet__why { margin-top: 14px; padding: 12px 16px; }
  html body .jb-dlsheet__why p { font-size: 14px; line-height: 1.5; }
  html body .jb-dlsheet__steps > li:not(#_g1) { padding: 7px 0; }
  html body .jb-ss { padding: 9px 12px; }
  html body .jb-dlsheet__foot { padding: 12px 28px 16px; }
  html body .jb-dlsheet__foot > p { margin-bottom: 8px; }
  html body :is(.jb-dlsheet__ok, .jb-dlsheet__dl):not(#_g1) { padding: 10px 24px !important; }
}
@media (max-width: 560px) {
  html body .jb-dlsheet__head { padding: 34px 22px 4px; }
  html body .jb-dlsheet__why { margin: 18px 16px 4px; }
  html body ol.jb-dlsheet__steps:not(#_g1) { padding: 10px 16px 2px; }
  html body .jb-dlsheet__steps > li:not(#_g1) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html body .jb-ss { margin-left: 42px; }
  html body .jb-dlsheet__foot { padding: 16px 16px 20px; }
  html body :is(.jb-dlsheet__ok, .jb-dlsheet__dl):not(#_g1) { width: 100%; margin-left: 0; }
  html body .jb-dlsheet.is-info .jb-dlsheet__ok:not(#_g1):not(#_g2):not(#_g3):not(#_g4) { order: 1; }
}

/* The phone/tablet menu (js/main.js): the page behind it dims and blurs, and the floating Facebook, help and
   back-to-top buttons step aside — they sat above the menu and covered its links. The menu button gets a focus
   ring now that it can be reached with the keyboard. */
.jb-nav-scrim {
  position: fixed; inset: 0; z-index: 997; pointer-events: none; opacity: 0; visibility: hidden;
  background: rgba(20, 20, 40, .22); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
  transition: opacity .3s ease, visibility .3s ease;
}
body.jb-menu-open .jb-nav-scrim { opacity: 1; visibility: visible; pointer-events: auto; }
html body.jb-menu-open :is(.floating-fb, .jb-helpbot, .floating-back-to-top):not(#_g1):not(#_g2) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
html body .hamburger:focus-visible { outline: 2px solid #0071e3 !important; outline-offset: 3px; border-radius: 10px; }
@media (min-width: 1100px) { .jb-nav-scrim { display: none; } }

/* Place links: two columns once there is room, with an odd last card centred
   instead of stranded on the left (three cards made a 2 + 1 on tablets). */
@media (min-width: 840px) {
  html body .jb-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .jb-places > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}

/* ═══ Homepage: booking first (2026-10-29) ════════════════════════════════
   The hero leads with Book a Repair and a tap-to-call button, then four short
   facts (.jb-trust) where the visitor counter used to be. The counter and the
   side projects moved to "Also from JbTecWiz" (.jb-also) at the end. */
html body .hero-buttons .jb-call { display: inline-flex !important; align-items: center; gap: 8px; }
html body .hero-buttons .jb-call .jb-glyph { width: 18px; height: 18px; flex: none; }
html body .jb-hero-more { margin: 18px 0 0 !important; text-align: center; }
html body .jb-hero-more a:not(#_g1) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  color: var(--a-blue, #0071e3) !important; -webkit-text-fill-color: currentColor !important; font: 500 17px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); text-decoration: none !important;
}
html body .jb-hero-more a:hover { text-decoration: underline !important; }
html body .jb-hero-more svg { width: 16px; height: 16px; transition: transform .25s ease; }
html body .jb-hero-more a:is(:hover, :focus-visible) svg { transform: translateX(4px); }

html body .jb-trust {
  list-style: none; margin: 34px auto 0 !important; padding: 0 !important; max-width: 1120px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
html body .jb-trust > li {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px; border-radius: 980px;
  font: 500 14px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 6px 18px rgba(0, 0, 0, .06);
}
html body .jb-trust > li[hidden] { display: none; }
html body .jb-trust > li::before { content: none !important; }
html body .jb-trust .jb-glyph { width: 16px; height: 16px; flex: none; color: var(--a-blue, #0071e3); }
html body .jb-trust a:not(#_g1) { display: inline-flex; align-items: center; gap: 6px; color: inherit !important; -webkit-text-fill-color: currentColor !important; text-decoration: none !important; }
html body .jb-trust a:hover { text-decoration: underline !important; }
html body .jb-trust__stars { color: #ff9f0a; letter-spacing: 1px; font-size: 13px; }
@media (max-width: 600px) {
  html body .jb-trust { gap: 8px; margin-top: 28px !important; }
  html body .jb-trust > li { padding: 7px 12px; font-size: 13px; }
}

/* Prices on the "What I Can Help With" cards. The price takes the free space,
   so the "Learn more" line sits straight under it. */
html body .card .jb-price {
  display: inline-block; margin: auto 0 0 !important; padding-top: 14px;
  font: 600 15px/1.35 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f;
}
html body .jb-price + .card-go:not(#_x):not(#_g1) { margin-top: 0 !important; padding-top: 8px; }

/* Review us on Google, beside Leave Feedback: a white .btn-secondary like All
   Feedback. It is kept out of the blue Google Maps button rule above. */
html body .jb-google-review { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
html body .jb-google-review .jb-glyph { width: 16px; height: 16px; flex: none; color: #ff9f0a; }

/* Also from JbTecWiz. */
html body .jb-also { margin-top: 5rem !important; text-align: center; }
html body .jb-also__title:not(#_g1):not(#_g2) {
  margin: 0 0 22px !important; font: 600 28px/1.2 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; letter-spacing: -0.02em !important;
  color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-transform: none !important;
}
html body .jb-also__title::before, html body .jb-also__title::after { content: none !important; }
html body .jb-also__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
html body .jb-also__links a:not(#_g1) {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px; border-radius: 980px;
  font: 500 15px/1.2 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important; text-decoration: none !important;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 6px 18px rgba(0, 0, 0, .06); transition: transform .25s ease, box-shadow .25s ease;
}
html body .jb-also__links a:hover { transform: translateY(-2px); box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 12px 26px rgba(0, 0, 0, .1); }
html body .jb-also__links .jb-glyph { width: 18px; height: 18px; color: #424245; }
html body .jb-also__links span { color: #c45500; font-size: 12px; font-weight: 600; }
html body .jb-also .live-telemetry { margin-top: 28px !important; }

/* Footer links on touch screens: each one at least 32px tall, so a thumb can't
   catch the neighbour (they were 18px, under the 24px minimum). */
@media (max-width: 834px) {
  html body .jb-footer__col { gap: 2px; }
  html body .jb-footer__col a:not(#_g1) { display: flex; align-items: center; min-height: 32px; font-size: 13px !important; }
  html body .jb-footer__col span:not(#_g1) { display: flex; align-items: center; min-height: 32px; }
}

/* At a Glance on phones: the small tiles sit two to a row, so the grid is half
   as tall. The big remote-support tile and the VPN tile still take a full row. */
@media (max-width: 600px) {
  html body .jb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html body :is(.jb-bento__tile--hero, .jb-bento__tile--wide) { grid-column: 1 / -1; }
  html body .jb-bento__tile:not(.jb-bento__tile--hero):not(.jb-bento__tile--wide) { padding: 16px 14px; border-radius: 20px; gap: 4px; }
  html body .jb-bento__tile:not(.jb-bento__tile--hero):not(.jb-bento__tile--wide) .jb-bento__big:not(#_g1) { font-size: 19px; }
  html body .jb-bento__tile:not(.jb-bento__tile--hero):not(.jb-bento__tile--wide) .jb-bento__cap:not(#_g1) { font-size: 13px; }
  html body .jb-bento__tile:not(.jb-bento__tile--hero):not(.jb-bento__tile--wide) .card-go:not(#_x) { font-size: 13px !important; padding-top: 8px; }
  html body .jb-bento__tile:not(.jb-bento__tile--hero):not(.jb-bento__tile--wide) > .jb-glyph { width: 24px; height: 24px; margin-bottom: 4px; }
}

/* ═══ Nav: Software flyout and the Book a Repair button (2026-10-30) ═══════
   nav.html groups Software Store, Apps, Web Apps, Downloads and Wallpapers
   behind one Software button. On the desktop bar that button opens a glass
   flyout (the popover attribute does the opening, closing, Esc and click-away).
   In the phone and tablet drawer the button hides and the links show as
   ordinary rows. Book a Repair is the bar's one coloured button, the way
   Apple's bar ends in Buy. */
html body .nav-group__btn { display: none; }
html body .nav-flyout a span { display: none; }
@media (max-width: 1099px) {
  html body .nav-group, html body .nav-flyout { display: contents !important; }
  html body .nav-links .nav-cta { margin-top: 10px !important; }
  html body .nav-links .nav-cta a:not(#_g1):not(#_g2) {
    display: flex !important; justify-content: center; background: #0071e3 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
    border-radius: 980px !important; opacity: 1 !important; font-weight: 600 !important;
  }
}
@media (min-width: 1100px) {
  html body .nav-links > li.nav-group { position: relative; }
  html body .nav-group__btn:not(#_g1) {
    display: inline-flex; align-items: center; gap: 2px; margin: 10px 1px; padding: 0 8px 0 12px; height: 30px;
    border: 0; border-radius: 980px; background: transparent; cursor: pointer;
    font: 400 12px/30px var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: var(--a-text, #1d1d1f); opacity: .8;
    transition: background .2s, opacity .2s;
  }
  html body .nav-group__btn svg { width: 14px; height: 14px; transition: transform .25s ease; }
  html body .nav-group__btn:is(:hover, :focus-visible) { opacity: 1; background: rgba(255, 255, 255, .7); box-shadow: var(--g-rim), 0 2px 8px rgba(0, 0, 0, .06); }
  html body .nav-group__btn:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
  html body .nav-group:has(.nav-flyout:popover-open) .nav-group__btn svg { transform: rotate(180deg); }
  /* On a Software page the button is marked, like the link of the page you're on. */
  html body .nav-group:has(a.active) .nav-group__btn { opacity: 1; background: rgba(255, 255, 255, .85); box-shadow: var(--g-rim), 0 2px 10px rgba(0, 0, 0, .08); }

  html body .nav-flyout:popover-open {
    position: fixed; inset: auto; top: 68px; left: 50%; translate: -50% 0; margin: 0;
    display: grid; gap: 2px; width: 330px; padding: 8px; color: #1d1d1f;
    border: 1px solid rgba(255, 255, 255, .85); border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(190%) blur(24px); backdrop-filter: saturate(190%) blur(24px);
    box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 24px 60px rgba(20, 30, 60, .18), 0 2px 8px rgba(0, 0, 0, .05);
    opacity: 1; transform: none;
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), display .25s allow-discrete, overlay .25s allow-discrete;
  }
  @starting-style { html body .nav-flyout:popover-open { opacity: 0; transform: translateY(-6px) scale(.98); } }
  /* Where the browser can anchor it, the flyout opens right under the button. */
  @supports (anchor-name: --a) {
    html body .nav-group__btn { anchor-name: --jb-software; }
    html body .nav-flyout:popover-open { position-anchor: --jb-software; top: calc(anchor(bottom) + 12px); left: anchor(center); }
  }
  html body .nav-flyout a:not(#_g1):not(#_g2) {
    display: grid !important; gap: 1px; margin: 0 !important; padding: 10px 14px !important; border-radius: 14px !important;
    font: 600 15px/1.25 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important; white-space: normal !important; text-decoration: none !important; background: none !important; box-shadow: none !important;
  }
  html body .nav-flyout a:not(#_g1):not(#_g2):is(:hover, :focus-visible) { background: rgba(0, 113, 227, .08) !important; }
  html body .nav-flyout a.active:not(#_g1):not(#_g2) { background: rgba(0, 0, 0, .05) !important; }
  html body .nav-flyout a span { display: block; font: 400 12.5px/1.35 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73; }

  html body .nav-links .nav-cta a:not(#_g1):not(#_g2) {
    margin-left: 8px !important; padding: 0 14px !important; background: #0071e3 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
    opacity: 1 !important; font-weight: 500 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 12px rgba(0, 113, 227, .3) !important;
  }
  html body .nav-links .nav-cta a:not(#_g1):not(#_g2):hover { background: #0077ed !important; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html body .nav-flyout:popover-open { transition: none; }
}

/* ═══ Reviews: a row of quote cards (2026-10-30) ═══════════════════════════
   Built by renderFeedbackCarousel() in js/main.js. Three cards a row on a
   computer, two on a tablet, most of one on a phone with the next peeking in;
   swipe, scroll or use the arrows, and each card snaps into place. */
html body #feedbackGrid { display: block !important; }
html body .jb-reviews { position: relative; }
html body .jb-reviews__score:not([hidden]) {
  display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0 !important;
  font: 600 15px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f;
}
html body .jb-reviews__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 4px;
  padding: 6px 4px 26px; margin: 0 -4px; scrollbar-width: none;
}
html body .jb-reviews__track::-webkit-scrollbar { display: none; }
html body .jb-reviews__track:focus-visible { outline: 3px solid rgba(0, 113, 227, .45); outline-offset: 4px; border-radius: 28px; }
@media (max-width: 960px) { html body .jb-reviews__track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { html body .jb-reviews__track { grid-auto-columns: 86%; gap: 14px; } }

html body .jb-review {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; margin: 0; min-width: 0;
  padding: 26px 26px 20px; border-radius: 28px; text-align: left;
  background: rgba(255, 255, 255, .66); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 10px 30px rgba(0, 0, 0, .06);
}
html body .jb-review__stars { color: #ff9f0a; font-size: 15px; letter-spacing: 2px; }
html body .jb-review__stars span { color: #d2d2d7; }
html body .jb-review__quote:not(#_g1) {
  flex: 1; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  font: 500 19px/1.45 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif) !important; letter-spacing: -0.012em;
  color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important; font-style: normal !important;
}
html body .jb-review__quote::before, html body .jb-review__quote::after { content: none !important; }
html body .jb-review__who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .07); }
html body .jb-review__avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font: 600 16px/1 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #fff;
}
html body .jb-review__avatar--0:not(#_g1) { background: linear-gradient(135deg, #5ac8fa, #0071e3) !important; }
html body .jb-review__avatar--1:not(#_g1) { background: linear-gradient(135deg, #a78bfa, #6e4cff) !important; }
html body .jb-review__avatar--2:not(#_g1) { background: linear-gradient(135deg, #ff9f6e, #e0457b) !important; }
html body .jb-review__avatar--3:not(#_g1) { background: linear-gradient(135deg, #6fdc8c, #1f9d55) !important; }
html body .jb-review__avatar--4:not(#_g1) { background: linear-gradient(135deg, #ffd36e, #ff9500) !important; }
html body .jb-review__avatar--5:not(#_g1) { background: linear-gradient(135deg, #8e8e93, #48484a) !important; }
html body .jb-review__name { flex: 1; min-width: 0; display: grid; gap: 1px; }
html body .jb-review__name b { font: 600 15px/1.25 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f; }
html body .jb-review__name small { font: 400 13px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html body .jb-reviews__controls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
html body .jb-reviews__controls[hidden] { display: none; }
html body .jb-reviews__arrow:not(#_g1) {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(0, 0, 0, .06); color: #1d1d1f; transition: background .2s, opacity .2s;
}
html body .jb-reviews__arrow svg { width: 22px; height: 22px; }
html body .jb-reviews__arrow:not(#_g1):hover:not(:disabled) { background: rgba(0, 0, 0, .1); }
html body .jb-reviews__arrow:not(#_g1):disabled { opacity: .35; cursor: default; }
html body .jb-reviews__arrow:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
@media (max-width: 600px) { html body .jb-reviews__controls { display: none; } }
html body .jb-reviews__empty { text-align: center; color: #6e6e73; padding: 2rem 0; }

/* Loading placeholders: plain grey bars where the words will be. No shimmer —
   looping motion stays off across the site. */
html body .jb-skel { display: block; height: 14px; width: 100%; border-radius: 7px; background: rgba(0, 0, 0, .07); }
html body .jb-skel-card { gap: 12px; min-height: 230px; }
html body .jb-skel--who { margin-top: auto; height: 40px; width: 55%; border-radius: 20px; }
html body .jb-review__avatar:not(#_g1):not(#_g2) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* Apple's system fill: a grey that reads on both the light and the dark page. */
html body .jb-reviews__arrow:not(#_g1):not(#_g2) { background: rgba(120, 120, 128, .16); }
html body .jb-reviews__arrow:not(#_g1):not(#_g2):hover:not(:disabled) { background: rgba(120, 120, 128, .26); }

/* ═══ Contact: one grouped list, like iOS Settings (2026-10-30) ════════════
   contact.html "How to Reach Me". Each row is a coloured app-style tile, a
   title, a grey detail line and a chevron; the address row is not a link. */
html body .jb-reach-wrap { max-width: 720px !important; }
html body .jb-reach-head { text-align: center; margin-bottom: 26px; }
html body .jb-reach-head h2 { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 10px !important; }
html body .jb-reach-head p { margin: 0 auto; max-width: 52ch; color: #6e6e73; font-size: 17px; line-height: 1.5; }
html body .jb-reach {
  list-style: none; margin: 0 !important; padding: 0 !important; overflow: hidden; border-radius: 22px;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--g-rim, inset 0 1px 0 #fff), 0 10px 30px rgba(0, 0, 0, .06);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
html body .jb-reach > li { margin: 0 !important; padding: 0 !important; position: relative; }
html body .jb-reach > li::before { content: none !important; }
/* Hairlines between rows start after the icon, the way iOS draws them. */
html body .jb-reach > li + li::after { content: ''; position: absolute; top: 0; left: 70px; right: 0; height: 1px; background: rgba(0, 0, 0, .08); }
html body .jb-reach > li > :is(a, div):not(#_g1) {
  display: flex !important; align-items: center; gap: 16px; min-height: 68px; padding: 12px 18px !important; margin: 0 !important;
  color: #1d1d1f !important; -webkit-text-fill-color: currentColor !important; text-decoration: none !important; background: none !important; border: 0 !important;
  transition: background .15s ease;
}
html body .jb-reach > li > a:not(#_g1):hover { background: rgba(0, 0, 0, .035) !important; }
html body .jb-reach > li > a:not(#_g1):active { background: rgba(0, 0, 0, .07) !important; }
html body .jb-reach > li > a:focus-visible { outline: 3px solid rgba(0, 113, 227, .45); outline-offset: -3px; }
html body .jb-reach__icon:not(#_g1) {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: #fff !important;
}
html body .jb-reach__icon :is(svg, .jb-glyph) { width: 20px; height: 20px; color: #fff; fill: currentColor; }
html body .jb-reach__icon--phone:not(#_g1) { background: linear-gradient(180deg, #5fe07f, #28c840) !important; }
html body .jb-reach__icon--whatsapp:not(#_g1) { background: linear-gradient(180deg, #3ee077, #20b35a) !important; }
html body .jb-reach__icon--mail:not(#_g1) { background: linear-gradient(180deg, #4cb0ff, #0a7cff) !important; }
html body .jb-reach__icon--messenger:not(#_g1) { background: linear-gradient(180deg, #a06bff, #0a7cff) !important; }
html body .jb-reach__icon--place:not(#_g1) { background: linear-gradient(180deg, #ff6b5f, #ff3b30) !important; }
html body .jb-reach__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
html body .jb-reach__text b { font: 600 17px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); }
html body .jb-reach__text > span { font: 400 14px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73; }
html body .jb-reach__chev { flex: none; width: 22px; height: 22px; color: #c7c7cc; }
@media (max-width: 600px) {
  html body .jb-reach > li > :is(a, div):not(#_g1) { gap: 13px; padding: 11px 14px !important; }
  html body .jb-reach > li + li::after { left: 63px; }
  html body .jb-reach__text b { font-size: 16px; }
  html body .jb-reach__text > span { font-size: 13px; }
}

/* ═══ Type (2026-10-30) ═════════════════════════════════════════════════════
   Pages load Inter with its optical-size axis (opsz 14–32), so large headlines
   switch to Inter's Display shapes by themselves while body text keeps the
   Text ones; Apple devices use San Francisco first (--a-font). Until Inter has
   downloaded, Windows shows Arial stretched to Inter's measurements, so the
   words don't jump when the real font arrives. */
@font-face {
  font-family: 'Inter Fallback'; src: local('Arial');
  ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%;
}
html body { font-optical-sizing: auto; }
/* Numbers that sit in rows and stats line up and don't wobble as they change. */
html body :is(.loc-stat__value, .telemetry-value, .jb-bento__big, .apps-stat b, .wa-stat b, .sc-stat b, .wp-stat__num) { font-variant-numeric: tabular-nums; }

/* Buttons give a little as you press them, then spring back. */
html body :is(.btn, .ss-btn, .wa-cta, .apps-cta, .play-btn, .download-btn, .primary-cta, .secondary-cta, .paypal-service-btn, .nav-cta a, .nav-group__btn, .jb-reviews__arrow, .jb-also__links a, .feedback-like, .cyber-tab, .setup-tab) {
  transition-property: transform, background, background-color, box-shadow, opacity, color, border-color;
}
html body :is(.btn, .ss-btn, .wa-cta, .apps-cta, .play-btn, .download-btn, .primary-cta, .secondary-cta, .paypal-service-btn, .nav-cta a, .nav-group__btn, .jb-reviews__arrow, .jb-also__links a, .feedback-like, .cyber-tab, .setup-tab):not(:disabled):active {
  transform: scale(.97) !important; transition-duration: .08s;
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.btn, .ss-btn, .wa-cta, .apps-cta, .play-btn, .download-btn, .primary-cta, .secondary-cta, .paypal-service-btn, .nav-cta a, .nav-group__btn, .jb-reviews__arrow, .jb-also__links a, .feedback-like, .cyber-tab, .setup-tab):active { transform: none !important; }
}

/* ═══ Book a Repair, one step at a time (2026-10-30) ════════════════════════
   js/book-steps.js shows one .jb-step at a time with a progress bar, Back and
   Continue, and a summary to check on the last step. Without the script every
   step shows at once, as before. */
html body .jb-form.is-stepped [hidden]:not(#_h1):not(#_h2):not(#_h3):not(#_h4):not(#_h5):not(#_h6) { display: none !important; }
html body .jb-steps__progress { margin: 0 0 22px; }
html body .jb-steps__count:not(#_g1) { margin: 0 0 10px !important; font: 600 14px/1.3 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73 !important; }
html body .jb-steps__bar { height: 6px; border-radius: 3px; background: rgba(120, 120, 128, .16); overflow: hidden; }
html body .jb-steps__bar span { display: block; height: 100%; width: 25%; border-radius: inherit; background: linear-gradient(90deg, #0071e3, #6e4cff); transition: width .35s cubic-bezier(.2, .8, .2, 1); }
html body .jb-step:focus { outline: none; }
html body .jb-form.is-stepped .jb-step > * + * { margin-top: 22px !important; }
html body .jb-steps__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
html body .jb-steps__nav .jb-steps__next, html body .jb-steps__nav .jb-form__submit { margin-left: auto !important; }
html body .jb-form.is-stepped .jb-form__submit { margin-top: 0 !important; width: auto !important; }
html body .jb-steps__summary:not([hidden]) {
  display: grid; margin: 22px 0 0 !important; padding: 0 !important; overflow: hidden; border-radius: 16px;
  background: rgba(120, 120, 128, .08); border: 1px solid rgba(0, 0, 0, .06);
}
html body .jb-steps__summary > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 12px 16px; }
html body .jb-steps__summary > div + div { border-top: 1px solid rgba(0, 0, 0, .06); }
html body .jb-steps__summary dt { margin: 0; font: 500 14px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #6e6e73; }
html body .jb-steps__summary dd { margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font: 400 15px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #1d1d1f; }
html body .jb-steps__summary dd span { white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html body .jb-steps__edit:not(#_g1) { flex: none; border: 0; background: none; padding: 0; cursor: pointer; font: 500 14px/1.4 var(--a-font, Inter, -apple-system, 'Segoe UI', sans-serif); color: #0066cc; }
html body .jb-steps__edit:hover { text-decoration: underline; }
@media (max-width: 600px) { html body .jb-steps__summary > div { grid-template-columns: 78px minmax(0, 1fr); } }

/* The homepage's story band ("How I work") opens with Jamie's photo. */
html body .jb-story__avatar { display: block; width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 12px 40px rgba(90, 200, 250, .25); }
html body .jb-story__link:not(#_g1) { color: #5ac8fa !important; -webkit-text-fill-color: currentColor !important; text-decoration: none !important; }
html body .jb-story__link:not(#_g1):hover { text-decoration: underline !important; }

/* ═══ Live touches (2026-10-30) ═════════════════════════════════════════════
   "Available now" status (js/apple-theme.js fills [data-open-status]). */
html body [data-open-status] .jb-open-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #aeaeb2; }
html body [data-open-status].is-open .jb-open-dot { background: #30d158; box-shadow: 0 0 0 3px rgba(48, 209, 88, .2); }
html body .jb-trust > li[data-open-status] .jb-glyph { display: none; }

/* The hero illustrations lean a little towards the mouse (desktop only, and not
   for anyone who asks for less motion; js/apple-theme.js sets the angles). */
html body .jb-hero-art img { transform: perspective(1600px) rotateX(var(--jb-tilt-x, 0deg)) rotateY(var(--jb-tilt-y, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }

/* Cards that open a page grow into it: the card's title flies into the new
   page's heading and the card into its hero (cross-document view transitions).
   Every page names its own hero and heading; apple-theme.js takes those names
   off again whenever the link that was followed wasn't a card, so ordinary
   links keep the plain cross-fade. */
html body .hero { view-transition-name: jb-card; }
html body .hero h1 { view-transition-name: jb-title; }
::view-transition-group(jb-card), ::view-transition-group(jb-title) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(jb-title), ::view-transition-new(jb-title) { height: 100%; object-fit: contain; }
html body .loc-badge[data-open-status] { display: inline-flex; align-items: center; gap: 8px; }
/* The old card's own picture fades out early while its shape carries on growing, so its words never smear across
   the new hero; the new hero fades in a beat later. */
::view-transition-old(jb-card) { animation-duration: .18s; }
::view-transition-new(jb-card) { animation-delay: .05s; animation-duration: .22s; }
::view-transition-old(jb-title) { animation-duration: .22s; }