/* cross-functional (2026-10-05): the page is a swimlane diagram.
   Linked only from article-cross-functional.html. Three horizontal lanes run across the
   page, HR on top, the design authority in the middle and Finance below, with the lane
   names on colored header strips at the left. A title block and an overview swimlane come
   first: one decision, handed off or decided together. Then each seam is a sheet of the
   same diagram: its prose sits in the lane of the function it belongs to, and handoff
   lines cross the lane boundaries into the design authority (or past it, in red, when the
   article describes a handoff that goes wrong). Reporting puts the five disputed terms in
   the middle lane; governance ends with one room that spans all three lanes.
   Under 821px the lanes become a vertical sequence with the lane name on every step.
   Motion: a handoff token (a sheet of paper) passes lane to lane in the overview. */

.xf-page{
  --x-ink:#16150f; --x-ink2:#33312a; --x-mut:#6b6660; --x-hair:#d9d3c6;
  --x-paper:#f7f5f0; --x-paper2:#efece4; --x-nv:#16304F; --x-red:#A93A3A; --x-gold:#B8862F;
  --x-goldt:#7a5716;
  --x-hrbg:rgba(22,48,79,.07); --x-dabg:#f7f5f0; --x-fnbg:rgba(184,134,47,.13);
  --x-T:2.05rem;
  background:var(--x-paper);
}
.xf-page ::selection{background:var(--x-nv);color:var(--x-paper);}
.xf-page a:focus-visible,.xf-page button:focus-visible{outline:2px solid var(--x-red);outline-offset:3px;border-radius:1px;}
.xf-page .art-rail{display:none !important;}
.xf section{padding:0;}
.xf p{margin:0;}
.xf .xf-sheet{width:min(1160px,calc(100vw - 32px));margin:0 auto;}

/* the one label style: Inter, sentence case */
.xf .xf-lab{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--x-ink2);}

/* ---------- title block ---------- */
.xf .xf-head{padding:clamp(1.4rem,3vw,2.2rem) 0 0;}
.xf .xf-mast{margin-top:clamp(2.2rem,5vw,3.4rem);}
.xf .xf-title h1{margin:.85rem 0 0;font-family:var(--serif);font-size:clamp(2.55rem,5.6vw,4.7rem);font-weight:500;line-height:1.02;letter-spacing:-.025em;color:var(--x-ink);max-width:13.5ch;}
.xf .xf-title .dek{margin-top:1.4rem;max-width:37rem;font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.34rem);line-height:1.52;color:var(--x-ink2);}
.xf .xf-title .article-meta{display:flex;flex-wrap:wrap;gap:.3rem .7rem;margin-top:1.4rem;font-family:var(--sans);font-size:.85rem;color:var(--x-mut);}
.xf .xf-title .article-meta b{color:var(--x-ink);font-weight:600;}
.xf .xf-index{margin-top:2.4rem;}
.xf .xf-index ol{list-style:none;margin:.7rem 0 0;padding:0;border-top:1px solid var(--x-ink);}
.xf .xf-index li{border-bottom:1px solid var(--x-hair);}
.xf .xf-index a{display:flex;gap:.8rem;align-items:baseline;padding:.6rem 0;font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--x-ink);text-decoration:none;}
.xf .xf-index a span{flex:0 0 1.1rem;font-variant-numeric:tabular-nums;color:var(--x-mut);}
.xf .xf-index a:hover{color:var(--x-red);}
@media (min-width:1000px){
  .xf .xf-mast{display:grid;grid-template-columns:minmax(0,1fr) 19rem;column-gap:clamp(3rem,6vw,5rem);align-items:end;}
  .xf .xf-index{margin-top:0;}
}
.xf .xf-open{margin-top:clamp(2.6rem,5vw,3.6rem);padding-top:1.5rem;border-top:1px solid var(--x-ink);}
.xf .xf-open p{max-width:36rem;font-family:var(--serif);font-size:1.18rem;line-height:1.6;color:var(--x-ink);}
.xf .xf-open .xf-stand{margin-top:1.1rem;font-size:1.3rem;line-height:1.5;color:var(--x-ink2);}
.xf .xf-open .xf-stand b{font-weight:600;color:var(--x-ink);}
@media (min-width:1000px){
  .xf .xf-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(3rem,6vw,5rem);}
  .xf .xf-open .xf-stand{margin-top:0;}
}

