/* About-us page — a PORT of the design (.local/simoptions.com/About-Us.dc.html).
   Declarations are the design's, verbatim, on this page's existing class names;
   the two brand hexes resolve through the theme tokens rather than being
   restated. The markup already matched the design's structure (heading, intro
   paragraphs, then a column of outlined-icon items), so only the skin moved. */

.about.section { padding: 64px 24px 90px; background: #fff; }
.about.section > .container { max-width: 900px; margin: 0 auto; padding: 0; }

.about__body { max-width: 900px; margin: 0 auto; }

/* The design keeps the section heading LEFT-aligned with the copy — the
   previous build centred it. */
.about__body h2 {
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--ink-800);
  margin: 0 0 20px;
  line-height: 1.2;
  text-align: left;
}

.about__body p {
  font-size: var(--text-md);
  color: var(--ink-800);
  line-height: 1.7;
  margin: 0 0 18px;
}

.about__body p:last-child { margin-bottom: 0; }

/* Benefits: a column of items, each a ringed circular icon beside a title +
   description. Two nested circles in the design — a pale disc under a
   purple-outlined ring. */
.about-benefits { margin-top: 44px; }

.about-benefits__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-benefits__items li { display: flex; gap: 22px; align-items: flex-start; }

.about-benefits__icon {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f8fbff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The inner ring. It is a pseudo-element, NOT the <i>: the theme icons are CSS
   masks sized 1em and filled with currentColor, so resizing the glyph element
   would stretch the mask and paint the whole box. */
.about-benefits__icon::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
}

.about-benefits__icon i { color: var(--color-primary); font-size: var(--text-2xl); }

.about-benefits__text h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink-800);
  margin: 0 0 10px;
}

.about-benefits__text p {
  font-size: var(--text-base);
  color: var(--ink-800);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .about.section { padding: 40px 20px 60px; }
  .about__body h2 { font-size: var(--text-h3); }
  .about-benefits__items { gap: 28px; }
  .about-benefits__items li { gap: 16px; }
}