/**
 * Rumi engagement (home) landing page – section-by-section design alignment.
 * Hero: single paragraph_content; inner <section id="rumi-hero"> holds bg + copy (no separate image-bg row).
 * Other sections: #rumi-trusted, #rumi-demo, etc.
 * Scoped with body.rumi-engagement-page + body.engagement-lp (see martex_preprocess_html).
 *
 * Layout / spacing: prefer Bootstrap 5 utilities (Martex base theme: bootstrap_barrio; see css/bootstrap.min.css).
 * Engagement-only utility: .mb-32 → margin-bottom: 32px (headline/copy in #rumi-cta, etc.).
 * Use this file for: CSS variables (--rumi-*), hero gradient overlay, typography sizes, asymmetric hero CTA
 * button (desktop), fixed stat column widths, input focus/border tokens, and any value that has no utility.
 *
 * Swiper (paragraph_slider_block): enable “auto” slide width via paragraph field
 * field_paragraph_data_items_auto → outputs data-items-auto="true" on .swiper-container;
 * global.js then sets slidesPerView: "auto". For slide sizing, theme may use .swiper-auto on the
 * container (fixed widths in style.css) or set .swiper-slide { width: auto; } for natural content width.
 */

/* Exact 32px vertical gaps (no default Bootstrap mb-* / py-* at 32px). */
body.rumi-engagement-page .mb-32,
body.engagement-lp .mb-32 {
  margin-bottom: 32px !important;
}

/*
 * Paragraph slider “overflow visible” (CMS): martex style.css sets .swiper-container { overflow: hidden }.
 * Only the inner .swiper had overflow-visible before — the outer box still clipped slides 4+ (peek / wide track).
 */
.swiper-container.overflow-visible {
  overflow: visible !important;
}

.swiper-container.overflow-visible > .swiper.overflow-visible {
  overflow: visible !important;
}

:root {
  --rumi-primary: #6f42c1;
  --rumi-primary-hover: #5a32a3;
  --rumi-lavender: #e9e3f5;
  --rumi-lavender-strong: #c4b5e8;
  --rumi-dark: #3d2a6b;
  --rumi-dark-card: #4a3578;
  --rumi-check-accent: #7651db;
  --rumi-lp-text: #372b57;
  --rumi-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --rumi-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ========== Engagement LP: default text color ========== */
body.engagement-lp {
  color: var(--rumi-lp-text);
  overflow-x: hidden;
  max-width: 100%;
}

/* Clip horizontal overflow at the root (some browsers need html as well). */
html:has(body.engagement-lp) {
  overflow-x: hidden;
  max-width: 100%;
}

/*
 * Vertical rhythm on engagement LP: section containers + default-view paragraphs.
 * Mobile: 7.5rem top; desktop (≥992px): 110px top; bottom 0.
 */
.engagement-lp section > .container,
.engagement-lp .paragraph.paragraph--view-mode--default > .container {
  padding-top: 7.5rem;
  padding-bottom: 0;
}

@media (min-width: 992px) {
  .engagement-lp section > .container,
  .engagement-lp .paragraph.paragraph--view-mode--default > .container {
    padding-top: 110px;
    padding-bottom: 0;
  }
}

/* ========== Engagement page: Inter body, DM Serif titles ========== */
body.rumi-engagement-page {
  font-family: var(--rumi-font-body);
}

body.rumi-engagement-page h1,
body.rumi-engagement-page h2,
body.rumi-engagement-page h3,
body.rumi-engagement-page h4,
body.rumi-engagement-page h5,
body.rumi-engagement-page h6 {
  font-family: var(--rumi-font-display);
  font-weight: 400;
}

/* All section / card headings (not body copy) */
body.rumi-engagement-page .rumi-hero-headline,
body.rumi-engagement-page .rumi-hero-cta-heading,
body.rumi-engagement-page .rumi-demo-headline,
body.rumi-engagement-page .rumi-difference-headline,
body.rumi-engagement-page .rumi-why-headline,
body.rumi-engagement-page .rumi-why-card-title,
body.rumi-engagement-page .rumi-testimonials-headline,
body.rumi-engagement-page .rumi-cta-card-headline {
  font-family: var(--rumi-font-display);
  font-weight: 400;
}

/* Desktop (≥992px): default section h2 scale on engagement LP (h3: no global LP rule — use per-block CSS) */
@media (min-width: 992px) {
  body.engagement-lp h2 {
    font-size: 48px;
    line-height: 0.97;
    letter-spacing: -0.02em;
  }
}

/* ========== Engagement: transparent header over hero; solid bar when stuck (scroll) ========== */
body.engagement-lp .navbar.transparent:not(.navbar-stick):not(.pos-fixed) ul.navbar-nav > li > a,
body.engagement-lp .navbar.transparent:not(.navbar-stick):not(.pos-fixed) ul.navbar-nav > li > span {
  color: var(--rumi-lp-text);
}

body.engagement-lp .navbar.transparent:not(.navbar-stick) button.hamburger,
body.engagement-lp .navbar.transparent:not(.navbar-stick) .hamburger span,
body.engagement-lp .navbar.transparent:not(.navbar-stick) .hamburger::before,
body.engagement-lp .navbar.transparent:not(.navbar-stick) .hamburger::after {
  color: var(--rumi-lp-text);
}

/* Dark logo on transparent bar (default theme shows light logo on transparent). */
body.rumi-engagement-page .navbar.transparent:not(.navbar-dark):not(.navbar-stick) .logo-dark {
  display: inline-block !important;
}

body.rumi-engagement-page .navbar.transparent:not(.navbar-dark):not(.navbar-stick) .logo-light {
  display: none !important;
}

body.engagement-lp .navbar.transparent:not(.navbar-stick) .navbar-other .nav-link {
  color: var(--rumi-lp-text);
}

/*
 * Desktop: logo left; primary nav (.navbar-collapse.offcanvas-nav) + utilities (.navbar-other)
 * grouped on the right (Martex default gives .offcanvas-start width:100% which splits the row).
 */
@media (min-width: 992px) {
  body.rumi-engagement-page .navbar.navbar-expand-lg > .container,
  body.engagement-lp .navbar.navbar-expand-lg > .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
  }

  body.rumi-engagement-page .navbar .navbar-brand,
  body.engagement-lp .navbar .navbar-brand {
    width: auto !important;
    flex: 0 0 auto;
  }

  /* Undo full-width offcanvas shell so it can sit beside .navbar-other */
  body.rumi-engagement-page .navbar-expand-lg .navbar-collapse.offcanvas.offcanvas-nav.offcanvas-start,
  body.engagement-lp .navbar-expand-lg .navbar-collapse.offcanvas.offcanvas-nav.offcanvas-start {
    width: auto !important;
    max-width: none;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 20px;
  }

  body.rumi-engagement-page .navbar .navbar-other.w-100,
  body.engagement-lp .navbar .navbar-other.w-100 {
    width: auto !important;
    flex: 0 0 auto;
    /* Space between primary nav and Book / language (replaces Bootstrap ms-auto here) */
    margin-left: 0.75rem !important;
  }

  /* Keep menu list flush in the collapse; avoid extra start margin pushing links away from .navbar-other */
  body.rumi-engagement-page .navbar-expand-lg .offcanvas-nav .offcanvas-body.ms-lg-auto,
  body.engagement-lp .navbar-expand-lg .offcanvas-nav .offcanvas-body.ms-lg-auto {
    margin-left: 0 !important;
  }
}

