/* Crownup v4: everything centred, the app shown working. Loads after base.css + v3.css (device frame, type, pro, faq, footer). */

/* ---------- screen layers inside the device ---------- */
.layers .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.layers .layer.on { opacity: 1; }
.layers video, .layers picture, .layers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.flip picture { transition: opacity .9s var(--ease); }
.flip picture:last-child { opacity: 0; }
.flip.alt picture:last-child { opacity: 1; }

/* ---------- hero (centred) ---------- */
.hero4 { position: relative; padding: 120px 0 0; text-align: center; overflow: clip; }
.hero4 .wrap { display: grid; justify-items: center; gap: 16px; position: relative; z-index: 3; }
.hero4 .one { max-width: 34ch; }
.hero4 .store { justify-content: center; margin-top: 6px; }
.stage4 { position: relative; margin: 54px auto 0; width: 100%; display: grid; justify-items: center; perspective: 1600px; }
.stage4__glow { position: absolute; left: 50%; top: 4%; width: min(1100px, 150vw); aspect-ratio: 1.5; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(30% 34% at 50% 40%, rgba(162,123,255,.20), transparent 70%), radial-gradient(26% 30% at 34% 58%, rgba(91,155,255,.16), transparent 70%), radial-gradient(26% 30% at 66% 58%, rgba(255,138,76,.13), transparent 70%); filter: blur(10px); }
.stage4__phone { position: relative; z-index: 3; transform-origin: 50% 100%; }
.stage4__phone .device { --w: clamp(270px, 25vw, 360px); }
.side { position: absolute; z-index: 4; will-change: transform; filter: drop-shadow(0 40px 50px rgba(0,0,0,.85)); }
.side img { width: 100%; height: auto; border-radius: inherit; }
.side--l { width: clamp(240px, 22vw, 330px); right: calc(50% + clamp(170px, 15vw, 220px)); top: 26%; border-radius: 30px; transform: rotateY(18deg) rotateZ(-4deg); }
.side--r { width: clamp(150px, 13vw, 196px); left: calc(50% + clamp(180px, 16vw, 230px)); top: 12%; border-radius: 26px; transform: rotateY(-18deg) rotateZ(5deg); }
.side--r2 { width: clamp(150px, 13vw, 196px); left: calc(50% + clamp(200px, 17vw, 250px)); top: 52%; border-radius: 26px; transform: rotateY(-16deg) rotateZ(-3deg); }
.side span { position: absolute; left: 0; right: 0; bottom: -30px; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--ink-3); text-align: center; }
.stage4__fade { position: absolute; inset: auto -10% 0; height: 22%; background: linear-gradient(transparent, #000 90%); z-index: 5; pointer-events: none; }
@media (max-width: 860px) { .side--l, .side--r2 { display: none; } .side--r { left: auto; right: -4%; top: 30%; width: 120px; } }

/* ---------- why ---------- */
.why4 { padding: clamp(70px, 10vw, 140px) 0; text-align: center; }
.why4 .wrap { display: grid; justify-items: center; gap: 40px; }
.why4 .mid { max-width: 17ch; }

/* ---------- how you use it: centred phone, screens change with scroll ---------- */
.use { position: relative; height: 640vh; }
.use__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; padding: 84px 0 28px; overflow: clip; text-align: center; }
.use__cap { position: relative; width: min(680px, 100% - 32px); height: clamp(112px, 15vh, 150px); }
.use__step { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; gap: 10px; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.use__step.on { opacity: 1; transform: none; }
.use__step h2 { font: 600 clamp(32px, 4.4vw, 60px)/1 var(--f-sans); letter-spacing: -.04em; margin: 0; }
.use__step p { margin: 0; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); }
.use__k { font: 500 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.use__phone { position: relative; height: 100%; display: grid; place-items: center; perspective: 1400px; }
.use__phone .device { --w: clamp(220px, min(26vw, calc((100svh - 330px) * .43)), 360px); }
.use__glow { position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--gc, #5B9BFF) 26%, transparent), transparent); transition: background .8s; pointer-events: none; }
.use__dots { display: flex; gap: 8px; margin-top: 18px; }
.use__dots i { width: 28px; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; position: relative; }
.use__dots i b { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }

/* ---------- pro (pricing: monthly equivalent leads, billed amount visible) ---------- */
.pass .p { display: flex; align-items: baseline; gap: 6px; }
.pass .bill { color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.pass--pro .badge { font-size: 10px; }
.pass--pro { box-shadow: 0 30px 80px -40px rgba(162,123,255,.45); }
.pass .pick { position: absolute; top: 22px; left: 26px; }


/* ---------- app listing in the hero ---------- */
.listing { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 8px; }
.listing__app { display: flex; align-items: center; gap: 12px; text-align: left; }
.listing__app .app-icon { width: 56px; height: 56px; border-radius: 13px; }
.listing__app b { display: block; font: 600 17px/1.2 var(--f-sans); }
.listing__app span { font-size: 13px; color: var(--ink-3); }
.listing .store { margin: 0; }
.final__icon { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -10px rgba(0,0,0,.9), 0 0 80px rgba(228,230,233,.08); }
.foot__brand { align-items: baseline; gap: 8px; }
.foot__brand .crown-mark { width: 18px; }
.final__mark { width: 104px; margin-bottom: 8px; filter: drop-shadow(0 20px 40px rgba(228,230,233,.12)); }

/* ---------- AI: three phones fanned around the centre ---------- */
.ai { padding: clamp(90px, 12vw, 160px) 0 clamp(60px, 8vw, 100px); text-align: center; overflow: clip; }
.ai .wrap { display: grid; justify-items: center; gap: 14px; }
.fan { position: relative; height: calc(var(--fw) * 2.4); margin-top: 54px; --fw: clamp(200px, 21vw, 300px); perspective: 1600px; }
.fan__glow { position: absolute; left: 50%; top: 20%; width: min(1000px, 150vw); aspect-ratio: 1.6; transform: translateX(-50%); background: radial-gradient(30% 34% at 50% 40%, rgba(162,123,255,.22), transparent 70%), radial-gradient(24% 28% at 30% 55%, rgba(255,138,76,.12), transparent 70%), radial-gradient(24% 28% at 70% 55%, rgba(255,200,61,.12), transparent 70%); pointer-events: none; }
.fan__ph { position: absolute; left: 50%; top: 0; transform-origin: 50% 100%; }
.fan__ph .device { --w: var(--fw); }
.fan__ph--c { z-index: 3; margin-left: calc(var(--fw) * -.528); }
.fan__ph--l, .fan__ph--r { z-index: 2; top: 7%; }
.fan__ph--l { margin-left: calc(var(--fw) * -1.5); transform: rotate(-7deg); }
.fan__ph--r { margin-left: calc(var(--fw) * .45); transform: rotate(7deg); }
.fan__ph--l .device, .fan__ph--r .device { --w: calc(var(--fw) * .92); }
.ai__soon { display: inline-flex; align-items: center; gap: 10px; margin: 26px auto 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 700px) {
  .fan { --fw: 210px; }
  .fan__ph--l { margin-left: calc(var(--fw) * -1.2); }
  .fan__ph--r { margin-left: calc(var(--fw) * .15); }
}

/* ---------- two-row title: bold sans on top, Didone serif tucked up into it, with a soft echo ---------- */
.duo-title { display: grid; justify-items: center; margin: 0; line-height: 1; letter-spacing: 0; font: inherit; }
.duo-title > span { position: relative; display: block; isolation: isolate; white-space: nowrap; }
.duo-title .l1 { font: 600 clamp(52px, 8.6vw, 132px)/.92 var(--f-sans); letter-spacing: -.055em; color: var(--ink); z-index: 1; }
.duo-title .l2 { font: 400 clamp(56px, 9.6vw, 150px)/.9 var(--f-serif); font-style: italic; letter-spacing: -.035em; margin-top: -.13em; z-index: 2; }
.duo-title .l2 .ti { font-family: inherit; font-size: 1em; padding: 0 .06em .1em; }
/* the echo: a faint copy just behind and below each line, strongest on the lower half */
.duo-title > span::before {
  content: attr(data-t); content: attr(data-t) / "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  transform: translate(.03em, .06em);
  color: rgba(245,245,247,.13); -webkit-text-fill-color: rgba(245,245,247,.13); background: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 78%); mask-image: linear-gradient(to bottom, transparent 40%, #000 78%);
}
.duo-title .l2::before { padding: 0 .06em .1em; transform: translate(.02em, .045em); color: rgba(228,230,233,.09); -webkit-text-fill-color: rgba(228,230,233,.09); }
.duo-title--final .l1 { font-size: clamp(46px, 7.4vw, 112px); }
.duo-title--final .l2 { font-size: clamp(50px, 8.2vw, 124px); }
@media (max-width: 480px) {
  .duo-title .l1 { font-size: 15vw; }
  .duo-title .l2 { font-size: 13.4vw; }
  .duo-title--final .l1 { font-size: 15vw; }
  .duo-title--final .l2 { font-size: 14.2vw; }
}