/* About page — premium presentation layer over the existing structure.
   Builds on listing.css (hero) and home.css (feature-split, tick-list) and
   the global tokens/components; adds only About-specific polish. */

/* --- Hero ------------------------------------------------------------ */
.about-hero { padding-block: var(--sp-8) var(--sp-7); }
.about-hero .container { max-width: 940px; }
.about-hero h1 {
  font-size: var(--fs-4xl);
  line-height: 1.05;
  max-width: 18ch;
}
.about-hero__lead {
  max-width: 60ch;
  margin-top: var(--sp-4) !important;
}
.about-hero__pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 0;
  margin: var(--sp-6) 0 0;
}
.about-hero__pills li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .5rem .9rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-pill);
  backdrop-filter: blur(2px);
}
.about-hero__pills svg { color: var(--sky-400); flex-shrink: 0; }

/* --- Story ----------------------------------------------------------- */
.about-story .feature-split { align-items: start; gap: var(--sp-8); }
.about-story h2 { max-width: 20ch; letter-spacing: -0.01em; }
.about-story p { color: var(--ink-700); line-height: 1.75; max-width: 56ch; }
.about-story p + p { margin-top: var(--sp-4); }
/* Restrained highlight for a couple of key phrases — a soft brand tint, not
   a loud marker. */
.about-mark {
  background: linear-gradient(transparent 62%, var(--tm-accent-tint) 0);
  padding: 0 .1em;
  font-weight: 600;
  color: var(--tm-text-primary);
}

/* The "what we will not do" promise card. Semantics: these are things we
   avoid, so each row carries a clear "no" mark rather than a tick. */
.about-promise { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.about-promise .panel__head { background: var(--tm-primary); border-bottom: 0; }
.about-promise .panel__head h3 {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.about-promise .panel__head svg { color: var(--tm-accent-light); }
.about-nolist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.about-nolist li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-700);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.about-nolist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* --- Audience cards -------------------------------------------------- */
.about-audience { gap: var(--sp-5); }
.about-audience .card { display: flex; flex-direction: column; }
.about-audience .card__body { padding: var(--sp-5); }
.about-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--sky-100);
  color: var(--teal-700);
  margin-bottom: var(--sp-4);
}
/* A quiet accent line that appears on hover, tying the grid together. */
.about-audience .card { position: relative; }
.about-audience .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-600), var(--tm-accent));
  opacity: 0;
  transition: opacity var(--transition);
}
.about-audience .card:hover::before { opacity: 1; }

/* --- Closing CTA band ------------------------------------------------ */
.about-cta {
  background:
    radial-gradient(ellipse 70% 120% at 88% 0%, rgba(86, 156, 250, .30), transparent 60%),
    linear-gradient(135deg, var(--tm-primary), var(--tm-text-primary));
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-6), 5vw, var(--sp-8)) var(--sp-5);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.about-cta .eyebrow { color: var(--sky-400); justify-content: center; }
.about-cta h2 {
  color: #fff;
  font-size: var(--fs-3xl);
  letter-spacing: -0.02em;
  margin: 0 auto var(--sp-3);
  max-width: 20ch;
}
.about-cta p {
  color: rgba(255, 255, 255, .8);
  max-width: 52ch;
  margin: 0 auto var(--sp-6);
  font-size: var(--fs-lg);
  line-height: 1.6;
}
.about-cta__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}
.about-cta .btn--outline,
.about-cta .btn--outline:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .08);
}
.about-cta .btn--outline:hover:not(:disabled) { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); }
.about-cta .btn svg { transition: transform var(--transition); }
.about-cta .btn:hover svg { transform: translateX(3px); }

/* --- Scroll reveal (progressive; JS adds .js-reveal, reduced-motion opts
   out entirely so content is always visible) -------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .about-promise { position: static; margin-top: var(--sp-5); }
}
@media (max-width: 560px) {
  .about-hero { padding-block: var(--sp-7) var(--sp-6); }
  .about-hero__pills { gap: var(--sp-2); }
  .about-cta__actions .btn { width: 100%; }
}