/* /learn-fda-line-plain-english: its own sheet, loaded after site.css.
   One idea runs the page: a line with two sides. What stays a tissue is drawn
   in blue on white; what has crossed to the drug side is drawn in navy. The
   hero draws the line once, and every part after it puts its own examples on
   one side or the other. Script: scripts/learn-fda-line-plain-english.js.
   With that script absent every part is visible and every link still jumps. */

html:has(body.fdaline) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.fdaline {
  --fl-in: var(--accent-blue);        /* the tissue side */
  --fl-in-ink: var(--accent-blue-hover);
  --fl-out: var(--ink);               /* the drug side */
  --fl-ease: cubic-bezier(.16, 1, .3, 1);
  --fl-gut: clamp(20px, 4vw, 56px);
}

/* ============ GROUND RULES ============ */
.fl-wrap { max-width: calc(1240px + 2 * var(--fl-gut)); margin-inline: auto; padding-inline: var(--fl-gut); }
/* text fills its column; the column sets the measure */
.fdaline main p { max-width: none; margin: 0; }
.fdaline main a:not(.btn) { border-bottom: 0; }
.fdaline main :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.fdaline main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.fdaline main h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; max-width: none; text-wrap: wrap; }
.fdaline main section > .fl-wrap > p, .fdaline main section > .fl-wrap > div > p,
.fdaline main :is(.fl-p1__lead, .fl-p2__text, .fl-p3__text, .fl-p4__text, .fl-test__text, .fl-read__side, .fl-fold) > p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.fdaline main p + p { margin-top: 18px; }
.fdaline main :is(a, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.fdaline .fl-ftc__case a:focus-visible, .fdaline .fl-gate__fail a:focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.fdaline main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }
.fl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a term the glossary defines */
.fdaline main .fl-term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.fdaline main .fl-term:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }
/* the regulation itself, at ecfr.gov */
.fdaline main a[target="_blank"] { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.fdaline main a[target="_blank"]::after { content: "\2197"; display: inline-block; margin-left: 3px; font-size: .8em; transition: transform 300ms var(--fl-ease); }
.fdaline main a[target="_blank"]:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.fdaline main a[target="_blank"]:hover::after { transform: translate(2px, -2px); }
.fl-cite { margin-top: 10px !important; font-size: 15px !important; color: var(--ink-muted) !important; }
.fl-cite a { display: inline-flex; align-items: center; min-height: 44px; }

/* the onward link: the arrow leans the way it points */
.fl-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.fl-go span { display: inline-block; transition: transform 360ms var(--fl-ease); }
.fl-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.fl-go:hover span { transform: translateX(6px); }
.fl-go--up:hover span { transform: translateX(-6px); }

/* the sentence that says it plainly: a rule down its side, drawn when it arrives */
.fl-plain { position: relative; margin-top: 22px !important; padding-left: 22px; color: var(--ink) !important; }
.fl-plain::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--fl-in); transform-origin: top; transition: transform 700ms var(--fl-ease) 200ms; }
.fl-js .fl-plain:not(.is-in)::before { transform: scaleY(0); }
.fl-close { margin-top: clamp(28px, 3.4vw, 44px) !important; }
.fl-big { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.3rem) !important; line-height: 1.25 !important; color: var(--ink) !important; }
.fl-big em { color: var(--accent-blue); }

/* an icon in its badge */
.fl-badge { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--fl-in); color: var(--fl-in-ink); background: #fff; }
.fl-ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (fl-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.fl-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--fl-ease); }
.fl-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.fl-js [data-r="left"]:not(.is-in) { transform: translateX(-28px); }
.fl-js [data-r="right"]:not(.is-in) { transform: translateX(28px); }
.fl-js [data-r="row"]:not(.is-in) { transform: translateX(28px); }
.fl-js :is([data-r="spec"], [data-r="sides"], [data-r="pairs"], [data-r="mix"], [data-r="kin"]):not(.is-in) { opacity: 1; transform: none; }

