/* Vallamo demo funnel. Mirrors the app's setup wizard (dashboard
   views/onboarding/Stage.tsx): an aurora stage, frosted glass panels and
   fields, Playfair headlines, ink pill buttons, step dashes. Token values
   are copied from the dashboard's tokens.css so the two match exactly. */

@font-face { font-family: "Inter"; src: url("assets/fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("assets/fonts/PlayfairDisplay.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --ink-c: 44 37 32; --ink-2-c: 107 97 87; --ink-3-c: 119 108 98; --ink-4-c: 160 150 139;
  --on-ink-c: 255 255 255; --ink-hover-c: 62 51 43;
  --paper-c: 255 253 248; --canvas-c: 247 243 236; --line-c: 232 224 210; --line-strong-c: 217 206 188;
  --clay-c: 164 127 84; --clay-deep-c: 138 106 68; --clay-ink-c: 122 92 56; --clay-soft-c: 240 232 220; --clay-tint-c: 224 205 180; --clay-wash-c: 248 242 233;
  --sage-c: 124 138 110; --sage-ink-c: 71 86 59; --sage-soft-c: 230 234 221; --sage-wash-c: 242 244 236;
  --rose-c: 194 96 63; --rose-ink-c: 156 74 51; --rose-soft-c: 246 227 218; --rose-wash-c: 251 241 236;
  --amber-ink-c: 127 92 20; --amber-soft-c: 246 236 217;
  --glow-warm-c: 233 212 176; --glow-sand-c: 236 214 182; --glow-cool-c: 244 236 222; --stage-c: 247 243 236;
  --sh-xs: 0 1px 2px rgb(44 37 32 / .05);
  --sh-card: 0 1px 2px rgb(44 37 32 / .04), 0 4px 16px -8px rgb(44 37 32 / .06);
  --sh-pop: 0 12px 40px -12px rgb(44 37 32 / .28), 0 2px 6px rgb(44 37 32 / .06);
  --sh-float: 0 24px 64px -24px rgb(44 37 32 / .35);
  --glow-a: 1;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-c: 243 236 226; --ink-2-c: 210 198 184; --ink-3-c: 169 156 142; --ink-4-c: 123 111 99;
    --on-ink-c: 28 23 19; --ink-hover-c: 255 255 255;
    --paper-c: 31 26 22; --canvas-c: 21 17 14; --line-c: 53 45 38; --line-strong-c: 74 63 54;
    --clay-c: 196 154 108; --clay-deep-c: 143 108 70; --clay-ink-c: 220 184 140; --clay-soft-c: 58 46 34; --clay-tint-c: 86 68 47; --clay-wash-c: 39 31 24;
    --sage-c: 147 162 131; --sage-ink-c: 184 201 165; --sage-soft-c: 43 50 38; --sage-wash-c: 32 38 29;
    --rose-c: 220 124 92; --rose-ink-c: 242 168 142; --rose-soft-c: 69 39 30; --rose-wash-c: 46 28 22;
    --amber-ink-c: 235 199 122; --amber-soft-c: 59 47 23;
    --glow-warm-c: 122 92 56; --glow-sand-c: 110 85 52; --glow-cool-c: 74 58 38; --stage-c: 20 16 13;
    --sh-xs: 0 1px 2px rgb(0 0 0 / .3);
    --sh-card: 0 1px 0 rgb(255 255 255 / .02) inset, 0 1px 2px rgb(0 0 0 / .3);
    --sh-pop: 0 16px 48px -12px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .04);
    --sh-float: 0 28px 72px -20px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .05);
    --glow-a: .55;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink-c: 243 236 226; --ink-2-c: 210 198 184; --ink-3-c: 169 156 142; --ink-4-c: 123 111 99;
  --on-ink-c: 28 23 19; --ink-hover-c: 255 255 255;
  --paper-c: 31 26 22; --canvas-c: 21 17 14; --line-c: 53 45 38; --line-strong-c: 74 63 54;
  --clay-c: 196 154 108; --clay-deep-c: 143 108 70; --clay-ink-c: 220 184 140; --clay-soft-c: 58 46 34; --clay-tint-c: 86 68 47; --clay-wash-c: 39 31 24;
  --sage-c: 147 162 131; --sage-ink-c: 184 201 165; --sage-soft-c: 43 50 38; --sage-wash-c: 32 38 29;
  --rose-c: 220 124 92; --rose-ink-c: 242 168 142; --rose-soft-c: 69 39 30; --rose-wash-c: 46 28 22;
  --glow-warm-c: 122 92 56; --glow-sand-c: 110 85 52; --glow-cool-c: 74 58 38; --stage-c: 20 16 13;
  --glow-a: .55;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; position: relative;
  color: rgb(var(--ink-c)); font: 400 15px/1.55 var(--sans); background-color: rgb(var(--stage-c)); }
a { color: rgb(var(--clay-ink-c)); }
h1, h2, h3, h4 { margin: 0; }
h1 em, h2 em { font-style: normal; color: rgb(121 93 67); }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.012em; font-feature-settings: "lnum" 1, "kern" 1; color: rgb(var(--ink-c)); }
h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--ink-4-c)); margin: 22px 0 8px; }
p { margin: 0; }
.muted { color: rgb(var(--ink-3-c)); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid rgb(var(--clay-c)); outline-offset: 2px; }

