:root {
  --rb-section-pad: clamp(3.5rem, 6vw, 5rem);
  --rb-card-shadow: 0 8px 24px -20px rgba(34, 53, 40, 0.3);
  --rb-media-filter: none;
}

.hero {
  overflow-x: clip;
}

html[data-design-accent="green"] {
  --accent: #3f6b4f;
  --accent-deep: #2c4a37;
  --accent-soft: #d9e7d4;
  --deep: #223528;
}

html[data-design-accent="blue"] {
  --accent: #315a76;
  --accent-deep: #233f54;
  --accent-soft: #dce8ef;
  --deep: #1f3544;
}

html[data-design-accent="burgundy"] {
  --accent: #7a3e47;
  --accent-deep: #572c33;
  --accent-soft: #f0dde0;
  --deep: #43272c;
}

html[data-design-accent="custom"] {
  --accent: var(--rb-demo-custom-accent, #3f6b4f);
  --accent-deep: color-mix(in srgb, var(--accent) 76%, #172019);
  --accent-soft: color-mix(in srgb, var(--accent) 20%, white);
  --deep: color-mix(in srgb, var(--accent) 54%, #172019);
}

html[data-design-reception="technical"] {
  --shadow: 0 12px 28px -22px rgba(24, 36, 29, 0.24);
  --shadow-soft: 0 8px 18px -16px rgba(24, 36, 29, 0.2);
}

html[data-design-reception="technical"] .blob {
  opacity: 0.45;
  border-radius: 18px;
}

html[data-design-reception="technical"] .section-deep,
html[data-design-reception="technical"] .portrait-card,
html[data-design-reception="technical"] .split-visual {
  border-radius: 10px;
}

html[data-design-reception="technical"] .card,
html[data-design-reception="technical"] .step,
html[data-design-reception="technical"] .contact-card {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

html[data-design-typography="editorial"] {
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[data-design-typography="clean"] {
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[data-design-typography="clean"] h1,
html[data-design-typography="clean"] h2,
html[data-design-typography="clean"] h3 {
  font-weight: 650;
}

html[data-design-typography="compact"] {
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[data-design-typography="compact"] h1,
html[data-design-typography="compact"] h2,
html[data-design-typography="compact"] h3 {
  font-weight: 700;
  line-height: 1.04;
}

html[data-design-typography="compact"] h1 em,
html[data-design-typography="compact"] h2 em {
  font-style: normal;
}

html[data-design-density="compact"] .container {
  max-width: 1180px;
}

html[data-design-density="compact"] .cards,
html[data-design-density="compact"] .steps,
html[data-design-density="compact"] .contact-cards {
  gap: 0.8rem;
}

html[data-design-density="compact"] .card,
html[data-design-density="compact"] .step,
html[data-design-density="compact"] .contact-card {
  padding: 1.3rem;
}

html[data-design-density="spacious"] .container {
  max-width: 1060px;
}

html[data-design-density="spacious"] .cards,
html[data-design-density="spacious"] .steps,
html[data-design-density="spacious"] .contact-cards {
  gap: 1.8rem;
}

html[data-design-density="spacious"] .card,
html[data-design-density="spacious"] .step,
html[data-design-density="spacious"] .contact-card {
  padding: 2.2rem;
}

html[data-design-motion-level="soft"] .blob {
  animation-duration: 15s;
}

html[data-design-motion-level="soft"] .reveal {
  transition-duration: 1.05s;
  transform: translateY(14px);
}

html[data-design-motion-level="off"] *,
html[data-design-motion-level="off"] *::before,
html[data-design-motion-level="off"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}

html[data-design-motion-level="off"] .reveal {
  opacity: 1 !important;
  transform: none !important;
}

html[data-design-motion-level="off"] .mark {
  background-size: 100% 62% !important;
}

html[data-design-cta="outline"] .btn-primary,
html[data-design-cta="outline"] .wa-float {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--accent-deep);
  box-shadow: none;
}

html[data-design-cta="outline"] .btn-primary:hover,
html[data-design-cta="outline"] .wa-float:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

html[data-design-cta="highContrast"] .btn-primary,
html[data-design-cta="highContrast"] .wa-float {
  border-color: var(--deep);
  background: var(--deep);
  color: #f7fbf5;
}

html[data-design-cta="highContrast"] .btn-primary:hover,
html[data-design-cta="highContrast"] .wa-float:hover {
  background: #111b15;
  color: #ffffff;
}

html[data-design-surface="clean"] {
  --bg: #ffffff;
  --bg-soft: #f4f7f2;
  --surface: #ffffff;
  --line: #dfe6dc;
}

html[data-design-surface="technical"] {
  --bg: #f1f3f1;
  --bg-soft: #e7ebe8;
  --surface: #f9faf9;
  --line: #cfd7d1;
  --ink-soft: #465149;
}

html[data-design-card="line"] .card,
html[data-design-card="line"] .step,
html[data-design-card="line"] .contact-card,
html[data-design-card="line"] .portrait-card,
html[data-design-card="line"] .split-visual {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

html[data-design-card="lifted"] .card,
html[data-design-card="lifted"] .step,
html[data-design-card="lifted"] .contact-card,
html[data-design-card="lifted"] .portrait-card,
html[data-design-card="lifted"] .split-visual {
  box-shadow: 0 24px 56px -28px rgba(24, 36, 29, 0.42);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

html[data-design-radius="crisp"] {
  --radius: 6px;
  --radius-sm: 4px;
}

html[data-design-radius="soft"] {
  --radius: 32px;
  --radius-sm: 20px;
}

html[data-design-type-scale="smaller"] {
  font-size: 15px;
}

html[data-design-type-scale="larger"] {
  font-size: 17px;
}

html[data-design-section-rhythm="compact"] {
  --rb-section-pad: clamp(2.75rem, 5vw, 4rem);
}

html[data-design-section-rhythm="spacious"] {
  --rb-section-pad: clamp(4.5rem, 8vw, 6.5rem);
}

html[data-design-section-rhythm] .hero,
html[data-design-section-rhythm] .section,
html[data-design-section-rhythm] .interlude {
  padding-block: var(--rb-section-pad);
}

html[data-design-hero="calm"] .hero-visual {
  max-width: 23rem;
}

html[data-design-hero="calm"] .hero-copy h1 {
  max-width: 9.5em;
}

html[data-design-hero="strong"] .hero-visual {
  max-width: 29rem;
}

html[data-design-hero="strong"] .hero-copy h1 {
  font-size: clamp(2.8rem, 6.8vw, 4.75rem);
}

html[data-design-media="calm"] {
  --rb-media-filter: saturate(0.78) contrast(0.96);
}

html[data-design-media="contrast"] {
  --rb-media-filter: saturate(1.08) contrast(1.12);
}

html[data-design-media] .portrait-card img,
html[data-design-media] .split-visual img {
  filter: var(--rb-media-filter);
}

html[data-design-proof="quiet"] .stat-value {
  font-size: clamp(2rem, 4vw, 2.7rem);
}

html[data-design-proof="quiet"] .quote {
  max-width: 38rem;
  opacity: 0.82;
}

html[data-design-proof="prominent"] .stat-value {
  font-size: clamp(2.8rem, 6vw, 4rem);
  color: #ffffff;
}

html[data-design-proof="prominent"] .stat {
  border-left-color: color-mix(in srgb, var(--accent-soft) 72%, transparent);
  border-left-width: 4px;
}

html[data-design-form="compact"] .contact-cards {
  gap: 0.8rem;
}

html[data-design-form="compact"] .contact-card {
  padding: 1.35rem;
}

html[data-design-form="focused"] .contact-primary {
  border-width: 2px;
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
  box-shadow: 0 22px 48px -28px color-mix(in srgb, var(--accent) 58%, transparent);
}

html[data-design-form="focused"] .contact-primary .btn {
  align-self: stretch;
}

html[data-design-objections="compact"] .offer-note {
  margin-top: 1.5rem;
  gap: 0.35rem;
  padding: 1.15rem 1.3rem;
}

html[data-design-objections="open"] .offer-note {
  grid-template-columns: 1fr;
  background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
  border-style: solid;
  padding: 2rem;
}

html[data-design-sticky-cta="hidden"] .wa-float {
  display: none;
}

.wa-float {
  right: auto;
  left: 1.1rem;
}

@media (min-width: 1024px) {
  html[data-design-hero="calm"] .hero-grid {
    grid-template-columns: 1.18fr 0.82fr;
  }

  html[data-design-hero="strong"] .hero-grid {
    grid-template-columns: 0.98fr 1.02fr;
  }
}

@media (max-width: 720px) {
  .wa-float {
    left: 14px;
    right: 76px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
}