/* ============ HERO ============ */
.fl-hero { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.fl-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 56px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.fl-hero__h1 > .h-lead, .fl-hero__h1 > em { display: inline-block; }
.fl-hero__h1 > em { color: var(--accent-blue); }
.fl-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.fl-hero__answer { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.55; color: var(--ink); }
.fl-hero__answer em { font-style: normal; font-weight: 600; }
.fl-hero__lede { margin-top: 20px !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }

/* the line. Left of it, the four questions a preparation is asked on its way
   down; right of it, where a "no" to any of them sends it. */
.fl-gate { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34%); }
.fl-gate > :is(.fl-gate__in, .fl-gate__prongs, .fl-gate__pass) { grid-column: 1; }
.fl-gate :is(.fl-gate__in, .fl-gate__pass, li) { position: relative; padding-left: 44px; }
/* the rail: one piece per row, so it starts at the first stop and ends at the last */
.fl-gate :is(.fl-gate__in, .fl-gate__pass, li)::after { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--fl-in), var(--fl-in)) no-repeat top / 100% 100%, var(--border-strong); transition: background-size 300ms linear; }
.fl-gate .fl-gate__in::after { top: 50%; }
.fl-gate .fl-gate__pass::after { bottom: auto; height: 26px; }
/* a stop at each question */
.fl-gate :is(.fl-gate__in, .fl-gate__pass, li)::before { content: ""; position: absolute; z-index: 1; left: 7px; top: 50%; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--fl-in); background: var(--fl-in); transition: background-color 260ms, border-color 260ms, transform 420ms var(--fl-ease); }
.fl-gate .fl-gate__in::before { left: 10px; width: 10px; height: 10px; margin-top: -5px; }
.fl-gate .fl-gate__pass::before { top: 26px; }
.fl-gate__in { padding-block: 0 14px; font-size: 16px; font-weight: 600; color: var(--ink-muted); }
.fl-gate__prongs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; border-top: 1px solid var(--border); }
.fl-gate__prongs li:last-child { border-bottom: 1px solid var(--border); }
.fdaline .fl-gate__prongs a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.2; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms, transform 360ms var(--fl-ease); }
.fdaline .fl-gate__prongs a:hover { color: var(--accent-blue-hover); text-decoration-color: currentColor; transform: translateX(4px); }
/* "No": a dashed way across, ending at the line */
.fl-gate__no { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.fl-gate__no::after { content: ""; width: clamp(28px, 5vw, 72px); height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 11px); }
@keyframes fl-march { to { background-position: 11px 0; } }
.fl-gate__prongs li:is(:hover, :focus-within) .fl-gate__no { color: var(--ink); }
.fl-gate__prongs li:is(:hover, :focus-within) .fl-gate__no::after { animation: fl-march 500ms linear infinite; }
.fl-gate__pass { padding-block: 16px 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.fl-gate :is(.fl-gate__pass, .fl-gate__fail) b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.2; margin-bottom: 4px; }
.fl-gate__pass b { color: var(--fl-in-ink); }
/* what comes out on each side: a tube of cells, or a vial with its paperwork */
.fl-gate__art { display: block; width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fl-gate__art circle { fill: currentColor; stroke: none; }
.fl-gate__pass .fl-gate__art { float: right; margin: -4px 12px 0 16px; color: var(--fl-in); }
.fl-gate__fail .fl-gate__art { margin-bottom: 14px; color: var(--accent-ice); }
/* the other side */
.fl-gate__fail { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; justify-content: center; margin: 0 !important; padding: 24px clamp(16px, 2vw, 28px); background: var(--fl-out); color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.55; border-radius: 0 8px 8px 0; }
.fl-gate__fail b { color: #fff; }
/* the preparation itself, on its way down (placed and moved by the script) */
.fl-gate__cell { display: none; position: absolute; z-index: 2; left: 5px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--fl-in); box-shadow: 0 0 0 5px rgba(45, 110, 177, .16); }

/* first paint: the words, then the stops, then a preparation walks the line */
@keyframes fl-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes fl-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fl-slide { from { opacity: 0; transform: translateX(20px); } }
.fl-js .fl-hero__h1 > * { animation: fl-up 900ms var(--fl-ease) both; }
.fl-js .fl-hero__h1 > em { animation-delay: 110ms; }
.fl-js .fl-hero__text > * { animation: fl-up 900ms var(--fl-ease) 240ms both; }
.fl-js .fl-hero__text > :last-child { animation-delay: 340ms; }
.fl-js .fl-gate :is(.fl-gate__in, .fl-gate__pass, li) { animation: fl-rise 620ms var(--fl-ease) calc(420ms + var(--i, 0) * 90ms) both; }
.fl-gate__prongs li:nth-child(1) { --i: 1; --n: 0; }
.fl-gate__prongs li:nth-child(2) { --i: 2; }
.fl-gate__prongs li:nth-child(3) { --i: 3; }
.fl-gate__prongs li:nth-child(4) { --i: 4; }
.fl-gate__pass { --i: 5; }
.fl-js .fl-gate__fail { animation: fl-slide 820ms var(--fl-ease) 900ms both; }
.fl-js .fl-gate.is-walking .fl-gate__cell { display: block; }
.fl-js .fl-gate.is-walking :is(.fl-gate__in, .fl-gate__pass, li):not(.is-passed)::after { background-size: 100% 0, auto; }
.fl-js .fl-gate.is-walking :is(.fl-gate__in, .fl-gate__pass, li):not(.is-passed)::before { background: #fff; border-color: var(--border-strong); }
.fl-js .fl-gate.is-walking :is(.fl-gate__pass, li).is-passed::before { transform: scale(1.15); }

/* ============ CONTENTS BAR (follows the reader) ============ */
.fdaline .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--fl-ease), visibility 0s 360ms;
}
.fdaline .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--fl-ease); }
body.fdaline.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.fdaline .hc-bar__track {
  max-width: calc(1240px + 2 * var(--fl-gut)); margin: 0 auto; padding: 0 var(--fl-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.fdaline .hc-bar__track::-webkit-scrollbar { display: none; }
.fdaline .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.fdaline .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--fl-ease);
}
.fdaline .hc-bar__track a:hover, .fdaline .hc-bar__track a[aria-current] { color: var(--ink); }
.fdaline .hc-bar__track a:hover::after { transform: scaleX(.35); }
.fdaline .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.fdaline .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.fdaline .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ THE TEST ============ */
.fl-test { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.fdaline .fl-test h2 { margin-bottom: clamp(28px, 4vw, 56px); }
.fl-test__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.fl-test__count { display: flex; align-items: center; gap: 20px; margin-top: 28px !important; padding-top: 24px; border-top: 1px solid var(--border); font-size: 16px !important; line-height: 1.55 !important; color: var(--ink-muted) !important; }
.fl-test__count b { flex: none; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; color: var(--ink); }
.fl-short li { display: flex; gap: clamp(16px, 2vw, 24px); align-items: flex-start; padding-block: 22px; border-top: 1px solid var(--border); }
.fl-short li:first-child { border-top: 0; padding-top: 0; }
.fl-short h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; margin-bottom: 6px !important; }
.fdaline .fl-short h3 a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.fdaline .fl-short h3 a:hover { color: var(--accent-blue-hover); text-decoration-color: currentColor; }
.fl-short li:has(h3 a:hover) .fl-badge { background: var(--accent-wash); transform: scale(1.06); }
.fl-short .fl-badge { transition: background-color 260ms, transform 420ms var(--fl-ease); }
.fl-short p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }
/* the consequence is on the other side of the line */
.fl-short__end .fl-badge { border-color: var(--fl-out); background: var(--fl-out); color: #fff; }
.fl-short .fl-go { min-height: 0; padding-block: 10px; margin-block: -10px; font-size: inherit; }
.fl-js .fl-short li:nth-child(2) { transition-delay: 80ms; }
.fl-js .fl-short li:nth-child(3) { transition-delay: 160ms; }
.fl-js .fl-short li:nth-child(4) { transition-delay: 240ms; }
.fl-js .fl-short li:nth-child(5) { transition-delay: 320ms; }

/* ============ THE FOUR PRONGS, each its own shape ============ */
:is(.fl-p1, .fl-p2, .fl-p3, .fl-p4, .fl-read, .fl-ftc) { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }

/* the two sides of the line, as two lists */
.fl-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(28px, 4vw, 48px); }
.fl-sides__col { padding-block: 4px; }
.fl-sides__col--in { padding-right: clamp(20px, 3vw, 48px); }
.fl-sides__col--out { padding-left: clamp(20px, 3vw, 48px); border-left: 2px solid var(--fl-out); }
.fl-sides h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; margin-bottom: 12px !important; }
.fl-sides__col--in h3 { color: var(--fl-in-ink) !important; }
.fl-sides li { position: relative; padding: 9px 0 9px 28px; font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); border-top: 1px solid var(--border); }
.fl-sides li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 11px; height: 11px; box-sizing: border-box; }
.fl-sides__col--in li::before { border-radius: 50%; border: 2px solid var(--fl-in); }
.fl-sides__col--out li::before { border-radius: 2px; background: var(--fl-out); }
.fl-js .fl-sides__col { transition: opacity 620ms ease, transform 820ms var(--fl-ease); }
.fl-js .fl-sides:not(.is-in) .fl-sides__col { opacity: 0; }
.fl-js .fl-sides:not(.is-in) .fl-sides__col--in { transform: translateX(24px); }
.fl-js .fl-sides:not(.is-in) .fl-sides__col--out { transform: translateX(-24px); }