/* ---------- the stage (wizard .aurora + blobs) ---------- */
.aurora {
  background:
    radial-gradient(60% 55% at 12% 18%, rgb(var(--glow-warm-c) / calc(.55 * var(--glow-a))) 0%, transparent 70%),
    radial-gradient(45% 50% at 78% 12%, rgb(var(--glow-sand-c) / calc(.65 * var(--glow-a))) 0%, transparent 70%),
    radial-gradient(55% 60% at 92% 88%, rgb(var(--glow-cool-c) / calc(.75 * var(--glow-a))) 0%, transparent 70%),
    radial-gradient(50% 50% at 30% 95%, rgb(var(--glow-warm-c) / calc(.45 * var(--glow-a))) 0%, transparent 70%),
    rgb(var(--stage-c));
  background-attachment: fixed;
}
.stage-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.stage-bg span { position: absolute; border-radius: 50%; filter: blur(64px); transition: transform .7s; }
.blob-warm { left: -192px; top: 25%; width: 620px; height: 620px; background: rgb(var(--glow-warm-c) / calc(.45 * var(--glow-a))); }
.blob-cool { right: -160px; top: -80px; width: 520px; height: 520px; background: rgb(var(--glow-cool-c) / calc(.6 * var(--glow-a))); }
body > :not(.stage-bg) { position: relative; z-index: 1; }
body > .nav { z-index: 20; } /* the mobile menu drops over the page */

/* glass (wizard .glass / glassCard) */
.glass, .card { background: rgb(var(--paper-c) / .72); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 16px; box-shadow: var(--sh-pop), inset 0 0 0 1px rgb(var(--paper-c) / .7); }
.card { padding: 22px; }

/* blur-in on every screen, like the wizard's animate-blurIn */
/* ends on filter:none, not blur(0): a lingering filter would stop the glass inside from frosting */
@keyframes blurIn { from { opacity: 0; filter: blur(10px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }
.blur-in { animation: blurIn .5s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- buttons (wizard Pill2) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 12px;
  font: 600 15px/1.2 var(--sans); cursor: pointer; text-decoration: none; transition: background .15s, transform .1s, opacity .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: progress; }
.btn-primary { background: rgb(var(--ink-c)); color: rgb(var(--on-ink-c)); box-shadow: var(--sh-pop); }
.btn-primary:hover { background: rgb(var(--ink-hover-c)); }
.btn-primary.enter::after { content: "↵"; font-weight: 400; opacity: .55; font-size: 14px; }
.btn-ghost { background: rgb(var(--paper-c) / .7); color: rgb(var(--ink-c)); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .08); }
.btn-ghost:hover { background: rgb(var(--paper-c)); }
.btn-small { min-height: 36px; padding: 7px 14px; font-size: 13px; border-radius: 10px; }
.btn-lg { min-height: 48px; padding: 12px 24px; font-size: 16px; }
.text-link { background: none; border: 0; padding: 0; font: 500 14px var(--sans); color: rgb(var(--ink-3-c)); cursor: pointer; text-decoration: none; }
.text-link:hover { color: rgb(var(--ink-c)); }

/* ---------- header: the same bar as vallamo.com ---------- */
.nav { display: flex; align-items: center; gap: 24px; padding: 20px 40px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: rgb(var(--clay-c)); text-decoration: none; }
.mark, .wordmark { display: inline-block; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.mark { width: 26px; height: 26px; -webkit-mask-image: url(assets/vallamo-mark.png); mask-image: url(assets/vallamo-mark.png); }
.wordmark { width: 64px; height: 21px; -webkit-mask-image: url(assets/vallamo-wordmark.svg); mask-image: url(assets/vallamo-wordmark.svg); }
.nav-links { display: flex; gap: 24px; flex: 1; }
.nav-links a { color: rgb(var(--ink-c)); text-decoration: none; font-size: 13px; font-weight: 500; }
.nav-links a:hover { color: rgb(var(--clay-ink-c)); }
.nav-actions { display: flex; gap: 18px; align-items: center; }

.site-nav { display: grid; grid-template-columns: 1fr auto 1fr; padding: 18px clamp(16px, 6.5vw, 108px); gap: 24px; }
.site-nav .mark { width: 34px; height: 34px; }
.site-nav .wordmark { width: 93px; height: 30px; }
.site-nav .nav-links { justify-content: center; gap: 32px; flex: none; }
.site-nav .nav-actions { justify-self: end; gap: 28px; }
.nav-login { color: rgb(var(--ink-c)); text-decoration: none; font-size: 13px; font-weight: 500; }
.nav-login:hover { color: rgb(var(--clay-ink-c)); }
/* v49.626: the same button as vallamo.com (dark espresso, 12px corners, 13px text); it was clay-brown and fully round. */
.btn-demo { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 48px; padding: 14px 23px; border-radius: 12px; text-decoration: none; white-space: nowrap;
  background: rgb(var(--ink-c)); border: 1px solid rgb(var(--ink-c)); color: rgb(var(--on-ink-c)); font: 600 13px/1.4 var(--sans); transition: transform .3s, box-shadow .3s; }
.btn-demo:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(44 37 32 / .09); }
.btn-demo:active { transform: translateY(0); }
.btn-demo span { font-size: 18px; line-height: 1; transition: transform .3s; }
.btn-demo:hover span { transform: translate(2px, -2px); }
.nav-menu { display: none; }

/* ---------- step progress (wizard progress line + Dashes) ---------- */
.wizard-progress { display: grid; justify-items: center; gap: 12px; margin: 8px auto 0; padding: 0 16px; }
.step-label { font-size: 14px; font-weight: 500; color: rgb(var(--ink-3-c)); }
.step-label .step-name { color: rgb(var(--ink-2-c)); }
.dashes { display: flex; gap: 6px; align-items: center; }
.dashes span { height: 3px; width: 20px; border-radius: 999px; background: rgb(var(--ink-c) / .1); transition: all .3s; }
.dashes span.done { background: rgb(var(--clay-tint-c)); }
.dashes span.on { width: 32px; background: rgb(var(--clay-deep-c)); }

main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.view { padding: 28px 0 64px; }

/* ---------- home ---------- */
.hero { text-align: center; padding: 48px 0 16px; display: flex; flex-direction: column; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: rgb(var(--ink-2-c));
  background: rgb(var(--paper-c) / .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--sh-xs), inset 0 0 0 1px rgb(var(--ink-c) / .06); }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--sage-c)); box-shadow: 0 0 0 4px rgb(var(--sage-soft-c)); }
