/* /about (WS#650): the th/agentx-feedback design's "receipt" page
   (assets/v3/home.css .ab-* @ 6aa53f4). Every inline style lives here (CSP).
   The design's shades are scoped to .ab, light by default and dark under the
   dark themes, as .inst does (public.css). Headings pin Fraunces in --ab-serif
   because the theme's --serif is not Fraunces on every theme. */
.ab{--ab-page:#F6F5F1;--ab-band:#ECEBE5;--ab-card:#FFFFFF;--ab-ink:#141834;--ab-ink-2:#3B4160;--ab-ink-body:#4A5068;
  --ab-ink-muted:#545A72;--ab-link:#2D5BE3;--ab-rule:#E2E0D9;--ab-panel-ink:#141834;--ab-fill-ink:#141834;
  --ab-fill-ink-hover:#262C55;--ab-border-strong:#CFCDC5;
  --ab-serif:"Fraunces",Georgia,serif;
  background:var(--ab-page);color:var(--ab-ink)}
:root:not([data-theme]) .ab,[data-theme=studio] .ab,[data-theme=console] .ab{
  --ab-page:#0F1117;--ab-band:#1C2030;--ab-card:#181B26;--ab-ink:#ECEDF2;--ab-ink-2:#C3C7D6;--ab-ink-body:#AEB3C5;
  --ab-ink-muted:#9AA0B5;--ab-link:#7FA2FF;--ab-rule:#2A2E3C;--ab-panel-ink:#171B33;--ab-fill-ink:#3F6BF0;
  --ab-fill-ink-hover:#5A82F7;--ab-border-strong:#3A3F55}
.ab a{color:var(--ab-link)}
.ab-wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.ab-mono{font-family:var(--mono)}
.ab-h1,.ab-h2{margin:0;font-family:var(--ab-serif);font-variation-settings:'SOFT' 30;font-weight:600;text-wrap:balance}
.ab-h1{max-width:13ch;font-size:clamp(44px,calc(88 * var(--vu)),88px);line-height:1;letter-spacing:-.035em}
.ab-h2{font-size:clamp(36px,calc(52 * var(--vu)),52px);line-height:1.04;letter-spacing:-.03em}
.ab-h1 i,.ab-h2 i{font-style:normal;font-variation-settings:'SOFT' 50;color:var(--ab-link)}
.ab-body{margin:0;font-size:18px;line-height:1.65;color:var(--ab-ink-body);max-width:60ch;text-wrap:pretty}
/* load motion: the hero fades up, staggered (the design's .rise, reusing inst-up) */
.ab-rise{animation:inst-up 900ms cubic-bezier(.16,1,.3,1) both}

/* ---- hero: the receipt ---- */
.ab-hero{padding:clamp(64px,calc(104 * var(--vu)),104px) 0 clamp(72px,calc(112 * var(--vu)),112px)}
.ab-hero .ab-wrap{display:flex;flex-direction:column;gap:24px}
.ab-sub{max-width:52ch;animation-delay:80ms}
.ab-receipt{margin:40px 0 0;animation-delay:160ms}
.ab-receipt figcaption{margin-bottom:14px;font-size:13px;color:var(--ab-ink-muted);text-wrap:balance}
.ab-receipt dl{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:2px solid var(--ab-ink);border-bottom:1px solid var(--ab-rule)}
/* figures share a baseline when labels wrap */
.ab-cell{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:22px 24px 26px 0}
.ab-cell + .ab-cell{padding-left:24px;border-left:1px solid var(--ab-rule)}
.ab-cell dt{font-size:14px;line-height:1.4;color:var(--ab-ink-2)}
.ab-cell dd{margin:0;font-size:clamp(36px,calc(48 * var(--vu)),48px);line-height:1;letter-spacing:-.02em;color:var(--ab-ink);font-variant-numeric:tabular-nums}
.ab-approx{margin-right:.06em;font-family:var(--sans);font-size:.62em;vertical-align:.18em}
.ab-pending{margin:14px 0 0;font-size:14px;color:var(--ab-ink-muted)}

/* ---- the story ---- */
.ab-story{padding:clamp(72px,calc(112 * var(--vu)),112px) 0;background:var(--ab-band)}
.ab-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px clamp(53px,calc(80 * var(--vu)),80px);align-items:start}
.ab-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ab-notes li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px;padding:22px 0;border-top:1px solid var(--ab-rule)}
.ab-when{padding-top:4px;font-size:13px;color:var(--ab-ink-muted)}
.ab-notes h3{margin:0 0 6px;font-family:var(--ab-serif);font-size:22px;font-weight:600;letter-spacing:-.01em}
.ab-notes p{margin:0;line-height:1.6;color:var(--ab-ink-body);max-width:56ch}

