/* Auto-generated from tokens/know-better.tokens.json. Do not edit directly. */
@import './know-better.css';

.bb-page {
  background: var(--bb-color-afterhours);
  color: var(--bb-color-intelligence);
  font-family: var(--bb-font-brand);
  margin: 0;
}

.bb-sample-shell {
  padding: var(--bb-space-block);
}

.bb-brand-sample {
  background: var(--bb-color-afterhours);
  min-height: 100vh;
}

.bb-brand-hero {
  min-height: 320px;
  padding: clamp(28px, 4vw, 56px) var(--bb-space-block) var(--bb-space-section);
}

.bb-brand-meta {
  color: rgba(236, 234, 209, 0.55);
  font-size: var(--bb-type-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bb-brand-title {
  color: var(--bb-color-intelligence);
  font-family: var(--bb-font-brand);
  font-size: clamp(76px, 11vw, 164px);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.9;
  margin-block: clamp(32px, 5vw, 72px) 0;
  text-transform: uppercase;
}

.bb-brand-dot { color: var(--bb-color-signal); }

.bb-brand-section {
  display: grid;
  gap: var(--bb-space-block);
  grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.05fr);
  padding: 0 var(--bb-space-block) var(--bb-space-section);
}

.bb-brand-section-label {
  color: rgba(236, 234, 209, 0.38);
  font-size: var(--bb-type-label);
  letter-spacing: 0.14em;
  margin-bottom: var(--bb-space-element);
  text-transform: uppercase;
}

.bb-brand-section-label-number { color: var(--bb-color-signal); }

.bb-brand-section-title {
  color: var(--bb-color-intelligence);
  font-size: clamp(64px, 7vw, 104px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin: 0 0 var(--bb-space-element);
}

.bb-brand-section-copy {
  color: var(--bb-color-intelligence);
  font-size: var(--bb-type-body);
  line-height: 1.7;
  max-width: 640px;
}

.bb-palette-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.bb-palette-card {
  border: var(--bb-glass-border);
  border-radius: var(--bb-radius-sm);
  overflow: hidden;
}

.bb-palette-swatch { min-height: clamp(160px, 19vw, 230px); }
.bb-palette-afterhours { background: var(--bb-color-afterhours); }
.bb-palette-intelligence { background: var(--bb-color-intelligence); }
.bb-palette-signal { background: var(--bb-color-signal); }

.bb-palette-label {
  background: var(--bb-color-intelligence);
  color: var(--bb-color-afterhours);
  padding: 14px;
}

.bb-palette-name {
  display: block;
  font-size: var(--bb-type-body);
  line-height: 1.1;
}

.bb-palette-value {
  display: block;
  font-size: var(--bb-type-small);
  opacity: 0.6;
}

.bb-token-reference {
  border-top: var(--bb-glass-border);
  color: var(--bb-color-afterhours);
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
}

.bb-token-reference-dark { color: var(--bb-color-intelligence); }

.bb-token-name {
  font-size: var(--bb-type-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bb-token-value {
  font-size: var(--bb-type-small);
  opacity: 0.62;
}

.bb-token-section {
  padding: 0 var(--bb-space-block) var(--bb-space-section);
}

.bb-token-grid {
  display: grid;
  gap: var(--bb-space-element);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.bb-token-card {
  border: var(--bb-glass-border);
  border-radius: var(--bb-radius-lg);
  display: grid;
  gap: 12px;
  padding: var(--bb-space-element);
}

.bb-token-preview {
  align-items: center;
  border: var(--bb-glass-border);
  border-radius: var(--bb-radius-sm);
  display: flex;
  min-height: 96px;
  overflow: hidden;
  padding: var(--bb-space-element);
}

.bb-token-preview-afterhours { background: var(--bb-color-afterhours); }
.bb-token-preview-intelligence { background: var(--bb-color-intelligence); color: var(--bb-color-afterhours); }
.bb-token-preview-signal { background: var(--bb-color-signal); color: var(--bb-color-afterhours); }
.bb-token-preview-display { font-size: var(--bb-type-display); font-weight: var(--bb-title-weight); letter-spacing: var(--bb-title-tracking); line-height: var(--bb-title-leading); }
.bb-token-preview-h1 { font-size: var(--bb-type-h1); font-weight: var(--bb-title-weight); letter-spacing: var(--bb-title-tracking); line-height: var(--bb-title-leading); }
.bb-token-preview-h2 { font-size: var(--bb-type-h2); font-weight: var(--bb-title-weight); letter-spacing: var(--bb-title-tracking); line-height: var(--bb-title-leading); }
.bb-token-preview-body { font-size: var(--bb-type-body); line-height: 1.7; }
.bb-token-preview-small { font-size: var(--bb-type-small); }
.bb-token-preview-label { color: var(--bb-color-signal); font-size: var(--bb-type-label); letter-spacing: 0.14em; text-transform: uppercase; }
.bb-token-preview-radius-sm { background: var(--bb-color-signal); border-radius: var(--bb-radius-sm); color: var(--bb-color-afterhours); }
.bb-token-preview-radius-lg { background: var(--bb-color-signal); border-radius: var(--bb-radius-lg); color: var(--bb-color-afterhours); }
.bb-token-preview-radius-pill { background: var(--bb-color-signal); border-radius: var(--bb-radius-pill); color: var(--bb-color-afterhours); }
.bb-token-preview-post { aspect-ratio: 1 / 1; display: grid; grid-template-rows: var(--bb-pa-focal-top) 1fr calc(100% - var(--bb-pa-focal-bottom)); }

.bb-code {
  color: var(--bb-color-signal);
  font-family: var(--bb-font-brand);
}

.bb-sample-table {
  border-collapse: collapse;
  width: 100%;
}

.bb-sample-table th,
.bb-sample-table td {
  border-bottom: var(--bb-glass-border);
  padding: 12px;
  text-align: left;
}

.bb-kicker {
  color: var(--bb-color-signal);
  font-size: var(--bb-type-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bb-hero-title {
  color: var(--bb-color-intelligence);
  font-size: var(--bb-type-h1);
  line-height: var(--bb-title-leading);
}

.bb-body {
  color: var(--bb-color-intelligence);
  font-size: var(--bb-type-body);
}

@media (max-width: 820px) {
  .bb-brand-section { grid-template-columns: 1fr; }
  .bb-brand-title { font-size: clamp(56px, 18vw, 96px); }
  .bb-brand-section-title { font-size: clamp(48px, 16vw, 80px); }
}

.bb-token-preview::before {
  content: "";
  display: block;
}

.bb-token-preview-font::before {
  color: var(--bb-color-intelligence);
  content: "eToro font";
  font-family: var(--bb-font-brand);
  font-size: var(--bb-type-h2);
}

.bb-token-preview-title-font::before {
  color: var(--bb-color-intelligence);
  content: "Know Better";
  font-family: var(--bb-title-font);
  font-size: var(--bb-type-h1);
  line-height: var(--bb-title-leading);
}

.bb-token-preview-title-color::before {
  color: var(--bb-title-color);
  content: "Title color";
  font-size: var(--bb-type-h2);
}

.bb-token-preview-title-weight::before {
  color: var(--bb-color-intelligence);
  content: "Weight";
  font-size: var(--bb-type-h2);
  font-weight: var(--bb-title-weight);
}

.bb-token-preview-title-tracking::before {
  color: var(--bb-color-intelligence);
  content: "Tracking";
  font-size: var(--bb-type-h2);
  letter-spacing: var(--bb-title-tracking);
}

.bb-token-preview-title-leading::before {
  color: var(--bb-color-intelligence);
  content: "Line\A height";
  font-size: var(--bb-type-h2);
  line-height: var(--bb-title-leading);
  white-space: pre;
}

.bb-token-preview-weight::before {
  color: var(--bb-color-intelligence);
  content: "Body weight";
  font-size: var(--bb-type-body);
  font-weight: var(--bb-weight);
}

.bb-token-preview-space-element::before,
.bb-token-preview-space-block::before,
.bb-token-preview-space-section::before {
  background: var(--bb-color-signal);
  content: "";
  display: block;
  height: 32px;
}

.bb-token-preview-space-element::before { width: var(--bb-space-element); }
.bb-token-preview-space-block::before { width: var(--bb-space-block); }
.bb-token-preview-space-section::before { width: min(var(--bb-space-section), 100%); }

.bb-token-preview-border::before {
  border: var(--bb-glass-border);
  border-radius: var(--bb-radius-sm);
  content: "Border";
  padding: var(--bb-space-element);
}

.bb-token-preview-scrim {
  background: var(--bb-pa-scrim), var(--bb-color-signal);
}

.bb-token-preview-scrim::before {
  color: var(--bb-color-intelligence);
  content: "Scrim";
  font-size: var(--bb-type-h2);
}

.bb-token-preview-split::before {
  background: var(--bb-color-signal);
  border-radius: var(--bb-radius-sm);
  content: "";
  display: block;
  height: 56px;
  width: 55%;
}

.bb-token-preview-wrap::before {
  color: var(--bb-color-intelligence);
  content: "Text wrap preview shows copy behavior";
  display: block;
  font-size: var(--bb-type-body);
  max-width: 12ch;
  text-wrap: var(--bb-body-wrap);
}

.bb-token-preview-overlay-type { background: var(--bb-pa-overlay-type-band); }
.bb-token-preview-overlay-focal { background: var(--bb-pa-overlay-focal); }
.bb-token-preview-overlay-outer { background: var(--bb-pa-overlay-outer); }
.bb-token-preview-overlay-safe { background: var(--bb-pa-overlay-safe); }
.bb-token-preview-label-bg { background: var(--bb-pa-label-bg); color: var(--bb-pa-label-text); }
.bb-token-preview-label-text { color: var(--bb-pa-label-text); }
.bb-token-preview-pa-scrim { background: var(--bb-pa-scrim), var(--bb-color-signal); }

.bb-token-preview-overlay-type::before,
.bb-token-preview-overlay-focal::before,
.bb-token-preview-overlay-outer::before,
.bb-token-preview-overlay-safe::before,
.bb-token-preview-label-bg::before,
.bb-token-preview-label-text::before,
.bb-token-preview-pa-scrim::before {
  content: "Overlay preview";
}

.bb-palette-collective { background: var(--bb-color-collective); }
.bb-token-preview-collective { background: var(--bb-color-collective); }
.bb-token-preview-h3 { font-size: var(--bb-type-h3); font-weight: var(--bb-title-weight); letter-spacing: var(--bb-title-tracking); line-height: var(--bb-title-leading); }
.bb-token-preview-glass { background: var(--bb-glass-bg); border: var(--bb-glass-border); box-shadow: var(--bb-glass-shadow); }
.bb-token-preview-hero-aspect { aspect-ratio: var(--bb-hero-aspect); background: var(--bb-color-signal); }
.bb-token-preview-category { font-size: var(--bb-split-category-size); letter-spacing: 0.14em; text-transform: uppercase; }
.bb-token-preview-payoff-wrap::before { color: var(--bb-color-intelligence); content: "Balanced payoff copy"; display: block; font-size: var(--bb-type-body); max-width: 12ch; text-wrap: var(--bb-payoff-wrap); }