/* ==========================================================================
   Site header + account drawer — cloned from the Fortune Wins app (fc-qa.notfc.com).
   Markup: template-parts/site-header.php · Behaviour: js/site-header.js
   Everything above "Blog integration" is the app's own CSS (unused variants removed).
   ========================================================================== */
:root {
  --fw-color-bg: lab(3.23252% 30.3833 -26.1298);
  --fw-color-focus: lab(43.074% 40.023 -98.4682);
  --fw-color-gold-depth: lab(52.0721% 26.4004 60.4653);
  --fw-color-gold-face-light: lab(95.1185% 1.98269 36.4068);
  --fw-color-gold-face-mid: lab(74.151% 20.0229 53.8193);
  --fw-color-gold-ink: lab(18.285% 19.3364 21.1844);
  --fw-color-gold-rim: lab(93.3872% .601053 32.0707);
  --fw-color-purple-depth: lab(56.2072% 73.6551 -92.2657);
  --fw-color-purple-face: lab(66.7391% 71.321 -91.8824);
  --fw-color-purple-ink: lab(10.7723% 42.9896 -34.3425);
  --fw-color-purple-rim: lab(96.1137% 5.7736 -5.29707);
  --fw-color-sc-glow: lab(62.4435% -64.8872 8.72051);
  --fw-color-sc-glow-bright: lab(93.031% -63.5875 3.86753);
  --fw-color-surface: lab(6.3338% 40.0847 -31.8552);
  --fw-color-surface-raised: lab(10.7723% 42.9896 -34.3425);
  --fw-color-text: lab(96.1137% 5.7736 -5.29707);
  --fw-color-text-muted: lab(72.6611% 48.3752 -67.4882);
  --fw-content-max: 80rem;
  --fw-duration-enter: .3s;
  --fw-duration-normal: .2s;
  --fw-ease-out: ease-out;
  --fw-font-display: "Montserrat","Segoe UI",system-ui,sans-serif;
  --fw-font-sans: "Montserrat","Segoe UI",system-ui,sans-serif;
  --fw-font-weight-bold: 700;
  --fw-glow-gold-ambient: lab(69.511% 19.1289 73.8471/.36);
  --fw-glow-gold-mid: lab(74.151% 20.0229 53.8193/.55);
  --fw-glow-gold-sharp: lab(91.0641% 2.31549 38.746/.85);
  --fw-glow-purple-ambient: lab(66.7391% 71.321 -91.8824/.32);
  --fw-glow-purple-mid: lab(71.8246% 59.2533 -79.4676/.5);
  --fw-glow-purple-sharp: lab(95.4084% 6.92132 -10.8319/.78);
  --fw-gradient-gold-face: radial-gradient(ellipse 85% 122% at 50% 0,lab(95.1185% 1.98269 36.4068) 0%,lab(89.7847% 8.12256 50.2726) 33.65%,lab(74.151% 20.0229 53.8193) 67.3%,lab(72.0166% 19.1511 61.3673) 81.487%,lab(67.2994% 20.9446 61.9005) 88.58%,lab(69.511% 19.1289 73.8471) 95.673%);
  --fw-gradient-purple-face: radial-gradient(ellipse 65% 99% at 50% 26%,lab(95.4084% 6.92132 -10.8319) 0%,lab(71.8246% 59.2533 -79.4676) 76.923%,lab(66.7391% 71.321 -91.8824) 91.827%);
  --fw-leading-tight: 1.2;
  --fw-radius-lg: .75rem;
  --fw-radius-md: .5rem;
  --fw-radius-pill: 9999px;
  --fw-radius-sm: .375rem;
  --fw-space-1: .25rem;
  --fw-space-2: .5rem;
  --fw-space-3: .75rem;
  --fw-space-4: 1rem;
  --fw-space-5: 1.5rem;
  --fw-text-lg: 1.25rem;
  --fw-text-md: 1rem;
  --fw-text-sm: .875rem;
  --fw-text-xs: .75rem;
}

.primary-button {
  --spot-x: 50%;
  --spot-y: 28%;
  --spot-color: #ffffff7a;
  --idle-text-glow-core: #fffffff2;
  --idle-text-glow-sharp: var(--fw-glow-gold-sharp);
  --idle-text-glow-mid: var(--fw-glow-gold-mid);
  --outer-glow-sharp: var(--fw-glow-gold-sharp);
  --outer-glow-mid: var(--fw-glow-gold-mid);
  --outer-glow-ambient: var(--fw-glow-gold-ambient);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: min(177px, 100%);
  max-width: 100%;
  height: 50px;
  min-height: 50px;
  margin: 0px;
  padding: 0 var(--fw-space-5);
  border-width: 3px medium medium;
  border-style: solid none none;
  border-color: rgba(0, 0, 0, 0) currentcolor currentcolor;
  border-image: none;
  border-radius: var(--fw-radius-pill);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: transform 0.16s ease-out, box-shadow 0.32s ease-out;
  }
.primary-button::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 6px 1px var(--outer-glow-sharp),0 0 22px 6px var(--outer-glow-mid),0 0 56px 16px var(--outer-glow-ambient);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
.primary-button:disabled, .primary-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  }
.primary-button:focus {
  outline: none;
  }
