/* UltraNotch site. One page, Apple-product-page craft: black canvas, the notch as the hero. */
:root {
  color-scheme: dark;
  --bg: #000;
  --surface: #121214;
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #86868b;
  --accent: #a08cff;
  --line: rgba(255, 255, 255, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-notch: cubic-bezier(0.32, 0.72, 0, 1);
  --gutter: clamp(20px, 5vw, 40px);
  --page: min(1120px, calc(100% - 2 * var(--gutter)));
  --section: clamp(72px, 10vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-color: #3a3a3c var(--bg); scroll-padding-top: 64px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(124, 92, 255, 0.55); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--text); color: #000;
  font-weight: 600; text-decoration: none; transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 12px; }

/* Navigation: functional glass over scrolling content. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner { width: var(--page); height: 52px; margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; text-decoration: none; }
.brand img { width: 24px; height: 24px; }
.nav-links { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.nav-links a { font-size: 0.8125rem; color: var(--text-2); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  padding: 4px 12px; border-radius: 980px; background: var(--text); color: #000;
  font-size: 0.8125rem; font-weight: 500; text-decoration: none; transition: background-color 0.2s var(--ease-out);
}
.nav-cta:hover { background: #fff; }
@media (max-width: 640px) { .nav-links { display: none; } }

/* Hero */
.hero { padding-top: clamp(56px, 8vw, 96px); text-align: center; overflow: hidden; }
.hero h1 { font-size: clamp(3.25rem, 8.6vw, 6rem); font-weight: 600; line-height: 1; letter-spacing: -0.032em; }
.hero-line { max-width: 22ch; margin: 0.32em auto 0; font-size: clamp(1.625rem, 3.4vw, 2.625rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.024em; }
.hero-body { width: var(--page); max-width: 40em; margin: 1.15em auto 0; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.45; color: var(--text-3); }

/* A MacBook's top edge. Everything inside is sized in app points: --u is one point. */
.device, .band { container-type: inline-size; margin-inline: auto; }
.device {
  width: min(1180px, calc(100% - 2 * var(--gutter)));
  margin-top: clamp(44px, 6vw, 72px);
  -webkit-mask-image: linear-gradient(#000 64%, transparent 100%);
  mask-image: linear-gradient(#000 64%, transparent 100%);
}
.bezel {
  --u: calc(100cqw / 1180);
  padding: calc(14 * var(--u)) calc(14 * var(--u)) 0;
  border-radius: calc(46 * var(--u)) calc(46 * var(--u)) 0 0;
  background: #0a0a0b;
  box-shadow: 0 0 0 1px #3a3a3d, inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.screen { position: relative; overflow: hidden; aspect-ratio: 1152 / 640; border-radius: calc(32 * var(--u)) calc(32 * var(--u)) 0 0; background: #000; }
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
@media (max-width: 720px) {
  .device .bezel { --u: calc(100cqw / 700); }
  .device .screen { aspect-ratio: 672 / 470; }
  .menu-extra { display: none; }
}

.menubar {
  position: absolute; inset: 0 0 auto; height: calc(34 * var(--u));
  display: flex; align-items: center; justify-content: space-between; gap: calc(19 * var(--u));
  padding: calc(7 * var(--u)) calc(22 * var(--u)); line-height: 1; overflow: hidden;
  font-size: calc(13.5 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, 0.92); white-space: nowrap;
}
.menu-app { font-weight: 700; }
.menu-left, .menu-right { display: flex; align-items: center; height: 100%; min-width: 0; max-width: calc(50% - 102 * var(--u)); overflow: hidden; }
.menu-left { gap: calc(19 * var(--u)); }
.menu-right { margin-left: auto; justify-content: flex-end; gap: calc(15 * var(--u)); }
.menu-left > *, .menu-right > * { flex-shrink: 0; }
.menu-right svg { display: block; max-height: 100%; overflow: hidden; }
.menu-right .menu-wifi { width: calc(17 * var(--u)); height: calc(12.75 * var(--u)); }
.menu-right .menu-battery { width: calc(27 * var(--u)); height: calc(13 * var(--u)); }

/* The notch: one black surface whose clip grows from the camera housing into the panel. Its
   size follows the page (Settings is larger), morphing with the app's spring set by main.js. */
.notch {
  --pw: 640; --ph: 285; --ps: 1;
  --ear: calc(10 * var(--ps) * var(--u));
  --shift: calc((var(--pw) * var(--ps) - 190) / 2 * var(--u));
  position: absolute; top: 0; left: 50%;
  width: calc(var(--pw) * var(--ps) * var(--u)); height: calc(var(--ph) * var(--ps) * var(--u));
  transform: translateX(-50%);
  transition: width var(--morph, 0.42s) var(--morph-ease, cubic-bezier(0.32, 0.72, 0, 1)), height var(--morph, 0.42s) var(--morph-ease, cubic-bezier(0.32, 0.72, 0, 1));
}
.notch[data-page="settings"] { --pw: 760; --ph: 520; }
/* Settings reaches lower down the screen, so the edge fade starts lower while it shows. */
.device:has(.notch[data-page="settings"]) { -webkit-mask-image: linear-gradient(#000 86%, transparent 100%); mask-image: linear-gradient(#000 86%, transparent 100%); }
@media (max-width: 720px) { .notch[data-page="settings"] { --ps: 0.82; } }
.notch::before, .notch::after {
  content: ""; position: absolute; top: 0; width: var(--ear); height: var(--ear);
  transition: transform 0.46s var(--ease-notch);
}
.notch::before {
  left: calc(-1 * var(--ear));
  background: radial-gradient(circle at 0 100%, transparent calc(var(--ear) - 0.5px), #000 var(--ear));
  transform-origin: 100% 0; transform: translateX(var(--shift)) scale(0.6);
}
.notch::after {
  right: calc(-1 * var(--ear));
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--ear) - 0.5px), #000 var(--ear));
  transform-origin: 0 0; transform: translateX(calc(-1 * var(--shift))) scale(0.6);
}
.notch-body {
  position: absolute; inset: 0; background: #000;
  clip-path: inset(0 var(--shift) calc(100% - 34 * var(--u)) round 0 0 calc(10 * var(--u)) calc(10 * var(--u)));
  transition: clip-path 0.46s var(--ease-notch);
}
.notch-panels {
  position: absolute; top: 0; left: calc(-1 * var(--ear)); right: calc(-1 * var(--ear)); height: 100%;
  opacity: 0; transform: scale(0.95); transform-origin: 50% 0; filter: blur(calc(6 * var(--u)));
  transition: opacity 0.14s linear, transform 0.46s var(--ease-notch), filter 0.2s linear;
}
/* Each page keeps its own size and stays centred under the camera while the shell morphs. */
.panel {
  --w: 660; --h: 285; --s: 1;
  position: absolute; top: 0; left: 50%;
  width: calc(var(--w) * var(--s) * var(--u)); height: calc(var(--h) * var(--s) * var(--u));
  margin-left: calc(var(--w) * var(--s) * var(--u) / -2);
  visibility: hidden;
}
.panel.is-active, .panel.is-leaving { visibility: visible; }
.panel.is-leaving { z-index: 0; }
.panel.is-active { z-index: 1; }
.panel[data-panel="settings"] { --w: 780; --h: 520; }
@media (max-width: 720px) { .panel[data-panel="settings"] { --s: 0.82; } }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* The tab bar is drawn from the same picture but never scales, so only the page moves. */
.panel-content { clip-path: inset(0 0 calc(49 * var(--s) * var(--u)) 0); transform-origin: 50% 40%; }
.panel-bar { clip-path: inset(calc((var(--h) - 49) * var(--s) * var(--u)) 0 0 0); }
.panel[data-panel="settings"] .panel-content { clip-path: none; transform-origin: 50% 0; }
/* Invisible buttons over the picture's own controls. */
.hit {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer; border-radius: calc(8 * var(--s) * var(--u));
  left: calc((var(--x) - var(--d) / 2) * var(--s) * var(--u)); top: calc((var(--y) - var(--d) / 2) * var(--s) * var(--u));
  width: calc(var(--d) * var(--s) * var(--u)); height: calc(var(--d) * var(--s) * var(--u));
  transition: background-color 0.14s var(--ease-out), transform 0.14s var(--ease-out);
}
.hit.round { border-radius: 50%; }
.hit:hover { background: rgba(255, 255, 255, 0.08); }
.hit:active { transform: scale(0.9); }
.hit[aria-current="page"], .hit[aria-current="page"]:hover { background: none; cursor: default; }
.hit[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); }
.hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.notch[data-state="open"]::before { transform: none; transition-duration: 0.62s; }
.notch[data-state="open"]::after { transform: none; transition-duration: 0.62s; }
.notch[data-state="open"] .notch-body { clip-path: inset(0 0 0 round 0 0 calc(28 * var(--ps) * var(--u)) calc(28 * var(--ps) * var(--u))); transition-duration: 0.62s; }
.notch[data-state="open"] .notch-panels {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.3s linear 0.14s, transform 0.62s var(--ease-notch), filter 0.36s linear 0.1s;
}
.notch-toggle {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: max(44px, calc(190 * var(--u))); height: max(30px, calc(34 * var(--u)));
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u));
}
.notch-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.notch[data-state="open"] .notch-toggle { cursor: default; }

/* Tabs under the device, like the app's own tab bar. */
.switcher, .segmented { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: var(--page); margin: 22px auto 0; }
.switcher button, .segmented button {
  min-height: 40px; padding: 9px 17px; border: 0; border-radius: 999px; background: transparent;
  font-size: 0.9375rem; font-weight: 500; color: var(--text-2); cursor: pointer;
  transition: background-color 0.24s var(--ease-out), color 0.24s var(--ease-out);
}
.switcher button:hover, .segmented button:hover { color: var(--text); }
.switcher button[aria-pressed="true"], .segmented button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.13); color: var(--text); }
.switcher button:active, .segmented button:active { background: rgba(255, 255, 255, 0.2); }
.hint { min-height: 1.5em; margin-top: 14px; font-size: 0.875rem; color: var(--text-3); }

/* Section rhythm */
.live, .chapter, .more, .details { padding-top: var(--section); }
.intro, .chapter .copy { max-width: 760px; }
.intro, .center .copy, .more > h2, .details > h2, .privacy, .closing { margin-inline: auto; text-align: center; }
h2 { font-size: clamp(2.125rem, 4.6vw, 3.5rem); font-weight: 600; line-height: 1.07; letter-spacing: -0.028em; }
.intro p, .chapter p, .privacy p { margin-top: 0.9em; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.45; color: var(--text-3); }
.intro { width: var(--page); }

/* Live Activities */
.band { width: min(980px, calc(100% - 2 * var(--gutter))); margin-top: clamp(40px, 6vw, 64px); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.band .bezel { --u: calc(100cqw / 790); }
.band .screen { aspect-ratio: 762 / 150; }
.band .wallpaper { object-position: 50% 47%; }
/* The notch is 186 by 38 points, as in the renders. Each activity's band is drawn as UltraNotch
   draws it (13-point corners, 6-point ears), with its contents clipped inside, so the band can
   grow and draw back on its own while the contents stay put. main.js animates it with OmniNotch's
   springs, filmed at 120 fps. */
.band .menubar { height: calc(38 * var(--u)); }
/* The strip is a narrow crop around the notch, so only the first menus fit beside the widest band. */
.band .menu-extra { display: none; }
.hw-notch {
  position: absolute; top: 0; left: 50%; z-index: 1; width: calc(186 * var(--u)); height: calc(38 * var(--u));
  transform: translateX(-50%); background: #000; border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u));
}
.activity { position: absolute; inset: 0 0 auto; z-index: 2; height: calc(70 * var(--u)); visibility: hidden; pointer-events: none; }
.activity.is-shown { visibility: visible; }
/* One band for every activity: it grows out of the notch, morphs between activities and draws
   back in, while each activity's picture stays centred and is revealed by the band's sides. */
.activity-shell {
  --ear: calc(6 * var(--u));
  position: absolute; top: 0; left: 0; right: 0; margin-inline: auto;
  width: calc(186 * var(--u)); height: calc(38 * var(--u));
  filter: drop-shadow(0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.32));
}
.activity-shell::before, .activity-shell::after { content: ""; position: absolute; top: 0; width: var(--ear); height: var(--ear); }
.activity-shell::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent calc(var(--ear) - 0.5px), #000 var(--ear)); }
.activity-shell::after { left: 100%; background: radial-gradient(circle at 100% 100%, transparent calc(var(--ear) - 0.5px), #000 var(--ear)); }
.activity-band { position: absolute; inset: 0; overflow: hidden; background: #000; border-radius: 0 0 calc(13 * var(--u)) calc(13 * var(--u)); }
.activity-content {
  position: absolute; top: 0; left: 50%; width: calc(760 * var(--u)); height: calc(70 * var(--u)); max-width: none;
  transform: translateX(-50%); opacity: 0;
}
.live-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; width: var(--page); margin: 22px auto 0; }
.live-controls .segmented { width: auto; margin: 0; }
.playback {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); color: var(--text-2); cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.playback:hover { background: rgba(255, 255, 255, 0.14); color: var(--text); }
.playback:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.2); }
.playback svg { width: 14px; height: 14px; }
.playback .icon-play, .playback.is-paused .icon-pause { display: none; }
.playback.is-paused .icon-play { display: block; }

/* Feature chapters: each page shown where it lives, hanging from the top of a screen. */
.chapter { width: var(--page); margin-inline: auto; }
.stage { position: relative; container-type: inline-size; overflow: hidden; margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 16 / 11; border-radius: 28px; background: #000; }
.stage.wide { aspect-ratio: 16 / 8.6; }
.stage-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--wall, 50% 70%); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(#000 12%, rgba(0, 0, 0, 0.62) 46%, rgba(0, 0, 0, 0.08)); }
/* The screen's edge, drawn over everything so the panel visibly hangs from it. */
.stage::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13); pointer-events: none; }
.stage-panel { position: absolute; top: 0; left: 50%; z-index: 2; width: 92cqw; transform: translateX(-50%); }
.stage.wide .stage-panel { width: 66cqw; }
.split { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split .stage { margin-top: 0; }
.split.reverse { grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); }
.split.reverse .copy { order: 2; }
@media (max-width: 860px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .copy { order: 0; }
  .split .copy { text-align: center; margin-inline: auto; }
  .stage.wide { aspect-ratio: 4 / 3; }
  .stage.wide .stage-panel { width: 92cqw; }
}

/* More features */
.more { width: var(--page); margin-inline: auto; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.tile { container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--surface); }
.tile.wide { grid-column: span 2; }
.tile > img { width: 92cqw; margin-inline: auto; }
.tile.wide > img { width: 62cqw; }
.tile-copy { padding: clamp(18px, 2.4vw, 26px) clamp(24px, 3vw, 34px) clamp(26px, 3vw, 34px); }
.tile.wide .tile-copy { text-align: center; }
h3 { font-size: 1.3125rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.016em; }
.tile-copy p { margin-top: 0.35em; color: var(--text-3); }
.also { max-width: 40em; margin: 36px auto 0; text-align: center; color: var(--text-3); }
@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr; }
  .tile.wide { grid-column: auto; }
  .tile.wide > img { width: 92cqw; }
  .tile.wide .tile-copy { text-align: left; }
}

