/* About page. Prefix: ab. Builds on veris.css, home.css (sec-hd, proof, go), capture.css (chero) and flow.css. */

/* ---- 01 Hero: what Veris keeps, in one card ---- */
.abhero .chero__in { align-items: center; }
.ablg {
  position: relative; border-radius: var(--r-xl); padding: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(180deg, var(--forest-2), var(--forest));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 80px -30px rgba(0,0,0,.6);
  overflow: hidden;
}
.ablg::before {
  content: ""; position: absolute; right: -20%; top: -30%; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(46,255,213,.16), transparent 70%); pointer-events: none;
}
.ablg__bar { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.09); }
.ablg__bar b { font: 600 14px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.ablg__bar em { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-style: normal; }
.ablg__rows { position: relative; list-style: none; margin: 0; padding: 0; }
.ablg__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.ablg__rows li:last-child { border-bottom: 0; }
.ablg__k { font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.ablg__k small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.ablg__v { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ablg__v svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ablg__v--none { color: var(--mint); }
.ablg__v--out { color: var(--ink); }
.ablg__ft { position: relative; margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.ablg__ft a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color 160ms var(--out); }
@media (hover: hover) and (pointer: fine) { .ablg__ft a:hover { color: var(--mint); } }

/* ---- Numbers strip ---- */
.abstat { padding-block: clamp(36px, 5vw, 64px) 0; }
.abstat__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.abstat__list li { padding: 26px 24px 8px 0; }
.abstat__list li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.abstat__n { display: block; font: 700 clamp(38px, 4.4vw, 58px)/1 var(--f-display); letter-spacing: -.04em; }
.abstat__n i { font-style: normal; color: var(--mint); }
.abstat__l { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); max-width: 15rem; }

/* ---- 02 The problem ---- */
.abprob, .abp, .abn, .abwhy { padding-block: clamp(64px, 9vw, 120px) 0; }
.abprob__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.abprob__c { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.abprob__n { font: 500 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink-3); }
.abprob__q { font: 600 clamp(18px, 1.6vw, 21px)/1.3 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.abprob__a { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.abprob__a b { display: block; margin-bottom: 6px; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }

/* ---- 03 Principles ---- */
.abp__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.abp__c { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 24px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms var(--out), background-color 200ms var(--out); }
.abp__n { font: 500 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--mint); }
.abp__t { font: 700 clamp(19px, 1.7vw, 22px)/1.2 var(--f-display); letter-spacing: -.025em; }
.abp__b { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.abp__p { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line-2); font: 400 12.5px/1.55 var(--f-mono); color: var(--ink-3); }
.abp__p b { display: block; margin-bottom: 5px; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .abp__c:hover { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); }
}

/* ---- 04 Out of scope by design ---- */
.abn__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.abn__c { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.abn__not { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.abn__not i { position: relative; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.abn__not i::after { content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink-3); rotate: -45deg; }
.abn__t { font: 600 clamp(18px, 1.6vw, 20px)/1.25 var(--f-display); letter-spacing: -.02em; }
.abn__b { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.abn__lead { margin-top: 28px; max-width: 46rem; font-size: 16px; line-height: 1.65; color: var(--ink-2); }

/* ---- 05 Why we are building it ---- */
.abwhy__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px 72px; align-items: start; }
.abwhy__q { font: 700 clamp(30px, 3.6vw, 48px)/1.1 var(--f-display); letter-spacing: -.035em; }
.abwhy__q span { color: var(--ink-3); }
.abwhy__p { margin-top: 22px; max-width: 34rem; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.abwhy__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.abwhy__list li { padding: 20px 22px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.abwhy__list b { display: block; font: 700 18px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.abwhy__list span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* ---- 06 Company ---- */
.abco { padding-block: clamp(56px, 8vw, 96px) 0; }
.abco__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 22px 26px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.abco__id { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.abco__id b { color: var(--ink); font-weight: 600; }
.abco__links { display: flex; flex-wrap: wrap; gap: 8px; }
.abco__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--rf); font: 500 13.5px/1 var(--f-body); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 160ms var(--out), scale 120ms var(--out); }
.abco__links a:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .abco__links a:hover { background: var(--bg-3); } }

/* ---- Scroll motion (shares flow.css keyframes; rows rise in as they arrive) ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .has-motion :is(.abstat__list, .abprob__list, .abp__list, .abn__list, .abwhy__list) > * {
      animation: f-in var(--out) backwards; animation-timeline: view();
      animation-range: entry 0% cover calc(32% + var(--i, 0) * 4%);
      --fy: 40px;
    }
    .has-motion :is(.abstat__list, .abprob__list, .abp__list, .abn__list, .abwhy__list) > :nth-child(3n+2) { --i: 1; }
    .has-motion :is(.abstat__list, .abprob__list, .abp__list, .abn__list, .abwhy__list) > :nth-child(3n+3) { --i: 2; }
    .has-motion .ablg { animation: rise 900ms var(--out) 200ms both; }
    .has-motion .abco__in { animation: f-in var(--out) backwards; animation-timeline: view(); animation-range: entry 0% cover 36%; --fy: 28px; }
  }
}

/* ---- Tablet and phone ---- */
@media (max-width: 960px) {
  .abprob__list, .abp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abwhy__in { grid-template-columns: minmax(0, 1fr); }
  .abstat__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abstat__list li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .abstat__list li:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 26px; }
}
@media (max-width: 640px) {
  .abprob__list, .abp__list, .abn__list { grid-template-columns: minmax(0, 1fr); }
  .abprob__c, .abp__c { padding: 22px 20px; }
  .ablg__rows li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .abco__in { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .abp__c, .abco__links a { transition: none; }
}