/* ==========================================================================
   Sigalix.com — shared stylesheet
   Brand tokens (see DESIGN.md): Midnight #0B1020 · Electric Blue #2F5BFF
   Signal Cyan #18D2C4 (dark backgrounds only) · Solar #FFB547 (accent)
   Graphite #2A3142 · Slate #6B7489 · Mist #DCE1EA · Paper #F5F7FA
   Most layout is written inline on each element, exactly as designed on
   the canvas. This file holds the brand font, states and responsive rules.
   ========================================================================== */

@font-face {
  font-family: "ERILA";
  src: url("/assets/fonts/ERILA.woff2") format("woff2");
  font-display: swap;
}

/* Syllabus uses IBM Plex Sans for headings: clear at display sizes and
   consistent across English, French, Spanish, Portuguese and German. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}

:root {
  --midnight: #0B1020;
  --blue: #2F5BFF;
  --blue-press: #2249E0;
  --cyan: #18D2C4;
  --solar: #FFB547;
  --graphite: #2A3142;
  --slate: #6B7489;
  --mist: #DCE1EA;
  --paper: #F5F7FA;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-press); }
.sx *, .sx { box-sizing: border-box; }
.sx p, .sx h1, .sx h2, .sx h3, .sx li, .sx dd { text-wrap: pretty; }
.sx h1 {
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
}
.sx img { display: block; max-width: 100%; height: auto; }

/* Conditional blocks (shown/hidden by site.js) */
.sx-if { display: contents; }
.sx-off { display: none !important; }

