/*
 * theme.css: Aurelin
 * Edition ea84ab41866a
 * Every design token this system owns, as CSS custom properties.
 *
 * Keep the specification and stylesheets from the same edition together.
 */


:root {
  --sg-color-primary-50: #f6fdff;
  --sg-color-primary-100: #f6fdff;
  --sg-color-primary-200: #f4fdff;
  --sg-color-primary-300: #abf0ff;
  --sg-color-primary-400: #1edcfb;
  --sg-color-primary-500: #00bdd9;
  --sg-color-primary-600: #00a2ba;
  --sg-color-primary-700: #00879c;
  --sg-color-primary-800: #006e7e;
  --sg-color-primary-900: #005866;
  --sg-color-primary-950: #003842;
  --sg-color-neutral-50: #f5f7fd;
  --sg-color-neutral-100: #eaedf4;
  --sg-color-neutral-200: #d5d9e3;
  --sg-color-neutral-300: #bcc1cc;
  --sg-color-neutral-400: #a0a4b1;
  --sg-color-neutral-500: #848995;
  --sg-color-neutral-600: #6d717d;
  --sg-color-neutral-700: #575b65;
  --sg-color-neutral-800: #41454e;
  --sg-color-neutral-900: #30333a;
  --sg-color-neutral-950: #16181e;
  --sg-color-success-50: #dbffe4;
  --sg-color-success-100: #c1facf;
  --sg-color-success-200: #9becb2;
  --sg-color-success-300: #74d792;
  --sg-color-success-400: #48bc72;
  --sg-color-success-500: #229f57;
  --sg-color-success-600: #008543;
  --sg-color-success-700: #006a34;
  --sg-color-success-800: #005126;
  --sg-color-success-900: #003b1b;
  --sg-color-success-950: #001c09;
  --sg-color-warning-50: #fffbf8;
  --sg-color-warning-100: #fff7f0;
  --sg-color-warning-200: #ffddc1;
  --sg-color-warning-300: #ffbc80;
  --sg-color-warning-400: #f0983f;
  --sg-color-warning-500: #d17c18;
  --sg-color-warning-600: #b26600;
  --sg-color-warning-700: #925300;
  --sg-color-warning-800: #734000;
  --sg-color-warning-900: #593000;
  --sg-color-warning-950: #331900;
  --sg-color-danger-50: #ffe9e7;
  --sg-color-danger-100: #ffdad6;
  --sg-color-danger-200: #ffbeb8;
  --sg-color-danger-300: #ff9790;
  --sg-color-danger-400: #f76763;
  --sg-color-danger-500: #d74948;
  --sg-color-danger-600: #bb2d31;
  --sg-color-danger-700: #9c111d;
  --sg-color-danger-800: #790010;
  --sg-color-danger-900: #590009;
  --sg-color-danger-950: #2c0002;
  --sg-color-info-50: #c8e8f4;
  --sg-color-info-100: #b3dff0;
  --sg-color-info-200: #91cee5;
  --sg-color-info-300: #6db8d3;
  --sg-color-info-400: #459dba;
  --sg-color-info-500: #24819e;
  --sg-color-info-600: #006984;
  --sg-color-info-700: #005166;
  --sg-color-info-800: #003a4a;
  --sg-color-info-900: #002733;
  --sg-color-info-950: #000c12;
  --sg-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sg-font-serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --sg-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sg-font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sg-text-2xs: 0.625rem;
  --sg-text-2xs-lh: 0.875rem;
  --sg-text-xs: 0.75rem;
  --sg-text-xs-lh: 1rem;
  --sg-text-sm: 0.875rem;
  --sg-text-sm-lh: 1.5rem;
  --sg-text-base: 1rem;
  --sg-text-base-lh: 1.25rem;
  --sg-text-lg: 1.125rem;
  --sg-text-lg-lh: 1.5rem;
  --sg-text-xl: 1.25rem;
  --sg-text-xl-lh: 1.50rem;
  --sg-text-2xl: 1.5rem;
  --sg-text-2xl-lh: 1.75rem;
  --sg-text-3xl: 1.875rem;
  --sg-text-3xl-lh: 2rem;
  --sg-text-4xl: 2.25rem;
  --sg-text-4xl-lh: 2.5rem;
  --sg-text-5xl: 3rem;
  --sg-text-5xl-lh: 3rem;
  --sg-font-weight-light: 300;
  --sg-font-weight-normal: 400;
  --sg-font-weight-medium: 500;
  --sg-font-weight-semibold: 600;
  --sg-font-weight-bold: 700;
  --sg-font-weight-black: 900;
  --sg-tracking-tightest: -0.075em;
  --sg-tracking-tighter: -0.05em;
  --sg-tracking-tight: -0.025em;
  --sg-tracking-normal: 0em;
  --sg-tracking-wide: 0.025em;
  --sg-tracking-widest: 0.05em;
  --sg-space-0: 0px;
  --sg-space-0-5: 0.125rem;
  --sg-space-1: 0.25rem;
  --sg-space-1-5: 0.375rem;
  --sg-space-2: 0.5rem;
  --sg-space-2-5: 0.625rem;
  --sg-space-3: 0.75rem;
  --sg-space-4: 1rem;
  --sg-space-5: 1.25rem;
  --sg-space-6: 1.5rem;
  --sg-space-8: 2rem;
  --sg-space-10: 2.5rem;
  --sg-space-12: 3rem;
  --sg-space-16: 4rem;
  --sg-space-20: 5rem;
  --sg-space-24: 6rem;
  --sg-space-32: 8rem;
  --sg-space-40: 10rem;
  --sg-space-48: 12rem;
  --sg-space-64: 16rem;
  --sg-space-96: 24rem;
  --sg-section-padding: 4rem;
  --sg-container-sm: 24rem;
  --sg-container-md: 28rem;
  --sg-container-lg: 32rem;
  --sg-container-xl: 36rem;
  --sg-container-2xl: 42rem;
  --sg-container-7xl: 80rem;
  --sg-border-width-none: 0px;
  --sg-border-width-thin: 1px;
  --sg-border-width-default: 1.5px;
  --sg-border-width-thick: 2px;
  --sg-radius-none: 0px;
  --sg-radius-sm: 0.25rem;
  --sg-radius-md: 0.5rem;
  --sg-radius-lg: 0.75rem;
  --sg-radius-xl: 1rem;
  --sg-radius-2xl: 1.5rem;
  --sg-radius-full: 9999px;
  --sg-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sg-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --sg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sg-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --sg-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --sg-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --sg-opacity-0: 0;
  --sg-opacity-25: 0.25;
  --sg-opacity-50: 0.5;
  --sg-opacity-75: 0.75;
  --sg-opacity-100: 1;
  --sg-blur-none: 0;
  --sg-blur-sm: 4px;
  --sg-blur-md: 8px;
  --sg-blur-lg: 12px;
  --sg-blur-xl: 24px;
  --sg-duration-instant: 0ms;
  --sg-duration-quick: 150ms;
  --sg-duration-moderate: 250ms;
  --sg-duration-expressive: 400ms;
  --sg-duration-slow: 600ms;
  --sg-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sg-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --sg-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --sg-easing-emphasis: cubic-bezier(0.4, 0, 0.6, 1);
  --sg-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sg-easing-linear: linear;
  --sg-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --sg-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --sg-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --sg-gradient-accent: linear-gradient(135deg, #00bdd9, #006984);
  --sg-gradient-sunset: linear-gradient(135deg, #f0983f, #bb2d31);
  --sg-gradient-ocean: linear-gradient(180deg, #459dba, #00879c);
  --sg-gradient-forest: linear-gradient(135deg, #48bc72, #006a34);
  --sg-gradient-candy: linear-gradient(135deg, #abf0ff, #f76763);
  --sg-gradient-mesh: conic-gradient(from 210deg at 50% 40%, #f4fdff, #eaedf4);
  --sg-focus-color: #00bdd9;
  --sg-focus-width: 2px;
  --sg-focus-offset: 2px;
  --sg-cursor-interactive: pointer;
  --sg-cursor-disabled: not-allowed;
  --sg-cursor-text: text;
  --sg-cursor-draggable: grab;
  --sg-cursor-movable: move;
  --sg-glass-bg: color-mix(in srgb, var(--sg-bg-card) 50%, transparent);
  --sg-glass-blur: var(--sg-blur-md);
  --sg-z-base: 0;
  --sg-z-dropdown: 1000;
  --sg-z-sticky: 1100;
  --sg-z-overlay: 1200;
  --sg-z-modal: 1300;
  --sg-z-toast: 1400;
  --sg-icon-sm: 1rem;
  --sg-icon-md: 1.25rem;
  --sg-icon-lg: 1.5rem;
  --sg-icon-xl: 2rem;
  --sg-icon-stroke-width: 1.75;
  --sg-bp-sm: 640px;
  --sg-bp-md: 768px;
  --sg-bp-lg: 1024px;
  --sg-bp-xl: 1280px;
  --sg-bp-2xl: 1536px;
  --sg-font-size-body: 1rem;
  --sg-line-height-body: 1.25rem;
  --sg-d-radius-control: var(--sg-radius-2xl);
  --sg-d-radius-surface: var(--sg-radius-2xl);
  --sg-d-radius-section: var(--sg-radius-2xl);
  --sg-d-radius-pill: var(--sg-radius-full);
  --sg-d-radius-nested: min(var(--sg-d-radius-surface), max(var(--sg-d-radius-control), calc(var(--sg-d-radius-surface) - var(--sg-d-space-surface-padding))));
  --sg-d-shadow-control: var(--sg-shadow-sm);
  --sg-d-shadow-surface: var(--sg-shadow-lg);
  --sg-d-shadow-elevated: var(--sg-shadow-2xl);
  --sg-d-shadow-hero: var(--sg-shadow-2xl);
  --sg-d-border-width-control: var(--sg-border-width-thick);
  --sg-d-border-control: var(--sg-border-width-thick) solid var(--sg-border-default);
  --sg-d-border-width-surface: var(--sg-border-width-thick);
  --sg-d-border-surface: var(--sg-border-width-thick) solid var(--sg-border-default);
  --sg-d-border-width-divider: var(--sg-border-width-default);
  --sg-d-border-divider: var(--sg-border-width-default) solid var(--sg-border-default);
  --sg-d-border-width-emphasis: var(--sg-border-width-thick);
  --sg-d-border-emphasis: var(--sg-border-width-thick) solid var(--sg-border-default);
  --sg-d-space-surface-padding: var(--sg-space-8);
  --sg-d-space-grid-gap: var(--sg-space-8);
  --sg-d-space-stack-gap: var(--sg-space-3);
  --sg-d-space-inline-gap: var(--sg-space-4);
  --sg-d-space-control-pad-x: var(--sg-space-5);
  --sg-d-space-control-pad-y: var(--sg-space-2-5);
  --sg-d-space-control-pad-x-sm: var(--sg-space-4);
  --sg-d-space-control-pad-x-lg: var(--sg-space-8);
  --sg-d-space-control-pad-y-sm: var(--sg-space-2);
  --sg-d-space-control-pad-y-lg: var(--sg-space-3);
  --sg-d-text-caption: var(--sg-text-sm);
  --sg-d-text-caption-lh: var(--sg-text-sm-lh);
  --sg-d-leading-caption: 1.7142857142857142;
  --sg-d-text-small: var(--sg-text-base);
  --sg-d-text-small-lh: var(--sg-text-base-lh);
  --sg-d-leading-small: 1.25;
  --sg-d-text-body: var(--sg-text-lg);
  --sg-d-text-body-lh: var(--sg-text-lg-lh);
  --sg-d-leading-body: 1.3333333333333333;
  --sg-d-text-lead: var(--sg-text-xl);
  --sg-d-text-lead-lh: var(--sg-text-xl-lh);
  --sg-d-leading-lead: 1.2;
  --sg-d-text-title: var(--sg-text-3xl);
  --sg-d-text-title-lh: var(--sg-text-3xl-lh);
  --sg-d-leading-title: 1.0666666666666667;
  --sg-d-text-heading: var(--sg-text-4xl);
  --sg-d-text-heading-lh: var(--sg-text-4xl-lh);
  --sg-d-leading-heading: 1.1111111111111112;
  --sg-d-text-display: var(--sg-text-xl);
  --sg-d-text-display-lh: var(--sg-text-xl-lh);
  --sg-d-leading-display: 1.2;
  --sg-d-text-display-lg: var(--sg-text-lg);
  --sg-d-text-display-lg-lh: var(--sg-text-lg-lh);
  --sg-d-weight-body: var(--sg-font-weight-semibold);
  --sg-d-weight-label: var(--sg-font-weight-bold);
  --sg-d-weight-subheading: var(--sg-font-weight-black);
  --sg-d-weight-heading: var(--sg-font-weight-black);
  --sg-d-tracking-body: var(--sg-tracking-wide);
  --sg-d-tracking-label: var(--sg-tracking-widest);
  --sg-d-tracking-heading: var(--sg-tracking-normal);
  --sg-d-tracking-display: var(--sg-tracking-tight);
  --sg-d-motion-control: var(--sg-duration-quick);
  --sg-d-transition-control: var(--sg-duration-quick) var(--sg-d-easing);
  --sg-d-motion-layout: var(--sg-duration-moderate);
  --sg-d-transition-layout: var(--sg-duration-moderate) var(--sg-d-easing);
  --sg-d-motion-progress: var(--sg-duration-expressive);
  --sg-d-transition-progress: var(--sg-duration-expressive) var(--sg-d-easing);
  --sg-d-transition-instant: var(--sg-duration-instant) var(--sg-d-easing);
  --sg-d-transition-quick: var(--sg-duration-quick) var(--sg-d-easing);
  --sg-d-transition-moderate: var(--sg-duration-moderate) var(--sg-d-easing);
  --sg-d-transition-expressive: var(--sg-duration-expressive) var(--sg-d-easing);
  --sg-d-transition-slow: var(--sg-duration-slow) var(--sg-d-easing);
  --sg-d-easing: var(--sg-easing-standard);
  --sg-d-opacity-disabled: var(--sg-opacity-50);
  --sg-d-blur-overlay: var(--sg-blur-sm);
  --sg-d-gradient-hero: var(--sg-gradient-accent);
  --sg-d-gradient-surface: var(--sg-gradient-ocean);
  --sg-d-gradient-button: var(--sg-gradient-accent);
  --sg-d-gradient-badge: var(--sg-gradient-candy);
  --sg-d-hover-transform: translateY(-2px);
  --sg-d-hover-shadow: var(--sg-d-shadow-elevated);
  --sg-d-font-display: var(--sg-font-sans, var(--sg-font-sans));
  --sg-d-font-heading: var(--sg-font-sans, var(--sg-font-sans));
  --sg-d-font-body: var(--sg-font-sans, var(--sg-font-sans));
  --sg-d-font-code: var(--sg-font-mono, var(--sg-font-sans));
  --sg-d-container-page: var(--sg-container-7xl);
  --sg-d-container-content: var(--sg-container-2xl);
  --sg-d-container-prose: var(--sg-container-lg);
  --sg-bg-page: #f5f7fd;
  --sg-bg-card: #ffffff;
  --sg-bg-elevated: #ffffff;
  --sg-bg-hover: #eaedf4;
  --sg-text-primary: #16181e;
  --sg-text-secondary: #41454e;
  --sg-text-muted: #575b65;
  --sg-text-inverse: #d5d9e3;
  --sg-border-default: #6d717d;
  --sg-border-subtle: #bcc1cc;
  --sg-border-strong: #6d717d;
  --sg-ring: #00bdd9;
  --sg-accent: #00bdd9;
  --sg-accent-hover: #1edcfb;
  --sg-accent-foreground: #000507;
  --sg-link: #006e7e;
  --sg-success-fill: #008543;
  --sg-success-hover: #006a34;
  --sg-success-foreground: #e8ffee;
  --sg-success-surface: #dbffe4;
  --sg-success-text: #006a34;
  --sg-warning-fill: #925300;
  --sg-warning-hover: #734000;
  --sg-warning-foreground: #ffddc1;
  --sg-warning-surface: #fffbf8;
  --sg-warning-text: #925300;
  --sg-danger-fill: #bb2d31;
  --sg-danger-hover: #9c111d;
  --sg-danger-foreground: #ffdad6;
  --sg-danger-surface: #ffe9e7;
  --sg-danger-text: #bb2d31;
  --sg-info-fill: #006984;
  --sg-info-hover: #005166;
  --sg-info-foreground: #c8e8f4;
  --sg-info-surface: #c8e8f4;
  --sg-info-text: #006984;
}

.dark,
[data-theme="dark"] {
  --sg-bg-page: #16181e;
  --sg-bg-card: #30333a;
  --sg-bg-elevated: #41454e;
  --sg-bg-hover: #41454e;
  --sg-text-primary: #f5f7fd;
  --sg-text-secondary: #eaedf4;
  --sg-text-muted: #d5d9e3;
  --sg-text-inverse: #30333a;
  --sg-border-default: #a0a4b1;
  --sg-border-subtle: #6d717d;
  --sg-border-strong: #a0a4b1;
  --sg-ring: #00bdd9;
  --sg-accent: #00bdd9;
  --sg-accent-hover: #1edcfb;
  --sg-accent-foreground: #000507;
  --sg-link: #1edcfb;
  --sg-success-fill: #008543;
  --sg-success-hover: #006a34;
  --sg-success-foreground: #e8ffee;
  --sg-success-surface: #001c09;
  --sg-success-text: #9becb2;
  --sg-warning-fill: #925300;
  --sg-warning-hover: #734000;
  --sg-warning-foreground: #ffddc1;
  --sg-warning-surface: #331900;
  --sg-warning-text: #ffbc80;
  --sg-danger-fill: #bb2d31;
  --sg-danger-hover: #9c111d;
  --sg-danger-foreground: #ffdad6;
  --sg-danger-surface: #2c0002;
  --sg-danger-text: #ffbeb8;
  --sg-info-fill: #006984;
  --sg-info-hover: #005166;
  --sg-info-foreground: #c8e8f4;
  --sg-info-surface: #000c12;
  --sg-info-text: #91cee5;
}


@media (prefers-color-scheme: dark) { :root {
  --sg-bg-page: #16181e;
  --sg-bg-card: #30333a;
  --sg-bg-elevated: #41454e;
  --sg-bg-hover: #41454e;
  --sg-text-primary: #f5f7fd;
  --sg-text-secondary: #eaedf4;
  --sg-text-muted: #d5d9e3;
  --sg-text-inverse: #30333a;
  --sg-border-default: #a0a4b1;
  --sg-border-subtle: #6d717d;
  --sg-border-strong: #a0a4b1;
  --sg-ring: #00bdd9;
  --sg-accent: #00bdd9;
  --sg-accent-hover: #1edcfb;
  --sg-accent-foreground: #000507;
  --sg-link: #1edcfb;
  --sg-success-fill: #008543;
  --sg-success-hover: #006a34;
  --sg-success-foreground: #e8ffee;
  --sg-success-surface: #001c09;
  --sg-success-text: #9becb2;
  --sg-warning-fill: #925300;
  --sg-warning-hover: #734000;
  --sg-warning-foreground: #ffddc1;
  --sg-warning-surface: #331900;
  --sg-warning-text: #ffbc80;
  --sg-danger-fill: #bb2d31;
  --sg-danger-hover: #9c111d;
  --sg-danger-foreground: #ffdad6;
  --sg-danger-surface: #2c0002;
  --sg-danger-text: #ffbeb8;
  --sg-info-fill: #006984;
  --sg-info-hover: #005166;
  --sg-info-foreground: #c8e8f4;
  --sg-info-surface: #000c12;
  --sg-info-text: #91cee5;
}
}

/*
 * components.css: Aurelin
 * Edition ea84ab41866a
 * Optional component layer composed from the design-role tokens.
 *
 * Keep the specification and stylesheets from the same edition together.
 */
@layer components {
  .sg-ui {
    font-family: var(--sg-d-font-body);
    font-size: var(--sg-d-text-body);
    line-height: var(--sg-d-text-body-lh);
    font-weight: var(--sg-d-weight-body);
    letter-spacing: var(--sg-d-tracking-body);
    color: var(--sg-text-primary);
    background: var(--sg-bg-page);
  }
  .sg-ui *, .sg-ui *::before, .sg-ui *::after { box-sizing: border-box; }
  .sg-ui :where(h1,h2,h3,h4,h5,h6) { font-family: var(--sg-d-font-heading); font-weight: var(--sg-d-weight-heading); letter-spacing: var(--sg-d-tracking-heading); }
  .sg-ui :where(code,pre,kbd,samp) { font-family: var(--sg-d-font-code); }
  /* ---------- buttons ---------- */
  .sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sg-d-space-inline-gap);
    border: none;
    border-radius: var(--sg-d-radius-control);
    padding: var(--sg-d-space-control-pad-y) var(--sg-d-space-control-pad-x);
    font-family: var(--sg-d-font-body);
    font-size: var(--sg-d-text-small);
    line-height: var(--sg-d-text-small-lh);
    font-weight: var(--sg-d-weight-label);
    letter-spacing: var(--sg-d-tracking-label);
    min-height: 44px;
    cursor: var(--sg-cursor-interactive);
    transition:
      background var(--sg-d-transition-control),
      box-shadow var(--sg-d-transition-control);
  }
  .sg-btn:disabled {
    opacity: var(--sg-d-opacity-disabled);
    cursor: var(--sg-cursor-disabled);
  }
  .sg-btn:active:not(:disabled) { box-shadow: inset 0 0 0 var(--sg-d-border-width-emphasis) currentColor; }
  .sg-btn[aria-busy='true'] { cursor: progress; }
  .sg-btn-sm {
    padding: var(--sg-d-space-control-pad-y-sm) var(--sg-d-space-control-pad-x-sm);
    min-height: 44px;
  }
  .sg-btn-lg {
    padding: var(--sg-d-space-control-pad-y-lg) var(--sg-d-space-control-pad-x-lg);
    font-size: var(--sg-d-text-body);
    line-height: var(--sg-d-text-body-lh);
    min-height: 44px;
  }

  .sg-btn-primary { background: var(--sg-accent); color: var(--sg-accent-foreground); }
  .sg-btn-primary:hover:not(:disabled) { background: var(--sg-accent-hover); }

  .sg-btn-secondary { background: var(--sg-bg-hover); color: var(--sg-text-primary); }
  .sg-btn-secondary:hover:not(:disabled) { box-shadow: inset 0 0 0 var(--sg-d-border-width-control) var(--sg-border-strong); }

  .sg-btn-outline {
    background: transparent;
    color: var(--sg-text-primary);
    border: var(--sg-d-border-width-control) solid var(--sg-border-strong);
  }
  .sg-btn-outline:hover:not(:disabled) { background: var(--sg-bg-hover); }

  .sg-btn-ghost { background: transparent; color: var(--sg-text-secondary); }
  .sg-btn-ghost:hover:not(:disabled) { background: var(--sg-bg-hover); color: var(--sg-text-primary); }

  .sg-btn-danger { background: var(--sg-danger-fill); color: var(--sg-danger-foreground); }
  .sg-btn-danger:hover:not(:disabled) { background: var(--sg-danger-hover); }

  .sg-btn-link {
    background: transparent;
    color: var(--sg-link);
    padding: 0;
    min-height: 0;
    text-decoration: underline;
    text-underline-offset: var(--sg-space-0-5);
  }

  /* ---------- form controls ---------- */
  .sg-input,
  .sg-textarea,
  .sg-select {
    min-height: 44px;
    width: 100%;
    background: var(--sg-bg-card);
    color: var(--sg-text-primary);
    border: var(--sg-d-border-width-control) solid var(--sg-border-default);
    border-radius: var(--sg-d-radius-control);
    padding: var(--sg-d-space-control-pad-y) var(--sg-d-space-control-pad-x);
    font-family: var(--sg-d-font-body);
    font-size: var(--sg-d-text-small);
    line-height: var(--sg-d-text-small-lh);
    transition:
      border-color var(--sg-d-transition-control),
      box-shadow var(--sg-d-transition-control);
  }
  .sg-input::placeholder,
  .sg-textarea::placeholder { color: var(--sg-text-muted); }
  .sg-input:focus,
  .sg-textarea:focus,
  .sg-select:focus {
    outline: var(--sg-focus-width) solid var(--sg-focus-color);
    outline-offset: var(--sg-focus-offset);
    border-color: var(--sg-focus-color);
    box-shadow: 0 0 0 var(--sg-focus-width) color-mix(in srgb, var(--sg-focus-color) 25%, transparent);
  }
  .sg-input[aria-invalid='true'],
  .sg-textarea[aria-invalid='true'] { border-color: var(--sg-danger-text); }
  .sg-input[aria-invalid='true']:focus,
  .sg-textarea[aria-invalid='true']:focus {
    border-color: var(--sg-danger-text);
    box-shadow: 0 0 0 var(--sg-focus-width) color-mix(in srgb, var(--sg-danger-text) 25%, transparent);
  }
  :is(.sg-input, .sg-textarea, .sg-select):disabled { opacity: var(--sg-d-opacity-disabled); cursor: var(--sg-cursor-disabled); }
  
.sg-select-wrap {
  position: relative;
  display: inline-grid;
  vertical-align: middle;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: var(--sg-text-primary);
}
.sg-select-wrap > .sg-select {
  appearance: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-inline-end: calc(var(--sg-d-space-control-pad-x) + var(--sg-icon-sm) + var(--sg-d-space-inline-gap));
}
.sg-select-chevron {
  position: absolute;
  inset-inline-end: calc(var(--sg-d-border-width-control) + var(--sg-d-space-control-pad-x));
  top: 50%;
  transform: translateY(-50%);
  width: var(--sg-icon-sm);
  height: var(--sg-icon-sm);
  stroke-width: var(--sg-icon-stroke-width);
  pointer-events: none;
}
.sg-select:disabled + .sg-select-chevron { opacity: var(--sg-d-opacity-disabled); }
@media (forced-colors: active) {
  .sg-select-chevron { color: ButtonText; }
  .sg-select:disabled + .sg-select-chevron { color: GrayText; }
}

  :is(.sg-input, .sg-textarea)[readonly] { background: var(--sg-bg-hover); }
  .sg-label {
    font-size: var(--sg-d-text-small);
    line-height: var(--sg-d-text-small-lh);
    font-weight: var(--sg-d-weight-label);
    letter-spacing: var(--sg-d-tracking-label);
    color: var(--sg-text-primary);
  }
  .sg-hint {
    font-size: var(--sg-d-text-caption);
    line-height: var(--sg-d-text-caption-lh);
    color: var(--sg-text-muted);
  }
  .sg-error { color: var(--sg-danger-text); }

  /* ---------- surfaces ---------- */
  .sg-card {
    background: var(--sg-bg-card);
    border: var(--sg-d-border-width-surface) solid var(--sg-border-default);
    border-radius: var(--sg-d-radius-surface);
    box-shadow: var(--sg-d-shadow-surface);
    padding: var(--sg-d-space-surface-padding);
  }
  .sg-card-flat { border: none; box-shadow: none; }
  .sg-card-elevated { border: none; box-shadow: var(--sg-d-shadow-elevated); }
  .sg-card-selected { outline: var(--sg-d-border-width-emphasis) solid var(--sg-link); }
  /* A box nested one surface-padding inside a rounded card: concentric, never square. */
  .sg-nested { border-radius: var(--sg-d-radius-nested); }
  .sg-divider {
    border: 0;
    border-top: var(--sg-d-border-width-divider) solid var(--sg-border-subtle);
  }
  .sg-card-hover {
    transition: transform var(--sg-d-transition-control), box-shadow var(--sg-d-transition-control);
  }
  .sg-card-hover:hover {
    transform: var(--sg-d-hover-transform);
    box-shadow: var(--sg-d-shadow-elevated);
  }
  .sg-glass {
    background: var(--sg-glass-bg);
    backdrop-filter: blur(var(--sg-glass-blur));
    -webkit-backdrop-filter: blur(var(--sg-glass-blur));
    border-radius: var(--sg-d-radius-surface);
  }

  /* ---------- badges ---------- */
  .sg-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-1-5);
    border-radius: var(--sg-d-radius-pill);
    padding: var(--sg-space-0-5) var(--sg-space-2-5);
    font-size: var(--sg-d-text-caption);
    line-height: var(--sg-d-text-caption-lh);
    font-weight: var(--sg-d-weight-label);
    white-space: nowrap;
  }
  .sg-badge-neutral { background: var(--sg-bg-hover); color: var(--sg-text-primary); }
  .sg-badge-primary { background: var(--sg-accent); color: var(--sg-accent-foreground); }
  .sg-badge-success { background: var(--sg-success-surface); color: var(--sg-success-text); }
  .sg-badge-warning { background: var(--sg-warning-surface); color: var(--sg-warning-text); }
  .sg-badge-danger { background: var(--sg-danger-surface); color: var(--sg-danger-text); }
  .sg-badge-info { background: var(--sg-info-surface); color: var(--sg-info-text); }

  /* ---------- navigation & tables ---------- */
  .sg-nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-d-space-inline-gap);
    border-radius: var(--sg-d-radius-control);
    padding: var(--sg-space-1) var(--sg-space-2);
    color: var(--sg-text-secondary);
    font-size: var(--sg-d-text-small);
    font-weight: var(--sg-d-weight-label);
    transition: color var(--sg-d-transition-control), background var(--sg-d-transition-control);
  }
  .sg-nav-item:hover { color: var(--sg-text-primary); background: var(--sg-bg-hover); }
  .sg-nav-item-active {
    color: var(--sg-link);
    background: var(--sg-bg-hover);
  }

  .sg-table { width: 100%; border-collapse: collapse; font-size: var(--sg-d-text-small); line-height: var(--sg-d-text-small-lh); }
  .sg-table th {
    text-align: left;
    color: var(--sg-text-secondary);
    font-weight: var(--sg-d-weight-label);
    letter-spacing: var(--sg-d-tracking-label);
    padding: var(--sg-d-space-stack-gap) var(--sg-d-space-inline-gap);
    border-bottom: var(--sg-d-border-width-divider) solid var(--sg-border-subtle);
  }
  .sg-table td {
    padding: var(--sg-d-space-stack-gap) var(--sg-d-space-inline-gap);
    border-bottom: var(--sg-d-border-width-divider) solid var(--sg-border-subtle);
    color: var(--sg-text-primary);
  }
  .sg-table tbody tr { transition: background var(--sg-d-transition-control); }
  .sg-table tbody tr:hover { background: var(--sg-bg-hover); }

  /* ---------- typography helpers ---------- */
  .sg-display {
    font-family: var(--sg-d-font-display);
    font-size: var(--sg-d-text-display);
    line-height: var(--sg-d-text-display-lh);
    font-weight: var(--sg-d-weight-heading);
    letter-spacing: var(--sg-d-tracking-display);
    color: var(--sg-text-primary);
  }
  .sg-heading {
    font-family: var(--sg-d-font-heading);
    font-size: var(--sg-d-text-heading);
    line-height: var(--sg-d-text-heading-lh);
    font-weight: var(--sg-d-weight-heading);
    letter-spacing: var(--sg-d-tracking-heading);
    color: var(--sg-text-primary);
  }
  .sg-title {
    font-family: var(--sg-d-font-heading);
    font-size: var(--sg-d-text-title);
    line-height: var(--sg-d-text-title-lh);
    font-weight: var(--sg-d-weight-subheading);
    color: var(--sg-text-primary);
  }
  .sg-lead {
    font-size: var(--sg-d-text-lead);
    line-height: var(--sg-d-text-lead-lh);
    color: var(--sg-text-secondary);
  }
  .sg-body {
    font-size: var(--sg-d-text-body);
    line-height: var(--sg-d-text-body-lh);
    color: var(--sg-text-primary);
  }
  .sg-caption {
    font-size: var(--sg-d-text-caption);
    line-height: var(--sg-d-text-caption-lh);
    color: var(--sg-text-muted);
  }
  .sg-gradient-text {
    background: var(--sg-d-gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* ---------- layout ---------- */
  .sg-container-page { max-width: var(--sg-d-container-page); margin-inline: auto; }
  .sg-container-content { max-width: var(--sg-d-container-content); margin-inline: auto; }
  .sg-container-prose { max-width: var(--sg-d-container-prose); margin-inline: auto; }
  .sg-section { padding-block: var(--sg-section-padding); }
  .sg-stack > * + * { margin-top: var(--sg-d-space-stack-gap); }
  .sg-grid { display: grid; gap: var(--sg-d-space-grid-gap); }
}

/* ---------- focus ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--sg-focus-width) solid var(--sg-focus-color);
  outline-offset: var(--sg-focus-offset);
}

@media (width <= 768px) {
  .sg-display {
    font-size: var(--sg-d-text-heading);
    line-height: var(--sg-d-text-heading-lh);
  }
}

/* ---------- keyframes ---------- */
@keyframes sg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sg-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sg-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes sg-spin { to { transform: rotate(360deg); } }
@keyframes sg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

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

@font-face { font-family: Manrope; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }

/* Approved 2026-10-11 refinement: Manrope, lighter weights, readable leading,
   and a shared mobile-first rhythm. Aurelin supplies the palette and shapes.
   New type-role values are rem-based so reader font preferences still apply. */
:root {
  --sg-font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sg-d-text-display: var(--sg-text-4xl);
  --sg-d-text-display-lh: 2.625rem;
  --sg-d-text-heading: 1.75rem;
  --sg-d-text-heading-lh: var(--sg-text-4xl);
  --sg-d-text-title: var(--sg-text-xl);
  --sg-d-text-title-lh: var(--sg-text-2xl-lh);
  --sg-d-text-lead: var(--sg-text-lg);
  --sg-d-text-lead-lh: var(--sg-text-2xl-lh);
  --sg-d-text-body: var(--sg-text-base);
  --sg-d-text-body-lh: 1.625;
  --sg-d-text-small-lh: 1.5;
  --sg-d-text-caption-lh: 1.375rem;
  --sg-d-weight-body: var(--sg-font-weight-normal);
  --sg-d-weight-label: var(--sg-font-weight-semibold);
  --sg-d-weight-heading: var(--sg-font-weight-semibold);
  --sg-d-weight-subheading: var(--sg-font-weight-semibold);
  --sg-d-tracking-body: var(--sg-tracking-normal);
  --sg-d-tracking-label: var(--sg-tracking-normal);
  --sg-d-tracking-heading: var(--sg-tracking-tight);
  --sg-d-container-prose: 65ch;
  --sg-d-space-surface-padding: var(--sg-space-6);
  --sg-d-space-grid-gap: var(--sg-space-6);
  --sg-section-padding: var(--sg-space-12);
  --sg-focus-color: var(--sg-link);
  color-scheme: light dark;
}
html { scroll-padding-top: var(--sg-space-8); }
body { margin: 0; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
ul { padding-inline-start: var(--sg-space-6); }
a { text-underline-offset: var(--sg-space-1); }
:where(a:not(.sg-btn, .sg-nav-item, .wordmark)) { color: var(--sg-link); }
a:hover { text-decoration-thickness: var(--sg-border-width-thick); }
a.sg-btn, a.sg-nav-item, .wordmark { text-decoration: none; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
::selection { background: var(--sg-accent); color: var(--sg-accent-foreground); }
.shell { width: 100%; max-width: var(--sg-d-container-page); margin-inline: auto; padding-inline: var(--sg-space-4); }
.icon { flex: none; width: var(--sg-icon-md); height: var(--sg-icon-md); stroke-width: var(--sg-icon-stroke-width); }
.icon-lg { width: var(--sg-icon-lg); height: var(--sg-icon-lg); }
.eyebrow { display: flex; align-items: center; gap: var(--sg-space-3); font-size: var(--sg-d-text-caption); line-height: var(--sg-d-text-caption-lh); font-weight: var(--sg-d-weight-label); color: var(--sg-text-secondary); margin-block-end: var(--sg-space-4); }
.eyebrow-mark { flex: none; width: var(--sg-space-2); height: var(--sg-space-2); border-radius: var(--sg-d-radius-pill); background: var(--sg-accent); }
.sg-display { font-size: var(--sg-d-text-display); line-height: var(--sg-d-text-display-lh); font-weight: var(--sg-font-weight-bold); max-width: 20ch; text-wrap: balance; }
.sg-heading { max-width: 24ch; text-wrap: balance; }
.sg-title { letter-spacing: var(--sg-tracking-normal); text-wrap: pretty; }
.muted-heading { display: block; color: var(--sg-text-muted); }
.sg-btn-lg { font-size: var(--sg-d-text-small); line-height: var(--sg-d-text-small-lh); }
.text-link { display: inline-flex; gap: var(--sg-d-space-inline-gap); align-items: center; min-height: 44px; font-size: var(--sg-d-text-small); line-height: var(--sg-d-text-small-lh); font-weight: var(--sg-d-weight-label); }
.skip-link { position: absolute; top: var(--sg-space-3); left: var(--sg-space-4); transform: translateY(-200%); z-index: var(--sg-z-modal); }
.skip-link:focus { transform: none; }

.site-header { border-bottom: var(--sg-d-border-width-divider) solid var(--sg-border-subtle); }
.header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sg-space-4); padding-block: var(--sg-space-4); }
/* Unpadded artwork: surrounding layout gaps supply the recommended clear space. */
.wordmark { display: inline-flex; flex: none; align-items: center; width: var(--sg-space-40); max-width: 100%; min-height: 44px; color: var(--sg-text-primary); }
.wordmark picture, .wordmark img { display: block; width: 100%; height: auto; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-4); }
.sg-nav-item { min-height: 44px; font-weight: var(--sg-font-weight-medium); }
.site-nav [aria-current] { box-shadow: inset 0 0 0 var(--sg-d-border-width-emphasis) currentColor; }
.menu-toggle { margin-left: auto; }
.site-nav { grid-column: 1 / -1; width: 100%; }
.js-nav .site-nav { display: none; }
.js-nav .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; padding-block-start: var(--sg-space-4); }
.js-nav .site-nav.is-open a { justify-content: space-between; }

.hero { display: grid; gap: var(--sg-space-8); padding-block: var(--sg-section-padding); }
.hero-copy { align-self: center; min-width: 0; }
.hero-intro { max-width: 48ch; margin-block: var(--sg-space-6); text-wrap: pretty; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sg-space-4) var(--sg-space-6); }
.system-figure { align-self: center; border: var(--sg-d-border-width-divider) solid var(--sg-border-subtle); border-radius: var(--sg-d-radius-section); background: var(--sg-bg-card); padding: var(--sg-d-space-surface-padding); }
.system-drawing { width: 100%; height: auto; }
.drawing-guide { stroke: var(--sg-border-subtle); stroke-width: var(--sg-border-width-thin); stroke-dasharray: 3 6; }
.drawing-back, .drawing-side { fill: var(--sg-bg-hover); stroke: var(--sg-border-default); stroke-width: var(--sg-border-width-default); stroke-linejoin: round; }
.drawing-mid { fill: var(--sg-bg-card); stroke: var(--sg-border-default); stroke-width: var(--sg-border-width-default); stroke-linejoin: round; }
.drawing-top { fill: var(--sg-accent); stroke: var(--sg-accent-foreground); stroke-width: var(--sg-border-width-default); stroke-linejoin: round; }
.drawing-grid { stroke: var(--sg-accent-foreground); stroke-width: var(--sg-border-width-thin); opacity: var(--sg-opacity-25); }
.drawing-core { fill: var(--sg-accent-foreground); }
.drawing-dot { fill: var(--sg-link); }
.figure-caption { border-top: var(--sg-d-border-width-divider) solid var(--sg-border-subtle); padding-top: var(--sg-space-4); margin-top: var(--sg-space-4); color: var(--sg-text-secondary); text-align: center; font-size: var(--sg-d-text-caption); line-height: var(--sg-d-text-caption-lh); text-wrap: balance; }

.section-heading { display: grid; gap: var(--sg-space-4); margin-bottom: var(--sg-space-8); }
.section-intro { max-width: var(--sg-d-container-prose); color: var(--sg-text-secondary); align-self: end; text-wrap: pretty; }
.capabilities-section { padding-top: 0; }
.capability-grid { display: grid; gap: var(--sg-d-space-grid-gap); }
.capability { display: flex; flex-direction: column; gap: var(--sg-space-3); }
.capability-top { color: var(--sg-link); margin-bottom: var(--sg-space-2); }
.capability p { max-width: var(--sg-d-container-prose); color: var(--sg-text-secondary); }
.product-panel { display: grid; gap: var(--sg-space-6); background: var(--sg-bg-hover); }
.product-content { min-width: 0; color: var(--sg-text-secondary); }
.portfolio-note { margin-top: var(--sg-space-4); font-size: var(--sg-d-text-caption); line-height: var(--sg-d-text-caption-lh); }
.product-list { margin-top: var(--sg-space-6); }
.product-link { display: flex; align-items: flex-start; gap: var(--sg-space-4); justify-content: space-between; padding-block: var(--sg-space-6); color: var(--sg-text-primary); border-top: var(--sg-d-border-width-divider) solid var(--sg-border-strong); text-decoration: none; }
.product-link > div { min-width: 0; overflow-wrap: anywhere; }
.product-link p { margin-block: var(--sg-space-3); color: var(--sg-text-secondary); }
.product-link:hover h3 { text-decoration: underline; }
.product-link .text-link { color: var(--sg-link); text-decoration: underline; }
.principles { display: grid; gap: var(--sg-space-6); }
.principles article + article { border-top: var(--sg-d-border-width-divider) solid var(--sg-border-subtle); padding-top: var(--sg-space-6); }
.principles p { color: var(--sg-text-secondary); margin-top: var(--sg-space-2); }
.about-section { display: grid; gap: var(--sg-space-8); }
.about-copy { max-width: var(--sg-d-container-prose); margin-top: var(--sg-space-6); color: var(--sg-text-secondary); }
.about-copy p + p { margin-top: var(--sg-space-4); }
.contact-band-wrap { padding-bottom: var(--sg-section-padding); }
.contact-band { display: flex; align-items: flex-start; flex-direction: column; gap: var(--sg-space-8); }
.contact-band .sg-heading { max-width: none; }
.contact-band p { margin-top: var(--sg-space-3); color: var(--sg-text-secondary); }

.site-footer { border-top: var(--sg-d-border-width-divider) solid var(--sg-border-subtle); padding-top: var(--sg-space-10); }
.footer-main { display: grid; gap: var(--sg-space-8); padding-bottom: var(--sg-space-10); }
.footer-brand p { max-width: 24ch; margin-top: var(--sg-space-4); color: var(--sg-text-muted); text-wrap: balance; }
.footer-label { font-size: var(--sg-d-text-caption); line-height: var(--sg-d-text-caption-lh); font-weight: var(--sg-d-weight-label); letter-spacing: var(--sg-d-tracking-label); margin-bottom: var(--sg-space-3); }
.footer-main nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer-main a:not(.wordmark) { display: inline-flex; align-items: center; min-height: 44px; color: var(--sg-text-secondary); font-size: var(--sg-d-text-small); line-height: var(--sg-d-text-small-lh); }
.footer-main nav a { text-decoration: none; }
.footer-main nav a:hover { text-decoration: underline; }
.footer-email { overflow-wrap: anywhere; }
.footer-bottom { border-top: var(--sg-d-border-width-divider) solid var(--sg-border-subtle); display: flex; flex-wrap: wrap; gap: var(--sg-space-4); align-items: center; justify-content: space-between; padding-block: var(--sg-space-4); color: var(--sg-text-muted); font-size: var(--sg-d-text-caption); line-height: var(--sg-d-text-caption-lh); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sg-space-6); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sg-text-secondary); }
.back-top { gap: var(--sg-space-3); }

.contact-layout { display: grid; gap: var(--sg-space-10); }
.contact-intro .sg-display { max-width: 13ch; }
.contact-intro .sg-lead { margin-top: var(--sg-space-6); max-width: 40ch; }
.contact-direct { margin-top: var(--sg-space-8); }
.contact-direct .footer-label { margin-bottom: var(--sg-space-2); }
.contact-direct a { overflow-wrap: anywhere; }
.contact-note { margin-top: var(--sg-space-6); color: var(--sg-text-muted); font-size: var(--sg-d-text-caption); line-height: var(--sg-d-text-caption-lh); max-width: 48ch; }
.contact-panel { min-width: 0; }
.form-heading { margin-bottom: var(--sg-space-6); }
.form-heading p { margin-top: var(--sg-space-2); }
.form-row { display: grid; gap: var(--sg-space-6); }
.field { display: flex; flex-direction: column; gap: var(--sg-space-2); min-width: 0; }
form > .field, .form-privacy, .form-actions { margin-top: var(--sg-space-6); }
.sg-input, .sg-textarea { font-weight: var(--sg-font-weight-normal); }
.sg-input { min-height: var(--sg-space-12); }
.sg-textarea { resize: vertical; min-height: var(--sg-space-40); }
.field-error { display: flex; align-items: flex-start; gap: var(--sg-space-2); color: var(--sg-danger-text); font-size: var(--sg-d-text-caption); line-height: var(--sg-d-text-caption-lh); }
.field-error .icon { margin-top: var(--sg-space-0-5); }
.form-notice { display: flex; align-items: flex-start; gap: var(--sg-space-3); border-radius: var(--sg-d-radius-control); padding: var(--sg-space-5); margin-bottom: var(--sg-space-6); font-size: var(--sg-d-text-caption); line-height: var(--sg-d-text-caption-lh); overflow-wrap: anywhere; }
.form-notice ul { margin-block: var(--sg-space-3) 0; }
.form-notice a { color: inherit; }
.notice-error { background: var(--sg-danger-surface); color: var(--sg-danger-text); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-4); }
.submit-button { display: inline-grid; }
.submit-label, .submit-busy { grid-area: 1 / 1; align-items: center; gap: var(--sg-space-4); }
.submit-label { display: inline-flex; }
.submit-busy { visibility: hidden; }
.htmx-request .submit-label { visibility: hidden; }
.htmx-request .submit-busy { visibility: visible; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-success { padding-block: var(--sg-space-6); }
.success-icon { display: inline-flex; padding: var(--sg-space-4); border-radius: var(--sg-d-radius-pill); background: var(--sg-success-surface); color: var(--sg-success-text); margin-bottom: var(--sg-space-6); }
.form-success > p:not(.eyebrow) { margin-block: var(--sg-space-4); color: var(--sg-text-secondary); }

.legal-layout { display: grid; gap: var(--sg-space-12); }
.legal-layout header > .sg-caption { margin-top: var(--sg-space-4); }
.legal-toc { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--sg-space-6); }
.legal-toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--sg-d-text-small); line-height: var(--sg-d-text-small-lh); }
.legal-prose { max-width: var(--sg-d-container-prose); }
.legal-prose p { overflow-wrap: anywhere; }
.legal-prose p + p, .legal-prose h2 + p { margin-top: var(--sg-space-4); }
.legal-prose section { margin-top: var(--sg-space-10); }
.legal-prose p { color: var(--sg-text-secondary); }
.notfound { min-height: 60vh; }
.notfound .sg-lead { max-width: 48ch; margin-block: var(--sg-space-6); }

@media (min-width: 640px) {
  .wordmark { width: var(--sg-space-48); }
  .capability-grid, .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  :root {
    --sg-d-text-heading: 2rem;
    --sg-d-text-heading-lh: 2.5rem;
    --sg-d-text-title: 1.375rem;
    --sg-d-text-title-lh: 1.875rem;
    --sg-d-text-lead: var(--sg-text-xl);
    --sg-d-text-lead-lh: 1.875rem;
    --sg-d-space-surface-padding: var(--sg-space-8);
    --sg-d-space-grid-gap: var(--sg-space-8);
    --sg-section-padding: var(--sg-space-16);
  }
  .shell { padding-inline: var(--sg-space-8); }
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .section-heading, .product-panel, .about-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sg-space-8); }
  .footer-main { grid-template-columns: 1.5fr 1fr 1.5fr; }
  .footer-brand { grid-column: auto; }
}
@media (min-width: 1024px) {
  :root {
    --sg-d-text-display: var(--sg-text-5xl);
    --sg-d-text-display-lh: 3.5rem;
    --sg-section-padding: var(--sg-space-20);
  }
  .header-inner { display: flex; justify-content: space-between; }
  .js-nav .menu-toggle { display: none; }
  .site-nav, .js-nav .site-nav, .js-nav .site-nav.is-open { display: flex; width: auto; flex-direction: row; align-items: center; padding-block: 0; }
  .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sg-space-16); }
  .section-heading, .product-panel, .about-section { gap: var(--sg-space-16); }
  .contact-band { flex-direction: row; align-items: center; justify-content: space-between; }
  .contact-band > a { flex-shrink: 0; }
  .contact-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sg-space-16); align-items: start; }
  .legal-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--sg-space-16); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) { .sg-btn, .sg-card { border: var(--sg-d-border-width-control) solid ButtonText; } }