/* [project]/styles/landing-v6.css [app-client] (css) */
.vB {
  --bg: #fff;
  --bg-soft: #f7f5f2;
  --bg-warmer: #efebe6;
  --ink: #0f0a07;
  --ink-2: #3d342c;
  --ink-3: #807267;
  --line: #eae5de;
  --line-2: #f1ede6;
  --accent: #ff5b1f;
  --accent-soft: #ffe9dc;
  --accent-ink: #b83d0c;
  --accent-deep: #e0480f;
  --ok: #17a97a;
  --ease: cubic-bezier(.16, 1, .3, 1);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "cv11";
  letter-spacing: -.01em;
  width: 100%;
  margin: 0;
  transition: background .4s, color .4s;
  position: relative;
  overflow-x: clip;
}

.vB.dark {
  --bg: #0d0906;
  --bg-soft: #14100b;
  --bg-warmer: #1a150f;
  --ink: #f5efe6;
  --ink-2: #c6baa9;
  --ink-3: #8a7f72;
  --line: #26201a;
  --line-2: #1d1812;
  --accent: #ff6a2e;
  --accent-soft: #2a1409;
  --accent-ink: #ffae7d;
  --accent-deep: #ff5b1f;
}

.vB:after {
  content: "";
  pointer-events: none;
  z-index: 120;
  opacity: .13;
  mix-blend-mode: multiply;
  background-image: url("/landing6/grain-light.svg");
  background-size: 240px 240px;
  position: absolute;
  inset: 0;
}

.vB.dark:after {
  mix-blend-mode: screen;
  opacity: .32;
  background-image: url("/landing6/grain-dark.svg");
}

.vB > .vB-nav, .vB > .vB-hero, .vB > .vB-section, .vB > .vB-reco, .vB > .vB-cta, .vB > .vB-foot {
  padding-left: max(48px, 50% - 632px);
  padding-right: max(48px, 50% - 632px);
}

.vB * {
  box-sizing: border-box;
}

.vB p:where(:not(.blog-prose *, .vB-doc-text *)) {
  margin: 0;
}

.vB :is(h1, h2, h3, h4):where(:not(.blog-prose *, .vB-doc-text *)) {
  letter-spacing: -.035em;
  margin: 0;
  font-weight: 600;
  line-height: 1;
}

.vB a:where(:not(.vB-doc-text *)) {
  color: inherit;
  text-decoration: none;
}

.vB-nav-links a.active {
  color: var(--ink);
}

html:has(.vB) {
  scroll-behavior: smooth;
}

.vB [id] {
  scroll-margin-top: 20px;
}

.vB button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.vB :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.vB .mono {
  font-family: var(--font-mono);
  letter-spacing: 0;
  font-feature-settings: normal;
}

.vB .serif {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}

.vB .reveal {
  opacity: 0;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transform: translateY(26px);
}

.vB .reveal.in {
  opacity: 1;
  transform: none;
}

.vB-btn {
  letter-spacing: -.01em;
  transition: transform .2s var(--ease), background .2s ease, border-color .2s ease, color .2s ease;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid #0000;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
}

.vB-btn:active {
  transform: scale(.98);
}

.vB-btn.primary {
  background: var(--accent);
  color: #fff8f2;
}

.vB-btn.primary:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
}

.vB-btn.primary:after {
  content: "→";
  font-family: var(--font-sans);
}

.vB-btn.outline {
  border-color: var(--line);
}

.vB-btn.outline:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
}

.vB-btn.ghost {
  color: var(--ink-2);
  padding: 11px 12px;
}

.vB-btn.ghost:hover {
  color: var(--ink);
}

.vB-btn.lg {
  padding: 15px 26px;
  font-size: 15px;
}

