/* Light homepage: hand fixes on top of the generated light.css (scripts/light-theme.mjs). Everything here is under html.lt.
   Apple light: white and #f5f5f7 surfaces, #1d1d1f text, #6e6e73 secondary, #d2d2d7 hairlines, a frosted white bar. */
html.lt { color-scheme: light; }
html.lt body { background: #ffffff; }
/* the bar: frosted white, as Apple's */
html.lt header.nav { background: rgba(251, 251, 253, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08); }
@media (max-width: 900px) { html.lt header.nav { background: rgba(251, 251, 253, .92); } }
/* the logo is drawn with fill attributes, so recolour it here */
html.lt .logo-el path { fill: #1d1d1f; }
/* client logos are white artwork: flip them to near black */
html.lt .lw-c img, html.lt .sk-sa img { filter: invert(1) brightness(.12); }
/* the star sky is a night effect: off in light */
html.lt canvas.sky { display: none; }
/* the silk textures render greys for a dark page: inverted they become a soft light silk */
html.lt canvas.ps-cv { filter: invert(1) contrast(.55) brightness(1.18); }
/* the verified badge keeps its white tick: the tick sits on the blue, not on the page */
html.lt .vf-b { fill: #0095f6; }
html.lt .vf-c { stroke: #ffffff; }
/* orange accents, sparingly (Ajay, 23 Oct 2026: "minimal but classy"): the accent slot (status dots, ticks, markers) is
   orange through light.css; on top of that, the market map's own dot and Test's winner */
html.lt .hw .pm-me > i { background: #ff6a1a; }
html.lt .hw .pm-me > b { box-shadow: inset 0 0 0 1px rgba(255, 106, 26, .6); }
html.lt .ab-ring { box-shadow: inset 0 0 0 1px #ff6a1a; }
html.lt .ab-wk { background: #ff6a1a; color: #ffffff; }
html.lt .ab-eb { background: #ff6a1a; }
/* the header menus: Apple's white panel, hairline and soft shadow */
@media (min-width: 901px) {
  html.lt .mm { --mm-panel: #ffffff; --mm-hov: rgba(0, 0, 0, .04); }
  html.lt .mm-p { background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 12px 32px -8px rgba(0, 0, 0, .16); }
}
/* the main call button: solid near black, a faint white glide and a quiet grey edge (no metallic sweep) */
html.lt .cta-bar, html.lt .cta-bar:hover, html.lt .cta-bar:active, html.lt .cta-wrap:hover .cta-bar { background: #1d1d1f; color: #ffffff; }
html.lt .cta-bar::before { background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .03) 44%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .03) 56%, transparent 62%) 100% 0 / 300% 100% no-repeat; }
html.lt .cta-bar::after { background: conic-gradient(from var(--cta-a), #1d1d1f, #6e6e73 90deg, #1d1d1f 180deg, #48484a 270deg, #1d1d1f); }
/* review card logos: white on dark, near black on light */
html.lt .ts-lgo { filter: brightness(0); opacity: .85; }

/* review card banners: the photo banner keeps its white logo in light mode; the plain banner turns light grey */
html.lt .ts-ban { background: #ededf0; }
html.lt .ts-ban:has(.ts-bgi) .ts-bl { filter: brightness(0) invert(1); }
html.lt .ts-ban:not(:has(.ts-bgi)) .ts-bl { filter: brightness(0); opacity: .85; }
html.lt .ts-bt { color: #1d1d1f; }

/* Slack @mention in light mode */
html.lt .sk-at { background: rgba(18, 100, 163, .12); color: #1264a3; }
/* proof section: the phone stays dark and the active pill and rail dark in light mode (the panel is one grey, its text follows the theme) */
html.lt .pt-ph { background: #0b0b0b; } html.lt .pt-isl { background: #0b0b0b; }
html.lt .pt-i.on .pt-pl { background: #1d1d1f; color: #fff; }
html.lt .pt-rl i { background: #1d1d1f; }
html.lt .ts-ban:has(.ts-bgi)::before { background: rgba(11, 11, 11, .55); }