/* ============================================
   RESET BÁSICO
   ============================================ */
* {
  box-sizing: border-box; /* Hace que padding y border se incluyan en el ancho total */
}

/* ============================================
   HTML Y BODY BASE
   ============================================ */
html, body {
  height: 100%; /* Altura completa de la pantalla */
  margin: 0; /* Elimina márgenes por defecto */
  padding: 0; /* Elimina padding por defecto */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Familia de fuente - Cambia aquí para usar otra fuente */
}

/* ============================================
   FONDO CON GRADIENTE AZUL VERTICAL
   ============================================ */
body {
  background: linear-gradient(180deg, var(--gradient-top) 0%, var(--gradient-bottom) 100%); /* Gradiente vertical de arriba (brillante) a abajo (oscuro) - Los colores se definen en config.css */
  background-attachment: fixed; /* El gradiente se mantiene fijo al hacer scroll (opcional: cambia a 'scroll' si quieres que se mueva) */
  background-size: 200% 200%; /* Tamaño del gradiente */
  animation: gradient-shift 30s ease-in-out infinite; /* Animación para el gradiente */
  color: var(--fg); /* Color del texto principal (blanco por defecto) */
  overflow-x: hidden; /* Oculta el scroll horizontal si el contenido es muy ancho */
}

/* ============================================
   CONTENEDOR PRINCIPAL (CENTRA TODO)
   ============================================ */
.wrap {
  min-height: 100vh; /* Altura mínima: 100% del viewport height (pantalla completa) */
  display: flex; /* Usa flexbox para centrar contenido */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
  padding: var(--wrap-padding); /* Espaciado alrededor (24px por defecto) - Ajusta en config.css */
}

/* ============================================
   TARJETA DE CONTENIDO (ANCHO MÁXIMO 520px)
   ============================================ */
.card {
  width: 100%; /* Ancho completo del contenedor padre */
  max-width: 520px; /* Ancho máximo: 520px - Cambia este valor para hacer el contenido más ancho o estrecho (ej: 600px, 480px) */
  text-align: var(--card-text-align); /* Alineación del texto (center por defecto) */
  display: flex; /* Usa flexbox para organizar elementos */
  flex-direction: column; /* Apila elementos verticalmente */
  align-items: center; /* Centra elementos horizontalmente */
}

/* ============================================
   CONTENEDOR DE MARCA (avatar + nombre)
   ============================================ */
.brand {
  display: flex; /* Usa flexbox */
  flex-direction: column; /* Apila avatar y nombre verticalmente */
  align-items: center; /* Centra horizontalmente */
  margin-bottom: 24px; /* Espacio debajo del contenedor de marca - Cambia este valor para más/menos espacio antes del subtítulo */
}

/* ============================================
   AVATAR CIRCULAR (DISCO OSCURO)
   ============================================ */
.avatar-badge {
  width: var(--avatar-size); /* Ancho del avatar (100px por defecto) - Ajusta en config.css */
  height: var(--avatar-size); /* Altura del avatar (debe ser igual al ancho para mantenerlo circular) */
  border-radius: 50%; /* Hace el avatar circular (50% = perfectamente redondo) - Cambia a menos para forma más ovalada */
  background-color: var(--avatar-bg); /* Color de fondo del disco (#0a0e27 por defecto) - Ajusta en config.css */
  display: flex; /* Usa flexbox para centrar el logo dentro */
  align-items: center; /* Centra el logo verticalmente */
  justify-content: center; /* Centra el logo horizontalmente */
  margin-bottom: 20px; /* Espacio debajo del avatar - Cambia este valor (ej: 24px, 16px) para más/menos espacio antes del nombre */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra del avatar: offset-x, offset-y, blur, color - Cambia 0.3 para más/menos sombra */
}

/* ============================================
   LOGO DENTRO DEL AVATAR
   ============================================ */
.logo {
  width: var(--logo-width); /* Ancho del logo (110px por defecto) - Ajusta en config.css */
  height: auto; /* Altura automática para mantener proporción */
  display: block; /* Hace que el logo sea un elemento de bloque */
}

/* ============================================
   NOMBRE DE MARCA "aix.hacks"
   ============================================ */
