/*
  Horizontal pan-on-vertical-scroll.
  Pattern reverse-engineered from getkeeby.com (Vite bundle, JA component).

  Outer .hpan: tall (height set in JS to vh + maxTranslate) so vertical scroll has room.
  .hpan__sticky: sticky-pinned to viewport top while .hpan is in view.
  .hpan__track: flex row containing the panels; JS translates it on X by scroll progress.
*/

:root {
  /* Warm white-gray with the faintest gold undertone — sits between
     neutral grey and pale honey. Reads as off-white at a glance. */
  --hpan-bg: #F7F6F2;
  --hpan-fg: #111;
  --hpan-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Nav stays mandatory at the top of the viewport — the panel section
     starts BELOW it (not behind it). Mobile nav is shorter. */
  --hpan-nav-h: 72px;
}

@media (max-width: 600px) {
  :root { --hpan-nav-h: 56px; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hpan-bg);
  color: var(--hpan-fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Geist', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Kill the rubber-band bounce at the top/bottom of the page — the
     horizontal-pan section is the "edge of the world", so vertical
     overscroll past the first/last panel shouldn't reveal a void. */
  overscroll-behavior-y: none;
  /* Prevent any 100vw element (which includes the scrollbar width on
     non-overlay-scrollbar browsers) from creating a document-level
     horizontal scrollbar — the cause of the perceived asymmetric
     side padding on mobile. */
  overflow-x: clip;
}

.hpan {
  position: relative;
  width: 100%;
  /* Push the section below the fixed nav so the header stays mandatory
     and visible — content no longer overlaps the nav at scroll = 0. */
  margin-top: var(--hpan-nav-h);
}

.hpan__sticky {
  position: sticky;
  top: var(--hpan-nav-h);
  height: calc(100dvh - var(--hpan-nav-h));
  width: 100%;
  overflow: hidden;
}

.hpan__track {
  position: relative;
  display: flex;
  height: 100%;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.hpan__panel {
  flex: 0 0 100vw;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 1rem 4rem;
  position: relative;
}

.hpan__panel-inner {
  width: min(54vw, 680px);
  aspect-ratio: 4 / 3;
  max-height: 62vh;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-family: var(--hpan-mono);
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.55);
  user-select: none;
}

/* ── Panel 1 — MacBook frame, cropped off the left edge ───────
   Just the screen + notch, like Keeby. Black bezel + inner screen
   with rounded top corners; no bottom lid (only the upper portion
   is shown, like a laptop you're looking at from below).
   ─────────────────────────────────────────────────────────── */

.hpan__panel--macbook {
  /* Generous bottom padding pushes the macbook + hint group visually
     upward in the panel, leaving breathing room beneath. Top stays at 0
     so the macbook still tracks the panel's vertical center band. */
  padding: 0 0 clamp(80px, 14vh, 180px);
  align-items: center;
}

.hpan__panel--macbook .hpan__panel-inner {
  background: transparent;
  width: 100vw;
  max-width: none;
  aspect-ratio: auto;
  max-height: none;
  padding: 0 max(4vw, 32px);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 60px);
  /* Bezel + radius — Keeby's exact responsive ramp */
  --macbook-radius: clamp(14px, 1.4vw, 22px);
  --macbook-bezel: clamp(7px, 0.85vw, 12px);
}

/* MacBook column — fully shown (no crop), positioned alongside the pitch.
   position: relative makes it the containing block for the notch. */
