/* Montiso connected practice. Adapted from the user-supplied preview (2).html.
   Plain CSS; no remotely loaded assets. */
/* Host pages load assets/fonts/current/fonts.css once for the shared type system. */

.practice-section{
  --practice-blue:#2849d8;
  --practice-carbon:#111;
  --practice-gallery:#f5f5f5;
  --practice-line:#e5e5e5;
  --practice-white:#fff;
  --practice-shift:cubic-bezier(.25,.8,.25,1);
  --practice-open-duration:560ms;
  --practice-graphic-duration:680ms;
  --practice-graphic-delay:140ms;
  --practice-graphic-ease:cubic-bezier(.4,0,.2,1);
  box-sizing:border-box;
  background:var(--practice-gallery);
  color:var(--practice-carbon);
  font-family:Inter,Arial,sans-serif;
  padding:88px 64px 96px;
}
.practice-section *, .practice-section *::before, .practice-section *::after{box-sizing:border-box}
.practice-shell{max-width:1312px;margin-inline:auto}
.practice-kicker,.practice-signature,.practice-number,.practice-helper{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  line-height:16px;
  font-weight:400;
  letter-spacing:.04em;
}
.practice-kicker{display:flex;gap:24px;align-items:center;text-transform:uppercase;margin:0}
.practice-kicker>span{color:#666}
.practice-intro{display:flex;align-items:end;justify-content:space-between;gap:64px;padding:0 0 56px}
.practice-kicker + .practice-intro{padding-top:48px}
.practice-heading{font-family:Inter,Arial,sans-serif;font-size:clamp(40px,4.45vw,64px);font-weight:700;line-height:1.06;letter-spacing:-.025em;margin:0}
.practice-heading>span{color:var(--practice-blue)}
.practice-aside{max-width:390px;width:35%;min-width:260px}
.practice-aside>p{font-family:'Source Serif 4',Georgia,serif;font-size:30px;line-height:1.2;letter-spacing:-.01em;font-weight:400;margin:0}
.practice-signature{display:flex;align-items:center;gap:12px;margin-top:28px;text-transform:uppercase}
.practice-signature::before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:var(--practice-blue);flex-shrink:0}
.practice-helper{margin:0 0 16px;color:#666;letter-spacing:0}
.practice-cards{display:flex;align-items:stretch;gap:16px}
.practice-card{
  position:relative;
  display:flex;
  flex:1 1 0;
  min-width:0;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  border:1px solid var(--practice-line);
  border-radius:24px;
  background:var(--practice-white);
  color:var(--practice-blue);
  padding:28px;
  text-align:left;
  cursor:pointer;
  font:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:flex-grow var(--practice-open-duration) var(--practice-shift),background 360ms var(--practice-shift),color 120ms cubic-bezier(.2,0,0,1),border-color 120ms cubic-bezier(.2,0,0,1);
}
.practice-card:focus-visible{outline:2px solid var(--practice-blue);outline-offset:4px}
.practice-top{display:flex;justify-content:space-between;align-items:start;gap:16px;position:relative;z-index:2}
.practice-number{font-size:12px}
.practice-arrow{display:block;width:24px;height:24px;flex-shrink:0;transition:transform var(--practice-open-duration) var(--practice-shift)}
.practice-card.is-open .practice-arrow{transform:translate(3px,-3px);filter:brightness(0) invert(1)}
.practice-art{position:relative;display:block;width:128px;margin:24px auto 32px;pointer-events:none}
.practice-art svg{display:block;width:100%;height:auto;overflow:visible}
.practice-orbit{opacity:.2}
.practice-bottom{position:relative;z-index:2;display:flex;flex-direction:column;align-items:start}
.practice-title{display:block;color:var(--practice-carbon);font-size:24px;line-height:30px;letter-spacing:-.01em;font-weight:500;transition:color 120ms cubic-bezier(.2,0,0,1),font-size var(--practice-open-duration) var(--practice-shift)}
.practice-desc{display:block;max-width:480px;margin-top:16px;font-size:16px;line-height:1.65;letter-spacing:0;font-weight:400;color:var(--practice-carbon)}
.practice-section[data-practice-ready] .practice-cards{height:452px}
.practice-section[data-practice-ready] .practice-art{
  position:absolute;width:clamp(130px,14vw,204px);left:50%;top:43%;margin:0;
  transform:translate(-50%,-50%);
  transition:left var(--practice-open-duration) var(--practice-shift),top var(--practice-open-duration) var(--practice-shift),width var(--practice-open-duration) var(--practice-shift);
}
.practice-section[data-practice-ready] .practice-desc{
  max-height:0;margin-top:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:max-height var(--practice-open-duration) var(--practice-shift),opacity 180ms ease,transform var(--practice-open-duration) var(--practice-shift),margin var(--practice-open-duration) var(--practice-shift),visibility 0s linear var(--practice-open-duration);
}
.practice-cards.is-active .practice-card{flex-grow:.8}
.practice-cards.is-active .practice-card.is-open{flex-grow:3.4;background:var(--practice-blue);border-color:var(--practice-blue);color:var(--practice-white)}
.practice-section[data-practice-ready] .practice-card.is-open .practice-art{left:75%;top:32%;width:clamp(176px,18vw,250px)}
.practice-card.is-open .practice-title{font-size:clamp(28px,2.6vw,38px);line-height:1.13;color:var(--practice-white);max-width:95%}
.practice-section[data-practice-ready] .practice-card.is-open .practice-desc{
  max-height:210px;margin-top:16px;opacity:1;visibility:visible;transform:none;color:var(--practice-white);
  transition:max-height var(--practice-open-duration) var(--practice-shift),opacity 240ms ease 160ms,transform var(--practice-open-duration) var(--practice-shift),margin var(--practice-open-duration) var(--practice-shift),visibility 0s;
}

/* Begin drawing shortly after the card starts, while its 560ms shift is still in progress.
   Shared timing variables keep desktop and mobile in sequence without timers. */
.practice-question{stroke-dasharray:1;stroke-dashoffset:0}
.practice-card.is-open .practice-question{animation:practice-draw var(--practice-graphic-duration) var(--practice-graphic-ease) var(--practice-graphic-delay) both}
.practice-card.is-open .practice-question-dot{animation:practice-appear 320ms var(--practice-graphic-ease) calc(var(--practice-graphic-delay) + 360ms) both;transform-origin:center;transform-box:fill-box}
.practice-piece{transform-box:fill-box}
.practice-card.is-open .practice-tl{animation:practice-tl var(--practice-graphic-duration) var(--practice-graphic-ease) var(--practice-graphic-delay) both}
.practice-card.is-open .practice-tr{animation:practice-tr var(--practice-graphic-duration) var(--practice-graphic-ease) var(--practice-graphic-delay) both}
.practice-card.is-open .practice-bl{animation:practice-bl var(--practice-graphic-duration) var(--practice-graphic-ease) var(--practice-graphic-delay) both}
.practice-card.is-open .practice-br{animation:practice-br var(--practice-graphic-duration) var(--practice-graphic-ease) var(--practice-graphic-delay) both}
.practice-connector{stroke-dasharray:1;stroke-dashoffset:1}
.practice-card.is-open .practice-connector{animation:practice-draw var(--practice-graphic-duration) var(--practice-graphic-ease) calc(var(--practice-graphic-delay) + 120ms) both}
.practice-link-stroke{stroke-dasharray:1;stroke-dashoffset:0}
.practice-card.is-open .practice-link-left{animation:practice-link-left var(--practice-graphic-duration) var(--practice-graphic-ease) var(--practice-graphic-delay) both}
.practice-card.is-open .practice-link-right{animation:practice-link-right var(--practice-graphic-duration) var(--practice-graphic-ease) var(--practice-graphic-delay) both}
.practice-card.is-open .practice-link-stroke{animation:practice-draw var(--practice-graphic-duration) var(--practice-graphic-ease) var(--practice-graphic-delay) both}
.practice-card.is-open .practice-link-right .practice-link-stroke{animation-delay:calc(var(--practice-graphic-delay) + 60ms)}
.practice-axis{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
.practice-card.is-open .practice-axis{animation:practice-axis var(--practice-graphic-duration) var(--practice-graphic-ease) calc(var(--practice-graphic-delay) + 60ms) both}
.practice-dot{transition:transform 360ms var(--practice-shift)}
.practice-card.is-open .practice-dot{transform:translateY(var(--practice-dy));animation:practice-align var(--practice-graphic-duration) var(--practice-graphic-ease) var(--practice-graphic-delay) both;transition:none}
@keyframes practice-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes practice-appear{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes practice-tl{from{transform:translate(-20px,-20px)}to{transform:translate(8px,7px)}}
@keyframes practice-tr{from{transform:translate(20px,-20px)}to{transform:translate(-8px,7px)}}
@keyframes practice-bl{from{transform:translate(-20px,20px)}to{transform:translate(8px,-7px)}}
@keyframes practice-br{from{transform:translate(20px,20px)}to{transform:translate(-8px,-7px)}}
@keyframes practice-axis{from{opacity:0;stroke-dashoffset:1}to{opacity:.65;stroke-dashoffset:0}}
@keyframes practice-align{from{transform:translateY(0)}to{transform:translateY(var(--practice-dy))}}
@keyframes practice-link-left{from{transform:translateX(-16px)}to{transform:translateX(0)}}
@keyframes practice-link-right{from{transform:translateX(16px)}to{transform:translateX(0)}}

@media(max-width:1023px){
  .practice-section{padding:64px 32px 72px}
  .practice-intro{gap:40px;padding-block:0 40px}
  .practice-kicker + .practice-intro{padding-top:40px}
  .practice-heading{font-size:clamp(40px,5.3vw,56px)}
  .practice-aside{width:38%;min-width:230px}
  .practice-aside>p{font-size:27px}
  .practice-card{padding:24px}
  .practice-title{font-size:22px;line-height:28px}
  .practice-card.is-open .practice-title{font-size:30px}
  .practice-desc{font-size:15px}
  .practice-cards.is-active .practice-card{flex-grow:.85}
  .practice-cards.is-active .practice-card.is-open{flex-grow:3.2}
}
@media(max-width:740px){
  .practice-section{padding:48px 20px 56px}
  .practice-intro{flex-direction:column;align-items:start;gap:24px;padding:0 0 32px}
  .practice-kicker + .practice-intro{padding-top:32px}
  .practice-heading{font-size:40px;line-height:44px}
  .practice-aside{width:100%;min-width:0;max-width:400px}
  .practice-aside>p{font-size:27px;line-height:1.3}
  .practice-signature{margin-top:20px}
  .practice-cards,.practice-section[data-practice-ready] .practice-cards{flex-direction:column;height:auto;gap:12px}
  .practice-card,.practice-cards.is-active .practice-card{flex:none;width:100%;padding:24px;border-radius:16px}
  .practice-section[data-practice-ready] .practice-card{height:164px;transition:height var(--practice-open-duration) var(--practice-shift),background 360ms var(--practice-shift),color 120ms ease}
  .practice-section[data-practice-ready] .practice-card.is-open{height:350px}
  .practice-title{font-size:22px;line-height:28px}
  .practice-section[data-practice-ready] .practice-title{max-width:65%}
  .practice-card.is-open .practice-title,.practice-section[data-practice-ready] .practice-card.is-open .practice-title{font-size:26px;line-height:30px;max-width:100%}
  .practice-section[data-practice-ready] .practice-art{width:100px;left:82%;top:54%}
  .practice-section[data-practice-ready] .practice-card.is-open .practice-art{width:128px;left:76%;top:27%}
  .practice-desc{font-size:15px;line-height:1.6}
  .practice-section[data-practice-ready] .practice-card.is-open .practice-desc{max-height:160px}
}
@media(prefers-reduced-motion:reduce){
  html:not([data-motion-preview="full"]) .practice-section *,
  html:not([data-motion-preview="full"]) .practice-section *::before,
  html:not([data-motion-preview="full"]) .practice-section *::after{animation:none!important;transition:none!important}
  html:not([data-motion-preview="full"]) .practice-card.is-open .practice-connector{stroke-dashoffset:0}
  html:not([data-motion-preview="full"]) .practice-card.is-open .practice-axis{opacity:.65;stroke-dashoffset:0}
  html:not([data-motion-preview="full"]) .practice-card.is-open .practice-tl{transform:translate(8px,7px)}
  html:not([data-motion-preview="full"]) .practice-card.is-open .practice-tr{transform:translate(-8px,7px)}
  html:not([data-motion-preview="full"]) .practice-card.is-open .practice-bl{transform:translate(8px,-7px)}
  html:not([data-motion-preview="full"]) .practice-card.is-open .practice-br{transform:translate(-8px,-7px)}
  html:not([data-motion-preview="full"]) .practice-card.is-open .practice-link-left,
  html:not([data-motion-preview="full"]) .practice-card.is-open .practice-link-right{transform:none}
  html:not([data-motion-preview="full"]) .practice-card.is-open .practice-link-stroke{stroke-dashoffset:0}
}
@media print{
  .practice-section{padding:24px 0;background:white}
  .practice-cards,.practice-section[data-practice-ready] .practice-cards{display:block;height:auto}
  .practice-section .practice-card,.practice-section[data-practice-ready] .practice-card{height:auto;min-height:0;display:block;margin-bottom:20px;background:white!important;color:black!important;border:1px solid #e5e5e5;break-inside:avoid}
  .practice-art,.practice-arrow,.practice-helper{display:none!important}
  .practice-section[data-practice-ready] .practice-title{max-width:none;color:black!important}
  .practice-section[data-practice-ready] .practice-desc{max-height:none!important;margin-top:16px;opacity:1;visibility:visible;transform:none;color:black!important}
}