/* Snapline — landing page.
 *
 * The purchase pages put the offer inside the one undimmed rectangle of a
 * dimmed screen. The landing page is the other side of that device: the whole
 * page IS the undimmed screen, and the capture-selection grammar — marquee,
 * eight handles, live px readout — appears wherever Snapline itself would
 * draw it: around the hero window being captured, around the offer. One dark
 * dimmed-slate interlude ties back to /buy/.
 */

:root {
  /* Daylight-studio ground: sky canvas, bone-white cards, charcoal buttons the
     only dense dark. Depth comes from the canvas→card color shift, not shadows. */
  --paper: #ebf5ff;
  --card: #fafdff;
  --paper-raised: #f3f9ff;
  --ink: #0a0d12;
  --ink-soft: #535862;
  --fog: #93979f;
  --rule: #dbe8f5;

  --charcoal: #181d27;

  --dim: #191c22;
  --dim-raised: #21252d;

  /* Iris blue: the selection marquee and the page's single vivid accent. */
  --marquee: #0069e0;
  --marquee-deep: #0055b8;
  --record: #ff453a;
  --annotate: #ff9f0a;

  /* Pastel washes — at most one per section, for the feature demo tiles. */
  --wash-powder: #cce7ff;
  --wash-lavender: #f1e6ff;
  --wash-mint: #d3f6e3;
  --wash-solar: #fff2be;
  --wash-blush: #ffe4e6;
  --wash-sand: #f6ecd8;
  /* The one graded wash: powder deepening toward the marquee, for the drag tile. */
  --wash-sky: linear-gradient(160deg, #d9ecff 0%, #a5cffd 100%);

  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-window: 0 1px 2px rgba(10, 13, 18, 0.06), 0 12px 32px -8px rgba(4, 69, 144, 0.16);
  --shadow-card: 0 1px 2px rgba(10, 13, 18, 0.07), 0 8px 24px -6px rgba(4, 69, 144, 0.2);
  --shadow-lift: 0 14px 20px 4px rgba(4, 69, 144, 0.08);
  /* The pressed-into-page ring under charcoal buttons. */
  --shadow-press: 0 1px 2px rgba(10, 13, 18, 0.8), 0 0 0 1px #0a0d12;

  /* The iris pill: the filled call-to-action (Download, Buy) wears the marquee
     as a graded fill — sky-lit at the top, deepening to the hover blue at the
     foot — with a glass highlight along the rim and a soft blue glow, no dark ring. The
     gradient is twice the pill's height so hover slides it, not swaps it. */
  --cta: linear-gradient(180deg, #4aa2ff 0%, #0069e0 50%, #0052b3 100%);
  --shadow-cta: inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 2px 6px -1px rgba(0, 105, 224, 0.28), 0 10px 22px -8px rgba(0, 105, 224, 0.5);
  --shadow-cta-hover: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 4px 10px -2px rgba(0, 105, 224, 0.32), 0 16px 32px -10px rgba(0, 105, 224, 0.6);

  --radius-card: 32px;
  --radius-card-sm: 16px;
  --radius-media: 24px;

  --step: 8px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Fast start, gentle settle — the ease every soft reveal shares. */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  /* Lets block-size transition to `auto` (FAQ accordion) where supported. */
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }

/* No `scroll-behavior: smooth` here. It glided every scroll of the root,
   arrivals included, and ScrollTrigger cannot measure a page that is still
   gliding: a reload mid-page or an arrival at /#card froze every demo loop.
   landing.js glides a click on an in-page link instead, and only that. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--marquee);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3 { text-wrap: balance; font-family: var(--display); }

/* The display voice: mid-weight, enormous, tracked tight — never bolder than 500. */
h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.11;
  margin: 0 0 calc(var(--step) * 3);
}

p { text-wrap: pretty; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* The iris pill: the filled call to action, and the one saturated fill on the
   page. Download and Buy wear it; everything else is a ghost. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 28px;
  background-color: var(--marquee);
  background-image: var(--cta);
  background-size: 100% 200%;
  background-position: 0 0;
  color: #fff;
  border: 0;
  border-radius: 9999px;
  font: inherit;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 45, 110, 0.3);
  cursor: pointer;
  transition: background-color 140ms ease, background-position 220ms ease, transform 140ms ease, box-shadow 140ms ease;
  box-shadow: var(--shadow-cta);
}

.btn:hover {
  background-color: var(--marquee-deep);
  background-position: 0 100%;
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-cta);
}

.btn:focus-visible { outline-offset: 3px; }

.btn--ghost {
  background: var(--card);
  color: var(--ink);
  text-shadow: none;
  box-shadow: inset 0 0 0 1px var(--rule);
}

.btn--ghost:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px #c8dcf1;
}

.btn--ghost:active { box-shadow: inset 0 0 0 1px #c8dcf1; }

.btn--small {
  min-height: 36px;
  padding: 0 18px;
  font-size: 0.88rem;
  border-radius: 9999px;
}

/* ── Menu bar (the header is the product's home) ─────────────────────────── */

/* The nav floats over the canvas as a white pill, detached from the top edge. */
.menubar {
  position: sticky;
  top: 12px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 56px;
  max-width: 1160px;
  width: calc(100% - 28px);
  margin: 14px auto 0;
  padding: 0 10px 0 22px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(4, 69, 144, 0.06), 0 8px 24px -12px rgba(4, 69, 144, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13.5px;
}

.menubar__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.menubar__logo { display: block; }

.menubar__spacer { margin-left: auto; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* The banner: one centered editorial stack — headline, standfirst, one dark
   pill — with the app's own settings icons floating in the sky around it and
   the self-capturing demo below. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(40px, 6vh, 72px);
  /* `clip`, not `hidden`: hidden makes this a scroll container, and the
     #demo anchor (a child) then scrolls the hero itself — the headline ends
     up above a scroll offset no scrollbar can undo. */
  overflow: clip;
  padding: clamp(64px, 10vh, 128px) var(--gutter) clamp(48px, 8vh, 96px);
}

/* Soft cloud masses in the lower corners, like weather rolling in. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.hero::before { width: 52vw; height: 52vw; left: -16vw; bottom: -18vw; }
.hero::after  { width: 58vw; height: 58vw; right: -18vw; bottom: -24vw; }

.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
}

.hero__headline {
  font-size: clamp(2.2rem, 4.6vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 calc(var(--step) * 3);
}

/* Words become inline-blocks (JS wraps them) so they can stagger in. */
.hero__word { display: inline-block; }

/* Pre-paint gate: the head script adds .anim before first paint; landing.js
   (or its failsafe timeout) lifts it once initial states are staged. The
   standfirst is deliberately outside the gate and never fades: it is the
   homepage's largest paint on a phone, and hiding it until landing.js runs
   (which waits behind GSAP and Paddle's script) held mobile LCP at 5.1 s. */
.anim .hero__pill,
.anim .hero__headline,
.anim .hero__actions,
.anim .hero__offer,
.anim .hero__guarantee { opacity: 0; }

/* The app icon sits inside the sentence, in a white circle chip, sized and
   dropped to center optically against the letters beside it. Keep the width
   in sync with heroHeadline()'s animation target. */
.hero__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.08em;
  height: 1.08em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(4, 69, 144, 0.16);
  vertical-align: -0.12em;
}

/* Sized by height alone so the logo stays square while the chip's width
   animates open. */
.hero__chip img { height: 70%; width: auto; }

.hero__standfirst {
  font-size: 1.14rem;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto calc(var(--step) * 4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: calc(var(--step) * 2);
}

/* "Send the link to my Mac" (assets/sendtomac.js). A full-width row inside
   the button flex so it wraps beneath "Watch the tour" and inherits the
   hero's entrance. Hidden by the `hidden` attribute until the script decides
   the visitor is on a phone; the media query below is the no-JS fallback for
   the same devices, by width instead of user agent. */
.sendtomac {
  flex-basis: 100%;
  max-width: 440px;
  margin: 4px auto 0;
  text-align: center;
}
.sendtomac[hidden] { display: none; }
/* `.btn` sets its own display, which outranks the browser's [hidden] rule;
   sendtomac.js hides the download button on phones with that attribute. */
.hero__actions .btn[hidden] { display: none; }
.sendtomac__label {
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
}
.sendtomac__hint {
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.sendtomac__hint[hidden] { display: none; }
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  /* A touch device at phone or tablet width: show the button even without
     the script, and let the script hide the download button when it runs. */
  .sendtomac[hidden] { display: block; }
}

/* The offer, at reading size and right under the buttons: the trial, the
   price, and what is not asked for are the three things a first visitor
   decides on, so they are not fine print. */
.hero__offer {
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 0;
}
.hero__offer strong { color: var(--ink); font-weight: 600; }
/* The announcement pill above the headline: the charcoal voice at caption
   size, the one place the hero says what is new. */
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 15px 0 11px;
  border-radius: 9999px;
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: var(--shadow-press);
  margin-bottom: calc(var(--step) * 3);
  transition: background-color 140ms ease, transform 140ms ease;
}
.hero__pill:hover { background: #0a0d12; transform: translateY(-1px); }
.hero__pill svg { width: 13px; height: 13px; color: #fff; }
.hero__pill b { font-weight: 600; color: #fff; white-space: nowrap; }
.hero__pill-short { display: none; }
@media (max-width: 560px) {
  /* One line, one clause: the label never breaks, the long clause gives
     way to the short one, and the two icons that shared this strip go. */
  .hero__pill { white-space: nowrap; }
  .hero__pill-long { display: none; }
  .hero__pill-short { display: inline; }
  .float--general, .float--shortcuts { display: none; }
}

/* The refund line under the buttons: a promise the refund page keeps. */
.hero__guarantee {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.hero__guarantee svg { width: 14px; height: 14px; transition: transform 140ms ease; }
.hero__guarantee:hover { color: var(--marquee); }
.hero__guarantee:hover svg { transform: translateX(2px); }

/* Floating settings icons: the app's own objects drifting in the canvas.
   Parallax moves the outer span (JS); the idle bob lives on the img so the
   two transforms never fight. */
.hero__floats {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.float { position: absolute; will-change: transform; }

.float img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(4, 69, 144, 0.2));
}

.float--general     { top: 17%; left: 7%;   width: 66px; }
.float--shortcuts   { top: 11%; right: 9%;  width: 76px; }
.float--history     { top: 46%; left: 12%;  width: 56px; }
.float--quickaccess { top: 38%; right: 6%;  width: 48px; }
.float--wallpaper   { top: 66%; left: 5%;   width: 44px; }
.float--advanced    { top: 62%; right: 13%; width: 52px; }

@media (prefers-reduced-motion: no-preference) {
  .float img { animation: float-bob 7s ease-in-out infinite; animation-delay: var(--bob, 0s); }
  .float--shortcuts img { --bob: -2.1s; }
  .float--history img { --bob: -3.4s; }
  .float--quickaccess img { --bob: -1.2s; }
  .float--wallpaper img { --bob: -4.6s; }
  .float--advanced img { --bob: -5.5s; }
}

@keyframes float-bob { 50% { transform: translateY(-11px); } }

@media (max-width: 860px) {
  .float--history, .float--wallpaper, .float--quickaccess { display: none; }
  .float--general { top: 8%; left: 5%; width: 48px; }
  .float--shortcuts { top: 5%; width: 54px; }
  .float--advanced { top: 70%; right: 7%; }
}

/* ── The hero demo: the narrated tour ────────────────────────────────────── */

/* Narrower than the page: the film is a window on a desk, not the desk. */
.hero__video {
  min-width: 0;
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
}

/* Borderless: the film sits on the sky with only its shadow and a 28px
   radius; no frame around it. */
.hero__video .demovideo__frame {
  border-radius: 28px;
}

/* ── Realistic scenes ────────────────────────────────────────────────────── */

/* A scene drawn the way the Mac draws it: real content, the system's own
   images, the app's own metrics. The wrapper (.mac-scene) is a size
   container and the stage inside it (.mac-stage) is a screen --screen-w
   points wide (720 unless a scene says otherwise): every size in the scene
   is a multiple of --pt, one point of that screen, so the whole scene scales
   as a single picture and keeps its proportions at any width. Text is the
   system stack, which is San Francisco wherever a Mac or an iPhone reads it;
   no Apple font is hosted. */
.mac-scene { min-width: 0; container-type: inline-size; }

/* Every demo plays back like a screen recording, so it reads as footage,
   not a page: no text selection, no I-beam over its labels, and no image
   that can be dragged out of the frame. None of them holds a real control. */
.mac-scene,
.tile__art {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
.mac-scene img,
.tile__art img { -webkit-user-drag: none; }

.mac-stage {
  --pt: calc(100cqw / var(--screen-w, 720));
  --mac-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  position: relative;
  overflow: hidden;
  font-family: var(--mac-font);
  font-size: calc(var(--pt) * 13);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #1d1d1f;
  -webkit-font-smoothing: antialiased;
}

.mac-stage svg text { font-family: var(--mac-font); }

/* A made-up document inside a scene or a studio card (a web page, a capture,
   a message) is a picture of itself, baked from site/scenes/documents.html by
   scripts/bake-scenes.py, so crawlers never read it as the page's own text.
   The container keeps the size the scene gives it and the picture covers it;
   a flow picture is the container's content instead, reaching over the
   container's padding (the bake writes the margins). What a script changes
   stays live over the picture (.baked-live), placed in percent of the
   container by the bake. */
:where(.mac-stage [data-bake], .slide__art [data-bake]) { position: relative; }

:is(.mac-stage, .slide__art) .baked {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: fill;
  filter: none;
}

:is(.mac-stage, .slide__art) .baked--flow { position: static; height: auto; }

:is(.mac-stage, .slide__art) .baked-live {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin: 0;
  white-space: nowrap;
}

/* A macOS window: the hairline edge and the two-part shadow the window
   server draws, lighter on a window that is not key. */
.mac-win {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.22),
    0 calc(var(--pt) * 4) calc(var(--pt) * 10) rgba(0, 0, 0, 0.1),
    0 calc(var(--pt) * 22) calc(var(--pt) * 48) calc(var(--pt) * -6) rgba(0, 0, 0, 0.32);
}

.mac-win--inactive {
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.16),
    0 calc(var(--pt) * 12) calc(var(--pt) * 32) calc(var(--pt) * -6) rgba(0, 0, 0, 0.2);
}

.mac-win__toolbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--pt) * 14);
  height: calc(var(--pt) * 44);
  padding: 0 calc(var(--pt) * 14);
}

.mac-win__lights { display: inline-flex; flex: none; gap: calc(var(--pt) * 8); }

.mac-win__lights i {
  width: calc(var(--pt) * 12);
  height: calc(var(--pt) * 12);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}

