/* Bélit design tokens — full mirror of the live, shipped system:
   frontend/src/styles/global/DesignTokens.css (primitives, verbatim below) +
   global/Index.css (semantic layer, appended at the end). This is shipped code,
   not a target state. CI/print-compliance palette (official black/navy/
   deep-blue/gold #ccb695/silver + Forum) stays separate in
   Bélit CI Design System.dc.html — intentionally not merged here. */

:root {
  /* Primitive color channels — space-separated so alpha applies inline. */
  --token-color-obsidian: 11 11 10;
  --token-color-mineral: 21 21 19;
  --token-color-ivory: 241 238 231;
  --token-color-ivory-dim: 228 224 213;
  --token-color-stone: 184 180 172;
  --token-color-gold: 180 154 103;
  --token-color-gold-hover: 216 195 147;
  --token-color-accent: 26 36 49;
  --token-color-accent-border: 26 36 49;
  --token-color-error: 250 77 86;

  --token-color-black: 0 0 0;
  --token-color-white: 255 255 255;

  /* App "ink" ground. */
  --token-color-ink: 232 230 225; /* #e8e6e1 */
  --token-color-ink-dim: 197 192 184; /* #c5c0b8 */
  --token-color-silver: 207 209 210; /* #cfd1d2 */
  --token-color-border: 57 56 54; /* #393836 */

  /* Cooler navy Carbon ground behind app screens, as a step scale. */
  --token-color-navy-950: 2 3 3; /* #020303 */
  --token-color-navy-925: 3 5 6; /* #030506 */
  --token-color-navy-900: 3 6 7; /* #030607 */
  --token-color-navy-875: 3 6 8; /* #030608 */
  --token-color-navy-850: 2 5 6; /* #020506 */
  --token-color-navy-800: 5 13 20; /* #050d14 */
  --token-color-navy-775: 6 16 26; /* #06101a */
  --token-color-navy-750: 6 17 28; /* #06111c */
  --token-color-navy-725: 6 19 31; /* #06131f */
  --token-color-navy-700: 7 22 34; /* #071622 */
  --token-color-navy-675: 7 22 36; /* #071624 */
  --token-color-navy-650: 8 20 33; /* #081421 */
  --token-color-navy-625: 9 22 32; /* #091620 */
  --token-color-navy-600: 10 23 37; /* #0a1725 */
  --token-color-navy-550: 12 32 49; /* #0c2031 */
  --token-color-navy-525: 13 28 45; /* #0d1c2d */
  --token-color-navy-500: 13 41 54; /* #0d2936 */
  --token-color-navy-400: 28 49 73; /* #1c3149 */
  --token-color-navy-375: 26 36 49; /* #1a2431 */
  --token-color-navy-350: 17 35 49; /* #112331 */
  --token-color-navy-325: 16 31 44; /* #101f2c */
  --token-color-navy-300: 20 42 57; /* #142a39 */
  --token-color-navy-275: 8 18 27; /* #08121b */
  --token-color-navy-260: 9 20 30; /* #09141e */
  --token-color-navy-250: 6 15 23; /* #060f17 */
  --token-color-navy-200: 3 9 14; /* #03090e */
  --token-color-navy-175: 3 7 10; /* #03070a */
  --token-color-navy-150: 3 13 16; /* #030d10 */

  /* Teal-greens: mineral undertone (membership/reveal) + dashboard status green. */
  --token-color-teal-700: 20 73 66; /* #144942 */
  --token-color-teal-650: 25 71 83; /* #194753 */
  --token-color-teal-600: 26 67 72; /* #1a4348 */
  --token-color-green-800: 16 75 54; /* #104b36 */
  --token-color-green-750: 56 106 80; /* #386a50 */
  --token-color-green-700: 57 112 87; /* #397057 */
  --token-color-green-650: 78 143 112; /* #4e8f70 */
  --token-color-green-600: 42 132 88; /* #2a8458 */
  --token-color-green-575: 101 130 116; /* #658274 */
  --token-color-green-550: 111 141 126; /* #6f8d7e */
  --token-color-green-525: 118 152 134; /* #769886 */
  --token-color-green-500: 76 121 93; /* #4c795d */
  --token-color-green-450: 138 180 154; /* #8ab49a */
  --token-color-green-425: 155 196 170; /* #9bc4aa */
  --token-color-green-400: 117 157 132; /* #759d84 */
  --token-color-green-125: 228 238 232; /* #e4eee8 */
  --token-color-green-100: 226 238 231; /* #e2eee7 */
--token-color-steel: 111 135 153; /* #6f8799 */
  /* Light Navy tone used for focus indicators on dark surfaces. */
  --token-color-navy-focus: var(--token-color-steel);

  /* Warm golds + dark brown text that sits on them. */
  --token-color-gold-825: 118 97 63; /* #76613f */
  --token-color-gold-800: 120 99 67; /* #786343 */
  --token-color-gold-775: 120 97 64; /* #786140 */
  --token-color-gold-750: 128 105 69; /* #806945 */
  --token-color-gold-725: 139 105 55; /* #8b6937 */
  --token-color-gold-700: 166 139 98; /* #a68b62 */
  --token-color-gold-675: 173 149 111; /* #ad956f */
  --token-color-gold-650: 178 154 117; /* #b29a75 */
  --token-color-gold-600: 199 182 149; /* #c7b695 */
  --token-color-gold-450: 224 203 172; /* #e0cbac */
  --token-color-gold-425: 224 202 171; /* #e0caab */
  --token-color-gold-200: 242 233 216; /* #f2e9d8 */
  --token-color-on-gold: 23 18 11; /* #17120b */
  --token-color-on-gold-2: 24 19 12; /* #18130c */
  --token-color-on-gold-3: 22 18 12; /* #16120c */
  --token-color-on-gold-4: 36 26 9; /* #241a09 */
  --token-color-maroon: 31 15 15; /* #1f0f0f */

  /* Error and status tints. */
  --token-color-error-light: 255 179 184; /* #ffb3b8 */
  --token-color-red-50: 247 234 231; /* #f7eae7 */
  --token-color-red-75: 241 229 223; /* #f1e5df */
  --token-color-red-90: 240 225 220; /* #f0e1dc */
  --token-color-red-100: 242 184 181; /* #f2b8b5 */
  --token-color-red-150: 230 167 160; /* #e6a7a0 */
  --token-color-red-200: 217 140 140; /* #d98c8c */
  --token-color-red-225: 216 185 180; /* #d8b9b4 */
  --token-color-red-250: 213 161 154; /* #d5a19a */
  --token-color-red-300: 200 144 135; /* #c89087 */
  --token-color-red-325: 199 140 130; /* #c78c82 */
  --token-color-red-350: 204 148 139; /* #cc948b */
  --token-color-red-400: 190 119 108; /* #be776c */
  --token-color-red-425: 185 103 92; /* #b9675c */
  --token-color-red-450: 168 90 78; /* #a85a4e */
  --token-color-red-475: 155 79 70; /* #9b4f46 */
  --token-color-red-480: 154 77 68; /* #9a4d44 */
  --token-color-red-500: 146 87 72; /* #925748 */
  --token-color-red-525: 143 62 52; /* #8f3e34 */
  --token-color-red-550: 142 73 63; /* #8e493f */
  --token-color-red-600: 133 84 71; /* #855447 */

  /* Chakra spectrum — mirrors --belit-chakra-* in the BÉLIT design system
     (Materials/brand-b-lit-b-lit-is-3a2213/colors_and_type.css). Seven chakras
     x three shades. Shade 2 is the canonical chakra hue, shade 1 is that hue
     toward white, shade 3 is darkened until its paired ink clears WCAG AA.
     Each fill ships with a matching -ink token, so consumers read the measured
     pairing instead of guessing one: 4.53:1 is the floor across all 21.
     Saturated display fills — not for body copy, hairlines, or UI chrome. */
  --token-color-chakra-root-1: 220 146 138; /* #dc928a */
  --token-color-chakra-root-1-ink: var(--token-color-ink-deep); /* 7.46:1 */
  --token-color-chakra-root-2: 192 57 43; /* #c0392b */
  --token-color-chakra-root-2-ink: var(--token-color-ivory); /* 4.69:1 */
  --token-color-chakra-root-3: 150 44 34; /* #962c22 */
  --token-color-chakra-root-3-ink: var(--token-color-ivory); /* 6.76:1 */

  --token-color-chakra-sacral-1: 241 184 133; /* #f1b885 */
  --token-color-chakra-sacral-1-ink: var(--token-color-ink-deep); /* 10.45:1 */
  --token-color-chakra-sacral-2: 230 126 34; /* #e67e22 */
  --token-color-chakra-sacral-2-ink: var(--token-color-ink-deep); /* 6.46:1 */
  --token-color-chakra-sacral-3: 191 105 28; /* #bf691c */
  --token-color-chakra-sacral-3-ink: var(--token-color-ink-deep); /* 4.60:1 */

  --token-color-chakra-solar-1: 247 223 123; /* #f7df7b */
  --token-color-chakra-solar-1-ink: var(--token-color-ink-deep); /* 13.84:1 */
  --token-color-chakra-solar-2: 241 196 15; /* #f1c40f */
  --token-color-chakra-solar-2-ink: var(--token-color-ink-deep); /* 11.07:1 */
  --token-color-chakra-solar-3: 169 137 11; /* #a9890b */
  --token-color-chakra-solar-3-ink: var(--token-color-ink-deep); /* 5.49:1 */

  --token-color-chakra-heart-1: 136 210 168; /* #88d2a8 */
  --token-color-chakra-heart-1-ink: var(--token-color-ink-deep); /* 10.36:1 */
  --token-color-chakra-heart-2: 39 174 96; /* #27ae60 */
  --token-color-chakra-heart-2-ink: var(--token-color-ink-deep); /* 6.40:1 */
  --token-color-chakra-heart-3: 32 144 80; /* #209050 */
  --token-color-chakra-heart-3-ink: var(--token-color-ink-deep); /* 4.53:1 */

  --token-color-chakra-throat-1: 137 185 217; /* #89b9d9 */
  --token-color-chakra-throat-1-ink: var(--token-color-ink-deep); /* 8.76:1 */
  --token-color-chakra-throat-2: 50 133 188; /* #3285bc */
  --token-color-chakra-throat-2-ink: var(--token-color-ink-deep); /* 4.57:1 */
  --token-color-chakra-throat-3: 32 100 144; /* #206490 */
  --token-color-chakra-throat-3-ink: var(--token-color-ivory); /* 5.51:1 */

  --token-color-chakra-third-eye-1: 165 156 191; /* #a59cbf */
  --token-color-chakra-third-eye-1-ink: var(--token-color-ink-deep); /* 7.10:1 */
  --token-color-chakra-third-eye-2: 91 75 138; /* #5b4b8a */
  --token-color-chakra-third-eye-2-ink: var(--token-color-ivory); /* 6.43:1 */
  --token-color-chakra-third-eye-3: 71 59 108; /* #473b6c */
  --token-color-chakra-third-eye-3-ink: var(--token-color-ivory); /* 8.59:1 */

  --token-color-chakra-crown-1: 193 152 210; /* #c198d2 */
  --token-color-chakra-crown-1-ink: var(--token-color-ink-deep); /* 7.61:1 */
  --token-color-chakra-crown-2: 142 68 173; /* #8e44ad */
  --token-color-chakra-crown-2-ink: var(--token-color-ivory); /* 5.06:1 */
  --token-color-chakra-crown-3: 111 53 135; /* #6f3587 */
  --token-color-chakra-crown-3-ink: var(--token-color-ivory); /* 7.15:1 */

  /* Light-theme ground, panels, hairlines (business dashboard, plans, supplier). */
  --token-color-cream: 250 249 245; /* #faf9f5 */
  --token-color-cream-soft: 248 247 243; /* #f8f7f3 */
  --token-color-cream-muted: 242 240 235; /* #f2f0eb */
  --token-color-cream-tint: 244 241 233; /* #f4f1e9 */
  --token-color-cream-light: 238 235 228; /* #eeebe4 */
  --token-color-cream-warm: 231 227 218; /* #e7e3da */
  --token-color-line: 206 202 193; /* #cecac1 */
  --token-color-line-strong: 215 211 202; /* #d7d3ca */
  --token-color-line-soft: 216 214 207; /* #d9d6cf */
  --token-color-line-faint: 216 212 204; /* #d8d4cc */
  --token-color-line-faint-2: 222 219 212; /* #dedbd4 */
  --token-color-line-faint-3: 223 220 213; /* #dfdcd5 */
  --token-color-line-warm: 217 212 202; /* #d9d4ca */
  --token-color-line-cool: 223 219 210; /* #dfdbd2 */
  --token-color-line-fine: 230 226 217; /* #e6e2d9 */
  --token-color-line-fine-2: 232 228 219; /* #e8e4db */
  --token-color-line-fine-3: 221 217 208; /* #ddd9d0 */
  --token-color-line-fine-4: 222 215 202; /* #ded7ca */
  --token-color-line-fine-5: 232 230 226; /* #e8e6e2 */
  --token-color-line-fine-6: 226 222 213; /* #e2ded5 */
  --token-color-ink-deep: 16 21 23; /* #101517 */
  --token-color-ink-muted: 105 115 122; /* #69737a */
  --token-color-ink-muted-2: 110 112 112; /* #6e7070 */
  --token-color-ink-muted-3: 112 119 122; /* #70777a */
  --token-color-ink-muted-4: 145 153 158; /* #91999e */
  --token-color-ink-muted-5: 146 153 159; /* #92999f */
  --token-color-ink-muted-6: 150 157 163; /* #969da3 */
  --token-color-ink-muted-7: 101 105 106; /* #65696a */
  --token-color-ink-muted-8: 101 108 113; /* #656c71 */
  --token-color-ink-muted-9: 94 98 99; /* #5e6263 */
  --token-color-ink-muted-10: 85 93 96; /* #555d60 */
  --token-color-ink-muted-11: 53 59 61; /* #353b3d */
  --token-color-ink-brown: 93 80 62; /* #5d503e */
  --token-color-silver-muted: 170 170 170; /* #aaa */

  /* Typography. */
  --token-font-display: "Forum", "Noto Sans Thai", Georgia, serif;
  --token-font-body: "Sen", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --token-font-interface: "Afacad", "Sen", "Noto Sans Thai", Arial, sans-serif;
  --token-font-thai: "Noto Sans Thai", "IBM Plex Sans Thai", sans-serif;

  /* Semantic typography roles. Components use these roles instead of
     value-specific or feature-specific font-size tokens. */
  --token-font-size-h1: clamp(2.5rem, 6vw, 4.2rem);
  --token-font-size-h2: 2rem;
  --token-font-size-h3: 1.5rem;
  --token-font-size-body: 1rem;
  --token-font-size-caption: 0.85rem;
  --token-font-size-cta: 0.9rem;
  --token-font-size-label: 0.75rem;
  --token-font-size-tag: 0.625rem;
  --token-font-size-lead: 1.125rem;
  --token-font-weight-light: 300;
  --token-font-weight-regular: 400;

  /* Design-system semantic aliases. */
  --token-color-hairline: rgb(var(--token-color-ivory) / .16);
  --token-color-support-error: rgb(var(--token-color-error));
  --token-line-height-display: 1.2;
  --token-line-height-body: 1.7;
  --token-letter-spacing-body: 0;
  --token-letter-spacing-label: .14em;
  --token-letter-spacing-cta: .02em;
  --token-letter-spacing-tight: var(--token-letter-spacing-neg-0-02);
  --token-letter-spacing-wide: var(--token-letter-spacing-0-3);
  --token-button-min-height: 44px;
  --token-button-min-height-primary: 48px;
  /* Buttons take the same 3px radius as every other surface on the site
     (.belit-primary-link on the landing and Our Story pages, the bag's
     Check Out). Pills stay reserved for tags and progress tracks. */
  --token-button-radius: var(--token-radius-xs);

  /* Spacing scale. */
  --token-space-1: 0.25rem;
  --token-space-2: 0.5rem;
  --token-space-3: 0.75rem;
  --token-space-4: 1rem;
  --token-space-5: 1.5rem;
  --token-space-6: 2rem;
  --token-space-7: 2.5rem;
  --token-space-8: 3rem;
  --token-space-9: 4rem;
  --token-space-10: 5rem;
  --token-space-11: 6rem;

  /* Spacing value scale — every plain length used in padding/margin/gap
     that falls outside the step scale above, named by value (rem/px). The
     step scale is reused where a length matches exactly. */
  --token-spacing-0: 0;
  --token-spacing-0-1: 0.1rem;
  --token-spacing-0-12: 0.12rem;
  --token-spacing-0-125: 0.125rem;
  --token-spacing-0-15: 0.15rem;
  --token-spacing-0-16: 0.16rem;
  --token-spacing-0-2: 0.2rem;
  --token-spacing-0-28: 0.28rem;
  --token-spacing-0-3: 0.3rem;
  --token-spacing-0-35: 0.35rem;
  --token-spacing-0-36: 0.36rem;
  --token-spacing-0-375: 0.375rem;
  --token-spacing-0-38: 0.38rem;
  --token-spacing-0-4: 0.4rem;
  --token-spacing-0-42: 0.42rem;
  --token-spacing-0-45: 0.45rem;
  --token-spacing-0-48: 0.48rem;
  --token-spacing-0-55: 0.55rem;
  --token-spacing-0-6: 0.6rem;
  --token-spacing-0-625: 0.625rem;
  --token-spacing-0-65: 0.65rem;
  --token-spacing-0-7: 0.7rem;
  --token-spacing-0-72: 0.72rem;
  --token-spacing-0-78: 0.78rem;
  --token-spacing-0-8: 0.8rem;
  --token-spacing-0-85: 0.85rem;
  --token-spacing-0-875: 0.875rem;
  --token-spacing-0-9: 0.9rem;
  --token-spacing-0-95: 0.95rem;
  --token-spacing-1px: 1px;
  --token-spacing-1-1: 1.1rem;
  --token-spacing-1-125: 1.125rem;
  --token-spacing-1-15: 1.15rem;
  --token-spacing-1-2: 1.2rem;
  --token-spacing-1-25: 1.25rem;
  --token-spacing-1-3: 1.3rem;
  --token-spacing-1-35: 1.35rem;
  --token-spacing-1-4: 1.4rem;
  --token-spacing-1-55: 1.55rem;
  --token-spacing-1-6: 1.6rem;
  --token-spacing-1-7: 1.7rem;
  --token-spacing-1-75: 1.75rem;
  --token-spacing-1-8: 1.8rem;
  --token-spacing-2px: 2px;
  --token-spacing-2-1: 2.1rem;
  --token-spacing-2-2: 2.2rem;
  --token-spacing-2-4: 2.4rem;
  --token-spacing-2-6: 2.6rem;
  --token-spacing-2-75: 2.75rem;
  --token-spacing-3-25: 3.25rem;
  --token-spacing-3-5: 3.5rem;
  --token-spacing-4px: 4px;
  --token-spacing-4-25: 4.25rem;
  --token-spacing-4-5: 4.5rem;
  --token-spacing-5-5: 5.5rem;
  --token-spacing-6-5: 6.5rem;
  --token-spacing-7-25: 7.25rem;
  --token-spacing-7-5: 7.5rem;
  --token-spacing-8px: 8px;
  --token-spacing-8: 8rem;
  --token-spacing-28px: 28px;

  /* Letter-spacing value scale (em). */
  --token-letter-spacing-0: 0;
  --token-letter-spacing-0-01: 0.01em;
  --token-letter-spacing-0-02: 0.02em;
  --token-letter-spacing-0-03: 0.03em;
  --token-letter-spacing-0-04: 0.04em;
  --token-letter-spacing-0-05: 0.05em;
  --token-letter-spacing-0-06: 0.06em;
  --token-letter-spacing-0-07: 0.07em;
  --token-letter-spacing-0-08: 0.08em;
  --token-letter-spacing-0-09: 0.09em;
  --token-letter-spacing-0-1: 0.1em;
  --token-letter-spacing-0-11: 0.11em;
  --token-letter-spacing-0-12: 0.12em;
  --token-letter-spacing-0-13: 0.13em;
  --token-letter-spacing-0-14: 0.14em;
  --token-letter-spacing-0-15: 0.15em;
  --token-letter-spacing-0-16: 0.16em;
  --token-letter-spacing-0-17: 0.17em;
  --token-letter-spacing-0-18: 0.18em;
  --token-letter-spacing-0-2: 0.2em;
  --token-letter-spacing-0-22: 0.22em;
  --token-letter-spacing-0-23: 0.23em;
  --token-letter-spacing-0-24: 0.24em;
  --token-letter-spacing-0-27: 0.27em;
  --token-letter-spacing-0-3: 0.3em;
  --token-letter-spacing-0-34: 0.34em;
  --token-letter-spacing-0-35: 0.35em;
  --token-letter-spacing-0-45: 0.45em;
  --token-letter-spacing-0-46: 0.46em;
  --token-letter-spacing-neg-0-02: -0.02em;
  --token-letter-spacing-neg-0-025: -0.025em;
  --token-letter-spacing-neg-0-035: -0.035em;
  --token-letter-spacing-neg-0-04: -0.04em;
  --token-letter-spacing-neg-0-045: -0.045em;

  /* Line-height value scale (unitless). */
  --token-line-height-0-78: 0.78;
  --token-line-height-0-8: 0.8;
  --token-line-height-0-88: 0.88;
  --token-line-height-0-9: 0.9;
  --token-line-height-0-95: 0.95;
  --token-line-height-0-98: 0.98;
  --token-line-height-1: 1;
  --token-line-height-1-02: 1.02;
  --token-line-height-1-05: 1.05;
  --token-line-height-1-08: 1.08;
  --token-line-height-1-1: 1.1;
  --token-line-height-1-15: 1.15;
  --token-line-height-1-2: 1.2;
  --token-line-height-1-25: 1.25;
  --token-line-height-1-4: 1.4;
  --token-line-height-1-45: 1.45;
  --token-line-height-1-5: 1.5;
  --token-line-height-1-55: 1.55;
  --token-line-height-1-6: 1.6;
  --token-line-height-1-62: 1.62;
  --token-line-height-1-625: 1.625;
  --token-line-height-1-65: 1.65;
  --token-line-height-1-7: 1.7;
  --token-line-height-1-72: 1.72;
  --token-line-height-1-75: 1.75;
  --token-line-height-1-8: 1.8;
  --token-line-height-1-9: 1.9;

  /* Shape and elevation. */
  --token-radius-xs: 3px;
  --token-radius-sm: 4px;
  --token-radius-md: 8px;
  --token-radius-lg: 1rem;
  --token-radius-xl: 1.5rem;
  --token-radius-pill: 999px;
  --token-radius-0: 0;
  --token-radius-1px: 1px;
  --token-radius-2px: 2px;
  --token-radius-0-25: 0.25rem;
  --token-radius-0-375: 0.375rem;
  --token-radius-12px: 12px;
  --token-radius-14px: 14px;
  --token-radius-50pct: 50%;
  --token-radius-100pct: 100%;
  --token-border-width: 1px;
  --token-shadow-overlay: 0 1.5rem 4rem rgb(var(--token-color-black) / 0.32);

  /* Shadow value scale — distinct box-shadow compositions used across
     components, named by their glow colour and blur behaviour. */
  --token-shadow-halo-gold-green: 0 0 0 5rem rgb(var(--token-color-ivory) / .018), 0 0 90px rgb(var(--token-color-green-600) / .08);
  --token-shadow-halo-gold-silver: 0 0 0 7rem rgb(var(--token-color-ivory) / .018), 0 0 0 14rem rgb(var(--token-color-silver) / .012);
  --token-shadow-halo-gold-rings: 0 0 0 9vw rgb(var(--token-color-ivory) / .025), 0 0 0 18vw rgb(var(--token-color-ivory) / .02);
  --token-shadow-gold-10: 0 0 10px -2px var(--color-gold);
  --token-shadow-green-525-11: 0 0 11px rgb(var(--token-color-green-525));
  --token-shadow-accent-12: 0 0 12px -4px var(--accent);
  --token-shadow-gold-14: 0 0 14px rgb(var(--token-color-ivory) / .12);
  --token-shadow-accent-16: 0 0 16px -5px var(--accent);
  --token-shadow-dash-gold-16: 0 0 16px var(--dash-gold);
  --token-shadow-accent-18-ring: 0 0 18px -4px var(--accent), inset 0 0 12px -7px var(--accent);
  --token-shadow-accent-18-ring-soft: 0 0 18px -5px var(--accent), inset 0 0 12px -7px var(--accent);
  --token-shadow-accent-18: 0 0 18px -6px var(--accent);
  --token-shadow-access-gold-18: 0 0 18px var(--access-gold);
  --token-shadow-gold-24: 0 0 24px -8px var(--color-gold);
  --token-shadow-gold-30: 0 0 30px -8px var(--color-gold);
  --token-shadow-green-650-8: 0 0 8px rgb(var(--token-color-green-650));
  --token-shadow-green-600-glow: 0 0 90px rgb(var(--token-color-green-600) / .2);
  --token-shadow-gold-9: 0 0 9px rgb(var(--token-color-ivory) / .15);
  --token-shadow-overlay-soft: 0 1.5rem 4rem rgb(var(--token-color-black) / 0.24);
  --token-shadow-overlay-strong: 0 1.5rem 4rem rgb(var(--token-color-black) / 0.5);
  --token-shadow-drop: 0 12px 40px rgb(var(--token-color-black) / .16);
  --token-shadow-drop-large: 0 30px 80px rgb(var(--token-color-black) / .16);
  --token-shadow-access-gold-8: 0 8px 22px -16px var(--access-gold);
  --token-shadow-dash-gold-8: 0 8px 24px -18px var(--dash-gold);
  --token-shadow-elev-gold: var(--md-elev-3), inset 0 0 40px -20px var(--color-gold);
  --token-shadow-drawer: -1.5rem 0 4rem rgb(var(--token-color-black) / 0.3);

  /* Motion. */
  --token-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --token-ease-ease: ease;
  --token-ease-ease-in-out: ease-in-out;
  --token-ease-ease-out: ease-out;
  --token-ease-linear: linear;
  --token-duration-fast: 180ms;
  --token-duration-normal: 360ms;
  --token-duration-enter: 480ms;
  --token-duration-slow: 560ms;
  --token-duration-200ms: 200ms;
  --token-duration-220ms: 220ms;
  --token-duration-240ms: 240ms;
  --token-duration-250ms: 250ms;
  --token-duration-300ms: 300ms;
  --token-duration-500ms: 500ms;
  --token-duration-600ms: 600ms;
  --token-duration-700ms: 700ms;
  --token-duration-900ms: 900ms;
  --token-duration-1000ms: 1000ms;
  --token-duration-1200ms: 1200ms;
  --token-duration-1400ms: 1400ms;

  /* Layout. */
  --token-layout-max-width: 1440px;
  --token-layout-gutter: 1.25rem;
  --token-layout-story-shell-gutter: clamp(1.25rem, 6vw, 5.5rem);
  --token-layout-story-section-padding: clamp(4.5rem, 10svh, 7rem);
  --token-layout-story-section-gap: clamp(2.5rem, 7vw, 6rem);
  --token-font-size-story-heading: clamp(2rem, 4.5vw, 3.4rem);
  --token-aspect-ratio-story-media: 4 / 5;

  /* Layout width scale — fixed max-width measures (rem/px/ch). Viewport
     and percentage max-widths stay literal (see survey). */
  --token-max-width-8-5rem: 8.5rem;
  --token-max-width-8rem: 8rem;
  --token-max-width-14rem: 14rem;
  --token-max-width-24rem: 24rem;
  --token-max-width-27rem: 27rem;
  --token-max-width-28rem: 28rem;
  --token-max-width-30rem: 30rem;
  --token-max-width-32rem: 32rem;
  --token-max-width-34rem: 34rem;
  --token-max-width-36rem: 36rem;
  --token-max-width-38rem: 38rem;
  --token-max-width-42rem: 42rem;
  --token-max-width-52rem: 52rem;
  --token-max-width-130px: 130px;
  --token-max-width-300px: 300px;
  --token-max-width-370px: 370px;
  --token-max-width-420px: 420px;
  --token-max-width-880px: 880px;
  --token-max-width-1040px: 1040px;
  --token-max-width-1260px: 1260px;
  --token-max-width-20ch: 20ch;
  --token-max-width-24ch: 24ch;
  --token-max-width-27ch: 27ch;
  --token-max-width-30ch: 30ch;
  --token-max-width-36ch: 36ch;
  --token-max-width-44ch: 44ch;
  --token-max-width-46ch: 46ch;
  --token-max-width-58ch: 58ch;
  --token-modal-reading-height: 44rem;

  /* ── Semantic layer (Index.css) — the eight brand roles everything else
     aliases onto, plus the Forum display, Sen body, and Afacad interface type system. ── */
  --color-bg: rgb(var(--token-color-obsidian));
  --color-surface: rgb(var(--token-color-mineral));
  --color-text: rgb(var(--token-color-white));
  --color-text-muted: rgb(var(--token-color-stone));
  --color-gold: rgb(var(--token-color-gold));
  --color-gold-hover: rgb(var(--token-color-gold-hover));
   --color-border: var(--token-color-hairline);
   --color-error: var(--token-color-support-error);

  --color-bg-subtle: var(--color-surface);
  --color-bg-muted: var(--color-surface);
  --color-text-dim: var(--color-text-muted);
   --color-accent: rgb(var(--token-color-accent));
   --color-accent-hover: rgb(var(--token-color-navy-675));
   --color-focus: rgb(var(--token-color-navy-focus));
  --color-black: var(--color-bg);
  --color-navy: var(--color-surface);
  --color-deep-blue: var(--color-surface);
  --color-silver: var(--color-text-muted);
  --color-ink: var(--color-text);

  --ease: var(--token-ease-standard);
  --dur-fast: var(--token-duration-fast);
  --dur-normal: var(--token-duration-normal);
  --dur-enter: var(--token-duration-enter);
  --dur-slow: var(--token-duration-slow);
  --dur-instant: var(--dur-fast);
  --ease-luxury: var(--ease);

  --font-headline: var(--token-font-display);
  --font-body: var(--token-font-body);
  --font-interface: var(--token-font-interface);
  --font-subheadline: var(--font-interface);
  --font-editorial: var(--font-headline);
  --font-body-th: var(--token-font-thai);

  --tap-target-min: 44px;
}
/*
 * BÉLIT Design Tokens — normalized target state
 *
 * Architecture:
 *   1. Reference tokens: raw, context-free values.
 *   2. System tokens: semantic roles that may change by theme.
 *   3. Component/global aliases: stable public API used by the product.
 *
 * Color reference tokens store RGB channels so consumers may apply alpha:
 *   rgb(var(--ref-color-gold-500) / 0.24)
 */

