/* ============================================================
   VHS PUBLIC SITE — NAVBAR · HERO · VETTI
   ------------------------------------------------------------
   Loaded AFTER style.css and warm-theme.css. It owns four things
   on the public marketing pages:

     1. the floating rounded navbar
     2. the homepage hero (one image, compact)
     3. the inline homepage Vetti chat
     4. the floating Vetti launcher + panel (non-home pages)

   Design source of truth for Vetti itself is the User Portal
   workspace (../user/vetti.css). The tokens below mirror it —
   shell purple #6546A8, neutral text #242033, muted #756F82,
   border #E5E1EC, 0.75rem bubbles — so the public chat reads as
   the same product, just lighter.

   Public ≠ Portal: no workspace chrome, no pet context, no
   authenticated data. See public-vetti.js for the state boundary.
   ============================================================ */

:root {
  --pv-purple: #6d4ab1;      /* public brand purple */
  --pv-purple-deep: #5a3a94;
  --pv-violet: #8b5cf6;
  --pv-shell: #6546a8;       /* portal shell purple */
  --pv-shell-light: #8a6bd0;
  --pv-ink: #242033;         /* portal neutral text */
  --pv-body: #4a4359;
  --pv-muted: #756f82;       /* portal neutral muted */
  --pv-line: #e5e1ec;        /* portal neutral border */
  --pv-soft: #f5f0fd;
  --pv-softer: #faf8fe;
  --pv-thread: #fcfbfe;
  /* Shared floating-Vetti geometry (Services / About / Contact): ONE right
     offset for both the launcher and the panel, and ONE fab size + gap so
     the panel's bottom is always fab-bottom + fab-height + gap — the panel
     can never overlap the launcher and their right edges always match. */
  /* px, not rem: the public pages shrink the root font to 14px on small
     screens, which would silently move every deferred value. */
  --vetti-floating-right: 12px;
  --vetti-floating-bottom: 12px;
  --vetti-fab-size: 76px;
  --vetti-fab-panel-gap: 12px;
  /* The floating navbar's height, used to size the hero against the first
     screen. public-vetti.js measures the real header and overwrites this
     inline; the value here is the desktop fallback for a JS-less first paint.
     The per-breakpoint fallbacks live in the media queries below. */
  --pv-nav-h: 84px;
}

/* ============================================================
   1. NAVBAR — centered rounded container, floating
   ============================================================ */

header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.75rem 1rem 0;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The old full-bleed shimmer line belonged to the dark bar. */
header::after {
  display: none;
}

.navbar {
  max-width: 75rem;
  margin: 0 auto;
  height: auto;
  min-height: 4.5rem;
  padding: 0.5rem 0.6rem 0.5rem 1.15rem;
  gap: 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(109, 74, 177, 0.1);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(60, 31, 120, 0.07);
}

.logo-img {
  filter: none;
  height: 2.25rem;
}

.navbar-btns {
  gap: 0.6rem;
}

.navbar-btns .btn-outline,
.navbar-btns .btn-primary {
  height: auto;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  font-size: 0.9rem;
}

.navbar-btns .btn-outline {
  background: #ffffff;
  border: 1px solid var(--pv-line);
  color: var(--pv-body);
}

.navbar-btns .btn-outline:hover {
  background: var(--pv-soft);
  border-color: #c9b6ee;
  color: var(--pv-purple-deep);
  transform: none;
}

.nav-menu .nav-link {
  padding: 0.35rem 0;
}

/* ============================================================
   2. HERO — compact, one image, no slideshow
   ============================================================ */

/* The hero owns the whole first screen AND the region behind the sticky
   navbar: a negative top margin pulls it up under the header, so one single
   background (gradient + paw pattern) covers both — the old transparent-header
   strip that looked like a second navbar is gone. The header's height is
   compensated in the padding so the content's vertical center stays put. */
#hero.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(-1 * var(--pv-nav-h));
  min-height: 100svh;
  min-height: 100vh;
  padding: var(--pv-nav-h) 2rem 0;
  overflow: visible;
  /* Multiple backgrounds paint first-on-top: the radial depth layers go
     FIRST and the opaque tonal base LAST, so the highlights actually show. */
  /* ---- PHASE 2B tonal depth: soft atmosphere, not blobs. Cool lavender
     over the text column, warm cream behind the image, a violet anchor at
     the trail's origin corner and a warm satin along the bottom. The tonal
     base gradient stays last so it keeps rendering underneath. Wash alphas
     raised ~+40% in 2B after QA (previous depth read as plain); still
     radial washes, never blobs. */
  background-color: #f8f4fc;
  background-image:
    radial-gradient(62% 70% at 10% 26%, rgba(139, 92, 246, 0.11) 0%, rgba(139, 92, 246, 0) 66%),
    radial-gradient(50% 60% at 80% 46%, rgba(255, 240, 222, 0.42) 0%, rgba(255, 240, 222, 0) 72%),
    radial-gradient(40% 46% at 3% 96%, rgba(109, 74, 177, 0.09) 0%, rgba(109, 74, 177, 0) 70%),
    radial-gradient(46% 40% at 28% 98%, rgba(255, 252, 246, 0.42) 0%, rgba(255, 252, 246, 0) 72%),
    linear-gradient(180deg, #f8f4fc 0%, #f5eefc 44%, #f1eafb 90%, #f5f0fc 100%);
  background-repeat: no-repeat;
  background-size: auto;
}

/* ---- PHASE 3 decor: TRUE staggered repeating paw pattern (replaces the
   Phase-2B corner art, which read as scattered stickers). Two layers of the
   same paw tile repeat across the whole hero: layer B is offset half a cell
   horizontally and slightly staggered vertically, with a smaller scale, a
   different rotation and a lighter tone — the two interleave into the
   requested staggered arrangement:

       paw       paw       paw
         paw       paw       paw
       paw       paw       paw

   Rendered contrast is calibrated by the qa-phase2-probe pipeline: layer
   alphas .15/.11 over the lavender base give pattern-vs-bg 1.20:1 while
   worst-case title ink over a pattern peak stays at 10.70:1 (AA needs
   4.5:1). A top-fade mask keeps the pattern out of the
   navbar band (guardrail: navbar contrast) — below ~150px the pattern is
   at full strength everywhere, so it still spans the entire hero.
   Probe: screenshot-auditor/qa-phase2-probe.cjs. */
