/* 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 */

  /* 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 */

  /* 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-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;
  --token-button-radius: var(--token-radius-pill);

  /* 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;

  /* 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;

  /* ── Semantic layer (Index.css) — the eight brand roles everything else
     aliases onto, plus the two-family type system (Forum + Sen). ── */
  --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-full);
    --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);

    /* 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;
}
.visible {
  visibility: visible !important;
}
.static {
  position: static !important;
}
.fixed {
  position: fixed !important;
}
.absolute {
  position: absolute !important;
}
.relative {
  position: relative !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;
}
.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-0 {
  flex-shrink: 0 !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-t {
  border-top-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;
}
.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;
}
.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;
}
.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.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;
}

.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__svg {
  width: 14rem;
  max-width: 24vw;
  height: auto;
  display: block;
}
*, ::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;
}
.visible {
  visibility: visible !important;
}
.static {
  position: static !important;
}
.fixed {
  position: fixed !important;
}
.absolute {
  position: absolute !important;
}
.relative {
  position: relative !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;
}
.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-0 {
  flex-shrink: 0 !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-t {
  border-top-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;
}
.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;
}
.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;
}
.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;
}

.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: rgb(var(--token-color-ivory) / 0.3);
  --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-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: 4px;
}

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

.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-wordmark {
  width: auto;
  height: 1.25rem;
  max-width: var(--token-max-width-8rem);
  -o-object-fit: contain;
     object-fit: contain;
}

.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: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--token-space-2);
  border-radius: var(--token-radius-pill);
  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-spacing-0) var(--token-spacing-1-75);
  border: 1px solid rgb(var(--token-color-accent));
  background: rgb(var(--token-color-accent));
  color: rgb(var(--token-color-ivory));
  white-space: nowrap;
}

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

.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-top: var(--token-space-11);
  padding-bottom: var(--token-space-9);
}

.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-42rem);
}

.belit-display-title {
  min-block-size: 1.8em;
}

.belit-hero-support-copy {
  max-width: var(--token-max-width-32rem);
  min-block-size: 3.6em;
  margin-top: var(--token-space-5);
  color: rgb(var(--token-color-ivory) / 0.72);
  font-size: var(--token-font-size-cta);
  line-height: var(--token-line-height-1-8);
}

.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-h1);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-neg-0-025);
  line-height: var(--token-line-height-0-9);
  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(--tap-target-min);
  margin-top: var(--token-spacing-0-375);
  padding: var(--token-spacing-0-4) var(--token-space-4);
  background: rgb(var(--token-color-accent));
  color: rgb(var(--token-color-ivory));
  font-size: var(--token-font-size-caption);
  font-weight: 500;
}

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

.belit-cms-section-inner.belit-curation-inner {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  grid-template-areas: "field copy";
  grid-template-columns: minmax(0, 58fr) minmax(20rem, 42fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.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 {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 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 {
  background:
    radial-gradient(circle at 72% 48%, rgb(var(--token-color-ivory) / 0.1), transparent 34%),
    radial-gradient(circle at 45% 52%, rgb(var(--token-color-ivory) / 0.04), transparent 42%),
    var(--belit-obsidian);
}

.belit-curation-field {
  display: flex;
  width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  grid-area: field;
}

.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. In the map it fills the height it is given and spreads the labels wide. */
.belit-curation-field .belit-gemstone-stage-shell {
  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. In the flow the card
   took its height off the stage, which re-fitted the canvas and jumped every stone in
   it — the map moved because the reader read something. Floating it over the foot of
   the column leaves the stage exactly the size it was. */
.belit-curation-field .belit-gemstone-detail {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
}

/* Below the desktop breakpoint the focused stage (.is-focused, above) escapes this
   panel's small footprint to fill the whole viewport, but the panel itself keeps that
   original footprint's height — so anchoring the detail card to *its* bottom stranded
   the card wherever the panel happened to sit on the page, not at the foot of the
   zoomed view the reader is actually looking at.

`position: fixed` now works because the deck's track transform is gone — the
   detail card anchors to the viewport's foot rather than the study's own bottom.
   --belit-detail-bottom-offset is retained in GemstoneStudy for other contexts. */
 @media (max-width: 1023px) {
   .belit-curation-field .belit-gemstone-detail {
     bottom: 0;
     z-index: 3;
   }
 }

/* The shell now starts a gutter to the left of its column, so anything it positions
   from its own left edge would hang outside the panel's inset and break the line every
   other section keeps. Put the gutter back for the labels; the field itself is the only
   thing meant to bleed. The hovered stone's name centres over the column rather than
   over the canvas, since the column is where the map actually is. */
.belit-curation-field .belit-gemstone-meta {
  padding-inline-start: calc(1rem + var(--belit-shell-gutter));
}

.belit-curation-field .belit-gemstone-hover-name {
  width: 56%;
  padding-inline-start: var(--belit-shell-gutter);
}

/* The writing and the stone's details stay above the widened field. */
.belit-curation-copy-column,
.belit-gemstone-detail,
.belit-gemstone-meta,
.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-cms-section-inner.belit-curation-inner {
    grid-template-areas:
      "field"
      "copy";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(18rem, 1fr) auto;
    gap: var(--token-spacing-1-75);
  }

  .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;
  }
}

