/* Generated by site/build.mjs from design/sgron-design. Edit site/src/site.css, then rebuild. */

/* SGRON tokens · generated from tokens.json. Hex/rgb values live only in this file. */
:root {
  --sg-primitive-graphite-800: #2A2620;
  --sg-primitive-graphite-850: #1E2128;
  --sg-primitive-graphite-900: #16181D;
  --sg-primitive-graphite-925: #111217;
  --sg-primitive-graphite-950: #0E0F13;
  --sg-primitive-graphite-1000: #0A0A0C;
  --sg-primitive-ivory-0: #FFFFFF;
  --sg-primitive-ivory-25: #FAF8F4;
  --sg-primitive-ivory-50: #F6F3EE;
  --sg-primitive-ivory-75: #F3EFE7;
  --sg-primitive-ivory-100: #F1EDE6;
  --sg-primitive-ivory-150: #ECE8E0;
  --sg-primitive-slate-400: #A0A2AB;
  --sg-primitive-slate-600: #585A63;
  --sg-primitive-ink-800: #111111;
  --sg-primitive-ink-900: #18140C;
  --sg-primitive-ink-950: #16171B;
  --sg-primitive-ink-1000: #000000;
  --sg-primitive-champagne-200: #F1DDB4;
  --sg-primitive-champagne-400: #E3C891;
  --sg-primitive-champagne-600: #B8955A;
  --sg-primitive-champagne-800: #7E6026;
  --sg-primitive-champagne-900: #4A3B22;
  --sg-primitive-champagne-950: #141210;
  --sg-primitive-mint-300: #8FDCC2;
  --sg-primitive-mint-700: #1B7357;
  --sg-primitive-amber-300: #E7B37A;
  --sg-primitive-amber-800: #8E5A12;
  --sg-primitive-alpha-white-3: rgba(255,255,255,.025);
  --sg-primitive-alpha-white-7: rgba(255,255,255,.07);
  --sg-primitive-alpha-white-8: rgba(255,255,255,.08);
  --sg-primitive-alpha-white-10: rgba(255,255,255,.1);
  --sg-primitive-alpha-white-13: rgba(255,255,255,.13);
  --sg-primitive-alpha-white-20: rgba(255,255,255,.2);
  --sg-primitive-alpha-white-60: rgba(255,255,255,.6);
  --sg-primitive-alpha-ink-8: rgba(20,20,30,.08);
  --sg-primitive-alpha-ink-15: rgba(20,20,30,.15);
  --sg-primitive-alpha-champagne-8: rgba(227,200,145,.08);
  --sg-primitive-alpha-champagne-9: rgba(227,200,145,.09);
  --sg-primitive-alpha-champagne-16: rgba(227,200,145,.16);
  --sg-primitive-alpha-champagne-35: rgba(227,200,145,.35);
  --sg-primitive-alpha-bronze-9: rgba(160,120,50,.09);
  --sg-primitive-alpha-bronze-18: rgba(200,160,90,.18);
  --sg-primitive-alpha-mint-9: rgba(143,220,194,.09);
  --sg-primitive-alpha-forest-9: rgba(27,115,87,.09);
  --sg-primitive-alpha-shadow-30: rgba(0,0,0,.3);
  --sg-primitive-alpha-shadow-50: rgba(0,0,0,.5);
  --sg-primitive-alpha-shadow-65: rgba(0,0,0,.65);
  --sg-primitive-merchant-atelier-primary: #2F4A3C;
  --sg-primitive-merchant-atelier-on-primary: #FFFFFF;
  --sg-primitive-merchant-atelier-pale: #C9D9C4;
  --sg-primitive-merchant-sun-raw: #F5D547;
  --sg-primitive-merchant-sun-fixed: #7A6200;
  --sg-primitive-merchant-sky-raw: #7CC4FA;
  --sg-primitive-merchant-sky-fixed: #1D64A0;
  --sg-primitive-merchant-ink-dark: #16171B;
  --sg-primitive-ext-10: rgba(0,0,0,0.1);
  --sg-primitive-ext-11: #F5D547;
  --sg-primitive-ext-12: #2D5BFF;
  --sg-primitive-ext-13: #C7A7FF;
  --sg-primitive-ext-14: #050608;
  --sg-primitive-ext-15: #F0EDE6;
  --sg-primitive-ext-16: #E2DED6;
  --sg-primitive-ext-17: rgba(231,179,122,0.05);
  --sg-primitive-ext-18: rgba(14,15,19,0.72);
  --sg-primitive-ext-19: rgba(255,255,255,0.06);
  --sg-primitive-ext-20: rgba(227,200,145,0.14);
  --sg-primitive-ext-21: rgba(227,200,145,0.2);
  --sg-primitive-ext-22: rgba(227,200,145,0.3);
  --sg-primitive-ext-23: #C9B6E8;
  --sg-primitive-ext-24: rgba(227,200,145,0.6);
  --sg-primitive-ext-25: #121318;
  --sg-primitive-ext-26: rgba(143,220,194,0.4);
  --sg-primitive-ext-27: rgba(143,220,194,0.35);
  --sg-primitive-ext-28: rgba(255,255,255,0.05);
  --sg-primitive-ext-29: rgba(255,255,255,0.15);
  --sg-primitive-ext-30: rgba(143,220,194,0.08);
  --sg-primitive-ext-31: rgba(143,220,194,0.05);
  --sg-primitive-ext-32: #0A0B0E;
  --sg-primitive-ext-33: #D9D4C9;
  --sg-primitive-ext-34: #7D808A;
  --sg-primitive-ext-35: rgba(255,255,255,0.12);
  --sg-primitive-ext-36: rgba(227,200,145,0.4);
  --sg-primitive-ext-37: rgba(227,200,145,0.05);
  --sg-primitive-ext-38: rgba(227,200,145,0.1);
  --sg-primitive-ext-39: rgba(200,160,90,0.2);
  --sg-primitive-ext-40: #F0A877;
  --sg-primitive-ext-41: #A04A12;
  --sg-primitive-ext-42: #FBF9F5;
  --sg-primitive-ext-43: #6E7079;
  --sg-primitive-ext-44: #1B6A52;
  --sg-primitive-ext-45: #7E5A1C;
  --sg-primitive-ext-46: #5B3FA0;
  --sg-primitive-ext-47: #DDDDDD;
  --sg-primitive-ext-48: rgba(227,200,145,0.11);
  --sg-primitive-ext-49: rgba(200,160,90,0.22);
  --sg-primitive-ext-50: rgba(255,255,255,0.55);
  --sg-primitive-ext-51: #1F222A;
  --sg-primitive-ext-52: #F2EEE7;
  --sg-primitive-ext-53: #E6E1D8;
  --sg-primitive-ext-54: rgba(0,0,0,0.08);
  --sg-primitive-ext-55: #E06A5D;
  --sg-primitive-ext-56: #E3B54E;
  --sg-primitive-ext-57: #6BBF6A;
  --sg-primitive-ext-58: #E9E4DA;
  --sg-primitive-ext-59: #E2DCD1;
  --sg-primitive-ext-60: #7A7468;
  --sg-primitive-ext-61: rgba(14,15,19,0.55);
  --sg-primitive-ext-62: #17191F;
  --sg-primitive-ext-63: rgba(160,120,50,0.08);
  --sg-primitive-ext-64: #EBD3A1;
  --sg-primitive-ext-65: #D9B977;
  --sg-primitive-ext-66: rgba(0,0,0,0.55);
  --sg-primitive-ext-67: #1A1814;
  --sg-primitive-ext-68: rgba(20,20,30,0.06);
  --sg-primitive-ext-69: rgba(20,20,30,0.11);
  --sg-primitive-ext-70: #0B0C0F;
  --sg-primitive-ext-71: rgba(143,220,194,0.25);
  --sg-primitive-ext-72: rgba(143,220,194,0.55);
  --sg-primitive-ext-73: rgba(0,0,0,0.4);
  --sg-primitive-ext-74: #F2F2F2;
  --sg-primitive-ext-75: #1E3A34;
  --sg-primitive-ext-76: #3A3530;
  --sg-primitive-ext-77: #121316;
  --sg-primitive-ext-78: #F1E3C4;
  --sg-primitive-ext-79: rgba(227,200,145,0.55);
  --sg-primitive-ext-80: rgba(255,255,255,0.4);
  --sg-primitive-ext-81: #F3EEE3;
  --sg-primitive-ext-82: #3B2E12;
  --sg-primitive-ext-83: #26222C;
  --sg-primitive-ext-84: #1D2A3A;
  --sg-primitive-ext-85: #A9C7F0;
  --sg-primitive-ext-86: #123A33;
  --sg-primitive-ext-87: #16171A;
  --sg-primitive-ext-88: #1A1B1F;
  --sg-primitive-ext-89: #5A5C64;
  --sg-primitive-ext-90: #D9D9DE;
  --sg-primitive-ext-91: #FAF9F7;
  --sg-primitive-ext-92: #1C1C1F;
  --sg-primitive-ext-93: #F5F5F7;
  --sg-primitive-ext-94: #9AA0FF;
  --sg-primitive-ext-95: #2A2A2E;
  --sg-primitive-ext-96: #3B3F4A;
  --sg-primitive-ext-97: #1E2027;
  --sg-primitive-ext-98: #A1A1A8;
  --sg-primitive-ext-99: rgba(27,115,87,0.08);
  --sg-primitive-ext-100: rgba(255,255,255,0.065);
  --sg-primitive-ext-101: #9C9EA7;
  --sg-primitive-ext-102: #1D2027;
  --sg-primitive-ext-103: rgba(240,168,119,0.1);
  --sg-primitive-ext-104: rgba(160,74,18,0.08);
  --sg-primitive-ext-105: #15171C;
  --sg-primitive-ext-106: #0F1014;
  --sg-primitive-ext-107: rgba(20,20,30,0.16);
  --sg-primitive-ext-108: #252932;
  --sg-primitive-ext-109: #E8E3DA;
  --sg-primitive-ext-110: rgba(240,168,119,0.4);
  --sg-primitive-ext-111: rgba(160,120,50,0.1);
  --sg-primitive-ext-01: #C2A672;
  --sg-primitive-ext-02: #9A8459;
  --sg-primitive-ext-03: #736444;
  --sg-primitive-ext-04: #4E4533;
  --sg-primitive-ext-05: rgba(0,0,0,0.6);
  --sg-primitive-ext-06: rgba(5,6,8,0.45);
  --sg-primitive-ext-07: rgba(0,0,0,0.7);
  --sg-primitive-ext-08: rgba(0,0,0,0.25);
  --sg-primitive-ext-09: #1F4D3F;
  --sg-size-space-0: 0px;
  --sg-size-space-1: 4px;
  --sg-size-space-2: 8px;
  --sg-size-space-3: 12px;
  --sg-size-space-4: 16px;
  --sg-size-space-5: 20px;
  --sg-size-space-6: 24px;
  --sg-size-space-7: 28px;
  --sg-size-space-8: 32px;
  --sg-size-space-10: 40px;
  --sg-size-space-12: 48px;
  --sg-size-space-14: 56px;
  --sg-size-space-16: 64px;
  --sg-size-space-20: 80px;
  --sg-size-space-24: 96px;
  --sg-size-radius-xs: 4px;
  --sg-size-radius-sm: 8px;
  --sg-size-radius-md: 12px;
  --sg-size-radius-lg: 14px;
  --sg-size-radius-xl: 16px;
  --sg-size-radius-2xl: 18px;
  --sg-size-radius-3xl: 22px;
  --sg-size-radius-4xl: 24px;
  --sg-size-radius-5xl: 28px;
  --sg-size-radius-device: 48px;
  --sg-size-radius-pill: 999px;
  --sg-size-radius-round: 50%;
  --sg-size-tap-min: 44px;
  --sg-size-control-sm: 32px;
  --sg-size-control-md: 44px;
  --sg-size-control-lg: 48px;
  --sg-size-control-xl: 52px;
  --sg-size-control-option: 60px;
  --sg-size-icon-xs: 8px;
  --sg-size-icon-sm: 12px;
  --sg-size-icon-md: 16px;
  --sg-size-icon-lg: 20px;
  --sg-size-icon-xl: 24px;
  --sg-size-icon-avatar: 32px;
  --sg-size-icon-logo: 36px;
  --sg-size-icon-glyph: 40px;
  --sg-size-border-thin: 1px;
  --sg-size-border-thick: 2px;
  --sg-size-layout-checkout-max: 440px;
  --sg-size-layout-content-max: 1200px;
  --sg-size-layout-review-width: 280px;
  --sg-size-layout-spec-width: 420px;
  --sg-size-layout-qr: 196px;
  --sg-size-layout-barcode: 72px;
  --sg-type-family-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --sg-type-family-ui: 'Onest', system-ui, sans-serif;
  --sg-type-family-mono: 'JetBrains Mono', ui-monospace, monospace;
  --sg-type-size-2xs: 10px;
  --sg-type-size-xs: 11px;
  --sg-type-size-sm: 12px;
  --sg-type-size-md: 13px;
  --sg-type-size-base: 14px;
  --sg-type-size-lg: 15px;
  --sg-type-size-xl: 17px;
  --sg-type-size-2xl: 23px;
  --sg-type-size-3xl: 26px;
  --sg-type-size-4xl: 30px;
  --sg-type-size-5xl: 32px;
  --sg-type-size-6xl: 42px;
  --sg-type-size-7xl: 50px;
  --sg-type-weight-regular: 400;
  --sg-type-weight-medium: 500;
  --sg-type-weight-semibold: 600;
  --sg-type-line-height-tight: 1;
  --sg-type-line-height-snug: 1.1;
  --sg-type-line-height-normal: 1.45;
  --sg-type-line-height-relaxed: 1.55;
  --sg-type-tracking-tight: -0.02em;
  --sg-type-tracking-normal: 0em;
  --sg-type-tracking-wide: 0.08em;
  --sg-type-tracking-caps: 0.18em;
  --sg-type-tracking-code: 0.14em;
  --sg-motion-duration-instant: 150ms;
  --sg-motion-duration-fast: 250ms;
  --sg-motion-duration-base: 300ms;
  --sg-motion-duration-enter: 450ms;
  --sg-motion-duration-slow: 600ms;
  --sg-motion-duration-spin: 900ms;
  --sg-motion-duration-pulse: 1400ms;
  --sg-motion-duration-progress: 1000ms;
  --sg-motion-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sg-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --sg-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
}

:root,
[data-theme="dark"] {
  --sg-color-bg-base: var(--sg-primitive-graphite-950);
  --sg-color-surface-0: var(--sg-primitive-graphite-925);
  --sg-color-surface-1: var(--sg-primitive-graphite-900);
  --sg-color-surface-2: var(--sg-primitive-graphite-850);
  --sg-color-surface-glass: var(--sg-primitive-alpha-white-3);
  --sg-color-text-primary: var(--sg-primitive-ivory-75);
  --sg-color-text-secondary: var(--sg-primitive-slate-400);
  --sg-color-text-inverse: var(--sg-primitive-ink-950);
  --sg-color-border-subtle: var(--sg-primitive-alpha-white-7);
  --sg-color-border-strong: var(--sg-primitive-alpha-white-13);
  --sg-color-accent-default: var(--sg-primitive-champagne-400);
  --sg-color-accent-text: var(--sg-primitive-champagne-400);
  --sg-color-accent-hover: var(--sg-primitive-champagne-200);
  --sg-color-accent-on: var(--sg-primitive-ink-900);
  --sg-color-accent-soft: var(--sg-primitive-alpha-champagne-9);
  --sg-color-accent-flash: var(--sg-primitive-alpha-champagne-16);
  --sg-color-accent-outline: var(--sg-primitive-alpha-champagne-35);
  --sg-color-success-text: var(--sg-primitive-mint-300);
  --sg-color-success-soft: var(--sg-primitive-alpha-mint-9);
  --sg-color-warning-text: var(--sg-primitive-amber-300);
  --sg-color-effect-halo: var(--sg-primitive-alpha-champagne-8);
  --sg-color-effect-shadow: var(--sg-primitive-alpha-shadow-50);
  --sg-color-effect-shadow-deep: var(--sg-primitive-alpha-shadow-65);
  --sg-color-effect-bezel: var(--sg-primitive-alpha-white-8);
  --sg-color-focus-ring: var(--sg-primitive-champagne-400);
  --sg-color-fixed-qr-ink: var(--sg-primitive-ink-800);
  --sg-color-fixed-qr-paper: var(--sg-primitive-ivory-0);
  --sg-color-fixed-sheet-bg: var(--sg-primitive-graphite-1000);
  --sg-color-fixed-sheet-text: var(--sg-primitive-ivory-75);
  --sg-color-fixed-sheet-muted: var(--sg-primitive-slate-400);
  --sg-color-fixed-sheet-border: var(--sg-primitive-alpha-white-8);
  --sg-color-fixed-sheet-chip: var(--sg-primitive-alpha-white-10);
  --sg-color-fixed-wallet-button-bg: var(--sg-primitive-ink-1000);
  --sg-color-fixed-wallet-button-text: var(--sg-primitive-ivory-0);
  --sg-color-fixed-camera: var(--sg-primitive-ink-1000);
  --sg-color-fixed-monogram-from: var(--sg-primitive-graphite-800);
  --sg-color-fixed-monogram-to: var(--sg-primitive-champagne-950);
  --sg-color-fixed-avatar-1: var(--sg-primitive-champagne-200);
  --sg-color-fixed-avatar-2: var(--sg-primitive-champagne-600);
  --sg-color-fixed-avatar-3: var(--sg-primitive-champagne-900);
  --sg-color-ui-c01: var(--sg-primitive-mint-300);
  --sg-color-ui-c02: var(--sg-primitive-ext-01);
  --sg-color-ui-c03: var(--sg-primitive-ext-02);
  --sg-color-ui-c04: var(--sg-primitive-ext-03);
  --sg-color-ui-c05: var(--sg-primitive-ext-04);
  --sg-color-ui-c06: var(--sg-primitive-ext-05);
  --sg-color-ui-c07: var(--sg-primitive-ext-06);
  --sg-color-ui-c08: var(--sg-primitive-ext-07);
  --sg-color-ui-c09: var(--sg-primitive-ext-08);
  --sg-color-ui-c10: var(--sg-primitive-alpha-shadow-50);
  --sg-color-ui-c11: var(--sg-primitive-alpha-champagne-16);
  --sg-color-ui-c12: var(--sg-primitive-ext-09);
  --sg-color-ui-c13: var(--sg-primitive-ext-10);
  --sg-color-ui-c14: var(--sg-primitive-ext-11);
  --sg-color-ui-c15: var(--sg-primitive-ext-12);
  --sg-color-ui-c16: var(--sg-primitive-ext-13);
  --sg-color-ui-c17: var(--sg-primitive-ext-14);
  --sg-color-ui-c18: var(--sg-primitive-ivory-25);
  --sg-color-ui-c19: var(--sg-primitive-ink-950);
  --sg-color-ui-c20: var(--sg-primitive-slate-600);
  --sg-color-ui-c21: var(--sg-primitive-ext-15);
  --sg-color-ui-c22: var(--sg-primitive-ext-16);
  --sg-color-ui-c23: var(--sg-primitive-ext-17);
  --sg-color-ui-c24: var(--sg-primitive-ext-18);
  --sg-color-ui-c25: var(--sg-primitive-ext-19);
  --sg-color-ui-c26: var(--sg-primitive-ext-20);
  --sg-color-ui-c27: var(--sg-primitive-ext-21);
  --sg-color-ui-c28: var(--sg-primitive-ext-22);
  --sg-color-ui-c29: var(--sg-primitive-ext-23);
  --sg-color-ui-c30: var(--sg-primitive-ext-24);
  --sg-color-ui-c31: var(--sg-primitive-alpha-white-20);
  --sg-color-ui-c32: var(--sg-primitive-ext-25);
  --sg-color-ui-c33: var(--sg-primitive-ext-26);
  --sg-color-ui-c34: var(--sg-primitive-ext-27);
  --sg-color-ui-c35: var(--sg-primitive-ext-28);
  --sg-color-ui-c36: var(--sg-primitive-ext-29);
  --sg-color-ui-c37: var(--sg-primitive-ext-30);
  --sg-color-ui-c38: var(--sg-primitive-ext-31);
  --sg-color-ui-c39: var(--sg-primitive-ext-32);
  --sg-color-ui-c40: var(--sg-primitive-ext-33);
  --sg-color-ui-c41: var(--sg-primitive-ext-34);
  --sg-color-ui-c42: var(--sg-primitive-ext-35);
  --sg-color-ui-c43: var(--sg-primitive-ext-36);
  --sg-color-ui-c44: var(--sg-primitive-ext-37);
  --sg-color-ui-c45: var(--sg-primitive-ext-38);
  --sg-color-ui-c46: var(--sg-primitive-ext-40);
  --sg-color-ui-c47: var(--sg-primitive-graphite-950);
  --sg-color-ui-c48: var(--sg-primitive-ext-32);
  --sg-color-ui-c49: var(--sg-primitive-ext-34);
  --sg-color-ui-c50: var(--sg-primitive-mint-300);
  --sg-color-ui-c51: var(--sg-primitive-champagne-400);
  --sg-color-ui-c52: var(--sg-primitive-ext-23);
  --sg-color-ui-c53: var(--sg-primitive-ext-47);
  --sg-color-ui-c54: var(--sg-primitive-ext-48);
  --sg-color-ui-c55: var(--sg-primitive-alpha-white-3);
  --sg-color-ui-c56: var(--sg-primitive-ext-51);
  --sg-color-ui-c57: var(--sg-primitive-ivory-50);
  --sg-color-ui-c58: var(--sg-primitive-ext-53);
  --sg-color-ui-c59: var(--sg-primitive-ext-54);
  --sg-color-ui-c60: var(--sg-primitive-ext-55);
  --sg-color-ui-c61: var(--sg-primitive-ext-56);
  --sg-color-ui-c62: var(--sg-primitive-ext-57);
  --sg-color-ui-c63: var(--sg-primitive-ext-58);
  --sg-color-ui-c64: var(--sg-primitive-ext-59);
  --sg-color-ui-c65: var(--sg-primitive-ext-60);
  --sg-color-ui-c66: var(--sg-primitive-ext-61);
  --sg-color-ui-c67: var(--sg-primitive-graphite-925);
  --sg-color-ui-c68: var(--sg-primitive-ext-62);
  --sg-color-ui-c69: var(--sg-primitive-alpha-champagne-9);
  --sg-color-ui-c70: var(--sg-primitive-ext-64);
  --sg-color-ui-c71: var(--sg-primitive-ext-65);
  --sg-color-ui-c72: var(--sg-primitive-ext-14);
  --sg-color-ui-c73: var(--sg-primitive-alpha-white-7);
  --sg-color-ui-c74: var(--sg-primitive-ext-66);
  --sg-color-ui-c75: var(--sg-primitive-ext-67);
  --sg-color-ui-c76: var(--sg-primitive-graphite-950);
  --sg-color-ui-c77: var(--sg-primitive-champagne-800);
  --sg-color-ui-c78: var(--sg-primitive-ext-19);
  --sg-color-ui-c79: var(--sg-primitive-ext-35);
  --sg-color-ui-c80: var(--sg-primitive-ext-70);
  --sg-color-ui-c81: var(--sg-primitive-graphite-850);
  --sg-color-ui-c82: var(--sg-primitive-ext-71);
  --sg-color-ui-c83: var(--sg-primitive-ext-72);
  --sg-color-ui-c84: var(--sg-primitive-alpha-shadow-65);
  --sg-color-ui-c85: var(--sg-primitive-ext-73);
  --sg-color-ui-c86: var(--sg-primitive-ext-74);
  --sg-color-ui-c87: var(--sg-primitive-ext-75);
  --sg-color-ui-c88: var(--sg-primitive-ext-76);
  --sg-color-ui-c89: var(--sg-primitive-ext-77);
  --sg-color-ui-c90: var(--sg-primitive-ext-78);
  --sg-color-ui-c91: var(--sg-primitive-ext-79);
  --sg-color-ui-c92: var(--sg-primitive-ext-80);
  --sg-color-ui-c93: var(--sg-primitive-ext-81);
  --sg-color-ui-c94: var(--sg-primitive-ext-82);
  --sg-color-ui-c95: var(--sg-primitive-ext-83);
  --sg-color-ui-c96: var(--sg-primitive-ext-84);
  --sg-color-ui-c97: var(--sg-primitive-ext-85);
  --sg-color-ui-c98: var(--sg-primitive-ext-86);
  --sg-color-ui-c99: var(--sg-primitive-ext-87);
  --sg-color-ui-c100: var(--sg-primitive-ext-88);
  --sg-color-ui-c101: var(--sg-primitive-ext-89);
  --sg-color-ui-c102: var(--sg-primitive-ext-90);
  --sg-color-ui-c103: var(--sg-primitive-ext-91);
  --sg-color-ui-c104: var(--sg-primitive-ext-92);
  --sg-color-ui-c105: var(--sg-primitive-ext-93);
  --sg-color-ui-c106: var(--sg-primitive-ext-94);
  --sg-color-ui-c107: var(--sg-primitive-ext-95);
  --sg-color-ui-c108: var(--sg-primitive-ext-96);
  --sg-color-ui-c109: var(--sg-primitive-ext-97);
  --sg-color-ui-c110: var(--sg-primitive-ext-98);
  --sg-color-ui-c111: var(--sg-primitive-ext-30);
  --sg-color-ui-c112: var(--sg-primitive-ext-70);
  --sg-color-ui-c113: var(--sg-primitive-ext-100);
  --sg-color-ui-c114: var(--sg-primitive-ext-101);
  --sg-color-ui-c115: var(--sg-primitive-ext-102);
  --sg-color-ui-c116: var(--sg-primitive-ext-103);
  --sg-color-ui-c117: var(--sg-primitive-ext-105);
  --sg-color-ui-c118: var(--sg-primitive-ext-35);
  --sg-color-ui-c119: var(--sg-primitive-ext-106);
  --sg-color-ui-c120: var(--sg-primitive-alpha-white-13);
  --sg-color-ui-c121: var(--sg-primitive-ext-19);
  --sg-color-ui-c122: var(--sg-primitive-ext-108);
  --sg-color-ui-c123: var(--sg-primitive-ext-110);
  --sg-color-ui-c124: var(--sg-primitive-ext-38);
  --sg-color-demo-sun-raw: var(--sg-primitive-merchant-sun-raw);
  --sg-color-demo-sun-fixed: var(--sg-primitive-merchant-sun-fixed);
  --sg-color-demo-sky-raw: var(--sg-primitive-merchant-sky-raw);
  --sg-color-demo-sky-fixed: var(--sg-primitive-merchant-sky-fixed);
  --sg-color-demo-atelier: var(--sg-primitive-merchant-atelier-primary);
  --sg-color-demo-on-light: var(--sg-primitive-merchant-atelier-on-primary);
  --sg-color-demo-on-dark: var(--sg-primitive-merchant-ink-dark);
  color-scheme: dark;
}

[data-theme="light"] {
  --sg-color-bg-base: var(--sg-primitive-ivory-150);
  --sg-color-surface-0: var(--sg-primitive-ivory-50);
  --sg-color-surface-1: var(--sg-primitive-ivory-0);
  --sg-color-surface-2: var(--sg-primitive-ivory-100);
  --sg-color-surface-glass: var(--sg-primitive-alpha-white-60);
  --sg-color-text-primary: var(--sg-primitive-ink-950);
  --sg-color-text-secondary: var(--sg-primitive-slate-600);
  --sg-color-text-inverse: var(--sg-primitive-ivory-75);
  --sg-color-border-subtle: var(--sg-primitive-alpha-ink-8);
  --sg-color-border-strong: var(--sg-primitive-alpha-ink-15);
  --sg-color-accent-default: var(--sg-primitive-champagne-400);
  --sg-color-accent-text: var(--sg-primitive-champagne-800);
  --sg-color-accent-hover: var(--sg-primitive-champagne-800);
  --sg-color-accent-on: var(--sg-primitive-ink-900);
  --sg-color-accent-soft: var(--sg-primitive-alpha-bronze-9);
  --sg-color-accent-flash: var(--sg-primitive-alpha-bronze-18);
  --sg-color-accent-outline: var(--sg-primitive-alpha-champagne-35);
  --sg-color-success-text: var(--sg-primitive-mint-700);
  --sg-color-success-soft: var(--sg-primitive-alpha-forest-9);
  --sg-color-warning-text: var(--sg-primitive-amber-800);
  --sg-color-effect-halo: var(--sg-primitive-alpha-bronze-18);
  --sg-color-effect-shadow: var(--sg-primitive-alpha-shadow-30);
  --sg-color-effect-shadow-deep: var(--sg-primitive-alpha-shadow-30);
  --sg-color-effect-bezel: var(--sg-primitive-alpha-ink-8);
  --sg-color-focus-ring: var(--sg-primitive-champagne-800);
  --sg-color-fixed-qr-ink: var(--sg-primitive-ink-800);
  --sg-color-fixed-qr-paper: var(--sg-primitive-ivory-0);
  --sg-color-fixed-sheet-bg: var(--sg-primitive-graphite-1000);
  --sg-color-fixed-sheet-text: var(--sg-primitive-ivory-75);
  --sg-color-fixed-sheet-muted: var(--sg-primitive-slate-400);
  --sg-color-fixed-sheet-border: var(--sg-primitive-alpha-white-8);
  --sg-color-fixed-sheet-chip: var(--sg-primitive-alpha-white-10);
  --sg-color-fixed-wallet-button-bg: var(--sg-primitive-ink-1000);
  --sg-color-fixed-wallet-button-text: var(--sg-primitive-ivory-0);
  --sg-color-fixed-camera: var(--sg-primitive-ink-1000);
  --sg-color-fixed-monogram-from: var(--sg-primitive-graphite-800);
  --sg-color-fixed-monogram-to: var(--sg-primitive-champagne-950);
  --sg-color-fixed-avatar-1: var(--sg-primitive-champagne-200);
  --sg-color-fixed-avatar-2: var(--sg-primitive-champagne-600);
  --sg-color-fixed-avatar-3: var(--sg-primitive-champagne-900);
  --sg-color-ui-c01: var(--sg-primitive-mint-300);
  --sg-color-ui-c02: var(--sg-primitive-ext-01);
  --sg-color-ui-c03: var(--sg-primitive-ext-02);
  --sg-color-ui-c04: var(--sg-primitive-ext-03);
  --sg-color-ui-c05: var(--sg-primitive-ext-04);
  --sg-color-ui-c06: var(--sg-primitive-ext-05);
  --sg-color-ui-c07: var(--sg-primitive-ext-06);
  --sg-color-ui-c08: var(--sg-primitive-ext-07);
  --sg-color-ui-c09: var(--sg-primitive-ext-08);
  --sg-color-ui-c10: var(--sg-primitive-alpha-shadow-50);
  --sg-color-ui-c11: var(--sg-primitive-alpha-champagne-16);
  --sg-color-ui-c12: var(--sg-primitive-ext-09);
  --sg-color-ui-c13: var(--sg-primitive-ext-10);
  --sg-color-ui-c14: var(--sg-primitive-ext-11);
  --sg-color-ui-c15: var(--sg-primitive-ext-12);
  --sg-color-ui-c16: var(--sg-primitive-ext-13);
  --sg-color-ui-c17: var(--sg-primitive-ext-14);
  --sg-color-ui-c18: var(--sg-primitive-ivory-25);
  --sg-color-ui-c19: var(--sg-primitive-ink-950);
  --sg-color-ui-c20: var(--sg-primitive-slate-600);
  --sg-color-ui-c21: var(--sg-primitive-ext-15);
  --sg-color-ui-c22: var(--sg-primitive-ext-16);
  --sg-color-ui-c23: var(--sg-primitive-ext-17);
  --sg-color-ui-c24: var(--sg-primitive-ext-18);
  --sg-color-ui-c25: var(--sg-primitive-ext-19);
  --sg-color-ui-c26: var(--sg-primitive-ext-20);
  --sg-color-ui-c27: var(--sg-primitive-ext-21);
  --sg-color-ui-c28: var(--sg-primitive-ext-22);
  --sg-color-ui-c29: var(--sg-primitive-ext-23);
  --sg-color-ui-c30: var(--sg-primitive-ext-24);
  --sg-color-ui-c31: var(--sg-primitive-alpha-white-20);
  --sg-color-ui-c32: var(--sg-primitive-ext-25);
  --sg-color-ui-c33: var(--sg-primitive-ext-26);
  --sg-color-ui-c34: var(--sg-primitive-ext-27);
  --sg-color-ui-c35: var(--sg-primitive-ext-28);
  --sg-color-ui-c36: var(--sg-primitive-ext-29);
  --sg-color-ui-c37: var(--sg-primitive-ext-30);
  --sg-color-ui-c38: var(--sg-primitive-ext-31);
  --sg-color-ui-c39: var(--sg-primitive-ext-32);
  --sg-color-ui-c40: var(--sg-primitive-ext-33);
  --sg-color-ui-c41: var(--sg-primitive-ext-34);
  --sg-color-ui-c42: var(--sg-primitive-ext-35);
  --sg-color-ui-c43: var(--sg-primitive-ext-36);
  --sg-color-ui-c44: var(--sg-primitive-ext-37);
  --sg-color-ui-c45: var(--sg-primitive-ext-39);
  --sg-color-ui-c46: var(--sg-primitive-ext-41);
  --sg-color-ui-c47: var(--sg-primitive-ivory-50);
  --sg-color-ui-c48: var(--sg-primitive-ext-42);
  --sg-color-ui-c49: var(--sg-primitive-ext-43);
  --sg-color-ui-c50: var(--sg-primitive-ext-44);
  --sg-color-ui-c51: var(--sg-primitive-ext-45);
  --sg-color-ui-c52: var(--sg-primitive-ext-46);
  --sg-color-ui-c53: var(--sg-primitive-ext-47);
  --sg-color-ui-c54: var(--sg-primitive-ext-49);
  --sg-color-ui-c55: var(--sg-primitive-ext-50);
  --sg-color-ui-c56: var(--sg-primitive-ext-52);
  --sg-color-ui-c57: var(--sg-primitive-ivory-50);
  --sg-color-ui-c58: var(--sg-primitive-ext-53);
  --sg-color-ui-c59: var(--sg-primitive-ext-54);
  --sg-color-ui-c60: var(--sg-primitive-ext-55);
  --sg-color-ui-c61: var(--sg-primitive-ext-56);
  --sg-color-ui-c62: var(--sg-primitive-ext-57);
  --sg-color-ui-c63: var(--sg-primitive-ext-58);
  --sg-color-ui-c64: var(--sg-primitive-ext-59);
  --sg-color-ui-c65: var(--sg-primitive-ext-60);
  --sg-color-ui-c66: var(--sg-primitive-ext-61);
  --sg-color-ui-c67: var(--sg-primitive-ivory-25);
  --sg-color-ui-c68: var(--sg-primitive-merchant-atelier-on-primary);
  --sg-color-ui-c69: var(--sg-primitive-ext-63);
  --sg-color-ui-c70: var(--sg-primitive-ext-64);
  --sg-color-ui-c71: var(--sg-primitive-ext-65);
  --sg-color-ui-c72: var(--sg-primitive-ink-950);
  --sg-color-ui-c73: var(--sg-primitive-alpha-white-7);
  --sg-color-ui-c74: var(--sg-primitive-ext-66);
  --sg-color-ui-c75: var(--sg-primitive-ext-67);
  --sg-color-ui-c76: var(--sg-primitive-graphite-950);
  --sg-color-ui-c77: var(--sg-primitive-champagne-800);
  --sg-color-ui-c78: var(--sg-primitive-ext-68);
  --sg-color-ui-c79: var(--sg-primitive-ext-69);
  --sg-color-ui-c80: var(--sg-primitive-ext-70);
  --sg-color-ui-c81: var(--sg-primitive-graphite-850);
  --sg-color-ui-c82: var(--sg-primitive-ext-71);
  --sg-color-ui-c83: var(--sg-primitive-ext-72);
  --sg-color-ui-c84: var(--sg-primitive-alpha-shadow-65);
  --sg-color-ui-c85: var(--sg-primitive-ext-73);
  --sg-color-ui-c86: var(--sg-primitive-ext-74);
  --sg-color-ui-c87: var(--sg-primitive-ext-75);
  --sg-color-ui-c88: var(--sg-primitive-ext-76);
  --sg-color-ui-c89: var(--sg-primitive-ext-77);
  --sg-color-ui-c90: var(--sg-primitive-ext-78);
  --sg-color-ui-c91: var(--sg-primitive-ext-79);
  --sg-color-ui-c92: var(--sg-primitive-ext-80);
  --sg-color-ui-c93: var(--sg-primitive-ext-81);
  --sg-color-ui-c94: var(--sg-primitive-ext-82);
  --sg-color-ui-c95: var(--sg-primitive-ext-83);
  --sg-color-ui-c96: var(--sg-primitive-ext-84);
  --sg-color-ui-c97: var(--sg-primitive-ext-85);
  --sg-color-ui-c98: var(--sg-primitive-ext-86);
  --sg-color-ui-c99: var(--sg-primitive-ext-87);
  --sg-color-ui-c100: var(--sg-primitive-ext-88);
  --sg-color-ui-c101: var(--sg-primitive-ext-89);
  --sg-color-ui-c102: var(--sg-primitive-ext-90);
  --sg-color-ui-c103: var(--sg-primitive-ext-91);
  --sg-color-ui-c104: var(--sg-primitive-ext-92);
  --sg-color-ui-c105: var(--sg-primitive-ext-93);
  --sg-color-ui-c106: var(--sg-primitive-ext-94);
  --sg-color-ui-c107: var(--sg-primitive-ext-95);
  --sg-color-ui-c108: var(--sg-primitive-ext-96);
  --sg-color-ui-c109: var(--sg-primitive-ext-97);
  --sg-color-ui-c110: var(--sg-primitive-ext-98);
  --sg-color-ui-c111: var(--sg-primitive-ext-99);
  --sg-color-ui-c112: var(--sg-primitive-ivory-150);
  --sg-color-ui-c113: var(--sg-primitive-alpha-ink-8);
  --sg-color-ui-c114: var(--sg-primitive-slate-600);
  --sg-color-ui-c115: var(--sg-primitive-ivory-100);
  --sg-color-ui-c116: var(--sg-primitive-ext-104);
  --sg-color-ui-c117: var(--sg-primitive-merchant-atelier-on-primary);
  --sg-color-ui-c118: var(--sg-primitive-alpha-ink-15);
  --sg-color-ui-c119: var(--sg-primitive-ivory-50);
  --sg-color-ui-c120: var(--sg-primitive-ext-107);
  --sg-color-ui-c121: var(--sg-primitive-alpha-ink-8);
  --sg-color-ui-c122: var(--sg-primitive-ext-109);
  --sg-color-ui-c123: var(--sg-primitive-ext-110);
  --sg-color-ui-c124: var(--sg-primitive-ext-111);
  --sg-color-demo-sun-raw: var(--sg-primitive-merchant-sun-raw);
  --sg-color-demo-sun-fixed: var(--sg-primitive-merchant-sun-fixed);
  --sg-color-demo-sky-raw: var(--sg-primitive-merchant-sky-raw);
  --sg-color-demo-sky-fixed: var(--sg-primitive-merchant-sky-fixed);
  --sg-color-demo-atelier: var(--sg-primitive-merchant-atelier-primary);
  --sg-color-demo-on-light: var(--sg-primitive-merchant-atelier-on-primary);
  --sg-color-demo-on-dark: var(--sg-primitive-merchant-ink-dark);
  color-scheme: light;
}

:root,
[data-brand="sgron"] {
  --sg-brand-color-primary: var(--sg-color-accent-default);
  --sg-brand-color-button-bg: var(--sg-color-accent-default);
  --sg-brand-color-button-text: var(--sg-color-accent-on);
  --sg-brand-color-accent-text: var(--sg-color-accent-text);
  --sg-brand-radius-button: 18px;
  --sg-brand-font-display: var(--sg-type-family-display);
}

/* Merchant theme: values come from the merchant profile (--sg-merchant-*), with SGRON fallbacks. */
[data-brand="merchant"] {
  --sg-brand-color-primary: var(--sg-merchant-color-primary, var(--sg-primitive-merchant-atelier-primary));
  --sg-brand-color-button-bg: var(--sg-merchant-color-button-bg, var(--sg-primitive-merchant-atelier-primary));
  --sg-brand-color-button-text: var(--sg-merchant-color-button-text, var(--sg-primitive-merchant-atelier-on-primary));
  --sg-brand-color-accent-text: var(--sg-merchant-color-accent-text, var(--sg-primitive-merchant-atelier-primary));
  --sg-brand-radius-button: var(--sg-merchant-radius-button, 14px);
  --sg-brand-font-display: var(--sg-merchant-font-display, var(--sg-type-family-ui));
}


/* SGRON base · fonts (local WOFF2, SIL OFL), resets, focus, reduced motion */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/onest_400_latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/onest_400_latin_ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/onest_500_latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/onest_500_latin_ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/onest_600_latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/onest_600_latin_ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cormorant_garamond_500_latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cormorant_garamond_500_latin_ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cormorant_garamond_600_latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cormorant_garamond_600_latin_ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains_mono_400_latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains_mono_400_latin_ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sg-color-bg-base); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--sg-color-bg-base); color: var(--sg-color-text-primary);
  font-family: var(--sg-type-family-ui); font-size: var(--sg-type-size-base); line-height: var(--sg-type-line-height-normal);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: var(--sg-color-accent-text); text-decoration: none; }
a:hover { color: var(--sg-color-accent-hover); }
:focus-visible { outline: var(--sg-size-border-thick) solid var(--sg-color-focus-ring); outline-offset: var(--sg-size-border-thick); }
[hidden] { display: none !important; }
.sg-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-i18n-missing] { outline: var(--sg-size-border-thick) dashed var(--sg-color-warning-text); }

@keyframes sg-enter { from { opacity: 0; transform: translateY(var(--sg-size-space-3)); } to { opacity: 1; transform: none; } }
@keyframes sg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sg-spin { to { transform: rotate(360deg); } }
@keyframes sg-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes sg-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
@keyframes sg-drawer { from { transform: translateX(var(--sg-size-space-10)); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ===== sg-site · extracted from accepted screens (website) ===== */
@keyframes sg-site-ring {0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.03);opacity:.9}}
@keyframes sg-site-orbit {to{transform:rotate(360deg)}}
@keyframes sg-site-in {from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sg-site__n1 { background: var(--sg-color-bg-base); color: var(--sg-color-text-primary); font-family: var(--sg-type-family-ui); font-variant-numeric: tabular-nums; overflow-x: hidden; }
.sg-site__n2 { position: sticky; top: 0px; z-index: 10; backdrop-filter: blur(16px); background: var(--sg-color-ui-c24); border-bottom: 1px solid var(--sg-color-ui-c25); }
.sg-site__n3 { max-width: 1280px; margin: var(--sg-size-space-0) auto; height: 68px; padding: var(--sg-size-space-0) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)); display: flex; align-items: center; gap: var(--sg-size-space-7); }
.sg-site__n4 { display: flex; flex-direction: column; gap: var(--sg-size-space-1); color: var(--sg-color-text-primary); flex: 0 0 auto; }
.sg-site__n5 { font-family: var(--sg-type-family-ui); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 0.06em; line-height: 1; }
.sg-site__n6 { display: inline-flex; align-items: center; gap: 0.12em; padding: 0.06em 0.2em 0.06em 0.14em; border-radius: var(--sg-size-radius-pill); border: 0.07em solid var(--sg-color-accent-default); color: var(--sg-color-accent-text); font-size: 0.82em; letter-spacing: 0.02em; line-height: 1; }
.sg-site__n7 { width: 0.26em; height: 0.26em; border-radius: var(--sg-size-radius-round); background: var(--sg-color-success-text); }
.sg-site__n8 { font-size: 8.5px; letter-spacing: 0.38em; text-transform: uppercase; color: var(--sg-color-text-secondary); padding-left: var(--sg-size-space-0); }
.sg-site__n9 { display: flex; gap: var(--sg-size-space-6); font-size: var(--sg-type-size-base); flex: 1 1 0%; flex-wrap: wrap; overflow: hidden; height: 20px; }
.sg-site__n10 { color: var(--sg-color-text-secondary); }
.sg-site__n11 { font-size: var(--sg-type-size-base); color: var(--sg-color-text-secondary); flex: 0 0 auto; }
.sg-site__n12 { flex: 0 0 auto; height: 42px; padding: var(--sg-size-space-0) var(--sg-size-space-5); border-radius: var(--sg-size-radius-lg); background: var(--sg-color-accent-default); color: var(--sg-color-accent-on); font-size: var(--sg-type-size-base); font-weight: var(--sg-type-weight-semibold); display: flex; align-items: center; }
.sg-site__n13 { position: relative; min-height: min(92vh, 900px); display: flex; align-items: center; overflow: hidden; }
.sg-site__n14 { position: absolute; left: 72%; top: 50%; width: 1000px; height: 1000px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--sg-color-ui-c26), transparent 70%); }
.sg-site__n15 { position: absolute; left: 72%; top: 50%; width: 760px; height: 760px; border-radius: var(--sg-size-radius-round); border: 1px solid var(--sg-color-ui-c26); animation: 8s ease-in-out 0s infinite normal none running sg-site-ring; }
.sg-site__n16 { position: absolute; left: 72%; top: 50%; width: 520px; height: 520px; border-radius: var(--sg-size-radius-round); border: 1px solid var(--sg-color-ui-c27); animation: 8s ease-in-out 1s infinite normal none running sg-site-ring; }
.sg-site__n17 { position: absolute; left: 72%; top: 50%; width: 280px; height: 280px; border-radius: var(--sg-size-radius-round); border: 1px solid var(--sg-color-ui-c28); animation: 8s ease-in-out 2s infinite normal none running sg-site-ring; }
.sg-site__n18 { position: absolute; left: calc(72% - 380px); top: calc(50% - 380px); width: 760px; height: 760px; animation: 60s linear 0s infinite normal none running sg-site-orbit; }
.sg-site__n19 { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: var(--sg-size-radius-round); background: var(--sg-color-accent-default); box-shadow: var(--sg-color-accent-default) 0px 0px 18px; }
.sg-site__n20 { position: absolute; bottom: 20%; left: 3%; width: 6px; height: 6px; border-radius: var(--sg-size-radius-round); background: var(--sg-color-success-text); box-shadow: var(--sg-color-success-text) 0px 0px 14px; }
.sg-site__n21 { position: absolute; left: calc(72% - 260px); top: calc(50% - 260px); width: 520px; height: 520px; animation: 40s linear 0s infinite reverse none running sg-site-orbit; }
.sg-site__n22 { position: absolute; top: 50%; right: -3px; width: 6px; height: 6px; border-radius: var(--sg-size-radius-round); background: var(--sg-color-ui-c29); box-shadow: var(--sg-color-ui-c29) 0px 0px 14px; }
.sg-site__n23 { position: relative; max-width: 1280px; margin: var(--sg-size-space-0) auto; padding: var(--sg-size-space-20) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)); width: 100%; }
.sg-site__n24 { font-size: var(--sg-type-size-sm); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sg-color-accent-text); animation: 0.8s ease 0s 1 normal both running sg-site-in; }
.sg-site__n25 { margin: var(--sg-size-space-6) var(--sg-size-space-0) var(--sg-size-space-0); font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(48px, 8vw, 112px); line-height: 0.95; letter-spacing: -0.02em; max-width: 900px; text-wrap: balance; animation: 0.9s ease 0.1s 1 normal both running sg-site-in; }
.sg-site__n26 { font-style: italic; color: var(--sg-color-accent-text); }
.sg-site__n27 { margin: var(--sg-size-space-7) var(--sg-size-space-0) var(--sg-size-space-0); max-width: 560px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--sg-color-text-secondary); animation: 0.9s ease 0.25s 1 normal both running sg-site-in; }
.sg-site__n28 { margin-top: var(--sg-size-space-10); display: flex; gap: var(--sg-size-space-4); flex-wrap: wrap; align-items: center; animation: 0.9s ease 0.4s 1 normal both running sg-site-in; }
.sg-site__n29 { height: 58px; padding: var(--sg-size-space-0) var(--sg-size-space-7); border-radius: var(--sg-size-radius-2xl); background: var(--sg-color-accent-default); color: var(--sg-color-accent-on); font-size: 16px; font-weight: var(--sg-type-weight-semibold); display: flex; align-items: center; gap: var(--sg-size-space-3); box-shadow: var(--sg-color-ui-c30) 0px 20px 50px -20px; }
.sg-site__n30 { height: 58px; padding: var(--sg-size-space-0) var(--sg-size-space-5); font-size: var(--sg-type-size-lg); color: var(--sg-color-text-primary); display: flex; align-items: center; gap: var(--sg-size-space-3); }
.sg-site__n31 { width: 36px; height: 36px; border-radius: var(--sg-size-radius-round); border: 1px solid var(--sg-color-ui-c31); display: flex; align-items: center; justify-content: center; }
.sg-site__n32 { max-width: 1280px; margin: var(--sg-size-space-0) auto; padding: clamp(var(--sg-size-space-16), 10vw, 120px) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)); }
.sg-site__n33 { font-size: var(--sg-type-size-sm); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sg-color-accent-text); }
.sg-site__n34 { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sg-size-space-0); background: var(--sg-color-border-subtle); border-radius: var(--sg-size-radius-5xl); overflow: hidden; }
.sg-site__n35 { background: var(--sg-color-bg-base); padding: 36px var(--sg-size-space-8) var(--sg-size-space-10); display: flex; flex-direction: column; gap: var(--sg-size-space-4); min-height: 300px; }
.sg-site__n36 { font-family: var(--sg-type-family-display); font-size: 72px; line-height: 0.8; color: var(--sg-color-accent-outline); }
.sg-site__n37 { font-family: var(--sg-type-family-display); font-size: var(--sg-type-size-5xl); line-height: 1.05; margin-top: auto; }
.sg-site__n38 { font-size: var(--sg-type-size-lg); line-height: 1.6; color: var(--sg-color-text-secondary); }
.sg-site__n39 { background: linear-gradient(var(--sg-color-bg-base), var(--sg-color-ui-c32) 30%, var(--sg-color-ui-c32) 70%, var(--sg-color-bg-base)); }
.sg-site__n40 { max-width: 1280px; margin: var(--sg-size-space-0) auto; padding: clamp(var(--sg-size-space-16), 10vw, 120px) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sg-size-space-14); align-items: center; }
.sg-site__n41 { display: flex; flex-direction: column; gap: var(--sg-size-space-6); }
.sg-site__n42 { margin: var(--sg-size-space-0); font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(40px, 5vw, 68px); line-height: 1; text-wrap: balance; }
.sg-site__n43 { margin: var(--sg-size-space-0); font-size: var(--sg-type-size-xl); line-height: 1.6; color: var(--sg-color-text-secondary); max-width: 460px; }
.sg-site__n44 { display: flex; flex-direction: column; gap: var(--sg-size-space-3); margin-top: var(--sg-size-space-2); }
.sg-site__n45 { display: flex; gap: var(--sg-size-space-4); align-items: center; font-size: var(--sg-type-size-lg); }
.sg-site__n46 { width: 28px; height: 28px; border-radius: var(--sg-size-radius-round); border: 1px solid var(--sg-color-ui-c33); color: var(--sg-color-success-text); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sg-site__n47 { display: flex; justify-content: center; }
.sg-site__n48 { width: 420px; max-width: 100%; height: 880px; border: 0px; border-radius: 40px; background: var(--sg-color-bg-base); }
.sg-site__n49 { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sg-size-space-6); flex-wrap: wrap; }
.sg-site__n50 { display: flex; flex-direction: column; gap: var(--sg-size-space-4); max-width: 620px; }
.sg-site__n51 { margin: var(--sg-size-space-0); font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(40px, 5vw, 68px); line-height: 1; }
.sg-site__n52 { display: flex; gap: var(--sg-size-space-1); padding: var(--sg-size-space-1); border-radius: var(--sg-size-radius-xl); border: 1px solid var(--sg-color-fixed-sheet-border); }
.sg-site__n53 { height: 40px; padding: var(--sg-size-space-0) var(--sg-size-space-4); border-radius: var(--sg-size-radius-md); font-size: var(--sg-type-size-base); background: var(--sg-color-surface-2); color: var(--sg-color-text-primary); transition: 0.25s; }
.sg-site__n54 { height: 40px; padding: var(--sg-size-space-0) var(--sg-size-space-4); border-radius: var(--sg-size-radius-md); font-size: var(--sg-type-size-base); background: transparent; color: var(--sg-color-text-secondary); transition: 0.25s; }
.sg-site__n55 { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sg-size-space-3); }
.sg-site__n56 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 0ms 1 normal both running sg-site-in; }
.sg-site__n57 { display: flex; justify-content: space-between; align-items: center; }
.sg-site__n58 { font-family: var(--sg-type-family-display); font-size: var(--sg-type-size-3xl); }
.sg-site__n59 { font-size: var(--sg-type-size-xs); padding: var(--sg-size-space-1) var(--sg-size-space-2); border-radius: 7px; border: 1px solid var(--sg-color-ui-c34); color: var(--sg-color-success-text); }
.sg-site__n60 { display: flex; flex-wrap: wrap; gap: var(--sg-size-space-1); }
.sg-site__n61 { font-size: var(--sg-type-size-sm); padding: var(--sg-size-space-1) var(--sg-size-space-2); border-radius: var(--sg-size-radius-sm); background: var(--sg-color-ui-c35); }
.sg-site__n62 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 30ms 1 normal both running sg-site-in; }
.sg-site__n63 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 60ms 1 normal both running sg-site-in; }
.sg-site__n64 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 90ms 1 normal both running sg-site-in; }
.sg-site__n65 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 120ms 1 normal both running sg-site-in; }
.sg-site__n66 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 150ms 1 normal both running sg-site-in; }
.sg-site__n67 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 180ms 1 normal both running sg-site-in; }
.sg-site__n68 { font-size: var(--sg-type-size-xs); padding: var(--sg-size-space-1) var(--sg-size-space-2); border-radius: 7px; border: 1px solid var(--sg-color-ui-c36); color: var(--sg-color-text-secondary); }
.sg-site__n69 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 210ms 1 normal both running sg-site-in; }
.sg-site__n70 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 240ms 1 normal both running sg-site-in; }
.sg-site__n71 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 270ms 1 normal both running sg-site-in; }
.sg-site__n72 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 300ms 1 normal both running sg-site-in; }
.sg-site__n73 { text-align: left; padding: var(--sg-size-space-5); border-radius: var(--sg-size-radius-3xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-3); transition: 0.3s; animation: 0.5s ease 330ms 1 normal both running sg-site-in; }
.sg-site__n74 { max-width: 1280px; margin: var(--sg-size-space-0) auto; padding: var(--sg-size-space-0) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)) clamp(var(--sg-size-space-16), 10vw, 120px); }
.sg-site__n75 { border-radius: 36px; border: 1px solid var(--sg-color-fixed-sheet-border); background: var(--sg-color-ui-c32); padding: clamp(var(--sg-size-space-7), 5vw, var(--sg-size-space-16)); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sg-size-space-12); align-items: center; position: relative; overflow: hidden; }
.sg-site__n76 { position: absolute; right: -200px; top: -200px; width: 600px; height: 600px; background: radial-gradient(closest-side, var(--sg-color-ui-c37), transparent); }
.sg-site__n77 { display: flex; flex-direction: column; gap: var(--sg-size-space-5); position: relative; }
.sg-site__n78 { font-size: var(--sg-type-size-sm); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sg-color-success-text); }
.sg-site__n79 { margin: var(--sg-size-space-0); font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(36px, 4.4vw, 60px); line-height: 1; }
.sg-site__n80 { margin: var(--sg-size-space-0); font-size: 16px; line-height: 1.6; color: var(--sg-color-text-secondary); }
.sg-site__n81 { font-family: var(--sg-type-family-display); font-size: 44px; color: var(--sg-color-success-text); }
.sg-site__n82 { font-family: var(--sg-type-family-ui); font-size: var(--sg-type-size-base); color: var(--sg-color-text-secondary); }
.sg-site__n83 { display: flex; flex-direction: column; gap: var(--sg-size-space-3); position: relative; }
.sg-site__n84 { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--sg-size-space-4); align-items: center; padding: var(--sg-size-space-5) var(--sg-size-space-5); border-radius: 20px; border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; }
.sg-site__n85 { font-family: var(--sg-type-family-display); font-size: 28px; color: var(--sg-color-text-secondary); }
.sg-site__n86 { display: flex; flex-direction: column; gap: var(--sg-size-space-1); }
.sg-site__n87 { font-size: var(--sg-type-size-lg); font-weight: var(--sg-type-weight-medium); }
.sg-site__n88 { font-size: var(--sg-type-size-md); color: var(--sg-color-text-secondary); }
.sg-site__n89 { font-size: var(--sg-type-size-sm); color: var(--sg-color-text-secondary); }
.sg-site__n90 { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--sg-size-space-4); align-items: center; padding: var(--sg-size-space-5) var(--sg-size-space-5); border-radius: 20px; border: 1px solid var(--sg-color-ui-c34); background: var(--sg-color-ui-c38); }
.sg-site__n91 { font-family: var(--sg-type-family-display); font-size: 28px; color: var(--sg-color-success-text); }
.sg-site__n92 { font-size: var(--sg-type-size-sm); color: var(--sg-color-success-text); }
.sg-site__n93 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sg-size-space-3); }
.sg-site__n94 { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sg-size-space-4); margin-bottom: var(--sg-size-space-6); }
.sg-site__n95 { margin: var(--sg-size-space-0); font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(40px, 5vw, 68px); line-height: 1; max-width: 780px; }
.sg-site__n96 { padding: var(--sg-size-space-7); border-radius: var(--sg-size-radius-4xl); border: 1px solid var(--sg-color-fixed-sheet-border); display: flex; flex-direction: column; gap: var(--sg-size-space-3); min-height: 200px; }
.sg-site__n97 { width: 40px; height: 40px; border-radius: var(--sg-size-radius-md); border: 1px solid var(--sg-color-ui-c28); display: flex; align-items: center; justify-content: center; color: var(--sg-color-accent-text); font-family: var(--sg-type-family-mono); font-size: var(--sg-type-size-sm); }
.sg-site__n98 { font-size: 18px; font-weight: var(--sg-type-weight-medium); margin-top: auto; }
.sg-site__n99 { font-size: var(--sg-type-size-base); line-height: 1.6; color: var(--sg-color-text-secondary); }
.sg-site__n100 { max-width: 1280px; margin: var(--sg-size-space-0) auto; padding: var(--sg-size-space-0) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)) clamp(var(--sg-size-space-16), 10vw, 120px); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sg-size-space-12); align-items: center; }
.sg-site__n101 { display: flex; flex-direction: column; gap: var(--sg-size-space-5); }
.sg-site__n102 { font-family: var(--sg-type-family-display); font-size: clamp(64px, 10vw, 140px); line-height: 0.9; color: var(--sg-color-accent-text); text-align: right; }
.sg-site__n103 { display: block; font-family: var(--sg-type-family-ui); font-size: var(--sg-type-size-base); color: var(--sg-color-text-secondary); margin-top: var(--sg-size-space-4); }
.sg-site__n104 { border-radius: 32px; background: var(--sg-color-ui-c39); border: 1px solid var(--sg-color-fixed-sheet-border); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); overflow: hidden; }
.sg-site__n105 { padding: clamp(var(--sg-size-space-7), 4vw, 52px); display: flex; flex-direction: column; gap: var(--sg-size-space-5); }
.sg-site__n106 { margin: var(--sg-size-space-0); font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(34px, 4vw, 54px); line-height: 1; }
.sg-site__n107 { margin: var(--sg-size-space-0); font-size: var(--sg-type-size-lg); line-height: 1.6; color: var(--sg-color-text-secondary); }
.sg-site__n108 { font-size: var(--sg-type-size-lg); display: flex; align-items: center; gap: var(--sg-size-space-2); }
.sg-site__n109 { margin: var(--sg-size-space-0); padding: clamp(var(--sg-size-space-7), 4vw, 52px); font-family: var(--sg-type-family-mono); font-size: 13.5px; line-height: 1.9; color: var(--sg-color-ui-c40); border-left: 1px solid var(--sg-color-ui-c25); overflow: auto; }
.sg-site__n110 { color: var(--sg-color-success-text); }
.sg-site__n111 { color: var(--sg-color-ui-c29); }
.sg-site__n112 { color: var(--sg-color-accent-text); }
.sg-site__n113 { color: var(--sg-color-ui-c41); }
.sg-site__n114 { display: flex; flex-direction: column; gap: var(--sg-size-space-4); margin-bottom: 36px; }
.sg-site__n115 { padding: var(--sg-size-space-8); border-radius: var(--sg-size-radius-5xl); border: 1px solid var(--sg-color-fixed-sheet-border); background: transparent; display: flex; flex-direction: column; gap: var(--sg-size-space-4); }
.sg-site__n116 { font-family: var(--sg-type-family-display); font-size: 52px; line-height: 1; color: var(--sg-color-text-primary); }
.sg-site__n117 { font-size: var(--sg-type-size-base); line-height: 1.6; color: var(--sg-color-text-secondary); min-height: 66px; }
.sg-site__n118 { height: 48px; border-radius: var(--sg-size-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--sg-type-size-base); font-weight: var(--sg-type-weight-semibold); background: transparent; color: var(--sg-color-text-primary); border: 1px solid var(--sg-color-ui-c42); }
.sg-site__n119 { padding: var(--sg-size-space-8); border-radius: var(--sg-size-radius-5xl); border: 1px solid var(--sg-color-ui-c43); background: var(--sg-color-ui-c44); display: flex; flex-direction: column; gap: var(--sg-size-space-4); }
.sg-site__n120 { font-family: var(--sg-type-family-display); font-size: 52px; line-height: 1; color: var(--sg-color-accent-text); }
.sg-site__n121 { height: 48px; border-radius: var(--sg-size-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--sg-type-size-base); font-weight: var(--sg-type-weight-semibold); background: var(--sg-color-accent-default); color: var(--sg-color-accent-on); border: 1px solid var(--sg-color-ui-c42); }
.sg-site__n122 { max-width: 1280px; margin: var(--sg-size-space-0) auto; padding: var(--sg-size-space-0) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)) clamp(var(--sg-size-space-16), 10vw, 120px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sg-size-space-3); }
.sg-site__n123 { margin: var(--sg-size-space-0); padding: 36px; border-radius: var(--sg-size-radius-5xl); border: 1px solid var(--sg-color-fixed-sheet-border); display: flex; flex-direction: column; gap: var(--sg-size-space-5); }
.sg-site__n124 { margin: var(--sg-size-space-0); font-family: var(--sg-type-family-display); font-size: 28px; line-height: 1.2; }
.sg-site__n125 { display: flex; align-items: center; gap: var(--sg-size-space-3); font-size: var(--sg-type-size-md); color: var(--sg-color-text-secondary); margin-top: auto; }
.sg-site__n126 { width: 40px; height: 40px; border-radius: var(--sg-size-radius-md); border: 1px dashed var(--sg-color-ui-c31); display: flex; align-items: center; justify-content: center; font-size: var(--sg-type-size-2xs); }
.sg-site__n127 { max-width: 900px; margin: var(--sg-size-space-0) auto; padding: var(--sg-size-space-0) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)) clamp(var(--sg-size-space-16), 10vw, 120px); }
.sg-site__n128 { margin: var(--sg-size-space-0) var(--sg-size-space-0) var(--sg-size-space-7); font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(40px, 5vw, 60px); line-height: 1; }
.sg-site__n129 { border-top: 1px solid var(--sg-color-fixed-sheet-border); }
.sg-site__n130 { width: 100%; min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: var(--sg-size-space-5); text-align: left; font-size: 18px; }
.sg-site__n131 { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--sg-size-radius-round); border: 1px solid var(--sg-color-ui-c36); display: flex; align-items: center; justify-content: center; transform: rotate(45deg); transition: transform 0.35s; }
.sg-site__n132 { margin: var(--sg-size-space-0) var(--sg-size-space-0) var(--sg-size-space-6); font-size: var(--sg-type-size-lg); line-height: 1.65; color: var(--sg-color-text-secondary); max-width: 700px; animation: 0.35s ease 0s 1 normal both running sg-site-in; }
.sg-site__n133 { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--sg-size-radius-round); border: 1px solid var(--sg-color-ui-c36); display: flex; align-items: center; justify-content: center; transform: rotate(0deg); transition: transform 0.35s; }
.sg-site__n134 { position: relative; overflow: hidden; border-top: 1px solid var(--sg-color-ui-c25); }
.sg-site__n135 { position: absolute; left: 50%; top: 100%; width: 1200px; height: 800px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--sg-color-accent-flash), transparent); }
.sg-site__n136 { position: relative; max-width: 1280px; margin: var(--sg-size-space-0) auto; padding: clamp(var(--sg-size-space-20), 12vw, 160px) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sg-size-space-7); }
.sg-site__n137 { margin: var(--sg-size-space-0); font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(44px, 7vw, 96px); line-height: 0.95; max-width: 900px; text-wrap: balance; }
.sg-site__n138 { height: 58px; padding: var(--sg-size-space-0) var(--sg-size-space-8); border-radius: var(--sg-size-radius-2xl); background: var(--sg-color-accent-default); color: var(--sg-color-accent-on); font-size: 16px; font-weight: var(--sg-type-weight-semibold); display: flex; align-items: center; }
.sg-site__n139 { border-top: 1px solid var(--sg-color-ui-c25); }
.sg-site__n140 { max-width: 1280px; margin: var(--sg-size-space-0) auto; padding: var(--sg-size-space-8) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)); display: flex; gap: var(--sg-size-space-6); flex-wrap: wrap; font-size: var(--sg-type-size-md); color: var(--sg-color-text-secondary); }
.sg-site__n141 { flex: 1 1 0%; }
/* ===== /sg-site ===== */

/* ===== sgron.com additions on the designer's tokens (not part of the design package) ===== */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { background: var(--sg-color-bg-base); }

/* The rings are centred by their animation only; keep them centred before it starts. */
.sg-site__n15, .sg-site__n16, .sg-site__n17 { transform: translate(-50%, -50%); }

/* Header on narrow screens: the section links move out, the logo and the two actions stay. */
@media (max-width: 900px) {
  .sg-site__n9 { visibility: hidden; }
}
@media (max-width: 520px) {
  .sg-site__n3 { gap: var(--sg-size-space-4); }
  .sg-site__n9 { display: none; }
  .sg-site__n4 { flex: 1 1 auto; }
  .sg-site__n12 { padding: 0 var(--sg-size-space-4); }
}
@media (max-width: 380px) {
  .sg-site__n11 { display: none; }
}

/* Hero rings stay inside small screens. */
@media (max-width: 720px) {
  .sg-site__n14, .sg-site__n15, .sg-site__n16, .sg-site__n17, .sg-site__n18, .sg-site__n21 { left: 85%; }
  .sg-site__n18 { left: calc(85% - 380px); }
  .sg-site__n21 { left: calc(85% - 260px); }
  .sg-site__n23 { padding-top: var(--sg-size-space-16); padding-bottom: var(--sg-size-space-16); }
}

/* Checkout section: real screens of the payment page in phone frames. */
.sg-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-size-space-4); align-items: start; }
.sg-shot { margin: 0; display: flex; flex-direction: column; gap: var(--sg-size-space-3); }
.sg-shot:nth-child(2) { margin-top: var(--sg-size-space-10); }
.sg-shot:nth-child(3) { margin-top: var(--sg-size-space-20); }
.sg-shot__frame { border-radius: 28px; border: 1px solid var(--sg-color-fixed-sheet-border); background: var(--sg-color-bg-base); overflow: hidden; box-shadow: var(--sg-color-ui-c30) 0 30px 80px -40px; aspect-ratio: 390 / 760; }
.sg-shot__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sg-shot__cap { font-size: var(--sg-type-size-sm); color: var(--sg-color-text-secondary); text-align: center; }
.sg-site__n40.sg-checkout-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--sg-size-space-10), 6vw, 96px); align-items: center; }
.sg-checkout-cta { margin-top: var(--sg-size-space-4); align-self: flex-start; }
@media (max-width: 960px) {
  .sg-site__n40.sg-checkout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sg-shots { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sg-size-space-3); }
  .sg-shot { scroll-snap-align: center; }
  .sg-shot:nth-child(2), .sg-shot:nth-child(3) { margin-top: 0; }
}