/* Details */
.details { width: var(--page); margin-inline: auto; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 60px); padding-top: 32px; border-top: 1px solid var(--line); }
.facts dt { font-weight: 600; letter-spacing: -0.01em; }
.facts dd { margin-top: 0.35em; color: var(--text-3); }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* Privacy */
.privacy { width: var(--page); max-width: 760px; padding-block: var(--section); }
.privacy-mark { width: 56px; height: 56px; margin: 0 auto 28px; color: var(--text); }

/* Closing */
.closing { width: var(--page); padding-bottom: clamp(88px, 11vw, 140px); }
.closing-icon { width: clamp(112px, 14vw, 156px); margin: 0 auto 18px; filter: drop-shadow(0 18px 40px rgba(61, 123, 255, 0.28)); }
.closing h2 { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.03em; }
.closing-line { margin-top: 0.3em; font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 600; letter-spacing: -0.016em; }
.download {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 12px 22px; border: 0; border-radius: 980px;
  background: var(--text); color: #000; font: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.download:hover { background: #fff; }
.download:active { transform: scale(0.97); }
.download svg { width: 19px; height: 19px; }
/* The command as a Terminal window; the whole window copies it. 14px outer radius, 13px inside
   its 1px border, so the bar's corners share the window's centres. */
.terminal {
  display: block; width: min(600px, 100%); margin: 22px auto 0; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: #0b0b0d; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s var(--ease-out);
}
.terminal:hover { border-color: rgba(255, 255, 255, 0.24); }
.terminal-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: #161618; font-size: 0.75rem; color: var(--text-3);
}
.lights { display: flex; gap: 6px; }
.lights i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3c; }
.terminal-title { font-weight: 500; }
.terminal-cue { justify-self: end; font-weight: 500; color: var(--text-2); transition: color 0.2s var(--ease-out); }
.terminal:hover .terminal-cue { color: var(--text); }
.terminal[data-state="copied"] .terminal-cue { color: #30d158; }
.terminal[data-state="failed"] .terminal-cue { color: #ff9f0a; }
.terminal-body {
  display: flex; gap: 10px; padding: 14px 16px 16px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 0.875rem; line-height: 1.55;
}
.terminal-body code { font: inherit; color: var(--text); overflow-wrap: break-word; }
.prompt { flex: none; color: var(--text-3); user-select: none; }
.closing { scroll-margin-top: 64px; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; scroll-margin-top: 120px; }
.closing-actions form { display: flex; }
.closing-actions .download { margin-top: 0; }
.download.secondary { background: rgba(255, 255, 255, 0.12); color: var(--text); }
.download.secondary:hover { background: rgba(255, 255, 255, 0.18); }
.closing-facts { display: flex; flex-wrap: wrap; justify-content: center; margin: 18px auto 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--text-2); }
.closing-facts li + li::before { content: "·"; margin-inline: 0.55em; color: var(--text-3); }
.closing .licence-status { min-height: 0; margin-top: 10px; color: var(--text-2); }
.closing-status { min-height: 1.5em; margin-top: 14px; color: var(--text-2); }
.closing-note { max-width: 40em; margin: 0.25em auto 0; font-size: 0.8125rem; color: var(--text-3); }
.closing-note a { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.closing-note a:hover { color: var(--text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Feedback: the same Bug or Idea note as the app, sent as a prefilled email. The dialog's
   22px corners sit 22px from the field, far from its corners, so the field keeps 12px. */
.feedback-link { padding: 0; border: 0; background: none; font: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.feedback-link:hover { color: var(--text); }
.feedback {
  width: min(480px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line); border-radius: 22px;
  background: #1c1c1e; color: var(--text);
}
.feedback::backdrop { background: rgba(0, 0, 0, 0.6); }
.feedback[open] { animation: feedback-in 0.22s var(--ease-out); }
@keyframes feedback-in { from { opacity: 0; transform: scale(0.97); } }
.feedback h2 { font-size: 1.25rem; letter-spacing: -0.01em; }
.feedback-kind { width: auto; justify-content: flex-start; margin: 14px 0 12px; }
.feedback-kind label { position: relative; }
.feedback-kind input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-kind span { display: block; padding: 7px 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: var(--text-2); cursor: pointer; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.feedback-kind input:checked + span { background: rgba(255, 255, 255, 0.13); color: var(--text); }
.feedback-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.feedback textarea {
  display: block; width: 100%; min-height: 120px; padding: 12px; resize: vertical;
  border: 1px solid var(--line); border-radius: 12px; background: #111113; color: var(--text); font: inherit; font-size: 0.9375rem;
}
.feedback textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.feedback-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.feedback-actions .download { margin-top: 0; padding: 8px 18px; font-size: 0.9375rem; }
.feedback-actions .download:disabled { opacity: 0.45; cursor: default; }
.feedback-note { margin-right: auto; font-size: 0.8125rem; color: var(--text-3); }

.footer { width: var(--page); margin-inline: auto; padding: 22px 0 40px; border-top: 1px solid var(--line); font-size: 0.75rem; line-height: 1.5; color: var(--text-3); }
.footer p + p { margin-top: 0.6em; }

@media (prefers-reduced-motion: reduce) {
  .notch::before, .notch::after, .notch-body { transition: none !important; }
  .notch-panels { transform: none !important; filter: none !important; transition: opacity 0.2s linear !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Licence pages share the website's type, colour and deliberate pill buttons. */
.licence-section { max-width: 760px; margin: 100px auto; padding: 0 24px; text-align: center; scroll-margin-top: 100px; }
.licence-section h2 { font-size: clamp(32px, 6vw, 52px); letter-spacing: -.04em; line-height: 1.1; margin-bottom: 20px; }
.licence-section p { margin: 18px 0; line-height: 1.65; }
.licence-section a { text-decoration: underline; text-underline-offset: 4px; }
.licence-section .download { margin: 16px auto; }
.licence-note { color: #b9b9be; font-size: 14px; }
.licence-status { min-height: 24px; }
.licence-form { text-align: left; max-width: 560px; margin: 28px auto; }
.licence-form label { display: block; margin-bottom: 12px; }
.licence-input { width: 100%; border: 1px solid #666; border-radius: 8px; padding: 14px; background: #121216; color: #fff; font: inherit; box-sizing: border-box; }
.licence-key { display: block; white-space: normal; overflow-wrap: anywhere; padding: 18px; font-size: clamp(14px, 3vw, 20px); border: 1px solid #666; border-radius: 8px; user-select: all; }
.licence-seats { list-style: none; padding: 0; text-align: left; }
.licence-seats li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid #333; }
.licence-seats button, .licence-secondary { padding: 10px 18px; border: 1px solid #777; border-radius: 999px; color: white; background: #202024; cursor: pointer; font: inherit; }
.licence-section button:disabled { opacity: .55; cursor: wait; }
.licence-section :focus-visible { outline: 2px solid #b8aaff; outline-offset: 4px; }

.chapter .copy p, .intro p { max-width: 42ch; }
.center .copy p, .intro p { margin-inline: auto; }
.privacy @media (max-width: 720px) {
  .hero-body { max-width: 31ch; }
  .menu-right { gap: calc(10 * var(--u)); }
  .hero .menu-right > span:first-of-type { display: none; }
  .licence-section { margin-block: 72px; }
}

[hidden] { display: none !important; }
.licence-status:empty { display: none; }