@layer tokens {
  /* ================================================================
     1. REFERENCE TOKENS
     ================================================================ */

  :root {
    /* ---------- Color: neutral ---------- */
    --ref-color-black: 0 0 0;
    --ref-color-white: 255 255 255;

    --ref-color-neutral-950: 11 11 10;      /* Obsidian */
    --ref-color-neutral-900: 21 21 19;      /* Mineral */
    --ref-color-neutral-800: 53 59 61;
    --ref-color-neutral-700: 85 93 96;
    --ref-color-neutral-600: 105 115 122;
    --ref-color-neutral-500: 145 153 158;
    --ref-color-neutral-400: 184 180 172;   /* Stone */
    --ref-color-neutral-300: 207 209 210;   /* Silver */
    --ref-color-neutral-200: 223 220 213;
    --ref-color-neutral-100: 241 238 231;   /* Ivory */
    --ref-color-neutral-50: 250 249 245;    /* Cream */

    /* ---------- Color: navy ---------- */
    --ref-color-navy-950: 2 3 3;
    --ref-color-navy-900: 3 6 7;
    --ref-color-navy-800: 5 13 20;
    --ref-color-navy-700: 7 22 34;
    --ref-color-navy-600: 10 23 37;
    --ref-color-navy-500: 13 41 54;
    --ref-color-navy-400: 28 49 73;
    --ref-color-navy-300: 20 42 57;
    --ref-color-navy-200: 8 18 27;
    --ref-color-navy-100: 3 13 16;

    /* ---------- Color: gold ---------- */
    --ref-color-gold-900: 118 97 63;
    --ref-color-gold-800: 128 105 69;
    --ref-color-gold-700: 166 139 98;
    --ref-color-gold-600: 178 154 117;
    --ref-color-gold-500: 180 154 103;      /* Brand gold */
    --ref-color-gold-400: 199 182 149;
    --ref-color-gold-300: 216 195 147;      /* Brand gold hover */
    --ref-color-gold-200: 224 203 172;
    --ref-color-gold-100: 242 233 216;
    --ref-color-gold-ink: 23 18 11;

    /* ---------- Color: green ---------- */
    --ref-color-green-900: 16 75 54;
    --ref-color-green-800: 20 73 66;
    --ref-color-green-700: 42 132 88;
    --ref-color-green-600: 76 121 93;
    --ref-color-green-500: 111 141 126;
    --ref-color-green-400: 138 180 154;
    --ref-color-green-300: 155 196 170;
    --ref-color-green-100: 226 238 231;

    /* ---------- Color: red ---------- */
    --ref-color-red-900: 143 62 52;
    --ref-color-red-700: 168 90 78;
    --ref-color-red-500: 190 119 108;
    --ref-color-red-300: 230 167 160;
    --ref-color-red-100: 247 234 231;
    --ref-color-red-vivid: 250 77 86;

    /* ---------- Color: supporting ---------- */
    --ref-color-blue-500: 111 135 153;
    --ref-color-cream-100: 248 247 243;
    --ref-color-cream-200: 244 241 233;
    --ref-color-cream-300: 238 235 228;
    --ref-color-cream-400: 231 227 218;
    --ref-color-line-100: 232 228 219;
    --ref-color-line-200: 223 220 213;
    --ref-color-line-300: 216 212 204;
    --ref-color-line-400: 206 202 193;

    /* ---------- Typography families ---------- */
    --ref-font-family-display: "Forum", "Noto Sans Thai", Georgia, serif;
    --ref-font-family-body: "Sen", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
    --ref-font-family-interface: "Afacad", "Sen", "Noto Sans Thai", Arial, sans-serif;
    --ref-font-family-thai: "Noto Sans Thai", "IBM Plex Sans Thai", sans-serif;

    /* ---------- Typography size scale ---------- */
    --ref-font-size-100: 0.75rem;
    --ref-font-size-200: 0.875rem;
    --ref-font-size-300: 1rem;
    --ref-font-size-400: 1.125rem;
    --ref-font-size-500: 1.25rem;
    --ref-font-size-600: 1.5rem;
    --ref-font-size-700: 2rem;
    --ref-font-size-800: clamp(2.5rem, 6vw, 4.2rem);
    --ref-font-size-900: clamp(3.5rem, 9vw, 6.5rem);

    /* ---------- Font weight ---------- */
    --ref-font-weight-regular: 400;
    --ref-font-weight-medium: 500;
    --ref-font-weight-semibold: 600;

    /* ---------- Line height ---------- */
    --ref-line-height-tight: 1;
    --ref-line-height-heading: 1.2;
    --ref-line-height-copy: 1.6;
    --ref-line-height-relaxed: 1.7;

    /* ---------- Letter spacing ---------- */
    --ref-letter-spacing-tight: -0.02em;
    --ref-letter-spacing-normal: 0;
    --ref-letter-spacing-wide: 0.02em;
    --ref-letter-spacing-label: 0.14em;
    --ref-letter-spacing-display: 0.3em;

    /* ---------- Spacing: 4px base ---------- */
    --ref-space-0: 0;
    --ref-space-1: 0.25rem;
    --ref-space-2: 0.5rem;
    --ref-space-3: 0.75rem;
    --ref-space-4: 1rem;
    --ref-space-5: 1.5rem;
    --ref-space-6: 2rem;
    --ref-space-7: 2.5rem;
    --ref-space-8: 3rem;
    --ref-space-9: 4rem;
    --ref-space-10: 5rem;
    --ref-space-11: 6rem;
    --ref-space-12: 8rem;

    /* ---------- Shape ---------- */
    --ref-radius-none: 0;
    --ref-radius-xs: 2px;
    --ref-radius-sm: 4px;
    --ref-radius-md: 8px;
    --ref-radius-lg: 12px;
    --ref-radius-xl: 1rem;
    --ref-radius-2xl: 1.5rem;
    --ref-radius-full: 999px;
    --ref-border-width-thin: 1px;
    --ref-border-width-thick: 2px;

    /* ---------- Elevation ---------- */
    --ref-shadow-sm: 0 8px 24px rgb(var(--ref-color-black) / 0.12);
    --ref-shadow-md: 0 12px 40px rgb(var(--ref-color-black) / 0.16);
    --ref-shadow-lg: 0 30px 80px rgb(var(--ref-color-black) / 0.16);
    --ref-shadow-overlay: 0 1.5rem 4rem rgb(var(--ref-color-black) / 0.32);
    --ref-shadow-drawer: -1.5rem 0 4rem rgb(var(--ref-color-black) / 0.3);
    --ref-shadow-glow-gold: 0 0 24px -8px rgb(var(--ref-color-gold-500));
    --ref-shadow-glow-green: 0 0 90px rgb(var(--ref-color-green-700) / 0.2);

    /* ---------- Motion ---------- */
    --ref-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
    --ref-ease-in-out: ease-in-out;
    --ref-ease-out: ease-out;
    --ref-ease-linear: linear;

    --ref-duration-instant: 120ms;
    --ref-duration-fast: 180ms;
    --ref-duration-normal: 360ms;
    --ref-duration-enter: 480ms;
    --ref-duration-slow: 560ms;
    --ref-duration-slower: 900ms;

    /* ---------- Layout ---------- */
    --ref-size-touch-target: 44px;
    --ref-size-control-primary: 48px;
    --ref-layout-gutter: 1.25rem;
    --ref-layout-max-width: 90rem; /* 1440px */

    --ref-measure-xs: 20ch;
    --ref-measure-sm: 30ch;
    --ref-measure-md: 44ch;
    --ref-measure-lg: 58ch;

    --ref-container-xs: 20rem;
    --ref-container-sm: 28rem;
    --ref-container-md: 36rem;
    --ref-container-lg: 52rem;
    --ref-container-xl: 65rem;
    --ref-container-2xl: 78.75rem;
  }

  /* ================================================================
     2. SYSTEM TOKENS — DARK THEME (DEFAULT)
     ================================================================ */

  :root,
  [data-theme="dark"] {
    color-scheme: dark;

    /* Background */
    --sys-color-bg-canvas: rgb(var(--ref-color-neutral-950));
    --sys-color-bg-surface: rgb(var(--ref-color-neutral-900));
    --sys-color-bg-subtle: rgb(var(--ref-color-navy-800));
    --sys-color-bg-elevated: rgb(var(--ref-color-navy-700));
    --sys-color-bg-inverse: rgb(var(--ref-color-neutral-50));

    /* Text */
--sys-color-text-primary: rgb(var(--ref-color-neutral-50));
--sys-color-text-secondary: rgb(var(--ref-color-neutral-400));
--sys-color-text-tertiary: rgb(var(--ref-color-neutral-500));
--sys-color-text-inverse: rgb(var(--ref-color-neutral-950));
--sys-color-text-on-accent: rgb(var(--ref-color-neutral-50));

    /* Border */
    --sys-color-border-subtle: rgb(var(--ref-color-neutral-100) / 0.12);
    --sys-color-border-default: rgb(var(--ref-color-neutral-100) / 0.20);
    --sys-color-border-strong: rgb(var(--ref-color-neutral-100) / 0.36);

    /* Accent and feedback */
--sys-color-accent: rgb(26 36 49);
--sys-color-accent-hover: rgb(var(--ref-color-neutral-900));
    --sys-color-focus: rgb(var(--token-color-navy-focus));
    --sys-color-success: rgb(var(--ref-color-green-400));
    --sys-color-info: rgb(var(--ref-color-blue-500));
    --sys-color-warning: rgb(var(--ref-color-gold-300));
    --sys-color-error: rgb(var(--ref-color-red-vivid));

    /* Interactive state overlays */
    --sys-color-state-hover: rgb(var(--ref-color-white) / 0.06);
    --sys-color-state-pressed: rgb(var(--ref-color-white) / 0.10);
    --sys-color-state-disabled: rgb(var(--ref-color-white) / 0.32);

    /* Elevation */
    --sys-shadow-surface: var(--ref-shadow-md);
    --sys-shadow-overlay: var(--ref-shadow-overlay);
    --sys-shadow-accent: var(--ref-shadow-glow-gold);
  }

  /* ================================================================
     2B. SYSTEM TOKENS — LIGHT THEME
     ================================================================ */

  [data-theme="light"] {
    color-scheme: light;

    --sys-color-bg-canvas: rgb(var(--ref-color-neutral-50));
    --sys-color-bg-surface: rgb(var(--ref-color-cream-100));
    --sys-color-bg-subtle: rgb(var(--ref-color-cream-200));
    --sys-color-bg-elevated: rgb(var(--ref-color-white));
    --sys-color-bg-inverse: rgb(var(--ref-color-neutral-950));

--sys-color-text-primary: rgb(26 36 49);
--sys-color-text-secondary: rgb(var(--ref-color-neutral-600));
--sys-color-text-tertiary: rgb(var(--ref-color-neutral-500));
--sys-color-text-inverse: rgb(var(--ref-color-neutral-100));
--sys-color-text-on-accent: rgb(var(--ref-color-neutral-50));

    --sys-color-border-subtle: rgb(var(--ref-color-line-200));
    --sys-color-border-default: rgb(var(--ref-color-line-300));
    --sys-color-border-strong: rgb(var(--ref-color-line-400));

--sys-color-accent: rgb(26 36 49);
--sys-color-accent-hover: rgb(var(--ref-color-neutral-800));
    --sys-color-focus: rgb(var(--token-color-navy-focus));
    --sys-color-success: rgb(var(--ref-color-green-700));
    --sys-color-info: rgb(var(--ref-color-blue-500));
    --sys-color-warning: rgb(var(--ref-color-gold-800));
    --sys-color-error: rgb(var(--ref-color-red-900));

    --sys-color-state-hover: rgb(var(--ref-color-black) / 0.04);
    --sys-color-state-pressed: rgb(var(--ref-color-black) / 0.08);
    --sys-color-state-disabled: rgb(var(--ref-color-black) / 0.32);

    --sys-shadow-surface: var(--ref-shadow-sm);
    --sys-shadow-overlay: var(--ref-shadow-md);
    --sys-shadow-accent: var(--ref-shadow-glow-gold);
  }

  /* ================================================================
     3. PUBLIC API / ROLE TOKENS
     Components should consume these tokens, not reference tokens.
     ================================================================ */

  :root {
    /* Global color roles */
    --color-bg: var(--sys-color-bg-canvas);
    --color-surface: var(--sys-color-bg-surface);
    --color-surface-subtle: var(--sys-color-bg-subtle);
    --color-surface-elevated: var(--sys-color-bg-elevated);
    --color-surface-inverse: var(--sys-color-bg-inverse);

    --color-text: var(--sys-color-text-primary);
    --color-text-muted: var(--sys-color-text-secondary);
    --color-text-subtle: var(--sys-color-text-tertiary);
    --color-text-inverse: var(--sys-color-text-inverse);

    --color-border-subtle: var(--sys-color-border-subtle);
    --color-border: var(--sys-color-border-default);
    --color-border-strong: var(--sys-color-border-strong);

    --color-accent: var(--sys-color-accent);
    --color-accent-hover: var(--sys-color-accent-hover);
    --color-on-accent: var(--sys-color-text-on-accent);
    --color-focus: var(--sys-color-focus);
    --color-success: var(--sys-color-success);
    --color-info: var(--sys-color-info);
    --color-warning: var(--sys-color-warning);
    --color-error: var(--sys-color-error);

    /* Typography roles */
    --font-display: var(--ref-font-family-display);
    --font-body: var(--ref-font-family-body);
    --font-interface: var(--ref-font-family-interface);
    --font-thai: var(--ref-font-family-thai);

    --font-size-display-xl: var(--ref-font-size-900);
    --font-size-display: var(--ref-font-size-800);
    --font-size-heading-lg: var(--ref-font-size-700);
    --font-size-heading-md: var(--ref-font-size-600);
    --font-size-heading-sm: var(--ref-font-size-500);
    --font-size-body-lg: var(--ref-font-size-400);
    --font-size-body: var(--ref-font-size-300);
    --font-size-caption: var(--ref-font-size-200);
    --font-size-label: var(--ref-font-size-100);

    --line-height-display: var(--ref-line-height-tight);
    --line-height-heading: var(--ref-line-height-heading);
    --line-height-body: var(--ref-line-height-copy);
    --line-height-body-relaxed: var(--ref-line-height-relaxed);

    --letter-spacing-body: var(--ref-letter-spacing-normal);
    --letter-spacing-cta: var(--ref-letter-spacing-wide);
    --letter-spacing-label: var(--ref-letter-spacing-label);
    --letter-spacing-eyebrow: var(--ref-letter-spacing-display);

    /* Spacing roles */
    --space-0: var(--ref-space-0);
    --space-1: var(--ref-space-1);
    --space-2: var(--ref-space-2);
    --space-3: var(--ref-space-3);
    --space-4: var(--ref-space-4);
    --space-5: var(--ref-space-5);
    --space-6: var(--ref-space-6);
    --space-7: var(--ref-space-7);
    --space-8: var(--ref-space-8);
    --space-9: var(--ref-space-9);
    --space-10: var(--ref-space-10);
    --space-11: var(--ref-space-11);
    --space-12: var(--ref-space-12);

    /* Shape and elevation roles */
    --radius-xs: var(--ref-radius-xs);
    --radius-sm: var(--ref-radius-sm);
    --radius-md: var(--ref-radius-md);
    --radius-lg: var(--ref-radius-lg);
    --radius-xl: var(--ref-radius-xl);
    --radius-2xl: var(--ref-radius-2xl);
    --radius-full: var(--ref-radius-full);

    --shadow-sm: var(--ref-shadow-sm);
    --shadow-md: var(--ref-shadow-md);
    --shadow-lg: var(--ref-shadow-lg);
    --shadow-overlay: var(--sys-shadow-overlay);
    --shadow-accent: var(--sys-shadow-accent);

    /* Motion roles */
    --ease-standard: var(--ref-ease-standard);
    --ease-in-out: var(--ref-ease-in-out);
    --ease-out: var(--ref-ease-out);
    --ease-linear: var(--ref-ease-linear);

    --duration-instant: var(--ref-duration-instant);
    --duration-fast: var(--ref-duration-fast);
    --duration-normal: var(--ref-duration-normal);
    --duration-enter: var(--ref-duration-enter);
    --duration-slow: var(--ref-duration-slow);
    --duration-slower: var(--ref-duration-slower);

    /* Layout roles */
    --layout-max-width: var(--ref-layout-max-width);
    --layout-gutter: var(--ref-layout-gutter);
    --measure-copy: var(--ref-measure-lg);
    --tap-target-min: var(--ref-size-touch-target);

    /* Component foundations */
    --button-min-height: var(--ref-size-touch-target);
    --button-min-height-primary: var(--ref-size-control-primary);
    --button-radius: var(--ref-radius-xs);
    --button-padding-inline: var(--ref-space-5);
    --button-gap: var(--ref-space-2);
    --button-transition:
      background-color var(--ref-duration-fast) var(--ref-ease-standard),
      border-color var(--ref-duration-fast) var(--ref-ease-standard),
      color var(--ref-duration-fast) var(--ref-ease-standard),
      transform var(--ref-duration-fast) var(--ref-ease-standard);

    --input-min-height: var(--ref-size-touch-target);
    --input-radius: var(--ref-radius-md);
    --input-padding-inline: var(--ref-space-4);
    --input-border: var(--ref-border-width-thin) solid var(--sys-color-border-default);
    --input-focus-ring: 0 0 0 3px rgb(var(--ref-color-gold-300) / 0.24);

    --card-radius: var(--ref-radius-xl);
    --card-padding: var(--ref-space-5);
    --card-bg: var(--sys-color-bg-surface);
    --card-border: var(--ref-border-width-thin) solid var(--sys-color-border-subtle);
    --card-shadow: var(--sys-shadow-surface);

    --overlay-backdrop: rgb(var(--ref-color-black) / 0.64);
  }

  /* ================================================================
     4. TEMPORARY COMPATIBILITY ALIASES
     Remove after all consumers use the public role tokens above.
     This block maps commonly used legacy --token-* names to the new
     ref/sys/public tokens so existing component CSS continues to work.
     Expand or remove once all sources use the public role tokens.
     ================================================================ */

  :root {
    /* legacy semantic aliases (kept for backwards compatibility) */
    --color-bg-subtle: var(--color-surface-subtle);
    --color-bg-muted: var(--color-surface-subtle);
    --color-text-dim: var(--color-text-muted);
    --color-gold: rgb(var(--ref-color-gold-500));
    --color-gold-hover: rgb(var(--ref-color-gold-300));
    --color-black: var(--color-bg);
    --color-navy: var(--color-surface);
    --color-deep-blue: var(--color-surface-subtle);
    --color-silver: var(--color-text-muted);
    --color-ink: var(--color-text);

    --ease: var(--ease-standard);
    --ease-luxury: var(--ease-standard);
    --dur-instant: var(--duration-instant);
    --dur-fast: var(--duration-fast);
    --dur-normal: var(--duration-normal);
    --dur-enter: var(--duration-enter);
    --dur-slow: var(--duration-slow);

    --font-headline: var(--font-display);
    --font-subheadline: var(--font-interface);
    --font-editorial: var(--font-display);
    --font-body-th: var(--font-thai);

    /* ---------- LEGACY TOKEN COMPATIBILITY (common tokens) ---------- */
    /* Colors (token-color-*) */
    --token-color-obsidian: var(--ref-color-neutral-950);
    --token-color-mineral: var(--ref-color-neutral-900);
    --token-color-ivory: var(--ref-color-neutral-100);
    --token-color-stone: var(--ref-color-neutral-400);
    --token-color-gold: var(--ref-color-gold-500);
    --token-color-gold-hover: var(--ref-color-gold-300);
    --token-color-error: var(--ref-color-red-vivid);
    --token-color-black: var(--ref-color-black);
    --token-color-white: var(--ref-color-white);
    --token-color-ink: var(--ref-color-line-100);
    --token-color-silver: var(--ref-color-neutral-300);
    --token-color-navy-950: var(--ref-color-navy-950);
    --token-color-navy-900: var(--ref-color-navy-900);
    --token-color-navy-800: var(--ref-color-navy-800);
    --token-color-navy-700: var(--ref-color-navy-700);
    --token-color-navy-500: var(--ref-color-navy-500);
    --token-color-navy-400: var(--ref-color-navy-400);
    --token-color-navy-300: var(--ref-color-navy-300);
    --token-color-navy-200: var(--ref-color-navy-200);
    --token-color-navy-100: var(--ref-color-navy-100);

    /* Fonts */
    --token-font-display: var(--ref-font-family-display);
    --token-font-body: var(--ref-font-family-body);
    --token-font-interface: var(--ref-font-family-interface);
    --token-font-thai: var(--ref-font-family-thai);

    /* Font sizes */
    --token-font-size-h1: var(--ref-font-size-800);
    --token-font-size-h2: var(--ref-font-size-700);
    --token-font-size-h3: var(--ref-font-size-600);
    --token-font-size-body: var(--ref-font-size-300);
    --token-font-size-caption: var(--ref-font-size-200);
    --token-font-size-cta: var(--ref-font-size-300);
    --token-font-size-label: var(--ref-font-size-100);
    --token-font-size-tag: 0.625rem;

    /* Spacing steps */
    --token-space-0: var(--ref-space-0);
    --token-space-1: var(--ref-space-1);
    --token-space-2: var(--ref-space-2);
    --token-space_3: var(--ref-space-3);
    --token-space-3: var(--ref-space-3);
    --token-space-4: var(--ref-space-4);
    --token-space-5: var(--ref-space-5);
    --token-space-6: var(--ref-space-6);
    --token-space-7: var(--ref-space-7);
    --token-space-8: var(--ref-space-8);
    --token-space-9: var(--ref-space-9);
    --token-space-10: var(--ref-space-10);
    --token-space-11: var(--ref-space-11);
    --token-space-12: var(--ref-space-12);

    /* ---------- LEGACY SPACING VALUE SCALE (copied from DesignTokens.css) ---------- */
    --token-spacing-0: 0;
    --token-spacing-0-1: 0.1rem;
    --token-spacing-0-12: 0.12rem;
    --token-spacing-0-125: 0.125rem;
    --token-spacing-0-15: 0.15rem;
    --token-spacing-0-16: 0.16rem;
    --token-spacing-0-2: 0.2rem;
    --token-spacing-0-28: 0.28rem;
    --token-spacing-0-3: 0.3rem;
    --token-spacing-0-35: 0.35rem;
    --token-spacing-0-36: 0.36rem;
    --token-spacing-0-375: 0.375rem;
    --token-spacing-0-38: 0.38rem;
    --token-spacing-0-4: 0.4rem;
    --token-spacing-0-42: 0.42rem;
    --token-spacing-0-45: 0.45rem;
    --token-spacing-0-48: 0.48rem;
    --token-spacing-0-55: 0.55rem;
    --token-spacing-0-6: 0.6rem;
    --token-spacing-0-625: 0.625rem;
    --token-spacing-0-65: 0.65rem;
    --token-spacing-0-7: 0.7rem;
    --token-spacing-0-72: 0.72rem;
    --token-spacing-0-78: 0.78rem;
    --token-spacing-0-8: 0.8rem;
    --token-spacing-0-85: 0.85rem;
    --token-spacing-0-875: 0.875rem;
    --token-spacing-0-9: 0.9rem;
    --token-spacing-0-95: 0.95rem;
    --token-spacing-1px: 1px;
    --token-spacing-1-1: 1.1rem;
    --token-spacing-1-125: 1.125rem;
    --token-spacing-1-15: 1.15rem;
    --token-spacing-1-2: 1.2rem;
    --token-spacing-1-25: 1.25rem;
    --token-spacing-1-3: 1.3rem;
    --token-spacing-1-35: 1.35rem;
    --token-spacing-1-4: 1.4rem;
    --token-spacing-1-55: 1.55rem;
    --token-spacing-1-6: 1.6rem;
    --token-spacing-1-7: 1.7rem;
    --token-spacing-1-75: 1.75rem;
    --token-spacing-1-8: 1.8rem;
    --token-spacing-2px: 2px;
    --token-spacing-2-1: 2.1rem;
    --token-spacing-2-2: 2.2rem;
    --token-spacing-2-4: 2.4rem;
    --token-spacing-2-6: 2.6rem;
    --token-spacing-2-75: 2.75rem;
    --token-spacing-3-25: 3.25rem;
    --token-spacing-3-5: 3.5rem;
    --token-spacing-4px: 4px;
    --token-spacing-4-25: 4.25rem;
    --token-spacing-4-5: 4.5rem;
    --token-spacing-5-5: 5.5rem;
    --token-spacing-6-5: 6.5rem;
    --token-spacing-7-25: 7.25rem;
    --token-spacing-7-5: 7.5rem;
    --token-spacing-8px: 8px;
    --token-spacing-8: 8rem;
    --token-spacing-28px: 28px;

    /* Radii */
    --token-radius-xs: var(--ref-radius-xs);
    --token-radius-sm: var(--ref-radius-sm);
    --token-radius-md: var(--ref-radius-md);
    --token-radius-lg: var(--ref-radius-lg);
    --token-radius-xl: var(--ref-radius-xl);
    --token-radius-pill: var(--ref-radius-full);
    --token-radius-0: var(--ref-radius-none);

    /* Shadows */
    --token-shadow-overlay: var(--ref-shadow-overlay);
    --token-shadow-drop-large: var(--ref-shadow-lg);
    --token-shadow-drop: var(--ref-shadow-md);
    --token-shadow-accent-12: var(--ref-shadow-accent);

    /* Motion */
    --token-ease-standard: var(--ref-ease-standard);
    --token-duration-250ms: var(--ref-duration-instant);
    --token-duration-500ms: var(--ref-duration-normal);

    /* Component foundations */
    --token-button-min-height: var(--button-min-height);
    --token-button-min-height-primary: var(--button-min-height-primary);
    --token-button-radius: var(--button-radius);
    --token-input-min-height: var(--input-min-height);
    --token-input-radius: var(--input-radius);
  }
}