.hpan__macbook {
  flex: 0 1 auto;
  width: clamp(480px, 54vw, 800px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Real MacBook display ratio — 16:10 (1.6:1), Apple's standard since 2021 */
.hpan__macbook-device {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.hpan__macbook-device {
  position: relative;
  background: #0a0a0a;
  padding: var(--macbook-bezel);
  padding-bottom: 0;
  border-top-left-radius: var(--macbook-radius);
  border-top-right-radius: var(--macbook-radius);
  box-shadow:
    0 32px 64px -24px rgba(0, 0, 0, 0.32),
    0 12px 28px -8px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Keyboard base — silver hinge slightly wider than the screen,
   with a subtle trackpad rectangle indent. */
.hpan__macbook-base {
  position: relative;
  width: 110%;
  height: clamp(14px, 1.4vw, 22px);
  background:
    linear-gradient(to bottom,
      #b8b8bc 0%,
      #d4d4d8 6%,
      #e6e6ea 14%,
      #c8c8cc 50%,
      #9a9a9e 86%,
      #6a6a6e 100%);
  border-bottom-left-radius: clamp(10px, 1vw, 16px);
  border-bottom-right-radius: clamp(10px, 1vw, 16px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset,
    0 18px 24px -10px rgba(0, 0, 0, 0.18);
}

/* The trackpad cutout — small dark notch in the center top edge of the hinge */
.hpan__macbook-trackpad {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 18%;
  background: rgba(0, 0, 0, 0.18);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Notch — black pill protruding down from the top edge of the screen.
   Sits ABOVE the menubar (z-index higher). Width tracks the same variable
   the menubar's center spacer reserves, so they stay aligned. */
.hpan__macbook {
  --notch-width: clamp(70px, 11%, 130px);
  --notch-height: clamp(12px, 1.7vw, 20px);
}

.hpan__macbook-notch {
  position: absolute;
  top: calc(var(--macbook-bezel) - 1px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: var(--notch-width);
  height: var(--notch-height);
  background: #0a0a0a;
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}

/* Screen content — wallpaper background, with menubar + dock layered on top.
   container-type lets us size menubar/dock proportionally to the screen width,
   not the viewport — so the chrome stays in scale at any panel size. */
.hpan__macbook-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: calc(var(--macbook-radius) - var(--macbook-bezel));
  border-top-right-radius: calc(var(--macbook-radius) - var(--macbook-bezel));
  overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(190, 215, 245, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(90, 135, 215, 0.45) 0%, transparent 55%),
    linear-gradient(135deg, #dde8f8 0%, #8cb0e3 50%, #4a78c4 100%);
}

/* ── macOS menubar — grid with a reserved center column for the notch,
   so left/right clusters can never collide with each other or the notch. */
.hpan__mac-menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: clamp(22px, 4.4cqw, 34px);
  padding: 0 clamp(8px, 1.4cqw, 16px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--notch-width) auto;
  align-items: center;
  gap: clamp(6px, 1cqw, 12px);
  background: rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  color: rgba(255, 255, 255, 0.95);
  font-family: -apple-system, BlinkMacSystemFont, 'Geist', system-ui, sans-serif;
  font-size: clamp(10px, 1.5cqw, 13px);
  font-weight: 500;
  letter-spacing: -0.005em;
  user-select: none;
}

.hpan__mac-menu-left {
  grid-column: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5cqw, 16px);
  white-space: nowrap;
  overflow: hidden;
}

.hpan__mac-menu-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.1cqw, 12px);
  white-space: nowrap;
}

.hpan__mac-apple {
  width: clamp(11px, 1.5cqw, 16px);
  height: clamp(13px, 1.7cqw, 18px);
  flex-shrink: 0;
  opacity: 1;
}

.hpan__mac-app {
  font-weight: 700;
}

/* Less-essential menu items hide when the macbook is narrow so the
   left cluster never crowds the notch. */
.hpan__mac-menu-item--secondary { display: none; }

@container (min-width: 560px) {
  .hpan__mac-menu-item--secondary { display: inline; }
}

.hpan__mac-icon {
  width: clamp(13px, 1.8cqw, 18px);
  height: clamp(13px, 1.8cqw, 18px);
  flex-shrink: 0;
  opacity: 0.95;
}

.hpan__mac-icon--battery {
  width: clamp(20px, 2.6cqw, 28px);
  height: clamp(9px, 1.2cqw, 13px);
}

.hpan__mac-time {
  font-variant-numeric: tabular-nums;
}

/* ── Dock — left-anchored vertical pill. macOS supports this orientation
   ("Position on screen: Left"), and it gives the desktop more vertical
   room — important here so the Zendesk reply window has space above the
   HelperBee floating panel. ── */
.hpan__mac-dock {
  position: absolute;
  left: clamp(8px, 1.4cqw, 14px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 1cqw, 10px);
  padding: clamp(5px, 0.9cqw, 9px);
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: clamp(14px, 2.2cqw, 22px);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.hpan__mac-dock img {
  width: clamp(28px, 5cqw, 44px);
  height: clamp(28px, 5cqw, 44px);
  border-radius: clamp(7px, 1.1cqw, 11px);
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Safari icon ships without the standard macOS squircle padding (visible content
   fills 98% of the bitmap vs ~84% for Finder/NoteBee). Scale it down so all
   three icons read at the same size in the dock. */
.hpan__mac-dock-img--tight {
  transform: scale(0.87);
}

/* NoteBee icon — bumped corner radius to match the macOS Big Sur+ squircle
   (≈22.37% of icon size). The PNG is exported as a near-full-bleed bee on a
   yellow background, so without a stronger radius it reads as a square tile. */
.hpan__mac-dock-img--squircle {
  border-radius: clamp(8px, 1.5cqw, 16px) !important;
}

/* Divider between active apps and pinned apps — Sonoma style.
   In a vertical/left-anchored dock the divider rotates 90° (horizontal bar). */
.hpan__mac-dock-divider {
  display: block;
  flex-shrink: 0;
  width: clamp(22px, 4cqw, 38px);
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 1px;
  margin: clamp(3px, 0.5cqw, 6px) 0;
}

/* ── Keyboard shortcut hint — absolutely positioned below the MacBook so
   it floats as an overlay without affecting the panel composition.
   Chunky neo-brutalist keycaps: white face, 3px ink border, hard 6px
   offset shadow. Press → translate down + honey-yellow fill. */
:root {
  --hpan-ink: #1A1A1A;
  --hpan-honey: #FFC201;
  --hpan-cream: #FFFCEB;
}

.hpan__macbook-hint {
  position: absolute;
  top: calc(100% + clamp(28px, 3vw, 44px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.2vw, 32px);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  user-select: none;
}

.hpan__macbook-hint-keys {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 14px);
}

/* Status chip — same visual family as the ⌥/Space keycaps (mono type,
   black ink border, hard offset shadow) but THINNER border + SMALLER
   shadow + pill shape, so it reads as a status chip rather than a
   pressable button. Idle = white face, success = honey face. */
.hpan__macbook-hint-message {
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 1.2vw, 16px) clamp(26px, 2.6vw, 38px);
  background: #ffffff;
  color: var(--hpan-ink);
  font-family: var(--hpan-mono);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border: 1.5px solid var(--hpan-ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--hpan-ink);
  user-select: none;
  /* Always single-line — the chip is a status pill, not a paragraph. */
  white-space: nowrap;
}

/* Idle "click on the tool" — subtle attention pulse via background
   wash, no transform so it doesn't read as pressable. */
.hpan__macbook-hint-message:not(.is-success) {
  animation: hpanMessageBreathe 1.8s ease-in-out infinite;
}

@keyframes hpanMessageBreathe {
  0%, 100% { background: #ffffff; }
  50%      { background: #FFFCEB; }
}

/* Success state — same chip shape, just swapped to honey-yellow with
   a scale-pop entry. Border + shadow stay the same so the visual
   identity stays continuous. */
.hpan__macbook-hint-message.is-success {
  background: var(--hpan-honey);
  color: var(--hpan-ink);
  animation: hpanMessageSuccessPop 700ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

@keyframes hpanMessageSuccessPop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Swap: keys hide, chip shows, "click the keys" caption hides too —
   the chip is the only message in this state. */
.hpan__macbook-hint.is-message .hpan__macbook-hint-keys    { display: none; }
.hpan__macbook-hint.is-message .hpan__macbook-hint-tag     { display: none; }
.hpan__macbook-hint.is-message .hpan__macbook-hint-message { display: inline-flex; }

.hpan__macbook-hint-plus {
  font-family: var(--hpan-mono);
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 700;
  color: var(--hpan-ink);
  opacity: 0.45;
}

/* Chunky keycap — exact reference style:
   white face, 3px ink border, 14px radius, 6px hard offset shadow, no blur.
   position: relative anchors the ripple-ring pseudo-element on click. */
.hpan__key {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(58px, 5.8vw, 76px);
  padding: clamp(14px, 1.4vw, 20px) clamp(20px, 2.1vw, 28px);
  background: #ffffff;
  color: var(--hpan-ink);
  font-family: var(--hpan-mono);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border: 3px solid var(--hpan-ink);
  border-radius: clamp(10px, 1vw, 14px);
  box-shadow: 0 6px 0 var(--hpan-ink);
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}

/* Ripple ring — pseudo-element that radiates outward when key is pressed.
   Sits on top of the keycap (z-index 1), expands, and fades. Inherits the
   key's border-radius so the ring traces the keycap silhouette exactly. */
.hpan__key::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 3px solid var(--hpan-honey);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.hpan__key:hover {
  background: var(--hpan-cream);
}

.hpan__key:focus-visible {
  outline: 3px solid var(--hpan-honey);
  outline-offset: 3px;
}

/* Pressed — physical down-stroke. Driven by :active for real input
   AND .is-pressed for JS-triggered + auto-demo presses. */
.hpan__key:active,
.hpan__key.is-pressed {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--hpan-ink);
  background: var(--hpan-honey);
}

/* JS-triggered press adds a quick wobble on top of the base translateY.
   The auto-demo press stays pure (no wobble) so it reads as ambient,
   while real interaction feels tactile. */
.hpan__key.is-pressed {
  animation: hpanKeyWobble 220ms ease-out;
}

/* Ripple ring is its own class so the press-down can release at 220ms
   while the ring keeps expanding/fading for the full 600ms. */
.hpan__key.is-rippling::after {
  animation: hpanKeyRipple 600ms ease-out forwards;
}

/* Held state — fired when the user is actually holding Option down on
   their keyboard. Pins the keycap into the pressed visual until release,
   and stops the auto-demo so it doesn't fight the real input. */
.hpan__key.is-held {
  animation: none;
  transform: translateY(4px);
  background: var(--hpan-honey);
  box-shadow: 0 2px 0 var(--hpan-ink);
}

/* If the user fires the full ⌥+Space combo while still holding Option,
   re-assert the wobble animation on top of the held state. */
.hpan__key.is-held.is-pressed {
  animation: hpanKeyWobble 220ms ease-out;
}

@keyframes hpanKeyWobble {
  0%   { transform: translate(0, 4px); }
  20%  { transform: translate(-2px, 4px); }
  40%  { transform: translate(2px, 4px); }
  60%  { transform: translate(-1.5px, 4px); }
  80%  { transform: translate(1px, 4px); }
  100% { transform: translate(0, 4px); }
}

@keyframes hpanKeyRipple {
  0% {
    transform: scale(1);
    opacity: 0.85;
    border-width: 3px;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
    border-width: 1px;
  }
}

.hpan__key--wide {
  padding-left: clamp(28px, 2.8vw, 40px);
  padding-right: clamp(28px, 2.8vw, 40px);
}

/* Periodic auto-press demo — option presses, then space, then rest.
   Pauses on hover so users can interact normally. */
.hpan__key--opt {
  animation: hpanKeyDemoOpt 5s ease-in-out infinite;
}

.hpan__key--space {
  animation: hpanKeyDemoSpace 5s ease-in-out infinite;
}

.hpan__macbook-hint-keys:hover .hpan__key {
  animation-play-state: paused;
}

@keyframes hpanKeyDemoOpt {
  0%, 8%, 22%, 100% {
    transform: translateY(0);
    background: #ffffff;
    box-shadow: 0 6px 0 var(--hpan-ink);
  }
  12%, 18% {
    transform: translateY(4px);
    background: var(--hpan-honey);
    box-shadow: 0 2px 0 var(--hpan-ink);
  }
}

@keyframes hpanKeyDemoSpace {
  0%, 22%, 38%, 100% {
    transform: translateY(0);
    background: #ffffff;
    box-shadow: 0 6px 0 var(--hpan-ink);
  }
  26%, 34% {
    transform: translateY(4px);
    background: var(--hpan-honey);
    box-shadow: 0 2px 0 var(--hpan-ink);
  }
}

/* Hint tag — single subtle line below the keys. Sized to match the
   "macOS 15+" meta line in the pitch column. */
.hpan__macbook-hint-tag {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(0, 0, 0, 0.5);
}

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

/* ── Pitch column — sits to the right of the MacBook, centered vertically
   and horizontally: big bee mark, headline, sub, CTA, meta. ─────────── */
.hpan__macbook-pitch {
  flex: 0 1 auto;
  min-width: 0;
  /* Widened so "for Customer Support" stays on one line at the smaller
     headline size; was 340px which forced an ugly wrap. */
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.hpan__macbook-mark {
  width: clamp(72px, 8vw, 112px);
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
  user-select: none;
  pointer-events: none;
}

.hpan__macbook-headline {
  margin: 0;
  /* Smaller than before so the "for Customer Support" line fits on one
     row inside the pitch column. */
  font-size: clamp(1.375rem, 2.1vw, 2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--text-primary, #111);
  white-space: nowrap;
}

.hpan__macbook-headline-soft {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}

.hpan__macbook-sub {
  margin: 0;
  max-width: 460px;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.62);
}

.hpan__macbook-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 14px 28px;
  border-radius: 12px;
  background-color: var(--btn-primary, #111);
  color: var(--btn-primary-text, #fff);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 120ms ease-out, transform 120ms ease-out;
}

.hpan__macbook-cta:hover {
  background-color: var(--btn-primary-hover, #000);
  transform: translateY(-1px);
}

.hpan__macbook-meta {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 900px) {
  .hpan__panel--macbook .hpan__panel-inner {
    flex-direction: column;
    align-items: center;
    padding: 0 6vw;
    gap: 28px;
  }
  .hpan__macbook {
    width: min(88vw, 520px);
  }
  .hpan__macbook-pitch {
    max-width: 100%;
  }
}

/* ── Panel 4 — closing panel ───────────────────────────────────
   Two-column layout: hero LEFT (flex-1, items-start), aside RIGHT
   (content-sized, items-end, vertical stack). 80px gap between them.
   ─────────────────────────────────────────────────────────── */

.hpan__panel--close .hpan__panel-inner {
  background: transparent;
  width: min(900px, 92vw);
  aspect-ratio: auto;
  height: 100%;
  max-height: none;
  /* Top trimmed so the Pricing → About transition doesn't show a tall
     empty band; bottom keeps generous breathing room above the footer. */
  padding: clamp(32px, 5vh, 64px) 8px clamp(96px, 16vh, 180px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(28px, 4vh, 56px);
  text-align: left;
  font-size: inherit;
  color: var(--text-primary);
}

.hpan__close-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  min-width: 0;
}

/* Brand mark — same flavour as the macbook panel pitch column. */
.hpan__close-mark {
  width: clamp(64px, 7vw, 96px);
  height: auto;
  margin-bottom: 4px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
  user-select: none;
  pointer-events: none;
}

.hpan__close-headline {
  margin: 0;
  max-width: 620px;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: #0a0a0a;
}

/* Soft second line echoes the macbook headline pattern */
.hpan__close-headline-soft {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}

.hpan__close-sub {
  margin: 0;
  max-width: 460px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.62);
}

.hpan__close-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* CTA — same charcoal pill as the macbook panel for a consistent tap target */
.hpan__close-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 14px 28px;
  border-radius: 12px;
  background-color: var(--btn-primary, #111);
  color: var(--btn-primary-text, #fff);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 120ms ease-out, transform 120ms ease-out;
}

.hpan__close-cta:hover {
  background-color: var(--btn-primary-hover, #000);
  transform: translateY(-1px);
}

.hpan__close-meta {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(0, 0, 0, 0.5);
}

/* Footer strip — full-width row pinned to the bottom of the panel.
   Copyright on the left, inline link list on the right, separated by
   raised mid-dots. Reads as a clean closing rule, not a card. */
.hpan__close-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: clamp(16px, 2vh, 24px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Geist', system-ui, sans-serif;
}

.hpan__close-copy {
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.hpan__close-links {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hpan__close-links a {
  color: rgba(0, 0, 0, 0.62);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 140ms ease;
}

.hpan__close-links a:hover {
  color: #0a0a0a;
}

.hpan__close-sep {
  color: rgba(0, 0, 0, 0.28);
  font-size: 14px;
  line-height: 1;
  user-select: none;
}

@media (max-width: 768px) {
  .hpan__panel--close .hpan__panel-inner {
    width: 92vw;
    padding: clamp(24px, 5vh, 48px) 4px clamp(16px, 2vh, 24px);
    gap: 24px;
  }
  .hpan__close-footer {
    justify-content: flex-start;
    gap: 10px 16px;
  }
  .hpan__close-headline { font-size: clamp(2rem, 9vw, 2.75rem); }
}


/* Floating bees layer — lives INSIDE the track so it pans together with the panels.
   Spans the whole track (panels × 100vw) and the sticky's full height. */
.bees {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  perspective: 900px;
}

.floating-bee {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  pointer-events: none;
  transform-style: preserve-3d;
}

.floating-bee__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: translateZ(0);
}

.floating-bee__depth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0);
}

@media (prefers-reduced-motion: reduce) {
  .hpan__track { transition: none !important; }
  .bees { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   Tada / Hooray confetti layer — particles burst from the center of the
   MacBook column when the user activates a tool inside HelperBee.
   Anchored at the macbook center; particles fly outward in all directions
   so they're visible only AROUND the device silhouette (the device's
   black body covers them in the middle). z-index 0 with the device
   sitting at z-index 1 keeps the burst behind the laptop.
   ────────────────────────────────────────────────────────────────────── */

.hpan__tada {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Lift the device above the tada layer so particles burst from behind. */
.hpan__macbook-device { position: relative; z-index: 1; }
.hpan__macbook-base   { position: relative; z-index: 1; }

.hpan__tada-particle {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: hpanTadaFly 1.4s cubic-bezier(0.12, 0.7, 0.32, 1) forwards;
}

@keyframes hpanTadaFly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.4);
    opacity: 1;
  }
  18% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx) * 0.18), calc(-50% + var(--dy) * 0.18))
               rotate(calc(var(--rot) * 0.18)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
               rotate(var(--rot)) scale(0.7);
  }
}

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

/* ──────────────────────────────────────────────────────────────────────
   HelperBee panel — embedded inside the MacBook screen on Panel 1.
   Faithful to the macOS app design (NoteBee/Views/HelperBee/*).
   Hidden by default; revealed when .hpan__macbook-screen.is-launched.
   The panel is rendered at native pixel sizes and scaled with a single
   transform so the proportions stay 1:1 with the real app at any
   container size.
   ────────────────────────────────────────────────────────────────────── */

/* Dim overlay — darkens the Zendesk window + dock when HelperBee opens,
   exactly like macOS DimmingWindow puts the rest of the screen behind a
   translucent black layer so the floating panel becomes the focal point. */
.hpan__macbook-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
}
.hpan__macbook-screen.is-launched::before {
  opacity: 1;
}

.hpan__macbook-screen .hb-panel {
  /* Native pixel dimensions: 3 cards × 188 + 2×10pt gap + 2×16pt padding
     = ~620px — matches the macOS app's HelperBee panel. The panel anchors
     near the BOTTOM of the screen to leave the upper portion for the
     Zendesk app window. */
  position: absolute;
  z-index: 25;
  bottom: clamp(20px, 4cqw, 40px);
  left: 50%;
  width: 620px;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 24px 48px -12px rgba(0, 0, 0, 0.5),
    0 8px 20px -8px rgba(0, 0, 0, 0.3),
    0 0 0 0.5px rgba(0, 0, 0, 0.12);
  font-family: -apple-system, BlinkMacSystemFont, 'Geist', system-ui, sans-serif;
  text-align: left;
  color: #1A1A1A;

  /* Hidden state (slides up + fades in) */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px) scale(var(--hb-scale-hidden, 0.6));
  transform-origin: center bottom;
  transition: opacity 220ms ease-out, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Scale tiers — bumped up since the panel is now the focal point with
   a dimmed backdrop. Tuned so tools are big enough to click cleanly.
   Each tier sits 20% above the previous calibration. */
@container (min-width: 420px) { .hpan__macbook-screen .hb-panel { --hb-scale: 0.74; --hb-scale-hidden: 0.70; } }
@container (min-width: 540px) { .hpan__macbook-screen .hb-panel { --hb-scale: 0.86; --hb-scale-hidden: 0.82; } }
@container (min-width: 660px) { .hpan__macbook-screen .hb-panel { --hb-scale: 0.98; --hb-scale-hidden: 0.94; } }
@container (min-width: 780px) { .hpan__macbook-screen .hb-panel { --hb-scale: 1.10; --hb-scale-hidden: 1.05; } }

.hpan__macbook-screen.is-launched .hb-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(var(--hb-scale, 0.7));
}

/* ──────────────────────────────────────────────────────────────────────
   Zendesk-style customer support window — fills the desktop area above
   the HelperBee. Provides selectable text so the user can demonstrate
   highlighting → ⌥+Space → HelperBee on captured content.
   ────────────────────────────────────────────────────────────────────── */

.hpan__app-window {
  position: absolute;
  z-index: 8;
  top: clamp(38px, 6.5cqw, 50px);
  /* Leave horizontal room for the LEFT-anchored dock. */
  left: clamp(72px, 12cqw, 110px);
  right: clamp(14px, 2.4cqw, 26px);
  bottom: clamp(14px, 2.4cqw, 26px);
  background: #FAFAFA;
  border-radius: clamp(7px, 1.1cqw, 11px);
  overflow: hidden;
  box-shadow:
    0 14px 30px -10px rgba(0, 0, 0, 0.28),
    0 4px 10px -2px rgba(0, 0, 0, 0.14),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, 'Geist', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}

.hpan__app-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(22px, 4.2cqw, 32px);
  padding: 0 clamp(8px, 1.4cqw, 14px);
  background: linear-gradient(180deg, #ECECEE 0%, #DEDEE1 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.hpan__app-traffic {
  position: absolute;
  left: clamp(8px, 1.4cqw, 14px);
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.8cqw, 7px);
}

.hpan__app-tl {
  display: block;
  width: clamp(8px, 1.4cqw, 12px);
  height: clamp(8px, 1.4cqw, 12px);
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
}

.hpan__app-tl--red    { background: #FF5F57; }
.hpan__app-tl--yellow { background: #FEBC2E; }
.hpan__app-tl--green  { background: #28C840; }

.hpan__app-title {
  font-size: clamp(10px, 1.55cqw, 12px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(0, 0, 0, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hpan__app-content {
  flex: 1;
  min-height: 0;
  padding: clamp(16px, 2.8cqw, 28px) clamp(18px, 3cqw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2cqw, 22px);
  overflow: hidden;
}

.hpan__app-message {
  display: flex;
  align-items: center;  /* vertically center avatar with bubble */
  gap: clamp(12px, 1.9cqw, 18px);
}

.hpan__app-avatar {
  flex-shrink: 0;
  width: clamp(40px, 6.4cqw, 56px);
  height: clamp(40px, 6.4cqw, 56px);
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD66E 0%, #FF9D2E 100%);
  color: #5C3B00;
  display: grid;
  place-items: center;
  font-size: clamp(16px, 2.6cqw, 22px);
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.hpan__app-bubble {
  margin: 0;
  flex: 1;
  padding: clamp(12px, 2.1cqw, 18px) clamp(14px, 2.4cqw, 20px);
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: clamp(10px, 1.5cqw, 14px);
  /* Use the user's system font (San Francisco on Mac) — best legibility
     at small rendered sizes. Bumped min size + weight so the text reads
     cleanly even when the macbook display is rendered narrow. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 2.4cqw, 21px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #1A1A1A;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* Composer (agent's draft reply) — selectable text drives the demo. */
.hpan__app-composer {
  margin-top: auto;
  padding: clamp(14px, 2.3cqw, 20px) clamp(16px, 2.6cqw, 22px);
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: clamp(10px, 1.5cqw, 14px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2cqw, 12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.hpan__app-composer-label {
  font-size: clamp(11px, 1.7cqw, 13px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
}

.hpan__app-draft {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 2.4cqw, 21px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #1A1A1A;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* Selection wash — sits ONLY behind the text (inline element, follows
   text width line-by-line). Vertical padding stretches the highlight to
   the full inline content-box height so it matches the text's apparent
   height, not just the lower band. */
.hpan__app-draft-text {
  display: inline;
  background-color: rgba(0, 122, 255, 0.22);
  padding: 0.18em 0.22em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 320ms ease-out;
}

/* When a HelperBee tool has been applied, the "selection" was consumed —
   clear the always-on highlight and let the now-fixed text read plainly. */
.hpan__app-draft-text.is-applied {
  background-color: transparent;
}

/* Blinking cursor at the end of the reply — a thin blue caret like
   the native macOS text input cursor. */
.hpan__app-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: #007AFF;
  vertical-align: -0.15em;
  border-radius: 1px;
  animation: hpanReplyCaret 1.06s steps(2) infinite;
}

@keyframes hpanReplyCaret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

::selection {
  background: rgba(0, 122, 255, 0.28);
  color: inherit;
}

/* ── Search bar (50pt height, 12pt horizontal padding) ──────── */
.hpan__macbook-screen .hb-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 12px;
}

.hpan__macbook-screen .hb-bee {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
}

.hpan__macbook-screen .hb-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-width: 0;
}

.hpan__macbook-screen .hb-search-glass {
  width: 16px;
  height: 16px;
  color: #86868B;
  flex-shrink: 0;
}

.hpan__macbook-screen .hb-search-caret {
  width: 2px;
  height: 18px;
  background: #007AFF;
  border-radius: 1px;
  animation: hbCaretBlink 1.06s steps(1) infinite;
}

@keyframes hbCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hpan__macbook-screen .hb-close {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #E5E5EA;
  color: #86868B;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.hpan__macbook-screen .hb-close svg {
  width: 10px;
  height: 10px;
}

/* ── Selected text row (28pt height, 16pt horizontal padding) ── */
.hpan__macbook-screen .hb-selected {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 16px;
  background: rgba(0, 122, 255, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.hpan__macbook-screen .hb-selected-cursor {
  width: 14px;
  height: 14px;
  color: #007AFF;
  flex-shrink: 0;
}

.hpan__macbook-screen .hb-selected-text {
  font-size: 11px;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tools section ──────────────────────────────────────────── */
.hpan__macbook-screen .hb-tools {
  padding: 6px 0 10px;
}

.hpan__macbook-screen .hb-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1A1A1A;
}

.hpan__macbook-screen .hb-section-icon {
  width: 13px;
  height: 13px;
  color: #FFC201;
  flex-shrink: 0;
}

/* 3-column grid, 10pt gap, 16pt horizontal padding — matches the macOS
   app's HelperBee tools layout (Translate / Fix Grammar / Save). */
.hpan__macbook-screen .hb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px 16px 0;
}

/* Tool card — 100pt tall, three across. Each card holds icon + title +
   command badge centered. */
.hpan__macbook-screen .hb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100px;
  background: #FFFFFF;
  border: 1px solid #DDDDE1;
  border-radius: 10px;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  user-select: none;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.hpan__macbook-screen .hb-card:hover {
  background: #F5F8FF;
  border-color: rgba(0, 122, 255, 0.4);
}

.hpan__macbook-screen .hb-card:active {
  transform: scale(0.98);
}

.hpan__macbook-screen .hb-card.is-selected {
  border: 2px solid #007AFF;
  background: rgba(0, 122, 255, 0.05);
  box-shadow: 0 1px 6px rgba(0, 122, 255, 0.125);
}

/* Icon wrap — 36×36, sized for the 3-col card layout. */
.hpan__macbook-screen .hb-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.hpan__macbook-screen .hb-card-icon svg {
  width: 18px;
  height: 18px;
  user-select: none;
  pointer-events: none;
}

/* Translate — #007AFF icon on #007AFF @ 9.4% wrap */
.hpan__macbook-screen .hb-card-icon--translate {
  background: rgba(0, 122, 255, 0.094);
  color: #007AFF;
}

/* Fix Grammar — #10B981 icon on #10B981 @ 10% wrap */
.hpan__macbook-screen .hb-card-icon--fix-grammar {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

/* Save as Text Template — #B8860B icon on #FEF3C7 wrap */
.hpan__macbook-screen .hb-card-icon--save {
  background: #FEF3C7;
  color: #B8860B;
}

/* Card title — 12pt semibold, sized for the 3-col card layout. */
.hpan__macbook-screen .hb-card-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  text-align: center;
  line-height: 1.2;
  padding: 0 6px;
}

/* Command badge — 9pt medium, 2/6 padding, #F0F0F0 bg, #D1D1D6 border, #5C4B1F text */
.hpan__macbook-screen .hb-card-cmd {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', 'Geist Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 500;
  color: #5C4B1F;
  background: #F0F0F0;
  border: 0.5px solid #D1D1D6;
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0;
}

/* ── Footer (32pt height, top divider, 14pt group gap) ──────── */
.hpan__macbook-screen .hb-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 32px;
  padding: 0 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: #6E6E73;
}

.hpan__macbook-screen .hb-foot-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hpan__macbook-screen .hb-foot-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
}

.hpan__macbook-screen .hb-foot-text {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}

.hpan__macbook-screen .hb-foot-text--strong {
  font-weight: 600;
}

/* ── Panel 2 — feature-card grid (Keeby "What's inside" pattern) ───
   8 white cards in a 4×2 grid, with a small eyebrow + headline above.
   Cards: white, hairline border, 24px radius, centered icon + title +
   description. Hover lifts subtly. Mobile collapses to 2 cols, then 1.
   ──────────────────────────────────────────────────────────────── */

.hpan__panel--features {
  padding: 0;
  align-items: center;
}

.hpan__panel--features .hpan__panel-inner {
  background: transparent;
  width: min(1320px, 96vw);
  aspect-ratio: auto;
  height: 100%;
  max-height: none;
  /* Asymmetric padding — top tight, bottom generous so the grid
     visually anchors above the panel midline. */
  padding:
    clamp(48px, 8vh, 90px)
    clamp(8px, 2vw, 24px)
    clamp(96px, 16vh, 180px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  position: relative;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: inherit;
  font-weight: inherit;
  color: #0a0a0a;
  letter-spacing: normal;
}

.hpan__features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Auto rows — cards size to content so they end up wider than tall
     (~320 × 220 on desktop) instead of stretching to fill panel height. */
  grid-auto-rows: auto;
  gap: 14px;
  width: 100%;
}

/* Border + shadow match NBTemplateCardV2 in the macOS app:
   border #DDDDE1 1px, shadow black/0.07 blur 12 y3. Same visual
   weight users already know from the templates manager. */
.hpan__fcard {
  background: #fff;
  border: 1px solid #DDDDE1;
  border-radius: 24px;
  padding: clamp(18px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 220ms ease;
}

.hpan__fcard:hover {
  transform: translateY(-2px);
  border-color: #C9C9D0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

.hpan__fcard-icon {
  height: clamp(56px, 6.5vh, 76px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(10px, 1.4vh, 16px);
}

.hpan__fcard-icon svg {
  height: 100%;
  width: auto;
  max-width: 80%;
  display: block;
}

.hpan__fcard-title {
  margin: 0 0 4px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #171717;
}

.hpan__fcard-desc {
  margin: 0;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.42);
  max-width: 26ch;
}

@media (max-width: 1024px) {
  .hpan__features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .hpan__features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hpan__panel--features .hpan__panel-inner {
    width: 92vw;
    padding:
      clamp(28px, 5vh, 48px)
      8px;
  }
  .hpan__features-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hpan__fcard {
    padding: 18px;
    border-radius: 20px;
  }
  .hpan__fcard-icon {
    height: 56px;
    margin-bottom: 10px;
  }
}

/* ── Feature card icon animations ────────────────────────────────────
   Each card has one subtle, looping micro-animation on its icon.
   Inspired by Keeby's "What's inside" icons (key press, waveform, etc).
   Quiet, hardware-friendly: only opacity + transform. Disabled under
   prefers-reduced-motion at the bottom of the file.
   ──────────────────────────────────────────────────────────────── */

/* 1 — Summon Anywhere: opt + space keys depress in sequence */
@keyframes hpanFcardKeyPress {
  0%, 30%, 100% { transform: translateY(0); }
  10%, 20%      { transform: translateY(2.5px); }
}
.hpan__fcard .fcard-key,
.hpan__fcard .fcard-key-glyph {
  transform-box: fill-box;
  transform-origin: center;
}
.hpan__fcard .fcard-key--opt,
.hpan__fcard .fcard-key-glyph--opt {
  animation: hpanFcardKeyPress 2.6s ease-in-out infinite;
}
.hpan__fcard .fcard-key--space,
.hpan__fcard .fcard-key-glyph--space {
  animation: hpanFcardKeyPress 2.6s ease-in-out 0.18s infinite;
}

/* 2 — Custom Tone Of Voice: amber knob slides along the slider track */
@keyframes hpanFcardToneSlide {
  0%, 100% { transform: translateX(-18px); }
  50%      { transform: translateX(18px); }
}
.hpan__fcard .fcard-tone-knob {
  transform-box: fill-box;
  transform-origin: center;
  animation: hpanFcardToneSlide 3.4s ease-in-out infinite;
}

/* 3 — Rewrite In Place: pencil wobbles like it's writing */
@keyframes hpanFcardPencilWobble {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg)  translateY(-1px); }
}
.hpan__fcard .fcard-pencil-group {
  transform-box: fill-box;
  /* origin near the eraser end (top-right of pencil) so the tip swings */
  transform-origin: 70% 20%;
  animation: hpanFcardPencilWobble 1.4s ease-in-out infinite;
}

/* 4 — Translate Anything: arrow pushes right and pulses opacity strongly,
   so the EN → ES direction reads at a glance */
@keyframes hpanFcardTransArrow {
  0%, 100% { transform: translateX(-3px); opacity: 0.25; }
  50%      { transform: translateX(3px);  opacity: 1; }
}
.hpan__fcard .fcard-trans-arrow {
  transform-box: fill-box;
  transform-origin: center;
  animation: hpanFcardTransArrow 1.6s ease-in-out infinite;
}

/* 5 — Voice Dictation: waveform bars pulse with stagger */
@keyframes hpanFcardWave {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1.15); }
}
.hpan__fcard .fcard-wave-bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: hpanFcardWave 1.1s ease-in-out infinite;
}
.hpan__fcard .fcard-wave-bar:nth-child(1) { animation-delay: 0s; }
.hpan__fcard .fcard-wave-bar:nth-child(2) { animation-delay: 0.12s; }
.hpan__fcard .fcard-wave-bar:nth-child(3) { animation-delay: 0.24s; }
.hpan__fcard .fcard-wave-bar:nth-child(4) { animation-delay: 0.24s; }
.hpan__fcard .fcard-wave-bar:nth-child(5) { animation-delay: 0.12s; }
.hpan__fcard .fcard-wave-bar:nth-child(6) { animation-delay: 0s; }

/* 6 — Templates & Snippets: snippet badge slides in/out */
@keyframes hpanFcardSnippet {
  0%, 100%   { transform: translate(0, 0); opacity: 1; }
  35%, 70%   { transform: translate(-6px, 6px); opacity: 1; }
}
.hpan__fcard .fcard-snippet {
  transform-box: fill-box;
  transform-origin: center;
  animation: hpanFcardSnippet 3.6s ease-in-out infinite;
}

/* 7 — Always In Menu Bar: bee dot pulses (matches macOS menubar feel) */
@keyframes hpanFcardBarDot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.6; }
}
.hpan__fcard .fcard-bar-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: hpanFcardBarDot 2.4s ease-in-out infinite;
}

/* 8 — Privacy First: shield breathes; spark twinkles */
@keyframes hpanFcardShield {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes hpanFcardSpark {
  0%, 70%, 100% { opacity: 0; }
  35%           { opacity: 1; }
}
.hpan__fcard .fcard-shield {
  transform-box: fill-box;
  transform-origin: center;
  animation: hpanFcardShield 3.8s ease-in-out infinite;
}
.hpan__fcard .fcard-shield-spark {
  animation: hpanFcardSpark 3.8s ease-in-out infinite;
}

/* Tool card stack — hidden by default; only shown in mobile media query. */
.nb-tool-stack {
  display: none;
}

@media (max-width: 1023px) {
  .nb-tool-stack {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hpan__fcard .fcard-key,
  .hpan__fcard .fcard-key-glyph,
  .hpan__fcard .fcard-tone-knob,
  .hpan__fcard .fcard-pencil-group,
  .hpan__fcard .fcard-trans-arrow,
  .hpan__fcard .fcard-wave-bar,
  .hpan__fcard .fcard-snippet,
  .hpan__fcard .fcard-bar-dot,
  .hpan__fcard .fcard-shield,
  .hpan__fcard .fcard-shield-spark {
    animation: none !important;
  }
}

/* ── Demo video panel — clean MacBook frame autoplaying a workflow clip,
   modelled on Keeby's hero. Reuses the .hpan__macbook-* primitives but
   overrides the screen aspect to match the source video (1600×920) so the
   recording fills the bezel exactly with no crop or letterbox. ── */
.hpan__panel--demo-video {
  padding: 0 0 clamp(80px, 14vh, 180px);
  align-items: center;
}

.hpan__panel--demo-video .hpan__panel-inner {
  background: transparent;
  width: 100vw;
  max-width: none;
  aspect-ratio: auto;
  max-height: none;
  padding: clamp(48px, 7vh, 80px) max(4vw, 32px) 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4.5vh, 56px);
  /* Same bezel/radius ramp as the hero macbook. */
  --macbook-radius: clamp(14px, 1.4vw, 22px);
  --macbook-bezel: clamp(7px, 0.85vw, 12px);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  color: #0a0a0a;
  user-select: auto;
}

.demo-video__head {
  text-align: center;
  max-width: 720px;
  margin: 0;
}

.demo-video__title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #0a0a0a;
  margin: 0 0 12px;
}

.demo-video__sub {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.58);
  margin: 0;
}

/* Larger, centered macbook for this panel — overrides the side-by-side
   width used by panel 1. */
.hpan__macbook--showcase {
  width: clamp(560px, 68vw, 1040px);
}

/* Override the standard 16:10 ratio so the device matches the actual
   recording — the video fills edge to edge, no crop. */
.hpan__macbook-device--video {
  aspect-ratio: 1600 / 920;
}

/* Replace the wallpaper gradient with solid black so any subpixel
   gap around the video reads as part of the screen. */
.hpan__macbook-screen--video {
  background: #000;
}

.demo-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ──────────────────────────────────────────────────────────────────────
   Mobile (< 1024px) — disable horizontal-pan, lay out as a vertical stack.
   Mirrors getkeeby.com's mobile strategy: same content, different layout.
   The hpan.js engine keeps running but its effects (track transform,
   root height, sticky pin) are neutralized by these !important rules.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

  /* ── Container resets ── */
  .hpan {
    margin-top: var(--hpan-nav-h);
    width: 100%;
    height: auto !important; /* override JS-set height */
    /* Belt-and-braces against any 100vw child leaking horizontally. */
    overflow-x: clip;
  }

  .hpan__sticky {
    position: static;
    top: auto;
    height: auto;
    width: 100%;
    overflow: visible;
  }

  .hpan__track {
    display: block;
    flex-direction: column;
    height: auto;
    width: 100%;
    transform: none !important; /* override JS-set translate */
    will-change: auto;
  }

  /* Each panel becomes a standalone vertical section. */
  .hpan__panel {
    flex: none;
    width: 100%;
    height: auto;
    min-height: auto;
    display: block;
    position: relative;
    padding: clamp(56px, 9vh, 96px) clamp(16px, 5vw, 28px);
  }

  /* Reset the panel-inner default styling (aspect-ratio, max-height,
     placeholder font) so each panel can compose its own mobile layout. */
  .hpan__panel-inner {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    background: transparent;
    border-radius: 0;
    display: block;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    user-select: auto;
  }

  /* Floating bees — heavy on CPU and visually noisy on a small screen. */
  .bees {
    display: none;
  }

  /* ── Panel 1 — MacBook + pitch ────────────────────────────────
     Mobile: pitch column on top (so the value prop is the first thing
     a visitor reads), then the macbook simulation zoomed to use the
     full viewport width. The keycap demo (⌥+Space) sits below. */
  .hpan__panel--macbook {
    padding: clamp(48px, 7vh, 80px) clamp(12px, 4vw, 24px) clamp(40px, 6vh, 72px);
  }

  /* Override the desktop 100vw width which would otherwise cause
     horizontal document overflow on mobile (scrollbar width). */
  .hpan__panel--macbook .hpan__panel-inner {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column-reverse; /* pitch on top, macbook below */
    align-items: center;
    gap: 40px;
  }

  /* On mobile we replace the macbook simulation in the hero panel
     with a tool card stack — the hero macbook is hidden and the stack
     takes its place. Scoped to .hpan__panel--macbook so the demo-video
     panel's macbook frame (which hosts the workflow recording) stays
     visible. */
  .hpan__panel--macbook .hpan__macbook {
    width: 100%;
    max-width: 320px;
  }

  .hpan__panel--macbook .hpan__macbook-device,
  .hpan__panel--macbook .hpan__macbook-base,
  .hpan__panel--macbook .hpan__macbook-hint {
    display: none;
  }

  /* ── Tool card stack — mobile only ─────────────────────────────
     5 cards stacked on top of each other; the front card is
     fully scaled, each card behind is offset down + scaled down +
     dimmed slightly. Auto-cycle (in JS) swipes the front card off
     to the side; the next card animates up to the front. */
  .nb-tool-stack {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 240px;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
  }

  .nb-tool-stack__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #E8E8ED;
    border-radius: 18px;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.08),
      0 2px 6px rgba(0, 0, 0, 0.04);
    transform-origin: center bottom;
    transition:
      transform 420ms cubic-bezier(0.34, 1.2, 0.64, 1),
      opacity 420ms ease,
      box-shadow 420ms ease;
    will-change: transform, opacity;
  }

  .nb-tool-stack__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  .nb-tool-stack__name {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #1A1A1A;
    line-height: 1.2;
  }

  .nb-tool-stack__desc {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.55);
    max-width: 22ch;
  }

  .nb-tool-stack__cmd {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    color: #5C4B1F;
    background: #F0F0F0;
    border: 0.5px solid #D1D1D6;
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 4px;
    letter-spacing: 0;
  }

  /* Swipe-out animations driven by JS adding these classes. */
  .nb-tool-stack__card--swipe-left {
    transform: translateX(-130%) rotate(-10deg) !important;
    opacity: 0 !important;
    transition:
      transform 360ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 320ms ease !important;
  }

  .nb-tool-stack__card--swipe-right {
    transform: translateX(130%) rotate(10deg) !important;
    opacity: 0 !important;
    transition:
      transform 360ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 320ms ease !important;
  }

  .hpan__macbook-pitch {
    max-width: 100%;
    width: 100%;
    text-align: center;
    gap: 20px;
  }

  /* On mobile the headline can wrap — undo the desktop nowrap. */
  .hpan__macbook-headline {
    white-space: normal;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .hpan__macbook-sub {
    font-size: clamp(15px, 3.8vw, 18px);
  }

  .hpan__macbook-cta {
    padding: 14px 30px;
    font-size: 16px;
  }

  /* Keycap hint stays absolute below the macbook column. The closer
     offset reads as part of the device on a phone-sized viewport. */
  .hpan__macbook-hint {
    top: calc(100% + 24px);
    gap: 16px;
  }

  /* ── Macbook screen interior — mobile rebalance ───────────────
     The dock is hidden so the Zendesk window can claim the full
     screen width. Menubar shrinks (height + font) to give the
     conversation more room. Bubble + draft text scale down so both
     the customer message and the agent reply are fully visible at
     phone widths. ─── */
  .hpan__mac-dock {
    display: none;
  }

  .hpan__mac-menubar {
    height: clamp(16px, 3.6cqw, 24px);
    font-size: clamp(8px, 1.4cqw, 11px);
    padding: 0 clamp(6px, 1.2cqw, 12px);
    gap: clamp(4px, 0.8cqw, 8px);
  }

  .hpan__mac-apple {
    width: clamp(9px, 1.4cqw, 13px);
    height: clamp(11px, 1.6cqw, 15px);
  }

  .hpan__mac-icon {
    width: clamp(10px, 1.6cqw, 14px);
    height: clamp(10px, 1.6cqw, 14px);
  }

  .hpan__mac-icon--battery {
    width: clamp(16px, 2.4cqw, 22px);
    height: clamp(7px, 1.1cqw, 11px);
  }

  /* App window claims the full screen width — no dock to leave room for. */
  .hpan__app-window {
    left: clamp(8px, 1.6cqw, 16px);
    right: clamp(8px, 1.6cqw, 16px);
    bottom: clamp(8px, 1.6cqw, 16px);
    /* Keep top tight so the menubar sits flush above. */
    top: clamp(28px, 5cqw, 40px);
  }

  .hpan__app-content {
    padding: clamp(12px, 2.4cqw, 22px) clamp(14px, 2.6cqw, 24px);
    gap: clamp(10px, 1.8cqw, 18px);
  }

  /* Smaller customer + reply text — both lines must fit on a
     tiny phone screen. Min reduced from 17px → 12px so the cqw
     scaling actually engages on a 360px container. */
  .hpan__app-bubble,
  .hpan__app-draft {
    font-size: clamp(12px, 2.6cqw, 17px);
    line-height: 1.45;
  }

  .hpan__app-avatar {
    width: clamp(32px, 5.4cqw, 48px);
    height: clamp(32px, 5.4cqw, 48px);
    font-size: clamp(13px, 2.2cqw, 18px);
  }

  /* HelperBee — scale aggressively so the 620px-native panel fits
     inside the small macbook screen. The desktop tier ladder starts
     at 420px container width; below that it would render at 100%
     and overflow. This tier resolves at any narrower container. */
  .hpan__macbook-screen .hb-panel {
    --hb-scale: 0.50;
    --hb-scale-hidden: 0.46;
    bottom: clamp(8px, 1.8cqw, 16px);
  }

  /* The "Reply faster." closing panel is replaced on mobile by the
     dark links footer below — hide the in-flow about panel so users
     don't see two finishing sections back to back. */
  .hpan__panel--close {
    display: none;
  }

  /* ── Panel 2 — Features grid ────────────────────────────────── */
  .hpan__panel--features {
    padding: clamp(56px, 9vh, 96px) clamp(16px, 5vw, 28px);
  }

  .hpan__panel--features .hpan__panel-inner {
    /* Explicit width: 100% overrides the desktop `min(1320px, 96vw)`
       AND the older `@media (max-width: 560px)` width: 92vw — both of
       which were wider than the panel's content area (after the panel's
       own side padding) and were causing the inner to overflow left of
       center, making the left padding look larger than the right. */
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
  }

  .hpan__features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* On phones (≤520px) collapse to a single column. */
  @media (max-width: 520px) {
    .hpan__features-grid { grid-template-columns: 1fr; gap: 10px; }
    .hpan__fcard { padding: 18px; border-radius: 20px; }
    .hpan__fcard-icon { height: 56px; margin-bottom: 10px; }
  }

  /* ── Demo video panel ───────────────────────────────────────── */
  .hpan__panel--demo-video {
    padding: clamp(48px, 7vh, 80px) clamp(12px, 4vw, 24px);
  }

  .hpan__panel--demo-video .hpan__panel-inner {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    gap: clamp(20px, 4vh, 36px);
  }

  .hpan__macbook--showcase {
    width: 100%;
    max-width: 560px;
  }

  /* ── Panel 4 — Close / About ────────────────────────────────── */
  .hpan__panel--close {
    padding: clamp(56px, 9vh, 96px) clamp(16px, 5vw, 28px);
  }

  .hpan__panel--close .hpan__panel-inner {
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .hpan__close-headline {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .hpan__close-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}