/* how-it-works.css - /HowItWorks. Wizard step tabs with inert app replicas (app surface), the TKGM fallback
   flow and the cancel sheet on Pafta, the after-wizard route. Category colours appear only on navy swatches.
   Static rules are the final state; motion lives under prefers-reduced-motion:no-preference. */

/* == 01 wizard: tabs == */
.pfp-how-tabs{display:grid;gap:clamp(1.5rem,1rem + 1.5vw,2.25rem)}
.pfp-how-tabs [hidden]{display:none !important}
.pfp-how-tabs__list{position:relative;display:flex;margin:0}
.pfp-how-tab{margin:0;border:0;background:none;color:var(--pf-pub-ink);font:inherit;text-align:start;-webkit-tap-highlight-color:transparent}
.pfp-how-tab__num{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--mum-color-surface);box-shadow:inset 0 0 0 2px var(--pf-pub-ink);color:var(--pf-pub-ink);font:600 13px/1 var(--pf-font-mono);font-variant-numeric:tabular-nums}
.pfp-how-tab[aria-selected="true"] .pfp-how-tab__num{background:var(--mum-accent);color:var(--mum-on-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--mum-accent) 18%,transparent)}
.pfp-how-tab__text{display:grid;gap:2px;min-width:0}
.pfp-how-tab__label{color:var(--mum-color-text);font-weight:700;line-height:1.3}
.pfp-how-tab__hint{font:500 .75rem/1.35 var(--pf-font-mono);color:var(--mum-color-text-muted)}