.vB-nav {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  z-index: 100;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
  transition: top .35s, max-width .35s, border-radius .35s, margin .35s, padding .35s, background .35s, border-color .35s, box-shadow .35s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.vB-nav.pill {
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  max-width: 1200px;
  box-shadow: 0 18px 40px -24px color-mix(in oklab, var(--ink) 30%, transparent);
  border-radius: 999px;
  margin: 0 auto;
  padding: 10px 20px;
  top: 14px;
}

.vB-nav-left {
  align-items: center;
  gap: 44px;
  display: flex;
}

.vB-logo {
  display: block;
}

.vB.dark .vB-logo img {
  filter: invert() hue-rotate(180deg) saturate(0);
}

.vB-nav-links {
  gap: 28px;
  display: flex;
}

.vB-nav-links a {
  color: var(--ink-2);
  font-size: 14px;
  transition: color .2s;
}

.vB-nav-links a:hover {
  color: var(--ink);
}

.vB-nav-cta {
  align-items: center;
  gap: 10px;
  display: flex;
}

.vB-nav-spacer {
  height: 76px;
}

.vB-toggle {
  border: 1px solid var(--line);
  width: 38px;
  height: 38px;
  color: var(--ink-2);
  transition: color .2s ease, border-color .2s ease, transform .2s var(--ease);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.vB-toggle:hover {
  color: var(--accent-ink);
  border-color: var(--ink-3);
  transform: rotate(15deg);
}

.vB-burger {
  border: 1px solid var(--line);
  border-radius: 999px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  display: none;
}

.vB-burger span {
  background: var(--ink);
  width: 16px;
  height: 1.5px;
  transition: transform .3s var(--ease), opacity .2s ease;
  display: block;
}

.vB-burger.open span:first-child {
  transform: translateY(6.5px)rotate(45deg);
}

.vB-burger.open span:nth-child(2) {
  opacity: 0;
}

.vB-burger.open span:nth-child(3) {
  transform: translateY(-6.5px)rotate(-45deg);
}

.vB-mobile-menu {
  z-index: 90;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 96px 28px 40px;
  transition: opacity .28s;
  display: flex;
  position: fixed;
  inset: 0;
}

.vB-mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.vB-mobile-menu a {
  letter-spacing: -.03em;
  border-bottom: 1px solid var(--line-2);
  padding: 10px 0;
  font-size: 30px;
  font-weight: 600;
}

.vB-mobile-menu-footer {
  gap: 10px;
  margin-top: 28px;
  display: flex;
}

.vB-mobile-menu-footer a {
  border-bottom: none;
  flex: 1;
  justify-content: center;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 500;
}

body.vB-menu-lock {
  overflow: hidden;
}

.vB-hero {
  padding-top: 72px;
  padding-bottom: 40px;
}

.vB-hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 72px;
  display: grid;
}

.vB-kicker {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.vB-kicker .rule {
  background: var(--accent);
  width: 44px;
  height: 1px;
}

.vB-hero-h {
  letter-spacing: -.045em;
  max-width: 13ch;
  margin-top: 28px;
  font-size: clamp(42px, 5.4vw, 80px);
  line-height: .99;
}

.vB-hero-sub {
  color: var(--ink-2);
  max-width: 54ch;
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.65;
}

.vB-hero-cta {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
  display: flex;
}

.vB-hero-meta {
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 84px;
  display: grid;
}

.vB-hero-meta > * {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.vB-hero-meta .num {
  font-family: var(--font-mono);
  letter-spacing: -.03em;
  font-size: 28px;
  font-weight: 500;
}

.vB-hero-meta .lbl {
  color: var(--ink-3);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.vB-hero-visual {
  height: 480px;
  position: relative;
}

.vB-shot {
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--ink) 35%, transparent);
  border-radius: 14px;
  padding: 10px;
  position: absolute;
}

.vB-shot .ph {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.vB-shot .ph:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -60px 80px -40px #14080247;
}

.vB-shot .ph.a {
  background-image: url("/landing6/hero-1.webp"), linear-gradient(155deg, #e8d9c4 0%, #b08d6a 55%, #6e4f38 100%);
}

.vB-shot .ph.b {
  background-image: url("/landing6/hero-2.webp"), linear-gradient(200deg, #d9cfc4 0%, #8f8377 60%, #4e4034 100%);
}

.vB-shot .ph.c {
  background-image: url("/landing6/hero-front.webp"), radial-gradient(130% 95% at 28% 18%, #f2e4cf 0%, #c9a887 45%, #7a5a41 100%);
}

.vB-shot.back-2 {
  opacity: .75;
  width: 250px;
  height: 320px;
  top: 36px;
  left: 4%;
  transform: rotate(-7deg);
}

.vB-shot.back-1 {
  opacity: .9;
  width: 260px;
  height: 330px;
  top: 10px;
  right: 6%;
  transform: rotate(5deg);
}

.vB-shot.front {
  width: 300px;
  height: 380px;
  top: 64px;
  left: 50%;
  transform: translateX(-50%)rotate(-1.5deg);
}

.vB-shot.front .ph {
  height: calc(100% - 42px);
}

.vB-facebox {
  border: 1.5px solid var(--accent);
  border-radius: 5px;
  animation: 3.2s ease-in-out infinite vB-face-pulse;
  position: absolute;
  box-shadow: 0 0 0 1px #fff8f240;
}

.vB-facebox.one {
  width: 22%;
  height: 21%;
  top: 18%;
  left: 39%;
}

@keyframes vB-face-pulse {
  0%, 100% {
    opacity: .55;
  }

  50% {
    opacity: 1;
  }
}

.vB-shot-tag {
  height: 42px;
  color: var(--ink-2);
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  font-size: 12.5px;
  display: flex;
}

.vB-shot-tag .dot {
  background: var(--ok);
  border-radius: 999px;
  flex: none;
  width: 7px;
  height: 7px;
}

.vB-notif-toast {
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -28px color-mix(in oklab, var(--ink) 40%, transparent);
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  animation: 5.5s ease-in-out infinite vB-float;
  display: flex;
  position: absolute;
  bottom: 12px;
  right: 0;
}

.vB-notif-toast .ic {
  background: var(--accent);
  color: #fff8f2;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}

.vB-notif-toast .t {
  font-size: 13.5px;
  font-weight: 600;
}

.vB-notif-toast .s {
  color: var(--ink-3);
  margin-top: 2px;
  font-size: 11.5px;
}

@keyframes vB-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.vB-marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 22px 0;
  overflow: hidden;
}

.vB-marquee-track {
  width: max-content;
  animation: 36s linear infinite vB-marquee;
  display: flex;
}

.vB-marquee-item {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink-2);
  white-space: nowrap;
  align-items: center;
  font-size: clamp(24px, 3vw, 38px);
  font-style: italic;
  display: inline-flex;
}

.vB-sep {
  background: var(--accent);
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 32px;
  transform: rotate(45deg);
}

@keyframes vB-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.vB-section {
  padding-top: 110px;
  padding-bottom: 40px;
}

.vB-eyebrow {
  font-family: var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 500;
}

.vB-h2 {
  letter-spacing: -.04em;
  max-width: 20ch;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.02;
}

.vB-desc {
  color: var(--ink-2);
  max-width: 52ch;
  margin-top: 22px;
  font-size: 16.5px;
  line-height: 1.65;
}

.vB-cycle-head {
  padding-bottom: 0;
}

.vB-chapters {
  flex-direction: column;
  gap: 40px;
  padding-top: 30px;
  display: flex;
}

.vB-ch {
  border-top: 1px solid var(--line-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
  padding: 64px 0;
  display: grid;
  position: relative;
}

.vB-ch:first-child {
  border-top: none;
}

.vB-ch-copy {
  z-index: 1;
  grid-area: 1 / 1;
  position: relative;
}

.vB-ch-visual {
  grid-area: 1 / 2;
  justify-content: center;
  display: flex;
}

.vB-ch.flip .vB-ch-copy {
  grid-column: 2;
}

.vB-ch.flip .vB-ch-visual {
  grid-column: 1;
}

.vB-ch-num {
  font-family: var(--font-display);
  color: #0000;
  -webkit-text-stroke: 1.5px var(--line);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  font-size: clamp(120px, 15vw, 220px);
  line-height: 1;
  position: absolute;
  top: 14px;
  right: -8px;
}

.vB-ch.flip .vB-ch-num {
  left: -8px;
  right: auto;
}

.vB-ch-kicker {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-size: 12.5px;
}

.vB-ch-title {
  letter-spacing: -.035em;
  max-width: 18ch;
  margin-top: 18px;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08;
}

.vB-ch-body {
  color: var(--ink-2);
  max-width: 50ch;
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.7;
}

.vB-ch-list {
  max-width: 46ch;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.vB-ch-list li {
  border-top: 1px solid var(--line-2);
  color: var(--ink-2);
  gap: 12px;
  padding: 11px 0;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
}

.vB-ch-list li:before {
  content: "—";
  color: var(--accent);
  flex: none;
}

.vB-phone {
  border: 1px solid var(--line);
  background: var(--bg);
  width: 290px;
  box-shadow: 0 40px 70px -40px color-mix(in oklab, var(--ink) 40%, transparent);
  border-radius: 34px;
  padding: 16px;
  transform: rotate(2deg);
}

.vB-ch.flip .vB-phone {
  transform: rotate(-2deg);
}

.vB-phone-top {
  align-items: center;
  gap: 8px;
  padding: 2px 2px 12px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.vB-phone-top .brand-dot {
  background: var(--accent);
  border-radius: 999px;
  flex: none;
  width: 9px;
  height: 9px;
}

.vB-phone-top .step {
  color: var(--ink-3);
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
}

.vB-phone-progress {
  background: var(--line-2);
  border-radius: 99px;
  height: 3px;
  overflow: hidden;
}

.vB-phone-progress span {
  background: var(--accent);
  border-radius: 99px;
  width: 33%;
  height: 100%;
  display: block;
}

.vB-phone-body {
  padding: 26px 2px 20px;
}

.vB-phone-body .q {
  letter-spacing: -.025em;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}

.vB-phone-body .input {
  border-bottom: 2px solid var(--accent);
  align-items: center;
  margin-top: 18px;
  padding: 8px 2px;
  font-size: 16px;
  display: flex;
}

.vB-phone-body .caret {
  background: var(--accent);
  width: 1.5px;
  height: 18px;
  margin-left: 3px;
  animation: 1.1s step-end infinite vB-caret;
}

@keyframes vB-caret {
  50% {
    opacity: 0;
  }
}

.vB-phone-body .hint {
  color: var(--ink-3);
  margin-top: 10px;
  font-size: 12px;
}

.vB-btn-mock {
  background: var(--accent);
  color: #fff8f2;
  text-align: center;
  border-radius: 999px;
  margin-top: 26px;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
}

.vB-btn-mock:after {
  content: " →";
}

.vB-phone-foot {
  border-top: 1px solid var(--line-2);
  color: var(--ink-2);
  align-items: center;
  gap: 8px;
  padding: 12px 2px 2px;
  font-size: 12px;
  display: flex;
}

.vB-phone-foot .ok {
  background: var(--ok);
  color: #f3fdf9;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: inline-flex;
}

.vB-ledger {
  border: 1px solid var(--line);
  background: var(--bg);
  width: min(460px, 100%);
  box-shadow: 0 40px 70px -40px color-mix(in oklab, var(--ink) 35%, transparent);
  border-radius: 16px;
  overflow: hidden;
  transform: rotate(-1.2deg);
}

.vB-ledger-head {
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 600;
}

.vB-ledger-row {
  border-bottom: 1px solid var(--line-2);
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  font-size: 13px;
  display: grid;
}

.vB-ledger-row .l {
  color: var(--ink);
  font-weight: 500;
}

.vB-ledger-row .d {
  color: var(--ink-3);
  font-size: 12px;
}

.vB-ledger-row .v {
  font-size: 12.5px;
}

.vB-ledger-row .st {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  font-size: 10.5px;
}

.vB-ledger-row .st.ok {
  color: var(--ok);
}

.vB-ledger-row .st.warn {
  color: var(--accent-ink);
}

.vB-ledger-row .st.open {
  color: var(--ink-3);
}

.vB-ledger-foot {
  color: var(--ink-3);
  background: var(--bg-soft);
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  font-size: 11.5px;
  display: flex;
}

.vB-phone.portal {
  padding-bottom: 10px;
}

.vB-portal-grid {
  border-radius: 14px;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 4px;
  display: grid;
  overflow: hidden;
}

.vB-portal-grid .cell {
  aspect-ratio: 4 / 5;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 6px;
  position: relative;
}

.vB-portal-grid .cell:after {
  content: "";
  border-radius: 6px;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -30px 40px -24px #1408024d;
}

.vB-portal-grid .p1 {
  background-image: url("/landing6/portal-1.webp"), linear-gradient(150deg, #e6d5be, #a9825f);
}

.vB-portal-grid .p2 {
  background-image: url("/landing6/portal-2.webp"), radial-gradient(120% 100% at 30% 20%, #efdfc9, #b28a64 70%);
}

.vB-portal-grid .p3 {
  background-image: url("/landing6/portal-3.webp"), linear-gradient(195deg, #d8cec2, #77675a);
}

.vB-portal-grid .p4 {
  background-image: url("/landing6/portal-4.webp"), linear-gradient(160deg, #e2cdb4, #8d6c4f);
}

.vB-portal-grid .p5 {
  background-image: url("/landing6/portal-5.webp"), radial-gradient(110% 95% at 70% 25%, #ead9c2, #96755a 75%);
}

.vB-portal-grid .p6 {
  background-image: url("/landing6/portal-6.webp"), linear-gradient(140deg, #dccfbe, #6f5a48);
}

.vB-portal-grid .fav {
  z-index: 1;
  color: var(--accent);
  animation: 4.5s ease-in-out infinite vB-fav-pop;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.vB-portal-grid .fav svg {
  fill: currentColor;
}

@keyframes vB-fav-pop {
  0%, 12%, 100% {
    transform: scale(1);
  }

  6% {
    transform: scale(1.35);
  }
}

.vB-portal-tabs {
  border-top: 1px solid var(--line-2);
  color: var(--ink-3);
  justify-content: space-around;
  margin-top: 12px;
  padding: 10px 4px 4px;
  display: flex;
}

.vB-portal-tabs .active {
  color: var(--accent);
}

.vB-album {
  width: min(480px, 100%);
  transform: rotate(1.2deg);
}

.vB-album-spread {
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 40px 70px -40px color-mix(in oklab, var(--ink) 40%, transparent);
  border-radius: 10px;
  grid-template-columns: 1fr 1fr;
  display: grid;
  position: relative;
  overflow: visible;
}

.vB-album-spread .page {
  outline: 1px dashed color-mix(in oklab, var(--accent) 40%, transparent);
  outline-offset: -9px;
  align-content: start;
  gap: 10px;
  min-height: 260px;
  padding: 18px;
  display: grid;
}

.vB-album-spread .page:first-child {
  border-right: 1px solid var(--line);
}

.vB-album-spread .slot {
  aspect-ratio: 4 / 3;
  background-position: 50% 24%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
}

.vB-album-spread .slot.tall {
  aspect-ratio: 1;
}

.vB-album-spread .slot.a {
  background-image: url("/landing6/album-1.webp"), linear-gradient(160deg, #e3d2ba, #9a795b);
}

.vB-album-spread .slot.b {
  background-image: url("/landing6/album-2.webp"), linear-gradient(200deg, #d9cec1, #7c6a59);
}

.vB-album-spread .slot.c {
  background-image: url("/landing6/album-3.webp"), radial-gradient(120% 100% at 35% 20%, #eddcc4, #a88461 75%);
}

.vB-album-spread .slot.d {
  background-image: url("/landing6/album-4.webp"), linear-gradient(150deg, #decfbc, #86664c);
}

.vB-album-spread .caption {
  font-family: var(--font-mono);
  color: var(--ink-3);
  font-size: 10px;
}

.vB-album-note {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  box-shadow: 0 14px 26px -16px color-mix(in oklab, var(--ink) 40%, transparent);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  position: absolute;
  top: -16px;
  right: -14px;
  transform: rotate(3deg);
}

.vB-album-bar {
  color: var(--ink-3);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 11.5px;
  display: flex;
}

.vB-album-bar .acts {
  gap: 8px;
  display: flex;
}

.vB-album-bar .acts span {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
}

.vB-album-bar .acts .ghost {
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.vB-album-bar .acts .ok {
  background: var(--ink);
  color: var(--bg);
}

.vB-ticket {
  border: 1px solid var(--line);
  background: var(--bg);
  width: min(360px, 100%);
  box-shadow: 0 40px 70px -40px color-mix(in oklab, var(--ink) 40%, transparent);
  border-radius: 18px;
  overflow: hidden;
  transform: rotate(-1.6deg);
}

.vB-ticket-head {
  border-bottom: 1px dashed var(--line);
  background: var(--bg-soft);
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.vB-ticket-head .brand-dot {
  background: var(--accent);
  border-radius: 999px;
  flex: none;
  width: 9px;
  height: 9px;
}

.vB-ticket-head .when {
  color: var(--ink-3);
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
}

.vB-ticket-body {
  align-items: center;
  gap: 20px;
  padding: 20px 18px;
  display: flex;
}

.vB-ticket .qr-wrap {
  border: 1px solid var(--line);
  width: 112px;
  height: 112px;
  color: var(--ink);
  border-radius: 10px;
  flex: none;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.vB-ticket .qr {
  width: 100%;
  height: 100%;
  display: block;
}

.vB-ticket .scanline {
  background: var(--accent);
  height: 2px;
  box-shadow: 0 0 12px 1px color-mix(in oklab, var(--accent) 55%, transparent);
  border-radius: 99px;
  animation: 2.6s ease-in-out infinite vB-scan;
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
}

@keyframes vB-scan {
  0%, 100% {
    transform: translateY(8px);
  }

  50% {
    transform: translateY(102px);
  }
}

.vB-ticket .info {
  min-width: 0;
}

.vB-ticket .info .lbl {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-size: 10.5px;
}

.vB-ticket .info .nm {
  letter-spacing: -.02em;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 600;
}

.vB-ticket .info .code {
  font-family: var(--font-mono);
  color: var(--accent-ink);
  margin-top: 8px;
  font-size: 12px;
}

.vB-ticket .info .seat {
  color: var(--ink-3);
  margin-top: 6px;
  font-size: 12px;
}

.vB-ticket-scan {
  border-top: 1px dashed var(--line);
  color: var(--ink-2);
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 12.5px;
  display: flex;
}

.vB-ticket-scan .ok {
  background: var(--ok);
  color: #f3fdf9;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: inline-flex;
}

.vB-ticket-scan .when {
  color: var(--ink-3);
  margin-left: auto;
  font-size: 11px;
}

.vB-reco {
  background: var(--bg-warmer);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 100px;
  padding-top: 110px;
  padding-bottom: 60px;
}

.vB-reco-head {
  max-width: 720px;
}

.vB-reco-body {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 90px;
  margin-top: 40px;
  display: grid;
}

.vB-reco-steps {
  flex-direction: column;
  display: flex;
}

.vB-reco-step {
  opacity: .3;
  flex-direction: column;
  justify-content: center;
  min-height: 62vh;
  transition: opacity .5s;
  display: flex;
}

.vB-reco-step.active {
  opacity: 1;
}

.vB-reco-step .n {
  color: var(--accent-ink);
  font-size: 13px;
}

.vB-reco-step h3 {
  letter-spacing: -.03em;
  margin-top: 14px;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
}

.vB-reco-step p {
  color: var(--ink-2);
  max-width: 40ch;
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.7;
}

.vB-reco-sticky {
  min-height: 100%;
}

.vB-reco-visual {
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 50px 90px -50px color-mix(in oklab, var(--ink) 45%, transparent);
  border-radius: 20px;
  padding: 20px;
  position: sticky;
  top: 110px;
  overflow: hidden;
}

.vB-reco-status {
  color: var(--ink-3);
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  font-size: 11.5px;
  display: flex;
}

.vB-reco-progress {
  background: var(--line-2);
  border-radius: 99px;
  height: 3px;
  margin-bottom: 16px;
  overflow: hidden;
}

.vB-reco-progress span {
  background: var(--accent);
  width: 52%;
  height: 100%;
  transition: width 1.2s var(--ease);
  border-radius: 99px;
  display: block;
}

.vB-reco-visual:not([data-step="0"]) .vB-reco-progress span {
  width: 100%;
}

.vB-reco-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  transition: opacity .6s, filter .6s;
  display: grid;
}

.vB-reco-visual[data-step="3"] .vB-reco-grid, .vB-reco-visual[data-step="4"] .vB-reco-grid {
  opacity: .45;
  filter: saturate(.7);
}

.vB-reco-tile {
  aspect-ratio: 4 / 5;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
  transition: opacity .6s;
  position: relative;
  overflow: hidden;
}

.vB-reco-tile:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -30px 40px -22px #1408024d;
}

.vB-reco-tile.t1 {
  background-image: url("/landing6/reco-1.webp"), linear-gradient(150deg, #e8d7bf, #a5805e);
}

.vB-reco-tile.t2 {
  background-image: url("/landing6/reco-2.webp"), radial-gradient(120% 100% at 30% 25%, #efe0ca, #b18a63 75%);
}

.vB-reco-tile.t3 {
  background-image: url("/landing6/reco-3.webp"), linear-gradient(195deg, #dbd1c5, #7b6a5b);
}

.vB-reco-tile.t4 {
  background-image: url("/landing6/reco-4.webp"), linear-gradient(165deg, #e4cfb5, #8c6b4e);
}

.vB-reco-tile.t5 {
  background-image: url("/landing6/reco-5.webp"), radial-gradient(110% 90% at 65% 20%, #ecdbc4, #99785c 80%);
}

.vB-reco-tile.t6 {
  background-image: url("/landing6/reco-6.webp"), linear-gradient(140deg, #ded1c0, #6e5947);
}

.vB-reco-tile.t7 {
  background-image: url("/landing6/reco-7.webp"), linear-gradient(170deg, #e6d6c0, #a17c58);
}

.vB-reco-tile.t8 {
  background-image: url("/landing6/reco-8.webp"), radial-gradient(125% 100% at 40% 30%, #ead9c1, #8f7052 78%);
}

.vB-reco-visual[data-step="0"] .vB-reco-tile:before {
  content: "";
  z-index: 1;
  background: linear-gradient(100deg, #0000 20%, #ffffff59 50%, #0000 80%);
  animation: 1.8s infinite vB-shimmer;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

.vB-reco-visual[data-step="0"] .vB-reco-tile:nth-child(2n):before {
  animation-delay: .6s;
}

@keyframes vB-shimmer {
  to {
    transform: translateX(100%);
  }
}

.vB-face {
  border: 1.5px solid var(--accent);
  opacity: 0;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  border-radius: 4px;
  position: absolute;
  transform: scale(.6);
}

.vB-reco-visual[data-step="2"] .vB-face {
  opacity: 1;
  transform: scale(1);
}

.vB-reco-tile:nth-child(2) .vB-face {
  transition-delay: 80ms;
}

.vB-reco-tile:nth-child(3) .vB-face {
  transition-delay: .16s;
}

.vB-reco-tile:nth-child(4) .vB-face {
  transition-delay: .24s;
}

.vB-reco-tile:nth-child(5) .vB-face {
  transition-delay: .32s;
}

.vB-reco-tile:nth-child(6) .vB-face {
  transition-delay: .4s;
}

.vB-reco-tile:nth-child(7) .vB-face {
  transition-delay: .48s;
}

.vB-reco-tile:nth-child(8) .vB-face {
  transition-delay: .56s;
}

.vB-reco-panel {
  z-index: 2;
  background: color-mix(in oklab, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: 0 30px 50px -30px color-mix(in oklab, var(--ink) 45%, transparent);
  opacity: 0;
  transition: transform .7s var(--ease), opacity .5s ease;
  border-radius: 14px;
  padding: 0 16px 6px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  transform: translateY(130%);
}

.vB-reco-visual[data-step="3"] .vB-reco-panel, .vB-reco-visual[data-step="4"] .vB-reco-panel {
  opacity: 1;
  transform: translateY(0);
}

.vB-reco-panel-head {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.vB-reco-panel-head .mono {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 400;
}

.vB-reco-row {
  border-top: 1px solid var(--line-2);
  opacity: 0;
  transition: opacity .5s ease, transform .5s var(--ease);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  display: flex;
  transform: translateY(8px);
}

.vB-reco-row:first-of-type {
  border-top: none;
}

.vB-reco-visual[data-step="3"] .vB-reco-row, .vB-reco-visual[data-step="4"] .vB-reco-row {
  opacity: 1;
  transform: none;
}

.vB-reco-row:first-of-type {
  transition-delay: .25s;
}

.vB-reco-row:nth-of-type(2) {
  transition-delay: .4s;
}

.vB-reco-row:nth-of-type(3) {
  transition-delay: .55s;
}

.vB-reco-row .av {
  background: var(--accent-soft);
  width: 30px;
  height: 30px;
  color: var(--accent-ink);
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
}

.vB-reco-row .nm {
  font-weight: 500;
}

.vB-reco-row .thumbs {
  gap: 3px;
  margin-left: auto;
  display: inline-flex;
}

.vB-reco-row .thumbs i {
  background: linear-gradient(155deg, #e4d3bb, #9c7b5c);
  border-radius: 3px;
  width: 16px;
  height: 20px;
}

.vB-reco-row .thumbs i:nth-child(2) {
  background: linear-gradient(195deg, #dbcfc1, #7d6b59);
}

.vB-reco-row .thumbs i:nth-child(3) {
  background: radial-gradient(120% 100% at 35% 25%, #ecdcc5, #a5825f 78%);
}

.vB-reco-row .ct {
  color: var(--ink-3);
  text-align: right;
  min-width: 56px;
  font-size: 11.5px;
}

.vB-reco-notifs {
  z-index: 3;
  flex-direction: column;
  gap: 8px;
  display: flex;
  position: absolute;
  top: 52px;
  left: 20px;
  right: 20px;
}

.vB-reco-notifs .card {
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -24px color-mix(in oklab, var(--ink) 45%, transparent);
  opacity: 0;
  transition: transform .6s var(--ease), opacity .5s ease;
  border-radius: 13px;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  display: flex;
  transform: translateY(-14px);
}

.vB-reco-visual[data-step="4"] .vB-reco-notifs .card {
  opacity: 1;
  transform: none;
}

.vB-reco-visual[data-step="4"] .vB-reco-notifs .card.mail {
  transition-delay: .3s;
}

.vB-reco-notifs .ic {
  border-radius: 8px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: flex;
}

.vB-reco-notifs .card.push .ic {
  background: var(--accent);
  color: #fff8f2;
}

.vB-reco-notifs .card.mail .ic {
  background: var(--bg-warmer);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

.vB-reco-notifs .tx {
  min-width: 0;
}

.vB-reco-notifs .t {
  font-size: 12.5px;
  font-weight: 600;
}

.vB-reco-notifs .s {
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  overflow: hidden;
}

.vB-reco-notifs .when {
  color: var(--ink-3);
  flex: none;
  align-self: flex-start;
  margin-left: auto;
  font-size: 10px;
}

.vB-wl {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 80px;
  padding-bottom: 60px;
  display: grid;
}

.vB-wl-tags {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  display: flex;
}

.vB-pill {
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
}

.vB-wl-cards {
  height: 480px;
  position: relative;
}

.vB-wl-card {
  border: 1px solid var(--line);
  background: var(--bg);
  width: 250px;
  box-shadow: 0 34px 60px -34px color-mix(in oklab, var(--ink) 45%, transparent);
  transition: transform .5s var(--ease);
  border-radius: 14px;
  position: absolute;
  overflow: hidden;
}

.vB-wl-card:hover {
  transform: translateY(-8px)rotate(0) !important;
}

.vB-wl-card.forest {
  top: 0;
  left: 4%;
  transform: rotate(-5deg);
}

.vB-wl-card.wine {
  z-index: 1;
  top: 70px;
  left: 42%;
  transform: rotate(3deg);
}

.vB-wl-card.night {
  top: 260px;
  left: 16%;
  transform: rotate(-2deg);
}

.vB-wl-card .hd {
  color: #f4efe7;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
}

.vB-wl-card.forest .hd {
  background: #0d3b2e;
}

.vB-wl-card.wine .hd {
  background: #6e2434;
}

.vB-wl-card.night .hd {
  background: #16222e;
}

.vB-wl-card .body {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 12px;
  display: grid;
}

.vB-wl-card .body div {
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #e2d3bd, #97785b) 50% 18% / cover no-repeat;
  border-radius: 5px;
}

.vB-wl-card.forest .body div:first-child {
  background-image: url("/landing6/wl-1.webp");
}

.vB-wl-card.forest .body div:nth-child(2) {
  background-image: url("/landing6/wl-2.webp");
}

.vB-wl-card.forest .body div:nth-child(3) {
  background-image: url("/landing6/wl-3.webp");
}

.vB-wl-card.forest .body div:nth-child(4) {
  background-image: url("/landing6/wl-4.webp");
}

.vB-wl-card.wine .body div:first-child {
  background-image: url("/landing6/wl-5.webp");
}

.vB-wl-card.wine .body div:nth-child(2) {
  background-image: url("/landing6/wl-6.webp");
}

.vB-wl-card.wine .body div:nth-child(3) {
  background-image: url("/landing6/wl-7.webp");
}

.vB-wl-card.wine .body div:nth-child(4) {
  background-image: url("/landing6/wl-8.webp");
}

.vB-wl-card.night .body div:first-child {
  background-image: url("/landing6/wl-9.webp");
}

.vB-wl-card.night .body div:nth-child(2) {
  background-image: url("/landing6/wl-10.webp");
}

.vB-wl-card.night .body div:nth-child(3) {
  background-image: url("/landing6/wl-11.webp");
}

.vB-wl-card.night .body div:nth-child(4) {
  background-image: url("/landing6/wl-12.webp");
}

.vB-wl-card .ft {
  border-top: 1px solid var(--line-2);
  letter-spacing: .06em;
  color: var(--ink-3);
  text-transform: uppercase;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  font-size: 10px;
  display: flex;
}

.vB-quotes-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0 80px;
  margin-top: 56px;
  display: grid;
}

.vB-quote {
  border-top: 1px solid var(--line);
  padding: 32px 0;
}

.vB-quote.lead {
  grid-row: span 2;
  padding-right: 20px;
}

.vB-quote p {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}

.vB-quote.lead p {
  font-family: var(--font-display);
  letter-spacing: -.015em;
  color: var(--ink);
  font-size: clamp(24px, 2.6vw, 34px);
  font-style: italic;
  line-height: 1.32;
}

.vB-quote-who {
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}

.vB-quote-who .av {
  color: #f4efe7;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.vB-quote-who .av.a {
  background: linear-gradient(135deg, #b8451f, #e0764a);
}

.vB-quote-who .av.b {
  background: linear-gradient(135deg, #2e5c8a, #5a8ab8);
}

.vB-quote-who .av.c {
  background: linear-gradient(135deg, #4a7c59, #7aa88b);
}

.vB-quote-who b {
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.vB-quote-who i {
  color: var(--ink-3);
  margin-top: 2px;
  font-size: 12.5px;
  font-style: normal;
  display: block;
}

.vB-faq {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 80px;
  padding-bottom: 80px;
  display: grid;
}

.vB-faq-list {
  border-bottom: 1px solid var(--line);
}

.vB-faq-item {
  border-top: 1px solid var(--line);
}

.vB-faq-item .head {
  text-align: left;
  cursor: pointer;
  align-items: baseline;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  display: flex;
}

.vB-faq-item .n {
  color: var(--accent-ink);
  flex: none;
  font-size: 12px;
}

.vB-faq-item .q {
  letter-spacing: -.02em;
  flex: 1;
  font-size: 17px;
  font-weight: 600;
}

.vB-faq-item .tog {
  flex: none;
  align-self: center;
  width: 14px;
  height: 14px;
  position: relative;
}

.vB-faq-item .tog:before, .vB-faq-item .tog:after {
  content: "";
  background: var(--ink-3);
  transition: transform .35s var(--ease);
  position: absolute;
}

.vB-faq-item .tog:before {
  height: 1.5px;
  top: 6.25px;
  left: 0;
  right: 0;
}

.vB-faq-item .tog:after {
  width: 1.5px;
  top: 0;
  bottom: 0;
  left: 6.25px;
}

.vB-faq-item.open .tog:after {
  transform: scaleY(0);
}

.vB-faq-item .a-wrap {
  transition: grid-template-rows .45s var(--ease);
  grid-template-rows: 0fr;
  display: grid;
}

.vB-faq-item.open .a-wrap {
  grid-template-rows: 1fr;
}

.vB-faq-item .a {
  color: var(--ink-2);
  max-width: 58ch;
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.65;
  overflow: hidden;
}

.vB-faq-item.open .a {
  padding-bottom: 24px;
}

.vB-form {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.vB-field {
  border: 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
}

.vB-field > span, .vB-field > legend {
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0;
  font-size: 12px;
}

.vB-field input, .vB-field select, .vB-field textarea {
  width: 100%;
  min-height: 48px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 16px;
  transition: border-color .2s;
}

.vB-field textarea {
  resize: vertical;
}

.vB-field input:focus, .vB-field select:focus, .vB-field textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.vB-field-row {
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 16px;
  display: grid;
}

.vB-field select {
  appearance: none;
  cursor: pointer;
}

.vB-pills {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.vB .vB-pills .vB-pill {
  border: 1px solid var(--line);
  height: 44px;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1;
  transition: border-color .2s, background .2s, color .2s;
  display: inline-flex;
}

.vB .vB-pills .vB-pill:hover {
  border-color: var(--ink-3);
}

.vB .vB-pills .vB-pill:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.vB .vB-pills .vB-pill:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.vB-consent {
  color: var(--ink-2);
  cursor: pointer;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
}

.vB-consent input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex: none;
  margin-top: 2px;
}

.vB-consent a {
  color: var(--accent-ink);
  text-underline-offset: 3px;
  text-decoration: underline;
}

.vB-field-error {
  color: var(--accent-ink);
  font-size: 13px;
}

.vB-cta {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding-top: 120px;
  padding-bottom: 120px;
}

.vB-cta-h {
  letter-spacing: -.05em;
  font-size: clamp(52px, 8.5vw, 128px);
  line-height: .96;
}

.vB-cta-h .stroke {
  color: #0000;
  -webkit-text-stroke: 2px var(--accent);
}

.vB-cta-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-top: 56px;
  display: flex;
}

.vB-cta-sub {
  color: var(--ink-2);
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.65;
}

.vB-cta-btns {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.vB-foot {
  border-top: 1px solid var(--line);
  padding-top: 72px;
  padding-bottom: 36px;
}

.vB-foot-top {
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 48px;
  display: grid;
}

.vB-foot-brand p {
  color: var(--ink-3);
  max-width: 30ch;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.vB.dark .vB-foot-brand img {
  filter: invert() hue-rotate(180deg) saturate(0);
}

.vB-foot-col {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.vB-foot-col h4 {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
}

.vB-foot-col a {
  color: var(--ink-2);
  cursor: pointer;
  font-size: 14px;
  transition: color .2s;
}

.vB-foot-col a:hover {
  color: var(--ink);
}

.vB-foot-bot {
  border-top: 1px solid var(--line-2);
  color: var(--ink-3);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 24px;
  font-size: 12px;
  display: flex;
}

@media (max-width: 1080px) {
  .vB > .vB-nav, .vB > .vB-hero, .vB > .vB-section, .vB > .vB-reco, .vB > .vB-cta, .vB > .vB-foot {
    padding-left: 32px;
    padding-right: 32px;
  }

  .vB-hero-grid, .vB-ch, .vB-reco-body {
    gap: 48px;
  }
}

@media (max-width: 900px) {
  .vB-nav-links, .vB-nav-cta .vB-btn.ghost, .vB-nav-cta .vB-btn.primary {
    display: none;
  }

  .vB-burger {
    display: flex;
  }

  .vB-hero-grid {
    grid-template-columns: 1fr;
  }

  .vB-hero-h {
    max-width: none;
  }

  .vB-hero-visual {
    width: 100%;
    max-width: 480px;
    height: 440px;
    margin: 0 auto;
  }

  .vB-hero-meta {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 56px;
  }

  .vB-ch {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 0;
  }

  .vB-ch-copy, .vB-ch.flip .vB-ch-copy {
    grid-area: 1 / 1;
  }

  .vB-ch-visual, .vB-ch.flip .vB-ch-visual {
    grid-area: 2 / 1;
  }

  .vB-ch-num, .vB-ch.flip .vB-ch-num {
    font-size: 110px;
    top: -10px;
    left: auto;
    right: -12px;
  }

  .vB-reco-body {
    flex-direction: column;
    gap: 0;
    display: flex;
  }

  .vB-reco-sticky {
    z-index: 5;
    order: -1;
    position: sticky;
    top: 70px;
  }

  .vB-reco-visual {
    padding: 14px;
    position: static;
  }

  .vB-reco-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .vB-reco-tile:nth-child(n+5) {
    display: none;
  }

  .vB-reco-panel {
    padding: 0 12px 4px;
    bottom: 14px;
    left: 14px;
    right: 14px;
  }

  .vB-reco-row {
    padding: 7px 0;
    font-size: 12.5px;
  }

  .vB-reco-row .av {
    width: 26px;
    height: 26px;
    font-size: 9.5px;
  }

  .vB-reco-row .thumbs {
    display: none;
  }

  .vB-reco-visual[data-step="4"] .vB-reco-panel {
    opacity: 0;
    transform: translateY(130%);
  }

  .vB-reco-notifs {
    inset: auto 14px 14px;
  }

  .vB-reco-visual[data-step="4"] .vB-reco-notifs .card {
    transform: none;
  }

  .vB-reco-notifs .card {
    transform: translateY(14px);
  }

  .vB-reco-step {
    min-height: 55vh;
  }

  .vB-reco-step:first-child {
    padding-top: 48px;
  }

  .vB-wl {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .vB-wl-cards {
    max-width: 480px;
    height: 460px;
  }

  .vB-quotes-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vB-quote.lead {
    grid-row: auto;
    padding-right: 0;
  }

  .vB-faq {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vB-foot-top {
    grid-template-columns: 1fr 1fr;
  }

  .vB-foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .vB > .vB-nav, .vB > .vB-hero, .vB > .vB-section, .vB > .vB-reco, .vB > .vB-cta, .vB > .vB-foot {
    padding-left: 20px;
    padding-right: 20px;
  }

  .vB-nav {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .vB-nav-spacer {
    height: 64px;
  }

  .vB-hero {
    padding-top: 40px;
  }

  .vB-hero-visual {
    height: 400px;
  }

  .vB-shot.back-2 {
    width: 190px;
    height: 250px;
    left: 0;
  }

  .vB-shot.back-1 {
    width: 200px;
    height: 260px;
    right: 0;
  }

  .vB-shot.front {
    width: 240px;
    height: 310px;
  }

  .vB-notif-toast {
    right: -4px;
  }

  .vB-section {
    padding-top: 80px;
  }

  .vB-reco {
    margin-top: 64px;
    padding-top: 80px;
  }

  .vB-wl-cards {
    height: 420px;
  }

  .vB-wl-card {
    width: 210px;
  }

  .vB-wl-card.wine {
    left: 38%;
  }

  .vB-cta {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .vB-cta-btns {
    width: 100%;
  }

  .vB-cta-btns .vB-btn {
    flex: 1;
    justify-content: center;
  }

  .vB-foot-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vB .reveal {
    opacity: 1;
    transition: none;
    transform: none;
  }

  .vB-marquee-track {
    flex-wrap: wrap;
    animation: none;
  }

  .vB-facebox, .vB-notif-toast, .vB-portal-grid .fav, .vB-phone-body .caret, .vB-ticket .scanline, .vB-reco-visual[data-step="0"] .vB-reco-tile:before {
    animation: none;
  }

  .vB-face, .vB-reco-panel, .vB-reco-notifs .card, .vB-reco-row, .vB-reco-grid, .vB-reco-progress span, .vB-faq-item .a-wrap, .vB-wl-card {
    transition: none;
  }
}

.vB-foot-bot a {
  color: inherit;
  text-decoration: none;
}

.vB-foot-bot a:hover {
  color: var(--ink);
}

.vB-blog-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 48px 0 40px;
  display: grid;
}

.vB-blog-card {
  color: inherit;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  display: flex;
}

.vB-blog-card img {
  aspect-ratio: 16 / 10;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 14px;
  width: 100%;
}

.vB-blog-card .meta {
  color: var(--ink-3);
  font-size: 12px;
}

.vB-blog-card .title {
  letter-spacing: -.02em;
  font-size: 20px;
  line-height: 1.25;
}

.vB-blog-card .excerpt {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.vB-blog-card:hover .title {
  color: var(--accent, var(--ink));
}

@media (max-width: 900px) {
  .vB-blog-grid {
    grid-template-columns: 1fr;
  }
}

.vB-burst {
  z-index: 2;
  letter-spacing: .04em;
  background: var(--accent);
  color: #fff;
  opacity: 0;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  transition: opacity .4s, transform .4s;
  position: absolute;
  bottom: 6px;
  left: 6px;
  transform: translateY(4px);
}

.vB-reco-tile {
  transition: opacity .5s, filter .5s;
}

.vB-reco-visual[data-step="1"] .vB-reco-tile:not(.keep) {
  opacity: .28;
  filter: grayscale(.8);
}

.vB-reco-visual[data-step="1"] .vB-burst {
  opacity: 1;
  transform: none;
}

.vB-feat {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
  padding-bottom: 60px;
  display: grid;
}

.vB-feat.flip .vB-feat-copy {
  order: 2;
}

.vB-feat-tags {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  display: flex;
}

.vB-feat-mock {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 22px;
  flex-direction: column;
  justify-self: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  padding: 18px;
  display: flex;
}

.vB-feat-mock .bar {
  color: var(--ink-3);
  justify-content: space-between;
  font-size: 11.5px;
  display: flex;
}

.vB-feat-mock .selfie {
  color: var(--ink);
  align-items: center;
  gap: 12px;
  font-size: 14px;
  display: flex;
}

.vB-feat-mock .selfie .av {
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 2px var(--accent);
  background: url("/landing6/reco-1.webp") 50% 32% / cover, linear-gradient(150deg, #e2d3bd, #97785b);
  border-radius: 50%;
  flex: none;
}

.vB-feat-mock .album {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  display: grid;
}

.vB-feat-mock .album i {
  aspect-ratio: 1;
  background: linear-gradient(150deg, #e2d3bd, #97785b) center / cover;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.vB-feat-mock .album i:first-child {
  background-image: url("/landing6/wl-1.webp");
}

.vB-feat-mock .album i:nth-child(2) {
  background-image: url("/landing6/wl-5.webp");
}

.vB-feat-mock .album i:nth-child(3) {
  background-image: url("/landing6/wl-9.webp");
}

.vB-feat-mock .album i:nth-child(4) {
  background-image: url("/landing6/wl-2.webp");
}

.vB-feat-mock .album i:nth-child(5) {
  background-image: url("/landing6/wl-6.webp");
}

.vB-feat-mock .album i:nth-child(6) {
  background-image: url("/landing6/wl-10.webp");
}

.vB-feat-mock .album i.wm:after {
  content: "prévia";
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ffffffd9;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  place-items: center;
  font-size: 10px;
  display: grid;
  position: absolute;
  inset: 0;
}

.vB-feat-mock .total {
  border-top: 1px solid var(--line);
  color: var(--ink);
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  font-size: 14px;
  display: flex;
}

.vB-feat-mock .total .pay {
  gap: 6px;
  display: flex;
}

.vB-feat-mock .msg {
  max-width: 85%;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.45;
}

.vB-feat-mock .msg.in {
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.vB-feat-mock .msg.out {
  background: var(--accent);
  color: #fff;
  border-color: #0000;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.vB-feat-mock .msg .who {
  opacity: .7;
  margin-bottom: 3px;
  font-size: 10.5px;
  display: block;
}

.vB-feat-mock .handoff {
  color: var(--ink-3);
  border: 1px dashed var(--line);
  border-radius: 999px;
  align-self: center;
  padding: 5px 12px;
  font-size: 11.5px;
}

@media (max-width: 1080px) {
  .vB-feat {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .vB-feat.flip .vB-feat-copy {
    order: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vB-reco-tile, .vB-burst {
    transition: none;
  }
}

.vB-doc {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 56px;
}

.vB-doc-card {
  color: #1a1714;
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
}

.vB-doc-card + .vB-doc-head, .vB-doc-text + .vB-doc-card {
  margin-top: 40px;
}

.vB-doc-mast {
  align-items: center;
  gap: 14px;
  display: flex;
}

.vB-doc-mast img {
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 136px;
  max-height: 44px;
}

.vB-doc-mast b {
  letter-spacing: -.01em;
  font-size: 18px;
  display: block;
}

.vB-doc-mast span, .vB-doc-foot {
  color: #9a9087;
  font-size: 10px;
  line-height: 1.6;
}

.vB-doc-rule {
  border-radius: 999px;
  height: 2px;
  margin-top: 16px;
}

.vB-doc-foot {
  text-align: right;
  border-top: 1px solid #ebe7e1;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-top: 8px;
  display: flex;
}

.vB-doc-foot img {
  -o-object-fit: contain;
  object-fit: contain;
  align-self: center;
  max-width: 96px;
  max-height: 28px;
}

.vB-doc-foot span {
  display: block;
}

.vB-doc-head {
  margin-bottom: 32px;
}

.vB-doc-head h1 {
  font-size: clamp(30px, 4vw, 40px);
}

.vB-doc-head p {
  color: var(--ink-3);
  margin-top: 10px;
  font-size: 13px;
}

.vB-doc-text {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
}

.vB-doc-text > * + * {
  margin-top: 10px;
}

.vB-doc-text h2 {
  color: var(--ink);
  letter-spacing: -.01em;
  padding-top: 18px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.vB-doc-text strong {
  color: var(--ink);
}

.vB-doc-text ul {
  padding-left: 22px;
  list-style: outside;
}

.vB-doc-text li + li {
  margin-top: 4px;
}

.vB-doc-text a {
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration: underline;
}

.vB-doc-text table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.vB-doc-text th {
  text-align: left;
  color: var(--ink);
  padding: 0 12px 8px 0;
  font-weight: 600;
}

.vB-doc-text td {
  border-top: 1px solid var(--line);
  vertical-align: top;
  padding: 8px 12px 8px 0;
}

.vB-doc-seal {
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 14px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  padding: 12px;
  font-size: 12px;
  display: flex;
}

.vB-doc-seal a {
  background: #fff;
  border-radius: 6px;
  flex: none;
  padding: 4px 6px;
}

.vB-doc-seal div {
  flex: 1;
  min-width: 0;
}

.vB-doc-links {
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  font-size: 14px;
  display: flex;
}

.vB-doc-links a {
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration: underline;
}

/*# sourceMappingURL=styles_landing-v6_1qqshhy.css.map*/