/* Apple's light gray desktop, paced with white bands and one black field. Light only, on purpose: one excellent theme. */
:root {
  --paper: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #515154;
  --ink-3: #6e6e73;
  --rule: rgb(0 0 0 / 0.1);
  --tint: rgb(0 0 0 / 0.05);
  --tint-strong: rgb(0 0 0 / 0.09);
  --glass: rgb(255 255 255 / 0.72);
  --glass-edge: rgb(0 0 0 / 0.08);
  --glass-lit: rgb(255 255 255 / 0.9);
  --shadow-window: 0 24px 60px rgb(0 0 0 / 0.16), 0 2px 8px rgb(0 0 0 / 0.06);
  --shadow-small: 0 10px 24px rgb(0 0 0 / 0.14), 0 1px 3px rgb(0 0 0 / 0.08);
  --menubar-bg: rgb(246 246 248 / 0.72);
  --link: #0066cc;
  --night: #0b0b0d;
  --blue: #0a84ff;
  /* Apple's system blue is too light for white text; filled controls use the deeper link blue. */
  --blue-fill: #0071e3;
  --blue-fill-hover: #0068d1;
  --orange: #ff9f0a;
  --purple: #bf5af2;
  --radius-window: 26px;
  --radius-control: 999px;
  --radius-tile: 12px;
  --gutter: clamp(16px, 4vw, 64px);
  --menubar: 32px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.15, 0.64, 1);
  /* Strong ease-out for UI responses (Emil Kowalski's curve). */
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* Smooth scrolling starts after load (site.js adds .is-ready), so a link to #section jumps there instantly. */
html.is-ready { scroll-behavior: smooth; }
html {
  scroll-padding-top: calc(var(--menubar) + 24px);
  scrollbar-color: var(--tint-strong) var(--paper);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--blue-fill);
}

::selection { background: rgb(0 113 227 / 0.22); }

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

h1, h2 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

/* Apple's editorial display voice: semibold, big, tight. */
h2 {
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.lead { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.45; color: var(--ink-2); margin: 24px 0 0; max-width: 34em; }

kbd { font-family: var(--font); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--blue-fill);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 44px; }

/* ——— Menu bar ——— */

.menubar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--menubar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--menubar-bg);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
}

