/* Vizbl Sales Sample Pages — shared base styles
   Each sample folder overrides --brand-* tokens for its own look.
   Keep this file lean. Brand-specific tweaks live in sample <style> blocks. */

/* Load Inter up-front. Without this the page renders with Segoe UI / system
   fallback, and Vizbl's app_button.js silently injects @font-face Inter on
   first AR click — that swap re-flows every text node on the page (looks
   bolder / different size). Pre-loading kills the swap. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

/* ---- Page transitions ---------------------------------------------------- */
/* Chrome 126+ / Edge — native cross-document view transition: when you
   navigate to another sample page the browser fades the old DOM out and
   fades the new one in. Falls back silently in browsers that don't
   support it (Firefox / older Safari). */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vz-page-fade-out .35s ease-out forwards;
}
::view-transition-new(root) {
  animation: vz-page-fade-in  .45s ease-out forwards;
}
@keyframes vz-page-fade-out {
  to { opacity: 0; transform: translateY(-6px) scale(.995); }
}
@keyframes vz-page-fade-in {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* Page-arrive fade. Applied to inner wrappers (NOT body) because any
   animation/transform on body — even one that ends at `transform: none` —
   leaves a containing block in Chrome that hijacks `position: fixed`
   children: the try-on modal then anchored to body-top instead of
   viewport-top and flew off-screen when the page was scrolled. */
@keyframes vz-page-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
header.demo-header,
main,
section,
.industry-grid { animation: vz-page-arrive .5s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

*,*::before,*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Keep the vertical scrollbar pinned. If it can appear/disappear (because
     a modal locks scroll, etc.), the viewport width changes by ~15px and any
     font-size set in vw / any width-driven wrap recalculates — that's the
     "text gets bolder / shifts" effect on first AR-button click. */
  overflow-y: scroll;
  /* Clip horizontal overflow page-wide so decorations sitting outside their
     parent (vz-ar-bangs / "tap me" hint that hang off the AR button) can't
     create a horizontal scrollbar on either desktop or mobile. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink, #14161a);
  background: var(--bg, #ffffff);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* On tall windows short pages used to leave a bare white strip below the
     footer — the body bg only painted as tall as the actual content. Force
     the body to at least fill the viewport so the page bg always reaches
     the bottom edge, modal open or not. `dvh` (dynamic viewport) excludes
     iOS Safari's URL bar so the body doesn't grow past what's actually
     visible and create a phantom dark strip at the bottom. */
  min-height: 100vh;
  min-height: 100dvh;
}
/* Lock background scroll while the try-on modal is open so the dimmed
   page stays put and nothing peeks out below the backdrop. */
body.nb-modal-open { overflow: hidden; }
img,svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

/* ---- design tokens (defaults) ---- */
:root {
  --bg: #ffffff;
  --bg-alt: #f6f5f1;
  --ink: #14161a;
  --ink-soft: #5b6068;
  --line: #e6e3dc;
  --brand: #14161a;
  --brand-ink: #ffffff;
  --accent: #c7693d;
  --radius: 4px;
  --container: 1200px;
  --pad: clamp(16px, 3vw, 32px);
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

/* ---- layout primitives ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.row { display: flex; gap: 24px; flex-wrap: wrap; }
.grid { display: grid; gap: 24px; }
.muted { color: var(--ink-soft); }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
  color: var(--ink-soft); font-weight: 600;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 20px; }

/* ---- nav ---- */
.nav {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(140%) blur(10px);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad); max-width: var(--container); margin: 0 auto;
}
.nav-brand { font-family: var(--font-display); font-size: 22px; letter-spacing: .02em; }
.nav-links { display: flex; gap: 28px; font-size: 14px; }
.nav-links a { text-decoration: none; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }
.nav-cart { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

/* ---- breadcrumb ---- */
.crumbs { font-size: 13px; color: var(--ink-soft); padding: 18px 0 0; }
.crumbs a { text-decoration: none; }
.crumbs span { margin: 0 8px; opacity: .5; }

/* ---- product layout ---- */
.product {
  display: grid; gap: 48px;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  padding: 32px 0 80px;
}
@media (max-width: 900px) { .product { grid-template-columns: 1fr; gap: 24px; } }

.gallery {
  position: relative; background: var(--bg-alt);
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/5; min-height: 460px;
}
.gallery iframe { width: 100%; height: 100%; border: 0; display: block; }

.thumbs { display: flex; gap: 10px; margin-top: 12px; }
.thumb {
  width: 64px; height: 64px; border-radius: 4px; background: var(--bg-alt);
  border: 1px solid var(--line); cursor: pointer; flex: none;
  display: grid; place-items: center; font-size: 11px; color: var(--ink-soft);
}
.thumb.active { outline: 2px solid var(--ink); outline-offset: 2px; }

.info h1 { margin-top: 0; }
.price { font-size: 24px; font-weight: 600; margin: 12px 0 4px; }
.price-note { font-size: 13px; color: var(--ink-soft); }
.swatches { display: flex; gap: 10px; margin: 18px 0; }
.swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  cursor: pointer; box-shadow: inset 0 0 0 2px var(--bg);
}
.swatch.active { outline: 2px solid var(--ink); outline-offset: 2px; }
.options { display: grid; gap: 12px; margin: 16px 0; }
.option-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; background: var(--bg); cursor: pointer;
}
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 22px; border-radius: var(--radius);
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; border: 1px solid transparent; text-decoration: none;
  transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { opacity: .92; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn-block { width: 100%; }

.cta-stack { display: grid; gap: 10px; margin: 22px 0; }

.divider { border-top: 1px solid var(--line); margin: 28px 0; }

.spec-list { display: grid; gap: 10px; font-size: 14px; }
.spec-list dt { color: var(--ink-soft); font-weight: 500; }
.spec-list dd { margin: 0 0 8px; }

/* ---- AR / 3D action panel ---- */
.viz-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; background: var(--bg-alt);
  display: grid; gap: 12px;
}
.viz-panel h3 { font-family: var(--font-body); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px; }
.viz-panel p { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* ---- modal embed (script-based) ---- */
.viz-embed-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 18px; background: var(--ink); color: var(--bg);
  border: 0; border-radius: var(--radius);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.viz-embed-btn:hover { opacity: .9; }
.viz-embed-btn[data-style="ghost"] { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

/* ---- AR redirect button + QR card ---- */
.ar-card {
  display: flex; gap: 18px; align-items: center; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.qr-box {
  width: 96px; height: 96px; flex: none; border-radius: 6px;
  background: #111; padding: 8px;
}
.qr-box img { width: 100%; height: 100%; }

/* ---- catalog tile (used on master index + listing pages) ---- */
.catalog { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tile {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--radius); overflow: hidden;
  transition: transform .2s ease;
}
.tile:hover { transform: translateY(-3px); }
.tile-art {
  aspect-ratio: 4/5; border-radius: 6px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  display: grid; place-items: center; color: rgba(255,255,255,.95);
  font-family: var(--font-display); font-size: 22px;
  text-align: center; padding: 24px; letter-spacing: .02em;
  position: relative; overflow: hidden;
}
.tile-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 50%);
}
.tile-meta { padding: 14px 4px 6px; display: flex; justify-content: space-between; gap: 12px; }
.tile-meta strong { font-weight: 500; font-size: 15px; }
.tile-meta span { color: var(--ink-soft); font-size: 13px; }
.tile-tag {
  display: inline-block; font-size: 11px; padding: 2px 8px; margin-right: 6px;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft);
}

