/* Ahmed's guest landing: one quiet first screen, a working composer and optional examples.
   Only loaded for guests. The story disappears once a conversation starts. */
.cv-guest .cv-chat { position:relative; isolation:isolate; overflow-x:hidden; }
html[data-theme="dark"] .cv-guest, html[data-theme="dark"] .cv-guest .cv-chat { --cv-canvas:#05070f; background:#05070f; }
html[data-theme="dark"] .cv-guest { --cv-bg:#101318; --cv-soft:#14171d; --cv-line:rgba(255,255,255,0.12); }
.cv-chat:has(.cv-intro[hidden]) > .vc-landing { display:none; }
.cv-chat > .vc-landing, .cv-chat > .cv-below { flex:0 0 auto; }
/* One rounded entry surface behind the existing, real chat elements. */
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden]))::before { content:""; position:absolute; z-index:-1; pointer-events:none;
  top:var(--vc-hero-top, 12px); left:16px; right:16px; height:var(--vc-hero-h, calc(100svh - 24px)); border-radius:40px;
  border:1px solid color-mix(in srgb, var(--cv-line) 55%, transparent); background:linear-gradient(160deg, #f0f2f3, #f7f7f6); }
html[data-theme="dark"] .cv-guest .cv-chat:has(.cv-intro-center:not([hidden]))::before { background:linear-gradient(160deg, #11161d, #0a0e14); }
/* Header: no frame on the landing, one solid pill for Sign in (Geist Mono, as on volkcell.com). */
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-site-header { border-color:transparent; background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none; }
.cv-guest .cv-site-header .cv-btn.cv-nav-signin { min-height:44px; padding:0 22px; border:0; border-radius:var(--cv-pill);
  background:var(--cv-accent); color:var(--cv-on-accent); font-family:var(--cv-font-mono); font-size:0.875rem; font-weight:400;
  letter-spacing:-0.01em; box-shadow:none; }
.cv-guest .cv-site-header .cv-btn.cv-nav-signin:hover { background:var(--cv-accent-2); color:var(--cv-on-accent); }
html[data-theme="dark"] .cv-guest .cv-site-header .cv-btn.cv-nav-signin:hover { background:#ffffff; color:#070b1c; }
/* Create free account sits beside Sign in (Ahmed, 2026-10-19): an outlined pill in the same type. */
.cv-guest .cv-header-end { display:flex; align-items:center; gap:8px; }
.cv-guest .cv-site-header .cv-btn.cv-nav-signup { min-height:44px; padding:0 20px; border:1px solid color-mix(in srgb, var(--cv-ink-strong) 28%, transparent);
  border-radius:var(--cv-pill); background:transparent; color:var(--cv-ink-strong); font-family:var(--cv-font-mono); font-size:0.875rem;
  font-weight:400; letter-spacing:-0.01em; box-shadow:none; white-space:nowrap; }
.cv-guest .cv-site-header .cv-btn.cv-nav-signup:hover { border-color:var(--cv-ink-strong); background:color-mix(in srgb, var(--cv-ink-strong) 6%, transparent); }
/* The sign-in banner is not shown on the landing screen (Ahmed, 2026-10-19); it returns once a chat starts. */
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > #cv-guest-notice { display:none; }

/* ---------- Trusted-by ribbon: a slim bar at the very top of the page ---------- */
.cv-chat > .vc-top-ribbon { flex:0 0 auto; width:100%; position:relative; z-index:2; background:transparent; overflow:hidden; }
.cv-chat:has(.cv-intro[hidden]) > .vc-top-ribbon { display:none; }
.cv-chat > .vc-top-ribbon .logo-ribbon { display:flex; align-items:center; gap:clamp(16px, 3vw, 32px); margin:0;
  padding:12px clamp(20px, 5vw, 72px); background:transparent; border:0; }
.cv-chat > .vc-top-ribbon .logo-ribbon-label { flex:0 0 auto; margin:0; font-size:0.8125rem; text-align:left; }
.cv-chat > .vc-top-ribbon .logo-marquee { flex:1 1 auto; min-width:0; margin:0; }
.cv-chat > .vc-top-ribbon .logo-marquee-item { font-size:0.9375rem; }
@media (max-width:720px) {
  .cv-chat > .vc-top-ribbon .logo-ribbon { flex-direction:column; align-items:stretch; padding:10px 0 6px; gap:6px; }
  .cv-chat > .vc-top-ribbon .logo-ribbon-label { text-align:center; font-size:0.8125rem; }
  .cv-chat > .vc-top-ribbon .logo-marquee-item { font-size:0.9375rem; }
}

/* Headline: the website's two-tone Geist line, compact so the example image can fill the rest of the screen. */
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-scroll {
  margin-top:0; padding-block:clamp(12px, 3vh, 32px) clamp(20px, 3.5vh, 36px); display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; min-height:0; overflow:visible; }
.cv-guest .cv-intro-center .cv-intro-title { max-width:21ch; margin:0 auto clamp(12px, 2vh, 22px); font-family:var(--cv-font-head);
  font-size:clamp(2.75rem, 6vw, 4.75rem); font-weight:500; line-height:1.03; letter-spacing:-0.045em; color:var(--cv-ink-strong);
  text-wrap:balance; }
.cv-guest .cv-intro-center .cv-intro-title .vc-title-soft { color:color-mix(in srgb, var(--cv-ink-strong) 68%, transparent); }
.cv-guest .cv-intro-center .cv-intro-text { max-width:52ch; font-size:clamp(1rem, 1.4vw, 1.125rem); line-height:1.55; color:var(--cv-muted); }

/* Composer: overlaps the foot of the example image (america.gov), so it sits at the bottom of the first screen. */
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-composer:not(.cv-docked) { position:relative; z-index:3;
  width:min(1056px, calc(100% - 96px)); margin:calc(-1 * (var(--vc-composer-h, 120px) + 20px)) auto 0; padding:0; }
/* The composer overlaps the image by 20px, so whatever follows it must clear that or it sits behind the image (2026-10-24).
   Keep this 20px equal to MEDIA_GAP in conversation-landing.js, which sizes the hero panel around it. */
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-guest-allowance,
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-below { margin-top:20px; }
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-guest-allowance { text-align:center; }
/* The docking spacer stands in for the composer, overlap included, so the page does not jump when it docks. */
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .vc-dock-spacer { margin-top:calc(-1 * (var(--vc-composer-h, 120px) + 20px)); }
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > #vc-dock-sentinel { height:20px; }
html .cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) .cv-composer:not(.cv-docked) .cv-dropzone { border:0; border-radius:28px; padding:16px 14px 12px 22px;
  background:var(--cv-bg); box-shadow:0 0 0 1px var(--cv-line), 0 18px 52px rgba(16,24,32,0.09); -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="dark"] .cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) .cv-composer:not(.cv-docked) .cv-dropzone { background:var(--cv-bg);
  box-shadow:0 0 0 1px rgba(255,255,255,0.16), 0 24px 64px rgba(0,0,0,0.45); }
html .cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) .cv-composer:not(.cv-docked) .cv-dropzone:focus-within { box-shadow:0 0 0 1px var(--cv-accent), 0 0 0 4px var(--cv-accent-tint), 0 28px 80px rgba(0,0,0,0.4); }
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) .cv-input { font-size:1.0625rem; }
.cv-guest .cv-chat .cv-icon-circle.cv-send:not([disabled]) { background:var(--cv-accent); color:var(--cv-on-accent); }
html[data-theme="dark"] .cv-guest .cv-chat .cv-icon-circle.cv-send[disabled] { background:rgba(255,255,255,0.14); color:rgba(255,255,255,0.6); opacity:1; }

/* Under the composer: only the free-use line now. */
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-below { gap:12px; padding:0 24px; }
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-below:has(.cv-free-line) { padding:4px 24px 20px; }
@media (max-width:480px) {
  .cv-guest .cv-chat .cv-site-nav { display:none; }
  .cv-guest .cv-site-header .cv-btn.cv-nav-signin, .cv-guest .cv-site-header .cv-btn.cv-nav-signup { min-height:40px; padding-inline:12px; font-size:0.9375rem; }
}
@media (max-width:720px) {
  .cv-guest .cv-chat:has(.cv-intro-center:not([hidden]))::before { left:8px; right:8px; border-radius:28px; }
  .cv-guest .cv-site-header { gap:8px; }
  .cv-guest .cv-site-nav { display:flex; }
  .cv-guest .cv-site-nav a:not(:first-child) { display:none; }
  .cv-guest .cv-chat .cv-site-nav a { padding-inline:8px; }
  .cv-guest .cv-header-end { margin-left:0; }
  .cv-guest .cv-site-header .cv-btn.cv-nav-signin { padding-inline:14px; }
  .cv-guest .cv-site-header .cv-btn.cv-nav-signup { padding-inline:14px; }
  .cv-guest .cv-intro-center .cv-intro-title { font-size:clamp(2.25rem, 9.4vw, 3rem); }
  .cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-composer:not(.cv-docked) { width:calc(100% - 48px); }
}
.cv-guest .cv-below .cv-free-line { margin:0; color:var(--cv-label); font-family:var(--cv-font-mono); font-size:0.8125rem; letter-spacing:0.02em; }

/* ---------- Docked composer: the same form, pinned to the bottom of the viewport ---------- */
.cv-chat > .vc-dock-spacer { flex:0 0 auto; }
.cv-chat > .cv-composer.cv-docked { position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  width:min(720px, calc(100vw - 24px)); box-sizing:border-box; margin:0 0 var(--vc-cookie-h, 0px); padding:0; z-index:40;
  border:0; background:transparent; box-shadow:none; }
.cv-composer.cv-docked .cv-dropzone { padding:16px 14px 12px 22px; border:0; border-radius:28px; background:color-mix(in srgb, var(--cv-bg) 82%, transparent); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 12px 40px rgba(0,0,0,0.28); }
/* Same specificity as the hero's labelled-attach rule in conversation-guest.css (which comes first), so the
   docked circle drops its asymmetric padding and the + sits in the centre. */
.cv-chat:has(.cv-intro:not([hidden])) .cv-composer.cv-docked .cv-attach-labelled,
.cv-composer.cv-docked .cv-attach-labelled { width:44px; height:44px; padding:0; gap:0; border-color:transparent; }
.cv-chat:has(.cv-intro:not([hidden])) .cv-composer.cv-docked .cv-attach-labelled .cv-attach-label { display:none; }
.cv-composer.cv-docked .cv-icon-circle { min-width:44px; min-height:44px; }
/* The pinned composer never covers the end of the page. */
.cv-chat:has(.cv-composer.cv-docked) { scroll-padding-bottom:calc(152px + env(safe-area-inset-bottom) + var(--vc-cookie-h, 0px)); }
.cv-chat:has(.cv-composer.cv-docked) > .cv-site-footer { padding-bottom:140px; }

/* ---------- Footer theme switch: plain text, no icon ---------- */
.vc-theme-link { display:inline-flex; align-items:center; min-height:44px; padding:0 8px; border:0; background:none; color:var(--cv-muted);
  font:inherit; cursor:pointer; }
.vc-theme-link:hover { color:var(--cv-accent); text-decoration:underline; }
.vc-theme-to-light { display:none; }
html[data-theme="dark"] .vc-theme-to-light { display:inline; }
html[data-theme="dark"] .vc-theme-to-dark { display:none; }

/* Attachment is secondary to the question and send action. */
.cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) .cv-composer:not(.cv-docked) .cv-attach-labelled {
  border-color:transparent; background:transparent; padding-inline:4px 8px; }

