/* ==========================================================================
   Conn Web Works — the footage look (loads last, after styles.css and site.css)
   Real video behind the page (reel.js) with spiral hand-offs between sections, and a clean modern-technical
   layer on top: one sans family (Geist) set bold and tight, true black, white type, a single blue accent,
   and full-screen chapters with the name up top and the facts and actions at the bottom.
   ========================================================================== */
:root {
  --serif: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;   /* the old serif is retired */
  --night: #000;
  --ink: #f5f5f7;
  --ink-2: rgba(245, 245, 247, .76);
  --ink-3: rgba(245, 245, 247, .52);
  --hair: rgba(255, 255, 255, .12);
  --hair-2: rgba(255, 255, 255, .2);
  --blue: #3e7bfa;
  --blue-rgb: 62 123 250;
  --accent-ink: #8ab6ff;
  --warm: #8ab6ff;                       /* older rules used an amber accent; it now follows the blue */
  --glass-2: rgba(22, 22, 24, .64);
  --mat: blur(30px) saturate(180%);
  --r-lg: 22px;
  --r-btn: 10px;
}
html, html.no-world body { background: #000; }
body { letter-spacing: -0.011em; }
::selection { background: rgb(var(--blue-rgb) / .6); }

/* ---------- the footage layer ---------- */
#world { background: #000; }
.reel-fallback { position: fixed; inset: 0; z-index: 0; background: #000; pointer-events: none; transition: opacity .8s; }
.reel-fallback video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.reel-fallback video.on { opacity: 1; }
html.no-world #world { display: none; }
/* ---------- the dark backdrop (when CWW_CONFIG.footage is false) ----------
   Near-black with two soft, slow-drifting glows in the brand blue and a deep indigo, fixed behind the whole page.
   Only transforms animate (cheap on phones). The footage layer stays hidden except while the film plays. */
html.no-footage, html.no-footage body { background: #04060b; }
html.no-footage:not(.film-on) #world { visibility: hidden; }
html.no-footage body::before, html.no-footage body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; will-change: transform; }
html.no-footage body::before { width: 120vmax; height: 120vmax; left: -45vmax; top: -55vmax;
  background: radial-gradient(closest-side, rgba(62, 123, 250, .30), rgba(62, 123, 250, .10) 55%, transparent); animation: cww-drift-a 38s ease-in-out infinite alternate; }
html.no-footage body::after { width: 110vmax; height: 110vmax; right: -50vmax; bottom: -55vmax;
  background: radial-gradient(closest-side, rgba(96, 72, 214, .24), rgba(40, 90, 200, .08) 55%, transparent); animation: cww-drift-b 46s ease-in-out infinite alternate; }
@keyframes cww-drift-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.08); } }
@keyframes cww-drift-b { to { transform: translate3d(-12vmax, -9vmax, 0) scale(1.1); } }
html.no-footage.film-on body::before, html.no-footage.film-on body::after { display: none; }
/* the living backdrop (backdrop.js): aurora and stars drawn live; the CSS glows above are its fallback */
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: none; pointer-events: none; }
html.has-sky #sky { display: block; }
html.no-footage .x-shade { display: none; }
/* ---------- the blueprint under the satin (backdrop.js; only shown while Nova does a background trick) ---------- */
#behind { position: fixed; inset: 0; z-index: 0; display: none; pointer-events: none; overflow: hidden; color: #a9d0ff;
  background: radial-gradient(120% 90% at 50% 42%, #0e3486 0%, #08225c 45%, #051538 100%); font: 500 13px/1.4 var(--font-body); }
html.reveal-on #behind { display: block; }
#behind .bp-world { position: absolute; inset: 0; display: none; background: #05070c url(/assets/media/posters/hero-aerial.jpg) center / cover no-repeat; }
#behind .bp-world video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.15) contrast(1.05); }
#behind .bp-world::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgb(var(--glass-rgb) / .55)); }
#behind.world .bp-world { display: block; }
#behind.world .bp { display: none; }
#behind .bp-grid { position: absolute; inset: 0; opacity: .9;
  background-image: linear-gradient(rgba(150, 195, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 195, 255, .16) 1px, transparent 1px),
    linear-gradient(rgba(150, 195, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 195, 255, .06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -1px -1px; }
#behind svg { position: absolute; color: #9fcbff; overflow: visible; }
#behind .bp-browser { left: 50%; top: 52%; width: min(74vw, 980px); transform: translate(-50%, -50%); }
#behind .bp-phone { right: 4vw; bottom: 7vh; width: clamp(96px, 11vw, 180px); }
#behind .bp-d { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.reveal-on #behind .bp-d { animation: bp-draw 1.6s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
#behind .bp-title { position: absolute; left: 3vw; top: 13vh; margin: 0; display: grid; gap: 2px; padding: 10px 14px; border: 1px solid rgba(160, 205, 255, .5); }
#behind .bp-title b { font-size: 15px; color: #e3f0ff; }
#behind .bp-note { position: absolute; margin: 0; display: flex; align-items: center; gap: 8px; color: #dcecff; white-space: nowrap; }
#behind .bp-note i { width: 34px; height: 1px; background: currentColor; position: relative; }
#behind .bp-note i::before { content: ""; position: absolute; left: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #7fb6ff; box-shadow: 0 0 10px #7fb6ff; }
#behind .bp-note-tr { right: 4vw; top: 13vh; }
#behind .bp-note-hero { left: calc(50% - min(37vw, 490px)); top: calc(52% - min(23vw, 300px) - 28px); }
#behind .bp-note-phone { right: 4vw; bottom: calc(7vh + clamp(192px, 22vw, 360px) + 14px); }
#behind .bp-code { position: absolute; left: 3vw; bottom: 6vh; margin: 0; padding: 12px 14px; border-left: 2px solid #7fb6ff; background: rgb(var(--glass-rgb) / .6);
  color: #cfe4ff; font: 500 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
@media (max-width: 639px) {
  #behind .bp-browser { width: 92vw; top: 46%; }
  #behind .bp-note-hero { left: 4vw; top: calc(46% - 36vw - 30px); }
  #behind .bp-title { top: 11vh; }
  #behind .bp-note-tr { top: 11vh; right: 4vw; display: none; }
  #behind .bp-code { font-size: 10px; bottom: 15vh; }
  #behind .bp-phone { bottom: 15vh; }
  #behind .bp-note-phone { bottom: calc(15vh + 192px + 10px); }
}        /* the darkening for text over video isn't needed on the dark backdrop */
html.has-sky body::before, html.has-sky body::after, html.film-on #sky { display: none; }
@media (prefers-reduced-motion: reduce) { html.no-footage body::before, html.no-footage body::after { animation: none; } }
/* light gradients only where type sits: the header at the top, the actions at the bottom */
.x-shade { background: linear-gradient(180deg, rgb(var(--glass-rgb) / .55) 0%, rgb(var(--glass-rgb) / 0) 24%),
                       linear-gradient(0deg, rgb(var(--glass-rgb) / .74) 0%, rgb(var(--glass-rgb) / .28) 32%, rgb(var(--glass-rgb) / 0) 54%); }
.x-shade::after { display: none; }      /* each section sets its own brightness with data-dim (reel.js) */
.site-footer { background: linear-gradient(180deg, rgb(var(--glass-rgb) / .3), #000 34%); }

/* ---------- type: one family, bold and tight ---------- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.035em; }
.x-display { font: 600 clamp(2.9rem, 8.2vw, 8.6rem)/.95 var(--font-head); letter-spacing: -0.055em; }
.x-display-sm { font-size: clamp(2.6rem, 6.4vw, 6.6rem); }
.x-h2 { font: 600 clamp(2.3rem, 4.9vw, 4.8rem)/1 var(--font-head); letter-spacing: -0.048em; }
.x-display em, .x-h2 em, .fx-word em, .fx-fact em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }
.x-sub, .x-lead { color: var(--ink-2); font-size: clamp(1.03rem, 1.3vw, 1.28rem); line-height: 1.5; letter-spacing: -0.015em; }
.x-eyebrow { font-weight: 500; letter-spacing: -0.01em; }
.live-dot { background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.x-kick { background: none; color: var(--accent-ink); animation: none; }
.ld-line, .stop-t, .pkg-price, .pg-h, .pane-copy h3, .est-big, .vs-us, .vs-year h3, .vs-year-grid b, .posts a b, .proc-n,
.fp-meta b, .fx-title h3, .fx-word, .fx-fact, .stop-prices dd, .svc-t, .mq-track span { font-weight: 600; letter-spacing: -0.045em; }
.about-lede { font: 500 clamp(1.45rem, 2.2vw, 2.1rem)/1.28 var(--font-head) !important; letter-spacing: -0.03em !important; }
.lab-price b, .lab-info h3, .form h3, .modal h2 { font-family: var(--font-head) !important; font-weight: 600 !important; letter-spacing: -0.035em !important; }
.pkg-price small, .vs-us small { font-family: var(--font-body); font-weight: 500; letter-spacing: -0.01em; }

/* split headline: words spiral in (ui.js), so they must not be clipped */
[data-split] .w { overflow: visible; padding: 0; margin: 0; }
[data-split] .w > span { transform-origin: 50% 80%; }
html.ui-anim [data-split]:not(.split-in) .w > span { transform: none; opacity: 0; }
.x-h2 .bw { transform-origin: 50% 80%; }

/* ---------- buttons: a solid blue action and a frosted second one ---------- */
.btn { min-height: 48px; padding: 0 22px; border-radius: var(--r-btn); font: 500 .96rem/1 var(--font-body); letter-spacing: -0.012em; }
/* safety net: on a narrow phone or with large text a label wraps inside its button instead of spilling past the edge */
.btn { max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; line-height: 1.15; padding-block: 8px; }
.btn-primary { background: var(--blue); color: #fff; border: 0; box-shadow: none; }
.btn-primary:hover { background: #5b90fb; color: #fff; transform: none; box-shadow: 0 12px 34px -12px rgb(var(--blue-rgb) / .9); }
.btn-ghost { background: rgb(var(--fg-rgb) / .15); color: var(--ink); border: 0; backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat); }
.btn-ghost:hover { background: rgb(var(--fg-rgb) / .24); color: var(--ink); }
.btn-lg { min-height: 54px; padding: 0 30px; min-width: min(250px, 100%); font-size: 1rem; }
.btn-primary.btn-lg::after, .nav-cta::after { display: none; }    /* the footage carries the motion; buttons stay still */
.bf-ic { background: #fff; color: #000; }
.btn small { font-family: var(--font-body); }
:focus-visible { outline-color: var(--accent-ink); }

/* ---------- header ---------- */
.site-header::before { background: linear-gradient(180deg, rgb(var(--glass-rgb) / .62), rgb(var(--glass-rgb) / 0)); }
.brand-name { font-weight: 600; letter-spacing: -0.025em; }
.nav { background: rgb(var(--glass-rgb) / .9); }
.nav li a { font-weight: 600; letter-spacing: -0.045em; }
@media (min-width: 900px) {
  .nav { background: none; }
  .nav li a { font-weight: 500; letter-spacing: -0.01em; color: rgb(var(--fg-rgb) / .88); border-radius: 8px; }
  .nav li a:hover { background: rgb(var(--fg-rgb) / .12); }
  .nav-cta { min-height: 40px; border-radius: 8px; }
}

/* ---------- loader ---------- */
/* (the intro lives at the end of this file) */

/* ---------- hero: name up top, the live notification in the middle, actions at the bottom ---------- */
.x-hero { align-items: stretch; padding: calc(var(--header-h) + clamp(24px, 8vh, 96px)) 0 calc(clamp(28px, 6vh, 64px) + env(safe-area-inset-bottom)); }
.hero-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; }   /* centred, with the footage framing it */
.hero-foot { display: contents; }
.x-hero .x-eyebrow { order: 1; margin-bottom: 18px; }
.x-hero .x-display { order: 2; max-width: 12.5ch; margin: 0 auto; }
.x-hero .x-lead { order: 3; margin: 22px auto 22px; max-width: 33em; }
.hero-notif { order: 4; margin: auto 0; }
.hero-ctas { order: 5; justify-content: center; margin-top: 22px; }
.hero-trust { order: 6; margin: 16px auto 0; text-align: center; color: var(--ink-3); }
.hero-scroll { display: none !important; }
.x-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 46% at 50% 30%, rgb(var(--glass-rgb) / .34), rgb(var(--glass-rgb) / 0) 72%); }
.x-hero .x-lead, .x-hero .x-eyebrow { text-shadow: none; }
@media (max-width: 639px) {
  .x-hero { padding-top: calc(var(--header-h) + 18px); padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .x-hero .x-eyebrow { margin-bottom: 12px; font-size: .9rem; }
  .x-hero .x-lead { margin-top: 16px; font-size: 1rem; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { min-height: 50px; }
  .hero-trust { display: none; }
  html[data-chapter="top"] .sticky-cta, html[data-chapter="top"] .chat-launcher { opacity: 0; pointer-events: none; transform: translateY(20px); }
}
.hero-notif { display: flex; align-items: center; gap: 12px; width: min(380px, 100%); margin-block: auto; padding: 11px 14px 11px 11px; border-radius: 20px; text-align: left; text-shadow: none;
  background: rgb(var(--glass-rgb) / .5); border: 1px solid rgb(var(--fg-rgb) / .1); backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.28); }
html.ui-anim .hero-notif { opacity: 0; }
.hn-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: var(--blue); }
.hn-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hn-txt b { font-size: .93rem; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-txt small { font-size: .82rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-time { align-self: flex-start; padding-top: 2px; font-size: .74rem; color: var(--ink-3); }

/* ---------- film ---------- */
.film-poster { border-radius: var(--r-lg); border-color: var(--hair); background: rgb(var(--glass-rgb) / .2); }
.fp-play { background: #fff; color: #000; }
.fp-meta b { font-size: 1.45rem; }

/* ---------- the tour ----------
   Each stop is one full screen: the service name and one line at the top, then what is different, the prices
   (big numbers with small labels) and two actions at the bottom. With JavaScript (html.spin) the stops share the
   screen: a stop pins for --stop-len of scrolling while spin.js spirals its content in and out. */
.tour-intro { min-height: 58svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-bottom: clamp(48px, 10vh, 120px); }
.tour-intro .x-sub { margin-inline: auto; }
.tour-index { justify-content: center; }
.tour-index a { border-radius: 10px; border: 0; background: rgb(var(--fg-rgb) / .13); backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat); }
.tour-index a::before { color: var(--ink); background: rgb(var(--fg-rgb) / .18); }
.tour-index a:hover { background: rgb(var(--fg-rgb) / .22); }

.stop { --stop-len: 100svh; display: block; min-height: 150svh; padding: 0; }
.stop-card { position: sticky; top: 0; bottom: auto; width: 100%; max-width: none; height: 100svh; margin: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--header-h) + clamp(14px, 7vh, 80px)) var(--gutter) calc(clamp(20px, 5vh, 52px) + env(safe-area-inset-bottom));
  background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: none; }
.stop-card::after { display: none; }
.stop-card > * { will-change: transform, opacity; }
.stop-n, .stop-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stop-t { margin: 0 0 14px; max-width: 13ch; font: 600 clamp(2.5rem, 6.6vw, 6rem)/.98 var(--font-head); letter-spacing: -0.055em; transform-origin: 50% 60%; }
.stop-lead { max-width: 31em; margin: 0 auto; color: var(--ink-2); font-size: clamp(1rem, 1.35vw, 1.3rem); line-height: 1.45; transform-origin: 50% 0; }
.stop-diff { display: grid; gap: 10px; width: 100%; max-width: 1040px; margin: auto 0 clamp(18px, 3.4vh, 34px); text-align: left; transform-origin: 50% 100%; }
.stop-diff li { padding: 12px 0 0; border-top: 1px solid rgb(var(--fg-rgb) / .3); color: var(--ink); font-size: .96rem; line-height: 1.42; }
.stop-diff li::before { display: none; }
.stop-prices { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 5.5vw, 84px); margin: 0 0 clamp(10px, 2vh, 20px); background: none; border: 0; border-radius: 0; overflow: visible; }
.stop-prices > div { display: flex; flex-direction: column-reverse; align-items: center; padding: 0; background: none; }
.stop-prices dd { margin: 0; font: 600 clamp(1.6rem, 3.1vw, 2.6rem)/1.05 var(--font-head); letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stop-prices dt { margin-top: 5px; font-size: .84rem; color: var(--ink-2); }
/* the price comparison: everyone else's range as a pale band, ours as a short blue bar, on one shared scale */
.stop-cmp { width: 100%; max-width: 620px; margin: 0 0 clamp(14px, 2.6vh, 24px); padding: 13px 18px 12px; border-radius: 16px; text-align: left; text-shadow: none; transform-origin: 50% 100%;
  background: rgb(var(--glass-rgb) / .5); border: 1px solid var(--hair); backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat); }
.cmp-h { margin: 0 0 9px; font-size: .82rem; color: var(--ink-2); }
.cmp { display: grid; grid-template-columns: max-content minmax(56px, 1fr) max-content; gap: 8px 14px; align-items: center; margin: 0; padding: 0; list-style: none; }
.cmp li { display: contents; }
.cmp-l { font-size: .86rem; color: var(--ink-2); white-space: nowrap; }
.cmp-v { font-size: .92rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.cmp-bar { position: relative; height: 8px; border-radius: 99px; background: rgb(var(--fg-rgb) / .1); }
.cmp-bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--a, 0) * 1%); width: calc((var(--b, 100) - var(--a, 0)) * 1%); min-width: 8px; border-radius: 99px;
  background: rgb(var(--fg-rgb) / .5); transform: scaleX(var(--g, 1)); transform-origin: 0 50%; }