/* ================================================================
   GLOBAL TYPOGRAPHY DEFAULTS
   Ensure semantic heading elements use the design system's display
   face. This keeps headings consistent while components migrate.
   Remove or refine selectors later if a component requires a different
   heading treatment.
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Common utility heading classes used across the codebase */
.heading, .heading-1, .heading-2, .heading-3 {
  font-family: var(--font-display);
}
.mig-mt-1 { margin-top: var(--token-space-4); }
.mig-mt-0-9 { margin-top: var(--token-spacing-0-9); }
.mig-mt-1-5 { margin-top: var(--token-space-5); }
.mig-mt-0-5 { margin-top: var(--token-space-2); }
.mig-mb-0 { margin-bottom: 0; }
.mig-mb-token-space-5 { margin-bottom: var(--token-space-5); }

.mig-absolute-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.mig-fullsize { width: 100%; height: 100%; }
.mig-object-contain { -o-object-fit: contain; object-fit: contain; }
.mig-bg-0b0b0b { background: var(--color-bg); }
.mig-margin-0 { margin: 0; }

.mig-font-headline-full { font-family: var(--font-headline); font-size: var(--token-font-size-h1); line-height: var(--token-line-height-1); letter-spacing: var(--token-letter-spacing-0); }
/* Smaller display/heading utility for section-level headings */
.mig-font-heading-lg { font-family: var(--font-headline); font-size: var(--token-font-size-h2); line-height: var(--token-line-height-1-2); letter-spacing: var(--token-letter-spacing-0); }
.mig-font-body { font-family: var(--font-body); }
.mig-font-interface { font-family: var(--font-interface); }

/* appear-delay utility classes used by carousel */
.mig-appear-delay-120 { --appear-delay: 120ms; }
.mig-appear-delay-280 { --appear-delay: 280ms; }
*, ::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:  ;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }
  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}
.pointer-events-none {
  pointer-events: none !important;
}
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}
.collapse {
  visibility: collapse !important;
}
.static {
  position: static !important;
}
.fixed {
  position: fixed !important;
}
.absolute {
  position: absolute !important;
}
.relative {
  position: relative !important;
}
.sticky {
  position: sticky !important;
}
.inset-0 {
  inset: 0px !important;
}
.inset-x-0 {
  left: 0px !important;
  right: 0px !important;
}
.bottom-0 {
  bottom: 0px !important;
}
.left-5 {
  left: 1.25rem !important;
}
.top-5 {
  top: 1.25rem !important;
}
.isolate {
  isolation: isolate !important;
}
.z-10 {
  z-index: 10 !important;
}
.-mx-5 {
  margin-left: -1.25rem !important;
  margin-right: -1.25rem !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.mb-3 {
  margin-bottom: 0.75rem !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 0.75rem !important;
}
.block {
  display: block !important;
}
.inline {
  display: inline !important;
}
.flex {
  display: flex !important;
}
.inline-flex {
  display: inline-flex !important;
}
.table {
  display: table !important;
}
.grid {
  display: grid !important;
}
.contents {
  display: contents !important;
}
.hidden {
  display: none !important;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5 !important;
}
.h-24 {
  height: 6rem !important;
}
.h-3\/5 {
  height: 60% !important;
}
.h-4 {
  height: 1rem !important;
}
.h-6 {
  height: 1.5rem !important;
}
.h-8 {
  height: 2rem !important;
}
.h-full {
  height: 100% !important;
}
.h-px {
  height: 1px !important;
}
.min-h-screen {
  min-height: 100vh !important;
}
.w-4 {
  width: 1rem !important;
}
.w-6 {
  width: 1.5rem !important;
}
.w-8 {
  width: 2rem !important;
}
.w-full {
  width: 100% !important;
}
.w-px {
  width: 1px !important;
}
.min-w-\[15rem\] {
  min-width: 15rem !important;
}
.max-w-\[15rem\] {
  max-width: 15rem !important;
}
.max-w-\[44ch\] {
  max-width: 44ch !important;
}
.max-w-\[46ch\] {
  max-width: 46ch !important;
}
.max-w-md {
  max-width: 28rem !important;
}
.flex-1 {
  flex: 1 1 0% !important;
}
.shrink {
  flex-shrink: 1 !important;
}
.shrink-0 {
  flex-shrink: 0 !important;
}
.grow {
  flex-grow: 1 !important;
}
.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)) !important;
}
.cursor-pointer {
  cursor: pointer !important;
}
.resize {
  resize: both !important;
}
.list-none {
  list-style-type: none !important;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-col {
  flex-direction: column !important;
}
.items-center {
  align-items: center !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.gap-2 {
  gap: 0.5rem !important;
}
.gap-4 {
  gap: 1rem !important;
}
.gap-5 {
  gap: 1.25rem !important;
}
.gap-6 {
  gap: 1.5rem !important;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) !important;
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)) !important;
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(2rem * var(--tw-space-y-reverse)) !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.rounded {
  border-radius: 0.25rem !important;
}
.rounded-\[2px\] {
  border-radius: 2px !important;
}
.rounded-\[3px\] {
  border-radius: 3px !important;
}
.rounded-\[4px\] {
  border-radius: 4px !important;
}
.rounded-lg {
  border-radius: 0.5rem !important;
}
.rounded-b-\[4px\] {
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
.border {
  border-width: 1px !important;
}
.border-b {
  border-bottom-width: 1px !important;
}
.border-gold\/40 {
  border-color: rgb(var(--token-color-gold) / 0.4) !important;
}
.border-gold\/70 {
  border-color: rgb(var(--token-color-gold) / 0.7) !important;
}
.border-gray-200 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
}
.border-gray-300 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
}
.border-stone\/10 {
  border-color: rgb(var(--token-color-stone) / 0.1) !important;
}
.bg-black\/50 {
  background-color: rgb(var(--token-color-obsidian) / 0.5) !important;
}
.bg-gold\/90 {
  background-color: rgb(var(--token-color-gold) / 0.9) !important;
}
.bg-gray-300 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important;
}
.bg-gray-50 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
}
.bg-stone\/20 {
  background-color: rgb(var(--token-color-stone) / 0.2) !important;
}
.bg-surface {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--token-color-mineral) / var(--tw-bg-opacity, 1)) !important;
}
.bg-surface\/40 {
  background-color: rgb(var(--token-color-mineral) / 0.4) !important;
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important;
}
.from-black {
  --tw-gradient-from: rgb(var(--token-color-obsidian) / 1) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--token-color-obsidian) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.via-black\/70 {
  --tw-gradient-to: rgb(var(--token-color-obsidian) / 0)  var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--token-color-obsidian) / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.to-indigo-100 {
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position) !important;
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
}
.object-cover {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
.p-0 {
  padding: 0px !important;
}
.p-4 {
  padding: 1rem !important;
}
.p-6 {
  padding: 1.5rem !important;
}
.p-8 {
  padding: 2rem !important;
}
.px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.py-12 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.py-8 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}
.text-\[0\.625rem\] {
  font-size: 0.625rem !important;
}
.text-\[0\.75rem\] {
  font-size: 0.75rem !important;
}
.text-\[0\.8125rem\] {
  font-size: 0.8125rem !important;
}
.text-\[0\.875rem\] {
  font-size: 0.875rem !important;
}
.text-\[0\.9375rem\] {
  font-size: 0.9375rem !important;
}
.text-\[clamp\(1\.25rem\2c 2\.2vw\2c 1\.75rem\)\] {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
}
.text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}
.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
.text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}
.font-bold {
  font-weight: 700 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.lowercase {
  text-transform: lowercase !important;
}
.capitalize {
  text-transform: capitalize !important;
}
.leading-relaxed {
  line-height: 1.625 !important;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em !important;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em !important;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em !important;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em !important;
}
.tracking-\[0\.28em\] {
  letter-spacing: 0.28em !important;
}
.text-blue-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1)) !important;
}
.text-gold {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--token-color-gold) / var(--tw-text-opacity, 1)) !important;
}
.text-gold\/70 {
  color: rgb(var(--token-color-gold) / 0.7) !important;
}
.text-gray-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important;
}
.text-gray-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important;
}
.text-gray-900 {
  --tw-text-opacity: 1 !important;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
}
.text-ivory {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--token-color-ivory) / var(--tw-text-opacity, 1)) !important;
}
.text-red-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
}
.text-stone\/60 {
  color: rgb(var(--token-color-stone) / 0.6) !important;
}
.text-stone\/70 {
  color: rgb(var(--token-color-stone) / 0.7) !important;
}
.text-stone\/75 {
  color: rgb(var(--token-color-stone) / 0.75) !important;
}
.text-surface {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--token-color-mineral) / var(--tw-text-opacity, 1)) !important;
}
.text-surface\/70 {
  color: rgb(var(--token-color-mineral) / 0.7) !important;
}
.underline {
  text-decoration-line: underline !important;
}
.overline {
  text-decoration-line: overline !important;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.outline {
  outline-style: solid !important;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.blur {
  --tw-blur: blur(8px) !important;
  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) !important;
}
.invert {
  --tw-invert: invert(100%) !important;
  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) !important;
}
.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) !important;
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px) !important;
  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) !important;
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-shadow {
  transition-property: box-shadow !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.duration-500 {
  transition-duration: 500ms !important;
}

@font-face {
  font-family: "Forum";
  src:
    url("/fonts/Forum-Regular.woff2") format("woff2"),
    url("/fonts/Forum-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Afacad";
  src:
    url("/fonts/Afacad-VariableFont_wght.woff2") format("woff2"),
    url("/fonts/Afacad-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Thai";
  src:
    url("/fonts/NotoSansThai-Medium.woff2") format("woff2"),
    url("/fonts/NotoSansThai-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Sen";
  src:
    url("/fonts/Sen-VariableFont_wght.woff2") format("woff2"),
    url("/fonts/Sen-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  /* ── Bélit design system ──────────────────────────────────────────────────
     One palette. The site ran two in parallel: the warm obsidian and gold of
     the landing page, and a cooler navy Carbon theme behind the app screens,
     each with its own black, its own ivory and its own gold. These eight are
     the whole set, and everything below is an alias onto them — the `--cds-*`
     and `--md-*` layers included, so the app screens inherit the brand rather
     than approximating it. BrandHome.css holds the same values on `.belit-home`
     now resolve from `styles/global/DesignTokens.css`, the single editable source. */
  --color-bg: rgb(var(--token-color-obsidian));
  --color-surface: rgb(var(--token-color-mineral));
  --color-text: rgb(var(--token-color-white));
  --color-text-muted: rgb(var(--token-color-stone));
  --color-gold: rgb(var(--token-color-gold));
  --color-gold-hover: rgb(var(--token-color-gold-hover));
  --color-accent: rgb(var(--token-color-accent));
   --color-border: var(--token-color-hairline);
   --color-error: var(--token-color-support-error);

  /* Aliases kept so existing rules keep resolving; all point at the eight. */
  --color-bg-subtle: var(--color-surface);
  --color-bg-muted: var(--color-surface);
  --color-text-dim: var(--color-text-muted);
   --color-accent-hover: var(--color-accent);
   --color-focus: rgb(var(--token-color-navy-focus));
  --color-black: var(--color-bg);
  --color-navy: var(--color-surface);
  --color-deep-blue: var(--color-surface);
  --color-silver: var(--color-text-muted);
  --color-ink: var(--color-text);

  /* Motion: one curve, four durations. Everything else aliases onto these. */
  --ease: var(--token-ease-standard);
  --dur-fast: var(--token-duration-fast);
  --dur-normal: var(--token-duration-normal);
  --dur-enter: var(--token-duration-enter);
  --dur-slow: var(--token-duration-slow);
  --dur-instant: var(--dur-fast);
  --ease-luxury: var(--ease);

   /* ── Bélit brand type: two families ───────────────────────────────────────
       Forum for display, Sen for body copy, and Afacad for interface labels,
      navigation, and controls. */
  --font-headline: var(--token-font-display);
  --font-body: var(--token-font-body);
  --font-interface: var(--token-font-interface);
  --font-subheadline: var(--font-interface);
  --font-editorial: var(--font-headline);
  --font-body-th: var(--token-font-thai);

  /* Carbon Gray 100 roles, themed with the Bélit palette. Carbon mechanics
     remain intact while the editorial display face and imagery carry the brand. */
  --cds-background: var(--color-bg);
  --cds-layer-01: var(--color-surface);
  --cds-layer-02: var(--color-surface);
  --cds-layer-03: var(--color-surface);
  --cds-field-01: var(--color-surface);
  --cds-field-02: var(--color-surface);
  --cds-text-primary: var(--color-text);
  --cds-text-secondary: var(--color-text-muted);
  /* Was #8d8d8d, which fails AA against the page. Labels and placeholders are
     read, not decoration. */
  --cds-text-placeholder: rgb(var(--token-color-ivory) / 0.65);
  --cds-text-on-color: rgb(var(--token-color-ivory));
  --cds-icon-primary: var(--color-text);
  --cds-icon-secondary: var(--color-text-muted);
  --cds-icon-on-color: rgb(var(--token-color-ivory));
  --cds-interactive: var(--color-accent);
  --cds-link-primary: var(--color-text);
  --cds-link-primary-hover: var(--color-silver);
  --cds-border-subtle-00: var(--color-border);
  --cds-border-subtle-01: var(--color-border);
  --cds-border-subtle-02: var(--color-border);
  --cds-border-strong-01: rgb(var(--token-color-ivory) / 0.35);
  --cds-focus: var(--color-focus);
  --cds-focus-inset: var(--color-bg);
  --cds-support-error: var(--color-error);
  --cds-text-error: rgb(var(--token-color-error-light));
  --cds-overlay: rgb(var(--token-color-black) / 0.72);

  /* Carbon spacing, grid, and motion tokens used by custom brand compositions. */
  --cds-spacing-01: 0.125rem;
  --cds-spacing-02: 0.25rem;
  --cds-spacing-03: 0.5rem;
  --cds-spacing-04: 0.75rem;
  --cds-spacing-05: 1rem;
  --cds-spacing-06: 1.5rem;
  --cds-spacing-07: 2rem;
  --cds-spacing-08: 2.5rem;
  --cds-spacing-09: 3rem;
  --cds-spacing-10: 4rem;
  --cds-spacing-11: 5rem;
  --cds-spacing-12: 6rem;
  --cds-grid-gutter: 2rem;
  --cds-grid-margin: var(--token-space-4);
  --cds-grid-max: 99rem;
  /* Carbon shipped three curves and six durations; the system asks for one and
     four. These stay as names so nothing has to be renamed at the call site. */
  --cds-motion-standard-productive: var(--ease);
  --cds-motion-standard-expressive: var(--ease);
  --cds-motion-entrance-productive: var(--ease);
  --cds-duration-fast-01: var(--dur-fast);
  --cds-duration-fast-02: var(--dur-fast);
  --cds-duration-moderate-01: var(--dur-normal);
  --cds-duration-moderate-02: var(--dur-normal);
  --cds-duration-slow-01: var(--dur-enter);
  --cds-duration-slow-02: var(--dur-slow);

  /* Existing feature styles consume these role aliases while their components
     are progressively replaced by Carbon React primitives. */
  --md-primary: var(--cds-interactive);
  --md-on-primary: var(--cds-text-on-color);
  --md-primary-container: var(--cds-layer-02);
  --md-on-primary-container: var(--cds-text-primary);
  --md-secondary: var(--cds-text-secondary);
  --md-on-secondary: var(--cds-background);
  --md-secondary-container: var(--cds-layer-02);
  --md-on-secondary-container: var(--cds-text-primary);
  --md-tertiary: var(--cds-link-primary);
  --md-on-tertiary: var(--cds-background);
  --md-surface: var(--cds-background);
  --md-surface-dim: var(--cds-background);
  --md-surface-bright: var(--cds-layer-03);
  --md-surface-container-lowest: var(--cds-background);
  --md-surface-container-low: var(--cds-layer-01);
  --md-surface-container: var(--cds-layer-02);
  --md-surface-container-high: var(--cds-layer-03);
  --md-surface-container-highest: var(--cds-field-02);
  --md-on-surface: var(--cds-text-primary);
  --md-on-surface-variant: var(--cds-text-secondary);
  --md-outline: var(--cds-border-strong-01);
  --md-outline-variant: var(--cds-border-subtle-01);
  --md-outline-gold: rgb(var(--token-color-ivory) / 0.48);
  --md-outline-gold-variant: rgb(var(--token-color-ivory) / 0.18);
  --md-error: var(--cds-support-error);
  --md-on-error: var(--cds-text-on-color);
  --md-scrim: var(--cds-overlay);
  --md-shape-xs: var(--token-radius-xs);
  --md-shape-sm: var(--token-radius-sm);
  /* Cards, one radius across both grounds: panel and glass. */
  --md-shape-md: var(--token-radius-md);
  --md-shape-lg: var(--token-radius-md);
  --md-shape-xl: var(--token-radius-lg);
  --md-shape-full: var(--token-radius-pill);
  --md-elev-0: none;
  --md-elev-1: none;
  --md-elev-2: none;
  --md-elev-3: none;
  --md-elev-4: none;
  --md-elev-5: none;
  --md-state-hover: 0.08;
  --md-state-focus: 0.12;
  --md-state-pressed: 0.16;
  --md-ease-standard: var(--cds-motion-standard-productive);
  --md-ease-emphasized: var(--cds-motion-standard-expressive);
  --md-dur-short: var(--cds-duration-fast-02);
  --md-dur-medium: var(--cds-duration-moderate-02);
  --md-dur-long: var(--cds-duration-slow-01);

  /* ---- Bélit theme: stillness, nature, inner energy ----------------------
     The collection brief ("Composure", Notion) describes crystals that took
     millions of years to form underground and hold nature's energy WITHIN, and
     asks for soft lines that echo "โค้งของแม่น้ำ / ความสละสลวยของหยดน้ำ". The
     brand boards ("Aligned in Stillness", Canva) are grainy monochrome film with
     light emerging from darkness. These tokens carry that into the UI without
     introducing a single colour outside the guideline palette. */

  /* Brand compositions use Carbon expressive motion without introducing bounce. */
  --belit-ease-settle: var(--cds-motion-standard-expressive);
  --belit-dur-settle: var(--cds-duration-slow-02);
  --belit-dur-breath: 7s;

  /* Light read as coming from INSIDE the object rather than glancing off it:
     tight, warm centre falling away to nothing, never a rim highlight. Callers
     set --glow to the subject's own colour. */
  --belit-glow-inner: 0 0 34px -6px var(--glow, var(--color-gold));
  --belit-glow-halo: 0 0 90px -30px var(--glow, var(--color-gold));

  /* Film grain over the black ground. Flat #000 reads as "screen"; a little
     tooth reads as material. Kept very low so it never competes with content. */
  --belit-grain-opacity: 0.035;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: var(--token-spacing-0);
  min-height: 100vh;
}

body {
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: var(--font-body), var(--font-body-th);
  font-weight: 400;
  line-height: var(--token-line-height-1-6);
}

/* Film grain over everything. The brand boards are grainy monochrome film, and
   the collection is about minerals formed over millions of years - flat #000
   reads as a screen, a little tooth reads as material. Inline SVG turbulence so
   there is no asset to load and nothing to break under a strict CSP. Fixed and
   non-interactive, and it sits under dialogs (z-index 1) so a stone modal or the
   story is never dimmed by it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--belit-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A divider drawn as a shallow arc rather than a straight rule. The collection
   brief asks for "รอยโค้งที่นุ่มนวล... โค้งของแม่น้ำ" and the guideline itself
   softens the logo's geometry with inner curves, so structure stays sharp while
   the lines between things bend. An oversized border-radius on a short element
   shows only the bottom of an ellipse, which is the bend we want - no SVG, and it
   scales to any width. */
.belit-rule {
  height: 9px;
  border: 0;
  border-bottom: 1px solid var(--md-outline-variant);
  border-radius: var(--token-radius-0) var(--token-radius-0) var(--token-radius-50pct) var(--token-radius-50pct) / var(--token-radius-0) var(--token-radius-0) var(--token-radius-100pct) var(--token-radius-100pct);
}
.belit-rule--gold {
  border-bottom-color: var(--md-outline-gold);
}

/* The grain is texture, not information - drop it when the reader has asked for
   less visual noise. */
@media (prefers-reduced-motion: reduce) {
  body::after {
    opacity: calc(var(--belit-grain-opacity) / 2);
  }
}

h1,
h2,
h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-0-04);
  margin: var(--token-spacing-0);
}

.eyebrow {
  font-family: var(--font-subheadline);
  text-transform: uppercase;
  letter-spacing: var(--token-letter-spacing-0-3);
  font-size: var(--token-font-size-caption);
  color: var(--color-text);
}

a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-silver);
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

button {
  font-family: inherit;
  cursor: pointer;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

input,
select {
  font-family: inherit;
}

/* ---------------------------------------------------------------------------
   Brand tokens, asserted over Carbon.

   `@carbon/styles` is imported dynamically on the app routes (App.tsx), so it
   always lands after this file and its own `:root` re-declares every `--cds-*`
   back to Carbon Gray 100 — which is why the stone finder was still painting
   #161616 and IBM Plex Sans while the landing page was on brand. Same
   specificity, later wins. These selectors carry one more step of specificity
   than the ones they answer, so load order stops deciding the palette.

   Both selectors are needed. Carbon puts its theme on a class on `<body>`
   (`cds--g100`), and a custom property set on a closer element beats one set on
   an ancestor no matter how specific the ancestor's selector is — so fixing
   `:root` alone left `--cds-background` reading #0b0b0a at the root and #161616
   on the body that actually paints. The attribute selector carries one step
   more specificity than the theme class it answers.

   Only the tokens Carbon also defines are repeated here. Everything else
   resolves from the `:root` block above.
   --------------------------------------------------------------------------- */
:root:root,
body[class*="cds--"] {
  --cds-background: var(--color-bg);
  --cds-layer-01: var(--color-surface);
  --cds-layer-02: var(--color-surface);
  --cds-layer-03: var(--color-surface);
  --cds-field-01: var(--color-surface);
  --cds-field-02: var(--color-surface);
  --cds-text-primary: var(--color-text);
  --cds-text-secondary: var(--color-text-muted);
  --cds-text-placeholder: rgb(var(--token-color-ivory) / 0.65);
  --cds-text-on-color: var(--color-bg);
  --cds-icon-primary: var(--color-text);
  --cds-icon-secondary: var(--color-text-muted);
  --cds-icon-on-color: var(--color-bg);
  --cds-interactive: var(--color-accent);
  --cds-link-primary: var(--color-text);
  --cds-link-primary-hover: var(--color-silver);
  --cds-border-subtle-00: var(--color-border);
  --cds-border-subtle-01: var(--color-border);
  --cds-border-subtle-02: var(--color-border);
  --cds-border-strong-01: rgb(var(--token-color-ivory) / 0.35);
   --cds-focus: var(--color-focus);
  --cds-focus-inset: var(--color-bg);
  --cds-support-error: var(--color-error);
  --cds-overlay: rgb(var(--token-color-obsidian) / 0.72);
  --cds-button-primary: rgb(var(--token-color-accent));
  --cds-button-primary-hover: rgb(var(--token-color-navy-675));
  --cds-button-primary-active: rgb(var(--token-color-navy-675));
  --cds-button-primary-disabled: rgb(var(--token-color-ivory) / 0.3);
  --cds-button-disabled: rgb(var(--token-color-ivory) / 0.3);
  --cds-text-on-color-disabled: rgb(var(--token-color-obsidian) / 0.4);
  --cds-button-separator: rgb(var(--token-color-obsidian));
}

html body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body), var(--font-body-th);
}

.hover\:border-gold\/30:hover {
  border-color: rgb(var(--token-color-gold) / 0.3) !important;
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1)) !important;
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
}