/* ---------- overview swimlane ---------- */
.xf .xf-flowsec{padding:clamp(3.6rem,7vw,5.4rem) 0 0;}
.xf .xf-flow-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.7rem;margin-bottom:1.2rem;border-bottom:1px solid var(--x-ink);}
.xf .xf-flow-h h2{margin:0;font-family:var(--serif);font-size:clamp(1.45rem,2.4vw,1.85rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--x-ink);}
.xf .xf-ctl{flex:none;appearance:none;background:none;border:0;padding:.2rem 0;font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--x-nv);text-decoration:underline;text-decoration-color:rgba(22,48,79,.35);text-underline-offset:3px;cursor:pointer;}
.xf .xf-ctl:hover{text-decoration-color:var(--x-red);}
.xf .xf-flow{margin:0;}
.xf .xf-svg{display:block;width:100%;height:auto;overflow:visible;}
.xf .xf-tall{display:none;max-width:430px;margin:0 auto;}
.xf .xf-seq path{display:none;}

.xf .xf-bg-hr{fill:var(--x-hrbg);} .xf .xf-bg-da{fill:var(--x-dabg);} .xf .xf-bg-fn{fill:var(--x-fnbg);}
.xf .xf-st-hr{fill:var(--x-nv);} .xf .xf-st-da{fill:var(--x-ink);} .xf .xf-st-fn{fill:var(--x-gold);}
.xf .xf-stx text{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;fill:var(--x-paper);text-anchor:middle;}
.xf .xf-stx text.dk{fill:var(--x-ink);}
.xf .xf-lsub text{font-family:var(--sans);font-size:13px;fill:var(--x-mut);}
.xf .xf-lb{fill:none;stroke:var(--x-ink);stroke-width:1;}
.xf .xf-ph{fill:none;stroke:#a39d92;stroke-width:1;stroke-dasharray:3 4;}
.xf .xf-phx text{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--x-mut);}
.xf .xf-wall rect{fill:var(--x-red);}
.xf .xf-r{fill:none;stroke-width:2;}
.xf .xf-ra{stroke:var(--x-red);stroke-dasharray:7 5;}
.xf .xf-rb{stroke:var(--x-nv);}
.xf .xf-mp{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:1;stroke-dashoffset:0;}
.xf .xf-hd{fill:none;stroke-width:2;}
.xf .xf-hb{stroke:var(--x-nv);}
.xf .xf-ga{fill:var(--x-red);} .xf .xf-gb{fill:var(--x-nv);}
.xf .xf-g{transform-box:fill-box;transform-origin:center;}
.xf .xf-n rect{fill:#fcfbf8;stroke:var(--x-ink2);stroke-width:1;}
.xf .xf-n .t{font-family:var(--sans);font-size:14px;font-weight:600;fill:var(--x-ink);}
.xf .xf-n .s{font-family:var(--sans);font-size:13px;fill:var(--x-mut);}
.xf .xf-note{font-family:var(--serif);font-style:italic;font-size:15px;}
.xf .xf-note.xa,.xf .xf-note.xa text{fill:var(--x-red);}
.xf .xf-note.xb,.xf .xf-note.xb text{fill:var(--x-nv);}
.xf .xf-end,.xf .xf-endr text{text-anchor:end;}
.xf .xf-hit .t{font-family:var(--sans);font-size:15px;font-weight:600;fill:var(--x-red);}
.xf .xf-hit .s{font-family:var(--sans);font-size:13px;fill:var(--x-mut);}
.xf .xf-mid text,.xf text.xf-mid{text-anchor:middle;}
.xf .xf-sm text,.xf .xf-tall .xf-n .t{font-size:12px;}
.xf .xf-tall .xf-note text{font-size:13px;}
.xf .xf-tall .xf-hit .t{font-size:12.5px;} .xf .xf-tall .xf-hit .s{font-size:12px;}
.xf .xf-tok path{stroke-width:1.5;stroke-linejoin:round;fill:none;}
.xf .xf-tok .in>path:first-child{fill:var(--x-paper);}
.xf .xf-ta path{stroke:var(--x-red);}
.xf .xf-tb path,.xf .xf-tb2 path{stroke:var(--x-paper);}
.xf .xf-tb .in>path:first-child,.xf .xf-tb2 .in>path:first-child{fill:var(--x-nv);stroke:var(--x-nv);}
.xf .xf-tb2{opacity:0;}
.xf .xf-tok .in{transform-box:fill-box;transform-origin:center;}

.xf .xf-cap{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.1rem;font-family:var(--sans);font-size:.85rem;color:var(--x-ink2);}
.xf .xf-key{display:inline-flex;align-items:center;gap:.55rem;}
.xf .xf-key i{display:inline-block;width:1.8rem;height:0;border-top:2px solid var(--x-nv);}
.xf .xf-key i.k-a{border-top:2px dashed var(--x-red);}
.xf .xf-capt{flex:1 1 100%;max-width:40rem;margin-top:.5rem;font-family:var(--serif);font-size:1.08rem;line-height:1.55;color:var(--x-ink2);}

/* ---------- a seam: one sheet of the swimlane ---------- */
.xf .xf-band{padding:clamp(4.4rem,8vw,6.6rem) 0 0;}
.xf .xf-bh{max-width:44rem;margin-bottom:clamp(1.5rem,2.6vw,2rem);}
.xf .xf-bh h2{margin:.55rem 0 0;font-family:var(--serif);font-size:clamp(1.85rem,3.3vw,2.6rem);font-weight:500;line-height:1.1;letter-spacing:-.018em;color:var(--x-ink);}
.xf .xf-lede{margin-top:1rem;max-width:40rem;font-family:var(--serif);font-size:1.2rem;line-height:1.56;color:var(--x-ink2);}

.xf .xf-lanes{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr) 4.5rem minmax(0,1fr);grid-template-rows:repeat(3,minmax(7.6rem,auto));}
.xf .xf-strip{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;grid-column:1;}
.xf .xf-strip b{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--x-paper);white-space:nowrap;}
.xf .xf-strip.hr{background:var(--x-nv);}
.xf .xf-strip.da{background:var(--x-ink);}
.xf .xf-strip.fn{background:var(--x-gold);}
.xf .xf-strip.fn b{color:var(--x-ink);}
.xf .xf-lanebg{grid-column:2 / -1;border-top:1px solid var(--x-ink);}
.xf .xf-lanebg.hr{background:var(--x-hrbg);}
.xf .xf-lanebg.da{background:var(--x-dabg);}
.xf .xf-lanebg.fn{background:var(--x-fnbg);border-bottom:1px solid var(--x-ink);}
.xf .hr{grid-row:1;} .xf .da{grid-row:2;} .xf .fn{grid-row:3;}
.xf .xf-c{position:relative;z-index:1;padding:1.5rem 1.6rem 1.75rem;}
.xf .xf-c.a{grid-column:2;}
.xf .xf-c.b{grid-column:4;}
.xf .xf-c p:not(.xf-lab):not(.xf-tag){max-width:34rem;font-family:var(--serif);font-size:1.08rem;line-height:1.56;color:var(--x-ink);}
.xf .xf-c p+p:not(.xf-lab){margin-top:.75rem;}
.xf .xf-c .xf-lab+p{margin-top:.4rem;}
.xf .xf-c.hr .xf-lab{color:var(--x-nv);}
.xf .xf-c.fn .xf-lab{color:var(--x-goldt);}
.xf .xf-c.da .xf-lab{color:var(--x-ink);}
.xf .xf-c.xf-red .xf-lab{color:var(--x-red);}
.xf .xf-c .xf-who{font-size:1.32rem !important;line-height:1.3 !important;letter-spacing:-.01em;}