.hero h1 { font-size: clamp(34px, 5.6vw, 60px); line-height: 1.1; max-width: 15ch; margin: 0 auto; }
.hero-sub { margin-top: 14px; font-size: 18px; color: rgb(var(--ink-2-c)); max-width: 36rem; }

/* ---------- the logo belt: Vallamo first, then example businesses ---------- */
.logo-stage { width: 100%; margin: 30px auto 34px; overflow-x: clip; }
.logo-carousel { position: relative; height: 200px; width: min(720px, 100%); margin: 0 auto; perspective: 1100px; transform-style: preserve-3d; }
.lc-card { position: absolute; left: 50%; top: 50%; width: 236px; height: 152px; padding: 18px 16px; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: rgb(var(--paper-c) / .9); box-shadow: var(--sh-pop), inset 0 0 0 1px rgb(var(--paper-c) / .8);
  transform-style: preserve-3d; will-change: transform, opacity;
  transition: transform 1s cubic-bezier(.45, .05, .25, 1), opacity 1s ease, filter 1s ease; }
.lc-card.is-center { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; z-index: 3; }
.lc-card.is-left { transform: translate3d(calc(-50% - 222px), -50%, -150px) rotateY(18deg) scale(.84); opacity: .72; z-index: 2; }
.lc-card.is-right { transform: translate3d(calc(-50% + 222px), -50%, -150px) rotateY(-18deg) scale(.84); opacity: .72; z-index: 2; }
.lc-card.is-out-left { transform: translate3d(calc(-50% - 360px), -50%, -340px) rotateY(34deg) scale(.6); opacity: 0; z-index: 1; }
.lc-card.is-out-right { transform: translate3d(calc(-50% + 360px), -50%, -340px) rotateY(-34deg) scale(.6); opacity: 0; z-index: 1; }
.lc-card.no-anim { transition: none !important; }
.lc-fast .lc-card { transition-duration: .42s, .42s, .42s; transition-timing-function: cubic-bezier(.3, 0, .4, 1); }
.lc-mark { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--brand); background: var(--tint); }
.lc-mark svg { width: 30px; height: 30px; }
.lc-name { color: var(--brand); line-height: 1.2; max-width: 100%; }
.lc-serif { font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -.005em; }
.lc-sans { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lc-meta { font-size: 12px; color: rgb(var(--ink-3-c)); }
/* v49.784: the old dark-mode override that forced a cream panel behind the kind cards is gone: it left the (light) names unreadable. */
/* example brands: just the mark, no panel behind it */
.lc-card.lc-brand { background: transparent; box-shadow: none; padding: 0; }
.lc-brand img { display: block; max-width: 206px; max-height: 76px; width: auto; height: auto; object-fit: contain; opacity: .86; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }
.lc-card.is-center.lc-brand img { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lc-card.lc-brand { background: transparent; } :root:not([data-theme="light"]) .lc-brand img { filter: grayscale(1) invert(.93); mix-blend-mode: screen; } }
@media (max-width: 640px) { .lc-brand img { max-width: 168px; max-height: 64px; } }
/* their business, found from their website */
.lc-you { width: 260px; height: 168px; box-shadow: var(--sh-float), 0 0 0 2px rgb(var(--clay-c) / .55); }
.lc-you .lc-logo { width: 64px; height: 64px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .06); overflow: hidden; }
.lc-you .lc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.lc-you .lc-letter { font-family: var(--display); font-size: 28px; color: rgb(var(--clay-ink-c)); background: rgb(var(--clay-wash-c)); }
.lc-you .lc-name { color: rgb(var(--ink-c)); font-family: var(--display); font-size: 19px; font-weight: 500; }
.lc-found { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--sage-ink-c)); background: rgb(var(--sage-wash-c)); padding: 3px 9px; border-radius: 999px; }
.logo-disclaimer { margin: 6px auto 0; max-width: 520px; font-size: 11px; line-height: 1.4; color: rgb(var(--ink-3-c)); opacity: .75; text-align: center; }
.logo-caption { margin-top: 18px; font-size: 13px; color: rgb(var(--ink-3-c)); text-align: center; min-height: 1.5em; }

/* the Vallamo mark in 3D: stacked cut-outs for depth, a metallic face and a moving sheen */
.lc-vallamo { gap: 14px; }
.lc-vmark { display: block; width: 74px; height: 74px; object-fit: contain; }
.lc-wordmark { display: block; width: 96px; height: 31px; background: rgb(var(--clay-c)); -webkit-mask: url(assets/vallamo-wordmark.svg) center / contain no-repeat; mask: url(assets/vallamo-wordmark.svg) center / contain no-repeat; }
.v3d { position: relative; display: block; width: 74px; height: 74px; transform-style: preserve-3d; animation: vtilt 7s ease-in-out infinite; }
.v3d > span { position: absolute; inset: 0; -webkit-mask: url(assets/vallamo-mark.png) center / contain no-repeat; mask: url(assets/vallamo-mark.png) center / contain no-repeat; }
.v3d-layer { background: rgb(calc(122 - var(--i, 0) * 7) calc(92 - var(--i, 0) * 6) calc(56 - var(--i, 0) * 4)); transform: translateZ(calc(var(--i, 0) * -1.3px)); }
.v3d-face { transform: translateZ(.6px); background: linear-gradient(135deg, #fbecd0 0%, #e2bd86 26%, #a47f54 52%, #e9c894 74%, #8a6a44 100%); }
.v3d-shine { transform: translateZ(.8px); background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .8) 50%, transparent 62%) 0 0 / 260% 100% no-repeat; animation: vshine 4.5s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes vtilt { 0%, 100% { transform: rotateY(-16deg) rotateX(6deg); } 50% { transform: rotateY(16deg) rotateX(-4deg); } }
@keyframes vshine { 0%, 35% { background-position: 130% 0; } 75%, 100% { background-position: -30% 0; } }
.lc-vallamo::after { content: ""; position: absolute; left: 50%; bottom: 40px; width: 70px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: rgb(var(--ink-c) / .16); filter: blur(6px); }
.build-mark { display: grid; place-items: center; height: 96px; margin: 0 auto 18px; perspective: 600px; }
.build-mark .build-logo { width: 80px; height: 80px; object-fit: contain; mix-blend-mode: multiply; }
.build-mark .v3d-spin { width: 64px; height: 64px; animation: vspin 2.8s linear infinite; }
@keyframes vspin { to { transform: rotateY(360deg); } }

/* glass field with the CTA inside (wizard `glass` input) */
.url-form { display: flex; align-items: center; gap: 8px; width: min(580px, 100%); padding: 6px 6px 6px 16px; border-radius: 16px;
  background: rgb(var(--paper-c) / .72); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--sh-pop), inset 0 0 0 1px rgb(var(--ink-c) / .06); transition: background .15s; }