.cmp-bar .cmp-more { border-radius: 99px 0 0 99px; background: linear-gradient(90deg, rgb(var(--fg-rgb) / .5) 60%, rgb(var(--fg-rgb) / .1)); }   /* runs past the end of the scale */
.cmp-bar .cmp-dash { background: repeating-linear-gradient(90deg, rgb(var(--fg-rgb) / .45) 0 6px, transparent 6px 11px); }                       /* no published figure: not to scale */
.cmp-us .cmp-l { color: var(--ink); font-weight: 600; }
.cmp-us .cmp-v { color: var(--ink); font-size: 1.02rem; font-weight: 700; }
.cmp-us .cmp-bar i { background: var(--blue); box-shadow: 0 0 14px rgb(var(--blue-rgb) / .95); transform: scaleX(var(--g2, 1)); }
.cmp-note { margin: 10px 0 0; font-size: .82rem; line-height: 1.4; color: var(--ink-2); }
.stop-ctas { display: flex; justify-content: center; gap: 12px; width: 100%; transform-origin: 50% 100%; }
.stop-ctas .btn { min-height: 50px; min-width: min(250px, 100%); padding: 0 22px; font-size: .96rem; }
@media (min-width: 900px) {
  .stop-diff { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .stop-card { margin-left: 0; top: 0; }
}
html.spin .stop { min-height: 0; height: calc(100svh + var(--stop-len)); pointer-events: none; }
html.spin .stop + .stop { margin-top: -100svh; }
html.spin .stop-card { visibility: hidden; pointer-events: auto; }
html.spin .stop.on .stop-card { visibility: visible; }
/* phones: the tour pages one service per swipe (spin.js), so the browser must not scroll it on its own */
/* phones scroll the tour natively; spin.js only helps it land on one service at a time */
@media (max-width: 639px) {
  .stop { --stop-len: 90svh; }
  .stop-card { padding: calc(var(--header-h) + 6px) var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
  .stop-t { font-size: clamp(2.2rem, 10.6vw, 3rem); margin-bottom: 10px; }
  .stop-lead { font-size: .96rem; }
  .stop-diff { gap: 7px; margin-bottom: 14px; }
  .stop-diff li { padding-top: 7px; font-size: .87rem; line-height: 1.38; }
  .stop-prices { flex-wrap: nowrap; gap: 14px; margin-bottom: 10px; }
  .stop-prices dd { font-size: clamp(1rem, 5vw, 1.3rem); }
  .stop-prices dt { font-size: .74rem; margin-top: 3px; }
  .stop-cmp { margin-bottom: 12px; padding: 10px 12px 9px; border-radius: 14px; }
  .cmp { gap: 6px 9px; }
  .cmp-h { font-size: .74rem; margin-bottom: 7px; }
  .cmp-l { font-size: .76rem; }
  .cmp-v { font-size: .8rem; }
  .cmp-us .cmp-v { font-size: .88rem; }
  .cmp-bar { height: 7px; }
  .cmp-note { font-size: .74rem; line-height: 1.35; margin-top: 7px; }
  .stop-ctas { flex-wrap: nowrap; gap: 8px; }
  .stop-ctas .btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 10px; font-size: .86rem; line-height: 1.15; white-space: normal; }
}
@media (max-width: 639px) and (max-height: 700px) {
  .stop-lead { display: none; }
  .stop-diff li:nth-child(2) { display: none; }
}

/* ---------- panels over the footage: frosted, quiet ---------- */
.lab2, .pkg-group, .vs, .vs-year, .bundle-list li, .card.form, .est-out, .compare {
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: none;
  backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat); }
