/* Home page */

/* ── hero ── */
.hero{position:relative;min-height:min(89svh,855px);display:flex;flex-direction:column;justify-content:center;
  background:var(--ice);overflow:hidden;isolation:isolate}
.hero .media{position:absolute;inset:0;z-index:-1}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;
  opacity:0;transition:opacity 1.6s ease}
.hero video.on{opacity:1}
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(244,248,253,.96) 0%,rgba(244,248,253,.86) 34%,rgba(244,248,253,.18) 66%,rgba(244,248,253,0) 100%),
  linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.9) 86%,#fff 100%)}
.hero .copy{width:100%;padding-bottom:clamp(40px,7vw,96px)}
.hero h1{font-size:clamp(2.35rem,5.2vw,4.6rem);max-width:17ch;letter-spacing:-.03em;font-weight:600}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .sub{max-width:52ch;margin-top:22px;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--text)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* the hero call to action carries the whole page, so it is larger than a normal button */
.ctas .btn{font-size:17px;padding:17px 28px;gap:11px}
.ctas .btn svg{width:17px;height:17px}
@media (max-width:560px){.ctas .btn{font-size:16.5px;padding:16px 24px}}
.vctl{position:absolute;right:var(--gut);top:24px;display:flex;gap:8px;align-items:center}
.vctl button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(22,32,46,.42);color:#fff;display:grid;place-items:center;transition:background .2s}
.vctl button:hover{background:rgba(22,32,46,.66)}
.vctl .on-i,.vctl [aria-pressed="true"] .off-i{display:none}
.vctl [aria-pressed="true"] .on-i{display:block}
.vctl small{font-size:12.5px;color:#fff;background:rgba(22,32,46,.42);padding:4px 10px;border-radius:999px}
.hero .swoosh{position:absolute;left:0;right:0;bottom:-1px;height:clamp(70px,11vw,170px);width:100%}
@media (max-width:720px){
  .hero{min-height:84svh}
  .hero .veil{background:
    linear-gradient(90deg,rgba(244,248,253,1) 0%,rgba(244,248,253,.95) 34%,rgba(244,248,253,.65) 66%,rgba(244,248,253,.1) 100%),
    linear-gradient(180deg,rgba(255,255,255,.15) 55%,rgba(255,255,255,1) 86%,#fff 100%)}
  .vctl small{display:none}
}

/* ── the loop: an annotated transcript ── */
.loop .steps{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;position:relative}
.loop .rail{position:absolute;left:21px;top:8px;bottom:8px;width:1.5px;background:var(--mist)}
.loop .rail i{position:absolute;inset:0;background:var(--blue);transform-origin:top;transform:scaleY(var(--p,0))}
.step{display:grid;grid-template-columns:44px minmax(0,1fr) 250px;gap:0 36px;padding-bottom:clamp(48px,6vw,80px);position:relative}
.step:last-child{padding-bottom:0}
.step .dot{width:44px;height:44px;border-radius:50%;background:var(--white);border:1.5px solid var(--mist);
  display:grid;place-items:center;font:700 16px var(--display);color:var(--muted);position:relative;z-index:1;
  transition:border-color .5s,color .5s,background .5s}
.step.in .dot{border-color:var(--blue);color:var(--white);background:var(--blue)}
.step h3{font-size:clamp(1.45rem,2.4vw,1.9rem);margin:6px 0 12px}
.step .body p{max-width:58ch}
.step .mnote{margin-top:10px}
@media (max-width:980px){
  .step{grid-template-columns:44px minmax(0,1fr);gap:0 20px}
  .step .mnote{grid-column:2;margin-top:22px}
}
.cast{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;align-items:flex-start}
.cast figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted);text-align:center;max-width:13ch;line-height:1.3;text-wrap:balance}
.cast .sep{width:1px;align-self:stretch;background:var(--mist);margin:0 4px}
.exch{display:grid;gap:14px;margin-top:22px;max-width:640px}
.say{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start}
.say.ther{grid-template-columns:1fr 52px}
.say.ther [data-robot]{order:2}
.say blockquote{margin:0;padding:12px 16px;border-radius:18px;font-size:16px;line-height:1.5;color:var(--ink)}
.say.pat blockquote{background:#FFFBF5;border:1px solid #F4E3C8;border-bottom-left-radius:6px}
.say.ther blockquote{background:#F7FBF8;border:1px solid #D6EBDE;border-bottom-right-radius:6px}
.say cite{display:block;font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.04em;margin-bottom:4px}
.say.pat cite{color:var(--patientD)} .say.ther cite{color:var(--therapistD)}
.debrief{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:640px}
.debrief li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:12px 16px;
  background:var(--mentorBG);border-radius:14px;color:var(--ink);font-size:15.5px}
.debrief .k{font:700 13px var(--display);color:var(--mentorD)}
.debrief .v{font-weight:700;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.debrief .ok{color:var(--ok)} .debrief .no{color:var(--no)}
.debrief q{grid-column:2/-1;font-style:italic;color:var(--mentorD);quotes:none}

/* ── the numbers, as one sentence ── */
.scale{background:var(--white)}
.scale .wrap{padding-block:clamp(56px,8vw,104px)}
.scale p{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.22;color:var(--ink);
  letter-spacing:-.02em;max-width:26ch;font-weight:500;text-wrap:balance}
.scale b{color:var(--blue);font-weight:700}
.scale .src{font:15px/1.5 var(--sans);color:var(--muted);margin-top:18px;max-width:none;letter-spacing:0}

/* ── doors to the sessions ── */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(32px,4vw,52px)}
/* language note under the three doors */
.doors + .src{font:15px/1.5 var(--sans);color:var(--muted);margin-top:clamp(20px,2.4vw,28px);text-align:right}
@media (max-width:820px){.doors + .src{text-align:left}}
.door{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:28px 26px 26px;border-radius:28px;
  background:var(--white);text-decoration:none;color:var(--text);border:1px solid var(--mist);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.door:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 18px 40px -18px rgba(23,60,120,.28)}
.door [data-robot]{margin-bottom:10px;transition:transform .45s var(--ease)}
.door:hover [data-robot]{transform:rotate(-4deg) translateY(-2px)}
.door .txt{display:flex;flex-direction:column;gap:4px}
.door strong{font:600 1.35rem/1.15 var(--display);color:var(--ink)}
.door .case{font-style:italic;color:var(--muted)}
/* the card is one big link, so this is not a real button: a soft pill that reads as an
   affordance at rest and fills in when the card is hovered, staying under the hero CTA */
.door .go{margin-top:16px;font:700 15px/1 var(--sans);color:var(--blue-d);display:inline-flex;gap:8px;
  align-items:center;padding:10px 17px;border-radius:999px;background:var(--blue-wash);
  transition:background .25s,color .25s}
.door .go svg{transition:transform .3s var(--ease)}
.door:hover .go{background:var(--blue);color:var(--white)}
.door:hover .go svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.door:hover .go svg{transform:none}}
@media (max-width:820px){.doors{grid-template-columns:1fr}.door{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:18px}
  .door [data-robot]{margin:0}.door .txt{flex:1;min-width:0}
  .door .go{flex-basis:100%;margin-top:8px;margin-left:calc(92px + 18px)}}

/* ── close ── */
.close h2{max-width:18ch}
.acts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(32px,4vw,52px);border-top:1.5px solid var(--ink)}
.act{padding:26px 28px 30px 0;text-decoration:none;color:var(--text);border-bottom:1px solid var(--mist)}
.act+.act{padding-left:28px;border-left:1px solid var(--mist)}
.act strong{display:flex;align-items:center;gap:10px;font:600 1.45rem/1.2 var(--display);color:var(--ink);margin-bottom:8px}
.act:hover strong{color:var(--blue-d)}
.act strong svg{transition:transform .3s var(--ease)}
.act:hover strong svg{transform:translateX(4px)}
@media (max-width:820px){.acts{grid-template-columns:1fr}.act+.act{padding-left:0;border-left:0}}
.backers{display:flex;flex-wrap:wrap;align-items:center;gap:20px 44px;margin-top:clamp(48px,6vw,80px)}
.backers img{height:64px;width:auto}
.backers p{font-size:14.5px;color:var(--muted);max-width:44ch}