/* the lane name rides on every step; on wide screens the strips carry it */
.xf .xf-tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* handoff lines: drawn in the gutter column between a and b */
.xf .xf-k{position:relative;z-index:1;grid-column:3;display:block;color:var(--x-ink2);}
.xf .xf-k.clash,.xf .xf-k.drop{color:var(--x-red);}
.xf .xf-k::before,.xf .xf-k::after{content:"";position:absolute;}
.xf .xf-k s{position:absolute;display:block;text-decoration:none;}
.xf .xf-k s.tk{left:calc(50% - 11px);top:-2px;width:22px;height:4px;background:currentColor;}
.xf .xf-k s.ah{right:-1px;top:calc(var(--x-T) - 5px);width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;}
/* join: HR and Finance both hand into the design authority's cell */
.xf .xf-k.join.hr::after,.xf .xf-k.join.fn::after{left:0;width:calc(50% + .75px);top:var(--x-T);border-top:1.5px solid currentColor;}
.xf .xf-k.join.hr::before{left:50%;top:var(--x-T);bottom:0;border-left:1.5px solid currentColor;}
.xf .xf-k.join.fn::before{left:50%;top:0;height:var(--x-T);border-left:1.5px solid currentColor;}
.xf .xf-k.join.da::before{left:50%;top:0;bottom:0;border-left:1.5px solid currentColor;}
.xf .xf-k.join.da::after{left:50%;right:0;top:var(--x-T);border-top:1.5px solid currentColor;}
/* drop: a call made in HR lands on Finance, skipping the middle lane */
.xf .xf-k.drop.hr::after{left:0;width:calc(50% + .75px);top:var(--x-T);border-top:1.5px dashed currentColor;}
.xf .xf-k.drop.hr::before{left:50%;top:var(--x-T);bottom:0;border-left:1.5px dashed currentColor;}
.xf .xf-k.drop.da::before{left:50%;top:0;bottom:0;border-left:1.5px dashed currentColor;}
.xf .xf-k.drop.fn::before{left:50%;top:0;height:var(--x-T);border-left:1.5px dashed currentColor;}
.xf .xf-k.drop.fn::after{left:50%;right:0;top:var(--x-T);border-top:1.5px dashed currentColor;}