.lab2-tabs, .price-switch { border-radius: 12px; background: rgb(var(--fg-rgb) / .07); border: 0; }
.lab2-tabs button { border-radius: 9px; }
.lab2-tabs button[aria-selected="true"], .ps-tab[aria-selected="true"], .lab-tab[aria-selected="true"] { background: #fff; color: #000; }
.ask-chips button, .ask-form input, .est-set label { border-radius: 12px; }
.est input[type="range"] { accent-color: var(--blue); }
.est-set label:has(input:checked) { background: #fff; color: #000; }
.est-notes li::before, .feed li:first-child b::before { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.pkg:hover, .pkg:active { transform: none; }
.pkg-featured { background: linear-gradient(180deg, rgb(var(--blue-rgb) / .16), rgb(var(--blue-rgb) / 0) 62%); }
.pkg-badge { color: var(--accent-ink); font-weight: 600; }
.pkg-list span::before { border-color: var(--accent-ink); }
.vs-year { background: linear-gradient(140deg, rgb(var(--blue-rgb) / .2), rgb(var(--glass-rgb) / .7) 52%); }
.vs-us small { color: var(--accent-ink); }
.proc-n { color: var(--accent-ink); }
.field input, .field select, .field textarea { border-radius: 10px !important; }
.modal-inner { background: rgb(var(--glass-rgb) / .94) !important; border-color: var(--hair) !important; }
.chat-launcher { background: rgb(var(--glass-rgb) / .6); backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat); }
.sticky-cta { background: linear-gradient(to top, rgb(var(--glass-rgb) / .86) 50%, rgb(var(--glass-rgb) / 0)); }
/* cards spin into place (spin.js): give them a 3D stage */
.pkg-group, .bundle-list, .vs-list, .proc, .posts, .faq, .ask-chips, .contact-list { transform-style: flat; }
/* section heads in the single-column sections sit centred, like a product page */
#ai .x-head, #process .x-head, #pricing .x-head, #compare .x-head, #blog .x-head { margin-inline: auto; text-align: center; }
#ai .x-head .x-sub, #process .x-head .x-sub, #pricing .x-head .x-sub, #compare .x-head .x-sub, #blog .x-head .x-sub { margin-inline: auto; }

/* ---------- effects, recoloured to the one blue ---------- */
.beam { background: conic-gradient(from var(--beam-a), transparent 0deg 286deg, rgb(var(--blue-rgb) / .9) 322deg, #ffffff 346deg, transparent 360deg); }
[data-spot]::after { background: radial-gradient(440px circle at var(--sx, 50%) var(--sy, 50%), rgb(var(--blue-rgb) / .15), transparent 60%); }
.beam-glow { filter: drop-shadow(0 0 6px rgb(var(--blue-rgb) / .9)); }
.mq-track span::after { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.pin-ic { color: #fff; background: var(--blue); box-shadow: none; }

/* ---------- the film's overlays ---------- */
.fx-word, .fx-fact { letter-spacing: -0.055em; }
.fx-time small, .fx-stamp small { font-family: var(--font-body); font-weight: 400; letter-spacing: -0.015em; }
.fx-chip { border-radius: 12px; }
.fx-chip.done { background: var(--blue); color: #fff; border-color: transparent; }
.fx-bubble.me { background: var(--blue); color: #fff; }
.cn-btn { font-family: var(--font-body); }

/* ---------- reduced motion: nothing spins ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ui-anim [data-split]:not(.split-in) .w > span, html.ui-anim .hero-notif { opacity: 1; }
}

/* ---------- the film (film.js): a wider letterbox and the pitch's titles ---------- */
.cinema { --bar: 9vh; }
@media (min-aspect-ratio: 4/3) { .cinema { --bar: max(9vh, calc((100vh - 41.8vw) / 2)); } }   /* 2.39:1, like a movie, on wide screens */
.cn-bars i { height: var(--bar); }
.cn-stage { inset: var(--bar) 0; }
.cn-cc { bottom: calc(var(--bar) + 16px); }
.cn-ui { height: var(--bar); min-height: 56px; }
.fx-title h3 { font-weight: 700; letter-spacing: -0.055em; }
.fx-title p { font-size: clamp(1.2rem, 2.2vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; color: rgb(var(--fg-rgb) / .85); }
/* the missed calls and texts */
.fx-missed { right: var(--gutter); top: 0; bottom: 0; display: grid; align-content: center; gap: 10px; width: min(380px, 86vw); }
.fx-n { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px 12px 12px; border-radius: 18px; opacity: 0; text-shadow: none;
  background: rgb(var(--glass-rgb) / .74); border: 1px solid rgb(var(--fg-rgb) / .12); backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat); transition: filter .6s, opacity .6s; }
.fx-n i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--ink); background: #ff453a; }
.fx-n span { display: grid; gap: 2px; min-width: 0; }
.fx-n b { font-size: 1rem; font-weight: 600; }
.fx-n small { font-size: .84rem; color: rgb(var(--fg-rgb) / .72); }
.fx-lost { margin: 6px 0 0; font: 700 clamp(1.4rem, 3vw, 2.2rem)/1.1 var(--font-head); letter-spacing: -0.04em; color: #ff6b61; opacity: 0; }
.fx-missed:has(.fx-lost.in) .fx-n { filter: grayscale(1) brightness(.7); opacity: .5 !important; }
.fx-fact-sm { font-size: clamp(1.6rem, 4vw, 3.4rem) !important; color: rgb(var(--fg-rgb) / .85); }
.fx-center { left: 0; right: 0; top: 0; bottom: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
/* the AI front desk at work */
.fx-desk { inset: 0; }
.fx-list { position: absolute; left: var(--gutter); bottom: 9%; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fx-list li { display: flex; align-items: center; gap: 14px; opacity: 0; font: 600 clamp(1.3rem, 3vw, 2.5rem)/1.1 var(--font-head); letter-spacing: -0.04em; }
.fx-list svg { flex: none; width: 1.1em; height: 1.1em; padding: .22em; border-radius: 50%; color: #fff; background: var(--blue); box-shadow: 0 0 22px rgb(var(--blue-rgb) / .8); }
.fx-desk .fx-chat { position: absolute; }
/* the price against everyone else */
.fx-price { left: var(--gutter); right: var(--gutter); top: 0; bottom: 0; display: grid; align-content: center; gap: clamp(14px, 3vh, 26px); max-width: 760px; }
.fx-from { margin: 0; opacity: 0; font: 700 clamp(4rem, 12vw, 9.5rem)/.9 var(--font-head); letter-spacing: -0.06em; }
.fx-from small { display: block; margin-bottom: 10px; font: 500 clamp(1rem, 1.6vw, 1.3rem)/1 var(--font-body); letter-spacing: -0.01em; color: rgb(var(--fg-rgb) / .8); }
.fx-bars { display: grid; gap: 12px; margin: 0; padding: 14px 16px; list-style: none; opacity: 0; text-shadow: none; border-radius: 16px;
  background: rgb(var(--glass-rgb) / .55); backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat); }
.fx-bars li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 9em; align-items: center; gap: 14px; font-size: clamp(.85rem, 1.4vw, 1.05rem); color: rgb(var(--fg-rgb) / .78); }
.fx-bars i { justify-self: start; width: 0; min-width: 8px; height: 10px; border-radius: 99px; background: rgb(var(--fg-rgb) / .5); transition: width 1.3s var(--ease-out); }
.fx-bars.in i { width: var(--w); }
.fx-bars li:nth-child(2) i { transition-delay: .15s; } .fx-bars li:nth-child(3) i { transition-delay: .45s; }
.fx-bars b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.fx-bars .us { color: var(--ink); font-weight: 600; }
.fx-bars .us i { background: var(--blue); box-shadow: 0 0 16px rgb(var(--blue-rgb) / .95); }
.fx-bars .us b { font-weight: 700; color: var(--ink); }
.fx-own { margin: 0; opacity: 0; font: 600 clamp(1.6rem, 4vw, 3rem)/1 var(--font-head); letter-spacing: -0.045em; }
@media (max-width: 639px) {
  .fx-missed { left: var(--gutter); right: var(--gutter); width: auto; }
  .fx-desk .fx-chat { top: 4%; bottom: auto; left: var(--gutter); right: var(--gutter); width: auto; }
  .fx-list { bottom: 24%; gap: 8px; }
  .fx-list li { font-size: 1.25rem; }
  .fx-bars li { grid-template-columns: 6.6em minmax(0, 1fr) auto; gap: 8px; font-size: .74rem; }
}
/* film shots that are frames (no WebGL): cross-fade like the clips */
.cn-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.cn-video img.on { opacity: 1; }

/* ---------- the intro (index.html #loader, timing in ui.js) ----------
   0.0 s  a line of light opens across the dark
   0.5 s  the logo draws itself, its two dots light up
   1.7 s  "Conn Web Works" settles in from wide spacing and blur
   2.4 s  the motto arrives word by word, then a sheen passes over it
   ~4 s   everything flies toward you and dissolves onto the site
   Returning visitors (html.seen) get a 1.5-second version. Reduced motion: no movement, a short pause. */
.loader { display: grid; grid-template-rows: 1fr; place-items: center; padding: var(--gutter); background: #000; overflow: hidden; clip-path: none; transition: opacity 1.1s var(--ease-io), visibility 0s linear 1.1s; cursor: default; }
.loader.done { clip-path: none; opacity: 0; visibility: hidden; pointer-events: none; }
.ld-glow { position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background: radial-gradient(42% 34% at 50% 47%, rgb(var(--blue-rgb) / .34), rgb(var(--blue-rgb) / .08) 48%, transparent 72%); animation: ld-glow 3.4s .3s var(--ease-out) forwards; }
.ld-flare { position: absolute; left: 50%; top: 50%; width: 70vw; height: 2px; margin: -1px 0 0 -35vw; border-radius: 2px; pointer-events: none; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(150, 190, 255, .9) 30%, #fff 50%, rgba(150, 190, 255, .9) 70%, transparent);
  box-shadow: 0 0 18px 2px rgb(var(--blue-rgb) / .9), 0 0 60px 6px rgb(var(--blue-rgb) / .45); animation: ld-flare 1.5s .05s var(--ease-io) forwards; }
.ld-stage { position: relative; display: grid; justify-items: center; text-align: center; transition: transform 1.1s var(--ease-io), filter 1.1s var(--ease-io); }
.loader.done .ld-stage { transform: scale(1.22); filter: blur(14px); }
.ld-mark { width: clamp(68px, 9vw, 104px); height: auto; margin-bottom: clamp(16px, 3vh, 26px); overflow: visible; filter: drop-shadow(0 0 0 rgb(var(--blue-rgb) / 0)); animation: ld-mark-glow 1.4s 1.75s ease-out forwards; }
.ld-c, .ld-w { fill: none; stroke: url(#g-gold); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ld-c { stroke-width: 2.4; animation: ld-draw 1.15s .5s var(--ease-io) both; }
.ld-w { stroke-width: 2.2; animation: ld-draw .95s .95s var(--ease-io) both; }
.ld-dot { fill: var(--s); opacity: 0; transform-box: fill-box; transform-origin: center; animation: ld-dot .6s 1.6s var(--ease-out) forwards; }
.ld-dot2 { fill: var(--t); animation-delay: 1.72s; }
.ld-name { margin: 0; font: 600 clamp(1.15rem, 1.8vw, 1.5rem)/1 var(--font-head); color: var(--ink); opacity: 0; letter-spacing: .55em; filter: blur(10px); animation: ld-name 1.1s 1.7s var(--ease-out) forwards; }
.ld-motto { max-width: 13ch; margin: clamp(18px, 3.5vh, 30px) 0 0; font: 600 clamp(2.2rem, 6vw, 5rem)/1 var(--font-head); letter-spacing: -0.05em; text-wrap: balance; color: var(--ink); }
/* each phrase rises out of a blur, then a band of light runs across them one after another */
.ld-motto span { display: inline-block; opacity: 0; transform: translateY(34px); filter: blur(12px); color: transparent;
  background: linear-gradient(100deg, #fff 42%, #b9d2ff 50%, #fff 58%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text;
  animation: ld-word .9s var(--ease-out) forwards, ld-sheen 1s ease-in-out forwards; }
.ld-motto span:nth-child(1) { animation-delay: 2.4s, 3.2s; } .ld-motto span:nth-child(2) { animation-delay: 2.58s, 3.32s; }
.ld-motto span:nth-child(3) { animation-delay: 2.76s, 3.44s; } .ld-motto span:nth-child(4) { animation-delay: 2.94s, 3.56s; }
.ld-bar { position: absolute; left: 50%; right: auto; bottom: calc(28px + env(safe-area-inset-bottom)); width: min(180px, 40vw); height: 2px; margin-left: min(-90px, -20vw); border-radius: 2px; background: rgb(var(--fg-rgb) / .1); overflow: hidden; }
.ld-bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--lp, 0)); background: linear-gradient(90deg, var(--blue), #cfe0ff); transition: transform .4s var(--ease-out); }
@keyframes ld-flare { 0% { transform: scaleX(0); opacity: 0; } 35% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1.25) scaleY(.4); opacity: 0; } }
@keyframes ld-glow { to { opacity: 1; } }
@keyframes ld-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ld-dot { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ld-mark-glow { 40% { filter: drop-shadow(0 0 22px rgb(var(--blue-rgb) / .95)); } 100% { filter: drop-shadow(0 0 10px rgb(var(--blue-rgb) / .5)); } }
@keyframes ld-name { to { opacity: .92; letter-spacing: .02em; filter: blur(0); } }
@keyframes ld-word { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ld-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* returning visitors: the same picture, compressed into about a second and a half */
html.seen .ld-flare { animation-duration: .7s; }
html.seen .ld-glow { animation: ld-glow .6s forwards; }
html.seen .ld-c, html.seen .ld-w { animation-duration: .55s; animation-delay: .1s; }
html.seen .ld-dot { animation-delay: .5s; } html.seen .ld-mark { animation-delay: .55s; }
html.seen .ld-name { animation-duration: .6s; animation-delay: .35s; }
html.seen .ld-motto span { animation-duration: .6s, .6s; }
html.seen .ld-motto span:nth-child(1) { animation-delay: .5s, .95s; } html.seen .ld-motto span:nth-child(2) { animation-delay: .58s, 1.0s; }
html.seen .ld-motto span:nth-child(3) { animation-delay: .66s, 1.05s; } html.seen .ld-motto span:nth-child(4) { animation-delay: .74s, 1.1s; }
@media (prefers-reduced-motion: reduce) {
  .ld-flare { display: none; }
  .ld-glow, .ld-c, .ld-w, .ld-dot, .ld-mark, .ld-name, .ld-motto, .ld-motto span { animation: none !important; }
  .ld-glow { opacity: 1; } .ld-c, .ld-w { stroke-dashoffset: 0; } .ld-dot { opacity: 1; }
  .ld-name { opacity: .92; letter-spacing: .02em; filter: none; } .ld-motto span { opacity: 1; transform: none; filter: none; }
  .loader.done .ld-stage { transform: none; filter: none; }
}

/* ---------- the front page hook (spin.js runs the rotating line and the ask bar) ----------
   "Your website should …" with an ending that flips through what our sites do, a live "Ask our AI" bar
   (the real AI front desk), the two actions, and three quick numbers. */
.x-hero .hero-h { order: 2; display: grid; justify-items: center; max-width: 16ch; margin: 0 auto; font-size: clamp(2.6rem, min(6vw, 9.5vh), 6rem); line-height: .98; }
.hh-fixed { display: block; }
.hh-rot { display: grid; perspective: 900px; margin-top: .04em; }
.hh-rot > span { grid-area: 1 / 1; align-self: start; padding-bottom: .08em; opacity: 0; transform: translateY(32%) rotateX(-75deg); filter: blur(8px); transform-origin: 50% 0;
  background: linear-gradient(100deg, #fff 12%, #9cc2ff 55%, #fff 92%); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform .85s var(--ease-out), opacity .55s ease, filter .6s ease; }
.hh-rot > span.on { opacity: 1; transform: none; filter: none; }
.hh-rot > span.out { opacity: 0; transform: translateY(-30%) rotateX(75deg); filter: blur(8px); transition-duration: .55s; }
html.ui-anim .hh-rot:not(.go) > span.on { opacity: 0; transform: translateY(32%) rotateX(-75deg); filter: blur(8px); }
.x-hero .x-lead { order: 3; margin: 20px auto 22px; }
.hero-ask { order: 4; display: flex; align-items: center; gap: 10px; width: min(540px, 100%); margin: 0 auto; padding: 6px 6px 6px 16px; border-radius: 16px; text-shadow: none;
  background: rgb(var(--glass-rgb) / .58); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat);
  box-shadow: 0 22px 60px -24px rgb(var(--blue-rgb) / .7); transition: border-color .3s, box-shadow .3s; }
.hero-ask:focus-within { border-color: rgb(var(--blue-rgb) / .9); box-shadow: 0 0 0 4px rgb(var(--blue-rgb) / .28), 0 22px 60px -20px rgb(var(--blue-rgb) / .9); }
.ha-ic { flex: none; display: grid; place-items: center; color: #9cc2ff; }
.hero-ask input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 1.02rem var(--font-body); letter-spacing: -0.01em; outline: none; }
.hero-ask input::placeholder { color: rgb(var(--fg-rgb) / .62); }
.ha-go { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 12px; cursor: pointer; color: #fff; background: var(--blue); transition: background-color .2s, transform .2s; }
.ha-go:hover { background: #5b90fb; transform: translateX(2px); }
.ha-hint { order: 4; margin: 10px 0 0; font-size: .86rem; color: var(--ink-2); text-shadow: none; }
.x-hero .hero-ctas { order: 6; margin-top: auto; padding-top: 26px; }
.hero-stats { order: 7; display: flex; justify-content: center; gap: clamp(26px, 6vw, 72px); margin: 22px 0 0; text-shadow: none; }
.hero-stats > div { display: flex; flex-direction: column-reverse; align-items: center; }
.hero-stats dd { margin: 0; font: 600 clamp(1.3rem, 2.2vw, 1.9rem)/1 var(--font-head); letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.hero-stats dt { margin-top: 5px; font-size: .8rem; color: var(--ink-2); }
@media (min-width: 1100px) {
  .x-hero .hero-notif { position: absolute; right: var(--gutter); bottom: clamp(150px, 26vh, 260px); width: 330px; margin: 0; }
}
@media (max-width: 1099px) { .x-hero .hero-notif { order: 5; margin: auto 0; } .x-hero .hero-ctas { margin-top: 0; } }
@media (max-width: 639px) {
  .x-hero .hero-h { font-size: clamp(2.3rem, 11vw, 3.1rem); }
  .x-hero .x-lead { display: none; }
  .hero-ask { margin-top: 20px; }
  .hero-ask input { font-size: 1rem; }
  .ha-hint { font-size: .78rem; }
  .x-hero .hero-ctas { padding-top: 20px; }
  .hero-stats { gap: 18px; margin-top: 18px; }
  .hero-stats dd { font-size: 1.2rem; }
  .hero-stats dt { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .hh-rot > span { transition: opacity .3s; transform: none !important; filter: none !important; } }

/* ---------- typing dots (the replies in "Same night, twice") ---------- */
.hdm-dots { display: inline-flex; gap: 4px; padding: 3px 0; } .hdm-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: hdm-dot 1s infinite; }
.hdm-dots i:nth-child(2) { animation-delay: .15s; } .hdm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hdm-dot { 40% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 1099px) { .x-hero .hero-ctas { margin-top: 0; padding-top: 18px; } .x-hero .x-lead { display: none; } .hero-ask { margin-top: 22px; } .x-hero .hero-stats { margin-top: 16px; } }

/* ---------- "Same night, twice" (spin.js) ---------- */
#cost .x-head { margin-inline: auto; text-align: center; } #cost .x-head .x-sub { margin-inline: auto; max-width: 34em; }
.nt { --lost: #ff8578; --won: #6fe3a1; max-width: 720px; margin: 0 auto; }
.nt-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
.nt-chip { min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: 500 .9rem inherit; font-family: inherit; color: var(--ink-2);
  background: rgb(var(--fg-rgb) / .06); border: 1px solid rgb(var(--fg-rgb) / .14); transition: background-color .25s, color .25s, border-color .25s; -webkit-tap-highlight-color: transparent; }
.nt-chip:hover { color: var(--ink); border-color: rgb(var(--fg-rgb) / .3); }
.nt-chip[aria-pressed="true"] { color: #fff; background: rgb(var(--blue-rgb) / .9); border-color: transparent; box-shadow: 0 8px 26px -10px rgb(var(--blue-rgb) / .9); }
.nt-chip:focus-visible, .nt-mode:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nt-card { position: relative; padding: clamp(14px, 2.6vw, 26px); border-radius: 26px; background: rgb(var(--glass-rgb) / .66); border: 1px solid rgb(var(--fg-rgb) / .1);
  backdrop-filter: var(--mat); -webkit-backdrop-filter: var(--mat); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.36); overflow: hidden; }
.nt-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: rgb(var(--fg-rgb) / .06); }
.nt-mode { min-height: 38px; border: 0; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 500; font-size: .88rem; color: var(--ink-2); background: none; transition: background-color .3s, color .3s; -webkit-tap-highlight-color: transparent; }
.nt-mode[aria-pressed="true"][data-mode="off"] { color: var(--ink); background: rgba(255, 133, 120, .22); }
.nt-mode[aria-pressed="true"][data-mode="on"] { color: #fff; background: rgb(var(--blue-rgb) / .85); }
.nt-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; padding-bottom: 16px; border-bottom: 1px solid rgb(var(--fg-rgb) / .08); }
.nt-clock { display: grid; margin: 0; }
.nt-time { font: 600 clamp(2.4rem, 6vw, 3.4rem)/1 var(--font-head); letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nt-cap { margin-top: 6px; font-size: .9rem; color: var(--ink-2); }
.nt-tally { display: flex; gap: 18px; margin: 0; }
.nt-tally div { display: grid; text-align: right; transition: opacity .4s; }
.nt-tally dt { order: 2; font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.nt-tally dd { order: 1; margin: 0; font: 600 1.7rem/1.1 var(--font-head); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.is-off .nt-n-lost { color: var(--lost); } .is-on .nt-n-ok { color: var(--won); }
.is-on .nt-t-lost { opacity: .35; }
.nt-tally dd.bump { animation: nt-bump .5s var(--ease-out); }
@keyframes nt-bump { 30% { transform: scale(1.35); } }
.nt-feed { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.nt-ev { display: grid; gap: 7px; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .55s var(--ease-out); }
.nt-ev.in { opacity: 1; transform: none; }
.nt-msg { justify-self: start; max-width: 88%; padding: 9px 13px 10px; border-radius: 16px 16px 16px 6px; background: rgb(var(--fg-rgb) / .09); transition: opacity .6s, filter .6s; }
.nt-meta { display: flex; gap: 10px; justify-content: space-between; margin: 0 0 3px; font-size: .72rem; color: var(--ink-3); } .nt-meta b { font-weight: 600; color: var(--ink-2); }
.nt-q { margin: 0; font-size: .95rem; line-height: 1.38; color: var(--ink); }
.nt-ev.lost .nt-msg { opacity: .45; filter: grayscale(1); }
.nt-res { display: grid; gap: 6px; }
.nt-lost, .nt-win, .nt-ai { margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); }
.nt-lost.in, .nt-win.in, .nt-ai.in { opacity: 1; transform: none; }
.nt-lost { display: flex; align-items: flex-start; gap: 7px; padding-left: 4px; font-size: .88rem; line-height: 1.38; color: var(--lost); }
.nt-lost svg { flex: none; margin-top: .2em; }
.nt-ai { justify-self: end; max-width: 88%; padding: 9px 13px; border-radius: 16px 16px 6px 16px; font-size: .92rem; line-height: 1.38; color: #fff; background: rgb(var(--blue-rgb) / .85); }
.nt-win { justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink); background: rgba(46, 160, 98, .9); box-shadow: 0 0 22px rgba(70, 200, 120, .4); }
.nt-win svg { flex: none; }
.nt-morning { margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; font-size: .95rem; line-height: 1.45; color: var(--ink); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease-out); }
.nt-morning.in { opacity: 1; transform: none; }
.is-off .nt-morning { background: rgba(255, 133, 120, .12); border: 1px solid rgba(255, 133, 120, .28); }
.is-on .nt-morning { background: rgba(70, 200, 120, .12); border: 1px solid rgba(70, 200, 120, .3); }
.nt-end { margin-top: clamp(22px, 4vw, 36px); text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .7s var(--ease-out); }
.nt-end.in { opacity: 1; transform: none; }
.nt-end-on, .nt-end.on .nt-end-off { display: none; } .nt-end.on .nt-end-on { display: block; }
.nt-verdict { max-width: 22ch; margin: 0 auto 12px; font: 600 clamp(1.6rem, 3.6vw, 2.5rem)/1.08 var(--font-head); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
.nt-think { max-width: 32em; margin: 0 auto 20px; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.nt-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nt-note { margin: 18px auto 0; max-width: 40em; text-align: center; font-size: .76rem; color: var(--ink-3); }
@media (max-width: 639px) {
  .nt-pick { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px; scrollbar-width: none; }
  .nt-pick::-webkit-scrollbar { display: none; }
  .nt-chip { flex: none; min-height: 38px; padding: 0 14px; font-size: .85rem; }
  .nt-card { border-radius: 22px; }
  .nt-modes { margin-bottom: 14px; } .nt-mode { font-size: .8rem; }
  .nt-top { align-items: start; } .nt-tally { width: 100%; justify-content: space-between; } .nt-tally div { text-align: left; }
  .nt-tally { gap: 12px; } .nt-tally div { flex: 1 1 0; min-width: 0; } .nt-tally dt { white-space: normal; line-height: 1.25; }
  .nt-tally dd { font-size: 1.45rem; }
  .nt-q { font-size: .9rem; } .nt-ai { font-size: .87rem; } .nt-lost { font-size: .84rem; }
  .nt-ctas { flex-direction: column; } .nt-ctas .btn { width: 100%; }   /* stacked: both labels always fit */
}
@media (prefers-reduced-motion: reduce) { .nt-ev, .nt-lost, .nt-win, .nt-ai, .nt-morning, .nt-end { transition: none; } .nt-tally dd.bump { animation: none; } }
@media (min-width: 1100px) { .x-hero { padding-top: calc(var(--header-h) + clamp(16px, 4vh, 56px)); } }

/* ---------- "Preview your website" (preview.js) ---------- */
.pv-step[hidden] { display: none !important; }
.pv-label { display: block; margin: 18px 0 8px; font-weight: 600; font-size: .95rem; color: var(--ink); }
.pv-input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; font: 500 1.05rem var(--font-body); color: var(--ink); background: rgb(var(--fg-rgb) / .06); border: 1px solid rgb(var(--fg-rgb) / .16); outline: none; transition: border-color .2s, box-shadow .2s; }
.pv-input:focus { border-color: rgb(var(--blue-rgb) / .9); box-shadow: 0 0 0 4px rgb(var(--blue-rgb) / .25); }
.pv-input::placeholder { color: var(--ink-3); }
.pv-chips, .pv-looks { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-trade, .pv-look { min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: 500 .9rem var(--font-body); color: var(--ink-2); background: rgb(var(--fg-rgb) / .06); border: 1px solid rgb(var(--fg-rgb) / .14); transition: background-color .2s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.pv-trade[aria-pressed="true"] { color: #fff; background: rgb(var(--blue-rgb) / .9); border-color: transparent; }
.pv-look { display: inline-flex; align-items: center; gap: 8px; padding-left: 8px; }
.pv-look i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgb(var(--fg-rgb) / .25); }
.pv-look[data-look="midnight"] i { background: linear-gradient(135deg, #0b1220 50%, #3e7bfa 50%); }
.pv-look[data-look="forest"] i { background: linear-gradient(135deg, #0d1a14 50%, #2fb37a 50%); }
.pv-look[data-look="sunset"] i { background: linear-gradient(135deg, #1a0f0b 50%, #ff7a45 50%); }
.pv-look[data-look="classic"] i { background: linear-gradient(135deg, #faf8f4 50%, #b4884d 50%); }
.pv-look[aria-pressed="true"] { color: var(--ink); border-color: #fff; background: rgb(var(--fg-rgb) / .12); }
.pv-trade:focus-visible, .pv-look:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pv-submit { width: 100%; margin-top: 24px; }
.pv-fine { margin: 12px 0 0; font-size: .78rem; color: var(--ink-3); text-align: center; }

.pv-build { display: grid; place-content: center; gap: 16px; min-height: 340px; }
.pv-line { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 clamp(1.1rem, 2.4vw, 1.4rem) var(--font-head); letter-spacing: -0.02em; color: var(--ink-3); opacity: .35; transition: opacity .3s, color .3s; }
.pv-line::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.pv-line.on { opacity: 1; color: var(--ink); } .pv-line.on::before { animation: pv-spin .8s linear infinite; }
.pv-line.ok::before { animation: none; border-color: #6fe3a1; background: #6fe3a1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%230a0a0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@keyframes pv-spin { to { transform: rotate(360deg); } }

.pv-stage { display: grid; gap: 26px; justify-items: center; }
.pv-copy { width: 100%; }
.pv-copy h2 { padding-right: 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.03em; }
.pv-gets { display: grid; gap: 8px; margin: 14px 0 18px; padding: 0; list-style: none; }
.pv-gets li { position: relative; padding-left: 26px; font-size: .95rem; line-height: 1.4; color: var(--ink); }
.pv-gets li::before { content: ""; position: absolute; left: 0; top: .2em; width: 17px; height: 17px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pv-ctas { display: grid; gap: 10px; }

/* the phone and the sketch inside it */
.pv-phone { --pw: min(290px, 78vw); width: var(--pw); aspect-ratio: 9 / 19; padding: 9px; border-radius: 42px; background: #0a0a0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 80px -20px rgb(var(--blue-rgb) / .45); }
.pv-phone.in { animation: pv-rise .9s var(--ease-out) both; }
@keyframes pv-rise { from { opacity: 0; transform: translateY(40px) rotateX(18deg) scale(.94); } }
.pv-screen { position: relative; height: 100%; border-radius: 33px; overflow: hidden; }
.pv-site { --s-bg: #0b1220; --s-surf: #131c31; --s-ink: #f3f6ff; --s-mut: rgba(243, 246, 255, .66); --s-acc: #3e7bfa; --s-on: #fff;
  position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: var(--s-bg); color: var(--s-ink); font: 400 11px/1.35 var(--font-body); text-align: left; }
.pv-site[data-look="forest"] { --s-bg: #0d1a14; --s-surf: #15281f; --s-ink: #effaf3; --s-mut: rgba(239, 250, 243, .66); --s-acc: #2fb37a; }
.pv-site[data-look="sunset"] { --s-bg: #1a0f0b; --s-surf: #2a1812; --s-ink: #fff4ee; --s-mut: rgba(255, 244, 238, .68); --s-acc: #ff7a45; }
.pv-site[data-look="classic"] { --s-bg: #faf8f4; --s-surf: #ffffff; --s-ink: #1b1d22; --s-mut: rgba(27, 29, 34, .62); --s-acc: #b4884d; }
.pv-hero { position: relative; flex: none; height: 54%; display: flex; flex-direction: column; background: #222 center / cover no-repeat; }
.pv-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--glass-rgb) / .45), rgb(var(--glass-rgb) / .05) 30%, rgb(var(--glass-rgb) / .35) 60%, var(--s-bg)); }
.pv-hero > * { position: relative; }
.pv-status { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 7px 18px 0; font-size: 9.5px; font-weight: 600; color: var(--ink); }
.pv-notch { width: 62px; height: 16px; border-radius: 99px; background: #000; }
.pv-nav { display: flex; align-items: center; gap: 7px; padding: 10px 14px 0; color: var(--ink); }
.pv-logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font: 700 10px var(--font-head); color: var(--s-on); background: var(--s-acc); }
.pv-site[data-look="classic"] .pv-logo { color: var(--ink); }
.pv-brand { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 11.5px var(--font-head); letter-spacing: -0.01em; }
.pv-burger { display: grid; gap: 3px; } .pv-burger i { width: 14px; height: 1.6px; border-radius: 2px; background: currentColor; }
.pv-hero-txt { margin-top: auto; padding: 0 14px 12px; }
.pv-h { margin: 0 0 5px; font: 700 21px/1.02 var(--font-head); letter-spacing: -0.035em; color: var(--s-ink); text-wrap: balance; }
.pv-p { margin: 0 0 10px; color: var(--s-mut); font-size: 10.5px; }
.pv-btns { display: flex; gap: 6px; margin: 0; }
.pv-cta { display: inline-grid; place-items: center; min-height: 26px; padding: 0 11px; border-radius: 99px; font-weight: 600; font-size: 10px; color: var(--s-on); background: var(--s-acc); }
.pv-site[data-look="classic"] .pv-cta { color: var(--ink); }
.pv-cta2 { color: var(--s-ink) !important; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-ink) 30%, transparent); }
.pv-strip { display: flex; gap: 10px; margin: 0; padding: 7px 14px; font-size: 9.5px; color: var(--s-mut); }
.pv-open::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #3ccf7f; vertical-align: 1px; }
.pv-svcs { display: grid; gap: 5px; margin: 0; padding: 2px 14px; list-style: none; }
.pv-svcs li { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: 10.5px; background: var(--s-surf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-ink) 8%, transparent); }
.pv-go { color: var(--s-acc); font-size: 14px; line-height: 1; }
.pv-chat { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--s-surf) 92%, transparent);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px color-mix(in srgb, var(--s-ink) 10%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pv-chat-top { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 0 2px 6px; font-weight: 600; font-size: 10px; border-bottom: 1px solid color-mix(in srgb, var(--s-ink) 10%, transparent); }
.pv-chat-av { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--s-acc); }
.pv-chat-who { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv-chat-live { font-weight: 500; font-size: 9px; color: #3ccf7f; }
.pv-log { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22px); mask-image: linear-gradient(180deg, transparent, #000 22px); padding-top: 10px; }
.pv-b { max-width: 86%; margin: 0; padding: 6px 9px; border-radius: 12px; font-size: 10px; line-height: 1.32; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease-out); }
.pv-b.in { opacity: 1; transform: none; }
.pv-b.ai { align-self: flex-start; color: var(--s-ink); background: color-mix(in srgb, var(--s-ink) 10%, transparent); border-bottom-left-radius: 4px; }
.pv-b.me { align-self: flex-end; color: var(--s-on); background: var(--s-acc); border-bottom-right-radius: 4px; }
.pv-site[data-look="classic"] .pv-b.me { color: var(--ink); }
.pv-b.done { align-self: center; display: inline-flex; align-items: center; gap: 5px; max-width: none; padding: 5px 10px; border-radius: 99px; font-weight: 600; color: var(--ink); background: rgba(46, 160, 98, .95); }
.pv-b .hdm-dots i { width: 5px; height: 5px; }

@media (min-width: 900px) {
  .modal.pv { width: min(940px, calc(100% - 48px)); }
  .modal.pv .modal-inner { padding: 34px 34px 30px; }
  .pv-ask, .pv-build { max-width: 560px; margin: 0 auto; }
  .pv-stage { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 44px; justify-items: start; }
  .pv-phone { --pw: min(300px, calc((90vh - 80px) * 9 / 19)); }
  .pv-ctas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .pv-copy { text-align: left; }
  .pv-trade, .pv-look { min-height: 38px; font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) { .pv-phone.in { animation: none; } .pv-line.on::before { animation: none; } .pv-b { transition: none; } }

/* ---------- phones: no frosted-glass blur. Blurring what's behind a panel means redrawing it every frame while the
   background video plays, which made scrolling stutter. The panels keep their tint, slightly darker instead. ---------- */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .btn-ghost { background-color: rgb(var(--glass-rgb) / .72); }
  .hero-ask { background-color: rgb(var(--glass-rgb) / .84); }
  .stop-cmp { background-color: rgb(var(--glass-rgb) / .74); }
  .tour-index a { background-color: rgb(var(--glass-rgb) / .72); }
  .chat-launcher { background-color: rgb(var(--glass-rgb) / .9); }
  .nt-card { background-color: rgb(var(--glass-rgb) / .84); }
}

/* ---------- Nova, the flying robot assistant (nova.js; the photoreal look and its eyes in robot.js) ---------- */
html.has-nova .chat-launcher { display: none !important; }
.nova { position: fixed; left: 0; top: 0; z-index: 70; width: 92px; height: 120px; pointer-events: none; opacity: 0; transition: opacity .5s; will-change: transform; }
.nova.on { opacity: 1; }
html.film-on .nova, html.chat-open .nova, body.menu-open .nova { opacity: 0 !important; }
html.nova-intro .nova, html.nova-intro .nv-trail { z-index: 410; }        /* in the intro, Nova flies over the opening screen */
html.film-on .nova *, html.chat-open .nova *, body.menu-open .nova * { pointer-events: none !important; }
/* Nova never blocks a tap: everything about it lets taps through to the page (nova.js decides when a tap was meant for Nova) */
.nv-btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 40%; background: none; pointer-events: none; -webkit-tap-highlight-color: transparent; }
.nv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.nv-body { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 40%; perspective: 500px; }
/* turning to face the way it's going (a smooth 3D turn; the photo looks right, turned round it looks left) */
.nv-turn { display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.45, 0, .2, 1); }
.nv-spin { display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.nv-spin.spin { animation: nv-spin3d 1.1s cubic-bezier(.45, 0, .2, 1); }
@keyframes nv-spin3d { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(180deg) translateY(-10px); } 100% { transform: rotateY(360deg) translateY(0); } }
/* floating in place: two slow drifts with different timings (up/down and a slight rock), so the motion never visibly
   repeats; its shadow breathes in time. Pure CSS, so nothing runs in script while Nova hovers. */
.nova .nv-pic { animation: none; }
.nv-float { display: block; width: 100%; height: 100%; animation: nv-fy 3.6s ease-in-out infinite alternate, nv-fr 5.3s ease-in-out infinite alternate; }
@keyframes nv-fy { from { translate: 0 -3px; } to { translate: 0 3px; } }
@keyframes nv-fr { from { rotate: -1.3deg; } to { rotate: 1.5deg; } }
.nv-shadow { animation: nv-fs 3.6s ease-in-out infinite alternate; }
@keyframes nv-fs { from { scale: .86; opacity: .34; } to { scale: 1; opacity: .5; } }
/* real 3D Nova (nova3d.js): a transparent canvas a bit bigger than the robot, so it can turn and spin without clipping */
.nv-3d { position: absolute; left: -50%; top: -20%; width: 200%; height: 140%; max-width: none; max-height: none; pointer-events: none; }   /* room for its arms */
.nova.is-3d .nv-turn { display: none; }
.nova.is-3d .nv-3d { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.2)); }
@media (hover: none) and (pointer: coarse) { .nova.is-3d .nv-3d { filter: none; } }
/* Nova's soft shadow on the page below it, which shifts with its height (nova.js) */
.nv-shadow { position: absolute; left: 14%; right: 14%; top: 104%; height: 13%; border-radius: 50%; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse at 50% 50%, rgb(var(--glass-rgb) / .55), rgb(var(--glass-rgb) / .2) 45%, transparent 72%); }
html.film-on .nv-shadow, html.chat-open .nv-shadow { display: none; }
/* the comet trail canvas (nova.js draws on it) */
.nv-trail { position: fixed; inset: 0; z-index: 69; width: 100%; height: 100%; pointer-events: none; }
html.film-on .nv-trail, html.chat-open .nv-trail, body.menu-open .nv-trail { display: none; }
/* the little wobble when it stops dead */
.nova.settle .nv-body { animation: nv-settle .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nv-settle { 30% { transform: scale(1.05, .95); } 60% { transform: scale(.98, 1.03); } }
.nova.hop .nv-body { animation: nv-hop .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes nv-hop { 40% { transform: translateY(-16px) scale(1.06); } }
/* the photo and its eyes */
.nv-pic { position: relative; display: block; width: 100%; height: 100%; }
.nv-img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.nova .nv-img { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.22)); }
.nv-glow, .nv-lid { position: absolute; border-radius: 50%; pointer-events: none; }
.nv-lid { background: #070a10; transform: scaleY(0); transform-origin: 50% 30%; transition: transform .07s; }
.nv-lid-l { left: 44.2%; top: 21.4%; width: 13.5%; height: 12%; }
.nv-lid-r { left: 70.6%; top: 21.1%; width: 10.2%; height: 12.3%; }
.blink .nv-lid { transform: scaleY(1); }
.nv-glow { background: radial-gradient(circle, rgba(140, 195, 255, .95), rgba(62, 123, 250, .5) 40%, transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity .2s; }
.nv-glow-l { left: 39%; top: 16.4%; width: 24%; height: 22%; }
.nv-glow-r { left: 65.6%; top: 16.1%; width: 20%; height: 22%; }
.nova.talking .nv-glow { animation: nv-eyes .26s ease-in-out infinite alternate; }
@keyframes nv-eyes { from { opacity: .35; } to { opacity: .95; } }
.nova.listening .nv-glow { opacity: .8; }
/* a blue thruster glow underneath, brightest while it darts */
.nv-thrust { position: absolute; left: 22%; right: 22%; bottom: -4%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, rgba(160, 205, 255, .9), rgba(62, 123, 250, .45) 40%, transparent 72%); opacity: .45; transform: scale(.8); transition: opacity .2s, transform .2s; }
.nv-thrust { --thrust: 0; }
.nova .nv-thrust { opacity: calc(.4 + var(--thrust, 0) * .6); transform: scale(calc(.8 + var(--thrust, 0) * .45), calc(.8 + var(--thrust, 0) * .8)); transition: none; }
/* "Tap to talk to me": a small bubble that pops up above Nova now and then (nova.js); taps on it start a conversation */
.nv-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 7px 12px 7px 10px;
  border-radius: 999px; background: #fff; color: #0a0a0c; font: 600 .8rem/1 var(--font-body); letter-spacing: -0.01em; white-space: nowrap; pointer-events: none;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.24), 0 0 0 1px rgb(var(--fg-rgb) / .5), 0 0 22px rgba(62, 123, 250, .35);
  opacity: 0; transform: translate(-50%, 6px) scale(.85); transform-origin: 50% 100%; transition: opacity .25s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.nv-tip svg { color: #3e7bfa; flex: none; }
.nv-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; background: #fff; transform: translate(-50%, -5px) rotate(45deg); border-radius: 2px; }
.nv-tip.in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.nv-tip.below { bottom: auto; top: calc(100% + 14px); transform-origin: 50% 0; }
.nv-tip.below::after { top: auto; bottom: 100%; transform: translate(-50%, 5px) rotate(45deg); }
html.film-on .nv-tip, html.chat-open .nv-tip, body.menu-open .nv-tip { display: none; }
@media (max-width: 639px) { .nv-tip { font-size: .74rem; padding: 6px 10px 6px 8px; } }
@media (prefers-reduced-motion: reduce) { .nv-tip { transition: opacity .2s; } }
/* its words: beside Nova, toward the middle of the screen */
.nv-say { position: absolute; top: 36%; right: calc(100% + 6px); width: max-content; max-width: min(270px, calc(100vw - 104px)); margin: 0; padding: 11px 15px; border: 0; border-radius: 18px 18px 4px 18px;
  font: 500 .93rem/1.38 var(--font-body); letter-spacing: -0.01em; text-align: left; color: #0a0a0c; background: #fff; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.26), 0 0 0 1px rgb(var(--fg-rgb) / .6);
  pointer-events: none; opacity: 0; transform: translateY(-50%) translateX(8px) scale(.9); transform-origin: 100% 60%; transition: opacity .25s, transform .4s var(--ease-out); }
.nv-say.in { opacity: 1; transform: translateY(-50%); }
.nova[data-side="left"] .nv-say { right: auto; left: calc(100% + 6px); border-radius: 18px 18px 18px 4px; transform-origin: 0 60%; transform: translateY(-50%) translateX(-8px) scale(.9); }
.nova[data-side="left"] .nv-say.in { transform: translateY(-50%); }
.nv-say:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 639px) {
  .nova { width: 64px; height: 83px; }
  .nv-say { font-size: .86rem; padding: 9px 12px; max-width: min(230px, calc(100vw - 86px)); }
}
@media (hover: none) and (pointer: coarse) { .nova .nv-img { filter: none; } }
@media (prefers-reduced-motion: reduce) { .nova *, .nova .nv-pic { animation: none !important; } }
/* Nova's spotlight on the product it's pitching: a glowing frame that follows the product (nova.js positions it),
   a light sweep across it when Nova taps it, and a ripple drawn on the trail canvas */
.nv-hl { position: fixed; left: 0; top: 0; z-index: 68; pointer-events: none; border-radius: 16px; opacity: 0; transition: opacity .35s;
  box-shadow: 0 0 0 2px rgba(150, 198, 255, .9), 0 0 28px 4px rgba(62, 123, 250, .38), inset 0 0 22px rgba(62, 123, 250, .2); overflow: hidden; }
.nv-hl.on { opacity: 1; animation: nv-hl 1.5s ease-in-out infinite alternate; }
@keyframes nv-hl { from { box-shadow: 0 0 0 2px rgba(150, 198, 255, .55), 0 0 18px 2px rgba(62, 123, 250, .25), inset 0 0 16px rgba(62, 123, 250, .12); }
  to { box-shadow: 0 0 0 2px rgba(190, 222, 255, 1), 0 0 38px 8px rgba(62, 123, 250, .45), inset 0 0 26px rgba(62, 123, 250, .24); } }
.nv-hl::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(100deg, transparent, rgba(190, 222, 255, .35), transparent); opacity: 0; }
.nv-hl.sweep::after { animation: nv-sweep .9s cubic-bezier(.4, 0, .2, 1); }
@keyframes nv-sweep { 0% { left: -40%; opacity: 1; } 100% { left: 110%; opacity: 1; } }
html.film-on .nv-hl, html.chat-open .nv-hl, body.menu-open .nv-hl { display: none; }
/* Nova's voice on/off (nova.js shows it once Nova has started talking out loud) */
.nv-mute { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 69; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px 0 11px;
  border: 1px solid rgb(var(--fg-rgb) / .16); border-radius: 999px; cursor: pointer; font: 500 .84rem var(--font-body); color: var(--ink); background: rgb(var(--glass-rgb) / .86); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.28); }
.nv-mute[hidden] { display: none; }
.nv-mute.nv-hear { animation: nv-hear 1.8s ease-in-out infinite; }      /* "Hear Nova": a gentle pulse until sound is on */
@keyframes nv-hear { 0%, 100% { box-shadow: 0 0 0 0 rgba(62, 123, 250, .55); } 50% { box-shadow: 0 0 0 9px rgba(62, 123, 250, 0); } }
@media (prefers-reduced-motion: reduce) { .nv-mute.nv-hear { animation: none; } }
.nv-mute[aria-pressed="true"] { color: rgb(var(--fg-rgb) / .7); }
.nv-mute:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.film-on .nv-mute, html.chat-open .nv-mute { display: none; }
@media (max-width: 1036px) { .nv-mute { bottom: calc(84px + env(safe-area-inset-bottom)); } }
@media (max-width: 639px) { .nv-mute { width: 40px; padding: 0; justify-content: center; } .nv-mute span { display: none; } }