/* Below 1024px: numbers-only stepper; the selected step's name sits under the row */
@media (max-width:1023.98px){
.pfp-how-tabs__list{max-width:34rem;justify-content:space-between;padding-bottom:calc(1.3em + 1.35 * .75rem + 18px)}
.pfp-how-tabs__list::before{content:"";position:absolute;inset-inline-start:22px;inset-inline-end:22px;top:21px;border-top:2px dashed var(--pf-pub-ink-soft)}
.pfp-how-tab{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%}
.pfp-how-tab__text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pfp-how-tab[aria-selected="true"] .pfp-how-tab__text{inset-inline-start:0;inset-inline-end:0;bottom:0;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
.pfp-how-tab__label{font-size:1.0625rem}}

/* 1024px and up: vertical sheet-index tabs beside the panel */
@media (min-width:1024px){
.pfp-how-tabs.is-enhanced{grid-template-columns:minmax(14rem,17rem) minmax(0,1fr);gap:2.5rem;align-items:start}
.pfp-how-tabs__list{position:sticky;top:calc(var(--pf-pub-header-h) + 1.5rem);flex-direction:column;gap:6px}
.pfp-how-tabs__list::before{content:"";position:absolute;inset-inline-start:27px;top:32px;bottom:32px;border-inline-start:2px dashed var(--pf-pub-ink-soft)}
.pfp-how-tab{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 12px;border:1px solid transparent;border-radius:var(--mum-radius-md)}
.pfp-how-tab:hover{background:var(--mum-color-surface-2)}
.pfp-how-tab[aria-selected="true"]{background:var(--pf-pub-paper);border-color:var(--pf-pub-sheet-edge);box-shadow:4px 4px 0 -1px var(--pf-pub-paper-2),4px 4px 0 0 var(--pf-pub-sheet-edge)}}

/* == 01 wizard: panels (stacked without JS) == */
.pfp-how-tabs__panels{container-type:inline-size;min-width:0}
.pfp-how-panel{display:grid;gap:1.5rem 2.25rem;align-items:start}
.pfp-how-panel + .pfp-how-panel{margin-top:clamp(2.5rem,2rem + 2vw,3.5rem);padding-top:clamp(2.5rem,2rem + 2vw,3.5rem);border-top:1px solid var(--mum-color-border)}
.pfp-how-tabs.is-enhanced .pfp-how-panel{margin:0;padding:0;border:0}
.pfp-how-panel:focus-visible{outline-offset:8px;border-radius:var(--mum-radius-sm)}
@container (min-width:46rem){.pfp-how-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.pfp-how-panel__text{display:grid;gap:1rem}
.pfp-how-panel__head{display:grid;gap:.4rem}
.pfp-how-panel__kicker{font:500 var(--pf-pub-fs-tag)/1.3 var(--pf-font-mono);letter-spacing:.06em;color:var(--pf-pub-ink)}
.pfp-how-panel__title{font-size:var(--pf-pub-fs-h3);font-weight:700;line-height:1.3}
.pfp-how-tabs.is-enhanced .pfp-how-panel__head{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pfp-how-panel__intro{font-size:1.0625rem;font-weight:600;line-height:1.5}
.pfp-how-panel__list{font-size:.9375rem;color:var(--mum-color-text-muted)}

/* == replica atoms (inert lookalikes on the app surface) == */
.pfp-how-ui{container-type:inline-size;width:100%;max-width:38rem}
.pfp-how-ui .pfp-ui__body{gap:.85rem}
.pfp-how-ui .pfp-ui__body > *{min-width:0}
.pfp-how-ui :where(svg:not(.pfp-how-map)){width:14px;height:14px;flex:none}
.pfp-how-seg{display:inline-flex;justify-self:start;max-width:100%;gap:2px;padding:3px;border:1px solid var(--mum-color-border);border-radius:var(--mum-radius-md);background:var(--mum-color-surface-2)}
.pfp-how-seg__item{padding:.4rem .75rem;border-radius:calc(var(--mum-radius-md) - 3px);color:var(--mum-color-text-muted);font-size:.8125rem;font-weight:600;white-space:nowrap}
.pfp-how-seg__item.is-on{background:var(--mum-color-surface);color:var(--mum-color-text);box-shadow:var(--mum-shadow-sm)}
.pfp-how-seg--sm{padding:2px}
.pfp-how-seg--sm .pfp-how-seg__item{padding:.15rem .45rem;font:600 .6875rem/1.4 var(--pf-font-mono)}
.pfp-how-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .75rem}
.pfp-how-field{display:grid;gap:.25rem;min-width:0}
.pfp-how-field--wide{grid-column:1 / -1}
.pfp-how-field__label{font-size:.75rem;font-weight:600;color:var(--mum-color-text-muted)}
.pfp-how-field__box{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.25rem;padding:.35rem .65rem;border:1px solid var(--mum-color-border-strong);border-radius:var(--mum-radius-sm);background:var(--mum-color-surface);white-space:nowrap;overflow:hidden}
.pfp-how-field__box svg{color:var(--mum-color-text-muted)}
.pfp-how-field__box--num{font-family:var(--pf-font-mono);font-variant-numeric:tabular-nums}
.pfp-how-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.pfp-how-actions--end{justify-content:flex-end}
.pfp-how-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:2.125rem;padding:.35rem .8rem;border:1px solid var(--mum-color-border-strong);border-radius:var(--mum-radius-md);background:var(--mum-color-surface);color:var(--mum-color-text);font-size:.8125rem;font-weight:600;white-space:nowrap}
.pfp-how-btn--sm{min-height:1.875rem;padding:.25rem .6rem;font-size:.75rem}
.pfp-how-btn--primary{background:var(--mum-accent);border-color:var(--mum-accent);color:var(--mum-on-accent)}
.pfp-how-btn--ink{border-color:var(--pf-pub-ink);color:var(--pf-pub-ink)}
.pfp-how-btn--ghost{border-color:transparent;background:none;color:var(--pf-pub-link)}
.pfp-how-ok{display:flex;align-items:flex-start;gap:.45rem;padding:.45rem .65rem;border-radius:var(--mum-radius-sm);background:var(--mum-color-success-tint);font-size:.8125rem;font-weight:600}
.pfp-how-ok svg{margin-top:2px;color:var(--mum-color-success)}
.pfp-how-or{display:flex;align-items:center;gap:.75rem;font:500 .75rem/1.3 var(--pf-font-mono);color:var(--mum-color-text-muted)}
.pfp-how-or::before,.pfp-how-or::after{content:"";flex:1;border-top:1px dashed var(--mum-color-border-strong)}
.pfp-how-draw{display:grid;border:1px solid var(--mum-color-border);border-radius:var(--mum-radius-sm);overflow:hidden}
.pfp-how-map{display:block;width:100%;height:auto}
.pfp-how-map__bg{fill:var(--mum-color-surface-2)}
.pfp-how-map__lot{fill:none;stroke:var(--mum-color-border-strong);stroke-width:1;stroke-dasharray:3 3}
.pfp-how-map__road{fill:none;stroke:var(--mum-color-border-strong);stroke-width:9;stroke-linecap:round}
.pfp-how-map__road--minor{stroke-width:5}
.pfp-how-map__fill{fill:var(--pf-pub-parcel-ink);fill-opacity:.12}
.pfp-how-map__edge{fill:none;stroke:var(--pf-pub-parcel-ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.pfp-how-map__edge--open{stroke-width:2;stroke-dasharray:5 5}
.pfp-how-map__vx circle{fill:var(--mum-color-surface);stroke:var(--pf-pub-parcel-ink);stroke-width:2}
.pfp-how-map__n text{fill:var(--mum-color-text);font:600 11px var(--pf-font-mono)}
.pfp-how-draw__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem .6rem;border-top:1px solid var(--mum-color-border);background:var(--mum-color-surface)}
.pfp-how-draw__count{margin-inline-end:auto;font:600 .75rem/1.3 var(--pf-font-mono);color:var(--mum-color-text-muted)}

/* Step 2: settings in wizard order */
.pfp-how-set{list-style:none;margin:0;padding:0;display:grid}
.pfp-how-set__row{display:grid;grid-template-columns:1.5rem minmax(0,1fr) auto;align-items:center;gap:.3rem .6rem;min-height:2.4rem;padding:.4rem 0;border-top:1px solid var(--mum-color-border)}
.pfp-how-set__row:first-child{border-top:0;padding-top:0}
.pfp-how-set__num{font:500 .6875rem/1 var(--pf-font-mono);color:var(--pf-pub-ink);font-variant-numeric:tabular-nums}
.pfp-how-set__label{font-size:.8125rem;font-weight:600;line-height:1.3}
.pfp-how-set__val{display:flex;justify-content:flex-end;align-items:center;min-width:0;color:var(--mum-color-text-muted);font-size:.8125rem;line-height:1.35;text-align:end}
.pfp-how-set__row--wide .pfp-how-set__val{grid-column:2 / -1;justify-content:flex-start;text-align:start}
.pfp-how-range{display:inline-flex;align-items:center;gap:.6rem}
.pfp-how-range__track{position:relative;width:clamp(2.5rem,18cqi,6.5rem);height:4px;border-radius:2px;background:var(--mum-color-surface-3)}
.pfp-how-range__track::before{content:"";position:absolute;inset-block:0;inset-inline:0 auto;width:22%;border-radius:inherit;background:var(--mum-accent)}
.pfp-how-range__track::after{content:"";position:absolute;inset-inline-start:22%;top:50%;width:12px;height:12px;margin-block:-6px 0;margin-inline:-6px 0;border-radius:50%;background:var(--mum-color-surface);box-shadow:0 0 0 2px var(--mum-accent)}
.pfp-how-range__value,.pfp-how-mono{font:600 .75rem/1 var(--pf-font-mono);color:var(--mum-color-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pfp-how-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.pfp-how-tag{padding:.15rem .5rem;border:1px solid var(--pf-pub-ink-soft);border-radius:999px;color:var(--pf-pub-ink);font-size:.75rem;font-weight:600}
.pfp-how-tag--plain{border-style:dashed;border-color:var(--mum-color-border-strong);color:var(--mum-color-text-muted)}
.pfp-how-inline{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}
.pfp-how-addon{padding:.1rem .45rem;border:1px dashed var(--pf-pub-ink-soft);border-radius:999px;color:var(--pf-pub-ink);font:600 .6875rem/1.3 var(--pf-font-mono)}
.pfp-how-switch{position:relative;flex:none;width:30px;height:18px;border-radius:999px;background:var(--mum-color-surface-3);box-shadow:inset 0 0 0 1px var(--mum-color-border-strong)}
.pfp-how-switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:12px;height:12px;border-radius:50%;background:var(--mum-color-text-muted)}
.pfp-how-switch.is-on{background:var(--mum-accent);box-shadow:none}
.pfp-how-switch.is-on::after{inset-inline-start:15px;background:var(--mum-on-accent)}
.pfp-how-check{position:relative;flex:none;width:16px;height:16px;box-sizing:border-box;border:1.5px solid var(--mum-color-border-strong);border-radius:4px;background:var(--mum-color-surface)}
.pfp-how-check.is-on{border-color:var(--mum-accent);background:var(--mum-accent)}
.pfp-how-check.is-on::after{content:"";position:absolute;inset-inline-start:4px;top:1px;width:4px;height:8px;border:solid var(--mum-on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Step 3: surroundings list */
.pfp-how-near__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.pfp-how-near__count{font-size:.75rem;color:var(--mum-color-text-muted)}
.pfp-how-near__group{display:grid;border:1px solid var(--mum-color-border);border-radius:var(--mum-radius-sm);overflow:hidden}
.pfp-how-near__cat{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;background:var(--mum-color-surface-2);font-size:.8125rem;font-weight:700}
.pfp-how-near__swatch{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:5px;background:var(--pf-video-navy);color:var(--c)}
.pfp-how-near__swatch svg{width:13px;height:13px}
.pfp-how-near__row{display:grid;grid-template-columns:16px minmax(0,1fr) auto 16px;align-items:center;gap:.2rem .6rem;padding:.5rem .6rem;border-top:1px solid var(--mum-color-border)}
.pfp-how-near__row > .pfp-how-check{grid-column:1;grid-row:1 / span 2}
.pfp-how-near__name{grid-column:2;grid-row:1;overflow:hidden;font-size:.8125rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.pfp-how-near__dist{grid-column:3;grid-row:1;font:600 .75rem/1 var(--pf-font-mono);font-variant-numeric:tabular-nums}
.pfp-how-near__time{grid-column:2 / 4;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;font:500 .6875rem/1.3 var(--pf-font-mono);color:var(--mum-color-text-muted)}
.pfp-how-near__time svg{width:12px;height:12px}
.pfp-how-near__time svg:nth-of-type(2){margin-inline-start:.5rem}
.pfp-how-near__map{grid-column:4;grid-row:1 / span 2;display:grid;color:var(--pf-pub-link)}
.pfp-how-near__row.is-off :is(.pfp-how-near__name,.pfp-how-near__dist){color:var(--mum-color-text-muted)}
.pfp-how-near__pending{display:inline-flex;align-items:center;gap:.35rem}
.pfp-how-skel{width:2rem;height:.5rem;border-radius:3px;background:var(--mum-color-surface-3)}

/* Step 4: summary and payment */
.pfp-how-sum{display:grid;border:1px solid var(--mum-color-border);border-radius:var(--mum-radius-sm);background:var(--mum-color-surface-2)}
.pfp-how-sum__row{display:grid;grid-template-columns:minmax(5.5rem,auto) minmax(0,1fr);gap:.75rem;align-items:baseline;padding:.45rem .7rem;border-top:1px solid var(--mum-color-border)}
.pfp-how-sum__row:first-child{border-top:0}
.pfp-how-sum__k{font-size:.75rem;font-weight:600;color:var(--mum-color-text-muted)}
.pfp-how-sum__v{font-size:.8125rem;font-weight:600;text-align:end}
.pfp-how-pay{display:grid;gap:.5rem}
@container (min-width:26rem){.pfp-how-pay{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pfp-how-pay__opt{display:flex;align-items:flex-start;gap:.6rem;padding:.65rem .75rem;border:1px solid var(--mum-color-border-strong);border-radius:var(--mum-radius-md)}
.pfp-how-pay__opt.is-on{border-color:var(--mum-accent);background:var(--mum-accent-tint);box-shadow:inset 0 0 0 1px var(--mum-accent)}
.pfp-how-radio{flex:none;width:16px;height:16px;margin-top:2px;box-sizing:border-box;border:1.5px solid var(--mum-color-border-strong);border-radius:50%;background:var(--mum-color-surface)}
.is-on > .pfp-how-radio{border:5px solid var(--mum-accent)}
.pfp-how-pay__text{display:grid;gap:.1rem}
.pfp-how-pay__name{font-size:.8125rem;font-weight:700}
.pfp-how-pay__sub{font-size:.75rem;color:var(--mum-color-text-muted)}
.pfp-how-checkrow{display:flex;align-items:flex-start;gap:.6rem;font-size:.8125rem;font-weight:600}
.pfp-how-checkrow > .pfp-how-check{margin-top:1px}
.pfp-how-checkrow__note{font-weight:400;color:var(--mum-color-text-muted)}

/* == 02 TKGM fallback flow (vertical; horizontal when the figure is wide) == */
.pfp-how-tkgm .pfp-split{align-items:center}
.pfp-how-tkgm__text .pfp-section-head{margin-bottom:0}
.pfp-how-flow{margin:0;display:grid;gap:.85rem;container-type:inline-size}
.pfp-how-flow__chart{display:flex;flex-direction:column;align-items:center;padding:clamp(1.25rem,.9rem + 1.5vw,1.75rem);border:1px solid var(--pf-pub-sheet-edge);border-radius:var(--mum-radius-sm);background-color:var(--mum-color-surface);background-image:linear-gradient(var(--pf-pub-grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--pf-pub-grid-minor) 1px,transparent 1px);background-size:24px 24px;box-shadow:6px 6px 0 -1px var(--pf-pub-paper-2),6px 6px 0 0 var(--pf-pub-sheet-edge)}
.pfp-how-flow__node{position:relative;z-index:1;display:grid;gap:.15rem;justify-items:center;max-width:100%;padding:.6rem .9rem;border:1.5px solid var(--pf-pub-ink);border-radius:var(--mum-radius-sm);background:var(--mum-color-surface);color:var(--mum-color-text);text-align:center}
.pfp-how-flow__kicker{font:500 .6875rem/1.3 var(--pf-font-mono);letter-spacing:.04em;color:var(--pf-pub-ink)}
.pfp-how-flow__name{font-size:.9375rem;font-weight:700;line-height:1.25}
.pfp-how-flow__node--start{margin-bottom:14px}
.pfp-how-flow__node--end{margin-top:14px;border-color:var(--pf-pub-ink);background:var(--pf-pub-ink);color:var(--pf-pub-paper)}
.pfp-how-flow__node--end .pfp-how-flow__kicker{color:inherit}
.pfp-how-flow__node--start::after,.pfp-how-flow__node--end::before{content:"";position:absolute;inset-inline-start:50%;height:14px;margin-inline-start:-1px;border-inline-start:2px solid var(--pf-pub-ink-soft)}
.pfp-how-flow__node--start::after{top:100%;margin-top:1.5px}
.pfp-how-flow__node--end::before{bottom:100%;margin-bottom:1.5px}
.pfp-how-flow__node--end::after{content:"";position:absolute;inset-inline-start:50%;bottom:100%;margin-block:0 1px;margin-inline:-5px 0;border:5px solid transparent;border-bottom:0;border-top:7px solid var(--pf-pub-ink)}
.pfp-how-flow__lanes{position:relative;align-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pfp-how-flow__lanes::before,.pfp-how-flow__lanes::after{content:"";position:absolute;inset-inline-start:25%;inset-inline-end:25%;border-top:2px solid var(--pf-pub-ink-soft)}
.pfp-how-flow__lanes::before{top:0}
.pfp-how-flow__lanes::after{bottom:0}
.pfp-how-flow__lane{display:flex;flex-direction:column;align-items:center;min-width:0;padding-inline:.35rem}
.pfp-how-flow__line{flex:1 0 18px;width:0;border-inline-start:2px solid var(--pf-pub-ink-soft)}
.pfp-how-flow__lane--alt .pfp-how-flow__line{border-inline-start-style:dashed}
.pfp-how-flow__edge{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;max-width:100%;padding:.2rem .55rem;border:1px solid var(--pf-pub-ink-soft);border-radius:999px;background:var(--pf-pub-paper);color:var(--pf-pub-ink);font:500 .6875rem/1.3 var(--pf-font-mono);text-align:center}
.pfp-how-flow__edge svg{width:12px;height:12px;flex:none}
.pfp-how-flow__cap{font-size:.875rem;color:var(--mum-color-text-muted)}
@container (min-width:37rem){
.pfp-how-flow__chart{flex-direction:row}
.pfp-how-flow__node--start{margin-block:0;margin-inline:0 12px}
.pfp-how-flow__node--end{margin-block:0;margin-inline:12px 0}
.pfp-how-flow__node--start::after,.pfp-how-flow__node--end::before{inset-inline-start:auto;top:50%;bottom:auto;width:12px;height:0;margin:-1px 0 0;border-inline-start:0;border-top:2px solid var(--pf-pub-ink-soft)}
.pfp-how-flow__node--start::after{inset-inline-start:100%;margin-inline-start:1.5px}
.pfp-how-flow__node--end::before{inset-inline-end:100%;margin-inline-end:1.5px}
.pfp-how-flow__node--end::after{inset-inline-start:auto;inset-inline-end:100%;top:50%;bottom:auto;margin-block:-5px 0;margin-inline:0 1px;border:5px solid transparent;border-inline-end:0;border-inline-start:7px solid var(--pf-pub-ink)}
.pfp-how-flow__lanes{flex:1;grid-template-columns:none;grid-template-rows:repeat(2,minmax(0,1fr));min-height:13rem}
.pfp-how-flow__lanes::before,.pfp-how-flow__lanes::after{inset-inline-start:auto;inset-inline-end:auto;top:25%;bottom:25%;border-top:0;border-inline-start:2px solid var(--pf-pub-ink-soft)}
.pfp-how-flow__lanes::before{inset-inline-start:0}
.pfp-how-flow__lanes::after{inset-inline-end:0}
.pfp-how-flow__lane{flex-direction:row;padding:.4rem 0}
.pfp-how-flow__line{flex:1 0 10px;width:auto;height:0;border-inline-start:0;border-top:2px solid var(--pf-pub-ink-soft)}
.pfp-how-flow__lane--alt .pfp-how-flow__line{border-top-style:dashed}
.pfp-how-flow__edge{max-width:8rem}}

/* == 03 after the wizard == */
.pfp-how-after__head{display:grid;gap:1rem;margin-bottom:clamp(1.75rem,1rem + 2vw,2.75rem)}
.pfp-how-after__head .pfp-section-head{margin-bottom:0}
@media (min-width:1024px){.pfp-how-after__head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem}}
.pfp-how-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font:500 .8125rem/1.3 var(--pf-font-mono);color:var(--mum-color-text-muted)}
.pfp-how-legend__item{display:inline-flex;align-items:center;gap:.5rem}
.pfp-how-legend__dot{width:14px;height:14px;border-radius:50%;background:var(--mum-color-surface);box-shadow:inset 0 0 0 2px var(--pf-pub-ink)}
.pfp-how-legend__dot--you{background:var(--mum-accent);box-shadow:none}
.pfp-how-after__route{--gap:1.75rem;gap:1.75rem}
.pfp-how-after__route .pfp-route__body{max-width:40rem}
.pfp-how-after__stop--you .pfp-route__num{box-shadow:0 0 0 4px color-mix(in srgb,var(--mum-accent) 18%,transparent)}
.pfp-route__body .pfp-how-after__meta{font:500 .8125rem/1.4 var(--pf-font-mono);color:var(--pf-pub-ink)}
.pfp-how-after__card{max-width:30rem;margin-top:.75rem}
.pfp-how-after .pfp-note{max-width:44rem}
/* 1024px and up: the approval card hangs in a right-hand column level with stop 07, joined by a leader line */
@media (min-width:1024px){
.pfp-how-after__main{--card:25rem;--card-gap:3.5rem}
.pfp-how-after__route{padding-inline-end:calc(var(--card) + var(--card-gap))}
.pfp-how-after__card{position:absolute;top:-.25rem;inset-inline-start:calc(100% + var(--card-gap));width:var(--card);max-width:none;margin:0}
.pfp-how-after__card::before{content:"";position:absolute;inset-inline-end:calc(100% + .5rem);top:1.35rem;width:calc(var(--card-gap) - 1rem);border-top:2px dashed var(--pf-pub-ink-soft)}
.pfp-how-after .pfp-note{max-width:min(44rem,100% - var(--card) - var(--card-gap))}}

/* == 04 cancel sheet == */
.pfp-how-cancel__list{list-style:none;margin:0;padding:0;display:grid}
.pfp-how-cancel__item{display:grid;gap:.5rem;align-content:start;padding-block:1.25rem;border-top:1px solid var(--pf-pub-sheet-edge)}
.pfp-how-cancel__item:first-child{padding-top:0;border-top:0}
.pfp-how-cancel__mark{display:flex;align-items:center;gap:.6rem;color:var(--pf-pub-ink)}
.pfp-how-cancel__num{display:flex;flex:1;align-items:center;gap:.6rem;font:600 .75rem/1 var(--pf-font-mono);font-variant-numeric:tabular-nums}
.pfp-how-cancel__num::after{content:"";flex:1;border-top:1px dashed var(--pf-pub-ink-soft)}
.pfp-how-cancel__mark svg{width:20px;height:20px;flex:none}
.pfp-how-cancel__title{font-size:1.0625rem;font-weight:700;line-height:1.3}
.pfp-how-cancel__text{font-size:.9375rem;color:var(--mum-color-text-muted)}
.pfp-how-cancel__links{display:flex;flex-wrap:wrap;gap:0 1.75rem;margin-top:1.25rem;padding-top:.5rem;border-top:1px dashed var(--pf-pub-sheet-edge)}
@media (min-width:768px){
.pfp-how-cancel__list{grid-template-columns:repeat(3,minmax(0,1fr))}
.pfp-how-cancel__item{padding:0 1.5rem;border-top:0;border-inline-start:1px solid var(--pf-pub-sheet-edge)}
.pfp-how-cancel__item:first-child{padding-inline-start:0;border-inline-start:0}
.pfp-how-cancel__item:last-child{padding-inline-end:0}}

/* == motion == */
@media (prefers-reduced-motion:no-preference){
.pfp-how-tabs.is-enhanced .pfp-how-panel{animation:pfp-how-in 260ms var(--mum-ease) both}
@keyframes pfp-how-in{from{opacity:0;translate:0 8px}}}