/* native "Read more": opened for print, found by in-page search */
.fl-more { margin-top: 12px; }
.fl-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.fl-more summary::-webkit-details-marker { display: none; }
.fl-more summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--fl-ease); }
.fl-more summary:hover { color: var(--accent-blue); }
.fl-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.fl-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.fl-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.fl-more__shut, .fl-more[open] .fl-more__open { display: none; }
.fl-more[open] .fl-more__shut { display: inline; }
.fl-more__body { padding-block: 8px 4px; }
.fl-more__body p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
/* a fold that only a phone needs: on a wider screen the script opens it and its handle goes */
.fl-fold { margin-top: 8px; }
@media (min-width: 761px) {
  .fl-on .fl-fold { margin-top: 0; }
  .fl-on .fl-fold > summary { display: none; }
}
.fl-fold > .fl-sides { margin-top: 12px; }
.fl-fold > p:first-of-type { margin-top: 8px; }
@keyframes fl-unfold { from { opacity: 0; transform: translateY(-8px); } }
.fl-more[open] .fl-more__body, .fl-fold[open] > :not(summary), .fl-say[open] .fl-say__a { animation: fl-unfold 420ms var(--fl-ease); }

/* --- prong 1: what can be done to a cell, in order, and where the line falls --- */
.fl-p1__lead { margin-top: clamp(16px, 2vw, 24px); }
.fl-spec { margin: clamp(32px, 4.4vw, 60px) 0 0; }
.fl-spec figcaption { font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; color: var(--ink); margin-bottom: 44px; }
.fl-spec__track { display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); column-gap: clamp(12px, 2vw, 28px); }
.fl-spec__side ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fl-spec__side li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fl-spec__side li b { margin-top: 12px; font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.fl-spec__side li.is-key b { font-weight: 700; }
.fl-spec__side li small { margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--ink-muted); }
.fl-spec__side--out .fl-badge { border-color: var(--fl-out); background: var(--fl-out); color: #fff; }
/* the contested step stands half on each side */
.fl-spec__side--out li.is-key .fl-badge { border: 2px dashed var(--fl-out); background: #fff; color: var(--ink); }
.fl-spec__side > p { margin-top: 20px !important; padding-top: 14px; border-top: 1px solid var(--border); font-size: 15px; font-weight: 600; }
.fl-spec__side--in > p { color: var(--fl-in-ink); border-top-color: var(--fl-in); }
.fl-spec__side--out > p { color: var(--fl-out); border-top-color: var(--fl-out); text-align: right; }
.fl-spec__line { position: relative; background: var(--fl-out); transform-origin: top; }
.fl-spec__line span { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); padding-bottom: 10px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink); }
@keyframes fl-pop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } }
@keyframes fl-drop { from { transform: scaleY(0); } }
.fl-js .fl-spec:not(.is-in) :is(li, .fl-spec__line, .fl-spec__side > p) { opacity: 0; }
.fl-js .fl-spec.is-in li { animation: fl-rise 520ms var(--fl-ease) calc(var(--i) * 110ms) both; }
.fl-js .fl-spec.is-in li .fl-badge { animation: fl-pop 520ms var(--fl-ease) calc(var(--i) * 110ms) both; }
.fl-js .fl-spec.is-in .fl-spec__line { animation: fl-drop 700ms var(--fl-ease) 430ms both; }
.fl-js .fl-spec.is-in .fl-spec__side > p { animation: fl-rise 620ms var(--fl-ease) 900ms both; }

