/* pulsebar site, in the manner of Apple's product pages: centred sections, big
   tight headlines, quiet grey copy, rounded tiles, one blue for actions. Dark only:
   the product is a black island and every capture is dark. The page colour equals
   the hero video's background, and tiles equal the colour the pill shots were
   taken over, so no capture shows an edge. */
/* Light by default; the footer switch sets data-theme="dark". Captures always sit on
   dark "screens" whose colour is the one they were shot over (--shot-page for the
   page-colour shots and the video, --shot-tile for the pill shots). */
:root {
  --bg: #ffffff;
  --tile: #f5f5f7;
  --line: rgb(0 0 0 / 0.1);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --link: #0066cc;
  --bar: rgb(255 255 255 / 0.72);
  --bar-link: rgb(0 0 0 / 0.8);
  --shot-page: #0a0a0a;
  --shot-tile: #141416;
  --screen-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.35);
  --action: #0071e3;
  --action-hover: #0077ed;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --pad: max(22px, env(safe-area-inset-left), env(safe-area-inset-right));
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --tile: #141416;
  --line: rgb(255 255 255 / 0.1);
  --text: #f5f5f7;
  --muted: #86868b;
  --link: #2997ff;
  --bar: rgb(10 10 10 / 0.72);
  --bar-link: rgb(245 245 247 / 0.8);
  --screen-shadow: none;
  color-scheme: dark;
}
/* A dark panel that holds captures, in the colour they were shot over. */
.screen { background: var(--shot-page); border-radius: 28px; box-shadow: var(--screen-shadow); }
.screen-tile { background: var(--shot-tile); border-radius: 20px; }
:root[data-theme="dark"] .screen { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.47 var(--font);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: var(--pad); top: -60px; z-index: 20; padding: 10px 16px; border-radius: 980px; background: var(--action); color: #fff; transition: top 0.2s var(--ease); }
.skip:focus { top: 8px; text-decoration: none; }

.wrap { width: min(980px, 100% - 2 * var(--pad)); margin-inline: auto; }
.wide { width: min(1120px, 100% - 2 * var(--pad)); margin-inline: auto; }

/* The product bar: name on the left, a few links and Buy on the right. */
.bar { position: sticky; top: 0; z-index: 10; height: 52px; background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 24px; height: 100%; }
.bar .name { color: var(--text); font-size: 21px; font-weight: 600; letter-spacing: 0.011em; margin-right: auto; }
.bar .name:hover { text-decoration: none; }
.bar nav { display: flex; gap: 24px; font-size: 12px; letter-spacing: -0.01em; }
.bar nav a { color: var(--bar-link); }
.bar nav a:hover { color: var(--text); text-decoration: none; }

/* Buttons: Apple's blue pill. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 22px; border-radius: 980px; background: var(--action); color: #fff; font-size: 17px; font-weight: 400; letter-spacing: -0.022em; white-space: nowrap; transition: background-color 0.2s var(--ease), transform 0.15s var(--ease); }
.btn:hover { background: var(--action-hover); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-small { min-height: 0; padding: 4px 12px; font-size: 12px; }
.more::after { content: " \203A"; }

/* Sections */
section { padding: 120px 0 0; text-align: center; }
.title { font-size: clamp(40px, 6vw, 64px); line-height: 1.06; letter-spacing: -0.009em; font-weight: 600; }
.lead { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.33; color: var(--muted); font-weight: 500; max-width: 640px; margin: 18px auto 0; letter-spacing: 0.009em; }
.lead strong { color: var(--text); font-weight: 600; }
.kbd { color: var(--text); font-weight: 600; }
.caption { margin-top: 18px; font-size: 14px; color: var(--muted); letter-spacing: -0.016em; }

/* Hero */
.hero { padding-top: 72px; }
.hero h1 { font-size: clamp(56px, 10vw, 96px); line-height: 1.05; letter-spacing: -0.015em; font-weight: 600; }
.hero .tagline { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.125; font-weight: 600; margin-top: 10px; letter-spacing: 0.004em; }
.hero .lead { margin-top: 16px; }
.ctas { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.ctas a:not(.btn) { font-size: 17px; }

/* Clips are recorded over the real wallpaper, so they need no frame of their own:
   just rounded corners and a soft shadow (a faint edge on the dark page). */
.stage { position: relative; width: min(600px, calc(100% - 32px)); margin: 56px auto 0; }
.stage video, .stage img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 492; }
.stage video, .stage img, .clip video { border-radius: 18px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 18px 48px -12px rgb(0 0 0 / 0.35); }
:root[data-theme="dark"] :is(.stage video, .stage img, .clip video) { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); }
.play { position: absolute; right: 4px; bottom: -48px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background-color 0.2s var(--ease); }
.play:hover { background: color-mix(in srgb, var(--text) 14%, transparent); }
.play svg { width: 14px; height: 14px; fill: currentColor; }
.play .icon-play, .play[data-paused] .icon-pause { display: none; }
.play[data-paused] .icon-play { display: block; }

