/* /brands — the public page for brands (main.brands_page). Loaded after
   /common/fonts.css, tokens.css and base.css. Fraunces for the headline only. */
@font-face { font-family:'Fraunces'; font-weight:600; font-style:normal; font-display:swap;
             unicode-range:U+0041-005A, U+0061-007A;
             src:url('/assets/fonts/Fraunces-SemiBold.ttf') format('truetype'); }
.bl { max-width: 1120px; margin: 0 auto; padding: 0 32px 64px; }
.bl-top { display: flex; align-items: center; height: 64px; }
.bl-logo { display: inline-flex; align-items: center; gap: 9px; font: 600 var(--fs-h1)/20px var(--ff-display); color: var(--ink-primary); }
.bl-logo img { width: 20px; height: 20px; }
.bl-logo em { font: 500 var(--fs-sm)/1 var(--ff-sans); font-style: normal; color: var(--ink-tertiary); margin-left: 2px; }
.bl-link { margin-left: auto; font: 500 var(--fs-md)/1 var(--ff-sans); color: var(--ink-primary); text-decoration: none; padding: 8px 12px; border-radius: var(--r-8); }
.bl-link:hover { background: var(--n-100); text-decoration: none; }
.bl-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; padding: 48px 0 56px; }
.bl-eyebrow { margin: 0 0 12px; font: 600 var(--fs-xs)/1 var(--ff-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.bl h1 { margin: 0 0 16px; font: 600 52px/1.05 var(--ff-display); letter-spacing: -.02em; color: var(--ink-primary); }
.bl-lede { margin: 0 0 28px; font: 400 18px/28px var(--ff-sans); color: var(--ink-secondary); max-width: 560px; }
.bl-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.bl a.bl-btn { height: 42px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: var(--r-8);
  font: 500 var(--fs-md)/1 var(--ff-sans); text-decoration: none; border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--ink-primary); transition: background var(--dur-fast), border-color var(--dur-fast); }
.bl a.bl-btn:hover { background: var(--n-100); text-decoration: none; }
.bl a.bl-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.bl a.bl-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.bl-fine { margin: 12px 0 0; font: 400 var(--fs-sm)/19px var(--ff-sans); color: var(--ink-tertiary); }
.bl-phone { background: #EFE7DD; border-radius: 24px; padding: 0 14px 18px; box-shadow: 0 1px 0 var(--border-hairline), 0 24px 48px -24px rgba(20, 30, 25, .35);
  display: flex; flex-direction: column; gap: 10px; max-width: 380px; justify-self: end; width: 100%; }
.bl-phone-h { margin: 0 -14px 4px; padding: 14px 18px; background: #F7F4EF; border-radius: 24px 24px 0 0; font: 600 var(--fs-md)/1 var(--ff-sans); color: var(--ink-primary); }
.bl-phone-h small { font-weight: 400; color: var(--ink-tertiary); margin-left: 4px; }
.bl-msg { background: #fff; border-radius: 10px; max-width: 92%; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); overflow: hidden; }
.bl-msg-b { padding: 9px 11px 8px; font: 400 var(--fs-sm)/19px var(--ff-sans); color: #111; }
.bl-msg-f { display: block; margin-top: 4px; font-size: var(--fs-xs); color: #8a8a8a; }
.bl-msg-btns { display: flex; flex-direction: column; border-top: 1px solid #eee; }
.bl-msg-btns span { text-align: center; padding: 8px; font: 500 var(--fs-sm)/1 var(--ff-sans); color: #0F7A5A; }
.bl-msg-btns span + span { border-top: 1px solid #eee; }
.bl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 8px 0 48px; }
.bl-step { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-12, 12px); padding: 22px; }
.bl-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--n-100); font: 600 var(--fs-sm)/1 var(--ff-sans); color: var(--ink-secondary); }
.bl-step h3 { margin: 14px 0 6px; font: 600 var(--fs-h2, 17px)/22px var(--ff-sans); color: var(--ink-primary); }
.bl-step p { margin: 0; font: 400 var(--fs-body)/21px var(--ff-sans); color: var(--ink-secondary); }
.bl-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 36px 32px; margin-bottom: 48px;
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-12, 12px); }
.bl h2 { margin: 0 0 10px; font: 600 28px/1.15 var(--ff-display); color: var(--ink-primary); }
.bl-proof-copy p, .bl-end p { margin: 0; font: 400 var(--fs-md)/24px var(--ff-sans); color: var(--ink-secondary); }
.bl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bl-stat { display: flex; flex-direction: column; gap: 6px; }
.bl-stat b { font: 600 34px/1 var(--ff-sans); color: var(--ink-primary); letter-spacing: -.02em; }
.bl-stat span { font: 400 var(--fs-sm)/18px var(--ff-sans); color: var(--ink-tertiary); }
.bl-eg { grid-column: 2; margin-top: -20px; }
.bl-end { text-align: center; padding: 8px 0 0; }
.bl-end p { margin: 0 auto 20px; max-width: 520px; }
.bl-end .bl-ctas { justify-content: center; }
@media (max-width: 899px) {
  .bl { padding: 0 20px 48px; }
  .bl-hero, .bl-proof { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 24px; }
  .bl h1 { font-size: 38px; }
  .bl-phone { justify-self: stretch; max-width: none; }
  .bl-steps { grid-template-columns: minmax(0, 1fr); }
  .bl-eg { grid-column: 1; margin-top: 0; }
}