/* Shared FYLU primitives; the cinematic composition and 3D renderer stay local. */
:root {
  --ui: var(--fylu-font-ui, 'Manrope', sans-serif);
  --ink: var(--fylu-text, #eeeaf8);
  --lavender: var(--fylu-accent, #b39ae8);
  --line: var(--fylu-line, rgba(185, 163, 228, .16));
  --glass-line: var(--fylu-line, rgba(185, 163, 228, .16));
  color-scheme: dark;
}
body { background-color: var(--fylu-bg, #11131e); color: var(--fylu-text, #eeeaf8); font-family: var(--ui); }
/* Leave the root canvas transparent: the cinematic negative layers depend on
   the body's backdrop being propagated to the root, as in the original scene. */
button, input, textarea, select { font-family: var(--ui); }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: rgba(179,154,232,.16); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--fylu-accent, #b39ae8); outline-offset: 4px;
}
.premium-header, .mobile-menu {
  background: linear-gradient(135deg, rgba(34,36,58,.96), rgba(17,19,30,.96));
  border-color: var(--fylu-line, rgba(185,163,228,.16));
  box-shadow: inset 0 1px 0 rgba(238,234,248,.05), 0 18px 52px rgba(0,0,0,.2);
  border-radius: var(--fylu-radius, 16px);
}
.premium-header .brand span, .footer .brand span { color: var(--fylu-text, #eeeaf8); }
.premium-header .brand { min-width: 0; }
.premium-header .brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-frame a, .header-login, .mobile-menu a { color: var(--fylu-muted, #a49eb8); }
.nav-frame a:hover, .header-login:hover, .mobile-menu a:hover { color: var(--fylu-text, #eeeaf8); }
.button, .filters button, .service-topic, .support-topics button {
  border-radius: var(--fylu-radius-control, 11px); border-color: var(--fylu-line, rgba(185,163,228,.16)); color: var(--fylu-text, #eeeaf8);
}
.button { min-height: 46px; gap: clamp(12px, 3vw, 28px); }
.button-solid, .filters button[aria-pressed=true] {
  color: var(--fylu-on-accent, #21182f); border-color: rgba(222,205,249,.4);
  background: var(--fylu-action, linear-gradient(115deg, #c8b1ee, #ac90dd));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 25px rgba(179,154,232,.12);
}
.button-solid:hover { color: #191326; background: linear-gradient(125deg, #eee5ff, #c4afee); }
.button-quiet { background: transparent; }
dialog, .support-panel, .support-prompt {
  color: var(--fylu-text, #eeeaf8); border-color: var(--fylu-line, rgba(185,163,228,.16));
  border-radius: var(--fylu-radius, 16px);
  background: linear-gradient(135deg, var(--fylu-surface-raised, #22243a), var(--fylu-surface, #191d2d));
}
.field input, .field select, .field textarea, .support-compose input, .affiliate-application textarea, .k-search input {
  border-color: var(--fylu-line, rgba(185,163,228,.16)); border-radius: 10px;
  background-color: rgba(17,19,30,.72); color: var(--fylu-text, #eeeaf8);
}
.k-tile, .k-card, .k-path, .affiliate-step {
  border-color: var(--fylu-line, rgba(185,163,228,.16)); border-radius: var(--fylu-radius, 16px);
  background-color: var(--fylu-surface, #191d2d);
}
.footer, .page-footer { background-color: rgba(17,19,30,.96); border-color: var(--fylu-line, rgba(185,163,228,.16)); }
.k-kicker, .eyebrow, .chapter-number, .scene-index { color: var(--fylu-accent, #b39ae8); }
.fine-note, .dialog-body, .collection-note, .k-meta, .k-lead { color: var(--fylu-muted, #a49eb8); }
.menu-button, .close-button, .header-login, .top-link, .nav-frame a, .support-compose button { min-height: 44px; }
.menu-button, .close-button, .top-link { min-width: 44px; }
.header-login { display: inline-flex; align-items: center; }
.button > :not(svg), .mobile-menu a, .k-card, .k-tile, .support-topics button, .service-topic { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .premium-header .header-login { display: none; }
  .premium-header .header-actions { gap: 6px; }
  .premium-header .menu-button { width: 44px; height: 44px; }
  .premium-header select { max-width: 92px; min-height: 44px; }
  .mobile-menu a { min-height: 44px; display: flex; align-items: center; }
  .button { max-width: 100%; text-align: center; }
  .instrument summary { grid-template-columns: 60px minmax(0, 1fr) 18px; gap: 10px; }
  .instrument dl { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .instrument dd, .instrument dt { overflow-wrap: anywhere; }
  .k-breadcrumb { flex-wrap: wrap; }
  .k-article, .k-toc, .k-article-layout { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .button, .button::before, .mobile-menu { transition: none; } }
@media (max-width: 380px) {
  .cinematic-site .copy h1, .cinematic-site .copy h2, .cinematic-site .signature h2 { font-size: clamp(40px, 12.8vw, 49px); overflow-wrap: anywhere; }
  .premium-header .brand > span { max-width: 78px; }
}

.managed-brand-details { border-top: 1px solid var(--fylu-line); padding-top: 24px; margin-top: 24px; }
.integrated-footer > .managed-brand-details { width: min(1280px, calc(100% - 10vw)); margin: 0 auto; padding: 26px 0 40px; }
.managed-brand-tagline { margin: 0 0 12px; color: var(--fylu-muted); font-size: 13px; }
.managed-brand-contacts { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 12px; color: var(--fylu-muted); }
.managed-brand-contacts a { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; }
.managed-site-content { position: relative; width: min(1100px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 70px 0 100px; }
.managed-site-content > h2 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 30px; }
.managed-faq { border-bottom: 1px solid var(--fylu-line); }
.managed-faq summary { cursor: pointer; font-weight: 500; line-height: 1.7; padding: 22px 0; font-size: 15px; }
.managed-faq p { margin: 0 0 24px; max-width: 80ch; color: var(--fylu-muted); line-height: 1.8; font-size: 14px; overflow-wrap: anywhere; }
.managed-legal-card { margin-top: 38px; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--fylu-line); border-radius: var(--fylu-radius); background: var(--fylu-surface); }
.managed-legal-card h3 { margin: 0 0 14px; font-size: 22px; font-weight: 500; }
.managed-legal-card p { max-width: 80ch; color: var(--fylu-muted); line-height: 1.8; font-size: 14px; }
.managed-legal-card .button { margin-top: 12px; }

/* Navigation text remains legible on both the dark shell and lavender CTA.
   The anchor selector must outrank the generic muted mobile navigation rule. */
.premium-header .header-login { color: #e6e1f2; font-weight: 600; }
.premium-header .header-start,
.mobile-menu a.button-solid,
.mobile-menu a.button-solid:hover,
.mobile-menu a.button-solid:focus-visible {
  color: #21182f; -webkit-text-fill-color: #21182f; font-weight: 750;
  text-shadow: none; line-height: 1.4;
  background: linear-gradient(115deg, #cfbaf1, #b49be3);
}
.premium-header .header-start { white-space: nowrap; }
.premium-header .header-start:hover,
.mobile-menu a.button-solid:hover { background: linear-gradient(115deg, #e3d4fb, #c7afea); }
.mobile-menu[hidden] { display: none; }
.mobile-menu {
  top: var(--fylu-menu-top, 88px); right: max(16px, env(safe-area-inset-right));
  left: auto; bottom: auto; width: min(420px, calc(100% - 32px));
  max-height: calc(100svh - var(--fylu-menu-top, 88px) - max(12px, env(safe-area-inset-bottom)));
  max-height: calc(100dvh - var(--fylu-menu-top, 88px) - max(12px, env(safe-area-inset-bottom)));
  padding: 12px; border: 1px solid #c1b2e532; border-radius: 18px;
  background: linear-gradient(145deg, #25263bf7, #141724fa);
  box-shadow: inset 0 1px 0 #ffffff0c, 0 24px 64px #06081180;
  backdrop-filter: blur(24px) saturate(1.1); z-index: 80;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding: 10px;
}
.mobile-menu:not([hidden]) { display: grid; gap: 3px; }
.mobile-menu a {
  display: flex; align-items: center; min-height: 48px; padding: 12px 14px;
  border-radius: 10px; color: #e1dced; font-size: 15px; font-weight: 500;
  line-height: 1.5; overflow-wrap: anywhere; transition: background .18s, color .18s;
}
.mobile-menu a:not(.button-solid):hover,
.mobile-menu a:not(.button-solid):focus-visible { color: #fff; background: #c3adee10; }
.mobile-menu a[data-exp="navAccount"] { margin-top: 6px; border-top: 1px solid #c1b2e524; border-radius: 0 0 10px 10px; }
.mobile-menu a.button-solid { margin-top: 9px; min-height: 52px; padding: 14px 18px; font-size: 15px; }
@media (min-width: 1251px) {
  .premium-header { gap: 20px; padding-inline: clamp(24px, 3vw, 64px)!important; }
  .premium-header .nav-frame { gap: clamp(15px, 1.7vw, 25px)!important; }
  .premium-header .nav-frame a { font-size: 13px; }
  .premium-header .header-actions { gap: 12px; }
  .premium-header .menu-button { display: none; }
  .mobile-menu:not([hidden]) { display: none; }
}
@media (max-width: 1250px) {
  .premium-header,.premium-header.header-scrolled { padding: 14px 24px!important; min-height: 80px; gap: 12px; }
  .premium-header .desktop-nav,.premium-header .header-start { display: none; }
  .premium-header .header-actions { margin-left: auto; gap: 12px; min-width: 0; }
  .premium-header .menu-button { display: block; width: 44px; height: 44px; min-width: 44px; padding: 10px; }
  .premium-header .brand { gap: 12px; }
  .premium-header .brand svg { width: 38px; height: 46px; }
  .premium-header .brand span { font-size: 12px; letter-spacing: 4px; }
  .premium-header .header-login { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
  .premium-header #locale,.premium-header #page-locale { min-height: 44px; max-width: 96px; }
}
@media (max-width: 760px) {
  .premium-header,.premium-header.header-scrolled { padding: 12px 16px!important; min-height: 72px; }
  .premium-header .header-login { display: none; }
  .premium-header .header-actions { gap: 8px; }
  .premium-header .brand { gap: 9px; }
  .premium-header .brand span { font-size: 11px; letter-spacing: 3px; }
  .premium-header #locale,.premium-header #page-locale { width: 88px; font-size: 11px; }
}
@media (max-height: 500px) and (max-width: 1250px) {
  .mobile-menu:not([hidden]) { gap: 0; }
  .mobile-menu { padding: 8px; }
  .mobile-menu a { min-height: 44px; padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) { .mobile-menu a { transition: none; } }