/* About us, from the designer's Figma frame (About us · Home · desktop, 1280 wide).
   Shapes, sizes and positions follow the frame; --u scales them with the viewport like the home hero. */
.about-hero { height: calc(318 * var(--u)); }
.about-hero h1 { width: calc(736 * var(--u)); }
.about-star3 { left: 16.875%; top: calc(83 * var(--u)); width: calc(66 * var(--u)); }
.about-star4 { left: 66.328%; top: calc(8 * var(--u)); width: calc(54 * var(--u)); }
.about-star7 { left: 78.75%; top: calc(116 * var(--u)); width: calc(53 * var(--u)); }
.about-star8 { left: 35.938%; top: calc(-9 * var(--u)); width: calc(68 * var(--u)); }
.about-star9 { left: 9.974%; top: calc(290 * var(--u)); width: calc(75.7 * var(--u)); transform: rotate(14.94deg); }
.about-star10 { left: 87.188%; top: calc(34 * var(--u)); width: calc(56 * var(--u)); }
.about-star2 { left: 2.734%; top: calc(53 * var(--u)); width: calc(48 * var(--u)); }
.about-star6 { left: 83.438%; top: calc(290 * var(--u)); width: calc(48 * var(--u)); }

.about { width: min(703px, calc(100% - 40px)); margin: 9px auto 85px; color: var(--ink); }
.about > * { max-width: 680px; }
.about .eyebrow { margin: 0; }
.about-title { padding-top: 14px; color: var(--accent); font-size: 40px; font-weight: 600; line-height: 1.2; letter-spacing: -1.6px; }
.about-lead { margin-top: 16px; font-size: 16px; line-height: 1.6; }
.about-lead + .about-lead { margin-top: 25.6px; }
.about section { padding-top: 30px; }
.about section:first-of-type { padding-top: 32px; }
.about h2:not(.about-title) { color: var(--accent); font-size: 27px; font-weight: 700; line-height: 1.7; letter-spacing: -0.3px; }
.about-note { color: var(--notice-edge); font-size: 17px; font-weight: 700; line-height: 1.7; letter-spacing: -0.3px; }
.about section p { margin-top: 8px; font-size: 14px; line-height: 1.6; }
.about strong { font-weight: 700; }

.about-footer { background: var(--button); color: var(--page); }
.about-footer-inner { width: min(696px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 20px; }
.about-footer-title { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -1.6px; }
.about-cta { display: flex; align-items: center; justify-content: center; width: min(313px, 100%); min-height: 48px; margin-top: 18px;
  border: 1px solid var(--button); border-radius: 7px; background: var(--page); color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.about-cta:hover { background: #ffffff; }
.about-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 24px; font-size: 12px; line-height: 1.6; }
.about-footer-row nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.about-footer-row a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #ffffff; text-underline-offset: 3px; }
.about-footer-row .about-how { text-decoration: none; }
.about-footer a:focus-visible { outline-color: var(--page); }

@media (max-width: 600px) {
  .about-hero { height: calc(200 * var(--u)); }
  .about-hero h1 { width: calc(330 * var(--u)); padding-top: calc(62 * var(--u)); font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); }
  /* The designer's phone arrangement of the same shapes (as on the home page), with the
     asterisk moved clear of this page's longer headline. */
  .about-star3 { left: 75.641%; top: calc(5 * var(--u)); width: calc(32 * var(--u)); }
  .about-star4 { left: 29.487%; top: calc(170 * var(--u)); width: calc(23 * var(--u)); }
  .about-star6 { left: 47%; top: calc(8 * var(--u)); width: calc(21 * var(--u)); }
  .about-star7 { left: 14.615%; top: calc(13.75 * var(--u)); width: calc(30 * var(--u)); transform: rotate(-12.4deg); }
  .about-star8 { left: 72.051%; top: calc(170 * var(--u)); width: calc(32 * var(--u)); }
  .about-star9 { left: 87.923%; top: calc(62 * var(--u)); width: calc(32.2 * var(--u)); transform: rotate(24.6deg); }
  .about-star10 { left: 8.346%; top: calc(160 * var(--u)); width: calc(23.9 * var(--u)); transform: rotate(-21.7deg); }
  .about-star2 { left: 87.436%; top: calc(125 * var(--u)); width: calc(31 * var(--u)); }
  .about { margin-top: 24px; margin-bottom: 56px; }
  .about-title { font-size: 30px; letter-spacing: -1.2px; }
  .about h2:not(.about-title) { font-size: 22px; line-height: 1.4; }
  .about-note { line-height: 1.4; }
  .about section h2 + p, .about-note + p { margin-top: 6px; }
  .about-footer-row { flex-direction: column; align-items: flex-start; }
}