#hero.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* style.css's generic `.hero::before` still applies opacity: 0.7 and a
     center-fade mask-image. The composed 2B art is placed deliberately, so
     neither is wanted — full opacity, no mask (the QA brief explicitly
     rejects mask-hiding). */
  opacity: 1;
  /* Keep the pattern clear of the navbar band (its top fade) while the
     legacy `.hero::before` center-fade mask in style.css stays overridden. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, #000 150px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, #000 150px);
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 112 112'><g fill='%23a78bfa' fill-opacity='0.15' transform='rotate(-12 32 32)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 112 112'><g fill='%236d4ab1' fill-opacity='0.11' transform='scale(0.62) translate(16 20) rotate(14 32 32)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g></svg>");
  background-position:
    0px -80px, 95px 15px;
  background-size:
    190px 190px, 190px 190px;
  background-repeat: repeat;
}

#hero.hero::after {
  display: none;
}

.hero-visual__glow {
  display: none;
}

#hero .hero-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 2.25rem;
  align-items: center;
  justify-content: center;
}

#hero .hero-content {
  max-width: 37.5rem;
  animation: none;
}

#hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.38rem 0.8rem;
  border: 1px solid #e9e1f9;
  border-radius: 999px;
  background: var(--pv-soft);
  color: var(--pv-purple);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

#hero .hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pv-violet);
  flex: 0 0 auto;
}

#hero .hero-title {
  display: block;
  margin: 1.15rem 0 0.95rem;
  /* PHASE 2: ~+6% presence on desktop (mobile keeps its own sizes). */
  font-size: clamp(2.18rem, 3.55vw, 3.22rem);
  font-weight: 800;
  line-height: 1.09;
  letter-spacing: -0.025em;
  color: #2f2440;
}

#hero .hero-description {
  margin: 0 0 1.6rem;
  max-width: 34rem;
  /* PHASE 2: ~+7% presence on desktop. */
  font-size: 1.12rem;
  line-height: 1.62;
  color: var(--pv-body);
  animation: none;
}

#hero .hero-cta {
  /* PHASE 2: slightly stronger CTA group spacing. */
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  animation: none;
}

#hero .hero-cta .btn {
  padding: 1.05rem 1.78rem;
  border-radius: 999px;
  font-size: 1.02rem;
  line-height: 1.2;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
    border-color 0.25s ease, color 0.25s ease;
}

#hero .hero-cta .btn svg {
  transition: transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  #hero .hero-cta .btn:hover {
    transform: translateY(-3px);
  }

  #hero .hero-cta .btn-primary:hover {
    box-shadow: 0 14px 28px rgba(109, 74, 177, 0.28);
  }

  #hero .hero-cta .btn:hover svg {
    transform: translateX(3px);
  }
}

#hero .hero-cta .btn-secondary {
  background: #ffffff;
  border: 1px solid var(--pv-line);
  color: var(--pv-body);
  box-shadow: none;
}

#hero .hero-cta .btn-secondary:hover {
  background: var(--pv-softer);
  border-color: #c9b6ee;
  color: var(--pv-purple-deep);
  box-shadow: none;
}

#hero .hero-credential {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  /* PHASE 2: small presence bump. */
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--pv-muted);
}

#hero .hero-credential img {
  width: 26px;
  height: 26px;
  padding: 2px;
  border: 1px solid var(--pv-line);
  border-radius: 50%;
  background: #ffffff;
  object-fit: contain;
  flex: 0 0 auto;
}

/* ONE MAIN ROUNDED IMAGE: no double-card plate behind it. */
#hero .hero-visual {
  height: auto;
  width: 100%;
  /* PHASE 2: ~+7% image presence; the height is what drives the rendered
     width (aspect 4/3), and both still fit inside the desktop column. */
  max-width: 33.5rem;
  margin-inline: auto;
  justify-self: center;
  aspect-ratio: 4 / 3;
  max-height: 23.75rem;
  border: 1px solid rgba(109, 74, 177, 0.08);
  border-radius: 1.25rem;
  background: var(--pv-soft);
  /* PHASE 2: restrained grounded shadow, slightly deeper than phase 1. */
  box-shadow: 0 22px 46px rgba(60, 31, 120, 0.14);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  #hero .hero-visual:hover {
    transform: translateY(-5px);
    box-shadow:
      16px 14px 0 -1px #eae1f9,
      0 28px 52px rgba(60, 31, 120, 0.16);
  }
}

#hero .hero-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

#hero .hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* ---- scroll cue -------------------------------------------------- */

#hero .hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.35rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--pv-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--pv-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(60, 31, 120, 0.07);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease;
}

#hero .hero-scroll-cue__chevron {
  animation: heroCue 2.6s ease-in-out infinite;
}

@keyframes heroCue {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(3px);
  }
}

#hero .hero-scroll-cue:focus-visible {
  outline: 2px solid var(--pv-violet);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  #hero .hero-scroll-cue:hover {
    color: var(--pv-purple);
    border-color: #c9b6ee;
    transform: translateX(-50%) translateY(2px);
    box-shadow: 0 12px 24px rgba(60, 31, 120, 0.1);
  }
}

/* ============================================================
   3. INLINE VETTI (homepage) — left mascot / right chat
   ============================================================ */

.vetti-inline {
  position: relative;
  padding: 2rem 1.5rem 2.5rem;
  background-color: #f7f3fd;
  background-image: linear-gradient(180deg, #f7f3fd 0%, #f5ecfa 42%, #f3ecfb 78%, #f7f3fd 100%);
  background-repeat: no-repeat;
  background-size: auto;
  border-top: 0;
  border-bottom: 0;
}

.vetti-inline::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><g fill='%236d4ab1' fill-opacity='0.045'><g transform='translate(30 40) scale(0.5) rotate(-10 32 32)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g><g transform='translate(214 196) scale(0.36) rotate(14 32 32)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g></g></svg>");
  background-repeat: repeat;
  background-size: 340px 340px;
  opacity: 0.65;
  -webkit-mask-image: radial-gradient(
    110% 95% at 50% 50%,
    rgba(0, 0, 0, 0) 46%,
    rgba(0, 0, 0, 0.45) 74%,
    #000 96%
  );
  mask-image: radial-gradient(
    110% 95% at 50% 50%,
    rgba(0, 0, 0, 0) 46%,
    rgba(0, 0, 0, 0.45) 74%,
    #000 96%
  );
}

.vetti-inline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(109, 74, 177, 0) 0%,
    rgba(109, 74, 177, 0.2) 50%,
    rgba(109, 74, 177, 0) 100%
  );
}

