/* ───────────────────────────────────────────────────────────────
   BookReady marketing site
   Sharp, modern, friendly. Inter 400-800, cream + soft-pink accent,
   hairline grid borders, 0px radius everywhere. Mirrors the design
   language the team specified for the bookready.com / hostinger site.
   No build step. Vanilla CSS so Hostinger Git auto-pull deploys as-is.
   ─────────────────────────────────────────────────────────────── */

:root {
  --bg:        #F8F6F2;
  --card:      #FFFFFF;
  --text:      #121212;
  --muted:     #6B7280;
  --accent:    #E8C7DA;    /* friendly pink, used for badges + featured plan + final CTA */
  --border:    rgba(18,18,18,0.12);
  --font:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";   /* single-storey 'a', slab '1' — editorial Inter */
}

/* Signature italic punchline used inside headlines */
.br-italic {
  font-style: italic;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: -0.02em;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; }

/* ─── Top nav ─── */
.br-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.br-nav__inner {
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.br-nav__mark {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  flex-shrink: 0;
}

/* ── Hamburger (mobile only) ── */
.br-nav__hamburger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  margin-left: auto;
}
.br-nav__hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  /* Close direction (default state): rotate back first, then spread out.
     Using individual `translate` + `rotate` properties lets us stage them
     so the bars never form the brief "asterisk" that happens when
     translate and rotate interpolate together. */
  transition:
    rotate .18s ease,
    translate .18s ease .18s,
    opacity .12s ease .04s;
}
.br-nav.is-open .br-nav__hamburger span {
  /* Open direction: collapse to center first, then rotate to form the X */
  transition:
    translate .18s ease,
    rotate .18s ease .18s,
    opacity .12s ease;
}
.br-nav.is-open .br-nav__hamburger span:nth-child(1) {
  translate: 0 7px;
  rotate: 45deg;
}
.br-nav.is-open .br-nav__hamburger span:nth-child(2) {
  opacity: 0;
}
.br-nav.is-open .br-nav__hamburger span:nth-child(3) {
  translate: 0 -7px;
  rotate: -45deg;
}

/* Mobile-only quick Sign-in button sitting to the left of the hamburger */
.br-nav__signin-mobile { display: none; }

/* ── Menu container ── */
.br-nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: space-between;
}
.br-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.br-nav__item {
  position: relative;
}
.br-nav__trigger,
.br-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  transition: background .15s ease;
}
.br-nav__trigger:hover,
.br-nav__link:hover { background: rgba(18,18,18,0.05); }
.br-nav__chev { transition: transform .2s ease; }
.br-nav__trigger[aria-expanded="true"] { background: rgba(18,18,18,0.05); }
.br-nav__trigger[aria-expanded="true"] .br-nav__chev { transform: rotate(180deg); }

/* ── Mega panel (constrained card below nav, fades+slides in) ──
   Position absolute anchored to .br-nav (which is position:sticky).
   Centered horizontally via left:0 right:0 margin:auto + a max-width
   so it floats as a card instead of spanning the viewport. Animates
   in with opacity + translateY; visibility delays out so the element
   stays interactive until the fade completes. */
.br-megapanel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(1280px, calc(100% - 48px));
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(18,18,18,0.10), 0 4px 10px rgba(18,18,18,0.04);
  z-index: 40;

  /* default = closed */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  /* opacity is intentionally NOT transitioned. A backgrounded/throttled tab
     pauses transitions, which would otherwise leave an opened panel stuck at
     opacity:0 (the dropdown looks dead). Instant opacity guarantees the open
     panel is visible immediately; the transform slide is pure polish and
     degrades gracefully if it doesn't run. */
  transition:
    transform 180ms ease-out,
    visibility 0s linear 180ms;
}
.br-megapanel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    transform 180ms ease-out,
    visibility 0s linear 0s;
}
/* `hidden` is now just a SSR initial-state hint; the .is-open class
   drives all show/hide so transitions actually run. We override it
   when the panel is open so display:none doesn't kill the animation. */
.br-megapanel[hidden]:not(.is-open) { display: block; }
.br-megapanel__inner {
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
/* Templates panel is 2-col: Browse (narrow) + By business type (wide) */
.br-megapanel--two .br-megapanel__inner {
  grid-template-columns: 1fr 2fr;
}
.br-megapanel__col {
  display: flex;
  flex-direction: column;
}
.br-megapanel__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.br-megapanel__col a {
  display: block;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(18,18,18,0.06);
  transition: color .12s ease, padding-left .12s ease;
}
.br-megapanel__col a:hover {
  color: var(--accent);
  padding-left: 6px;
}
.br-megapanel__col a:last-child {
  border-bottom: none;
}
/* The wide "By business type" col on Templates uses 2 sub-columns
   so 6 items render side-by-side instead of as one tall list. */
.br-megapanel__col--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 36px;
}
.br-megapanel__col--split .br-megapanel__kicker {
  grid-column: 1 / -1;
}

/* ── Right-side actions ── */
.br-nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* Sign-in styled as the secondary CTA — outlined button, same vertical
   rhythm as Start-free, so it's never missed against the dark filled CTA. */