.mac-win__lights i:nth-child(1) { background: #ff5f57; }
.mac-win__lights i:nth-child(2) { background: #febc2e; }
.mac-win__lights i:nth-child(3) { background: #28c840; }
.mac-win--inactive .mac-win__lights i { background: #dcdcdc; }

.mac-win__tools {
  display: inline-flex;
  gap: calc(var(--pt) * 14);
  margin-left: auto;
  color: #6e6e73;
}

.mac-win--inactive .mac-win__tools { color: #b0b0b5; }

.mac-win__tools svg {
  width: calc(var(--pt) * 17);
  height: calc(var(--pt) * 17);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Safari's unified toolbar: the lights, sidebar and history, the address
   field in the middle, share and new tab. */
.mac-safari__bar {
  gap: calc(var(--pt) * 12);
  height: calc(var(--pt) * 46);
  border-radius: calc(var(--pt) * 16) calc(var(--pt) * 16) 0 0;
  background: #f6f6f7;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.12);
}

.mac-safari__nav { margin-left: 0; gap: calc(var(--pt) * 10); }
.mac-safari__nav .is-off { opacity: 0.35; }

.mac-safari__url {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 4);
  height: calc(var(--pt) * 28);
  border-radius: calc(var(--pt) * 8);
  background: rgba(0, 0, 0, 0.055);
  font-size: calc(var(--pt) * 12);
  color: #3a3a3c;
}

.mac-safari__url svg {
  width: calc(var(--pt) * 12);
  height: calc(var(--pt) * 12);
  fill: none;
  stroke: #8e8e93;
  stroke-width: 1.6;
}

/* The system pointer: Apple's own cursor images (NSCursor, exported at 2x),
   placed by their hot spots (arrow and copy at 5,5 of 28 x 40, the crosshair
   at its centre) with a shadow like the one the window server adds. The
   element sits at its hot spot; a scene moves it with x and y, and
   data-cursor picks the image. */
.mac-pointer {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}

.mac-pointer img {
  position: absolute;
  display: none;
  width: calc(var(--pt) * 25);
  height: auto;
  left: calc(var(--pt) * -4.5);
  top: calc(var(--pt) * -4.5);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

.mac-pointer .mac-cur--cross,
.mac-pointer .mac-cur--camera {
  width: calc(var(--pt) * 21);
  left: calc(var(--pt) * -10.5);
  top: calc(var(--pt) * -10.5);
  filter: none;
}

/* The open and closed hands: 32 points, hot spot 16, 17, at the arrow's
   scale. */
.mac-pointer .mac-cur--open,
.mac-pointer .mac-cur--closed {
  width: calc(var(--pt) * 28.6);
  left: calc(var(--pt) * -14.3);
  top: calc(var(--pt) * -15.2);
}

.mac-pointer[data-cursor="open"] .mac-cur--open,
.mac-pointer[data-cursor="closed"] .mac-cur--closed,
.mac-pointer[data-cursor="arrow"] .mac-cur--arrow,
.mac-pointer[data-cursor="copy"] .mac-cur--copy,
.mac-pointer[data-cursor="cross"] .mac-cur--cross,
.mac-pointer[data-cursor="camera"] .mac-cur--camera { display: block; }

/* The windows inside the studio slides: a titlebar window at hand size,
   drawn the way the Mac draws one (the system font, 12-point lights with
   their hairline, the title centred, the window server's two-part shadow). */
.macwin {
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.1),
    0 16px 36px -6px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #1d1d1f;
}

.macwin__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  background: #f6f6f7;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.12);
}

.macwin__lights { display: inline-flex; gap: 7px; }

.macwin__lights i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}

.macwin__lights i:nth-child(1) { background: #ff5f57; }
.macwin__lights i:nth-child(2) { background: #febc2e; }
.macwin__lights i:nth-child(3) { background: #28c840; }

.macwin__title {
  position: absolute;
  left: 64px;
  right: 64px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #6e6e73;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.macwin__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #3a3a3c;
}

.handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--marquee);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 105, 224, 0.25);
}

.handle--tl { top: -5px; left: -5px; }
.handle--tr { top: -5px; right: -5px; }
.handle--bl { bottom: -5px; left: -5px; }
.handle--br { bottom: -5px; right: -5px; }
.handle--tm { top: -5px; left: 50%; margin-left: -5px; }
.handle--bm { bottom: -5px; left: 50%; margin-left: -5px; }
.handle--ml { left: -5px; top: 50%; margin-top: -5px; }
.handle--mr { right: -5px; top: 50%; margin-top: -5px; }

/* ── Shortcut chords ─────────────────────────────────────────────────────── */

.chords {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 9vh, 104px);
  text-align: center;
}

.chords__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 3.5vw, 44px);
  list-style: none;
  margin: 0 0 calc(var(--step) * 2);
  padding: clamp(20px, 3vw, 30px) clamp(16px, 3vw, 36px);
}

.chords__list li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.keycap {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 7px 12px 9px;
  border-radius: 8px;
  background: linear-gradient(#fff, #f3f4f6);
  border: 1px solid #d8dbe0;
  box-shadow: 0 2px 0 #d8dbe0, 0 3px 6px rgba(21, 23, 28, 0.06);
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.chords__list li:hover .keycap {
  transform: translateY(2px);
  box-shadow: 0 0 0 #d8dbe0, 0 1px 2px rgba(21, 23, 28, 0.08);
}

.chords__what {
  font-size: 0.98rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.chords__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.kbd-inline {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: 0.05em;
  padding: 2px 7px 3px;
  border-radius: 6px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule);
  white-space: nowrap;
}

/* ── Demo video frame (lives in the hero) ────────────────────────────────── */

.demovideo__frame {
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--paper-raised);
  box-shadow: var(--shadow-lift);
}

.demovideo__frame video {
  display: block;
  width: 100%;
  height: auto;
}

/* The film's own chrome, shown only while the frame is hovered or holds
   focus. The time readout mirrors the capture readouts; the pills are the HUD
   vocabulary; the progress line is the marquee blue. */

.demovideo__frame video:not([controls]) {
  cursor: pointer;
}

.demovideo__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(25, 28, 34, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.demovideo__frame.is-paused .demovideo__play,
.demovideo__play:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.demovideo__play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.demovideo__time {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px 7px;
  border-radius: 8px;
  background: rgba(25, 28, 34, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.demovideo__buttons {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.demovideo__time,
.demovideo__buttons,
.demovideo__progress {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.demovideo__frame:hover .demovideo__time,
.demovideo__frame:focus-within .demovideo__time,
.demovideo__frame:hover .demovideo__buttons,
.demovideo__frame:focus-within .demovideo__buttons,
.demovideo__frame:hover .demovideo__progress,
.demovideo__frame:focus-within .demovideo__progress {
  opacity: 1;
}

.demovideo__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: rgba(25, 28, 34, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background 0.15s ease;
}

.demovideo__btn:hover {
  background: rgba(25, 28, 34, 0.78);
}

.demovideo__btn:focus-visible,
.demovideo__play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.demovideo__btn svg {
  width: 16px;
  height: 16px;
}

.demovideo__btn[aria-pressed="false"] .demovideo__icon--on,
.demovideo__btn[aria-pressed="true"] .demovideo__icon--off {
  display: none;
}

.demovideo__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px; /* pointer target; the visible line is the 3px at its foot */
  cursor: pointer;
}

.demovideo__progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(10, 13, 18, 0.16);
}

.demovideo__progress-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--marquee);
}

.demovideo__frame:fullscreen {
  border-radius: 0;
  background: #000;
  display: grid;
  place-items: center;
}

.demovideo__frame:fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 560px) {
  .demovideo__frame,
  .hero__video .demovideo__frame { border-radius: 12px; }
}

/* ── Feature sections ────────────────────────────────────────────────────── */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 104px) var(--gutter);
}

.feature--flip .feature__copy { order: 2; }
.feature--flip > :last-child { order: 1; }

.feature__copy p {
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 calc(var(--step) * 2);
}

.feature__copy p:last-child { margin-bottom: 0; }

.feature__copy em { font-style: normal; font-weight: 600; color: var(--ink); }

/* Three icon bullets under a short intro (the OCR and card sections):
   a marquee-blue glyph, then one claim in ink. */
.feature__list {
  list-style: none;
  margin: calc(var(--step) * 3) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 52ch;
}

.feature__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-weight: 500;
  color: var(--ink);
}

.feature__list svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px; /* centers the glyph on the first line (27px line box) */
  fill: none;
  stroke: var(--marquee);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature__more { margin-top: calc(var(--step) * 4); }

.feature__assurance {
  padding: 16px 20px;
  border-radius: var(--radius-card-sm);
  background: var(--card);
  font-size: 0.95rem;
}

@media (max-width: 960px) {
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__copy { order: 1; }
  .feature--flip > :last-child { order: 2; }
}

/* ── The Capture Menu ────────────────────────────────────────────────────── */

/* The Capture chord, held, opens a wheel at the pointer (ADR 0113). The wheel
   is the app's own in Dark Mode: the wedge, hover, dimmed and accent fills,
   the 1 pt dividers, the hub's 13 pt over 11 pt, and the outer ring's one
   drop shadow, all at the app's radii inside a 364 pt viewBox, so the SVG
   scales as one piece. The CSS resting state is Record's ring open with
   Window under the pointer, the hub reading it out: the frame the section is
   about, so STATIC needs nothing. The chip in the corner is the page's, not
   the app's: it says the chord is being held. */
.capmenu__stage {
  --screen-w: 620;
  aspect-ratio: 620 / 540;
  border-radius: var(--radius-card);
  background: var(--wash-mint);
}

/* Safari, on a real page (a .mac-win, in the realistic scenes above). */
.capmenu__page {
  left: calc(var(--pt) * 40);
  top: calc(var(--pt) * 40);
  width: calc(var(--pt) * 420);
  height: calc(var(--pt) * 340);
  border-radius: calc(var(--pt) * 16);
  overflow: visible;
}

.capmenu__web {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(var(--pt) * 16) calc(var(--pt) * 26) 0;
  border-radius: 0 0 calc(var(--pt) * 16) calc(var(--pt) * 16);
  background: #fff;
}

/* The Record overlay's window hover, from ShroudView: the accent at 0.15
   over the window and a 2-point border at 0.85 just inside its edge, the
   window's title in the HUD pill 26 points above. */
.capmenu__target {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--pt) * 16);
  background: rgba(0, 122, 255, 0.15);
  box-shadow: inset 0 0 0 calc(var(--pt) * 2) rgba(0, 122, 255, 0.85);
  opacity: 0;
  pointer-events: none;
}

.capmenu__tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--pt) * 6);
  transform: translateX(-50%);
  padding: calc(var(--pt) * 3) calc(var(--pt) * 8);
  border-radius: 99px;
  background: rgba(30, 30, 32, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: calc(var(--pt) * 10);
  white-space: nowrap;
}

/* Centred on (44%, 55%) of the stage without a transform, which the
   close's scale owns: 84% of the width across, near the app's own size at a
   desktop width, and 540/620 of that width is the stage's height, so the
   top is 55% less half of 96.4%. */
.capmenu__menu {
  position: absolute;
  left: 2%;
  top: 6.8%;
  width: 84%;
  aspect-ratio: 1;
}

/* The disc behind the wedges: 214 of the panel's 364 points. */
.capmenu__glass {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(22, 24, 32, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

.capmenu__wheel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.capmenu__wheel use {
  fill: none;
  stroke: #f3f4f7;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capmenu__wedge path,
.capmenu__opt path,
.capmenu__hub circle {
  fill: rgba(38, 40, 50, 0.92);
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1;
}

.capmenu__wedge.is-hover path,
.capmenu__opt.is-hover path { fill: rgba(70, 74, 90, 0.92); }
.capmenu__wedge.is-dim path { fill: rgba(30, 32, 41, 0.92); }
.capmenu__wedge.is-dim use { opacity: 0.4; }
.capmenu__wedge.is-accent path { fill: #2f7cf6; }
.capmenu__wedge.is-accent use { stroke: #fff; }

.capmenu__wheel text {
  text-anchor: middle;
  letter-spacing: 0;
}

.capmenu__opt text { fill: #f3f4f7; font-size: 11px; font-weight: 600; }
.capmenu__small { fill: #a6acb8; font-size: 11px; font-weight: 500; }
.capmenu__title { fill: #f3f4f7; font-size: 13px; font-weight: 700; }
.capmenu__close { opacity: 0; }

/* Resting on Window's option, up and to the right of its glyph (r 146 at
   80 degrees), so the pointer leaves the name readable. */
.capmenu__cursor { transform: translate(calc(var(--pt) * 478.6), calc(var(--pt) * 260.8)); }

.capmenu__hold {
  position: absolute;
  left: 6%;
  bottom: 7%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.capmenu__key {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
  padding: 5px 10px 7px;
  border-radius: 8px;
  background: linear-gradient(#fff, #f3f4f6);
  border: 1px solid #d8dbe0;
  box-shadow: 0 0 0 #d8dbe0, 0 1px 2px rgba(21, 23, 28, 0.08);
  transform: translateY(2px);
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.capmenu__key.is-up {
  transform: none;
  box-shadow: 0 2px 0 #d8dbe0, 0 3px 6px rgba(21, 23, 28, 0.06);
}

.capmenu__holdbar {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: rgba(10, 13, 18, 0.12);
  overflow: hidden;
}

.capmenu__holdbar i {
  display: block;
  height: 100%;
  background: var(--marquee);
  transform-origin: left center;
}

@media (max-width: 600px) {
  .capmenu__stage { aspect-ratio: 620 / 600; }
  .capmenu__page { width: calc(var(--pt) * 480); }
  .capmenu__menu { width: 96%; left: 2%; top: 2.4%; }
  .capmenu__cursor { transform: translate(calc(var(--pt) * 545), calc(var(--pt) * 270.6)); }
}

/* ── Scrolling capture demo ──────────────────────────────────────────────── */

/* A Scrolling Capture in progress on a 720-point screen (a .mac-stage):
   Safari on the left with the app's ring around it, the stitch preview rail
   8 points to its right. The page scrolls under a resting pointer. The rail's
   image is a clone of the page, sized and scaled by the script the way the
   preview fits its image (proportionally, top-aligned), so it narrows as the
   capture grows. The resting state is the end: the page at its foot, the
   rail full, "Reached the bottom", Done pulsing. */
.scrollcap__stage {
  aspect-ratio: 720 / 560;
  border-radius: var(--radius-card);
  background: var(--wash-powder);
}

.capwin {
  left: calc(var(--pt) * 18);
  top: calc(var(--pt) * 18);
  width: calc(var(--pt) * 480);
  height: calc(var(--pt) * 524);
  border-radius: calc(var(--pt) * 16);
}

.capwin__view {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

/* The journal's own page. */
.cw-head {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 14);
  height: calc(var(--pt) * 40);
  padding: 0 calc(var(--pt) * 22);
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.12);
  font-size: calc(var(--pt) * 11);
  color: #3a3a3c;
}

.capwin__content {
  padding: calc(var(--pt) * 60) calc(var(--pt) * 30) calc(var(--pt) * 66);
  will-change: transform;
}

/* The article's photographs stay live over its picture: the same files load
   for the other demos anyway, so baking them in would only add bytes. */
.cw-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--pt) * 6); }

.capwin__footer {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--pt) * 44);
  padding: 0 calc(var(--pt) * 22);
  background: #1d1d1f;
  font-size: calc(var(--pt) * 11.5);
  color: #f5f5f7;
}

/* RecordingFrameIndicator's capturing ring: 2 points of the accent at 0.9,
   hugging the window from outside, square-cornered. */
.capwin__ring {
  position: absolute;
  z-index: 3;
  left: calc(var(--pt) * 16);
  top: calc(var(--pt) * 16);
  width: calc(var(--pt) * 484);
  height: calc(var(--pt) * 528);
  box-shadow: 0 0 0 calc(var(--pt) * 2) rgba(0, 122, 255, 0.9);
  pointer-events: none;
}

.capwin__pointer { transform: translate(calc(var(--pt) * 330), calc(var(--pt) * 330)); }

/* StitchPreviewPanel: the glass panel at 12 points, 10 inside, 6 between. */
.rail {
  position: absolute;
  z-index: 4;
  left: calc(var(--pt) * 506);
  top: calc(var(--pt) * 18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pt) * 6);
  width: calc(var(--pt) * 196);
  height: calc(var(--pt) * 524);
  padding: calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 12);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.8),
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    0 calc(var(--pt) * 10) calc(var(--pt) * 30) rgba(0, 0, 0, 0.16);
  text-align: center;
}

.rail__stage {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  min-height: 0;
}

.rail__image {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--pt) * 6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}

.rail__canvas {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background: #fff;
  text-align: left;
  transform-origin: 0 0;
}

.rail__canvas .capwin__content { will-change: auto; }

/* Where the newest frame joined: a hairline of the accent that fades. */
.rail__seam {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: #0a7cff;
  opacity: 0;
}

.rail__headline {
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #1d1d1f;
}

.rail__detail,
.rail__label {
  font-size: calc(var(--pt) * 10);
  line-height: 1.3;
  color: rgba(60, 60, 67, 0.62);
}

.rail__detail { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail__label { min-height: 2.6em; }

.rail__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--pt) * 8);
  align-self: stretch;
}

