@layer reset, theme, framework, component, user;
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; overflow-wrap: break-word; word-wrap: break-word; min-width: 0; }
p { margin: 0; overflow-wrap: break-word; word-wrap: break-word; min-width: 0; }
a { color: inherit; text-decoration: none; overflow-wrap: break-word; word-wrap: break-word; min-width: 0; }
span, li, blockquote, label { overflow-wrap: break-word; word-wrap: break-word; min-width: 0; }
img, video { max-width: 100%; display: block; }
[data-builder-id] { min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[contenteditable] ul, [contenteditable] ol,
[data-builder-type="RichText"] ul, [data-builder-type="RichText"] ol,
[data-builder-type="TextBlock"] ul, [data-builder-type="TextBlock"] ol,
[data-builder-type="Blockquote"] ul, [data-builder-type="Blockquote"] ol {
  list-style: revert; padding-left: 1.5em; margin: 0.25em 0;
}
}
@layer framework {
/* ============================================================
   FRAMEWORK CSS — structural defaults only.
   Rule: only set display/layout properties that are invisible
   to the user but necessary for the element to FUNCTION.
   NO colors, NO fonts, NO borders, NO backgrounds.
   Users style everything via their own classes.
   ============================================================ */

/* ---- Core layout structure ---- */
[data-builder-type="Section"] {
  display: block;
  width: 100%;
  padding: var(--sf-section-padding-y, 80px) var(--sf-section-padding-x, 20px);
}
[data-builder-type="Container"] {
  max-width: var(--sf-container-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sf-section-padding-x, 20px);
  padding-right: var(--sf-section-padding-x, 20px);
}
[data-builder-type="Div"] {
  display: block;
  padding: 20px;
}
[data-builder-type="Grid"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
[data-builder-type="Columns"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
[data-builder-type="Column"] {
  min-width: 0;
  padding: 16px;
}
[data-builder-type="HStack"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}
[data-builder-type="VStack"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
[data-builder-type="Spacer"] {
  display: block;
  min-height: 32px;
}

/* ---- Navigation — structural only (TASK-083: CSSRuleBuilder) ---- */
[data-builder-type="Nav"] {
  width: 100%;
  position: relative;
}
[data-builder-type="NavInner"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
}
[data-builder-type="NavBrand"] {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
[data-builder-type="NavMenu"] {
  display: flex;
  align-items: center;
  gap: 4px;
}
[data-builder-type="NavToggle"] {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
[data-builder-type="NavLink"] {
  text-decoration: none;
}
[data-builder-type="NavDropdown"] {
  position: relative;
  display: inline-flex;
  align-items: center;
}
:where([data-nav-dropdown-content]) {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  background-color: var(--sf-dropdown-bg, var(--sf-color-surface, #ffffff));
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 10px 32px -4px rgba(0,0,0,0.12);
  border: 1px solid var(--sf-dropdown-border, var(--sf-color-border, #e5e7eb));
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
:where([data-nav-dropdown-content] [data-builder-type="NavLink"]) {
  padding: 8px 12px;
  color: var(--sf-dropdown-text, var(--sf-color-body, #374151));
  white-space: nowrap;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ---- Forms — minimum to be usable ---- */
[data-builder-type="Form"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-builder-type="Textarea"] {
  resize: vertical;
  min-height: 80px;
}
[data-builder-type="Label"] {
  display: block;
}

[data-builder-type="Divider"] {
  display: block;
  width: 100%;
}

/* ---- CTA + vertical divider (TASK-083: CSSRuleBuilder) ---- */
:where([data-nav-cta]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 6px;
  background-color: var(--sf-btn-bg, var(--sf-color-primary, #4F46E5));
  color: var(--sf-btn-color, var(--sf-color-primary-text, #ffffff));
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
:where([data-nav-cta]:hover) {
  opacity: 0.9;
}
:where([data-nav-menu] > [data-builder-type="Divider"]) {
  width: auto;
  height: 1.2em;
  min-height: 0;
  border-left: 1px solid currentColor;
  opacity: 0.25;
  align-self: center;
  margin: 0 4px;
}

/* ---- Dynamic ---- */
[data-builder-type="CollectionList"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
} /* end @layer framework */

@layer component {
/* ============================================================
   COMPONENT CSS — interactive component runtime styles.
   Accordion, Tabs, Slider, Modal, Drawer, Tooltip, Nav state.
   Component layer sits above framework in cascade.
   ============================================================ */

/* ── Nav component CSS (TASK-083: CSSRuleBuilder) ── */
/* Hamburger ↔ × icon swap — animated crossfade + rotate */
[data-nav-toggle] {
  position: relative;
}
[data-nav-toggle] .nav-icon-open,
[data-nav-toggle] .nav-icon-close {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-nav-toggle] .nav-icon-close {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
}
[data-nav-toggle][aria-expanded="true"] .nav-icon-open {
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
}
[data-nav-toggle][aria-expanded="true"] .nav-icon-close {
  opacity: 1;
  transform: none;
}
/* Drawer open: lift logo + toggle above backdrop */
[data-nav][data-nav-open] [data-nav-brand],
[data-nav][data-nav-open] [data-nav-toggle] {
  position: relative;
  z-index: 1000;
}
/* Mega menu — NavDropdown position:static so content spans full nav width */
[data-nav-dropdown][data-mega] {
  position: static;
}
[data-nav-dropdown][data-mega] > [data-nav-dropdown-content] {
  top: 100%;
  left: 0;
  right: 0;
  min-width: 0;
  width: auto;
}

/* ---- Tabs (TASK-084: CSSRuleBuilder) ---- */
[data-builder-type="Tabs"] {
  display: flex;
  flex-direction: column;
  width: 100%;
}
[data-builder-type="TabList"] {
  display: flex;
}
[data-builder-type="TabPanels"] {
  width: 100%;
}
/* Tab layout variants */
[data-tabs][data-tabs-layout="top"] {
  display: flex;
  flex-direction: column;
}
[data-tabs][data-tabs-layout="bottom"] {
  display: flex;
  flex-direction: column-reverse;
}
[data-tabs][data-tabs-layout="left"] {
  display: flex;
  flex-direction: row;
}
[data-tabs][data-tabs-layout="right"] {
  display: flex;
  flex-direction: row-reverse;
}
/* Tab panel visibility */
[data-tab-panel] {
  display: none;
}
[data-tab-panel][data-open] {
  display: block;
}
[data-builder-edit] [data-tabs][data-tabs-preview="all"] [data-tab-panel] {
  display: block;
}
/* ── Slider CSS is defined in lib/builder-core/slider/slider-css.ts (SLIDER_CSS) ── */

/* ── Slider / Embla Carousel ───────────────────────────────────────────────
   These styles MUST load before Embla measures the DOM.
   All selectors are scoped to [data-slider] to avoid global leakage.     */

[data-slider] {
  position: relative;
}

[data-slider] .embla__viewport {
  overflow: hidden;
}

[data-slider][data-slider-axis="y"] .embla__viewport {
  height: var(--slider-slide-height, 300px);
}

[data-slider] .embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  backface-visibility: hidden;
  margin-left: calc(var(--slider-spacing, 0px) * -1);
}

[data-slider][data-slider-axis="y"] .embla__container {
  flex-direction: column;
  margin-left: 0;
  margin-top: 0;
  gap: var(--slider-spacing, 0px);
  /* Y-axis: let browser handle horizontal panning so Embla can capture vertical swipes */
  touch-action: pan-x pinch-zoom;
}

[data-slider] .embla__container > [data-slider-slide] {
  flex: 0 0 100%;
  min-width: 0;
  padding-left: var(--slider-spacing, 0px);
  box-sizing: content-box;
  background-clip: content-box;
}

[data-slider][data-slider-axis="y"] .embla__container > [data-slider-slide] {
  padding-left: 0;
  padding-top: 0;
  /* CSS-variable driven height: JS sets --slider-slide-height before Embla init.
     This selector has higher specificity than the base [data-slider] .embla__container > [data-slider-slide]
     rule because of the additional [data-slider-axis="y"] attribute. */
  flex: 0 0 var(--slider-slide-height, 300px);
  min-height: 0;
}

/* Fade plugin: slides stack (not flex row), each positioned absolutely by Embla */
[data-slider][data-slider-fade="true"] .embla__container {
  display: block;
}

[data-slider][data-slider-fade="true"] .embla__container > [data-slider-slide] {
  position: relative;
  backface-visibility: hidden;
}

/* ── Arrow navigation buttons ──────────────────────────────────────────── */

[data-slider] > .embla__button {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: var(--arrow-size, 40px);
  height: var(--arrow-size, 40px);
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--arrow-radius, 50%);
  border: none;
  cursor: pointer;
  background: var(--arrow-bg, rgba(255, 255, 255, 0.85));
  color: var(--arrow-color, #222);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: translateY(-50%);
  transition: background 0.15s, opacity 0.15s;
}

[data-slider] > .embla__button:hover {
  background: var(--arrow-bg-hover, #fff);
}

[data-slider] > .embla__button:active {
  background: var(--arrow-bg-active, rgba(0, 0, 0, 0.08));
}

[data-slider] > .embla__button--disabled {
  opacity: 0.3;
  cursor: default;
}

[data-slider] > .embla__button--prev {
  left: 12px;
}

[data-slider] > .embla__button--next {
  right: 12px;
}

/* Y-axis: arrows shift to top/bottom centered */
[data-slider][data-slider-axis="y"] > .embla__button {
  top: auto;
  left: 50%;
  transform: translateX(-50%);
}

[data-slider][data-slider-axis="y"] > .embla__button--prev {
  top: 8px;
}

[data-slider][data-slider-axis="y"] > .embla__button--next {
  bottom: 8px;
  top: auto;
}

/* ── Dot navigation ────────────────────────────────────────────────────── */

[data-slider] .embla__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

[data-slider] .embla__dot {
  width: var(--dot-size, 10px);
  height: var(--dot-size, 10px);
  border-radius: 50%;
  border: none;
  background: var(--dot-color, #d4d4d8);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

[data-slider] .embla__dot:hover {
  background: var(--dot-hover, #a1a1aa);
}

[data-slider] .embla__dot--selected {
  background: var(--dot-active, #18181b);
}

/* ── Progress bar ──────────────────────────────────────────────────────── */

[data-slider] .embla__progress {
  position: relative;
  width: 100%;
  height: var(--progress-height, 4px);
  background: var(--pb-track, #e4e4e7);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}

[data-slider] .embla__progress__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  width: 100%;
  background: var(--pb-bar, #18181b);
  border-radius: 2px;
}

/* ── Scroll bar (range input) ──────────────────────────────────────────── */

[data-slider] .embla__scroll-bar {
  width: 100%;
  margin-top: 12px;
  padding: 4px 0;
}

[data-slider] .embla__scroll-bar__track {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--sb-height, 4px);
  background: var(--sb-track, #e4e4e7);
  border-radius: 2px;
  cursor: pointer;
}

[data-slider] .embla__scroll-bar__track::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--sb-thumb-size, 20px);
  height: var(--sb-thumb-size, 20px);
  border-radius: 50%;
  background: var(--sb-thumb, #18181b);
  cursor: pointer;
  margin-top: calc(var(--sb-thumb-size, 20px) / -2 + var(--sb-height, 4px) / 2);
}

[data-slider] .embla__scroll-bar__track::-webkit-slider-thumb:hover {
  background: var(--sb-thumb-hover, var(--sb-thumb, #18181b));
}

[data-slider] .embla__scroll-bar__track::-moz-range-thumb {
  width: var(--sb-thumb-size, 20px);
  height: var(--sb-thumb-size, 20px);
  border-radius: 50%;
  background: var(--sb-thumb, #18181b);
  cursor: pointer;
  border: none;
}

[data-slider] .embla__scroll-bar__track::-moz-range-thumb:hover {
  background: var(--sb-thumb-hover, var(--sb-thumb, #18181b));
}

/* ── Snap counter display ──────────────────────────────────────────────── */

[data-slider] .embla__snap-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  font-size: 0.875rem;
  color: #71717a;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* ── Play / Stop button ────────────────────────────────────────────────── */

[data-slider] .embla__play {
  display: block;
  margin: 12px auto 0;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
  color: #18181b;
  cursor: pointer;
  transition: background 0.15s;
}

[data-slider] .embla__play:hover {
  background: #f4f4f5;
}

/* ── ClassNames plugin ─────────────────────────────────────────────────── */

[data-slider] .is-snapped {
  opacity: 1;
}

/* ── Lazy load ─────────────────────────────────────────────────────────── */

[data-slider] .embla__lazy-load__img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

[data-slider] .embla__lazy-load__img.is-loaded {
  opacity: 1;
}

/* ── Thumbs ────────────────────────────────────────────────────────────── */

[data-slider] .embla__thumbs__viewport {
  overflow: hidden;
  margin-top: 0.8rem;
}

[data-slider] .embla__thumbs__slide {
  flex: 0 0 22%;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s;
}

[data-slider] .embla-thumbs__slide--selected {
  opacity: 1;
}

/* ── Editor overrides (body has [data-builder-edit] attribute) ─────────── */
/*
 * DESIGN: Single-slide editing — Webflow / Bricks / Elementor pattern.
 * Embla runs with overflow: hidden so only one slide is visible at a time.
 * Drag is disabled in JS. Edit-mode arrows always render for navigation.
 * A "Slide N / Total" badge is injected by the runtime for orientation.
 */

/* Dashed outline marks each slide as a selectable element */
[data-builder-edit] [data-slider] .embla__container > [data-slider-slide] {
  outline: 1px dashed rgba(99, 102, 241, 0.35);
}

/* Edit-mode arrow buttons — builder chrome look (direct children only, never bleeds into SliderArrows).
   [data-builder-edit] prefix gives these higher specificity than the base rules. */
[data-builder-edit] [data-slider] > .embla__button {
  background: #ffffff;
  border: 1px solid #d4d4d8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

[data-builder-edit] [data-slider] > .embla__button:hover {
  background: #f4f4f5;
  border-color: #a1a1aa;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

[data-builder-edit] [data-slider] > .embla__button--disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* "Slide N / Total" counter badge */
[data-builder-edit] [data-slider] .embla__edit-counter {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 15, 0.55);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.03em;
}

/* Hide autoplay / progress / scrollbar controls — not useful while editing.
   [data-builder-edit] prefix provides higher specificity than base rules. */
[data-builder-edit] [data-slider] .embla__progress,
[data-builder-edit] [data-slider] .embla__play,
[data-builder-edit] [data-slider] .embla__scroll-bar {
  display: none;
}

/* ── External / Detached Slider Nav Elements ───────────────────────────────
   Standalone nav elements placed anywhere on the page, wired via data-slider-id.
   They reuse the same .embla__button, .embla__dot, etc. classes as built-in nav. */

[data-slider-arrows],
[data-slider-dots],
[data-slider-progress],
[data-slider-scroll-bar] {
  position: relative;
}

/* External arrow buttons — always styled via [data-slider-nav], no class dependency */
[data-slider-arrows] [data-slider-nav] {
  position: relative;
  width: var(--arrow-btn-width, 40px);
  height: var(--arrow-btn-height, 40px);
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--arrow-radius, 50%);
  border: none;
  cursor: pointer;
  background: var(--arrow-bg, rgba(255, 255, 255, 0.85));
  color: var(--arrow-color, #222);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.15s, opacity 0.15s;
  flex-shrink: 0;
}

[data-slider-arrows] [data-slider-nav]:hover {
  background: var(--arrow-bg-hover, #fff);
}

[data-slider-arrows] [data-slider-nav]:active {
  background: var(--arrow-bg-active, rgba(0, 0, 0, 0.08));
}

[data-slider-arrows] [data-slider-nav] svg {
  width: var(--arrow-icon-size, 24px);
  height: var(--arrow-icon-size, 24px);
  flex-shrink: 0;
}

[data-slider-arrows] [data-slider-nav].embla__button--disabled {
  opacity: 0.3;
  cursor: default;
}



/* External progress bar — track + fill */
[data-slider-progress] {
  background: var(--pb-track, transparent);
}

[data-slider-progress] .embla__progress__bar {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--pb-bar, currentColor);
}

/* External scroll bar — full-width range input */
[data-slider-scroll-bar] .embla__scroll-bar__track {
  width: 100%;
  height: var(--sb-height, 4px);
  background: var(--sb-track, #e4e4e7);
  cursor: pointer;
}

[data-slider-scroll-bar] .embla__scroll-bar__track::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--sb-thumb-size, 20px);
  height: var(--sb-thumb-size, 20px);
  border-radius: 50%;
  background: var(--sb-thumb, #18181b);
  cursor: pointer;
  margin-top: -8px;
}

[data-slider-scroll-bar] .embla__scroll-bar__track::-moz-range-thumb {
  width: var(--sb-thumb-size, 20px);
  height: var(--sb-thumb-size, 20px);
  border-radius: 50%;
  background: var(--sb-thumb, #18181b);
  cursor: pointer;
  border: none;
}

/* Edit mode: add a subtle border so the arrows are visible as builder chrome,
   but do NOT override background/color so custom CSS vars show through */
[data-builder-edit] [data-slider-arrows] [data-slider-nav] {
  border: 1px solid rgba(212, 212, 216, 0.6);
}

[data-builder-edit] [data-slider-arrows] [data-slider-nav].embla__button--disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Edit mode: "unlinked" placeholder when data-slider-target is empty */
[data-builder-edit] [data-slider-arrows][data-slider-target=""]::after,
[data-builder-edit] [data-slider-dots][data-slider-target=""]::after,
[data-builder-edit] [data-slider-progress][data-slider-target=""]::after,
[data-builder-edit] [data-slider-scroll-bar][data-slider-target=""]::after {
  content: "← Set Target Slider →";
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 4px 8px;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- Accordion, Modal, Tooltip, Drawer (TASK-084: CSSRuleBuilder) ---- */
/* Accordion */
[data-builder-type="Accordion"] {
  width: 100%;
}
[data-builder-type="AccordionHeader"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
/* Modal */
[data-builder-type="Modal"] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
[data-builder-type="ModalOverlay"] {
  position: absolute;
  inset: 0;
}
[data-builder-type="ModalContent"] {
  position: relative;
  z-index: 1;
  max-height: 90vh;
  overflow-y: auto;
}
[data-builder-type="ModalClose"] {
  cursor: pointer;
}
[data-modal] {
  display: none;
  pointer-events: none;
}
[data-modal][data-open] {
  display: flex;
  pointer-events: all;
  align-items: center;
  justify-content: center;
}
/* Tooltip */
[data-builder-type="Tooltip"] {
  position: relative;
  display: inline-block;
}
/* Drawer */
[data-builder-type="Drawer"] {
  position: fixed;
  inset: 0;
  z-index: 310;
  pointer-events: none;
}
[data-builder-type="DrawerOverlay"] {
  position: absolute;
  inset: 0;
}
[data-builder-type="DrawerPanel"] {
  position: absolute;
  overflow-y: auto;
}
[data-drawer] {
  pointer-events: none;
}
[data-drawer][data-open],
[data-drawer][data-drawer-preview] {
  pointer-events: all;
}
[data-drawer-overlay] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
[data-drawer][data-open] [data-drawer-overlay],
[data-drawer][data-drawer-preview] [data-drawer-overlay] {
  opacity: 1;
}
[data-drawer-panel] {
  transition: transform 0.3s ease;
}
[data-drawer-side="right"] > [data-drawer-panel],
[data-drawer]:not([data-drawer-side]) > [data-drawer-panel] {
  top: 0;
  right: 0;
  bottom: 0;
  transform: translateX(100%);
}
[data-drawer-side="left"] > [data-drawer-panel] {
  top: 0;
  left: 0;
  bottom: 0;
  transform: translateX(-100%);
}
[data-drawer-side="top"] > [data-drawer-panel] {
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
}
[data-drawer-side="bottom"] > [data-drawer-panel] {
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
}
[data-drawer][data-open] > [data-drawer-panel],
[data-drawer][data-drawer-preview] > [data-drawer-panel] {
  transform: none;
}
/* Full-screen overlay mode */
[data-drawer-side="full"] > [data-drawer-panel] {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
[data-drawer-side="full"][data-open] > [data-drawer-panel],
[data-drawer-side="full"][data-drawer-preview] > [data-drawer-panel] {
  opacity: 1;
}

/* ---- Nav state CSS (TASK-083: CSSRuleBuilder) ---- */
/* Sticky nav */
[data-nav][data-sticky="top"] {
  position: sticky;
  top: 0;
  z-index: 200;
}
[data-nav][data-sticky="scroll-up"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  transition: transform 0.25s ease;
}
[data-nav][data-sticky="scroll-up"][data-nav-state="hidden"] {
  transform: translateY(-110%);
}
[data-nav][data-sticky="scroll-up"][data-nav-state="scrolled"],
[data-nav][data-sticky="scroll-up"][data-nav-state="initial"] {
  transform: translateY(0);
}
/* Transparent header */
[data-nav][data-nav-transparent="true"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  background-image: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
[data-nav][data-nav-transparent="true"][data-sticky="top"] {
  position: sticky;
  z-index: 200;
  background-color: transparent;
  background-image: none;
}
[data-nav][data-nav-transparent="true"][data-sticky="scroll-up"] {
  position: fixed;
  z-index: 200;
  background-color: transparent;
  background-image: none;
}
[data-nav][data-nav-transparent="true"][data-nav-state="initial"] {
  background-color: transparent;
  background-image: none;
}
[data-nav][data-nav-transparent="true"][data-nav-state="scrolled"] {
  background-color: var(--nav-scroll-bg, var(--sf-color-bg, #ffffff));
  color: var(--nav-scroll-color, inherit);
}
/* Backdrop blur */
[data-nav][data-nav-blur="true"] {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Drawer background (low specificity) */
:where([data-nav] [data-nav-menu][data-nav-drawer-bg]) {
  background-color: var(--nav-drawer-bg, var(--sf-color-bg, #ffffff));
}
/* Mega menu */
[data-nav-dropdown][data-mega][data-mega-width="container"] > [data-nav-dropdown-content] {
  max-width: var(--sf-nav-inner-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
}
[data-nav-dropdown-content][data-mega-cols="2"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
[data-nav-dropdown-content][data-mega-cols="3"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
[data-nav-dropdown-content][data-mega-cols="4"] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* ── Marquee (pure CSS — zero JS) ──────────────────────── */
@keyframes sf-marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes sf-marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes sf-marquee-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes sf-marquee-down {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

[data-marquee] {
  display: flex;
  gap: 2rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
[data-marquee][data-marquee-direction="up"],
[data-marquee][data-marquee-direction="down"] {
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
}

/* Marquee track — wraps both halves, animated as one unit */
[data-marquee-track] {
  display: flex;
  gap: inherit;
  min-width: max-content;
  animation: sf-marquee-left var(--sf-marquee-duration, 20s) linear infinite;
}
[data-marquee][data-marquee-direction="up"] [data-marquee-track],
[data-marquee][data-marquee-direction="down"] [data-marquee-track] {
  flex-direction: column;
  min-width: unset;
  min-height: max-content;
}
[data-marquee][data-marquee-direction="right"] [data-marquee-track] {
  animation-name: sf-marquee-right;
}
[data-marquee][data-marquee-direction="up"] [data-marquee-track] {
  animation-name: sf-marquee-up;
}
[data-marquee][data-marquee-direction="down"] [data-marquee-track] {
  animation-name: sf-marquee-down;
}

/* Each half of the marquee content */
[data-marquee-content] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: inherit;
  white-space: nowrap;
}
[data-marquee][data-marquee-direction="up"] [data-marquee-content],
[data-marquee][data-marquee-direction="down"] [data-marquee-content] {
  flex-direction: column;
}
[data-marquee-content] > * {
  flex-shrink: 0;
}

[data-marquee][data-marquee-pause-hover="true"]:hover [data-marquee-track] {
  animation-play-state: paused;
}

} /* end @layer component */
@layer theme {
:root {
  --sf-color-primary:       #4F46E5;
  --sf-color-primary-hover: #4338CA;
  --sf-color-primary-text:  #ffffff;
  --sf-color-secondary:     #0EA5E9;
  --sf-color-accent:        #F59E0B;
  --sf-color-body:          #374151;
  --sf-color-heading:       #111827;
  --sf-color-muted:         #6B7280;
  --sf-color-link:          #4F46E5;
  --sf-color-link-hover:    #4338CA;
  --sf-color-bg:            #ffffff;
  --sf-color-surface:       #F9FAFB;
  --sf-color-border:        #E5E7EB;
  --sf-color-danger:        #EF4444;
  --sf-color-success:       #10B981;
  --sf-color-warning:       #F59E0B;

  --sf-font-body:           ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sf-font-heading:        ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sf-font-mono:           ui-monospace, 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --sf-text-base:           16px;
  --sf-leading-body:        1.65;
  --sf-leading-heading:     1.2;

  --sf-h1-size:     clamp(2.25rem, 5vw, 3.5rem);
  --sf-h1-weight:   700;
  --sf-h1-leading:  1.1;
  --sf-h1-tracking: -0.02em;
  --sf-h2-size:     clamp(1.875rem, 4vw, 2.75rem);
  --sf-h2-weight:   700;
  --sf-h2-leading:  1.15;
  --sf-h2-tracking: -0.015em;
  --sf-h3-size:     clamp(1.5rem, 3vw, 2rem);
  --sf-h3-weight:   600;
  --sf-h3-leading:  1.2;
  --sf-h3-tracking: -0.01em;
  --sf-h4-size:     clamp(1.25rem, 2.5vw, 1.5rem);
  --sf-h4-weight:   600;
  --sf-h4-leading:  1.3;
  --sf-h4-tracking: -0.005em;
  --sf-h5-size:     clamp(1.1rem, 2vw, 1.25rem);
  --sf-h5-weight:   600;
  --sf-h5-leading:  1.35;
  --sf-h5-tracking: 0em;
  --sf-h6-size:     1rem;
  --sf-h6-weight:   600;
  --sf-h6-leading:  1.4;
  --sf-h6-tracking: 0em;

  --sf-container-width:    1200px;
  --sf-section-padding-y:  80px;
  --sf-section-padding-x:  20px;

  --sf-radius-sm:   2px;
  --sf-radius-md:   6px;
  --sf-radius-lg:   8px;
  --sf-radius-xl:   12px;
  --sf-radius-full: 9999px;

  --sf-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --sf-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sf-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --sf-btn-padding-y:    10px;
  --sf-btn-padding-x:    20px;
  --sf-btn-radius:       var(--sf-radius-md);
  --sf-btn-font-size:    1rem;
  --sf-btn-font-weight:  500;
  --sf-btn-bg:           var(--sf-color-primary);
  --sf-btn-color:        var(--sf-color-primary-text);
  --sf-btn-border-width: 0px;
  --sf-btn-border-color: transparent;

  --sf-input-padding-y:    10px;
  --sf-input-padding-x:    14px;
  --sf-input-radius:       var(--sf-radius-md);
  --sf-input-border-width: 1px;
  --sf-input-border-color: var(--sf-color-border);
  --sf-input-bg:           #ffffff;
  --sf-input-focus-ring:   var(--sf-color-primary);
  --sf-label-font-size:    0.875rem;
  --sf-label-font-weight:  500;
  --sf-label-color:        var(--sf-color-body);

  --sf-dropdown-bg:     var(--sf-color-surface, #ffffff);
  --sf-dropdown-text:   var(--sf-color-body, #374151);
  --sf-dropdown-border: var(--sf-color-border, #e5e7eb);
}

/* ── Theme element defaults — :where() = zero specificity, always overrideable ── */

:where(body) {
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-base);
  line-height: var(--sf-leading-body);
  color: var(--sf-color-body);
  background-color: var(--sf-color-bg);
}

:where(h1) {
  font-family: var(--sf-font-heading);
  font-size: var(--sf-h1-size);
  font-weight: var(--sf-h1-weight);
  line-height: var(--sf-h1-leading);
  letter-spacing: var(--sf-h1-tracking);
  color: var(--sf-color-heading);
}

:where(h2) {
  font-family: var(--sf-font-heading);
  font-size: var(--sf-h2-size);
  font-weight: var(--sf-h2-weight);
  line-height: var(--sf-h2-leading);
  letter-spacing: var(--sf-h2-tracking);
  color: var(--sf-color-heading);
}

:where(h3) {
  font-family: var(--sf-font-heading);
  font-size: var(--sf-h3-size);
  font-weight: var(--sf-h3-weight);
  line-height: var(--sf-h3-leading);
  letter-spacing: var(--sf-h3-tracking);
  color: var(--sf-color-heading);
}

:where(h4) {
  font-family: var(--sf-font-heading);
  font-size: var(--sf-h4-size);
  font-weight: var(--sf-h4-weight);
  line-height: var(--sf-h4-leading);
  letter-spacing: var(--sf-h4-tracking);
  color: var(--sf-color-heading);
}

:where(h5) {
  font-family: var(--sf-font-heading);
  font-size: var(--sf-h5-size);
  font-weight: var(--sf-h5-weight);
  line-height: var(--sf-h5-leading);
  letter-spacing: var(--sf-h5-tracking);
  color: var(--sf-color-heading);
}

:where(h6) {
  font-family: var(--sf-font-heading);
  font-size: var(--sf-h6-size);
  font-weight: var(--sf-h6-weight);
  line-height: var(--sf-h6-leading);
  letter-spacing: var(--sf-h6-tracking);
  color: var(--sf-color-heading);
}

:where(a) {
  color: var(--sf-color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

:where(a:hover) {
  color: var(--sf-color-link-hover);
}

:where(button),
:where([type="submit"]),
:where([type="button"]),
:where([type="reset"]) {
  background-color: var(--sf-btn-bg);
  color: var(--sf-btn-color);
  padding: var(--sf-btn-padding-y) var(--sf-btn-padding-x);
  border-radius: var(--sf-btn-radius);
  border: var(--sf-btn-border-width) solid var(--sf-btn-border-color);
  font-size: var(--sf-btn-font-size);
  font-weight: var(--sf-btn-font-weight);
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

:where(button:hover),
:where([type="submit"]:hover),
:where([type="button"]:hover) {
  opacity: 0.9;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"])),
:where(select),
:where(textarea) {
  padding: var(--sf-input-padding-y) var(--sf-input-padding-x);
  border: var(--sf-input-border-width) solid var(--sf-input-border-color);
  border-radius: var(--sf-input-radius);
  background-color: var(--sf-input-bg);
  color: var(--sf-color-heading);
  font-family: inherit;
  font-size: var(--sf-text-base);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus),
:where(select:focus),
:where(textarea:focus) {
  border-color: var(--sf-input-focus-ring);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-input-focus-ring) 20%, transparent);
}

:where(input::placeholder),
:where(textarea::placeholder) {
  color: var(--sf-color-muted);
  opacity: 1;
}

:where(label) {
  font-size: var(--sf-label-font-size);
  font-weight: var(--sf-label-font-weight);
  color: var(--sf-label-color);
  display: block;
  margin-bottom: 6px;
}
}
@layer theme {
:root {
  --color-primary: #4F46E5;
  --color-primary-hover: #4338CA;
  --color-primary-text: #ffffff;
  --color-secondary: #0EA5E9;
  --color-accent: #F59E0B;
  --color-body: #374151;
  --color-heading: #111827;
  --color-muted: #6B7280;
  --color-link: #4F46E5;
  --color-link-hover: #4338CA;
  --color-bg: #ffffff;
  --color-surface: #F9FAFB;
  --color-border: #E5E7EB;
  --color-danger: #EF4444;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --font-size-base: 16px;
  --leading-body: 1.65;
  --leading-heading: 1.2;
  --h1-size: clamp(2.25rem, 5vw, 3.5rem);
  --h2-size: clamp(1.875rem, 4vw, 2.75rem);
  --h3-size: clamp(1.5rem, 3vw, 2rem);
  --h4-size: clamp(1.25rem, 2.5vw, 1.5rem);
  --h5-size: clamp(1.1rem, 2vw, 1.25rem);
  --h6-size: 1rem;
  --container-width: 1200px;
  --section-padding-y: 80px;
  --section-padding-x: 20px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
}
}
@layer user {
.Nav {
  width: 100%;
  background-color: #ffffff;
  border-bottom-color: #e5e7eb;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.nav {
  width: 100%;
  background-color: #ffffff;
  border-bottom-color: #e5e7eb;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.Tabs {
  width: 100%;
}

.body {
  display: block;
  min-height: 100vh;
}

.icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
}

.tabs {
  width: 100%;
}

.Image {
  width: 100%;
  height: auto;
  display: block;
}

.Input {
  width: 100%;
  display: block;
  outline: none;
  font-size: 0.875rem;
  padding-top: 10px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 10px;
  border-top-color: #d1d5db;
  border-top-style: solid;
  border-top-width: 1px;
  border-left-color: #d1d5db;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #d1d5db;
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: #d1d5db;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-2 {
  width: 100%;
  background-color: #ffffff;
  border-bottom-color: #e5e7eb;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.Slide {
  display: flex;
  min-height: 200px;
  align-items: center;
  justify-content: center;
}

.badge {
  color: #374151;
  display: inline-flex;
  font-size: 0.75rem;
  align-items: center;
  font-weight: 500;
  padding-top: 2px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 2px;
  background-color: #f3f4f6;
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  border-bottom-left-radius: 999px;
  border-bottom-right-radius: 999px;
}

.image {
  width: 100%;
  height: auto;
  display: block;
}

.Slider {
  width: 100%;
  max-width: 100%;
  position: relative;
}

.button {
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  align-items: center;
  font-weight: 600;
  padding-top: 12px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 12px;
  justify-content: center;
  text-decoration: none;
  background-color: #111827;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.hstack {
  gap: 16px;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.slider {
  width: 100%;
  max-width: 100%;
  position: relative;
}

.spacer {
  height: 40px;
}

.vstack {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.Heading {
  margin-bottom: 16px;
}

.Image-2 {
  width: 100%;
  height: auto;
  display: block;
}

.Image-3 {
  width: 100%;
  height: auto;
  display: block;
}

.Section {
  display: flex;
  flex-direction: column;
  background-color: #0062ff;
}

.columns {
  gap: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.counter {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.divider {
  margin-top: 24px;
  margin-bottom: 24px;
  border-top-color: #e5e7eb;
  border-top-style: solid;
  border-top-width: 1px;
}

.heading {
  margin-bottom: 16px;
}

.marquee {
  width: 100%;
  display: flex;
  overflow: hidden;
}

.section {
  display: flex;
  flex-direction: column;
}

.tooltip {
  display: inline-block;
  position: relative;
}

.Nav-Link {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Menu {
  gap: 2px;
  display: flex;
  align-items: center;
}

.Tab-List {
  gap: 4px;
  display: flex;
  flex-direction: row;
}

.lightbox {
  cursor: zoom-in;
  display: inline-block;
}

.nav-link {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.nav-menu {
  gap: 2px;
  display: flex;
  align-items: center;
}

.tab-list {
  gap: 4px;
  display: flex;
  flex-direction: row;
}

.tab-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.Heading-2 {
  margin-bottom: 16px;
}

.Heading-3 {
  margin-bottom: 16px;
}

.Heading-4 {
  margin-bottom: 16px;
}

.Nav-Brand {
  gap: 10px;
  color: #0f172a;
  display: flex;
  font-size: 1rem;
  align-items: center;
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.Nav-Inner {
  width: 100%;
  display: flex;
  max-width: 100%;
  position: relative;
  min-height: 68px;
  align-items: center;
  padding-top: 0;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 0;
  justify-content: space-between;
}

.Paragraph {
  margin-bottom: 16px;
}

.Tab-Panel {
  padding-top: 16px;
  padding-bottom: 16px;
}

.accordion {
  width: 100%;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.nav-brand {
  gap: 10px;
  color: #0f172a;
  display: flex;
  font-size: 1rem;
  align-items: center;
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav-inner {
  width: 100%;
  display: flex;
  max-width: 100%;
  position: relative;
  min-height: 68px;
  align-items: center;
  padding-top: 0;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 0;
  justify-content: space-between;
}

.paragraph {
  margin-bottom: 16px;
}

.svg-embed {
  display: inline-block;
}

.tab-panel {
  padding-top: 16px;
  padding-bottom: 16px;
}

.text-link {
  color: inherit;
  text-decoration: underline;
}

.Form-Error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 8px;
}

.Nav-Link-2 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-3 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-4 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-5 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-6 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-7 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-8 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-9 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Menu-2 {
  gap: 2px;
  display: flex;
  align-items: center;
}

.Nav-Toggle {
  color: #374151;
  width: 44px;
  cursor: pointer;
  height: 44px;
  display: none;
  align-items: center;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border-top-width: 0;
  justify-content: center;
  background-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.Tab-Panels {
  width: 100%;
}

.blockquote {
  font-style: italic;
  margin-left: 0;
  padding-left: 16px;
  border-left-color: #e5e7eb;
  border-left-style: solid;
  border-left-width: 4px;
}

.form-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 8px;
}

.form-input {
  width: 100%;
  display: block;
  outline: none;
  font-size: 0.875rem;
  padding-top: 10px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 10px;
  border-top-color: #d1d5db;
  border-top-style: solid;
  border-top-width: 1px;
  border-left-color: #d1d5db;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #d1d5db;
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: #d1d5db;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.link-block {
  color: inherit;
  display: inline-flex;
  min-height: 2rem;
  align-items: flex-start;
  flex-direction: column;
  text-decoration: none;
}

.nav-toggle {
  color: #374151;
  width: 44px;
  cursor: pointer;
  height: 44px;
  display: none;
  align-items: center;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border-top-width: 0;
  justify-content: center;
  background-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.pagination {
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-panels {
  width: 100%;
}

.Nav-Brand-2 {
  gap: 10px;
  color: #0f172a;
  display: flex;
  font-size: 1rem;
  align-items: center;
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.Nav-Inner-2 {
  width: 100%;
  display: flex;
  max-width: 100%;
  position: relative;
  min-height: 68px;
  align-items: center;
  padding-top: 0;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 0;
  justify-content: space-between;
}

.Nav-Link-10 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-11 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-12 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-13 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-14 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-15 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-16 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-17 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Nav-Link-18 {
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: -0.01em;
  padding-bottom: 7px;
  text-decoration: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.Paragraph-2 {
  margin-bottom: 16px;
}

.Paragraph-3 {
  margin-bottom: 16px;
}

.Paragraph-4 {
  margin-bottom: 16px;
}

.Paragraph-5 {
  margin-bottom: 16px;
}

.Tab-Trigger {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 8px;
  user-select: none;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 8px;
}

.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.form-select {
  width: 100%;
  display: block;
  font-size: 0.875rem;
  padding-top: 10px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 10px;
  border-top-color: #d1d5db;
  border-top-style: solid;
  border-top-width: 1px;
  border-left-color: #d1d5db;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #d1d5db;
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: #d1d5db;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.form-submit {
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  padding-top: 12px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 12px;
  border-top-width: 0;
  background-color: #111827;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.grid-layout {
  gap: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.modal-close {
  top: 12px;
  color: #18181b;
  right: 12px;
  width: 28px;
  cursor: pointer;
  height: 28px;
  display: inline-flex;
  position: absolute;
  align-items: center;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border-top-width: 0;
  justify-content: center;
  background-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
}

.slider-dots {
  gap: 6px;
  display: flex;
  position: relative;
  justify-content: center;
}

.tab-trigger {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 8px;
  user-select: none;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 8px;
}

.Form-Success {
  color: #10b981;
  font-size: 0.875rem;
  margin-top: 8px;
}

.Nav-Dropdown {
  display: block;
  position: relative;
}

.Nav-Toggle-2 {
  color: #374151;
  width: 44px;
  cursor: pointer;
  height: 44px;
  display: none;
  align-items: center;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border-top-width: 0;
  justify-content: center;
  background-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.archive-loop {
  gap: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.content-slot {
  width: 100%;
  display: block;
  min-height: 120px;
}

.drawer-close {
  top: 16px;
  color: #18181b;
  right: 16px;
  width: 28px;
  cursor: pointer;
  height: 28px;
  display: inline-flex;
  position: absolute;
  align-items: center;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border-top-width: 0;
  justify-content: center;
  background-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
}

.drawer-panel {
  width: 320px;
  position: relative;
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  background-color: #ffffff;
}

.form-success {
  color: #10b981;
  font-size: 0.875rem;
  margin-top: 8px;
}

.nav-dropdown {
  display: block;
  position: relative;
}

.progress-bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  background-color: #e5e7eb;
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  border-bottom-left-radius: 999px;
  border-bottom-right-radius: 999px;
}

.slider-slide {
  display: flex;
  min-height: 200px;
  align-items: center;
  justify-content: center;
}

.Submit-Button {
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  padding-top: 12px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 12px;
  border-top-width: 0;
  background-color: #111827;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.form-textarea {
  width: 100%;
  resize: vertical;
  display: block;
  font-size: 0.875rem;
  padding-top: 10px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 10px;
  border-top-color: #d1d5db;
  border-top-style: solid;
  border-top-width: 1px;
  border-left-color: #d1d5db;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #d1d5db;
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: #d1d5db;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.modal-content {
  width: 100%;
  max-width: 560px;
  position: relative;
  padding-top: 32px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 32px;
  background-color: #ffffff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.modal-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0,0,0,0.5);
}

.modal-trigger {
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  align-items: center;
  font-weight: 500;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  border-top-width: 0;
  justify-content: center;
  background-color: #18181b;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.slider-arrows {
  gap: 8px;
  display: flex;
  position: relative;
  align-items: center;
}

.video-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
}

.Dropdown-Panel {
  gap: 1px;
  display: flex;
  flex-direction: column;
}

.Nav-Dropdown-2 {
  display: block;
  position: relative;
}

.accordion-body {
  padding-top: 4px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
}

.accordion-item {
  border-bottom-color: #e5e7eb;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.drawer-overlay {
  background-color: rgba(0,0,0,0.5);
}

.drawer-trigger {
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  align-items: center;
  font-weight: 500;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  justify-content: center;
  background-color: #18181b;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.collection-list {
  gap: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.marquee-content {
  gap: 24px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.slider-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  background-color: #e5e7eb;
}

.Dropdown-Panel-2 {
  gap: 1px;
  display: flex;
  flex-direction: column;
}

.accordion-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 500;
  padding-top: 14px;
  user-select: none;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 14px;
  justify-content: space-between;
}

.bg-video-wrapper {
  overflow: hidden;
  position: relative;
}

.lottie-animation {
  width: 200px;
  height: 200px;
}

.slider-arrow-next {
  display: flex;
  padding: 5px;
  align-items: center;
  justify-content: center;
}

.slider-arrow-prev {
  display: flex;
  padding: 5px;
  align-items: center;
  justify-content: center;
}

.slider-scroll-bar {
  width: 100%;
  position: relative;
}

.nav-dropdown-panel {
  gap: 1px;
  display: flex;
  flex-direction: column;
}

}