.br-nav__signin {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 18px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.br-nav__signin:hover {
  background: var(--text);
  color: var(--bg);
  transform: translateY(-1px);
}
.br-nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 18px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 800;
  transition: background .15s ease, color .15s ease;
}
.br-nav__cta:hover {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

/* ── Mobile breakpoint ── */
@media (max-width: 960px) {
  .br-nav__inner { padding: 12px 18px; }

  /* Quick Log-in mobile link sits between the logo and the hamburger so
     it's a single tap for returning users. Plain text, no chrome, generous
     touch target via padding + height. */
  .br-nav__signin-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 6px;
    margin-left: auto;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: opacity .15s ease;
  }
  .br-nav__signin-mobile:active { opacity: 0.55; }
  /* Negative margin compensates for the .br-nav__inner flex gap (24px) so
     the Log-in text and the hamburger sit visually close instead of pushed
     apart by the parent's default spacing rule. */
  .br-nav__hamburger {
    display: flex;
    margin-left: -20px;
  }

  /* Drawer Log-in: plain text, no border, no chrome. Centered + same
     height as Start-free so they read as a stacked pair. Hierarchy:
     Start-free is the only filled CTA in the drawer; Log-in is just
     text below it. */
  .br-nav__signin {
    width: 100%;
    justify-content: center;
    padding: 14px;
    min-height: 52px;
    font-size: 15px;
    border: none;
    background: transparent;
  }
  .br-nav__signin:hover {
    background: transparent;
    color: var(--text);
    transform: none;
  }

  .br-nav__menu {
    position: fixed;
    top: 64px;
    left: 0; right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 24px 22px 32px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
    overflow-y: auto;
    z-index: 25;
  }
  .br-nav.is-open .br-nav__menu {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .br-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--border);
  }
  .br-nav__item {
    border-bottom: 1px solid var(--border);
  }
  .br-nav__trigger,
  .br-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 18px 4px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .br-nav__trigger:hover,
  .br-nav__link:hover { background: transparent; }
  .br-nav__trigger[aria-expanded="true"] { background: transparent; }

  /* Mega panels flatten into inline accordion sections inside the
     mobile drawer. Animation is dropped on mobile — drawer is already
     an animated container; nested fades feel laggy on touch. */
  .br-megapanel {
    position: static;
    width: 100%;
    max-width: none;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0 0 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
    display: none;
  }
  .br-megapanel.is-open { display: block; }
  .br-megapanel[hidden]:not(.is-open) { display: none; }
  .br-megapanel__inner,
  .br-megapanel--two .br-megapanel__inner {
    padding: 16px 0 0;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .br-megapanel__col,
  .br-megapanel__col--split {
    display: flex !important;
    flex-direction: column !important;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 16px;
  }
  .br-megapanel__kicker {
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 8px;
  }
  .br-megapanel__col a {
    padding: 12px 4px;
    border-bottom: 1px solid rgba(18,18,18,0.06);
  }
  .br-megapanel__col a:hover { padding-left: 4px; }

  .br-nav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  /* .br-nav__signin (drawer Log-in) — overrides moved to the earlier mobile
     block (above) so width/justify/min-height land in one place. */
  .br-nav__cta {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 15px;
  }
}