.rail__btn {
  padding: calc(var(--pt) * 4) 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 0.5px 1px rgba(0, 0, 0, 0.1);
  font-size: calc(var(--pt) * 12);
  font-weight: 500;
}

/* Done is the default button (Return), so it is always the accent; at a
   state where finishing is the next step it pulses gently. */
.rail__done { background: #0a7cff; color: #fff; box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.14); }
.rail__done--on { animation: rail-pulse 1.4s ease-in-out infinite; }

@keyframes rail-pulse { 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .rail__done--on { animation: none; }
}

/* Narrow: the screen grows taller so the rail keeps its readout. */
@media (max-width: 600px) {
  .scrollcap__stage { aspect-ratio: 720 / 640; }
  .capwin { height: calc(var(--pt) * 604); }
  .capwin__ring { height: calc(var(--pt) * 608); }
  .rail { height: calc(var(--pt) * 604); }
  .rail__detail { white-space: normal; }
}

/* ── Editor demo ─────────────────────────────────────────────────────────── */

/* The editor as the app draws it in Dark Mode, on a 720-point screen (a
   .mac-stage): the unified toolbar, the tool rail with every tool's key
   under its symbol, the canvas on the stage matte, the Inspector whose rows
   follow the tool, the status bar with Drag me. The CSS resting state is
   the finished tableau: every mark drawn, Background on with Indigo. */
.editor__stage {
  aspect-ratio: 720 / 540;
  border-radius: var(--radius-card);
  background: var(--wash-lavender);
}

.editor__tools {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: calc(var(--step) * 3) 0 0;
  padding: 0;
}

.editor__tools li {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #fff;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.editor__tools li:hover,
.editor__tools li.is-on {
  color: var(--marquee-deep);
  border-color: rgba(0, 105, 224, 0.5);
  transform: translateY(-1px);
}
.editor__tools li.is-on { background: rgba(0, 105, 224, 0.07); }

/* The window, dark: a light hairline inside the black edge. */
.ewin {
  left: calc(var(--pt) * 16);
  top: calc(var(--pt) * 16);
  width: calc(var(--pt) * 688);
  height: calc(var(--pt) * 508);
  border-radius: calc(var(--pt) * 16);
  background: #1f1f21;
  color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 0 0 0.5px rgba(0, 0, 0, 0.7),
    0 calc(var(--pt) * 22) calc(var(--pt) * 48) calc(var(--pt) * -6) rgba(20, 10, 60, 0.45);
}

/* The symbols are the system's, rendered white; the UI tones them down. */
.ewin img { display: block; width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); opacity: 0.85; }
.ewin img.is-off { opacity: 0.3; }

.ewin__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--pt) * 8);
  height: calc(var(--pt) * 46);
  padding: 0 calc(var(--pt) * 12) 0 calc(var(--pt) * 14);
}

.ewin__bar .mac-win__lights { margin-right: calc(var(--pt) * 6); }

.ewin__cap,
.ewin__round {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 10);
  height: calc(var(--pt) * 28);
  padding: 0 calc(var(--pt) * 9);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}

.ewin__round { width: calc(var(--pt) * 28); padding: 0; }
.ewin__round.is-on { background: rgba(10, 132, 255, 0.3); }

.ewin__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--pt) * 12.5);
  font-weight: 600;
}

.ewin__copy { display: inline-flex; align-items: center; gap: calc(var(--pt) * 5); font-size: calc(var(--pt) * 12); font-weight: 500; }

.ewin__done {
  flex: none;
  padding: calc(var(--pt) * 5) calc(var(--pt) * 14);
  border-radius: 99px;
  background: #0a84ff;
  color: #fff;
  font-size: calc(var(--pt) * 12.5);
  font-weight: 600;
}

.ewin__body { display: flex; flex: 1; min-height: 0; }

/* EditorToolRail: 50 points of bar material, four groups split by dividers. */
.ewin__rail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pt) * 1);
  width: calc(var(--pt) * 44);
  padding: calc(var(--pt) * 6) 0;
  background: #2a2a2c;
  box-shadow: 0.5px 0 0 rgba(0, 0, 0, 0.6);
}

.etool {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--pt) * 34);
  height: calc(var(--pt) * 23);
  border-radius: calc(var(--pt) * 6);
}

.etool img { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }

.etool i {
  position: absolute;
  right: calc(var(--pt) * 3);
  bottom: calc(var(--pt) * 1);
  font-size: calc(var(--pt) * 7);
  font-style: normal;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}

.etool--active { background: rgba(255, 255, 255, 0.16); }
.etool--active img { opacity: 1; }
.etool--active i { color: rgba(255, 255, 255, 0.8); }

.ewin__div {
  display: block;
  width: calc(var(--pt) * 22);
  height: 0.5px;
  margin: calc(var(--pt) * 3) 0;
  background: rgba(255, 255, 255, 0.16);
}

/* The canvas on the stage matte, the shot fitted in it. */
.editor__canvas {
  display: grid;
  flex: 1;
  place-items: center;
  min-width: 0;
  padding: calc(var(--pt) * 14);
  background: #1c1c1e;
}

.editor__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 44 / 25;
  overflow: hidden;
}

/* The Background stage's preset (Indigo, from the app's list) behind the
   shot; the shot shrinks onto it with a radius and a shadow. */
.editor__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
}

.editor__shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(20, 10, 60, 0.35);
  transform: scale(0.86);
  will-change: transform;
}

.editor__ink { display: block; width: 100%; height: 100%; }

.es { fill: #3a3a3c; font-size: 10.5px; }

.es--badge { fill: #fff; font-size: 14px; font-weight: 700; }
.es--label { fill: #fff; font-size: 12px; font-weight: 600; }

/* EditorInspector: grouped sections, labels leading, controls trailing. */
.einsp {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(var(--pt) * 8);
  width: calc(var(--pt) * 196);
  padding: calc(var(--pt) * 8);
  background: #252527;
  box-shadow: -0.5px 0 0 rgba(0, 0, 0, 0.6);
  font-size: calc(var(--pt) * 10.5);
}

.einsp__group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 9);
  padding: calc(var(--pt) * 9) calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 10);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.einsp__head { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.55); font-size: calc(var(--pt) * 9.5); }
.einsp__head b { font-weight: 500; }
.einsp__head i { font-style: normal; }

.einsp__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pt) * 6);
}

.einsp__row[hidden] { display: none; }

.einsp__row > b { display: flex; flex-direction: column; font-weight: 500; }
.einsp__row small { font-size: calc(var(--pt) * 8.5); color: rgba(255, 255, 255, 0.5); }
.einsp__row em { font-style: normal; font-size: calc(var(--pt) * 9); color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }

.einsp__sw {
  display: grid;
  grid-template-columns: repeat(5, calc(var(--pt) * 14));
  gap: calc(var(--pt) * 5);
}

.einsp__sw i {
  width: calc(var(--pt) * 14);
  height: calc(var(--pt) * 14);
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}

.einsp__sw i.is-on { box-shadow: 0 0 0 1.5px #1f1f21, 0 0 0 3px #0a84ff; }
.einsp__well { background: conic-gradient(#ff3b30, #ffcc00, #34c759, #5ac8fa, #007aff, #af52de, #ff3b30) !important; }

.einsp__seg {
  display: flex;
  padding: 1px;
  border-radius: calc(var(--pt) * 5);
  background: rgba(255, 255, 255, 0.08);
}

.einsp__seg i {
  padding: calc(var(--pt) * 2) calc(var(--pt) * 6);
  border-radius: calc(var(--pt) * 4);
  font-size: calc(var(--pt) * 9);
  font-style: normal;
  color: rgba(255, 255, 255, 0.8);
}

.einsp__seg i.is-on { background: #0a84ff; color: #fff; }

.einsp__slider {
  position: relative;
  flex: 1;
  height: calc(var(--pt) * 3);
  max-width: calc(var(--pt) * 80);
  margin-left: auto;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
}

.einsp__slider i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  border-radius: 99px;
  background: #0a84ff;
}

.einsp__slider i::after {
  content: "";
  position: absolute;
  right: calc(var(--pt) * -6);
  top: 50%;
  width: calc(var(--pt) * 12);
  height: calc(var(--pt) * 12);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%);
}

.einsp__hint { font-size: calc(var(--pt) * 9); line-height: 1.35; color: rgba(255, 255, 255, 0.5); }
.einsp__hint:empty { display: none; }

.einsp__sec { display: flex; align-items: center; gap: calc(var(--pt) * 4); font-weight: 600; }
.einsp__sec img { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }

.einsp__bg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(var(--pt) * 5);
}

.einsp__bg i {
  aspect-ratio: 1.35;
  border-radius: calc(var(--pt) * 4);
  background: var(--g);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}

.einsp__bg i.is-on { box-shadow: 0 0 0 1.5px #252527, 0 0 0 3px #0a84ff; }

.einsp__none {
  background:
    linear-gradient(to top right, transparent 46%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 0.5) 53%, transparent 54%),
    rgba(255, 255, 255, 0.06) !important;
}

.ewin__status {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--pt) * 14);
  height: calc(var(--pt) * 26);
  padding: 0 calc(var(--pt) * 10) 0 calc(var(--pt) * 56);
  background: #1c1c1e;
  box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.6);
  font-size: calc(var(--pt) * 10);
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}

.ewin__zoom { display: inline-flex; align-items: center; gap: calc(var(--pt) * 2); }
.ewin__zoom img { width: calc(var(--pt) * 10); height: calc(var(--pt) * 10); }

.ewin__drag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
  margin-left: auto;
  padding: calc(var(--pt) * 2) calc(var(--pt) * 10);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.ewin__drag img { width: calc(var(--pt) * 10); height: calc(var(--pt) * 10); }

/* The pointer rests by the Inspector, where Background was picked. */
.editor__cursor { transform: translate(calc(var(--pt) * 560), calc(var(--pt) * 400)); }

/* Narrow: the Inspector goes (as it does when the window is narrow), the
   canvas takes its room. */
@media (max-width: 600px) {
  .einsp { display: none; }
  .ewin__cap:nth-of-type(3),
  .ewin__round { display: none; }
}

/* ── The recording bento ─────────────────────────────────────────────────── */

/* One section, six tiles: two full-width demos (zoom, camera) and four small
   ones. The one place washes mix and grade, because each tile is its own
   demo; two tiles are dimmed slate, a recording's dark ground. */
.bento {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 104px) var(--gutter);
}

.bento__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: calc(var(--step) * 4);
}

.bento__intro { max-width: 640px; }
.bento__intro h2 { margin-bottom: calc(var(--step) * 2); }
.bento__intro p { margin: 0; color: var(--ink-soft); }

/* Each row takes its own height: three of the four are a single full-width
   tile, and a shared height would pad the shorter bands with empty wash. */
.bento__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.tile {
  grid-column: span 3;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--card);
  overflow: hidden;
}

.tile--wide { grid-column: span 6; }

/* One tile takes the whole row, and a row-wide card that still stacked copy
   over art would read as a stretched small tile. So this one splits sideways:
   copy in a readable column, the demo beside it. */
.tile--full {
  grid-column: span 12;
  flex-direction: row;
  align-items: center;
  gap: 40px;
}

.tile--full .tile__copy { flex: 0 1 400px; }
.tile--full .tile__art { flex: 1 1 auto; }

/* The camera tile mirrors the zoom tile, its scene first, so the two
   full-width tiles do not read as the same card twice. */
.tile--flip { flex-direction: row-reverse; }