.primary-button:focus-visible {
  outline: 3px solid var(--fw-color-focus);
  outline-offset: 3px;
  }
@media (hover: hover) and (pointer: fine) {
  .primary-button:hover:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen) {
  transform: translateY(-1px);
  } }
@media (hover: hover) and (pointer: fine) {
  .primary-button:hover:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen)::before {
  opacity: 1;
  } }
@media (hover: hover) and (pointer: fine) {
  .primary-button:hover:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen) .primary-button__face {
  filter: brightness(1.06) saturate(1.04);
  } }
@media (hover: hover) and (pointer: fine) {
  .primary-button:hover:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen) .primary-button__spotlight {
  opacity: 1;
  } }
@media (hover: hover) and (pointer: fine) {
  .primary-button:hover:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen) .primary-button__sheen::before {
  animation: 1.2s ease-in-out 0s 1 normal forwards running primary-button-sheen-sweep;
  } }
.primary-button:active:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen) {
  transform: translateY(2px) scale(0.98);
  transition-duration: 0.1s;
  }
.primary-button:active:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen) .primary-button__face {
  filter: brightness(0.96) saturate(0.98);
  }
.primary-button:active:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen) .primary-button__spotlight {
  opacity: 0.55;
  }
.primary-button:active:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen).primary-button--gold {
  box-shadow: 0 2px 0 0 var(--fw-color-gold-depth),0 3px 7px #0003,inset 0 2px 4px rgba(92,48,0,.141);
  }
.primary-button:active:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen).primary-button--purple {
  box-shadow: 0 2px 0 0 var(--fw-color-purple-depth),0 3px 7px #0003,inset 0 2px 4px rgba(51,16,75,.161);
  }
@media (hover: none) {
  .primary-button:active:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen)::before {
  opacity: 1;
  } }
.primary-button__face {
  z-index: 0;
  transition: filter 0.16s ease-out;
  }
.primary-button__face, .primary-button__spotlight {
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  pointer-events: none;
  }
.primary-button__spotlight {
  z-index: 1;
  background: radial-gradient(circle 96px at var(--spot-x) var(--spot-y),var(--spot-color) 0,hsla(0,0%,100%,.278) 36%,#0000 78%);
  opacity: 0;
  transition: opacity 0.12s ease-out;
  }
.primary-button__label {
  position: relative;
  z-index: 2;
  font-family: var(--fw-font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-font-weight-bold);
  line-height: 1;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(1px);
  }
.primary-button__sheen {
  position: absolute;
  inset: 0px;
  z-index: 3;
  border-radius: inherit;
  box-shadow: rgba(255, 255, 255, 0.3) 0px -2px 3px inset;
  overflow: hidden;
  pointer-events: none;
  }
.primary-button__sheen::before {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: 0px;
  width: 92%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.1) 82%, rgba(0, 0, 0, 0));
  transform: translateX(-150%);
  will-change: transform;
  }
@media (hover: hover) and (pointer: fine) {
  .primary-button__sheen::before {
  filter: blur(14px);
  } }
.primary-button--gold {
  --spot-color: #fffce2c7;
  --idle-text-glow-sharp: var(--fw-glow-gold-sharp);
  --idle-text-glow-mid: var(--fw-glow-gold-mid);
  --outer-glow-sharp: var(--fw-glow-gold-sharp);
  --outer-glow-mid: var(--fw-glow-gold-mid);
  --outer-glow-ambient: var(--fw-glow-gold-ambient);
  border-top-color: var(--fw-color-gold-rim);
  box-shadow: 0 5px 0 0 var(--fw-color-gold-depth),0 6px 12px rgba(0,0,0,.149);
  }
.primary-button--gold .primary-button__face {
  background: var(--fw-gradient-gold-face);
  }
.primary-button--gold .primary-button__label {
  color: var(--fw-color-gold-ink);
  }
.primary-button--purple {
  --spot-color: #ffffffb8;
  --idle-text-glow-sharp: var(--fw-glow-purple-sharp);
  --idle-text-glow-mid: var(--fw-glow-purple-mid);
  --outer-glow-sharp: var(--fw-glow-purple-sharp);
  --outer-glow-mid: var(--fw-glow-purple-mid);
  --outer-glow-ambient: var(--fw-glow-purple-ambient);
  border-top-color: var(--fw-color-purple-rim);
  box-shadow: 0 5px 0 0 var(--fw-color-purple-depth),0 6px 12px rgba(0,0,0,.149);
  }
.primary-button--purple .primary-button__face {
  background: var(--fw-gradient-purple-face);
  }
.primary-button--purple .primary-button__label {
  color: var(--fw-color-purple-ink);
  }
.primary-button--md {
  min-width: min(177px, 100%);
  height: 50px;
  min-height: 50px;
  padding: 0 var(--fw-space-5);
  border-top-width: 3px;
  }
.primary-button--md .primary-button__label {
  font-size: 1.125rem;
  letter-spacing: 0.72px;
  }