/* reporting: the five terms sit in the middle lane, each meaning in its own lane */
.xf .xf-five{grid-template-columns:2.6rem repeat(5,minmax(0,1fr));grid-template-rows:auto auto auto;}
.xf .xf-term{display:contents;}
.xf .xf-term>p{position:relative;z-index:1;grid-column:var(--col);padding:1.25rem 1.1rem 1.4rem;font-family:var(--serif);font-size:1.02rem;line-height:1.48;color:var(--x-ink);}
.xf .xf-term .xf-hm{grid-row:1;}
.xf .xf-term .xf-tw{grid-row:2;padding-top:1.5rem;padding-bottom:1.6rem;font-size:1.55rem;font-weight:500;letter-spacing:-.015em;line-height:1.15;}
.xf .xf-term .xf-fm{grid-row:3;}
.xf .xf-term+.xf-term .xf-hm,.xf .xf-term+.xf-term .xf-tw,.xf .xf-term+.xf-term .xf-fm{box-shadow:inset 1px 0 0 rgba(22,21,15,.14);}
.xf .xf-solo{grid-template-columns:2.6rem minmax(0,1fr);grid-template-rows:minmax(7.6rem,auto);margin-top:-1px;}
.xf .xf-solo .xf-strip.da,.xf .xf-solo .xf-lanebg.da,.xf .xf-solo .xf-c{grid-row:1;}
.xf .xf-solo .xf-lanebg.da{border-bottom:1px solid var(--x-ink);}
.xf .xf-solo .xf-c.w{grid-column:2;}
.xf .xf-solo .xf-c p:not(.xf-lab):not(.xf-tag){max-width:44rem;}

