/* Averce layer over the HypeApp export: base rules the export dropped, the header's two states,
   the connector ticker, example cards, the QR card and the aurora accents. */
:root {
  --av-blue: #7690e6;
  --av-violet: #b2a6f2;
  --av-peach: #f0b48e;
  --av-ink: #0a0a0a;
  --av-line: #171717;
  --av-line-2: #262626;
  --av-text: #f5f5f5;
  --av-text-2: #d4d4d4;
  --av-mute: #a3a3a3;
  --av-aurora: linear-gradient(135deg, var(--av-blue) 0%, var(--av-violet) 60%, var(--av-peach) 120%);
  color-scheme: dark;
}

/* Framer's base rules, missing from the export: without them every padded box grows by its padding */
html, body { box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

/* ---------- header: compact centred bar at the top, logo left and button right once scrolled ---------- */
/* under reduced motion the export switches every transition and animation off (.export-layout *);
   these keep the header's own motion, and are switched off again below for reduced motion */
.export-layout nav.framer-1263x2j .framer-1ingnka,
.export-layout nav.framer-1263x2j .framer-1bqpxy6 { transition: transform .7s cubic-bezier(.22, 1, .36, 1) !important; will-change: transform; }
.export-layout .export-center-nav { transition: opacity .35s ease, transform .7s cubic-bezier(.22, 1, .36, 1) !important; }
.export-layout .export-center-nav a { transition: color .2s ease !important; }
html .export-layout .export-center-nav {
  top: 30px; height: 60px; padding: 14px 20px; gap: 24px; align-items: center;
  background: transparent; border: 1px solid rgba(250, 250, 250, .05); border-radius: 33px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html .export-layout .export-center-nav a { font: 400 16px/25.6px Inter, "Inter Placeholder", sans-serif; color: #d4d4d4; white-space: nowrap; }
.export-center-nav a:hover { color: #d9d2ff; }
html.av-scrolled .export-layout .export-center-nav { opacity: 0; transform: translate(-50%, -10px) scale(.96); pointer-events: none; }
html.av-measure .export-layout nav.framer-1263x2j .framer-1ingnka,
html.av-measure .export-layout nav.framer-1263x2j .framer-1bqpxy6,
html.av-measure .export-layout .export-center-nav { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html .export-layout nav.framer-1263x2j .framer-1ingnka, html .export-layout nav.framer-1263x2j .framer-1bqpxy6, html .export-layout .export-center-nav { transition: none !important; }
}

/* ---------- integrations: two masked columns scrolling in opposite directions ---------- */
.export-desktop [data-framer-name="Integrations"] { flex: 0 0 658px; width: 658px; height: 370px; }
.export-desktop [data-framer-name="Scrolling capabilities"] { flex: none; width: 330px; height: 370px; }
.av-ticker {
  position: relative; width: 100%; height: 100%; overflow: hidden; padding: 10px;
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0) 0%, #000 12.5%, #000 87.5%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(rgba(0,0,0,0) 0%, #000 12.5%, #000 87.5%, rgba(0,0,0,0) 100%);
}
.av-track { display: flex; flex-direction: column; gap: 10px; }
.export-layout .av-track { animation: av-up 26s linear infinite !important; }
.export-layout .av-ticker[data-dir="down"] .av-track { animation-name: av-down !important; }
.av-ticker:hover .av-track { animation-play-state: paused !important; }
@keyframes av-up { from { transform: translateY(0); } to { transform: translateY(-744px); } }
@keyframes av-down { from { transform: translateY(-744px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { html .export-layout .av-track { animation: none !important; } }
/* tablet and phone: the original turns the columns into rows scrolling sideways (one row on a phone) */
.export-phone [data-framer-name="Scrolling capabilities"]:has(.av-ticker[data-dir="down"]) { display: none !important; }
.export-tablet [data-framer-name="Integrations"], .export-phone [data-framer-name="Integrations"] { height: auto !important; display: flex; flex-direction: column; gap: 10px; }
.export-tablet [data-framer-name="Scrolling capabilities"], .export-phone [data-framer-name="Scrolling capabilities"] { width: 100%; height: 196px; flex: none; }
.export-tablet .av-ticker, .export-phone .av-ticker {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 12.5%, #000 87.5%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 12.5%, #000 87.5%, rgba(0,0,0,0) 100%);
}
.export-tablet .av-track, .export-phone .av-track { flex-direction: row; width: max-content; }
.export-tablet .av-int, .export-phone .av-int { width: 320px; }
html .export-tablet .av-track, html .export-phone .av-track { animation-name: av-left !important; }
html .export-tablet .av-ticker[data-dir="down"] .av-track, html .export-phone .av-ticker[data-dir="down"] .av-track { animation-name: av-right !important; }
@keyframes av-left { from { transform: translateX(0); } to { transform: translateX(-1320px); } }
@keyframes av-right { from { transform: translateX(-1320px); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { html .export-tablet .av-track, html .export-phone .av-track { animation: none !important; } }

.av-int {
  flex: none; height: 176px; padding: 25px; display: flex; flex-direction: column; gap: 15px;
  background: var(--av-ink); border: 1px solid var(--av-line); border-radius: 19px;
  font-family: Inter, "Inter Placeholder", sans-serif;
}
.av-int-top { display: flex; align-items: center; gap: 10px; }
.av-int-ico { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: #f5f5f7; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px -8px rgba(118,144,230,.55); }
.av-int-ico svg { width: 18px; height: 18px; display: block; }
.av-int-name { font-size: 23px; line-height: 32.2px; color: var(--av-text-2); }
.av-int-desc { font-size: 16px; line-height: 25.6px; color: var(--av-mute); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- examples: the testimonial layout carrying real sample conversations ---------- */
.av-ex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.av-ex-card {
  min-height: 469px; padding: 70px 40px; display: flex; flex-direction: column; gap: 30px;
  background: var(--av-ink); border: 1px solid var(--av-line-2); border-radius: 48px;
  font-family: Inter, "Inter Placeholder", sans-serif; position: relative; overflow: hidden;
}
.av-ex-card::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 80%; background: radial-gradient(closest-side, rgba(118,144,230,.10), rgba(178,166,242,.05) 60%, transparent); pointer-events: none; }
.av-ex-label { display: flex; align-items: center; gap: 10px; height: 24px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--av-mute); }
.av-ex-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--av-aurora); box-shadow: 0 0 12px rgba(150,160,240,.8); }
.av-ex-body { display: flex; flex-direction: column; gap: 10px; }
.av-ex-q { font-size: 23px; line-height: 32.2px; font-weight: 400; color: var(--av-text); }
.av-ex-a { font-size: 18px; line-height: 28.8px; color: var(--av-mute); }
.av-ex-by { margin-top: auto; display: flex; align-items: center; gap: 15px; }
.av-ex-by img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.av-ex-n { font-size: 19px; line-height: 26.6px; color: #fafafa; }
.av-ex-r { font-size: 16px; line-height: 22.4px; color: var(--av-mute); }
.export-tablet .av-ex, .export-phone .av-ex { grid-template-columns: 1fr; }
.export-tablet .av-ex-card { min-height: 408px; }
.export-phone .av-ex-card { min-height: 519px; padding: 70px 40px 50px; }
.export-phone .av-ex-q { font-size: 21px; line-height: 29.4px; }

/* ---------- QR card ---------- */
.av-qr { position: relative; flex: none; width: 305px; height: 305px; padding: 40px; border-radius: 47px; }
.av-qr img { position: relative; z-index: 1; width: 225px; height: 225px; border-radius: 23px; display: block; background: #fff; }
.av-qr-glow { position: absolute; left: 30px; top: 30px; width: 245px; height: 245px; border-radius: 26px; background: var(--av-aurora); filter: blur(22px); opacity: .75; }
.export-desktop [id$="-qr"] [data-framer-name="Contents"] { display: flex; flex-direction: row; align-items: center; gap: 40px; padding: 20px; }
.export-desktop [id$="-qr"] [data-framer-name="Texts & Buttons"] { flex: 1 1 0; min-width: 0; }
.export-tablet [id$="-qr"] [data-framer-name="Contents"],
.export-phone [id$="-qr"] [data-framer-name="Contents"] { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 20px; }
.export-tablet [id$="-qr"] [data-framer-name="Texts & Buttons"],
.export-phone [id$="-qr"] [data-framer-name="Texts & Buttons"] { align-self: stretch; }
/* even two-line headings, as the original's are */
.export-layout h1, .export-layout h2, .export-layout h3, .export-layout h4 { text-wrap: balance; }

/* ---------- image sizes Framer resolves through its runtime aspect-ratio variable ---------- */
.export-desktop .framer-1fj1i8d { width: 450px; height: 450px; min-height: 0; flex: none; }
.export-desktop .framer-1o5rqb2 { width: 421px; height: 421px; flex: none; }

/* ---------- wordmark: header (no icon, just the word) and footer ---------- */
.av-logo { padding: 0 8px; }
.av-wm { display: block; color: #e5e5e5; }
.av-wm-head { height: 14px; width: auto; aspect-ratio: 650 / 100; }
.av-wm-foot { width: 100%; height: auto !important; aspect-ratio: 650 / 100; color: #ececf1; }

/* ---------- feature tabs ---------- */
.av-tab { cursor: pointer; position: relative; overflow: hidden; transition: box-shadow .5s ease, background-color .5s ease !important; }
.av-tab h5, .av-tab h5 .framer-text { transition: color .4s ease !important; }
.av-tab:not(.av-tab-on) { box-shadow: none !important; }
.av-tab:not(.av-tab-on) h5, .av-tab:not(.av-tab-on) h5 .framer-text { color: #8e8e93 !important; }
.av-tab:not(.av-tab-on):hover h5, .av-tab:not(.av-tab-on):hover h5 .framer-text { color: #c7c7cc !important; }
.av-tab.av-tab-on { box-shadow: rgba(255, 255, 255, .22) 0 0 30px 0 inset, inset 0 1px 0 rgba(255, 255, 255, .18) !important; }
.av-tab.av-tab-on h5, .av-tab.av-tab-on h5 .framer-text { color: #f5f5f5 !important; }
.av-tab:focus { outline: none; }
.av-tab:focus-visible { outline: 2px solid rgba(201, 194, 255, .55); outline-offset: 3px; }
.av-tab-bar { position: absolute; left: 34px; right: 34px; bottom: 16px; height: 2px; border-radius: 2px; background: var(--av-aurora); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.av-tab-on .av-tab-bar { opacity: .9; }
.av-tabimgs { position: absolute; inset: 0; border-radius: inherit; }
.av-tabimgs img { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); transition: opacity .7s ease, transform 1s cubic-bezier(.16, 1, .3, 1) !important; }
.av-tabimgs img.av-tab-show { opacity: 1; transform: none; }

/* ---------- hero: glass notifications around the phone ---------- */
.av-chips { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.av-chip {
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 22px;
  font-family: -apple-system, "SF Pro Text", Inter, sans-serif; color: #f5f5f7; white-space: nowrap;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 50px -22px rgba(0,0,0,.9);
}
.av-chip > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.av-chip b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.av-chip i { font-style: normal; font-size: 13px; color: rgba(235,235,245,.62); }
.av-chip-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 18px rgba(150,160,240,.35); flex: none; }
.av-chip-ic svg { width: 17px; height: 17px; color: #f5f5f7; }
.av-chip-a { left: 13%; top: 40%; }
.av-chip-b { right: 12%; top: 27%; }
.av-chip-c { right: 9%; top: 63%; }
.export-tablet .av-chip-a { left: 4%; } .export-tablet .av-chip-b { right: 3%; } .export-tablet .av-chip-c { right: 2%; }
html.av-motion .av-chip { animation: av-chip-in 1.2s cubic-bezier(.16, 1, .3, 1) both, av-float 7s ease-in-out infinite !important; }
html.av-motion .av-chip-a { animation-delay: 1.1s, 2.3s !important; }
html.av-motion .av-chip-b { animation-delay: 1.35s, 2.6s !important; }
html.av-motion .av-chip-c { animation-delay: 1.6s, 2.9s !important; }
@keyframes av-chip-in { from { opacity: 0; transform: translate3d(0, 40px, 0) scale(.92); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes av-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }

/* ---------- scroll motion (only when motion is allowed) ---------- */
html.av-motion .av-rise {
  opacity: 0 !important; transform: translate3d(0, 64px, 0) scale(.965) !important; filter: blur(10px);
  transition: opacity .9s ease, transform 1.25s cubic-bezier(.16, 1, .3, 1), filter 1s ease !important; transition-delay: var(--av-d, 0ms) !important;
}
html.av-motion .av-rise.av-in { opacity: 1 !important; transform: none !important; filter: none; }
html.av-motion .av-wipe { clip-path: inset(0 0 100% 0); transform: translate3d(0, 28px, 0) !important; transition: clip-path 1.15s cubic-bezier(.16, 1, .3, 1), transform 1.15s cubic-bezier(.16, 1, .3, 1) !important; transition-delay: .12s !important; }
html.av-motion .av-wipe.av-in { clip-path: inset(-20% -5% -20% -5%); transform: none !important; }
html.av-motion .av-lit { opacity: .2; transition: opacity .45s ease !important; }
html.av-motion .av-lit.av-on { opacity: 1; }
html.av-motion .av-para { will-change: transform; }
html.av-motion [data-framer-name="Image Box"] img { will-change: transform; transform-origin: 50% 50%; }
html.av-motion body::before {
  content: ""; position: fixed; left: 0; top: 0; z-index: 10000; width: 100%; height: 2px; pointer-events: none;
  background: var(--av-aurora); transform: scaleX(var(--av-progress, 0)); transform-origin: 0 50%; opacity: .85;
}

/* ---------- cursor spotlight on cards ---------- */
.av-spot-host { position: relative; }
.av-spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 2;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(178, 166, 242, .10), rgba(118, 144, 230, .04) 45%, transparent 70%);
  transition: opacity .4s ease !important; }
.av-spot-host:hover .av-spot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html .av-chip { animation: none !important; }
  html .av-tabimgs img { transition: none !important; }
}

/* ---------- waitlist ---------- */
.av-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; max-width: 560px; font-family: Inter, "Inter Placeholder", sans-serif; }
.av-wait input[type=email] {
  flex: 1 1 240px; min-width: 0; height: 57px; padding: 0 24px; border-radius: 33px; border: 0; outline: none;
  font: 400 16px/1 Inter, "Inter Placeholder", sans-serif; color: #f5f5f5; background: rgba(250, 250, 250, .05);
  box-shadow: inset 0 0 0 1px rgba(230, 230, 230, .1), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow .25s ease !important;
}
.av-wait input[type=email]::placeholder { color: #8e8e93; }
.av-wait input[type=email]:focus { box-shadow: inset 0 0 0 1px rgba(201, 194, 255, .55), 0 0 0 4px rgba(150, 160, 240, .14); }
.av-wait button {
  flex: none; height: 57px; padding: 0 26px; border: 0; border-radius: 33px; cursor: pointer;
  font: 600 16px/1 Inter, "Inter Placeholder", sans-serif; color: #0a0a0a; background: #f5f5f5;
  box-shadow: 0 12px 30px -14px rgba(178, 166, 242, .8); transition: transform .2s ease, box-shadow .2s ease !important;
}
.av-wait button:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -14px rgba(178, 166, 242, .95); }
.av-wait button:focus-visible { outline: 2px solid rgba(201, 194, 255, .7); outline-offset: 3px; }
.av-wait button:disabled { opacity: .6; cursor: default; }
.av-wait-msg { flex: 1 0 100%; min-height: 1.4em; margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: #a3a3a3; }
.av-wait .hp, .av-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.export-phone .av-wait button { flex: 1 1 100%; }

/* averce.org's host re-indents the served HTML; Framer's pre-wrap text would render that indentation as blank lines */
.export-layout .framer-text, .export-layout [data-framer-component-type="RichTextContainer"] { white-space: normal !important; }
.av-wm, .av-wm * { white-space: normal !important; }
.export-layout [data-framer-name$="Button"] .framer-text, .export-layout [data-framer-name$="Button"] [data-framer-component-type="RichTextContainer"] { white-space: nowrap !important; }