/* Nuit Blanche. One day on one page: the hero is 11:00 under a painted sky, the sections run through the
   afternoon and dusk into the night, where the sun is still awake under a closed lid.
   Brand: night #0E1430, sun #F5A524, blanche #EEF0F6. Erode for display, Inter for everything else. */

@font-face { font-family: "Erode"; src: url("fonts/Erode-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Erode"; src: url("fonts/Erode-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Erode"; src: url("fonts/Erode-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Erode"; src: url("fonts/Erode-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

@property --bg { syntax: "<color>"; inherits: true; initial-value: #EEF0F6; }

:root {
  --night: #0E1430; --night-2: #161D40; --night-3: #232B57;
  --sun: #F5A524; --sun-deep: #9A5B00;
  --blanche: #EEF0F6;

  --bg: #EEF0F6; --bg-2: #E2E6EF; --line: #D6DCE8;
  --ink: #0E1430; --ink-2: #4A5070; --ink-3: #737A98;
  --band: #0E1430; --card: #FFFFFF;
  --shadow-panel: 0 40px 70px -48px rgba(14, 20, 48, .3);
  --nf-veil: rgba(14, 20, 48, 0); --nf-fade: 24%;
  /* the laptop: space black on a light page, silver on a dark one, so the closed lid reads like the mark's bar */
  --al-hi: #4A4D55; --al-1: #34373E; --al-2: #24262C; --al-3: #16171B; --al-lip: #0F1013;
  --edge: rgba(14, 20, 48, 0);
  --panel-dim: rgba(8, 12, 34, 0);
  --menu-bg: rgba(248, 249, 252, .8); --menu-ink: #0E1430; --menu-dim: rgba(14, 20, 48, .45); --menu-line: rgba(14, 20, 48, .1);
  --bar-bg: rgba(255, 255, 255, .5); --bar-ink: #0E1430; --plate: #F7F7F8;
  --chat-bg: rgba(255, 255, 255, .7); --chat-ink: #111; --chat-line: rgba(0, 0, 0, .07); --b-in: #FFFFFF; --b-out: #D9FDD3; --b-time: rgba(0, 0, 0, .45);

  --display: "Erode", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --wrap-max: 1240px; --pad: 32px;
  --gap-section: clamp(144px, 19vw, 280px);
  color-scheme: light;
  transition: --bg .9s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1430; --bg-2: #161D40; --line: #232B57;
    --ink: #EEF0F6; --ink-2: #A9AFC8; --ink-3: #8088AA;
    --band: #161D40; --card: #161D40; --nf-veil: rgba(14, 20, 48, .42); --nf-fade: 50%;
    --shadow-panel: 0 50px 90px -50px rgba(0, 0, 0, .7);
    --al-hi: #FFFFFF; --al-1: #E4E7EC; --al-2: #C7CCD6; --al-3: #A3AAB8; --al-lip: #8E96A6;
    --edge: rgba(238, 240, 246, .1);
    --panel-dim: rgba(8, 12, 34, .26);
    --menu-bg: rgba(38, 40, 50, .82); --menu-ink: #ECECEC; --menu-dim: rgba(255, 255, 255, .42); --menu-line: rgba(255, 255, 255, .12);
    --bar-bg: rgba(20, 24, 44, .55); --bar-ink: #EEF0F6; --plate: #EEF0F6;
    --chat-bg: rgba(17, 27, 33, .78); --chat-ink: #E9EDEF; --chat-line: rgba(255, 255, 255, .08); --b-in: #202C33; --b-out: #005C4B; --b-time: rgba(233, 237, 239, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1430; --bg-2: #161D40; --line: #232B57;
  --ink: #EEF0F6; --ink-2: #A9AFC8; --ink-3: #8088AA;
  --band: #161D40; --card: #161D40; --nf-veil: rgba(14, 20, 48, .42); --nf-fade: 50%;
  --shadow-panel: 0 50px 90px -50px rgba(0, 0, 0, .7);
  --al-hi: #FFFFFF; --al-1: #E4E7EC; --al-2: #C7CCD6; --al-3: #A3AAB8; --al-lip: #8E96A6;
  --edge: rgba(238, 240, 246, .1);
  --panel-dim: rgba(8, 12, 34, .26);
  --menu-bg: rgba(38, 40, 50, .82); --menu-ink: #ECECEC; --menu-dim: rgba(255, 255, 255, .42); --menu-line: rgba(255, 255, 255, .12);
  --bar-bg: rgba(20, 24, 44, .55); --bar-ink: #EEF0F6; --plate: #EEF0F6;
  --chat-bg: rgba(17, 27, 33, .78); --chat-ink: #E9EDEF; --chat-line: rgba(255, 255, 255, .08); --b-in: #202C33; --b-out: #005C4B; --b-time: rgba(233, 237, 239, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--sans); letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 8px; }
img { display: block; max-width: 100%; height: auto; }
p, dd, summary { text-wrap: pretty; }
code, kbd { font-family: var(--mono); font-size: .88em; }
p code, li code, dd code { white-space: nowrap; background: color-mix(in srgb, var(--ink) 7%, transparent); padding: .12em .38em; border-radius: 6px; }
@media (max-width: 359px) { p code, li code, dd code { display: inline-block; max-width: calc(100% - .5em); white-space: normal; line-height: 1.5; } p code.say, li code.say, dd code.say { display: inline; } } /* the battery line in the FAQ runs wider than a 320px phone: commands are kept whole and broken only past a full line (with room left for the comma after), menu text wraps like prose */
.wrap { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding-inline: var(--pad); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }

h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.034em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.03; }
h3 { font: 600 19px/1.35 var(--sans); letter-spacing: -0.015em; margin: 0; }

/* ---------- the button: a little sun ---------- */
.get {
  position: relative; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap;
  padding: 15px 25px 15px 21px; border-radius: 12px; border: 0;
  font: 600 17px/1 var(--sans); letter-spacing: -0.01em; color: #1B1203;
  background: linear-gradient(180deg, #FFBE4A, #F3A11F);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(154, 91, 0, .28), 0 1px 2px rgba(90, 45, 0, .2), 0 8px 20px -10px rgba(220, 120, 0, .55);
  transition: transform .18s ease, filter .18s ease;
}
.get:hover { transform: translateY(-1px); filter: brightness(1.04); }
.get:active { transform: translateY(0); }
.get .apple { width: 16px; height: 19px; fill: currentColor; margin-top: -3px; flex: none; }
.get-sm { padding: 10px 16px 10px 14px; font-size: 15px; border-radius: 11px; gap: 8px; }
.get-sm .apple { width: 13px; height: 16px; margin-top: -2px; }
.get-float {
  position: fixed; top: 14px; right: 16px; z-index: 60; padding: 11px 18px 11px 15px; font-size: 15px; border-radius: 12px; gap: 8px;
  opacity: 0; transform: translateY(-16px); pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.get-float .apple { width: 13px; height: 16px; margin-top: -2px; }
.get-float.show { opacity: 1; transform: none; pointer-events: auto; }
.get-float.show.away { opacity: 0; transform: translateY(-16px); pointer-events: none; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow-x: clip; } /* the time-lapse row and the floor shadow run wider than a phone; without this the phone widens the page to fit them */
.sky {
  --bgpos: 50% 100%;
  position: absolute; inset: 0 0 auto 0; height: var(--sky-h, clamp(760px, 112vh, 1120px)); z-index: -1; overflow: hidden;
  background: #0E1A45;
}
.sky-layer, .sky-masked, .mtn-light, .dawn { position: absolute; inset: 0; }
.sky-layer { background-size: cover; background-position: var(--bgpos); background-repeat: no-repeat; }
.sky-night { background-image: url(img/hero-night-2560.webp); }
.sky-night::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 21, 56, .9) 0, rgba(14, 21, 56, 0) 96px), radial-gradient(50% 32% at 50% 28%, rgba(14, 21, 56, .94), rgba(14, 21, 56, 0) 100%); }
.sky-day { background-image: url(img/hero-day-2560.webp); opacity: 1; }
.sky-masked, .mtn-light { -webkit-mask: url(img/sky-mask-v2.png) var(--bgpos) / cover no-repeat; mask: url(img/sky-mask-v2.png) var(--bgpos) / cover no-repeat; }
.mtn-light { -webkit-mask-image: url(img/mtn-mask-v2.png); mask-image: url(img/mtn-mask-v2.png); background: linear-gradient(to top, rgba(255, 150, 80, 0) 25%, rgba(255, 150, 90, .55) 62%); mix-blend-mode: soft-light; opacity: 0; }
.dawn { background: linear-gradient(to top, rgba(255, 168, 92, .9) 0%, rgba(255, 168, 92, .78) 36%, rgba(255, 128, 118, .4) 48%, rgba(150, 104, 206, .2) 64%, rgba(150, 104, 206, 0) 86%); opacity: 0; }
.sun { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: translate(-999px, -999px); will-change: transform; opacity: calc(var(--sun-a, 1) * var(--sky-sun, 1)); transition: opacity .3s linear; }
.sun-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 130, 0) 30%, rgba(255, 196, 100, .45) 52%, rgba(255, 180, 80, .18) 64%, rgba(255, 170, 60, 0) 76%); opacity: var(--warm, 0); }
.sun > span { position: absolute; left: 0; top: 0; border-radius: 50%; }
.sun-glow { width: 900px; height: 900px; margin: -450px; background: radial-gradient(closest-side, rgba(255, 248, 228, .9), rgba(255, 222, 160, .48) 26%, rgba(255, 196, 120, .16) 56%, rgba(255, 190, 110, 0) 100%); }
.sun-streak { opacity: .35; width: 1500px; height: 30px; margin: -15px -750px; background: radial-gradient(closest-side, rgba(255, 252, 240, .85), rgba(255, 252, 240, 0)); border-radius: 50%; }
.sun-disc { width: 124px; height: 124px; margin: -62px; background: radial-gradient(circle, #FFF8E4 0%, #FFE6AC 32%, rgba(252, 196, 98, .9) 56%, rgba(248, 178, 70, .5) 66%, rgba(245, 165, 36, 0) 74%); box-shadow: 0 0 80px 26px rgba(255, 196, 110, .5); }
.sun::after { content: ""; position: absolute; left: -300px; top: -300px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 40, .85), rgba(255, 120, 40, .35) 40%, rgba(255, 110, 40, 0)); opacity: var(--warm, 0); mix-blend-mode: screen; }
.sky-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 46%, var(--bg) 88%); }
.sky-fade::before { content: ""; position: absolute; inset: -40% 0 0 0; background: radial-gradient(120% 90% at 50% 0%, transparent 62%, color-mix(in srgb, var(--bg) 70%, transparent) 100%); }

.nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 24px; height: 88px; color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 24px/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; }
.brand .mark { width: 40px; height: 40px; margin-top: 2px; }
.mk-bar { fill: currentColor; }
/* the marks tried on 27 October (?mark=orb|seam|window) are images */
.mark-orb .brand .mark, .mark-seam .brand .mark, .mark-window .brand .mark { width: 30px; height: 30px; margin-top: 0; filter: drop-shadow(0 3px 8px rgba(14, 20, 48, .2)); }

.nav-links { display: flex; gap: 34px; margin-left: auto; margin-right: 18px; }
.nav-links a { text-decoration: none; font: 500 15px/1 var(--sans); color: rgba(255, 255, 255, .86); transition: color .15s; }
.nav-links a:hover { color: #fff; }
.nav-end { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .24); }
.theme-toggle svg { width: 18px; height: 18px; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
:root[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle svg { transform: rotate(180deg); } }

.hero-copy { position: relative; z-index: 2; text-align: center; padding-top: clamp(64px, 11vh, 128px); color: #fff; }
.hero-title {
  font-size: clamp(42px, 6.1vw, 90px); line-height: 1.0; letter-spacing: -0.032em; margin: 0 auto; max-width: 13.5em;
  text-shadow: 0 2px 40px rgba(8, 24, 70, .22);
}
.hero-title .ln { display: block; }
.hero-lede {
  max-width: 35em; margin: 28px auto 0; font: 450 clamp(17px, 1.4vw, 20px)/1.5 var(--sans); letter-spacing: -0.012em;
  color: rgba(255, 255, 255, .94); text-shadow: 0 1px 18px rgba(8, 24, 70, .35);
}
.hero-cta { margin-top: 36px; }

/* entrance: the sky moves first, the words land when the night has shifted */
html.js .hero-title .ln, html.js .hero-lede, html.js .hero-cta, html.js .demo-wrap {
  opacity: 0; transform: translateY(16px); filter: blur(8px);
  animation: nb-safety 0s linear 3.2s forwards; /* shows the copy even if the script never runs */
}
html.js .hero-in .hero-title .ln, html.js .hero-in .hero-lede, html.js .hero-in .hero-cta, html.js .hero-in .demo-wrap {
  opacity: 1; transform: none; filter: none; animation: none;
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1), filter 1s ease;
}
html.js .hero-in .hero-title .ln:nth-child(2) { transition-delay: .14s; }
html.js .hero-in .hero-lede { transition-delay: .32s; }
html.js .hero-in .hero-cta { transition-delay: .46s; }
html.js .hero-in .demo-wrap { transition-delay: .62s; transition-duration: 1.2s, 1.6s, 1s; }
@keyframes nb-safety { to { opacity: 1; transform: none; filter: none; } }

/* ---------- the demo ---------- */
.demo-wrap { position: relative; z-index: 2; margin-top: clamp(44px, 7vh, 80px); }
.demo { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; aspect-ratio: 1260 / 840; }
.rig { position: absolute; left: 0; top: 0; width: 1260px; height: 840px; transform-origin: 0 0; }
.laptop {
  position: absolute; left: 30px; top: 10px; width: 1200px; height: 840px;
  perspective: 12000px; perspective-origin: 600px 651px; transform-origin: 600px 792px; will-change: transform;
}
.lid { position: absolute; left: 0; top: 0; width: 1200px; height: 792px; transform-origin: 50% 100%; transform-style: preserve-3d; will-change: transform; }
.lid-front, .lid-back { position: absolute; inset: 0; border-radius: 30px 30px 10px 10px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.lid-front {
  background: linear-gradient(180deg, #0B0C10, #050608);
  box-shadow: inset 0 0 0 2px var(--al-2), inset 0 0 0 3px rgba(0, 0, 0, .6), 0 40px 80px -40px rgba(6, 12, 40, .55);
}
.lid-back { transform: rotateX(180deg); background: linear-gradient(180deg, var(--al-1), var(--al-2) 60%, var(--al-3)); box-shadow: inset 0 0 0 1px var(--al-hi); }
.screen { position: absolute; left: 12px; top: 12px; width: 1176px; height: 764px; border-radius: 18px 18px 5px 5px; overflow: hidden; background: #000; }
.screen-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 38%); }
.screen-off { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.screen-sheen { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(180deg, rgba(214, 226, 246, .78) 0%, rgba(170, 190, 226, .5) 45%, rgba(40, 52, 90, .4) 100%); }
.deck {
  position: absolute; left: 0; top: 798px; width: 1200px; height: 792px; transform-origin: 50% 0; transform: rotateX(90deg);
  transform-style: preserve-3d; background: linear-gradient(180deg, var(--al-3), var(--al-1) 30%, var(--al-1));
}
.hinge { position: absolute; left: 40px; right: 40px; top: 790px; height: 9px; border-radius: 0 0 6px 6px; background: linear-gradient(#08090B, #23252B); }
.base-front {
  position: absolute; left: 0; top: 792px; width: 1200px; height: 22px; transform-origin: 50% 0; transform: rotateX(-90deg);
  border-radius: 0 0 22px 22px / 0 0 14px 14px;
  background: linear-gradient(180deg, var(--al-hi) 0%, var(--al-1) 10%, var(--al-2) 55%, var(--al-3) 100%);
}
.base-lip { position: absolute; left: 50%; top: 0; width: 170px; height: 8px; margin-left: -85px; border-radius: 0 0 12px 12px; background: linear-gradient(var(--al-lip), var(--al-2)); }
.floor-shadow { position: absolute; left: 50%; top: 822px; width: 1360px; height: 40px; margin-left: -680px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 16, 44, .32), rgba(10, 16, 44, 0)); pointer-events: none; }
.under { position: absolute; left: 5px; top: 838px; width: 1190px; opacity: 0; pointer-events: none; }
.under svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 26px rgba(255, 168, 48, .55)) drop-shadow(0 0 70px rgba(255, 168, 48, .35)); }
.base-front { box-shadow: 0 4px 26px 2px rgba(255, 180, 80, calc(var(--glow, 0) * .75)); }
.under::before { content: ""; position: absolute; left: 50%; top: -120px; width: 1500px; height: 760px; margin-left: -750px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 186, 80, .55), rgba(255, 176, 60, .2) 45%, rgba(255, 170, 50, 0)); opacity: var(--glow, 0); }
.under .rays line { stroke-dasharray: 40; stroke-dashoffset: 40; }
/* the closed lid: behind it the sun keeps moving through the white night, one exposure every quarter hour or so.
   The box's bottom edge is the lid's top line, so the sun that reaches it sinks half behind the closed MacBook. */
