/* The page keeps its palette; SDK surface text follows its selected glass tint. */
body.has-glass-app { overflow: hidden; }
#site-app, .site-scene { height: 100dvh; width: 100%; }
.site-scene { overflow: hidden; --lg-foreground: var(--ink); --site-control-height: 48px; }
.site-scene [data-glass-material] {
  --ink: var(--glass-ink, #202644);
  --muted: var(--glass-muted, #69708a);
  --accent: var(--glass-accent, #5557dc);
  --lg-foreground: var(--glass-ink, #202644);
  --lg-control-highlight: var(--glass-focus, rgb(255 255 255 / .36));
  color: var(--glass-ink, #202644);
}
.site-scroll {
  background: var(--page);
  overflow-y: auto;
  overflow-x: clip;
  scroll-padding-block-start: 124px;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  outline: none;
}
.site-page-content { position: relative; isolation: isolate; padding-top: 106px; min-height: 100%; }
.site-page-content > .page-atmosphere { top: 0; }
.site-scene > .site-header {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  margin-top: 0;
  z-index: 18;
  min-height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header::before, .site-header::after { content: none; }
.site-nav-shell { display: flex; flex: 1; min-width: 0; }
.site-section-tabs { width: 100%; min-width: 0; flex: 1; }
.site-section-tabs > .lg-tabs-list {
  width: 100%;
  min-height: var(--site-control-height);
  height: var(--site-control-height);
  padding: 4px;
  gap: 0;
  border-radius: 100px;
  background: var(--glass-fallback, #f4f6fce8);
  box-shadow: 0 8px 28px #18254c16;
}
.site-section-tabs .lg-tab {
  height: 40px;
  min-height: 40px;
  flex: 1;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
}
.site-section-tabs:not(.is-compact) .lg-tab:first-of-type {
  flex: 0 0 auto;
  padding-inline: 10px;
}
.site-section-tabs .lg-tab-indicator {
  background: var(--glass-focus, rgb(255 255 255 / .36));
}
.site-nav-surface {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  gap: 20px;
  padding: 0 14px;
  border-radius: 100px;
  background: var(--glass-fallback, #f4f6fce8);
  box-shadow: 0 8px 28px #18254c16;
}
.mobile-brand-surface { display: none; }
.site-header .brand { padding: 0; background: transparent; min-height: 40px; }
.site-header .brand-mark img { width: 32px; height: 32px; }
.site-header nav { gap: 20px; }
.site-header nav > a { padding: 0; }
.site-nav-surface nav > a { min-height: 44px; }
.site-header .lg-menu-anchor { flex: 0 0 auto; height: 48px; }
.site-header .sdk-nav-download {
  flex: 0 0 auto;
  height: 48px;
  min-height: 48px;
  padding-inline: 16px;
  gap: 12px;
  font-size: 13px;
  font-weight: 650;
  background-color: var(--glass-fallback, #f4f6fce8);
  color: var(--glass-ink, #202644);
  --lg-foreground: var(--glass-ink, #202644);
}
.site-header .sdk-nav-download .icon { width: 18px; height: 18px; }
.appearance-trigger {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--glass-ink, #202644);
  background-color: var(--glass-fallback, #f4f6fce8);
  cursor: pointer;
}
.material-symbol { display: inline-flex; width: 24px; height: 24px; flex-shrink: 0; }
.material-symbol svg { fill: currentColor; }
.material-path-icon { fill: currentColor; stroke: none; }
.appearance-menu {
  width: 200px;
  min-width: 200px;
  max-width: calc(100vw - 24px);
  padding: 4px;
  color: var(--glass-ink, #202644);
  background: var(--glass-fallback, #eff2fc);
  box-shadow: none;
  --lg-foreground: var(--glass-ink, #202644);
}
.site-scene .appearance-menu {
  --lg-control-highlight: color-mix(in oklab, currentColor 8%, transparent);
  --lg-menu-highlight: var(--lg-control-highlight);
}
/* The SDK draws the moving glass during a handoff. A CSS fill or shadow on
   the incoming popup would reveal its final box before that morph finishes. */
.site-scene .appearance-menu:is([data-site-glass-painted], [data-glass-morph]) { background: transparent; }
.appearance-menu .appearance-option {
  min-height: 28px;
  padding: 0;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}
.appearance-row {
  margin: 0;
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  line-height: 20px;
}
.appearance-row > .icon { margin-left: auto; width: 14px; height: 14px; }
.appearance-menu .material-symbol, .appearance-menu .material-symbol svg { width: 16px; height: 16px; }
.preference-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 8px; }
.preference-heading > span { white-space: nowrap; }
.preference-heading > .icon { width: 14px; height: 14px; }
.appearance-menu .preference-choice { display: flex; align-items: center; gap: 8px; padding-block: 4px; line-height: 20px; white-space: nowrap; }
.preference-choice > .icon { width: 14px; height: 14px; margin-left: auto; }
.appearance-menu .appearance-option {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.appearance-menu .appearance-option:is([data-highlighted], [data-popup-open], [aria-expanded="true"], :focus, :active) {
  background: var(--lg-menu-highlight);
  color: inherit;
}
.preference-current { font-size: 11px; opacity: .65; text-align: end; white-space: nowrap; }
.appearance-menu.appearance-root-menu { width: 220px; min-width: 220px; }
.appearance-menu.preference-submenu { width: 140px; min-width: 140px; }
.appearance-menu.material-submenu { width: 128px; min-width: 128px; }
.appearance-menu.theme-submenu { width: 144px; min-width: 144px; }
.appearance-menu.blur-submenu,
.appearance-menu.refraction-submenu { width: 150px; min-width: 150px; }
.appearance-menu.pages-submenu { width: 144px; min-width: 144px; }
.appearance-menu [role="separator"] { height: 1px; margin: 5px 8px; background: currentColor; opacity: .12; }
.site-material-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.appearance-menu .material-switch { width: 54px; min-width: 54px; height: 24px; min-height: 24px; padding: 2px; margin: 0; background: transparent; }
.tint-option-heading { gap: 8px; }
.tint-current { margin-left: auto; font-size: 11px; opacity: .75; }
.tint-option-heading > .icon { margin-left: 0; width: 14px; height: 14px; }
.tint-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; }
.neutral-tint-dot { border: 1px solid currentColor; opacity: .5; }
.tint-menu { max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden; }
.appearance-menu, .appearance-menu *, .appearance-trigger, .sdk-download-button, .sdk-nav-download,
.site-section-tabs, .site-section-tabs *, .site-header .brand {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.appearance-trigger *, .sdk-download-button *, .sdk-nav-download *, .site-header .brand * { -webkit-user-drag: none; }
.site-scene .sdk-download-button {
  box-sizing: border-box;
  height: var(--site-control-height);
  min-height: var(--site-control-height);
  padding-block: 0;
  box-shadow: none;
  transition: none;
}
.site-scene .sdk-download-button:hover, .site-scene .sdk-nav-download:hover { transform: none; }
.compact-navigation { display: none; }
.hero-backdrop, .feature-grid-backdrop { background: var(--page); overflow: hidden; }
.hero-backdrop .shared-page-atmosphere, .feature-grid-backdrop .shared-page-atmosphere {
  right: auto;
  z-index: 0;
  pointer-events: none;
}
.hero-foreground { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: inherit; gap: inherit; align-items: inherit; min-width: 0; }
.sdk-hero-scene .sdk-download-button { position: relative; margin: 0; min-height: var(--site-control-height); color: var(--glass-ink, #202644); --lg-foreground: var(--glass-ink, #202644); background: var(--glass-fallback, #f4f6fce8); }
.sdk-hero-scene .sdk-download-button[data-site-glass-painted] {
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sdk-feature-grid { position: relative; isolation: isolate; }
.sdk-feature-card {
  position: relative;
  z-index: 1;
  background: var(--glass-fallback, #f4f6fce8);
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.sdk-feature-card:hover { transform: none; }
.sdk-feature-card * { -webkit-user-drag: none; }
.sdk-feature-grid .sdk-feature-card[data-site-glass-painted] {
  background-color: transparent;
  /* Keep the SDK's pointer glow; its interactive rule supplies the image. */
}
.site-scene .sdk-preview-scene { overflow: visible; }
.preview-backdrop { border-radius: 44px; background: radial-gradient(ellipse at 65% 35%, #b7cafa, #e8e9f9 65%, var(--page)); }
.preview-backdrop .visual-grid, .preview-backdrop .glass-orbit { z-index: 0; }
.site-scene .sdk-preview-window { transform: none; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sdk-preview-scene .sdk-preview-window:not([data-site-glass-painted]) { background: var(--glass-fallback, #eef2fbe8); }
.sdk-preview-window :is(.preview-location, .preview-caption, .preview-flight-bottom, .preview-note-top, .preview-note p) { color: var(--muted); }
.sdk-preview-window :is(.preview-flight-head, .mini-pill, .preview-greeting .icon, .preview-note h3, .reminder-icon) { color: var(--accent); }
.sdk-preview-window .route-track { color: var(--muted); }
.sdk-preview-window :is(.preview-flight, .preview-reminder) {
  background: var(--glass-inner, color-mix(in srgb, var(--ink) 6%, transparent));
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
.sdk-preview-window .preview-note {
  background: var(--glass-inner, color-mix(in srgb, var(--accent) 10%, transparent));
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
.sdk-preview-window :is(.mini-pill, .preview-tabs, .reminder-icon, .reminder-check) {
  background: var(--glass-inner, color-mix(in srgb, var(--ink) 7%, transparent));
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
.sdk-preview-window .preview-tabs .selected {
  background: var(--glass-focus, rgb(255 255 255 / .36));
  color: var(--ink);
}
.site-scene .sdk-download-panel { background: transparent; overflow: hidden; }
.download-panel-backdrop { border-radius: inherit; background: linear-gradient(120deg, #4e58b9, #6b69cc 58%, #818bd0); }
.download-panel-backdrop .download-decoration { z-index: 0; }
.download-panel-content { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: inherit; gap: inherit; align-items: inherit; }
.sdk-download-panel .sdk-download-button { position: relative; margin: 0; min-height: var(--site-control-height); color: var(--glass-ink, #202644); --lg-foreground: var(--glass-ink, #202644); background: var(--glass-fallback, #f4f6fce8); border: 0; }
.sdk-download-panel .sdk-download-button[data-site-glass-painted] { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.updates-shell.material-updates { background: #eeedf5; border: 1px solid #dedee9; box-shadow: none; filter: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sdk-update-highlight-scene { position: relative; isolation: isolate; display: flex; min-width: 0; border-radius: 24px; overflow: hidden; }
.updates-backdrop { border-radius: 24px; background: linear-gradient(145deg, #dce4ee, #f0f3f9 54%, #e0e4ed); }
.site-scene .sdk-update-highlight-surface { position: relative; flex: 1; min-width: 0; border-radius: 24px; background: var(--glass-fallback, #f7f9fbe8); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sdk-update-highlight-surface .eyebrow { color: var(--accent); }
.sdk-update-highlight-surface .release-benefits .icon { color: var(--muted); }
.material-updates .updates-list { min-width: 0; }
.material-updates .updates-list article { border-color: var(--line); }
/* Touch devices do not need the desktop card lift or sticky hover fill. */
@media (hover: none), (pointer: coarse) {
  .site-scene .source-card:hover { transform: none; background: var(--glass); }
}
html[data-appearance="dark"] .updates-shell.material-updates { background: #1d2433; border-color: #343b4b; }
.site-scene :is(.site-section-tabs > .lg-tabs-list, .site-section-tabs .lg-tab-indicator, .mobile-brand-surface, .site-nav-surface, .appearance-trigger, .appearance-menu, .sdk-nav-download)[data-site-glass-painted],
.sdk-hero-scene .sdk-download-button[data-site-glass-painted],
.sdk-preview-scene .sdk-preview-window[data-site-glass-painted],
.sdk-update-highlight-scene .sdk-update-highlight-surface[data-site-glass-painted],
.sdk-download-panel .sdk-download-button[data-site-glass-painted] { background: transparent; }
.fallback-site { height: 100dvh; overflow: auto; scroll-padding-top: 110px; }
.legal-page .site-page-content { padding-top: 134px; }

html[data-appearance="dark"] :is(.site-section-tabs > .lg-tabs-list, .mobile-brand-surface, .site-nav-surface, .appearance-trigger, .sdk-nav-download) { background-color: var(--glass-fallback, #202630e8); }
html[data-appearance="dark"] .appearance-menu { background: var(--glass-fallback, #25314b); }
html[data-appearance="dark"] .site-scene .appearance-menu[data-site-glass-painted] { background: transparent; }
html[data-appearance="dark"] .site-scene :is(.site-section-tabs > .lg-tabs-list, .mobile-brand-surface, .site-nav-surface, .appearance-trigger, .appearance-menu, .sdk-nav-download)[data-site-glass-painted] { background: transparent; }
html[data-appearance="dark"] .preview-backdrop { background: radial-gradient(ellipse at 65% 35%, #304677, #273656 65%, var(--page)); }
html[data-appearance="dark"] .sdk-preview-scene .sdk-preview-window:not([data-site-glass-painted]) { background: var(--glass-fallback, #30425ee8); }
html[data-appearance="dark"] .download-panel-backdrop { background: linear-gradient(120deg, #3a4a99, #5658b0 58%, #697ab3); }
html[data-appearance="dark"] .updates-backdrop { background: linear-gradient(120deg, #161b25, #252b37 54%, #181d28); }
html[data-appearance="dark"] .sdk-update-highlight-scene .sdk-update-highlight-surface:not([data-site-glass-painted]) { background: var(--glass-fallback, #202631); }
html[data-appearance="dark"] .sdk-update-highlight-scene .sdk-update-highlight-surface[data-site-glass-painted] { background: transparent; }

@media (max-width: 800px) {
  .site-scene > .site-header { top: max(14px, env(safe-area-inset-top)); min-height: 48px; gap: 8px; }
  .site-page-content { padding-top: 96px; }
  .site-header nav { gap: 14px; }
  .site-section-tabs .lg-tab { padding-inline: 8px; font-size: 12px; }
  .site-header .brand { font-size: 16px; gap: 8px; }
  .site-header .sdk-nav-download { font-size: 12px; padding-inline: 14px; }
}
@media (max-width: 600px) {
  .site-scene > .site-header { flex-wrap: wrap; gap: 10px 8px; }
  .site-nav-shell { display: contents; }
  .mobile-brand-surface {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    height: 48px;
    padding-inline: 12px;
    margin-right: auto;
    order: 1;
    flex: 0 0 auto;
    background: var(--glass-fallback, #f4f6fce8);
    box-shadow: 0 8px 28px #18254c16;
  }
  .site-section-tabs { order: 4; flex: 0 0 100%; width: 100%; }
  .site-section-tabs .lg-tab { flex: 1; padding-inline: 10px; font-size: 12px; }
  .site-header .sdk-nav-download { order: 2; }
  .site-header .lg-menu-anchor { order: 3; }
  .site-page-content { padding-top: 138px; }
  .site-scroll { scroll-padding-block-start: 154px; }
  .compact-navigation { display: block; }
  .site-header nav { gap: 8px; }
  .site-header .sdk-nav-download { height: 48px; min-height: 48px; padding-inline: 12px; gap: 7px; font-size: 11px; }
  .site-header .brand { font-size: 14px; gap: 7px; }
  .appearance-trigger { width: 48px; height: 48px; min-width: 48px; }
  .site-nav-surface { order: 1; flex: 1; padding-inline: 8px; gap: 8px; }
  .legal-page .site-nav-surface .brand { font-size: 12px; gap: 6px; }
  .legal-page .site-header nav { gap: 8px; font-size: 10px; }
  .legal-page .site-page-content { padding-top: 96px; }
  .legal-page .site-scroll { scroll-padding-block-start: 110px; }
}
@media (max-width: 360px) {
  .mobile-brand-surface { padding-inline: 10px; }
  .site-header .brand { font-size: 13px; gap: 6px; }
  .site-header .sdk-nav-download { padding-inline: 10px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-scroll { scroll-behavior: auto; }
}
@media print {
  body.has-glass-app, #site-app, .site-scene, .site-scroll { height: auto; overflow: visible; }
  .site-page-content { padding-top: 0; }
  .site-header, .hero-backdrop, .feature-grid-backdrop { display: none; }
}

/* One row: brand, centered section tabs, appearance. No duplicate download CTA. */
.site-scene > .site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 48px;
  gap: 16px;
}
.site-header > .site-home { grid-column: 1; grid-row: 1; min-width: 0; }
.site-header > .site-home {
  min-height: 48px;
  padding: 6px 10px 6px 6px;
  border: 1px solid #dcdfe9;
  border-radius: 24px;
  background: #eceef6;
  box-shadow: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.site-header > .site-home:active { box-shadow: inset 0 0 0 100px rgb(32 38 51 / .09); }
.site-header > .site-home:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
html[data-appearance="dark"] .site-header > .site-home {
  background: #1d2433;
  border-color: #343b4b;
}
html[data-appearance="dark"] .site-header > .site-home:active { box-shadow: inset 0 0 0 100px rgb(255 255 255 / .10); }
.site-header > .site-section-tabs { grid-column: 2; grid-row: 1; order: initial; }
.site-header > .lg-menu-anchor { grid-column: 3; grid-row: 1; order: initial; }
.site-section-tabs .lg-tab,
.site-section-tabs:not(.is-compact) .lg-tab:first-of-type {
  flex: 1;
  min-width: 0;
  padding-inline: 12px;
}
body:not(.legal-page) .site-page-content { padding-top: 94px; }
body:not(.legal-page) .site-scroll { scroll-padding-block-start: 106px; }

/* Material 3 filled cards: solid surfaces with no renderer, blur or motion. */
.hero-app-preview {
  margin: 0;
  padding: 24px;
  border-radius: 32px;
  background: #e8e7f2;
  border: 1px solid #dcdbe7;
  min-width: 0;
  color: var(--ink);
}
.app-preview-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.app-preview-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 16px; color: #514887; background: #dcd6f1; }
.app-preview-eyebrow { margin: 0 0 5px; font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.app-preview-heading h2 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.035em; }
.app-screenshot-frame { width: min(270px, 100%); margin-inline: auto; padding: 6px; border-radius: 30px; background: #111721; border: 1px solid #424955; }
.app-screenshot-viewport { position: relative; aspect-ratio: 675 / 1350; overflow: hidden; border-radius: 24px; background: #080a0e; }
.app-screenshot-viewport img { display: block; position: absolute; width: 100%; height: auto; max-width: none; top: -5.56%; left: 0; }
.app-preview-caption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; font-size: 11px; font-weight: 600; }
.app-preview-caption-dot { width: 6px; height: 6px; border-radius: 50%; background: #648b76; }
.app-preview-disclaimer { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 10px; font-weight: 400; }
.screenshot-gallery { min-width: 0; }
.screenshot-track { position: relative; display: flex; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 24px; overscroll-behavior-x: contain; }
.screenshot-track::-webkit-scrollbar { display: none; }
.screenshot-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.screenshot-track .app-screenshot-viewport { border-radius: 0; }
.screenshot-track img { user-select: none; -webkit-user-drag: none; pointer-events: none; }
.app-screenshot-frame[data-screenshot-appearance="light"] { background: #f8f9fc; border-color: #c3c6d0; }
.screenshot-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; }
.screenshot-pagination .screenshot-arrow { flex-shrink: 0; }
.screenshot-dots { display: flex; }
.screenshot-pagination button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; background: transparent; -webkit-tap-highlight-color: transparent; }
.screenshot-dots button span { width: 6px; height: 6px; border-radius: 99px; background: #898499; }
.screenshot-dots button[aria-current="true"] span { width: 20px; background: #65558f; }
.screenshot-pagination .screenshot-arrow { background: #dbd8e9; }
.screenshot-arrow.previous .icon { transform: rotate(180deg); }
.screenshot-pagination button:disabled { opacity: .3; cursor: default; }
.screenshot-pagination button:active:not(:disabled) { background: #cec8e0; }
.screenshot-pagination button:focus-visible, .screenshot-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.screenshot-caption { text-align: center; }
.screenshot-current { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; }
.screenshot-current > span { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.screenshot-caption p { margin: 5px 0 10px; font-size: 12px; line-height: 1.5; color: var(--muted); }
html[data-appearance="dark"] .screenshot-pagination .screenshot-arrow { background: #36384e; }
html[data-appearance="dark"] .screenshot-pagination button:active:not(:disabled) { background: #4c4661; }
html[data-appearance="dark"] .screenshot-dots button span { background: #9290a4; }
html[data-appearance="dark"] .screenshot-dots button[aria-current="true"] span { background: #d0bcff; }
@media (max-width: 380px) {
  .screenshot-dots button { width: 36px; }
}
html[data-appearance="dark"] .hero-app-preview { background: #202637; border-color: #353d50; }
html[data-appearance="dark"] .app-preview-icon { color: #d3c8ff; background: #39334f; }
@media (max-width: 600px) {
  .hero-app-preview { width: 100%; max-width: 410px; margin-inline: auto; padding: 20px; border-radius: 24px; text-align: left; }
  .app-preview-heading h2 { font-size: 18px; }
  .app-preview-heading { margin-bottom: 20px; }
}
.feature-grid { gap: 16px; }
.flight-guide { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.flight-guide-heading h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -.045em; margin: 12px 0 20px; }
.flight-guide-heading > p:not(.eyebrow) { max-width: 340px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.flight-guide-heading .text-link { margin-top: 22px; }
.flight-guide-steps { padding: 4px 24px; border-radius: 24px; background: #eeedf5; border: 1px solid #dedee9; }
.flight-guide-steps article { display: flex; gap: 16px; padding-block: 24px; }
.flight-guide-steps article + article { border-top: 1px solid var(--line); }
.guide-step { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 12px; background: #dcd6f1; color: #514887; font-size: 11px; font-weight: 700; }
.flight-guide-steps h3 { font-size: 17px; letter-spacing: -.025em; margin: 4px 0 10px; }
.flight-guide-steps p { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 0; }
.guide-label { display: inline-block; margin-top: 12px; font-size: 10px; color: var(--accent); font-weight: 600; }
html[data-appearance="dark"] .flight-guide-steps { background: #1d2433; border-color: #343b4b; }
html[data-appearance="dark"] .guide-step { background: #39334f; color: #d3c8ff; }
@media (max-width: 800px) {
  .flight-guide { grid-template-columns: 1fr; gap: 24px; }
  .flight-guide-heading > p:not(.eyebrow) { max-width: 460px; }
}
@media (max-width: 600px) {
  .flight-guide-steps { padding-inline: 18px; border-radius: 20px; }
  .flight-guide-steps article { gap: 12px; padding-block: 20px; }
}
.feature-grid .material-feature {
  min-height: 0;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #dedee9;
  background: #eeedf5;
  box-shadow: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  transition: none;
}
.feature-card-heading { display: flex; align-items: center; gap: 12px; }
.feature-card-heading h3 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -.025em; }
.feature-card-heading .feature-icon { width: 40px; height: 40px; flex-shrink: 0; margin: 0; border: 0; border-radius: 12px; box-shadow: none; }
.feature-grid .material-feature > p { margin-top: 14px; font-size: 14px; line-height: 1.65; max-width: none; }
.material-feature .card-link { margin-top: 14px; min-height: 32px; font-size: 13px; }
.material-feature .feature-tag { margin-top: 16px; font-size: 11px; }
html[data-appearance="dark"] .feature-grid .material-feature { background: #1d2433; border-color: #343b4b; }
@media (prefers-color-scheme: dark) {
  html:not([data-appearance="light"]) .feature-grid .material-feature { background: #1d2433; border-color: #343b4b; }
}
@media (max-width: 800px) {
  .site-scene > .site-header { gap: 10px; }
  .site-header > .site-home { font-size: 15px; gap: 7px; }
  .site-home .brand-beta { display: none; }
  .site-section-tabs .lg-tab,
  .site-section-tabs:not(.is-compact) .lg-tab:first-of-type { padding-inline: 6px; font-size: 12px; }
}
@media (max-width: 600px) {
  .site-scene > .site-header { width: calc(100% - 24px); gap: 8px; }
  .site-header > .site-home { font-size: 12px; gap: 6px; padding-inline: 5px 7px; }
  .site-header > .site-home .brand-mark img { width: 28px; height: 28px; }
  .site-section-tabs { width: 100%; }
  .site-section-tabs .lg-tab,
  .site-section-tabs:not(.is-compact) .lg-tab:first-of-type { padding-inline: 3px; font-size: 11px; font-weight: 600; }
  .site-section-tabs > .lg-tabs-list { padding: 4px 2px; }
  .feature-grid .material-feature { padding: 20px; border-radius: 16px; }
  .feature-card-heading h3 { font-size: 20px; }
  .feature-grid .material-feature > p { font-size: 13px; }
}
@media (max-width: 380px) {
  .site-scene > .site-header { gap: 6px; }
  .site-header > .site-home { font-size: 11px; gap: 5px; }
  .site-section-tabs .lg-tab,
  .site-section-tabs:not(.is-compact) .lg-tab:first-of-type { padding-inline: 2px; font-size: 10px; }
}
@media (max-width: 600px) {
  .appearance-menu.appearance-root-menu { width: 208px; min-width: 208px; }
}
@media (max-width: 380px) {
  .appearance-menu.appearance-root-menu { width: 184px; min-width: 184px; }
  .appearance-menu.preference-submenu { width: 136px; min-width: 136px; }
  .appearance-menu.material-submenu { width: 128px; min-width: 128px; }
  .appearance-menu .appearance-option, .site-material-toggle { font-size: 11px; }
  .preference-heading { grid-template-columns: minmax(0, 1fr) auto 12px; gap: 5px; }
  .preference-heading > .icon { width: 12px; height: 12px; }
  .preference-current { font-size: 10px; }
}
@media (max-width: 340px) {
  .appearance-menu.appearance-root-menu { width: 168px; min-width: 168px; }
  .appearance-menu.preference-submenu { width: 128px; min-width: 128px; }
  .appearance-menu.material-submenu { width: 120px; min-width: 120px; }
  .appearance-row, .site-material-toggle { padding-inline: 4px; }
}

/* Keep the remaining CSS glass cards in sync with the SDK material preset. */
html[data-site-blur="none"] { --site-card-blur: 0px; }
html[data-site-blur="soft"] { --site-card-blur: 9px; }
html[data-site-blur="balanced"] { --site-card-blur: 22px; }
html[data-site-blur="strong"] { --site-card-blur: 36px; }
.site-page-content .glass {
  -webkit-backdrop-filter: blur(var(--site-card-blur, 22px)) saturate(145%);
  backdrop-filter: blur(var(--site-card-blur, 22px)) saturate(145%);
}

/* Compact, opaque Material 3 actions; each action has its own tonal color. */
.hero-copy { min-width: 0; }
.hero-copy .material-actions { gap: 8px; flex-wrap: nowrap; }
.material-actions .material-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #bcb2d8;
  border-radius: 24px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.material-action.action-download { color: #3e3561; background: #ddd7f7; }
.material-action.action-explore { color: #1c4e46; background: #cce8e3; border-color: #a5c8c0; }
.material-action.action-feedback { color: #5e4420; background: #f2dfc2; border-color: #d4bc97; }
.material-action > .icon { width: 16px; height: 16px; }
.material-action:active { box-shadow: inset 0 0 0 100px #00000010; }
.material-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
html[data-appearance="dark"] .material-action.action-download { color: #e8deff; background: #49425e; border-color: #685e80; }
html[data-appearance="dark"] .material-action.action-explore { color: #bdebe2; background: #284a45; border-color: #456c65; }
html[data-appearance="dark"] .material-action.action-feedback { color: #f7deb1; background: #594933; border-color: #7e6745; }
@media (max-width: 380px) {
  .hero-copy .material-actions { gap: 6px; }
  .material-actions .material-action { padding-inline: 9px; gap: 6px; font-size: 11px; }
}
@media (max-width: 360px) {
  .material-actions .material-action { padding-inline: 7px; gap: 5px; font-size: 10px; }
  .material-action > .icon { width: 14px; height: 14px; }
}