/* Header: Book a demo CTA (menu block class .menu--engagement-cta on nav link) */
body.rumi-engagement-page .menu--engagement-cta .nav-item .btn-primary.nav-link,
body.engagement-lp .menu--engagement-cta .nav-item .btn-primary.nav-link {
  box-sizing: border-box;
  width: 189px;
  height: 45px;
  min-height: 45px;
  padding: 0 0.75rem 0 0.625rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #7651db !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  border-radius: 64px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Black arrow (same geometry as rumi CTA arrows), left of label */
body.rumi-engagement-page .menu--engagement-cta .nav-item .btn-primary.nav-link::before,
body.engagement-lp .menu--engagement-cta .nav-item .btn-primary.nav-link::before {
  content: '';
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0 0.661078C0 1.02754 0.294258 1.32216 0.660287 1.32216H9.73206L0.430622 10.6347C0.172249 10.8934 0.172249 11.3174 0.430622 11.576C0.688995 11.8347 1.10526 11.8347 1.36364 11.576L10.6794 2.24192V11.3389C10.6794 11.7054 10.9737 12 11.3397 12C11.7057 12 12 11.7054 12 11.3389V0.661078C12 0.337725 11.7703 0.0718563 11.4617 0.0143713L11.2967 0H0.660287C0.294258 0 0 0.294611 0 0.661078Z' fill='%23000000'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

body.rumi-engagement-page .menu--engagement-cta .nav-item .btn-primary.nav-link:hover,
body.rumi-engagement-page .menu--engagement-cta .nav-item .btn-primary.nav-link:focus-visible,
body.engagement-lp .menu--engagement-cta .nav-item .btn-primary.nav-link:hover,
body.engagement-lp .menu--engagement-cta .nav-item .btn-primary.nav-link:focus-visible {
  color: #353f4f !important;
  background-color: transparent !important;
  border: 2px solid #353f4f !important;
}

/* ========== 1. Hero: #rumi-hero section inside .rumi-hero-copy-block paragraph ========== */

#rumi-hero.rumi-hero-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  background-size: cover;
  background-position: center;
}

/* Light wash so black hero copy stays readable over photo */
#rumi-hero.rumi-hero-section.image-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.25) 100%);
  pointer-events: none;
}

/* Mobile: bottom fade into the next section (matches typical page / #rumi-trusted band) */
@media (max-width: 991.98px) {
  body:not(.engagement-lp) #rumi-hero.rumi-hero-section.image-wrapper.bg-cover.switch-column-mobile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: clamp(7rem, 32vh, 14rem);
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.55) 40%,
      #ffffff 100%
    );
  }
}

/* Engagement LP: thin bottom edge — transparent → white (single ::after; avoids clash with mobile fade above) */
body.engagement-lp #rumi-hero.rumi-hero-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 30px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, #ffffff);
}

#rumi-hero.rumi-hero-section .container {
  position: relative;
  z-index: 2;
}

/* Paragraph wrapper: no extra gap (hero is one block with embedded section) */
body.rumi-engagement-page .paragraph.rumi-hero-copy-block {
  padding: 0;
  margin-bottom: 0;
  max-width: none;
}

body.engagement-lp .paragraph.rumi-hero-copy-block .field--name-field-paragraph-content {
  margin-bottom: 0;
}

/* Layout: .container > .rumi-hero-top + .rumi-hero-cta-fullwidth */
#rumi-hero .rumi-hero-content {
  padding: 2rem 0 50px;
}

@media (min-width: 992px) {
  #rumi-hero .rumi-hero-content {
    padding: 2rem 0 90px;
  }
}

#rumi-hero .rumi-hero-top {
  --bs-gutter-x: 1.5rem;
}

#rumi-hero .rumi-hero-main {
  text-align: left;
}

/* CTA + value props: sibling column after .rumi-hero-main (create_home_page.php) */
#rumi-hero .rumi-hero-cta-group {
  text-align: center;
  align-items: center !important;
}

#rumi-hero .rumi-hero-cta-fullwidth {
  margin-top: 2rem;
  padding-top: 2rem;
  width: 100%;
}

#rumi-hero .rumi-hero-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08);
}

#rumi-hero .rumi-hero-image-placeholder {
  min-height: 320px;
  background: linear-gradient(135deg, #e9e3f5 0%, #ddd6eb 100%);
  border-radius: 0.5rem;
}

/* Headline + lead + stats — base (mobile); desktop overrides below */
#rumi-hero .rumi-hero-headline {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-family: var(--rumi-font-display);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--rumi-lp-text);
  text-shadow: none;
}

#rumi-hero .rumi-hero-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: var(--rumi-lp-text);
  font-family: var(--rumi-font-body);
}

#rumi-hero .rumi-hero-stats {
  margin-bottom: 2rem;
}

/* Hero form with no inputs: single pill CTA (overrides desktop 3-column email grid below) */
#rumi-hero .rumi-hero-form.rumi-hero-form--cta-only {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
}

/* .rumi-stat: layout via d-block text-start (Bootstrap) */
#rumi-hero .rumi-stat {
  padding: 0.75rem 0;
}

#rumi-hero .rumi-stat-number {
  display: block;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0.25rem;
  color: var(--rumi-lp-text);
  font-family: var(--rumi-font-display);
}

#rumi-hero .rumi-stat-label {
  display: block;
  font-size: 0.875rem;
  color: var(--rumi-lp-text);
  line-height: 1.3;
  font-family: var(--rumi-font-body);
}

/* CTA stack: each block in its own full-width row (Bootstrap .rumi-hero-cta-stack) */
#rumi-hero .rumi-hero-cta-stack {
  margin-top: 0.5rem;
}

#rumi-hero .rumi-hero-cta-stack > .col-12 {
  width: 100%;
  max-width: 100%;
}

/* Mobile CTA title size; desktop uses body.engagement-lp h2 scale */
@media (max-width: 991.98px) {
  #rumi-hero .rumi-hero-cta-heading {
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
}

#rumi-hero .rumi-hero-cta-heading {
  font-family: var(--rumi-font-display);
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--rumi-lp-text);
}

#rumi-hero .rumi-hero-cta-text {
  font-size: 1rem;
  color: var(--rumi-lp-text);
  font-family: var(--rumi-font-body);
}

/*
 * Hero form: CSS Grid (not flex) — Bootstrap .d-flex + .form-control{width:100%} reliably caused stacked rows.
 * Mobile: 1 column; desktop: 298 + 298 + 188 + gaps, centered.
 */
#rumi-hero .rumi-hero-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px !important;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: safe center;
  align-items: stretch;
  box-sizing: border-box;
}

/* If filtered HTML wraps fields in <p>, keep a single grid (children flow to form) */
#rumi-hero .rumi-hero-form > p {
  display: contents;
  margin: 0;
}

@media (max-width: 991.98px) {
  #rumi-hero .rumi-hero-form .rumi-hero-input,
  #rumi-hero .rumi-hero-form .rumi-hero-cta-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

#rumi-hero .rumi-hero-form .rumi-hero-input {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 0;
  background: #fff;
  border: 0.25px solid var(--rumi-lp-text);
  box-shadow: none;
  text-align: left;
  color: var(--rumi-lp-text);
}

/* Bootstrap .form-control defaults to width:100%; on desktop we override in @media (min-width:992px) below */
#rumi-hero .rumi-hero-form .form-control.rumi-hero-input {
  display: block;
}

#rumi-hero .rumi-hero-form .rumi-hero-input::placeholder {
  color: rgba(55, 43, 87, 0.55);
}

#rumi-hero .rumi-hero-form .rumi-hero-input:focus {
  box-shadow: none;
  outline: 2px solid rgba(118, 81, 219, 0.35);
  outline-offset: 1px;
}

/* Colours + desktop end-cap shape; mobile: rounded-pill + w-100 in markup */
#rumi-hero .rumi-hero-cta-btn {
  background: var(--rumi-primary);
  border: 0.25px solid var(--rumi-primary);
  font-family: var(--rumi-font-body);
}

