/* ============================================================
   CrewSix visual pass — site glue (extend here for style add-ons)
   Tokens: prefer --cs-* / --vp-* custom properties below.
   Linked after Designer snippets (card-hover, tabs, ba, mobile-hero).
   ============================================================ */
:root{
  --vp-trade-icon-size:40px;
  --vp-trade-icon-pad:8px;
  --vp-divider-gap:0;
  --vp-ba-max:720px;
}
/* Trade directory cards: icon + number row */
.trade-card-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;
}
.trade-card-top .trade-icon{
  width:var(--vp-trade-icon-size);height:var(--vp-trade-icon-size);
  flex:0 0 auto;display:block;
}
.trade-card-top .num{margin:0}
a.card.trade-card{display:flex;flex-direction:column}
a.card.trade-card:focus-visible{
  outline:2px solid transparent;
  box-shadow:var(--focus-ring,0 0 0 2px #fff,0 0 0 5px #0052cc);
}
/* Filter tabs: hide filtered cards when JS on */
html.js-tabs .card.svc[hidden]{display:none}
html:not(.js-tabs) .card.svc{display:flex}
#svc-filter-status{font-size:14px;color:var(--cs-muted,#475569);margin:0 0 16px}
/* Section break full-bleed helpers (paths relative to page) */
.section-break{display:block;width:100%;line-height:0;margin:var(--vp-divider-gap)}
.section-break img{width:100%;height:auto;display:block}
/* Before/after band */
#usability .ba-slider{max-width:var(--vp-ba-max);margin:0 auto}
#usability .sec-head{margin-bottom:24px}
/* Hero visual: keep below fold content on mobile (mobile-hero.css also covers) */
@media (max-width:1023px){
  .hero.hero-mobile{display:block}
  .hero.hero-mobile > div:first-child{max-width:100%}
}
@media (min-width:1024px){
  .hero.hero-mobile{display:grid}
}

/* Tap targets: chips meet 44px min on touch */
.svc-chips a,.svc-chips .chip{min-height:44px}

/* Override legacy .chip (concept badge uses position:absolute) inside svc-chips */
.svc-chips a,
.svc-chips .chip{
  position:relative !important;
  inset:auto !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
}
.svc-chips li{display:inline-flex}

/* ---- Lightwave integration glue ---- */
.glow-hero header{background:transparent;box-shadow:none}
.glow-hero .wrap.hero{position:relative;z-index:1}
/* Reset legacy .process .step rules on new staircase cards */
ol.steps .step{border-right:0;padding:24px}
ol.steps .step:not(:first-child){padding-left:24px}
ol.steps .step h3 .num{display:none}
@media (max-width:860px){
  ol.steps .step, ol.steps .step:not(:first-child){padding:24px;border-bottom:0}
}
/* Pill in sticky bar */
.sticky-cta .pill{min-height:44px;font-size:15px;padding:6px 6px 6px 16px}
.sticky-cta .pill .short{display:none}
.sticky-cta .pill .full{display:inline}
@media (max-width:420px){
  .sticky-cta .pill .full{display:none}
  .sticky-cta .pill .short{display:inline}
}
/* big-h inside stacked sec-head */
.sec-head .big-h{margin-top:0}
.sec-head .eyebrow{display:none} /* replaced by sec-label where applied */

/* Mobile: keep header chrome light — pills live in hero */
@media (max-width:860px){.header-actions{display:none}}

/* ---- Gary mobile fixes (form/chip/compare) ---- */
.card.svc .svc-avail{margin:0 0 10px;position:relative;z-index:1}
.card.svc .svc-avail .avail{display:inline-flex}
/* Keep corner art from covering the badge / title band on small screens */
@media (max-width:1023px){
  .card.svc .svc-visual{
    position:relative; inset:auto; width:100%; height:auto; aspect-ratio:2 / 1; max-height:112px;
    margin:0 0 12px; opacity:1; overflow:hidden; border-radius:12px;
  }
  .card.svc .svc-visual img{
    width:100%; height:100%; object-fit:contain; object-position:right center;
    display:block;
  }
  .card.svc .svc-top{min-height:44px}
}
/* Side-by-side before/after (replaces slider) */
.ba-compare{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:960px;margin:0 auto;
}
.ba-panel{
  margin:0;background:var(--cs-surface,#fff);border:1px solid var(--cs-line,rgba(15,23,42,.12));
  border-radius:var(--r-card,16px);overflow:hidden;box-shadow:var(--sh-1);
}
.ba-panel img{width:100%;height:auto;aspect-ratio:1200/730;object-fit:cover;display:block;background:var(--cs-bg-alt,#e8eef8)}
.ba-panel figcaption{
  margin:0;padding:12px 16px;font:650 15px/1.3 var(--ff-sans,"Instrument Sans",system-ui,sans-serif);
  color:var(--cs-ink,#0f172a);background:var(--cs-bg,#f4f7fc);border-top:1px solid var(--cs-line,rgba(15,23,42,.12));
}
.ba-panel.after figcaption{background:var(--cs-blue-tint,#e0ebff);color:var(--cs-blue,#0052cc)}
@media (max-width:767px){
  .ba-compare{grid-template-columns:1fr}
}