.primary-button--sm {
  min-width: min(120px, 100%);
  height: 34px;
  min-height: 34px;
  padding: 0 var(--fw-space-3);
  border-top-width: 2px;
  }
.primary-button--sm::before {
  box-shadow: 0 0 4px 1px var(--outer-glow-sharp),0 0 14px 4px var(--outer-glow-mid),0 0 36px 10px var(--outer-glow-ambient);
  }
.primary-button--sm .primary-button__label {
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  }
.primary-button--sm .primary-button__spotlight {
  background: radial-gradient(circle 56px at var(--spot-x) var(--spot-y),var(--spot-color) 0,hsla(0,0%,100%,.278) 36%,#0000 78%);
  }
.primary-button--sm .primary-button__sheen {
  box-shadow: rgba(255, 255, 255, 0.3) 0px -1px 2px inset;
  }
.primary-button--sm.primary-button--gold {
  box-shadow: 0 3px 0 0 var(--fw-color-gold-depth),0 4px 8px rgba(0,0,0,.149);
  }
.primary-button--sm.primary-button--purple {
  box-shadow: 0 3px 0 0 var(--fw-color-purple-depth),0 4px 8px rgba(0,0,0,.149);
  }
.primary-button--sm:active:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen).primary-button--gold {
  box-shadow: 0 1.5px 0 0 var(--fw-color-gold-depth),0 2px 5px #0003,inset 0 1px 3px rgba(92,48,0,.141);
  }
.primary-button--sm:active:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen).primary-button--purple {
  box-shadow: 0 1.5px 0 0 var(--fw-color-purple-depth),0 2px 5px #0003,inset 0 1px 3px rgba(51,16,75,.161);
  }
.primary-button--idle-pulse-glow:not(:disabled):not([aria-disabled="true"]):not(:focus-visible):not(:active)::before {
  animation: 2.4s ease-in-out 0s infinite normal none running primary-button-idle-outer-glow;
  }
.primary-button--idle-pulse-glow:not(:disabled):not([aria-disabled="true"]):not(:focus-visible):not(:active) .primary-button__label {
  animation: 2.4s ease-in-out 0s infinite normal none running primary-button-idle-text-glow;
  }
@media (hover: none) {
  .primary-button__sheen::before {
  display: none;
  } }
@media (prefers-reduced-motion: reduce) {
  .primary-button, .primary-button::before, .primary-button__face, .primary-button__spotlight {
  transition: none;
  animation: auto ease 0s 1 normal none running none;
  } }
@media (prefers-reduced-motion: reduce) {
  .primary-button__sheen::before {
  animation: auto ease 0s 1 normal none running none;
  } }
@media (prefers-reduced-motion: reduce) {
  .primary-button__label {
  text-shadow: none;
  animation: auto ease 0s 1 normal none running none;
  } }
@media (prefers-reduced-motion: reduce) {
  .primary-button:active:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen) {
  transform: none;
  } }
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .primary-button:hover:not(:disabled):not([aria-disabled="true"]):not(.primary-button--specimen) {
  transform: none;
  } }
.fw-icon-button {
  --fw-icon-button-size: 2.75rem;
  --fw-icon-button-icon: 1.25rem;
  --fw-icon-button-bg: #0000;
  --fw-icon-button-fg: var(--fw-color-text);
  --fw-icon-button-hover-bg: var(--fw-color-surface-raised);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fw-icon-button-size);
  min-width: var(--fw-icon-button-size);
  height: var(--fw-icon-button-size);
  min-height: var(--fw-icon-button-size);
  padding: 0px;
  border: 0px;
  border-radius: var(--fw-radius-pill);
  background: var(--fw-icon-button-bg);
  color: var(--fw-icon-button-fg);
  font-family: var(--fw-font-sans);
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
  }
.fw-icon-button--md {
  --fw-icon-button-size: 2.75rem;
  --fw-icon-button-icon: 1.25rem;
  }
.fw-icon-button--neutral {
  --fw-icon-button-fg: var(--fw-color-text);
  --fw-icon-button-hover-bg: var(--fw-color-surface-raised);
  }
@media (hover: hover) and (pointer: fine) {
  .fw-icon-button:hover:not(:disabled) {
  background: var(--fw-icon-button-hover-bg);
  } }
.fw-icon-button:focus {
  outline: none;
  }
.fw-icon-button:focus-visible {
  outline: 3px solid var(--fw-color-focus);
  outline-offset: 3px;
  }
.fw-icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  }
.fw-icon-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fw-icon-button-icon);
  height: var(--fw-icon-button-icon);
  line-height: 0;
  }
.fw-icon-button__icon svg {
  width: 100%;
  height: 100%;
  }
.fw-sidebar-rail {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0px;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg,var(--fw-color-bg) 0,var(--fw-color-surface-raised) 100%);
  color: var(--fw-color-text);
  font-family: var(--fw-font-sans);
  }
.fw-sidebar-rail__column {
  overflow: hidden;
  }
.fw-sidebar-rail__column, .fw-sidebar-rail__scroll {
  display: flex;
  min-width: 0px;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  }
