/* Native CSS. System typography; silver neutrals; one blue interaction accent.
   Surfaces: 24px. Buttons: pills. The preserved notch replica keeps its own geometry.
   Layering: header 5, demo settings 2. No build or external dependencies. */
:root {
  color-scheme: light dark;
  --page: #f4f5f7;
  --surface: #e9ebef;
  --text: #20242b;
  --muted: #565e6c;
  --faint: #626b78;
  --line: #d1d5dc;
  --accent: #245cba;
  --accent-hover: #174b9f;
  --accent-tint: #dce7fa;
  --accent-edge: #97b5e8;
  --r-surface: 24px;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --glass: blur(20px) saturate(150%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #141619;
    --surface: #202328;
    --text: #eef0f3;
    --muted: #a9b0bc;
    --faint: #9ba4b2;
    --line: #363b44;
    --accent: #9bbdff;
    --accent-hover: #bdd3ff;
    --accent-tint: #243857;
    --accent-edge: #546e9a;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font:
    16px/1.65 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 600;
  text-wrap: balance;
}
h1 {
  font-size: clamp(46px, 5.8vw, 80px);
}
h2 {
  font-size: clamp(32px, 3.7vw, 50px);
}
h3 {
  font-size: 20px;
  letter-spacing: -0.02em;
}
p {
  color: var(--muted);
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button {
  font: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
svg {
  display: block;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
[hidden] {
  display: none !important;
}
.wrap {
  width: min(1120px, calc(100% - 80px));
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  z-index: 6;
  background: var(--page);
  padding: 8px;
}
.skip-link:focus {
  transform: none;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--page);
  border-bottom: 1px solid var(--line);
}
.site-header > .wrap {
  height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.04em;
  color: var(--text);
  white-space: nowrap;
}
.brand img {
  width: 28px;
  height: 28px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
}
.nav-link {
  color: var(--muted);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 25px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition:
    transform 0.2s,
    background 0.2s;
}
.btn-primary {
  background: var(--text);
  color: var(--page);
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}
.btn:active {
  transform: scale(0.98);
}
.btn-sm {
  padding: 8px 18px;
  font-size: 13px;
}
.text-link {
  font-size: 15px;
  font-weight: 550;
}
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 50px;
  padding-block: 72px 88px;
}
.eyebrow {
  font-size: 13px;
  margin-bottom: 22px;
  color: var(--muted);
}
.hero-sub {
  max-width: 420px;
  font-size: 19px;
  line-height: 1.55;
  margin-top: 24px;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 30px;
}
.hero-art {
  display: grid;
  place-items: center;
  min-height: 310px;
  background: var(--surface);
  border-radius: 50%;
}
.hero-art img {
  width: 230px;
  height: 230px;
  filter: drop-shadow(0 24px 22px #101c3430);
  transform: rotate(-8deg);
}
.section {
  padding-block: 96px;
}
.section-head {
  max-width: 670px;
  margin-bottom: 36px;
}
.section-head p {
  max-width: 570px;
  margin-top: 20px;
  font-size: 18px;
}
.satellite-section {
  padding: 46px 0 0;
  border-top: 1px solid var(--line);
}
.interaction-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 36px;
}
.interaction-notes p {
  margin-top: 12px;
  max-width: 430px;
}
/* -------------------------------------------------------- demo (replica) */

.demo {
  width: 100%;
}

.demo-stage {
  --notch-w: clamp(132px, 26%, 186px);
  --notch-h: 38px;
  position: relative;
  height: clamp(116px, 10.5vw, 136px);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  overflow: hidden;
  background:
    radial-gradient(
      120% 90% at 50% 118%,
      rgba(73, 160, 255, 0.15),
      transparent 62%
    ),
    linear-gradient(180deg, #0a101e, #05080f);
  box-shadow: 0 40px 90px -56px rgba(73, 160, 255, 0.6);
  isolation: isolate;
}

.demo-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.16),
    transparent
  );
}

/* the simulated hardware notch */
.demo-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--notch-w);
  height: var(--notch-h);
  background: #000;
  border-radius: 0 0 19px 19px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

.demo-notch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #0b2039;
  box-shadow:
    inset 0 0 4px rgba(73, 160, 255, 0.95),
    0 0 7px rgba(73, 160, 255, 0.5);
}

