.quoter-section {
  position: relative;
  width: var(--quoter-vw, 100vw);
  margin-left: calc(50% - var(--quoter-vw, 100vw) / 2);
  margin-right: calc(50% - var(--quoter-vw, 100vw) / 2);
  padding: 60px 0px;
  background: var(--quoter-fondo, transparent);
  overflow: hidden;
  box-sizing: border-box;
}

.quoter-section *,
.quoter-section *::before,
.quoter-section *::after {
  box-sizing: border-box;
}

.quoter-section,
.quoter-section * {
  font-family: 'Ubuntu', sans-serif !important;
}

.quoter-container {
  max-width: 1300px;
  margin: 0 auto;
}

/* --- Cabecera ------------------------------------------------------------
   `titulo` es un texto enriquecido único: se estila por etiqueta. */

.quoter-header {
  margin-bottom: 40px;
  text-align: center;
}

.quoter-title > *:first-child { margin-top: 0; }
.quoter-title > *:last-child { margin-bottom: 0; }

.quoter-title h1,
.quoter-title h2,
.quoter-title h3,
.quoter-title h4,
.quoter-title h5,
.quoter-title h6 {
  max-width: 760px;
  margin: 0 auto;
  color: #0F172A;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}



.quoter-section h1 span,
.quoter-section h2 span,
.quoter-section h3 span,
.quoter-section h4 span,
.quoter-section h5 span,
.quoter-section h6 span {
  color: #FF4B2B;
}

.quoter-title p {
  max-width: 850px;
  margin: 16px auto 0;
  color: #28292C;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.quoter-title hr {
  width: 30px;
  height: 2px;
  margin: 24px auto;
  border: 0;
  border-radius: 2px;
  background: #FF4B2B;
}

/* --- Rejilla de dos columnas --------------------------------------------- */

.quoter-layout {
  display: grid;
  grid-template-columns: 456px minmax(0, 1fr);
  align-items: stretch; /* ambas tarjetas al alto de la más alta */
  gap: 32px;
}

/* --- Formulario ----------------------------------------------------------- */

.quoter-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 16px 32px 8px rgba(16, 26, 119, 0.12);
}

.quoter-form-title {
  margin: 0;
  color: #0F172A;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}

.quoter-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quoter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quoter-submit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* El <label> envuelve todo el control: pinchar en cualquier punto enfoca */
.quoter-input {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 8px 0 12px;
  border: 1.5px solid #64748B;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: text;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.quoter-input:focus-within {
  border-color: #FF4B2B;
  box-shadow: 0 0 0 3px rgba(255, 75, 43, 0.15);
}

.quoter-field.is-invalid .quoter-input {
  border-color: #F72717;
}

.quoter-input-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #64748B;
}

.quoter-input-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke-width: 1px;
  shape-rendering: geometricPrecision;
}

/* Floating label. En el DOM el <input> va antes que el label; con
   column-reverse el label se ve encima. Así el CSS puede detectar el campo
   vacío con :placeholder-shown y actuar sobre el label hermano, sin JS. */
.quoter-input-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column-reverse;
  justify-content: center;
  height: 48px;
  min-width: 0;
}

.quoter-input-label {
  color: #475569;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: font-size 150ms ease, line-height 150ms ease;
}

/* El <input> va totalmente desnudo: el borde, el radio y el fondo que se ven
   son los de .quoter-input. Los temas de HubSpot estilan los input con
   selectores muy específicos (borde, fondo, sombra, alto mínimo y radio), así
   que hay que neutralizarlos con !important o reaparece una segunda caja
   dentro del campo. */
.quoter-input .quoter-input-control,
.quoter-input .quoter-input-control:hover,
.quoter-input .quoter-input-control:focus,
.quoter-input .quoter-input-control:active {
  display: block;
  width: 100%;
  max-width: none;
  /* min-height con !important: si el tema fija un alto mínimo, gana al height
     y el campo no se puede replegar en el estado vacío. */
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #0F172A !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  transition: height 150ms ease, opacity 150ms ease;
}

.quoter-input .quoter-input-control {
  height: 24px !important;
}

/* Autofill de Chrome: también pinta fondo y borde propios */
.quoter-input .quoter-input-control:-webkit-autofill {
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: #0F172A;
}

/* Vacío y sin foco: el input se repliega y el label ocupa el centro a 16px,
   haciendo de placeholder (estado por defecto del Figma, nodo 2823:11990). */