.tile__copy h3 {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.tile__copy p {
  margin: 0;
  max-width: 46ch;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.tile__copy p + p { margin-top: 10px; }

/* The art fills what the copy leaves and sits at the tile's foot. */
.tile__art {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

.tile--camera    { background: linear-gradient(170deg, #fff3f3, var(--wash-blush)); }
.tile--clicks    { background: linear-gradient(170deg, #e6f2ff, var(--wash-powder)); }
.tile--keys      { background: linear-gradient(170deg, #e6f2ff 10%, #b7daff); }
.tile--zoom      { background: linear-gradient(150deg, #eef7ff, var(--wash-mint)); }

.tile--dark { background: var(--dim); color: #fff; }
.tile--dark .tile__copy p { color: rgba(255, 255, 255, 0.68); }
.tile--gif { background: linear-gradient(160deg, #1d2130 0%, #10245c 62%, #0d4bb0 100%); }

/* Highlight Clicks: a greeked form, the ring the app animates at the click. */
.clicks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.clicks__field,
.clicks__button {
  display: flex;
  align-items: center;
  width: min(100%, 250px);
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.clicks__button {
  position: relative;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

/* The click point, at the pointer's hot spot. The ring is the app's
   (RecordingOverlayCompositor): no fill, a white 1.5-point line over a dark
   2.75-point one, its radius growing from 10 to 34 points with an ease-out
   while it fades from 0.9 to nothing, in 0.4 seconds. */
.clicks__at { position: absolute; left: 34px; top: 58%; width: 0; height: 0; }

.clicks__ring {
  position: absolute;
  left: -34px;
  top: -34px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 0.6px rgba(0, 0, 0, 0.85), inset 0 0 0 0.6px rgba(0, 0, 0, 0.85);
  opacity: 0.6;
  transform: scale(0.6);
}

.clicks__cursor {
  position: absolute;
  left: -3.2px;
  top: -3.2px;
  width: 18px;
  height: auto;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

@media (prefers-reduced-motion: no-preference) {
  .clicks__ring { animation: click-ring 2.6s infinite; }
  .clicks__cursor { animation: click-press 2.6s ease-in-out infinite; }
}

@keyframes click-ring {
  0%, 22% { opacity: 0; transform: scale(0.294); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  22.1% { opacity: 0.9; transform: scale(0.294); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  37.5%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes click-press {
  0%, 18% { transform: none; }
  22% { transform: scale(0.92); }
  30%, 100% { transform: none; }
}

/* Show Keystrokes: the capsule from the bottom of the movie, chord by chord. */
.keys {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}

/* The app's capsule: black at 0.72 under a white hairline at 0.28, fully
   rounded, white system type, the chord's modifiers first as ⌃⌥⇧⌘. */
.keys__capsule {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: clamp(26px, 2.8vw, 32px);
  font-weight: 500;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Voice and system audio: a waveform, breathing. */
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 80px;
}

.wave i {
  flex: 0 0 3px;
  height: var(--h, 50%);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: no-preference) {
  .wave i {
    animation: wave 1.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.09s);
  }
}

@keyframes wave { 50% { transform: scaleY(0.42); } }

/* MP4 or GIF: the Trim Editor's Convert mode - presets, range and estimate. */
.gifsheet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 500;
}

.gifsheet__head { display: flex; justify-content: space-between; align-items: baseline; }

.gifsheet__est { font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); }

.gifsheet__strip {
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.32);
}

.gifsheet__seg {
  flex: 1;
  padding: 5px 0;
  border-radius: 7px;
  text-align: center;
  color: rgba(255, 255, 255, 0.66);
}

.gifsheet__seg--on { background: rgba(255, 255, 255, 0.18); color: #fff; }

.gifsheet__scrub {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.gifsheet__range {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18%;
  width: 58%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
}

.gifsheet__row { font-size: 11px; font-weight: 400; line-height: 1.35; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }

.gifsheet__buttons { display: flex; justify-content: flex-end; gap: 8px; }
.gifsheet__buttons span { padding: 4px 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); color: #fff; }
.gifsheet__buttons .gifsheet__convert { background: #0a84ff; }

/* ── Live zoom (the zoom tile) ───────────────────────────────────────────────
   Two panes, because the point of a baked-in zoom is the difference between
   them: on screen the window is untouched and a guide marks the crop; in the
   file the crop is the whole frame, and the guide is nowhere in it.

   A realistic scene: a window take of Safari on a 560-point screen, drawn
   from the source (RecordingFrameIndicator, RecordingControlsPanel,
   StatusIcon.recordingControl). One set of numbers drives both panes: the
   level and the crop, in the window's own points, as custom properties on
   .zoom__demo. The screen places the guide with them; the movie is a clone
   of the window scaled by the level and shifted by the crop, so the two can
   never disagree about what is being filmed. The values here are the resting
   tableau (pushed in on Save changes, the approvals rule ticked); the script
   writes new ones as the take plays. */

.zoom__demo {
  --lv: 2;
  --cx: 95;
  --cy: 155;
  --cw: 256;
  --ch: 155;
  --px: 190;
  --py: 288;
  flex-direction: row;
  align-items: flex-end;
  gap: 18px;
  min-width: 0;
}

.zoom__pane {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.zoom__pane--screen { flex-grow: 1.15; }

.zoom__pane figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* The chord, beside the caption: it goes down when the take is told to zoom,
   the one thing on the page that is not the Mac. */
.zoom__chord {
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.14);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink);
  transition: background-color 0.12s, color 0.12s, transform 0.12s;
}

.zoom__chord.is-down { background: var(--ink); color: #fff; transform: translateY(1px); }

.zoom__stage {
  --screen-w: 560;
  aspect-ratio: 560 / 410;
  border-radius: var(--radius-card-sm);
  background: linear-gradient(160deg, #e6f7ee, #b9e6cf);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.08), 0 12px 26px rgba(16, 24, 40, 0.12);
}

.zoom__menubar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--pt) * 24);
  padding: 0 calc(var(--pt) * 14);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.08);
  font-size: calc(var(--pt) * 12);
}

.zoom__menus { display: inline-flex; gap: calc(var(--pt) * 14); }
.zoom__menus b { font-weight: 700; }
.zoom__extras { display: inline-flex; align-items: center; gap: calc(var(--pt) * 8); }
.zoom__extras > img { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); filter: invert(1); opacity: 0.85; }
.zoom__clock { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The status item while a take runs: pause, a hairline, the stop square and
   the elapsed time, all system red, one image 18 points tall. */
.zoom__status {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
  padding: 0 calc(var(--pt) * 4);
  color: #ff3b30;
}

.zoom__bars { display: inline-flex; gap: calc(var(--pt) * 2.5); margin-right: calc(var(--pt) * 1); }
.zoom__bars i { width: calc(var(--pt) * 3.5); height: calc(var(--pt) * 11); border-radius: calc(var(--pt) * 1.2); background: currentColor; }
.zoom__hair { width: calc(var(--pt) * 1); height: calc(var(--pt) * 10); background: rgba(255, 59, 48, 0.35); }
.zoom__square { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); border-radius: calc(var(--pt) * 2.5); background: currentColor; }
.zoom__time { font-weight: 500; font-variant-numeric: tabular-nums; }
.zoom__status .zoom__time { font-size: calc(var(--pt) * 13); }

/* The floating controls, 8 points above the recorded window's corner: a
   capsule of the HUD material in Dark Aqua, 36 points tall, 28-point
   buttons 2 apart, 6 between sections. The zoom button has no on look; only
   its glyph turns from zoom-in to zoom-out. Toggles that are off draw at
   half alpha. */
.zoom__pill {
  position: absolute;
  z-index: 6;
  left: calc(var(--pt) * 24);
  top: calc(var(--pt) * 34);
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 2);
  height: calc(var(--pt) * 36);
  padding: 0 calc(var(--pt) * 6);
  border-radius: calc(var(--pt) * 18);
  background: rgba(34, 34, 36, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 0 0 0.5px rgba(0, 0, 0, 0.4),
    0 calc(var(--pt) * 6) calc(var(--pt) * 16) rgba(0, 0, 0, 0.25);
}

.zoom__btn {
  display: grid;
  place-items: center;
  width: calc(var(--pt) * 28);
  height: calc(var(--pt) * 28);
  border-radius: calc(var(--pt) * 7);
}

/* Symbols are rendered at 15 points in a 20-point box; the controls set them
   at 13, the chevron at 11. */
.zoom__btn img { width: calc(var(--pt) * 17.3); height: calc(var(--pt) * 17.3); }
.zoom__btn.is-off { opacity: 0.5; }

.zoom__btn--stop i {
  width: calc(var(--pt) * 17.3);
  height: calc(var(--pt) * 17.3);
  background: #ff453a;
  -webkit-mask: url("macos/sf/stop-fill.png") center / contain no-repeat;
  mask: url("macos/sf/stop-fill.png") center / contain no-repeat;
}

.zoom__glyph--out,
.zoom__demo.is-zoomed .zoom__glyph--in { display: none; }
.zoom__demo.is-zoomed .zoom__glyph--out { display: block; }

.zoom__timer {
  margin: 0 calc(var(--pt) * 4);
  min-width: calc(var(--pt) * 30);
  font-size: calc(var(--pt) * 13);
  color: #fff;
  text-align: center;
}

.zoom__divider {
  width: calc(var(--pt) * 1);
  height: calc(var(--pt) * 18);
  margin-right: calc(var(--pt) * 4);
  background: rgba(255, 255, 255, 0.25);
}

.zoom__chevron { display: grid; place-items: center; width: calc(var(--pt) * 20); margin-left: calc(var(--pt) * 4); }
.zoom__chevron img { width: calc(var(--pt) * 14.7); height: calc(var(--pt) * 14.7); opacity: 0.85; }

/* The recorded window: Safari on a repository's branch settings. */
.zoom__win {
  left: calc(var(--pt) * 24);
  top: calc(var(--pt) * 78);
  width: calc(var(--pt) * 512);
  height: calc(var(--pt) * 310);
  border-radius: calc(var(--pt) * 16);
}

.zoom__web {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  font-size: calc(var(--pt) * 11.5);
  color: #1f2328;
}

.zw-box {
  position: relative;
  width: calc(var(--pt) * 14);
  height: calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 4);
  background: #fff;
  box-shadow: inset 0 0 0 calc(var(--pt) * 1) #afb8c1;
  transition: background-color 0.12s, box-shadow 0.12s;
}

.zw-box.is-on { background: #2f6fde; box-shadow: none; }

.zw-box.is-on::after {
  content: "";
  position: absolute;
  inset: calc(var(--pt) * 1);
  background: #fff;
  -webkit-mask: url("macos/sf/checkmark.png") center / contain no-repeat;
  mask: url("macos/sf/checkmark.png") center / contain no-repeat;
}

.zw-save {
  padding: calc(var(--pt) * 5) calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 6);
  background: #2f6fde;
  color: #fff;
  font-weight: 600;
}

.zw-save.is-pressed { background: #2459b8; }

.zw-saved {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pt) * 4);
  color: #1a7f37;
  font-weight: 500;
  opacity: 0;
}

.zw-saved.is-on { opacity: 1; }

.zw-saved i {
  width: calc(var(--pt) * 12);
  height: calc(var(--pt) * 12);
  background: currentColor;
  -webkit-mask: url("macos/sf/checkmark.png") center / contain no-repeat;
  mask: url("macos/sf/checkmark.png") center / contain no-repeat;
}

/* The pointer lives in the window, in window points, so the movie's clone
   carries it: the capture films the cursor. */
.zoom__pointer {
  transform: translate(calc(var(--pt) * var(--px)), calc(var(--pt) * var(--py)));
}

/* The ring hugs the window from outside: 2 points of system red at 0.9,
   square, whatever the window's corners do. */
.zoom__ring {
  position: absolute;
  z-index: 4;
  left: calc(var(--pt) * 22);
  top: calc(var(--pt) * 76);
  width: calc(var(--pt) * 516);
  height: calc(var(--pt) * 314);
  box-shadow: inset 0 0 0 calc(var(--pt) * 2) rgba(255, 59, 48, 0.9);
  pointer-events: none;
}

/* The guide, inside the ring: only the recorded window is shaded outside the
   crop. The outline is the crop inset by 1, stroked 4 points of black at 0.65
   and then 2 of system yellow: yellow on the crop's inner 2 points, the halo
   a point either side of it. Hidden while the take is at 1x. */
.zoom__capture {
  position: absolute;
  z-index: 5;
  left: calc(var(--pt) * 24);
  top: calc(var(--pt) * 78);
  width: calc(var(--pt) * 512);
  height: calc(var(--pt) * 310);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.zoom__demo.is-guided .zoom__capture { visibility: visible; }

.zoom__crop {
  position: absolute;
  left: calc(var(--pt) * var(--cx));
  top: calc(var(--pt) * var(--cy));
  width: calc(var(--pt) * var(--cw));
  height: calc(var(--pt) * var(--ch));
  box-shadow:
    inset 0 0 0 calc(var(--pt) * 2) #ffcc00,
    inset 0 0 0 calc(var(--pt) * 3) rgba(0, 0, 0, 0.65),
    0 0 0 calc(var(--pt) * 1) rgba(0, 0, 0, 0.65),
    0 0 0 calc(var(--pt) * 1000) rgba(0, 0, 0, 0.12);
}

.zoom__level {
  position: absolute;
  left: calc(var(--pt) * 8);
  top: calc(var(--pt) * 8);
  padding: calc(var(--pt) * 5) calc(var(--pt) * 8);
  border-radius: calc(var(--pt) * 5);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: calc(var(--pt) * 12);
  font-weight: 600;
  line-height: calc(var(--pt) * 14);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The movie: the window alone, a frame 512 by 310 of its points, pushed in
   by the level about the crop's corner. */
.zoom__film {
  --screen-w: 512;
  aspect-ratio: 512 / 310;
  border-radius: calc(var(--pt) * 16);
  background: #fff;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.08), 0 12px 26px rgba(16, 24, 40, 0.12);
}

.zoom__frame {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transform: scale(var(--lv)) translate(calc(var(--pt) * var(--cx) * -1), calc(var(--pt) * var(--cy) * -1));
}

.zoom__film .zoom__win { left: 0; top: 0; box-shadow: none; }

@media (max-width: 1024px) {
  .zoom__demo { gap: 14px; }
}

/* Side by side, a phone gives each pane about 150 px. Stacked, both panes
   are full width and the comparison still reads top to bottom. */
@media (max-width: 560px) {
  .zoom__demo { flex-direction: column; align-items: stretch; gap: 16px; }
}

@media (max-width: 1024px) {
  .tile { grid-column: span 6; }
  .tile--wide, .tile--full { grid-column: span 12; }
}

/* Below this the copy column and the two demo panes cannot all hold their
   widths, so the full tile becomes an ordinary stacked one. */
@media (max-width: 860px) {
  .tile--full,
  .tile--flip { flex-direction: column; align-items: stretch; gap: 14px; }
  .tile--full .tile__copy { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .bento__grid { gap: 16px; }
  .tile, .tile--wide, .tile--full { grid-column: span 12; min-height: 0; }
  .tile__art { min-height: 200px; }
}

/* ── Camera bubble scene (the camera tile) ───────────────────────────────── */

/* Record Screen on an 880-point screen: set up with the region shroud and the
   bar, then started. One state, in screen points, places the bubble (--bx,
   --by) and the pointer (--px, --py); the script writes it, and the classes
   on .cam__demo say which moment it is: is-cam (Camera on), is-loading
   (the spinner before the feed), is-hover (the rim badges), is-rect (the
   rectangle shape), is-menu (the border menu open), is-rec (recording).
   data-border names the border preset. The rest, in the markup, is the take
   running with the bubble dropped bottom-left. */
.cam__demo {
  --bx: 120;
  --by: 372;
  --px: 639;
  --py: 396;
  min-width: 0;
  width: 100%;
}

.cam__stage {
  --screen-w: 880;
  aspect-ratio: 880 / 640;
  border-radius: var(--radius-card-sm);
  background: linear-gradient(160deg, #fff1ef, #fbd0d0);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.08), 0 12px 26px rgba(16, 24, 40, 0.12);
}

.cam__stage .zoom__menubar { z-index: 1; }

/* Before the take the status item is the plain mark; recording, it counts. */
.cam__idle { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); filter: invert(1); opacity: 0.85; }
.cam__rec,
.cam__demo.is-rec .cam__idle { display: none; }
.cam__demo.is-rec .cam__rec { display: inline-flex; }

/* The recorded window: Safari on a team's welcome page. */
.cam__win {
  left: calc(var(--pt) * 60);
  top: calc(var(--pt) * 44);
  width: calc(var(--pt) * 760);
  height: calc(var(--pt) * 580);
  border-radius: calc(var(--pt) * 16);
}

/* The page, in its own points (its origin is 60, 90 on the screen). */
.cam__web { position: relative; flex: 1; background: #fff; }
.cam__web > * { position: absolute; }

/* The setup shroud: the region cut out of a screen dimmed at 0.42, its edge a
   1-point white line with a dark outline 1.5 points outside, and eight 9-point
   handles in the accent, stroked white. */
.cam__sel {
  position: absolute;
  z-index: 8;
  left: calc(var(--pt) * 100);
  top: calc(var(--pt) * 150);
  width: calc(var(--pt) * 680);
  height: calc(var(--pt) * 400);
  box-shadow:
    inset 0 0 0 calc(var(--pt) * 1) #fff,
    0 0 0 calc(var(--pt) * 1.5) rgba(0, 0, 0, 0.25),
    0 0 0 calc(var(--pt) * 2000) rgba(10, 12, 18, 0.42);
  pointer-events: none;
}

.cam__sel i {
  position: absolute;
  width: calc(var(--pt) * 9);
  height: calc(var(--pt) * 9);
  margin: calc(var(--pt) * -4.5) 0 0 calc(var(--pt) * -4.5);
  border-radius: 50%;
  background: #007aff;
  box-shadow: 0 0 0 calc(var(--pt) * 1) #fff;
}

.cam__sel i:nth-child(1) { left: 0; top: 0; }
.cam__sel i:nth-child(2) { left: 50%; top: 0; }
.cam__sel i:nth-child(3) { left: 100%; top: 0; }
.cam__sel i:nth-child(4) { left: 100%; top: 50%; }
.cam__sel i:nth-child(5) { left: 100%; top: 100%; }
.cam__sel i:nth-child(6) { left: 50%; top: 100%; }
.cam__sel i:nth-child(7) { left: 0; top: 100%; }
.cam__sel i:nth-child(8) { left: 0; top: 50%; }

/* Recording: the ring 2 points outside the region, the controls 8 points
   above its corner. The shroud and the bar are gone, with no animation. */
.cam__ring {
  position: absolute;
  z-index: 4;
  left: calc(var(--pt) * 98);
  top: calc(var(--pt) * 148);
  width: calc(var(--pt) * 684);
  height: calc(var(--pt) * 404);
  box-shadow: inset 0 0 0 calc(var(--pt) * 2) rgba(255, 59, 48, 0.9);
  pointer-events: none;
}

.cam__stage .cam__pill { left: calc(var(--pt) * 100); top: calc(var(--pt) * 106); }

/* The camera toggle while on: no tint, a white wash behind the glyph. */
.cam__pillcam { background: rgba(255, 255, 255, 0.22); }

.cam__ring,
.cam__pill,
.cam__demo.is-rec .cam__sel,
.cam__demo.is-rec .cam__bar { display: none; }
.cam__demo.is-rec .cam__ring,
.cam__demo.is-rec .cam__pill { display: flex; }

/* The bubble: 168 points square, shadowless, the feed filling the shape and
   the border stroked inside its edge. The rim badges straddle the outline at
   -45, 225 and 270 degrees. */
.cam__bubble {
  --side: 168;
  --r: calc(var(--pt) * 84);
  position: absolute;
  z-index: 10;
  left: calc(var(--pt) * var(--bx));
  top: calc(var(--pt) * var(--by));
  width: calc(var(--pt) * var(--side));
  height: calc(var(--pt) * var(--side));
  display: none;
}

.cam__demo.is-cam .cam__bubble { display: block; }
.cam__demo.is-rect .cam__bubble { --r: calc(var(--pt) * 12); }

.cam__feed,
.cam__bubble::after {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  transition: border-radius 0.2s ease;
}

.cam__feed { overflow: hidden; background: #171a1f; }
/* The feed is footage, so it takes no pointer: no video menu to save it or
   show its controls. */
.cam__feed video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cam__demo.is-loading .cam__feed video { visibility: hidden; }

.cam__bubble::after {
  content: "";
  padding: calc(var(--pt) * var(--bw));
  background: var(--paint);
  box-shadow: var(--glow, none);
  -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 exclude, linear-gradient(#000 0 0);
}

/* The border presets, in the app's numbers (CameraBubbleStyle): width in
   points, the paint, and the glow for Soft glow. */
.cam__demo,
[data-preset="hairline"] { --bw: 1; --paint: rgba(255, 255, 255, 0.35); --glow: none; }
.cam__demo[data-border="bold"],
[data-preset="bold"] { --bw: 4; --paint: #fff; }
.cam__demo[data-border="black"],
[data-preset="black"] { --bw: 3; --paint: rgba(0, 0, 0, 0.9); }
.cam__demo[data-border="accent"],
[data-preset="accent"] { --bw: 3; --paint: #007aff; }
.cam__demo[data-border="gradient"],
[data-preset="gradient"] { --bw: 4; --paint: linear-gradient(45deg, #5957d6, #e84294 50%, #ff9e42); }
.cam__demo[data-border="glow"],
[data-preset="glow"] { --bw: 2; --paint: rgba(255, 255, 255, 0.9); --glow: 0 0 calc(var(--pt) * 12) rgba(255, 255, 255, 0.55); }

/* The loading spinner: the regular spinning indicator in Dark Aqua. */
.cam__spin {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  width: calc(var(--pt) * 28);
  height: calc(var(--pt) * 28);
  margin: calc(var(--pt) * -14) 0 0 calc(var(--pt) * -14);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.85));
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%);
  mask: radial-gradient(circle, transparent 52%, #000 54%);
  animation: cam-spin 0.9s linear infinite;
}

.cam__demo.is-loading .cam__spin { display: block; }

@keyframes cam-spin { to { transform: rotate(1turn); } }

/* The badges: 28-point discs of black at 0.7 with a 1.5-point white ring,
   hidden until the pointer is over the bubble. */
.cam__badge {
  position: absolute;
  z-index: 1;
  display: none;
  place-items: center;
  width: calc(var(--pt) * 28);
  height: calc(var(--pt) * 28);
  margin: calc(var(--pt) * -14) 0 0 calc(var(--pt) * -14);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 0 calc(var(--pt) * 1.5) #fff;
  transition: left 0.2s ease, top 0.2s ease;
}

.cam__demo.is-hover .cam__badge { display: grid; }
.cam__badge img { width: calc(var(--pt) * 17.3); height: calc(var(--pt) * 17.3); }

/* Centred on the outline: on the circle at radius 84, on the rectangle at the
   corner arc (radius 12). */
.cam__badge--resize { left: calc(var(--pt) * 143.4); top: calc(var(--pt) * 143.4); }
.cam__badge--shape { left: calc(var(--pt) * 24.6); top: calc(var(--pt) * 143.4); }
.cam__badge--style { left: 50%; top: 100%; }
.cam__demo.is-rect .cam__badge--resize { left: calc(var(--pt) * 164.5); top: calc(var(--pt) * 164.5); }
.cam__demo.is-rect .cam__badge--shape { left: calc(var(--pt) * 3.5); top: calc(var(--pt) * 164.5); }

/* The shape badge shows the shape it would switch to. */
.cam__to-circle,
.cam__demo.is-rect .cam__to-rect { display: none; }
.cam__demo.is-rect .cam__to-circle { display: block; }

/* A swatch (CameraBubbleStyle.swatchImage): the shape inset 2 points in its
   image, filled with the bubble's dark ground, the border stroked inside at
   max(1.25, width x image / 56). The badge's image is 22 points, a menu
   row's 18. */
.cam__swatch {
  --img: 18;
  position: relative;
  flex: none;
  width: calc(var(--pt) * (var(--img) - 4));
  height: calc(var(--pt) * (var(--img) - 4));
  margin: calc(var(--pt) * 2);
  border-radius: 50%;
  background: #171a1f;
}

.cam__badge .cam__swatch { --img: 22; }
.cam__demo.is-rect .cam__swatch { border-radius: calc(var(--pt) * (var(--img) - 4) * 12 / 168); }

.cam__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: calc(var(--pt) * max(1.25, var(--bw) * var(--img) / 56));
  background: var(--paint);
  -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 exclude, linear-gradient(#000 0 0);
}

.cam__badge .cam__swatch { box-shadow: 0 0 0 calc(var(--pt) * 1.5) rgba(0, 0, 0, 0.001); }

/* The border menu: a system menu, 22-point rows, the check column, the
   swatch as the item's image. */
.cam__menu {
  position: absolute;
  z-index: 12;
  left: calc(var(--pt) * 190);
  top: calc(var(--pt) * 458);
  display: none;
  flex-direction: column;
  min-width: calc(var(--pt) * 176);
  padding: calc(var(--pt) * 5);
  border-radius: calc(var(--pt) * 10);
  background: rgba(246, 246, 246, 0.84);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.2),
    0 calc(var(--pt) * 10) calc(var(--pt) * 30) rgba(0, 0, 0, 0.28);
}

.cam__demo.is-menu .cam__menu { display: flex; }

.cam__item {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 6);
  height: calc(var(--pt) * 22);
  padding: 0 calc(var(--pt) * 14) 0 calc(var(--pt) * 22);
  border-radius: calc(var(--pt) * 5);
  position: relative;
  font-size: calc(var(--pt) * 13);
}

.cam__item .cam__swatch { margin: 0; width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); background: none; }
.cam__item .cam__swatch::before {
  content: "";
  position: absolute;
  inset: calc(var(--pt) * 2);
  border-radius: inherit;
  background: #171a1f;
}
.cam__item .cam__swatch::after { inset: calc(var(--pt) * 2); }

.cam__item.is-checked::before {
  content: "";
  position: absolute;
  left: calc(var(--pt) * 5);
  width: calc(var(--pt) * 13);
  height: calc(var(--pt) * 13);
  background: currentColor;
  -webkit-mask: url("macos/sf/checkmark.png") center / 130% no-repeat;
  mask: url("macos/sf/checkmark.png") center / 130% no-repeat;
}

.cam__item.is-hl { background: #0a82ff; color: #fff; }

.cam__menu hr {
  height: 0.5px;
  margin: calc(var(--pt) * 5) calc(var(--pt) * 10);
  border: 0;
  background: rgba(0, 0, 0, 0.14);
}

/* The Record Screen bar: a 44-point capsule of glass, 12 points in, 10
   between controls, 6 between the toggles, 2 from a toggle to its chevron. */
.cam__bar {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: calc(var(--pt) * 562);
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 10);
  height: calc(var(--pt) * 44);
  padding: 0 calc(var(--pt) * 12);
  transform: translateX(-50%);
  border-radius: calc(var(--pt) * 22);
  background: rgba(250, 250, 252, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.6),
    0 0 0 0.5px rgba(0, 0, 0, 0.16),
    0 calc(var(--pt) * 8) calc(var(--pt) * 24) rgba(0, 0, 0, 0.25);
  font-size: calc(var(--pt) * 12);
  white-space: nowrap;
}

.cam__mark { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); filter: invert(1); opacity: 0.5; }

.cam__seg {
  display: inline-flex;
  padding: calc(var(--pt) * 2);
  margin-right: calc(var(--pt) * -8);
  border-radius: calc(var(--pt) * 12);
  background: rgba(0, 0, 0, 0.07);
}

.cam__seg span {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pt) * 4);
  height: calc(var(--pt) * 20);
  padding: 0 calc(var(--pt) * 9);
  border-radius: calc(var(--pt) * 10);
  color: #3a3a3c;
}

.cam__seg .is-on { background: #fff; color: #1d1d1f; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.12); }
.cam__seg img { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); filter: invert(1); opacity: 0.8; }

.cam__pair { display: inline-flex; gap: calc(var(--pt) * 2); }
.cam__pair + .cam__tog,
.cam__tog + .cam__pair,
.cam__tog + .cam__tog,
.cam__pair + .cam__pair { margin-left: calc(var(--pt) * -4); }

.cam__tog,
.cam__chev,
.cam__cancel,
.cam__record {
  display: inline-grid;
  place-items: center;
  height: calc(var(--pt) * 24);
  border-radius: calc(var(--pt) * 12);
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 0.5px 1.5px rgba(0, 0, 0, 0.16);
}

.cam__tog { width: calc(var(--pt) * 40); }
.cam__chev, .cam__cancel { width: calc(var(--pt) * 24); }
.cam__tog img { width: calc(var(--pt) * 17.3); height: calc(var(--pt) * 17.3); filter: invert(1); opacity: 0.5; }
.cam__chev img { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); filter: invert(1); opacity: 0.7; }
.cam__cancel img { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); filter: invert(1); opacity: 0.7; }

/* Camera on: video.fill in the accent; the bezel does not change. */
.cam__on {
  display: none;
  width: calc(var(--pt) * 17.3);
  height: calc(var(--pt) * 17.3);
  background: #007aff;
  -webkit-mask: url("macos/sf/video-fill.png") center / contain no-repeat;
  mask: url("macos/sf/video-fill.png") center / contain no-repeat;
}

.cam__demo.is-cam .cam__off { display: none; }
.cam__demo.is-cam .cam__on { display: block; }

.cam__sep { width: 1px; height: calc(var(--pt) * 20); background: rgba(0, 0, 0, 0.14); }

/* Record, red once there is a target, as there is here. */
.cam__record {
  display: inline-flex;
  gap: calc(var(--pt) * 4);
  padding: 0 calc(var(--pt) * 12) 0 calc(var(--pt) * 8);
  background: #ff3b30;
  color: #fff;
  font-size: calc(var(--pt) * 13);
  font-weight: 500;
}

.cam__record img { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }

/* A press, while the button is down. */
.cam__demo .is-down { filter: brightness(0.86); }

.cam__pointer {
  transform: translate(calc(var(--pt) * var(--px)), calc(var(--pt) * var(--py)));
}

/* ── OCR demo ────────────────────────────────────────────────────────────── */

/* History on a 720-point screen (a .mac-stage), over the tile's studio
   backdrop: the sidebar, the search field in the toolbar, the count chips,
   and today's captures. The CSS resting state is the search done: "invoice"
   in the field, the grid narrowed to the one capture that says it. */
.ocr__stage {
  aspect-ratio: 720 / 520;
  border-radius: var(--radius-card);
  background: var(--wash-mint) url("tiles/ocr-backdrop.webp") center / cover;
}

.hwin {
  left: calc(var(--pt) * 24);
  top: calc(var(--pt) * 24);
  width: calc(var(--pt) * 672);
  height: calc(var(--pt) * 472);
  flex-direction: row;
  border-radius: calc(var(--pt) * 16);
}

/* Light symbols are the white renders turned dark. */
.hwin__side img,
.ocr__search img { display: block; width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); filter: invert(1); opacity: 0.55; }

.hwin__side {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(var(--pt) * 2);
  width: calc(var(--pt) * 168);
  padding: calc(var(--pt) * 16) calc(var(--pt) * 10);
  background: rgba(236, 236, 240, 0.92);
  box-shadow: 0.5px 0 0 rgba(0, 0, 0, 0.1);
  font-size: calc(var(--pt) * 12);
}

.hwin__side .mac-win__lights { margin: 0 0 calc(var(--pt) * 18) calc(var(--pt) * 4); }

.hwin__item {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  padding: calc(var(--pt) * 5) calc(var(--pt) * 8);
  border-radius: calc(var(--pt) * 7);
}

.hwin__item.is-on { background: rgba(0, 0, 0, 0.08); font-weight: 500; }
.hwin__item.is-on img { opacity: 0.85; }
.hwin__item em { margin-left: auto; font-style: normal; font-size: calc(var(--pt) * 10.5); color: #8e8e93; font-variant-numeric: tabular-nums; }
.hwin__item > i { width: calc(var(--pt) * 9); height: calc(var(--pt) * 9); margin: 0 calc(var(--pt) * 3); border-radius: 50%; background: var(--c); }

.hwin__head {
  margin: calc(var(--pt) * 14) 0 calc(var(--pt) * 4) calc(var(--pt) * 8);
  font-size: calc(var(--pt) * 10.5);
  font-weight: 600;
  color: #8e8e93;
}

.hwin__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 0 calc(var(--pt) * 16);
  background: #fff;
}

.hwin__bar {
  display: flex;
  align-items: center;
  height: calc(var(--pt) * 52);
  font-size: calc(var(--pt) * 14);
}

.hwin__bar b { font-weight: 700; }

/* The native search field. */
.ocr__search {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
  width: calc(var(--pt) * 190);
  height: calc(var(--pt) * 28);
  margin-left: auto;
  padding: 0 calc(var(--pt) * 9);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.055);
  box-shadow: 0 0 0 calc(var(--pt) * 3) rgba(0, 122, 255, 0.35), inset 0 0 0 0.5px rgba(0, 122, 255, 0.6);
  font-size: calc(var(--pt) * 12.5);
}

.ocr__search img { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
.ocr__query { color: #1d1d1f; white-space: pre; }
.ocr__ph { color: #aeaeb2; }
.ocr__query:not(:empty) ~ .ocr__ph { display: none; }

.ocr__caret {
  width: 1.5px;
  height: 1.15em;
  margin-left: calc(var(--pt) * -4);
  background: #007aff;
  animation: caret-blink 1.05s steps(1) infinite;
}

@keyframes caret-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ocr__caret { animation: none; }
}

/* MediumFilterBar: count chips; a chip with nothing behind it fades. */
.hwin__chips {
  display: flex;
  gap: calc(var(--pt) * 6);
  padding-bottom: calc(var(--pt) * 12);
  font-size: calc(var(--pt) * 11.5);
}

.hwin__chips span {
  display: inline-flex;
  gap: calc(var(--pt) * 5);
  padding: calc(var(--pt) * 3) calc(var(--pt) * 10);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.05);
  transition: opacity 200ms ease;
}

.hwin__chips span.is-on { background: #007aff; color: #fff; }
.hwin__chips em { font-style: normal; opacity: 0.6; font-variant-numeric: tabular-nums; }
.hwin__chips span.is-empty { opacity: 0.4; }

.hwin__day { margin-bottom: calc(var(--pt) * 8); font-size: calc(var(--pt) * 13); font-weight: 700; }

.ocr__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--pt) * 12);
}

/* ThumbCard: the picture clipped at 10 points under a hairline, the time
   in the caption row beneath it. */
.htile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--pt) * 10);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14);
  background: #f5f5f7;
}

.htile[hidden] { display: none; }

.htile__cap {
  padding: calc(var(--pt) * 4) calc(var(--pt) * 8);
  font-size: calc(var(--pt) * 10);
  color: #8e8e93;
  background: rgba(246, 246, 248, 0.9);
}

/* The captures themselves, each a picture of something real. */
.hshot {
  position: relative;
  display: block;
  height: calc(var(--pt) * 120);
  overflow: hidden;
  background: #fff;
}

.hshot--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hshot--face img { object-position: 50% 30%; }

.hshot--chart { padding: calc(var(--pt) * 10) calc(var(--pt) * 12); }

.hshot--code {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 3);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 10);
  background: #1f1f24;
  font: calc(var(--pt) * 7.5) / 1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #d6d6dc;
  white-space: nowrap;
}

.hshot--invoice {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 10) calc(var(--pt) * 12);
  font-size: calc(var(--pt) * 8);
  color: #3a3a3c;
}

/* Narrow: two columns. */
@media (max-width: 600px) {
  .ocr__stage { aspect-ratio: 720 / 600; }
  .hwin { height: calc(var(--pt) * 552); }
  .hwin__side { display: none; }
}

/* ── Drag out ────────────────────────────────────────────────────────────── */

/* A capture taken, then its card dragged into Messages, drawn as the Mac
   draws it rather than greeked (a .mac-stage, above).

   Resting state is the finished tableau: the new card has left the stack,
   the shot sits in the thread as sent, the selection and the drag image are
   hidden and the arrow rests by the composer. So STATIC needs nothing. */
.drag__stage {
  aspect-ratio: 720 / 567;
  border-radius: var(--radius-card);
  background: var(--wash-sky);
}

.drag__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.drag__defs symbol { overflow: visible; }

/* Preview, with the report open. */
.drag__back {
  z-index: 1;
  left: calc(var(--pt) * 300);
  top: calc(var(--pt) * 20);
  width: calc(var(--pt) * 400);
  height: calc(var(--pt) * 330);
  border-radius: calc(var(--pt) * 14);
  background: #f2f2f4;
}

.drag__doctitle { display: flex; flex-direction: column; line-height: 1.2; }
.drag__doctitle b { font-weight: 600; color: #8e8e93; }
.drag__doctitle small { font-size: calc(var(--pt) * 10.5); color: #aeaeb2; }

.drag__canvas { flex: 1; padding: 0 calc(var(--pt) * 10); }

.drag__page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(var(--pt) * 14) calc(var(--pt) * 14) 0;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px calc(var(--pt) * 3) rgba(0, 0, 0, 0.1);
}

.drag__chart {
  display: block;
  width: 100%;
  margin: calc(var(--pt) * 10) 0 calc(var(--pt) * 10);
  overflow: visible;
  font-size: 8px;
  fill: #8e8e93;
}

/* Messages. */
.drag__chat {
  z-index: 2;
  left: calc(var(--pt) * 186);
  top: calc(var(--pt) * 244);
  width: calc(var(--pt) * 390);
  height: calc(var(--pt) * 306);
  border-radius: calc(var(--pt) * 20);
}

.drag__chathead { height: calc(var(--pt) * 46); box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1); }
.drag__to { font-size: calc(var(--pt) * 12.5); }
.drag__to span { color: #8e8e93; }

.drag__thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  gap: calc(var(--pt) * 3);
  padding: 0 calc(var(--pt) * 16) calc(var(--pt) * 6);
  overflow: hidden;
}

/* The conversation so far is one picture, as wide as the thread with its
   padding, so the bubbles' tails are inside it. */
.drag__history { flex: none; margin: 0 calc(var(--pt) * -16); padding: 0 calc(var(--pt) * 16); }

.drag__sent {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--pt) * 3);
  margin-top: calc(var(--pt) * 5);
  overflow: hidden;
  transform-origin: 100% 100%;
}

.drag__sentimg {
  display: block;
  width: calc(var(--pt) * 196);
  height: auto;
  margin-right: 1px;
  border-radius: calc(var(--pt) * 14);
  outline: 0.5px solid rgba(0, 0, 0, 0.14);
  outline-offset: -0.5px;
}

.drag__delivered { font-size: calc(var(--pt) * 10); font-weight: 500; color: #8e8e93; }

.drag__composer {
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: calc(var(--pt) * 8);
  padding: calc(var(--pt) * 6) calc(var(--pt) * 12) calc(var(--pt) * 12);
}

.drag__plusbtn {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--pt) * 26);
  height: calc(var(--pt) * 26);
  border-radius: 50%;
  background: #e9e9eb;
}