.fw-sidebar-rail__scroll {
  gap: var(--fw-space-2);
  padding: 0 max(var(--fw-space-3),env(safe-area-inset-right,0px)) max(var(--fw-space-2),env(safe-area-inset-bottom,0px)) max(var(--fw-space-3),env(safe-area-inset-left,0px));
  overflow: hidden auto;
  overscroll-behavior: contain;
  }
.fw-sidebar-rail__header {
  position: relative;
  z-index: 2;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: max(var(--fw-space-3),env(safe-area-inset-top,0px)) max(var(--fw-space-3),env(safe-area-inset-right,0px)) var(--fw-space-2) max(var(--fw-space-3),env(safe-area-inset-left,0px));
  }
.fw-sidebar-rail__header, .fw-sidebar-rail__header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--fw-space-2);
  }
.fw-sidebar-rail__brand {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  }
.fw-sidebar-rail__brand a {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border-radius: var(--fw-radius-sm);
  }
.fw-sidebar-rail__brand a:focus-visible {
  outline: 3px solid var(--fw-color-focus);
  outline-offset: 2px;
  }
.fw-sidebar-rail__brand img, .fw-sidebar-rail__brand svg {
  display: block;
  width: auto;
  max-width: min(9rem, 100%);
  height: auto;
  max-height: 1.5rem;
  object-fit: contain;
  }
.fw-sidebar-rail__close {
  flex-shrink: 0;
  }
.fw-sidebar-shell-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 1130;
  padding: 0px;
  border: 0px;
  margin: 0px;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  animation: 0.28s ease 0s 1 normal both running fw-sidebar-backdrop-in;
  }
.fw-sidebar-shell-backdrop--closing {
  animation: 0.32s ease 0s 1 normal forwards running fw-sidebar-backdrop-out;
  }
.fw-sidebar-shell-panel {
  position: fixed;
  inset: 0px;
  z-index: 1131;
  display: flex;
  max-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg,var(--fw-color-bg) 0,var(--fw-color-surface-raised) 100%);
  animation: 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running fw-sidebar-rail-from-bottom;
  }
.fw-sidebar-shell-panel--closing {
  animation: 0.42s cubic-bezier(0.4, 0, 0.9, 1) 0s 1 normal forwards running fw-sidebar-rail-to-bottom;
  }
@media (min-width: 768px) {
  .fw-sidebar-shell-panel {
  inset: 0px 0px 0px auto;
  width: min(26.25rem, 100vw);
  animation: 0.44s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running fw-sidebar-rail-from-right;
  } }
@media (min-width: 768px) {
  .fw-sidebar-shell-panel--closing {
  animation: 0.38s cubic-bezier(0.4, 0, 0.9, 1) 0s 1 normal forwards running fw-sidebar-rail-to-right;
  } }
@media (prefers-reduced-motion: reduce) {
  .fw-sidebar-shell-backdrop, .fw-sidebar-shell-panel {
  animation: auto ease 0s 1 normal none running none;
  } }
@media (prefers-reduced-motion: reduce) {
  .fw-sidebar-shell-backdrop--closing, .fw-sidebar-shell-panel--closing {
  opacity: 0;
  animation: auto ease 0s 1 normal none running none;
  } }
.fw-header-cta {
  display: flex;
  align-items: center;
  gap: var(--fw-space-2);
  }
.fw-header-cta .primary-button {
  min-width: 5.5rem;
  }
@media (min-width: 768px) {
  .fw-header-cta .primary-button {
  min-width: 6.75rem;
  height: 2.5rem;
  min-height: 2.5rem;
  } }
.fw-header-logo {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0px;
  border: 0px;
  background: none;
  color: inherit;
  border-radius: var(--fw-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transform-origin: 50% center;
  transition: transform 0.16s;
  }
.fw-header-logo:focus {
  outline: none;
  }
.fw-header-logo:focus-visible {
  outline: 3px solid var(--fw-color-focus);
  outline-offset: 3px;
  }
.fw-header-logo:active {
  transform: scale(0.94);
  }
@media (hover: hover) and (pointer: fine) {
  .fw-header-logo:hover {
  transform: scale(0.96);
  } }
.fw-header-logo:disabled {
  cursor: default;
  transform: none;
  }
.brand-logo__symbol {
  display: block;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  overflow: visible;
  }
.brand-logo__full {
  display: none;
  flex: 0 1 auto;
  width: auto;
  max-width: min(12.5rem, 100%);
  height: 1.5rem;
  object-fit: contain;
  object-position: left center;
  }
@media (min-width: 768px) {
  .brand-logo--auto .brand-logo__symbol {
  display: none;
  } }
@media (min-width: 768px) {
  .brand-logo--auto .brand-logo__full {
  display: block;
  max-width: min(13.5rem, 100%);
  height: 1.625rem;
  } }
@media (prefers-reduced-motion: reduce) {
  .fw-header-logo {
  transition: none;
  } }
@media (prefers-reduced-motion: reduce) {
  .fw-header-logo:active {
  transform: none;
  } }
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .fw-header-logo:hover {
  transform: none;
  } }
