@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@200..800&family=Fredoka:wght@300..700&display=swap");

body {
  font-family: "Bricolage Grotesque", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tailwind's font-sans utility is generated after this file on some pages. */
html body {
  font-family: "Bricolage Grotesque", Arial, sans-serif !important;
}

/* Apply the site's primary typeface consistently without overriding icon glyphs. */
body :not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fat):not([class^="fa-"]):not([class*=" fa-"]):not(.chitran-brand-name) {
  font-family: "Bricolage Grotesque", Arial, sans-serif !important;
}

.chitran-brand-name {
  font-family: "Fredoka", "Bricolage Grotesque", sans-serif !important;
}

html {
  scroll-behavior: smooth;
}

:root {
  --chitran-nav-top: 4px;
  --chitran-nav-width: min(1440px, calc(100vw - 120px));
  --chitran-ink: #080808;
  --chitran-gold: #f4c430;
}

body {
  padding-top: 96px;
}

#navbar {
  position: fixed !important;
  top: var(--chitran-nav-top) !important;
  left: 50% !important;
  right: auto !important;
  width: var(--chitran-nav-width) !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .78) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  overflow: visible !important;
  transition: top .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1), background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1) !important;
}

#navbar.navbar-scrolled {
  top: 4px !important;
  width: min(1340px, calc(100vw - 150px)) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 16px 48px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  transform: translateX(-50%) scale(.985) !important;
}

#navbar.navbar-hidden {
  transform: translateX(-50%) translateY(calc(-100% - 24px)) scale(.985) !important;
  opacity: .98 !important;
  pointer-events: none !important;
}

#navbar > .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

#navbar > .container a[href="/home"],
#navbar > .container a[href="/"] {
  max-width: none !important;
  flex: 0 0 auto !important;
}

#navbar > .container a[href="/home"] > div,
#navbar > .container a[href="/"] > div {
  min-width: 235px !important;
}

#navbar > .container a[href="/home"] span,
#navbar > .container a[href="/"] span {
  overflow: visible !important;
  text-overflow: clip !important;
}

#navbar > .container > .flex,
#navbar .container > .flex.justify-between {
  height: 86px !important;
  transition: height .35s cubic-bezier(.2,.8,.2,1) !important;
}

#navbar.navbar-scrolled > .container > .flex,
#navbar.navbar-scrolled .container > .flex.justify-between {
  height: 72px !important;
}

#navbar img {
  height: 46px !important;
  width: 46px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
  transition: height .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1), transform .25s ease !important;
}

#navbar.navbar-scrolled img {
  height: 38px !important;
  width: 38px !important;
}

#navbar .font-display,
#navbar a,
#navbar button,
#navbar span {
  font-family: "Bricolage Grotesque", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

#navbar > .container a[href="/home"] span:first-child,
#navbar > .container a[href="/"] span:first-child {
  font-family: "Fredoka", "Bricolage Grotesque", sans-serif !important;
  font-weight: 600 !important;
}

#navbar > .container a[href="/home"] span,
#navbar > .container a[href="/"] span {
  font-family: "Fredoka", "Inter", Arial, sans-serif !important;
}

#navbar > .container a[href="/home"] span:last-child,
#navbar > .container a[href="/"] span:last-child {
  font-weight: 600 !important;
}

#navbar .hidden.lg\:flex > a,
#navbar .hidden.lg\:flex button {
  color: rgba(15, 23, 42, .72) !important;
  border-radius: 999px !important;
  padding: 10px 12px !important;
  line-height: 1 !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}

#navbar .hidden.lg\:flex > a:hover,
#navbar .hidden.lg\:flex button:hover {
  color: #050505 !important;
  background: rgba(244, 196, 48, .16) !important;
  transform: translateY(-1px) !important;
}

#navbar a[href="/demo"].bg-black {
  background: #050505 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
}

#navbar a[href="/demo"].bg-black:hover {
  background: #181818 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

#navbar .relative.group.h-20,
#navbar .relative.group.md\:h-24 {
  height: 86px !important;
  transition: height .35s cubic-bezier(.2,.8,.2,1) !important;
}

#navbar.navbar-scrolled .relative.group.h-20,
#navbar.navbar-scrolled .relative.group.md\:h-24 {
  height: 72px !important;
}

#navbar .absolute.w-64,
#navbar .absolute.w-56 {
  border-radius: 24px !important;
  border-color: rgba(15, 23, 42, .08) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .16) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

#mobile-menu {
  position: fixed !important;
  top: 96px !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  height: auto !important;
  max-height: calc(100vh - 116px) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .2) !important;
  backdrop-filter: blur(26px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
}

#navbar.navbar-scrolled #mobile-menu {
  top: 78px !important;
}

body > footer.bg-slate-900 {
  background: radial-gradient(circle at 18% 0%, rgba(244, 196, 48, .16), transparent 32%), #050505 !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  font-family: "Montserrat", "Inter", Arial, sans-serif !important;
}

body > footer.bg-slate-900 * {
  font-family: "Montserrat", "Inter", Arial, sans-serif !important;
}

body > footer.bg-slate-900 i.fas,
body > footer.bg-slate-900 i.fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

body > footer.bg-slate-900 i.fab,
body > footer.bg-slate-900 i.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

body > footer.bg-slate-900 .container {
  max-width: 1180px !important;
}

body > footer.bg-slate-900 img {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32) !important;
}

body > footer.bg-slate-900 a {
  transition: color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease !important;
}

body > footer.bg-slate-900 .flex.gap-5 a {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
}

body > footer.bg-slate-900 .flex.gap-5 a:hover {
  color: #050505 !important;
  background: var(--chitran-gold) !important;
  transform: translateY(-2px) !important;
}

body > footer.bg-slate-900 h4 {
  color: #ffffff !important;
  letter-spacing: .08em !important;
}