.menubar__menus { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.menubar__menus a {
  color: var(--ink);
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.menubar__menus a:hover { background: var(--tint-strong); }
.menubar__app { font-weight: 700; }

.menubar__extras { display: flex; align-items: center; gap: 6px; flex: none; }
.menubar__extra {
  display: grid;
  place-items: center;
  height: 24px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.menubar__extra:hover { background: var(--tint-strong); }
.menubar__snicker[aria-expanded="true"] { background: var(--tint-strong); }
.menubar__clock { margin-left: 6px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ——— Desktop (first viewport) ——— */

main { padding-top: var(--menubar); }

/* The copy lines up with the 1200px column the sections below use, but the popover hugs the right edge at any width,
   so it always hangs under its menu bar icon, like a real popover. */
.desktop {
  position: relative;
  min-height: calc(100svh - var(--menubar));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  column-gap: clamp(32px, 6vw, 120px);
  align-items: start;
  padding: 0 var(--gutter) clamp(48px, 8vh, 96px) max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
}

.desktop__copy { position: relative; z-index: 2; align-self: center; padding-top: clamp(48px, 10vh, 120px); }

.desktop__icon {
  width: clamp(76px, 7vw, 96px);
  height: auto;
  filter: drop-shadow(0 14px 22px rgb(0 0 0 / 0.22));
  margin-bottom: 22px;
}

.wordmark {
  font-size: clamp(4rem, 2rem + 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-bottom: 22px;
}

.promise {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 26ch;
  margin: 0 0 32px;
  color: var(--ink-2);
}
.promise strong { color: var(--ink); font-weight: 600; }

.shortcut { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; flex-wrap: wrap; }
.keys { display: flex; gap: 8px; }
.keys kbd {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 -3px 0 var(--tint-strong), 0 4px 10px rgb(0 0 0 / 0.08);
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.keys.is-pressed kbd { transform: translateY(3px); box-shadow: inset 0 -1px 0 var(--tint-strong), 0 1px 3px rgb(0 0 0 / 0.08); }
.shortcut__hint { color: var(--ink-2); font-size: 15px; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-control);
  font: 500 17px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform 0.2s var(--ease-out), background-color 0.2s;
}
.button svg { width: 18px; height: 18px; }
.button--primary { color: #fff; background: var(--blue-fill); }
.button--primary:hover { color: #fff; background: var(--blue-fill-hover); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .button--primary:hover { transform: translateY(-1px); } }
.button:active { transform: scale(0.97); transition-duration: 100ms; }
.button--secondary { color: var(--ink); background: var(--tint-strong); }
.button--secondary:hover { background: var(--rule); }

.command {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 7px 0 18px;
  border-radius: var(--radius-control);
  border: 1px solid var(--glass-edge);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font: 500 14px/1 var(--mono);
}
.command code { font: inherit; }
.command__action {
  font: 600 13px/1 var(--font);
  color: var(--ink);
  padding: 10px 13px;
  border-radius: var(--radius-control);
  background: var(--tint);
}
.command:hover .command__action { background: var(--tint-strong); }

.fineprint { margin: 0; font-size: 14px; color: var(--ink-3); }

/* ——— Desktop GIF windows you can drag around ——— */

.stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sticker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 150px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
  border: 1px solid var(--glass-edge);
  overflow: hidden;
  rotate: var(--r);
  translate: var(--dx, 0) var(--dy, 0);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transition: rotate 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), scale 0.3s var(--ease-out);
}
.sticker--small { width: 118px; }
.sticker.is-dragging { cursor: grabbing; rotate: 0deg; scale: 1.05; box-shadow: var(--shadow-window); z-index: 5; transition: none; }
.sticker__bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; font-size: 10.5px; color: var(--ink-3); }
.sticker__bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.sticker__bar i:nth-child(2) { background: #febc2e; }
.sticker__bar i:nth-child(3) { background: #28c840; }
.sticker__bar span { margin-left: 4px; font-weight: 500; }
.sticker__gif { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--a); font-size: 44px; }
.sticker--small .sticker__gif { font-size: 34px; }
.sticker__gif span { animation: bob 1.8s ease-in-out infinite alternate; }

/* ——— The popover ——— */

.demo-anchor { position: sticky; top: calc(var(--menubar) + 12px); z-index: 3; padding-top: 12px; }

.popover {
  position: relative;
  width: 420px;
  height: 560px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-window);
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(1.8);
  -webkit-backdrop-filter: blur(34px) saturate(1.8);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-window), inset 0 1px 0 var(--glass-lit);
  transform-origin: 88% 0;
  /* Toggled by ⌘⌥V, often: quick to open, quicker to close, no overshoot or blur. */
  transition: transform 200ms var(--ease-ui), opacity 150ms var(--ease-ui);
}
.popover.is-closed {
  transform: scale(0.96) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 150ms var(--ease-ui), opacity 120ms var(--ease-ui), visibility 0s 150ms;
}

.popover__arrow {
  position: absolute;
  top: -10px;
  right: var(--arrow-right, 34px);
  width: 22px;
  height: 11px;
  background: var(--glass);
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 10px 0;
  height: 40px;
  padding: 0 12px 0 14px;
  border-radius: var(--radius-control);
  background: var(--tint);
  border: 1px solid transparent;
}
.search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(10 132 255 / 0.25); }
.search__icon { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 17px/1 var(--font);
}
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search__clear { display: grid; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; }
.search__clear[hidden] { display: none; }
.search__clear svg { width: 17px; height: 17px; }

.chips { display: flex; gap: 6px; padding: 10px 10px 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  border: 0;
  background: var(--tint);
  color: var(--ink);
  font: 500 12px/1 var(--font);
  cursor: pointer;
  transition: background-color 0.15s;
}
.chip svg { width: 12px; height: 12px; fill: currentColor; }
.chip:hover { background: var(--tint-strong); }
.chip[aria-pressed="true"] { background: var(--blue-fill); color: #fff; }

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 10px 10px;
  overflow-y: auto;
  scrollbar-width: none;
  align-content: start;
}
.grid::-webkit-scrollbar { display: none; }
.grid__col { display: flex; flex-direction: column; gap: 6px; }

.tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  padding: 0;
  border-radius: var(--radius-tile);
  background: var(--a);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
/* Entrance plays only when a new set of results arrives, never on a copy or favorite. */
.grid.is-entering .tile { animation: tile-in 220ms var(--ease-ui) both; animation-delay: calc(var(--i, 0) * 28ms); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: scale(1.04); box-shadow: 0 10px 24px rgb(0 0 0 / 0.22); z-index: 2; }
}
.tile:focus-visible { outline-offset: 2px; }
.tile.is-selected { box-shadow: inset 0 0 0 2.5px var(--blue); }
.tile__emoji {
  font-size: 42px;
  line-height: 1;
  animation: bob var(--speed, 1.6s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -170ms);
}

@keyframes tile-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes bob {
  from { transform: translateY(-4px) rotate(-6deg); }
  to { transform: translateY(4px) rotate(6deg); }
}

.tile__star {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.3);
  border: 1px solid rgb(255 255 255 / 0.4);
  opacity: 0;
  transition: opacity 0.15s;
}
.tile__star svg { width: 13px; height: 13px; color: #fff; }
.tile:hover .tile__star, .tile.is-favorite .tile__star, .tile.is-selected .tile__star { opacity: 1; }
.tile.is-favorite .tile__star svg { color: #ffd60a; }

.tile__copied {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--radius-control);
  font: 600 14px/1 var(--font);
  color: #fff;
  background: rgb(255 255 255 / 0.26);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.34);
  animation: pop 180ms var(--ease-ui) both;
}
.tile__copied svg { width: 15px; height: 15px; }
.tile.is-copied::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.25); z-index: 1; }
@keyframes pop { from { transform: scale(0.9); opacity: 0; } }