.url-form:focus-within { background: rgb(var(--paper-c)); }
.url-form .globe { width: 18px; height: 18px; flex: none; fill: none; stroke: rgb(var(--ink-4-c)); stroke-width: 1.6; }
.url-form input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; font: 400 16px var(--sans); color: rgb(var(--ink-c)); padding: 11px 4px; }
.url-form input:focus { outline: none; background: transparent; }
.ticks { list-style: none; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; padding: 0; margin: 18px 0 0; color: rgb(var(--ink-3-c)); font-size: 14px; }
.ticks li { display: inline-flex; align-items: center; gap: 7px; }
.ticks li::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700; background: rgb(var(--sage-wash-c)); color: rgb(var(--sage-ink-c)); }
.form-error { color: rgb(var(--rose-ink-c)); background: rgb(var(--rose-wash-c)); box-shadow: inset 0 0 0 1px rgb(var(--rose-soft-c)); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-top: 14px; }
.turnstile:empty { display: none; }
.turnstile { margin-top: 12px; }

.how { margin: 64px auto 0; max-width: 960px; text-align: center; }
.how h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; }
.how-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 28px 0 32px; text-align: left; }
.how-steps li { counter-increment: s; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px;
  background: rgb(var(--paper-c) / .6); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .06); }
.how-steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; background: rgb(var(--clay-soft-c)); color: rgb(var(--clay-ink-c)); }
.how-steps span { color: rgb(var(--ink-2-c)); font-size: 14px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; }
.trust-grid div { padding: 6px 4px 0 30px; position: relative; }
.trust-grid div::before { content: "✓"; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: rgb(var(--sage-wash-c)); color: rgb(var(--sage-ink-c)); }
.trust-grid p { margin-top: 4px; color: rgb(var(--ink-2-c)); font-size: 14px; }

/* ---------- headings on step screens (wizard Head) ---------- */
.view-build h2, .setup-head h2, .live-head h2 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.15; }
.setup-head p, #build-sub { margin-top: 10px; font-size: 17px; color: rgb(var(--ink-2-c)); }

/* ---------- fields (wizard `glass`) ---------- */
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.span2 { grid-column: span 2; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: rgb(var(--ink-2-c)); }
.field { margin-top: 14px; }
input, textarea { width: 100%; font: 400 15px var(--sans); color: rgb(var(--ink-c)); border: 0; border-radius: 12px; padding: 12px 14px;
  background: rgb(var(--paper-c) / .7); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .06); transition: background .15s, box-shadow .15s; }
input { min-height: 48px; }
input:focus, textarea:focus { outline: none; background: rgb(var(--paper-c)); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .2); }
input::placeholder, textarea::placeholder { color: rgb(var(--ink-4-c)); }
textarea { resize: vertical; }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
label.check input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; accent-color: rgb(var(--ink-c)); flex: none; box-shadow: none; }

/* wizard Note tones */
.notice { border-radius: 12px; padding: 10px 14px; font-size: 13px; background: rgb(var(--amber-soft-c) / .6); color: rgb(var(--amber-ink-c)); }

/* ---------- build ---------- */
.view-build { max-width: 560px; margin: 0 auto; text-align: center; }
.progress { list-style: none; padding: 20px 22px; margin: 26px 0 0; text-align: left; display: grid; gap: 12px; }
.progress:empty { display: none; }
.progress li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgb(var(--ink-4-c)); }
.progress li .dot { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 700;
  box-shadow: inset 0 0 0 2px rgb(var(--ink-c) / .12); }
.progress li.active { color: rgb(var(--ink-2-c)); }
.progress li.active .dot { box-shadow: none; border: 2px solid rgb(var(--clay-c)); border-top-color: transparent; animation: spin .8s linear infinite; }
.progress li.done { color: rgb(var(--ink-c)); animation: blurIn .5s cubic-bezier(.2, .7, .2, 1) both; }
.progress li.done .dot { background: rgb(var(--sage-wash-c)); color: rgb(var(--sage-ink-c)); box-shadow: none; }
.progress li.done .dot::after { content: "✓"; }
.progress li.failed { color: rgb(var(--rose-ink-c)); }
.progress li.failed .dot { background: rgb(var(--rose-wash-c)); color: rgb(var(--rose-ink-c)); box-shadow: none; }
.progress li.failed .dot::after { content: "!"; }
.progress .detail { margin-left: auto; font-size: 12px; color: rgb(var(--ink-3-c)); text-align: right; }
@keyframes spin { to { transform: rotate(360deg); } }
.build-failed { margin-top: 22px; text-align: left; display: grid; gap: 14px; }
.build-failed > p:not(.form-error) { color: rgb(var(--ink-2-c)); text-align: center; }

