/* Variables globales de color usadas en toda la web. */
:root {
  --paper: #f6f3ee;
  --cream: #f6f3ee;
  --terracotta: #c97a68;
  --terracotta-dark: #bd6f5f;
  --violet: #807080;
  --brown: #4e362d;
  --ink: #3f332f;
  --muted: #695f5b;
  --line: rgba(78, 54, 45, 0.14);
}

/* Reset mínimo para calcular anchos de forma predecible. */
* {
  box-sizing: border-box;
}

/* Comportamiento general del documento. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  overflow-x: clip;
}

/* Estilos base: fondo, tipografía y color principal. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.58;
  overflow-x: clip;
}

/* Enlaces sin subrayado para mantener estética de navegación. */
a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--brown);
  outline-offset: 4px;
}

.site-header a:focus-visible,
.button:focus-visible,
.notice-dialog__button:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 5px rgba(78, 54, 45, 0.32);
}

/* Imágenes fluidas para evitar desbordes. */
img {
  display: block;
  max-width: 100%;
}

/* Cabecera sticky con navegación principal. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 4vw, 58px);
  min-height: 82px;
  padding: 18px clamp(18px, 5vw, 80px);
  background: var(--terracotta);
  backdrop-filter: blur(14px);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

/* Evita saltos de línea en los enlaces del menú. */
.nav-link {
  white-space: nowrap;
}

/* Botones principales y llamada a la acción del menú. */
.nav-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--terracotta);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Tamaño específico del botón del menú. */
.nav-cta {
  padding: 6px 12px;
}

/* Tamaño específico de botones dentro del contenido. */
.button {
  min-height: 32px;
  padding: 7px 15px;
}

/* Contenedor estándar para secciones centradas. */
.panel {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(5px, 3vw, 12px) 0;
}

/* Compensa la cabecera sticky al saltar desde el menú. */
[id] {
  scroll-margin-top: 120px;
}

/* Permite que ciertos bloques ocupen todo el ancho de pantalla. */
.full-bleed {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Alinea bloques full-width con el ancho del contenido central. */
.padded-bleed {
  padding-left: max(22px, calc((100vw - 1120px) / 2));
  padding-right: max(22px, calc((100vw - 1120px) / 2));
}

/* Reset de márgenes y altura de línea en titulares. */
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.12;
}

/* Tipografía serif para titulares principales. */
h1,
h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
}

/* Titular principal del hero. */
h1 {
  color: var(--violet);
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
  text-align: center;
}

/* Titulares de sección. */
h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.65rem);
}

/* Subtítulos y hashtags grandes. */
h3 {
  font-size: clamp(1rem, 1.45vw, 1.25rem);
}

ul {
  list-style-type: square;
  font-size: 1.2rem;
}
/* Color general del texto corrido y listas. */
p,
li {
  color: var(--muted);
}

/* Frases destacadas con estilo manuscrito. */
.script {
  color: inherit;
  font-family: "La Belle Aurore", "Brush Script MT", cursive;
  font-size: clamp(1.45rem, 2.8vw, 2.55rem);
  line-height: 1.25;
}

/* Utilidad para centrar texto. */
.centered {
  text-align: center;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-terracotta,
.heading--terracotta {
  color: var(--terracotta);
}

.heading--brown,
.hash--brown {
  color: var(--brown);
}

.heading--violet,
.hash--violet {
  color: var(--violet);
}

/* Hero: bloque inicial con logo, titular y CTA. */
.hero-panel {
  min-height: auto;
  display: grid;
  align-content: start;
  gap: clamp(18px, 5vw, 36px);
  padding-top: 0;
}

/* Tamaño del logo del hero. */
.hero-logo {
  width: min(900px, 82vw);
  margin: 0 auto;
}

.hero-logo__image {
  float: left;
}

.hero-title {
  text-align: right;
}

/* Grid interno del hero. */
.hero-grid {
  display: grid;
  align-items: center;
  gap: clamp(24px, 6vw, 92px);
}

/* Texto y botón del hero. */
.hero-text {
  max-width: 520px;
  text-align: center;
}

/* Separación entre párrafos del hero. */
.hero-text p {
  margin: 0 0 12px;
}

/* Separación del CTA del hero. */
.hero-text .button {
  margin-top: 12px;
}

/* Bloque terracota de introducción con texto e imagen. */
.terracotta-block {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.05fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding-block: clamp(36px, 6vw, 72px);
  background: var(--terracotta);
}

.terracotta-block__image {
  width: auto;
  height: 100%;
}

/* Texto blanco dentro del bloque terracota. */
.terracotta-block h2,
.terracotta-block p {
  color: #fff;
}

/* Ancho máximo del texto introductorio. */
.intro-copy {
  max-width: 455px;
}

/* Titulares compactos de intro. */
.intro-copy h2 {
  margin-bottom: 24px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 800;
}

/* Tres columnas principales de servicios. */
.three-focus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: start;
}