/* Keep the real composer compact while the visitor reads the page. */
.cv-composer.cv-docked .cv-dropzone { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px;
  padding:10px 14px; border-radius:30px; }
.cv-composer.cv-docked .cv-attachments { grid-column:1 / -1; }
html .cv-guest .cv-chat .cv-composer.cv-docked .cv-input { grid-column:1; min-width:0; padding:8px 0; font-size:1rem; line-height:1.5; }
.cv-composer.cv-docked .cv-composer-row { grid-column:2; margin:0; padding:0; }

/* One large example image, cycled in step with the "Try ..." placeholder; the composer overlaps its foot. */
.cv-chat > .vc-hero-media { flex:0 0 auto; position:relative; z-index:1; width:min(1120px, calc(100% - 48px));
  height:var(--vc-media-h, calc(100svh - 360px)); min-height:340px; margin:0 auto; overflow:hidden; border-radius:40px; background:#161b21; }
.cv-chat:has(.cv-intro[hidden]) > .vc-hero-media { display:none; }
.vc-hero-example { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.2s ease, visibility 1.2s; }
.vc-hero-example.is-active { opacity:1; visibility:visible; }
.vc-hero-example img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(0.75); }
.vc-hero-media::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,7,15,0.5), transparent 26%, transparent 42%, rgba(5,7,15,0.72)); transition:opacity 1.2s ease; }
/* The deck and "your images" slides are plain panels: no photo to darken. */
.vc-hero-media:has(.vc-hero-samples.is-active, .vc-hero-yours.is-active)::after { opacity:0; }
.vc-hero-label { position:absolute; top:24px; left:28px; z-index:2; color:rgba(255,255,255,0.86); font-size:0.8125rem; line-height:1.5;
  font-family:var(--cv-font-mono); letter-spacing:0.02em; }
