/* About, round 6: photo card, who I work for, why, what I am building. Built on site.css and home.css components. */
.ab-hero .lead{max-width:34em;margin-inline:auto;text-wrap:balance}
.ab-hero .hp2{margin-top:18px}
.ab-me{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;width:min(1040px,100%);margin-inline:auto}
.ab-ph{margin:0;border-radius:var(--r3);overflow:hidden;box-shadow:0 0 0 1px var(--edge),0 40px 100px -50px rgba(130,255,31,.35);background:#111}
.ab-ph img{display:block;width:100%;height:auto;aspect-ratio:1100/1468}
.ab-tx{display:grid;gap:14px;min-width:0}
.ab-tx .h1{font-size:clamp(38px,5vw,72px);margin:0 0 4px;padding-bottom:.06em}
.ab-tx p{margin:0;color:#E2E6DD;font-size:clamp(17px,1.35vw,19px);line-height:1.5;max-width:32em}
.ab-tx .afacts{justify-content:flex-start;margin:8px 0 0}
.ab-cards .ab-card{flex:1 1 280px;max-width:380px;display:grid;justify-items:center;text-align:center;gap:6px}
.ab-cards .ab-card .orb{margin-bottom:8px}
.ab-cards .ab-card h3{margin:0}
.ab-who .abody>.ap{margin-top:clamp(12px,2vw,24px)}
.ab-story{padding:clamp(26px,3.4vw,48px)!important;display:grid;gap:16px}
.ab-story p{font-size:clamp(18px,1.5vw,21px)!important;line-height:1.5!important;color:#E2E6DD!important}
.ab-story p:nth-child(3){color:#fff!important;font-weight:500}
.ab-story .ab-sig{color:#fff!important;font-weight:500}
.ab-build .wrap{display:grid;gap:clamp(16px,2vw,24px)}
.ab-build .gatecard .cta{margin-top:12px}
@media(max-width:900px){
  .ab-me{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .ab-ph{width:min(420px,100%)}
  .ab-tx{justify-items:center}
  .ab-tx p{margin-inline:auto}
  .ab-tx .afacts{justify-content:center}
}
@media(max-width:720px){
  .ab-cards .ab-card{max-width:none;flex-basis:100%}
  .ab-build .gatecard .cta{width:100%;max-width:340px}
  .ab-build .gatecard .cta .btn{width:100%}
}
/* free templates gate, same as Home #try */
.ab-build .ch-of{margin-top:clamp(22px,3vw,34px);box-shadow:0 50px 120px -50px rgba(142,111,192,.7)}
.ab-build .ch-of .tx{width:min(760px,100%)}
.ab-build .ch-of .lk{font-size:clamp(22px,2.2vw,30px);margin-bottom:4px}
.ab-build .ch-of:has(.ok:not([hidden])) .tx>.lk{display:none}
.ab-build .ch-of .h2{text-wrap:balance}
.ab-build .ch-of .lead{text-wrap:balance}
.ab-build .ch-of .gate{justify-self:center}
.ab-build .ch-of .gsite{width:100%;min-height:58px;font-size:18px;text-align:center;border-radius:999px;padding:14px 22px;background:rgba(11,12,11,.72);border:1px solid rgba(243,245,240,.35);color:var(--chalk)}
.ab-build .ch-of .gsite:focus{outline:0;border-color:var(--chalk)}
.ab-build .ch-of .ok{display:grid;justify-items:center;gap:8px;text-align:center}
.ab-build .ch-of .ok[hidden]{display:none}
.ab-build .ch-of:has(.ok:not([hidden])) .tx>.h2,.ab-build .ch-of:has(.ok:not([hidden])) .tx>.lead{display:none}