.hover\:text-stone:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--token-color-stone) / var(--tw-text-opacity, 1)) !important;
}

.hover\:opacity-70:hover {
  opacity: 0.7 !important;
}

.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) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

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

.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) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.focus-visible\:ring-blue-500:focus-visible {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important;
}

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

@media (min-width: 640px) {
  .sm\:max-w-\[19rem\] {
    max-width: 19rem !important;
  }
}

@media (min-width: 1024px) {
  .lg\:mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .lg\:w-full {
    width: 100% !important;
  }
  .lg\:min-w-0 {
    min-width: 0px !important;
  }
  .lg\:max-w-\[30rem\] {
    max-width: 30rem !important;
  }
  .lg\:grid-cols-\[38fr_62fr\] {
    grid-template-columns: 38fr 62fr !important;
  }
  .lg\:flex-col {
    flex-direction: column !important;
  }
  .lg\:gap-0 {
    gap: 0px !important;
  }
  .lg\:gap-14 {
    gap: 3.5rem !important;
  }
  .lg\:gap-7 {
    gap: 1.75rem !important;
  }
  .lg\:overflow-hidden {
    overflow: hidden !important;
  }
  .lg\:p-7 {
    padding: 1.75rem !important;
  }
  .lg\:px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
.page {
  max-width: var(--token-max-width-880px);
  margin: var(--token-spacing-0) auto;
  padding: var(--token-space-9) var(--token-space-5) var(--token-space-11);
}

/* result view runs wider so charts/tables can sit two-up and scroll less */
.page--wide {
  max-width: var(--token-max-width-1040px);
}

.brand-mark {
  text-align: center;
  margin-bottom: var(--token-space-8);
}

.brand-mark .wordmark {
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h1);
  letter-spacing: var(--token-letter-spacing-0-35);
  color: var(--color-gold);
  text-transform: uppercase;
}

/* Gold logomark used where the wordmark is set as a raster. Sized to the
   401x376 source aspect ratio so the mark is never distorted. */
.brand-mark__logomark {
  display: block;
  inline-size: 4rem;
  block-size: auto;
  margin-inline: auto;
}

.brand-mark .tagline {
  margin-top: var(--token-space-2);
}

@media (max-width: 640px) {
  .page {
    padding: var(--token-space-7) var(--token-space-4) var(--token-space-9);
  }

  .brand-mark {
    margin-bottom: var(--token-space-6);
  }

  .brand-mark .wordmark {
    font-size: var(--token-font-size-h2);
    letter-spacing: var(--token-letter-spacing-0-22);
  }

  .brand-mark .tagline {
    font-size: var(--token-font-size-caption);
    letter-spacing: var(--token-letter-spacing-0-18);
  }
}

.field-hint {
  font-size: var(--token-font-size-caption);
  color: var(--cds-text-secondary);
  opacity: 0.75;
}

.error-banner {
  border-inline-start: 3px solid var(--cds-support-error);
  background: var(--cds-layer-01);
  color: var(--cds-text-error);
  padding: var(--cds-spacing-05);
  margin-top: var(--cds-spacing-06);
}

/* ── beginner "how to read this" note — collapsible to keep the page compact ── */
.explainer {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-left: 3px solid var(--md-primary);
  border-radius: var(--md-shape-sm);
  margin-bottom: var(--token-spacing-1-4);
}
details.explainer > summary {
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  padding: var(--token-spacing-0-7) var(--token-spacing-2-4) var(--token-spacing-0-7) var(--token-space-7);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-12);
  text-transform: uppercase;
  color: var(--color-text);
}
details.explainer > summary::-webkit-details-marker {
  display: none;
}
details.explainer > summary::before {
  content: '✦';
  position: absolute;
  left: 1rem;
  top: var(--token-spacing-0-72);
  color: var(--md-primary);
  font-size: var(--token-font-size-caption);
}
details.explainer > summary::after {
  content: '⌄';
  position: absolute;
  right: var(--token-spacing-1-1);
  top: var(--token-spacing-0-35);
  color: var(--md-on-surface-variant);
  font-size: var(--token-font-size-cta);
  transition: transform var(--md-dur-short) var(--md-ease-standard);
}
details.explainer[open] > summary::after {
  transform: rotate(180deg);
}
.explainer-body {
  padding: var(--token-spacing-0) var(--token-spacing-1-2) var(--token-spacing-0-95) var(--token-space-7);
}
.explainer-body p {
  margin: var(--token-spacing-0);
  font-size: var(--token-font-size-cta);
  line-height: var(--token-line-height-1-72);
  color: var(--md-on-surface-variant);
}
.explainer-body p + p {
  margin-top: var(--token-space-2);
}
.explainer strong {
  font-family: var(--font-interface);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-0-02);
  color: var(--color-text);
}

/* ── two-column layout for pairing panels/tables (cuts vertical scroll) ── */
.detail-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--token-spacing-1-6);
  align-items: start;
  margin-bottom: var(--token-spacing-1-6);
}
.detail-grid-2.is-asym {
  grid-template-columns: 1.5fr 1fr;
}
.detail-col {
  min-width: 0;
}
.detail-col > .rule-heading {
  margin-top: var(--token-spacing-0);
}
.detail-col > .panel:last-child {
  margin-bottom: var(--token-spacing-0);
}
.detail-col > .panel {
  height: 100%;
}
/* tables read tighter when paired two-up */
.detail-grid-2 .house-table,
.detail-grid-2 .dasha-table {
  font-size: var(--token-font-size-cta);
}
.detail-grid-2 .house-table th,
.detail-grid-2 .house-table td,
.detail-grid-2 .dasha-table th,
.detail-grid-2 .dasha-table td {
  padding: var(--token-space-2) var(--token-space-2);
}
@media (max-width: 760px) {
  .detail-grid-2,
  .detail-grid-2.is-asym {
    grid-template-columns: 1fr;
  }
}

/* ── compact key/value facts panel (replaces bulky cards) ── */
.fact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--token-space-4);
  padding: var(--token-space-3) var(--token-spacing-0);
  border-bottom: 1px solid var(--md-outline-variant);
}
.fact-row:first-child {
  padding-top: var(--token-spacing-0);
}
.fact-row:last-child {
  border-bottom: 0;
  padding-bottom: var(--token-spacing-0);
}
.fact-label {
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-08);
  text-transform: uppercase;
  color: var(--color-text);
  flex: none;
}
.fact-value {
  text-align: right;
  min-width: 0;
}
.fact-value b {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: var(--token-font-size-h3);
  color: var(--md-on-surface);
}
.fact-value span {
  display: block;
  font-size: var(--token-font-size-caption);
  color: var(--md-on-surface-variant);
  margin-top: var(--token-spacing-0-1);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--token-space-5);
  margin-bottom: var(--token-space-7);
}

.section {
  margin-bottom: var(--token-space-7);
}

.section h2 {
  font-size: var(--token-font-size-h3);
  margin-bottom: var(--token-space-4);
  color: var(--color-text);
}

/* ── data tables ── */
.house-table,
.dasha-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--token-font-size-cta);
}

.house-table th,
.house-table td,
.dasha-table th,
.dasha-table td {
  border-bottom: 1px solid var(--md-outline-variant);
  padding: var(--token-spacing-0-6) var(--token-spacing-0-6);
  text-align: left;
}

.house-table th,
.dasha-table th {
  color: var(--color-text);
  font-weight: 400;
  font-family: var(--font-interface);
  letter-spacing: var(--token-letter-spacing-0-08);
  text-transform: uppercase;
  font-size: var(--token-font-size-caption);
}

.house-table tbody tr,
.dasha-table tbody tr {
  transition: background var(--md-dur-short) var(--md-ease-standard);
}

.house-table tbody tr:hover,
.dasha-table tbody tr:hover {
  background: rgb(var(--token-color-ivory) / 0.045);
}

.house-table tbody tr:last-child td,
.dasha-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ── narrative ── */
.narrative-block {
  display: grid;
  gap: var(--token-spacing-0);
}

.narrative-block .narrative-item {
  padding: var(--token-spacing-1-4) var(--token-spacing-0);
  border-top: 1px solid var(--md-outline-variant);
}

.narrative-block .narrative-item:first-child {
  padding-top: var(--token-spacing-0);
  border-top: 0;
}

.narrative-block .narrative-item h3 {
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-14);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--token-space-2);
}

.narrative-item p {
  margin: var(--token-spacing-0);
  line-height: var(--token-line-height-1-72);
}

.narrative-loading {
  color: var(--color-silver);
  font-style: italic;
}

/* Recommendation callout using a Carbon layer and support accent. */
.recommendation-note {
  margin-top: var(--token-space-5);
  padding: var(--token-spacing-1-1) var(--token-spacing-1-3);
  border-radius: var(--md-shape-md);
  border-left: 3px solid var(--color-silver);
  background: rgb(var(--token-color-ivory) / 0.07);
}

.recommendation-note .recommendation-label {
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-1);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--token-spacing-0-35);
}

.recommendation-note p {
  margin: var(--token-spacing-0);
}

/* Back link using Carbon ghost-button mechanics. */
.restart-link {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--token-spacing-0-4);
  margin-top: var(--token-spacing-1-25);
  padding: var(--token-spacing-0-55) var(--token-space-4);
  border: none;
  border-radius: var(--md-shape-full);
  background: none;
  color: var(--md-primary);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
  letter-spacing: var(--token-letter-spacing-0-06);
}
.restart-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-dur-short) var(--md-ease-standard);
}
.restart-link:hover::after { opacity: var(--md-state-hover); }
.restart-link:focus-visible::after { opacity: var(--md-state-focus); }
.restart-link:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

/* Carbon-style content tabs (scrollable). */
.page-tabs {
  display: flex;
  gap: var(--token-spacing-0);
  margin-bottom: var(--token-space-7);
  border-bottom: 1px solid var(--md-outline-variant);
  overflow-x: auto;
}

.page-tab {
  position: relative;
  overflow: hidden;
  flex: none;
  background: none;
  border: none;
  color: var(--md-on-surface-variant);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
  letter-spacing: var(--token-letter-spacing-0-06);
  padding: var(--token-spacing-0-95) var(--token-spacing-1-15);
  transition: color var(--md-dur-short) var(--md-ease-standard);
}
.page-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-dur-short) var(--md-ease-standard);
}
.page-tab:hover::after { opacity: var(--md-state-hover); }
.page-tab:focus-visible::after { opacity: var(--md-state-focus); }
.page-tab:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.page-tab.is-active {
  color: var(--md-primary);
}
.page-tab.is-active::before {
  content: '';
  position: absolute;
  left: var(--token-spacing-1-15);
  right: var(--token-spacing-1-15);
  bottom: 0;
  height: 3px;
  background: var(--md-primary);
  border-radius: var(--token-radius-xs) var(--token-radius-xs) var(--token-radius-0) var(--token-radius-0);
}

@media (max-width: 640px) {
  .page-tab {
    padding: var(--token-spacing-0-9) var(--token-spacing-0-85);
  }
}

/* ── shared Bélit celestial primitives (result pages) ──────────────────────
   The night-sky atmosphere, "dossier" cards, and rule-flanked headings shared
   across result tabs. Kept static because the brand is "Aligned in Stillness". */

.celestial-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgb(var(--token-color-ink) / 0.9), transparent),
    radial-gradient(1px 1px at 27% 62%, rgb(var(--token-color-ink) / 0.5), transparent),
    radial-gradient(1px 1px at 43% 33%, rgb(var(--token-color-ink) / 0.7), transparent),
    radial-gradient(1.4px 1.4px at 61% 12%, rgb(var(--token-color-ivory) / 0.85), transparent),
    radial-gradient(1px 1px at 68% 74%, rgb(var(--token-color-ink) / 0.55), transparent),
    radial-gradient(1px 1px at 82% 41%, rgb(var(--token-color-ink) / 0.75), transparent),
    radial-gradient(1.3px 1.3px at 91% 84%, rgb(var(--token-color-ivory) / 0.6), transparent),
    radial-gradient(1px 1px at 8% 88%, rgb(var(--token-color-ink) / 0.5), transparent),
    radial-gradient(1px 1px at 52% 92%, rgb(var(--token-color-ink) / 0.45), transparent),
    radial-gradient(1px 1px at 36% 8%, rgb(var(--token-color-ink) / 0.5), transparent),
    radial-gradient(1px 1px at 74% 24%, rgb(var(--token-color-ink) / 0.5), transparent),
    radial-gradient(1px 1px at 19% 47%, rgb(var(--token-color-ink) / 0.4), transparent),
    radial-gradient(135% 95% at 50% -14%, rgb(var(--token-color-navy-400)) 0%, rgb(var(--token-color-navy-525)) 28%, rgb(var(--token-color-navy-750)) 55%, rgb(var(--token-color-black)) 100%);
}

/* Dense chart, table, and reading content sits on a Carbon layer. */
.panel {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-1);
  padding: var(--token-space-5) var(--token-spacing-1-6);
  margin-bottom: var(--token-spacing-1-6);
}

.panel > .house-table,
.panel > .dasha-table {
  margin: var(--token-spacing-0);
}

/* big serif tab title */
h2.rule-title,
.section h2.rule-title {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: var(--token-font-size-h2);
  letter-spacing: var(--token-letter-spacing-0-01);
  color: var(--color-text);
  margin: var(--token-spacing-0) var(--token-spacing-0) var(--token-spacing-0-4);
}

/* eyebrow subheading with a trailing hairline + celestial mark */
h3.rule-heading,
.section h3.rule-heading {
  display: flex;
  align-items: center;
  gap: var(--token-spacing-0-85);
  font-family: var(--font-interface);
  font-weight: 400;
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-2);
  text-transform: uppercase;
  color: var(--color-text);
  margin: var(--token-spacing-2-6) var(--token-spacing-0) var(--token-spacing-1-3);
}

.rule-heading::before {
  content: '✦';
  flex: none;
  font-size: var(--token-font-size-caption);
  color: var(--color-text);
}

.rule-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--token-color-ivory) / 0.32), transparent);
}
.belit-loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}

.belit-loading__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--token-space-4);
  max-inline-size: min(calc(100% - var(--token-space-8)), var(--token-max-width-32rem));
  text-align: center;
}

.belit-loading__svg {
  width: 14rem;
  max-width: 24vw;
  height: auto;
  display: block;
}

.belit-loading__message {
  margin: var(--token-spacing-0);
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-body);
  line-height: var(--token-line-height-1-5);
}

.belit-loading__progress {
  display: flex;
  align-items: center;
  gap: var(--token-space-4);
  inline-size: min(100%, var(--token-max-width-24rem));
}

.belit-loading__bar {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 1;
  min-inline-size: 0;
  block-size: var(--token-space-2);
  border: 0;
  border-radius: var(--token-radius-pill);
  overflow: hidden;
  background: var(--color-border);
  color: rgb(var(--token-color-gold));
}

.belit-loading__bar::-webkit-progress-bar {
  background: var(--color-border);
  border-radius: var(--token-radius-pill);
}

.belit-loading__bar::-webkit-progress-value {
  background: rgb(var(--token-color-gold));
  border-radius: var(--token-radius-pill);
}

.belit-loading__bar::-moz-progress-bar {
  background: rgb(var(--token-color-gold));
  border-radius: var(--token-radius-pill);
}

.belit-loading__percent {
  color: var(--color-text);
  font-family: var(--font-interface);
  font-variant-numeric: tabular-nums;
  min-inline-size: 4ch;
  text-align: end;
}

.belit-loading__detail {
  margin: var(--token-spacing-0);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-body);
  line-height: var(--token-line-height-1-5);
}
.ui-reveal {
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translateY(8px);
  animation: ui-reveal-in var(--token-duration-slow) var(--token-ease-standard) forwards;
  animation-delay: var(--reveal-delay);
}

.ui-reveal[data-appear-hold] {
  animation-play-state: paused;
}

.ui-reveal[data-appear] {
  animation-play-state: running;
}

@keyframes ui-reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.belit-object-card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  outline-offset: 4px;
}

.belit-object-price {
  color: var(--color-text);
}
.belit-error-page {
  display: grid;
  min-height: 100svh;
  align-content: center;
  justify-items: center;
  gap: var(--token-space-4);
  box-sizing: border-box;
  padding: var(--token-space-6) var(--token-space-4);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  text-align: center;
}

.belit-error-page h1 {
  margin: var(--token-spacing-0);
  color: var(--color-text);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h2);
  font-weight: var(--token-font-weight-regular);
  line-height: var(--token-line-height-display);
}

.belit-error-page p {
  max-width: var(--token-max-width-36ch);
  margin: var(--token-spacing-0);
  line-height: var(--token-line-height-body);
}

.belit-error-page a {
  color: var(--color-text);
}

.belit-error-page__retry {
  min-height: var(--token-button-min-height);
  padding: var(--token-space-2) var(--token-space-5);
  border: var(--token-border-width) solid transparent;
  border-radius: var(--token-radius-xs);
  background: rgb(var(--token-color-navy-375));
  color: rgb(var(--token-color-ivory));
  font-family: var(--font-body);
  font-size: var(--token-font-size-cta);
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--token-duration-300ms) var(--token-ease-standard),
    border-color var(--token-duration-300ms) var(--token-ease-standard),
    color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-error-page__retry:hover,
.belit-error-page__retry:focus-visible {
  background: rgb(var(--token-color-navy-300));
  border-color: rgb(var(--token-color-navy-300));
  color: rgb(var(--token-color-ivory));
}

@media (prefers-reduced-motion: reduce) {
  .belit-error-page__retry {
    transition: none;
  }
}
/* Layout and entrance rules used by more than one surface, kept here so the
   landing page and the site header cannot drift apart. Both were previously
   repeated verbatim in BrandHome.css and BrandNavigation.css. */

.belit-shell {
  width: min(100%, var(--belit-shell-width));
  margin-inline: auto;
  padding-inline: var(--belit-shell-gutter);
}

/* Gated on the `js` class that index.html adds before first paint. Without it
   the content is simply visible, so the primary hero CTA can never be lost if
   the deck never arms (JS disabled, capture, or a deck failure). With it, the
   entrance animation runs exactly as before. */
html.js .belit-reveal {
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity var(--dur-slow) var(--token-ease-standard), transform var(--dur-slow) var(--token-ease-standard);
  will-change: transform;
}

html.js .belit-reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .belit-reveal {
    opacity: 1;
    transform: none;
  }
}*, ::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:  ;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }
  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}