.grid__empty { position: absolute; inset: 130px 24px auto; margin: 0; text-align: center; color: var(--ink-2); font-size: 15px; }
.grid__empty b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }

.popover__footer {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--ink-3);
}

/* KLIPY's official "Powered by KLIPY" mark, per their attribution guidelines. */
.popover__klipy { height: 10px; width: auto; align-self: center; }
.site-footer__klipy { display: block; margin: 8px 0 4px; }
.site-footer__klipy img { height: 14px; width: auto; opacity: 0.75; }
.site-footer__klipy:hover img { opacity: 1; }

.demo-note { margin: 14px 4px 0; font-size: 13px; color: var(--ink-3); max-width: 420px; }
.demo-note a, .watch__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.watch__note { margin: 18px auto 0; max-width: 520px; text-align: center; font-size: 13px; color: rgb(255 255 255 / 0.62); }

/* ——— Marquee ——— */

.marquee {
  overflow: hidden;
  padding: clamp(40px, 7vh, 72px) 0;
  border-top: 1px solid var(--rule);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: max-content;
  font-size: clamp(3rem, 2rem + 4vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.marquee__track span:nth-of-type(odd) { color: var(--ink); }
.marquee__track span:nth-of-type(even) { color: var(--ink-3); }
.marquee__track i { font-style: normal; font-size: 0.8em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ——— The real thing: two real screenshots, overlapping like windows on a desktop ——— */

.real {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(96px, 16vh, 180px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.real__stage { position: relative; min-height: 720px; perspective: 900px; }
.real__shot { position: absolute; height: auto; }
/* A slice of a real desktop: the menu bar and the glass popover over the wallpaper. */
.real__shot--glass { left: 0; top: 0; width: min(76%, 540px); border-radius: 18px; box-shadow: var(--shadow-window); }
/* The Messages capture carries its own macOS window shadow (transparent PNG). It sits on top, like the window you paste into. */
.real__shot--messages { right: 0; top: 150px; width: min(46%, 300px); z-index: 1; }

/* ——— Committed fields ——— */

section { position: relative; }

.field { padding: clamp(96px, 16vh, 180px) 0; }
.field__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
/* A white band on the gray page: the way Apple paces its product pages. */
.field--white { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.field--white .facts li { color: var(--ink-2); }
.field--night { background: var(--night); color: #f5f5f7; }
.field--night .lead { color: #a1a1a6; }

.menu-section { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: clamp(40px, 8vw, 120px); align-items: center; }

.facts { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.facts li { padding-left: 22px; position: relative; max-width: 58ch; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-fill); }

.right-click { position: relative; min-height: 320px; }
.right-click__tile { position: absolute; left: 0; top: 0; width: 230px; }
.right-click .cursor { position: absolute; left: 160px; top: 100px; width: 22px; z-index: 3; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.3)); }
.context-menu {
  position: absolute;
  left: 170px;
  top: 112px;
  width: 260px;
  z-index: 2;
  padding: 6px;
  border-radius: 12px;
  background: rgb(246 246 248 / 0.97);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid rgb(0 0 0 / 0.1);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.1);
  color: #1d1d1f;
  font-size: 14px;
}
.context-menu hr { border: 0; height: 1px; background: rgb(0 0 0 / 0.1); margin: 5px 10px; }
.context-menu__item { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 6px; }
.context-menu__item--active { background: var(--blue-fill); color: #fff; }
.context-menu__item kbd { color: #515154; font-size: 13px; letter-spacing: 0.08em; }
.context-menu__item--active kbd { color: rgb(255 255 255 / 0.85); }

.tile--hero { width: 180px; aspect-ratio: 4 / 3; cursor: default; }
.tile--hero .tile__emoji { font-size: 76px; }
.tile--hero:hover { transform: none; box-shadow: none; }

/* ——— Anatomy (on the black field) ——— */

.anatomy__intro { max-width: 760px; margin-bottom: 72px; }

/* Two rows: the source spans both, and each copy runs along its own row into the app that takes it. */
.anatomy__stage {
  display: grid;
  grid-template-columns: 190px 64px minmax(0, 1fr) 48px minmax(0, 1.4fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  row-gap: 18px;
}
.anatomy__source { grid-column: 1; grid-row: 1 / 3; display: grid; justify-items: center; gap: 14px; }
.connector--fork { grid-column: 2; grid-row: 1 / 3; }
.layer--file { grid-column: 3; grid-row: 1; }
.layer--data { grid-column: 3; grid-row: 2; }
.connector--one { grid-column: 4; grid-row: 1; }
.connector--two { grid-column: 4; grid-row: 2; }
.chat--one { grid-column: 5; grid-row: 1; }
.chat--two { grid-column: 5; grid-row: 2; }
.connector { width: 100%; height: 100%; overflow: visible; }
.connector--one, .connector--two { height: 24px; }
.connector path { fill: none; stroke: rgb(255 255 255 / 0.4); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }

.anatomy__label { font-size: 13px; color: #a1a1a6; margin: 0; }

.layer, .chat {
  border-radius: 16px;
  background: #1c1c1e;
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
}
.layer { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 15px; color: #a1a1a6; }
.layer b { display: block; color: #f5f5f7; font-size: 16px; }
.layer svg { width: 30px; height: 30px; flex: none; }
.layer--file svg { color: var(--orange); }
.layer--data svg { color: var(--purple); }

.chat { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 14px 16px; }
.chat__title { grid-column: 1 / -1; margin: 0; font-size: 12px; font-weight: 600; color: #a1a1a6; }
.chat__msg { margin: 0; justify-self: start; padding: 8px 12px; border-radius: 16px; background: rgb(255 255 255 / 0.1); font-size: 14px; }
.chat__gif { grid-row: 2 / 4; grid-column: 2; width: 110px; aspect-ratio: 4 / 3; border-radius: 12px; display: grid; place-items: center; background: var(--a); font-size: 44px; }
.chat__via { align-self: end; font-size: 15px; font-weight: 600; color: #d1d1d6; margin: 0; }


/* ——— Windows: info, player, terminal ——— */

.craft, .install, .faq { max-width: 1200px; margin: 0 auto; padding: clamp(96px, 16vh, 180px) var(--gutter) 0; }

/* The video gets a full-width black field and display-size type, a change of scale after the windows above. */
.watch { margin-top: clamp(96px, 16vh, 180px); padding-left: var(--gutter); padding-right: var(--gutter); text-align: center; }
.watch__title { font-size: clamp(3rem, 1.5rem + 5vw, 6rem); letter-spacing: -0.045em; line-height: 0.95; margin: 0 auto clamp(40px, 7vh, 80px); max-width: 12ch; }
.watch .player { max-width: 1320px; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 120px rgb(0 0 0 / 0.6); border: 1px solid rgb(255 255 255 / 0.08); background: #000; }

.window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.lights { display: flex; gap: 7px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.info-window, .terminal {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}

.info-window { max-width: 780px; margin: 0 auto; }
.info-window__head { display: flex; gap: 20px; align-items: center; padding: 28px 28px 8px; }
.info-window__head img { flex: none; filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.2)); }
.info-window__head h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); }
.info-window__head p { margin: 8px 0 0; color: var(--ink-2); }
.info { margin: 0; padding: 12px 28px 28px; }
.info div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--rule); }
.info dt { color: var(--ink-3); font-size: 15px; text-align: right; }
.info dd { margin: 0; font-size: 15px; }

.install h2, .faq h2 { margin-bottom: 44px; }
.player__stage { position: relative; }
.player video { display: block; width: 100%; height: auto; background: #000; }
.player__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: 64px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 26px 0 20px;
  border-radius: var(--radius-control);
  /* Dark translucent, like Apple's video controls, so it reads on any frame, light poster included. */
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(29 29 31 / 0.72);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.3);
  color: #fff;
  font: 600 17px/1 var(--font);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background-color 0.2s;
}
.player__play svg { width: 26px; height: 26px; fill: currentColor; }
.player__play:hover { background: rgb(29 29 31 / 0.84); }
@media (hover: hover) and (pointer: fine) { .player__play:hover { transform: scale(1.04); } }
.player__play[hidden] { display: none; }

.terminal { background: #1e1e20; border-color: rgb(255 255 255 / 0.08); }
.terminal .window-bar { color: #98989d; border-color: rgb(255 255 255 / 0.08); }
.terminal__body { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 22px 24px; flex-wrap: wrap; }
.terminal__body code { font: 500 15px/1.6 var(--mono); color: #e5e5ea; overflow-wrap: anywhere; }
.terminal__prompt { color: #34c759; margin-right: 6px; }
.terminal .button--secondary { color: #fff; background: rgb(255 255 255 / 0.14); }
.terminal .button--secondary:hover { background: rgb(255 255 255 / 0.22); }
.install__note { color: var(--ink-2); max-width: 64ch; margin: 24px 0 0; }

/* ——— FAQ ——— */

.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 24px; color: var(--ink-2); max-width: 65ch; }

/* ——— Footer ——— */

.site-footer {
  max-width: 1200px;
  margin: clamp(96px, 14vh, 160px) auto 0;
  padding: 32px var(--gutter) 64px;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
}
.site-footer p { margin: 0; }
.site-footer img { margin-bottom: 10px; }
.site-footer__credits { font-size: 13px; }

/* ——— The Dock: rises when the pointer reaches the bottom edge, magnifies like the real one ——— */

.dock {
  position: fixed;
  left: 50%;
  bottom: 8px;
  z-index: 60;
  display: none;
  align-items: flex-end;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-window), inset 0 1px 0 var(--glass-lit);
  translate: -50% calc(100% + 16px);
  transition: translate 0.35s var(--ease-out);
}
.dock.is-visible { translate: -50% 0; }
.dock__item {
  --size: 54px;
  position: relative;
  display: block;
  width: var(--size);
  height: var(--size);
  flex: none;
}
.dock__icon { display: grid; place-items: center; width: 100%; height: 100%; }
img.dock__icon { object-fit: contain; transform: scale(1.22); }
.dock__tile { border-radius: 23%; background: var(--tile); box-shadow: 0 2px 6px rgb(0 0 0 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.16); }
.dock__tile--light { border: 1px solid rgb(0 0 0 / 0.1); }
.dock__tile svg { width: 58%; height: 58%; }
.dock__divider { width: 1px; height: 46px; margin: 0 6px 4px; background: var(--rule); align-self: center; }

/* The label floats above the hovered icon, like macOS. */
.dock__item::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  translate: -50% 4px;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, translate 0.12s var(--ease-out);
}
.dock__item:hover::after { opacity: 1; translate: -50% 0; }

@media (hover: hover) and (pointer: fine) and (min-width: 1080px) {
  .dock { display: flex; }
}

/* ——— Smaller screens ——— */

@media (max-width: 1080px) {
  .desktop { grid-template-columns: minmax(0, 1fr); }
  .desktop__copy { padding-top: 56px; }
  .demo-anchor { position: relative; top: 0; justify-self: center; margin-top: 48px; }
  .popover__arrow { display: none; }
  .stickers { display: none; }
  .anatomy__stage { grid-template-columns: minmax(0, 460px); grid-template-rows: none; justify-content: center; row-gap: 16px; }
  .anatomy__stage > * { grid-column: 1 !important; grid-row: auto !important; }
  .connector { display: none; }
  .menu-section { grid-template-columns: 1fr; }
  .right-click { min-height: 340px; }
}

@media (max-width: 900px) {
  .real { grid-template-columns: 1fr; }
  /* Phones: the desktop slice runs full width and Messages overlaps its corner, smaller. */
  .real__stage { min-height: 0; padding-bottom: 22%; }
  .real__shot--glass { position: relative; width: 100%; }
  .real__shot--messages { top: auto; bottom: 0; right: -2%; width: 46%; }
}

@media (max-width: 720px) {
  .menubar__menus a:not(.menubar__app) { display: none; }
  .shortcut { display: none; }
  .desktop__copy { padding-top: 40px; }
  .promise { margin-bottom: 24px; }
  .actions { flex-direction: column; align-items: stretch; }
  .button, .command { justify-content: center; }
  .command { max-width: 100%; min-width: 0; }
  .command code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .demo-anchor { width: 100%; }
  .popover { width: 100%; height: 520px; }
  .info div { grid-template-columns: 1fr; gap: 2px; }
  .info dt { text-align: left; }
  .info-window__head { flex-direction: column; align-items: flex-start; }
  .right-click__tile { width: 180px; }
  .right-click .cursor { left: 104px; top: 80px; }
  .context-menu { left: 114px; top: 92px; width: calc(100% - 114px); max-width: 250px; }
}

/* Reduce Motion: keep short fades (they help), drop movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .popover, .popover.is-closed { transform: none !important; transition: opacity 150ms linear, visibility 0s 150ms !important; }
  .tile, .sticker, .button, .dock, .keys kbd { transition-property: opacity, background-color, box-shadow !important; }
  .tile__emoji, .sticker__gif span, .marquee__track { animation: none !important; }
}

/* ——— The story: a pinned scene that plays the whole flow as you scroll ——— */

.story { position: relative; height: 420vh; border-top: 1px solid var(--rule); }
/* Marker p sits where the story has scrolled p quarters of its range, measured at the middle of the screen. */
.story__marker { position: absolute; left: 0; width: 1px; height: 1px; top: calc(var(--p) * (100% - 100svh) / 4 + 50svh); pointer-events: none; }
.story__sticky {
  position: sticky;
  top: var(--menubar);
  height: calc(100svh - var(--menubar));
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.story__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 3vh, 32px); }
.story__steps li {
  font-size: clamp(1.9rem, 1rem + 2.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  opacity: 0.18;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.story__keys { display: inline-flex; gap: 6px; vertical-align: 0.12em; margin-right: 8px; }
.story__keys kbd { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 0.2em; border-radius: 0.3em; font-size: 0.55em; font-weight: 500; background: var(--surface); border: 1px solid var(--glass-edge); box-shadow: inset 0 -2px 0 var(--tint-strong); }
.story[data-step="0"] .story__steps li:nth-child(1),
.story[data-step="1"] .story__steps li:nth-child(2),
.story[data-step="2"] .story__steps li:nth-child(3),
.story[data-step="3"] .story__steps li:nth-child(4) { opacity: 1; }

.story__scene { position: relative; aspect-ratio: 1 / 0.86; }

.scene-chat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72%;
  height: 78%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}
.scene-chat__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--rule); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.scene-chat__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.scene-chat__bar i:nth-child(2) { background: #febc2e; }
.scene-chat__bar i:nth-child(3) { background: #28c840; }
.scene-chat__bar span { margin-left: 8px; }
.scene-chat__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px; }
.scene-msg { margin: 0; align-self: flex-start; max-width: 80%; padding: 8px 12px; border-radius: 16px; background: var(--tint); font-size: 14px; line-height: 1.35; }
.scene-msg b { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.scene-gif {
  position: relative;
  align-self: flex-end;
  width: 46%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--a);
  font-size: clamp(40px, 5vw, 64px);
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  transform-origin: 100% 100%;
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-ui);
}
.scene-gif i { position: absolute; left: 8px; bottom: 8px; font: 800 10px/1 var(--font); font-style: normal; letter-spacing: 0.04em; color: #fff; padding: 3px 5px; border-radius: 4px; background: rgb(0 0 0 / 0.3); }
.scene-chat__compose { margin: 0 12px 12px; padding: 10px 14px; border-radius: 18px; background: var(--tint); font-size: 13px; color: var(--ink-3); }

.scene-pop {
  position: absolute;
  right: 0;
  top: 0;
  width: 56%;
  padding: 10px;
  display: grid;
  gap: 8px;
  border-radius: 20px;
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-window), inset 0 1px 0 var(--glass-lit);
  transform-origin: 80% 0;
  opacity: 0;
  transform: scale(0.92) translateY(-8px);
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-ui);
}
.scene-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--radius-control); background: var(--tint); font-size: 15px; }
.scene-search svg { width: 15px; height: 15px; color: var(--ink-3); }
.scene-query:empty::before { content: "Search KLIPY"; color: var(--ink-3); }
.scene-caret { width: 2px; height: 18px; background: var(--blue); margin-left: -6px; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; grid-area: 2 / 1; transition: opacity 0.3s var(--ease-out); }
.scene-grid--party { opacity: 0; }
.scene-tile { position: relative; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; background: var(--a); font-size: clamp(22px, 2.4vw, 34px); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.scene-copied {
  position: absolute;
  inset: auto 8% 10%;
  padding: 5px 0;
  border-radius: var(--radius-control);
  font: 600 12px/1 var(--font);
  text-align: center;
  color: #fff;
  background: rgb(255 255 255 / 0.3);
  border: 1px solid rgb(255 255 255 / 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.4s var(--ease-spring);
}

/* Without GSAP (or with Reduce Motion) CSS plays each step. Step 0: the popover opens. Step 1: "party" is typed
   and the results change. Step 2: a GIF is copied. Step 3: it lands in the chat. */
.story:not(.is-scrubbed)[data-step="0"] .scene-pop, .story:not(.is-scrubbed)[data-step="1"] .scene-pop, .story:not(.is-scrubbed)[data-step="2"] .scene-pop { opacity: 1; transform: none; }
.story:not(.is-scrubbed)[data-step="1"] .scene-grid--trending, .story:not(.is-scrubbed)[data-step="2"] .scene-grid--trending { opacity: 0; }
.story:not(.is-scrubbed)[data-step="1"] .scene-grid--party, .story:not(.is-scrubbed)[data-step="2"] .scene-grid--party { opacity: 1; }
.story:not(.is-scrubbed)[data-step="2"] .scene-tile--target { transform: scale(1.06); box-shadow: 0 10px 24px rgb(0 0 0 / 0.25), inset 0 0 0 2.5px var(--blue); }
.story:not(.is-scrubbed)[data-step="2"] .scene-copied { opacity: 1; transform: none; }
.story:not(.is-scrubbed)[data-step="3"] .scene-gif { opacity: 1; transform: none; }
/* GSAP owns the scene's motion, so CSS transitions must not fight it. */
.story.is-scrubbed .scene-pop, .story.is-scrubbed .scene-grid, .story.is-scrubbed .scene-tile, .story.is-scrubbed .scene-copied, .story.is-scrubbed .scene-gif { transition: none; }
.story.is-scrubbed .scene-grid--party { opacity: 1; }
.scene-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 22px; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.3)); }

/* The intro reveals these; hidden until it starts. */
.intro .desktop__copy, .intro .demo-anchor, .intro .stickers { visibility: hidden; }
.marquee.is-driven .marquee__track { animation: none; }

@media (max-width: 900px) {
  .story { height: 380vh; }
  .story__sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: center; gap: 28px; padding-top: 24px; padding-bottom: 24px; }
  .story__steps li { display: none; font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); opacity: 1; }
  .story[data-step="-1"] .story__steps li:nth-child(1),
  .story[data-step="0"] .story__steps li:nth-child(1),
  .story[data-step="1"] .story__steps li:nth-child(2),
  .story[data-step="2"] .story__steps li:nth-child(3),
  .story[data-step="3"] .story__steps li:nth-child(4) { display: block; }
  .story__scene { width: min(100%, 520px); justify-self: center; }
  .scene-gif { width: 34%; }
  .scene-msg { font-size: 13px; }
}