/* Reset within bx scope */
.bx, .bx * { box-sizing: border-box; }
.bx {
  font-family: var(--bx-font-sans);
  color: var(--bx-ink);
  background: var(--bx-paper);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.bx h1, .bx h2, .bx h3 {
  font-family: var(--bx-font-display);
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
  color: var(--bx-ink);
}
/* Display headings interpolate with the viewport (Rule 7) so they need no
   width breakpoint to shrink on small screens. */
.bx h1 { font-size: clamp(40px, 6vw, 56px); line-height: 1.02; }
.bx h2 { font-size: clamp(26px, 3.5vw, 32px); line-height: 1.08; }
.bx h3 { font-size: 18px; line-height: 1.2; }
.bx p { margin: 0; }

.bx .grad-text {
  background: var(--bx-grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* The .bx-light-surface theme island lives in concerns/tokens.css, next to
   its sibling .bx-dark — both theme variants belong in the token layer. */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bx-page-bg);
  font-family: var(--bx-font-sans);
}

body {
  min-height: 100svh;
}

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

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

.bx form {
  min-width: 0;
}

.bx .button_to {
  display: inline-flex;
  margin: 0;
}

.bx .button_to button {
  width: auto;
}

turbo-frame {
  display: block;
}