@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');
/* Elva Campaign — Chat. Scoped port of standalone export (chat-campaign.css). Dark canvas on .elva-pg.elva-camp wrapper; :root vars + keyframes kept global. Generated; mirror chat-campaign.css for design changes. */
:root {
  --bg:        #F6F7F4;
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #EEF0EB;
  --surface-3: #E2E5DE;
  --line:      rgba(0,0,0,0.10);
  --line-2:    rgba(0,0,0,0.16);

  --cream:  #1A1C19;
  --mute:   #5C6159;
  --mute-2: #8A8F86;

  --ai-3: #9B5CFF;
  --ai-4: #5B8DEF;
  --ai-5: #3FB8A8;
  --grad: linear-gradient(105deg, var(--ai-3), var(--ai-4) 48%, var(--ai-5) 92%);
  --sage: #6E8A4F;
  --green: #2FA56E;
  --gold:  #C8881F;

  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1340px;
  --ease: cubic-bezier(0.22, 0.8, 0.36, 1);
  --ease-io: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ping { 0% { opacity:.9; transform:scale(1); } 100% { opacity:0; transform:scale(3); } }
@keyframes ctyp { 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-4px) } }
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   ELVA CHAT — "Talk to your practice. It answers."
   Campaign page. Reuses the "It Starts Here" editorial system,
   every card is a LIVE chat simulation of Elva Chat (PMS copilot).
   ============================================================ */




.elva-pg * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }



.elva-pg a { color: inherit; text-decoration: none; }
.elva-pg button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.elva-pg img { display: block; max-width: 100%; }
.elva-pg ::selection { background: rgba(155,92,255,.35); color: #fff; }
.elva-pg :focus-visible { outline: 2px solid var(--ai-4); outline-offset: 3px; }

.elva-pg .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.elva-pg .spectrum { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.elva-pg .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.elva-pg .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }

.elva-pg .live { position: relative; display: inline-block; width: 7px; height: 7px; }
.elva-pg .live::before { content:''; position:absolute; inset:0; border-radius:50%; background: var(--ai-5); box-shadow: 0 0 10px var(--ai-5); }
.elva-pg .live::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid var(--ai-5); animation: ping 2.4s var(--ease) infinite; }