/* Each satellite replicates the app's panel: 24pt collapsed -> 60pt expanded,
   height 24, content hugging the notch-facing edge, and the percentage text
   growing out of that edge so it pushes the orb outward, which is what the app
   does. Anchoring mirrors the app's arithmetic: anchor - gap - width, so the
   inner edge stays pinned. */
.sat {
  --notch-gap: 10px;
  position: absolute;
  top: calc(var(--notch-h) / 2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 24px;
  height: 24px;
  padding: 0 1.25px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(-50%);
  transition: width 0.2s ease-in-out;
}

.sat-left {
  right: calc(50% + var(--notch-w) / 2 + var(--notch-gap));
  --target: 62%;
}

.sat-right {
  left: calc(50% + var(--notch-w) / 2 + var(--notch-gap));
  justify-content: flex-start;
  --target: 41%;
}

/* 14pt ring with a 2.5pt stroke, remaining quota drawn from 12 o'clock */
.sat-orb {
  --p: var(--target);
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(
    #fff 0 var(--p),
    rgba(255, 255, 255, 0.18) var(--p) 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent 63%, #000 65%);
  mask: radial-gradient(farthest-side, transparent 63%, #000 65%);
  transition: --p 1.1s var(--ease-out);
}

.sat-value {
  width: 0;
  margin-inline-start: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition:
    width 0.2s ease-in-out,
    margin-inline-start 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

/* arcs fill in once the demo is on screen */
html.js:not(.reveal-fallback) .demo:not(.is-visible) .sat-orb {
  --p: 0%;
}

.demo-stage:hover .sat,
.sat:focus-visible,
.demo.is-hinting .sat,
body.demo-open .sat {
  width: 60px;
}

.demo-stage:hover .sat-value,
.sat:focus-visible .sat-value,
.demo.is-hinting .sat-value,
body.demo-open .sat-value {
  width: 3.2ch;
  margin-inline-start: 4px;
  opacity: 1;
}

/* Icon-only settings bar, mirroring SettingsBarView: a 176 x 44 rounded rect
   (radius 13, the documented exception) holding four 32pt circular controls at
   8pt spacing, 12pt inline padding. It appears 6pt below the notch's bottom
   edge, shows in 0.18s and hides in 0.15s, sliding up 6pt. */
.demo-bar {
  position: absolute;
  top: calc(var(--notch-h) + 6px);
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 176px;
  height: 44px;
  padding: 0 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  background: rgba(20, 26, 40, 0.74);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow: 0 20px 44px -24px rgba(4, 7, 15, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.15s ease-in-out,
    transform 0.15s ease-in-out,
    visibility 0.15s;
}

body.demo-open .demo-bar {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-duration: 0.18s;
}

.demo-bar .ctrl {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.demo-bar .ctrl svg {
  width: 15px;
  height: 15px;
}

.demo-bar .ctrl-text {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}

.demo-bar button.ctrl:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Launch at Login enabled takes the accent treatment, as the app does */
.demo-bar .ctrl[aria-pressed="true"] {
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 0.75px var(--accent-edge);
  color: var(--accent-hover);
}

.demo-caption {
  margin-top: 16px;
  font-size: 13px;
  color: var(--faint);
}

.demo-caption .try {
  color: var(--muted);
}

/* The demonstration is an intentionally dark product surface in both themes. */
.demo {
  --text: #eef3fc;
  --accent-tint: rgba(91, 157, 255, 0.14);
  --accent-edge: rgba(91, 157, 255, 0.34);
  --accent-hover: #7db2ff;
}
.demo-stage {
  height: 160px;
  box-shadow: none;
}
.demo-caption {
  color: var(--faint);
}
.widget-section {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: center;
}
.widget-copy > p {
  margin-top: 24px;
  max-width: 380px;
  font-size: 18px;
}
.widget-copy .muted {
  font-size: 15px;
}
.widget-art {
  position: relative;
  background: #24282d;
  border-radius: 24px;
  overflow: hidden;
  min-height: 410px;
  color: #eef0f3;
}
.widget-art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.widget-examples {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  padding: 32px 24px 66px;
}
.widget-sample {
  background: #33373de8;
  border: 1px solid #ffffff24;
  border-radius: 22px;
  padding: 17px;
  color: #eef0f3;
  box-shadow: 0 14px 30px #11151b35;
}
.widget-sample > strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #c5cbd4;
}
.small {
  width: 170px;
  height: 166px;
  align-self: flex-start;
  margin-left: 20px;
}
.medium {
  width: 320px;
  max-width: 100%;
  height: 166px;
  align-self: flex-end;
}
.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 17px;
  text-align: center;
}
.metrics > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
}
.ring {
  position: relative;
  isolation: isolate;
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
}
.ring:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(#eef0f3 var(--quota), #ffffff25 0);
  mask: radial-gradient(farthest-side, transparent 78%, #000 80%);
}
.metrics small {
  color: #b9c0ca;
  font-size: 10px;
}
.widget-art figcaption {
  position: absolute;
  bottom: 21px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #e0e4eb;
  font-size: 12px;
}
.reliability {
  border-block: 1px solid var(--line);
  padding-block: 48px;
}
.reliability h2 {
  font-size: 34px;
  margin-bottom: 24px;
}
.reliability-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.reliability-copy p + p {
  margin-top: 0;
}
.privacy-section {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 90px;
}
.privacy-details {
  padding-top: 10px;
  display: grid;
  gap: 32px;
}
.privacy-details p {
  margin-top: 12px;
}
.install-section {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
}
.install-title img {
  margin-bottom: 24px;
}
.install-title .btn {
  margin-top: 30px;
}
.install-content h3 {
  margin-bottom: 14px;
}
.install-steps {
  padding-left: 22px;
  margin: 28px 0;
  color: var(--muted);
}
.install-steps li {
  padding-left: 8px;
  margin-bottom: 12px;
}
.install-content aside {
  border-left: 2px solid var(--line);
  padding-left: 20px;
  font-size: 14px;
}
.install-content aside p {
  margin-top: 8px;
}
.license-note {
  font-size: 13px;
  margin-top: 24px;
}
.site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 36px;
  font-size: 12px;
  color: var(--muted);
}
.site-footer > .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer nav {
  display: flex;
  gap: 24px;
}
.site-footer a {
  color: var(--muted);
}
.footer-note {
  flex-basis: 100%;
  max-width: 780px;
  font-size: 11px;
}
.notfound {
  padding: 100px 0;
  min-height: 65vh;
}
.notfound .code {
  font: 18px var(--mono);
  margin-bottom: 24px;
}
.notfound h1 {
  max-width: 700px;
}
.notfound p:not(.code) {
  max-width: 540px;
  margin-top: 24px;
}
/* Reveal uses opacity only; content stays readable when enhancement fails. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reveal-fallback) [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.6s var(--ease-out),
      transform 0.6s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.js:not(.reveal-fallback) [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .demo-bar {
    background: #181e2b;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .widget-sample {
    background: #33373d;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .btn:hover {
    transform: none;
  }
}
@media (max-width: 1024px) {
  .nav {
    gap: 17px;
  }
  .hero {
    gap: 30px;
  }
  .hero-art {
    min-height: 260px;
  }
  .hero-art img {
    width: 190px;
    height: 190px;
  }
  .widget-section,
  .privacy-section,
  .install-section {
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .site-header > .wrap {
    height: 64px;
    gap: 12px;
  }
  .nav-link {
    display: none;
  }
  .brand {
    font-size: 16px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-block: 48px;
    gap: 36px;
  }
  .hero-art {
    min-height: 220px;
    border-radius: 24px;
  }
  .hero-art img {
    width: 170px;
    height: 170px;
  }
  .hero-sub {
    font-size: 18px;
  }
  .hero-cta {
    gap: 20px;
  }
  .section {
    padding-block: 60px;
  }
  .satellite-section {
    padding-top: 34px;
  }
  .section-head p {
    font-size: 16px;
  }
  .interaction-notes,
  .widget-section,
  .reliability-copy,
  .privacy-section,
  .install-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .interaction-notes {
    margin-top: 28px;
    gap: 26px;
  }
  .widget-copy > p {
    max-width: none;
  }
  .widget-art {
    min-height: 410px;
  }
  .small {
    margin-left: 0;
  }
  .reliability {
    padding-block: 32px;
  }
  .reliability h2 {
    max-width: none;
  }
  .privacy-section .section-head {
    margin-bottom: 0;
  }
  .privacy-details {
    gap: 26px;
  }
  .site-footer nav {
    gap: 18px;
  }
  .demo-stage {
    --notch-w: 118px;
  }
  .hero h1 {
    font-size: clamp(42px, 9.5vw, 64px);
  }
}
@media (hover: none) {
  .sat {
    width: 60px;
  }
  .sat-value {
    width: 3.2ch;
    margin-inline-start: 4px;
    opacity: 1;
  }
}