*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

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

/*
Remove the default font size and weight for headings.
*/

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

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

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

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

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

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    /* Shadcn semantic variables remapped to Make Baby Complete brand palette */
    --background: 43 55% 96%;        /* Pearl Ivory  #FAF7F0 */
    --foreground: 295 33% 18%;       /* Deep Plum    #3A1F3D */

    --card: 43 70% 78%;              /* Champagne gold (was porcelain white) */
    --card-foreground: 295 33% 18%;

    --popover: 38 100% 97%;          /* Warm Cream   #FFF9F0 */
    --popover-foreground: 295 33% 18%;

    --primary: 295 33% 18%;          /* Deep Plum */
    --primary-foreground: 43 55% 96%;

    --secondary: 38 100% 97%;        /* Warm Cream */
    --secondary-foreground: 295 33% 18%;

    --accent: 41 58% 63%;            /* Champagne Gold #D8B46A */
    --accent-foreground: 295 33% 18%;

    --muted: 40 65% 88%;             /* Soft Champagne #F3E6D0 */
    --muted-foreground: 283 17% 30%;

    --destructive: 15 47% 60%;       /* Warm Terracotta #C9856B */
    --destructive-foreground: 43 55% 96%;

    --border: 40 65% 88%;
    --input: 40 65% 88%;
    --ring: 41 58% 63%;

    --radius: 1rem;

    /* Raw brand-token hex vars — used by Tailwind `brand.*` utilities */
    --brand-ivory:      #EFD892;
    --brand-cream:      #F4E5B8;
    --brand-champagne:  #E8CB6A;
    --brand-porcelain:  #E8CB6A;
    --brand-plum:       #3A1F3D;
    --brand-navy:       #172033;
    --brand-charcoal:   #2B2230;
    --brand-gold:       #D8B46A;
    --brand-softgold:   #C9A45C;
    --brand-bronze:     #C99A2C;  /* Iter 145.16 — retired copper/bronze, now = luminous warm gold */
    --brand-sage:       #9FB79A;
    --brand-fertility:  #7EA77A;
    --brand-olive:      #DDE8D8;
    --brand-rose:       #D9A6A0;
    --brand-blush:      #F2D8D5;
    --brand-terracotta: #C9856B;
    --brand-lavender:   #E9DFF2;
    --brand-lilac:      #BFA7D6;
  }
  * {
  border-color: hsl(40 65% 88%);
  border-color: hsl(var(--border));
}
  body {
  background-color: hsl(43 55% 96%);
  background-color: hsl(var(--background));
  color: hsl(295 33% 18%);
  color: hsl(var(--foreground));
}
  ::selection { background: #E8CB6A; background: var(--brand-champagne); color: #3A1F3D; color: var(--brand-plum); }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-bottom-24 {
  bottom: -6rem;
}
.-bottom-8 {
  bottom: -2rem;
}
.-left-12 {
  left: -3rem;
}
.-left-16 {
  left: -4rem;
}
.-left-8 {
  left: -2rem;
}
.-right-12 {
  right: -3rem;
}
.-right-16 {
  right: -4rem;
}
.-right-20 {
  right: -5rem;
}
.-right-6 {
  right: -1.5rem;
}
.-top-12 {
  top: -3rem;
}
.-top-16 {
  top: -4rem;
}
.-top-20 {
  top: -5rem;
}
.-top-6 {
  top: -1.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-24 {
  bottom: 6rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-5 {
  bottom: 1.25rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.left-1 {
  left: 0.25rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-5 {
  left: 1.25rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.right-\[-60px\] {
  right: -60px;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-24 {
  top: 6rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1000\] {
  z-index: 1000;
}
.z-\[1001\] {
  z-index: 1001;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1100\] {
  z-index: 1100;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[209\] {
  z-index: 209;
}
.z-\[210\] {
  z-index: 210;
}
.z-\[2147483646\] {
  z-index: 2147483646;
}
.z-\[2147483647\] {
  z-index: 2147483647;
}
.z-\[500\] {
  z-index: 500;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[99999\] {
  z-index: 99999;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-6 {
  margin-right: 1.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-32 {
  max-height: 8rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[--radix-context-menu-content-available-height\] {
  max-height: var(--radix-context-menu-content-available-height);
}
.max-h-\[--radix-select-content-available-height\] {
  max-height: var(--radix-select-content-available-height);
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[420px\] {
  max-height: 420px;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[72vh\] {
  max-height: 72vh;
}
.max-h-\[75vh\] {
  max-height: 75vh;
}
.max-h-\[78vh\] {
  max-height: 78vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-\[100px\] {
  min-height: 100px;
}
.min-h-\[28px\] {
  min-height: 28px;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-\[520px\] {
  min-height: 520px;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[1px\] {
  width: 1px;
}
.w-\[min\(400px\2c calc\(100vw-40px\)\)\] {
  width: min(400px,calc(100vw - 40px));
}
.w-\[min\(92vw\2c 640px\)\] {
  width: min(92vw,640px);
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -webkit-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -webkit-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[170px\] {
  min-width: 170px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[240px\] {
  min-width: 240px;
}
.min-w-\[3ch\] {
  min-width: 3ch;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[92px\] {
  min-width: 92px;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[130px\] {
  max-width: 130px;
}
.max-w-\[15rem\] {
  max-width: 15rem;
}
.max-w-\[170px\] {
  max-width: 170px;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[190px\] {
  max-width: 190px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-\[80\%\] {
  max-width: 80%;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -webkit-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-\[--radix-context-menu-content-transform-origin\] {
  transform-origin: var(--radix-context-menu-content-transform-origin);
}
.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\[--radix-hover-card-content-transform-origin\] {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}
.origin-\[--radix-menubar-content-transform-origin\] {
  transform-origin: var(--radix-menubar-content-transform-origin);
}
.origin-\[--radix-popover-content-transform-origin\] {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\[--radix-select-content-transform-origin\] {
  transform-origin: var(--radix-select-content-transform-origin);
}
.origin-\[--radix-tooltip-content-transform-origin\] {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
          user-select: all;
}
.resize-none {
  resize: none;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[2px\] {
  gap: 2px;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-brand-gold\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--brand-gold-rgb) / 0.1);
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[24px\] {
  border-radius: 24px;
}
.rounded-\[28px\] {
  border-radius: 28px;
}
.rounded-\[6px\] {
  border-radius: 6px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 1rem;
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(1rem - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(1rem - 4px);
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-t-\[28px\] {
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}
.rounded-tl-sm {
  border-top-left-radius: calc(1rem - 4px);
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.\!border-red-500 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(239 68 68 / 1) !important;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;
}
.border-\[\#635BFF\]\/30 {
  border-color: rgb(99 91 255 / 0.3);
}
.border-\[\#635BFF\]\/40 {
  border-color: rgb(99 91 255 / 0.4);
}
.border-\[\#7A511B\]\/50 {
  border-color: rgb(122 81 27 / 0.5);
}
.border-\[\#9B2C2C\]\/40 {
  border-color: rgb(155 44 44 / 0.4);
}
.border-\[\#B98A32\] {
  --tw-border-opacity: 1;
  border-color: rgb(185 138 50 / 1);
  border-color: rgb(185 138 50 / var(--tw-border-opacity, 1));
}
.border-\[\#C9A45C\]\/30 {
  border-color: rgb(201 164 92 / 0.3);
}
.border-\[\#C9A45C\]\/50 {
  border-color: rgb(201 164 92 / 0.5);
}
.border-\[\#D8B46A\]\/45 {
  border-color: rgb(216 180 106 / 0.45);
}
.border-\[\#D8B46A\]\/50 {
  border-color: rgb(216 180 106 / 0.5);
}
.border-\[\#E8D5A8\] {
  --tw-border-opacity: 1;
  border-color: rgb(232 213 168 / 1);
  border-color: rgb(232 213 168 / var(--tw-border-opacity, 1));
}
.border-\[\#F6EACB\] {
  --tw-border-opacity: 1;
  border-color: rgb(246 234 203 / 1);
  border-color: rgb(246 234 203 / var(--tw-border-opacity, 1));
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / 1);
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / 1);
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-300\/60 {
  border-color: rgb(252 211 77 / 0.6);
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / 1);
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / 1);
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-brand-bronze\/50 {
  border-color: rgb(var(--brand-bronze-rgb) / 0.5);
}
.border-brand-champagne {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-champagne-rgb) / 1);
  border-color: rgb(var(--brand-champagne-rgb) / var(--tw-border-opacity, 1));
}
.border-brand-champagne\/20 {
  border-color: rgb(var(--brand-champagne-rgb) / 0.2);
}
.border-brand-champagne\/30 {
  border-color: rgb(var(--brand-champagne-rgb) / 0.3);
}
.border-brand-champagne\/40 {
  border-color: rgb(var(--brand-champagne-rgb) / 0.4);
}
.border-brand-champagne\/50 {
  border-color: rgb(var(--brand-champagne-rgb) / 0.5);
}
.border-brand-champagne\/60 {
  border-color: rgb(var(--brand-champagne-rgb) / 0.6);
}
.border-brand-champagne\/70 {
  border-color: rgb(var(--brand-champagne-rgb) / 0.7);
}
.border-brand-gold {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-gold-rgb) / 1);
  border-color: rgb(var(--brand-gold-rgb) / var(--tw-border-opacity, 1));
}
.border-brand-gold\/15 {
  border-color: rgb(var(--brand-gold-rgb) / 0.15);
}
.border-brand-gold\/20 {
  border-color: rgb(var(--brand-gold-rgb) / 0.2);
}
.border-brand-gold\/25 {
  border-color: rgb(var(--brand-gold-rgb) / 0.25);
}
.border-brand-gold\/30 {
  border-color: rgb(var(--brand-gold-rgb) / 0.3);
}
.border-brand-gold\/40 {
  border-color: rgb(var(--brand-gold-rgb) / 0.4);
}
.border-brand-gold\/50 {
  border-color: rgb(var(--brand-gold-rgb) / 0.5);
}
.border-brand-gold\/60 {
  border-color: rgb(var(--brand-gold-rgb) / 0.6);
}
.border-brand-pearl {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-pearl-rgb) / 1);
  border-color: rgb(var(--brand-pearl-rgb) / var(--tw-border-opacity, 1));
}
.border-brand-plum {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-plum-rgb) / 1);
  border-color: rgb(var(--brand-plum-rgb) / var(--tw-border-opacity, 1));
}
.border-brand-plum\/20 {
  border-color: rgb(var(--brand-plum-rgb) / 0.2);
}
.border-brand-plum\/25 {
  border-color: rgb(var(--brand-plum-rgb) / 0.25);
}
.border-brand-plum\/40 {
  border-color: rgb(var(--brand-plum-rgb) / 0.4);
}
.border-brand-royal-gold {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-royal-gold-rgb) / 1);
  border-color: rgb(var(--brand-royal-gold-rgb) / var(--tw-border-opacity, 1));
}
.border-brand-royal-gold\/20 {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.2);
}
.border-brand-royal-gold\/25 {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.25);
}
.border-brand-royal-gold\/30 {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.3);
}
.border-brand-royal-gold\/40 {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.4);
}
.border-brand-royal-gold\/45 {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.45);
}
.border-brand-royal-gold\/50 {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.5);
}
.border-brand-royal-gold\/55 {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.55);
}
.border-brand-royal-gold\/60 {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.6);
}
.border-brand-royal-gold\/70 {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.7);
}
.border-brand-terracotta {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-terracotta-rgb) / 1);
  border-color: rgb(var(--brand-terracotta-rgb) / var(--tw-border-opacity, 1));
}
.border-brand-terracotta\/30 {
  border-color: rgb(var(--brand-terracotta-rgb) / 0.3);
}
.border-brand-terracotta\/40 {
  border-color: rgb(var(--brand-terracotta-rgb) / 0.4);
}
.border-brand-terracotta\/50 {
  border-color: rgb(var(--brand-terracotta-rgb) / 0.5);
}
.border-brand-terracotta\/60 {
  border-color: rgb(var(--brand-terracotta-rgb) / 0.6);
}
.border-destructive {
  border-color: hsl(15 47% 60%);
  border-color: hsl(var(--destructive));
}
.border-destructive\/50 {
  border-color: hsl(15 47% 60% / 0.5);
  border-color: hsl(var(--destructive) / 0.5);
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / 1);
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / 1);
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / 1);
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / 1);
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-input {
  border-color: hsl(40 65% 88%);
  border-color: hsl(var(--input));
}
.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / 1);
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}
.border-orange-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / 1);
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}
.border-plum {
  --tw-border-opacity: 1;
  border-color: rgb(58 31 61 / 1);
  border-color: rgb(58 31 61 / var(--tw-border-opacity, 1));
}
.border-primary {
  border-color: hsl(295 33% 18%);
  border-color: hsl(var(--primary));
}
.border-primary\/50 {
  border-color: hsl(295 33% 18% / 0.5);
  border-color: hsl(var(--primary) / 0.5);
}
.border-purple-300 {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / 1);
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / 1);
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / 1);
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / 1);
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-400\/60 {
  border-color: rgb(248 113 113 / 0.6);
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / 1);
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-500\/70 {
  border-color: rgb(239 68 68 / 0.7);
}
.border-slate-400\/60 {
  border-color: rgb(148 163 184 / 0.6);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/40 {
  border-color: rgb(255 255 255 / 0.4);
}
.border-yellow-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / 1);
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.\!bg-red-500 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(239 68 68 / 1) !important;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#F5F4FF\]\/60 {
  background-color: rgb(245 244 255 / 0.6);
}
.bg-\[\#FDF5F0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 245 240 / 1);
  background-color: rgb(253 245 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF9F0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 249 240 / 1);
  background-color: rgb(255 249 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF9F0\]\/60 {
  background-color: rgb(255 249 240 / 0.6);
}
.bg-\[\#FFF9F0\]\/95 {
  background-color: rgb(255 249 240 / 0.95);
}
.bg-accent {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / 1);
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-100\/70 {
  background-color: rgb(254 243 199 / 0.7);
}
.bg-amber-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / 1);
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / 1);
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/70 {
  background-color: rgb(255 251 235 / 0.7);
}
.bg-background {
  background-color: hsl(43 55% 96%);
  background-color: hsl(var(--background));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/5 {
  background-color: rgb(0 0 0 / 0.05);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / 1);
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-border {
  background-color: hsl(40 65% 88%);
  background-color: hsl(var(--border));
}
.bg-brand-blush {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-blush-rgb) / 1);
  background-color: rgb(var(--brand-blush-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-blush\/30 {
  background-color: rgb(var(--brand-blush-rgb) / 0.3);
}
.bg-brand-blush\/40 {
  background-color: rgb(var(--brand-blush-rgb) / 0.4);
}
.bg-brand-blush\/50 {
  background-color: rgb(var(--brand-blush-rgb) / 0.5);
}
.bg-brand-champagne {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-champagne-rgb) / 1);
  background-color: rgb(var(--brand-champagne-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-champagne\/40 {
  background-color: rgb(var(--brand-champagne-rgb) / 0.4);
}
.bg-brand-champagne\/50 {
  background-color: rgb(var(--brand-champagne-rgb) / 0.5);
}
.bg-brand-champagne\/60 {
  background-color: rgb(var(--brand-champagne-rgb) / 0.6);
}
.bg-brand-champagne\/70 {
  background-color: rgb(var(--brand-champagne-rgb) / 0.7);
}
.bg-brand-champagne\/95 {
  background-color: rgb(var(--brand-champagne-rgb) / 0.95);
}
.bg-brand-cream {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-cream-rgb) / 1);
  background-color: rgb(var(--brand-cream-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-cream\/40 {
  background-color: rgb(var(--brand-cream-rgb) / 0.4);
}
.bg-brand-cream\/50 {
  background-color: rgb(var(--brand-cream-rgb) / 0.5);
}
.bg-brand-cream\/60 {
  background-color: rgb(var(--brand-cream-rgb) / 0.6);
}
.bg-brand-cream\/70 {
  background-color: rgb(var(--brand-cream-rgb) / 0.7);
}
.bg-brand-cream\/80 {
  background-color: rgb(var(--brand-cream-rgb) / 0.8);
}
.bg-brand-cream\/90 {
  background-color: rgb(var(--brand-cream-rgb) / 0.9);
}
.bg-brand-diamond {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-diamond-rgb) / 1);
  background-color: rgb(var(--brand-diamond-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-diamond\/80 {
  background-color: rgb(var(--brand-diamond-rgb) / 0.8);
}
.bg-brand-gold {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-gold-rgb) / 1);
  background-color: rgb(var(--brand-gold-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-gold\/20 {
  background-color: rgb(var(--brand-gold-rgb) / 0.2);
}
.bg-brand-gold\/40 {
  background-color: rgb(var(--brand-gold-rgb) / 0.4);
}
.bg-brand-ivory {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-ivory-rgb) / 1);
  background-color: rgb(var(--brand-ivory-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-ivory\/50 {
  background-color: rgb(var(--brand-ivory-rgb) / 0.5);
}
.bg-brand-ivory\/60 {
  background-color: rgb(var(--brand-ivory-rgb) / 0.6);
}
.bg-brand-ivory\/70 {
  background-color: rgb(var(--brand-ivory-rgb) / 0.7);
}
.bg-brand-ivory\/90 {
  background-color: rgb(var(--brand-ivory-rgb) / 0.9);
}
.bg-brand-olive {
  background-color: #DDE8D8;
  background-color: var(--brand-olive);
}
.bg-brand-pale-gold {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-pale-gold-rgb) / 1);
  background-color: rgb(var(--brand-pale-gold-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-pale-gold\/20 {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.2);
}
.bg-brand-pale-gold\/25 {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.25);
}
.bg-brand-pale-gold\/30 {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.3);
}
.bg-brand-pale-gold\/40 {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.4);
}
.bg-brand-pale-gold\/50 {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.5);
}
.bg-brand-pale-gold\/60 {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.6);
}
.bg-brand-pearl {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-pearl-rgb) / 1);
  background-color: rgb(var(--brand-pearl-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-pearl\/40 {
  background-color: rgb(var(--brand-pearl-rgb) / 0.4);
}
.bg-brand-pearl\/50 {
  background-color: rgb(var(--brand-pearl-rgb) / 0.5);
}
.bg-brand-pearl\/60 {
  background-color: rgb(var(--brand-pearl-rgb) / 0.6);
}
.bg-brand-pearl\/70 {
  background-color: rgb(var(--brand-pearl-rgb) / 0.7);
}
.bg-brand-pearl\/80 {
  background-color: rgb(var(--brand-pearl-rgb) / 0.8);
}
.bg-brand-pearl\/90 {
  background-color: rgb(var(--brand-pearl-rgb) / 0.9);
}
.bg-brand-pearl\/95 {
  background-color: rgb(var(--brand-pearl-rgb) / 0.95);
}
.bg-brand-plum {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-plum-rgb) / 1);
  background-color: rgb(var(--brand-plum-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-plum\/10 {
  background-color: rgb(var(--brand-plum-rgb) / 0.1);
}
.bg-brand-plum\/25 {
  background-color: rgb(var(--brand-plum-rgb) / 0.25);
}
.bg-brand-plum\/45 {
  background-color: rgb(var(--brand-plum-rgb) / 0.45);
}
.bg-brand-plum\/50 {
  background-color: rgb(var(--brand-plum-rgb) / 0.5);
}
.bg-brand-plum\/95 {
  background-color: rgb(var(--brand-plum-rgb) / 0.95);
}
.bg-brand-rose {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-rose-rgb) / 1);
  background-color: rgb(var(--brand-rose-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-royal-gold {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-royal-gold-rgb) / 1);
  background-color: rgb(var(--brand-royal-gold-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-royal-gold\/10 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.1);
}
.bg-brand-royal-gold\/12 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.12);
}
.bg-brand-royal-gold\/15 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.15);
}
.bg-brand-royal-gold\/18 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.18);
}
.bg-brand-royal-gold\/20 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.2);
}
.bg-brand-royal-gold\/25 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.25);
}
.bg-brand-royal-gold\/28 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.28);
}
.bg-brand-royal-gold\/30 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.3);
}
.bg-brand-royal-gold\/35 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.35);
}
.bg-brand-royal-gold\/40 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.4);
}
.bg-brand-royal-gold\/45 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.45);
}
.bg-brand-royal-gold\/6 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.06);
}
.bg-brand-royal-gold\/70 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.7);
}
.bg-brand-royal-gold\/8 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.08);
}
.bg-brand-royal-gold\/80 {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.8);
}
.bg-brand-sage {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-sage-rgb) / 1);
  background-color: rgb(var(--brand-sage-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-terracotta {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-terracotta-rgb) / 1);
  background-color: rgb(var(--brand-terracotta-rgb) / var(--tw-bg-opacity, 1));
}
.bg-brand-terracotta\/20 {
  background-color: rgb(var(--brand-terracotta-rgb) / 0.2);
}
.bg-cream\/40 {
  background-color: rgb(255 249 240 / 0.4);
}
.bg-destructive {
  background-color: hsl(15 47% 60%);
  background-color: hsl(var(--destructive));
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / 1);
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / 1);
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 1);
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50\/60 {
  background-color: rgb(236 253 245 / 0.6);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 1);
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: hsl(295 33% 18%);
  background-color: hsl(var(--foreground));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / 1);
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / 1);
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-muted {
  background-color: hsl(40 65% 88%);
  background-color: hsl(var(--muted));
}
.bg-muted\/50 {
  background-color: hsl(40 65% 88% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / 1);
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / 1);
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-plum {
  --tw-bg-opacity: 1;
  background-color: rgb(58 31 61 / 1);
  background-color: rgb(58 31 61 / var(--tw-bg-opacity, 1));
}
.bg-popover {
  background-color: hsl(38 100% 97%);
  background-color: hsl(var(--popover));
}
.bg-primary {
  background-color: hsl(295 33% 18%);
  background-color: hsl(var(--primary));
}
.bg-primary\/10 {
  background-color: hsl(295 33% 18% / 0.1);
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: hsl(295 33% 18% / 0.2);
  background-color: hsl(var(--primary) / 0.2);
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / 1);
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/70 {
  background-color: rgb(254 242 242 / 0.7);
}
.bg-red-50\/80 {
  background-color: rgb(254 242 242 / 0.8);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / 1);
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / 1);
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / 1);
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  background-color: hsl(38 100% 97%);
  background-color: hsl(var(--secondary));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / 1);
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / 1);
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / 1);
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#25D366\] {
  --tw-gradient-from: #25D366 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 211 102 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#D8B46A\] {
  --tw-gradient-from: #D8B46A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(216 180 106 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F5F4FF\]\/90 {
  --tw-gradient-from: rgb(245 244 255 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 244 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F6D878\] {
  --tw-gradient-from: #F6D878 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(246 216 120 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#FFF9F0\] {
  --tw-gradient-from: #FFF9F0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 249 240 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#FFF9F0\]\/90 {
  --tw-gradient-from: rgb(255 249 240 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 249 240 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-champagne {
  --tw-gradient-from: rgb(var(--brand-champagne-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-champagne-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-cream {
  --tw-gradient-from: rgb(var(--brand-cream-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-cream-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-diamond {
  --tw-gradient-from: rgb(var(--brand-diamond-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-diamond-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-gold {
  --tw-gradient-from: rgb(var(--brand-gold-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-gold-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-ivory {
  --tw-gradient-from: rgb(var(--brand-ivory-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-ivory-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-pale-gold {
  --tw-gradient-from: rgb(var(--brand-pale-gold-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-pale-gold\/30 {
  --tw-gradient-from: rgb(var(--brand-pale-gold-rgb) / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-pale-gold\/40 {
  --tw-gradient-from: rgb(var(--brand-pale-gold-rgb) / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-pale-gold\/60 {
  --tw-gradient-from: rgb(var(--brand-pale-gold-rgb) / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-pearl {
  --tw-gradient-from: rgb(var(--brand-pearl-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-pearl-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-plum\/85 {
  --tw-gradient-from: rgb(var(--brand-plum-rgb) / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-plum-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-royal-gold {
  --tw-gradient-from: rgb(var(--brand-royal-gold-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-royal-gold-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-royal-gold\/25 {
  --tw-gradient-from: rgb(var(--brand-royal-gold-rgb) / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-royal-gold-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-600 {
  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#D8A93C\] {
  --tw-gradient-to: rgb(216 169 60 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #D8A93C var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#FFF4C6\]\/40 {
  --tw-gradient-to: rgb(255 244 198 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 244 198 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-pale-gold {
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-pale-gold-rgb) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-pale-gold\/40 {
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-pale-gold-rgb) / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-pearl {
  --tw-gradient-to: rgb(var(--brand-pearl-rgb) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-pearl-rgb) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-plum\/30 {
  --tw-gradient-to: rgb(var(--brand-plum-rgb) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-plum-rgb) / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-red-500 {
  --tw-gradient-to: rgb(239 68 68 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#128C7E\] {
  --tw-gradient-to: #128C7E var(--tw-gradient-to-position);
}
.to-\[\#B98A32\] {
  --tw-gradient-to: #B98A32 var(--tw-gradient-to-position);
}
.to-\[\#EEEDFF\]\/70 {
  --tw-gradient-to: rgb(238 237 255 / 0.7) var(--tw-gradient-to-position);
}
.to-\[\#F6EACB\]\/40 {
  --tw-gradient-to: rgb(246 234 203 / 0.4) var(--tw-gradient-to-position);
}
.to-\[\#F6EACB\]\/70 {
  --tw-gradient-to: rgb(246 234 203 / 0.7) var(--tw-gradient-to-position);
}
.to-\[\#FFF9F0\]\/70 {
  --tw-gradient-to: rgb(255 249 240 / 0.7) var(--tw-gradient-to-position);
}
.to-brand-champagne {
  --tw-gradient-to: rgb(var(--brand-champagne-rgb) / 1) var(--tw-gradient-to-position);
}
.to-brand-champagne\/30 {
  --tw-gradient-to: rgb(var(--brand-champagne-rgb) / 0.3) var(--tw-gradient-to-position);
}
.to-brand-champagne\/40 {
  --tw-gradient-to: rgb(var(--brand-champagne-rgb) / 0.4) var(--tw-gradient-to-position);
}
.to-brand-champagne\/50 {
  --tw-gradient-to: rgb(var(--brand-champagne-rgb) / 0.5) var(--tw-gradient-to-position);
}
.to-brand-gold {
  --tw-gradient-to: rgb(var(--brand-gold-rgb) / 1) var(--tw-gradient-to-position);
}
.to-brand-pale-gold {
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 1) var(--tw-gradient-to-position);
}
.to-brand-pale-gold\/10 {
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0.1) var(--tw-gradient-to-position);
}
.to-brand-pale-gold\/20 {
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0.2) var(--tw-gradient-to-position);
}
.to-brand-pale-gold\/25 {
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0.25) var(--tw-gradient-to-position);
}
.to-brand-pale-gold\/30 {
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0.3) var(--tw-gradient-to-position);
}
.to-brand-pale-gold\/40 {
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0.4) var(--tw-gradient-to-position);
}
.to-brand-pale-gold\/50 {
  --tw-gradient-to: rgb(var(--brand-pale-gold-rgb) / 0.5) var(--tw-gradient-to-position);
}
.to-brand-plum {
  --tw-gradient-to: rgb(var(--brand-plum-rgb) / 1) var(--tw-gradient-to-position);
}
.to-brand-plum\/0 {
  --tw-gradient-to: rgb(var(--brand-plum-rgb) / 0) var(--tw-gradient-to-position);
}
.to-brand-royal-gold {
  --tw-gradient-to: rgb(var(--brand-royal-gold-rgb) / 1) var(--tw-gradient-to-position);
}
.to-slate-100 {
  --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.fill-brand-plum {
  fill: rgb(var(--brand-plum-rgb) / 1);
}
.fill-brand-royal-gold {
  fill: rgb(var(--brand-royal-gold-rgb) / 1);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: hsl(295 33% 18%);
  fill: hsl(var(--primary));
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-16 {
  padding: 4rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[1px\] {
  padding: 1px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-0 {
  padding-left: 0px;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}
.font-serif {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.55rem\] {
  font-size: 0.55rem;
}
.text-\[0\.62rem\] {
  font-size: 0.62rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.68rem\] {
  font-size: 0.68rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.72rem\] {
  font-size: 0.72rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.82rem\] {
  font-size: 0.82rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[0\.97rem\] {
  font-size: 0.97rem;
}
.text-\[0\.98rem\] {
  font-size: 0.98rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[2\.6rem\] {
  font-size: 2.6rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[18px\] {
  line-height: 18px;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[\.22em\] {
  letter-spacing: .22em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.32em\] {
  letter-spacing: 0.32em;
}
.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / 1) !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#003087\] {
  --tw-text-opacity: 1;
  color: rgb(0 48 135 / 1);
  color: rgb(0 48 135 / var(--tw-text-opacity, 1));
}
.text-\[\#18212F\] {
  --tw-text-opacity: 1;
  color: rgb(24 33 47 / 1);
  color: rgb(24 33 47 / var(--tw-text-opacity, 1));
}
.text-\[\#4B5563\] {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-\[\#4C43E8\] {
  --tw-text-opacity: 1;
  color: rgb(76 67 232 / 1);
  color: rgb(76 67 232 / var(--tw-text-opacity, 1));
}
.text-\[\#4C43E8\]\/70 {
  color: rgb(76 67 232 / 0.7);
}
.text-\[\#4C43E8\]\/85 {
  color: rgb(76 67 232 / 0.85);
}
.text-\[\#5A1F1F\] {
  --tw-text-opacity: 1;
  color: rgb(90 31 31 / 1);
  color: rgb(90 31 31 / var(--tw-text-opacity, 1));
}
.text-\[\#5A4A2E\] {
  --tw-text-opacity: 1;
  color: rgb(90 74 46 / 1);
  color: rgb(90 74 46 / var(--tw-text-opacity, 1));
}
.text-\[\#635BFF\] {
  --tw-text-opacity: 1;
  color: rgb(99 91 255 / 1);
  color: rgb(99 91 255 / var(--tw-text-opacity, 1));
}
.text-\[\#7A511B\] {
  --tw-text-opacity: 1;
  color: rgb(122 81 27 / 1);
  color: rgb(122 81 27 / var(--tw-text-opacity, 1));
}
.text-\[\#7A5A2E\] {
  --tw-text-opacity: 1;
  color: rgb(122 90 46 / 1);
  color: rgb(122 90 46 / var(--tw-text-opacity, 1));
}
.text-\[\#7A5A2E\]\/70 {
  color: rgb(122 90 46 / 0.7);
}
.text-\[\#7A5A2E\]\/80 {
  color: rgb(122 90 46 / 0.8);
}
.text-\[\#B98A32\] {
  --tw-text-opacity: 1;
  color: rgb(185 138 50 / 1);
  color: rgb(185 138 50 / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: hsl(295 33% 18%);
  color: hsl(var(--accent-foreground));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / 1);
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / 1);
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / 1);
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-brand-bronze {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-bronze-rgb) / 1);
  color: rgb(var(--brand-bronze-rgb) / var(--tw-text-opacity, 1));
}
.text-brand-bronze\/70 {
  color: rgb(var(--brand-bronze-rgb) / 0.7);
}
.text-brand-champagne {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-champagne-rgb) / 1);
  color: rgb(var(--brand-champagne-rgb) / var(--tw-text-opacity, 1));
}
.text-brand-cream {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-cream-rgb) / 1);
  color: rgb(var(--brand-cream-rgb) / var(--tw-text-opacity, 1));
}
.text-brand-diamond {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-diamond-rgb) / 1);
  color: rgb(var(--brand-diamond-rgb) / var(--tw-text-opacity, 1));
}
.text-brand-fertility {
  color: #7EA77A;
  color: var(--brand-fertility);
}
.text-brand-gold {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-gold-rgb) / 1);
  color: rgb(var(--brand-gold-rgb) / var(--tw-text-opacity, 1));
}
.text-brand-ivory {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-ivory-rgb) / 1);
  color: rgb(var(--brand-ivory-rgb) / var(--tw-text-opacity, 1));
}
.text-brand-ivory\/90 {
  color: rgb(var(--brand-ivory-rgb) / 0.9);
}
.text-brand-plum {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-plum-rgb) / 1);
  color: rgb(var(--brand-plum-rgb) / var(--tw-text-opacity, 1));
}
.text-brand-plum\/25 {
  color: rgb(var(--brand-plum-rgb) / 0.25);
}
.text-brand-plum\/40 {
  color: rgb(var(--brand-plum-rgb) / 0.4);
}
.text-brand-plum\/45 {
  color: rgb(var(--brand-plum-rgb) / 0.45);
}
.text-brand-plum\/50 {
  color: rgb(var(--brand-plum-rgb) / 0.5);
}
.text-brand-plum\/55 {
  color: rgb(var(--brand-plum-rgb) / 0.55);
}
.text-brand-plum\/60 {
  color: rgb(var(--brand-plum-rgb) / 0.6);
}
.text-brand-plum\/65 {
  color: rgb(var(--brand-plum-rgb) / 0.65);
}
.text-brand-plum\/70 {
  color: rgb(var(--brand-plum-rgb) / 0.7);
}
.text-brand-plum\/75 {
  color: rgb(var(--brand-plum-rgb) / 0.75);
}
.text-brand-plum\/80 {
  color: rgb(var(--brand-plum-rgb) / 0.8);
}
.text-brand-plum\/85 {
  color: rgb(var(--brand-plum-rgb) / 0.85);
}
.text-brand-royal-gold {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-royal-gold-rgb) / 1);
  color: rgb(var(--brand-royal-gold-rgb) / var(--tw-text-opacity, 1));
}
.text-brand-royal-gold\/80 {
  color: rgb(var(--brand-royal-gold-rgb) / 0.8);
}
.text-brand-sage {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-sage-rgb) / 1);
  color: rgb(var(--brand-sage-rgb) / var(--tw-text-opacity, 1));
}
.text-brand-terracotta {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-terracotta-rgb) / 1);
  color: rgb(var(--brand-terracotta-rgb) / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: hsl(295 33% 18%);
  color: hsl(var(--card-foreground));
}
.text-cream {
  --tw-text-opacity: 1;
  color: rgb(255 249 240 / 1);
  color: rgb(255 249 240 / var(--tw-text-opacity, 1));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  color: hsl(15 47% 60%);
  color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(43 55% 96%);
  color: hsl(var(--destructive-foreground));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / 1);
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / 1);
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / 1);
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / 1);
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-foreground {
  color: hsl(295 33% 18%);
  color: hsl(var(--foreground));
}
.text-foreground\/50 {
  color: hsl(295 33% 18% / 0.5);
  color: hsl(var(--foreground) / 0.5);
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / 1);
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-indigo-900 {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / 1);
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  color: hsl(283 17% 30%);
  color: hsl(var(--muted-foreground));
}
.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / 1);
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / 1);
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: hsl(295 33% 18%);
  color: hsl(var(--popover-foreground));
}
.text-primary {
  color: hsl(295 33% 18%);
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(43 55% 96%);
  color: hsl(var(--primary-foreground));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / 1);
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / 1);
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / 1);
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-800\/90 {
  color: rgb(153 27 27 / 0.9);
}
.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / 1);
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-rose-900 {
  --tw-text-opacity: 1;
  color: rgb(136 19 55 / 1);
  color: rgb(136 19 55 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: hsl(295 33% 18%);
  color: hsl(var(--secondary-foreground));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / 1);
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / 1);
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / 1);
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / 1);
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-900 {
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / 1);
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.decoration-brand-royal-gold {
  -webkit-text-decoration-color: rgb(var(--brand-royal-gold-rgb) / 1);
          text-decoration-color: rgb(var(--brand-royal-gold-rgb) / 1);
}
.decoration-dotted {
  -webkit-text-decoration-style: dotted;
          text-decoration-style: dotted;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.accent-brand-royal-gold {
  accent-color: rgb(var(--brand-royal-gold-rgb) / 1);
}
.opacity-0 {
  opacity: 0;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_25px_-14px_rgba\(185\2c 138\2c 50\2c 0\.55\)\] {
  --tw-shadow: 0 10px 25px -14px rgba(185,138,50,0.55);
  --tw-shadow-colored: 0 10px 25px -14px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_30px_-20px_rgba\(185\2c 138\2c 50\2c 0\.35\)\] {
  --tw-shadow: 0 10px 30px -20px rgba(185,138,50,0.35);
  --tw-shadow-colored: 0 10px 30px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_14px_40px_rgba\(122\2c 81\2c 27\2c 0\.35\)\2c inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.85\)\] {
  --tw-shadow: 0 14px 40px rgba(122,81,27,0.35),inset 0 1px 0 rgba(255,255,255,0.85);
  --tw-shadow-colored: 0 14px 40px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_40px_-20px_rgba\(216\2c 180\2c 106\2c 0\.6\)\] {
  --tw-shadow: 0 18px 40px -20px rgba(216,180,106,0.6);
  --tw-shadow-colored: 0 18px 40px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_40px_-25px_rgba\(185\2c 138\2c 50\2c 0\.55\)\] {
  --tw-shadow: 0 18px 40px -25px rgba(185,138,50,0.55);
  --tw-shadow-colored: 0 18px 40px -25px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_50px_-25px_rgba\(58\2c 31\2c 61\2c 0\.35\)\] {
  --tw-shadow: 0 18px 50px -25px rgba(58,31,61,0.35);
  --tw-shadow-colored: 0 18px 50px -25px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_50px_-30px_rgba\(58\2c 31\2c 61\2c 0\.35\)\] {
  --tw-shadow: 0 20px 50px -30px rgba(58,31,61,0.35);
  --tw-shadow-colored: 0 20px 50px -30px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_60px_-30px_rgba\(122\2c 81\2c 27\2c 0\.35\)\] {
  --tw-shadow: 0 20px 60px -30px rgba(122,81,27,0.35);
  --tw-shadow-colored: 0 20px 60px -30px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_60px_-30px_rgba\(185\2c 138\2c 50\2c 0\.35\)\] {
  --tw-shadow: 0 20px 60px -30px rgba(185,138,50,0.35);
  --tw-shadow-colored: 0 20px 60px -30px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_80px_rgba\(122\2c 81\2c 27\2c 0\.45\)\] {
  --tw-shadow: 0 24px 80px rgba(122,81,27,0.45);
  --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_20px_-8px_rgba\(185\2c 138\2c 50\2c 0\.6\)\] {
  --tw-shadow: 0 8px 20px -8px rgba(185,138,50,0.6);
  --tw-shadow-colored: 0 8px 20px -8px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-\[\#635BFF\]\/20 {
  --tw-ring-color: rgb(99 91 255 / 0.2);
}
.ring-\[\#E8D5A8\]\/50 {
  --tw-ring-color: rgb(232 213 168 / 0.5);
}
.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.ring-brand-royal-gold {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--brand-royal-gold-rgb) / var(--tw-ring-opacity, 1));
}
.ring-brand-royal-gold\/30 {
  --tw-ring-color: rgb(var(--brand-royal-gold-rgb) / 0.3);
}
.ring-brand-royal-gold\/40 {
  --tw-ring-color: rgb(var(--brand-royal-gold-rgb) / 0.4);
}
.ring-ring {
  --tw-ring-color: hsl(var(--ring));
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.ring-offset-\[1px\] {
  --tw-ring-offset-width: 1px;
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: 1;
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: 1;
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: "kern", "ss01";
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  letter-spacing: -0.015em;
  color: hsl(295 33% 18%);
  color: hsl(var(--foreground));
}

/* Legacy utility classes referenced by App.js (kept working with new palette) */
.eyebrow { font-family: 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: #C99A2C; color: var(--brand-bronze); font-weight: 600; }
.muted { color: rgba(58, 31, 61, 0.68); }
.small-note { font-size: 0.78rem; color: rgba(58, 31, 61, 0.6); }
.action-copy { font-size: 1.02rem; line-height: 1.55; color: #3A1F3D; color: var(--brand-plum); }

/* Iter 145.10 — canonical button styles. `.button-primary` and
 * `.button-secondary` are the legacy class names still used across
 * MarketingPage CTAs, SocialImpactPage, AdminConsultationsPage,
 * ConsultationBookingPage, MeetingRoomPage, AdminMessagesPage,
 * App.js dashboard upsells etc. They are now visually identical to
 * <Premium3DControl variant="primary"/> and <Premium3DControl
 * variant="default"/> respectively (see design/premium3dGlobal.css
 * .premium-control-primary / .premium-control) so the entire platform
 * shares ONE premium liquid-gold pill for primaries and ONE gold-outlined
 * pill for secondaries — matching the "Enquire about a retreat" CTA. */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  border: 1px solid rgba(122, 81, 27, .50);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 22%),
    linear-gradient(135deg, #fff4c6 0%, #f6d878 22%, #d8a93c 46%, #b98a32 72%, #f6d878 100%);
  color: #3a2408;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 28px rgba(122,81,27,.20),
    0 4px 0 rgba(122,81,27,.14);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.button-primary:hover {
  transform: translateY(-2px);
  color: #3a2408;  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 18px 36px rgba(122,81,27,.20),
    0 5px 0 rgba(122,81,27,.10);
}
.button-primary:focus-visible {
  outline: 3px solid rgba(185,138,50,.42);
  outline-offset: 3px;
}
.button-primary svg,
.button-primary .lucide { color: #3a2408; width: 20px; height: 20px; }

.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(185, 138, 50, .65);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,249,240,.96), rgba(246,234,203,.92));
  color: #18212f;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 28px rgba(122,81,27,.20),
    0 4px 0 rgba(122,81,27,.14);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.button-secondary:hover {
  transform: translateY(-2px);
  color: #18212f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 18px 36px rgba(122,81,27,.20),
    0 5px 0 rgba(122,81,27,.10);
}
.button-secondary:focus-visible {
  outline: 3px solid rgba(185,138,50,.42);
  outline-offset: 3px;
}
.button-secondary svg,
.button-secondary .lucide { color: #b98a32; width: 18px; height: 18px; }

.app-shell { max-width: 1240px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #E8CB6A; border-bottom: 1px solid var(--brand-champagne); }
.brand-stack h1 { font-size: clamp(1.75rem, 2.2vw, 2.4rem); line-height: 1.1; margin: 0.25rem 0 0.35rem; }
.brand-stack p.eyebrow { margin: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; gap: 1rem; }
.payment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 0.75rem; gap: 0.75rem; margin-top: 0.75rem; }
.service-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.service-select { background: #fff; border: 1px solid #E8CB6A; border: 1px solid var(--brand-champagne); border-radius: 0.65rem; padding: 0.55rem 0.85rem; color: #3A1F3D; color: var(--brand-plum); width: 100%; outline: none; transition: border 0.15s, box-shadow 0.15s; }
.service-select:focus { border-color: #D8B46A; border-color: var(--brand-gold); box-shadow: 0 0 0 3px rgba(216, 180, 106, 0.25); }

.loading-screen { display: flex; align-items: center; justify-content: center; min-height: 50vh; color: #3A1F3D; color: var(--brand-plum); font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: linear-gradient(135deg, #EFD892 0%, #F4E5B8 55%, #E8CB6A 100%); background: linear-gradient(135deg, var(--brand-ivory) 0%, var(--brand-cream) 55%, var(--brand-champagne) 100%); }
.auth-card { width: 100%; max-width: 460px; background: #E8CB6A; background: var(--brand-porcelain); border: 1px solid rgba(216, 180, 106, 0.25); border-radius: 1.5rem; box-shadow: 0 20px 60px -20px rgba(58, 31, 61, 0.25); }
.auth-header { text-align: center; padding-bottom: 0.75rem; }
.auth-header .card-title, .auth-header [data-slot="card-title"] { font-family: 'Cormorant Garamond', serif; font-size: 1.85rem; }

.marketing-card { background: #E8CB6A; background: var(--brand-porcelain); border: 1px solid rgba(216, 180, 106, 0.2); border-radius: 1.25rem; box-shadow: 0 12px 40px -20px rgba(58, 31, 61, 0.18); }

/* Public marketing shell — subtle warmth without SaaS-blue */
.marketing-shell { background:
  radial-gradient(1200px 500px at 15% -10%, rgba(216, 180, 106, 0.14), transparent 60%),
  radial-gradient(900px 500px at 100% 10%, rgba(159, 183, 154, 0.14), transparent 60%),
  #EFD892; background:
  radial-gradient(1200px 500px at 15% -10%, rgba(216, 180, 106, 0.14), transparent 60%),
  radial-gradient(900px 500px at 100% 10%, rgba(159, 183, 154, 0.14), transparent 60%),
  var(--brand-ivory); min-height: 100vh; }

@media (max-width: 640px) {
  .app-shell { padding: 1.25rem 0.9rem 3rem; }
  .topbar { gap: 0.75rem; }
  .brand-stack h1 { font-size: 1.6rem; }
  .service-select, input, textarea, button { min-height: 44px; }
}

.file\:border-0::-webkit-file-upload-button {
  border-width: 0px;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::-webkit-file-upload-button {
  background-color: transparent;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

.file\:text-sm::-webkit-file-upload-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::-webkit-file-upload-button {
  font-weight: 500;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-foreground::-webkit-file-upload-button {
  color: hsl(295 33% 18%);
  color: hsl(var(--foreground));
}

.file\:text-foreground::file-selector-button {
  color: hsl(295 33% 18%);
  color: hsl(var(--foreground));
}

.placeholder\:text-brand-plum\/50::placeholder {
  color: rgb(var(--brand-plum-rgb) / 0.5);
}

.placeholder\:text-muted-foreground::placeholder {
  color: hsl(283 17% 30%);
  color: hsl(var(--muted-foreground));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(1rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(1rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child {
  border-left-width: 1px;
}

.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(1rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(1rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-none:last-child {
  border-style: none;
}

.focus-within\:relative:focus-within {
  position: relative;
}

.focus-within\:z-20:focus-within {
  z-index: 20;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.05\]:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-brand-gold:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-gold-rgb) / 1);
  border-color: rgb(var(--brand-gold-rgb) / var(--tw-border-opacity, 1));
}

.hover\:border-brand-royal-gold:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-royal-gold-rgb) / 1);
  border-color: rgb(var(--brand-royal-gold-rgb) / var(--tw-border-opacity, 1));
}

.hover\:border-brand-royal-gold\/60:hover {
  border-color: rgb(var(--brand-royal-gold-rgb) / 0.6);
}

.hover\:border-red-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / 1);
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[\#F5E7C2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 231 194 / 1);
  background-color: rgb(245 231 194 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#FFF9F0\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 249 240 / 1);
  background-color: rgb(255 249 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#FFF9F0\]\/60:hover {
  background-color: rgb(255 249 240 / 0.6);
}

.hover\:bg-accent:hover {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}

.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}

.hover\:bg-brand-champagne:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-champagne-rgb) / 1);
  background-color: rgb(var(--brand-champagne-rgb) / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-champagne\/40:hover {
  background-color: rgb(var(--brand-champagne-rgb) / 0.4);
}

.hover\:bg-brand-champagne\/50:hover {
  background-color: rgb(var(--brand-champagne-rgb) / 0.5);
}

.hover\:bg-brand-champagne\/60:hover {
  background-color: rgb(var(--brand-champagne-rgb) / 0.6);
}

.hover\:bg-brand-cream:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-cream-rgb) / 1);
  background-color: rgb(var(--brand-cream-rgb) / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-cream\/60:hover {
  background-color: rgb(var(--brand-cream-rgb) / 0.6);
}

.hover\:bg-brand-gold:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-gold-rgb) / 1);
  background-color: rgb(var(--brand-gold-rgb) / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-ivory:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-ivory-rgb) / 1);
  background-color: rgb(var(--brand-ivory-rgb) / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-pale-gold:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-pale-gold-rgb) / 1);
  background-color: rgb(var(--brand-pale-gold-rgb) / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-pale-gold\/20:hover {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.2);
}

.hover\:bg-brand-pale-gold\/30:hover {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.3);
}

.hover\:bg-brand-pale-gold\/40:hover {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.4);
}

.hover\:bg-brand-pale-gold\/50:hover {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.5);
}

.hover\:bg-brand-pale-gold\/70:hover {
  background-color: rgb(var(--brand-pale-gold-rgb) / 0.7);
}

.hover\:bg-brand-plum\/20:hover {
  background-color: rgb(var(--brand-plum-rgb) / 0.2);
}

.hover\:bg-brand-royal-gold:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-royal-gold-rgb) / 1);
  background-color: rgb(var(--brand-royal-gold-rgb) / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-royal-gold\/10:hover {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.1);
}

.hover\:bg-brand-royal-gold\/15:hover {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.15);
}

.hover\:bg-brand-royal-gold\/20:hover {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.2);
}

.hover\:bg-brand-royal-gold\/25:hover {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.25);
}

.hover\:bg-brand-royal-gold\/30:hover {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.3);
}

.hover\:bg-brand-royal-gold\/40:hover {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.4);
}

.hover\:bg-brand-royal-gold\/50:hover {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.5);
}

.hover\:bg-cream:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 249 240 / 1);
  background-color: rgb(255 249 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-destructive\/80:hover {
  background-color: hsl(15 47% 60% / 0.8);
  background-color: hsl(var(--destructive) / 0.8);
}

.hover\:bg-destructive\/90:hover {
  background-color: hsl(15 47% 60% / 0.9);
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-muted:hover {
  background-color: hsl(40 65% 88%);
  background-color: hsl(var(--muted));
}

.hover\:bg-muted\/50:hover {
  background-color: hsl(40 65% 88% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}

.hover\:bg-primary:hover {
  background-color: hsl(295 33% 18%);
  background-color: hsl(var(--primary));
}

.hover\:bg-primary\/80:hover {
  background-color: hsl(295 33% 18% / 0.8);
  background-color: hsl(var(--primary) / 0.8);
}

.hover\:bg-primary\/90:hover {
  background-color: hsl(295 33% 18% / 0.9);
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / 1);
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary:hover {
  background-color: hsl(38 100% 97%);
  background-color: hsl(var(--secondary));
}

.hover\:bg-secondary\/80:hover {
  background-color: hsl(38 100% 97% / 0.8);
  background-color: hsl(var(--secondary) / 0.8);
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/60:hover {
  background-color: rgb(255 255 255 / 0.6);
}

.hover\:bg-white\/70:hover {
  background-color: rgb(255 255 255 / 0.7);
}

.hover\:text-\[\#B98A32\]:hover {
  --tw-text-opacity: 1;
  color: rgb(185 138 50 / 1);
  color: rgb(185 138 50 / var(--tw-text-opacity, 1));
}

.hover\:text-accent-foreground:hover {
  color: hsl(295 33% 18%);
  color: hsl(var(--accent-foreground));
}

.hover\:text-brand-bronze:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-bronze-rgb) / 1);
  color: rgb(var(--brand-bronze-rgb) / var(--tw-text-opacity, 1));
}

.hover\:text-brand-diamond:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-diamond-rgb) / 1);
  color: rgb(var(--brand-diamond-rgb) / var(--tw-text-opacity, 1));
}

.hover\:text-brand-gold:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-gold-rgb) / 1);
  color: rgb(var(--brand-gold-rgb) / var(--tw-text-opacity, 1));
}

.hover\:text-brand-plum:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-plum-rgb) / 1);
  color: rgb(var(--brand-plum-rgb) / var(--tw-text-opacity, 1));
}

.hover\:text-brand-royal-gold:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-royal-gold-rgb) / 1);
  color: rgb(var(--brand-royal-gold-rgb) / var(--tw-text-opacity, 1));
}

.hover\:text-foreground:hover {
  color: hsl(295 33% 18%);
  color: hsl(var(--foreground));
}

.hover\:text-muted-foreground:hover {
  color: hsl(283 17% 30%);
  color: hsl(var(--muted-foreground));
}

.hover\:text-primary-foreground:hover {
  color: hsl(43 55% 96%);
  color: hsl(var(--primary-foreground));
}

.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.hover\:no-underline:hover {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-95:hover {
  opacity: 0.95;
}

.hover\:shadow-\[0_16px_40px_-16px_rgba\(58\2c 31\2c 61\2c 0\.25\)\]:hover {
  --tw-shadow: 0 16px 40px -16px rgba(58,31,61,0.25);
  --tw-shadow-colored: 0 16px 40px -16px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_18px_48px_-16px_rgba\(58\2c 31\2c 61\2c 0\.28\)\]:hover {
  --tw-shadow: 0 18px 48px -16px rgba(58,31,61,0.28);
  --tw-shadow-colored: 0 18px 48px -16px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_20px_40px_-20px_rgba\(185\2c 138\2c 50\2c 0\.45\)\]:hover {
  --tw-shadow: 0 20px 40px -20px rgba(185,138,50,0.45);
  --tw-shadow-colored: 0 20px 40px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:brightness-105:hover {
  --tw-brightness: brightness(1.05);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:border-brand-royal-gold:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-royal-gold-rgb) / 1);
  border-color: rgb(var(--brand-royal-gold-rgb) / var(--tw-border-opacity, 1));
}

.focus\:bg-accent:focus {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}

.focus\:bg-primary:focus {
  background-color: hsl(295 33% 18%);
  background-color: hsl(var(--primary));
}

.focus\:text-accent-foreground:focus {
  color: hsl(295 33% 18%);
  color: hsl(var(--accent-foreground));
}

.focus\:text-primary-foreground:focus {
  color: hsl(43 55% 96%);
  color: hsl(var(--primary-foreground));
}

.focus\:opacity-100:focus {
  opacity: 1;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[\#635BFF\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 91 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-\[\#D8B46A\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(216 180 106 / var(--tw-ring-opacity, 1));
}

.focus\:ring-\[\#F5C542\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 197 66 / var(--tw-ring-opacity, 1));
}

.focus\:ring-brand-gold:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--brand-gold-rgb) / var(--tw-ring-opacity, 1));
}

.focus\:ring-brand-royal-gold:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--brand-royal-gold-rgb) / var(--tw-ring-opacity, 1));
}

.focus\:ring-brand-royal-gold\/40:focus {
  --tw-ring-color: rgb(var(--brand-royal-gold-rgb) / 0.4);
}

.focus\:ring-brand-royal-gold\/50:focus {
  --tw-ring-color: rgb(var(--brand-royal-gold-rgb) / 0.5);
}

.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-brand-royal-gold {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-royal-gold-rgb) / 1);
  color: rgb(var(--brand-royal-gold-rgb) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(40 65% 88% / 0.4);
  border-color: hsl(var(--muted) / 0.4);
}

.group.toaster .group-\[\.toaster\]\:border-border {
  border-color: hsl(40 65% 88%);
  border-color: hsl(var(--border));
}

.group.toast .group-\[\.toast\]\:bg-muted {
  background-color: hsl(40 65% 88%);
  background-color: hsl(var(--muted));
}

.group.toast .group-\[\.toast\]\:bg-primary {
  background-color: hsl(295 33% 18%);
  background-color: hsl(var(--primary));
}

.group.toaster .group-\[\.toaster\]\:bg-background {
  background-color: hsl(43 55% 96%);
  background-color: hsl(var(--background));
}

.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.group.toast .group-\[\.toast\]\:text-muted-foreground {
  color: hsl(283 17% 30%);
  color: hsl(var(--muted-foreground));
}

.group.toast .group-\[\.toast\]\:text-primary-foreground {
  color: hsl(43 55% 96%);
  color: hsl(var(--primary-foreground));
}

.group.toaster .group-\[\.toaster\]\:text-foreground {
  color: hsl(295 33% 18%);
  color: hsl(var(--foreground));
}

.group.toaster .group-\[\.toaster\]\:shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(15 47% 60% / 0.3);
  border-color: hsl(var(--destructive) / 0.3);
}

.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(15 47% 60%);
  background-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(43 55% 96%);
  color: hsl(var(--destructive-foreground));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / 1);
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
  --tw-ring-offset-color: #dc2626;
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}

.has-\[\:disabled\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}

.aria-selected\:bg-accent[aria-selected="true"] {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}

.aria-selected\:bg-accent\/50[aria-selected="true"] {
  background-color: hsl(41 58% 63% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}

.aria-selected\:text-accent-foreground[aria-selected="true"] {
  color: hsl(295 33% 18%);
  color: hsl(var(--accent-foreground));
}

.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: hsl(283 17% 30%);
  color: hsl(var(--muted-foreground));
}

.aria-selected\:opacity-100[aria-selected="true"] {
  opacity: 1;
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(43 55% 96%);
  background-color: hsl(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(295 33% 18%);
  background-color: hsl(var(--primary));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(41 58% 63% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  background-color: hsl(38 100% 97%);
  background-color: hsl(var(--secondary));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(40 65% 88%);
  background-color: hsl(var(--muted));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(40 65% 88%);
  background-color: hsl(var(--input));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: hsl(283 17% 30%);
  color: hsl(var(--muted-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(295 33% 18%);
  color: hsl(var(--accent-foreground));
}

.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(295 33% 18%);
  color: hsl(var(--foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(43 55% 96%);
  color: hsl(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(295 33% 18%);
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(295 33% 18%);
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(283 17% 30%);
  color: hsl(var(--muted-foreground));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=active\]\:shadow[data-state="active"] {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.dark\:border-destructive:is(.dark *) {
  border-color: hsl(15 47% 60%);
  border-color: hsl(var(--destructive));
}

@media (min-width: 640px) {

  .sm\:bottom-0 {
    bottom: 0px;
  }

  .sm\:bottom-6 {
    bottom: 1.5rem;
  }

  .sm\:left-auto {
    left: auto;
  }

  .sm\:right-0 {
    right: 0px;
  }

  .sm\:right-6 {
    right: 1.5rem;
  }

  .sm\:top-auto {
    top: auto;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .sm\:ml-2 {
    margin-left: 0.5rem;
  }

  .sm\:mr-6 {
    margin-right: 1.5rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:h-20 {
    height: 5rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:h-7 {
    height: 1.75rem;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

  .sm\:w-14 {
    width: 3.5rem;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:w-7 {
    width: 1.75rem;
  }

  .sm\:max-w-\[20rem\] {
    max-width: 20rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[180px\2c 1fr\2c 80px\] {
    grid-template-columns: 180px 1fr 80px;
  }

  .sm\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:rounded-\[28px\] {
    border-radius: 28px;
  }

  .sm\:rounded-lg {
    border-radius: 1rem;
    border-radius: var(--radius);
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:pr-16 {
    padding-right: 4rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-56 {
    height: 14rem;
  }

  .md\:w-14 {
    width: 3.5rem;
  }

  .md\:w-16 {
    width: 4rem;
  }

  .md\:w-24 {
    width: 6rem;
  }

  .md\:w-28 {
    width: 7rem;
  }

  .md\:w-40 {
    width: 10rem;
  }

  .md\:w-56 {
    width: 14rem;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:max-w-\[15rem\] {
    max-width: 15rem;
  }

  .md\:max-w-\[280px\] {
    max-width: 280px;
  }

  .md\:max-w-\[420px\] {
    max-width: 420px;
  }

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .md\:grid-cols-\[1\.4fr_1fr_1fr_1fr\] {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:items-baseline {
    align-items: baseline;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-5 {
    padding: 1.25rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-7 {
    padding: 1.75rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:pt-14 {
    padding-top: 3.5rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .lg\:aspect-video {
    aspect-ratio: 16 / 9;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.15fr_1fr\] {
    grid-template-columns: 1.15fr 1fr;
  }

  .lg\:grid-cols-\[1\.3fr_1fr\] {
    grid-template-columns: 1.3fr 1fr;
  }

  .lg\:grid-cols-\[1fr_1fr\] {
    grid-template-columns: 1fr 1fr;
  }

  .lg\:grid-cols-\[320px_1fr\] {
    grid-template-columns: 320px 1fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_320px\] {
    grid-template-columns: minmax(0,1fr) 320px;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .lg\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:pt-14 {
    padding-top: 3.5rem;
  }

  .lg\:pt-24 {
    padding-top: 6rem;
  }

  .lg\:text-left {
    text-align: left;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {

  .xl\:flex {
    display: flex;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {

  .\32xl\:flex {
    display: flex;
  }

  .\32xl\:hidden {
    display: none;
  }
}

.\[\&\+div\]\:text-xs+div {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
  border-top-right-radius: calc(1rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(1rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
  border-top-left-radius: calc(1rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(1rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
  border-radius: calc(1rem - 2px);
  border-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
  background-color: hsl(41 58% 63%);
  background-color: hsl(var(--accent));
}

.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
  border-top-left-radius: calc(1rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(1rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
  border-top-right-radius: calc(1rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(1rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
  background-color: hsl(41 58% 63% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}

.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
  border-top-right-radius: calc(1rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(1rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}

.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}

.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}

.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-3\.5>svg {
  height: 0.875rem;
}

.\[\&\>svg\]\:w-3\.5>svg {
  width: 0.875rem;
}

.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(15 47% 60%);
  color: hsl(var(--destructive));
}

.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(295 33% 18%);
  color: hsl(var(--foreground));
}

.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(283 17% 30%);
  color: hsl(var(--muted-foreground));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

/* ============================================================
 * Premium 3D Global Design System — Make Baby Complete
 * ------------------------------------------------------------
 * This file lifts the approved parts of premium3dSystem.css
 * (the scoped preview stylesheet) into GLOBAL classes with the
 * `premium-3d-*` and `premium-*` prefix. Import ONCE at app root.
 *
 * Kept OUT-OF-SCOPE from the old .p3d- preview classes so the
 * preview page continues to work unchanged.
 * ============================================================ */

:root {
  --p-diamond: #ffffff;
  --p-pearl: #faf7f0;
  --p-warm-ivory: #fff9f0;
  --p-champagne: #f3e6d0;
  --p-pale-gold: #f6eacb;
  --p-gold: #d8b46a;
  --p-soft-gold: #c9a45c;
  --p-royal-gold: #b98a32;
  --p-bronze: #7a511b;
  --p-platinum: #f1f3f5;
  --p-silver: #c9cdd3;
  --p-diamond-shadow: #d8dde3;
  --p-royal-blue: #1f4e79;
  --p-royal-green: #2f6b4f;
  --p-ink: #18212f;
  --p-charcoal: #2d2a28;
  --p-slate: #5d6673;

  --p-radius-xl: 32px;
  --p-radius-2xl: 42px;
  --p-control-h: 56px;
  --p-icon-size: 22px;
}

/* ------------------------------------------------------------
 * Premium3DSurface — the raised card plate
 * ------------------------------------------------------------ */
.premium-3d-stage {
  perspective: 1400px;
  transform-style: preserve-3d;
}

.premium-3d-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 32px;
  border-radius: var(--p-radius-xl);
  color: #18212f;
  color: var(--p-ink);
  transform: translateZ(0);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
}

.premium-3d-surface.hoverable:hover {
  transform: translateY(-6px) translateZ(24px);
  filter: saturate(1.05) brightness(1.02);
}

.premium-3d-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.95),
      rgba(246,216,120,.88),
      rgba(185,138,50,.72),
      rgba(255,255,255,.72),
      rgba(185,138,50,.78)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.premium-3d-surface > .premium-3d-inner {
  position: relative;
  z-index: 2;
}

.premium-material-gold {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 24%),
    linear-gradient(135deg, #fff4c6, #f6d878 28%, #d8a93c 54%, #fff4c6);
  border: 1px solid rgba(122,81,27,.50);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -4px 12px rgba(122,81,27,.28),
    0 30px 70px rgba(122,81,27,.26),
    0 7px 0 rgba(122,81,27,.12);
}
.premium-material-platinum {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.98), transparent 24%),
    linear-gradient(135deg, #ffffff, #f1f3f5 30%, #c9cdd3 56%, #ffffff);
  border: 1px solid rgba(145,153,165,.52);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -4px 12px rgba(95,103,116,.18),
    0 30px 70px rgba(95,103,116,.18),
    0 7px 0 rgba(95,103,116,.08);
}
.premium-material-diamond {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,1), transparent 24%),
    linear-gradient(135deg, #ffffff, #faf7f0 42%, #f1f3f5);
  border: 1px solid rgba(216,221,227,.82);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 0 -3px 10px rgba(216,221,227,.28),
    0 26px 62px rgba(122,81,27,.14),
    0 6px 0 rgba(216,221,227,.18);
}
.premium-material-green {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 24%),
    linear-gradient(135deg, #ffffff, #eef6ef 40%, #c9dcc8);
  border: 1px solid rgba(47,107,79,.35);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    0 24px 60px rgba(47,107,79,.18),
    0 6px 0 rgba(47,107,79,.10);
}
.premium-material-blue {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 24%),
    linear-gradient(135deg, #ffffff, #eef5fb 40%, #c7d8e8);
  border: 1px solid rgba(31,78,121,.32);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    0 24px 60px rgba(31,78,121,.18),
    0 6px 0 rgba(31,78,121,.10);
}

.premium-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,.68) 48%,
      rgba(255,230,150,.38) 54%,
      transparent 66%,
      transparent 100%
    );
  transform: translateX(-140%);
  animation: premiumShine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.premium-sparkles {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,225,140,.80) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(185,138,50,.55) 0 1px, transparent 1.5px);
  background-size: 120px 120px, 180px 180px, 240px 240px;
  background-position: 12% 18%, 78% 22%, 45% 75%;
  opacity: .22;
  animation: premiumSparkleDrift 12s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes premiumShine {
  0%, 55% { transform: translateX(-140%); opacity: 0; }
  70% { opacity: .68; }
  90% { transform: translateX(140%); opacity: .18; }
  100% { transform: translateX(140%); opacity: 0; }
}

@keyframes premiumSparkleDrift {
  from { opacity: .12; transform: translate3d(0, 0, 0); }
  to { opacity: .28; transform: translate3d(8px, -10px, 0); }
}

/* ------------------------------------------------------------
 * Premium3DControl — symmetric pill button/selector
 * ------------------------------------------------------------ */
.premium-control {
  min-height: 56px;
  min-height: var(--p-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 0 24px;
  border: 1px solid rgba(185,138,50,.65);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,249,240,.96), rgba(246,234,203,.92));
  color: #18212f;
  font-weight: 700;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 28px rgba(122,81,27,.20),
    0 4px 0 rgba(122,81,27,.14);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
}

.premium-control:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 18px 36px rgba(122,81,27,.20),
    0 5px 0 rgba(122,81,27,.10);
}

.premium-control:focus-visible {
  outline: 3px solid rgba(185,138,50,.42);
  outline-offset: 3px;
}

.premium-control svg {
  width: 22px;
  width: var(--p-icon-size);
  height: 22px;
  height: var(--p-icon-size);
  flex: 0 0 22px;
  flex: 0 0 var(--p-icon-size);
  color: #b98a32;
}

.premium-control--lg {
  padding: 0 32px;
  font-size: 1.05rem;
}

.premium-control-primary {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 22%),
    linear-gradient(135deg, #fff4c6 0%, #f6d878 22%, #d8a93c 46%, #b98a32 72%, #f6d878 100%);
  border-color: rgba(122,81,27,.50);
  color: #3a2408;
}
.premium-control-primary svg { color: #3a2408; }

.premium-control-platinum {
  /* Iter 145.10 — retired the silver/grey platinum look. Per the site-wide
     button standardization, ALL secondary CTAs now share the same premium
     ivory-cream pill with a warm gold border (matching the canonical default
     .premium-control base), so no button on the platform reads as "silver"
     or "grey" anymore. Kept the class name so existing variant="platinum"
     call-sites (hero-cta-consult, auth-toggle-button, meganav secondaries)
     continue to work — they just visually match the default now. */
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,249,240,.96), rgba(246,234,203,.92));
  border-color: rgba(185,138,50,.65);
  color: #18212f;
}
.premium-control-platinum svg { color: #b98a32; }

.premium-control-diamond {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,1), transparent 24%),
    linear-gradient(135deg, #ffffff, #faf7f0 42%, #f1f3f5);
  border-color: rgba(216,221,227,.85);
  color: #18212f;
  color: var(--p-ink);
}

/* ────────────────────────────────────────────────────────────
 * Iter 145.12 — Price-tier gold intensity ladder.
 * All 5 tiers share the SAME shape, height, radius, padding, border and
 * shadow — only the richness of the gold gradient changes to communicate
 * commercial value. The higher the price, the more intense the gold.
 * Use via <Premium3DControl tier="intro|low|standard|premium|flagship"/>.
 * ──────────────────────────────────────────────────────────── */
.premium-control-tier-intro {
  /* Soft light champagne gold — free / introductory actions */
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 26%),
    linear-gradient(135deg, #fffaea 0%, #f8ecc9 30%, #eeddad 62%, #f5e6be 100%);
  border-color: rgba(185,138,50,.42);
  color: #3a2408;
}
.premium-control-tier-intro svg { color: #7a511b; }

.premium-control-tier-low {
  /* Light warm gold — lower-priced offers */
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 24%),
    linear-gradient(135deg, #fff2c9 0%, #f2d78a 28%, #dcb35a 62%, #eecf7d 100%);
  border-color: rgba(154,112,28,.55);
  color: #3a2408;
}
.premium-control-tier-low svg { color: #3a2408; }

.premium-control-tier-standard {
  /* Balanced medium gold — standard-priced offer (alias of the canonical primary) */
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 22%),
    linear-gradient(135deg, #fff4c6 0%, #f6d878 22%, #d8a93c 46%, #b98a32 72%, #f6d878 100%);
  border-color: rgba(122,81,27,.50);
  color: #3a2408;
}
.premium-control-tier-standard svg { color: #3a2408; }

.premium-control-tier-premium {
  /* Iter 145.16 — luminous polished gold (retired dark #a8842e/#7a511b bronze
     stops). Higher price now = shinier + more polished, NOT darker. */
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.90), transparent 24%),
    linear-gradient(135deg, #fff2c9 0%, #f6d878 26%, #e4ba5b 52%, #d8a93c 82%, #ffe89a 100%);
  border-color: rgba(216,169,60,.75);
  color: #3a2408;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 14px 30px rgba(216,169,60,.28),
    0 5px 0 rgba(200,150,45,.18);
}
.premium-control-tier-premium svg { color: #3a2408; }

.premium-control-tier-flagship {
  /* Iter 145.16 — radiant flagship gold with subtle rose-gold + pearl
     highlights. Retired dark #7a511b/#c99a2c core to a luminous polished
     champagne-into-warm-gold with a rose-gold rim glint. */
  background:
    radial-gradient(circle at 15% 8%,  rgba(255,255,255,1),   transparent 22%),
    radial-gradient(circle at 82% 88%, rgba(231,191,169,.55), transparent 42%),
    linear-gradient(135deg, #fff1c2 0%, #f6d878 22%, #e4ba5b 48%, #d8a93c 74%, #ffe89a 100%);
  border-color: rgba(216,169,60,.85);
  color: #3a2408;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(216,169,60,.20),
    0 16px 34px rgba(216,169,60,.32),
    0 6px 0 rgba(200,150,45,.22),
    0 0 0 1px rgba(255,240,196,.45) inset;
  position: relative;
  isolation: isolate;
}
.premium-control-tier-flagship::after {
  /* Refined diamond highlight — a narrow diagonal luminous sweep. NOT glittery. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
  transform: translateX(-40%);
  mix-blend-mode: screen;
}
.premium-control-tier-flagship:hover::after {
  opacity: .85;
  transform: translateX(40%);
}
.premium-control-tier-flagship svg { color: #2a1806; }

/* ── Universal interaction states for every tier + variant ── */
.premium-control:hover {
  filter: brightness(1.06) saturate(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 18px 36px rgba(122,81,27,.22),
    0 5px 0 rgba(122,81,27,.12);
}
.premium-control:active,
.premium-control[aria-pressed="true"] {
  transform: translateY(1px);
  filter: brightness(.98);
  box-shadow:
    inset 0 2px 3px rgba(90,58,10,.15),
    0 4px 10px rgba(122,81,27,.14);
}
.premium-control:focus-visible {
  outline: 3px solid rgba(216,169,60,.55);
  outline-offset: 3px;
}
.premium-control:disabled,
.premium-control[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.55) brightness(.98);
  opacity: .70;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 4px 10px rgba(122,81,27,.10);
}

/* ────────────────────────────────────────────────────────────
 * Iter 145.12 — Universal champagne-shimmer hover for clickable cards.
 * Reinforces the "premium liquid gold" identity: a soft gold wash
 * appears on every interactive card as the cursor enters, and lifts
 * subtly. Zero JS, purely CSS transitions. Applies to any element
 * carrying one of the shared card classes across the platform.
 * ──────────────────────────────────────────────────────────── */
.premium-card-3d,
.premium-card-shimmer,
.marketing-card,
.premium-3d-card {
  transition:
    background-color .28s ease,
    box-shadow       .28s ease,
    border-color     .28s ease,
    transform        .28s ease;
}
.premium-card-3d:hover,
.premium-card-shimmer:hover,
.marketing-card:hover,
.premium-3d-card:hover {
  /* Iter 145.12 (round 2) — base .premium-card-3d rule (line ~760+) uses
     `background: <gradients> !important` shorthand which implicitly sets
     background-color:transparent as !important, defeating this hover.
     Adding !important here + using background-image longhand for the wash
     layer so the base gradients still show through. */
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.10) !important;
  border-color:     rgb(var(--brand-royal-gold-rgb) / 0.55) !important;
  box-shadow:
    0 22px 48px -18px rgba(122,81,27,.30),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  transform: translateY(-2px) !important;
}
/* Anchor/button variants of clickable cards get a deeper wash */
a.premium-card-3d:hover,
button.premium-card-3d:hover,
a.premium-card-shimmer:hover,
button.premium-card-shimmer:hover {
  background-color: rgb(var(--brand-royal-gold-rgb) / 0.15) !important;
}
@media (prefers-reduced-motion: reduce) {
  .premium-card-3d,
  .premium-card-shimmer,
  .marketing-card,
  .premium-3d-card {
    transition: none;
  }
  .premium-card-3d:hover,
  .premium-card-shimmer:hover,
  .marketing-card:hover,
  .premium-3d-card:hover { transform: none; }
}

/* ------------------------------------------------------------
 * PremiumLogoMedallion — renders /brand-mark.png (already a complete,
 * self-contained circular medallion) at size.
 *
 * Iter 146 remedial fix: this used to wrap the image in a second gold-ring
 * "plate" (background gradient + border + box-shadow + rotating conic-
 * gradient orbit ring). Since the artwork is already a finished circular
 * coin with its own baked-in ring and bevel, that produced a visible
 * double-ring. The wrapper is now a neutral, transparent sizing box only —
 * no background, no border, no orbit ring. Do not re-add one.
 * ------------------------------------------------------------ */
.premium-logo-medallion {
  position: relative;
  border-radius: 0;
  overflow: visible;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
  display: inline-flex;
}

/* ────────────────────────────────────────────────────────────
 * Iter 145.13 — Premium tier CARDS.
 * Companion to the button-tier ladder above. Cards representing higher-
 * priced offerings get a proportionally richer gold treatment. All tiers
 * still belong to the same design system (same corner radius, same border
 * weight, same padding, same typography) — only the surface fill + glow
 * escalate. Use via className="premium-tier-card premium-tier-card--{tier}".
 * ──────────────────────────────────────────────────────────── */
.premium-tier-card {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(185,138,50,.55);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.55), transparent 30%),
    linear-gradient(145deg, rgba(255,249,240,.94), rgba(246,234,203,.94));
  box-shadow:
    0 18px 40px -20px rgba(122,81,27,.30),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition: box-shadow .32s ease, transform .32s ease, border-color .32s ease;
}
.premium-tier-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 26px 54px -20px rgba(122,81,27,.36),
    inset 0 1px 0 rgba(255,255,255,.9);
  border-color: rgba(154,112,28,.75);
}

.premium-tier-card--premium {
  /* Iter 145.16 (round 2) — luminous polished gold; retired dark #b98a32
     bronze stop that survived the first-round edit. Higher price now =
     shinier + more polished, NOT darker. */
  border-color: rgba(216,169,60,.65);
  background:
    radial-gradient(circle at 12% 6%,  rgba(255,255,255,.85), transparent 22%),
    radial-gradient(circle at 88% 92%, rgba(255,240,196,.45), transparent 42%),
    linear-gradient(140deg, #fff8dd 0%, #f6d878 26%, #e4ba5b 60%, #ffe89a 92%);
  box-shadow:
    0 22px 46px -18px rgba(216,169,60,.40),
    0 4px 0  rgba(200,150,45,.14),
    inset 0 1px 0 rgba(255,255,255,.90);
}
.premium-tier-card--premium:hover {
  box-shadow:
    /* Iter 145.18 — polished-gold top rim reflection on hover */
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    inset 0 2px 4px -2px rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(231, 191, 169, 0.32),
    0 30px 60px -18px rgba(216,169,60,.46),
    0 5px 0  rgba(200,150,45,.12);
}
/* Subtle diamond corner-highlight — refined, NOT glittery */
.premium-tier-card--premium::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 55%;
  height: 55%;
  background:
    radial-gradient(ellipse at 15% 12%, rgba(255,255,255,.55), transparent 60%);
  pointer-events: none;
  border-top-left-radius: inherit;
  z-index: 0;
}

.premium-tier-card--flagship {
  /* Iter 145.16 — radiant flagship gold with luminous rose-gold accents.
     Retired dark #c99a2c/#7a511b core stops. Higher price = shinier + more
     polished + rose-gold rim highlight, NOT darker. */
  border-color: rgba(216,169,60,.85);
  background:
    radial-gradient(circle at 10% 6%,  rgba(255,255,255,.92), transparent 22%),
    radial-gradient(circle at 88% 88%, rgba(231,191,169,.55), transparent 44%),
    linear-gradient(135deg, #fff5c8 0%, #f6d878 22%, #e4ba5b 50%, #d8a93c 80%, #ffe89a 100%);
  box-shadow:
    0 26px 54px -16px rgba(216,169,60,.44),
    0 6px 0  rgba(200,150,45,.20),
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(255,240,196,.45) inset;
}
.premium-tier-card--flagship::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%);
  transform: translateX(-40%);
  transition: transform 1.6s ease, opacity .8s ease;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.premium-tier-card--flagship:hover::before {
  opacity: .85;
  transform: translateX(40%);
}

/* ────────────────────────────────────────────────────────────
 * Iter 145.13 — one-time diamond sweep on the hero medallion.
 * Runs once on view-entry, ~4s, ultra-subtle, no repeat.
 * Reinforces flagship luxury without ever feeling glittery.
 * ──────────────────────────────────────────────────────────── */
.premium-logo-medallion {
  overflow: hidden;
  isolation: isolate;
}
.premium-logo-medallion::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  mix-blend-mode: screen;
  transform: translateX(-120%) rotate(0.001deg);
  opacity: 0;
  pointer-events: none;
  animation: hero-medallion-diamond-sweep 4.4s ease-out .8s 1 forwards;
  z-index: 2;
  border-radius: inherit;
}
@keyframes hero-medallion-diamond-sweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  15%  { opacity: .55; }
  50%  { opacity: .55; }
  85%  { opacity: 0; }
  100% { transform: translateX(120%);  opacity: 0; }
}

/* ────────────────────────────────────────────────────────────
 * Iter 145.14 — one-time entry sweep on premium + flagship cards.
 * A React IntersectionObserver hook adds `.tier-card-entered` when a
 * card first scrolls into view; a 1s luminous sweep plays once and
 * then never again for the session. Reinforces perceived value at the
 * exact moment users notice the high-price cards. Zero perpetual motion.
 * ──────────────────────────────────────────────────────────── */
.premium-tier-card--premium,
.premium-tier-card--flagship {
  isolation: isolate;
}
.premium-tier-card--premium.tier-card-entered::after,
.premium-tier-card--flagship.tier-card-entered::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  mix-blend-mode: screen;
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  animation: tier-card-entry-sweep 1.15s ease-out .12s 1 forwards;
}
@keyframes tier-card-entry-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: .70; }
  100% { transform: translateX(100%);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-logo-medallion::after,
  .premium-tier-card--premium.tier-card-entered::after,
  .premium-tier-card--flagship.tier-card-entered::after { animation: none !important; }
}
/* Iter 145.19 — .premium-3d-card is the SHARED premium-3D class used by
   the shadcn Card component AND by any legacy site-card. Rendering rules
   match the universal card cascade (App.css:4247+) so every visual panel
   on the platform reads as one coordinated premium gold surface. */
.premium-3d-card {
  border-radius: 20px !important;
  border: 1.5px solid rgba(216, 169, 60, 0.75) !important;
  background: linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 251, 235, 1) 55%,
      rgba(252, 244, 220, 1) 100%) !important;
  color: #4c2a10;
  box-shadow:
    0 40px 80px -20px rgba(122, 81, 27, 0.35),
    0 20px 40px -12px rgba(122, 81, 27, 0.22),
    0 4px 12px -2px rgba(122, 81, 27, 0.15),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(231, 191, 169, 0.35) !important;
  transition: box-shadow 300ms ease, border-color 300ms ease, transform 300ms cubic-bezier(.2,.9,.3,1);
}
.premium-3d-card:hover {
  border-color: rgba(216, 169, 60, 0.9) !important;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 3px 5px -2px rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(231, 191, 169, 0.5),
    0 50px 90px -18px rgba(122, 81, 27, 0.45),
    0 24px 48px -10px rgba(122, 81, 27, 0.28),
    0 5px 14px -2px rgba(122, 81, 27, 0.18) !important;
}
@media (prefers-reduced-motion: reduce) {
  .premium-3d-card { transition: none; }
  .premium-3d-card:hover { transform: none; }
}

.premium-logo-medallion img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: none;
}

.premium-logo-medallion.size-sm { width: 56px; height: 56px; }
.premium-logo-medallion.size-md { width: 82px; height: 82px; }
.premium-logo-medallion.size-lg { width: 112px; height: 112px; }
.premium-logo-medallion.size-xl { width: 148px; height: 148px; }

@keyframes logoGoldOrbit {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
 * In-house AI avatar (blinking + speaking mouth)
 * ------------------------------------------------------------ */
.inhouse-ai-avatar {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.96), transparent 30%),
    linear-gradient(135deg, #fff4c6, #d8b46a 48%, #b98a32);
  border: 1px solid rgba(122,81,27,.50);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -4px 12px rgba(122,81,27,.32),
    0 18px 42px rgba(122,81,27,.28);
  overflow: hidden;
}

.inhouse-ai-avatar .avatar-orbit {
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(from 180deg, transparent, rgba(255,255,255,.65), rgba(255,224,120,.86), transparent);
  animation: avatarOrbit 8s linear infinite;
  opacity: .35;
  pointer-events: none;
}

.inhouse-ai-avatar .avatar-face {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,249,240,.78);
  z-index: 2;
  box-shadow: inset 0 2px 8px rgba(122,81,27,.12);
}

.inhouse-ai-avatar .avatar-eye {
  position: absolute;
  top: 17px;
  width: 7px;
  height: 10px;
  border-radius: 999px;
  background: #18212f;
  animation: avatarBlink 5.5s infinite;
}
.inhouse-ai-avatar .avatar-eye.left  { left: 15px; }
.inhouse-ai-avatar .avatar-eye.right { right: 15px; }

.inhouse-ai-avatar .avatar-mouth {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 26px;
  height: 14px;
  background: transparent;
  border: 0 solid transparent;
  border-bottom: 2.5px solid #7a511b;
  border-radius: 0 0 26px 26px / 0 0 14px 14px;
  transform: translateX(-50%);
  transition: all .18s ease;
  box-shadow: inset 0 -1px 0 rgba(122,81,27,.12);
}

.inhouse-ai-avatar .avatar-face::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 22px;
  height: 6px;
  background: radial-gradient(ellipse at center, rgba(255,168,168,.55), transparent 70%);
  transform: translateX(-50%);
  filter: blur(1px);
  pointer-events: none;
}

.inhouse-ai-avatar.speaking .avatar-mouth {
  border-radius: 999px;
  background: #7a511b;
  border: 2.5px solid #7a511b;
  animation: avatarSpeak .22s ease-in-out infinite alternate;
}

.inhouse-ai-avatar.listening {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    0 0 0 6px rgba(185,138,50,.14),
    0 18px 42px rgba(122,81,27,.28);
}

.onboarding-guide-avatar {
  margin-bottom: 12px;
}

@keyframes avatarOrbit { to { transform: rotate(360deg); } }
@keyframes avatarBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(.12); }
}
@keyframes avatarSpeak {
  from { height: 4px;  width: 14px; }
  to   { height: 13px; width: 20px; }
}

/* ------------------------------------------------------------
 * Premium Auth Card (raised gold-lipped plate)
 * ------------------------------------------------------------ */
.premium-auth-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255, 214, 128, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(122, 81, 27, 0.20), transparent 60%),
    linear-gradient(180deg, #FDF7E4 0%, #F4E2AF 55%, #E4CC85 100%);
  position: relative;
  isolation: isolate;
}

.premium-auth-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(560px, 100%);
  border-radius: 42px;
  border-radius: var(--p-radius-2xl);
  padding: 40px 36px 32px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.96), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,249,240,.96), rgba(246,234,203,.94));
  border: 1px solid rgba(185, 138, 50, .42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 8px rgba(122,81,27,.12),
    0 34px 80px rgba(122,81,27,.24),
    0 8px 0 rgba(122,81,27,.10);
}

.premium-auth-card .premium-auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  text-align: center;
}

.premium-auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  text-align: center;
}

.premium-auth-title,
main.premium-auth-stage .premium-auth-title {
  font-family: "Cormorant Garamond", "Playfair Display", ui-serif, serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #18212f;
  color: var(--p-ink);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.premium-auth-subtitle,
main.premium-auth-stage .premium-auth-subtitle {
  font-size: 0.98rem;
  color: rgba(27, 20, 9, 0.72);
  margin: 0;
  max-width: 420px;
  line-height: 1.5;
}

.premium-auth-card-body {
  padding: 40px 36px 32px;
}
@media (max-width: 640px) {
  .premium-auth-card-body { padding: 32px 20px 24px; }
}

/* ------------------------------------------------------------
 * Brand banner — responsive rounded plate
 * ------------------------------------------------------------ */
.brand-banner {
  width: min(100% - 32px, 1760px);
  margin: 18px auto 0;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(185, 138, 50, 0.42);
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.75), transparent 28%),
    linear-gradient(135deg, #fff9f0, #f6eacb, #faf7f0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 26px 60px rgba(122,81,27,.18),
    0 6px 0 rgba(122,81,27,.08);
}

.brand-banner picture,
.brand-banner-img {
  display: block;
  width: 100%;
}

.brand-banner-img {
  height: clamp(220px, 31vw, 460px);
  object-fit: cover;
  object-position: center center;
}

.brand-banner-safe .brand-banner-img {
  object-fit: contain;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.75), transparent 28%),
    linear-gradient(135deg, #fff9f0, #f6eacb, #faf7f0);
}

@media (max-width: 640px) {
  .brand-banner {
    width: calc(100% - 20px);
    margin-top: 10px;
    border-radius: 24px;
  }
  .brand-banner-img {
    height: clamp(160px, 52vw, 260px);
  }
}

/* ------------------------------------------------------------
 * Reduced motion — kill orbits, sheens, hover translates
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .premium-3d-surface,
  .premium-shine,
  .premium-sparkles,
  .premium-logo-medallion::after,
  .inhouse-ai-avatar .avatar-orbit,
  .inhouse-ai-avatar .avatar-eye,
  .inhouse-ai-avatar.speaking .avatar-mouth {
    animation: none !important;
    transition: none !important;
  }
  .premium-3d-surface.hoverable:hover,
  .premium-control:hover {
    transform: none !important;
  }
}

/* ============================================================
 * WAVE 2 — Global sweep upgrade
 * Augment EXISTING widely-used classes so 17+ cards, all
 * selectors, and the AI Concierge widget inherit the premium
 * 3D dimensional treatment without JSX changes.
 * ============================================================ */

/* --- .premium-card-3d (17+ marketing/dashboard cards) -------
 *  Give every card the diamond material treatment + metallic
 *  edge ring + soft raised shadow. Existing tailwind
 *  border-brand-royal-gold classes still apply on top.
 * -------------------------------------------------------- */
.premium-card-3d {
  position: relative;
  isolation: isolate;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,1), transparent 24%),
    linear-gradient(135deg, #ffffff, #faf7f0 42%, #f1f3f5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -3px 10px rgba(216,221,227,.28),
    0 26px 62px rgba(122,81,27,.14),
    0 6px 0 rgba(216,221,227,.18);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}
.premium-card-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.95),
    rgba(246,216,120,.72),
    rgba(185,138,50,.55),
    rgba(255,255,255,.72)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
.premium-card-3d > * { position: relative; z-index: 1; }
.premium-card-3d:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 32px 74px rgba(122,81,27,.18),
    0 7px 0 rgba(216,221,227,.22);
}

/* --- Selector triggers (language/currency/theme) -----------
 *  All three widgets share the pattern:
 *  `.inline-flex.items-center.gap-2.rounded-full.border.border-brand-champagne.bg-brand-cream/70`.
 *  Give the parent label / button that carries `.border-brand-champagne`
 *  the premium raised pill treatment.
 * -------------------------------------------------------- */
[data-testid$="-selector"] > label,
label[data-testid$="-selector"],
button[data-testid$="-selector-trigger"] {
  min-height: 44px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(185,138,50,.42) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,249,240,.98), rgba(246,234,203,.94)) !important;
  color: #18212f !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 6px 16px rgba(122,81,27,.14),
    0 2px 0 rgba(122,81,27,.08) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
  font-weight: 700;
  gap: 8px;
}
[data-testid$="-selector"] > label:hover,
label[data-testid$="-selector"]:hover,
button[data-testid$="-selector-trigger"]:hover {
  transform: translateY(-1px);
}
[data-testid$="-selector"] > label svg,
label[data-testid$="-selector"] svg,
button[data-testid$="-selector-trigger"] svg {
  color: #b98a32;
}

/* --- AI Concierge floating trigger + panel -----------------
 *  Trigger already uses .liquid-gold-cta.  Just amplify depth.
 *  Panel gets the metallic edge ring look.
 * -------------------------------------------------------- */
[data-testid="ai-concierge-trigger"] {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -4px 12px rgba(122,81,27,.32),
    0 20px 44px rgba(122,81,27,.30),
    0 8px 0 rgba(122,81,27,.18) !important;
}
[data-testid="ai-concierge-trigger"]:hover {
  transform: translateY(-3px);
}

[data-testid="ai-concierge-panel"] {
  position: fixed;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,1), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,249,240,.98), rgba(246,234,203,.94)) !important;
  border: 1px solid rgba(185, 138, 50, .42) !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 34px 80px rgba(122,81,27,.24),
    0 8px 0 rgba(122,81,27,.10) !important;
}
[data-testid="ai-concierge-panel"]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.95),
    rgba(246,216,120,.75),
    rgba(185,138,50,.55),
    rgba(255,255,255,.72)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* --- AI Concierge avatar — add 3D depth --------------------- */
[data-testid="ai-concierge-avatar"] {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -4px 10px rgba(122,81,27,.30),
    0 14px 30px rgba(122,81,27,.28) !important;
  border: 1px solid rgba(122,81,27,.45) !important;
}

/* --- Dashboard shadcn Card (used by Dashboard/logged-in pages) -
 *  Give any Radix .rounded-lg .border with .bg-card in the
 *  authenticated shell the diamond treatment. Uses attribute
 *  data-testid prefix to stay scoped.
 * -------------------------------------------------------- */
[data-testid^="dashboard-"] .rounded-lg.border {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,1), transparent 24%),
    linear-gradient(135deg, #ffffff, #faf7f0 45%, #f1f3f5) !important;
  border-color: rgba(216,221,227,.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 20px 48px rgba(122,81,27,.12),
    0 5px 0 rgba(216,221,227,.16) !important;
}

/* --- LoggedInMegaNav header pill upgrade --------------------
 *  Any .rounded-full border in the header gets the premium pill.
 * -------------------------------------------------------- */
header .rounded-full.border,
[data-testid="loggedin-topbar"] .rounded-full.border,
[data-testid="logged-in-mega-nav"] .rounded-full.border {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 6px 14px rgba(122,81,27,.10) !important;
}

/* --- Marketing button-primary + button-secondary sweep -----
 *  Elevated shadow so these already-gold buttons feel 3D.
 * -------------------------------------------------------- */
.button-primary,
.marketing-actions .button-primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 12px 28px rgba(122,81,27,.20),
    0 4px 0 rgba(122,81,27,.10) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.button-primary:hover {
  transform: translateY(-2px);
}
.button-secondary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 22px rgba(122,81,27,.14),
    0 3px 0 rgba(122,81,27,.08) !important;
}

/* --- Kill any lingering purple/violet on strategic surfaces */
[data-testid="auth-shell"] .bg-primary,
[data-testid="auth-shell"] .bg-primary\/90,
[data-testid="auth-shell"] [class*="bg-purple"],
[data-testid="auth-shell"] [class*="bg-violet"] {
  background: linear-gradient(135deg, #fff4c6 0%, #f6d878 22%, #d8a93c 46%, #b98a32 72%) !important;
  color: #3a2408 !important;
}

/* --- Header/topbar/sidebar logo slot -----------------------
 *  Iter 145 — REMOVED the double-circle beige/gold wrapper.
 *  The logo asset (either the 3D standalone or the original
 *  circular medallion) is its own shape. The slot must remain
 *  a purely neutral fixed-size layout box — no background disc,
 *  no gold border, no inset/outset shadows, no orbit ring.
 *  If a decorative frame is ever desired again, gate it behind
 *  an OPT-IN class like `.mbc-3d-logo-frame` and never re-apply
 *  it to `.mbc-*-logo-circle`, `.app-topbar-logo-circle`, or
 *  `.sidebar-logo-circle`.
 * -------------------------------------------------------- */
.app-topbar-logo-circle,
.sidebar-logo-circle,
.mbc-side-logo-circle,
.mbc-header-logo-circle,
.mbc-topbar-logo-circle,
.mbc-nav-logo-circle {
  position: relative;
  isolation: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
/* Kill any previously animated orbit ring — must not render. */
.app-topbar-logo-circle::after,
.sidebar-logo-circle::after,
.mbc-side-logo-circle::after,
.mbc-header-logo-circle::after,
.mbc-topbar-logo-circle::after,
.mbc-nav-logo-circle::after {
  content: none !important;
  background: none !important;
  animation: none !important;
  display: none !important;
}
.app-topbar-logo-circle > *,
.sidebar-logo-circle > *,
.mbc-side-logo-circle > *,
.mbc-header-logo-circle > *,
.mbc-topbar-logo-circle > *,
.mbc-nav-logo-circle > * {
  position: static;
  z-index: auto;
}

/* ============================================================
 * WAVE 2b — Watermark + Liquid-Gold Interactive + Diamond Accents
 * ============================================================ */

/* --- Brand Watermark Layer -------------------------------- */
.brand-watermark-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}
.brand-watermark-layer img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 980px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .08;
  opacity: var(--watermark-opacity, .08);
  filter: saturate(.8) brightness(1.15) contrast(.92);
  mix-blend-mode: multiply;
}
.brand-watermark-page img {
  width: min(110vw, 1180px);
  opacity: .055;
  opacity: var(--watermark-opacity, .055);
}
.brand-watermark-card img {
  width: min(86%, 520px);
  opacity: .075;
  opacity: var(--watermark-opacity, .075);
}
.brand-watermark-soft img {
  opacity: .045;
  opacity: var(--watermark-opacity, .045);
  filter: saturate(.65) brightness(1.25) contrast(.88);
}
.brand-watermark-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.28), transparent 36%),
    linear-gradient(135deg, rgba(255,244,198,.10), rgba(216,180,106,.08));
  pointer-events: none;
}

/* --- Liquid-gold interactive shine on hover/touch ---------- */
.liquid-gold-interactive {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.liquid-gold-interactive::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  background:
    conic-gradient(
      from 160deg,
      transparent 0deg,
      rgba(255,255,255,.72) 42deg,
      rgba(255,224,120,.88) 82deg,
      rgba(185,138,50,.42) 130deg,
      transparent 180deg,
      rgba(255,255,255,.45) 240deg,
      transparent 320deg
    );
  opacity: .22;
  animation: liquidGoldSlowOrbit 12s linear infinite;
  pointer-events: none;
}
.liquid-gold-interactive::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 36%,
      rgba(255,255,255,.72) 48%,
      rgba(255,229,150,.44) 54%,
      transparent 66%,
      transparent 100%
    );
  transform: translateX(-140%);
  opacity: 0;
  pointer-events: none;
}
.liquid-gold-interactive:hover::after,
.liquid-gold-interactive:focus-visible::after,
.liquid-gold-interactive.is-touched-gold::after {
  animation: liquidGoldSwipe 1.4s ease-in-out;
}
.liquid-gold-interactive > * {
  position: relative;
  z-index: 2;
}
@keyframes liquidGoldSlowOrbit {
  to { transform: rotate(360deg); }
}
@keyframes liquidGoldSwipe {
  0%   { transform: translateX(-140%); opacity: 0; }
  20%  { opacity: .75; }
  80%  { opacity: .35; }
  100% { transform: translateX(140%); opacity: 0; }
}

/* --- Diamond sparkle accents (small floating diamonds) ---- */
.diamond-sparkle-accent {
  position: relative;
}
.diamond-sparkle-accent::before,
.diamond-sparkle-accent::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border-radius: 4px;
  background: linear-gradient(135deg, #ffffff, #f1f3f5 38%, #c9cdd3 68%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 8px 20px rgba(95,103,116,.22);
  opacity: .75;
  pointer-events: none;
  z-index: 3;
}
.diamond-sparkle-accent::before { top: 18px; right: 22px; }
.diamond-sparkle-accent::after  { bottom: 20px; left: 24px; width: 10px; height: 10px; opacity: .5; }

/* --- AI Concierge trigger — swap gold bulb for premium
 *     medallion + orbiting shine (in-house avatar look). ---- */
[data-testid="ai-concierge-trigger"] {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.95), transparent 30%),
    linear-gradient(135deg, #fff4c6 0%, #f6d878 24%, #d8a93c 48%, #b98a32 74%, #fff4c6 100%) !important;
  border: 1px solid rgba(122,81,27,.55) !important;
  overflow: hidden !important;
  isolation: isolate;
}
[data-testid="ai-concierge-trigger"]::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(
    from 180deg,
    transparent,
    rgba(255,255,255,.65),
    rgba(255,224,120,.90),
    transparent,
    rgba(255,255,255,.38),
    transparent
  );
  animation: logoGoldOrbit 9s linear infinite;
  opacity: .32;
  pointer-events: none;
  z-index: 0;
}
[data-testid="ai-concierge-trigger"] > * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .liquid-gold-interactive::before,
  .liquid-gold-interactive::after,
  [data-testid="ai-concierge-trigger"]::after {
    animation: none !important;
  }
}

/* --- Install App control layout --------------------------- */
.install-app-control {
  margin-top: 6px;
}
.install-app-dismiss {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
}

/* --- Browser language hint gold pill ---------------------- */
.browser-lang-hint {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 22%),
    linear-gradient(135deg, #fff4c6 0%, #f6d878 22%, #d8a93c 46%, #b98a32 72%, #f6d878 100%);
  border: 1px solid rgba(122,81,27,.50);
  color: #3a2408;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 14px 32px rgba(122,81,27,.22),
    0 4px 0 rgba(122,81,27,.10);
}
.browser-lang-hint button:hover {
  background: rgba(0,0,0,0.08);
}

/* --- Iter 138 — test-mode ribbon (subtle champagne/gold) --- */
.premium-testmode-ribbon {
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,249,240,.94), rgba(246,234,203,.90));
  border: 1px solid rgba(185,138,50,.42);
  color: #7a511b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 6px 14px rgba(122,81,27,.10),
    0 2px 0 rgba(122,81,27,.06);
}
.premium-testmode-ribbon svg { color: #b98a32; }

/* --- Iter 141 — checkout progress dots ---------------------- */
.checkout-progress-dots { list-style: none; padding: 0; margin: 0 0 24px; }
.checkout-progress-dot {
  color: rgba(24,33,47,.42);
  transition: color .18s ease;
}
.checkout-progress-dot svg { color: rgba(122,81,27,.42); }
.checkout-progress-dot.state-done  { color: rgba(24,33,47,.72); }
.checkout-progress-dot.state-done  svg { color: #b98a32; }
.checkout-progress-dot.state-active { color: #18212f; }
.checkout-progress-dot.state-active svg {
  color: #b98a32;
  filter: drop-shadow(0 4px 8px rgba(185,138,50,.35));
}
.checkout-progress-sep {
  display: block;
  background: linear-gradient(to right, rgba(185,138,50,.20), rgba(185,138,50,.50), rgba(185,138,50,.20));
  border-radius: 999px;
}


/* ═══════════════════════════════════════════════════════════════
   Iter 137 · Premium 3D eyebrow pill
   Shared class for the small "A PREMIUM PLATFORM FOR THE WHOLE
   JOURNEY" tagline pill above the hero heading (both website and
   in-app rendering). Replaces the previous flat outlined pill
   with a genuine 3D chassis: warm champagne surface, luminous
   pearl top-edge highlight, deep warm plum-cocoa lower shadow,
   subtle rose-gold inset bottom rim, and a soft hover lift.
   Palette used: pearl ivory, luminous natural gold, champagne
   gold, rose-gold inset, warm plum-cocoa shadow. No green-gold,
   silver, grey, mustard, brown, or bronze.
   ═══════════════════════════════════════════════════════════════ */
.mbc-eyebrow-3d {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(180, 128, 40, 0.75);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 249, 226, 1) 55%,
      rgba(252, 235, 195, 1) 100%);
  color: #7d5a1e;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.72rem;
  line-height: 1;
  box-shadow:
    0 18px 34px -14px rgba(58, 31, 45, 0.42),
    0 8px 16px -6px rgba(58, 31, 45, 0.28),
    0 3px 6px -2px rgba(58, 31, 45, 0.18),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(214, 168, 148, 0.42);
  transition:
    box-shadow 300ms ease,
    border-color 300ms ease,
    transform 300ms cubic-bezier(.2,.9,.3,1);
}
.mbc-eyebrow-3d > svg {
  color: #b98a32;
  flex: 0 0 auto;
}
.mbc-eyebrow-3d:hover {
  border-color: rgba(180, 128, 40, 1);
  transform: translateY(-2px);
  box-shadow:
    0 24px 44px -14px rgba(58, 31, 45, 0.52),
    0 12px 22px -6px rgba(58, 31, 45, 0.34),
    0 4px 8px -2px rgba(58, 31, 45, 0.22),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 3px 5px -2px rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(214, 168, 148, 0.58);
}
@media (prefers-reduced-motion: reduce) {
  .mbc-eyebrow-3d { transition: none; }
  .mbc-eyebrow-3d:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Iter 138 · Homepage "Today's overview / GOLDEN WINDOW" preview
   card + all inner sub-panels (Fertility Rising, Score, Confidence,
   Data, AI Companion quote, Documents, Consultation).
   Requirement: ALL surfaces inside this card must be gold (no
   green, no pink/rose gold, no sage, no terracotta), and every
   inner panel must have genuine 3D depth. Text content stays
   exactly as-is.
   Palette used: pearl ivory, luminous natural gold, champagne
   gold, warm plum-cocoa shadow. NO green, NO pink, NO rose gold.
   ═══════════════════════════════════════════════════════════════ */

/* Outer preview card chassis */
.mbc-preview-card-3d {
  position: relative;
  border-radius: 2rem;
  border: 1.5px solid rgba(180, 128, 40, 0.85);
  background:
    linear-gradient(160deg,
      rgba(255, 249, 226, 1) 0%,
      rgba(252, 235, 195, 1) 60%,
      rgba(240, 210, 140, 1) 100%);
  box-shadow:
    0 44px 84px -22px rgba(58, 31, 45, 0.48),
    0 24px 48px -14px rgba(58, 31, 45, 0.32),
    0 8px 18px -4px rgba(58, 31, 45, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(230, 190, 110, 0.55);
  isolation: isolate;
}

/* Inner sub-panels (Fertility Rising, Score/Confidence/Data,
   Documents, Consultation, AI Companion) — every one gold + 3D */
.mbc-preview-panel-3d {
  position: relative;
  border-radius: 14px;
  border: 1.5px solid rgba(180, 128, 40, 0.70);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 249, 226, 1) 55%,
      rgba(252, 235, 195, 1) 100%);
  box-shadow:
    0 22px 40px -18px rgba(58, 31, 45, 0.45),
    0 10px 20px -8px rgba(58, 31, 45, 0.30),
    0 3px 8px -2px rgba(58, 31, 45, 0.20),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1.5px 0 rgba(230, 190, 110, 0.42);
  isolation: isolate;
  transition:
    box-shadow 300ms ease,
    border-color 300ms ease,
    transform 300ms cubic-bezier(.2,.9,.3,1);
}

/* Slightly richer treatment for the "Fertility Rising" main panel
   and the "AI Companion" quote panel — larger elements deserve a
   stronger gold surface without touching typography or content. */
.mbc-preview-panel-3d--accent {
  border-color: rgba(180, 128, 40, 0.95);
  background:
    linear-gradient(160deg,
      rgba(252, 235, 195, 1) 0%,
      rgba(240, 210, 140, 1) 55%,
      rgba(224, 184, 100, 1) 100%);
  box-shadow:
    0 26px 46px -18px rgba(58, 31, 45, 0.55),
    0 12px 24px -8px rgba(58, 31, 45, 0.36),
    0 4px 10px -2px rgba(58, 31, 45, 0.24),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(230, 190, 110, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .mbc-preview-panel-3d { transition: none; }
}



/* ═══════════════════════════════════════════════════════════════
   Iter 139 · Pricing tier ribbon badges (Best value / Premium /
   Flagship). Two fixes in one block:
     1) `.premium-tier-card` had inherited `overflow: hidden` from
        the shared shadcn <Card> chassis, which clipped the ribbon
        badges (positioned at `-top-3`, i.e. 12 px above the card)
        so only the bottom half was visible. Restore `overflow:
        visible` so the sticker-style badges show fully.
     2) Ribbon badges were flat dark-plum pills. Replace with the
        shared premium 3D gold treatment (matches the Iter 137
        eyebrow pill and Iter 138 preview panels): pearl-ivory →
        honey-gold surface, champagne-gold border, warm plum-cocoa
        shadow, top pearl highlight, rounded pill, no green, no
        rose-gold, no bronze.
   Applied via `.mbc-tier-ribbon-3d` (added to the JSX spans).
   ═══════════════════════════════════════════════════════════════ */
.premium-tier-card {
  overflow: visible !important;
}

.mbc-tier-ribbon-3d {
  position: absolute;
  top: -0.75rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid rgba(180, 128, 40, 0.85);
  background:
    linear-gradient(160deg,
      rgba(255, 249, 226, 1) 0%,
      rgba(240, 210, 140, 1) 55%,
      rgba(224, 184, 100, 1) 100%);
  color: #4a2f0e;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.65rem;
  line-height: 1;
  z-index: 20;
  box-shadow:
    0 14px 26px -10px rgba(58, 31, 45, 0.48),
    0 6px 12px -4px rgba(58, 31, 45, 0.32),
    0 2px 4px -1px rgba(58, 31, 45, 0.20),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1.5px 0 rgba(230, 190, 110, 0.55);
  transition:
    box-shadow 300ms ease,
    border-color 300ms ease,
    transform 300ms cubic-bezier(.2,.9,.3,1);
}
.mbc-tier-ribbon-3d:hover {
  transform: translateY(-1px);
  border-color: rgba(180, 128, 40, 1);
  box-shadow:
    0 18px 32px -10px rgba(58, 31, 45, 0.56),
    0 8px 16px -4px rgba(58, 31, 45, 0.38),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 3px 5px -2px rgba(255, 255, 255, 1),
    inset 0 -1.5px 0 rgba(230, 190, 110, 0.72);
}
@media (prefers-reduced-motion: reduce) {
  .mbc-tier-ribbon-3d { transition: none; }
  .mbc-tier-ribbon-3d:hover { transform: none; }
}

/* LiquidGoldWatermark — 3D Liquid Gold watermark system.
 * Uses CSS mask + a slowly-shifting conic + radial gradient blend so the
 * brand mark renders in dimensional gold at all times, without any SVG
 * inline paths. The mask image is set inline in the JSX to bypass CRA
 * webpack url() resolution behaviour. */

.liquid-gold-watermark {
  position: relative;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}
.liquid-gold-watermark__mark,
.liquid-gold-watermark__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Core liquid-gold gradient painted through the brand mask. */
.liquid-gold-watermark__mark {
  background:
    radial-gradient(circle at 30% 30%, #fff7dc 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, #b0781e 0%, transparent 60%),
    conic-gradient(
      from 210deg at 50% 50%,
      #f2d27a 0deg,
      #fff2b8 45deg,
      #d8a83f 120deg,
      #8f641b 200deg,
      #d8a83f 260deg,
      #fff2b8 320deg,
      #f2d27a 360deg
    );
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  filter: drop-shadow(0 4px 22px rgba(200, 148, 44, 0.30));
  animation: lgw-liquid-shift 22s ease-in-out infinite alternate;
}

/* Sheen highlight sweep — a diagonal pale-champagne pass to give a
   dimensional wet-metal quality. Sits above the mark, still masked by the
   parent overflow. */
.liquid-gold-watermark__sheen {
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 250, 220, 0.55) 46%,
    rgba(255, 232, 168, 0.75) 50%,
    rgba(255, 250, 220, 0.55) 54%,
    transparent 68%
  );
  mix-blend-mode: screen;
  opacity: 0.55;
  transform: translateX(-30%);
  animation: lgw-sheen-sweep 9s ease-in-out infinite;
  filter: blur(6px);
}

@keyframes lgw-liquid-shift {
  0%   { filter: hue-rotate(-4deg) saturate(1) drop-shadow(0 4px 22px rgba(200, 148, 44, 0.30)); }
  40%  { filter: hue-rotate(4deg)  saturate(1.15) drop-shadow(0 6px 28px rgba(200, 148, 44, 0.42)); }
  100% { filter: hue-rotate(-2deg) saturate(1.05) drop-shadow(0 4px 22px rgba(200, 148, 44, 0.30)); }
}
@keyframes lgw-sheen-sweep {
  0%   { transform: translateX(-30%); opacity: 0.0; }
  25%  { opacity: 0.55; }
  50%  { transform: translateX(30%);  opacity: 0.7;  }
  75%  { opacity: 0.4; }
  100% { transform: translateX(120%); opacity: 0.0; }
}

/* =====================================================================
   Variant: background — global full-viewport ambient watermark. Mounted
   ONCE at the app root behind all page content. Very low opacity so it
   never competes with content, but is present on every page.
   ===================================================================== */
.liquid-gold-watermark--background {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.055;
  mix-blend-mode: multiply;
}
.liquid-gold-watermark--background .liquid-gold-watermark__mark {
  -webkit-mask-size: min(720px, 62vmin);
          mask-size: min(720px, 62vmin);
  -webkit-mask-position: 50% 32%;
          mask-position: 50% 32%;
}
.liquid-gold-watermark--background .liquid-gold-watermark__sheen { opacity: 0.35; }
[data-theme="dark"] .liquid-gold-watermark--background {
  opacity: 0.10; mix-blend-mode: screen;
}
[data-theme="normal"] .liquid-gold-watermark--background { opacity: 0.045; }

/* =====================================================================
   Variant: hero — large centred watermark inside hero tiles.
   ===================================================================== */
.liquid-gold-watermark--hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.12;
}
.liquid-gold-watermark--hero .liquid-gold-watermark__mark {
  -webkit-mask-size: 78%;
          mask-size: 78%;
  -webkit-mask-position: 100% 50%;
          mask-position: 100% 50%;
}
.liquid-gold-watermark--hero .liquid-gold-watermark__sheen { opacity: 0.5; }

/* =====================================================================
   Variant: card — subtle diagonal stamp inside premium cards.
   ===================================================================== */
.liquid-gold-watermark--card {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.09;
}
.liquid-gold-watermark--card .liquid-gold-watermark__mark {
  -webkit-mask-size: 46%;
          mask-size: 46%;
  -webkit-mask-position: 108% 108%;
          mask-position: 108% 108%;
}
.liquid-gold-watermark--card .liquid-gold-watermark__sheen { opacity: 0.4; }

/* =====================================================================
   Variant: document — corner stamp for downloadable documents / PDF
   previews. Higher contrast so it prints/exports cleanly.
   ===================================================================== */
.liquid-gold-watermark--document {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
}
.liquid-gold-watermark--document .liquid-gold-watermark__mark {
  -webkit-mask-size: 240px;
          mask-size: 240px;
  -webkit-mask-position: calc(100% - 24px) 24px;
          mask-position: calc(100% - 24px) 24px;
}
.liquid-gold-watermark--document .liquid-gold-watermark__sheen { opacity: 0.6; }

/* Reduced motion — silence the shimmer and sheen. */
@media (prefers-reduced-motion: reduce) {
  .liquid-gold-watermark__mark,
  .liquid-gold-watermark__sheen { animation: none !important; }
}
html[data-motion="reduced"] .liquid-gold-watermark__mark,
html[data-motion="reduced"] .liquid-gold-watermark__sheen { animation: none !important; }

/* OriginalLogoWatermark — the untouched brand mark as a soft background
 * watermark. Complementary to LiquidGoldWatermark so a hero surface can
 * layer both without either being lost. */

.original-logo-watermark {
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  z-index: 0;
  object-fit: contain;
  filter: grayscale(0.05) saturate(0.9);
  will-change: transform, opacity;
}

.original-logo-watermark--background {
  /* Global page-level watermark placement — subtle, off in the far
   * bottom-right so it never collides with hero banners at top of page. */
  right: 3%;
  bottom: 6%;
  top: auto;
  mix-blend-mode: multiply;
}
.original-logo-watermark--hero {
  right: -6%;
  top: -4%;
  mix-blend-mode: normal;
}
.original-logo-watermark--card {
  right: -50px;
  bottom: -60px;
  mix-blend-mode: multiply;
}
.original-logo-watermark--corner {
  right: 12px;
  bottom: 12px;
  mix-blend-mode: multiply;
}

[data-theme="dark"] .original-logo-watermark { mix-blend-mode: screen; filter: invert(0.15) saturate(1.1); }

@media (prefers-reduced-motion: reduce) {
  .original-logo-watermark { transition: none !important; }
}

/* Ensures readable content always renders on top when authors wrap
 * consumers with `.watermark-content-layer`. */
.watermark-content-layer { position: relative; z-index: 1; }

/* Premium 3D VIP customer cards — Silver + Gold */

.vip-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 32px;
  padding: 28px;
  min-height: 220px;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.vip-card:hover { transform: translateY(-6px) translateZ(24px); }
.vip-card::after {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  opacity: .42;
  animation: vipOrbit 9s linear infinite;
  pointer-events: none;
}

/* Gold tier — €8,000+ */
.vip-card-gold {
  color: #18212F;
  border: 1px solid rgba(122, 81, 27, .55);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 24%),
    linear-gradient(135deg, #fff4c6 0%, #f6d878 24%, #d8a93c 48%, #b98a32 72%, #fff4c6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -3px 12px rgba(122,81,27,.35),
    0 28px 60px rgba(122,81,27,.30),
    0 6px 0 rgba(122,81,27,.18);
}
.vip-card-gold::after {
  background: conic-gradient(from 180deg,
    transparent, rgba(255,255,255,.70), rgba(255,224,120,.92),
    transparent, rgba(255,255,255,.50), transparent);
}

/* Silver tier — €1,000–€5,000 */
.vip-card-silver {
  color: #18212F;
  border: 1px solid rgba(145, 153, 165, .55);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.98), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #f1f3f5 22%, #c9cdd3 48%, #e7e9ec 72%, #ffffff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -3px 12px rgba(95,103,116,.24),
    0 28px 60px rgba(95,103,116,.20),
    0 6px 0 rgba(95,103,116,.12);
}
.vip-card-silver::after {
  background: conic-gradient(from 180deg,
    transparent, rgba(255,255,255,.72), rgba(220,225,232,.88),
    transparent, rgba(255,255,255,.55), transparent);
}

.vip-card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.74) 46%, transparent 62%);
  transform: translateX(-140%);
  animation: vipShine 4.8s ease-in-out infinite;
  pointer-events: none;
}

.vip-card-medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px; width: 64px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 6px rgba(0,0,0,.10),
    0 6px 16px rgba(0,0,0,.10);
  flex-shrink: 0;
}

.vip-card-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #18212F;
  opacity: 0.85;
}
.vip-card-title {
  margin: 6px 0 0;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.15;
  font-weight: 700;
  color: #18212F;
}
.vip-card-spend {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: #2D2A28;
  opacity: 0.85;
}
.vip-card-benefits {
  position: relative;
  z-index: 10;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
@media (min-width: 640px) {
  .vip-card-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vip-card-benefit-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #18212F;
  background: rgba(255,255,255,0.45);
  border-radius: 14px;
  padding: 8px 12px;
}
.vip-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(122, 81, 27, 0.55);
  background: linear-gradient(135deg, #fff4c6, #d8a93c);
  color: #18212F;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(122,81,27,.24);
  transition: transform .18s ease, filter .18s ease;
}
.vip-card-cta:hover { transform: translateY(-1px); filter: brightness(1.03); }
.vip-card-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(122,81,27,.35), inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(122,81,27,.24);
}
.vip-card-legal {
  position: relative;
  z-index: 10;
  margin-top: 16px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #2D2A28;
  opacity: 0.75;
}

@keyframes vipOrbit { to { transform: rotate(360deg); } }
@keyframes vipShine {
  0%, 55% { transform: translateX(-140%); opacity: 0; }
  70%    { opacity: .72; }
  90%    { transform: translateX(140%); opacity: .18; }
  100%   { transform: translateX(140%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vip-card, .vip-card::after, .vip-card-shine {
    animation: none !important;
    transition: none !important;
  }
  .vip-card:hover { transform: none !important; }
}

/* Premium 3D Orb Card
 * Recreates the glossy golden bubble sitting on a cream shelf,
 * as shown in the owner's uploaded reference image.
 * Text stays flat and readable; only the background is dimensional.
 */

.premium-3d-orb-stage {
  position: relative;
  width: 100%;
  padding: 24px 0;
  background: linear-gradient(180deg, #FCEFC8 0%, #F6E3A9 55%, #ECD597 100%);
  overflow: hidden;
  isolation: isolate;
}

.premium-3d-orb-size-sm { padding: 16px 0; }
.premium-3d-orb-size-lg { padding: 40px 0; }

/* Cream "shelf" plane at the bottom */
.premium-3d-orb-shelf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(246, 227, 169, 0.9) 0%, #E8D08A 60%, #DFC57C 100%);
  border-top: 1px solid rgba(122, 81, 27, 0.14);
  z-index: 0;
}

/* The golden bubble itself */
.premium-3d-orb-bubble {
  position: relative;
  z-index: 1;
  width: min(680px, 85%);
  aspect-ratio: 5 / 3;
  margin: 0 auto;
  border-radius: 48% 48% 44% 44% / 62% 62% 38% 38%;
  background:
    radial-gradient(ellipse 60% 40% at 30% 22%, rgba(255, 255, 255, 0.85), transparent 55%),
    radial-gradient(ellipse 90% 80% at 50% 60%, #E5B94F 0%, #D8A93C 40%, #C39120 75%, #A87018 100%);
  box-shadow:
    inset 0 8px 18px rgba(255, 255, 255, 0.5),
    inset 0 -22px 44px rgba(122, 81, 27, 0.35),
    0 32px 60px rgba(122, 81, 27, 0.30),
    0 6px 0 rgba(122, 81, 27, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: premium3dOrbFloat 6s ease-in-out infinite;
}

/* Upper-left specular highlight (mimics a directional light) */
.premium-3d-orb-highlight {
  position: absolute;
  top: 8%;
  left: 14%;
  width: 32%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.28) 45%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 2;
}

/* Slow gold sheen sweeping across */
.premium-3d-orb-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255, 245, 205, 0.55) 50%, transparent 60%, transparent 100%);
  transform: translateX(-130%);
  animation: premium3dOrbShine 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}

/* Thin darker rim to sell the roundness */
.premium-3d-orb-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(122, 81, 27, 0.28), inset 0 -4px 12px rgba(122, 81, 27, 0.20);
  pointer-events: none;
  z-index: 2;
}

/* Flat centered content block — text stays sharp */
.premium-3d-orb-inner {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 24px 32px;
  color: #18212F;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.premium-3d-orb-inner:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 0 6px rgba(122, 81, 27, 0.4);
  border-radius: 32px;
}

.premium-3d-orb-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #2D2A28;
  opacity: 0.85;
}

.premium-3d-orb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.premium-3d-orb-title {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 700;
  color: #18212F;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.premium-3d-orb-subtitle {
  margin: 0;
  font-size: 1rem;
  color: #4A3D2F;
  opacity: 0.92;
}

@keyframes premium3dOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.005); }
}

@keyframes premium3dOrbShine {
  0%, 50% { transform: translateX(-130%); opacity: 0; }
  60%     { opacity: 0.65; }
  80%     { transform: translateX(130%); opacity: 0.2; }
  100%    { transform: translateX(130%); opacity: 0; }
}

@media (max-width: 640px) {
  .premium-3d-orb-bubble { width: 92%; aspect-ratio: 4 / 3; }
  .premium-3d-orb-title { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-3d-orb-bubble,
  .premium-3d-orb-shine {
    animation: none !important;
  }
}

/* AI Concierge widget avatar — scales the shared <InHouseAIAvatar/> (82px,
   see design/premium3dGlobal.css) down to this widget's compact 56px slot.
   Iter 146: this file used to hold a second, hand-duplicated avatar
   (blinking eyes + smiling mouth) that had drifted out of sync with the
   shared component used on Dashboard/AiCompanionPage. Scaling the shared
   component instead keeps every surface visually identical by construction. */

.ai-concierge-avatar-scale {
  display: inline-block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.ai-concierge-avatar-scale .inhouse-ai-avatar {
  transform: scale(0.683); /* 56px / 82px */
  transform-origin: top left;
}

/* Floating concierge trigger (bottom-right pulse) — same avatar, 60px slot. */
.ai-concierge-trigger-scale {
  display: inline-block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border-radius: 999px;
}

.ai-concierge-trigger-scale .inhouse-ai-avatar {
  transform: scale(0.732); /* 60px / 82px */
  transform-origin: top left;
}

.concierge-trigger-avatar {
  background: transparent !important;
  padding: 0;
  border: none;
}

@media (prefers-reduced-motion: reduce) {
  .ai-concierge-avatar-scale .inhouse-ai-avatar *,
  .ai-concierge-trigger-scale .inhouse-ai-avatar * {
    animation: none !important;
  }
}

/* Premium 3D System — preview stylesheet (SCOPED, `p3d-` prefix only).
 * Applied only inside /preview/premium-3d-system.  Nothing here leaks into
 * live pages until the owner approves specific pieces and we lift them.
 */

.p3d-shell {
  --p3d-ink: #18212F;
  --p3d-slate: #5D6673;
  --p3d-cream: #FAF7F0;
  --p3d-ivory: #FFF9F0;
  --p3d-champagne: #F3E6D0;
  --p3d-pale-gold: #F6EACB;
  --p3d-gold-100: #FFF6D6;
  --p3d-gold-300: #F6D878;
  --p3d-gold-500: #D8A93C;
  --p3d-gold-700: #B98A32;
  --p3d-gold-900: #6A4310;
  --p3d-bronze: #7A511B;
  --p3d-platinum-100: #FFFFFF;
  --p3d-platinum-300: #F1F3F5;
  --p3d-platinum-500: #C9CDD3;
  --p3d-platinum-700: #91929A;
  --p3d-royal-blue: #1F4E79;
  --p3d-royal-green: #2F6B4F;
  --p3d-radius-xl: 32px;
  --p3d-radius-2xl: 42px;
  --p3d-control-h: 56px;
  --p3d-icon: 22px;

  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255, 214, 128, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(122, 81, 27, 0.20), transparent 60%),
    linear-gradient(180deg, #FDF7E4 0%, #F4E2AF 50%, #E4CC85 100%);
  color: var(--p3d-ink);
  font-feature-settings: "ss01" on, "cv01" on;
  padding: 48px 20px 96px;
  position: relative;
  isolation: isolate;
}
.p3d-shell::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 3px 3px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 40%, black 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, black 40%, black 70%, transparent);
  opacity: 0.35;
  pointer-events: none; z-index: 0;
}

.p3d-container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.p3d-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--p3d-gold-900);
  opacity: 0.75;
}
.p3d-h1 {
  font-family: "Cormorant Garamond", "Playfair Display", ui-serif, serif;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 8px 0 16px;
  color: var(--p3d-ink);
}
.p3d-lead { max-width: 640px; color: rgba(27, 20, 9, 0.75); font-size: 1.05rem; line-height: 1.55; }

.p3d-section-title {
  margin: 56px 0 8px;
  font-family: "Cormorant Garamond", ui-serif, serif;
  font-size: 1.8rem;
  color: var(--p3d-gold-900);
  letter-spacing: -0.005em;
}
.p3d-caption { color: rgba(27, 20, 9, 0.65); font-size: 0.9rem; margin: 0 0 20px; line-height: 1.55; }

.p3d-grid { display: grid; grid-gap: 24px; gap: 24px; }
.p3d-grid-2 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .p3d-grid-2 { grid-template-columns: 1.05fr 0.95fr; } }
.p3d-grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.p3d-grid-5 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ============================================================
 * 3D LOGO MEDALLION (uses official /brand-mark.png — never distorted)
 * ============================================================ */
.p3d-medallion-stage {
  perspective: 1200px;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* Iter 146 remedial fix: /brand-mark.png is already a complete circular
   medallion with its own baked-in gold ring. This used to add a SECOND
   gold-plate ring (background/border/box-shadow) plus a rotating orbit
   ring behind a smaller, re-circled copy of the image — a visible
   double-ring. Now a neutral, transparent stage; the artwork is the only
   ring on screen. */
.p3d-medallion {
  width: 220px; height: 220px;
  border-radius: 0;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-14deg);
  animation: p3dMedallionTilt 8s ease-in-out infinite;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.p3d-medallion-orbit {
  display: none;
}
.p3d-medallion-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%; height: 100%;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 6px 14px rgba(122,81,27,.28));
}
.p3d-medallion-glyph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Cormorant Garamond", ui-serif, serif;
  font-size: 6.4rem;
  font-weight: 700;
  color: #4B2E0B;
  text-shadow: 0 2px 0 rgba(255,244,200,.65), 0 -1px 0 rgba(70,40,8,.6), 0 6px 10px rgba(70,40,8,.35);
  z-index: 2; line-height: 1;
}
.p3d-medallion-label {
  margin-top: 18px;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--p3d-gold-900);
  font-weight: 700;
}
.p3d-medallion-sm { width: 76px; height: 76px; }
.p3d-medallion-sm .p3d-medallion-glyph { font-size: 2.4rem; }

@keyframes p3dMedallionTilt {
  0%,100% { transform: rotateX(8deg) rotateY(-14deg); }
  50%     { transform: rotateX(4deg) rotateY(10deg); }
}
@keyframes p3dLogoGoldOrbit { to { transform: rotate(360deg); } }

/* ============================================================
 * PREMIUM AUTH CARD
 * ============================================================ */
.p3d-auth-stage {
  perspective: 1600px;
  display: flex; justify-content: center; padding: 20px 0;
}
.p3d-auth-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(520px, 100%);
  border-radius: var(--p3d-radius-2xl);
  padding: 40px 36px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.96), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,249,240,.96), rgba(246,234,203,.94));
  border: 1px solid rgba(185, 138, 50, .42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 8px rgba(122,81,27,.12),
    0 34px 80px rgba(122,81,27,.24),
    0 8px 0 rgba(122,81,27,.10);
  transform: rotateX(6deg);
  transform-style: preserve-3d;
}
.p3d-auth-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(246,216,120,.86), rgba(185,138,50,.72), rgba(255,255,255,.78));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.p3d-shine {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0%, transparent 35%, rgba(255,255,255,.68) 48%, rgba(255,230,150,.38) 54%, transparent 66%, transparent 100%);
  transform: translateX(-140%);
  animation: p3dShine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
.p3d-auth-header {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.p3d-auth-title {
  font-family: "Cormorant Garamond", ui-serif, serif;
  font-size: 2rem;
  color: var(--p3d-ink);
  margin: 0; text-align: center;
  letter-spacing: -0.01em;
}
.p3d-auth-subtitle {
  font-size: 0.95rem;
  color: rgba(27, 20, 9, 0.72);
  margin: 0; text-align: center;
  max-width: 380px;
}
.p3d-field { position: relative; margin: 14px 0; transform: translateZ(20px); }
.p3d-field-label {
  position: absolute; top: -8px; left: 18px;
  padding: 0 8px;
  background: linear-gradient(180deg, #FFF6D6, #FBEBB7);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--p3d-gold-900);
  box-shadow: 0 4px 10px rgba(106, 67, 16, 0.15);
}
.p3d-field-input {
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(216, 169, 60, 0.55);
  background: linear-gradient(180deg, #FFFBEE, #FDF2C9);
  color: var(--p3d-ink);
  font-size: 1rem;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(106,67,16,.15), inset 0 -1px 0 rgba(255,255,255,.8), 0 3px 0 rgba(216,169,60,.25);
  transition: box-shadow .25s ease, transform .25s ease;
}
.p3d-field-input:focus {
  box-shadow: inset 0 2px 4px rgba(106,67,16,.2), 0 0 0 3px rgba(255,224,138,.7), 0 6px 12px rgba(216,169,60,.35);
  transform: translateY(-1px);
}

/* ============================================================
 * SYMMETRIC 3D CONTROLS (buttons + primary/secondary variants)
 * ============================================================ */
.p3d-btn {
  min-height: var(--p3d-control-h);
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(185,138,50,.42);
  cursor: pointer;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--p3d-ink);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,249,240,.96), rgba(246,234,203,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 28px rgba(122,81,27,.14),
    0 4px 0 rgba(122,81,27,.08);
  font-size: 0.95rem;
}
.p3d-btn svg { width: var(--p3d-icon); height: var(--p3d-icon); color: var(--p3d-gold-700); flex-shrink: 0; }
.p3d-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 36px rgba(122,81,27,.20), 0 5px 0 rgba(122,81,27,.10); }
.p3d-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 12px rgba(122,81,27,.15), 0 2px 0 rgba(122,81,27,.08); }

.p3d-btn-primary {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 22%),
    linear-gradient(135deg, #FFF4C6 0%, #F6D878 22%, #D8A93C 46%, #B98A32 72%, #F6D878 100%);
  border-color: rgba(122,81,27,.50);
  color: #3A2408;
}
.p3d-btn-primary svg { color: #3A2408; }

.p3d-btn-platinum {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.98), transparent 24%),
    linear-gradient(135deg, #FFFFFF, #F1F3F5 30%, #C9CDD3 56%, #FFFFFF);
  border-color: rgba(145,153,165,.55);
  color: #2C3441;
}
.p3d-btn-platinum svg { color: #6A727F; }

.p3d-btn-diamond {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,1), transparent 24%),
    linear-gradient(135deg, #FFFFFF, #FAF7F0 42%, #F1F3F5);
  border-color: rgba(216,221,227,.85);
  color: var(--p3d-ink);
}
.p3d-btn-diamond svg { color: var(--p3d-gold-700); }

/* ============================================================
 * MATERIAL CARDS (5 variants)
 * ============================================================ */
.p3d-mat-card {
  position: relative;
  isolation: isolate;
  padding: 28px 24px;
  border-radius: var(--p3d-radius-xl);
  overflow: hidden;
  color: var(--p3d-ink);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 28px 60px rgba(122,81,27,.20), 0 6px 0 rgba(122,81,27,.08);
}
.p3d-mat-card:hover { transform: translateY(-6px); filter: saturate(1.05) brightness(1.02); }
.p3d-mat-card::before {
  /* metallic edge ring */
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(246,216,120,.88), rgba(185,138,50,.72), rgba(255,255,255,.72));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.p3d-mat-card::after {
  content: "";
  position: absolute; inset: -45%;
  z-index: -1;
  background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.62), rgba(255,224,120,.52), transparent, rgba(255,255,255,.32), transparent);
  animation: p3dOrbit 10s linear infinite;
  opacity: 0.22;
  pointer-events: none;
}

.p3d-mat-gold {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 24%),
    linear-gradient(135deg, #FFF4C6, #F6D878 28%, #D8A93C 54%, #FFF4C6);
  border: 1px solid rgba(122,81,27,.50);
}
.p3d-mat-platinum {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.98), transparent 24%),
    linear-gradient(135deg, #FFFFFF, #F1F3F5 30%, #C9CDD3 56%, #FFFFFF);
  border: 1px solid rgba(145,153,165,.52);
}
.p3d-mat-diamond {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,1), transparent 24%),
    linear-gradient(135deg, #FFFFFF, #FAF7F0 42%, #F1F3F5);
  border: 1px solid rgba(216,221,227,.72);
}
.p3d-mat-green {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 24%),
    linear-gradient(135deg, #FFFFFF, #EEF6EF 40%, #C9DCC8);
  border: 1px solid rgba(47,107,79,.35);
}
.p3d-mat-blue {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 24%),
    linear-gradient(135deg, #FFFFFF, #EEF5FB 40%, #C7D8E8);
  border: 1px solid rgba(31,78,121,.32);
}

.p3d-mat-card h3 {
  font-family: "Cormorant Garamond", ui-serif, serif;
  font-size: 1.35rem; margin: 0 0 8px;
  color: var(--p3d-ink);
}
.p3d-mat-card p { color: rgba(27, 20, 9, 0.72); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.p3d-mat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: radial-gradient(ellipse at 30% 20%, #FFF6D6, #F2CE6B 40%, #A87018);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 12px 20px -10px rgba(106,67,16,.5);
  color: #3A2408;
  margin-bottom: 14px;
}
.p3d-mat-badge-platinum { background: radial-gradient(ellipse at 30% 20%, #FFFFFF, #E1E5EA 45%, #91929A); color: #2C3441; }
.p3d-mat-badge-diamond  { background: radial-gradient(ellipse at 30% 20%, #FFFFFF, #FAF7F0 50%, #D8DDE3); color: var(--p3d-gold-900); }
.p3d-mat-badge-green    { background: radial-gradient(ellipse at 30% 20%, #FFFFFF, #DDECE0 45%, #6BA07F); color: #1B3D2A; }
.p3d-mat-badge-blue     { background: radial-gradient(ellipse at 30% 20%, #FFFFFF, #DAE7F1 45%, #4E7CA6); color: #142C46; }

/* Sparkles overlay */
.p3d-sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,225,140,.80) 0 1px, transparent 1.5px);
  background-size: 120px 120px, 180px 180px;
  background-position: 12% 18%, 78% 22%;
  opacity: .22;
  border-radius: inherit;
}

/* ============================================================
 * SEGMENTED CONTROLS + TOGGLE + STEPPER
 * ============================================================ */
.p3d-controls { display: grid; grid-gap: 20px; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.p3d-control-tile {
  border-radius: 20px;
  padding: 22px;
  background: linear-gradient(180deg, #FFF9E0, #F4E2AF);
  border: 1px solid rgba(216, 169, 60, 0.45);
  box-shadow: 0 18px 30px -20px rgba(106,67,16,.45), inset 0 1px 0 rgba(255,255,255,.85);
}
.p3d-control-tile .label { display: block; font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--p3d-gold-900); margin-bottom: 10px; font-weight: 700; }

.p3d-toggle {
  width: 72px; height: 36px; border-radius: 999px; position: relative;
  background: linear-gradient(180deg, #C89C3C, #A87018);
  box-shadow: inset 0 3px 6px rgba(106,67,16,.6), inset 0 -1px 0 rgba(255,255,255,.4);
  cursor: pointer; border: 1px solid rgba(106,67,16,.6);
  transition: background .3s ease;
}
.p3d-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #FFF6D6, #F2CE6B 60%, #A87018);
  box-shadow: 0 4px 8px rgba(106,67,16,.55), inset 0 1px 0 rgba(255,255,255,.9);
  transition: left .25s ease;
}
.p3d-toggle.on { background: linear-gradient(180deg, #F2CE6B, #D8A93C); }
.p3d-toggle.on::after { left: 41px; }

.p3d-stepper { display: inline-flex; align-items: center; gap: 12px; }
.p3d-stepper button {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(180deg, #FFF6D6, #E5B94F);
  color: #3A2408;
  border: 1px solid rgba(106,67,16,.35);
  box-shadow: 0 4px 0 rgba(106,67,16,.35), inset 0 1px 0 rgba(255,255,255,.9);
  font-weight: 700; font-size: 1.15rem; cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.p3d-stepper button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(106,67,16,.35), inset 0 1px 0 rgba(255,255,255,.9); }
.p3d-stepper-value { min-width: 40px; text-align: center; font-weight: 700; color: var(--p3d-gold-900); font-size: 1.1rem; }

.p3d-radio-group { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px;
  background: linear-gradient(180deg, #E9CE83, #C89C3C);
  box-shadow: inset 0 3px 6px rgba(106,67,16,.5);
}
.p3d-radio-group button {
  padding: 8px 16px; border-radius: 999px; border: 0;
  background: transparent; color: #3A2408; font-weight: 700; cursor: pointer;
  font-size: 0.85rem;
  transition: background .2s ease, color .2s ease;
}
.p3d-radio-group button.on {
  background: radial-gradient(ellipse at 50% 20%, #FFF6D6, #F2CE6B 60%, #D8A93C);
  box-shadow: 0 4px 8px rgba(106,67,16,.35), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ============================================================
 * 3D SELECTORS (Language / Currency / Theme)
 * ============================================================ */
.p3d-selector {
  min-height: var(--p3d-control-h);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(185,138,50,.42);
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,249,240,.96), rgba(246,234,203,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 28px rgba(122,81,27,.14), 0 4px 0 rgba(122,81,27,.08);
  font-weight: 700; color: var(--p3d-ink);
  cursor: pointer; font-size: 0.9rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.p3d-selector:hover { transform: translateY(-2px); }
.p3d-selector .flag {
  width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #FFF6D6, #D8A93C);
  border: 1px solid rgba(122,81,27,.4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.p3d-selector .chev { color: var(--p3d-gold-700); }

/* ============================================================
 * VIP CARDS (Gold + Silver) — full 3D presentation
 * ============================================================ */
.p3d-vip {
  width: 100%;
  aspect-ratio: 1.586 / 1; /* credit-card ratio */
  border-radius: 24px;
  position: relative;
  isolation: isolate;
  padding: 24px 26px;
  overflow: hidden;
  transform: rotateX(6deg) rotateY(-4deg);
  transform-style: preserve-3d;
  color: #2A1B04;
  transition: transform .3s ease;
}
.p3d-vip:hover { transform: rotateX(2deg) rotateY(0deg) translateY(-4px); }

.p3d-vip-gold {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.75), transparent 40%),
    linear-gradient(135deg, #FFF4C6, #F6D878 20%, #D8A93C 55%, #B98A32 90%);
  border: 1px solid rgba(122,81,27,.55);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -4px 12px rgba(122,81,27,.32),
    0 30px 60px -20px rgba(122,81,27,.55);
}
.p3d-vip-silver {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.85), transparent 40%),
    linear-gradient(135deg, #FFFFFF, #F1F3F5 20%, #C9CDD3 55%, #91929A 90%);
  border: 1px solid rgba(120,127,138,.55);
  color: #1A222D;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -4px 12px rgba(95,103,116,.28),
    0 30px 60px -20px rgba(95,103,116,.55);
}
.p3d-vip-tier { font-size: 0.7rem; letter-spacing: 0.42em; text-transform: uppercase; font-weight: 800; opacity: 0.85; }
.p3d-vip-name { font-family: "Cormorant Garamond", ui-serif, serif; font-size: 1.8rem; margin: 8px 0 4px; }
.p3d-vip-brand { font-size: 0.85rem; opacity: 0.85; font-weight: 600; }
.p3d-vip-footer { position: absolute; left: 26px; right: 26px; bottom: 22px; display: flex; justify-content: space-between; align-items: end; font-size: 0.8rem; }
.p3d-vip-chip {
  width: 42px; height: 32px; border-radius: 6px;
  background: linear-gradient(135deg, #E5B94F, #9B7420 60%, #E5B94F);
  border: 1px solid rgba(70,45,10,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  margin-top: 12px;
}
.p3d-vip-silver .p3d-vip-chip { background: linear-gradient(135deg, #F1F3F5, #8A93A0 60%, #F1F3F5); border-color: rgba(60,66,74,.4); }

/* ============================================================
 * DIAMOND ACCENT
 * ============================================================ */
.p3d-diamond {
  width: 18px; height: 18px;
  transform: rotate(45deg);
  border-radius: 4px;
  background: linear-gradient(135deg, #FFFFFF, #F1F3F5 40%, #C9CDD3 70%, #FFFFFF);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 6px 16px rgba(95,103,116,.20);
  display: inline-block;
}

/* ============================================================
 * PROCEDURAL 3D AVATAR (pure CSS, no react-three-fiber install)
 * Shows the direction — layered spheres/capsules with 3D transforms.
 * ============================================================ */
.p3d-avatar-3d-stage {
  perspective: 900px;
  height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.p3d-avatar-3d {
  width: 160px; height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-12deg);
  animation: p3dAvatar3dSway 6s ease-in-out infinite;
}
.p3d-avatar-3d-head {
  position: absolute; left: 50%; top: 0;
  width: 100px; height: 100px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #FFF3C0 0%, #F5D06A 22%, #D8A93C 55%, #A87018 82%, #6A4310 100%);
  box-shadow: inset 0 8px 16px rgba(255,255,255,.55), inset 0 -18px 32px rgba(70,40,8,.4), 0 20px 30px rgba(70,40,8,.35);
}
.p3d-avatar-3d-eye {
  position: absolute; top: 42px;
  width: 8px; height: 12px;
  border-radius: 50%;
  background: #100600;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6);
}
.p3d-avatar-3d-eye.left  { left: 55px; }
.p3d-avatar-3d-eye.right { left: 87px; }
.p3d-avatar-3d-mouth {
  position: absolute; left: 50%; top: 70px;
  width: 22px; height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #4B2E0B;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.4);
}
.p3d-avatar-3d-body {
  position: absolute; left: 50%; top: 92px;
  width: 130px; height: 108px;
  transform: translateX(-50%);
  border-radius: 999px 999px 42px 42px / 999px 999px 26px 26px;
  background:
    radial-gradient(ellipse at 30% 22%, rgba(255,255,255,.4), transparent 55%),
    linear-gradient(180deg, #FFF4C6, #D8A93C 55%, #7A511B);
  box-shadow: inset 0 -12px 22px rgba(70,40,8,.3), 0 24px 30px -12px rgba(70,40,8,.4);
}
.p3d-avatar-3d-shine {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,250,220,.5) 50%, transparent 60%);
  transform: translateX(-40%);
  animation: p3dAvatar3dSheen 6s ease-in-out infinite;
  border-radius: inherit;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes p3dAvatar3dSway {
  0%,100% { transform: rotateY(-12deg) rotateX(4deg); }
  50%     { transform: rotateY(8deg) rotateX(0deg); }
}
@keyframes p3dAvatar3dSheen {
  0%, 50% { transform: translateX(-40%); opacity: 0; }
  60%     { opacity: 0.9; }
  85%     { transform: translateX(40%); opacity: 0.15; }
  100%    { transform: translateX(40%); opacity: 0; }
}

/* SVG avatars (Phase 1) */
.p3d-avatar-row {
  display: grid; grid-gap: 24px; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: end;
}
.p3d-avatar-card {
  padding: 28px 20px 22px;
  border-radius: var(--p3d-radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,244,212,.5));
  border: 1px solid rgba(216, 169, 60, .4);
  box-shadow: 0 22px 40px -22px rgba(106,67,16,.5), inset 0 1px 0 rgba(255,255,255,.9);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.p3d-avatar-name { font-family: "Cormorant Garamond", ui-serif, serif; font-size: 1.25rem; margin: 12px 0 4px; }
.p3d-avatar-role { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p3d-gold-900); font-weight: 700; opacity: 0.8; }
.p3d-avatar-svg { width: 140px; height: 140px; filter: drop-shadow(0 12px 12px rgba(106,67,16,.35)); animation: p3dAvatarIdle 5.5s ease-in-out infinite; }
@keyframes p3dAvatarIdle {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* ============================================================
 * "AI COMPANION CARD REPLACEMENT" — before/after
 * ============================================================ */
.p3d-ba {
  display: grid; grid-gap: 20px; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .p3d-ba { grid-template-columns: 1fr 1fr; } }
.p3d-ba-item h4 { font-size: 0.8rem; letter-spacing: 0.32em; text-transform: uppercase; margin: 0 0 10px; color: var(--p3d-gold-900); font-weight: 700; }

/* Old "AI Companion blob" recreation for the BEFORE side */
.p3d-companion-blob {
  aspect-ratio: 5/3;
  border-radius: 48% 48% 44% 44% / 62% 62% 38% 38%;
  background:
    radial-gradient(ellipse 60% 40% at 30% 22%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(ellipse 90% 80% at 50% 60%, #E5B94F 0%, #D8A93C 40%, #C39120 75%, #A87018 100%);
  box-shadow: inset 0 8px 18px rgba(255,255,255,.5), inset 0 -22px 44px rgba(122,81,27,.35), 0 32px 60px rgba(122,81,27,.30);
  display: flex; align-items: center; justify-content: center;
  color: #18212F; text-align: center;
  padding: 32px;
}
.p3d-companion-card {
  /* Uses .p3d-mat-card + gold + adds content layout */
  padding: 32px 28px;
}
.p3d-companion-card h3 { font-size: 1.6rem; margin: 0 0 6px; }
.p3d-companion-features { display: grid; grid-gap: 10px; gap: 10px; margin: 18px 0 24px; padding: 0; list-style: none; font-size: 0.95rem; color: rgba(27,20,9,.75); }
.p3d-companion-features li { display: flex; gap: 10px; align-items: start; }
.p3d-companion-features .p3d-diamond { width: 12px; height: 12px; flex-shrink: 0; margin-top: 5px; }

/* ============================================================
 * MOBILE / WEBSITE / APP SHELL MOCKUPS
 * ============================================================ */
.p3d-mocks { display: grid; grid-gap: 24px; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .p3d-mocks { grid-template-columns: 260px 1fr; } }

.p3d-mobile-frame {
  width: 260px; height: 520px;
  border-radius: 42px;
  padding: 12px;
  background: linear-gradient(160deg, #2F2A21, #0D0A05);
  box-shadow: 0 30px 60px rgba(0,0,0,.4), inset 0 2px 6px rgba(255,255,255,.14);
  margin: 0 auto;
  position: relative;
}
.p3d-mobile-frame::before {
  content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; border-radius: 12px; background: #000; z-index: 2;
}
.p3d-mobile-screen {
  width: 100%; height: 100%; border-radius: 32px; overflow: hidden;
  background: linear-gradient(180deg, #FDF7E4, #F4E2AF 55%, #E4CC85);
  position: relative;
  display: flex; flex-direction: column;
  padding: 40px 12px 12px;
  gap: 10px;
}
.p3d-mobile-header {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
}
.p3d-mobile-title { font-family: "Cormorant Garamond", ui-serif, serif; font-size: 1rem; font-weight: 700; color: var(--p3d-ink); }
.p3d-mobile-hero {
  border-radius: 16px;
  padding: 14px;
  background: radial-gradient(circle at 22% 15%, rgba(255,255,255,.96), transparent 24%),
              linear-gradient(135deg, #FFF4C6, #F6D878 28%, #D8A93C 65%);
  border: 1px solid rgba(122,81,27,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 16px rgba(122,81,27,.28);
  color: #2A1B04;
  font-size: 0.8rem;
  font-weight: 700;
}
.p3d-mobile-hero .heroTitle { font-family: "Cormorant Garamond", ui-serif, serif; font-size: 1.1rem; margin-bottom: 2px; }
.p3d-mobile-btn {
  padding: 8px 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), transparent 22%),
              linear-gradient(135deg, #FFF4C6, #D8A93C 55%, #B98A32);
  color: #3A2408; font-size: 0.75rem; font-weight: 700;
  border: 1px solid rgba(122,81,27,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 0 rgba(122,81,27,.3);
  text-align: center; margin-top: 6px;
}
.p3d-mobile-tile {
  border-radius: 12px; padding: 10px;
  background: linear-gradient(180deg, #FFFFFF, #FAF7F0);
  border: 1px solid rgba(216,221,227,.72);
  box-shadow: 0 6px 12px rgba(122,81,27,.14);
  font-size: 0.75rem; color: var(--p3d-ink); font-weight: 600;
}

/* Website shell / App shell */
.p3d-shell-mock {
  border-radius: var(--p3d-radius-xl);
  padding: 14px;
  background: linear-gradient(160deg, #FFFFFF, #F1F3F5);
  border: 1px solid rgba(216,221,227,.72);
  box-shadow: 0 24px 44px -20px rgba(95,103,116,.35);
}
.p3d-shell-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(246,234,203,.92));
  border: 1px solid rgba(185,138,50,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 10px rgba(122,81,27,.14);
  font-size: 0.75rem; font-weight: 700; color: var(--p3d-ink);
}
.p3d-shell-topbar .dot { width: 10px; height: 10px; border-radius: 999px; background: radial-gradient(circle, #F6D878, #D8A93C); }
.p3d-shell-main {
  margin-top: 12px;
  display: grid; grid-gap: 12px; gap: 12px; grid-template-columns: 1fr 1fr 1fr;
}
.p3d-shell-block {
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, #FFFFFF, #FAF7F0);
  border: 1px solid rgba(216,221,227,.72);
  box-shadow: 0 8px 14px rgba(122,81,27,.14);
  font-size: 0.8rem; color: var(--p3d-ink); font-weight: 600;
}
.p3d-shell-block.gold {
  background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 24%),
              linear-gradient(135deg, #FFF4C6, #F6D878 30%, #D8A93C);
  border-color: rgba(122,81,27,.45);
}
.p3d-shell-block.blue {
  background: linear-gradient(135deg, #FFFFFF, #EEF5FB 40%, #C7D8E8);
  border-color: rgba(31,78,121,.32);
}

/* Approval bar */
.p3d-cta-bar {
  margin-top: 64px;
  padding: 24px 28px;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(255,246,214,.9), rgba(216,169,60,.35));
  border: 1px solid rgba(216, 169, 60, .4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  box-shadow: 0 22px 40px -22px rgba(106,67,16,.5);
}
.p3d-cta-bar p { margin: 0; color: var(--p3d-ink); font-weight: 500; }
.p3d-cta-bar strong { color: var(--p3d-gold-900); }

/* ============================================================
 * REPORTS
 * ============================================================ */
.p3d-report {
  margin: 32px 0;
  border-radius: var(--p3d-radius-xl);
  padding: 22px;
  background: linear-gradient(160deg, #FFFFFF, #FAF7F0);
  border: 1px solid rgba(216,221,227,.72);
  box-shadow: 0 24px 44px -20px rgba(95,103,116,.35);
}
.p3d-report h3 { font-family: "Cormorant Garamond", ui-serif, serif; font-size: 1.4rem; margin: 0 0 12px; color: var(--p3d-gold-900); }
.p3d-report table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.p3d-report th, .p3d-report td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(216,221,227,.6); vertical-align: top; }
.p3d-report th { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p3d-gold-900); font-weight: 700; }
.p3d-report td.ok { color: #1B6E3F; font-weight: 700; }
.p3d-report td.no { color: #7A2E1A; font-weight: 700; }

@keyframes p3dOrbit { to { transform: rotate(360deg); } }
@keyframes p3dShine {
  0%, 55% { transform: translateX(-140%); opacity: 0; }
  70% { opacity: .68; }
  90% { transform: translateX(140%); opacity: .18; }
  100% { transform: translateX(140%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .p3d-medallion, .p3d-avatar-svg, .p3d-avatar-3d,
  .p3d-mat-card::after, .p3d-medallion-orbit, .p3d-shine,
  .p3d-avatar-3d-shine { animation: none !important; }
  .p3d-mat-card:hover, .p3d-vip:hover, .p3d-btn:hover, .p3d-selector:hover { transform: none !important; }
}

/* B3 booking wizard styles — minimal, uses existing premium 3d gold tokens. */

.b3-wizard {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2.25rem) clamp(1rem, 2.5vw, 2rem);
}

.b3-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}
.b3-step {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  color: #4a2b46;
  color: var(--brand-plum, #4a2b46);
  border: 1px solid rgba(190, 149, 74, 0.25);
  background: rgba(255, 252, 244, 0.55);
  white-space: nowrap;
}
.b3-step.is-current {
  background: linear-gradient(160deg, #f7e6b4 0%, #e2c273 100%);
  border-color: rgba(190, 149, 74, 0.65);
  color: #3d2438;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(74, 43, 70, 0.18);
}
.b3-step.is-done {
  color: rgba(74, 43, 70, 0.72);
  background: rgba(247, 230, 180, 0.5);
}

.b3-panel {
  background: linear-gradient(150deg, #fffcf4 0%, #fff7e2 100%);
  border-radius: 20px;
  padding: clamp(1.25rem, 2vw, 2rem);
  border: 1px solid rgba(190, 149, 74, 0.22);
  box-shadow: 0 24px 56px -30px rgba(74, 43, 70, 0.28);
}

.b3-panel h2 {
  font-family: "Cormorant Garamond", "Playfair Display", serif;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  color: #3d2438;
  margin-bottom: 0.5rem;
}

.b3-choice-grid {
  display: grid;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .b3-choice-grid { grid-template-columns: 1fr 1fr; }
}

.b3-choice {
  text-align: left;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1.5px solid rgba(190, 149, 74, 0.28);
  background: #fffdf7;
  color: #3d2438;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.b3-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(190, 149, 74, 0.55);
  box-shadow: 0 12px 28px -18px rgba(74, 43, 70, 0.35);
}
.b3-choice[aria-pressed="true"] {
  border-color: #b78a2c;
  background: linear-gradient(150deg, #fff5d5 0%, #f8dfa6 100%);
  box-shadow: 0 12px 34px -18px rgba(74, 43, 70, 0.42);
}
.b3-choice .b3-choice-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.b3-choice .b3-choice-meta {
  font-size: 0.78rem;
  color: rgba(74, 43, 70, 0.75);
}

.b3-slot-grid {
  display: grid;
  grid-gap: 0.5rem;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.b3-slot-btn {
  padding: 0.55rem 0.5rem;
  border-radius: 12px;
  border: 1.5px solid rgba(190, 149, 74, 0.32);
  background: #fffdf7;
  color: #3d2438;
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}
.b3-slot-btn:hover { transform: translateY(-1px); border-color: #b78a2c; }
.b3-slot-btn[aria-pressed="true"] {
  background: linear-gradient(160deg, #f6dfa0 0%, #e2b45a 100%);
  border-color: #a3771f;
  color: #2b1728;
}
.b3-slot-btn.b3-date-has-slots {
  border-color: rgba(163, 119, 31, 0.55);
  box-shadow: inset 0 0 0 1px rgba(246, 223, 160, 0.4);
}
.b3-slot-btn.b3-date-has-slots::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #a3771f;
  margin-left: 6px;
  vertical-align: middle;
}
.b3-slot-btn.b3-date-empty,
.b3-slot-btn[disabled],
.b3-slot-btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  background: #f6f2ea;
  color: #7a6b60;
  border-color: rgba(122, 107, 96, 0.25);
}
.b3-slot-btn[disabled]:hover,
.b3-slot-btn[aria-disabled="true"]:hover {
  transform: none;
  border-color: rgba(122, 107, 96, 0.25);
}

.b3-countdown {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #7a4a1f;
  background: rgba(255, 242, 205, 0.7);
  border: 1px solid rgba(190, 149, 74, 0.35);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}
.b3-countdown.is-warning { color: #9a2b2b; border-color: rgba(154, 43, 43, 0.4); background: rgba(255, 226, 226, 0.7); }

.b3-consents label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(190, 149, 74, 0.22);
  background: #fffdf7;
  font-size: 0.86rem;
  color: #3d2438;
}
.b3-consents label + label { margin-top: 0.5rem; }

.b3-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.b3-section-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  color: #3d2438;
  margin: 1.5rem 0 0.5rem;
}

/* Make Baby Complete — Premium brand system (noble logo palette) */
:root {
  /* ─────────── Base surfaces (light, luminous) ─────────── */
  --brand-diamond:      #F0D77A;
  --brand-porcelain:    #E8CB6A;
  --brand-pearl:        #EFD892;
  --brand-ivory:        #EFD892;
  --brand-cream:        #F4E5B8;
  --brand-champagne:    #E8CB6A;
  --brand-pale-gold:    #F1DEA8;
  --brand-warm-ivory:   #F4E5B8;

  /* Iter 145.11 — RGB triples for tailwind opacity utilities.
     Tailwind requires colors declared as `rgb(<r> <g> <b> / <alpha-value>)`
     to make `bg-color/N` opacity modifiers work. These triples are consumed
     by tailwind.config.js and MUST stay in sync with the hex values above.
     Any color that appears in the codebase with a `/N` opacity modifier
     MUST have its RGB triple listed here. */
  --brand-diamond-rgb:       240 215 122;
  --brand-porcelain-rgb:     232 203 106;
  --brand-pearl-rgb:         239 216 146;
  --brand-ivory-rgb:         239 216 146;
  --brand-cream-rgb:         244 229 184;
  --brand-champagne-rgb:     232 203 106;
  --brand-pale-gold-rgb:     241 222 168;
  --brand-gold-rgb:          228 186 91;   /* Iter 145.16 lightened from 201 162 75 */
  --brand-royal-gold-rgb:    216 169 60;   /* Iter 145.16 lightened from 168 132 46 */
  --brand-bronze-rgb:        201 154 44;   /* aliased to warm gold accent */
  --brand-plum-rgb:          24 33 47;
  --brand-blush-rgb:         242 216 213;
  --brand-rose-rgb:          217 166 160;
  --brand-terracotta-rgb:    201 133 107;
  --brand-sage-rgb:          159 183 154;
  --brand-rose-gold-rgb:     231 191 169;
  --brand-blush-gold-rgb:    242 214 198;
  --brand-pearl-gold-rgb:    245 228 184;
  --brand-soft-gold-rgb:     232 203 106;   /* Iter 145.16 — matches --brand-soft-gold */

  /* ─────────── Metallic luxury (gold + silver families) — sampled from
     the Sacred Origin banner artwork so every surface harmonises with
     the mother-child-tree emblem. ─────────── */
  --brand-gold:         #E4BA5B;  /* luminous warm gold (lightened from #C9A24B) */
  --brand-soft-gold:    #E8CB6A;  /* Iter 145.16 — retired dark #B08D3E → champagne */
  --brand-royal-gold:   #D8A93C;  /* Iter 145.16 — retired mustard #A8842E → polished warm gold */
  /* Iter 145.11/16 — bronze retired per gold-and-diamond-only design system.
     Both vars now resolve to polished warm gold so every legacy .text-brand-bronze /
     .bg-brand-bronze / .border-brand-bronze / var(--brand-bronze) usage
     renders as luminous gold instead of the banned bronze/copper/mustard tone. */
  --brand-bronze:       #C99A2C;  /* was #8B6A2A/#A8842E — now = warm gold accent */
  --brand-champagne-highlight: #F1DEA8; /* rim highlight (lightened) */
  --brand-champagne-glow: #F8ECC9; /* halo around emblem (lightened) */
  --brand-warm-bronze:  #D8A93C;  /* was #A77A3D — now = polished warm gold */
  /* Iter 145.16 — new luminous rose-gold + pearl-gold accents for premium tier variety */
  --brand-rose-gold:    #E7BFA9;
  --brand-blush-gold:   #F2D6C6;
  --brand-pearl-gold:   #F5E4B8;
  --brand-silver:       #E7E9EC;
  --brand-platinum:     #F1F3F5;
  --brand-silver-gray:  #C9CDD3;
  --brand-diamond-shadow:#D8DDE3;

  /* ─────────── Royal trust accents (limited use) ─────────── */
  --brand-royal-blue:   #1F4E79;
  --brand-peace-blue:   #6F95B8;
  --brand-royal-green:  #2F6B4F;
  --brand-sage:         #9FB79A;
  --brand-fertility:    #7EA77A;
  --brand-olive:        #DDE8D8;

  /* ─────────── Text ink family — no more purple ─────────── */
  --brand-plum:         #18212F;   /* deep ink — was purple #3A1F3D */
  --brand-navy:         #172033;
  --brand-charcoal:     #2D2A28;   /* warm charcoal — was #2B2230 */
  --brand-ink:          #18212F;
  --brand-warm-charcoal:#2D2A28;
  --brand-slate:        #5D6673;
  --brand-soft-slate:   #5D6673;

  /* ─────────── Emotional warmth (subtle accents only) ─────────── */
  --brand-rose:         #D9A6A0;
  --brand-blush:        #F2D8D5;
  --brand-terracotta:   #C9856B;

  /* ─────────── Legacy compat vars ─────────── */
  --marketing-bg:       var(--brand-pearl);
  --marketing-card:     rgba(255, 249, 240, 0.92);
  --marketing-text:     var(--brand-ink);
  --marketing-muted:    var(--brand-slate);
  --marketing-gold:     var(--brand-royal-gold);
  --marketing-sage:     var(--brand-fertility);
}

html, body, #root { min-height: 100%; }

body {
  margin: 0;
  font-family: "Figtree", "Manrope", ui-sans-serif, system-ui, sans-serif;
  color: #18212F;
  color: var(--brand-plum);
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(216, 180, 106, 0.14), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(159, 183, 154, 0.12), transparent 60%),
    linear-gradient(180deg, #EFD892 0%, #F4E5B8 55%, #E8CB6A 100%);
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(216, 180, 106, 0.14), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(159, 183, 154, 0.12), transparent 60%),
    linear-gradient(180deg, var(--brand-ivory) 0%, var(--brand-cream) 55%, var(--brand-champagne) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Serif for premium headings */
h1, h2, h3, h4, .font-serif { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; letter-spacing: -0.005em; }

/* Utility color tokens used with Tailwind arbitrary-value + also from JSX classNames */
.text-brand-ivory { color: #EFD892; color: var(--brand-ivory); }
.text-brand-cream { color: #F4E5B8; color: var(--brand-cream); }
.text-brand-plum { color: #18212F; color: var(--brand-plum); }
.text-brand-ink { color: #18212F; color: var(--brand-ink); }
.text-brand-navy { color: #172033; color: var(--brand-navy); }
.text-brand-charcoal { color: #2D2A28; color: var(--brand-charcoal); }
.text-brand-slate { color: #5D6673; color: var(--brand-slate); }
.text-brand-gold { color: #E4BA5B; color: var(--brand-gold); }
.text-brand-royal-gold { color: #D8A93C; color: var(--brand-royal-gold); }
.text-brand-bronze { color: #C99A2C; color: var(--brand-bronze); }
.text-brand-sage { color: #9FB79A; color: var(--brand-sage); }
.text-brand-royal-blue { color: #1F4E79; color: var(--brand-royal-blue); }
.text-brand-royal-green { color: #2F6B4F; color: var(--brand-royal-green); }
.text-brand-fertility { color: #7EA77A; color: var(--brand-fertility); }
.text-brand-rose { color: #D9A6A0; color: var(--brand-rose); }
.text-brand-terracotta { color: #C9856B; color: var(--brand-terracotta); }

.bg-brand-ivory { background-color: #EFD892; background-color: var(--brand-ivory); }
.bg-brand-pearl { background-color: #EFD892; background-color: var(--brand-pearl); }
.bg-brand-cream { background-color: #F4E5B8; background-color: var(--brand-cream); }
.bg-brand-warm-ivory { background-color: #F4E5B8; background-color: var(--brand-warm-ivory); }
.bg-brand-champagne { background-color: #E8CB6A; background-color: var(--brand-champagne); }
.bg-brand-pale-gold { background-color: #F1DEA8; background-color: var(--brand-pale-gold); }
.bg-brand-diamond { background-color: #F0D77A; background-color: var(--brand-diamond); }
.bg-brand-porcelain { background-color: #E8CB6A; background-color: var(--brand-porcelain); }
.bg-brand-plum { background-color: #18212F; background-color: var(--brand-plum); }
.bg-brand-ink { background-color: #18212F; background-color: var(--brand-ink); }
.bg-brand-navy { background-color: #172033; background-color: var(--brand-navy); }
.bg-brand-charcoal { background-color: #2D2A28; background-color: var(--brand-charcoal); }
.bg-brand-gold { background-color: #E4BA5B; background-color: var(--brand-gold); }
.bg-brand-soft-gold { background-color: #E8CB6A; background-color: var(--brand-soft-gold); }
.bg-brand-royal-gold { background-color: #D8A93C; background-color: var(--brand-royal-gold); }
.bg-brand-bronze { background-color: #C99A2C; background-color: var(--brand-bronze); }
.bg-brand-silver { background-color: #E7E9EC; background-color: var(--brand-silver); }
.bg-brand-platinum { background-color: #F1F3F5; background-color: var(--brand-platinum); }
.bg-brand-royal-blue { background-color: #1F4E79; background-color: var(--brand-royal-blue); }
.bg-brand-royal-green { background-color: #2F6B4F; background-color: var(--brand-royal-green); }
.bg-brand-sage { background-color: #9FB79A; background-color: var(--brand-sage); }
.bg-brand-fertility { background-color: #7EA77A; background-color: var(--brand-fertility); }
.bg-brand-olive { background-color: #DDE8D8; background-color: var(--brand-olive); }
.bg-brand-rose { background-color: #D9A6A0; background-color: var(--brand-rose); }
.bg-brand-blush { background-color: #F2D8D5; background-color: var(--brand-blush); }
.bg-brand-terracotta { background-color: #C9856B; background-color: var(--brand-terracotta); }

.border-brand-ivory { border-color: #EFD892; border-color: var(--brand-ivory); }
.border-brand-cream { border-color: #F4E5B8; border-color: var(--brand-cream); }
.border-brand-champagne { border-color: #E8CB6A; border-color: var(--brand-champagne); }
.border-brand-pale-gold { border-color: #F1DEA8; border-color: var(--brand-pale-gold); }
.border-brand-plum { border-color: #18212F; border-color: var(--brand-plum); }
.border-brand-ink { border-color: #18212F; border-color: var(--brand-ink); }
.border-brand-gold { border-color: #E4BA5B; border-color: var(--brand-gold); }
.border-brand-royal-gold { border-color: #D8A93C; border-color: var(--brand-royal-gold); }
.border-brand-bronze { border-color: #C99A2C; border-color: var(--brand-bronze); }
.border-brand-silver { border-color: #E7E9EC; border-color: var(--brand-silver); }
.border-brand-sage { border-color: #9FB79A; border-color: var(--brand-sage); }
.border-brand-terracotta { border-color: #C9856B; border-color: var(--brand-terracotta); }

.hover\:bg-brand-royal-gold:hover { background-color: #D8A93C; background-color: var(--brand-royal-gold); }
.hover\:bg-brand-pale-gold:hover { background-color: #F1DEA8; background-color: var(--brand-pale-gold); }
.hover\:bg-brand-charcoal:hover { background-color: #2D2A28; background-color: var(--brand-charcoal); }
.hover\:bg-brand-bronze:hover { background-color: #C99A2C; background-color: var(--brand-bronze); }
.hover\:text-brand-gold:hover { color: #E4BA5B; color: var(--brand-gold); }
.hover\:text-brand-royal-gold:hover { color: #D8A93C; color: var(--brand-royal-gold); }
.hover\:text-brand-diamond:hover { color: #F0D77A; color: var(--brand-diamond); }
.hover\:text-brand-ivory:hover { color: #EFD892; color: var(--brand-ivory); }
.hover\:border-brand-gold:hover { border-color: #E4BA5B; border-color: var(--brand-gold); }

/* Legacy marketing/topbar/hero styles (used by AuthScreen, Dashboard, MarketingPage) */
.marketing-shell, .auth-shell, .app-shell { min-height: 100vh; padding: 24px; }

/* Force banner to touch viewport top — override any parent padding/margin
   above the banner across all shell types. Applies globally: no page shall
   have beige/cream space above the Sacred Origin banner. */
.mbc-banner-logo-wrap {
  margin-top: -24px !important; /* neutralise marketing-shell padding-top */
}
/* Iter 113 — even more aggressive removal of any space above the banner.
   Some parent shells add `padding` / `min-height` that pushes the banner
   down by 100-200px on wide viewports. Force the banner to be the very
   first visible thing on the page. */
[data-testid="premium-home"] > .mbc-banner-logo-wrap,
[data-testid="premium-home"] .mbc-banner-logo-wrap,
.app-shell-luxury > .mbc-banner-logo-wrap {
  margin-top: 0 !important;
}
[data-testid="premium-home"],
[data-testid="premium-home"].app-shell-luxury {
  padding-top: 0 !important;
}
/* Kill the ::before/::after pseudo watermark from pushing content down —
   they are position:fixed so they shouldn't, but if a browser bug forces
   inline layout, at least the pseudo is hidden above the fold. */
.app-shell-luxury::before,
.app-shell-luxury::after,
.marketing-shell::before,
.marketing-shell::after { top: auto; }
:root:has(.mbc-banner-logo-wrap) body,
body:has(.mbc-banner-logo-wrap) { padding-top: 0 !important; margin-top: 0 !important; }
#root:has(> * .mbc-banner-logo-wrap) { padding-top: 0 !important; margin-top: 0 !important; }

.marketing-topbar, .topbar {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  margin-bottom: 24px; padding: 18px 22px; border-radius: 22px;
  background: linear-gradient(135deg, #F0D77A 0%, #F1DEA8 100%);
  background: linear-gradient(135deg, var(--brand-diamond) 0%, var(--brand-pale-gold) 100%);
  color: #18212F;
  color: var(--brand-ink);
  border: 1px solid rgba(216, 180, 106, 0.35);
  box-shadow: 0 22px 60px -30px rgba(185, 138, 50, 0.35);
}

.brand-link, .marketing-nav a, .footer-links a { color: inherit; text-decoration: none; }
.marketing-nav, .footer-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.marketing-nav a { font-size: 0.92rem; opacity: 0.92; transition: opacity .2s ease, color .2s ease; }
.marketing-nav a:hover { opacity: 1; color: #E4BA5B; color: var(--brand-gold); }

.marketing-hero { max-width: 960px; padding: 24px 0 12px; }
.marketing-hero h1 { font-size: clamp(2.75rem, 6vw, 5rem); line-height: 0.98; margin: 12px 0 18px; letter-spacing: -0.01em; font-family: "Cormorant Garamond", Georgia, serif; }
.marketing-description { max-width: 62ch; font-size: 1.2rem; line-height: 1.7; color: #5D6673; color: var(--marketing-muted); }
.marketing-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Iter 145.10 — legacy .button-primary/.button-secondary rules removed.
   The canonical definitions now live in /app/frontend/src/index.css so
   every legacy call-site inherits the same liquid-gold pill (primary) and
   gold-outlined cream pill (secondary) that <Premium3DControl variant="primary"/>
   renders. The `!important` pill-radius override for these classes still
   lives further down (see the border-radius override block). */

.marketing-content { display: grid; grid-gap: 20px; gap: 20px; }
.marketing-card {
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  background: rgba(255, 249, 240, 0.92);
  background: var(--marketing-card);
  border: 1px solid rgba(216, 180, 106, 0.28);
  border-radius: 24px;
  box-shadow: 0 14px 40px -14px rgba(58, 31, 61, 0.14);
}

.small-note { font-size: 0.95rem; color: #5D6673; color: var(--marketing-muted); }
.marketing-card ul { padding-left: 20px; line-height: 1.8; color: #5D6673; color: var(--marketing-muted); }

.marketing-footer {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(58,31,61,.12);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

.auth-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 24px !important;
  gap: 12px;
}
.auth-shell .auth-utility-bar {
  width: 100%;
  max-width: 640px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 12px;
  margin-bottom: 8px;
}
.auth-shell .auth-card { width: 100%; max-width: 640px; }
.auth-card { width: min(100%, 640px); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(255,249,240,.9); border: 1px solid rgba(58,31,61,.12); }
.auth-header { gap: 12px; }

.brand-logo { display: block; object-fit: contain; }
.brand-logo.full { width: min(260px, 100%); }
.brand-logo.compact { width: 96px; }
.brand-logo.mobile { width: 140px; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.24em; opacity: 0.9; margin: 0; font-size: 0.72rem; font-weight: 600; color: #E4BA5B; color: var(--brand-gold); }

.feature-grid, .hero-grid, .dashboard-hero-grid { display: grid; grid-gap: 20px; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.muted, .action-copy { color: #5D6673; color: var(--marketing-muted); }
.stat-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.stat-row strong { font-size: 2.5rem; color: #C99A2C; color: var(--brand-bronze); font-family: "Cormorant Garamond", serif; }
.loading-screen { min-height: 100vh; display: grid; place-items: center; color: #18212F; color: var(--brand-plum); font-size: 1.15rem; grid-gap: 12px; gap: 12px; }

.hero-mockup { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-gap: 16px; gap: 16px; margin: 24px 0 8px; }
.hero-card {
  border-radius: 22px; padding: 20px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(216,180,106,.28);
  box-shadow: 0 18px 40px -18px rgba(58,31,61,.14);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -20px rgba(58,31,61,.22); }
.hero-card span { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #C99A2C; color: var(--brand-bronze); margin-bottom: 10px; font-weight: 600; }
.hero-card strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.4rem; line-height: 1.2; color: #18212F; color: var(--brand-plum); margin-bottom: 8px; }
.hero-card p { margin: 0; color: #5D6673; color: var(--marketing-muted); line-height: 1.6; }
.hero-card-primary { background: linear-gradient(180deg, rgba(255,249,240,.96), rgba(243,230,208,.88)); border-color: rgba(216,180,106,.45); }
.hero-card-secondary { background: rgba(255,255,255,.86); }

.compact-page .marketing-hero { padding-bottom: 4px; }

.service-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.service-select { width: 100%; border-radius: 12px; border: 1px solid rgba(58,31,61,.18); padding: 10px 12px; background: #F4E5B8; background: var(--brand-cream); font-size: 0.95rem; color: #18212F; color: var(--brand-plum); }

.nav-cta { padding: 9px 16px; border-radius: 999px; background: #E4BA5B; background: var(--brand-gold); color: #18212F !important; color: var(--brand-plum) !important; font-weight: 700; letter-spacing: .01em; transition: background-color .2s ease; }
.nav-cta:hover { background: #E8CB6A; background: var(--brand-soft-gold); }

@media (prefers-reduced-motion: no-preference) {
  .marketing-card, .button-primary, .button-secondary { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, opacity .25s ease; }
  .marketing-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -20px rgba(23,32,51,.14); }
}

@media (max-width: 768px) {
  .marketing-shell, .auth-shell, .app-shell { padding: 16px; }
  .marketing-topbar, .topbar { flex-direction: column; align-items: flex-start; }
  .marketing-nav { gap: 10px; }
  .marketing-hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .marketing-description { font-size: 1.05rem; }
}

/* AI Companion modal */
.ai-modal-overlay { position: fixed; inset: 0; background: rgba(23,32,51,.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 24px; }
.ai-modal { max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; border-radius: 24px; }
.ai-explanation { background: rgba(216,180,106,.10); border-left: 3px solid #C99A2C; border-left: 3px solid var(--brand-bronze); padding: 16px; border-radius: 12px; }
.ai-explanation p { margin: 0 0 8px 0; line-height: 1.55; }
.onboarding-cta-card { border: 2px solid #C99A2C; border: 2px solid var(--brand-bronze); background: linear-gradient(135deg, rgba(216,180,106,.14), rgba(159,183,154,.10)); }

/* Smoother focus ring in brand color */
*:focus-visible { outline: 2px solid #E4BA5B; outline: 2px solid var(--brand-gold); outline-offset: 3px; border-radius: 6px; }

/* ─────────── B1 — Subtle Sacred Origin watermark (3–8% opacity embossing) ─────────── */
/* Page-scale watermark: two soft, low-opacity brand-mark stamps in opposite corners.
   Ensures a premium embossed feel without ever interfering with content or CTAs. */
.luxury-watermark-page {
  position: relative;
  isolation: isolate;
}
.luxury-watermark-page::before,
.luxury-watermark-page::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  width: 480px; height: 480px;
  background-image: var(--brand-mark-url);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.11; /* bumped from 0.045 → 0.11 for actual visible presence */
  filter: sepia(0.4) saturate(1.4) hue-rotate(-8deg);
}
.luxury-watermark-page::before { top: 10%; left: -90px; transform: rotate(-8deg); }
.luxury-watermark-page::after  { bottom: 8%; right: -90px; transform: rotate(8deg); }
/* Card-scale watermark — a single centred soft mark inside the container */
.luxury-watermark-soft {
  position: relative;
  isolation: isolate;
}
.luxury-watermark-soft::after {
  content: "";
  position: absolute; inset: auto -30px -30px auto;
  width: 220px; height: 220px;
  background-image: var(--brand-mark-url);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.10; /* bumped from 0.06 → 0.10 */
  pointer-events: none;
  z-index: 0;
  filter: sepia(0.5) saturate(1.4) hue-rotate(-10deg);
}
.luxury-watermark-soft > * { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .luxury-watermark-page::before,
  .luxury-watermark-page::after { width: 280px; height: 280px; opacity: 0.075; }
  .luxury-watermark-soft::after { width: 160px; height: 160px; opacity: 0.075; }
}

/* ─────────── Responsive circular LogoMark sizing (Batch C) ───────────
   Slightly larger so the text inside the circular Sacred Origin mark stays
   readable across shells. Caller can still pass an explicit Tailwind size
   (w-16 h-16 etc.) which will override this default. */
.logo-mark-responsive {
  width: clamp(56px, 5.5vw, 84px);
  height: clamp(56px, 5.5vw, 84px);
}
@media (max-width: 640px) {
  .logo-mark-responsive { width: 56px; height: 56px; }
}
.logo-mark-hero {
  width: clamp(96px, 10vw, 150px);
  height: clamp(96px, 10vw, 150px);
}

/* ─────────── Global Sacred-Origin watermark (Batch C — subtle, 3–8% opacity) ───────────
   Two soft brand-mark stamps in opposite corners of every public marketing
   shell AND the logged-in app shell. Uses the same SVG mark so the treatment
   feels like sacred embossing rather than decorative noise. Zero interaction
   surface — pointer-events disabled — and z-index sits behind all content.
   Turns off on print and when prefers-reduced-motion prefers-more-contrast
   (unlikely but harmless). */
.marketing-shell,
.app-shell-luxury,
.dashboard-shell {
  position: relative;
}
.marketing-shell::before,
.marketing-shell::after,
.app-shell-luxury::before,
.app-shell-luxury::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  width: 420px;
  height: 420px;
  background: url("https://customer-assets.emergentagent.com/job_maternal-passage/artifacts/kd06lsbn_generated-image%20%2820%29.png") center/contain no-repeat;
  opacity: 0.14; /* bumped from 0.075 → 0.14 for visible presence */
  filter: sepia(0.35) saturate(1.4) hue-rotate(-6deg);
  transition: opacity 200ms ease;
}
.marketing-shell::before,
.app-shell-luxury::before { top: 6%;    left: -120px;  transform: rotate(-6deg); }
.marketing-shell::after,
.app-shell-luxury::after  { bottom: 4%; right: -120px; transform: rotate(6deg); }
.marketing-shell > *,
.app-shell-luxury > *,
.dashboard-shell > * { position: relative; z-index: 1; }
/* Sticky page headers must keep their sticky position AND high z-index so the
   dropdown menus render on top of hero text below. The `.marketing-shell > *`
   reset above would otherwise demote them to position:relative z-index:1 and
   let the hero section (also z-1, later in source) paint over the open menu. */
.marketing-shell > header.sticky,
.app-shell-luxury > header.sticky,
.dashboard-shell > header.sticky,
.marketing-shell > header[class*="sticky"],
.app-shell-luxury > header[class*="sticky"],
.dashboard-shell > header[class*="sticky"],
[data-testid="pricing-hub-page"] > header,
[data-testid="store-page"] > header,
[data-testid="premium-home-page"] > header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1500 !important;
}
@media (max-width: 768px) {
  .marketing-shell::before,
  .marketing-shell::after,
  .app-shell-luxury::before,
  .app-shell-luxury::after { width: 280px; height: 280px; opacity: 0.10; }
}
/* Slightly more visible on marketing hero, more subtle on legal/dashboard */
body[data-route^="/legal"] .marketing-shell::before,
body[data-route^="/legal"] .marketing-shell::after,
body[data-route^="/privacy"] .marketing-shell::before,
body[data-route^="/privacy"] .marketing-shell::after,
body[data-route^="/terms"] .marketing-shell::before,
body[data-route^="/terms"] .marketing-shell::after { opacity: 0.028; }
@media print {
  .marketing-shell::before,
  .marketing-shell::after,
  .app-shell-luxury::before,
  .app-shell-luxury::after { display: none; }
}

/* ─────────── Accessibility: skip-to-content link (Batch C baseline) ─────────── */
.skip-to-content {
  position: fixed;
  top: -80px;
  left: 12px;
  padding: 10px 18px;
  background: #18212F;
  background: var(--brand-plum, #4b234a);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  z-index: 999;
  transition: top 180ms ease;
  pointer-events: none;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 12px;
  outline: 3px solid #D8A93C;
  outline: 3px solid var(--brand-royal-gold, #c9a24b);
  outline-offset: 2px;
  pointer-events: auto;
}


/* ─────────── Luxury design harmonisation ─────────── */
/* Softens harsh black link/body text on public surfaces to warm gold/bronze/ink.
   Preserves readability by keeping mid-contrast tones on important content. */
.marketing-nav a,
.footer-links a,
.marketing-topbar .brand-link,
.topbar .brand-link { color: #18212F; color: var(--brand-ink); }
.marketing-nav a:hover,
.footer-links a:hover,
.marketing-topbar .brand-link:hover,
.topbar .brand-link:hover { color: #D8A93C; color: var(--brand-royal-gold); }

/* Prevent nav CTA wrapping on desktop */
.marketing-nav { flex-wrap: nowrap; }
.marketing-nav .nav-cta,
.marketing-nav a[data-testid="header-start-journey"],
.marketing-nav a[data-testid="header-login"] { white-space: nowrap; }
@media (max-width: 1100px) {
  .marketing-nav { flex-wrap: wrap; }
}

/* ─────────── Theme system: Normal / Gold / Dark (Auto resolves at runtime) ─────────── */
/* Gold is the signature brand default. Never fully dark. Preserves Noble Palette. */
:root, :root[data-theme="normal"] {
  --theme-bg: #FAF7F0;        /* pearl */
  --theme-surface: #FFF9F0;   /* warm ivory */
  --theme-text: #18212F;
  --theme-heading: #B98A32;
  --theme-accent: #D8B46A;
  --theme-border: rgba(216, 180, 106, 0.35);
  --theme-shadow: 0 20px 50px -22px rgba(185, 138, 50, 0.28);
}
:root[data-theme="gold"] {
  --theme-bg: #F5E7C4;        /* dimmed champagne */
  --theme-surface: #FFF0C7;   /* pale gold */
  --theme-text: #3B2812;
  --theme-heading: #8C651F;
  --theme-accent: #B98A32;
  --theme-border: rgba(185, 138, 50, 0.4);
  --theme-shadow: 0 22px 55px -22px rgba(140, 101, 31, 0.38);
}
:root[data-theme="dark"] {
  --theme-bg: #160F18;        /* deep royal aubergine */
  --theme-surface: #24172A;
  --theme-text: #F3E6C2;
  --theme-heading: #F1C96A;
  --theme-accent: #D6A84F;
  --theme-border: rgba(214, 168, 79, 0.28);
  --theme-shadow: 0 20px 60px -24px rgba(0, 0, 0, 0.6);
}
/* Gently tint the base ivory surfaces so themes visibly change without
   sacrificing readability. Individual pages keep their own class names. */
[data-theme="gold"] body { background: linear-gradient(180deg, #FAF0D2 0%, #F5E7C4 100%); }
[data-theme="dark"] body { background: linear-gradient(180deg, #1E1424 0%, #160F18 100%); color: #18212F; color: var(--theme-text); }
[data-theme="dark"] .bg-brand-pearl { background: #24172A !important; }
[data-theme="dark"] .bg-brand-cream, [data-theme="dark"] .bg-brand-ivory { background: #2B1D33 !important; color: #F3E6C2 !important; }
[data-theme="dark"] .text-brand-ink, [data-theme="dark"] .text-brand-plum { color: #F3E6C2 !important; }
[data-theme="dark"] .text-brand-ink\/85, [data-theme="dark"] .text-brand-ink\/80, [data-theme="dark"] .text-brand-ink\/75, [data-theme="dark"] .text-brand-ink\/70 { color: rgba(243,230,194,0.85) !important; }
[data-theme="dark"] .border-brand-champagne, [data-theme="dark"] .border-brand-gold\/40 { border-color: rgba(214,168,79,0.32) !important; }

/* ─────────── Universal rounded-medallion enforcement ─────────── */
/* Belt-and-suspenders: any element with a border-radius smaller than 6px on
   public surfaces gets softened to 8px so no boxy corners survive.
   Applied only inside the top-level shells to avoid touching form inputs
   that intentionally use small radius. */
[data-testid="pricing-hub-page"] [class*="rounded-none"],
[data-testid="preview-landing-page"] [class*="rounded-none"] { border-radius: 12px !important; }

/* ─────────── Priority 2A — Premium Ambient Effects + Micro-Interactions ─────────── */
/* Reusable atmospheric particles (see PremiumAmbientEffects.jsx). */

@keyframes premium-ambient-drift {
  0%   { transform: translate(0, 0);              opacity: 0; }
  15%  { opacity: 0.6; opacity: var(--dust-opacity, 0.6); }
  85%  { opacity: 0.6; opacity: var(--dust-opacity, 0.6); }
  100% { transform: translate(20px, -40px); transform: translate(var(--drift-x, 20px), -40px); opacity: 0; }
}
@keyframes premium-ambient-twinkle {
  0%, 100% { transform: scale(0.6); opacity: 0.15; }
  50%      { transform: scale(1.4); opacity: 1; }
}
@keyframes premium-ambient-slow-drift {
  0%   { transform: translate(0, 0);   opacity: 0.05; }
  50%  { transform: translate(12px, -12px); transform: translate(var(--drift-x, 12px), -12px); opacity: 0.6; }
  100% { transform: translate(0, 0);   opacity: 0.05; }
}
@keyframes premium-ambient-halo-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.35; }
  50%      { transform: scale(1.08); opacity: 0.55; }
}
@keyframes premium-ambient-shimmer-sweep {
  0%   { transform: translateX(-40%) skewX(-14deg); opacity: 0; }
  40%  { opacity: 0.65; }
  100% { transform: translateX(140%) skewX(-14deg); opacity: 0; }
}

.premium-ambient-dust,
.premium-ambient-sparkle,
.premium-ambient-star {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, opacity;
  pointer-events: none;
}
.premium-ambient-dust {
  background: radial-gradient(circle, rgba(216,180,106,0.9) 0%, rgba(216,180,106,0) 70%);
  box-shadow: 0 0 6px rgba(216,180,106,0.6);
  animation: premium-ambient-drift linear infinite;
}
.premium-ambient-sparkle {
  background: radial-gradient(circle, rgba(255,244,214,1) 0%, rgba(216,180,106,0.6) 45%, rgba(216,180,106,0) 75%);
  box-shadow: 0 0 8px rgba(216,180,106,0.75), 0 0 3px rgba(255,244,214,0.9);
  animation: premium-ambient-twinkle ease-in-out infinite;
}
.premium-ambient-star {
  background: radial-gradient(circle, rgba(255,247,225,1) 0%, rgba(216,180,106,0.4) 40%, rgba(216,180,106,0) 80%);
  box-shadow: 0 0 5px rgba(216,180,106,0.4);
  animation: premium-ambient-slow-drift ease-in-out infinite;
}

.premium-ambient-halo-core {
  position: absolute;
  inset: 20% 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,180,106,0.35) 0%, rgba(216,180,106,0.12) 45%, rgba(216,180,106,0) 75%);
  filter: blur(20px);
  animation: premium-ambient-halo-pulse 6s ease-in-out infinite;
}
.premium-ambient-shimmer-band {
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 30%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,244,214,0.65) 45%, rgba(255,247,225,0.85) 50%, rgba(216,180,106,0.4) 55%, rgba(255,255,255,0) 100%);
  filter: blur(6px);
  transform: translateX(-40%) skewX(-14deg);
  animation: premium-ambient-shimmer-sweep 3.4s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* Micro-interaction utility classes */
.premium-gold-glow { transition: box-shadow .28s ease, transform .28s ease; }
.premium-gold-glow:hover { box-shadow: 0 20px 50px -22px rgba(185,138,50,0.55), 0 0 24px rgba(216,180,106,0.35); transform: translateY(-2px); }

.premium-card-shimmer { position: relative; overflow: hidden; isolation: isolate; }
.premium-card-shimmer::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,244,214,0.35) 48%, transparent 66%);
  transform: translateX(-100%);
  transition: transform .9s ease;
  pointer-events: none;
  z-index: 1;
}
.premium-card-shimmer:hover::before { transform: translateX(100%); }
.premium-card-shimmer > * { position: relative; z-index: 2; }

.premium-icon-glow svg { transition: filter .28s ease, transform .28s ease; }
.premium-icon-glow:hover svg { filter: drop-shadow(0 0 8px rgba(216,180,106,0.75)); transform: scale(1.06); }

.premium-cta-spark { position: relative; overflow: hidden; }
.premium-cta-spark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,244,214,0.55) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 0;
}
.premium-cta-spark:hover::after {
  animation: premium-ambient-shimmer-sweep 1.1s ease-out;
}
.premium-cta-spark > * { position: relative; z-index: 1; }

/* Respect reduced motion — silence all ambient animations */
@media (prefers-reduced-motion: reduce) {
  .premium-ambient-dust,
  .premium-ambient-sparkle,
  .premium-ambient-star,
  .premium-ambient-halo-core,
  .premium-ambient-shimmer-band,
  .premium-card-shimmer::before,
  .premium-cta-spark::after { animation: none !important; transition: none !important; }
}

/* ─────────── Accessibility preference driven CSS (Batch B/C P1) ─────────── */
:root {
  --a11y-scale: 1;
}
html[data-text-size="large"] { --a11y-scale: 1.15; }
html[data-text-size="xl"]    { --a11y-scale: 1.32; }
html[data-text-size="large"] body,
html[data-text-size="xl"]    body { font-size: calc(1rem * 1); font-size: calc(1rem * var(--a11y-scale)); line-height: 1.55; }
html[data-text-size="large"] h1,
html[data-text-size="large"] h2,
html[data-text-size="large"] h3,
html[data-text-size="xl"]    h1,
html[data-text-size="xl"]    h2,
html[data-text-size="xl"]    h3 { line-height: 1.2; }
html[data-text-size="large"] button,
html[data-text-size="large"] .button-primary,
html[data-text-size="large"] .button-secondary,
html[data-text-size="xl"]    button,
html[data-text-size="xl"]    .button-primary,
html[data-text-size="xl"]    .button-secondary { padding: calc(0.7em * 1) calc(1.2em * 1); padding: calc(0.7em * var(--a11y-scale)) calc(1.2em * var(--a11y-scale)); font-size: calc(1em * 1); font-size: calc(1em * var(--a11y-scale)); }
html[data-text-size="large"] input,
html[data-text-size="large"] select,
html[data-text-size="large"] textarea,
html[data-text-size="xl"]    input,
html[data-text-size="xl"]    select,
html[data-text-size="xl"]    textarea { font-size: calc(1em * 1); font-size: calc(1em * var(--a11y-scale)); padding: calc(0.55em * 1) calc(0.9em * 1); padding: calc(0.55em * var(--a11y-scale)) calc(0.9em * var(--a11y-scale)); }

/* High contrast */
html[data-contrast="high"] body { background: #ffffff !important; color: #0a0a0a !important; }
html[data-contrast="high"] a { color: #0033a0 !important; text-decoration: underline; }
html[data-contrast="high"] .button-primary { background: #0a0a0a !important; color: #ffffff !important; border: 2px solid #0a0a0a !important; }
html[data-contrast="high"] .button-secondary { background: #ffffff !important; color: #0a0a0a !important; border: 2px solid #0a0a0a !important; }
html[data-contrast="high"] .marketing-shell::before,
html[data-contrast="high"] .marketing-shell::after,
html[data-contrast="high"] .app-shell-luxury::before,
html[data-contrast="high"] .app-shell-luxury::after { opacity: 0 !important; }

/* Gold high-contrast — keep the brand identity but crank the readable contrast */
html[data-contrast="gold-high"] body { background: #fff8e6 !important; color: #241028 !important; }
html[data-contrast="gold-high"] .button-primary { background: #7a4a12 !important; color: #fff8e6 !important; border: 2px solid #4b234a !important; }
html[data-contrast="gold-high"] .button-secondary { background: #fff8e6 !important; color: #4b234a !important; border: 2px solid #7a4a12 !important; }
html[data-contrast="gold-high"] a { color: #4b234a !important; text-decoration: underline; }

/* Reduced motion — off both by OS pref AND user pref via data-motion="reduced" */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html[data-motion="reduced"] .click-sparkle-particle,
html[data-motion="reduced"] .opening-sparkle-particle { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .click-sparkle-particle, .opening-sparkle-particle { display: none !important; }
}

/* Simplified reading mode — hides ambient watermark, softens backgrounds, widens line-height */
html[data-reading="simplified"] .marketing-shell::before,
html[data-reading="simplified"] .marketing-shell::after,
html[data-reading="simplified"] .app-shell-luxury::before,
html[data-reading="simplified"] .app-shell-luxury::after { opacity: 0 !important; }
html[data-reading="simplified"] body { background: #fdfbf7 !important; }
html[data-reading="simplified"] p, html[data-reading="simplified"] li { line-height: 1.75 !important; letter-spacing: 0.005em; }
html[data-reading="simplified"] .marketing-hero > * { max-width: 68ch; }

/* Focus visibility baseline — gold ring on any keyboard-focused control */
:focus-visible {
  outline: 3px solid #D8A93C !important;
  outline: 3px solid var(--brand-royal-gold, #c9a24b) !important;
  outline-offset: 2px !important;
  border-radius: 12px;
}

/* ─────────── Click-sparkle burst particles (Batch B/C P1) ─────────── */
.click-sparkle-particle {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff6c8 0%, #d6a84f 45%, transparent 72%);
  box-shadow: 0 0 8px rgba(214, 168, 79, 0.6);
  pointer-events: none;
  z-index: 9999;
  animation: mbc-spark-burst 700ms cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}
@keyframes mbc-spark-burst {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(0.85); }
  100% { opacity: 0;    transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(0.15);    transform: translate(calc(-50% + var(--spark-x, 0px)), calc(-50% + var(--spark-y, 0px))) scale(0.15); }
}

/* ─────────── Opening sparkle drift (Batch B/C P1) ─────────── */
.opening-sparkle-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff6c8 0%, #e5b95c 55%, transparent 78%);
  box-shadow: 0 0 8px rgba(229, 185, 92, 0.5);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  animation: mbc-opening-drift 2600ms ease-out forwards;
}
@keyframes mbc-opening-drift {
  0%   { opacity: 0;    transform: translateY(20px) scale(0.6); }
  20%  { opacity: 0.9;  transform: translateY(0) scale(1); }
  100% { opacity: 0;    transform: translateY(-140px) scale(0.4); }
}

/* ─────────── Rounded UI enforcement (Batch B/C P1) ───────────
   Global belt-and-braces default for interactive controls: no harsh square
   90° edges on client-facing surfaces. Tailwind Shadcn Card already ships
   with rounded corners; this catches everything else that slipped through. */

/* ─────────── Global horizontal-overflow safeguard (Batch B/C P1) ───────────
   Belt-and-braces: nothing on the page should ever push the viewport wider
   than the screen. This does NOT hide legitimate content — combined with
   `flex-wrap: wrap` on all top-level headers, wide navs just wrap onto a
   second line instead of forcing horizontal scroll. */
/* Iter 137 — do NOT set overflow-x on both html AND body, because the
   `overflow-x: hidden + overflow-y: visible` combination is coerced by
   browsers to `overflow-y: auto`, which turns body into a nested scroll
   container and BREAKS `position: sticky` on descendants (top MegaNav).
   Constrain horizontal bleed via html only. */
html { overflow-x: hidden; max-width: 100vw; }
body { max-width: 100vw; }
header[data-testid="premium-header"] { flex-wrap: wrap; row-gap: 0.5rem; }
header[data-testid="premium-header"] > *,
header[data-testid="premium-header"] nav { min-width: 0; }

button:not([data-square]),
input:not([type="checkbox"]):not([type="radio"]):not([data-square]),
select:not([data-square]),
textarea:not([data-square]) {
  border-radius: 14px;
}
.button-primary,
.button-secondary,
.button-ghost,
.premium-control,
.premium-control-primary,
.premium-control-platinum,
.premium-control-diamond { border-radius: 999px !important; }

/* Iter 145.10 — bulletproof min-height for every canonical CTA pill.
   Previously hero-cta-register was silently computing min-height:0px
   (rendered 38px) because some ancestor/inline reset was defeating
   .premium-control's `min-height: var(--p-control-h)` declaration.
   With this !important floor every <Premium3DControl/> anchor OR button
   keeps the canonical 56px pill height regardless of Tailwind resets. */
.premium-control,
.premium-control-primary,
.premium-control-platinum,
.premium-control-diamond,
.button-primary,
.button-secondary { min-height: 56px !important; }

/* ─────────── Header overflow fix (Batch B/C P1) ─────────── */
.marketing-shell header,
.app-shell-luxury > header,
.marketing-topbar,
.topbar {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
@media (max-width: 640px) {
  .marketing-shell header,
  .app-shell-luxury > header,
  .marketing-topbar,
  .topbar { padding-left: 12px; padding-right: 12px; }
}

/* ─────────── Iter 64 — Menu transparency fix ─────────── */
/* Force ALL sticky headers, the compact "Menu ▾" button, and the compact
   dropdown panel to be visually SOLID so page text can never bleed through.
   This kills the "menu text is overwritten over page text" perception.
   ⚠️ LOAD-BEARING — DO NOT REPLACE WITH TAILWIND UTILITIES.
   These !important rules are required because Tailwind utility classes
   (bg-brand-pearl/90, bg-brand-pale-gold/60) would otherwise render the
   menu surfaces semi-transparent and re-introduce the visual bleed-through
   bug. If you need to change the menu surface, edit this block instead. */
header.sticky {
  background-color: rgba(250, 247, 240, 0.99) !important; /* was /90 → near-solid */
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
          backdrop-filter: saturate(1.05) blur(6px);
  z-index: 900 !important; /* iter 65: escalated above any hero/watermark stacking context */
}
[data-testid$="nav-compact-toggle"],
[data-testid="premium-nav-compact-toggle"],
[data-testid="marketing-nav-compact-toggle"],
[data-testid="store-header-compact-toggle"],
[data-testid="pricing-header-compact-toggle"] {
  background-color: #F1DEA8 !important;
  background-color: var(--brand-pale-gold) !important; /* was /60 → solid champagne */
  color: #18212F !important;
  color: var(--brand-ink) !important;
  position: relative;
  z-index: 950 !important;
}
[data-testid$="nav-compact-panel"],
[data-testid="premium-nav-compact-panel"],
[data-testid="marketing-nav-compact-panel"],
[data-testid="store-header-compact-panel"],
[data-testid="pricing-header-compact-panel"] {
  background-color: #EFD892 !important;
  background-color: var(--brand-pearl) !important;
  box-shadow: 0 24px 50px -12px rgba(58, 31, 61, 0.25), 0 0 0 1px rgba(185, 138, 50, 0.35) !important;
  z-index: 1000 !important; /* iter 65: guarantee panel is above every layer */
  isolation: isolate; /* iter 65: create own stacking context so no ancestor can push us behind */
}
[data-testid$="nav-compact-panel"] a,
[data-testid^="premium-nav-compact-panel"] a,
[data-testid="marketing-nav-compact-panel"] a,
[data-testid="store-header-compact-panel"] a,
[data-testid="pricing-header-compact-panel"] a {
  color: #18212F;
  color: var(--brand-ink);
  background-color: transparent;
}
[data-testid$="nav-compact-panel"] a:hover,
[data-testid^="premium-nav-compact-panel"] a:hover,
[data-testid="marketing-nav-compact-panel"] a:hover,
[data-testid="store-header-compact-panel"] a:hover,
[data-testid="pricing-header-compact-panel"] a:hover {
  background-color: #F1DEA8 !important;
  background-color: var(--brand-pale-gold) !important;
}
/* Dark mode: solid dark surface so menu never appears transparent either */
[data-theme="dark"] header.sticky {
  background-color: rgba(36, 23, 42, 0.97) !important;
}
[data-theme="dark"] [data-testid$="nav-compact-toggle"] {
  background-color: rgba(216, 180, 106, 0.25) !important;
  color: #F3E6C2 !important;
}
[data-theme="dark"] [data-testid$="nav-compact-panel"] {
  background-color: #24172A !important;
  box-shadow: 0 24px 50px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(216, 180, 106, 0.4) !important;
}
[data-theme="dark"] [data-testid$="nav-compact-panel"] a { color: #F3E6C2 !important; }
[data-theme="dark"] [data-testid$="nav-compact-panel"] a:hover {
  background-color: rgba(216, 180, 106, 0.18) !important;
}

/* ─────────── Iter 65 — Menu never clipped by ancestors ─────────── */
/* Ensure no ancestor of the sticky headers becomes a scroll container.
   IMPORTANT: setting `overflow-x: clip` with `overflow-y: visible` used
   to promote overflow-y to `auto`, which broke `position: sticky` for
   the top MegaNav. Use `overflow: visible` on shell containers so
   sticky pinning works. Horizontal bleed is already prevented at the
   html/body level (line ~795). */
main, section, .marketing-shell, .app-shell-luxury,
[data-testid="premium-home-page"],
[data-testid="pricing-hub-page"],
[data-testid="store-page"] {
  overflow-x: visible;
  overflow-y: visible;
}

/* ─────────── Iter 65 — Visible persistent sparkle layer ─────────── */
/* A CSS-only, always-on gold-dust field that sits behind content. Applied
   globally via body::before + body::after so every page (marketing AND app)
   inherits the sacred sparkle atmosphere without needing per-page mounts.
   Iter 67: DENSITY + MOTION amplified so the pages feel visibly ALIVE. */
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 1; /* above bg, below content (content is z-2+ inside marketing-shell) */
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  background-image:
    radial-gradient(2.5px 2.5px at 8% 14%, rgba(255, 232, 168, 0.95), transparent 60%),
    radial-gradient(1.8px 1.8px at 22% 32%, rgba(216, 180, 106, 0.85), transparent 60%),
    radial-gradient(2px 2px at 38% 58%, rgba(255, 244, 214, 0.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 54% 22%, rgba(255, 232, 168, 0.9), transparent 60%),
    radial-gradient(2.2px 2.2px at 68% 78%, rgba(216, 180, 106, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 86% 34%, rgba(255, 232, 168, 0.95), transparent 60%),
    radial-gradient(1.8px 1.8px at 14% 88%, rgba(216, 180, 106, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 46%, rgba(255, 244, 214, 0.9), transparent 60%),
    radial-gradient(2.5px 2.5px at 92% 82%, rgba(216, 180, 106, 0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255, 232, 168, 0.95), transparent 60%),
    radial-gradient(2px 2px at 4% 62%, rgba(216, 180, 106, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 92%, rgba(255, 244, 214, 0.9), transparent 60%);
  background-repeat: no-repeat;
  animation: iter67-sacred-sparkle 6s ease-in-out infinite alternate;
  opacity: 0.95;
}
body::after {
  animation-delay: 3s;
  animation-duration: 7.5s;
  background-image:
    radial-gradient(1.8px 1.8px at 6% 44%, rgba(255, 232, 168, 0.95), transparent 60%),
    radial-gradient(2.5px 2.5px at 32% 10%, rgba(216, 180, 106, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 56% 62%, rgba(255, 244, 214, 0.95), transparent 60%),
    radial-gradient(1.8px 1.8px at 74% 6%, rgba(216, 180, 106, 0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 26% 30%, rgba(255, 232, 168, 0.95), transparent 60%),
    radial-gradient(2.2px 2.2px at 8% 74%, rgba(216, 180, 106, 0.9), transparent 60%),
    radial-gradient(1.8px 1.8px at 48% 94%, rgba(255, 244, 214, 0.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 48%, rgba(216, 180, 106, 0.85), transparent 60%),
    radial-gradient(2px 2px at 18% 20%, rgba(255, 232, 168, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 60%, rgba(216, 180, 106, 0.85), transparent 60%);
}
@keyframes iter67-sacred-sparkle {
  0%   { opacity: 0.65; transform: translateY(0px) scale(1); filter: brightness(1); }
  33%  { opacity: 1.0;  transform: translateY(-6px) scale(1.02); filter: brightness(1.25); }
  66%  { opacity: 0.85; transform: translateY(3px) scale(0.99); filter: brightness(1.1); }
  100% { opacity: 0.75; transform: translateY(0px) scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; opacity: 0.35; transform: none; }
}
[data-theme="dark"] body::before,
[data-theme="dark"] body::after { opacity: 0.55; }
/* Reduce sparkle on legal/reading surfaces where we want calm focus */
[data-testid^="legal-"] body::before,
[data-testid^="legal-"] body::after { opacity: 0.25; }

/* ─────────── Iter 67 — Banner-matched champagne-gold palette lift ─────────── */
/* Warm the base surfaces so pages harmonise with the gold Sacred Origin
   banner. Pure gold palette per user directive — no whites, no beiges. */
:root {
  --brand-pearl: #EFD892;      /* champagne gold base */
  --brand-cream: #F4E5B8;      /* light warm gold */
  --brand-pale-gold: #F1DEA8;  /* soft luminous gold */
  --marketing-bg: linear-gradient(180deg, #EFD892 0%, #F4E5B8 40%, #E8CB6A 100%);
}
/* Ensure body background reflects the pure-gold palette */
body {
  background: linear-gradient(180deg, #EFD892 0%, #F4E5B8 60%, #E8CB6A 100%) !important;
  background-attachment: fixed !important;
}
/* ─────────── Iter 68 — Theme mode visibly-different palette ─────────── */
/* Gold Mode (default) uses the champagne-gold gradient established in iter 67.
   Normal Mode = softer gold with lower saturation.
   Dark Mode   = warm deep plum with visible gold accents.
   Each mode overrides the body gradient AND the sparkle opacity so the shift
   is perceptibly obvious the moment the user toggles the theme selector. */
:root[data-theme="normal"] {
  --brand-pearl: #F4E5B8;
  --brand-cream: #F1DEA8;
  --brand-pale-gold: #EAD498;
}
:root[data-theme="normal"] body {
  background: linear-gradient(180deg, #F4E5B8 0%, #F1DEA8 60%, #EAD498 100%) !important;
}
:root[data-theme="normal"] body::before,
:root[data-theme="normal"] body::after {
  opacity: 0.45 !important; /* softer sparkle in Normal mode */
}
:root[data-theme="gold"], :root:not([data-theme]) {
  /* Gold Mode inherits the champagne-gold palette from iter 67 (default) */
}
:root[data-theme="gold"] body::before,
:root[data-theme="gold"] body::after {
  opacity: 0.95 !important; /* keep sparkle vibrant in Gold Mode */
}
:root[data-theme="dark"] {
  --brand-pearl: #24172A;
  --brand-cream: #2C1E33;
  --brand-pale-gold: #3A2942;
  --brand-ink: #F3E6C2;
  --brand-plum: #F3E6C2;
}
:root[data-theme="dark"] body {
  background: linear-gradient(180deg, #1B0F22 0%, #24172A 60%, #3A2942 100%) !important;
  color: #F3E6C2;
}
:root[data-theme="dark"] body::before,
:root[data-theme="dark"] body::after {
  opacity: 0.65 !important;
  filter: brightness(1.4);
}
:root[data-theme="dark"] header.sticky {
  background-color: rgba(36, 23, 42, 0.97) !important;
}
:root[data-theme="dark"] .luxury-watermark-page::before,
:root[data-theme="dark"] .luxury-watermark-page::after {
  opacity: 0.14 !important;
  filter: sepia(0.6) saturate(1.6) hue-rotate(-10deg) brightness(1.5);
}






/* ─────────── Iter 68 — BrandAtmosphereLayer (root-mounted persistent brand atmosphere) ─────────── */
/* Mounted ONCE in /app/frontend/src/index.js above <App />. This layer is
   *additive* to the existing body::before/::after sparkles: it introduces the
   gold-masked Sacred Origin watermark and two extra sparkle tile fields plus
   soft champagne halo pulses. All layers are pointer-events: none, z-index 0,
   so navigation menus (z 1000+) and modals remain fully interactive. */
.mbc-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.mbc-atmosphere > * { position: absolute; inset: 0; pointer-events: none; }

/* Gold-masked Sacred Origin watermark — CSS-mask so any source SVG/PNG renders
   in champagne gold regardless of its actual colour. */
.mbc-gold-watermark {
  background: radial-gradient(circle at 50% 50%, #fff2b8 0%, #d8a83f 45%, #8f641b 100%);
  /* mask-image is set inline in BrandAtmosphereLayer.jsx to avoid webpack
     css-loader trying to resolve the /brand-mark-512.png absolute URL as a
     module (CRA behaviour). */
  -webkit-mask-size: 720px 720px;
          mask-size: 720px 720px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center 30%;
          mask-position: center 30%;
  opacity: 0.06;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .mbc-gold-watermark { opacity: 0.10; mix-blend-mode: screen; }
[data-theme="normal"] .mbc-gold-watermark { opacity: 0.04; }

/* Two overlapping sparkle tile-fields drifting on offset animations so the
   atmosphere feels continuously alive without any JS timer. */
.mbc-sparkle-layer {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 24%, rgba(255, 244, 214, 0.95), transparent 60%),
    radial-gradient(2.2px 2.2px at 28% 62%, rgba(216, 180, 106, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 44% 18%, rgba(255, 232, 168, 0.95), transparent 60%),
    radial-gradient(1.8px 1.8px at 60% 78%, rgba(255, 244, 214, 0.85), transparent 60%),
    radial-gradient(2px 2px at 76% 34%, rgba(216, 180, 106, 0.9), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 68%, rgba(255, 232, 168, 0.95), transparent 60%),
    radial-gradient(1.6px 1.6px at 6% 82%, rgba(216, 180, 106, 0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 52% 44%, rgba(255, 244, 214, 0.9), transparent 60%);
  background-repeat: no-repeat;
  animation: mbc-sparkle-drift-a 9s ease-in-out infinite alternate;
  opacity: 0.85;
}
.mbc-sparkle-layer-b {
  background-image:
    radial-gradient(1.4px 1.4px at 18% 8%, rgba(255, 244, 214, 0.9), transparent 60%),
    radial-gradient(1.8px 1.8px at 36% 48%, rgba(216, 180, 106, 0.85), transparent 60%),
    radial-gradient(2px 2px at 58% 12%, rgba(255, 232, 168, 0.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 60%, rgba(255, 244, 214, 0.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 22%, rgba(216, 180, 106, 0.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 94% 84%, rgba(255, 232, 168, 0.95), transparent 60%),
    radial-gradient(1.8px 1.8px at 22% 90%, rgba(216, 180, 106, 0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 48% 76%, rgba(255, 244, 214, 0.9), transparent 60%);
  animation: mbc-sparkle-drift-b 12s ease-in-out infinite alternate;
  animation-delay: 2.5s;
  opacity: 0.75;
}
@keyframes mbc-sparkle-drift-a {
  0%   { transform: translate(0, 0) scale(1);      filter: brightness(1); }
  40%  { transform: translate(6px, -8px) scale(1.03); filter: brightness(1.25); }
  70%  { transform: translate(-4px, 4px) scale(0.99); filter: brightness(1.1); }
  100% { transform: translate(0, 0) scale(1);      filter: brightness(1); }
}
@keyframes mbc-sparkle-drift-b {
  0%   { transform: translate(0, 0) scale(1);      filter: brightness(1); }
  40%  { transform: translate(-6px, 6px) scale(1.02); filter: brightness(1.2); }
  70%  { transform: translate(4px, -4px) scale(1.01); filter: brightness(1.05); }
  100% { transform: translate(0, 0) scale(1);      filter: brightness(1); }
}

/* Champagne halo pulses at three strategic anchor points. */
.mbc-gold-glow-layer {
  background:
    radial-gradient(600px 600px at 12% 18%, rgba(255, 232, 168, 0.22), transparent 70%),
    radial-gradient(700px 700px at 88% 32%, rgba(216, 180, 106, 0.18), transparent 72%),
    radial-gradient(800px 800px at 50% 96%, rgba(255, 244, 214, 0.20), transparent 74%);
  animation: mbc-gold-halo-pulse 14s ease-in-out infinite alternate;
  opacity: 0.9;
}
@keyframes mbc-gold-halo-pulse {
  0%   { opacity: 0.55; filter: brightness(1); }
  50%  { opacity: 0.95; filter: brightness(1.12); }
  100% { opacity: 0.7;  filter: brightness(1.05); }
}
[data-theme="dark"] .mbc-gold-glow-layer { opacity: 0.55; mix-blend-mode: screen; }
[data-theme="normal"] .mbc-gold-glow-layer { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .mbc-sparkle-layer,
  .mbc-sparkle-layer-b,
  .mbc-gold-glow-layer { animation: none; opacity: 0.35; transform: none; }
}
html[data-motion="reduced"] .mbc-sparkle-layer,
html[data-motion="reduced"] .mbc-sparkle-layer-b,
html[data-motion="reduced"] .mbc-gold-glow-layer { animation: none; opacity: 0.35; transform: none; }

/* Ensure application content and headers always render above the atmosphere. */
#root > * { position: relative; z-index: 2; }
header.sticky { z-index: 1000 !important; }

/* Iter 123 — AudioUnlockOverlay must escape the `#root > *` positioning
   reset so its `fixed bottom-6` pill stays out of the document flow and
   does NOT push page content down / intercept top-of-page clicks. */
#root > [data-testid="audio-unlock-overlay"] {
  position: fixed !important;
  z-index: 99999 !important;
}

/* ─────────── Iter 68 — 1.5× circular brand-mark scale up ─────────── */
/* The LogoMark component uses Tailwind utility w-11 h-11 (~44px). Enlarge it
   to ~66px (1.5×) everywhere it appears in headers/topbars while preserving
   layout balance. The `logo-mark-responsive` alias covers the dashboard use. */
.brand-link [class*="w-11"][class*="h-11"] {
  width: 4.125rem !important;   /* 66px = 44 * 1.5 */
  height: 4.125rem !important;
}
.logo-mark-responsive {
  width: 4.125rem !important;
  height: 4.125rem !important;
}

/* ─────────── Iter 69 — Global rounded-edge softness pass ─────────── */
/* Apply generous rounded corners across the shell so no square hard edges
   remain. Existing Tailwind `rounded-*` utilities stay; these selectors add
   a softer minimum. Banners get the largest radius, cards mid, buttons pill. */

/* Home / marketing hero banner container (see App.js public + auth headers). */
[data-testid="marketing-brand-banner"],
[data-testid="marketing-brand-banner"] > a,
.mbc-hero-banner,
.hero-banner,
.brand-banner,
.sacred-origin-banner,
.store-hero,
.pricing-hero,
.about-hero,
.dashboard-welcome-banner {
  border-radius: clamp(28px, 4vw, 56px);
  overflow: hidden;
}
[data-testid="marketing-brand-banner"] {
  margin: 12px 12px 0;
}

/* Cards — force a warm generous radius everywhere. Tailwind's own
   rounded-3xl (~24px) is preserved; anything smaller gets softened. */
.luxury-card,
.premium-card,
.product-card,
.pricing-card,
.store-card,
.dashboard-card,
.medallion-card,
.report-card,
.family-pathways-card,
.course-card,
.consultation-card,
.retreat-card,
.mbc-card,
article[data-testid^="store-card-"],
article[data-testid^="pricing-card-"],
article[data-testid^="dashboard-card-"] {
  border-radius: clamp(24px, 3vw, 42px) !important;
  overflow: hidden;
}

/* Menu panels / dropdowns / dialog surfaces stay generously rounded */
.menu-panel,
.dropdown-panel,
.mobile-menu,
.compact-menu-panel,
[role="menu"],
[role="dialog"],
[data-radix-popper-content-wrapper] > * {
  border-radius: 28px !important;
  overflow: hidden;
}

/* Buttons / pills / badges */
button.mbc-pill-primary,
button.mbc-pill-secondary,
.mbc-pill-primary,
.mbc-pill-secondary,
.language-selector,
.currency-selector,
.theme-selector,
select {
  border-radius: 999px !important;
}

/* Images / videos softness (skip circular via .rounded-full override) */
.mbc-watermarked-video-frame,
.video-frame,
.watermarked-video-frame,
.course-video-frame,
.guide-video-frame {
  border-radius: clamp(22px, 3vw, 40px);
  overflow: hidden;
}

/* Ensure atmosphere/watermark layers clipped inside rounded containers */
.mbc-hero-banner::before,
.mbc-hero-banner::after,
[data-testid="marketing-brand-banner"]::before,
[data-testid="marketing-brand-banner"]::after {
  border-radius: inherit;
}

/* ─────────── Iter 69 — Further logo enlargement (from 1.5x to 1.75x) ─────────── */
/* Users reported the circular brand mark still felt small in header context.
   Nudge the sticky-header instance up to ~77px (1.75×) while keeping mobile
   proportional. */
.brand-link [class*="w-11"][class*="h-11"] {
  width: clamp(66px, 5.5vw, 84px) !important;
  height: clamp(66px, 5.5vw, 84px) !important;
}
.logo-mark-responsive {
  width: clamp(66px, 5.5vw, 84px) !important;
  height: clamp(66px, 5.5vw, 84px) !important;
}
/* Iter 72 — Rounded banner as a proper rounded rectangle, not a full-bleed
   rectangle. Inset margin + generous corner radius makes the soft edges
   visible on all viewports. */
[data-testid="marketing-brand-banner"],
[data-testid="hero-logo-banner"],
[data-testid="family-pathways-brand-banner"],
[data-testid="marketing-brand-banner"] > a,
[data-testid="hero-logo-banner"] > a,
[data-testid="family-pathways-brand-banner"] > a,
.mbc-rounded-hero,
.mbc-hero-banner,
.hero-banner,
.brand-banner,
.sacred-origin-banner,
.store-hero,
.pricing-hero,
.course-hero,
.family-pathways-hero,
.faq-hero,
.complaints-hero,
.dashboard-welcome-banner,
.app-welcome-banner {
  border-radius: clamp(40px, 6vw, 80px);
  overflow: hidden;
  position: relative;
}
[data-testid="marketing-brand-banner"],
[data-testid="premium-brand-banner"],
[data-testid="dashboard-brand-banner"],
[data-testid="hero-logo-banner"],
[data-testid="family-pathways-brand-banner"] {
  /* Override Tailwind `w-full` so the banner reads as a proper rounded
     rectangle with inset side-gutter, not a full-bleed sharp block. */
  width: calc(100% - clamp(24px, 6vw, 80px)) !important;
  max-width: calc(100vw - clamp(24px, 6vw, 80px)) !important;
  margin: 20px auto 12px !important;
  box-shadow: 0 24px 60px rgba(121, 82, 20, 0.14);
  border-radius: clamp(40px, 6vw, 80px) !important;
  overflow: hidden !important;
  position: relative;
}
[data-testid="marketing-brand-banner"]::before,
[data-testid="marketing-brand-banner"]::after,
[data-testid="hero-logo-banner"]::before,
[data-testid="hero-logo-banner"]::after,
[data-testid="family-pathways-brand-banner"]::before,
[data-testid="family-pathways-brand-banner"]::after,
.mbc-hero-banner::before,
.mbc-hero-banner::after {
  border-radius: inherit;
  overflow: hidden;
}
@media (max-width: 640px) {
  [data-testid="marketing-brand-banner"],
  [data-testid="hero-logo-banner"],
  [data-testid="family-pathways-brand-banner"] {
    margin: 12px 10px 6px !important;
    border-radius: 34px !important;
  }
}

/* Iter 72 — Side/topbar circular logo bumped to true 2× (~88px). Banner is
   NOT affected because it uses a different DOM path. */
.brand-link [class*="w-11"][class*="h-11"] {
  width: clamp(80px, 6.5vw, 96px) !important;
  height: clamp(80px, 6.5vw, 96px) !important;
}
.logo-mark-responsive {
  width: clamp(80px, 6.5vw, 96px) !important;
  height: clamp(80px, 6.5vw, 96px) !important;
}
@media (max-width: 640px) {
  .brand-link [class*="w-11"][class*="h-11"],
  .logo-mark-responsive {
    width: 72px !important;
    height: 72px !important;
  }
}

/* Iter 72 — Make the sparkles ACTUALLY visible. The public + app shells were
   painting `bg-brand-pearl` opaquely over the atmosphere layer. Force those
   outer shells transparent (they inherit the body's warm cream background)
   so the persistent gold sparkles + watermark render underneath the content.
   Cards keep their semi-opaque champagne surfaces. */
body { background: #EFD892; background: var(--brand-pearl, #FBF7EE); }
.app-shell-luxury,
.luxury-watermark-page,
.marketing-shell,
.dashboard-shell,
.min-h-screen.bg-brand-pearl {
  background: transparent !important;
}
/* Sticky headers are the exception — they get the translucent cream so text
   remains readable when scrolling over the atmosphere. */
header.sticky {
  background: rgba(251, 247, 238, 0.86) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* Nudge the sparkle drift + halo opacity up so the atmosphere is unmistakably
   present, not a whisper. */
.mbc-sparkle-layer { opacity: 0.95; }
.mbc-sparkle-layer-b { opacity: 0.85; }
.mbc-gold-glow-layer { opacity: 1; }
[data-theme="normal"] .mbc-sparkle-layer { opacity: 0.7; }
[data-theme="normal"] .mbc-sparkle-layer-b { opacity: 0.6; }
[data-theme="dark"] .mbc-sparkle-layer { opacity: 0.75; }
[data-theme="dark"] .mbc-sparkle-layer-b { opacity: 0.7; }

/* ─────────── Iter 69 — Compact product / service card presentation ─────────── */
/* A generic compact-card visual language. Existing detail-heavy layouts can
   opt into this by adding the `mbc-compact` class to their article wrapper.
   The full description opens in the ProductDetailDrawer overlay. */
.mbc-compact-product-grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mbc-compact-product-card {
  position: relative;
  min-height: 240px;
  max-height: 320px;
  overflow: hidden;
  padding: 1rem 1rem 0.95rem;
  border-radius: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(210, 166, 74, 0.36);
  background: linear-gradient(145deg, rgba(255, 249, 232, 0.92), rgba(242, 218, 160, 0.72));
  box-shadow: 0 18px 46px rgba(116, 79, 18, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  display: flex;
  flex-direction: column;
}
.mbc-compact-product-card h3 {
  margin: 0.35rem 0 0.3rem;
  font-size: clamp(1.02rem, 1.2vw, 1.28rem);
  line-height: 1.14;
  font-family: "Playfair Display", serif;
  color: #18212F;
  color: var(--brand-ink);
}
.mbc-card-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
}
.mbc-card-badge {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #18212F;
  color: var(--brand-plum);
  font-weight: 700;
  background: rgba(255, 244, 214, 0.85);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(216, 180, 106, 0.5);
}
.mbc-card-price {
  color: #D8A93C;
  color: var(--brand-royal-gold, #8f641b);
  font-weight: 700;
}
.mbc-card-summary {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  line-height: 1.35;
  color: rgba(58, 31, 61, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mbc-card-bullets {
  margin: 0.4rem 0 0.75rem;
  padding-left: 1.05rem;
  font-size: 0.78rem;
  line-height: 1.32;
  color: rgba(58, 31, 61, 0.72);
}
.mbc-card-bullets li:nth-child(n+4) { display: none; }
.mbc-card-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.mbc-pill-primary,
.mbc-pill-secondary {
  border-radius: 999px;
  padding: 0.56rem 0.86rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.mbc-pill-primary {
  background: linear-gradient(135deg, #b98922, #e0b84f, #fff0ad);
  color: #3a2410;
  border-color: rgba(121, 80, 16, 0.28);
}
.mbc-pill-primary:hover { filter: brightness(1.05); }
.mbc-pill-secondary {
  background: rgba(255, 250, 235, 0.75);
  color: #6f4a12;
  border-color: rgba(185, 137, 34, 0.34);
}
.mbc-pill-secondary:hover { background: rgba(255, 244, 214, 0.95); }

@media (max-width: 640px) {
  .mbc-compact-product-card { min-height: 200px; max-height: none; padding: 0.92rem; }
  .mbc-compact-product-grid { grid-template-columns: 1fr; }
}

/* Product detail drawer (opens on card click / View details) */
.mbc-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(36, 23, 42, 0.42);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  animation: mbcDrawerFade 200ms ease-out;
}
.mbc-product-drawer {
  width: min(560px, 100vw);
  height: 100dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, #FBF3DE 0%, #F7EAC7 60%, #F1DEA8 100%);
  padding: 2rem 1.6rem 3rem;
  border-left: 1px solid rgba(216, 180, 106, 0.5);
  border-top-left-radius: clamp(24px, 3vw, 42px);
  border-bottom-left-radius: clamp(24px, 3vw, 42px);
  position: relative;
  animation: mbcDrawerSlide 260ms cubic-bezier(0.25, 1, 0.4, 1);
}
.mbc-drawer-close {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  background: rgba(255, 244, 214, 0.8);
  border: 1px solid rgba(185, 137, 34, 0.34);
  color: #6f4a12;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.mbc-product-drawer h2 {
  font-family: "Playfair Display", serif;
  color: #18212F;
  color: var(--brand-ink);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0.6rem 0 0.75rem;
}
.mbc-product-drawer h3 {
  font-family: "Playfair Display", serif;
  color: #18212F;
  color: var(--brand-plum);
  font-size: 1.1rem;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}
.mbc-detail-lead {
  color: rgba(58, 31, 61, 0.85);
  line-height: 1.6;
  font-size: 0.95rem;
}
.mbc-legal-note {
  margin-top: 1.4rem;
  font-size: 0.78rem;
  color: rgba(58, 31, 61, 0.6);
  border-top: 1px dashed rgba(185, 137, 34, 0.4);
  padding-top: 0.9rem;
  line-height: 1.5;
}
@keyframes mbcDrawerFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbcDrawerSlide { from { transform: translateX(20%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ─────────────────────────────────────────────────────────────
   Iter 71 P0 — Banner logo fill · 2× side logo (no white bg) ·
   Amplified gold dust · Shared visual system across web + app
   ───────────────────────────────────────────────────────────── */

/* 1. Banner logo fills entire banner while text stays readable */
.mbc-banner-logo-wrap,
.hero-banner-logo-wrap,
.sacred-origin-banner-logo-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mbc-banner-logo,
.hero-banner-logo,
.sacred-origin-banner-logo,
[data-testid="brand-logo-banner"].mbc-banner-fill {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  max-width: none;
  max-height: none;
  display: block;
  transform: scale(1.06);
  transform-origin: center;
}
@media (max-width: 640px) {
  .mbc-banner-logo,
  .hero-banner-logo,
  .sacred-origin-banner-logo,
  [data-testid="brand-logo-banner"].mbc-banner-fill { transform: scale(1.0); }
}

/* 2. Header/sidebar logo slot — neutral sizing only.
   The logo asset is already its own shape (either the standalone 3D emblem or
   the original circular medallion). We must NOT add a second outer circle,
   ring, or beige disc around it. Keep this class as a pure layout box:
   fixed size, no border-radius clipping, no background disc, no blend mode. */
.mbc-side-logo-circle,
.mbc-header-logo-circle,
.mbc-topbar-logo-circle,
.mbc-nav-logo-circle,
.app-topbar-logo-circle,
.sidebar-logo-circle {
  width: 88px;
  height: 88px;
  min-width: 88px;
  min-height: 88px;
  flex: 0 0 auto;
  border-radius: 0;              /* no extra outer circle around the logo */
  overflow: visible;
  background: transparent !important;
  box-shadow: none;
  border: none;
  padding: 0;
}
.mbc-side-logo-circle > *,
.mbc-header-logo-circle > *,
.mbc-topbar-logo-circle > *,
.mbc-nav-logo-circle > *,
.app-topbar-logo-circle > *,
.sidebar-logo-circle > * {
  background: transparent !important;
}
.mbc-side-logo-circle img,
.mbc-header-logo-circle img,
.mbc-topbar-logo-circle img,
.mbc-nav-logo-circle img,
.app-topbar-logo-circle img,
.sidebar-logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  border-radius: 0;              /* rely on the asset's own shape */
  mix-blend-mode: normal;        /* no multiply/screen — respect PNG alpha */
}
[data-theme="dark"] .mbc-side-logo-circle img,
[data-theme="dark"] .mbc-header-logo-circle img,
[data-theme="dark"] .mbc-topbar-logo-circle img,
[data-theme="dark"] .mbc-nav-logo-circle img,
[data-theme="dark"] .app-topbar-logo-circle img,
[data-theme="dark"] .sidebar-logo-circle img {
  mix-blend-mode: normal;
}
@media (max-width: 640px) {
  .mbc-side-logo-circle,
  .mbc-header-logo-circle,
  .mbc-topbar-logo-circle,
  .mbc-nav-logo-circle,
  .app-topbar-logo-circle,
  .sidebar-logo-circle {
    width: 72px; height: 72px; min-width: 72px; min-height: 72px;
  }
}

/* Bump the default LogoMark responsive size (used on every shell). */
.logo-mark-responsive {
  width: clamp(72px, 6.5vw, 96px) !important;
  height: clamp(72px, 6.5vw, 96px) !important;
  background: transparent !important;
  border-radius: 0;                    /* the asset is its own shape */
  mix-blend-mode: normal !important;   /* the /brand-mark.png asset is truly transparent — no multiply halo */
}
[data-theme="dark"] .logo-mark-responsive { mix-blend-mode: normal !important; }
/* Iter 145.9 — bulletproof: whichever wrapper the small logo lives in, the
   single approved circular brand mark must never be tinted by a blend mode. */
img[data-testid="brand-logo-mark"],
[data-theme="dark"] img[data-testid="brand-logo-mark"] {
  mix-blend-mode: normal !important;
  background: transparent !important;
}
@media (max-width: 640px) {
  .logo-mark-responsive {
    width: 72px !important; height: 72px !important;
  }
}

/* 3. Gold dust / stardust — amplified visibility */
.mbc-sparkle-layer {
  opacity: 0.95 !important;
  mix-blend-mode: screen;
}
.mbc-sparkle-layer-b { opacity: 0.85 !important; }
.mbc-gold-glow-layer { opacity: 1 !important; }
[data-theme="normal"] .mbc-sparkle-layer { opacity: 0.7 !important; }
[data-theme="normal"] .mbc-sparkle-layer-b { opacity: 0.6 !important; }
[data-theme="normal"] .mbc-gold-glow-layer { opacity: 0.75 !important; }
[data-theme="dark"] .mbc-sparkle-layer { opacity: 0.85 !important; }
[data-theme="dark"] .mbc-sparkle-layer-b { opacity: 0.75 !important; }
[data-theme="dark"] .mbc-gold-glow-layer { opacity: 0.85 !important; }

/* Page shells become transparent so the fixed atmosphere always shows through */
.marketing-shell,
.app-shell-luxury,
.dashboard-shell,
.luxury-watermark-page {
  position: relative;
  background: transparent !important;
}
/* Keep container backgrounds subtly translucent so sparkles glow through cards */
.mbc-medallion-card,
.mbc-compact-product-card,
.mbc-rounded-hero {
  background:
    linear-gradient(145deg, rgba(255, 249, 232, 0.92), rgba(242, 218, 160, 0.78)) !important;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
[data-theme="dark"] .mbc-medallion-card,
[data-theme="dark"] .mbc-compact-product-card,
[data-theme="dark"] .mbc-rounded-hero {
  background:
    linear-gradient(145deg, rgba(58, 31, 61, 0.82), rgba(38, 22, 44, 0.86)) !important;
  color: #F7EAC7;
}

/* Reduced-motion still applies — no sparkles for accessibility */
@media (prefers-reduced-motion: reduce) {
  .mbc-sparkle-layer,
  .mbc-sparkle-layer-b,
  .mbc-gold-glow-layer { animation: none !important; opacity: 0.35 !important; transform: none !important; }
}
html[data-motion="reduced"] .mbc-sparkle-layer,
html[data-motion="reduced"] .mbc-sparkle-layer-b,
html[data-motion="reduced"] .mbc-gold-glow-layer { animation: none !important; opacity: 0.35 !important; transform: none !important; }

/* 4. Shared visual system (`mbc-*`) used across public + logged-in app */
.mbc-page-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: transparent;
}
.mbc-medallion-card {
  position: relative;
  border-radius: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(216, 180, 106, 0.42);
  box-shadow: 0 20px 44px -22px rgba(121, 82, 20, 0.28);
  padding: clamp(1.1rem, 2.5vw, 2rem);
  overflow: hidden;
}
.mbc-gold-section {
  border-radius: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(216, 180, 106, 0.35);
  background:
    linear-gradient(145deg, rgba(255, 249, 232, 0.9), rgba(246, 234, 203, 0.78)) !important;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.mbc-card-badge { border-radius: 999px; }

/* Ensure interactive elements always sit above the atmosphere (z-index 0). */
#root > * { position: relative; z-index: 2; }
header.sticky, header[class*="sticky"] { z-index: 1000 !important; }

/* Iter 123 — See earlier rule; keep in sync with the second #root > * reset. */
#root > [data-testid="audio-unlock-overlay"] {
  position: fixed !important;
  z-index: 99999 !important;
}

/* ─────────────────────────────────────────────────────────────
   Iter 71 P1 — Logged-in Dashboard medallion redesign
   Overrides shadcn <Card> defaults ONLY when inside dashboard
   surfaces so the app mirrors the public gold-medallion visual.
   ───────────────────────────────────────────────────────────── */

.dashboard-hero-grid,
.feature-grid {
  gap: clamp(20px, 2.5vw, 32px);
}

/* Shadcn Card is `.rounded-xl.border.bg-card.text-card-foreground.shadow`.
   Inside dashboard-hero-grid / .onboarding-cta-card / .luxury-watermark-page
   we upgrade it to the same medallion visual used on public pages. */
.dashboard-hero-grid > div,
.dashboard-hero-grid > article,
.dashboard-hero-grid > section,
.luxury-watermark-page .dashboard-hero-grid > div,
.onboarding-cta-card,
.luxury-watermark-page [data-testid$="-card"]:not(.premium-tier-card),
.app-shell-luxury [data-testid$="-card"]:not(.premium-tier-card) {
  border-radius: 24px !important;
  border: 1.5px solid rgba(154, 112, 28, 0.65) !important;
  /* Iter 145.20 — genuinely visible 3D depth. Pure white base for real
     separation from the gold page band + heavier multi-layer shadow so
     every card visibly floats above the background. */
  box-shadow:
    0 44px 88px -18px rgba(122, 81, 27, 0.42),
    0 22px 44px -10px rgba(122, 81, 27, 0.26),
    0 6px 14px -2px rgba(122, 81, 27, 0.18),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(231, 191, 169, 0.40) !important;
  background: linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 250, 232, 1) 55%,
      rgba(252, 240, 210, 1) 100%) !important;
  color: #4c2a10 !important;
  overflow: hidden;
  position: relative;
  transition: box-shadow 300ms ease, border-color 300ms ease, transform 300ms cubic-bezier(.2,.9,.3,1) !important;
}
/* Iter 145.18 — polished-metal hover rim reflection also on luxury-shell cards */
.luxury-watermark-page [data-testid$="-card"]:not(.premium-tier-card):hover,
.app-shell-luxury [data-testid$="-card"]:not(.premium-tier-card):hover {
  border-color: rgba(154, 112, 28, 0.90) !important;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 3px 5px -2px rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(231, 191, 169, 0.55),
    0 54px 100px -18px rgba(122, 81, 27, 0.50),
    0 26px 50px -8px rgba(122, 81, 27, 0.30),
    0 7px 16px -2px rgba(122, 81, 27, 0.20) !important;
}
@media (prefers-reduced-motion: reduce) {
  .luxury-watermark-page [data-testid$="-card"]:not(.premium-tier-card),
  .app-shell-luxury [data-testid$="-card"]:not(.premium-tier-card) {
    transition: none !important;
  }
  .luxury-watermark-page [data-testid$="-card"]:not(.premium-tier-card):hover,
  .app-shell-luxury [data-testid$="-card"]:not(.premium-tier-card):hover {
    transform: none;
  }
}
[data-theme="dark"] .dashboard-hero-grid > div,
[data-theme="dark"] .luxury-watermark-page [data-testid$="-card"] {
  background:
    linear-gradient(145deg, rgba(58, 31, 61, 0.86), rgba(38, 22, 44, 0.9)) !important;
  color: #F7EAC7 !important;
  border-color: rgba(216, 180, 106, 0.55) !important;
}

/* Shadcn CardHeader inside dashboard cards gets the eyebrow / plum treatment. */
.dashboard-hero-grid > div > .flex.flex-col.space-y-1\.5,
.onboarding-cta-card > .flex.flex-col.space-y-1\.5,
.luxury-watermark-page [data-testid$="-card"] > .flex.flex-col.space-y-1\.5 {
  padding: clamp(1.1rem, 2.4vw, 1.75rem) clamp(1.1rem, 2.4vw, 1.75rem) 0.5rem;
}
.dashboard-hero-grid h3.font-semibold,
.onboarding-cta-card h3.font-semibold,
.luxury-watermark-page [data-testid$="-card"] h3.font-semibold {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
  color: #4a2d1a !important;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.dashboard-hero-grid .text-sm.text-muted-foreground,
.onboarding-cta-card .text-sm.text-muted-foreground,
.luxury-watermark-page [data-testid$="-card"] .text-sm.text-muted-foreground {
  color: rgba(76, 42, 16, 0.72) !important;
}
[data-theme="dark"] .dashboard-hero-grid h3.font-semibold,
[data-theme="dark"] .onboarding-cta-card h3.font-semibold,
[data-theme="dark"] .luxury-watermark-page [data-testid$="-card"] h3.font-semibold {
  color: #F7EAC7 !important;
}
[data-theme="dark"] .dashboard-hero-grid .text-sm.text-muted-foreground {
  color: rgba(247, 234, 199, 0.72) !important;
}

/* Add the same soft gold watermark under every dashboard medallion. */
.dashboard-hero-grid > div::before,
.onboarding-cta-card::before,
.luxury-watermark-page [data-testid$="-card"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(216, 180, 106, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 90% 90%, rgba(255, 243, 179, 0.28) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.dashboard-hero-grid > div > *,
.onboarding-cta-card > *,
.luxury-watermark-page [data-testid$="-card"] > * {
  position: relative;
  z-index: 1;
}

/* Life review upsell keeps its gold border but joins the medallion family. */
[data-testid="life-review-upsell-card"] {
  border-width: 2px !important;
  border-color: #C48D32 !important;
  background:
    linear-gradient(145deg, rgba(255, 243, 210, 0.96), rgba(232, 200, 130, 0.72)) !important;
}

/* Journey Intelligence card sits in the shared feminine gold palette. */
.mbc-journey-intelligence-card,
[data-testid="journey-intelligence-card"] {
  border-radius: clamp(28px, 3.6vw, 48px);
}

/* ═══════════════════════════════════════════════════════════════
   Iter 133 · Dashboard flat-panel remediation
   Scope: [data-testid="dashboard-root"] ONLY (i.e., /dashboard).
   Extends the shared premium-3D card visual system to panels whose
   testids do NOT end in `-card` (VIPTierProgress, GoldenWindow
   preview quiz/result, OnboardingChecklist step tiles, FertileDay
   empty variant, PartnerSync, JourneyIntelligence). Also lifts the
   inner "flat" panels (e.g. VIP customer + course access + course
   library sub-panels) that were rendering as bare coloured blocks.
   Palette: champagne / luminous natural gold / rose-gold border /
   pearl-ivory surface. No grey, silver, mustard, brown or bronze.
   ═══════════════════════════════════════════════════════════════ */
[data-testid="dashboard-root"] [data-testid="dashboard-vip-tier-progress"],
[data-testid="dashboard-root"] [data-testid="vip-tier-progress"],
[data-testid="dashboard-root"] [data-testid="partner-sync-card"],
[data-testid="dashboard-root"] [data-testid="golden-window-preview-quiz"],
[data-testid="dashboard-root"] [data-testid="golden-window-preview-result"],
[data-testid="dashboard-root"] [data-testid="fertile-day-card"],
[data-testid="dashboard-root"] [data-testid="fertile-day-card-empty"],
[data-testid="dashboard-root"] [data-testid="journey-intelligence-card"],
[data-testid="dashboard-root"] [data-testid^="onboarding-step-"] {
  /* Luminous pearl-ivory surface with a subtle warm champagne wash */
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 250, 232, 1) 55%,
      rgba(252, 240, 210, 1) 100%) !important;
  /* Champagne-gold border (no grey / silver / bronze) */
  border: 1.5px solid rgba(200, 158, 78, 0.55) !important;
  border-radius: 22px !important;
  /* Elevation: soft lower shadow + inset top highlight (pearl edge)
     + inset bottom warm blush (very subtle rose-gold underline). */
  box-shadow:
    0 24px 48px -18px rgba(122, 81, 27, 0.34),
    0 12px 24px -10px rgba(122, 81, 27, 0.22),
    0 4px 10px -2px rgba(122, 81, 27, 0.16),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(231, 191, 169, 0.38) !important;
  position: relative;
  isolation: isolate;
  transition:
    box-shadow 300ms ease,
    border-color 300ms ease,
    transform 300ms cubic-bezier(.2,.9,.3,1);
}
[data-testid="dashboard-root"] [data-testid="dashboard-vip-tier-progress"]:hover,
[data-testid="dashboard-root"] [data-testid="vip-tier-progress"]:hover,
[data-testid="dashboard-root"] [data-testid="partner-sync-card"]:hover,
[data-testid="dashboard-root"] [data-testid="golden-window-preview-quiz"]:hover,
[data-testid="dashboard-root"] [data-testid="golden-window-preview-result"]:hover,
[data-testid="dashboard-root"] [data-testid="fertile-day-card"]:hover,
[data-testid="dashboard-root"] [data-testid="fertile-day-card-empty"]:hover,
[data-testid="dashboard-root"] [data-testid="journey-intelligence-card"]:hover,
[data-testid="dashboard-root"] [data-testid^="onboarding-step-"]:hover {
  border-color: rgba(200, 158, 78, 0.85) !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 3px 5px -2px rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(231, 191, 169, 0.55),
    0 30px 58px -18px rgba(122, 81, 27, 0.42),
    0 16px 30px -8px rgba(122, 81, 27, 0.26),
    0 5px 12px -2px rgba(122, 81, 27, 0.18) !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-testid="dashboard-root"] [data-testid="dashboard-vip-tier-progress"],
  [data-testid="dashboard-root"] [data-testid="vip-tier-progress"],
  [data-testid="dashboard-root"] [data-testid="partner-sync-card"],
  [data-testid="dashboard-root"] [data-testid="golden-window-preview-quiz"],
  [data-testid="dashboard-root"] [data-testid="golden-window-preview-result"],
  [data-testid="dashboard-root"] [data-testid="fertile-day-card"],
  [data-testid="dashboard-root"] [data-testid="fertile-day-card-empty"],
  [data-testid="dashboard-root"] [data-testid="journey-intelligence-card"],
  [data-testid="dashboard-root"] [data-testid^="onboarding-step-"] {
    transition: none !important;
  }
  [data-testid="dashboard-root"] [data-testid="dashboard-vip-tier-progress"]:hover,
  [data-testid="dashboard-root"] [data-testid="vip-tier-progress"]:hover,
  [data-testid="dashboard-root"] [data-testid="partner-sync-card"]:hover,
  [data-testid="dashboard-root"] [data-testid="golden-window-preview-quiz"]:hover,
  [data-testid="dashboard-root"] [data-testid="golden-window-preview-result"]:hover,
  [data-testid="dashboard-root"] [data-testid="fertile-day-card"]:hover,
  [data-testid="dashboard-root"] [data-testid="fertile-day-card-empty"]:hover,
  [data-testid="dashboard-root"] [data-testid="journey-intelligence-card"]:hover,
  [data-testid="dashboard-root"] [data-testid^="onboarding-step-"]:hover {
    transform: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   Iter 71 — Owner request: banner fully covers section (no beige
   strips), side logo 2× bigger, sparkles ambient + continuous.
   ───────────────────────────────────────────────────────────── */

/* 1. Banner completely fills its wrapper — no beige strip above/below.
      We use `object-fit: cover` (crops soft edges of the artwork if any)
      instead of `contain` (which left ivory gaps top/bottom). The Sacred
      Origin artwork's text sits well within center 70% so cover is safe. */
.mbc-banner-logo-wrap {
  background: #C48D32 !important; /* champagne-gold fallback if art < wrapper */
  overflow: hidden;
  line-height: 0;
}
.mbc-banner-logo-wrap > a { display: block; width: 100%; height: 100%; }
.mbc-banner-logo,
.hero-banner-logo,
.sacred-origin-banner-logo,
[data-testid="brand-logo-banner"].mbc-banner-fill {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 22% !important;
  transform: none !important;
  display: block;
}
@media (max-width: 640px) {
  .mbc-banner-logo,
  .hero-banner-logo,
  .sacred-origin-banner-logo,
  [data-testid="brand-logo-banner"].mbc-banner-fill { object-fit: cover !important; height: 100% !important; }
}

/* 2. Side / header circular logo — 2× bigger than the prior 88px cap.
   Iter 145.9: do NOT re-clip to a circle or apply a blend mode here —
   the /brand-mark.png asset is already transparent + circular, and doing
   so reintroduced the double-circle/dark-halo regression this rule's own
   size bump was never meant to touch. Only size changes; shape/blend stay
   owned by the single source of truth above (line ~1596). */
.logo-mark-responsive {
  width: clamp(140px, 12vw, 176px) !important;
  height: clamp(140px, 12vw, 176px) !important;
  background: transparent !important;
  border-radius: 0;
  mix-blend-mode: normal;
}
[data-theme="dark"] .logo-mark-responsive { mix-blend-mode: normal; }
@media (max-width: 640px) {
  .logo-mark-responsive {
    width: 112px !important; height: 112px !important;
  }
}
.mbc-side-logo-circle,
.mbc-header-logo-circle,
.mbc-topbar-logo-circle,
.mbc-nav-logo-circle,
.app-topbar-logo-circle,
.sidebar-logo-circle {
  width: 160px !important;
  height: 160px !important;
  min-width: 140px !important;
  min-height: 140px !important;
}
@media (max-width: 640px) {
  .mbc-side-logo-circle,
  .mbc-header-logo-circle,
  .mbc-topbar-logo-circle,
  .mbc-nav-logo-circle,
  .app-topbar-logo-circle,
  .sidebar-logo-circle {
    width: 112px !important; height: 112px !important;
    min-width: 112px !important; min-height: 112px !important;
  }
}

/* 3. Gold dust / stardust — brighter, continuous, always alive. */
.mbc-sparkle-layer { opacity: 1 !important; }
.mbc-sparkle-layer-b { opacity: 0.9 !important; }
.mbc-gold-glow-layer { opacity: 1 !important; }
[data-theme="normal"] .mbc-sparkle-layer { opacity: 0.85 !important; }
[data-theme="normal"] .mbc-sparkle-layer-b { opacity: 0.75 !important; }
[data-theme="dark"] .mbc-sparkle-layer { opacity: 0.95 !important; }
[data-theme="dark"] .mbc-sparkle-layer-b { opacity: 0.85 !important; }

/* Click sparkle particle — richer + slightly larger + longer trail */
.click-sparkle-particle {
  width: 8px !important;
  height: 8px !important;
  box-shadow:
    0 0 6px rgba(255, 243, 179, 0.95),
    0 0 12px rgba(216, 180, 106, 0.7) !important;
}

/* ─────────────────────────────────────────────────────────────
   Iter 71 — Owner regression pass: sparkles TRULY visible + banner
   truly covers with zero beige gap + applies to website AND app.
   ───────────────────────────────────────────────────────────── */

/* Body gets the pearl paint so every page can be transparent. */
html, body { background: #FAF7F0; }
[data-theme="dark"] html, [data-theme="dark"] body { background: #1a0f1c; }

/* Force EVERY page shell transparent so the fixed atmosphere sparkles are
   visible on every route (public site AND logged-in app). */
.app-shell-luxury,
.marketing-shell,
.dashboard-shell,
.luxury-watermark-page,
.min-h-screen.bg-brand-pearl,
.min-h-screen.bg-brand-ivory,
.min-h-screen.bg-brand-cream,
[data-testid="premium-home"],
[data-testid="pricing-hub-page"],
[data-testid="store-page"],
[data-testid="admin-complaints-page"],
[data-testid="assessments-page"],
[data-testid="facts-questions-page"],
main.marketing-shell {
  background: transparent !important;
  background-color: transparent !important;
}

/* Raise the atmosphere layer above page background paint but keep it
   behind interactive content (which sits at z-index 2+). */
.mbc-atmosphere { z-index: 1 !important; }
.mbc-sparkle-layer,
.mbc-sparkle-layer-a,
.mbc-sparkle-layer-b { opacity: 1 !important; mix-blend-mode: normal !important; }
.mbc-gold-glow-layer { opacity: 1 !important; }

/* Banner section — kill any beige gap around it. Remove page-side padding
   that was framing the banner. Applies to homepage, pricing, dashboard,
   course page — every place LogoBanner is used. */
/* MASTER BANNER FILL RULE — banner spans the full viewport width edge-to-edge,
   caps its height so it never dominates the viewport (previously it ran 700px+
   tall which felt disproportionate), and crops from the TOP of the artwork so
   the emblem stays visible while the tagline slides gracefully out of frame.
   Applied wherever the wrapper class is used. */
.mbc-banner-logo-wrap {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  display: block !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  /* Cap height — banner should feel like a stately masthead, not a full-page hero. */
  height: clamp(180px, 20vw, 260px) !important;
  max-height: 260px !important;
}
.mbc-banner-logo-wrap > a,
.mbc-banner-logo-wrap > * {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.mbc-banner-logo-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 22% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Banner + gold nav-bar spacing — the gold nav sub-bar (with the small
   circular logo and menu) must sit visually FLUSH below the banner with no
   overlap or squish, AND both surfaces must share identical edges (sharp
   90° corners) + full viewport width so they look like one continuous
   masthead. Per user directive Iter 81: banner (top) is visually more
   prominent than the sub-bar. */
[data-testid="premium-brand-banner"] + *,
[data-testid="marketing-brand-banner"] + *,
[data-testid="dashboard-brand-banner"] + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
[data-testid="premium-brand-banner"],
[data-testid="marketing-brand-banner"],
[data-testid="dashboard-brand-banner"] {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 0 !important;
}
/* Gold nav sub-bar (the sticky <header> underneath the banner) must match
   the banner: full viewport width, sharp corners, no gaps. */
[data-testid="public-header"],
header.sticky.top-0.z-40 {
  width: 100vw !important;
  max-width: 100vw !important;
  border-radius: 0 !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  border-top: none !important;
  box-shadow: 0 6px 20px -12px rgba(58, 31, 61, 0.25) !important;
}
/* And the small circular side logo must render at ≤88px so the top banner
   remains visually the more prominent of the two masthead surfaces */
.mbc-side-logo img,
[data-testid="side-logo"] img,
.side-logo-container img,
.mbc-header-logo-circle img,
[data-testid="brand-logo"] img {
  max-height: 88px !important;
  max-width: 88px !important;
  object-fit: contain !important;
}

/* Click sparkle particle brighter and larger so the effect is unmistakable. */
.click-sparkle-particle {
  width: 12px !important;
  height: 12px !important;
  background: radial-gradient(circle, #FFF3B3 0%, #E0B84F 40%, transparent 75%) !important;
  box-shadow:
    0 0 10px rgba(255, 243, 179, 1),
    0 0 20px rgba(216, 180, 106, 0.9),
    0 0 30px rgba(196, 141, 50, 0.6) !important;
  border-radius: 999px !important;
  z-index: 9999 !important;
}
.opening-sparkle-particle {
  width: 10px !important;
  height: 10px !important;
  background: radial-gradient(circle, #FFF3B3 0%, #E0B84F 50%, transparent 80%) !important;
  box-shadow: 0 0 12px rgba(255, 243, 179, 0.9), 0 0 24px rgba(216, 180, 106, 0.7) !important;
}

/* Iter 71 hotfix — the earlier `#root > *` position:relative override broke
   the atmosphere layer's fixed positioning (collapsed its height to 0 so
   sparkles were invisible). Restore fixed positioning explicitly. */
.mbc-atmosphere {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.mbc-sparkle-layer {
  position: absolute !important;
  inset: -10% !important;
  width: 120% !important;
  height: 120% !important;
  pointer-events: none !important;
}
.mbc-gold-glow-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}
.mbc-gold-watermark {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────
   Iter 71 — Banner MUST fully own the top of the page. The sticky
   nav that sits immediately below the banner used a beige background
   which the owner reads as "another color around the banner". Force
   the sticky nav to sit ON the banner (translucent gold) so there's
   no visible non-banner color at the top.
   ───────────────────────────────────────────────────────────── */

/* Public sticky nav (all shells) — translucent gold over the banner. */
[data-testid="public-header"],
[data-testid="premium-header"],
[data-testid="pricing-hub-page"] > header.sticky,
[data-testid="store-page"] > header.sticky,
header.sticky.top-0.z-40 {
  background: linear-gradient(180deg, rgba(196,141,50,0.85) 0%, rgba(216,180,106,0.72) 100%) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(196,141,50,0.4);
}
[data-theme="dark"] [data-testid="public-header"],
[data-theme="dark"] [data-testid="premium-header"],
[data-theme="dark"] header.sticky.top-0.z-40 {
  background: linear-gradient(180deg, rgba(58,31,61,0.86), rgba(38,22,44,0.88)) !important;
}

/* Dashboard topbar — same treatment so app matches website. */
.topbar,
[data-testid="topbar"] {
  background: linear-gradient(180deg, rgba(196,141,50,0.9) 0%, rgba(216,180,106,0.78) 100%) !important;
  border-bottom: 1px solid rgba(196,141,50,0.42);
  color: #4A2D1A;
}
.topbar .eyebrow, [data-testid="topbar"] .eyebrow { color: rgba(74,45,26,0.8) !important; }
.topbar h1, [data-testid="topbar"] h1 { color: #4A2D1A !important; }

/* ─────────────────────────────────────────────────────────────
   Iter 79 — Unified dashboard topbar bubble shape + color.
   User request: every bubble/pill in the dashboard header should
   have the SAME shape and SAME color, EXCEPT:
     - the user email badge (client name)   → slightly different tint
     - the "Store" primary button           → slightly different tint
   ───────────────────────────────────────────────────────────── */
[data-testid="topbar"] .button-primary,
[data-testid="topbar"] .button-secondary,
[data-testid="topbar"] [data-testid$="-language-selector"],
[data-testid="topbar"] [data-testid$="-currency-selector"],
[data-testid="topbar"] [data-testid$="-theme-selector"],
[data-testid="topbar"] [data-testid$="-language-selector"] > *,
[data-testid="topbar"] [data-testid$="-currency-selector"] > *,
[data-testid="topbar"] [data-testid$="-theme-selector"] > *,
[data-testid="topbar"] select,
[data-testid="topbar"] [role="combobox"],
[data-testid="topbar"] .badge,
[data-testid="topbar"] [class*="Badge"],
[data-testid="topbar"] [data-testid="logout-button"],
[data-testid="topbar"] button:not([data-testid="user-email-badge"]) {
  background: linear-gradient(135deg,
    rgba(247, 234, 199, 0.98) 0%,
    rgba(241, 222, 168, 0.98) 100%) !important;
  color: #18212F !important;
  color: var(--brand-plum) !important;
  border: 1px solid rgba(196, 141, 50, 0.55) !important;
  border-radius: 999px !important;
  min-height: 42px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  box-shadow: 0 8px 20px -12px rgba(74, 45, 26, 0.28) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
[data-testid="topbar"] .button-primary:hover,
[data-testid="topbar"] .button-secondary:hover,
[data-testid="topbar"] select:hover,
[data-testid="topbar"] .badge:hover {
  background: linear-gradient(135deg,
    rgba(241, 222, 168, 0.98) 0%,
    rgba(232, 200, 130, 0.98) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px -12px rgba(74, 45, 26, 0.35) !important;
}

/* Exception 1: user's email badge — warm champagne with plum text (kept
   in the same warm-gold family so it feels "same shape family" but subtly
   distinguishes the client name from other actions). */
[data-testid="topbar"] [data-testid="user-email-badge"] {
  background: linear-gradient(135deg,
    rgba(232, 200, 130, 0.98) 0%,
    rgba(216, 172, 90, 0.98) 100%) !important;
  color: #18212F !important;
  color: var(--brand-plum) !important;
  border-color: rgba(122, 74, 18, 0.55) !important;
  box-shadow: 0 12px 24px -12px rgba(122, 74, 18, 0.45),
              inset 0 0 0 1px rgba(255, 253, 240, 0.4) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
[data-testid="topbar"] [data-testid="user-email-badge"]:hover {
  background: linear-gradient(135deg,
    rgba(216, 172, 90, 0.98) 0%,
    rgba(196, 141, 50, 0.98) 100%) !important;
}

/* Exception 2: Store button — richer royal gold accent */
[data-testid="topbar"] [data-testid="dashboard-open-store"] {
  background: linear-gradient(135deg,
    rgba(196, 141, 50, 0.98) 0%,
    rgba(155, 106, 22, 0.98) 100%) !important;
  color: rgba(251, 243, 222, 0.98) !important;
  border-color: rgba(122, 74, 18, 0.65) !important;
  box-shadow: 0 12px 24px -10px rgba(122, 74, 18, 0.55) !important;
}
[data-testid="topbar"] [data-testid="dashboard-open-store"]:hover {
  background: linear-gradient(135deg,
    rgba(155, 106, 22, 0.98) 0%,
    rgba(122, 74, 18, 0.98) 100%) !important;
}

/* Fix the inline selectors' inner controls so they inherit the pill look. */
[data-testid="topbar"] [data-testid$="-language-selector"] select,
[data-testid="topbar"] [data-testid$="-currency-selector"] select,
[data-testid="topbar"] [data-testid$="-theme-selector"] select {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  outline: none !important;
  -webkit-appearance: none !important;
          appearance: none !important;
  cursor: pointer !important;
}

/* Iter 82 — Dashboard cards uniform sizing (P0 request).
   Every card inside .dashboard-hero-grid must have the same width, height,
   border-radius, spacing, icon size, and typography. Content flexes
   inside; the outer chassis stays symmetrical.  */
.dashboard-hero-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  grid-gap: clamp(20px, 2.5vw, 32px) !important;
  gap: clamp(20px, 2.5vw, 32px) !important;
  align-items: stretch !important;
}
.dashboard-hero-grid > div,
.dashboard-hero-grid > article,
.dashboard-hero-grid > section {
  min-height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.dashboard-hero-grid > div > .flex.flex-col.space-y-1\.5,
.dashboard-hero-grid > article > .flex.flex-col.space-y-1\.5,
.dashboard-hero-grid > section > .flex.flex-col.space-y-1\.5 {
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.4vw, 1.75rem) 0.5rem !important;
  min-height: 92px !important;
}
.dashboard-hero-grid > div > .p-6,
.dashboard-hero-grid > article > .p-6,
.dashboard-hero-grid > section > .p-6 {
  padding: clamp(1.25rem, 2.4vw, 1.75rem) !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
}
.dashboard-hero-grid h3.font-semibold {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
.dashboard-hero-grid p,
.dashboard-hero-grid li {
  font-size: 0.925rem !important;
  line-height: 1.55 !important;
}
.dashboard-hero-grid svg {
  width: 1.05rem !important;
  height: 1.05rem !important;
  flex-shrink: 0 !important;
}
.dashboard-hero-grid button,
.dashboard-hero-grid a.button-primary,
.dashboard-hero-grid a.button-secondary {
  align-self: flex-start !important;
  margin-top: auto !important;
}

/* Life Review upsell keeps its span-2 layout — do NOT shrink its width. */
.dashboard-hero-grid > .lg\:col-span-2 {
  grid-column: 1 / -1 !important;
}

/* Iter 82 — Persistent topbar becomes FIXED at viewport top so it stays
   visible even when the user scrolls or a page auto-scrolls its content
   (Messages panel scrolls to bottom, AI Companion streams, etc.).
   Using position:fixed (not sticky) because some pages have
   overflow-x-hidden on their main which breaks sticky. */
header[data-testid="topbar"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 60 !important;
  background: linear-gradient(180deg, rgba(251, 243, 222, 0.98) 0%, rgba(247, 234, 199, 0.96) 100%) !important;
  -webkit-backdrop-filter: saturate(1.05) blur(8px);
          backdrop-filter: saturate(1.05) blur(8px);
  border-bottom: 1px solid rgba(196, 141, 50, 0.22) !important;
  box-shadow: 0 6px 22px -12px rgba(74, 45, 26, 0.22) !important;
  padding: 12px 24px !important;
  max-height: 40vh;
  overflow-y: auto;
}
/* Every page that mounts LoggedInTopbar needs top-padding to compensate. */
body:has(header[data-testid="topbar"]) {
  padding-top: 120px !important;
}
@media (max-width: 768px) {
  body:has(header[data-testid="topbar"]) {
    padding-top: 200px !important;
  }
}

/* Active-page highlight on the persistent topbar. */
[data-testid="topbar"] [data-active="true"] {
  box-shadow: 0 0 0 2px rgba(122, 74, 18, 0.55),
              0 8px 20px -10px rgba(74, 45, 26, 0.35) !important;
  transform: translateY(-1px) !important;
  position: relative !important;
}
[data-testid="topbar"] [data-active="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(196,141,50,0.9), rgba(155,106,22,0.95));
  pointer-events: none;
}
   Add negative margin below so the sticky nav floats seamlessly onto
   the banner without any beige seam. */
.mbc-banner-logo-wrap {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}
.mbc-banner-logo-wrap + header {
  margin-top: -1px !important;
  box-shadow: 0 4px 20px rgba(74,45,26,0.15);
}

/* ─────────────────────────────────────────────────────────────
   Iter 75 — Banner + Sticky-Header SYMMETRY
   1. Always use the compact "Menu ▾" dropdown (removes the wide-nav
      overlap with the language / currency / theme selectors and CTAs
      that appeared at 2xl+ widths).
   2. Match the sticky-header gradient to the banner's warm cream +
      champagne palette so the top of the page reads as ONE unified
      gold surface (banner + header) instead of two mismatched bars.
   3. Enforce identical full-viewport width and zero rounded edges on
      both banner wrap and sticky header so their structure is
      identical.
   ───────────────────────────────────────────────────────────── */

/* 1. Force the wide inline nav to stay hidden at ALL viewport widths.
      The compact "Menu ▾" (which contains every link) becomes the
      single navigation entry point. Zero-overlap guaranteed. */
[data-testid="premium-nav"],
[data-testid="marketing-nav"],
[data-testid="pricing-header-nav"],
[data-testid="store-header-nav"],
header[data-testid="premium-header"] > div > nav.hidden,
header[data-testid="public-header"] > div > nav.hidden,
[data-testid="pricing-hub-page"] > header nav.hidden,
[data-testid="store-page"] > header nav.hidden {
  display: none !important;
}
/* Compact dropdown / Menu ▾ must be visible at all widths. */
[data-testid="premium-nav-compact"],
[data-testid="marketing-nav-compact"],
[data-testid="pricing-header-compact"],
[data-testid="pricing-header-compact-nav"],
[data-testid="store-header-compact"],
[data-testid="store-header-compact-nav"] {
  display: inline-block !important;
}

/* 2. Sticky header gradient now mirrors the banner PNG's warm palette
      (Warm Ivory → Champagne → Pale Gold). This makes both banners
      read as ONE continuous gold surface. Overrides the earlier
      saturated gold (196,141,50) that jarred against the banner. */
[data-testid="public-header"],
[data-testid="premium-header"],
[data-testid="pricing-hub-page"] > header.sticky,
[data-testid="store-page"] > header.sticky,
.mbc-banner-logo-wrap + header,
.mbc-banner-logo-wrap + header.sticky.top-0.z-40 {
  background: linear-gradient(180deg,
    rgba(251, 243, 222, 0.96) 0%,
    rgba(247, 234, 199, 0.94) 50%,
    rgba(241, 222, 168, 0.92) 100%) !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(196, 141, 50, 0.28) !important;
  box-shadow: 0 4px 22px -8px rgba(74, 45, 26, 0.18) !important;
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
          backdrop-filter: saturate(1.05) blur(6px);
}
[data-theme="dark"] [data-testid="public-header"],
[data-theme="dark"] [data-testid="premium-header"],
[data-theme="dark"] .mbc-banner-logo-wrap + header {
  background: linear-gradient(180deg,
    rgba(58, 31, 61, 0.92) 0%,
    rgba(38, 22, 44, 0.94) 100%) !important;
}

/* ─────────────────────────────────────────────────────────────
   Iter 76 — RESTORED banner + matched squarish shape (user fix)
   The user's real request: the TOP artwork banner AND the header
   underneath it should share ONE "squarish" container shape —
   contained, centered, rounded, same width. Previous iter's
   100vw + negative-margin trick was pulling the banner PNG's
   artwork off-centre. Reverted here.
   ───────────────────────────────────────────────────────────── */

/* Cancel the earlier structural-symmetry rule that stretched the
   wrap edge-to-edge and shifted the artwork. */
.mbc-banner-logo-wrap,
.mbc-banner-logo-wrap + header,
.mbc-banner-logo-wrap + header.sticky {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
}

/* Both banner + header now share ONE contained "squarish" chassis:
   same max-width, same horizontal padding, same rounded corners,
   same shadow. This is the visual symmetry the user requested. */
.mbc-banner-logo-wrap {
  max-width: 1280px !important;
  width: auto !important;
  margin: 24px auto 12px auto !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px -30px rgba(74, 45, 26, 0.35), 0 0 0 1px rgba(196, 141, 50, 0.35) !important;
  padding: 0 !important;
  height: auto !important;
  max-height: none !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
  display: block !important;
  background: linear-gradient(180deg, #FBF3DE 0%, #F7EAC7 55%, #F1DEA8 100%) !important;
}
.mbc-banner-logo-wrap + header,
.mbc-banner-logo-wrap + header.sticky.top-0.z-40 {
  max-width: 1280px !important;
  margin: 0 auto 24px auto !important;
  border-radius: 32px !important;
  box-shadow: 0 24px 60px -30px rgba(74, 45, 26, 0.35), 0 0 0 1px rgba(196, 141, 50, 0.35) !important;
  position: relative !important;
  top: auto !important;
}
@media (max-width: 1340px) {
  .mbc-banner-logo-wrap,
  .mbc-banner-logo-wrap + header,
  .mbc-banner-logo-wrap + header.sticky {
    margin-left: 24px !important;
    margin-right: 24px !important;
    max-width: none !important;
  }
}
@media (max-width: 640px) {
  .mbc-banner-logo-wrap,
  .mbc-banner-logo-wrap + header,
  .mbc-banner-logo-wrap + header.sticky {
    margin-left: 12px !important;
    margin-right: 12px !important;
    border-radius: 22px !important;
  }
}

/* Banner PNG — show the FULL logo INCLUDING the "Sacred Origin · Fertility ·
   Love · Legacy" text baked into the artwork. object-fit: contain keeps the
   entire image visible with no cropping. The wrap grows tall enough via
   auto height so the full logo + text are always visible. */
.mbc-banner-logo-wrap [data-testid="brand-logo-banner"].mbc-banner-fill,
.mbc-banner-logo-wrap .mbc-banner-fill,
.mbc-banner-logo-wrap img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 320px !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  display: block !important;
}
@media (max-width: 640px) {
  .mbc-banner-logo-wrap [data-testid="brand-logo-banner"].mbc-banner-fill,
  .mbc-banner-logo-wrap .mbc-banner-fill,
  .mbc-banner-logo-wrap img { min-height: 200px !important; }
}

/* ─────────────────────────────────────────────────────────────
   Iter 83 — Sparkle root container + ambient dashboard sparks.
   Sparkles were disappearing because the root <div id="root"> had
   overflow-hidden inside luxury-watermark-page, clipping particles.
   Moving sparks to a dedicated top-level container fixes it.
   ───────────────────────────────────────────────────────────── */
#mbc-sparkle-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: visible;
}

/* Ambient dashboard sparkles — 4 gentle drifting particles that live
   under the dashboard content (behind cards, above background). Motion
   respects prefers-reduced-motion via existing rules earlier in the file. */
[data-testid="dashboard-root"]::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 215, 128, 0.75) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 22%, rgba(255, 230, 160, 0.65) 0 2px, transparent 3px),
    radial-gradient(circle at 26% 72%, rgba(255, 210, 120, 0.7) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255, 225, 150, 0.6) 0 2px, transparent 3px);
  background-repeat: no-repeat;
  animation: mbc-dashboard-spark 6s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes mbc-dashboard-spark {
  0%   { opacity: 0.55; transform: translate3d(0,0,0); }
  50%  { opacity: 1;    transform: translate3d(0.6vw, -0.4vw, 0); }
  100% { opacity: 0.65; transform: translate3d(-0.4vw, 0.5vw, 0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-testid="dashboard-root"]::before { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   Iter 83 — Test 3D "Gold Heart" section card.
   Applied ONLY to elements with class `.mbc-heart-card`. This is the
   test bed — once approved we'll roll it out to every dashboard
   section card. The heart shape is drawn with clip-path so the card
   remains a real, clickable rectangle underneath (accessibility +
   focus outlines still work). The 3D depth comes from layered
   inset + drop shadows and a linear-gradient face.
   ───────────────────────────────────────────────────────────── */
.mbc-heart-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: clamp(200px, 20vw, 240px);
  aspect-ratio: 1 / 1;
  padding: 2.6rem 1.5rem 1.5rem;
  color: #18212F;
  color: var(--brand-plum);
  text-align: center;
  text-decoration: none !important;
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255, 253, 240, 0.95) 0%, rgba(238, 200, 115, 0.98) 45%, rgba(196, 141, 50, 1) 100%);
  clip-path: path("M100 190 C 40 150, 10 120, 10 80 C 10 40, 40 20, 65 20 C 85 20, 95 35, 100 50 C 105 35, 115 20, 135 20 C 160 20, 190 40, 190 80 C 190 120, 160 150, 100 190 Z");
  -webkit-clip-path: path("M100 190 C 40 150, 10 120, 10 80 C 10 40, 40 20, 65 20 C 85 20, 95 35, 100 50 C 105 35, 115 20, 135 20 C 160 20, 190 40, 190 80 C 190 120, 160 150, 100 190 Z");
  filter: drop-shadow(0 18px 24px rgba(122, 74, 18, 0.35))
          drop-shadow(0 6px 10px rgba(74, 45, 26, 0.25));
  transition: transform .25s ease, filter .25s ease;
  cursor: pointer;
}
.mbc-heart-card::before {
  /* Inner highlight for the 3D dome effect */
  content: "";
  position: absolute;
  inset: 8% 20% auto 20%;
  height: 32%;
  background: radial-gradient(ellipse, rgba(255, 253, 240, 0.75) 0%, transparent 65%);
  pointer-events: none;
}
.mbc-heart-card:hover {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 24px 32px rgba(122, 74, 18, 0.42))
          drop-shadow(0 8px 14px rgba(74, 45, 26, 0.3));
}
.mbc-heart-card:active { transform: translateY(-1px) scale(1.01); }
.mbc-heart-card svg,
.mbc-heart-card .mbc-heart-icon {
  width: 32px !important;
  height: 32px !important;
  color: #18212F;
  color: var(--brand-plum);
  filter: drop-shadow(0 2px 3px rgba(255,253,240,0.6));
  position: relative;
  z-index: 1;
}
.mbc-heart-card .mbc-heart-label {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  max-width: 78%;
  position: relative;
  z-index: 1;
}
/* Accent variants: same shape, same size — only tint changes */
.mbc-heart-card.mbc-heart-store {
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255, 253, 240, 0.95) 0%, rgba(232, 172, 90, 0.98) 45%, rgba(155, 106, 22, 1) 100%);
}
.mbc-heart-card.mbc-heart-pricing {
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255, 253, 240, 0.95) 0%, rgba(196, 141, 50, 0.98) 45%, rgba(122, 74, 18, 1) 100%);
}
.mbc-heart-card.mbc-heart-profile {
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255, 250, 220, 0.95) 0%, rgba(216, 172, 90, 0.98) 45%, rgba(94, 46, 90, 1) 100%);
}
.mbc-heart-card.mbc-heart-logout {
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255, 253, 240, 0.95) 0%, rgba(216, 172, 90, 0.98) 45%, rgba(155, 106, 22, 1) 100%);
}

/* Symmetrical grid for the heart cards */
.mbc-heart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  grid-gap: clamp(1.5rem, 3vw, 2.25rem);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  justify-content: center;
  padding: 1rem 0;
}
@media (max-width: 480px) {
  .mbc-heart-card {
    width: clamp(140px, 42vw, 180px);
  }
  .mbc-heart-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 180px)); }
}

/* ─────────────────────────────────────────────────────────────
   Iter 84 — Premium Liquid Gold Dimensional (shared design system).
   The source-of-truth for this block is /app/shared/theme/tokens.css
   + components.css. Those files are duplicated below so Webpack can
   resolve the CSS at build time without cross-package imports. Any
   change must be mirrored back to /app/shared/. See
   DESIGN_SYSTEM_REUSE_HANDOVER.md for the reuse contract.

   KNOWN DRIFT (Iter 146 audit): --mbc-gold-500 here is NOT the hex
   family actually driving the app's live button/avatar/card gradients
   (Premium3DControl, InHouseAIAvatar, VIP cards) — those hardcode
   #fff4c6/#f6d878/#d8a93c/#b98a32 directly, duplicated across ~6 files.
   See the matching note in /app/shared/theme/tokens.css before changing
   either palette — --mbc-gold-500 has live consumers below (the
   watermark border/background rules) that depend on its current value.
   ───────────────────────────────────────────────────────────── */

/* Apply the dimensional style to the existing Dashboard hero cards
   without touching their internal JSX. This preserves ALL business
   logic and content while upgrading the visual layer. */
.dashboard-hero-grid > .card,
.dashboard-hero-grid > [class*="Card"],
.dashboard-hero-grid > div {
  border-radius: 22px !important;
  border-radius: var(--mbc-radius-card) !important;
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, #FBF3DE 0%, #F7EAC7 45%, #F1DEA8 100%) !important;
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, var(--mbc-ivory) 0%, var(--mbc-cream) 45%, var(--mbc-champagne) 100%) !important;
  border: 1px solid rgba(196, 141, 50, 0.55) !important;
  border: 1px solid var(--mbc-border-hi) !important;
  box-shadow: 0 18px 40px -20px rgba(74, 45, 26, 0.35),
                          0 6px 14px -6px rgba(74, 45, 26, 0.22) !important;
  box-shadow: var(--mbc-shadow-card) !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1),
              box-shadow 200ms cubic-bezier(.2, .8, .2, 1) !important;
  transition: transform var(--mbc-t-hover) var(--mbc-easing),
              box-shadow var(--mbc-t-hover) var(--mbc-easing) !important;
}
.dashboard-hero-grid > .card::before,
.dashboard-hero-grid > [class*="Card"]::before,
.dashboard-hero-grid > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 55% at 50% -10%, rgba(255,253,240,0.65) 0%, transparent 60%),
    radial-gradient(80% 40% at 100% 100%, rgba(196,141,50,0.25) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.dashboard-hero-grid > .card:hover,
.dashboard-hero-grid > [class*="Card"]:hover,
.dashboard-hero-grid > div:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 26px 60px -22px rgba(74, 45, 26, 0.45),
                          0 10px 18px -8px rgba(74, 45, 26, 0.28) !important;
  box-shadow: var(--mbc-shadow-hover) !important;
}
.dashboard-hero-grid > .card > *,
.dashboard-hero-grid > [class*="Card"] > *,
.dashboard-hero-grid > div > * { position: relative; z-index: 2; }

/* Featured single Heart card — used ONLY for the strategic AI Companion
   entry point on the Dashboard. Sized larger, sub-label + eyebrow, gold
   3D depth. All OTHER sections use the .mbc-dim-card style above. */
.mbc-heart-card.mbc-heart-featured {
  width: clamp(280px, 26vw, 340px);
  aspect-ratio: auto;
  height: 260px;
  padding: 1.5rem 3rem 3rem;
  gap: 0.25rem;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 24px 24px 50% 50% / 24px 24px 40% 40%;
  overflow: hidden;
}
.mbc-heart-card.mbc-heart-featured::before {
  inset: 6% 15% auto 15%;
}
.mbc-heart-card .mbc-heart-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 800;
  color: #3A1F3D;
  color: var(--mbc-plum);
  opacity: 0.72;
  z-index: 1;
  position: relative;
}
.mbc-heart-card .mbc-heart-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: #3A1F3D;
  color: var(--mbc-plum);
  opacity: 0.78;
  z-index: 1;
  position: relative;
}
/*
 * Make Baby Complete — Premium Liquid Gold Dimensional Design System
 * -----------------------------------------------------------------------------
 * Shared design tokens for the app AND the website. Any project (React,
 * Next.js, static HTML) can import this single CSS file and inherit the
 * complete brand palette + spacing + motion + shadow language.
 *
 * Usage in a website:
 *   <link rel="stylesheet" href="/shared/theme/tokens.css" />
 *   Then reference the variables e.g. background: var(--mbc-gold-500);
 *
 * All tokens live under the `--mbc-` prefix so they never collide with
 * an existing site's variables.
 */

:root {
  /* ── Color palette ─────────────────────────────────────────── */
  --mbc-ivory:            #FBF3DE;
  --mbc-cream:            #F7EAC7;
  --mbc-champagne:        #F1DEA8;
  --mbc-gold-300:         #E8C882;
  --mbc-gold-400:         #D8AC5A;
  --mbc-gold-500:         #C48D32;   /* primary gold */
  --mbc-gold-600:         #9B6A16;
  --mbc-gold-700:         #7A4A12;
  --mbc-plum:             #3A1F3D;   /* deep text */
  --mbc-plum-soft:        #5E2E5A;
  --mbc-bronze:           #7A4A12;
  --mbc-rose-accent:      #C4939A;

  /* Semantic surfaces */
  --mbc-surface-glass:    rgba(255, 253, 240, 0.68);
  --mbc-surface-warm:     rgba(247, 234, 199, 0.94);
  --mbc-surface-deep:     rgba(196, 141, 50, 0.98);
  --mbc-text-primary:     var(--mbc-plum);
  --mbc-text-muted:       rgba(58, 31, 61, 0.72);
  --mbc-border-hi:        rgba(196, 141, 50, 0.55);
  --mbc-border-soft:      rgba(196, 141, 50, 0.28);

  /* ── Effects ───────────────────────────────────────────────── */
  --mbc-shadow-card:      0 18px 40px -20px rgba(74, 45, 26, 0.35),
                          0 6px 14px -6px rgba(74, 45, 26, 0.22);
  --mbc-shadow-hover:     0 26px 60px -22px rgba(74, 45, 26, 0.45),
                          0 10px 18px -8px rgba(74, 45, 26, 0.28);
  --mbc-glow-active:      0 0 0 3px rgba(196, 141, 50, 0.55),
                          0 12px 26px -10px rgba(122, 74, 18, 0.5);
  --mbc-glass-blur:       12px;
  --mbc-sparkle-opacity:  0.85;

  /* ── Spacing ───────────────────────────────────────────────── */
  --mbc-grid-gap:         clamp(1.25rem, 2.5vw, 2rem);
  --mbc-card-padding:     clamp(1.15rem, 2.4vw, 1.75rem);
  --mbc-page-padding:     clamp(1rem, 3vw, 2.5rem);
  --mbc-section-gap:      clamp(2.5rem, 5vw, 4.5rem);

  /* ── Radius ────────────────────────────────────────────────── */
  --mbc-radius-card:      22px;
  --mbc-radius-pill:      999px;
  --mbc-radius-input:     14px;

  /* ── Typography ────────────────────────────────────────────── */
  --mbc-font-serif:       "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --mbc-font-sans:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mbc-fs-title:         clamp(1.35rem, 2vw, 1.6rem);
  --mbc-fs-subtitle:      clamp(1rem, 1.4vw, 1.15rem);
  --mbc-fs-label:         0.925rem;
  --mbc-fs-body:          0.925rem;
  --mbc-fs-small:         0.78rem;
  --mbc-fw-body:          500;
  --mbc-fw-strong:        700;
  --mbc-fw-hero:          800;

  /* ── Motion ────────────────────────────────────────────────── */
  --mbc-t-hover:          200ms;
  --mbc-t-tap:            120ms;
  --mbc-t-page:           320ms;
  --mbc-t-spark:          6s;
  --mbc-easing:           cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mbc-t-hover: 1ms;
    --mbc-t-tap:   1ms;
    --mbc-t-page:  1ms;
    --mbc-t-spark: 0s;
  }
}

/* Accessibility — focus outline shared by every clickable in the system. */
:root { --mbc-focus-ring: 0 0 0 3px rgba(196, 141, 50, 0.55), 0 0 0 6px rgba(58, 31, 61, 0.15); }
.mbc-focusable:focus-visible,
.mbc-dim-card:focus-visible,
.mbc-heart-card:focus-visible,
.mbc-liquid-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196, 141, 50, 0.55), 0 0 0 6px rgba(58, 31, 61, 0.15) !important;
  box-shadow: var(--mbc-focus-ring) !important;
}
/*
 * Premium Liquid Gold Dimensional — Component styles
 * -----------------------------------------------------------------------------
 * These CSS classes are pure — no framework dependency. Import this file in
 * either the app OR the website, alongside `tokens.css`, and every component
 * built with the matching class names inherits the entire brand look.
 *
 *   <link rel="stylesheet" href="/shared/theme/tokens.css" />
 *   <link rel="stylesheet" href="/shared/theme/components.css" />
 */

/* ── Dimensional gold card — the flagship card style ─────────── */
.mbc-dim-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 2.4vw, 1.75rem);
  padding: var(--mbc-card-padding);
  border-radius: 22px;
  border-radius: var(--mbc-radius-card);
  color: #3A1F3D;
  color: var(--mbc-text-primary);
  text-decoration: none;
  background:
    /* liquid glass highlight */
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    
    linear-gradient(160deg, #FBF3DE 0%, #F7EAC7 45%, #F1DEA8 100%);
  background:
    /* liquid glass highlight */
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    /* warm gold gradient body */
    linear-gradient(160deg, var(--mbc-ivory) 0%, var(--mbc-cream) 45%, var(--mbc-champagne) 100%);
  border: 1px solid rgba(196, 141, 50, 0.55);
  border: 1px solid var(--mbc-border-hi);
  box-shadow: 0 18px 40px -20px rgba(74, 45, 26, 0.35),
                          0 6px 14px -6px rgba(74, 45, 26, 0.22);
  box-shadow: var(--mbc-shadow-card);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
          backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(var(--mbc-glass-blur)) saturate(1.05);
          backdrop-filter: blur(var(--mbc-glass-blur)) saturate(1.05);
  overflow: hidden;
  isolation: isolate;
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1),
              box-shadow 200ms cubic-bezier(.2, .8, .2, 1),
              filter 200ms cubic-bezier(.2, .8, .2, 1);
  transition: transform var(--mbc-t-hover) var(--mbc-easing),
              box-shadow var(--mbc-t-hover) var(--mbc-easing),
              filter var(--mbc-t-hover) var(--mbc-easing);
  min-height: 320px;
}

/* Glassy inner highlight arc — this is what makes the surface look 3-D */
.mbc-dim-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 55% at 50% -10%, rgba(255,253,240,0.75) 0%, transparent 60%),
    radial-gradient(80% 40% at 100% 100%, rgba(196,141,50,0.30) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Golden ring gleam on the border */
.mbc-dim-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    rgba(255,253,240,0.9) 0%,
    rgba(196,141,50,0.15) 40%,
    rgba(122,74,18,0.6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.mbc-dim-card > * { position: relative; z-index: 2; }

.mbc-dim-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -22px rgba(74, 45, 26, 0.45),
                          0 10px 18px -8px rgba(74, 45, 26, 0.28);
  box-shadow: var(--mbc-shadow-hover);
  filter: brightness(1.02);
}
.mbc-dim-card:active { transform: translateY(-1px); }
.mbc-dim-card[data-active="true"] {
  box-shadow: 0 0 0 3px rgba(196, 141, 50, 0.55),
                          0 12px 26px -10px rgba(122, 74, 18, 0.5);
  box-shadow: var(--mbc-glow-active);
}

/* Accent variants — same shape/size, only tint changes */
.mbc-dim-card--store {
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, #F1DEA8 0%, #E8C882 45%, #C48D32 100%);
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, var(--mbc-champagne) 0%, var(--mbc-gold-300) 45%, var(--mbc-gold-500) 100%);
}
.mbc-dim-card--pricing {
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, #F7EAC7 0%, #D8AC5A 45%, #9B6A16 100%);
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, var(--mbc-cream) 0%, var(--mbc-gold-400) 45%, var(--mbc-gold-600) 100%);
}
.mbc-dim-card--profile {
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, #FBF3DE 0%, #E8C882 55%, #5E2E5A 100%);
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, var(--mbc-ivory) 0%, var(--mbc-gold-300) 55%, var(--mbc-plum-soft) 100%);
  color: #FBF3DE;
  color: var(--mbc-ivory);
}
.mbc-dim-card--logout {
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, #FBF3DE 0%, #E8C882 45%, #C48D32 100%);
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, rgba(255,253,240,0.20) 40%, transparent 100%),
    linear-gradient(160deg, var(--mbc-ivory) 0%, var(--mbc-gold-300) 45%, var(--mbc-gold-500) 100%);
}

/* Card typography — inherits from tokens */
.mbc-dim-card h3, .mbc-dim-card .mbc-dim-title {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-family: var(--mbc-font-serif);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-size: var(--mbc-fs-title);
  font-weight: 700;
  font-weight: var(--mbc-fw-strong);
  line-height: 1.2;
  margin: 0 0 0.35rem;
}
.mbc-dim-card p, .mbc-dim-card .mbc-dim-body {
  font-size: 0.925rem;
  font-size: var(--mbc-fs-body);
  line-height: 1.55;
  color: inherit;
  opacity: 0.9;
}

/* ── Liquid Gold button ──────────────────────────────────────── */
.mbc-liquid-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border-radius: var(--mbc-radius-pill);
  font-weight: 700;
  font-weight: var(--mbc-fw-strong);
  font-size: 0.925rem;
  font-size: var(--mbc-fs-label);
  color: #3A1F3D;
  color: var(--mbc-plum);
  text-decoration: none;
  border: 1px solid rgba(196, 141, 50, 0.55);
  border: 1px solid var(--mbc-border-hi);
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, transparent 60%),
    linear-gradient(160deg, #E8C882 0%, #C48D32 100%);
  background:
    linear-gradient(135deg, rgba(255,253,240,0.85) 0%, transparent 60%),
    linear-gradient(160deg, var(--mbc-gold-300) 0%, var(--mbc-gold-500) 100%);
  box-shadow: 0 10px 22px -12px rgba(122,74,18,0.55),
              inset 0 0 0 1px rgba(255,253,240,0.4);
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1),
              box-shadow 200ms cubic-bezier(.2, .8, .2, 1);
  transition: transform var(--mbc-t-hover) var(--mbc-easing),
              box-shadow var(--mbc-t-hover) var(--mbc-easing);
  cursor: pointer;
}
.mbc-liquid-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(122,74,18,0.7); }
.mbc-liquid-btn:active { transform: translateY(0); }

/* ── Spark layer — reusable sparkle canvas ───────────────────── */
.mbc-spark-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0.85;
  opacity: var(--mbc-sparkle-opacity);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 215, 128, 0.85) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 22%, rgba(255, 230, 160, 0.75) 0 2px, transparent 3px),
    radial-gradient(circle at 26% 72%, rgba(255, 210, 120, 0.8) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255, 225, 150, 0.7) 0 2px, transparent 3px);
  background-repeat: no-repeat;
  animation: mbc-spark-drift 6s ease-in-out infinite alternate;
  animation: mbc-spark-drift var(--mbc-t-spark) ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes mbc-spark-drift {
  0%   { opacity: 0.55; transform: translate3d(0,0,0); }
  50%  { opacity: 1;    transform: translate3d(0.6vw, -0.4vw, 0); }
  100% { opacity: 0.65; transform: translate3d(-0.4vw, 0.5vw, 0); }
}

/* ─────────────────────────────────────────────────────────────
   Iter 91 — Unified Top Navigation ("MegaNav") for the app.
   Restores grouped, discoverable nav: Product · Services ·
   Support · Privacy & Safety · Admin. Rounded, premium gold,
   glass-lift. No right-side sidebar. Mobile: full-screen sheet.
   ───────────────────────────────────────────────────────────── */
.meganav-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2000;
  background: linear-gradient(180deg, rgba(250, 247, 240, 0.98), rgba(251, 243, 222, 0.94));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 164, 92, 0.35);
  padding: 12px 16px;
  border-radius: 0 0 clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px);
  box-shadow: 0 8px 20px -12px rgba(24, 33, 47, 0.16);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme="dark"] .meganav-header {
  background: linear-gradient(180deg, rgba(27, 15, 34, 0.94), rgba(36, 23, 42, 0.92));
  border-bottom-color: rgba(216, 180, 106, 0.30);
}
.meganav-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.meganav-row-brand { justify-content: space-between; flex-wrap: wrap; }
.meganav-row-groups { flex-wrap: wrap; gap: 8px; padding-top: 4px; }
/* Tailwind `hidden md:flex` on the groups row must win over `.meganav-row` on
   mobile. `.meganav-row` above always sets `display:flex`, so we explicitly
   restore the hidden behavior at <768px. */
@media (max-width: 767.98px) {
  .meganav-row-groups.hidden { display: none !important; }
}

.meganav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 249, 232, 0.85);
  border: 1px solid rgba(201, 164, 92, 0.45);
  color: #18212F;
  color: var(--brand-ink, #18212f);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}
.meganav-group-btn:hover {
  background: rgba(246, 234, 203, 1);
  box-shadow: 0 4px 10px -4px rgba(185, 138, 50, 0.35);
  transform: translateY(-1px);
}
.meganav-group-btn-active {
  background: linear-gradient(140deg, #F6EACB, #E9D28C);
  border-color: rgba(185, 138, 50, 0.6);
  color: #18212F;
  color: var(--brand-plum, #4A1E4C);
}
[data-theme="dark"] .meganav-group-btn {
  background: rgba(58, 41, 66, 0.85);
  color: #F6EACB;
  border-color: rgba(216, 180, 106, 0.4);
}
[data-theme="dark"] .meganav-group-btn:hover { background: rgba(74, 30, 76, 0.95); }

.meganav-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  max-width: 320px;
  background-color: #FFFDF6;
  background-image: linear-gradient(155deg, rgba(255, 253, 246, 1), rgba(246, 234, 203, 1));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(185, 138, 50, 0.55);
  border-radius: 22px;
  box-shadow:
    0 24px 55px -18px rgba(58, 31, 45, 0.42),
    0 8px 20px -6px rgba(185, 138, 50, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 10px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: meganav-fade-in 180ms ease;
  isolation: isolate;
}
[data-theme="dark"] .meganav-panel {
  background-color: #24172A;
  background-image: linear-gradient(155deg, rgba(36, 23, 42, 1), rgba(58, 41, 66, 1));
  border-color: rgba(216, 180, 106, 0.55);
}
@keyframes meganav-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.meganav-panel-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #18212F;
  color: var(--brand-ink, #18212f);
  font-size: 14px;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}
.meganav-panel-item:hover {
  background: rgba(246, 234, 203, 0.9);
  transform: translateX(2px);
}
[data-theme="dark"] .meganav-panel-item { color: #F6EACB; }
[data-theme="dark"] .meganav-panel-item:hover { background: rgba(74, 30, 76, 0.6); }

.meganav-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(201, 164, 92, 0.35);
  color: #18212F;
  color: var(--brand-ink, #18212f);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.meganav-inline-link:hover {
  background: rgba(246, 234, 203, 0.8);
  transform: translateY(-1px);
}
.meganav-logout {
  border-color: rgba(155, 45, 90, 0.45);
  color: #7A1F4A;
}
.meganav-logout:hover { background: rgba(155, 45, 90, 0.08); }
[data-theme="dark"] .meganav-inline-link { color: #F6EACB; border-color: rgba(216, 180, 106, 0.35); }

/* Mobile: hamburger toggle + sheet */
.meganav-mobile-toggle {
  padding: 10px;
  border-radius: 999px;
  background: rgba(246, 234, 203, 0.9);
  border: 1px solid rgba(201, 164, 92, 0.45);
  color: #18212F;
  color: var(--brand-ink, #18212f);
  cursor: pointer;
}
.meganav-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(24, 33, 47, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  display: flex;
  justify-content: flex-end;
}
.meganav-mobile-sheet {
  width: min(92vw, 380px);
  height: 100%;
  background: linear-gradient(180deg, #FBF3DE, #F6EACB);
  padding: 18px 16px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,0.35);
}
[data-theme="dark"] .meganav-mobile-sheet {
  background: linear-gradient(180deg, #1B0F22, #3A2942);
  color: #F6EACB;
}
.meganav-mobile-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(185, 138, 50, 0.3);
}
.meganav-mobile-close {
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(185, 138, 50, 0.4);
  cursor: pointer;
}
.meganav-mobile-selectors {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.meganav-mobile-block {
  border: 1px solid rgba(185, 138, 50, 0.3);
  border-radius: 18px;
  background: rgba(255, 253, 246, 0.75);
  overflow: hidden;
}
[data-theme="dark"] .meganav-mobile-block { background: rgba(36, 23, 42, 0.7); }
.meganav-mobile-group-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  font-weight: 600;
  font-size: 14px;
  color: #18212F;
  color: var(--brand-ink, #18212f);
  cursor: pointer;
}
[data-theme="dark"] .meganav-mobile-group-btn { color: #F6EACB; }
.meganav-mobile-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 12px;
}
.meganav-mobile-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #18212F;
  color: var(--brand-ink, #18212f);
  font-size: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.meganav-mobile-item:hover { background: rgba(246, 234, 203, 0.75); }
[data-theme="dark"] .meganav-mobile-item { color: #F6EACB; }
[data-theme="dark"] .meganav-mobile-item:hover { background: rgba(74, 30, 76, 0.55); }
.meganav-mobile-item-primary { background: rgba(246, 234, 203, 0.6); font-weight: 600; }
.meganav-mobile-item-danger { color: #7A1F4A; }
.meganav-mobile-footer {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(185, 138, 50, 0.3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── LoggedInFooter — grouped compliance-heavy footer ─────────── */
.loggedin-footer {
  margin: 32px 16px 24px;
  padding: 28px 22px;
  border-radius: clamp(20px, 2.5vw, 32px);
  background: linear-gradient(155deg, rgba(255, 253, 246, 0.94), rgba(246, 234, 203, 0.9));
  border: 1px solid rgba(185, 138, 50, 0.35);
  box-shadow: 0 20px 50px -30px rgba(24, 33, 47, 0.22);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
[data-theme="dark"] .loggedin-footer {
  background: linear-gradient(155deg, rgba(36, 23, 42, 0.94), rgba(58, 41, 66, 0.88));
  color: #F6EACB;
  border-color: rgba(216, 180, 106, 0.3);
}
.loggedin-footer-brand { max-width: 640px; }
.loggedin-footer-columns {
  display: grid;
  grid-gap: 20px;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.loggedin-footer-col-title {
  font-family: "Playfair Display", "Cormorant Garamond", serif;
  font-size: 15px;
  font-weight: 600;
  color: #18212F;
  color: var(--brand-plum, #4A1E4C);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
[data-theme="dark"] .loggedin-footer-col-title { color: #F1DEA8; }
.loggedin-footer-column ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.loggedin-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  color: #18212F;
  color: var(--brand-ink, #18212f);
  font-size: 13px;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}
.loggedin-footer-link:hover {
  background: rgba(246, 234, 203, 0.7);
  transform: translateX(2px);
}
[data-theme="dark"] .loggedin-footer-link { color: #F6EACB; }
[data-theme="dark"] .loggedin-footer-link:hover { background: rgba(74, 30, 76, 0.55); }
.loggedin-footer-selectors { display: flex; gap: 10px; flex-wrap: wrap; }
.loggedin-footer-legal-note {
  font-size: 11.5px;
  color: rgba(24, 33, 47, 0.65);
  line-height: 1.6;
  padding-top: 12px;
  border-top: 1px solid rgba(185, 138, 50, 0.28);
}
[data-theme="dark"] .loggedin-footer-legal-note { color: rgba(246, 234, 203, 0.7); border-top-color: rgba(216, 180, 106, 0.22); }

/* Prevent any legacy right-side sidebar from rendering. If a stale
   .app-sidebar-right shows up somewhere, it collapses harmlessly. */
.app-sidebar-right { display: none !important; }

/* ── Prominent gold "Book Appointment" CTA in the mega-nav ─────────── */
.meganav-book-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #2A0F2E;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(135deg, #FCE4A2 0%, #E9C876 45%, #C9A45C 100%);
  border: 1px solid rgba(155, 108, 32, 0.55);
  box-shadow:
    0 6px 14px -6px rgba(155, 108, 32, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  white-space: nowrap;
}
.meganav-book-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 10px 22px -8px rgba(155, 108, 32, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.meganav-book-cta:focus-visible {
  outline: 2px solid #7A1F4A;
  outline-offset: 2px;
}
.meganav-mobile-item-book {
  background: linear-gradient(135deg, #FCE4A2 0%, #E9C876 45%, #C9A45C 100%);
  color: #2A0F2E !important;
  font-weight: 600;
  border: 1px solid rgba(155, 108, 32, 0.5);
}
.meganav-anon-primary,
[data-testid$="anon-register"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  /* Iter 93 — enforce symmetric size with other header pills (.meganav-inline-link)
     Iter 145.10 — removed the `[data-testid$="-register"]` catch-all selector.
     It matched hero-cta-register on the marketing home hero and stripped the
     canonical .premium-control 56px pill down to a 38px header-sized pill. */
  padding: 8px 14px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  height: 38px !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
/* Iter 93 — Menu trigger, currency selector, language selector, theme selector
   share the exact same pill dimensions to avoid asymmetry in the header.
   Uses attribute-SUFFIX selectors so both plain and anon- prefixed variants
   (e.g. `anon-language-selector-trigger`) are covered. Iter 93 retest. */
[data-testid$="meganav-menu-open"],
[data-testid$="meganav-menu-close"],
[data-testid$="language-selector-trigger"],
[data-testid$="currency-selector-trigger"],
[data-testid$="theme-selector-trigger"],
[data-testid$="currency-selector-select"],
[data-testid$="theme-selector-select"],
[data-testid$="book-appointment"],
[data-testid$="book-appointment-cta"],
[data-testid$="dashboard-home"] {
  padding: 8px 14px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  height: 38px !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
/* Ensure any dropdown / popover / menu opened from the header sits ABOVE the
   page content (fixes text-overlap on marketing hero pages where headings were
   bleeding through the mega-menu panel — iter 93). */
.meganav-mega-panel,
.meganav-group-panel,
[data-testid="language-selector-popover"],
[data-testid$="-popover"] {
  z-index: 1500 !important;
}

/* ── Sticky mobile floating "Book Appointment" FAB fallback ─────────── */
.book-fab {
  position: fixed;
  right: 16px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #2A0F2E;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  background: linear-gradient(135deg, #FCE4A2 0%, #E9C876 45%, #C9A45C 100%);
  border: 1px solid rgba(155, 108, 32, 0.55);
  box-shadow: 0 12px 22px -8px rgba(24, 33, 47, 0.4);
}
@media (min-width: 768px) { .book-fab { display: none; } }

/* ── Spacing so page content clears the sticky mega-nav ─────────── */
.meganav-page-spacer { height: 12px; }
@media (max-width: 767.98px) { .meganav-page-spacer { height: 6px; } }

/* Any legacy sticky page-level header must not stack with .meganav-header.
   When the new mega-nav is on the page, force old page-level `.topbar` /
   `header.sticky` blocks (from Store, Pricing, Billing, Documents,
   Assessments, Messages, AI Companion, etc.) into normal flow so they no
   longer stack + overlap the sticky mega-nav.
   IMPORTANT: keep the z-index HIGHER than the hero section's z-1 so that
   any dropdown panel opened from inside this sub-header renders above
   the hero title + paragraph. The meganav sits at z-2000, so any value
   below that (we use 60) is safe from double-stacking. */
body:has(.meganav-header) .topbar,
body:has(.meganav-header) header.sticky,
body:has(.meganav-header) header.topbar,
body:has(.meganav-header) [data-testid="store-header"],
body:has(.meganav-header) [data-testid="pricing-header"] {
  position: relative !important;
  top: auto !important;
  z-index: 60 !important;
}

/* Also collapse leftover heavy visual chrome on the duplicated headers so
   they read as a slim page-title strip, not a second global nav. */
body:has(.meganav-header) [data-testid="store-header"] > div,
body:has(.meganav-header) [data-testid="pricing-header"] > div {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ── Iter 77 · Premium Star Promise Statement ─────────────────────── */
.star-promise {
  border-radius: clamp(20px, 2.2vw, 28px);
  background: linear-gradient(155deg, rgba(255, 253, 246, 0.96), rgba(246, 234, 203, 0.94));
  border: 1px solid rgba(185, 138, 50, 0.4);
  box-shadow:
    0 20px 45px -25px rgba(24, 33, 47, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 22px 22px;
}
[data-theme="dark"] .star-promise {
  background: linear-gradient(155deg, rgba(36, 23, 42, 0.94), rgba(58, 41, 66, 0.88));
  color: #F6EACB;
  border-color: rgba(216, 180, 106, 0.3);
}
.star-promise-hero { display: flex; flex-direction: column; gap: 8px; }
.star-promise-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 999px;
}
.star-promise-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #C9A45C;
  text-shadow: 0 1px 2px rgba(155, 108, 32, 0.35);
  filter: drop-shadow(0 1px 0 rgba(155, 108, 32, 0.15));
}
.star-promise-stars-row {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #C9A45C;
  filter: drop-shadow(0 1px 0 rgba(155, 108, 32, 0.15));
  margin-bottom: 4px;
}
.star-promise-lead {
  font-family: "Playfair Display", "Cormorant Garamond", serif;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  color: #18212F;
  color: var(--brand-plum, #4A1E4C);
  line-height: 1.5;
}
[data-theme="dark"] .star-promise-lead { color: #F1DEA8; }
.star-promise-body { font-size: 14px; color: #18212F; color: var(--brand-ink, #18212f); line-height: 1.6; }
[data-theme="dark"] .star-promise-body { color: #F6EACB; }
.star-promise-honesty {
  font-size: 12.5px;
  color: rgba(24, 33, 47, 0.7);
  border-top: 1px dashed rgba(185, 138, 50, 0.3);
  padding-top: 8px;
  margin-top: 4px;
  line-height: 1.6;
}
[data-theme="dark"] .star-promise-honesty { color: rgba(246, 234, 203, 0.72); }

/* ── Iter 78 · Fertile Day mini-card on Dashboard ──────────────────── */
.fertile-day-card {
  border-radius: clamp(18px, 2vw, 24px);
  padding: 16px 18px;
  background: linear-gradient(155deg, rgba(255, 253, 246, 0.96), rgba(246, 234, 203, 0.92));
  border: 1px solid rgba(185, 138, 50, 0.4);
  box-shadow: 0 12px 30px -18px rgba(24, 33, 47, 0.24);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme="dark"] .fertile-day-card {
  background: linear-gradient(155deg, rgba(36, 23, 42, 0.95), rgba(58, 41, 66, 0.88));
  color: #F6EACB;
  border-color: rgba(216, 180, 106, 0.3);
}
.fertile-day-card-empty { padding: 12px 16px; }
.fertile-day-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fertile-day-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Playfair Display", "Cormorant Garamond", serif;
  font-size: 18px;
  font-weight: 600;
  color: #18212F;
  color: var(--brand-plum, #4A1E4C);
}
[data-theme="dark"] .fertile-day-card-title { color: #F1DEA8; }
.fertile-day-card-days {
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FCE4A2 0%, #E9C876 45%, #C9A45C 100%);
  color: #2A0F2E;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid rgba(155, 108, 32, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.fertile-day-card-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Playfair Display", "Cormorant Garamond", serif;
  font-size: 22px;
  color: #18212F;
  color: var(--brand-plum, #4A1E4C);
}
[data-theme="dark"] .fertile-day-card-date { color: #F6EACB; }
.fertile-day-card-window {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 4px 12px;
  gap: 4px 12px;
  font-size: 12.5px;
  color: #18212F;
  color: var(--brand-ink, #18212f);
}
[data-theme="dark"] .fertile-day-card-window { color: #F6EACB; }
.fertile-day-card-note {
  font-size: 11.5px;
  color: rgba(24, 33, 47, 0.7);
  line-height: 1.5;
  padding-top: 6px;
  border-top: 1px dashed rgba(185, 138, 50, 0.3);
}
[data-theme="dark"] .fertile-day-card-note { color: rgba(246, 234, 203, 0.72); border-top-color: rgba(216, 180, 106, 0.22); }
.fertile-day-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   Iter 96 — Liquid Gold sparkle CTA system
   -----------------------------------------------------------------------
   Purpose: elevate PREMIUM calls-to-action (pricing, checkout, course,
   consultation, retreat, dashboard primary actions, Golden Window, AI
   Companion, document upload/analyse, PWA install) with an elegant
   liquid-gold shimmer + subtle sparkle glow. NOT applied everywhere —
   only surfaces the user opts into via the .liquid-gold-cta class.

   Accessibility:
     - Respects prefers-reduced-motion (disables the shimmer sweep + glow
       pulse, keeps a static gold border so premium feel remains).
     - No flashing at high frequency (>3Hz avoided; slowest sweep is 2.4s).
     - Doesn't affect text legibility — text color pinned to brand-ink.
   ═══════════════════════════════════════════════════════════════════════ */
.liquid-gold-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(122, 81, 27, 0.6);
  color: #18212F;
  color: var(--brand-ink, #18212f);
  font-weight: 600;
  min-height: 56px;
  padding: 0 28px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.95), transparent 24%),
    linear-gradient(135deg,
      #fff4c6 0%,
      #f6d878 22%,
      #d8a93c 46%,
      #b98a32 70%,
      #f6d878 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -2px 10px rgba(122, 81, 27, 0.38),
    0 12px 26px rgba(122, 81, 27, 0.22),
    0 3px 0 rgba(122, 81, 27, 0.48);
  transform: translateY(0);
  transition:
    transform 0.22s cubic-bezier(.2,.9,.3,1.2),
    box-shadow 0.22s ease,
    filter 0.22s ease;
}
.liquid-gold-cta:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 12px rgba(122, 81, 27, 0.44),
    0 18px 34px rgba(122, 81, 27, 0.32),
    0 4px 0 rgba(122, 81, 27, 0.55);
}
.liquid-gold-cta:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 8px rgba(122, 81, 27, 0.4),
    0 4px 10px rgba(122, 81, 27, 0.22);
}
.liquid-gold-cta:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 0 6px rgba(185, 138, 50, 0.75),
    0 18px 34px rgba(122, 81, 27, 0.32);
}
/* Layer 1 — rotating conic light behind the button (the "liquid metal" feel) */
.liquid-gold-cta::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background:
    conic-gradient(from 180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.65) 12%,
      rgba(255, 224, 120, 0.85) 25%,
      transparent 45%,
      rgba(255, 255, 255, 0.45) 65%,
      transparent 85%);
  animation: liquid-gold-sweep 5.5s linear infinite;
  opacity: 0.55;
  pointer-events: none;
}
/* Layer 2 — diagonal shine sweep on top of the metal */
.liquid-gold-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.75) 42%,
    transparent 56%);
  transform: translateX(-130%);
  animation: liquid-gold-shine 3.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
.liquid-gold-cta > * { position: relative; z-index: 1; }

@keyframes liquid-gold-sweep {
  to { transform: rotate(360deg); }
}
@keyframes liquid-gold-shine {
  0%, 55% { transform: translateX(-130%); }
  75%     { transform: translateX(130%); }
  100%    { transform: translateX(130%); }
}

/* Ghost / secondary variant — same premium metal on a lighter surface */
.liquid-gold-cta-ghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 48px;
  padding: 0 22px;
  background: rgba(255, 249, 240, 0.9);
  color: #18212F;
  color: var(--brand-plum, #4A1E4C);
  border: 1px solid rgba(185, 138, 50, 0.55);
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 22px -14px rgba(185, 138, 50, 0.45);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.liquid-gold-cta-ghost:hover {
  transform: translateY(-1px);
  background: rgba(247, 222, 168, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 34px -18px rgba(185, 138, 50, 0.65);
}
.liquid-gold-cta-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 226, 156, 0.6) 48%,
    rgba(255, 226, 156, 0.85) 50%,
    rgba(255, 226, 156, 0.6) 52%,
    transparent 78%);
  transform: translateX(-130%);
  animation: liquid-gold-shine 5.4s ease-in-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
  opacity: 0.6;
}
.liquid-gold-cta-ghost > * { position: relative; z-index: 1; }

/* Reduced-motion — keep the elegant static gold surface, drop the animation */
@media (prefers-reduced-motion: reduce) {
  .liquid-gold-cta::before,
  .liquid-gold-cta::after,
  .liquid-gold-cta-ghost::before {
    animation: none !important;
    opacity: 0 !important;
  }
  .liquid-gold-cta,
  .liquid-gold-cta-ghost {
    transition: none !important;
  }
}
html[data-motion="reduced"] .liquid-gold-cta::before,
html[data-motion="reduced"] .liquid-gold-cta::after,
html[data-motion="reduced"] .liquid-gold-cta-ghost::before {
  animation: none !important;
  opacity: 0 !important;
}

/* High-contrast a11y — solid dark surface with visible gold border, no shimmer */
html[data-contrast="high"] .liquid-gold-cta,
html[data-contrast="high"] .liquid-gold-cta-ghost {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 2px solid #f5c542 !important;
}
html[data-contrast="high"] .liquid-gold-cta::before,
html[data-contrast="high"] .liquid-gold-cta::after,
html[data-contrast="high"] .liquid-gold-cta-ghost::before {
  display: none !important;
}

/* Ensure the primary "button-primary" class auto-inherits the metal system
   because that's how ~90% of premium CTAs are already coded across the app.
   This makes the upgrade blanket-safe without touching every JSX file. */
.button-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 56px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.9), transparent 22%),
    linear-gradient(135deg, #fff4c6 0%, #f6d878 22%, #d8a93c 48%, #b98a32 74%, #f6d878 100%) !important;
  border: 1px solid rgba(122, 81, 27, 0.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -2px 10px rgba(122, 81, 27, 0.35),
    0 10px 22px rgba(122, 81, 27, 0.22),
    0 2px 0 rgba(122, 81, 27, 0.45) !important;
  color: #3a2408 !important;
  transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease !important;
}
.button-primary:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 12px rgba(122, 81, 27, 0.42),
    0 16px 32px rgba(122, 81, 27, 0.30),
    0 3px 0 rgba(122, 81, 27, 0.50) !important;
}
.button-primary::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background:
    conic-gradient(from 180deg,
      transparent,
      rgba(255, 255, 255, 0.55),
      rgba(255, 224, 120, 0.75),
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  animation: liquid-gold-sweep 6.5s linear infinite;
  opacity: 0.5;
  pointer-events: none;
}
.button-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 42%,
    transparent 56%);
  transform: translateX(-130%);
  animation: liquid-gold-shine 4.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
.button-primary > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .button-primary::before,
  .button-primary::after { animation: none !important; opacity: 0 !important; }
}
html[data-motion="reduced"] .button-primary::before,
html[data-motion="reduced"] .button-primary::after {
  animation: none !important;
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Iter 97 — Symmetric Nav Chip System
   Standardize ALL nav chips (LoggedInMegaNav, headers, book-cta, inline-link)
   to the same 48px pill so the top bar reads as one intentional row.
   ═══════════════════════════════════════════════════════════════════════ */
.meganav-group-btn,
.meganav-inline-link,
.meganav-book-cta {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  line-height: 1;
  letter-spacing: 0.005em;
}
/* Iter 97-fix — normalize the anon Start Journey / Book Appointment / Dashboard
   CTAs to the same 48px pill height as sibling chips so the top-row is truly
   symmetric. Testing agent flagged these as 38px vs 48px. */
[data-testid="anon-book-appointment"],
[data-testid="anon-register"],
[data-testid="meganav-book-appointment-cta"],
[data-testid="meganav-dashboard-home"] {
  min-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
/* Level-1 CTAs (Pricing/Checkout/Hero) stay at 56px on dedicated content pages;
   inside the nav bar they follow the 48px chip rule above. */
main .liquid-gold-cta:not([data-testid^="meganav-"]):not([data-testid^="anon-"]) {
  min-height: 56px;
}

.meganav-group-btn > svg,
.meganav-inline-link > svg,
.meganav-book-cta > svg,
.meganav-mobile-toggle > svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}
.meganav-inline-link {
  background: rgba(255, 249, 240, 0.85);
  border: 1px solid rgba(185, 138, 50, 0.35);
}
.meganav-inline-link:hover {
  background: rgba(247, 222, 168, 0.9);
  border-color: rgba(185, 138, 50, 0.6);
}
/* Ensure the Book Appointment CTA gets the strong 3D liquid gold treatment */
.meganav-book-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(122, 81, 27, 0.6);
  color: #18212F;
  color: var(--brand-ink, #18212f);
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.9), transparent 22%),
    linear-gradient(135deg, #fff4c6 0%, #f6d878 22%, #d8a93c 48%, #b98a32 74%, #f6d878 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -2px 10px rgba(122, 81, 27, 0.35),
    0 10px 22px rgba(122, 81, 27, 0.22),
    0 2px 0 rgba(122, 81, 27, 0.45);
  transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}
.meganav-book-cta:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(1.03);
}
.meganav-book-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.7) 42%, transparent 56%);
  transform: translateX(-130%);
  animation: liquid-gold-shine 4.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
.meganav-book-cta > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .meganav-book-cta::after { animation: none !important; opacity: 0 !important; }
}

/* Menu panel — bump z-index so it never hides behind the hero on any page,
   add a subtle backdrop so overlap with hero text is visually intentional. */
.meganav-panel {
  z-index: 200 !important;
  box-shadow:
    0 24px 60px -18px rgba(24, 33, 47, 0.42),
    0 8px 20px -8px rgba(185, 138, 50, 0.45) !important;
}
.meganav-panel::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(24, 33, 47, 0.02);
  z-index: -1;
  pointer-events: none;
}

/* Standardize Language + Currency + Theme selector chips to match the 48px pill.
   Keeps their look consistent with nav-chip so the top-row reads symmetrically.
   NOTE: Currency/Theme are bare <label data-testid="...-selector"> elements, so
   matching the "-selector" suffix hits the real pill directly. Language is
   different — LanguageSelector wraps its <button> in an unstyled positioning
   <div data-testid="...-selector"> (needed for popover outside-click detection),
   so matching that bare suffix here was styling the WRAPPER div as its own
   pill (background/border/padding) around the button's own pill, producing a
   visible "pill inside a pill". Target the button's own "-trigger" testid
   instead so only the real control gets styled. */
[data-testid$="currency-selector"],
[data-testid$="theme-selector"],
[data-testid$="language-selector-trigger"] {
  min-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 8px !important;
  border: 1px solid rgba(185, 138, 50, 0.35) !important;
  background: rgba(255, 249, 240, 0.85) !important;
}

/* The marketing header (Menu / Language / Currency / Theme / Log In / Start
   Your Journey) mixes two unrelated pill systems: Menu+selectors resolve to
   ~48px via the rule above (and older per-widget height rules that predate
   it), while Log In / Start Your Journey render through the shared
   Premium3DControl pill, which is 56px everywhere else on the site. Rather
   than shrink Premium3DControl (used site-wide) or keep patching the older
   per-widget rules against each other, pin every pill in THIS header to the
   same 56px explicitly — scoped to premium-header only, so nothing outside
   this row is affected. */
[data-testid="premium-header"] [data-testid="premium-nav-compact-toggle"],
[data-testid="premium-header"] label[data-testid$="-selector"],
[data-testid="premium-header"] button[data-testid$="-selector-trigger"],
[data-testid="premium-header"] [data-testid="header-login"],
[data-testid="premium-header"] [data-testid="header-start-journey"] {
  height: 56px !important;
  min-height: 56px !important;
}

/* User email badge — the pre-Iter 97 dark-purple Badge is now replaced with
   an ivory/gold avatar-initial pill (`.meganav-user-pill`) that reuses the
   same data-testid. We intentionally do NOT hide the testid anymore —
   hiding it would collapse the visible avatar. The pill component itself
   only renders the first character in textContent, so the raw email never
   appears on screen. */

/* Compact avatar/initial pill (ivory + gold) that replaces the purple email pill. */
.meganav-user-pill {
  display: inline-flex;

/* Iter 100 — AI Concierge floating trigger pulse (draws attention softly
   the first time; disabled once the panel has opened). Reduced-motion honored. */
.concierge-pulse {
  animation: concierge-pulse-anim 2.6s ease-in-out infinite;
}
@keyframes concierge-pulse-anim {
  0%, 100% { box-shadow: 0 12px 26px rgba(122,81,27,.22), 0 3px 0 rgba(122,81,27,.48), 0 0 0 0 rgba(216, 180, 106, 0.75); }
  50%      { box-shadow: 0 12px 26px rgba(122,81,27,.22), 0 3px 0 rgba(122,81,27,.48), 0 0 0 16px rgba(216, 180, 106, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .concierge-pulse { animation: none !important; }
}
html[data-motion="reduced"] .concierge-pulse { animation: none !important; }

  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 249, 240, 0.9);
  border: 1px solid rgba(185, 138, 50, 0.55);
  color: #18212F;
  color: var(--brand-plum, #4A1E4C);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .meganav-user-pill {
  background: rgba(58, 41, 66, 0.9);
  color: #F6EACB;
  border-color: rgba(216, 180, 106, 0.4);
}

/* Iter 110 · Language flag grid — real SVG flags, never blurred. */
.language-flag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
}
.language-flag-button {
  position: relative;
  width: 100%;
  min-height: 60px;
  border-radius: 16px;
  border: 1px solid rgba(180, 135, 42, 0.28);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(30, 20, 10, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  padding: 6px;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.language-flag-button:hover {
  transform: translateY(-2px);
  border-color: rgba(202, 157, 62, 0.75);
  box-shadow: 0 12px 28px rgba(80, 55, 15, 0.16);
}
.language-flag-button--active {
  border: 2px solid #c99a2e;
  box-shadow: 0 0 0 3px rgba(201, 154, 46, 0.16), 0 12px 30px rgba(80, 55, 15, 0.18);
  background: #FFF9F0;
}
.language-flag-button .flag-icon-img {
  filter: none !important;
  image-rendering: auto;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────
   Iter 114 · PremiumCard 3D system
   -------------------------------------------------------------
   Applied globally to product / service / pricing cards. Uses a
   gold-rim border, gradient inner-shadow, subtle 3D tilt on hover,
   and a specular highlight ribbon. Respects prefers-reduced-motion.
   ───────────────────────────────────────────────────────────── */
.premium-card-3d,
[data-testid="premium-service-card"],
[data-testid^="pricing-card-"],
[data-testid="golden-window-demo-tile"],
[data-testid="partner-sync-card"],
.premium-service-card,
.pricing-card {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(196, 141, 50, 0.35);
  background: linear-gradient(160deg,
      rgba(255, 253, 240, 0.98) 0%,
      rgba(255, 245, 215, 0.98) 55%,
      rgba(247, 232, 195, 0.98) 100%);
  box-shadow:
    0 22px 44px -22px rgba(122, 81, 27, 0.35),
    0 6px 12px -6px rgba(122, 81, 27, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(196, 141, 50, 0.15);
  transform-style: preserve-3d;
  transition:
    transform 300ms cubic-bezier(.2,.9,.3,1),
    box-shadow 300ms ease,
    border-color 300ms ease;
  will-change: transform;
}
.premium-card-3d::before,
[data-testid="premium-service-card"]::before,
[data-testid^="pricing-card-"]::before,
[data-testid="golden-window-demo-tile"]::before,
[data-testid="partner-sync-card"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg,
      rgba(255, 255, 240, 0.65) 0%,
      transparent 32%,
      transparent 70%,
      rgba(231, 191, 169, 0.18) 100%);
  mix-blend-mode: soft-light;
  z-index: 1;
}
.premium-card-3d:hover,
[data-testid="premium-service-card"]:hover,
[data-testid^="pricing-card-"]:hover,
[data-testid="golden-window-demo-tile"]:hover,
[data-testid="partner-sync-card"]:hover {
  transform: perspective(1200px) translateY(-4px) rotateX(1.5deg) rotateY(-1.5deg);
  box-shadow:
    0 34px 60px -24px rgba(122, 81, 27, 0.45),
    0 10px 18px -6px rgba(122, 81, 27, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(196, 141, 50, 0.22);
  border-color: rgba(196, 141, 50, 0.55);
}
/* Ensure content sits above the pseudo highlight ribbon. */
.premium-card-3d > *,
[data-testid="premium-service-card"] > *,
[data-testid^="pricing-card-"] > *,
[data-testid="golden-window-demo-tile"] > *,
[data-testid="partner-sync-card"] > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .premium-card-3d,
  [data-testid="premium-service-card"],
  [data-testid^="pricing-card-"] { transition: none !important; }
  .premium-card-3d:hover,
  [data-testid="premium-service-card"]:hover,
  [data-testid^="pricing-card-"]:hover { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Iter 115 · Zero-gap homepage banner + language selector always-on-top
   ───────────────────────────────────────────────────────────── */
html, body, #root { margin: 0 !important; padding: 0 !important; }
[data-testid="premium-home"] {
  padding: 0 !important;
  margin: 0 !important;
}
[data-testid="premium-home"] > .mbc-banner-logo-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Force banner wrap to be the very first painted element with no gap. */
[data-testid="premium-home"] > .skip-to-content ~ .mbc-banner-logo-wrap,
[data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type {
  margin-top: 0 !important;
}
/* Language selector popover and backdrop MUST always be on top of
   every admin panel / login form / modal in the app. */
[data-testid$="language-selector-popover"] { z-index: 999999 !important; }
[data-testid$="language-selector-backdrop"] { z-index: 999998 !important; }
[data-testid$="language-selector-trigger"] { position: relative; z-index: 100 !important; }

/* ─────────────────────────────────────────────────────────────
   Iter 116 · Full-bleed banner + universal 3D cards everywhere
   ───────────────────────────────────────────────────────────── */

/* 1. Force banner to touch top edge and span full viewport width. */
.mbc-banner-logo-wrap {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  height: clamp(220px, 32vw, 380px) !important;
}
.mbc-banner-logo-wrap > a { display: block; width: 100%; height: 100%; margin: 0; padding: 0; }
[data-testid="brand-logo-banner"],
.mbc-banner-logo-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Kill body / root padding that pushes the banner down. */
body > #root > * { padding-top: 0 !important; margin-top: 0 !important; }

/* 2. Universal 3D card system — apply the premium 3D treatment to
      every product / service / pillar / marketing card across the app
      + website with a single global selector list. */
[data-testid^="service-card-"],
[data-testid^="pillar-card-"],
[data-testid^="feature-card-"],
[data-testid^="benefit-card-"],
[data-testid^="testimonial-card-"],
[data-testid^="course-card-"],
[data-testid^="consult-card-"],
[data-testid^="retreat-card-"],
[data-testid$="-card"]:not(.premium-tier-card),
.marketing-card,
.service-card,
.pillar-card {
  position: relative;
  isolation: isolate;
  /* Iter 145.17 — luminous premium 3D card. Retired the gold-tinted card
     gradient (which blended into the gold page bg making cards look flat).
     Now cards are near-white pearl with a whisper of champagne, a thin
     luminous gold border, and MULTI-LAYER shadow: soft outer diffuse +
     tight rim + inset top-light highlight + inset bottom rose-gold rim.
     Result: every card visibly floats above the page. */
  border: 1px solid rgba(216, 169, 60, 0.42) !important;
  background: linear-gradient(160deg,
      rgba(255, 255, 253, 0.98) 0%,
      rgba(255, 251, 235, 0.98) 55%,
      rgba(252, 244, 220, 0.98) 100%) !important;
  box-shadow:
    0 30px 60px -22px rgba(154, 112, 28, 0.28),
    0 12px 24px -12px rgba(154, 112, 28, 0.18),
    0 2px 6px -2px rgba(154, 112, 28, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(231, 191, 169, 0.22) !important;
  transform-style: preserve-3d;
  transition:
    transform 300ms cubic-bezier(.2,.9,.3,1),
    box-shadow 300ms ease,
    border-color 300ms ease !important;
  will-change: transform;
  border-radius: 20px !important;
}
[data-testid^="service-card-"]::before,
[data-testid^="pillar-card-"]::before,
[data-testid^="feature-card-"]::before,
[data-testid^="benefit-card-"]::before,
[data-testid^="course-card-"]::before,
[data-testid^="consult-card-"]::before,
[data-testid^="retreat-card-"]::before,
[data-testid$="-card"]::before,
.marketing-card::before,
.service-card::before,
.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg,
      rgba(255, 255, 240, 0.65) 0%,
      transparent 32%,
      transparent 70%,
      rgba(231, 191, 169, 0.18) 100%);
  mix-blend-mode: soft-light;
  z-index: 1;
}
[data-testid^="service-card-"]:hover,
[data-testid^="pillar-card-"]:hover,
[data-testid^="feature-card-"]:hover,
[data-testid^="benefit-card-"]:hover,
[data-testid^="course-card-"]:hover,
[data-testid^="consult-card-"]:hover,
[data-testid^="retreat-card-"]:hover,
[data-testid$="-card"]:hover,
.marketing-card:hover,
.service-card:hover,
.pillar-card:hover {
  transform: perspective(1200px) translateY(-4px) rotateX(1.5deg) rotateY(-1.5deg);
  box-shadow:
    /* Iter 145.18 — polished-metal top rim reflection on hover.
       Two-layer inset near the top edge simulates light catching on the
       upper lip of a real polished-gold surface as the cursor enters. */
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    inset 0 2px 4px -2px rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(231, 191, 169, 0.32),
    0 40px 72px -22px rgba(154, 112, 28, 0.36),
    0 16px 28px -10px rgba(154, 112, 28, 0.22),
    0 3px 8px -2px rgba(154, 112, 28, 0.14) !important;
  border-color: rgba(216, 169, 60, 0.60) !important;
}
/* Ensure content sits above the pseudo highlight ribbon. */
[data-testid^="service-card-"] > *,
[data-testid^="pillar-card-"] > *,
[data-testid$="-card"]:not(.premium-tier-card) > *,
.marketing-card > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  [data-testid^="service-card-"],
  [data-testid^="pillar-card-"],
  [data-testid$="-card"],
  .marketing-card { transition: none !important; }
  [data-testid^="service-card-"]:hover,
  [data-testid^="pillar-card-"]:hover,
  [data-testid$="-card"]:hover,
  .marketing-card:hover { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Iter 117 · Feminine rounded banner + zero-top-gap.
   Overrides Iter 116 edge-to-edge attempt.
   -------------------------------------------------------------
   Requirements from the founder:
   • rounded corners (feminine, elegant, premium)
   • absolutely no space between the top of the page and the banner
   • full logo AND motto always visible (nothing cropped)
   • everything symmetric
   ───────────────────────────────────────────────────────────── */
html, body, #root { margin: 0 !important; padding: 0 !important; }
body > #root > *:first-child,
body > #root > *:first-child > *:first-child { margin-top: 0 !important; padding-top: 0 !important; }

.mbc-banner-logo-wrap {
  /* Reset the Iter 116 full-bleed attempt. */
  position: relative !important;
  left: auto !important;
  transform: none !important;
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;      /* zero top-margin, symmetric horizontally */
  padding: 0 !important;
  height: auto !important;         /* let the image dictate height so nothing crops */
  aspect-ratio: 16 / 6 !important;
  border-radius: 32px !important;  /* feminine rounded corners */
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: 0 26px 60px -32px rgba(122, 81, 27, 0.35) !important;
}
.mbc-banner-logo-wrap > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Show the ENTIRE logo + motto (no crop). `object-fit: contain` keeps the
   full image visible; `object-position: center` centres it inside the
   16:6 aspect frame. */
[data-testid="brand-logo-banner"],
.mbc-banner-logo-wrap img,
.mbc-banner-logo,
.hero-banner-logo,
.sacred-origin-banner-logo,
[data-testid="brand-logo-banner"].mbc-banner-fill {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Kill any inherited top padding on the shell wrappers. */
.marketing-shell,
.app-shell-luxury,
[data-testid="premium-home"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Mobile — keep the same rounded shape, slightly smaller radius. */
@media (max-width: 640px) {
  .mbc-banner-logo-wrap { border-radius: 24px !important; aspect-ratio: 16 / 7 !important; }
  [data-testid="brand-logo-banner"],
  .mbc-banner-logo-wrap img { border-radius: 24px !important; }
}

/* Iter 117 · Fine-tuning — remove top gap for real + show FULL banner. */
[data-testid="premium-home"] {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
[data-testid="premium-home"] > .mbc-banner-logo-wrap {
  margin-top: 0 !important;
  /* Let the natural image aspect drive height so the FULL Sacred Origin
   * artwork (tree + SACRED ORIGIN text + FERTILITY · LOVE · LEGACY +
   * "WHERE LIFE BEGINS WITH LOVE" motto) is ALWAYS visible. No crop. */
  aspect-ratio: auto !important;
  height: auto !important;
}
[data-testid="premium-home"] > .mbc-banner-logo-wrap img {
  /* Iter 123 P0 — Was contain (empty gold sides). Switched to cover
     so banner truly fills the box; canonical rule at end owns sizing. */
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}
/* Kill the accessibility skip-link's vertical footprint if it briefly
 * paints during layout. */
.skip-to-content { position: absolute !important; top: -9999px !important; left: -9999px !important; }
.skip-to-content:focus { top: 12px !important; left: 12px !important; }

/* ─────────────────────────────────────────────────────────────
   Iter 118 · Force-zero space between top of page and banner.
   Brave / Chromium: the residual space came from an inherited
   `min-height`/`padding` on the app-shell container. We now use
   an aggressive negative margin so the banner ALWAYS pins to y=0.
   ───────────────────────────────────────────────────────────── */
[data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type,
[data-testid="premium-home"] .mbc-banner-logo-wrap:first-of-type {
  margin-top: -8px !important;
}
/* Push the banner up under the Accessibility button so nothing
   sits above it. The Accessibility button is fixed and won't move. */
.mbc-banner-logo-wrap { position: relative !important; top: 0 !important; z-index: 2 !important; }
/* Neutralise the .app-shell-luxury::before pseudo watermark's
   vertical footprint if the browser paints it as inline. */
.app-shell-luxury::before,
.app-shell-luxury::after,
.marketing-shell::before,
.marketing-shell::after { content: none !important; }
/* Kill any leftover padding on the marketing shell root itself. */
.app-shell,
.marketing-shell,
.app-shell-luxury { padding: 0 !important; margin: 0 !important; }

/* ═══════════════════════════════════════════════════════════════
   Iter 120 · ZERO gap + 3D buttons + universal sparkles
   Approved by the founder to override WCAG-positioning tradition:
   Accessibility control now floats bottom-right, so the banner
   can touch the very top of the viewport.
   ═══════════════════════════════════════════════════════════════ */

/* 1) Move the Accessibility panel trigger to a floating corner pill
      so it no longer reserves vertical space above the banner. */
/* Iter 154: SEPARATE the two floating widgets by moving Accessibility to the
   bottom-LEFT corner. Previously both were on the right (Concierge at
   right/20 + Accessibility above it at bottom/96) which made the concierge
   CHAT panel (which opens at bottom-24 right-5, expanding upward) visually
   overlap with the Accessibility pill. Splitting them left/right kills
   that overlap permanently. */
[data-testid="accessibility-panel-trigger"],
.accessibility-launcher,
button[aria-label*="Accessibility" i],
button[data-testid*="accessibility" i][data-testid*="launcher"],
button[data-testid*="accessibility" i][data-testid*="trigger"] {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  top: auto !important;
  right: auto !important;
  z-index: 9997 !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px -8px rgba(122, 81, 27, 0.55) !important;
}
@media (max-width: 640px) {
  [data-testid="accessibility-panel-trigger"],
  .accessibility-launcher,
  button[aria-label*="Accessibility" i],
  button[data-testid*="accessibility" i][data-testid*="launcher"],
  button[data-testid*="accessibility" i][data-testid*="trigger"] {
    /* Iter 154 — on narrow screens keep the pill pinned to the bottom-left
       corner with a slightly larger safe-area inset so it never covers
       primary CTAs (Book Appointment / Start Your Journey) sitting at the
       bottom of the viewport. */
    bottom: 20px !important;
    left: 14px !important;
    right: auto !important;
  }
}

/* 2) Force the banner wrap to touch the very top of the viewport.
      Nothing above it, ever. */
.mbc-banner-logo-wrap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
[data-testid="premium-home"],
[data-testid="dashboard-root"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
[data-testid="premium-home"] > *:not(.mbc-banner-logo-wrap),
[data-testid="dashboard-root"] > *:not(.mbc-banner-logo-wrap) {
  /* Everything except the banner sits below it; the banner itself
     is the first painted block. */
}
[data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type,
[data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type {
  position: relative !important;
  top: 0 !important;
  z-index: 3 !important;
  margin: 0 auto !important;
  margin-top: 0 !important;
}

/* 3) Universal 3D buttons — every <button>, [role=button], and .btn
      / Button-shadcn variant now gets a subtle 3D lift + gold ring +
      soft-light highlight ribbon on hover. */
button,
[role="button"],
.btn,
.button-primary,
.button-secondary,
[data-testid$="-btn"],
[data-testid$="-button"] {
  position: relative;
  transition:
    transform 220ms cubic-bezier(.2,.9,.3,1),
    box-shadow 220ms ease,
    filter 220ms ease !important;
  will-change: transform;
}
button:not(:disabled):hover,
[role="button"]:not([aria-disabled="true"]):hover,
.btn:not(:disabled):hover,
[data-testid$="-btn"]:not(:disabled):hover,
[data-testid$="-button"]:not(:disabled):hover {
  transform: perspective(700px) translateY(-2px) translateZ(2px) !important;
  box-shadow:
    0 12px 26px -12px rgba(122, 81, 27, 0.55),
    0 4px 8px -4px rgba(122, 81, 27, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(196, 141, 50, 0.25) !important;
  filter: brightness(1.03) saturate(1.05);
}
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: perspective(700px) translateY(1px) translateZ(-1px) !important;
  filter: brightness(0.98);
}
@media (prefers-reduced-motion: reduce) {
  button, [role="button"], .btn { transition: none !important; }
  button:hover, [role="button"]:hover, .btn:hover { transform: none !important; }
}

/* 4) 3D on ANY section wrapper — when a user clicks a section
      identified by common selectors, the whole card lifts. */
section.premium-card-3d, section[data-testid$="-section"] {
  transition: transform 300ms ease, box-shadow 300ms ease;
}
section[data-testid$="-section"]:hover {
  transform: perspective(1400px) translateY(-3px) rotateX(0.8deg);
  box-shadow: 0 30px 60px -30px rgba(122, 81, 27, 0.45);
}

/* 5) Extra sparkle bloom under every click — the ClickSparkleLayer
      mounted at root emits particles at (x, y). Boost its opacity
      + spread so the sparkle is unmistakably present. */
.click-sparkle,
.click-sparkle-particle {
  opacity: 0.95 !important;
  filter: drop-shadow(0 0 6px rgba(255, 232, 168, 0.85));
}

/* ═══════════════════════════════════════════════════════════════
   Iter 121 · Big full-width banner with rounded BOTTOM corners.
   The banner fills the entire browser width (touches left + right
   edges) but has elegant rounded corners at the bottom-left and
   bottom-right so it feels feminine and premium, not sharp.
   ═══════════════════════════════════════════════════════════════ */
[data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type,
[data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type,
.mbc-banner-logo-wrap {
  width: 100vw !important;
  max-width: none !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
  height: auto !important;
  box-shadow: 0 30px 60px -34px rgba(122, 81, 27, 0.45) !important;
  position: relative !important;
  top: 0 !important;
}
[data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type img,
[data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type img,
.mbc-banner-logo-wrap img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  display: block !important;
}
@media (max-width: 640px) {
  .mbc-banner-logo-wrap,
  [data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type,
  [data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type {
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }
  .mbc-banner-logo-wrap img {
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }
}

/* Iter 121 finalise — kill whitespace / line-height ghost above the banner img. */
.mbc-banner-logo-wrap,
.mbc-banner-logo-wrap > a,
.mbc-banner-logo-wrap > * { line-height: 0 !important; font-size: 0 !important; }
.mbc-banner-logo-wrap img { line-height: 0 !important; font-size: 0 !important; vertical-align: top !important; }

/* ═══════════════════════════════════════════════════════════════
   Iter 123 · Smaller realistic banner + remove ALL top watermarks
   ═══════════════════════════════════════════════════════════════ */

/* 1) Kill EVERY watermark that could paint above/inside the banner. */
[data-testid="original-logo-watermark-global"],
[data-testid="liquid-gold-watermark-global"],
.original-logo-watermark--background,
.liquid-gold-watermark--background {
  display: none !important;
}
/* Kill any inline pseudo watermarks on the shells. */
.app-shell-luxury::before,
.app-shell-luxury::after,
.marketing-shell::before,
.marketing-shell::after { content: none !important; display: none !important; }

/* 2) Make the banner smaller and more realistic on desktop.
      Was too large before — cap the height, keep rounded corners,
      keep the full artwork visible. */
.mbc-banner-logo-wrap,
[data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type,
[data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type {
  width: min(100vw, 1200px) !important;
  max-width: 1200px !important;
  height: auto !important;
  max-height: 240px !important;
  aspect-ratio: 8 / 3 !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  top: 0 !important;
}
.mbc-banner-logo-wrap img,
[data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type img,
[data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
  display: block !important;
}
/* Iter 123 P0 — Was `border-radius: 24px` + `max-height: 180px` which
 * made the mobile banner tiny and boxed. Let the canonical rule at the
 * end of the file drive mobile sizing/radius. */
@media (max-width: 640px) {
  .mbc-banner-logo-wrap { border-radius: 28px !important; }
  .mbc-banner-logo-wrap img { border-radius: inherit !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Iter 124 · Definitive banner fix + Sacred Origin shimmer.
   Approach: ignore all parent-context weirdness by pinning the
   banner to top:0 with position:relative + margin-top: negative
   any inherited offset. Use full width with rounded bottom corners
   for the "full-bar-with-soft-corners" look the founder described.
   ═══════════════════════════════════════════════════════════════ */
[data-testid="premium-home"],
[data-testid="dashboard-root"] { padding-top: 0 !important; margin-top: 0 !important; min-height: 100vh; }

/* Banner: full width, big, rounded bottom, touches top */
.mbc-banner-logo-wrap,
[data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type,
[data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  z-index: 5;
}
.mbc-banner-logo-wrap > *,
.mbc-banner-logo-wrap > a,
.mbc-banner-logo-wrap > a > * { line-height: 0 !important; font-size: 0 !important; display: block !important; width: 100% !important; }
.mbc-banner-logo-wrap img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  border-radius: 0 0 48px 48px !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  vertical-align: top !important;
}

/* ═══════════════════════════════════════════════════════════════
   Iter 124b · Sacred Origin shimmer sweep on the banner.
   A soft champagne highlight sweeps across the tree emblem every
   8 seconds. Uses a diagonal linear-gradient on a ::after pseudo
   with mix-blend-mode: soft-light so it feels like real light,
   not a shiny overlay. Honours prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
.mbc-banner-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 250, 220, 0.55) 46%,
    rgba(255, 232, 168, 0.80) 50%,
    rgba(255, 250, 220, 0.55) 54%,
    transparent 68%);
  mix-blend-mode: soft-light;
  transform: translateX(-120%);
  animation: mbc-banner-shimmer 8s ease-in-out infinite;
  z-index: 2;
  filter: blur(4px);
}
@keyframes mbc-banner-shimmer {
  0%   { transform: translateX(-120%); opacity: 0; }
  15%  { opacity: 0.9; }
  50%  { transform: translateX(20%);  opacity: 1;  }
  85%  { opacity: 0.7; }
  100% { transform: translateX(120%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mbc-banner-logo-wrap::after { animation: none !important; opacity: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────
   Iter 146 — SACRED ORIGIN BANNER CANONICAL RESET (remedial repair)

   Supersedes the Iter 123 P0 block below it in history. That block
   left a visible side gutter, a hairline border, a drop shadow, and a
   cream gradient fill behind the artwork — reading as a "framed card"
   instead of a full-bleed banner. This block WINS the cascade (last-in,
   highest-specificity `html body` prefix) and is now the single source
   of truth for `.mbc-banner-logo-wrap`:
     • edge-to-edge FULL width — no side gutter/gap
     • all four corners rounded (symmetric with the nav bar)
     • no border, no box-shadow, no background fill — the artwork itself
       is the only visible surface, clipped to the rounded rect
     • object-fit: cover so the artwork always fills the box with zero
       letterboxing even if a future asset swap isn't a perfect
       1672:818 match
   ───────────────────────────────────────────────────────────── */

html body .mbc-banner-logo-wrap,
html body [data-testid="premium-home"] > .mbc-banner-logo-wrap,
html body [data-testid="dashboard-root"] > .mbc-banner-logo-wrap,
html body [data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type,
html body [data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type {
  display: block !important;
  position: relative !important;
  left: auto !important;
  top: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 1800px !important;
  aspect-ratio: 1672 / 818 !important;
  height: auto !important;
  max-height: 720px !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: clamp(28px, 3.5vw, 48px) !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  animation: mbcBannerRevealUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  line-height: 0 !important;
  font-size: 0 !important;
}
html body .mbc-banner-logo-wrap > a,
html body .mbc-banner-logo-wrap > * {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
html body [data-testid="brand-logo-banner"].mbc-banner-fill,
html body .mbc-banner-logo-wrap [data-testid="brand-logo-banner"],
html body .mbc-banner-logo-wrap img,
html body [data-testid="premium-home"] > .mbc-banner-logo-wrap img,
html body [data-testid="dashboard-root"] > .mbc-banner-logo-wrap img,
html body [data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type img,
html body [data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;          /* fills the box edge-to-edge, no letterboxing */
  object-position: center center !important;
  transform: none !important;
  border-radius: inherit !important;
}
@media (max-width: 640px) {
  html body .mbc-banner-logo-wrap,
  html body [data-testid="premium-home"] > .mbc-banner-logo-wrap:first-of-type,
  html body [data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 8px !important;
    border-radius: 28px !important;
  }
}

/* Cinematic reveal — fade up + subtle scale on first mount */
@keyframes mbcBannerRevealUp {
  0%   { opacity: 0; transform: translateY(24px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0)    scale(1);      }
}
@media (prefers-reduced-motion: reduce) {
  html body .mbc-banner-logo-wrap { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Iter 132 · Dashboard Sacred Origin banner — full-bleed width
   Root cause: `.app-shell` in index.css §177 was originally
   `max-width:1240px; margin:0 auto` (centered). A later rule in
   App.css §4497 blanket-set `margin: 0 !important` on the shell,
   which killed the auto-centering and left the entire dashboard
   pinned to the left of the viewport — producing a solid yellow
   band on the right ~1/3 of the screen at ≥1240px viewports and
   clipping the Sacred Origin banner to the shell width. Two
   additional constraints kept the banner clipped: an earlier rule
   forcing `width:100%` on the banner wrap, and `overflow-x:clip`
   on `.app-shell-luxury` (App.css §894).
   Fix scope:
     1) Restore the ORIGINAL `margin: 0 auto` on `.app-shell` so
        the shell (and the banner inside it) is centered.
     2) Let the Sacred Origin banner break out to a full-bleed
        viewport width (capped at 1800px, matching the marketing
        homepage banner exactly) using standard negative-margin
        breakout. Preserves the natural image aspect ratio via
        the pre-existing `object-fit: cover` on the img.
   No topbar, hero card, card, button, color, text, or component
   is touched.
   ═══════════════════════════════════════════════════════════════ */
html body [data-testid="dashboard-root"] { margin-left: auto !important; margin-right: auto !important; }
html body [data-testid="dashboard-root"] > .mbc-banner-logo-wrap,
html body [data-testid="dashboard-root"] > .mbc-banner-logo-wrap:first-of-type {
  width: 100vw !important;
  max-width: 1800px !important;
  margin-left: calc(50% - min(50vw, 900px)) !important;
  margin-right: calc(50% - min(50vw, 900px)) !important;
  position: relative !important;
  left: auto !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   Iter 134 · Homepage "Eleven support pillars" tiles — premium 3D
   Scope: [data-testid="premium-home"] [data-testid^="service-card-"] ONLY
   Root cause: the shared `.premium-3d-card` shadow uses warm gold
   tones optimized for a light-cream page. The Eleven Support Pillars
   section sits on a rich saturated gold band (`bg-brand-royal-gold/25`)
   so those shadows blend into the surroundings and the tiles read as
   flat coloured rectangles. Fix: strengthen the tile chassis (pearl-
   ivory surface, champagne-gold border, deeper multi-layer shadow +
   top-edge highlight + subtle rose-gold inset bottom) so each tile
   visibly floats above the gold section band. Same palette rules as
   the dashboard fix — champagne / luminous natural gold / rose-gold /
   pearl-ivory only. No grey, silver, bronze, mustard, or brown.
   Nothing else on the homepage or any other page is touched.
   ═══════════════════════════════════════════════════════════════ */
[data-testid="premium-home"] [data-testid="services-grid"] [data-testid^="service-card-"] {
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 250, 232, 1) 55%,
      rgba(252, 240, 210, 1) 100%) !important;
  border: 1.5px solid rgba(200, 158, 78, 0.62) !important;
  border-radius: 20px !important;
  box-shadow:
    0 26px 52px -18px rgba(107, 68, 20, 0.42),
    0 14px 28px -10px rgba(107, 68, 20, 0.30),
    0 4px 10px -2px rgba(107, 68, 20, 0.20),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(231, 191, 169, 0.42) !important;
  transition:
    box-shadow 300ms ease,
    border-color 300ms ease,
    transform 300ms cubic-bezier(.2,.9,.3,1);
}
[data-testid="premium-home"] [data-testid="services-grid"] [data-testid^="service-card-"]:hover {
  border-color: rgba(200, 158, 78, 0.92) !important;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 3px 5px -2px rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(231, 191, 169, 0.55),
    0 34px 66px -18px rgba(107, 68, 20, 0.52),
    0 18px 34px -8px rgba(107, 68, 20, 0.34),
    0 5px 12px -2px rgba(107, 68, 20, 0.22) !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-testid="premium-home"] [data-testid="services-grid"] [data-testid^="service-card-"] {
    transition: none !important;
  }
  [data-testid="premium-home"] [data-testid="services-grid"] [data-testid^="service-card-"]:hover {
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Iter 135 · Footer spacing / AI Concierge floating position fix
   Root cause: `.app-shell-luxury > * { position: relative }`
   (App.css §429) has the SAME specificity as Tailwind's `.fixed`
   utility class but comes LATER in the cascade, so it silently
   demoted the AI Concierge floating trigger from `position: fixed;
   bottom: 20px; right: 20px` down to `position: relative;
   left: -20px; top: -20px` — which planted the trigger inline INSIDE
   the footer bottom-left, giving the impression that the footer
   itself was stuck / misaligned. The trigger is rendered as a
   sibling of the page content and is meant to float in the bottom-
   right of the viewport (parity with the Accessibility launcher).
   Fix: restore fixed positioning specifically for the concierge
   trigger, matching the intended Tailwind classes on it. Scoped by
   data-testid only. No other button, footer element, or page is
   touched. The footer's own layout, spacing, colors, links, and
   copy are unchanged.
   ═══════════════════════════════════════════════════════════════ */
[data-testid="ai-concierge-trigger"] {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   Iter 136 · DEEP-3D amplification for all card/panel surfaces
   User feedback: previous shadows were too gold-on-gold and read
   flat. This block replaces the shadow color with a DEEP WARM
   PLUM-COCOA tone (never green, never mustard, never bronze) that
   visibly separates every card from the ambient gold background.
   Also strengthens top-edge pearl highlight + rose-gold inset
   bottom rim so every panel reads as a truly lifted 3D surface.
   Scope: cards inside the app-shell-luxury pages + the homepage
   "Eleven support pillars" tiles + all dashboard panels I
   previously touched. Only the shadow + border + highlight are
   changed — no colors, no text, no layout, no components moved.
   Palette used: pearl ivory, luminous natural gold, rose-gold
   accent, warm plum-cocoa shadow. NO green-gold anywhere.
   ═══════════════════════════════════════════════════════════════ */

/* --- Deep drop-shadow used by EVERY 3D card in this block --- */
/* rgba(58, 31, 45, ...) = deep warm plum-cocoa (matches --brand-plum family,
   verified NOT green: it's a cool-warm dark maroon-plum, universally readable
   against every gold ambient band on the platform). */

/* 1) Homepage "Eleven support pillars" tiles */
[data-testid="premium-home"] [data-testid="services-grid"] [data-testid^="service-card-"] {
  border: 1.5px solid rgba(180, 128, 40, 0.75) !important;
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 249, 226, 1) 55%,
      rgba(252, 235, 195, 1) 100%) !important;
  box-shadow:
    0 40px 70px -22px rgba(58, 31, 45, 0.55),
    0 22px 40px -12px rgba(58, 31, 45, 0.38),
    0 8px 16px -4px rgba(58, 31, 45, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -3px 0 rgba(214, 168, 148, 0.45) !important;
}
[data-testid="premium-home"] [data-testid="services-grid"] [data-testid^="service-card-"]:hover {
  border-color: rgba(180, 128, 40, 1) !important;
  transform: translateY(-4px);
  box-shadow:
    0 50px 88px -20px rgba(58, 31, 45, 0.65),
    0 28px 52px -10px rgba(58, 31, 45, 0.46),
    0 10px 20px -4px rgba(58, 31, 45, 0.30),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 4px 6px -2px rgba(255, 255, 255, 1),
    inset 0 -3px 0 rgba(214, 168, 148, 0.60) !important;
}

/* 2) Dashboard hero grid cards (Today, Golden Window message, AI
      Companion, Reasoning, membership, course, life-review) */
.app-shell-luxury [data-testid$="-card"]:not(.premium-tier-card) {
  border: 1.5px solid rgba(180, 128, 40, 0.75) !important;
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 249, 226, 1) 55%,
      rgba(252, 235, 195, 1) 100%) !important;
  box-shadow:
    0 40px 70px -22px rgba(58, 31, 45, 0.55),
    0 22px 40px -12px rgba(58, 31, 45, 0.38),
    0 8px 16px -4px rgba(58, 31, 45, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -3px 0 rgba(214, 168, 148, 0.45) !important;
}
.app-shell-luxury [data-testid$="-card"]:not(.premium-tier-card):hover {
  border-color: rgba(180, 128, 40, 1) !important;
  transform: translateY(-4px);
  box-shadow:
    0 50px 88px -20px rgba(58, 31, 45, 0.65),
    0 28px 52px -10px rgba(58, 31, 45, 0.46),
    0 10px 20px -4px rgba(58, 31, 45, 0.30),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 4px 6px -2px rgba(255, 255, 255, 1),
    inset 0 -3px 0 rgba(214, 168, 148, 0.60) !important;
}

/* 3) Dashboard non-`-card` panels (VIP tier, quiz, onboarding steps,
      fertile-day-card variants, partner-sync, journey-intelligence) */
[data-testid="dashboard-root"] [data-testid="dashboard-vip-tier-progress"],
[data-testid="dashboard-root"] [data-testid="vip-tier-progress"],
[data-testid="dashboard-root"] [data-testid="partner-sync-card"],
[data-testid="dashboard-root"] [data-testid="golden-window-preview-quiz"],
[data-testid="dashboard-root"] [data-testid="golden-window-preview-result"],
[data-testid="dashboard-root"] [data-testid="fertile-day-card"],
[data-testid="dashboard-root"] [data-testid="fertile-day-card-empty"],
[data-testid="dashboard-root"] [data-testid="journey-intelligence-card"],
[data-testid="dashboard-root"] [data-testid^="onboarding-step-"],
[data-testid="dashboard-root"] [data-testid="star-promise-hero"] {
  border: 1.5px solid rgba(180, 128, 40, 0.75) !important;
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 249, 226, 1) 55%,
      rgba(252, 235, 195, 1) 100%) !important;
  box-shadow:
    0 40px 70px -22px rgba(58, 31, 45, 0.55),
    0 22px 40px -12px rgba(58, 31, 45, 0.38),
    0 8px 16px -4px rgba(58, 31, 45, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -3px 0 rgba(214, 168, 148, 0.45) !important;
}

/* ─────────── KenyaFlag3D — luxury 3D flag with gold shimmer ─────────── */
.kenya-flag-3d { line-height: 0; }

.kenya-flag-3d__tilt {
  transition: transform 500ms ease;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: kenya-flag-sway 8s ease-in-out infinite;
}
.kenya-flag-3d:hover .kenya-flag-3d__tilt {
  transform: rotateY(-6deg) rotateX(2deg) scale(1.03) !important;
}
@keyframes kenya-flag-sway {
  0%,100% { transform: rotateY(-14deg) rotateX(4deg); }
  50%     { transform: rotateY(-10deg) rotateX(2deg); }
}

/* Shimmer band sweep */
.kenya-flag-3d__shimmer {
  animation: kenya-flag-shimmer 4.2s linear infinite;
}
@keyframes kenya-flag-shimmer {
  0%   { transform: translateX(0); }
  60%  { transform: translateX(1400px); }
  100% { transform: translateX(1400px); }
}

/* Golden sparks */
.kenya-flag-3d__sparks { overflow: visible; }
.kf-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: radial-gradient(circle,
              rgba(255,240,180,1) 0%,
              rgba(255,210,120,0.9) 40%,
              rgba(255,190,80,0) 70%);
  box-shadow: 0 0 8px rgba(255, 215, 130, 0.85);
  opacity: 0;
  animation: kenya-spark-float 3.2s ease-in-out infinite;
}
.kf-spark--a { top: 10%; left: 12%; animation-delay: 0s;   width: 5px; height: 5px; }
.kf-spark--b { top: 68%; left: 82%; animation-delay: 0.9s; width: 7px; height: 7px; }
.kf-spark--c { top: 34%; left: 92%; animation-delay: 1.8s; width: 4px; height: 4px; }
.kf-spark--d { top: 84%; left: 22%; animation-delay: 2.5s; width: 6px; height: 6px; }
@keyframes kenya-spark-float {
  0%   { transform: translate(0,0)   scale(0.6); opacity: 0; }
  25%  { opacity: 1; }
  50%  { transform: translate(-8px,-12px) scale(1.15); opacity: 0.95; }
  100% { transform: translate(-18px,-26px) scale(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kenya-flag-3d__tilt,
  .kenya-flag-3d__shimmer,
  .kf-spark { animation: none !important; }
  .kf-spark { opacity: 0.65; }
}

/* ─────────── KenyaDonorWall — rotating supporters marquee ─────────── */
.kenya-donor-wall__viewport { overflow: hidden; }
.kenya-donor-wall__track {
  animation: kenya-donor-marquee 40s linear infinite;
  min-width: 200%;
  padding: 0 1rem;
}
.kenya-donor-wall__viewport:hover .kenya-donor-wall__track {
  animation-play-state: paused;
}
@keyframes kenya-donor-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─────────── Milestone confetti — golden shower over ticker ────────── */
.kenya-milestone__confetti { z-index: 0; }
.kenya-confetti {
  position: absolute;
  top: -12px;
  width: 8px; height: 12px;
  border-radius: 2px;
  transform-origin: center;
  opacity: 0;
  animation: kenya-confetti-fall 4.4s cubic-bezier(.22,.61,.36,1) forwards;
}
.kenya-confetti--0 { background: linear-gradient(180deg, #F5D97B 0%, #C9A227 100%); }
.kenya-confetti--1 { background: linear-gradient(180deg, #FFF3B7 0%, #E5B84B 100%); }
.kenya-confetti--2 { background: linear-gradient(180deg, #FFE58A 0%, #B8862F 100%); width: 6px; height: 10px; }
.kenya-confetti--3 { background: radial-gradient(circle, #FFF6C4 0%, #E4B65A 60%, rgba(0,0,0,0) 100%); border-radius: 50%; width: 6px; height: 6px; }
.kenya-confetti--4 { background: linear-gradient(180deg, #F0C36D 0%, #7C5A12 100%); width: 5px; height: 14px; }
.kenya-confetti--5 { background: linear-gradient(180deg, #FFF9DE 0%, #D3A63B 100%); width: 10px; height: 6px; border-radius: 50%; }
@keyframes kenya-confetti-fall {
  0%   { opacity: 0; transform: translateY(-10px) rotate(0deg); }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(200px) rotate(720deg); }
}

.kenya-milestone__badge {
  animation: kenya-milestone-pop 0.9s ease-out both;
}
@keyframes kenya-milestone-pop {
  0%   { opacity: 0; transform: scale(0.7) translateY(-6px); }
  55%  { opacity: 1; transform: scale(1.08) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .kenya-donor-wall__track,
  .kenya-confetti,
  .kenya-milestone__badge { animation: none !important; }
  .kenya-confetti { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Iter 159 — Dashboard Quick Tour tile-glow.
   The AiConcierge tags the element matching the current tour step's
   `#anchor` with `data-tour-glow="1"`. This rule renders a soft gold
   pulse around it so visitors see exactly which tile the concierge is
   describing. The glow is a pure box-shadow + border animation so it
   never affects layout or click-through.
   ─────────────────────────────────────────────────────────────── */
[data-tour-glow="1"] {
  position: relative;
  border-radius: 20px;
  box-shadow:
    0 0 0 3px rgba(216, 169, 60, 0.55),
    0 0 40px 12px rgba(216, 169, 60, 0.35),
    0 20px 60px -20px rgba(122, 81, 27, 0.35);
  animation: mbc-tour-glow-pulse 2.2s ease-in-out infinite;
  scroll-margin-top: 96px;
  transition: box-shadow 300ms ease;
}
@keyframes mbc-tour-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(216, 169, 60, 0.55),
      0 0 32px 10px rgba(216, 169, 60, 0.28),
      0 20px 60px -20px rgba(122, 81, 27, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(216, 169, 60, 0.75),
      0 0 56px 18px rgba(216, 169, 60, 0.45),
      0 24px 72px -24px rgba(122, 81, 27, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-tour-glow="1"] { animation: none !important; }
}