/* site-v49-basin-floor: the basin section. v49 = v48's floor with the text under the drawing as ONE column in reading order
 * (state caption → the closing caption → the quote → the dummy-company note, last and small), in the lede's column at every width; the
 * left column below the heading holds nothing (TEXT_PLACEMENT_RULES_2026_09_26). The ground is an SVG stretched to its box (non-scaling strokes) across the full width; the ball,
 * the idea card and the labels are HTML placed by the same fractions (--x, --y). v48: the ground IS the section's floor. The fill under the
 * curve continues down as one solid slab (#262626) to the section's bottom edge: the four hollow labels sit in it under their hollows, and
 * the captions, the "Built into Fractl Agents" line and the closing quote are set on it in the page's column. The next section starts where
 * the slab ends. Pinned: the land takes what height is left, the slab always reaches the bottom of the screen. JS off or reduced motion =
 * the final state, unpinned. */
.sec-basin{--slab:#292929;--slab-rule:#454545;padding-block:0;overflow:clip}
.bs-in{display:flex;flex-direction:column;padding-top:clamp(72px,10vh,110px)}
html.anim .bs-track{height:calc(100svh + (var(--n) - 1) * var(--pin-step) + var(--pin-hold))}
html.anim .bs-pin{position:sticky;top:0;height:100svh}
html.anim .bs-in{height:100%;padding-top:clamp(48px,7vh,72px)}

.bs-head,.bs-on{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,96px)}
.bs-head{row-gap:6px;align-items:end;flex:none}
.bs-lead{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--sub);max-width:34em}

