/*
 * Shared public presentation grammar.
 * Standalone pages map their legacy variables to these roles; behavior,
 * commercial copy, and legal content stay in the owning HTML files.
 */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/outfit-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: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/outfit-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: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dmsans-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: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dmsans-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: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dmsans-italic-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: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dmsans-italic-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;
}

.public-surface {
  --public-background: #0d1b2a;
  --public-background-deep: #070f18;
  --public-surface: #142030;
  --public-surface-raised: #1a2c42;
  --public-surface-hover: #223552;
  --public-border: #334762;
  --public-border-strong: #4b6483;
  --public-text: #f0f4f8;
  --public-muted: #a8b8cc;
  --public-subtle: #8fa3bb;
  --public-action: #1d4ed8;
  --public-action-hover: #1e40af;
  --public-accent: #60a5fa;
  --public-action-soft: rgba(96, 165, 250, 0.12);
  --public-success: #4ade80;
  --public-success-soft: rgba(74, 222, 128, 0.12);
  --public-warning: #fbbf24;
  --public-warning-soft: rgba(251, 191, 36, 0.12);
  --public-danger: #f87171;
  --public-danger-soft: rgba(248, 113, 113, 0.12);
  --public-focus: #93c5fd;
  --public-on-action: #ffffff;
  --public-scrim: rgba(7, 15, 24, 0.78);
  --public-signature-surface: #ffffff;
  --public-shadow-panel: 0 1px 2px rgba(7, 15, 24, 0.2);
  --public-shadow-modal: 0 24px 48px rgba(7, 15, 24, 0.42);
  --public-radius-card: 12px;
  --public-radius-control: 8px;
  --public-radius-pill: 999px;
  --public-target: 44px;
  --public-primary-target: 52px;
  --public-space-1: 4px;
  --public-space-2: 8px;
  --public-space-3: 12px;
  --public-space-4: 16px;
  --public-space-6: 24px;
  --public-space-7: 32px;
  --public-space-8: 48px;
  --public-space-9: 64px;
  --public-font-body: "DM Sans", sans-serif;
  --public-font-display: "Outfit", sans-serif;
  --public-text-meta: 12px;
  --public-text-small: 13px;
  --public-text-body: 15px;
  --public-text-lead: 16px;
  --public-text-title: 32px;

  margin: 0;
  min-height: 100vh;
  background: var(--public-background);
  background-image: none;
  color: var(--public-text);
  font-family: var(--public-font-body);
  font-size: var(--public-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.public-surface--upload,
.public-surface--legal {
  --public-background: #eef1f5;
  --public-background-deep: #e5e9f0;
  --public-surface: #ffffff;
  --public-surface-raised: #ffffff;
  --public-surface-hover: #e8ebf0;
  --public-border: #cbd5e1;
  --public-border-strong: #94a3b8;
  --public-text: #111827;
  --public-muted: #526174;
  --public-subtle: #667085;
  --public-action: #1d4ed8;
  --public-action-hover: #1e40af;
  --public-accent: #1d4ed8;
  --public-action-soft: rgba(29, 78, 216, 0.08);
  --public-success: #15803d;
  --public-success-soft: rgba(21, 128, 61, 0.1);
  --public-warning: #b45309;
  --public-warning-soft: rgba(180, 83, 9, 0.1);
  --public-danger: #b91c1c;
  --public-danger-soft: rgba(185, 28, 28, 0.1);
  --public-focus: #2563eb;
  --public-on-action: #ffffff;
  --public-scrim: rgba(15, 23, 42, 0.58);
  --public-shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.06);
  --public-shadow-modal: 0 24px 48px rgba(15, 23, 42, 0.18);

  color-scheme: light;
}

.public-surface *,
.public-surface *::before,
.public-surface *::after {
  box-sizing: border-box;
}

.public-surface a {
  color: var(--public-accent);
  text-underline-offset: var(--public-space-1);
}

.public-surface button,
.public-surface input {
  font: inherit;
}

.public-surface :is(a, button, input, summary, [role="switch"]):focus-visible {
  outline: 2px solid var(--public-focus);
  outline-offset: 3px;
}

/* Legacy variable adapters keep the new grammar compact and explicit. */
.public-surface--pricing {
  --bg: var(--public-background);
  --surface: var(--public-surface);
  --surface-hover: var(--public-surface-hover);
  --surface-elevated: var(--public-surface-raised);
  --text: var(--public-text);
  --text-soft: var(--public-muted);
  --text-muted: var(--public-subtle);
  --primary: var(--public-action);
  --primary-hover: var(--public-action-hover);
  --primary-soft: var(--public-action-soft);
  --success: var(--public-success);
  --success-soft: var(--public-success-soft);
  --line: var(--public-border);
  --line-soft: var(--public-border);
  --accent-blue: var(--public-accent);
  --card: var(--public-surface);
  --card-hover: var(--public-surface-raised);
  --font: var(--public-font-body);
  --font-display: var(--public-font-display);
}

.public-surface--sign {
  --bg: var(--public-background);
  --bg-soft: var(--public-background-deep);
  --card: var(--public-surface);
  --card-border: var(--public-border);
  --text: var(--public-text);
  --muted: var(--public-muted);
  --accent: var(--public-accent);
  --accent-deep: var(--public-action);
  --success: var(--public-success);
  --danger: var(--public-danger);
  --font-body: var(--public-font-body);
  --font-display: var(--public-font-display);
  --radius: var(--public-radius-card);
  --radius-sm: var(--public-radius-control);
}

.public-surface--upload {
  --bg: var(--public-background);
  --surface: var(--public-surface);
  --text: var(--public-text);
  --text-soft: var(--public-muted);
  --primary: var(--public-action);
  --primary-hover: var(--public-action-hover);
  --success: var(--public-success);
  --success-soft: var(--public-success-soft);
  --danger: var(--public-danger);
  --danger-soft: var(--public-danger-soft);
  --line: var(--public-border);
  --radius: var(--public-radius-card);
}

.public-surface--legal {
  --bg: var(--public-background);
  --surface: var(--public-surface);
  --text: var(--public-text);
  --text-soft: var(--public-muted);
  --text-muted: var(--public-subtle);
  --line: var(--public-border);
  --accent-blue: var(--public-accent);
  --warm: var(--public-warning);
  --radius: var(--public-radius-card);
  --radius-sm: var(--public-radius-control);
  --font: var(--public-font-body);
  --font-display: var(--public-font-display);
}

/* Pricing: marketing character without ornamental glow or card noise. */
.public-surface--pricing .pricing-nav {
  padding: var(--public-space-4) var(--public-space-6);
  border-bottom: 1px solid var(--public-border);
  background: var(--public-background);
}

.public-surface--pricing .pricing-nav .logo,
.public-surface--pricing .pricing-nav .nav-login,
.public-surface--pricing .feature-compare summary,
.public-surface--pricing .faq-item summary,
.public-surface--pricing .pricing-footer a,
.public-surface--pricing .pricing-footer button {
  min-height: var(--public-target);
}

.public-surface--pricing .pricing-nav .logo {
  display: inline-flex;
  align-items: center;
  text-shadow: none;
  transform: none;
}

.public-surface--pricing .pricing-nav .logo:hover {
  text-shadow: none;
  transform: none;
}

.public-surface--pricing .pricing-nav .logo span,
.public-surface--pricing .pricing-hero h1 em {
  background: none;
  color: var(--public-accent);
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
}

.public-surface--pricing .pricing-nav .nav-login {
  padding: var(--public-space-2) var(--public-space-4);
  border-radius: var(--public-radius-control);
  background: transparent;
  backdrop-filter: none;
}

.public-surface--pricing .pricing-hero {
  max-width: 760px;
  padding: var(--public-space-9) var(--public-space-6) var(--public-space-7);
}

.public-surface--pricing .pricing-hero h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.public-surface--pricing .billing-toggle span {
  display: inline-flex;
  align-items: center;
  min-height: var(--public-target);
}

.public-surface--pricing .toggle-pill {
  width: 64px;
  height: var(--public-target);
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-pill);
}

