/* CrewSix mobile-first hero — shorter lede, trade icons, service chips, section breaks
   Pair with markup in demo.html / handoff. W2 tokens. */
.hero-mobile{padding:24px 0 8px}
.hero-mobile .lede-short{
  font-size:var(--fs-lead,clamp(1.125rem,1.04rem + .4vw,1.3125rem));
  line-height:1.55;color:var(--cs-muted,#475569);max-width:36ch;margin:0 0 20px;
}
.hero-mobile .lede-long{display:none} /* hide wall-of-text on mobile; chips replace it */
@media (min-width:1024px){
  .hero-mobile .lede-long{display:block;font-size:var(--fs-body);color:var(--cs-muted);max-width:60ch;margin:12px 0 0}
}
/* Tappable trade icon row — above the fold at 390 */
.trade-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:0 0 20px;padding:0;list-style:none;
}
@media (min-width:480px){.trade-row{grid-template-columns:repeat(4,1fr)}}
@media (min-width:768px){.trade-row{grid-template-columns:repeat(8,1fr);gap:12px}}
.trade-row a{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;color:var(--cs-ink,#0f172a);font:600 12px/1.25 var(--ff-sans,system-ui,sans-serif);
  min-height:44px;padding:8px 4px;border-radius:12px;
  transition:background var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1)),transform var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1));
}
.trade-row a:hover,.trade-row a:focus-visible{
  background:var(--cs-blue-tint,#e0ebff);color:var(--cs-blue-hover,#003d99);
}
.trade-row a:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring,0 0 0 2px #fff,0 0 0 5px #0052cc)}
.trade-row img{width:40px;height:40px;display:block}
.trade-row span{text-align:center}
/* Service add-on chips — replace the long "Add what fits" sentence */
.svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.svc-chips li{margin:0}
.svc-chips a,.svc-chips .chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--cs-border-strong,#64748b);
  color:var(--cs-ink,#0f172a);font:600 13px/1.2 var(--ff-sans,system-ui,sans-serif);
  padding:8px 12px;border-radius:999px;text-decoration:none;min-height:36px;
  transition:background var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1)),border-color var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1));
}
.svc-chips a:hover,.svc-chips a:focus-visible{
  background:var(--cs-blue-tint,#e0ebff);border-color:var(--cs-blue,#0052cc);color:var(--cs-blue-hover,#003d99);
}
.svc-chips a:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring,0 0 0 2px #fff,0 0 0 5px #0052cc)}
.svc-chips img{width:18px;height:18px;flex:0 0 auto}
.chip-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Section breaks */
.section-break{display:block;width:100%;height:auto;margin:0;line-height:0}
.section-break img,.section-break svg{width:100%;height:auto;display:block}
.section-break.wave{margin:8px 0 0}
@media (prefers-reduced-motion:reduce){
  .trade-row a,.svc-chips a,.svc-chips .chip{transition:none}
  .trade-row a:hover{transform:none}
}
/* On mobile, tuck the large hero screenshot below the CTA so icons win the fold */
@media (max-width:1023px){
  .hero .hero-visual{margin-top:24px}
  .hero-mobile .cta-row{margin-top:8px}
}

/* Fold priority at 390×844: eyebrow+h1+short lede+trade row+CTA must fit */
@media (max-width:1023px){
  .hero-mobile{padding:12px 0 4px}
  .hero-mobile h1{font-size:clamp(1.75rem,1.4rem + 2.2vw,2.25rem);margin:4px 0 10px}
  .hero-mobile .lede-short{margin:0 0 14px;font-size:1.0625rem}
  .trade-row{gap:6px;margin:0 0 14px}
  .trade-row a{padding:6px 2px;font-size:11px;gap:4px}
  .trade-row img{width:36px;height:36px}
  .cta-row{margin:4px 0 14px}
  .cta-row .btn{flex:1 1 auto;min-width:0}
  .svc-chips{margin:0 0 12px}
  .audience-line{display:none} /* trades row already covers this on mobile */
}
@media (min-width:1024px){
  .audience-line{font-size:15px;color:var(--cs-muted,#475569);margin:8px 0 0}
}