/* ══════════════════════════════════════════════════════
   VISUALAURA — Branding & Logo page
   Burgundy + muted-gold re-theme layered over the Website
   Design system (reuses wd-* sections + motion + flow styles).
   ══════════════════════════════════════════════════════ */

/* ── Burgundy / gold theme (scoped to body.br) ── */
body.br {
  --primary:   #6E1423;
  --primary-d: #54101b;
  --primary-l: #8a2433;
  --accent:    #C9A96E;
  --accent-l:  #e0c898;
  --border:    rgba(110,20,35,.14);
  --shadow-sm: 0 2px 12px rgba(110,20,35,.10);
  --shadow-md: 0 8px 32px rgba(110,20,35,.14);
  --shadow-lg: 0 20px 60px rgba(110,20,35,.18);
}
body.br .btn-primary { box-shadow: 0 4px 20px rgba(110,20,35,.34); }
body.br .btn-primary:hover { box-shadow: 0 8px 32px rgba(110,20,35,.45); }
body.br .section-badge { background: rgba(110,20,35,.07); border-color: rgba(110,20,35,.2); }

/* Re-theme the few hardcoded warm-brown gradients to burgundy */
body.br .wd-price-feat { background: linear-gradient(150deg, var(--primary), #480c15); }
body.br .wq-continue,
body.br .wq-success-btn.primary,
body.br .wqp-btn.primary,
body.br .wq-type.selected .wq-type-ic {
  background: linear-gradient(135deg, #8a2433, #6E1423 55%, #54101b);
}
body.br .wq-continue { box-shadow: 0 12px 32px rgba(110,20,35,.3); }
body.br .wq-success-btn.primary { box-shadow: 0 14px 34px rgba(110,20,35,.32); }
body.br .wqp-btn.primary { box-shadow: 0 12px 30px rgba(110,20,35,.3); }
body.br .wqp-feat { background: linear-gradient(160deg, #FFFDF9, #FBF1EF); border-color: rgba(201,169,110,.5); }
body.br .wd-hero-bg .o2 { background: radial-gradient(circle, rgba(110,20,35,.16), transparent 70%); }
body.br .wd-tf-after .wd-browser::after { box-shadow: 0 0 0 1px rgba(201,169,110,.5), 0 30px 70px rgba(110,20,35,.25); }
body.br .wd-why { background: radial-gradient(120% 80% at 50% 0%, #2a1418 0%, #2c161b 55%, #1b1012 100%); }
body.br .wd-stats { background: radial-gradient(120% 90% at 50% 0%, #2c161b, #1b1012); }

/* ══ HERO — floating logo showcase ══ */
.br-showcase {
  position: relative; margin: 70px auto 0; max-width: 920px;
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px);
  flex-wrap: nowrap;
}
.br-mark {
  flex: 0 0 auto; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--white); border: 1px solid var(--border); border-radius: 24px;
  box-shadow: var(--shadow-lg);
  opacity: 0; animation: brMarkIn 1s var(--ease) forwards;
}
@keyframes brMarkIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.br-mark .glyph {
  font-family: var(--font-head); color: var(--primary); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.br-mark .cap { font-family: var(--font-body); font-size: .54rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-l); }
.br-mark svg { color: var(--primary); }

/* sizes / float rhythm */
.br-mark.m1 { width: clamp(118px,15vw,168px); height: clamp(118px,15vw,168px); animation-delay: .15s, 1.4s; animation-name: brMarkIn, brFloatA; animation-duration: 1s, 7s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; }
.br-mark.m2 { width: clamp(150px,19vw,210px); height: clamp(150px,19vw,210px); animation-delay: .3s, 1.6s; animation-name: brMarkIn, brFloatB; animation-duration: 1s, 6s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; z-index: 2; }
.br-mark.m3 { width: clamp(118px,15vw,168px); height: clamp(118px,15vw,168px); animation-delay: .45s, 1.5s; animation-name: brMarkIn, brFloatC; animation-duration: 1s, 6.6s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; }
.br-mark.m4 { width: clamp(96px,12vw,136px); height: clamp(96px,12vw,136px); animation-delay: .6s, 1.7s; animation-name: brMarkIn, brFloatB; animation-duration: 1s, 7.4s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; }
.br-mark.m1 .glyph, .br-mark.m3 .glyph { font-size: clamp(2.6rem,5vw,3.6rem); font-style: italic; }
.br-mark.m2 .glyph { font-size: clamp(3.4rem,7vw,5rem); }
.br-mark.m4 .glyph svg { width: clamp(38px,6vw,54px); height: clamp(38px,6vw,54px); }
@keyframes brFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes brFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes brFloatC { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.br-mark.m2 .glyph small { font-size: .3em; font-style: normal; letter-spacing: .04em; vertical-align: super; }

@media (max-width: 720px) {
  .br-showcase { flex-wrap: wrap; gap: 16px; }
  .br-mark.m4 { display: none; }
}

/* ══ Brand presentation vignettes (horizontal showcase panels) ══ */
.brv {
  --bv1: #6E1423; --bv2: #C9A96E;
  background: #fff; border-radius: 14px; overflow: hidden; padding: 26px 26px 24px;
}
.brv.dark { background: #1d1416; }
.brv-logo {
  height: 150px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: radial-gradient(120% 120% at 30% 20%, var(--bv2) 0%, transparent 55%), linear-gradient(140deg, var(--bv1), #2b1116);
  position: relative;
}
.brv-logo .mono { font-family: var(--font-head); font-size: 2.8rem; color: #fff; font-style: italic; line-height: 1; }
.brv-logo .wm { font-family: var(--font-body); font-size: .54rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.brv-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.brv-palette { display: flex; gap: 6px; }
.brv-palette span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.06); }
.brv-card { margin-left: auto; width: 96px; height: 40px; border-radius: 7px; background: linear-gradient(135deg, var(--bv1), #2b1116); display: flex; align-items: center; justify-content: center; }
.brv-card .mini { font-family: var(--font-head); font-size: .9rem; color: #fff; font-style: italic; }
.brv.dark .brv-card { background: rgba(255,255,255,.07); }

/* "What You Receive" — number on dark feature cards */
.wd-feat .br-num { display: block; font-family: var(--font-head); font-size: 1.1rem; font-weight: 500; color: var(--accent-l); letter-spacing: .08em; margin-bottom: 16px; opacity: .9; }

/* ══ FAQ accordion ══ */
.br-faq-sec { background: var(--white); }
.br-faq { max-width: 760px; margin: 0 auto; }
.br-faq-item { border-bottom: 1px solid var(--border); }
.br-faq-item:first-child { border-top: 1px solid var(--border); }
.br-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 28px 6px; font-family: var(--font-head); font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 500; color: var(--text); letter-spacing: -.01em; transition: color .3s var(--ease);
}
.br-faq-q:hover { color: var(--primary); }
.br-faq-icon { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.br-faq-icon::before, .br-faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--primary); transition: transform .4s var(--ease); }
.br-faq-icon::before { width: 16px; height: 1.5px; transform: translate(-50%,-50%); }
.br-faq-icon::after { width: 1.5px; height: 16px; transform: translate(-50%,-50%); }
.br-faq-item.open .br-faq-icon::after { transform: translate(-50%,-50%) scaleY(0); }
.br-faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.br-faq-a p { font-family: var(--font-body); font-size: .96rem; font-weight: 300; line-height: 1.85; color: var(--text-m); padding: 0 6px 28px; max-width: 660px; }

/* ══ Flow: brand personality chips (multi-select in step 2) ══ */
.wq-pers { display: flex; flex-wrap: wrap; gap: 10px; }
.wq-pers button {
  font-family: var(--font-body); font-size: .82rem; font-weight: 500; color: var(--text-m);
  background: var(--white); border: 1.5px solid rgba(201,169,110,.3); border-radius: 50px;
  padding: 10px 20px; cursor: pointer; transition: all .3s var(--ease);
}
.wq-pers button:hover { border-color: var(--primary); color: var(--primary); }
.wq-pers button.selected { background: rgba(110,20,35,.06); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }