/* Yappy — https://github.com/OperatingSystem-1/Yappy
   Copyright (C) 2026 ProxialGn. All rights reserved.
   SPDX-License-Identifier: LicenseRef-Proprietary

   This source is proprietary and confidential. Unauthorized copying,
   distribution, or modification of this file, via any medium, is strictly
   prohibited without the express written permission of ProxialGn. */

/* The yappy.biz hero (PJ 2026-09-02): a port of the "autopilot" beat of the
   mitosislabs.ai How-it-works scroll story, frozen as one viewport-high
   stage. The warm stage background, the MacBook with the self-driving demo
   on its screen, and the six agent screens in a ring around it come over
   from the monorepo (home-v3.css: .hv-mac*, .hv-pane*, .ap-*, .yd-*), with
   the class names kept so the two stay diffable. Here nothing is bound to
   scroll: the Mac sits at the bottom of the hero, the copy and the download
   pill sit above it, and everything rises into place once on load.

   Layout: the hero is a grid of [copy 1fr][mac]. --macw sizes the Mac (and
   through it every pane, in em off --fs); CSS derives it from the viewport
   and hero.js refines it once it knows how tall the copy really is. */

.nav-pill,
.nav-pill *,
.hero,
.hero *,
.hero *::before,
.hero *::after {
  box-sizing: border-box;
}

/* ---------- nav: the floating glass pill ---------- */
.nav-pill {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(960px, calc(100% - 32px));
  padding: 10px 12px 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.35);
}
/* Glass on a pseudo-element, not the pill itself (same reason as the
   Mitosis nav: backdrop-filter makes the element a backdrop root). */
.nav-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(12, 12, 16, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.nav-brand img {
  display: block;
  width: 22px;
  height: 22px;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #09090b;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 120ms ease, transform 120ms ease;
}
.nav-cta:hover {
  background: #e9e9ee;
  border-color: #e9e9ee;
}
.nav-cta:active {
  transform: translateY(1px);
}

/* ---------- the stage ---------- */
.hero {
  /* The Mac's width: a 560px cap (a step up from the scroll story's 480,
     PJ 2026-09-02), less on narrow or short
     windows. The svh term leaves room under the copy for the Mac AND the
     two screens that rise above it (their tops sit ~0.36 Mac widths above
     the lid). hero.js replaces this with an exact px value once the copy is
     measured. */
  --macw: clamp(260px, min(38vw, 560px, (100svh - 560px) / 1.05), 560px);
  /* Squeezes the ring's x offsets on narrow windows (hero.js refines). */
  --spread: 1;
  --mac-bottom: 28px;
  --copy-w: 600px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  padding: 96px 24px 0;
  color: #ffffff;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, sans-serif;
}

/* The Yappy card background (same stops as the monorepo's .hv-y-card), full
   bleed, under everything. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 8% 4%, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(104deg, rgba(255, 92, 138, 0.36), rgba(255, 155, 61, 0.36)),
    #131018;
}
/* The warm glow, at the size it reaches at the end of the scroll story
   (a ~780px disc scaled 3.75x), centred behind the copy. */
.hero-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 0;
  width: 2900px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 196, 110, 0.88) 0%,
    rgba(255, 155, 61, 0.58) 14%,
    rgba(255, 120, 90, 0.34) 30%,
    rgba(255, 92, 138, 0.14) 46%,
    rgba(255, 92, 138, 0) 64%
  );
}

/* ---------- the copy ---------- */
.hero-copy {
  position: relative;
  z-index: 6;
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--copy-w);
  padding-bottom: 16px;
}
.hero-copy > * {
  margin: 0;
}
.hero-h1,
.hero-h2 {
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.22;
  text-wrap: balance;
  /* The copy sits on the brightest part of the glow; a soft shadow lifts it
     off (PJ 2026-09-02). */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 28px rgba(60, 20, 30, 0.45);
}
.hero-h1 {
  margin-top: 0;
}
.hero-h2 {
  margin-top: 4px;
}
/* The name: white, a weight up, and a whisper of a halo. The brand gradient
   vanished into the warm background here (PJ 2026-09-02). */