/* Alineación de cada tarjeta de servicio. */
.three-focus article {
  text-align: left;
}

/* Iconos/imágenes de las tres áreas. */
.three-focus img {
  width: min(170px, 70%);
  height: 170px;
  object-fit: contain;
  margin-bottom: 18px;
}

/* Títulos de las tres áreas. */
.three-focus h3 {
  color: var(--brown);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
}

/* Hashtags de servicio. */
.hash {
  margin: 4px 0 18px;
  color: var(--terracotta);
  font-weight: 700;
}

/* Sección de testimonio y presentación personal. */
.testimonial {
  scroll-margin-top: 118px;
  width: 100%;
  margin: 0;
  padding: clamp(36px, 5vw, 70px) 0 0;
}

/* Cita/testimonio a ancho completo. */
.testimonial blockquote {
  margin: 0;
  padding: clamp(46px, 6vw, 82px) 0;
  background: var(--terracotta);
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  font-style: italic;
  line-height: 1.55;
  text-align: center;
}

/* Contenido del texto del testimonio. */
.testimonial blockquote p {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  color: #fff;
}

/* Grid de la sección “Über mich”. */
.testimonial-about {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(220px, 330px);
  align-items: start;
  gap: clamp(30px, 6vw, 74px);
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(38px, 6vw, 72px) clamp(30px, 7vw, 118px) clamp(56px, 8vw, 94px);
  background: var(--cream);
}

.testimonial-copy {
  margin-top: 30px;
}

/* Foto de Melanie en la sección personal. */
.testimonial-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Cita de Frida Kahlo con estilo manuscrito. */
.kahlo {
  margin: 0 0 clamp(38px, 6vw, 66px);
  color: var(--brown);
  font-family: "La Belle Aurore", "Brush Script MT", cursive;
  font-size: clamp(1.35rem, 2.4vw, 2.25rem);
  line-height: 1.65;
  text-align: center;
}

/* Separación del titular dentro del bloque personal. */
.about-text h2 {
  margin-bottom: 24px;
}

/* Ajusta la parte superior del panel de cualificación. */
.qualification-panel {
  padding-top: 0;
}

/* Elimina margen superior extra de la banda de cualificación. */
.qualification-panel .qualification-band {
  margin-top: 0;
}

/* Banda violeta con formación y Weiterbildung. */
.qualification-band {
  grid-column: 1 / -1;
  display: grid;
  gap: 26px;
  margin-top: clamp(36px, 5vw, 70px);
  padding-block: clamp(34px, 5vw, 62px);
  background: var(--violet);
  color: #fff;
}

/* Texto blanco dentro de la banda de cualificación. */
.qualification-band h3,
.qualification-band li {
  color: #fff;
}

/* Subtítulos compactos de cualificación. */
.qualification-band h3 {
  font-size: 1.5rem;
  text-transform: uppercase;
}

/* Lista destacada en negrita. */
.strong-list {
  font-weight: 700;
}

/* Panel separador para el título “Therapieangebot”. */
.title-panel {
  width: min(1120px, calc(100% - 44px));
  min-height: 12vh;
  display: flex;
  align-items: flex-end;
  justify-content: right;
  margin: 0 auto;
  padding: 0 0 clamp(20px, 7vw, 48px);
}

/* Color del título del separador. */
.title-panel h2 {
  color: var(--brown);
}