.public-surface--pricing .toggle-pill::after {
  top: 5px;
  left: 5px;
  width: 32px;
  height: 32px;
}

.public-surface--pricing .toggle-pill.yearly::after {
  left: 25px;
}

.public-surface--pricing .savings-badge,
.public-surface--pricing .popular-badge {
  border-radius: var(--public-radius-pill);
  font-size: var(--public-text-meta);
}

.public-surface--pricing .tier-grid {
  gap: var(--public-space-4);
}

.public-surface--pricing .tier-card,
.public-surface--pricing .usp-card {
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-card);
  background: var(--public-surface);
  box-shadow: var(--public-shadow-panel);
  backdrop-filter: none;
  transform: none;
}

.public-surface--pricing .tier-card:hover,
.public-surface--pricing .usp-card:hover {
  border-color: var(--public-border-strong);
  background: var(--public-surface-raised);
  box-shadow: var(--public-shadow-panel);
  transform: none;
}

.public-surface--pricing .tier-card.popular {
  border-color: var(--public-accent);
  background: var(--public-surface-raised);
  box-shadow: var(--public-shadow-panel);
}

.public-surface--pricing .popular-badge {
  background: var(--public-action);
  color: var(--public-on-action);
  box-shadow: none;
}

.public-surface--pricing .tier-cta,
.public-surface--pricing .final-cta .cta-btn,
.public-surface--pricing .email-modal .modal-actions button,
.public-surface--pricing .consent-actions button {
  min-height: var(--public-target);
  border-radius: var(--public-radius-control);
}

.public-surface--pricing .tier-cta.primary,
.public-surface--pricing .final-cta .cta-btn,
.public-surface--pricing .email-modal .btn-continue,
.public-surface--pricing .consent-accept {
  border-color: var(--public-action);
  background: var(--public-action);
  color: var(--public-on-action);
  box-shadow: none;
}

.public-surface--pricing .tier-cta.primary:hover,
.public-surface--pricing .final-cta .cta-btn:hover,
.public-surface--pricing .email-modal .btn-continue:hover {
  background: var(--public-action-hover);
  box-shadow: none;
  transform: none;
}

.public-surface--pricing .tier-cta.primary::before,
.public-surface--pricing .tier-cta.primary::after,
.public-surface--pricing .cta-btn::before,
.public-surface--pricing .cta-btn::after,
.public-surface--pricing .btn-continue::before,
.public-surface--pricing .btn-continue::after {
  content: none;
  animation: none;
}

.public-surface--pricing .tier-cta.outline,
.public-surface--pricing .email-modal .btn-cancel,
.public-surface--pricing .consent-reject {
  border: 1px solid var(--public-border);
  background: var(--public-surface-raised);
  color: var(--public-text);
  backdrop-filter: none;
}

.public-surface--pricing .tier-card.enterprise {
  border-color: var(--public-border-strong);
  background: var(--public-surface);
}

.public-surface--pricing .compare-table,
.public-surface--pricing .compare-table th,
.public-surface--pricing .compare-table td,
.public-surface--pricing .pricing-footer,
.public-surface--pricing .email-modal .error-msg {
  font-size: var(--public-text-meta);
}

.public-surface--pricing .email-overlay {
  background: var(--public-scrim);
  backdrop-filter: blur(8px);
}

.public-surface--pricing .email-modal,
.public-surface--pricing .consent-panel {
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-card);
  background: var(--public-surface-raised);
  box-shadow: var(--public-shadow-modal);
  backdrop-filter: none;
}

.public-surface--pricing .email-modal {
  animation: none;
}

.public-surface--pricing .email-modal input {
  min-height: var(--public-target);
  border-radius: var(--public-radius-control);
  background: var(--public-background-deep);
}

.public-surface--pricing .email-modal input:focus {
  border-color: var(--public-focus);
  box-shadow: 0 0 0 3px var(--public-action-soft);
}

.public-surface--pricing .pricing-footer a,
.public-surface--pricing .pricing-footer button {
  display: inline-flex;
  align-items: center;
}

/* Signing: calm, explicit transaction hierarchy. */
.public-surface--sign {
  display: flex;
  flex-direction: column;
}

.public-surface--sign nav {
  border-bottom: 1px solid var(--public-border);
  background: var(--public-background);
  backdrop-filter: none;
}

.public-surface--sign .nav-logo,
.public-surface--sign .nav-secure,
.public-surface--sign .doc-row .open,
.public-surface--sign .sig-toolbar .clear-btn,
.public-surface--sign footer a {
  min-height: var(--public-target);
}

.public-surface--sign .nav-secure,
.public-surface--sign .confirm-check .label,
.public-surface--sign .confirm-box-text,
.public-surface--sign .sig-info,
.public-surface--sign .sig-toolbar,
.public-surface--sign .status-msg,
.public-surface--sign footer {
  font-size: var(--public-text-small);
}

.public-surface--sign .nav-secure::before {
  box-shadow: none;
}

.public-surface--sign .hero {
  padding: var(--public-space-6) 0 var(--public-space-7);
  text-align: left;
}

.public-surface--sign .hero h1 {
  font-size: var(--public-text-title);
}

.public-surface--sign .card {
  margin-bottom: var(--public-space-4);
  padding: var(--public-space-6);
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-card);
  background: var(--public-surface);
  box-shadow: var(--public-shadow-panel);
  backdrop-filter: none;
}

.public-surface--sign .card-title {
  font-size: var(--public-text-lead);
}

.public-surface--sign .card-title .num {
  border-radius: var(--public-radius-control);
  background: var(--public-action);
  color: var(--public-on-action);
}

.public-surface--sign .detail-row,
.public-surface--sign .confirm-check {
  min-height: var(--public-target);
  border-color: var(--public-border);
}

.public-surface--sign .doc-row,
.public-surface--sign .confirm-box,
.public-surface--sign .sig-info {
  border-color: var(--public-border);
  border-radius: var(--public-radius-control);
  background: var(--public-surface-raised);
}

.public-surface--sign .doc-row .open,
.public-surface--sign .sig-toolbar .clear-btn {
  border-color: var(--public-border);
  border-radius: var(--public-radius-control);
}

.public-surface--sign .confirm-box.checked {
  border-color: var(--public-success);
  background: var(--public-success-soft);
}

.public-surface--sign .confirm-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--public-action);
}

.public-surface--sign .sig-wrap {
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-control);
  background: var(--public-signature-surface);
  box-shadow: none;
}

.public-surface--sign .sig-canvas {
  background: var(--public-signature-surface);
}

.public-surface--sign .btn-primary {
  min-height: var(--public-primary-target);
  border-radius: var(--public-radius-control);
  background: var(--public-action);
  color: var(--public-on-action);
  box-shadow: none;
}

.public-surface--sign .btn-primary:hover:not(:disabled) {
  background: var(--public-action-hover);
  box-shadow: none;
  transform: none;
}

.public-surface--sign .status-msg.error {
  border-color: var(--public-danger);
  background: var(--public-danger-soft);
  color: var(--public-danger);
}

.public-surface--sign .status-msg.success {
  border-color: var(--public-success);
  background: var(--public-success-soft);
  color: var(--public-success);
}

.public-surface--sign .done-icon {
  border-color: var(--public-success);
  background: var(--public-success-soft);
  color: var(--public-success);
}

.public-surface--sign footer a {
  display: inline-flex;
  align-items: center;
}

/* Upload: the same grammar with its existing operating-system theme behavior. */
.public-surface--upload {
  padding: var(--public-space-6) var(--public-space-4) var(--public-space-8);
}

.public-surface--upload .container {
  max-width: 560px;
}