.fw-header-menu-button {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  }
.fw-header-menu-button__control {
  --fw-icon-button-size: 2.875rem;
  --fw-icon-button-icon: 2rem;
  --fw-icon-button-hover-bg: #0000;
  border-radius: var(--fw-radius-md);
  }
.fw-header-menu-button__glyph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  width: 2rem;
  height: 2rem;
  transition-duration: var(--fw-duration-enter);
  }
.fw-header-menu-button__bar {
  width: 100%;
  height: 0.1875rem;
  border-radius: 0.25rem;
  background-color: currentcolor;
  transition-duration: var(--fw-duration-enter);
  }
.fw-header-menu-button__glyph--close .fw-header-menu-button__bar {
  margin-inline-start: 0.625rem;
  }
.fw-header-menu-button__glyph--close .fw-header-menu-button__bar--1 {
  transform: rotate(45deg);
  transform-origin: left center;
  }
.fw-header-menu-button__glyph--close .fw-header-menu-button__bar--2 {
  margin-inline-start: 0px;
  transform: rotate(135deg);
  transform-origin: center center;
  }
.fw-header-menu-button__glyph--close .fw-header-menu-button__bar--3 {
  transform: rotate(-45deg);
  transform-origin: left center;
  }
@media (prefers-reduced-motion: reduce) {
  .fw-header-menu-button__bar, .fw-header-menu-button__glyph {
  transition: none;
  } }
.fw-app-header {
  --fw-app-header-height: 3.5rem;
  --fw-app-header-inline: clamp(1rem,calc(50vw - 10.25rem),1.25rem);
  --fw-app-header-gap: var(--fw-space-1);
  --fw-app-header-bg: var(--fw-color-bg);
  --fw-app-header-accent: #0000;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 100%;
  background: var(--fw-app-header-bg);
  color: var(--fw-color-text);
  font-family: var(--fw-font-sans);
  transition: background-color var(--fw-duration-normal) var(--fw-ease-out);
  }
@media (min-width: 768px) {
  .fw-app-header {
  --fw-app-header-height: 4.25rem;
  --fw-app-header-inline: 1.25rem;
  --fw-app-header-gap: var(--fw-space-4);
  } }
.fw-app-header::before {
  content: "";
  position: absolute;
  inset: 0px 0px auto;
  height: 3px;
  background: var(--fw-app-header-accent);
  pointer-events: none;
  transition: background-color var(--fw-duration-normal) var(--fw-ease-out);
  }
.fw-app-header__inner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "logo . wallet end";
  align-items: center;
  gap: var(--fw-app-header-gap);
  width: 100%;
  max-width: 100%;
  min-height: var(--fw-app-header-height);
  padding-block: 0.5rem;
  padding-inline: max(var(--fw-app-header-inline),env(safe-area-inset-left,0px)) max(var(--fw-app-header-inline),env(safe-area-inset-right,0px));
  }
@media (min-width: 768px) {
  .fw-app-header__inner {
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "logo wallet end";
  } }
.fw-app-header__logo {
  grid-area: logo;
  place-self: center start;
  }
.fw-app-header__end {
  grid-area: end;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--fw-space-2);
  }
@media (prefers-reduced-motion: reduce) {
  .fw-app-header, .fw-app-header::before {
  transition: none;
  } }
.fw-sidebar-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
  border: 0px;
  }
.fw-sidebar-rail__nav {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 0.25rem;
  }
.fw-sidebar-rail__quick-tiles, .fw-sidebar-tile-grid {
  min-width: 0px;
  flex-shrink: 0;
  }
.fw-sidebar-tile-grid {
  display: grid;
  grid-template-columns: repeat(var(--fw-sidebar-tile-count,4),minmax(0,1fr));
  gap: 0.5rem;
  }
.fw-sidebar-tile {
  display: flex;
  aspect-ratio: 1 / 1;
  min-width: 0px;
  min-height: fit-content;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.5rem 0.25rem 0.625rem;
  border: 0px;
  border-radius: var(--fw-radius-lg);
  color: var(--fw-color-text);
  background: linear-gradient(180deg,color-mix(in oklab,var(--fw-color-purple-face) 32%,var(--fw-color-surface)) 0,color-mix(in oklab,var(--fw-color-purple-depth) 48%,var(--fw-color-surface)) 100%);
  box-shadow: 0 .25rem 0 0 var(--fw-color-bg),0 .375rem .75rem rgba(0,0,0,.278),inset 0 1px 0 hsla(0,0%,100%,.161);
  font-family: var(--fw-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition-property: background, transform;
  transition-duration: 0.2s, 0.15s;
  transition-timing-function: ease;
  }
@media (hover: hover) and (pointer: fine) {
  .fw-sidebar-tile:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg,color-mix(in oklab,var(--fw-color-purple-face) 42%,var(--fw-color-surface)) 0,color-mix(in oklab,var(--fw-color-purple-depth) 52%,var(--fw-color-surface)) 100%);
  } }
.fw-sidebar-tile:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 .09375rem 0 0 var(--fw-color-purple-depth),0 .125rem .3125rem #0003,inset 0 1px .1875rem rgba(0,0,0,.278);
  }