.quoter-input .quoter-input-control:placeholder-shown:not(:focus) {
  height: 0 !important;
  opacity: 0;
}

.quoter-input .quoter-input-control:placeholder-shown:not(:focus) ~ .quoter-input-label {
  font-size: 16px;
  line-height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .quoter-input-label,
  .quoter-input-control {
    transition: none;
  }
}

.quoter-hint,
.quoter-form-note {
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.quoter-error {
  margin: -24px 0 0;
  color: #F72717;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.quoter-warning {
  margin: -24px 0 0;
  color: #B25E02;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.quoter-error:not([hidden]) + .quoter-warning {
  margin-top: 8px;
}

/* --- Botones -------------------------------------------------------------- */

.quoter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 20px !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  background: var(
    --Vibrant-Red-Gradient,
    linear-gradient(
      0deg,
      var(--Button-Primary-Start, #FB1473) 0%,
      var(--Button-Primary-End, #F72717) 100%
    )
  ) !important;
  font-size: 16px;
  font-weight: 700 !important;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

.quoter-btn:hover {
  border-color: transparent !important;
  background: linear-gradient(
    180deg,
    #EA2718 0%,
    #BC1157 100%
  ) !important;
  text-decoration: none !important;
}

.quoter-btn:focus,
.quoter-btn:focus-visible {
  border: 2px solid #000000 !important;

  background: var(
    --Vibrant-Red-Gradient,
    linear-gradient(
      0deg,
      var(--Button-Primary-Start, #FB1473) 0%,
      var(--Button-Primary-End, #F72717) 100%
    )
  ) !important;

  outline: none !important;
  text-decoration: none !important;
}

.quoter-btn:active,
.quoter-btn:active:focus,
.quoter-btn:active:focus-visible {
  background: #9A102E !important;
  border-color: transparent !important;
  outline: none !important;
}

.quoter-btn[disabled],
.quoter-btn.is-disabled,
.quoter-btn[aria-disabled="true"] {
  background: #949494 !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Panel de resultados --------------------------------------------------- */

.quoter-results {
  position: relative;
  padding: 40px;
  border-radius: 24px;
  background: var(--sc-bg-resultados, #EBF2F8);
}

/* Los dos estados se conmutan por atributo, no desde el JS con style.display */
.quoter-results[data-state="empty"] .quoter-output { display: none; }
.quoter-results[data-state="ready"] .quoter-skeleton { display: none; }
.quoter-results[data-state="ready"] .quoter-empty-badge { display: none; }

/* --- Aviso sobre el esqueleto ---------------------------------------------- */

.quoter-empty-badge {
  position: absolute;
  left: 50%;
  top: calc(50% - 49px);
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 80px);
  padding: 16px;
  border: 1px solid #C6D3DB;
  border-radius: 24px;
  background: rgba(170, 191, 206, 0.34);
  backdrop-filter: blur(2.65px);
  -webkit-backdrop-filter: blur(2.65px);
}

.quoter-empty-badge-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
}

.quoter-empty-badge-text {
  margin: 0;
  max-width: 301px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #475569;
}

/* --- Esqueleto de carga ---------------------------------------------------- */

.quoter-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quoter-sk {
  display: block;
  border-radius: 12px;
  background: #DDE8F0;
}

.quoter-sk-title { width: 296px; height: 28px; margin: 0 auto; }
.quoter-sk-figure { width: 262px; height: 60px; margin: 0 auto 8px; }
.quoter-sk-line { width: 100%; height: 14px; border-radius: 7px; }
.quoter-sk-line-short { width: 72%; }

.quoter-sk-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 76px;
  margin-top: 8px;
}

.quoter-sk-card { height: 172px; border-radius: 24px; }

.quoter-sk-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 8px;
}

.quoter-sk-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
}

.quoter-sk-btn { flex: 0 0 318px; height: 52px; }

/* Barrido suave sobre los bloques del esqueleto */
.quoter-skeleton .quoter-sk {
  position: relative;
  overflow: hidden;
}

.quoter-skeleton .quoter-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  animation: quoter-shimmer 1.6s ease-in-out infinite;
}

@keyframes quoter-shimmer {
  100% { transform: translateX(100%); }
}

/* --- Resultados ------------------------------------------------------------ */

.quoter-output {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.quoter-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.quoter-headline-label {
  max-width: 306px;
  margin: 0;
  color: #0F172A;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}

.quoter-headline-figure {
  margin: 0;
  padding: 8px 24px;
  border-radius: 12px;
  background: #FFFFFF;
  color: #000000;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.quoter-lead {
  color: #28292C;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.quoter-lead > *:first-child { margin-top: 0; }
.quoter-lead > *:last-child { margin-bottom: 0; }
.quoter-lead p { margin: 0 0 8px; }
.quoter-lead strong { font-weight: 700; }

/* --- Tablas comparativas ---------------------------------------------------- */

.quoter-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 76px;
}

.quoter-table {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
}

.quoter-table-directo { background: var(--sc-bg-tabla-directo, #E4E2FA); }
.quoter-table-edenred { background: #FFFFFF; }

.quoter-table-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.quoter-table-directo .quoter-table-title { color: #0F172A; }
.quoter-table-edenred .quoter-table-title { color: #FF4B2B; }

.quoter-row {
  position: relative; /* ancla del tooltip: lo mantiene dentro de la tarjeta */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #0F172A;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* Texto en flujo normal, no flex: así puede partirse en varias líneas cuando
   la tarjeta se estrecha. Con display:flex el texto sería un ítem anónimo, que
   no admite min-width:0 y desbordaría la fila. */
.quoter-row-label {
  min-width: 0;
}

.quoter-row-value {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.quoter-row-total {
  font-weight: 700;
}

.quoter-row-total .quoter-row-label,
.quoter-row-total .quoter-row-value {
  font-weight: 700;
}

/* --- Tooltips --------------------------------------------------------------
   Botón real en vez de :hover sobre un div: accesible con teclado y táctil. */

/* El icono acompaña a la última palabra de la etiqueta aunque esta se parta.
   La separación de 4px la aporta el espacio natural entre palabras, que además
   da un punto de corte para el salto de línea. */
/* Sin position: el panel es hijo suyo y necesita anclarse a .quoter-row. */
.quoter-tip {
  display: inline-flex;
  vertical-align: -4px;
}

.quoter-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: #F72717;
  cursor: pointer;
  appearance: none;
}

/* El tema global pinta button:hover con gradiente rojo, borde de 2px y
   color/fill blanco. Se anula con !important porque el CSS del tema carga
   después y hay reglas suyas marcadas. */
.quoter-tip-btn:hover,
.quoter-tip-btn:focus,
.quoter-tip-btn:active,
.quoter-tip-btn[aria-expanded="true"] {
  border: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #F72717 !important;
  fill: none !important;
}

.quoter-tip-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

.quoter-tip-btn:focus-visible {
  outline: 2px solid #FF4B2B;
  outline-offset: 2px;
  border-radius: 50%;
}

/* Se posiciona contra .quoter-row, no contra el icono: se ancla al borde
   izquierdo de la tarjeta y nunca se sale por ningún borde, a cualquier
   resolución.
   El ancho es el menor de tres: el que pide el texto (fit-content), el ancho
   útil de la fila (100%, para móvil) y un tope de ~34 caracteres. Ese tope es
   el que evita la línea larguísima en escritorio: los textos cortos ajustan el
   globo al contenido y los largos parten en varias líneas dentro de ese ancho,
   sin espacio sobrante a la derecha. */
.quoter-tip-text {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  width: fit-content;
  max-width: min(100%, 34ch);
  z-index: 5;
  padding: 12px 14px;
  border: 1px solid #DAE4F3;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(16, 26, 119, 0.16);
  color: #475569;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.quoter-tip-text::after {
  content: "";
  position: absolute;
  top: calc(100% - 16px);
  left: var(--quoter-tip-flecha, 50%);
  z-index: 1;
  width: 23px;
  height: 20px;
  transform: translateX(-50%) scaleY(-1);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="20" viewBox="0 0 23 20" fill="none"><path d="M11.2583 0L22.5166 19.5H0L11.2583 0Z" fill="white"/></svg>') no-repeat center / 23px 20px;
  pointer-events: none;
}

.quoter-tip:hover .quoter-tip-text,
.quoter-tip-btn[aria-expanded="true"] + .quoter-tip-text {
  opacity: 1;
  visibility: visible;
}

/* --- Pie del panel ---------------------------------------------------------- */

.quoter-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.quoter-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #28292C;
}

.quoter-benefits-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.quoter-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* margin:0 explícito: los temas de HubSpot suelen dar margen inferior a los
   <li> y eso separaba los beneficios muy por encima de los 8px del Figma. */
.quoter-benefits-list li {
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.quoter-benefits-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #0DBA69;
}

.quoter-btn-cta {
  flex-shrink: 0;
}

.quoter-veil {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.quoter-results[data-locked="true"] .quoter-veil {
  display: block;
}

.quoter-results[data-locked="true"] .quoter-output {
  pointer-events: none;
  user-select: none;
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .quoter-veil { background: rgba(235, 242, 248, 0.94); }
}

.quoter-gate {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 420px;
  padding: 0 24px;
}

.quoter-gate[hidden] {
  display: none;
}

.quoter-gate-panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 40px;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 16px 16px rgba(16, 26, 119, 0.12);
}

.quoter-gate-panel[hidden] {
  display: none;
}

.quoter-gate-title {
  margin: 0;
  color: #0F172A;
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.quoter-gate-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.quoter-gate .quoter-input-icon-movil {
  width: 16px;
}

.quoter-gate .quoter-input-icon-movil svg {
  width: 16px;
  height: 20px;
}

.quoter-gate-form .quoter-btn {
  width: 100%;
}

.quoter-gate .quoter-error {
  margin: 0;
}

.quoter-gate-done {
  align-items: center;
  text-align: center;
}

.quoter-gate-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0DBA69;
  color: #FFFFFF;
}

.quoter-gate-done-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.quoter-gate-text {
  color: #475569;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.quoter-gate-text > *:first-child { margin-top: 0; }
.quoter-gate-text > *:last-child { margin-bottom: 0; }
.quoter-gate-text p { margin: 0 0 8px; }

/* --- Movimiento reducido ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .quoter-skeleton .quoter-sk::after { animation: none; }
  .quoter-btn { transition: none !important; }
  .quoter-tip-text { transition: none; }
}

/* --- Laptop ------------------------------------------------------------------ */

@media (max-width: 1199px) {
  .quoter-section {
    padding: 64px 40px;
  }

  .quoter-layout {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 24px;
  }

  .quoter-tables,
  .quoter-sk-cards {
    gap: 24px;
  }

  .quoter-results {
    padding: 32px;
  }

  .quoter-sk-btn {
    flex-basis: 240px;
  }
}

/* --- Tablet: una columna ------------------------------------------------------ */

@media (max-width: 991px) {
  .quoter-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .quoter-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .quoter-btn-cta {
    width: 100%;
  }

  .quoter-sk-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .quoter-sk-btn {
    flex-basis: auto;
    width: 100%;
  }
}

/* --- Mobile -------------------------------------------------------------------- */

@media (max-width: 767px) {
  .quoter-section {
    padding: 48px 24px;
  }

  .quoter-gate {
    padding: 0 16px;
  }

  .quoter-gate-panel {
    gap: 24px;
    padding: 24px;
  }

  .quoter-gate-form {
    gap: 24px;
  }

  .quoter-header {
    margin-bottom: 24px;
    text-align: left;
  }

  .quoter-title h1,
  .quoter-title h2,
  .quoter-title h3,
  .quoter-title h4,
  .quoter-title h5,
  .quoter-title h6 {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    font-size: 28px;
  }

  .quoter-title p,
  .quoter-title hr {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .quoter-form,
  .quoter-results {
    padding: 24px;
  }

  /* El aviso se ancla arriba del esqueleto y apila icono sobre texto */
  .quoter-empty-badge {
    top: 42px;
    left: 42px;
    right: 42px;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: none;
    padding: 16px;
  }

  .quoter-empty-badge-icon {
    width: 40px;
    height: 40px;
  }

  /* La flecha apunta hacia arriba (mismo glifo, girado 90°) */
  .quoter-empty-badge-icon svg {
    width: 28.57px;
    height: 28.57px;
    transform: rotate(90deg);
  }

  .quoter-empty-badge-text {
    max-width: none;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
  }

  .quoter-form {
    gap: 32px;
  }

  .quoter-form-title {
    font-size: 24px;
  }

  .quoter-btn {
    width: 100%;
  }

  .quoter-headline {
    align-items: flex-start;
    text-align: left;
  }

  .quoter-headline-label {
    max-width: none;
  }

  .quoter-headline-figure {
    align-self: stretch;
    font-size: 36px;
    text-align: center;
  }

  .quoter-tables,
  .quoter-sk-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}