/* ---------- setup ---------- */
.setup-head { text-align: center; margin-bottom: 30px; }
.setup-grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip { border: 0; border-radius: 999px; padding: 6px 12px; font: 500 13px var(--sans); cursor: pointer; color: rgb(var(--ink-2-c));
  background: rgb(var(--paper-c) / .7); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .1); transition: all .15s; }
.chip:hover { background: rgb(var(--paper-c)); }
.chip[aria-pressed="true"] { background: rgb(var(--ink-c)); color: rgb(var(--on-ink-c)); box-shadow: none; }
.segmented { border: 0; padding: 0; margin: 20px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.segmented legend { font-size: 14px; font-weight: 500; color: rgb(var(--ink-2-c)); margin-bottom: 8px; padding: 0; }
.segmented label { display: block; }
.segmented input { position: absolute; opacity: 0; width: 1px; min-height: 0; }
.segmented span { display: grid; place-items: center; height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500;
  color: rgb(var(--ink-2-c)); background: rgb(var(--paper-c) / .7); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .1); transition: all .15s; }
.segmented input:checked + span { background: rgb(var(--ink-c)); color: rgb(var(--on-ink-c)); box-shadow: none; }
.segmented input:focus-visible + span { outline: 2px solid rgb(var(--clay-c)); outline-offset: 2px; }
.preview-bubble { margin-top: 20px; max-width: 92%; padding: 10px 14px; border-radius: 16px 16px 16px 6px; font-size: 14px;
  background: rgb(var(--paper-c)); box-shadow: var(--sh-xs); color: rgb(var(--ink-c)); }
#greeting-hint { margin-top: 8px; }
.link-btn { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font: inherit; color: rgb(var(--clay-c)); text-decoration: underline; cursor: pointer; }
.link-btn[hidden] { display: none; }
.found-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.table-wrap { overflow-x: auto; }
.svc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.svc-table th { text-align: left; font-size: 12px; color: rgb(var(--ink-4-c)); font-weight: 600; padding: 4px 6px; }
.svc-table td { padding: 3px 4px; vertical-align: middle; }
.svc-table td input { min-height: 40px; padding: 8px 10px; font-size: 14px; border-radius: 10px; }
.svc-table td:nth-child(1) { min-width: 180px; }
.svc-table td:nth-child(2), .svc-table td:nth-child(3) { width: 116px; }
.src { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  background: rgb(var(--sage-wash-c)); color: rgb(var(--sage-ink-c)); }
.src.warn { background: rgb(var(--rose-wash-c)); color: rgb(var(--rose-ink-c)); }
.src.you { background: rgb(var(--clay-wash-c)); color: rgb(var(--clay-ink-c)); }
.icon-btn { border: 0; background: none; color: rgb(var(--ink-4-c)); cursor: pointer; font-size: 18px; padding: 4px 6px; border-radius: 8px; }
.icon-btn:hover { color: rgb(var(--ink-c)); }
#add-svc { margin-top: 10px; }
.setup-actions { text-align: center; margin-top: 30px; }

/* ---------- test ---------- */
.demo-banner { display: flex; align-items: center; gap: 10px; margin: 0 auto 20px; width: fit-content; max-width: 100%; padding: 9px 16px; border-radius: 999px; font-size: 14px;
  color: rgb(var(--ink-2-c)); background: rgb(var(--paper-c) / .6); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .06); }
.demo-banner .tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: rgb(var(--clay-soft-c)); color: rgb(var(--clay-ink-c)); }
.test-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
/* the chat is the wizard's test-chat panel: glass, rounded-3xl, shadow-float */
.chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-height: 600px; border-radius: 24px; box-shadow: var(--sh-float), inset 0 0 0 1px rgb(var(--paper-c) / .7); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; box-shadow: 0 1px 0 rgb(var(--ink-c) / .06); }
.chat-head > div { flex: 1; display: grid; min-width: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgb(var(--clay-c)); color: rgb(var(--on-ink-c)); font-weight: 600; font-size: 16px; }
.messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; max-height: 58vh; }
.msg { max-width: 85%; display: grid; gap: 6px; animation: blurIn .5s cubic-bezier(.2, .7, .2, 1) both; }
.msg .bubble { padding: 10px 14px; border-radius: 16px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.customer { align-self: flex-end; }
.msg.customer .bubble { background: rgb(var(--ink-c)); color: rgb(var(--on-ink-c)); border-bottom-right-radius: 6px; }
.msg.assistant .bubble { background: rgb(var(--paper-c)); color: rgb(var(--ink-c)); border-bottom-left-radius: 6px; box-shadow: var(--sh-xs); }
.msg.system { align-self: center; max-width: 92%; }
.msg.system .bubble { background: rgb(var(--paper-c) / .6); color: rgb(var(--ink-2-c)); font-size: 13px; text-align: center; box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .06); }
.msg.system .btn { margin-left: 6px; }
.msg .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.msg .why { font-size: 12px; color: rgb(var(--ink-4-c)); }
.msg .flag { font-size: 12px; font-weight: 600; color: rgb(var(--sage-ink-c)); }
.msg .flag.warn { color: rgb(var(--rose-ink-c)); }
.typing { display: inline-flex; gap: 4px; padding: 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--ink-4-c)); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.starters { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px; }
.starter { text-align: left; border: 0; cursor: pointer; border-radius: 999px; padding: 7px 13px; font: 500 12px/1.35 var(--sans); max-width: 100%;
  background: rgb(var(--paper-c) / .8); color: rgb(var(--clay-ink-c)); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .05); }