/* --- prong 2: the same job, or a different one --- */
.fl-p2__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.fl-p2__text > p:nth-of-type(2) { margin-top: clamp(16px, 2vw, 24px); }
.fl-pairs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto auto auto 1fr; gap: 0 clamp(24px, 3vw, 44px); }
.fl-pair { display: grid; grid-row: span 4; grid-template-rows: subgrid; padding-block: 22px; border-top: 1px solid var(--border); }
.fl-pair:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.fl-pair__art { width: 160px; height: 48px; margin-bottom: 10px; overflow: visible; }
.fl-pair__art :is(circle, rect, path) { fill: #fff; stroke: var(--fl-in); stroke-width: 2; stroke-linecap: round; }
.fl-pair__art .fl-pair__path { fill: none; }
.fl-pair__art .fl-pair__dot { fill: var(--fl-in); stroke: none; transform: translateX(96px); }
.fl-pair--no .fl-pair__art .fl-pair__path { stroke-dasharray: none; }
.fl-pair--no .fl-pair__art .fl-pair__wall { stroke: var(--fl-out); stroke-dasharray: 3 5; }
.fl-pair--no .fl-pair__art .fl-pair__sq { stroke: var(--fl-out); }
.fl-pair--no .fl-pair__art .fl-pair__dot { fill: var(--fl-out); }
.fl-pair:nth-child(2) { --n: 1; }
.fl-pair:nth-child(3) { --n: 2; }
.fl-pair:nth-child(4) { --n: 3; }
.fl-pair h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; }
.fl-pair__verdict { margin-top: 4px !important; font-size: 14.5px; font-weight: 600; color: var(--fl-in-ink); }
.fl-pair--no .fl-pair__verdict { color: var(--fl-out); }
.fl-pair > p:last-child { margin-top: 8px !important; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
@keyframes fl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fl-cross { from { transform: translateX(0); } }
@keyframes fl-cross-out { from { transform: translateX(0); fill: var(--fl-in); } 45% { fill: var(--fl-in); } 55% { fill: var(--fl-out); } }
.fl-js .fl-pairs:not(.is-in) .fl-pair { opacity: 0; }
.fl-js .fl-pairs .fl-pair { transition: opacity 620ms ease calc(var(--n, 0) * 140ms); }
.fl-js .fl-pairs.is-in .fl-pair__path { stroke-dasharray: 1; animation: fl-draw 800ms var(--fl-ease) calc(200ms + var(--n, 0) * 140ms) both; }
.fl-js .fl-pairs.is-in .fl-pair__dot { animation: fl-cross 1100ms var(--fl-ease) calc(300ms + var(--n, 0) * 140ms) both; }
.fl-js .fl-pairs.is-in .fl-pair--no .fl-pair__dot { animation-name: fl-cross-out; }
.fl-p2__after { margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border); }
.fl-p2__after .fl-big { margin-top: clamp(24px, 3vw, 36px) !important; }

