/* /team/ hero: everyone gets a teammate. The headline, then one calm card: the company at work (team-hero.js).
   Each person is a photo tile (their two letters underneath); a thin line joins them to their AI teammate, the
   teammate's own avatar still (eyes and smile); then what the teammate is doing for them, by a dot in their
   colour (--c). Sarah has two
   teammates, so her line branches. White, ink, lime nowhere; the waiting row keeps its amber dot. */

/* The headline is sized so its longest line, "teammate.", always fits the column (4.88em wide in Geist Black).
   Side by side, the copy column gives the card a little more room than on other pages (the card needs about
   510 px to keep its table). */
.hero-title { font-size: 116px; }
@media (min-width: 1180.02px) {
  .hero-copy { width: min(640px, calc(100vw - 600px)); }
  .hero-title { font-size: min(116px, calc((100vw - 662px) / 5.1)); }
}
@media (max-width: 1179.98px) {
  .hero-title { font-size: min(116px, calc((100vw - 2 * var(--gutter)) / 5.1)); }
}
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) {
  .hero-copy { width: 46%; }
  .hero-title { font-size: calc((46vw - var(--gutter)) / 5.15); }
}

/* The kicker wraps as whole pieces (the lime tag never breaks inside). */
.hero .kicker { flex-wrap: wrap; row-gap: 8px; }
.hero .kicker > * { white-space: nowrap; }

/* ---- The card. */
.ht-wrap { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; padding: 0 var(--gutter) 40px 24px; }
.ht-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ht-card {
  /* The roster's measures: person column, link, mark, teammate name, row padding, name block, tile, and where
     the link line starts, where a branch drops, and the gap before the mark. */
  --pw: 116px; --lw: 42px; --mk: 46px; --mn: 92px; --py: 11px; --nh: 40px; --tile: 40px; --lx: 6px; --tx: 12px; --lg: 8px; --line: #d2d2cd;
  width: 100%; max-width: 640px; padding: 30px 32px 24px; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 50px 100px -48px rgba(0, 0, 0, 0.35);
  container-type: inline-size;
}
.ht-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.ht-kicker { grid-row: 1; grid-column: 1; color: var(--muted); }
.ht-title { grid-row: 2; grid-column: 1 / -1; font-weight: 900; font-size: 34px; line-height: 38px; letter-spacing: -0.04em; }
.ht-count { grid-row: 1; grid-column: 2; color: var(--graphite); white-space: nowrap; }
.ht-count b { display: inline-block; min-width: 1ch; text-align: right; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Column labels: the first thing that says "a person, and their teammate". */
.ht-cols { display: grid; grid-template-columns: calc(var(--pw) + var(--lw)) calc(var(--mk) + var(--mn) + 26px) minmax(0, 1fr); padding: 16px 0 2px; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500; font-size: 10.5px; line-height: 14px; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }

/* A row is one person; inside it, one line per teammate. */
.ht-row { display: grid; grid-template-columns: var(--pw) minmax(0, 1fr); border-bottom: 1px solid var(--hair); }
.ht-person { display: flex; align-items: center; gap: 10px; min-width: 0; height: var(--nh); margin-top: var(--py); }
.ht-tile { position: relative; flex-shrink: 0; display: grid; place-items: center; width: var(--tile); height: var(--tile); border-radius: calc(var(--tile) * 9 / 34); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #dcdcd8; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: calc(var(--tile) * 12 / 34); line-height: 1; letter-spacing: 0.02em; color: var(--ink); }
/* A person's photo lies over their two letters. With JS it shows once it has loaded, so a missing photo leaves
   the letters (without JS a missing photo with empty alt draws nothing, and the letters show through). */
.ht-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.ht-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); pointer-events: none; }
.ht-card.has-js .ht-tile img { opacity: 0; }
.ht-card.has-js .ht-tile.is-photo img { opacity: 1; }
.ht-name { display: flex; flex-direction: column; justify-content: center; min-width: 0; height: var(--nh); }
.ht-name b { font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: -0.01em; white-space: nowrap; }
.ht-name > span:last-child { font-size: 13px; line-height: 17px; color: var(--muted); white-space: nowrap; }
.ht-mates { min-width: 0; }
.ht-mate { position: relative; display: grid; grid-template-columns: var(--mk) var(--mn) minmax(0, 1fr); column-gap: 10px; align-items: start; padding: var(--py) 0 var(--py) var(--lw); }
/* A teammate's avatar still (217 x 128, transparent). */
.ht-mark { display: block; width: var(--mk); height: calc(var(--mk) * 0.59); object-fit: contain; }
.ht-mate > .ht-mark { margin-top: calc((var(--nh) - var(--mk) * 0.59) / 2); }