/* ─── Buttons (shared) ─── */
.br-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 24px;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: 0;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.br-button:hover {
  background: transparent;
  color: var(--text);
  transform: translateY(-1px);
}
.br-button--inverse {
  background: var(--text);
  color: #FFFFFF;
  border-color: var(--text);
}
.br-button--inverse:hover {
  background: transparent;
  color: var(--text);
}
.br-text-link {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ─── Hero ─── */
.br-hero {
  width: 100%;
  padding: 80px 24px 64px;
}
.br-hero__inner {
  width: min(1360px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.br-hero__visual {
  width: 100%;
  aspect-ratio: 1600 / 686;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(18,18,18,0.10), 0 6px 16px rgba(18,18,18,0.06);
  transform: rotate(3deg);
  box-shadow: 0 48px 96px rgba(18,18,18,0.22), 0 16px 36px rgba(18,18,18,0.14), 0 4px 10px rgba(18,18,18,0.08);
}
.br-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.br-hero__copy { min-width: 0; }
.br-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.br-hero__title {
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.065em;
  font-weight: 800;
  margin: 0 0 24px;
  color: var(--text);
}
.br-hero__intro {
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  margin: 0;
}
.br-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}
.br-hero__fine {
  margin: 22px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.br-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: var(--accent);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Customer dashboard section ─── */
.br-customers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}
@media (min-width: 960px) {
  .br-customers { grid-template-columns: 1.15fr 1fr; gap: 72px; }
}
.br-customers__copy { min-width: 0; }
.br-customers__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.br-customers__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}
.br-customers__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
}
.br-customers__list li strong {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* The mock customer card */
.br-customers__card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(18,18,18,0.10), 0 6px 16px rgba(18,18,18,0.06);
  width: 100%;
  max-width: 480px;
  align-self: start;
  justify-self: center;
}
.br-customers__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}
.br-customers__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.br-customers__name {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.br-customers__sub {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.br-customers__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
.br-customers__tag {
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text);
}
.br-customers__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}
.br-customers__stats > div {
  padding: 14px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.br-customers__stats > div:last-child { border-right: none; }
.br-customers__stat-label {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.br-customers__stat-value {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.br-customers__notes {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.br-customers__notes-label {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.br-customers__notes-body {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  font-style: italic;
}
.br-customers__birthday {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--accent);
}
.br-customers__birthday-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.br-customers__birthday-icon svg { width: 18px; height: 18px; }
.br-customers__birthday p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.br-customers__birthday strong { font-weight: 800; }

/* ─── Migration: "Replaces" pill row ─── */
.br-migration__replaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0 6px;
}
.br-migration__replaces-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.br-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ─── Founder note section ─── */
.br-founder {
  max-width: 760px;
  margin: 0 auto;
}
.br-founder__copy .br-section__title {
  margin-bottom: 24px;
}
.br-founder__lede {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 24px;
  font-weight: 500;
}
.br-founder__lede em {
  font-style: italic;
  font-weight: 600;
}
.br-founder__body {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 20px;
}
.br-founder__closer {
  margin: 32px 0 0;
  padding: 22px 24px;
  background: var(--accent);
  color: var(--text);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.br-founder__closer strong {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
/* ── Interactive hero demo (niche switcher + live site preview) ── */
.br-hero__demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.br-demo__controls {
  width: 100%;
  max-width: 420px;
}
.br-demo__label {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.br-demo__name {
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.br-demo__name:focus {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}
.br-demo__niches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.br-demo__niche {
  padding: 9px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.br-demo__niche:hover { background: rgba(18,18,18,0.05); }
.br-demo__niche.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Live preview — styled as a sharp browser window so it reads as
   "your real website," not a rounded phone (0px radius house style). */
.br-preview {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(18,18,18,0.12), 0 6px 16px rgba(18,18,18,0.06);
}
.br-preview__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #F1EFEA;
  border-bottom: 1px solid var(--border);
}
.br-preview__dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.br-preview__dots i {
  width: 9px; height: 9px;
  background: rgba(18,18,18,0.18);
  border-radius: 999px;
}
.br-preview__url {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.br-preview__screen {
  background: var(--pv-screen-bg, #16140F);
  color: var(--pv-screen-text, #F4EFE7);
  transition: opacity .15s ease;
}
.br-preview__screen.is-swapping { opacity: 0.25; }
.br-preview__cover {
  background: var(--pv-accent, #C8A15A);
  color: var(--pv-accent-text, #161310);
  padding: 24px 20px 22px;
}
.br-preview__kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 10px;
}
.br-preview__name {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 800;
  word-break: break-word;
}
.br-preview__tagline {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0.72;
}
.br-preview__menu { padding: 6px 20px; }
.br-preview__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--pv-line, rgba(244,239,231,0.12));
}
.br-preview__row:last-child { border-bottom: none; }
.br-preview__svc {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.br-preview__price {
  font-size: 14px;
  font-weight: 800;
  color: var(--pv-muted, rgba(244,239,231,0.55));
  flex-shrink: 0;
}
.br-preview__cta {
  margin: 8px 20px 22px;
  padding: 14px;
  text-align: center;
  background: var(--pv-accent, #C8A15A);
  color: var(--pv-accent-text, #161310);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.br-preview__tpl {
  margin: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.br-preview__tpl strong { color: var(--text); font-weight: 800; }
.br-demo__live {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.br-demo__live:hover { color: var(--accent); }

@media (max-width: 900px) {
  .br-hero { padding: 56px 22px 48px; }
  .br-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .br-hero__visual {
    max-width: 460px;
    margin: 0 auto;
    transform: rotate(1deg);
  }
}

/* ─── Live site iframe frame ─── */
.br-site-frame {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 20px 56px rgba(18,18,18,0.10), 0 4px 14px rgba(18,18,18,0.05);
}
@media (max-width: 960px) {
  .br-site-frame { max-width: none; }
}
.br-site-frame__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #F1EFEA;
  border-bottom: 1px solid var(--border);
}
.br-site-frame__dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.br-site-frame__dots i {
  width: 9px; height: 9px;
  background: rgba(18,18,18,0.18);
  border-radius: 999px;
}
.br-site-frame__url {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.br-site-frame__viewport {
  height: 580px;
  overflow: hidden;
  position: relative;
}
.br-site-frame__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.br-site-frame__caption {
  padding: 11px 14px;
  margin: 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.br-site-frame__caption a {
  color: var(--text);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Trust strip ─── */
.br-trust {
  width: 100%;
  padding: 32px 24px;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.br-trust__inner {
  width: min(1360px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.br-trust__label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.br-trust__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  flex: 1;
  justify-content: flex-end;
}
.br-trust__items li {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  opacity: 0.7;
}
@media (max-width: 720px) {
  .br-trust__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .br-trust__items { justify-content: flex-start; gap: 20px; }
  .br-trust__items li { font-size: 13px; }
}

/* ─── Section foot link ─── */
.br-section__foot {
  margin-top: 36px;
  text-align: center;
}
.br-section__foot a {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-underline-offset: 5px;
  color: var(--text);
}
.br-section__foot a:hover { color: var(--accent); }

/* ─── How it works (steps) ─── */
.br-steps {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
@media (min-width: 820px) {
  .br-steps { grid-template-columns: repeat(3, 1fr); }
}
.br-step {
  background: var(--card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.br-step__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.br-step__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.br-step__num {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--text);
  color: var(--bg);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.br-step h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.br-step p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ─── Testimonials ─── */
.br-testimonials {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
@media (min-width: 820px) {
  .br-testimonials { grid-template-columns: repeat(3, 1fr); }
}
.br-testimonial {
  background: var(--card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: space-between;
}
.br-testimonial__quote {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text);
}
.br-testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.br-testimonial__author img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 999px; /* portraits look better round; nothing else is round here */
  flex-shrink: 0;
}
.br-testimonial__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 999px;
}
.br-testimonial__author > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.br-testimonial__name {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.br-testimonial__role {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ─── Section shell ─── */
.br-section {
  width: 100%;
  padding: 96px 20px;
}
.br-section--bordered {
  border-top: 1px solid var(--border);
}
.br-section__inner {
  width: min(1360px, 100%);
  margin: 0 auto;
}
.br-section__head {
  max-width: 880px;
  margin-bottom: 56px;
}
.br-section__title {
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.06em;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--text);
}
.br-section__intro {
  color: var(--muted);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  margin: 0;
  max-width: 720px;
}

/* ─── Shared kicker ─── */
.br-kicker {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.br-kicker--inverse { color: rgba(18,18,18,0.7); }

/* ─── Templates ─── */
.br-template-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
@media (min-width: 820px) {
  .br-template-grid { grid-template-columns: repeat(3, 1fr); }
}
.br-template-card {
  background: var(--card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.br-template-card__preview {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg);
  text-decoration: none;
}
.br-template-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.br-template-card__preview:hover img {
  transform: scale(1.04);
}
.br-template-card__overlay {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.br-template-card__preview:hover .br-template-card__overlay {
  opacity: 1;
  transform: none;
}
.br-template-card__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 4px 0 0;
}
.br-template-card h3 {
  font-size: 26px;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-weight: 800;
  margin: 0;
}
.br-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 10px;
  background: var(--accent);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  vertical-align: middle;
}
.br-template-card__text {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Coming-next strip below the template grid */
.br-template-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--card);
  border: 1px solid var(--border);
}
.br-template-next__copy {
  min-width: 0;
  flex: 1;
}
.br-template-next__copy .br-kicker {
  margin-bottom: 10px;
}
.br-template-next__title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--text);
}
.br-template-next__text {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 540px;
}
.br-template-next .br-button { flex-shrink: 0; }
@media (max-width: 720px) {
  .br-template-next {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
  }
  .br-template-next .br-button { width: 100%; }
}

/* Centered "View all templates" CTA below the homepage template grid */
.br-template-viewmore {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
@media (max-width: 720px) {
  .br-template-viewmore .br-button { width: 100%; text-align: center; justify-content: center; }
}

/* ─── Pricing ─── */
.br-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
@media (min-width: 820px) {
  .br-pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.br-plan {
  position: relative;
  min-height: 540px;
  padding: 32px 28px;
  background: var(--card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.br-plan--featured { background: var(--accent); }
.br-plan__badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--text);
  color: #FFFFFF;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.br-plan__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.br-plan--featured .br-plan__label { color: rgba(18,18,18,0.72); }
.br-plan h3 {
  font-size: 28px;
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0 0 22px;
}
.br-plan__price {
  /* This sizes the "$" (a bare text node). Kept smaller than the number
     so the price reads number-first. */
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0 0 14px;
}
/* The number lives in a span for the live-price JS, so without this rule
   it would inherit the small, muted ".br-plan__price span" treatment meant
   for the "/mo" suffix. Make it the big, full-strength focal point. */
.br-plan__price [data-price-m],
.br-plan__price [data-price-a] {
  font-size: clamp(58px, 7vw, 92px);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: var(--text);
  margin-left: 2px;
}
.br-plan--featured .br-plan__price [data-price-m],
.br-plan--featured .br-plan__price [data-price-a] {
  color: var(--text);
}
.br-plan__price span {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--muted);
  margin-left: 6px;
}
.br-plan--featured .br-plan__price span { color: rgba(18,18,18,0.6); }
.br-plan__sms {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding: 8px 12px;
  background: var(--bg);
  align-self: flex-start;
}
.br-plan--featured .br-plan__sms { background: #FFFFFF; }
.br-plan__text {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 22px;
}
.br-plan--featured .br-plan__text { color: rgba(18,18,18,0.78); }
.br-plan__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.br-plan__list li {
  padding-left: 24px;
  position: relative;
  line-height: 1.45;
}
.br-plan__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}
.br-plan__button {
  width: 100%;
  margin-top: auto;
}

/* Per-plan SMS multiplier toggle (inside card, above SMS line) */
.br-sms-toggle {
  display: inline-flex;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  align-self: flex-start;
}
.br-plan--featured .br-sms-toggle { background: rgba(255,255,255,0.5); border-color: rgba(18,18,18,0.18); }
.br-sms-toggle__btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.br-sms-toggle__btn + .br-sms-toggle__btn { border-left: 1px solid var(--border); }
.br-plan--featured .br-sms-toggle__btn + .br-sms-toggle__btn { border-left-color: rgba(18,18,18,0.18); }
.br-sms-toggle__btn:hover { color: var(--text); }
.br-sms-toggle__btn.is-active { background: var(--text); color: var(--bg); }

/* "Coming soon" tag inside feature bullet */
.br-plan__soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--accent);
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Salon Coming-Soon badge replaces "Most Popular" position */
.br-plan__badge--soon {
  background: var(--accent);
  color: var(--text);
}
.br-plan--soon {
  position: relative;
}
.br-plan--soon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.25;
  pointer-events: none;
}
.br-plan--soon > * { position: relative; }

/* Salon waitlist mini-form (replaces CTA button) */
.br-plan__waitlist { margin-top: auto; }
.br-plan__waitlist-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.br-plan__waitlist-form { display: flex; flex-direction: column; gap: 8px; }
.br-plan__waitlist-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s ease;
}
.br-plan__waitlist-input:focus { border-color: var(--text); }
.br-plan__waitlist-success {
  margin: 0;
  padding: 12px 14px;
  background: var(--accent);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.br-plan__waitlist-success[hidden] { display: none; }

/* ─── SMS calculator ─── */
.br-sms-calc {
  margin-top: 32px;
  background: var(--card);
  border: 1px solid var(--border);
}
.br-sms-calc__head {
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.br-sms-calc__head .br-kicker { display: inline-flex; justify-content: center; }
.br-sms-calc__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 8px;
}
.br-sms-calc__sub {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.br-sms-calc__body {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .br-sms-calc__body { grid-template-columns: 1.2fr 1fr; }
}
.br-sms-calc__inputs {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 820px) {
  .br-sms-calc__inputs { border-bottom: none; border-right: 1px solid var(--border); }
}
.br-sms-calc__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.br-sms-calc__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.br-sms-calc__field > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.br-sms-calc__field input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  border-radius: 0;
  transition: border-color .15s ease;
}
.br-sms-calc__field input[type="number"]:focus { border-color: var(--text); }
.br-sms-calc__notifs {
  border: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.br-sms-calc__notifs legend {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  padding: 0;
}
.br-sms-calc__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.br-sms-calc__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--text);
  flex-shrink: 0;
  cursor: pointer;
}
.br-sms-calc__check strong { font-weight: 800; letter-spacing: -0.01em; }

.br-sms-calc__output {
  padding: 28px 32px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.br-sms-calc__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.br-sms-calc__total {
  margin: 0;
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
  color: var(--text);
}
.br-sms-calc__total strong { font-weight: 800; }
.br-sms-calc__rec {
  margin: 4px 0 0;
  padding: 12px 14px;
  background: var(--accent);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  align-self: flex-start;
}
.br-sms-calc__fine {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.br-plan-foot {
  margin: 36px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  max-width: 720px;
  padding: 0 20px;
}

/* ─── Feature marquee — moving showcase ─── */
.br-section__head--center {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.br-section__head--center .br-kicker {
  display: inline-flex;
  justify-content: center;
}
.br-section--marquee .br-section__inner { padding-bottom: 0; }

.br-marquee {
  margin-top: 56px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.br-marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: brMarquee 60s linear infinite;
  will-change: transform;
}
.br-marquee:hover .br-marquee__track { animation-play-state: paused; }
.br-marquee__card {
  flex-shrink: 0;
  width: 280px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .2s ease, transform .2s ease;
}
.br-marquee__card:hover { background: var(--bg); transform: translateY(-2px); }
.br-marquee__icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  margin-bottom: 14px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.br-marquee__icon svg { width: 18px; height: 18px; display: block; }
.br-marquee__card:hover .br-marquee__icon {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(-3deg);
}
.br-marquee__card h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 4px;
}
.br-marquee__card p {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

@keyframes brMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .br-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .br-marquee__track { animation: none; }
}


/* ─── FAQ ─── */
.br-faq {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
@media (min-width: 820px) {
  .br-faq { grid-template-columns: repeat(2, 1fr); }
}
.br-faq__item {
  background: var(--card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 22px;
}
.br-faq__item summary {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.br-faq__item summary::-webkit-details-marker { display: none; }
.br-faq__item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.br-faq__item[open] summary::after { content: "−"; }
.br-faq__item p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}

/* ─── Final CTA ─── */
.br-final-cta {
  background: var(--accent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 96px 20px;
}
.br-final-cta__inner {
  width: min(1360px, 100%);
  margin: 0 auto;
  max-width: 860px;
}
.br-final-cta__title {
  font-size: clamp(40px, 6.5vw, 78px);
  line-height: 0.95;
  letter-spacing: -0.065em;
  font-weight: 800;
  margin: 0 0 20px;
  color: var(--text);
}
.br-final-cta__text {
  font-size: clamp(16px, 1.8vw, 19px);
  color: rgba(18,18,18,0.78);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 620px;
}

/* ─── Footer ─── */
.br-footer {
  background: var(--bg);
  padding: 64px 20px 32px;
}
.br-footer__inner {
  width: min(1360px, 100%);
  margin: 0 auto;
}
.br-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 640px) {
  .br-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .br-footer__grid { grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; }
}
.br-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.br-footer__cta {
  margin-top: 14px;
  display: inline-flex;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.br-footer__cta:hover { text-decoration-thickness: 2px; }
.br-footer__mark {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0;
}
.br-footer__tag {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 320px;
}
.br-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.br-footer__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.br-footer__col a {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.85;
}
.br-footer__col a:hover { opacity: 1; }
.br-footer__bottom-row {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
@media (min-width: 720px) {
  .br-footer__bottom-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}
.br-footer__bottom {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.br-footer__legal {
  margin: 0;
  display: flex;
  gap: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.br-footer__legal a {
  color: var(--muted);
  opacity: 0.85;
  text-decoration: none;
}
.br-footer__legal a:hover { color: var(--text); opacity: 1; }

/* ─── Demo booking flow ─── */
.br-demoflow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 960px) {
  .br-demoflow { grid-template-columns: 1fr; gap: 48px; }
}
.br-demoflow__bullets {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.br-demoflow__bullets li {
  font-size: 15px;
  font-weight: 700;
  padding-left: 22px;
  position: relative;
  line-height: 1.45;
  color: var(--text);
}
.br-demoflow__bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  font-weight: 800;
}

/* Booking card */
.br-booking {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 20px 56px rgba(18,18,18,0.10), 0 4px 14px rgba(18,18,18,0.05);
  width: 100%;
  max-width: 420px;
}
@media (max-width: 960px) {
  .br-booking { max-width: none; }
}
.br-booking__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--text);
  color: var(--bg);
}
.br-booking__biz {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.br-booking__steps-bar {
  display: flex;
  gap: 6px;
  align-items: center;
}
.br-booking__pip {
  width: 22px;
  height: 3px;
  background: rgba(248,246,242,0.22);
}
.br-booking__pip.is-active { background: rgba(248,246,242,0.72); }
.br-booking__pip.is-done { background: var(--accent); }

/* Panel shell */
.br-booking__panel { padding: 20px; }
.br-booking__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

/* Service list */
.br-booking__services {
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  margin-bottom: 16px;
}
.br-booking__svc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s ease;
}
.br-booking__svc:hover { background: var(--bg); }
.br-booking__svc.is-selected { background: var(--text); color: var(--bg); }
.br-booking__svc-name { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.br-booking__svc-meta { font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.br-booking__svc.is-selected .br-booking__svc-meta { color: rgba(248,246,242,0.55); }

/* Day tabs */
.br-booking__days {
  display: flex;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  margin-bottom: 10px;
}
.br-booking__day {
  flex: 1;
  padding: 13px 4px;
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .12s ease;
}
.br-booking__day:hover { background: var(--bg); }
.br-booking__day.is-selected { background: var(--text); color: var(--bg); }

/* Time grid */
.br-booking__times {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  margin-bottom: 16px;
}
.br-booking__time {
  padding: 13px 6px;
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s ease;
}
.br-booking__time:hover { background: var(--bg); }
.br-booking__time.is-selected { background: var(--text); color: var(--bg); font-weight: 800; }

/* Next / CTA */
.br-booking__next { width: 100%; justify-content: center; }

/* Confirm panel */
.br-booking__panel--confirm { padding: 0; }
.br-booking__confirm {
  padding: 28px 20px 24px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.br-booking__check {
  width: 42px; height: 42px;
  background: var(--accent);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 14px;
}
.br-booking__confirm-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 16px;
}
.br-booking__confirm-details { display: flex; flex-direction: column; gap: 4px; }
.br-booking__confirm-svc { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.br-booking__confirm-time,
.br-booking__confirm-biz { font-size: 13px; font-weight: 600; color: var(--muted); }

/* SMS notification — deliberately rounded to mimic iOS notification */
.br-sms {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease;
}
.br-sms.is-visible { opacity: 1; transform: none; }
.br-sms__device {
  background: #EEECEA;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
.br-sms__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 4px;
}
.br-sms__app { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #333; }
.br-sms__now { font-size: 11px; font-weight: 600; color: #888; }
.br-sms__bubble { padding: 2px 14px 12px; }
.br-sms__from { margin: 0 0 2px; font-size: 13px; font-weight: 800; color: #111; }
.br-sms__text { margin: 0; font-size: 13px; font-weight: 500; color: #444; line-height: 1.45; }
.br-sms__caption {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Restart */
.br-booking__restart {
  display: block;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .15s ease;
}
.br-booking__restart:hover { color: var(--text); }

/* ─── Billing toggle ─── */
.br-billing-toggle {
  display: flex;
  width: fit-content;
  margin: 0 auto 44px;
  border: 1px solid var(--border);
}
.br-billing-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--card);
  border: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.br-billing-opt + .br-billing-opt { border-left: 1px solid var(--border); }
.br-billing-opt.is-active { background: var(--text); color: var(--bg); }
.br-billing-opt:not(.is-active):hover { background: var(--bg); color: var(--text); }
.br-billing-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--accent);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.br-billing-opt.is-active .br-billing-badge {
  background: rgba(232,199,218,0.28);
  color: rgba(248,246,242,0.9);
}

/* Show/hide monthly vs annual price — driven by data-billing on #pricing */
[data-billing="monthly"] .br-price-a,
[data-billing="monthly"] .br-period-a { display: none; }
[data-billing="annual"] .br-price-m,
[data-billing="annual"] .br-period-m { display: none; }

/* Founding-member pricing note — sits between the billing toggle and the grid */
.br-founder-note {
  max-width: 640px;
  margin: 0 auto 30px;
  padding: 12px 20px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--accent);
  border: 1px solid var(--border);
}
.br-founder-note strong { font-weight: 800; }
.br-plan__period {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin: -6px 0 14px;
  letter-spacing: 0.02em;
}
.br-plan--featured .br-plan__period { color: rgba(18,18,18,0.6); }

/* ─── Risk-reversal row ─── */
.br-risk-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-top: none;
  background: var(--card);
}
.br-risk-row__item {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.br-risk-row__sep {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

/* ─── Migration section ─── */
.br-migration__head {
  max-width: 780px;
  margin-bottom: 56px;
}
.br-migration__note {
  margin: 20px 0 0;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.6;
}
.br-migration__note a {
  color: var(--text);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.br-migration__steps {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  margin-bottom: 48px;
}
@media (min-width: 820px) {
  .br-migration__steps { grid-template-columns: repeat(3, 1fr); }
}
.br-migration__step {
  background: var(--card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 24px;
}
.br-migration__num {
  display: block;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 16px;
}
.br-migration__step h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 10px;
}
.br-migration__step p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.br-migration__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.br-migration__fine {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ─── Exit-intent modal ─── */
.br-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18,18,18,0.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s ease;
}
.br-modal-overlay.is-open {
  opacity: 1;
}
.br-modal-overlay[hidden] {
  display: none;
}
.br-modal {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 32px 80px rgba(18,18,18,0.22), 0 8px 24px rgba(18,18,18,0.10);
  width: 100%;
  max-width: 480px;
  transform: translateY(14px);
  transition: transform .28s ease;
}
.br-modal-overlay.is-open .br-modal {
  transform: none;
}
.br-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, border-color .15s ease;
  z-index: 1;
}
.br-modal__close:hover { color: var(--text); border-color: var(--text); }
.br-modal__accent {
  height: 6px;
  background: var(--accent);
}
.br-modal__body {
  padding: 32px 32px 28px;
}
.br-modal__title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--text);
}
.br-modal__text {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 24px;
}
.br-modal__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.br-modal__input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.br-modal__input:focus {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}
.br-modal__submit { width: 100%; justify-content: center; }
.br-modal__success {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--accent);
  text-align: center;
}
.br-modal__success[hidden] { display: none; }
.br-modal__fine {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.03em;
}
@media (max-width: 540px) {
  .br-modal__body { padding: 24px 20px 20px; }
}

/* ─── Velvet Theory booking demo ─── */
/* Faithfully replicated from web/templates/velvettheory/
   Gold #C9A876, burgundy #2D0F19, bone #F5EFE6 — all radii 0 except
   step circles (999px) and time slot pills (999px). Fraunces serif
   for display text, Inter for UI. */

.br-vt {
  width: 100%;
  max-width: 420px;
  background: #2D0F19;
  border: 1px solid rgba(201,168,118,0.22);
  box-shadow: 0 32px 80px rgba(18,18,18,0.32), 0 8px 24px rgba(18,18,18,0.18);
}
@media (max-width: 960px) { .br-vt { max-width: none; } }
.br-vt__announce {
  padding: 9px 20px;
  background: rgba(201,168,118,0.08);
  border-bottom: 1px solid rgba(201,168,118,0.16);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,239,230,0.58); text-align: center;
}
.br-vt__header {
  padding: 20px 20px 14px;
  border-bottom: 1px solid rgba(201,168,118,0.16);
}
.br-vt__biz {
  display: block;
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 26px; font-weight: 400; letter-spacing: -0.014em; line-height: 1.1;
  color: #F5EFE6; margin: 0 0 4px;
}
.br-vt__biz-sub {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,239,230,0.45);
}
.br-vt__progress {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(245,239,230,0.08);
}
.br-vt__progress-track { display: flex; align-items: center; margin-bottom: 10px; }
.br-vt__step-node {
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid rgba(245,239,230,0.18);
  color: rgba(245,239,230,0.28);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.br-vt__step-node.is-active { background: #C9A876; border-color: #C9A876; color: #2D0F19; }
.br-vt__step-node.is-done  { background: transparent; border-color: #C9A876; color: #C9A876; }
.br-vt__step-line {
  flex: 1; height: 1px;
  background: rgba(245,239,230,0.14);
  transition: background .25s ease;
}
.br-vt__step-line.is-done { background: #C9A876; }
.br-vt__progress-caption {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,239,230,0.48); margin: 0;
}
.br-vt__panel { animation: vtFade .3s ease both; }
@keyframes vtFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.br-vt__step-label {
  display: block;
  padding: 14px 20px 12px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(245,239,230,0.48);
  border-bottom: 1px solid rgba(245,239,230,0.08);
  margin: 0;
}

/* Service cards */
.br-vt__svc-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.br-vt__svc-card {
  padding: 16px;
  border: 1px solid rgba(201,168,118,0.22);
  border-left: 2px solid #C9A876;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.br-vt__svc-card:hover { background: rgba(201,168,118,0.05); border-color: rgba(201,168,118,0.45); border-left-color: #C9A876; }
.br-vt__svc-card.is-selected { background: rgba(201,168,118,0.10); border-color: #C9A876; }
.br-vt__svc-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
}
.br-vt__svc-name { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: #F5EFE6; margin: 0; }
.br-vt__svc-price { font-size: 14px; font-weight: 600; color: #C9A876; flex-shrink: 0; }
.br-vt__svc-desc { font-size: 13px; color: rgba(245,239,230,0.55); line-height: 1.5; margin: 0 0 10px; }
.br-vt__svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.br-vt__svc-meta { font-size: 12px; color: rgba(245,239,230,0.42); }
.br-vt__svc-pick {
  background: transparent;
  border: 1px solid #C9A876; border-radius: 999px;
  color: #C9A876; font-family: var(--font);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 14px; cursor: pointer;
  pointer-events: none;
  transition: background .15s ease;
}
.br-vt__svc-card:hover .br-vt__svc-pick { background: rgba(201,168,118,0.12); }

/* Staff */
.br-vt__staff-list { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.br-vt__staff-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(201,168,118,0.20);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.br-vt__staff-card:hover { border-color: #C9A876; }
.br-vt__staff-card.is-selected { border-color: #C9A876; background: rgba(201,168,118,0.08); }
.br-vt__staff-radio {
  width: 18px; height: 18px;
  border: 1.5px solid rgba(245,239,230,0.26); border-radius: 999px;
  flex-shrink: 0; position: relative;
  transition: border-color .12s ease;
}
.br-vt__staff-card.is-selected .br-vt__staff-radio { border-color: #C9A876; }
.br-vt__staff-card.is-selected .br-vt__staff-radio::after {
  content: ''; position: absolute; inset: 3px;
  background: #C9A876; border-radius: 999px;
}
.br-vt__staff-name { font-size: 14px; font-weight: 600; color: #F5EFE6; margin: 0 0 2px; }
.br-vt__staff-role { font-size: 12px; color: rgba(245,239,230,0.42); margin: 0; }

/* Calendar */
.br-vt__calendar { padding: 14px 16px; border-bottom: 1px solid rgba(245,239,230,0.08); }
.br-vt__cal-header { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.br-vt__cal-month {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #F5EFE6;
}
.br-vt__cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px;
}
.br-vt__cal-dow span {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(245,239,230,0.36); text-align: center; padding: 3px 0;
}
.br-vt__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.br-vt__cal-day, .br-vt__cal-empty {
  aspect-ratio: 1; min-height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  border: 1px solid rgba(201,168,118,0.12); border-radius: 6px;
  background: transparent; color: rgba(245,239,230,0.70);
  cursor: pointer; padding: 0; font-family: var(--font);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.br-vt__cal-empty { border-color: transparent; cursor: default; }
.br-vt__cal-day--unavail {
  color: rgba(245,239,230,0.16); cursor: not-allowed;
  border-color: rgba(201,168,118,0.05);
}
.br-vt__cal-day:not(.br-vt__cal-day--unavail):hover { border-color: #C9A876; color: #F5EFE6; }
.br-vt__cal-day.is-selected { background: #C9A876; border-color: #C9A876; color: #2D0F19; font-weight: 600; }

/* Time slots — pill shaped */
.br-vt__slots { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(245,239,230,0.08); }
.br-vt__slot {
  padding: 10px 16px;
  background: rgba(201,168,118,0.06);
  border: 1px solid rgba(201,168,118,0.22); border-radius: 999px;
  color: rgba(245,239,230,0.65);
  font-family: var(--font); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.br-vt__slot--unavail {
  color: rgba(245,239,230,0.20); cursor: not-allowed;
  border-color: rgba(201,168,118,0.06); background: transparent;
  text-decoration: line-through;
}
.br-vt__slot:not(.br-vt__slot--unavail):hover { border-color: #C9A876; color: #F5EFE6; }
.br-vt__slot.is-selected { background: #C9A876; border-color: #C9A876; color: #2D0F19; font-weight: 600; }

/* Panel footer */
.br-vt__panel-foot { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.br-vt__btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 15px;
  background: #C9A876; color: #2D0F19;
  border: 1px solid #C9A876; border-radius: 0;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; transition: opacity .15s ease;
}
.br-vt__btn-primary:hover { opacity: .86; }
.br-vt__btn-primary:disabled { opacity: .35; cursor: default; }
.br-vt__btn-ghost {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px;
  background: transparent; color: rgba(245,239,230,0.52);
  border: 1px solid rgba(245,239,230,0.16); border-radius: 0;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.br-vt__btn-ghost:hover { border-color: rgba(245,239,230,0.32); color: rgba(245,239,230,0.80); }

/* Newsletter intro (step 4) */
.br-vt__newsletter-intro {
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(245,239,230,0.08);
}
.br-vt__newsletter-heading {
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  color: #C9A876; margin: 0 0 6px;
}
.br-vt__newsletter-sub {
  font-size: 13px; font-weight: 400;
  color: rgba(245,239,230,0.52); line-height: 1.5; margin: 0;
}

/* Form (step 4) */
.br-vt__form { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.br-vt__field { display: flex; flex-direction: column; gap: 5px; }
.br-vt__field-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,239,230,0.40);
}
.br-vt__input {
  width: 100%; padding: 12px 14px;
  background: rgba(245,239,230,0.06);
  border: 1px solid rgba(201,168,118,0.28); border-radius: 0;
  color: #F5EFE6; font-family: var(--font);
  font-size: 14px; font-weight: 400;
  outline: none; box-sizing: border-box;
  transition: border-color .15s ease;
}
.br-vt__input::placeholder { color: rgba(245,239,230,0.20); }
.br-vt__input:focus { border-color: #C9A876; }
.br-vt__consent-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px 0; cursor: pointer;
}
.br-vt__checkbox {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid rgba(245,239,230,0.26);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease;
}
.br-vt__checkbox.is-checked { background: #C9A876; border-color: #C9A876; }
.br-vt__checkbox.is-checked::after { content: '\2713'; font-size: 11px; font-weight: 800; color: #2D0F19; }
.br-vt__consent-text { font-size: 12px; font-weight: 400; color: rgba(245,239,230,0.46); line-height: 1.55; }

/* Confirmation (step 5) */
.br-vt__confirm {
  padding: 32px 20px 24px; text-align: center;
  border-bottom: 1px solid rgba(245,239,230,0.08);
}
.br-vt__confirm-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(245,239,230,0.46); margin: 0 0 12px;
}
.br-vt__confirm-title {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 26px; font-weight: 400; letter-spacing: -0.014em; line-height: 1.1;
  color: #F5EFE6; margin: 0 0 16px;
}
.br-vt__confirm-details { display: flex; flex-direction: column; gap: 5px; }
.br-vt__confirm-row { font-size: 14px; font-weight: 400; color: rgba(245,239,230,0.62); }
.br-vt__confirm-row span { color: #F5EFE6; font-weight: 600; }
.br-vt__cta-block {
  padding: 22px 20px;
  background: var(--bg);
  border-top: 2px solid #C9A876;
}
.br-vt__cta-kicker {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px;
}
.br-vt__cta-heading { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--text); margin: 0 0 6px; }
.br-vt__cta-sub { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.br-vt__cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 22px;
  background: var(--text); color: var(--bg);
  border: 1px solid var(--text); text-decoration: none;
  font-family: var(--font); font-size: 14px; font-weight: 800; letter-spacing: 0.02em;
  transition: background .15s ease, color .15s ease;
}
.br-vt__cta-btn:hover { background: transparent; color: var(--text); }
.br-vt__restart-link {
  display: block; width: 100%; padding: 13px;
  background: transparent; border: none;
  border-top: 1px solid rgba(245,239,230,0.08);
  color: rgba(245,239,230,0.26); font-family: var(--font);
  font-size: 12px; font-weight: 600; text-align: center;
  cursor: pointer; letter-spacing: 0.04em;
  transition: color .15s ease;
}
.br-vt__restart-link:hover { color: rgba(245,239,230,0.54); }
.br-vt__template-tag { margin: 12px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.01em; }
.br-vt__template-tag strong { color: var(--text); font-weight: 800; }

/* ─── Tablet / mobile breakpoints (shared trims) ─── */
@media (max-width: 1024px) {
  .br-section, .br-hero, .br-final-cta { padding-left: 20px; padding-right: 20px; }
  .br-hero { padding-top: 72px; padding-bottom: 48px; }
  .br-section { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 767px) {
  .br-hero { padding-top: 56px; padding-bottom: 40px; }
  .br-section { padding-top: 56px; padding-bottom: 56px; }
  .br-final-cta { padding-top: 64px; padding-bottom: 64px; }
  .br-hero__actions { flex-direction: column; align-items: stretch; }
  .br-hero__actions .br-button,
  .br-hero__actions .br-text-link {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .br-plan { min-height: auto; padding: 28px 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   Depth & motion (added) — elevation, hover-lift, nav scroll shadow.
   Keeps the 0px-radius / hairline identity; adds dimension within it.
   ═══════════════════════════════════════════════════════════════ */

/* Sticky nav lifts off the page once scrolled */
.br-nav { transition: box-shadow .2s ease; }
.br-nav.is-scrolled { box-shadow: 0 6px 22px rgba(18,18,18,0.08); }

/* Hairline grids read as elevated blocks */
.br-template-grid,
.br-steps,
.br-pricing-grid,
.br-testimonials {
  box-shadow: 0 14px 34px rgba(18,18,18,0.05);
}

/* Cards rise on hover (z-index so the shadow sits over neighbours) */
.br-template-card,
.br-plan,
.br-step,
.br-testimonial {
  transition: transform .2s ease, box-shadow .2s ease;
}
.br-template-card:hover,
.br-plan:hover,
.br-step:hover,
.br-testimonial:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(18,18,18,0.13);
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .br-template-card,
  .br-plan,
  .br-step,
  .br-testimonial { transition: none; }
  .br-template-card:hover,
  .br-plan:hover,
  .br-step:hover,
  .br-testimonial:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Rich mega-menus — icon + title + description on each item,
   plus a featured template tile in the Templates panel.
   Selectors nested under .br-megapanel__col to win specificity over
   the existing bare-link rules above.
   ═══════════════════════════════════════════════════════════════ */

/* Each menu item is now a small icon + title + one-line description */
.br-megapanel__col .br-megalink {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(18,18,18,0.06);
  color: var(--text);
  text-decoration: none;
  transition: padding-left .14s ease;
}
.br-megapanel__col .br-megalink:hover {
  padding-left: 6px;
  color: var(--text);
}
.br-megapanel__col .br-megalink:last-child { border-bottom: none; }

.br-megalink__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.br-megalink__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.25;
}
.br-megalink__desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}

/* Coming-soon megalink: dimmed, non-interactive, with an inline pill */
.br-megalink--coming { cursor: default; opacity: 0.55; pointer-events: none; }
.br-megalink__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--accent);
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  border-radius: 999px;
}

/* Templates panel: 3 columns with a featured tile in column 3 */
.br-megapanel--templates .br-megapanel__inner {
  grid-template-columns: 0.85fr 1.25fr 0.9fr;
}
/* Industries panel: 2 trade columns + 1 featured tile */
.br-megapanel--industries .br-megapanel__inner {
  grid-template-columns: 1fr 1fr 0.9fr;
}

/* Featured tile */
.br-megafeat {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.br-megafeat:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(18,18,18,0.13);
  border-color: rgba(18,18,18,0.22);
}
.br-megafeat__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.br-megafeat__copy { padding: 14px 16px 16px; }
.br-megafeat__label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.br-megafeat__name {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--text);
}
.br-megafeat__cta {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Platform panel: 4 outcome columns */
.br-megapanel[id="br-mega-platform"] .br-megapanel__inner {
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/* Mobile: drawer flattens panels — megalink keeps its row layout,
   featured tile becomes a full-width block. */
@media (max-width: 960px) {
  .br-megapanel--templates .br-megapanel__inner,
  .br-megapanel--industries .br-megapanel__inner,
  .br-megapanel[id="br-mega-platform"] .br-megapanel__inner { grid-template-columns: 1fr; gap: 18px; }
  .br-megapanel__col .br-megalink {
    padding: 12px 4px;
  }
  .br-megapanel__col .br-megalink:hover { padding-left: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .br-megapanel__col .br-megalink,
  .br-megafeat { transition: none; }
  .br-megafeat:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Section rhythm — a white "prose" section between the cream
   blocks, giving long-form text its own visual register.
   ═══════════════════════════════════════════════════════════════ */
.br-section--white { background: #FFFFFF; }

/* ═══════════════════════════════════════════════════════════════
   Scroll-reveal — gentle fade-up for sections entering the
   viewport. Class is applied by nav.js ONLY to elements below the
   initial viewport, so above-fold content never flashes.
   ═══════════════════════════════════════════════════════════════ */
/* Hide is intentionally instant (no transition on .br-reveal). The
   reveal animation is defined on .is-visible, so when nav.js adds the
   reveal class to an already-rendered element the opacity snaps to 0
   immediately instead of fading 1→0 (which would freeze in throttled
   tabs and leave the section stuck mid-fade). */
.br-reveal {
  opacity: 0;
  transform: translateY(14px);
}
.br-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease-out, transform .55s ease-out;
  will-change: opacity, transform;
}