@media (prefers-reduced-motion: reduce) {
  .fw-sidebar-tile {
  transition: none;
  } }
@media (prefers-reduced-motion: reduce) {
  .fw-sidebar-tile:active {
  transform: none;
  } }
.fw-sidebar-tile:focus-visible {
  outline: 3px solid var(--fw-color-focus);
  outline-offset: 2px;
  }
.fw-sidebar-tile__icon {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  color: var(--fw-color-text);
  }
.fw-sidebar-tile__caption {
  width: 100%;
  max-width: 100%;
  color: var(--fw-color-text);
  font-size: clamp(0.5625rem, 3vw, 0.6875rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: break-word;
  hyphens: auto;
  }
@media (min-width: 768px) {
  .fw-sidebar-tile__caption {
  font-size: 0.75rem;
  } }
.fw-sidebar-collapsible__trigger, .fw-sidebar-nav-row {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 0px;
  border-radius: var(--fw-radius-md);
  color: var(--fw-color-text);
  background: rgba(0, 0, 0, 0);
  font-family: var(--fw-font-sans);
  font-size: var(--fw-text-base,.9375rem);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  }
@media (hover: hover) and (pointer: fine) {
  .fw-sidebar-collapsible__trigger:hover, .fw-sidebar-nav-row:hover {
  border-radius: var(--fw-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  } }
.fw-sidebar-collapsible__trigger:focus-visible, .fw-sidebar-nav-row:focus-visible {
  outline: 3px solid var(--fw-color-focus);
  outline-offset: 2px;
  }
.fw-sidebar-nav-row__label {
  min-width: 0px;
  flex: 1 1 0%;
  }
.fw-sidebar-nav-row__chevron {
  flex-shrink: 0;
  color: var(--fw-color-text-muted);
  }
.fw-sidebar-collapsible {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  }
.fw-sidebar-collapsible__trigger {
  font-weight: 600;
  }
.fw-sidebar-collapsible__hint {
  margin-left: auto;
  color: var(--fw-color-text-muted);
  font-size: var(--fw-text-sm,.8125rem);
  font-weight: 500;
  }
.fw-sidebar-collapsible__chevron {
  flex-shrink: 0;
  color: var(--fw-color-text-muted);
  transition: transform 0.2s;
  }
.fw-sidebar-collapsible__chevron--open {
  transform: rotate(180deg);
  }
.fw-sidebar-collapsible__panel {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  padding-left: 0.25rem;
  }
.fw-sidebar-collapsible__panel--open {
  display: flex;
  }
@media (prefers-reduced-motion: reduce) {
  .fw-sidebar-collapsible__chevron {
  transition: none;
  } }
.fw-sidebar-tile--guest .fw-sidebar-tile__caption {
  font-size: clamp(0.6875rem, 3.4vw, 0.8125rem);
  }
@media (min-width: 768px) {
  .fw-sidebar-tile--guest .fw-sidebar-tile__caption {
  font-size: 0.875rem;
  } }
.fw-sidebar-guest__hero {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--fw-radius-lg);
  background: color-mix(in oklab,var(--fw-color-purple-face) 28%,var(--fw-color-surface));
  box-shadow: rgba(20, 0, 30, 0.9) 0px 0.6875rem 1.625rem -1rem, rgba(255, 255, 255, 0.09) 0px 1px 0px inset;
  }
.fw-sidebar-guest__hero-art {
  position: absolute;
  z-index: 0;
  right: -1.75rem;
  bottom: -1.1rem;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  user-select: none;
  max-height: 11.5rem;
  transform: none;
  transform-origin: right bottom;
  }
@media (min-width: 480px) {
  .fw-sidebar-guest__hero-art {
  max-height: 16rem;
  transform: scale(1.14);
  } }
.fw-sidebar-guest__hero-art {
  filter: drop-shadow(0 0 10px var(--fw-glow-purple-ambient)) drop-shadow(0 0 30px var(--fw-glow-purple-ambient)) drop-shadow(0 0 60px var(--fw-glow-purple-ambient));
  }
.fw-sidebar-guest__hero-art--bloom {
  filter: drop-shadow(0 0 16px var(--fw-glow-purple-mid)) drop-shadow(0 0 46px var(--fw-glow-purple-ambient)) drop-shadow(0 0 88px var(--fw-glow-purple-ambient));
  opacity: 0;
  animation: 5s ease-in-out 0s infinite normal none running fw-guest-hero-glow-breathe;
  }
.fw-sidebar-guest__hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 11rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem clamp(4.5rem, 24%, 7rem) 0.875rem 1.25rem;
  }
@media (min-width: 480px) {
  .fw-sidebar-guest__hero-inner {
  padding: 1rem clamp(7rem, 32%, 9rem) 0.875rem 1.25rem;
  } }
.fw-sidebar-guest__title {
  margin: 0px;
  color: var(--fw-color-text);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  }
.fw-sidebar-guest__lead {
  margin: 0.35rem 0px 0px;
  color: var(--fw-color-text);
  font-size: var(--fw-text-base,.9375rem);
  font-weight: 600;
  line-height: 1.25;
  }
