/* White editorial canvas. Glass belongs to navigation and controls. */
:root {
  color-scheme: light;
  --bg: #fff;
  --ink: #1d1d1f;
  --secondary: #626267;
  --card: #f5f5f7;
  --link: #065ecc;
  --brand: #6a43d9;
  --brand-rgb: 106, 67, 217;
  --glass-fill: rgba(255, 255, 255, .77);
  --glass-stroke: rgba(255, 255, 255, .95);
  --glass-shadow: 0 8px 26px rgba(32, 35, 58, .09), 0 1px 3px rgba(32, 35, 58, .07);
  --glass-reflection: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(90, 100, 128, .13);
}
body.sign { --brand: #065ecc; --brand-rgb: 6, 94, 204; }
body { background: var(--bg); color: var(--ink); }
.global-nav { background: #fafafa; border-bottom: 1px solid #ededf0; }
.global-inner { color: #47474b; }
.global-inner a:hover { color: var(--brand); }
.global-inner .subtle { color: var(--secondary); }
.local-nav {
  inset: 12px 0 auto;
  margin-inline: auto;
  width: min(1000px, calc(100% - 32px));
  height: 60px;
  border: 1px solid var(--glass-stroke);
  border-radius: 30px;
  background: linear-gradient(125deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
  box-shadow: var(--glass-reflection), var(--glass-shadow), 0 0 0 1px rgba(70,78,100,.06);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transform: translateY(calc(-100% - 16px));
}
.local-nav.visible { transform: translateY(0); }
.local-inner { width: auto; margin-inline: 23px; }
.local-brand { color: var(--ink); }
.pill {
  color: #fff;
  background: linear-gradient(150deg, rgba(var(--brand-rgb), .94), var(--brand));
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.1), 0 4px 10px rgba(var(--brand-rgb),.15);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.pill.small { padding: 7px 15px; min-height: 32px; }
.pill:hover { filter: brightness(1.07); }
.hero-description { color: var(--secondary); }
.hero-montage { isolation: isolate; }
.hero-montage::before {
  content: '';
  position: absolute;
  inset: 75px 12% 68px;
  z-index: -1;
  border-radius: 60px;
  background: linear-gradient(90deg, rgba(var(--brand-rgb),.06), rgba(139,172,235,.13), rgba(var(--brand-rgb),.10));
  filter: blur(32px);
  pointer-events: none;
}
.app-icon {
  color: var(--brand);
  background: linear-gradient(145deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.51) 46%, rgba(242,244,252,.78) 100%);
  border: 1px solid rgba(255,255,255,.98);
  box-shadow: inset 2px 2px 2px #fff, inset -2px -2px 3px rgba(102,115,160,.12), 2px 1px 0 rgba(255,255,255,.95), 4px 2px 0 rgba(var(--brand-rgb),.13), 0 14px 28px rgba(59,61,97,.1), 0 0 0 1px rgba(102,115,160,.07);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.app-icon::after {
  inset: 3px;
  border: 1px solid rgba(255,255,255,.65);
  background: linear-gradient(140deg, rgba(255,255,255,.45), transparent 48%);
}
.app-icon svg { filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 3px 3px rgba(var(--brand-rgb),.16)); }
.app-icon img, .app-icon svg { position: relative; z-index: 1; }
.round-control,
.arrows .round-control {
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(242,243,247,.8));
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-reflection), 0 3px 12px rgba(30,35,60,.1), 0 0 0 1px rgba(50,55,75,.06);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.round-control:hover:not(:disabled) { background-color: #fff; }
.round-control:disabled { opacity: .38; box-shadow: inset 0 1px 0 #fff; }
.highlight-card { background: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(48,50,67,.045); }
.highlight-copy { color: var(--ink); }
.highlight-copy strong { color: var(--brand); }
.laptop { border-color: #92939b; box-shadow: 0 24px 44px rgba(28,30,47,.15); }
.laptop::after { background: linear-gradient(#b7b7bd,#5a5a62 65%); box-shadow: 0 8px 15px #20222c1c; }
.phone { border-color: #9899a1; box-shadow: 0 20px 42px rgba(28,30,47,.18); }
.progress-capsule,
.gallery-play {
  color: var(--ink);
  background: linear-gradient(130deg, rgba(255,255,255,.93), rgba(248,249,253,.79));
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 rgba(120,125,148,.15), 0 8px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(45,50,70,.08);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}
.dot span { background: #777984; }
.dot[aria-selected=true] span { background: #c7c4d4; }
.dot span::after { background: var(--brand); }
.entry {
  background: linear-gradient(155deg, #f7f7fa, #f1f2f6);
  border: 1px solid #ededf2;
  box-shadow: inset 0 1px 0 #fff;
}
.entry .entry-icon { color: var(--brand); }
.entry p { color: var(--secondary); }
.tile-media, .tile-media.crop-left { background: #f5f5f7; }
.tile-media.crop img { border-color: #bfc1cc; box-shadow: 0 12px 30px #22263b15; }
.tile-media.fit img { border-color: #92939b; box-shadow: 0 9px 26px #22263b15; }
.tile-media.mobile img { box-shadow: 0 0 0 2px #a9abb2, 0 12px 30px #22263b26; }
.faq-item, .faq-item:first-child { border-color: #d8d8de; }
.faq-question svg { color: #66666e; }
.site-footer { background: #f5f5f7; color: var(--secondary); }
.footnotes, .footer-bottom { border-color: #d9d9df; }
.footer-breadcrumb, .footer-columns h3, .footer-bottom a { color: var(--ink); }
.film, .film::backdrop { background: #fff; color: var(--ink); }
.film-image { border-color: #b9bbc5; box-shadow: 0 12px 45px #242b421a; }
.film-progress { color: var(--secondary); }
@media (max-width:734px) {
  .local-nav { inset: 9px 0 auto; width: calc(100% - 24px); height: 56px; border-radius: 28px; }
  .local-inner { width: auto; margin-inline: 17px; }
  .local-brand { font-size: 18px; }
  .local-nav .pill.small { min-height: 44px; }
  .round-control { min-width: 44px; min-height: 44px; }
  .hero-montage::before { inset: 59px 17% 54px; filter: blur(25px); }
  .gallery-toolbar { bottom: max(22px, env(safe-area-inset-bottom)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .local-nav, .app-icon, .round-control, .arrows .round-control, .progress-capsule, .gallery-play { background: #f5f6fa; }
  .pill { background: var(--brand); }
}
@media (prefers-reduced-transparency: reduce) {
  .local-nav, .app-icon, .round-control, .arrows .round-control, .progress-capsule, .gallery-play {
    background: #f5f6fa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .pill { background: var(--brand); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .app-icon::after { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}