/* Flow diagrams: printed-paper nodes and ink edges. Wide layout from 1024px up, narrow vertical layout below. */
.flow-diagram{--fd-ink:#262723;--fd-muted:#515647;--fd-olive:#4b5c06;--fd-paper:#fdfdf8;--fd-under:#dfe6c6;--fd-dots:#617800;--fd-step:.8s;margin:0 auto 40px;max-width:calc(var(--fd-wide-cap,100%) + 48px);padding:24px 24px 16px;background:#f7f9f1;border-radius:14px}
.fd-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 16px;font:500 12px/1.5 Inter;letter-spacing:1px;text-transform:uppercase;color:var(--fd-muted)}
.fd-head .integration-badge{text-transform:none;letter-spacing:0;color:var(--fd-ink);background:#fff}
.fd-svg{display:block;width:100%;height:auto;overflow:visible}
.fd-narrow{display:none}
.fd-paper{fill:var(--fd-paper);stroke:var(--fd-ink);stroke-width:1.2}
.fd-paper-shadow{fill:var(--fd-under)}
.fd-halftone{fill-opacity:.9}
.fd-svg pattern circle{fill:var(--fd-dots)}
.fd-label{fill:var(--fd-ink);font-family:Inter,sans-serif}
/* A Beta node's chip: the page badge's white pill and ink text, drawn inside the node. */
.fd-chip-box{fill:#fff;stroke:#dedfd4;stroke-width:1}
.fd-chip{fill:var(--fd-ink);font-family:Inter,sans-serif}
.fd-line{fill:none;stroke:var(--fd-ink);stroke-width:1.6;stroke-linecap:round}
.fd-svg marker path{fill:none;stroke:var(--fd-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fd-edge-text{font-family:Inter,sans-serif;fill:var(--fd-muted)}
.fd-edge-label{fill:var(--fd-ink)}
.fd-tag{fill:var(--fd-olive);font-family:Georgia,serif;font-style:italic}
.fd-reveal{fill:none;stroke:#fff;stroke-width:18;stroke-dasharray:1 1;stroke-dashoffset:0}
.fd-packet{fill:var(--fd-dots);opacity:0}
.fd-lane-band{fill:#eef1e4}
/* The narrow lane switch: hidden from 1024 up, where both lanes are drawn together. */
.fd-switch{display:none}
.fd-lane-label{fill:var(--fd-muted);font-family:Inter,sans-serif;font-weight:500;letter-spacing:.5px}
.fd-stage{position:relative}
.fd-action{display:flex;justify-content:flex-end;margin-top:8px}
/* The map's Pause sits in the card's bottom-right corner over reserved space, at the same spot in every scenario:
   the panels share one grid cell, so every card is the same size. */
.fm-panels .flow-diagram{position:relative;padding-bottom:76px}
.fm-panels .fd-stage{position:static}
.fm-panels .fd-action{position:absolute;right:24px;bottom:16px;margin:0}
.fd-clock{position:absolute;width:0;height:0;overflow:hidden}
/* Playback: "waiting" and "paused" hold the timeline still; "rest" (and the server render) has no animation at all. */
.flow-diagram:is([data-playback=waiting],[data-playback=playing],[data-playback=paused]) .fd-node{animation:fd-land .45s cubic-bezier(.2,.7,.3,1) var(--fd-at) both}
.flow-diagram:is([data-playback=waiting],[data-playback=playing],[data-playback=paused]) .fd-reveal{animation:fd-draw .6s ease-in-out var(--fd-at) both}
.flow-diagram:is([data-playback=waiting],[data-playback=playing],[data-playback=paused]) .fd-edge-text{animation:fd-fade .4s ease-out calc(var(--fd-at) + .35s) both}
.flow-diagram:is([data-playback=waiting],[data-playback=playing],[data-playback=paused]) .fd-clock{animation:fd-clock linear both}
@supports (offset-path:path("M0 0")){.flow-diagram:is([data-playback=waiting],[data-playback=playing],[data-playback=paused]) .fd-packet{animation:fd-travel .6s ease-in-out var(--fd-at) both}}
.flow-diagram:is([data-playback=waiting],[data-playback=paused]) :is(.fd-node,.fd-reveal,.fd-edge-text,.fd-packet,.fd-clock){animation-play-state:paused}
.fd-node{transform-box:fill-box;transform-origin:center}
@keyframes fd-land{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fd-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fd-fade{from{opacity:0}to{opacity:1}}
@keyframes fd-travel{0%{offset-distance:0%;opacity:0}15%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes fd-clock{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.flow-diagram *{animation:none!important}}
.fd-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:16px;font:14px/1.5 Inter;color:var(--fd-muted)}
.flow-diagram .fd-legend,.flow-diagram .fd-note{font:inherit;color:inherit}
.fd-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.fd-legend span{display:inline-flex;align-items:center;gap:8px}
.fd-legend svg{width:28px;height:6px;flex:none}
.fd-legend line{stroke:var(--fd-ink);stroke-width:1.6}
.fd-note{margin:0;flex:1 1 260px}
/* The summary: the same words as the SVG's description, as readable text; held to 60–75 characters a line. */
.flow-diagram .fd-summary{max-width:34em;margin:16px 0 0;font:16px/1.5 Inter;color:var(--fd-ink)}
/* Replay and the map's Pause are plain text: no fill, border, pill or underline; hover only changes the colour, and
   the padding is invisible hit area. 13px is the site's step below 14px (as .breadcrumb). */
.fd-replay,.fm-pause{font:500 13px/1.2 Inter;color:#596b0a;background:none;border:0;border-radius:2px;padding:6px 4px;cursor:pointer;text-decoration:none}
.fd-replay:hover,.fm-pause:hover{color:var(--fd-ink)}
.fd-replay:focus-visible,.fm-pause:focus-visible{outline:2px solid #617800;outline-offset:3px}
/* The Home map: a pill tab list and Pause above panels stacked in one grid cell, so switching never changes the height. */
.flow-map{position:relative}
.fm-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:0 0 24px}
.fm-controls [role=tablist]{display:flex;flex-wrap:wrap;gap:8px}
.fm-controls button{font:14px/1 Inter;color:var(--fd-ink,#262723);background:#fff;border:1px solid #cfd5bf;border-radius:100px;padding:10px 16px;cursor:pointer}
.fm-controls [role=tab][aria-selected=true]{background:#617800;border-color:#617800;color:#fff}
.fm-controls button:hover{border-color:#617800}
.fm-controls button:focus-visible{outline:2px solid #617800;outline-offset:3px}
.fm-panels{display:grid}
.fm-panels>[role=tabpanel]{grid-area:1/1;display:flex}
.fm-panels>[role=tabpanel][hidden]{display:flex;visibility:hidden}
.fm-panels .flow-diagram{flex:1;display:flex;flex-direction:column;margin:0 auto}
.fm-panels .fd-stage{flex:1;display:flex;flex-direction:column;justify-content:center}
.fm-panels .fd-art{display:flex;flex-direction:column}
.fm-panels .fd-svg{flex:none;margin:0 auto}
.fm-caption{flex:1 1 100%;max-width:34em;margin:0;font:16px/1.5 Inter;color:var(--fd-ink)}
.fm-caption a{text-decoration:underline;white-space:nowrap}
.fm-more{display:inline-block;margin-top:24px}
.fm-hold{position:absolute;width:0;height:0;overflow:hidden}
.flow-map[data-stage=holding] .fm-hold{animation:fd-clock linear both}
.flow-map:is([data-moving=false],[data-held=true]) .fm-hold{animation-play-state:paused}
@media(max-width:1100px){.flow-diagram{padding:24px 24px 16px}}
/* From 1600px, a page diagram becomes a row: the diagram card on one side at its ~14px cap, and a text column
   (header, summary, legend, note) at up to 420px or 36% of the row. The row starts at the section's left edge and
   spare space falls on the right. Legal pages (no .section) stay one column. */
@media(min-width:1600px){
.section .flow-diagram{display:grid;grid-template-columns:minmax(0,calc(var(--fd-wide-cap) + 48px)) min(420px,36%);grid-template-rows:auto auto 1fr;column-gap:40px;justify-content:start;align-items:start;max-width:none;padding:0;background:none;border-radius:0}
.section .flow-diagram>.fd-stage{grid-column:1;grid-row:1/4;padding:24px;background:#f7f9f1;border-radius:14px}
.section .flow-diagram>.fd-head{grid-column:2;grid-row:1;margin:8px 0 0}
.section .flow-diagram>.fd-summary{grid-column:2;grid-row:2;margin:16px 0 0}
.section .flow-diagram>.fd-foot{grid-column:2;grid-row:3;flex-direction:column;align-items:flex-start;gap:16px}
.section .flow-diagram.fd-flip{grid-template-columns:min(420px,36%) minmax(0,calc(var(--fd-wide-cap) + 48px))}
.section .flow-diagram.fd-flip>.fd-stage{grid-column:2}
.section .flow-diagram.fd-flip>:is(.fd-head,.fd-summary,.fd-foot){grid-column:1}
.fm-panels .flow-diagram{display:grid}
.fm-panels .fm-caption{order:-1}
.fm-panels .fd-note{flex:none}
.fm-panels .flow-diagram>.fd-stage{align-self:stretch;position:relative;padding-bottom:84px}
.fm-panels .flow-diagram>.fd-stage>.fd-action{right:24px;bottom:24px}
}
/* Legal-style pages hold text to 760px inside a 930px column; a wide diagram uses the whole column. */
@media(min-width:1024px){.legal-body .flow-diagram{margin-right:-170px}}
@media(max-width:1023px){
.flow-diagram{margin:0 -16px 32px;max-width:none;padding:24px 16px 16px}
/* Touch widths: every control is at least 44px tall with 8px between them; the four tabs sit in a 2×2 grid,
   and a long label wraps inside its tab rather than shrinking. */
.fm-controls button{min-height:44px}
.fd-replay,.fm-pause{min-height:44px;min-width:44px;padding:12px 8px}
.fm-controls [role=tablist]{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.fm-controls [role=tab]{line-height:1.25;padding:8px 12px}
.fd-wide{display:none}
.fd-narrow{display:block;max-width:var(--fd-narrow-cap,360px);margin:0 auto}
.fd-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:var(--fd-narrow-cap,360px);margin:0 auto 16px}
.fd-switch [role=tab]{min-height:44px;padding:8px 12px;font:14px/1.25 Inter;color:var(--fd-ink);background:#fff;border:1px solid #cfd5bf;border-radius:100px;cursor:pointer}
.fd-switch [role=tab][aria-selected=true]{background:#617800;border-color:#617800;color:#fff}
.fd-switch [role=tab]:focus-visible{outline:2px solid #617800;outline-offset:3px}
.fm-panels{margin:0 -16px}
.fm-panels .fd-stage{flex:none}
.fm-panels .fd-action{right:16px}
}
/* Between phone and wide: the narrow card shrinks to its diagram instead of spanning the page. */
@media(min-width:421px) and (max-width:1023px){.flow-diagram{margin:0 auto 32px;max-width:calc(var(--fd-narrow-cap,360px) + 64px)}}