body > footer.bg-slate-900 .border-t {
  border-color: rgba(255, 255, 255, .12) !important;
}

@media (max-width: 1023px) {
  body {
    padding-top: 88px;
  }

  #navbar {
    width: calc(100vw - 24px) !important;
    top: 10px !important;
  }

  #navbar.navbar-scrolled {
    width: calc(100vw - 28px) !important;
    top: 7px !important;
  }

  #navbar > .container a[href="/home"],
  #navbar > .container a[href="/"] {
    max-width: calc(100% - 86px) !important;
    flex: 1 1 auto !important;
  }

  #navbar > .container a[href="/home"] > div,
  #navbar > .container a[href="/"] > div {
    min-width: 0 !important;
  }

  #navbar > .container a[href="/home"] span,
  #navbar > .container a[href="/"] span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #navbar > .container > .flex,
  #navbar .container > .flex.justify-between {
    height: 68px !important;
  }

  #navbar.navbar-scrolled > .container > .flex,
  #navbar.navbar-scrolled .container > .flex.justify-between {
    height: 58px !important;
  }

  #navbar img {
    height: 40px !important;
    width: 40px !important;
  }

  #navbar.navbar-scrolled img {
    height: 34px !important;
    width: 34px !important;
  }
}

.font-display {
  font-family: "Bricolage Grotesque", Arial, sans-serif;
}

body > header,
body > main,
body > article,
.article-body,
.blog-content,
.blog-card,
.blog-search {
  font-family: "Inter", Arial, sans-serif !important;
}

.blog-card {
  height: 100%;
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, .10);
  border-color: #fde68a;
}

.blog-card[hidden] {
  display: none !important;
}

body > main h1,
body > main h2,
body > main h3,
body > header h1,
body > header h2,
body > header h3,
.article-body h1,
.article-body h2,
.article-body h3 {
  font-family: "Fredoka", "Inter", Arial, sans-serif !important;
}

.blog-card h2 {
  font-family: "Fredoka", "Inter", Arial, sans-serif !important;
  font-weight: 700;
  line-height: 1.28;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
}

.blog-home-title {
  font-family: "Bricolage Grotesque", Arial, sans-serif !important;
  font-weight: 600 !important;
}

.article-hero-image {
  margin: 2.25rem 0 2.5rem;
  overflow: hidden;
  border-radius: 22px;
  background: #f8fafc;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

.article-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 530px;
  object-fit: cover;
}

.article-hero-image figcaption {
  padding: .7rem 1rem;
  color: #64748b;
  font-size: .78rem;
}

.blog-card p {
  font-weight: 400;
}

.blog-card p[class*="uppercase"] {
  font-weight: 700;
}

.blog-card p.text-slate-600 {
  font-weight: 400;
  line-height: 1.72;
}

.article-body h2 {
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  line-height: 1.22;
  font-weight: 700;
  color: #0f172a;
  margin-top: 2.4rem;
  margin-bottom: 1rem;
}

.article-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 1.8rem;
  margin-bottom: .75rem;
}

.article-body p,
.article-body li {
  color: #475569;
  line-height: 1.82;
  font-size: 1.05rem;
}

.article-body p {
  margin-bottom: 1.15rem;
}

.article-body ul,
.article-body ol {
  margin: 1rem 0 1.4rem 1.2rem;
}

.article-body li {
  margin-bottom: .65rem;
  padding-left: .25rem;
}

.article-body a {
  color: #ca8a04;
  font-weight: 700;
}

.article-body .highlight-box {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 20px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.article-body .certification-highlight {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 20px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.seo-link-box {
  display: block;
  clear: both;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  padding: 1.35rem;
  margin: 2.5rem 0 1.25rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
}

.seo-link-box h2 {
  margin-top: 0;
  margin-bottom: .9rem;
  font-size: 1.35rem;
}

.seo-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
}

.seo-link-grid a {
  display: block;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: .8rem .9rem;
  color: #334155;
  background: #f8fafc;
  font-size: .95rem;
  line-height: 1.35;
  text-decoration: none;
}

.seo-link-grid a:hover {
  border-color: #fde68a;
  color: #ca8a04;
  background: #fffbeb;
}

.blog-search-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px) minmax(210px, 270px) minmax(180px, 230px);
  align-items: center;
  gap: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.blog-search-copy h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
}

.blog-search-copy p {
  margin: .35rem 0 0;
  color: #64748b;
  font-size: .95rem;
  line-height: 1.5;
}

.blog-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.blog-search-box > i,
.blog-category-trigger .blog-category-icon,
.blog-sort-trigger .blog-sort-icon {
  position: absolute;
  left: 1rem;
  color: #64748b;
  pointer-events: none;
}