#rumi-hero .rumi-hero-cta-btn:hover {
  background: var(--rumi-primary-hover);
  border-color: var(--rumi-primary-hover);
}

/* List layout: Bootstrap d-flex flex-column flex-lg-row gap-2 on .rumi-hero-value-props */
#rumi-hero .rumi-hero-value-prop {
  color: var(--rumi-lp-text);
  font-family: var(--rumi-font-body);
}

#rumi-hero .rumi-hero-check svg {
  display: block;
  width: 17px;
  height: 15px;
}

/* ========== Hero — desktop (engagement LP) ========== */
@media (min-width: 992px) {
  body.engagement-lp #rumi-hero .rumi-hero-headline,
  body.rumi-engagement-page #rumi-hero .rumi-hero-headline {
    font-size: 56px;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
  }

  body.engagement-lp #rumi-hero .rumi-hero-lead,
  body.rumi-engagement-page #rumi-hero .rumi-hero-lead {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 36px;
  }

  body.engagement-lp #rumi-hero .rumi-stat-number,
  body.rumi-engagement-page #rumi-hero .rumi-stat-number {
    font-size: 64px;
    line-height: 1.3;
    margin-bottom: 0;
  }

  body.engagement-lp #rumi-hero .rumi-hero-stats,
  body.rumi-engagement-page #rumi-hero .rumi-hero-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 24px;
    margin: 0 0 64px 0;
    padding: 0;
    --bs-gutter-x: 0;
  }

  body.engagement-lp #rumi-hero .rumi-hero-stats.row,
  body.rumi-engagement-page #rumi-hero .rumi-hero-stats.row {
    margin-left: 0;
    margin-right: 0;
  }

  body.engagement-lp #rumi-hero .rumi-hero-stats > [class*="col-"],
  body.rumi-engagement-page #rumi-hero .rumi-hero-stats > [class*="col-"] {
    flex: 0 0 138px;
    width: 138px;
    max-width: 138px;
    padding: 0;
    margin: 0;
  }

  body.engagement-lp #rumi-hero .rumi-hero-stats .rumi-stat,
  body.rumi-engagement-page #rumi-hero .rumi-hero-stats .rumi-stat {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 138px;
    box-sizing: border-box;
  }

  body.engagement-lp #rumi-hero .rumi-hero-cta-fullwidth,
  body.rumi-engagement-page #rumi-hero .rumi-hero-cta-fullwidth {
    margin-top: 0;
    padding-top: 0;
  }

  body.engagement-lp #rumi-hero .rumi-hero-top .rumi-hero-cta-group.col-lg-5,
  body.rumi-engagement-page #rumi-hero .rumi-hero-top .rumi-hero-cta-group.col-lg-5 {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  body.engagement-lp #rumi-hero .rumi-hero-cta-heading,
  body.rumi-engagement-page #rumi-hero .rumi-hero-cta-heading {
    margin-bottom: 17px;
  }

  body.engagement-lp #rumi-hero .rumi-hero-cta-text,
  body.rumi-engagement-page #rumi-hero .rumi-hero-cta-text {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 24px;
  }

  /* Three fixed columns; grid ignores flex-direction / .w-100 stacking issues */
  body.engagement-lp #rumi-hero .rumi-hero-form,
  body.rumi-engagement-page #rumi-hero .rumi-hero-form,
  #rumi-hero .rumi-hero-form {
    grid-template-columns: minmax(0, 298px) minmax(0, 298px) minmax(0, 188px) !important;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 8px;
  }

  body.engagement-lp #rumi-hero .rumi-hero-form.rumi-hero-form--cta-only,
  body.rumi-engagement-page #rumi-hero .rumi-hero-form.rumi-hero-form--cta-only,
  #rumi-hero .rumi-hero-form.rumi-hero-form--cta-only {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
  }

  body.engagement-lp #rumi-hero .rumi-hero-form .rumi-hero-input,
  body.rumi-engagement-page #rumi-hero .rumi-hero-form .rumi-hero-input,
  #rumi-hero .rumi-hero-form .rumi-hero-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 64px;
    padding: 0 1rem;
    border: 0.25px solid var(--rumi-lp-text);
    border-radius: 0;
    box-sizing: border-box;
  }

  body.engagement-lp #rumi-hero .rumi-hero-cta-btn,
  body.rumi-engagement-page #rumi-hero .rumi-hero-cta-btn,
  #rumi-hero .rumi-hero-cta-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 64px;
    padding: 0 1rem;
    border-radius: 0;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Tighter mobile gap-2 (8px); desktop row spacing 32px (between gap-lg-4 and gap-lg-5) */
  body.engagement-lp #rumi-hero .rumi-hero-value-props,
  body.rumi-engagement-page #rumi-hero .rumi-hero-value-props {
    gap: 2rem;
  }

  body.engagement-lp #rumi-hero .rumi-hero-value-prop,
  body.rumi-engagement-page #rumi-hero .rumi-hero-value-prop {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
  }
}

/* Shared: eyebrow + pill buttons */
body.rumi-engagement-page .rumi-eyebrow {
  font-family: var(--rumi-font-body);
}

.rumi-eyebrow {
  letter-spacing: 30%;
  font-weight: 600;
}
.rumi-eyebrow--purple {
  color: var(--rumi-primary);
}
.rumi-eyebrow--light {
  color: var(--rumi-lavender-strong);
}
.rumi-btn-pill {
  border-radius: 2rem;
  font-weight: 600;
}
.rumi-btn-lavender {
  background: var(--rumi-lavender-strong);
  border-color: var(--rumi-lavender-strong);
  color: var(--rumi-dark);
}
.rumi-btn-lavender:hover {
  background: var(--rumi-lavender);
  border-color: var(--rumi-lavender);
  color: var(--rumi-dark);
}

/* CTA card “Book a demo” — primary purple (replaces lavender on dark card art) */
.rumi-btn-primary {
  background: var(--rumi-primary);
  border-color: var(--rumi-primary);
  color: #fff;
}
.rumi-btn-primary:hover,
.rumi-btn-primary:focus-visible {
  background: var(--rumi-primary-hover);
  border-color: var(--rumi-primary-hover);
  color: #fff;
}

/* ========== 2. Trusted by industry (#rumi-trusted) ========== */
/* Spacing: mt-0 pt-0 on #rumi-trusted; my-0 pt-0 on .rumi-trusted-heading-paragraph (create_home_page.php). */

/* Wrapper when extra class contains auto-center-slider (paragraph_slider_block twig); trusted logos only — fixed row height. */
.auto-center-slider-container {
  width: 100%;
  height: 112px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* Trusted logos: data-items-auto + global.js watchOverflow & centerInsufficientSlides via .auto-center-slider on swiper container */
/* slidesPerView auto: natural slide width from logo image */
body.rumi-engagement-page .trusted-logos-carousel .swiper-slide {
  width: auto;
}

body.rumi-engagement-page .trusted-logos-carousel .brand-logo img,
body.rumi-engagement-page .trusted-logos-carousel .swiper-slide img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  margin: 0;
  display: block;
  filter: grayscale(100%);
  opacity: 0.85;
}

/* Swiper gap: data-margin → spaceBetween (create_home_page sets 64px for trusted logos) */

/* ========== 3. Your 30-minute demo (#rumi-demo) ========== */
#rumi-demo .rumi-demo-headline {
  font-family: var(--rumi-font-display);
  font-weight: 400;
  color: var(--rumi-dark);
}

@media (max-width: 991.98px) {
  #rumi-demo .rumi-demo-headline {
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
}

#rumi-demo .rumi-demo-subtitle {
  font-size: 1.05rem;
  color: #4b5563;
  font-family: var(--rumi-font-body);
  margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
  #rumi-demo .rumi-demo-subtitle {
    margin-bottom: 56px;
  }
}