.vetti-inline__inner {
  position: relative;
  width: min(100% - 2rem, 960px);
  margin-inline: auto;
}

.vetti-inline__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.6rem;
  text-align: center;
}

/* Explicit sizing — no height:100% chain. Two <img> layers crossfade
   inside; the wrapper is always exactly this big, so the mascot can
   never collapse. */
.vetti-inline__head .vetti-state-swapper {
  width: 128px;
  height: 128px;
  margin-bottom: 0.35rem;
  filter:
    drop-shadow(0 5px 9px rgba(60, 31, 120, 0.16))
    drop-shadow(0 16px 26px rgba(60, 31, 120, 0.2));
}

.vetti-inline__head h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #2f2440;
  text-align: center;
}

.vetti-inline__head p {
  margin: 0;
  max-width: 44rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--pv-muted);
  text-align: center;
}

/* Small live status under the subtitle; public-vetti.js syncs its label
   with the mascot state machine (idle -> thinking -> success -> idle).
   Neutral wording only — no AI claims. */
.vetti-inline__status {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.32rem 0.85rem;
  border: 1px solid #e9e1f9;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--pv-purple);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(60, 31, 120, 0.07);
}

.vetti-inline__status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #37a169;
}

.vetti-inline__status--thinking {
  color: #9a6b0e;
  border-color: #efdcb2;
  background: #fffaf0;
}

.vetti-inline__status--thinking .vetti-inline__status-dot {
  background: #e0a036;
  animation: vettiStatusPulse 1.1s ease-in-out infinite;
}

@keyframes vettiStatusPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

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

/* The chat card is the section's one object: full container width,
   never wider, never a side column. */
.vetti-card--inline {
  width: 100%;
}

/* Desktop: stacked composition — mascot above the centered heading,
   chat card below, all inside one centered container. */
@media (min-width: 769px) {
  .vetti-inline {
    padding: 2.75rem 1.5rem 3rem;
  }

  .vetti-inline__head .vetti-state-swapper {
    width: 148px;
    height: 148px;
  }

  .vetti-card--inline {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 1.25rem;
    border-color: rgba(109, 74, 177, 0.14);
    box-shadow:
      0 1px 2px rgba(43, 31, 61, 0.04),
      0 22px 40px rgba(60, 31, 120, 0.1);
  }

  .vetti-card--inline .vetti-thread {
    flex: 1 1 auto;
    min-height: 16.25rem;
    max-height: 20rem;
    overflow-y: auto;
  }

  .vetti-card--inline .vetti-composer {
    min-height: 4rem;
  }

  .vetti-card--inline .vetti-input {
    min-height: 44px;
    padding: 0.7rem 0.9rem;
  }

  .vetti-card--inline .vetti-send {
    width: 2.75rem;
    height: 2.75rem;
  }

  .vetti-card--inline .vetti-bubble--vetti {
    max-width: 78%;
  }

  .vetti-card--inline .vetti-bubble--user {
    max-width: 68%;
  }

  .vetti-card--inline .vetti-chip {
    min-height: 40px;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
  }

  .vetti-card--inline .vetti-card__head {
    padding: 0.95rem 1.1rem;
  }

  .vetti-card--inline .vetti-card__avatar {
    width: 2.4rem;
    height: 2.4rem;
  }

  .vetti-card--inline .vetti-thread {
    padding: 1.1rem 1.2rem;
    gap: 0.9rem;
  }

  .vetti-card--inline .vetti-bubble {
    padding: 0.8rem 1rem;
  }

  .vetti-card--inline .vetti-composer {
    padding: 0.85rem 1rem;
  }

  .vetti-card--inline .vetti-note {
    padding: 4px 1.1rem 10px;
  }

  .vetti-inline::after {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1rem;
    height: 1px;
  }

  .vetti-card--inline {
    background:
      radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, 0.035) 0%, transparent 60%),
      linear-gradient(180deg, #ffffff 58%, #fbf7ff 100%);
    border: 1px solid rgba(109, 74, 177, 0.18);
    border-radius: 1.35rem;
    box-shadow:
      0 1px 2px rgba(43, 31, 61, 0.04),
      0 18px 36px rgba(60, 31, 120, 0.1),
      0 36px 64px rgba(60, 31, 120, 0.08);
  }
}

/* ============================================================
   4. VETTI CHAT CARD — shared by the inline and panel instances
   ============================================================ */

.vetti-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--pv-line);
  border-radius: 1.15rem;
  box-shadow: 0 8px 24px rgba(60, 31, 120, 0.06);
}

.vetti-card--panel {
  height: 100%;
}

.vetti-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  background: linear-gradient(180deg, #fbf8ff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--pv-line);
}

.vetti-card__avatar {
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--pv-line);
  border-radius: 50%;
  background: var(--pv-soft);
}

.vetti-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vetti-card__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}

.vetti-card__name {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pv-ink);
}

.vetti-card__role {
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--pv-muted);
}

.vetti-card__close {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pv-line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--pv-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vetti-card__close svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.vetti-card__close:hover {
  background: var(--pv-soft);
  border-color: #c9b6ee;
  color: var(--pv-purple-deep);
}

/* ---- conversation -------------------------------------------------- */

.vetti-thread {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 5.5rem;
  max-height: 22rem;
  padding: 0.9rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pv-thread);
  scrollbar-width: thin;
  scrollbar-color: #ded3f4 transparent;
}

.vetti-thread::-webkit-scrollbar {
  width: 6px;
}

.vetti-thread::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #ded3f4;
}

.vetti-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  animation: vettiMsgIn 0.22s ease-out;
}

@keyframes vettiMsgIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vetti-msg--user {
  justify-content: flex-end;
}

.vetti-msg__avatar {
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--pv-line);
  border-radius: 50%;
  background: #ffffff;
}

.vetti-msg__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vetti-bubble {
  margin: 0;
  max-width: min(34rem, 88%);
  padding: 0.7rem 1rem;
  border-radius: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.58;
  overflow-wrap: anywhere;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(43, 31, 61, 0.06);
}

.vetti-bubble--vetti {
  border: 1px solid var(--pv-line);
  border-top-left-radius: 0.3rem;
  background: #ffffff;
  color: var(--pv-ink);
}

.vetti-bubble--user {
  border: 1px solid var(--pv-shell);
  border-top-right-radius: 0.3rem;
  background: var(--pv-shell);
  color: #ffffff;
  max-width: min(30rem, 88%);
  box-shadow: 0 2px 8px rgba(86, 55, 148, 0.18);
}

.vetti-dots {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.75rem 0.2rem;
}

.vetti-dots i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--pv-shell-light);
  animation: vettiPulse 1.1s ease-in-out infinite;
}

.vetti-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.vetti-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes vettiPulse {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* ---- suggestion chips (starter only) -------------------------------- */

.vetti-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.75rem 1rem 0;
  background: var(--pv-thread);
}

.vetti-suggest:empty {
  display: none;
}

.vetti-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #d8ccf0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--pv-shell);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(43, 31, 61, 0.04);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease,
    box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .vetti-chip:hover {
    transform: translateY(-1px);
    background: var(--pv-soft);
    border-color: #c9b6ee;
    box-shadow: 0 3px 8px rgba(60, 31, 120, 0.1);
  }
}

.vetti-chip:active,
.vetti-chip.is-pressed {
  transform: translateY(0) scale(0.97);
  background: #efe7fb;
  border-color: #b9a4e6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

.vetti-chip:focus-visible {
  outline: 2px solid var(--pv-violet);
  outline-offset: 2px;
}

/* ---- composer ------------------------------------------------------- */

.vetti-composer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: #ffffff;
  border-top: 1px solid var(--pv-line);
}

.vetti-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--pv-line);
  border-radius: 999px;
  background: var(--pv-softer);
  color: var(--pv-ink);
  font: inherit;
  font-size: 0.9rem;
}

.vetti-input::placeholder {
  color: #a89ab8;
}

.vetti-input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--pv-violet);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.vetti-send {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pv-shell);
  border-radius: 50%;
  background: var(--pv-shell);
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.vetti-send:hover {
  background: var(--pv-shell-light);
}

/* Compact reminder with an on-demand privacy disclosure. */
.vetti-note {
  display: block;
  margin: 0;
  padding: 6px 12px 8px;
  border-top: 1px solid #e5e1ec;
  background: #f8f7fc;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #5c566d;
}

.vetti-privacy__reminder {
  margin: 0;
}

.vetti-privacy__details {
  margin-top: 1px;
}

.vetti-privacy__details summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--pv-purple);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.vetti-privacy__details summary::-webkit-details-marker {
  display: none;
}

.vetti-privacy__details summary::after {
  content: "▾";
  margin-left: 0.3rem;
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}

.vetti-privacy__details[open] summary::after {
  transform: rotate(180deg);
}

.vetti-privacy__body {
  padding: 2px 0 4px;
  font-size: 0.68rem;
  line-height: 1.45;
}

.vetti-privacy__body p {
  margin: 0 0 4px;
}

.vetti-privacy__policy {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pv-purple);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* "Ask Vetti" flash when the hero CTA hands the visitor to the section. */
.vetti-mount.is-highlighted .vetti-card {
  animation: vettiFlash 1.6s ease;
}

@keyframes vettiFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.35);
  }
  30% {
    box-shadow: 0 0 0 7px rgba(139, 92, 246, 0.13);
  }
  100% {
    box-shadow: 0 8px 24px rgba(60, 31, 120, 0.06);
  }
}

/* ============================================================
   5. FLOATING VETTI — launcher + panel (non-home pages)
   Mobile-first: the base rules are the phone layout.
   ============================================================ */

.vetti-fab {
  position: fixed;
  right: var(--vetti-floating-right);
  bottom: var(--vetti-floating-bottom);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.vetti-fab__btn {
  position: relative;
  width: var(--vetti-fab-size);
  height: var(--vetti-fab-size);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vetti-fab__btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(60, 31, 120, 0.26));
}

.vetti-fab__btn:hover {
  transform: translateY(-3px);
}

.vetti-fab__btn:focus-visible {
  outline: 2px solid var(--pv-violet);
  outline-offset: 3px;
  border-radius: 50%;
}

/* ==== HOMEPAGE ASK VETTI HELPER ======================================== */
.ask-vetti-helper {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(60, 31, 120, 0.22);
}

.ask-vetti-helper.is-hidden {
  display: none;
}

.ask-vetti-helper.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ask-vetti-helper__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.15rem 0.85rem 1rem;
  border: 1px solid var(--pv-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pv-ink);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ask-vetti-helper__btn:hover {
  background: var(--pv-soft);
  border-color: #c9b6ee;
  color: var(--pv-purple-deep);
  transform: translateY(-2px);
}

.ask-vetti-helper__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: block;
}

.ask-vetti-helper__label {
  color: var(--pv-ink);
}

@media (hover: hover) and (pointer: fine) {
  .ask-vetti-helper__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(60, 31, 120, 0.14);
  }
}

/* Vetti state swap hierarchy. Uses approved assets only (no generated images,
   no bouncing, no spinning). Crossfade is a 300ms ease-in-out between the
   approved PNGs stored in backend/public/shared/assets/vetti/ — no CSS-only
   states, no extra elements. */
.vetti-state-swapper {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.vetti-state-swapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 300ms ease-in-out;
}

.vetti-state-swapper img.is-hidden {
  opacity: 0;
}

/* ---- idle (default) ------------------------------------------------ */
.vetti-state-swapper--idle .vetti-state-swapper img {
  opacity: 1;
}

/* ---- main-level idle: the same resting face the chat renders in when
   nothing is happening. One of the set of idle PNGs. */
.vetti-state-swapper--main-idle .vetti-state-swapper img {
  opacity: 1;
}

/* ---- greeting / wave ------------------------------------------------ */
.vetti-state-swapper--greeting .vetti-state-swapper img {
  opacity: 1;
}

/* ---- thinking (user sent) ---------------------------------------- */
.vetti-state-swapper--thinking .vetti-state-swapper img {
  opacity: 1;
}

/* ---- success / happy (response arrived) ----------------------------- */
.vetti-state-swapper--success .vetti-state-swapper img {
  opacity: 1;
}

/* ---- idle at main and hamburger level after a message ---------------- */
.vetti-state-swapper--main-idle-after .vetti-state-swapper img {
  opacity: 1;
}