.pointer-events-none {
  pointer-events: none !important;
}
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}
.collapse {
  visibility: collapse !important;
}
.static {
  position: static !important;
}
.fixed {
  position: fixed !important;
}
.absolute {
  position: absolute !important;
}
.relative {
  position: relative !important;
}
.sticky {
  position: sticky !important;
}
.inset-0 {
  inset: 0px !important;
}
.inset-x-0 {
  left: 0px !important;
  right: 0px !important;
}
.bottom-0 {
  bottom: 0px !important;
}
.left-5 {
  left: 1.25rem !important;
}
.top-5 {
  top: 1.25rem !important;
}
.isolate {
  isolation: isolate !important;
}
.z-10 {
  z-index: 10 !important;
}
.-mx-5 {
  margin-left: -1.25rem !important;
  margin-right: -1.25rem !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.mb-3 {
  margin-bottom: 0.75rem !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 0.75rem !important;
}
.block {
  display: block !important;
}
.inline {
  display: inline !important;
}
.flex {
  display: flex !important;
}
.inline-flex {
  display: inline-flex !important;
}
.table {
  display: table !important;
}
.grid {
  display: grid !important;
}
.contents {
  display: contents !important;
}
.hidden {
  display: none !important;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5 !important;
}
.h-24 {
  height: 6rem !important;
}
.h-3\/5 {
  height: 60% !important;
}
.h-4 {
  height: 1rem !important;
}
.h-6 {
  height: 1.5rem !important;
}
.h-8 {
  height: 2rem !important;
}
.h-full {
  height: 100% !important;
}
.h-px {
  height: 1px !important;
}
.min-h-screen {
  min-height: 100vh !important;
}
.w-4 {
  width: 1rem !important;
}
.w-6 {
  width: 1.5rem !important;
}
.w-8 {
  width: 2rem !important;
}
.w-full {
  width: 100% !important;
}
.w-px {
  width: 1px !important;
}
.min-w-\[15rem\] {
  min-width: 15rem !important;
}
.max-w-\[15rem\] {
  max-width: 15rem !important;
}
.max-w-\[44ch\] {
  max-width: 44ch !important;
}
.max-w-\[46ch\] {
  max-width: 46ch !important;
}
.max-w-md {
  max-width: 28rem !important;
}
.flex-1 {
  flex: 1 1 0% !important;
}
.shrink {
  flex-shrink: 1 !important;
}
.shrink-0 {
  flex-shrink: 0 !important;
}
.grow {
  flex-grow: 1 !important;
}
.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)) !important;
}
.cursor-pointer {
  cursor: pointer !important;
}
.resize {
  resize: both !important;
}
.list-none {
  list-style-type: none !important;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-col {
  flex-direction: column !important;
}
.items-center {
  align-items: center !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.gap-2 {
  gap: 0.5rem !important;
}
.gap-4 {
  gap: 1rem !important;
}
.gap-5 {
  gap: 1.25rem !important;
}
.gap-6 {
  gap: 1.5rem !important;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) !important;
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)) !important;
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(2rem * var(--tw-space-y-reverse)) !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.rounded {
  border-radius: 0.25rem !important;
}
.rounded-\[2px\] {
  border-radius: 2px !important;
}
.rounded-\[3px\] {
  border-radius: 3px !important;
}
.rounded-\[4px\] {
  border-radius: 4px !important;
}
.rounded-lg {
  border-radius: 0.5rem !important;
}
.rounded-b-\[4px\] {
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
.border {
  border-width: 1px !important;
}
.border-b {
  border-bottom-width: 1px !important;
}
.border-gold\/40 {
  border-color: rgb(var(--token-color-gold) / 0.4) !important;
}
.border-gold\/70 {
  border-color: rgb(var(--token-color-gold) / 0.7) !important;
}
.border-gray-200 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
}
.border-gray-300 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
}
.border-stone\/10 {
  border-color: rgb(var(--token-color-stone) / 0.1) !important;
}
.bg-black\/50 {
  background-color: rgb(var(--token-color-obsidian) / 0.5) !important;
}
.bg-gold\/90 {
  background-color: rgb(var(--token-color-gold) / 0.9) !important;
}
.bg-gray-300 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important;
}
.bg-gray-50 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
}
.bg-stone\/20 {
  background-color: rgb(var(--token-color-stone) / 0.2) !important;
}
.bg-surface {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--token-color-mineral) / var(--tw-bg-opacity, 1)) !important;
}
.bg-surface\/40 {
  background-color: rgb(var(--token-color-mineral) / 0.4) !important;
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important;
}
.from-black {
  --tw-gradient-from: rgb(var(--token-color-obsidian) / 1) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--token-color-obsidian) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.via-black\/70 {
  --tw-gradient-to: rgb(var(--token-color-obsidian) / 0)  var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--token-color-obsidian) / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.to-indigo-100 {
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position) !important;
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
}
.object-cover {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
.p-0 {
  padding: 0px !important;
}
.p-4 {
  padding: 1rem !important;
}
.p-6 {
  padding: 1.5rem !important;
}
.p-8 {
  padding: 2rem !important;
}
.px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.py-12 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.py-8 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}
.text-\[0\.625rem\] {
  font-size: 0.625rem !important;
}
.text-\[0\.75rem\] {
  font-size: 0.75rem !important;
}
.text-\[0\.8125rem\] {
  font-size: 0.8125rem !important;
}
.text-\[0\.875rem\] {
  font-size: 0.875rem !important;
}
.text-\[0\.9375rem\] {
  font-size: 0.9375rem !important;
}
.text-\[clamp\(1\.25rem\2c 2\.2vw\2c 1\.75rem\)\] {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
}
.text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}
.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
.text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}
.font-bold {
  font-weight: 700 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.lowercase {
  text-transform: lowercase !important;
}
.capitalize {
  text-transform: capitalize !important;
}
.leading-relaxed {
  line-height: 1.625 !important;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em !important;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em !important;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em !important;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em !important;
}
.tracking-\[0\.28em\] {
  letter-spacing: 0.28em !important;
}
.text-blue-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1)) !important;
}
.text-gold {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--token-color-gold) / var(--tw-text-opacity, 1)) !important;
}
.text-gold\/70 {
  color: rgb(var(--token-color-gold) / 0.7) !important;
}
.text-gray-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important;
}
.text-gray-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important;
}
.text-gray-900 {
  --tw-text-opacity: 1 !important;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
}
.text-ivory {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--token-color-ivory) / var(--tw-text-opacity, 1)) !important;
}
.text-red-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
}
.text-stone\/60 {
  color: rgb(var(--token-color-stone) / 0.6) !important;
}
.text-stone\/70 {
  color: rgb(var(--token-color-stone) / 0.7) !important;
}
.text-stone\/75 {
  color: rgb(var(--token-color-stone) / 0.75) !important;
}
.text-surface {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--token-color-mineral) / var(--tw-text-opacity, 1)) !important;
}
.text-surface\/70 {
  color: rgb(var(--token-color-mineral) / 0.7) !important;
}
.underline {
  text-decoration-line: underline !important;
}
.overline {
  text-decoration-line: overline !important;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.outline {
  outline-style: solid !important;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.blur {
  --tw-blur: blur(8px) !important;
  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) !important;
}
.invert {
  --tw-invert: invert(100%) !important;
  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) !important;
}
.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) !important;
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px) !important;
  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) !important;
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-shadow {
  transition-property: box-shadow !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.duration-500 {
  transition-duration: 500ms !important;
}

body.belit-home-body::after {
  display: none;
}

/* Keep the landing token bridge on the app root. CookieConsent renders through a
   body-level portal and must keep the global consent surface tokens. */
body.belit-home-body > #root {
  --color-text: rgb(var(--token-color-ivory));
  --color-accent: rgb(var(--token-color-gold));
  --color-accent-hover: rgb(var(--token-color-gold-hover));
  --color-border: rgb(var(--token-color-border));
  --color-focus: rgb(var(--token-color-gold-hover));
  --color-silver: rgb(var(--token-color-silver));
  --color-ink: rgb(var(--token-color-ink));
  --token-color-accent: var(--token-color-gold);
  --token-color-accent-border: var(--token-color-gold);
  --token-color-hairline: rgb(var(--token-color-border));
  --token-font-body: "Sen", "Helvetica Neue", Arial, sans-serif;
  --token-font-interface: "Afacad", "Sen", Arial, sans-serif;
  --token-radius-xs: var(--token-radius-sm);
  --token-radius-lg: var(--token-radius-md);
  --token-radius-xl: var(--token-radius-md);
}

body.belit-home-body .belit-navigation.is-scrolled {
  border-bottom: 1px solid var(--color-border);
  background: rgb(var(--token-color-obsidian) / 0.92);
}

body.belit-home-body .belit-mobile-menu-links .belit-primary-link {
  background: rgb(var(--token-color-navy-375));
  color: rgb(var(--token-color-ivory));
}

body.belit-home-body .belit-mobile-menu-links .belit-primary-link:hover {
  background: rgb(var(--token-color-navy-300));
  color: rgb(var(--token-color-ivory));
}

.belit-home {
  --belit-obsidian: var(--color-bg);
  --belit-mineral: var(--color-surface);
  --belit-ivory: var(--color-text);
  --belit-stone: var(--color-text-muted);
  --belit-gold: var(--color-gold);
  --belit-ivory-border: var(--color-border);
  --belit-gold-border: var(--color-border);
  --belit-shell-width: var(--token-layout-max-width);
  --belit-pill-gap: var(--token-spacing-0-375);
  --belit-pill-radius: var(--token-radius-pill);
  --belit-pill-padding-block: var(--token-space-1);
  --belit-pill-padding-inline: var(--token-spacing-0-625);
  --belit-pill-border: var(--belit-gold-border);
  --belit-pill-background: rgb(var(--token-color-ivory) / 0.08);
  --belit-pill-text: var(--belit-ivory);
  /* The inset every panel's content keeps from the panel edge. Held as a variable so a
     section that needs to bleed past its column can measure the bleed off the same
     value instead of guessing at it. */
  --belit-shell-gutter: var(--token-layout-story-shell-gutter);
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--belit-obsidian);
  color: var(--belit-ivory);
  font-family: var(--font-body), var(--font-body-th);
  -webkit-font-smoothing: antialiased;
}

.belit-home :where(button, a) {
  font: inherit;
}

.belit-home :where(a) {
  color: inherit;
  text-decoration: none;
}

.belit-home :where(h1, h2, h3, p) {
  margin: var(--token-spacing-0);
}

.belit-home :where(img, video, canvas, svg) {
  display: block;
}

.belit-home :where(button, a):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.belit-film,
.belit-film-overlays {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.belit-film {
  z-index: 0;
  overflow: hidden;
  background: var(--belit-obsidian);
}

.belit-film--static {
  background: var(--belit-obsidian);
}

.belit-home--static-film .belit-film-vignette,
.belit-home--static-film .belit-film-grain {
  display: none;
}

.belit-film-poster,
.belit-film-video,
.belit-film-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity var(--token-duration-500ms) var(--token-ease-standard);
}

.belit-film-poster,
.belit-film-video {
  -o-object-position: center center;
     object-position: center center;
}

.belit-film-poster {
  z-index: 0;
  opacity: 1;
}

.belit-film-poster.is-ready {
  opacity: 0;
}

.belit-film-video {
  z-index: 1;
  opacity: 0;
}

.belit-film-video.is-ready {
  opacity: 1;
}

.belit-film-canvas {
  z-index: 2;
  opacity: 0;
}

.belit-film-canvas.is-ready {
  opacity: 1;
}

.belit-film-overlays {
  z-index: 1;
}

.belit-film-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(var(--token-color-black) / 0.6), rgb(var(--token-color-black) / 0.15) 52%, transparent);
}

.belit-film-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.65'/%3E%3C/svg%3E");
}

.belit-content-layer {
  position: relative;
  z-index: 10;
}

.belit-section,
.belit-cms-section,
.belit-cms-footer {
  position: relative;
  isolation: isolate;
}

.belit-cms-section-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: rgb(var(--token-color-obsidian));
}

.belit-cms-section-background :where(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 1;
}

.belit-cms-section-background::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgb(var(--token-color-obsidian) / 0.72),
    rgb(var(--token-color-obsidian) / 0.58)
  );
}

.belit-hero-section .belit-cms-section-background::after {
  display: none;
}

.belit-wordmark-fallback {
  display: inline-flex;
  align-items: center;
  gap: var(--token-spacing-0-6);
  color: var(--belit-ivory);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-body);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-0-12);
}

.belit-wordmark-fallback img {
  width: auto;
  height: 1.55rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.belit-primary-link,
.belit-secondary-link {
  display: inline-flex;
  min-height: var(--token-button-min-height);
  align-items: center;
  justify-content: center;
  gap: var(--token-space-2);
  border-radius: var(--token-radius-xs);
  font-family: var(--font-body);
  font-size: var(--token-font-size-cta);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--token-duration-300ms) var(--token-ease-standard), color var(--token-duration-300ms) var(--token-ease-standard), border-color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-primary-link {
  padding: var(--token-space-2) var(--token-space-5);
  border: var(--token-border-width) solid transparent;
  background: rgb(var(--token-color-navy-375));
  color: rgb(var(--token-color-ivory));
  white-space: nowrap;
}

.belit-primary-link:hover {
  background: rgb(var(--token-color-navy-300));
  border-color: rgb(var(--token-color-navy-300));
  color: rgb(var(--token-color-ivory));
}

.belit-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.belit-hero-section {
  min-height: 100vh;
  min-height: 100svh;
}

.belit-section-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: var(--token-layout-story-section-padding);
}

.belit-hero-top-row,
.belit-curation-top-row {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-6);
}

.belit-hero-top-row {
  padding-top: var(--token-space-5);
}

.belit-attributes {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-2);
  color: rgb(var(--token-color-ivory) / 0.85);
  filter: drop-shadow(0 2px 14px rgb(var(--token-color-black) / 0.35));
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-2);
  line-height: var(--token-line-height-1-4);
  text-transform: uppercase;
}

.belit-hero-attributes-block {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-4);
}

.belit-hero-scroll-label {
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-2);
  line-height: var(--token-line-height-1-5);
  text-transform: uppercase;
  align-self: flex-start;
  color: rgb(var(--token-color-ivory) / 0.55);
}

.belit-introduction {
  max-width: var(--token-max-width-24rem);
  color: var(--belit-ivory);
  filter: drop-shadow(0 2px 14px rgb(var(--token-color-black) / 0.35));
  font-size: var(--token-font-size-body);
  line-height: var(--token-line-height-1-7);
}

.belit-hero-bottom-row,
.belit-curation-bottom-row {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-8);
}

.belit-hero-title-block {
  max-width: var(--token-max-width-38rem);
}

.belit-hero-support-copy {
  max-width: var(--token-max-width-34rem);
  min-block-size: 3.6em;
  margin-top: var(--token-space-5);
  color: var(--belit-stone);
  font-size: var(--token-font-size-body);
  line-height: var(--token-line-height-1-7);
}

.belit-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--token-space-3);
  margin-top: var(--token-space-6);
}

/* Shared container for the CMS-managed CTA rows on content sections. Empty
   lists render no rows, so sections simply show no buttons. */
.belit-cms-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--token-space-3);
  margin-top: var(--token-space-6);
}

.belit-hero-section .belit-section-content {
  min-height: 100vh;
  min-height: 100svh;
  justify-content: flex-end;
}

.belit-hero-section .belit-hero-top-row {
  position: absolute;
  top: 5.5rem;
  left: 0;
  right: 0;
  padding-top: var(--token-spacing-0);
}

.belit-hero-side {
  display: flex;
  width: 100%;
  max-width: var(--token-max-width-27rem);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--token-spacing-1-25);
}

.belit-display-title {
  color: var(--belit-ivory);
  filter: drop-shadow(0 2px 14px rgb(var(--token-color-black) / 0.35));
  font-family: var(--font-headline);
  font-size: var(--token-font-size-story-heading);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-0-01);
  line-height: var(--token-line-height-display);
  text-transform: uppercase;
}

.belit-display-title > span {
  display: block;
}

.belit-curation-card {
  display: flex;
  width: 100%;
  max-width: var(--token-max-width-27rem);
  align-items: center;
  gap: var(--token-space-4);
  border: 1px solid var(--belit-ivory-border);
  /* The glass card and the panel card are one component on two grounds, so they
     share a radius. This was 6px against the panel's 8. */
  border-radius: var(--token-radius-md);
  background: rgb(var(--token-color-black) / 0.25);
  padding: var(--token-space-3);
  backdrop-filter: blur(12px);
}

.belit-curation-card > img {
  width: 6rem;
  height: 7rem;
  flex: 0 0 auto;
  border-radius: var(--token-radius-0-25);
  -o-object-fit: cover;
     object-fit: cover;
}

.belit-curation-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.belit-card-title {
  color: var(--belit-ivory);
  font-size: var(--token-font-size-cta);
  font-weight: 500;
}

.belit-card-label {
  margin-top: var(--token-spacing-0-35);
  color: var(--belit-stone);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-18);
  line-height: var(--token-line-height-1-4);
  text-transform: uppercase;
}

.belit-card-description {
  max-width: var(--token-max-width-24ch);
  margin-top: var(--token-spacing-0-4);
  color: var(--belit-stone);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-55);
}

.belit-hero-details {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--token-space-3);
}

.belit-hero-details span {
  border-bottom: 1px solid var(--belit-ivory-border);
  padding-bottom: var(--token-space-2);
  color: rgb(var(--token-color-ivory) / 0.7);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-12);
  line-height: var(--token-line-height-1-5);
  text-transform: uppercase;
}

.belit-curation-card .belit-primary-link {
  min-height: var(--token-button-min-height);
  margin-top: var(--token-spacing-0-375);
  padding: var(--token-space-2) var(--token-space-5);
  background: rgb(var(--token-color-navy-375));
  color: rgb(var(--token-color-ivory));
  font-size: var(--token-font-size-cta);
  font-weight: 700;
}

.belit-curation-card .belit-primary-link:hover,
.belit-curation-actions .belit-primary-link:hover {
  background: rgb(var(--token-color-navy-300));
  border-color: rgb(var(--token-color-navy-300));
  color: rgb(var(--token-color-ivory));
}

.belit-cms-section-inner.belit-curation-inner {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  min-height: 100svh;
  grid-template-areas: "field copy";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-content: center;
  gap: var(--token-space-8);
}

.belit-curation-copy-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  grid-area: copy;
  gap: var(--token-space-6);
  transition: opacity var(--token-duration-240ms) var(--token-ease-standard), visibility var(--token-duration-240ms) var(--token-ease-standard);
}

/* The focused gemstone uses the full viewport; remove the adjacent copy so it does not
   compete with or cover the zoomed stone field. */
.belit-curation-inner:has(.belit-gemstone-stage.is-focused) .belit-curation-copy-column {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.belit-curation-masthead {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.belit-curation-title {
  display: flex;
  max-width: var(--token-max-width-32rem);
  flex-direction: column;
}

/* The field the stones occupy. The shader sits behind them and bleeds past the shell's
   padding so the nebula reaches the panel edges, while the stones stay inside it. */
.belit-curation-backdrop {
  --belit-spiral-center-x: -0.32;
  --belit-spiral-fade-x: 0.52;
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transform-origin: var(--belit-spiral-x) 50%;
  transition: opacity var(--token-duration-enter) var(--token-ease-standard), transform var(--token-duration-enter) var(--token-ease-standard);
}

.belit-curation-backdrop.is-ready {
  opacity: 1;
}

/* Paints immediately, before WebGL compiles. The procedural cloud fades over this once
   its first frame is ready; unsupported devices retain the gradient permanently. */
.belit-curation-section {
  --belit-spiral-x: 31%;
  background:
    radial-gradient(ellipse 12% 16% at var(--belit-spiral-x) 50%, rgb(var(--token-color-ivory) / 0.24), transparent 72%),
    radial-gradient(ellipse 22% 22% at var(--belit-spiral-x) 50%, rgb(var(--token-color-gold) / 0.34), transparent 74%),
    radial-gradient(ellipse 33% 28% at var(--belit-spiral-x) 50%, rgb(var(--token-color-steel) / 0.28), transparent 78%),
    radial-gradient(ellipse 46% 38% at var(--belit-spiral-x) 50%, rgb(var(--token-color-navy-400) / 0.42), transparent 82%),
    var(--belit-obsidian);
}

/* The Galaxy is part of the focused viewer, not a static panel decoration. Move it to
   the viewport and enlarge it with the selected stone so the zoom has one visual scale. */
.belit-curation-section:has(.belit-gemstone-stage.is-focused) .belit-curation-backdrop {
  --belit-spiral-center-x: 0;
  --belit-spiral-fade-x: 1.2;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  transform: scale(1.35);
  transform-origin: 50% 50%;
}

.belit-curation-section:has(.belit-gemstone-stage.is-focused) {
  background-size: 135% 135%;
  background-position: 50% 50%;
}

.belit-curation-field {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  grid-area: field;
  background: transparent;
}

.belit-curation-field-reveal {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.belit-curation-field .belit-curation-study-container,
.belit-curation-field .belit-gemstone-study {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

/* The stage drove its own height by aspect ratio, which at full width made the stone
   enormous. It now fills the height it is given and spreads the stones across the field. */
.belit-curation-field .belit-gemstone-stage-shell {
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  background: transparent;
}

.belit-curation-field .belit-gemstone-stage,
.belit-curation-field .belit-gemstone-study {
  border-color: transparent;
  background: transparent;
}

.belit-curation-field .belit-gemstone-stage,
.belit-curation-field .belit-gemstone-unavailable {
  height: 100%;
  aspect-ratio: auto;
}

/* The field runs the full width of the panel rather than stopping at its column, so a
   stone is never sliced in half at the seam — whether it is being examined or just
   sitting in the map. A negative margin rather than absolute positioning: the stage keeps
   its place in the flow, so the meta line and the stone's details hold their positions.
   The copy column keeps its own layer above, so the writing is never obscured.

   The copy column is 42fr against the field's 58fr, so it is 72.4% of the field's own
   width, plus the gap between the two. */
.belit-curation-field .belit-gemstone-stage-shell {
  z-index: 0;
  margin-inline-start: calc(-1 * var(--belit-shell-gutter));
  margin-inline-end: calc(-72.4% - clamp(2rem, 5vw, 5rem));
  overflow: visible;
}

/* The bleed buys room for the stones around the one being examined, but it reaches all
   the way under the writing, and a stone must never sit behind a line of text. So the
   field dissolves across the gutter instead of being cut at it: opaque over its own
   column, gone by the time the copy begins.

   The stops are read off the widening above rather than guessed. Against the shell's
   own width, the column's far edge lands at ~56.5% and the copy starts at ~62% — and
   holds there across every width this rule applies to, because both the widening and
   the gap it adds are proportions of the same column. */
.belit-curation-field .belit-gemstone-stage {
  -webkit-mask-image: linear-gradient(to right, rgb(var(--token-color-black)) 0 58%, transparent 62%);
  mask-image: linear-gradient(to right, rgb(var(--token-color-black)) 0 58%, transparent 62%);
}

/* Opening a stone must not resize the field it was opened from. The stone's details
   open as the shared stone modal in a portal over the page, so nothing is added to this
   section's flow and the stage is left exactly the size it was. */

  /* The shell now starts a gutter to the left of its column, so the hovered stone's name
     centres over the column rather than over the canvas, since the column is where the
     field actually is. */
  .belit-curation-field .belit-gemstone-hover-name {
   width: 56%;
   padding-inline-start: var(--belit-shell-gutter);
}

  /* The writing and the hovered stone's name stay above the widened field. */
  .belit-curation-copy-column,
  .belit-gemstone-hover-name {
    position: relative;
    z-index: 2;
  }

/* Preserve the visual order on smaller screens: viewer first, then copy and actions. */
@media (max-width: 1023px) {
  .belit-curation-section {
    --belit-spiral-x: 50%;
  }

  .belit-curation-backdrop {
    --belit-spiral-center-x: 0;
    --belit-spiral-fade-x: 1.2;
  }

  .belit-cms-section-inner.belit-curation-inner {
    grid-template-areas:
      "field"
      "copy";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--token-space-7);
    padding-block: var(--token-space-8);
  }

  .belit-curation-masthead {
    justify-content: flex-start;
  }

  /* Stacked, the copy sits below the field rather than beside it, so there is no column
     to bleed past and nothing to keep clear of. The widening is measured off the
     side-by-side grid and means nothing here. */
  .belit-curation-field .belit-gemstone-stage-shell {
    margin-inline: var(--token-spacing-0);
  }

  .belit-curation-field .belit-gemstone-stage {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* The field is stacked above the copy, so its height comes from the aspect
     ratio rather than sharing the panel height with the copy. */
  .belit-curation-field,
  .belit-curation-field-reveal,
  .belit-curation-field .belit-curation-study-container,
  .belit-curation-field .belit-gemstone-study,
  .belit-curation-field .belit-gemstone-stage-shell {
    height: auto;
  }

  .belit-curation-field .belit-gemstone-stage,
  .belit-curation-field .belit-gemstone-unavailable {
    height: auto;
    min-height: 14rem;
    aspect-ratio: 1 / 0.85;
  }
}

.belit-curation-prompts {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--token-space-3);
}

.belit-curation-layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--token-space-8);
}

.belit-curation-copy {
  display: flex;
  max-width: var(--token-max-width-38rem);
  flex-direction: column;
}

.belit-curation-heading {
  color: var(--belit-ivory);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-story-heading);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-0-01);
  line-height: var(--token-line-height-display);
}

.belit-curation-heading > span {
  display: block;
}

.belit-curation-intro {
  max-width: var(--token-max-width-34rem);
  margin-top: var(--token-space-5) !important;
  color: var(--belit-stone);
  font-size: var(--token-font-size-body);
  line-height: var(--token-line-height-1-7);
}

/* The field is interactive; the caption under the stones says so before the
   reader has to guess. */
.belit-curation-hint {
  flex: 0 0 auto;
  margin-top: var(--token-space-3) !important;
  color: var(--belit-stone);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-7);
  letter-spacing: var(--token-letter-spacing-0-03);
  text-align: center;
}

.belit-curation-study-reveal {
  width: 100%;
  max-width: var(--token-max-width-34rem);
  justify-self: center;
}

.belit-curation-study-container {
  width: 100%;
  min-height: 37rem;
}

.belit-gemstone-study {
  position: relative;
  width: 100%;
  color: var(--belit-ivory);
}

.belit-gemstone-study--catalogue {
  display: flex;
  min-height: 37rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--belit-stone);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-2);
  text-align: center;
  text-transform: uppercase;
}

.belit-gemstone-study--catalogue img {
  width: 2rem;
  margin-bottom: var(--token-space-4);
  opacity: 0.68;
}

.belit-gemstone-study--catalogue i {
  width: 8rem;
  height: 1px;
  margin-top: var(--token-space-4);
  background: var(--color-silver);
}

.belit-gemstone-study--catalogue p {
  max-width: var(--token-max-width-30ch);
  margin-top: var(--token-space-4);
  color: rgb(var(--token-color-ivory) / 0.5);
  font-family: var(--font-body);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0);
  line-height: var(--token-line-height-1-6);
  text-transform: none;
}

.belit-gemstone-stage-shell {
  position: relative;
  overflow: hidden;
  border-radius: var(--token-radius-md) var(--token-radius-md) var(--token-radius-0) var(--token-radius-0);
  background: var(--belit-mineral);
}

/* The hovered stone names itself over the field, in the same label type the map already
   uses, so nothing new is introduced to say one word. */
.belit-gemstone-hover-name {
  position: absolute;
  z-index: 2;
  bottom: var(--token-space-8);
  left: 0;
  width: 100%;
  color: var(--belit-ivory);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-34);
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

/* The stage is the field itself now; nothing is dragged, so it offers no grab cursor. */
.belit-curation-field .belit-gemstone-stage {
  overflow: visible;
  cursor: default;
  touch-action: auto;
}

/* The measured bar of each label. Gold fill on a hairline track: the same two border
   values the rest of the section uses, at the pill radius already used by the links. */
.belit-gemstone-node-bar {
  position: relative;
  display: block;
  height: 2px;
  width: 100%;
  border-radius: var(--token-radius-pill);
  background: var(--belit-ivory-border);
}

.belit-gemstone-node-bar::after {
  position: absolute;
  content: "";
  inset: 0 auto 0 0;
  width: var(--bar, 0%);
  border-radius: inherit;
  background: var(--color-silver);
}


.belit-gemstone-study--deferred {
  display: grid;
  min-height: 24rem;
  place-content: center;
  gap: var(--token-space-4);
  color: var(--belit-stone);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-2);
  text-align: center;
  text-transform: uppercase;
}

.belit-gemstone-study--deferred i {
  display: block;
  width: 8rem;
  height: 1px;
  overflow: hidden;
  background: var(--belit-ivory-border);
}

.belit-gemstone-study--deferred i::after {
  display: block;
  width: 45%;
  height: 100%;
  background: rgb(var(--token-color-accent));
  content: "";
  animation: belit-stone-progress var(--token-duration-1400ms) var(--token-ease-standard) infinite alternate;
}

 .belit-gemstone-stage,