/* ---- ambient AI grain + glow ---- */
.elva-pg .amb { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.elva-pg .amb .g1, .elva-pg .amb .g2 { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .5; }
.elva-pg .amb .g1 { width: 720px; height: 720px; top: -240px; left: -160px; background: radial-gradient(circle, rgba(155,92,255,.22), transparent 70%); }
.elva-pg .amb .g2 { width: 680px; height: 680px; bottom: -260px; right: -180px; background: radial-gradient(circle, rgba(63,184,168,.18), transparent 70%); }
.elva-pg .grain { position: fixed; inset: 0; z-index: 1; opacity: .035; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.elva-pg main { position: relative; z-index: 2; }

/* ---- buttons ---- */
.elva-pg .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; padding: 13px 22px; border-radius: 999px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.elva-pg .btn .ico { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; transition: transform .3s var(--ease); }
.elva-pg .btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.elva-pg .btn-primary { background: var(--cream); color: #0a0a0c; }
.elva-pg .btn-primary .ico { background: #0a0a0c; color: var(--cream); }
.elva-pg .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -16px rgba(255,255,255,.35); }
.elva-pg .btn-primary:hover .ico { transform: translateX(3px); }
.elva-pg .btn-ghost { border: 1px solid var(--line-2); color: var(--cream); }
.elva-pg .btn-ghost:hover { background: rgba(255,255,255,.05); transform: translateY(-2px); }
.elva-pg .btn-lg { padding: 17px 30px; font-size: 17px; }

/* ---- glass primitive ---- */
.elva-pg .glass { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border-radius: 24px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.elva-pg .glass::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 35%, rgba(91,141,239,.22) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }

/* ============================================================ NAV */
.elva-pg .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 0; transition: background .4s var(--ease), border-color .4s, padding .4s; border-bottom: 1px solid transparent; }
.elva-pg .nav.scrolled { background: rgba(10,11,10,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line); padding: 13px 0; }
.elva-pg .nav-inner { display: flex; align-items: center; gap: 14px; }
.elva-pg .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.elva-pg .brand-mark { width: 19px; height: 19px; border-radius: 6px; background: var(--grad); box-shadow: 0 0 18px rgba(91,141,239,.5); }
.elva-pg .brand-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.elva-pg .nav .spacer { flex: 1; }

/* ============================================================ INTRO HERO */
.elva-pg .intro { position: relative; height: 240vh; }
.elva-pg .intro-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: 120px 0 60px; }
.elva-pg .intro-grid { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: 54px; align-items: center; width: 100%; }
.elva-pg .intro-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.elva-pg .intro h1 { font-size: clamp(46px, 6.6vw, 96px); line-height: .92; letter-spacing: -0.04em; font-weight: 700; margin: 0; text-transform: uppercase; }
.elva-pg .intro h1 .serif { display: block; text-transform: none; font-size: 1.02em; line-height: .98; letter-spacing: -0.01em; }
.elva-pg .intro-lead { margin: 32px 0 0; max-width: 470px; font-size: 18px; line-height: 1.6; color: var(--mute); }
.elva-pg .intro-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.elva-pg .intro-foot { margin-top: 30px; display: flex; gap: 18px; flex-wrap: wrap; }
.elva-pg .intro-foot span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.elva-pg .intro-foot svg { width: 14px; height: 14px; stroke: var(--ai-5); stroke-width: 1.9; fill: none; }

/* fanned chat cards */
.elva-pg .fan { position: relative; height: 500px; }
.elva-pg .fan-card { position: absolute; top: 50%; left: 50%; width: 326px; height: 432px; transform-origin: bottom center; transition: opacity .5s var(--ease-io); }
.elva-pg .fan-card[data-i="0"] { z-index: 1; transform: translate(calc(-50% - 18px), calc(-50% + 20px)) rotate(-4deg); }
.elva-pg .fan-card[data-i="1"] { z-index: 2; transform: translate(calc(-50% + 6px), -50%) rotate(3deg); }
.elva-pg .fan-card[data-i="2"] { z-index: 3; transform: translate(calc(-50% + 28px), calc(-50% - 20px)) rotate(7deg); }
html.js .elva-pg .fan-card { opacity: 0; }
html.js .elva-pg .fan-card.in { opacity: 1; }

/* ============================================================
   CHAT WINDOW (the Elva Chat product UI) — used everywhere
   ============================================================ */
.elva-pg .chatwin { position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #121412, #0d0f0d); box-shadow: 0 40px 90px -44px rgba(0,0,0,.9); }
.elva-pg .chatwin::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.03) 42%, rgba(91,141,239,.26)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; z-index: 6; }

.elva-pg .cw-bar { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); position: relative; z-index: 4; }
.elva-pg .cw-dots { display: flex; gap: 6px; }
.elva-pg .cw-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.elva-pg .cw-url { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--mute); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.elva-pg .cw-url b { color: var(--cream); font-weight: 600; }
.elva-pg .cw-loc { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-2); }
.elva-pg .cw-loc .live { width: 6px; height: 6px; }

.elva-pg .cw-feed { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.elva-pg .cw-feed::-webkit-scrollbar { width: 7px; }
.elva-pg .cw-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }
.elva-pg .cw-feed::-webkit-scrollbar-track { background: transparent; }
.elva-pg .cw-track { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; min-height: 100%; }

/* greeting state */
.elva-pg .cw-greet { padding: 6px 2px 2px; }
.elva-pg .cw-greet .g-h { font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.1; }
.elva-pg .cw-greet .g-s { color: var(--mute); font-size: 13.5px; margin-top: 6px; line-height: 1.5; }

/* messages */
.elva-pg .cmsg { display: flex; gap: 9px; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.elva-pg .cmsg.show { opacity: 1; transform: none; }
.elva-pg .cmsg.user { justify-content: flex-end; }
.elva-pg .cmsg.user .cbub { background: var(--grad); color: #fff; border-radius: 16px; border-bottom-right-radius: 5px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; max-width: 86%; overflow-wrap: anywhere; box-shadow: 0 10px 26px -14px rgba(91,141,239,.7); }
.elva-pg .cmsg.elva { justify-content: flex-start; }
.elva-pg .cmsg.elva .c-av { flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; box-shadow: 0 0 16px rgba(91,141,239,.4); }
.elva-pg .cmsg.elva .c-av svg { width: 16px; height: 16px; stroke: #0c0f0c; stroke-width: 2; fill: none; }
.elva-pg .cmsg.elva .c-body { display: flex; flex-direction: column; gap: 9px; max-width: 90%; }
.elva-pg .cmsg.elva .cbub { background: var(--surface-2); color: var(--cream); border-radius: 16px; border-top-left-radius: 5px; padding: 11px 14px; font-size: 14.5px; line-height: 1.5; }
.elva-pg .cmsg.elva .cbub b { font-weight: 700; }
.elva-pg .cmsg .num { color: var(--ai-5); font-weight: 700; font-variant-numeric: tabular-nums; }

/* typing */
.elva-pg .cmsg.typing .cbub { display: inline-flex; gap: 5px; padding: 14px 15px; }
.elva-pg .cmsg.typing .d { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: ctyp 1.3s ease-in-out infinite; }
.elva-pg .cmsg.typing .d:nth-child(2) { animation-delay:.16s } .elva-pg .cmsg.typing .d:nth-child(3) { animation-delay:.32s }


/* data card inside an Elva message */
.elva-pg .dcard { border-radius: 13px; background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; }
.elva-pg .dcard .dc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.elva-pg .dcard .dc-h b { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.elva-pg .dcard .dc-h .dc-tag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); }
.elva-pg .dcard .dc-body { padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.elva-pg .dc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.elva-pg .dc-row .k { color: var(--mute); }
.elva-pg .dc-row .v { font-weight: 600; text-align: right; }
.elva-pg .dc-row .v.g { color: var(--green); } .elva-pg .dc-row .v.warn { color: var(--gold); }
.elva-pg .dc-foot { padding: 8px 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .04em; color: var(--mute-2); }

/* patient header inside card */
.elva-pg .dc-pat { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.elva-pg .dc-pat .ini { width: 34px; height: 34px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #0c0f0c; flex: none; }
.elva-pg .dc-pat .pm b { font-size: 13px; font-weight: 600; display: block; }
.elva-pg .dc-pat .pm span { font-family: var(--font-mono); font-size: 9.5px; color: var(--mute-2); letter-spacing: .03em; }
.elva-pg .dc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.elva-pg .dc-chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(224,121,92,.12); border: 1px solid rgba(224,121,92,.3); color: #E0795C; }

/* mini bar chart */
.elva-pg .dc-bars { display: flex; align-items: flex-end; gap: 14px; height: 76px; padding: 4px 2px 0; }
.elva-pg .dc-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.elva-pg .dc-bars .bar { width: 100%; max-width: 46px; border-radius: 6px 6px 3px 3px; background: var(--surface-3); transition: height .8s var(--ease-io); }
.elva-pg .dc-bars .bar.now { background: var(--grad); }
.elva-pg .dc-bars .lab { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .04em; color: var(--mute-2); text-transform: uppercase; }
.elva-pg .dc-bars .val { font-size: 11px; font-weight: 600; }

/* list rows (top matches) */
.elva-pg .dc-list { display: flex; flex-direction: column; }
.elva-pg .dc-li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.elva-pg .dc-li:last-child { border-bottom: none; }
.elva-pg .dc-li .li-l b { font-size: 12.5px; font-weight: 600; display: block; }
.elva-pg .dc-li .li-l span { font-size: 11px; color: var(--mute); }
.elva-pg .dc-li .li-v { font-size: 12.5px; font-weight: 700; color: var(--ai-5); white-space: nowrap; }

/* inner rise (card + actions reveal after the bubble) */
.elva-pg .dcard, .elva-pg .cacts { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.elva-pg .dcard.show, .elva-pg .cacts.show { opacity: 1; transform: none; }

/* action chips */
.elva-pg .cacts { display: flex; flex-wrap: wrap; gap: 8px; }
.elva-pg .cact { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--cream); background: rgba(255,255,255,.03); transition: background .25s, border-color .25s, transform .25s; }
.elva-pg .cact.primary { background: rgba(91,141,239,.14); border-color: rgba(91,141,239,.45); }
.elva-pg .cact svg { width: 13px; height: 13px; stroke: var(--ai-4); stroke-width: 2; fill: none; }
.elva-pg .cact:hover { transform: translateY(-1px); border-color: var(--ai-4); }

/* input bar */
.elva-pg .cw-input { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-top: 1px solid var(--line); background: rgba(255,255,255,.02); position: relative; z-index: 4; }
.elva-pg .cw-input .ci-field { flex: 1; display: flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--mute); overflow: hidden; white-space: nowrap; }
.elva-pg .cw-input .ci-field .caret { display: inline-block; width: 1.5px; height: 15px; background: var(--ai-4); margin-left: 1px; animation: blink 1s step-end infinite; vertical-align: middle; }

.elva-pg .cw-input .ci-field.typed { color: var(--cream); }
.elva-pg .cw-input .ci-add { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); }
.elva-pg .cw-input .ci-add svg { width: 15px; height: 15px; stroke: var(--mute); stroke-width: 2; fill: none; }
.elva-pg .cw-input .ci-send { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 6px 16px -6px rgba(91,141,239,.7); transition: transform .2s; }
.elva-pg .cw-input .ci-send:hover { transform: scale(1.06); }
.elva-pg .cw-input .ci-send svg { width: 16px; height: 16px; stroke: #0c0f0c; stroke-width: 2; fill: none; }

/* compact variant for hero fan cards */
.elva-pg .chatwin.compact .cw-loc { display: none; }
.elva-pg .chatwin.compact .cw-input { padding: 9px 11px; }
.elva-pg .chatwin.compact .cw-track { padding: 14px 13px; gap: 11px; }
.elva-pg .chatwin.compact .cmsg.user .cbub, .elva-pg .chatwin.compact .cmsg.elva .cbub { font-size: 13px; }
.elva-pg .chatwin.compact .cw-greet .g-h { font-size: 21px; }

/* ============================================================ STACK — examples 01/02/03 */
.elva-pg .stack-head { padding: clamp(80px,11vh,150px) 0 10px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.elva-pg .stack-head h2 { font-size: clamp(34px, 5.4vw, 78px); line-height: .98; letter-spacing: -0.035em; font-weight: 700; margin: 0; text-transform: uppercase; }
.elva-pg .stack-head h2 .sage { color: var(--sage); }
.elva-pg .stack-head .note { color: var(--mute); font-size: 16px; line-height: 1.55; max-width: 340px; justify-self: end; }

.elva-pg .stack { position: relative; padding: 40px 0 80px; }
.elva-pg .panel { position: sticky; min-height: 540px; margin-bottom: 60px; border-radius: 28px; overflow: hidden; background: linear-gradient(160deg, var(--surface), rgba(14,16,14,.85)); }
.elva-pg .stack .panel:nth-of-type(1) { top: 96px; }
.elva-pg .stack .panel:nth-of-type(2) { top: 132px; }
.elva-pg .stack .panel:nth-of-type(3) { top: 168px; }
.elva-pg .panel::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.03) 40%, rgba(63,184,168,.2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; z-index: 4; }
.elva-pg .panel .p-inner { position: relative; height: 100%; display: grid; grid-template-columns: 1fr 1.04fr; min-height: 540px; }
.elva-pg .panel .p-copy { padding: clamp(34px,4vw,58px); display: flex; flex-direction: column; }
.elva-pg .panel .p-num { font-family: var(--font-serif); font-style: italic; font-size: clamp(56px, 7vw, 104px); line-height: 1; color: var(--sage); }
.elva-pg .panel .p-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ai-5); margin-top: 6px; }
.elva-pg .panel .p-title { font-size: clamp(26px, 3.2vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: auto 0 0; text-transform: uppercase; }
.elva-pg .panel .p-title .serif { display: block; text-transform: none; }
.elva-pg .panel .p-desc { color: var(--mute); font-size: 16px; line-height: 1.6; margin: 18px 0 0; max-width: 380px; }
.elva-pg .panel .p-pill { margin-top: 22px; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.elva-pg .panel .p-pill svg { width: 14px; height: 14px; stroke: var(--ai-5); stroke-width: 2; fill: none; }
.elva-pg .panel .p-media { position: relative; display: grid; place-items: center; padding: clamp(26px,3vw,46px); }
.elva-pg .panel .p-media .glow { position: absolute; width: 78%; height: 78%; border-radius: 50%; background: radial-gradient(circle, rgba(155,92,255,.2), transparent 65%); filter: blur(34px); }
.elva-pg .panel .p-media .chatwin { max-width: 460px; height: min(460px, 70vh); z-index: 2; }

/* ============================================================ SEE IT IN MOTION — complex chats */
.elva-pg .motion { padding: clamp(80px,11vh,150px) 0; }
.elva-pg .motion-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 46px; flex-wrap: wrap; }
.elva-pg .motion-head h2 { font-size: clamp(32px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.035em; font-weight: 700; margin: 0; text-transform: uppercase; }
.elva-pg .motion-head h2 .serif { text-transform: none; }
.elva-pg .motion-head .mono { max-width: 320px; text-align: right; line-height: 1.7; }
.elva-pg .mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.elva-pg .mcard { display: flex; flex-direction: column; }
.elva-pg .mcard .m-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); margin-bottom: 14px; }
.elva-pg .mcard .m-tag .live { width: 6px; height: 6px; }
.elva-pg .mcard .chatwin { height: 540px; }
.elva-pg .mcard .m-cap { margin-top: 16px; }
.elva-pg .mcard .m-cap h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.elva-pg .mcard .m-cap p { color: var(--mute); font-size: 14px; line-height: 1.5; margin: 7px 0 0; }

/* play overlay (manual / See-it-in-motion sims) */
.elva-pg .cw-play { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; cursor: pointer; background: linear-gradient(180deg, rgba(13,15,13,.55), rgba(13,15,13,.84)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .5s var(--ease); }
.elva-pg .cw-play.hide { opacity: 0; pointer-events: none; }
.elva-pg .cw-play .pbtn { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.elva-pg .cw-play .pcirc { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 16px 44px -12px rgba(91,141,239,.75); transition: transform .3s var(--ease); }
.elva-pg .cw-play:hover .pcirc { transform: scale(1.08); }
.elva-pg .cw-play .pcirc svg { width: 24px; height: 24px; fill: #0c0f0c; margin-left: 3px; }
.elva-pg .cw-play .plabel { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); }

/* ============================================================ FINAL */
.elva-pg .final { position: relative; min-height: 92svh; display: grid; place-items: center; text-align: center; padding: 120px 0; overflow: hidden; }
.elva-pg .final .glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(155,92,255,.22), rgba(63,184,168,.10) 42%, transparent 68%); filter: blur(20px); }
.elva-pg .final-inner { position: relative; max-width: 900px; }
.elva-pg .final .mono { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 30px; }
.elva-pg .final h2 { font-size: clamp(46px, 8.4vw, 124px); line-height: .9; letter-spacing: -0.045em; font-weight: 700; margin: 0; text-transform: uppercase; }
.elva-pg .final h2 .serif { display: block; text-transform: none; }
.elva-pg .final p { margin: 30px auto 0; max-width: 540px; color: var(--mute); font-size: 18px; line-height: 1.6; }
.elva-pg .final-cta { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.elva-pg .final-fine { margin-top: 34px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.elva-pg .final-fine span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.elva-pg .final-fine svg { width: 15px; height: 15px; stroke: var(--ai-5); stroke-width: 1.8; fill: none; }

.elva-pg .foot { border-top: 1px solid var(--line); padding: 34px 0; }
.elva-pg .foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.elva-pg .foot .copy { color: var(--mute-2); font-size: 13px; }
.elva-pg .foot .legal { display: flex; gap: 22px; }
.elva-pg .foot .legal a { color: var(--mute-2); font-size: 13px; transition: color .25s; }
.elva-pg .foot .legal a:hover { color: var(--cream); }

/* ---- reveals ---- */
.elva-pg [data-reveal] { transition: opacity .9s var(--ease-io), transform .9s var(--ease-io); }
@media (prefers-reduced-motion: no-preference) { html.js .elva-pg [data-reveal]:not(.in) { opacity: 0; transform: translateY(34px); } }
.elva-pg [data-reveal][data-delay="1"] { transition-delay: .09s; }
.elva-pg [data-reveal][data-delay="2"] { transition-delay: .18s; }
.elva-pg [data-reveal][data-delay="3"] { transition-delay: .27s; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1000px) {
  .elva-pg .intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .elva-pg .intro { height: auto; }
  .elva-pg .intro-sticky { position: static; height: auto; padding: 128px 0 50px; }
  .elva-pg .fan { height: 470px; order: -1; }
  .elva-pg .fan-card { width: 300px; height: 410px; }
  .elva-pg .stack-head { grid-template-columns: 1fr; gap: 18px; }
  .elva-pg .stack-head .note { justify-self: start; }
  .elva-pg .panel .p-inner { grid-template-columns: 1fr; min-height: 0; }
  .elva-pg .panel { position: static; top: auto; min-height: 0; margin-bottom: 24px; }
  .elva-pg .panel .p-media .chatwin { width: 100%; max-width: 440px; }
  .elva-pg .mgrid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .elva-pg .motion-head .mono { text-align: left; }
}
@media (max-width: 640px) {
  .elva-pg .wrap { padding: 0 20px; }
  .elva-pg .brand-tag { display: none; }
  .elva-pg .fan-card[data-i="0"] { transform: translate(-50%, -50%) rotate(-3deg); }
  .elva-pg .fan-card[data-i="1"] { transform: translate(-50%, -50%) rotate(0deg); }
  .elva-pg .fan-card[data-i="2"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .elva-pg * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* ============================================================ CANVAS + global-collision neutralizers (authored) */
/* export carried the dark canvas + resets on html/body; fold onto the wrapper.
   overflow-x:clip is sticky-safe (unlike overflow:hidden) and matches the export's body rule. */
.elva-pg.elva-camp{ background: var(--bg); color: var(--cream); font-family: var(--font-sans); min-height: 100vh; margin: 0; padding: 0; overflow-x: clip; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
/* real Elva logo swapped in for the export's gradient-square .brand-mark (nav + footer) */
.elva-pg.elva-camp .brand-mark{ background: none; box-shadow: none; width: 22px; height: 22px; border-radius: 6px; object-fit: contain; }

/* ============================================================ LIGHT THEME — overrides for hardcoded darks & white-on-dark overlays */
/* primary CTA: dark button on the light page (high contrast) */
.elva-pg.elva-camp .btn-primary{ background: #1A1C19; color: #FFFFFF; }
.elva-pg.elva-camp .btn-primary .ico{ background: #FFFFFF; color: #1A1C19; }
.elva-pg.elva-camp .btn-primary:hover{ box-shadow: 0 16px 38px -16px rgba(0,0,0,.30); }
.elva-pg.elva-camp .btn-ghost:hover{ background: rgba(0,0,0,.04); }

/* nav scrolled veil */
.elva-pg.elva-camp .nav.scrolled{ background: rgba(246,247,244,.82); }

/* ambient glows: gentler on a light canvas */
.elva-pg.elva-camp .amb .g1, .elva-pg.elva-camp .amb .g2{ opacity: .3; }
.elva-pg.elva-camp .grain{ opacity: .025; }

/* chat window: light product surface */
.elva-pg.elva-camp .chatwin{ background: linear-gradient(180deg, #FFFFFF, #F7F8F5); box-shadow: 0 30px 70px -42px rgba(0,0,0,.28); }
.elva-pg.elva-camp .chatwin::before{ background: linear-gradient(150deg, rgba(0,0,0,.12), rgba(0,0,0,.04) 42%, rgba(91,141,239,.34)); }
.elva-pg.elva-camp .cw-bar, .elva-pg.elva-camp .cw-input{ background: rgba(0,0,0,.02); }
.elva-pg.elva-camp .cw-dots i{ background: rgba(0,0,0,.14); }
.elva-pg.elva-camp .cw-url{ background: rgba(0,0,0,.04); }
.elva-pg.elva-camp .cw-feed::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); }
.elva-pg.elva-camp .cw-input .ci-field, .elva-pg.elva-camp .cw-input .ci-add{ background: var(--surface-2); }
.elva-pg.elva-camp .cact{ background: rgba(0,0,0,.025); }

/* stack panels: light cards with soft elevation */
.elva-pg.elva-camp .panel{ background: linear-gradient(160deg, #FFFFFF, #F3F5F1); box-shadow: 0 30px 80px -52px rgba(0,0,0,.26); }
.elva-pg.elva-camp .panel::before{ background: linear-gradient(150deg, rgba(0,0,0,.10), rgba(0,0,0,.03) 40%, rgba(63,184,168,.30)); }
.elva-pg.elva-camp .p-pill{ background: rgba(0,0,0,.04); }
.elva-pg.elva-camp .mcard .m-tag{ background: rgba(0,0,0,.035); }

/* TASK 2 — "see it in motion": unblur the frame so the teaser is legible before clicking */
.elva-pg.elva-camp .cw-play{ background: linear-gradient(180deg, rgba(246,247,244,0), rgba(246,247,244,.16)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.elva-pg.elva-camp .cw-play .pcirc{ box-shadow: 0 16px 40px -12px rgba(91,141,239,.55), 0 4px 14px -4px rgba(0,0,0,.25); }

/* ============================================================ MOBILE FIXES (requested) */
@media (max-width: 1000px){
  /* TASK 3 — keep the desktop sticky "stacking" effect for the stack panels on smaller screens */
  .elva-pg.elva-camp .panel{ position: sticky; min-height: 0; margin-bottom: 28px; }
  .elva-pg.elva-camp .panel .p-inner{ grid-template-columns: 1fr; min-height: 0; }
  .elva-pg.elva-camp .stack .panel:nth-of-type(1){ top: 84px; }
  .elva-pg.elva-camp .stack .panel:nth-of-type(2){ top: 104px; }
  .elva-pg.elva-camp .stack .panel:nth-of-type(3){ top: 124px; }
  .elva-pg.elva-camp .panel .p-media .chatwin{ width: 100%; max-width: 440px; height: min(440px, 56svh); }
}
@media (max-width: 640px){
  /* TASK 4 — more breathing room above "see it in motion" + horizontal card slider */
  .elva-pg.elva-camp .motion{ padding-top: clamp(84px, 14vh, 132px); }
  .elva-pg.elva-camp .mgrid{
    display: flex; grid-template-columns: none; max-width: none; margin: 0;
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding: 4px 0 16px; scrollbar-width: none;
  }
  .elva-pg.elva-camp .mgrid::-webkit-scrollbar{ display: none; }
  .elva-pg.elva-camp .mcard{ flex: 0 0 86%; scroll-snap-align: center; }
  .elva-pg.elva-camp .mcard .chatwin{ height: 480px; }

  /* TASK 5 — final CTA headline was clipping descenders */
  .elva-pg.elva-camp .final h2{ line-height: 1.0; padding-bottom: 6px; }
  .elva-pg.elva-camp .final h2 .serif{ padding-bottom: .06em; }

  /* TASK 6 — center the three hero trust items */
  .elva-pg.elva-camp .intro-foot{ justify-content: center; }
}

/* ============================================================ FIXES */
/* hero must fit inside the pinned viewport. The longer pain-led H1 + lead overflowed the sticky and
   collided with the next section as it scrolled in. Top-align (clears the fixed nav), widen the copy
   column so the H1 wraps to fewer lines, and tighten the type + vertical rhythm so the whole hero
   fits ~one screen. */
.elva-pg.elva-camp .intro-sticky{ align-items: flex-start; padding: 116px 0 40px; }
.elva-pg.elva-camp .intro-grid{ grid-template-columns: 1.18fr 0.92fr; gap: 48px; }
.elva-pg.elva-camp .intro h1{ font-size: clamp(38px, 5.3vw, 80px); line-height: .94; }
.elva-pg.elva-camp .intro h1 .serif{ font-size: 1em; line-height: 1.0; }
.elva-pg.elva-camp .intro-eyebrow{ margin-bottom: 16px; }
.elva-pg.elva-camp .intro-lead{ margin-top: 20px; font-size: 16.5px; line-height: 1.54; max-width: 460px; }
.elva-pg.elva-camp .intro-cta{ margin-top: 24px; }
.elva-pg.elva-camp .intro-foot{ margin-top: 20px; }

/* gradient serif (.spectrum = background-clip:text) was cropping the italic "J" swash and descenders,
   because those glyph parts fall outside the element's background box → paint them by padding the box,
   negative margins keep the visual position unchanged. */
.elva-pg.elva-camp .intro h1 .serif,
.elva-pg.elva-camp .final h2 .serif,
.elva-pg.elva-camp .panel .p-title .serif{
  padding: .06em .2em .18em;
  margin: -.06em -.2em -.18em;
}