.vetti-fab__teaser {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 13rem;
  padding: 0.45rem 0.5rem 0.45rem 0.75rem;
  border: 1px solid var(--pv-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pv-body);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(60, 31, 120, 0.14);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vetti-fab__teaser__msg {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.vetti-fab__teaser__close {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pv-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}

.vetti-fab__teaser__close:hover {
  background: var(--pv-soft);
  color: var(--pv-purple-deep);
}

.vetti-fab__teaser strong {
  color: var(--pv-purple);
}

.vetti-fab__teaser.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Panel — fits the phone first, stays compact on desktop.
   The bottom offset is pinned in px (not rem): style.css drops the root
   font-size to 14px under 480px, which would shrink a rem offset below the
   mascot and let the panel overlap the launcher. 100px clears the 76px
   mascot that sits 1rem off the bottom edge, with a small gap. */
.vetti-panel {
  position: fixed;
  left: var(--vetti-floating-right);
  right: var(--vetti-floating-right);
  /* Opens straight above the launcher: launcher bottom + launcher size + gap.
     Replaces the old fixed 96–104px guess that could overlap the mascot. */
  bottom: calc(
    var(--vetti-floating-bottom) + var(--vetti-fab-size) + var(--vetti-fab-panel-gap)
  );
  /* Compact, content-hugging height with a hard ceiling; the thread inside
     (below) flexes to the remaining space and scrolls internally. */
  height: auto;
  max-height: min(65vh, 31.25rem);
  z-index: 1499;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vetti-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.vetti-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.vetti-panel .vetti-card {
  box-shadow: 0 24px 60px rgba(43, 31, 61, 0.24);
}

/* Inside the panel the thread flexes to the panel height instead of
   carrying its own ceiling, so the composer always stays docked. */
.vetti-panel .vetti-thread {
  min-height: 0;
  max-height: none;
}

/* Panel-only interior rhythm: every layer shares one 16px content column
   so the header, bubbles, composer and note all start/finish on the same
   lines — no layer sits farther left or right than another. */
.vetti-card--panel .vetti-card__head {
  padding: 0.85rem 1rem;
}

.vetti-card--panel .vetti-thread {
  padding: 1rem;
  gap: 0.7rem;
  /* Reserve the scrollbar's own lane so bubbles never touch it and the
     right padding stays visually balanced, scrollbar or not. */
  scrollbar-gutter: stable;
}

.vetti-card--panel .vetti-bubble--vetti {
  max-width: 84%;
}

.vetti-card--panel .vetti-bubble--user {
  max-width: 78%;
}

.vetti-card--panel .vetti-composer {
  padding: 0.75rem 1rem;
}

.vetti-card--panel .vetti-note {
  padding: 0.6rem 1rem 0.7rem;
  font-size: 0.7rem;
  line-height: 1.55;
}

/* ============================================================
   6. FINISHING PASS — card depth, states, section hand-off
   ------------------------------------------------------------
   Layered over the base rules above (same specificity, later in the
   sheet): the chat card gets real material weight, every interactive
   control gets a visible state, and the inline card sits in the section
   as the showcase object rather than a floating form.
   ============================================================ */

.vetti-card--inline {
  border-radius: 1.35rem;
  border-color: rgba(109, 74, 177, 0.14);
  box-shadow:
    0 1px 2px rgba(43, 31, 61, 0.04),
    0 18px 40px rgba(60, 31, 120, 0.1);
}

/* Identity block: a quiet lavender head instead of another white bar. */
.vetti-card__head {
  padding: 0.85rem 1.1rem;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
}

.vetti-card__avatar {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(60, 31, 120, 0.08);
}

.vetti-card__name {
  letter-spacing: -0.01em;
}

/* ============ VETTI STATE SWAP (crossfade between approved PNGs) ===== */
/* Uses only approved assets (no generated images, no bouncing, no spinning).
   The mount element (vetti-state-swapper) wraps the avatar image; state
   classes toggle on the mount, and images crossfade by the 300ms
   transition defined on .vetti-state-swapper img. */
.vetti-state-swapper--idle .vetti-state-swapper img,
.vetti-state-swapper--main-idle .vetti-state-swapper img,
.vetti-state-swapper--main-idle-after .vetti-state-swapper img {
  opacity: 1;
}

.vetti-state-swapper--main-greeting .vetti-state-swapper img {
  opacity: 1;
}

.vetti-state-swapper--main-thinking .vetti-state-swapper img {
  opacity: 1;
}

.vetti-state-swapper--main-success .vetti-state-swapper img {
  opacity: 1;
}

.vetti-state-swapper--section-head-greeting .vetti-state-swapper img {
  opacity: 1;
}

/* ---- IDLE (default) --------------------------------------------------- */
.vetti-state-swapper--main-idle .vetti-state-swapper img {
  opacity: 1;
}

/* ---- MAIN-LEVEL IDLE WITH GREETING (short pulse on first message) ----- */
.vetti-state-swapper--main-greeting .vetti-state-swapper img {
  opacity: 1;
}

/* ---- THINKING (user sent, server pending) ----------------------------- */
.vetti-state-swapper--main-thinking .vetti-state-swapper img {
  opacity: 1;
}

/* ---- SUCCESS / HAPPY (response arrived) ------------------------------- */
.vetti-state-swapper--main-success .vetti-state-swapper img {
  opacity: 1;
}

/* ---- SECTION HEAD GREETING (decorative, on the mascot near title) ----- */
.vetti-state-swapper--section-head-greeting .vetti-state-swapper img {
  opacity: 1;
}

/* ---- TWO-POINT LEFT / RIGHT (voice navigation prompts) ---------------- */
.vetti-state-swapper--point-left .vetti-state-swapper img {
  opacity: 1;
}

.vetti-state-swapper--point-right .vetti-state-swapper img {
  opacity: 1;
}

.vetti-thread {
  padding: 1rem 1.1rem;
  gap: 0.7rem;
}

.vetti-bubble {
  padding: 0.65rem 0.9rem;
}

.vetti-bubble--vetti {
  box-shadow: 0 2px 8px rgba(60, 31, 120, 0.05);
}

.vetti-bubble--user {
  box-shadow: 0 6px 16px rgba(101, 70, 168, 0.18);
}

.vetti-msg__avatar {
  box-shadow: 0 2px 6px rgba(60, 31, 120, 0.07);
}

/* Chips: lift, then a real press. */
.vetti-chip {
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.15s ease, box-shadow 0.2s ease;
}

.vetti-chip:active {
  transform: translateY(1px) scale(0.985);
}

.vetti-chip:focus-visible,
.vetti-send:focus-visible,
.vetti-card__close:focus-visible,
.vetti-input:focus-visible {
  outline: 2px solid var(--pv-violet);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .vetti-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(60, 31, 120, 0.1);
  }
}

/* Composer: the whole row acknowledges focus, not just the input. */
.vetti-composer {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.vetti-composer:focus-within {
  background: #fdfcff;
  box-shadow: inset 0 1px 0 rgba(139, 92, 246, 0.16);
}

.vetti-send {
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.vetti-send:active {
  transform: translateY(1px) scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .vetti-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(101, 70, 168, 0.28);
  }
}

/* Vetti's inline card keeps an edge-faded motif mask; without mask
   support we drop that motif rather than let it become a full-bleed
   wallpaper. The hero decor is explicit no-repeat layers, so it needs no
   mask and renders everywhere. */
@supports not (mask-image: radial-gradient(#000 0%, transparent 100%)) {
  .vetti-inline::before {
    background-image: none;
  }
}

/* ============================================================
   6b. PHASE 2 — mobile decor simplification (single column)
   The desktop composition assumes a two-column hero: on single-column
   layouts the image sits BELOW the copy, so keep only two soft corner
   silhouettes, drop the trail, retune the cream wash to the image's new
   position, and cool the text band. Fewer marks, calmer hero.
   ============================================================ */
@media (max-width: 900px) {
  #hero.hero::before {
    /* Phase 3: mobile keeps the same staggered tile family — smaller
       tiles, softer alphas, still clearly patterned (not the old
       corner-paw decor from 2B). */
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 112 112'><g fill='%23a78bfa' fill-opacity='0.11' transform='rotate(-12 32 32)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 112 112'><g fill='%236d4ab1' fill-opacity='0.08' transform='scale(0.62) translate(16 20) rotate(14 32 32)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g></svg>");
    background-position: 0px -60px, 60px 10px;
    background-size: 120px 120px, 120px 120px;
    background-repeat: repeat;
  }

  #hero.hero {
    background-image:
      radial-gradient(64% 44% at 18% 16%, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0) 70%),
      radial-gradient(62% 30% at 50% 78%, rgba(255, 240, 222, 0.3) 0%, rgba(255, 240, 222, 0) 74%),
      linear-gradient(180deg, #f8f4fc 0%, #f5eefc 44%, #f1eafb 90%, #f5f0fc 100%);
  }
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */

@media (min-width: 769px) {
  :root {
    --vetti-floating-right: 24px;
    --vetti-floating-bottom: 24px;
    --vetti-fab-size: 78px;
    --vetti-fab-panel-gap: 14px;
  }

  .vetti-panel {
    left: auto;
    width: 340px;
    max-width: calc(100vw - 32px);
  }

  .vetti-fab__teaser {
    max-width: 12rem;
  }
}

@media (max-width: 1024px) {
  #hero.hero {
    padding: var(--pv-nav-h) 1.5rem 4rem;
  }

  #hero .hero-container {
    gap: 2rem 2.25rem;
  }

  #hero .hero-title {
    font-size: clamp(1.85rem, 3vw, 2.45rem);
  }

  #hero .hero-description {
    max-width: 30rem;
  }

  #hero .hero-visual {
    max-height: 20rem;
  }

  .vetti-inline {
    padding: 2.5rem 1.5rem 3.25rem;
  }

  .vetti-card--inline .vetti-thread {
    max-height: min(54vh, 20rem);
  }

  .vetti-card--inline .vetti-composer {
    min-height: 4rem;
  }
}