.drag__plusbtn svg,
.drag__wave {
  width: calc(var(--pt) * 15);
  height: calc(var(--pt) * 15);
  fill: none;
  stroke: #6e6e73;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.drag__field {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  min-height: calc(var(--pt) * 26);
  padding: calc(var(--pt) * 3) calc(var(--pt) * 6) calc(var(--pt) * 3) calc(var(--pt) * 11);
  border-radius: calc(var(--pt) * 13);
  box-shadow: inset 0 0 0 1px #d1d1d6;
  transition: box-shadow 160ms ease;
}

/* A drop the field will take: the system's focus ring. */
.drag__field.is-over { box-shadow: inset 0 0 0 1px #d1d1d6, 0 0 0 calc(var(--pt) * 3) rgba(10, 124, 255, 0.45); }

.drag__attach {
  display: block;
  flex: 0 0 100%;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.drag__attach svg {
  display: block;
  width: calc(var(--pt) * 150);
  height: auto;
  margin: calc(var(--pt) * 4) 0 calc(var(--pt) * 4);
  border-radius: calc(var(--pt) * 8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14);
}

.drag__placeholder { flex: 1; color: #aeaeb2; }
.drag__wave { margin-left: auto; }

/* The Quick Access stack: the app's card is a 184 × 128 frosted tile with
   8 points of padding, a 12-point radius and a soft drop shadow (StackCardView);
   here at the screen's scale. The newest card rests gone: it was dragged out. */
.drag__cards {
  position: absolute;
  z-index: 3;
  left: calc(var(--pt) * 16);
  bottom: calc(var(--pt) * 16);
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 10);
}

.drag__card {
  display: block;
  width: calc(var(--pt) * 150);
  height: calc(var(--pt) * 104);
  padding: calc(var(--pt) * 7);
  border-radius: calc(var(--pt) * 12);
  background: rgba(242, 242, 245, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.14),
    0 calc(var(--pt) * 4) calc(var(--pt) * 18) rgba(0, 0, 0, 0.28);
}

.drag__card img,
.drag__card svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--pt) * 7);
}

.drag__card img { object-fit: cover; }
.drag__card--new { opacity: 0; }

/* The owned selector's marquee, stroke for stroke: a 1-point white line over
   a dark outline, a neutral grey lift inside, no dim and no handles. */
.drag__sel {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background: rgba(191, 191, 191, 0.28);
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
}

/* OverlayPill: HUD material, caption-size medium digits, 6 points under the
   selection's trailing corner. */
.drag__readout {
  position: absolute;
  right: 0;
  top: calc(100% + var(--pt) * 6);
  padding: calc(var(--pt) * 3) calc(var(--pt) * 8);
  border-radius: 999px;
  background: rgba(30, 30, 32, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: calc(var(--pt) * 10);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.drag__readout:empty { display: none; }

/* The drag image: the card's picture, a little translucent, under the pointer. */
.drag__ghost {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 0;
  width: calc(var(--pt) * 136);
  height: auto;
  border-radius: calc(var(--pt) * 7);
  opacity: 0;
  filter: drop-shadow(0 calc(var(--pt) * 8) calc(var(--pt) * 12) rgba(0, 0, 0, 0.25));
  pointer-events: none;
  will-change: transform;
}

/* The pointer rests by the composer. */
.drag__pointer { transform: translate(calc(var(--pt) * 560), calc(var(--pt) * 470)); }

/* Narrow: the screen squares up; Messages takes the extra height. */
@media (max-width: 600px) {
  .drag__stage { aspect-ratio: 1 / 1; }
  .drag__chat { top: calc(var(--pt) * 290); height: calc(var(--pt) * 414); }
  .drag__pointer { transform: translate(calc(var(--pt) * 560), calc(var(--pt) * 624)); }
}

/* ── The MCP server ──────────────────────────────────────────────────────── */

/* A desk with a question on it, on a 660-point screen (a .mac-stage): the
   menu bar with Snapline's status icon, the checkout page the assistant was
   asked about, the assistant's terminal in front, and the app's approval
   card hanging from the status item. The card up and the call still running
   is the CSS resting state, because that is the frame the section is about:
   nothing has been captured, and the reader has not answered. The toast,
   the reply and the pointer rest hidden, so STATIC needs no branch. */
.mcp__stage {
  --screen-w: 660;
  aspect-ratio: 660 / 570;
  border-radius: var(--radius-card);
  background: var(--wash-solar);
}

.mcp__menubar {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--pt) * 26);
  padding: 0 calc(var(--pt) * 22) 0 calc(var(--pt) * 22);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.08);
  font-size: calc(var(--pt) * 12.5);
}

.mcp__menus { display: inline-flex; gap: calc(var(--pt) * 16); }
.mcp__menus b { font-weight: 700; }

/* Fixed boxes, so the status item's centre is a known 235 points from the
   screen's right edge and the card's arrow can be set on it. */
.mcp__extras { display: inline-flex; align-items: center; gap: calc(var(--pt) * 8); }
.mcp__extras > img,
.mcp__item { display: grid; place-items: center; width: calc(var(--pt) * 22); height: calc(var(--pt) * 20); border-radius: calc(var(--pt) * 5); }
.mcp__extras > img { padding: calc(var(--pt) * 2); filter: invert(1); opacity: 0.85; }
.mcp__item img { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); opacity: 0.85; }
.mcp__item.is-on { background: rgba(0, 0, 0, 0.12); }
.mcp__clock { width: calc(var(--pt) * 104); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The checkout page, in Safari behind the terminal. */
.mcp__page {
  z-index: 1;
  left: calc(var(--pt) * 22);
  top: calc(var(--pt) * 50);
  width: calc(var(--pt) * 360);
  height: calc(var(--pt) * 336);
  border-radius: calc(var(--pt) * 14);
}

.mcp__web {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 16) calc(var(--pt) * 22);
  background: #fff;
  font-size: calc(var(--pt) * 11);
  color: #3a3a3c;
}

/* The assistant's terminal. */
.mcp__term {
  z-index: 2;
  left: calc(var(--pt) * 236);
  top: calc(var(--pt) * 306);
  width: calc(var(--pt) * 402);
  height: calc(var(--pt) * 244);
  border-radius: calc(var(--pt) * 12);
  background: #1e1e20;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 0 0 0.5px rgba(0, 0, 0, 0.6),
    0 calc(var(--pt) * 22) calc(var(--pt) * 48) calc(var(--pt) * -6) rgba(0, 0, 0, 0.45);
}

.mcp__termbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--pt) * 10);
  height: calc(var(--pt) * 30);
  padding: 0 calc(var(--pt) * 12);
  background: #2a2a2d;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.6);
}

.mcp__termtitle { flex: 1; margin-right: calc(var(--pt) * 52); text-align: center; font-size: calc(var(--pt) * 11); font-weight: 600; color: rgba(255, 255, 255, 0.6); }

.mcp__termbody {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 7);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 14);
  font: calc(var(--pt) * 10.5) / 1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e5e5ea;
}