/* A looping clip with its pause button under its right edge. */
.clip { position: relative; margin: 56px auto 0; width: min(600px, calc(100% - 32px)); }
.clip + .clip { margin-top: 72px; }
:root .clip .screen { padding: 0; background: none; box-shadow: none; }
.clip video { display: block; width: 100%; height: auto; }
.clip.wide-clip { width: min(880px, calc(100% - 32px)); }
.clip .caption { margin-top: 18px; padding-right: 48px; }
.clip .play { bottom: auto; top: calc(100% + 10px); }
.clip:has(.caption) .play { top: auto; bottom: -4px; }

/* A single capture, centred under its headline. */
.shot { margin: 56px auto 0; width: fit-content; max-width: 100%; }
.shot .screen { padding: 24px; }
.fade { -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent); mask-image: linear-gradient(180deg, #000 68%, transparent); }

/* A large tile holding captures taken over the tile colour. */
.feature { margin-top: 56px; border-radius: 28px; background: var(--shot-tile); box-shadow: var(--screen-shadow); padding: 64px 32px; display: grid; justify-items: center; gap: 28px; }
.island-crop { border-radius: 18px; overflow: hidden; background: #0b0b0d; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); max-width: 100%; }

/* Tiles: two by two, each a headline, a line, and its capture. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; text-align: left; }
.tile { border-radius: 28px; background: var(--tile); padding: 40px 36px 36px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tile h3 { font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: 0.007em; }
.tile p { color: var(--muted); font-size: 17px; }
.tile .shots { margin-top: auto; display: grid; gap: 12px; justify-items: center; padding: 24px; background: var(--shot-tile); border-radius: 20px; }

/* Numbers */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64px; }
.figure strong { display: block; font-size: clamp(40px, 5vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.figure span { display: block; margin-top: 6px; color: var(--muted); font-size: 17px; }

/* Pricing */
.price { font-size: clamp(64px, 9vw, 96px); line-height: 1; font-weight: 600; letter-spacing: -0.015em; margin-top: 24px; font-variant-numeric: tabular-nums; }
.price-note { margin-top: 12px; color: var(--muted); font-size: 15px; }
.terms { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin: 24px auto 0; padding: 0; list-style: none; color: var(--muted); font-size: 17px; }

/* FAQ */
.faq { max-width: 760px; margin: 48px auto 0; text-align: left; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; font-size: 21px; font-weight: 600; letter-spacing: 0.011em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-size: 28px; font-weight: 300; color: var(--muted); transition: rotate 0.25s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover::after { color: var(--text); }
.faq details p { color: var(--muted); padding: 0 40px 28px 0; }

/* Footer */
footer { margin-top: 140px; padding: 20px 0 calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: -0.01em; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer nav { display: flex; gap: 0; margin-left: auto; }
footer nav a { color: var(--bar-link); padding: 0 10px; border-left: 1px solid var(--line); }
footer nav a:first-child { border-left: 0; }

/* Legal pages */
.legal { text-align: left; padding-top: 72px; }
.legal .wrap { max-width: 692px; }
.legal h1 { font-size: 48px; line-height: 1.08; font-weight: 600; }
.legal .updated { color: var(--muted); margin: 12px 0 40px; }
.legal h2 { font-size: 24px; font-weight: 600; margin: 40px 0 10px; }
.legal p, .legal li { color: color-mix(in srgb, var(--text) 84%, var(--bg)); }
.legal p + p { margin-top: 14px; }
.legal ul { padding-left: 22px; }

/* Content rises in as it scrolls into view, unless motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; translate: 0 32px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
  .reveal.in { opacity: 1; translate: 0 0; }
}

@media (max-width: 734px) {
  section { padding-top: 88px; }
  .bar nav { display: none; }
  .tiles, .figures { grid-template-columns: 1fr; }
  .figures { gap: 36px; }
  .feature { padding: 40px 16px; }
  .tile { padding: 32px 24px 28px; }
  footer nav { margin-left: 0; }
  footer nav a:first-child { padding-left: 0; }
}

/* The light / dark switch in the footer. */
.theme { margin-left: 10px; padding: 0 0 0 10px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--bar-link); font: inherit; cursor: pointer; }
.theme:hover { color: var(--text); text-decoration: underline; }