@media (max-width: 900px) {
  #hero .hero-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  #hero .hero-content {
    order: 1;
    max-width: none;
    text-align: left;
  }

  #hero .hero-title {
    font-size: clamp(1.7rem, 4.4vw, 2.25rem);
  }

  #hero .hero-description {
    max-width: 38rem;
  }

  #hero .hero-visual {
    order: 2;
    height: auto;
    aspect-ratio: 16 / 10;
    max-width: 40rem;
    margin-inline: auto;
    max-height: none;
  }

  .vetti-card--inline .vetti-thread {
    max-height: min(54vh, 20rem);
  }
}

@media (max-width: 768px) {
  :root {
    --pv-nav-h: 68px;
  }

  header {
    padding: 0.5rem 0.75rem 0;
  }

  .navbar {
    min-height: 3.75rem;
    padding: 0.35rem 0.5rem 0.35rem 0.85rem;
    gap: 0.5rem;
  }

  .logo-img {
    height: 2rem;
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    padding: 0.5rem;
    gap: 0.1rem;
    flex-direction: column;
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(109, 74, 177, 0.1);
    border-radius: 1.15rem;
    box-shadow: 0 16px 40px rgba(60, 31, 120, 0.16);
    transform: translateY(-0.5rem);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .nav-menu.active {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu .nav-link {
    display: block;
    padding: 0.8rem 1rem;
    border-radius: 0.85rem;
    color: var(--pv-body);
  }

  .nav-menu .nav-link::after {
    display: none;
  }

  .nav-menu .nav-link:hover,
  .nav-menu .nav-link.active {
    background: var(--pv-soft);
    color: var(--pv-purple);
  }

  .nav-menu .nav-menu-auth {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.6rem 0.5rem 0.4rem;
    border-top: 1px solid var(--pv-line);
  }

  .nav-menu .nav-auth-btn {
    padding: 0.75rem 1rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
  }

  .hamburger {
    min-width: 44px;
    min-height: 44px;
    padding: 0.75rem 0.6rem;
  }

  .mobile-overlay {
    background: rgba(43, 31, 61, 0.35);
  }

  #hero.hero {
    padding: var(--pv-nav-h) 1rem 3.5rem;
  }

  #hero .hero-scroll-cue {
    bottom: 1rem;
    padding: 0.45rem 0.85rem;
    min-height: 44px;
    font-size: 0.68rem;
  }

  .vetti-inline__head .vetti-state-swapper {
    width: 104px;
    height: 104px;
  }

  .vetti-inline__head {
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
  }

  #hero .hero-cta {
    gap: 0.6rem;
    justify-content: flex-start;
  }

  #hero .hero-cta .btn {
    flex: 1 1 12rem;
    justify-content: center;
    padding: 0.95rem 1.15rem;
    min-height: 46px;
    font-size: 0.9rem;
  }

  #hero .hero-description {
    max-width: none;
  }

  #hero .hero-visual {
    order: 2;
    height: auto;
  }

  .vetti-inline {
    padding: 1.75rem 1rem 2.25rem;
  }

  .vetti-card--inline .vetti-thread {
    max-height: min(46vh, 22rem);
  }

  .vetti-inline__head h2 {
    font-size: 1.4rem;
  }

  .vetti-send {
    width: 44px;
    height: 44px;
  }

  .vetti-card__close {
    width: 44px;
    height: 44px;
  }

  .vetti-input {
    min-height: 44px;
  }

  .vetti-chip {
    min-height: 38px;
  }

  .vetti-chip {
    font-size: 0.76rem;
  }

  .vetti-msg__avatar {
    width: 1.6rem;
    height: 1.6rem;
  }

  .vetti-bubble {
    font-size: 0.86rem;
    max-width: 86%;
  }
}

