/* The homepage's "Meet the Vees" (section#vees, between #os and the "work" film chapter). Loaded after
   firm-os.css and vees.css. The lineup follows the owner's character sheet: two rows (7 + 6), each Vee with
   its name (17px, ink) and role (13px, muted) underneath, VEE in the middle of the first row and a little larger.
   The work card next to it is styled like the film's product cards. vees-moments.js plays both.
   Widths: 7 picks need ~930px at full size, more than the site's 1144px column leaves beside a 380px card, so
   from 1280px the lineup and card take a wider band (up to 1320px) under a centred head, and the art is fluid
   (capped at 120px, VEE 140px) so a row never overflows. Below 1280px the card moves under the lineup. */

.os-sec.vees-sec{background:radial-gradient(ellipse 78% 92% at 50% 44%,#fafbf9 18%,#e3eae5)}
.vees-sec .os-head{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px;margin-bottom:clamp(36px,4.4vw,60px);text-align:center}
.vees-sec .os-head>p{max-width:640px;text-wrap:pretty}
.vees-foot{margin:28px 0 0;font-size:13px;line-height:1.5;color:#52676a;text-align:center}

/* ---------- the lineup and its card ---------- */
.vees-meet{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;justify-items:center}
.vees-lineup{position:relative;width:100%;padding:30px 0 6px;container-type:inline-size}
.vees-row{display:flex;justify-content:center;align-items:flex-start}
.vees-row+.vees-row{margin-top:clamp(16px,2.2vw,30px)}

/* A pick: the Vee, its name and its role. --vees-w is one pick's width: the longer row fits the lineup (7, or 8 once
   Felix and Clara close row 2), and VEE takes 24px more. */
.vees-lineup{--vees-cols:7}
.vees-lineup:has(.vees-row>.vees-pick:nth-child(8)){--vees-cols:8}
.vees-pick{--vees-w:min(132px,calc((100cqi - 24px) / var(--vees-cols)));flex:none;width:var(--vees-w);display:flex;flex-direction:column;align-items:center;padding:4px 2px 8px;border-radius:20px;text-align:center}
.vees-pick[data-vees-kind="vee"]{width:calc(var(--vees-w) + 24px)}
.vees-lineup .vees-art{width:min(120px,calc(var(--vees-w) - 12px));isolation:isolate}
/* VEE is 20px larger; it grows upwards so every name in the row sits on one line, as on the sheet */
.vees-lineup [data-vees-kind="vee"] .vees-art{width:min(140px,calc(var(--vees-w) + 8px));margin-top:-20px}
@supports not (width:1cqi){
  .vees-pick{--vees-w:120px}
  .vees-row{flex-wrap:wrap}
}
.vees-name{display:inline-block;margin-top:6px;padding:0 .14em;font-size:17px;line-height:1.3;letter-spacing:-.01em;color:#173b40;background:linear-gradient(#e9f16d,#e9f16d) no-repeat 0 88%/0% 42%;transition:background-size .35s cubic-bezier(.22,1,.36,1)}
.vees-role{display:block;max-width:100%;margin-top:2px;font-size:13px;line-height:1.35;color:#52676a;text-wrap:balance}

/* keyboard focus: an ink ring (the base sheet's #759FA0 is under 3:1 on this light gradient; ink is ~10:1) */
.vees-lineup .vees-pick:focus-visible{outline-color:#173b40}
/* hover or focus: the lime highlighter under the name; without 3D the still lifts a little */
.vees-pick:is(:hover,:focus-visible,[aria-pressed="true"],.is-featured) .vees-name{background-size:100% 42%}
.vees-lineup:not(.is-3d) .vees-pick:is(:hover,:focus-visible) .vees-still{transform:translateY(-4px)}
/* chosen (or shown by the tour): a lime ring on the floor under the Vee */
.vees-lineup .vees-art::before{content:'';position:absolute;z-index:-1;left:15%;right:15%;bottom:1%;height:15%;border-radius:50%;background:#e9f16d;box-shadow:0 0 0 2px #d3dd3c,0 0 18px 4px #e9f16d8c;opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.vees-pick:is([aria-pressed="true"],.is-featured) .vees-art::before{opacity:1;transform:none}
.vees-pick.is-featured:not([aria-pressed="true"]) .vees-art::before{opacity:.7}

/* ---------- the work card, like the film's product cards ---------- */
.vees-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;min-height:440px;padding:22px 24px 24px;border-radius:24px;background:#fff;border:1px solid #dce3de;box-shadow:0 34px 70px -44px #173b4066,0 2px 10px #173b400a;color:#173b40;text-align:left}
.vees-sec .vees-card h3{margin:0;font-size:17px!important;line-height:1.3!important;letter-spacing:-.015em!important;color:#173b40}

/* empty: a quiet sketch of a card and the invitation */
.vees-card__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.vees-sec .vees-card__empty h3{max-width:250px;font-size:22px!important;letter-spacing:-.025em!important}
.vees-ghost{display:grid;gap:11px;width:min(100%,250px);padding:18px 18px 20px;border-radius:18px;background:#f5f8f6;border:1px solid #e6ece8}
.vees-ghost>span{display:block;height:9px;border-radius:5px;background:#e3eae5}
.vees-ghost>span:nth-child(1){width:46%;height:12px;margin-bottom:6px}
.vees-ghost>span:nth-child(2){width:86%}
.vees-ghost>span:nth-child(3){width:72%}
.vees-ghost>span:nth-child(4){width:80%}
.vees-ghost>span:nth-child(5){width:54%;height:22px;margin-top:6px;border-radius:999px;background:#e9f16d8c}

/* a played card fills the region; its end line sits at the foot */
.vees-card__body{flex:1;display:flex;flex-direction:column}

/* header: the Vee, its name and role, and the status pill */
.vees-card__head{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:center}
.vees-card__av{grid-row:1/3;width:40px;height:40px;object-fit:contain;transform:scale(1.35)}
.vees-card__who{margin:0;font-size:15px;line-height:1.3;color:#173b40}
.vees-card__name{font-weight:500}
.vees-card__role{color:#607174}
.vees-card__role::before{content:' · '}
.vees-status{justify-self:start;display:inline-flex;align-items:center;gap:7px;max-width:100%;margin:0;padding:4px 11px 4px 8px;border-radius:14px;border:1px solid #dce3de;background:#fff;font-size:12.5px;line-height:1.3;color:#173b40;transition:background-color .3s ease,border-color .3s ease}
.vees-status.is-done{background:#e9f16d;border-color:#e9f16d}
.vees-spin{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid #d3ddd8;border-top-color:#346a76;animation:vees-spin .8s linear infinite}
.vees-tick{flex:none;position:relative;width:12px;height:12px}
.vees-tick::after{content:'';position:absolute;left:3.5px;top:.5px;width:4px;height:8px;border:solid #173b40;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes vees-spin{to{transform:rotate(360deg)}}

.vees-card__title{margin-top:18px!important;padding-bottom:10px;border-bottom:1px solid #edf1ee}

/* rows: each lands, then ticks */
.vees-card__rows{list-style:none;margin:6px 0 16px;padding:0}
.vees-ri{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(20px,auto);align-items:center;gap:4px 10px;margin:0 -10px;padding:9px 10px;border-radius:12px;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.vees-ri.is-in{opacity:1;transform:none}
.vees-ri+.vees-ri{box-shadow:inset 0 1px 0 #edf1ee}
.vees-ri::before{content:'';position:absolute;z-index:-1;inset:2px 0;border-radius:10px;background:#e9f16d73;transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.vees-ri.is-need::before{background:#e9f16d}
.vees-ri.is-washed::before{transform:none}
.vees-ri__main{min-width:0}
.vees-ri__label{display:block;font-size:14px;line-height:1.35;color:#173b40}
.vees-nw{white-space:nowrap}
.vees-ri__sub{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:#607174}
.vees-ri__num{font-size:14px;line-height:1.35;color:#173b40;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.vees-ri__tag{font-size:12.5px;line-height:1.3;color:#346a76;text-align:right}
.vees-ri__tag.is-need{padding:3px 9px;border-radius:999px;background:#e9f16d;color:#173b40}
.vees-chip{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:1px 9px;border-radius:999px;border:1px solid #dce3de;background:#fff;font-size:11.5px;line-height:1.5;color:#173b40}
.vees-chip.is-cat::before{content:'+';color:#607174}
.vees-chip.is-need{margin:0;padding:2px 9px;border-color:#173b40;background:#173b40;color:#fff;white-space:nowrap}
.vees-check{position:relative;width:20px;height:20px;border-radius:50%;border:2px solid #dce3de;transition:background-color .2s ease,border-color .2s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.vees-check::after{content:'';position:absolute;left:5.5px;top:2.5px;width:4px;height:8px;border:solid #173b40;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.vees-ri.is-ticked .vees-check{border-color:#e9f16d;background:#e9f16d;transform:scale(1.05)}
.vees-ri.is-ticked .vees-check::after{transform:rotate(45deg) scale(1)}
.vees-check.is-ask{border-style:dashed;border-color:#93a5a4}
/* Tom's boxes: the payable line closes the list */
.vees-card--figures .vees-ri:last-child .vees-ri__label,.vees-card--figures .vees-ri:last-child .vees-ri__num{font-weight:500}
.vees-card--figures .vees-ri:last-child{box-shadow:inset 0 1px 0 #173b4040}

/* VEE's conversation */
.vees-chat{display:flex;flex-direction:column;gap:14px;margin:16px 0 16px}
.vees-msg{margin:0;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.vees-msg.is-in{opacity:1;transform:none}
.vees-msg--you{align-self:flex-end;max-width:86%;padding:10px 15px;border-radius:18px 18px 6px 18px;background:#eef2ef;font-size:14px;line-height:1.45;color:#173b40}
.vees-msg__text{margin:0}
.vees-msg__text.is-typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:#346a76}
.vees-msg--vee .vees-msg__text{font-size:15px;line-height:1.45;color:#173b40}
.vees-msg__from{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:12.5px;color:#607174}
.vees-msg__av{width:20px;height:20px;object-fit:contain;transform:scale(1.3)}
.vees-team{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.vees-team__chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 4px;border-radius:999px;border:1px solid #dce3de;background:#fff;font-size:12.5px;line-height:1.3;color:#173b40;transition:background-color .25s ease,border-color .25s ease}
.vees-team__chip.is-on{background:#e9f16d;border-color:#e9f16d}
.vees-team__av{width:22px;height:22px;object-fit:contain;transform:scale(1.3)}
.vees-team__tag{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12.5px;color:#346a76;opacity:0;transition:opacity .3s ease}
.vees-team__tag.is-in{opacity:1}
.vees-team__tag::before{content:'';width:4px;height:8px;margin:0 3px 2px 2px;border:solid #346a76;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* the end line, and Iris's stamp */
.vees-card__end{display:flex;align-items:flex-start;gap:10px;margin:auto 0 0;padding:11px 14px;border-radius:14px;background:#e9f16d;font-size:14px;line-height:1.45;color:#173b40;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.vees-card__end::before{content:'';flex:none;width:5px;height:10px;margin:2px 4px 0 5px;border:solid #173b40;border-width:0 2px 2px 0;transform:rotate(45deg)}
.vees-card__end.is-in{opacity:1;transform:none}
.vees-stamp{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin:auto 0 8px 6px;padding:7px 18px 7px 14px;border:2px solid #173b40;border-radius:10px;background:#e9f16d;font-size:18px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:#173b40;opacity:0;transform:rotate(-8deg) scale(1.4);transition:opacity .15s ease,transform .38s cubic-bezier(.22,1,.36,1)}
.vees-stamp::before{content:'';width:6px;height:12px;margin:0 2px 3px 0;border:solid #173b40;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.vees-stamp.is-in{opacity:1;transform:rotate(-8deg) scale(1)}

/* ---------- wide: the card beside the lineup ---------- */
@media(min-width:1280px){
  .vees-meet{--vees-band:min(1320px,calc(100vw - 96px));width:var(--vees-band);margin-left:calc((100% - var(--vees-band)) / 2);grid-template-columns:minmax(0,1fr) clamp(340px,26vw,380px);gap:clamp(28px,3vw,44px);align-items:center}
  .vees-card{max-width:none;min-height:476px}
}

/* ---------- tablet: four columns, VEE first and twice as wide, the card underneath ---------- */
@media(max-width:1024px){
  .vees-lineup{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));row-gap:22px;padding-top:30px}
  .vees-row{display:contents}
  .vees-pick,.vees-pick[data-vees-kind="vee"]{grid-column:span 2;width:auto;min-width:0}
  .vees-pick[data-vees-kind="vee"]{grid-column:span 4;order:-1}
  /* a short last line is centred (13 Vees leave two there) */
  .vees-row:last-child>.vees-pick:last-child:nth-child(4n+1){grid-column:4/span 2}
  .vees-row:last-child>.vees-pick:nth-last-child(2):nth-child(4n+1){grid-column:3/span 2}
  .vees-row:last-child>.vees-pick:nth-last-child(3):nth-child(4n+1){grid-column:2/span 2}
  .vees-lineup .vees-art{width:min(120px,100%)}
  .vees-lineup [data-vees-kind="vee"] .vees-art{width:min(140px,100%)}
}

/* ---------- phone: three columns, VEE on its own row, roles move into the card ---------- */
@media(max-width:640px){
  .vees-lineup{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:14px;padding-top:12px}
  .vees-pick[data-vees-kind="vee"]{grid-column:1/-1}
  .vees-row:last-child>.vees-pick:last-child:nth-child(4n+1),.vees-row:last-child>.vees-pick:nth-last-child(2):nth-child(4n+1),.vees-row:last-child>.vees-pick:nth-last-child(3):nth-child(4n+1){grid-column:auto/span 2}
  /* three a line after VEE: a short last line is centred (15 Vees leave two there) */
  .vees-row:last-child>.vees-pick:last-child:nth-child(3n+1){grid-column:3/span 2}
  .vees-row:last-child>.vees-pick:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
  .vees-lineup .vees-art{width:min(88px,100%)}
  .vees-lineup [data-vees-kind="vee"] .vees-art{width:min(104px,100%);margin-top:0}
  .vees-name{font-size:16px}
  .vees-role{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .vees-card{min-height:450px;padding:20px 18px 22px;border-radius:22px}
  .vees-meet{gap:28px}
}
/* small phones: titles and VEE's chips wrap to more lines (VEE's card reaches ~490px at 320-360px), so the card
   starts that tall and no card grows while it builds */
@media(max-width:379px){
  .vees-card{min-height:500px}
}