.public-surface--upload .brand {
  margin-bottom: var(--public-space-6);
  text-align: left;
}

.public-surface--upload .brand span,
.public-surface--upload .file-status.uploading,
.public-surface--upload .file-ai {
  color: var(--public-accent);
}

.public-surface--upload .brand h1,
.public-surface--upload .greeting,
.public-surface--upload .state-title {
  font-family: var(--public-font-display);
}

.public-surface--upload .card {
  padding: var(--public-space-6);
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-card);
  box-shadow: var(--public-shadow-panel);
}

.public-surface--upload .upload-zone {
  min-height: 184px;
  border: 1px dashed var(--public-border-strong);
  border-radius: var(--public-radius-control);
  background: var(--public-surface-raised);
}

.public-surface--upload .upload-zone:hover,
.public-surface--upload .upload-zone.dragover {
  border-color: var(--public-accent);
  background: var(--public-action-soft);
}

.public-surface--upload .upload-hint,
.public-surface--upload .file-size,
.public-surface--upload .file-status,
.public-surface--upload .file-ai,
.public-surface--upload .footer {
  font-size: var(--public-text-meta);
}

.public-surface--upload .file-item {
  min-height: var(--public-target);
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-control);
  background: var(--public-background);
  font-size: var(--public-text-small);
}

.public-surface--upload .file-status {
  border-radius: var(--public-radius-pill);
}

.public-surface--upload .file-status.done {
  background: var(--public-success-soft);
  color: var(--public-success);
}

.public-surface--upload .file-status.error {
  background: var(--public-danger-soft);
  color: var(--public-danger);
}

.public-surface--upload .file-ai.success,
.public-surface--upload .file-ai.warning {
  width: fit-content;
  padding: 2px 6px;
  border-radius: var(--public-radius-pill);
}

.public-surface--upload .file-ai.success {
  background: var(--public-success-soft);
  color: var(--public-success);
}

.public-surface--upload .file-ai.warning {
  background: var(--public-warning-soft);
  color: var(--public-warning);
}

.public-surface--upload .file-ai.neutral {
  color: var(--public-muted);
}

.public-surface--upload .file-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--public-target);
  min-width: var(--public-target);
  height: var(--public-target);
  padding: 0;
  border-radius: var(--public-radius-control);
}

.public-surface--upload .file-remove:hover {
  background: var(--public-danger-soft);
}

.public-surface--upload .btn-primary {
  min-height: var(--public-primary-target);
  border-radius: var(--public-radius-control);
  background: var(--public-action);
  color: var(--public-on-action);
}

.public-surface--upload .btn-primary:hover {
  background: var(--public-action-hover);
}

.public-surface--upload .footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--public-target);
}

/* Legal: one restrained long-form shell for Impressum, privacy, and AVV. */
.public-surface--legal .nav {
  max-width: 1120px;
  padding: var(--public-space-4) var(--public-space-6);
  border-bottom: 1px solid var(--public-border);
}

.public-surface--legal .nav .logo,
.public-surface--legal .nav a.zurueck {
  min-height: var(--public-target);
}

.public-surface--legal .nav .logo {
  display: inline-flex;
  align-items: center;
}

.public-surface--legal .nav a.zurueck {
  padding: var(--public-space-2) var(--public-space-4);
  border-color: var(--public-border);
  border-radius: var(--public-radius-control);
}

.public-surface--legal main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--public-space-8) var(--public-space-6) 80px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.7;
}

.public-surface--legal.public-surface--avv main,
.public-surface--legal.public-surface--avv footer {
  max-width: 900px;
}

.public-surface--legal h1,
.public-surface--legal h2,
.public-surface--legal th {
  color: var(--public-text);
  font-family: var(--public-font-display);
}