.tl { position: absolute; left: -300px; top: 266px; width: 1800px; height: 520px; overflow: hidden; pointer-events: none; }
.tl i { position: absolute; left: 0; top: 0; width: var(--d, 92px); height: var(--d, 92px); margin: calc(var(--d, 92px) / -2); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 50% 40%, #FFF8E6 0, #FFDD96 38%, #FDB443 74%, #F2921C 100%);
  box-shadow: 0 0 46px 12px rgba(255, 190, 110, .32), 0 0 120px 40px rgba(255, 176, 120, .14); }
.end-classic .tl { display: none; }
/* the seam: with the lid shut, a thin line of warm light where the lid meets the base, the Mac still awake inside */
.base-front::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: -1px; height: 3px; border-radius: 2px; opacity: var(--seam, 0); pointer-events: none;
  background: linear-gradient(90deg, rgba(245, 165, 36, 0), #F7A93A 18%, #FFE6B0 50%, #F7A93A 82%, rgba(245, 165, 36, 0));
  box-shadow: 0 0 12px 2px rgba(255, 181, 71, .6), 0 0 44px 10px rgba(255, 181, 71, .22);
}
.under { display: none; } .end-classic .under { display: block; }
/* on the light fog the halo needs more colour to read as light, not a sticker */
:root:not([data-theme="dark"]) .under::before { background: radial-gradient(closest-side, rgba(255, 160, 40, .5), rgba(255, 178, 80, .24) 50%, rgba(255, 190, 110, 0)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .under::before { background: radial-gradient(closest-side, rgba(255, 186, 80, .55), rgba(255, 176, 60, .2) 45%, rgba(255, 170, 50, 0)); } }

.demo-end { position: absolute; left: 0; right: 0; top: 71%; text-align: center; opacity: 0; pointer-events: none; }
.demo-tag { margin: 0; font: 400 clamp(26px, 3.7vw, 54px)/1.05 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.demo-ticker { margin: 14px 0 0; font: 500 clamp(13px, 1.2vw, 16px)/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tick-clock { font-weight: 650; color: var(--ink); margin-right: .55em; }
/* what the agents got done under the lid: each line lands and stays (the single ticker is ?end=classic only) */
.demo-ticker { display: none; } .end-classic .demo-ticker { display: block; } .end-classic .demo-log { display: none; }
.demo-log { width: max-content; margin: 14px auto 0; text-align: left; font: 500 clamp(13px, 1.2vw, 16px)/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.demo-log div { opacity: 0; }
.demo-log b { display: inline-block; min-width: 3.4em; font-weight: 650; color: var(--ink); }
.demo-log div:last-child { color: var(--ink); }
.demo-ctl {
  position: absolute; right: 0; bottom: -50px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--ink-2); opacity: .7; transition: opacity .2s;
}
.demo-ctl:hover, .demo-ctl:focus-visible { opacity: 1; }
@media (hover: hover) { .demo-ctl { opacity: 0; } .demo:hover .demo-ctl { opacity: .7; } .demo .demo-ctl:hover, .demo .demo-ctl:focus-visible { opacity: 1; } }
.demo-ctl svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: currentColor; }
.demo-ctl .ic-play { display: none; } .demo.paused .demo-ctl .ic-play { display: block; } .demo.paused .demo-ctl .ic-pause { display: none; }

/* inside the screen: a 1512 x 982 Mac, drawn in points */
.cam { position: absolute; left: 0; top: 0; width: 1512px; height: 982px; transform-origin: 0 0; font: 400 13.5px/1.3 var(--sans); color: #fff; letter-spacing: -0.005em; }
.wallpaper { position: absolute; inset: 0; background: url(img/hero-day-1600.webp) 40% 80% / cover; }
.wallpaper::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 20, 60, .25), rgba(10, 20, 60, .05)); }
.mb { position: absolute; left: 0; right: 0; top: 0; height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 22px; background: linear-gradient(rgba(14, 30, 80, .45), rgba(14, 30, 80, .3)); text-shadow: 0 0 6px rgba(0, 0, 0, .25); }
.mb-left, .mb-right { display: flex; align-items: center; gap: 19px; font-weight: 500; }
.mb-left b { font-weight: 700; }
.mb-apple { width: 15px; height: 18px; fill: #fff; margin-top: -3px; }
.mb-right { gap: 15px; }
.mb-nb { position: relative; display: grid; place-items: center; width: 34px; height: 25px; border-radius: 6px; }
.mb-nb::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: rgba(255, 255, 255, .22); opacity: var(--press, 0); }
.mb-nb svg { grid-area: 1 / 1; width: 20px; height: 14px; position: relative; }
.mb-nb .i-sun { opacity: 0; transform: translateY(2px) scale(.85); }
.mb-nb.on .i-sun { opacity: 1; transform: none; transition: opacity .25s ease, transform .4s cubic-bezier(.2, .8, .3, 1); }
.mb-nb.on .i-moon { opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .25s ease; }
.mb-batt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.mb-batt svg { width: 27px; height: 13px; }
.mb-ic { width: 18px; height: 18px; }
.mb-clock { font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }

.win { position: absolute; left: 18px; top: 50px; width: 1476px; height: 914px; border-radius: 14px; overflow: hidden; background: #181818; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px rgba(0, 0, 0, .55); }
.win-title { position: relative; height: 38px; display: flex; align-items: center; background: #1F1F1F; border-bottom: 1px solid #2B2B2B; }
.lights { display: inline-flex; gap: 8px; margin-left: 16px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.lights i:nth-child(2) { background: #FEBC2E; } .lights i:nth-child(3) { background: #28C840; }
.cmd { position: absolute; left: 50%; top: 7px; width: 360px; height: 24px; margin-left: -180px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; background: #2A2A2A; border: 1px solid #333; color: #A8A8A8; font-size: 12.5px; }
.cmd svg { width: 13px; height: 13px; }
.win-body { position: absolute; top: 38px; bottom: 23px; left: 0; right: 0; display: grid; grid-template-columns: 48px 212px minmax(0, 1fr); }
.act { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 14px; border-right: 1px solid #2B2B2B; color: #7E7E7E; }
.act svg { width: 23px; height: 23px; }
.act svg:first-child { color: #E6E6E6; }
.side { border-right: 1px solid #2B2B2B; color: #CCCCCC; font-size: 12.5px; overflow: hidden; }
.side-h { padding: 11px 16px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #BBBBBB; }
.tree > div { height: 22px; display: flex; align-items: center; gap: 6px; padding-left: 12px; white-space: nowrap; }
.tree .l1 { padding-left: 24px; } .tree .l2 { padding-left: 36px; } .tree .l3 { padding-left: 48px; }
.tree .d::before { content: "›"; display: inline-block; width: 10px; color: #9A9A9A; font-size: 14px; line-height: 1; }
.tree .d.open::before { transform: rotate(90deg); }
.tree .f::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: #6B7280; margin-left: 2px; }
.tree .ts::before { background: #3178C6; } .tree .sql::before { background: #D9A441; } .tree .md::before { background: #8E9BB5; } .tree .js::before { background: #CBB53C; }
.win-status { position: absolute; left: 0; right: 0; bottom: 0; height: 23px; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: #181818; border-top: 1px solid #2B2B2B; color: #9D9D9D; font-size: 11.5px; }
.win-status .sp { flex: 1; }

.panes { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: #2B2B2B; min-height: 0; }
.pane { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: #181818; }
.pane-h { flex: none; height: 31px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #1C1C1C; border-bottom: 1px solid #2B2B2B; color: #CFCFCF; font-size: 12px; }
.pane-h .spark { color: #D97757; font-size: 13px; }
.pane-h .name { color: #8C8C8C; }
.pane-h .x { margin-left: auto; color: #6E6E6E; }
.pane-b { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 14px 0; font: 400 12.5px/1.56 var(--mono); color: #D6D6D6; white-space: pre; }
.pane-b > div { overflow: hidden; text-overflow: ellipsis; }
.pane-b .u { color: #9B9B9B; background: #232323; margin: 2px -6px 6px; padding: 3px 6px; border-radius: 4px; }
.pane-b .dot { color: #D6D6D6; }
.pane-b .dot.ok { color: #4FC97E; }
.pane-b b { font-weight: 600; color: #F0F0F0; }
.pane-b .res { color: #8E8E8E; }
.pane-b .diff { margin-left: 5ch; padding: 0 6px; }
.pane-b .diff i { font-style: normal; color: inherit; opacity: .6; margin-right: 1ch; }
.pane-b .add { background: rgba(46, 160, 67, .2); color: #A8E3B6; }
.pane-b .del { background: rgba(248, 81, 73, .18); color: #F2A7A3; }
.pane-b .todo-done { color: #8E8E8E; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.pane-f { flex: none; padding: 6px 14px 8px; font: 400 12.5px/1.5 var(--mono); }
.spin { color: #8E8E8E; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.spin .w { color: #D97757; }
.ccin { margin-top: 6px; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #4A4A4A; border-radius: 6px; color: #8E8E8E; }
.ccin i { width: 8px; height: 15px; background: #BDBDBD; opacity: .8; }
.ccfoot { margin-top: 5px; color: #6F6F6F; font-size: 11px; white-space: pre; }

.notif {
  position: absolute; left: 1138px; top: 46px; width: 360px; display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 13px;
  border-radius: 22px; background: rgba(46, 46, 52, .985); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .2) inset, 0 18px 40px rgba(0, 0, 0, .4);
  opacity: 0; will-change: transform;
}
.msg { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(180deg, #9F9AE0, #6E68C4); } /* a plain message bubble, no third-party logo */
.msg svg { width: 24px; height: 24px; }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-body b { font-weight: 650; font-size: 13.5px; }
.notif-body span { color: #E4E4E4; }
.notif-time { position: absolute; right: 14px; top: 12px; font-size: 12px; color: #9C9C9C; }

.nbmenu {
  position: absolute; left: 1100px; top: 41px; width: 316px; padding: 5px; border-radius: 12px;
  background: rgba(42, 42, 48, .985); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .22) inset, 0 18px 44px rgba(0, 0, 0, .5);
  color: #ECECEC; font-size: 13.5px; opacity: 0; transform-origin: 50% 0;
}
.nbmenu .r, .try-menu .r { position: relative; display: flex; align-items: center; height: 24px; padding: 0 12px 0 24px; border-radius: 6px; white-space: nowrap; }
.nbmenu .r.dim { color: rgba(255, 255, 255, .45); }
.nbmenu .k, .try-menu .k { margin-left: auto; padding-left: 20px; color: rgba(255, 255, 255, .5); letter-spacing: .02em; }
.nbmenu .k.chev, .try-menu .k.chev { font-size: 16px; }
.nbmenu .ck, .try-menu .ck { position: absolute; left: 8px; font-size: 12px; }
.nbmenu hr, .try-menu hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .13); margin: 5px 10px; }
.nbmenu .r.hl { background: #F5A524; color: #1B1203; }
.nbmenu .r.hl .k { color: rgba(27, 18, 3, .65); }

.hud {
  position: absolute; left: 613px; top: 78px; width: 286px; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 20px; box-sizing: border-box;
  border-radius: 16px; background: rgba(14, 20, 48, .9); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12) inset, 0 20px 50px rgba(0, 0, 0, .45); color: #EEF0F6;
  opacity: 0;
}
.hud svg { width: 36px; height: 26px; flex: none; }
.hud b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.hud small { display: block; font-size: 12px; color: #A9AFC8; margin-top: 1px; }

.pointer { position: absolute; left: 0; top: 0; width: 22px; height: 31px; opacity: 0; transform-origin: 2.4px 1.9px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); will-change: transform; }

/* ---------- sections ---------- */
.feature, .stacked, .nightfall, .promises, .faq-sec, .last { position: relative; z-index: 1; }
.feature { padding-top: var(--gap-section); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(48px, 6vw, 104px); align-items: center; }
.feature-grid.reverse { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
.feature-grid.reverse .copy { order: 2; }
.copy h2 { margin-bottom: 26px; font-size: clamp(38px, 4.2vw, 60px); }
.copy .lede { margin: 0; font-size: clamp(18px, 1.45vw, 20.5px); line-height: 1.55; color: var(--ink-2); max-width: 30em; }
.copy p { color: var(--ink-2); max-width: 31em; margin: 18px 0 0; }
.stacked { padding-top: max(110px, calc(var(--gap-section) - 130px)); }
.stacked-head { max-width: 48rem; margin: 0 auto; text-align: center; }
.stacked-head h2 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1; }
.stacked-head .lede { max-width: 31em; text-wrap: balance; margin: 26px auto 0; font-size: clamp(18px, 1.45vw, 20.5px); line-height: 1.55; color: var(--ink-2); }
.panel.panel-wide { margin-top: clamp(48px, 6vw, 80px); border-radius: 36px; min-height: clamp(440px, 44vw, 620px); }
.steps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-content: start; }
.steps li::before {
  content: counter(st); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 500 19px/1 var(--display); color: var(--ink); border: 1px solid var(--line); background: var(--card);
}
.steps h3 { padding-top: 6px; }
.steps p { margin: 6px 0 0; font-size: 16px; color: var(--ink-2); }
.keys { white-space: nowrap; }
kbd { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em; margin: 0 1px; font: 600 .8em/1 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; vertical-align: .1em; }

.guards { margin: 72px 0 0; padding-top: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.guards > div { position: relative; }
.guards > div::before { content: ""; position: absolute; left: 0; right: 0; top: -33px; height: 2px; border-radius: 2px; background: #F5A524; transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.guards > div.on::before { transform: none; }
.guards dt { font-weight: 600; letter-spacing: -0.012em; }
.guards dd { margin: 5px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }

.panel {
  position: relative; margin: 0; min-height: clamp(460px, 46vw, 700px); display: grid; place-items: center; overflow: hidden;
  background: var(--panel) center / cover no-repeat, var(--bg-2); box-shadow: 0 0 0 1px var(--edge), var(--shadow-panel);
  --bleed: calc(-1 * ((100vw - min(100vw, var(--wrap-max))) / 2 + var(--pad)));
}
.panel-right { margin-right: var(--bleed); border-radius: 40px 0 0 40px; }
.panel-left { margin-left: var(--bleed); border-radius: 0 40px 40px 0; }
.panel-dusk { background-color: #C9A2A8; }
#try { --panel: url(img/panel-morning-2000.webp); --panel-sm: url(img/panel-morning-1100.webp); }
#cafe { --panel: url(img/panel-cafe2-2000.webp); --panel-sm: url(img/panel-cafe2-1100.webp); }
:root[data-theme="dark"] #cafe { --panel: url(img/panel-cafe-evening-2000.webp); --panel-sm: url(img/panel-cafe-evening-1100.webp); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #cafe { --panel: url(img/panel-cafe-evening-2000.webp); --panel-sm: url(img/panel-cafe-evening-1100.webp); } }
:root[data-theme="dark"] #try { --panel: url(img/panel-morning-night-2000.webp); --panel-sm: url(img/panel-morning-night-1100.webp); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #try { --panel: url(img/panel-morning-night-2000.webp); --panel-sm: url(img/panel-morning-night-1100.webp); } }
.panel figcaption { position: absolute; z-index: 2; left: 24px; bottom: 22px; padding: 8px 12px; border-radius: 999px; font: 500 13.5px/1 var(--sans); color: #0E1430; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* panels 1 and 3: a real menu bar across the top of the picture, the menu dropping from the moon,
   drawn larger than life (--ui) like a Retina crop, so the product reads at the size of the picture */
.panel.desk { display: block; --ui: 1.4; }
.desk-ui { position: absolute; z-index: 2; top: 0; right: 0; width: calc(100% / var(--ui)); height: calc(100% / var(--ui)); transform: scale(var(--ui)); transform-origin: 100% 0; }
.panel::before { content: ""; position: absolute; inset: 0; background: var(--panel-dim); pointer-events: none; }
.bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 30px; display: flex; align-items: center; gap: 18px; padding: 0 18px 0 22px;
  color: var(--bar-ink); background: var(--bar-bg); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  font: 500 13.5px/1 var(--sans); letter-spacing: -0.005em;
}
.bar-apple { width: 14px; height: 17px; margin-top: -2px; }
.bar-app { font-weight: 700; }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bar-ic { width: 17px; height: 17px; }
.bar-batt svg { display: block; width: 25px; height: 12px; }
.bar-time { font-variant-numeric: tabular-nums; }
.try-nb { position: relative; display: grid; place-items: center; width: 34px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; transition: background .15s; }
.try-nb:hover, .panel.open .try-nb { background: color-mix(in srgb, var(--bar-ink) 16%, transparent); }
.try-nb svg { grid-area: 1 / 1; width: 19px; height: 13.3px; transition: opacity .25s ease, transform .4s cubic-bezier(.2, .8, .3, 1); }
.try-nb .i-sun { opacity: 0; transform: translateY(2px) scale(.85); }
.try-nb.on .i-sun, .panel.on .try-nb .i-sun { opacity: 1; transform: none; }
.try-nb.on .i-moon, .panel.on .try-nb .i-moon { opacity: 0; transform: scale(.5); }
.try-nb::after { content: ""; position: absolute; inset: -5px; border-radius: 10px; border: 2px solid rgba(245, 165, 36, .95); opacity: 0; animation: nb-hint 2.6s ease-out 1.5s 3; }
.panel.on .try-nb::after, .panel.used .try-nb::after, span.try-nb::after { animation: none; }
@keyframes nb-hint { 0% { opacity: .9; transform: scale(.85); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
.try-menu {
  position: absolute; z-index: 2; top: 34px; left: 0; width: 330px; padding: 5px; border-radius: 12px;
  background: var(--menu-bg); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 0 0 .5px var(--menu-line), 0 26px 50px -22px rgba(14, 20, 48, .55);
  font: 400 13.5px/1 var(--sans); color: var(--menu-ink); text-align: left;
}
.try-menu .r { height: 25px; }
.try-menu .r.dim, .try-menu .k { color: var(--menu-dim); }
.try-menu hr { border-top-color: var(--menu-line); }
.try-menu .r.hl { background: #F5A524; color: #1B1203; }
.try-menu .r.hl .k { color: rgba(27, 18, 3, .65); }
.try-menu.sub { width: 206px; }
.try-menu.sub.nofit { display: none; }
#try-toggle { cursor: pointer; }
.try-menu .why { transition: opacity .3s ease; }
.try-menu .why.swap { opacity: 0; }
.try-hud {
  position: absolute; z-index: 3; left: 50%; top: 92px; width: max-content; display: flex; align-items: center; gap: 12px; padding: 13px 20px; white-space: nowrap;
  border-radius: 16px; background: rgba(14, 20, 48, .88); color: #EEF0F6; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12) inset, 0 20px 50px -10px rgba(0, 0, 0, .45); transform: translate(-50%, 6px) scale(.97); opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .2s ease;
}
.try-hud.show { opacity: 1; transform: translate(-50%, 0); }
.try-hud.hide { transition-duration: .4s; }
#try .try-menu { transition: opacity .35s ease .25s; }
#try.hud-up .try-menu { opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.try-hud svg { width: 34px; height: 25px; flex: none; }
.try-hud .i-moon { display: none; } .try-hud.off .i-moon { display: block; } .try-hud.off .i-sun { display: none; }
.try-hud b { display: block; font: 600 15.5px/1.25 var(--sans); }
.try-hud small { display: block; font: 400 12.5px/1.3 var(--sans); color: #A9AFC8; margin-top: 2px; }

/* panel 2: the message thread */
.chat {
  width: min(380px, 84%); padding: 16px 16px 18px; border-radius: 28px;
  background: var(--chat-bg); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chat-ink) 12%, transparent) inset, 0 30px 60px -24px rgba(10, 10, 30, .5); color: var(--chat-ink);
}
.chat-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; border-bottom: 1px solid var(--chat-line); margin-bottom: 6px; font-size: 15px; }
.chat-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--sans); color: #fff; background: linear-gradient(135deg, #6CA8FF, #3B6FE0); }
.bubble { width: fit-content; max-width: 80%; margin-top: 10px; padding: 9px 12px 8px; border-radius: 18px; font: 400 15.5px/1.35 var(--sans); letter-spacing: -0.01em; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.bubble time { display: inline-block; margin-left: 10px; font-size: 11px; color: var(--b-time); vertical-align: -2px; }
.bubble.in { background: var(--b-in); border-bottom-left-radius: 6px; }
.bubble.out { margin-left: auto; background: var(--b-out); border-bottom-right-radius: 6px; }

/* panel 4: the command */
.code-stack { width: min(580px, 88%); }
.term { border-radius: 16px; overflow: hidden; background: rgba(9, 12, 28, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(238, 240, 246, .1) inset, 0 40px 70px -30px rgba(0, 0, 0, .7); }
.term-bar { position: relative; height: 36px; display: flex; align-items: center; justify-content: center; color: #8B92B4; font: 500 12.5px/1 var(--sans); border-bottom: 1px solid rgba(238, 240, 246, .07); }
.term-bar .lights { position: absolute; left: 14px; top: 12px; margin: 0; }
.term pre { margin: 0; padding: 20px 22px 22px; font: 400 14.5px/1.8 var(--mono); color: #EEF0F6; white-space: pre; overflow-x: auto; }
.term .p { color: #7C86B8; } .term .g { color: #F5A524; } .term .o { color: #A9B0CC; }
.doc { position: relative; width: 86%; margin: -22px -18px 0 auto; padding: 18px 22px 20px; border-radius: 16px; background: rgba(250, 251, 253, .95); color: #0E1430; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); font: 400 15px/1.55 var(--sans); }
.doc-h { font: 600 12.5px/1 var(--sans); color: #6A7090; margin-bottom: 10px; }
.doc p { margin: 0; } .doc p + p { margin-top: 8px; }
.doc code { font: 500 13.5px/1 var(--mono); background: rgba(14, 20, 48, .07); padding: .14em .4em; border-radius: 6px; }
.night .doc {
  width: 84%; margin: -46px -40px 0 auto; background: rgba(30, 38, 78, .72); color: #EEF0F6;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(238, 240, 246, .12), 0 30px 60px -24px rgba(0, 0, 0, .7);
}
.night .doc-h { color: #9AA1C2; }
.code-stack .term pre { padding-bottom: 64px; }
.night .doc code { background: rgba(238, 240, 246, .1); color: #fff; }

/* night: nightfall, then the band, questions, last call and footer, in both themes */
.night {
  --bg: #0E1430; --bg-2: #161D40; --line: #232B57; --ink: #EEF0F6; --ink-2: #A9AFC8; --ink-3: #8088AA;
  --card: #161D40; --edge: rgba(238, 240, 246, .1); --plate: #161D40;
  background: var(--bg); color: var(--ink); color-scheme: dark;
}
/* nightfall: the same range just after sunset, fading in from the page and down into the night below */
.nightfall {
  --nf-img: url(img/dusk-2560.webp); --nf-pos: 50% 100%; --nf-size: max(100%, 1500px) auto;
  height: clamp(380px, 38vw, 820px); margin-top: clamp(110px, 12vw, 170px);
  background: linear-gradient(180deg, var(--bg), transparent var(--nf-fade), transparent 62%, #0E1430), linear-gradient(var(--nf-veil), var(--nf-veil)), var(--nf-img) var(--nf-pos) / var(--nf-size) no-repeat, #0E1430;
}

#agents { padding-top: clamp(40px, 6vw, 90px); padding-bottom: var(--gap-section); }

/* what it promises: four small facts in a row, under a few stars */
.promises { color: var(--ink); }
.promises::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: clamp(90px, 10vw, 150px); pointer-events: none; opacity: .8; background:
  radial-gradient(1.2px 1.2px at 8% 22%, #fff, transparent), radial-gradient(1px 1px at 17% 64%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 26% 12%, #fff, transparent), radial-gradient(1px 1px at 39% 44%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 52% 8%, #fff, transparent), radial-gradient(1px 1px at 61% 31%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 72% 16%, #fff, transparent), radial-gradient(1px 1px at 83% 52%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 91% 27%, #fff, transparent), radial-gradient(1px 1px at 96% 70%, #fff, transparent),
  radial-gradient(1px 1px at 4% 80%, #fff, transparent), radial-gradient(1.2px 1.2px at 47% 72%, #fff, transparent); }
.promises .wrap { position: relative; }
.promises code { background: rgba(238, 240, 246, .1); color: #fff; }
.facts { list-style: none; margin: 0; padding: 36px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.facts li { display: grid; gap: 16px; align-content: start; }
.facts svg { width: 26px; height: 26px; color: #F5A524; }
.facts h3 { font-size: 17px; }
.facts p { margin: 6px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }

/* questions */
.faq-sec { padding-top: clamp(96px, 11vw, 170px); }
.faq { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq h2 { position: sticky; top: 100px; }
details { border-bottom: 1px solid var(--line); padding: 22px 0; }
details:first-child { border-top: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font: 500 18.5px/1.4 var(--sans); letter-spacing: -0.014em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font: 300 26px/1 var(--sans); color: var(--ink-3); transition: transform .25s ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 14px 0 4px; color: var(--ink-2); max-width: 40em; }

.oa { margin-top: clamp(96px, 10vw, 150px); scroll-margin-top: 24px; }
.oa-side { max-width: 40em; }
.oa-title { font: 400 clamp(30px, 3vw, 40px)/1.08 var(--display); letter-spacing: -0.03em; }
.oa-intro { color: var(--ink-2); margin: 16px 0 0; }
.oa-note { color: var(--ink-3); font-size: 15px; margin: 12px 0 0; }
.oa-steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: oa; }
.oa-steps li { counter-increment: oa; display: grid; grid-template-rows: auto 1fr; gap: 20px; align-content: start; }
.oa-steps li > p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.oa-steps li > p b { color: var(--ink); font-weight: 600; }
.oa-steps li > p::before { content: counter(oa); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); font: 500 15px/1 var(--display); color: var(--ink); margin-top: -1px; }
.plate { order: -1; margin: 0; padding: 18px; height: 220px; border-radius: 18px; background: var(--plate, #F7F7F8); border: 1px solid var(--line); display: grid; place-items: center; }
.plate img { display: block; max-height: 150px; width: auto; max-width: 100%; border-radius: 10px; }
.plate.pw { color: var(--ink-2); gap: 14px; align-content: center; }
.plate.pw svg { width: 32px; height: 32px; }
.plate.pw .field { display: block; width: min(200px, 100%); padding: 9px 12px; border-radius: 7px; background: #1E2030; border: 1px solid #3A3F5C; font: 400 16px/1 -apple-system, BlinkMacSystemFont, var(--sans); letter-spacing: .18em; color: #fff; box-shadow: 0 0 0 3px rgba(80, 140, 255, .45); }

/* last call: full bleed, the mark over the night ridge */
.last { padding: 0; }
.last-card { position: relative; overflow: hidden; min-height: clamp(760px, 70vw, 1000px); display: grid; align-items: start; justify-items: center; text-align: center; color: #fff; background: var(--bg); isolation: isolate; }
.last-art { position: absolute; inset: 0; z-index: -1; background: var(--bg); }
.last-art::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(42.42vw, 636px);
  background: url(img/hero-night-2560.webp) 50% 100% / max(100%, 1500px) auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.last-copy { position: relative; }
.last-glow { position: absolute; left: 50%; top: calc(var(--gap-section) - 150px); width: 760px; height: 420px; margin-left: -380px; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, rgba(255, 180, 70, .42), rgba(255, 160, 50, .12) 55%, rgba(255, 150, 50, 0)); }
.last-mtn { position: absolute; inset: 0; background: url(img/hero-night-2560.webp) 50% 100% / max(100%, 1500px) auto no-repeat; -webkit-mask: url(img/mtn-mask-v2.png) 50% 100% / max(100%, 1500px) auto no-repeat; mask: url(img/mtn-mask-v2.png) 50% 100% / max(100%, 1500px) auto no-repeat; }
.last-copy { padding-top: var(--gap-section); max-width: 960px; }
.last-mark { display: block; width: clamp(92px, 8vw, 124px); height: auto; margin: 0 auto 36px; filter: drop-shadow(0 0 18px rgba(255, 170, 50, .55)) drop-shadow(0 0 50px rgba(255, 160, 40, .3)); }
.mark-orb .last-mark, .mark-seam .last-mark, .mark-window .last-mark { width: clamp(84px, 7vw, 112px); filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); }
.last h2 { font-size: clamp(44px, 6vw, 86px); line-height: 1; }
.last p { text-wrap: balance; margin: 22px auto 34px; color: #C9CEE0; font-size: clamp(17px, 1.4vw, 19px); max-width: 30em; }
.last .last-note { margin: 18px auto 0; font-size: 14px; color: #9AA1C2; }

.foot { border-top: 1px solid var(--line); padding: 40px 0 56px; }
.foot.night .brand.small { color: var(--ink); }
.foot-row { display: flex; align-items: center; gap: 18px 40px; flex-wrap: wrap; }
.brand.small { font-size: 20px; color: var(--ink); }
.brand.small .mark { width: 36px; height: 36px; }
.mark-orb .brand.small .mark, .mark-seam .brand.small .mark, .mark-window .brand.small .mark { width: 26px; height: 26px; }
.foot-meaning { margin: 0; font: italic 400 18px/1.3 var(--display); color: var(--ink-2); }
.foot-help { margin: 0 0 0 auto; color: var(--ink-3); font-size: 14.5px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-end { margin-left: auto; }
  .guards, .facts { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
}
@media (max-width: 900px) {
  :root { --pad: 22px; }
  .sky { --sky-h: clamp(700px, 100svh, 900px); --bgpos: 36% 100%; }
  .sky-night { background-image: url(img/hero-night-1600.webp); }
  .sky-day { background-image: url(img/hero-day-1600.webp); }
  .nightfall { --nf-img: url(img/dusk-1600.webp); }
  .feature-grid, .feature-grid.reverse, .faq { grid-template-columns: minmax(0, 1fr); }
  /* the picture right after the headline and lede, the rest of the copy under it */
  .feature-grid { row-gap: 0; }
  .feature-grid .copy { display: contents; }
  .feature-grid .copy h2 { order: 0; } .feature-grid .copy .lede { order: 1; }
  .feature-grid .panel { order: 2; margin-top: 40px; }
  .feature-grid .copy > p:not(.lede) { order: 3; margin-top: 28px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; }
  .guards, .facts { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .oa-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 36px; }
  .plate { height: 200px; }
  .panel { --bleed: calc(-1 * var(--pad)); background-image: var(--panel-sm); min-height: 520px; }
  .panel-right, .panel-left { margin-inline: 0; border-radius: 30px; }
  .faq h2 { position: static; }
  .try-menu.sub { display: none; }
  .panel.desk { --ui: 1.2; }
  .guards > div::before { display: none; }
  .foot-help { margin-left: 0; }
}
@media (max-width: 600px) {
  :root { --pad: 16px; }
  body { font-size: 16.5px; }
  .nav { height: 72px; gap: 10px; }
  .brand { font-size: 21px; } .brand .mark { width: 30px; height: 30px; }
  .theme-toggle { width: 36px; height: 36px; }
  .nav .get-sm { padding: 9px 13px 9px 12px; font-size: 14px; }
  .hero-copy { padding-top: 36px; }
  .hero-title { font-size: clamp(36px, 10.4vw, 48px); line-height: 1.02; }
  .hero-title .ln { display: inline; }
  .hero-lede { margin-top: 20px; font-size: 16.5px; }
  .hero-cta { margin-top: 28px; }
  .demo-wrap { margin-top: 40px; padding-inline: 8px; }
  .demo-end { top: 70%; }
  .demo-ctl { bottom: -50px; }
  .panel { min-height: 460px; }
  .panel figcaption { left: 16px; bottom: 16px; }
  .try-hud { width: max-content; }
  .panel.desk { --ui: 1; }
  .steps li { grid-template-columns: 40px minmax(0, 1fr); }
  .last-card { min-height: 660px; }
  .nightfall { height: 440px; --nf-size: auto 100%; --nf-pos: 34% 100%; }
  .last-art::before { height: 46%; background-size: auto 100%; }
  .last-mtn { background-size: auto 46%; -webkit-mask-size: auto 46%; mask-size: auto 46%; }
  .last-glow { width: 520px; margin-left: -260px; height: 340px; }
  .guards, .facts { grid-template-columns: minmax(0, 1fr); }
  .term pre { font-size: 12.5px; padding: 16px; }
  .doc, .night .doc { width: 92%; margin-right: -8px; font-size: 14px; }
  summary { font-size: 17px; }
  .get-float { top: auto; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); justify-content: center; padding: 15px 18px; font-size: 16px; transform: translateY(16px); }
  .get-float.show.away { transform: translateY(16px); }
  .foot { padding-bottom: 120px; }
}
/* where the tag wraps to two lines: room for the agents' five lines under the lid, and the play button under them */
@media (max-width: 480px) { .demo-wrap { padding-bottom: 74px; } .demo-ctl { bottom: -128px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .get, .theme-toggle svg, .try-nb svg, .try-hud, .get-float, .try-menu .why, .guards > div::before { transition: none; }
  .try-nb::after { animation: none; }
}

/* ---------- the world: a white night over the sea, the default. ?world=mountains keeps the first painting.
   The sun comes down to the horizon and doesn't set; the horizon is the closed lid, the sun the one under it. ---------- */
/* a little shorter than the mountains' sky, so the horizon lands just above the laptop and the sun sits clear of it */
.world-sea .sky { --bgpos: 12% 100%; --sky-h: clamp(720px, 104vh, 1040px); }
.world-sea .sky-night { background-image: url(img/sea-night-2560.webp); }
.world-sea .sky-day { background-image: url(img/sea-day-2560.webp); }
.world-sea .sky-masked { -webkit-mask-image: url(img/sea-sky-alpha.png); mask-image: url(img/sea-sky-alpha.png); }
/* the warm light lands on the water instead of the snow */
.world-sea .mtn-light {
  -webkit-mask-image: url(img/sea-water-alpha.png); mask-image: url(img/sea-water-alpha.png);
  background: linear-gradient(to top, rgba(255, 160, 90, 0) 8%, rgba(255, 176, 110, .5) 40%);
}
.world-sea .nightfall { --nf-img: url(img/sea-dusk-2560.webp); }
.world-sea .last-art::before { background-image: url(img/sea-night-2560.webp); }
.world-sea .last-mtn { display: none; }
/* the horizon's glow sits below the small print, not behind it */
.world-sea .last-art::before { bottom: -90px; }
/* the painted sun was this big; the page's sun matches it */
.world-sea .sun-disc { width: 150px; height: 150px; margin: -75px; }
/* on the pale white-night sky the hero's words are ink; at night they're white again */
:root.world-sea { --hero-ink: #0E1430; --hero-ink-2: rgba(14, 20, 48, .74); --hero-glow: 0 1px 30px rgba(255, 246, 240, .55); --hero-ctl: rgba(14, 20, 48, .08); --hero-ctl-edge: rgba(14, 20, 48, .18); }
@media (prefers-color-scheme: dark) { :root.world-sea:not([data-theme="light"]) { --hero-ink: #fff; --hero-ink-2: rgba(255, 255, 255, .9); --hero-glow: 0 1px 18px rgba(8, 24, 70, .35); --hero-ctl: rgba(255, 255, 255, .14); --hero-ctl-edge: rgba(255, 255, 255, .26); } }
:root.world-sea[data-theme="dark"] { --hero-ink: #fff; --hero-ink-2: rgba(255, 255, 255, .9); --hero-glow: 0 1px 18px rgba(8, 24, 70, .35); --hero-ctl: rgba(255, 255, 255, .14); --hero-ctl-edge: rgba(255, 255, 255, .26); }
.world-sea .hero-copy, .world-sea .nav, .world-sea .theme-toggle { color: var(--hero-ink); transition: color .8s ease; }
.world-sea .hero-title { text-shadow: var(--hero-glow); }
.world-sea .hero-lede { color: var(--hero-ink-2); text-shadow: var(--hero-glow); transition: color .8s ease; }
.world-sea .nav-links a { color: var(--hero-ink-2); }
.world-sea .nav-links a:hover { color: var(--hero-ink); }
.world-sea .theme-toggle { background: var(--hero-ctl); border-color: var(--hero-ctl-edge); }
.world-sea .wallpaper { background-image: url(img/sea-day-1600.webp); background-position: 72% 62%; }
@media (max-width: 900px) {
  .world-sea .sky { --bgpos: 60% 100%; --sky-h: clamp(700px, 100svh, 900px); }
  .world-sea .sky-night { background-image: url(img/sea-night-1600.webp); }
  .world-sea .sky-day { background-image: url(img/sea-day-1600.webp); }
  .world-sea .nightfall { --nf-img: url(img/sea-dusk-1600.webp); }
}
@media (max-width: 600px) {
  .world-sea .sky { --sky-h: 690px; }
  .world-sea .sun-disc { width: 108px; height: 108px; margin: -54px; }
  .world-sea .nightfall { --nf-pos: 50% 100%; }
  .world-sea .last-art::before { bottom: -40px; }
}