/* ---- company facts ---- */
.ab-facts{padding:clamp(72px,calc(112 * var(--vu)),112px) 0}
.ab-facts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px clamp(64px,calc(96 * var(--vu)),96px);align-items:start}
.ab-facts-text{display:flex;flex-direction:column;gap:20px}
.ab-facts-text a{font-weight:500}
.ab-facts-list{margin:0;border-top:2px solid var(--ab-ink)}
.ab-facts-list div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--ab-rule)}
.ab-facts-list dt{font-weight:600}
.ab-facts-list dd{margin:0;color:var(--ab-ink-2)}

/* ---- dark close with the sign-up form ---- */
.ab-close{padding:clamp(72px,calc(112 * var(--vu)),112px) 0;background:var(--ab-panel-ink);color:#FFFFFF}
.ab-close-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px clamp(64px,calc(96 * var(--vu)),96px);align-items:center}
.ab-close-text{display:flex;flex-direction:column;gap:20px}
.ab-close .ab-h2{color:#FFFFFF}
.ab-close .ab-h2 i{color:#9DB6FF}
.ab-close .ab-body{color:#B7BCD0;max-width:44ch}
.ab-form{display:flex;flex-direction:column;gap:16px;padding:30px;border-radius:24px;background:var(--ab-card);color:var(--ab-ink)}
.ab-form label{display:flex;flex-direction:column;gap:6px}
.ab-form label span{font-size:14px;font-weight:600}
.ab-form input{height:52px;padding:0 16px;border:1px solid var(--ab-border-strong);border-radius:14px;font:inherit;font-size:16px;
  color:var(--ab-ink);background:var(--ab-card)}
.ab-submit{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border:0;border-radius:28px;cursor:pointer;
  background:var(--ab-fill-ink);color:#FFFFFF;font:inherit;font-size:16px;font-weight:600}
.ab-submit:hover{background:var(--ab-fill-ink-hover)}
.ab-form p{margin:0;text-align:center;font-size:14px;color:var(--ab-ink-muted)}

@media (prefers-reduced-motion:reduce){
  .ab-rise{animation:none}
}
@media (max-width:900px){
  .ab-receipt dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-cell:nth-child(3){padding-left:0;border-left:0}
  .ab-cell:nth-child(n+3){border-top:1px solid var(--ab-rule)}
  .ab-story-grid,.ab-facts-grid,.ab-close-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .ab-wrap{padding:0 16px}
}
@media (max-width:520px){
  .ab-hero{padding:64px 0 72px}
  .ab-story,.ab-facts,.ab-close{padding:72px 0}
  .ab-cell dd{font-size:36px}
  .ab-cell{padding-right:12px}
  .ab-cell + .ab-cell{padding-left:12px}
  .ab-cell:nth-child(3){padding-left:0}
  .ab-notes li{grid-template-columns:minmax(0,1fr)}
  .ab-when:empty{display:none}
  .ab-facts-list div{grid-template-columns:minmax(0,1fr)}
  .ab-form{padding:22px}
}