/* Grid de secciones con texto e imágenes. */
.split {
  display: grid;
  align-items: center;
  gap: clamp(30px, 5vw, 76px);
}

/* Márgenes y color base de titulares de secciones clave. */
.split h2,
.osteo-copy h2,
.women-copy h2,
.prices-panel h2,
.refund-panel h2,
.contact-panel h2 {
  margin-bottom: 14px;
  color: var(--brown);
}

/* Estilo de subtítulos/hashtags en secciones clave. */
.split h3,
.osteo-copy h3,
.women-copy h3,
.prices-panel h3,
.refund-panel h3 {
  margin-bottom: 22px;
  color: var(--terracotta);
}

/* Lista terracota de indicaciones de fisioterapia. */
.terracotta-list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(180px, 260px);
  gap: 28px clamp(28px, 5vw, 52px);
  margin-top: 42px;
  padding-block: clamp(28px, 5vw, 58px);
  background: var(--terracotta);
  font-size: clamp(1rem, 1.4vw, 1.55rem);
}

/* Elementos de lista en la banda terracota. */
.terracotta-list li {
  margin-bottom: 12px;
  color: #fff;
  font-weight: 500;
}

/* Frase centrada dentro de la banda terracota. */
.terracotta-list p {
  grid-column: 1 / -1;
  margin: 10px auto 0;
  color: #fff;
  font-weight: 500;
  text-align: center;
}

/* Imagen opcional dentro de la lista terracota. */
.terracotta-list img {
  width: 100%;
  align-self: start;
}

/* Banda de lista osteopática con imágenes anatómicas. */
.osteo-list-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(320px, 0.58fr);
  align-items: center;
  gap: clamp(34px, 8vw, 104px);
  width: 100%;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(22px, calc((100vw - 1120px) / 2));
  padding-right: max(22px, calc((100vw - 1120px) / 2));
  background: #fff;
}

/* Alinea la lista osteopática igual que las listas anteriores. */
.osteo-list-panel ul {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  text-align: left;
}

/* Espaciado de listas largas. */
.osteo-list-panel li,
.women-list li {
  margin-top: 18px;
  margin-bottom: 18px;
}

/* Bloque de explicación de Frauengesundheit. */
.women-health {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  margin-top: 30px;
}

/* Imagen izquierda y texto derecho dentro de Frauengesundheit. */
.women-health-intro {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: start;
  gap: 24px;
}

/* Tamaño de la imagen del bloque Frauengesundheit. */
.women-health-intro img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* Galería horizontal de imágenes de tratamiento. */
.women-images {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}

/* Recorte proporcional de imágenes de la galería. */
.women-images img {
  width: 100%;
  aspect-ratio: 4 / 2.65;
  object-fit: cover;
}

/* Ajusta la galería de fisioterapia para acercar las fotos verticales. */
.physio-images {
  grid-template-columns: 1.35fr 0.62fr 0.62fr;
  gap: 8px;
}

/* Iguala la altura de la foto izquierda con las dos verticales en escritorio. */
@media (min-width: 861px) {
  .physio-images img:first-child {
    aspect-ratio: 4 / 2.75;
  }
}

/* Muestra fotos verticales completas, sin recortarlas con zoom. */
.women-images img.show-full-photo {
  aspect-ratio: 2 / 3;
  object-fit: contain;
}

/* Muestra completas las imágenes de tratamiento de Frauengesundheit. */
.treatment-images img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

/* Ilustraciones de etapas femeninas en tres columnas. */
.women-symbols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 24px);
  width: min(1200px, calc(100% - 44px));
  margin: 28px auto 0;
}
/* Mantiene cada ilustración completa dentro de su marco. */
.women-symbols img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Sección de lista sobre etapas y temas de salud femenina. */
.women-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 54px);
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Imagen inferior de la sección de salud femenina. */
.women-list > img {
  width: min(640px, 100%);
  margin: 0 auto;
}

/* Banda violeta con listado de Frauengesundheit. */
.violet-list {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: clamp(28px, 4vw, 46px);
  padding-left: max(22px, calc((100vw - 1120px) / 2));
  padding-right: max(22px, calc((100vw - 1120px) / 2));
  background: var(--violet);
}