.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-32rem);
  flex-direction: column;
}

.belit-curation-heading {
  color: var(--belit-ivory);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h2);
  font-weight: 300;
  letter-spacing: var(--token-letter-spacing-0-02);
  line-height: var(--token-line-height-1-05);
}

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

.belit-curation-intro {
  max-width: var(--token-max-width-46ch);
  margin-top: var(--token-space-4) !important;
  color: rgb(var(--token-color-stone) / 0.78);
  font-size: var(--token-font-size-cta);
  line-height: var(--token-line-height-1-65);
}

.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-sm) var(--token-radius-sm) 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: 1.25rem;
  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;
}

/* Details for the chosen stone. Same hairline card, radius and padding as the section's
   other surfaces. */
.belit-gemstone-detail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  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-gemstone-detail-copy > span {
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-34);
  text-transform: uppercase;
}

.belit-gemstone-detail-copy > h3 {
  color: var(--belit-ivory);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h2);
  font-weight: 300;
  letter-spacing: var(--token-letter-spacing-0-02);
  line-height: var(--token-line-height-1-1);
}

.belit-gemstone-detail-sections {
  display: grid;
  max-width: var(--token-max-width-58ch);
  gap: var(--token-space-4);
  margin-top: var(--token-space-4);
}

.belit-gemstone-detail-sections dt {
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-24);
  text-transform: uppercase;
}

.belit-gemstone-detail-sections dd {
  margin: var(--token-spacing-0-375) var(--token-spacing-0) var(--token-spacing-0);
  color: rgb(var(--token-color-stone) / 0.78);
  font-size: var(--token-font-size-cta);
  line-height: var(--token-line-height-1-6);
}

.belit-gemstone-detail-sections ul {
  display: grid;
  gap: var(--token-space-1);
  margin: var(--token-spacing-0);
  padding-left: var(--token-spacing-1-1);
}

/* Catalogue facts (family, Mohs hardness, colour) read as label/value pairs,
   not bullets: the label column mirrors the product detail's stone details. */
.belit-gemstone-detail-sections .belit-gemstone-detail-facts {
  padding-left: var(--token-spacing-0);
  list-style: none;
}

.belit-gemstone-detail-fact-label {
  display: inline-block;
  min-width: 5.5rem;
  margin-right: var(--token-space-2);
  color: var(--belit-stone);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-08);
  text-transform: uppercase;
}

.belit-gemstone-detail-sections .belit-gemstone-belief-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--belit-pill-gap);
  padding: var(--token-spacing-0);
  list-style: none;
}

.belit-gemstone-belief-pills li {
  border: var(--token-border-width) solid var(--belit-pill-border);
  border-radius: var(--belit-pill-radius);
  padding: var(--belit-pill-padding-block) var(--belit-pill-padding-inline);
  background: var(--belit-pill-background);
  color: var(--belit-pill-text);
  line-height: var(--token-line-height-1-4);
  text-transform: capitalize;
}

.belit-gemstone-detail-measure {
  display: flex;
  max-width: var(--token-max-width-14rem);
  align-items: center;
  gap: var(--token-space-3);
  margin-top: var(--token-space-3);
}

