/* ===========================================================================
   The contractor portal.

   The performance tab is the Layer 3 sales pitch running passively, so it is
   styled as a factual mirror rather than an advert. One big honest number, then
   the method underneath. Nothing here shouts.
   =========================================================================== */

.portal{padding-top:1.5rem}

/* --- tabs ----------------------------------------------------------------- */

.ptabs{
  display:flex;gap:.375rem;align-items:center;flex-wrap:wrap;
  padding-bottom:1.25rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border);
}
.ptabs__tab{
  display:flex;align-items:center;gap:.4rem;
  padding:.625rem 1rem;min-height:44px;border-radius:var(--r-full);
  font-size:.9375rem;color:var(--muted-foreground);transition:.15s;
}
.ptabs__tab:hover{color:var(--foreground);background:var(--secondary)}
.ptabs__tab.is-active{background:var(--foreground);color:#fff}
.ptabs__out{margin-left:auto}
.ptabs__signout{font-size:.875rem;color:var(--muted-foreground);min-height:44px;padding-inline:.5rem}
.ptabs__signout:hover{color:var(--foreground)}

/* --- the headline number -------------------------------------------------- */

.perf__hero{
  background:var(--panel);color:var(--panel-fg);
  border-radius:var(--r-slab);padding:2rem 1.5rem;margin-bottom:1rem;text-align:center;
}
@media(min-width:768px){.perf__hero{padding:2.5rem}}
.perf__hero-label{
  font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--panel-fg-faint);
}
.perf__hero-num{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(2.75rem,10vw,4.5rem);line-height:1;margin:.75rem 0;
}
.perf__hero-note{color:var(--panel-fg-dim);max-width:34rem;margin-inline:auto;line-height:1.6}
.perf__hero-note strong{color:var(--panel-fg)}

.perf__stats{
  display:grid;gap:.5rem;margin-bottom:1rem;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:640px){.perf__stats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.perf__stats{grid-template-columns:repeat(6,1fr)}}
.perf__stats li{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  padding:1rem;display:grid;gap:.2rem;text-align:center;
}
.perf__stats li.is-warn{border-color:var(--warn);background:#fffdf5}
.perf__stat-num{font-family:var(--font-display);font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1}
.perf__stat-label{font-size:.6875rem;color:var(--muted-foreground)}
.is-warn-text{color:#8a5c00;font-weight:600}

.perf__method{margin-top:.75rem}
.perf__two{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:1024px){.perf__two{grid-template-columns:1fr 1fr}}

.perf__reviews{display:grid;gap:.75rem;margin-top:1rem}
.perf__reviews li{padding:.75rem;border-radius:var(--r-base);background:var(--secondary);display:grid;gap:.25rem}
.perf__reviews .stars{color:var(--warn);letter-spacing:.08em;font-size:.875rem}

.perf__advice{display:grid;gap:.75rem;margin-top:1rem}
.perf__advice li{display:flex;gap:.625rem;align-items:flex-start;font-size:.875rem;line-height:1.55}
.perf__advice .ico{color:var(--muted-foreground);flex:none;margin-top:.15rem}

/* --- value declaration ---------------------------------------------------- */

.valform{
  border:1px solid var(--border);border-radius:var(--r-card);
  padding:1rem;margin-top:.75rem;display:grid;gap:.75rem;
}
.valform__job{display:flex;gap:.625rem;align-items:baseline;flex-wrap:wrap}
.valform__row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.valform__money{display:flex;align-items:center;gap:.25rem}
.valform__money span{font-weight:600}
.valform__money .field{max-width:8rem}
.valform__row select.field{max-width:16rem}

/* --- tiers ---------------------------------------------------------------- */

.tiers{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1rem}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tiers__col{
  border:1px solid var(--border);border-radius:var(--r-card);padding:1.25rem;
  display:grid;gap:.5rem;align-content:start;
}
.tiers__col.is-current{border-color:var(--foreground);border-width:2px}
.tiers__name{font-family:var(--font-display);font-weight:600;font-size:1.0625rem}
.tiers__price{font-size:.875rem;color:var(--muted-foreground)}
.tiers__features{display:grid;gap:.4rem;margin-top:.5rem;font-size:.8125rem}
.tiers__features li{display:flex;gap:.4rem;align-items:flex-start;color:var(--muted-foreground)}
.tiers__features li.is-held{color:var(--foreground)}
.tiers__features .ico{flex:none;margin-top:.1rem;color:var(--border)}
.tiers__features li.is-held .ico{color:var(--ok)}
.tiers__col .btn{margin-top:.5rem;justify-self:start}
.tiers__note{display:flex;gap:.4rem;align-items:flex-start;margin-top:1.25rem}