/* Stripe-style Website System: design tokens */
:root {
  --accent: #533afd; /* Filled primary buttons, links, icon strokes and the focus ring. Text in this colour reads on `bg`, `bg-band` and `accent-wash`. */
  --accent-hover: #4434d4; /* Hover fill for primary buttons and hover colour for links. */
  --accent-active: #2e2b8c; /* Pressed fill for primary buttons; icon hover. */
  --on-accent: #ffffff; /* Text and icons on `accent`, `accent-hover` and `accent-active` fills. */
  --accent-wash: #e8e9ff; /* Lightest accent surface: tag pills and highlighted cards. */
  --accent-tint: rgba(83,58,253,0.05); /* Hover fill for ghost and tertiary buttons. */
  --text: #061b31; /* Headings, navigation and strong labels on `bg`, `bg-band`, `border` fills and `accent-wash`. Never use pure black. */
  --text-label: #273951; /* Form labels and secondary headings on `bg` and `bg-band`. */
  --text-muted: #64748d; /* Supporting copy, captions and placeholders on `bg` and `bg-band`. Keep it to short passages, not long paragraphs. */
  --text-disabled: rgba(16,16,16,0.3); /* Label of a disabled control on `bg`. Exempt from contrast floors because the control is inert. */
  --bg: #ffffff; /* Page canvas and card surfaces. */
  --bg-band: #f8fafd; /* Footer and quiet section bands. */
  --border: #e5edf5; /* Dividers, card and input borders, and neutral hover fills. */
  --border-strong: #d4dee9; /* Outline of disabled and neutral ghost controls. */
  --border-accent: #b9b9f9; /* 1px outline of ghost (secondary) buttons. */
  --border-accent-soft: #d6d9fc; /* 1px outline of tertiary buttons and soft accent dividers. */
  --border-dashed: #362baa; /* Dashed outline for placeholders and drop zones. */
  --dark: #1c1e54; /* Full-width dark brand sections. Pair with `on-dark` and `on-dark-muted`. */
  --dark-deep: #0d253d; /* Darkest neutral surface, for footers or code panels on dark. */
  --on-dark: #ffffff; /* Headings and body text on `dark` and `dark-deep`. */
  --on-dark-muted: rgba(255,255,255,0.7); /* Supporting copy on `dark` and `dark-deep`. */
  --on-dark-border: rgba(255,255,255,0.1); /* Card and divider outlines on `dark`. */
  --success: #15be53; /* Success indicator fill and icon. Not for text. */
  --success-bg: rgba(21,190,83,0.2); /* Success badge background. */
  --success-border: rgba(21,190,83,0.4); /* Success badge outline. */
  --success-text: #108c3d; /* Success badge text on `success-bg`. Measures about 4.3:1 on `bg`, just under the 4.5:1 floor; kept exact from the source, so pair it with an icon or use it at 19px bold or larger. */
  --warning: #9b6829; /* Warning text and icons on `bg`. */
  --danger: #ea2261; /* Error text, invalid outlines and destructive actions on `bg`. Also the ruby in the hero gradient. */
  --gradient-ruby: var(--danger); /* Hero gradient and chart accent. Never a button or link colour. */
  --gradient-magenta: #f96bee; /* Hero gradient and decorative highlights only. */
  --gradient-magenta-soft: #ffd7ef; /* Tinted surface and dashed borders for magenta-themed decoration. */
  --gradient-orange: #ff6118; /* Hero gradient only. */
  --gradient-pink: #ffe0ef; /* Hero gradient only. */

  /* shadow */
  --shadow-ambient: rgba(23,23,23,0.06) 0px 3px 6px; /* Light lift and hover hint. */
  --shadow-standard: rgba(23,23,23,0.08) 0px 15px 35px; /* Content panels. */
  --shadow-raised: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px; /* Product screenshots, dropdowns and popovers. */
  --shadow-deep: rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px; /* Modals and floating panels. */
  --shadow-sticky: rgba(0,55,112,0.08) 0px 1px 0px; /* Top-edge shadow under a sticky header. */

  /* spacing */
  --space-1: 4px; /* Half step for tight UI: icon gaps, badge padding. */
  --space-2: 8px; /* Base unit. Gap between paired buttons and between a label and its heading. */
  --space-3: 12px; /* Compact control padding. */
  --space-4: 16px; /* Button horizontal padding, phone gutter. */
  --space-5: 20px; /* Field groups. */
  --space-6: 24px; /* Grid column gap, tablet gutter, hero button padding. */
  --space-8: 32px; /* Card padding, desktop gutter, heading to paragraph gap. */
  --space-10: 40px; /* Section gap on phones. */
  --space-12: 48px; /* Heading block to content gap. */
  --space-16: 64px; /* Section gap on tablets. */
  --space-20: 80px; /* Large separation inside a section. */
  --space-24: 96px; /* Section gap on desktop. */

  /* radius */
  --radius-sm: 4px; /* Buttons, inputs, badges and most cards. */
  --radius-md: 6px; /* Navigation container and larger controls. */
  --radius-lg: 8px; /* Featured cards and hero visuals. */
  --radius-pill: 9999px; /* Tag pills only. Never buttons. */

  /* layout */
  --container: 1080px; /* Default content width. */
  --container-wide: 1320px; /* Wide content width for heroes and full grids. */
  --gutter-desktop: 32px; /* Page side padding at 1024px and up. */
  --gutter-tablet: 24px; /* Page side padding from 640px to 1023px. */
  --gutter-phone: 16px; /* Page side padding under 640px. */
  --bp-tablet: 640px; /* Two-column grids start here. */
  --bp-desktop: 1024px; /* Full layout and three-column grids start here. */
  --bp-wide: 1280px; /* Same layout, wider margins. */
  --nav-height: 76px; /* Navigation bar height. */
  --chart-compact: 180px; /* Chart height inside an overview module. */
  --chart-featured: 320px; /* Chart height on a detail or full-width layout. */

  /* icon */
  --icon-xs: 12px; /* Inside badges and dense table cells. */
  --icon-sm: 16px; /* Inside small buttons, chips and toasts. */
  --icon-md: 20px; /* Default, beside body text and in buttons. */
  --icon-lg: 32px; /* List media and feature highlights. */
  --icon-xl: 64px; /* Empty states and sign-in screens. */

  /* type families */
  --font-sans: "sohne-var", "Inter Tight", "SF Pro Display", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* type styles */
.display { font-family: var(--font-sans); font-size: 56px; line-height: 1.03; font-weight: 300; letter-spacing: -1.4px; } /* Hero headline, one per page. */
.heading-lg { font-family: var(--font-sans); font-size: 48px; line-height: 1.15; font-weight: 300; letter-spacing: -0.96px; } /* Secondary hero and major section headlines. */
.heading { font-family: var(--font-sans); font-size: 32px; line-height: 1.1; font-weight: 300; letter-spacing: -0.64px; } /* Section titles. */
.heading-sm { font-family: var(--font-sans); font-size: 26px; line-height: 1.12; font-weight: 300; letter-spacing: -0.26px; } /* Card headings and sub-sections. */
.subheading { font-family: var(--font-sans); font-size: 22px; line-height: 1.1; font-weight: 300; letter-spacing: -0.22px; } /* Small section heads and lead paragraphs under a headline. */
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; font-weight: 300; } /* Feature descriptions and intro text. */
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; font-weight: 300; } /* Standard reading text. */
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 400; } /* Dense supporting text, form labels and footers. */
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.45; font-weight: 400; } /* Fine print, metadata and section labels. */
.stat { font-family: var(--font-sans); font-size: 56px; line-height: 1.03; font-weight: 300; letter-spacing: -1.4px; } /* Large figures in stat blocks. Always with tabular numerals. */
.ui { font-family: var(--font-sans); font-size: 16px; line-height: 1; font-weight: 400; } /* Button text. */
.ui-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1; font-weight: 400; } /* Navigation links and compact buttons. */
.badge { font-family: var(--font-sans); font-size: 11px; line-height: 1.3; font-weight: 400; } /* Badge and tag text. */
.code { font-family: var(--font-mono); font-size: 12px; line-height: 2; font-weight: 500; } /* Code blocks and technical labels. */
.code-bold { font-family: var(--font-mono); font-size: 12px; line-height: 2; font-weight: 700; } /* Keywords inside code. */