.mcp__line { margin: 0; }
.mcp__line--you b { color: #8e8e93; font-weight: 400; }
.mcp__line--call b { font-weight: 700; }
.mcp__dot { display: inline-block; width: calc(var(--pt) * 6); height: calc(var(--pt) * 6); margin-right: calc(var(--pt) * 3); border-radius: 50%; background: #30d158; vertical-align: 0.1em; }

.mcp__line--wait { padding-left: calc(var(--pt) * 10); color: #8e8e93; }
.mcp__elbow { color: #636366; }
.mcp__reply { opacity: 0; }

/* ApprovalBubble: 8 points of inset around a 320-point card, radius 10, an
   8 x 16 arrow on the status item (235 points from the right edge), window
   background under a hairline, the glyph in the accent. */
.mcp__ask {
  position: absolute;
  z-index: 6;
  right: 0;
  top: calc(var(--pt) * 26);
  width: calc(var(--pt) * 336);
  padding: 0 calc(var(--pt) * 8) calc(var(--pt) * 8);
  filter: drop-shadow(0 calc(var(--pt) * 2) calc(var(--pt) * 6) rgba(0, 0, 0, 0.25));
  transform-origin: calc(100% - var(--pt) * 235) 0;
}

.mcp__arrow {
  display: block;
  width: calc(var(--pt) * 16);
  height: calc(var(--pt) * 8);
  margin-left: calc(var(--pt) * (336 - 235 - 16));
  background: #f2f2f4;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mcp__card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 8);
  padding: calc(var(--pt) * 11) calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 10);
  background: #f2f2f4;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}

.mcp__prompt { display: flex; gap: calc(var(--pt) * 8); margin: 0; font-size: calc(var(--pt) * 13); font-weight: 600; line-height: 1.3; color: #1d1d1f; }

.mcp__glyph {
  flex: none;
  width: calc(var(--pt) * 16);
  height: calc(var(--pt) * 16);
  margin-top: calc(var(--pt) * 1);
  background: #007aff;
  -webkit-mask: url("macos/sf/camera-viewfinder.png") center / contain no-repeat;
  mask: url("macos/sf/camera-viewfinder.png") center / contain no-repeat;
}

.mcp__foot { margin: 0; font-size: calc(var(--pt) * 11); line-height: 1.35; color: #6e6e73; }
.mcp__buttons { display: flex; justify-content: flex-end; gap: calc(var(--pt) * 8); }

.mcp__btn {
  padding: calc(var(--pt) * 3) calc(var(--pt) * 13);
  border-radius: 99px;
  font-size: calc(var(--pt) * 12);
  font-weight: 500;
  transition: filter 120ms ease;
}

.mcp__btn--deny { background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 0.5px 1px rgba(0, 0, 0, 0.12); }
.mcp__btn--allow { background: #007aff; color: #fff; }
.mcp__btn.is-pressed { filter: brightness(0.85); }

/* FeedbackHUD, agentCaptured: the frosted capsule near the bottom of the
   screen, naming the client. */
.mcp__toast {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(var(--pt) * 446);
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 7);
  padding: calc(var(--pt) * 6) calc(var(--pt) * 14);
  border-radius: 99px;
  background: rgba(246, 246, 248, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 calc(var(--pt) * 6) calc(var(--pt) * 18) rgba(0, 0, 0, 0.22);
  font-size: calc(var(--pt) * 12.5);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
}

.mcp__toast img { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); filter: invert(1); opacity: 0.75; }

.mcp__cursor { opacity: 0; transform: translate(calc(var(--pt) * 520), calc(var(--pt) * 520)); }

/* Narrow: the screen squares up a little so the card and terminal keep room. */
@media (max-width: 600px) {
  .mcp__stage { aspect-ratio: 660 / 640; }
  .mcp__term { top: calc(var(--pt) * 360); height: calc(var(--pt) * 264); }
  .mcp__toast { top: calc(var(--pt) * 516); }
  .mcp__menus span { display: none; }
  .mcp__menubar { padding-left: calc(var(--pt) * 30); }
}

/* ── The studio slider ───────────────────────────────────────────────────── */

/* Every feature the sections above did not stage, one card each, in a
   scroll-snap strip that starts on the 1200px container's left edge and runs
   off the right of the viewport: the cut card is the cue that there is more.
   A card is the bento's tile at hand size: a bone-white head (two-tone icon,
   name, one line) over a washed art tile holding a recreated piece of the
   app. The washes rotate, as the bento's do, because each card is its own
   demo. The strip is a plain scrolling element, so trackpad, touch and arrow
   keys work with no script; the two arrows only nudge it by one card. */
.studio { padding: clamp(48px, 8vh, 104px) 0; }

.studio__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  max-width: 1200px;
  margin: 0 auto calc(var(--step) * 4);
  padding: 0 var(--gutter);
}

.studio__intro { max-width: 640px; }
.studio__intro h2 { margin-bottom: calc(var(--step) * 2); }
.studio__intro p { margin: 0; color: var(--ink-soft); }

.studio__nav { display: flex; gap: 10px; }

/* The ghost pill, round. */
.studio__arrow {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
  cursor: pointer;
  transition: transform 160ms var(--ease-settle), box-shadow 160ms ease, opacity 160ms ease;
}

.studio__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.studio__arrow:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px #c8dcf1;
}

.studio__arrow:active:not(:disabled) { transform: translateY(0); }
.studio__arrow:disabled { opacity: 0.38; cursor: default; }

.studio__track {
  /* Where the container's content starts, or the gutter when the viewport is
     narrower than the container. */
  --edge: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter)));
  display: flex;
  gap: 24px;
  padding: 6px var(--gutter) 6px var(--edge);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--edge);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.studio__track::-webkit-scrollbar { display: none; }

/* The strip is focusable so the arrow keys can drive it; the ring sits just
   inside its edges instead of around a viewport-wide box. */
.studio__track:focus-visible { outline-offset: -3px; border-radius: 0; }

.slide {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(360px, 84vw);
  border-radius: var(--radius-media);
  background: var(--card);
  overflow: hidden;
  scroll-snap-align: start;
}

.slide__head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 22px 24px 20px;
}

.slide__head svg {
  width: 28px;
  height: 28px;
  margin-top: 1px;
  color: #7c8494;
}

.slide__head h3 {
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 4px;
}

.slide__head p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.slide__head .kbd-inline { font-size: 0.8em; padding: 1px 5px 2px; }

/* The art sits at the card's foot, so every card's tile lines up whatever
   its head says. Everything inside is positioned against the tile and
   cropped by it, the way a card crops a picture. */
.slide__art {
  position: relative;
  height: 268px;
  margin-top: auto;
  overflow: hidden;
}