/* governance: the room in the middle spans every lane */
.xf .xf-three{grid-template-columns:2.6rem repeat(3,minmax(0,1fr));grid-template-rows:minmax(5.2rem,auto) minmax(7.6rem,auto) minmax(5.2rem,auto);}
.xf .xf-gov .g1{grid-column:2;grid-row:2;}
.xf .xf-gov .g3{grid-column:4;grid-row:2;}
.xf .xf-gov .xf-room{grid-column:3;grid-row:1;align-self:stretch;display:flex;flex-direction:column;padding:1.5rem 1.6rem 1.75rem;background:none;border-left:1px solid rgba(22,21,15,.18);border-right:1px solid rgba(22,21,15,.18);}
/* QA: governance is one design-authority lane; the empty HR and Finance bands are gone */
.xf .xf-gov .xf-three{grid-template-rows:minmax(7.6rem,auto);}
.xf .xf-gov .xf-strip.hr,.xf .xf-gov .xf-strip.fn,.xf .xf-gov .xf-lanebg.hr,.xf .xf-gov .xf-lanebg.fn{display:none;}
.xf .xf-gov .xf-strip.da,.xf .xf-gov .xf-lanebg.da,.xf .xf-gov .xf-c.g1,.xf .xf-gov .xf-c.g3{grid-row:1;}
.xf .xf-gov .xf-lanebg.da{border-bottom:1px solid var(--x-ink);}
.xf .xf-gov .xf-room .xf-tag{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-bottom:.7rem;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--x-ink2);}
.xf .xf-gov .xf-gn{font-family:var(--serif) !important;font-size:1.36rem !important;font-weight:500;line-height:1.22 !important;letter-spacing:-.01em;color:var(--x-ink);}
.xf .xf-gov .xf-room .xf-gn{font-size:1.55rem !important;}
.xf .xf-close{margin-top:clamp(2.8rem,5vw,3.8rem);max-width:38rem;font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.65rem);line-height:1.42;letter-spacing:-.01em;color:var(--x-ink);}

.xf .xf-cta{padding:clamp(4rem,7vw,5.4rem) 0 3rem;}
.xf .xf-cta .wrap{width:min(1160px,calc(100vw - 32px));padding:0;}

/* ---------- mid widths: the five terms wrap to a taller sheet ---------- */
@media (max-width:1100px) and (min-width:821px){
  .xf .xf-term>p{padding-left:.85rem;padding-right:.85rem;font-size:.98rem;}
  .xf .xf-term .xf-tw{font-size:1.3rem;}
}

