/*
 * Colla landing — unified Apple-style surface layer
 * Loaded after the legacy inline styles so every page mode shares one visual grammar.
 */

:root {
  --ink: #1c1613;
  --fg: #1c1613;
  --brand-ink: #1c1613;
  --slate: #424245;
  --sub: #515154;
  --muted: #6e6e73;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #e8e8ed;
  --bg: #ffffff;
  --alt: #f5f5f7;
  --frost: #ffffff;
  --mist: #f5f5f7;
  --mist2: #e8e8ed;
  --line: rgba(28, 22, 19, 0.1);
  --border: rgba(28, 22, 19, 0.1);
  --rule: rgba(28, 22, 19, 0.1);
  --hot-pink: #ec5a98;
  --deep-pink: #c83e79;
  --soft-pink: #f7b8d2;
  --pale-pink: #fff5fa;
  --accent: var(--deep-pink);
  --accent-soft: rgba(236, 90, 152, 0.12);
  --lime: #ddf238;
  /* Lime is invisible as text on white (1.4:1) — only ever a fill under --ink,
     or text on a dark surface. --lime-wash is its safe tint for light panels. */
  --lime-wash: #f7fce0;
  --lime-line: rgba(221, 242, 56, 0.55);
  --red: var(--deep-pink);
  --red-deep: #a82e64;
  --pink: var(--soft-pink);
  --pink-soft: var(--pale-pink);
  --pink-panel: var(--soft-pink);
  --ok: #f5f5f7;
  --ok-text: #1c1613;
  --info: #f5f5f7;
  --info-text: #1c1613;
  --warn: #fff5fa;
  --warn-text: #c83e79;
  --danger: #ffeef3;
  --danger-text: #c14e6b;
  --ok-border: rgba(28, 22, 19, 0.08);
  --info-border: rgba(28, 22, 19, 0.08);
  --warn-border: rgba(200, 62, 121, 0.18);
  --danger-border: rgba(229, 101, 138, 0.18);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.06);
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --sec-y: 120px;
  --sec-y-md: 104px;
  --sec-y-sm: 80px;
  --max: 1120px;
}

html {
  background: var(--surface);
  color-scheme: light;
}

