/* ============================================================ */
/* Ayfie Typography — HubSpot Stylesheet                        */
/* ============================================================ */

body,
p, span, li, td, a,
input, textarea, button, select {
  font-family: 'Neue Haas Unica', sans-serif;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
  color: #535862;
}

/* Headings — Items Text på display-nivå */
h1, h2, h4 {
  font-family: 'Items Text', sans-serif;
  color: #1C0E40;
   -0.00%!important; 
}

h3, h6 {
  font-family: 'Neue Haas Unica', sans-serif;
  color: #181D27;
}

/* ---- Desktop (standard) ---- */
h1 { font-size: 130px; line-height: 93%; font-weight: 400; letter-spacing: -0.03%!important; }
h2 { font-size: 46px; line-height: 52px; font-weight: 400; letter-spacing: -0.00%!important; }
h3 { font-size: 30px; line-height: 32px; font-weight: 400;letter-spacing: -0.02%!important; }
h4 { font-size: 24px; line-height: 90%; font-weight: 400; letter-spacing: -0.02%!important; }
h5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Neue Haas Unica', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1C0E40;
  background-color: #E7E3F6;
  border-radius: 100px;
  padding: 4px 14px;
  letter-spacing: -0.02%!important;
}
h6 { font-size: 18px; line-height: 144%; font-weight: 400; }

/* ---- Tablet (max 1024px) ---- */
@media (max-width: 1024px) {
  h1 { font-size: 72px; line-height: 90%; }
  h2 { font-size: 36px; line-height: 98%; }
  h3 { font-size: 24px; line-height: 95%; }
  h4 { font-size: 22px; line-height: 95%; }
  h5 { font-size: 13px !important; padding: 3px 12px !important; }
  h6 { font-size: 18px; line-height: 95%; }
}

/* ---- Mobil (max 768px) ---- */
@media (max-width: 768px) {
  h1 { font-size: 56px; line-height: 95%; }
  h2 { font-size: 32px; line-height: 95%; }
  h3 { font-size: 20px; line-height: 140%; }
  h4 { font-size: 20px; line-height: 140%; }
  h5 { font-size: 11px !important; padding: 3px 10px !important; letter-spacing: 0.06em !important; }
  h6 { font-size: 18px; line-height: 144%; }
}

/* ---- Liten mobil (max 480px) ---- */
@media (max-width: 480px) {
  h1 { font-size: 42px; line-height: 95%; }
  h2 { font-size: 22px; line-height: 136%; }
  h3 { font-size: 18px; line-height: 144%; }
  h4 { font-size: 18px; line-height: 144%; }
  h5 { font-size: 9px !important; padding: 2px 8px !important; letter-spacing: 0.05em !important; }
  h6 { font-size: 18px; line-height: 144%; }
}

p  { font-size: 16px; line-height: 1.5; font-weight: 400; color: #535862; }

blockquote {
  font-family: 'Neue Haas Unica', sans-serif;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 18px;
  line-height: 160%;
  color: #535862 !important;
  border-left: none !important;
  border: none !important;
  margin: 2em 0;
  padding: 0.75em 0 !important;
  background: transparent;
}

blockquote p {
  margin: 0;
  font-size: 18px;
  line-height: 160%;
  font-style: italic !important;
  font-weight: 300 !important;
  color: #535862 !important;
}

/* ============================================================ */
/* Buttons — Glass effect                                       */
/* ============================================================ */

.cta_button,
.hs-button,
button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: 'Neue Haas Unica', sans-serif !important;
  font-size: 18px;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: #1C0E40 !important;
  text-decoration: none !important;
  text-transform: none !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
  padding: 16px 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(231, 227, 246, 0.58) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  vertical-align: middle;
}

/* Hover */
body .cta_button:hover,
body .hs-button:hover,
body button:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
a.cta_button:hover {
  color: #1C0E40 !important;
  background: rgba(231, 227, 246, 0.30) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px) !important;
}

/* Active */
body .cta_button:active,
body .hs-button:active,
body button:active,
body input[type="submit"]:active,
body input[type="button"]:active,
a.cta_button:active {
  color: #1C0E40 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: none !important;
  transform: translateY(0px) !important;
}