/* Homepage-only sections: How it works (#sl-how), Meet the Team (#sl-crew) and the Market Pulse scene (#sl-market).
   Loaded only by index.html (front matter extra_css). Every selector starts with body.sl-page-home so the single-file
   preview, which loads every page's CSS everywhere, never leaks these rules onto other pages. */

/* ---------- How it works: Buying / Selling tabs over a numbered step timeline ---------- */
body.sl-page-home #sl-how{--how-gap:20px;--how-rail:30px}
body.sl-page-home #sl-how .sl-how__head{align-items:flex-end}
body.sl-page-home #sl-how .sl-lede{max-width:44ch}
body.sl-page-home .sl-how__tabs{display:inline-flex;flex:none;padding:4px;gap:4px;background:#fff;border:1px solid var(--sl-line);border-radius:var(--sl-radius);box-shadow:var(--sl-shadow)}
body.sl-page-home .sl-how__tab{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;min-width:150px;padding:0 22px;border:0;border-radius:2px;background:transparent;color:var(--sl-muted);font:inherit;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background .3s var(--sl-ease),color .3s}
body.sl-page-home .sl-how__tab svg{width:18px;height:18px;flex:none}
body.sl-page-home .sl-how__tab:hover{color:var(--sl-text)}
body.sl-page-home .sl-how__tab[aria-selected="true"]{background:#0A0E16;color:#fff}
body.sl-page-home .sl-how__tab[aria-selected="true"] svg{color:var(--sl-red)}
body.sl-page-home .sl-how__tab:focus-visible{outline-offset:2px}

body.sl-page-home .sl-how__panel:focus{outline:none}
body.sl-page-home .sl-how__panel:focus-visible{outline:2px solid var(--sl-red-2);outline-offset:8px}
body.sl-page-home .sl-how__panel[hidden]{display:none}
body.sl-page-home .sl-how__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--how-rail) + 14px) var(--how-gap);counter-reset:none}
/* Each step is a light card; a rail with a red node runs above every row and links the cards left to right. */
body.sl-page-home .sl-how__step{position:relative;display:flex;margin-top:var(--how-rail)}
body.sl-page-home .sl-how__card{position:relative;display:flex;flex-direction:column;width:100%;padding:24px 24px 26px;background:#fff;border:1px solid var(--sl-line);border-radius:var(--sl-radius);box-shadow:var(--sl-shadow);transition:opacity 1s var(--sl-ease-out),transform 1.1s var(--sl-ease-out),clip-path 1.2s var(--sl-ease-out),box-shadow .5s,border-color .4s;transition-delay:var(--sl-d,0s)}
body.sl-page-home .sl-how__card.is-in,body.sl-page-home .sl-crew__card.is-in{transition:transform .5s var(--sl-ease-out),box-shadow .5s,border-color .4s,opacity 1s var(--sl-ease-out);transition-delay:0s}
body.sl-page-home .sl-how__step::before{content:"";position:absolute;left:22px;top:calc(-1 * var(--how-rail) - 5px);z-index:1;width:11px;height:11px;border-radius:50%;background:var(--sl-bg);border:2px solid var(--sl-red);box-sizing:border-box;transition:background .3s}
body.sl-page-home .sl-how__step::after{content:"";position:absolute;left:0;right:calc(-1 * var(--how-gap));top:calc(-1 * var(--how-rail));height:1px;background:var(--sl-line-2)}
body.sl-page-home .sl-how__step:nth-child(4n)::after{right:0}
body.sl-page-home .sl-how__step:hover .sl-how__card{transform:translateY(-4px);border-color:var(--sl-line-2);box-shadow:0 2px 4px rgba(46,38,28,.05),0 26px 50px -26px rgba(46,38,28,.38)}
body.sl-page-home .sl-how__step:hover::before{background:var(--sl-red)}
body.sl-page-home .sl-how__num{display:block;font-size:2.9rem;font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--sl-text);font-variant-numeric:tabular-nums}
body.sl-page-home .sl-how__num::after{content:"";display:block;width:24px;height:2px;margin:16px 0 18px;background:var(--sl-red)}
body.sl-page-home .sl-how__card h4{margin:0 0 8px;font-size:1.14rem;font-weight:500;line-height:1.25;letter-spacing:-.005em;color:var(--sl-text)}
body.sl-page-home .sl-how__card p{margin:0;font-size:15px;line-height:1.55;color:var(--sl-muted)}
/* Re-entry animation when the visitor switches tabs (the first view uses the site's reveal system). */
@keyframes sl-how-in{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
body.sl-page-home .sl-how__panel.is-anim .sl-how__card,body.sl-page-home .sl-how__panel.is-anim .sl-how__cta{animation:sl-how-in .7s var(--sl-ease-out) both;animation-delay:var(--sl-d,0s)}

/* Closing CTA: a navy inset strip (the dark-panel bridge of the two-tone system). */
body.sl-page-home .sl-how__cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px 36px;flex-wrap:wrap;margin-top:34px;padding:26px 32px;background:#0E1521;border-radius:var(--sl-radius);overflow:hidden;box-shadow:0 2px 4px rgba(10,14,22,.08),0 34px 60px -38px rgba(10,14,22,.6)}
body.sl-page-home .sl-how__cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sl-red)}
body.sl-page-home .sl-how__cta-k{margin:0 0 4px;font-size:clamp(1.3rem,1.9vw,1.6rem);font-weight:500;letter-spacing:-.015em;line-height:1.2;color:#fff}
body.sl-page-home .sl-how__cta-t{margin:0;font-size:15.5px;color:var(--sl-muted)}
body.sl-page-home .sl-how__cta-a{display:flex;align-items:center;gap:18px 30px;flex-wrap:wrap}

@media (max-width:1180px){
  body.sl-page-home .sl-how__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.sl-page-home .sl-how__step:nth-child(4n)::after{right:calc(-1 * var(--how-gap))}
  body.sl-page-home .sl-how__step:nth-child(2n)::after{right:0}
}
/* Phones: a vertical timeline, rail on the left. */
@media (max-width:760px){
  body.sl-page-home #sl-how{--how-gap:14px}
  body.sl-page-home .sl-how__tabs{display:flex;width:100%}
  body.sl-page-home .sl-how__tab{flex:1;min-width:0;padding:0 12px}
  body.sl-page-home .sl-how__steps{grid-template-columns:1fr;gap:var(--how-gap);padding-left:28px}
  body.sl-page-home .sl-how__step{margin-top:0}
  body.sl-page-home .sl-how__card{padding:20px 20px 22px}
  body.sl-page-home .sl-how__step::before{left:-28px;top:26px}
  body.sl-page-home .sl-how__step::after,body.sl-page-home .sl-how__step:nth-child(2n)::after,body.sl-page-home .sl-how__step:nth-child(4n)::after{left:-23px;right:auto;top:0;bottom:calc(-1 * var(--how-gap));width:1px;height:auto}
  body.sl-page-home .sl-how__step:first-child::after{top:26px}
  body.sl-page-home .sl-how__step:last-child::after{bottom:auto;height:26px}
  body.sl-page-home .sl-how__card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:baseline}
  body.sl-page-home .sl-how__num{grid-row:1/3;font-size:1.9rem}
  body.sl-page-home .sl-how__num::after{width:18px;margin:10px 0 0}
  body.sl-page-home .sl-how__card h4{font-size:1.08rem}
  body.sl-page-home .sl-how__cta{padding:22px 20px 22px 24px}
  body.sl-page-home .sl-how__cta-a{width:100%}
  body.sl-page-home .sl-how__cta-a .sl-btn{width:100%}
}