body {
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.section-title,
.va-h1,
.bsa-title,
.bfx-title {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.035em;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

p,
li {
  word-break: keep-all;
  text-wrap: pretty;
}

a,
button,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Header */
.site-header-stack {
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid rgba(28, 22, 19, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
}

.site-header-stack.scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
}

.nav-inner {
  max-width: 1180px;
  min-height: 68px;
  padding: 12px 24px;
}

.logo-img {
  height: 22px;
}

.tab-toggle {
  gap: 2px;
  padding: 4px;
  border: 0;
  background: var(--surface-2);
  box-shadow: none;
}

.tab-btn {
  padding: 9px 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tab-btn.active,
.nav-seg-btn.active {
  background: var(--ink);
  color: var(--lime);
  box-shadow: none;
}

.lang-btn.lang-chip,
.nav-burger {
  border: 0;
  background: var(--surface-2);
  box-shadow: none;
}

.lang-btn.lang-chip {
  color: var(--sub);
  font-weight: 700;
}

.nav-burger {
  border-radius: 12px;
}

.nav-burger span {
  background: var(--ink);
}

/* Global section rhythm and hierarchy */
.container {
  max-width: var(--max);
}

.section {
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}

.section.alt,
#bgCreatorFounding,
#creatorFounding,
#creatorEarlyBird,
#creatorEarlyBirdPro,
#crFaqSection,
#crFaqSectionPro,
#bBrandFaq {
  background: var(--surface-2) !important;
}

.section-label,
.hero-copy .eyebrow,
.bg-center-hero .eyebrow,
.hero-a .va-eyebrow {
  color: var(--deep-pink) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase;
}

/* "· FOR BRANDS" is the secondary half of the eyebrow — it must stay quieter
   than the label it trails, or the pair reads as one flat string. */
.hero-a .va-eyebrow .va-eyebrow-en {
  color: var(--muted) !important;
}

.section-title {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  color: var(--ink);
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 1.08;
}

.section-title em,
.hero-copy h1 em,
.fc-hero-title em {
  color: inherit !important;
  font-style: normal;
  background: none !important;
}

.section-sub,
.section-copy,
.bsa-intro-note {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  color: var(--sub);
  font-size: 17px;
  line-height: 1.65;
}

/* Creator heroes */
.hero-shell {
  background: var(--surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line);
}

.hero-shell::before,
.hero-shell::after {
  display: none !important;
}

.hero-shell-compact {
  min-height: 0;
  padding-top: 116px !important;
  padding-bottom: 104px !important;
}

.hero-shell-compact .container {
  max-width: 920px;
}

.hero-copy {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-copy h1 {
  max-width: 12ch;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--ink) !important;
  font-size: clamp(50px, 6vw, 76px) !important;
  font-weight: 700 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
}

.hero-hook-q,
.hero-sub {
  color: var(--sub) !important;
}

.hero-fee-note {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: 18px 20px;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--pale-pink) !important;
  box-shadow: none !important;
}

.hero-fee-badge {
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-fee-line {
  color: var(--sub) !important;
}

.hero-oc-strip {
  max-width: 520px;
  border: 0;
  border-radius: 24px;
  background: var(--pale-pink);
  box-shadow: none;
}

.hero-oc-before {
  background: transparent;
  color: #98989d;
}

.hero-oc-after {
  background: transparent;
  color: var(--deep-pink);
}

.bg-ch-cta-wrap {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.bg-ch-pain-input,
.bg-ch-email-input,
.hero-wl-band-input,
.brand-gate-input,
.brand-gate-textarea {
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.bg-ch-pain-input:focus,
.bg-ch-email-input:focus,
.hero-wl-band-input:focus,
.brand-gate-input:focus,
.brand-gate-textarea:focus {
  border-color: var(--ink) !important;
  outline: none !important;
}

.bg-ch-email-submit,
.bg-ch-main-btn,
.hero-wl-band-btn,
.hero-wl-feat-btn,
.fc-wl-btn,
.fc-wl-submit,
.btn-primary,
.btn-submit,
.btn-red,
.brand-gate-btn,
.drawer-cta,
.tips-cta,
.pc-cta,
.bpr-cta {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: var(--lime) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}

.bg-ch-email-submit:hover,
.bg-ch-main-btn:hover,
.hero-wl-band-btn:hover,
.fc-wl-btn:hover,
.btn-primary:hover,
.btn-submit:hover,
.btn-red:hover,
.brand-gate-btn:hover,
.drawer-cta:hover,
.tips-cta:hover,
.pc-cta:hover,
.bpr-cta:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

/* Brand hero — editorial accent stays inside the product mock only. */
.hero-a {
  padding: 116px 5vw 108px;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line);
}

.hero-a .hero-a-wrap {
  max-width: 1120px;
  /* Copy column gets a bit more room so the H1's second line
     ("현지 크리에이터부터 시작하세요") stays on one line. */
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
}

/* The brand hero's own <style> block sits AFTER this stylesheet's <link>, so
   equal-specificity rules here lose to it. Anything scoped .hero-a needs
   !important to land — without it this whole block was dead and the headline
   rendered at the inline 52px instead of the intended scale. */
.hero-a .va-h1 {
  max-width: none;
  color: var(--ink) !important;
  font-size: clamp(36px, 3.4vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.032em !important;
}

.hero-a .va-sub {
  color: var(--sub);
}

.hero-a .va-val {
  border-bottom-color: var(--line);
}

.hero-a .va-values {
  border-top-color: var(--line);
}

.hero-a .va-val-num,
.hero-a .kpi-num .u,
.hero-a .kpi-sub {
  color: var(--deep-pink);
}

.hero-a .va-visual {
  padding: 42px 36px;
  border-radius: 32px;
  background: var(--soft-pink);
}

.hero-a .va-visual::after {
  display: none;
}

.hero-a .mock-card,
.hero-a .kpi {
  border: 1px solid rgba(28, 22, 19, 0.07);
  border-radius: 20px;
  box-shadow: none;
}

/* Feature navigation */
.bfx-nav {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  gap: 8px !important;
}

.bfx-nav a,
.bfx-nav button {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Long feature showcases: no gray shells — white base, whitespace rhythm. */
#brandPainSection,
#bgPainSolutionSection,
#crPainSolutionSection {
  background: var(--surface) !important;
}

#brandPainSection .bfx-grid,
#bgPainSolutionSection .bsa-rows,
#crPainSolutionSection .bsa-rows {
  gap: 128px !important;
  margin-top: 88px;
}

#brandPainSection .bfx-grid {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

#brandPainSection .bfx-card,
#bgPainSolutionSection .bsa-set,
#crPainSolutionSection .bsa-set {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#brandPainSection .bfx-card {
  max-width: 900px;
}

/* Each feature reads like the trend/matching sections below it:
   problem chip → title → one-line explainer → animated visual. */
#brandPainSection .bfx-card {
  gap: 0;
}

#brandPainSection .b-xtra-badge {
  order: -4;
  margin-bottom: 12px;
}