/* --- prong 3: what goes in with the cells --- */
.fl-p3__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 72px); align-items: center; margin-top: clamp(16px, 2vw, 24px); }
.fl-mix { margin: 0; }
.fl-mix svg { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; overflow: visible; }
.fl-mix svg :is(path, rect) { fill: none; stroke: var(--fl-in); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 600ms ease 900ms; }
.fl-mix .fl-mix__line { stroke: var(--fl-out); stroke-dasharray: 3 7; }
.fl-mix .fl-mix__level { stroke-width: 1.4; stroke-dasharray: 2 5; }
.fl-mix .fl-mix__c { fill: var(--fl-in); transition: fill 600ms ease 900ms; }
.fl-mix .fl-mix__drop { fill: var(--accent-wash); }
.fl-mix .fl-mix__out :is(path, rect) { stroke: var(--fl-out); }
.fl-mix .fl-mix__out .fl-mix__c { fill: var(--fl-out); }
@keyframes fl-fall { from { transform: translateY(-26px); opacity: 0; } 60% { opacity: 1; } }
.fl-js .fl-mix:not(.is-in) :is(.fl-mix__drop, .fl-mix__add) { opacity: 0; }
.fl-js .fl-mix:not(.is-in) .fl-mix__out > path { stroke: var(--fl-in); }
.fl-js .fl-mix:not(.is-in) .fl-mix__out .fl-mix__c { fill: var(--fl-in); }
.fl-js .fl-mix.is-in :is(.fl-mix__drop, .fl-mix__add) { animation: fl-fall 900ms var(--fl-ease) 200ms both; }