/* Demo cards: 350px columns, 34px gap, bordered gradient tiles */
body.rumi-engagement-page .rumi-demo-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  justify-content: center;
  align-items: stretch;
}

body.rumi-engagement-page .rumi-demo-card {
  box-sizing: border-box;
  width: 350px;
  max-width: 100%;
  padding: 8px;
  border: 1px solid #372b57;
  border-radius: 16px;
  /* 8px white inset between border and gradient/content */
  background: #fff;
}

body.rumi-engagement-page .rumi-demo-card-inner {
  border-radius: 8px;
  background: linear-gradient(180deg, #f2eefb 0%, #ffffff 100%);
  padding: 32px;
  min-height: 100%;
  box-sizing: border-box;
}

body.rumi-engagement-page .rumi-demo-card-icon {
  line-height: 0;
}

body.rumi-engagement-page .rumi-demo-card-icon-svg {
  display: block;
  width: 64px;
  height: 64px;
}

body.rumi-engagement-page .rumi-demo-card-number {
  font-family: var(--rumi-font-display);
  font-weight: 400;
  color: #372b57;
  margin-bottom: 16px;
  line-height: 1.2;
  font-size: 3rem;
}

@media (min-width: 992px) {
  body.rumi-engagement-page .rumi-demo-card-number {
    font-size: 96px;
    line-height: 1.3;
  }
}

body.rumi-engagement-page .rumi-demo-card-title {
  font-family: var(--rumi-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 0.97;
  color: #7651db;
  margin-bottom: 16px;
}

body.rumi-engagement-page .rumi-demo-card-text {
  font-size: 16px;
  line-height: 1.3;
  color: #4b5563;
  font-family: var(--rumi-font-body);
}

/* Demo timeline: full-viewport line; circles align to 350px columns (desktop); single centered circle (mobile) */
body.rumi-engagement-page .rumi-demo-timeline-wrap {
  position: relative;
  margin-bottom: 67px;
  min-height: 32px;
  display: flex;
  align-items: center;
  width: 100%;
}

body.rumi-engagement-page .rumi-demo-timeline-line {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  max-width: none;
  height: 1px;
  margin: 0;
  padding: 0;
  background: #7651db;
  pointer-events: none;
}

body.rumi-engagement-page .rumi-demo-timeline-circles {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 34px;
  width: 100%;
}

body.rumi-engagement-page .rumi-demo-timeline-slot {
  box-sizing: border-box;
  width: 350px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

body.rumi-engagement-page .rumi-demo-timeline-dot {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #7651db;
  flex-shrink: 0;
}

/* Arrow before “Book a demo” in 30-min demo section */
body.rumi-engagement-page .rumi-demo-book-btn .rumi-demo-book-icon {
  display: block;
  flex-shrink: 0;
  margin-right: 12px;
}

/* All “Book a demo” link CTAs — uniform height (hero form submit stays 64px to match inputs) */
body.rumi-engagement-page a[href="#book-demo"],
body.engagement-lp a[href="#book-demo"] {
  box-sizing: border-box;
  min-height: 45px;
  height: 45px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* All “Book a demo” CTAs — fixed width on desktop (overrides e.g. hero .w-100) */
@media (min-width: 992px) {
  body.rumi-engagement-page a[href="#book-demo"],
  body.engagement-lp a[href="#book-demo"] {
    width: 237px !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 991.98px) {
  body.rumi-engagement-page .rumi-demo-timeline-slot:not(.rumi-demo-timeline-slot--center) {
    display: none;
  }

  body.rumi-engagement-page .rumi-demo-timeline-slot.rumi-demo-timeline-slot--center {
    width: 100%;
    max-width: 100%;
  }

  body.rumi-engagement-page .rumi-demo-timeline-circles {
    gap: 0;
    justify-content: center;
  }
}

/* ========== 4. The Rumi difference (#rumi-difference) ========== */
body.rumi-engagement-page #rumi-difference {
  margin-top: 320px;
  overflow: visible;
}

/* Eyebrow, headline + accent SVG — entire intro column max 928px */
body.rumi-engagement-page #rumi-difference .rumi-difference-intro {
  margin-top: 68px;
  max-width: 928px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.rumi-engagement-page .paragraph.rumi-difference-paragraph {
  overflow: visible;
}

/* Outer container: solid panel + radius (background still follows border-radius without overflow:hidden) */
body.rumi-engagement-page #rumi-difference > .container {
  background: #372b57;
  border-radius: 40px;
  overflow: visible;
}

body.rumi-engagement-page #rumi-difference .rumi-difference-intro .rumi-difference-headline {
  font-family: var(--rumi-font-display);
  font-weight: 400;
  color: #fff;
}

@media (min-width: 992px) {
  body.rumi-engagement-page #rumi-difference .rumi-difference-intro .rumi-difference-headline {
    padding-left: 110px;
    padding-right: 110px;
  }
}

@media (max-width: 991.98px) {
  body.rumi-engagement-page #rumi-difference .rumi-difference-intro .rumi-difference-headline {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}

body.rumi-engagement-page #rumi-difference .rumi-difference-headline-accent {
  display: block;
  max-width: 304px;
  width: 100%;
  height: auto;
}

/* Laptop/tablet visual — pulled up to overlap content above */
body.rumi-engagement-page #rumi-difference .rumi-difference-top-visual {
  position: relative;
  z-index: 2;
  margin-top: -412px;
  margin-bottom: 0;
  pointer-events: none;
}

@media (min-width: 992px) {
  body.rumi-engagement-page #rumi-difference .rumi-difference-top-visual {
    overflow-x: auto;
  }
}

@media (max-width: 991.98px) {
  body.rumi-engagement-page #rumi-difference {
    margin-top: 110px;
  }

  body.rumi-engagement-page #rumi-difference .rumi-difference-top-visual {
    margin-top: -205px;
  }
}

body.rumi-engagement-page #rumi-difference .rumi-difference-top-image {
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  body.rumi-engagement-page #rumi-difference .rumi-difference-top-image {
    width: 1060px;
    max-width: 100%;
  }
}

@media (max-width: 991.98px) {
  body.rumi-engagement-page #rumi-difference .rumi-difference-top-image {
    width: 100%;
    max-width: 100%;
  }
}

/* Inner card: transparent on same #372b57 container (table + CTA) */
body.rumi-engagement-page #rumi-difference .rumi-difference-box {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Extra top padding when the laptop image overlaps the card */
body.rumi-engagement-page #rumi-difference .rumi-difference-box.rumi-difference-box--has-top-visual {
  padding-top: clamp(3rem, 6vw, 5rem);
}

body.rumi-engagement-page #rumi-difference .rumi-difference-book-demo {
  margin-top: 16px;
}

@media (min-width: 992px) {
  body.rumi-engagement-page #rumi-difference .rumi-difference-book-demo {
    margin-top: 75px;
  }
}

/* Aligned to design: scripts/nodes/content/design/rumi-difference-table.png */
.rumi-difference-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
 * Layout: real <table> for semantics. Default table algorithm cannot stack whole columns;
 * below 992px we use grid + display:contents + order so “Before” header + left cells appear
 * first, then “With” header + right cells. Desktop restores normal table (side‑by‑side rows).
 */