#brandPainSection .bfx-pain {
  order: -3;
  margin-bottom: 18px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

#brandPainSection .bfx-title {
  order: -2;
  max-width: 18ch;
  margin: 0 0 14px !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
}

#brandPainSection .bfx-note {
  order: -1;
  max-width: 560px;
  margin: 0 0 44px !important;
  color: var(--sub) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  text-align: center;
}

@media (max-width: 720px) {
  #brandPainSection .bfx-title {
    font-size: 26px !important;
  }

  #brandPainSection .bfx-note {
    margin-bottom: 30px !important;
    font-size: 15px !important;
  }
}

/* Creator/beginner features tell the same story in the same order as the
   brand tab: problem chip → title → one-line explainer → animated visual.
   The markup nests those pieces inside .bsa-before / .bsa-after wrappers in
   a different order, so flatten the wrappers and sequence the pieces. */
#bgPainSolutionSection .bsa-row,
#crPainSolutionSection .bsa-row,
#bgPainSolutionSection .bsa-before,
#crPainSolutionSection .bsa-before,
#bgPainSolutionSection .bsa-after,
#crPainSolutionSection .bsa-after {
  display: contents !important;
}

#bgPainSolutionSection .bsa-set,
#crPainSolutionSection .bsa-set {
  gap: 0 !important;
}

#bgPainSolutionSection .bsa-before .bsa-title,
#crPainSolutionSection .bsa-before .bsa-title {
  order: -3;
  margin-bottom: 18px !important;
  border: 0 !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

#bgPainSolutionSection .bsa-set-hdr,
#crPainSolutionSection .bsa-set-hdr {
  order: -2;
  margin-bottom: 14px !important;
}

#bgPainSolutionSection .bsa-set-name,
#crPainSolutionSection .bsa-set-name {
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
}

/* The explainer copy was in the markup but rendered display:none, so every
   feature showed a bare title over a mock with nothing telling you why. */
#bgPainSolutionSection .bsa-after .bsa-desc,
#crPainSolutionSection .bsa-after .bsa-desc {
  display: block !important;
  order: -1;
  max-width: 560px;
  margin: 0 auto 44px !important;
  color: var(--sub) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  text-align: center;
}

#bgPainSolutionSection .bsa-after .bsa-visual,
#crPainSolutionSection .bsa-after .bsa-visual {
  order: 0;
}

#bgPainSolutionSection .bsa-result,
#crPainSolutionSection .bsa-result {
  order: 1;
  margin-top: 24px !important;
}

@media (max-width: 720px) {
  #bgPainSolutionSection .bsa-set-name,
  #crPainSolutionSection .bsa-set-name {
    font-size: 26px !important;
  }

  #bgPainSolutionSection .bsa-after .bsa-desc,
  #crPainSolutionSection .bsa-after .bsa-desc {
    margin-bottom: 30px !important;
    font-size: 15px !important;
  }
}

#bgPainSolutionSection .bsa-before,
#crPainSolutionSection .bsa-before {
  max-width: 520px;
  padding: 18px 22px !important;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

#bgPainSolutionSection .bsa-after,
#crPainSolutionSection .bsa-after {
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
}

#bgPainSolutionSection .bsa-after .bsa-title,
#crPainSolutionSection .bsa-after .bsa-title {
  color: var(--ink);
  font-weight: 700;
}

