/* pf-b - /platform, direction B "the house figure on the dark plate" (2026-10-01).
   The five parts drawn in the language of the site's animated figures (wf, chf, lc):
   deep-navy plate, cream-ink cards, teal for the run of the work, amber for the
   lawyer loop, CSS-only dash flow on a 12 s clock, reduced motion parks it.
   Geometry (card boxes, selection states) is generated by design/B/gen.py between
   the gen markers below; everything else is hand-written. Every rule under .d29. */

/* sticky needs a page wrapper that clips without becoming a scroll container */
.d29.pfb{overflow-x:clip}

/* ---------------------------------------------------------------- the plate */
.d29 .pf-fig{--plate:#0C1A24;--card:#12242F;--cardHi:#173040;--cardEdge:rgba(236,237,234,.16);
  --title:#F2EDE3;--body:#BCC9D2;--q:#8B9BA5;--teal:#17627A;--acc:#8FC1D4;--amb:#F59E0B;--ambHi:#FFC766;
  container:pfplate / inline-size;position:relative;margin:var(--stack-l) 0 0;
  padding:clamp(16px,2.6cqw,40px) clamp(12px,2cqw,28px);border-radius:24px;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(23,98,122,.42),rgba(23,98,122,.10) 45%,transparent 70%),
    radial-gradient(90% 80% at 0% 100%,rgba(245,158,11,.11),rgba(245,158,11,.03) 50%,transparent 72%),
    var(--plate);
  border:1px solid rgba(236,237,234,.10);color:var(--body);
  -webkit-font-smoothing:antialiased}
.d29 .pf-stage{container-type:inline-size;position:relative;max-width:1112px;margin:0 auto}
.d29 .pf-lay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.d29 .pf-lay-m{display:none}
@container pfplate (max-width:879px){
  .d29 .pf-stage{max-width:440px}
  .d29 .pf-lay-d{display:none}
  .d29 .pf-lay-m{display:block}
}
.d29 .pf-lay text{text-rendering:geometricPrecision}

/* seats under the cards */
.d29 .pf-seat{fill:rgba(4,11,16,.38);stroke:rgba(236,237,234,.06);stroke-width:1}

