:root {
  --hs-navy: #0E2B63;
  --hs-navy-dark: #081A3D;
  --hs-terracotta: #C85A32;
  --hs-terracotta-soft: #F15A3B;
  --hs-sand: #F6EFE4;
  --hs-cream: #FFF9F1;
  --hs-ink: #101827;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--hs-cream);
  color: var(--hs-ink);
}

.hs-shell-bg {
  background:
    radial-gradient(circle at top left, rgba(200, 90, 50, .16), transparent 32rem),
    radial-gradient(circle at 82% 8%, rgba(14, 43, 99, .12), transparent 30rem),
    linear-gradient(180deg, #fffaf2 0%, #f7efe4 56%, #f4ecdf 100%);
}

.hs-admin-bg {
  background:
    radial-gradient(circle at 20% 0%, rgba(200, 90, 50, .16), transparent 28rem),
    radial-gradient(circle at 100% 0%, rgba(14, 43, 99, .18), transparent 34rem),
    linear-gradient(180deg, #f9f3ea 0%, #f6efe4 100%);
}

.hs-portal-bg {
  background:
    radial-gradient(circle at 84% 0%, rgba(14, 43, 99, .08), transparent 32rem),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.hs-card {
  border: 1px solid rgba(14, 43, 99, .10);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 22px 70px rgba(14, 43, 99, .08);
  backdrop-filter: blur(18px);
}

.hs-card-solid {
  border: 1px solid rgba(14, 43, 99, .10);
  background: #fffaf2;
  box-shadow: 0 18px 60px rgba(14, 43, 99, .07);
}

/* Roman/Split motif used instead of a square grid. */
.hs-roman-motif {
  background-image:
    radial-gradient(120% 74% at 50% 100%, transparent 58%, rgba(200, 90, 50, .13) 59%, transparent 61%),
    radial-gradient(120% 74% at 50% 100%, transparent 66%, rgba(14, 43, 99, .08) 67%, transparent 69%),
    linear-gradient(90deg, transparent 0 12%, rgba(14, 43, 99, .035) 12% 13%, transparent 13% 24%, rgba(14, 43, 99, .035) 24% 25%, transparent 25% 100%);
  background-size: 260px 160px, 260px 160px, 260px 160px;
  background-position: 0 0, 0 0, 0 0;
}

.hs-arch-line {
  position: relative;
  overflow: hidden;
}

.hs-arch-line::after {
  content: "";
  position: absolute;
  inset: auto -8% -46% -8%;
  height: 64%;
  border: 1px solid rgba(200, 90, 50, .22);
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  pointer-events: none;
}

.hs-roman-card {
  position: relative;
  overflow: hidden;
}

.hs-roman-card::before {
  content: "";
  position: absolute;
  inset: auto 10% -38% 10%;
  height: 55%;
  border: 1px solid rgba(200, 90, 50, .18);
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  pointer-events: none;
}

.hs-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
.hs-scrollbar::-webkit-scrollbar-thumb { background: rgba(14, 43, 99, .20); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.hs-scrollbar::-webkit-scrollbar-track { background: transparent; }

.hs-focus:focus-visible {
  outline: 3px solid rgba(200, 90, 50, .38);
  outline-offset: 3px;
}

.hs-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 26, 61, .42);
  backdrop-filter: blur(3px);
}

.hs-mobile-drawer {
  transform: translateX(-104%);
  transition: transform .22s ease;
}

.hs-mobile-drawer.is-open { transform: translateX(0); }

@media (min-width: 1024px) {
  .hs-app-sidebar {
    transform: none !important;
    position: sticky !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Fallback custom utility colors in case Tailwind CDN config is unavailable in local file previews. */
.text-navy { color: var(--hs-navy) !important; }
.text-navy-dark { color: var(--hs-navy-dark) !important; }
.text-terracotta { color: var(--hs-terracotta) !important; }
.text-coral { color: var(--hs-terracotta-soft) !important; }
.text-ink { color: var(--hs-ink) !important; }
.bg-navy { background-color: var(--hs-navy) !important; }
.bg-navy-dark { background-color: var(--hs-navy-dark) !important; }
.bg-terracotta { background-color: var(--hs-terracotta) !important; }
.bg-coral { background-color: var(--hs-terracotta-soft) !important; }
.bg-cream { background-color: var(--hs-cream) !important; }
.bg-navy\/5 { background-color: rgba(14, 43, 99, .05) !important; }
.bg-navy\/8 { background-color: rgba(14, 43, 99, .08) !important; }
.bg-navy\/10 { background-color: rgba(14, 43, 99, .10) !important; }
.bg-terracotta\/10 { background-color: rgba(200, 90, 50, .10) !important; }
.bg-terracotta\/20 { background-color: rgba(200, 90, 50, .20) !important; }
.border-navy\/10 { border-color: rgba(14, 43, 99, .10) !important; }
.border-navy\/12 { border-color: rgba(14, 43, 99, .12) !important; }
.border-navy\/15 { border-color: rgba(14, 43, 99, .15) !important; }
.border-navy\/20 { border-color: rgba(14, 43, 99, .20) !important; }
.border-terracotta\/20 { border-color: rgba(200, 90, 50, .20) !important; }
.border-terracotta\/30 { border-color: rgba(200, 90, 50, .30) !important; }
.ring-terracotta\/20 { --tw-ring-color: rgba(200, 90, 50, .20) !important; }
.shadow-soft { box-shadow: 0 18px 60px rgba(14,43,99,.10) !important; }
.shadow-lift { box-shadow: 0 30px 90px rgba(14,43,99,.16) !important; }
.hover\:bg-coral:hover { background-color: var(--hs-terracotta-soft) !important; }
.hover\:bg-navy:hover { background-color: var(--hs-navy) !important; }
.hover\:bg-navy-dark:hover { background-color: var(--hs-navy-dark) !important; }
.hover\:text-navy:hover { color: var(--hs-navy) !important; }

.hs-legal-content h2 {
  margin-bottom: .75rem;
  color: #081A3D;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.hs-legal-content p {
  margin-top: .75rem;
  line-height: 1.8;
}
.hs-legal-content ul {
  margin-top: .85rem;
  margin-left: 1.25rem;
  list-style: disc;
  line-height: 1.8;
}
.hs-legal-content a {
  color: #0E2B63;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}


@media print {
  @page {
    margin: 14mm;
  }

  html,
  body {
    background: #ffffff !important;
  }

  body,
  .hs-portal-bg,
  .hs-shell-bg,
  .hs-admin-bg {
    background: #ffffff !important;
    color: #101827 !important;
  }

  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-print-hide],
  [data-drawer-open],
  [data-drawer-close],
  [data-drawer-overlay],
  #portal-sidebar,
  #print-answer-button,
  #portal-message,
  #ask {
    display: none !important;
  }

  #portal-layout {
    display: block !important;
    min-height: 0 !important;
  }

  main {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  header {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    border: 0 !important;
    background: #ffffff !important;
  }

  header > div {
    min-height: 0 !important;
    padding: 0 0 8mm 0 !important;
    display: block !important;
  }

  #portal-question-title {
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 20pt !important;
    line-height: 1.18 !important;
    color: #081A3D !important;
  }

  #portal-main-content {
    padding: 0 !important;
    width: 100% !important;
  }

  #answer {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #answer-card,
  #answer-card.hs-card,
  .hs-card {
    border: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  #answer-card .prose,
  #answer-card .prose-slate {
    max-width: none !important;
    width: 100% !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
    color: #101827 !important;
  }

  #answer-card h3,
  #answer-card h4 {
    page-break-after: avoid;
    break-after: avoid;
    color: #081A3D !important;
  }

  #answer-card ul,
  #answer-card ol {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  #answer-card a {
    color: #0E2B63 !important;
    text-decoration: underline !important;
  }
}