#bgPainSolutionSection .bsa-result,
#crPainSolutionSection .bsa-result {
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.bsa-set-name,
.bfx-pain,
.bfx-note {
  color: var(--muted) !important;
}

.bsa-set-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* Shared panels and cards */
.rds-card,
.fc-card,
.fc-quest,
.pricing-card,
.s-step,
.cs-card,
.b-global-card,
.bagent-camp-card,
.bagent-popup-card,
.bagent-guide-card,
.b-wl-offer-card,
.brand-gate-modal,
.tips-featured-link {
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  background: #ffffff;
  box-shadow: none !important;
}

.fc-card-hero,
.fc-wl-btn,
.b-wl-offer-card.featured {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: #ffffff !important;
}

.fc-card-hero .fc-hero-title,
.fc-card-hero .fc-hero-title em {
  color: #ffffff !important;
}

.fc-badge,
.mock-badge,
.tips-featured-badge,
.dl-tips-badge,
.bfh-mt-tag.ref {
  border: 0 !important;
  background: var(--lime) !important;
  color: var(--ink) !important;
}

.rds-chip,
.hero-wl-feat-chip,
.bfh-mt-tag,
.cs-card-badge {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.hero-wl-feat-chip.selected {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: var(--lime) !important;
}

.bfh-mt-mock,
.rfh-panel-detail,
.rfh-contract-preview,
.cps-rate-card,
.cps-mini-mock,
.cps-nego-chat,
.cps-script-mock,
.cps-insight-mini,
.bfm-cond-mock,
.fds-demo-shell,
.cim-wrap {
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
}

/* Remove the remaining off-brand lavender/sky treatments. */
.fc-card-hero,
.fc-wl-btn {
  background-image: none !important;
}

.bfh-mt-tag.ref,
.fdct-row.ct3,
.bp-track-row.early {
  border-color: rgba(236, 90, 152, 0.2) !important;
  background: var(--pale-pink) !important;
  color: var(--ink) !important;
}

.aq-progress-fill,
.bfh-mt-scan-fill,
.bsa-vm-bar-fill {
  background: var(--ink) !important;
  box-shadow: none !important;
}

/* FAQ, forms and overlays */
.faq-item,
.s-faq-item,
.bfq-item,
.brand-faq-item {
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.drawer {
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: -18px 0 60px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.drawer-tab,
.drawer-seg-wrap,
.drawer-link-tips {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.drawer-tab.active {
  background: var(--ink) !important;
  color: #ffffff !important;
}

/* Bottom actions */
.sticky-cta-bar {
  border-top: 0;
  background: rgba(28, 22, 19, 0.96) !important;
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.sticky-cta-text,
.sticky-cta-text strong {
  color: rgba(255, 255, 255, 0.72) !important;
}

.sticky-cta-btn {
  border: 0 !important;
  background: var(--lime) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.chat-fab {
  background: var(--ink) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
}

.chat-fab::before {
  content: "";
  width: 18px;
  height: 14px;
  border: 2px solid var(--lime);
  border-radius: 50%;
}

.chat-fab::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  margin: 12px 0 0 -12px;
  border-left: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: skew(-18deg);
}

/* Dark mode keeps the same hierarchy instead of introducing new colors. */
[data-theme="dark"] {
  --ink: #f5f5f7;
  --fg: #f5f5f7;
  --slate: #d1d1d6;
  --sub: #a1a1a6;
  --muted: #86868b;
  --surface: #000000;
  --surface-2: #1c1c1e;
  --surface-3: #2c2c2e;
  --bg: #000000;
  --alt: #1c1c1e;
  --line: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}

[data-theme="dark"] body,
[data-theme="dark"] .section,
[data-theme="dark"] .hero-shell,
[data-theme="dark"] .hero-a,
[data-theme="dark"] #brandPainSection,
[data-theme="dark"] #bgPainSolutionSection,
[data-theme="dark"] #crPainSolutionSection {
  background: #000000 !important;
}

[data-theme="dark"] .site-header-stack {
  background: rgba(0, 0, 0, 0.82) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .tab-toggle,
[data-theme="dark"] .lang-btn.lang-chip,
[data-theme="dark"] .nav-burger,
[data-theme="dark"] .hero-fee-note,
[data-theme="dark"] .hero-oc-strip,
[data-theme="dark"] .drawer-tab,
[data-theme="dark"] .drawer-seg-wrap,
[data-theme="dark"] .drawer-link-tips {
  background: #1c1c1e !important;
}

[data-theme="dark"] .hero-fee-badge,
[data-theme="dark"] .bg-ch-pain-input,
[data-theme="dark"] .bg-ch-email-input,
[data-theme="dark"] .brand-gate-input,
[data-theme="dark"] .brand-gate-textarea,
[data-theme="dark"] .rds-card,
[data-theme="dark"] .fc-card,
[data-theme="dark"] .fc-quest,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .s-step,
[data-theme="dark"] .cs-card,
[data-theme="dark"] .b-global-card,
[data-theme="dark"] .b-wl-offer-card,
[data-theme="dark"] .bfh-mt-mock,
[data-theme="dark"] .cps-rate-card,
[data-theme="dark"] .cps-mini-mock,
[data-theme="dark"] .cps-nego-chat,
[data-theme="dark"] .cps-script-mock,
[data-theme="dark"] .cps-insight-mini,
[data-theme="dark"] .bfm-cond-mock,
[data-theme="dark"] .fds-demo-shell,
[data-theme="dark"] .cim-wrap {
  background: #1c1c1e !important;
  color: #f5f5f7 !important;
}

[data-theme="dark"] .drawer {
  background: rgba(28, 28, 30, 0.96);
}

@media (max-width: 700px) {
  :root {
    --page-x: 20px;
    --sec-y: 80px;
    --sec-y-md: 72px;
    --sec-y-sm: 64px;
  }

  .nav-inner {
    min-height: 64px;
    padding: 10px 14px;
    gap: 10px;
  }

  .nav-right {
    gap: 7px;
  }

  .mode-toggle .mode-btn:not(.active) {
    display: none;
  }

  .tab-toggle {
    padding: 3px;
  }

  .tab-btn {
    padding: 8px 11px;
    font-size: 11px;
  }

  .lang-btn.lang-chip {
    min-width: 38px;
    padding: 8px 9px;
  }

  .nav-burger {
    width: 38px;
    height: 36px;
  }

  .section {
    padding-top: var(--sec-y) !important;
    padding-bottom: var(--sec-y) !important;
  }

  .section-title {
    max-width: 12ch;
    margin-bottom: 18px;
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.1;
  }

  .section-sub,
  .section-copy,
  .bsa-intro-note {
    font-size: 15px;
    line-height: 1.6;
  }

  .hero-shell-compact {
    padding-top: 72px !important;
    padding-bottom: 68px !important;
  }

  .hero-copy h1 {
    max-width: 10ch;
    font-size: clamp(38px, 11.5vw, 50px) !important;
    line-height: 1.06 !important;
  }

  .hero-sub {
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-fee-note {
    padding: 16px;
    border-radius: 18px !important;
  }

  .hero-oc-strip {
    margin-top: 28px;
    border-radius: 20px;
  }

  .hero-oc-item {
    font-size: 12px;
  }

  .hero-oc-before,
  .hero-oc-after {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .hero-a {
    padding: 72px 20px 76px;
  }

  .hero-a .hero-a-wrap {
    gap: 44px;
  }

  .hero-a .va-h1 {
    max-width: 10ch;
    font-size: clamp(38px, 11vw, 48px);
    line-height: 1.05;
  }

  .hero-a .va-hook {
    font-size: 15px;
  }

  .hero-a .va-sub {
    font-size: 15px;
  }

  .hero-a .va-val {
    gap: 12px;
    padding: 16px 0;
  }

  .hero-a .va-val-t {
    font-size: 15px;
  }

  .hero-a .va-val-d {
    font-size: 13px;
  }

  .hero-a .va-visual {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .bfx-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 32px;
  }

  .bfx-nav a,
  .bfx-nav button {
    min-width: 0;
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  #brandPainSection .bfx-grid,
  #bgPainSolutionSection .bsa-rows,
  #crPainSolutionSection .bsa-rows {
    gap: 88px !important;
    margin-top: 48px;
  }

  #brandPainSection .bfx-card,
  #bgPainSolutionSection .bsa-set,
  #crPainSolutionSection .bsa-set {
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #bgPainSolutionSection .bsa-before,
  #crPainSolutionSection .bsa-before {
    padding: 15px 16px !important;
  }

  .rds-card,
  .fc-card,
  .fc-quest,
  .pricing-card,
  .s-step,
  .cs-card,
  .b-global-card,
  .bagent-camp-card,
  .bagent-popup-card,
  .bagent-guide-card,
  .b-wl-offer-card,
  .brand-gate-modal,
  .tips-featured-link {
    border-radius: 20px !important;
  }

  .sticky-cta-bar {
    flex-direction: row;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }

  .sticky-cta-text {
    display: none;
  }

  .sticky-cta-btn {
    width: 100%;
    min-height: 44px;
  }

  .chat-fab {
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 374px) {
  .logo-img {
    height: 20px;
  }

  .mode-toggle .mode-btn.active {
    display: none;
  }

  .hero-copy h1,
  .hero-a .va-h1 {
    font-size: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Unified brand accents — lime on dark surfaces, pink on light surfaces. */
.section-label::before,
.hero-copy .eyebrow::before,
.bg-center-hero .eyebrow::before,
.hero-a .va-eyebrow::before {
  background: var(--hot-pink) !important;
}

.hero-a .link-underline {
  color: var(--deep-pink) !important;
}

/* Deep pink is ~4.0:1 on black — under AA at this size, and it disagreed with
   the underline, which already flips to near-white in dark mode. */
[data-theme="dark"] .hero-a .link-underline {
  color: #f5f5f7 !important;
}

.hero-a .btn-red {
  background: var(--ink) !important;
  color: var(--lime) !important;
}

.hero-a .btn-red:hover {
  background: #302a26 !important;
}

.hero-a .mock-card .roas-row:nth-child(2) .roas-fill,
.aq-progress-fill.accent {
  background: var(--hot-pink) !important;
}

.hero-a .mock-card .roas-row:nth-child(3) .roas-fill {
  background: var(--ink) !important;
}

.hero-a .mock-card .roas-row:nth-child(4) .roas-fill {
  background: var(--soft-pink) !important;
}

.section.dark .section-label,
.investor-snapshot-section .section-label {
  color: var(--lime) !important;
}

.section.dark .section-label::before,
.investor-snapshot-section .section-label::before {
  background: var(--lime) !important;
}

.investor-snapshot-section .inv-metric-num {
  color: var(--lime) !important;
}

.investor-snapshot-section .section-title em {
  color: var(--lime) !important;
}

.fc-card-hero .fc-hero-title em {
  color: var(--lime) !important;
}

.fc-card-hero .fc-cond li::before {
  color: var(--lime) !important;
}

.fc-card-hero .fc-badge,
.fc-wl-submit {
  background: var(--lime) !important;
  color: var(--ink) !important;
}

.b-wl-offer-card.featured .b-wl-offer-num {
  color: var(--lime) !important;
}

.s-step-num {
  color: var(--lime) !important;
}

.rds-chip.dark {
  background: var(--ink) !important;
  color: var(--lime) !important;
}

footer {
  border-top: 0 !important;
  background: var(--ink) !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

footer .logo-img {
  filter: brightness(0) invert(1);
}

footer a {
  color: var(--lime) !important;
}

/* Exact palette enforcement for prominent legacy accents. */
.tab-btn.active,
.nav-seg-btn.active,
.drawer-tab.active {
  background: var(--ink) !important;
  color: var(--lime) !important;
}

.bcop-dot i,
.bcop-plan-ck,
.btr-tag,
.baf-head-b {
  background: var(--lime) !important;
  color: var(--ink) !important;
}

.bcop-coach-q em,
.bcop-chip em {
  color: var(--deep-pink) !important;
}

.bfh-cm-field-val .fill-tag {
  border-color: rgba(236, 90, 152, 0.24) !important;
  background: var(--pale-pink) !important;
  color: var(--deep-pink) !important;
}

/* Danger remains semantic, but uses the muted rose system color instead of vivid red. */
.b-pain-cost-fill,
.b-pain-burnout-fill.low,
.cal-tag.red {
  background: var(--danger-text) !important;
}

.b-pain-viral-stat-num,
.b-pain-pending-status,
.cal-d,
.b-pain-settle-status,
.rfh-settle-meta,
.bsa-do-pct.bad,
.wl-timer-label {
  color: var(--danger-text) !important;
}

.bsa-teaser-badge.bad,
.bsa-clause-ic.bad,
.rev-cl-item.fail,
.rev-scan-alert,
.rfh-settle-status.late,
.bsa-po-status.late,
.bsa-po-alert {
  border-color: var(--danger-border) !important;
  background: var(--danger) !important;
  color: var(--danger-text) !important;
}

.cim-cc-en.en-gold {
  color: var(--lime) !important;
}

.cim-cc-alert,
.cas-chat-dot {
  border-color: var(--lime) !important;
  background: var(--lime) !important;
  color: var(--ink) !important;
}

/* ── Palette holdouts ───────────────────────────────────────────
   The product mockups still carried a stock semantic ramp (green ok,
   blue link, red due, amber hint, slate meta) that read as a different
   product next to the black/lime/pink tabs. Hue is not what carries the
   meaning here — the ✓/✕ glyph and the label do — so these collapse onto
   the brand palette rather than keeping five extra accent colors alive. */

/* Positive / done — green → ink */
.bgf-nego-check,
.cas-step-ic.done,
.rev-cl-item.done .rev-cl-ic {
  background: var(--ink) !important;
  color: #ffffff !important;
}

.bsa-check-footer,
.cstore-shop-applied,
.bsa-do-pct.good,
.rfh-settle-status.done,
.bsa-po-status.done {
  color: var(--ink) !important;
}

.bsa-teaser-badge.good,
.rev-cl-item.done {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

/* Informational / links — blue → ink */
.bsa-clause-fix {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

.cstore-card-link,
.bsa-script-scene-ic {
  color: var(--ink) !important;
}

.bsa-script-scene {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
}

/* Due / overdue — vivid red → muted rose */
.bsa-tl-dot.due,
.cim-scene-drop .cim-cap-ret-fill {
  background: var(--danger-text) !important;
}

.cim-scene-drop .cim-cap-ret {
  color: var(--danger-text) !important;
}

/* Inbound — orange → deep pink */
.bfh-mt-tag.ib {
  background: var(--pale-pink) !important;
  color: var(--deep-pink) !important;
}

.bfh-mt-score.inbound {
  color: var(--deep-pink) !important;
}

/* Coach hints — cream amber → lime wash */
.bcop-coach-q,
.bcop-fn-num {
  border-color: var(--lime-line) !important;
  background: var(--lime-wash) !important;
  color: var(--ink) !important;
}

.bcop-coach-q .bcop-coach-arw,
.bcop-coach-q i {
  color: var(--deep-pink) !important;
}

/* Meta text — cool slate → warm neutral */
.cstore-web-stat-label,
.cstore-web-stat-sub,
.cstore-card-meta,
.cstore-web-pill,
.bfh-mt-ref-label,
.bfh-mt-scanning,
.bsa-script-chip {
  color: var(--muted) !important;
}

.bfh-mt-scan-bar {
  background: var(--surface-3) !important;
}

.bsa-script-chip:nth-child(1).is-in,
.bsa-script-chip:nth-child(2).is-in,
.bsa-script-chip:nth-child(3).is-in {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

/* Second pass — the same holdouts in the creator/beginner mockups. */
.bgf-settle-tick,
.bfh-ng-complete-check,
.cas-dot.done {
  background: var(--ink) !important;
  color: #ffffff !important;
}

.cstore-fit,
.bsa-ps-card-tag {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

.cstore-desktop-status {
  color: var(--ink) !important;
}

.cim-cc-en.en-peach {
  background: var(--pale-pink) !important;
  color: var(--deep-pink) !important;
}

.bg-ch-email-err,
.cr-ch-email-err,
.br-ch-email-err {
  color: var(--danger-text) !important;
}

/* Sky-blue was the last non-brand hue in the script/insight mockups. */
.bsa-script-badge.hook,
.bsa-sub-bar.colla,
.bsa-do-bar.ok {
  background: var(--ink) !important;
}

.bsa-script-dot,
.bsa-script-scene-dot {
  background: var(--deep-pink) !important;
}