:root {
  --paper: #f4f6fa;
  --ink: #171b24;
  --body: #4d5665;
  --muted: #596273;
  --line: #d8dee8;
  --glass: linear-gradient(145deg, #ffffffed, #ffffffc7);
  --glass-edge: 1px solid #ffffffed;
  --glass-shadow: inset 0 1px 0 #fff, 0 2px 5px #24344d06, 0 20px 60px -24px #34476833;
}
body {
  display: flow-root;
  background: radial-gradient(ellipse 900px 650px at 80% 160px, #ccdcf1a6, transparent), radial-gradient(ellipse 650px 750px at 5% 600px, #e3e7f6bf, transparent), var(--paper);
  -webkit-font-smoothing: antialiased;
}
.site-header {
  position: relative;
  z-index: 2;
  height: 72px;
  margin-top: 20px;
  padding: 12px 18px 12px 24px;
  border: var(--glass-edge);
  border-radius: 24px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
.brand {font-weight: 600; letter-spacing: -.8px}
.brand svg {border-radius: 10px; background: linear-gradient(155deg, #5c6678, #222a38); box-shadow: inset 0 1px 1px #ffffff73, 0 3px 8px #17203324}
.button {border-radius: 999px; transition: background .18s, box-shadow .18s}
.primary {background: linear-gradient(165deg, #38475e, #1c2636); box-shadow: inset 0 1px 1px #ffffff45, 0 5px 12px #25344c20; border: 1px solid #243149}
.primary:hover {background: linear-gradient(165deg, #455974, #283b56); box-shadow: inset 0 1px 1px #ffffff45, 0 7px 18px #25344c30}
.secondary {background: #ffffffb3; border-color: #ffffff; box-shadow: inset 0 1px 0 #fff, 0 2px 8px #24344d12}
.secondary:hover {background: #fff}
.hero {padding-top: 88px; padding-bottom: 100px; gap: 60px}
.hero h1, .compare-hero h1 {font-weight: 600; color: #182333}
.hero-copy>.eyebrow {width: fit-content; padding: 9px 13px; background: #ffffffb8; border: 1px solid #fff; border-radius: 999px; font-size: 10px; letter-spacing: 1px; box-shadow: 0 3px 12px #34476808}
.product-stage {
  padding: 0 22px 23px;
  border: 1px solid #ffffffb3;
  border-radius: 30px;
  background: radial-gradient(ellipse at 95% 10%, #d4e8ff 0, transparent 48%), radial-gradient(ellipse at 0 80%, #506380 0, transparent 65%), linear-gradient(145deg, #9bafca, #34445e);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 5px #ffffff12, 0 32px 65px -28px #24334d66;
}
.desktop-bar {margin-inline: -22px; padding-inline: 22px; height: 44px; border-radius: 30px 30px 0 0; color: #243149; background: #ffffff4d; border-bottom: 1px solid #ffffff47}
.desktop-muted {color: #3b4d66}
.menubar-gauge {background: #ffffff85; border: 1px solid #ffffff8c; border-radius: 8px}
.app-window {margin-top: 20px; background: #f8faffed; border: 1px solid #ffffffed; border-radius: 20px; box-shadow: inset 0 1px 0 #fff, 0 18px 36px #16273e40; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px)}
.app-toolbar {background: #ffffff6b; padding-block: 15px; border-bottom-color: #d2dbe480}
.app-metrics strong {font-weight: 550; font-size: 21px}
.demo-filter>label {background: #dee5ef80; padding-block: 8px}
.demo-filter>label:first-of-type {border-radius: 9px 0 0 9px}
.demo-filter>label:last-of-type {border-radius: 0 9px 9px 0}
.demo-filter>input:checked+label {border-radius: 9px; border-color: #fff; box-shadow: 0 2px 5px #1b315421}
.app-footer {background: #ffffff4d}
.product-stage figcaption {color: #edf3ff; font-size: 11px}
.trust-strip {border: var(--glass-edge); border-radius: 18px; background: #ffffff7a; box-shadow: inset 0 1px 0 #fff}
.how-section {background: #e6ebf466; border-block: 1px solid #ffffff}
.step-number {display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #ffffffb3; border: 1px solid #fff; box-shadow: 0 3px 8px #3447680a}
.visual-panel, .verdict, .compare-card, .release-section {background: var(--glass); border: var(--glass-edge); border-radius: 26px; box-shadow: var(--glass-shadow)}
.visual-panel {background: linear-gradient(140deg, #fffffff5, #e8eff9e8)}
.review-session {border: 1px solid #fff; border-radius: 14px; background: #ffffffb3; box-shadow: 0 3px 10px #24344d08}
.privacy-section {background: radial-gradient(ellipse at 100% 0, #3e506c, transparent 65%), #1a2332; border-block: 1px solid #ffffff50}
.release-section {background: radial-gradient(ellipse at 90% 0, #dceaffb3, transparent 65%), var(--glass)}
.release-mark {border-radius: 20px; background: linear-gradient(145deg, #63748c, #263246); box-shadow: inset 0 1px 2px #ffffff80, 0 12px 24px #1b2b432b}
.compare-card {transition: border-color .18s, box-shadow .18s}
.compare-card:hover {border-color: #b6c6df; box-shadow: inset 0 1px 0 #fff, 0 20px 40px -20px #34476840}
.table-scroll {border: 1px solid #fff; border-radius: 22px; background: #ffffffd9; box-shadow: var(--glass-shadow)}
thead th {background: #e7edf6b3}
caption {background: #ffffff80}
@media(max-width:1000px) {
  .hero {gap: 34px}
  .site-header nav {gap: 22px}
}
@media(max-width:760px) {
  .site-header {height: 66px; margin-top: 12px; padding: 10px 12px 10px 16px; border-radius: 21px; gap: 12px}
  .site-header nav {gap: 14px}
  .hero {padding-block: 44px 55px; gap: 40px}
  .hero-copy>.eyebrow {margin-inline: auto; font-size: 9px; letter-spacing: .6px}
  .product-stage {padding-inline: 15px; border-radius: 26px}
  .desktop-bar {margin-inline: -15px; padding-inline: 15px; border-radius: 26px 26px 0 0}
  .app-window {border-radius: 16px}
  .visual-panel, .verdict, .compare-card, .release-section {border-radius: 22px}
  .steps article {padding-left: 48px}
  .step-number {top: 0}
}
@media(prefers-reduced-transparency:reduce) {
  .site-header, .app-window, .trust-strip, .visual-panel, .verdict, .compare-card, .release-section, .table-scroll {background: #f9fbfe; -webkit-backdrop-filter: none; backdrop-filter: none}
}
@media(prefers-reduced-motion:reduce) {
  .button, .compare-card {transition: none}
}
@media(forced-colors:active) {
  .site-header, .app-window, .trust-strip, .visual-panel, .verdict, .compare-card, .release-section, .table-scroll, .button {border: 1px solid CanvasText; box-shadow: none}
}

.free-note {font-size: 14px; font-weight: 600; margin-top: 20px; color: var(--ink)}
.hero .free-note+.fine {margin-top: 7px}
.release-section .download-actions {justify-content: center}
.availability-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; text-align: left}
.availability-grid article {padding: 24px; background: #ffffffb3; border: 1px solid #fff; border-radius: 18px}
.availability-grid h3 {font-size: 18px; margin-bottom: 10px}
.availability-grid p {font-size: 14px; color: var(--body)}
@media(max-width:760px) {.availability-grid {grid-template-columns: 1fr}}