.belit-gemstone-detail-measure > em {
  flex: 0 0 auto;
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  font-style: normal;
  letter-spacing: var(--token-letter-spacing-0-34);
  text-transform: uppercase;
}

.belit-gemstone-detail > button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--belit-ivory-border);
  border-radius: var(--token-radius-md);
  background: transparent;
  color: rgb(var(--token-color-ivory) / 0.65);
  cursor: pointer;
  transition: border-color var(--token-duration-250ms) var(--token-ease-standard), color var(--token-duration-250ms) var(--token-ease-standard);
}

.belit-gemstone-detail > button:hover {
  border-color: var(--color-text);
  color: var(--belit-ivory);
}

.belit-gemstone-detail > button:focus-visible {
  border-color: var(--color-focus);
  color: var(--color-focus);
}

/* The favorite heart carries gold while a stone is held, so the held state reads
   at a glance next to the plain close control. */
.belit-gemstone-detail > .belit-gemstone-detail-favorite.is-active {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* 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-meta {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--token-space-4);
  padding: var(--token-space-4);
  color: rgb(var(--token-color-ivory) / 0.5);
  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;
  pointer-events: none;
}

.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-sm);
  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: rgb(var(--token-color-accent));
  border-radius: var(--token-radius-xs);
  background: rgb(var(--token-color-accent));
  color: rgb(var(--token-color-ivory));
  font-weight: 500;
}

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

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

.belit-secondary-link {
  padding: var(--token-spacing-0-625) var(--token-spacing-1-75);
  border: 1px solid var(--belit-ivory-border);
  background: rgb(var(--token-color-black) / 0.2);
  backdrop-filter: blur(12px);
  color: var(--belit-ivory);
  font-size: var(--token-font-size-cta);
}

.belit-secondary-link:hover {
  background: var(--color-surface);
}

.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-top: var(--token-space-11);
  padding-bottom: var(--token-space-9);
}

.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-h2);
  font-weight: 400;
  letter-spacing: var(--token-letter-spacing-neg-0-025);
  line-height: var(--token-line-height-0-9);
  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: 300;
  letter-spacing: var(--token-letter-spacing-0-02);
  line-height: var(--token-line-height-1-05);
  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-top: var(--token-spacing-5-5);
  padding-bottom: var(--token-space-8);
}

.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-52rem);
  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-36rem);
  color: rgb(var(--token-color-stone) / 0.7);
  font-family: var(--font-body);
  font-size: var(--token-font-size-cta);
  line-height: var(--token-line-height-1-625);
  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: clamp(13rem, 44svh, 23rem);
  min-height: 0;
  width: min(100%, 52rem);
}

.belit-object-card {
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.belit-object-card-link {
  display: block;
  height: 100%;
  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);
  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-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

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

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

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

.belit-object-number {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  left: 0.75rem;
  color: var(--color-text);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-24);
}

.belit-object-details {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--token-spacing-3-5) var(--token-space-4) var(--token-space-4);
  background: linear-gradient(to top, rgb(var(--token-color-obsidian) / 0.88), transparent);
  pointer-events: none;
}

.belit-object-details h3 {
  color: var(--belit-ivory);
  font-family: var(--font-body);
  font-size: var(--token-font-size-h3);
  font-weight: 400;
  line-height: var(--token-line-height-1-2);
}

.belit-object-details p {
  margin-top: var(--token-spacing-0-375);
  color: rgb(var(--token-color-ivory) / 0.66);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-08);
  line-height: var(--token-line-height-1-45);
  text-transform: uppercase;
}

.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-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(5rem, 10vw);
  gap: var(--token-space-3);
}

.belit-gallery-item {
  min-height: 10rem;
  overflow: hidden;
  border: 1px solid var(--belit-ivory-border);
  background: rgb(var(--token-color-black) / 0.25);
}

.belit-gallery-item.gallery-item-1,
.belit-gallery-item.gallery-item-4 {
  grid-column: span 5;
  grid-row: span 3;
}

.belit-gallery-item.gallery-item-2,
.belit-gallery-item.gallery-item-3 {
  grid-column: span 3;
  grid-row: span 2;
}