/* Alinea la lista violeta igual que las listas anteriores. */
.violet-list ul {
  margin-left: 0;
  margin-right: 0;
}

/* Limita la frase manuscrita dentro de la banda violeta. */
/* Texto blanco de la lista violeta. */
.violet-list li {
  color: #fff;
}

/* Frase destacada del bloque violeta. */
.focus-quote {
  max-width: 980px;
  margin: clamp(28px, 5vw, 52px) auto 0;
  color: #fff;
  font-family: "La Belle Aurore", "Brush Script MT", cursive;
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  line-height: 1.35;
  text-align: center;
}

/* Grid de precios y explicación de reembolso. */
.prices-panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.62fr) minmax(300px, 0.38fr);
  gap: clamp(30px, 5vw, 72px);
}

/* Imagen opcional del bloque de precios. */
.prices-panel > img {
  width: 100%;
}

/* Alinea el texto de precios hacia la parte inferior. */
.price-copy {
  align-self: end;
  margin-top: 10px;
}

/* Banda terracota que contiene la tabla de precios. */
.price-band {
  grid-column: 1 / -1;
  padding-block: clamp(20px, 4vw, 42px);
  background: var(--terracotta);
}

/* Ancho del listado de precios. */
.price-band dl {
  width: min(560px, 100%);
  margin: 0;
}

/* Cada fila de precio: servicio a la izquierda, importe a la derecha. */
.price-band div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
}

/* Texto blanco y destacado en precios. */
.price-band dt,
.price-band dd {
  color: #fff;
  font-weight: 800;
}

/* Quita margen por defecto del importe. */
.price-band dd {
  margin: 0;
}

/* Bloque de Ablauf, requisitos y cancelación. */
.refund-panel {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(28px, 5vw, 62px);
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(22px, calc((100vw - 1120px) / 2));
  padding-right: max(22px, calc((100vw - 1120px) / 2));
}

/* Lista de preparación: misma escala serena que el texto de Absageregelung. */
.flow-copy ul {
  font-size: 1rem;
  line-height: 1.58;
}

.flow-copy li {
  margin-bottom: 10px;
}

/* Caja de política de cancelación. */
.cancel-box {
  align-self: end;
  padding: clamp(28px, 4vw, 46px);
  background: var(--cream);
}

/* Sección final de contacto. */
.contact-panel {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(54px, 8vw, 96px) 0;
}

/* Banda superior de contacto con columnas informativas. */
.contact-top {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 28px;
  padding-block: clamp(34px, 5vw, 58px);
  background: var(--terracotta);
}

/* Texto blanco dentro de contacto superior. */
.contact-top h2,
.contact-top h3,
.contact-top p {
  color: #fff;
}

/* Centra el título principal de contacto. */
.contact-top h2 {
  text-align: center;
}

/* Subtítulos compactos en contacto. */
.contact-top h3 {
  font-size: 0.92rem;
}

/* Bloque inferior de contacto con imagen y dirección. */
.contact-bottom {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(230px, 0.62fr);
  gap: 0;
  background: var(--cream);
}

/* Imagen de contacto a tamaño completo del grid. */
.contact-bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dirección y datos de contacto. */
address {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: clamp(30px, 5vw, 54px);
  font-style: normal;
}

/* Separación interna de etiquetas fuertes en dirección. */
address strong {
  margin-top: 12px;
}

/* Footer legal con enlaces a la derecha. */
.contact-panel footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 18px;
  font-size: 0.75rem;
}

/* Botones legales con apariencia de enlace de footer. */
.legal-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Capa oscura del pop-up legal. */
.legal-dialog::backdrop {
  background: rgba(63, 51, 47, 0.52);
}

/* Caja principal del pop-up legal. */
.legal-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: min(82vh, 760px);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
}

/* Contenido scrollable del pop-up. */
.legal-dialog__panel {
  position: relative;
  max-height: min(82vh, 760px);
  overflow: auto;
  padding: clamp(28px, 5vw, 48px);
  background: var(--paper);
}