/* the drawing: edge to edge; the land keeps its height when there is room and gives it up first when there is not */
.bs-fig{--land:clamp(240px,40svh,400px);flex:0 1 auto;min-height:0;display:flex;flex-direction:column;margin:clamp(12px,2.4vh,26px) 0 0}
.bs-land{position:relative;flex:0 1 var(--land);min-height:170px}
html:not(.anim) .bs-land{flex:none;height:380px}
.bs-svg{position:absolute;left:0;top:0;width:100%;height:calc(100% + 1px);overflow:visible}
.bs-fill{fill:var(--slab)}
.bs-was{fill:none;stroke:#454545;stroke-width:1.25;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.bs-line{fill:none;stroke:#7a7a7a;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.bs-cut{fill:none;stroke:var(--teal);stroke-width:2.25;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}

.bs-ball{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:18px;height:18px;margin:-19px 0 0 -9px;border-radius:50%;background:var(--teal-hi);box-shadow:0 0 0 3px #1a1a1a}
.bs-lead-line{position:absolute;left:calc(var(--x) * 100%);top:24px;height:calc(var(--y) * 100% - 48px);border-left:1px dashed rgba(95,214,189,.55)}
.bs-idea{position:absolute;z-index:1;top:0;left:calc(var(--x) * 100%);transform:translateX(calc(var(--x) * -100%));width:max-content;max-width:min(330px,calc(100vw - 32px));margin:0;padding:10px 14px 11px;background:var(--panel);border:1px solid var(--edge);border-radius:10px}
.bs-idea small{display:block;font:600 11.5px/1.3 var(--sans);color:var(--sub);letter-spacing:.01em}
.bs-idea span{display:block;margin-top:3px;font-size:16px;line-height:1.35;font-weight:500;color:var(--ink);text-wrap:balance}

/* labels in the ground: the generic answer's under its dip, the four under their hollows at the top of the slab */
.bs-lab{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);width:max-content;max-width:12.5vw;text-align:center;font-size:16px;line-height:1.3;color:var(--sub);transition:opacity var(--motion-medium) var(--ease-out),color var(--motion-medium) var(--ease-out)}
.bs-lab b{font-weight:500}
.bs-lab i{display:none;font-style:normal}
.bs-lab::before{content:"";display:block;width:1.5px;height:9px;margin:0 auto 5px;background:var(--teal)}
.bs-lab0{top:calc(var(--y) * 100% + 12px);color:var(--sub)}
.bs-lab0::before{background:#7a7a7a}
.bs-lab.now{color:var(--ink)}
.bs-labs{position:relative;flex:none;height:62px;background:var(--slab)}
.bs-labs .bs-lab{top:0}
/* at the last state a teal line joins the four ticks: one set, built in */
.bs-rule{position:absolute;top:0;left:43%;right:14.5%;height:1.5px;background:var(--teal);transform-origin:left;transition:opacity var(--motion-medium) var(--ease-out),transform var(--motion-slow) var(--ease-out)}
html.anim .bs-lab:not(.on){opacity:0}
html.anim .bs-rule:not(.on){opacity:0;transform:scaleX(0)}

/* the slab: the rest of the section, down to its bottom edge; the words are set on it in the page's column */
/* v50: clearly more air between the labels in the slab and the words under them (about double v49's gap, at every size);
   the pinned land gives up the height (it is the flex item that shrinks), never the text */
.bs-slab{flex:1 0 auto;background:var(--slab);padding-block:clamp(28px,3.6vh,40px) clamp(56px,9vh,96px)}
html.anim .bs-slab{padding-bottom:clamp(22px,4vh,44px)}
.bs-col{grid-column:2;min-width:0}
.bs-caps{display:grid}
.bs-note{margin:clamp(12px,2vh,20px) 0 0;max-width:36em}
.bs-cap{grid-area:1/1}
html.anim .bs-cap:not(.on){visibility:hidden}
html:not(.anim) .bs-cap:not(.on){display:none}
.bs-k{display:flex;align-items:baseline;gap:12px;font-size:17px;font-weight:600;color:var(--ink)}
.bs-k span{font:600 16px var(--sans);color:var(--teal-hi);min-width:12px}
.bs-t>p{margin-top:2px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink);max-width:36em;text-wrap:pretty}
.bs-last .bs-k{color:var(--teal-hi)}
.bs-q{margin:clamp(14px,2.2vh,22px) 0 0;transition:opacity var(--motion-medium) var(--ease-out)}
.bs-q blockquote{margin:0;padding-top:clamp(12px,1.8vh,18px);border-top:1px solid var(--slab-rule)}
.bs-q blockquote p{font-size:clamp(18px,1.5vw,22px);line-height:1.35;letter-spacing:-.015em;color:var(--sub);max-width:34em}
.bs-q figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:8px;font-size:17px;color:var(--sub)}
.bs-q .tlink{font-size:17px}
html.anim .bs-q:not(.on){opacity:0;visibility:hidden}
html.anim .bs-cap.on.enter .bs-t>p,html.anim .bs-cap.on.enter .bs-k{animation:rise var(--motion-medium) var(--ease-out) both}
html.anim .bs-idea span.enter{animation:rise var(--motion-medium) var(--ease-out) both}
.bs-snap,.bs-snap *,.bs-snap *::before,.bs-snap *::after{transition:none!important;animation:none!important}


.bs-k span:empty{display:none}
@media (max-width:1100px){.bs-lab{max-width:12vw;font-size:16px}}
@media (max-width:899px){
  .bs-head,.bs-on{grid-template-columns:minmax(0,1fr)}
  .bs-col{grid-column:1}
  .bs-lead{font-size:17px}
  .bs-fig{--land:clamp(190px,30svh,260px)}
  html:not(.anim) .bs-land{height:300px}
  .bs-land{min-height:150px}
  .bs-lab{max-width:none;font-size:16px}
  .bs-lab b{display:none}
  .bs-lab i{display:inline}
  /* short labels, staggered so neighbours never touch at phone width */
  .bs-labs{height:66px}
  .bs-labs .bs-lab:nth-child(odd)::before{height:31px}
  .bs-idea{max-width:min(250px,calc(100vw - 32px));padding:8px 11px 9px}
  .bs-idea span{font-size:16px}
  .bs-k{font-size:17px}
  .bs-t>p{font-size:17px}
  .bs-q{margin-top:12px}
  .bs-q blockquote{padding-top:10px}
  .bs-q blockquote p{font-size:17px}
  .bs-q figcaption{margin-top:6px;gap:4px 16px}
}