/* The team (sections/_team.html) and why owners trust it (sections/_trust.html). */

/* owner: a portrait card beside the note */
.tm-owner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.tm-face{position:relative;margin:0;aspect-ratio:22/26;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(160deg,#1D1D1F,#000);box-shadow:var(--sh-3)}
.tm-face img{display:block;width:100%;height:100%;object-fit:cover}
.tm-mono{position:absolute;inset:0 0 18%;display:grid;place-items:center;font:italic 400 clamp(120px,15vw,190px)/1 var(--display);letter-spacing:-.04em;color:var(--mint)}
.tm-face figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 22px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
  color:rgba(255,255,255,.75);font-size:14px}
.tm-face figcaption b{display:block;font:400 30px/1.1 var(--display);letter-spacing:-.01em;color:#fff;margin-bottom:2px}
.tm-quote{font:italic 400 clamp(28px,3.2vw,40px)/1.15 var(--display);letter-spacing:-.015em;color:var(--ink);margin-bottom:24px}
.tm-note>p:not(.tm-quote):not(.tm-sig){font-size:17px;line-height:1.55;color:var(--ink-2);margin-top:12px;max-width:34em}
.tm-owns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tm-owns li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:980px;background:var(--accent-soft);color:var(--accent-ink);font-size:14px;font-weight:500}
.tm-owns .ico{width:16px;height:16px;stroke-width:2.2}
.tm-sig{margin-top:26px;font:italic 400 34px/1 var(--display);color:var(--muted)}

/* anyone else on the team (team_members) */
.tm-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:40px}
.tm-people li{display:flex;align-items:center;gap:20px;padding:20px;border-radius:var(--r-lg);background:var(--bg-2)}
.sect.alt .tm-people li{background:var(--card)}
.tm-people img{flex:none;width:104px;height:130px;border-radius:14px;object-fit:cover}
.tm-people h3{font-size:20px;margin-bottom:6px}
.tm-people p:not(.tm-role){font-size:15px;line-height:1.5;color:var(--ink-2);margin-top:8px}

/* the AI team */
.tm-ai{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.tm-ai li{padding:28px;border-radius:var(--r-lg);background:var(--bg-2)}
.sect.alt .tm-ai li{background:var(--card)}
.tm-av{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--mint);margin-bottom:18px;
  box-shadow:0 0 0 6px rgba(76,211,141,.14)}
.tm-av .ico{width:22px;height:22px;stroke-width:2}
.tm-role{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.tm-ai h3{font-size:20px;margin-bottom:8px}
.tm-ai p:not(.tm-role){font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* trust: six promises, then the numbers */
.tr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tr-grid li{padding:28px;border-radius:var(--r-lg);background:var(--card);border:1px solid rgba(0,0,0,.04)}
.sect:not(.alt) .tr-grid li{background:var(--bg-2)}
.tr-i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);margin-bottom:18px}
.tr-i .ico{width:22px;height:22px;stroke-width:2}
.tr-grid h3{font-size:19px;margin-bottom:8px}
.tr-grid p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.tr-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;border-radius:var(--r-xl);background:var(--night);color:var(--on-night)}
.tr-nums li{padding:30px 24px;text-align:center;border-left:1px solid var(--night-line)}
.tr-nums li:first-child{border-left:0}
.tr-nums b{display:block;font:400 clamp(44px,5vw,64px)/1 var(--display);color:#fff}
.tr-nums span{display:block;margin-top:8px;font-size:14px;color:var(--on-night-2)}

@media (max-width:900px){
  .tm-owner{grid-template-columns:minmax(0,1fr);gap:32px}
  .tm-face{max-width:420px}
  .tm-ai,.tr-grid{grid-template-columns:minmax(0,1fr)}
  .tr-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tr-nums li:nth-child(3){border-left:0}
  .tr-nums li:nth-child(n+3){border-top:1px solid var(--night-line)}
}
@media (max-width:560px){
  .tm-face{aspect-ratio:1/1}
  .tm-ai li,.tr-grid li{padding:22px}
  .tr-nums li{padding:22px 12px}
}