/* ============================================================ home v7 ==
   Homepage only. Loads after redesign.css.

   Two changes:
   1. The hero. It was a landing page — headline, paragraph, two buttons,
      a stats panel — with most of the left column empty. The pros are now
      in it, at size, with the numbers people actually come here to read.
   2. Directory cards, sized up now that portraits are photographs.

   No content removed: the kicker, headline, copy, both actions, the four
   sample pros and the whole meta panel are all still here.
   ==================================================================== */

/* -------------------------------------------------------------- hero -- */
/* Pulled in so the pros sit above the fold instead of trailing off. */
.home-shell .lead{padding-top:30px;padding-bottom:24px}
.home-shell .lead h1{font-size:clamp(34px,4.4vw,58px);line-height:.95;letter-spacing:-.018em;margin-bottom:14px}
.home-shell .lead-main>p{max-width:52ch;margin-bottom:20px}
.home-shell .lead-actions{margin-bottom:30px}

/* ------------------------------------------------------- roster strip - */
/* Deliberately small. Big portraits here read as a poster; the point is the
   numbers, with a face for recognition. */
.lead-roster{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  border-top:1px solid #1f2831;
  margin-top:4px;
}
.lead-roster .roster-label{
  grid-column:1/-1;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:#7b8895;padding-top:14px;margin-bottom:2px;
}
.lead-roster a{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:0 12px;padding:9px 13px 9px 9px;text-decoration:none;
  border:1px solid #1f2831;border-radius:10px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--team) 7%,#0d1219),#0a0e14 62%);
  transition:border-color .15s ease,background .15s ease;
}
.lead-roster a:hover,.lead-roster a:focus-visible{
  border-color:color-mix(in srgb,var(--team) 48%,#1f2831);
  background:linear-gradient(90deg,color-mix(in srgb,var(--team) 13%,#0d1219),#0a0e14 62%);
  outline:none;
}
.lead-roster a::before,.lead-roster a::after{display:none !important}
.lead-roster .pp{--pp-size:42px;--pp-radius:8px;grid-column:1;grid-row:1/3}
.lead-roster b{
  grid-column:2;grid-row:1;align-self:end;
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-weight:700;font-size:17px;line-height:1.05;letter-spacing:.005em;
  text-transform:uppercase;color:#e9eef4;
}
.lead-roster u{
  grid-column:2;grid-row:2;align-self:start;text-decoration:none;
  font-size:10.5px;line-height:1.3;color:#7b8895;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lead-roster em,.lead-roster i{
  grid-row:1/3;display:block;font-style:normal;text-align:right;min-width:44px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:15px;font-weight:600;letter-spacing:-.02em;color:#e9eef4;
}
.lead-roster i{min-width:38px;padding-left:12px;border-left:1px solid #1f2831}
.lead-roster em::before,.lead-roster i::before{
  display:block;margin-bottom:2px;
  font-size:8.5px;font-weight:500;letter-spacing:.16em;color:#7b8895;
}
.lead-roster em::before{content:"SENS"}
.lead-roster i::before{content:"FOV"}

/* --------------------------------------------------- directory cards -- */
.home-shell .card .pp{--pp-size:64px;--pp-radius:11px}
.home-shell .card{transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.home-shell .card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--team) 46%,#252f3a);
  box-shadow:0 12px 28px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb,var(--team) 20%,transparent);
}
.home-shell .card .tag{letter-spacing:-.005em}
.home-shell .cardstats b{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:-.01em}

/* ------------------------------------------------------------ mobile -- */
@media(max-width:720px){
  .lead-roster{grid-template-columns:1fr;gap:7px}
  .home-shell .lead{padding-top:22px}
  .home-shell .card .pp{--pp-size:54px}
}

@media(prefers-reduced-motion:reduce){
  .lead-roster a,.home-shell .card{transition:none}
  .lead-roster a:hover,.home-shell .card:hover{transform:none}
}

/* ===================================================== hero right rail ==
   The panel held good numbers in a dashboard shell — rounded card, fat
   progress bars, four grey tiles. Same data, rebuilt in the language the
   subject actually uses: hard angles, stamped labels, scoreboard numerals.

   No content changed. Every figure, label and link is the original markup.
   ==================================================================== */

.home-shell .meta-pulse{
  --cut:16px;
  position:relative;display:flex;flex-direction:column;
  align-self:stretch;
  padding:0 0 0;border:0;border-radius:0;background:none;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.home-shell .meta-pulse::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#111823,#0a0e15 62%);
  border-top:2px solid var(--accent);
}
.home-shell .meta-pulse>*{position:relative;z-index:1}

/* ------------------------------------------------------------- header -- */
.home-shell .meta-pulse .panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0;padding:13px 20px;border-bottom:1px solid #1c2530;background:rgba(255,255,255,.022);
}
.home-shell .meta-pulse .panel-head span{
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-weight:700;font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:#e9eef4;
}
.home-shell .meta-pulse .panel-head time{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.16em;color:#7b8895;
  padding:3px 8px;border:1px solid #202a35;
}

/* --------------------------------------------------- the pairing lock -- */
.home-shell .meta-lock{padding:20px 20px 18px;border-bottom:1px solid #1c2530}
.home-shell .meta-kicker{
  display:block;margin-bottom:12px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.home-shell .meta-combo{
  display:flex;align-items:stretch;gap:0;margin-bottom:12px;
}
.home-shell .meta-combo>span{flex:1;display:flex;flex-direction:column;gap:2px}
.home-shell .meta-combo>span:last-of-type{padding-left:18px;border-left:1px solid #1c2530}
.home-shell .meta-combo b{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:clamp(34px,3.2vw,46px);font-weight:600;line-height:.92;
  letter-spacing:-.045em;color:#fff;
}
.home-shell .meta-combo i{
  font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.2em;color:#7b8895;
}
.home-shell .meta-combo em{
  align-self:center;padding:0 14px;font-style:normal;
  font-size:15px;color:#3d4a57;
}
.home-shell .meta-lock p{margin:0;font-size:12.5px;line-height:1.5;color:#8794a2}
.home-shell .meta-lock p strong{color:#e9eef4;font-weight:600}

/* -------------------------------------------------- distribution rows -- */
/* Thin hard-edged meters instead of the rounded dashboard bars. */
.home-shell .meta-distribution{padding:16px 20px 18px;border-bottom:1px solid #1c2530;display:grid;gap:15px}
.home-shell .meta-dist-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.home-shell .meta-dist-top span{
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:#d6dee7;
}
.home-shell .meta-dist-top b{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:19px;font-weight:600;letter-spacing:-.03em;color:#fff;
}
.home-shell .meta-track{
  height:4px;border-radius:0;background:#161e28;overflow:hidden;
}
.home-shell .meta-track i{display:block;height:100%;border-radius:0}
.home-shell .meta-dist small{
  display:block;margin-top:6px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#6b7887;
}

/* ------------------------------------------------------- record tiles -- */
.home-shell .meta-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  padding:0;background:#1c2530;border-bottom:1px solid #1c2530;
}
.home-shell .meta-mini{
  --tint:var(--accent);
  position:relative;display:block;padding:14px 16px 15px;text-decoration:none;
  background:#0c1119;border:0;border-radius:0;
  transition:background .14s ease;
}
.home-shell a.meta-mini:hover{background:#121a24}
.home-shell .meta-mini::before{
  content:"";position:absolute;left:0;top:0;width:22px;height:2px;background:var(--tint);
}
.home-shell .meta-mini:nth-child(2){--tint:#9b7bff}
.home-shell .meta-mini:nth-child(3){--tint:#38b6ff}
.home-shell .meta-mini:nth-child(4){--tint:#2bd97c}
.home-shell .meta-mini>span{
  display:block;margin-bottom:8px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#6b7887;
}
.home-shell .meta-mini b{
  display:block;line-height:1;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:26px;font-weight:600;letter-spacing:-.04em;color:var(--tint);
}
.home-shell .meta-mini small{
  display:block;margin-top:6px;font-size:11px;color:#7b8895;
}
/* the two tiles that go somewhere get an arrow on hover */
.home-shell a.meta-mini::after{
  content:"\2197";position:absolute;top:12px;right:13px;
  font-size:11px;color:#3d4a57;transition:color .14s ease,transform .14s ease;
}
.home-shell a.meta-mini:hover::after{color:var(--tint);transform:translate(1px,-1px)}

/* ------------------------------------------------------------ footer --- */
.home-shell .meta-pulse .panel-link{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border:0;border-radius:0;text-decoration:none;
  background:rgba(255,255,255,.018);
  transition:background .14s ease;
}
.home-shell .meta-pulse .panel-link:hover{background:rgba(255,255,255,.05)}
.home-shell .meta-pulse .panel-link span{
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:#e9eef4;
}
.home-shell .meta-pulse .panel-link b{color:var(--accent);font-size:15px;transition:transform .14s ease}
.home-shell .meta-pulse .panel-link:hover b{transform:translate(2px,-2px)}

@media(max-width:900px){
  .home-shell .meta-pulse{--cut:12px}
  .home-shell .meta-combo b{font-size:38px}
}
@media(prefers-reduced-motion:reduce){
  .home-shell .meta-mini,.home-shell .meta-pulse .panel-link,
  .home-shell a.meta-mini::after,.home-shell .meta-pulse .panel-link b{transition:none}
}