.hero-em {
  font-style: normal;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 28px rgba(60, 20, 30, 0.45), 0 0 22px rgba(255, 255, 255, 0.35);
}
/* The Apple mark before "Mac": inline, cap height, never wraps away. */
.hero-mac-word {
  white-space: nowrap;
}
.hero-mac-word svg {
  width: 0.78em;
  height: 0.78em;
  display: inline-block;
  vertical-align: -0.06em;
  margin-right: 0.12em;
  /* text-shadow doesn't reach an inline SVG; give the mark the same lift. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 6px 14px rgba(60, 20, 30, 0.45));
}

/* The white pill with the Apple mark (the Mitosis hero pill). */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 22px;
  padding: 15px 30px;
  background: #ffffff;
  color: #09090b;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 12px 32px -16px rgba(255, 255, 255, 0.25);
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.hero-cta svg {
  width: 1em;
  height: 1em;
  margin-top: -0.1em;
}
.hero-cta:hover {
  background: #e9e9ee;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 16px 40px -16px rgba(255, 255, 255, 0.35);
}
.hero-cta:active {
  transform: translateY(1px);
}

.hero-sub {
  margin-top: 16px;
  max-width: 40ch;
  font-size: clamp(15px, 1.2vw, 16.5px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 18px rgba(60, 20, 30, 0.4);
}
.hero-key {
  font: inherit;
  font-weight: 700;
  font-size: 1.05em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0 7px 1px;
}
.hero-fine {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(60, 20, 30, 0.4);
}

/* ---------- the MacBook (ported from home-v3.css) ----------
   A real hinge: the lid is a rotateX'd plane on its bottom edge with a
   screen on the front and a shell on the back; the base is a thin slab
   under it. Here the lid is at rest open (8deg lean); on load it swings
   open from closed. */
.hv-mac {
  /* Proportions from a 14" MacBook Pro seen front-on (PJ 2026-09-02): the
     lid is --macw wide; the base is wider than the lid (1.23x) and sits on
     four small feet that lift it off the ground. */
  --lidh: calc(var(--macw) * 0.64);
  --baseh: calc(var(--macw) * 0.05);
  --feeth: calc(var(--macw) * 0.012);
  position: relative;
  z-index: 4;
  width: var(--macw);
  height: calc(var(--lidh) + var(--baseh) + var(--feeth));
  margin-bottom: var(--mac-bottom);
  perspective: calc(var(--macw) * 7);
  perspective-origin: 50% var(--lidh);
  pointer-events: none;
}
/* Ground shadow, so it sits on a surface rather than floating. */
.hv-mac::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: calc(var(--macw) * -0.02);
  height: calc(var(--macw) * 0.06);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%);
  z-index: -1;
}
.hv-mac-lid {
  --t: calc(var(--macw) * 0.02);
  --r: calc(var(--macw) * 0.022);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--lidh);
  transform-origin: 50% 100%;
  transform: rotateX(8deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.hv-mac-screen,
.hv-mac-shell {
  position: absolute;
  inset: 0;
  border-radius: var(--r) var(--r) 3px 3px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hv-mac-screen {
  background: #0e0e12;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  /* A thin bezel, a hair deeper along the bottom edge, as on the real thing. */
  padding: calc(var(--macw) * 0.012) calc(var(--macw) * 0.012) calc(var(--macw) * 0.02);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
/* Lid thickness: a lip along the top edge, in the lid's plane, behind the
   bezel. Shown while the lid is tilted toward the viewer, gone once open. */
.hv-mac-rim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--r) var(--r) 3px 3px;
  background: linear-gradient(180deg, #6e6e7a 0%, #4a4a54 45%, #33333b 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hv-mac-display {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  border-radius: calc(var(--macw) * 0.014);
  background: #0c0a11;
}
.hv-mac-display .yd-screen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.hv-mac-shell {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    #1a1a20;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: none;
}
.hv-mac-shell img {
  width: calc(var(--macw) * 0.06);
  height: calc(var(--macw) * 0.06);
  opacity: 0.55;
}
.hv-mac-base {
  position: absolute;
  left: -11.5%;
  bottom: var(--feeth);
  z-index: 1;
  width: 123%;
  height: var(--baseh);
  /* Fully rounded ends, like the front edge of the real base. */
  border-radius: 2px 2px calc(var(--baseh) * 0.55) calc(var(--baseh) * 0.55);
  background: linear-gradient(180deg, #3b3b44 0%, #26262d 28%, #1a1a20 70%, #121216 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 18px 40px rgba(0, 0, 0, 0.45);
}
/* The four rubber feet: two show from the front, one under each end,
   lifting the base off the ground. */
.hv-mac-base::before,
.hv-mac-base::after {
  content: '';
  position: absolute;
  top: 100%;
  width: calc(var(--macw) * 0.055);
  height: var(--feeth);
  border-radius: 0 0 3px 3px;
  background: #0b0b0e;
}
.hv-mac-base::before {
  left: 6%;
}
.hv-mac-base::after {
  right: 6%;
}
/* The lid-lift notch in the base's top edge, centred. */
.hv-mac-base-lip {
  position: absolute;
  left: 50%;
  top: -1px;
  width: calc(var(--macw) * 0.2);
  height: calc(var(--macw) * 0.009);
  transform: translateX(-50%);
  border-radius: 0 0 5px 5px;
  background: #0d0d10;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- the six agent screens ----------
   A 3D ring anchored at the Mac's centre. Each pane's place is a set of
   vars on its wrapper (--ax/--sx: |x| and its sign, --y, in Mac widths;
   --ry/--rx in degrees; --w width as a fraction of the Mac; --s scale);
   the inner .hv-pane carries the rise-in and the window itself. Desktop
   places all six as the scroll story does; a phone gets its own layout of
   four (further down). */
.p-mail  { --ax: 1.04; --sx: -1; --y: -0.06; --ry: 26;  --rx: 0;   --w: 0.5; --s: 1; }
.p-cal   { --ax: 1.04; --sx: 1;  --y: -0.06; --ry: -26; --rx: 0;   --w: 0.5; --s: 1; }
.p-term  { --ax: 0.66; --sx: -1; --y: -0.58; --ry: 16;  --rx: -12; --w: 0.4; --s: 1; }
.p-sheet { --ax: 0.66; --sx: 1;  --y: -0.58; --ry: -16; --rx: -12; --w: 0.4; --s: 1; }
.p-web   { --ax: 1.62; --sx: -1; --y: 0.27;  --ry: 42;  --rx: 0;   --w: 0.4; --s: 0.9; }
.p-files { --ax: 1.62; --sx: 1;  --y: 0.27;  --ry: -42; --rx: 0;   --w: 0.4; --s: 0.9; }
.hv-panes {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 0; /* behind the lid and base */
  perspective: calc(var(--macw) * 2.4);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}
.hv-pane-pos {
  --pw: calc(var(--macw) * var(--w));
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pw);
  aspect-ratio: 16 / 10;
  /* --spread squeezes only the part of the offset beyond the Mac's own
     half width, so a narrow window pulls the outer screens in without
     pushing the two above the Mac onto the copy. At --spread 1 this is the
     scroll story's placement exactly. --sx is the sign of --x. */
  --ox: calc((0.5 + (var(--ax) - 0.5) * var(--spread)) * var(--sx));
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--ox) * var(--macw)), calc(var(--y) * var(--macw)), 0)
    rotateY(calc(var(--ry) * 1deg)) rotateX(calc(var(--rx) * 1deg)) scale(var(--s));
  transform-style: preserve-3d;
}
.hv-pane {
  --fs: calc(var(--pw) * 0.041);
  position: absolute;
  inset: 0;
  border-radius: calc(var(--macw) * 0.018);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backface-visibility: hidden;
  overflow: hidden;
  font-size: var(--fs);
  line-height: 1.35;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.hv-pane-name {
  position: absolute;
  right: 0.7em;
  bottom: 0.55em;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* White on black, not the brand gradient (PJ 2026-09-02): the badge is a
     label, and the gradient fought the warm stage behind the windows. */
  color: #111114;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.ap {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #1c1c21;
  color: #e6e6ec;
}
.ap > * {
  min-height: 0;
  min-width: 0;
}
.ap-tb {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 2.6em;
  padding: 0 0.9em;
  background: linear-gradient(#34343b, #2a2a30);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  color: #c4c4cc;
  font-size: 0.95em;
}
.ap-tb-dark {
  background: linear-gradient(#3a3a40, #2b2b31);
  border-bottom-color: rgba(0, 0, 0, 0.6);
  color: #b8b8c0;
}
.ap-tb-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-tb-send {
  width: 1.3em;
  color: #9a9aa3;
}
.ap-lights {
  display: inline-flex;
  gap: 0.45em;
}
.ap-lights i {
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.ap-lights i:nth-child(2) {
  background: #febc2e;
}
.ap-lights i:nth-child(3) {
  background: #28c840;
}
.ap-seg {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.4em;
  overflow: hidden;
  font-size: 0.85em;
}
.ap-seg > * {
  padding: 0.15em 0.6em;
}
.ap-seg b {
  background: #4a4a52;
  font-weight: 600;
}

/* Reveal loop: .ap-reveal elements carry --i and appear one after another
   over the first ~60% of --loop, hold, then clear together; --offset shifts
   each pane's clock so the six never tick in unison. Runs only once the
   ring is live. */
.ap-reveal {
  opacity: 0;
}
.hv-panes-live .ap-reveal {
  animation: hv-pane-reveal var(--loop, 8s) linear infinite;
  animation-delay: calc(var(--offset, 0s) + var(--i, 0) * (var(--loop, 8s) * 0.6 / var(--n, 5)));
}
@keyframes hv-pane-reveal {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

.ap-status {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 2.2em;
  padding: 0 8.6em 0 0.9em;
  font-size: 0.88em;
  color: #a7a7b0;
  background: #17171c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-status-dark {
  background: #1b1b20;
}
.ap-status i {
  flex: none;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #ff9b3d;
  box-shadow: 0 0 6px rgba(255, 155, 61, 0.9);
}
.hv-panes-live .ap-status i {
  animation: hv-pane-pulse 1.4s ease-in-out var(--offset, 0s) infinite;
}
@keyframes hv-pane-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mail */
.ap-mail {
  grid-template-rows: auto auto auto auto 1fr auto;
}
.ap-mail-field {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 1.9em;
  padding: 0 1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ap-mail-field label {
  min-width: 3.8em;
  color: #8e8e96;
}
.ap-chip {
  padding: 0.05em 0.6em;
  border-radius: 999px;
  background: #3a3a42;
  color: #f2f2f6;
}
.ap-mail-body {
  padding: 0.8em 1em;
  overflow: hidden;
}
.ap-mail-body p {
  margin: 0 0 0.5em;
}
.ap-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.6em;
  border-radius: 0.4em;
  background: #2a2a31;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cfcfd6;
  font-size: 0.9em;
}
.ap-attach svg {
  width: 0.8em;
}

/* Calendar */
.ap-cal {
  grid-template-rows: auto auto 1fr auto;
}
.ap-cal-head {
  display: grid;
  grid-template-columns: 3.2em repeat(5, 1fr);
  padding: 0.35em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85em;
  color: #8e8e96;
  text-align: center;
}
.ap-cal-head b {
  color: #f2f2f6;
}
.ap-cal-today b {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #ff3b30;
  color: #fff;
}
.ap-cal-grid {
  position: relative;
  display: grid;
  grid-template-columns: 3.2em repeat(5, 1fr);
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px calc(100% / 7));
}
.ap-cal-gutter {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  font-size: 0.72em;
  color: #8e8e96;
  padding-left: 0.4em;
}
.ap-cal-gutter span {
  transform: translateY(-0.6em);
}
.ap-cal-col {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.ap-ev {
  position: absolute;
  left: 0.15em;
  right: 0.15em;
  padding: 0.2em 0.35em;
  border-radius: 0.3em;
  font-style: normal;
  font-size: 0.78em;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ap-ev small {
  display: block;
  font-size: 0.85em;
  opacity: 0.8;
}
.ap-ev-gray {
  background: #3a3a42;
  color: #d6d6de;
  border-left: 2px solid #8e8e96;
}
.ap-ev-blue {
  background: #1f3b6e;
  color: #cfe0ff;
  border-left: 2px solid #4f8cff;
}
.ap-ev-ghost {
  background: rgba(255, 155, 61, 0.18);
  border: 1px dashed rgba(255, 155, 61, 0.8);
}
.ap-ev-new {
  background: #ff9b3d;
  color: #1d1d1f;
  border-left: 2px solid #e0771a;
}

/* Terminal */
.ap-term {
  background: #1b1b20;
  color: #d6d6de;
}
.ap-term-out {
  margin: 0;
  padding: 0.7em 0.9em;
  display: grid;
  align-content: start;
  gap: 0.25em;
  font: 0.92em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  white-space: pre-wrap;
}
.ap-term-out b {
  color: #7cc7ff;
  font-weight: 600;
}
.ap-term-out i {
  color: #c8a2ff;
  font-style: normal;
}
.ap-term-out em {
  color: #57d38c;
  font-style: normal;
}
.ap-term-out u {
  color: #ffb35c;
  text-decoration: none;
}
.ap-term-bar {
  display: inline-block;
  vertical-align: middle;
  width: 7em;
  height: 0.5em;
  margin-left: 0.6em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.ap-term-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ffb35c, #ff5c8a);
}
.hv-panes-live .ap-term-bar i {
  animation: hv-pane-fill var(--loop, 8s) linear var(--offset, 0s) infinite;
}
@keyframes hv-pane-fill {
  0%,
  42% {
    width: 0;
  }
  60% {
    width: 100%;
  }
  90% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

/* Numbers */
.ap-sheet {
  grid-template-rows: auto auto 1fr auto;
}
.ap-sheet-formula {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 1.9em;
  padding: 0 0.7em;
  font-size: 0.85em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #222228;
}
.ap-sheet-formula b {
  padding: 0.1em 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.3em;
  background: #2c2c33;
  font-weight: 500;
}
.ap-sheet-formula span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #d6d6de;
}
.ap-sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84em;
  table-layout: fixed;
}
.ap-sheet-table th,
.ap-sheet-table td {
  border: 1px solid #34343b;
  padding: 0.18em 0.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.ap-sheet-table th {
  background: #26262c;
  color: #9a9aa3;
  font-weight: 500;
  text-align: center;
  width: 1.6em;
}
.ap-sheet-table thead th:nth-child(2) {
  width: 32%;
}
.ap-sheet-hdr td {
  font-weight: 600;
  background: #222228;
}
.ap-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
.ap-sel {
  box-shadow: inset 0 0 0 2px #ff9b3d;
  font-weight: 600;
}

/* Safari */
.ap-url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  height: 1.7em;
  margin: 0 1em;
  border-radius: 0.45em;
  background: #1c1c21;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85em;
  color: #d6d6de;
  white-space: nowrap;
  overflow: hidden;
}
.ap-url svg {
  width: 0.75em;
  flex: none;
}
.ap-page {
  padding: 0.5em 1em;
  display: grid;
  gap: 0.24em;
  font-size: 0.95em;
  align-content: start;
  overflow: hidden;
}
.ap-page h4 {
  margin: 0 0 0.1em;
  font-size: 1.1em;
  letter-spacing: -0.01em;
}
.ap-page label {
  display: grid;
  gap: 0.2em;
  font-size: 0.8em;
  color: #9a9aa3;
}
.ap-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
}
.ap-input {
  display: block;
  height: 1.7em;
  line-height: 1.7em;
  padding: 0 0.6em;
  border-radius: 0.4em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #26262c;
  color: #f2f2f6;
  font-size: 1.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-select {
  background:
    linear-gradient(45deg, transparent 50%, #9a9aa3 50%) calc(100% - 0.9em) 55% / 0.35em 0.35em no-repeat,
    linear-gradient(135deg, #9a9aa3 50%, transparent 50%) calc(100% - 0.55em) 55% / 0.35em 0.35em no-repeat,
    #26262c;
}
.ap-btn {
  justify-self: start;
  margin-top: 0.2em;
  padding: 0.4em 1em;
  border-radius: 0.4em;
  background: #f2f2f6;
  color: #1d1d1f;
  font-size: 0.85em;
  font-weight: 600;
}

/* Finder */
.ap-files-body {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  min-height: 0;
}
.ap-side {
  display: grid;
  align-content: start;
  gap: 0.15em;
  padding: 0.6em 0.5em;
  background: #222228;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85em;
  color: #d6d6de;
}
.ap-side b {
  font-size: 0.8em;
  color: #8e8e96;
  font-weight: 600;
  margin-bottom: 0.2em;
}
.ap-side span {
  padding: 0.15em 0.5em;
  border-radius: 0.35em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-side-on {
  background: #3a3a42;
  font-weight: 500;
}
.ap-list {
  display: grid;
  align-content: start;
  font-size: 0.86em;
}
.ap-list-head,
.ap-list-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.9fr;
  gap: 0.5em;
  padding: 0.28em 0.7em;
  align-items: center;
}
.ap-list-head {
  color: #8e8e96;
  font-size: 0.85em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ap-list-row:nth-child(odd) {
  background: #202026;
}
.ap-list-row > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.ap-file i {
  flex: none;
  width: 0.9em;
  height: 1.1em;
  border-radius: 2px;
  background: #3a3a42;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.ap-file-pdf i {
  background: linear-gradient(#f2f2f6 55%, #e63e3e 55%);
}
.ap-file-md i {
  background: linear-gradient(#f2f2f6 35%, #9a9aa3 35%);
}
.ap-file-png i {
  background: linear-gradient(135deg, #7cc7ff, #c8a2ff);
}
.ap-kind {
  color: #8e8e96;
}
.ap-moved {
  color: #ffb35c;
  font-weight: 500;
}

/* ---------- the demo on the Mac's screen (yd-*, ported) ----------
   A 16:10 mini desktop sized in container units off the display. The
   driver in hero.js is the vanilla port of the monorepo's yappy-demo.tsx:
   the notch offers, the agent fills the window while the card narrates,
   the cursor pulls up short of Send. Two acts, looping. */
.yd-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 22% 16%, rgba(255, 92, 138, 0.1), transparent 70%),
    radial-gradient(70% 60% at 85% 92%, rgba(255, 155, 61, 0.07), transparent 70%),
    linear-gradient(135deg, #1b1526, #121019 55%, #0c0a11);
  font-size: 8.4px;
  font-size: 1.6cqw;
  line-height: 1.45;
  text-align: left;
  color: #f2f1f7;
  user-select: none;
  -webkit-user-select: none;
}
.yd-menubar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2.3em;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding: 0 1.4em;
  background: rgba(21, 19, 28, 0.92);
  color: #9b98ab;
  font-size: 0.95em;
}
.yd-menubar .app {
  color: #f2f1f7;
  font-weight: 600;
}
.yd-menubar .clock {
  margin-left: auto;
  color: #cfcde0;
}
.yd-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition: opacity 500ms ease;
}
.yd-glow.on {
  opacity: 1;
  animation: yd-pulse 2.4s ease-in-out infinite;
}
@keyframes yd-pulse {
  0%,
  100% {
    opacity: 0.62;
  }
  50% {
    opacity: 1;
  }
}
.yd-glow i {
  position: absolute;
  display: block;
  background-image: linear-gradient(90deg, #ff5c8a, #ff9b3d, #ff5c8a, #ff9b3d, #ff5c8a);
  background-size: 200% 100%;
  animation: yd-drift 9s linear infinite;
}
.yd-glow .g-t {
  inset: 0 0 auto 0;
  height: 3.4em;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}
.yd-glow .g-b {
  inset: auto 0 0 0;
  height: 3.4em;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.yd-glow .g-l {
  inset: 0 auto 0 0;
  width: 3.4em;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}
.yd-glow .g-r {
  inset: 0 0 0 auto;
  width: 3.4em;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
}
@keyframes yd-drift {
  to {
    background-position: -200% 0;
  }
}
.yd-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 11.5em;
  height: 2.3em;
  z-index: 6;
  background: #000;
  border-radius: 0 0 0.85em 0.85em;
  transition:
    width 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.yd-notch.ring::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background-image: linear-gradient(90deg, #ff5c8a, #ff9b3d, #ff5c8a, #ff9b3d, #ff5c8a);
  background-size: 200% 100%;
  animation: yd-drift 7s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.yd-notch.open {
  width: 21em;
  height: 5.4em;
  border-radius: 0 0 1.25em 1.25em;
}
.yd-notch.offer {
  width: 23em;
  height: 8.1em;
  border-radius: 0 0 1.25em 1.25em;
}
.yd-notch-offer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 200ms ease;
}
.yd-notch.offer .yd-notch-offer {
  opacity: 1;
  transition-delay: 160ms;
}
.yd-notch-offer .n-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0 1.1em;
  height: 3.1em;
}
.yd-notch-offer .n-spark {
  color: #52aeff;
  font-size: 1.05em;
  line-height: 1;
  flex: none;
}
.yd-notch-offer .n-hint {
  height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8em;
}
.yd-notch-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.1em;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0 1.1em;
  opacity: 0;
  transition: opacity 200ms ease;
}
.yd-notch.open .yd-notch-row {
  opacity: 1;
  transition-delay: 160ms;
}
.yd-notch-row .n-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #52aeff;
  flex: none;
  animation: yd-breathe 2.2s ease-in-out infinite;
}
.yd-notch .n-text {
  min-width: 0;
}
.yd-notch .n-step {
  display: block;
  color: #f2f1f7;
  font-size: 0.92em;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yd-notch .n-sub {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8em;
}
.yd-window {
  position: absolute;
  left: 6%;
  top: 12%;
  width: 55%;
  height: 80%;
  background: #1d1d23;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1em;
  box-shadow: 0 2em 5em rgba(0, 0, 0, 0.55);
  padding: 0 1.4em;
}
.yd-titlebar {
  display: flex;
  align-items: center;
  gap: 0.55em;
  height: 3.1em;
  color: #8e8b9e;
  font-size: 0.95em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin: 0 -1.4em;
  padding: 0 1.4em;
}
.yd-titlebar i {
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
}
.yd-titlebar .t {
  flex: 1;
  text-align: center;
  font-weight: 600;
}
.yd-send svg {
  width: 1.5em;
  display: block;
}
.yd-field {
  display: flex;
  gap: 0.6em;
  align-items: center;
  height: 2.7em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.95em;
}
.yd-field label {
  color: #8e8b9e;
  min-width: 4.6em;
}
.yd-field span {
  color: #f2f1f7;
  white-space: nowrap;
  overflow: hidden;
}
.yd-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.9em;
  padding: 0.4em 0.8em;
  border-radius: 0.6em;
  background: #26262e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfcde0;
  font-size: 0.9em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.yd-attach.on {
  opacity: 1;
  transform: none;
}
.yd-attach svg {
  width: 1em;
  display: block;
}
.yd-bodyline {
  margin-top: 1.1em;
  color: #e6e4ee;
  font-size: 0.95em;
  min-height: 1.5em;
}
.yd-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  background: #52aeff;
  vertical-align: text-bottom;
  opacity: 0;
}
.yd-caret.on {
  animation: yd-caret 1.1s steps(1) infinite;
}
@keyframes yd-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
/* Web mode (act 2): the same window as a Safari page. */
.yd-url,
.yd-pagehead,
.yd-book {
  display: none;
}
.yd-window.web {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1c1c21;
}
.yd-window.web .yd-titlebar {
  background: #ececf1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1em 1em 0 0;
  color: #6b6b75;
}
.yd-window.web .yd-titlebar .t,
.yd-window.web .yd-send {
  display: none;
}
.yd-window.web .yd-url {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 auto;
  height: 1.9em;
  padding: 0 1.2em;
  min-width: 46%;
  justify-content: center;
  border-radius: 0.55em;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #3a3a44;
  font-size: 0.9em;
}
.yd-window.web .yd-url svg {
  width: 0.85em;
  height: 1em;
}
.yd-window.web .yd-pagehead {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin: 1.1em 0 0.6em;
}
.yd-window.web .yd-pagehead b {
  font-size: 1.25em;
  color: #17171c;
  letter-spacing: -0.01em;
}
.yd-window.web .yd-pagehead span {
  color: #6b6b75;
  font-size: 0.92em;
}
.yd-window.web .yd-field {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3em;
  padding: 0.55em 0 0;
  border-bottom: none;
}
.yd-window.web .yd-field label {
  min-width: 0;
  font-size: 0.82em;
  color: #55555f;
}
.yd-window.web .yd-field span {
  height: 2.2em;
  line-height: 2.2em;
  padding: 0 0.8em;
  border-radius: 0.5em;
  background: #fafafc;
  border: 1px solid rgba(0, 0, 0, 0.16);
  color: #17171c;
}
.yd-window.web .yd-attach {
  display: none;
}
.yd-window.web .yd-bodyline {
  margin-top: 0.85em;
  min-height: 3.6em;
  padding: 0.5em 0.8em;
  border-radius: 0.5em;
  background: #fafafc;
  border: 1px solid rgba(0, 0, 0, 0.16);
  color: #17171c;
}
.yd-window.web .yd-caret {
  background: #17171c;
}
.yd-window.web .yd-book {
  display: inline-block;
  margin-top: 0.9em;
  padding: 0.55em 1.3em;
  border-radius: 0.55em;
  background: #17171c;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.92em;
}
.yd-card {
  position: absolute;
  right: 4%;
  top: 9%;
  width: 30%;
  z-index: 4;
  background: rgba(23, 23, 29, 0.97);
  border: 1px solid rgba(82, 174, 255, 0.45);
  border-radius: 1.2em;
  padding: 1em 1.2em 1.1em;
  box-shadow: 0 1em 2.4em rgba(0, 0, 0, 0.5);
  transition: opacity 300ms ease;
}
.yd-card.away {
  opacity: 0;
}
.yd-card-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: #9b98ab;
  font-weight: 600;
  font-size: 0.9em;
}
.yd-dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #52aeff;
  flex: none;
}
.yd-dot.listen {
  animation: yd-blink 0.9s ease-in-out infinite alternate;
}
.yd-dot.amber {
  background: #ffb340;
  animation: yd-breathe 2.2s ease-in-out infinite;
}
@keyframes yd-blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}
@keyframes yd-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.yd-btn {
  margin-left: auto;
  font: inherit;
  font-size: 0.82em;
  color: #f2f1f7;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 0.5em;
  padding: 0.25em 0.9em;
  visibility: hidden;
  pointer-events: none;
}
.yd-btn.on {
  visibility: visible;
}
.yd-prompt {
  color: #9b98ab;
  font-size: 0.9em;
  margin-top: 0.7em;
  min-height: 1.3em;
}
.yd-status {
  color: #f2f1f7;
  font-size: 0.98em;
  margin-top: 0.45em;
  min-height: 2.7em;
}
.yd-dock {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 0.8em;
  padding: 0.55em 0.7em;
  border-radius: 1.1em;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  backdrop-filter: blur(14px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.yd-dock i {
  width: 2.1em;
  height: 2.1em;
  border-radius: 0.62em;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0.18em 0.45em rgba(0, 0, 0, 0.35);
}
.yd-dock i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.05) 46%, rgba(0, 0, 0, 0.1));
}
.yd-cursor {
  position: absolute;
  left: 52%;
  top: 58%;
  width: 1.3em;
  z-index: 5;
  transition:
    left 1s cubic-bezier(0.45, 0.05, 0.35, 1),
    top 1s cubic-bezier(0.45, 0.05, 0.35, 1);
  pointer-events: none;
}
.yd-cursor svg {
  display: block;
  width: 100%;
}
.yd-ripple {
  position: absolute;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: 5;
  border: 2px solid #52aeff;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  margin: -1em 0 0 -1em;
}
.yd-ripple.go {
  animation: yd-ripple 0.55s ease-out;
}
@keyframes yd-ripple {
  0% {
    opacity: 0.55;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* ---------- the entrance ----------
   Opt-in (html.js) so a crawler or a screenshot never meets an empty stage.
   Copy rises first, the Mac rises and its lid swings open, the six screens
   come forward out of the depth one after another, then the demo starts
   (hero.js, once the lid is open). */
html.js .hero-copy > * {
  opacity: 0;
  animation: hero-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
html.js .hero-copy > :nth-child(1) { animation-delay: 0.05s; }
html.js .hero-copy > :nth-child(2) { animation-delay: 0.13s; }
html.js .hero-copy > :nth-child(3) { animation-delay: 0.24s; }
html.js .hero-copy > :nth-child(4) { animation-delay: 0.34s; }
html.js .hero-copy > :nth-child(5) { animation-delay: 0.42s; }
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The whole Mac rises in with the lid part-way open, tilted toward the
   viewer, and the lid swings back to its resting angle as it lands. It
   never starts closed: flat-on with the eye at hinge height a shut lid
   reads as a sliver with no depth (PJ 2026-09-02), so the swing begins
   from the angle where the screen is already a screen. The lid's top lip
   shows while it leans toward the viewer and goes as it stands up. */
html.js .hv-mac {
  opacity: 0;
  animation: hero-mac-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s forwards;
}
@keyframes hero-mac-in {
  from {
    opacity: 0;
    transform: translateY(72px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.js .hv-mac-lid {
  animation: hero-lid-open 1.2s cubic-bezier(0.3, 0.7, 0.2, 1) 0.55s both;
}
@keyframes hero-lid-open {
  from {
    transform: rotateX(-38deg);
  }
  to {
    transform: rotateX(8deg);
  }
}
html.js .hv-mac-rim {
  animation: hero-rim 1.2s cubic-bezier(0.3, 0.7, 0.2, 1) 0.55s both;
}
@keyframes hero-rim {
  from {
    top: calc(-0.4 * var(--t));
  }
  to {
    top: 0;
  }
}
html.js .hv-pane {
  opacity: 0;
  animation: hero-pane-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) calc(1.1s + var(--start, 0) * 0.9s) forwards;
}
@keyframes hero-pane-in {
  from {
    opacity: 0;
    transform: translate3d(0, 36px, -260px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero {
    --spread: 0.82;
  }
}
@media (max-width: 880px) {
  .hero {
    --spread: 0.62;
    --copy-w: 520px;
    padding-top: 88px;
  }
  .hero-h1,
  .hero-h2 {
    font-size: clamp(20px, 4.6vw, 24px);
  }
  .hero-cta {
    padding: 12px 24px;
    font-size: 15px;
  }
  .hero-sub {
    font-size: 15px;
    max-width: 36ch;
  }
  .hero-fine {
    font-size: 12px;
  }
  .nav-pill {
    padding: 8px 8px 8px 16px;
  }
}
@media (max-width: 700px) {
  .hero {
    /* A phone (PJ 2026-09-02): four screens instead of six, Mail and
       Calendar flanking the Mac just behind it, Terminal and Numbers in a
       row above at the edges; the outer two are dropped. The Mac takes
       whatever height the copy leaves (up to 70vw wide) so the cluster
       fills the bottom of the screen rather than leaving air under the
       copy. No squeeze: these places are chosen for the width. hero.js
       sets the exact --macw. */
    --macw: clamp(200px, min(70vw, (100svh - 520px) / 1.46), 400px);
    --spread: 1;
    --mac-bottom: 18px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .p-mail  { --ax: 0.6;  --y: -0.4;  --ry: 24;  --w: 0.52; --s: 1; }
  .p-cal   { --ax: 0.6;  --y: -0.4;  --ry: -24; --w: 0.52; --s: 1; }
  .p-term  { --ax: 0.5;  --y: -0.92; --ry: 14;  --rx: -10; --w: 0.42; --s: 1; }
  .p-sheet { --ax: 0.5;  --y: -0.92; --ry: -14; --rx: -10; --w: 0.42; --s: 1; }
  .p-web,
  .p-files {
    display: none;
  }
  /* The ring rises 0.71 Mac widths above the lid, into the copy's grid row.
     Reserve that (plus a breath) under the copy, so centring the copy in
     its row centres it in the space that is actually free. */
  .hero-copy {
    padding-bottom: calc(var(--macw) * 0.71 + 24px);
  }
}
/* A short phone has no room above the Mac for the second row. */
@media (max-width: 700px) and (max-height: 700px) {
  .hero {
    --macw: clamp(200px, min(70vw, (100svh - 480px) / 0.96), 400px);
  }
  .p-term,
  .p-sheet {
    display: none;
  }
  .hero-copy {
    padding-bottom: calc(var(--macw) * 0.24 + 24px);
  }
}

/* Reduced motion, or no script: one calm frame. Everything at rest, the
   pane loops off, the demo on its handoff frame (hero.js). */
@media (prefers-reduced-motion: reduce) {
  html.js .hero-copy > *,
  html.js .hv-mac,
  html.js .hv-pane {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  html.js .hv-mac-lid,
  html.js .hv-mac-rim {
    animation: none !important;
  }
  /* The lid and its faces keep their resting transforms (the shell is
     turned away by rotateY); only the swing and the fades are dropped. */
  .hv-panes-live .ap-reveal {
    animation: none;
    opacity: 1;
  }
  .hv-panes-live .ap-status i,
  .hv-panes-live .ap-term-bar i,
  .yd-glow.on,
  .yd-glow i,
  .yd-notch.ring::before,
  .yd-notch-row .n-dot,
  .yd-dot.listen,
  .yd-dot.amber,
  .yd-caret.on,
  .yd-ripple.go {
    animation: none !important;
  }
  .yd-notch,
  .yd-cursor {
    transition: none;
  }
}