/* ---- T3 · three people, three drawings (E12b) ----------------------------
   Three equal cards, as home's who-it's-for: the same width, the same
   drawing frame, the label and the line on one baseline grid; a pin and a
   slight turn each (the tab strip under them went in F9). */
.built .h2{max-width:15em}
/* F9 (Javier): less paper between the three people and the walkthrough */
.sec.built{padding-bottom:clamp(24px,3vw,40px)}
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(40px,4.6vw,64px);align-items:stretch}
.tcard{position:relative;display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:12px;background:#fff;border:1px solid var(--edge);border-radius:var(--r-card);padding:16px 16px 24px;box-shadow:var(--shadow-raised);background-clip:padding-box}
.tcard:nth-child(1){transform:rotate(-.8deg)}
.tcard:nth-child(2){transform:rotate(.6deg)}
.tcard:nth-child(3){transform:rotate(-.4deg)}
.tcard::before{content:"";position:absolute;top:-9px;left:50%;margin-left:-9px;width:18px;height:18px;border-radius:50%;background:var(--amber);border:2.6px solid #18202C;box-shadow:0 3px 4px rgba(16,21,29,.18)}
.tcard .art{width:100%;aspect-ratio:1;height:auto;border-radius:16px;box-shadow:none}
/* a card's label is plain small text, never a pill (E6) */
.tcard .label{font:600 13.5px/1.2 var(--ui);color:var(--dim);margin-top:6px}
.tcard .say{font:700 clamp(20px,1.7vw,24px)/1.2 var(--display);font-stretch:106%;letter-spacing:-.015em;text-wrap:pretty}
@media (max-width:900px){
  .tcards{grid-template-columns:minmax(0,1fr);max-width:520px;gap:30px}
  .tcard{grid-template-columns:minmax(0,132px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;padding:12px 16px 12px 12px;align-items:center}
  .tcard .art{grid-row:1/span 2}
  .tcard .label{align-self:end;margin-top:0}
  .tcard .say{align-self:start;font-size:clamp(19px,4.6vw,22px)}
}