/* ============================================================
   TEAM BENEFITS MODAL — styles
   Independent of the referral-application modal: own file, own
   class namespace (.tbm-*). Uses the page's existing tokens and
   type ramp only — no new fonts, no libraries.
   ============================================================ */

.tbm{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.tbm.open{ display:flex; }
.tbm-scrim{
  position:absolute; inset:0;
  background:rgba(12,10,7,.62);
  backdrop-filter:blur(3px);
  animation:tbmFade .22s ease both;
}
@keyframes tbmFade{ from{opacity:0} to{opacity:1} }
@keyframes tbmRise{ from{opacity:0; transform:translateY(16px) scale(.99)} to{opacity:1; transform:none} }

.tbm-card{
  position:relative; z-index:1;
  width:100%; max-width:720px; max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:5px;
  box-shadow:0 40px 90px -30px rgba(12,10,7,.55);
  animation:tbmRise .3s cubic-bezier(.2,.8,.25,1) both;
  overflow:hidden;
}

/* header */
.tbm-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:26px 30px; border-bottom:1px solid var(--line); flex:none;
}
.tbm-kicker{
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:6px;
}
.tbm-title{ font-size:24px; font-weight:900; letter-spacing:-.02em; line-height:1.15; }
.tbm-lede{ font-size:13px; color:var(--mute); margin-top:8px; max-width:46ch; }
.tbm-x{
  background:none; border:0; font-size:26px; line-height:1; color:var(--mute);
  cursor:pointer; padding:0 2px; margin-top:-2px; transition:color .15s; flex:none;
}
.tbm-x:hover{ color:var(--ink); }

/* body */
.tbm-body{ padding:8px 30px 30px; overflow-y:auto; flex:1; }

.tbm-group{ padding-top:26px; border-top:1px solid var(--line); }
.tbm-group:first-child{ border-top:0; }
.tbm-groupname{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:14px;
}
.tbm-list{ list-style:none; display:grid; gap:11px; }
.tbm-list li{ position:relative; padding-left:22px; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.tbm-list li::before{ content:"\2014"; position:absolute; left:0; color:var(--gold-deep); }

/* lifecycle sequence — plain steps, not a diagram */
.tbm-lifecycle{ padding:26px 0 4px; border-top:1px solid var(--line); }
.tbm-chain{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-top:4px;
}
.tbm-chain li{
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:15px; color:var(--gold-deep);
}
.tbm-chain li::after{ content:"\2192"; margin:0 12px; color:var(--mute); font-style:normal; font-family:var(--sans); }
.tbm-chain li:last-child::after{ content:none; }
@media(max-width:600px){
  .tbm-chain{ flex-direction:column; align-items:flex-start; gap:6px; }
  .tbm-chain li::after{ content:"\2193"; display:block; margin:6px 0 0 2px; }
  .tbm-chain li:last-child::after{ content:none; }
}

/* footer */
.tbm-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:18px 30px; border-top:1px solid var(--line);
  background:var(--paper-2); flex:none;
}
.tbm-btn{
  font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:15px 30px; border-radius:5px; cursor:pointer; border:1px solid transparent;
  transition:.18s;
}
.tbm-primary{ background:var(--gold); color:var(--bone); }
.tbm-primary:hover{ background:var(--gold-deep); color:var(--bone); }
.tbm-ghost{ background:none; color:var(--mute); border-color:var(--line); }
.tbm-ghost:hover{ color:var(--ink); border-color:var(--ink); }

/* mobile: full sheet, same pattern as the referral modal */
@media(max-width:600px){
  .tbm{ padding:0; align-items:flex-end; }
  .tbm-card{ max-width:none; max-height:100vh; height:100vh; border-radius:0; border:0; }
  .tbm-head{ padding:20px 20px; }
  .tbm-body{ padding:4px 20px calc(26px + env(safe-area-inset-bottom)); }
  .tbm-foot{ padding:14px 20px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
  .tbm-btn{ padding:16px 22px; }
  .tbm-title{ font-size:20px; }
}

@media(prefers-reduced-motion:reduce){
  .tbm-scrim,.tbm-card{ animation:none; }
}