.blog-search-box input {
  width: 100%;
  height: 3.25rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  padding: 0 3rem 0 2.75rem;
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.blog-category-menu,
.blog-sort-menu {
  position: relative;
  z-index: 35;
}

.blog-category-trigger,
.blog-sort-trigger {
  position: relative;
  width: 100%;
  height: 3.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  padding: 0 2.75rem 0 2.75rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.blog-category-trigger:hover,
.blog-sort-trigger:hover,
.blog-category-menu.open .blog-category-trigger,
.blog-sort-menu.open .blog-sort-trigger,
.blog-category-trigger:focus-visible,
.blog-sort-trigger:focus-visible {
  border-color: #eab308;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, .14);
}

.blog-category-current,
.blog-sort-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-category-chevron,
.blog-sort-chevron {
  position: absolute;
  right: .95rem;
  color: #64748b;
  pointer-events: none;
  transition: transform .22s ease, color .2s ease;
}

.blog-category-menu.open .blog-category-chevron,
.blog-sort-menu.open .blog-sort-chevron {
  transform: rotate(180deg);
  color: #ca8a04;
}

.blog-category-list,
.blog-sort-list {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  width: min(320px, 100%);
  max-height: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
  padding: 0 .45rem;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  pointer-events: none;
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease, padding .22s ease, border-color .22s ease;
}

.blog-category-menu.open .blog-category-list,
.blog-sort-menu.open .blog-sort-list {
  max-height: 440px;
  overflow-y: auto;
  border-color: #e2e8f0;
  padding: .45rem;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.blog-category-option,
.blog-sort-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  color: #334155;
  background: transparent;
  padding: .78rem .85rem;
  font-size: .94rem;
  font-weight: 800;
  text-align: left;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.blog-category-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-category-count {
  flex: 0 0 auto;
  min-width: 1.85rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  padding: .18rem .48rem;
  font-size: .76rem;
  font-weight: 900;
  text-align: center;
}

.blog-category-option:hover,
.blog-category-option:focus-visible,
.blog-sort-option:hover,
.blog-sort-option:focus-visible {
  background: #f8fafc;
  color: #0f4fb8;
  transform: translateX(2px);
  outline: none;
}

.blog-category-option.active,
.blog-sort-option.active {
  background: #eff6ff;
  color: #0f4fb8;
}

.blog-category-option.active .blog-category-count {
  background: #2563eb;
  color: #ffffff;
}

.blog-search-box input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.blog-search-box input::-webkit-search-cancel-button,
.blog-search-box input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.blog-search-box input::-ms-clear,
.blog-search-box input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.blog-search-box input:focus {
  border-color: #eab308;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, .16);
}

.blog-search-box button {
  position: absolute;
  right: .65rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: #64748b;
  background: #e2e8f0;
  transition: color .2s ease, background .2s ease;
}

.blog-search-box button:hover {
  color: #0f172a;
  background: #fde68a;
}

.blog-search-suggestions {
  position: absolute;
  right: 1rem;
  top: calc(100% - 1rem);
  z-index: 30;
  width: min(440px, calc(100% - 2rem));
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
  padding: .45rem;
}

.blog-search-suggestion {
  display: block;
  border-radius: 10px;
  padding: .75rem .85rem;
  color: #0f172a;
  text-decoration: none;
}

.blog-search-suggestion:hover,
.blog-search-suggestion:focus {
  background: #fffbeb;
  outline: none;
}

.blog-search-suggestion strong {
  display: block;
  font-size: .96rem;
  line-height: 1.35;
}

.blog-search-suggestion span {
  display: block;
  margin-top: .25rem;
  color: #64748b;
  font-size: .84rem;
  line-height: 1.45;
}

.blog-search-suggestion-empty {
  padding: .85rem;
  color: #64748b;
  line-height: 1.45;
}

.blog-search-suggestion-empty strong {
  display: block;
  color: #0f172a;
  font-size: .98rem;
}

.blog-search-suggestion-empty span {
  display: block;
  margin-top: .25rem;
  color: #64748b;
  font-size: .86rem;
}

.related-blogs {
  width: min(960px, calc(100% - 2rem));
  margin: 0 auto 2.5rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 2rem;
}

.related-blogs-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .65rem;
  margin-bottom: 1rem;
}

.related-blogs h2 {
  color: #0f172a;
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
}

.related-blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.related-blog-link {
  display: block;
  min-height: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  padding: 1rem;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.related-blog-link:hover {
  border-color: #facc15;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .09);
  transform: translateY(-2px);
}

.related-blog-link strong {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
}

.article-feedback-widget {
  position: static;
  display: none !important;
  width: min(330px, calc(100vw - 36px));
  width: min(760px, calc(100% - 2rem));
  margin: 2rem auto 3rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
  padding: 13px;
  z-index: 1;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  transition: box-shadow .25s ease, border-color .25s ease;
}

.article-feedback-widget[hidden] {
  display: none !important;
}

.article-feedback-widget.visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.article-feedback-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.article-feedback-stars {
  display: flex;
  gap: 4px;
  margin: 8px 0 10px;
}

.article-feedback-star {
  width: 31px;
  height: 31px;
  border-radius: 999px;
  color: #cbd5e1;
  background: #f8fafc;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.article-feedback-star.active {
  color: #eab308;
  background: #fef9c3;
  transform: translateY(-1px);
}

.article-feedback-star svg {
  width: 18px;
  height: 18px;
  margin: auto;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .12));
}

.article-feedback-emoji svg {
  width: 38px;
  height: 38px;
}

.article-feedback-widget textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
}

.article-feedback-widget textarea:focus {
  border-color: #facc15;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .18);
}

.article-feedback-submit {
  width: 100%;
  margin-top: 10px;
  border-radius: 999px;
  background: #020617;
  color: #fff;
  padding: 9px 13px;
  font-weight: 800;
}

.article-feedback-submit:hover {
  background: #1e293b;
}

.article-feedback-status {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.article-feedback-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 6px 4px;
}

