/* ==========================================================================
   About - credibility-first layout.
   Serif never goes above 500: the heavier Ivy Mode cuts read badly.
   ========================================================================== */

/* The hero now uses the shared .page-hero from akp-directory.css so About,
   the directory and the blog all open the same way. */

/* ---------- process ---------- */
.ab-process{padding:72px 0 10px}
.ab-process .section-title{margin-bottom:46px}
.ab-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.ab-steps li{position:relative;padding-top:26px}
.ab-steps li:before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--border);
}
.ab-steps li:first-child:before{background:var(--primary)}
.ab-step-n{
  display:block;font-family:"Ivy Mode",Georgia,serif;font-weight:500;
  font-size:14px;letter-spacing:1px;color:var(--primary);margin-bottom:12px;
}
body .ab-steps h3{font-size:19px;font-weight:500;letter-spacing:-.3px;margin:0 0 8px}
.ab-steps p{color:var(--ink-soft);font-size:14px;line-height:1.65;margin:0}

/* ---------- verified / never ---------- */
/* Prose left, the two cards stacked in a sidebar right. The cards come first
   in the markup so they stay near the heading without JS; grid placement puts
   them in column 2. */
.ab-main{padding:72px 0}
.ab-main-grid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:48px;align-items:start;
}
.ab-main-copy{grid-column:1;grid-row:1}
/* A proper serif heading, not a tiny orange kicker above a near-identical
   h2. Ivy Mode stays at 500. */
body .ab-main-title{
  font-size:clamp(26px,3vw,34px);font-weight:500;letter-spacing:-.8px;
  line-height:1.15;margin:0 0 20px;color:var(--ink);
}
/* lead paragraph sets up the sections that follow */
.ab-main-copy .article-body > p:first-child{
  font-size:17px;line-height:1.7;color:var(--ink-soft);margin-bottom:26px;
}
body .ab-main-copy .article-body h2{
  font-size:21px;font-weight:500;letter-spacing:-.4px;margin:30px 0 10px;
}
.ab-main-side{
  grid-column:2;grid-row:1;
  display:flex;flex-direction:column;gap:18px;
  position:sticky;top:24px;
}
.ab-card{border-radius:var(--radius-lg);padding:26px 24px}
.ab-card-light{background:var(--surface);border:1px solid var(--border)}
.ab-card-dark{background:var(--charcoal);color:#fff}
.ab-card-icon{
  display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;font-size:14px;margin-bottom:14px;
}
.ab-card-light .ab-card-icon{background:var(--primary-tint);color:var(--primary)}
.ab-card-dark .ab-card-icon{background:rgba(255,255,255,.12);color:#fff}
body .ab-card h2{font-size:19px;font-weight:500;letter-spacing:-.4px;margin:0 0 10px}
body .ab-card-dark h2{color:#fff}
.ab-card p{font-size:14px;line-height:1.65;margin:0 0 16px}
.ab-card-light p{color:var(--ink-soft)}
.ab-card-dark p{color:rgba(255,255,255,.75)}
.ab-card-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;transition:gap .2s}
.ab-card-light .ab-card-link{color:var(--primary)}
.ab-card-dark .ab-card-link{color:#fff}
.ab-card-link:hover{gap:11px}
.ab-card-link i{font-size:12px}

/* ---------- coverage ---------- */
.ab-coverage{padding:70px 0;background:var(--surface)}
.ab-coverage .section-title{margin-bottom:28px}
.ab-area-chips{display:flex;flex-wrap:wrap;gap:10px}
.ab-area-chips a{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--border);border-radius:999px;
  padding:10px 16px;font-size:14px;font-weight:600;color:var(--ink);transition:all .2s;
}
.ab-area-chips a:hover{border-color:var(--primary);color:var(--primary)}
.ab-area-chips a span{
  display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:700;
}
.ab-area-chips a:hover span{background:var(--primary-tint);color:var(--primary-dark)}

.ab-cuisines{padding:76px 0}
.ab-cuisines .section-title{margin-bottom:34px}

/* ---------- cta ---------- */
.ab-cta{background:var(--charcoal);color:#fff;padding:64px 0}
.ab-cta-grid{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
body .ab-cta h2{color:#fff;font-size:clamp(24px,2.8vw,34px);font-weight:500;letter-spacing:-.7px;margin:0 0 10px}
.ab-cta p{color:rgba(255,255,255,.66);font-size:15px;margin:0;max-width:520px;line-height:1.6}
.ab-cta-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ab-ghost{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:13px 26px;font-size:14px;font-weight:700;color:#fff;transition:all .2s;
}
.ab-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .ab-steps{grid-template-columns:repeat(2,1fr);gap:24px}
  .ab-main-grid{grid-template-columns:1fr;gap:34px}
  .ab-main-side{grid-column:1;grid-row:2;position:static}
}
@media (max-width:760px){
  .ab-process{padding:56px 0 6px}
  .ab-process .section-title{margin-bottom:32px}
  .ab-steps{grid-template-columns:1fr;gap:22px}
  .ab-main{padding:52px 0}
  .ab-card{padding:24px 20px}
  .ab-coverage,.ab-cuisines{padding:52px 0}
  .ab-cta{padding:48px 0}
  .ab-cta-actions{width:100%}
}