.starter small { display: none; }
.starter:hover { background: rgb(var(--paper-c)); }
.composer { display: flex; gap: 8px; padding: 12px; }
.composer input { min-height: 42px; border-radius: 12px; padding: 10px 12px; font-size: 14px; background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .16); }
.composer input:focus { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .34); }
.composer input:-webkit-autofill { -webkit-text-fill-color: rgb(var(--ink-c)); -webkit-box-shadow: 0 0 0 100px rgb(var(--paper-c)) inset; }
.composer .btn { min-height: 42px; border-radius: 12px; padding: 0 16px; }
.remaining { padding: 0 18px 14px; font-size: 12px; color: rgb(var(--ink-4-c)); }
.paused { margin: 0 16px 12px; padding: 12px 14px; border-radius: 14px; font-size: 14px; display: grid; gap: 10px; justify-items: start;
  background: rgb(var(--sage-wash-c)); color: rgb(var(--sage-ink-c)); }
.side { display: grid; gap: 18px; }
.side .card { padding: 20px; }
.side h3 { margin-bottom: 12px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.timeline li { position: relative; padding-left: 28px; font-size: 14px; color: rgb(var(--ink-c)); animation: blurIn .5s cubic-bezier(.2, .7, .2, 1) both; }
.timeline li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; background: rgb(var(--sage-wash-c)); color: rgb(var(--sage-ink-c)); }
.timeline li.handoff::before { content: "→"; background: rgb(var(--clay-wash-c)); color: rgb(var(--clay-ink-c)); }
.timeline li.grounding_blocked::before, .timeline li.booking_refused::before { content: "!"; background: rgb(var(--rose-wash-c)); color: rgb(var(--rose-ink-c)); }
.timeline li.muted { padding-left: 0; color: rgb(var(--ink-3-c)); }
.timeline li.muted::before { display: none; }
.timeline small { display: block; margin-top: 2px; color: rgb(var(--ink-3-c)); font-size: 12px; }
.diary { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.diary li { font-size: 14px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.diary li.muted { color: rgb(var(--ink-3-c)); }
.diary li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cta-card { background: rgb(var(--clay-wash-c) / .8); }
.cta-card p { margin: 0 0 16px; color: rgb(var(--ink-2-c)); }

/* ---------- go live: the end of the demo ---------- */
.live-head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.live-head p { margin-top: 10px; font-size: 17px; color: rgb(var(--ink-2-c)); }
.live-choices { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; max-width: 860px; margin: 0 auto; align-items: stretch; }
.live-choice { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 26px; }
.live-choice h3 { font-family: var(--display); font-weight: 500; font-size: 26px; }
.live-choice p { color: rgb(var(--ink-2-c)); flex: 1; }
.live-choice .btn { margin-top: 6px; }
.live-primary { box-shadow: var(--sh-float), inset 0 0 0 1px rgb(var(--paper-c) / .8), 0 0 0 2px rgb(var(--clay-c) / .35); }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgb(var(--sage-wash-c)); color: rgb(var(--sage-ink-c)); }
.tag-quiet { background: rgb(var(--clay-wash-c)); color: rgb(var(--clay-ink-c)); }
.live-callback-wrap { position: relative; max-width: 560px; margin: 26px auto 0; display: grid; justify-items: center; gap: 16px; }
/* "Leave your number": a small drop-down under the link (not a window at the bottom of the page). */
.callback-pop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 30; width: min(340px, 92vw); margin-top: 10px; padding: 18px; border-radius: 16px;
  background: rgb(var(--paper-c)); box-shadow: var(--sh-pop), inset 0 0 0 1px rgb(var(--ink-c) / .08); text-align: left; }
.callback-pop[hidden] { display: none; }
.callback-pop form { display: grid; gap: 12px; margin: 0; }
.callback-pop label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: rgb(var(--ink-2-c)); }
.callback-pop input { min-height: 42px; }
.callback-done { display: grid; gap: 8px; }
.callback-done b { font-size: 15px; }
.live-callback-wrap .live-card { width: 100%; }
.live-back { text-align: center; margin-top: 22px; }
@media (max-width: 760px) { .live-choices { grid-template-columns: 1fr; } }
.live-card { max-width: 560px; margin: 0 auto; padding: 28px; }
.live-card > div > p { margin-top: 10px; color: rgb(var(--ink-2-c)); }
.live-card form { margin-top: 22px; }
#live-done { display: grid; gap: 14px; justify-items: start; }

.foot { display: flex; gap: 20px; justify-content: center; padding: 24px 16px 28px; font-size: 13px; color: rgb(var(--ink-4-c)); }
.foot a { color: rgb(var(--ink-4-c)); text-decoration: none; }
.foot a:hover { color: rgb(var(--ink-c)); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; font-size: 14px;
  background: rgb(var(--ink-c)); color: rgb(var(--on-ink-c)); box-shadow: var(--sh-pop); }

