.pin{--pin-tracks:minmax(0, 1fr);grid-template-columns:var(--pin-tracks);margin-inline:calc(-1 * var(--shell-inset));border-top:var(--layout-hairline) solid var(--border-subtle);display:grid}.pin-ground{background-image:var(--hatch-07);display:none}.pin-step{padding:var(--space-xl) var(--shell-inset-base) var(--space-lg) var(--shell-inset);flex-direction:column;justify-content:center;display:flex}.pin-step-in{position:relative}.pin-step-in>*{max-width:28rem}.pin-num{font-size:var(--font-size-body-xs);line-height:var(--font-line-height-body-xs);letter-spacing:calc(var(--font-tracking-eyebrow) * 1em);font-variant-numeric:tabular-nums;color:var(--text-tertiary);display:block}.pin-title{margin-top:var(--space-xs);font-size:var(--font-size-h4);line-height:var(--font-line-height-h4);letter-spacing:calc(var(--font-tracking-h4) * 1em)}.pin-body{margin-top:var(--space-xs);color:var(--text-secondary)}.pin-plate{padding:var(--space-lg) var(--shell-inset) var(--space-xl);border-bottom:var(--layout-hairline) solid var(--border-subtle);background-image:var(--hatch-07);grid-template-columns:minmax(0,1fr);place-items:center;margin:0;display:grid;overflow:hidden}[data-tone=dark] .pin-plate,[data-tone=dark] .pin-ground{background-image:var(--hatch-dark-043)}.pin-plate-draw{grid-template-columns:minmax(0,1fr);place-items:center;width:100%;min-width:0;display:grid}@media (min-width:992px){.pin{--pin-tracks:minmax(0, 1fr) minmax(0, 1fr);grid-template-rows:repeat(var(--pin-count), auto)}.pin-step{grid-column:1;grid-row:var(--pin-row);min-height:max(20rem,50svh);padding-block:var(--space-2xl);border-right:var(--layout-hairline) solid var(--border-subtle);border-bottom:var(--layout-hairline) solid var(--border-subtle)}.pin-step:nth-last-child(2){border-bottom:0}.pin-plate{grid-column:2;grid-row:var(--pin-row);padding:var(--space-xl)}.pin[data-live] .pin-ground{grid-area:1/2/-1;display:block}.pin[data-live] .pin-plate{top:calc(var(--layout-nav-height) + var(--space-lg));height:min(40rem, calc(100svh - var(--layout-nav-height) - 2 * var(--space-lg)));opacity:0;contain:layout paint;will-change:opacity, transform;pointer-events:none;background-image:none;border-bottom:0;grid-row:1/-1;align-self:start;position:sticky}.pin[data-live] .pin-plate[data-on]{z-index:1;opacity:1;pointer-events:auto}.pin[data-live] .pin-step :is(.pin-title,.pin-body){color:var(--text-tertiary)}.pin[data-live] .pin-step[data-on] .pin-num,.pin[data-live] .pin-step[data-on] .pin-title{color:var(--text-primary)}.pin[data-live] .pin-step[data-on] .pin-body{color:var(--text-secondary)}.pin-step-in:after{content:"";top:0;bottom:0;right:calc(-1 * (var(--shell-inset-base) + var(--layout-hairline)));width:var(--layout-hairline);background-color:var(--action-primary);position:absolute;transform:scaleY(0)}.pin[data-live] .pin-step[data-on] .pin-step-in:after{transform:none}}@media (min-width:1240px){.pin{--pin-tracks:minmax(0, 1fr) minmax(0, 2fr)}.pin-plate-draw{width:83.3333%;transform:scale(1.2)}}@media (min-width:992px) and (prefers-reduced-motion:no-preference){.pin[data-live] .pin-plate{transform:translateY(var(--space-3xs));transition:opacity 90ms linear,transform 0s linear 90ms}.pin[data-live] .pin-plate[data-on]{transition:opacity var(--motion-push) 70ms, transform var(--motion-push) 70ms;transform:none}.pin[data-live] .pin-step :is(.pin-num,.pin-title,.pin-body){transition:color var(--dur-slow) var(--ease-standard)}.pin-step-in:after{transition:transform var(--dur-slow) var(--ease-emphasized)}}@media (max-width:767px){.pin-step{padding-top:var(--space-lg);padding-bottom:var(--space-md)}}.pin+[data-reveal] .cells-inset{padding-inline-start:var(--shell-inset)}