.belit-gemstone-unavailable {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.84;
  overflow: hidden;
  border: 1px solid var(--belit-ivory-border);
  border-radius: var(--token-radius-md);
  background: transparent;
}

.belit-gemstone-stage {
  z-index: 1;
  cursor: grab;
  touch-action: none;
}

.belit-gemstone-stage.is-dragging {
  cursor: grabbing;
}

.belit-gemstone-stage:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -5px;
}

.belit-gemstone-stage > canvas {
  width: 100% !important;
  height: 100% !important;
}

.belit-gemstone-loading,
.belit-gemstone-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--token-space-6);
  background: radial-gradient(circle at 50% 45%, rgb(var(--token-color-ivory) / 0.035), transparent 48%);
  text-align: center;
}

.belit-gemstone-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-gemstone-loading img,
.belit-gemstone-unavailable img {
  width: 2rem;
  height: auto;
  margin-bottom: var(--token-spacing-1-25);
  opacity: 0.68;
}

.belit-gemstone-loading span {
  color: var(--color-accent);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-22);
  text-transform: uppercase;
}

.belit-gemstone-loading strong {
  margin-top: var(--token-spacing-0-55);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h3);
  font-weight: 400;
}

.belit-gemstone-loading i {
  display: block;
  width: 9rem;
  height: 1px;
  margin-top: var(--token-space-5);
  overflow: hidden;
  background: rgb(var(--token-color-accent-border) / 0.3);
}

.belit-gemstone-loading i::after {
  display: block;
  width: 45%;
  height: 100%;
  background: rgb(var(--token-color-accent));
  content: "";
  animation: belit-stone-progress var(--token-duration-1400ms) var(--token-ease-standard) infinite alternate;
}

.belit-gemstone-loading p,
.belit-gemstone-unavailable p {
  max-width: var(--token-max-width-27ch);
  margin-top: var(--token-space-4);
  color: rgb(var(--token-color-ivory) / 0.5);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-6);
}

.belit-stone-changer {
  display: grid;
  min-height: 7.5rem;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  border-right: 1px solid var(--belit-ivory-border);
  border-bottom: 1px solid var(--belit-ivory-border);
  border-left: 1px solid var(--belit-ivory-border);
  border-radius: var(--token-radius-0) var(--token-radius-0) var(--token-radius-sm) var(--token-radius-sm);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.belit-stone-direction {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-content: center;
  border: 1px solid var(--belit-ivory-border);
  border-radius: var(--token-radius-xs);
  background: transparent;
  color: rgb(var(--token-color-ivory) / 0.7);
  transition: border-color var(--token-duration-250ms) var(--token-ease-standard), background var(--token-duration-250ms) var(--token-ease-standard);
}

.belit-stone-direction:last-child {
  justify-self: end;
}

.belit-stone-direction:hover {
  border-color: rgb(var(--token-color-stone) / 0.5);
  color: var(--color-text);
}

.belit-stone-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.belit-stone-identity span,
.belit-stone-identity small {
  color: rgb(var(--token-color-ivory) / 0.5);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-0-18);
  line-height: var(--token-line-height-1-4);
  text-transform: uppercase;
}

.belit-stone-identity strong {
  margin-block: var(--token-spacing-0-35);
  overflow: hidden;
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h3);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-0-06);
  line-height: var(--token-line-height-1-05);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.belit-gemstone-description {
  min-height: 3.9rem;
  max-width: var(--token-max-width-44ch);
  margin-inline: auto !important;
  padding: var(--token-space-4) var(--token-space-4) var(--token-spacing-0);
  color: rgb(var(--token-color-ivory) / 0.52);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-6);
  text-align: center;
}

.belit-gemstone-utilities {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--token-space-3) var(--token-space-5);
  padding-top: var(--token-space-4);
}

.belit-gemstone-utilities button {
  display: inline-flex;
  align-items: center;
  gap: var(--token-spacing-0-45);
  min-height: 44px;
  border: 1px solid var(--belit-ivory-border);
  border-radius: var(--token-radius-xs);
  background: transparent;
  padding: var(--token-space-2) var(--token-space-3);
  color: rgb(var(--token-color-ivory) / 0.62);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-16);
  text-transform: uppercase;
  transition: border-color var(--token-duration-250ms) var(--token-ease-standard), color var(--token-duration-250ms) var(--token-ease-standard);
}

.belit-gemstone-utilities button:hover {
  border-color: rgb(var(--token-color-stone) / 0.5);
  color: var(--color-text);
}

.belit-gemstone-utilities button:disabled {
  border-color: var(--belit-ivory-border);
  color: rgb(var(--token-color-ivory) / 0.28);
  cursor: not-allowed;
}

.belit-stone-archive {
  position: absolute;
  z-index: 12;
  top: 2.75rem;
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid var(--belit-gold-border);
  border-radius: var(--token-radius-sm);
  background: rgb(var(--token-color-obsidian) / 0.97);
  box-shadow: var(--token-shadow-overlay-strong);
  backdrop-filter: blur(16px);
}

.belit-stone-archive > div {
  display: grid;
  max-height: 15rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--token-spacing-1px);
  overflow-y: auto;
  margin: var(--token-space-3);
  border-top: 1px solid var(--belit-ivory-border);
  border-bottom: 1px solid var(--belit-ivory-border);
  background: var(--belit-ivory-border);
}

.belit-stone-archive button {
  display: flex;
  align-items: center;
  gap: var(--token-space-3);
  border: 0;
  background: var(--belit-obsidian);
  padding: var(--token-spacing-0-7) var(--token-space-3);
  color: rgb(var(--token-color-ivory) / 0.65);
  font-size: var(--token-font-size-caption);
  text-align: left;
  transition: background var(--token-duration-200ms) var(--token-ease-standard), color var(--token-duration-200ms) var(--token-ease-standard);
}

.belit-stone-archive button span {
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-15);
}

.belit-stone-archive button:hover,
.belit-stone-archive button:focus-visible {
  background: var(--belit-mineral);
  color: var(--belit-ivory);
}

.belit-stone-archive button[aria-checked="true"] {
  background: var(--color-silver);
  color: var(--belit-obsidian);
}

.belit-stone-archive button[aria-checked="true"] span {
  color: rgb(var(--token-color-obsidian) / 0.65);
}

@keyframes belit-stone-progress {
  from { transform: translateX(-15%); }
  to { transform: translateX(135%); }
}

.belit-body-copy {
  max-width: var(--token-max-width-32rem);
  margin-top: var(--token-space-3) !important;
  color: var(--belit-stone);
  font-size: var(--token-font-size-cta);
  line-height: var(--token-line-height-1-65);
}

.belit-curation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--token-space-3);
  margin-top: var(--token-spacing-1-75);
}

.belit-curation-actions .belit-primary-link {
  border-color: transparent;
  border-radius: var(--token-radius-xs);
  background: rgb(var(--token-color-navy-375));
  color: rgb(var(--token-color-ivory));
  font-weight: 700;
}

.belit-curation-actions .belit-primary-link:hover {
  border-color: rgb(var(--token-color-navy-300));
  background: rgb(var(--token-color-navy-300));
  color: rgb(var(--token-color-ivory));
}

.belit-curation-actions .belit-secondary-link {
  border-radius: var(--token-radius-xs);
}

.belit-secondary-link {
  padding: var(--token-space-2) var(--token-space-5);
  border: var(--token-spacing-1px) solid rgb(var(--token-color-ivory));
  background: transparent;
  color: rgb(var(--token-color-ivory));
  font-size: var(--token-font-size-cta);
}

.belit-secondary-link:hover {
  background: transparent;
  color: rgb(var(--token-color-cream));
}

.belit-process-panel {
  width: 100%;
  max-width: var(--token-max-width-28rem);
  border: 1px solid var(--belit-ivory-border);
  border-radius: var(--token-radius-lg);
  background: rgb(var(--token-color-black) / 0.25);
  padding-inline: var(--token-spacing-1-25);
  backdrop-filter: blur(12px);
}

.belit-process-row {
  display: flex;
  gap: var(--token-spacing-1-25);
  padding-block: var(--token-spacing-1-25);
}

.belit-process-row.has-divider {
  border-bottom: 1px solid var(--belit-ivory-border);
}

.belit-process-number {
  flex: 0 0 auto;
  color: var(--color-text);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-18);
  line-height: var(--token-line-height-1-5);
}

.belit-process-copy {
  min-width: 0;
  flex: 1;
}

.belit-process-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--token-space-4);
}

.belit-process-title-line h3 {
  color: var(--belit-ivory);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h3);
  font-weight: 400;
  line-height: var(--token-line-height-1-1);
}

.belit-process-chevron {
  flex: 0 0 auto;
  color: rgb(var(--token-color-ivory) / 0.45);
  transition: color var(--token-duration-300ms) var(--token-ease-standard), transform var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-process-row:hover .belit-process-chevron,
.belit-process-row:focus-within .belit-process-chevron {
  color: var(--belit-ivory);
  transform: translateX(0.125rem);
}

.belit-process-copy p {
  margin-top: var(--token-spacing-0-375);
  color: var(--belit-stone);
  font-size: var(--token-font-size-cta);
  line-height: var(--token-line-height-1-65);
}

.belit-cms-section {
  min-height: 0;
}

.belit-cms-section-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--token-space-8);
  padding-block: var(--token-layout-story-section-padding);
}

.belit-cms-section-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--token-space-6);
}

.belit-cms-overline {
  max-width: var(--token-max-width-24rem);
  color: var(--color-text);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-2);
  line-height: var(--token-line-height-1-5);
  text-align: right;
  text-transform: uppercase;
}

.belit-cms-intro-copy {
  max-width: var(--token-max-width-24rem);
  color: var(--belit-stone);
  font-size: var(--token-font-size-cta);
  line-height: var(--token-line-height-1-7);
  text-align: right;
}

.belit-cms-display-heading {
  color: var(--belit-ivory);
  filter: drop-shadow(0 2px 14px rgb(var(--token-color-black) / 0.35));
  font-family: var(--font-headline);
  font-size: var(--token-font-size-story-heading);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-0-01);
  line-height: var(--token-line-height-display);
  text-transform: uppercase;
}

.belit-cms-display-heading > span {
  display: block;
}

.belit-cms-copy {
  max-width: var(--token-max-width-34rem);
}

.belit-cms-copy p {
  color: var(--belit-stone);
  font-size: var(--token-font-size-cta);
  line-height: var(--token-line-height-1-8);
}

.belit-cms-body-stack {
  display: grid;
  gap: var(--token-spacing-1-25);
  max-width: var(--token-max-width-32rem);
  margin-top: var(--token-space-6);
}

.belit-cms-figure {
  margin: var(--token-spacing-0);
}

.belit-cms-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.belit-cms-figure figcaption,
.belit-material-detail figcaption {
  margin-top: var(--token-spacing-0-625);
  color: rgb(var(--token-color-stone) / 0.7);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-08);
  line-height: var(--token-line-height-1-5);
  text-transform: uppercase;
}

.belit-philosophy-grid,
.belit-material-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 8rem);
}

.belit-philosophy-media {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(8rem, 0.65fr);
  align-items: end;
  gap: var(--token-space-4);
}

.belit-philosophy-main-media {
  aspect-ratio: 4 / 5;
}

.belit-philosophy-texture-media {
  aspect-ratio: 3 / 4;
  margin-bottom: var(--token-space-8);
}

.belit-objects-heading {
  max-width: none;
  font-weight: 400;
  font-size: var(--token-font-size-story-heading);
  letter-spacing: var(--token-letter-spacing-0-01);
  line-height: var(--token-line-height-display);
  text-align: center;
  text-transform: none;
}

.belit-objects-section {
  background: var(--belit-obsidian);
}

.belit-objects-section .belit-cms-section-background :where(img, video) {
  opacity: 0.78;
}

.belit-objects-section .belit-cms-section-background::after {
  position: absolute;
  content: "";
  inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--token-color-obsidian) / 0.38), rgb(var(--token-color-obsidian) / 0.68)),
    radial-gradient(ellipse at 50% 54%, transparent 18%, rgb(var(--token-color-obsidian) / 0.38) 78%);
}

.belit-objects-inner {
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5svh, 2rem);
  height: 100%;
  min-height: 100%;
  padding-block: var(--token-layout-story-section-padding);
}

.belit-objects-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 1.5svh, 1.25rem);
  max-width: var(--token-max-width-38rem);
  text-align: center;
}

.belit-objects-overline {
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-34);
  line-height: var(--token-line-height-1-4);
  text-transform: uppercase;
}

.belit-objects-intro .belit-cms-intro-copy {
  max-width: var(--token-max-width-34rem);
  color: var(--belit-stone);
  font-family: var(--font-body);
  font-size: var(--token-font-size-body);
  line-height: var(--token-line-height-1-7);
  text-align: center;
}

.belit-objects-learn {
  margin-top: var(--token-space-2);
}

.belit-objects-learn .belit-secondary-link {
  border-radius: var(--token-radius-xs);
}

.belit-object-grid {
  display: grid;
  flex: 0 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--token-space-4);
  height: auto;
  min-height: 0;
  width: 100%;
}

.belit-object-card {
  aspect-ratio: var(--token-aspect-ratio-story-media);
  height: auto;
  min-width: 0;
  min-height: 0;
}

.belit-object-card-link {
  display: block;
  aspect-ratio: var(--token-aspect-ratio-story-media);
  height: auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.belit-object-image-wrap {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--belit-ivory-border);
  border-radius: var(--token-radius-md);
  background: rgb(var(--token-color-black) / 0.24);
}

.belit-object-image {
  transition: opacity var(--dur-normal) var(--ease), transform var(--dur-slow) var(--ease);
}

.belit-object-card:hover .belit-object-image {
  transform: scale(1.025);
}

.belit-object-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: var(--token-spacing-0);
  color: inherit;
  cursor: pointer;
}

.belit-object-media:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -4px;
}

.belit-object-media .belit-object-image,
.belit-object-media .belit-object-hover-image,
.belit-object-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.belit-object-media .belit-object-hover-image {
  opacity: 0;
  transition: opacity var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-object-card-link:hover .belit-object-hover-image,
.belit-object-card-link:focus-visible .belit-object-hover-image {
  opacity: 1;
}

.belit-object-media.is-playing .belit-object-hover-image {
  opacity: 0;
}

.belit-object-video {
  opacity: 0;
  transition: opacity var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-object-media.is-playing .belit-object-video {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .belit-object-media .belit-object-hover-image,
  .belit-object-video {
    transition: none;
  }
}

.belit-object-details {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 54%;
  bottom: 0;
  left: 0;
  padding: var(--token-space-6);
  background: linear-gradient(
    180deg,
    transparent,
    rgb(var(--token-color-black) / 0.7) 50%,
    rgb(var(--token-color-black))
  );
  pointer-events: none;
}

.belit-object-details h3 {
  color: var(--belit-ivory);
  font-family: var(--font-body), var(--font-body-th);
  font-size: var(--token-font-size-h2);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-0-01);
  line-height: var(--token-line-height-1-2);
}

.belit-object-details p {
  margin-top: var(--token-space-3);
  color: var(--belit-stone);
  font-size: var(--token-font-size-body);
  line-height: var(--token-line-height-1-7);
}

.belit-material-banner {
  height: clamp(14rem, 32vw, 30rem);
  overflow: hidden;
  border: 1px solid var(--belit-ivory-border);
  background: rgb(var(--token-color-black) / 0.25);
}

.belit-material-grid {
  align-items: start;
}

.belit-material-detail {
  margin-top: var(--token-space-6);
  aspect-ratio: 16 / 9;
}

.belit-cms-footer {
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--token-space-6);
  border: 1px solid var(--belit-ivory-border);
  border-radius: var(--token-radius-xl);
  background: rgb(var(--token-color-obsidian) / 0.88);
  text-align: left;
  backdrop-filter: blur(18px);
}

.belit-footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(8rem, 1fr)) auto;
  gap: var(--token-space-6);
  width: 100%;
  padding: var(--token-space-5) clamp(1.25rem, 3vw, 2.5rem);
}

.belit-footer-brand {
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--token-space-2);
}

.belit-footer-brand .belit-wordmark-fallback {
  color: var(--belit-gold);
}

.belit-footer-brand p {
  color: var(--belit-stone);
  font-family: var(--font-interface);
  transition: color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--token-space-2);
  font-size: var(--token-font-size-caption);
}

.belit-footer-column > span {
  margin-bottom: var(--token-spacing-0-375);
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-18);
  text-transform: uppercase;
}

.belit-footer-column a,
.belit-footer-column p {
  color: var(--belit-stone);
  font-family: var(--font-interface);
  transition: color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-footer-column a:hover,
.belit-footer-return:hover {
  color: var(--belit-ivory);
}

.belit-footer-return {
  display: inline-flex;
  align-items: center;
  align-self: end;
  gap: var(--token-space-2);
  color: var(--belit-ivory);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-12);
  text-transform: uppercase;
  transition: color var(--token-duration-300ms) var(--token-ease-standard);
}

@media (min-width: 640px) {
  .belit-home {
    --belit-shell-gutter: var(--token-layout-story-shell-gutter);
  }

  .belit-section-content {
    padding-top: var(--token-layout-story-section-padding);
  }

  .belit-hero-top-row,
  .belit-curation-top-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--token-space-6);
  }

  .belit-introduction {
    text-align: right;
    font-size: var(--token-font-size-body);
  }

  .belit-card-label {
    font-size: var(--token-font-size-caption);
  }

  .belit-display-title {
    font-size: var(--token-font-size-story-heading);
  }

  .belit-process-panel {
    padding-inline: var(--token-space-5);
  }

  .belit-stone-archive > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .belit-home {
    --belit-shell-gutter: var(--token-layout-story-shell-gutter);
  }

  .belit-hero-bottom-row,
  .belit-curation-bottom-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--token-space-9);
  }

  .belit-curation-bottom-row {
    gap: var(--token-space-9);
  }

  .belit-curation-copy {
    flex: 1 1 auto;
  }

  .belit-curation-study-reveal {
    flex: 0 1 36rem;
  }

  .belit-curation-study-container {
    min-height: 45rem;
  }
}

@media (min-width: 1024px) {
  .belit-home {
    --belit-shell-gutter: var(--token-layout-story-shell-gutter);
  }

  .belit-section-content {
    padding-block: var(--token-layout-story-section-padding);
  }

  .belit-hero-top-row,
  .belit-curation-top-row {
    padding-top: var(--token-spacing-1-75);
  }

  .belit-display-title {
    font-size: var(--token-font-size-story-heading);
  }

  .belit-process-panel {
    flex: 0 0 28rem;
  }

  .belit-curation-bottom-row {
    align-items: center;
  }

  .belit-curation-layout {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: var(--token-spacing-3-5);
  }

  .belit-cms-section-inner.belit-curation-inner {
    padding-block: var(--token-space-8);
  }

  .belit-curation-study-reveal {
    justify-self: center;
  }

  .belit-display-title {
    font-size: var(--token-font-size-story-heading);
  }
}

@media (min-width: 1280px) {
  .belit-display-title {
    font-size: var(--token-font-size-story-heading);
  }
}

@media (max-width: 767px) {
  .belit-hero-section .belit-cms-section-background :where(img, video) {
    -o-object-position: 78% center;
       object-position: 78% center;
  }

  .belit-cms-footer {
    margin-bottom: var(--token-space-4);
    border-radius: var(--token-radius-lg);
  }

  .belit-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--token-space-4) var(--token-space-5);
    padding: var(--token-space-4);
  }

  .belit-footer-grid > :first-child,
  .belit-footer-return {
    grid-column: 1 / -1;
  }

  .belit-footer-column {
    gap: var(--token-spacing-0-3);
    font-size: var(--token-font-size-caption);
  }

  .belit-footer-column > span {
    margin-bottom: var(--token-spacing-0-125);
  }

  .belit-footer-return {
    align-self: auto;
    font-size: var(--token-font-size-caption);
  }

  .belit-objects-inner {
    gap: clamp(0.875rem, 2svh, 1.5rem);
  }

  .belit-objects-intro {
    gap: clamp(0.625rem, 1.5svh, 1rem);
  }

  .belit-object-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    grid-auto-flow: row;
    width: 100%;
    overflow: visible;
    padding-bottom: var(--token-spacing-0);
    scroll-snap-type: none;
  }

  .belit-object-grid::-webkit-scrollbar {
    display: none;
  }

  .belit-object-card {
    scroll-snap-align: none;
  }

  .belit-object-details {
    top: auto;
    padding: var(--token-space-5);
  }

  .belit-object-details h3 {
    font-size: var(--token-font-size-h3);
    line-height: var(--token-line-height-1-2);
  }

  .belit-object-details p {
    font-size: var(--token-font-size-caption);
    line-height: var(--token-line-height-1-6);
  }

  .belit-film-poster,
  .belit-film-video {
    -o-object-position: 68% center;
       object-position: 68% center;
  }

  .belit-film-vignette {
    background: linear-gradient(to top, rgb(var(--token-color-black) / 0.7), rgb(var(--token-color-black) / 0.1) 62%, transparent);
  }

  .belit-hero-details {
    grid-template-columns: 1fr;
  }

  /* Hero actions span the same column width on small screens; otherwise the
     primary and secondary CTAs take their natural text widths and read uneven. */
  .belit-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .belit-hero-actions .belit-primary-link,
  .belit-hero-actions .belit-secondary-link {
    box-sizing: border-box;
    width: 100%;
    flex: 1 1 auto;
  }

  /* Stone Finder CTAs match the hero's treatment on small screens: the reveal
     wrappers become single-column grid items so the links span the copy column
     instead of shrinking to their text width. */
  .belit-curation-prompts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .belit-curation-prompts .belit-reveal {
    width: 100%;
  }

  .belit-curation-prompts .belit-primary-link,
  .belit-curation-prompts .belit-secondary-link {
    box-sizing: border-box;
    width: 100%;
    white-space: normal;
  }

  .belit-gemstone-stage,
  .belit-gemstone-unavailable {
    aspect-ratio: 1 / 0.92;
  }

  .belit-stone-changer {
    min-height: 6.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .belit-home *,
  .belit-home *::before,
  .belit-home *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .belit-gemstone-loading i::after,
  .belit-gemstone-study--deferred i::after {
    animation: none;
  }
}

.belit-deck-stage,
.belit-deck-track {
  display: block;
}

/* Sections stack in normal document flow; the page scrolls down through them.
   The stage/track wrappers survive only because consumers resolve these class names
   with closest() — HomeReveal, the gemstone field, the process carousel — all
   continue to work because their contract remains tied to .belit-deck-page. */
.belit-deck-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* The section shell stretches to fill its page, restoring the definite-height chain
   the curation grid and gemstone canvas hang off (`height: 100%` all the way down).
   The old deck gave that chain a fixed 100svh panel; the flexible floor keeps the same
   full-screen composition while still letting taller content grow past one screen. */
.belit-deck-page > *:not(.belit-cms-section-background) {
  flex: 1 0 auto;
}

/* Keep reveal/appear entrance mechanisms wired to .is-active (now driven by scroll
   position rather than deck progress).  The CSS transitions fire when the section
   crosses the viewport centre line, and reduced-motion honours prefers-reduced-motion. */
.belit-deck-page .belit-reveal {
  transform: translateY(1.25rem);
}
.belit-deck-page.is-active .belit-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* data-appear and appear-delay work the same as before — .is-active gates are now
   supplied by the ScrollSections scroll-spy rather than the horizontal deck. */
html.js .belit-deck-page [data-appear] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--token-duration-slow) var(--token-ease-standard),
    transform var(--token-duration-slow) var(--token-ease-standard);
  transition-delay: var(--appear-delay, 0ms);
  will-change: transform;
}
html.js .belit-deck-page.is-active [data-appear]:not([data-appear-hold]) {
  opacity: 1;
  transform: translateY(0);
}

/* The reduced-motion override now applies to all panels that carry .is-active,
   not just the static deck variant. */
@media (prefers-reduced-motion: reduce) {
  html.js .belit-deck-page .belit-reveal,
  html.js .belit-deck-page [data-appear] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------- making process carousel */

/* The carousel lives inside its own section; its height resolves against the
   section's natural height rather than a fixed deck panel. */
.belit-process-section {
  background: var(--belit-obsidian);
}

.belit-process-inner {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--token-spacing-5-5);
  padding-bottom: var(--token-space-8);
  gap: var(--token-spacing-0);
}

/* --------------------------------------------------------- gemstone field overrides
   (the deck track transform is gone, so the focused stage and mobile detail card
   can now use fixed positioning instead of absolute + computed offsets). */
.belit-curation-field .belit-gemstone-stage.is-focused {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  aspect-ratio: auto;
  border-color: transparent;
  border-radius: var(--token-radius-0);
  -webkit-mask-image: none;
  mask-image: none;
}

/* --------------------------------------------------------- making process carousel */

/* The carousel is sized to sit inside one section rather than overflow it, so the
   section costs a single step instead of an extra half-screen of vertical travel. */

@media (max-width: 1023px) {
  .belit-objects-inner {
    padding-block: var(--token-layout-story-section-padding);
  }

  .belit-object-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    grid-auto-flow: row;
    width: 100%;
    overflow: visible;
    padding-bottom: var(--token-spacing-0);
    scroll-snap-type: none;
  }

  .belit-object-card {
    scroll-snap-align: none;
  }

  .belit-process-inner {
    padding-top: var(--token-space-10);
    padding-bottom: var(--token-space-5);
  }
}

/* Tailwind's preflight is disabled project-wide, so the list reset is explicit here. */
.belit-process-inner ul {
  margin: var(--token-spacing-0);
  padding: var(--token-spacing-0);
  list-style: none;
}