/* Any touch screen, not only narrow ones (tablets): the cue and the CTAs get
   a comfortable target even where the desktop layout is still in play. */
@media (pointer: coarse) {
  #hero .hero-scroll-cue {
    min-height: 44px;
  }

  #hero .hero-cta .btn {
    min-height: 46px;
  }
}

@media (max-width: 430px) {
  :root {
    --pv-nav-h: 63px;
  }

  .vetti-inline__head .vetti-state-swapper {
    width: 96px;
    height: 96px;
  }

  #hero .hero-cta {
    flex-direction: column;
  }

  #hero .hero-cta .btn {
    flex: 0 0 auto;
    width: 100%;
  }

  #hero .hero-visual {
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .vetti-fab__teaser {
    max-width: 12rem;
    font-size: 13px;
    padding: 0.45rem 0.5rem 0.45rem 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vetti-panel,
  .vetti-fab__btn,
  .vetti-fab__teaser,
  .vetti-chip,
  .vetti-msg,
  .vetti-send,
  #hero .hero-cta .btn,
  #hero .hero-visual,
  #hero .hero-scroll-cue,
  #hero .hero-scroll-cue__chevron {
    animation: none;
    transition: none;
  }

  .vetti-dots i {
    animation: none;
    opacity: 0.7;
  }

  #hero .hero-scroll-cue__chevron,
  #hero .hero-visual:hover,
  #hero .hero-cta .btn:hover,
  #hero .hero-cta .btn:hover svg,
  .vetti-chip:hover,
  .vetti-send:hover {
    transform: none;
  }

  .vetti-thread {
    scroll-behavior: auto;
  }
}

/* Touch screens: the floating button and its hit target get a comfortable
   tap height (the mascot is large and transparent per request 14). The
   panel's bottom offset follows --vetti-fab-size, so geometry stays
   consistent on touch devices too. */
@media (pointer: coarse) {
  :root {
    --vetti-fab-size: 88px;
  }
}

/* Floating Vetti state swap: idle -> greeting on hover/tap, active on chat
   open, thinking inside the panel when the user sends. No bounce, no spin,
   no glow - a short crossfade between approved Vetti states. */
@media (hover: hover) and (pointer: fine) {
  .vetti-fab__btn:active img {
    opacity: 0.82;
  }
}

/* ============ FLOATING CHAT OPEN ANIMATION ============================== */
.vetti-panel {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.vetti-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .vetti-panel {
    transition: opacity 0.15s ease;
    transform: none;
  }
  .vetti-panel.is-open {
    transform: none;
  }
}

/* ============ FLOATING VETTI TEASER ALIGNMENT ========================== */
/* This legacy block is intentionally neutralized; the canonical teaser
   styling lives in the main .vetti-fab__teaser rule above. */
.vetti-fab__teaser {
  /* keep layout hook only */
}

.vetti-fab__teaser strong {
  color: var(--pv-purple);
}

.vetti-fab__teaser.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .vetti-fab__teaser:hover {
    background: var(--pv-soft);
    border-color: #c9b6ee;
    color: var(--pv-purple-deep);
  }
}

/* Service/About/Contact floating launcher: the teaser and mascot stay in one
   horizontal row. The teaser order is adjusted in JS based on the snapped
   screen edge. */
.vetti-fab__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.vetti-fab__btn img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Chat content keeps its paragraph/list structure instead of collapsing into a wall of text. */
.vetti-bubble--vetti > * { margin: 0; }
.vetti-bubble--vetti > * + * { margin-top: 0.6rem; }
.vetti-message-list { padding-inline-start: 1.2rem; }
.vetti-message-list > li { break-inside: avoid; padding-inline-start: 0.15rem; }
.vetti-message-list > li + li { margin-top: 0.25rem; }
@media (min-width: 700px) {
  .vetti-message-list--long { column-count: 2; column-gap: 1.75rem; }
}

