/* =========================================================================
   BijouVision v2 — Landing page styles (marketing home)
   JDMIS brand: cream, sunset-orange, charcoal, Roboto Slab + Mulish.
   ========================================================================= */

.bv-landing { background: var(--bv-cream); }

/* ---- Sticky header ---- */
.bv-header {
  position: sticky; top: 0; z-index: var(--bv-z-header);
  /* Use the theme surface colour (with alpha for the blur) so the header is
     dark in dark mode, not a hardcoded light cream. */
  background: color-mix(in srgb, var(--bv-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bv-line);
}
.bv-header-inner {
  max-width: var(--bv-maxw); margin: 0 auto;
  display: flex; align-items: center; gap: var(--bv-sp-5);
  padding: var(--bv-sp-3) var(--bv-sp-5);
}
.bv-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bv-brand img { width: 34px; height: 34px; }
.bv-brand-name { font-family: var(--bv-font-display); font-weight: 700; font-size: 1.25rem; color: var(--bv-charcoal); }
.bv-header nav { display: flex; gap: var(--bv-sp-5); margin-left: auto; align-items: center; }
.bv-header nav a { color: var(--bv-ink-soft); text-decoration: none; font-weight: 600; font-size: var(--bv-fs-sm); transition: color var(--bv-fast); }
.bv-header nav a:hover { color: var(--bv-gold-deep); }
.bv-header-cta { display: flex; gap: var(--bv-sp-2); align-items: center; }

/* ---- Theme toggle ---- */
.bv-theme-toggle {
  background: var(--bv-surface-3); border: 1px solid var(--bv-line); border-radius: var(--bv-radius-pill);
  width: 38px; height: 38px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1; transition: background var(--bv-fast), border-color var(--bv-fast);
}
.bv-theme-toggle:hover { background: var(--bv-gold-soft); border-color: var(--bv-gold); }
.bv-theme-toggle .bv-theme-icon-light,
.bv-theme-toggle .bv-theme-icon-dark { display: none; }
/* show the icon for the theme you'd switch TO, so it reads as an action */
html[data-theme="light"] .bv-theme-toggle .bv-theme-icon-dark { display: inline; }
html[data-theme="dark"]  .bv-theme-toggle .bv-theme-icon-light { display: inline; }

/* ---- Buttons ---- */
.bv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--bv-font-body); font-weight: 700; font-size: var(--bv-fs-sm);
  border: none; border-radius: var(--bv-radius-sm); cursor: pointer;
  padding: 11px 20px; text-decoration: none; line-height: 1;
  transition: transform var(--bv-fast) var(--bv-ease), background var(--bv-fast), box-shadow var(--bv-med);
}
.bv-btn-primary { background: var(--bv-gold); color: #fff; box-shadow: 0 4px 12px rgba(227,138,46,.3); }
.bv-btn-primary:hover { background: var(--bv-gold-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(227,138,46,.4); }
.bv-btn-outline { background: transparent; color: var(--bv-gold-deep); border: 2px solid var(--bv-gold); }
.bv-btn-outline:hover { background: var(--bv-gold); color: #fff; }
.bv-btn-ghost { background: var(--bv-surface-3); color: var(--bv-ink); }
.bv-btn-ghost:hover { background: var(--bv-gold-soft); }
.bv-btn-lg { padding: 14px 28px; font-size: var(--bv-fs-base); }

/* ---- Hero ---- */
.bv-hero { max-width: var(--bv-maxw); margin: 0 auto; padding: var(--bv-sp-8) var(--bv-sp-5) var(--bv-sp-7); display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--bv-sp-7); align-items: center; }
.bv-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--bv-fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bv-gold-deep); margin-bottom: var(--bv-sp-4); }
.bv-hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--bv-gold); }
.bv-hero h1 { font-size: var(--bv-fs-3xl); margin-bottom: var(--bv-sp-4); }
.bv-hero h1 em { font-style: normal; color: var(--bv-gold); }
.bv-hero-sub { font-size: var(--bv-fs-md); color: var(--bv-ink-soft); line-height: var(--bv-lh-base); max-width: 540px; margin-bottom: var(--bv-sp-5); }
.bv-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--bv-sp-3); align-items: center; }
.bv-hero-trust { margin-top: var(--bv-sp-5); font-size: var(--bv-fs-sm); color: var(--bv-ink-faint); display: flex; gap: var(--bv-sp-4); flex-wrap: wrap; }
.bv-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.bv-hero-visual { position: relative; border-radius: var(--bv-radius-lg); overflow: hidden; box-shadow: var(--bv-shadow-lg); aspect-ratio: 3/4; background: #000; }
.bv-hero-visual video, .bv-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.bv-hero-badge { position: absolute; top: var(--bv-sp-4); left: var(--bv-sp-4); background: rgba(255,251,245,.94); border: 2px solid var(--bv-gold); border-radius: var(--bv-radius-pill); padding: 6px 14px; font-size: var(--bv-fs-xs); font-weight: 700; color: var(--bv-gold-deep); }

/* ---- Trust bar ---- */
.bv-trust { border-top: 1px solid var(--bv-line); border-bottom: 1px solid var(--bv-line); background: var(--bv-surface-2); }
.bv-trust-inner { max-width: var(--bv-maxw); margin: 0 auto; padding: var(--bv-sp-4) var(--bv-sp-5); display: flex; gap: var(--bv-sp-6); align-items: center; justify-content: center; flex-wrap: wrap; font-size: var(--bv-fs-sm); color: var(--bv-ink-soft); }
.bv-trust-inner b { color: var(--bv-charcoal); }

/* ---- Sections ---- */
.bv-section { max-width: var(--bv-maxw); margin: 0 auto; padding: var(--bv-sp-9) var(--bv-sp-5); }
.bv-section-narrow { max-width: var(--bv-maxw-narrow); }
.bv-section-head { text-align: center; max-width: 680px; margin: 0 auto var(--bv-sp-7); }
.bv-section-eyebrow { font-size: var(--bv-fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bv-gold-deep); margin-bottom: var(--bv-sp-3); }
.bv-section-head h2 { font-size: var(--bv-fs-2xl); margin-bottom: var(--bv-sp-3); }
.bv-section-sub { color: var(--bv-ink-soft); font-size: var(--bv-fs-md); }

/* ---- Tools grid (image-based cards) ---- */
.bv-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bv-sp-4); }
.bv-tool { background: var(--bv-surface); border: 1px solid var(--bv-line); border-radius: var(--bv-radius); padding: var(--bv-sp-5); box-shadow: var(--bv-shadow-sm); transition: transform var(--bv-med) var(--bv-ease), box-shadow var(--bv-med); text-decoration: none; color: inherit; display: flex; flex-direction: column; overflow: hidden; }
.bv-tool:hover { transform: translateY(-4px); box-shadow: var(--bv-shadow-lg); border-color: var(--bv-gold); }
.bv-tool-icon { width: 48px; height: 48px; border-radius: var(--bv-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: var(--bv-sp-3); }
.bv-tool h3 { font-size: var(--bv-fs-md); margin-bottom: 6px; }
.bv-tool p { font-size: var(--bv-fs-sm); color: var(--bv-ink-soft); margin: 0; line-height: 1.5; }
.bv-tool p em { color: var(--bv-crimson); font-style: italic; }

/* Image-cover tool cards */
.bv-tool-img { padding: 0; }
.bv-tool-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 1px solid var(--bv-line); background: var(--bv-surface-3); transition: transform var(--bv-med); }
.bv-tool:hover .bv-tool-cover { transform: scale(1.04); }
.bv-tool-img h3, .bv-tool-img p { padding: 0 var(--bv-sp-4); }
.bv-tool-img h3 { margin-top: var(--bv-sp-3); }
.bv-tool-img p { margin-bottom: var(--bv-sp-4); }