.belit-gallery-item.gallery-item-5 {
  grid-column: span 4;
  grid-row: span 2;
}

.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);
}

/* 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 (min-width: 640px) {
  .belit-home {
    --belit-shell-gutter: 2rem;
  }

  .belit-section-content {
    padding-top: var(--token-space-11);
  }

  .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-h1);
  }

  .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: 3rem;
  }

  .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: 4rem;
  }

  .belit-section-content {
    padding-top: var(--token-space-11);
    padding-bottom: var(--token-space-9);
  }

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

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

  .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-curation-study-reveal {
    justify-self: center;
  }

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

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

@media (max-width: 767px) {
  .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: none;
    grid-auto-columns: minmax(13rem, 76vw);
    grid-auto-flow: column;
    width: 100%;
    overflow-x: auto;
    padding-bottom: var(--token-spacing-0-375);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

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

  .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;
  }

  .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;
  }

  html.js .belit-reveal {
    opacity: 1;
    transform: none;
  }

  .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;
}

/* Below the desktop breakpoint the detail card is pinned to the viewport's foot
   rather than the study's own — with the deck's track transform removed, fixed
   positioning lands on the viewport edge as intended. */
.belit-curation-field .belit-gemstone-detail {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
}

/* --------------------------------------------------------- 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-top: var(--token-space-10);
    padding-bottom: var(--token-space-5);
  }

  .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;
  }
}
.belit-error-page {
  display: grid;
  min-height: 100svh;
  align-content: center;
  justify-items: center;
  gap: 16px;
  color: rgb(var(--token-color-stone));
  font-family: var(--font-body);
}

.belit-error-page h1 {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.04em;
}

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

.belit-error-page__retry {
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid rgb(var(--token-color-accent));
  border-radius: 999px;
  background: rgb(var(--token-color-accent));
  color: rgb(var(--token-color-ivory));
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1),
    color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.belit-error-page__retry:hover {
  background: rgb(var(--token-color-navy-675));
  border-color: rgb(var(--token-color-navy-675));
  color: rgb(var(--token-color-ivory));
}
.belit-account-choice-layer {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: var(--token-space-4);
}

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

.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-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-account-choice-header h2 {
  margin: var(--token-spacing-0);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h2);
  font-weight: 400;
}

.belit-account-choice-close {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--token-font-size-h2);
  line-height: var(--token-line-height-1);
  cursor: pointer;
}

.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; }
}
.belit-cart-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

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

.belit-cart-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-cart-enter 360ms var(--token-ease-standard) both;
}

.belit-cart-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-cart-header h2 {
  margin: var(--token-spacing-0);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h2);
  font-weight: 400;
}

.belit-cart-close {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--token-font-size-h2);
  line-height: var(--token-line-height-1);
  cursor: pointer;
}

.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);
}

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

.belit-cart-item-image {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  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-cart-item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.belit-cart-item-details {
  min-width: 0;
  padding-right: 3.75rem;
}

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

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

.belit-cart-item-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-cart-item-details .belit-cart-item-collection {
  color: var(--color-text);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-08);
  text-transform: uppercase;
}

.belit-cart-remove {
  position: absolute;
  right: 0;
  bottom: 1rem;
  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-cart-summary {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding: var(--token-space-5) var(--token-spacing-0);
  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-checkout,
.belit-cart-continue {
  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;
}

.belit-cart-checkout {
  border: 1px solid rgb(var(--token-color-accent));
  background: rgb(var(--token-color-accent));
  color: rgb(var(--token-color-ivory));
}

.belit-cart-continue {
  border: 1px solid var(--color-border);
  background: transparent;
  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-5);
  color: var(--color-text-muted);
  text-align: center;
}

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

.belit-cart-continue {
  width: 100%;
}

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

@media (prefers-reduced-motion: reduce) {
  .belit-cart-drawer { animation: none; }
}
/* 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;
}

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

.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-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-favorites-header h2 {
  margin: var(--token-spacing-0);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h2);
  font-weight: 400;
}

.belit-favorites-close {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--token-font-size-h2);
  line-height: var(--token-line-height-1);
  cursor: pointer;
}

.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;
}

.belit-favorites-retry {
  border: 1px solid rgb(var(--token-color-accent));
  background: rgb(var(--token-color-accent));
  color: rgb(var(--token-color-ivory));
}

.belit-favorites-continue {
  border: 1px solid var(--color-border);
  background: transparent;
  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);
  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;
  padding-right: 3.75rem;
}

.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-remove {
  position: absolute;
  right: 0;
  bottom: 1rem;
  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-shell {
  width: min(100%, var(--belit-shell-width));
  margin-inline: auto;
  padding-inline: var(--belit-shell-gutter);
}

.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 {
  width: auto;
  height: 1.5rem;
  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 {
  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 {
  position: relative;
  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);
  cursor: pointer;
  transition: color var(--token-duration-300ms) var(--token-ease-standard), background-color var(--token-duration-300ms) var(--token-ease-standard);
}

.belit-cart-icon-button: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);
}

/* Contact channels (IG / email) shown instead of the cart on pages
   other than the main landing — same 44px pill anatomy as the cart button. */