.fw-sidebar-guest__bonus-chip {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0px 0px;
  color: var(--fw-color-text);
  font-size: var(--fw-text-md);
  font-weight: 900;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1;
  }
@media (min-width: 480px) {
  .fw-sidebar-guest__bonus-chip {
  font-size: var(--fw-text-lg);
  } }
.fw-sidebar-guest__bonus-part {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  }
.fw-sidebar-guest__bonus-part img {
  display: block;
  flex-shrink: 0;
  }
.fw-sidebar-guest__bonus-gc {
  color: var(--fw-color-gold-rim);
  background-image: linear-gradient(180deg,var(--fw-color-gold-face-light) 0,var(--fw-color-gold-face-mid) 100%);
  }
.fw-sidebar-guest__bonus-fc, .fw-sidebar-guest__bonus-gc {
  background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  }
.fw-sidebar-guest__bonus-fc {
  color: var(--fw-color-sc-glow-bright);
  background-image: linear-gradient(180deg,var(--fw-color-sc-glow-bright) 0,var(--fw-color-sc-glow) 100%);
  }
@media (forced-colors: active) {
  .fw-sidebar-guest__bonus-fc, .fw-sidebar-guest__bonus-gc {
  background-image: none;
  -webkit-text-fill-color: currentcolor;
  } }
.fw-sidebar-guest__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--fw-space-3);
  margin-top: 0.5rem;
  }
.fw-sidebar-guest__legal {
  max-width: 11.5rem;
  margin: 0px;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fw-text-xs);
  line-height: var(--fw-leading-tight);
  text-align: start;
  }
@media (min-width: 480px) {
  .fw-sidebar-guest__legal {
  max-width: 14rem;
  } }
@media (prefers-reduced-motion: reduce) {
  .fw-sidebar-guest__hero-art--bloom {
  animation: auto ease 0s 1 normal none running none;
  } }
.fw-sidebar-rail {
  --fw-sidebar-accent: var(--fw-currency-accent,var(--fw-color-gold-rim));
  --fw-sidebar-accent-depth: var( --fw-currency-accent-depth,var(--fw-color-gold-depth) );
  }
.guest-app-header {
  position: sticky;
  top: 0px;
  z-index: 20;
  }
.homepage-app-header .fw-app-header__inner {
  max-width: var(--fw-content-max);
  margin-inline: auto;
  }