/* Hide the mobile selector's scrollbar without losing the ability to scroll it. */
.belit-process-inner .overflow-x-auto {
  scrollbar-width: none;
}

.belit-process-inner .overflow-x-auto::-webkit-scrollbar {
  display: none;
}

/* The stack shows a window of five labels; fading the cut edges keeps it reading as a
   continuous list rather than a hard crop. Vertical on desktop, horizontal on mobile. */
.belit-process-labels {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    rgb(var(--token-color-black)) 12%,
    rgb(var(--token-color-black)) 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    rgb(var(--token-color-black)) 12%,
    rgb(var(--token-color-black)) 88%,
    transparent
  );
}

@media (min-width: 1024px) {
  .belit-process-labels {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--token-color-black)) 22%,
      rgb(var(--token-color-black)) 78%,
      transparent
    );
    mask-image: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--token-color-black)) 22%,
      rgb(var(--token-color-black)) 78%,
      transparent
    );
  }
}

/* The landing entry gate holds the BÉLIT loading screen over the whole page
   while the stone finder's models and textures decode underneath it, then
   fades away over an already-prepared landing. The wrapper owns only the
   fade; the loading screen inside paints the full-bleed background. */
.belit-entry-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease);
}

.belit-entry-gate--open {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .belit-entry-gate {
    transition: none;
  }
}

.hover\:border-gold\/30:hover {
  border-color: rgb(var(--token-color-gold) / 0.3) !important;
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1)) !important;
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
}

.hover\:text-stone:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--token-color-stone) / var(--tw-text-opacity, 1)) !important;
}

.hover\:opacity-70:hover {
  opacity: 0.7 !important;
}

.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) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

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

.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) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.focus-visible\:ring-blue-500:focus-visible {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important;
}

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

@media (min-width: 640px) {
  .sm\:max-w-\[19rem\] {
    max-width: 19rem !important;
  }
}

@media (min-width: 1024px) {
  .lg\:mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .lg\:w-full {
    width: 100% !important;
  }
  .lg\:min-w-0 {
    min-width: 0px !important;
  }
  .lg\:max-w-\[30rem\] {
    max-width: 30rem !important;
  }
  .lg\:grid-cols-\[38fr_62fr\] {
    grid-template-columns: 38fr 62fr !important;
  }
  .lg\:flex-col {
    flex-direction: column !important;
  }
  .lg\:gap-0 {
    gap: 0px !important;
  }
  .lg\:gap-14 {
    gap: 3.5rem !important;
  }
  .lg\:gap-7 {
    gap: 1.75rem !important;
  }
  .lg\:overflow-hidden {
    overflow: hidden !important;
  }
  .lg\:p-7 {
    padding: 1.75rem !important;
  }
  .lg\:px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
/* Shared dismiss control: a plain button carrying its own presentation, so the
   look does not depend on whether Carbon's stylesheet happens to be loaded.

   Surfaces below state the whole pill — 44px, a hairline in the outline colour,
   the surface fill it sits on, and a muted glyph that brightens on hover. The
   accessible name stays on the button. Carbon's stylesheet only loads on the
   stone-finder and order routes, and these selectors carry more specificity than
   Carbon's `.cds--btn` so the presentation holds wherever the sheet does land.

   Surfaces are added to the lists below as they adopt the control, so a new
   overlay cannot ship a dismiss button that looks like nothing else on the
   site. Most anchor it to their own corner, which is what the first block does;
   a surface that carries the control in the flow of a row (the newsletter toast)
   is listed separately further down and gets the presentation without the
   placement. */
.belit-modal .belit-close,
.belit-product-modal .belit-close,
.membership-panel .membership-close,
.belit-cart-drawer .belit-cart-close,
.belit-favorites-drawer .belit-favorites-close,
.belit-sizing-guide .belit-sizing-guide-close,
.belit-account-choice .belit-account-choice-close,
.rj-share-sheet .belit-share-close,
.rj-story .belit-reveal-close,
.belit-mobile-menu .belit-menu-close,
.belit-gallery-lightbox .belit-gallery-close {
  position: absolute;
  top: var(--token-space-2);
  inset-inline-end: var(--token-space-2);
  z-index: 3;
  display: grid;
  place-items: center;
  inline-size: var(--tap-target-min);
  min-inline-size: var(--tap-target-min);
  block-size: var(--tap-target-min);
  min-block-size: var(--tap-target-min);
  max-inline-size: none;
  max-block-size: none;
  padding: var(--token-spacing-0);
  border: var(--token-border-width) solid var(--md-outline-gold-variant);
  border-radius: var(--token-radius-pill);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition:
    border-color var(--token-duration-fast) var(--token-ease-standard),
    background-color var(--token-duration-fast) var(--token-ease-standard),
    color var(--token-duration-fast) var(--token-ease-standard);
}

/* The account panel keeps its own inset further in than the other surfaces: it
   lines up with the panel's content gutter, so the control reads as the corner of
   the composition rather than a header row beside the tabs. The drawers and the
   Stone Modal hug their own corners instead — they use the base inset above.

   This rule must stay a selector list of its own. When its explanatory comment
   was written after the hover selector below it, the hover rule inherited this
   block and the close button jumped 1rem on hover, which oscillated with the
   hover state itself. */
.membership-panel .membership-close {
  /* The brand navigation sits above the membership screens; the close control
     drops below the bar instead of colliding with its actions. */
  top: calc(4.75rem + var(--token-space-5));
  inset-inline-end: var(--token-space-5);
}

/* The newsletter toast sits in a row, not over a corner, so it takes the same
   pill without being taken out of the flow. */
.belit-newsletter-confirm-toast .belit-toast-close {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--tap-target-min);
  min-inline-size: var(--tap-target-min);
  block-size: var(--tap-target-min);
  min-block-size: var(--tap-target-min);
  max-inline-size: none;
  max-block-size: none;
  padding: var(--token-spacing-0);
  border: var(--token-border-width) solid var(--md-outline-gold-variant);
  border-radius: var(--token-radius-pill);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition:
    border-color var(--token-duration-fast) var(--token-ease-standard),
    background-color var(--token-duration-fast) var(--token-ease-standard),
    color var(--token-duration-fast) var(--token-ease-standard);
}

.belit-modal .belit-close:hover,
.belit-product-modal .belit-close:hover,
.belit-sizing-guide .belit-sizing-guide-close:hover,
.membership-panel .membership-close:hover,
.belit-cart-drawer .belit-cart-close:hover,
.belit-favorites-drawer .belit-favorites-close:hover,
.belit-account-choice .belit-account-choice-close:hover,
.rj-share-sheet .belit-share-close:hover,
.rj-story .belit-reveal-close:hover,
.belit-mobile-menu .belit-menu-close:hover,
.belit-newsletter-confirm-toast .belit-toast-close:hover,
.belit-gallery-lightbox .belit-gallery-close:hover {
  /* Colour only. Anything that moves the button — top, inset, transform, size —
     changes where the pointer is, and a hover that relocates its own target
     oscillates against itself. */
  border-color: var(--md-outline-gold);
  background: var(--md-surface-container-highest);
  color: var(--color-ink);
}

.belit-modal .belit-close:focus-visible,
.belit-product-modal .belit-close:focus-visible,
.membership-panel .membership-close:focus-visible,
.belit-cart-drawer .belit-cart-close:focus-visible,
.belit-favorites-drawer .belit-favorites-close:focus-visible,
.belit-sizing-guide .belit-sizing-guide-close:focus-visible,
.belit-account-choice .belit-account-choice-close:focus-visible,
.rj-share-sheet .belit-share-close:focus-visible,
.rj-story .belit-reveal-close:focus-visible,
.belit-mobile-menu .belit-menu-close:focus-visible,
.belit-newsletter-confirm-toast .belit-toast-close:focus-visible,
.belit-gallery-lightbox .belit-gallery-close:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

/* The glyph is decorative; the accessible name lives on the button. This one is
   CloseButton's own SVG. The rule below it is Carbon's, for the stone modal's
   header close, which Carbon still renders itself. */
.belit-close__glyph {
  inline-size: 20px;
  block-size: 20px;
}

.belit-close .cds--modal-close__icon {
  inline-size: 20px;
  block-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .belit-modal .belit-close,
  .belit-product-modal .belit-close,
  .membership-panel .membership-close,
  .belit-cart-drawer .belit-cart-close,
  .belit-favorites-drawer .belit-favorites-close,
  .belit-sizing-guide .belit-sizing-guide-close,
  .belit-account-choice .belit-account-choice-close,
  .rj-share-sheet .belit-share-close,
  .rj-story .belit-reveal-close,
  .belit-mobile-menu .belit-menu-close,
  .belit-newsletter-confirm-toast .belit-toast-close,
  .belit-gallery-lightbox .belit-gallery-close {
    transition: none;
  }
}
/* The parts of a dismissible surface that were byte-identical across the bag
   drawer, the saved-gemstones drawer and the checkout dialog. Each surface keeps
   its own layer, surface and animation rules; only these were repeated. */

.belit-overlay-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(var(--token-color-black) / 0.72);
  cursor: pointer;
}

.belit-overlay-header {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  padding: var(--token-spacing-0) var(--token-space-5);
  border-bottom: 1px solid var(--color-border);
}

.belit-overlay-header h2 {
  margin: var(--token-spacing-0);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h2);
  font-weight: 400;
}.belit-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--token-space-6);
  color: var(--color-text-muted);
  text-align: center;
}

/* Only a fixed-height surface (a drawer) can stretch to fill. */
.belit-empty-state--fill {
  min-height: 100%;
}

.belit-empty-state-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--token-space-4);
}

.belit-empty-state-mark {
  display: grid;
  place-items: center;
  color: var(--color-text);
}

.belit-empty-state-title {
  margin: var(--token-spacing-0);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h3);
  font-weight: 400;
  color: rgb(var(--token-color-white));
}

.belit-empty-state-subtitle {
  margin: var(--token-spacing-0);
  font-family: var(--font-body);
  font-size: var(--token-font-size-body);
  line-height: var(--token-line-height-1-4);
}

.belit-empty-state-subtitle a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Saved-gemstones drawer: same right-hand anatomy as the cart drawer, with a
   colour swatch standing in for the product photo. */

.belit-favorites-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

/* The backdrop and the header bar are shared with the bag drawer and the
   checkout dialog: see molecules/OverlayPanel/OverlayPanel.css. */

.belit-favorites-drawer {
  position: relative;
  display: flex;
  width: min(100%, 26rem);
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--token-shadow-drawer);
  animation: belit-favorites-enter 360ms var(--token-ease-standard) both;
}

.belit-favorites-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: var(--token-space-5);
  overflow-y: auto;
  color: var(--color-text-muted);
}

.belit-favorites-content > p {
  margin: var(--token-spacing-0);
}

.belit-favorites-error p {
  margin: var(--token-spacing-0) var(--token-spacing-0) var(--token-space-4);
}

.belit-favorites-retry,
.belit-favorites-continue {
  width: 100%;
  min-height: var(--token-button-min-height-primary);
  border-radius: var(--token-radius-pill);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
  cursor: pointer;
}

/* The retry is the drawer's error state, so it wears the standard error-page
   button — navy surface, ivory label — rather than the landing's gold accent,
   which body.belit-home-body redefines on #root. */
.belit-favorites-retry {
  min-height: var(--token-button-min-height);
  padding: var(--token-space-2) var(--token-space-5);
  border: 1px solid rgb(var(--token-color-navy-375));
  border-radius: var(--token-radius-xs);
  background: rgb(var(--token-color-navy-375));
  color: rgb(var(--token-color-ivory));
  font-family: var(--font-body);
  font-weight: 700;
  transition:
    background-color var(--token-duration-300ms) var(--token-ease-standard),
    border-color var(--token-duration-300ms) var(--token-ease-standard),
    color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-favorites-retry:hover,
.belit-favorites-retry:focus-visible {
  background: rgb(var(--token-color-navy-300));
  border-color: rgb(var(--token-color-navy-300));
  color: rgb(var(--token-color-ivory));
}

@media (prefers-reduced-motion: reduce) {
  .belit-favorites-retry {
    transition: none;
  }
}

.belit-favorites-continue {
  display: inline-flex;
  width: 100%;
  min-height: var(--token-button-min-height-primary);
  align-items: center;
  justify-content: center;
  padding: var(--token-space-2) var(--token-space-5);
  border: var(--token-border-width) solid var(--color-border);
  border-radius: var(--token-radius-xs);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--token-font-size-cta);
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--token-duration-fast) var(--token-ease-standard),
    border-color var(--token-duration-fast) var(--token-ease-standard),
    color var(--token-duration-fast) var(--token-ease-standard);
}

.belit-favorites-continue:hover:not(:disabled),
.belit-favorites-continue:focus-visible {
  border-color: rgb(var(--token-color-ivory));
  color: var(--color-text);
}

.belit-favorites-empty {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--token-space-4);
  text-align: center;
}

.belit-favorites-empty p {
  margin: var(--token-spacing-0);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h3);
}

.belit-favorites-empty .belit-favorites-empty-hint {
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-body);
}

.belit-favorites-list {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-4);
  margin: var(--token-spacing-0);
  padding: var(--token-spacing-0);
  list-style: none;
}

.belit-favorites-item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--token-spacing-0-9);
  padding-bottom: var(--token-space-4);
  border-bottom: 1px solid var(--color-border);
}

/* The swatch reads the stone's catalogue reference colour; stones that fell out
   of the catalogue fall back to their initial on the page's own background. */
.belit-favorites-swatch {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: var(--token-radius-pill);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
}

/* Stones with an approved 3D asset render the live model instead of a swatch —
   same viewer the details modal uses, fitted to the thumbnail box. */
.belit-favorites-thumb {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--token-radius-pill);
  background: var(--color-bg);
}

.belit-favorites-thumb .belit-essential-stone-modal-model {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
}

.belit-favorites-details {
  min-width: 0;
}

.belit-favorites-details h3,
.belit-favorites-details p {
  margin: var(--token-spacing-0);
}

.belit-favorites-details h3 {
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
  font-weight: 400;
}

.belit-favorites-details p {
  margin-top: var(--token-spacing-0-3);
  color: var(--color-text-muted);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-4);
}

.belit-favorites-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--token-space-1);
}

/* The row's call to move on to the piece this stone will live in: a gold
   text link, matching the drawer's other quiet actions. */
.belit-favorites-select {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--token-space-2);
  border: 0;
  background: transparent;
  color: var(--color-gold);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  font-weight: 700;
  letter-spacing: var(--token-letter-spacing-0-06);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--token-duration-fast) var(--token-ease-standard);
}

.belit-favorites-select:hover,
.belit-favorites-select:focus-visible {
  color: var(--color-text);
}

.belit-favorites-select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.belit-favorites-remove {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  text-decoration: underline;
  cursor: pointer;
}

.belit-favorites-count {
  margin-top: auto;
  padding-top: var(--token-space-5);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
}

@keyframes belit-favorites-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .belit-favorites-drawer { animation: none; }
}
/* Self-contained styling for BrandNavigation so the header renders on any page
   without depending on BrandHome.css's `.belit-home` scope. The custom-property
   values below mirror the `.belit-home` block (including its breakpoint gutter
   steps), so rendering on the landing page is unchanged while product pages get
   the same shell. `.belit-reveal` and `.belit-shell` are duplicated here because
   they are part of the header's behaviour on pages that do not load BrandHome.css;
   on the landing page the identical definitions in BrandHome.css simply also load. */

.belit-navigation,
.belit-mobile-menu {
  --belit-obsidian: var(--color-bg);
  --belit-ivory: var(--color-text);
  --belit-stone: var(--color-text-muted);
  --belit-gold: var(--color-gold);
  --belit-ivory-border: var(--color-border);
  --belit-shell-width: var(--token-layout-max-width);
  --belit-shell-gutter: var(--token-layout-gutter);
}

/* The global `a { color: var(--color-gold) }` reset in Index.css would otherwise
   tint the header's links on pages without a `.belit-home` scope. */
.belit-navigation :where(a),
.belit-mobile-menu :where(a) {
  color: inherit;
  text-decoration: none;
}

.belit-navigation :where(button, a):focus-visible,
.belit-mobile-menu :where(button, a):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.belit-navigation {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 0;
  background: transparent;
  transition: background-color var(--token-duration-300ms) var(--token-ease-standard), backdrop-filter var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-navigation.is-scrolled {
  background: rgb(var(--token-color-obsidian) / 0.75);
  backdrop-filter: blur(12px);
}

.belit-navigation--minimal .belit-navigation-links,
.belit-navigation--minimal .belit-menu-button {
  display: none !important;
}

.belit-navigation--minimal .belit-navigation-action {
  display: flex;
}

.belit-navigation-inner {
  position: relative;
  display: flex;
  gap: var(--token-space-2);
  height: 4.75rem;
  align-items: center;
  justify-content: space-between;
}

.belit-navigation-logo > a {
  min-height: var(--tap-target-min);
  border: 0;
  border-radius: var(--token-radius-md);
  padding-inline: var(--token-spacing-0-875);
}

.belit-navigation-logo,
.belit-navigation-action,
.belit-navigation-link-reveal {
  display: flex;
}

.belit-navigation-logo {
  flex: 0 0 auto;
}

.belit-navigation-logo > a,
.belit-mobile-menu-header > a {
  display: flex;
  min-height: 44px;
  align-items: center;
}

.belit-navigation-logomark {
  display: block;
  width: var(--token-max-width-130px);
  height: auto;
  aspect-ratio: 533 / 104;
  max-width: var(--token-max-width-8-5rem);
  -o-object-fit: contain;
     object-fit: contain;
}

.belit-navigation-links {
  position: absolute;
  left: 50%;
  display: none;
  transform: translateX(-50%);
  align-items: center;
  gap: var(--token-space-6);
}

.belit-navigation-links a {
  display: inline-flex;
  min-height: var(--token-button-min-height);
  align-items: center;
  color: var(--belit-stone);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
  letter-spacing: var(--token-letter-spacing-0-03);
  padding: var(--token-spacing-0-625) var(--token-space-4);
  border-radius: var(--token-radius-pill);
  transition: color var(--token-duration-300ms) var(--token-ease-standard), background-color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-navigation-links a:hover {
  color: var(--belit-ivory);
}

.belit-navigation-links a[aria-current="page"] {
  color: var(--color-text);
}

.belit-navigation-action {
  display: flex;
  margin-left: auto;
  /* Separates the saved-gemstones and cart buttons when both show. */
  gap: var(--token-space-1);
}

.belit-cart-icon-button,
.belit-nav-contact-link {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--token-radius-pill);
  background: transparent;
  color: var(--belit-ivory);
  transition: color var(--token-duration-300ms) var(--token-ease-standard), background-color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-cart-icon-button {
  position: relative;
  cursor: pointer;
}

.belit-cart-icon-button:hover,
.belit-nav-contact-link:hover {
  background: rgb(var(--token-color-ivory) / 0.1);
  color: var(--color-text);
}

.belit-cart-count {
  position: absolute;
  top: var(--token-spacing-0-2);
  right: var(--token-spacing-0-15);
  display: grid;
  min-width: 1rem;
  height: 1rem;
  place-items: center;
  border-radius: var(--token-radius-50pct);
  background: var(--color-silver);
  color: var(--belit-obsidian);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1);
}

.belit-cart-icon-button--mobile {
  justify-content: flex-start;
  gap: var(--token-space-2);
  width: 100%;
  color: var(--belit-ivory);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-body);
}

/* On small screens the bar carries only the logomark and the menu trigger: the
   action row needs more width than the viewport has, and it crowded out the
   hamburger. Everything it holds stays reachable in the menu itself. */
@media (max-width: 767px) {
  .belit-navigation .belit-navigation-action {
    display: none;
  }
}

/* Contact channels (IG / email) shown instead of the cart on pages
   other than the main landing — same 44px pill anatomy as the cart button. */
/* Sign in / Register, and the signed-in name plus Sign out. Same pill anatomy
   as the cart button so the whole action row reads as one group. */
.belit-nav-account {
  display: flex;
  align-items: center;
  gap: var(--token-space-1);
}

.belit-nav-account-link,
.belit-nav-account-name {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--token-space-2);
  padding-inline: var(--token-space-2);
  border: 0;
  border-radius: var(--token-radius-pill);
  background: transparent;
  color: var(--belit-ivory);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-03);
}

.belit-nav-account-link {
  cursor: pointer;
  transition: color var(--token-duration-300ms) var(--token-ease-standard), background-color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-nav-account-link:hover {
  background: rgb(var(--token-color-ivory) / 0.1);
  color: var(--color-text);
}

/* The account menu. Anchored to the action row so it opens under the profile
   button, and dimmed to match the rest of the bar. */
.belit-nav-account-menu {
  position: absolute;
  top: calc(100% + var(--token-space-2));
  inset-inline-end: 0;
  z-index: 1;
  display: flex;
  min-width: 15rem;
  flex-direction: column;
  gap: var(--token-spacing-0-25);
  padding: var(--token-space-2);
  border: 1px solid var(--belit-ivory-border);
  border-radius: var(--token-radius-md);
  background: var(--belit-obsidian);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.35);
}

.belit-nav-account-greeting {
  display: flex;
  align-items: center;
  gap: var(--token-space-2);
  padding: var(--token-space-2) var(--token-space-3);
  color: var(--belit-ivory);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-body);
  /* The greeting wraps rather than widening the menu past the bar. */
  overflow-wrap: anywhere;
}

.belit-nav-account-menu-item {
  display: inline-flex;
  min-height: var(--token-button-min-height);
  align-items: center;
  gap: var(--token-space-2);
  padding-inline: var(--token-space-3);
  border: 0;
  border-radius: var(--token-radius-sm);
  background: transparent;
  color: var(--belit-ivory);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-03);
  text-align: start;
  cursor: pointer;
  transition: color var(--token-duration-300ms) var(--token-ease-standard), background-color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-nav-account-menu-item:hover {
  background: rgb(var(--token-color-ivory) / 0.1);
  color: var(--color-text);
}

/* Inside the full-screen mobile drawer the account block is already in the
   page flow, so it lays out inline instead of floating over it. */
.belit-nav-account--mobile .belit-nav-account-menu,
.belit-nav-account-inline {
  position: static;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.belit-nav-account-inline {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--token-spacing-0-25);
  margin-block-end: var(--token-space-2);
  padding-block-end: var(--token-space-2);
  border-block-end: 1px solid var(--belit-ivory-border);
}

/* Icon-only control: a square 44px pill, matching the cart and contact
   buttons so the row keeps one rhythm. */
.belit-nav-account-link--icon {
  min-width: 44px;
  justify-content: center;
  padding-inline: var(--token-spacing-0);
}

.belit-nav-account--mobile {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--token-space-1);
  margin-block-end: var(--token-space-2);
  padding-block-end: var(--token-space-2);
  border-block-end: 1px solid var(--belit-ivory-border);
}

.belit-nav-account--mobile .belit-nav-account-link {
  width: 100%;
  min-height: var(--token-button-min-height);
  font-size: var(--token-font-size-body);
}

.belit-nav-account--mobile .belit-nav-account-link--icon {
  justify-content: flex-start;
}

.belit-nav-account--mobile .belit-nav-account-link:hover {
  background: transparent;
}

.belit-nav-contact {
  display: flex;
  align-items: center;
  gap: var(--token-space-1);
}

.belit-nav-contact--mobile {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.belit-nav-contact--mobile .belit-nav-contact-link {
  justify-content: flex-start;
  gap: var(--token-space-2);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-body);
}

.belit-nav-contact--mobile .belit-nav-contact-link:hover {
  background: transparent;
}

/* The menu's dismiss control is the shared CloseButton; only the control that
   opens the menu keeps its own bare treatment, because it sits in the header
   rather than over a surface. */
.belit-menu-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--belit-ivory);
  cursor: pointer;
}

.belit-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--belit-obsidian);
  color: var(--belit-ivory);
}

/* Routes whose content is a full-viewport overlay, a direct product visit or
   the Result Review story, lift the bar above that overlay so the menu stays
   reachable (the route shell sets the class). The drawer lifts with it: left
   at its own layer it would open behind the bar it belongs to. */
body.belit-nav-over-overlay .belit-navigation {
  z-index: 1010;
}

body.belit-nav-over-overlay .belit-mobile-menu {
  z-index: 1020;
}

.belit-mobile-menu-header {
  display: flex;
  height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  padding: var(--token-spacing-0) var(--token-spacing-1-25);
  border-bottom: 1px solid var(--belit-ivory-border);
}

.belit-mobile-menu-links {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--token-space-1);
  padding: var(--token-space-9) var(--token-spacing-1-25) var(--token-space-6);
}

.belit-mobile-menu-links > a:not(.belit-primary-link) {
  display: inline-flex;
  min-height: var(--token-button-min-height);
  align-items: center;
  padding-block: var(--token-spacing-0-7);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h2);
  line-height: var(--token-line-height-1);
}

.belit-mobile-menu-links > a:not(.belit-primary-link):hover {
  color: var(--color-text);
}

.belit-mobile-menu-links .belit-primary-link {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: var(--token-space-7);
  background: rgb(var(--token-color-accent));
  color: rgb(var(--token-color-ivory));
}

.belit-mobile-menu-footer {
  padding: var(--token-space-4) var(--token-spacing-1-25) var(--token-space-9);
  border-top: 1px solid var(--belit-ivory-border);
}

@media (min-width: 640px) {
  .belit-navigation,
  .belit-mobile-menu {
    --belit-shell-gutter: 2rem;
  }
}

@media (min-width: 768px) {
  .belit-navigation,
  .belit-mobile-menu {
    --belit-shell-gutter: 3rem;
  }

  .belit-navigation-links {
    display: flex;
  }

  .belit-menu-button {
    display: none;
  }
}