/* Last two slides: the example sets, then an invitation to use your own images. */
.vc-hero-yours, .vc-hero-samples { display:grid; place-items:center; background:radial-gradient(120% 90% at 50% 20%, #1c2530, #0d1117 70%); }
.vc-hero-drop { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:calc(var(--vc-composer-h, 120px) + 40px);
  padding:32px 48px; border:1.5px dashed rgba(255,255,255,0.28); border-radius:28px; background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.9); font:inherit; font-size:1.0625rem; cursor:pointer; position:relative; z-index:2; transition:border-color 0.2s, background 0.2s; }
.vc-hero-drop small { color:rgba(255,255,255,0.55); font-size:0.8125rem; font-family:var(--cv-font-mono); }
.vc-hero-drop:hover, .vc-hero-drop:focus-visible { border-color:var(--cv-accent); background:rgba(255,255,255,0.06); }
html:not([data-theme="dark"]) .vc-hero-yours, html:not([data-theme="dark"]) .vc-hero-samples { background:radial-gradient(120% 90% at 50% 20%, #ffffff, #eceeef 70%); }
html:not([data-theme="dark"]) .vc-hero-drop { border-color:rgba(16,24,32,0.22); background:rgba(255,255,255,0.6); color:#14181d; }
html:not([data-theme="dark"]) .vc-hero-drop small { color:rgba(16,24,32,0.55); }
/* "Try with examples": three sample sets stacked like cards, fanned out on hover or focus (always fanned on touch). */
/* The deck fills the space between the slide controls and the composer that overlaps the image, and its cards are
   sized from that height as well as the width, so the labels under them are never hidden by the composer. */
.vc-hero-samples { display:block; }
.vc-deck { --deck-top:18px; --deck-bottom:calc(var(--vc-composer-h, 120px) + 32px);
  --room:calc(var(--vc-media-h, 560px) - var(--deck-top) - var(--deck-bottom));
  --card-w:max(84px, min(232px, 19vw, calc((var(--room) - 96px) / 0.75))); --card-gap:20px;
  position:absolute; left:0; right:0; top:var(--deck-top); bottom:var(--deck-bottom); z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; color:#fff; }
.vc-deck-title { margin:0; font-family:var(--cv-font-head); font-size:clamp(1.125rem, 1.8vw, 1.5rem); font-weight:500; letter-spacing:-0.02em; }
.vc-deck-hint { margin:0; font-size:0.8125rem; color:rgba(255,255,255,0.6); transition:opacity 0.3s; }
.vc-deck-cards { position:relative; width:var(--card-w); height:calc(var(--card-w) * 0.75 + 12px); }
.vc-deck-card { position:absolute; top:0; left:0; width:var(--card-w); padding:0; border:0; background:none; color:inherit; font:inherit;
  text-align:left; cursor:pointer; z-index:calc(3 - var(--i));
  transform:translate(calc((var(--i) - 1) * 14px), calc(var(--i) * -8px)) rotate(calc((var(--i) - 1) * 6deg));
  transition:transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vc-deck-card img { display:block; width:100%; aspect-ratio:4 / 3; height:auto; object-fit:cover; border-radius:16px;
  box-shadow:0 0 0 3px rgba(255,255,255,0.9), 0 14px 34px rgba(0,0,0,0.35); transition:box-shadow 0.2s, transform 0.2s; }
/* Labels sit on the card itself, so the deck needs no room for them under the images. */
.vc-deck-label { position:absolute; left:8px; right:8px; bottom:8px; display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:2px 8px; padding:6px 10px; border-radius:10px; background:rgba(5,7,15,0.72); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:0.8125rem; font-weight:500; line-height:1.3;
  opacity:0; transition:opacity 0.3s; }
.vc-deck-label small { color:rgba(255,255,255,0.72); font-family:var(--cv-font-mono); font-size:0.8125rem; font-weight:400; }
.vc-deck:hover .vc-deck-card, .vc-deck:focus-within .vc-deck-card {
  transform:translateX(calc((var(--i) - 1) * (var(--card-w) + var(--card-gap)))) rotate(0deg); }
.vc-deck:hover .vc-deck-label, .vc-deck:focus-within .vc-deck-label { opacity:1; }
.vc-deck:hover .vc-deck-hint, .vc-deck:focus-within .vc-deck-hint { opacity:0; }
.vc-deck-card:hover img, .vc-deck-card:focus-visible img { transform:translateY(-6px); box-shadow:0 0 0 3px var(--cv-accent), 0 18px 40px rgba(0,0,0,0.4); }
.vc-deck-card:focus-visible { outline:none; }
.vc-deck-card[aria-busy="true"] img { opacity:0.6; }
html:not([data-theme="dark"]) .vc-deck { color:#14181d; }
html:not([data-theme="dark"]) .vc-deck-hint { color:rgba(16,24,32,0.55); }
html:not([data-theme="dark"]) .vc-deck-card img { box-shadow:0 0 0 3px #fff, 0 14px 34px rgba(16,24,32,0.18); }
@media (hover:none) {
  .vc-deck .vc-deck-card { transform:translateX(calc((var(--i) - 1) * (var(--card-w) + var(--card-gap)))) rotate(0deg); }
  .vc-deck .vc-deck-label { opacity:1; }
  .vc-deck-hint { display:none; }
}
@media (max-width:720px) {
  .vc-deck { --deck-top:56px; --card-w:max(72px, min(calc((100vw - 96px) / 3), calc((var(--room) - 96px) / 0.75))); --card-gap:10px; gap:10px; }
  .vc-deck-label { left:4px; right:4px; bottom:4px; padding:4px 6px; font-size:0.8125rem; }
  .vc-deck-label small { display:none; }
}
@media (prefers-reduced-motion:reduce) { .vc-deck-card, .vc-deck-card img, .vc-deck-label { transition:none; } }

/* Previous / pause / next, top right of the image. */
.vc-hero-controls { position:absolute; top:16px; right:18px; z-index:2; display:flex; gap:8px; }
.vc-hero-ctrl { display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%;
  background:rgba(5,7,15,0.55); color:#fff; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,0.14); transition:background 0.2s; }
.vc-hero-ctrl:hover { background:rgba(5,7,15,0.8); }
.vc-hero-ctrl:focus-visible { outline:2px solid var(--cv-accent); outline-offset:2px; }
.vc-hero-ctrl .vc-hero-play, .vc-hero-ctrl[aria-pressed="true"] .vc-hero-pause { display:none; }
.vc-hero-ctrl[aria-pressed="true"] .vc-hero-play { display:block; }
@media (max-width:720px) {
  .cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-scroll { padding-block:12px 20px; }
  .cv-chat > .vc-hero-media { width:calc(100% - 24px); border-radius:28px; }
  .vc-hero-label { top:18px; left:18px; font-size:0.8125rem; }
  .vc-hero-controls { top:10px; right:10px; gap:6px; }
  .vc-hero-ctrl { width:36px; height:36px; }
  .vc-hero-drop { padding:24px 28px; font-size:0.9375rem; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { .vc-hero-example { transition:none; } }

/* Attached images show in the composer, which grows up over the (now still) hero image. */