/* connectors: a quiet base line + a travelling dash on one clock */
.d29 .pf-e{transition:opacity .35s var(--ease)}
.d29 .pf-base{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.d29 .pf-base.pf-t{stroke:var(--teal)}
.d29 .pf-base.pf-a{stroke:rgba(245,158,11,.42)}
.d29 .pf-flow{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:9 15;
  animation:pfb-flow 12s linear infinite;opacity:.55}
.d29 .pf-flow.pf-t{stroke:var(--acc)}
.d29 .pf-flow.pf-a{stroke:var(--ambHi)}
@keyframes pfb-flow{to{stroke-dashoffset:-240}}
.d29 .pf-knock{fill:none;stroke:var(--plate);stroke-width:9}
.d29 .pf-head.pf-t{fill:var(--acc)}
.d29 .pf-head.pf-a{fill:var(--amb)}
.d29 .pf-lay-m .pf-base{stroke-width:1.8}
.d29 .pf-lay-m .pf-flow{stroke-width:2.1;stroke-dasharray:8 13;animation-name:pfb-flow-m}
@keyframes pfb-flow-m{to{stroke-dashoffset:-210}}

/* connector labels: pills that sit on the line */
.d29 .pf-pill{transition:opacity .35s var(--ease)}
.d29 .pf-pill rect{fill:#0E1F2A;stroke-width:1}
.d29 .pf-pill.pf-t rect{stroke:rgba(143,193,212,.42)}
.d29 .pf-pill.pf-a rect{stroke:rgba(245,158,11,.55)}
.d29 .pf-pill text{font:500 12px/1 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;letter-spacing:-.01em}
.d29 .pf-lay-m .pf-pill text{font-size:10.5px}
.d29 .pf-pill.pf-t text{fill:var(--acc)}
.d29 .pf-pill.pf-a text{fill:var(--amb)}

/* selection: the chosen part's connectors stay lit, the rest step back */
.d29 .pf-fig[data-on] .pf-e{opacity:.34}
.d29 .pf-fig[data-on] .pf-pill{opacity:.5}
.d29 .pf-fig[data-on] .pf-flow{opacity:0}

/* the cards: HTML buttons, sized in stage units so they scale with the drawing */
.d29 .pf-card{position:absolute;display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:calc(var(--u) * 10);
  text-align:left;padding:calc(var(--u) * 16) calc(var(--u) * 20);margin:0;font:inherit;color:var(--title);cursor:pointer;
  background:var(--card);border:1px solid var(--cardEdge);border-radius:calc(var(--u) * 14);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 6px 18px rgba(0,0,0,.22);
  transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
.d29 .pf-card:hover{border-color:rgba(236,237,234,.34)}
.d29 .pf-card[aria-pressed="true"]{opacity:1;transform:translateY(calc(var(--u) * -5));background:var(--cardHi);
  border-color:rgba(242,237,227,.78);box-shadow:0 0 0 1px rgba(242,237,227,.22),0 18px 40px rgba(0,0,0,.5)}
.d29 .pf-card:focus-visible{outline:2px solid var(--ambHi);outline-offset:3px;border-radius:calc(var(--u) * 14)}
.d29 .pf-ico{grid-row:1;grid-column:1;width:calc(var(--u) * 26);height:calc(var(--u) * 26);align-self:center}
.d29 .pf-ico [fill="#0C1A24"]{fill:#F2EDE3}
.d29 .pf-ico [stroke="#0C1A24"]{stroke:#F2EDE3}
.d29 .pf-k{grid-row:1;grid-column:2;align-self:center;font:600 calc(var(--u) * 11.5)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--q)}
.d29 .pf-name{grid-column:1 / -1;margin-top:calc(var(--u) * 10);font:400 calc(var(--u) * 25)/1.1 var(--serif);letter-spacing:-.005em;color:var(--title)}
.d29 .pf-role{grid-column:1 / -1;margin-top:calc(var(--u) * 5);font:400 calc(var(--u) * 14.5)/1.4 var(--sans);color:var(--body)}
.d29 .pf-conn{display:none}
.d29 .p-counsel .pf-role,.d29 .p-legal-room .pf-role,.d29 .p-fineshield .pf-role{font-size:calc(var(--u) * 14)}
.d29 .p-lm .pf-name,.d29 .p-answerloop .pf-name{margin-top:calc(var(--u) * 16);font-size:calc(var(--u) * 28)}
.d29 .p-lm .pf-role,.d29 .p-answerloop .pf-role{margin-top:calc(var(--u) * 8)}
@container pfplate (max-width:879px){
  .d29 .pf-card{padding:calc(var(--u) * 14) calc(var(--u) * 16);border-radius:calc(var(--u) * 12)}
  .d29 .pf-ico{width:calc(var(--u) * 22);height:calc(var(--u) * 22)}
  .d29 .pf-k{font-size:calc(var(--u) * 10.5)}
  .d29 .pf-name,.d29 .p-lm .pf-name,.d29 .p-answerloop .pf-name{margin-top:calc(var(--u) * 8);font-size:calc(var(--u) * 21)}
  .d29 .pf-role,.d29 .p-counsel .pf-role,.d29 .p-legal-room .pf-role,.d29 .p-fineshield .pf-role,
  .d29 .p-lm .pf-role,.d29 .p-answerloop .pf-role{margin-top:calc(var(--u) * 4);font-size:calc(var(--u) * 13.5);line-height:1.38}
}

@media (prefers-reduced-motion:reduce){
  .d29 .pf-flow{animation:none}
  .d29 .pf-card,.d29 .pf-e,.d29 .pf-pill{transition:none}
}

/* gen:begin - written by gen.py, do not hand-edit */
.d29 .pf-stage{aspect-ratio:1112/640;--u:calc(100cqw / 1112)}
.d29 .pf-card.p-lm{left:2.16%;top:38.75%;width:22.3%;height:30%}
.d29 .pf-card.p-answerloop{left:75.54%;top:38.75%;width:22.3%;height:30%}
.d29 .pf-card.p-counsel{left:36.69%;top:12.81%;width:26.62%;height:21.88%}
.d29 .pf-card.p-legal-room{left:36.69%;top:42.81%;width:26.62%;height:21.88%}
.d29 .pf-card.p-fineshield{left:36.69%;top:72.81%;width:26.62%;height:21.88%}
@container pfplate (max-width:879px){.d29 .pf-stage{aspect-ratio:360/924;--u:calc(100cqw / 360)}.d29 .pf-card.p-lm{left:14.44%;top:2.16%;width:71.11%;height:13.85%}.d29 .pf-card.p-counsel{left:14.44%;top:22.51%;width:71.11%;height:13.85%}.d29 .pf-card.p-legal-room{left:14.44%;top:42.86%;width:71.11%;height:13.85%}.d29 .pf-card.p-fineshield{left:14.44%;top:63.2%;width:71.11%;height:13.85%}.d29 .pf-card.p-answerloop{left:14.44%;top:83.55%;width:71.11%;height:13.85%}}
.d29 .pf-fig[data-on="counsel"] .e-counsel,.d29 .pf-fig[data-on="legal-room"] .e-legal-room,.d29 .pf-fig[data-on="fineshield"] .e-fineshield,.d29 .pf-fig[data-on="answerloop"] .e-answerloop,.d29 .pf-fig[data-on="lm"] .e-lm{opacity:1}
.d29 .pf-fig[data-on="counsel"] .pf-flow.e-counsel,.d29 .pf-fig[data-on="legal-room"] .pf-flow.e-legal-room,.d29 .pf-fig[data-on="fineshield"] .pf-flow.e-fineshield,.d29 .pf-fig[data-on="answerloop"] .pf-flow.e-answerloop,.d29 .pf-fig[data-on="lm"] .pf-flow.e-lm{opacity:1}
.d29 .pf-fig[data-on="counsel"] .pf-card.p-legal-room,.d29 .pf-fig[data-on="counsel"] .pf-card.p-answerloop,.d29 .pf-fig[data-on="counsel"] .pf-card.p-lm,.d29 .pf-fig[data-on="legal-room"] .pf-card.p-counsel,.d29 .pf-fig[data-on="legal-room"] .pf-card.p-fineshield,.d29 .pf-fig[data-on="legal-room"] .pf-card.p-answerloop,.d29 .pf-fig[data-on="fineshield"] .pf-card.p-legal-room,.d29 .pf-fig[data-on="fineshield"] .pf-card.p-answerloop,.d29 .pf-fig[data-on="fineshield"] .pf-card.p-lm,.d29 .pf-fig[data-on="answerloop"] .pf-card.p-counsel,.d29 .pf-fig[data-on="answerloop"] .pf-card.p-legal-room,.d29 .pf-fig[data-on="answerloop"] .pf-card.p-fineshield,.d29 .pf-fig[data-on="answerloop"] .pf-card.p-lm,.d29 .pf-fig[data-on="lm"] .pf-card.p-counsel,.d29 .pf-fig[data-on="lm"] .pf-card.p-fineshield,.d29 .pf-fig[data-on="lm"] .pf-card.p-answerloop{opacity:.8}
.d29 .pf-fig[data-on="counsel"] .pf-card.p-fineshield,.d29 .pf-fig[data-on="legal-room"] .pf-card.p-lm,.d29 .pf-fig[data-on="fineshield"] .pf-card.p-counsel,.d29 .pf-fig[data-on="lm"] .pf-card.p-legal-room{opacity:.5}
/* gen:end */

/* ---------------------------------------------------------------- picker under the plate */
.d29 .pf-pick{margin-top:var(--stack-m)}
.d29 .pf-tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.d29 .pf-tab{display:inline-flex;align-items:center;gap:.5rem;font:600 var(--fs-small)/1 var(--sans);padding:.72rem 1.1rem;border-radius:999px;
  border:1px solid rgba(0,0,0,.12);background:var(--surface);color:var(--ink);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.d29 .pf-tab:hover{border-color:rgba(0,0,0,.3)}
.d29 .pf-tab[aria-selected="true"]{background:#0C1A24;color:#F2EDE3;border-color:#0C1A24}
.d29 .pf-panel{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(1.5rem,1rem + 3vw,4rem);
  margin-top:var(--stack-m);padding-top:var(--stack-m);border-top:1px solid var(--rule)}
.d29 .pf-panel[hidden]{display:none}
.d29 .pf-panel-t{min-width:0}
.d29 .pf-panel .h3{font:400 clamp(1.5rem,1.2rem + 1.1vw,2.125rem)/1.15 var(--serif);letter-spacing:-.012em;margin-bottom:.85rem}
.d29 .pf-panel p{max-width:var(--measure);margin-bottom:1.1rem}
.d29 .pf-conns{margin:0}
.d29 .pf-conns dt{font:600 var(--fs-eyebrow)/1.3 var(--sans);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.d29 .pf-conns dd{margin:0;padding:.7rem 0 .7rem 1rem;border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:1.5;color:var(--text);
  position:relative}
.d29 .pf-conns dd::before{content:"";position:absolute;left:0;top:.95rem;bottom:.95rem;width:2px;border-radius:2px;background:#17627A}
.d29 .pf-conns dd b{display:block;font-weight:600;color:var(--ink)}
/* AnswerLoop's ties are the lawyer loop: amber */
.d29 #pf-panel-answerloop dd:nth-of-type(n+2)::before,.d29 #pf-panel-legal-room dd:nth-of-type(3)::before,
.d29 #pf-panel-lm dd:nth-of-type(3)::before{background:#F59E0B}

/* ---------------------------------------------------------------- benefits */
.d29 .band-tint{background:var(--tint)}

/* ---------------------------------------------------------------- the walk: each part, in a screen */
.d29 .pf-walk{position:relative}
.d29 .pf-part{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--stack-m);padding-block:var(--stack-l);border-top:1px solid var(--rule)}
.d29 .pf-part:first-child{border-top:0;padding-top:0}
.d29 .pf-part .split-text,.d29 .pf-part .split-media,.d29 .pf-chf{grid-column:1 / -1;grid-row:auto;min-width:0}
.d29 .pf-node{display:block;width:44px;height:44px;padding:9px;margin-bottom:1.1rem;border-radius:12px;background:#0C1A24;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 8px 20px -8px rgba(12,26,36,.6)}
.d29 .pf-node [fill="#0C1A24"]{fill:#F2EDE3}
.d29 .pf-node [stroke="#0C1A24"]{stroke:#F2EDE3}
.d29 .pf-part .eyebrow{margin-bottom:.5rem}
.d29 .pf-part .h3{font:400 clamp(1.6rem,1.2rem + 1.3vw,2.375rem)/1.12 var(--serif);letter-spacing:-.014em;margin-bottom:.9rem}
.d29 .pf-part p{margin-bottom:1.1rem;max-width:var(--measure)}
.d29 .pf-part .split-media{min-width:0}
.d29 .pf-part .panel{padding:clamp(.75rem,.4rem + 1.6vw,2rem)}
.d29 .pf-chf{min-width:0}
.d29 .pf-chf .chf-fig{overflow:hidden;background:#0C1A24}

@media (min-width:961px){
  /* the spine: a hairline down the left, each part's icon rides it while its screen scrolls past */
  .d29 .pf-walk::before{content:"";position:absolute;left:21px;top:22px;bottom:0;width:1px;
    background:linear-gradient(#17627A,#17627A 72%,rgba(245,158,11,.75))}
  .d29 .pf-part{grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);column-gap:clamp(2rem,1rem + 3vw,4.5rem);
    align-items:start;padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem);border-top:0}
  .d29 .pf-part .split-text{position:sticky;top:clamp(104px,18vh,180px);padding-left:72px;grid-column:1;grid-row:1}
  .d29 .pf-node{position:absolute;left:0;top:0;margin:0}
  .d29 .pf-part .split-media{grid-column:2;grid-row:1;margin-top:clamp(6rem,20vh,12rem);margin-bottom:clamp(2rem,8vh,5rem)}
  .d29 .pf-chf{grid-column:1 / -1;grid-row:2;margin-top:var(--stack-m)}
}

/* ---------------------------------------------------------------- end to end */
.d29 .pf-flow{counter-reset:pf;margin:var(--stack-l) 0 0;padding:0;list-style:none;display:grid;gap:0}
.d29 .pf-flow li{counter-increment:pf;position:relative;padding:1.15rem 0 1.15rem 3.4rem;border-top:2px solid #17627A;line-height:1.55;color:var(--text)}
.d29 .pf-flow li:nth-child(3),.d29 .pf-flow li:nth-child(5){border-top-color:#F59E0B}
.d29 .pf-flow li::before{content:counter(pf);position:absolute;left:0;top:.95rem;font:400 2rem/1 var(--serif);color:var(--accent)}
.d29 .pf-flow b{font-weight:600;color:var(--ink)}
@media (min-width:961px){
  .d29 .pf-flow{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(1rem,.5rem + 1.2vw,2rem)}
  .d29 .pf-flow li{padding:1.25rem 0 0;font-size:var(--fs-small)}
  .d29 .pf-flow li::before{position:static;display:block;margin-bottom:.9rem;font-size:2.5rem}
}

/* ---------------------------------------------------------------- FAQ + close */
.d29 .pf-faq{max-width:48rem}
.d29 .pf-faq details{border-top:1px solid var(--rule)}
.d29 .pf-faq details:last-child{border-bottom:1px solid var(--rule)}
.d29 .pf-faq summary{cursor:pointer;padding:1.1rem 2.25rem 1.1rem 0;font:400 clamp(1.2rem,1rem + .55vw,1.5rem)/1.3 var(--serif);list-style:none;position:relative}
.d29 .pf-faq summary::-webkit-details-marker{display:none}
.d29 .pf-faq summary::after{content:"+";position:absolute;right:.25rem;top:1.05rem;font:400 1.5rem/1 var(--serif);color:var(--muted)}
.d29 .pf-faq details[open] summary::after{content:"\2013"}
.d29 .pf-faq details p{padding:0 0 1.2rem;max-width:var(--measure);color:var(--text)}
.d29 .pf-parts-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:var(--stack-m);justify-content:center}

@media (max-width:760px){
  .d29 .pf-panel{grid-template-columns:minmax(0,1fr)}
  .d29 .pf-tab{padding:.65rem .9rem}
}
.d29.pf{display:block}