/* =============================================================================
   03-patterns.css — reusable text & surface styles from Figma type board.
   Default classes use Haskoy where both families exist; add --mono for Basically A Mono.
   ============================================================================= */

.eyebrow {
  font-family: var(--font-eyebrow-family);
  font-size: var(--font-eyebrow-size);
  font-weight: var(--font-eyebrow-weight);
  line-height: var(--font-eyebrow-line);
  letter-spacing: var(--font-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.display {
  font-family: var(--font-display-family);
  font-size: clamp(2.5rem, 8vw, var(--font-display-size));
  font-weight: var(--font-display-weight);
  line-height: var(--font-display-line-ratio);
  letter-spacing: var(--font-display-tracking);
  color: var(--text);
}

.display--size-mobile {
  font-size: var(--font-display-size-mobile);
  line-height: calc(var(--font-display-line-mobile) / var(--font-display-size-mobile));
  letter-spacing: var(--font-display-tracking-mobile);
}

@media (min-width: 40rem) {
  .display.display--size-mobile {
    font-size: clamp(2.5rem, 8vw, var(--font-display-size));
    line-height: var(--font-display-line-ratio);
    letter-spacing: var(--font-display-tracking);
  }
}

.display-s {
  font-family: var(--font-display-s-family);
  font-size: var(--font-display-s-size);
  font-weight: var(--font-display-s-weight);
  line-height: var(--font-display-s-line-ratio);
  letter-spacing: var(--font-display-s-tracking);
  color: var(--text);
}

/* Illustrated display — structured lines + inline art (scales with font-size / lh) */
.display--illustrated {
  display: block;
  --display-art-height: 2lh;
  --display-art-gap: var(--d-2);
}

.display__line {
  display: block;
}

.display__line--with-art {
  display: flex;
  align-items: center;
  gap: var(--display-art-gap);
}

.display__art {
  flex-shrink: 0;
  width: auto;
  height: var(--display-art-height);
}

@supports not (height: 1lh) {
  .display__art {
    height: 2.4em;
  }
}

.display--illustrated-desktop {
  display: none;
}

.display--illustrated-mobile {
  display: block;
}

@media (min-width: 40rem) {
  .display--illustrated-desktop {
    display: block;
  }

  .display--illustrated-mobile {
    display: none;
  }
}

.body {
  font-family: var(--font-body-family);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line);
  letter-spacing: var(--font-body-tracking);
  color: var(--text);
}

.body--mono {
  font-family: var(--font-body-mono-family);
  font-size: var(--font-body-mono-size);
  font-weight: var(--font-body-mono-weight);
  line-height: var(--font-body-mono-line);
  letter-spacing: var(--font-body-mono-tracking);
}

.body--muted {
  color: var(--text-muted);
}

.h1 {
  font-family: var(--font-h1-family);
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  line-height: var(--font-h1-line);
  letter-spacing: var(--font-h1-tracking);
  color: var(--text);
}

.h1--mono {
  font-family: var(--font-h1-mono-family);
  font-size: var(--font-h1-mono-size);
  font-weight: var(--font-h1-mono-weight);
  line-height: var(--font-h1-mono-line);
  letter-spacing: var(--font-h1-mono-tracking);
}

.h2 {
  font-family: var(--font-h2-family);
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  line-height: var(--font-h2-line);
  letter-spacing: var(--font-h2-tracking);
  color: var(--text);
}

.h2--mono {
  font-family: var(--font-h2-mono-family);
  font-size: var(--font-h2-mono-size);
  font-weight: var(--font-h2-mono-weight);
  line-height: var(--font-h2-mono-line);
  letter-spacing: var(--font-h2-mono-tracking);
}

.h3--mono {
  font-family: var(--font-h3-mono-family);
  font-size: var(--font-h3-mono-size);
  font-weight: var(--font-h3-mono-weight);
  line-height: var(--font-h3-mono-line);
  letter-spacing: var(--font-h3-mono-tracking);
  color: var(--text);
}

.h4 {
  font-family: var(--font-h4-family);
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  line-height: var(--font-h4-line);
  letter-spacing: var(--font-h4-tracking);
  color: var(--text);
}

.h4--mono {
  font-family: var(--font-h4-mono-family);
  font-size: var(--font-h4-mono-size);
  font-weight: var(--font-h4-mono-weight);
  line-height: var(--font-h4-mono-line);
  letter-spacing: var(--font-h4-mono-tracking);
}

.meta {
  font-family: var(--font-meta-family);
  font-size: var(--font-meta-size);
  font-weight: var(--font-meta-weight);
  line-height: var(--font-meta-line);
  letter-spacing: var(--font-meta-tracking);
  color: var(--text);
}

.meta--mono {
  font-family: var(--font-meta-mono-family);
  font-size: var(--font-meta-mono-size);
  font-weight: var(--font-meta-mono-weight);
  line-height: var(--font-meta-mono-line);
  letter-spacing: var(--font-meta-mono-tracking);
}

/* Highlighter — composable with any text style; no padding (uses parent line-height) */
.highlight {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.highlight--periwinkle {
  background: var(--periwinkle-50);
}

.highlight--lime {
  background: var(--highlight-lime);
}

/* Block header — title left, eyebrow right (trusted, 3-up, features, etc.) */
.block-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.block-header__title {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.block-header__title-desktop {
  display: none;
}

.block-header__title-mobile {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--d-1);
}

.block-header__subtitle {
  flex-shrink: 0;
  max-width: 8.75rem;
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.block-header--title-wide .block-header__title {
  max-width: 25rem;
}

@media (min-width: 56.25rem) {
  .block-header__title-desktop {
    display: inline;
  }

  .block-header__title-mobile {
    display: none;
  }

  .block-header__subtitle {
    max-width: 12.5rem;
  }

  .block-header__subtitle--wide {
    max-width: 15rem;
  }
}

/* Dotted divider — SVG line + stroke-dasharray (round caps = dots).
   Tokens: --divider-stroke-width, --divider-dash-length, --divider-dash-gap, --divider-color
   Horizontal: <span class="dotted-divider" aria-hidden="true"><svg>…</svg></span>
   Vertical: add .dotted-divider--vertical and swap viewBox/line coords */
.dotted-divider {
  --_stroke: var(--divider-stroke-width, 1.2px);
  --_dash: var(--divider-dash-length, .06px);
  --_gap: var(--divider-dash-gap, 6px);
  --_color: var(--divider-color, var(--color-grey-450));

  display: block;
  flex-shrink: 0;
  width: 100%;
  height: var(--_stroke);
  color: var(--_color);
}

.dotted-divider__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dotted-divider__line {
  stroke: currentColor;
  stroke-width: var(--_stroke);
  stroke-dasharray: var(--_dash) var(--_gap);
  stroke-linecap: round;
  fill: none;
}

.dotted-divider--vertical {
  width: var(--_stroke);
  min-width: var(--_stroke);
  height: auto;
  align-self: stretch;
}

.dotted-divider--vertical .dotted-divider__svg {
  width: 100%;
  height: 100%;
}

/* Dotted border — SVG rect frame (matches divider dash tokens). Use on .dotted-border controls. */
.dotted-border {
  position: relative;
  z-index: 0;
  border: 0;
  background: transparent;
}

.dotted-border__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--color-grey-500);
}

.dotted-border__rect {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--divider-stroke-width, 1.2px);
  stroke-dasharray: var(--divider-dash-length, 0.06px) var(--divider-dash-gap, 4px);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* x/y are 0.6px — shrink so 100% width/height does not overflow the SVG viewport */
  width: calc(100% - var(--divider-stroke-width, 1.2px));
  height: calc(100% - var(--divider-stroke-width, 1.2px));
}

/* Button — Figma 1746:10228; compose with .h4 for label typography */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--d-2);
  margin: 0;
  padding: var(--d-3) var(--d-4);
  border: 0;
  border-radius: var(--radius-m);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

button.btn {
  appearance: none;
  -webkit-appearance: none;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--secondary {
  background: transparent;
  color: var(--text);
}

.btn--secondary:hover {
  background: rgba(197, 193, 186, 0.15);
}

/* Secondary + dotted-border: clip hover fill to radius; SVG uses px coords (no viewBox) */
.btn.dotted-border {
  overflow: hidden;
  isolation: isolate;
}

.btn--secondary.dotted-border:hover {
  background: transparent;
}

.btn--secondary.dotted-border::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

.btn--secondary.dotted-border:hover::before {
  background: rgba(197, 193, 186, 0.15);
}

.btn--primary {
  background: var(--text);
  color: var(--color-grey-100);
}

.btn--primary:hover {
  background: var(--color-grey-600);
}

.btn:focus-visible {
  outline: 2px solid var(--brand-hover);
  outline-offset: 2px;
}

.btn__icon {
  display: block;
  flex-shrink: 0;
}