.brand-name {
  font-size: var(--brand-font-size); /* Tamaño de fuente (28px por defecto) - Ajusta en config.css */
  font-weight: var(--brand-font-weight); /* Grosor de fuente (700 = bold por defecto) - Ajusta en config.css */
  color: var(--fg); /* Color del texto (blanco por defecto) - Ajusta en config.css */
  margin: 0; /* Elimina márgenes por defecto del h1 */
  line-height: 1.2; /* Altura de línea: 1.2 veces el tamaño de fuente - Aumenta para más espacio entre líneas (ej: 1.4, 1.6) */
}

/* ============================================
   SUBTÍTULO
   ============================================ */
.sub {
  margin-top: var(--subtitle-margin-top); /* Espacio arriba del subtítulo (12px por defecto) - Ajusta en config.css */
  color: var(--muted); /* Color del subtítulo (#a9b4c4 por defecto) - Ajusta en config.css */
  font-size: var(--subtitle-font-size); /* Tamaño de fuente (16px por defecto) - Ajusta en config.css */
  line-height: 1.5; /* Altura de línea: 1.5 veces el tamaño de fuente - Aumenta para más espacio entre líneas */
  margin-bottom: 0; /* Sin margen inferior */
}

/* ============================================
   BOTÓN CTA "See the workflow →"
   ============================================ */
.btn {
  display: inline-block; /* Hace que el botón se comporte como bloque pero mantenga ancho del contenido */
  margin-top: var(--cta-margin-top); /* Espacio arriba del botón (24px por defecto) - Ajusta en config.css */
  padding: var(--cta-padding); /* Relleno interno (14px 28px por defecto) - Ajusta en config.css */
  border-radius: var(--cta-border-radius); /* Redondeo de esquinas (12px por defecto) - Ajusta en config.css */
  text-decoration: none; /* Elimina el subrayado del enlace */
  color: var(--fg); /* Color del texto del botón (blanco por defecto) - Ajusta en config.css */
  border: var(--cta-border); /* Borde del botón (1px solid rgba(255,255,255,0.25) por defecto) - Ajusta en config.css */
  background: var(--cta-bg); /* Fondo del botón (rgba(255,255,255,0.15) por defecto) - Ajusta en config.css */
  font-weight: var(--cta-font-weight); /* Grosor de fuente (600 por defecto) - Ajusta en config.css */
  font-size: 16px; /* Tamaño de fuente del botón - Cambia este valor directamente (ej: 18px, 14px) para ajustar el tamaño del texto */
  transition: transform 0.1s ease, background 0.2s ease; /* Transiciones suaves para efectos hover y active */
  backdrop-filter: blur(10px); /* Efecto blur de fondo detrás del botón - Cambia 10px para más/menos blur o elimina la línea si no quieres blur */
}

/* ============================================
   BOTÓN CTA AL PASAR EL MOUSE (HOVER)
   ============================================ */
.btn:hover {
  background: rgba(255, 255, 255, 0.2); /* Color de fondo al pasar el mouse - Cambia 0.2 para más/menos opacidad (0.0-1.0) */
}

/* ============================================
   BOTÓN CTA AL HACER CLIC (ACTIVE)
   ============================================ */
.btn:active {
  transform: translateY(1px); /* Mueve el botón 1px hacia abajo al hacer clic (efecto de "presionado") - Cambia 1px para más/menos movimiento */
}

/* ============================================
   FOOTER (signalframelabs.com)
   ============================================ */
.foot {
  margin-top: 32px; /* Espacio arriba del footer - Cambia este valor (ej: 40px, 24px) para más/menos espacio antes del footer */
  color: rgba(255, 255, 255, 0.4); /* Color del footer: rgba(rojo, verde, azul, opacidad) - Cambia 0.4 para más/menos opacidad (0.0-1.0) */
  font-size: 12px; /* Tamaño de fuente del footer - Cambia este valor (ej: 14px, 11px) para hacer el texto más grande o pequeño */
}

/* ============================================
   AJUSTES RESPONSIVE (MÓVIL)
   ============================================ */