/* Experimental flag + beta tag */
.bv-tool-flag { position: absolute; top: 10px; right: 10px; background: var(--bv-crimson); color: #fff; font-size: var(--bv-fs-xs); font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: var(--bv-radius-pill); text-transform: uppercase; box-shadow: var(--bv-shadow); }
.bv-tool-experimental { position: relative; border-color: var(--bv-line); }
.bv-tool-experimental:hover { border-color: var(--bv-crimson); }
.bv-beta { display: inline-block; font-family: var(--bv-font-body); font-size: .65em; font-weight: 700; vertical-align: middle; background: var(--bv-gold-soft); color: var(--bv-gold-deep); padding: 2px 7px; border-radius: var(--bv-radius-pill); margin-left: 4px; text-transform: uppercase; }

/* per-tool accent colours (JDMIS system) — for icon-style tools still used in Model Atelier */
.bv-tool[data-accent=gold]    .bv-tool-icon { background: var(--bv-gold-soft); color: var(--bv-gold-deep); }
.bv-tool[data-accent=ocean]   .bv-tool-icon { background: #d3ecfa; color: var(--bv-ocean); }
.bv-tool[data-accent=rose]    .bv-tool-icon { background: #f6dde9; color: var(--bv-rose); }
.bv-tool[data-accent=lime]    .bv-tool-icon { background: #e6efce; color: #7a8c2a; }
.bv-tool[data-accent=crimson] .bv-tool-icon { background: #f8d6d1; color: var(--bv-crimson); }
.bv-tool[data-accent=violet]  .bv-tool-icon { background: #e4ddf0; color: var(--bv-violet); }
.bv-tool[data-accent=jade]    .bv-tool-icon { background: #d4ece2; color: var(--bv-jade); }

/* ---- Feature blocks (alternating media/text) ---- */
.bv-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bv-sp-7); align-items: center; margin-bottom: var(--bv-sp-8); }
.bv-feature:last-child { margin-bottom: 0; }
.bv-feature:nth-child(even) .bv-feature-media { order: 2; }
.bv-feature-media { border-radius: var(--bv-radius-lg); overflow: hidden; box-shadow: var(--bv-shadow); aspect-ratio: 4/3; background: var(--bv-surface-3); }
.bv-feature-media img { width: 100%; height: 100%; object-fit: cover; }
/* Videos fill the media box exactly (object-fit: fill + width:100%) so the
   frame is never awkwardly cropped — per spec. */
.bv-feature-media video { object-fit: cover; width: 100%; }
.bv-feature-body h3 { font-size: var(--bv-fs-xl); margin-bottom: var(--bv-sp-3); }
.bv-feature-body p { color: var(--bv-ink-soft); font-size: var(--bv-fs-md); margin-bottom: var(--bv-sp-3); }
.bv-feature-list { list-style: none; padding: 0; margin: 0; }
.bv-feature-list li { padding: 6px 0 6px 24px; position: relative; color: var(--bv-ink); font-size: var(--bv-fs-sm); }
.bv-feature-list li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--bv-gold); font-size: .8rem; font-weight: 700; }

/* ---- Spotlight ---- */
.bv-spotlight { background: var(--bv-surface-2); border-top: 1px solid var(--bv-line); border-bottom: 1px solid var(--bv-line); }
.bv-spotlight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bv-sp-4); }
.bv-spotlight-item { position: relative; aspect-ratio: 1; border-radius: var(--bv-radius); overflow: hidden; cursor: pointer; box-shadow: var(--bv-shadow-sm); border: 1px solid var(--bv-line); background: var(--bv-surface); }
.bv-spotlight-item:hover { box-shadow: var(--bv-shadow-lg); border-color: var(--bv-gold); transform: translateY(-3px); }
.bv-spotlight-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bv-med); }
.bv-spotlight-item:hover img { transform: scale(1.06); }
.bv-spotlight-overlay { position: absolute; inset: auto 0 0 0; padding: var(--bv-sp-3); background: linear-gradient(transparent, rgba(31,33,33,.9)); color: #fff; opacity: 0; transition: opacity var(--bv-fast); }
.bv-spotlight-item:hover .bv-spotlight-overlay { opacity: 1; }
.bv-spotlight-overlay .t { font-weight: 700; font-size: var(--bv-fs-sm); }
.bv-spotlight-overlay .d { color: var(--bv-gold); font-size: var(--bv-fs-xs); }

/* Community gallery (full public grid — reuses spotlight-item visuals) */
.bv-community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bv-sp-4); }
@media (max-width: 800px) { .bv-community-grid { grid-template-columns: repeat(2, 1fr); } }
.bv-community-grid .bv-empty { grid-column: 1 / -1; text-align: center; padding: var(--bv-sp-8); color: var(--bv-ink-faint); }