/* ---- footer ---- */
.foot {
  border-top: 1px solid var(--line);
  padding: 36px 0; font-size: 13px; color: var(--ink-soft);
}
.foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- vizbl badge (subtle integration-type indicator for sales) ---- */
.viz-badge {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(20,22,26,.85); color: #fff;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  text-decoration: none;
}
.viz-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6ee7b7;
}
.viz-badge[data-type="iframe"]::before { background: #93c5fd; }
.viz-badge[data-type="embed"]::before { background: #fbbf24; }
.viz-badge[data-type="redirect"]::before { background: #6ee7b7; }

/* ---- demo-only: sales notes panel (hidden unless ?demo=1 in URL) ---- */
.sales-notes { display: none; }
body.demo .sales-notes {
  display: block;
  position: fixed; left: 14px; bottom: 14px; z-index: 50;
  max-width: 360px; padding: 14px 16px;
  background: #14161a; color: #e7e5e4; border-radius: 8px;
  font-size: 12px; line-height: 1.55;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.sales-notes h4 { color: #fff; margin: 0 0 6px; font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.sales-notes code { background: #2a2d33; color: #fde68a; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.sales-notes a { color: #fde68a; }

/* ---- index page (master sales landing) ---- */
.hero {
  padding: 80px var(--pad) 56px; max-width: 1200px; margin: 0 auto;
}
.hero h1 { font-size: clamp(40px, 6vw, 72px); margin-bottom: 16px; }
.hero p { font-size: 18px; max-width: 60ch; color: var(--ink-soft); }
.section { padding: 28px var(--pad) 8px; max-width: 1200px; margin: 0 auto; }
.section h2 { font-size: 22px; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 18px; }

/* ---- integration showcase (per-product page) ---- */
.integration-showcase {
  padding: 56px 0 80px;
  border-top: 1px solid var(--line);
}
.integration-showcase h2 { margin-bottom: 8px; }
.integration-showcase .lead {
  color: var(--ink-soft); margin: 0 0 32px; max-width: 60ch; font-size: 15px;
}
.integration-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ic {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; background: var(--bg);
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.ic-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.ic-head h3 {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  margin: 0; letter-spacing: -0.01em; line-height: 1.3;
}
.ic-tag {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; flex: none;
  background: var(--bg-alt); color: var(--ink-soft); font-weight: 600;
}
.ic-tag.tag-live    { background: #d1fae5; color: #065f46; }
.ic-tag.tag-premium { background: #fef3c7; color: #92400e; }
.ic p { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.ic-demo { padding: 4px 0; }
.ic-demo-iframe {
  aspect-ratio: 1/1; background: var(--bg-alt); border-radius: 6px;
  overflow: hidden;
}
.ic-demo-iframe iframe { width: 100%; height: 100%; border: 0; display: block; }
.ic-demo-iframe--wide { aspect-ratio: 16 / 10; }
.ic-wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ic-wide .ic-demo-iframe--wide { aspect-ratio: 21 / 9; max-height: 520px; }
}

/* ============================================
   Demo-page layout (replaces e-com product mockup).
   Structure: minimal header → product hero strip → integration showcase.
   ============================================ */
.demo-header {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(140%) blur(10px);
}
.demo-header > :first-child  { justify-self: start; }
.demo-header > :nth-child(2) { justify-self: center; }
.demo-header > :last-child   { justify-self: end; }
.demo-header a.back-link {
  text-decoration: none; color: var(--ink-soft);
  font-weight: 500;
}
.demo-header a.back-link:hover { color: var(--ink); }
.demo-header-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--ink);
  letter-spacing: .12em; font-size: 14px;
  text-decoration: none;
}
.demo-header-brand .vizbl-mark {
  width: 132px; height: 40px;
  display: inline-block; flex-shrink: 0;
  background-image: url('https://cdn.prod.website-files.com/67b31fca114d5e1487827a5f/67b32393421717903e5f7052_logo.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.demo-main { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

.demo-hero {
  display: grid; gap: 36px;
  grid-template-columns: minmax(260px, 360px) 1fr;
  padding: 56px 0 36px;
  align-items: center;
}
@media (max-width: 800px) {
  .demo-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 32px; }
}

.demo-hero-photo {
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: var(--bg-alt);
  overflow: hidden;
  position: relative;
}
.demo-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.demo-hero-photo::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 -80px 80px -60px rgba(0,0,0,.18);
  pointer-events: none;
}

.demo-hero-text { min-width: 0; }
.demo-hero-text .eyebrow { margin-bottom: 6px; }
.demo-hero-text h1 {
  font-size: clamp(30px, 4vw, 48px);
  margin: 0 0 14px;
  line-height: 1.1;
}
.demo-hero-text > p.lead-line {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 56ch;
}

.demo-hero-meta {
  display: grid; gap: 8px;
  font-size: 13px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border-radius: 8px;
  max-width: 56ch;
}
.demo-hero-meta-row {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.demo-hero-meta-row b {
  color: var(--ink-soft); font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
  min-width: 96px;
}
.demo-hero-meta code {
  background: var(--bg); padding: 2px 7px; border-radius: 3px;
  font-size: 12px; color: var(--ink);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  border: 1px solid var(--line);
}

.demo-divider {
  border: 0; border-top: 1px solid var(--line);
  margin: 8px 0 0;
}

/* ============================================
   E-com product page with 2-view switcher
   ============================================ */
.ecom-shell { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

.ecom-crumbs {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 24px 0 8px;
}
.ecom-crumbs a { color: var(--ink-soft); text-decoration: none; }
.ecom-crumbs a:hover { color: var(--ink); }
.ecom-crumbs span { margin: 0 10px; opacity: .5; }

/* View switcher */
.view-switch {
  display: inline-flex; gap: 0;
  border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden;
  margin: 16px 0 24px;
}
.view-switch button {
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  border: 0; background: transparent; color: var(--ink-soft);
  cursor: pointer; font-family: inherit;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.view-switch button:hover { color: var(--ink); }
.view-switch button.active {
  background: var(--ink); color: var(--bg);
}
/* Hide the legacy number circle and the long sub-description — keep only the short title */
.view-switch .vs-num,
.view-switch .vs-desc { display: none; }
.view-switch .vs-title {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}

/* View panes */
[data-view-pane] { display: none; }
[data-view-pane].active { display: block; }

/* Two-column product layout */
.ecom-product {
  display: grid; gap: 56px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  padding: 8px 0 32px;
}
@media (max-width: 900px) {
  .ecom-product { grid-template-columns: 1fr; gap: 28px; }
}

/* Gallery: holds either a clean iframe or the all-in-one viewer */
.ecom-gallery {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4 / 5;
  min-height: 520px;
}
.ecom-gallery iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* Gallery wrap holds the gallery + thumbnail strip below */
.ecom-gallery-wrap {
  display: flex; flex-direction: column; gap: 14px;
}

/* Multiple gallery panes (3D iframe vs photo) within view 1 */
.ecom-gallery [data-thumb-pane] { display: none; position: absolute; inset: 0; }
.ecom-gallery [data-thumb-pane].active { display: block; }
.ecom-gallery [data-thumb-pane] iframe,
.ecom-gallery [data-thumb-pane] img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

/* Thumbnail strip under the gallery — visible only in view 1 (separate) */
.ecom-thumbs {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
}
.ecom-thumb {
  flex: 0 0 86px;
  width: 86px; height: 86px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  cursor: pointer; padding: 0;
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ecom-thumb:hover { border-color: var(--ink-soft); }
.ecom-thumb.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.ecom-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ecom-thumb-3d {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--ink); text-transform: uppercase;
  display: grid; place-items: center; gap: 6px;
  width: 100%; height: 100%;
}
.ecom-thumb-3d::before {
  content: "⟳"; font-size: 26px; line-height: 1;
  color: var(--accent); font-weight: 400;
}
.ecom-thumb.skel { cursor: default; pointer-events: none; }
.ecom-thumb.skel:hover { border-color: var(--line); }

/* Sticky badge in corner of gallery — explicit dark text so it stays
   readable on dark-themed product pages where var(--ink) is light */
.ecom-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #14161a;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

/* Info column */
.ecom-info {
  display: flex; flex-direction: column;
  padding-top: 4px;
  /* isolation gives a stacking context without clipping; we DON'T use
     `contain: paint` here because that crops the SVG marker stroke that
     overflows the AR button. */
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ecom-gallery-wrap { isolation: isolate; }
/* In "3D + AR in one modal" mode there's no inline iframe to switch to,
   so the 3D thumb is meaningless — hide it (and any active highlight). */
.ecom-gallery-wrap:has([data-view-pane="combined"].active) .ecom-thumb[data-thumb="3d"] {
  display: none;
}
.ecom-info .eyebrow { margin-bottom: 6px; }
.ecom-info h1 {
  /* Fixed px — clamp(...,vw,...) recalculates when the scrollbar appears or
     disappears, which makes the title look heavier/lighter on first click. */
  font-size: 36px;
  margin: 0 0 8px;
  line-height: 1.1;
}
.ecom-info .ecom-tagline {
  color: var(--ink-soft); font-size: 16px; line-height: 1.5;
  margin: 0 0 24px;
}
.ecom-price {
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 4px;
}
.ecom-price-note {
  font-size: 12px; color: var(--ink-soft);
  letter-spacing: .04em;
  margin: 0 0 24px;
}
.ecom-desc {
  color: var(--ink-soft); font-size: 15px; line-height: 1.55;
  margin: 0 0 24px;
}
/* Highlight that the headline differentiator IS the AR view — this is the
   feature Vizbl is selling, so we set it apart from a regular product card. */
.ecom-ar-spotlight {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px;
  margin: 0 0 16px;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 13px; line-height: 1.4;
}
.ecom-ar-spotlight-eyebrow {
  color: var(--accent);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700;
}
.ecom-ar-spotlight-text { color: var(--ink); }
.ecom-cta-buy {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px;
  margin: 0;
  padding: 0 24px;
  box-sizing: border-box;
  background: #14161a; color: #ffffff;
  border: 0; border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.ecom-cta-buy::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background .15s ease;
  pointer-events: none;
}
.ecom-cta-buy:hover::after { background: rgba(255, 255, 255, .12); }
.ecom-cta-buy:active::after { background: rgba(255, 255, 255, .2); }

.ecom-options { display: grid; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 24px; }
.ecom-option-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; font-size: 13px; }
.ecom-option-row b {
  color: var(--ink-soft); font-weight: 500;
  text-transform: uppercase; font-size: 11px; letter-spacing: .12em;
}
.ecom-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ecom-chip {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  font-size: 12px; color: var(--ink); cursor: pointer;
}
.ecom-chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* CTA stack */
/* Both view-panes hold the same kind of children (AR button + guide link),
   so they render at the same height. Fix a min-height on the stack equal
   to that height — inactive pane is fully display:none, the active one
   slots in, and nothing below it ever shifts when you flip the tab. */
.ecom-cta-stack {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  min-height: 90px;
}
.ecom-cta-stack > [data-view-pane].active {
  display: grid;
  gap: 10px;
  align-content: start;
}
.ecom-cta-primary {
  padding: 16px 20px; border: 0;
  background: var(--brand); color: var(--brand-ink);
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 8px; cursor: pointer;
}
.ecom-cta-primary:hover { opacity: .92; }

/* AR / 3D viewer CTA — the headline feature. Solid accent so it reads as
   the primary action on the card; the regular "Add to cart" sits beneath
   it as the secondary action. Single line, fixed height: the two view-pane
   variants must NOT shift the layout when switched. */
.vz-ar-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  box-sizing: border-box;
  background: var(--accent); color: var(--brand-ink);
  border: 0; border-radius: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; line-height: 1.2; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  /* Tiny periodic bounce. The hand-drawn marker (injected via JS) is the
     attention-grabber now; the old pulsing box-shadow halo conflicted with
     the marker — it bled past the marker and read as "outline is inside
     the button". Removed in favor of a clean button edge. */
  animation: vz-ar-bounce 6s ease-in-out infinite;
  transition: background .12s ease;
}
@keyframes vz-ar-bounce {
  0%, 8%   { transform: translateY(0)   scale(1); }
  3%       { transform: translateY(-4px) scale(1.02); }
  6%       { transform: translateY(0)    scale(1); }
  100%     { transform: translateY(0)   scale(1); }
}
.vz-ar-btn:hover {
  background: color-mix(in srgb, var(--accent) 88%, black);
  animation-play-state: paused;
}
/* Hand-drawn marker — one closed-path SVG, anchored via CSS so it tracks
   the live button geometry. 36px outset on every side: must clear the
   button's pulsing box-shadow glow (10px solid spread + 32px-blur drop
   shadow), otherwise the marker reads as drawn inside the halo. Keep
   this in sync with PAD in ar-marker.js. */
.vz-ar-marker-svg {
  position: absolute;
  top:  -24px;
  left: -24px;
  /* Width/height come from inline style set by ar-marker.js (W+2*PAD).
     Override the global `img,svg { max-width: 100% }` reset or it would
     cap the marker SVG at the button's width and clip off the overshoot
     on the right side. */
  max-width: none;
  pointer-events: none;
  overflow: visible;
  color: var(--ink);
}
.vz-ar-marker-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}
.vz-ar-marker-svg .vz-ar-marker-shadow {
  stroke-width: 1.6;
  opacity: .3;
  transform: translate(1.2px, 1px);
}
/* "👉 tap me!" hint, hand-written, dancing next to the button.
   Hidden on narrow viewports where it would overflow off-screen.
   `left: 100% + 44px` keeps it past the marker's right line (which sits
   at +18px) PLUS its own text-shadow halo — otherwise the halo paints the
   background color over the marker line where letters pass by, leaving
   the right side reading as broken. */
.vz-ar-btn::after {
  content: "tap me";
  position: absolute;
  left: calc(100% + 44px);
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-weight: 700;
  font-size: 32px;
  color: var(--ink);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  pointer-events: none;
  animation: vz-ar-wiggle 1.4s ease-in-out infinite;
  text-shadow: 0 2px 0 color-mix(in srgb, var(--bg) 60%, transparent);
}
@keyframes vz-ar-wiggle {
  0%, 100% { transform: translate(0, -50%)  rotate(-6deg) scale(1); }
  25%      { transform: translate(8px, -52%) rotate(-2deg) scale(1.05); }
  50%      { transform: translate(3px, -50%) rotate(-7deg) scale(1); }
  75%      { transform: translate(6px, -48%) rotate(-3deg) scale(1.03); }
}
/* Comic-style "!!!" — three bangs stagger-pop in next to "tap me" */
.vz-ar-bangs {
  position: absolute;
  /* Sits a hair past the `e` of "tap me". "tap me" now starts at
     100% + 44px (past the marker), and is ~95px wide at 32px font. */
  left: calc(100% + 44px + 100px);
  top: 50%;
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-weight: 700;
  font-size: 32px;
  color: var(--accent);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%) rotate(-4deg);
  text-shadow: 0 2px 0 color-mix(in srgb, var(--bg) 60%, transparent);
}
.vz-ar-bangs span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px) scale(.5);
  animation: vz-ar-bang 1.8s ease-in-out infinite;
}
.vz-ar-bangs span:nth-child(1) { animation-delay: 0s; }
.vz-ar-bangs span:nth-child(2) { animation-delay: .14s; }
.vz-ar-bangs span:nth-child(3) { animation-delay: .28s; color: color-mix(in srgb, var(--accent) 70%, red); }
@keyframes vz-ar-bang {
  0%   { opacity: 0; transform: translateY(8px)  scale(.5) rotate(-15deg); }
  18%  { opacity: 1; transform: translateY(-4px) scale(1.3) rotate(8deg); }
  35%  { opacity: 1; transform: translateY(0)    scale(1) rotate(-4deg); }
  70%  { opacity: 1; transform: translateY(-2px) scale(1) rotate(0deg); }
  85%  { opacity: 0; transform: translateY(-6px) scale(.9) rotate(6deg); }
  100% { opacity: 0; transform: translateY(8px)  scale(.5) rotate(-15deg); }
}
@media (max-width: 1500px) {
  .vz-ar-bangs { display: none; }
}
@media (max-width: 1500px) {
  .vz-ar-btn::after { display: none; }
}
/* Hand-drawn rectangle marker — overshoots the button by 24px on each
   side, which collides with mobile's `overflow-x: hidden` and renders as
   stray clipped strokes drifting next to the CTA. Hide on narrow
   viewports together with the rest of the desktop-only marker chrome. */
@media (max-width: 1100px) {
  .vz-ar-marker-svg { display: none; }
}
/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .vz-ar-btn,
  .vz-ar-btn::before,
  .vz-ar-btn::after { animation: none; }
}
/* Vizbl's app_button injects a hidden <img> — keep it from affecting layout */
.vz-ar-btn > img { width: 0; height: 0; flex: 0 0 0; }

/* Variant swatches — link to sibling products of the same brand */
.variant-row {
  margin: 0 0 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.variant-row-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.variant-swatches {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.variant-swatch {
  display: block; width: 44px; height: 44px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid transparent;
  background: var(--bg-alt) center/cover no-repeat;
  cursor: pointer; transition: border-color .12s ease, transform .12s ease;
  position: relative;
}
.variant-swatch:hover { transform: scale(1.05); }
.variant-swatch.active { border-color: var(--ink); }
.variant-swatch span {
  position: absolute; inset: auto 0 -22px 0; text-align: center;
  font-size: 10px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Site-wide marketing footer (auto-injected by site-footer.js).
   Inherits the page's theme via --bg, --ink, --ink-soft, --line so it sits
   flush with both light product pages and dark industry pages. */
.vz-foot {
  background: var(--bg);
  color: var(--ink-soft);
  margin-top: 0;
  padding: 0;
}
.vz-foot-inner {
  /* Mirror .ecom-shell / .industry-grid — content sits in the same
     max-width container so the footer's left edge lines up with the
     breadcrumbs, gallery and product info above. The border lives on the
     inner so it starts/ends where the content does, not at viewport edges. */
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px var(--pad) 40px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 24px;
  box-sizing: border-box;
}
.vz-foot-tagline {
  margin: 0; max-width: 480px;
  color: var(--ink-soft); font-size: 14px; line-height: 1.55;
}
.vz-foot-stores {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.vz-foot-stores a {
  display: inline-block; line-height: 0;
  transition: opacity .15s ease;
}
.vz-foot-stores a:hover { opacity: .8; }
.vz-foot-stores img {
  height: 44px; width: auto; display: block;
}
.vz-foot-social {
  display: flex; gap: 14px; align-items: center;
}
.vz-foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--ink);
  border-radius: 50%;
  transition: color .12s ease, background .12s ease;
}
.vz-foot-social a:hover { color: var(--accent); }
.vz-foot-social svg { width: 18px; height: 18px; display: block; }
.vz-foot-legal {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.vz-foot-legal a {
  color: var(--ink-soft); font-size: 13px; text-decoration: none;
  transition: color .12s ease;
}
.vz-foot-legal a:hover { color: var(--ink); }
.vz-foot-copy {
  margin: 0;
  color: var(--ink-soft); opacity: .7;
  font-size: 12px; line-height: 1.55;
  max-width: 720px;
}

/* "View integration code" trigger — minimal inline text link under the CTA */
.guide-trigger {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 0;
  background: transparent; border: 0;
  color: var(--ink-soft);
  font-family: inherit; font-size: 12px; letter-spacing: .04em;
  cursor: pointer;
  transition: color .12s ease;
}
.guide-trigger:hover { color: var(--ink); text-decoration: underline; }
.guide-trigger::before {
  content: "</>"; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; opacity: .8;
}

/* Integration guide modal */
.integration-guide {
  position: fixed; inset: 0; z-index: 9000;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.integration-guide.open { opacity: 1; pointer-events: auto; }
.integration-guide .g-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 22, 26, 0.55);
  backdrop-filter: blur(2px);
}
.integration-guide .g-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(640px, 100vw);
  background: #fbfaf7;
  box-shadow: -20px 0 60px rgba(0,0,0,.18);
  overflow-y: auto;
  transform: translateX(20px); transition: transform .22s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}
.integration-guide.open .g-panel { transform: translateX(0); }
.integration-guide .g-close {
  position: sticky; top: 16px; align-self: flex-end;
  margin: 16px 16px -32px auto;
  width: 32px; height: 32px;
  background: rgba(20,22,26,.06); color: #14161a;
  border: 0; border-radius: 50%;
  font-size: 22px; line-height: 28px; cursor: pointer;
  z-index: 2;
  transition: background .12s ease;
}
.integration-guide .g-close:hover { background: rgba(20,22,26,.12); }
.integration-guide .g-head {
  padding: 48px 56px 16px;
}
.integration-guide .g-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #c7693d; font-weight: 700; margin-bottom: 12px;
}
.integration-guide .g-head h2 {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 36px; font-weight: 500; line-height: 1.1;
  margin: 0 0 12px; color: #14161a;
  letter-spacing: -0.01em;
}
.integration-guide .g-summary {
  margin: 0; color: #5b6068; font-size: 15px; line-height: 1.55;
}
.integration-guide .g-steps {
  list-style: none; margin: 0; padding: 24px 56px;
  display: flex; flex-direction: column; gap: 32px;
}
.integration-guide .g-step {
  display: grid; grid-template-columns: 36px 1fr; gap: 18px;
  align-items: start;
}
.integration-guide .g-step-num {
  width: 32px; height: 32px;
  background: #14161a; color: #fbfaf7;
  border-radius: 50%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.integration-guide .g-step-body h3 {
  margin: 0 0 6px; font-size: 16px; font-weight: 600;
  color: #14161a; letter-spacing: -0.005em;
}
.integration-guide .g-step-body p {
  margin: 0 0 12px; color: #5b6068; font-size: 13.5px; line-height: 1.55;
}
.integration-guide .g-step-body p code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; padding: 1px 6px;
  background: rgba(199,105,61,.12); color: #14161a; border-radius: 3px;
}
.integration-guide .g-codeblock {
  position: relative;
  background: #14161a; color: #e6e3dc;
  border-radius: 8px; overflow: hidden;
}
.integration-guide .g-codeblock pre {
  margin: 0; padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
}
.integration-guide .g-copy {
  position: absolute; top: 8px; right: 8px;
  padding: 5px 10px;
  background: rgba(255,255,255,.08); color: #e6e3dc;
  border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: background .12s ease;
}
.integration-guide .g-copy:hover { background: rgba(255,255,255,.16); }
.integration-guide .g-tag  { color: #ff8094; }
.integration-guide .g-attr { color: #ffd479; }
.integration-guide .g-str  { color: #90cf8e; }
.integration-guide .g-fn   { color: #79c4ff; }
.integration-guide .g-foot {
  margin-top: auto; padding: 18px 56px 32px;
  border-top: 1px solid #e6e3dc;
  font-size: 12px; color: #5b6068;
}
@media (max-width: 700px) {
  .integration-guide .g-head, .integration-guide .g-steps, .integration-guide .g-foot { padding-left: 24px; padding-right: 24px; }
}
.code-snippet .ck { color: #ff8094; }
.code-snippet .ca { color: #ffd479; }
.code-snippet .cs { color: #90cf8e; }
.code-snippet .cc { color: #6e7681; }

.ecom-hint {
  padding: 14px 16px;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 13px; color: var(--ink-soft);
  line-height: 1.5;
}
.ecom-hint b { color: var(--ink); font-weight: 500; }

/* Specs */
.ecom-specs {
  margin-top: 28px;
  display: grid; gap: 10px;
  font-size: 13px;
}
.ecom-specs dt {
  color: var(--ink-soft); font-weight: 500;
  text-transform: uppercase; font-size: 11px; letter-spacing: .12em;
}
.ecom-specs dd { margin: 0 0 8px; }

/* Catalog link inside .ecom-info, sitting under the CTA stack */
.ecom-foot-link {
  display: inline-block; align-self: flex-start;
  margin-top: 16px;
  font-size: 12px; color: var(--ink-soft);
  text-decoration: none; letter-spacing: .04em;
}
.ecom-foot-link:hover { color: var(--ink); text-decoration: underline; }

/* ============================================
   Skeleton placeholders — flat, static, NO animation.
   Just plain large grey blocks so nothing pretends to be loading.
   ============================================ */
.skel {
  display: block;
  background: var(--bg-alt);
  border-radius: 6px;
}
.skel-block {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  margin: 0 0 14px;
}
.skel-block.tall   { height: 90px; }
.skel-block.medium { height: 56px; }
.skel-block.short  { height: 36px; }

/* Old showcase recommendations stay for backward compat */
.ic.ic-recommended { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.ic-pick {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  white-space: nowrap;
}

.demo-secondary-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--ink-soft);
  text-decoration: none; margin-top: 14px;
}
.demo-secondary-link:hover { color: var(--ink); text-decoration: underline; }

/* ============================================
   Tab-based integration switcher
   ============================================ */
.vz-showcase-head { padding: 56px 0 24px; max-width: 720px; }
.vz-showcase-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.vz-showcase-head .lead {
  color: var(--ink-soft); font-size: 17px; line-height: 1.5;
  margin: 0;
}

.vz-tabs {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 0; margin: 0 0 32px;
  list-style: none;
}
@media (min-width: 1100px) {
  .vz-tabs { grid-template-columns: repeat(4, 1fr); }
}

.vz-tab {
  text-align: left; padding: 14px 18px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 8px;
  cursor: pointer;
  display: grid; gap: 2px;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.vz-tab:hover {
  border-color: color-mix(in srgb, var(--ink) 30%, var(--line));
  background: var(--bg-alt);
}
.vz-tab.active {
  border-color: var(--ink);
  background: var(--ink); color: var(--bg);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.vz-tab.active .vz-tab-num { color: var(--bg); opacity: .6; }
.vz-tab.active .vz-tab-desc { color: var(--bg); opacity: .65; }

.vz-tab-num {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.vz-tab-label {
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em;
}
.vz-tab-desc {
  font-size: 12px; color: var(--ink-soft);
}

/* Panels */
.vz-panel {
  display: none;
  padding: 4px 0 24px;
  animation: vz-fade .25s ease-out;
}
.vz-panel.active { display: block; }
@keyframes vz-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.vz-split {
  display: grid; gap: 24px;
  grid-template-columns: 1.4fr 1fr;
  align-items: stretch;
}
@media (max-width: 900px) {
  .vz-split { grid-template-columns: 1fr; }
}

.vz-split-left {
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-alt);
  min-height: 460px;
  aspect-ratio: 4 / 3;
}
.vz-split-left iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

.vz-split-right {
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px;
  background: var(--bg-alt);
  border-radius: 10px;
  min-height: 460px;
}
.vz-split-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 12px;
}
.vz-split-right h3,
.vz-singlecol h3,
.vz-panel-head h3 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.vz-split-right p,
.vz-singlecol p,
.vz-panel-head p {
  color: var(--ink-soft); font-size: 15px; line-height: 1.55;
  margin: 0 0 24px; max-width: 50ch;
}

.vz-cta {
  align-self: flex-start;
  padding: 16px 26px;
  font-size: 14px;
}

.vz-meta {
  margin: 24px 0 0; padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px; line-height: 1.7;
}
.vz-meta b {
  display: inline-block; min-width: 110px;
  color: var(--ink-soft); font-weight: 500;
  text-transform: uppercase; font-size: 11px; letter-spacing: .1em;
}

/* All-in-one panel: full-bleed iframe */
.vz-panel-head { max-width: 720px; padding: 0 0 24px; }
.vz-fullframe {
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 16 / 10;
  max-height: 720px;
}
.vz-fullframe iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* Single-column panel for button-only integrations */
.vz-singlecol {
  padding: 56px 32px;
  background: var(--bg-alt);
  border-radius: 10px;
  display: grid; gap: 0;
  max-width: 720px;
}

/* Install code accordion */
.vz-code { margin-top: 24px; max-width: 900px; }
.vz-code summary {
  cursor: pointer; padding: 12px 0;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
  list-style: none;
  border-top: 1px solid var(--line);
}
.vz-code summary::-webkit-details-marker { display: none; }
.vz-code summary::before { content: "▸ "; transition: transform .15s ease; display: inline-block; }
.vz-code[open] summary::before { content: "▾ "; }
.vz-code pre {
  margin: 8px 0 0;
  background: #14161a; color: #e7e5e4;
  padding: 18px; border-radius: 6px;
  font-size: 12px; line-height: 1.55;
  overflow: auto; max-height: 320px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================
   Industry chooser (master index)
   ============================================ */
.industry-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: 24px var(--pad) 32px;
  max-width: var(--container); margin: 0 auto;
}
.industry-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 360px;
}
.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(20,22,26,.10);
}
.industry-card-hero {
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  position: relative;
}
.industry-card-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(20,22,26,.45));
}
.industry-card-num {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; letter-spacing: .14em;
  background: rgba(255,255,255,.92); color: var(--ink);
  padding: 4px 10px; border-radius: 999px;
  font-weight: 700;
}
.industry-card-body {
  padding: 22px 22px 24px;
  display: grid; gap: 8px;
}
.industry-card-body h3 {
  margin: 0; font-family: var(--font-display);
  font-size: 24px; font-weight: 500; letter-spacing: -0.01em;
}
.industry-card-body p {
  margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5;
}
.industry-card-body .count {
  margin-top: 6px; font-size: 12px; color: var(--ink-soft);
  letter-spacing: .12em; text-transform: uppercase;
}
.ic-demo .btn { width: 100%; }
.ic-demo .vizbl_3d_view {
  width: 100%; padding: 14px 18px;
  background: var(--ink); color: var(--bg);
  border: 0; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.ic-code { font-size: 12px; margin-top: auto; }
.ic-code summary {
  cursor: pointer; color: var(--ink-soft);
  padding: 10px 0 6px; border-top: 1px solid var(--line); margin-top: 4px;
  list-style: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.ic-code summary::-webkit-details-marker { display: none; }
.ic-code summary::before { content: "▸ "; transition: transform .15s ease; display: inline-block; }
.ic-code[open] summary::before { content: "▾ "; }
.ic-code pre {
  background: #14161a; color: #e7e5e4;
  padding: 12px; border-radius: 6px; font-size: 11px;
  overflow: auto; line-height: 1.55; max-height: 220px;
  margin: 6px 0 0;
}
.ic-note {
  font-size: 11px; color: var(--ink-soft); font-style: italic;
  border-top: 1px dashed var(--line); padding-top: 10px; margin-top: auto;
}

/* ---- skeleton state for integration cards (preview-only) ---- */
.ic.skel {
  background: repeating-linear-gradient(135deg, var(--bg) 0 12px, var(--bg-alt) 12px 13px);
  border-style: dashed;
}
.ic.skel .ic-head h3 { color: var(--ink-soft); }
.skel-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg-alt) 0%, var(--bg) 50%, var(--bg-alt) 100%);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
  color: var(--ink-soft); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px dashed var(--line);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- product gallery (image hero) ---- */
.gallery-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.gallery-toggle {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; gap: 2px; padding: 4px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.08);
  font-size: 12px;
}
.gallery-toggle button {
  border: 0; background: transparent;
  padding: 7px 14px; border-radius: 999px;
  color: var(--ink); font-weight: 600; letter-spacing: .04em;
  font-size: 11px; text-transform: uppercase;
}
.gallery-toggle button.active { background: var(--ink); color: #fff; }
.gallery-pane { position: absolute; inset: 0; display: none; }
.gallery-pane.active { display: block; }

/* ---- master index tile uses real product cover photo ---- */
.tile-photo {
  aspect-ratio: 4/5; border-radius: 6px;
  background: var(--bg-alt);
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.tile-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20,22,26,.55));
}
.tile-photo .tile-label {
  position: absolute; left: 16px; right: 16px; bottom: 12px;
  color: #fff; font-family: var(--font-display); font-size: 18px;
  z-index: 2;
}
.tile-photo .tile-num {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-size: 11px; letter-spacing: .14em; padding: 4px 9px;
  background: rgba(255,255,255,.92); color: var(--ink); font-weight: 600;
  border-radius: 999px;
}

/* ---- thumbnail color palettes for tile-art (used in master index, fallback) ---- */
.tile-art.t-sofa     { background: linear-gradient(135deg, #2b2a28, #6b5544); }
.tile-art.t-modular  { background: linear-gradient(135deg, #d35a2c, #f0b67f); }
.tile-art.t-armchair { background: linear-gradient(135deg, #6f7e5c, #cdd1b4); }
.tile-art.t-bed      { background: linear-gradient(135deg, #6a5d8a, #d6c4e0); }
.tile-art.t-coffee   { background: linear-gradient(135deg, #1a1a1a, #c2a661); }
.tile-art.t-storage  { background: linear-gradient(135deg, #3b3a39, #b59a6c); }
.tile-art.t-chaise   { background: linear-gradient(135deg, #8d4a39, #d8b9a0); }
.tile-art.t-bar      { background: linear-gradient(135deg, #2a1f15, #b88a4a); }
.tile-art.t-dining   { background: linear-gradient(135deg, #b9893a, #f1d99b); }
.tile-art.t-living   { background: linear-gradient(135deg, #6a5b48, #d5c2a1); }
.tile-art.t-fire     { background: linear-gradient(135deg, #1d1b1a, #c95b2c); }
.tile-art.t-floorlmp { background: linear-gradient(135deg, #1c1c1c, #f4f3ee); color: #14161a; }
.tile-art.t-light    { background: linear-gradient(135deg, #ffffff, #f3d36b); color: #14161a; }
.tile-art.t-art      { background: linear-gradient(135deg, #f5f5f3, #d33b8c); color: #14161a; }
.tile-art.t-tile     { background: linear-gradient(135deg, #4f5152, #b3b6b8); }
.tile-art.t-gym      { background: linear-gradient(135deg, #2c2a26, #b08a5a); }
.tile-art.t-recover  { background: linear-gradient(135deg, #5e7a6b, #c8d6c5); }
.tile-art.t-kids     { background: linear-gradient(135deg, #f5d44b, #4eaaff); color: #14161a; }
.tile-art.t-pool     { background: linear-gradient(135deg, #1d6fa5, #81d2e8); }
.tile-art.t-spa      { background: linear-gradient(135deg, #0f3a45, #2cb1c4); }

/* ============================================
   Mobile layout — product page (.ecom-shell).
   The marker SVG around the AR button overshoots its container by 24px on
   each side, so we clamp horizontal overflow at the page level. Stacking,
   smaller type and a shorter gallery make the page feel native on phones
   instead of a desktop crammed into a 390px viewport.
   ============================================ */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }

  /* Header: keep the logo readable, drop the "For <brand>" tag which just
     duplicates info already on the page below. */
  .demo-header {
    padding: 12px var(--pad);
    /* Single centred column on mobile — only the Vizbl logo is shown,
       the back-link and industry tag are removed from layout so the
       logo lands exactly at viewport centre. */
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    font-size: 11px;
  }
  .demo-header-brand .vizbl-mark { width: 96px; height: 28px; }
  .demo-header > :first-child,
  .demo-header > :last-child { display: none; }

  /* Breadcrumb */
  .ecom-crumbs { padding: 14px 0 4px; font-size: 11px; }
  .ecom-crumbs span { margin: 0 6px; }

  /* View switcher: full-width pill, two equal-width buttons, line breaks
     are explicit (vs. random wrap inside narrow buttons). */
  .view-switch {
    display: flex; width: 100%;
    margin: 12px 0 18px;
  }
  .view-switch button {
    flex: 1; justify-content: center;
    padding: 10px 10px;
    font-size: 11px; letter-spacing: .06em;
    text-align: center;
    line-height: 1.25;
  }
  .view-switch .vs-title { display: inline; }

  /* Product grid already collapses to 1fr at 900px; tighten the gap here. */
  .ecom-product { gap: 20px; padding: 4px 0 24px; }

  /* Gallery: keep the 4/5 aspect but kill the desktop min-height so it
     doesn't dominate the screen. */
  .ecom-gallery {
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
  }
  .ecom-badge {
    top: 10px; left: 10px;
    padding: 4px 9px; font-size: 10px;
  }

  /* Thumb strip: tighter, smaller cells */
  .ecom-thumbs { gap: 8px; padding: 2px 2px 4px; }
  .ecom-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; }
  /* Hide the 3D thumb on mobile — the embedded vizbl viewer's camera
     angle puts the model at the bottom of the gallery pane on narrow
     screens. Users see a clean product photo instead. */
  .ecom-thumb[data-thumb="3d"] { display: none; }

  /* Product info: tighter type, smaller swatches */
  .ecom-info { padding-top: 0; }
  .ecom-info h1 { font-size: 28px; line-height: 1.15; }
  .ecom-info .ecom-tagline { font-size: 15px; margin-bottom: 18px; }
  .ecom-price { font-size: 24px; }
  .ecom-price-note { margin-bottom: 18px; }
  .ecom-desc { font-size: 14px; margin-bottom: 18px; }

  .variant-row { gap: 10px; margin-bottom: 18px; }
  .variant-swatch { width: 36px; height: 36px; }

  .ecom-ar-spotlight {
    padding: 10px 12px; font-size: 12px; gap: 6px;
  }

  /* CTA stack: drop the desktop-tuned min-height that reserves room for
     the marker bangs/"tap me" hint (both hidden below 1100px anyway).
     We pin explicit `height` (not just min-height) on the buttons because
     some iOS Safari builds were inheriting parent flex stretch and
     blowing the buttons up to fill the rest of the viewport. */
  .ecom-cta-stack { min-height: 0; margin-bottom: 10px; }
  .ecom-cta-stack .vz-ar-btn,
  .ecom-cta-stack > * { flex: 0 0 auto; }
  .vz-ar-btn {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    font-size: 13px;
    letter-spacing: .06em;
    flex: 0 0 auto;
  }
  .ecom-cta-buy {
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    font-size: 13px;
    flex: 0 0 auto;
  }
  .ecom-info > * { flex: 0 0 auto; }

  .ecom-options { gap: 10px; padding: 14px 0; margin-bottom: 18px; }
  .ecom-option-row { grid-template-columns: 80px 1fr; font-size: 12px; }
}

/* ============================================
   Nano-Banana try-on modal — centered dialog, 3-tile layout
   Layout inside the card:
     ┌─────┬───────────┐
     │prod │           │
     ├─────┤  result   │   (result spans both rows)
     │user │           │
     └─────┴───────────┘
        [Generate]  [Download]
   ============================================ */
.nb-modal {
  position: fixed; inset: 0; z-index: 9000;
  /* Viewport-locked box. `inset: 0` alone isn't enough with flex
     centering — Chrome grew the container under intrinsic content
     height. Pinning w/h fixes desktop. For iOS we also use `dvh`
     (dynamic viewport height) so the modal tracks the visible area
     when the Safari address bar collapses, instead of bleeding past. */
  /* vh first as fallback, dvh second so modern browsers override. */
  width: 100vw; height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.nb-modal.open { opacity: 1; pointer-events: auto; }
.nb-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 22, 26, 0.55);
  backdrop-filter: blur(2px);
}
.nb-modal-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px); /* modern browsers override */
  background: var(--bg, #fbfaf7);
  color: var(--ink, #14161a);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
  overflow-y: auto;
  transform: translateY(8px) scale(.985);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  padding: 28px 32px 28px;
}
.nb-modal.open .nb-modal-panel { transform: translateY(0) scale(1); }
.nb-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: rgba(20,22,26,.06); color: #14161a;
  border: 0; border-radius: 50%;
  font-size: 22px; line-height: 28px; cursor: pointer;
  z-index: 5;
  transition: background .12s ease;
}
.nb-modal-close:hover { background: rgba(20,22,26,.12); }

.nb-tryon-head { padding: 0 36px 18px 0; }
.nb-modal-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent, #c7693d); font-weight: 700; margin-bottom: 8px;
}
.nb-tryon-head h2 {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 28px; font-weight: 500; line-height: 1.1;
  margin: 0; letter-spacing: -0.01em;
}

/* The 3-tile grid. Thumb size is set via grid-template-rows so the
   result column auto-stretches to match (height = 2*thumb + gap). */
.nb-tryon-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  /* Two stacked thumb rows; result column spans both rows so the
     generated preview gets ~460px of vertical room — enough for a
     portrait try-on to read without cropping. */
  grid-template-rows: 220px 220px;
  gap: 14px;
  margin: 0;
}
.nb-tile-product { grid-area: 1 / 1; }
.nb-tile-user    { grid-area: 2 / 1; }
.nb-tile-result  { grid-area: 1 / 2 / 3 / 3; }
/* Result tile is locked to the 2-row grid track (= 220 + 14 + 220 = 454px
   tall). The image inside is `object-fit: contain` so it's scaled DOWN
   to fit fully — never enlarged past the box, never overflowing the
   panel. Any leftover space lands as a slim letterbox on whichever
   axis doesn't match the image's natural ratio. */

.nb-tile {
  position: relative;
  background: var(--bg-alt, #efebe2);
  border: 1px solid var(--line, #e6e3dc);
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  display: grid; place-items: center;
}
.nb-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Result image: cap the <img> at the tile's box via max-width/max-height
   instead of stretching it to 100%×100% + object-fit. The grid-tile's
   `place-items: center` then centres the naturally-sized img with a
   letterbox around it. !important defeats the generic `.nb-tile img`
   stretching rule defined earlier in this file. */
.nb-tile-result img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: var(--bg-alt);
}
.nb-tile-user {
  cursor: pointer; border-style: dashed;
  transition: border-color .15s ease, background .15s ease;
  font: inherit; color: inherit;
}
.nb-tile-user:hover {
  border-color: var(--ink-soft, #5b6068);
  background: color-mix(in srgb, var(--bg-alt) 70%, var(--bg));
}
.nb-tile-empty {
  display: grid; gap: 8px; place-items: center;
  padding: 12px; text-align: center;
}
.nb-tile-plus {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-soft); font-size: 22px; font-weight: 300;
  background: var(--bg);
}
.nb-tile-tag {
  position: absolute; top: 8px; left: 10px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(255,255,255,.92);
  padding: 3px 8px; border-radius: 999px;
  font-weight: 600;
}
.nb-tile-tag-soft {
  font-size: 12px; color: var(--ink-soft);
  letter-spacing: .04em;
}
.nb-tile-placeholder {
  color: var(--ink-soft); font-size: 13px;
  text-align: center; padding: 16px;
}
.nb-tile-loading {
  display: grid; place-items: center; gap: 12px;
}
.nb-spinner {
  width: 42px; height: 42px;
  border: 3px solid var(--line);
  border-top-color: var(--accent, #c7693d);
  border-radius: 50%;
  animation: nb-spin .9s linear infinite;
}
.nb-spinner-text {
  font-size: 12px; color: var(--ink-soft);
  letter-spacing: .04em;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }

.nb-file-hidden {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* All feedback lives inside the right result tile. `.nb-tile-state` paints
   plain text (idle prompt / error message); `.nb-tile-loading` paints the
   spinner + status sentence while the worker runs. */
.nb-tile-state {
  font-size: 14px; line-height: 1.45;
  color: var(--ink-soft); text-align: center;
  padding: 20px;
  max-width: 32ch;
}
.nb-tile-state-err {
  color: #b91c1c;
  font-size: 13px;
  white-space: pre-wrap; word-break: break-word;
}

/* Spinner status text wraps as needed and stays readable. */
.nb-tile-loading .nb-spinner-text {
  max-width: 30ch; text-align: center;
}

/* Sweep (mock object-swap) demo. The source PNGs have already been
   physically cropped to remove the Gemini watermark — no clip-path needed,
   we just fade the swap result in. */
.nb-sweep-tile .nb-sweep-img {
  animation: nb-sweep-fade .35s ease-out both;
}
@keyframes nb-sweep-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* "New look" tag on the predicted image — same anchor as the Product /
   Your room tags but painted in the brand ink so the AI result is the
   one that catches the eye. */
.nb-tile-tag-new {
  background: var(--brand, #14161a) !important;
  color: var(--brand-ink, #ffffff) !important;
  letter-spacing: .14em;
  z-index: 3;
}

/* Download icon — circle button anchored to the result tile's bottom-right.
   Only added to the DOM after a successful generation, so it never shows
   pre-result. */
.nb-result-download {
  position: absolute; right: 12px; bottom: 12px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.95);
  color: #14161a;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform .12s ease, background .12s ease;
  z-index: 2;
}
.nb-result-download:hover {
  background: #ffffff;
  transform: translateY(-1px);
}
.nb-result-download:active { transform: translateY(0); }
.nb-result-download svg { display: block; }

@media (max-width: 640px) {
  .nb-modal { padding: 12px; }
  .nb-modal-panel { padding: 22px 18px; border-radius: 12px; max-height: calc(100vh - 24px); }
  .nb-tryon-head { padding: 0 36px 14px 0; }
  .nb-tryon-head h2 { font-size: 22px; }
  .nb-tryon-grid {
    grid-template-columns: 110px 1fr;
    grid-template-rows: 110px 110px;
    gap: 8px;
  }
  .nb-tile-plus { width: 30px; height: 30px; font-size: 18px; }
  .nb-tile-tag-soft { font-size: 11px; }
  .nb-tile-state { font-size: 12px; padding: 12px; }
  .nb-result-download {
    width: 34px; height: 34px; right: 8px; bottom: 8px;
  }
}




/* Clear the fixed Vizbl site navbar (added with site header/footer) */
body:has(.navbar.w-nav){padding-top:96px}

/* Full-screen Vizbl viewers/modals must sit ABOVE the fixed site navbar
   (z-index 999999999) — otherwise the navbar overlays the modal's top and its
   close (✕) is unclickable. #vizbl_viewer = the "3D + AR in one modal" viewer;
   .nb-modal = the AI try-on modal. */
#vizbl_viewer,
.nb-modal { z-index: 2147483647 !important; }

/* "Bring this to your store" demo CTA — injected before the marketing footer
   on every product (object card) and category (internal section) page. Dark
   card on the light page. The eyebrow names the Vizbl solution that powers
   that card, and "Explore" links to that solution's page. */
.vz-demo-cta {
  padding: 56px 24px 72px;
  display: flex; justify-content: center;
}
.vz-demo-cta-card {
  width: 100%; max-width: 1180px;
  background: #14161a;
  border-radius: 16px;
  padding: 48px 56px;
  color: #fff;
  display: flex; align-items: center; gap: 48px;
}
.vz-demo-cta-body { flex: 1 1 auto; min-width: 0; }
.vz-demo-cta-eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent, #c7693d); font-weight: 700; margin: 0 0 14px;
}
.vz-demo-cta-title {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 40px; font-weight: 500; line-height: 1.05;
  letter-spacing: -0.01em; margin: 0 0 14px; color: #fff;
}
.vz-demo-cta-sub {
  font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.62);
  max-width: 52ch; margin: 0;
}
.vz-demo-cta-actions {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px;
  width: 280px; max-width: 42%;
}
.vz-demo-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  padding: 16px 28px; border-radius: 10px;
  text-decoration: none; border: 1px solid transparent;
  transition: background .14s ease, transform .14s ease, border-color .14s ease;
}
.vz-demo-cta-btn-primary { background: var(--accent, #c7693d); color: #fff; }
.vz-demo-cta-btn-primary:hover {
  background: color-mix(in srgb, var(--accent, #c7693d) 88%, black);
  transform: translateY(-1px);
}
.vz-demo-cta-btn-ghost {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,.22);
}
.vz-demo-cta-btn-ghost:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.42);
  transform: translateY(-1px);
}
.vz-demo-cta-btn:active { transform: translateY(0); }
@media (max-width: 760px) {
  .vz-demo-cta { padding: 36px 16px 48px; }
  .vz-demo-cta-card {
    flex-direction: column; align-items: stretch; gap: 26px;
    padding: 36px 26px; border-radius: 14px;
  }
  .vz-demo-cta-title { font-size: 30px; }
  .vz-demo-cta-sub { font-size: 15px; }
  .vz-demo-cta-actions { width: auto; max-width: none; }
}