@media (max-width: 480px) { /* Aplica estos estilos solo en pantallas de 480px o menos (móviles) */
  .avatar-badge {
    width: 90px; /* Avatar más pequeño en móvil (90px vs 100px en desktop) - Cambia este valor para ajustar tamaño en móvil */
    height: 90px; /* Altura igual al ancho para mantenerlo circular */
  }
  
  .logo {
    width: min(220px, 50vw); /* Logo más pequeño en móvil (54px vs 110px en desktop) - Cambia este valor para ajustar tamaño del logo en móvil */
  }
  
  .brand-name {
    font-size: 24px; /* Nombre más pequeño en móvil (24px vs 28px en desktop) - Cambia este valor para ajustar tamaño en móvil */
  }
  
  .sub {
    font-size: 15px; /* Subtítulo más pequeño en móvil (15px vs 16px en desktop) - Cambia este valor para ajustar tamaño en móvil */
  }
  
  .btn {
    padding: 12px 24px; /* Botón más pequeño en móvil (12px 24px vs 14px 28px en desktop) - Cambia estos valores para ajustar tamaño en móvil */
    font-size: 15px; /* Texto del botón más pequeño en móvil (15px vs 16px en desktop) - Cambia este valor para ajustar tamaño en móvil */
  }
}

/* ============================================
   ANIMACIÓN DEL GRADIENTE
   ============================================ */
