/* Two separate brand palettes. Royal Frequency retains its original CSS. */
.brand-toggle {
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px;
  width: 138px; min-height: 44px; padding: 14px 5px 4px;
  border: 1px solid var(--cyan); border-radius: 12px;
  background: var(--aubergine); color: var(--white); cursor: pointer;
  box-shadow: 0 3px 18px rgba(109,0,228,.14); font: inherit;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.brand-toggle__caption { position: absolute; top: 3px; inset-inline: 0; font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
.brand-toggle::before {
  content: ''; position: absolute; z-index: -1; left: 4px; top: 14px; bottom: 4px;
  width: calc(50% - 6px); border-radius: 8px;
  background: var(--violet); transition: transform .6s cubic-bezier(.22,1,.36,1), background .6s;
}
.brand-toggle[aria-checked="true"]::before { transform: translateX(calc(100% + 4px)); background: var(--b2b-primary); }
.brand-toggle__option { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; font-size: 11px; font-weight: 800; line-height: 1.3; }
.brand-toggle__swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); }
.brand-toggle__swatch--primary { background: linear-gradient(135deg,#6d00e4 50%,#2ae9fd 50%); }
.brand-toggle__swatch--secondary { background: linear-gradient(135deg,#F7F3EA 50%,#3DA8B0 50%); }
.brand-toggle::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(110deg, transparent 20%, var(--ice), transparent 80%); }
.brand-toggle.is-switching::after { animation: brand-glint .65s ease-out; }
.brand-toggle:hover { border-color: var(--ice); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent); }
.brand-toggle:active { transform: scale(.97); }
.brand-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
@keyframes brand-glint { 0% { transform: translateX(-120%); opacity: 0; } 35% { opacity: .23; } 100% { transform: translateX(120%); opacity: 0; } }
/* Snapshot crossfade preserves scroll position and original artwork without a flash. */
::view-transition-old(root) { animation: brand-fade-out .68s cubic-bezier(.22,1,.36,1) both; }
::view-transition-new(root) { animation: brand-fade-in .68s cubic-bezier(.22,1,.36,1) both; }
@keyframes brand-fade-out { to { opacity: 0; } }
@keyframes brand-fade-in { from { opacity: 0; } to { opacity: 1; } }
html.brand-changing *, html.brand-changing *::before, html.brand-changing *::after {
  transition-property: color, background-color, border-color, box-shadow, fill, stroke;
  transition-duration: .65s; transition-timing-function: cubic-bezier(.22,1,.36,1);
}
/* Canonical Soft Light Calm tokens are loaded separately, before these mappings. */
html[data-brand="secondary"] {
  color-scheme: light; background: var(--b2b-bg);
  --obsidian: var(--b2b-obsidian); --aubergine: var(--b2b-surface-1);
  --violet: var(--b2b-primary); --amethyst: var(--b2b-premium);
  --cyan: var(--b2b-ice); --ice: var(--b2b-ice); --gold: var(--b2b-bronze);
  --white: var(--b2b-text); --muted: var(--b2b-text-soft); --line: var(--b2b-line);
  --line-strong: var(--b2b-line-premium); --surface: var(--b2b-surface-1);
  --focus: var(--b2b-ice); --shadow: 0 20px 60px var(--b2b-shadow);
  --panel-fill: linear-gradient(135deg,var(--b2b-card-a),var(--b2b-card-b));
  --panel-copy: var(--b2b-text-soft); --panel-edge: var(--b2b-line-premium);
}
html[data-brand="secondary"] body { color: var(--b2b-text); background: radial-gradient(ellipse 70% 45% at 12% -10%,var(--b2b-glow-b),transparent 55%),radial-gradient(ellipse 55% 40% at 92% 8%,var(--b2b-glow-a),transparent 50%),var(--b2b-obsidian); }
html[data-brand="secondary"] body::before { background-image: none; }
html[data-brand="secondary"] .site-header,
html[data-brand="secondary"] .site-header.scrolled { background: var(--b2b-surface-glass); border-color: var(--b2b-line-premium); box-shadow: 0 4px 24px var(--b2b-shadow); }
html[data-brand="secondary"] .mobile-menu { background: var(--b2b-midnight); }
html[data-brand="secondary"] .language-track { background: var(--b2b-surface-2); box-shadow: none; color: var(--b2b-text); }
html[data-brand="secondary"] .language-track::before { background: var(--b2b-primary); box-shadow: none; }
html[data-brand="secondary"] .language-track .language-track__code { color: var(--b2b-text); text-shadow: none; }
html[data-brand="secondary"] .language-track__slash i { background: var(--b2b-ice); box-shadow: none; }
html[data-brand="secondary"] .brand-toggle { background: var(--b2b-surface-2); color: var(--b2b-text); box-shadow: 0 3px 18px var(--b2b-shadow); }
html[data-brand="secondary"] .brand-toggle__swatch { border-color: var(--b2b-ice); }
html[data-brand="secondary"] .brand > span > span,
html[data-brand="secondary"] .footer-brand i { color: var(--b2b-ice); }
html[data-brand="secondary"] .button.primary,
html[data-brand="secondary"] .button.primary:hover { background: var(--b2b-primary); color: var(--b2b-text); border-color: var(--b2b-ice); box-shadow: 0 8px 28px var(--b2b-shadow); }
html[data-brand="secondary"] .button.ghost { background: var(--b2b-surface-1); border-color: var(--b2b-ice); color: var(--b2b-ice); }
html[data-brand="secondary"] .artwork-section .hero-copy,
html[data-brand="secondary"] .artwork-section .page-hero-copy,
html[data-brand="secondary"] .artwork-process .split-copy,
html[data-brand="secondary"] main .studio-panel.studio-panel,
html[data-brand="secondary"] #license-path.artwork-license > .studio-panel { background: var(--panel-fill); border-color: var(--panel-edge); box-shadow: 0 16px 40px var(--b2b-shadow); }
html[data-brand="secondary"] .artwork-section .hero-copy p,
html[data-brand="secondary"] .artwork-section .page-hero-copy p,
html[data-brand="secondary"] .contact-glass .feature-band-copy > p:not(.section-kicker) { color: var(--b2b-text-soft); }
html[data-brand="secondary"] .fact-rail,
html[data-brand="secondary"] .feature-band { background: var(--b2b-surface-2); border-color: var(--b2b-line); }
html[data-brand="secondary"] .fact-rail span { color: var(--b2b-ice); }
html[data-brand="secondary"] .media-frame { background: var(--b2b-surface-2); box-shadow: var(--shadow); }
html[data-brand="secondary"] :is(.product-card__media,.kit-visual,.kit-selector a,.comparison-wrap,.store-embed,.contact-card,.info-card,.checkout-note) { background: var(--b2b-surface-1); border-color: var(--b2b-line-premium); box-shadow: none; }
html[data-brand="secondary"] .comparison-table thead th { background: var(--b2b-surface-2); }
html[data-brand="secondary"] main .license-list span,
html[data-brand="secondary"] main .editorial-card .section-index { background: var(--b2b-surface-2); color: var(--b2b-ice); border-color: var(--b2b-ice); }
html[data-brand="secondary"] main .editorial-card { background: var(--b2b-surface-1); }
html[data-brand="secondary"] main .faq-item,
html[data-brand="secondary"] .home-page .faq-item,
html[data-brand="secondary"] .home-page .closing-scene .faq-item { background: var(--b2b-surface-1); border-color: var(--b2b-line-premium); }
html[data-brand="secondary"] main .faq-item[open],
html[data-brand="secondary"] .home-page .closing-scene .faq-item[open] { background: var(--b2b-surface-2); border-color: var(--b2b-ice); }
html[data-brand="secondary"] .home-page .faq-item p,
html[data-brand="secondary"] .home-page .faq-item summary,
html[data-brand="secondary"] .home-page .closing-scene .faq-item summary { color: var(--b2b-text); }
html[data-brand="secondary"] .home-page .faq-item summary::after { color: var(--b2b-ice); }
html[data-brand="secondary"] .home-page .closing-scene .studio-panel.studio-panel { background: var(--b2b-surface-1); border-color: var(--b2b-line-premium); }
html[data-brand="secondary"] .site-footer,
html[data-brand="secondary"] .home-page .closing-scene .site-footer { background: var(--b2b-surface-glass); border-color: var(--b2b-line-premium); }
html[data-brand="secondary"] .home-page .closing-scene::before { background: url('images/midnight-boulevard-profile-original.jpg') center center / cover no-repeat; }
html[data-brand="secondary"] .contact-glass { background: var(--b2b-surface-2); }
html[data-brand="secondary"] .contact-glass::before { background: none; }
html[data-brand="secondary"] .contact-glass > .shell > img { opacity: 1; mix-blend-mode: normal; }
html[data-brand="secondary"] .scroll-opening,
html[data-brand="secondary"] .scroll-opening-stage { background: var(--b2b-bg); }
html[data-brand="secondary"] .opening-skip,
html[data-brand="secondary"] .opening-caption span { background: var(--b2b-surface-glass); color: var(--b2b-text); border-color: var(--b2b-ice); text-shadow: none; }
html[data-brand="secondary"] .opening-caption { color: var(--b2b-text); text-shadow: none; }
html[data-brand="secondary"] .opening-progress::after { background: linear-gradient(90deg,var(--b2b-primary),var(--b2b-gold)); }
/* Keep the header controls available without crowding the navigation. */
@media (min-width: 981px) and (max-width: 1440px) { .site-header { gap: 16px; } .desktop-nav { gap: 16px; } .brand > span { display: none; } }
@media (max-width: 600px) {
  .site-header { padding-inline: 12px; gap: 8px; }
  .brand > span { display: none; }
  .brand img { width: 32px; height: 32px; }
  .header-actions { gap: 6px; }
  .brand-toggle { width: 124px; }
  .brand-toggle__option { font-size: 10px; gap: 4px; }
  .language-track { min-width: 84px; height: 48px; padding-inline: 7px; gap: 3px; }
  .menu-toggle { width: 44px; height: 48px; padding: 10px; }
}
@media (max-width: 360px) {
  body { min-width: 0; }
  .site-header { padding-inline: 8px; }
  .brand img { width: 28px; height: 28px; }
  .header-actions { gap: 4px; }
  .brand-toggle { width: 108px; }
  .brand-toggle__option { font-size: 9px; gap: 3px; }
  .brand-toggle__swatch { width: 8px; height: 8px; }
  .language-track { min-width: 70px; padding-inline: 4px; gap: 2px; }
  .language-track__slash { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .brand-toggle, .brand-toggle::before, .brand-toggle::after { transition: none !important; animation: none !important; }
}
html[data-brand="secondary"] .home-page .closing-scene #faq { background: url('images/royal-microphone-tv-faq-original.jpg') center center / cover no-repeat; }

.brand-toggle__caption svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }