/* onest-latin-400-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./fonts/onest-latin-400-normal.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;
}
/* onest-latin-ext-400-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./fonts/onest-latin-ext-400-normal.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;
}
/* onest-latin-600-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./fonts/onest-latin-600-normal.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;
}
/* onest-latin-ext-600-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./fonts/onest-latin-ext-600-normal.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;
}
/* onest-latin-700-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('./fonts/onest-latin-700-normal.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;
}
/* onest-latin-ext-700-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('./fonts/onest-latin-ext-700-normal.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;
}
/* onest-latin-800-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('./fonts/onest-latin-800-normal.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;
}
/* onest-latin-ext-800-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('./fonts/onest-latin-ext-800-normal.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;
}

/* GENERATED by scripts/design/generate.mjs from design/tokens.json and design/icons.json. Do not edit; run pnpm design:generate. */
/* Colour mode: follows the system; [data-mode="light" | "dark"] forces a mode on a subtree. */
:root,
[data-mode='light'] {
  color-scheme: light;
  --tr-background: #f2f3f5;
  --tr-surface: #ffffff;
  --tr-surface-raised: #ffffff;
  --tr-surface-sunken: #e9ebef;
  --tr-text-primary: #16181d;
  --tr-text-secondary: #565d69;
  --tr-text-disabled: #8f96a2;
  --tr-border-subtle: #dfe2e7;
  --tr-border: #6f7682;
  --tr-border-strong: #414752;
  --tr-primary: #0b6e79;
  --tr-primary-hover: #095a63;
  --tr-primary-pressed: #08474f;
  --tr-on-primary: #ffffff;
  --tr-primary-subtle: #e6f4f5;
  --tr-on-primary-subtle: #08474f;
  --tr-focus-ring: #095a63;
  --tr-action: #16181d;
  --tr-action-hover: #2c313a;
  --tr-action-pressed: #414752;
  --tr-on-action: #ffffff;
  --tr-danger: #b3261e;
  --tr-danger-hover: #8f1f18;
  --tr-on-danger: #ffffff;
  --tr-danger-subtle: #fcecea;
  --tr-on-danger-subtle: #8f1f18;
  --tr-warning: #e8a530;
  --tr-on-warning: #241800;
  --tr-warning-subtle: #fdf2dc;
  --tr-on-warning-subtle: #6e4700;
  --tr-warning-text: #8a5a00;
  --tr-success: #2d6e45;
  --tr-on-success: #ffffff;
  --tr-success-subtle: #e6f3ea;
  --tr-on-success-subtle: #225636;
  --tr-info: #1c6391;
  --tr-on-info: #ffffff;
  --tr-info-subtle: #e2eff8;
  --tr-on-info-subtle: #154a6d;
  --tr-env-dev: #1b6b5c;
  --tr-on-env-dev: #ffffff;
  --tr-env-test: #6b3fa0;
  --tr-on-env-test: #ffffff;
  --tr-env-prod: #b3261e;
  --tr-on-env-prod: #ffffff;
  --tr-scrim: #16181d;
  --tr-elevation-0: none;
  --tr-elevation-1: 0 1px 2px rgb(22 24 29 / 0.04), 0 6px 20px rgb(22 24 29 / 0.06);
  --tr-elevation-2: 0 10px 30px rgb(22 24 29 / 0.12);
  --tr-elevation-3: 0 24px 60px rgb(22 24 29 / 0.24);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode='light']) {
    color-scheme: dark;
    --tr-background: #101318;
    --tr-surface: #1a1e26;
    --tr-surface-raised: #232832;
    --tr-surface-sunken: #2c313a;
    --tr-text-primary: #f2f3f5;
    --tr-text-secondary: #b3b9c3;
    --tr-text-disabled: #565d69;
    --tr-border-subtle: #2c313a;
    --tr-border: #6f7682;
    --tr-border-strong: #b3b9c3;
    --tr-primary: #74bcc3;
    --tr-primary-hover: #a6d6da;
    --tr-primary-pressed: #cfe9eb;
    --tr-on-primary: #062328;
    --tr-primary-subtle: #0a343a;
    --tr-on-primary-subtle: #cfe9eb;
    --tr-focus-ring: #a6d6da;
    --tr-action: #f2f3f5;
    --tr-action-hover: #dfe2e7;
    --tr-action-pressed: #d3d7de;
    --tr-on-action: #16181d;
    --tr-danger: #ff8a7d;
    --tr-danger-hover: #f7d3ce;
    --tr-on-danger: #3a1512;
    --tr-danger-subtle: #3a1512;
    --tr-on-danger-subtle: #f7d3ce;
    --tr-warning: #f5c46a;
    --tr-on-warning: #241800;
    --tr-warning-subtle: #382709;
    --tr-on-warning-subtle: #fae2b3;
    --tr-warning-text: #f5c46a;
    --tr-success: #7fd19b;
    --tr-on-success: #12301e;
    --tr-success-subtle: #12301e;
    --tr-on-success-subtle: #c8e8d2;
    --tr-info: #8cc6ef;
    --tr-on-info: #10283a;
    --tr-info-subtle: #10283a;
    --tr-on-info-subtle: #c3def1;
    --tr-env-dev: #6fd1bd;
    --tr-on-env-dev: #0c2a24;
    --tr-env-test: #c3a6ec;
    --tr-on-env-test: #2a1942;
    --tr-env-prod: #ff8a7d;
    --tr-on-env-prod: #3a1512;
    --tr-scrim: #0a0c10;
    --tr-elevation-0: none;
    --tr-elevation-1: 0 0 0 1px rgb(255 255 255 / 0.06);
    --tr-elevation-2: 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 30px rgb(0 0 0 / 0.5);
    --tr-elevation-3: 0 0 0 1px rgb(255 255 255 / 0.1), 0 24px 60px rgb(0 0 0 / 0.6);
  }
}
[data-mode='dark'] {
  color-scheme: dark;
  --tr-background: #101318;
  --tr-surface: #1a1e26;
  --tr-surface-raised: #232832;
  --tr-surface-sunken: #2c313a;
  --tr-text-primary: #f2f3f5;
  --tr-text-secondary: #b3b9c3;
  --tr-text-disabled: #565d69;
  --tr-border-subtle: #2c313a;
  --tr-border: #6f7682;
  --tr-border-strong: #b3b9c3;
  --tr-primary: #74bcc3;
  --tr-primary-hover: #a6d6da;
  --tr-primary-pressed: #cfe9eb;
  --tr-on-primary: #062328;
  --tr-primary-subtle: #0a343a;
  --tr-on-primary-subtle: #cfe9eb;
  --tr-focus-ring: #a6d6da;
  --tr-action: #f2f3f5;
  --tr-action-hover: #dfe2e7;
  --tr-action-pressed: #d3d7de;
  --tr-on-action: #16181d;
  --tr-danger: #ff8a7d;
  --tr-danger-hover: #f7d3ce;
  --tr-on-danger: #3a1512;
  --tr-danger-subtle: #3a1512;
  --tr-on-danger-subtle: #f7d3ce;
  --tr-warning: #f5c46a;
  --tr-on-warning: #241800;
  --tr-warning-subtle: #382709;
  --tr-on-warning-subtle: #fae2b3;
  --tr-warning-text: #f5c46a;
  --tr-success: #7fd19b;
  --tr-on-success: #12301e;
  --tr-success-subtle: #12301e;
  --tr-on-success-subtle: #c8e8d2;
  --tr-info: #8cc6ef;
  --tr-on-info: #10283a;
  --tr-info-subtle: #10283a;
  --tr-on-info-subtle: #c3def1;
  --tr-env-dev: #6fd1bd;
  --tr-on-env-dev: #0c2a24;
  --tr-env-test: #c3a6ec;
  --tr-on-env-test: #2a1942;
  --tr-env-prod: #ff8a7d;
  --tr-on-env-prod: #3a1512;
  --tr-scrim: #0a0c10;
  --tr-elevation-0: none;
  --tr-elevation-1: 0 0 0 1px rgb(255 255 255 / 0.06);
  --tr-elevation-2: 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 30px rgb(0 0 0 / 0.5);
  --tr-elevation-3: 0 0 0 1px rgb(255 255 255 / 0.1), 0 24px 60px rgb(0 0 0 / 0.6);
}
:root {
  --tr-font-heading: Onest, system-ui, sans-serif;
  --tr-font-body: Onest, system-ui, sans-serif;
  --tr-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --tr-type-display: 800 2.75rem/1.08 var(--tr-font-heading);
  --tr-type-display-tracking: -0.025em;
  --tr-type-headline-lg: 700 2rem/1.12 var(--tr-font-heading);
  --tr-type-headline-lg-tracking: -0.02em;
  --tr-type-headline-md: 700 1.625rem/1.18 var(--tr-font-heading);
  --tr-type-headline-md-tracking: -0.015em;
  --tr-type-title-lg: 700 1.375rem/1.25 var(--tr-font-heading);
  --tr-type-title-lg-tracking: -0.01em;
  --tr-type-title-md: 600 1.125rem/1.3 var(--tr-font-body);
  --tr-type-title-md-tracking: -0.005em;
  --tr-type-body-lg: 400 1.0625rem/1.5 var(--tr-font-body);
  --tr-type-body-lg-tracking: 0;
  --tr-type-body-md: 400 0.9375rem/1.5 var(--tr-font-body);
  --tr-type-body-md-tracking: 0;
  --tr-type-label-lg: 600 0.9375rem/1.25 var(--tr-font-body);
  --tr-type-label-lg-tracking: 0;
  --tr-type-label-md: 600 0.8125rem/1.25 var(--tr-font-body);
  --tr-type-label-md-tracking: 0.005em;
  --tr-type-body-sm: 400 0.8125rem/1.45 var(--tr-font-body);
  --tr-type-body-sm-tracking: 0;
  --tr-type-caption: 400 0.75rem/1.35 var(--tr-font-body);
  --tr-type-caption-tracking: 0.01em;
  --tr-type-overline: 500 0.75rem/1.3 var(--tr-font-mono);
  --tr-type-overline-tracking: 0.12em;
  --tr-space-0: 0rem;
  --tr-space-1: 0.25rem;
  --tr-space-2: 0.5rem;
  --tr-space-3: 0.75rem;
  --tr-space-4: 1rem;
  --tr-space-5: 1.25rem;
  --tr-space-6: 1.5rem;
  --tr-space-8: 2rem;
  --tr-space-10: 2.5rem;
  --tr-space-12: 3rem;
  --tr-space-16: 4rem;
  --tr-space-20: 5rem;
  --tr-space-0-5: 0.125rem;
  --tr-radius-none: 0px;
  --tr-radius-xs: 4px;
  --tr-radius-sm: 8px;
  --tr-radius-md: 12px;
  --tr-radius-lg: 16px;
  --tr-radius-xl: 24px;
  --tr-radius-full: 9999px;
  --tr-radius-control: 12px;
  --tr-radius-card: 24px;
  --tr-border-hairline: 1px;
  --tr-border-focus: 2px;
  --tr-border-focus-offset: 2px;
  --tr-icon-xs: 14px;
  --tr-icon-sm: 16px;
  --tr-icon-md: 20px;
  --tr-icon-lg: 24px;
  --tr-icon-xl: 32px;
  --tr-icon-hero: 48px;
  --tr-size-touch-web: 44px;
  --tr-size-touch-ios: 44px;
  --tr-size-touch-android: 48px;
  --tr-size-control-sm: 32px;
  --tr-size-control-md: 44px;
  --tr-size-control-lg: 52px;
  --tr-duration-instant: 0ms;
  --tr-duration-fast: 120ms;
  --tr-duration-base: 200ms;
  --tr-duration-slow: 320ms;
  --tr-duration-deliberate: 480ms;
  --tr-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --tr-easing-enter: cubic-bezier(0, 0, 0, 1);
  --tr-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --tr-easing-linear: cubic-bezier(0, 0, 1, 1);
  --tr-status-pending-guest-confirmation-bg: var(--tr-info-subtle);
  --tr-status-pending-guest-confirmation-fg: var(--tr-on-info-subtle);
  --tr-status-pending-guest-confirmation-border: 1px dashed var(--tr-info);
  --tr-status-pending-business-approval-bg: var(--tr-warning);
  --tr-status-pending-business-approval-fg: var(--tr-on-warning);
  --tr-status-pending-business-approval-border: 1px solid transparent;
  --tr-status-confirmed-bg: var(--tr-success-subtle);
  --tr-status-confirmed-fg: var(--tr-on-success-subtle);
  --tr-status-confirmed-border: 1px solid transparent;
  --tr-status-rejected-bg: var(--tr-danger-subtle);
  --tr-status-rejected-fg: var(--tr-on-danger-subtle);
  --tr-status-rejected-border: 1px solid transparent;
  --tr-status-cancelled-bg: var(--tr-surface-sunken);
  --tr-status-cancelled-fg: var(--tr-text-secondary);
  --tr-status-cancelled-border: 1px solid transparent;
  --tr-status-expired-bg: var(--tr-surface);
  --tr-status-expired-fg: var(--tr-text-secondary);
  --tr-status-expired-border: 1px dashed var(--tr-border);
  --tr-status-completed-bg: var(--tr-primary-subtle);
  --tr-status-completed-fg: var(--tr-on-primary-subtle);
  --tr-status-completed-border: 1px solid transparent;
  --tr-status-no-show-bg: var(--tr-danger-subtle);
  --tr-status-no-show-fg: var(--tr-on-danger-subtle);
  --tr-status-no-show-border: 1px solid transparent;
  --tr-status-redacted-bg: var(--tr-surface-sunken);
  --tr-status-redacted-fg: var(--tr-text-secondary);
  --tr-status-redacted-border: 1px dashed var(--tr-border);
}
/* Calendar blocks take their colours from the booking status. */
.tr-block[data-status='pending-guest-confirmation'] {
  --tr-block-bg: var(--tr-info-subtle);
  --tr-block-fg: var(--tr-on-info-subtle);
  --tr-block-border: var(--tr-info);
  border-left-style: dashed;
}
.tr-block[data-status='pending-business-approval'] {
  --tr-block-bg: var(--tr-warning);
  --tr-block-fg: var(--tr-on-warning);
  --tr-block-border: var(--tr-on-warning);
}
.tr-block[data-status='confirmed'] {
  --tr-block-bg: var(--tr-success-subtle);
  --tr-block-fg: var(--tr-on-success-subtle);
  --tr-block-border: var(--tr-success);
}
.tr-block[data-status='rejected'] {
  --tr-block-bg: var(--tr-danger-subtle);
  --tr-block-fg: var(--tr-on-danger-subtle);
  --tr-block-border: var(--tr-danger);
}
.tr-block[data-status='cancelled'] {
  --tr-block-bg: var(--tr-surface-sunken);
  --tr-block-fg: var(--tr-text-secondary);
  --tr-block-border: var(--tr-border);
}
.tr-block[data-status='expired'] {
  --tr-block-bg: var(--tr-surface);
  --tr-block-fg: var(--tr-text-secondary);
  --tr-block-border: var(--tr-border);
  border-left-style: dashed;
}
.tr-block[data-status='completed'] {
  --tr-block-bg: var(--tr-primary-subtle);
  --tr-block-fg: var(--tr-on-primary-subtle);
  --tr-block-border: var(--tr-primary);
}
.tr-block[data-status='no-show'] {
  --tr-block-bg: var(--tr-danger-subtle);
  --tr-block-fg: var(--tr-on-danger-subtle);
  --tr-block-border: var(--tr-danger);
}
.tr-block[data-status='redacted'] {
  --tr-block-bg: var(--tr-surface-sunken);
  --tr-block-fg: var(--tr-text-secondary);
  --tr-block-border: var(--tr-border);
  border-left-style: dashed;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --tr-duration-instant: 0ms;
    --tr-duration-base: 0ms;
    --tr-duration-slow: 0ms;
    --tr-duration-deliberate: 0ms;
  }
}

/* Base layer: reset, type, focus and a few layout utilities. Values come from the tokens only. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Keeps focused elements clear of the sticky top bar. */
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--tr-background);
  color: var(--tr-text-primary);
  font: var(--tr-type-body-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:lang(de) {
  hyphens: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  text-wrap: balance;
}
h1 {
  font: var(--tr-type-headline-lg);
  letter-spacing: var(--tr-type-headline-lg-tracking);
}
h2 {
  font: var(--tr-type-headline-md);
  letter-spacing: var(--tr-type-headline-md-tracking);
}
h3 {
  font: var(--tr-type-title-lg);
  letter-spacing: var(--tr-type-title-lg-tracking);
}
h4 {
  font: var(--tr-type-title-md);
}
@media (min-width: 840px) {
  h1 {
    font: var(--tr-type-display);
    letter-spacing: var(--tr-type-display-tracking);
  }
}
p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--tr-primary);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--tr-primary-hover);
}

code,
kbd,
samp {
  font-family: var(--tr-font-mono);
  font-size: 0.875em;
}

tr-icon {
  display: inline-flex;
  flex: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus {
  outline: none;
}
:focus-visible {
  outline: var(--tr-border-focus) solid var(--tr-focus-ring);
  outline-offset: var(--tr-border-focus-offset);
}

::selection {
  background: color-mix(in srgb, var(--tr-primary) 24%, transparent);
}

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

/* ---- type utilities ---- */
.tr-type-display {
  font: var(--tr-type-display);
  letter-spacing: var(--tr-type-display-tracking);
}
.tr-type-headline-lg {
  font: var(--tr-type-headline-lg);
  letter-spacing: var(--tr-type-headline-lg-tracking);
}
.tr-type-headline-md {
  font: var(--tr-type-headline-md);
}
.tr-type-title-lg {
  font: var(--tr-type-title-lg);
}
.tr-type-title-md {
  font: var(--tr-type-title-md);
}
.tr-type-body-lg {
  font: var(--tr-type-body-lg);
}
.tr-type-body-sm {
  font: var(--tr-type-body-sm);
}
.tr-type-caption {
  font: var(--tr-type-caption);
}
.tr-overline {
  font: var(--tr-type-overline);
  letter-spacing: var(--tr-type-overline-tracking);
  text-transform: uppercase;
  color: var(--tr-text-secondary);
}
.tr-overline--accent {
  color: var(--tr-primary);
}
.tr-muted {
  color: var(--tr-text-secondary);
}
.tr-tabular {
  font-variant-numeric: tabular-nums;
}
.tr-mono {
  font-family: var(--tr-font-mono);
}
.tr-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Text that collapses to its icon on phones but stays the accessible name. */
@media (max-width: 599.98px) {
  .tr-label-wide {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---- layout utilities ---- */
/* Page container: margins and max content width per breakpoint (Foundations 04). */
.tr-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--tr-space-4);
}
@media (min-width: 600px) {
  .tr-container {
    max-width: calc(720px + 2 * var(--tr-space-6));
    padding-inline: var(--tr-space-6);
  }
}
@media (min-width: 840px) {
  .tr-container {
    max-width: calc(1040px + 2 * var(--tr-space-8));
    padding-inline: var(--tr-space-8);
  }
}
@media (min-width: 1200px) {
  .tr-container {
    max-width: calc(1200px + 2 * var(--tr-space-10));
    padding-inline: var(--tr-space-10);
  }
}
@media (min-width: 1600px) {
  .tr-container {
    max-width: calc(1440px + 2 * var(--tr-space-12));
    padding-inline: var(--tr-space-12);
  }
}
.tr-container--narrow {
  max-width: calc(28rem + 2 * var(--tr-space-4));
}
@media (min-width: 600px) {
  .tr-container--narrow {
    max-width: calc(28rem + 2 * var(--tr-space-6));
  }
}

/* In-shell reading column: keeps the page's left edge, caps the measure. */
.tr-container--column > * {
  max-width: 44rem;
}

.tr-stack {
  display: grid;
  gap: var(--tr-stack-gap, var(--tr-space-4));
  align-content: start;
  min-width: 0;
}
.tr-stack--2 {
  --tr-stack-gap: var(--tr-space-2);
}
.tr-stack--3 {
  --tr-stack-gap: var(--tr-space-3);
}
.tr-stack--6 {
  --tr-stack-gap: var(--tr-space-6);
}
.tr-stack--8 {
  --tr-stack-gap: var(--tr-space-8);
}
.tr-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tr-cluster-gap, var(--tr-space-3));
}
.tr-cluster--end {
  justify-content: flex-end;
}
.tr-cluster--between {
  justify-content: space-between;
}

/* Temporary marketing variants. The app's committed semantic tokens own every visual role. */
html {
  scroll-behavior: smooth;
}
body {
  overflow-wrap: anywhere;
}
.landing-wrap {
  max-width: calc(1200px + 2 * var(--tr-space-10));
  margin-inline: auto;
  padding-inline: var(--tr-space-6);
}
.landing-icon {
  width: var(--tr-icon-lg);
  height: var(--tr-icon-lg);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.landing-skip {
  position: absolute;
  top: var(--tr-space-3);
  left: var(--tr-space-4);
  z-index: 10;
  padding: var(--tr-space-4);
  background: var(--tr-surface);
  border-radius: var(--tr-radius-control);
  transform: translateY(-200%);
}
.landing-skip:focus {
  transform: none;
}
.landing-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tr-space-6);
  padding-block: var(--tr-space-6);
  border-bottom: var(--tr-border-hairline) solid var(--tr-border-subtle);
}
.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tr-space-3);
  color: var(--tr-text-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.landing-brand img {
  width: var(--tr-size-touch-web);
  height: var(--tr-size-touch-web);
  border-radius: var(--tr-radius-control);
}
.landing-brand__name {
  font: var(--tr-type-headline-md);
  letter-spacing: var(--tr-type-headline-md-tracking);
}
.landing-brand__sub {
  font: var(--tr-type-body-sm);
  color: var(--tr-text-secondary);
  display: block;
  margin-top: var(--tr-space-0-5);
}
.landing-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tr-space-2) var(--tr-space-6);
}
.landing-nav a,
.landing-footer a {
  display: inline-flex;
  align-items: center;
  gap: var(--tr-space-2);
  min-height: var(--tr-size-touch-web);
  font-weight: 600;
  text-decoration: none;
}
.landing-nav__section {
  color: var(--tr-text-secondary);
}
.landing-nav .landing-nav__audience {
  color: var(--tr-text-primary);
  background: var(--tr-surface);
  padding: var(--tr-space-3) var(--tr-space-5);
  border-radius: var(--tr-radius-full);
}
.landing-nav__audience:hover {
  box-shadow: var(--tr-elevation-1);
}
.landing-nav__section {
  position: relative;
}
.landing-nav__section::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: var(--tr-space-1);
  height: var(--tr-border-hairline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}
