/* FComply HyperFrames pilot layer (W5, 27 Sep 2026; research-out/animation-pilot-2026-09-27/PILOT-PLAN.md).
   Loaded on /resources/24-hour-rule-missing-foster-children/ only (functions.php, fcomply_hf_pilot_assets); every rule
   starts with body.fc-hf, so no other page changes. One section per piece of the pilot. */

/* ---- Loops (PILOT-PLAN 6): video.fc-hf-loop (build_pages.py hf_loop_media, js/fc-hf.js) ---------------------------
   The frame-0 poster holds the panel's shape before anything loads; the page color sits behind it. */
body.fc-hf .fc-loop video.fc-hf-loop{display:block;width:100%;height:auto;aspect-ratio:976/650;object-fit:cover;background:#F7F8FA;border-radius:14px}
body.fc-hf .fc-loop .fc-hf-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* reduced motion: the poster, never the flat gray box style.css draws for the old loops (the script never loads the file) */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-loop:has(> video.fc-hf-loop){background:none;min-height:0}
  body.fc-hf .fc-loop video.fc-hf-loop{display:block}
}
/* While a film plays in its panel, the loop steps aside so the film plays where the square is (Gavin, 29 Sep: "the video
   pushes down when it plays instead of playing where the square is"). style.css hides .fc-loop.is-film .fc-loop-v, but the
   display:block above outranks it on this page; this rule outranks both, with or without reduced motion. */
body.fc-hf .fc-loop.is-film video.fc-hf-loop{display:none}

/* ---- Legs one and two: the Line as a clock (PILOT-PLAN 7.3; inventory fc-flow-wrap:1 and :2) -------------------------
   components.py "clock": true puts both legs in one .fc-flow-clock inside one .fc-flow-wrap.fc-hf-clock-col; js/fc-hf.js
   draws one SVG rail layer over it: an Hour 0 tick, two rails (law enforcement above, NCMEC below) and an Hour 24 tick.
   Desk (1000 px and up): the rails run between the two rows and meet at both ticks. Below 1000 px the cards stack and
   each leg's rail runs down the left edge. With no script, or on any error, this is the settled state: paper cards, the
   Hour 24 cards lit, no rails. The start state applies only under .is-armed (set by the script). */