/* The link: a thin line from the person to their teammate. A second teammate branches off the first's line. */
.ht-mate::before { content: ""; position: absolute; left: var(--lx); top: calc(var(--py) + var(--nh) / 2 - 0.75px); width: calc(var(--lw) - var(--lx) - var(--lg)); height: 1.5px; border-radius: 1px; background: var(--line); }
.ht-mate:not(:last-child)::after { content: ""; position: absolute; left: var(--tx); top: calc(var(--py) + var(--nh) / 2); bottom: 0; width: 1.5px; background: var(--line); }
.ht-mate + .ht-mate::before { left: var(--tx); top: 0; width: calc(var(--lw) - var(--tx) - var(--lg)); height: calc(var(--py) + var(--nh) / 2 + 0.75px); border-radius: 0 0 0 7px; background: none; border-left: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }

/* What the teammate is doing: a small dot in their colour (it breathes while they work), then the words. */
.ht-task { display: grid; grid-template-columns: 7px minmax(0, 1fr); column-gap: 10px; align-items: start; align-content: center; min-height: var(--nh); margin-left: 6px; font-weight: 500; font-size: 14.5px; line-height: 19px; color: var(--ink); }
.ht-pulse { position: relative; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--c, #0a0a0a); }
.ht-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
.ht-do { min-width: 0; text-wrap: pretty; }
/* A teammate named in another's task (they help each other): their avatar, small, inline. */
.ht-ref { font-weight: 600; white-space: nowrap; }
.ht-ref .ht-mark { display: inline-block; width: 22px; height: 13px; margin: 0 4px 0 1px; vertical-align: -1.5px; }

/* The last row: it waits for Sarah (an amber dot), and the answer is hers. */
.ht-ok { display: grid; grid-template-columns: var(--tile) minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 18px 0 4px; }
.ht-ok-dot { justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: #e59a0b; box-shadow: 0 0 0 4px rgba(229, 154, 11, 0.16); }
.ht-ok-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ht-ok-label { color: #a46b00; font-weight: 600; font-size: 11px; }
.ht-ok-text { font-weight: 600; font-size: 16px; line-height: 21px; letter-spacing: -0.01em; }
.ht-ok-who { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 17px; color: var(--muted); }
.ht-ok-who .ht-mark { flex-shrink: 0; width: 26px; height: 15.3px; }
.ht-ok-actions { display: flex; gap: 8px; }
.ht-ok .btn-ink, .ht-ok .btn-soft { min-height: 40px; padding: 0 16px; font-size: 14px; }
.ht-ok.is-done .ht-ok-dot { background: #2bb24c; box-shadow: 0 0 0 4px rgba(43, 178, 76, 0.16); }
.ht-ok.is-done .ht-ok-label { color: var(--muted); }

/* A narrower card (small laptops, side by side): the same table, tighter. A task may take two lines; the
   name block beside it is two lines tall anyway, so the card keeps its height. */
@container (max-width: 539.98px) {
  .ht-cols, .ht-list, .ht-ok { --pw: 104px; --lw: 28px; --mk: 40px; --mn: 80px; --nh: 38px; --tile: 36px; --lx: 4px; --tx: 9px; --lg: 6px; }
  .ht-title { font-size: 30px; line-height: 34px; }
  .ht-person { gap: 8px; }
  .ht-name b { font-size: 14.5px; line-height: 19px; }
  .ht-name > span:last-child { font-size: 12.5px; line-height: 16px; }
  .ht-task { font-size: 14px; line-height: 18.5px; }
  .ht-ok { grid-template-columns: var(--tile) minmax(0, 1fr); }
  .ht-ok-actions { grid-column: 2; }
}
/* Phones: what each teammate is doing moves under their name, its dot under their avatar. */
@container (max-width: 399.98px) {
  .ht-cols { grid-template-columns: calc(var(--pw) + var(--lw)) minmax(0, 1fr); }
  .ht-col-task { display: none; }
  .ht-mate { grid-template-columns: var(--mk) minmax(0, 1fr); row-gap: 3px; }
  .ht-task { grid-column: 1 / -1; grid-template-columns: var(--mk) minmax(0, 1fr); min-height: 0; margin-left: 0; }
  .ht-pulse { justify-self: center; }
}
@container (max-width: 379.98px) {
  .ht-cols, .ht-list, .ht-ok { --pw: 104px; --lw: 24px; --mk: 38px; --py: 10px; --nh: 36px; --tile: 34px; }
  .ht-title { font-size: 25px; line-height: 29px; }
  .ht-name b { font-size: 14.5px; line-height: 19px; }
  .ht-name > span:last-child { font-size: 12.5px; line-height: 16px; }
  .ht-mate, .ht-task { column-gap: 9px; }
  .ht-ok-text { font-size: 15px; line-height: 20px; }
}

/* Live (team-hero.js): the card waits, then the pairs tick in one by one. The person shows, the line draws
   across, the teammate's avatar pops in, then what they are doing. A second teammate branches off the first. */
.ht-card.is-live .ht-row { opacity: 0; transition: opacity 0.4s ease; }
.ht-card.is-live .ht-row.is-on { opacity: 1; }
.ht-card.is-live .ht-person { transform: translateY(6px); transition: transform 0.55s cubic-bezier(0.2, 1.2, 0.4, 1); }
.ht-card.is-live .ht-row.is-on .ht-person { transform: none; }
.ht-card.is-live .ht-mate > * { opacity: 0; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); }
.ht-card.is-live .ht-mate > .ht-mark { transform: scale(0.4); transition-delay: 0.4s; transition-timing-function: ease, cubic-bezier(0.2, 1.9, 0.4, 1); }
.ht-card.is-live .ht-mate > .ht-name { transform: translateX(-4px); transition-delay: 0.48s; }
.ht-card.is-live .ht-mate > .ht-task { transform: translateY(3px); transition-delay: 0.7s; }
.ht-card.is-live .ht-mate.is-on > * { opacity: 1; transform: none; }
.ht-card.is-live .ht-mate::before { clip-path: inset(0 100% 0 0); transition: clip-path 0.42s cubic-bezier(0.3, 0.7, 0.2, 1) 0.12s; }
.ht-card.is-live .ht-mate + .ht-mate::before { transition-delay: 0.3s; }
.ht-card.is-live .ht-mate.is-on::before { clip-path: inset(0); }
.ht-card.is-live .ht-mate:not(:last-child)::after { transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease; }
.ht-card.is-live .ht-mate.is-branch::after { transform: none; }
.ht-card.is-live .ht-mate.is-on .ht-pulse::after { animation: ht-work 2.6s ease-out calc(var(--i, 0) * -0.43s) infinite; }
@keyframes ht-work { 0% { opacity: 0.45; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.8); } }
.ht-card.is-live .ht-ok { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 1.2, 0.4, 1); }
.ht-card.is-live .ht-ok.is-on { opacity: 1; transform: none; }
.ht-card.is-live .ht-ok.is-on:not(.is-done) .ht-ok-dot { animation: ht-wait 1.6s ease-in-out infinite; }
@keyframes ht-wait { 50% { box-shadow: 0 0 0 8px rgba(229, 154, 11, 0.08); } }
/* Off screen, the breathing stops. */
.ht-card.is-away .ht-pulse::after, .ht-card.is-away .ht-ok-dot { animation-play-state: paused; }

/* Layout around the card: copy left and card right on desktops, stacked below 1180 px. */
@media (max-width: 1179.98px) {
  .ht-wrap { padding: 0 var(--gutter); }
}
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) {
  .ht-wrap { padding: 0 var(--gutter) 0 8px; }
  .ht-card { padding: 26px 24px 22px; }
}
@media (max-width: 640px) {
  .ht-wrap { padding: 0 var(--edge); }
  .ht-card { padding: 22px 16px 18px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-card.is-live .ht-row, .ht-card.is-live .ht-person, .ht-card.is-live .ht-mate > *, .ht-card.is-live .ht-mate::before, .ht-card.is-live .ht-mate::after, .ht-card.is-live .ht-ok { transition: none; }
  .ht-card.is-live .ht-mate.is-on .ht-pulse::after, .ht-card.is-live .ht-ok.is-on .ht-ok-dot { animation: none; }
  .ht-tile img { transition: none; }
}