/* ---------- phones: lanes become a vertical sequence ---------- */
@media (max-width:820px){
  .xf .xf-wide{display:none;}
  .xf .xf-tall{display:block;}
  .xf .xf-flow-h{flex-wrap:wrap;}
  .xf .xf-lanes,.xf .xf-five,.xf .xf-three,.xf .xf-solo{display:block;}
  .xf .xf-strip,.xf .xf-lanebg,.xf .xf-k{display:none;}
  .xf .xf-tag{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:flex;align-items:center;gap:.55rem;margin:0 0 .55rem;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.01em;line-height:1.3;}
  .xf .xf-tag::before{content:"";flex:none;width:1.3rem;height:3px;background:currentColor;}
  .xf .xf-c,.xf .xf-term>p{position:relative;padding:1.05rem 1.1rem 1.25rem;}
  .xf .xf-c.hr,.xf .xf-term .xf-hm{background:var(--x-hrbg);}
  .xf .xf-c.da,.xf .xf-term .xf-tw{background:#ebe7dd;}
  .xf .xf-c.fn,.xf .xf-term .xf-fm{background:var(--x-fnbg);}
  .xf .xf-c.hr .xf-tag,.xf .xf-term .xf-hm .xf-tag{color:var(--x-nv);}
  .xf .xf-c.da .xf-tag,.xf .xf-room .xf-tag{color:var(--x-ink);}
  .xf .xf-c.fn .xf-tag,.xf .xf-term .xf-fm .xf-tag{color:var(--x-goldt);}
  /* a handoff line between steps */
  .xf .xf-lanes>.xf-c+.xf-c,.xf .xf-term>p+p{margin-top:1.9rem;}
  .xf .xf-lanes>.xf-c+.xf-c::before,.xf .xf-term>p+p::before{content:"";position:absolute;left:1.75rem;top:-1.9rem;height:1.9rem;border-left:1.5px solid var(--x-ink2);}
  .xf .xf-lanes>.xf-c.xf-dropin::before{border-left:1.5px dashed var(--x-red);}
  .xf .xf-lanes>.xf-c.xf-red.xf-in::before{border-left-color:var(--x-red);}
  .xf .xf-term{display:block;}
  .xf .xf-term+.xf-term{margin-top:2.4rem;}
  .xf .xf-term>p{box-shadow:none !important;}
  .xf .xf-term .xf-tw{order:-1;padding-top:.9rem;padding-bottom:1rem;font-size:1.45rem;}
  .xf .xf-term .xf-tw::before,.xf .xf-term .xf-tw::after{display:none;}
  .xf .xf-term{display:flex;flex-direction:column;}
  .xf .xf-term .xf-tw+p{margin-top:1.9rem;}
  .xf .xf-term .xf-hm::before{content:"";position:absolute;left:1.75rem;top:-1.9rem;height:1.9rem;border-left:1.5px solid var(--x-ink2);}
  .xf .xf-solo{margin-top:2.4rem;}
  .xf .xf-gov .xf-room{margin:1.9rem 0 0;padding:1.3rem 1.1rem 1.4rem;border:0;border-top:2px solid var(--x-ink);border-bottom:2px solid var(--x-ink);background:var(--x-paper);}
  .xf .xf-gov .xf-c.g3{margin-top:1.9rem;}
  .xf .xf-gov .xf-c.g3::before{display:none;}
  .xf .xf-gov .xf-c+.xf-c::before{display:none;}
  .xf .xf-gov .xf-gn{font-size:1.28rem !important;margin-bottom:.4rem;}
  .xf .xf-gov .xf-room .xf-gn{font-size:1.4rem !important;}
  .xf .xf-lede{font-size:1.12rem;}
  .xf .xf-c p:not(.xf-lab):not(.xf-tag){font-size:1.06rem;}
}

/* ---------- motion (scoped to classes the script adds) ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  .xf .xf-flow.armed{transition:opacity .3s ease;}
  .xf .xf-flow.ghost{opacity:.2;}
  .xf .xf-flow.run .xf-mp{stroke-dashoffset:1;}
  .xf .xf-flow.armed [data-t],.xf .xf-flow.armed .xf-tok{transition:opacity .25s ease;}
  .xf .xf-flow.run [data-t]:not(.on),.xf .xf-flow.run .xf-tok:not(.on){opacity:0;}
  .xf .xf-flow.run .xf-tb2.on{opacity:1;}
  .xf .xf-flow.armed .xf-g{transition:opacity .2s ease,transform .45s cubic-bezier(.3,1.6,.5,1);}
  .xf .xf-flow.run .xf-g:not(.on){opacity:0;transform:scale(0,1);}
  .xf .xf-flow.run .xf-tok.pass .in{animation:xfPass .5s ease-out;}
  .xf .xf-flow.run .xf-tok.jolt .in{animation:xfJolt .5s ease-out;}
  .xf .xf-flow.run .xf-tok.pop .in{animation:xfPop .45s ease-out;}
  .xf .xf-flow.nt,.xf .xf-flow.nt *{transition:none !important;}
  @keyframes xfPass{0%{transform:none;}45%{transform:rotate(-16deg) scale(1.18);}100%{transform:none;}}
  @keyframes xfJolt{0%,100%{transform:none;}20%{transform:translate(-5px,0) rotate(-6deg);}45%{transform:translate(4px,0) rotate(4deg);}70%{transform:translate(-2px,0);}}
  @keyframes xfPop{0%{transform:none;}50%{transform:scale(1.35);}100%{transform:none;}}
}

@media print{
  .xf-page .reveal{opacity:1 !important;transform:none !important;}
  .xf .xf-ctl{display:none !important;}
  .xf .xf-flow{opacity:1 !important;}
  .xf .xf-mp{stroke-dashoffset:0 !important;}
  .xf .xf-flow [data-t],.xf .xf-g{opacity:1 !important;transform:none;}
  .xf .xf-ta,.xf .xf-tb{opacity:1 !important;}
  .xf .xf-lanes,.xf .xf-flow,.xf .xf-close{break-inside:avoid-page;}
  .xf .xf-strip,.xf .xf-lanebg,.xf .xf-c,.xf .xf-term>p,.xf .xf-room{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ---------- Color 2026-10-09: red leads, navy and gold carry the lanes, green marks a settled move ---------- */
.xf-page{--x-hrbg:#ececfb; --x-rd:#e5322d; --x-rdt:#FDF3F3; --x-gr:#2E7D5B; --x-grd:#1F5E42; --x-grt:#F1F8F4;}
/* hero: a red wash with the lane rules of the diagram running through it */
.xf .xf-head{background:
  repeating-linear-gradient(180deg,transparent 0 47px,rgba(169,58,58,.06) 47px 48px),
  linear-gradient(180deg,var(--x-rdt) 0%,var(--x-rdt) 55%,var(--x-paper) 100%);
  padding-bottom:clamp(2.4rem,4vw,3.2rem);}
.xf .xf-head .xf-open{border-top-color:var(--x-ink);}
.xf .xf-index ol{border-top:3px solid var(--x-rd);}
.xf .xf-index a span{color:var(--x-red);font-weight:700;}
.xf .xf-index li:last-child a span{color:var(--x-ink2);}
.xf .xf-flowsec{padding-top:clamp(3rem,6vw,4.4rem);}

/* overview: phases as a colored strip, testing as a red zone, the settled route in green */
.xf .xf-phb rect{fill-opacity:1;}
.xf .xf-phb .p1{fill:var(--x-gr);} .xf .xf-phb .p2{fill:var(--x-gold);} .xf .xf-phb .p3{fill:var(--x-rd);}
.xf .xf-phx text:nth-child(1){fill:var(--x-grd);} .xf .xf-phx text:nth-child(2){fill:#8A6413;} .xf .xf-phx text:nth-child(3){fill:var(--x-red);}
.xf .xf-tz{fill:var(--x-rd);fill-opacity:.06;}
.xf .xf-rb,.xf .xf-hb{stroke:var(--x-gr);}
.xf .xf-gb{fill:var(--x-gr);}
.xf .xf-note.xb,.xf .xf-note.xb text{fill:var(--x-grd);}
.xf .xf-tb .in>path:first-child,.xf .xf-tb2 .in>path:first-child{fill:var(--x-gr);stroke:var(--x-gr);}
.xf .xf-key i{border-top-color:var(--x-gr);}

/* cost and move: tinted panels with a colored header bar, sitting in their lane */
.xf .xf-c.xf-red,.xf .xf-c.xf-mv{margin:.7rem .7rem .7rem 0;border-top:4px solid var(--x-rd);background:var(--x-rdt);-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.xf .xf-c.xf-mv{border-top-color:var(--x-gr);background:var(--x-grt);}
.xf .xf-c.xf-mv .xf-lab{color:var(--x-grd);}
.xf .xf-c.b.xf-red,.xf .xf-c.b.xf-mv{margin-left:0;}
.xf .xf-solo .xf-c.xf-mv{margin-left:.7rem;}
/* the one figure the article puts on a seam */
.xf .xf-fig{display:flex;align-items:baseline;gap:.6rem;margin:.35rem 0 .2rem;font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--x-red);}
.xf .xf-fig span{font-family:var(--serif);font-size:clamp(3.4rem,5vw,4.4rem);font-weight:500;line-height:.95;letter-spacing:-.03em;color:var(--x-rd);font-variant-numeric:lining-nums tabular-nums;}

/* reporting: a full-bleed ruled sheet behind the five terms */
.xf .xf-terms{margin-top:clamp(4.4rem,8vw,6.6rem);padding:clamp(3.4rem,6vw,4.6rem) 0 clamp(3.4rem,6vw,4.6rem);
  background-color:var(--x-paper2);
  background-image:linear-gradient(rgba(22,48,79,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(22,48,79,.06) 1px,transparent 1px);
  background-size:24px 24px;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.xf .xf-terms .xf-lanebg.da{background:var(--x-paper);}
.xf .xf-term .xf-tw{color:var(--x-red);}
.xf .xf-terms .xf-lab{color:var(--x-red);}
.xf .xf-gov .xf-bh .xf-lab{color:var(--x-red);}
.xf .xf-close{padding-top:1.2rem;border-top:3px solid var(--x-rd);}

@media (max-width:820px){
  .xf .xf-c.xf-red,.xf .xf-c.xf-mv,.xf .xf-solo .xf-c.xf-mv{margin:0;}
  .xf .xf-lanes>.xf-c.xf-mv+.xf-c,.xf .xf-lanes>.xf-c+.xf-c.xf-mv,.xf .xf-lanes>.xf-c+.xf-c.xf-red{margin-top:1.9rem;}
  .xf .xf-c.xf-red .xf-tag{color:var(--x-red);}
  .xf .xf-c.xf-mv .xf-tag{color:var(--x-grd);}
  .xf .xf-solo .xf-c.xf-mv{margin-top:0;}
  .xf .xf-head{background:
    repeating-linear-gradient(180deg,transparent 0 39px,rgba(169,58,58,.05) 39px 40px),
    linear-gradient(180deg,var(--x-rdt) 0%,var(--x-rdt) 60%,var(--x-paper) 100%);}
}
@media print{
  .xf .xf-head,.xf .xf-index ol,.xf .xf-fig{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ---------- QA 2026-10-10 ---------- */
/* HR lane tint: a navy-derived blue gray instead of the lavender #ececfb, so the testing zone over it no longer turns mauve */
.xf-page{--x-hrbg:#e8edf3;}
.xf .xf-tz{fill-opacity:.05;}
/* hero: the red wash stays; the repeating rules ran through the dek and opening text and doubled the meta hairlines */
.xf .xf-head{background:linear-gradient(180deg,var(--x-rdt) 0%,var(--x-rdt) 55%,var(--x-paper) 100%);}
/* seam 5: the design authority row is tall enough for its vertical strip label */
.xf .xf-five{grid-template-rows:auto minmax(9rem,auto) auto;}
/* seam 5: the Finance row is translucent gold; put it on paper so the grid pattern stops showing through the text */
.xf .xf-terms .xf-lanebg.fn{background:linear-gradient(var(--x-fnbg),var(--x-fnbg)),var(--x-paper);}
@media (max-width:820px){
  .xf .xf-head{background:linear-gradient(180deg,var(--x-rdt) 0%,var(--x-rdt) 60%,var(--x-paper) 100%);}
  .xf .xf-terms .xf-term .xf-fm{background:linear-gradient(var(--x-fnbg),var(--x-fnbg)),var(--x-paper);}
}
@media (min-width:821px){
  .xf .xf-term .xf-tw{align-self:stretch;display:flex;align-items:center;padding-top:1rem;padding-bottom:1rem;}
}