@media (max-width: 1080px) {
  .site-nav { grid-template-columns: 1fr auto; }
  .site-nav .nav-links { display: none; }
}
@media (max-width: 900px) {
  .setup-grid, .test-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .chat { min-height: 520px; }
}
@media (max-width: 640px) {
  .nav { padding: 16px; gap: 12px; }
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .site-nav { grid-template-columns: 1fr auto; padding: 14px 16px; }
  .site-nav .nav-actions { display: none; }
  .site-nav .mark { width: 28px; height: 28px; }
  .site-nav .wordmark { width: 78px; height: 25px; }
  .nav-menu { display: block; justify-self: end; position: relative; }
  .nav-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 12px; display: grid; place-content: center; gap: 6px;
    background: rgb(var(--paper-c) / .7); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .08); }
  .nav-menu summary::-webkit-details-marker { display: none; }
  .nav-menu summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: rgb(var(--ink-c)); }
  .nav-menu-panel { position: absolute; right: 0; top: 52px; z-index: 30; width: min(280px, calc(100vw - 32px)); padding: 10px; display: grid; gap: 2px; border-radius: 16px;
    background: rgb(var(--paper-c) / .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--sh-pop), inset 0 0 0 1px rgb(var(--ink-c) / .06); }
  .nav-menu-panel a { padding: 11px 12px; border-radius: 10px; color: rgb(var(--ink-c)); text-decoration: none; font-weight: 500; }
  .nav-menu-panel a:hover { background: rgb(var(--clay-wash-c)); }
  .nav-menu-panel .btn-demo { margin-top: 6px; justify-content: space-between; height: 46px; padding: 0 18px; color: rgb(var(--on-ink-c)); }
  .hero { padding-top: 20px; }
  .pill { font-size: 13px; padding: 6px 12px; }
  .logo-carousel { height: 176px; perspective: 800px; }
  .lc-card { width: 196px; height: 136px; padding: 14px 12px; }
  .lc-you { width: 214px; height: 150px; }
  .lc-card.is-left { transform: translate3d(calc(-50% - 132px), -50%, -170px) rotateY(26deg) scale(.74); }
  .lc-card.is-right { transform: translate3d(calc(-50% + 132px), -50%, -170px) rotateY(-26deg) scale(.74); }
  .lc-card.is-out-left { transform: translate3d(calc(-50% - 210px), -50%, -340px) rotateY(34deg) scale(.55); }
  .lc-card.is-out-right { transform: translate3d(calc(-50% + 210px), -50%, -340px) rotateY(-34deg) scale(.55); }
  .url-form { flex-direction: column; align-items: stretch; padding: 8px; }
  .url-form .globe { display: none; }
  .url-form input { padding: 12px; }
  .how-steps, .trust-grid, .form-grid.two { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .card { padding: 18px; }
  .msg { max-width: 92%; }
  .live-card { padding: 22px; }
  .demo-banner { border-radius: 14px; }
  .blob-warm { width: 380px; height: 380px; }
  .blob-cool { width: 320px; height: 320px; }
}

/* a select next to the demo's inputs */
select { width: 100%; min-height: 48px; font: 400 15px var(--sans); color: rgb(var(--ink-c)); border: 0; border-radius: 12px; padding: 12px 14px; background: rgb(var(--paper-c) / .7); box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .06); }
select:focus { outline: none; box-shadow: inset 0 0 0 1px rgb(var(--ink-c) / .2); }

/* v49.641: the support line that replaced the call-back form at the end of the demo. */
.live-help { max-width: 560px; margin: 26px auto 0; text-align: center; color: rgb(var(--ink-2-c)); }
.live-help a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- v49.681: the demo call ---------- */
.call-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
@media (max-width: 820px) { .call-grid { grid-template-columns: 1fr; } }
.call-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 26px 26px; }
/* the receptionist's voice: a slow, swirling sphere in the brand's own colours. It turns faster and swells with the voice (--lvl, 0 to 1,
   set from the receptionist's live audio level). Fixed size and its own layer, so the blur inside is cheap. */
.call-orb { --lvl: 0; position: relative; width: 168px; height: 168px; display: grid; place-items: center; margin: 4px 0 20px; }
.orb-glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--clay-c) / .38), rgb(var(--clay-c) / 0) 62%);
  filter: blur(10px); opacity: calc(.45 + var(--lvl) * .55); transform: scale(calc(.92 + var(--lvl) * .22)); transition: opacity .25s, transform .12s; }
.orb-core { position: relative; width: 140px; height: 140px; border-radius: 50%; overflow: hidden; isolation: isolate; will-change: transform;
  background: radial-gradient(circle at 45% 40%, rgb(236 176 112), rgb(168 104 60) 70%, rgb(96 58 34) 100%);
  box-shadow: 0 30px 64px -26px rgb(70 44 28 / .75), 0 0 0 1px rgb(255 255 255 / .35), inset 0 -14px 30px rgb(40 24 14 / .45), inset 0 8px 22px rgb(255 240 220 / .45);
  transform: scale(calc(1 + var(--lvl) * .07)); transition: transform .12s ease-out; }