/* ---- Pricing ---- */
.bv-pricing-head { text-align: center; margin-bottom: var(--bv-sp-7); }
.bv-currency-wrap { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--bv-sp-4); }
.bv-currency-select { background: var(--bv-surface); color: var(--bv-ink); border: 2px solid var(--bv-line); border-radius: var(--bv-radius-pill); padding: 8px 16px; font-family: var(--bv-font-body); font-weight: 700; cursor: pointer; }
.bv-currency-select:hover { border-color: var(--bv-gold); }
.bv-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bv-sp-4); align-items: stretch; }
.bv-plan { background: var(--bv-surface); border: 1px solid var(--bv-line); border-radius: var(--bv-radius-lg); padding: var(--bv-sp-5); box-shadow: var(--bv-shadow); display: flex; flex-direction: column; position: relative; }
.bv-plan.featured { border: 2px solid var(--bv-gold); box-shadow: var(--bv-shadow-lg); }
.bv-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--bv-gold); color: #fff; font-size: var(--bv-fs-xs); font-weight: 700; letter-spacing: .08em; padding: 5px 14px; border-radius: var(--bv-radius-pill); }
.bv-plan-icon { width: 44px; height: 44px; margin-bottom: var(--bv-sp-2); }
.bv-plan h3 { font-size: var(--bv-fs-lg); }
.bv-plan .bv-plan-essence { color: var(--bv-ink-soft); font-size: var(--bv-fs-sm); margin-bottom: var(--bv-sp-3); min-height: 1.4em; }
.bv-plan-price { font-family: var(--bv-font-display); font-size: 2.2rem; font-weight: 700; color: var(--bv-gold-deep); line-height: 1; }
.bv-plan-price .bv-cur { font-size: 1.1rem; vertical-align: super; color: var(--bv-gold); margin-right: 2px; }
.bv-plan-credits { color: var(--bv-ink-soft); font-size: var(--bv-fs-sm); margin-top: 4px; margin-bottom: var(--bv-sp-3); }
.bv-plan ul { list-style: none; padding: 0; margin: 0 0 var(--bv-sp-4); flex-grow: 1; }
.bv-plan ul li { padding: 7px 0 7px 22px; position: relative; font-size: var(--bv-fs-sm); color: var(--bv-ink-soft); border-bottom: 1px solid var(--bv-line-soft); }
.bv-plan ul li:last-child { border-bottom: none; }
.bv-plan ul li::before { content: "✓"; position: absolute; left: 0; top: 7px; color: var(--bv-gold); font-size: .75rem; font-weight: 700; }
.bv-plan .bv-btn { margin-top: auto; width: 100%; justify-content: center; }