@media (min-width: 1024px) {
  .belit-navigation,
  .belit-mobile-menu {
    --belit-shell-gutter: 4rem;
  }

  .belit-navigation-inner {
    height: 5rem;
  }

  .belit-navigation-links {
    gap: var(--token-space-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .belit-navigation,
  .belit-navigation *,
  .belit-mobile-menu,
  .belit-mobile-menu * {
    animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
  }
}
.belit-sf {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  margin-block: var(--token-space-6);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--token-radius-xl);
  background: rgb(var(--token-color-obsidian) / 0.88);
  text-align: left;
  backdrop-filter: blur(18px);
}

/* The lazy-route loader is fixed. Keep the footer out of the flow until the
   route content is ready, otherwise its top margin collapses through #root
   and creates a full-viewport layout shift. */
#root > .belit-loading ~ .belit-sf {
  display: none;
}

.belit-sf-inner {
  width: min(100%, var(--token-layout-max-width));
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 6vw, 5.5rem);
}

.belit-sf-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(8rem, 1fr)) auto;
  gap: var(--token-space-6);
  width: 100%;
  padding: var(--token-space-5) 0;
}

.belit-sf-brand {
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--token-space-2);
}

.belit-sf-logomark {
  display: block;
  width: auto;
  height: 1.55rem;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.belit-sf-address {
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  transition: color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-sf-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--token-space-2);
  font-size: var(--token-font-size-caption);
}

.belit-sf-label {
  margin-bottom: var(--token-spacing-0-375);
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-18);
  text-transform: uppercase;
}

.belit-sf-link,
.belit-sf-column p {
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  text-decoration: none;
  transition: color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-sf-link:hover {
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .belit-sf,
  .belit-sf * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 767px) {
  .belit-sf {
    margin-block: var(--token-space-4);
    border-radius: var(--token-radius-lg);
  }

  /* A phone has no room to spare, but the footer's own gutter is what keeps the
     wordmark and the link columns off the screen edge. The desktop measure
     (clamp down to 1.25rem) leaves ~22px on a 375px screen, which reads as the
     text sitting on the bezel; the card holds a full 24px instead, and the same
     on all four sides so the block stays square. */
  .belit-sf-inner {
    padding-inline: var(--token-space-5);
  }

  .belit-sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--token-space-4) var(--token-space-5);
    padding: var(--token-space-5) 0;
  }

  .belit-sf-grid > :first-child {
    grid-column: 1 / -1;
  }

  .belit-sf-column {
    gap: var(--token-spacing-0-3);
    font-size: var(--token-font-size-caption);
  }

  .belit-sf-label {
    margin-bottom: var(--token-spacing-0-125);
  }
}
.belit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--token-button-min-height);
  padding: 0 28px;
  border: var(--token-border-width) solid transparent;
  border-radius: var(--token-button-radius);
  font-family: var(--font-interface);
  font-size: 15px;
  font-weight: 700;
  /* ButtonLink renders a router <Link> with these classes, and the global anchor
     rule underlines it. A button is not a link, whatever element carries it. */
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.belit-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.belit-button:disabled,
.belit-button[aria-disabled='true'] {
  cursor: not-allowed;
  background: rgb(var(--token-color-border));
  border-color: rgb(var(--token-color-border));
  color: var(--color-text-muted);
}

.belit-button--primary {
  border-color: rgb(var(--token-color-accent));
  background: rgb(var(--token-color-accent));
  color: rgb(var(--token-color-ivory));
}

.belit-button--primary:hover:not(:disabled):not([aria-disabled='true']) {
  background: rgb(var(--token-color-navy-675));
}

.belit-button--secondary {
  background: rgb(var(--token-color-ivory));
  color: rgb(var(--token-color-accent));
  border-color: rgb(var(--token-color-ivory));
}

.belit-button--secondary:hover:not(:disabled):not([aria-disabled='true']) {
  background: rgb(var(--token-color-ivory-dim));
}

.belit-button--outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.belit-button--outline:hover:not(:disabled):not([aria-disabled='true']) {
  border-color: var(--color-text);
}

.belit-button--ghost {
  background: transparent;
  color: var(--color-text);
}

.belit-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {
  color: var(--color-silver);
}
/* Cookie consent dialog. Follows the BÉLIT design system posture
   (Materials/brand-b-lit-b-lit-is-3a2213/DESIGN.md): obsidian scrim, 8px
   surface radius, 1px hairlines in border colour only, 44px controls, and DS
   motion (fade + gentle rise, cubic-bezier(0.16, 1, 0.3, 1)). On narrow
   viewports the dialog becomes a bottom sheet, the pattern the reference
   designs use for mobile consent. */
.belit-cookie-consent-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--token-space-4);
}

.belit-cookie-consent-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(var(--token-color-obsidian) / 0.72);
}

.belit-cookie-consent {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 30rem);
  max-height: calc(100vh - var(--token-space-8));
  max-height: calc(100dvh - var(--token-space-8));
  overflow-y: auto;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--token-radius-md);
  box-shadow: var(--token-shadow-overlay-strong);
  outline: none;
  animation: belit-cookie-consent-enter 360ms var(--token-ease-standard) both;
}

.belit-cookie-consent-header {
  padding: var(--token-space-5) var(--token-space-5) var(--token-space-4);
}

.belit-cookie-consent-eyebrow {
  margin: var(--token-spacing-0) 0 var(--token-space-2);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-24);
  text-transform: uppercase;
  color: var(--color-gold);
}

.belit-cookie-consent-title {
  margin: var(--token-spacing-0) 0 var(--token-space-2);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h3);
  font-weight: 400;
  line-height: var(--token-line-height-1-5);
}

.belit-cookie-consent-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--token-spacing-0) var(--token-space-5) var(--token-space-4);
}

.belit-cookie-consent-message {
  margin: var(--token-spacing-0) 0 var(--token-space-4);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-5);
}

.belit-cookie-consent-categories {
  list-style: none;
  margin: var(--token-spacing-0);
  padding: var(--token-spacing-0);
}

.belit-cookie-consent-category {
  padding: var(--token-space-3) var(--token-spacing-0);
  border-top: 1px solid var(--color-border);
}

.belit-cookie-consent-category-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--token-space-2);
}

.belit-cookie-consent-category-name {
  font-family: var(--font-body);
  font-size: var(--token-font-size-body);
  font-weight: 700;
}

/* Gold pill carrying dark text, per the brand rule that gold carries dark
   on-gold content. */
.belit-cookie-consent-badge {
  flex: none;
  padding: var(--token-space-1) var(--token-space-2);
  border-radius: var(--token-radius-pill);
  background: var(--color-gold);
  color: rgb(var(--token-color-obsidian));
  font-family: var(--font-interface);
  font-size: var(--token-font-size-tag);
  letter-spacing: var(--token-letter-spacing-0-06);
  text-transform: uppercase;
  white-space: nowrap;
}

.belit-cookie-consent-category-description {
  margin: var(--token-space-1) var(--token-spacing-0) var(--token-spacing-0);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-5);
}

/* Category toggle. On state: gold track with the obsidian knob (gold carries
   dark on-gold content). Off state: stone track at low opacity. */
.belit-cookie-consent-switch {
  position: relative;
  flex: none;
  box-sizing: border-box;
  margin-inline-start: auto;
  width: 2.75rem;
  height: 1.5rem;
  padding: var(--token-spacing-0);
  border: 1px solid var(--color-border);
  border-radius: var(--token-radius-pill);
  background: rgb(var(--token-color-stone) / 0.18);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--token-ease-standard),
    border-color var(--dur-fast) var(--token-ease-standard);
}

.belit-cookie-consent-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--token-radius-50pct);
  background: var(--color-text-muted);
  transform: translateY(-50%);
  transition:
    transform var(--dur-fast) var(--token-ease-standard),
    background-color var(--dur-fast) var(--token-ease-standard);
}

.belit-cookie-consent-switch[aria-checked="true"] {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.belit-cookie-consent-switch[aria-checked="true"]::after {
  transform: translateY(-50%) translateX(1.25rem);
  background: rgb(var(--token-color-obsidian));
}

.belit-cookie-consent-switch:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Necessary cookies cannot be switched off; keep the control fully visible
   rather than dimming it like a disabled Button. */
.belit-cookie-consent-switch:disabled {
  cursor: default;
  opacity: 1;
}

.belit-cookie-consent-actions {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-2);
  padding: var(--token-space-4) var(--token-space-5) var(--token-space-5);
  border-top: 1px solid var(--color-border);
}

.belit-cookie-consent-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--token-space-3);
}

.belit-cookie-consent-actions-row .belit-button {
  flex: 1 1 10rem;
  min-width: 0;
}

/* "Change my preferences" reads as a hyperlink rather than a button: a
   quiet centred text link under the headline choices, per the two-stage
   consent. */
.belit-cookie-consent-preferences-link {
  align-self: center;
  margin: var(--token-spacing-0);
  padding: var(--token-space-1) var(--token-space-2);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-06);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.belit-cookie-consent-preferences-link:hover {
  color: var(--color-text);
}

.belit-cookie-consent-preferences-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@keyframes belit-cookie-consent-enter {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .belit-cookie-consent { animation: none; }
}

/* Tablet viewports - adjust for medium screens */
@media (max-width: 64rem) {
  .belit-cookie-consent {
    width: min(100%, 36rem);
  }
  
  .belit-cookie-consent-actions-row {
    flex-direction: column;
  }
  
  .belit-cookie-consent-actions-row .belit-button {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Narrow viewports: the dialog becomes a full-width bottom sheet that slides
   up from the screen edge, the pattern the reference consent designs use. */
@media (max-width: 40rem) {
  .belit-cookie-consent-layer {
    align-items: flex-end;
    padding: var(--token-spacing-0);
  }

  .belit-cookie-consent {
    width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    border-bottom: 0;
    border-radius: var(--token-radius-md) var(--token-radius-md) 0 0;
    animation-name: belit-cookie-consent-sheet-enter;
  }

  /* Mobile-specific adjustments for better readability */
  .belit-cookie-consent-header {
    padding: var(--token-space-4) var(--token-space-4) var(--token-space-3);
  }

  .belit-cookie-consent-eyebrow {
    font-size: var(--token-font-size-tag);
    letter-spacing: var(--token-letter-spacing-0-12);
  }

  .belit-cookie-consent-title {
    font-size: var(--token-font-size-h4);
    line-height: var(--token-line-height-1-4);
  }

  .belit-cookie-consent-body {
    padding: var(--token-spacing-0) var(--token-space-4) var(--token-space-3);
  }

  .belit-cookie-consent-message {
    font-size: var(--token-font-size-body);
    line-height: var(--token-line-height-1-6);
  }

  .belit-cookie-consent-categories {
    margin-bottom: var(--token-space-2);
  }

  .belit-cookie-consent-category {
    padding: var(--token-space-2) var(--token-spacing-0);
  }

  .belit-cookie-consent-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--token-space-1);
  }

  .belit-cookie-consent-category-name {
    font-size: var(--token-font-size-caption);
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
  }

  .belit-cookie-consent-badge {
    order: 2;
    margin-top: 0;
    margin-inline-end: var(--token-space-2);
  }

  .belit-cookie-consent-switch {
    order: 3;
    margin-inline-start: 0;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .belit-cookie-consent-category-description {
    font-size: var(--token-font-size-caption);
    line-height: var(--token-line-height-1-5);
    padding-top: var(--token-space-1);
  }

  .belit-cookie-consent-actions {
    padding: var(--token-space-3) var(--token-space-4) var(--token-space-4);
  }

  .belit-cookie-consent-actions-row {
    flex-direction: column;
    gap: var(--token-space-2);
  }

  .belit-cookie-consent-actions-row .belit-button {
    flex: 1 1 auto;
    width: 100%;
    min-width: unset;
  }

  /* Ensure proper touch targets for mobile */
  .belit-cookie-consent-switch {
    width: 3rem;
    height: 1.75rem;
  }

  .belit-cookie-consent-switch::after {
    width: 1.25rem;
    height: 1.25rem;
    inset-inline-start: 0.25rem;
  }

  .belit-cookie-consent-switch[aria-checked="true"]::after {
    transform: translateY(-50%) translateX(1.375rem);
  }

  /* Prevent background scroll when cookie consent is open */
  .belit-cookie-consent-layer {
    overflow: hidden;
  }
}

/* Extra small mobile devices */
@media (max-width: 28rem) {
  .belit-cookie-consent {
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
  }

  .belit-cookie-consent-title {
    font-size: var(--token-font-size-body);
  }

  .belit-cookie-consent-message {
    font-size: var(--token-font-size-caption);
  }

  .belit-cookie-consent-category-name {
    font-size: var(--token-font-size-caption);
    font-weight: 600;
  }

  .belit-cookie-consent-category-description {
    font-size: var(--token-font-size-tag);
  }

  .belit-cookie-consent-actions-row .belit-button {
    padding: var(--token-space-3) var(--token-space-4);
  }
}

@keyframes belit-cookie-consent-sheet-enter {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
.belit-account-choice-layer {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: var(--token-space-4);
}

/* The backdrop and the header bar are shared with the bag drawer and the
   saved-gemstones drawer: see molecules/OverlayPanel/OverlayPanel.css. */

.belit-account-choice {
  position: relative;
  width: min(100%, 26rem);
  max-height: min(100%, 40rem);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--token-radius-md);
  box-shadow: var(--token-shadow-drawer);
  animation: belit-account-choice-enter 360ms var(--token-ease-standard) both;
}

.belit-account-choice-body {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-4);
  padding: var(--token-space-5);
  overflow-y: auto;
}

.belit-account-choice-kicker {
  margin: var(--token-spacing-0);
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-18);
}

.belit-account-choice-body h3 {
  margin: var(--token-spacing-0);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h3);
  font-weight: 400;
}

.belit-account-choice-note {
  margin: var(--token-spacing-0);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-4);
}

.belit-account-choice-option {
  display: flex;
  min-height: 5rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--token-spacing-0-35);
  padding: var(--token-spacing-0) var(--token-space-4);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-interface);
  text-align: left;
  cursor: pointer;
}

.belit-account-choice-option:hover {
  border-color: var(--color-text);
}

.belit-account-choice-option.is-guest {
  border-color: var(--color-text);
  background: transparent;
}

.belit-account-choice-option strong {
  font-size: var(--token-font-size-cta);
  font-weight: 400;
}

.belit-account-choice-option span {
  color: var(--color-text-muted);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-4);
}

@keyframes belit-account-choice-enter {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .belit-account-choice { animation: none; }
}
/* The one order line item: thumbnail, piece name, detail lines, and optional
   quantity / trailing / footer cells. Surfaces set --belit-order-line-thumb
   when their thumbnail should be a different size (the bag is narrower than
   the order card).

   --top and --price are the order row as the checkout summary, the receipt and
   the member's order history all state it: a square thumbnail, everything
   aligned to the first line, and a caption price in the interface face. Those
   three surfaces named the same rules separately; they share them from here so
   a piece cannot look bought in one place and merely ordered in another. The
   bag keeps its own rounder, narrower row. */

.belit-order-line {
  --belit-order-line-thumb: 3.5rem;
  display: grid;
  grid-template-columns: var(--belit-order-line-thumb) minmax(0, 1fr);
  gap: var(--token-space-3);
  align-items: center;
  min-width: 0;
}

.belit-order-line--leading {
  grid-template-columns: var(--belit-order-line-thumb) minmax(0, 1fr) auto;
}

.belit-order-line--trailing {
  grid-template-columns: var(--belit-order-line-thumb) minmax(0, 1fr) auto;
}

.belit-order-line--leading.belit-order-line--trailing {
  grid-template-columns: var(--belit-order-line-thumb) minmax(0, 1fr) auto auto;
}

.belit-order-line-image {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: var(--token-radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-18);
}

.belit-order-line-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.belit-order-line-text {
  min-width: 0;
}

.belit-order-line-text h3,
.belit-order-line-text p {
  margin: var(--token-spacing-0);
}

.belit-order-line-text h3 {
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
  font-weight: 400;
  line-height: var(--token-line-height-1-4);
}

.belit-order-line-text p {
  margin-top: var(--token-space-1);
  color: var(--color-text-muted);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-4);
}

/* The chosen options — stone, size, whatever the configurator collected — one
   caption per line under the title. Shared by every surface that shows a piece
   the shopper chose, so "Stone: smoky quartz" reads the same in the bag, at
   checkout, on the receipt and in the member's order history. */
.belit-order-line-options {
  display: flex;
  flex-direction: column;
  gap: var(--token-spacing-0-2);
  margin: var(--token-space-1) var(--token-spacing-0) var(--token-spacing-0);
  padding: var(--token-spacing-0);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-4);
  list-style: none;
}

.belit-order-line-leading {
  align-self: start;
  color: var(--color-text-muted);
  font-size: var(--token-font-size-caption);
  white-space: nowrap;
}

.belit-order-line-trailing {
  align-self: start;
}

/* Top-aligned order row: the thumbnail sits on the piece's first line instead of
   floating in the middle of a taller block of options. */
.belit-order-line--top {
  align-items: start;
}

.belit-order-line--top .belit-order-line-image {
  border-radius: var(--token-radius-0);
}

/* The price cell, stated the one way every order surface states it: secondary to
   the piece name, in the interface face, with figures that line up down a column. */
.belit-order-line-price {
  margin: var(--token-spacing-0);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.belit-order-line-footer {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--token-space-3);
  margin-top: var(--token-space-1);
  padding-top: var(--token-space-3);
  border-top: var(--token-border-width) solid var(--color-border);
  font-size: var(--token-font-size-caption);
}.belit-cart-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

/* The backdrop and the header bar are shared with the saved-gemstones drawer
   and the checkout dialog: see molecules/OverlayPanel/OverlayPanel.css. */

/* The dismiss control is shared: see components/molecules/CloseButton. The
   drawer anchors it, so the control resolves against this panel rather than the
   full-screen layer behind it. */
.belit-cart-drawer {
  position: relative;
  display: flex;
  width: min(100%, 26rem);
  height: 100%;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  border-left: var(--token-border-width) solid var(--color-border);
  box-shadow: var(--token-shadow-drawer);
  animation: belit-cart-enter var(--token-duration-normal) var(--token-ease-standard) both;
}

/* The bag's title sets a little more leading than the shared header rule. */
.belit-cart-header h2 {
  line-height: var(--token-line-height-1-2);
}

/* The dismiss control is shared: see components/molecules/CloseButton. */
.belit-cart-remove:focus-visible,
.belit-cart-checkout:focus-visible,
.belit-cart-continue:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.belit-cart-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: var(--token-space-5);
  overflow-y: auto;
}

.belit-cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--token-space-4);
}

/* The row itself — thumbnail, name, quantity, price over Remove — comes from
   components/molecules/OrderLineItem. The bag only adds its own thumbnail size
   and the hairline that separates one bag row from the next. */
.belit-cart-item {
  --belit-order-line-thumb: 3rem;
  padding-bottom: var(--token-space-5);
  border-bottom: var(--token-border-width) solid var(--color-border);
}

.belit-cart-item .belit-order-line-trailing {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--token-spacing-0-9);
}

.belit-cart-item-price {
  flex: 0 0 auto;
  margin: var(--token-spacing-0);
  color: var(--color-text);
  font-size: var(--token-font-size-caption);
  white-space: nowrap;
}

.belit-cart-item-quantity {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: var(--token-font-size-caption);
  white-space: nowrap;
}

/* Edit and Remove are the two things a shopper does to one bag row, so they
   read as a pair on one line rather than as two stacked links of different
   widths. The price keeps its own line above them. */
.belit-cart-item-actions {
  display: flex;
  align-items: center;
  gap: var(--token-space-4);
}

.belit-cart-edit,
.belit-cart-remove {
  padding: var(--token-spacing-0);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--token-duration-fast) var(--token-ease-standard);
}

.belit-cart-edit:hover,
.belit-cart-edit:focus-visible,
.belit-cart-remove:hover,
.belit-cart-remove:focus-visible {
  color: var(--color-gold);
}

.belit-cart-summary {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding: var(--token-space-5) var(--token-spacing-0) var(--token-space-4);
  border-top: var(--token-border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
}

.belit-cart-summary small {
  color: var(--color-text-muted);
  font-size: var(--token-font-size-caption);
}

.belit-cart-summary strong {
  color: var(--color-text);
  font-weight: 400;
}

.belit-cart-limit-note {
  margin: 0 0 var(--token-space-2);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-body);
}

/* The conditions a shopper decides on before they reach checkout: the production
   time, and the terms that govern the order. */
.belit-cart-consent {
  margin: 0 0 var(--token-space-4);
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-body);
}

.belit-cart-consent a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.belit-cart-checkout,
.belit-cart-continue {
  display: inline-flex;
  width: 100%;
  min-height: var(--token-button-min-height-primary);
  align-items: center;
  justify-content: center;
  padding: var(--token-space-2) var(--token-space-5);
  border-radius: var(--token-radius-xs);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
  cursor: pointer;
  transition:
    background-color var(--token-duration-fast) var(--token-ease-standard),
    border-color var(--token-duration-fast) var(--token-ease-standard),
    color var(--token-duration-fast) var(--token-ease-standard);
}

.belit-cart-checkout {
  border: var(--token-border-width) solid rgb(var(--token-color-navy-375));
  background: rgb(var(--token-color-navy-375));
  color: rgb(var(--token-color-ivory));
}

.belit-cart-checkout:hover:not(:disabled),
.belit-cart-checkout:focus-visible {
  border-color: rgb(var(--token-color-navy-300));
  background: rgb(var(--token-color-navy-300));
}

.belit-cart-continue {
  border: var(--token-border-width) solid var(--color-border);
  border-radius: var(--token-radius-0);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 700;
  white-space: nowrap;
}

.belit-cart-continue:hover:not(:disabled),
.belit-cart-continue:focus-visible {
  border-color: rgb(var(--token-color-ivory));
  color: var(--color-text);
}

.belit-cart-empty {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--token-space-6);
  color: var(--color-text-muted);
  text-align: center;
}

.belit-cart-empty-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--token-space-4);
}

.belit-cart-empty-mark {
  display: grid;
  place-items: center;
  color: var(--color-text);
}

.belit-cart-empty-title {
  margin: var(--token-spacing-0);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h3);
  font-weight: 400;
  color: rgb(var(--token-color-white));
}

.belit-cart-empty-subtitle {
  margin: var(--token-spacing-0);
  font-family: var(--font-body);
  font-size: var(--token-font-size-body);
  line-height: var(--token-line-height-1-4);
}

.belit-cart-empty-subtitle a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes belit-cart-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .belit-cart-drawer { animation: none; }

.belit-cart-edit,
  .belit-cart-remove,
  .belit-cart-checkout,
  .belit-cart-continue {
    transition: none;
  }
}

@media (max-width: 30rem) {
  .belit-cart-header {
    padding-inline: var(--token-space-3);
  }

  .belit-cart-content {
    padding: var(--token-space-3) var(--token-space-3) var(--token-space-5);
  }

  /* Four columns need room; below 30rem the quantity folds under the name and
     the price keeps the right edge. */
  .belit-cart-item {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: var(--token-space-2);
  }

  .belit-cart-item .belit-order-line-leading {
    grid-column: 2;
    grid-row: 2;
  }

  .belit-cart-item .belit-order-line-trailing {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}
/* frontend/src/components/atoms/NewsletterConfirmToast.css */
.belit-newsletter-confirm-toast {
  position: fixed;
  right: var(--token-space-4);
  bottom: var(--token-space-4);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: var(--token-space-3);
  max-width: min(calc(100vw - var(--token-space-8)), 26rem);
  padding: var(--token-space-3) var(--token-space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--token-radius-md);
  box-shadow: var(--token-shadow-drawer);
  font-family: var(--font-interface);
  animation: belit-newsletter-confirm-toast-enter 360ms var(--token-ease-standard) both;
}

.belit-newsletter-confirm-toast-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--token-radius-pill);
  background: rgb(var(--token-color-ivory));
  color: rgb(var(--token-color-on-gold));
  font-size: var(--token-font-size-body);
  line-height: 1;
}

.belit-newsletter-confirm-toast-message {
  margin: 0;
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-4);
}

/* The dismiss pill is shared: see molecules/CloseButton/CloseButton.css. It is
   pulled back by the row's own padding so the hit area still reaches the edge. */
.belit-newsletter-confirm-toast .belit-toast-close {
  margin: calc(-1 * var(--token-space-2));
}

@keyframes belit-newsletter-confirm-toast-enter {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .belit-newsletter-confirm-toast {
    animation: none;
  }
}
/* frontend/src/components/atoms/CartAddedToast.css */
.belit-cart-added-toast {
  position: fixed;
  right: var(--token-space-4);
  bottom: var(--token-space-4);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: var(--token-space-3);
  max-width: min(calc(100vw - var(--token-space-8)), 26rem);
  padding: var(--token-space-3) var(--token-space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--token-radius-md);
  box-shadow: var(--token-shadow-drawer);
  font-family: var(--font-interface);
  animation: belit-cart-added-toast-enter 360ms var(--token-ease-standard) both;
}

.belit-cart-added-toast-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--token-radius-pill);
  background: rgb(var(--token-color-ivory));
  color: rgb(var(--token-color-on-gold));
  font-size: var(--token-font-size-body);
  line-height: 1;
}

.belit-cart-added-toast-message {
  margin: 0;
  font-size: var(--token-font-size-caption);
  line-height: var(--token-line-height-1-4);
}

@keyframes belit-cart-added-toast-enter {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .belit-cart-added-toast {
    animation: none;
  }
}