@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(--font-sans--font-variation-settings);
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
    --color-background: var(--background);
    --color-accent: var(--accent);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  body {
    line-height: inherit;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
    color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    ::placeholder {
      color: color-mix(in oklab, currentColor 50%, transparent);
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }
}

@layer utilities;


.glass-primary {
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  border-radius: var(--radius-none);
  background: linear-gradient(135deg, #ffffff38 0%, #ffffff24 50%, #ffffff1a 100%), radial-gradient(circle at 30% 20%, #5739fb26 0%, #0000 60%);
  border: 1px solid #ffffff47;
  transition: all .6s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 12px 48px #0000004d, inset 0 1px #ffffff59, 0 6px 20px #5739fb2e;
}

.glass-primary:hover {
  background: linear-gradient(135deg, #ffffff42 0%, #ffffff2e 50%, #ffffff1f 100%), radial-gradient(circle at 30% 20%, #5739fb2e 0%, #0000 60%);
  box-shadow: 0 16px 64px #00000059, inset 0 1px #ffffff73, 0 8px 28px #5739fb38;
}

.glass-secondary {
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-radius: var(--radius-none);
  background: linear-gradient(135deg, #ffffff2e 0%, #ffffff1a 100%);
  border: 1px solid #fff3;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 16px #0003, inset 0 1px #ffffff40;
}

.glass-secondary:hover {
  background: linear-gradient(135deg, #ffffff38 0%, #ffffff24 100%);
  border-color: #ffffff47;
  box-shadow: 0 6px 24px #00000040, inset 0 1px #ffffff4d;
}

.glass-tertiary {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(135deg, #ffffff1f 0%, #ffffff14 100%);
  border: 1px solid #ffffff1a;
  border-radius: 4px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: inset 0 2px 8px #00000026;
}

.glass-tertiary:focus, .glass-tertiary:focus-within {
  background: linear-gradient(135deg, #ffffff29 0%, #ffffff1a 100%);
  border-color: #ffffff38;
  box-shadow: inset 0 2px 8px #00000026, 0 0 0 3px #5739fb26, 0 4px 12px #5739fb33;
}

.glass-dark {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(135deg, #0000001f 0%, #0000000f 100%);
  border: 1px solid #ffffff1a;
  border-radius: 4px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.text-shadow-hero {
  text-shadow: 0 2px 12px #0006;
}

.text-shadow-subhead {
  text-shadow: 0 2px 8px #0006;
}

.text-shadow-body {
  text-shadow: 0 1px 4px #0000004d;
}

.text-shadow-label {
  text-shadow: 0 1px 3px #00000040;
}

.text-shadow-small {
  text-shadow: 0 1px 2px #0003;
}

:root {
  --space-xxl: clamp(2.5rem, 7vw, 4rem);
  --space-xl: clamp(2rem, 6vw, 3rem);
  --space-l: clamp(1.5rem, 4vw, 2rem);
  --space-m: clamp(1.25rem, 4vw, 1.5rem);
  --space-s: clamp(1rem, 3vw, 1.25rem);
  --space-xs: clamp(.625rem, 2vw, .75rem);
  --space-xxs: clamp(.375rem, 1.5vw, .5rem);
}

.p-fluid-xxl {
  padding: var(--space-xxl);
}

.p-fluid-xl {
  padding: var(--space-xl);
}

.p-fluid-l {
  padding: var(--space-l);
}

.p-fluid-m {
  padding: var(--space-m);
}

.p-fluid-s {
  padding: var(--space-s);
}

.gap-fluid-l {
  gap: var(--space-l);
}

.gap-fluid-m {
  gap: var(--space-m);
}

.gap-fluid-s {
  gap: var(--space-s);
}

.gap-fluid-xs {
  gap: var(--space-xs);
}

.hover-lift-large:hover {
  transform: scale(1.012)translateY(-3px);
}

.hover-lift-medium:hover {
  transform: translateY(-3px);
}

.hover-lift-small:hover {
  transform: translateY(-2px);
}

.hover-lift-minimal:hover {
  transform: translateY(-1px);
}

.hover-lift-tile:hover {
  transform: translateY(-4px);
}

:root {
  --transition-glass: all .6s cubic-bezier(.16, 1, .3, 1);
  --transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);
  --transition-tile: all .7s cubic-bezier(.19, 1, .22, 1);
  --transition-content: all .3s cubic-bezier(.4, 0, .2, 1);
}

.transition-glass {
  transition: var(--transition-glass);
}

.transition-smooth {
  transition: var(--transition-smooth);
}

.transition-tile {
  transition: var(--transition-tile);
}

.transition-content {
  transition: var(--transition-content);
}

.radius-sharp {
  border-radius: 0;
}

.radius-subtle {
  border-radius: 4px;
}

.btn-primary {
  align-items: center;
  gap: var(--spacing-2);
  -webkit-backdrop-filter: blur(50px);
  border-radius: var(--radius-none);
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: .015em;
  text-shadow: 0 2px 6px #00000059;
  cursor: pointer;
  transition: var(--transition-smooth);
  background: linear-gradient(135deg, #ffffff47 0%, #ffffff2e 100%);
  border: 1px solid #ffffff59;
  padding: clamp(1rem, 3.5vw, 1.25rem) clamp(2rem, 6vw, 3rem);
  font-size: clamp(1rem, 2.25vw, 1.125rem);
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 8px 32px #00000047, inset 0 1px #ffffff73, 0 4px 16px #5739fb33;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ffffff59 0%, #ffffff38 100%);
  border-color: #ffffff73;
  transform: translateY(-3px);
  box-shadow: 0 12px 48px #00000059, inset 0 1px #ffffff8c, 0 6px 24px #5739fb47;
}

.btn-primary:active {
  transform: translateY(-1px);
}

.btn-secondary {
  align-items: center;
  gap: var(--spacing-2);
  -webkit-backdrop-filter: blur(40px);
  border-radius: var(--radius-none);
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: .015em;
  text-shadow: 0 1px 3px #00000040;
  cursor: pointer;
  transition: var(--transition-smooth);
  background: linear-gradient(135deg, #ffffff1f 0%, #ffffff14 100%);
  border: 1px solid #ffffff38;
  padding: clamp(1rem, 3.5vw, 1.25rem) clamp(2rem, 6vw, 3rem);
  font-size: clamp(1rem, 2.25vw, 1.125rem);
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 4px 16px #0003, inset 0 1px #ffffff40;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #ffffff2e 0%, #ffffff1f 100%);
  border-color: #ffffff47;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px #00000040, inset 0 1px #ffffff4d;
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-glass-lg {
  align-items: center;
  gap: var(--spacing-2);
  background: var(--glass-bg-medium);
  -webkit-backdrop-filter: var(--glass-blur-default);
  border: var(--glass-border-default);
  border-radius: var(--radius-none);
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: .02em;
  cursor: pointer;
  transition: var(--transition-smooth);
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
}

.btn-glass-lg:hover {
  background: #ffffff47;
  border-color: #ffffff59;
  transform: translateY(-2px);
}

.badge-status {
  align-items: center;
  gap: var(--spacing-1-5);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 0;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
}

.badge-status-red {
  color: #ef4444;
  background: linear-gradient(135deg, #ef444426 0%, #ef444414 100%);
  border: 1px solid #ef444440;
}

.badge-status-orange {
  color: #f59e0b;
  background: linear-gradient(135deg, #f59e0b26 0%, #f59e0b14 100%);
  border: 1px solid #f59e0b40;
}

.badge-status-green {
  color: #10b981;
  background: linear-gradient(135deg, #10b98126 0%, #10b98114 100%);
  border: 1px solid #10b98140;
}

.badge-era {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  -webkit-backdrop-filter: blur(30px);
  transition: var(--transition-smooth);
  background: linear-gradient(135deg, #ffffff2e 0%, #ffffff1a 100%);
  border: 1px solid #fff3;
  border-radius: 0;
  align-items: center;
  gap: .625rem;
  padding: .625rem 1.25rem;
  font-size: clamp(.75rem, 1.75vw, .875rem);
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 4px 16px #0003, inset 0 1px #ffffff40;
}

.badge-era:hover {
  background: linear-gradient(135deg, #ffffff38 0%, #ffffff24 100%);
  border-color: #ffffff47;
  transform: translateY(-1px);
}

.badge-era-experience {
  border-left: 3px solid var(--era-experience);
  box-shadow: 0 4px 16px #8b7dff33, inset 0 1px #ffffff40;
}

.badge-era-recognize {
  border-left: 3px solid var(--era-recognize);
  box-shadow: 0 4px 16px #5739fb33, inset 0 1px #ffffff40;
}

.badge-era-align, .badge-era-integrate {
  border-left: 3px solid var(--era-align);
  box-shadow: 0 4px 16px #3e2bb833, inset 0 1px #ffffff40;
}

.badge-era-flow {
  border-left: 3px solid #fff6;
  box-shadow: 0 4px 16px #ffffff26, inset 0 1px #ffffff40;
}

.text-eyebrow {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-spacing);
  text-transform: var(--type-eyebrow-transform);
  opacity: .85;
  margin-bottom: 12px;
  display: block;
}

.text-eyebrow-white {
  color: #fffc;
}

.text-eyebrow-brand {
  color: var(--brand-mid);
}

.text-eyebrow-muted {
  color: var(--color-text-secondary);
}

.page-content {
  background: var(--color-background);
  padding: var(--space-l) var(--spacing-4);
  flex: 1;
  overflow-y: auto;
}

@media (width >= 768px) {
  .page-content {
    padding: var(--space-xl) var(--spacing-6);
  }
}

.content-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.content-container-narrow {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.content-container-wide {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

@keyframes shimmer-glass {
  0% {
    opacity: .3;
    transform: translateX(-100%);
  }

  50% {
    opacity: .5;
  }

  100% {
    opacity: .3;
    transform: translateX(100%);
  }
}

.shimmer-overlay {
  pointer-events: none;
  z-index: 100;
  border-radius: inherit;
  background: linear-gradient(90deg, #0000 0%, #ffffff1a 30%, #ffffff0d 50%, #ffffff1a 70%, #0000 100%) 0 0 / 200% 100%;
  animation: 12s ease-in-out infinite shimmer-glass;
  position: absolute;
  inset: 0;
}

.focus-ring:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-glass-lg:focus-visible, .glass-tertiary:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #5739fb80;
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .shimmer-overlay {
    animation: none !important;
  }

  .hover-lift-large:hover, .hover-lift-medium:hover, .hover-lift-small:hover, .hover-lift-minimal:hover, .hover-lift-tile:hover {
    transform: none !important;
  }
}

@media print {
  .glass-primary, .glass-secondary, .glass-tertiary, .glass-dark {
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
  }

  .text-eyebrow, .text-hero-headline, .text-section-headline, .text-body-hero, [class*="text-shadow"] {
    color: #1a1a1a !important;
    text-shadow: none !important;
  }

  .btn-primary, .btn-secondary, .btn-glass-lg, button {
    display: none !important;
  }

  .glass-primary, .card-hero, .card-content {
    page-break-inside: avoid;
  }
}

.radius-none {
  border-radius: 0;
}

.signature-underline {
  display: inline-block;
  position: relative;
}

.signature-underline:after {
  content: "";
  opacity: .4;
  background: linear-gradient(90deg, #0000 0%, currentColor 20% 80%, #0000 100%);
  height: 2px;
  animation: 3s ease-in-out infinite signature-shimmer;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
}

@keyframes signature-shimmer {
  0%, 100% {
    opacity: .4;
    transform: scaleX(1);
  }

  50% {
    opacity: .7;
    transform: scaleX(1.02);
  }
}

.signature-square-pulse {
  animation: 2.5s ease-in-out infinite signature-square-breath;
}

@keyframes signature-square-breath {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .85;
    transform: scale(1.15);
  }
}

.signature-text-shimmer {
  position: relative;
  overflow: hidden;
}

.signature-text-shimmer:before {
  content: "";
  background: linear-gradient(90deg, #0000 0%, #ffffff4d 50%, #0000 100%);
  width: 100%;
  height: 100%;
  animation: 4s ease-in-out .5s infinite signature-text-shine;
  position: absolute;
  top: 0;
  left: -100%;
}

@keyframes signature-text-shine {
  0% {
    left: -100%;
  }

  50%, 100% {
    left: 100%;
  }
}

.signature-badge-accent {
  padding-left: 1rem;
  position: relative;
}

.signature-badge-accent:before {
  content: "";
  opacity: .5;
  background: linear-gradient(#0000 0%, currentColor 20% 80%, #0000 100%);
  width: 2px;
  height: 60%;
  animation: 2s ease-in-out infinite signature-accent-pulse;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@keyframes signature-accent-pulse {
  0%, 100% {
    opacity: .5;
    height: 60%;
  }

  50% {
    opacity: .8;
    height: 75%;
  }
}

.signature-glass-glow {
  position: relative;
}

.signature-glass-glow:after {
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, #fff6 0%, #0000 50%, #fff3 100%);
  border-radius: 0;
  transition: opacity .3s;
  position: absolute;
  inset: -1px;
}

.signature-glass-glow:hover:after {
  opacity: 1;
}

.signature-badge-tag {
  position: relative;
  overflow: hidden;
}

.signature-badge-tag:before {
  content: "";
  background: linear-gradient(90deg, #0000 0%, #fff3 50%, #0000 100%);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.signature-badge-tag:hover:before {
  left: 100%;
}

.header-container {
  width: 100%;
  position: relative;
}

.header-container-default {
  height: 320px;
}

.header-container-tall {
  height: 480px;
}

.header-container-compact {
  height: 200px;
}

.header-container-banner {
  height: 120px;
}

.header-background {
  z-index: 0;
  position: absolute;
  inset: 0;
}

.header-background-image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.header-background-image[src=""] {
  background: linear-gradient(135deg, #3e2bb8 0%, #5739fb 100%);
}

.header-scrim {
  pointer-events: none;
  background: linear-gradient(to top, #0006 0%, #0000 50% 100%);
  position: absolute;
  inset: 0;
}

.header-scrim-heavy {
  background: linear-gradient(to top, #0009 0%, #0000004d 50%, #0000 100%);
}

.header-scrim-light {
  background: linear-gradient(to top, #0003 0%, #0000 50% 100%);
}

.header-content {
  z-index: 10;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 1.5rem;
  display: flex;
  position: relative;
}

@media (width >= 768px) {
  .header-content {
    padding: 2rem;
  }
}

.header-glass-card {
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition: all .3s;
  box-shadow: 0 8px 32px #0000001f;
}

.header-glass-card:hover {
  background: #ffffff26;
}

@media (width >= 768px) {
  .header-glass-card {
    padding: 2rem;
  }
}

.header-content-centered {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.header-title-badge {
  color: #fffc;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
  font-size: .75rem;
  font-weight: 600;
  display: inline-block;
}

.header-title {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.2;
  font-family: var(--font-display);
  margin: 0;
  font-weight: 700;
}

@media (width >= 768px) {
  .header-title {
    font-size: 1.875rem;
  }
}

.header-subtitle {
  color: #fffffff2;
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  margin-top: .25rem;
}

.header-layout-flex {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

@media (width >= 768px) {
  .header-layout-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.header-text-section {
  flex: 1;
}

.header-actions-section {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.header-navigation {
  border-top: 1px solid #fff3;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.header-gradient {
  background: linear-gradient(135deg, #a8c5cb 0%, #6b9fa6 50%, #2c4f7c 100%);
  height: 7rem;
  position: relative;
  overflow: hidden;
}

.header-gradient:before {
  content: "";
  filter: blur(64px);
  background: #ffffff1a;
  border-radius: 50%;
  width: 16rem;
  height: 16rem;
  position: absolute;
  top: 0;
  left: 25%;
}

.header-gradient:after {
  content: "";
  filter: blur(64px);
  background: #2c4f7c33;
  border-radius: 50%;
  width: 12rem;
  height: 12rem;
  position: absolute;
  bottom: 0;
  right: 25%;
}

.header-gradient-grid {
  opacity: .05;
  background-image: radial-gradient(circle, #fff 1px, #0000 1px);
  background-size: 20px 20px;
  position: absolute;
  inset: 0;
}

.header-gradient-content {
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 3rem;
  display: flex;
  position: relative;
}

.header-stats {
  gap: 2rem;
  display: flex;
}

.header-stat-item {
  text-align: right;
  color: #ffffffb3;
  font-size: .875rem;
}

.header-stat-value {
  color: #fff;
  font-weight: 600;
}

.header-stat-label {
  color: #fff9;
  font-size: .75rem;
}

.header-icon-badge {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #fff3;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
}

@media (width <= 767px) {
  .header-container-default {
    height: 240px;
  }

  .header-container-tall {
    height: 320px;
  }

  .header-container-compact {
    height: 160px;
  }

  .header-container-banner {
    height: 100px;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  .header-container-default {
    height: 280px;
  }

  .header-container-tall {
    height: 400px;
  }
}

.header-title, .header-subtitle, .header-title-badge {
  text-shadow: 0 1px 2px #0000001a;
}

.header-glass-card:focus-within {
  outline-offset: 2px;
  outline: 2px solid #ffffff80;
}

.header-background-image {
  animation: .4s ease-out fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-glass-card {
  animation: .5s ease-out slideUpFadeIn;
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-preload-image {
  content: "";
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
}

.header-dark-overlay {
  background: #0000004d;
  position: absolute;
  inset: 0;
}

.header-light-overlay {
  background: #ffffff1a;
  position: absolute;
  inset: 0;
}

@supports ((-webkit-backdrop-filter: none)) {
  .header-glass-card {
    -webkit-backdrop-filter: blur(32px) saturate(180%);
  }
}

@supports not ((-webkit-backdrop-filter: blur(32px)) or (backdrop-filter: blur(32px))) {
  .header-glass-card {
    background: #ffffff40;
  }
}

@media print {
  .header-background-image, .header-scrim, .header-glass-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
  }

  .header-title, .header-subtitle {
    color: #000 !important;
  }
}

.header-bg-journey {
  background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Journey-Optimized.webp?tr=w-1920,f-webp,q-85");
  background-position: center;
  background-size: cover;
}

.header-bg-navicues {
  background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Navicues-Optimized.webp?tr=w-1920,f-webp,q-85");
  background-position: center;
  background-size: cover;
}

.header-bg-wellbeing {
  background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Wellbeing-Optimized.webp?tr=w-1920,f-webp,q-85");
  background-position: center;
  background-size: cover;
}

.header-bg-state {
  background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-State-Optimized.webp?tr=w-1920,f-webp,q-85");
  background-position: center;
  background-size: cover;
}

.header-bg-toolkit {
  background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Toolkit-Optimized.webp?tr=w-1920,f-webp,q-85");
  background-position: center;
  background-size: cover;
}

.header-bg-navigate {
  background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Navigate-Optimized.webp?tr=w-1920,f-webp,q-85");
  background-position: center;
  background-size: cover;
}

.header-bg-momentum {
  background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Momentum-Optimized.webp?tr=w-1920,f-webp,q-85");
  background-position: center;
  background-size: cover;
}

@media (width <= 767px) {
  .header-bg-journey {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Journey-Optimized.webp?tr=w-768,f-webp,q-80");
  }

  .header-bg-navicues {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Navicues-Optimized.webp?tr=w-768,f-webp,q-80");
  }

  .header-bg-wellbeing {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Wellbeing-Optimized.webp?tr=w-768,f-webp,q-80");
  }

  .header-bg-state {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-State-Optimized.webp?tr=w-768,f-webp,q-80");
  }

  .header-bg-toolkit {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Toolkit-Optimized.webp?tr=w-768,f-webp,q-80");
  }

  .header-bg-navigate {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Navigate-Optimized.webp?tr=w-768,f-webp,q-80");
  }

  .header-bg-momentum {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Momentum-Optimized.webp?tr=w-768,f-webp,q-80");
  }
}

@media (width >= 768px) and (width <= 1279px) {
  .header-bg-journey {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Journey-Optimized.webp?tr=w-1280,f-webp,q-82");
  }

  .header-bg-navicues {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Navicues-Optimized.webp?tr=w-1280,f-webp,q-82");
  }

  .header-bg-wellbeing {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Wellbeing-Optimized.webp?tr=w-1280,f-webp,q-82");
  }

  .header-bg-state {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-State-Optimized.webp?tr=w-1280,f-webp,q-82");
  }

  .header-bg-toolkit {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Toolkit-Optimized.webp?tr=w-1280,f-webp,q-82");
  }

  .header-bg-navigate {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Navigate-Optimized.webp?tr=w-1280,f-webp,q-82");
  }

  .header-bg-momentum {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Momentum-Optimized.webp?tr=w-1280,f-webp,q-82");
  }
}

@media (width >= 1280px) {
  .header-bg-journey {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Journey-Optimized.webp?tr=w-1920,f-webp,q-85");
  }

  .header-bg-navicues {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Navicues-Optimized.webp?tr=w-1920,f-webp,q-85");
  }

  .header-bg-wellbeing {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Wellbeing-Optimized.webp?tr=w-1920,f-webp,q-85");
  }

  .header-bg-state {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-State-Optimized.webp?tr=w-1920,f-webp,q-85");
  }

  .header-bg-toolkit {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Toolkit-Optimized.webp?tr=w-1920,f-webp,q-85");
  }

  .header-bg-navigate {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Navigate-Optimized.webp?tr=w-1920,f-webp,q-85");
  }

  .header-bg-momentum {
    background-image: url("https://ik.imagekit.io/recoverlution/Dashboard-Momentum-Optimized.webp?tr=w-1920,f-webp,q-85");
  }
}

.page-header-container {
  background: #fff;
  border-bottom: 1px solid #0000000f;
  width: 100%;
  padding: 1.25rem 0;
}

.page-header-content {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (width >= 768px) {
  .page-header-content {
    padding: 0 2rem;
  }
}

.page-header-left {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.page-header-icon-wrapper {
  background: linear-gradient(135deg, #3e2bb81a 0%, #5739fb1a 100%);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.page-header-icon {
  color: #3e2bb8;
  width: 1.25rem;
  height: 1.25rem;
}

.page-header-title {
  color: #1a1a1a;
  font-family: var(--font-display);
  letter-spacing: -.015em;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

@media (width >= 768px) {
  .page-header-title {
    font-size: 1.5rem;
  }
}

.page-header-subtitle {
  color: #6b7280;
  font-family: var(--font-sans);
  margin: .125rem 0 0;
  font-size: .875rem;
  line-height: 1.4;
}

.content-tile {
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  cursor: pointer;
  background: #ffffffeb;
  border: 1px solid #3e2bb826;
  border-radius: 0;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px #0000000d, inset 0 0 0 1px #ffffff80;
}

.content-tile:hover {
  border-color: #3e2bb840;
  transform: translateY(-4px);
  box-shadow: 0 12px 48px #00000026;
}

.content-tile__image-container {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #3e2bb8 0%, #5739fb 100%);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.content-tile__image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.content-tile:hover .content-tile__image {
  transform: scale(1.05);
}

.content-tile__overlay {
  opacity: 0;
  background: linear-gradient(#0000 0% 40%, #0006 100%);
  transition: opacity .3s;
  position: absolute;
  inset: 0;
}

.content-tile:hover .content-tile__overlay {
  opacity: 1;
}

.content-tile__body {
  padding: var(--spacing-5);
}

.content-tile__eyebrow {
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  display: flex;
}

.content-tile__pillar-label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-secondary);
  font-size: .75rem;
  font-weight: 600;
}

.content-tile__title {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-3) 0;
  letter-spacing: -.01em;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.content-tile__description {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-4) 0;
  opacity: .9;
  font-size: .9375rem;
  line-height: 1.6;
}

.content-tile__meta {
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  display: flex;
}

.content-tile__meta-item {
  align-items: center;
  gap: var(--spacing-1-5);
  font-family: var(--font-sans);
  color: var(--color-text-tertiary);
  font-size: .8125rem;
  font-weight: 500;
  display: flex;
}

.content-tile__meta-item svg {
  opacity: .7;
  width: 14px;
  height: 14px;
}

.article-page {
  background: var(--color-background);
  min-height: 100vh;
  position: relative;
}

.article-progress {
  z-index: 1000;
  background: #3e2bb81a;
  height: 3px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.article-progress__bar {
  background: linear-gradient(90deg, #3e2bb8 0%, #5739fb 100%);
  height: 100%;
  transition: width .1s;
}

.article-hero {
  height: 60vh;
  min-height: 500px;
  max-height: 700px;
  position: relative;
  overflow: hidden;
}

.article-hero__image-wrapper {
  z-index: 0;
  position: absolute;
  inset: 0;
}

.article-hero__image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.article-hero__gradient {
  background: linear-gradient(#0000 0%, #0000004d 60%, #000000b3 100%);
  position: absolute;
  inset: 0;
}

.article-hero__content {
  z-index: 1;
  height: 100%;
  padding: var(--spacing-8) var(--spacing-6);
  flex-direction: column;
  justify-content: flex-end;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.article-hero__eyebrow {
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
  display: flex;
}

.article-hero__eyebrow-text {
  font-family: var(--font-sans);
  color: #ffffffe6;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8125rem;
  font-weight: 600;
}

.article-hero__title {
  font-family: var(--font-display);
  color: #fff;
  margin: 0 0 var(--spacing-3) 0;
  letter-spacing: -.02em;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.2;
}

.article-hero__subtitle {
  font-family: var(--font-sans);
  color: #ffffffe6;
  margin: 0 0 var(--spacing-4) 0;
  max-width: 700px;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.article-hero__badges {
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  display: flex;
}

.article-hero__badge {
  -webkit-backdrop-filter: blur(16px);
  background: #fff3;
  border: 1px solid #ffffff4d;
  border-radius: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  display: flex;
}

.article-hero__badge-text {
  font-family: var(--font-sans);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
}

.article-content {
  max-width: 900px;
  padding: var(--spacing-12) var(--spacing-6);
  background: var(--color-background);
  margin: 0 auto;
}

.article-content p {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-6);
  opacity: .92;
  font-size: 1.125rem;
  line-height: 1.8;
}

.article-content ul, .article-content ol {
  margin: 0 0 var(--spacing-6) 0;
  padding: 0;
  list-style: none;
}

.article-content li {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-3);
  padding-left: var(--spacing-6);
  opacity: .92;
  font-size: 1.125rem;
  line-height: 1.8;
  position: relative;
}

.article-content li:before {
  content: "";
  background: var(--color-brand-primary);
  opacity: .5;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: .7em;
  left: 0;
}

.article-content h2 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 2px solid #3e2bb826;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.article-content h3 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-3);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
}

.article-content h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-2);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.article-quote {
  margin: var(--spacing-6) 0 var(--spacing-10) 0;
  padding-left: var(--spacing-6);
  border-left: 3px solid var(--color-brand-primary);
}

.article-quote__text {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-4) 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.65;
}

.article-quote__author {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.article-quote__source {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  margin: var(--spacing-1) 0 0 0;
  font-size: .875rem;
  font-style: italic;
  font-weight: 400;
}

.article-lead {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  opacity: .92;
  padding-bottom: var(--spacing-6);
  margin-bottom: var(--spacing-8);
  border-bottom: 1px solid #3e2bb81f;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.7;
}

.article-key-point {
  padding: var(--spacing-5);
  margin: var(--spacing-8) 0;
  background: #5739fb0a;
  border: 2px solid #5739fb1f;
  border-radius: 0;
}

.article-key-point__header {
  align-items: flex-start;
  gap: var(--spacing-2-5);
  margin-bottom: var(--spacing-3);
  display: flex;
}

.article-key-point__icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.article-key-point__label {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.article-key-point__content {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  opacity: .9;
  padding-left: calc(20px + var(--spacing-2-5));
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.article-reflection {
  margin: var(--spacing-10) 0;
  padding-left: var(--spacing-6);
  border-left: 3px solid var(--color-brand-primary);
}

.article-reflection__label {
  font-family: var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  margin: 0 0 var(--spacing-3) 0;
  font-size: .8125rem;
  font-weight: 700;
}

.article-reflection__content {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
}

.article-practice {
  margin: var(--spacing-10) 0;
  padding: var(--spacing-8);
  background: #5739fb08;
  border: 1px solid #5739fb1f;
  border-radius: 0;
}

.article-practice__header {
  margin-bottom: var(--spacing-5);
}

.article-practice__label {
  font-family: var(--font-display);
  color: var(--color-brand-primary);
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.article-practice__content {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}

.article-back-button {
  top: calc(72px + var(--spacing-4));
  left: var(--spacing-6);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-2);
  z-index: 100;
  background: #ffffffeb;
  border: 1px solid #3e2bb826;
  border-radius: 0;
  padding: 12px 20px;
  transition: all .2s;
  display: flex;
  position: fixed;
  box-shadow: 0 1px 3px #0000000d, inset 0 0 0 1px #ffffff80;
}

.article-back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px #0000001f;
}

.article-back-button__text {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  font-size: .875rem;
  font-weight: 600;
}

.article-next {
  max-width: 900px;
  padding: var(--spacing-8) var(--spacing-6) var(--spacing-12) var(--spacing-6);
  margin: 0 auto;
}

.article-next__card {
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  padding: var(--spacing-6);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  background: #ffffffeb;
  border: 1px solid #3e2bb826;
  border-radius: 0;
  transition: all .2s;
  display: flex;
  box-shadow: 0 1px 3px #0000000d, inset 0 0 0 1px #ffffff80;
}

.article-next__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px #0000001f;
}

.content-footer {
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  padding: var(--spacing-8) var(--spacing-6);
  margin-top: var(--spacing-12);
  background: #ffffffeb;
  border-top: 1px solid #3e2bb826;
}

.content-footer__container {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.content-footer__text {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  margin: 0;
  font-size: .875rem;
}

.content-footer__brand {
  color: var(--color-brand-primary);
  font-weight: 600;
}

@media (width <= 768px) {
  .article-back-button {
    top: var(--spacing-4);
    left: var(--spacing-4);
  }

  .article-hero {
    min-height: 400px;
  }

  .article-hero__content {
    padding: var(--spacing-6) var(--spacing-4);
  }

  .article-content {
    padding: var(--spacing-8) var(--spacing-4);
  }

  .article-content p, .article-content li {
    font-size: 1rem;
  }

  .article-content h2 {
    font-size: 1.5rem;
  }

  .article-quote__text {
    font-size: 1.125rem;
  }

  .content-tile__body {
    padding: var(--spacing-4);
  }
}

.luma-screen {
  z-index: 9999;
  background: #000;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
}

.luma-overlay-minimal:before {
  content: "";
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(#00000026 0%, #00000040 100%);
  position: absolute;
  inset: 0;
}

.luma-overlay-strong:before {
  content: "";
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(#00000080 0%, #000000b3 100%);
  position: absolute;
  inset: 0;
}

.luma-overlay-voice:before {
  content: "";
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(135deg, #3e2bb866 0%, #5739fb4d 50%, #00000080 100%);
  position: absolute;
  inset: 0;
}

.luma-overlay-talk:before {
  content: "";
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(135deg, #5739fb59 0%, #7c67ff40 50%, #00000080 100%);
  position: absolute;
  inset: 0;
}

.luma-container {
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (width >= 640px) {
  .luma-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (width >= 1024px) {
  .luma-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.luma-glass {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 0;
}

.luma-glass-dark {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #0006;
  border: 1px solid #ffffff1a;
  border-radius: 0;
}

.luma-voice {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: linear-gradient(to bottom right, #3e2bb833, #5739fb1a);
  border: 1px solid #ffffff1a;
  border-radius: 0;
  padding: 16px 20px;
}

.luma-voice-message {
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  background: linear-gradient(135deg, #3e2bb826 0%, #5739fb14 100%);
  border-top: 1px solid #5739fb33;
  border-bottom: 1px solid #5739fb1a;
  padding: 24px;
  position: relative;
}

.luma-voice-message:before {
  content: "";
  background: linear-gradient(90deg, #0000 0%, #5739fb66 50%, #0000 100%);
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 12px #5739fb4d;
}

.luma-user {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #ffffff1a;
  border: 1px solid #ffffff1a;
  border-radius: 0;
  padding: 16px 20px;
  transition: all .2s;
}

.luma-user:hover {
  background: #ffffff26;
}

.luma-top-nav {
  justify-content: space-between;
  align-items: center;
  padding: 24px 16px;
  display: flex;
}

@media (width >= 640px) {
  .luma-top-nav {
    padding: 24px;
  }
}

@media (width >= 1024px) {
  .luma-top-nav {
    padding: 24px 32px;
  }
}

.luma-context-tile {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  cursor: pointer;
  background: #0006;
  border: 1px solid #fff3;
  border-radius: 0;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  transition: all .2s;
  display: flex;
}

.luma-context-tile:hover {
  background: #0009;
}

.luma-context-tile-selected {
  cursor: pointer;
  background: linear-gradient(to right, #3e2bb84d, #5739fb33);
  border: 1px solid #3e2bb880;
  border-radius: 0;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  display: flex;
}

.luma-message-bubble {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #ffffff1a;
  border: 1px solid #ffffff1a;
  border-radius: 0;
  padding: 16px 20px;
}

.luma-header {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #0006;
  border-bottom: 1px solid #ffffff1a;
}

.luma-toolbar {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #0003;
  border-bottom: 1px solid #ffffff1a;
}

.luma-footer {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #0006;
  border-top: 1px solid #ffffff1a;
}

.luma-divider {
  border-color: #ffffff1a;
}

.luma-icon-button {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: #fff9;
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: all .2s;
  display: flex;
}

.luma-icon-button:hover {
  color: #fff;
  background: #fff3;
}

.luma-icon-button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.luma-icon-button-sm {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: #fff9;
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: all .2s;
  display: flex;
}

.luma-icon-button-sm:hover {
  color: #fff;
  background: #fff3;
}

.luma-icon-button-sm-highlight {
  color: #fff !important;
  background: #3e2bb84d !important;
  border-color: #5739fb80 !important;
}

.luma-icon-button-xs {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: #fff9;
  background: #0006;
  border: 1px solid #fff3;
  border-radius: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  transition: all .2s;
  display: flex;
}

.luma-icon-button-xs:hover {
  color: #fff;
  background: #0009;
}

.luma-icon-button-xs:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.luma-button {
  font-family: var(--font-display);
  color: #fff;
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 0;
  padding: 12px 24px;
  font-weight: 600;
  transition: all .2s;
}

.luma-button:hover {
  background: #fff3;
  box-shadow: 0 0 20px #ffffff1a;
}

.luma-button-primary {
  font-family: var(--font-display);
  color: #fff;
  background: linear-gradient(to right, #3e2bb8, #5739fb);
  border: none;
  border-radius: 0;
  padding: 12px 24px;
  font-weight: 600;
  transition: all .2s;
}

.luma-button-primary:hover {
  box-shadow: 0 0 20px #3e2bb84d;
}

.luma-toggle {
  font-family: var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff6;
  background: none;
  border: none;
  border-radius: 0;
  padding: 8px 16px;
  font-size: .6875rem;
  font-weight: 600;
  transition: all .2s;
}

.luma-toggle:hover {
  color: #fff9;
}

.luma-toggle-active {
  font-family: var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: #fff3;
  border: none;
  border-radius: 0;
  padding: 8px 16px;
  font-size: .6875rem;
  font-weight: 600;
}

.luma-toggle-rescue {
  font-family: var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff6;
  background: none;
  border: none;
  border-radius: 0;
  padding: 8px 16px;
  font-size: .6875rem;
  font-weight: 600;
  transition: all .2s;
}

.luma-toggle-rescue:hover {
  color: #ff646499;
}

.luma-toggle-rescue-active {
  font-family: var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fecaca;
  background: #ef444433;
  border: 1px solid #ef44444d;
  border-radius: 0;
  padding: 8px 16px;
  font-size: .6875rem;
  font-weight: 600;
}

.luma-option {
  color: #fff9;
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  border-radius: 0;
  padding: 10px 12px;
  transition: all .2s;
}

.luma-option:hover {
  color: #fff;
  background: #ffffff1a;
}

.luma-option-selected {
  color: #fff;
  background: linear-gradient(to right, #3e2bb84d, #5739fb33);
  border: 1px solid #3e2bb880;
  border-radius: 0;
  padding: 10px 12px;
}

.luma-prompt {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  text-align: left;
  font-family: var(--font-sans);
  color: #fff;
  background: #0006;
  border: 1px solid #fff3;
  border-radius: 0;
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  line-height: 1.5;
  transition: all .2s;
}

.luma-prompt:hover {
  background: #0009;
}

.luma-back-button {
  font-family: var(--font-display);
  color: #fff9;
  background: none;
  border: none;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: color .2s;
  display: flex;
}

.luma-back-button:hover {
  color: #fff;
}

.luma-voice-text {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.7;
}

.luma-body-text {
  font-family: var(--font-sans);
  letter-spacing: .01em;
  color: #fffc;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.luma-title {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.luma-title-lg {
  font-family: var(--font-display);
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}

.luma-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff9;
  font-size: .6875rem;
  font-weight: 600;
}

.luma-section-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff6;
  font-size: .75rem;
  font-weight: 600;
}

.luma-subtitle {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.luma-button-secondary {
  font-family: var(--font-display);
  color: #fff9;
  background: none;
  border: 1px solid #fff3;
  border-radius: 0;
  padding: 12px 24px;
  font-weight: 600;
  transition: all .2s;
}

.luma-button-secondary:hover {
  color: #fff;
  background: #ffffff0d;
}

.luma-input {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  font-family: var(--font-sans);
  color: #fff;
  resize: none;
  background: #0006;
  border: 1px solid #fff3;
  border-radius: 0;
  padding: 12px 16px;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .2s;
}

.luma-input::placeholder {
  color: #fff6;
}

.luma-input:focus {
  background: #0009;
  border-color: #fff6;
  outline: none;
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.luma-pillar-dot {
  border-radius: 0;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.luma-queue-dot {
  background: #fff6;
  border-radius: 0;
  width: 6px;
  height: 6px;
}

.luma-loading-dot {
  background: #fff6;
  border-radius: 9999px;
  width: 8px;
  height: 8px;
  animation: 1.5s ease-in-out infinite pulse;
}

.luma-separator {
  color: #ffffff4d;
}

.luma-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0000004d;
}

.luma-hover-glow:hover {
  box-shadow: 0 0 20px #ffffff1a;
}

@media (width <= 640px) {
  .luma-voice-text, .luma-body-text {
    font-size: 1rem;
  }

  .luma-title {
    font-size: 1.25rem;
  }
}

.journey-main-headline {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--era-experience) 0%, var(--era-recognize) 50%, var(--era-align) 100%);
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-clip: text;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.15;
  position: relative;
}

.journey-subheadline {
  font-family: var(--font-display);
  letter-spacing: -.015em;
  color: #fff;
  text-shadow: 0 2px 12px #0006;
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
}

.journey-body {
  font-family: var(--font-sans);
  color: #fffffff2;
  text-shadow: 0 1px 4px #0000004d;
  letter-spacing: .01em;
  font-size: clamp(1.0625rem, 2.5vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.75;
}

.journey-label {
  font-family: var(--font-sans);
  color: #ffffffeb;
  text-shadow: 0 1px 3px #00000040;
  letter-spacing: .015em;
  font-size: clamp(1rem, 2.25vw, 1.125rem);
  font-weight: 500;
  line-height: 1.6;
}

.journey-small {
  font-family: var(--font-sans);
  color: #ffffffd9;
  text-shadow: 0 1px 2px #0003;
  font-size: clamp(.875rem, 2vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
}

.journey-era-badge {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  -webkit-backdrop-filter: blur(30px);
  background: linear-gradient(135deg, #ffffff2e 0%, #ffffff1a 100%);
  border: 1px solid #fff3;
  align-items: center;
  gap: .625rem;
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
  padding: .625rem 1.25rem;
  font-size: clamp(.75rem, 1.75vw, .875rem);
  font-weight: 600;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: inline-flex;
  box-shadow: 0 4px 16px #0003, inset 0 1px #ffffff40;
}

.journey-era-badge:hover {
  background: linear-gradient(135deg, #ffffff38 0%, #ffffff24 100%);
  border-color: #ffffff47;
  transform: translateY(-1px);
}

.journey-era-badge[data-phase="experience"] {
  background: linear-gradient(135deg, var(--era-experience-glow) 0%, var(--era-experience-light) 100%);
  border-left: 3px solid var(--era-experience);
  box-shadow: 0 4px 16px #8b7dff33, inset 0 1px #ffffff40;
}

.journey-era-badge[data-phase="recognize"] {
  background: linear-gradient(135deg, var(--era-recognize-glow) 0%, var(--era-recognize-light) 100%);
  border-left: 3px solid var(--era-recognize);
  box-shadow: 0 4px 16px #5739fb33, inset 0 1px #ffffff40;
}

.journey-era-badge[data-phase="align"], .journey-era-badge[data-phase="integrate"] {
  background: linear-gradient(135deg, var(--era-align-glow) 0%, var(--era-align-light) 100%);
  border-left: 3px solid var(--era-align);
  box-shadow: 0 4px 16px #3e2bb833, inset 0 1px #ffffff40;
}

.journey-era-badge[data-phase="flow"] {
  background: linear-gradient(135deg, #ffffff2e 0%, #ffffff1a 100%);
  border-left: 3px solid #fff6;
  box-shadow: 0 4px 16px #ffffff26, inset 0 1px #ffffff40;
}

.journey-era-icon {
  opacity: .95;
  filter: drop-shadow(0 1px 2px #0000004d);
  width: 16px;
  height: 16px;
}

.journey-primary-card {
  -webkit-backdrop-filter: blur(50px);
  background: linear-gradient(135deg, #ffffff38 0%, #ffffff24 50%, #ffffff1a 100%), radial-gradient(circle at 30% 20%, #5739fb26 0%, #0000 60%);
  border: 1px solid #ffffff47;
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4rem);
  transition: all .6s cubic-bezier(.16, 1, .3, 1);
  position: relative;
  box-shadow: 0 12px 48px #0000004d, inset 0 1px #ffffff59, 0 6px 20px #5739fb2e;
}

.journey-content-section {
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(135deg, #0000001f 0%, #0000000f 100%);
  border: 1px solid #ffffff1a;
  border-radius: 4px;
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
  padding: clamp(1.5rem, 4vw, 2rem);
}

.journey-content-section:last-child {
  margin-bottom: 0;
}

.journey-context-text {
  font-family: var(--font-sans);
  color: #ffffffeb;
  text-shadow: 0 1px 3px #00000040;
  letter-spacing: .01em;
  opacity: .95;
  margin-bottom: clamp(2rem, 5vw, 2.5rem);
  font-size: clamp(1.0625rem, 2.5vw, 1.125rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.8;
}

.journey-instruction-text {
  font-family: var(--font-sans);
  color: #fffffff5;
  text-shadow: 0 1px 4px #0000004d;
  letter-spacing: .01em;
  font-size: clamp(1.0625rem, 2.5vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.75;
}

.journey-reflection-wrapper {
  margin-top: clamp(2rem, 5vw, 3rem);
}

.journey-reflection-label {
  font-family: var(--font-sans);
  color: #fffffff2;
  text-shadow: 0 1px 3px #00000040;
  letter-spacing: .015em;
  margin-bottom: clamp(1rem, 3vw, 1.25rem);
  font-size: clamp(1rem, 2.25vw, 1.125rem);
  font-weight: 500;
  display: block;
}

.journey-reflection-textarea {
  -webkit-backdrop-filter: blur(40px);
  width: 100%;
  min-height: 160px;
  font-family: var(--font-sans);
  color: #fff;
  letter-spacing: .015em;
  resize: vertical;
  background: linear-gradient(135deg, #ffffff1f 0%, #ffffff14 100%);
  border: 1px solid #ffffff38;
  border-radius: 4px;
  padding: clamp(1.25rem, 4vw, 1.5rem);
  font-size: clamp(1rem, 2.25vw, 1.0625rem);
  line-height: 1.75;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: inset 0 2px 8px #00000026, 0 2px 8px #0000001a;
}

.journey-btn {
  cursor: pointer;
  width: 100%;
  font-family: var(--font-display);
  letter-spacing: .015em;
  border: none;
  padding: clamp(1rem, 3.5vw, 1.25rem) clamp(2rem, 6vw, 3rem);
  font-size: clamp(1rem, 2.25vw, 1.125rem);
  font-weight: 600;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.journey-btn-primary {
  -webkit-backdrop-filter: blur(50px);
  color: #fff;
  text-shadow: 0 2px 6px #00000059;
  background: linear-gradient(135deg, #ffffff47 0%, #ffffff2e 100%);
  border: 1px solid #ffffff59;
  box-shadow: 0 8px 32px #00000047, inset 0 1px #ffffff73, 0 4px 16px #5739fb33;
}

.journey-btn-secondary {
  -webkit-backdrop-filter: blur(40px);
  color: #fff;
  text-shadow: 0 1px 3px #00000040;
  background: linear-gradient(135deg, #ffffff1f 0%, #ffffff14 100%);
  border: 1px solid #ffffff38;
  box-shadow: 0 4px 16px #0003, inset 0 1px #ffffff40;
}

.journey-btn-secondary:hover {
  background: linear-gradient(135deg, #ffffff2e 0%, #ffffff1f 100%);
  border-color: #ffffff47;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px #00000040, inset 0 1px #ffffff4d;
}

.journey-btn-secondary:active {
  transform: translateY(0);
}

.journey-progress-wrapper {
  align-items: center;
  gap: .75rem;
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
  display: flex;
}

.journey-progress-dot {
  background: linear-gradient(135deg, #fff 0%, #fffc 100%);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 12px #fff9, 0 0 24px #ffffff4d;
}

.journey-progress-text {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #ffffffd9;
  text-shadow: 0 1px 3px #00000040;
  font-size: clamp(.8125rem, 1.75vw, .9375rem);
  font-weight: 600;
}

.journey-completion-icon-wrapper {
  width: clamp(5rem, 14vw, 6.25rem);
  height: clamp(5rem, 14vw, 6.25rem);
  margin: 0 auto clamp(2rem, 6vw, 2.5rem);
  position: relative;
}

.journey-completion-pulse {
  background: linear-gradient(135deg, var(--era-align-glow) 0%, var(--era-align-light) 100%);
  border-radius: 50%;
  animation: 2.5s ease-out infinite journey-completion-ripple;
  position: absolute;
  inset: 0;
}

@keyframes journey-completion-ripple {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}

.journey-completion-icon {
  -webkit-backdrop-filter: blur(50px);
  color: #fff;
  border: 2px solid var(--era-align);
  background: linear-gradient(135deg, #ffffff47 0%, #ffffff2e 100%);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: clamp(2rem, 5vw, 2.5rem);
  display: flex;
  position: relative;
  box-shadow: 0 8px 32px #3e2bb84d, inset 0 1px #ffffff73, 0 0 40px #3e2bb833;
}

.journey-completion-message {
  font-family: var(--font-sans);
  color: #fffffff2;
  text-shadow: 0 1px 4px #0000004d;
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(2.5rem, 7vw, 3.5rem);
  font-size: clamp(1.0625rem, 2.5vw, 1.1875rem);
  line-height: 1.75;
}

@media (width >= 640px) {
  .journey-primary-card {
    max-width: 800px;
  }

  .journey-reflection-textarea {
    min-height: 200px;
  }
}

@media (width >= 1024px) {
  .journey-primary-card {
    max-width: 900px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-completion-pulse, .journey-progress-dot {
    animation: none !important;
  }

  .journey-btn-primary:hover, .journey-btn-secondary:hover {
    transform: none;
  }

  * {
    transition-duration: .01ms !important;
  }
}

.journey-btn:focus-visible, .journey-reflection-textarea:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #5739fb80;
}

@media print {
  .journey-primary-card {
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    page-break-inside: avoid;
    background: #fff;
    border: 1px solid #e5e7eb;
  }

  .journey-main-headline, .journey-subheadline, .journey-body, .journey-context-text, .journey-instruction-text {
    color: #1a1a1a;
    text-shadow: none;
  }

  .journey-btn {
    display: none;
  }
}

.journey-immersive-container {
  background: #000;
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.journey-background {
  z-index: 0;
  animation: 8s ease-in-out infinite journey-background-subtle-pulse;
  position: absolute;
  inset: 0;
}

@keyframes journey-background-subtle-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .95;
  }
}

.journey-nav {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 3.5vw, 28px);
  animation: .6s cubic-bezier(.16, 1, .3, 1) journey-nav-slide-down;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

@keyframes journey-nav-slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.journey-nav-back {
  -webkit-backdrop-filter: blur(50px);
  color: #fff;
  cursor: pointer;
  letter-spacing: .012em;
  text-shadow: 0 2px 6px #00000059;
  background: linear-gradient(135deg, #ffffff38 0%, #ffffff24 50%, #ffffff1a 100%), radial-gradient(circle at 30% 20%, #5739fb26 0%, #0000 60%);
  border: 1px solid #ffffff47;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: .875rem;
  font-weight: 600;
  transition: all .3s cubic-bezier(.16, 1, .3, 1);
  display: flex;
  box-shadow: 0 8px 32px #00000047, inset 0 1px #ffffff59, 0 4px 16px #5739fb2e;
}

.journey-nav-back:hover {
  background: linear-gradient(135deg, #ffffff47 0%, #ffffff2e 50%, #ffffff24 100%);
  border-color: #ffffff59;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px #00000052, inset 0 1px #ffffff6b, 0 6px 20px #5739fb3d;
}

.journey-nav-back:active {
  transform: translateY(0);
}

.journey-nav-badge {
  -webkit-backdrop-filter: blur(30px);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .09em;
  background: linear-gradient(135deg, #3e2bb8 0%, #5739fb 100%);
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: .75rem;
  font-weight: 600;
  display: flex;
  box-shadow: 0 4px 20px #3e2bb859, inset 0 1px #fff3;
}

.journey-nav-badge-mobile {
  display: inline;
}

.journey-nav-badge-desktop {
  display: none;
}

.journey-content {
  z-index: 1;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: clamp(100px, 14vh, 140px) clamp(24px, 5.5vw, 48px) clamp(60px, 10vh, 80px);
  display: flex;
  position: relative;
}

.journey-card {
  -webkit-backdrop-filter: blur(50px);
  opacity: 0;
  background: linear-gradient(135deg, #ffffff38 0%, #ffffff24 50%, #ffffff1a 100%), radial-gradient(circle at 30% 20%, #5739fb26 0%, #0000 60%);
  border: 1px solid #ffffff47;
  width: 100%;
  max-width: 740px;
  padding: clamp(48px, 7vw, 64px);
  transition: all .6s cubic-bezier(.16, 1, .3, 1);
  position: relative;
  transform: translateY(30px)scale(.97);
  box-shadow: 0 12px 48px #0000004d, inset 0 1px #ffffff59, 0 6px 20px #5739fb2e;
}

.journey-card.journey-reveal {
  opacity: 1;
  transform: translateY(0)scale(1);
}

.journey-card-welcome {
  text-align: center;
  overflow: hidden;
}

.journey-welcome-glow {
  pointer-events: none;
  background: radial-gradient(circle, #5739fb26 0%, #0000 70%);
  width: 300px;
  height: 300px;
  animation: 4s ease-in-out infinite journey-glow-pulse;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes journey-glow-pulse {
  0%, 100% {
    opacity: .6;
    transform: translateX(-50%)scale(1);
  }

  50% {
    opacity: .9;
    transform: translateX(-50%)scale(1.1);
  }
}

.journey-stagger-1 {
  animation: .8s cubic-bezier(.16, 1, .3, 1) .1s both journey-fade-in-up;
}

.journey-stagger-2 {
  animation: .8s cubic-bezier(.16, 1, .3, 1) .25s both journey-fade-in-up;
}

.journey-stagger-3 {
  animation: .8s cubic-bezier(.16, 1, .3, 1) .4s both journey-fade-in-up;
}

.journey-stagger-4 {
  animation: .8s cubic-bezier(.16, 1, .3, 1) .55s both journey-fade-in-up;
}

.journey-stagger-5 {
  animation: .8s cubic-bezier(.16, 1, .3, 1) .7s both journey-fade-in-up;
}

@keyframes journey-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.journey-title-xl, .journey-title-experience, .journey-title-context, .journey-title-complete {
  color: #fff;
  letter-spacing: -.025em;
  margin: 0 0 20px;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.15;
}

.journey-phase-indicator {
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 4vw, 28px);
  display: flex;
}

.journey-phase-dot {
  background: linear-gradient(135deg, #fff 0%, #fffc 100%);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 2s ease-in-out infinite journey-dot-pulse;
  box-shadow: 0 0 12px #fff9, 0 0 24px #ffffff4d;
}

@keyframes journey-dot-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .7;
    transform: scale(.9);
  }
}

.journey-phase-text {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #ffffffd9;
  text-shadow: 0 1px 3px #00000040;
  font-size: clamp(.8125rem, 1.75vw, .9375rem);
  font-weight: 600;
}

.journey-phase-badge {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  -webkit-backdrop-filter: blur(30px);
  background: linear-gradient(135deg, #fff3 0%, #ffffff1f 100%);
  border: 1px solid #ffffff40;
  margin-bottom: clamp(24px, 5vw, 32px);
  padding: 8px 20px;
  font-size: clamp(.75rem, 1.5vw, .875rem);
  font-weight: 600;
  display: inline-block;
  box-shadow: 0 4px 16px #0003, inset 0 1px #ffffff4d;
}

.journey-phase-badge[data-phase="experience"] {
  background: linear-gradient(135deg, #2ecc7140 0%, #2ecc7126 100%);
  border-color: #2ecc7159;
}

.journey-phase-badge[data-phase="recognize"] {
  background: linear-gradient(135deg, #f39c1240 0%, #f39c1226 100%);
  border-color: #f39c1259;
}

.journey-phase-badge[data-phase="align"], .journey-phase-badge[data-phase="integrate"] {
  background: linear-gradient(135deg, #9b59b640 0%, #9b59b626 100%);
  border-color: #9b59b659;
}

.journey-narrator-wrapper {
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(135deg, #00000026 0%, #00000014 100%);
  border: 1px solid #ffffff1f;
  border-radius: 4px;
  margin-bottom: clamp(40px, 7vw, 56px);
  padding: clamp(24px, 5vw, 32px);
  box-shadow: inset 0 1px #ffffff14;
}

.journey-reflection {
  margin-bottom: clamp(32px, 6vw, 48px);
}

.journey-reflection-label {
  color: #fffffff2;
  letter-spacing: .015em;
  text-shadow: 0 1px 3px #00000040;
  margin-bottom: clamp(16px, 3.5vw, 20px);
  font-size: clamp(1rem, 2.25vw, 1.125rem);
  font-weight: 500;
  display: block;
}

.journey-reflection-input-wrapper {
  position: relative;
}

.journey-reflection-textarea {
  -webkit-backdrop-filter: blur(40px);
  color: #fff;
  resize: vertical;
  letter-spacing: .015em;
  background: linear-gradient(135deg, #ffffff1f 0%, #ffffff14 100%);
  border: 1px solid #ffffff38;
  border-radius: 4px;
  width: 100%;
  min-height: 140px;
  padding: clamp(20px, 4vw, 24px);
  font-family: inherit;
  font-size: clamp(1rem, 2.25vw, 1.0625rem);
  line-height: 1.75;
  transition: all .3s cubic-bezier(.16, 1, .3, 1);
  box-shadow: inset 0 2px 8px #00000026, 0 2px 8px #0000001a;
}

.journey-reflection-textarea::placeholder {
  color: #ffffff73;
  font-style: italic;
}

.journey-reflection-textarea:focus {
  background: linear-gradient(135deg, #ffffff29 0%, #ffffff1a 100%);
  border-color: #ffffff59;
  outline: none;
  box-shadow: inset 0 2px 8px #00000026, 0 0 0 3px #5739fb26, 0 4px 12px #5739fb33;
}

.journey-reflection-underline {
  opacity: 0;
  background: linear-gradient(90deg, #0000 0%, #5739fb99 50%, #0000 100%);
  height: 2px;
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.journey-reflection-textarea:focus ~ .journey-reflection-underline {
  opacity: 1;
  transform: scaleX(1);
}

.journey-btn {
  cursor: pointer;
  letter-spacing: .02em;
  border: none;
  justify-content: center;
  align-items: center;
  padding: clamp(17px, 3.5vw, 20px) clamp(40px, 7vw, 56px);
  font-size: .875rem;
  font-weight: 600;
  transition: all .3s cubic-bezier(.16, 1, .3, 1);
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.journey-btn:before {
  content: "";
  background: #ffffff1f;
  border-radius: 50%;
  width: 0;
  height: 0;
  transition: width .6s, height .6s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.journey-btn:hover:before {
  width: 300px;
  height: 300px;
}

.journey-btn-primary {
  -webkit-backdrop-filter: blur(50px);
  color: #fff;
  text-shadow: 0 2px 6px #00000040;
  z-index: 1;
  background: linear-gradient(135deg, #ffffff38 0%, #ffffff29 100%);
  border: 1px solid #ffffff4d;
  position: relative;
  box-shadow: 0 8px 32px #0000003d, inset 0 1px #fff6, 0 4px 16px #5739fb26;
}

.journey-btn-primary span {
  z-index: 2;
  position: relative;
}

.journey-btn-primary:hover {
  background: linear-gradient(135deg, #ffffff47 0%, #fff3 100%);
  border-color: #fff6;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px #00000047, inset 0 1px #ffffff80, 0 6px 20px #5739fb33;
}

.journey-btn-primary:active {
  transform: translateY(0);
}

.journey-success-wrapper {
  width: clamp(80px, 14vw, 100px);
  height: clamp(80px, 14vw, 100px);
  margin: 0 auto clamp(32px, 6vw, 40px);
  position: relative;
}

.journey-success-pulse {
  background: linear-gradient(135deg, #2ecc7140 0%, #2ecc7126 100%);
  border-radius: 50%;
  animation: 2s ease-out infinite journey-success-ripple;
  position: absolute;
  inset: 0;
}

@keyframes journey-success-ripple {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

.journey-success-icon {
  -webkit-backdrop-filter: blur(50px);
  color: #fff;
  background: linear-gradient(135deg, #ffffff47 0%, #ffffff2e 100%);
  border: 2px solid #2ecc7166;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: clamp(2rem, 5vw, 2.5rem);
  animation: 3s ease-in-out infinite journey-success-float;
  display: flex;
  position: relative;
  box-shadow: 0 8px 32px #2ecc7140, inset 0 1px #ffffff73, 0 0 40px #2ecc7126;
}

@keyframes journey-success-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.journey-message {
  color: #fffffff2;
  text-shadow: 0 1px 4px #0000004d;
  max-width: 560px;
  margin-bottom: clamp(40px, 7vw, 56px);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.0625rem, 2.5vw, 1.1875rem);
  line-height: 1.75;
}

@media (width >= 640px) {
  .journey-nav-badge {
    padding: 11px 20px;
    font-size: .8125rem;
  }

  .journey-nav-badge-mobile {
    display: none;
  }

  .journey-nav-badge-desktop {
    display: inline;
  }

  .journey-card {
    max-width: 740px;
  }

  .journey-card-welcome {
    max-width: 720px;
  }

  .journey-card-experience {
    max-width: 800px;
  }

  .journey-card-complete {
    max-width: 680px;
  }

  .journey-reflection-textarea {
    min-height: 180px;
  }
}

@media (width >= 1024px) {
  .journey-nav {
    padding: 28px 40px;
  }

  .journey-nav-back {
    padding: 12px 22px;
    font-size: .9375rem;
  }

  .journey-card {
    max-width: 840px;
  }

  .journey-card-experience {
    max-width: 900px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-card, .journey-stagger-1, .journey-stagger-2, .journey-stagger-3, .journey-stagger-4, .journey-stagger-5, .journey-nav, .journey-background, .journey-success-icon, .journey-success-pulse, .journey-phase-dot, .journey-welcome-glow {
    transition-duration: .01ms !important;
    animation: none !important;
  }

  .journey-card.journey-reveal {
    opacity: 1;
    transform: none;
  }
}

:root {
  --spacing-unit: 8px;
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-7: 56px;
  --spacing-8: 64px;
  --spacing-9: 72px;
  --spacing-10: 80px;
  --spacing-12: 96px;
  --padding-page-mobile: var(--spacing-4) var(--spacing-3) var(--spacing-12);
  --padding-page-desktop: var(--spacing-6) var(--spacing-4) var(--spacing-12);
  --padding-hero-mobile: var(--spacing-5) var(--spacing-3);
  --padding-hero-desktop: var(--spacing-8) var(--spacing-6);
  --padding-card-mobile: var(--spacing-4) var(--spacing-3);
  --padding-card-desktop: var(--spacing-6) var(--spacing-6);
  --gap-tight: var(--spacing-2);
  --gap-normal: var(--spacing-3);
  --gap-relaxed: var(--spacing-4);
  --gap-loose: var(--spacing-6);
  --type-eyebrow-size: .6875rem;
  --type-eyebrow-weight: 700;
  --type-eyebrow-spacing: .15em;
  --type-eyebrow-transform: uppercase;
  --type-hero-headline-size-mobile: 1.75rem;
  --type-hero-headline-size-desktop: 2.25rem;
  --type-hero-headline-weight: 600;
  --type-hero-headline-line-height: 1.15;
  --type-hero-headline-spacing: -.025em;
  --type-section-headline-size-mobile: 1.5rem;
  --type-section-headline-size-desktop: 1.625rem;
  --type-section-headline-weight: 600;
  --type-section-headline-line-height: 1.25;
  --type-section-headline-spacing: -.02em;
  --type-body-hero-size-mobile: .875rem;
  --type-body-hero-size-desktop: 1rem;
  --type-body-hero-weight: 400;
  --type-body-hero-line-height: 1.7;
  --type-body-hero-spacing: .002em;
  --type-body-hero-opacity: .95;
  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-line-height: 1.6;
  --type-body-spacing: 0;
  --type-small-size: .875rem;
  --type-small-weight: 400;
  --type-small-line-height: 1.5;
  --type-tiny-size: .75rem;
  --type-tiny-weight: 500;
  --type-tiny-line-height: 1.4;
  --shadow-card-subtle: 0 1px 3px #0000000d;
  --shadow-card-default: 0 4px 12px #00000014;
  --shadow-card-elevated: 0 8px 32px #0000001f;
  --shadow-card-hero: 0 8px 32px #0000001f, 0 20px 60px #3e2bb81a;
  --shadow-glass-subtle: 0 1px 3px #0000000d, 0 0 0 1px #ffffff80 inset;
  --shadow-glass-elevated: 0 4px 12px #00000014, 0 0 0 1px #ffffff80 inset;
  --glass-bg-light: #ffffff1a;
  --glass-bg-medium: #ffffff2e;
  --glass-bg-strong: #ffffff40;
  --glass-border-subtle: 1px solid #ffffff26;
  --glass-border-default: 1px solid #ffffff40;
  --glass-border-strong: 1px solid #fff6;
  --glass-blur-light: blur(20px);
  --glass-blur-default: blur(30px);
  --glass-blur-heavy: blur(48px);
  --bg-page-gradient: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
  --bg-white: #fff;
  --bg-subtle: #f9fafb;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --transition-fast: all .15s ease;
  --transition-default: all .2s ease;
  --transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);
}

@layer components {
  .text-eyebrow {
    font-family: var(--font-display);
    font-size: var(--type-eyebrow-size);
    font-weight: var(--type-eyebrow-weight);
    letter-spacing: var(--type-eyebrow-spacing);
    text-transform: var(--type-eyebrow-transform);
    margin: 0;
  }

  .text-hero-headline {
    font-family: var(--font-display);
    font-size: var(--type-hero-headline-size-mobile);
    font-weight: var(--type-hero-headline-weight);
    line-height: var(--type-hero-headline-line-height);
    letter-spacing: var(--type-hero-headline-spacing);
    margin: 0;
  }

  @media (width >= 768px) {
    .text-hero-headline {
      font-size: var(--type-hero-headline-size-desktop);
    }
  }

  .text-section-headline {
    font-family: var(--font-display);
    font-size: var(--type-section-headline-size-mobile);
    font-weight: var(--type-section-headline-weight);
    line-height: var(--type-section-headline-line-height);
    letter-spacing: var(--type-section-headline-spacing);
    margin: 0;
  }

  @media (width >= 768px) {
    .text-section-headline {
      font-size: var(--type-section-headline-size-desktop);
    }
  }

  .text-body-hero {
    font-family: var(--font-sans);
    font-size: var(--type-body-hero-size-mobile);
    font-weight: var(--type-body-hero-weight);
    line-height: var(--type-body-hero-line-height);
    letter-spacing: var(--type-body-hero-spacing);
    opacity: var(--type-body-hero-opacity);
    margin: 0;
  }

  @media (width >= 768px) {
    .text-body-hero {
      font-size: var(--type-body-hero-size-desktop);
    }
  }

  .text-body {
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line-height);
    letter-spacing: var(--type-body-spacing);
    margin: 0;
  }

  .card-hero {
    border-radius: var(--radius-none);
    box-shadow: var(--shadow-card-hero);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .card-hero-content {
    z-index: 2;
    padding: var(--padding-hero-mobile);
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    display: flex;
    position: relative;
  }

  @media (width >= 768px) {
    .card-hero-content {
      padding: var(--padding-hero-desktop);
    }
  }

  .card-content {
    background: var(--bg-white);
    border-radius: var(--radius-none);
    box-shadow: var(--shadow-card-default);
    padding: var(--padding-card-mobile);
    position: relative;
    overflow: hidden;
  }

  @media (width >= 768px) {
    .card-content {
      padding: var(--padding-card-desktop);
    }
  }

  .btn-glass {
    align-items: center;
    gap: var(--spacing-2);
    background: var(--glass-bg-medium);
    -webkit-backdrop-filter: var(--glass-blur-default);
    border: var(--glass-border-default);
    color: #fff;
    border-radius: var(--radius-none);
    font-family: var(--font-display);
    letter-spacing: .02em;
    cursor: pointer;
    transition: var(--transition-default);
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
  }

  .btn-glass:hover {
    background: #ffffff47;
    border-color: #fff6;
  }

  .btn-glass:active {
    transform: translateY(1px);
  }

  .btn-glass-sm {
    padding: 14px 28px;
    font-size: .875rem;
  }

  .btn-glass-lg {
    padding: 18px 40px;
    font-size: 1rem;
  }

  .page-content {
    background: var(--bg-page-gradient);
    padding: var(--padding-page-mobile);
    flex: 1;
    overflow-y: auto;
  }

  @media (width >= 768px) {
    .page-content {
      padding: var(--padding-page-desktop);
    }
  }

  .content-container {
    max-width: 1120px;
    margin: 0 auto;
  }

  .gap-tight {
    gap: var(--gap-tight);
  }

  .gap-normal {
    gap: var(--gap-normal);
  }

  .gap-relaxed {
    gap: var(--gap-relaxed);
  }

  .gap-loose {
    gap: var(--gap-loose);
  }

  .p-1 {
    padding: var(--spacing-1);
  }

  .p-2 {
    padding: var(--spacing-2);
  }

  .p-3 {
    padding: var(--spacing-3);
  }

  .p-4 {
    padding: var(--spacing-4);
  }

  .p-5 {
    padding: var(--spacing-5);
  }

  .p-6 {
    padding: var(--spacing-6);
  }

  .p-8 {
    padding: var(--spacing-8);
  }

  .m-1 {
    margin: var(--spacing-1);
  }

  .m-2 {
    margin: var(--spacing-2);
  }

  .m-3 {
    margin: var(--spacing-3);
  }

  .m-4 {
    margin: var(--spacing-4);
  }

  .m-6 {
    margin: var(--spacing-6);
  }

  .text-white {
    color: #fff;
  }

  .text-white-90 {
    color: #ffffffe6;
  }

  .text-white-80 {
    color: #fffc;
  }

  .text-white-60 {
    color: #fff9;
  }

  .glass-card {
    background: var(--glass-white-subtle);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: var(--glass-border-brand);
    box-shadow: var(--glass-shadow-subtle);
  }

  .glass-overlay {
    background: var(--glass-image-light);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: var(--glass-border-white);
    box-shadow: var(--glass-shadow-strong);
  }

  .glass-pillar {
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    box-shadow: var(--glass-shadow-colored);
  }

  .glass-hero {
    -webkit-backdrop-filter: blur(48px) saturate(180%);
  }

  .clinical-glass-overlay {
    background: var(--clinical-glass-gradient);
  }

  .clinical-glass-blur {
    -webkit-backdrop-filter: var(--clinical-glass-blur);
  }

  .clinical-card {
    box-shadow: var(--clinical-card-shadow);
    border: 1px solid #ffffff14;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
  }

  .clinical-card:hover {
    box-shadow: var(--clinical-card-shadow-hover);
    border-color: #ffffff1f;
    transform: translateY(-2px);
  }

  .clinical-card:active {
    transition: all .1s ease-out;
    transform: translateY(0);
  }

  .eyebrow {
    font-family: var(--font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-mid);
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 600;
    display: inline-flex;
  }

  .eyebrow-icon {
    opacity: .9;
    width: 14px;
    height: 14px;
  }

  .headline-display {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.1;
  }

  .headline-section {
    font-family: var(--font-display);
    letter-spacing: -.01em;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
  }

  .headline-subsection {
    font-family: var(--font-display);
    letter-spacing: -.01em;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.3;
  }

  .headline-card {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
  }

  .copy-primary {
    font-family: var(--font-sans);
    color: var(--foreground);
    opacity: .92;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.7;
  }

  .copy-secondary {
    font-family: var(--font-sans);
    color: var(--foreground);
    opacity: .85;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
  }

  .copy-small {
    font-family: var(--font-sans);
    color: var(--foreground);
    opacity: .75;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
  }

  .journey-headline {
    font-family: var(--font-display);
    letter-spacing: -.01em;
    background: linear-gradient(135deg, var(--era-experience) 0%, var(--era-recognize) 50%, var(--era-align) 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    line-height: 1.25;
    position: relative;
  }

  .journey-headline-underline:after {
    content: "";
    background: linear-gradient(90deg, var(--era-experience) 0%, var(--era-recognize) 50%, var(--era-align) 100%);
    opacity: .3;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -8px;
    left: 0;
  }

  .journey-phase-badge {
    -webkit-backdrop-filter: blur(20px);
    font-family: var(--font-display);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: #ffffff14;
    border: 1px solid #ffffff1f;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    transition: all .3s;
    display: inline-flex;
  }

  .journey-phase-badge:hover {
    background: #ffffff1f;
    border-color: #fff3;
    transform: translateY(-1px);
  }

  .phase-experience {
    border-left: 3px solid var(--era-experience);
    background: var(--era-experience-light);
  }

  .phase-recognize {
    border-left: 3px solid var(--era-recognize);
    background: var(--era-recognize-light);
  }

  .phase-align {
    border-left: 3px solid var(--era-align);
    background: var(--era-align-light);
  }

  .text-journey {
    color: var(--pillar-journey);
  }

  .text-navicue {
    color: var(--pillar-navicue);
  }

  .text-wellbeing {
    color: var(--pillar-wellbeing);
  }

  .text-state {
    color: var(--pillar-state);
  }

  .text-navigate {
    color: var(--pillar-navigate);
  }

  .text-momentum {
    color: var(--pillar-momentum);
  }

  .bg-journey-light {
    background: var(--pillar-journey-light);
  }

  .bg-navicue-light {
    background: var(--pillar-navicue-light);
  }

  .bg-wellbeing-light {
    background: var(--pillar-wellbeing-light);
  }

  .bg-state-light {
    background: var(--pillar-state-light);
  }

  .bg-navigate-light {
    background: var(--pillar-navigate-light);
  }

  .bg-momentum-light {
    background: var(--pillar-momentum-light);
  }

  .border-journey {
    border-color: var(--pillar-journey);
  }

  .border-navicue {
    border-color: var(--pillar-navicue);
  }

  .border-wellbeing {
    border-color: var(--pillar-wellbeing);
  }

  .border-state {
    border-color: var(--pillar-state);
  }

  .border-navigate {
    border-color: var(--pillar-navigate);
  }

  .border-momentum {
    border-color: var(--pillar-momentum);
  }

  .text-experience {
    color: var(--era-experience);
  }

  .text-recognize {
    color: var(--era-recognize);
  }

  .text-align {
    color: var(--era-align);
  }

  .bg-experience-light {
    background: var(--era-experience-light);
  }

  .bg-recognize-light {
    background: var(--era-recognize-light);
  }

  .bg-align-light {
    background: var(--era-align-light);
  }

  .text-emotional-regulation {
    color: var(--pillar-emotional-regulation);
  }

  .text-stress-resilience {
    color: var(--pillar-stress-resilience);
  }

  .text-social-connectivity {
    color: var(--pillar-social-connectivity);
  }

  .text-cognitive-reframing {
    color: var(--pillar-cognitive-reframing);
  }

  .text-identity-integration {
    color: var(--pillar-identity-integration);
  }

  .text-decision-mastery {
    color: var(--pillar-decision-mastery);
  }

  .bg-emotional-regulation-light {
    background: var(--pillar-emotional-regulation-light);
  }

  .bg-stress-resilience-light {
    background: var(--pillar-stress-resilience-light);
  }

  .bg-social-connectivity-light {
    background: var(--pillar-social-connectivity-light);
  }

  .bg-cognitive-reframing-light {
    background: var(--pillar-cognitive-reframing-light);
  }

  .bg-identity-integration-light {
    background: var(--pillar-identity-integration-light);
  }

  .bg-decision-mastery-light {
    background: var(--pillar-decision-mastery-light);
  }

  .border-emotional-regulation {
    border-color: var(--pillar-emotional-regulation);
  }

  .border-stress-resilience {
    border-color: var(--pillar-stress-resilience);
  }

  .border-social-connectivity {
    border-color: var(--pillar-social-connectivity);
  }

  .border-cognitive-reframing {
    border-color: var(--pillar-cognitive-reframing);
  }

  .border-identity-integration {
    border-color: var(--pillar-identity-integration);
  }

  .border-decision-mastery {
    border-color: var(--pillar-decision-mastery);
  }

  .border-square {
    border-radius: 0;
  }

  .shadow-universal {
    box-shadow: 0 40px 120px #40e0d033, 0 20px 60px #5739fb26;
  }

  .bg-brand-dark {
    background: var(--brand-dark);
  }

  .bg-brand-mid {
    background: var(--brand-mid);
  }

  .bg-brand-cyan {
    background: #40e0d0;
  }

  .text-brand-dark {
    color: var(--brand-dark);
  }

  .text-brand-mid {
    color: var(--brand-mid);
  }

  .text-brand-cyan {
    color: #40e0d0;
  }

  .backdrop-universal {
    -webkit-backdrop-filter: blur(32px) saturate(180%);
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #5739fb #3e2bb814;
    overflow-y: scroll !important;
  }

  .custom-scrollbar::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    opacity: 1;
    background: #3e2bb814;
    border-left: 2px solid #3e2bb826;
    border-radius: 0;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(#3e2bb8 0%, #5739fb 50%, #40e0d0 100%);
    border: 2px solid #ffffff26;
    border-radius: 3px;
    min-height: 40px;
    transition: all .3s;
    box-shadow: 0 2px 8px #3e2bb840, inset 0 1px #fff3;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#5739fb 0%, #7c67ff 50%, #40e0d0 100%);
    border-color: #ffffff40;
    box-shadow: 0 4px 16px #3e2bb866, inset 0 1px #ffffff4d;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:active {
    background: linear-gradient(#3e2bb8 0%, #5739fb 100%);
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .section-header-left {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    display: grid;
  }

  @media (width >= 768px) {
    .section-header-left {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .section-header-left .headline-col {
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
  }

  .section-header-left .subheading-col {
    align-items: flex-end;
    display: flex;
  }

  .section-header-right {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    display: grid;
  }

  @media (width >= 768px) {
    .section-header-right {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .section-header-right .headline-col {
    text-align: right;
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
  }

  .section-header-right .subheading-col {
    align-items: flex-end;
    display: flex;
  }

  .section-eyebrow {
    font-family: var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5739fb;
    text-shadow: 0 2px 12px #5739fb4d;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    font-size: .6875rem;
    font-weight: 700;
    display: flex;
  }

  .section-header-right .section-eyebrow {
    justify-content: flex-end;
  }

  .section-headline {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    color: #0a192f;
    text-shadow: 0 4px 20px #3e2bb814;
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
  }

  .section-headline-therapy {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    color: #0a192f;
    text-shadow: 0 4px 20px #3e2bb814;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.15;
  }

  .section-headline .accent, .section-headline-therapy .accent {
    color: #40e0d0;
    white-space: nowrap;
    text-shadow: 0 4px 20px #40e0d04d;
  }

  .section-subheading {
    color: #475569;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.7;
  }

  .bridge-eyebrow {
    font-family: var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #40e0d0;
    font-size: .6875rem;
    font-weight: 700;
  }

  .bridge-headline {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 1.25rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
  }

  .bridge-subtext {
    color: #ffffffe6;
    max-width: 42rem;
    margin: 0 auto;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.6;
  }

  .bridge-background-overlay {
    background: linear-gradient(135deg, #3e2bb8eb 0%, #5739fbe0 100%);
  }

  .icon-standard {
    stroke-width: 2.5px;
  }

  .icon-eyebrow {
    color: #40e0d0;
    stroke-width: 2.5px;
  }

  .container-responsive {
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  @media (width >= 640px) {
    .container-responsive {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  @media (width >= 1024px) {
    .container-responsive {
      padding-left: 3rem;
      padding-right: 3rem;
    }
  }
}

:root {
  --font-size: 16px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --spacing-1-5: .375rem;
  --spacing-2: .5rem;
  --spacing-2-5: .625rem;
  --spacing-3: .75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-brand-primary: #3e2bb8;
  --color-background: #fafafa;
  --radius-none: 0;
  --brand-dark: #3e2bb8;
  --brand-mid: #5739fb;
  --brand-light: #7c67ff;
  --brand-accent: #9d8fff;
  --pillar-journey: #5739fb;
  --pillar-journey-light: #5739fb1f;
  --pillar-journey-glow: #5739fb40;
  --pillar-navicue: #6b5ce8;
  --pillar-navicue-light: #6b5ce81f;
  --pillar-navicue-glow: #6b5ce840;
  --pillar-wellbeing: #8b7dff;
  --pillar-wellbeing-light: #8b7dff1f;
  --pillar-wellbeing-glow: #8b7dff40;
  --pillar-state: #7c67ff;
  --pillar-state-light: #7c67ff1f;
  --pillar-state-glow: #7c67ff40;
  --pillar-navigate: #9d8fff;
  --pillar-navigate-light: #9d8fff1f;
  --pillar-navigate-glow: #9d8fff40;
  --pillar-momentum: #3e2bb8;
  --pillar-momentum-light: #3e2bb81f;
  --pillar-momentum-glow: #3e2bb840;
  --era-experience: #8b7dff;
  --era-experience-light: #8b7dff14;
  --era-experience-glow: #8b7dff33;
  --era-recognize: #5739fb;
  --era-recognize-light: #5739fb14;
  --era-recognize-glow: #5739fb33;
  --era-align: #3e2bb8;
  --era-align-light: #3e2bb814;
  --era-align-glow: #3e2bb833;
  --pillar-emotional-regulation: #7c67ff;
  --pillar-emotional-regulation-light: #7c67ff1f;
  --pillar-emotional-regulation-glow: #7c67ff40;
  --pillar-stress-resilience: #c49dc4;
  --pillar-stress-resilience-light: #c49dc41f;
  --pillar-stress-resilience-glow: #c49dc440;
  --pillar-social-connectivity: #9d8fff;
  --pillar-social-connectivity-light: #9d8fff1f;
  --pillar-social-connectivity-glow: #9d8fff40;
  --pillar-cognitive-reframing: #3e2bb8;
  --pillar-cognitive-reframing-light: #3e2bb81f;
  --pillar-cognitive-reframing-glow: #3e2bb840;
  --pillar-identity-integration: #5739fb;
  --pillar-identity-integration-light: #5739fb1f;
  --pillar-identity-integration-glow: #5739fb40;
  --pillar-decision-mastery: #a8c4e1;
  --pillar-decision-mastery-light: #a8c4e11f;
  --pillar-decision-mastery-glow: #a8c4e140;
  --brain-state-healthy: #2ecc71;
  --brain-state-shifting: #f39c12;
  --brain-state-needs-support: #e74c3c;
  --now-return: #5739fb;
  --now-rely: #3b82f6;
  --now-shift: #8b5cf6;
  --metric-tempo: #3e2bb8;
  --metric-flow: #06b6d4;
  --metric-sync: #ec4899;
  --content-navicue: #5739fb;
  --content-video: #ef4444;
  --content-article: #3b82f6;
  --content-exercise: #10b981;
  --content-journey: #8b5cf6;
  --content-building-block: #f59e0b;
  --background: #fafafa;
  --foreground: #1a1a1a;
  --card: #fff;
  --card-foreground: #1a1a1a;
  --popover: #fff;
  --popover-foreground: #1a1a1a;
  --primary: #3e2bb8;
  --primary-foreground: #fff;
  --secondary: #f5f3ff;
  --secondary-foreground: #3e2bb8;
  --muted: #f5f5f5;
  --muted-foreground: #6b7280;
  --accent: #5739fb;
  --accent-foreground: #fff;
  --destructive: #dc2626;
  --destructive-foreground: #fff;
  --border: #3e2bb81a;
  --input: transparent;
  --input-background: #fff;
  --switch-background: #e5e5e5;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #5739fb;
  --chart-1: #5739fb;
  --chart-2: #7c67ff;
  --chart-3: #9d8fff;
  --chart-4: #3e2bb8;
  --chart-5: #c4b5fd;
  --radius: .5rem;
  --sidebar: #fafafa;
  --sidebar-foreground: #1a1a1a;
  --sidebar-primary: #3e2bb8;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #f5f3ff;
  --sidebar-accent-foreground: #3e2bb8;
  --sidebar-border: #3e2bb81a;
  --sidebar-ring: #5739fb;
  --glass-white-subtle: #ffffffd9;
  --glass-white-strong: #fffffff2;
  --glass-white-minimal: #ffffffb3;
  --glass-image-light: #ffffff1a;
  --glass-image-medium: #ffffff26;
  --glass-image-dark: #0000004d;
  --glass-border-white: 1px solid #fff3;
  --glass-border-brand: 1px solid #3e2bb826;
  --glass-border-brand-strong: 2px solid #3e2bb840;
  --glass-shadow-subtle: 0 1px 3px #0000000d, 0 0 0 1px #ffffff80 inset;
  --glass-shadow-medium: 0 4px 12px #00000014, 0 0 0 1px #ffffff80 inset;
  --glass-shadow-strong: 0 8px 32px #0000001f;
  --glass-shadow-colored: 0 1px 3px #0000000d, 0 0 0 1px #3e2bb81a inset;
  --clinical-glass-blur: blur(20px) saturate(110%);
  --clinical-glass-gradient: linear-gradient(180deg, transparent 0%, #0003 40%, #0009 100%);
  --clinical-card-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d, inset 0 0 0 1px #ffffff05;
  --clinical-card-shadow-hover: 0 4px 12px #00000026, 0 2px 4px #0000001f, inset 0 0 0 1px #ffffff0f;
}

.dark {
  --background: oklch(.145 0 0);
  --foreground: oklch(.985 0 0);
  --card: oklch(.145 0 0);
  --card-foreground: oklch(.985 0 0);
  --popover: oklch(.145 0 0);
  --popover-foreground: oklch(.985 0 0);
  --primary: oklch(.985 0 0);
  --primary-foreground: oklch(.205 0 0);
  --secondary: oklch(.269 0 0);
  --secondary-foreground: oklch(.985 0 0);
  --muted: oklch(.269 0 0);
  --muted-foreground: oklch(.708 0 0);
  --accent: oklch(.269 0 0);
  --accent-foreground: oklch(.985 0 0);
  --destructive: oklch(.396 .141 25.723);
  --destructive-foreground: oklch(.637 .237 25.331);
  --border: oklch(.269 0 0);
  --input: oklch(.269 0 0);
  --ring: oklch(.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(.488 .243 264.376);
  --chart-2: oklch(.696 .17 162.48);
  --chart-3: oklch(.769 .188 70.08);
  --chart-4: oklch(.627 .265 303.9);
  --chart-5: oklch(.645 .246 16.439);
  --sidebar: oklch(.205 0 0);
  --sidebar-foreground: oklch(.985 0 0);
  --sidebar-primary: oklch(.488 .243 264.376);
  --sidebar-primary-foreground: oklch(.985 0 0);
  --sidebar-accent: oklch(.269 0 0);
  --sidebar-accent-foreground: oklch(.985 0 0);
  --sidebar-border: oklch(.269 0 0);
  --sidebar-ring: oklch(.439 0 0);
}

html {
  font-size: var(--font-size);
  scroll-behavior: smooth;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes ping {
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes breathe {
  0%, 100% {
    filter: brightness();
    transform: scale(1)translateY(0);
  }

  50% {
    filter: brightness(1.02);
    transform: scale(1.005)translateY(-.5px);
  }
}

@keyframes pulse-glow-soft {
  0%, 100% {
    opacity: .2;
  }

  50% {
    opacity: .4;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: .3;
    transform: scale(1);
  }

  50% {
    opacity: .5;
    transform: scale(1.05);
  }
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .6;
    transform: scale(.8);
  }
}

@keyframes shimmer-asset {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(-12px)scale(1.02);
  }
}

@keyframes float-gentle-dna {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.dashboard-tile-wrapper:not(:hover) {
  will-change: transform, filter;
}

.animate-pulse {
  animation: 2s cubic-bezier(.4, 0, .6, 1) infinite pulse;
}

.animate-ping {
  animation: 1s cubic-bezier(0, 0, .2, 1) infinite ping;
}

.animate-shimmer {
  animation: 2s ease-in-out infinite shimmer;
}

.animate-breathe, .dashboard-tile-wrapper:not(:hover) {
  animation: 8s ease-in-out infinite breathe;
}

.dashboard-tile-wrapper:first-child {
  animation-delay: 0s;
}

.dashboard-tile-wrapper:nth-child(2) {
  animation-delay: 1.2s;
}

.dashboard-tile-wrapper:nth-child(3) {
  animation-delay: 2.4s;
}

.dashboard-tile-wrapper:nth-child(4) {
  animation-delay: 3.6s;
}

.dashboard-tile-wrapper:nth-child(5) {
  animation-delay: 4.8s;
}

.dashboard-tile-wrapper:nth-child(6) {
  animation-delay: 6s;
}

.dashboard-tile-wrapper:nth-child(7) {
  animation-delay: 7.2s;
}

@media (prefers-color-scheme: dark) {
  img, picture, video, canvas, svg {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light only;
    filter: none !important;
    opacity: 1 !important;
  }

  [style*="background-image"] {
    filter: none !important;
  }

  body {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light only;
  }
}