/* ---- Testimonials ---- */
.bv-testimonials { background: var(--bv-surface-2); border-top: 1px solid var(--bv-line); border-bottom: 1px solid var(--bv-line); }
.bv-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bv-sp-5); }
.bv-testimonial { background: var(--bv-surface); border: 1px solid var(--bv-line); border-radius: var(--bv-radius-lg); padding: var(--bv-sp-6); box-shadow: var(--bv-shadow-sm); position: relative; }
.bv-testimonial::before { content: "\201C"; font-family: Georgia, 'Times New Roman', serif; font-size: 3.5rem; color: var(--bv-gold); opacity: .3; line-height: 1; position: absolute; top: 8px; left: 16px; }
.bv-testimonial blockquote { font-size: var(--bv-fs-md); line-height: var(--bv-lh-base); color: var(--bv-ink); margin: var(--bv-sp-4) 0; font-style: italic; }
.bv-testimonial figcaption .n { font-family: var(--bv-font-display); font-weight: 700; color: var(--bv-charcoal); }
.bv-testimonial figcaption .r { color: var(--bv-ink-faint); font-size: var(--bv-fs-sm); }

/* ---- FAQ ---- */
.bv-faq { max-width: var(--bv-maxw-narrow); margin: 0 auto; }
.bv-faq details { background: var(--bv-surface); border: 1px solid var(--bv-line); border-radius: var(--bv-radius); margin-bottom: var(--bv-sp-3); padding: var(--bv-sp-4) var(--bv-sp-5); box-shadow: var(--bv-shadow-sm); }
.bv-faq summary { font-family: var(--bv-font-display); font-weight: 700; color: var(--bv-charcoal); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.bv-faq summary::-webkit-details-marker { display: none; }
.bv-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--bv-gold); transition: transform var(--bv-fast); }
.bv-faq details[open] summary::after { transform: rotate(45deg); }
.bv-faq details p { margin: var(--bv-sp-3) 0 0; color: var(--bv-ink-soft); }