.rumi-difference-box .rumi-difference-table.table {
  --bs-table-bg: transparent;
  --bs-table-color: #fff;
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

.rumi-difference-table thead {
  display: table-header-group;
}

.rumi-difference-table tbody {
  display: table-row-group;
}

.rumi-difference-table tr {
  display: table-row;
}

.rumi-difference-table thead th {
  display: table-cell;
  border: none;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  color: #fff;
}

/* Header label box: width (325px desktop) + tab styling live on inner div */
.rumi-difference-table thead th .rumi-difference-th-inner {
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  height: 64px;
  min-height: 64px;
  padding: 0 1.25rem;
  box-sizing: border-box;
  /* inline-flex so th text-align left/right positions the chip in the cell */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}

.rumi-difference-table thead tr th.rumi-difference-before .rumi-difference-th-inner,
.rumi-difference-table thead tr th.rumi-difference-with .rumi-difference-th-inner {
  background: #7651db;
}

.rumi-difference-table tbody tr:first-child td {
  padding-top: 1.35rem;
}

/* Gutter column (desktop): 20px wide, caps at 30px — hidden on mobile */
.rumi-difference-table thead th.rumi-difference-col-spacer,
.rumi-difference-table tbody td.rumi-difference-col-spacer {
  width: 20px;
  min-width: 20px;
  max-width: 30px;
  padding: 0;
  border: none !important;
  background: transparent;
  box-sizing: border-box;
}

.rumi-difference-table tbody td.rumi-difference-col-spacer {
  border-bottom: none !important;
}

.rumi-difference-table th,
.rumi-difference-table td {
  border: none;
  padding-left: 0;
  padding-right: 0;
  vertical-align: middle;
}

/* Must stay table-cell — flex on td breaks the two-column row layout */
.rumi-difference-table tbody td {
  display: table-cell;
  text-align: left;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 16px;
  line-height: 130%;
  font-weight: 400;
  font-family: var(--rumi-font-body);
  color: #fff;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

body.rumi-engagement-page .rumi-difference-table tbody td > .rumi-diff-table-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0.75rem;
  line-height: 0;
  flex-shrink: 0;
}

body.rumi-engagement-page .rumi-difference-table .rumi-diff-table-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

/*
 * <992px: grid + display:contents + order — whole “Before” column first, then “With”.
 * Must follow base th/td rules so display:block / width / order win the cascade.
 */
@media (max-width: 991.98px) {
  .rumi-difference-box .rumi-difference-table.table {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-spacing: 0;
    table-layout: auto;
  }

  .rumi-difference-table thead,
  .rumi-difference-table tbody,
  .rumi-difference-table tr {
    display: contents;
  }

  .rumi-difference-table thead th,
  .rumi-difference-table tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .rumi-difference-table thead th.rumi-difference-col-spacer,
  .rumi-difference-table tbody td.rumi-difference-col-spacer {
    display: none !important;
  }

  .rumi-difference-table th.rumi-difference-before {
    order: 1;
  }

  .rumi-difference-table td.rumi-difference-cell-before {
    order: 2;
  }

  .rumi-difference-table th.rumi-difference-with {
    order: 3;
    margin-top: 1.25rem;
  }

  .rumi-difference-table td.rumi-difference-cell-with {
    order: 4;
  }

  .rumi-difference-table thead th {
    width: 100%;
  }

  .rumi-difference-table thead tr th.rumi-difference-before .rumi-difference-th-inner,
  .rumi-difference-table thead tr th.rumi-difference-with .rumi-difference-th-inner {
    border-radius: 12px 12px 0 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.rumi-difference-table tbody tr:last-child td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

@media (max-width: 575.98px) {
  .rumi-difference-table thead th .rumi-difference-th-inner {
    font-size: 0.5625rem;
    padding: 0 0.5rem;
    letter-spacing: 0.1em;
    height: 64px;
    min-height: 64px;
  }

  /* Stacked headers: both full-width tabs (matches <992 column stack) */
  .rumi-difference-table thead tr th.rumi-difference-before .rumi-difference-th-inner,
  .rumi-difference-table thead tr th.rumi-difference-with .rumi-difference-th-inner {
    border-radius: 10px 10px 0 0;
  }

  .rumi-difference-table tbody td {
    font-size: 16px;
    line-height: 130%;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  body.rumi-engagement-page .rumi-difference-table tbody td > .rumi-diff-table-icon {
    margin-right: 0.5rem;
  }
}

@media (min-width: 992px) {
  /* Restore normal table layout (side‑by‑side comparison rows) */
  .rumi-difference-table thead {
    display: table-header-group;
  }

  .rumi-difference-table tbody {
    display: table-row-group;
  }

  .rumi-difference-table tr {
    display: table-row;
  }

  .rumi-difference-table thead th,
  .rumi-difference-table tbody td {
    display: table-cell;
    order: unset;
    margin-top: 0;
  }

  body.rumi-engagement-page #rumi-difference .rumi-difference-table-wrap {
    padding-left: 107px;
    padding-right: 107px;
    box-sizing: border-box;
  }

  .rumi-difference-box .rumi-difference-table.table {
    display: table;
    border-spacing: 0;
    table-layout: fixed;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Before / With columns 325px; middle column is .rumi-difference-col-spacer (20px, max 30px) */
  .rumi-difference-table tbody td:nth-child(1),
  .rumi-difference-table tbody td:nth-child(3),
  .rumi-difference-table thead tr th.rumi-difference-before,
  .rumi-difference-table thead tr th.rumi-difference-with {
    width: 325px;
    min-width: 325px;
    max-width: 325px;
    box-sizing: border-box;
  }

  /* Keep th as table-cell; align the inline-flex .rumi-difference-th-inner with text-align */
  .rumi-difference-table thead tr th.rumi-difference-before {
    text-align: left;
  }

  .rumi-difference-table thead tr th.rumi-difference-with {
    text-align: right;
  }

  .rumi-difference-table thead tr th.rumi-difference-before .rumi-difference-th-inner,
  .rumi-difference-table thead tr th.rumi-difference-with .rumi-difference-th-inner {
    width: 325px;
    min-width: 325px;
    max-width: 325px;
  }

  /* Folder tabs; label text centered inside chip via .rumi-difference-th-inner */
  .rumi-difference-table thead tr th.rumi-difference-before .rumi-difference-th-inner {
    border-radius: 0 32px 0 0;
  }

  .rumi-difference-table thead tr th.rumi-difference-with .rumi-difference-th-inner {
    border-radius: 32px 0 0 0;
  }

  .rumi-difference-table tbody td {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .rumi-difference-table tbody td.rumi-difference-col-spacer {
    padding-top: 0;
    padding-bottom: 0;
  }

  .rumi-difference-table tbody tr:first-child td {
    padding-top: 32px;
  }

  .rumi-difference-table tbody tr:first-child td.rumi-difference-col-spacer {
    padding-top: 0;
  }
}

/* Default rumi icons elsewhere (if reused outside difference table) */
.rumi-icon-x,
.rumi-icon-check {
  width: 1.25rem;
  height: 1.25rem;
}

.rumi-icon-x {
  background: var(--rumi-primary);
}

.rumi-icon-x::after {
  content: '×';
  margin: auto;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
}

.rumi-icon-check {
  background: var(--rumi-lavender-strong);
}

.rumi-icon-check::after {
  content: '';
  display: block;
  width: 0.35rem;
  height: 0.6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin: auto;
  margin-top: -0.2rem;
}

/* ========== 5. Why Rumi works (section.rumi-why-section) ========== */
section.rumi-why-section .rumi-why-headline {
  font-family: var(--rumi-font-display);
  font-weight: 400;
  color: var(--rumi-dark);
}

@media (max-width: 991.98px) {
  section.rumi-why-section .rumi-why-headline {
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
}

section.rumi-why-section .rumi-why-subtitle {
  color: #4b5563;
  font-family: var(--rumi-font-body);
}

/* Intro: direct children on one row — copy at start, nav at end (full container width) */
.rumi-why-intro-row,
section.rumi-why-section .rumi-why-intro-row,
section.rumi-why-section .rumi-why-intro-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 992px) {
  .rumi-why-intro-row,
  section.rumi-why-section .rumi-why-intro-row,
  section.rumi-why-section .rumi-why-intro-row {
    gap: 1.5rem;
  }
}

/* Copy: max 928px, anchored to start (not centered — would break space-between) */
.rumi-why-intro-copy,
section.rumi-why-section .rumi-why-intro-copy,
section.rumi-why-section .rumi-why-intro-copy {
  max-width: 928px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.rumi-why-intro-row > .rumi-why-intro-copy,
section.rumi-why-section .rumi-why-intro-row > .rumi-why-intro-copy,
section.rumi-why-section .rumi-why-intro-row > .rumi-why-intro-copy {
  margin-left: 0;
  margin-right: 0;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

/* Nav column: hug end edge */
.rumi-why-intro-row > .rumi-why-intro-nav,
section.rumi-why-section .rumi-why-intro-row > .rumi-why-intro-nav,
section.rumi-why-section .rumi-why-intro-row > .rumi-why-intro-nav {
  flex: 0 0 auto;
  align-self: flex-end;
  justify-content: flex-end;
}

/* Swiper prev/next moved here via custom.js (.rumi-why-carousel).
 * Standalone .rumi-why-intro-nav: intro paragraph is often a sibling of empty section.rumi-why-section section. */
.rumi-why-intro-nav,
section.rumi-why-section .rumi-why-intro-nav,
section.rumi-why-section .rumi-why-intro-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 10px;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

@media (min-width: 992px) {
  .rumi-why-intro-nav,
  section.rumi-why-section .rumi-why-intro-nav,
  section.rumi-why-section .rumi-why-intro-nav {
    justify-content: flex-end;
    align-self: flex-end;
  }
}

/* Why Rumi carousel nav: custom 40×40 SVG (rumi-why-carousel-nav.svg) */
.rumi-why-intro-nav .swiper-button,
section.rumi-why-section .rumi-why-intro-nav .swiper-button,
section.rumi-why-section .rumi-why-intro-nav .swiper-button {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  opacity: 1 !important;
  text-shadow: none !important;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.rumi-why-intro-nav .swiper-button:hover:after,
section.rumi-why-section .rumi-why-intro-nav .swiper-button:hover:after,
section.rumi-why-section .rumi-why-intro-nav .swiper-button:hover:after {
  filter: brightness(0.92);
}

.rumi-why-intro-nav .swiper-button.swiper-button-disabled,
section.rumi-why-section .rumi-why-intro-nav .swiper-button.swiper-button-disabled,
section.rumi-why-section .rumi-why-intro-nav .swiper-button.swiper-button-disabled {
  opacity: 0.4 !important;
}

.rumi-why-intro-nav .swiper-button:after,
section.rumi-why-section .rumi-why-intro-nav .swiper-button:after,
section.rumi-why-section .rumi-why-intro-nav .swiper-button:after {
  content: "" !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: static !important;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 0 !important;
  background: url("../img/rumi-why-carousel-nav.svg") no-repeat center / contain;
}

.rumi-why-intro-nav .swiper-button-prev:after,
section.rumi-why-section .rumi-why-intro-nav .swiper-button-prev:after,
section.rumi-why-section .rumi-why-intro-nav .swiper-button-prev:after {
  transform: none;
}

/* SVG points left; mirror for next */
.rumi-why-intro-nav .swiper-button-next:after,
section.rumi-why-section .rumi-why-intro-nav .swiper-button-next:after,
section.rumi-why-section .rumi-why-intro-nav .swiper-button-next:after {
  transform: scaleX(-1);
}

/* Nav moved out of overlay; hide empty absolute controls so they don’t block the carousel */
.rumi-why-carousel.rumi-why-nav-in-header .swiper-controls:empty,
section.rumi-why-section .rumi-why-carousel.rumi-why-nav-in-header .swiper-controls:empty {
  display: none !important;
}

/*
 * Why Rumi vertical rhythm (intro ↔ slider ↔ book): nested .container in field markup
 * prevents margin on .rumi-why-intro from spacing siblings; flex+gap on section > .container
 * gives 48px between paragraph wrappers. field_paragraph_spacing is a single token (space-xlg),
 * so this layout stays in CSS (not duplicate utility classes on the container).
 */
section.rumi-why-section > .container.space-xlg,
section.rumi-why-section > .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3rem !important; /* 48px at default 16px root; matches Bootstrap .gap-5 */
}

/* Reset inner intro/book padding — flex gap owns spacing between paragraph siblings */
section.rumi-why-section .rumi-why-intro,
section.rumi-why-section .rumi-why-intro {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

section.rumi-why-section .rumi-why-book-demo,
section.rumi-why-section .rumi-why-book-demo {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/*
 * Equal-height row: Swiper’s .swiper-wrapper is flex; force stretch so every .swiper-slide
 * matches the tallest slide in the row. (Otherwise short slides stay content-height only.)
 */
section.rumi-why-section .rumi-why-carousel .swiper-wrapper,
section.rumi-why-section .rumi-why-carousel .swiper-wrapper,
.paragraph--type--paragraph-slider-block .rumi-why-carousel .swiper-wrapper,
.swiper-container.rumi-why-carousel:not(.testimonials-carousel) .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

/* Carousel shell: vertical spacing (element with .rumi-why-carousel + .swiper-container). */
section.rumi-why-section .rumi-why-carousel.swiper-container,
section.rumi-why-section .rumi-why-carousel.swiper-container,
.paragraph--type--paragraph-slider-block .rumi-why-carousel.swiper-container,
.swiper-container.rumi-why-carousel:not(.testimonials-carousel) {
  margin-block: 48px;
}

/*
 * Why Rumi “works” carousel: base slide box model for all modes.
 * 350px fixed card width applies ONLY when CMS “Items auto” is on (data-items-auto) + slidesPerView: auto.
 * With items auto OFF, Swiper uses data-items-xs…xxl breakpoints (e.g. 1 xs, 3 lg) — do not force 350px.
 */
section.rumi-why-section .rumi-why-carousel.swiper-container:not(.testimonials-carousel) .swiper-slide,
section.rumi-why-section .rumi-why-carousel.swiper-container:not(.testimonials-carousel) .swiper-slide,
.paragraph--type--paragraph-slider-block .rumi-why-carousel:not(.testimonials-carousel) .swiper-slide,
.swiper-container.rumi-why-carousel:not(.testimonials-carousel) .swiper-slide {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
}

@media (min-width: 992px) {
  /* Why Rumi slides: cap width; equal row height via stretch + flex on slide/card (below). */
  section.rumi-why-section .rumi-why-carousel.swiper-container:not(.testimonials-carousel) .swiper-slide.rumi-why-slide,
  section.rumi-why-section .rumi-why-carousel.swiper-container:not(.testimonials-carousel) .swiper-slide.rumi-why-slide,
  .paragraph--type--paragraph-slider-block .rumi-why-carousel.swiper-container:not(.testimonials-carousel) .swiper-slide.rumi-why-slide,
  .swiper-container.rumi-why-carousel:not(.testimonials-carousel) .swiper-slide.rumi-why-slide {
    max-width: 350px;
  }

  section.rumi-why-section .rumi-why-carousel.swiper-container[data-items-auto="true"]:not(.testimonials-carousel) .swiper-slide,
  section.rumi-why-section .rumi-why-carousel.swiper-container[data-items-auto="true"]:not(.testimonials-carousel) .swiper-slide {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
  }
}

section.rumi-why-section .rumi-why-carousel .rumi-why-card,
section.rumi-why-section .rumi-why-carousel .rumi-why-card,
.paragraph--type--paragraph-slider-block .rumi-why-carousel .rumi-why-card,
.swiper-container.rumi-why-carousel:not(.testimonials-carousel) .rumi-why-card {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex-grow: 1;
}

/* Inline images at bottom of card fill remaining space when slides are stretched to one height. */
section.rumi-why-section .rumi-why-carousel .rumi-why-card > img:last-of-type,
section.rumi-why-section .rumi-why-carousel .rumi-why-card > img:last-of-type,
.paragraph--type--paragraph-slider-block .rumi-why-carousel .rumi-why-card > img:last-of-type,
.swiper-container.rumi-why-carousel:not(.testimonials-carousel) .rumi-why-card > img:last-of-type {
  margin-top: auto;
  max-width: 100%;
  height: auto;
}

/*
 * Slider item “set background”: image is on .swiper-slide.bg-image; the white card sat on top with
 * opaque bg-white — the photo was invisible. Slight translucency lets the slide background show through.
 */
section.rumi-why-section .rumi-why-carousel .swiper-slide.bg-image,
section.rumi-why-section .rumi-why-carousel .swiper-slide.bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 14rem;
}

section.rumi-why-section .rumi-why-carousel .swiper-slide.bg-image .rumi-why-card,
section.rumi-why-section .rumi-why-carousel .swiper-slide.bg-image .rumi-why-card {
  background-color: rgba(255, 255, 255, 0.92) !important;
}

/* Any swiper slide using paragraph “set background” (not only Why Rumi) */
.swiper-slide.bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Uploaded image above card (paragraph_slider_item when .rumi-why-slide + image + body) */
section.rumi-why-section .rumi-why-slide-media,
section.rumi-why-section .rumi-why-slide-media {
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0;
  background: #f3f4f6;
}

section.rumi-why-section .rumi-why-slide-media__img,
section.rumi-why-section .rumi-why-slide-media__img {
  max-height: 200px;
  width: 100%;
  object-fit: cover;
  vertical-align: middle;
}

section.rumi-why-section .swiper-slide:has(.rumi-why-slide-media) .rumi-why-card,
section.rumi-why-section .swiper-slide:has(.rumi-why-slide-media) .rumi-why-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Shell: h-100 rounded-3 border bg-white p-4 (Bootstrap); grey border token */
.rumi-why-card {
  border-color: #e5e7eb;
}

.rumi-why-card-title {
  font-family: var(--rumi-font-display);
  font-weight: 400;
  color: #1a1a2e;
}

@media (max-width: 991.98px) {
  .rumi-why-card-title {
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
}

.rumi-why-card-text {
  font-size: 16px;
  line-height: 130%;
  margin-bottom: 16px;
  color: #4b5563;
  font-family: var(--rumi-font-body);
}

/* ========== 6. Testimonials (#rumi-testimonials) ========== */
#rumi-testimonials.rumi-testimonials-section {
  position: relative;
  /* Allow Swiper dot pagination below the slider (theme .swiper-pagination uses bottom offset) */
  overflow-x: hidden;
  overflow-y: visible;
}

#rumi-testimonials.rumi-testimonials-section::before {
  content: '"';
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  font-size: min(25vw, 14rem);
  font-family: Georgia, serif;
  color: var(--rumi-lavender);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

#rumi-testimonials .container {
  position: relative;
  z-index: 1;
}

.rumi-testimonials-headline {
  font-family: var(--rumi-font-display);
  font-weight: 400;
  color: var(--rumi-dark);
}

@media (min-width: 992px) {
  /* Wins over Bootstrap .mb-5 on the h2 */
  #rumi-testimonials .rumi-testimonials-headline {
    margin-bottom: 40px !important;
  }
}

@media (max-width: 991.98px) {
  .rumi-testimonials-headline {
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
}

.testimonials-carousel .blockquote {
  padding: 2rem 1.5rem;
  margin: 0 auto;
  border-left: 0;
  text-align: center;
}

.testimonials-carousel .blockquote p {
  font-size: 1.25rem;
  font-family: Georgia, serif;
  line-height: 130%;
  color: #1a1a2e;
}

body.rumi-engagement-page .testimonials-carousel .blockquote p {
  font-family: var(--rumi-font-body);
}

.testimonials-carousel .blockquote-footer {
  margin: 0;
  font-weight: 600;
  color: #374151;
}

body.rumi-engagement-page .testimonials-carousel .blockquote-footer {
  font-family: var(--rumi-font-body);
}

.testimonials-carousel cite {
  display: block;
  font-size: 0.9em;
  color: var(--bs-secondary, #6c757d);
  font-style: normal;
  margin: 0;
  font-family: var(--rumi-font-body);
}

/* Testimonials: desktop typography & measure */
@media (min-width: 992px) {
  .testimonials-carousel .blockquote {
    max-width: 928px;
  }

  .testimonials-carousel .blockquote p {
    font-size: 36px;
    margin-bottom: 32px;
  }

  .testimonials-carousel .blockquote-footer,
  .testimonials-carousel cite {
    font-size: 20px;
  }
}

/*
 * Testimonials Swiper dots: beat martex style.css
 * (.swiper-controls .swiper-pagination .swiper-pagination-bullet — 3 classes + scale(0.6) shrinks dots).
 */
#rumi-testimonials .swiper-container .swiper-controls .swiper-pagination .swiper-pagination-bullet,
.testimonials-carousel.swiper-container .swiper-controls .swiper-pagination .swiper-pagination-bullet {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  box-sizing: border-box !important;
  margin: 0 4px !important;
  padding: 0 !important;
  border: 1px solid #372B57 !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-backface-visibility: visible;
}

#rumi-testimonials .swiper-container .swiper-controls .swiper-pagination .swiper-pagination-bullet:hover,
#rumi-testimonials .swiper-container .swiper-controls .swiper-pagination .swiper-pagination-bullet:focus,
.testimonials-carousel.swiper-container .swiper-controls .swiper-pagination .swiper-pagination-bullet:hover,
.testimonials-carousel.swiper-container .swiper-controls .swiper-pagination .swiper-pagination-bullet:focus {
  transform: none !important;
}

#rumi-testimonials .swiper-container .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.testimonials-carousel.swiper-container .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #372B57 !important;
  background-color: #372B57 !important;
  border-color: #372B57 !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Theme .swiper-container { overflow: hidden } can clip pagination — show dots below */
.testimonials-carousel.swiper-container {
  overflow: visible !important;
  position: relative;
}

/* Decorative quote mark: centered strip (max 928px); SVG sits on the right inside the strip */
.testimonials-carousel.swiper-container::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(100%, 928px);
  max-width: 928px;
  height: 457px;
  background: url('../images/rumi-testimonial-swiper-decor.svg') no-repeat right center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.testimonials-carousel.swiper-container > .swiper {
  position: relative;
  z-index: 1;
}

.testimonials-carousel.swiper-container > .swiper-controls {
  z-index: 2;
}

/* One testimonial at a time; dots centered under the slide */
.testimonials-carousel.swiper-container .swiper-slide,
#rumi-testimonials .swiper-container .swiper-slide {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  flex-shrink: 0 !important;
}

.testimonials-carousel > .swiper-controls {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  pointer-events: none;
}

.testimonials-carousel > .swiper-controls .swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  margin: 0;
  padding: 1.25rem 0 0;
  text-align: center;
  pointer-events: auto;
}

.testimonials-carousel > .swiper-controls .swiper-pagination .swiper-pagination-bullet {
  pointer-events: auto;
}

/* ========== 7. Final CTA (#rumi-cta) ========== */
/* Card shell; <img.rumi-cta-card__bg> is first child inside .rumi-cta-card__inner (create_home_page.php). */
#rumi-cta .rumi-cta-card,
body.rumi-engagement-page .rumi-cta-card {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: none;
  /* Mobile: top-left + bottom corners 40px; desktop override below */
  border-top-left-radius: 40px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

@media (min-width: 992px) {
  #rumi-cta .rumi-cta-card,
  body.rumi-engagement-page .rumi-cta-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 48px;
    border-bottom-right-radius: 48px;
  }
}

#rumi-cta .rumi-cta-card__bg,
body.rumi-engagement-page .rumi-cta-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* Anchor to top so “cover” crops excess from the bottom, not the head/top of the artwork */
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  user-select: none;
}

#rumi-cta .rumi-cta-card__inner,
body.rumi-engagement-page .rumi-cta-card__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  /* Mobile / <992px; desktop padding in next block */
  padding: 7.5rem 1.25rem 1.5rem !important;
}

@media (min-width: 992px) {
  #rumi-cta .rumi-cta-card__inner,
  body.rumi-engagement-page .rumi-cta-card__inner {
    padding: 175px 72px 88.5px !important;
    height: 670px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Row sits at bottom of 670px inner; columns align to bottom edge */
  #rumi-cta .rumi-cta-card__inner > .row,
  body.rumi-engagement-page .rumi-cta-card__inner > .row {
    position: relative;
    z-index: 1;
    align-items: flex-end !important;
  }
}

/* Arrow before “Book a demo” on CTA card */
body.rumi-engagement-page .rumi-cta-book-icon {
  display: block;
  flex-shrink: 0;
  margin-right: 12px;
}

/*
 * CTA “Book a demo”: black arrow on purple (Bootstrap .btn / svg fill needs !important).
 * Hover: lavender-strong shell + dark label + dark arrow (same tokens as .rumi-btn-lavender).
 */
body.rumi-engagement-page #rumi-cta a.btn.rumi-btn-primary .rumi-cta-book-icon path,
#rumi-cta a.btn.rumi-btn-primary .rumi-cta-book-icon path {
  fill: #000 !important;
}

body.rumi-engagement-page #rumi-cta a.btn.rumi-btn-primary:hover,
body.rumi-engagement-page #rumi-cta a.btn.rumi-btn-primary:focus-visible,
#rumi-cta a.btn.rumi-btn-primary:hover,
#rumi-cta a.btn.rumi-btn-primary:focus-visible {
  background-color: var(--rumi-lavender-strong) !important;
  background: var(--rumi-lavender-strong) !important;
  border-color: var(--rumi-lavender-strong) !important;
  color: var(--rumi-dark) !important;
  box-shadow: none !important;
}

body.rumi-engagement-page #rumi-cta a.btn.rumi-btn-primary:hover .rumi-cta-book-icon path,
body.rumi-engagement-page #rumi-cta a.btn.rumi-btn-primary:focus-visible .rumi-cta-book-icon path,
#rumi-cta a.btn.rumi-btn-primary:hover .rumi-cta-book-icon path,
#rumi-cta a.btn.rumi-btn-primary:focus-visible .rumi-cta-book-icon path {
  fill: var(--rumi-dark) !important;
}

/* Same treatment if the link is not under #rumi-cta (nested layout / CMS structure) */
body.rumi-engagement-page .rumi-cta-card a.btn.rumi-btn-primary .rumi-cta-book-icon path {
  fill: #000 !important;
}

body.rumi-engagement-page .rumi-cta-card a.btn.rumi-btn-primary:hover,
body.rumi-engagement-page .rumi-cta-card a.btn.rumi-btn-primary:focus-visible {
  background-color: var(--rumi-lavender-strong) !important;
  background: var(--rumi-lavender-strong) !important;
  border-color: var(--rumi-lavender-strong) !important;
  color: var(--rumi-dark) !important;
  box-shadow: none !important;
}

body.rumi-engagement-page .rumi-cta-card a.btn.rumi-btn-primary:hover .rumi-cta-book-icon path,
body.rumi-engagement-page .rumi-cta-card a.btn.rumi-btn-primary:focus-visible .rumi-cta-book-icon path {
  fill: var(--rumi-dark) !important;
}

/* Don’t clip outside the card (theme wrappers); card clips the <img> (radii on .rumi-cta-card) */
#rumi-cta,
#rumi-cta.rumi-cta-section,
section#rumi-cta .paragraph,
#rumi-cta .container {
  overflow: visible !important;
}

.rumi-cta-card-headline {
  font-family: var(--rumi-font-display);
  font-weight: 400;
  color: #fff;
  /* Stack spacing: .mb-32 on markup (create_home_page.php) */
}

@media (max-width: 991.98px) {
  .rumi-cta-card-headline {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 992px) {
  body.rumi-engagement-page .rumi-cta-card-headline {
    font-size: 64px;
  }
}

.rumi-cta-card-text {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--rumi-font-body);
}

.rumi-cta-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------------------------------
 * Hero CTA form — late override: grid (not flex) so layout survives CSS order.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  section#rumi-hero form.rumi-hero-form,
  #rumi-hero form.rumi-hero-form {
    display: grid !important;
    grid-template-columns: minmax(0, 298px) minmax(0, 298px) minmax(0, 188px) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  section#rumi-hero form.rumi-hero-form .rumi-hero-input.rumi-hero-input--name,
  section#rumi-hero form.rumi-hero-form .rumi-hero-input.rumi-hero-input--email,
  #rumi-hero form.rumi-hero-form .form-control.rumi-hero-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 64px !important;
  }

  section#rumi-hero form.rumi-hero-form .rumi-hero-cta-btn,
  #rumi-hero form.rumi-hero-form .btn.rumi-hero-cta-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 64px !important;
  }
}

