/* Hosted Training studies (builder B2): the loop on the pinned painting, the rounds on a time line. Tokens and type roles only. */

/* the build's plate is re-set by .ht-loop (same painting, same pinned setting, longer so the loop can be drawn on it) */
.plate{display:none}

/* ---------- the learning loop on the painting ---------- */
.ht-loop{position:relative;height:calc(100svh + 230vh);background:var(--bg)}
.ht-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg)}
.ht-stage{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.ht-stage>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.ht-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ht-svg{--s:1}
.ht-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ht-guide{stroke:rgba(255,255,255,.62);stroke-width:calc(1.5px / var(--s));stroke-dasharray:calc(4px / var(--s)) calc(7px / var(--s));opacity:var(--g,0)}
.ht-halo{stroke:rgba(0,0,0,.22);stroke-width:calc(8px / var(--s))}
.ht-run{stroke:var(--verm);stroke-width:calc(3.4px / var(--s))}
.ht-ring{fill:none;stroke:var(--verm);stroke-width:calc(2.6px / var(--s));opacity:0}
.ht-mk{fill:var(--verm);stroke:#fff;stroke-width:calc(2px / var(--s));opacity:0}
.ht-head{fill:var(--verm);stroke:#fff;stroke-width:calc(2px / var(--s));opacity:0;filter:drop-shadow(0 0 6px rgba(226,70,42,.7))}

.ht-labs{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.ht-lab{position:absolute;padding:9px 15px 10px;border-radius:999px;font:var(--w-h3) var(--s-body)/1 var(--f);letter-spacing:-.005em;color:#fff;white-space:nowrap;
  background:linear-gradient(150deg,rgba(26,32,26,.62),rgba(14,18,14,.46));-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:var(--glass-edge),0 14px 34px rgba(0,0,0,.28);opacity:var(--a,0);transform:translate(var(--tx,0),var(--ty,0)) translateY(calc((1 - var(--a,0)) * 8px));
  transition:box-shadow var(--t1) var(--ease)}
.ht-lab--c{--tx:-50%;--ty:-100%}
.ht-lab--l{--tx:-100%;--ty:-50%}
.ht-lab--tl{--tx:-100%;--ty:-100%}
.ht-lab.on{box-shadow:var(--glass-edge),inset 0 0 0 1.5px var(--verm),0 14px 34px rgba(0,0,0,.3)}

.ht-key{position:absolute;left:0;top:0;width:min(440px,calc(100vw - 40px));padding:18px 22px 20px;border-radius:18px;
  background:linear-gradient(150deg,rgba(26,32,26,.6),rgba(14,18,14,.44));-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:var(--glass-edge),0 24px 60px rgba(0,0,0,.32);opacity:var(--k,0)}
.ht-key .eyebrow{color:rgba(255,255,255,.72);margin-bottom:8px}
.ht-cap{font:400 var(--s-body)/1.5 var(--f);color:#fff;max-width:30em}

/* phone: in the overview the four words become a row under the small painting */
.ht-loop.ht-ls .ht-labs{inset:auto;left:20px;right:20px;top:calc(100% + 16px);display:flex;flex-wrap:wrap;gap:8px}
.ht-loop.ht-ls .ht-lab{position:relative;left:auto!important;top:auto!important;--tx:0;--ty:0;padding:9px 13px 10px}

/* no script: the painting with its four words and caption under it */
html:not(.js) .ht-loop{height:auto}
html:not(.js) .ht-pin{position:relative;height:auto;overflow:visible}
html:not(.js) .ht-stage{position:relative;aspect-ratio:3 / 2;height:auto}
html:not(.js) .ht-labs{position:static;display:flex;gap:8px;padding:16px var(--m)}
html:not(.js) .ht-lab,html:not(.js) .ht-key{position:relative;opacity:1;transform:none;left:auto!important;top:auto!important}
html:not(.js) .ht-key{margin:0 var(--m) 40px}

@media (max-width:760px){
  .ht-loop{height:calc(100svh + 270vh)}
  .ht-lab{font-size:var(--s-small);padding:8px 12px 9px}
  .ht-key{padding:14px 16px 16px}
}
@media (prefers-reduced-motion:reduce){
  .ht-loop{height:auto;padding-bottom:clamp(54px,8.4vw,132px)}
  .ht-pin{position:relative;height:100svh}
  .ht-rounds{margin-top:0!important}
}

/* ---------- the paper chapter after the painting slides over it while the painting is still pinned ---------- */
.ht-rounds{margin-top:-30vh}
.ht-rounds .trio p{color:var(--ink2)}

/* ---------- the benefits: three tiles, each an isometric line drawing of its point ending in its outcome (client note 204) ---------- */
.ht-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.ht-tile{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px var(--iline),0 24px 60px rgba(14,15,15,.07)}
.ht-iso{position:relative;margin:0;height:300px;background:radial-gradient(70% 80% at 50% 45%,#fff,rgba(255,255,255,.4) 70%,transparent),linear-gradient(180deg,rgba(14,15,15,.015),rgba(14,15,15,.035));border-bottom:1px solid var(--iline)}
.ht-iso>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.paper .ht-chip,.ht-chip{position:absolute;left:0;top:0;margin:0;padding:6px 10px 7px;border-radius:999px;white-space:nowrap;font:500 var(--s-small)/1 var(--f);color:var(--ink);
  background:#fff;box-shadow:0 0 0 1px rgba(14,15,15,.16),0 6px 16px rgba(14,15,15,.08);opacity:var(--a,0);will-change:transform;transition:opacity var(--t1) var(--ease)}
.ht-chip.on{box-shadow:0 0 0 1.5px var(--verm),0 6px 16px rgba(14,15,15,.08)}
.ht-tt{padding:26px 26px 30px}
.ht-tt h3{color:var(--ink)}
.paper .ht-tt p{color:var(--ink2);margin-top:10px;max-width:26em}
@media (max-width:1100px){ .ht-iso{height:260px} }
@media (max-width:760px){
  .ht-tiles{display:block}
  .ht-tile+.ht-tile{margin-top:18px}
  .ht-iso{height:250px}
  .ht-tt{padding:22px 20px 24px}
}

/* the benefits sheet: a straight cut over the pinned painting, no torn edge (final pass: a different kind of change) */
.ht-rounds{z-index:3;box-shadow:0 -40px 80px rgba(0,0,0,.35)}

/* ---------- the path: a finished line diagram; three steps, the return of reviewed examples, the outcome ---------- */
.ht-path{padding-top:clamp(72px,7vw,112px)}
.ht-flow{position:relative;margin:0;padding-top:96px}
.ht-fl-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ht-fl-svg path{fill:none;stroke-linecap:round}
.ht-fl-steps{position:relative;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.ht-fl-steps>li{grid-column:span 3}
.ht-fl-chip{display:inline-flex;align-items:center;gap:10px;margin:0;padding:12px 18px 13px;border-radius:999px;color:#fff;white-space:nowrap;
  background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:var(--glass-edge),0 18px 40px rgba(0,0,0,.35)}
.ht-fl-chip::before{content:'';width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6)}
.ht-fl-steps p:not(.ht-fl-chip){color:var(--fg2);margin-top:18px;max-width:22em}
.ht-fl-res{font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em;white-space:normal;max-width:15em;border-radius:18px;
  box-shadow:var(--glass-edge),inset 0 0 0 1.5px var(--verm),0 18px 40px rgba(0,0,0,.35)}
.ht-fl-res::before{background:var(--verm)}
.ht-fl-back{position:absolute;left:0;top:0;margin:0;font:500 var(--s-small)/1.3 var(--f);color:var(--fg2);white-space:nowrap}
/* assembled once when seen: chips in order, the lines between them, the outcome, then the return */
.js .ht-flow .ht-fl-chip,.js .ht-flow .ht-fl-steps p,.js .ht-flow .ht-fl-back{opacity:0;transform:translateY(8px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.js .ht-flow.in .ht-fl-chip,.js .ht-flow.in .ht-fl-steps p,.js .ht-flow.in .ht-fl-back{opacity:1;transform:none}
.ht-flow .ht-fl-steps li:nth-child(2) *{transition-delay:var(--t1)}
.ht-flow .ht-fl-steps li:nth-child(3) *{transition-delay:var(--t2)}
.ht-flow .ht-fl-steps li:nth-child(4) *{transition-delay:calc(var(--t2) + var(--t1))}
.js .ht-flow .ht-fl-back{transition-delay:var(--t3)}
.ht-fl-svg .ht-fl-l{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset var(--t2) var(--ease-io)}
.ht-flow.in .ht-fl-svg .ht-fl-l{stroke-dashoffset:0}
@media (max-width:760px){
  .ht-flow{padding-top:0;padding-right:96px}
  .ht-fl-steps{display:block;padding-left:20px}
  .ht-fl-steps>li+li{margin-top:34px}
  .ht-fl-back{white-space:normal;width:70px;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .js .ht-flow .ht-fl-chip,.js .ht-flow .ht-fl-steps p,.js .ht-flow .ht-fl-back{opacity:1;transform:none;transition:none}
  .ht-fl-svg .ht-fl-l{stroke-dashoffset:0;transition:none}
}