/* Vendor & PO: the pieces this page adds on top of page.css and paper.css, drawn the
   same way as File Manager's so the two case studies read as one set.
   Loaded by this page only; the other case studies don't see it. */

.pg {
  --l1: color-mix(in srgb, var(--pfg) 11%, transparent);
  --l2: color-mix(in srgb, var(--pfg) 22%, transparent);
  --l3: color-mix(in srgb, var(--pfg) 42%, transparent);
  --mute: color-mix(in srgb, var(--pfg) 58%, transparent);
  --body: color-mix(in srgb, var(--pfg) 66%, transparent);
  --red: #ff9b80;
}

/* a block that opens on a rule sits as far below it as the rule sits below the block before */
.sec, .kv.blk { margin-top: 7vh; padding-top: 7vh; }

/* the problem opens straight on its statement */
.ch-n + .say { margin-top: 6vh; }

/* the hero facts sit on no rules of their own: the chapter rule is enough */
.ph-facts { border-top: 0; }
.ph-facts div { padding: 0; border-bottom: 0; }

/* notes beside a rebuilt screen read as a list, not as numbered callouts */
.fig-notes.is-plain li { grid-template-columns: minmax(0, 1fr); }
.fig-notes.is-plain li::before { content: none; }

/* ---------- 02: where the margin goes, as a waterfall ---------- */
/* the first bar is the whole quotation; the margin then opens out to full width, so
   each drift reads as its share of the margin, not a sliver of the total */