.article-feedback-success svg {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.article-feedback-success h3 {
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
}

.article-feedback-success p {
  margin-top: 4px;
  font-size: .88rem;
  line-height: 1.45;
  color: #64748b;
}

@media (max-width: 1024px) {
  .blog-search-panel {
    grid-template-columns: 1fr 1fr;
  }

  .blog-search-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .blog-card {
    border-radius: 14px;
    padding: 1.15rem !important;
  }

  body > header .container,
  body > main .container,
  .article-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .article-body p,
  .article-body li {
    font-size: 1rem;
    line-height: 1.76;
  }

  .seo-link-grid {
    grid-template-columns: 1fr;
  }

  .blog-search-panel {
    grid-template-columns: 1fr;
    padding: .9rem;
  }

  .blog-search-box input,
  .blog-category-trigger,
  .blog-sort-trigger {
    height: 3rem;
    font-size: .95rem;
  }

  .blog-search-suggestions {
    left: .9rem;
    right: .9rem;
    top: calc(100% - .9rem);
    width: auto;
  }

  .related-blogs {
    width: calc(100% - 2rem);
    padding-top: 1.5rem;
  }

  .related-blogs-grid {
    grid-template-columns: 1fr;
  }

  .article-feedback-widget {
    display: block !important;
    width: calc(100% - 1.5rem);
    margin: 1.5rem auto 2.25rem;
    padding: 14px;
  }
}


.comparison-table-wrap { overflow-x: auto; margin: 1.5rem 0 2.25rem; border: 1px solid #e2e8f0; border-radius: 18px; }
.comparison-table { width: 100%; min-width: 680px; border-collapse: collapse; background: #fff; }
.comparison-table th, .comparison-table td { padding: 1rem; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; line-height: 1.55; }
.comparison-table thead th { background: #fefce8; color: #713f12; font-weight: 700; }
.comparison-table tbody th { color: #0f172a; font-weight: 700; min-width: 180px; }
.comparison-note { padding: 1rem 1.2rem; border-left: 4px solid #eab308; background: #fffbeb; border-radius: 8px; margin: 1.5rem 0; }
.comparison-icon { display: inline-block; width: 1.1rem; height: 1.1rem; margin: -.1rem .45rem 0 0; vertical-align: middle; flex: 0 0 auto; }

.cert-hero{background:#fff;border-bottom:1px solid #e2e8f0}.cert-kicker{display:inline-flex;align-items:center;gap:.55rem;color:#0f172a;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem}.cert-kicker svg{width:1.35rem;height:1.35rem}.cert-summary{padding:1.4rem 1.5rem;border:1px solid #e2e8f0;background:#fff;border-radius:18px;margin-bottom:2.25rem}.certificate-figure{margin:2rem 0 2.5rem;padding:1rem;background:#fff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 16px 36px rgba(15,23,42,.08)}.certificate-figure img{display:block;width:100%;height:auto;border-radius:12px}.certificate-figure figcaption{padding:.85rem .25rem 0;color:#64748b;font-size:.82rem}.cert-list{list-style:none!important;padding:0!important;margin:1.4rem 0 2.25rem!important}.cert-list li{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem 0;border-bottom:1px solid #e2e8f0}.cert-icon{width:1.25rem;height:1.25rem;flex:0 0 auto;margin-top:.12rem}@media(max-width:640px){.certificate-figure{padding:.5rem;border-radius:14px}}

.trustpilot-stars,
.trustpilot-stars i {
  color: #00b67a !important;
}

.availability-summary{border:1px solid #e2e8f0;background:#fff;border-radius:20px;padding:1.75rem;margin-bottom:2.5rem}.availability-kicker{font-size:.8rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#475569;margin:0 0 .6rem}.availability-number{display:flex;align-items:baseline;gap:.7rem;border-top:1px solid #e2e8f0;margin-top:1.25rem;padding-top:1.1rem}.availability-number strong{font-family:"Bricolage Grotesque",sans-serif;font-size:2.7rem;line-height:1;color:#0f172a}.availability-number span{font-weight:700;color:#475569}.availability-featured,.availability-grid{list-style:none!important;padding:0!important;margin:1.25rem 0 2.5rem!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem}.availability-country{display:flex;align-items:center;gap:.65rem;min-height:3.2rem;padding:.55rem .7rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#1e293b;font-weight:650;font-size:.92rem}.availability-country img{width:32px;height:24px;object-fit:cover;border-radius:3px;box-shadow:0 1px 3px rgba(15,23,42,.15);flex:0 0 auto}.availability-grid-unavailable .availability-country{background:#fafafa;color:#475569}.availability-status{margin-left:auto;font-size:.68rem;font-weight:800;color:#64748b;text-align:right}@media(max-width:640px){.availability-featured,.availability-grid{grid-template-columns:1fr}.availability-summary{padding:1.2rem}.availability-number strong{font-size:2.25rem}}

.trust-rating-panel{background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:2rem;text-align:center;margin:0 0 2.5rem;box-shadow:0 18px 45px rgba(15,23,42,.06)}.trust-rating-label{margin:0 0 .85rem!important;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;font-weight:800;color:#475569}.trust-rating-stars{display:flex;justify-content:center;gap:.25rem;color:#00b67a}.rating-star{width:2rem;height:2rem}.trust-rating-score{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.75rem;line-height:1;margin:.8rem 0!important;color:#0f172a}.trust-rating-copy{max-width:38rem;margin:.5rem auto 1.1rem!important;color:#475569}.trust-rating-link{display:inline-flex;align-items:center;gap:.55rem;background:#00b67a;color:#fff!important;border-radius:999px;padding:.72rem 1.1rem;font-weight:800;text-decoration:none!important}.trust-rating-link:hover{background:#008f5e;color:#fff!important}@media(max-width:640px){.trust-rating-panel{padding:1.35rem}.rating-star{width:1.6rem;height:1.6rem}.trust-rating-score{font-size:2.3rem}}

/* Clear, original science diagrams used in the earthquake and weather learning guides. */
.science-figure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin:2rem 0 2.4rem}.science-figure{margin:0;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 32px rgba(15,23,42,.06)}.science-figure img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#f8fafc}.science-figure figcaption{padding:.8rem 1rem;color:#64748b;font-size:.82rem;line-height:1.45}.science-callout{margin:1.6rem 0;padding:1.1rem 1.2rem;border-left:4px solid #0f766e;border-radius:10px;background:#f0fdfa;color:#134e4a;font-weight:650}.science-table-wrap{overflow-x:auto;margin:1.5rem 0 2rem;border:1px solid #e2e8f0;border-radius:16px}.science-table{width:100%;min-width:620px;border-collapse:collapse;background:#fff}.science-table th,.science-table td{padding:.9rem 1rem;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top;line-height:1.55}.science-table th{background:#f8fafc;color:#0f172a;font-weight:800}.science-table tr:last-child td{border-bottom:0}@media(max-width:640px){.science-figure-grid{grid-template-columns:1fr}.science-figure{border-radius:14px}}
/* Chitran Knowledge Panel article: content only; shared navigation/footer stay untouched. */
body.knowledge-panel-article .standard-back{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
body.knowledge-panel-article .standard-back svg,body.knowledge-panel-article .story svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.knowledge-panel-article .standard-back:hover{text-decoration:underline}
body.knowledge-panel-article .story{padding-top:4rem;padding-bottom:5rem}
body.knowledge-panel-article .article-hero-image{margin-top:0;background:#fff}
body.knowledge-panel-article .article-hero-image img{max-height:none;object-fit:contain}
body.knowledge-panel-article .article-hero-image figcaption{line-height:1.55}
body.knowledge-panel-article .story>.lead{font-size:1.22rem;line-height:1.7;color:#243347}
body.knowledge-panel-article .fact-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:2.25rem 0}
body.knowledge-panel-article .fact{padding:1.2rem;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
body.knowledge-panel-article .fact svg{width:1.45rem;height:1.45rem;color:#1459db}
body.knowledge-panel-article .fact strong{display:block;margin:.8rem 0 .35rem;color:#0f172a}
body.knowledge-panel-article .fact span{display:block;color:#64748b;font-size:.85rem;line-height:1.5}
body.knowledge-panel-article .note{display:flex;gap:1rem;margin:2rem 0;padding:1.3rem 1.45rem;border:1px solid #d7e4f8;border-left:4px solid #1459db;border-radius:12px;background:#fff}
body.knowledge-panel-article .note svg{flex:0 0 1.5rem;width:1.5rem;height:1.5rem;color:#1459db}
body.knowledge-panel-article .note p{margin:0;font-size:.95rem;line-height:1.65}
body.knowledge-panel-article .steps{list-style:none;padding:0;margin:1.5rem 0;counter-reset:knowledge-step}
body.knowledge-panel-article .steps li{position:relative;min-height:3.2rem;padding:0 0 0 3.4rem;margin:0 0 1.2rem;counter-increment:knowledge-step}
body.knowledge-panel-article .steps li:before{content:counter(knowledge-step);position:absolute;left:0;top:.1rem;display:grid;place-items:center;width:2.3rem;height:2.3rem;border:1px solid #bad0ef;border-radius:50%;color:#1459db;font-size:.9rem;font-weight:800}
body.knowledge-panel-article .steps strong{display:block;color:#0f172a}
body.knowledge-panel-article .faq{border-top:1px solid #e2e8f0;padding:1.35rem 0}
body.knowledge-panel-article .faq:last-of-type{border-bottom:1px solid #e2e8f0}
body.knowledge-panel-article .faq h3{margin:0 0 .4rem}
body.knowledge-panel-article .faq p{margin:0}
body.knowledge-panel-article .related,body.knowledge-panel-article .closing{margin-top:2.6rem;padding:1.6rem;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
body.knowledge-panel-article .related h2,body.knowledge-panel-article .closing h2{margin:0 0 1rem}
body.knowledge-panel-article .related-links{display:grid;gap:.7rem}
body.knowledge-panel-article .related-links a{display:inline-flex;align-items:flex-start;gap:.6rem;text-decoration:none}
body.knowledge-panel-article .related-links a:hover{text-decoration:underline}
body.knowledge-panel-article .related-links svg{flex:0 0 1.1rem;margin-top:.25rem}
body.knowledge-panel-article .closing p{margin-bottom:1.1rem}
body.knowledge-panel-article .button{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.6rem 1rem;border-radius:999px;text-decoration:none!important;font-size:.9rem;font-weight:800}
body.knowledge-panel-article .button-primary{background:#111827;color:#fff!important}
body.knowledge-panel-article .button-primary:hover{background:#334155}
@media(max-width:640px){body.knowledge-panel-article .story{padding-top:2.5rem}body.knowledge-panel-article .fact-strip{grid-template-columns:1fr}body.knowledge-panel-article .related,body.knowledge-panel-article .closing{padding:1.2rem}}
body.knowledge-panel-article .knowledge-panel-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem;color:#64748b;font-size:.85rem;font-weight:700}
body.knowledge-panel-article .knowledge-panel-google-button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.7rem;min-height:2.8rem;padding:.7rem 1.1rem;border:1px solid #1459db;border-radius:9px;background:#1459db;color:#fff!important;font-size:.9rem;font-weight:800;line-height:1.2;text-decoration:none!important}
body.knowledge-panel-article .knowledge-panel-google-button svg{width:1.15rem;height:1.15rem}
body.knowledge-panel-article .knowledge-panel-google-button:hover,body.knowledge-panel-article .knowledge-panel-google-button:focus-visible{background:#0a48bd;border-color:#0a48bd;color:#fff!important}
body.knowledge-panel-article .standard-hero>.container{padding-bottom:2rem}
body.knowledge-panel-article .knowledge-panel-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem}
body.knowledge-panel-article .knowledge-panel-actions .knowledge-panel-meta,body.knowledge-panel-article .knowledge-panel-actions .knowledge-panel-google-button{margin-top:0}
body.knowledge-panel-article .story{padding-top:1.5rem}
@media(max-width:640px){body.knowledge-panel-article .standard-hero>.container{padding-bottom:1.5rem}body.knowledge-panel-article .knowledge-panel-actions{align-items:flex-start;flex-direction:column;gap:1rem;margin-top:1.25rem}body.knowledge-panel-article .story{padding-top:1.25rem}}


/* CURRENT MAIN WEBSITE HEADER — SHARED BY ALL BLOG ARTICLES */
#navbar .nav-mobile-toggle #mobile-menu-icon::before { content:"☰"; font-family:Arial,sans-serif; font-style:normal; font-size:21px; line-height:1; }
#navbar .nav-mobile-toggle #mobile-menu-icon.fa-times::before { content:"×"; font-size:27px; }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
  :root { --nav-height: 76px; --offer-height: 48px; --nav-ink:#111; --nav-muted:#747980; }
  body { padding-top: calc(var(--nav-height) + var(--offer-height)); }
  #navbar { position:fixed; inset:0 0 auto; z-index:999; background:#fff; border:0; box-shadow:none; font-family:Inter,Arial,sans-serif; }
  #navbar * { box-sizing:border-box; }
  #navbar .nav-offer { min-height:var(--offer-height); display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 20px; color:#fff; text-align:center; font-size:14px; font-weight:600; line-height:1.25; background:#071426; }
  
  
  #navbar .nav-offer a { color:#fff; }
  #navbar .nav-offer-link { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:34px; padding:0 14px; border-radius:4px; background:#ff2b7c; color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; font-weight:800; transition:background .2s,transform .2s; }
  #navbar .nav-offer-link:hover { background:#e91e6b; transform:translateY(-1px); }
  #navbar .nav-row { height:var(--nav-height); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 clamp(18px,2vw,32px); background:#fff; }
  #navbar .nav-brand { display:flex; align-items:center; gap:11px; min-width:270px; color:var(--nav-ink); text-decoration:none; }
  #navbar .nav-brand img { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
  #navbar .nav-brand-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
  #navbar .nav-brand-name { font-size:19px; font-weight:800; letter-spacing:-.065em; line-height:1; white-space:nowrap; }
  #navbar .nav-brand-sub { font-size:10px; font-weight:600; letter-spacing:.02em; color:#666; line-height:1.2; white-space:nowrap; }
  #navbar .nav-links { display:flex; align-items:center; justify-content:center; gap:clamp(10px,1.45vw,25px); height:100%; }
  #navbar .nav-link, #navbar .nav-menu-trigger { display:inline-flex; align-items:center; gap:7px; border:0; padding:10px 2px; color:var(--nav-ink); background:transparent; text-decoration:none; white-space:nowrap; font:600 14px/1 Inter,Arial,sans-serif; cursor:pointer; transition:color .18s; }
  #navbar .nav-link:hover, #navbar .nav-menu-trigger:hover, #navbar .nav-menu-trigger[aria-expanded=true] { color:#4b4b4b; }
  #navbar .nav-chevron { width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
  #navbar .nav-menu-trigger[aria-expanded=true] .nav-chevron { transform:translateY(2px) rotate(225deg); }
  #navbar .nav-actions { display:flex; align-items:center; gap:8px; }
  #navbar .nav-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 13px; border-radius:7px; border:1px solid transparent; text-decoration:none; white-space:nowrap; font:600 13px/1 Inter,Arial,sans-serif; transition:background .2s,transform .2s; }
  #navbar .nav-action-light { background:#f0f2f4; color:#191919; }
  #navbar .nav-action-light:hover { background:#e4e7ea; }
  #navbar .nav-action-dark { background:#242424; color:#fff; }
  #navbar .nav-action-dark:hover { background:#000; transform:translateY(-1px); }
  #navbar .nav-mobile-toggle { display:none; width:40px; height:40px; align-items:center; justify-content:center; background:#f0f2f4; border:0; border-radius:7px; color:#111; cursor:pointer; }
  #navbar .nav-panel { position:absolute; top:100%; left:20px; right:20px; z-index:2; padding:32px 30px 30px; border:1px solid #e2e4e7; border-radius:18px; background:#fff; box-shadow:0 14px 34px rgba(8,15,25,.2); opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none; transition:opacity .22s,transform .22s,visibility .22s; }
  #navbar .nav-panel.is-open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  #navbar .nav-panel-head { padding-bottom:22px; border-bottom:1px solid #e6e7e9; }
  #navbar .nav-panel-title { margin:0 0 6px; color:#111; font-size:28px; font-weight:500; letter-spacing:-.055em; line-height:1.1; }
  #navbar .nav-panel-description { margin:0; color:#777; font-size:14px; line-height:1.4; }
  #navbar .nav-gallery-layout { display:grid; grid-template-columns:minmax(180px,.85fr) repeat(2,minmax(0,1fr)); gap:28px; align-items:start; }
  #navbar #nav-panel-gallery { padding-top:27px; padding-bottom:27px; }
  #navbar #nav-panel-gallery .nav-panel-title { font-size:20px; font-weight:600; letter-spacing:-.04em; }
  #navbar #nav-panel-gallery .nav-panel-description { max-width:290px; font-size:13px; }
  #navbar #nav-panel-gallery a { padding:3px 0; }
  #navbar .nav-panel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding-top:24px; }
  #navbar .nav-panel-label { display:block; margin-bottom:13px; color:#737b86; font-size:12px; font-weight:600; }
  #navbar .nav-panel a { display:block; width:max-content; max-width:100%; padding:7px 0; color:#151515; text-decoration:none; font-size:15px; font-weight:600; letter-spacing:-.025em; transition:color .18s,transform .18s; }
  #navbar .nav-panel a:hover { color:#3155a7; transform:translateX(3px); }
  #navbar .nav-panel small { display:block; margin-top:3px; color:#858585; font-size:12px; font-weight:400; letter-spacing:0; }
  #nav-scrim { position:fixed; inset:calc(var(--offer-height) + var(--nav-height)) 0 0; z-index:998; background:rgba(5,12,18,.24); backdrop-filter:blur(4px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s,visibility .22s; }
  #nav-scrim.is-open { opacity:1; visibility:visible; pointer-events:auto; }
  #mobile-menu { display:none; }
  #navbar a:focus-visible, #navbar button:focus-visible { outline:2px solid #3565cf; outline-offset:3px; }
  @media (max-width:1250px) { #navbar .nav-brand { min-width:auto; } #navbar .nav-brand-name { font-size:17px; } #navbar .nav-links { gap:12px; } #navbar .nav-link,#navbar .nav-menu-trigger { font-size:13px; } }
  @media (max-width:1160px) { #navbar .nav-links, #navbar .nav-action-light { display:none; } #navbar .nav-mobile-toggle { display:inline-flex; } #navbar .nav-row { gap:12px; } #mobile-menu { display:block; position:absolute; top:100%; left:12px; right:12px; max-height:calc(100vh - var(--offer-height) - var(--nav-height) - 24px); overflow:auto; padding:14px; border:1px solid #e4e6e9; border-radius:14px; background:#fff; box-shadow:0 18px 42px rgba(0,0,0,.17); opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none; transition:opacity .22s,transform .22s,visibility .22s; } #mobile-menu.visible { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } #mobile-menu a { display:block; padding:11px 12px; border-radius:6px; color:#171717; text-decoration:none; font-size:15px; font-weight:600; } #mobile-menu a:hover { background:#f1f3f5; } #mobile-menu .mobile-section { display:block; margin:17px 12px 4px; padding-top:14px; border-top:1px solid #e5e7eb; color:#7d838d; font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; } #mobile-menu .mobile-cta { margin-top:12px; background:#242424; color:white; text-align:center; } #navbar .nav-panel { display:none; } }
  @media (max-width:620px) { :root { --offer-height:40px; --nav-height:58px; } #navbar .nav-offer { flex-wrap:nowrap; gap:8px; height:40px; padding:0 8px; font-size:11px; white-space:nowrap; } #navbar .nav-offer-link { min-height:28px; padding:0 9px; font-size:10px; } #navbar .nav-row { padding:0 14px; } #navbar .nav-brand { gap:8px; } #navbar .nav-brand img { width:30px; height:30px; } #navbar .nav-brand-name { font-size:13px; } #navbar .nav-brand-sub { font-size:8px; } #navbar .nav-action-dark { display:none; } }
  @media (max-width:360px) { #navbar .nav-offer { gap:5px; font-size:10px; } }
  @media (prefers-reduced-motion:reduce) { #navbar *,#nav-scrim { transition:none !important; } }

  /* Click-operated mega menus with compact, cropped editorial cards. */
  #navbar .nav-offer-link { display:inline; min-height:0; padding:0; border-radius:0; background:transparent; color:#fff; text-decoration:underline; text-underline-offset:3px; text-transform:none; letter-spacing:0; font-weight:700; transition:opacity .2s; }
  #navbar .nav-offer-link:hover { background:transparent; color:#fff; transform:none; opacity:.78; }
  #navbar .nav-panel { left:50%; right:auto; width:min(1240px,calc(100vw - 40px)); max-height:calc(100vh - var(--offer-height) - var(--nav-height) - 16px); overflow-y:auto; padding:26px; transform:translate(-50%,-10px); }
  #navbar .nav-panel.is-open { transform:translate(-50%,0); }
  #navbar #nav-panel-gallery { width:min(1040px,calc(100vw - 40px)); padding:26px; }
  #navbar .nav-gallery-layout { grid-template-columns:minmax(200px,.9fr) repeat(2,minmax(0,1fr)); gap:28px; padding-bottom:20px; }
  #navbar .nav-gallery-layout > div:first-child { border-right:1px solid #e4e6e8; padding-right:26px; }
  #navbar #nav-panel-gallery .nav-panel-title { font-size:19px; }
  #navbar .nav-panel-grid { gap:0; padding:0 0 18px; }
  #navbar .nav-column { padding:0 22px; }
  #navbar .nav-column:first-child { padding-left:0; border-right:1px solid #e4e6e8; }
  #navbar .nav-column:last-child { padding-right:0; }
  #navbar .nav-panel-label { margin-bottom:10px; color:#777; font-size:12px; text-transform:uppercase; letter-spacing:.035em; }
  #navbar .nav-panel a.nav-item { display:flex; width:100%; align-items:flex-start; gap:11px; padding:7px 4px; color:#141826; font-size:14px; line-height:1.25; }
  #navbar .nav-panel a.nav-item:hover { color:#3155a7; transform:none; }
  #navbar .nav-item-icon { display:inline-flex; width:30px; height:30px; flex:none; align-items:center; justify-content:center; border:1px solid #d9dce1; border-radius:7px; color:#18213a; background:#fff; font-size:12px; transition:background .2s,border-color .2s; }
  #navbar .nav-item:hover .nav-item-icon { background:#eef2fb; border-color:#abbce6; }
  #navbar .nav-item small { margin-top:4px; }
  #navbar .nav-panel a.nav-feature { display:block; position:relative; width:100%; height:104px; overflow:hidden; border:0; border-radius:12px; padding:0; background:#17316f; color:#fff; transform:none; box-shadow:none; }
  #navbar .nav-feature-artwork { position:absolute; top:0; right:0; width:62%!important; max-width:none!important; height:100%!important; object-fit:cover!important; object-position:center!important; transition:transform .35s; }
  #navbar .nav-feature::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,#0c1d51 0%,#0c1d51 34%,rgba(12,29,81,.88) 46%,rgba(12,29,81,.24) 62%,rgba(12,29,81,0) 74%); pointer-events:none; }
  #navbar .nav-feature-copy { position:relative; z-index:2; display:flex; height:100%; width:43%; max-width:none; flex-direction:column; justify-content:center; padding:12px 24px; }
  #navbar .nav-feature strong { color:#fff; font-size:16px; font-weight:700; line-height:1.2; }
  #navbar .nav-feature strong span { display:inline-block; margin-left:5px; transition:transform .2s; }
  #navbar .nav-feature small { display:block; margin-top:7px; color:#e3e9ff; font-size:12px; line-height:1.35; }
  #navbar .nav-feature:hover .nav-feature-artwork { transform:scale(1.025); }
  #navbar .nav-feature:hover strong span { transform:translateX(3px); }
  @media (max-width:1160px) { #navbar .nav-panel { display:none; } }
  @media (max-width:620px) { #navbar .nav-offer-link { min-height:0; padding:0; font-size:11px; } }
  #navbar .nav-offer-message { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  #navbar .nav-nov-word { display:inline-flex; align-items:center; isolation:isolate; padding:2px 0; white-space:nowrap; }
  #navbar .nav-nov-word > span { display:inline-flex; width:23px; height:23px; align-items:center; justify-content:center; border-radius:50%; color:#172033; font-size:13px; font-weight:800; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.14); }
  #navbar .nav-nov-word > span + span { margin-left:-2px; }
  #navbar .nav-nov-word > span:nth-child(1) { background:#fb86dc; transform:rotate(-13deg); }
  #navbar .nav-nov-word > span:nth-child(2) { background:#66dbe9; transform:rotate(9deg); }
  #navbar .nav-nov-word > span:nth-child(3) { background:#c7ef4c; transform:rotate(-8deg); }
  #navbar .nav-offer-status { color:#fff; }
  #navbar .nav-offer-status::before { content:'•'; display:inline-block; margin:0 7px; color:#fff; }
  #navbar .nav-offer-timer { display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:#071426; color:#111; font-variant-numeric:tabular-nums; white-space:nowrap; }
  #navbar .nav-timer-unit { display:inline-flex; min-width:39px; height:27px; align-items:baseline; justify-content:center; gap:1px; padding:5px 3px; border-radius:4px; background:#fff; }
  #navbar .nav-timer-unit b { color:#111; font-size:13px; font-weight:800; }
  #navbar .nav-timer-unit small { color:#111; font-size:10px; font-weight:600; }
  @media (max-width:620px) { :root { --offer-height:56px; } #navbar .nav-offer { display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:23px 20px; align-content:center; gap:2px 8px; height:56px; padding:3px 8px; white-space:nowrap; } #navbar .nav-offer-message { grid-column:1 / -1; gap:7px; font-size:10.5px; } #navbar .nav-nov-word > span { width:18px; height:18px; font-size:10px; } #navbar .nav-offer-status::before { margin:0 4px; } #navbar .nav-offer-timer { grid-column:2; grid-row:2; gap:3px; } #navbar .nav-timer-unit { min-width:30px; height:18px; padding:2px; border-radius:3px; } #navbar .nav-timer-unit b { font-size:11px; } #navbar .nav-timer-unit small { font-size:9px; } #navbar .nav-offer-link { grid-column:3; grid-row:2; justify-self:start; font-size:10.5px; } #navbar .nav-mobile-toggle { width:36px; height:36px; } }
  @media (max-width:360px) { #navbar .nav-offer-message { font-size:9.5px; gap:5px; } #navbar .nav-offer-status::before { margin:0 3px; } }

/* Blog page uses the same navigation shell and full website routes. */
  body{padding-top:calc(var(--nav-height) + var(--offer-height))!important}
  #navbar,#navbar.navbar-scrolled,#navbar.navbar-hidden{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;transform:none!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important;opacity:1!important;pointer-events:auto!important}
  #navbar *:not(i), #nav-scrim { font-family:Inter,Arial,sans-serif!important; }
  #navbar .nav-offer-link{color:#fff!important}
  #navbar .nav-brand-sub{color:#617080!important}
  #navbar .nav-panel .nav-feature-artwork{object-fit:cover}
  #navbar .nav-panel .nav-feature{width:100%}
  #navbar .nav-panel .nav-feature img{width:62%!important;max-width:none!important;height:100%!important}
  #navbar .nav-panel a:hover{color:#3155a7}
  #navbar #mobile-menu{z-index:1000}
  @media(max-width:1160px){#navbar .nav-links,#navbar .nav-action-light{display:none!important}#navbar .nav-actions{display:flex!important;margin-left:auto}#navbar .nav-mobile-toggle{display:inline-flex!important;position:absolute;right:15px;top:calc(var(--offer-height) + (var(--nav-height) - 40px)/2);z-index:1001}}
  @media(max-width:620px){#navbar .nav-offer{min-height:56px}}


/* CURRENT MAIN WEBSITE LOCAL FONTS */
#navbar,
#navbar *:not(i),
#nav-scrim {
  font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif !important;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin-700-normal.woff2') format('woff2');
}

/* Use the locally hosted Bricolage Grotesque throughout the visible website.
   Icon glyphs keep their own Font Awesome font families. */
html,
body,
body *:not(i):not([class^="fa-"]):not([class*=" fa-"]) {
  font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif !important;
}

/* Keep the home-page Art Journey promotional subheader in its original typeface. */
#page-home .admission-home-strip h2,
#page-home .admission-mobile-title,
#page-home .admission-mobile-title *,
#page-social .admission-home-strip h2,
#page-social .admission-mobile-title,
#page-social .admission-mobile-title * {
  font-family: 'Fredoka', 'Arial Rounded MT Bold', ui-rounded, sans-serif !important;
}

/* Home hero headlines: use the locally bundled, kid-friendly Fredoka face. */
#page-home .hero-mobile-title,
#page-home .hero-image-title,
#page-home #typing-text {
  font-family: 'Fredoka', 'Arial Rounded MT Bold', ui-rounded, sans-serif !important;
}

#page-home #typing-text {
  font-weight: 600 !important;
}