/* Botón de cierre del pop-up. */
.legal-dialog__close {
  position: sticky;
  top: 0;
  float: right;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brown);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.legal-dialog__close:focus-visible {
  outline-color: var(--terracotta);
}

/* Espaciado y lectura cómoda del texto legal. */
.legal-dialog h2 {
  margin-bottom: 18px;
  color: var(--brown);
}

.legal-dialog p {
  margin: 0 0 16px;
}

.legal-dialog ul {
  margin: 0 0 16px;
  padding-left: 1.2rem;
  font-size: 1rem;
  line-height: 1.58;
}

.legal-dialog li {
  margin-bottom: 8px;
}

.legal-dialog li ul {
  margin: 8px 0 0;
  font-size: inherit;
}

/* Aviso inicial de actualidad. */
.notice-dialog {
  width: min(620px, calc(100% - 32px));
}

.notice-dialog__panel {
  text-align: center;
}

.notice-dialog h2 {
  margin-bottom: 30px;
  font-family: "Playfair Display", serif;
  color: var(--brown);
}

.notice-dialog__content {
  color: #4f4844;
  font-size: clamp(0.92rem, 2.4vw, 1.02rem);
  line-height: 1.45;
}

.notice-dialog__tag {
  color: var(--terracotta);
  font-size: 1.12rem;
  font-weight: 800;
  text-align: left;
}

.notice-dialog__subhead {
  margin-top: 22px;
  text-align: left;
  text-decoration: underline;
}

.notice-dialog__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 8px;
  padding: 0 22px;
  border: 1px solid var(--terracotta);
  background: var(--terracotta);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.notice-dialog__button:hover {
  background: var(--brown);
  border-color: var(--brown);
}

/* Ajustes responsive para tablets y pantallas medianas. */
@media (max-width: 860px) {
  .site-header {
    flex-wrap: wrap;
    gap: 8px 16px;
    min-height: auto;
    padding: 14px 16px;
  }

  .hero-grid,
  .terracotta-block,
  .three-focus,
  .testimonial-about,
  .split,
  .terracotta-list,
  .osteo-list-panel,
  .women-health,
  .prices-panel,
  .refund-panel,
  .contact-top,
  .contact-bottom {
    grid-template-columns: 1fr;
  }

  .hero-text {
    margin: 0 auto;
  }

  .contact-top h2 {
    text-align: left;
  }

  .testimonial-photo {
    width: min(340px, 100%);
    justify-self: center;
  }
}

/* Ajustes responsive para móviles. */
@media (max-width: 560px) {
  html {
    scroll-padding-top: 24px;
  }

  body {
    font-size: 15px;
  }

  [id] {
    scroll-margin-top: 24px;
  }

  .panel,
  .title-panel,
  .contact-panel {
    width: min(100% - 28px, 1120px);
  }

  .testimonial blockquote p,
  .testimonial-about {
    width: min(100% - 28px, 1120px);
  }

  .testimonial-about {
    padding: 30px 22px 42px;
  }

  .nav-link {
    font-size: 0.72rem;
  }

  .site-header {
    gap: 8px 12px;
  }

  .nav-cta {
    font-size: 0.72rem;
  }

  .women-images {
    grid-template-columns: 1fr;
  }

  .women-health-intro {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .women-health-intro img {
    width: min(220px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    justify-self: center;
  }

  .terracotta-block,
  .qualification-band,
  .terracotta-list,
  .padded-bleed,
  .cancel-box,
  .contact-top,
  address {
    padding: 26px;
  }

  .terracotta-list {
    font-size: 1rem;
  }

  .notice-dialog {
    max-height: min(88vh, 720px);
  }

  .notice-dialog__panel {
    padding: 24px 26px 30px;
  }

  .notice-dialog h2 {
    margin-bottom: 20px;
  }

  .notice-dialog__content {
    font-size: 0.9rem;
    line-height: 1.36;
  }

  .notice-dialog__content p {
    margin-bottom: 12px;
  }

  .notice-dialog__subhead {
    margin-top: 14px;
  }

  .notice-dialog__button {
    min-height: 40px;
    margin-top: 0;
  }
}