.about-hero{ padding:56px 24px 28px; }
.about-hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
.about-hero h1{ font-size:clamp(30px, 4.6vw, 46px); margin-bottom:14px; }
.about-hero .hero-sub{ max-width:620px; margin:0 auto 26px; }
.about-hero .hero-actions{ justify-content:center; }

.about-main{ max-width:960px; margin:0 auto; padding:0 20px 40px; }
.about-block{ padding:34px 0; }
.about-block h2{ font-size:25px; margin-bottom:14px; line-height:1.25; }
.about-block > p{ font-size:15px; color:var(--ink-soft); line-height:1.85; max-width:720px; margin-bottom:12px; }
.about-block .eyebrow{ margin-bottom:12px; }

/* compact highlight pills, replacing the old full feature-card grid */
.highlight-row{
  list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px;
}
.highlight-row li{
  font-size:13.5px; font-weight:700; color:var(--blue-dark); background:var(--blue-tint);
  border-radius:999px; padding:8px 16px;
}

/* supported cards: flat logo rows, no boxed panels */
.supported-note{
  background:var(--blue-tint); border-radius:var(--radius-sm); padding:12px 16px;
  font-size:13.5px; color:var(--blue-dark); max-width:720px; margin-top:20px;
}
.brand-flat-group{ margin-top:22px; }
.brand-flat-label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-faint); margin-bottom:12px; }
.brand-flat-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.brand-flat-logo{
  display:flex; align-items:center; justify-content:center; height:44px; padding:0 16px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm);
}
.brand-flat-logo img{ height:22px; width:auto; max-width:120px; object-fit:contain; }
.brand-flat-text{ font-size:12.5px; font-weight:700; color:var(--ink); }
.brand-flat-logo.tinted{ background:var(--tint-color); border-color:transparent; }
.brand-flat-text.tinted{ color:#fff; }
.not-supported{ margin-top:18px; font-size:13px; color:var(--ink-soft); line-height:1.7; max-width:720px; }
.disclaimer{ margin-top:12px; font-size:10.5px; color:var(--ink-faint); line-height:1.6; max-width:720px; }

/* ---------- guide: getting the files, using the tool ---------- */
.guide-hero{ padding-bottom:20px; }
.guide-companies{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:20px; }
.guide-company{
  display:flex; flex-direction:column; gap:12px; padding:20px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.guide-company-head{ display:flex; align-items:center; gap:12px; }
.guide-company-head h3{ font-size:17px; margin:0; }
.guide-company-head .brand-flat-logo{ height:40px; padding:0 12px; }
.guide-steps{ margin:0; padding-inline-start:20px; font-size:14px; line-height:1.75; color:var(--ink); }
.guide-steps li{ margin-bottom:6px; padding-inline-start:2px; }
.guide-steps li::marker{ color:var(--blue-dark); font-weight:700; }
.guide-site{ margin-top:auto; font-size:13px; font-weight:700; color:var(--blue-dark); }
.guide-site:hover{ text-decoration:underline; text-underline-offset:3px; }

.guide-tips{ margin-top:22px; background:var(--blue-tint); border-radius:var(--radius); padding:18px 22px; max-width:820px; }
.guide-tips h3{ font-size:15px; margin:0 0 8px; color:var(--blue-dark); }
.guide-tips ul{ margin:0; padding-inline-start:20px; font-size:13.8px; line-height:1.75; color:var(--ink); }
.guide-tips li{ margin-bottom:4px; }

.guide-flow{ list-style:none; margin:20px 0 0; padding:0; counter-reset:step; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 28px; }
.guide-flow li{ counter-increment:step; position:relative; padding-inline-start:48px; min-height:36px; }
.guide-flow li::before{
  content:counter(step); position:absolute; inset-inline-start:0; top:0;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--blue-tint); color:var(--blue-dark); font-weight:800; font-size:14px;
}
.guide-flow h3{ font-size:15.5px; margin:5px 0 4px; }
.guide-flow p{ font-size:14px; color:var(--ink-soft); line-height:1.75; margin:0; }

.guide-cta-actions{ justify-content:center; }
.cta-band .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.cta-band .btn-outline:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.1); }

@media (max-width:900px){
  .guide-companies{ grid-template-columns:minmax(0, 1fr); }
  .guide-flow{ grid-template-columns:minmax(0, 1fr); }
}