/* VibeRes website. Plain CSS, no build step.
   Concept: the page is a Mac. A menu bar on top, the demo on an all-in-one
   display, the real popover hanging from a menu bar, a Dock at the end.
   Colours come from the app icon's gradient (indigo to teal). */

:root {
  --desk: #eceaf6;
  --desk-2: #e3e0f2;
  --surface: #ffffff;
  --ink: #17142e;
  --muted: #4e4a66;
  --line: #cfcae4;
  --stage: radial-gradient(120% 95% at 50% 25%, #a99ddb 0%, #8b7dc4 100%);
  --stage-line: #8173bb;
  --accent: #3e2f95;
  --accent-ink: #ffffff;
  --teal: #12857e;
  --icon-a: #403290;
  --icon-b: #1ba9a1;

  --bar: rgb(246 245 252 / 72%);
  --bar-line: rgb(23 20 46 / 10%);
  --glass: rgb(255 255 255 / 78%);
  --shadow: 0 1px 1px rgb(23 20 46 / 6%), 0 18px 40px -18px rgb(23 20 46 / 35%);
  --shadow-lg: 0 2px 4px rgb(23 20 46 / 6%), 0 40px 80px -30px rgb(40 30 110 / 45%);
  --wallpaper: radial-gradient(120% 90% at 0% 0%, #cfc8f6 0%, transparent 60%),
               radial-gradient(90% 90% at 100% 100%, #bfe9e4 0%, transparent 60%), #e4e1f4;

  --term-bg: #15132a;
  --term-text: #ecebf6;
  --term-dim: #aaa6c6;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* A sampled spring: overshoots once, then settles. */
  --spring: linear(0, 0.18 7%, 0.62 18%, 0.94 30%, 1.07 40%, 1.09 46%, 1.05 58%, 1.0 72%, 0.99 84%, 1);
  --wrap: 1180px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --desk: #0f0d22;
    --desk-2: #15122d;
    --surface: #1d1a3a;
    --ink: #efeef8;
    --muted: #b0acca;
    --line: #2f2a55;
    --stage: radial-gradient(120% 95% at 50% 25%, #221d48 0%, #15122d 100%);
    --stage-line: #2f2a55;
    --accent: #a99eff;
    --accent-ink: #120f2b;
    --teal: #45d3c8;

    --bar: rgb(24 21 48 / 70%);
    --bar-line: rgb(255 255 255 / 8%);
    --glass: rgb(36 32 70 / 78%);
    --shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 18px 40px -18px rgb(0 0 0 / 70%);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 30%), 0 40px 90px -30px rgb(0 0 0 / 80%);
    --wallpaper: radial-gradient(120% 90% at 0% 0%, #2e2475 0%, transparent 60%),
                 radial-gradient(90% 90% at 100% 100%, #0f4a4a 0%, transparent 60%), #171433;

    --term-bg: #0b0a1a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: #0f0d22;
  --desk-2: #15122d;
  --surface: #1d1a3a;
  --ink: #efeef8;
  --muted: #b0acca;
  --line: #2f2a55;
  --stage: radial-gradient(120% 95% at 50% 25%, #221d48 0%, #15122d 100%);
  --stage-line: #2f2a55;
  --accent: #a99eff;
  --accent-ink: #120f2b;
  --teal: #45d3c8;

  --bar: rgb(24 21 48 / 70%);
  --bar-line: rgb(255 255 255 / 8%);
  --glass: rgb(36 32 70 / 78%);
  --shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 18px 40px -18px rgb(0 0 0 / 70%);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 30%), 0 40px 90px -30px rgb(0 0 0 / 80%);
  --wallpaper: radial-gradient(120% 90% at 0% 0%, #2e2475 0%, transparent 60%),
               radial-gradient(90% 90% at 100% 100%, #0f4a4a 0%, transparent 60%), #171433;

  --term-bg: #0b0a1a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 17px/1.55 var(--font);
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
[id] { scroll-margin-top: 64px; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--display); margin: 0 0 .45em; line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 700; letter-spacing: -.03em; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .86em; background: var(--desk-2); padding: .12em .38em; border-radius: 6px; }
.center { text-align: center; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ---------- Menu bar ---------- */
.menubar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bar-line);
}
.menubar-inner {
  display: flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 0 12px;
  font-size: 14px;
}
.menubar-app, .menubar-menus a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 10px; border-radius: 7px;
  color: var(--ink); text-decoration: none;
}
.menubar-app { font-weight: 700; }
.menubar-app img { border-radius: 5px; }
.menubar-menus { display: flex; list-style: none; margin: 0; padding: 0; }
.menubar-app:hover, .menubar-menus a:hover { background: var(--bar-line); }
.menubar-status { position: relative; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.menubar-clock { font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }

.status-glyph {
  display: grid; place-items: center;
  width: 40px; height: 30px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.status-glyph:hover, .status-glyph[aria-expanded="true"] { background: var(--bar-line); }
.status-glyph svg, .mini-menubar svg { width: 22px; height: 16px; overflow: visible; }
.glyph-screen { fill: none; stroke: currentColor; stroke-width: 1.4; }
.glyph-stand { fill: currentColor; stroke: currentColor; stroke-width: .7; stroke-linejoin: round; }
.glyph-window { fill: currentColor; }

.glyph-popover {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(340px, calc(100vw - 24px));
  padding: 10px; border-radius: 16px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--bar-line);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
}
.glyph-popover img { border-radius: 10px; }
.glyph-popover p { margin: 10px 4px 2px; font-size: 14px; color: var(--muted); }
.glyph-popover.is-opening { animation: pop-in .32s var(--spring) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.94) translateY(-6px); } to { opacity: 1; transform: none; } }

/* Appearance menu: a macOS-style pull-down with a checkmark column. */
.appearance { position: relative; }
.appearance[hidden] { display: none; }
.ap-icon { display: none; width: 16px; height: 16px; }
:root[data-appearance="system"] .ap-system,
:root[data-appearance="light"] .ap-light,
:root[data-appearance="dark"] .ap-dark { display: block; }
.mac-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
  min-width: 168px; margin: 0; padding: 5px; list-style: none;
  border-radius: 12px;
  /* Solid: the menu bar's own backdrop-filter stops a nested one from
     blurring the page, so translucency here would let content show through. */
  background: var(--surface);
  border: 1px solid var(--bar-line);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
}
.mac-menu.is-opening { animation: pop-in .22s var(--spring) both; }
.mac-menu [role="menuitemradio"] {
  display: flex; align-items: center; width: 100%; min-height: 32px;
  padding: 0 12px 0 28px; border: 0; border-radius: 7px; position: relative;
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  background: transparent; color: var(--ink);
}
.mac-menu [role="menuitemradio"][aria-checked="true"]::before {
  content: "✓"; position: absolute; left: 10px; font-weight: 700;
}
.mac-menu [role="menuitemradio"]:hover,
.mac-menu [role="menuitemradio"]:focus-visible {
  background: var(--accent); color: var(--accent-ink); outline: none;
}

@media (max-width: 640px) {
  .hide-sm, .menubar-clock { display: none; }
  .menubar-inner { padding: 0 6px; }
  .menubar-app, .menubar-menus a { padding: 0 8px; }
}

/* ---------- Hero ---------- */
.hero {
  display: grid; justify-items: center; gap: 28px;
  padding: clamp(32px, 5vw, 64px) 16px clamp(56px, 8vw, 104px);
  text-align: center;
}
.hero-copy { max-width: 820px; }
.hero-copy .lede { margin-bottom: 0; }
.hero-icon { width: 76px; height: 76px; margin: 0 auto 16px; filter: drop-shadow(0 12px 20px rgb(40 30 110 / 30%)); }
h1 {
  font-size: clamp(2.5rem, 1.2rem + 4.8vw, 4.9rem);
  font-weight: 800; letter-spacing: -.045em; line-height: .98;
  text-wrap: balance;
}
.lede { font-size: clamp(1.08rem, .98rem + .5vw, 1.32rem); color: var(--muted); max-width: 40em; margin-inline: auto; text-wrap: pretty; }

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; max-width: 760px; }
.hero-actions .fine { flex-basis: 100%; }
.fine { color: var(--muted); font-size: .92rem; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: 12px;
  font-weight: 650; font-size: 1rem; text-decoration: none;
  background: var(--accent); color: var(--accent-ink);
  transition: transform .2s var(--spring), filter .15s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active { transform: translateY(1px) scale(.98); }

.copy-cmd {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 6px 6px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: left;
}
.copy-cmd code {
  flex: 1; min-width: 0; padding: 8px 0; background: none;
  font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere;
}
.copy-cmd .nowrap { white-space: nowrap; }
.copy-btn {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: 8px;
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  background: var(--desk-2); color: var(--ink); border: 1px solid var(--line);
}
.copy-btn:hover { border-color: var(--muted); }
.copy-btn[data-state="done"] { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Devices: Apple's official iMac (M4) and MacBook Pro (M5, 14-inch) product
   bezels from developer.apple.com/design/resources, used as is under the
   Apple Design Resources License: straight on, no shadow, tilt, crop or
   animation of the device. The clip sits under the bezel's transparent screen
   area; the insets are that area measured in the original PNGs. */
.device { margin: 20px 0 0; width: min(100%, 880px); }
.device-frame { position: relative; }
.device-imac .device-frame { aspect-ratio: 4760 / 4050; }
.device-mbp .device-frame { aspect-ratio: 3860 / 2540; }
.device-screen { position: absolute; overflow: hidden; background: #000; }
.device-imac .device-screen { left: 2.9412%; top: 3.7037%; width: 94.1176%; height: 62.2222%; }
.device-mbp .device-screen { left: 10.829%; top: 11.3386%; width: 78.342%; height: 77.3228%; }
.device-screen video { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.device-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The stage: a tinted panel behind the device, part of the page's design and
   not of the product image (Apple's guidelines forbid adding shadows or
   anything else to the device itself). Every official iMac colour has the
   same near-white front, which melts into the light page; the panel gives it
   an edge. The page background stays as it is. */
.device-stage {
  padding: clamp(14px, 4%, 40px);
  border-radius: clamp(18px, 3vw, 32px);
  background: var(--stage); border: 1px solid var(--stage-line);
}
.device-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  margin-top: 14px; color: var(--muted); font-size: .92rem; text-align: center;
}
.device-meta figcaption { max-width: 46em; }
.device-mbp { width: min(100%, 860px); margin: 0 auto clamp(40px, 6vw, 72px); }

.play-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 14px; border-radius: 999px;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  color: var(--ink); background: rgb(255 255 255 / 45%);
  border: 1px solid rgb(23 20 46 / 14%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .play-toggle { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 16%); }
}
:root[data-theme="dark"] .play-toggle { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 16%); }
.play-toggle svg { width: 12px; height: 12px; fill: currentColor; }

.only-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .only-dark { display: block !important; }
  :root:not([data-theme]) .only-light { display: none !important; }
}
:root[data-theme="dark"] .only-dark { display: block !important; }
:root[data-theme="dark"] .only-light { display: none !important; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section-tint { background: var(--desk-2); }
.section-lede { color: var(--muted); font-size: 1.12rem; max-width: 36em; }
.section-lede.center { margin: 0 auto clamp(32px, 5vw, 56px); }
.prose p { color: var(--muted); max-width: 34em; }

/* Menu tour */
.menu-tour { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .menu-tour { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }

.tabs {
  display: inline-flex; gap: 2px; padding: 3px; margin: 8px 0 20px;
  border-radius: 11px; background: var(--desk-2); border: 1px solid var(--line);
  max-width: 100%;
}
.tabs [role="tab"] {
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px;
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--muted);
  white-space: nowrap;
}
.tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(23 20 46 / 18%); }
.tab-text { color: var(--muted); max-width: 32em; min-height: 6.5em; }

.tour-stage {
  position: relative; min-width: 0; margin: 0;
  border-radius: 20px; overflow: hidden;
  background: var(--wallpaper);
  box-shadow: var(--shadow);
  min-height: 640px;
}
.mini-menubar {
  display: flex; justify-content: flex-end; align-items: center;
  height: 34px; padding: 0 22px;
  background: var(--bar); border-bottom: 1px solid var(--bar-line); color: var(--ink);
}
.tour-popover {
  position: absolute; right: clamp(10px, 3vw, 18px); top: 42px;
  width: min(380px, calc(100% - 20px));
  padding: 8px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--bar-line);
  box-shadow: var(--shadow-lg);
}
.tour-popover img, .tour-popover video { width: 100%; border-radius: 10px; }
.tab-panel.is-entering { animation: crossfade .28s ease both; }
@keyframes crossfade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.tour-control {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.play-toggle[hidden] { display: none; }

/* Two-column section */
.automation-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) {
  .automation-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* Profile facts */
.facts { display: grid; gap: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 64px); margin: 0; max-width: 980px; margin-inline: auto; }
@media (min-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts > div { padding-left: 20px; border-left: 3px solid; border-image: linear-gradient(var(--icon-a), var(--icon-b)) 1; }
.facts dt { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: 6px; }
.facts dd { margin: 0; color: var(--muted); }

/* Windows */
.window {
  border-radius: 14px; overflow: hidden; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.window-bar {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.window-bar span { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.window-bar span:nth-child(2) { background: #febc2e; }
.window-bar span:nth-child(3) { background: #28c840; }
.window-bar b { position: absolute; left: 0; right: 0; text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); pointer-events: none; }

.terminal { background: var(--term-bg); color: var(--term-text); border-color: #2c2950; }
.terminal .window-bar { border-color: #2c2950; }
.terminal .window-bar b { color: var(--term-dim); }
.terminal pre { margin: 0; padding: 18px 20px 22px; overflow-x: auto; }
.terminal pre code { background: none; padding: 0; font-size: .86rem; line-height: 1.75; color: inherit; }
.prompt { color: #7fe3d9; user-select: none; }
.dim { color: var(--term-dim); }

.about { max-width: 640px; margin-inline: auto; }
.about-body { padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 48px) clamp(24px, 4vw, 36px); text-align: center; }
.about-body img { margin: 0 auto 14px; width: 96px; height: 96px; }
.about-body h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); }
.about-sub { color: var(--muted); }
.about-rows { margin: 24px 0; display: grid; gap: 10px; text-align: left; }
.about-rows > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; }
.about-rows dt { text-align: right; color: var(--muted); font-weight: 500; }
.about-rows dd { margin: 0; }
@media (max-width: 480px) {
  .about-rows > div { grid-template-columns: 1fr; gap: 0; }
  .about-rows dt { text-align: left; font-size: .9rem; }
}
.about-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; font-weight: 600; }

/* Install */
.install-terminal { max-width: 820px; margin: clamp(24px, 4vw, 40px) auto 0; }
.install-body { padding: clamp(18px, 3vw, 28px); }
.install-label { color: var(--term-dim); font-size: .92rem; margin: 0 0 8px; }
.install-label:not(:first-child) { margin-top: 20px; }
.copy-cmd-dark { background: #221f3e; border-color: #343060; box-shadow: none; }
.copy-cmd-dark code { color: var(--term-text); }
.copy-cmd-dark .copy-btn { background: #2f2b55; color: var(--term-text); border-color: #45407a; }
.install-note { margin: 22px 0 0; color: var(--term-dim); font-size: .92rem; }
.install-note a { color: #b9b0ff; }
.install-note code, .download-alt code { background: rgb(127 127 160 / 18%); }
.download-alt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  max-width: 820px; margin: 20px auto 0;
}
.download-alt p { margin: 0; color: var(--muted); flex: 1 1 26em; }

/* ---------- Footer Dock ----------
   Each app is one list item: its link (icon, with the name as a tooltip) and
   its description. Wider screens show the links as a Dock, a shelf as wide as
   the icons, centred, with the descriptions in two columns under it (the list
   items dissolve into one grid). Phones show each app as a unit: icon and
   name, the description under the name, then the next app. */
.site-footer { padding: clamp(48px, 7vw, 88px) 0 40px; background: var(--desk-2); border-top: 1px solid var(--line); }
.dock-title { font-size: 1.3rem; letter-spacing: -.01em; text-align: center; margin-bottom: 0; }
.dock { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; }
.dock-item {
  position: relative; display: block; border-radius: 16px;
  color: var(--ink); text-decoration: none;
}
.dock-item img { width: 64px; height: 64px; }
.dock-note { margin: 0; color: var(--muted); font-size: .94rem; }
.dock-note strong { display: block; color: var(--ink); font-size: 1rem; }

@media (min-width: 641px) {
  .dock {
    display: grid; grid-template-columns: 1fr auto auto 1fr;
    column-gap: 16px; row-gap: 42px; position: relative;
    /* Room for the name tooltip above the shelf. */
    margin-top: 84px;
  }
  .dock-app { display: contents; }
  /* The shelf: behind the two icons, 16 px around them, enough for a
     magnified icon (about 11 px taller) to stay inside it. */
  .dock::before {
    content: ""; grid-row: 1; grid-column: 2 / 4; margin: -16px;
    border-radius: 24px;
    background: var(--glass); border: 1px solid var(--bar-line);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  }
  .dock-app:nth-child(1) .dock-item { grid-row: 1; grid-column: 2; }
  .dock-app:nth-child(2) .dock-item { grid-row: 1; grid-column: 3; }
  .dock-app:nth-child(1) .dock-note { grid-row: 2; grid-column: 1 / 3; text-align: right; padding-right: 14px; }
  .dock-app:nth-child(2) .dock-note { grid-row: 2; grid-column: 3 / 5; padding-left: 14px; }
  .dock-item img { transition: transform .35s var(--spring); transform-origin: bottom center; }
  .dock-tip {
    position: absolute; bottom: calc(100% + 30px); left: 50%; translate: -50% 4px;
    padding: 4px 10px; border-radius: 7px; white-space: nowrap;
    font-size: .82rem; font-weight: 600;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease, translate .2s ease;
  }
  .dock-item:focus-visible img { transform: translateY(-3px) scale(1.12); }
  .dock-item:focus-visible .dock-tip { opacity: 1; translate: -50% 0; }
}
/* Hover only where there is a pointer that hovers: a tap on a phone would
   otherwise leave the effect stuck on. */
@media (min-width: 641px) and (hover: hover) {
  .dock-item:hover img { transform: translateY(-3px) scale(1.12); }
  .dock-item:hover .dock-tip { opacity: 1; translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-item img, .dock-tip { transition: none; }
}

@media (max-width: 640px) {
  .dock { display: grid; gap: 26px; max-width: 30rem; margin-top: 36px; }
  .dock-app { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; }
  /* Icon and name are the link, a 64 px target; the description sits under
     the name, beside the icon. The link spans both rows (subgrid), so its
     focus ring frames the whole app. The note's own copy of the name is for
     the Dock layout. */
  .dock-item {
    grid-column: 1 / -1; grid-row: 1 / -1;
    display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
    border-radius: 18px;
  }
  .dock-item img { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .dock-tip {
    grid-column: 2; grid-row: 1; align-self: end; padding-top: 6px;
    font-weight: 600; font-size: 1.02rem;
    text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
  }
  .dock-note { grid-column: 2; grid-row: 2; position: relative; }
  .dock-note strong { display: none; }
}

.trademarks { margin: 14px auto 0; max-width: 46em; text-align: center; color: var(--muted); font-size: .8rem; }
.credits { margin: 44px 0 0; text-align: center; color: var(--muted); font-size: .92rem; }
/* Pexelo credit: the footer's own muted text colour, the wordmark turns
   Pexelo orange only on hover or keyboard focus (pexelo reference sites). */
.pexelo-credit { margin-left: 1.25em; color: inherit; white-space: nowrap; text-decoration: none; }
.pexelo-credit svg {
  display: inline; width: auto; height: 1.02em; aspect-ratio: 2964 / 987;
  vertical-align: -0.235em; fill: currentColor; transition: fill .2s;
}
.pexelo-credit:focus-visible svg { fill: #ff6410; }
@media (hover: hover) { .pexelo-credit:hover svg { fill: #ff6410; } }
@media (max-width: 640px) {
  .pexelo-credit { display: flex; justify-content: center; align-items: center; min-height: 44px; margin: 4px 0 0; }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .hero { gap: 22px; }
  .hero-icon { width: 64px; height: 64px; margin-bottom: 12px; }
  .hero-actions { width: 100%; }
  .hero-actions .copy-cmd { flex-basis: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .copy-cmd { padding-left: 12px; }
  .copy-cmd code { font-size: .8rem; overflow-x: auto; }
  .copy-btn { padding: 0 10px; }
  .tabs [role="tab"] { padding: 0 11px; font-size: .9rem; }
  .tour-stage { min-height: 0; padding-bottom: 64px; }
  .tour-popover { position: relative; top: auto; right: auto; margin: 10px auto 0; width: min(330px, calc(100% - 20px)); }
  .download-alt .btn { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  .copy-cmd code { font-size: .74rem; }
  .install-body { padding: 14px 10px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .terminal pre { white-space: pre-wrap; padding: 16px 14px 18px; }
  .terminal pre code { font-size: .8rem; }
}

/* Reduce Motion: the hero clip stays paused, so a still before/after pair,
   cut from the same recording, shows what the switch does. */
.before-after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .before-after {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 20px);
    margin-top: 20px;
  }
  .before-after figure { margin: 0; }
  .before-after img { border-radius: 10px; border: 1px solid var(--line); }
  .before-after figcaption { margin-top: 8px; font-size: .88rem; font-weight: 600; color: var(--ink); }
}