.public-surface--legal h1 {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.public-surface--legal h2 {
  margin: var(--public-space-8) 0 var(--public-space-3);
  font-size: 18px;
}

.public-surface--legal p,
.public-surface--legal li,
.public-surface--legal td {
  font-size: var(--public-text-body);
}

.public-surface--legal strong {
  color: var(--public-text);
}

.public-surface--legal .karte,
.public-surface--legal .tabelle-rahmen {
  border-color: var(--public-border);
  border-radius: var(--public-radius-card);
  background: var(--public-surface);
  box-shadow: var(--public-shadow-panel);
}

.public-surface--legal .karte {
  padding: var(--public-space-6);
}

.public-surface--legal .rolle {
  border-left-color: var(--public-accent);
}

.public-surface--legal table {
  border-color: var(--public-border);
  background: var(--public-surface);
  font-size: 14px;
}

.public-surface--legal th,
.public-surface--legal td {
  padding: var(--public-space-3);
  border-color: var(--public-border);
}

.public-surface--legal th {
  background: var(--public-background-deep);
  font-size: var(--public-text-small);
}

.public-surface--legal .note {
  padding: var(--public-space-4);
  border-left: 3px solid var(--public-warning);
  background: var(--public-warning-soft);
}

.public-surface--legal .stand,
.public-surface--legal footer {
  color: var(--public-subtle);
  font-size: var(--public-text-small);
}

.public-surface--legal footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--public-space-6) var(--public-space-9);
}

.public-surface--legal footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--public-target);
}

@media (prefers-color-scheme: dark) {
  .public-surface--upload {
    --public-background: #0d1b2a;
    --public-background-deep: #070f18;
    --public-surface: #142030;
    --public-surface-raised: #1a2c42;
    --public-surface-hover: #223552;
    --public-border: #334762;
    --public-border-strong: #4b6483;
    --public-text: #f0f4f8;
    --public-muted: #a8b8cc;
    --public-subtle: #8fa3bb;
    --public-action: #1d4ed8;
    --public-action-hover: #1e40af;
    --public-accent: #60a5fa;
    --public-action-soft: rgba(96, 165, 250, 0.12);
    --public-success: #4ade80;
    --public-success-soft: rgba(74, 222, 128, 0.12);
    --public-warning: #fbbf24;
    --public-warning-soft: rgba(251, 191, 36, 0.12);
    --public-danger: #f87171;
    --public-danger-soft: rgba(248, 113, 113, 0.12);
    --public-focus: #93c5fd;
    --public-on-action: #ffffff;
    --public-shadow-panel: 0 1px 2px rgba(7, 15, 24, 0.2);
    --public-shadow-modal: 0 24px 48px rgba(7, 15, 24, 0.42);

    color-scheme: dark;
  }
}

@media (max-width: 768px) {
  .public-surface--pricing .pricing-nav,
  .public-surface--legal .nav {
    padding: var(--public-space-3) var(--public-space-4);
  }

  .public-surface--pricing .pricing-hero {
    padding: var(--public-space-8) var(--public-space-4) var(--public-space-6);
  }

  .public-surface--pricing .pricing-hero h1,
  .public-surface--legal h1 {
    font-size: 32px;
  }

  .public-surface--pricing .compare-table,
  .public-surface--pricing .compare-table th,
  .public-surface--pricing .compare-table td {
    font-size: var(--public-text-meta);
  }

  .public-surface--sign .hero h1 {
    font-size: 28px;
  }

  .public-surface--sign .card,
  .public-surface--upload .card {
    padding: var(--public-space-4);
  }

  .public-surface--legal main {
    padding: var(--public-space-7) var(--public-space-4) var(--public-space-9);
  }

  .public-surface--legal footer {
    padding: 0 var(--public-space-4) var(--public-space-8);
  }
}

@media (max-width: 480px) {
  .public-surface--pricing .billing-toggle {
    flex-wrap: wrap;
  }

  .public-surface--sign .nav-secure {
    font-size: var(--public-text-meta);
  }

  .public-surface--upload {
    padding: var(--public-space-4) var(--public-space-3) var(--public-space-7);
  }

  .public-surface--legal .nav {
    align-items: flex-start;
    gap: var(--public-space-3);
  }
}

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