html, body { margin: 0; padding: 0; width: 100%; box-sizing: border-box; scrollbar-gutter: auto; }
html { overflow-x: hidden; }
/* Single scroll root: only .video-section scrolls. Prevents duplicate window + video-section scrollbars. */
html:has(.login-page) {
  scrollbar-gutter: auto;
  height: 100%;
  overflow: hidden;
}
body:has(.login-page) {
  width: 100% !important;
  min-width: 100% !important;
  background: #212121;
  scrollbar-gutter: auto;
  height: 100%;
  overflow: hidden;
}

/* Canvas editor dotted background (canvas-editor.js: radial-gradient + 24px — dark canvas) */
.login-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  background-color: #212121;
  overflow: hidden;
  --login-dot-mouse-x: 0px;
  --login-dot-mouse-y: 0px;
  --login-top-nav-offset: 16px;
  --login-top-nav-bar-height: 58px;
  --login-top-nav-blur-scrim-height: 128px;
}

/* Marketing pages (pricing, etc.) — landing canvas with normal document scroll */
html:has(.login-page--scroll) {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
body:has(.login-page--scroll) {
  background: #212121 !important;
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.login-page.login-page--scroll {
  height: auto;
  min-height: 100vh;
  max-height: none;
  display: block;
  overflow: visible;
}
.login-page.login-page--scroll::before {
  position: fixed;
}

/* Floating pill nav — dark glass to match login page */
.login-top-nav {
  position: fixed;
  top: var(--login-top-nav-offset);
  left: 0;
  right: 0;
  z-index: 45;
  width: 100%;
  box-sizing: border-box;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.login-top-nav-inner {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  box-sizing: border-box;
  width: 500px;
  max-width: min(500px, calc(100vw - 24px));
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  flex-wrap: nowrap;
  padding: 10px 12px 10px 14px;
  background: rgba(30, 30, 34, 0.72);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Fixed full-bleed scrim at page root — blurs content scrolling beneath the nav band. */
.login-top-nav-blur-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--login-top-nav-blur-scrim-height);
  z-index: 43;
  pointer-events: none;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  background: linear-gradient(
    to bottom,
    rgba(33, 33, 37, 0.58) 0%,
    rgba(33, 33, 37, 0.42) calc(var(--login-top-nav-offset) + var(--login-top-nav-bar-height)),
    rgba(33, 33, 37, 0.18) 72%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(var(--login-top-nav-offset) + var(--login-top-nav-bar-height)),
    rgba(0, 0, 0, 0.55) 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(var(--login-top-nav-offset) + var(--login-top-nav-bar-height)),
    rgba(0, 0, 0, 0.55) 78%,
    transparent 100%
  );
}
.login-top-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #f3f4f6;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  padding: 4px 4px 4px 2px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.login-top-nav-brand:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.login-top-nav-logo {
  display: block;
  border-radius: 8px;
}
.login-top-nav-wordmark {
  line-height: 1;
}
.login-top-nav-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.login-top-nav-links a {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #d1d5db;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.login-top-nav-links a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.login-top-nav-links a:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

.login-nav-scroll-target {
  scroll-margin-top: 88px;
}

.landing-download-strip {
  text-align: center;
  padding: 28px 20px 8px;
  margin-top: 8px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.landing-download-strip .video-title {
  margin-bottom: 10px;
}
.landing-download-strip .video-subtitle {
  margin: 0 auto;
  max-width: 480px;
  color: #9ca3af;
  line-height: 1.55;
}
.landing-download-strip .video-subtitle a {
  color: #a5b4fc;
  font-weight: 500;
  text-decoration: none;
}
.landing-download-strip .video-subtitle a:hover {
  text-decoration: underline;
  color: #c4b5fd;
}

/* Frosted pill download CTA (hero + Get Pitara strip) */
.login-download-pill {
  position: relative;
  overflow: hidden;
  display: inline-block;
  box-sizing: border-box;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 500;
  color: #d1d5db;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(30, 30, 34, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.login-download-pill::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 55%;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 35%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.04) 65%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: login-download-pill-shine 3.8s ease-in-out infinite;
}
@keyframes login-download-pill-shine {
  0%, 72% { left: -120%; }
  100% { left: 140%; }
}
.login-download-pill:hover {
  background: rgba(38, 38, 42, 0.94);
  color: #fff;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.login-download-pill:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* Desktop download button (see /download routes in app.py) */
.landing-download-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.download-btn-alts {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.download-link {
  color: #a5b4fc;
  text-decoration: none;
  font-weight: 500;
}
.download-link:hover { color: #c4b5fd; text-decoration: underline; }
.download-sep { color: #4b5563; }
.download-note {
  margin-top: 12px;
  font-size: 12px;
  color: #6b7280;
}
.download-note a { color: #a5b4fc; text-decoration: none; }
.download-note a:hover { color: #c4b5fd; text-decoration: underline; }

@media (max-width: 640px) {
  .login-page {
    --login-top-nav-offset: 10px;
    --login-top-nav-bar-height: 72px;
    --login-top-nav-blur-scrim-height: 148px;
  }
  .login-top-nav {
    top: var(--login-top-nav-offset);
  }
  .login-top-nav-inner {
    padding: 8px 10px 8px 12px;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .login-top-nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .login-top-nav-links a {
    padding: 7px 10px;
    font-size: 13px;
  }
  .login-download-pill {
    padding: 10px 23px;
    font-size: 17px;
  }
  .login-top-nav-wordmark {
    display: none;
  }
}

.login-page::before {
  content: '';
  position: absolute;
  /* Inflated past the viewport on every side rather than inset: 0. This layer
     is TRANSLATED for parallax, so at inset: 0 its own edges move into view
     and strip the dots from a band of the page -- which is exactly what
     happened on scroll before the offset was wrapped.
     Budget: up to 24px of wrapped scroll offset (see DOT_TILE_PX in
     login-landing-effects.js) plus up to 11px of pointer offset (maxPx / 2),
     so 48px clears both with room to spare. */
  inset: -48px;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: translate3d(
    var(--login-dot-mouse-x, 0px),
    calc(var(--login-parallax-dots, 0px) + var(--login-dot-mouse-y, 0px)),
    0
  );
}
body.login-landing-effects-on .login-page::before {
  will-change: transform;
}

/* Scroll-linked depth: blob field moves slower than content (login-landing-effects.js sets --login-parallax-blob). */
body.login-landing-effects-on .bg-decoration {
  transform: translate3d(0, var(--login-parallax-blob, 0px), 0);
  will-change: transform;
}

.login-floating-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  top: auto;
  left: auto;
  z-index: 44;
  width: min(360px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
}
.login-floating-panel.is-dragging {
  transition: none;
}
.login-floating-panel.is-dragging .login-card {
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.55);
}
.login-floating-panel__drag-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 16px;
  margin: -12px -12px 8px;
  flex-shrink: 0;
}
.login-floating-panel__drag-grip {
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
}
.login-floating-panel__card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .login-floating-panel__drag-handle {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .login-floating-panel.is-dragging .login-floating-panel__drag-handle {
    cursor: grabbing;
  }
}
@media (max-width: 767px) {
  .login-floating-panel__drag-grip {
    display: none;
  }
  .login-floating-panel__drag-handle {
    gap: 0;
    padding-top: 0;
    padding-bottom: 12px;
    margin-bottom: 4px;
    cursor: default;
    touch-action: auto;
    user-select: auto;
    -webkit-user-select: auto;
  }
}

.video-section {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  --video-section-pad-x: clamp(20px, 5vw, 40px);
  /* Extra bottom padding so the last sections can scroll above the fixed sign-in card (bottom-right). */
  padding: 40px var(--video-section-pad-x) max(56px, calc(28px + min(34vh, 380px)));
  background: rgba(20, 20, 20, 0.5);
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  /* One overflow axis per shorthand avoids clip+auto pairing (some engines show extra scrollbar tracks on hover). */
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  --login-parallax-content: 0px;
  perspective: 1400px;
  perspective-origin: 50% 20%;
}
.video-section::-webkit-scrollbar { width: 6px; }
.video-section::-webkit-scrollbar-track { background: transparent; }
.video-section::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.video-section::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

.video-section-inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding-top: 196px;
  display: flex;
  flex-direction: column;
  gap: 76px;
  box-sizing: border-box;
  transform-style: preserve-3d;
}
body.login-landing-effects-on .video-section-inner {
  transform: translate3d(0, calc(var(--login-parallax-content, 0px) * -1), 0);
  will-change: transform;
}

.video-container {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Match .promo-section glass card (no hover lift — scroll-reveal uses transform on .video-container) */
.video-section .video-container--triple {
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  transform: translateZ(0);
}

.video-header {
  margin-bottom: 20px;
  text-align: center;
  /* Full width of .video-container so nested .video-wrapper scales like sibling videos (parent uses align-items: center). */
  align-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.video-title { font-size: 30px; font-weight: 600; color: #ffffff; margin-bottom: 8px; line-height: 60px; }
.video-subtitle { font-size: 14px; color: #9ca3af; line-height: 28px; }

/* Three embeds in one row (see .video-container--triple in login.html) */
.video-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  width: 100%;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
}
.video-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.video-caption {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.45;
  text-align: center;
  margin: 12px 0 0;
  padding: 0 2px;
  box-sizing: border-box;
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateZ(0);
  transition: transform 0.45s cubic-bezier(0.2, 0.85, 0.2, 1), box-shadow 0.45s ease;
}
.video-section .video-wrapper:hover {
  transform: translateY(-6px) translateZ(24px) scale(1.008);
  box-shadow: 0 36px 70px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; }

@media (max-width: 1024px) {
  .login-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }
  /* Keep sign-in as a fixed overlay on narrow viewports (was position: relative + stacked). */
  .login-floating-panel {
    position: fixed;
    bottom: 12px;
    right: 12px;
    top: auto;
    left: auto;
    width: min(360px, calc(100vw - 24px));
    max-width: min(360px, calc(100vw - 24px));
    max-height: none;
    overflow: visible;
    padding: 0;
    z-index: 44;
  }
  .video-section {
    --video-section-pad-x: 20px;
    padding: 20px;
    padding-bottom: max(48px, calc(20px + min(40vh, 400px)));
    min-height: 0;
    flex: 1 1 auto;
  }
  /* Top padding for fixed pill nav; sign-in card sits bottom-right. */
  .video-section-inner {
    padding-top: clamp(56px, 12vh, 120px);
    gap: 40px;
  }
  .video-container { max-width: 100%; }
  .video-row { flex-direction: column; align-items: stretch; gap: 28px; }
  .login-card { padding: 20px; }
}

.login-container { width: 100%; max-width: 360px; margin: 0 auto; }

.login-card {
  background: rgba(30, 30, 30, 0.55);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 360px;
  height: min(350px, calc(100vh - 48px));
  max-height: min(350px, calc(100vh - 48px));
  box-sizing: border-box;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  transition: box-shadow 0.25s ease;
}
.login-card::-webkit-scrollbar { width: 6px; }
.login-card::-webkit-scrollbar-track { background: transparent; }
.login-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }

/* Floating sign-in card — height follows core only; extra floats above on desktop. */
.login-floating-panel .login-card {
  position: relative;
  height: auto;
  max-height: none;
  overflow: visible;
}

.login-card__core {
  position: relative;
  z-index: 1;
}

.login-floating-panel--expanded .login-card,
.login-floating-panel:focus-within .login-card {
  max-height: none;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.58);
}

/* Collapsed sign-in card on desktop — extra placement follows panel anchor (JS classes). */
@media (min-width: 768px) {
  .login-card__extra {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(22, 22, 22, 0.92);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.5);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
      max-height 0.35s cubic-bezier(0.2, 0.85, 0.2, 1),
      opacity 0.28s ease,
      margin-bottom 0.28s ease,
      margin-top 0.28s ease,
      padding 0.28s ease;
  }

  /* Bottom-anchored panel: notices grow above Login; core/buttons stay put. */
  .login-floating-panel--expand-up .login-card__extra {
    bottom: 100%;
    top: auto;
    margin-bottom: 8px;
    margin-top: 0;
  }

  /* Top-anchored panel: notices grow below the sign-in buttons. */
  .login-floating-panel--expand-down .login-card__extra {
    top: 100%;
    bottom: auto;
    margin-top: 8px;
    margin-bottom: 0;
  }

  /* Before JS runs, match default bottom-right placement. */
  .login-floating-panel:not(.login-floating-panel--expand-down) .login-card__extra {
    bottom: 100%;
    top: auto;
    margin-bottom: 8px;
    margin-top: 0;
  }

  /* Invisible bridge across the gap so hover is not lost between panels. */
  .login-floating-panel--expanded .login-card__extra::after,
  .login-floating-panel:focus-within .login-card__extra::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    pointer-events: auto;
  }

  .login-floating-panel--expand-up.login-floating-panel--expanded .login-card__extra::after,
  .login-floating-panel--expand-up:focus-within .login-card__extra::after,
  .login-floating-panel:not(.login-floating-panel--expand-down).login-floating-panel--expanded .login-card__extra::after,
  .login-floating-panel:not(.login-floating-panel--expand-down):focus-within .login-card__extra::after {
    bottom: -8px;
    top: auto;
  }

  .login-floating-panel--expand-down.login-floating-panel--expanded .login-card__extra::after,
  .login-floating-panel--expand-down:focus-within .login-card__extra::after {
    top: -8px;
    bottom: auto;
  }

  .login-floating-panel--expanded .login-card__extra,
  .login-floating-panel:focus-within .login-card__extra {
    max-height: 420px;
    opacity: 1;
    padding-top: 16px;
    padding-bottom: 16px;
    pointer-events: auto;
  }

  .login-floating-panel--expand-up.login-floating-panel--expanded .login-card__extra,
  .login-floating-panel--expand-up:focus-within .login-card__extra,
  .login-floating-panel:not(.login-floating-panel--expand-down).login-floating-panel--expanded .login-card__extra,
  .login-floating-panel:not(.login-floating-panel--expand-down):focus-within .login-card__extra {
    margin-bottom: 8px;
  }

  .login-floating-panel--expand-down.login-floating-panel--expanded .login-card__extra,
  .login-floating-panel--expand-down:focus-within .login-card__extra {
    margin-top: 8px;
  }

  .login-card__core .sso-btn {
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .login-card__extra {
    position: static;
    margin-top: 16px;
    max-height: none;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .login-card__core .sso-btn {
    margin-top: 16px;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .login-card__extra {
    transition: none;
  }

  .login-floating-panel:not(.login-floating-panel--expanded):not(:focus-within) .login-card__extra {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .login-floating-panel--expanded .login-card__extra,
  .login-floating-panel:focus-within .login-card__extra {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
  }
}

.google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 24px; background: #ffffff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; color: #1f2937; cursor: pointer; transition: all 0.2s ease; text-decoration: none; }
.google-btn:hover { background: #f3f4f6; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: #1f2937; }
.google-btn svg { width: 20px; height: 20px; }

.github-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 24px; margin-top: 16px; background: #24292f; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; font-size: 16px; font-weight: 500; color: #ffffff; cursor: pointer; transition: all 0.2s ease; text-decoration: none; }
.github-btn:hover { background: #32383f; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); color: #ffffff; }
.github-btn svg { width: 20px; height: 20px; }
/* Sign in with Apple. Shares .github-btn's geometry deliberately: App Store
   guideline 4.8 asks for an EQUIVALENT option, and equal size/weight is what
   that means in practice. Only the fill differs, to Apple's black. */
.apple-btn { background: #000000; border-color: rgba(255, 255, 255, 0.22); }
.apple-btn:hover { background: #1a1a1a; }

/* Enterprise SSO entry: same visual family as the GitHub button, sits
   directly beneath it. The button expands an email-first form that routes
   the domain to the org's identity provider via /auth/sso/start. */
.sso-btn { background: #1f2a44; font-family: inherit; }
.sso-btn:hover { background: #2a3a5c; }
.sso-email-form { display: flex; gap: 8px; margin-top: 10px; }
.sso-email-form[hidden] { display: none; }
.sso-email-input { flex: 1; min-width: 0; padding: 12px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; font-size: 14px; color: #ffffff; }
.sso-email-input::placeholder { color: #9ca3af; }
.sso-email-input:focus { outline: none; border-color: #667eea; }
.sso-continue-btn { padding: 12px 18px; background: #667eea; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; color: #ffffff; cursor: pointer; transition: all 0.2s ease; font-family: inherit; }
.sso-continue-btn:hover { background: #764ba2; }

.free-notice { text-align: center; font-size: 13px; color: #10b981; margin-top: 12px; margin-bottom: 0; font-weight: 500; }

.tos-notice { text-align: center; font-size: 12px; color: #9ca3af; margin-top: 12px; margin-bottom: 0; line-height: 1.8; }
.tos-notice a { color: #667eea; text-decoration: none; transition: color 0.2s ease; }
.tos-notice a:hover { color: #764ba2; text-decoration: underline; }
.tos-notice .pricing-link { color: #a5b4fc; font-weight: 500; }

.toast-notification { position: fixed; bottom: 20px; right: 20px; background: rgba(239, 68, 68, 0.95); color: white; padding: 16px 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); font-size: 14px; z-index: 1000; animation: slideIn 0.3s ease, fadeOut 0.3s ease 7.7s forwards; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.video-section-intro-block {
  max-width: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}
.video-section-intro-block .video-section-hero > .video-section-hero-line {
  margin: 0;
  padding-top: 80px;
  box-sizing: border-box;
}
/* Headline + tagline, then hero video; ~20–30px rhythm before features. */
.video-section-intro-block--hero-video {
  gap: clamp(20px, 2.5vw, 30px);
}
.video-section-hero { text-align: center; }
.video-section-hero > .video-section-hero-line {
  margin: 0;
  padding-top: 80px;
  box-sizing: border-box;
}
.video-section-hero .video-section-hero-tagline {
  padding-top: 20px;
}
.video-section-hero-meeting-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vw, 18px);
  width: 100%;
  padding-top: 24px;
  box-sizing: border-box;
}
.video-section-hero-meeting-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.video-section-hero-meeting-logo img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 12px;
  opacity: 0.98;
}
.video-section-hero--meetings .video-section-hero-tagline {
  padding-top: 20px;
}
.video-section-hero-line {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.3;
  text-align: center;
}
h1.video-section-hero-line {
  font-family: inherit;
  margin: 0;
}
/* Stacks headline + memory with tight internal gap (avoids 76px .video-section-inner gap between the two). */
.video-section-hero-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: clamp(6px, 1.2vw, 14px);
  margin: 0 auto 28px;
}

/* Lead line above memory + intro; scales up to 55px */
.video-section-hero-highlight {
  text-align: center;
  width: 80%;
  box-sizing: border-box;
  font-size: clamp(26px, 4.8vw, 55px);
  font-weight: 600;
  color: #f9fafb;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 auto;
  padding: 0 16px;
}
/* The "has your back before, during & after" line, moved out of the top
   headline to below the "Turn rough notes" demo. Sized a step down from the
   headline so it reads as a closing beat for that block rather than competing
   with the h1 above it. */
.video-section-hero-backline {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 600;
  color: #f9fafb;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: clamp(28px, 4vw, 52px) auto 0;
  padding: 0 16px;
  max-width: 900px;
}

.video-section-hero-backline em {
  font-style: italic;
  color: #cbd5e1;
}

.video-section-hero-flip-h {
  display: inline-block;
  transform: scaleX(1);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.34, 1.15, 0.64, 1);
}
.video-section-hero-flip-h.is-mirrored {
  transform: scaleX(-1);
}
@keyframes hero-back-flip-in {
  0% { transform: scaleX(1); }
  42% { transform: scaleX(-1); }
  58% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}
.video-section-hero-flip-h.hero-back-flip-entrance {
  animation: hero-back-flip-in 1.15s cubic-bezier(0.34, 1.15, 0.64, 1) forwards;
  transition: none;
}

.video-section-hero-tagline {
  font-size: 16px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.6;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  box-sizing: border-box;
}
/* Long privacy paragraph in the #landing-privacy block. (It used to also carry
   the line under "How your memory works", a section since removed.) */
.video-section-hero-tagline--wide {
  max-width: min(820px, 92vw);
}
@media (min-width: 720px) {
  .video-section-hero-tagline--wide {
    white-space: nowrap;
  }
}

/* AMIE mind-map diagram.

   DEAD as of the "Create memory of your entire day" section being removed from
   login.html: nothing renders .amie-* any more, and the only markup that ever
   did was that section (along with its inline drawAmie/scaleAmie script). Kept
   here rather than deleted so the diagram can be restored, but do not sync new
   work to these widths -- the live 920px family is .ppi-wrap, .paa-wrap and
   .ekf-wrap. */
.amie-diagram {
  width: min(920px, 100%);
  margin: clamp(16px, 3vw, 32px) auto 0;
  border-radius: 16px;
  overflow: hidden;
}
/* Card treatment shared with .pma-panel and .ppi-canvas so the three stacked
   landing diagrams read as one family. */
.amie-canvas {
  position: relative;
  width: 860px;
  height: 500px;
  background: rgba(10, 10, 26, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
}
.amie-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.amie-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.amie-node--left { flex-direction: row; }
.amie-node--right { flex-direction: row-reverse; }
.amie-ni {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  border: 1.5px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(12,12,28,.75);
}
.amie-ni img { width: 48px; height: 48px; object-fit: cover; border-radius: 11px; }
.amie-lbl {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
.amie-lbl-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.amie-cs {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: rgba(108,99,255,.7);
  letter-spacing: .04em;
  margin-top: 2px;
  white-space: nowrap;
}
.amie-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 28px;
  background: rgba(14,12,36,.92);
  border: 1.5px solid rgba(108,99,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(108,99,255,.18), 0 0 80px rgba(108,99,255,.08);
}
.amie-center-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
}

/* Hub-and-spoke integration diagram (Create memory section) */
.memory-hub-diagram {
  position: relative;
  width: min(920px, 100%);
  margin: clamp(8px, 2vw, 20px) auto 0;
  padding: 8px 12px clamp(28px, 4vw, 40px);
  box-sizing: border-box;
  min-height: clamp(280px, 38vw, 360px);
}
.memory-hub-diagram__wires {
  position: absolute;
  inset: 8px 0 clamp(28px, 4vw, 40px);
  width: 100%;
  height: calc(100% - clamp(28px, 4vw, 40px) - 8px);
  pointer-events: none;
  z-index: 0;
}
.memory-hub-diagram__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  min-height: clamp(260px, 34vw, 320px);
}
.memory-hub-diagram__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(260px, 34vw, 320px);
  gap: 12px;
}
.memory-hub-diagram__side--left {
  align-items: flex-end;
  padding-right: clamp(4px, 1.5vw, 12px);
}
.memory-hub-diagram__side--right {
  align-items: flex-start;
  padding-left: clamp(4px, 1.5vw, 12px);
}
.memory-hub-diagram__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.memory-hub-diagram__hub {
  width: clamp(108px, 14vw, 132px);
  height: clamp(108px, 14vw, 132px);
  border-radius: clamp(22px, 3vw, 28px);
  background: linear-gradient(
    145deg,
    #6366f1 0%,
    #a855f7 28%,
    #ec4899 52%,
    #f97316 78%,
    #8b5cf6 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 12px 40px rgba(99, 102, 241, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.memory-hub-diagram__hub-inner {
  width: clamp(48px, 6.5vw, 56px);
  height: clamp(48px, 6.5vw, 56px);
  border-radius: clamp(12px, 1.6vw, 14px);
  background: rgba(148, 163, 184, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.memory-hub-diagram__hub-logo {
  display: block;
  width: clamp(28px, 3.8vw, 34px);
  height: auto;
}
.memory-hub-diagram__caption {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.memory-hub-icon {
  width: clamp(40px, 5.2vw, 48px);
  height: clamp(40px, 5.2vw, 48px);
  border-radius: clamp(10px, 1.4vw, 12px);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.memory-hub-icon--pitara-mini {
  background: linear-gradient(145deg, #34d399, #059669);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Inter', Arial, sans-serif;
}
.memory-hub-icon svg {
  width: 70%;
  height: 70%;
  display: block;
}
.memory-hub-icon--cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 5px;
  box-sizing: border-box;
}
.memory-hub-icon--meetings img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
}
.memory-hub-icon-cluster__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  min-height: 0;
}
.memory-hub-icon-cluster__cell--todo { background: #e44332; color: #fff; }
.memory-hub-icon-cluster__cell--tick { background: #477df9; color: #fff; }
.memory-hub-icon-cluster__cell--note { background: #f5c518; color: #1f2937; }
.memory-hub-icon-cluster__cell--list { background: #34a853; color: #fff; }
.memory-hub-icon-cluster__cell--mic {
  background: #374151;
  font-size: 10px;
  line-height: 1;
}
@media (max-width: 640px) {
  .memory-hub-diagram {
    transform: scale(0.92);
    transform-origin: top center;
    margin-bottom: -16px;
  }
  .memory-hub-diagram__inner {
    gap: 8px;
  }
}

.video-section-hero-memory {
  font-size: 17px;
  color: #cbd5e1;
  margin: 0 auto;
  line-height: 1.55;
  max-width: 700px;
  width: 100%;
  padding: 0 12px;
  text-align: center;
  box-sizing: border-box;
}
/* ── Pitara Motion ───────────────────────────────────────────────────────
   Mount for the ported design piece (static/js/pitara-motion.js). The stage
   is authored at 1080x1350 and transform-scaled to whatever width it gets,
   so the only thing CSS decides here is how wide it is allowed to be.

   The motion panel now sits as a transparent 70% viewport-width portrait
   block instead of a boxed dark card so it blends with the surrounding hero
   copy. The script still sizes the height from the measured width. */
.pitara-motion-frame {
  /* Full width: the piece inside owns its size via --diagram-w. */
  width: 100%;
  display: flex;
  justify-content: center;
}


.pitara-motion {
  position: relative;
  width: 100%;
  /* Holds the 4:5 box before the script measures and sets an explicit height,
     so nothing below it jumps on boot. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Once the script sets an explicit pixel height, drop the ratio so the two
   cannot disagree by a sub-pixel and leave a hairline gap. */
.pitara-motion[data-mounted="1"] {
  aspect-ratio: auto;
}

/* The meeting-recording piece is authored on a transparent backdrop so it
   reads as part of the page rather than as an embedded video. No card
   chrome, and it can run wider because the app window inside it is the
   subject rather than a full-bleed typographic frame. */
.pitara-motion--bare {
  /* Shared with the data-flow and expert-flow diagrams -- see
     --diagram-w. These stages are 4:5, and the script sets an exact pixel
     height from the measured width, so the height follows automatically. */
  width: var(--diagram-w);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


/* Rounded corners on the smartify piece. This one paints a backdrop (glow,
   grid, vignette) that fills its box edge to edge, so it reads as a panel and
   wants a radius; the `--bare` reset above zeroes it, so it is restored here.
   `.pitara-motion` already sets `overflow: hidden`, which is what actually
   clips the backdrop to the curve.

   The recording piece is deliberately left square: it draws no backdrop, so
   there is nothing at its edges for a radius to shape. */
#pitaraSmartify {
  border-radius: 20px;
}

.pitara-motion--bare .pitara-motion-poster {
  background: none;
}

/* Pre-boot and no-JS fallback: the payoff frame, held still. */
.pitara-motion-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: transparent;
}

.pitara-motion-poster-big {
  margin: 0;
  font-size: clamp(28px, 6.4vw, 41px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.05em;
  color: #F4F1EA;
}

/* Hero privacy line: sits under the memory paragraph, quieter than the
   headline but not a footnote. */
.video-section-hero-privacy {
  font-size: 15px;
  color: #94a3b8;
  margin: 10px auto 0;
  line-height: 1.5;
  max-width: 700px;
  width: 100%;
  padding: 0 12px;
  text-align: center;
  letter-spacing: 0.01em;
  box-sizing: border-box;
}

/* ── Privacy section ─────────────────────────────────────────────────────
   The honesty paragraph is styled at full body size on purpose. Shrinking
   it into fine print would turn a credibility asset into a disclaimer. */
.privacy-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  width: 100%;
  max-width: 1040px;
  margin: 8px auto 0;
  padding: 0 12px;
  box-sizing: border-box;
}
.privacy-proof {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.38);
  padding: 20px;
}
.privacy-proof-title {
  font-size: 16px;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0 0 8px;
  line-height: 1.35;
}
.privacy-proof-body {
  font-size: 14px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}
.privacy-honesty {
  font-size: 16px;
  line-height: 1.65;
  color: #cbd5e1;
  max-width: 760px;
  /* No callout treatment. This used to sit in a tinted green box with a rule
     down its left edge, which framed it as an aside; it is the paragraph that
     states what Pitara does NOT protect, so it should read as body copy in the
     section, not as a pull-quote beside it. Padding goes with the box: with
     nothing to inset from, it only pushed the text out of alignment with the
     rest of the column. */
  margin: clamp(18px, 3vw, 30px) auto 0;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}
.privacy-faq {
  width: 100%;
  max-width: 760px;
  margin: clamp(18px, 3vw, 30px) auto 0;
  padding: 0 12px;
  box-sizing: border-box;
}
.privacy-faq-item {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.privacy-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 28px 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: #e2e8f0;
  position: relative;
}
.privacy-faq-item > summary::-webkit-details-marker {
  display: none;
}
.privacy-faq-item > summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
  font-size: 20px;
  color: #64748b;
}
.privacy-faq-item[open] > summary::after {
  content: '\2212';
}
.privacy-faq-item > p {
  margin: 0;
  padding: 0 28px 16px 0;
  font-size: 14px;
  line-height: 1.65;
  color: #94a3b8;
}
.privacy-cta {
  text-align: center;
  margin: clamp(16px, 2.5vw, 24px) 0 0;
  font-size: 15px;
}
/* Same colour pair as the Windows / macOS links in the download strip
   (.download-link): #a5b4fc resting, #c4b5fd on hover. The underline is
   derived from the resting colour rather than hard-coded, so the two cannot
   drift apart if the link colour is ever retuned. */
.privacy-cta a {
  color: #a5b4fc;
  text-decoration: none;
  border-bottom: 1px solid rgb(165 180 252 / 0.35);
  padding-bottom: 2px;
}
.privacy-cta a:hover {
  color: #c4b5fd;
  border-bottom-color: #c4b5fd;
}
@media (max-width: 640px) {
  .privacy-honesty {
    font-size: 15px;
  }
}

.video-section-hero-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 22px);
  width: 100%;
  margin-top: clamp(8px, 1.5vw, 16px);
}
.video-section-hero-what {
  margin: 0;
  text-align: center;
}
.video-section-hero-what-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
  max-width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.video-section-hero-what-block .video-section-hero-line {
  margin: 0;
  max-width: 100%;
}
.video-section-hero-what-block .video-section-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.video-section-hero-what-block .video-section-hero > .video-section-hero-line {
  width: 80%;
  max-width: 80%;
  margin: 0;
  padding-top: 80px;
  box-sizing: border-box;
}
.video-section-hero-what-block .login-hero-video-wrap {
  width: 100%;
  max-width: 100%;
}
.login-hero-video-wrap--match-main .login-hero-video {
  width: var(--login-hero-main-video-width, auto);
  max-width: 100%;
  height: auto;
  max-height: none;
}
.login-hero-video-wrap--demo {
  cursor: pointer;
}
.login-hero-video-wrap--demo .login-hero-video {
  cursor: pointer;
}
.login-hero-video-wrap--main .login-hero-video {
  cursor: pointer;
}

/* Hero video: 95% of viewport height; width follows intrinsic aspect (capped by column). */
.login-hero-video-wrap {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}
.login-hero-video-inner {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  max-height: min(95dvh, 95vh);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  background: #0f0f12;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
.login-hero-video {
  display: block;
  max-height: min(95dvh, 95vh);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: top;
}
.login-hero-video-inner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  pointer-events: none;
  z-index: 1;
  border-radius: 0 0 11px 11px;
}
.login-hero-video-controls {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  pointer-events: auto;
}
.login-hero-video-play-btn,
.login-hero-video-sound-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #e5e7eb;
  background: rgba(15, 15, 18, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.login-hero-video-play-btn:hover,
.login-hero-video-sound-btn:hover {
  background: rgba(102, 126, 234, 0.35);
  border-color: rgba(167, 139, 250, 0.45);
  color: #fff;
}
.video-section .promo-section {
  margin-top: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.85, 0.2, 1), box-shadow 0.5s ease, border-color 0.35s ease;
}
/* No translateY / translateZ / rotateX here — they move the hit box away from the cursor (hover flicker).
   Keep outer shadow footprint ≤ default so hover does not grow scrollable overflow (double scrollbars). */
.video-section .promo-section:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
.video-section .promo-section h3 { font-size: 30px; font-weight: 600; color: #ffffff; margin-bottom: 8px; text-align: center; justify-content: center; display: flex; align-items: center; gap: 10px; line-height: 60px; }
.video-section .promo-section p { font-size: 14px; color: #9ca3af; margin: 0; line-height: 28px; text-align: center; }

.video-section .promo-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; height: 150px; text-align: center; justify-content: center; align-items: center; }
.video-section .promo-tag { font-size: 12px; padding: 8px 14px; background: rgba(102, 126, 234, 0.15); color: #a5b4fc; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(102, 126, 234, 0.2); transition: background 0.2s ease, border-color 0.2s ease; }
.video-section .promo-tag:hover { background: rgba(102, 126, 234, 0.25); border-color: rgba(102, 126, 234, 0.4); }
.video-section .promo-tag .promo-tag-logo { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.video-section .promo-tag .promo-tag-logo svg { width: 18px; height: 18px; }

/* Inset buffer for card shadows; horizontal clipping is handled by .video-section (avoid nested clip + scroll). */
.promo-visual {
  margin-top: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 12px clamp(20px, 4vw, 56px) 40px;
}
/* Masonry-style layout: multi-column flow (no extra JS). Cards keep aspect from data-aspect-ratio.
   Column tracks grow to fill the row — without a card max-width, width:100% becomes huge on wide screens. */
.promo-visual .promo-collection-cards {
  column-width: 220px;
  column-gap: 10px;
  column-fill: balance;
  width: 100%;
  max-width: min(1320px, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.promo-visual .promo-collection-cards .promo-collection-cards-status {
  column-span: all;
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}

.promo-collection-share {
  width: 100%;
  max-width: min(1320px, 100%);
  margin: 20px auto 0;
  padding: 0 8px 8px;
  box-sizing: border-box;
  text-align: center;
}
.promo-collection-share-line {
  margin: 0;
  font-size: 15px;
  color: #e5e7eb;
  line-height: 1.5;
}
.promo-collection-share-feedback {
  margin: 8px 0 0;
  min-height: 1.25em;
  font-size: 13px;
  color: #86efac;
}
.promo-collection-share-btn {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgba(102, 126, 234, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
}
.promo-collection-share-btn:hover {
  background: rgba(102, 126, 234, 0.5);
}
.promo-collection-share-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
.promo-visual .collection-card.collection-page-card {
  /* Match collection CARD_WIDTH (280); cap size so wide column tracks do not stretch cards */
  width: 100% !important;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  height: auto !important;
  aspect-ratio: 4 / 3;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 10px;
  cursor: pointer;
  pointer-events: auto;
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #2a2a2a;
  transform: translateZ(0);
  transition: box-shadow 0.35s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.promo-visual .collection-card.collection-page-card[data-aspect-ratio="16:9"] { aspect-ratio: 16 / 9; }
.promo-visual .collection-card.collection-page-card[data-aspect-ratio="4:3"] { aspect-ratio: 4 / 3; }
.promo-visual .collection-card.collection-page-card[data-aspect-ratio="1:1"] { aspect-ratio: 1 / 1; }
.promo-visual .collection-card.collection-page-card[data-aspect-ratio="3:4"] { aspect-ratio: 3 / 4; }
.promo-visual .collection-card.collection-page-card[data-aspect-ratio="9:16"] { aspect-ratio: 9 / 16; }
.promo-visual .collection-card.collection-page-card[data-aspect-ratio="2:1"] { aspect-ratio: 2 / 1; }
/* Shadow-only hover: avoids moving the hit target (flicker) and growing overflow under .video-section perspective. */
.promo-visual .collection-card.collection-page-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.promo-visual .collection-card.collection-page-card .card-background { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #2a2a2a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.promo-visual .collection-card.collection-page-card .card-background::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%); z-index: 5; pointer-events: none; }
.promo-visual .collection-card.collection-page-card .card-inner { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; }
.promo-visual .collection-card.collection-page-card .card-inner .card-type-icon { width: 64px; height: 64px; color: rgba(255, 255, 255, 0.6); }
.promo-visual .collection-card.collection-page-card .card-inner .card-type-icon svg { width: 64px; height: 64px; }
.promo-visual .collection-card.collection-page-card .card-inner img,
.promo-visual .collection-card.collection-page-card .card-inner video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background-color: #000; }
/* Do not force video opacity here: card-factory uses inline opacity for hover previews; direct-file
   cards use a plain <video> with no .playing class (old static promo used class "playing"). */
.promo-visual .collection-card.collection-page-card .card-inner .video-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity 0.3s ease; }
.promo-visual .collection-card.collection-page-card .card-inner .video-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; background: rgba(0, 0, 0, 0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; transition: opacity 0.3s ease; }
.promo-visual .collection-card.collection-page-card .card-inner .video-play-overlay svg { width: 28px; height: 28px; color: #fff; margin-left: 3px; }
.promo-visual .collection-card.collection-page-card .card-bottom-bar { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; opacity: 0.6; transition: opacity 0.2s ease; }
.promo-visual .collection-card.collection-page-card:hover .card-bottom-bar { opacity: 1; }
.promo-visual .collection-card.collection-page-card .card-label-title { color: #ffffff; font-size: 13px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-visual .collection-card.collection-page-card .card-icon { width: 16px; height: 16px; color: #ffffff; }
.promo-visual .collection-card.collection-page-card .card-icon svg { width: 16px; height: 16px; }

.promo-visual .collection-card.collection-page-card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 2px; background: linear-gradient(var(--gradient-angle, 135deg), #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; z-index: 20; pointer-events: none; }
.promo-visual .collection-card.collection-page-card:hover::before { opacity: 1; }

.video-section .promo-section { text-align: center; }

/* Scroll-linked reveal: fade, scale, 3D tilt; ongoing parallax via --login-reveal-y (login-landing-effects.js) */
body.login-landing-effects-on .video-section .video-section-intro-block,
body.login-landing-effects-on .video-section .video-container {
  opacity: 0;
  transform: translate3d(0, 44px, -36px) scale(0.92) rotateX(5deg);
  transform-origin: 50% 0%;
  transition: opacity 0.88s cubic-bezier(0.2, 0.85, 0.2, 1), transform 0.88s cubic-bezier(0.22, 1, 0.36, 1);
}
body.login-landing-effects-on .video-section .video-container .video-tile {
  opacity: 0;
  transform: translate3d(0, 22px, -18px) scale(0.9);
  transform-origin: 50% 90%;
  transition: opacity 0.72s cubic-bezier(0.2, 0.85, 0.2, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
body.login-landing-effects-on .video-section .video-container .video-tile:nth-child(1) { transition-delay: 0.06s; }
body.login-landing-effects-on .video-section .video-container .video-tile:nth-child(2) { transition-delay: 0.15s; }
body.login-landing-effects-on .video-section .video-container .video-tile:nth-child(3) { transition-delay: 0.24s; }
body.login-landing-effects-on .video-section .video-container.login-depth-revealed .video-tile {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
body.login-landing-effects-on .video-section .promo-section {
  opacity: 0;
  transform: translate3d(0, 40px, -28px) scale(0.94) rotateX(4deg);
  transform-origin: 50% 0%;
  transition: opacity 0.88s cubic-bezier(0.2, 0.85, 0.2, 1), transform 0.88s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.35s ease;
}
body.login-landing-effects-on .video-section .video-section-intro-block.login-depth-revealed,
body.login-landing-effects-on .video-section .video-container.login-depth-revealed {
  opacity: 1;
  transform: translate3d(0, var(--login-reveal-y, 0px), 0) scale(1) rotateX(0deg);
}
body.login-landing-effects-on .video-section .promo-section.login-depth-revealed {
  opacity: 1;
  transform: translate3d(0, var(--login-reveal-y, 0px), 0) translateZ(0) scale(1) rotateX(0deg);
}
/* Same as default hover: shadow/border only; shadow extent matches non-hover block to avoid scroll overflow. */
body.login-landing-effects-on .video-section .promo-section.login-depth-revealed:hover {
  transform: translate3d(0, var(--login-reveal-y, 0px), 0) translateZ(0) scale(1) rotateX(0deg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .login-page::before,
  body .bg-decoration,
  .video-section-inner {
    transform: none !important;
    will-change: auto !important;
  }
  body.login-landing-effects-on .video-section .video-section-intro-block,
  body.login-landing-effects-on .video-section .video-container,
  body.login-landing-effects-on .video-section .video-container .video-tile,
  body.login-landing-effects-on .video-section .promo-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .video-section-hero-flip-h {
    transform: scaleX(1) !important;
    transition: none !important;
    animation: none !important;
  }
  .login-download-pill::after {
    animation: none !important;
    display: none;
  }
}

/* ── Enhance-text demo (pedShell) ── */
.login-hero-video-wrap--ped-demo,
.login-hero-video-wrap:has(.pitara-enhance-demo) {
  width: 100%;
  max-width: 100%;
}
.login-hero-video-inner.pitara-enhance-demo::after {
  display: none;
}
.pitara-enhance-demo {
  width: min(800px, 100%);
  min-width: min(100%, 320px);
  padding: 0;
  background: #16162a;
  border-radius: 18px;
}
.ped-shell {
  background: #16162a;
  border-radius: 18px;
  padding: 28px 28px 24px 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  user-select: none;
  height: 360px;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.ped-title { font-size: 22px; font-style: italic; font-weight: 500; color: #f0eefd; margin: 0 0 5px 0; display: flex; align-items: center; gap: 10px; height: 32px; overflow: hidden; }
.ped-title-icons { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
.ped-title-icons svg { width: 16px; height: 16px; }
.ped-meta { font-size: 12px; color: #555; margin: 0 0 18px 0; height: 16px; overflow: hidden; }
.ped-tabrow { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 18px; height: 30px; }
.ped-tabbar { display: inline-flex; align-items: center; padding: 3px; border-radius: 9999px; background: rgba(255,255,255,0.06); gap: 2px; }
.ped-tab { border: 0; outline: 0; box-shadow: none; -webkit-appearance: none; appearance: none; cursor: pointer; padding: 6px 12px; border-radius: 9999px; font-size: 10px; font-weight: 500; line-height: 1; background: transparent; color: #8b8ba0; letter-spacing: 0.02em; }
.ped-tab.active { background: rgba(255,255,255,0.12); color: #fff; }
.ped-dots { color: #555; font-size: 14px; }
.ped-content { position: absolute; left: 28px; right: 28px; top: 128px; bottom: 24px; overflow: hidden; }
.ped-line { font-size: 13px; color: #d8d5f0; line-height: 1; margin: 0; display: flex; align-items: center; gap: 6px; border-radius: 4px; height: 28px; overflow: hidden; transition: background 0.25s; flex-shrink: 0; }
.ped-line.sel { background: rgba(91,106,247,0.28); }
.ped-sparkle { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; visibility: hidden; font-size: 12px; }
.ped-sparkle.on { visibility: visible; animation: pedSpin 0.7s ease-in-out infinite; }
.ped-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; transition: opacity 0.25s; }
@keyframes pedSpin {
  0%   { transform: scale(0.7) rotate(0deg);   color: #a78bfa; }
  25%  { transform: scale(1.3) rotate(45deg);  color: #f0abfc; }
  50%  { transform: scale(0.85) rotate(90deg); color: #818cf8; }
  75%  { transform: scale(1.1) rotate(135deg); color: #c084fc; }
  100% { transform: scale(0.7) rotate(180deg); color: #a78bfa; }
}
.ped-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  flex-shrink: 0;
  background: #d8d5f0;
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: pedBlink 0.85s step-end infinite;
}
@keyframes pedBlink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
.ped-ctx {
  position: absolute;
  background: #2a2a42;
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 10;
  opacity: 0;
  transform: scale(0.95);
  transform-origin: top left;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.ped-ctx.on { opacity: 1; transform: scale(1); }
.ped-ctx-item { padding: 6px 12px; font-size: 11px; color: #c0bedd; display: flex; align-items: center; gap: 7px; border-radius: 5px; margin: 0 3px; }
.ped-ctx-item.hi { background: rgba(91,106,247,0.4); color: #fff; }
.ped-ctx-sep { height: 0.5px; background: rgba(255,255,255,0.08); margin: 3px 0; }

/* ── Pitara Memory Animation ──

   DEAD as of the "How your memory works" section being removed from login.html:
   nothing renders .pma-* / .pitara-memory-anim-* any more, and its driver
   static/js/login-memory-anim.js is no longer loaded by any template. Kept here
   rather than deleted so the animation can be restored, but do not sync new work
   to these widths -- the live 920px family is .ppi-wrap, .paa-wrap and
   .ekf-wrap. */
.pitara-memory-anim-block { padding: 0 !important; }
.pitara-memory-anim-wrap {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.pma-stage {
  display: flex;
  gap: 14px;
  align-items: stretch;
  width: 100%;
}

/* Card treatment shared with .amie-canvas and .ppi-canvas. */
.pma-panel {
  flex: 1;
  background: rgba(10, 10, 26, 0.5);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 14px;
  height: 340px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
  backdrop-filter: blur(12px);
  box-sizing: border-box;
}
.pma-panel.pma-active {
  border-color: rgba(108,99,255,0.5);
  box-shadow: 0 0 22px rgba(108,99,255,0.15);
}
.pma-panel.pma-pulse-glow { animation: pmaGlow 0.6s ease-out; }
@keyframes pmaGlow {
  0%   { box-shadow: 0 0 0 rgba(108,99,255,0); }
  50%  { box-shadow: 0 0 36px rgba(108,99,255,0.4); border-color: rgba(157,150,255,0.6); }
  100% { box-shadow: 0 0 22px rgba(108,99,255,0.15); border-color: rgba(108,99,255,0.5); }
}

.pma-panel-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.2);
  margin-bottom: 8px;
  font-weight: 600;
  text-align: center;
  flex-shrink: 0;
}

/* left panel */
.pma-scroll-container { flex: 1; overflow: hidden; border-radius: 8px; }
.pma-doc-list { display: flex; flex-direction: column; will-change: transform; }

.pma-doc-section-head {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.18);
  font-weight: 700;
  padding: 10px 2px 5px;
  flex-shrink: 0;
  text-align: center;
}
.pma-doc-section-head:first-child { padding-top: 0; }

.pma-doc-row { display: flex; flex-direction: column; margin-bottom: 5px; flex-shrink: 0; }
.pma-doc-item {
  background: rgba(12,12,28,0.32);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px 7px 0 0;
  padding: 6px 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.pma-doc-item.pma-other { background: rgba(10,10,24,0.22); color: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.05); }
.pma-doc-item.pma-hl   { background: rgba(108,99,255,0.15); color: rgba(196,181,253,0.9); border-color: rgba(108,99,255,0.45); }
.pma-doc-blocks {
  display: flex;
  gap: 3px;
  background: rgba(10,10,24,0.22);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: none;
  border-radius: 0 0 7px 7px;
  padding: 4px 7px 5px;
  overflow: hidden;
}
.pma-blk {
  width: 14px; height: 8px; border-radius: 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s;
}
.pma-doc-row.pma-other-row .pma-blk { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); }
.pma-blk.pma-lit      { background: rgba(74,69,204,0.7); border-color: rgba(123,118,232,0.8); }
.pma-blk.pma-launching { animation: pmaBlockLaunch 0.55s forwards; }
@keyframes pmaBlockLaunch {
  0%   { opacity:1; transform:scale(1); }
  30%  { opacity:1; transform:scale(1.15); background:rgba(140,133,255,0.9); }
  100% { opacity:0; transform:scale(0.5) translateY(-10px); }
}

/* center panel */
.pma-mem-panel { align-items: center; justify-content: flex-start; }
.pma-mem-title {
  font-size: 16px; font-weight: 700;
  color: rgba(196,181,253,0.9);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  text-align: center;
}
.pma-mem-status {
  font-size: 10px; color: rgba(255,255,255,0.2);
  height: 14px; transition: color 0.3s;
  text-align: center; margin-bottom: 14px;
}
.pma-mem-status.pma-status-active { color: rgba(157,150,255,0.85); }
.pma-sec-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.18); font-weight: 700;
  margin-bottom: 7px; text-align: center; width: 100%;
}
.pma-slots-row { display: flex; gap: 10px; width: 100%; justify-content: center; }
.pma-slots-gap { margin-bottom: 12px; }
.pma-slot {
  background: rgba(12,12,28,0.32);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  flex-shrink: 0; width: 80px; height: 80px;
  box-sizing: border-box;
}
.pma-slot.pma-slot-processing {
  border-color: rgba(108,99,255,0.5);
  background: rgba(108,99,255,0.08);
  animation: pmaSlotPulse 1.4s ease-in-out infinite;
}
@keyframes pmaSlotPulse {
  0%,100% { box-shadow: 0 0 8px rgba(108,99,255,0.15); }
  50%      { box-shadow: 0 0 20px rgba(108,99,255,0.4); }
}
.pma-slot.pma-slot-filled { border-color: rgba(74,69,204,0.5); background: rgba(74,69,204,0.1); }
.pma-slot-logo {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.35; transition: opacity 0.3s;
}
.pma-slot.pma-slot-filled .pma-slot-logo,
.pma-slot.pma-slot-processing .pma-slot-logo { opacity: 0.9; }
.pma-slot-label {
  font-size: 9px; color: rgba(255,255,255,0.22); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: color 0.3s; text-align: center; line-height: 1.2; white-space: nowrap;
}
.pma-slot.pma-slot-filled .pma-slot-label   { color: rgba(157,150,255,0.85); }
.pma-slot.pma-slot-processing .pma-slot-label { color: rgba(196,181,253,0.9); }
.pma-slot-blocks { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; min-height: 7px; }
.pma-slot-block {
  width: 9px; height: 6px; border-radius: 2px;
  background: rgba(108,99,255,0.8);
  border: 1px solid rgba(157,150,255,0.6);
  animation: pmaBlockIn 0.35s ease-out both;
}
@keyframes pmaBlockIn {
  from { opacity:0; transform:scale(0.4) translateY(5px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* right panel */
.pma-chat-panel { justify-content: space-between; }
.pma-chat-messages { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; margin-bottom:10px; }
.pma-msg {
  border-radius: 10px; padding: 8px 11px;
  font-size: 11px; line-height: 1.5; max-width: 90%;
  animation: pmaBubbleIn 0.3s ease-out both;
}
@keyframes pmaBubbleIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.pma-msg-user {
  background: rgba(108,99,255,0.18);
  border: 1px solid rgba(108,99,255,0.3);
  color: rgba(196,181,253,0.9);
  align-self: flex-end;
}
.pma-msg-ai {
  background: rgba(12,12,28,0.32);
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.55);
  align-self: flex-start;
}
.pma-msg-idle { opacity: 0.45; font-style: italic; }
.pma-cursor {
  display: inline-block; width: 2px; height: 12px;
  background: rgba(108,99,255,0.9);
  margin-left: 2px; vertical-align: middle;
  animation: pmaBlink 0.7s infinite;
}
@keyframes pmaBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.pma-chat-input {
  display: flex; gap: 8px; align-items: center;
  background: rgba(12,12,28,0.32);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 8px 10px;
  transition: border-color 0.3s;
}
.pma-chat-input.pma-typing { border-color: rgba(108,99,255,0.45); }
.pma-chat-text { flex:1; font-size:11px; color: rgba(196,181,253,0.85); min-height:16px; }
.pma-send-btn {
  width: 24px; height: 24px;
  background: rgba(108,99,255,0.7);
  border-radius: 6px; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; opacity: 0.35; transition: opacity 0.3s;
}
.pma-send-btn.pma-send-ready { opacity: 1; }

/* beams */
.pma-beam-col {
  width: 16px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; align-self: center;
}
.pma-beam-track {
  width: 2px; height: 130px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px; position: relative; overflow: hidden;
}
.pma-beam-pulse {
  position: absolute; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg,transparent,rgba(108,99,255,0.8),rgba(196,181,253,0.9),rgba(108,99,255,0.8),transparent);
  opacity: 0; height: 60px;
}
.pma-beam-pulse.pma-beam-fwd     { animation: pmaBeamFwd 0.7s ease-in-out forwards; }
.pma-beam-pulse.pma-beam-rev     { animation: pmaBeamRev 0.7s ease-in-out forwards; }
@keyframes pmaBeamFwd { 0%{top:-60px;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{top:130px;opacity:0} }
@keyframes pmaBeamRev { 0%{top:130px;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{top:-60px;opacity:0} }

/* floating block (fixed pos, cross-panel travel) */
.pma-float-block {
  position: fixed; width: 14px; height: 9px; border-radius: 2px;
  background: rgba(108,99,255,0.85);
  border: 1px solid rgba(157,150,255,0.7);
  pointer-events: none; z-index: 9999;
  box-shadow: 0 0 10px rgba(108,99,255,0.6);
}

/* responsive — collapse to stacked on narrow screens */
@media (max-width: 600px) {
  .pma-stage { flex-direction: column; gap: 10px; }
  .pma-beam-col { display: none; }
  .pma-panel { height: 220px; }
  .pma-mem-panel { height: auto; min-height: 220px; }
}

/* ── Data privacy infographic (desktop encryption flow) ── */
.pitara-privacy-infographic-block .video-section-hero > .video-section-hero-line {
  padding-top: 80px;
}

/* DEAD: .ppi-* belonged to the data-flow diagram that .dflow-* replaced, and
   nothing on the page references these rules any more. Kept only to avoid a
   large unrelated deletion; safe to remove wholesale.
   Plain container (no card chrome):
   the .ppi-canvas is the card. This is now the only diagram on the page that
   still has card chrome -- .paa-canvas and .ekf-canvas are both transparent,
   and the .amie-canvas / .pma-panel it used to match are dead. */
.ppi-wrap {
  width: min(920px, 100%);
  margin: clamp(16px, 3vw, 32px) auto 0;
  padding: 0;
  box-sizing: border-box;
}

/* Encrypted-data lock icon */
.ppi-lock {
  flex-shrink: 0;
  color: rgba(16, 185, 129, 0.9);
  vertical-align: middle;
}

/* SVG path diagram — scaled canvas with curved connectors */
.ppi-diagram {
  width: min(920px, 100%);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Card treatment shared with .amie-canvas and .pma-panel. */
.ppi-canvas {
  position: relative;
  width: 920px;
  height: 360px;
  background:
    radial-gradient(120% 90% at 12% 24%, rgba(108, 99, 255, 0.10), transparent 60%),
    radial-gradient(120% 90% at 88% 76%, rgba(16, 185, 129, 0.08), transparent 60%),
    rgba(10, 10, 26, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
}

.ppi-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.ppi-edge-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Above nodes (z-index 3) so chips on short connectors are never hidden by boxes. */
  z-index: 5;
}

.ppi-edge-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 6px;
  border-radius: 7px;
  background: rgba(10, 10, 24, 0.94);
  border: 1px solid rgba(139, 123, 255, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  max-width: 96px;
  text-align: center;
  box-sizing: border-box;
  white-space: normal;
}

.ppi-edge-label--storage { border-color: rgba(16, 185, 129, 0.3); }
.ppi-edge-label--direct { border-color: rgba(167, 139, 250, 0.35); }

.ppi-edge-label-main {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(199, 194, 255, 0.95);
  line-height: 1.2;
}

.ppi-edge-label--storage .ppi-edge-label-main { color: rgba(52, 211, 153, 0.95); }
.ppi-edge-label--direct .ppi-edge-label-main { color: rgba(196, 181, 253, 0.95); }

.ppi-edge-label-sub {
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.2;
}

.ppi-node {
  position: absolute;
  z-index: 3;
}

.ppi-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 16px 8px;
  border-radius: 13px;
  border: 1.5px solid rgba(108, 99, 255, 0.35);
  background: linear-gradient(180deg, rgba(20, 18, 46, 0.94), rgba(12, 11, 30, 0.94));
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  width: 102px;
  min-height: 88px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ppi-box:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 123, 255, 0.6);
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.7);
}

.ppi-box--client {
  width: 102px;
  min-height: 76px;
  border-color: rgba(139, 123, 255, 0.5);
  box-shadow: 0 0 26px rgba(108, 99, 255, 0.16), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}

.ppi-box--hub {
  min-height: 96px;
  border-color: rgba(157, 150, 255, 0.6);
  background: linear-gradient(180deg, rgba(26, 22, 58, 0.96), rgba(16, 14, 40, 0.96));
  box-shadow: 0 0 26px rgba(108, 99, 255, 0.2), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}

.ppi-box--storage {
  min-height: 96px;
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(10, 26, 22, 0.94), rgba(8, 18, 16, 0.94));
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}

.ppi-box--storage:hover {
  border-color: rgba(52, 211, 153, 0.6);
}

.ppi-box--local .ppi-box-note,
.ppi-box--cloud .ppi-box-note {
  color: rgba(52, 211, 153, 0.78);
}

.ppi-box--apis {
  width: 194px;
  align-items: stretch;
  text-align: left;
  padding: 11px 11px 9px;
}

.ppi-box--apis .ppi-box-title {
  text-align: center;
  margin-bottom: 5px;
}

.ppi-box--mini {
  width: 102px;
  min-height: 76px;
  padding: 14px 8px;
  border-style: dashed;
  border-color: rgba(167, 139, 250, 0.5);
  background: linear-gradient(180deg, rgba(20, 16, 40, 0.9), rgba(14, 12, 32, 0.9));
}

.ppi-box--mini:hover {
  border-color: rgba(196, 181, 253, 0.7);
}

/* On-device transcription. The mini box was styled as an external hop
   (dashed, violet) back when this node was the transcription vendor. It now
   sits inside the user's machine, so it takes the same solid green treatment
   as the local disk: in this diagram, green means "stays on your device". */
.ppi-box--ondevice {
  width: 118px;
  border-style: solid;
  border-color: rgba(52, 211, 153, 0.5);
  background: linear-gradient(180deg, rgba(6, 30, 24, 0.92), rgba(8, 22, 20, 0.92));
}

.ppi-box--ondevice:hover {
  border-color: rgba(52, 211, 153, 0.75);
}

.ppi-box--ondevice .ppi-box-sub {
  color: rgba(52, 211, 153, 0.78);
}

.ppi-box-title {
  font-size: 12px;
  font-weight: 600;
  color: #f3f4f6;
  line-height: 1.2;
  max-width: 100%;
}

.ppi-box-sub {
  font-size: 9px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.45);
  max-width: 100%;
}

.ppi-box-note {
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(157, 150, 255, 0.7);
  margin-top: 2px;
  max-width: 100%;
}

.ppi-endpoints {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.ppi-endpoint {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 12, 30, 0.65);
}

.ppi-endpoint-name {
  font-size: 10px;
  font-weight: 600;
  color: #e5e7eb;
  line-height: 1.2;
}

.ppi-endpoint-role {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.2;
}

.ppi-path-group path {
  transition: opacity 0.6s ease;
}

/* Traveling dots along each connector show flow direction */
@keyframes ppiFlow {
  to { stroke-dashoffset: -15.1; }
}

.ppi-flow-dash {
  animation: ppiFlow 1.3s linear infinite;
}

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

/* On-device-only zone */
.ppi-ondevice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 12px;
  margin-top: clamp(14px, 2.5vw, 20px);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.05);
}

.ppi-ondevice-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(16, 185, 129, 0.95);
}

.ppi-ondevice-list {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

.ppi-flow-note {
  margin: clamp(16px, 2.5vw, 22px) 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}

/* Reveal — opacity only on diagram nodes/paths so connectors stay aligned */
body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-node,
body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-path-group,
body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-edge-label,
body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-ondevice,
body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-flow-note {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.2, 0.85, 0.2, 1);
}

body.login-landing-effects-on .pitara-privacy-infographic-block.login-depth-revealed .ppi-node,
body.login-landing-effects-on .pitara-privacy-infographic-block.login-depth-revealed .ppi-path-group,
body.login-landing-effects-on .pitara-privacy-infographic-block.login-depth-revealed .ppi-edge-label,
body.login-landing-effects-on .pitara-privacy-infographic-block.login-depth-revealed .ppi-ondevice,
body.login-landing-effects-on .pitara-privacy-infographic-block.login-depth-revealed .ppi-flow-note {
  opacity: 1;
}

body.login-landing-effects-on .pitara-privacy-infographic-block.login-depth-revealed .ppi-flow-note { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-node,
  body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-path-group,
  body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-edge-label,
  body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-ondevice,
  body.login-landing-effects-on .pitara-privacy-infographic-block .ppi-flow-note {
    opacity: 1;
    transition: none;
  }
}

/* ===========================================================================
   "Real-time insights": ask-anything composer + live transcript (.paa-*).
   Ported from the Claude Design project "For front page - ask anything"
   (Ask Anything UI.dc.html). Replaces the demo video that used to sit here.
   Authored at a fixed 1200x460 and scaled to the wrap width by
   login-ask-anything.js, same approach as .amie-canvas and .ppi-canvas.
   =========================================================================== */

/* Lives in .video-section-hero-what-block, a flex column with `gap: 50px`, so
   it carries no top margin of its own -- the container does the spacing, the
   same way .pitara-motion-frame does. Width still matches .ppi-wrap and
   .ekf-wrap. */
.paa-wrap {
  width: var(--diagram-w);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* NOTE: there used to be a `.paa-wrap + .video-section-hero { margin-top: -50px }`
   here, pulling the piece's heading up when the heading sat BELOW it. The
   heading has since been demoted to a sub-heading and moved above the piece, so
   the next .video-section-hero after .paa-wrap is now the expert-flow heading,
   which is a separate section. Leaving that rule in place glued the two
   sections together. Do not reinstate it without re-checking what actually
   follows .paa-wrap. */

.paa-diagram {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* Deliberately no card treatment here, unlike .amie-canvas, .pma-panel and
   .ppi-canvas: the toolbar, composer and transcript each carry their own fill
   and shadow, so the piece floats straight on the page background. */
.paa-canvas {
  position: relative;
  width: 1200px;
  height: 460px;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
}

/* Panel surfaces are matched to the #pitaraRecording piece below the Download
   button (APP_CARD / APP_LINE in pitara-motion.js) so the two motions read as
   the same product rather than two different apps:

     panel fill    #191D28   its floating recorder card
     panel border  #232734   every border in that piece
     inset field   #232734   see .paa-input

   The imported design's own values were #1b1e30 / #1c1f31 fills with #2b2f45,
   #363b52 and #4a5170 borders. Change these four together or the piece goes
   back to looking like a different app. */

/* --- Floating toolbar: suggest-questions + role picker ------------------- */
.paa-toolbar {
  position: absolute;
  left: 48px;
  top: 96px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #191d28;
  border: 1px solid #232734;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.paa-grip {
  display: grid;
  grid-template-columns: 3px 3px;
  gap: 3px;
  opacity: 0.5;
}

.paa-grip i {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #9aa3c0;
}

.paa-pill {
  padding: 10px 40px;
  border-radius: 999px;
  background: #a8c7fa;
  color: #0f1a2e;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.paa-role {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #3a3f58;
  color: #e8eaf4;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Composer ------------------------------------------------------------ */
.paa-composer {
  position: absolute;
  left: 22px;
  bottom: 60px;
  width: 660px;
  box-sizing: border-box;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: #191d28;
  border: 1px solid #232734;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.paa-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.paa-bp {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dfe3f2;
  font-size: 15px;
  font-weight: 700;
}

.paa-effort {
  display: flex;
  align-items: center;
  gap: 16px;
}

.paa-effort-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #b9bed6;
  font-size: 14px;
  font-weight: 600;
}

.paa-effort-label span {
  color: #7d84a0;
  font-size: 13px;
  font-weight: 400;
}

.paa-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.paa-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4b5170;
  flex: 0 0 auto;
}

/* Top of the range reads as the premium step even when unselected. */
.paa-dot--max {
  background: #8a6cf0;
}

.paa-dot--on {
  width: 13px;
  height: 13px;
  background: #eef1fb;
}

/* The palette's own card-to-control step (#191D28 -> #1A1E29) is a 1-unit
   difference, which would make the field vanish inside the card. #232734 is
   the next tone up in that piece and lands within a point or two of the
   original design's field-to-card contrast. */
.paa-input {
  position: relative;
  margin-top: 16px;
  min-height: 96px;
  padding: 16px 18px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #232734;
}

.paa-input-text {
  display: flex;
  align-items: center;
  min-height: 22px;
  color: #eef1fb;
  font-size: 19px;
}

.paa-input-text [hidden] {
  display: none;
}

.paa-placeholder {
  color: #6b7192;
}

.paa-caret {
  display: inline-block;
  width: 2px;
  height: 22px;
  margin-left: 2px;
  background: #a8c7fa;
  animation: paaCaretBlink 1.1s steps(1) infinite;
}

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

.paa-input-actions {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.paa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  flex: 0 0 auto;
}

.paa-btn--attach {
  width: 38px;
  height: 38px;
  background: #2d3247;
}

.paa-btn--send {
  width: 40px;
  height: 40px;
  background: #2f6bfd;
  box-shadow: 0 6px 16px rgba(47, 107, 253, 0.45);
}

/* --- Live transcript panel ---------------------------------------------- */
.paa-transcript {
  position: absolute;
  left: 740px;
  bottom: 60px;
  width: 352px;
  box-sizing: border-box;
  padding: 16px 20px 22px;
  border-radius: 14px;
  background: #191d28;
  border: 1px solid #232734;
  box-shadow: -8px 14px 34px rgba(0, 0, 0, 0.4);
}

.paa-transcript-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.paa-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  flex: 0 0 auto;
}

.paa-wave i {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: #a8c7fa;
}

.paa-time {
  color: #dfe3f2;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.paa-pause {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.paa-pause i {
  width: 4px;
  height: 16px;
  border-radius: 1px;
  background: #c3c8dd;
}

.paa-stop {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: #c3c8dd;
  flex: 0 0 auto;
}

.paa-keep {
  margin-left: 2px;
  color: #c8cde1;
  font-size: 13px;
  white-space: nowrap;
}

.paa-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 40px;
  height: 23px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #2f6bfd;
  flex: 0 0 auto;
}

.paa-toggle i {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #ffffff;
}

.paa-transcript-body {
  margin-top: 18px;
  min-height: 210px;
  color: #b7c6e8;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.paa-transcript-caret {
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 3px;
  vertical-align: -1px;
  border-radius: 1px;
  background: #a8c7fa;
  opacity: 0.75;
}

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

/* Below this width, scaling the 1200px canvas down would render the transcript
   at ~5px. Drop the fixed canvas and stack the three panels in normal flow so
   the text stays at its authored size. Kept in sync with MOBILE_QUERY in
   login-ask-anything.js, which skips the transform at the same breakpoint. */
@media (max-width: 760px) {
  .paa-diagram {
    height: auto !important;
  }

  .paa-canvas {
    width: 100%;
    height: auto;
    padding: 16px;
    transform: none !important;
  }

  .paa-toolbar,
  .paa-composer,
  .paa-transcript {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
  }

  .paa-toolbar {
    box-sizing: border-box;
  }

  .paa-pill {
    padding: 10px 20px;
  }

  .paa-composer,
  .paa-transcript {
    margin-top: 14px;
  }

  .paa-transcript-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .paa-transcript-body {
    min-height: 0;
  }

  /* space-between pushes these two clusters together at narrow widths, which
     collides the Blueprints chevron with the Effort label and clips the gear. */
  .paa-composer-head {
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 10px;
  }

  .paa-bp,
  .paa-effort {
    flex: 0 0 auto;
  }

  .paa-effort {
    gap: 12px;
  }
}

/* Narrowest phones: the toolbar's three chips do not fit on one line. */
@media (max-width: 430px) {
  .paa-toolbar {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .paa-input {
    padding-bottom: 60px;
  }
}

/* ===========================================================================
   "Your experts are not bottleneck anymore": expert knowledge flow (.ekf-*).
   Ported from the Claude Design project "Expert knowledge sharing infographic"
   (Expert Knowledge Flow v4.dc.html). Geometry and keyframes are the design's,
   verbatim; only the keyframe names are prefixed to avoid colliding with the
   page's other animations.

   Authored at a fixed 1200x675 and fitted by login-expert-flow.js. Transparent
   like .pitara-motion--bare and .paa-canvas, so it sits on the page.

   Every animation starts PAUSED via --ekf-play. The script flips it to running
   on intersection. Do not default this to `running`: the camera move is a
   one-shot `forwards` narrative and would burn off above the fold.
   =========================================================================== */

.ekf-wrap {
  /* Back in the shared-edge group -- see --diagram-w. */
  width: var(--diagram-w);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.ekf-diagram {
  width: 100%;
  overflow: hidden;
}

.ekf-canvas {
  --ekf-glow: #ffffff;
  --ekf-play: paused;
  position: relative;
  width: 1200px;
  height: 675px;
  box-sizing: border-box;
  background: transparent;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Closes on the expert, reveals the memory, then pulls back to the whole team. */
.ekf-camera {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transform: translate(-840px, 13.5px) scale(2.4);
  will-change: transform;
  animation: ekfCamera 5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-play-state: var(--ekf-play);
}

.ekf-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ekf-spark {
  filter: drop-shadow(0 0 5px var(--ekf-glow));
}

.ekf-brain {
  filter: drop-shadow(0 0 6px var(--ekf-glow));
}

.ekf-orb {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--ekf-glow);
  box-shadow: 0 0 40px 12px var(--ekf-glow), 0 0 14px 3px #ffffff;
  animation: ekfPulse 3s ease-in-out infinite;
  animation-play-state: var(--ekf-play);
}

.ekf-label {
  position: absolute;
  z-index: 3;
  transform: translateY(-50%);
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  color: #f4f4f6;
  white-space: nowrap;
}

.ekf-label--team {
  transform: translateX(-50%);
  text-align: center;
}

/* The four present members slide 25px left so all five stay symmetric about
   the centre line once the newcomer docks. */
.ekf-squares {
  position: absolute;
  inset: 0;
  z-index: 3;
  animation: ekfShift 1.2s cubic-bezier(0.4, 0, 0.2, 1) 7s forwards;
  animation-play-state: var(--ekf-play);
}

.ekf-square {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: #efeff1;
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.4);
}

.ekf-square--new {
  z-index: 3;
  opacity: 0;
  animation: ekfRise 1.4s cubic-bezier(0.34, 1.3, 0.64, 1) 7s forwards;
  animation-play-state: var(--ekf-play);
}

@keyframes ekfPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.95;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.16);
    opacity: 1;
  }
}

@keyframes ekfRise {
  0% {
    transform: translate(-50%, 240px);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes ekfCamera {
  0% {
    transform: translate(-840px, 13.5px) scale(2.4);
  }
  18% {
    transform: translate(-840px, 13.5px) scale(2.4);
  }
  52% {
    transform: translate(-420px, -53.5px) scale(1.7);
  }
  66% {
    transform: translate(-420px, -53.5px) scale(1.7);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes ekfShift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25px);
  }
}

/* Reduced motion: the script parks the camera at its end state and freezes the
   SMIL timeline past the 9.4s mark, so the settled diagram is what shows. */
@media (prefers-reduced-motion: reduce) {
  .ekf-camera,
  .ekf-orb,
  .ekf-squares,
  .ekf-square--new {
    animation: none;
  }

  .ekf-camera {
    transform: none;
  }

  .ekf-squares {
    transform: translateX(-25px);
  }

  .ekf-square--new {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Data privacy flow diagram (.dflow-*)

   Port of the Claude Design file "Pitara Data Flow.dc.html". The source is a
   fixed 1760x1240 canvas of absolutely-positioned boxes, so this reproduces
   those design pixels exactly and the inline script in login.html scales the
   whole stage to the column. Do not convert these to responsive units: the
   SVG connector paths are drawn in the same coordinate space, so any box that
   moves independently detaches from its arrow.

   Fonts resolve to installed faces rather than the source's Archivo +
   JetBrains Mono. This page loads no webfonts, and a third-party font request
   would sit badly next to a privacy diagram.
   ═══════════════════════════════════════════════════════════════════════════ */

.dflow-wrap {
  /* Width comes from --diagram-w, shared with .paa-wrap, .ekf-wrap and the
     motion pieces. (.ppi-wrap belonged to the diagram this one replaced and no
     longer renders; its ~44 orphaned rules are still in this file.) */
  width: var(--diagram-w);
  margin: clamp(16px, 3vw, 32px) auto 0;
  padding: 0;
  position: relative;
  /* This is the diagram's real bounding box: the stage inside it is a fixed
     1760px canvas that gets transform-scaled, so it overflows and this is what
     clips it. Rounding here therefore rounds the whole piece -- including the
     glow layer, which is the only thing that still reaches the edges now the
     canvas fill is transparent. 20px matches the radius the design file uses
     on its own canvas, and it is applied at real pixels rather than design
     pixels so it does not shrink with the scale factor. */
  overflow: hidden;
  border-radius: 20px;
  box-sizing: border-box;
}

.dflow-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1760px;
  height: 1240px;
  transform-origin: 0 0;
  /* No canvas fill. The design file paints #08080A because it renders on its
     own page; here the diagram sits on the landing background, and a near-
     black rectangle over a near-black page just reads as a seam. The cards
     keep their own #101014 fill, so the boxes still separate from the page. */
  background: transparent;
  overflow: hidden;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.dflow-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 45% at 12% 0%, rgba(185, 166, 242, 0.12) 0%, transparent 58%),
    radial-gradient(70% 40% at 100% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 62%);
}

.dflow-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1760px;
  height: 1240px;
  overflow: visible;
}

/* The three dashed column outlines. */
.dflow-zone {
  position: absolute;
  border: 1.5px dashed #33333F;
  border-radius: 20px;
}

.dflow-zone-label {
  position: absolute;
  text-align: center;
  font: 500 22px/1 ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.22em;
  color: #7A756C;
  text-transform: uppercase;
}

.dflow-zone-label--accent {
  color: #B9A6F2;
}

.dflow-card {
  position: absolute;
  box-sizing: border-box;
  background: #101014;
  border: 1.5px solid #3B3B48;
  border-radius: 16px;
}

/* Only the three "actor" cards carry a shadow in the source; the storage and
   processing cards sit flat. */
.dflow-card--lift {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.dflow-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dflow-kicker {
  font: 500 17px/1 ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
  color: #7A756C;
  text-transform: uppercase;
}

.dflow-tag {
  font: 400 17px/1 ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  color: #B9A6F2;
}

.dflow-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #F4F1EA;
  margin-top: 12px;
}

.dflow-title--lg { font-size: 34px; }
.dflow-title--sm { font-size: 28px; }

.dflow-sub {
  font-size: 21px;
  line-height: 1.5;
  color: #7A756C;
  margin-top: 6px;
}

.dflow-body {
  font-size: 21px;
  line-height: 1.4;
  color: #C9C4B8;
  margin-top: 10px;
}

.dflow-note {
  position: absolute;
  font-size: 21px;
  line-height: 1.4;
  color: #7A756C;
}

.dflow-note--center { text-align: center; }

.dflow-note-em {
  color: #B9A6F2;
  font-weight: 600;
}

/* Edge labels. --bare drops the chip so the label reads as free text on the
   connector rather than as a node. */
.dflow-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: #0E0E12;
  border: 1.5px solid #3B3B48;
  border-radius: 999px;
}

.dflow-pill--bare {
  padding: 0;
  background: transparent;
  border: 0;
}

.dflow-pill-text {
  font: 400 19px/1 ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  color: #C9C4B8;
}

.dflow-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #7A756C;
  flex: 0 0 auto;
}

.dflow-dot--accent { background: #B9A6F2; }

.dflow-callout {
  position: absolute;
  box-sizing: border-box;
  padding: 22px 26px;
  background: #0E0E12;
  border: 1.5px solid #3B3B48;
  border-radius: 14px;
  font-size: 22px;
  line-height: 1.45;
  color: #C9C4B8;
}

.dflow-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 20px;
}

.dflow-list-name {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: #F4F1EA;
}

.dflow-list-role {
  font-size: 20px;
  line-height: 1.4;
  color: #7A756C;
  margin-top: 3px;
}

.dflow-mark {
  position: absolute;
  left: 40px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dflow-mark img { display: block; }

.dflow-mark span {
  font: 500 20px/1 inherit;
  letter-spacing: 0.22em;
  color: #57525A;
  text-transform: uppercase;
}

/* FAQ, parked at the end of the scroll after the download strip. The
   .privacy-faq-* rules that style the accordion itself live with the privacy
   section further up this file and are shared -- this only positions the
   block now that it is a section of its own rather than a child of
   #landing-privacy. */
.landing-faq {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) 20px clamp(48px, 7vw, 96px);
  box-sizing: border-box;
}

.landing-faq .video-title {
  text-align: center;
  margin-bottom: clamp(16px, 2.5vw, 28px);
}

.landing-faq .privacy-faq {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING LAYOUT RHYTHM

   One place for the landing page's vertical spacing and its side gutters.
   Declared last so these win over the per-component values further up the
   file, which had drifted: some headings carried `padding-top: 80px` ON TOP of
   the container's 76px gap (so those sections sat ~156px apart while their
   neighbours sat at 76px), sub-headings used 20px in one place and 12px in
   another, and the media wrappers ranged from 0 to 32px of top margin.

   Three variables, nothing else:
     --sec-gap    between top-level sections
     --sub-gap    within a section, and between blocks in the hero column
     --head-gap   heading -> sub-heading

   Change the scale here; do not reintroduce one-off margins on components.
   ═══════════════════════════════════════════════════════════════════════════ */

.login-page {
  --sec-gap: clamp(64px, 7vw, 104px);
  --sub-gap: clamp(20px, 2.6vw, 36px);
  --head-gap: 14px;

  /* Inside padding of every dark band -- the distance from the band's edge to
     the content it holds. ONE value for all bands, regardless of how far apart
     their surrounding sections happen to sit. It used to be derived from each
     band's own container gap (half of --sec-gap for section bands, half of
     --sub-gap for the hero band), which meant "Your meetings do not go to a
     transcription company" sat 52px below its band edge while "Turn rough
     notes" sat 18px below its own. Same band, visibly different inset. */
  --band-pad: clamp(24px, 2.6vw, 36px);

  /* One width for every diagram and motion piece on the page, so they share
     left and right edges down the whole scroll. Each piece derives its own
     height from its measured width (the motion stages are 4:5, the data-flow
     canvas is 1760x1240, the expert flow crops an 800x511 window), so setting
     the width is all that is needed -- the aspect ratios take care of
     themselves. */
  --diagram-w: min(920px, 100%);

  /* Side gutters. The sign-in panel is fixed bottom-right at this width, so
     matching it keeps the content column symmetric AND clear of the panel
     instead of running underneath it. Applied only once the viewport is wide
     enough to spare 2x the gutter; below that the panel stops being a side
     card and the content needs the room. */
  --login-panel-w: 360px;
}

/* ── vertical rhythm ────────────────────────────────────────────────────── */

.video-section-inner {
  gap: var(--sec-gap);
}

/* These three each added 80px on top of the container gap. Zeroed: the gap is
   now the single source of separation between sections. */
.video-section-hero > .video-section-hero-line,
.video-section-intro-block .video-section-hero > .video-section-hero-line,
.video-section-hero-what-block .video-section-hero > .video-section-hero-line {
  padding-top: 0;
}

.video-section-hero .video-section-hero-tagline {
  padding-top: var(--head-gap);
}



/* Blocks inside the hero column (motion pieces, copy blocks, the backline). */
.video-section-hero-what-block {
  gap: var(--sub-gap);
}

/* The recording piece used to be pulled back against the copy under it with a
   -50px margin that cancelled the old 50px container gap. Removed: a one-off
   negative margin is the opposite of a consistent rhythm, and --sub-gap is
   already tighter than the 50px it was fighting. */
.pitara-motion-frame + .video-section-hero--meetings {
  margin-top: 0;
}

/* Media wrappers: one value for heading-block -> artwork, everywhere. */
.dflow-wrap,
.ekf-wrap,
.paa-wrap {
  margin-top: var(--sub-gap);
}

.privacy-honesty {
  margin-top: var(--sub-gap);
}

.privacy-cta {
  margin-top: var(--sub-gap);
}

.landing-faq {
  padding-top: 0;
  padding-bottom: var(--sec-gap);
}

.landing-faq .video-title {
  margin-bottom: var(--sub-gap);
}

/* ── side gutters ───────────────────────────────────────────────────────── */

/* Gutter = the sign-in panel's width, so the column is symmetric and clears
   the fixed panel instead of running under it.

   The min()/max() pair is a floor, not a compromise: a flat 360px gutter is
   720px of the viewport, which at 1180px wide would leave a 460px column and
   scale the 1760px data-flow canvas down to unreadable. So the gutter grows
   with the viewport and stops at the panel width, never taking the column
   below 640px. It reaches the full 360px from about 1360px up, which covers
   every desktop size this page is actually read at.

   Below 1024px a separate block further up sets a 20px padding shorthand and
   the panel stops being a side card, so this starts at 1025px. */
@media (min-width: 1025px) {
  .video-section {
    --video-section-pad-x: min(
      var(--login-panel-w),
      max(20px, calc((100vw - 640px) / 2))
    );
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE: collapsed sign-in panel

   Below 768px the panel is a fixed overlay at full card height, which covered
   most of a phone screen behind the content people came to read. It now starts
   as a pill showing only its label; tapping expands the card, tapping the
   backdrop (or Escape) collapses it again.

   Desktop is untouched -- there the panel is draggable and expands on hover,
   handled by the --expanded class further up this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden by default: this trigger exists only for the narrow layout. */
.login-panel-toggle {
  display: none;
}

@media (max-width: 767px) {
  .login-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(18, 18, 22, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    color: #f4f1ea;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .login-panel-toggle__chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
  }

  /* Collapsed: only the pill shows, and the card is removed from the layout
     and the accessibility tree rather than merely hidden. */
  .login-floating-panel--mobile-collapsed .login-container {
    display: none;
  }

  .login-floating-panel:not(.login-floating-panel--mobile-collapsed) .login-panel-toggle__chevron {
    transform: rotate(180deg);
  }

  /* Expanded: the pill stays as the close affordance above the card. */
  .login-floating-panel:not(.login-floating-panel--mobile-collapsed) .login-panel-toggle {
    margin-bottom: 10px;
  }

  /* Backdrop, so a tap anywhere off the panel closes it. Only present while
     expanded; the panel itself sits above it on z-index. */
  .login-panel-scrim {
    position: fixed;
    inset: 0;
    z-index: 43;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Expanded card can be taller than the screen on small phones, so let it
     scroll rather than run off the top. */
  .login-floating-panel:not(.login-floating-panel--mobile-collapsed) .login-container {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ── Mobile: slim the top nav to one line ───────────────────────────────────
   At phone widths the bar was wrapping onto three lines -- logo, the link row,
   then Download on its own. Both of the items dropped here are redundant on
   this page rather than merely inconvenient:

     * the brand link only scrolls to #landing-top, which is where a phone
       visitor already starts, and
     * Download duplicates the hero's own Download button a few hundred pixels
       below it, plus the "Get Pitara" strip at the end of the scroll.

   That leaves Features / Privacy / Pricing / Resources, which fits one line.
   Kept at the same 767px boundary as the collapsed sign-in panel so the two
   mobile behaviours switch together. */
@media (max-width: 767px) {
  .login-top-nav-brand,
  .login-top-nav-download {
    display: none;
  }

  /* The brand was the flex item holding the left edge; without it the link row
     is the only child, so centre it rather than letting it hug one side. */
  .login-top-nav-inner {
    justify-content: center;
  }

  .login-top-nav-links {
    justify-content: center;
    flex-wrap: nowrap;
  }
}

/* ── Alternating section bands ──────────────────────────────────────────────
   A darker full-bleed band behind every other section, so the boundaries read
   without needing extra whitespace.

   Painted as a ::before rather than a background on the section itself, for
   two reasons:

     1. The band has to span the whole scroll width, but the sections sit
        inside the page's side gutters (up to 360px each). The pseudo-element
        breaks out with negative left/right equal to that padding; a plain
        background would stop at the column.
     2. The full-bleed alternative -- negative margins plus compensating
        padding -- would fight the sections that centre themselves with
        `max-width` and `margin: 0 auto` (.landing-faq does exactly that).
        This touches no layout at all.

   nth-child(even) banks the 2nd, 4th and 6th children: the privacy section,
   Features, and the FAQ. The hero is deliberately first-and-unbanded, so the
   top of the page stays flat.

   The band is grown by half the section gap top and bottom so it reads as a
   region containing the section, not a box wrapped tightly around it. Half,
   not the whole gap, so two adjacent bands could never touch if the
   alternation is ever changed. */
.video-section-inner > *:nth-child(even) {
  position: relative;
}

.video-section-inner > *:nth-child(even)::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  top: calc(var(--band-pad) * -1);
  bottom: calc(var(--band-pad) * -1);
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── Banded groups inside the hero column ───────────────────────────────────
   A heading and the piece it introduces are one section visually, so the band
   has to span both siblings. `.hero-band` is a wrapper that exists only to
   give the pair a single box to paint behind; it reproduces the parent's
   column layout so nothing about the spacing changes.

   FULL WIDTH: these sit inside three nested paddings (the scroll container's
   gutter, the hero column, and the what-block's own 16px), so subtracting
   them one by one would be fragile. `left: 50%; width: 100vw; margin-left:
   -50vw` ignores all of it and spans the viewport. Safe here because
   .video-section is `overflow: hidden auto` -- the x axis is clipped, so the
   band can never introduce a horizontal scrollbar, and any overshoot past the
   container is simply cut off. */
.hero-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sub-gap);
  width: 100%;
}

.hero-band::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  /* The band used to extend a full --sub-gap up and down, which put its edge
     flush against the bottom of the block above ("Capture Audio, Notes and
     Transcript") with nothing between them. Pulling back by 20px leaves that
     much clear air on each side, so the band reads as a separate region
     rather than as a box butted against its neighbours.

     Applied to both edges, not just the top: an asymmetric band looks like a
     mistake even when only one side was the problem. --sub-gap floors at
     20px, so at narrow widths this resolves to 0 and the band simply hugs its
     own content instead of going negative. */
  /* Half the surrounding gap, top and bottom. That single choice makes all
     four measurements equal: the band sits at the midpoint of the gap, so the
     clear air above it equals the padding below its edge, and the same holds
     at the bottom. Matches the formula the section bands use. */
  top: calc(var(--band-pad) * -1);
  bottom: calc(var(--band-pad) * -1);
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── Statement type ─────────────────────────────────────────────────────────
   The typography of "Has your back before, during & after every meeting."
   lifted onto the headings that make a claim in the same voice:

     * Turn rough notes into something clear.
     * Your meetings do not go to a transcription company
     * Canvas for Brainstorming

   Deliberately a modifier rather than a change to .video-section-hero-line:
   that class is also worn by "Join meetings without any awkward bot",
   "Real-time insights" and "Your experts are not bottleneck anymore", which
   keep the smaller size.

   Type only. The backline's own margin, max-width and padding stay with it --
   those are its position in the hero column, not its voice. Equal specificity
   to .video-section-hero-line, so this wins by being later in the file; if
   these rules are ever moved above it, they stop applying. */
.video-section-hero-backline,
.video-section-hero-line--statement {
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #f9fafb;
}

/* ── Band symmetry ──────────────────────────────────────────────────────────
   Both band types inset by half the surrounding gap, which puts the band edge
   at the midpoint between two sections. That yields equal spacing in all four
   directions -- above the band, below its top edge, above its bottom edge,
   and below the band -- but only if the banded element itself contributes no
   vertical margin or padding of its own. Two did:

     * .landing-faq carried `padding-bottom: var(--sec-gap)` with no matching
       top, so its band sat 1.5x lower at the bottom than at the top. The
       spacing it provided is redundant anyway: .video-section already reserves
       a large bottom padding to clear the fixed sign-in panel.
     * #landing-features (.promo-section) carried `margin-top: 32px`, which
       widened the gap above it without widening the one below, so the band
       looked shifted down.

   Zeroed here for banded children only, so unbanded sections keep whatever
   spacing they were given. Vertical rhythm now comes from the container gap
   alone, which is the point of the rhythm scale. */
.video-section-inner > *:nth-child(even),
.hero-band {
  /* The band extends --band-pad beyond the border box, so the element carries
     the same value as margin: that puts the band's edge exactly on its margin
     box and guarantees it can never reach into the block above or below,
     whatever the surrounding gap happens to be. padding-block is zeroed so a
     section's own vertical padding cannot make its band lopsided (.landing-faq
     had a bottom-only padding, #landing-features a top-only margin). */
  margin-block: var(--band-pad);
  padding-block: 0;
}

/* ── Step rail ──────────────────────────────────────────────────────────────
   Fixed dot-and-line progress indicator on the left. One dot per [data-step]
   section; login-step-rail.js builds the list and tracks the active one.

   Sits in the left gutter, which is why it only appears once that gutter is
   wide enough to hold it (the gutter is the sign-in panel's width, and below
   1180px the column needs the room). Fixed rather than absolute so it stays
   put while .video-section scrolls underneath it. */
.step-rail {
  display: none;
}

@media (min-width: 1180px) {
  .step-rail {
    display: block;
    position: fixed;
    left: clamp(24px, 3.2vw, 56px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    pointer-events: auto;
  }
}

.step-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Dots only -- no connecting line, no visible labels. The section name lives
   on each button as an aria-label so the rail is still navigable without
   sight of it. */
.step-rail-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.step-rail-dot {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  /* --p is the 0..1 scroll progress through this dot's section, written by
     login-step-rail.js. */
  --p: 0;
  background: rgba(255, 255, 255, 0.32);
  transition: background 0.2s ease, transform 0.2s ease;
  flex: 0 0 auto;
}

/* Sections already read stay solid, so the rail still shows how far through
   the page you are at a glance. */
.step-rail-item.is-passed .step-rail-dot {
  background: #ffffff;
}

.step-rail-dot:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.25);
}

/* The active dot reports progress through its OWN section by how brightly it
   glows: --p drives the alpha, radius and spread of both shadow layers, so
   the light swells as the reader moves through the section and is at its
   fullest just before the next dot takes over.

   Two stacked layers rather than one: a tight bloom for the core and a wider,
   fainter one for falloff. A single large shadow at this opacity reads as a
   grey ring against the dark page instead of as light.

   Alphas are written with the space/slash colour syntax because it takes a
   calc() in the alpha channel, which the legacy rgba(r, g, b, a) form does
   not do reliably. */
.step-rail-item.is-active .step-rail-dot {
  background: #ffffff;
  transform: scale(1.35);
  box-shadow:
    0 0 calc(3px + var(--p) * 7px) calc(0.5px + var(--p) * 1.5px)
      rgb(255 255 255 / calc(0.18 + var(--p) * 0.47)),
    0 0 calc(8px + var(--p) * 14px) calc(1px + var(--p) * 5px)
      rgb(255 255 255 / calc(0.04 + var(--p) * 0.14));
}

.step-rail-dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .step-rail-dot {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V5 SECTIONED LANDING (login.html)

   Everything below the hero is a run of .feat sections: text | visual |
   small picture-in-picture demo tile, with the column order flipping on
   every other section (.feat--flip). Additive block: /v4.html (the archived
   pre-sectioned page) shares this stylesheet and uses none of these classes.

   Layout ladder, driven by the content column (viewport minus the side
   gutters that clear the fixed sign-in panel):
     <1100px   stacked: text, visual, demo
     >=1100px  two columns: text (demo tucked under it) | visual, flipped on
               .feat--flip
     >=1600px  the full three-in-a-row: text | visual | demo (flipped:
               demo | visual | text)
   ═══════════════════════════════════════════════════════════════════════════ */

.feat {
  width: 100%;
  max-width: min(1320px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "visual" "demo";
  row-gap: var(--sub-gap);
  column-gap: clamp(20px, 3vw, 48px);
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  /* One shared floor: every section except Rough notes (whose content is
     ~800px tall and exceeds it) renders at exactly this height at desktop
     widths. align-content centers the content in the extra space. */
  min-height: 650px;
  align-content: center;
}

.feat-text {
  grid-area: text;
  min-width: 0;
  text-align: center;
  max-width: 640px;
}

.feat-visual {
  grid-area: visual;
  min-width: 0;
  width: 100%;
}

.feat-demo {
  grid-area: demo;
  min-width: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Sections without a demo tile: drop the demo row from the template, or the
   empty explicit row would still contribute a row-gap of phantom space. */
.feat--no-demo {
  grid-template-areas: "text" "visual";
}

/* ── Click-to-play demo videos ──────────────────────────────────────────────
   A .pip tile with data-demo-video is a real <button>; clicking it swaps the
   section's visual for the pre-placed player in the same column
   (login-demo-video.js). button.pip resets UA button chrome; every visual
   property comes from .pip itself. */
/* Platform availability line under the hero download pill. */
.hero-download-platforms {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #8d93ae;
  text-align: center;
}

/* The simple "Watch demo" button (replaced the clickable pip tiles). */
.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(185, 166, 242, 0.5);
  background: rgba(185, 166, 242, 0.1);
  color: #e7e2f8;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.demo-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: currentColor;
}
.demo-btn:hover {
  background: rgba(185, 166, 242, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.demo-btn:focus-visible {
  outline: 2px solid #B9A6F2;
  outline-offset: 3px;
}

/* The player is an OVERLAY over the whole section: opening it reflows
   nothing. The pip button morphs into the .feat-demo-box via a FLIP
   transform computed in login-demo-video.js (start state = the box
   transformed onto the pip's rect, then transitioned to identity), while
   the scrim fades in over the section content behind it. */
.feat {
  position: relative;
}
.feat-demo-player {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat-demo-scrim {
  /* Invisible click-away layer only: no darkening behind the video -- the
     card floats straight over the still-visible section content. */
  position: absolute;
  inset: 0;
}
.feat-demo-box {
  position: relative;
  z-index: 1;
  /* 95% of the section's height, capped so the player always fits on
     screen (sections are double-height and can exceed the viewport). Width
     follows the video's aspect, carried as --demo-ar inline per section so
     the box has correct geometry BEFORE the video's metadata loads (the
     FLIP morph measures it at open time). */
  height: min(95%, 92vh);
  max-width: 96%;
  aspect-ratio: var(--demo-ar, 3 / 2);
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b0e;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Bottom-weighted shadow instead of a scrim. */
  box-shadow: 0 34px 70px -18px rgba(0, 0, 0, 0.8), 0 12px 28px rgba(0, 0, 0, 0.4);
  transform-origin: top left;
  transition: transform 0.38s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.26s ease;
  will-change: transform;
}
.feat-demo-box video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Section whose video file is not uploaded yet: the note replaces the
   empty player surface (login-demo-video.js flips these on video error). */
.feat-demo-box--missing video {
  display: none;
}
.feat-demo-missing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
  text-align: center;
  font-size: 15px;
  color: #9ca3af;
}
.feat-demo-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 10, 14, 0.72);
  color: #f4f1ea;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat-demo-close:hover {
  background: rgba(30, 30, 40, 0.9);
}
@media (prefers-reduced-motion: reduce) {
  .feat-demo-box {
    transition: none;
  }
}

@media (min-width: 1100px) {
  .feat {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
    grid-template-areas:
      "text visual"
      "demo visual";
    justify-items: stretch;
  }
  .feat--flip {
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    grid-template-areas:
      "visual text"
      "visual demo";
  }
  .feat-text {
    text-align: left;
    max-width: none;
  }
  /* Flipped sections put the text column at the content column's right edge,
     and the fixed sign-in panel (right: 12px at the panel's own 360px width)
     reaches ~12px INTO that edge -- the gutter formula floors the content at
     640px, so it cannot fully clear the panel on narrower desktops. This
     padding keeps line ends out of that sliver. */
  .feat--flip .feat-text {
    padding-right: 20px;
    box-sizing: border-box;
  }
  .feat-demo {
    justify-content: flex-start;
    align-self: start;
  }
  .feat--no-demo {
    grid-template-areas: "text visual";
  }
  .feat--no-demo.feat--flip {
    grid-template-areas: "visual text";
  }
}

@media (min-width: 1600px) {
  /* Wide screens: the demo tile stays tucked under the text (areas inherit
     from the 1100px block), and the third column it used to occupy goes to
     the visual instead. */
  .feat {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2.6fr);
  }
  .feat--flip {
    grid-template-columns: minmax(0, 2.6fr) minmax(260px, 1fr);
  }
}

.feat-head {
  margin: 0;
  font-size: clamp(26px, 2.9vw, 42px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #f9fafb;
}

.feat-tag {
  margin: var(--head-gap) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #9ca3af;
}

.feat-body {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #c3c7d4;
}

/* The moved pieces derived their top margin from the old heading-above-piece
   stacking; inside a .feat row the grid gap owns the spacing. */
.feat-visual > .paa-wrap,
.feat-visual > .ekf-wrap {
  margin-top: 0;
  width: 100%;
}

.feat-visual > .pitara-motion-frame {
  width: 100%;
}

/* The motion stage is 1080x1350 (4:5): uncapped it would fill the visual
   column and tower over the row, so cap the mount and let the frame's own
   justify-content centre it. */
.feat-visual .pitara-motion {
  max-width: 640px;
}

/* Scroll reveal: same treatment .video-section-intro-block gets (the reveal
   selectors in login-landing-effects.js include .feat). */
body.login-landing-effects-on .video-section .feat {
  opacity: 0;
  transform: translate3d(0, 44px, -36px) scale(0.92) rotateX(5deg);
  transform-origin: 50% 0%;
  transition: opacity 0.88s cubic-bezier(0.2, 0.85, 0.2, 1), transform 0.88s cubic-bezier(0.22, 1, 0.36, 1);
}
body.login-landing-effects-on .video-section .feat.login-depth-revealed {
  opacity: 1;
  transform: translate3d(0, var(--login-reveal-y, 0px), 0) scale(1) rotateX(0deg);
}
@media (prefers-reduced-motion: reduce) {
  body.login-landing-effects-on .video-section .feat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Static mock visuals (sections without a ported motion piece) ─────────── */

.aska, .onbv, .taskv, .survv, .memv, .canvv {
  width: min(760px, 100%);
  margin: 0 auto;
  box-sizing: border-box;
  background: linear-gradient(165deg, rgba(32, 32, 42, 0.92), rgba(15, 15, 20, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: clamp(18px, 2.6vw, 28px);
  text-align: left;
  color: #e8e6f0;
}

/* Ask anything */
.aska-q {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  font-weight: 600;
  color: #f4f1ea;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.aska-q span { min-width: 0; }
.aska-caret {
  flex: none;
  width: 2px;
  height: 1.1em;
  background: #B9A6F2;
  animation: askaBlink 1.1s steps(1) infinite;
}
@keyframes askaBlink { 50% { opacity: 0; } }
.aska-a {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(185, 166, 242, 0.08);
  border: 1px solid rgba(185, 166, 242, 0.25);
}
.aska-a p { margin: 0; font-size: 14px; line-height: 1.6; color: #d9d6e6; }
.aska-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aska-sources span {
  font-size: 11px;
  color: #b6bad0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Onboarding: folder of docs -> structured doc */
.onbv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.onbv-src { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.onbv-folder { font-size: 12px; font-weight: 700; color: #B9A6F2; letter-spacing: 0.02em; }
.onbv-file {
  font-size: 12px;
  color: #c3c7d4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 6px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onbv-arrow { width: 22px; height: 22px; color: #8d93ae; flex: none; }
.onbv-doc {
  border: 1px solid rgba(185, 166, 242, 0.35);
  background: rgba(185, 166, 242, 0.07);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.onbv-doc-title { font-size: 13px; font-weight: 700; color: #f4f1ea; }
.onbv-sec {
  font-size: 12px;
  color: #d9d6e6;
  border-left: 2px solid rgba(185, 166, 242, 0.6);
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Task management: summary action items with push state */
.taskv { display: flex; flex-direction: column; gap: 10px; }
.taskv-head { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #9ca3af; }
.taskv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13.5px;
  color: #d9d6e6;
}
.taskv-item i {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  position: relative;
  box-sizing: border-box;
}
.taskv-item--done i { background: #B9A6F2; border-color: #B9A6F2; }
.taskv-item--done i::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid #17131f;
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}
.taskv-item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taskv-item--done span { color: #8d93ae; }
.taskv-item b { flex: none; font-size: 11px; font-weight: 600; font-style: normal; padding: 4px 9px; border-radius: 999px; }
.taskv-item--done b {
  color: #b9a6f2;
  border: 1px solid rgba(185, 166, 242, 0.4);
  background: rgba(185, 166, 242, 0.1);
}
.taskv-item:not(.taskv-item--done) b { color: #0f0e14; background: #B9A6F2; }

/* Company surveys: goal + response bars */
.survv { display: flex; flex-direction: column; gap: 10px; }
.survv-goal { font-size: 12px; color: #9ca3af; }
.survv-q { font-size: 15px; font-weight: 600; color: #f4f1ea; margin-bottom: 4px; }
.survv-row {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #c3c7d4;
}
.survv-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.survv-row i {
  display: block;
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(90deg, #B9A6F2, #8f7ad9);
  width: var(--w, 50%);
  min-width: 8px;
}
.survv-row b { font-size: 12px; color: #e8e6f0; font-weight: 600; }
.survv-note { margin-top: 6px; font-size: 11.5px; color: #8d93ae; }

/* Multiple memories: spaces with toggles */
.memv { display: flex; flex-direction: column; gap: 10px; }
.memv-space {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.memv-space b { font-size: 13.5px; color: #f4f1ea; font-weight: 600; white-space: nowrap; }
.memv-space span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: #8d93ae;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memv-space i {
  flex: none;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
}
.memv-space i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #8d93ae;
}
.memv-space--on { border-color: rgba(185, 166, 242, 0.4); background: rgba(185, 166, 242, 0.07); }
.memv-space--on i { background: rgba(185, 166, 242, 0.65); }
.memv-space--on i::after { left: 15px; background: #0f0e14; }
.memv-note { font-size: 11.5px; color: #8d93ae; margin-top: 2px; }

/* Canvas fallback (no hero video configured) */
.canvv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.canvv-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
  color: #9ca3af;
  min-height: 86px;
  justify-content: flex-end;
}
.canvv-card--img i {
  display: block;
  flex: 1 1 auto;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(185, 166, 242, 0.5), rgba(90, 140, 220, 0.4));
  min-height: 40px;
}
.canvv-line { display: block; height: 6px; border-radius: 3px; background: rgba(244, 241, 234, 0.3); }
.canvv-line--short { width: 60%; }
.canvv-card--code b { font-family: monospace; font-size: 16px; color: #B9A6F2; font-style: normal; }

/* ── Picture-in-picture demo tiles ──────────────────────────────────────────
   One small looping tile per section: window chrome with a blinking rec dot
   and a "demo" tag, then a CSS-only animated vignette of the feature.
   Decorative (role="img" with a label; internals aria-hidden). */

.pip {
  width: min(170px, 100%);
  border-radius: 14px;
  background: rgba(14, 14, 19, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: block;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pip:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
}
.pip-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pip-chrome i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.pip-chrome b {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d93ae;
}
.pip-chrome b::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e0565b;
  animation: pipRec 1.6s ease infinite;
}
@keyframes pipRec { 50% { opacity: 0.25; } }
.pip-stage {
  position: relative;
  display: block;
  height: 100px;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

/* notes: scribbles straighten into clean lines */
.pip--notes .pip-stage { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.pip--notes .pip-stage i {
  height: 8px;
  border-radius: 4px;
  width: 88%;
  background: rgba(244, 241, 234, 0.3);
  transform-origin: left center;
  animation: pipNotes 7s ease-in-out infinite;
}
.pip--notes .pip-stage i:nth-child(1) { --rw: 0.72; --rr: -2deg; }
.pip--notes .pip-stage i:nth-child(2) { --rw: 0.48; --rr: 1.5deg; animation-delay: 0.15s; }
.pip--notes .pip-stage i:nth-child(3) { --rw: 0.6; --rr: -1deg; animation-delay: 0.3s; }
@keyframes pipNotes {
  0%, 30% { transform: scaleX(var(--rw)) rotate(var(--rr)); background: rgba(244, 241, 234, 0.3); }
  46%, 84% { transform: scaleX(1) rotate(0deg); background: rgba(185, 166, 242, 0.8); }
  100% { transform: scaleX(var(--rw)) rotate(var(--rr)); background: rgba(244, 241, 234, 0.3); }
}

/* coach: transcript lines + a suggestion pill that pops in */
.pip--coach .pip-stage { display: flex; flex-direction: column; gap: 11px; }
.pip--coach .pip-stage i { height: 6px; border-radius: 3px; background: rgba(244, 241, 234, 0.22); animation: pipCoachLine 3s ease infinite; }
.pip--coach .pip-stage i:nth-child(1) { width: 78%; }
.pip--coach .pip-stage i:nth-child(2) { width: 58%; animation-delay: 0.4s; }
.pip--coach .pip-stage i:nth-child(3) { width: 68%; animation-delay: 0.8s; }
@keyframes pipCoachLine { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.pip--coach .pip-stage b {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font-size: 10px;
  font-weight: 600;
  font-style: normal;
  color: #0b0b0c;
  background: #B9A6F2;
  border-radius: 999px;
  padding: 5px 9px;
  text-align: center;
  transform: translateY(30px);
  opacity: 0;
  animation: pipCoach 6s ease infinite;
}
@keyframes pipCoach {
  0%, 25% { transform: translateY(30px); opacity: 0; }
  38%, 80% { transform: translateY(0); opacity: 1; }
  92%, 100% { transform: translateY(30px); opacity: 0; }
}

/* share: a hub pulses knowledge out to team squares */
.pip--share .pip-stage i:nth-child(1) {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: #B9A6F2;
  box-shadow: 0 0 12px rgba(185, 166, 242, 0.8);
}
.pip--share .pip-stage b {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  border: 1px solid rgba(185, 166, 242, 0.8);
  animation: pipPing 2.6s ease-out infinite;
}
@keyframes pipPing {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(7); opacity: 0; }
}
.pip--share .pip-stage i:nth-child(n + 2) {
  position: absolute;
  bottom: 18px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(244, 241, 234, 0.35);
  animation: pipNode 2.6s ease infinite;
}
.pip--share .pip-stage i:nth-child(2) { left: 18%; }
.pip--share .pip-stage i:nth-child(3) { left: 38%; animation-delay: 0.2s; }
.pip--share .pip-stage i:nth-child(4) { left: 58%; animation-delay: 0.4s; }
.pip--share .pip-stage i:nth-child(5) { left: 78%; animation-delay: 0.6s; }
@keyframes pipNode {
  0%, 40% { background: rgba(244, 241, 234, 0.35); }
  55% { background: #B9A6F2; }
  80%, 100% { background: rgba(244, 241, 234, 0.35); }
}

/* ask: a question types itself, an answer card appears */
.pip--ask .pip-stage i {
  position: absolute;
  left: 14px;
  top: 20px;
  height: 9px;
  border-radius: 4px;
  background: rgba(244, 241, 234, 0.5);
  width: 0;
  animation: pipType 6s steps(22) infinite;
}
@keyframes pipType {
  0%, 6% { width: 0; }
  30%, 88% { width: 68%; }
  96%, 100% { width: 0; }
}
.pip--ask .pip-stage b {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 40px;
  bottom: 12px;
  border-radius: 8px;
  background: rgba(185, 166, 242, 0.14);
  border: 1px solid rgba(185, 166, 242, 0.4);
  opacity: 0;
  animation: pipAns 6s ease infinite;
}
.pip--ask .pip-stage b::before,
.pip--ask .pip-stage b::after {
  content: '';
  position: absolute;
  left: 10px;
  height: 6px;
  border-radius: 3px;
  background: rgba(244, 241, 234, 0.45);
}
.pip--ask .pip-stage b::before { top: 12px; right: 24px; }
.pip--ask .pip-stage b::after { top: 26px; right: 48px; }
@keyframes pipAns {
  0%, 38% { opacity: 0; transform: translateY(8px); }
  52%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(8px); }
}

/* onboard: doc chips fly into the assembled doc */
.pip--onboard .pip-stage b {
  position: absolute;
  right: 14px;
  top: 16px;
  bottom: 16px;
  width: 42%;
  border-radius: 8px;
  border: 1px solid rgba(185, 166, 242, 0.5);
  background: rgba(185, 166, 242, 0.1);
}
.pip--onboard .pip-stage b::before,
.pip--onboard .pip-stage b::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  height: 6px;
  border-radius: 3px;
  background: rgba(244, 241, 234, 0.4);
}
.pip--onboard .pip-stage b::before { top: 14px; }
.pip--onboard .pip-stage b::after { top: 28px; right: 30px; }
.pip--onboard .pip-stage i {
  position: absolute;
  left: 14px;
  width: 34%;
  height: 12px;
  border-radius: 4px;
  background: rgba(244, 241, 234, 0.25);
  animation: pipFly 5.4s ease-in-out infinite;
}
.pip--onboard .pip-stage i:nth-child(1) { top: 18px; }
.pip--onboard .pip-stage i:nth-child(2) { top: 40px; animation-delay: 0.5s; }
.pip--onboard .pip-stage i:nth-child(3) { top: 62px; animation-delay: 1s; }
@keyframes pipFly {
  0%, 18% { transform: none; opacity: 1; }
  50%, 72% { transform: translateX(86px) scale(0.55); opacity: 0; }
  86%, 100% { transform: none; opacity: 1; }
}

/* tasks: checkboxes tick, a pushed badge lights up */
.pip--tasks .pip-stage { display: flex; flex-direction: column; gap: 12px; padding-left: 36px; padding-top: 15px; }
.pip--tasks .pip-stage i {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(244, 241, 234, 0.18);
}
.pip--tasks .pip-stage i::before {
  content: '';
  position: absolute;
  left: -24px;
  top: -3px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1.5px solid rgba(244, 241, 234, 0.4);
  box-sizing: border-box;
  animation: pipTick 6s ease infinite;
}
.pip--tasks .pip-stage i:nth-child(1) { width: 76%; }
.pip--tasks .pip-stage i:nth-child(2) { width: 60%; }
.pip--tasks .pip-stage i:nth-child(2)::before { animation-delay: 0.7s; }
.pip--tasks .pip-stage i:nth-child(3) { width: 68%; }
.pip--tasks .pip-stage i:nth-child(3)::before { animation-delay: 1.4s; }
@keyframes pipTick {
  0%, 18% { background: transparent; border-color: rgba(244, 241, 234, 0.4); }
  28%, 82% { background: #B9A6F2; border-color: #B9A6F2; }
  94%, 100% { background: transparent; border-color: rgba(244, 241, 234, 0.4); }
}
.pip--tasks .pip-stage b {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 9px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b9a6f2;
  border: 1px solid rgba(185, 166, 242, 0.5);
  background: rgba(185, 166, 242, 0.12);
  border-radius: 999px;
  padding: 3px 8px;
  opacity: 0;
  animation: pipPushed 6s ease infinite;
}
@keyframes pipPushed {
  0%, 40% { opacity: 0; }
  55%, 85% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* survey: result bars grow */
.pip--survey .pip-stage { display: flex; flex-direction: column; gap: 13px; justify-content: center; }
.pip--survey .pip-stage i {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, #B9A6F2, #8f7ad9);
  transform-origin: left center;
  animation: pipBar 5s ease infinite;
}
.pip--survey .pip-stage i:nth-child(1) { width: 82%; }
.pip--survey .pip-stage i:nth-child(2) { width: 58%; animation-delay: 0.25s; }
.pip--survey .pip-stage i:nth-child(3) { width: 40%; animation-delay: 0.5s; }
@keyframes pipBar {
  0%, 8% { transform: scaleX(0); }
  32%, 82% { transform: scaleX(1); }
  95%, 100% { transform: scaleX(0); }
}

/* memory: spaces glow in turn */
.pip--memory .pip-stage { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pip--memory .pip-stage i {
  height: 18px;
  border-radius: 8px;
  border: 1px solid rgba(244, 241, 234, 0.2);
  background: rgba(244, 241, 234, 0.05);
  animation: pipMem 6s ease infinite;
}
.pip--memory .pip-stage i:nth-child(2) { animation-delay: 2s; }
.pip--memory .pip-stage i:nth-child(3) { animation-delay: 4s; }
@keyframes pipMem {
  0%, 10% {
    border-color: #B9A6F2;
    background: rgba(185, 166, 242, 0.18);
    box-shadow: 0 0 10px rgba(185, 166, 242, 0.35);
  }
  24%, 100% {
    border-color: rgba(244, 241, 234, 0.2);
    background: rgba(244, 241, 234, 0.05);
    box-shadow: none;
  }
}

/* canvas: scattered cards settle into place */
.pip--canvas .pip-stage i {
  position: absolute;
  width: 34%;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(244, 241, 234, 0.22);
  background: rgba(244, 241, 234, 0.07);
  animation: pipDrift 6s ease-in-out infinite;
}
.pip--canvas .pip-stage i:nth-child(1) { left: 14px; top: 16px; --dx: 14px; --dy: 10px; --dr: -6deg; }
.pip--canvas .pip-stage i:nth-child(2) { right: 14px; top: 24px; --dx: -10px; --dy: 14px; --dr: 5deg; }
.pip--canvas .pip-stage i:nth-child(3) { left: 32%; bottom: 14px; --dx: 6px; --dy: -12px; --dr: 3deg; }
@keyframes pipDrift {
  0%, 12% { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); }
  45%, 88% { transform: none; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); }
}
.pip--canvas .pip-stage b {
  position: absolute;
  left: 40%;
  top: 40%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B9A6F2;
  box-shadow: 0 0 8px rgba(185, 166, 242, 0.7);
  animation: pipCursor 6s ease-in-out infinite;
}
@keyframes pipCursor {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(46px, 18px); }
  60% { transform: translate(-30px, 34px); }
}

@media (prefers-reduced-motion: reduce) {
  .pip *,
  .pip *::before,
  .pip *::after,
  .aska-caret {
    animation: none !important;
  }
}

/* ── V5 page-scoped overrides (.login-page--v5, set only by login.html) ─────
   Scoped so the shared stylesheet leaves /v4.html rendering as archived. */

/* Narrower side gutters. The original formula reserved the sign-in panel's
   full 360px per side; with the panel collapsed to a pill (below) the right
   gutter no longer needs that, and the left floor just keeps the step rail's
   lane clear. Overrides the gutter rule further up via higher specificity. */
@media (min-width: 1025px) {
  .login-page--v5 .video-section {
    --video-section-pad-x: clamp(36px, 6vw, 140px);
  }
}

/* Collapsed sign-in pill on desktop. The pill markup already exists for the
   narrow layout; here it is shown on wide viewports too, and the card is
   hidden until the panel carries --expanded, which login-floating-panel.js
   toggles on hover AND focus (so keyboard users tabbing to the pill still
   expand it). The panel is bottom-anchored, so the card grows upward and the
   cursor lands on the card as it appears -- hover never flickers. Mobile
   (<768px) keeps its click-to-toggle behavior untouched. */
@media (min-width: 768px) {
  /* ── Single-surface sign-in panel ─────────────────────────────────────
     Collapsed, the panel IS the pill: one rounded surface holding a grip
     bar (::before, mirroring .login-floating-panel__drag-grip) and the
     "Login" label. On hover/focus (--expanded, toggled by
     login-floating-panel.js) the SAME surface grows and the card unfolds
     inside it -- no second panel appears. The unfold animates a
     content-sized height via the grid-rows 0fr -> 1fr trick, supported in
     every modern engine. The panel is bottom-anchored and the pill row is
     ordered last, so the pill never moves under the cursor and hover never
     breaks. */
  .login-page--v5 .login-floating-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(18, 18, 22, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    /* The width morphs with the state (narrow pill -> full card), so the
       panel must stay anchored by its RIGHT edge. login-floating-panel.js
       computes and inline-sets `left` from the measured width at load time
       (the collapsed width), which would push the expanded panel off-screen;
       author !important beats inline styles, so pin right and void left.
       Dragging is already disabled on this page (hidden handle). */
    left: auto !important;
    right: 24px !important;
    transition: width 0.34s cubic-bezier(0.2, 0.85, 0.2, 1);
  }
  .login-page--v5 .login-floating-panel:not(.login-floating-panel--expanded) {
    width: 170px;
  }
  .login-page--v5 .login-panel-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #f4f1ea;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    order: 2;
  }
  /* Grip bar BELOW the label (::after follows the label in the column). */
  .login-page--v5 .login-panel-toggle::after {
    content: '';
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
  }
  .login-page--v5 .login-panel-toggle__chevron {
    display: none;
  }

  /* The unfolding row: rows animate the height, the card fades in a beat
     behind so the reveal reads as one move. */
  .login-page--v5 .login-floating-panel .login-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s cubic-bezier(0.2, 0.85, 0.2, 1);
  }
  .login-page--v5 .login-floating-panel--expanded .login-container {
    grid-template-rows: 1fr;
  }
  .login-page--v5 .login-floating-panel .login-card {
    min-height: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 16px 20px 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.2, 0.85, 0.2, 1);
  }
  .login-page--v5 .login-floating-panel--expanded .login-card {
    opacity: 1;
    transform: translateY(0);
  }

  /* The card "extra" (free-to-use + TOS) is an absolutely-positioned
     satellite card in the stock desktop layout; inside the single surface
     it lives in flow at the bottom of the card, as the narrow layout
     already renders it. The selector list pins every stock state variant. */
  .login-page--v5 .login-floating-panel .login-card__extra,
  .login-page--v5 .login-floating-panel--expanded .login-card__extra,
  .login-page--v5 .login-floating-panel:focus-within .login-card__extra {
    position: static;
    margin: 12px 0 0;
    max-height: none;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }
  .login-page--v5 .login-card__extra::after {
    content: none !important;
  }
  /* One surface, one label, one bar: the card's whole drag handle (grip +
     "Login" title) is hidden -- the pill row at the bottom carries the
     label and the grip. NOTE this disables dragging the panel on this page
     (login-floating-panel.js binds pointer events to the hidden handle);
     the panel stays at its default bottom-right anchor. */
  .login-page--v5 .login-floating-panel__drag-handle {
    display: none;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .login-page--v5 .login-floating-panel .login-container,
  .login-page--v5 .login-floating-panel .login-card {
    transition: none;
  }
}