.landing-nav__section:hover::after,
.landing-nav__section:focus-visible::after {
  transform: scaleX(1);
}
.landing-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: var(--tr-space-16);
  padding-block: var(--tr-space-20) var(--tr-space-16);
}
.landing-hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--tr-space-6);
}
.landing-hero h1 {
  font: var(--tr-type-display);
  letter-spacing: var(--tr-type-display-tracking);
  text-wrap: initial;
}
.landing-hero h1 span {
  display: block;
}
.landing-hero__lead {
  font: var(--tr-type-body-lg);
  color: var(--tr-text-secondary);
  max-width: 48ch;
}
.landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tr-space-4) var(--tr-space-6);
}
.landing-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--tr-space-3);
  min-height: var(--tr-size-control-lg);
  border-radius: var(--tr-radius-full);
  padding: var(--tr-space-4) var(--tr-space-6);
  font: var(--tr-type-label-lg);
  text-decoration: none;
}
.landing-button--primary {
  background: var(--tr-action);
  color: var(--tr-on-action);
}
.landing-button--primary:hover {
  background: var(--tr-action-hover);
  color: var(--tr-on-action);
}
.landing-text-link {
  display: inline-flex;
  gap: var(--tr-space-2);
  align-items: center;
  min-height: var(--tr-size-touch-web);
  font-weight: 600;
  text-decoration: none;
}
.landing-launch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tr-space-2);
  color: var(--tr-text-secondary);
  font: var(--tr-type-body-sm);
}
.landing-launch strong {
  color: var(--tr-text-primary);
  font-weight: 600;
}
.landing-launch .landing-icon {
  width: var(--tr-icon-sm);
  height: var(--tr-icon-sm);
}
.landing-art {
  margin: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  background: var(--tr-surface);
  border-radius: var(--tr-radius-card);
  padding: var(--tr-space-6) var(--tr-space-8) var(--tr-space-8);
  box-shadow: var(--tr-elevation-1);
}
.landing-art img {
  width: 100%;
  max-width: calc(var(--tr-space-20) * 4);
  height: auto;
  transform-origin: center 75%;
}
.landing-art figcaption {
  display: grid;
  gap: var(--tr-space-2);
  text-align: center;
  font: var(--tr-type-body-sm);
  color: var(--tr-text-secondary);
}
.landing-art figcaption strong {
  font: var(--tr-type-title-lg);
  color: var(--tr-text-primary);
}
.landing-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: var(--tr-space-6);
  border-block: var(--tr-border-hairline) solid var(--tr-border-subtle);
  list-style: none;
  padding-inline: 0;
  margin: 0;
  gap: var(--tr-space-6);
}
.landing-principles li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tr-space-3);
  font-weight: 600;
}
.landing-principles .landing-icon {
  color: var(--tr-text-secondary);
}
.landing-section {
  padding-top: var(--tr-space-20);
  scroll-margin-top: var(--tr-space-8);
}
.landing-section__intro {
  display: grid;
  gap: var(--tr-space-4);
  max-width: 65ch;
  margin-bottom: var(--tr-space-8);
}
.landing-section__intro h2,
.landing-closing h2 {
  font: var(--tr-type-headline-lg);
  letter-spacing: var(--tr-type-headline-lg-tracking);
}
.landing-section__intro p {
  font: var(--tr-type-body-lg);
  color: var(--tr-text-secondary);
}
.landing-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tr-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.landing-step {
  display: grid;
  align-content: start;
  gap: var(--tr-space-4);
  padding: var(--tr-space-6);
  background: var(--tr-surface);
  border-radius: var(--tr-radius-card);
}
.landing-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tr-size-touch-web);
  height: var(--tr-size-touch-web);
  border-radius: var(--tr-radius-full);
  background: var(--tr-surface-sunken);
  font: var(--tr-type-title-md);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--tr-space-2);
}
.landing-step h3 {
  font: var(--tr-type-title-md);
}
.landing-step p,
.landing-feature p,
.landing-device p {
  color: var(--tr-text-secondary);
}
.landing-note {
  display: flex;
  align-items: flex-start;
  gap: var(--tr-space-3);
  padding-top: var(--tr-space-5);
  color: var(--tr-text-secondary);
  font: var(--tr-type-body-sm);
  max-width: 90ch;
}
.landing-note .landing-icon {
  width: var(--tr-icon-md);
  height: var(--tr-icon-md);
}
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tr-space-6);
}
.landing-feature {
  display: grid;
  align-content: start;
  gap: var(--tr-space-4);
  padding: var(--tr-space-8);
  border-radius: var(--tr-radius-card);
  background: var(--tr-surface);
}
.landing-feature > .landing-icon {
  width: var(--tr-icon-xl);
  height: var(--tr-icon-xl);
  margin-bottom: var(--tr-space-3);
}
.landing-feature h3 {
  font: var(--tr-type-title-lg);
}
.landing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tr-space-16);
  align-items: start;
}
.landing-split .landing-section__intro {
  position: sticky;
  top: var(--tr-space-8);
}
.landing-panel {
  background: var(--tr-surface);
  border-radius: var(--tr-radius-card);
  padding: var(--tr-space-8);
}
.landing-checklist {
  padding: 0;
  margin: 0;
  list-style: none;
}
.landing-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--tr-space-4);
  padding-block: var(--tr-space-5);
  border-bottom: var(--tr-border-hairline) dashed var(--tr-border-subtle);
}
.landing-checklist li:first-child {
  padding-top: 0;
}
.landing-checklist li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.landing-checklist .landing-icon {
  color: var(--tr-primary);
}
.landing-checklist strong {
  display: block;
  margin-bottom: var(--tr-space-2);
  font: var(--tr-type-title-md);
}
.landing-checklist p {
  color: var(--tr-text-secondary);
}
.landing-devices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tr-space-6);
}
.landing-device {
  display: grid;
  align-content: start;
  gap: var(--tr-space-5);
  background: var(--tr-surface);
  border-radius: var(--tr-radius-card);
  padding: var(--tr-space-8);
}
.landing-device__heading {
  display: flex;
  align-items: center;
  gap: var(--tr-space-4);
}
.landing-device__heading .landing-icon {
  width: var(--tr-icon-xl);
  height: var(--tr-icon-xl);
}
.landing-device h3 {
  font: var(--tr-type-headline-md);
}
.landing-device ul {
  padding-left: var(--tr-space-5);
  margin: 0;
  display: grid;
  gap: var(--tr-space-3);
}
.landing-device__availability {
  margin-top: var(--tr-space-3);
  font: var(--tr-type-body-sm);
}
.landing-faq {
  background: var(--tr-surface);
  border-radius: var(--tr-radius-card);
  padding: var(--tr-space-2) var(--tr-space-8);
}
.landing-faq details {
  border-bottom: var(--tr-border-hairline) dashed var(--tr-border-subtle);
}
.landing-faq details:last-child {
  border-bottom: 0;
}
.landing-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tr-space-4);
  padding-block: var(--tr-space-6);
  font: var(--tr-type-title-md);
  cursor: pointer;
  list-style: none;
}
.landing-faq summary::-webkit-details-marker {
  display: none;
}
.landing-faq details[open] summary .landing-icon {
  transform: rotate(180deg);
}
.landing-faq details p {
  padding-bottom: var(--tr-space-6);
  color: var(--tr-text-secondary);
}
.landing-closing {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--tr-space-10);
  align-items: center;
  background: var(--tr-surface);
  border-radius: var(--tr-radius-card);
  padding: var(--tr-space-12);
  margin-block: var(--tr-space-20) var(--tr-space-12);
}
.landing-closing > div {
  display: grid;
  justify-items: start;
  gap: var(--tr-space-4);
}
.landing-closing p {
  color: var(--tr-text-secondary);
  max-width: 48ch;
}
.landing-closing__status {
  justify-self: end;
  padding-left: var(--tr-space-10);
  border-left: var(--tr-border-hairline) dashed var(--tr-border-subtle);
}
.landing-closing__status strong {
  font: var(--tr-type-title-lg);
}
.landing-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tr-space-4);
  padding-block: var(--tr-space-6) var(--tr-space-8);
  border-top: var(--tr-border-hairline) solid var(--tr-border-subtle);
  color: var(--tr-text-secondary);
  font: var(--tr-type-body-sm);
}
.landing-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tr-space-6);
}
@media (min-width: 1200px) {
  .landing-wrap {
    padding-inline: var(--tr-space-10);
  }
}
@media (max-width: 1199px) {
  .landing-hero {
    gap: var(--tr-space-8);
    padding-block: var(--tr-space-12);
  }
  .landing-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-split {
    gap: var(--tr-space-8);
  }
}
@media (max-width: 839px) {
  .landing-nav__section {
    display: none !important;
  }
  .landing-hero {
    grid-template-columns: 1fr;
    gap: var(--tr-space-8);
  }
  .landing-hero__copy {
    max-width: 60ch;
  }
  .landing-art {
    grid-template-columns: 1fr 1fr;
    padding: var(--tr-space-6);
  }
  .landing-art img {
    max-width: calc(var(--tr-space-20) * 3);
  }
  .landing-art figcaption {
    text-align: left;
  }
  .landing-feature-grid {
    grid-template-columns: 1fr;
  }
  .landing-feature {
    grid-template-columns: auto 1fr;
    gap: var(--tr-space-3) var(--tr-space-5);
  }
  .landing-feature > .landing-icon {
    grid-row: 1 / 3;
  }
  .landing-feature p {
    grid-column: 2;
  }
  .landing-split {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .landing-split .landing-section__intro {
    position: static;
  }
  .landing-closing {
    padding: var(--tr-space-8);
    gap: var(--tr-space-8);
  }
}
@media (max-width: 599px) {
  .landing-wrap {
    padding-inline: var(--tr-space-4);
  }
  .landing-header {
    gap: var(--tr-space-3);
    padding-block: var(--tr-space-4);
  }
  .landing-brand__name {
    font: var(--tr-type-title-lg);
  }
  .landing-nav .landing-nav__audience {
    font: var(--tr-type-label-md);
    padding: var(--tr-space-3);
    gap: var(--tr-space-2);
  }
  .landing-nav__audience .landing-icon {
    width: var(--tr-icon-sm);
    height: var(--tr-icon-sm);
  }
  .landing-hero {
    padding-top: var(--tr-space-10);
  }
  .landing-hero h1 {
    font: var(--tr-type-headline-lg);
  }
  .landing-art {
    padding: var(--tr-space-4);
    gap: var(--tr-space-2);
  }
  .landing-art figcaption strong {
    font: var(--tr-type-title-md);
  }
  .landing-principles {
    grid-template-columns: 1fr;
    gap: var(--tr-space-4);
  }
  .landing-principles li {
    justify-content: start;
  }
  .landing-section {
    padding-top: var(--tr-space-12);
  }
  .landing-section__intro h2,
  .landing-closing h2 {
    font: var(--tr-type-headline-md);
  }
  .landing-steps,
  .landing-devices {
    grid-template-columns: 1fr;
    gap: var(--tr-space-4);
  }
  .landing-step {
    grid-template-columns: auto 1fr;
    gap: var(--tr-space-2) var(--tr-space-4);
  }
  .landing-step__number {
    grid-row: 1 / 3;
  }
  .landing-step p {
    grid-column: 2;
  }
  .landing-panel,
  .landing-device,
  .landing-feature {
    padding: var(--tr-space-6);
  }
  .landing-faq {
    padding-inline: var(--tr-space-6);
  }
  .landing-closing {
    grid-template-columns: 1fr;
    padding: var(--tr-space-6);
    margin-top: var(--tr-space-12);
  }
  .landing-closing__status {
    padding: var(--tr-space-6) 0 0;
    justify-self: stretch;
    border-left: 0;
    border-top: var(--tr-border-hairline) dashed var(--tr-border-subtle);
  }
}
/* Pointer feedback is short and reversible; informational cards don't impersonate buttons.
   All transforms are opt-in, including in browsers where the small script is unavailable. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-landing-motion='off']) .landing-button {
    transition: transform var(--tr-duration-fast) var(--tr-easing-standard);
  }
  html:not([data-landing-motion='off']) .landing-nav__section::after {
    transition: transform var(--tr-duration-base) var(--tr-easing-standard);
  }
  html:not([data-landing-motion='off'])
    :is(.landing-button, .landing-nav__audience, .landing-text-link)
    > .landing-icon,
  html:not([data-landing-motion='off']) .landing-faq summary .landing-icon {
    transition: transform var(--tr-duration-base) var(--tr-easing-standard);
  }
  html:not([data-landing-motion='off']) .landing-button:active:not(:focus-visible) {
    transform: scale(0.98);
  }
  html:not([data-landing-motion='off']) .landing-faq details[open] p {
    animation: landing-answer var(--tr-duration-base) var(--tr-easing-enter) backwards;
  }
  @media (hover: hover) and (pointer: fine) {
    html:not([data-landing-motion='off'])
      .landing-button:hover:not(:focus-visible)
      > .landing-icon {
      transform: translateY(var(--tr-space-1));
    }
    html:not([data-landing-motion='off'])
      :is(.landing-nav__audience, .landing-text-link):hover:not(:focus-visible)
      > .landing-icon {
      transform: translateX(var(--tr-space-1));
    }
  }
}
@keyframes landing-answer {
  from {
    opacity: 0.6;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html[data-landing-motion='off'],
html:has(:focus-visible) {
  scroll-behavior: auto;
}
.landing-faq details:has(summary:focus-visible) p {
  animation: none !important;
}
.landing-faq summary:focus-visible .landing-icon,
.landing-nav__section:focus-visible::after {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}