.belit-nav-contact {
  display: flex;
  align-items: center;
}

.belit-nav-contact-link {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--token-radius-pill);
  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-nav-contact-link:hover {
  background: rgb(var(--token-color-ivory) / 0.1);
  color: var(--color-text);
}

.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;
}

.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);
}

.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) {
  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);
}

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 (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) {
  html.js .belit-reveal {
    opacity: 1;
    transform: none;
  }
}
.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);
}

.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-brand .belit-wordmark-fallback {
  color: var(--color-gold);
}

.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 (max-width: 767px) {
  .belit-sf {
    margin-block: var(--token-space-4);
    border-radius: var(--token-radius-lg);
  }

  .belit-sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--token-space-4) var(--token-space-5);
    padding: var(--token-space-4) 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-cookie-consent-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: var(--token-space-4);
}

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

.belit-cookie-consent {
  position: relative;
  width: min(100%, 28rem);
  display: flex;
  flex-direction: column;
  gap: var(--token-space-4);
  padding: var(--token-space-6);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--token-radius-md);
  box-shadow: var(--token-shadow-drawer);
  outline: none;
  animation: belit-cookie-consent-enter 360ms var(--token-ease-standard) both;
}

.belit-cookie-consent-title {
  margin: var(--token-spacing-0);
  font-family: var(--font-headline);
  font-size: var(--token-font-size-h2);
  font-weight: 400;
}

.belit-cookie-consent-message {
  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-cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--token-space-3);
}

.belit-cookie-consent-accept,
.belit-cookie-consent-essential {
  min-height: 3rem;
  padding: var(--token-spacing-0) var(--token-space-4);
  border: 1px solid var(--color-gold);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
  letter-spacing: var(--token-letter-spacing-0-06);
  cursor: pointer;
}

.belit-cookie-consent-accept {
  background: rgb(var(--token-color-accent));
  color: rgb(var(--token-color-ivory));
}

.belit-cookie-consent-accept:hover {
  background: rgb(var(--token-color-navy-675));
}

.belit-cookie-consent-essential {
  background: transparent;
  color: var(--color-text);
}

.belit-cookie-consent-essential:hover {
  border-color: var(--color-text-muted);
}

.belit-cookie-consent-reject {
  min-height: 3rem;
  padding: var(--token-spacing-0) var(--token-space-4);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-interface);
  font-size: var(--token-font-size-cta);
  letter-spacing: var(--token-letter-spacing-0-06);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.belit-cookie-consent-policy {
  align-self: flex-start;
  font-family: var(--font-interface);
  font-size: var(--token-font-size-caption);
  letter-spacing: var(--token-letter-spacing-0-06);
  color: var(--color-text);
}

@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; }
}
/* 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);
}

.belit-newsletter-confirm-toast-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(-1 * var(--token-space-2));
  border: 1px solid transparent;
  border-radius: var(--token-radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--token-font-size-body);
  line-height: 1;
  cursor: pointer;
}

.belit-newsletter-confirm-toast-close:hover {
  color: var(--color-text);
  border-color: var(--color-border);
}

.belit-newsletter-confirm-toast-close:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

@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;
  }
}