.slide__art--powder   { background: linear-gradient(170deg, #e6f2ff, var(--wash-powder)); }
.slide__art--lavender { background: linear-gradient(170deg, #f8f2ff, var(--wash-lavender)); }
.slide__art--mint     { background: linear-gradient(170deg, #e9fbf1, var(--wash-mint)); }
.slide__art--solar    { background: linear-gradient(170deg, #fff9df, var(--wash-solar)); }
.slide__art--blush    { background: linear-gradient(170deg, #fff3f3, var(--wash-blush)); }
.slide__art--sand     { background: linear-gradient(170deg, #fbf6ec, var(--wash-sand)); }

/* Windows inside a tile: the page's .macwin at hand size. */
.sl-win { position: absolute; left: 24px; top: 24px; width: 300px; }
.sl-win .macwin__bar { height: 26px; }
.sl-win .macwin__body { gap: 8px; padding: 14px; }
.sl-win--doc, .sl-win--ui, .sl-win--menu { width: 250px; }

/* The selection as the app's region selector draws it (TimedRegionSelector):
   a 1-point white line over a dark outline, a neutral grey lift inside, no
   dim and no handles, and the HUD size pill 6 points under its trailing
   corner, measuring itself. */
.sl-sel {
  position: absolute;
  left: 32px;
  top: 110px;
  width: 284px;
  height: 88px;
  background: rgba(191, 191, 191, 0.28);
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.25);
}

.sl-readout {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(30, 30, 32, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font: 500 10px/1.3 -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sl-readout:empty { display: none; }

/* Capture Text's caption (ADR 0098): the same pill, parked at the top of the
   display, naming what the crosshair is for. */
.sl-caption {
  position: absolute;
  left: 50%;
  top: 8px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(30, 30, 32, 0.78);
  color: #fff;
  font: 500 10px/1.3 -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Real text and pictures inside the slides' windows and thumbs. */
.sl-t { font-size: 11px; line-height: 1.4; color: #3a3a3c; }
.sl-t--h { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #1d1d1f; }
.sl-t--dim { font-size: 10.5px; color: #8e8e93; }
.sl-chart { display: block; width: 100%; overflow: visible; }
.sl-chart,
.sl-thumb--chart svg,
.sl-take__chart { font: 8px -apple-system, BlinkMacSystemFont, "Inter", sans-serif; fill: #8e8e93; }
.sl-doc { gap: 7px; }

/* Pills: the app's dark floating strip, and the bone-white receipt. */
.sl-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 9999px;
  background: rgba(25, 28, 34, 0.86);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sl-pill--set { left: 24px; top: 18px; }
.sl-pill__thumbs { display: inline-flex; gap: 3px; }

.sl-pill__thumbs i {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(135deg, #9ec8f5, #cfe4fa);
}

.sl-pill--hud {
  left: 24px;
  bottom: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  font-size: 12.5px;
}

.sl-pill--hud svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #28c840;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Capture Set: the composed image on the editor's Indigo preset. */
/* A fixed width, as the windows have: the composition is a baked picture,
   and on the narrowest phones the tile crops it rather than squeezing it. */
.sl-composed {
  position: absolute;
  left: 24px;
  width: 312px;
  top: 58px;
  bottom: 0;
  display: flex;
  gap: 12px;
  padding: 20px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
}

.sl-shot {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(10, 13, 18, 0.22);
}

/* Thumbnails: a History cell. */
.sl-thumb {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-window);
}

.sl-thumb--on { box-shadow: 0 0 0 2px var(--marquee), var(--shadow-window); }

.sl-tick,
.sl-star {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.sl-tick {
  background-color: var(--marquee);
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.8 2.8L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 2px #fff;
}

.sl-star {
  background-color: #fff;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l2 4.2 4.6.6-3.4 3.2.9 4.6L8 11.8 3.9 14l.9-4.6L1.4 6.3 6 5.7z' fill='%23ff9f0a'/%3E%3C/svg%3E");
  box-shadow: 0 1px 3px rgba(10, 13, 18, 0.22);
}

.sl-picks {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 26px;
  display: flex;
  gap: 12px;
}

/* A sheet docked to the tile's foot: the Combine options, and the settings
   pane's format row. */
.sl-sheet {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 18px;
  border-radius: 12px 12px 0 0;
  background: var(--card);
  box-shadow: var(--shadow-window);
}

.sl-sheet--settings {
  top: 24px;
  bottom: auto;
  gap: 8px;
  border-radius: 12px;
}

.sl-seg {
  display: flex;
  padding: 3px;
  border-radius: 8px;
  background: #eceef2;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

.sl-seg span {
  flex: 1;
  padding: 5px 0;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
}

.sl-seg__on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.12);
}

.sl-button {
  align-self: flex-end;
  padding: 7px 14px;
  border-radius: 9999px;
  background: var(--charcoal);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
}

.sl-label { font-size: 11.5px; font-weight: 500; color: var(--fog); }

.sl-slider {
  position: relative;
  height: 4px;
  margin: 8px 9px 10px 0;
  border-radius: 2px;
  background: #dfe3ea;
}

.sl-slider__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 78%;
  border-radius: 2px;
  background: var(--marquee);
}

.sl-slider__knob {
  position: absolute;
  left: 78%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 13, 18, 0.3), 0 0 0 0.5px rgba(10, 13, 18, 0.12);
}

.sl-note { font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); }
/* Compress, as the card's Convert picker draws it: a full-width row. */
.sl-compress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  margin-top: 4px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.06);
  font: 500 12px -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  color: #1d1d1f;
}

.sl-compress img { width: 13px; height: 13px; filter: invert(1); opacity: 0.72; }

/* Pin anywhere: the reference photo floating over the brief. */
.sl-pinned {
  position: absolute;
  right: 22px;
  bottom: 26px;
  width: 176px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 18px 30px -8px rgba(10, 13, 18, 0.32), 0 2px 6px rgba(10, 13, 18, 0.14);
  transform: rotate(-2deg);
}

/* Smart Redact: the covered values. */
.sl-form { gap: 10px; }
.sl-form__row { display: flex; align-items: center; gap: 12px; }

.sl-redact {
  height: 14px;
  border-radius: 3px;
  background: conic-gradient(#c9ccd3 25%, #e2e4e9 0 50%, #b8bcc5 0 75%, #d5d8de 0) 0 0 / 7px 7px;
  box-shadow: 0 0 0 1px var(--marquee);
}

/* Capture Text: the selector's caption over words in a paused video, and the
   confirmation that echoes the first line it read. */
.sl-read {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
  white-space: nowrap;
}

.sl-read--head { font-weight: 600; font-size: 13px; }

.sl-sel--text { left: 32px; top: 82px; width: 236px; height: 74px; }

/* Copy the text: the Text View's blocks beside the capture. */
.sl-textview {
  position: absolute;
  inset: 24px 24px 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.sl-thumb--tall { gap: 7px; padding: 10px; }
.sl-blocks { display: flex; flex-direction: column; gap: 8px; }

.sl-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 34px 9px 11px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-window);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
}

.sl-block strong { font-weight: 600; font-size: 13.5px; }
.sl-block__kind { font-size: 10.5px; font-weight: 500; color: var(--fog); }

.sl-block--code > span:not(.sl-block__kind) {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}

/* Two squares, offset: the copy glyph. */
.sl-copy {
  position: absolute;
  right: 12px;
  top: 11px;
  width: 11px;
  height: 11px;
  border: 1.5px solid #9aa0ab;
  border-radius: 3px;
}

.sl-copy::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 11px;
  height: 11px;
  border: 1.5px solid #9aa0ab;
  border-radius: 3px;
  background: #fff;
}

/* Eyedropper: a form with a marquee-blue button, and the loupe over its
   edge reading the button's own color. */
.sl-field {
  display: block;
  height: 22px;
  border-radius: 6px;
  border: 1px solid #dcdfe5;
  background: #fbfbfc;
}

.sl-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin-top: 4px;
  border-radius: 7px;
  background: var(--marquee);
}

.sl-loupe {
  position: absolute;
  left: 150px;
  top: 108px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(10, 13, 18, 0.24), 0 0 0 1px rgba(10, 13, 18, 0.08);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 13px),
    linear-gradient(#fff 0 32%, #dfe3ea 32% 35%, var(--marquee) 35%);
}

.sl-loupe__px {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(10, 13, 18, 0.55);
}

.sl-swatch {
  position: absolute;
  left: 24px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 9999px;
  background: rgba(25, 28, 34, 0.86);
  color: #fff;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.04em;
}

.sl-swatch i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--marquee);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* History: the day-grouped gallery. */
/* A fixed width like the composition's, for the same reason: its text
   thumbnails are baked pictures. */
.sl-gallery {
  position: absolute;
  top: 22px;
  left: 24px;
  bottom: 0;
  width: 312px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sl-day { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.sl-row { display: flex; gap: 12px; }
.sl-row .sl-thumb { padding: 8px; gap: 5px; }

/* Clean desktop shots: the wallpaper, no icons, the switch. */
.sl-desktop {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: var(--wash-powder);
  box-shadow: var(--shadow-window);
}

.sl-desktop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The menu bar, frosted over the wallpaper as macOS draws it. */
.sl-desktop__bar {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sl-switchcard {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 14px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: 12.5px;
  font-weight: 500;
}

.sl-switch {
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 9999px;
  background: var(--marquee);
}

.sl-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.25);
}

/* Self-timer: a popup menu held open, the selection around it, the count. */
.sl-popup {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 130px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #d5d8de;
  background: linear-gradient(#fff, #f3f4f6);
}

.sl-chev {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid #7c8494;
  border-bottom: 1.5px solid #7c8494;
  transform: rotate(45deg);
}

.sl-chev--right { margin: 0; transform: rotate(-45deg); }

.sl-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 150px;
  margin-top: -4px;
  padding: 6px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(10, 13, 18, 0.16), 0 0 0 0.5px rgba(10, 13, 18, 0.1);
}

.sl-menu__on {
  display: block;
  height: 18px;
  border-radius: 4px;
  background: var(--marquee);
}

.sl-sel--timer { left: 30px; top: 84px; width: 166px; height: 110px; }

.sl-count {
  position: absolute;
  right: 44px;
  top: 100px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(25, 28, 34, 0.86);
  color: #fff;
  font: 500 24px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Takes that survive: the recovered recording's card. */
.sl-take {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 200px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.sl-take__frame {
  position: relative;
  display: block;
  height: 118px;
  padding: 14px 16px 0;
  background: var(--dim);
}

.sl-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sl-play::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  width: 13px;
  height: 16px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sl-take__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
}

.sl-mono {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Annotate any image: the Finder's Open With, Snapline in the submenu. */
.sl-file {
  position: absolute;
  left: 24px;
  top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 92px;
}

.sl-file img {
  width: 84px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(10, 13, 18, 0.25);
}

.sl-file__name {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--marquee);
  color: #fff;
  font-size: 11px;
}

.sl-ctx {
  position: absolute;
  left: 122px;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 146px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(10, 13, 18, 0.16), 0 0 0 0.5px rgba(10, 13, 18, 0.1);
  font-size: 12px;
}

.sl-ctx__on {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--marquee);
  color: #fff;
  font-weight: 500;
}

.sl-ctx__on .sl-chev { border-color: #fff; }
.sl-ctx--sub { left: 248px; top: 114px; width: 106px; }
.sl-ctx--sub .sl-ctx__on { justify-content: flex-start; }
.sl-ctx__on img { width: 16px; height: 16px; border-radius: 4px; }

/* Real content inside the slides (the greeking is retired). */
.sl-shot { gap: 5px; font-size: 8.5px; color: #6e6e73; overflow: hidden; }
.sl-shot b { font-size: 7.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8e8e93; }
.sl-shot > span { font-size: 10px; font-weight: 700; line-height: 1.2; color: #1d1d1f; }
.sl-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.sl-field-mini { padding: 3px 5px; border-radius: 4px; box-shadow: inset 0 0 0 0.5px #d1d1d6; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-btn-mini { align-self: flex-start; padding: 3px 7px; border-radius: 4px; background: #0071e3; color: #fff; font-style: normal; font-weight: 600; }

.sl-thumb:has(> img:where(:not(.baked))),
.sl-thumb--chart { padding: 0; overflow: hidden; }
.sl-thumb > img { display: block; width: 100%; height: 64px; object-fit: cover; }
.sl-thumb--chart { justify-content: center; height: 64px; padding: 6px 7px; background: #fff; }
.sl-thumb--chart svg { display: block; width: 100%; overflow: visible; }
.sl-thumb--text { gap: 3px; height: 64px; font-size: 8px; color: #6e6e73; }
.sl-thumb--text b { font-size: 9.5px; color: #1d1d1f; }
.sl-gallery .sl-thumb > img,
.sl-gallery .sl-thumb--chart,
.sl-gallery .sl-thumb--text { height: 52px; }

.sl-form__k { flex: none; width: 46px; font-size: 10.5px; font-weight: 500; color: #6e6e73; }
.sl-form__v { font-size: 11px; color: #1d1d1f; }

.sl-thumb--tall { font-size: 8.5px; color: #3a3a3c; }
.sl-thumb--tall b { font-size: 10px; color: #1d1d1f; }
.sl-thumb--tall code,
.sl-block--code code { font: 9.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #1d1d1f; }
.sl-thumb--tall code { font-size: 7px; }

.sl-field { height: auto; padding: 4px 8px; font-size: 11px; line-height: 1.3; color: #1d1d1f; }
.sl-cta { color: #fff; font-size: 11.5px; font-weight: 600; }

.sl-popup { font-size: 11.5px; color: #1d1d1f; }
.sl-menu { font-size: 11.5px; color: #1d1d1f; }
.sl-menu > span { display: block; padding: 2px 8px; border-radius: 4px; }
.sl-menu__on { height: auto; background: #0a7cff; color: #fff; }

.sl-take__chart { display: block; width: 100%; height: 100%; }
.sl-take__chart { fill: rgba(255, 255, 255, 0.55); }
.sl-take__name { overflow: hidden; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.sl-ctx { font-size: 11.5px; color: #1d1d1f; }
.sl-ctx > span { display: flex; align-items: center; min-height: 22px; padding: 0 6px; border-radius: 5px; }

/* ── The card after the shot ─────────────────────────────────────────────── */

/* A close-up of the bottom-left corner of a 440-point screen (a .mac-stage)
   over the tile's studio backdrop: the page the shot was taken of behind,
   and the Quick Access card at the app's own 184 x 128. On hover the card
   wears CardFrame: flat frosted cells in a 34 / middle / 34 by 43 / 42 / 43
   grid, sharing hairlines, the middle a hole the picture shows through under
   half the frost. The resting state is after the compress: frame up,
   "2.2 MB · PNG", the HUD reading the saving. */
.qa__stage {
  --screen-w: 440;
  aspect-ratio: 440 / 280;
  border-radius: var(--radius-card);
  background: var(--wash-sand) url("tiles/card-backdrop.webp") center / cover;
}

/* The symbols are white renders turned dark for the light material. */
.qa img:not(.qa__picture img),
.qa__hud img { display: block; width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); filter: invert(1); opacity: 0.72; }

.qa__behind {
  left: calc(var(--pt) * 150);
  top: calc(var(--pt) * 18);
  width: calc(var(--pt) * 330);
  height: calc(var(--pt) * 230);
  border-radius: calc(var(--pt) * 14);
}

.qa__behind .mac-safari__url { flex: 0 1 calc(var(--pt) * 170); margin-left: calc(var(--pt) * 20); }

.qa__behindpage {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 22) calc(var(--pt) * 24);
  background: #fff;
  flex: 1;
}

.qa {
  position: absolute;
  z-index: 2;
  left: calc(var(--pt) * 20);
  top: calc(var(--pt) * 132);
  width: calc(var(--pt) * 184);
  height: calc(var(--pt) * 128);
  border-radius: calc(var(--pt) * 12);
  background: rgba(242, 242, 245, 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 calc(var(--pt) * 4) calc(var(--pt) * 22) rgba(0, 0, 0, 0.32);
}

/* The capture itself: a Safari window's worth of the journal page. */
.qa__picture {
  position: absolute;
  inset: calc(var(--pt) * 8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--pt) * 8);
  background: #fff;
}

.qa__picture img { display: block; width: calc(100% - var(--pt) * 14); margin: 0 calc(var(--pt) * 7); aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--pt) * 2); }

.qa__frame {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: calc(var(--pt) * 34) 1fr 1fr 1fr calc(var(--pt) * 34);
  grid-template-rows: calc(var(--pt) * 43) calc(var(--pt) * 42) calc(var(--pt) * 43);
  overflow: hidden;
  border-radius: calc(var(--pt) * 12);
}

.qa__cell,
.qa__hole {
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 0.25px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
}

.qa__cell { position: relative; background: rgba(244, 244, 247, 0.84); }
.qa__hole { grid-column: 2 / 5; background: rgba(244, 244, 247, 0.22); -webkit-backdrop-filter: none; backdrop-filter: none; }
.qa__cell--caption { grid-column: 2 / 5; align-content: center; gap: calc(var(--pt) * 1); text-align: center; line-height: 1.2; }
.qa__cell--caption b { font-size: calc(var(--pt) * 10); font-weight: 600; font-variant-numeric: tabular-nums; }
.qa__size { font-style: normal; font-size: calc(var(--pt) * 9); color: #6e6e73; font-variant-numeric: tabular-nums; }

/* A toggle that is on: filled with the accent and ticked. */
.qa__cell--on { background: #0a7cff; }
.qa__cell--on > img { filter: none; opacity: 1; }
.qa__tick { position: absolute; right: calc(var(--pt) * 3); bottom: calc(var(--pt) * 3); display: none; }
.qa__tick img { width: calc(var(--pt) * 7) !important; height: calc(var(--pt) * 7) !important; filter: none !important; opacity: 1 !important; }
.qa__cell--on .qa__tick { display: block; }

/* The picker: a sheet over the whole card with its own title and Done. */
.qa__sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 8);
  padding: calc(var(--pt) * 8);
  border-radius: calc(var(--pt) * 12);
  background: rgba(244, 244, 247, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  opacity: 0;
  pointer-events: none;
}

.qa__sheethead { display: flex; align-items: center; justify-content: space-between; height: calc(var(--pt) * 20); font-size: calc(var(--pt) * 11); }
.qa__done { padding: calc(var(--pt) * 2) calc(var(--pt) * 9); border-radius: 99px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 0.5px 1px rgba(0, 0, 0, 0.12); font-size: calc(var(--pt) * 10); }

.qa__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--pt) * 38);
  overflow: hidden;
  border-radius: calc(var(--pt) * 9);
  background: rgba(0, 0, 0, 0.06);
  font-size: calc(var(--pt) * 10.5);
}

.qa__seg { display: flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 3); box-shadow: -0.5px 0 0 rgba(0, 0, 0, 0.1); }
.qa__seg:first-child { box-shadow: none; }
.qa__seg--on { background: #0a7cff; color: #fff; font-weight: 600; }
.qa__seg--on img { width: calc(var(--pt) * 9) !important; height: calc(var(--pt) * 9) !important; filter: none !important; opacity: 1 !important; }

.qa__compress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 4);
  height: calc(var(--pt) * 34);
  border-radius: calc(var(--pt) * 9);
  background: rgba(0, 0, 0, 0.06);
  font-size: calc(var(--pt) * 10.5);
  font-weight: 500;
  transition: background-color 120ms ease;
}

.qa__compress--press { background: rgba(0, 0, 0, 0.14); }

/* FeedbackHUD: 96 points above the bottom of the screen, centred on it,
   which in this close-up is to the right of the card. */
.qa__hud {
  position: absolute;
  z-index: 3;
  left: calc(var(--pt) * 214);
  top: calc(var(--pt) * 158);
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 5) calc(var(--pt) * 11);
  border-radius: 99px;
  background: rgba(246, 246, 248, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 calc(var(--pt) * 6) calc(var(--pt) * 18) rgba(0, 0, 0, 0.2);
  font-size: calc(var(--pt) * 10);
  white-space: nowrap;
}

.qa__hud img { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); opacity: 0.8; }

.qa__cursor { transform: translate(calc(var(--pt) * 190), calc(var(--pt) * 196)); }

/* ── Native strip: the bone-white band ───────────────────────────────────── */

.native {
  background: var(--card);
  color: var(--ink-soft);
}

.native__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 112px) var(--gutter);
  text-align: center;
}

.native h2 {
  color: var(--ink);
  max-width: 22ch;
  margin-inline: auto;
}

.native__claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: calc(var(--step) * 5);
}

.native__claim { text-align: left; }

.native__claim h3 {
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--step);
}

.native__claim p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */

.pricing {
  padding: clamp(64px, 10vh, 128px) 20px;
  display: flex;
  justify-content: center;
}

/* The one deliberately sharp rectangle in the rounded system: a capture
   selection has square corners, that's what the handles mean. (It still
   rounds ≤560px, where the handles are gone and it reads as a card.) */
.pricing__selection {
  position: relative;
  width: min(920px, 100%);
  border: 1.5px solid var(--marquee);
}

.pricing__readout {
  position: absolute;
  right: 0;
  bottom: -28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--marquee);
  font-variant-numeric: tabular-nums;
}

.pricing__pane {
  background: var(--card);
  padding: clamp(28px, 5vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 calc(var(--step) * 3);
}

.price__amount {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price__amount[data-state="loading"] {
  color: transparent;
  /* The span is empty while loading; without a line box the shimmer paints
     on zero height and the row jumps when the price lands. */
  min-height: 1em;
  background: linear-gradient(90deg, var(--rule), #f0f1f4, var(--rule));
  border-radius: 4px;
  min-width: 3.6ch;
  animation: shimmer 1.1s linear infinite;
  background-size: 200% 100%;
}

@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .price__amount[data-state="loading"] { animation: none; }
}

/* The fallback when the price service is unreachable is a link, because a
   dead-looking headline where a price should be reads as broken. */
.price__amount a {
  color: inherit;
  text-decoration-color: var(--marquee);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.price__was {
  font-size: 1.15rem;
  color: var(--ink-soft);
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}

.price__was[hidden] { display: none; }

.price__unit {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}

/* When the launch price is ending, the page says so beside the price: the
   instant on the reader's own clock, and how long is left. launch.js writes
   it and takes it away; the markup never names the launch price, so ending
   the launch touches no page. Quiet like the struck-through list price, and
   for the same reason: it is a fact about the price, not a sales device.
   The time left is the one thing set in full ink. */
.price__ends {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.price__ends strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.price__ends[hidden] { display: none; }

.pricing__terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* On the wide pane the terms are the second column, split off by a hairline —
   the offer on the left, the license facts on the right. */
@media (min-width: 821px) {
  .pricing__terms {
    border-left: 1px solid var(--rule);
    padding-left: clamp(24px, 3.5vw, 44px);
  }
}

.pricing__terms li {
  position: relative;
  padding: 11px 0 11px 30px;
  color: var(--ink-soft);
  font-size: 0.98rem;
  border-top: 1px solid var(--rule);
}

.pricing__terms li:first-child { border-top: 0; }

.pricing__terms li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18px;
  width: 9px;
  height: 9px;
  background: var(--marquee);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 105, 224, 0.25);
}

.pricing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: calc(var(--step) * 2);
}

.pricing__renew {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

@media (max-width: 820px) {
  .pricing__pane { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 560px) {
  .pricing__selection .handle, .pricing__readout { display: none; }
  .pricing__selection { border-radius: 12px; overflow: hidden; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 9vh, 112px);
}

.faq h2 { margin-bottom: calc(var(--step) * 4); }

/* Each question is its own bone-white card. */
.faq__item {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 0 clamp(22px, 3vw, 36px);
  margin-bottom: 14px;
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 36px 22px 0;
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  position: relative;
  transition: color 120ms ease;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary:hover { color: var(--marquee-deep); }

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 400ms var(--ease-settle);
}

.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }

/* The answer eases open instead of snapping. Browsers without ::details-content
   or interpolate-size fall back to the instant toggle details always had. */
@media (prefers-reduced-motion: no-preference) {
  .faq__item::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition:
      content-visibility 550ms allow-discrete,
      opacity 550ms var(--ease-settle),
      block-size 550ms var(--ease-settle);
  }

  .faq__item[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

.faq__item p {
  /* Padding, not margin: a bottom margin collapses out of ::details-content
     and the answer lands flush on the card's edge. */
  margin: 0;
  padding: 0 24px 24px 0;
  color: var(--fog);
  max-width: 62ch;
}

.faq h2 { text-align: center; }

/* ── Close ───────────────────────────────────────────────────────────────── */

.close {
  text-align: center;
  padding: clamp(56px, 9vh, 112px) var(--gutter) clamp(64px, 10vh, 120px);
}

.close__logo { margin-bottom: calc(var(--step) * 2); }

.close h2 { margin-bottom: calc(var(--step) * 4); }

.close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: calc(var(--step) * 2);
}

.close__fine {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.close__fine code,
.faq__item code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  padding: 1px 5px 2px;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.14);
  white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--rule);
  padding: 22px 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.footer a { text-decoration-color: #c3c8cf; }