/* Dusk: the hero is a sky. A clear day in light mode, late evening in dark mode. */
:root {
  color-scheme: light dark;
  --page: light-dark(#F3F4FA, #04050C);
  --surface: light-dark(#FFFFFF, #0D0F1E);
  --ink: light-dark(#14163A, #EEF0FF);
  --muted: light-dark(#5B5F80, #9599BC);
  --line: light-dark(#DFE1EE, #1C1F36);
  --silhouette: light-dark(#191B3C, #04050F);
  --eye: light-dark(#F7D9C4, #C98DB0);
  --wing: light-dark(#2C2F5C, #141633);
  /* light-dark() only takes colours, so the sky gradients switch with the theme blocks below */
  --sky-light: linear-gradient(180deg, #5E9BEF 0%, #86B6F4 30%, #B3D2F8 58%, #D6E8FB 82%, #E4F0FD 100%);
  --sky-dark: linear-gradient(180deg, #03051A 0%, #0D1146 34%, #2B2470 60%, #6A3F92 82%, #C47A9E 100%);
  --sky: var(--sky-light);
  --sky-ink: light-dark(#14163A, #FFFFFF);
  --sky-muted: light-dark(#2E3264, rgba(236, 232, 255, .78));
  --glow: light-dark(rgba(255, 249, 228, .9), rgba(255, 150, 160, .55));
  --glass: light-dark(rgba(255, 255, 255, .2), rgba(16, 18, 54, .42));
  --solid: light-dark(#14163A, #FFFFFF);
  --solid-ink: light-dark(#FFFFFF, #0D0F2A);
  --sun: #FF9466;
  /* the blue to pink of the evening sky, for accents in the sections below the hero */
  --grad: linear-gradient(120deg, #6E86F2, #9B7BE6 50%, #E487AC);
  --grad-line: linear-gradient(135deg, rgba(110, 134, 242, .6), rgba(155, 123, 230, .25) 50%, rgba(228, 135, 172, .6));
  --well: light-dark(#E9EBF6, #080A17);
  --chip: light-dark(#DFE2F0, #1A1D36);
  /* Liquid Glass: a thin tint, a little blur and a bright rim. In Chromium, dusk.js also bends
     the backdrop at each pane's edge through --refract. The Dock, nav and Messages window sit on
     a sky, so they're glass in both themes; the panels and cards below are glass in light mode,
     on a small dawn wallpaper, and flat cards in dark mode, swapped in by the theme blocks below. */
  --lg-rim:
    inset 1px 1px .5px light-dark(rgba(255, 255, 255, .95), rgba(255, 255, 255, .3)),
    inset -1px -1px .5px light-dark(rgba(255, 255, 255, .55), rgba(255, 255, 255, .1)),
    inset 0 0 0 .5px light-dark(rgba(255, 255, 255, .45), rgba(255, 255, 255, .1)),
    inset 0 0 18px light-dark(rgba(255, 255, 255, .3), rgba(255, 255, 255, .04));
  --lg-drop: 0 12px 32px -14px light-dark(rgba(30, 32, 90, .3), rgba(0, 0, 0, .5));
  --dock-blur: blur(3px) saturate(1.8) brightness(1.06);
  --panel-bg: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) border-box;
  --card-bg: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) border-box;
  --panel-blur: blur(10px) saturate(1.8) brightness(1.05);
  --panel-shadow: var(--lg-rim), var(--lg-drop);
  --scene-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath fill='%23A9C2F0' d='M0 120C170 70 330 150 520 110S860 50 1040 110S1160 120 1200 100V300H0Z'/%3E%3Cpath fill='%237F9FE0' d='M0 190C160 150 320 220 520 180S840 130 1040 190S1160 200 1200 170V300H0Z'/%3E%3Cpath fill='%235A78C8' d='M0 250C200 220 400 280 620 245S960 210 1180 252L1200 248V300H0Z'/%3E%3C/svg%3E") bottom / 100% 58% no-repeat,
    radial-gradient(55% 45% at 72% 62%, rgba(255, 246, 214, .9), transparent 70%), var(--sky-light);
  --scene-pad: clamp(16px, 3vw, 36px);
  --panel-bg-dark: linear-gradient(var(--well), var(--well)) padding-box, var(--grad-line) border-box;
  --card-bg-dark: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-line) border-box;
  --tile: light-dark(rgba(255, 255, 255, .62), #0D0F1E);
  --tile-line: light-dark(rgba(255, 255, 255, .95), #1C1F36);
  --stars: 0;
  --clouds: 1;

  --font: Inter, ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark; --sky: var(--sky-dark); --stars: 1; --clouds: 0;
  --dock-blur: blur(4px) saturate(1.5);
  --panel-bg: var(--panel-bg-dark); --card-bg: var(--card-bg-dark);
  --panel-blur: blur(0); --panel-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35);
  --scene-bg: none; --scene-pad: 0px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky: var(--sky-dark); --stars: 1; --clouds: 0;
    --dock-blur: blur(4px) saturate(1.5);
    --panel-bg: var(--panel-bg-dark); --card-bg: var(--card-bg-dark);
    --panel-blur: blur(0); --panel-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35);
    --scene-bg: none; --scene-pad: 0px;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 17px/1.55 var(--font); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; }
h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
h3 { font-size: 18px; letter-spacing: -0.015em; }
p, dl, dd, ol, ul { margin: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 8px; }

/* Nav: a centred pill floating over the sky */
.nav {
  position: absolute; z-index: 10; top: 22px; left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100% - 2 * var(--gutter) - 16px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 6px 6px 6px 16px; border-radius: 999px;
  background: var(--glass); box-shadow: var(--lg-rim), 0 6px 20px -10px rgba(20, 22, 70, .3);
  -webkit-backdrop-filter: blur(8px) saturate(1.8); backdrop-filter: var(--refract,) blur(8px) saturate(1.8);
  color: var(--sky-ink);
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.brand svg { width: 30px; height: 25px; fill: currentColor; }
.brand svg .legs, .footer svg .legs { stroke: currentColor; }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; }
.nav-links a:not(.btn) { text-decoration: none; opacity: .72; }
.nav-links a:not(.btn):hover { opacity: 1; }
/* Day/night toggle: a moon by day, a sun by night */
.theme-toggle {
  display: grid; place-items: center; width: 36px; height: 36px; margin-left: -12px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.theme-toggle:hover { background: light-dark(rgba(255, 255, 255, .35), rgba(255, 255, 255, .1)); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 16px/1 var(--font); letter-spacing: -0.01em; text-decoration: none;
  transition: transform .15s ease;
}
.btn:active { transform: scale(.97); }
.btn.soon { cursor: default; }
.btn.soon:active { transform: none; }
.btn-solid { background: var(--solid); color: var(--solid-ink); }
.btn-light { background: var(--sky-ink); color: light-dark(#fff, #0D0F2A); }
.btn-small { height: 36px; padding: 0 16px; font-size: 14px; }
.apple { width: 15px; height: 18px; fill: currentColor; margin-top: -2px; }

/* Hero sky */
.hero { padding: 12px 12px 0; }
.sky {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 1400px; margin: 0 auto; height: clamp(680px, 92vh, 860px);
  border-radius: 28px; background: var(--sky); color: var(--sky-ink);
}
/* The star field drifts slowly to the right as the world turns, and fades out toward the
   horizon. It's two copies of the same stars side by side, so it loops without a seam. */
.stars {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  opacity: var(--stars); transition: opacity .6s;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 78%); mask-image: linear-gradient(#000 40%, transparent 78%);
}
.star-field { position: absolute; left: 0; top: 0; will-change: transform; animation: drift 180s linear infinite; }
.star-field circle { fill: #fff; }
.star-field .twinkle { animation: twinkle 3.2s ease-in-out infinite alternate; }
@keyframes drift { from { translate: -50% 0; } }
@keyframes twinkle { to { opacity: .15; } }
/* By day the same slow drift carries clouds instead, in two layers for depth, and now and
   then a few birds fly across. */
.clouds {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  opacity: var(--clouds); transition: opacity .6s;
  -webkit-mask-image: linear-gradient(#000 50%, transparent 85%); mask-image: linear-gradient(#000 50%, transparent 85%);
}
.cloud-field { position: absolute; left: 0; top: 0; overflow: visible; will-change: transform; }
.cloud-field ellipse { fill: url(#puff); }
.cloud-field.far { opacity: .55; animation: drift 320s linear infinite; }
.cloud-field.near { opacity: .9; animation: drift 200s linear infinite; }
.flyer { position: absolute; left: 0; top: 0; }
.flyer svg { display: block; width: 100%; height: 100%; overflow: visible; animation: bob 2.6s ease-in-out infinite alternate; }
.flyer path { fill: none; stroke: var(--silhouette); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.flyer g { transform-box: fill-box; transform-origin: 50% 90%; animation: flap .24s ease-in-out infinite alternate; }
@keyframes bob { to { translate: 0 -9px; } }
@keyframes flap { to { scale: 1 -.45; } }
.meteor {
  position: absolute; left: 0; top: 0; width: 150px; height: 1.5px; border-radius: 1px;
  transform-origin: 100% 50%; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85));
}
.meteor::after {
  content: ""; position: absolute; right: -1.5px; top: -1.25px; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(255, 240, 255, .7);
}
.horizon {
  position: absolute; left: 50%; bottom: -46%; width: 140%; aspect-ratio: 2.2; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  z-index: -1;
}
.hero-copy { position: relative; padding: 150px var(--gutter) 0; text-align: center; }
h1 { font-size: clamp(54px, 9vw, 112px); line-height: .95; letter-spacing: -0.05em; font-weight: 600; }
.lede { max-width: 33em; margin: 22px auto 0; font-size: clamp(17px, 1.6vw, 19px); color: var(--sky-muted); text-wrap: pretty; }
.cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.req { font-size: 13px; color: var(--sky-muted); }

.glass {
  position: absolute; left: 50%; top: 59%; transform: translateX(-50%);
  width: min(460px, calc(100% - 32px));
  padding: 12px 18px 16px; border-radius: 18px;
  background: var(--glass); box-shadow: var(--lg-rim), 0 18px 50px -20px rgba(20, 16, 60, .45);
  -webkit-backdrop-filter: blur(10px) saturate(1.8); backdrop-filter: var(--refract,) blur(10px) saturate(1.8);
}
.glass-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.glass-bar img { border-radius: 5px; }
.status { margin-left: auto; font-weight: 500; color: var(--sky-muted); }
.sky.talking .status { color: var(--sun); }
.glass-text { margin-top: 8px; min-height: 2.9em; font-size: 17px; line-height: 1.45; }
.placeholder { color: var(--sky-muted); }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: currentColor; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.landed { animation: land .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes land { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } }

.wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wire path { fill: none; stroke: var(--silhouette); stroke-width: 2; stroke-linecap: round; }
.bird { position: absolute; left: 0; top: 0; width: 0; height: 0; fill: var(--silhouette); overflow: visible; pointer-events: none; }
/* dusk.js sizes the birds and sets them on the wire; until its first frame they'd flash at the default SVG size */
.sky:not(.perched) .bird { visibility: hidden; }
.bird .legs { stroke: var(--silhouette); stroke-width: 3; stroke-linecap: round; fill: none; }
.bird .eye { fill: var(--eye); }
.bird .wing, .brand .wing, .footer .wing { fill: var(--wing); }
.bird.flip { scale: -1 1; }
.lead .lead-bird { transform-origin: 59px 89px; transition: transform .25s ease; }
/* her wing hinges at its front end, by her beak, and the back of it lifts */
.lead .flap { transform-box: fill-box; transform-origin: 96% 56%; }
.lead .song path { fill: none; stroke: var(--silhouette); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.sky.talking .lead .lead-bird { transform: rotate(-7deg); }
.sky.talking .lead .flap { animation: flap-wing .2s ease-in-out infinite alternate; }
.sky.talking .lead .song path { animation: sing .7s ease-out infinite; }
.sky.talking .lead .song path:nth-child(2) { animation-delay: .18s; }
@keyframes flap-wing { to { transform: rotate(26deg); } }
@keyframes sing { 0% { opacity: 0; transform: translateX(-4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(6px); } }

.try { max-width: 640px; margin: 22px auto 0; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: center; gap: 16px; }
.try p { font-size: 14px; color: var(--muted); max-width: 30em; }
kbd { font: 600 12px/1 var(--font); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.key {
  flex: none; width: 72px; height: 64px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  font: 500 12px/1 var(--font); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 3px 0 var(--line), 0 6px 14px -6px rgba(20, 22, 58, .25);
  user-select: none; -webkit-user-select: none; touch-action: none;
  transition: transform .08s, box-shadow .08s;
}
.key-glyph { font-size: 18px; align-self: flex-end; }
.key-name { align-self: flex-start; color: var(--muted); }
.sky.talking ~ .try .key, .key:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line), 0 2px 6px -3px rgba(20, 22, 58, .3); }

/* Sections */
section { padding: 0 var(--gutter); }
.section-head { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 7fr 5fr; gap: 24px 64px; align-items: end; }
.section-head p { color: var(--muted); max-width: 32em; text-wrap: pretty; }

/* Apps: a Mac Dock. dusk.js magnifies icons with transforms only, so the Dock keeps its size. */
.apps { padding-top: 140px; }
.desktop {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: var(--max); height: clamp(360px, 36vw, 440px); margin: 64px auto 0; padding: 0 12px 18px;
  border-radius: 28px; background: var(--sky);
  display: flex; align-items: flex-end; justify-content: center;
}
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.wp-sun { fill: light-dark(#FFF3D1, #FFE3CC); filter: drop-shadow(0 0 40px light-dark(rgba(255, 236, 170, .9), rgba(255, 210, 200, .5))); }
.wp-far { fill: light-dark(#A9C2F0, #3A2E7C); }
.wp-mid { fill: light-dark(#7F9FE0, #241E5C); }
.wp-near { fill: light-dark(#5A78C8, #110E36); }
.dock {
  /* 15 icons and their gaps come to 17.24 icon widths; size them to fit the desktop, up to 64px */
  --icon: clamp(36px, calc((min(100vw - 2 * var(--gutter), var(--max)) - 52px) / 17.3), 64px);
  position: relative; list-style: none; margin: 0; width: fit-content; max-width: 100%;
  display: flex; align-items: flex-end; gap: calc(var(--icon) * .16); padding: 10px 14px; border-radius: 26px;
  background: light-dark(rgba(255, 255, 255, .12), rgba(18, 20, 52, .28));
  box-shadow: var(--lg-rim), var(--lg-drop);
  -webkit-backdrop-filter: var(--dock-blur); backdrop-filter: var(--refract,) var(--dock-blur);
}
.dock li {
  --s: 1; --lift: 0px;
  position: relative; flex: none;
  transform-origin: 50% 100%; transform: translateY(var(--lift)) scale(var(--s));
}
.dock img { display: block; width: var(--icon); height: var(--icon); }
.dock span {
  position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px;
  scale: calc(1 / var(--s)); transform-origin: 50% 100%;
  padding: 4px 10px; border-radius: 8px; white-space: nowrap;
  background: var(--tile); border: 1px solid var(--tile-line); font-size: 13px; font-weight: 500;
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  opacity: 0; pointer-events: none; transition: opacity .12s, translate .12s;
}
.dock li:hover span { opacity: 1; translate: -50% 0; }

/* In light mode the glass mocks sit on a little dawn wallpaper, like windows on a Mac desktop,
   so the glass has sky and hills to bend. Dark mode leaves them on the page. */
.scene { padding: var(--scene-pad); border-radius: 34px; background: var(--scene-bg); }

/* Insights and dictionary */
.split {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-top: 160px;
  display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center;
}
.split.flip .split-copy { order: 2; }
.split-copy p { margin-top: 18px; color: var(--muted); max-width: 30em; text-wrap: pretty; }
.panel {
  padding: 16px; border-radius: 24px; border: 1px solid transparent;
  background: var(--panel-bg); box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--refract,) var(--panel-blur);
}

.insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mod { padding: 18px; border-radius: 16px; background: var(--tile); border: 1px solid var(--tile-line); display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 168px; }
.mod-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.mod-big { font-size: 34px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mod-big small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.mod-note { font-size: 13px; color: var(--muted); }
.saved { justify-content: flex-end; background: var(--sky) border-box; color: var(--sky-ink); border-color: transparent; }
.saved .mod-label { margin-bottom: auto; }
.saved .mod-label, .saved .mod-note { color: var(--sky-muted); }
.gauge { width: 100%; max-width: 170px; margin: 4px 0 10px; }
.g-track, .g-fill { fill: none; stroke-width: 14; stroke-linecap: round; }
.g-track { stroke: var(--chip); }
.g-fill { stroke: url(#dusk-arc); }
.top ul { list-style: none; display: grid; gap: 9px; margin-top: 6px; }
.top li { display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 8px; font-size: 13px; font-weight: 500; }
.top li i { grid-column: 2; height: 4px; margin-top: 3px; border-radius: 2px; background: var(--grad) 0 0 / var(--w) 100% no-repeat, var(--chip); }
.top img { grid-row: span 2; }
.heat { margin-top: auto; padding-top: 14px; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; }
.heat i { aspect-ratio: 1; border-radius: 2px; background: var(--chip); }
.heat i[data-l="1"] { background: color-mix(in srgb, #6E86F2 45%, var(--chip)); }
.heat i[data-l="2"] { background: color-mix(in srgb, #9B7BE6 80%, var(--chip)); }
.heat i[data-l="3"] { background: #E487AC; }

.dict { display: grid; gap: 12px; }
.suggestion {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 16px;
  background: var(--tile); border: 1px solid var(--tile-line); font-size: 15px;
}
.badge { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); }
.badge svg { width: 22px; height: 19px; fill: #fff; }
.suggestion s { color: var(--muted); }
.suggestion .pill { margin-left: auto; flex: none; padding: 8px 14px; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 600; font-size: 14px; }
.words { list-style: none; border-radius: 16px; background: var(--tile); border: 1px solid var(--tile-line); }
.words li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 18px; font-size: 15px; }
.words li + li { border-top: 1px solid var(--line); }
.words b { font-weight: 600; }
.words span { color: var(--muted); font-size: 13px; }

/* Privacy */
.privacy { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-top: 160px; }
.privacy ul { list-style: none; margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.privacy li {
  padding: 24px 22px; border-radius: 18px; border: 1px solid transparent;
  background: var(--card-bg); box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--refract,) var(--panel-blur);
}
.privacy svg { display: block; width: 26px; height: 26px; fill: none; stroke: url(#dusk-icon); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.privacy p { margin-top: 6px; font-size: 15px; color: var(--muted); }

.footer {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 120px auto 0; padding: 28px var(--gutter) 48px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px;
}
.footer .brand { color: var(--ink); }
.footer .brand svg { fill: var(--ink); }

@media (max-width: 860px) {
  .nav-links a:not(.btn) { display: none; }
  .section-head, .split { grid-template-columns: 1fr; }
  .split { gap: 36px; }
  .split.flip .split-copy { order: 0; }
  .privacy ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .desktop { height: auto; min-height: 340px; padding-top: 170px; margin-top: 48px; }
  .dock { --icon: 52px; flex-wrap: wrap; justify-content: center; gap: 10px; }
}
@media (max-width: 600px) {
  .hero { padding: 8px 8px 0; }
  .sky { border-radius: 22px; height: 720px; }
  .hero-copy { padding-top: 112px; }
  .glass { top: 62%; }
  .try { flex-direction: column; text-align: center; }
  .insights, .privacy ul { grid-template-columns: 1fr; }
  .apps, .split, .privacy { padding-top: 100px; }
  .footer { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky.talking .lead .flap, .sky.talking .lead .song path, .caret, .star-field, .star-field .twinkle, .cloud-field { animation: none; }
}