/* Phase 4C: mobile-only drag affordance */
@media (max-width: 767px) {
  .vetti-fab,
  .vetti-fab__btn {
    touch-action: none;
  }

  .vetti-fab__btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .vetti-fab__btn img {
    -webkit-user-drag: none;
    user-drag: none;
  }

  .vetti-fab.is-dragging,
  .vetti-fab.is-dragging .vetti-fab__btn {
    cursor: grabbing;
  }

  .vetti-fab.is-dragging .vetti-fab__btn {
    transform: none;
  }

  /* While the centred chat is open, hide the floating head and teaser so
     they cannot sit on top of the panel. The panel itself is a sibling and
     stays visible. */
  .vetti-fab.is-open .vetti-fab__btn,
  .vetti-fab.is-open .vetti-fab__teaser {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Messenger-style centred mobile panel, independent of the drag position. */
  .vetti-panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(calc(100vw - 24px), 30rem);
    height: calc(100vh - 24px);
    height: min(calc(100dvh - 24px), 680px);
    max-height: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
    z-index: 1700;
  }

  .vetti-panel.is-open {
    transform: translate(-50%, -50%);
  }

  /* Keyboard-open presentation override, set from visualViewport. */
  .vetti-panel.is-vv-adjusted {
    top: var(--vetti-vv-top, 50%);
    height: var(--vetti-vv-height, min(calc(100dvh - 24px), 680px));
    max-height: none;
    transform: translate(-50%, -50%);
  }

  .vetti-panel .vetti-card {
    height: 100%;
  }

  .vetti-panel .vetti-card__head {
    padding-top: max(0.85rem, env(safe-area-inset-top));
    gap: 0.5rem;
  }

  .vetti-panel .vetti-composer {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .vetti-panel .vetti-thread {
    overscroll-behavior: contain;
  }

  /* Phase 4D: mobile readability and touch targets. These rules are
     intentionally scoped below 768px so the desktop chat stays unchanged. */
  .vetti-card__head {
    gap: 0.5rem;
    padding: 12px 16px;
  }

  .vetti-card__name {
    font-size: 16px;
    line-height: 1.2;
  }

  .vetti-card__role {
    font-size: 12px;
    line-height: 1.35;
  }

  .vetti-card--panel .vetti-card__avatar {
    width: 36px;
    height: 36px;
  }

  .vetti-thread {
    gap: 10px;
    padding: 14px 16px;
  }

  .vetti-bubble {
    font-size: 15px;
    line-height: 1.55;
    padding: 12px 14px;
  }

  .vetti-composer {
    gap: 10px;
    padding: 12px 16px;
  }

  .vetti-input {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 16px;
    line-height: 1.4;
  }

  .vetti-send {
    width: 44px;
    height: 44px;
  }

  .vetti-suggest {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 16px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .vetti-suggest::-webkit-scrollbar {
    height: 3px;
  }

  .vetti-suggest::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #ded3f4;
  }

  .vetti-suggest.is-scrollable {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }

  .vetti-suggest.is-scrollable.is-scroll-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .vetti-chip {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.35;
    scroll-snap-align: start;
  }

  .vetti-note {
    padding: 6px 16px 8px;
    font-size: 11.5px;
    line-height: 1.4;
  }

  .vetti-card--inline .vetti-thread {
    max-height: min(62vh, 26rem);
  }
}

/* Panel header: avatar on the upper-right, separate close button after it. */
.vetti-card--panel .vetti-card__identity {
  margin-right: 0;
}

.vetti-card--panel .vetti-card__avatar {
  order: 2;
  margin-left: auto;
  margin-right: 0.15rem;
  width: 2rem;
  height: 2rem;
}

.vetti-card--panel .vetti-card__close {
  order: 3;
}

@media (max-width: 767px) {
  /* These need to sit after the panel header block so they win the cascade
     against the legacy panel-specific avatar and note rules. */
  .vetti-panel .vetti-card__avatar {
    width: 36px;
    height: 36px;
  }

  .vetti-panel .vetti-note {
    padding: 6px 12px 8px;
    font-size: 11px;
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vetti-fab__btn,
  .vetti-fab__btn img,
  .vetti-panel {
    transition: none;
  }
}

/* ============================================================
   PHASE 4F — REAL-PHONE MOBILE UX
   Compact privacy, horizontal suggestions, and keyboard-open
   presentation. Desktop rules above are intentionally untouched.
   ============================================================ */

.vetti-privacy__details summary:focus-visible,
.vetti-privacy__policy:focus-visible {
  outline: 2px solid var(--pv-violet);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  /* The keyboard leaves only the visual viewport usable. Keep identity and
     the close button, but remove the secondary role line and tighten every
     vertical gap so the composer stays above the keyboard. */
  .vetti-panel.is-vv-adjusted .vetti-card__head {
    gap: 6px;
    padding: 4px 12px;
  }

  .vetti-panel.is-vv-adjusted .vetti-card__avatar {
    width: 32px;
    height: 32px;
  }

  .vetti-panel.is-vv-adjusted .vetti-card__name {
    font-size: 15px;
  }

  .vetti-panel.is-vv-adjusted .vetti-card__role {
    display: none;
  }

  .vetti-panel.is-vv-adjusted .vetti-card__close,
  .vetti-panel.is-vv-adjusted .vetti-send {
    width: 44px;
    height: 44px;
  }

  .vetti-panel.is-vv-adjusted .vetti-thread {
    gap: 7px;
    padding: 8px 12px;
  }

  .vetti-panel.is-vv-adjusted .vetti-suggest {
    padding: 6px 12px 7px;
  }

  .vetti-panel.is-vv-adjusted .vetti-chip {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .vetti-panel.is-vv-adjusted .vetti-composer {
    gap: 8px;
    padding: 7px 12px;
  }

  .vetti-panel.is-vv-adjusted .vetti-input {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* The reminder stays in the interface while the keyboard is closed. With
     the keyboard up only the disclosure control remains, so required
     privacy details are still reachable without stealing message height. */
  .vetti-panel.is-vv-adjusted .vetti-note,
  .vetti-mount.vetti-keyboard-open .vetti-card--inline .vetti-note {
    padding: 2px 12px 4px;
    font-size: 11px;
    line-height: 1.35;
  }

  .vetti-panel.is-vv-adjusted .vetti-privacy__reminder,
  .vetti-mount.vetti-keyboard-open .vetti-privacy__reminder {
    display: none;
  }

  .vetti-panel.is-vv-adjusted .vetti-privacy__details,
  .vetti-mount.vetti-keyboard-open .vetti-privacy__details {
    margin-top: 0;
  }

  .vetti-panel.is-vv-adjusted .vetti-privacy__details summary,
  .vetti-mount.vetti-keyboard-open .vetti-privacy__details summary {
    min-height: 28px;
    font-size: 11px;
  }

  /* Homepage: keep normal document scrolling. The composer remains in flow;
     only the footer tightens while the keyboard is visible. */
  .vetti-mount.vetti-keyboard-open .vetti-card--inline .vetti-composer {
    padding-block: 10px;
  }

  .vetti-mount.vetti-keyboard-open .vetti-card--inline .vetti-input {
    scroll-margin-block: 12px;
  }
}


/* Service cards share the Owner chat markup while keeping the public composer compact. */
.vetti-typing-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.vetti-typing-status .vetti-dots {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.vetti-public-service-cards .vetti-service-categories {
  display: grid;
  gap: 0.5rem;
  margin: 0.65rem 0;
}
.vetti-public-service-cards .vetti-service-category {
  display: block;
  min-width: 0;
  max-width: none;
  background: #fbf9ff;
  border: 1px solid var(--pv-line);
  border-inline-start: 3px solid var(--pv-accent, #7255ad);
  border-radius: 0.65rem;
  box-shadow: none;
}
.vetti-public-service-cards summary {
  cursor: pointer;
  padding: 0.55rem 0.65rem;
  overflow-wrap: anywhere;
}
.vetti-public-service-cards .vetti-service-name,
.vetti-public-service-cards .vetti-service-item-name { font-weight: 700; }
.vetti-public-service-cards .vetti-service-count,
.vetti-public-service-cards .vetti-service-price,
.vetti-public-service-cards .vetti-service-item-price,
.vetti-public-service-cards .vetti-service-detail-body {
  display: block;
  color: var(--pv-ink);
  font-size: 0.8em;
  padding-inline-start: 0.65rem;
}
.vetti-public-service-cards .vetti-service-items {
  list-style: none;
  margin: 0;
  padding: 0 0.35rem;
}
.vetti-public-service-cards .vetti-card-note { padding: 0 0.65rem 0.5rem; }
.vetti-public-service-cards .vetti-inline-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: 700;
  color: var(--pv-ink);
}