/* ---- CTA band ---- */
.bv-cta-band { background: linear-gradient(120deg, var(--bv-gold-deep), var(--bv-gold)); color: #fff; text-align: center; padding: var(--bv-sp-8) var(--bv-sp-5); }
.bv-cta-band h2 { color: #fff; font-size: var(--bv-fs-2xl); margin-bottom: var(--bv-sp-3); }
.bv-cta-band p { color: rgba(255,255,255,.92); font-size: var(--bv-fs-md); margin-bottom: var(--bv-sp-5); }
.bv-cta-band .bv-btn-primary { background: #fff; color: var(--bv-gold-deep); }

/* ---- JDMIS / about ---- */
.bv-jdmis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bv-sp-7); align-items: center; }
.bv-jdmis-text h2 { font-size: var(--bv-fs-xl); margin-bottom: var(--bv-sp-4); }
.bv-jdmis-text p { color: var(--bv-ink-soft); margin-bottom: var(--bv-sp-4); }
.bv-jdmis-text strong { color: var(--bv-gold-deep); }
.bv-jdmis-logo { max-width: 220px; margin-bottom: var(--bv-sp-4); }
.bv-jdmis-media { border-radius: var(--bv-radius-lg); overflow: hidden; box-shadow: var(--bv-shadow-lg); aspect-ratio: 4/3; }
.bv-jdmis-link { display: inline-flex; gap: 8px; color: var(--bv-gold-deep); text-decoration: none; font-weight: 700; border-bottom: 2px solid var(--bv-gold); padding-bottom: 3px; }

/* ---- Footer ---- */
.bv-footer { background: var(--bv-charcoal); color: #cfc8bb; padding: var(--bv-sp-8) var(--bv-sp-5) var(--bv-sp-5); }
.bv-footer-inner { max-width: var(--bv-maxw); margin: 0 auto; }
.bv-footer-top { display: flex; justify-content: space-between; gap: var(--bv-sp-5); flex-wrap: wrap; padding-bottom: var(--bv-sp-5); border-bottom: 1px solid rgba(255,255,255,.1); }
.bv-footer-brand { display: flex; align-items: center; gap: 10px; }
.bv-footer-brand img { width: 34px; height: 34px; }
.bv-footer-brand .n { font-family: var(--bv-font-display); color: #fff; font-size: 1.2rem; }
.bv-footer-nav { display: flex; gap: var(--bv-sp-5); flex-wrap: wrap; align-items: center; }
.bv-footer-nav a { color: #cfc8bb; text-decoration: none; font-size: var(--bv-fs-sm); }
.bv-footer-nav a:hover { color: var(--bv-gold); }
.bv-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: var(--bv-sp-4); font-size: var(--bv-fs-xs); color: #9a9388; }
.bv-footer-bottom a { color: var(--bv-gold); }

/* ---- Spotlight comparison modal ---- */
.bv-spotlight-modal { position: fixed; inset: 0; background: rgba(20,17,13,.85); backdrop-filter: blur(6px); z-index: var(--bv-z-modal); display: none; align-items: center; justify-content: center; padding: var(--bv-sp-4); }
.bv-spotlight-modal.open { display: flex; }
.bv-spotlight-modal-box { background: var(--bv-cream); border-radius: var(--bv-radius-lg); max-width: min(900px, calc(100vh - 64px)); width: 100%; max-height: calc(100vh - 32px); box-shadow: var(--bv-shadow-lg); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.bv-spotlight-close { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--bv-surface); border: 1px solid var(--bv-line); border-radius: 50%; width: 38px; height: 38px; font-size: 1.3rem; cursor: pointer; color: var(--bv-ink); }
.bv-spotlight-close:hover { background: var(--bv-gold); color: #fff; }
/* Comparison box sizes to the image's own aspect ratio (set in JS from the
   generated image's natural dimensions) and contains so nothing is cropped.
   The box flexes to fill the modal minus the info bar.
   user-select:none + draggable=false on the images stops the browser from
   starting a native image ghost-drag while sliding the comparison handle.
   (feedback #78 rework) The outer .bv-comparison is ONLY the sizing frame
   and pointer surface — it never clips. All clipping (overflow + the wipe)
   is confined to .bv-comparison-stage, and the corner labels live in a
   separate layer above it, so no slider position can ever cut a label. */
.bv-comparison { position: relative; width: 100%; --slide: 50%; flex: 1 1 auto; min-height: 0; user-select: none; -webkit-user-select: none; touch-action: none; cursor: ew-resize; }
.bv-comparison.bv-dragging { cursor: grabbing; }
.bv-comparison-stage { position: absolute; inset: 0; overflow: hidden; background: #000; }
.bv-comparison img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.bv-comparison .gen { clip-path: inset(0 0 0 var(--slide)); }
.bv-comparison .orig { clip-path: inset(0 calc(100% - var(--slide)) 0 0); }
.bv-comparison .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; z-index: 6; background: var(--bv-gold); transform: translateX(-50%); }
.bv-comparison .handle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--bv-gold); border: 3px solid #fff; box-shadow: var(--bv-shadow); }
/* Corner labels sit OUTSIDE .bv-comparison-stage — above every clip layer —
   so the wipe can never slice them. (feedback #78) When the slider moves
   within ~15% of a side, that side's label tucks INTO its own corner: it
   shrinks toward its corner (transform-origin), nudges slightly toward it
   and fades — a short path kept entirely INSIDE the frame, so the animation
   never crosses any clipping boundary (no cut-off artifacts at any point)
   and reads as an intentional pop-out; it pops back out the moment there
   is room again. */
.bv-comparison .label { position: absolute; bottom: 12px; z-index: 7; pointer-events: none; padding: 4px 12px; background: rgba(31,33,33,.85); color: #fff; border-radius: var(--bv-radius-pill); font-size: var(--bv-fs-xs); font-weight: 700; white-space: nowrap; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; will-change: transform, opacity; }
.bv-comparison .label.orig { left: 12px; transform-origin: 0 100%; }
.bv-comparison .label.gen { right: 12px; transform-origin: 100% 100%; }
.bv-comparison .label.tucked { opacity: 0; }
.bv-comparison .label.orig.tucked { transform: translate(-8%, 15%) scale(.7); }
.bv-comparison .label.gen.tucked { transform: translate(8%, 15%) scale(.7); }
.bv-spotlight-info { padding: var(--bv-sp-4) var(--bv-sp-5); }
.bv-spotlight-info h3 { font-size: var(--bv-fs-md); }
.bv-spotlight-info .d { color: var(--bv-gold-deep); font-size: var(--bv-fs-sm); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .bv-hero { grid-template-columns: 1fr; gap: var(--bv-sp-6); padding-top: var(--bv-sp-7); }
  .bv-tools { grid-template-columns: repeat(2, 1fr); }
  .bv-feature { grid-template-columns: 1fr; gap: var(--bv-sp-4); }
  .bv-feature:nth-child(even) .bv-feature-media { order: 0; }
  .bv-plans { grid-template-columns: repeat(2, 1fr); }
  .bv-testimonials-grid { grid-template-columns: 1fr; }
  .bv-jdmis { grid-template-columns: 1fr; }
  .bv-spotlight-grid { grid-template-columns: repeat(2, 1fr); }
  .bv-header nav .bv-nav-link { display: none; }
  /* On mobile the header is tight; keep only Login + theme toggle. The hero
     still has a prominent "Start Designing Free" CTA, so the navbar Start
     Free button is redundant here. */
  .bv-header-cta .bv-btn-primary { display: none; }
}
@media (max-width: 600px) {
  .bv-section { padding: var(--bv-sp-8) var(--bv-sp-4); }
  .bv-plans { grid-template-columns: 1fr; }
  .bv-tools { grid-template-columns: 1fr; }
  .bv-hero-ctas { flex-direction: column; align-items: stretch; }
  .bv-hero-ctas .bv-btn { justify-content: center; }
}