.wf { display: grid; align-content: center; gap: 2.2cqw; height: 100%; padding: 6cqw 7cqw; }
.wf-h { margin-bottom: 1.4cqw; font-size: 2.4cqw; color: color-mix(in srgb, var(--pfg) 60%, transparent); }
.wf-r { display: grid; grid-template-columns: 30cqw minmax(0, 1fr); align-items: center; gap: 3cqw; font-size: 2.6cqw; color: color-mix(in srgb, var(--pfg) 74%, transparent); }
.wf-r b { font-weight: 500; color: var(--pfg); }
.wf-r .ico { margin-right: 1.4cqw; font-size: 3.2cqw; color: #ff9b80; vertical-align: -.5cqw; }
.wf-b { position: relative; height: 4.6cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .05); }
.wf-b i { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 1cqw; font-size: 2.2cqw; font-style: normal; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-b .c { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .2); }
.wf-b .m { color: var(--pc); background: var(--acc); }
.wf-b .l { color: #3a1a12; background: #ff9b80; }
.wf-b .g { color: #fff; background: repeating-linear-gradient(135deg, rgba(255, 155, 128, .55) 0 .8cqw, rgba(255, 155, 128, .3) .8cqw 1.6cqw); }
.wf-r.is-leak .wf-b { height: 3.6cqw; }
.wf-r.is-zoom { margin: -1.2cqw 0; }
.wf-z { height: 3.4cqw; background: linear-gradient(rgba(143, 227, 180, .28), rgba(143, 227, 180, .06)); clip-path: polygon(70% 0, 100% 0, 100% 100%, 0 100%); }

/* ---------- 01: one purchase order, annotated ---------- */
/* the sentence and the key on the left, the PO on the right; each word in the key is a
   numbered callout on the card */
.cx { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; margin-top: 6vh; }
.cx-sub { grid-column: 1 / 10; grid-row: 1; margin-top: 0; }
.cx-key { grid-column: 1 / 10; grid-row: 2; align-self: end; margin-top: 4vh; }
.cx-fig { grid-column: 11 / -1; grid-row: 1 / 3; }
.cx-fig, .uf-fig { display: grid; align-items: center; margin: 0; overflow: hidden; container-type: inline-size; border-radius: clamp(14px, 1.8vw, 30px); background: var(--tile-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.cx-k { font-size: 13px; color: var(--mute); }
.cx-key ol { display: grid; gap: 2px; margin-top: 16px; padding: 0; list-style: none; }
.cx-key li { display: grid; grid-template-columns: 34px minmax(0, 1fr); margin-left: -12px; padding: 9px 12px; border-radius: 10px; cursor: default; outline: 0; transition: opacity .25s, background-color .25s; }
.cx-key .cx-m { position: static; grid-row: span 2; margin-top: 1px; }
.cx-key b { font-size: 17px; font-weight: 500; }
.cx-key span { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--body); }

/* the callout: one style on the key and on the card, so the eye can match them */
.cx-m { position: absolute; top: -9px; right: -9px; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1; color: var(--pc); background: var(--acc); font-variant-numeric: tabular-nums; transition: transform .25s; }
.cx-card .cx-m { box-shadow: 0 0 0 2px #fff; }
/* a callout on a small tag sits in a gap of its own, never over the words beside it */
.cx-tag, .cx-bdg { margin-right: 22px; }
.cx-tag .cx-m, .cx-bdg .cx-m { top: 50%; right: -22px; margin-top: -10px; }
.cx-boq { margin-left: 24px; }
.cx-boq .cx-m { top: 50%; right: auto; left: -24px; margin-top: -10px; }

/* the card: drawn like the product, light on the page's green */
.cx-card, .uf-card { width: min(460px, 100% - 40px); margin: clamp(36px, 9cqw, 84px) auto; padding: 18px; border-radius: 16px; font-size: 13px; color: #1b1f29; background: #fff; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7); }
.cx-card [data-k] { position: relative; transition: box-shadow .25s; }
.cx-top { display: flex; align-items: center; gap: 12px; }
.cx-top p { min-width: 0; flex: 1; }
.cx-top b { display: block; font-size: 14.5px; font-weight: 600; }
.cx-top p > span { display: block; margin-top: 2px; font-size: 12px; color: #8a8f9c; }
.cx-id { display: inline-block; padding: 0 2px; border-radius: 4px; }
.cx-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; font-size: 10px; font-style: normal; font-weight: 700; color: #1f6fe5; background: #e8f0fe; }
.cx-st { flex: none; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-style: normal; font-weight: 600; color: #b4581c; background: #fdeee2; }
.cx-st.is-ok { color: #2f7a46; background: #e6f4ea; }
.cx-from { margin-top: 12px; font-size: 12px; color: #8a8f9c; }
.cx-tag { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 6px; font-weight: 600; text-decoration: none; color: #2f68c8; background: #e8f1fd; }
.cx-ln { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f7f8fa; }
.cx-ln b { display: block; font-size: 13px; font-weight: 600; }
.cx-ln p > span { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: #8a8f9c; }
.cx-bdg { padding: 1px 5px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #5b6170; background: #e9ecf1; }
.cx-bdg.is-nt { color: #6b4fcf; background: #efeafd; }
.cx-amt { text-align: right; }
.cx-amt b { font-variant-numeric: tabular-nums; }
.cx-amt span { justify-content: flex-end; }
.cx-boq { display: inline-flex; padding: 0 2px; border-radius: 4px; }
.cx-ch { justify-self: end; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
.cx-ch.is-over { color: #b4581c; background: #fdeee2; }
.cx-ch.is-under { color: #2f7a46; background: #e6f4ea; }
.cx-ch.is-nt { color: #6b4fcf; background: #efeafd; }
.cx-grn { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin-top: 14px; padding: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px #e3e6eb; }
.cx-grn b { display: block; font-size: 13px; font-weight: 600; }
.cx-grn p > span { display: block; font-size: 11.5px; color: #8a8f9c; }
.cx-bar { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: 6px; background: #eceef2; }
.cx-bar i { display: block; width: 65%; height: 100%; border-radius: 6px; background: #e08a2e; }
.cx-got { font-size: 12px; font-weight: 600; color: #b4581c; }

/* point at a word, its part lights up on the card, and the other way round */
#context:has([data-k]:hover, [data-k]:focus-visible) .cx-key ol > * { opacity: .4; }
#context:has([data-k]:hover, [data-k]:focus-visible) .cx-card .cx-m { transform: scale(.8); }
#context:has([data-k="1"]:hover, [data-k="1"]:focus-visible) [data-k="1"],
#context:has([data-k="2"]:hover, [data-k="2"]:focus-visible) [data-k="2"],
#context:has([data-k="3"]:hover, [data-k="3"]:focus-visible) [data-k="3"],
#context:has([data-k="4"]:hover, [data-k="4"]:focus-visible) [data-k="4"],
#context:has([data-k="5"]:hover, [data-k="5"]:focus-visible) [data-k="5"],
#context:has([data-k="6"]:hover, [data-k="6"]:focus-visible) [data-k="6"] { opacity: 1; }
#context:has([data-k="1"]:hover, [data-k="1"]:focus-visible) .cx-key [data-k="1"],
#context:has([data-k="2"]:hover, [data-k="2"]:focus-visible) .cx-key [data-k="2"],
#context:has([data-k="3"]:hover, [data-k="3"]:focus-visible) .cx-key [data-k="3"],
#context:has([data-k="4"]:hover, [data-k="4"]:focus-visible) .cx-key [data-k="4"],
#context:has([data-k="5"]:hover, [data-k="5"]:focus-visible) .cx-key [data-k="5"],
#context:has([data-k="6"]:hover, [data-k="6"]:focus-visible) .cx-key [data-k="6"] { background: color-mix(in srgb, var(--acc) 10%, transparent); }
#context:has([data-k="1"]:hover, [data-k="1"]:focus-visible) .cx-card [data-k="1"],
#context:has([data-k="2"]:hover, [data-k="2"]:focus-visible) .cx-card [data-k="2"],
#context:has([data-k="3"]:hover, [data-k="3"]:focus-visible) .cx-card [data-k="3"],
#context:has([data-k="4"]:hover, [data-k="4"]:focus-visible) .cx-card [data-k="4"],
#context:has([data-k="5"]:hover, [data-k="5"]:focus-visible) .cx-card [data-k="5"],
#context:has([data-k="6"]:hover, [data-k="6"]:focus-visible) .cx-card [data-k="6"] { box-shadow: 0 0 0 3px var(--acc); }
#context:has([data-k="1"]:hover, [data-k="1"]:focus-visible) [data-k="1"] .cx-m,
#context:has([data-k="2"]:hover, [data-k="2"]:focus-visible) [data-k="2"] .cx-m,
#context:has([data-k="3"]:hover, [data-k="3"]:focus-visible) [data-k="3"] .cx-m,
#context:has([data-k="4"]:hover, [data-k="4"]:focus-visible) [data-k="4"] .cx-m,
#context:has([data-k="5"]:hover, [data-k="5"]:focus-visible) [data-k="5"] .cx-m,
#context:has([data-k="6"]:hover, [data-k="6"]:focus-visible) [data-k="6"] .cx-m { transform: scale(1.15); }


/* the number is the same mark on the log and in the list */



/* ---------- 11: the money components, on one PO ---------- */
/* the same build as 01: a key on the left, a product card on the right, each component a
   numbered callout. Then the kit underneath, as one strip each, not a card per token */
.sy { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; margin-top: 6vh; }
.sy-sub { grid-column: 1 / 10; grid-row: 1; margin-top: 0; }
.sy-key { grid-column: 1 / 10; grid-row: 2; align-self: end; margin-top: 4vh; }
.sy-fig { grid-column: 11 / -1; grid-row: 1 / 3; display: grid; align-items: center; margin: 0; overflow: hidden; container-type: inline-size; border-radius: clamp(14px, 1.8vw, 30px); background: var(--tile-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.sy-key ol { display: grid; gap: 2px; margin-top: 16px; padding: 0; list-style: none; }
.sy-key li { display: grid; grid-template-columns: 34px minmax(0, 1fr); margin-left: -12px; padding: 10px 12px; border-radius: 10px; cursor: default; outline: 0; transition: opacity .25s, background-color .25s; }
.sy-key .cx-m { position: static; grid-row: span 3; margin-top: 1px; }
.sy-key b { font-size: 17px; font-weight: 500; }
.sy-key li > span:last-child { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--body); }
.sy-eg { margin-top: 8px; font-family: var(--fh); font-size: clamp(22px, 1.9vw, 30px); font-weight: 300; letter-spacing: -.02em; color: var(--pfg); font-variant-numeric: tabular-nums; }
.sy-eg.is-over { color: var(--red); }
.sy-eg .chip { font-family: var(--f); letter-spacing: 0; }

.sy-card { width: min(500px, 100% - 40px); margin: clamp(36px, 9cqw, 84px) auto; padding: 18px; border-radius: 16px; font-size: 13px; color: #1b1f29; background: #fff; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7); }
.sy-card [data-k] { position: relative; transition: box-shadow .25s; }
.sy-card .cx-m { box-shadow: 0 0 0 2px #fff; }
.sy-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.sy-top p { flex: 1; min-width: 0; }
.sy-top b { display: block; font-size: 15px; font-weight: 600; }
.sy-top span { display: block; margin-top: 2px; font-size: 12px; color: #8a8f9c; }
.sy-st { flex: none; margin-right: 10px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-style: normal; font-weight: 600; color: #a85a00; background: #fff6ea; }
.sy-row { display: grid; grid-template-columns: minmax(0, 1fr) 78px 84px 112px; align-items: center; gap: 12px; padding: 11px 8px; border-top: 1px solid #f0f1f4; }
.sy-row.is-h { padding: 8px; border: 0; border-radius: 7px; font-size: 11px; color: #8a8f9c; background: #f6f7f9; }
.sy-row b { display: block; font-size: 12.5px; font-weight: 600; }
.sy-row small { display: block; margin-top: 2px; font-size: 11px; color: #8a8f9c; font-variant-numeric: tabular-nums; }
.sy-row .r { text-align: right; }
.sy-amt { display: inline-block !important; padding: 0 2px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.sy-var { display: inline-block; padding: 0 2px; border-radius: 4px; font-size: 12px; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.sy-var.is-over { color: #d32f2f; }
.sy-var.is-under { color: #1f8a57; }
.sy-var.is-nt { font-weight: 500; color: #8a8f9c; }
.sy-ls { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
.sy-ls.is-part { color: #a85a00; background: #fff6ea; }
.sy-ls.is-ok { color: #1f8a57; background: #effaf5; }
.sy-ls.is-nt { color: #6a3fd1; background: #f4f0ff; }
.sy-tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding: 14px 8px 2px; border-top: 1px solid #e3e6eb; font-size: 12px; color: #8a8f9c; }
.sy-tot b { font-size: 18px; font-weight: 600; color: #1b1f29; font-variant-numeric: tabular-nums; }
.sy-amt .cx-m, .sy-var .cx-m { top: 50%; right: auto; left: -26px; margin-top: -10px; }
.sy-ls .cx-m { top: -11px; right: -11px; }

#system:has([data-k]:hover, [data-k]:focus-visible) .sy-key ol > * { opacity: .4; }
#system:has([data-k]:hover, [data-k]:focus-visible) .sy-card .cx-m { transform: scale(.8); }
#system:has([data-k="1"]:hover, [data-k="1"]:focus-visible) [data-k="1"],
#system:has([data-k="2"]:hover, [data-k="2"]:focus-visible) [data-k="2"],
#system:has([data-k="3"]:hover, [data-k="3"]:focus-visible) [data-k="3"],
#system:has([data-k="4"]:hover, [data-k="4"]:focus-visible) [data-k="4"] { opacity: 1; }
#system:has([data-k="1"]:hover, [data-k="1"]:focus-visible) .sy-key [data-k="1"],
#system:has([data-k="2"]:hover, [data-k="2"]:focus-visible) .sy-key [data-k="2"],
#system:has([data-k="3"]:hover, [data-k="3"]:focus-visible) .sy-key [data-k="3"],
#system:has([data-k="4"]:hover, [data-k="4"]:focus-visible) .sy-key [data-k="4"] { background: color-mix(in srgb, var(--acc) 10%, transparent); }
#system:has([data-k="1"]:hover, [data-k="1"]:focus-visible) .sy-card [data-k="1"],
#system:has([data-k="2"]:hover, [data-k="2"]:focus-visible) .sy-card [data-k="2"],
#system:has([data-k="3"]:hover, [data-k="3"]:focus-visible) .sy-card [data-k="3"],
#system:has([data-k="4"]:hover, [data-k="4"]:focus-visible) .sy-card [data-k="4"] { box-shadow: 0 0 0 3px var(--acc); }
#system:has([data-k="1"]:hover, [data-k="1"]:focus-visible) [data-k="1"] .cx-m,
#system:has([data-k="2"]:hover, [data-k="2"]:focus-visible) [data-k="2"] .cx-m,
#system:has([data-k="3"]:hover, [data-k="3"]:focus-visible) [data-k="3"] .cx-m,
#system:has([data-k="4"]:hover, [data-k="4"]:focus-visible) [data-k="4"] .cx-m { transform: scale(1.15); }

/* the kit: the palette as one strip, the two status sets as labelled rows, then four facts */
.sy-kit { grid-column: 1 / -1; display: grid; gap: 22px; }
.sy-pal { display: flex; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--l1); }
.sy-pal div { flex: 1; min-width: 0; font-size: 12.5px; color: var(--body); }
.sy-pal i { display: block; height: 64px; background: var(--c); }
.sy-pal b { display: block; padding: 12px 12px 0; font-weight: 500; color: var(--pfg); }
.sy-pal span { display: block; padding: 2px 12px 12px; font-variant-numeric: tabular-nums; }
.sy-chips { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 16px; }
.sy-chips > p { font-size: 13px; color: var(--mute); }
.sy-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gut); margin-top: 18px; }
.sy-facts dt { font-size: 12.5px; color: var(--mute); }
.sy-facts dd { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--body); }

/* ---------- illustrated columns: the FitFare roadmap cards, drawn in this page's green ---------- */
.cols.rm .col { padding-top: 0; border-top: 0; }
.rm-art { margin-bottom: 22px; }
.rm-art .shot-in { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.rm-svg { width: 100%; height: 100%; overflow: visible; font-family: var(--f); }
.rm-svg .tx { fill: rgba(236, 235, 230, .55); }
.rm-svg .tx.is-dim { fill: rgba(236, 235, 230, .25); }
.rm-svg .crd { stroke-width: 1.5; }
.rm-svg .crd.is-front { fill: #18382d; stroke: rgba(143, 227, 180, .5); }
.rm-svg .ln { fill: none; stroke: rgba(236, 235, 230, .6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-svg .ln.is-faint { stroke: rgba(236, 235, 230, .18); stroke-width: 1.5; }
.rm-svg .flow { fill: none; stroke: rgba(143, 227, 180, .55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-svg .flow.is-dash { stroke-dasharray: 5 6; }
.rm-svg .node { fill: rgba(236, 235, 230, .06); stroke: rgba(236, 235, 230, .32); stroke-width: 1.5; }
.rm-svg .node.is-on { fill: rgba(143, 227, 180, .14); stroke: var(--acc); }
.rm-svg .solid { fill: #16332a; }
.rm-svg .pill { fill: rgba(143, 227, 180, .14); stroke: rgba(143, 227, 180, .5); stroke-width: 1.5; }
.rm-svg .pill.is-red { fill: rgba(255, 155, 128, .1); stroke: rgba(255, 155, 128, .55); }
.rm-svg .barf { fill: var(--acc); }
.rm-svg .barp { fill: rgba(143, 227, 180, .45); }
.rm-svg .ic { fill: none; stroke: var(--pfg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rm-svg .ic.is-acc { stroke: var(--acc); stroke-width: 2.5; }
.rm-svg .sm { fill: rgba(236, 235, 230, .62); font-size: 13px; text-anchor: middle; }
.rm-svg .sm.is-left { text-anchor: start; }
.rm-svg .sm.is-end { text-anchor: end; }
.rm-svg .sm.is-xs { font-size: 11px; }
.rm-svg .sm.is-b { font-weight: 600; }
.rm-svg .sm.is-acc { fill: var(--acc); }
.rm-svg .sm.is-red { fill: var(--red); }
.rm-svg .lbl { fill: var(--pfg); font-size: 15px; font-weight: 600; }
.rm-svg .lbl.is-sm { font-size: 13px; }

/* ---------- 08, 09 and 12: where each rebuilt screen sits ---------- */
.gal .win.is-ui .k.is-app { aspect-ratio: 1080 / 700; }

/* ---------- tablet ---------- */
/* research: the pain points alone, with the hand-off where each shows up */
.ledger.is-pain .ledger-h, .ledger.is-pain .ledger-r { grid-template-columns: 56px minmax(0, 1fr) 200px; }
.lg-w { font-size: 13px; color: color-mix(in srgb, var(--pfg) 58%, transparent); }

/* ---------- user flow and IA: swimlanes and a tree ---------- */
.flowc { width: 100%; height: auto; overflow: visible; font-family: var(--f); }
.flow-wrap { display: grid; place-items: center; padding: 3cqw; }
.fl-lanes rect { fill: rgba(255, 255, 255, .025); }
.fl-lanes line { stroke: var(--l1); stroke-width: 1; }
.fl-lanes text { fill: var(--acc); font-size: 14px; font-weight: 500; }
.fl-l path { fill: none; stroke: rgba(236, 235, 230, .6); stroke-width: 1.4; }
.fl-l .is-no { stroke: var(--red); stroke-dasharray: 5 6; }
.fl-l .is-back { stroke: rgba(236, 235, 230, .35); stroke-dasharray: 5 6; }
.fl-n rect { fill: rgba(255, 255, 255, .04); stroke: rgba(236, 235, 230, .32); stroke-width: 1.2; }
.fl-n text { fill: var(--pfg); font-size: 14px; text-anchor: middle; }
.fl-n .is-start rect { fill: color-mix(in srgb, var(--acc) 20%, transparent); stroke: var(--acc); }
.fl-n .is-q rect { fill: none; stroke: var(--acc); stroke-dasharray: 4 4; }
.fl-n .is-q text { fill: var(--acc); }
.fl-n .fl-lf { fill: color-mix(in srgb, var(--pfg) 62%, transparent); font-size: 13px; }
.fl-n .fl-lf.is-note { fill: var(--acc); font-size: 12px; }
.fl-n .fl-lf.is-no { fill: var(--red); font-size: 12.5px; }
.fl-k { fill: rgba(236, 235, 230, .55); font-size: 12.5px; }
.fl-k.is-no { fill: var(--red); }
.fl-k.is-end { text-anchor: end; }
.fl-pt circle { fill: var(--red); }
.fl-pt text { fill: #2a1712; font-size: 10.5px; font-weight: 600; text-anchor: middle; }
.fl-key { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; padding: 0; list-style: none; font-size: 13.5px; color: var(--mute); }
.fl-key li { display: flex; align-items: center; gap: 10px; }
.fl-key i { flex: none; width: 26px; height: 14px; border-radius: 7px; border: 1.2px solid; }
.fl-key .fk-start { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 20%, transparent); }
.fl-key .fk-q { border: 1.2px dashed var(--acc); }
.fl-key .fk-no { border: 1.2px dashed var(--red); }
.fl-key .fk-pt { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; font-size: 10.5px; font-style: normal; font-weight: 600; color: #2a1712; background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .js .flowc .fl-l path { stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 1.4s var(--ease) .9s; }
  .js .is-in .flowc .fl-l path { stroke-dashoffset: 0; }
  .js .is-in .flowc .fl-l .is-no, .js .is-in .flowc .fl-l .is-back { stroke-dasharray: 5 6; }
  .js .flowc .fl-n { opacity: 0; transition: opacity .8s var(--ease) calc(.3s + var(--k, 0) * 120ms); }
  .js .is-in .flowc .fl-n { opacity: 1; }
}

@media (max-width: 1100px) {
  .sy { grid-template-rows: none; }
  .sy-sub, .sy-key, .sy-fig { grid-column: 1 / -1; grid-row: auto; }
  .sy-fig { margin-top: 5vh; }
  .sy-key { order: 3; margin-top: 5vh; }
  .sy-key ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
  .sy-pal { flex-wrap: wrap; }
  .sy-pal div { flex: 1 0 25%; }
  .sy-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gut); }
  .cols.rm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx { grid-template-rows: none; }
  .cx-sub, .cx-key, .cx-fig { grid-column: 1 / -1; grid-row: auto; }
  .cx-fig { margin-top: 5vh; }
  .cx-key { order: 3; margin-top: 5vh; }
  .cx-key ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .flowc { min-width: 900px; }
  .shot-in.flow-wrap { aspect-ratio: auto !important; overflow-x: auto; place-items: start; padding: 24px 20px; }
  .ledger.is-pain .ledger-r { grid-template-columns: 36px minmax(0, 1fr); }
  .lg-w { grid-column: 2; }
  .sy-key ol { grid-template-columns: minmax(0, 1fr); }
  .sy-card { padding: 14px; }
  .sy-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sy-row > :nth-child(3), .sy-row > :nth-child(4) { grid-column: auto; }
  .sy-row.is-h { display: none; }
  .sy-pal i { height: 40px; }
  .sy-pal b { padding: 8px 8px 0; font-size: 11.5px; }
  .sy-pal span { padding: 2px 8px 8px; font-size: 10.5px; }
  .sy-chips { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sy-facts { grid-template-columns: minmax(0, 1fr); }
  .wf-r { grid-template-columns: 40cqw minmax(0, 1fr); font-size: 3.4cqw; }
  .wf-h { font-size: 3.2cqw; }
  .wf-b i { font-size: 2.8cqw; }
  .cols.rm { grid-template-columns: minmax(0, 1fr); }
  .cx-key ol { grid-template-columns: minmax(0, 1fr); }
  .cx-card, .uf-card { padding: 14px; }
  .cx-ln { grid-template-columns: minmax(0, 1fr) auto; }
  .cx-ln .cx-ch { grid-column: 1 / -1; justify-self: start; }
}