* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%
}

body {
  margin:0;
  font:var(--text-md)/1.55 var(--font-sans);
  background:var(--surface);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}

[hidden] {
  display:none !important
}

::selection {
  background:#c9ece4;
  color:var(--ink)
}

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

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed; opacity:.54
}

a {
  color:inherit; text-decoration:none
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #98d3c9; outline-offset:3px
}

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

.container {
  max-width:var(--container); margin:auto; padding:0 var(--gutter)
}

.brand {
  display:inline-flex; gap:10px; align-items:center; font-size:19px; font-weight:800; letter-spacing:-.8px; color:var(--ink); white-space:nowrap
}

.brand img {
  width:34px; height:34px; object-fit:contain
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--teal); color:white; border:1px solid var(--teal); padding:11px 19px; border-radius:9px; font-size:14px; font-weight:800; line-height:1.2; transition:background .15s,transform .15s; white-space:nowrap
}

.btn:hover {
  background:var(--teal-dark); transform:translateY(-1px)
}

.btn.outline {
  background:white; border-color:#d6e0e4; color:var(--ink)
}

.btn.outline:hover {
  background:#f5faf8
}

.btn.plain {
  background:transparent; border:0; color:var(--teal); padding:9px 0
}

.btn.dark {
  background:var(--ink); border-color:var(--ink)
}

.btn.small {
  font-size:12px; padding:8px 12px
}

.icon {
  display:inline-flex; align-items:center; justify-content:center; min-width:17px; font-size:18px; line-height:1
}

.eyebrow {
  display:flex; gap:11px; align-items:center; text-transform:uppercase; letter-spacing:2.3px; font-size:11px; font-weight:800; color:var(--teal)
}

.eyebrow:before {
  content:''; width:22px; height:2px; background:var(--teal)
}

h1,h2,h3,h4,p {
  margin-top:0
}

h1,h2,h3 {
  letter-spacing:-.043em; line-height:1.12
}

h1 {
  font-size:clamp(38px,4.3vw,64px); font-weight:800
}

h2 {
  font-size:clamp(30px,3vw,43px); font-weight:800
}

h3 {
  font-size:19px; font-weight:800
}

.muted {
  color:var(--muted)
}

.tiny {
  color:var(--muted); font-size:12px
}

.card {
  background:#fff; border:1px solid #e3eaec; border-radius:var(--radius); box-shadow:var(--shadow)
}

.split-heading {
  display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:27px
}

.split-heading h2 {
  max-width:570px; margin:10px 0 0
}

.split-heading>p {
  max-width:365px; color:#748795; margin:0 0 7px
}

.playbtn {
  /* grid + place-items is what actually centres the glyph: as a block the
     inline SVG used to sit on the text baseline, so the triangle landed in the
     top-left of the circle. */
  display:grid; place-items:center; padding:0; line-height:1;
  border:0; border-radius:50%; background:var(--teal); color:white; width:38px; height:38px; flex-shrink:0; font-size:15px
}

.select {
  height:42px; border:1px solid #dee7eb; border-radius:8px; padding:0 12px; background:white; color:var(--ink); font-size:13px
}

.cs-search-field {
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px; min-width:220px; border:1px solid #dce7eb; border-radius:var(--radius-input); background:#f9fbfc; color:#93a5b1; transition:border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease)
}

.cs-search-field .cs-icon {
  width:15px; height:15px
}

.cs-search-field input {
  width:100%; min-width:0; border:0; background:transparent; padding:0; font-size:13px; color:var(--ink)
}

.cs-search-field input:focus {
  outline:none
}

.cs-search-field:focus-within {
  border-color:#9ed4c9; box-shadow:0 0 0 3px #d9f0ea
}

.field-error {
  display:block; margin-top:6px; color:var(--danger); font-size:11.5px; font-weight:600; line-height:1.5
}

.field-error:empty {
  display:none
}

.form-status {
  margin:14px 0 0; padding:11px 13px; border:1px solid #cfe7df; border-radius:var(--radius-sm); background:#f4fbf8; color:#426d64; font-size:12.5px; line-height:1.6
}

.form-status.error {
  border-color:#f2d9d9; background:var(--danger-soft); color:var(--danger)
}

.input.invalid {
  border-color:#e0a8a8; background:#fffafa
}

.demo-badge {
  display:inline-flex; background:#eef6f7; color:#758f99; border-radius:20px; font-size:10px; padding:5px 8px; letter-spacing:.3px
}

@media(max-width:780px) {
  .container {
    padding:0 18px
  }
  .split-heading {
    display:block
  }
  .split-heading>p {
    max-width:none; margin-top:14px
  }
  .split-heading h2 {
    font-size:32px
  }
}

/* ---- Shared primitives ---- */

.skip-link {
  position:fixed;
  left:16px;
  top:-64px;
  z-index:100;
  padding:10px 16px;
  border-radius:var(--radius-input);
  background:var(--ink);
  color:#fff;
  font-size:13px;
  font-weight:700;
  transition:top var(--speed) var(--ease);
}

.skip-link:focus {
  top:12px;
}

.sr-only {
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.cs-icon {
  width:19px;
  height:19px;
  flex:none;
  display:inline-block;
  vertical-align:middle;
}

.btn .cs-icon {
  width:16px;
  height:16px;
}

.btn.plain .cs-icon,
.btn.small .cs-icon {
  width:15px;
  height:15px;
}

.trustline span .cs-icon {
  width:13px;
  height:13px;
}

.pill .cs-icon {
  width:14px;
  height:14px;
}

.empty-state .symbol .cs-icon {
  width:44px;
  height:44px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:not-allowed;
  opacity:.54;
  transform:none;
}

.btn.danger {
  background:var(--danger);
  border-color:var(--danger);
}

.btn.danger:hover {
  background:#9d3838;
}

.btn.full {
  width:100%;
}

.btn.plain:hover {
  background:transparent;
  transform:none;
  color:var(--teal-dark);
}

.text-link {
  color:var(--teal);
  font-weight:700;
}

.text-link:hover {
  color:var(--teal-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.text-button {
  border:0;
  background:none;
  padding:0;
  color:var(--teal);
  font:inherit;
  font-weight:700;
  text-align:left;
}

.text-button:hover {
  color:var(--teal-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.stack-4 > * + * { margin-top:var(--space-4); }
.stack-6 > * + * { margin-top:var(--space-6); }

.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }

.note {
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px;
}

:target {
  scroll-margin-top:calc(var(--header-h) + 20px);
}