/* --- prong 4: whose cells --- */
.fl-p4__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(16px, 2vw, 24px); }
.fl-kin { margin: 0; }
.fl-kin svg { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; overflow: visible; }
.fl-kin circle { fill: #fff; stroke: var(--fl-in); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.fl-kin .fl-kin__ring { fill: none; stroke: var(--border); stroke-width: 1.4; stroke-dasharray: 2 7; }
.fl-kin .fl-kin__ties path { fill: none; stroke: var(--fl-in); stroke-width: 1.6; stroke-linecap: round; }
.fl-kin .fl-kin__one circle { fill: var(--fl-in); }
.fl-kin .fl-kin__two circle { fill: var(--accent-wash); }
.fl-kin .fl-kin__far circle { stroke: var(--ink-muted); stroke-dasharray: 3 4; }
.fl-kin .fl-kin__you { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.fl-kin figcaption { margin-top: 20px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.fl-js .fl-kin:not(.is-in) :is(.fl-kin__ties, .fl-kin__one, .fl-kin__two, .fl-kin__far) { opacity: 0; }
.fl-js .fl-kin.is-in .fl-kin__ties path { stroke-dasharray: 1; animation: fl-draw 900ms var(--fl-ease) 150ms both; }
.fl-js .fl-kin.is-in .fl-kin__ties path + path { animation-delay: 650ms; animation-duration: 1100ms; }
.fl-js .fl-kin.is-in .fl-kin__one circle { animation: fl-pop 420ms var(--fl-ease) 550ms both; }
.fl-js .fl-kin.is-in .fl-kin__two circle { animation: fl-pop 420ms var(--fl-ease) 1250ms both; }
.fl-js .fl-kin.is-in .fl-kin__far { animation: fl-rise 700ms ease 1900ms both; }

/* ============ ALL FOUR ============ */
.fl-all { background: var(--accent-wash); padding-block: clamp(48px, 6vw, 88px); }
.fl-all p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.22; color: var(--ink); }
.fl-all em { color: var(--accent-blue-hover); }

/* ============ READING CLINIC MARKETING ============ */
.fl-read { border-top: 0; }
.fl-read .fl-big { margin-top: clamp(14px, 2vw, 22px) !important; }
.fl-read__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px); align-items: start; margin-top: clamp(28px, 4vw, 56px); }
.fl-read__side { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 24px); }
.fl-read__art { margin-top: 28px; }
/* four gates: the ones a phrase leans on stand open, one it fails stays shut */
.fl-gates { display: block; width: 100%; height: auto; overflow: visible; }
.fl-gates path { fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; transition: stroke 300ms, stroke-width 300ms, transform 520ms var(--fl-ease); }
.fl-gates .fl-gates__road { stroke: var(--border-strong); }
.fl-gates .fl-gates__bar { transform-box: fill-box; transform-origin: left center; }
.fl-gates .fl-gates__cell { fill: var(--fl-in); opacity: 0; transform: translateX(-26px); transition: opacity 300ms, transform 720ms var(--fl-ease); }
.fl-gates .is-on path { stroke: var(--fl-in); }
.fl-gates .is-on .fl-gates__bar { transform: rotate(-64deg); }
.fl-gates .is-on .fl-gates__cell { opacity: 1; transform: none; }
.fl-gates .is-fail path { stroke: var(--fl-out); }
.fl-gates .is-fail .fl-gates__bar { stroke-width: 6; }
.fl-read__list > h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; margin-bottom: 14px !important; }
.fl-say { border-top: 1px solid var(--border); }
.fl-say:last-child { border-bottom: 1px solid var(--border); }
.fl-say summary { display: flex; align-items: center; gap: 16px; min-height: 64px; padding-block: 12px; cursor: pointer; list-style: none; transition: color 200ms; }
.fl-say summary::-webkit-details-marker { display: none; }
.fl-say summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 6px 0 4px; border-right: 2px solid var(--accent-blue-hover); border-bottom: 2px solid var(--accent-blue-hover); transform: rotate(45deg); transition: transform 360ms var(--fl-ease); }
.fl-say[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.fl-say summary:hover::after { transform: translateY(3px) rotate(45deg); }
.fl-say[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.fl-say__q { flex: 1; font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.25; color: var(--ink); transition: color 200ms, transform 360ms var(--fl-ease); }
.fl-say summary:hover .fl-say__q { color: var(--accent-blue-hover); transform: translateX(4px); }
/* the same four gates, small, beside each phrase */
.fl-marks { flex: none; display: inline-flex; gap: 5px; }
.fl-marks i { width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.fl-marks i.is-on { border-color: var(--fl-in); background: var(--fl-in); }
.fl-marks i.is-fail { border-radius: 2px; border-color: var(--fl-out); background: var(--fl-out); }
.fl-say__a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(20px, 3vw, 44px); padding: 4px 0 24px; }
.fl-say__a p { margin: 0 !important; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.fl-say__k { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.fl-read__after { margin-top: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(28px, 4vw, 64px); }
.fl-read__after p { margin: 0 !important; font-size: 17px !important; }

/* ============ THE OTHER AGENCY ============ */
.fl-ftc { padding-bottom: clamp(56px, 7vw, 104px); }
.fl-ftc__lede { margin-top: clamp(16px, 2vw, 24px) !important; }
.fl-ftc__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); margin-block: clamp(32px, 4.4vw, 60px); }
.fl-ftc__art { display: block; width: 96px; height: 64px; margin-bottom: 16px; overflow: visible; }
.fl-ftc__art path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fl-ftc__art .fl-ftc__fill { fill: var(--fl-in); stroke: none; transform-box: fill-box; transform-origin: right center; transition: transform 1200ms var(--fl-ease) 400ms; }
.fl-ftc__art .fl-ftc__plunger { transition: transform 1200ms var(--fl-ease) 400ms; }
.fl-js .fl-ftc__col:not(.is-in) .fl-ftc__fill { transform: scaleX(.2); }
.fl-js .fl-ftc__col:not(.is-in) .fl-ftc__plunger { transform: translateX(-10px); }
.fl-ftc__art .fl-ftc__head { stroke: var(--fl-in); stroke-width: 4; }
.fl-ftc__art .fl-ftc__ln { stroke: var(--ink-muted); stroke-width: 1.6; }
.fl-js .fl-ftc__col.is-in :is(.fl-ftc__head, .fl-ftc__ln) { stroke-dasharray: 1; animation: fl-draw 900ms var(--fl-ease) 400ms both; }
.fl-js .fl-ftc__col.is-in .fl-ftc__ln { animation-delay: 700ms; animation-duration: 1300ms; }
.fl-js .fl-ftc__col:not(.is-in) :is(.fl-ftc__head, .fl-ftc__ln) { opacity: 0; }
.fl-ftc__col h3 { font-size: clamp(1.4rem, 2.1vw, 1.8rem); line-height: 1.2; margin-bottom: 10px !important; }
.fl-ftc__col p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.fl-ftc__case { background: var(--ink); padding-block: clamp(40px, 5vw, 72px); }
.fl-ftc__case .fl-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(32px, 5vw, 88px); align-items: start; }
.fdaline .fl-ftc__case h3 { font-weight: 300; font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height: 1.15; color: #fff; }
.fl-ftc__case p { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .86); }

/* ============ ONWARD ============ */
.fl-next { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.fdaline .fl-next h2 { margin-bottom: clamp(20px, 3vw, 36px); }
.fl-route li { position: relative; padding-left: 44px; }
/* a stop for each article, and one connector per gap: nothing runs on past the last stop */
.fl-route li::before { content: ""; position: absolute; left: 0; top: 50%; width: 15px; height: 15px; margin-top: -8px; box-sizing: border-box; border: 2px solid var(--border-strong); border-radius: 50%; background: #fff; z-index: 1; transition: border-color 320ms, background-color 320ms, transform 420ms var(--fl-ease); }
.fl-route li:not(:last-child)::after { content: ""; position: absolute; left: 6.5px; top: calc(50% + 7px); height: calc(100% - 14px); width: 2px; background: linear-gradient(var(--accent-blue), var(--accent-blue)) no-repeat top / 100% 0, var(--border); transition: background-size 620ms var(--fl-ease); }
.fl-route li.is-passed::before { border-color: var(--accent-blue); background: var(--accent-blue); transform: scale(1.12); }
.fl-route li.is-passed:not(:last-child)::after { background-size: 100% 100%, auto; }
.fdaline .fl-route a { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 22px 0; border-bottom: 1px solid var(--border); color: var(--ink); }
.fdaline .fl-route li:last-child a { border-bottom: 0; }
.fl-route__t { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; transition: color 200ms; }
.fl-route__go { flex: none; font-size: 20px; color: var(--accent-blue-hover); transition: transform 360ms var(--fl-ease); }
.fl-route a:hover .fl-route__t, .fl-route a:focus-visible .fl-route__t { color: var(--accent-blue-hover); }
.fl-route a:hover .fl-route__go, .fl-route a:focus-visible .fl-route__go { transform: translateX(8px); }
.fl-up { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: clamp(20px, 3vw, 36px) !important; padding-top: 20px; border-top: 1px solid var(--border-strong); }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .fdaline .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 900px) {
  .fl-hero__row, .fl-test__grid, .fl-p2__grid, .fl-p3__grid, .fl-p4__grid, .fl-read__grid, .fl-ftc__case .fl-wrap { grid-template-columns: minmax(0, 1fr); }
  .fl-read__side { position: static; }
  .fl-read__art { max-width: 420px; }
  .fl-p3__grid { gap: 20px; }
  .fl-p3__grid .fl-mix { order: 2; }
  .fl-mix svg { max-width: 300px; }
  .fl-kin svg { max-width: 320px; }
  .fl-read__after { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* the spectrum stands on end: the minimal steps, the line across, then the rest */
  .fl-spec__track { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .fl-spec figcaption { margin-bottom: 24px; }
  .fl-spec__line { height: 2px; margin-block: 52px 24px !important; transform-origin: left; }
  .fl-js .fl-spec.is-in .fl-spec__line { animation-name: fl-drop-x; }
  .fl-spec__side--out > p { text-align: left; }
  .fl-spec__side > p { margin-top: 16px !important; }
  .fl-ftc__two { grid-template-columns: minmax(0, 1fr); }
  .fl-js [data-r="left"]:not(.is-in), .fl-js [data-r="right"]:not(.is-in), .fl-js [data-r="row"]:not(.is-in) { transform: translateY(18px); }
  .fl-say__a { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}
@keyframes fl-drop-x { from { transform: scaleX(0); } }
@media (max-width: 600px) {
  html:has(body.fdaline) { --hc-bar-h: 48px; }
  .fdaline .hc-bar__track { gap: 22px; }
  .fdaline main section > .fl-wrap > p, .fdaline main section > .fl-wrap > div > p,
  .fdaline main :is(.fl-p1__lead, .fl-p2__text, .fl-p3__text, .fl-p4__text, .fl-test__text, .fl-read__side, .fl-fold) > p { font-size: 17px; }
  /* the two sides stack, and the line is drawn across between them */
  .fl-gate { grid-template-columns: minmax(0, 1fr); }
  .fl-gate > :is(.fl-gate__in, .fl-gate__prongs, .fl-gate__pass) { border-right: 2px solid var(--fl-out); }
  .fl-gate__pass { padding-bottom: 20px; }
  .fl-gate__fail { grid-column: 1; grid-row: auto; border-radius: 0 0 8px 8px; }
  .fl-gate__no::after { width: 22px; }
  .fl-js .fl-gate__fail { animation-name: fl-rise; }
  .fl-gate__prongs li { min-height: 60px; }
  .fl-badge { width: 48px; height: 48px; }
  .fl-ic { width: 23px; height: 23px; }
  .fl-spec__side ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .fl-sides { grid-template-columns: minmax(0, 1fr); }
  .fl-sides__col--in { padding-right: 0; padding-bottom: 20px; }
  .fl-sides__col--out { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 2px solid var(--fl-out); }
  .fl-js .fl-sides:not(.is-in) .fl-sides__col { transform: translateY(14px); }
  .fl-pairs { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .fl-pair { display: block; grid-row: auto; }
  .fl-pair:nth-child(2) { border-top: 1px solid var(--border); padding-top: 22px; }
  .fl-test__count { align-items: flex-start; flex-direction: column; gap: 8px; }
  .fl-route li { padding-left: 32px; }
  .fl-marks i { width: 9px; height: 9px; }
  .fl-marks { gap: 4px; }
  .fl-say summary { gap: 10px; }
}
@supports not (grid-template-rows: subgrid) {
  .fl-pair { display: block; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .fdaline main *, .fdaline main *::before, .fdaline main *::after { animation: none !important; transition: none !important; }
  .fl-js [data-r]:not(.is-in), .fl-js .fl-sides:not(.is-in) .fl-sides__col, .fl-js .fl-pairs:not(.is-in) .fl-pair { opacity: 1 !important; transform: none !important; }
  .fl-js .fl-spec:not(.is-in) :is(li, .fl-spec__line, .fl-spec__side > p), .fl-js .fl-mix:not(.is-in) :is(.fl-mix__drop, .fl-mix__add),
  .fl-js .fl-kin:not(.is-in) :is(.fl-kin__ties, .fl-kin__one, .fl-kin__two, .fl-kin__far), .fl-js .fl-ftc__col:not(.is-in) :is(.fl-ftc__head, .fl-ftc__ln) { opacity: 1 !important; }
  .fl-js :is(.fl-pair__path, .fl-kin__ties path, .fl-ftc__head, .fl-ftc__ln) { stroke-dasharray: none !important; }
  .fl-js .fl-plain::before, .fl-js .fl-ftc__col .fl-ftc__fill, .fl-js .fl-ftc__col .fl-ftc__plunger { transform: none !important; }
  .fl-js .fl-mix .fl-mix__out > path { stroke: var(--fl-out) !important; }
  .fl-js .fl-mix .fl-mix__out .fl-mix__c { fill: var(--fl-out) !important; }
  .fl-gate__cell { display: none !important; }
  .fdaline .hc-bar { transition: none !important; }
  .fl-go:hover span, .fl-route a:hover .fl-route__go, .fl-say summary:hover .fl-say__q, .fdaline .fl-gate__prongs a:hover { transform: none; }
}
@media print {
  .fdaline .hc-bar, .fl-gate__cell { display: none !important; }
  .fl-js [data-r], .fl-js .fl-sides__col, .fl-js .fl-pair, .fl-js .fl-spec :is(li, .fl-spec__line, .fl-spec__side > p),
  .fl-js .fl-mix :is(.fl-mix__drop, .fl-mix__add), .fl-js .fl-kin g, .fl-js .fl-ftc__art path { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fl-gate__fail, .fl-ftc__case { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
  .fl-gate__fail b, .fdaline .fl-ftc__case h3, .fl-ftc__case p { color: var(--ink); }
  .fl-read__side { position: static; }
}

/* Paper is taken the instant the print dialog opens: nothing may still be fading or sliding in. */
@media print {
  main *, main *::before, main *::after { animation: none !important; transition: none !important; }
}

/* On paper every fold is open, so its Show less handle has nothing to do. */
@media print {
  details.fl-more > summary { display: none !important; }
}