@keyframes gradient-shift {
  0%   { background-position: 50% 0%; }
  50%  { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}

/* ============================================
   HOME SHELL + TOPBAR (ROOT /)
   ============================================ */

.card-shell{
  max-width: 820px;
  align-items: stretch;
  text-align: left;
}

.topbar{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  background: rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
}

.topbar-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.logo-sm{
  width: 42px;
  height: auto;
}

.topbar-text{
  min-width: 0;
}

.topbar-title{
  font-weight: 750;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.topbar-sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.92rem;
}

.topbar-nav{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.navlink{
  text-decoration: none;
  color: var(--fg);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}

.navlink:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

/* ============================================
   HERO
   ============================================ */

.hero{
  padding: 20px 16px 10px;
}

.hero-title{
  margin: 16px 0 8px;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.hero-sub{
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 68ch;
  line-height: 1.6;
}

.cta-row{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.btn-ghost{
  background: rgba(0,0,0,0.10);
}

/* ============================================
   FOOTER + LEGAL CHIPS
   ============================================ */

.sitefoot{
  margin-top: 18px;
  padding: 6px 16px 0;
}

.legal-row{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
  margin-bottom: 10px;
}

.chip{
  display:inline-block;
  text-decoration: none;
  color: rgba(255,255,255,0.90);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-size: 0.92rem;
  backdrop-filter: blur(10px);
}

.chip:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 560px){
  .topbar{
    flex-direction: column;
    align-items: flex-start;
  }
  .topbar-nav{
    justify-content: flex-start;
  }
}

/* ============================================
   HOME ONLY OVERRIDES (does not affect /aix)
   ============================================ */

body.home{
  /* Si quieres que la home NO use el mismo gradiente que /aix,
     cambia estos valores. Puedes incluso usar un fondo sólido. */
  background: radial-gradient(1200px 700px at 20% 20%, rgba(255,255,255,0.10), rgba(0,0,0,0) 60%),
              linear-gradient(180deg, rgba(6,10,24,1) 0%, rgba(2,3,8,1) 100%);
  animation: none;
}

/* Home: que la tarjeta se sienta más “site” y menos “landing” */
body.home .card-shell{
  max-width: 980px;
}

/* Home: el hero un poco más compacto */
body.home .hero{
  padding-top: 16px;
}

/* Home: chips un poco más discretos */
body.home .chip{
  font-size: 0.90rem;
  background: rgba(255,255,255,0.04);
}

/* ============================================
   HOME ONLY: corporate, modern, serious
   (does NOT affect /aix/)
   ============================================ */

body.home{
  /* Fondo corporativo oscuro, sin “party gradient” */
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(255,255,255,0.10), rgba(0,0,0,0) 60%),
    radial-gradient(700px 480px at 82% 25%, rgba(90,120,255,0.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #070a14 0%, #040610 55%, #03040f 100%);
  animation: none;
}

/* Card más “executive”: menos centrado tipo landing, más panel serio */
body.home .card-shell{
  max-width: 1040px;
}

body.home .topbar{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
}

body.home .navlink{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}

body.home .hero-title{
  letter-spacing: -0.3px;
}

/* CTA: el primario más “serio”, el secundario más discreto */
body.home .btn{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

body.home .btn:hover{
  background: rgba(255,255,255,0.14);
}

body.home .btn-ghost{
  background: rgba(0,0,0,0.15);
  border-color: rgba(255,255,255,0.14);
}

/* Chips legales más discretos */
body.home .chip{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}

/* ============================================
   HOME HERO MARK (brand emphasis, not marketing)
   ============================================ */

body.home .hero-mark{
  margin-bottom: 64px; /* Para ajustar altura al bloque principal */
}

body.home .hero-mark img{
  width: 88px;          /* prueba 72–88-96 si quieres más peso */
  height: auto;
  opacity: 0.95;
}

/* =========================================================
   HOME V1 — COLUMN LAYOUT + SILENT TOP-LEFT MARK
   (Overrides only. Does NOT affect /aix)
   ========================================================= */

body.home .card-shell{
  max-width: 1040px;
  align-items: stretch;
  text-align: left;
  position: relative;
}

/* Put the large mark in the top-left as a silent anchor */
/*body.home .site-mark{
  position: fixed; /* stays stable */
/*  top: 28px;
  left: 28px;
  z-index: 1;
  opacity: 0.45;
  pointer-events: none;
}
*/
body.home .site-mark img{
  width: 88px; /* agreed size */
  height: auto;
  display: block;
}

/* Make the main block breathe and feel like a site, not a landing */
body.home .wrap{
  align-items: flex-start;
  padding-top: 120px; /* creates space so content doesn't fight the mark */
}

/* HERO */
body.home .hero{
  padding: 24px 16px 10px;
}

body.home .brandline{
  margin-bottom: 22px;
}

body.home .brandname{
  font-weight: 780;
  letter-spacing: 0.2px;
  line-height: 1.15;
  font-size: 1.1rem;
}

body.home .brandsub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Title / copy */
body.home .hero-title{
  margin: 12px 0 10px;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.35px;
}

body.home .hero-sub{
  margin: 0;
  color: var(--muted);
  font-size: 1.03rem;
  max-width: 64ch;
  line-height: 1.6;
}

/* CTA row spacing (your existing .btn styles remain) */
body.home .cta-row{
  margin-top: 18px;
}

/* Footer */
body.home .sitefoot{
  margin-top: 22px;
  padding: 10px 16px 0;
}

body.home .foot-meta{
  margin-top: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 0.92rem;
  line-height: 1.5;
}

body.home .foot{
  margin-top: 10px;
  color: rgba(255,255,255,0.40);
  font-size: 12px;
}

/* Responsive */
@media (max-width: 560px){
  body.home .wrap{
    padding-top: 96px;
  }
  body.home .site-mark{
    top: 18px;
    left: 18px;
    opacity: 0.40;
  }
  body.home .site-mark img{
    width: 72px;
  }
}

/* =========================================================
   HOME LAYOUT FIX: spacing + footer always bottom
   ========================================================= */

body.home .wrap{
  min-height: 100vh;
  align-items: center;          /* centra el panel vertical */
  padding-top: 72px;            /* aire arriba */
  padding-bottom: 72px;         /* aire abajo */
}

/* El panel ahora “respira” y empuja el footer hacia abajo */
body.home .card-shell{
  max-width: 1040px;
  width: 100%;
  text-align: left;
  align-items: stretch;
  position: relative;

  /* CLAVE: hace que aunque haya poco contenido, el footer quede abajo */
  min-height: min(720px, calc(100vh - 144px));
  display: flex;
  flex-direction: column;
}

/* Hero arriba, footer abajo */
body.home .hero{
  padding: clamp(24px, 4vw, 56px);
}

/* Footer pegado al fondo del panel */
body.home .sitefoot{
  margin-top: auto;
  padding: 0 clamp(24px, 4vw, 56px) 24px;
}

/* =========================================================
   BRAND CLUSTER: logo + marca + slogan se mueven juntos
   ========================================================= */

/* El logo grande deja de ser fixed para moverse con el layout */
body.home .site-mark{
  position: absolute;     /* dentro del panel */
  top: clamp(18px, 3vw, 36px);
  left: clamp(18px, 3vw, 36px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}

body.home .site-mark img{
  width: clamp(72px, 7vw, 104px);   /* responsive */
  height: auto;
  display: block;
}

/* Alineación y espaciado del bloque de marca */
body.home .brandline{
  margin-left: clamp(96px, 10vw, 140px); /* deja espacio para la S grande */
  margin-bottom: clamp(14px, 2vw, 22px);
}

body.home .brandname{
  font-weight: 780;
  letter-spacing: 0.2px;
  line-height: 1.15;
  font-size: 1.1rem;
}

body.home .brandsub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* =========================================================
   MOBILE: logo arriba, marca debajo, todo alineado limpio
   ========================================================= */

@media (max-width: 560px){
  body.home .wrap{
    padding-top: 28px;
    padding-bottom: 28px;
    align-items: flex-start;
  }

  body.home .card-shell{
    min-height: auto; /* en móvil no forzamos “panel alto” */
  }

  body.home .site-mark{
    position: relative;
    top: 0;
    left: 0;
    margin: 18px 0 10px;
    opacity: 0.55;
  }

  body.home .brandline{
    margin-left: 0;      /* ya no necesita offset */
  }

  body.home .hero{
    padding: 18px 18px 10px;
  }

  body.home .sitefoot{
    padding: 0 18px 18px;
  }
}

/* =========================================================
   HOME: Brand cluster (logo + brand + slogan move together)
   ========================================================= */

body.home .card-shell{
  max-width: 1040px;
  width: 100%;
  min-height: min(760px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

body.home .hero{
  padding: clamp(28px, 4vw, 64px);
}

body.home .brand-cluster{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(22px, 3vw, 34px);
}

body.home .brand-mark{
  width: 88px;          /* tu tamaño */
  height: auto;
  opacity: 0.92;
  flex: 0 0 auto;
}

body.home .brandname{
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.1;
  font-size: 1.2rem;
}

body.home .brandsub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
}

/* separaciones del hero */
body.home .hero-title{
  margin-top: 0;
  margin-bottom: 10px;
}

body.home .hero-sub{
  margin-top: 0;
  margin-bottom: 16px;
}

/* footer siempre abajo */
body.home .sitefoot{
  margin-top: auto;
  padding: 0 clamp(28px, 4vw, 64px) 24px;
}

/* =========================================================
   HOME: Mobile layout
   ========================================================= */

@media (max-width: 560px){
  body.home .card-shell{
    min-height: auto;
  }

  body.home .brand-cluster{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  body.home .brand-mark{
    width: 96px; /* en móvil puede verse mejor un poco más grande */
  }
}


@media (max-width: 480px){
  body.theme-ingles .avatar-badge{
    width: 110px;
    height: 110px;
  }
  body.theme-ingles .logo{
    width: min(320px, 72vw);
  }
}

body.theme-ingles{
  background: linear-gradient(180deg, #7C3AED 0%, #120A2A 100%) !important;
  animation: gradient-shift 30s ease-in-out infinite;
}


@media (max-width: 480px){
  body.theme-ingles .logo{
    width: min(340px, 78vw) !important;
  }
  body.theme-ingles .avatar-badge{
    width: 110px;
    height: 110px;
  }
}


/* ============================================
   INGLES THEME — FORCE BACKGROUND (SAFE)
   Only applies when <body class="theme-ingles">
   ============================================ */
body.theme-ingles{
  background: linear-gradient(180deg, #7C3AED 0%, #120A2A 100%) !important;
  animation: gradient-shift 30s ease-in-out infinite;
}


/* Ingles: animated purple gradient (same effect as AIX) */
body.theme-ingles{
  background: linear-gradient(
    180deg,
    #8B5CF6 0%,
    #7C3AED 35%,
    #120A2A 100%
  ) !important;

  background-attachment: fixed;
  background-size: 200% 200%;
  animation: gradient-shift 25s ease-in-out infinite;
}


body.theme-ingles .logo{
  max-width: none;          /* evita límites por default del navegador */
  transform: scale(1.10);   /* micro boost sin distorsión */
}


/* ============================================
   INGLESCONIA THEME — animated gradient (SAFE)
   Only applies when <body class="theme-ingles">
   ============================================ */

/* 1) Define un gradiente igual al look de tu referencia */
body.theme-ingles{
  background: linear-gradient(
    135deg,
    #DC2FE7 0%,
    #6309C2 45%,
    #0B0345 100%
  ) !important;

  background-attachment: fixed;
  background-size: 220% 220%;
  animation: ingles-gradient-shift 18s ease-in-out infinite;
}

/* 2) Animación dedicada (no toca AIX) */
@keyframes ingles-gradient-shift{
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}


@media (max-width: 480px){
  body.theme-ingles .avatar-badge{
    width: 120px;
    height: 120px;
  }
  body.theme-ingles .logo{
    width: min(420px, 90vw) !important;
  }
}

/* ============================================
   INGLES: remove avatar circle, keep logo
   SAFE – does not affect /aix
   ============================================ */
body.theme-ingles .avatar-badge{
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 12px;
}

.disclosure{
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  max-width: 520px;
}