/* About page only (main.abp / .abp-*). Moved out of Claude's edited shared fp-site.css so the shared file stays byte-identical to live. */

/* ===== About page (abp-*), design polish, 3 Nov 2026. Scoped to main.abp, so no other page changes.
   Tokens only; all motion is CSS and switches off under prefers-reduced-motion (see the end of this block). ===== */
main.abp{overflow-x:clip}
/* hero: copy left, live packet diagram right; stacks below 900px */
.abp-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,48px);align-items:center;isolation:isolate}
.abp-hero::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background-image:radial-gradient(color-mix(in srgb,var(--mute) 30%,transparent) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 75% at 70% 45%,var(--ink),transparent 78%);mask-image:radial-gradient(60% 75% at 70% 45%,var(--ink),transparent 78%);
  animation:abp-drift 40s linear infinite}
.abp-hero::after{content:"";position:absolute;z-index:-1;width:min(560px,90vw);aspect-ratio:1;right:-8%;top:50%;translate:0 -50%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 18%,transparent),transparent);animation:abp-breathe 9s ease-in-out infinite}
.abp-hero h1{font-size:clamp(36px,7vw,64px);max-width:none}
.abp-glitch{display:inline-block;color:var(--acc);animation:abp-glitch 7s steps(1) infinite}
.abp-hero .lede{color:var(--mute)}
@media(max-width:900px){.abp-hero{grid-template-columns:1fr}.abp-hero::after{right:-30%;top:72%}}
.abp-viz{position:relative;width:100%;max-width:480px;justify-self:center;border:1px solid var(--line);border-radius:22px;padding:clamp(10px,2vw,18px);
  background:linear-gradient(160deg,color-mix(in srgb,var(--panel) 92%,transparent),color-mix(in srgb,var(--acc) 6%,var(--panel)));
  box-shadow:0 30px 60px -40px color-mix(in srgb,var(--acc) 60%,transparent),0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent)}
.abp-viz svg{display:block;width:100%;height:auto;overflow:visible}
.abp-viz text{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:var(--ink)}
.abp-viz .abp-lbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;fill:var(--mute)}
.abp-node rect,.abp-rack,.abp-row rect{fill:var(--panel);stroke:var(--line);stroke-width:1.5}
.abp-rack{fill:color-mix(in srgb,var(--code) 70%,var(--panel))}
.abp-node-bar{stroke:var(--line);stroke-width:1.5}
.abp-node-lines{stroke:var(--line);stroke-width:5;stroke-linecap:round}
.abp-dot{fill:var(--line)}
.abp-track{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.abp-pk{fill:none;stroke:var(--acc);stroke-width:4;stroke-linecap:round;stroke-dasharray:8 200;stroke-dashoffset:8;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--acc) 70%,transparent));animation:abp-hop 6s cubic-bezier(.45,0,.3,1) infinite}
.abp-pk-warn{stroke:var(--warn);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--warn) 70%,transparent))}
.abp-pk-info{stroke:var(--info);filter:none}
.abp-pk0{animation-delay:0s}.abp-pk1{animation-delay:1.2s}.abp-pk2{animation-delay:1.45s}.abp-pk3{animation-delay:1.7s}.abp-pk4{animation-delay:1.95s}
.abp-res{fill:var(--panel);stroke:var(--acc);stroke-width:2}
.abp-res-glyph{fill:none;stroke:var(--acc);stroke-width:1.6}
.abp-ring{fill:none;stroke:var(--acc);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0;animation:abp-ping 6s ease-out .9s infinite}
.abp-led{fill:var(--ok)}
.abp-led-b{animation:abp-blink 1.6s steps(2,jump-none) infinite}
.abp-r2 .abp-led-b{animation-delay:.4s}.abp-r4 .abp-led-b{animation-duration:2.3s}
.abp-led-w{fill:var(--warn);animation:abp-blink .9s steps(2,jump-none) infinite}
.abp-tile{transform-box:fill-box;transform-origin:center;animation:abp-tile 6s var(--ui-ease) infinite}
.abp-tile rect{stroke-width:1.5}
.abp-tile path{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.abp-ok rect{fill:color-mix(in srgb,var(--ok) 14%,var(--panel));stroke:var(--ok)}.abp-ok path{stroke:var(--ok)}
.abp-warn rect{fill:color-mix(in srgb,var(--warn) 14%,var(--panel));stroke:var(--warn)}.abp-warn path{stroke:var(--warn)}
.abp-info rect{fill:color-mix(in srgb,var(--info) 14%,var(--panel));stroke:var(--info)}.abp-info path{stroke:var(--info)}
.abp-r1 .abp-tile{animation-delay:1.2s}.abp-r2 .abp-tile{animation-delay:1.45s}.abp-r3 .abp-tile{animation-delay:1.7s}.abp-r4 .abp-tile{animation-delay:1.95s}
.abp-r3 .abp-tile{animation-name:abp-tile,abp-shake;animation-duration:6s,6s;animation-delay:1.7s,1.7s}
.abp-sweep{stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:2;stroke-linecap:round;animation:abp-sweep 6s ease-in-out infinite}
/* sections: number + sticky heading in a side column on wide screens */
.abp-sec{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(18px,4vw,56px);align-items:start}
.abp-head{position:sticky;top:96px}
.abp-num{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:var(--acc)}
.abp-num::after{content:"";width:36px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--acc),transparent)}
.abp-head .sh{font-size:clamp(24px,3vw,30px)}
.abp-body{min-width:0}
@media(max-width:860px){.abp-sec{grid-template-columns:1fr}.abp-head{position:static}}
/* who runs it: copy plus the lab badge with a slow orbiting ring */
.abp-who{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,4vw,40px);align-items:start}
.abp-who .prose p:first-child{margin-top:0;font-size:clamp(17px,1.8vw,19px)}
.abp-badge{position:relative;width:clamp(120px,16vw,168px);aspect-ratio:1;border-radius:50%;padding:6px;isolation:isolate}
.abp-badge::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,var(--acc),transparent 30%,transparent 55%,var(--ok) 70%,transparent 85%,var(--acc));animation:abp-spin 12s linear infinite}
.abp-badge img{display:block;width:100%;height:100%;border-radius:50%;border:4px solid var(--bg)}
@media(max-width:560px){.abp-who{grid-template-columns:1fr}.abp-badge{order:-1}}
/* evidence flow: three steps joined by a line with a packet travelling down it */
.abp-flow{position:relative;display:grid;gap:14px}
.abp-flow::before{content:"";position:absolute;left:clamp(38px,calc(3vw + 20px),46px);top:28px;bottom:28px;width:2px;background:repeating-linear-gradient(var(--line) 0 4px,transparent 4px 9px)}
.abp-flow::after{content:"";position:absolute;z-index:0;left:clamp(35px,calc(3vw + 17px),43px);top:28px;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:abp-fall 5s ease-in-out infinite}
.abp-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;transition:border-color .3s,transform .3s,box-shadow .3s}
.abp-step:hover{border-color:color-mix(in srgb,var(--acc) 55%,var(--line));transform:translateX(4px);box-shadow:0 18px 40px -34px var(--acc)}
.abp-step p{margin:0}
.abp-ic{position:relative;z-index:1;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--ab-soft);color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 30%,var(--line))}
.abp-ic svg,.abp-chip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* claims: pass and fail tiles like the badge's */
.abp-claim{position:relative;overflow:hidden;border-top-width:3px}
.abp-claim-ok{border-top-color:var(--ok)}.abp-claim-no{border-top-color:var(--bad)}
.abp-claim h3{margin-bottom:14px}
.abp-chip{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;margin:0 0 14px;border:1.5px solid}
.abp-claim-ok .abp-chip{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--panel))}
.abp-claim-no .abp-chip{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--panel))}
.abp-claim::after{content:"";position:absolute;inset:auto -30% -60% auto;width:220px;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:.5;background:radial-gradient(closest-side,color-mix(in srgb,var(--ok) 14%,transparent),transparent)}
.abp-claim-no::after{background:radial-gradient(closest-side,color-mix(in srgb,var(--bad) 12%,transparent),transparent)}
.abp-claims+.note{margin-bottom:0}
/* closing pair: sale and corrections side by side */
.abp-duo{max-width:var(--ui-content);margin:0 auto;padding:clamp(44px,7vw,var(--ui-section-gap)) 20px;border-top:1px solid var(--line);display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.abp-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3.4vw,32px);overflow:hidden}
.abp-card .abp-head{position:static}
.abp-card .prose p:last-child{margin-bottom:0}
.abp-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 10%,transparent))}
.abp-card:first-child{background:linear-gradient(170deg,var(--ab-soft),var(--panel) 65%)}
/* scroll reveal (browsers with scroll-driven animations only; everyone else sees the page as is) */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .abp-reveal{animation:abp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .abp-flow .abp-step{animation:abp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes abp-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes abp-drift{to{background-position:220px 110px}}
@keyframes abp-breathe{0%,100%{opacity:.7;scale:1}50%{opacity:1;scale:1.08}}
@keyframes abp-hop{0%{stroke-dashoffset:8;opacity:1}22%{stroke-dashoffset:-100;opacity:1}23%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes abp-ping{0%{opacity:.7;transform:scale(1)}30%,100%{opacity:0;transform:scale(1.7)}}
@keyframes abp-blink{0%{opacity:1}100%{opacity:.25}}
@keyframes abp-tile{0%,18%{opacity:.18;transform:scale(.7)}26%,88%{opacity:1;transform:scale(1)}100%{opacity:.18;transform:scale(.7)}}
@keyframes abp-shake{0%,24%,32%,100%{translate:0}26%{translate:-1.5px 0}28%{translate:1.5px 0}30%{translate:-1px 0}}
@keyframes abp-sweep{0%{transform:translateY(0);opacity:0}10%{opacity:1}80%{opacity:1}90%,100%{transform:translateY(262px);opacity:0}}
@keyframes abp-spin{to{rotate:360deg}}
@keyframes abp-fall{0%{top:28px;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:calc(100% - 36px);opacity:0}}
@keyframes abp-glitch{0%,93%,100%{text-shadow:none;transform:none}94%{text-shadow:-2px 0 color-mix(in srgb,var(--bad) 70%,transparent),2px 0 color-mix(in srgb,var(--ok) 70%,transparent);transform:translateX(1px)}96%{text-shadow:2px 0 color-mix(in srgb,var(--bad) 70%,transparent),-2px 0 color-mix(in srgb,var(--info) 70%,transparent);transform:translateX(-1px)}98%{text-shadow:none;transform:skewX(-6deg)}}
/* reduced motion: the shared rule above stops every animation; this sets the still frame */
@media(prefers-reduced-motion:reduce){
  .abp-pk,.abp-ring,.abp-sweep,.abp-flow::after{opacity:0}
  .abp-tile{opacity:1;transform:none}
  .abp-led-b,.abp-led-w{opacity:1}
  .abp-step:hover{transform:none}
  .abp-reveal,.abp-flow .abp-step{opacity:1;transform:none}
}