/* four soft colour blobs orbiting inside the sphere at different speeds and distances: a slow liquid swirl, never a pinwheel */
.swirl { position: absolute; width: 78%; height: 78%; left: 11%; top: 11%; border-radius: 50%; filter: blur(16px); animation: orbSpin 11s linear infinite; }
.swirl.s1 { background: rgb(255 214 160); transform-origin: 30% 70%; }
.swirl.s2 { background: rgb(214 128 104); width: 64%; height: 64%; left: 30%; top: 4%; transform-origin: 20% 80%; animation-duration: 7.5s; animation-direction: reverse; opacity: .9; }
.swirl.s3 { background: rgb(64 36 22); width: 60%; height: 60%; left: 4%; top: 40%; transform-origin: 85% 15%; animation-duration: 9.5s; opacity: .85; }
.swirl.s4 { background: rgb(255 244 226); width: 46%; height: 46%; left: 34%; top: 30%; transform-origin: 70% 60%; animation-duration: 6s; animation-direction: reverse; mix-blend-mode: screen; }
.call-orb.live .swirl { animation-duration: 6s; }
.call-orb.live .swirl.s2, .call-orb.live .swirl.s4 { animation-duration: 4.5s; }
.call-orb.speaking .swirl { animation-duration: 2.8s; }
.call-orb.speaking .swirl.s2, .call-orb.speaking .swirl.s4 { animation-duration: 2.1s; }
.orb-shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 46% 32% at 34% 22%, rgb(255 255 255 / .8), rgb(255 255 255 / 0) 70%), radial-gradient(circle at 70% 88%, rgb(255 214 170 / .3), rgb(255 214 170 / 0) 38%); }
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbDrift { 0% { transform: translate(-6%, 4%) rotate(0deg) scale(1); } 100% { transform: translate(7%, -5%) rotate(120deg) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .swirl { animation: none !important; } .orb-core, .orb-glow { transition: none; } }
:root[data-theme="dark"] .orb-core { box-shadow: 0 28px 60px -26px rgb(0 0 0 / .9), inset 0 -10px 24px rgb(0 0 0 / .4), inset 0 6px 18px rgb(255 255 255 / .35); }
/* v49.796: on iPhone Safari (and some Chrome builds) the blurred blobs inside the sphere escaped its rounded clip and showed as a square block behind it. Clip the
   sphere three ways (a circle clip, a round mask and its own compositing layer), keep the shine round, and give the glow room so its blur is not cut flat. */
.orb-core { clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); -webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0) scale(calc(1 + var(--lvl) * .07)); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.swirl { -webkit-transform: translateZ(0); }
.call-orb { overflow: visible; isolation: isolate; }
/* the clip removes the sphere's own drop shadow, so the soft shadow on the ground under it is drawn separately */
.call-orb::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -2%; height: 14%; border-radius: 50%; background: rgb(70 44 28 / .34); filter: blur(14px); z-index: -1; pointer-events: none; }
:root[data-theme="dark"] .call-orb::after { background: rgb(0 0 0 / .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .call-orb::after { background: rgb(0 0 0 / .6); } }
.orb-glow { pointer-events: none; }
:root[data-theme="dark"] .orb-glow { background: radial-gradient(circle, rgb(var(--clay-c) / .3), rgb(var(--clay-c) / 0) 62%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .orb-glow { background: radial-gradient(circle, rgb(var(--clay-c) / .3), rgb(var(--clay-c) / 0) 62%); } }
.call-name { font-size: 20px; font-family: var(--display); font-weight: 500; }
.call-status { margin-top: 16px; font-weight: 600; color: rgb(var(--ink-2-c)); min-height: 1.5em; }
.call-timer { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.call-buttons { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
.btn-hangup { background: rgb(var(--rose-c, 190 70 70)); color: #fff; }
.btn-hangup:hover { filter: brightness(.94); }
.call-note { margin-top: 16px; max-width: 300px; }
.call-card .notice { margin-top: 14px; }
.call-live { display: flex; flex-direction: column; min-height: 360px; }
.call-transcript { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 440px; }
.call-transcript li { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.call-transcript li.caller { align-self: flex-end; background: rgb(var(--ink-c)); color: rgb(var(--on-ink-c)); border-bottom-right-radius: 6px; }
.call-transcript li.receptionist { align-self: flex-start; background: rgb(var(--clay-c) / .12); border-bottom-left-radius: 6px; }
.call-transcript li small { display: block; font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 2px; }
.call-result { max-width: 980px; margin: 20px auto 0; }
.call-did { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.call-did li { padding: 10px 14px; border-radius: 12px; background: rgb(var(--clay-c) / .08); }
.call-did li b { display: block; }

/* v49.772: "Put your number in and Élise will call you" */
body > .elise-gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgb(var(--ink-c) / .38); backdrop-filter: blur(6px); }
body > .elise-gate[hidden] { display: none; }
.elise-gate-card { width: min(440px, 100%); background: rgb(var(--paper-c)); border-radius: 22px; box-shadow: var(--sh-float); }
.elise-gate-card h2 { font: 500 26px/1.15 var(--display); margin: 0; color: rgb(var(--ink-c)); }
.elise-gate-card p.muted { margin: 0; }
.elise-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-weight: 400; font-size: 13px; line-height: 1.45; color: rgb(var(--ink-3-c)); }
.elise-consent input { width: 18px; min-height: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: rgb(var(--clay-c)); }

/* v49.773: the kinds of business, as Vallamo cards (replaces the greyed-out third-party logos) */
.lc-card.lc-kind { background: rgb(var(--paper-c)); box-shadow: var(--sh-pop), inset 0 0 0 1px rgb(var(--clay-c) / .18); gap: 6px; }
.lc-kind-icon { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--clay-wash-c)); box-shadow: inset 0 0 0 1px rgb(var(--clay-c) / .25); margin-bottom: 4px; }
.lc-kind-icon svg { width: 24px; height: 24px; fill: none; stroke: rgb(var(--clay-c)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lc-kind-name { font-family: var(--display); font-size: 19px; font-weight: 500; color: rgb(var(--ink-c)); line-height: 1.15; }
.lc-kind-meta { font-size: 12px; color: rgb(var(--ink-3-c)); }
/* their own business, when we find it: bigger, crisper logo */
.lc-you { gap: 8px; }
.lc-you .lc-logo { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 6px 18px -8px rgb(var(--ink-c) / .3), inset 0 0 0 1px rgb(var(--ink-c) / .08); }
.lc-you .lc-logo img { padding: 8px; image-rendering: auto; }
.lc-you .lc-letter { width: 84px; height: 84px; border-radius: 20px; font-size: 36px; }
.lc-you { height: 190px; }
.lc-card.lc-you { background: rgb(var(--paper-c)); }
/* phones: the side cards sit further out and fainter, so they never overlap the front card */
@media (max-width: 640px) {
  .lc-card.is-left { transform: translate3d(calc(-50% - 248px), -50%, -170px) rotateY(18deg) scale(.8); opacity: .5; }
  .lc-card.is-right { transform: translate3d(calc(-50% + 248px), -50%, -170px) rotateY(-18deg) scale(.8); opacity: .5; }
}

/* v49.775: cookie choice */
body > .cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 640px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 18px; border-radius: 16px; background: rgb(var(--paper-c)); box-shadow: var(--sh-float); font-size: 14px; color: rgb(var(--ink-2-c)); }
body > .cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; flex: 1 1 260px; }
.cookie-bar a { color: rgb(var(--clay-ink-c)); }
.cookie-actions { display: flex; gap: 8px; }
.cookie-actions .btn { min-height: 40px; padding: 8px 16px; }

.no-site { margin: 14px auto 0; text-align: center; }
.no-site .text-link { font-size: 14px; }