/* Small secondary button, same shape as the pricing buttons. */
.sg-site__n118.sg-btn-inline { display: inline-flex; padding: 0 var(--sg-size-space-6); }

/* Section spacing where the designer's blocks follow each other without their own padding. */
.sg-gap { height: clamp(var(--sg-size-space-16), 10vw, 120px); }

/* FAQ on native details and summary, no script. */
.sg-faq > summary { list-style: none; cursor: pointer; }
.sg-faq > summary::-webkit-details-marker { display: none; }
.sg-faq[open] .sg-site__n133 { transform: rotate(45deg); }

/* Code block: keep the designer's look, wrap long lines on phones. */
.sg-site__n109 { white-space: pre; }
@media (max-width: 560px) {
  .sg-site__n109 { border-left: 0; border-top: 1px solid var(--sg-color-ui-c25); font-size: 12px; }
}

/* Footer links */
.sg-site__n140 a.sg-site__n10:hover { color: var(--sg-color-text-primary); }

/* Legal pages */
.sg-legal { max-width: 780px; margin: 0 auto; padding: clamp(var(--sg-size-space-10), 8vw, 96px) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)) clamp(var(--sg-size-space-16), 10vw, 120px); }
.sg-legal h1 { font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(40px, 6vw, 72px); line-height: 1; margin-top: var(--sg-size-space-4); }
.sg-legal__meta { margin-top: var(--sg-size-space-5); color: var(--sg-color-text-secondary); font-size: var(--sg-type-size-md); }
.sg-legal h2 { font-family: var(--sg-type-family-display); font-weight: var(--sg-type-weight-medium); font-size: clamp(26px, 3vw, 34px); line-height: 1.1; margin-top: var(--sg-size-space-12); }
.sg-legal p, .sg-legal li { font-size: var(--sg-type-size-lg); line-height: 1.7; color: var(--sg-color-text-secondary); }
.sg-legal p { margin-top: var(--sg-size-space-4); }
.sg-legal ul { margin-top: var(--sg-size-space-4); display: flex; flex-direction: column; gap: var(--sg-size-space-2); }
.sg-legal li { padding-left: var(--sg-size-space-5); position: relative; }
.sg-legal li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 6px; height: 6px; border-radius: 50%; background: var(--sg-color-accent-default); }
.sg-legal strong { color: var(--sg-color-text-primary); font-weight: var(--sg-type-weight-medium); }
.sg-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* 404 */
.sg-notfound { min-height: 60vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sg-size-space-6); max-width: 1280px; margin: 0 auto; padding: var(--sg-size-space-20) clamp(var(--sg-size-space-4), 4vw, var(--sg-size-space-10)); }
/* ===== /sgron.com additions ===== */