@keyframes primary-button-sheen-sweep { 0% { transform: translateX(-150%); } 100% { transform: translateX(220%); } }
@keyframes primary-button-idle-outer-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes primary-button-idle-text-glow {
  0%, 100% { text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent; transform: translateY(1px) scale(1); }
  50% { text-shadow: 0 0 1px var(--idle-text-glow-core), 0 0 5px var(--idle-text-glow-core), 0 0 11px var(--idle-text-glow-sharp), 0 0 24px var(--idle-text-glow-mid); transform: translateY(1px) scale(1.03); }
}
@keyframes fw-sidebar-backdrop-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fw-sidebar-backdrop-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fw-sidebar-rail-from-bottom { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
@keyframes fw-sidebar-rail-to-bottom { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } }
@keyframes fw-sidebar-rail-from-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes fw-sidebar-rail-to-right { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@keyframes fw-guest-hero-glow-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ==========================================================================
   Blog integration
   ========================================================================== */
:root {
  --fw-color-brand-logo-gold-highlight: #ffefbf;
  --fw-color-brand-logo-mark: lab(96.1137% 5.7736 -5.29707);
  --fw-color-gold-face-warm: lab(89.7847% 8.12256 50.2726);
  --fw-color-gold-face-mid: lab(74.151% 20.0229 53.8193);
  --fw-color-gold-face-bright: lab(72.0166% 19.1511 61.3673);
  --fw-color-gold-face: lab(69.511% 19.1289 73.8471);
  --fw-color-gold-face-deep: lab(67.2994% 20.9446 61.9005);
}

/* Katen adds an absolutely-positioned header::after overlay and dark-mode backgrounds */
header.fw-app-header::after,
header.fw-sidebar-rail__header::after { content: none !important; display: none !important; }
body.dark header.fw-app-header { background-color: var(--fw-app-header-bg); }
.fw-app-header *, .fw-sidebar-shell-panel * { box-sizing: border-box; }
.fw-app-header a, .fw-sidebar-shell-panel a { text-decoration: none !important; }
.fw-app-header a.primary-button:hover, .fw-sidebar-shell-panel a.primary-button:hover { color: inherit; }
.fw-sidebar-shell-panel h2, .fw-sidebar-shell-panel p { font-family: var(--fw-font-sans); }
.fw-sidebar-shell-panel ul { margin: 0; padding: 0; list-style: none; }

/* Buttons are rendered as links here */
a.primary-button { text-decoration: none; }

/* Drawer open/closed */
.fw-sidebar-shell-backdrop[hidden], .fw-sidebar-shell-panel[hidden] { display: none !important; }
html.fw-sidebar-open, html.fw-sidebar-open body { overflow: hidden; }

/* Blog section inside the drawer (menu + search) */
.fw-sidebar-blog { display: flex; flex-direction: column; gap: .25rem; }
.fw-sidebar-blog__title {
  margin: 0; padding: .625rem .875rem .25rem;
  color: var(--fw-color-text-muted); font-size: var(--fw-text-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.fw-sidebar-blog__menu .sub-menu { padding-left: .75rem; }
.fw-sidebar-search { display: flex; gap: .5rem; padding: .25rem .25rem .5rem; }
.fw-sidebar-search__input {
  flex: 1 1 auto; min-width: 0; height: 2.75rem; padding: 0 1rem;
  border: 1px solid var(--fw-color-border); border-radius: var(--fw-radius-pill);
  background: lab(1.81144% 13.0638 -13.9755); color: var(--fw-color-text);
  font: 500 .9375rem/1 var(--fw-font-sans);
}
.fw-sidebar-search__input::placeholder { color: var(--fw-color-text-muted); opacity: 1; }
.fw-sidebar-search__input:focus { outline: 2px solid var(--fw-color-purple-face); outline-offset: 1px; }
.fw-sidebar-search__submit { --fw-icon-button-bg: var(--fw-color-surface-raised); flex: 0 0 auto; }

/* Drawer logo: give it an explicit width (Katen's img max-width collapses it to 0 inside the flex link) */
.fw-sidebar-rail__brand img { width: 9rem; max-width: 100%; height: auto; }

/* Spacing parity with the app drawer ------------------------------------ */
/* the app's section stack (hero → tiles → nav) is 12px apart */
.fw-sidebar-rail__content {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 0%;
  flex-direction: column;
  gap: var(--fw-space-3);
}
/* app body line-height is 1.5; Katen's is 1.7, which made every row taller */
.fw-sidebar-shell-panel { line-height: 1.5; }
/* the app gives the bonus chip 16px below it (from its global p:nth-child(3) rule) */
.fw-sidebar-guest__bonus-chip { margin-bottom: 1rem; }
/* blog links spaced like the Help & policies rows */
.fw-sidebar-blog__menu { display: flex; flex-direction: column; gap: .125rem; }
.fw-sidebar-blog__menu > li { margin: 0; padding: 0; }
.fw-sidebar-blog__title { line-height: 1.2; }
.fw-sidebar-shell-panel a, .fw-sidebar-shell-panel button { line-height: 1.5; }

/* Drawer surfaces — tuned to the muted purples of the app drawer as it renders on QA
   (sampled from a QA screenshot; the wide-gamut lab() mixes rendered too saturated here) */
.fw-sidebar-shell-panel,
.fw-sidebar-rail { background: linear-gradient(180deg, #210028 0%, #32033c 100%); }
.fw-sidebar-guest__hero { background: #56276d; }
.fw-sidebar-tile { background: linear-gradient(180deg, #582b74 0%, #65358b 100%); }
@media (hover: hover) and (pointer: fine) {
  .fw-sidebar-tile:hover { background: linear-gradient(180deg, #60337e 0%, #6d3d95 100%); }
}

/* Page background = the app's --fw-color-bg (overrides css/header.css `body { background-color:#4F1669 !important }`) */
html body:not(.editor-styles-wrapper) { background-color: var(--fw-color-bg) !important; }

/* Side menu banner carousel (fw/side-menu block) — matches the app's sidebar banner slider */
.fw-sidebar-rail__featured { margin-bottom: .25rem; }
.fw-banner-carousel { min-width: 0; }
.fw-banner-carousel__viewport { overflow: hidden; border-radius: var(--fw-radius-md); touch-action: pan-y; }
.fw-banner-carousel__track { display: flex; transition: transform .5s ease; will-change: transform; }
.fw-banner-carousel__slide { flex: 0 0 100%; min-width: 0; }
.fw-banner { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--fw-radius-md); }
.fw-banner picture { display: block; }
.fw-banner__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.fw-banner-carousel__dots { display: flex; justify-content: center; margin: .5rem 0 0; padding: 0; list-style: none; }
.fw-banner-carousel__dots li { margin: 0 .175rem; padding: 0; line-height: 0; }
.fw-banner-carousel__dot {
  width: .4rem; height: .4rem; min-width: 0; padding: 0; border: 0; border-radius: var(--fw-radius-pill);
  background: var(--fw-color-text); cursor: pointer; line-height: 0;
}
.fw-banner-carousel__dot.is-active { background: var(--fw-color-purple-face); }
.fw-banner-carousel__dot:focus-visible { outline: 2px solid var(--fw-color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fw-banner-carousel__track { transition: none; } }

/* Banner ↔ dots spacing to match the app (banner 396×170, dots row 24px starting 8px below).
   The drawer's `ul { margin: 0 }` reset was removing the dots' top margin. */
.fw-sidebar-shell-panel .fw-banner-carousel__dots,
.fw-side-menu-preview .fw-banner-carousel__dots {
  align-items: center;
  height: 1.5rem;
  margin: .5rem 0 0;
}
.fw-banner__image { aspect-ratio: 2.33455 / 1; }