/* ---------- Meet the Team: headshot carousel ---------- */
body.sl-page-home .sl-car--crew{--sl-car-cols:4;--sl-car-gap:20px}
body.sl-page-home #sl-crew .sl-lede{max-width:46ch}
body.sl-page-home .sl-crew__card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--sl-line);border-radius:var(--sl-radius);overflow:hidden;box-shadow:var(--sl-shadow);color:var(--sl-text);transition:opacity 1s var(--sl-ease-out),transform 1.1s var(--sl-ease-out),box-shadow .5s,border-color .4s;transition-delay:var(--sl-d,0s)}
body.sl-page-home .sl-crew__card:hover{transform:translateY(-6px);border-color:var(--sl-line-2);box-shadow:0 2px 4px rgba(46,38,28,.05),0 26px 50px -26px rgba(46,38,28,.38)}
body.sl-page-home .sl-crew__card:focus-visible{outline:2px solid var(--sl-red-2);outline-offset:3px}
body.sl-page-home .sl-crew__img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#EEEBE6}
body.sl-page-home .sl-crew__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 1.2s var(--sl-ease-out)}
body.sl-page-home .sl-crew__card:hover .sl-crew__img img{transform:scale(1.04)}
body.sl-page-home .sl-crew__body{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 56px 20px 20px;border-top:1px solid var(--sl-line);flex:1}
body.sl-page-home .sl-crew__name{font-size:1.2rem;font-weight:500;line-height:1.2;letter-spacing:-.01em}
body.sl-page-home .sl-crew__title{font-size:11px;font-weight:500;line-height:1.55;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-muted)}
body.sl-page-home .sl-crew__title i{font-style:normal;color:var(--sl-red-ink)}
body.sl-page-home .sl-crew__go{position:absolute;right:18px;bottom:20px;color:var(--sl-red)}
body.sl-page-home .sl-crew__go svg{display:block;width:18px;height:18px;transition:transform .35s var(--sl-ease-out)}
body.sl-page-home .sl-crew__card:hover .sl-crew__go svg{transform:translateX(4px)}
/* Shpresa's own card: red top edge and a small tag, nothing louder. */
body.sl-page-home .sl-crew__card--me{border-color:var(--sl-line-2)}
body.sl-page-home .sl-crew__card--me::before{content:"";position:absolute;left:0;right:0;top:0;z-index:2;height:3px;background:var(--sl-red)}
body.sl-page-home .sl-crew__tag{position:absolute;left:14px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:2px;background:var(--sl-red);color:#fff;font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;line-height:1}
body.sl-page-home .sl-crew__tag::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
@media (max-width:1180px){body.sl-page-home .sl-car--crew{--sl-car-cols:3}}
@media (max-width:760px){
  body.sl-page-home .sl-car--crew .sl-car__track{grid-auto-columns:64%}
  body.sl-page-home .sl-crew__body{padding:14px 44px 16px 16px}
  body.sl-page-home .sl-crew__name{font-size:1.08rem}
  body.sl-page-home .sl-crew__title{font-size:10.5px;letter-spacing:.16em}
  body.sl-page-home .sl-crew__go{right:14px;bottom:16px}
}

/* ---------- Market Pulse: faded county video that follows the hovered card ---------- */
/* Same fade as the photo banner it replaces: clip at --sl-bgv-o (data-sl-bgv-o) under the banner's navy washes. */
body.sl-page-home #sl-market .sl-mkt__bgv img,body.sl-page-home #sl-market .sl-mkt__bgv video{transform:scale(1.04)}
body.sl-page-home #sl-market .sl-mkt__bgv img{transition:opacity .9s var(--sl-ease)}
body.sl-page-home #sl-market .sl-mkt__bgv::after{z-index:1;background:linear-gradient(180deg,var(--sl-bg) 0%,rgba(10,14,22,.45) 22%,rgba(10,14,22,.55) 70%,var(--sl-bg) 100%),linear-gradient(90deg,rgba(10,14,22,.86),rgba(10,14,22,.25) 72%)}
body.sl-page-home #sl-market .sl-mkt__scene{position:absolute;right:var(--sl-gutter);bottom:clamp(22px,3vw,36px);z-index:2;display:flex;align-items:center;gap:10px;margin:0;font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--sl-muted);pointer-events:none}
body.sl-page-home #sl-market .sl-mkt__scene::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sl-red)}
body.sl-page-home #sl-market .sl-mkt__scene span{transition:opacity .4s var(--sl-ease)}
body.sl-page-home #sl-market .sl-mkt__scene.is-swap span{opacity:0}
body.sl-page-home #sl-market .sl-mcard{transition:border-color .4s var(--sl-ease),transform .5s var(--sl-ease-out)}
body.sl-page-home #sl-market .sl-mcard.is-scene{border-color:rgba(225,37,27,.55)}
@media (max-width:760px){body.sl-page-home #sl-market .sl-mkt__scene{display:none}}

@media (prefers-reduced-motion:reduce){
  body.sl-page-home .sl-how__panel.is-anim .sl-how__card,body.sl-page-home .sl-how__panel.is-anim .sl-how__cta{animation:none}
  body.sl-page-home .sl-how__card,body.sl-page-home .sl-crew__card,body.sl-page-home .sl-crew__img img{transition:none}
  body.sl-page-home .sl-how__step:hover .sl-how__card,body.sl-page-home .sl-crew__card:hover{transform:none}
  body.sl-page-home .sl-crew__card:hover .sl-crew__img img{transform:none}
}