/* ========== Engagement footer (design: scripts/nodes/content/design/footer.png) ========== */
body.rumi-engagement-page .rumi-engagement-footer {
  --rumi-footer-bg: #f8f8fb;
  --rumi-footer-text: #5a5579;
  background: var(--rumi-footer-bg);
  color: var(--rumi-footer-text);
  font-family: var(--rumi-font-body);
  margin-top: 0;
}

body.rumi-engagement-page .rumi-engagement-footer__inner {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: 0;
  max-width: 1140px;
}

body.rumi-engagement-page .rumi-engagement-footer__links.list-unstyled,
body.rumi-engagement-page .rumi-engagement-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* Same spacing between items on both axes (list-unstyled + flex gap) */
  gap: 2rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

body.rumi-engagement-page .rumi-engagement-footer__links > li {
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  body.rumi-engagement-page .rumi-engagement-footer__links.list-unstyled,
  body.rumi-engagement-page .rumi-engagement-footer__links {
    gap: 2.5rem;
    margin-bottom: 1.125rem;
  }
}

body.rumi-engagement-page .rumi-engagement-footer__links a {
  color: var(--rumi-footer-text);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

body.rumi-engagement-page .rumi-engagement-footer__links a:hover,
body.rumi-engagement-page .rumi-engagement-footer__links a:focus-visible {
  color: var(--rumi-primary);
  text-decoration: underline;
}

body.rumi-engagement-page .rumi-engagement-footer__legal {
  text-align: center;
  font-size: 0.875rem;
  margin: 0 0 2.5rem;
  color: var(--rumi-footer-text);
}

body.rumi-engagement-page .rumi-engagement-footer__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.rumi-engagement-page .rumi-engagement-footer__legal a:hover {
  color: var(--rumi-primary);
}

body.rumi-engagement-page .rumi-engagement-footer__sep {
  margin: 0 0.35rem;
  opacity: 0.85;
}

/* Brand lockup SVG (footer--engagement.html.twig) */
body.rumi-engagement-page .rumi-engagement-footer__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 -0.75rem;
}

@media (min-width: 576px) {
  body.rumi-engagement-page .rumi-engagement-footer__brand {
    margin: 0;
  }
}

body.rumi-engagement-page .rumi-engagement-footer__brand-visual {
  width: 100%;
  max-width: 1199px;
  margin: 0 auto;
  line-height: 0;
}

@media (max-width: 767.98px) {
  body.rumi-engagement-page .rumi-engagement-footer__brand-visual {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }
}

body.rumi-engagement-page .rumi-engagement-footer__brand-svg {
  width: 100%;
  height: auto;
  display: block;
}