/* Variant B: stacked scenario bands. Copy column beside one .sd-frame of real app UI. */
#how.bs{padding:96px 0 160px;overflow-x:clip}
.bs-intro{margin-bottom:24px}
.bs-intro h2{margin:0}
.bs-list{display:grid;gap:144px;margin-top:80px}

.bs-band{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;align-items:center}
.bs-band.is-flip{grid-template-columns:minmax(0,1fr) 300px}
.bs-band.is-flip .bs-copy{order:2}
.bs-band.is-flip .bs-fig{order:1}

.bs-copy{display:grid;gap:14px;align-content:center}
.bs-kicker{margin:0;font-size:14px;font-weight:600;color:var(--free,#2f6bff)}
.bs-copy h3{margin:0;font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.bs-lines{display:grid;gap:10px}
.bs-lines p{margin:0;font-size:16px;line-height:1.6;color:var(--dim)}

.bs-fig{margin:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.bs-frame{position:relative}
.bs-app{height:680px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--rule);pointer-events:none}
.bs-app .oc-real{height:100%}

/* Outcome cards layered in the same frame. */
.bs-frame .bs-done .modal-body{padding:20px 22px 22px}
.bs-frame .bs-done h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.bs-frame .bs-done p{margin:0}
.bs-frame .bs-done{position:absolute;opacity:1;transform:none;width:300px;background:#fff;border-radius:16px;border:1px solid var(--rule);box-shadow:0 24px 48px -20px rgba(16,24,40,.35),0 2px 6px rgba(16,24,40,.06);z-index:3}
.is-recruiter .bs-done{right:-28px;bottom:-28px}
.bs-stack{position:absolute;right:-28px;bottom:-28px;z-index:3;display:grid;gap:12px;width:300px}
.bs-stack .bs-done{position:relative;right:auto;bottom:auto;width:auto}
.bs-pop{background:#fff;border-radius:14px;border:1px solid var(--rule);padding:12px 14px;box-shadow:0 24px 48px -20px rgba(16,24,40,.35),0 2px 6px rgba(16,24,40,.06)}
.is-flip .is-recruiter .bs-done,.bs-band.is-flip .bs-stack{right:auto;left:-28px}
.bs-band.is-flip.is-client .bs-stack{left:auto;right:28px}

/* Copied line, outside the app frame. */
.bs-chat{display:grid;justify-items:start;gap:8px;margin:0;padding-left:14px;text-align:left}
.bs-who{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--dim)}
.bs-who svg{flex:none;color:var(--dim)}
.bs-bubble{margin:0;padding:10px 16px;border-radius:18px 18px 18px 6px;background:var(--free,#2f6bff);color:#fff;font-size:16px;font-weight:500;line-height:1.4;box-shadow:0 10px 24px -14px rgba(47,107,255,.7)}

@media (max-width:1100px){
  .bs-band{grid-template-columns:minmax(0,1fr);gap:28px}
  .bs-band.is-flip{grid-template-columns:minmax(0,1fr)}
  .bs-band.is-flip .bs-copy{order:0}
  .bs-band.is-flip .bs-fig{order:1}
  .bs-copy{min-width:0}
  /* No grey frame panel: the app and its outcome cards stand on the scene as separate objects. */
  .bs-frame{padding:0;background:none;border:0;border-radius:0}
  .bs-app{border-radius:14px}
  /* Outcome cards sit under the grid, in flow, so they cover neither the grid nor the copy. */
  .bs-frame .bs-done,.bs-stack{position:relative;inset:auto;width:auto;margin-top:12px}
  .is-recruiter .bs-done,.bs-stack,.bs-band.is-flip .bs-stack,.bs-band.is-flip.is-client .bs-stack{right:auto;left:auto;bottom:auto}
  .is-recruiter .bs-frame .bs-done{max-width:360px;margin-left:auto}
  .bs-stack{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
}
@media (max-width:700px){
  #how.bs{padding:64px 0 96px}
  .bs-list{gap:72px;margin-top:48px}
  .bs-copy h3{font-size:23px}
  .bs-lines p{font-size:15.5px}
  .bs-app{height:640px;pointer-events:auto}
  /* No dock in these frames, so the app's phone padding for it is not needed. */
  body.lp #how .bs-app .oc-real .cal-wrap{padding-bottom:12px}
  /* The outcome card sits under the grid on a phone so it covers nothing. */
  .bs-frame .bs-done,.bs-stack{position:relative;inset:auto;width:auto;margin-top:10px}
  .is-recruiter .bs-done,.bs-stack,.bs-band.is-flip .bs-stack,.bs-band.is-flip.is-client .bs-stack{right:auto;left:auto;bottom:auto}
  .bs-chat{padding-left:4px}
}

/* Scenes. Each band carries its scene twice, full bleed: a sharp layer, and a blurred layer that is
   masked to the part of the band where the copy sits. The copy reads on the blurred scene, with no card. */
body.lp > .lp-rails{display:none}
.bs-band{position:relative;isolation:isolate;padding:88px 0;--bleed:64px;--tint:rgba(248,250,252,.42);--soft-mask:linear-gradient(90deg,#000 0 calc(50% - 120px),transparent calc(50% + 40px))}
.bs-band.is-recruiter{--bs-scene:url("/landing-scenes/recruiter.png")}
.bs-band.is-group{--bs-scene:url("/landing-scenes/group.png")}
.bs-band.is-trip{--bs-scene:url("/landing-scenes/trip.png")}
.bs-band.is-client{--bs-scene:url("/landing-scenes/client.png")}
.bs-band::before,.bs-band::after{content:"";position:absolute;top:calc(-1 * var(--bleed));bottom:calc(-1 * var(--bleed));left:calc(50% - 50vw - var(--bleed));width:calc(100vw + 2 * var(--bleed));clip-path:inset(var(--bleed));background:var(--bs-scene) center / cover no-repeat;pointer-events:none}
.bs-band::after{z-index:-2}
.bs-band::before{z-index:-1;background:linear-gradient(var(--tint),var(--tint)),var(--bs-scene) center / cover no-repeat;filter:blur(26px) saturate(1.05);-webkit-mask:var(--soft-mask);mask:var(--soft-mask)}
.bs-band.is-flip{--soft-mask:linear-gradient(270deg,#000 0 calc(50% - 120px),transparent calc(50% + 40px))}
.bs-copy h3{text-wrap:balance}
.bs-lines p{color:var(--ink);text-wrap:pretty}
.bs-who{color:var(--ink)}
.bs-who svg{color:var(--ink)}
.bs-app{height:500px;box-shadow:0 30px 60px -28px rgba(16,24,40,.45),0 2px 8px rgba(16,24,40,.08)}

@media(max-width:1100px){
  /* One column: copy, then the scene itself, then the app. The band ground is the scene stretched to the
     band's height and blurred, so the copy reads on the scene's own light upper part. The figure opens on a
     sharp, full-bleed stretch of the same scene, at the same scale and x position, where the people read. */
  #how.bs{overflow-x:clip}
  .bs-list{gap:96px}
  .bs-band{padding:56px 0 64px;gap:28px;--sh:460px;--tint:rgba(248,250,252,.4);--soft-mask:linear-gradient(#000,#000);
    --scene-w:max(calc(var(--sh) * var(--ar)), calc(100vw + 2 * var(--bleed)))}
  .bs-band.is-flip{--soft-mask:linear-gradient(#000,#000)}
  .bs-band.is-recruiter{--ar:2.334;--fx:92%}
  .bs-band.is-group{--ar:2.433;--fx:12%}
  .bs-band.is-trip{--ar:2.372;--fx:97%}
  .bs-band.is-client{--ar:1.777;--fx:6%}
  .bs-band::after{display:none}
  .bs-band::before{background:linear-gradient(var(--tint),var(--tint)),var(--bs-scene) var(--fx) 0 / var(--scene-w) 100% no-repeat}
  .bs-fig{position:relative;padding-top:calc(var(--sh) - 32px)}
  .bs-fig::before{content:"";position:absolute;z-index:-1;top:0;height:var(--sh);left:calc(50% - 50vw - var(--bleed));width:calc(100vw + 2 * var(--bleed));
    clip-path:inset(0 var(--bleed));background:var(--bs-scene) var(--fx) 50% / cover no-repeat;pointer-events:none;
    -webkit-mask:linear-gradient(180deg,transparent,#000 72px,#000 calc(100% - 56px),transparent);mask:linear-gradient(180deg,transparent,#000 72px,#000 calc(100% - 56px),transparent)}
  .bs-app{height:480px}
}
@media(max-width:700px){
  .bs-list{gap:72px}
  .bs-band{padding:44px 0 48px;gap:20px;--sh:320px}
  .bs-fig{padding-top:calc(var(--sh) - 24px)}
  .bs-fig::before{-webkit-mask:linear-gradient(180deg,transparent,#000 56px,#000 calc(100% - 40px),transparent);mask:linear-gradient(180deg,transparent,#000 56px,#000 calc(100% - 40px),transparent)}
  .bs-stack{grid-template-columns:minmax(0,1fr)}
  .is-recruiter .bs-frame .bs-done{max-width:none}
  .bs-app{height:440px}
}

/* ===== Section treatments. script.js writes #how[data-seam] from ?seam= (a, b or c; a when absent).
   b and c are whole-section variants of layout 3 and live in layout-3.css; /d1 and /d2 always use a.
   a · Crossfade: the scenes touch with no page ground between them. Each scene goes soft near its top and bottom
     edges, and the next scene fades in over the last one's blurred edge. The first scene fades in from the page
     ground and the last one fades back out to it. All copy, calendars and cards end well above each seam.
   Paint order, for every variant: no band makes its own stacking context. Each band's two scene layers sit at a
   negative z-index in the list's stacking context, later bands above earlier ones, so a scene's edge can fade
   over the one before it while all copy, calendars and cards stay above every scene.
   Mask positions add --bleed, because each scene layer reaches --bleed past the band's top and bottom. */
#how .bs-list{isolation:isolate}
#how .bs-band{isolation:auto}
#how .bs-band:nth-child(1)::after{z-index:-8}#how .bs-band:nth-child(1)::before{z-index:-7}
#how .bs-band:nth-child(2)::after{z-index:-6}#how .bs-band:nth-child(2)::before{z-index:-5}
#how .bs-band:nth-child(3)::after{z-index:-4}#how .bs-band:nth-child(3)::before{z-index:-3}
#how .bs-band:nth-child(4)::after{z-index:-2}#how .bs-band:nth-child(4)::before{z-index:-1}
.bs-chapter{display:none}

/* --seam-o: how far each scene overlaps the one before it. --seam-s: how far in from each edge the sharp scene is
   fully visible. Between the two, the scene's own blurred layer carries the seam. --seam-clear: the band padding
   that keeps content clear of the seam, with a stretch of scene below the lowest element. */
#how.bs[data-seam="a"]{--seam-o:140px;--seam-s:210px;--seam-top:230px;--seam-clear:280px;padding-bottom:96px}
#how.bs[data-seam="a"] .bs-list{gap:0}
#how.bs[data-seam="a"] .bs-band + .bs-band{margin-top:calc(-1 * var(--seam-o))}
#how.bs[data-seam="a"] .bs-band{
  --e0:var(--bleed);--e1:calc(100% - var(--bleed));
  /* Fade in over the scene before (or over the page ground, for the first). */
  --seam-in:linear-gradient(180deg,transparent 0,transparent var(--e0),rgba(0,0,0,.22) calc(var(--e0) + var(--seam-o) * .3),rgba(0,0,0,.6) calc(var(--e0) + var(--seam-o) * .55),rgba(0,0,0,.9) calc(var(--e0) + var(--seam-o) * .8),#000 calc(var(--e0) + var(--seam-o)));
  /* The blurred layer also covers both edges, so each seam is soft, then hands over to the sharp scene. */
  --seam-edge:linear-gradient(180deg,#000 0,#000 calc(var(--e0) + var(--seam-o)),transparent calc(var(--e0) + var(--seam-s) + 60px),transparent calc(var(--e1) - var(--seam-s) - 60px),#000 calc(var(--e1) - var(--seam-o)),#000 100%);
  --seam-sharp:linear-gradient(180deg,transparent 0,transparent calc(var(--e0) + var(--seam-o) * .35),#000 calc(var(--e0) + var(--seam-s)),#000 calc(var(--e1) - var(--seam-s)),transparent calc(var(--e1) - var(--seam-o) * .35),transparent 100%)}
#how.bs[data-seam="a"] .bs-band:last-child{
  --seam-in:linear-gradient(180deg,transparent 0,transparent var(--e0),rgba(0,0,0,.6) calc(var(--e0) + var(--seam-o) * .55),#000 calc(var(--e0) + var(--seam-o)),#000 calc(var(--e1) - var(--seam-o)),rgba(0,0,0,.6) calc(var(--e1) - var(--seam-o) * .55),transparent var(--e1),transparent 100%)}
#how.bs[data-seam="a"] .bs-band::after{-webkit-mask:var(--seam-sharp);mask:var(--seam-sharp)}
#how.bs[data-seam="a"] .bs-band::before{
  -webkit-mask:var(--seam-in),var(--seam-edge),var(--soft-mask);-webkit-mask-composite:source-in,source-over;
  mask:var(--seam-in),var(--seam-edge),var(--soft-mask);mask-composite:intersect,add}
/* The first scene's sharp layer also fades in from the page ground. */
#how.bs[data-seam="a"] .bs-band:first-child::after{
  -webkit-mask:var(--seam-in),var(--seam-sharp);-webkit-mask-composite:source-in;mask:var(--seam-in),var(--seam-sharp);mask-composite:intersect}
/* Content clear of the seams in every layout. Layout 1's recruiter card hangs 128px below its calendar. */
#how.bs[data-seam="a"][data-layout] .bs-band{padding-top:var(--seam-top);padding-bottom:var(--seam-clear)}
#how.bs[data-seam="a"][data-layout="1"] .bs-band.is-recruiter{padding-bottom:calc(var(--seam-clear) + 128px)}
/* Layout 2's client confirmation stands above its calendar, about 280px over the calendar's top edge. */
#how.bs[data-seam="a"][data-layout="2"] .bs-band.is-client{padding-top:calc(var(--seam-top) + 300px)}

@media(max-width:1100px){
  #how.bs[data-seam="a"]{--seam-o:100px;--seam-top:150px;--seam-clear:170px}
  /* One column: the band ground is the blurred scene, so only its fade in and out matter. The sharp stretch in
     the figure keeps its own soft top and bottom. */
  #how.bs[data-seam="a"] .bs-band::before{-webkit-mask:var(--seam-in);mask:var(--seam-in)}
}
@media(max-width:700px){
  #how.bs[data-seam="a"]{--seam-o:80px;--seam-top:116px;--seam-clear:132px}
}

/* The app header sat flush against the card's top edge: the scoped app CSS gives .bar no top padding here.
   Give it the app's own breathing room, at every width and in every layout. */
body.lp #how .bs-app .oc-real .bar{height:auto;min-height:0;padding:24px 24px 16px;gap:12px;align-items:center}
body.lp #how .bs-app .oc-real .head-l h1{min-height:0}

/* Outcome cards: left aligned, a done badge, the booked time in a blue chip, icons on each detail line. */
#how .bs-frame .bs-done{border-radius:18px;border:1px solid rgba(16,24,40,.08);box-shadow:0 28px 56px -24px rgba(16,24,40,.45),0 2px 6px rgba(16,24,40,.06)}
#how .bs-frame .bs-done .modal-body{display:grid;justify-items:start;text-align:left;gap:10px;padding:20px 22px 20px}
#how .bs-done-badge{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--free,#2f6bff);color:#fff;box-shadow:0 8px 18px -8px rgba(47,107,255,.8)}
#how .bs-frame .bs-done h2{font-size:18px;line-height:1.3;text-align:left;text-wrap:balance}
#how .bs-frame .bs-done .bk-done-when{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;background:rgba(47,107,255,.09);color:var(--free,#2f6bff)!important;font-size:14.5px!important}
#how .bs-frame .bs-done .bk-done-when svg{color:var(--free,#2f6bff)}
#how .bs-frame .bs-done .bk-done-how{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dim)}
#how .bs-frame .bs-done .bk-done-how svg{flex:none;color:var(--faint,#6b7079)}

/* App steps shown beside a calendar on /d3: white cards like the outcome cards, holding the app's own text. */
#how .bs-step{background:#fff;border-radius:18px;border:1px solid rgba(16,24,40,.08);box-shadow:0 28px 56px -24px rgba(16,24,40,.45),0 2px 6px rgba(16,24,40,.06);padding:18px 20px;display:grid;gap:12px;color:var(--ink)}
#how .bs-step .book-form{display:grid;gap:10px}
#how .bs-step .book-note{margin:0;font-size:14px;line-height:1.5;color:var(--dim)}
#how .bs-step .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;border-radius:12px;font:600 14.5px/1 var(--font,inherit);border:1px solid var(--rule);background:#fff;color:var(--ink)}
#how .bs-step .btn.dark{background:var(--free,#2f6bff);border-color:transparent;color:#fff}
#how .bs-step-head{margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;background:rgba(47,107,255,.09);color:var(--free,#2f6bff);font-weight:600;font-size:14.5px;justify-self:start}
#how .bs-note > div:not(.bs-step-head){font-size:14px;line-height:1.5;color:var(--dim)}
#how .bs-length{grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:12px}
#how .bs-step-label{margin:0;font-size:13.5px;color:var(--dim)}
#how .bs-seg{display:grid;grid-template-columns:repeat(4,1fr);padding:3px;border-radius:12px;background:#f1f3f6}
#how .bs-seg span{display:grid;place-items:center;height:34px;border-radius:9px;font-size:14px;font-weight:500;color:var(--dim)}
#how .bs-seg span.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}
#how .bs-copytimes{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:12px;background:var(--free,#2f6bff);color:#fff;font-weight:600;font-size:14.5px}

/* Preview controls keep the app's raised styling without acting as live controls. */
#how .bs-stack{cursor:default}
#how .bs-copytimes{background:var(--primary-grad);box-shadow:var(--elev-primary)}
#how .bs-copy h3{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
#how .bs-copy h3 > svg{width:var(--heading-icon-size,2.36em);height:var(--heading-icon-size,2.36em);color:var(--ink);flex:none}
#how .bs-title{min-width:0}

/* Use the existing overlapping scenario composition on phones too. The figure's
   measured overhang reserves the cards' space before the next section. */
@media(max-width:700px){
  #how.bs .bs-list{margin-top:24px}
  #how.bs[data-seam="a"][data-layout] .bs-band:first-child{padding-top:24px}
  #how .bs-frame .bs-stack,
  #how .bs-band.is-flip .bs-stack,
  #how .bs-band.is-flip.is-client .bs-stack{position:absolute;inset:auto;top:200px;left:0;right:auto;bottom:auto;width:calc(100% - 24px);margin:0;gap:12px}
  #how .bs-stack .bs-done{margin:0}
  #how .bs-band.is-trip .bs-stack{top:calc(100% - 100px)}
  #how .bs-band.is-flip.is-group .bs-stack{top:calc(100% - 100px)}
  #how .bs-band.is-flip.is-client .bs-stack{top:180px}
 body.lp #how .bs-app .oc-real .cal-wrap{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--faint) var(--hair);pointer-events:auto}
 body.lp #how .bs-app .oc-real .cal-wrap::-webkit-scrollbar{display:block;height:6px}
 body.lp #how .bs-app .oc-real .cal{flex:none;min-width:calc((100% + 32px) * var(--days) / 3 + var(--gut,40px))}
 #how .is-recruiter .bs-app{height:500px}
 #how .is-client .bs-app{height:700px}
 body.lp #how .bs-app .oc-real .head-l>div{min-width:0}
 body.lp #how .bs-app .oc-real .head-l h1{display:block;-webkit-line-clamp:unset;white-space:normal;overflow:visible;text-overflow:clip}
}