body.fc-hf .fc-flow-clock{position:relative;--clk-blue:#0809FF;--clk-ink:#2A2D34;--clk-sec:#505864;--clk-paper:#FBFBFD;--clk-lip:#E4E8F0;--clk-lit:#E8F1FE}
body.fc-hf .fc-flow-clock .fc-clock-lane{position:relative;z-index:1;margin:0!important;padding:0!important}
body.fc-hf .fc-flow-clock .fc-clock-lane-2{margin-top:58px!important}
/* the lane labels: blue kickers (the kit's kicker: uppercase, +0.04 em), at the site's own size */
body.fc-hf .fc-flow-clock .fc-flow-label{color:var(--clk-blue)!important;font-weight:700;letter-spacing:.04em;font-feature-settings:normal;text-transform:uppercase;margin-top:0!important}
body.fc-hf .fc-flow-clock .fc-flow-cards{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:20px!important;align-items:stretch;margin:0!important;padding:0!important;overflow:visible!important}
/* paper: satin face, a 3 px lip, a hairline and a soft contact shadow; the 2 px border is the lit rim's slot */
body.fc-hf .fc-flow-clock .fc-flow-cards li{flex:1 1 0!important;width:auto!important;position:relative;background:var(--clk-paper)!important;border:2px solid transparent;border-radius:16px;padding:18px 18px 16px;
  box-shadow:0 0 0 1px rgba(203,210,222,.6),0 3px 0 var(--clk-lip),0 18px 30px -22px rgba(22,25,60,.34);opacity:1;transform:none;transition:none!important}
body.fc-hf .fc-flow-clock .fc-flow-cards li::before,body.fc-hf .fc-flow-clock .fc-flow-cards li::after{display:none!important;content:none!important}
body.fc-hf .fc-flow-clock .fc-flow-cards li > b{position:relative;z-index:1;color:var(--clk-ink)!important}
body.fc-hf .fc-flow-clock .fc-flow-cards li > span:not(.fc-clock-veil):not(.fc-clock-sheen){position:relative;z-index:1;color:var(--clk-sec)!important}
/* Hour 0: a quiet paper card (it was #F8F8F8 on the #F8F8F8 page and read as bare text) */
body.fc-hf .fc-flow-clock .fc-flow-cards li:first-child{box-shadow:0 0 0 1px rgba(203,210,222,.75),0 3px 0 var(--clk-lip),0 10px 18px -16px rgba(22,25,60,.22)}
/* the hour labels in the figure face: Montserrat 500, tabular */
body.fc-hf .fc-flow-clock .fc-flow-cards li:first-child b,body.fc-hf .fc-flow-clock .fc-flow-cards li:last-child b{font-family:"Montserrat","Plus Jakarta Sans",sans-serif!important;font-weight:500!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* Hour 24 at the latest: lit (pale face, 2 px blue rim) instead of solid yellow; the one lit card of the clock */
body.fc-hf .fc-flow-clock .fc-flow-cards li:last-child{background:var(--clk-lit)!important;border-color:var(--clk-blue);overflow:hidden;
  box-shadow:0 0 0 1px rgba(8,9,255,.1),0 3px 0 var(--clk-lip),0 18px 30px -22px rgba(8,9,255,.34)}
/* the script's two layers inside a lit card, under its words: a paper veil that lifts as the pulse lands, and the sweep */
body.fc-hf .fc-flow-clock .fc-flow-cards li > .fc-clock-veil,body.fc-hf .fc-flow-clock .fc-flow-cards li > .fc-clock-sheen{display:block;position:absolute;inset:0;z-index:0;margin:0;pointer-events:none;opacity:0}
body.fc-hf .fc-flow-clock .fc-flow-cards li > .fc-clock-veil{background:var(--clk-paper)}
body.fc-hf .fc-flow-clock .fc-flow-cards li > .fc-clock-sheen{transform:translateX(-110%);background:linear-gradient(104deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.9) 47%,rgba(255,255,255,.9) 53%,rgba(255,255,255,0) 72%)}
/* the rail layer (js/fc-hf.js): the Line, 2 px FComply blue with a faint glow; hour ticks in ink, like a clock's marks */
body.fc-hf .fc-flow-clock .fc-clock-rails{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none}
body.fc-hf .fc-clock-rails path{fill:none;stroke-linecap:round;stroke-linejoin:round}
body.fc-hf .fc-clock-rails .fc-r-glow{stroke:var(--clk-blue);stroke-width:6;stroke-opacity:.13}
body.fc-hf .fc-clock-rails .fc-r-core{stroke:var(--clk-blue);stroke-width:2}
body.fc-hf .fc-clock-rails .fc-r-tick{stroke:var(--clk-ink);stroke-width:3;transform-box:fill-box;transform-origin:center}
/* the pulse: a bead of light in three layers of the same blue (no white core: on a 2 px line it read as a gap) */
body.fc-hf .fc-clock-rails .fc-r-pg{stroke:var(--clk-blue);stroke-width:16;stroke-opacity:.2;opacity:0}
body.fc-hf .fc-clock-rails .fc-r-pm{stroke:var(--clk-blue);stroke-width:7;stroke-opacity:.45;opacity:0}
body.fc-hf .fc-clock-rails .fc-r-pc{stroke:var(--clk-blue);stroke-width:4;opacity:0}
body.fc-hf .fc-clock-rails .fc-r-ring{fill:none;stroke:var(--clk-blue);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
/* start state, only once the script has armed the block, and per leg until its run starts */
body.fc-hf .fc-flow-clock.is-armed .fc-clock-lane:not(.is-run) .fc-flow-cards li,body.fc-hf .fc-flow-clock.is-armed .fc-clock-lane:not(.is-run) .fc-flow-label{opacity:0}
body.fc-hf .fc-flow-clock.is-armed .fc-r-g:not(.is-run){visibility:hidden}
/* below 1000 px: the cards stack, and each leg's rail runs down the left edge beside them */
@media only screen and (max-width:999px){
  body.fc-hf .fc-flow-clock .fc-clock-lane-2{margin-top:30px!important}
  body.fc-hf .fc-flow-clock .fc-flow-cards{flex-direction:column!important;gap:14px!important;padding-left:30px!important}
  body.fc-hf .fc-flow-clock .fc-flow-cards li{flex:0 0 auto!important}
}
/* reduced motion: settled, whatever the script does: rails drawn, the Hour 24 cards lit, no pulse, no sweep */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-flow-clock.is-armed .fc-flow-cards li,body.fc-hf .fc-flow-clock.is-armed .fc-flow-label{opacity:1!important;transform:none!important}
  body.fc-hf .fc-flow-clock.is-armed .fc-r-g{visibility:visible!important}
  body.fc-hf .fc-clock-rails .fc-r-pg,body.fc-hf .fc-clock-rails .fc-r-pm,body.fc-hf .fc-clock-rails .fc-r-pc,body.fc-hf .fc-clock-rails .fc-r-ring,body.fc-hf .fc-flow-clock .fc-clock-sheen,body.fc-hf .fc-flow-clock .fc-clock-veil{display:none!important}
}

/* ==== statute sheet (live-statute-sheet, PILOT-PLAN 7.1) ==== */
/* ---- The statute sheet (PILOT-PLAN 7.1, IG-20 "Three phrases do most of the work."): the marked infographic with
   "hf": true (staging-build/components_ig.py marked_block_hf), moved by the statute section of js/fc-hf.js.
   The markup is the finished state: the three honesty sweeps drawn, card 3 lit (is-lit). The script adds
   .fc-hf-arm (the start state) only when it is about to play, then .fc-hf-go when the sheet is 40 percent in view:
   three pale sweeps 0.9 s apart, each lighting its numbered card (paperLit) as it lands; card 3 stays lit. With no
   JavaScript, under reduced motion and under ?fcqa= the start state never applies. Nothing overshoots. */
body.fc-hf .fc-ig-hf{
  --hf-blue:#0809FF;--hf-ink:#2A2D34;--hf-sec:#505864;--hf-paper:#FBFBFD;--hf-lip:#E4E8F0;--hf-pale:#DCEBFF;--hf-lit:#E8F1FE;
  --hf-rule:#CBD2DE;--hf-ease:cubic-bezier(.16,1,.3,1);--hf-lift:-4px;--hf-m:32px;
  /* the desk the sheet lies on: the neutral base with the evidence corner, so the satin paper reads by its lip and shadow */
  background:radial-gradient(120% 90% at 100% 0%,rgba(220,235,255,.55) 0%,rgba(220,235,255,0) 55%),linear-gradient(180deg,#FFFFFF 0%,#F8F8F8 100%);
  box-shadow:0 30px 60px -24px rgba(42,45,52,.14),inset 0 0 0 1px rgba(203,210,222,.45);
  color:var(--hf-ink)}
/* kicker: blue, the film's kicker (uppercase, weight 600) with its short blue rule */
body.fc-hf .fc-ig-hf .fc-ig-eyebrow{color:var(--hf-blue)!important;font-size:var(--t-meta,13px)!important;font-weight:700;letter-spacing:.08em;font-feature-settings:normal}
body.fc-hf .fc-ig-hf .fc-ig-eyebrow::before{background:var(--hf-blue)}
body.fc-hf .fc-ig-hf .fc-ig-title{color:var(--hf-ink)}
/* the stressed words at the title's own size (DEF-2: style.css set them at the small step) */
body.fc-hf .fc-ig-hf .fc-ig-title em{font-size:1em!important;font-family:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--hf-ink)}

/* the sheet: heavy satin paper, radius 14, a 3 px lip, a soft contact shadow and a curl shadow at the lower right */
body.fc-hf .fc-ig-hf .fc-ig-marked-wrap{isolation:isolate;gap:28px 40px}
body.fc-hf .fc-ig-hf .fc-hf-sheet{position:relative;margin:0;padding:var(--hf-m) var(--hf-m) calc(var(--hf-m) - 4px) calc(var(--hf-m) + 12px);
  background:var(--hf-paper);border:0;border-radius:14px;quotes:none;
  box-shadow:0 3px 0 var(--hf-lip),0 4px 6px -2px rgba(42,45,52,.10),0 22px 34px -22px rgba(42,45,52,.30),inset 0 0 0 1px rgba(228,232,240,.9)}
/* the old 4 px bar sat at left 0 over the first letter of every line; it is now the sheet's margin rule, inside the padding */
body.fc-hf .fc-ig-hf .fc-hf-sheet::before{content:""!important;display:block!important;position:absolute!important;left:calc(var(--hf-m) - 14px)!important;
  top:var(--hf-m)!important;bottom:calc(var(--hf-m) - 4px)!important;right:auto!important;width:3px!important;height:auto!important;
  margin:0!important;border:0!important;border-radius:2px;background:var(--hf-blue)!important;opacity:1!important;transform:none!important}
body.fc-hf .fc-ig-hf .fc-hf-sheet::after{content:""!important;display:block!important;position:absolute!important;z-index:-1;right:10px;bottom:12px;
  width:48%;height:26px;border-radius:50%;background:transparent;box-shadow:0 15px 14px rgba(42,45,52,.22);transform:rotate(2.6deg);
  transform-origin:100% 100%;pointer-events:none}
body.fc-hf .fc-ig-hf .fc-hf-sheet p{margin:0;padding:0;color:var(--hf-ink);line-height:1.62;hanging-punctuation:none;text-indent:0}

/* the honesty sweep: a flat pale bar under the words; box-decoration-break slice runs it through a phrase's lines in
   reading order, so a sweep crossing a line break continues on the next line rather than drawing every line at once */
body.fc-hf .fc-ig-hf .fc-ig-mark{position:relative;color:var(--hf-ink);padding:.02em .1em .04em;margin:0 -.04em;border-radius:3px;
  background:linear-gradient(transparent 8%,var(--hf-pale) 8%,var(--hf-pale) 96%,transparent 96%) no-repeat 0 0/100% 100%;
  -webkit-box-decoration-break:slice;box-decoration-break:slice;transition:none}
/* the phrase numbers: small discs, white with a blue ring; the lit phrase's disc is solid blue, like its card's key */
body.fc-hf .fc-ig-hf .fc-ig-mark-n{display:inline-grid;place-items:center;width:1.58em;height:1.58em;margin:0 0 0 .3em;vertical-align:.42em;font-size:var(--t-meta,13px)!important;
  border-radius:50%;background:#fff;color:var(--hf-blue);box-shadow:inset 0 0 0 1.5px var(--hf-blue);font-family:"Plus Jakarta Sans",sans-serif;
  font-style:normal;font-weight:700;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;opacity:1;transform:none;
  transition:background-color .35s var(--hf-ease),color 0s linear 36ms}
/* a disc and its numeral never share a color: the numeral flips at the moment the disc is half way (the ease reaches
   0.5 at 10 percent of its time), so no frame shows a blank disc */
body.fc-hf .fc-ig-hf .fc-ig-mark.is-lit .fc-ig-mark-n{background:var(--hf-blue);color:#fff}

/* the source line: sentence case, never uppercase, under a short blue rule */
body.fc-hf .fc-ig-hf .fc-hf-src{display:flex;flex-direction:column;gap:4px;margin:22px 0 0;font:500 var(--t-small,15px)/1.45 "Plus Jakarta Sans",sans-serif;color:var(--hf-sec)}
body.fc-hf .fc-ig-hf .fc-hf-src::before{content:"";display:block;width:28px;height:2px;border-radius:2px;background:var(--hf-blue);margin:0 0 8px}
body.fc-hf .fc-ig-hf .fc-hf-src b,body.fc-hf .fc-ig-hf .fc-hf-src span{font-size:var(--t-small,15px)!important;letter-spacing:0;text-transform:none;font-variant:normal;font-style:normal}
body.fc-hf .fc-ig-hf .fc-hf-src .fc-hf-cite{color:var(--hf-ink);font-weight:500;text-wrap:balance}
body.fc-hf .fc-ig-hf .fc-hf-src .fc-hf-note{color:var(--hf-sec);font-weight:500;text-wrap:pretty}
body.fc-hf .fc-ig-hf .fc-hf-src .fc-nw{white-space:nowrap}

/* the cards: paper at context (type fully bright), paperLit when lit: the pale face tint, a 2 px blue rim, lifted 4 px */
body.fc-hf .fc-ig-hf .fc-ig-mcards{gap:14px;padding-top:4px}
body.fc-hf .fc-ig-hf .fc-ig-mcard{position:relative;opacity:1;transform:none;background:var(--hf-paper);border-radius:14px;padding:16px 18px;cursor:default;
  box-shadow:0 3px 0 var(--hf-lip),0 12px 22px -16px rgba(42,45,52,.30),inset 0 0 0 1px rgba(203,210,222,.7);
  transition:background-color .35s var(--hf-ease),box-shadow .35s var(--hf-ease),transform .35s var(--hf-ease)}
body.fc-hf .fc-ig-hf .fc-ig-mcard.is-lit{background:var(--hf-lit);transform:translateY(var(--hf-lift));
  box-shadow:0 3px 0 var(--hf-lip),0 18px 26px -16px rgba(42,45,52,.34),inset 0 0 0 2px var(--hf-blue)}
body.fc-hf .fc-ig-hf .fc-ig-mcard:focus{outline:none}
body.fc-hf .fc-ig-hf .fc-ig-mcard:focus-visible{outline:2px solid var(--hf-blue);outline-offset:3px}
body.fc-hf .fc-ig-hf .fc-ig-mcard b{color:var(--hf-ink)}
body.fc-hf .fc-ig-hf .fc-ig-mcard-p{color:var(--hf-sec)}
body.fc-hf .fc-ig-hf .fc-ig-mcard .fc-ig-key{background:#fff;color:var(--hf-blue);box-shadow:inset 0 0 0 1.5px var(--hf-rule);font-weight:700;font-size:var(--t-meta,13px);
  transition:background-color .35s var(--hf-ease),color 0s linear 36ms,box-shadow .35s var(--hf-ease)}
body.fc-hf .fc-ig-hf .fc-ig-mcard.is-lit .fc-ig-key{background:var(--hf-blue);color:#fff;box-shadow:inset 0 0 0 1.5px var(--hf-blue)}

/* the start state (only ever set by the script, right before it plays): no sweep drawn, no number or card lit.
   Nothing is hidden: the numbers and cards stand at context, so nothing reflows and nothing waits to appear */
body.fc-hf .fc-ig-hf.fc-hf-arm .fc-ig-mark{background-size:0% 100%}
body.fc-hf .fc-ig-hf.fc-hf-arm .fc-ig-mark-n,body.fc-hf .fc-ig-hf.fc-hf-arm .fc-ig-mark.is-lit .fc-ig-mark-n{background:#fff;color:var(--hf-blue)}
body.fc-hf .fc-ig-hf.fc-hf-arm .fc-ig-mcard,body.fc-hf .fc-ig-hf.fc-hf-arm .fc-ig-mcard.is-lit{transition:none;background:var(--hf-paper);transform:none;
  box-shadow:0 3px 0 var(--hf-lip),0 12px 22px -16px rgba(42,45,52,.30),inset 0 0 0 1px rgba(203,210,222,.7)}
body.fc-hf .fc-ig-hf.fc-hf-arm .fc-ig-mcard .fc-ig-key,body.fc-hf .fc-ig-hf.fc-hf-arm .fc-ig-mcard.is-lit .fc-ig-key{transition:none;background:#fff;color:var(--hf-blue);box-shadow:inset 0 0 0 1.5px var(--hf-rule)}
/* the sequence: sweep k starts at 0.15 s + k x 0.9 s and takes 0.5 s; its number and card light from 0.4 s into it for
   0.45 s; a card that is not the last returns to context when the next one lights. All in CSS, so the checks can pause it */
body.fc-hf .fc-ig-hf.fc-hf-arm.fc-hf-go .fc-ig-mark{background-size:100% 100%;transition:background-size .5s cubic-bezier(.45,0,.2,1) calc(.15s + var(--i,0) * .9s)}
body.fc-hf .fc-ig-hf.fc-hf-arm.fc-hf-go .fc-ig-mark-n{animation:fc-hf-n-pass 1.35s var(--hf-ease) calc(.55s + var(--i,0) * .9s) both,fc-hf-fg-pass 1.35s linear calc(.55s + var(--i,0) * .9s) both}
body.fc-hf .fc-ig-hf.fc-hf-arm.fc-hf-go .fc-ig-mark:last-of-type .fc-ig-mark-n{animation:fc-hf-n-in .45s var(--hf-ease) calc(.55s + var(--i,0) * .9s) both,fc-hf-fg-in .45s linear calc(.55s + var(--i,0) * .9s) both}
body.fc-hf .fc-ig-hf.fc-hf-arm.fc-hf-go .fc-ig-mcard{animation:fc-hf-card-pass 1.35s var(--hf-ease) calc(.55s + var(--i,0) * .9s) both}
body.fc-hf .fc-ig-hf.fc-hf-arm.fc-hf-go .fc-ig-mcard:last-child{animation:fc-hf-card-in .45s var(--hf-ease) calc(.55s + var(--i,0) * .9s) both}
body.fc-hf .fc-ig-hf.fc-hf-arm.fc-hf-go .fc-ig-mcard .fc-ig-key{animation:fc-hf-key-pass 1.35s var(--hf-ease) calc(.55s + var(--i,0) * .9s) both,fc-hf-fg-pass 1.35s linear calc(.55s + var(--i,0) * .9s) both}
body.fc-hf .fc-ig-hf.fc-hf-arm.fc-hf-go .fc-ig-mcard:last-child .fc-ig-key{animation:fc-hf-key-in .45s var(--hf-ease) calc(.55s + var(--i,0) * .9s) both,fc-hf-fg-in .45s linear calc(.55s + var(--i,0) * .9s) both}
@keyframes fc-hf-card-pass{
  0%,100%{background-color:#FBFBFD;transform:translateY(0);box-shadow:0 3px 0 #E4E8F0,0 12px 22px -16px rgba(42,45,52,.30),inset 0 0 0 1px rgba(203,210,222,.7)}
  33.33%,66.67%{background-color:#E8F1FE;transform:translateY(var(--hf-lift));box-shadow:0 3px 0 #E4E8F0,0 18px 26px -16px rgba(42,45,52,.34),inset 0 0 0 2px #0809FF}}
@keyframes fc-hf-card-in{
  0%{background-color:#FBFBFD;transform:translateY(0);box-shadow:0 3px 0 #E4E8F0,0 12px 22px -16px rgba(42,45,52,.30),inset 0 0 0 1px rgba(203,210,222,.7)}
  100%{background-color:#E8F1FE;transform:translateY(var(--hf-lift));box-shadow:0 3px 0 #E4E8F0,0 18px 26px -16px rgba(42,45,52,.34),inset 0 0 0 2px #0809FF}}
@keyframes fc-hf-key-pass{
  0%,100%{background-color:#fff;box-shadow:inset 0 0 0 1.5px #CBD2DE}
  33.33%,66.67%{background-color:#0809FF;box-shadow:inset 0 0 0 1.5px #0809FF}}
@keyframes fc-hf-key-in{
  0%{background-color:#fff;box-shadow:inset 0 0 0 1.5px #CBD2DE}
  100%{background-color:#0809FF;box-shadow:inset 0 0 0 1.5px #0809FF}}
@keyframes fc-hf-n-pass{
  0%,100%{background-color:#fff}
  33.33%,66.67%{background-color:#0809FF}}
@keyframes fc-hf-n-in{
  0%{background-color:#fff}
  100%{background-color:#0809FF}}
/* the numerals' color, on its own linear clock: it flips where the disc's ease is half way (3.4 and 70 percent of the
   pass, 10 percent of the landing), so a numeral is never the color of its disc */
@keyframes fc-hf-fg-pass{0%,3.3%{color:#0809FF}3.5%,69.9%{color:#fff}70.1%,100%{color:#0809FF}}
@keyframes fc-hf-fg-in{0%,10%{color:#0809FF}10.4%,100%{color:#fff}}

/* two columns (ig.css keeps two from 1000 px): the sheet and the card column end on the same line, so the panel is
   balanced at every width; the cards share the spare height and the source line sits at the foot of the sheet */
@media only screen and (min-width:1000px){
  body.fc-hf .fc-ig-hf .fc-ig-marked-wrap{align-items:stretch}
  body.fc-hf .fc-ig-hf .fc-hf-sheet{display:flex;flex-direction:column}
  body.fc-hf .fc-ig-hf .fc-hf-src{margin-top:auto;padding-top:22px}
  body.fc-hf .fc-ig-hf .fc-ig-mcards{justify-content:space-between;padding-bottom:0}
}
/* phones: 20 px margins, one column, and 70 percent of the desktop travel */
@media only screen and (max-width:690px){
  body.fc-hf .fc-ig-hf{--hf-m:20px;--hf-lift:-3px}
  body.fc-hf .fc-ig-hf .fc-hf-sheet{padding-left:calc(var(--hf-m) + 10px)}
  body.fc-hf .fc-ig-hf .fc-hf-sheet::before{left:calc(var(--hf-m) - 10px)!important}
  body.fc-hf .fc-ig-hf .fc-ig-marked-wrap{gap:22px}
  body.fc-hf .fc-ig-hf .fc-ig-mcard{padding:14px 16px}
}
/* the narrowest phones: a citation may wrap inside itself rather than push past the sheet */
@media only screen and (max-width:399px){body.fc-hf .fc-ig-hf .fc-hf-cite>.fc-nw{white-space:normal}}
/* reduced motion: the finished state, and a card lit by hover or focus changes color without moving */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-ig-hf .fc-ig-mcard,body.fc-hf .fc-ig-hf .fc-ig-mcard .fc-ig-key,body.fc-hf .fc-ig-hf .fc-ig-mark,body.fc-hf .fc-ig-hf .fc-ig-mark-n{transition:none!important;animation:none!important}
  body.fc-hf .fc-ig-hf .fc-ig-mcard.is-lit{transform:none}
}
/* ==== end statute sheet ==== */

/* ==== timeline Line (live-timeline-line, PILOT-PLAN 7.2) ==== */
/* ---- The timeline, "From a one-time report to an ongoing duty" (PILOT-PLAN 7.2, F6) --------------------------------
   Markup: components.py timeline_block with "hf": true (the page source sets it), so the column is .fc-tl-col.fc-hf-tl.
   The gray rail and its blue-to-orange progress gradient become the Line: a 2 px FComply-blue strip, drawn by the scroll
   on a desktop and once on entry on a phone (js/fc-hf.js), with a pulse riding its tip. Each year stands on it as a paper
   slab; 2014 and 2016 are joined by a blue bracket labelled with the page's own words; from 2023 the Line pulses (the duty
   made continuous); "The practical effect" is a frosted glass panel where the Line ends. Items rise with no overshoot and
   no lateral slide. Color follows meaning: blue is the Line and what Congress enacted; the 2023 amendment keeps the
   legend's orange (P4), in the orange ink #c24a16 for text and coral #F26430 for its node only.
   No JavaScript, an error, reduced motion or ?fcqa=: everything is drawn and settled (the start states below apply only
   under .hf-tl-armed, which the script sets last). Geometry from the script (.hf-tl-js): the Line ends at the panel, the
   pulsing segment starts at 2023, the bracket spans 2014 to 2016. */
body.fc-hf .fc-tl-col.fc-hf-tl{--hf-blue:#0809FF;--hf-ink:#2A2D34;--hf-rule:#CBD2DE;--hf-empty:#DFE4EF;--hf-coral:#F26430;--hf-orange-ink:#c24a16;
  --hf-x:12px;--hf-pad:62px;--hf-rise:16px;--hf-ease:cubic-bezier(.16,1,.3,1)}
/* the old rail, its gradient and the popping ring dots retire here */
body.fc-hf .fc-tl-col.fc-hf-tl>.vc_column-inner::before,body.fc-hf .fc-tl-col.fc-hf-tl>.vc_column-inner::after,
body.fc-hf .fc-tl-col.fc-hf-tl .fc-tl-item::before{content:none!important;display:none!important}

/* the Line */
body.fc-hf .fc-hf-tl .fc-hf-tl-line{position:absolute;left:0;top:var(--hf-tl-top,0px);bottom:0;width:calc(var(--hf-pad) - 4px);pointer-events:none;z-index:0}
body.fc-hf .fc-hf-tl.hf-tl-js .fc-hf-tl-line{bottom:auto;height:var(--hf-tl-len,100%)}
body.fc-hf .fc-hf-tl .fc-hf-tl-line>i{position:absolute;display:block;font-style:normal}
body.fc-hf .fc-hf-tl .fc-hf-tl-track{left:var(--hf-x);top:0;bottom:0;width:2px;border-radius:2px;background:var(--hf-empty)}
body.fc-hf .fc-hf-tl .fc-hf-tl-draw{left:var(--hf-x);top:0;bottom:0;width:2px;border-radius:2px;background:var(--hf-blue);
  box-shadow:0 0 6px rgba(8,9,255,.28);transform-origin:50% 0;transform:scaleY(var(--hf-tl,1));will-change:transform}
/* the pulse riding the tip: a bead of light, and a ring that breathes out of it while the Line is being drawn */
body.fc-hf .fc-hf-tl .fc-hf-tl-tip{left:calc(var(--hf-x) + 1px);top:0;height:100%;width:0;transform:translate3d(0,calc(var(--hf-tl,1) * 100%),0);opacity:0;transition:opacity .25s ease;will-change:transform}
body.fc-hf .fc-hf-tl.hf-tl-tipon .fc-hf-tl-tip{opacity:1}
body.fc-hf .fc-hf-tl .fc-hf-tl-tip b{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#3a3bff 0 30%,var(--hf-blue) 62%);box-shadow:0 0 0 3px rgba(8,9,255,.14),0 0 14px 4px rgba(8,9,255,.34)}
body.fc-hf .fc-hf-tl .fc-hf-tl-tip b::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid rgba(8,9,255,.55);opacity:0}
body.fc-hf .fc-hf-tl.hf-tl-armed.hf-tl-onscreen.hf-tl-tipon .fc-hf-tl-tip b::after{animation:fcHfTlRing 1.6s cubic-bezier(.16,1,.3,1) infinite}
@keyframes fcHfTlRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
/* from 2023 on the Line pulses: beads of light travel it, one every 2.6 s, for as long as it is on screen */
body.fc-hf .fc-hf-tl .fc-hf-tl-live{display:none;left:calc(var(--hf-x) - 5px);width:12px;top:var(--hf-y23,0);bottom:0;overflow:hidden;
  clip-path:inset(0 0 calc((1 - var(--hf-live,1)) * 100%) 0)}
body.fc-hf .fc-hf-tl.hf-tl-js .fc-hf-tl-live{display:block}
body.fc-hf .fc-hf-tl .fc-hf-tl-live b{position:absolute;left:0;right:0;top:-140px;bottom:0;
  background:radial-gradient(ellipse 3.4px 16px at 50% 70px,rgba(8,9,255,1) 0%,rgba(8,9,255,.7) 40%,rgba(8,9,255,.22) 75%,rgba(8,9,255,0) 100%) 0 0/12px 140px repeat-y,
    radial-gradient(ellipse 6px 24px at 50% 70px,rgba(110,118,255,.30) 0%,rgba(110,118,255,0) 100%) 0 0/12px 140px repeat-y}
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-live b{animation:fcHfTlFlow 2.6s linear infinite;animation-play-state:paused}
body.fc-hf .fc-hf-tl.hf-tl-armed.hf-tl-onscreen.hf-tl-cont .fc-hf-tl-live b{animation-play-state:running}
@keyframes fcHfTlFlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,140px,0)}}
/* the node where the Line ends, beside the glass panel */
body.fc-hf .fc-hf-tl .fc-hf-tl-endnode{display:none;left:calc(var(--hf-x) - 5px);bottom:-6px;width:12px;height:12px;border-radius:50%;box-sizing:border-box;
  background:var(--hf-blue);border:2px solid var(--hf-blue);box-shadow:0 0 0 4px rgba(8,9,255,.12);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
body.fc-hf .fc-hf-tl.hf-tl-js .fc-hf-tl-endnode{display:block}
body.fc-hf .fc-hf-tl.hf-tl-armed:not(.hf-tl-full) .fc-hf-tl-endnode{background:#fff;border-color:var(--hf-rule);box-shadow:none}
/* the bracket: 2014 to 2016, drawn once when the Line reaches 2016 (the grace period is the law, so blue, not a gap) */
body.fc-hf .fc-hf-tl .fc-hf-tl-bracket{position:absolute;display:none;left:30px;top:var(--hf-br-top,0);width:20px;height:var(--hf-br-h,0);overflow:visible}
body.fc-hf .fc-hf-tl.hf-tl-js .fc-hf-tl-bracket{display:block}
body.fc-hf .fc-hf-tl .fc-hf-tl-bracket path{fill:none;stroke:var(--hf-blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
body.fc-hf .fc-hf-tl.hf-tl-armed:not(.hf-tl-br) .fc-hf-tl-bracket path{stroke-dashoffset:1}
body.fc-hf .fc-hf-tl.hf-tl-armed.hf-tl-br .fc-hf-tl-bracket path{transition:stroke-dashoffset .55s cubic-bezier(.33,1,.68,1)}

/* the section labels: kickers (blue for the statute, the legend's orange ink for the amendment) */
body.fc-hf .fc-hf-tl .fc-tl-label{margin:0}
body.fc-hf .fc-hf-tl .fc-tl-label-found{padding-top:46px!important}
body.fc-hf .fc-hf-tl .fc-hf-tl-item{padding-top:34px!important}
/* resting tracking +0.04 em (STYLE.md 6, the kicker row of the type scale); it enters from +0.10 em in 0.3 s (STYLE.md 6, PILOT-PLAN 7.8 R3) */
body.fc-hf .fc-hf-tl .fc-hf-tl-kicker{margin:0;padding:0;font:600 .84rem/1.3 "Plus Jakarta Sans",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--hf-blue)}
body.fc-hf .fc-hf-tl .fc-tl-label-found .fc-hf-tl-kicker{color:var(--hf-orange-ink)}
body.fc-hf .fc-hf-tl .fc-tl-label .wpb_raw_code,body.fc-hf .fc-hf-tl .fc-tl-item .wpb_raw_code{margin-bottom:0}

/* the paper year slabs, standing on the Line (satin, a 3 px lip for thickness, a soft contact shadow) */
body.fc-hf .fc-hf-tl .fc-hf-tl-head{position:relative;display:flex;align-items:center;margin:0}
body.fc-hf .fc-hf-tl .fc-hf-slab{position:relative;display:inline-flex;align-items:center;height:62px;padding:0 22px;box-sizing:border-box;border-radius:12px;
  background:linear-gradient(180deg,#fff 0%,#FBFBFD 60%,#F6F7FA 100%);border:1px solid #E6E9F0;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #E4E8F0,0 16px 26px -16px rgba(42,45,52,.34)}
body.fc-hf .fc-hf-tl .fc-hf-slab-year{font:500 2.25rem/1 Montserrat,"Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:var(--hf-blue);
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
body.fc-hf .fc-hf-tl .fc-tl-found .fc-hf-slab-year{color:var(--hf-orange-ink)}
/* the node on the Line, beside each slab: ghost until the Line reaches it, then blue (the amendment's coral) */
body.fc-hf .fc-hf-tl .fc-hf-tl-head::before{content:"";position:absolute;left:calc(var(--hf-x) + 1px - 6px - var(--hf-pad));top:calc(50% - 6px);width:12px;height:12px;
  box-sizing:border-box;border-radius:50%;background:var(--hf-blue);border:2px solid var(--hf-blue);box-shadow:0 0 0 4px rgba(8,9,255,.12);z-index:1;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
body.fc-hf .fc-hf-tl .fc-tl-found .fc-hf-tl-head::before{background:var(--hf-coral);border-color:var(--hf-coral);box-shadow:0 0 0 4px rgba(242,100,48,.14)}
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-item:not(.hf-tl-lit) .fc-hf-tl-head::before{background:#fff;border-color:var(--hf-rule);box-shadow:none}
/* the bracket's label: the page's own words, the figure in Montserrat, set once (it replaced "2016 - 2") */
body.fc-hf .fc-hf-tl .fc-hf-tl-span{display:flex;align-items:baseline;gap:.42em;margin:0 0 16px;font:600 1rem/1.35 "Plus Jakarta Sans",sans-serif;color:var(--hf-ink)}
body.fc-hf .fc-hf-tl .fc-hf-tl-fig{flex:none;font:500 1.9rem/1 Montserrat,"Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:var(--hf-blue);font-variant-numeric:tabular-nums lining-nums}
body.fc-hf .fc-hf-tl .fc-hf-tl-span-t{min-width:0;text-wrap:balance}
/* public-law numbers keep their hyphen: the face's contextual alternates draw 113-183 with a long dash */
body.fc-hf .fc-hf-tl .fc-tl-item .fc-body p,body.fc-hf .fc-hf-tl .fc-tl-item .fc-tl-h{font-feature-settings:"calt" 0}

/* "The practical effect": a frosted glass panel where the Line ends (white 0.88 behind the text, a hairline, a soft shadow) */
body.fc-hf .fc-hf-tl .fc-tl-pattern{position:relative;isolation:isolate;border-radius:18px;padding:22px 26px;
  background:linear-gradient(160deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.88) 55%,rgba(240,240,255,.88) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border:1px solid rgba(203,210,222,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 40px -22px rgba(22,25,60,.28),0 2px 6px rgba(22,25,31,.05);
  transition:box-shadow .6s var(--hf-ease)}
body.fc-hf .fc-hf-tl .fc-tl-pattern>*{position:relative;z-index:1}
body.fc-hf .fc-hf-tl .fc-tl-pattern h3{color:var(--hf-ink)}
body.fc-hf .fc-hf-tl .fc-tl-pattern p{color:var(--hf-ink)}
/* one light sweep crosses the glass when the Line arrives (paint only, once) */
body.fc-hf .fc-hf-tl .fc-tl-pattern::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,rgba(220,235,255,0) 43%,rgba(220,235,255,.95) 50%,rgba(220,235,255,0) 57%) no-repeat;background-size:300% 100%;background-position:95% 0}
body.fc-hf .fc-hf-tl.hf-tl-armed.hf-tl-swept .fc-tl-pattern::after{animation:fcHfTlSweep 1.6s cubic-bezier(.37,0,.63,1) .15s 1 both}
@keyframes fcHfTlSweep{0%{opacity:1;background-position:95% 0}92%{opacity:1}100%{opacity:0;background-position:5% 0}}

/* rises (start states only under .hf-tl-armed): cards rise from the floor as their shadow grows, no overshoot, no slide */
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-slab,body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-span,body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-item .wpb_text_column,
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-kicker,body.fc-hf .fc-hf-tl.hf-tl-armed .fc-tl-pattern{
  transition:opacity .5s var(--hf-ease),transform .5s var(--hf-ease),letter-spacing .3s var(--hf-ease),box-shadow .6s var(--hf-ease)}
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-item:not(.hf-tl-in) .fc-hf-slab,
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-item:not(.hf-tl-in) .fc-hf-tl-span,
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-item:not(.hf-tl-in) .wpb_text_column{opacity:0;transform:translate3d(0,var(--hf-rise),0)}
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-item:not(.hf-tl-in) .fc-hf-slab{box-shadow:inset 0 1px 0 #fff,0 3px 0 #E4E8F0,0 4px 8px -6px rgba(42,45,52,.22)}
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-item.hf-tl-in .wpb_text_column{transition-delay:.09s}
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-span-end.hf-tl-in .fc-hf-slab{transition-delay:.09s}
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-span-end.hf-tl-in .wpb_text_column{transition-delay:.18s}
/* the kicker enters as one unit with a 0.3 s tracking settle, +0.10 em to +0.04 em (the title strip section restates it) */
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-tl-label:not(.hf-tl-in) .fc-hf-tl-kicker{opacity:0;letter-spacing:.10em}
/* the panel lifts 12 px as its shadow tightens */
body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-end:not(.hf-tl-in) .fc-tl-pattern{opacity:0;transform:translate3d(0,12px,0);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 60px -24px rgba(22,25,60,.20),0 2px 6px rgba(22,25,31,.03)}
body.fc-hf .fc-hf-tl.hf-tl-armed .hf-tl-in .fc-tl-pattern{transition-duration:.6s}

/* under 1000 px the column stacks under the intro: the Line enters above the first kicker instead of touching the text */
@media only screen and (max-width:999px){body.fc-hf .fc-tl-col.fc-hf-tl{--hf-tl-top:18px}body.fc-hf .fc-hf-tl .fc-tl-label-law{padding-top:34px!important}}
/* phones: the Line sits where the rail sat (8 px), cards travel 70 percent of the distance, the bracket narrows */
@media only screen and (max-width:690px){
  body.fc-hf .fc-tl-col.fc-hf-tl{--hf-x:8px;--hf-pad:42px;--hf-rise:11px}
  body.fc-hf .fc-hf-tl .fc-tl-label-found{padding-top:36px!important}
  body.fc-hf .fc-hf-tl .fc-hf-tl-item{padding-top:26px!important}
  body.fc-hf .fc-hf-tl .fc-hf-tl-bracket{left:19px;width:14px}
  body.fc-hf .fc-hf-tl .fc-hf-slab{height:52px;padding:0 16px;border-radius:10px}
  body.fc-hf .fc-hf-tl .fc-hf-slab-year{font-size:1.8rem}
  body.fc-hf .fc-hf-tl .fc-hf-tl-span{margin-bottom:12px;font-size:.94rem}
  body.fc-hf .fc-hf-tl .fc-hf-tl-fig{font-size:1.6rem}
  body.fc-hf .fc-hf-tl.hf-tl-armed .fc-hf-tl-end:not(.hf-tl-in) .fc-tl-pattern{transform:translate3d(0,8px,0)}
  body.fc-hf .fc-hf-tl .fc-tl-pattern{padding:20px 20px}
  /* the panel's title was 14 px under 17 px text on a phone (an older rule wins); a title is never smaller than its text */
  body.fc-hf #ajax-content-wrap .fc-hf-tl .fc-tl-pattern h3{font-size:1.3rem!important;line-height:1.25}
}
/* reduced motion: drawn and settled; the beads stand still on the Line (the pulse stops, the continuous duty still reads) */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-hf-tl .fc-hf-tl-live b,body.fc-hf .fc-hf-tl .fc-hf-tl-tip b::after,body.fc-hf .fc-hf-tl .fc-tl-pattern::after{animation:none!important}
  body.fc-hf .fc-hf-tl .fc-hf-tl-tip{display:none}
}
/* ==== end timeline Line ==== */

/* ==== clock icon (live-icon-clock, PILOT-PLAN 7.5) ==== */
/* ---- The clock icon (PILOT-PLAN 7.5; inventory lottie-icon:clock) ------------------------------------------------------
   Markup: icons.py icon_hf('clock', 'orange'), placed by components.py timeline_block ("hf": true) in the timeline's side
   column, beside "Made continuous in 2023". It replaces the Lottie clock (no player on this page, D9): one inline SVG in
   the kit's po-icons grammar (120x120, monoline, round caps, strokes that draw on, the face in the wash), drawn in the
   orange ink #c24a16 because the legend says orange marks the 2023 amendment (P4; #F26430 on white is too light for a
   line this thin). The play, once it is half in view: the strokes draw on in 0.5 s from 12 o'clock; the crown presses;
   the hand at 12 sweeps once round (a whole day, the duty made continuous) and settles on the 12 mark on the house settle
   curve, which never passes 1, so it lands with no overshoot, while the lap of the day fills behind it and fades; then a
   tiny idle (a rock of 3 degrees each way over 4.8 s and a lift of 4 units, about 2 px, over 3.6 s), paused off screen and
   in a hidden tab. Every start state applies only under .is-armed, which js/fc-hf.js sets, so with no script, on any
   error, in print and under ?fcqa= the icon is the finished drawing, still. Reduced motion: the icons move for everyone
   at Gavin's request (D15), so the play stays and the idle is halved. A closed fold resets it; it plays again on opening.
   The chip: the side column's tile becomes a satin paper chip (the pilot's paper material) where it holds an HF icon. */
body.fc-hf .fc-hfi{display:block;position:relative;width:100%;aspect-ratio:1;
  --hfi-ink:#0809FF;--hfi-wash:#DCEBFF;--hfi-deep:#0506B8;--hfi-lap:rgba(8,9,255,.14)}
body.fc-hf .fc-hfi.orange{--hfi-ink:#c24a16;--hfi-wash:#FDEEE7;--hfi-deep:#c24a16;--hfi-lap:rgba(194,74,22,.17)}
body.fc-hf .fc-tl-icon-art .fc-hfi{width:64%}
body.fc-hf .fc-tl-icon-art.fc-hfi-chip{background:#FBFBFD!important;
  box-shadow:0 0 0 1px rgba(203,210,222,.6),0 3px 0 #E4E8F0,0 18px 30px -22px rgba(22,25,60,.34)!important}
body.fc-hf .fc-hfi-svg{display:block;width:100%;height:100%;overflow:visible}
body.fc-hf .fc-hfi-svg path,body.fc-hf .fc-hfi-svg circle{fill:none;stroke:var(--hfi-ink);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
body.fc-hf .fc-hfi-svg .f{fill:var(--hfi-wash)}
body.fc-hf .fc-hfi-svg .hand{stroke-width:5}
body.fc-hf .fc-hfi-svg .fc-hfi-pivot{fill:var(--hfi-deep);stroke:none}
/* the lap of the day: a sector of the face that fills clockwise from 12 with the hand (hidden unless it is playing) */
body.fc-hf .fc-hfi-svg .fc-hfi-lap{stroke:var(--hfi-lap);stroke-width:37.8;stroke-linecap:butt;stroke-dasharray:100 101;stroke-dashoffset:100;opacity:0}
body.fc-hf .fc-hfi-svg g{transform-box:view-box}
body.fc-hf .fc-hfi-rock,body.fc-hf .fc-hfi-bob,body.fc-hf .fc-hfi-sweep{transform-origin:60px 62px}
body.fc-hf .fc-hfi-crown{transform-origin:60px 14px}

/* start state, only once the script has armed the icon */
body.fc-hf .fc-hfi.is-armed .dr{stroke-dasharray:100 101;stroke-dashoffset:100}
body.fc-hf .fc-hfi.is-armed .f{fill-opacity:0}
body.fc-hf .fc-hfi.is-armed .fc-hfi-pivot{opacity:0}
/* the play (seconds from the trigger): draw 0 to 0.5, the crown 0.62 to 1.04, the sweep 0.74 to 1.94, the idle from 2.44 */
body.fc-hf .fc-hfi.is-play .fc-hfi-face{animation:fcHfiDraw .4s cubic-bezier(.45,0,.55,1) both,fcHfiFill .25s cubic-bezier(.16,1,.3,1) .25s both}
body.fc-hf .fc-hfi.is-play .fc-hfi-mark{animation:fcHfiDraw .24s cubic-bezier(.45,0,.55,1) .06s both}
body.fc-hf .fc-hfi.is-play .fc-hfi-crown path{animation:fcHfiDraw .3s cubic-bezier(.45,0,.55,1) .1s both}
body.fc-hf .fc-hfi.is-play .fc-hfi-hour{animation:fcHfiDraw .28s cubic-bezier(.45,0,.55,1) .16s both}
body.fc-hf .fc-hfi.is-play .fc-hfi-min{animation:fcHfiDraw .28s cubic-bezier(.45,0,.55,1) .22s both}
body.fc-hf .fc-hfi.is-play .fc-hfi-pivot{animation:fcHfiShow .14s linear .36s both}
body.fc-hf .fc-hfi.is-play .fc-hfi-crown{animation:fcHfiPress .42s linear .62s both}
body.fc-hf .fc-hfi.is-play .fc-hfi-sweep{animation:fcHfiTurn 1.2s cubic-bezier(.45,0,.2,1) .74s both}
body.fc-hf .fc-hfi.is-play .fc-hfi-lap{animation:fcHfiDraw 1.2s cubic-bezier(.45,0,.2,1) .74s both,fcHfiLapFade 1.7s linear .74s both}
body.fc-hf .fc-hfi.is-play .fc-hfi-rock{animation:fcHfiRock 4.8s ease-in-out 2.44s infinite}
body.fc-hf .fc-hfi.is-play .fc-hfi-bob{animation:fcHfiBob 3.6s ease-in-out 2.44s infinite}
/* off screen or in a hidden tab: everything holds where it is */
body.fc-hf .fc-hfi.is-play:not(.is-on) *{animation-play-state:paused!important}
@keyframes fcHfiDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fcHfiFill{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes fcHfiShow{from{opacity:0}to{opacity:1}}
/* the crown: down 4 units in 0.12 s, held 0.06 s, back in 0.24 s; it never rises above its place */
@keyframes fcHfiPress{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  28.57%{transform:translateY(4px);animation-timing-function:linear}
  42.86%{transform:translateY(4px);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  100%{transform:translateY(0)}}
@keyframes fcHfiTurn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fcHfiLapFade{0%,70.59%{opacity:1}100%{opacity:0}}
/* the idle: every turn and every lift starts and ends at rest, so nothing jumps where a cycle joins the next */
@keyframes fcHfiRock{0%{transform:rotate(0deg)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0deg)}}
@keyframes fcHfiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes fcHfiRockRm{0%{transform:rotate(0deg)}25%{transform:rotate(1.5deg)}75%{transform:rotate(-1.5deg)}100%{transform:rotate(0deg)}}
@keyframes fcHfiBobRm{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-hfi.is-play .fc-hfi-rock{animation-name:fcHfiRockRm}
  body.fc-hf .fc-hfi.is-play .fc-hfi-bob{animation-name:fcHfiBobRm}
}
@media print{
  body.fc-hf .fc-hfi *{animation:none!important}
  body.fc-hf .fc-hfi .dr{stroke-dashoffset:0!important}
  body.fc-hf .fc-hfi .f{fill-opacity:1!important}
  body.fc-hf .fc-hfi .fc-hfi-pivot{opacity:1!important}
  body.fc-hf .fc-hfi .fc-hfi-lap{display:none}
}
@media (forced-colors:active){
  body.fc-hf .fc-hfi-svg path,body.fc-hf .fc-hfi-svg circle{stroke:CanvasText}
  body.fc-hf .fc-hfi-svg .f{fill:Canvas}
  body.fc-hf .fc-hfi-svg .fc-hfi-pivot{fill:CanvasText}
  body.fc-hf .fc-hfi-svg .fc-hfi-lap{display:none}
}
/* ==== end clock icon ==== */

/* ==== report tags (live-flow-report-tags, PILOT-PLAN 7.4) ==== */
/* ---- The four report tags (PILOT-PLAN 7.4; inventory fc-flow-wrap:3) ------------------------------------------------
   components.py "tags": true on the lane gives .fc-flow-tags in a plain column .fc-flow-wrap.fc-hf-tags-col (no Salient
   slide-in). These are requirements, not failures: paper cards and a blue kicker, no orange tint, no step chevrons. The
   public-law cite is set whole, with tabular figures and contextual alternates off; "where reasonably possible" carries
   the row's one mark, the pale honesty sweep. js/fc-hf.js drops the four tags onto the Hour 24 card above and fans them
   out into the row. With no script, on any error, under reduced motion and under ?fcqa=, this is the settled state:
   cards in place, the sweep drawn. The start state applies only under .is-armed (set by the script) until the row plays
   (.is-run). The row stays the house gallery (style.css 27b, js/fc-gallery.js): this section styles the kicker and the
   cards' paper and gives their shadow room; it never changes how the track scrolls. Since the pilot repair pass (29 Sep
   2026) the row holds three tags and is no longer a gallery: see the repair pass section at the end of this file. */
body.fc-hf .fc-flow-tags{--tg-blue:#0809FF;--tg-ink:#2A2D34;--tg-sec:#505864;--tg-paper:#FBFBFD;--tg-lip:#E4E8F0;--tg-pale:#DCEBFF}
/* the kicker: blue, the kit's kicker (uppercase, +0.04 em), at the site's own size, like the two lane labels above it */
body.fc-hf .fc-flow-tags .fc-flow-label{color:var(--tg-blue)!important;font-weight:700;letter-spacing:.04em;font-feature-settings:normal;text-transform:uppercase}
/* the cite, verbatim: one unit on its line, tabular figures, contextual alternates off so 117-348 keeps a plain hyphen */
body.fc-hf .fc-flow-tags .fc-hf-cite{white-space:nowrap;font-feature-settings:"calt" 0,"tnum" 1,"lnum" 1;font-variant-numeric:tabular-nums lining-nums}
/* the honesty sweep: a flat pale bar behind the words; box-decoration-break slice runs it through a line break in
   reading order, so on a phone it continues on the next line instead of drawing both lines at once. The side padding is
   taken back by the same negative margin, so the words sit and wrap exactly where plain text would (no wider space
   after the comma) */
body.fc-hf .fc-flow-tags .fc-hf-sweep{padding:.1em .14em .06em;margin:0 -.14em;border-radius:3px;
  background:linear-gradient(var(--tg-pale),var(--tg-pale)) no-repeat 0 0/100% 100%;-webkit-box-decoration-break:slice;box-decoration-break:slice}
/* paper: satin face, a 3 px lip, a hairline and a soft contact shadow (the stock of the clock's cards above). No border:
   the hairline is a shadow, so each card keeps today's box to the pixel and its words wrap exactly as they do today (a
   2 px transparent rim cost a line, 48 px, at 360 px). The gallery's lit card is its own layer (.fc-hf-gal-lit). */
body.fc-hf .fc-flow-tags .fc-flow-cards > li{background:var(--tg-paper)!important;border:0;border-radius:16px;
  box-shadow:0 0 0 1px rgba(203,210,222,.6),0 3px 0 var(--tg-lip),0 12px 16px -12px rgba(22,25,60,.3);opacity:1;transform:none;transition:none!important}
body.fc-hf .fc-flow-tags .fc-flow-cards > li::before,body.fc-hf .fc-flow-tags .fc-flow-cards > li::after{display:none!important;content:none!important}
body.fc-hf .fc-flow-tags .fc-flow-cards > li > b{color:var(--tg-ink)!important}
body.fc-hf .fc-flow-tags .fc-flow-cards > li > span{color:var(--tg-sec)!important}
/* the scroll box clips, so the paper's shadow gets room inside it (8 px over, 20 px under), taken back by negative
   margins of the same size: the cards, the gallery's arrows and everything after stay exactly where they were */
body.fc-hf .fc-flow-tags .fc-flow-cards{padding-top:8px!important;padding-bottom:20px!important;margin-top:-4px!important;margin-bottom:-10px!important}
@media only screen and (max-width:690px){
  body.fc-hf .fc-flow-tags .fc-flow-cards{padding-bottom:18px!important;margin-bottom:-10px!important}
}
/* the start state, only once the script has armed the row, until it plays */
body.fc-hf .fc-flow-tags.is-armed:not(.is-run) .fc-flow-cards > li,body.fc-hf .fc-flow-tags.is-armed:not(.is-run) .fc-flow-label{opacity:0}
body.fc-hf .fc-flow-tags.is-armed:not(.is-run) .fc-hf-sweep{background-size:0% 100%}
/* reduced motion: settled, whatever the script does */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-flow-tags.is-armed .fc-flow-cards > li,body.fc-hf .fc-flow-tags.is-armed .fc-flow-label{opacity:1!important;transform:none!important}
  body.fc-hf .fc-flow-tags.is-armed .fc-hf-sweep{background-size:100% 100%!important}
}
/* ==== end report tags ==== */

/* ==== gallery (live-gallery-report-contents, PILOT-PLAN 7.4) ==== */
/* ---- The four report cards as the house HF gallery (PILOT-PLAN 7.4; inventory gallery:...:card-row:1) ---------------
   What this section owns: the lit card, the card art and the controls. The cards' paper, the blue kicker, the sweep, the
   track's shadow room and the entrance are the report tags' (section "report tags"). components.py "hf": true on the
   report lane puts the art in each card (hf_icons.py: a quiet and an ink copy of each icon; card 4 also carries its two
   destinations on a short loop of the Line). js/fc-gallery.js (its HF branch, body.fc-hf only) arms the track
   (.fc-hf-gal.is-armed), lights one card at a time (.is-lit), draws the Line with nodes in place of the dots and moves
   the camera on the house curve. With no script, or on any error, the cards show finished blue icons and the row scrolls
   by hand as before. Start states apply only under .is-armed. */
body.fc-hf .fc-hf-gal,body.fc-hf .fc-hf-art,body.fc-hf .fc-hf-gal-nav{--g-blue:#0809FF;--g-paper:#FBFBFD;--g-lit:#E8F1FE;--g-pale:#DCEBFF;--g-quiet:#B4BCCA;--g-lift:6px;--g-ease:cubic-bezier(.16,1,.3,1)}
/* the lit card: paperLit (the pale face tint, a 2 px blue rim, a tighter blue-tinted shadow) on a layer under the words,
   so the type never changes and the card's own paper stays as it is; it covers the card's border box (--g-bw, the
   border width, set by the script). The lift (translate) is the script's, so it never waits on an entrance's delays. */
body.fc-hf .fc-hf-gal>li>.fc-hf-gal-lit{position:absolute;inset:calc(var(--g-bw,0px) * -1);z-index:0;display:block;border-radius:inherit;pointer-events:none;font-style:normal;
  background:var(--g-lit);box-shadow:inset 0 0 0 2px var(--g-blue),0 12px 20px -12px rgba(8,9,255,.4);opacity:0;transition:opacity .35s var(--g-ease)}
body.fc-hf .fc-hf-gal>li>b,body.fc-hf .fc-hf-gal>li>span{position:relative;z-index:1}
body.fc-hf .fc-hf-gal>li.is-lit>.fc-hf-gal-lit{opacity:1}
body.fc-hf .fc-hf-gal>li.is-lit{translate:0 calc(var(--g-lift) * -1)}

/* the card art: the icon, and on card 4 the two destinations to its right */
body.fc-hf .fc-hf-art{position:relative;z-index:1;display:flex;align-items:center;gap:14px;height:40px;margin:0 0 12px;font-style:normal}
body.fc-hf .fc-hf-gi{display:block;flex:0 0 40px;width:40px;height:40px;font-style:normal}
body.fc-hf .fc-hf-gi svg,body.fc-hf .fc-hf-dests svg{display:block;width:100%;height:100%;overflow:visible}
body.fc-hf .fc-hf-gi .gi{transform-box:view-box}
body.fc-hf .fc-hf-gi path,body.fc-hf .fc-hf-gi circle,body.fc-hf .fc-hf-gi rect{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
body.fc-hf .fc-hf-gi .q>*{stroke:var(--g-quiet)}
body.fc-hf .fc-hf-gi .k>*{stroke:var(--g-blue)}
body.fc-hf .fc-hf-gi .k>.f{fill:var(--g-pale)}
body.fc-hf .fc-hf-gi .deep{stroke-width:4.2}
body.fc-hf .fc-hf-gi .k>.flash{fill:var(--g-blue);stroke:none}
body.fc-hf .fc-hf-gi .k>.trace-bg{stroke-opacity:.3;stroke-width:4.2}
body.fc-hf .fc-hf-gi .k>.trace{stroke-width:5.2;stroke-dasharray:22 120;stroke-dashoffset:22}
body.fc-hf .fc-hf-dests{display:block;flex:0 0 99px;width:99px;height:33px;margin-left:auto;font-style:normal}
body.fc-hf .fc-hf-dests .lp{fill:none;stroke:var(--g-blue);stroke-width:2.2}
body.fc-hf .fc-hf-dests .nd>circle{fill:var(--g-paper);stroke:var(--g-blue);stroke-width:2.2}
body.fc-hf .fc-hf-dests .gl>*{fill:none;stroke:var(--g-blue);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
body.fc-hf .fc-hf-dests .lb{fill:none;stroke:var(--g-blue);stroke-width:4;stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:0;opacity:0}
body.fc-hf .fc-hf-dests .lb-g{stroke-width:10;stroke-opacity:.2}
/* the bead fades out with the loop when the light moves on (the script also holds it on its path for the fade) */
body.fc-hf .fc-hf-gal.is-armed .fc-hf-dests .lb{transition:opacity .3s ease}

/* armed (the script is running): a card at rest shows its icon quiet; lighting it draws the blue ink on over the quiet
   copy (0.5 s a stroke, the kit's delays at 60 percent) and fades the wash in; the light moving on fades the ink back */
body.fc-hf .fc-hf-gal.is-armed .fc-hf-gi .k{opacity:0;transition:opacity .3s ease}
body.fc-hf .fc-hf-gal.is-armed .fc-hf-gi .k>.dr{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 0s linear .3s}
body.fc-hf .fc-hf-gal.is-armed .fc-hf-gi .k>.f{fill-opacity:0;transition:stroke-dashoffset 0s linear .3s,fill-opacity .3s ease}
body.fc-hf .fc-hf-gal.is-armed .fc-hf-gi .k>.flash{opacity:0;transition:opacity .2s ease}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi .k{opacity:1;transition:none}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi .k>.dr{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--g-ease) calc(var(--dd,0s) * .6)}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi .k>.f{fill-opacity:1;transition:stroke-dashoffset .5s var(--g-ease) calc(var(--dd,0s) * .6),fill-opacity .4s ease .3s}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi .k>.flash{opacity:1;transition:opacity .25s ease .5s}
/* the destinations at rest: quiet; lit: the Line's blue, and a bead of light runs round the loop */
body.fc-hf .fc-hf-gal.is-armed .fc-hf-dests .lp,body.fc-hf .fc-hf-gal.is-armed .fc-hf-dests .nd>circle,body.fc-hf .fc-hf-gal.is-armed .fc-hf-dests .gl>*{stroke:var(--g-quiet);transition:stroke .3s ease}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-dests .lp,body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-dests .nd>circle,
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-dests .gl>*{stroke:var(--g-blue);transition:stroke .35s ease .35s}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-dests .lb{opacity:1;transition:opacity .3s ease .6s;animation:fcHfGalLoop 2.4s linear .6s infinite}
@keyframes fcHfGalLoop{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}

/* the lit icon's idle (the kit's: rotation within 6 degrees, a bob within 4 px, 3 to 5 s), only while the row is on screen.
   When the light moves on, the script eases the pose back to rest in step with the ink's fade (no snap). */
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi .gi{animation:fcHfGalBob 4.2s ease-in-out .9s infinite}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi-person .gi{animation-name:fcHfGalSway;animation-duration:4.6s}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi-heart .gi{animation-name:fcHfGalBeat;animation-duration:3.6s}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi-heart .k>.trace{animation:fcHfGalTrace 1.8s linear .9s infinite}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi-photo .k>.flash{animation:fcHfGalFlash 4.2s ease-in-out 1.2s infinite}
body.fc-hf .fc-hf-gal.is-armed>li.is-lit .fc-hf-gi-phone .gi{animation-name:fcHfGalRock;animation-duration:4s}
@keyframes fcHfGalBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-3deg)}}
@keyframes fcHfGalSway{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}70%{transform:rotate(3deg)}}
@keyframes fcHfGalBeat{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.05)}20%{transform:scale(1)}30%{transform:scale(1.03)}}
@keyframes fcHfGalRock{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(4deg) translateY(-2px)}}
@keyframes fcHfGalTrace{from{stroke-dashoffset:22}to{stroke-dashoffset:-100}}
@keyframes fcHfGalFlash{0%,70%,100%{opacity:1}80%{opacity:.25}90%{opacity:1}}
body.fc-hf .fc-hf-gal:not(.is-live) .fc-hf-gi .gi,body.fc-hf .fc-hf-gal:not(.is-live) .fc-hf-gi .k>*,body.fc-hf .fc-hf-gal:not(.is-live) .fc-hf-dests .lb{animation-play-state:paused}

/* the camera move (the script tweens scrollLeft on the house curve): snap and the smooth default are off while it runs */
body.fc-hf .fc-hf-gal.is-tw{scroll-snap-type:none!important;scroll-behavior:auto!important}

/* the controls: the arrows are 44 px paper discs on every width (this overrides the site's 40 px phone rule); the dots
   become a small Line with a node per card, lit up to the lit card.
   A node ahead of the light keeps a 3:1 ring (#858E9E on the page's #F8F8F8): it is a button. */
body.fc-hf .fc-hf-gal-nav{gap:14px;margin:8px 0 10px}
body.fc-hf .fc-hf-gal-nav .fc-gal-btn{width:44px;height:44px;background:var(--g-paper);color:var(--g-blue);box-shadow:0 0 0 1px rgba(203,210,222,.7),0 3px 0 #E4E8F0,0 12px 20px -14px rgba(22,25,60,.35)}
body.fc-hf .fc-hf-gal-nav .fc-gal-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(203,210,222,.7),0 3px 0 #E4E8F0,0 16px 22px -14px rgba(22,25,60,.38)}
body.fc-hf .fc-hf-gal-nav .fc-gal-btn:disabled{opacity:.35;transform:none}
body.fc-hf .fc-hf-gal-line{position:relative;display:flex;gap:4px;align-items:center;height:24px}
body.fc-hf .fc-hf-gal-line .fc-gal-dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:transparent!important;transform:none!important}
body.fc-hf .fc-hf-gal-line .fc-gal-dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--g-paper);box-shadow:0 0 0 2px #858E9E;transition:background .3s ease,box-shadow .3s ease,transform .3s var(--g-ease)}
body.fc-hf .fc-hf-gal-line .fc-gal-dot.is-past::before,body.fc-hf .fc-hf-gal-line .fc-gal-dot:hover::before{box-shadow:0 0 0 2px var(--g-blue)}
body.fc-hf .fc-hf-gal-line .fc-gal-dot.is-on::before{background:var(--g-blue);box-shadow:0 0 0 2px var(--g-blue),0 0 0 6px rgba(8,9,255,.14);transform:scale(1.2)}
body.fc-hf .fc-hf-gal-line .fc-gal-dot:focus-visible{outline:2px solid var(--g-blue);outline-offset:1px}
body.fc-hf .fc-hf-gal-line>.fc-hf-gl-track,body.fc-hf .fc-hf-gal-line>.fc-hf-gl-fill{position:absolute;left:12px;top:11px;width:calc(100% - 24px);height:2px;border-radius:1px;pointer-events:none;font-style:normal}
body.fc-hf .fc-hf-gal-line>.fc-hf-gl-track{background:#DFE4EF}
body.fc-hf .fc-hf-gal-line>.fc-hf-gl-fill{background:var(--g-blue);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform var(--gd,.6s) cubic-bezier(.45,0,.2,1)}
body.fc-hf .fc-hf-gal-line>.fc-hf-gl-bead{position:absolute;left:12px;top:12px;z-index:2;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none;font-style:normal;
  background:var(--g-blue);box-shadow:0 0 0 4px rgba(8,9,255,.16),0 0 10px 2px rgba(8,9,255,.35);opacity:0}

/* phones: 70 percent of the desktop travel, and a slightly smaller icon */
@media only screen and (max-width:690px){
  body.fc-hf .fc-hf-gal,body.fc-hf .fc-hf-art{--g-lift:4px}
  body.fc-hf .fc-hf-art{height:36px;margin-bottom:10px}
  body.fc-hf .fc-hf-gi{flex-basis:36px;width:36px;height:36px}
  body.fc-hf .fc-hf-dests{flex-basis:90px;width:90px;height:30px}
}
/* reduced motion and ?fcqa= (.fc-hf-still, set by the script): the lit card changes color without moving, icons are drawn
   (the lit one blue, the rest quiet), no draw-on, no bead, no loop pulse, no camera move. The lit icon keeps its idle under
   reduced motion (D15, Gavin's standing exception: the icons move for everyone). Only ?fcqa= freezes the idle, with its
   own class (.fc-hf-frozen, set by the script for ?fcqa= alone). */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-hf-gal>li.is-lit{translate:none}
  body.fc-hf .fc-hf-gal>li>.fc-hf-gal-lit,body.fc-hf .fc-hf-gal-line>.fc-hf-gl-fill,body.fc-hf .fc-hf-gal-line .fc-gal-dot::before{transition:none!important}
  body.fc-hf .fc-hf-gal.is-armed .fc-hf-gi .k,body.fc-hf .fc-hf-gal.is-armed .fc-hf-gi .k>*{transition:none!important}
  body.fc-hf .fc-hf-gal.is-armed .fc-hf-gi .k>.dr{stroke-dashoffset:0!important}
  body.fc-hf .fc-hf-gal.is-armed .fc-hf-gi .k>.f{fill-opacity:1!important}
  body.fc-hf .fc-hf-gal.is-armed .fc-hf-dests .lp,body.fc-hf .fc-hf-gal.is-armed .fc-hf-dests .nd>circle,body.fc-hf .fc-hf-gal.is-armed .fc-hf-dests .gl>*{transition:none!important}
  body.fc-hf .fc-hf-gal-line>.fc-hf-gl-bead,body.fc-hf .fc-hf-dests .lb{display:none!important}
  body.fc-hf .fc-hf-gal-nav .fc-gal-btn{transition:none!important}
  body.fc-hf .fc-hf-gal-nav .fc-gal-btn:hover{transform:none}
}
body.fc-hf .fc-hf-gal.fc-hf-still>li.is-lit{translate:none}
body.fc-hf .fc-hf-gal.fc-hf-still>li>.fc-hf-gal-lit,body.fc-hf .fc-hf-gal.fc-hf-still .fc-hf-dests *{transition:none!important;animation:none!important}
body.fc-hf .fc-hf-gal.fc-hf-still .fc-hf-gi .k,body.fc-hf .fc-hf-gal.fc-hf-still .fc-hf-gi .k>*{transition:none!important}
body.fc-hf .fc-hf-gal.fc-hf-frozen .fc-hf-gi .gi,body.fc-hf .fc-hf-gal.fc-hf-frozen .fc-hf-gi .k>*{animation:none!important}
body.fc-hf .fc-hf-gal.fc-hf-still .fc-hf-gi .k>.dr{stroke-dashoffset:0!important}
body.fc-hf .fc-hf-gal.fc-hf-still .fc-hf-gi .k>.f{fill-opacity:1!important}
body.fc-hf .fc-hf-gal.fc-hf-still .fc-hf-dests .lb{display:none!important}
body.fc-hf .fc-hf-gal-nav.fc-hf-still .fc-hf-gl-fill,body.fc-hf .fc-hf-gal-nav.fc-hf-still .fc-gal-dot::before{transition:none!important}
body.fc-hf .fc-hf-gal-nav.fc-hf-still .fc-hf-gl-bead{display:none!important}
/* ==== end gallery ==== */

/* ==== gavel icon (live-icon-gavel, PILOT-PLAN 7.5) ==== */
/* ---- The gavel icon (PILOT-PLAN 7.5; inventory lottie-icon:gavel) ------------------------------------------------------
   Markup: icons.py icon_hf('gavel'), placed by components.py timeline_block ("hf": true) in the timeline's side column,
   beside "Signed in 2014, binding since 2016", on the same satin paper chip as the clock. It replaces the Lottie gavel (no
   player on this page, D9): the kit's po-icons gavel as one inline SVG, FComply blue #0809FF, the head lit with the pale
   wash #DCEBFF. The play, once it is half in view (and on the clock's beat when the clock sits beside it, js/fc-hf.js):
   the strokes draw on in 0.4 s and the head fills by 0.5 s; a short anticipation lift (9 degrees back about the handle
   end, 0.2 s); one strike (0.12 s, accelerating), whose heel meets the block exactly (25.34 degrees: the head's stroke
   touches the block's, never crosses it); the block gives by one unit as the head follows it (0.06 s) and comes back
   up with the head resting on it (0.18 s); a beat of rest; then the gavel lifts back to its drawn pose on the house
   settle curve. No step of it passes its end value, so there is no bounce and no overshoot. Then a gentle idle: the
   gavel breathes 3 degrees each way about the handle end over 4.2 s and the icon lifts 4 units (about 2 px) over 3.2 s,
   paused off screen and in a hidden tab. Every start state applies only under .is-armed, which js/fc-hf.js sets, so
   with no script, on any error, in print and under ?fcqa= the icon is the finished drawing, still. Reduced motion: the
   icons move for everyone at Gavin's request (D15), so the play stays and the idle is halved. A closed fold resets it;
   it plays again on opening. The chip and the shared icon rules are the clock's (above); the paint the drawing needs is
   repeated here for the gavel alone, so it never renders as a black shape if that section changes. */
body.fc-hf .fc-hfi-gavel{display:block;position:relative;width:100%;aspect-ratio:1;--hfi-ink:#0809FF;--hfi-wash:#DCEBFF}
body.fc-hf .fc-tl-icon-art .fc-hfi-gavel{width:64%}
body.fc-hf .fc-hfi-gavel .fc-hfi-svg{display:block;width:100%;height:100%;overflow:visible}
body.fc-hf .fc-hfi-gavel .fc-hfi-svg path{fill:none;stroke:var(--hfi-ink);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
body.fc-hf .fc-hfi-gavel .fc-hfi-svg .f{fill:var(--hfi-wash)}
body.fc-hf .fc-hfi-gavel .fc-hfi-svg g{transform-box:view-box}
/* the handle end (92, 96): the wrist the gavel turns about, for the strike and the breathing */
body.fc-hf .fc-hfi-gavel .fc-hfi-gv-swing,body.fc-hf .fc-hfi-gavel .fc-hfi-gv-rock{transform-origin:92px 96px}
body.fc-hf .fc-hfi-gavel .fc-hfi-gv-block{transform-origin:40px 100px}

/* start state, only once the script has armed the icon */
body.fc-hf .fc-hfi-gavel.is-armed .dr{stroke-dasharray:100 101;stroke-dashoffset:100}
body.fc-hf .fc-hfi-gavel.is-armed .f{fill-opacity:0}
/* the play (seconds from the trigger): draw 0 to 0.4 (fill to 0.5), lift 0.4 to 0.6, strike 0.62 to 0.74 (contact),
   give 0.74 to 0.8, back up 0.8 to 0.98, rest to 1.1, lift back 1.1 to 1.7, the idle from 2.2 */
body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-base{animation:fcHfiGvDraw .24s cubic-bezier(.45,0,.55,1) both}
body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-head{animation:fcHfiGvDraw .3s cubic-bezier(.45,0,.55,1) .06s both,fcHfiGvFill .25s cubic-bezier(.16,1,.3,1) .25s both}
body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-handle{animation:fcHfiGvDraw .26s cubic-bezier(.45,0,.55,1) .12s both}
body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-bands{animation:fcHfiGvDraw .22s cubic-bezier(.45,0,.55,1) .18s both}
body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-swing{animation:fcHfiGvSwing 1.3s linear .4s both}
body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-block{animation:fcHfiGvGive .24s linear .74s both}
body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-rock{animation:fcHfiGvRock 4.2s ease-in-out 2.2s infinite}
body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-bob{animation:fcHfiGvBob 3.2s ease-in-out 2.2s infinite}
/* off screen or in a hidden tab: everything holds where it is */
body.fc-hf .fc-hfi-gavel.is-play:not(.is-on) *{animation-play-state:paused!important}
@keyframes fcHfiGvDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fcHfiGvFill{from{fill-opacity:0}to{fill-opacity:1}}
/* the swing, 0.4 to 1.7 s; negative turns the head down onto the block. Each step eases into its end value and none
   passes it: lift (in-out), hold, strike (accelerating into the contact), give (decelerating, in step with the block),
   back up (in-out, in step with the block, so the head rests on it), rest, lift back (the house settle curve) */
@keyframes fcHfiGvSwing{
  0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  15.385%{transform:rotate(9deg);animation-timing-function:linear}
  16.923%{transform:rotate(9deg);animation-timing-function:cubic-bezier(.32,0,.67,0)}
  26.154%{transform:rotate(-25.34deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}
  30.769%{transform:rotate(-26.46deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  44.615%{transform:rotate(-25.34deg);animation-timing-function:linear}
  53.846%{transform:rotate(-25.34deg);animation-timing-function:cubic-bezier(.45,0,.2,1)}
  100%{transform:rotate(0deg)}}
/* the block, 0.74 to 0.98 s: down one unit as the head lands, and back; it never rises above its place */
@keyframes fcHfiGvGive{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.33,1,.68,1)}
  25%{transform:translateY(1px);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:translateY(0)}}
/* the idle: every turn and every lift starts and ends at rest, so nothing jumps where a cycle joins the next */
@keyframes fcHfiGvRock{0%{transform:rotate(0deg)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0deg)}}
@keyframes fcHfiGvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes fcHfiGvRockRm{0%{transform:rotate(0deg)}25%{transform:rotate(1.5deg)}75%{transform:rotate(-1.5deg)}100%{transform:rotate(0deg)}}
@keyframes fcHfiGvBobRm{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-rock{animation-name:fcHfiGvRockRm}
  body.fc-hf .fc-hfi-gavel.is-play .fc-hfi-gv-bob{animation-name:fcHfiGvBobRm}
}
@media print{
  body.fc-hf .fc-hfi-gavel *{animation:none!important}
  body.fc-hf .fc-hfi-gavel .dr{stroke-dashoffset:0!important}
  body.fc-hf .fc-hfi-gavel .f{fill-opacity:1!important}
}
@media (forced-colors:active){
  body.fc-hf .fc-hfi-gavel .fc-hfi-svg path{stroke:CanvasText}
  body.fc-hf .fc-hfi-gavel .fc-hfi-svg .f{fill:Canvas}
}
/* ==== end gavel icon ==== */

/* ==== pill marks (live-pill-mark-check, PILOT-PLAN 7.6) ==== */
/* ---- The pill marks and the glass chips (PILOT-PLAN 7.6; inventory css-icon:check, and css-icon:pin once its pills opt in)
   Markup: build_pages.py pill_html with a pill "meaning" in the page source (icons.py pill_mark_hf): the pill gets
   .fc-hf-pill and data-mark, and its round slot i.fc-hfp holds one flat 120x120 SVG that fills the slot. The mark follows
   what the line says (D9): the seal (a blue satin disc with a white check) on a fix, the coral hollow ring (the seal
   emptied) on a problem, and a quiet ink document mark (a page in #2A2D34 on a lav disc) on a statute or a date.
   The old bright check blue is gone. The chip: from 691 px up the floating card becomes glass (a 0.88 white backing so the words never
   depend on the photograph, a frost behind it, a hairline and a soft contact shadow); the size, padding, type and
   placement are today's, so nothing moves and no height changes. Under 691 px the pills stay what they are there, a
   caption under the photograph with no card, and only the mark changes.
   The play, once the pill is half in view and its column has faded in: the mark draws on in 0.5 s (strokes on power2.out;
   the seal's disc fills from the empty color and settles from 92 percent on the house curve, which never passes 1, so
   nothing overshoots), then a gentle idle: the check and the page rock 3 degrees each way over 4.8 s, and one soft glint
   crosses the disc every 8 s (each pill on its own phase). Paused off screen and in a hidden tab. Every start state
   applies only under .is-armed, which js/fc-hf.js sets, so with no script, on any error, in print and under ?fcqa= the
   mark is simply finished and still. Reduced motion: the icons move for everyone at Gavin's request (D15), so the draw
   stays, the rock is halved and the glint (a sweep) is off. A closed fold resets the marks inside it; they draw again
   when it opens. */
body.fc-hf .fc-pill.fc-hf-pill{--hfp-blue:#0809FF;--hfp-deep:#0506B8;--hfp-ink:#2A2D34;--hfp-coral:#F26430;--hfp-lav:#EAEAFF;--hfp-empty:#DFE4EF;
  --hfp-tick:10;--hfp-ringw:7;--hfp-docw:4.6}
@media only screen and (min-width:691px){
  body.fc-hf .fc-pill.fc-hf-pill{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);color:var(--hfp-ink);
    box-shadow:inset 0 0 0 1px rgba(203,210,222,.72),inset 0 1px 0 rgba(255,255,255,.95),0 24px 48px -24px rgba(22,25,60,.34),0 2px 6px rgba(22,25,60,.06)}
}
@media only screen and (max-width:690px){
  body.fc-hf .fc-pill.fc-hf-pill{--hfp-tick:11;--hfp-ringw:9;--hfp-docw:5.6}
}
/* the round slot: its size is today's (46, 38 or 30 px from style.css); the mark's SVG fills it */
body.fc-hf .fc-pill i.fc-hfp{position:relative;display:block;padding:0;overflow:hidden;isolation:isolate;transform-origin:50% 50%}
body.fc-hf .fc-pill i.fc-hfp svg.fc-hfp-svg{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;overflow:visible}
body.fc-hf .fc-hfp-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
body.fc-hf .fc-hfp-svg g{transform-box:view-box}
body.fc-hf .fc-hfp-rock{transform-origin:60px 60px}
/* the discs, as materials: blue satin (the seal), white satin (the ring), lav (the document) */
body.fc-hf .fc-pill i.fc-hfp-seal{background:radial-gradient(circle at 32% 26%,#4B4CFF 0%,#1C1DFF 36%,#0809FF 62%,#0607D2 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 3px rgba(3,4,122,.34),0 4px 9px -4px rgba(8,9,255,.55)}
body.fc-hf .fc-pill i.fc-hfp-ring{background:radial-gradient(circle at 34% 28%,#FFFFFF 0%,#FFFFFF 46%,#F2F4F9 100%);
  box-shadow:inset 0 0 0 1px rgba(203,210,222,.8),0 3px 8px -4px rgba(22,25,60,.24)}
body.fc-hf .fc-pill i.fc-hfp-doc{background:var(--hfp-lav);box-shadow:inset 0 0 0 1px rgba(8,9,255,.06)}
/* the seal's empty face (a veil the fill lifts off) and the glint, both clipped to the disc */
body.fc-hf .fc-pill i.fc-hfp::before,body.fc-hf .fc-pill i.fc-hfp::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
body.fc-hf .fc-pill i.fc-hfp::before{z-index:1;background:#E4E8F1;opacity:0}
body.fc-hf .fc-pill i.fc-hfp-seal::before{box-shadow:inset 0 0 0 1px rgba(203,210,222,.8)}
body.fc-hf .fc-pill i.fc-hfp:not(.fc-hfp-seal)::before{display:none}
body.fc-hf .fc-pill i.fc-hfp::after{z-index:3;border-radius:0;inset:-20% auto -20% 0;width:46%;opacity:0;transform:translateX(-120%) rotate(18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.62) 50%,rgba(255,255,255,0))}
body.fc-hf .fc-pill i.fc-hfp-seal::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42) 50%,rgba(255,255,255,0))}
/* the strokes */
body.fc-hf .fc-hfp-svg .fc-hfp-tick{stroke:#FFFFFF;stroke-width:var(--hfp-tick)}
body.fc-hf .fc-hfp-seal .fc-hfp-ghost{stroke:#C9CFDD;stroke-width:var(--hfp-tick)}
body.fc-hf .fc-hfp-svg .fc-hfp-ring{stroke:var(--hfp-coral);stroke-width:var(--hfp-ringw)}
body.fc-hf .fc-hfp-ring .fc-hfp-ghost{stroke:var(--hfp-empty);stroke-width:var(--hfp-ringw)}
body.fc-hf .fc-hfp-doc .fc-hfp-svg path{stroke:var(--hfp-ink);stroke-width:var(--hfp-docw)}
body.fc-hf .fc-hfp-doc .fc-hfp-svg .fc-hfp-page{fill:#FFFFFF}
body.fc-hf .fc-hfp-doc .fc-hfp-svg .fc-hfp-ghost{stroke:#D3D8E6;fill:rgba(255,255,255,.5)}
/* the ghost shows only before the mark draws (armed); finished, the drawn stroke stands alone */
body.fc-hf .fc-hfp-svg .fc-hfp-ghost{opacity:0}
body.fc-hf .fc-hf-pill.is-armed .fc-hfp-svg .fc-hfp-ghost{opacity:1}
body.fc-hf .fc-hf-pill.is-armed.is-play .fc-hfp-svg .fc-hfp-ghost{animation:fcHfpHide .12s linear .5s both}
/* the seal's ghost check leaves on the first frame of the play, the frame its white check starts drawing, so no gray
   stroke ever sits on the blue and the check never shows finished before it draws (repair 28 Sep: a 0.1 s fade here
   left a gray check on the bluing disc, then the white one drew from nothing) */
body.fc-hf .fc-hf-pill.is-armed.is-play .fc-hfp-seal .fc-hfp-svg .fc-hfp-ghost{animation:none;opacity:0}

/* start state, only once the script has armed the pill */
body.fc-hf .fc-hf-pill.is-armed .fc-hfp .dr{stroke-dasharray:100 101;stroke-dashoffset:100}
body.fc-hf .fc-hf-pill.is-armed .fc-hfp .f{fill-opacity:0}
body.fc-hf .fc-hf-pill.is-armed i.fc-hfp-seal{transform:scale(.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 3px rgba(3,4,122,0),0 3px 8px -4px rgba(22,25,60,.22)}
body.fc-hf .fc-hf-pill.is-armed i.fc-hfp-seal::before{opacity:1}
/* the play (seconds from the trigger): everything drawn by 0.5; the idle from 0.6, the first glint from 1.2 plus the phase */
body.fc-hf .fc-hf-pill.is-play i.fc-hfp-seal{animation:fcHfpSettle .45s cubic-bezier(.16,1,.3,1) both}
body.fc-hf .fc-hf-pill.is-play i.fc-hfp-seal::before{animation:fcHfpLift .3s cubic-bezier(.16,1,.3,1) both}
body.fc-hf .fc-hf-pill.is-play .fc-hfp-tick{animation:fcHfpDraw .5s cubic-bezier(.215,.61,.355,1) both}
body.fc-hf .fc-hf-pill.is-play .fc-hfp-ring{animation:fcHfpDraw .5s cubic-bezier(.215,.61,.355,1) both}
body.fc-hf .fc-hf-pill.is-play .fc-hfp-page{animation:fcHfpDraw .3s cubic-bezier(.215,.61,.355,1) both,fcHfpFill .12s linear .18s both}
body.fc-hf .fc-hf-pill.is-play .fc-hfp-corner{animation:fcHfpDraw .14s cubic-bezier(.215,.61,.355,1) .2s both}
body.fc-hf .fc-hf-pill.is-play .fc-hfp-l1{animation:fcHfpDraw .12s cubic-bezier(.215,.61,.355,1) .28s both}
body.fc-hf .fc-hf-pill.is-play .fc-hfp-l2{animation:fcHfpDraw .12s cubic-bezier(.215,.61,.355,1) .34s both}
body.fc-hf .fc-hf-pill.is-play .fc-hfp-l3{animation:fcHfpDraw .1s cubic-bezier(.215,.61,.355,1) .4s both}
body.fc-hf .fc-hf-pill.is-play .fc-hfp-seal .fc-hfp-rock,body.fc-hf .fc-hf-pill.is-play .fc-hfp-doc .fc-hfp-rock{animation:fcHfpRock 4.8s ease-in-out .6s infinite}
body.fc-hf .fc-hf-pill.is-play i.fc-hfp::after{animation:fcHfpGlint 8s linear calc(1.2s + var(--hfp-phase,0s)) infinite}
/* off screen or in a hidden tab: everything holds where it is */
body.fc-hf .fc-hf-pill.is-play:not(.is-on) .fc-hfp,body.fc-hf .fc-hf-pill.is-play:not(.is-on) .fc-hfp *,
body.fc-hf .fc-hf-pill.is-play:not(.is-on) .fc-hfp::before,body.fc-hf .fc-hf-pill.is-play:not(.is-on) .fc-hfp::after{animation-play-state:paused!important}
@keyframes fcHfpDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fcHfpFill{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes fcHfpHide{from{opacity:1}to{opacity:0}}
@keyframes fcHfpLift{from{opacity:1}to{opacity:0}}
/* the seal settles as it fills: its contact shadow turns from the paper's gray to the seal's blue */
@keyframes fcHfpSettle{from{transform:scale(.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 3px rgba(3,4,122,0),0 3px 8px -4px rgba(22,25,60,.22)}
  to{transform:scale(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 3px rgba(3,4,122,.34),0 4px 9px -4px rgba(8,9,255,.55)}}
/* the idle: every rock starts and ends at rest, so nothing jumps where a cycle joins the next */
@keyframes fcHfpRock{0%{transform:rotate(0deg)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0deg)}}
@keyframes fcHfpRockRm{0%{transform:rotate(0deg)}25%{transform:rotate(1.5deg)}75%{transform:rotate(-1.5deg)}100%{transform:rotate(0deg)}}
/* one pass of light in 0.9 s, then 7.1 s of rest, off the disc */
@keyframes fcHfpGlint{0%{opacity:0;transform:translateX(-120%) rotate(18deg)}1.5%{opacity:1}9.75%{opacity:1}11.25%{opacity:0;transform:translateX(330%) rotate(18deg)}
  11.26%,100%{opacity:0;transform:translateX(-120%) rotate(18deg)}}
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-hf-pill.is-play .fc-hfp-seal .fc-hfp-rock,body.fc-hf .fc-hf-pill.is-play .fc-hfp-doc .fc-hfp-rock{animation-name:fcHfpRockRm}
  body.fc-hf .fc-hf-pill.is-play i.fc-hfp::after{animation:none}
}
@media print{
  body.fc-hf .fc-hf-pill .fc-hfp,body.fc-hf .fc-hf-pill .fc-hfp *,body.fc-hf .fc-hf-pill .fc-hfp::before,body.fc-hf .fc-hf-pill .fc-hfp::after{animation:none!important}
  body.fc-hf .fc-hf-pill .fc-hfp .dr{stroke-dashoffset:0!important}
  body.fc-hf .fc-hf-pill .fc-hfp .f{fill-opacity:1!important}
  body.fc-hf .fc-hf-pill i.fc-hfp{transform:none!important}
  body.fc-hf .fc-hf-pill i.fc-hfp::before,body.fc-hf .fc-hf-pill i.fc-hfp::after,body.fc-hf .fc-hf-pill .fc-hfp-ghost{opacity:0!important}
}
@media (forced-colors:active){
  body.fc-hf .fc-hfp-svg path{stroke:CanvasText!important}
  body.fc-hf .fc-hfp-doc .fc-hfp-svg .fc-hfp-page{fill:Canvas}
  body.fc-hf .fc-pill i.fc-hfp::after{display:none}
}
/* ==== end pill marks ==== */

/* ==== headline mark (live-headline-mark, PILOT-PLAN 7.7) ==== */
/* The headline mark (PILOT-PLAN 7.7; inventory text-effect:scribble squiggle-underline): the house underline under the
   H1's stressed words, in place of Salient's squiggle. js/fc-hf.js builds one arc per line fragment in svg.fc-hm-layer,
   the first child of the .nectar-highlighted-text wrapper (the h1 keeps z-index 10 above it). The three numbers
   are the plan's and the film's (PILOT-PLAN 7.7, STYLE.md 7): a 15 px arc, a 6 px stroke, turned -2 degrees, at every
   width; the script reads them from here. --fc-hm-ref is the option held for Gavin (repair pass, 28 Sep): set it to 41
   and a title smaller than 41 px (tablet and phone, 34 to 35 px) scales the arc and stroke with its type (5 px and
   12.4 px on the phone title). Until he rules, 0: the plan's figures everywhere. */
body.fc-hf .nectar-highlighted-text[data-style="scribble"]{--fc-hm-blue:#0809FF;--fc-hm-coral:#F26430;--fc-hm-sag:15px;--fc-hm-stroke:6px;--fc-hm-tilt:-2;--fc-hm-ref:0}
/* Salient's squiggle is retired on this page, and so is the invisible background-size transition its highlight still
   ran on the em (the scribble style has no background image), so nothing animates there under reduced motion */
body.fc-hf .nectar-highlighted-text[data-style="scribble"] em > svg.nectar-scribble{display:none!important}
body.fc-hf .nectar-highlighted-text[data-style="scribble"] h1 em{background-size:0 0!important}
/* the layer: the wrapper's own box, in its own pixels; style.css squashes every svg in the wrapper (scaleY .55), so the
   transform is reset here */
body.fc-hf .nectar-highlighted-text > svg.fc-hm-layer{position:absolute;left:0;top:0;z-index:0;display:block;margin:0;padding:0;border:0;
  overflow:visible;pointer-events:none;transform:none!important;transform-origin:0 0}
body.fc-hf .nectar-highlighted-text > svg.fc-hm-layer path{fill:none;stroke:var(--fc-hm-blue);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 102}
body.fc-hf .nectar-highlighted-text > svg.fc-hm-layer.is-coral path{stroke:var(--fc-hm-coral)}
/* the static arc: the house underline, simply there, whenever this section's script has not claimed the title
   (.fc-hm-on is set by it alone): no JavaScript, js/fc-hf.js not loaded, an uncaught error anywhere earlier in the shared
   file, or an error in this section (fc-hm-fallback). It is not shown while the word rise holds the title's words back
   (.is-armed, .is-run on the h1), so it never stands under words that have not arrived; before any script runs, the
   title column is still at Salient's opacity 0. With the script running, .fc-hm-on is set in the same task that arms
   the rise, so this never paints. */
body.fc-hf .nectar-highlighted-text[data-style="scribble"]:not(.fc-hm-on) h1 em{position:relative}
body.fc-hf .nectar-highlighted-text[data-style="scribble"]:not(.fc-hm-on) h1:not(.is-armed):not(.is-run) em::after{content:"";position:absolute;left:-5px;right:-5px;top:calc(100% - .34em);height:30px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5 C 48 24.5, 104 26.5, 197 4' fill='none' stroke='%230809FF' stroke-width='6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
/* ==== end headline mark ==== */

/* ==== title strip kicker (live-reveal-title-strip, PILOT-PLAN 7.8 R3) ==== */
/* ---- The timeline's two section labels, "The statute" and "The amendment" (PILOT-PLAN 7.8, R3; inventory
   animated-title:color-strip-reveal) ---------------------------------------------------------------------------------
   Today a blue strip sweeps across and a white label slides out from behind it, in a box. Here the label is the film's
   kicker (STYLE.md 6, SHOWREEL.md 3.3): uppercase, Plus Jakarta Sans 600, +0.04 em, at the site's own meta size, blue for
   the statute and the legend's orange ink for the amendment (the colors are the timeline section's, P4). No box, no strip.
   It enters as one unit: opacity 0 to 1 with a 0.3 s tracking settle from +0.10 em to +0.04 em on the film's reading
   curve; no rise, no blur, no overshoot, never letter by letter.
   Markup: components.py timeline_block with "hf": true writes <p class="fc-hf-tl-kicker"> (no Salient animated title).
   Trigger: the timeline section's own (js/fc-hf.js adds .hf-tl-in to .fc-tl-label as it enters the view, or after 0.6 s
   on screen; closing the fold takes it away, so opening the fold plays it again). This section supersedes the timeline
   section's kicker tracking (+0.14 to +0.06 em, opacity over 0.5 s): the start state is set without a transition, so the
   label never fades out when the block arms, and only the entrance moves. The line box stays the timeline's 17.47 px
   (0.84rem at 1.3), so nothing under the label moves when its size goes onto the site's scale.
   No JavaScript, a script error, ?fcqa= or reduced motion: the block never arms, so the label is settled. The media
   query holds it settled if reduced motion is switched on after the page armed. */
body.fc-hf .fc-tl-col.fc-hf-tl .fc-tl-label .fc-hf-tl-kicker{font-size:var(--t-meta,13px);line-height:1.092rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;font-feature-settings:normal;font-variant-caps:normal;background:none;transform:none}
body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-tl-label:not(.hf-tl-in) .fc-hf-tl-kicker{opacity:0;letter-spacing:.1em;transition:none}
body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-tl-label.hf-tl-in .fc-hf-tl-kicker{opacity:1;letter-spacing:.04em;
  transition:opacity .3s cubic-bezier(.16,1,.3,1),letter-spacing .3s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-tl-col.fc-hf-tl .fc-tl-label .fc-hf-tl-kicker{opacity:1!important;letter-spacing:.04em!important;transition:none!important}
}
/* ==== end title strip kicker ==== */

/* ==== reveal from right (live-reveal-from-right, PILOT-PLAN 7.8) ==== */
/* ---- The three timeline columns: fade-in-from-right becomes R4, items rise on the Line (PILOT-PLAN 7.8) --------------
   Inventory reveal:fade-in-from-right: the 2014, 2016 and 2023 columns under "From a one-time report to an ongoing duty".
   Today they start transparent 45 px to the right and slide left for 1.4 s (easeOutQuart); in the film the right to
   left direction means one thing only ("starts over"), so here nothing slides. components.py timeline_block with
   "hf": true writes the columns with no Salient entrance, and the timeline section above gives each one its rise: the
   paper slab rises 16 px (11 px on a phone) from the floor as its contact shadow grows, the text 90 ms after it, 0.5 s on
   cubic-bezier(0.16,1,0.3,1), no overshoot, ending at opacity 1 with no transform.
   This section adds R4's one missing rule, "90 ms apart": pieces of the timeline that enter in the same moment (the fold
   opening with the kicker and 2014 in view, a tall window, a jump down the page) land one after another in reading order
   instead of together. js/fc-hf.js sets --hf-rv-d (the wait, 0 to 450 ms) on each column as it enters; the delays below
   add it to the timeline section's own offsets (and to the kicker's R3 entrance, whose recipe stays the title strip
   section's). Only transition-delay is set here, one class more specific than any other section's rule for the same
   elements, so a later `transition:` shorthand elsewhere cannot silently drop the spacing. The spacing is under .hf-rv-r,
   which the script sets, and under .hf-tl-armed, so with no script, reduced motion or ?fcqa= it never applies and every
   piece is simply there; the reduced-motion block at the end settles the columns if the setting changes after the page
   armed. */
body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed.hf-rv-r .fc-tl-label.hf-tl-in .fc-hf-tl-kicker,
body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed.hf-rv-r .fc-hf-tl-item.hf-tl-in .fc-hf-tl-span,
body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed.hf-rv-r .fc-hf-tl-item.hf-tl-in .fc-hf-slab,
body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed.hf-rv-r .fc-hf-tl-end.hf-tl-in .fc-tl-pattern{transition-delay:var(--hf-rv-d,0ms)}
body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed.hf-rv-r .fc-hf-tl-item.hf-tl-in .wpb_text_column,
body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed.hf-rv-r .fc-hf-tl-span-end.hf-tl-in .fc-hf-slab{transition-delay:calc(var(--hf-rv-d,0ms) + 90ms)}
body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed.hf-rv-r .fc-hf-tl-span-end.hf-tl-in .wpb_text_column{transition-delay:calc(var(--hf-rv-d,0ms) + 180ms)}
/* reduced motion (PILOT-PLAN 7.8, "reduced motion lands settled"). Set at load, the timeline never arms and nothing here
   runs. Switched on after the page armed, the timeline's start states (opacity 0, 16 px down, the small contact shadow)
   and its 0.5 s rises would still play as the fold opens or a column enters (the 28 Sep gate saw 2014 and 2016 rise
   together, 8 px down at opacity 0.49 after 60 ms). So here every piece this section times is simply there: the three
   columns' slab, bracket label and text, and the glass panel, at opacity 1 with no transform and their resting shadow
   (restated from the timeline section's resting rules), with no transition and no wait; a rise already under way when the
   setting changes lands in the next frame. Only .hf-tl-armed is required, so this holds even if the script above failed.
   The kickers are held settled by the title strip section's own media query; their wait is taken off here too. */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-item:not(.hf-tl-in) .fc-hf-slab,
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-item:not(.hf-tl-in) .fc-hf-tl-span,
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-item:not(.hf-tl-in) .wpb_text_column,
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-end:not(.hf-tl-in) .fc-tl-pattern{opacity:1;transform:none}
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-item:not(.hf-tl-in) .fc-hf-slab{box-shadow:inset 0 1px 0 #fff,0 3px 0 #E4E8F0,0 16px 26px -16px rgba(42,45,52,.34)}
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-end:not(.hf-tl-in) .fc-tl-pattern{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 40px -22px rgba(22,25,60,.28),0 2px 6px rgba(22,25,31,.05)}
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-item .fc-hf-slab,
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-item .fc-hf-tl-span,
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-item .wpb_text_column,
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed .fc-hf-tl-end .fc-tl-pattern{transition:none!important}
  body.fc-hf .fc-tl-col.fc-hf-tl.hf-tl-armed.hf-rv-r .fc-tl-label.hf-tl-in .fc-hf-tl-kicker{transition-delay:0s!important}
}
/* ==== end reveal from right ==== */

/* ==== word rise (live-reveal-split-heading, PILOT-PLAN 7.8 R2) ==== */
/* The word rise (PILOT-PLAN 7.8, R2; inventory split-heading:line-reveal-by-space): the hero H1, the hero lead, the
   timeline fold's heading and the footer headline. js/fc-hf.js writes each word as span.fc-rw-w (the word box) >
   span.fc-rw-i (what moves) and rises them with the Web Animations API; everything here is the settled page or a state
   the script sets, so with no script, or on any error, the words are simply there. Repair pass (28 Sep): no clip mask
   (it cut the rising words' blur flat and left gray bars), and a safety net for the one-second rule. */
/* a word: two inline boxes; inside Salient's split headings its own rules also apply (inline-block, bottom-aligned, the
   block's line height), which is why every line breaks as it does today */
body.fc-hf .fc-rw .fc-rw-w{display:inline-block;position:relative}
body.fc-hf .fc-rw .fc-rw-i{display:inline-block;position:relative}
/* Salient's word boxes clip their overflow, which would cut the blur and the lift as the words come up; here they do
   not (at rest the words render exactly as today's, descenders included) */
body.fc-hf .nectar-split-heading.fc-rw[data-animation-type="line-reveal-by-space"] > * > span.fc-rw-w{overflow:visible}
/* waiting to rise (set by the script only) */
body.fc-hf .fc-rw.is-armed .fc-rw-i{opacity:0}
/* what else the title column's fade carried (the white title disc, if another section has not retired it): hidden
   until the title rises, then it fades in with the title (set by the script only) */
body.fc-hf .fc-rw-x{opacity:0}
/* the one-second rule's safety net (PILOT-PLAN 7.8): the hero title and lead are hidden by Salient until a script takes
   them. If this piece's script has not taken them 0.85 s after they are first styled (a slow footer script), they fade
   in as plain text, so they are never hidden more than a second after the first paint; the script, arriving later,
   leaves them shown. Taking them (the column loses has-animation, the lead gains markup-generated) ends the net at
   once, so on a normal load it never shows. With JavaScript only (html.js or html.fc-js: the head sets fc-js, an early
   theme script replaces it with js, and a footer script adds fc-js back), so a page without JavaScript, which shows the
   text at once, is not touched. */
html:is(.js,.fc-js) body.fc-hf .wpb_column.has-animation:has(> .vc_column-inner > .wpb_wrapper > .nectar-highlighted-text > h1),
html:is(.js,.fc-js) body.fc-hf .fc-has-blobs:has(.nectar-highlighted-text > h1) .nectar-split-heading[data-animation-type="line-reveal-by-space"]:not(.markup-generated){
  animation:fcRwNet .3s linear .85s forwards}
@keyframes fcRwNet{from{opacity:0}to{opacity:1}}
/* Salient's own start states never hold the text here: a split heading with no script, or one the script could not take
   (Salient keeps it hidden until its own script splits it), and Salient's word boxes if its script ever splits one (a
   1.3 em drop). The title column's fade is taken off by the script itself, so it stays hidden until the words arm. */
html:not(.js):not(.fc-js) body.fc-hf .nectar-split-heading[data-animation-type="line-reveal-by-space"],
body.fc-hf .nectar-split-heading.fc-rw-off{opacity:1!important}
body.fc-hf .nectar-split-heading[data-animation-type="line-reveal-by-space"] span .inner{transform:none;opacity:1;transition:none}
body.fc-hf .fc-rw-off .fc-rw-i{opacity:1!important;transform:none!important;filter:none!important}
/* reduced motion, and print: settled whatever the script does */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-rw .fc-rw-i{opacity:1!important;transform:none!important;filter:none!important}
  body.fc-hf .fc-rw-x{opacity:1!important}
  html:is(.js,.fc-js) body.fc-hf .wpb_column.has-animation:has(> .vc_column-inner > .wpb_wrapper > .nectar-highlighted-text > h1),
  html:is(.js,.fc-js) body.fc-hf .fc-has-blobs:has(.nectar-highlighted-text > h1) .nectar-split-heading[data-animation-type="line-reveal-by-space"]:not(.markup-generated){animation-duration:1ms}
}
@media print{
  body.fc-hf .fc-rw .fc-rw-i{opacity:1!important;transform:none!important;filter:none!important}
  body.fc-hf .fc-rw-x{opacity:1!important}
}
/* ==== end word rise ==== */

/* ==== reveal fade-in (live-reveal-fade-in, PILOT-PLAN 7.8 R1) ==== */
/* ---- The R1 rise (PILOT-PLAN 7.8; inventory reveal:fade-in) ----------------------------------------------------------
   js/fc-hf.js takes the page's fade-in objects from Salient (the timeline side column's reading blocks and the six
   product screens) and marks them: .fc-r1-col on the column, .fc-r1-b on each of its blocks, .fc-r1-img on each screen
   wrap; .fc-r1-armed while one waits to enter the view, .fc-r1-run while it rises (the Web Animations API carries the
   16 px rise and the opacity), .fc-r1-done once it has landed, .fc-r1-still on a screen in a still state. The settled
   state is this sheet's, so with no script, on any error after an object is taken, in print and in every still state
   it is simply shown. */
/* a screen taken from Salient is shown, whatever Salient's own sheet says (.img-with-aniamtion-wrap .hover-wrap{opacity:0}) */
body.fc-hf .img-with-aniamtion-wrap.fc-r1-img .hover-wrap{opacity:1}
/* waiting to enter the view (set by the script only): hidden; an image that loads meanwhile skips Salient's 0.5 s lazy
   fade, because the rise carries it */
body.fc-hf .img-with-aniamtion-wrap.fc-r1-img.fc-r1-armed .hover-wrap{opacity:0}
body.fc-hf .img-with-aniamtion-wrap.fc-r1-img.fc-r1-armed img.nectar-lazy{transition:none}
body.fc-hf .fc-r1-col .fc-r1-b.fc-r1-armed{opacity:0}
/* the still states (reduced motion, ?fcqa=): a screen's image appears as it loads, with no fade */
body.fc-hf .img-with-aniamtion-wrap.fc-r1-img.fc-r1-still img.nectar-lazy{transition:none}
/* reduced motion: settled, whatever the script does */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .img-with-aniamtion-wrap.fc-r1-img .hover-wrap,body.fc-hf .fc-r1-col .fc-r1-b{opacity:1!important;transform:none!important}
  body.fc-hf .img-with-aniamtion-wrap.fc-r1-img img.nectar-lazy{transition:none}
}
@media print{
  body.fc-hf .img-with-aniamtion-wrap.fc-r1-img .hover-wrap,body.fc-hf .fc-r1-col .fc-r1-b{opacity:1!important;transform:none!important}
}
/* ==== end reveal fade-in ==== */

/* ==== panel lift (live-reveal-slide-up, PILOT-PLAN 7.8 R6) ==== */
/* ---- The two photographs: slide-up becomes R6, the panel lift (PILOT-PLAN 7.8; inventory reveal:slide-up) ----------
   The four image wraps are two photographs, each counted twice (the wrap and its img): the law library desk in "Where did
   the rule come from, and what changed in 2023?" and the foster mother at her door in "Where does FComply fit?". Today
   the photo rises 150 px inside a panel that a clip-path wipe uncovers from the left, and then Salient's scroll drift,
   measured while the fold was still closed, parks it 316 to 347 px down its own panel (on staging the law library photo
   shows as a 4 px sliver once its fold is opened). Here the photograph and its panel are one object, as R6 asks, and
   the same as the mask reveals: the photo sits still in the panel's own 26 px mat (22 px on a phone) on a satin paper
   frame (satin face, hairline, the 3 px lip, a soft contact shadow; 14 px photo corners with a hairline edge: the
   values of the mask-reveal section, live-reveal-mask, so the panels read as one set), and the frame lifts 12 px (8 px
   on a phone, 70 percent) as its contact shadow tightens, opacity 0 to 1, 0.6 s on cubic-bezier(0.16,1,0.3,1), no
   overshoot, ending with no transform. The slide, the wipe and the drift are off on these two panels (the push inside
   the frame is the parallax piece's, PILOT-PLAN 7.9, and belongs on the img, which nothing here touches). Transforms,
   opacity and shadows only, so no height changes anywhere.
   Which panels: a .fc-panel that holds a slide-up image wrap, found by :has() so the settled frame needs no script
   (inside :where(), so the test adds no specificity and a browser without :has() keeps the rest of the rule), or one
   js/fc-hf.js marked .hf-r6p. A panel the mask-reveal section manages (.fc-r6, data-fc-r6-was) or that another section
   has claimed (data-hf-r6 with another value) is left to it entirely, so a photo never lifts twice. The start state
   applies only under .hf-r6-armed, which the script sets last, so with no script, reduced motion, ?fcqa= or any error
   the frame is simply there. */
body.fc-hf .wpb_column.fc-panel:where(.hf-r6p,:has(> .vc_column-inner > .wpb_wrapper > .img-with-aniamtion-wrap[data-animation="slide-up"]):not(.fc-r6):not([data-fc-r6-was]):not([data-hf-r6]:not([data-hf-r6="slide-up"]))){
  --hf-r6-ease:cubic-bezier(.16,1,.3,1);--hf-r6-rise:12px;
  --hf-r6-rest:0 0 0 1px rgba(203,210,222,.6),0 3px 0 0 #E4E8F0,0 22px 36px -24px rgba(22,25,60,.36),0 2px 6px -2px rgba(22,25,31,.08);
  --hf-r6-start:0 0 0 1px rgba(203,210,222,.6),0 3px 0 0 #E4E8F0,0 46px 70px -26px rgba(22,25,60,.16),0 14px 30px -12px rgba(22,25,31,.04)}
/* the frame: the panel's own rounded box (radius 20, the mat) as satin paper; Salient's wipe is off (its resting
   clip-path would also cut the frame's shadow) */
body.fc-hf .wpb_column.fc-panel:where(.hf-r6p,:has(> .vc_column-inner > .wpb_wrapper > .img-with-aniamtion-wrap[data-animation="slide-up"]):not(.fc-r6):not([data-fc-r6-was]):not([data-hf-r6]:not([data-hf-r6="slide-up"]))) > .vc_column-inner{
  clip-path:none!important;opacity:1;transform:none;isolation:isolate;background:#FBFBFD;box-shadow:var(--hf-r6-rest)}
/* the photograph, mounted in the mat and still: no 150 px slide, no drift; a print's corner and a hairline edge */
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap[data-animation="slide-up"],
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap[data-animation="slide-up"] .hover-wrap{transform:none!important}
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap[data-animation="slide-up"] .hover-wrap{opacity:1!important;filter:none!important;box-shadow:0 0 0 1px rgba(42,45,52,.08)}
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap[data-animation="slide-up"],
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap[data-animation="slide-up"] .inner,
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap[data-animation="slide-up"] .hover-wrap,
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap[data-animation="slide-up"] img.img-with-animation{border-radius:14px!important}
/* the lift (set by the script only): up from 12 px lower as the shadow tightens to its rest. Under 1000 px Salient
   forces these panels settled with !important (its "entrance off on mobile"); the plan plays entrances on phones at 70
   percent of the distance, so the start state is !important too, one step more specific */
body.fc-hf .wpb_column.fc-panel.hf-r6p.hf-r6-armed > .vc_column-inner{
  transition:opacity .5s var(--hf-r6-ease),transform .6s var(--hf-r6-ease),box-shadow .6s var(--hf-r6-ease)}
body.fc-hf .wpb_column.fc-panel.hf-r6p.hf-r6-armed:not(.hf-r6-in) > .vc_column-inner{
  opacity:0!important;transform:translate3d(0,var(--hf-r6-rise),0)!important;box-shadow:var(--hf-r6-start)}
/* phones: 70 percent of the distance */
@media only screen and (max-width:690px){
  body.fc-hf .wpb_column.fc-panel:where(.hf-r6p,:has(> .vc_column-inner > .wpb_wrapper > .img-with-aniamtion-wrap[data-animation="slide-up"]):not(.fc-r6):not([data-fc-r6-was]):not([data-hf-r6]:not([data-hf-r6="slide-up"]))){--hf-r6-rise:8px}
}
/* reduced motion switched on after the page armed, and print: settled whatever the script does */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .wpb_column.fc-panel.hf-r6p > .vc_column-inner,
  body.fc-hf .wpb_column.fc-panel.hf-r6p.hf-r6-armed:not(.hf-r6-in) > .vc_column-inner{opacity:1!important;transform:none!important;box-shadow:var(--hf-r6-rest)!important;transition:none!important}
}
@media print{
  body.fc-hf .wpb_column.fc-panel.hf-r6p > .vc_column-inner,
  body.fc-hf .wpb_column.fc-panel.hf-r6p.hf-r6-armed:not(.hf-r6-in) > .vc_column-inner{opacity:1!important;transform:none!important;transition:none!important}
}
/* ==== end panel lift (live-reveal-slide-up) ==== */

/* ==== grow-in (live-reveal-grow-in, PILOT-PLAN 7.8 R6) ==== */
/* ---- The two yellow discs retire, and the Line takes their place (PILOT-PLAN 7.8 R6 and 7.10; inventory reveal:grow-in)
   The hero panel and the statute fold's photo panel each carried a #ffce59 Salient disc (77vw, grown from the panel's top
   left corner in 1.3 s) that showed as a flat yellow mat around the loop: the film's gold used as decoration. Under
   body.fc-hf the discs are gone, and the Line runs along the floor of the mat, under the picture: a 2 px FComply-blue
   strip with a soft glow, from the picture's left edge, drawn once from the left on the house camera curve with a bead of light
   at its tip, when the panel has landed. The satin frame and its R6 lift are the mask-reveal lane's (live-reveal-mask:
   the frame on .vc_column-inner, the gray box and the blue gradient hidden); until that section is on the page, the mat
   the disc made falls back to the same satin paper here (the panel's own color layer, with the hairline and the 3 px
   lip drawn inside it), so no bare gray box or blue gradient is ever left where the disc was. The timeline's "practical
   effect" column (the third grow-in) is the timeline lane's glass panel, which already lifts 12 px as its shadow tightens
   (R6): nothing of it is here. The panels are found by the disc they hold (:has(), so the settled look needs no script;
   the script adds .fc-hf-mat for engines without :has()). Transforms and opacity only.
   Repair 28 Sep (gate): the Line is drawn only once the script has fitted it (.fc-hf-mat-fit): it runs from the left
   edge of the picture and stops 16 px (12 px on a phone) short of any chip that stands across the floor, over the
   chip's whole drift range, so no chip ever sits on it; the chip reads as where the Line arrives. Without the script the
   Line cannot be fitted, so it is not drawn (the satin mat still is). A fitted Line shorter than 30 percent of the
   picture (or 96 px) is not drawn either (.fc-hf-mat-short). The waiting state is written with more weight than the
   drawn state (no :is() or :has() in the Line's rules), so an armed Line is really undrawn: it never shows drawn and
   then snaps to zero. Reduced motion, ?fcqa= or an error after the fit: the Line is drawn at once. */
body.fc-hf .fc-panel:is(.fc-hf-mat,:has(>.vc_column-inner>.wpb_wrapper>.nectar-animated-shape)){
  --mat-blue:#0809FF;--mat-paper:#FBFBFD;--mat-lip:#E4E8F0;--mat-hair:rgba(203,210,222,.75);--mat-pad:26px;--mat-w:480px;--mat-cut:0px}
/* the disc retires (it was one filled circle with no words: nothing for a reader or a screen reader is lost) */
body.fc-hf .fc-panel>.vc_column-inner>.wpb_wrapper>.nectar-animated-shape{display:none!important}
/* the fallback mat: satin paper in the panel's own color layer, the hairline and lip drawn inside it, so they are
   uncovered with the picture (a wipe never shows an empty outline first). The panel-lift section hides this layer and
   draws the frame on .vc_column-inner instead; the face color is the same, so nothing changes hands visibly */
body.fc-hf .fc-panel:is(.fc-hf-mat,:has(>.vc_column-inner>.wpb_wrapper>.nectar-animated-shape)) .column-bg-overlay-wrap{border-radius:20px}
body.fc-hf .fc-panel:is(.fc-hf-mat,:has(>.vc_column-inner>.wpb_wrapper>.nectar-animated-shape)) .column-bg-overlay{background-color:var(--mat-paper)!important;opacity:1!important;
  border-radius:20px;box-shadow:inset 0 0 0 1px var(--mat-hair),inset 0 -3px 0 var(--mat-lip)}
body.fc-hf .fc-panel:is(.fc-hf-mat,:has(>.vc_column-inner>.wpb_wrapper>.nectar-animated-shape)) .column-overlay-layer{background:none!important}
body.fc-hf .fc-panel:is(.fc-hf-mat,:has(>.vc_column-inner>.wpb_wrapper>.nectar-animated-shape))>.vc_column-inner{background-color:var(--mat-paper)}

/* the Line, along the floor of the mat: centered in the padding under the picture, from the picture's left edge to its
   right edge, or to 16 px short of a chip that stands across the floor (--mat-cut, measured by the script). Only once
   fitted (.fc-hf-mat-fit, set by the script), so a chip never covers it; plain classes only, so the armed rule below
   outweighs this one (0,5,2 against 0,6,2) */
body.fc-hf .fc-panel.fc-hf-mat.fc-hf-mat-fit>.vc_column-inner::after{
  content:"";position:absolute;z-index:1;left:var(--mat-pad);right:calc(var(--mat-pad) + var(--mat-cut));bottom:calc((var(--mat-pad) - 2px) / 2);height:2px;border-radius:2px;pointer-events:none;
  background:var(--mat-blue);box-shadow:0 0 6px rgba(8,9,255,.28);transform-origin:0 50%}
/* the bead of light that rides the tip while the Line draws (the clock pulse's blue, in one layered dot) */
body.fc-hf .fc-panel.fc-hf-mat.fc-hf-mat-fit>.vc_column-inner::before{
  content:"";position:absolute;z-index:2;left:calc(var(--mat-pad) - 5px);bottom:calc((var(--mat-pad) - 10px) / 2);width:10px;height:10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,#3a3bff 0 30%,var(--mat-blue) 62%);box-shadow:0 0 0 3px rgba(8,9,255,.14),0 0 14px 4px rgba(8,9,255,.34);
  opacity:0;transform:translate3d(0,0,0)}
/* start state, only once the script has armed the panel: the Line undrawn (outweighs the Line's rule above) */
body.fc-hf .fc-panel.fc-hf-mat.fc-hf-mat-fit.fc-hf-mat-armed>.vc_column-inner::after{transform:scaleX(0)}
/* a chip leaves too little floor: no Line at all rather than a stub */
body.fc-hf .fc-panel.fc-hf-mat.fc-hf-mat-short>.vc_column-inner::after,
body.fc-hf .fc-panel.fc-hf-mat.fc-hf-mat-short>.vc_column-inner::before{display:none!important}
/* the draw: 0.9 s on the camera curve cubic-bezier(.45,0,.2,1), no overshoot, the bead on the tip */
body.fc-hf .fc-panel.fc-hf-mat.fc-hf-mat-run>.vc_column-inner::after{animation:fcHfMatDraw .9s cubic-bezier(.45,0,.2,1) both}
body.fc-hf .fc-panel.fc-hf-mat.fc-hf-mat-run>.vc_column-inner::before{animation:fcHfMatBead .9s cubic-bezier(.45,0,.2,1) both}
@keyframes fcHfMatDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fcHfMatBead{0%{opacity:0;transform:translate3d(0,0,0)}8%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate3d(var(--mat-w),0,0)}}
/* phones: the panel's padding is 22 px (style.css), so the Line sits 10 px up */
@media only screen and (max-width:690px){
  body.fc-hf .fc-panel:is(.fc-hf-mat,:has(>.vc_column-inner>.wpb_wrapper>.nectar-animated-shape)){--mat-pad:22px}
}
/* reduced motion: the Line drawn, whatever the script does; no bead */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-panel.fc-hf-mat>.vc_column-inner::after{transform:none!important;animation:none!important}
  body.fc-hf .fc-panel.fc-hf-mat>.vc_column-inner::before{display:none!important;animation:none!important}
}
/* print: the Line drawn */
@media print{
  body.fc-hf .fc-panel.fc-hf-mat>.vc_column-inner::after{transform:none!important;animation:none!important}
  body.fc-hf .fc-panel.fc-hf-mat>.vc_column-inner::before{display:none!important}
}
/* ==== end grow-in ==== */

/* ==== panel lift (live-reveal-mask, PILOT-PLAN 7.8 R6) ==== */
/* The panel lift (PILOT-PLAN 7.8, R6; inventory reveal:mask-reveal, the five photo and screen panels: the hero film cover,
   the p1 loop, the law library photograph, the foster mother photograph and the night desk loop). The clip-path mask is
   gone: the photograph or screen sits in a satin paper frame, and the frame lifts 12 px (8 px under 690 px) as its
   contact shadow tightens, 0.6 s on cubic-bezier(0.16,1,0.3,1), no overshoot (js/fc-hf.js, the section of the same name,
   drives it with the Web Animations API over this end state).
   Still states: with no script (html.no-js) nothing here hides anything, and the frames are simply there. Before the
   script runs, html.js (set in the head, as Salient's own entrance CSS is) keeps a panel the script has not taken yet
   hidden until 2 s after the page began, so the hero is never painted settled and then hidden again; the script takes
   it over well before that. The 2 s is one clock, started once as the page is parsed, on the content wrapper, which no
   fold ever hides: a fold opened later does not start it again. So if the script never arrives, or an earlier section
   of the shared script stops it, every panel shows from 2 s after load on, settled, and a fold opened after that shows
   its panel at once. Once the script holds a panel it waits at opacity 0 (not hidden, so its photograph stays in the
   accessibility tree). Reduced motion: nothing is hidden and nothing moves. Every selector starts with body.fc-hf, and
   fc-hf.css loads on post 388 only. */
/* the mask: Salient's inline rule clips the frame to inset(0 100% 0 0) until its waypoint, and for good with no script */
body.fc-hf .wpb_column.fc-panel > .vc_column-inner{clip-path:none!important}
/* the satin frame: satin face, a hairline, the 3 px lip and a soft contact shadow (the paper material of the clock's
   cards, with the shadow scaled to a 540 px panel); its own stacking context, so the layers inside it paint the same
   while it lifts and at rest */
body.fc-hf .wpb_column.fc-panel{
  --r6-tight:0 0 0 1px rgba(203,210,222,.6),0 3px 0 0 #E4E8F0,0 22px 36px -24px rgba(22,25,60,.36),0 2px 6px -2px rgba(22,25,31,.08);
  --r6-loose:0 0 0 1px rgba(203,210,222,.6),0 3px 0 0 #E4E8F0,0 46px 70px -26px rgba(22,25,60,.16),0 14px 30px -12px rgba(22,25,31,.04)}
body.fc-hf .wpb_column.fc-panel > .vc_column-inner{background:#FBFBFD;isolation:isolate;box-shadow:var(--r6-tight)}
/* the flat #d3dbe1 box behind the hero film and the blue radial gradient behind the p1 loop give way to the satin */
body.fc-hf .wpb_column.fc-panel > .vc_column-inner > .column-bg-overlay-wrap{display:none!important}
/* the photograph or screen in the mat: 14 px corners and a hairline edge, not a dark drop shadow on the paper */
body.fc-hf .wpb_column.fc-panel .fc-loop{box-shadow:0 0 0 1px rgba(42,45,52,.08)}
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap,body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap .inner,
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap .hover-wrap,body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap .img-with-animation{border-radius:14px!important}
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap .hover-wrap{box-shadow:0 0 0 1px rgba(42,45,52,.08);filter:none!important}
/* the photograph rides with its frame: Salient's nested slide-up (the image 150 px down, then travelling up) and its
   scroll parallax (measured while the fold was shut, it leaves the photograph 330 px down inside the frame) are held
   off inside these panels; the 7.9 slow push, when it comes, scales the img inside .fc-r6-photo */
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap{transform:none!important}
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap .hover-wrap{transform:none!important;opacity:1!important}
body.fc-hf .wpb_column.fc-panel img.img-with-animation{opacity:1!important}
/* start states, only with a script: waiting for the script (until 2 s after the page began, then shown settled), and
   held by the script until the panel is in view (it then lifts from here: opacity 0, 12 px down, the loose shadow).
   The wait is a clock on .container-wrap, which holds all five panels and is never folded: its custom property
   --fc-r6-wait reads hidden for the first 2 s and visible from then on, and the panels inherit it. An animation on the
   frame itself would start again each time a fold shows it (display none to shown), hiding the panel for 2 s on every
   opening whenever the script is missing. */
@media (prefers-reduced-motion:no-preference){
  html.js body.fc-hf .container-wrap{animation:fcHfR6Wait 2s step-end both}
  html.js body.fc-hf .wpb_column.fc-panel:not(.fc-r6-in):not(.fc-r6-armed) > .vc_column-inner{visibility:var(--fc-r6-wait,visible)}
  html.js body.fc-hf .wpb_column.fc-panel.fc-r6-armed:not(.fc-r6-in) > .vc_column-inner{opacity:0}
}
@keyframes fcHfR6Wait{from{--fc-r6-wait:hidden}to{--fc-r6-wait:visible}}
/* print: every frame, settled */
@media print{
  body.fc-hf .wpb_column.fc-panel > .vc_column-inner{visibility:visible!important;animation:none!important;opacity:1!important;transform:none!important;box-shadow:var(--r6-tight)!important}
}
/* ==== end panel lift (live-reveal-mask) ==== */

/* ==== title Line (live-parallax-shape, PILOT-PLAN 7.9) ==== */
/* ---- The title disc retires, and the Line runs under the H1 block (PILOT-PLAN 7.9; inventory parallax:shape:transform_y)
   The hero title carried a Salient animated shape (build_pages.py SHAPE in title_block()): a plain white 216 px disc
   (15vw at 1440) behind the first letters of the H1 and the lead, drifting with the scroll at intensity 0.6, desktop
   only. It carried no words. Under body.fc-hf it is gone (js/fc-hf.js takes it out before Salient's ready handler binds
   its scroll parallax; this rule hides it if no script runs), and the Line takes its place: a 2 px FComply-blue strip
   with a soft glow in the title row's lower padding, from the lead's left edge to its right edge (or to 20 px short of
   the hero pill 'Two reports, one clock', from 1200 px up, where that pill hangs over the title column), drawn once from
   the left on the house camera curve with a bead of light at its tip, as the title words rise. It is the grow-in lane's
   Line recipe (the panels' floors), so the two read as one Line. The strip hangs from the title column's .vc_column-inner
   as ::after (the bead is ::before), placed with a percentage margin, which resolves against the column's width exactly
   as the row's 4 percent padding does, so it stays in the middle of the gap at every width and adds no height. No JavaScript,
   an error, reduced motion or ?fcqa=: the Line is drawn; the start state applies only under .fc-hf-hline-armed, which
   the script sets. The column is matched through :where(), which adds no specificity, so the armed and running rules
   always win over the drawn default (an :is() with the :has() inside outranked them, and the Line showed drawn while
   it waited). Transforms and opacity only; nothing is scroll-linked. */
body.fc-hf .wpb_wrapper>.nectar-animated-shape:has(~.nectar-highlighted-text){display:none!important}
body.fc-hf .wpb_column:where(.fc-hf-hline,:has(>.vc_column-inner>.wpb_wrapper>.nectar-highlighted-text)){
  --hline-blue:#0809FF;--hline-gap:calc(2% + 10px);--hline-w:520px;--hline-cut:0px}
/* the Line: in the gap under the H1 (the row's 4 percent padding), at the optical middle between the headline mark's arc
   and the cap height of the lead's first line: 2 percent of the column's width plus 10 px below the H1 (measured on
   28 Sep at 8 widths, 320 to 1920, in Chromium and WebKit: within 1.5 px of the middle, 8.5 to 18.7 px clear of each) */
body.fc-hf .wpb_column:where(.fc-hf-hline,:has(>.vc_column-inner>.wpb_wrapper>.nectar-highlighted-text))>.vc_column-inner::after{
  content:"";position:absolute;z-index:1;left:0;right:var(--hline-cut);top:100%;margin-top:var(--hline-gap);height:2px;border-radius:2px;pointer-events:none;
  background:var(--hline-blue);box-shadow:0 0 6px rgba(8,9,255,.28);transform-origin:0 50%;transform:none}
/* the Line's right end stops 20 px short of the hero pill 'Two reports, one clock' (gate, 28 Sep: the glass chip sat on
   the Line's last 19 to 44 px from 1280 to 2560 px, in every state). From 1200 px up style.css hangs that pill 2vw plus
   70 px left of the picture column (its section 3 and the 13 Sep leftward pull), and the title column ends 4vw short of
   the picture column (Salient's right_padding_desktop_4vw), so the pill starts 70 px minus 2vw inside the Line's reach:
   the cut is that plus 20 px. It is CSS, so it holds with no script, under reduced motion and under ?fcqa=. From 1000 to
   1199 px the pill starts 2vw (20 to 24 px) past the Line's end, and under 1000 px it is not beside the title, so nothing
   is cut there. The script measures the pill's placed box and cuts further only if a later change brings it closer. */
@media only screen and (min-width:1200px){
  body.fc-hf .wpb_column:where(.fc-hf-hline,:has(>.vc_column-inner>.wpb_wrapper>.nectar-highlighted-text)){--hline-cut:max(0px,calc(90px - 2vw))}
}
/* the bead of light that rides the tip while the Line draws (the grow-in Line's bead) */
body.fc-hf .wpb_column.fc-hf-hline>.vc_column-inner::before{
  content:"";position:absolute;z-index:2;left:-5px;top:100%;margin-top:calc(var(--hline-gap) - 4px);width:10px;height:10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,#3a3bff 0 30%,var(--hline-blue) 62%);box-shadow:0 0 0 3px rgba(8,9,255,.14),0 0 14px 4px rgba(8,9,255,.34);
  opacity:0;transform:translate3d(0,0,0)}
/* start state, only once the script has armed the title: the Line undrawn */
body.fc-hf .wpb_column.fc-hf-hline.fc-hf-hline-armed>.vc_column-inner::after{transform:scaleX(0)}
/* the draw: 0.9 s on the camera curve cubic-bezier(.45,0,.2,1), no overshoot, the bead on the tip */
body.fc-hf .wpb_column.fc-hf-hline.fc-hf-hline-run>.vc_column-inner::after{animation:fcHfHlineDraw .9s cubic-bezier(.45,0,.2,1) both}
body.fc-hf .wpb_column.fc-hf-hline.fc-hf-hline-run>.vc_column-inner::before{animation:fcHfHlineBead .9s cubic-bezier(.45,0,.2,1) both}
@keyframes fcHfHlineDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fcHfHlineBead{0%{opacity:0;transform:translate3d(0,0,0)}8%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate3d(var(--hline-w),0,0)}}
/* phones: the lead's row sits 14 px lower (Salient's phone gap between inner rows), so the middle is 2 percent plus 18 px
   (16 px until the headline mark's arc came to sit about 3 px lower on phones, 28 Sep) */
@media only screen and (max-width:690px){
  body.fc-hf .wpb_column:where(.fc-hf-hline,:has(>.vc_column-inner>.wpb_wrapper>.nectar-highlighted-text)){--hline-gap:calc(2% + 18px)}
}
/* reduced motion: the Line drawn, whatever the script does; no bead */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .wpb_column.fc-hf-hline>.vc_column-inner::after{transform:none!important;animation:none!important}
  body.fc-hf .wpb_column.fc-hf-hline>.vc_column-inner::before{display:none!important;animation:none!important}
}
/* print: the Line drawn */
@media print{
  body.fc-hf .wpb_column.fc-hf-hline>.vc_column-inner::after{transform:none!important;animation:none!important}
  body.fc-hf .wpb_column.fc-hf-hline>.vc_column-inner::before{display:none!important}
}
/* ==== end title Line ==== */

/* ==== photo push (live-parallax-image, PILOT-PLAN 7.9) ==== */
/* ---- The photo push (PILOT-PLAN 7.9; inventory parallax:image:transform_y, the law library and the foster mother) -----
   Today Salient drifts each photograph up and down its panel with the scroll (transform_y at -0.8, measured while the
   fold was shut), so the photo slides over its own mat. Here the photograph sits in its fixed satin frame and the
   camera pushes in slowly inside it: the picture scales from 1.00 as the panel enters the bottom of the window to 1.04
   as it leaves the top (linear with the scroll, smoothed over about 0.2 s like a fluid head), toward the subject, inside
   the photo's own 14 px print corners. The frame never moves and the photo's edge never moves; only what is inside the
   print gets closer. Desktop only (Salient's desktop, 1000 px and up); below that, and so below 690 px, nothing
   drifts at all. js/fc-hf.js (the section of the same name) takes the two photos from Salient's image parallax before
   init.js binds it and writes --fc-push on the img; the start state is scale 1, so with no script, reduced motion,
   ?fcqa= (the checks' frozen state), print, or any error the photograph is simply whole in its mat. Transforms only
   (the scale property, which composes with anything else on the img), so no box changes size and no page grows. */
/* Salient's drift, held off on the photo wrap even if its loop was bound before the script ran (the panel-lift sections
   hold it too; this piece keeps the promise on its own) */
body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap.fc-push{transform:none!important}
@media screen and (min-width:1000px) and (prefers-reduced-motion:no-preference){
  /* the print's window: the photograph's own rounded box clips the push, so its edge stays put */
  body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap.fc-push .hover-wrap-inner{overflow:hidden;border-radius:14px;clip-path:inset(0 round 14px)}
  /* the push: toward the subject (the counsel at his open volumes; the phone the foster mother holds up) */
  body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap.fc-push img{scale:var(--fc-push,1);transform-origin:var(--fc-push-o,50% 40%)}
  body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap.fc-push img[src*="law-library-desk"]{--fc-push-o:52% 40%}
  body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap.fc-push img[src*="comp-fostermother"]{--fc-push-o:38% 38%}
  /* while the photo is on screen: its own layer, so the push is a composite, not a repaint */
  body.fc-hf .wpb_column.fc-panel .img-with-aniamtion-wrap.fc-push.fc-push-on img{will-change:transform}
}
/* ==== end photo push (live-parallax-image) ==== */

/* ==== reveal fade-in from bottom (live-reveal-fade-in-from-bottom, PILOT-PLAN 7.8 R1) ==== */
/* ---- The R1 rise for fade-in-from-bottom (PILOT-PLAN 7.8; inventory reveal:fade-in-from-bottom) ------------------------
   js/fc-hf.js takes the page's fade-in-from-bottom columns from Salient and marks them .fc-r1f; each block that moves
   (a footer column, a glass chip, a screen column's caption) is .fc-r1f-b, with .fc-r1f-armed while it waits to enter
   the view, .fc-r1f-run while it rises (the Web Animations API carries the 16 px rise and the opacity) and .fc-r1f-done
   once it has landed. The settled state is this sheet's, so with no script, on any error after a column is taken, in
   print and in every still state it is simply shown. */
body.fc-hf .fc-r1f-b.fc-r1f-armed{opacity:0}
/* before the script takes them, the glass chips wait on the panel lift's clock (live-reveal-mask: --fc-r6-wait on
   .container-wrap reads hidden for the first 2 s, then visible), as the panels they label do. Under 1000 px Salient paints
   these columns at once (mobile-disable-entrance-animation), so without this a chip was painted at load and hidden again
   when the script armed it. With no script (no html.js), in reduced motion, or without that section (the variable
   unset), nothing is hidden; once the script holds a chip (.fc-r1f) this no longer applies */
@media (prefers-reduced-motion:no-preference){
  html.js body.fc-hf .wpb_column[data-animation="fade-in-from-bottom"]:not(.fc-r1f) .fc-pill{visibility:var(--fc-r6-wait,visible)}
}
/* while it waits and while it rises a block runs no transition of its own (the pill's .4 s step-aside fade would
   otherwise start on the class change and, as a transition, win over the rise) */
body.fc-hf .fc-r1f-b.fc-r1f-armed,body.fc-hf .fc-r1f-b.fc-r1f-run{transition:none}
/* reduced motion: settled, whatever the script does */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-r1f-b.fc-r1f-armed,body.fc-hf .fc-r1f-b.fc-r1f-run{opacity:1!important;transform:none!important}
}
@media print{
  body.fc-hf .fc-r1f-b.fc-r1f-armed,body.fc-hf .fc-r1f-b.fc-r1f-run{opacity:1!important;transform:none!important}
}
/* no script: Salient's no-script rule shows these columns but keeps their 75 px start offset; here they sit in place */
html:not(.js) body.fc-hf .wpb_column.has-animation[data-animation="fade-in-from-bottom"]{transform:none}
/* ==== end reveal fade-in from bottom ==== */

/* ==== column parallax off (live-parallax-column, PILOT-PLAN 7.9) ==== */
/* Column parallax off (PILOT-PLAN 7.9; inventory parallax:column:default, "off under fc-hf"), and the bounded drift in
   its place (7.6, 7.9, D14). js/fc-hf.js (the section of the same name) stops Salient from ever driving the ten pill
   columns and moves each pill column's .vc_column-inner with the CSS translate property instead, at most 16 px either
   way, from 1000 px up. This is the guard for the case Salient drove them anyway (the script deferred behind Salient's,
   or an error earlier in fc-hf.js): Salient's inline translateY(...) translateZ(0) on the .vc_column-inner is held off,
   so the pill never rides the old unbounded drift. It applies only while Salient's inline style is on the element, which
   in the normal case it never is, so nothing else that moves the pill or its column is blocked. */
body.fc-hf .wpb_column[data-scroll-animation] > .vc_column-inner[style*="translateZ(0"]{transform:none!important}
/* no drift below 1000 px, under reduced motion or in print, whatever the script does */
@media only screen and (max-width:999px){body.fc-hf .wpb_column[data-fc-hf-parallax] > .vc_column-inner{translate:none!important}}
@media (prefers-reduced-motion:reduce){body.fc-hf .wpb_column[data-fc-hf-parallax] > .vc_column-inner{translate:none!important}}
@media print{body.fc-hf .wpb_column[data-fc-hf-parallax] > .vc_column-inner{translate:none!important}}
/* The hero pill 'Two reports, one clock' stays off the title column (repair, 28 Sep; PILOT-PLAN 7.9 "They never cover
   text at 1180, 1440 or 1920"). style.css hangs the hero's left pill off the gutter (its section 3: left -2vw, "half of it
   laps over the photo, half stays clear of the title's text box"), but its later 13 Sep pull for the body photo cards
   (margin-left -70px from 1200 px up) also catches this row, so from 1200 px up the pill started 70 px minus 2vw inside
   the title column. There it sat up to 24 px on the lead's words: at 1200 px as loaded, and at every width from 1200 to
   2560 px once the title column and the film panel re-centered on each other (the Listen card or another details fold
   open, or the shorter still panel under reduced motion): 'law' at 1280, 'requires' at 1440, 'agency' at 1920.
   Here, on this page only, that pull becomes 20 px minus 2vw, so from 1200 px up the pill starts 20 px past the title
   column's right edge, as it already does from 1000 to 1199 px (2vw, 20 to 24 px): no line of the title column can reach
   it in any state, since the column's box is a bound its words cannot cross. The pill moves right by 90 px minus 2vw
   (66 px at 1200, 61 at 1440, 52 at 1920, 39 at 2560) and stays at the same height (the drift in fc-hf.js moves it up
   and down only); the second hero pill, every fold pill and every width below 1200 px are unchanged. */
@media only screen and (min-width:1200px){
  body.fc-hf .wpb_row:has(h1) .vc_col-sm-6 .inner_row.row_position_absolute[class*="left_position_desktop_-"]:has(.fc-pill){margin-left:calc(20px - 2vw)}
}
/* ==== end column parallax off ==== */

/* ==== evidence wash (live-wash-blobs, PILOT-PLAN 7.10) ==== */
/* The topic wash in place of the category blobs (PILOT-PLAN 7.10; inventory ambient:blobs, row 29: the hero, timeline and
   FComply bands), rebuilt 28 Sep for Gavin's update (STYLE.md OVERRIDE 28 Sep, kit/TOPIC-WASH.md): each band takes its
   topic's pair in the kit's tints (topic-wash.js CORE), in BG.tiff's layout, at least as saturated as BG.tiff, with depth.
   Written by gen_wash.py (build/live-wash-blobs/src). Topics: congress: Congress, federal law: blue #0809ff + gold #ffce59 (UR blue #c9c9ff, LR blue #c9c9ff, LL gold #ffe3a0); foster: Foster care: azure #0071ff + sky #5fd3ff (fc-cat-fccs) (UR azure #add1ff, LR sky #9de4ff, LL sky #9de4ff). The hero takes foster
   (as its loop and film do); washed rows after fold 2's head take congress; washed rows after fold 3's head take foster (2: Where did the rule
   come from, and what changed in 2023?; 3: Where does FComply fit?), the hero film's own order: foster, congress, foster.
   Two layers on the row's own Salient background layer (.row-bg-wrap, clipped to the row, under its z-index 10 content):
   ::before the colored lights (taller than the band by --fc-wash-over), drifting on a closed figure-eight (1.2vw by 0.8vw,
   257s a loop, about 2 percent of the band's width a minute, transform) and, on the desktop, set back in depth:
   js/fc-hf.js sets --fc-wash-depth so the lights ride 8 percent slower than the page (at most 96 px either way);
   ::after the white center behind the reading column and the band's top (clamp(72px,16%,200px)) and bottom (clamp(80px,18%,230px))
   fades to #F8F8F8, fixed to the content. Each light falls off as (1 - r^2)^3. The three blurred discs are not drawn
   (their markup stays: the word rise finds the hero lead by .fc-has-blobs).
   Still (the settled wash, the drift's first frame, no depth): reduced motion, ?fcqa=, print, no script, off screen, no
   IntersectionObserver, phones for the depth. */
body.fc-hf .fc-blobs > i{display:none!important;animation:none!important}
/* The product screens inside the washed bands: Salient's box shadow on their transparent image wraps drew the outline of an
   empty card (576 and 1152 px wide round a 182 or 597 px screen), a gray box the wash makes plain; each screen keeps its own
   drop shadow on the device (style.css .fc-screen-col img, and the desk screens' own filter). */
body.fc-hf :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) :where(.img-with-aniamtion-wrap,.img-with-animation-wrap):not(.fc-r6-photo) .hover-wrap{box-shadow:none!important}
body.fc-hf :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap{overflow:hidden;--fc-wash-ur:173,209,255;--fc-wash-lr:157,228,255;--fc-wash-ll:157,228,255;--fc-wash-k:0.9;--fc-wash-over:calc(96px + 1vw);--fc-wash-fade-top:clamp(72px,16%,200px);--fc-wash-fade-bot:clamp(80px,18%,230px)}
body.fc-hf .wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-sec-head[data-sec="2"]) ~ :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap{--fc-wash-ur:201,201,255;--fc-wash-lr:201,201,255;--fc-wash-ll:255,227,160;--fc-wash-k:1.0}
body.fc-hf .wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-sec-head[data-sec="3"]) ~ :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap{--fc-wash-ur:173,209,255;--fc-wash-lr:157,228,255;--fc-wash-ll:157,228,255;--fc-wash-k:0.9}
body.fc-hf :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap::before,body.fc-hf :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap::after{content:"";position:absolute;pointer-events:none}
body.fc-hf :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap::before{
  top:calc(-1 * var(--fc-wash-over));bottom:calc(-1 * var(--fc-wash-over));left:-2vw;right:-2vw;
  background:
    radial-gradient(ellipse 50% 60.84% at 90% calc(30% + 0.4 * var(--fc-wash-over)),rgba(var(--fc-wash-ur),0.92) 0%,rgba(var(--fc-wash-ur),0.9093) 6.25%,rgba(var(--fc-wash-ur),0.8775) 12.5%,rgba(var(--fc-wash-ur),0.8263) 18.75%,rgba(var(--fc-wash-ur),0.7581) 25%,rgba(var(--fc-wash-ur),0.6759) 31.25%,rgba(var(--fc-wash-ur),0.5839) 37.5%,rgba(var(--fc-wash-ur),0.4864) 43.75%,rgba(var(--fc-wash-ur),0.3881) 50%,rgba(var(--fc-wash-ur),0.2939) 56.25%,rgba(var(--fc-wash-ur),0.2082) 62.5%,rgba(var(--fc-wash-ur),0.1349) 68.75%,rgba(var(--fc-wash-ur),0.077) 75%,rgba(var(--fc-wash-ur),0.0361) 81.25%,rgba(var(--fc-wash-ur),0.0118) 87.5%,rgba(var(--fc-wash-ur),0.0016) 93.75%,rgba(var(--fc-wash-ur),0) 100%),
    radial-gradient(ellipse 40% 48.36% at 78% calc(80% + -0.6 * var(--fc-wash-over)),rgba(var(--fc-wash-lr),0.74) 0%,rgba(var(--fc-wash-lr),0.7314) 6.25%,rgba(var(--fc-wash-lr),0.7059) 12.5%,rgba(var(--fc-wash-lr),0.6647) 18.75%,rgba(var(--fc-wash-lr),0.6097) 25%,rgba(var(--fc-wash-lr),0.5437) 31.25%,rgba(var(--fc-wash-lr),0.4697) 37.5%,rgba(var(--fc-wash-lr),0.3912) 43.75%,rgba(var(--fc-wash-lr),0.3122) 50%,rgba(var(--fc-wash-lr),0.2364) 56.25%,rgba(var(--fc-wash-lr),0.1675) 62.5%,rgba(var(--fc-wash-lr),0.1085) 68.75%,rgba(var(--fc-wash-lr),0.062) 75%,rgba(var(--fc-wash-lr),0.029) 81.25%,rgba(var(--fc-wash-lr),0.0095) 87.5%,rgba(var(--fc-wash-lr),0.0013) 93.75%,rgba(var(--fc-wash-lr),0) 100%),
    radial-gradient(ellipse 44% 54.6% at 7% calc(78% + -0.56 * var(--fc-wash-over)),rgba(var(--fc-wash-ll),0.84) 0%,rgba(var(--fc-wash-ll),0.8302) 6.25%,rgba(var(--fc-wash-ll),0.8012) 12.5%,rgba(var(--fc-wash-ll),0.7545) 18.75%,rgba(var(--fc-wash-ll),0.6921) 25%,rgba(var(--fc-wash-ll),0.6172) 31.25%,rgba(var(--fc-wash-ll),0.5331) 37.5%,rgba(var(--fc-wash-ll),0.4441) 43.75%,rgba(var(--fc-wash-ll),0.3544) 50%,rgba(var(--fc-wash-ll),0.2683) 56.25%,rgba(var(--fc-wash-ll),0.1901) 62.5%,rgba(var(--fc-wash-ll),0.1232) 68.75%,rgba(var(--fc-wash-ll),0.0703) 75%,rgba(var(--fc-wash-ll),0.033) 81.25%,rgba(var(--fc-wash-ll),0.0108) 87.5%,rgba(var(--fc-wash-ll),0.0015) 93.75%,rgba(var(--fc-wash-ll),0) 100%);
  opacity:var(--fc-wash-k,1);transform:translate3d(0,0,0);translate:0 var(--fc-wash-depth,0px);
  animation:fcHfWashDrift 257s linear infinite;animation-play-state:paused}
body.fc-hf :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap::after{
  top:0;bottom:0;left:0;right:0;
  background:
    linear-gradient(to bottom,rgba(248,248,248,1) 0,rgba(248,248,248,0.98) calc(var(--fc-wash-fade-top) * 0.0833),rgba(248,248,248,0.926) calc(var(--fc-wash-fade-top) * 0.1667),rgba(248,248,248,0.844) calc(var(--fc-wash-fade-top) * 0.25),rgba(248,248,248,0.741) calc(var(--fc-wash-fade-top) * 0.3333),rgba(248,248,248,0.624) calc(var(--fc-wash-fade-top) * 0.4167),rgba(248,248,248,0.5) calc(var(--fc-wash-fade-top) * 0.5),rgba(248,248,248,0.376) calc(var(--fc-wash-fade-top) * 0.5833),rgba(248,248,248,0.259) calc(var(--fc-wash-fade-top) * 0.6667),rgba(248,248,248,0.156) calc(var(--fc-wash-fade-top) * 0.75),rgba(248,248,248,0.074) calc(var(--fc-wash-fade-top) * 0.8333),rgba(248,248,248,0.02) calc(var(--fc-wash-fade-top) * 0.9167),rgba(248,248,248,0) var(--fc-wash-fade-top)),
    linear-gradient(to top,rgba(248,248,248,1) 0,rgba(248,248,248,0.98) calc(var(--fc-wash-fade-bot) * 0.0833),rgba(248,248,248,0.926) calc(var(--fc-wash-fade-bot) * 0.1667),rgba(248,248,248,0.844) calc(var(--fc-wash-fade-bot) * 0.25),rgba(248,248,248,0.741) calc(var(--fc-wash-fade-bot) * 0.3333),rgba(248,248,248,0.624) calc(var(--fc-wash-fade-bot) * 0.4167),rgba(248,248,248,0.5) calc(var(--fc-wash-fade-bot) * 0.5),rgba(248,248,248,0.376) calc(var(--fc-wash-fade-bot) * 0.5833),rgba(248,248,248,0.259) calc(var(--fc-wash-fade-bot) * 0.6667),rgba(248,248,248,0.156) calc(var(--fc-wash-fade-bot) * 0.75),rgba(248,248,248,0.074) calc(var(--fc-wash-fade-bot) * 0.8333),rgba(248,248,248,0.02) calc(var(--fc-wash-fade-bot) * 0.9167),rgba(248,248,248,0) var(--fc-wash-fade-bot)),
    radial-gradient(ellipse 44% 62% at 26% 40%,rgba(252,252,255,0.94) 0%,rgba(252,252,255,0.929) 6.25%,rgba(252,252,255,0.8966) 12.5%,rgba(252,252,255,0.8443) 18.75%,rgba(252,252,255,0.7745) 25%,rgba(252,252,255,0.6906) 31.25%,rgba(252,252,255,0.5966) 37.5%,rgba(252,252,255,0.497) 43.75%,rgba(252,252,255,0.3966) 50%,rgba(252,252,255,0.3003) 56.25%,rgba(252,252,255,0.2127) 62.5%,rgba(252,252,255,0.1379) 68.75%,rgba(252,252,255,0.0787) 75%,rgba(252,252,255,0.0369) 81.25%,rgba(252,252,255,0.0121) 87.5%,rgba(252,252,255,0.0017) 93.75%,rgba(252,252,255,0) 100%)}
body.fc-hf .wpb_row.fc-hf-wash.fc-hf-wash-live > .row-bg-wrap::before{animation-play-state:running;will-change:transform,translate}
@keyframes fcHfWashDrift{0%{transform:translate3d(0vw,0vw,0)}4.167%{transform:translate3d(0.217vw,0.284vw,0)}8.333%{transform:translate3d(0.449vw,0.555vw,0)}12.5%{transform:translate3d(0.73vw,0.772vw,0)}16.667%{transform:translate3d(1.043vw,0.687vw,0)}20.833%{transform:translate3d(1.168vw,0.355vw,0)}25%{transform:translate3d(1.2vw,0vw,0)}29.167%{transform:translate3d(1.168vw,-0.355vw,0)}33.333%{transform:translate3d(1.043vw,-0.687vw,0)}37.5%{transform:translate3d(0.73vw,-0.772vw,0)}41.667%{transform:translate3d(0.449vw,-0.555vw,0)}45.833%{transform:translate3d(0.217vw,-0.284vw,0)}50%{transform:translate3d(0vw,0vw,0)}54.167%{transform:translate3d(-0.217vw,0.284vw,0)}58.333%{transform:translate3d(-0.449vw,0.555vw,0)}62.5%{transform:translate3d(-0.73vw,0.772vw,0)}66.667%{transform:translate3d(-1.043vw,0.687vw,0)}70.833%{transform:translate3d(-1.168vw,0.355vw,0)}75%{transform:translate3d(-1.2vw,0vw,0)}79.167%{transform:translate3d(-1.168vw,-0.355vw,0)}83.333%{transform:translate3d(-1.043vw,-0.687vw,0)}87.5%{transform:translate3d(-0.73vw,-0.772vw,0)}91.667%{transform:translate3d(-0.449vw,-0.555vw,0)}95.833%{transform:translate3d(-0.217vw,-0.284vw,0)}100%{transform:translate3d(0vw,0vw,0)}}
@media (max-width:689.98px){
  body.fc-hf :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap{--fc-wash-over:1vw}
  body.fc-hf :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap::before{translate:none;
    background:
    radial-gradient(ellipse 112% 52% at 92% calc(16% + 0.68 * var(--fc-wash-over)),rgba(var(--fc-wash-ur),0.94) 0%,rgba(var(--fc-wash-ur),0.929) 6.25%,rgba(var(--fc-wash-ur),0.8966) 12.5%,rgba(var(--fc-wash-ur),0.8443) 18.75%,rgba(var(--fc-wash-ur),0.7745) 25%,rgba(var(--fc-wash-ur),0.6906) 31.25%,rgba(var(--fc-wash-ur),0.5966) 37.5%,rgba(var(--fc-wash-ur),0.497) 43.75%,rgba(var(--fc-wash-ur),0.3966) 50%,rgba(var(--fc-wash-ur),0.3003) 56.25%,rgba(var(--fc-wash-ur),0.2127) 62.5%,rgba(var(--fc-wash-ur),0.1379) 68.75%,rgba(var(--fc-wash-ur),0.0787) 75%,rgba(var(--fc-wash-ur),0.0369) 81.25%,rgba(var(--fc-wash-ur),0.0121) 87.5%,rgba(var(--fc-wash-ur),0.0017) 93.75%,rgba(var(--fc-wash-ur),0) 100%),
    radial-gradient(ellipse 96% 44% at 86% calc(86% + -0.72 * var(--fc-wash-over)),rgba(var(--fc-wash-lr),0.82) 0%,rgba(var(--fc-wash-lr),0.8104) 6.25%,rgba(var(--fc-wash-lr),0.7822) 12.5%,rgba(var(--fc-wash-lr),0.7365) 18.75%,rgba(var(--fc-wash-lr),0.6757) 25%,rgba(var(--fc-wash-lr),0.6025) 31.25%,rgba(var(--fc-wash-lr),0.5204) 37.5%,rgba(var(--fc-wash-lr),0.4335) 43.75%,rgba(var(--fc-wash-lr),0.3459) 50%,rgba(var(--fc-wash-lr),0.2619) 56.25%,rgba(var(--fc-wash-lr),0.1856) 62.5%,rgba(var(--fc-wash-lr),0.1203) 68.75%,rgba(var(--fc-wash-lr),0.0687) 75%,rgba(var(--fc-wash-lr),0.0322) 81.25%,rgba(var(--fc-wash-lr),0.0106) 87.5%,rgba(var(--fc-wash-lr),0.0015) 93.75%,rgba(var(--fc-wash-lr),0) 100%),
    radial-gradient(ellipse 96% 44% at 6% calc(86% + -0.72 * var(--fc-wash-over)),rgba(var(--fc-wash-ll),0.86) 0%,rgba(var(--fc-wash-ll),0.85) 6.25%,rgba(var(--fc-wash-ll),0.8203) 12.5%,rgba(var(--fc-wash-ll),0.7724) 18.75%,rgba(var(--fc-wash-ll),0.7086) 25%,rgba(var(--fc-wash-ll),0.6319) 31.25%,rgba(var(--fc-wash-ll),0.5458) 37.5%,rgba(var(--fc-wash-ll),0.4547) 43.75%,rgba(var(--fc-wash-ll),0.3628) 50%,rgba(var(--fc-wash-ll),0.2747) 56.25%,rgba(var(--fc-wash-ll),0.1946) 62.5%,rgba(var(--fc-wash-ll),0.1261) 68.75%,rgba(var(--fc-wash-ll),0.072) 75%,rgba(var(--fc-wash-ll),0.0338) 81.25%,rgba(var(--fc-wash-ll),0.0111) 87.5%,rgba(var(--fc-wash-ll),0.0015) 93.75%,rgba(var(--fc-wash-ll),0) 100%)}
  body.fc-hf :where(.wpb_row.fc-hf-wash,.wpb_row:not(.inner_row):has(> .row_col_wrap_12 .fc-blobs)) > .row-bg-wrap::after{
    background:
    linear-gradient(to bottom,rgba(248,248,248,1) 0,rgba(248,248,248,0.98) calc(var(--fc-wash-fade-top) * 0.0833),rgba(248,248,248,0.926) calc(var(--fc-wash-fade-top) * 0.1667),rgba(248,248,248,0.844) calc(var(--fc-wash-fade-top) * 0.25),rgba(248,248,248,0.741) calc(var(--fc-wash-fade-top) * 0.3333),rgba(248,248,248,0.624) calc(var(--fc-wash-fade-top) * 0.4167),rgba(248,248,248,0.5) calc(var(--fc-wash-fade-top) * 0.5),rgba(248,248,248,0.376) calc(var(--fc-wash-fade-top) * 0.5833),rgba(248,248,248,0.259) calc(var(--fc-wash-fade-top) * 0.6667),rgba(248,248,248,0.156) calc(var(--fc-wash-fade-top) * 0.75),rgba(248,248,248,0.074) calc(var(--fc-wash-fade-top) * 0.8333),rgba(248,248,248,0.02) calc(var(--fc-wash-fade-top) * 0.9167),rgba(248,248,248,0) var(--fc-wash-fade-top)),
    linear-gradient(to top,rgba(248,248,248,1) 0,rgba(248,248,248,0.98) calc(var(--fc-wash-fade-bot) * 0.0833),rgba(248,248,248,0.926) calc(var(--fc-wash-fade-bot) * 0.1667),rgba(248,248,248,0.844) calc(var(--fc-wash-fade-bot) * 0.25),rgba(248,248,248,0.741) calc(var(--fc-wash-fade-bot) * 0.3333),rgba(248,248,248,0.624) calc(var(--fc-wash-fade-bot) * 0.4167),rgba(248,248,248,0.5) calc(var(--fc-wash-fade-bot) * 0.5),rgba(248,248,248,0.376) calc(var(--fc-wash-fade-bot) * 0.5833),rgba(248,248,248,0.259) calc(var(--fc-wash-fade-bot) * 0.6667),rgba(248,248,248,0.156) calc(var(--fc-wash-fade-bot) * 0.75),rgba(248,248,248,0.074) calc(var(--fc-wash-fade-bot) * 0.8333),rgba(248,248,248,0.02) calc(var(--fc-wash-fade-bot) * 0.9167),rgba(248,248,248,0) var(--fc-wash-fade-bot)),
    radial-gradient(ellipse 96% 40% at 40% 34%,rgba(252,252,255,0.92) 0%,rgba(252,252,255,0.9093) 6.25%,rgba(252,252,255,0.8775) 12.5%,rgba(252,252,255,0.8263) 18.75%,rgba(252,252,255,0.7581) 25%,rgba(252,252,255,0.6759) 31.25%,rgba(252,252,255,0.5839) 37.5%,rgba(252,252,255,0.4864) 43.75%,rgba(252,252,255,0.3881) 50%,rgba(252,252,255,0.2939) 56.25%,rgba(252,252,255,0.2082) 62.5%,rgba(252,252,255,0.1349) 68.75%,rgba(252,252,255,0.077) 75%,rgba(252,252,255,0.0361) 81.25%,rgba(252,252,255,0.0118) 87.5%,rgba(252,252,255,0.0016) 93.75%,rgba(252,252,255,0) 100%)}
}
@media (prefers-reduced-motion:reduce){
  body.fc-hf .wpb_row > .row-bg-wrap::before{animation:none!important;transform:none!important;translate:none!important}
}
@media print{
  body.fc-hf .wpb_row > .row-bg-wrap::before{animation:none!important;transform:none!important;translate:none!important}
}
/* ==== end evidence wash ==== */

/* ==== chapter Line (live-ui-chapters, PILOT-PLAN 7.11) ==== */
/* ---- The chapter buttons under the walkthrough: a small Line with six nodes (PILOT-PLAN 4.2 and 7.11; inventory
   ui:chapter-buttons, 6). Markup: build_pages.py walkthrough_chapters_hf() (the walkthrough marker's "hf": true), so the
   strip is .fc-chapters.fc-hf-ch and each .fc-ch carries its node, its stretch of the Line (.fc-hf-ch-seg: from its node
   to the next one; the last runs to the film's end) and its time and label. js/fc-hf.js lights the playing chapter's node,
   fills the Line up to the film's playhead and moves a bead of light along it; at rest the Line is a quiet rule with
   paper nodes and the times in FComply blue.
   Layouts: one row of six from 820 px, three and three below that, a column under 481 px (the phone). No layout is
   taller than today's pills at 1440 or 430. With no JavaScript, an error, reduced motion or ?fcqa=: the strip at rest,
   all visible (the entrance's start state applies only under .hf-ch-armed, which the script sets). Under reduced motion
   the playing node still lights, the Line fills to it in one step and nothing travels. Color by meaning: blue is the
   Line and the playing chapter; no coral (nothing here is a gap). */
body.fc-hf .fc-walkthrough .fc-chapters.fc-hf-ch{--hf-blue:#0809FF;--hf-ink:#2A2D34;--hf-sec:#505864;--hf-rule:#CBD2DE;--hf-paper:#FFFFFF;
  --hf-ease:cubic-bezier(.16,1,.3,1);--hf-gap:16px;--hf-rise:8px;
  position:relative;display:grid!important;grid-template-columns:repeat(var(--hf-ch-n,6),minmax(0,1fr));column-gap:var(--hf-gap);row-gap:16px;
  flex-wrap:nowrap;align-items:start;margin:18px 0 0!important;padding:0}
/* a button is its column: no pill, no lift; the node sits on the Line at its top left. The radius is !important because
   Salient rounds every button to 200px, which drew the focus ring as a pill through the node */
body.fc-hf .fc-hf-ch .fc-ch{-webkit-appearance:none;appearance:none;position:relative;display:block!important;min-width:0;min-height:44px!important;margin:0;
  padding:20px 6px 2px 0!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;transform:none!important;
  text-align:left;cursor:pointer;color:var(--hf-sec);font:500 .86rem/1.38 "Plus Jakarta Sans",sans-serif;letter-spacing:0;-webkit-tap-highlight-color:transparent;
  transition:color .15s ease}
body.fc-hf .fc-hf-ch .fc-ch.is-on{background:transparent!important;border:0!important}
body.fc-hf .fc-hf-ch .fc-hf-ch-txt{display:block;position:relative;z-index:1;overflow-wrap:break-word}
/* the time: a figure in Montserrat, tabular, FComply blue; the label in the secondary ink */
body.fc-hf .fc-hf-ch .fc-ch b{display:inline;margin:0 .2em 0 0;color:var(--hf-blue);font:600 .86rem/1.38 Montserrat,"Plus Jakarta Sans",sans-serif;letter-spacing:0;
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
body.fc-hf .fc-hf-ch .fc-hf-ch-k{color:inherit}
body.fc-hf .fc-hf-ch .fc-hf-ch-c{white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
body.fc-hf .fc-hf-ch .fc-hf-ch-nb{white-space:nowrap}
/* the node: paper, a rule rim; 12 px, centered on the Line (x 6, y 7) */
body.fc-hf .fc-hf-ch .fc-hf-ch-node{position:absolute;left:0;top:1px;z-index:1;display:block;width:12px;height:12px;box-sizing:border-box;border-radius:50%;
  background:var(--hf-paper);border:2px solid var(--hf-rule);box-shadow:0 1px 2px rgba(42,45,52,.10);
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s var(--hf-ease)}
/* this chapter's stretch of the Line: node center to the next node's center (the column plus the gap) */
body.fc-hf .fc-hf-ch .fc-hf-ch-seg{position:absolute;left:6px;top:6px;z-index:0;display:block;width:calc(100% + var(--hf-gap));height:2px;border-radius:1px;
  background:var(--hf-rule);transform-origin:0 50%}
body.fc-hf .fc-hf-ch .fc-ch:last-of-type .fc-hf-ch-seg{width:calc(100% - 6px)}
/* the lit part: FComply blue with a faint glow, filled to the playhead by the script (transform only) */
body.fc-hf .fc-hf-ch .fc-hf-ch-seg>i{position:absolute;left:0;top:0;display:block;width:100%;height:100%;border-radius:inherit;background:var(--hf-blue);
  box-shadow:0 0 6px rgba(8,9,255,.28);transform:scaleX(0);transform-origin:0 50%}
/* the bead of light at the playhead (placed by the script; only while a film is open) */
body.fc-hf .fc-hf-ch .fc-hf-ch-tip{position:absolute;left:0;top:0;z-index:2;display:block;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,#3a3bff 0 30%,var(--hf-blue) 62%);box-shadow:0 0 0 3px rgba(8,9,255,.14),0 0 14px 4px rgba(8,9,255,.34);
  opacity:0;transition:opacity .25s ease}
body.fc-hf .fc-hf-ch.hf-ch-playing .fc-hf-ch-tip{opacity:1}

/* chapters already played: their nodes keep a blue rim */
body.fc-hf .fc-hf-ch .fc-ch.hf-ch-past .fc-hf-ch-node{border-color:var(--hf-blue)}
/* the playing chapter: its node lit (blue satin, a halo), its label in ink; one lit node at a time */
body.fc-hf .fc-hf-ch .fc-ch.hf-ch-on{color:var(--hf-ink)}
body.fc-hf .fc-hf-ch .fc-ch.hf-ch-on .fc-hf-ch-node{background:var(--hf-blue);border-color:var(--hf-blue);transform:scale(1.25);
  box-shadow:0 0 0 4px rgba(8,9,255,.14),0 0 12px 2px rgba(8,9,255,.28)}
/* a pointer over a chapter: its node's rim turns blue and its label to ink (no lift, no scale) */
@media (hover:hover) and (pointer:fine){
  body.fc-hf .fc-hf-ch .fc-ch:hover{color:var(--hf-ink)}
  body.fc-hf .fc-hf-ch .fc-ch:hover .fc-hf-ch-node{border-color:var(--hf-blue)}
}
body.fc-hf .fc-hf-ch .fc-ch:focus{outline:none}
body.fc-hf .fc-hf-ch .fc-ch:focus-visible{outline:2px solid var(--hf-blue);outline-offset:4px;color:var(--hf-ink)}
body.fc-hf .fc-hf-ch .fc-ch:focus-visible .fc-hf-ch-node{border-color:var(--hf-blue)}

/* the entrance, once, when the strip first comes into view (start states only under .hf-ch-armed, set by the script):
   the Line draws from the left at one speed, stretch by stretch (110 ms each); each node appears as the Line reaches it
   and its words rise 8 px just after. No overshoot: the draw is linear, the rest ease out. */
body.fc-hf .fc-hf-ch.hf-ch-armed:not(.hf-ch-in) .fc-hf-ch-seg{transform:scaleX(0)}
body.fc-hf .fc-hf-ch.hf-ch-armed:not(.hf-ch-in) .fc-hf-ch-node{opacity:0;transform:scale(.6)}
body.fc-hf .fc-hf-ch.hf-ch-armed:not(.hf-ch-in) .fc-hf-ch-txt{opacity:0;transform:translate3d(0,var(--hf-rise),0)}
body.fc-hf .fc-hf-ch.hf-ch-armed.hf-ch-in .fc-hf-ch-seg{transition:transform .11s linear calc(var(--hf-ch-i,0) * 110ms)}
body.fc-hf .fc-hf-ch.hf-ch-armed.hf-ch-in .fc-hf-ch-node{transition:opacity .3s var(--hf-ease) calc(var(--hf-ch-i,0) * 110ms),transform .3s var(--hf-ease) calc(var(--hf-ch-i,0) * 110ms)}
body.fc-hf .fc-hf-ch.hf-ch-armed.hf-ch-in .fc-hf-ch-txt{transition:opacity .45s var(--hf-ease) calc(var(--hf-ch-i,0) * 110ms + 60ms),transform .45s var(--hf-ease) calc(var(--hf-ch-i,0) * 110ms + 60ms)}

/* three and three (481 to 819 px): the Line runs along each row; the third and sixth stretches end at their column's edge */
@media only screen and (max-width:819px){
  body.fc-hf .fc-walkthrough .fc-chapters.fc-hf-ch{grid-template-columns:repeat(3,minmax(0,1fr));--hf-gap:14px;row-gap:8px}
  body.fc-hf .fc-hf-ch .fc-ch:nth-of-type(3n) .fc-hf-ch-seg{width:calc(100% - 6px)}
  body.fc-hf .fc-hf-ch .fc-ch,body.fc-hf .fc-hf-ch .fc-ch b{font-size:.84rem;line-height:1.3}
}
/* phones (under 481 px): a column; the Line runs down the left through every node, and its words travel 70 percent.
   The node sits on the first line's center: --pt (the row's top padding) plus half of --lh (the line height). */
@media only screen and (max-width:480px){
  body.fc-hf .fc-walkthrough .fc-chapters.fc-hf-ch{grid-template-columns:minmax(0,1fr);row-gap:0;--hf-rise:5.6px;--pt:12px;--lh:19.6px;--fs:.875rem;margin-top:14px!important}
  body.fc-hf .fc-hf-ch .fc-ch{padding:var(--pt) 4px var(--pt) 26px!important;font-size:var(--fs);line-height:var(--lh)}
  body.fc-hf .fc-hf-ch .fc-ch b{font-size:var(--fs);line-height:var(--lh);margin-right:.35em}
  body.fc-hf .fc-hf-ch .fc-hf-ch-node{top:calc(var(--pt) + var(--lh) / 2 - 6px)}
  body.fc-hf .fc-hf-ch .fc-hf-ch-seg,body.fc-hf .fc-hf-ch .fc-ch:nth-of-type(3n) .fc-hf-ch-seg{left:5px;top:calc(var(--pt) + var(--lh) / 2);width:2px;height:100%;transform-origin:50% 0}
  body.fc-hf .fc-hf-ch .fc-ch:last-of-type .fc-hf-ch-seg{height:calc(100% - var(--pt) - var(--lh) / 2)}
  body.fc-hf .fc-hf-ch .fc-hf-ch-seg>i{transform:scaleY(0);transform-origin:50% 0}
  body.fc-hf .fc-hf-ch.hf-ch-armed:not(.hf-ch-in) .fc-hf-ch-seg{transform:scaleY(0)}
  body.fc-hf .fc-hf-ch .fc-ch:focus-visible{outline-offset:2px}
}
/* the narrowest phones: labels wrap to two lines, so the rows close up (still 44 px tap targets) */
@media only screen and (max-width:360px){
  body.fc-hf .fc-walkthrough .fc-chapters.fc-hf-ch{--pt:10px;--lh:18px;--fs:.84rem}
}
/* reduced motion: no entrance, no travel, no transitions; the playing node still lights */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-hf-ch .fc-ch,body.fc-hf .fc-hf-ch .fc-hf-ch-node,body.fc-hf .fc-hf-ch .fc-hf-ch-seg,body.fc-hf .fc-hf-ch .fc-hf-ch-txt,body.fc-hf .fc-hf-ch .fc-hf-ch-tip{transition:none!important}
  body.fc-hf .fc-hf-ch.hf-ch-armed .fc-hf-ch-seg,body.fc-hf .fc-hf-ch.hf-ch-armed .fc-hf-ch-node,body.fc-hf .fc-hf-ch.hf-ch-armed .fc-hf-ch-txt{opacity:1!important;transform:none!important}
  body.fc-hf .fc-hf-ch .fc-hf-ch-tip{display:none}
}
/* print: at rest, every chapter visible */
@media print{
  body.fc-hf .fc-hf-ch .fc-hf-ch-seg,body.fc-hf .fc-hf-ch .fc-hf-ch-node,body.fc-hf .fc-hf-ch .fc-hf-ch-txt{opacity:1!important;transform:none!important}
  body.fc-hf .fc-hf-ch .fc-hf-ch-tip{display:none}
}
/* ==== end chapter Line ==== */

/* ==== film cover (live-ui-film-cover, PILOT-PLAN 7.11) ==== */
/* ---- The film covers (PILOT-PLAN 7.11; inventory ui:film-cover (2): the hero film's panel and the walkthrough's) -----
   js/fc-scroll.js still builds each cover from its .fc-play button, as on every page: the play disc (.fc-film-orb), the
   running time (.fc-film-dur), the click that plays the film in the panel, one film at a time, Q14's phone fade, and the
   hero cards stepping aside while the film plays (style.css .is-film-host rules, untouched). On this page:
   * The play disc is the seal's material, blue satin: the radial #4B4CFF, #1C1DFF, #0809FF, #0607D2 face the pill seals
     use, a 1 px highlight on the upper edge where the key light sits, a soft shade at its foot, a neutral contact shadow
     (no black) and a thin pale #DCEBFF ring, with a white rounded play triangle, centered on its centroid. 96 px, 72 px
     on a phone (style.css's sizes). The face and the triangle are one layer (the disc's ::before), so a hover step
     forward (scale 1.06, the rim lit with a soft blue glow) or a press (0.94) never separates them; 0.2 s and 0.12 s
     on the house curve, no overshoot. No dark scrim: the picture is never darkened.
   * The disc follows the pointer (a fine pointer only, as today) with an interface-speed ease written by js/fc-hf.js:
     a time constant of 0.1 s (95 percent of the way in 0.3 s, the same at 60 Hz and 120 Hz), as a transform (never
     left/top), held inside the panel with a 12 px margin and 12 px off the running time's label (the script eases the
     disc to a rest just under the label and round its corner, never under it); it returns to the center when the
     pointer leaves.
   * The running time is a frosted glass label (white at 0.88 over an 8 px frost, a #CBD2DE hairline) in Montserrat 500
     tabular, #2A2D34, at the site's micro step, in the upper right corner, where neither hero card reaches it at any
     scroll offset (the lower right, today's corner, is under "Immediately; 24 hours is the limit" at 1440 once the page
     scrolls). It rises 6 px into place with a 3 px deblur in 0.35 s when the panel is first half in view, holds, and
     retires in 0.25 s by 2.6 s (Gavin, 12 Sep: gone after a moment), and returns on hover and on keyboard focus.
   * The keyboard focus ring: a blue ring inside the panel's edge, with a white hairline so it reads on any frame.
   * The player the cover opens: the progress bar is the Line (a 3 px FComply-blue strip with a soft glow on a pale
     track; white on white vanished over the rebuilt films' bright frames), the sound and close buttons are paper discs
     with charcoal glyphs that lift 1 px (no scale), and the paused disc is the seal.
   Start states apply only under .fc-hf-cv, which js/fc-hf.js sets once it has taken the disc over; with no script or on
   any error the cover keeps today's timing (the running time for 2.6 s after load, the old follow) in the new look.
   Reduced motion: no follow, no scale, the running time simply shown. ?fcqa=: the same, frozen for the checks. */
body.fc-hf .fc-film-cover,body.fc-hf .fc-loop .fc-film-ui{--fcv-blue:#0809FF;--fcv-ink:#2A2D34;--fcv-pale:#DCEBFF;--fcv-rule:#CBD2DE;--fcv-paper:#FBFBFD;--fcv-lip:#E4E8F0;
  --fcv-satin:radial-gradient(circle at 32% 26%,#4B4CFF 0%,#1C1DFF 36%,#0809FF 62%,#0607D2 100%);
  --fcv-tri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M41.9 37.5v21L60.1 48z' fill='%23fff' stroke='%23fff' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fcv-ease:cubic-bezier(.16,1,.3,1)}
/* never darkened: the black scrim is gone */
body.fc-hf .fc-film-cover::before{display:none}
body.fc-hf .fc-film-cover:focus-visible{box-shadow:inset 0 0 0 3px var(--fcv-blue),inset 0 0 0 5px rgba(255,255,255,.92)}

/* the disc: the outer span only carries the follow (a transform from js/fc-hf.js); the face is its ::before */
body.fc-hf .fc-film-cover .fc-film-orb{background:none;box-shadow:none;border-radius:50%;pointer-events:none}
body.fc-hf .fc-film-cover .fc-film-orb.fc-hf-seal,body.fc-hf .fc-film-cover:hover .fc-film-orb.fc-hf-seal{transform:none;transition:none;will-change:transform}
body.fc-hf .fc-film-cover .fc-film-orb::after{display:none}
body.fc-hf .fc-film-cover .fc-film-orb::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--fcv-tri) 50% 50%/100% 100% no-repeat,var(--fcv-satin);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 6px rgba(3,4,122,.34),0 0 0 3px rgba(220,235,255,.92),0 0 0 4px rgba(8,9,255,.08),
    0 18px 30px -18px rgba(42,45,52,.42),0 6px 14px -8px rgba(8,9,255,.4);
  transition:transform .2s var(--fcv-ease),box-shadow .2s ease,filter .2s ease}
/* hover and keyboard focus: the seal steps forward and its rim is lit */
body.fc-hf .fc-film-cover.fc-hf-cv:hover .fc-film-orb::before,body.fc-hf .fc-film-cover.fc-hf-cv:focus-visible .fc-film-orb::before{transform:scale(1.06);filter:brightness(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(3,4,122,.3),0 0 0 3px #FFFFFF,0 0 0 5px rgba(8,9,255,.55),
    0 0 26px 4px rgba(8,9,255,.32),0 22px 34px -18px rgba(42,45,52,.4)}
body.fc-hf .fc-film-cover.fc-hf-cv:active .fc-film-orb::before{transform:scale(.94);transition-duration:.12s}

/* the running time: frosted glass, upper right, Montserrat tabular at the site's micro step */
body.fc-hf .fc-film-cover .fc-film-dur{top:14px;right:14px;bottom:auto;z-index:7;color:var(--fcv-ink);
  font-family:"Montserrat","Plus Jakarta Sans",sans-serif;font-weight:500;line-height:1;letter-spacing:.02em!important;
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;
  padding:7px 11px 6px;border-radius:999px;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);
  box-shadow:inset 0 0 0 1px rgba(203,210,222,.9),0 10px 20px -12px rgba(22,25,60,.36)}
/* armed by js/fc-hf.js: hidden until the panel is first half in view, then 2.6 s; on hover and focus while wanted */
body.fc-hf .fc-film-cover.fc-hf-cv .fc-film-dur{animation:none;opacity:0;transform:translateY(6px);filter:blur(3px);
  transition:opacity .25s cubic-bezier(.42,0,1,1),transform .25s cubic-bezier(.42,0,1,1),filter .25s linear}
body.fc-hf .fc-film-cover.fc-hf-cv.is-dur-on .fc-film-dur,body.fc-hf .fc-film-cover.fc-hf-cv:hover .fc-film-dur,body.fc-hf .fc-film-cover.fc-hf-cv:focus-visible .fc-film-dur{
  opacity:1;transform:none;filter:none;transition:opacity .35s var(--fcv-ease),transform .35s var(--fcv-ease),filter .35s var(--fcv-ease)}
body.fc-hf .fc-film-cover.fc-hf-cv.is-still .fc-film-dur{opacity:1;transform:none;filter:none;transition:none}

/* the player: the Line as the progress bar, paper discs for sound and close, the seal as the paused disc */
body.fc-hf .fc-loop .fc-film-bar{left:16px;right:16px;bottom:14px;height:3px;border-radius:3px;overflow:visible;background:rgba(220,235,255,.78);box-shadow:0 0 0 1px rgba(255,255,255,.3)}
body.fc-hf .fc-loop .fc-film-bar i{background:var(--fcv-blue);border-radius:3px;box-shadow:0 0 8px rgba(8,9,255,.5),0 0 2px rgba(8,9,255,.7);transition:width .25s linear}
body.fc-hf .fc-loop .fc-film-btn{background:var(--fcv-paper);color:var(--fcv-ink);
  box-shadow:inset 0 0 0 1px rgba(203,210,222,.85),0 2px 0 var(--fcv-lip),0 12px 22px -14px rgba(22,25,60,.45);
  transition:transform .2s var(--fcv-ease),box-shadow .2s ease,opacity .45s}
body.fc-hf .fc-loop .fc-film-btn:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(203,210,222,.95),0 2px 0 var(--fcv-lip),0 8px 16px -10px rgba(22,25,60,.5)}
body.fc-hf .fc-loop .fc-film-btn:focus-visible{outline:2px solid var(--fcv-blue);outline-offset:2px}
body.fc-hf .fc-loop .fc-film-mute::before{background:var(--fcv-ink)}
body.fc-hf .fc-loop .fc-film-paused{background:var(--fcv-tri) 50% 50%/100% 100% no-repeat,var(--fcv-satin);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 6px rgba(3,4,122,.34),0 0 0 3px rgba(220,235,255,.92),0 16px 28px -16px rgba(42,45,52,.45)}
body.fc-hf .fc-loop .fc-film-paused::after{display:none}

@media only screen and (max-width:690px){
  body.fc-hf .fc-film-cover .fc-film-dur{top:10px;right:10px;padding:6px 9px 5px}
  body.fc-hf .fc-film-cover .fc-film-orb::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 5px rgba(3,4,122,.34),0 0 0 2.5px rgba(220,235,255,.92),
    0 14px 24px -14px rgba(42,45,52,.42),0 5px 12px -7px rgba(8,9,255,.4)}
  body.fc-hf .fc-loop .fc-film-bar{left:12px;right:12px;bottom:10px}
}
/* reduced motion: no follow (the script never starts it), no scale, no rise; the running time simply shown */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-film-cover .fc-film-dur,body.fc-hf .fc-film-cover.fc-hf-cv .fc-film-dur{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  body.fc-hf .fc-film-cover .fc-film-orb,body.fc-hf .fc-film-cover .fc-film-orb::before,body.fc-hf .fc-film-cover:hover .fc-film-orb,
  body.fc-hf .fc-film-cover.fc-hf-cv:hover .fc-film-orb::before,body.fc-hf .fc-film-cover.fc-hf-cv:focus-visible .fc-film-orb::before,
  body.fc-hf .fc-film-cover.fc-hf-cv:active .fc-film-orb::before{transform:none!important;transition:none!important}
  body.fc-hf .fc-loop .fc-film-bar i{transition:none}
  body.fc-hf .fc-loop .fc-film-btn,body.fc-hf .fc-loop .fc-film-btn:hover{transform:none;transition:opacity .45s}
}
@media print{body.fc-hf .fc-film-cover .fc-film-dur{animation:none;opacity:1;transform:none;filter:none}}
/* ==== end film cover ==== */

/* ==== wash shape (live-wash-shape, PILOT-PLAN 7.10) ==== */
/* ---- The mustard discs retire, and the loop's poster takes the flat box's place (PILOT-PLAN 7.10; inventory row 30
   shape:nectar-animated-shape). The three Salient discs of this page are already retired by the lanes that own them: the
   two #ffce59 panel discs by the grow-in section (which also draws the Line along each mat's floor) and the white title
   disc by the title Line section; the satin paper frame of every panel is the panel-lift section's. What was left of the
   shapes' look was one flat box: style.css hides every loop under reduced motion and paints its .fc-loop #d3dbe1 with a
   300 px floor, so the hero's square loop became a 488 x 300 gray box under the film's play disc, and the statute fold's
   3:2 loop a gray band in its paper frame. On this page the loop's own poster (its frame 0) stands there instead:
   build_pages.py loop_still() writes it after the video as picture.fc-hf-lp-pic > img.fc-hf-lp-still, the img with the
   poster's own width and height, and marks the .fc-loop .fc-hf-lp (the page source flags its three legacy loops with
   "still": true). With motion allowed the picture's source is a 1 px blank, so the poster is never requested a second
   time (in any engine), and the picture is display:none; under reduced motion the img's own src is chosen: the poster,
   which the hidden loop video has already fetched, so it comes from the cache. The img is not lazy, because a lazy img
   that is display:none never loads and its decode() never settles (qa/shot.mjs settle() waits on every image's decode()).
   While the film plays the still steps aside with the loop. A HyperFrames loop (video.fc-hf-loop) shows its own poster
   (the loop section at the top of this file) and never gets this still. The same floor also cut the walkthrough's poster:
   its 16:9 panel (.fc-loop.fc-wide, an img with object-fit:cover) was forced to 300 px under reduced motion, so on a
   phone (372 x 209) the poster was cropped to 372 x 300 and lost the ends of its kicker and headline; the floor goes
   there too, so the poster keeps its own shape. No script: the still is plain markup, so it holds with no JavaScript,
   and nothing here moves. */
body.fc-hf .fc-loop.fc-hf-lp > picture.fc-hf-lp-pic{display:none}
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-loop.fc-hf-lp{background:none;min-height:0}
  body.fc-hf .fc-loop.fc-hf-lp > picture.fc-hf-lp-pic{display:block;margin:0}
  body.fc-hf .fc-loop.fc-hf-lp > picture.fc-hf-lp-pic > img.fc-hf-lp-still{display:block;width:100%;height:auto;margin:0;border-radius:14px;background:#F7F8FA}
  body.fc-hf .fc-loop.fc-hf-lp.is-film > picture.fc-hf-lp-pic{display:none}
  body.fc-hf .fc-loop.fc-wide{min-height:0}
}
/* ==== end wash shape ==== */

/* ==== details folds (live-ui-details-fold, PILOT-PLAN 7.11) ==== */
/* ---- The details folds (PILOT-PLAN 7.11 'Details folds'; inventory ui:details-fold, 4 on post 388): Listen
   (details.fc-listen, build_pages.py listen_block), the statute as first written (details.fc-ig-fold, components_ig.py),
   the two sections as first written (.fc-explore > details, the explore marker) and Sources (details.fc-x-sources).
   The markup is unchanged. A fold opens in blue in 0.25 s on every engine. Chromium tweens ::details-content with
   interpolate-size (style.css already does, at .35 s ease; here .25 s, closing in .2 s). The curve is an ease-out
   with no overshoot, cubic-bezier(.33,1,.68,1): the house entrance curve (.16,1,.3,1) is 90 percent done 83 ms into a
   0.25 s move, so a 600 px fold read as a jump; this one is 70 percent there at 83 ms and lands at 0.25 s.
   Where interpolate-size is missing (WebKit, Firefox) js/fc-hf.js tweens the fold's height over the same time on the
   same curve. As it opens the body rises 8 px (5.6 px on phones) and fades in; as it closes it fades and settles back.
   Color by meaning: blue is the open fold. Open: the question in FComply blue and the minus on a lit mark (paperLit: a
   pale face and a 2 px blue rim). Closed: the plus in ink on the paper disc. No scale on hover (the bars turn blue);
   a blue focus ring. The Listen card's own look, its length label and its icon belong to live-listen-card.
   Start states apply only under .hf-x (set by the script). With no JavaScript or on an error the folds open and close
   as the browser does, in the blue state. Reduced motion and ?fcqa= (.hf-x-still): they open at once, blue, and
   nothing moves. */
body.fc-hf details.fc-x{--hfx-blue:#0809FF;--hfx-ink:#2A2D34;--hfx-sec:#505864;--hfx-pale:#DCEBFF;--hfx-ease:cubic-bezier(.33,1,.68,1);--hfx-rise:8px}
/* the question: ink (Sources keeps its quieter secondary ink), FComply blue once open. While the script closes a fold
   (.hf-x-shut, [open] until the tween ends) the summary is already in its closed state, so the color turns with the height */
body.fc-hf details.fc-x>summary{color:var(--hfx-ink);transition:color .25s ease}
body.fc-hf details.fc-x.fc-x-sources>summary{color:var(--hfx-sec)}
body.fc-hf details.fc-x>summary .fc-x-q{color:inherit}
body.fc-hf details.fc-x[open]:not(.hf-x-shut)>summary{color:var(--hfx-blue)}
/* the mark: the paper disc with the plus in ink; open, it lights (pale face, 2 px blue rim) and the bar turns to a blue minus */
body.fc-hf details.fc-x>summary .fc-x-mark{transform:none!important;transition:background-color .25s ease,box-shadow .25s ease}
body.fc-hf details.fc-x>summary .fc-x-mark::before,body.fc-hf details.fc-x>summary .fc-x-mark::after{background:var(--hfx-ink);
  transition:transform .25s var(--hfx-ease),background-color .25s ease}
body.fc-hf details.fc-x[open]:not(.hf-x-shut)>summary .fc-x-mark{background:var(--hfx-pale);
  box-shadow:inset 0 0 0 2px var(--hfx-blue),0 8px 16px -12px rgba(8,9,255,.45),0 1px 3px rgba(22,25,31,.08)}
body.fc-hf details.fc-x[open]:not(.hf-x-shut)>summary .fc-x-mark::before,body.fc-hf details.fc-x[open]:not(.hf-x-shut)>summary .fc-x-mark::after{background:var(--hfx-blue)}
/* closing under the script: the minus turns back to a plus with the height, not after it */
body.fc-hf details.fc-x.hf-x-shut>summary .fc-x-mark::after{transform:rotate(90deg)}
@media (hover:hover) and (pointer:fine){
  body.fc-hf details.fc-x>summary:hover .fc-x-mark::before,body.fc-hf details.fc-x>summary:hover .fc-x-mark::after{background:var(--hfx-blue)}
}
/* keyboard: a blue ring inside the summary's own box, so the height tween's clip never cuts it */
body.fc-hf details.fc-x>summary:focus{outline:none}
body.fc-hf details.fc-x>summary:focus-visible{outline:2px solid var(--hfx-blue);outline-offset:-2px;border-radius:10px}
/* Sources' summary had no side padding, so the ring ran over its mark: 4 px each side, and the body moves with it */
body.fc-hf details.fc-x.fc-x-sources>summary{padding-left:4px;padding-right:4px}
body.fc-hf details.fc-x.fc-x-sources>.fc-x-body{padding-left:42px}
/* the rise lives on the fold's content box (::details-content), so it starts in the same frame as the height in every
   engine (on the body it started one frame late in Chromium, which left the opening fold blank for a frame): closed, and
   while the script closes a fold, the box sits 8 px low at opacity 0; open, it rises to its place as it fades in.
   29 Sep repair (the gate's collision): the rise carries the box's own clip down with it, past the fold's bottom rule,
   so the moving box must be cut at the fold's own edge. In WebKit and Firefox the script's overflow:hidden on the
   <details> does that. In Chromium (the CSS tween below) two things do it:
   - a clip-path whose bottom inset matches the rise, on the same time and curve, holds the painted box at the fold's
     edge. Only the bottom inset moves; the other sides sit 8 px outside the box, so the box's own pixel-snapped clip
     still draws its sides and a settled fold paints exactly as before;
   - the three folds that end on a rule clip their own content up and down (x stays visible), so not even a part pixel
     row of cut text lands on the rule. The clip stands: switching it on and off with each tween forced a full relayout
     of the fold (about 6 ms a toggle on a desk, 25 ms at 4x CPU), and it changes no settled pixel (in Chromium the
     content box already clips its own content). Not on Sources, which has no rule: a clip there would cut its mark's
     shadow.
   The rise is a relative offset (top), not a translate: a translate put the box on its own compositor layer, whose clip
   Chromium rounds out to whole pixels, and in about 1 frame in 100 the last part row of cut text sat on the rule's pixel
   row; the offset moves it in the page's own paint, where the fold's clip is snapped. Nothing inside a fold is
   positioned against anything outside it, so the relative box changes no layout. */
body.fc-hf details.fc-x.hf-x::details-content{position:relative;top:var(--hfx-rise);opacity:0;transition:opacity .2s ease,top .2s var(--hfx-ease)}
body.fc-hf details.fc-x.hf-x[open]:not(.hf-x-shut)::details-content{opacity:1;top:0;transition-duration:.25s;transition-timing-function:var(--hfx-ease)}
/* Chromium: the same box also tweens its height (interpolate-size), .25 s open and .2 s closed. content-visibility is
   in this list only here: in WebKit, where the script holds the height, a lingering content-visibility would reopen the
   fold for .2 s after it closed */
@supports (interpolate-size:allow-keywords){
  body.fc-hf details.fc-x::details-content{transition:block-size .2s var(--hfx-ease),content-visibility .2s allow-discrete}
  body.fc-hf details.fc-x[open]::details-content{transition-duration:.25s}
  body.fc-hf details.fc-x.hf-x::details-content{clip-path:inset(-8px -8px var(--hfx-rise) -8px);
    transition:block-size .2s var(--hfx-ease),content-visibility .2s allow-discrete,opacity .2s ease,top .2s var(--hfx-ease),clip-path .2s var(--hfx-ease)}
  body.fc-hf details.fc-x.hf-x[open]:not(.hf-x-shut)::details-content{clip-path:inset(-8px -8px 0 -8px);transition-duration:.25s;transition-timing-function:var(--hfx-ease)}
  body.fc-hf details.fc-x.hf-x:not(.fc-x-sources){overflow-x:visible;overflow-y:clip}
}
/* an engine with no ::details-content (the script sets .hf-x-body): the same rise and fade on the body; no residual transform */
@keyframes hfXIn{from{opacity:0;transform:translate3d(0,var(--hfx-rise,8px),0)}to{opacity:1;transform:none}}
@keyframes hfXOut{from{opacity:1}to{opacity:0}}
body.fc-hf details.fc-x.hf-x-body[open]>.fc-x-body{animation:hfXIn .25s var(--hfx-ease) backwards}
body.fc-hf details.fc-x.hf-x-body:is(:not([open]),.hf-x-shut)>.fc-x-body{animation:hfXOut .2s ease forwards}
/* phones travel 70 percent of the desk distance */
@media only screen and (max-width:690px){
  body.fc-hf details.fc-x{--hfx-rise:5.6px}
}
/* reduced motion and ?fcqa=: open at once, blue; no tween, no rise, no turning mark */
body.fc-hf details.fc-x.hf-x-still::details-content{transition:none!important;opacity:1;top:auto;translate:none}
body.fc-hf details.fc-x.hf-x-still>.fc-x-body{animation:none!important}
body.fc-hf details.fc-x.hf-x-still>summary,body.fc-hf details.fc-x.hf-x-still>summary .fc-x-mark,
body.fc-hf details.fc-x.hf-x-still>summary .fc-x-mark::before,body.fc-hf details.fc-x.hf-x-still>summary .fc-x-mark::after{transition:none!important}
@media (prefers-reduced-motion:reduce){
  body.fc-hf details.fc-x::details-content{transition:none!important}
  body.fc-hf details.fc-x>.fc-x-body{animation:none!important}
  body.fc-hf details.fc-x>summary,body.fc-hf details.fc-x>summary .fc-x-mark,
  body.fc-hf details.fc-x>summary .fc-x-mark::before,body.fc-hf details.fc-x>summary .fc-x-mark::after{transition:none!important}
}
/* ==== end details folds ==== */

/* ==== section folds (live-ui-section-fold, PILOT-PLAN 7.11) ==== */
/* ---- The section folds (PILOT-PLAN 7.11 'Section folds (3)'; inventory ui:section-fold, 3 on post 388): the three
   question heads (build_pages.py sec(): .fc-sec-head > h2.fc-sec-h > button.fc-sec-btn, then p.fc-sec-deck; markup
   unchanged). The behavior is today's: opening one closes the others, and a head that would end up near the top is
   brought to 90 px (js/fc-hf.js carries the scroll on the camera curve instead of the browser's smooth scroll).
   Color by meaning: blue is the open fold. Open: the question in FComply blue, the mark lit (paperLit: a pale face
   and a 2 px blue rim) with a blue minus, and the Line (2 px FComply blue with its soft glow) drawn along the head's
   top rule from the left on the camera curve cubic-bezier(.45,0,.2,1), a bead of light riding its tip (the title
   Line's recipe). Closed: the question in ink, the plus in ink on the paper disc, the rule a hairline. No coral: an
   open section is not a gap. The mark is the details folds' mark (live-ui-details-fold), so the two folds read as one
   component: no scale on hover (the bars turn blue), a blue focus ring. Opening: the colors and the mark answer in
   0.25 s, the Line draws in 0.6 s (0.45 s under 690 px, where it is a third as long); closing: all of it retires in
   0.15 s. The P.L. number in the deck keeps its hyphen (contextual alternates off: Plus Jakarta Sans drew 117-348
   with a dash-like glyph).
   Even spacing (balance-every-page): a row whose last visible piece is a head (the first head shares its row with the
   lead paragraph) gives up its bottom padding, which the script marks as .hf-sec-tail, so the three closed heads stand
   at one pitch (the deck's own 22 px under each), as the second and third already did, and the first head, open,
   stands as far above the statute sheet as the third stands above its screen (it stood 72 px further off at 1440). A row
   a head starts (.hf-sec-lead) gives up its top padding too, so the second head, whose opening paragraph shares its row,
   no longer drops 29 px under the pointer when it opens.
   Transitions and the draw apply only under .hf-sec (set by the script), so with no JavaScript, on an error, under
   ?fcqa= (.hf-sec-still) and under reduced motion every state change is instant. Nothing here changes a closed head's
   height: the Line and the bead are absolutely placed over the top rule. */
body.fc-hf .fc-sec-head{--hfs-blue:#0809FF;--hfs-ink:#2A2D34;--hfs-sec:#505864;--hfs-pale:#DCEBFF;--hfs-cam:cubic-bezier(.45,0,.2,1);
  --hfs-ease:cubic-bezier(.33,1,.68,1);--hfs-draw:.6s;--hfs-w:1152px;position:relative}
/* the question: ink, FComply blue once open; the deck in the secondary ink; hyphens stay hyphens */
body.fc-hf .fc-sec-head .fc-sec-btn{color:var(--hfs-ink)}
body.fc-hf .fc-sec-head.is-open .fc-sec-btn{color:var(--hfs-blue)}
body.fc-hf .fc-sec-head .fc-sec-t,body.fc-hf .fc-sec-head .fc-sec-deck{font-feature-settings:"calt" 0}
body.fc-hf .fc-sec-head .fc-sec-deck{color:var(--hfs-sec)}
/* the mark: the paper disc with the plus in ink; open, it lights and the bar lies down into a blue minus */
body.fc-hf .fc-sec-head .fc-x-mark{transform:none!important}
body.fc-hf .fc-sec-head .fc-x-mark::before,body.fc-hf .fc-sec-head .fc-x-mark::after{background:var(--hfs-ink)}
body.fc-hf .fc-sec-head.is-open .fc-x-mark{background:var(--hfs-pale);
  box-shadow:inset 0 0 0 2px var(--hfs-blue),0 8px 16px -12px rgba(8,9,255,.45),0 1px 3px rgba(22,25,31,.08)}
body.fc-hf .fc-sec-head.is-open .fc-x-mark::before,body.fc-hf .fc-sec-head.is-open .fc-x-mark::after{background:var(--hfs-blue)}
@media (hover:hover) and (pointer:fine){
  body.fc-hf .fc-sec-head .fc-sec-btn:hover .fc-x-mark::before,body.fc-hf .fc-sec-head .fc-sec-btn:hover .fc-x-mark::after{background:var(--hfs-blue)}
}
/* keyboard: a blue ring round the whole head, the question and its deck (on the button alone it cut through the deck,
   which sits 14 px up into the button's box; today's ring was a 200 px pill doing the same, from Salient's button
   radius). An engine without :has() rings the button, inside its own box */
body.fc-hf .fc-sec-head .fc-sec-btn:focus{outline:none}
body.fc-hf .fc-sec-head .fc-sec-btn:focus-visible{outline:2px solid var(--hfs-blue);outline-offset:-2px;border-radius:10px!important}
@supports selector(:has(a)){
  body.fc-hf .fc-sec-head .fc-sec-btn:focus-visible{outline:none}
  body.fc-hf .fc-sec-head:has(.fc-sec-btn:focus-visible){outline:2px solid var(--hfs-blue);outline-offset:4px;border-radius:10px}
}
/* the Line: over the top rule, drawn when the fold is open; the bead rides its tip while it draws */
body.fc-hf .fc-sec-head::before{content:"";position:absolute;z-index:1;left:0;right:0;top:-1px;height:2px;border-radius:2px;pointer-events:none;
  background:var(--hfs-blue);box-shadow:0 0 6px rgba(8,9,255,.28);transform-origin:0 50%;transform:none;opacity:0}
body.fc-hf .fc-sec-head.is-open::before{opacity:1}
body.fc-hf .fc-sec-head::after{content:"";position:absolute;z-index:2;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,#3a3bff 0 30%,var(--hfs-blue) 62%);box-shadow:0 0 0 3px rgba(8,9,255,.14),0 0 14px 4px rgba(8,9,255,.34);
  opacity:0;transform:translate3d(0,0,0)}
/* motion, only under the script's .hf-sec: opening draws (colors .25 s, the Line and bead .6 s); closing retires in .15 s */
body.fc-hf .fc-sec-head.hf-sec .fc-sec-btn{transition:color .15s ease}
body.fc-hf .fc-sec-head.hf-sec.is-open .fc-sec-btn{transition:color .25s ease}
body.fc-hf .fc-sec-head.hf-sec .fc-x-mark{transition:background-color .15s ease,box-shadow .15s ease}
body.fc-hf .fc-sec-head.hf-sec.is-open .fc-x-mark{transition:background-color .25s ease,box-shadow .25s ease}
body.fc-hf .fc-sec-head.hf-sec .fc-x-mark::before,body.fc-hf .fc-sec-head.hf-sec .fc-x-mark::after{transition:transform .15s var(--hfs-ease),background-color .15s ease}
body.fc-hf .fc-sec-head.hf-sec.is-open .fc-x-mark::before,body.fc-hf .fc-sec-head.hf-sec.is-open .fc-x-mark::after{transition:transform .25s var(--hfs-ease),background-color .25s ease}
body.fc-hf .fc-sec-head.hf-sec::before{transition:opacity .15s ease}
body.fc-hf .fc-sec-head.hf-sec.is-open::before{transition:none;animation:fcHfSecDraw var(--hfs-draw) var(--hfs-cam) both}
body.fc-hf .fc-sec-head.hf-sec.is-open::after{animation:fcHfSecBead var(--hfs-draw) var(--hfs-cam) both}
@keyframes fcHfSecDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fcHfSecBead{0%{opacity:0;transform:translate3d(0,0,0)}8%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate3d(var(--hfs-w),0,0)}}
/* even spacing: a head that ends its row no longer carries the row's bottom padding (the script marks the row) */
body.fc-hf #ajax-content-wrap .wpb_row.hf-sec-tail{padding-bottom:0!important}
body.fc-hf #ajax-content-wrap .wpb_row.hf-sec-tail>.row_col_wrap_12{padding-bottom:0!important}
/* and a head that starts its row does not carry the row's top padding, so opening its fold never moves it */
body.fc-hf #ajax-content-wrap .wpb_row.hf-sec-lead{padding-top:0!important}
body.fc-hf #ajax-content-wrap .wpb_row.hf-sec-lead>.row_col_wrap_12{padding-top:0!important}
/* the reading blocks inside a fold that no other piece moves (the statute's "as first written" fold, the second fold's
   opening paragraph and its "as first written" fold, the third fold's product paragraph): the R1 rise when the fold
   opens. The start state applies only
   while the script holds a block (.hf-sec-wait); the rise itself is the Web Animations API over the settled state */
body.fc-hf .fc-body.hf-sec-wait{opacity:0}
/* phones: the Line is a third as long, so it draws faster (duration by distance); and the 14 px style.css puts between
   consecutive rows (except rows of heads alone) does not come back above a head whose fold opens in its own row */
@media only screen and (max-width:690px){
  body.fc-hf .fc-sec-head{--hfs-draw:.45s}
  body.fc-hf #ajax-content-wrap .container-wrap .wpb_row+.wpb_row.hf-sec-lead{margin-top:0!important}
}
/* ?fcqa= and reduced motion: every state lands at once; the Line drawn, no bead, no rise */
body.fc-hf .fc-sec-head.hf-sec-still,body.fc-hf .fc-sec-head.hf-sec-still *,body.fc-hf .fc-sec-head.hf-sec-still::before,
body.fc-hf .fc-sec-head.hf-sec-still .fc-x-mark::before,body.fc-hf .fc-sec-head.hf-sec-still .fc-x-mark::after{transition:none!important;animation:none!important}
body.fc-hf .fc-sec-head.hf-sec-still::after{display:none;animation:none!important}
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-sec-head .fc-sec-btn,body.fc-hf .fc-sec-head .fc-x-mark,body.fc-hf .fc-sec-head::before,
  body.fc-hf .fc-sec-head .fc-x-mark::before,body.fc-hf .fc-sec-head .fc-x-mark::after{transition:none!important;animation:none!important}
  body.fc-hf .fc-sec-head::after{display:none;animation:none!important}
  body.fc-hf .fc-body.hf-sec-wait{opacity:1!important}
}
/* print: open heads with the Line drawn, no bead */
@media print{
  body.fc-hf .fc-sec-head::before{animation:none!important}
  body.fc-hf .fc-sec-head::after{display:none;animation:none!important}
  body.fc-hf .fc-body.hf-sec-wait{opacity:1!important}
}
/* ==== end section folds ==== */

/* ==== FAQ toggles (live-ui-faq-toggle, PILOT-PLAN 7.11) ==== */
/* ---- The FAQ toggles (PILOT-PLAN 7.11 'FAQ toggles'; inventory ui:faq-toggle, 4 on post 388): the four questions under
   "Frequently asked questions" (Salient's [toggles], build_pages.py faq_block; markup and FAQ schema unchanged).
   Today: gray bars with the question in Montserrat at 65 percent black, a white disc whose plus is drawn in an off-brand azure (not FComply blue) and
   pops in from 40 percent scale with an overshoot, and an open bar that fills solid blue with white type and a coral
   minus. On a phone a two-line question squeezes the disc into an ellipse (30 by 36 px), and a keyboard reader gets no
   focus ring at all (Salient's :focus{outline:0}).
   Here, in the film's language at interface speed:
   - Each question is a paper card (the satin face, a hairline, the 3 px lip and a soft contact shadow, 14 px radius),
     the question in Plus Jakarta Sans 700 ink, the weight of this page's other question controls (the section folds).
   - The mark is the page's paper disc (36 px, never squeezed). Closed, its plus is ink. Open, the plus turns to a minus
     in FComply blue on a lit mark (a pale face and a 2 px blue rim) and the question turns blue: 0.2 s, no overshoot,
     no scale. The same grammar as the details folds, so the page's folds read as one family. The azure and the coral are gone.
   - The answer opens in 0.25 s (closes in 0.2 s) on an ease-out with no overshoot, and rises 8 px as it fades in
     (5.6 px on a phone). Salient still drives the height (max-height to the answer's scrollHeight); only its timing and
     curve change here.
   - The spotlight: the card opened last takes the lit state (paperLit: the pale face tint and a 2 px blue rim, its
     shadow a step deeper). Other open cards keep their blue minus on a paper face. One lit card at a time.
   - The entrance: the old overshoot pop becomes R4. A card that enters the view rises 16 px from the floor as its
     shadow grows, 0.5 s on cubic-bezier(0.16,1,0.3,1), 90 ms apart when several enter together (11.2 px on a phone).
     A card already on screen when the script runs never hides, and a card starts the moment any of it enters, so
     nothing waits at opacity 0 on screen.
   - Keyboard: Tab reaches each question, Enter or Space opens and closes it, and a 2 px FComply-blue ring sits 3 px
     outside the whole card (inside the question row where :has() is missing).
   Start states apply only under classes the script sets (.hf-faq for the answer's rise, .hf-faq-wait for a card waiting
   to enter), so with no JavaScript or on an error every card is simply there. Reduced motion and ?fcqa= (.hf-faq-still):
   no entrance, the answer opens at once, the mark swaps without motion. */
body.fc-hf .toggles{--hfq-blue:#0809FF;--hfq-ink:#2A2D34;--hfq-pale:#DCEBFF;--hfq-lit:#E8F1FE;--hfq-paper:#FBFBFD;--hfq-lip:#E4E8F0;
  --hfq-hair:rgba(203,210,222,.7);--hfq-ease:cubic-bezier(.33,1,.68,1);--hfq-in:cubic-bezier(.16,1,.3,1);--hfq-rise:8px;--hfq-lift:16px;
  --hfq-rest:inset 0 0 0 2px rgba(8,9,255,0),0 0 0 1px var(--hfq-hair),0 3px 0 var(--hfq-lip),0 12px 22px -16px rgba(42,45,52,.30);
  --hfq-floor:inset 0 0 0 2px rgba(8,9,255,0),0 0 0 1px var(--hfq-hair),0 3px 0 var(--hfq-lip),0 4px 8px -6px rgba(42,45,52,.22);
  --hfq-litshadow:inset 0 0 0 2px var(--hfq-blue),0 0 0 1px rgba(203,210,222,0),0 3px 0 var(--hfq-lip),0 18px 26px -16px rgba(42,45,52,.34);
  --hfq-disc:inset 0 0 0 2px rgba(8,9,255,0),0 0 0 1px var(--hfq-hair),0 8px 16px -12px rgba(22,25,31,.35),0 1px 3px rgba(22,25,31,.08);
  --hfq-disclit:inset 0 0 0 2px var(--hfq-blue),0 0 0 1px rgba(203,210,222,0),0 8px 16px -12px rgba(8,9,255,.45),0 1px 3px rgba(22,25,31,.08)}
/* every shadow list above has the same four layers with the same inset flags, so the rims fade in and out with the
   face (a list whose layers differ in inset cannot be interpolated, and the browser swaps it in one frame) */
/* the card: paper; the question row and the answer lie on it with no fill of their own */
body.fc-hf .toggles>.toggle{position:relative;border-radius:14px;background:var(--hfq-paper);box-shadow:var(--hfq-rest);
  transition:background-color .2s ease,box-shadow .2s ease}
body.fc-hf .toggles>.toggle>.toggle-title>a{background:transparent!important;color:var(--hfq-ink)!important;border-radius:14px;
  font-family:"Plus Jakarta Sans",sans-serif!important;font-weight:700!important;letter-spacing:-.02em!important;transition:color .2s ease}
body.fc-hf .toggles>.toggle>.toggle-title>a:hover{background:transparent!important}
body.fc-hf .toggles>.toggle.open>.toggle-title>a{color:var(--hfq-blue)!important}
body.fc-hf .toggles>.toggle[data-inner-wrap]>div{background:transparent!important;box-shadow:none!important;border-radius:0 0 14px 14px;
  transition:max-height .2s var(--hfq-ease)}
body.fc-hf .toggles>.toggle[data-inner-wrap].open>div{transition-duration:.25s}
/* the answer sits under the question's first letter (20 px row padding, the 36 px mark, its 16 px gap) */
body.fc-hf .toggles>.toggle[data-inner-wrap]>div>.inner-toggle-wrap{padding:0 32px 22px 72px}
/* the spotlight: the card opened last is lit */
body.fc-hf .toggles>.toggle.open.hf-faq-lit{background:var(--hfq-lit);box-shadow:var(--hfq-litshadow)}
/* the mark: the paper disc, never squeezed, no pop and no scale; the plus in ink */
body.fc-hf .toggles .toggle .toggle-title i{flex:0 0 36px;transform:none;opacity:1;background:#fff;box-shadow:var(--hfq-disc);
  transition:background-color .2s ease,box-shadow .2s ease}
body.fc-hf .toggles .toggle .toggle-title i::before,body.fc-hf .toggles .toggle .toggle-title i::after{background:var(--hfq-ink);
  transition:transform .2s var(--hfq-ease),background-color .2s ease}
/* open: a blue minus on the lit mark */
body.fc-hf .toggles .toggle.open .toggle-title i{background:var(--hfq-pale);box-shadow:var(--hfq-disclit)}
body.fc-hf .toggles .toggle.open .toggle-title i::before,body.fc-hf .toggles .toggle.open .toggle-title i::after{background:var(--hfq-blue)}
@media (hover:hover) and (pointer:fine){
  body.fc-hf .toggles .toggle .toggle-title a:hover i::before,body.fc-hf .toggles .toggle .toggle-title a:hover i::after{background:var(--hfq-blue)}
}
/* keyboard: a blue ring; around the whole card where :has() works, so it never sits on the lit card's own blue rim */
body.fc-hf .toggles>.toggle>.toggle-title>a:focus{outline:none}
body.fc-hf .toggles>.toggle>.toggle-title>a:focus-visible{outline:2px solid var(--hfq-blue);outline-offset:-4px}
@supports selector(:has(a)){
  body.fc-hf .toggles>.toggle>.toggle-title>a:focus-visible{outline:none}
  body.fc-hf .toggles>.toggle:has(>.toggle-title>a:focus-visible){outline:2px solid var(--hfq-blue);outline-offset:3px}
}
/* the answer's rise (armed by the script): closed, and while it closes, 8 px low at opacity 0; open, it rises as it fades in.
   The rise is on the answer's paragraphs, not on its wrap: they move inside the wrap's 22 px bottom padding, so the fold's
   scrollHeight (which Salient reads for the height tween) stays the answer's own height and the tween lands exactly at
   0.25 s instead of stopping short where a moved wrap would have added 8 px of overflow */
body.fc-hf .toggles.hf-faq>.toggle>div>.inner-toggle-wrap>*{opacity:0;transform:translate3d(0,var(--hfq-rise),0);
  transition:opacity .2s ease,transform .2s var(--hfq-ease)}
body.fc-hf .toggles.hf-faq>.toggle.open>div>.inner-toggle-wrap>*{opacity:1;transform:none;transition-duration:.25s}
/* the entrance (R4): a card waiting below the view sits 16 px low on the floor; it rises as its shadow grows */
body.fc-hf .toggles>.toggle.hf-faq-wait{opacity:0;transform:translate3d(0,var(--hfq-lift),0);box-shadow:var(--hfq-floor)}
body.fc-hf .toggles>.toggle.hf-faq-go{transition:opacity .5s var(--hfq-in) var(--hfq-d,0ms),transform .5s var(--hfq-in) var(--hfq-d,0ms),
  box-shadow .5s var(--hfq-in) var(--hfq-d,0ms),background-color .2s ease}
/* phones travel 70 percent of the desk distance; the answer keeps the phone's full width. The question was 14.3 px
   (Salient's phone h3), smaller than its own 17 px answer; 16 px reads as the heading and keeps every closed card's line
   count, so the closed page is not a pixel taller (15 px under 360 px, where 16 px would give the first question a
   third line) */
@media only screen and (max-width:690px){
  body.fc-hf .toggles{--hfq-rise:5.6px;--hfq-lift:11.2px}
  body.fc-hf .toggles>.toggle>.toggle-title>a{font-size:16px!important}
  body.fc-hf .toggles>.toggle[data-inner-wrap]>div>.inner-toggle-wrap{padding:0 18px 18px 20px}
}
@media only screen and (max-width:359px){
  body.fc-hf .toggles>.toggle>.toggle-title>a{font-size:15px!important}
}
/* reduced motion and ?fcqa=: every card there, the answer at once, the mark swaps without motion */
body.fc-hf .toggles.hf-faq-still>.toggle,body.fc-hf .toggles.hf-faq-still>.toggle>div,body.fc-hf .toggles.hf-faq-still>.toggle>div>.inner-toggle-wrap>*,
body.fc-hf .toggles.hf-faq-still>.toggle>.toggle-title>a,body.fc-hf .toggles.hf-faq-still .toggle-title i,
body.fc-hf .toggles.hf-faq-still .toggle-title i::before,body.fc-hf .toggles.hf-faq-still .toggle-title i::after{transition:none!important}
@media (prefers-reduced-motion:reduce){
  body.fc-hf .toggles>.toggle,body.fc-hf .toggles>.toggle>div,body.fc-hf .toggles>.toggle>div>.inner-toggle-wrap>*,
  body.fc-hf .toggles>.toggle>.toggle-title>a,body.fc-hf .toggles .toggle-title i,
  body.fc-hf .toggles .toggle-title i::before,body.fc-hf .toggles .toggle-title i::after{transition:none!important}
  body.fc-hf .toggles>.toggle.hf-faq-wait{opacity:1;transform:none;box-shadow:var(--hfq-rest)}
}
/* ==== end FAQ toggles ==== */

/* ==== glossary popover (live-ui-glossary-popover, PILOT-PLAN 7.11) ==== */
/* ---- The glossary popover (PILOT-PLAN 7.11 'Glossary popovers'; inventory ui:glossary-popover): the three glossary
   terms on post 388 (Title IV-E in the statute's lead-in, NCMEC and HHS-OIG in "Sources for this section"), linked by
   build_pages.py link_glossary_terms, and the one shared popover js/fc-scroll.js builds for them (#fc-term-pop). The
   logic is fc-scroll's and stays: hover or focus opens it on a pointer, a first tap opens it on touch and a second
   follows the link, Escape or a tap elsewhere closes it, it follows the page on scroll.
   Today: a charcoal #16191F card (the world is never dark) with the term in white, the definition at 86 percent white
   and a lavender link; the term wears a dotted underline in the category gold and a cream wash on hover. It fades up 4 px
   in 0.18 s, and when it opens above the term, the fade runs with the card lying over the term and then jumps 211 px up
   (the keyframes' transform replaces the inline translateY(-100%) until they end).
   Here, in the film's language at interface speed:
   - The panel is the kit's glass (the page's own glass recipe, as on the timeline's "The practical effect"): white at
     0.88 behind the text, a frosted blur of what lies behind, a #CBD2DE hairline, a 1 px top light and the kit's soft
     shadow, 14 px radius. The caret is the same glass with the same hairline, and it points at the term even where
     the panel is held in from the screen's edge.
   - Type: the term as the house kicker (uppercase, FComply blue, +0.04 em, the site's meta size), the definition in
     ink #2A2D34 at the site's small step (15 to 16 px; it was 14.4 px), the link in FComply blue with a drawn arrow.
     Contextual alternates are off in the panel, so a hyphen between figures stays a hyphen (the face draws one between
     digits, as in a public-law number, with a long dash; the three terms themselves have no such hyphen).
   - The entrance: the panel rises 6 px as it fades in, 0.18 s on cubic-bezier(0.16,1,0.3,1), no overshoot. It moves by
     the translate property, which adds to the inline transform place() sets, so a panel above the term rises in its
     own place. The exit (js/fc-hf.js): it retires, sinking 4 px as it fades, 0.15 s on an ease-in, faster than it
     came. Moving straight from one term to the next replays the rise at the new term. Phones travel 70 percent.
   - The term: a dotted FComply-blue underline; while its popover is open, the pale #DCEBFF focus tint sweeps in behind
     it from the left (0.25 s) and retracts with the exit (0.15 s). Keyboard: a 2 px FComply-blue ring.
   No term or line box changes size, so the closed page is not a pixel taller. With no JavaScript there is no popover
   (the term is a plain link to the glossary); if js/fc-hf.js fails, this section alone still draws the glass and the
   rise, and the panel simply goes at once. Reduced motion and ?fcqa= (.hf-gp-still): no rise, no retire, no sweep. */
body.fc-hf{--hfgp-blue:#0809FF;--hfgp-ink:#2A2D34;--hfgp-pale:#DCEBFF;--hfgp-rule:rgba(203,210,222,.8)}
body.fc-hf .fc-term-pop{--hfgp-rise:6px;--hfgp-sink:4px;--hfgp-cx:50%;
  background:linear-gradient(160deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.88) 55%,rgba(240,240,255,.88) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid var(--hfgp-rule);border-radius:14px;padding:14px 18px 13px;color:var(--hfgp-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 60px -24px rgba(22,25,60,.22),0 2px 8px rgba(22,25,31,.06);
  font:400 var(--t-small,15px)/1.5 "Plus Jakarta Sans",sans-serif;font-feature-settings:"calt" 0;
  animation:fcHfGpIn .18s cubic-bezier(.16,1,.3,1) both}
/* where the browser cannot frost, the backing is nearly opaque, so the words never sit on a readable ghost of the page */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body.fc-hf .fc-term-pop{background:rgba(255,255,255,.97)}
}
body.fc-hf .fc-term-pop b{display:block;margin:0 0 5px;color:var(--hfgp-blue);font:700 var(--t-meta,13px)/1.3 "Plus Jakarta Sans",sans-serif;
  letter-spacing:.04em;text-transform:uppercase}
body.fc-hf .fc-term-pop span{display:block;color:var(--hfgp-ink)}
body.fc-hf .fc-term-pop a{display:inline-flex;align-items:center;gap:6px;margin-top:9px;color:var(--hfgp-blue)!important;
  font:700 var(--t-meta,13px)/1.3 "Plus Jakarta Sans",sans-serif;text-decoration:none!important}
body.fc-hf .fc-term-pop a:hover{color:var(--hfgp-blue)!important}
body.fc-hf .fc-term-pop .hf-gp-arrow{flex:none;width:14px;height:10px;overflow:visible;transition:transform .15s cubic-bezier(.33,1,.68,1)}
body.fc-hf .fc-term-pop a:hover .hf-gp-arrow,body.fc-hf .fc-term-pop a:focus-visible .hf-gp-arrow{transform:translateX(2px)}
body.fc-hf .fc-term-pop a:focus-visible{outline:2px solid var(--hfgp-blue);outline-offset:3px;border-radius:3px}
/* the caret: glass with the hairline on its two sides, over the panel's edge (it covers the hairline at its mouth) */
body.fc-hf .fc-term-pop::before{top:-9px;left:clamp(22px,var(--hfgp-cx),calc(100% - 22px));width:18px;height:10px;border-radius:0;
  transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath d='M0 10L9 .8 18 10z' fill='%23fff' fill-opacity='.93'/%3E%3Cpath d='M.4 9.6L9 .8l8.6 8.8' fill='none' stroke='%23CBD2DE' stroke-opacity='.8'/%3E%3C/svg%3E") no-repeat 0 0/18px 10px}
body.fc-hf .fc-term-pop.is-above::before{top:auto;bottom:-9px;transform:translateX(-50%) rotate(180deg)}
/* the retire (only ever set by js/fc-hf.js): it cannot be clicked on its way out */
body.fc-hf .fc-term-pop.hf-gp-out{animation:fcHfGpOut .15s cubic-bezier(.32,0,.67,0) both;pointer-events:none}
@keyframes fcHfGpIn{from{opacity:0;translate:0 var(--hfgp-rise,6px)}to{opacity:1;translate:0 0}}
@keyframes fcHfGpOut{from{opacity:1;translate:0 0}to{opacity:0;translate:0 var(--hfgp-sink,4px)}}
/* the term: a dotted FComply-blue underline; the pale tint sweeps in from the left while its popover is open */
body.fc-hf a.fc-term,body.fc-hf a.fc-term:hover{border-bottom-color:rgba(8,9,255,.55);
  background-color:transparent;background-image:linear-gradient(var(--hfgp-pale),var(--hfgp-pale));background-repeat:no-repeat;
  background-position:0 0;background-size:0% 100%;border-radius:2px;
  transition:background-size .15s cubic-bezier(.32,0,.67,0),border-bottom-color .2s ease}
body.fc-hf a.fc-term.is-on{background-color:transparent;background-size:100% 100%;border-bottom-color:var(--hfgp-blue);
  transition:background-size .25s cubic-bezier(.16,1,.3,1),border-bottom-color .2s ease}
body.fc-hf a.fc-term:focus{outline:none}
body.fc-hf a.fc-term:focus-visible{outline:2px solid var(--hfgp-blue)!important;outline-offset:2px;border-radius:3px}
/* phones travel 70 percent of the desk distance */
@media only screen and (max-width:690px){
  body.fc-hf .fc-term-pop{--hfgp-rise:4.2px;--hfgp-sink:2.8px;padding:13px 16px 12px}
}
/* reduced motion and ?fcqa=: shown and hidden at once, the tint without a sweep */
body.fc-hf .fc-term-pop.hf-gp-still,body.fc-hf .fc-term-pop.hf-gp-still.hf-gp-out{animation:none}
body.fc-hf.hf-gp-still a.fc-term{transition:none}
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-term-pop,body.fc-hf .fc-term-pop.hf-gp-out{animation:none}
  body.fc-hf a.fc-term,body.fc-hf a.fc-term.is-on,body.fc-hf .fc-term-pop .hf-gp-arrow{transition:none}
}
/* ==== end glossary popover ==== */

/* ==== header chrome hover (live-chrome-hover, PILOT-PLAN 7.13) ==== */
/* The header chrome on post 388 (PILOT-PLAN 7.13; inventory chrome:hover; brief in
   research-out/animation-pilot-2026-09-27/continue-2026-09-28/RECORDED.json). CSS only, no script: chrome answers the
   pointer within a frame, and every state holds with no JavaScript.
   1. The glass header: white at 0.88 over a 16 px backdrop blur, with a 1 px #CBD2DE hairline inside its lower edge (an
      inset shadow, so it adds no height and leaves with the header when Salient hides it on the scroll down). All
      widths. The hairline needs !important: a Salient material rule with six :not() clauses sets box-shadow:none.
      The phone menu's open state belongs to live-chrome-menu-cross: a rule of its own on #header-outer.side-widget-open
      (with !important for box-shadow) outranks these.
   2. The Line as the menu hover: 2 px FComply blue drawn from the left in 0.25 s (power2.out, no overshoot) and retiring
      to the right in 0.2 s. A pointer that leaves mid-draw retires the part already drawn, with no jump (clip-path does
      the retire, scaleX the draw), and a pointer that comes back during the retire grows the Line back out from its
      current left edge, also with no jump (repair of 29 Sep 2026). Keyboard focus draws it; the focus a mouse click
      leaves on a link does not. The current section (Learn) and the current page in its dropdown keep their Line.
      Labels and dropdown items in ink #2A2D34, not pure black. The dropdown is a paper card (18 px radius, the kit's
      edge and soft shadow); its timing stays Salient's.
   3. Buttons (Request a demo in the header, and the page's two blue buttons): they lift 2 px with the site's own tight
      blue shadow (.fc-btn:hover), 0.2 s, with no scale and no letter wave. Only the face and its label move; the hit
      area stays where it was, so a pointer resting on the lower edge cannot set the button flickering.
   Hover states apply only where a fine pointer can hover; keyboard focus (:focus-visible, never plain :focus or
   :focus-within, which a mouse click also sets) gets the same states and a 2 px blue ring.
   Reduced motion: the Line appears at once and the shadow still changes, but nothing travels (Salient's 25 px fly-out
   slide included). */

/* 1. the glass header */
body.fc-hf #header-outer{background-color:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);box-shadow:inset 0 -1px 0 #CBD2DE!important}

/* 2. labels in ink */
body.fc-hf #header-outer #top nav > ul.sf-menu:not(.buttons) > li > a,
body.fc-hf #header-outer #top nav > ul.sf-menu:not(.buttons) > li > a .sf-sub-indicator i,
body.fc-hf #header-outer #top nav ul.sub-menu li > a,
body.fc-hf #header-outer #top nav ul.sub-menu li > a .sf-sub-indicator i{color:#2A2D34!important}

/* 2. the Line. Its right edge is the draw (scaleX from the left); its left edge is the retire (clip-path, cut in the Line's
   own box, so it always ends at the right edge). The left edge is worked out from two numbers, so every change is a
   continuous one:
     --fc-hf-line-out  how far the retire has gone (1 = gone). It sweeps in 0.2 s on the way out, and on the way back in
                       it runs back to 0 on the draw's own curve, so a pointer that comes back during the retire grows the
                       Line back out from its current left edge (no snap to full width).
     --fc-hf-line-base where that sweep started. It holds while the Line is out and resets to 1 with the Line at 0.2 s;
                       on the way in it falls with --fc-hf-line-out on the same curve, so after a full rest the draw starts
                       from the left with no gap, and a pointer that leaves partway through the draw still retires the
                       whole of what is drawn, toward its right edge.
   left edge = 1 - (1 - out) / (1 - base) of the Line, which is (out - base) / (1 - base) while it moves, and all of it
   (nothing shown) at rest. Registered numbers, so they transition. Where a transition of them is cut short (WebKit
   cancels running custom-property transitions whenever a stylesheet is added to the page; this page adds none after it
   has loaded) or where @property is missing, each number lands at once, and the Line then clears or finishes growing
   at once: it never jumps back to full width. */
@property --fc-hf-line-out{syntax:'<number>';inherits:false;initial-value:1}
@property --fc-hf-line-base{syntax:'<number>';inherits:false;initial-value:1}
/* at rest: no width, the retire complete */
body.fc-hf #header-outer #top nav .sf-menu li:not([class*="menu-item-btn-style"]) > a .menu-title-text::after{
  border:0!important;height:2px!important;background:#0809FF!important;border-radius:1px;left:0!important;right:auto!important;width:100%!important;
  --fc-hf-line-out:1;--fc-hf-line-base:1;
  transform:scaleX(0)!important;transform-origin:0 50%!important;
  -webkit-clip-path:inset(0 0 0 calc((1 - (1 - var(--fc-hf-line-out)) / max(1 - var(--fc-hf-line-base), .0001)) * 100%));
  clip-path:inset(0 0 0 calc((1 - (1 - var(--fc-hf-line-out)) / max(1 - var(--fc-hf-line-base), .0001)) * 100%));
  transition:--fc-hf-line-out .2s cubic-bezier(.33,1,.68,1),--fc-hf-line-base 0s linear .2s,transform 0s linear .2s!important}
/* where it sits: where Salient drew its 1 px line, 2 px under the label's box (22 px tall on a 17 px label) and under a dropdown item's */
body.fc-hf #header-outer #top nav > ul.sf-menu:not(.buttons) > li > a .menu-title-text::after{top:auto!important;bottom:-4px!important}
body.fc-hf #header-outer #top nav ul.sub-menu li > a .menu-title-text::after{top:auto!important;bottom:-3px!important}
/* drawn: an open dropdown's label (superfish's sfHover, also set by a tap) and the current place */
body.fc-hf #header-outer #top nav .sf-menu li.sfHover:not([class*="menu-item-btn-style"]) > a .menu-title-text::after,
body.fc-hf #header-outer #top nav > ul.sf-menu:not(.buttons) > li:is(.current-menu-item,.current-menu-ancestor,.current-menu-parent,.current_page_item,.current_page_ancestor,.current_page_parent) > a .menu-title-text::after,
body.fc-hf #header-outer #top nav ul.sub-menu li:is(.current-menu-item,.current_page_item) > a .menu-title-text::after{
  transform:scaleX(1)!important;--fc-hf-line-out:0;--fc-hf-line-base:0;
  transition:transform .25s cubic-bezier(.33,1,.68,1),--fc-hf-line-out .25s cubic-bezier(.33,1,.68,1),--fc-hf-line-base .25s cubic-bezier(.33,1,.68,1)!important}
/* drawn: focus from the keyboard only (a label or a dropdown item, and so its section), never the focus a mouse click
   leaves on a link. A rule of its own, so a browser without :has() keeps the rules above. */
body.fc-hf #header-outer #top nav .sf-menu li:not([class*="menu-item-btn-style"]):has(:focus-visible) > a .menu-title-text::after{
  transform:scaleX(1)!important;--fc-hf-line-out:0;--fc-hf-line-base:0;
  transition:transform .25s cubic-bezier(.33,1,.68,1),--fc-hf-line-out .25s cubic-bezier(.33,1,.68,1),--fc-hf-line-base .25s cubic-bezier(.33,1,.68,1)!important}
@media (hover:hover) and (pointer:fine){
  body.fc-hf #header-outer #top nav .sf-menu li:not([class*="menu-item-btn-style"]):hover > a .menu-title-text::after{
    transform:scaleX(1)!important;--fc-hf-line-out:0;--fc-hf-line-base:0;
    transition:transform .25s cubic-bezier(.33,1,.68,1),--fc-hf-line-out .25s cubic-bezier(.33,1,.68,1),--fc-hf-line-base .25s cubic-bezier(.33,1,.68,1)!important}
}
/* the dropdown: a paper card (the kit's --po-radius-sm, --po-edge and --po-shadow), desk only */
@media only screen and (min-width:1000px){
  body.fc-hf #header-outer #top nav .sf-menu ul.sub-menu{background-color:#FFFFFF!important;border-radius:18px!important;
    box-shadow:0 0 0 1px #E0E4ED,0 30px 60px -24px rgba(22,25,60,.22),0 2px 8px rgba(22,25,31,.06)!important}
}

/* 3. buttons: no letter wave (type never scrambles), no scale */
body.fc-hf #header-outer .menu-item-hover-text-reveal-wave .char,
body.fc-hf .nectar-cta[data-style="text-reveal-wave"] .char{animation:none!important;transform:none!important;opacity:1!important}
/* the header pill: Salient paints its face on ::before and its shadow on ::after, both centered by translateY(-50%) */
body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a::before,
body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a::after{transform:translateY(-50%)!important;
  transition:transform .2s cubic-bezier(.33,1,.68,1),box-shadow .2s cubic-bezier(.33,1,.68,1),opacity .2s cubic-bezier(.33,1,.68,1)!important}
body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a::after{box-shadow:0 18px 30px -18px rgba(8,9,255,.6)!important;opacity:0}
body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a .menu-title-text{display:inline-block;transform:translateY(0);transition:transform .2s cubic-bezier(.33,1,.68,1)!important}
/* the page's two blue buttons: the face moves to ::before so the link's box (the hit area) stays still */
body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap{overflow:visible!important;isolation:isolate;background-color:transparent!important;transition:none!important}
body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#0809FF;
  box-shadow:0 18px 30px -18px rgba(8,9,255,0);transform:translateY(0);transition:transform .2s cubic-bezier(.33,1,.68,1),box-shadow .2s cubic-bezier(.33,1,.68,1)}
body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap .link_text{transform:translateY(0);transition:transform .2s cubic-bezier(.33,1,.68,1)}
/* lifted: hovered (fine pointers only) or focused from the keyboard */
@media (hover:hover) and (pointer:fine){
  body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a:hover::before{transform:translateY(calc(-50% - 2px))!important}
  body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a:hover::after{transform:translateY(calc(-50% - 2px))!important;opacity:1!important}
  body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a:hover .menu-title-text{transform:translateY(-2px)!important}
  body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap:hover::before{transform:translateY(-2px);box-shadow:0 18px 30px -18px rgba(8,9,255,.6)}
  body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap:hover .link_text{transform:translateY(-2px)}
}
body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a:focus-visible::before{transform:translateY(calc(-50% - 2px))!important}
body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a:focus-visible::after{transform:translateY(calc(-50% - 2px))!important;opacity:1!important;
  box-shadow:0 0 0 3px #FFFFFF,0 0 0 5px #0809FF,0 18px 30px -18px rgba(8,9,255,.6)!important}
body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a:focus-visible .menu-title-text{transform:translateY(-2px)!important}
/* the blue buttons lift and ring for keyboard focus only (as the pill does), never for the focus a mouse press leaves */
body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap:has(.link_text:focus-visible)::before{transform:translateY(-2px);
  box-shadow:0 0 0 3px #FFFFFF,0 0 0 5px #0809FF,0 18px 30px -18px rgba(8,9,255,.6)}
body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap:has(.link_text:focus-visible) .link_text{transform:translateY(-2px)}

/* keyboard: a 2 px FComply-blue ring (the pill and the blue buttons draw theirs round the face, above) */
body.fc-hf #header-outer #top nav > ul.sf-menu:not(.buttons) > li > a:focus-visible{outline:2px solid #0809FF!important;outline-offset:10px;border-radius:8px}
body.fc-hf #header-outer #top nav ul.sub-menu li > a:focus-visible{outline:2px solid #0809FF!important;outline-offset:2px;border-radius:8px}
body.fc-hf #header-outer #top #logo:focus-visible{outline:2px solid #0809FF!important;outline-offset:6px;border-radius:8px}
body.fc-hf #header-outer li[class*="menu-item-btn-style"] > a:focus-visible,
body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap .link_text:focus-visible{outline:none!important}

/* reduced motion: the same states, arrived at without travel (the doubled id outranks every rule above) */
@media (prefers-reduced-motion:reduce){
  body.fc-hf #header-outer#header-outer #top nav .sf-menu li > a .menu-title-text::after{transition:none!important}
  /* Salient slides a fly-out 25 px into place; here it only fades in where it will stay */
  body.fc-hf #header-outer#header-outer #top nav .sf-menu ul.sub-menu ul.sub-menu{transform:none!important;transition:opacity .25s linear!important}
  body.fc-hf #header-outer#header-outer li[class*="menu-item-btn-style"] > a::before,
  body.fc-hf #header-outer#header-outer li[class*="menu-item-btn-style"] > a::after{transform:translateY(-50%)!important;transition:box-shadow .2s linear,opacity .2s linear!important}
  body.fc-hf #header-outer#header-outer li[class*="menu-item-btn-style"] > a .menu-title-text{transform:none!important;transition:none!important}
  body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap::before,
  body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap:hover::before{transform:none!important;transition:box-shadow .2s linear!important}
  body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap:has(.link_text:focus-visible)::before{transform:none!important;transition:box-shadow .2s linear!important}
  body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap .link_text,
  body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap:hover .link_text{transform:none!important;transition:none!important}
  body.fc-hf .nectar-cta[data-style="text-reveal-wave"][data-using-bg="true"] .link_wrap:has(.link_text:focus-visible) .link_text{transform:none!important;transition:none!important}
}
/* ==== end header chrome hover ==== */

/* ==== listen card (live-listen-card, PILOT-PLAN 7.12) ==== */
/* ---- The Listen card (PILOT-PLAN 7.12; inventory embed:elevenlabs-listen). Markup: build_pages.py listen_block_hf(),
   on post 388 only (the page meta's "listen": {"hf": true}). The ElevenLabs player stays (a cross-origin iframe we do not
   restyle); what is ours is restyled:
   * the row: the listen mark in the icon slot that was empty (a short run of the Line in FComply blue with five bars
     standing on it, ink closed and blue once open or under the pointer, like the plus on the other folds), then "Listen to
     this page" and the real length of the audio in Montserrat 500 tabular (2:38, the player's own length), not the
     old words-per-minute guess ("2 min");
   * the card: the pilot's paper (satin #FBFBFD, a 3 px lip #E4E8F0, a hairline and a soft contact shadow), 16 px radius,
     with the player inside it in the vendor's own colors, ink #2A2D34 on the card's face, so the player reads as part
     of the card and the pure black is gone;
   * one left edge: the mark and the card sit on the text column's edge, with the lead (144 px on the desk, 29 on a phone);
   * while the helper and the player load (the helper is fetched only when the fold first opens, js/fc-hf.js), a
     skeleton of the player in the empty gray #DFE4EF with one light sweep, never an empty white box; when the player
     says it is up, the skeleton fades out and the player fades in (0.45 s, over the player's own fade, as one).
   The fold's own opening (the height tween, the 8 px rise, the blue question, the focus ring) is live-ui-details-fold's.
   Motion: the mark builds once when the row is in view (the Line draws in 0.5 s, the bars rise from it in 0.45 s,
   30 ms apart), then a small ripple runs through the bars every 4.1 s while it is closed and on screen; open, the bars
   hold still (the player cannot tell the page when it plays, so the mark never pretends to). Transforms and opacity
   only; nothing adds height to the closed page. Start states apply only under .hf-lc (set by the script), so with no
   script or on an error the mark is drawn and still, and the card shows the vendor's own placeholder line. Reduced
   motion: the skeleton does not sweep and nothing fades; the mark keeps a gentler ripple (the icons move for everyone,
   D15). ?fcqa=: the mark drawn and still, no fades. */
body.fc-hf details.fc-hf-listen{--hlc-blue:#0809FF;--hlc-ink:#2A2D34;--hlc-sec:#505864;--hlc-paper:#FBFBFD;--hlc-lip:#E4E8F0;--hlc-empty:#DFE4EF;
  --hlc-ease:cubic-bezier(.16,1,.3,1)}
/* the row: the mark on the column's edge, then the question. The summary reaches 6 px past that edge (and pads the
   same 6 px back), so the mark stays on the lead's edge while the fold's 2 px focus ring, drawn inside the summary,
   runs 6 px clear of it (at padding 0 the ring's left side met the mark's Line) */
body.fc-hf details.fc-hf-listen>summary{margin-left:-6px;padding-left:6px;gap:12px}
/* the fold clips only up and down, so that 6 px reach (and the ring's left side in it) is never cut: in WebKit the
   fold's height tween sets overflow:hidden on the details while it moves, which cut the ring's left side for the 0.25 s
   of every keyboard opening and closing. The height tween still cuts the card at the fold's own edge (clip, padding box) */
body.fc-hf details.fc-hf-listen{overflow-x:visible!important;overflow-y:clip!important}
body.fc-hf details.fc-hf-listen .fc-listen-ic{flex:0 0 auto;display:block;width:28px;height:28px;color:var(--hlc-ink);transition:color .25s ease}
body.fc-hf details.fc-hf-listen[open]:not(.hf-x-shut) .fc-listen-ic{color:var(--hlc-blue)}
@media (hover:hover) and (pointer:fine){
  body.fc-hf details.fc-hf-listen>summary:hover .fc-listen-ic{color:var(--hlc-blue)}
}
/* the length: the figure face, tabular, in the secondary ink; blue with the question once open */
body.fc-hf details.fc-hf-listen .fc-listen-len{font-family:"Montserrat","Plus Jakarta Sans",sans-serif!important;font-weight:500;font-style:normal;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:0;font-size:inherit;line-height:32px;color:var(--hlc-sec);margin-left:.3em;transition:color .25s ease}
body.fc-hf details.fc-hf-listen[open]:not(.hf-x-shut) .fc-listen-len{color:inherit}
body.fc-hf details.fc-hf-listen .fc-hf-lc-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the listen mark: a short run of the Line (2 px FComply blue) with five bars standing on it (30, 60, 100, 60, 30 percent) */
body.fc-hf .fc-hf-lm{display:block;width:28px;height:28px;overflow:visible}
body.fc-hf .fc-hf-lm path{fill:none;stroke-linecap:round;stroke-linejoin:round}
body.fc-hf .fc-hf-lm-line{stroke:var(--hlc-blue);stroke-width:2}
body.fc-hf .fc-hf-lm-bars path{stroke:currentColor;stroke-width:2.4;transform-box:fill-box;transform-origin:50% 100%}
/* start state, only once the script has armed the row: the Line undrawn, the bars down on it */
body.fc-hf details.fc-hf-listen.hf-lc .fc-hf-lm-line{stroke-dasharray:100 101;stroke-dashoffset:100}
body.fc-hf details.fc-hf-listen.hf-lc .fc-hf-lm-bars path{transform:scaleY(0)}
/* the build: the Line draws from the left (0.5 s, power2.out), the bars rise from it (0.45 s, 30 ms apart), no overshoot */
body.fc-hf details.fc-hf-listen.hf-lc.is-built .fc-hf-lm-line{animation:hfLmDraw .5s cubic-bezier(.33,1,.68,1) both}
body.fc-hf details.fc-hf-listen.hf-lc.is-built .fc-hf-lm-bars path{animation:hfLmRise .45s var(--hlc-ease) both}
body.fc-hf details.fc-hf-listen.hf-lc.is-built .fc-hf-lm-bars path:nth-child(1){animation-delay:.3s}
body.fc-hf details.fc-hf-listen.hf-lc.is-built .fc-hf-lm-bars path:nth-child(2){animation-delay:.33s}
body.fc-hf details.fc-hf-listen.hf-lc.is-built .fc-hf-lm-bars path:nth-child(3){animation-delay:.36s}
body.fc-hf details.fc-hf-listen.hf-lc.is-built .fc-hf-lm-bars path:nth-child(4){animation-delay:.39s}
body.fc-hf details.fc-hf-listen.hf-lc.is-built .fc-hf-lm-bars path:nth-child(5){animation-delay:.42s}
/* the idle, once built (.is-idle): a small ripple runs left to right through the bars every 4.1 s, each bar dipping to
   78 percent and back in 0.82 s, then rest; it runs only while the row is on screen, the tab is visible and the fold is
   closed (.is-on), and holds where it is otherwise, so it never snaps */
body.fc-hf details.fc-hf-listen.hf-lc.is-idle .fc-hf-lm-bars path{animation:hfLmRipple 4.1s ease-in-out infinite both}
body.fc-hf details.fc-hf-listen.hf-lc.is-idle .fc-hf-lm-bars path:nth-child(2){animation-delay:.12s}
body.fc-hf details.fc-hf-listen.hf-lc.is-idle .fc-hf-lm-bars path:nth-child(3){animation-delay:.24s}
body.fc-hf details.fc-hf-listen.hf-lc.is-idle .fc-hf-lm-bars path:nth-child(4){animation-delay:.36s}
body.fc-hf details.fc-hf-listen.hf-lc.is-idle .fc-hf-lm-bars path:nth-child(5){animation-delay:.48s}
body.fc-hf details.fc-hf-listen.hf-lc.is-idle:not(.is-on) .fc-hf-lm-bars path{animation-play-state:paused}
body.fc-hf details.fc-hf-listen.hf-lc.is-idle .fc-hf-lm-line{stroke-dashoffset:0}
@keyframes hfLmDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes hfLmRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hfLmRipple{0%,20%,100%{transform:scaleY(1)}10%{transform:scaleY(.78)}}
@keyframes hfLmRippleRm{0%,20%,100%{transform:scaleY(1)}10%{transform:scaleY(.9)}}

/* the card: paper on the column's edge; the player inside it in ink on the card's face */
body.fc-hf details.fc-hf-listen>.fc-x-body{padding:2px 0 20px 0}
body.fc-hf details.fc-hf-listen .fc-hf-lc{position:relative;display:block;box-sizing:border-box;min-height:110px;padding:10px 12px;border-radius:16px;
  background:var(--hlc-paper);box-shadow:0 0 0 1px rgba(203,210,222,.6),0 3px 0 var(--hlc-lip),0 18px 30px -22px rgba(22,25,60,.34)}
body.fc-hf details.fc-hf-listen .fc-hf-lc iframe{display:block;width:100%;height:90px;border:0;margin:0;background:transparent;color-scheme:light}
/* the vendor's placeholder (shown only with no script, or if the helper could not load) */
body.fc-hf details.fc-hf-listen .fc-hf-lc #elevenlabs-audionative-widget{display:flex;align-items:center;min-height:90px;margin:0;
  font:500 15px/1.5 "Plus Jakarta Sans",sans-serif;color:var(--hlc-sec)}
body.fc-hf details.fc-hf-listen .fc-hf-lc #elevenlabs-audionative-widget a{color:inherit}
/* the skeleton: a disc, a title line and the track in the empty gray, where the player's own parts come up (measured
   on the live player at 1440 and 430) */
body.fc-hf details.fc-hf-listen .fc-hf-lc-sk{display:none}
body.fc-hf details.fc-hf-listen.hf-lc .fc-hf-lc-sk{display:block;position:absolute;left:12px;right:12px;top:10px;height:90px;overflow:hidden;border-radius:10px;
  pointer-events:none;opacity:1;transition:opacity .45s ease}
body.fc-hf details.fc-hf-listen .fc-hf-lc-sk i{position:absolute;display:block;background:var(--hlc-empty)}
body.fc-hf details.fc-hf-listen .fc-hf-lc-sk i:nth-child(1){left:12px;top:22px;width:46px;height:46px;border-radius:50%}
body.fc-hf details.fc-hf-listen .fc-hf-lc-sk i:nth-child(2){left:110px;top:19px;width:min(42%,210px);height:10px;border-radius:5px}
body.fc-hf details.fc-hf-listen .fc-hf-lc-sk i:nth-child(3){left:110px;right:60px;top:42px;height:4px;border-radius:2px}
/* the light sweep across the skeleton, once every 1.4 s while it waits */
body.fc-hf details.fc-hf-listen .fc-hf-lc-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(100deg,rgba(251,251,253,0) 30%,rgba(251,251,253,.85) 50%,rgba(251,251,253,0) 70%)}
body.fc-hf details.fc-hf-listen.hf-lc.is-loading .fc-hf-lc-sk::after{animation:hfLcSweep 1.4s cubic-bezier(.45,0,.2,1) infinite}
@keyframes hfLcSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* armed: the placeholder line is covered by the skeleton, and the player waits unseen until it says it is up */
body.fc-hf details.fc-hf-listen.hf-lc .fc-hf-lc #elevenlabs-audionative-widget{visibility:hidden}
body.fc-hf details.fc-hf-listen.hf-lc .fc-hf-lc iframe{opacity:0;transition:opacity .45s ease}
/* up: the skeleton goes, the player comes in */
body.fc-hf details.fc-hf-listen.hf-lc.is-ready .fc-hf-lc-sk{opacity:0}
body.fc-hf details.fc-hf-listen.hf-lc.is-ready .fc-hf-lc iframe{opacity:1}
/* the helper could not load: no skeleton, the vendor's own line in place of the player */
body.fc-hf details.fc-hf-listen.hf-lc.is-failed .fc-hf-lc-sk{display:none}
body.fc-hf details.fc-hf-listen.hf-lc.is-failed .fc-hf-lc #elevenlabs-audionative-widget{visibility:visible}
/* the vendor asked to hide its player (a disabled project): the card goes with it */
body.fc-hf details.fc-hf-listen.hf-lc.is-hidden .fc-hf-lc{display:none}
/* no desk jump: while Listen is open, the hero columns keep the place they had closed (js/fc-hf.js measures it); the
   column no longer re-centers, so the row the reader clicked stays under the pointer and the card opens downward. The
   picture column also keeps its height, because the hero pills are placed at percentages of it */
body.fc-hf .vc_column-inner.hf-lc-pin{justify-content:flex-start!important;padding-top:var(--hf-lc-pin,0px)!important}
body.fc-hf .vc_column-inner.hf-lc-pin-h{height:var(--hf-lc-pin-h)!important;align-self:flex-start!important}
/* reduced motion and ?fcqa= (.hf-lc-still): no sweep, no fades; the mark's ripple is gentler (reduced motion) or off (?fcqa=) */
body.fc-hf details.fc-hf-listen.hf-lc-still .fc-hf-lm-line,body.fc-hf details.fc-hf-listen.hf-lc-still .fc-hf-lm-bars path{animation:none!important;transform:none!important;stroke-dashoffset:0!important}
body.fc-hf details.fc-hf-listen.hf-lc-still .fc-hf-lc-sk,body.fc-hf details.fc-hf-listen.hf-lc-still .fc-hf-lc iframe,
body.fc-hf details.fc-hf-listen.hf-lc-still .fc-listen-ic,body.fc-hf details.fc-hf-listen.hf-lc-still .fc-listen-len{transition:none!important}
body.fc-hf details.fc-hf-listen.hf-lc-still .fc-hf-lc-sk::after{animation:none!important;display:none}
@media (prefers-reduced-motion:reduce){
  body.fc-hf details.fc-hf-listen.hf-lc.is-idle .fc-hf-lm-bars path{animation-name:hfLmRippleRm}
  body.fc-hf details.fc-hf-listen .fc-hf-lc-sk,body.fc-hf details.fc-hf-listen .fc-hf-lc iframe,
  body.fc-hf details.fc-hf-listen .fc-listen-ic,body.fc-hf details.fc-hf-listen .fc-listen-len{transition:none!important}
  body.fc-hf details.fc-hf-listen .fc-hf-lc-sk::after{animation:none!important;display:none}
}
@media print{
  body.fc-hf details.fc-hf-listen .fc-hf-lm *{animation:none!important;transform:none!important;stroke-dashoffset:0!important}
}
@media (forced-colors:active){
  body.fc-hf .fc-hf-lm-line,body.fc-hf .fc-hf-lm-bars path{stroke:CanvasText}
  body.fc-hf details.fc-hf-listen .fc-hf-lc{border:1px solid CanvasText}
}
/* ==== end listen card ==== */

/* ==== phone menu and cross (live-chrome-menu-cross, PILOT-PLAN 7.13) ==== */
/* The phone menu and its cross on post 388 (PILOT-PLAN 7.13 "Phone menu"; inventory chrome:crossLeftClose, types/
   site-chrome.md section 2; brief in research-out/animation-pilot-2026-09-27/continue-2026-09-28/RECORDED.json).
   Below the 1000 px header breakpoint only (the toggle is display:none at 1000 px and wider, so nothing here shows on a
   desktop). Driven by the classes Salient already sets: #slide-out-widget-area.open while the menu is open, a.open on
   the toggle. Salient's own timers (jquery.transit, setTimeout based) are left running, so its open and close logic and
   its double-tap guard work exactly as before.
   1. The sheet: light, never dark. Salient's black curtain (#slide-out-widget-area-bg, 0.93 black, a 0.92 s drop) is
      hidden with visibility, so its timers still run; the panel is painted on the menu's own ::before instead: the
      evidence wash in this page's hero topic (kit/topic-wash.js "congress", blue #0809ff + gold #ffce59 as the kit's
      tints #c9c9ff and #ffe3a0, the pair the page's hero band takes), with the white center behind the centered labels,
      at 0.94 over the page, which Salient blurs behind it at 16 px (the film's rack focus). Measured against BG.tiff on
      the settled sheet: mean saturation 0.06 and chroma 15 against 0.045 and 11.3, so never paler; ink on its darkest
      ground behind the labels at least 10:1, the blue Back at least 6:1. It unfolds from under the glass header like
      a glass card: translateY(-24px) to 0 with its opacity, 0.45 s, cubic-bezier(0.16,1,0.3,1). On close the words go
      first: the labels sink 12 px and fade out in 0.1 s, while the page behind holds its blur for 0.05 s, so no label is
      ever drawn over the page's own sharpening words (repair of 29 Sep 2026: they held full opacity through a 0.3 s
      fade and printed over the headline and body for about 100 ms). Then the menu fades in 0.3 s (Salient's 0.7 s fade,
      shortened), the sheet lifts 12 px and the page comes back into focus by 0.35 s: exits run faster than entrances,
      and type retires, never flies out.
   2. The labels: ink #2A2D34, full bright (Salient dims them to 0.7), Plus Jakarta Sans 500 (the film's label role; the
      page loads 300, 400, 500 and 700), 28 px on a 430 px phone (26 to 40 px across widths), -0.02 em. They rise 12 px
      with a 4 px blur clearing, 0.45 s, 60 ms apart from the top (the kit's word entrance at phone distance). The current
      place carries the Line: 2 px FComply blue drawn from the left under "Learn" and, inside Learn, under "The 24-hour
      rule" (js/fc-hf.js wraps each label's words in a span so the Line spans the words, not the row). "Back" is a blue
      kicker with a drawn chevron. A submenu slides in flat from the right (forward) and Back brings the parent list in
      from the left, 0.35 s, one list at a time, in place of Salient's 25 degree swing and 300 px travel with the two
      lists crossing. The list never travels up or down: Salient eases the list box's height over 0.5 s (an inline
      jquery.transit transition), which glided the centered list 88 px and kept the incoming list moving 150 ms after
      it landed; here the height steps once, in the gap where neither list is drawn. And the rows Back brings back
      (Salient hides them while a submenu is open) do not replay their opening rise: once the menu has settled (the
      script's .fc-hf-mx-settled, 1.3 s from the tap) they simply ride in with their list.
   3. The cross: js/fc-hf.js puts an inline SVG in the toggle in the po-icons hand (2 px, round caps, ink, pathLength 100)
      with the same three bars as Salient's icon, and hides Salient's lines and X only once it is in place. Opening: the
      bars retire to the right and the two strokes of the X draw on, 0.25 s in all. Closing reverses in 0.2 s: the X
      retires and the bars draw from the left. The SVG arrives at rest (.is-rest), so nothing plays on page load (this
      also retires Salient's unseen on-load close animation). A 44 px tall tap target round the 22 px icon (51 px wide,
      out to the header's edge padding), and a 2 px blue focus ring.
   No script or any error: Salient's own icon and rows, on the light sheet with ink labels. Reduced motion (and ?fcqa=,
   through .fc-hf-menu-still, which the script sets): the menu opens and closes at once, with no blur and no travel; the
   submenu swap keeps a 10 ms animation on the list because Salient's drill-down waits for its animationend, and is a
   clean cut: the list box takes its content's height at once (no 0.5 s glide), and Salient's flying copy of the
   submenu is never drawn, so the old list and the new one never share a frame. */

/* 1. the sheet */
body.fc-hf #slide-out-widget-area-bg.fullscreen{visibility:hidden!important}
body.fc-hf #slide-out-widget-area.fullscreen::before{content:"";position:fixed;left:0;top:0;right:0;bottom:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 38% at 50% 47%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 42%,rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 86% 52% at 98% 4%,rgba(201,201,255,.94) 0%,rgba(201,201,255,0) 100%),
    radial-gradient(ellipse 84% 46% at 90% 100%,rgba(201,201,255,.92) 0%,rgba(201,201,255,0) 100%),
    radial-gradient(ellipse 80% 46% at 0% 100%,rgba(255,227,160,.9) 0%,rgba(255,227,160,0) 100%),
    #F9F9FB;
  opacity:.94;transform:translate3d(0,0,0)}
body.fc-hf #slide-out-widget-area.fullscreen.open::before{animation:fcHfMxSheetIn .45s cubic-bezier(.16,1,.3,1) both}
body.fc-hf #slide-out-widget-area.fullscreen:not(.open){transition:opacity .3s cubic-bezier(.33,1,.68,1)!important;pointer-events:none}
body.fc-hf #slide-out-widget-area.fullscreen:not(.open)::before{animation:fcHfMxSheetOut .3s cubic-bezier(.33,1,.68,1) both}
@keyframes fcHfMxSheetIn{0%{opacity:0;transform:translate3d(0,-24px,0)}100%{opacity:.94;transform:translate3d(0,0,0)}}
@keyframes fcHfMxSheetOut{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-12px,0)}}
/* the page behind: Salient's blur, at 16 px (it was 5 px, which left the page legible through the sheet), eased in with
   the sheet (it was linear) and out as fast as the sheet lifts, after a 0.05 s hold so the labels are gone before the
   page's words sharpen; below the header breakpoint only, where the menu lives */
@media (max-width:999.98px){
  body.fc-hf .blurred-wrap{transition:filter .3s cubic-bezier(.33,1,.68,1) .05s}
  body.fc-hf .blurred-wrap.blurred{filter:blur(16px);transition:filter .45s cubic-bezier(.16,1,.3,1)}
}

/* 2. the labels */
body.fc-hf #slide-out-widget-area.fullscreen .off-canvas-menu-container li > a{color:#2A2D34!important;opacity:1!important;background:transparent!important;
  font-family:"Plus Jakarta Sans",sans-serif!important;font-weight:500!important;font-size:clamp(26px,6.5vw,40px)!important;line-height:1.25!important;
  letter-spacing:-.02em!important;font-feature-settings:"calt" 0;text-wrap:balance;transition:color .2s cubic-bezier(.33,1,.68,1)!important}
body.fc-hf #slide-out-widget-area.fullscreen .off-canvas-menu-container li > a:focus-visible{outline:2px solid #0809FF!important;outline-offset:2px;border-radius:10px}
/* the rows' entrance (it outranks the inline 110 px rise Salient's script drives; Salient's timers still run) */
body.fc-hf #slide-out-widget-area.fullscreen.open .off-canvas-menu-container .menu > li{animation:fcHfMxRowIn .45s cubic-bezier(.16,1,.3,1) .08s both}
body.fc-hf #slide-out-widget-area.fullscreen.open .off-canvas-menu-container .menu > li:nth-child(2){animation-delay:.14s}
body.fc-hf #slide-out-widget-area.fullscreen.open .off-canvas-menu-container .menu > li:nth-child(3){animation-delay:.2s}
body.fc-hf #slide-out-widget-area.fullscreen.open .off-canvas-menu-container .menu > li:nth-child(4){animation-delay:.26s}
body.fc-hf #slide-out-widget-area.fullscreen.open .off-canvas-menu-container .menu > li:nth-child(5){animation-delay:.32s}
body.fc-hf #slide-out-widget-area.fullscreen.open .off-canvas-menu-container .menu > li:nth-child(n+6){animation-delay:.38s}
/* settled (the script's .fc-hf-mx-settled, from 1.3 s after the tap until the menu closes): the rows hold their landed
   state, so a list Back re-shows does not replay the opening rise (the values are the entrance's end, so nothing changes
   on screen as the class arrives) */
body.fc-hf #slide-out-widget-area.fullscreen.open.fc-hf-mx-settled .off-canvas-menu-container .menu > li{opacity:1!important;transform:translate3d(0,0,0)!important;filter:none!important}
/* the close: the labels (and the words of a submenu caught mid-slide) sink 12 px and are gone in 0.1 s, before the page sharpens */
body.fc-hf #slide-out-widget-area.fullscreen:not(.open) .off-canvas-menu-container :is(.menu,.menuwrapper > .sub-menu) > li{animation:fcHfMxRowOut .1s cubic-bezier(.33,1,.68,1) both}
@keyframes fcHfMxRowIn{0%{opacity:0;transform:translate3d(0,12px,0);filter:blur(4px)}100%{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes fcHfMxRowOut{0%{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}100%{opacity:0;transform:translate3d(0,12px,0);filter:blur(0)}}
/* the Line under the current place (the words' span comes from js/fc-hf.js) */
body.fc-hf #slide-out-widget-area.fullscreen .off-canvas-menu-container li > a > .fc-hf-mx-t{position:relative;display:inline-block;max-width:100%}
body.fc-hf #slide-out-widget-area.fullscreen .off-canvas-menu-container li > a > .fc-hf-mx-t::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:1px;
  background:#0809FF;transform:scaleX(0);transform-origin:0 50%;transition:transform .2s cubic-bezier(.33,1,.68,1)}
/* drawn at rest; drawn in only while the menu enters (.fc-hf-mx-entering, set by the script for 1.3 s from the tap), as
   its row lands, and on the list a drill-down brings in, as it slides in. The list that then takes the incoming list's
   place, and the parent list Back brings back, keep it drawn, so it never flickers off and on. */
body.fc-hf #slide-out-widget-area.fullscreen .off-canvas-menu-container li:is(.current-menu-item,.current-menu-ancestor) > a > .fc-hf-mx-t::after{transform:scaleX(1)}
body.fc-hf #slide-out-widget-area.fullscreen.open.fc-hf-mx-entering .off-canvas-menu-container .menu > li:is(.current-menu-item,.current-menu-ancestor) > a > .fc-hf-mx-t::after{animation:fcHfMxLine .25s cubic-bezier(.33,1,.68,1) .62s both}
body.fc-hf #slide-out-widget-area.fullscreen .menuwrapper > .sub-menu.dl-animate-in-5 li:is(.current-menu-item,.current-menu-ancestor) > a > .fc-hf-mx-t::after{animation:fcHfMxLine .2s cubic-bezier(.33,1,.68,1) .16s both}
@keyframes fcHfMxLine{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@media (hover:hover) and (pointer:fine){
  body.fc-hf #slide-out-widget-area.fullscreen .off-canvas-menu-container li > a:hover > .fc-hf-mx-t::after{transform:scaleX(1);transition-duration:.25s}
}
/* Back: a blue kicker with a drawn chevron (Salient draws a gray 0.13 black pill) */
body.fc-hf #slide-out-widget-area.fullscreen .off-canvas-menu-container li.back > a{position:relative;padding:10px 18px 10px 34px!important;
  font-weight:700!important;font-size:14px!important;line-height:1.3!important;letter-spacing:.06em!important;text-transform:uppercase;color:#0809FF!important}
body.fc-hf #slide-out-widget-area.fullscreen .off-canvas-menu-container li.back > a::before{content:"";position:absolute;left:16px;top:50%;width:7px;height:7px;margin-top:-4.5px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;border-radius:1px;transform:rotate(45deg)}
/* the drill-down: flat slides on the camera curve in place of the 25 degree swing (Salient waits for these animationend events) */
body.fc-hf #slide-out-widget-area .menuwrapper .menu.dl-animate-out-5{animation:fcHfMxOutL .35s linear both}
body.fc-hf #slide-out-widget-area .menuwrapper > .sub-menu.dl-animate-in-5{animation:fcHfMxInR .35s linear both}
body.fc-hf #slide-out-widget-area .menuwrapper .menu.dl-animate-in-5{animation:fcHfMxInL .35s linear both}
body.fc-hf #slide-out-widget-area .menuwrapper > .sub-menu.dl-animate-out-5{animation:fcHfMxOutR .35s linear both}
/* one list at a time: the leaving list is gone by 45 percent of the move (0.16 s) and the arriving list starts there, so
   the two sets of words never sit on each other */
@keyframes fcHfMxOutL{0%{opacity:1;transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.33,0,.67,1)}45%{opacity:0;transform:translate3d(-24px,0,0)}100%{opacity:0;transform:translate3d(-24px,0,0)}}
@keyframes fcHfMxInR{0%{opacity:0;transform:translate3d(40px,0,0)}45%{opacity:0;transform:translate3d(40px,0,0);animation-timing-function:cubic-bezier(.16,1,.3,1)}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fcHfMxInL{0%{opacity:0;transform:translate3d(-40px,0,0)}45%{opacity:0;transform:translate3d(-40px,0,0);animation-timing-function:cubic-bezier(.16,1,.3,1)}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fcHfMxOutR{0%{opacity:1;transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.33,0,.67,1)}45%{opacity:0;transform:translate3d(24px,0,0)}100%{opacity:0;transform:translate3d(24px,0,0)}}
@keyframes fcHfMxHold{0%{opacity:1}100%{opacity:1}}
/* Salient's flying copy of a submenu is drawn only while it moves: for Back it is laid over the list it copies a
   moment before its exit starts, which drew the same words twice, one on the other (they read heavier for a frame) */
body.fc-hf #slide-out-widget-area.fullscreen .menuwrapper > .sub-menu:not(.dl-animate-in-5):not(.dl-animate-out-5){visibility:hidden}
/* the list box's height, which centers the list: Salient eases it over 0.5 s (an inline transition from jquery.transit,
   with no callback waiting on it). Here it steps once, in the gap between the two lists (the leaving list is gone by
   0.16 s and the arriving one starts there): Salient sets it at the tap for a drill-in, so the step comes 0.14 s later,
   and 50 ms after the tap for Back (while the parent list carries dl-animate-in-5), so the step comes 0.09 s later */
body.fc-hf #slide-out-widget-area.fullscreen .menuwrapper{transition:height 1ms linear .14s!important}
body.fc-hf #slide-out-widget-area.fullscreen .menuwrapper:has(> .menu.dl-animate-in-5){transition-delay:.09s!important}

/* 3. the cross (the SVG and .fc-hf-mx come from js/fc-hf.js) */
/* the link becomes a block of its own 22 x 20 box (it was an inline wrapped round a block), so the SVG and the tap target can be placed on it */
body.fc-hf #top .slide-out-widget-area-toggle.fc-hf-mx a{display:block;position:relative}
/* Salient's lines and X stay in the layout (the toggle keeps its size) but are not drawn, and their animations stop */
body.fc-hf #top .slide-out-widget-area-toggle.fc-hf-mx a :is(.lines-button,.lines,.close-wrap,.close-line),
body.fc-hf #top .slide-out-widget-area-toggle.fc-hf-mx a :is(.lines-button,.lines)::before,
body.fc-hf #top .slide-out-widget-area-toggle.fc-hf-mx a :is(.lines-button,.lines)::after{visibility:hidden!important;animation:none!important;transition:none!important}
/* the tap target: 44 px tall round the 22 x 20 icon, from 11 px left of it to the header's 18 px edge padding on the right */
body.fc-hf #top .slide-out-widget-area-toggle.fc-hf-mx a::after{content:"";position:absolute;left:-11px;right:-18px;top:-12px;bottom:-12px}
body.fc-hf #top .slide-out-widget-area-toggle.fc-hf-mx a:focus-visible{outline:none}
body.fc-hf #top .slide-out-widget-area-toggle.fc-hf-mx a:focus-visible::after{border-radius:12px;box-shadow:0 0 0 2px #0809FF}
body.fc-hf #top .slide-out-widget-area-toggle .fc-hf-mx-ico{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;overflow:visible;pointer-events:none;display:block}
body.fc-hf #top .slide-out-widget-area-toggle .fc-hf-mx-ico path{fill:none;stroke:#2A2D34;stroke-width:2;stroke-linecap:round;stroke-dasharray:100 110}
body.fc-hf #top .slide-out-widget-area-toggle .fc-hf-mx-ico .fc-hf-mx-bar{stroke-dashoffset:0}
body.fc-hf #top .slide-out-widget-area-toggle .fc-hf-mx-ico .fc-hf-mx-x{stroke-dashoffset:105}
/* opening, 0.25 s: the bars retire to the right (60 ms apart, 0.14 s each), the X draws (0.08 s and 0.11 s in, 0.14 s each) */
body.fc-hf #top .slide-out-widget-area-toggle a.open .fc-hf-mx-ico .fc-hf-mx-bar{animation:fcHfMxBarOut .14s cubic-bezier(.33,1,.68,1) both}
body.fc-hf #top .slide-out-widget-area-toggle a.open .fc-hf-mx-ico .b2{animation-delay:.03s}
body.fc-hf #top .slide-out-widget-area-toggle a.open .fc-hf-mx-ico .b3{animation-delay:.06s}
body.fc-hf #top .slide-out-widget-area-toggle a.open .fc-hf-mx-ico .fc-hf-mx-x{animation:fcHfMxXIn .14s cubic-bezier(.33,1,.68,1) .08s both}
body.fc-hf #top .slide-out-widget-area-toggle a.open .fc-hf-mx-ico .x2{animation-delay:.11s}
/* closing, 0.2 s: the X retires (0.1 s, 20 ms apart), the bars draw from the left (0.1 s each, from 0.06 s, 20 ms apart) */
body.fc-hf #top .slide-out-widget-area-toggle a:not(.open) .fc-hf-mx-ico .fc-hf-mx-x{animation:fcHfMxXOut .1s cubic-bezier(.33,1,.68,1) both}
body.fc-hf #top .slide-out-widget-area-toggle a:not(.open) .fc-hf-mx-ico .x1{animation-delay:.02s}
body.fc-hf #top .slide-out-widget-area-toggle a:not(.open) .fc-hf-mx-ico .fc-hf-mx-bar{animation:fcHfMxBarIn .1s cubic-bezier(.33,1,.68,1) .06s both}
body.fc-hf #top .slide-out-widget-area-toggle a:not(.open) .fc-hf-mx-ico .b2{animation-delay:.08s}
body.fc-hf #top .slide-out-widget-area-toggle a:not(.open) .fc-hf-mx-ico .b3{animation-delay:.1s}
/* at rest until the first opening: no animation on page load */
body.fc-hf #top .slide-out-widget-area-toggle .fc-hf-mx-ico.is-rest path{animation:none!important}
@keyframes fcHfMxBarOut{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-105}}
@keyframes fcHfMxBarIn{0%{stroke-dashoffset:105}100%{stroke-dashoffset:0}}
@keyframes fcHfMxXIn{0%{stroke-dashoffset:105}100%{stroke-dashoffset:0}}
@keyframes fcHfMxXOut{0%{stroke-dashoffset:0}100%{stroke-dashoffset:105}}
/* the end states, for engines that drop a finished animation's fill */
body.fc-hf #top .slide-out-widget-area-toggle a.open .fc-hf-mx-ico .fc-hf-mx-bar{stroke-dashoffset:-105}
body.fc-hf #top .slide-out-widget-area-toggle a.open .fc-hf-mx-ico .fc-hf-mx-x{stroke-dashoffset:0}

/* reduced motion, and ?fcqa= (.fc-hf-menu-still): the same states, at once, with no blur (the doubled id outranks the rules above) */
@media (prefers-reduced-motion:reduce){
  body.fc-hf #slide-out-widget-area#slide-out-widget-area.fullscreen::before{animation:none!important;opacity:1;transform:none}
  body.fc-hf #slide-out-widget-area#slide-out-widget-area.fullscreen:not(.open){transition:none!important}
  body.fc-hf #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container .menu > li{animation:none!important;transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
  body.fc-hf #slide-out-widget-area#slide-out-widget-area .menuwrapper .menu{transition:none!important}
  body.fc-hf #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container li > a > .fc-hf-mx-t::after{animation:none!important;transition:none!important}
  body.fc-hf #slide-out-widget-area#slide-out-widget-area .menuwrapper > .menu:is(.dl-animate-in-5,.dl-animate-out-5){animation:fcHfMxHold .01s linear both!important}
  body.fc-hf #slide-out-widget-area#slide-out-widget-area .menuwrapper > .sub-menu{visibility:hidden!important;animation:none!important}
  body.fc-hf #slide-out-widget-area#slide-out-widget-area .menuwrapper{height:auto!important;transition:none!important}
  body.fc-hf .blurred-wrap.blurred,body.fc-hf .blurred-wrap{filter:none!important;transition:none!important}
  body.fc-hf #top .slide-out-widget-area-toggle .fc-hf-mx-ico path{animation:none!important}
}
body.fc-hf.fc-hf-menu-still #slide-out-widget-area#slide-out-widget-area.fullscreen::before{animation:none!important;opacity:1;transform:none}
body.fc-hf.fc-hf-menu-still #slide-out-widget-area#slide-out-widget-area.fullscreen:not(.open){transition:none!important}
body.fc-hf.fc-hf-menu-still #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container .menu > li{animation:none!important;transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
body.fc-hf.fc-hf-menu-still #slide-out-widget-area#slide-out-widget-area .menuwrapper .menu{transition:none!important}
body.fc-hf.fc-hf-menu-still #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container li > a > .fc-hf-mx-t::after{animation:none!important;transition:none!important}
body.fc-hf.fc-hf-menu-still #slide-out-widget-area#slide-out-widget-area .menuwrapper > .menu:is(.dl-animate-in-5,.dl-animate-out-5){animation:fcHfMxHold .01s linear both!important}
body.fc-hf.fc-hf-menu-still #slide-out-widget-area#slide-out-widget-area .menuwrapper > .sub-menu{visibility:hidden!important;animation:none!important}
body.fc-hf.fc-hf-menu-still #slide-out-widget-area#slide-out-widget-area .menuwrapper{height:auto!important;transition:none!important}
body.fc-hf.fc-hf-menu-still .blurred-wrap.blurred,body.fc-hf.fc-hf-menu-still .blurred-wrap{filter:none!important;transition:none!important}
body.fc-hf.fc-hf-menu-still #top .slide-out-widget-area-toggle .fc-hf-mx-ico path{animation:none!important}
/* ==== end phone menu and cross ==== */

/* ==== hero loop (loop-hero-clock-v2, PILOT-PLAN 6.1) ==== */
/* The hero's HyperFrames loop is square (976x976 on a desktop, 680x680 under 690 px). build_pages.py hf_loop_media() marks
   the video of a square loop record with .fc-hf-sq, and this rule keeps it 1:1 over the 3:2 panel rule at the top of this
   file (it is more specific, so its place in the file does not matter). The 3:2 panel loops never carry .fc-hf-sq and keep
   aspect-ratio 976/650; their reduced-motion poster keeps its shape too. Everything else about the hero loop (the poster,
   the hidden description, reduced motion) is the loops section's, unchanged. */
body.fc-hf .fc-loop video.fc-hf-loop.fc-hf-sq{aspect-ratio:1/1}
/* ==== end hero loop ==== */

/* ==== pilot repair pass (29 Sep 2026) ==== */
/* ---- Three changes on post 388 after Gavin's review of the pilot (the rest of the pass is in js/fc-hf.js).
   (1) The report row holds three tags. "Where reasonably possible" qualifies only the photograph, the physical
       description and the endangerment information in each report (42 U.S.C. 671(a)(35)(B) as amended by P.L. 117-348
       section 137), so regular communication left the row for a lane of its own. Three items sit as a row, not a gallery
       (the house rule: four or more become a gallery), so js/fc-gallery.js no longer mounts on it and no card is ever
       lit; instead each tag's icon draws on in blue once the tags have landed (the kit's draw: 0.5 s on the entrance
       curve, strokes in their own order), 120 ms apart in reading order, and then rests. Before the tags land (and while
       they fly) the quiet grey copy shows. No script, reduced motion, ?fcqa=: drawn and still.
   (2) The regular communication lane (components.py "duty": true, .fc-flow-duty in .fc-hf-duty-col): its own short blue
       kicker and one paper card, the phone icon and the two destinations (law enforcement, NCMEC) on a loop of the Line.
       On the desktop the card is a strip, the art to the left of the words. js/fc-hf.js arms it (.is-armed): the kicker
       rises, the card rises R4 (16 px, 11 px under 690 px, 0.5 s) after the report tags land, the icon draws on
       (.is-drawn), the Line turns blue and one bead runs once around the loop between the two destinations, then rests.
   (3) The walkthrough is square below 690 px (the pilot plan's D5): build_pages.py marks the panel .fc-hf-wt-sq and puts
       the square poster in a <picture> source for that width; js/fc-scroll.js picks the cut from the panel's shape, so the
       1:1 cut plays there. The picture is display:contents, so the img lays out as the panel's own .fc-loop-v. */
/* (1) the report tags' icons draw on after the landing */
body.fc-hf .fc-flow-tags .fc-flow-cards > li:nth-child(2){--tg-k:1}
body.fc-hf .fc-flow-tags .fc-flow-cards > li:nth-child(3){--tg-k:2}
body.fc-hf .fc-flow-tags.is-armed:not(.is-landed) .fc-hf-gi .k>.dr,
body.fc-hf .fc-flow-duty.is-armed:not(.is-drawn) .fc-hf-gi .k>.dr{stroke-dasharray:100;stroke-dashoffset:100;transition:none}
body.fc-hf .fc-flow-tags.is-armed:not(.is-landed) .fc-hf-gi .k>.f,
body.fc-hf .fc-flow-duty.is-armed:not(.is-drawn) .fc-hf-gi .k>.f{fill-opacity:0;transition:none}
body.fc-hf .fc-flow-tags.is-armed:not(.is-landed) .fc-hf-gi .k>.flash,
body.fc-hf .fc-flow-duty.is-armed:not(.is-drawn) .fc-hf-gi .k>.flash{opacity:0;transition:none}
body.fc-hf .fc-flow-tags.is-armed.is-landed .fc-hf-gi .k>.dr{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1) calc(var(--dd,0s) * .6 + var(--tg-k,0) * 120ms)}
body.fc-hf .fc-flow-tags.is-armed.is-landed .fc-hf-gi .k>.f{fill-opacity:1;transition:fill-opacity .4s ease calc(.3s + var(--tg-k,0) * 120ms)}
body.fc-hf .fc-flow-tags.is-armed.is-landed .fc-hf-gi .k>.flash{opacity:1;transition:opacity .25s ease calc(.5s + var(--tg-k,0) * 120ms)}
/* (2) the regular communication lane: the kicker and the paper of the report tags */
body.fc-hf .fc-flow-duty{--tg-blue:#0809FF;--tg-ink:#2A2D34;--tg-sec:#505864;--tg-paper:#FBFBFD;--tg-lip:#E4E8F0}
body.fc-hf .fc-flow-duty .fc-flow-label{color:var(--tg-blue)!important;font-weight:700;letter-spacing:.04em;font-feature-settings:normal;text-transform:uppercase}
body.fc-hf .fc-flow-duty .fc-flow-cards > li{background:var(--tg-paper)!important;border:0;border-radius:16px;
  box-shadow:0 0 0 1px rgba(203,210,222,.6),0 3px 0 var(--tg-lip),0 12px 16px -12px rgba(22,25,60,.3);opacity:1;transform:none;transition:none!important}
body.fc-hf .fc-flow-duty .fc-flow-cards > li::before,body.fc-hf .fc-flow-duty .fc-flow-cards > li::after{display:none!important;content:none!important}
body.fc-hf .fc-flow-duty .fc-flow-cards > li > b{color:var(--tg-ink)!important}
body.fc-hf .fc-flow-duty .fc-flow-cards > li > span{color:var(--tg-sec)!important}
@media only screen and (min-width:691px){
  body.fc-hf .fc-flow-duty .fc-flow-cards > li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:26px;align-items:center}
  body.fc-hf .fc-flow-duty .fc-flow-cards > li > .fc-hf-art{grid-row:1 / span 2;margin:0}
  body.fc-hf .fc-flow-duty .fc-flow-cards > li > b{align-self:end;margin-bottom:4px}
  body.fc-hf .fc-flow-duty .fc-flow-cards > li > span{align-self:start}
}
/* its start state, only once the script has armed it, until it plays; the Line quiet until the icon has drawn */
body.fc-hf .fc-flow-duty.is-armed:not(.is-run) .fc-flow-cards > li,body.fc-hf .fc-flow-duty.is-armed:not(.is-run) .fc-flow-label{opacity:0}
body.fc-hf .fc-flow-duty.is-armed:not(.is-drawn) .fc-hf-dests .lp,body.fc-hf .fc-flow-duty.is-armed:not(.is-drawn) .fc-hf-dests .nd>circle,
body.fc-hf .fc-flow-duty.is-armed:not(.is-drawn) .fc-hf-dests .gl>*{stroke:var(--g-quiet)}
body.fc-hf .fc-flow-duty.is-armed.is-drawn .fc-hf-gi .k>.dr{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1) calc(var(--dd,0s) * .6)}
body.fc-hf .fc-flow-duty.is-armed.is-drawn .fc-hf-gi .k>.f{fill-opacity:1;transition:fill-opacity .4s ease .3s}
body.fc-hf .fc-flow-duty.is-armed.is-drawn .fc-hf-dests .lp,body.fc-hf .fc-flow-duty.is-armed.is-drawn .fc-hf-dests .nd>circle,
body.fc-hf .fc-flow-duty.is-armed.is-drawn .fc-hf-dests .gl>*{transition:stroke .35s ease .35s}
body.fc-hf .fc-flow-duty.is-armed.is-drawn .fc-hf-dests .lb{animation:fcHfDutyBead 2.4s linear .6s 1 both}
@keyframes fcHfDutyBead{0%{opacity:0;stroke-dashoffset:0}8%{opacity:1}88%{opacity:1}100%{opacity:0;stroke-dashoffset:-100}}
/* reduced motion: settled and drawn, whatever the script does */
@media (prefers-reduced-motion:reduce){
  body.fc-hf .fc-flow-duty.is-armed .fc-flow-cards > li,body.fc-hf .fc-flow-duty.is-armed .fc-flow-label{opacity:1!important;transform:none!important}
  body.fc-hf .fc-flow-tags.is-armed .fc-hf-gi .k>.dr,body.fc-hf .fc-flow-duty.is-armed .fc-hf-gi .k>.dr{stroke-dashoffset:0!important;transition:none!important}
  body.fc-hf .fc-flow-tags.is-armed .fc-hf-gi .k>.f,body.fc-hf .fc-flow-duty.is-armed .fc-hf-gi .k>.f{fill-opacity:1!important;transition:none!important}
  body.fc-hf .fc-flow-duty.is-armed .fc-hf-dests .lp,body.fc-hf .fc-flow-duty.is-armed .fc-hf-dests .nd>circle,body.fc-hf .fc-flow-duty.is-armed .fc-hf-dests .gl>*{stroke:var(--g-blue)!important;transition:none!important}
  body.fc-hf .fc-flow-duty .fc-hf-dests .lb{animation:none!important;opacity:0!important}
}
/* (3) the square walkthrough below 690 px (D5) */
body.fc-hf .fc-loop.fc-hf-wt-sq > picture.fc-hf-wt-pic{display:contents}
@media only screen and (max-width:690px){
  body.fc-hf .fc-walkthrough .fc-loop.fc-wide.fc-hf-wt-sq{aspect-ratio:1/1}
}
/* ==== end pilot repair pass ==== */