/* Parallax v2. Six colours, two faces; everything else is scrollcraft.css.
   A studio, not a space scene: near-black, one soft light on the machine,
   white as the only accent. */
:root {
  --sc-canvas:     #050608;
  --sc-surface:    #0c0e13;
  --sc-ink:        #f4f5f7;
  --sc-ink-soft:   #9da3b2;
  --sc-accent:     #f4f5f7;
  --sc-accent-ink: #050608;
  --sc-font-display: "Geist", system-ui, sans-serif;
  --sc-font-text:    system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-shadow-color: 228 30% 2%;

  --glass: color-mix(in oklab, #0d0f15 62%, transparent);
  --rim:   color-mix(in oklab, #ffffff 11%, transparent);
  --r-panel: 24px;
  --r-ctl: 12px;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* body is its own stacking context, so its background always paints under the
   backdrop canvases (z-index -1). Without it, anything that gives html a
   background of its own (a dark-mode extension did: rgb(17 21 23)) stops body's
   from propagating to the page, and body's box then covers both canvases: black. */
body { background: var(--sc-canvas); isolation: isolate; }
.backdrop { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: -1; display: block; pointer-events: none; }
/* The clip is only a texture source, but it has to stay in the layout or it never decodes. */
#macVideo { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* ── bar ──────────────────────────────────────────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--sc-gutter);
  pointer-events: none;
}
.bar > * {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--sc-r-pill);
  color: var(--sc-ink); text-decoration: none;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--rim);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.bar__mark { font: 600 0.95rem/1 var(--sc-font-display); letter-spacing: -0.01em; padding-left: 12px; }
.bar__buy { font: 500 0.875rem/1 var(--sc-font-text); }
@media (hover: hover) and (pointer: fine) { .bar > *:hover { background: color-mix(in oklab, #1a1d26 80%, transparent); } }
.bar > *:active { transform: scale(0.97); }
.bar__glyph { position: relative; width: 20px; height: 16px; }
.bar__glyph i { position: absolute; width: 14px; height: 11px; border-radius: 3.5px; border: 1.5px solid currentColor; }
.bar__glyph i:first-child { left: 0; top: 0; opacity: 0.4; }
.bar__glyph i:last-child { right: 0; bottom: 0; background: #11131a; }

/* ── hero ─────────────────────────────────────────────────────────────── */
/* The machine stands in a pool of shade on the glass, so it reads before
   the backdrop does, and on a faint floor of its own reflection. */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: clip;
  background: radial-gradient(48% 42% at 50% 60%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 0%, transparent 72%);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
.hero.is-pointing { cursor: pointer; }
.hero.is-grab { cursor: grab; }
.hero.is-dragging, .hero.is-dragging * { cursor: grabbing !important; user-select: none; }

.hero__intro {
  position: relative; z-index: 2; pointer-events: none;
  padding: 68px var(--sc-gutter) 0;
  text-align: center;
}
.hero__title {
  margin: 0 auto; max-width: 20ch;
  font: 700 clamp(1.9rem, 1.2rem + 2vw, 2.6rem)/1.04 var(--sc-font-display);
  letter-spacing: -0.045em; text-wrap: balance;
}
/* "3D" stands out of the page: its sides (a text-shadow per layer, hero.js
   extrude()) run back into it as the head moves. */
.hero__3d { display: inline-block; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
@media (min-width: 760px) { .hero__title { max-width: none; } }
/* Wide screens: the headline rides the top bar's line, so the Mac gets all
   the height under it. */
@media (min-width: 1100px) {
  .hero__intro { padding-top: 17px; }
  .hero__title { max-width: none; font-size: clamp(1.75rem, 0.9rem + 1.15vw, 2.3rem); line-height: 40px; }
}

/* Camera: a pill in the bar's line; once on, a small live view of the face
   mesh it tracks, with its own off switch. Either one in a neon ring like
   the apps' own, the colour of the app opened last on the Mac (hero.js
   neon()), eased from one to the next. */
@property --cam-a { syntax: "<color>"; inherits: true; initial-value: #7398ff; }
@property --cam-b { syntax: "<color>"; inherits: true; initial-value: #7398ff; }
.cam {
  position: absolute; z-index: 3; top: 18px; right: var(--sc-gutter);
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  --cam-ring: linear-gradient(135deg, var(--cam-a), var(--cam-b));
  transition: --cam-a 600ms var(--sc-ease-out), --cam-b 600ms var(--sc-ease-out);
}
.cam.is-petals { --cam-a: #ff8400; --cam-b: #458dea; --cam-ring: conic-gradient(#70c100, #fec200, #ff8400, #ff545e, #f156c2, #9c78df, #458dea, #30a971, #70c100); }
.cam__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 13px; border-radius: var(--sc-r-pill); cursor: pointer;
  font: 500 0.875rem/1 var(--sc-font-text); color: var(--sc-ink);
  background: var(--glass); border: 1px solid var(--rim);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.cam__btn[hidden], .cam__view[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .cam__btn:hover { background: color-mix(in oklab, #1a1d26 80%, transparent); } }
.cam__btn:active { transform: scale(0.97); }
.cam__btn:disabled { opacity: 0.65; cursor: progress; }
.cam__glyph { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.cam__view {
  position: relative; width: 128px; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--rim); background: #000;
  box-shadow: 0 14px 34px -14px hsl(var(--sc-shadow-color) / 0.9);
  transform-origin: 100% 0;
  animation: cam-in 320ms var(--sc-ease-out);
}
@keyframes cam-in { from { opacity: 0; transform: scale(0.6); border-radius: 22px; } }
.cam__view canvas { display: block; width: 100%; height: 100%; }
.cam__btn, .cam__view { position: relative; border-color: transparent; box-shadow: 0 0 7px -1px var(--cam-a), 0 0 2px var(--cam-b); }
.cam__btn::after, .cam__view::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1.5px; background: var(--cam-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.cam__off {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgb(0 0 0 / 0.55);
  transition: background-color 160ms var(--sc-ease-out);
}
.cam__off svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .cam__off:hover { background: rgb(0 0 0 / 0.8); } }
.cam__note {
  margin: 0; max-width: 220px; padding: 6px 10px; border-radius: 10px;
  font-size: var(--sc-t-xs); line-height: 1.4; color: var(--sc-ink-soft); text-align: right;
  background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.cam__note:empty { display: none; }
@media (max-width: 520px) { .cam__btn { padding: 0 13px; } .cam__btn span { display: none; } }
@media (prefers-reduced-motion: reduce) { .cam__view { animation: none; } }

.apptip {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  transform: translate(-50%, -100%) scale(0.96); opacity: 0;
  padding: 6px 11px; border-radius: 9px;
  font: 500 0.8rem/1 var(--sc-font-text); color: var(--sc-ink); white-space: nowrap;
  background: color-mix(in oklab, #0d0f15 82%, transparent); border: 1px solid var(--rim);
  transition: opacity 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.apptip.is-on { opacity: 1; transform: translate(-50%, -100%) scale(1); }

/* ── buy ──────────────────────────────────────────────────────────────── */
/* One window of glass, as macOS draws them: the city blurred through it, a
   rim of light round its edge, a sheen that slides as the head moves (the
   reflection of a pane, hero.js --hx/--hy), the panes it came off behind it,
   then the name, what it does, the price and one white button. */
.buy {
  display: grid; place-items: center; overflow: clip;
  padding: clamp(4.5rem, 9vw, 8rem) var(--sc-gutter) clamp(6rem, 12vw, 10rem);
}
.checkout { position: relative; isolation: isolate; width: min(100%, 30rem); --r-card: 28px; }
.checkout__layer {
  position: absolute; inset: 0; border-radius: var(--r-card);
  background: rgb(255 255 255 / calc(0.05 - var(--d) * 0.015));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / calc(0.15 - var(--d) * 0.045)), inset 0 1px 0 rgb(255 255 255 / 0.1);
  translate: calc(var(--d) * 22px + var(--hx, 0px) * var(--d)) calc(var(--d) * -22px + var(--hy, 0px) * var(--d));
  scale: calc(1 - var(--d) * 0.04);
}
.checkout__win {
  position: relative; border-radius: var(--r-card);
  background:
    radial-gradient(120% 70% at calc(18% - var(--hx, 0px) * 2) calc(-10% - var(--hy, 0px) * 2), rgb(255 255 255 / 0.13), transparent 62%),
    linear-gradient(to bottom, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.025)),
    rgb(14 16 24 / 0.42);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / 0.75), 0 2px 6px rgb(0 0 0 / 0.25);
}
/* The rim: bright where the light meets the top edge, faint down the sides. */
.checkout__win::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(165deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.14) 30%, rgb(255 255 255 / 0.05) 60%, rgb(255 255 255 / 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
/* Where the city's spotlights land (field.js beams, hero.js aimSpots()): two
   soft pools of light drifting through the glass, both on Buy while it is in
   reach. Under the card's content. */
.checkout__win::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle 170px at var(--sa-x, 30%) var(--sa-y, 40%), rgb(180 140 255 / calc(0.24 * var(--spot, 0))), transparent 72%),
    radial-gradient(circle 170px at var(--sb-x, 70%) var(--sb-y, 40%), rgb(95 224 216 / calc(0.22 * var(--spot, 0))), transparent 72%);
  mix-blend-mode: screen;
}
.checkout__bar, .checkout__body { position: relative; z-index: 1; }
.checkout__bar { position: relative; display: flex; gap: 8px; align-items: center; height: 46px; padding: 0 18px; }
.checkout__bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.2); }
.checkout__bar i:nth-child(2) { background: #febc2e; }
.checkout__bar i:nth-child(3) { background: #28c840; }
.checkout__bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 0.85rem/1 var(--sc-font-display); color: var(--sc-ink-soft); }
.checkout__body { padding: clamp(1.25rem, 4vw, 2rem) clamp(1.5rem, 5vw, 2.75rem) clamp(1.75rem, 5vw, 2.5rem); text-align: center; }
.checkout__name { margin: 0; font: 600 1.4rem/1.2 var(--sc-font-display); letter-spacing: -0.015em; color: var(--sc-ink); }
.checkout__desc { margin: 0.5rem auto 0; max-width: 21em; font: 400 1rem/1.45 var(--sc-font-text); color: var(--sc-ink-soft); text-wrap: balance; }
.checkout__price {
  margin: 1.5rem 0 0; display: flex; justify-content: center; align-items: flex-start;
  font: 600 clamp(4.5rem, 3rem + 6vw, 6.5rem)/0.9 var(--sc-font-display);
  letter-spacing: -0.055em; font-variant-numeric: tabular-nums; color: var(--sc-ink);
}
.checkout__cur { font-size: 0.4em; margin: 0.14em 0.08em 0 0; color: var(--sc-ink-soft); letter-spacing: 0; }
.checkout__cents { font-size: 0.4em; margin-top: 0.1em; letter-spacing: -0.02em; }
.checkout__once { margin: 0.75rem 0 1.75rem; font: 400 0.95rem/1 var(--sc-font-text); color: var(--sc-ink-soft); }
.checkout__btn {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  min-height: 56px; border-radius: var(--sc-r-pill); text-decoration: none;
  font: 600 1.15rem/1 var(--sc-font-display); letter-spacing: -0.01em; color: #000;
  background: #f2f2f5;
  box-shadow: inset 0 1px 0 #fff, 0 12px 32px -14px rgb(255 255 255 / 0.4);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.checkout__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .checkout__btn:hover { transform: translateY(-1px); background: #fff; box-shadow: inset 0 1px 0 #fff, 0 16px 40px -12px rgb(255 255 255 / 0.55); }
  .checkout__btn:hover svg { translate: 3px 0; }
}
.checkout__btn:active { transform: scale(0.98); }
.checkout__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.checkout__note { margin: 0.9rem 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.checkout__note:empty { display: none; }

.foot {
  padding: var(--sc-6) var(--sc-gutter) max(var(--sc-6), env(safe-area-inset-bottom));
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  border-top: 1px solid color-mix(in oklab, #fff 5%, transparent);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sc-3, 12px) var(--sc-6, 24px); align-items: baseline;
}
/* The fine print runs the full width: requirements beside the links, the
   trademark line under both. */
.foot__links { display: flex; gap: var(--sc-5, 20px); }
.foot > span, .foot__tm { text-wrap: pretty; }
@media (max-width: 640px) { .foot { grid-template-columns: 1fr; } }
.foot__links a { color: inherit; text-decoration: none; }
.foot__links a:hover, .foot__links a:focus-visible { color: var(--sc-ink, #fff); text-decoration: underline; text-underline-offset: 3px; }
.foot__tm { grid-column: 1 / -1; margin: 0; line-height: 1.5; opacity: .7; }