/* Buttons, links, cards */
.sx-btn { transition: background .18s ease-out; }
.sx-btn:hover { background: var(--blue-press) !important; color: #fff !important; }
.sx-btn2:hover { background: var(--midnight) !important; color: #fff !important; }
.sx-btn2d:hover { background: #fff !important; color: var(--midnight) !important; }
.sx-q:hover { text-decoration: underline; }
.sx-row { transition: background .18s ease-out; }
.sx-row:hover { background: #FFFFFF !important; }
.sx-card { transition: border-color .18s ease-out; }
.sx-card:hover { border-color: var(--blue) !important; }
.sx-card:hover .sx-t, .sx-row:hover .sx-t { color: var(--blue) !important; }
.sx-dark .sx-card:hover .sx-t { color: var(--cyan) !important; }
.sx-chip:hover { border-color: var(--blue) !important; color: var(--blue) !important; }
.sx-arrow { transition: transform .18s ease-out; }
.sx-row:hover .sx-arrow, .sx-card:hover .sx-arrow, .sx-mlink:hover .sx-arrow { transform: translateX(5px); }

/* Navigation */
.sx-mlink { transition: background .15s ease-out; }
.sx-mlink:hover { background: var(--paper) !important; }
.sx-mlink:hover .sx-mt { color: var(--blue) !important; }
.sx-navbtn:hover, .sx-navbtn[aria-expanded="true"] { color: var(--blue) !important; }
.sx-navbtnd:hover, .sx-navbtnd[aria-expanded="true"] { color: var(--cyan) !important; }
.sx-navbtn[aria-expanded="true"] svg, .sx-navbtnd[aria-expanded="true"] svg { transform: rotate(180deg); }
.sx-navbtn svg, .sx-navbtnd svg { transition: transform .15s ease-out; }

/* Focus */
.sx :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sx-dark :focus-visible { outline-color: var(--cyan); }

/* FAQ accordions */
.sx details summary { list-style: none; cursor: pointer; }
.sx details summary::-webkit-details-marker { display: none; }
.sx details[open] .sx-plus { transform: rotate(45deg); }
.sx-plus { transition: transform .18s ease-out; }

/* Forms */
.sx input:focus, .sx select:focus, .sx textarea:focus { border-color: var(--blue) !important; outline: none; box-shadow: 0 0 0 1px var(--blue); }

/* Legal documents */
.sx-doc h2 { margin: 40px 0 0; font-size: 24px; font-weight: 600; line-height: 1.35; color: var(--midnight); }
.sx-doc h2:first-child { margin-top: 0; }
.sx-doc p, .sx-doc ul { margin: 0; }
.sx-doc ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Responsive */
.sx-menu { display: none !important; }
.sx-onlym { display: none !important; }
@media (max-width: 1120px) {
  .sx-navlinks { display: none !important; }
  .sx-menu { display: inline-flex !important; }
  .sx-hide-m { display: none !important; }
  .sx-onlym { display: flex !important; }
}
@media (max-width: 760px) {
  .sx-util { display: none !important; }
  .sx-sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .sx-hero { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* Long translated headlines need more breathing room than English. */
html[lang="es"] #hero-title,
html[lang="pt"] #hero-title,
html[lang="de"] #hero-title {
  font-size: clamp(48px, 6.1vw, 94px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
}

/* German compound nouns are easier to scan in the supporting typeface. */
html[lang="de"] .sx-hero h1 {
  font-size: clamp(46px, 5.8vw, 88px) !important;
  line-height: 1.04 !important;
}

/* The supporting promise is intentionally quieter than the primary claim. */
.sx-hero-secondary {
  display: block;
  margin-top: 0.18em;
  font-size: 50%;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

@media (max-width: 760px) {
  html[lang="es"] #hero-title,
  html[lang="pt"] #hero-title,
  html[lang="de"] #hero-title {
    font-size: clamp(42px, 11.5vw, 70px) !important;
  }
}

/* Motion */
@keyframes sxMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sx-marq { animation: sxMarq 45s linear infinite; }
.sx-marqwrap:hover .sx-marq { animation-play-state: paused; }
@keyframes sxA { from { transform: translate(-60px, -60px); opacity: 0; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes sxB { from { transform: translate(60px, 60px); opacity: 0; } to { transform: translate(0, 0); opacity: 1; } }
.sx-qa { animation: sxA 1.6s cubic-bezier(.16, .84, .24, 1) .2s both; }
.sx-qb { animation: sxB 1.6s cubic-bezier(.16, .84, .24, 1) .2s both; }
@keyframes sxDriftA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, -10px); } }
@keyframes sxDriftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, 10px); } }
.sx-da { animation: sxDriftA 6s ease-in-out infinite; }
.sx-db { animation: sxDriftB 6s ease-in-out infinite; }
.sx-l:hover { background: #121829 !important; }
@keyframes sxDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.sx-drop { animation: sxDropIn .16s ease-out both; }

/* Toast (language notice) */
.sx-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; max-width: min(520px, calc(100% - 32px)); background: var(--midnight); color: #fff; padding: 14px 18px; border-radius: 6px; font: 500 15px/1.5 Inter, system-ui, sans-serif; box-shadow: 0 0 0 1px #2A3142; }

@media (prefers-reduced-motion: reduce) {
  .sx-marq, .sx-qa, .sx-qb, .sx-drop, .sx-da, .sx-db { animation: none; }
}

/* Analytics consent banner */
.sx-consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 20px; background: var(--midnight); color: #fff; border: 1px solid #2A3142; border-radius: 0 0 0 24px; font: 400 15px/1.55 Inter, system-ui, sans-serif; }
.sx-consent p { margin: 0; flex: 1 1 320px; color: #DCE1EA; }
.sx-consent a { color: #18D2C4; }
.sx-consent div { display: flex; gap: 8px; flex-wrap: wrap; }
.sx-consent button { height: 44px; padding: 0 18px; border-radius: 6px; font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer; border: 1.5px solid #DCE1EA; background: transparent; color: #fff; }
.sx-consent button[data-consent="yes"] { background: var(--blue); border-color: var(--blue); }
.sx-consent button:focus-visible { outline: 2px solid #18D2C4; outline-offset: 2px; }