/* Practice areas, "the life of a company" (owner's decision, 2 November 2026).
   Four phases left to right in reading order: the company above the line,
   its investors below it, so "both sides of the table" is something you see.
   Glyphs are drawn in the board's hand. Text stays visible without script;
   practice.js only adds .pr-anim (hide, then draw) and .in (play once). */
.pr{--pr-stroke:#44525E;--pr-blue:var(--sys-ink);margin-top:clamp(28px,4vw,48px)}
.pr svg{display:block;overflow:visible}
.pr .ink{fill:none;stroke:var(--pr-stroke);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pr .ink.blue{stroke:var(--pr-blue)}
.pr h3{font-family:var(--serif);font-weight:500;font-size:1.32rem;line-height:1.15;letter-spacing:-.01em}

.pr-rail{display:grid;grid-template-columns:120px repeat(4,minmax(0,1fr));gap:0 clamp(12px,2vw,28px);align-items:start}
.pr-lab{font:500 .82rem/1.35 var(--sans);color:var(--muted);padding-top:6px}
.pr-lab b{display:block;font-weight:600;font-size:.95rem;color:var(--ink);margin-bottom:2px}
.pr-co,.pr-inv{padding-block:22px}
.pr-phase{display:grid;gap:12px;justify-items:start}
.pr-phase h3{display:flex;align-items:center;gap:10px}
.pr-phase h3 svg{width:40px;height:40px;flex:none}
.pr-line{grid-column:1/-1;height:34px;position:relative}
.pr-line svg{position:absolute;inset:0;width:100%;height:100%}
[dir="rtl"] .pr-line svg{transform:scaleX(-1)}
.pr-cell{position:relative}
.pr-cell::before{content:"";position:absolute;top:-24px;inset-inline-start:0;width:14px;height:14px;border-radius:50%;background:var(--band);border:2px solid var(--pr-blue)}
.pr-who{display:none;font:600 .8rem/1 var(--sans);color:var(--muted);margin-bottom:8px}
.pr-none{font:italic .92rem/1.45 var(--serif);color:var(--muted)}
[dir="rtl"] .pr-none{font-style:normal}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 .8rem/1.25 var(--sans);color:var(--ink-2);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:6px 11px;max-width:100%}
.chip.b{color:var(--pr-blue);border-color:var(--sys-line);background:var(--sys)}

.pr-also{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin-top:clamp(28px,4vw,44px);padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--rule)}
.pr-more{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 16px;align-items:start}
.pr-more svg{width:52px;height:52px;grid-row:span 3}
.pr-one{font-size:.98rem;line-height:1.5;color:var(--ink-2);max-width:34ch}

/* motion: only once script has armed it, and only once per visit */
.pr-anim .draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.pr-anim .pop{opacity:0;transform:translateY(6px);transition:opacity .5s ease var(--d,0s),transform .6s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.pr-anim .pr-cell::before{transform:scale(0);transition:transform .45s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i,0)*.15s)}
.pr-anim.in .draw{stroke-dashoffset:0}
.pr-anim.in .pop{opacity:1;transform:none}
.pr-anim.in .pr-cell::before{transform:none}

/* phone: one vertical rail, each phase followed by its investors */
@media (max-width:860px){
  .pr-rail{grid-template-columns:minmax(0,1fr);gap:0;position:relative;padding-inline-start:30px}
  .pr-rail::before{content:"";position:absolute;inset-block:14px 24px;inset-inline-start:9px;width:2px;background:var(--sys-line)}
  .pr-lab,.pr-line,.pr-empty{display:none}
  .pr-co,.pr-inv{padding-block:0}
  .pr-phase{order:calc(var(--i)*2);position:relative;padding-block:4px 10px}
  .pr-phase::before{content:"";position:absolute;top:13px;inset-inline-start:-26px;width:12px;height:12px;border-radius:50%;background:var(--band);border:2px solid var(--pr-blue)}
  .pr-cell{order:calc(var(--i)*2 + 1);padding-bottom:24px}
  .pr-cell::before{display:none}
  .pr-who{display:block}
  .pr-also{grid-template-columns:minmax(0,1fr)}
  .chip{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .pr-anim .draw{stroke-dashoffset:0;transition:none}
  .pr-anim .pop{opacity:1;transform:none;transition:none}
  .pr-anim .pr-cell::before{transform:none;transition:none}
}