:root {
  --color-primary-fixed-dim:      #fab97f;
  --color-surface:                #fbf9f8;
  --color-surface-low:            #f5f3f3;
  --color-surface-container:      #efeded;
  --color-surface-high:           #e9e8e7;
  --color-surface-highest:        #e4e2e2;
  --color-surface-dim:            #dbdad9;
  --color-on-background:          #1b1c1c;
  --color-on-surface:             #1b1c1c;
  --color-on-surface-variant:     #51443a;
  --color-outline:                #837469;
  --color-outline-variant:        #d6c3b6;
  --color-inverse-on-surface:     #f2f0f0;
  --color-surface-variant:        #e4e2e2;
  --color-surface-tint:           #845323;

  --font-family:    'Roboto Condensed', sans-serif;
}

.label-caps {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- CTA Section ---------- */
@media (max-width: 767px) {
  .font-body-lg { margin-bottom: 1.25rem !important; font-size: 1rem; }
}

.icon-circle-sm
{
width: 50px;
height: 50px;
}

.icon-circle-lg {
width: 80px;
height: 80px;
}


/* =========================================
   How It Works Section
   ========================================= */
.how-it-works-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--btn-bg-dark);
}

.how-it-works-divider {
    height: 2px;
    width: 60px;
    background-color: var(--btn-bg-dark);
}

.how-it-works-step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
}

.how-it-works-text {
    flex: 1;
}

.how-it-works-hr {
    border-top: 1px solid var(--color-outline-variant);
    opacity: 0.5;
    margin: 0;
}

/* Tablet and up — switch to centered column layout */
@media (min-width: 768px) {
    .how-it-works-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.how-it-works-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--color-on-surface);
}

.how-it-works-step-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-on-surface);
}