/* ═══════════════════════════════════════════════════════════════════════════
   OLIVE LIQUID — the Ask Olive glass design language, v1
   ───────────────────────────────────────────────────────────────────────────
   Evolves the existing Olive look (warm dark base, indigo → lime signature
   gradient) into true liquid glass: layered translucency, specular rims,
   ambient light that the glass actually refracts, and spring motion.

   WHY IT LOOKS LIKE GLASS AND NOT LIKE A GREY BOX
   Blur alone is frosted plastic. Four things together read as glass, and all
   four are required:
     1. an ambient light field BEHIND the glass, for it to bend and tint
     2. saturation + brightness lift in the backdrop filter, not just blur
     3. a specular rim — bright where light hits, dark where it doesn't
     4. an inner top highlight, so the pane has thickness

   USE
     <link rel="stylesheet" href="/css/olive-liquid.css">
     <div class="lq-field" aria-hidden="true"></div>   <- once, first in body
     <div class="lq">…</div>                           <- any glass surface

   CONTENTS
     1. Tokens
     2. Ambient light field
     3. Glass surfaces — the core
     4. Motion
     5. Controls
     6. Flow spine (timeline) — evolved from .phase-timeline
     7. Flow links (animated connectors) — from .canvas-connection.animated
     8. Line icons
     9. Utilities + accessibility
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0. SELF-HOSTED FONTS ───────────────────────────────────────────────────
   Fraunces + Inter Tight (Heartwood/dark) and DM Serif Display + DM Sans
   (Heartwood Light) — self-hosted latin-subset variable fonts under
   /public/fonts/, no Google Fonts CDN. A local @font-face costs nothing
   until an element actually renders with that family, so declaring all
   four here — unconditionally, once — is safe for pages that never use
   some of them; this replaces the old per-page fonts.googleapis.com <link>
   (remove it from any page still carrying one, this file now covers it). */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/Fraunces-Roman-VF.woff2') format('woff2-variations'),
      url('../fonts/Fraunces-Roman-VF.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/Fraunces-Italic-VF.woff2') format('woff2-variations'),
      url('../fonts/Fraunces-Italic-VF.woff2') format('woff2');
}
@font-face{
  font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/InterTight-VF.woff2') format('woff2-variations'),
      url('../fonts/InterTight-VF.woff2') format('woff2');
}
@font-face{
  font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/DMSerifDisplay-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/DMSerifDisplay-Italic.woff2') format('woff2');
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/DMSans-Roman-VF.woff2') format('woff2-variations'),
      url('../fonts/DMSans-Roman-VF.woff2') format('woff2');
}
@font-face{
  font-family:'DM Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/DMSans-Italic-VF.woff2') format('woff2-variations'),
      url('../fonts/DMSans-Italic-VF.woff2') format('woff2');
}


/* ── csync #3924: previously-undeclared tokens (measured by code_developer,
   code_sweep/reports/CSS_UNDECLARED_3924.tsv). Only values with evidence:
   --accent-lime is the legacy name for the brand accent (fallback #818cf8 in
   process-card-stack.css, git history of process-customizer.css); the
   --accent-<colour>-<N> names are N% tints of --accent-<colour> (name
   convention, used as backgrounds in stakeholder-lobbies.css). Tints resolve
   at :root, so a skin that redefines --accent-<colour> on a descendant does
   not re-tint these. ── */
:root{
  --accent-lime:var(--lq-brand-hi,#818cf8);
  --accent-amber-2:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 2%,transparent);
  --accent-amber-3:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 3%,transparent);
  --accent-amber-5:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 5%,transparent);
  --accent-amber-8:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 8%,transparent);
  --accent-amber-10:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 10%,transparent);
  --accent-amber-15:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 15%,transparent);
  --accent-amber-20:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 20%,transparent);
  --accent-amber-30:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 30%,transparent);
  --accent-amber-40:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 40%,transparent);
  --accent-amber-50:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 50%,transparent);
  --accent-amber-60:color-mix(in srgb,var(--accent-amber,var(--lq-warn)) 60%,transparent);
  --accent-blue-2:color-mix(in srgb,var(--accent-blue,var(--lq-info)) 2%,transparent);
  --accent-blue-5:color-mix(in srgb,var(--accent-blue,var(--lq-info)) 5%,transparent);
  --accent-blue-8:color-mix(in srgb,var(--accent-blue,var(--lq-info)) 8%,transparent);
  --accent-blue-10:color-mix(in srgb,var(--accent-blue,var(--lq-info)) 10%,transparent);
  --accent-blue-15:color-mix(in srgb,var(--accent-blue,var(--lq-info)) 15%,transparent);
  --accent-blue-20:color-mix(in srgb,var(--accent-blue,var(--lq-info)) 20%,transparent);
  --accent-blue-30:color-mix(in srgb,var(--accent-blue,var(--lq-info)) 30%,transparent);
  --accent-cyan-15:color-mix(in srgb,var(--accent-cyan,var(--lq-info)) 15%,transparent);
  --accent-green-2:color-mix(in srgb,var(--accent-green,var(--lq-ok)) 2%,transparent);
  --accent-green-5:color-mix(in srgb,var(--accent-green,var(--lq-ok)) 5%,transparent);
  --accent-green-8:color-mix(in srgb,var(--accent-green,var(--lq-ok)) 8%,transparent);
  --accent-green-10:color-mix(in srgb,var(--accent-green,var(--lq-ok)) 10%,transparent);
  --accent-green-15:color-mix(in srgb,var(--accent-green,var(--lq-ok)) 15%,transparent);
  --accent-green-20:color-mix(in srgb,var(--accent-green,var(--lq-ok)) 20%,transparent);
  --accent-orange-20:color-mix(in srgb,var(--accent-orange,var(--lq-warn)) 20%,transparent);
  --accent-pink-15:color-mix(in srgb,var(--accent-pink,var(--lq-brand-hi)) 15%,transparent);
  --accent-purple-2:color-mix(in srgb,var(--accent-purple,var(--lq-brand-hi)) 2%,transparent);
  --accent-purple-5:color-mix(in srgb,var(--accent-purple,var(--lq-brand-hi)) 5%,transparent);
  --accent-purple-8:color-mix(in srgb,var(--accent-purple,var(--lq-brand-hi)) 8%,transparent);
  --accent-purple-10:color-mix(in srgb,var(--accent-purple,var(--lq-brand-hi)) 10%,transparent);
  --accent-purple-15:color-mix(in srgb,var(--accent-purple,var(--lq-brand-hi)) 15%,transparent);
  --accent-purple-20:color-mix(in srgb,var(--accent-purple,var(--lq-brand-hi)) 20%,transparent);
  --accent-red-10:color-mix(in srgb,var(--accent-red,var(--lq-signal)) 10%,transparent);
  --accent-red-15:color-mix(in srgb,var(--accent-red,var(--lq-signal)) 15%,transparent);
  --accent-red-20:color-mix(in srgb,var(--accent-red,var(--lq-signal)) 20%,transparent);
}

/* csync #3924 / colour_swap request: --font-sans default so `font: 600 13px/1.2
   var(--font-sans, inherit)` (olive-context-chip.css) is valid on pages that
   load olive-liquid.css without defining it (project-timeline*.html). :where()
   gives zero specificity, so any page/skin that declares its own --font-sans on
   :root still wins regardless of stylesheet order. */
:where(:root){--font-sans:var(--lq-font-body)}

/* csync #3957: text ON a solid brand/status fill (buttons, badges). Dark = the page
   text colour, unchanged. Light overrides to white in the [data-theme="light"]
   block, because --lq-text-warm flips to dark ink there and dark-on-purple is
   ~1.5:1. Do not use --lq-text-warm for text sitting on a coloured fill. */
:root{--lq-on-fill:var(--lq-text-warm)}

/* ── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root{
  /* Brand — carried over unchanged from ui-standards.css / methodology.html.
     Indigo → lime is the Olive signature; the olive-drab greens come from the
     logo and act as the supporting, "organic" tone. */
  /* Stage 3 (2026-09-17): re-valued onto Heartwood per docs/DESIGN_TOKENS_LIQUID_CANONICAL.md §4.
     Legacy names below are now aliases; nothing that consumes --lq-indigo/-lime/etc.
     was touched, only what these names resolve to. Historical values: #818cf8 / #b8d62e. */
  --lq-indigo:var(--lq-brand-hi);
  --lq-indigo-deep:var(--lq-brand);
  --lq-lime:var(--lq-heartwood-hi);
  --lq-olive:#6b8e23;
  --lq-olive-deep:#556b2f;
  --lq-sage:#8fbc8f;
  --lq-coral:#ff8f5c;
  --lq-cyan:#00d4ff;

  /* The signature gradient. One per view — it is the loudest thing here. */
  /* Stage 3: flat two-stop (no gradient in Heartwood) so background-clip:text callers still work. */
  --lq-grad-brand:linear-gradient(var(--lq-brand-hi),var(--lq-brand-hi));
  --lq-grad-brand-soft:linear-gradient(135deg,color-mix(in srgb, var(--lq-indigo) 22%, transparent),color-mix(in srgb, var(--lq-lime) 18%, transparent));
  --lq-grad-organic:linear-gradient(135deg,var(--lq-olive) 0%,var(--lq-sage) 100%);

  /* Base — warm dark, a touch of blue so the glass has something to cool it */
  --lq-void:#070610;
  --lq-base:var(--lq-ground); /* Stage 3, was #0d0d12 */
  --lq-base-lift:#161620;

  /* Text */
  --lq-text:var(--lq-text-warm); /* Stage 3, was #f5f5f7 */
  --lq-text-2:#b6b6c4;
  --lq-text-3:#82828f;

  /* ── Glass recipe ──────────────────────────────────────────────────────
     Three tiers of thickness. --lq-tint is the pane's own body colour; the
     saturate/brightness lift is what stops it going grey and dead. */
  --lq-tint:rgba(255,245,238,.045);      /* warm, matches Olive's glass-bg  */
  --lq-tint-2:rgba(255,245,238,.075);

  /* Stage 3 (2026-09-17): Heartwood's base look is flat, not glass — but Richard
     asked to keep the glass recipe available in this file, "tabbed out" rather
     than deleted, since he liked parts of it. The original glass values live on
     under --lq-glass-* below, fully computed and ready to re-point a surface at;
     the ACTIVE --lq-blur/--lq-lift consumed by olive-liquid-compat.css on all
     115 pages are zeroed so the default render is flat Heartwood. To bring glass
     back on a specific surface, reference --lq-glass-blur/--lq-glass-lift there
     instead of --lq-blur/--lq-lift; to bring it back sitewide, repoint the
     active names below onto the --lq-glass-* ones. */
  --lq-glass-blur:22px;
  --lq-glass-blur-thin:12px;
  --lq-glass-blur-thick:40px;
  --lq-glass-lift:saturate(185%) brightness(1.12);
  --lq-blur:0px;
  --lq-blur-thin:0px;
  --lq-blur-thick:0px;
  --lq-lift:none;

  /* Specular — the rim light. Bright top-left, faint bottom-right. */
  --lq-spec:linear-gradient(140deg,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.10) 26%,
      rgba(255,255,255,0)   52%,
      rgba(255,255,255,.16) 100%);
  --lq-spec-hot:linear-gradient(140deg,
      rgba(255,255,255,.85) 0%,
      color-mix(in srgb, var(--lq-lime) 30%, transparent)  22%,
      color-mix(in srgb, var(--lq-indigo) 16%, transparent) 50%,
      rgba(255,255,255,.28) 100%);

  /* Inner thickness + outer depth */
  --lq-inner:inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 -1px 0 rgba(255,255,255,.06),
             inset 0 12px 26px -18px rgba(255,255,255,.22);
  --lq-drop:0 18px 44px -22px rgba(0,0,0,.85), 0 2px 8px -4px rgba(0,0,0,.6);
  --lq-drop-lg:0 40px 90px -34px rgba(0,0,0,.9), 0 4px 14px -6px rgba(0,0,0,.7);
  /* Stage 3: glow tabbed out, not deleted — see --lq-glass-* note above. Reference
     --lq-glass-glow-indigo/-lime to bring the glow back on a specific surface. */
  --lq-glass-glow-indigo:0 0 44px -12px color-mix(in srgb, var(--lq-indigo) 55%, transparent);
  --lq-glass-glow-lime:0 0 44px -12px color-mix(in srgb, var(--lq-lime) 45%, transparent);
  --lq-glow-indigo:none;
  --lq-glow-lime:none;

  /* Radius — generous, because glass with tight corners reads as plastic */
  --lq-r-sm:12px;
  --lq-r:18px;
  --lq-r-lg:26px;
  --lq-r-xl:34px;
  --lq-r-pill:999px;

  /* Motion — springs, not linear fades. This is most of the "liquid". */
  --lq-spring:cubic-bezier(.34,1.56,.64,1);
  --lq-ease:cubic-bezier(.22,1,.36,1);
  --lq-fast:.18s;
  --lq-mid:.4s;
  --lq-slow:.9s;

  --lq-font:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ── Direction C "Heartwood" — Richard's pick, 2026-09-16 (S27 Phase 2) ──
     ADDITIVE ONLY. Every declaration from here to the end of :root is a NEW
     name with NO consumer yet, so this block paints nothing on any page. It is
     Stage 2 of docs/DESIGN_TOKENS_LIQUID_CANONICAL.md §4 ("adding a token
     paints nothing"). Nothing above this line was re-valued, renamed or
     removed in this pass.

     WHY THE RE-VALUE IS NOT HERE. Measured 2026-09-16: 115 pages carry
     <body class="lq-page">, and olive-liquid-compat.css paints their <html>
     background from --lq-base, body text from --lq-text, every card/panel
     from --lq-tint/--lq-blur-thin, and .btn-primary's glow from --lq-glow-lime.
     ask-olive-compat.css cannot shadow any of that (it repoints the --bg- and
     --text- families, never an --lq- name), and a runtime override of --lq-base moved the html
     (NB: no glob with a trailing slash inside this comment — "--bg-star-slash"
     closed the comment early on the first build and the parser ate --lq-brand.)
     background on about.html — a page that loads ask-olive-compat.css. So
     re-valuing the tokens above IS the Stage 3 visual change on 115 live
     pages, and that is Richard's call on a rendered preview, not a token edit.
     When it lands, the legacy names above become aliases onto these:
       --lq-base: var(--lq-ground)   --lq-text: var(--lq-text-warm)
       --lq-indigo: var(--lq-brand-hi)   --lq-lime: var(--lq-heartwood-hi)
       --lq-grad-brand: linear-gradient(var(--lq-brand-hi),var(--lq-brand-hi))
       --lq-glow-*: none   --lq-blur-*: 0px   --lq-line: var(--lq-rule)
     Values are the ones every approved mockup in
     D:\Output_Examples\AskOlive_Visual_Unification\ uses (its --olive-deep,
     --heart-deep, --ground, --text, --fd, --fb, ...). */

  /* Brand — olive is THE accent (one accent, used sparingly); heartwood is the
     warm secondary for focus rings, rules and emphasis. The -hi variants are
     the same hues lifted for legibility on the dark ground. */
  --lq-brand:#5A6B3A;
  --lq-brand-hi:#8FA35E;
  --lq-brand-hover:#A0B46E;
  --lq-heartwood:#B08A54;
  --lq-heartwood-hi:#C9A472;

  /* Ground — flat, no field, no gradient. Dark ground is the product default
     (ask-olive.css: "DARK is :root default, Richard-approved 2026-07-22");
     paper is the light ground and the rendered-document ground. */
  --lq-ground:#1A1F17;
  --lq-ground-lift:#232B20;
  --lq-ground-lift-2:#2C352A;
  --lq-paper:#FBFAF7;
  --lq-rule:#3A4536;
  --lq-rule-2:#2F382C;

  /* Text on each ground */
  --lq-text-warm:#EDEBE3;
  --lq-text-warm-2:#A3AB9B;
  --lq-text-on-paper:#232B20;
  --lq-text-on-paper-2:#6B7280;

  /* Status — information, never decoration (compat keeps .badge-ok etc. as-is) */
  --lq-signal:#E05A74;
  --lq-ok:#8FBF8A;
  --lq-warn:#D9A84E;
  --lq-info:#7FA6C4;

  /* Type — Fraunces (display, optical size on) + Inter Tight (body).
     Real fallbacks, so an unloaded webfont degrades to a serif/sans, never to
     a blank. Self-hosted via the @font-face block in section 0 above — no
     CDN <link> needed in any page; a local face isn't fetched until an
     element renders with it, so this is safe for pages that never use it. */
  --lq-font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --lq-font-body:'Inter Tight','Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --lq-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --lq-w-display:400;            /* Fraunces carries weight in its shapes, not in bold */
  --lq-fvs-display:'opsz' 96;    /* font-variation-settings for headline sizes */
  --lq-track-display:-.02em;
  --lq-track-caps:.14em;         /* eyebrows / small caps */
  --lq-lh-tight:1.15;
  --lq-lh-snug:1.35;
  --lq-lh-body:1.6;
  /* Scale — the same px stops as ask-olive.css --fs-*, so when those names
     alias onto these the change is provably zero. */
  --lq-fs-xs:.75rem;     /* 12 */
  --lq-fs-sm:.8125rem;   /* 13 */
  --lq-fs-base:.9375rem; /* 15 */
  --lq-fs-md:1.0625rem;  /* 17 */
  --lq-fs-lg:1.25rem;    /* 20 */
  --lq-fs-xl:1.5rem;     /* 24 */
  --lq-fs-2xl:1.875rem;  /* 30 */
  --lq-fs-3xl:2.5rem;    /* 40 */
  --lq-fs-4xl:3.25rem;   /* 52 */

  /* Spacing — 4px rhythm, same stops as ask-olive.css --sp-* for the same reason. */
  --lq-sp-1:.25rem;  --lq-sp-2:.5rem;   --lq-sp-3:.75rem; --lq-sp-4:1rem;
  --lq-sp-5:1.25rem; --lq-sp-6:1.5rem;  --lq-sp-8:2rem;   --lq-sp-10:2.5rem;
  --lq-sp-12:3rem;   --lq-sp-16:4rem;   --lq-sp-20:5rem;

  /* Focus — one visible treatment, heartwood, an outline not a glow.
     usage: outline:var(--lq-focus);outline-offset:var(--lq-focus-offset) */
  --lq-focus:2px solid var(--lq-heartwood-hi);
  --lq-focus-offset:2px;

  /* Names already referenced in the estate with a literal fallback but never
     defined here (ifs-panel.html, olive-liquid-compat.css, report-library.css).
     Defined at EXACTLY their fallback value so nothing changes; they exist now
     so the Stage 3 alias has a head to repoint. --lq-accent (ifs-panel, a
     foreign blue #5B8DEF) and --lq-amber (report-library, overridden by a
     literal on the same rule) are deliberately left undefined and flagged. */
  --lq-edge:rgba(255,255,255,.10);
  --lq-line:var(--lq-rule); /* Stage 3, was #2a2a33 */
  --lq-raised:rgba(255,255,255,.03);
}


/* ── 1b. LIGHT THEME DIVERTER — "Heartwood Light" (csync #3839, 2026-09-17) ──
   ADDITIVE ONLY — nothing in the :root block above is touched, so dark
   Heartwood renders byte-identical to before this block landed. When
   [data-theme="light"] is set on <html> (nav-loader.js initTheme(), the
   existing toggle — untouched by this change), every consumer of the
   --lq-* colour/font tokens below re-points onto the Heartwood Light
   palette — Richard-approved on the swatch at
   D:\Output_Examples\dark-theme-colour-check\index.html (candidate B —
   "the light theme I like", confirmed unchanged rev-to-rev). Named
   "Heartwood Light" rather than after its original design reference, since
   that reference is a customer's own brand identity — not to be named in
   our codebase.

   Alias tokens (--lq-indigo, --lq-lime, --lq-indigo-deep, --lq-base,
   --lq-text, --lq-line, --lq-focus, --lq-grad-brand, ...) are NOT
   redeclared here — in :root above they are `var(--lq-*)` references onto
   the tokens below, so they re-resolve automatically through the cascade
   once these win on the same element. Sizing/spacing/motion/glass-recipe
   tokens (--lq-r-*, --lq-sp-*, --lq-blur*, --lq-spec*, --lq-drop*, ...) are
   deliberately left alone — Phase 1 of #3839 re-points colour/font tokens
   only, not geometry.

   --lq-signal/-ok/-warn/-info: Richard-approved 2026-09-19 (csync #3842 §1
   decision 3, proposed in
   2026-09-18-colour-scheme-centralisation_REPORT.md) — same hue/saturation
   as the Heartwood (dark) values, lightness lowered until WCAG AA (4.5:1)
   against this theme's white ground. Formulaic, not guessed; contrast
   ratios recorded in the report. */
[data-theme="light"]{
  --lq-on-fill:#FFFFFF;
  /* legacy cool-grey text tokens (#b6b6c4 / #82828f) were dark-mode values left
     unmapped here: 2.0:1 / 3.6:1 on white. The approved palette has only two text
     tones, so both map to --lq-text-warm-2 (csync #3957). */
  --lq-text-2:var(--lq-text-warm-2);
  --lq-text-3:var(--lq-text-warm-2);
  color-scheme:light;

  --lq-ground:#FFFFFF;          /* Heartwood Light --bg / swatch candidate B --bg-page */
  --lq-ground-lift:#FAFAFA;     /* Heartwood Light --bg-soft / swatch --bg-panel */
  --lq-ground-lift-2:#FFFFFF;   /* swatch --bg-card */
  --lq-rule:#E5E3E3;            /* Heartwood Light --hair / swatch --border */
  --lq-rule-2:#F3EEF9;          /* Heartwood Light --purple-soft / swatch --bg-hover */

  --lq-text-warm:#201F41;       /* Heartwood Light --navy / swatch --text-primary */
  --lq-text-warm-2:#444444;     /* Heartwood Light --body / swatch --text-secondary.
                                    Heartwood's --lq-text-warm-2 is a single
                                    secondary/muted tier; Heartwood Light splits
                                    that into --body (#444444) and --muted
                                    (#757575) — --body chosen as the closer
                                    analogue since most --lq-text-warm-2 use
                                    is running secondary copy, not table-
                                    header-style micro-labels. */

  --lq-brand:#542683;           /* Heartwood Light --purple. Heartwood's --lq-brand
                                    is a "deep" tone distinct from --lq-brand-hi;
                                    Heartwood Light has only the one purple, so
                                    both fold onto it — logged, not invented. */
  --lq-brand-hi:#542683;        /* Heartwood Light --purple — "the one accent",
                                    mirrors Heartwood's own "one accent" rule */
  --lq-brand-hover:#6B3AA0;     /* Richard-approved swatch candidate B
                                    --accent-hover value, verbatim */
  --lq-heartwood:#BF0071;       /* Heartwood Light --pink */
  --lq-heartwood-hi:#BF0071;    /* Heartwood Light --pink — no separate light/dark
                                    pink tone exists in the Heartwood Light palette,
                                    same fold-together as --lq-brand above */

  /* Status — Richard-approved 2026-09-19, see comment block above */
  --lq-signal:#D93555;
  --lq-ok:#4C8146;
  --lq-warn:#976D20;
  --lq-info:#4A7BA1;

  --lq-font-display:'DM Serif Display',Georgia,'Times New Roman',serif;
  --lq-font-body:'DM Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}


/* ── 2. AMBIENT LIGHT FIELD ─────────────────────────────────────────────── */
/* Drop <div class="lq-field" aria-hidden="true"></div> once, first thing in
   <body>. Without it every .lq pane blurs a flat colour and looks like fog.
   Fixed, behind everything, and it drifts — slowly enough to feel like light
   rather than animation. */
.lq-field{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(58% 44% at 14% 8%,  color-mix(in srgb, var(--lq-indigo) 44%, transparent), transparent 62%),
    radial-gradient(52% 40% at 88% 22%, color-mix(in srgb, var(--lq-lime) 24%, transparent),  transparent 60%),
    radial-gradient(60% 50% at 72% 88%, rgba(107,142,35,.30),  transparent 64%),
    radial-gradient(46% 38% at 30% 72%, color-mix(in srgb, var(--lq-indigo-deep) 30%, transparent),  transparent 60%),
    var(--lq-base);
}
/* A second, slower-moving layer so the light never sits still under the glass. */
.lq-field::after{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(38% 30% at 30% 30%, color-mix(in srgb, var(--lq-lime) 24%, transparent), transparent 60%),
    radial-gradient(34% 28% at 70% 65%, color-mix(in srgb, var(--lq-indigo) 30%, transparent), transparent 60%);
  animation:lq-drift 34s var(--lq-ease) infinite alternate;
}
@keyframes lq-drift{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to  {transform:translate3d(4%,3%,0)  scale(1.12)}
}

/* OPT-IN, not global. This was a bare `body{}` rule, which meant simply
   linking this file forced a dark background, light text and a new font onto
   any page that adopted it — the box-sizing below was carefully scoped to
   avoid exactly that kind of reflow, and this rule quietly undid the care.
   A page that wants the full glass treatment says so: <body class="lq-page">.
   A page that only wants glass COMPONENTS links the file and keeps its own
   background, type and layout untouched. */
body.lq-page{
  margin:0;background:var(--lq-base);color:var(--lq-text);
  font-family:var(--lq-font);line-height:1.55;-webkit-font-smoothing:antialiased;
}

/* Border-box, scoped to the kit rather than `*`. This file gets added to
   existing Olive pages that already have their own box model, so a global
   reset here would silently reflow them. Everything the kit lays out —
   padded panes, spine cards, buttons, inputs — needs it, hence the descendant
   selectors on the container classes. */
.lq,.lq *,.lq-spine,.lq-spine *,.lq-wrap,.lq-grid,.lq-grid>*,.lq-row,.lq-stack,
.lq-btn,.lq-chip,.lq-input,.lq-ico-tile,.lq-field{box-sizing:border-box}


/* ── 3. GLASS SURFACES ──────────────────────────────────────────────────── */
/* .lq is the whole recipe in one class. ::after paints the specular rim as a
   real 1px gradient border (mask-composite carves out the middle); ::before is
   the sheen that sweeps on hover. Both are pointer-events:none so they never
   eat clicks. */
.lq{
  position:relative;isolation:isolate;
  border-radius:var(--lq-r);
  background:var(--lq-tint);
  -webkit-backdrop-filter:blur(var(--lq-blur)) var(--lq-lift);
  backdrop-filter:blur(var(--lq-blur)) var(--lq-lift);
  box-shadow:var(--lq-inner),var(--lq-drop);
  transition:transform var(--lq-mid) var(--lq-spring),
             box-shadow var(--lq-mid) var(--lq-ease),
             background var(--lq-mid) var(--lq-ease);
}
/* Specular rim */
.lq::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;padding:1px;background:var(--lq-spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:background var(--lq-mid) var(--lq-ease);
}
/* Sheen — parked off to the left until the pane is hovered */
.lq::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;opacity:0;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.16) 46%,
    rgba(255,255,255,.05) 54%,transparent 68%);
  transform:translateX(-120%);
}
.lq>*{position:relative;z-index:3}

/* Tiers */
.lq--thin{
  border-radius:var(--lq-r-sm);
  -webkit-backdrop-filter:blur(var(--lq-blur-thin)) var(--lq-lift);
  backdrop-filter:blur(var(--lq-blur-thin)) var(--lq-lift);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px -10px rgba(0,0,0,.7);
}
.lq--thick{
  border-radius:var(--lq-r-lg);
  background:var(--lq-tint-2);
  -webkit-backdrop-filter:blur(var(--lq-blur-thick)) var(--lq-lift);
  backdrop-filter:blur(var(--lq-blur-thick)) var(--lq-lift);
  box-shadow:var(--lq-inner),var(--lq-drop-lg);
}

/* Interactive glass — lifts, brightens its rim, and takes the sheen sweep. */
.lq--live{cursor:pointer}
.lq--live:hover,.lq--live:focus-within{
  transform:translateY(-6px);
  background:var(--lq-tint-2);
  box-shadow:var(--lq-inner),var(--lq-drop-lg),var(--lq-glow-indigo);
}
.lq--live:hover::after,.lq--live:focus-within::after{background:var(--lq-spec-hot)}
.lq--live:hover::before{opacity:1;animation:lq-sheen 1.1s var(--lq-ease) forwards}
.lq--live:active{transform:translateY(-2px) scale(.994);transition-duration:var(--lq-fast)}
@keyframes lq-sheen{
  from{transform:translateX(-120%)}
  to  {transform:translateX(120%)}
}

/* Tinted glass — for state, not decoration. */
.lq--indigo{background:linear-gradient(135deg,color-mix(in srgb, var(--lq-indigo) 16%, transparent),color-mix(in srgb, var(--lq-indigo) 5%, transparent))}
.lq--lime  {background:linear-gradient(135deg,color-mix(in srgb, var(--lq-lime) 15%, transparent),color-mix(in srgb, var(--lq-lime) 4%, transparent))}
.lq--olive {background:linear-gradient(135deg,rgba(107,142,35,.20),rgba(107,142,35,.05))}

/* Padding helpers, so a pane is never authored without breathing room. */
.lq--pad{padding:22px 24px}
.lq--pad-lg{padding:32px 34px}

/* Fallback: no backdrop-filter (older Firefox, some embedded webviews) —
   swap translucency for an opaque tinted panel rather than shipping mud. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lq,.lq--thin,.lq--thick{background:rgba(22,22,32,.94)}
}


/* ── 4. MOTION ──────────────────────────────────────────────────────────── */
/* Reveal on scroll. Add .lq-rise; JS adds .is-in when it enters the viewport.
   Content is visible by default if that JS never runs — the animation only
   applies once .is-in lands, so a script failure degrades to "no animation",
   never to invisible text. */
.lq-rise{opacity:0;transform:translateY(28px) scale(.985)}
.lq-rise.is-in{animation:lq-in .8s var(--lq-ease) forwards}
.lq-stagger>*{opacity:0;transform:translateY(24px)}
.lq-stagger.is-in>*{animation:lq-in .7s var(--lq-ease) forwards}
.lq-stagger.is-in>*:nth-child(1){animation-delay:.05s}
.lq-stagger.is-in>*:nth-child(2){animation-delay:.13s}
.lq-stagger.is-in>*:nth-child(3){animation-delay:.21s}
.lq-stagger.is-in>*:nth-child(4){animation-delay:.29s}
.lq-stagger.is-in>*:nth-child(5){animation-delay:.37s}
.lq-stagger.is-in>*:nth-child(6){animation-delay:.45s}
@keyframes lq-in{to{opacity:1;transform:none}}

/* Slow idle float. Use on ONE hero element, never on a grid. */
.lq-float{animation:lq-float 7s ease-in-out infinite}
@keyframes lq-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}


/* ── 5. CONTROLS ────────────────────────────────────────────────────────── */
.lq-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:.9rem;font-weight:650;line-height:1;
  padding:13px 24px;border:0;border-radius:var(--lq-r-pill);
  color:var(--lq-text);cursor:pointer;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--lq-fast) var(--lq-spring),box-shadow var(--lq-mid) var(--lq-ease),
             filter var(--lq-fast) var(--lq-ease);
}
.lq-btn:hover{transform:translateY(-2px)}
.lq-btn:active{transform:translateY(0) scale(.97)}

/* Primary — the signature gradient. Exactly one per view. */
.lq-btn--primary{
  color:#0f1005;background:var(--lq-grad-brand);
  box-shadow:0 12px 30px -12px color-mix(in srgb, var(--lq-indigo) 85%, transparent),inset 0 1px 0 rgba(255,255,255,.45);
}
.lq-btn--primary:hover{filter:brightness(1.07);
  box-shadow:0 18px 40px -14px color-mix(in srgb, var(--lq-indigo) 95%, transparent),inset 0 1px 0 rgba(255,255,255,.55)}

/* Glass — the default action. */
.lq-btn--glass{
  background:var(--lq-tint);
  -webkit-backdrop-filter:blur(var(--lq-blur-thin)) var(--lq-lift);
  backdrop-filter:blur(var(--lq-blur-thin)) var(--lq-lift);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px -12px rgba(0,0,0,.8);
}
.lq-btn--glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--lq-spec);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.lq-btn--glass:hover{background:var(--lq-tint-2)}
.lq-btn--ghost{background:transparent;color:var(--lq-text-2);box-shadow:none}
.lq-btn--ghost:hover{color:var(--lq-text)}
.lq-btn--lg{font-size:1rem;padding:16px 32px}

/* Chip / pill */
.lq-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:600;color:var(--lq-text-2);
  padding:7px 14px;border-radius:var(--lq-r-pill);background:var(--lq-tint);
  -webkit-backdrop-filter:blur(var(--lq-blur-thin)) var(--lq-lift);
  backdrop-filter:blur(var(--lq-blur-thin)) var(--lq-lift);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:color var(--lq-fast),background var(--lq-fast),transform var(--lq-fast) var(--lq-spring);
}
.lq-chip:hover{color:var(--lq-text);background:var(--lq-tint-2);transform:translateY(-1px)}
.lq-chip--on{color:#0f1005;background:var(--lq-grad-brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

/* Input */
.lq-input{
  width:100%;font:inherit;font-size:.95rem;color:var(--lq-text);
  padding:13px 16px;border:0;border-radius:var(--lq-r-sm);
  background:rgba(10,10,18,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.09);
  transition:box-shadow var(--lq-mid) var(--lq-ease);
}
.lq-input::placeholder{color:var(--lq-text-3)}
.lq-input:focus{
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px color-mix(in srgb, var(--lq-indigo) 70%, transparent),
             0 0 0 4px color-mix(in srgb, var(--lq-indigo) 16%, transparent);
}

/* Focus ring — one definition, every interactive element.
   The bare `a:focus-visible` was NOT scoped, so merely LINKING this stylesheet
   restyled the focus ring of every link on the page, opted in or not. Scoped to
   body.lq-page like everything else, so the file is safe to add to a page before
   that page has been converted. */
.lq-btn:focus-visible,.lq-chip:focus-visible,.lq--live:focus-visible,
body.lq-page a:focus-visible{
  outline:2px solid var(--lq-indigo);outline-offset:3px;
}


/* ── 6. FLOW SPINE (timeline) ───────────────────────────────────────────── */
/* The alternating-card timeline from methodology.html, kept — the layout was
   right — but the spine is now a living gradient with a pulse travelling down
   it, and the cards are glass rather than flat panels.

   <ol class="lq-spine">
     <li class="lq-spine__step"><div class="lq lq--pad lq-spine__card">…</div></li>
   </ol> */
/* The rail and its pulse are both pseudo-elements on the list, so the <ol>
   can hold nothing but <li> and stay valid. */
.lq-spine{position:relative;list-style:none;margin:0;padding:32px 0}
.lq-spine::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;
  transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--lq-indigo) 0%, transparent) 0%,color-mix(in srgb, var(--lq-indigo) 100%, transparent) 8%,
    color-mix(in srgb, var(--lq-lime) 100%, transparent) 92%,color-mix(in srgb, var(--lq-lime) 0%, transparent) 100%);
  box-shadow:0 0 12px color-mix(in srgb, var(--lq-indigo) 50%, transparent),0 0 26px color-mix(in srgb, var(--lq-indigo) 22%, transparent);
}
/* The travelling pulse — a bright segment falling down the rail. */
.lq-spine::after{
  content:"";position:absolute;left:50%;translate:-50% 0;width:3px;height:16%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent);
  filter:blur(1px);pointer-events:none;
  animation:lq-pulse 4.2s var(--lq-ease) infinite;
}
@keyframes lq-pulse{
  0%  {top:-25%;opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{top:102%;opacity:0}
}

.lq-spine__step{position:relative;margin-bottom:44px}
.lq-spine__step:last-child{margin-bottom:0}
.lq-spine__card{width:calc(50% - 52px)}
.lq-spine__step:nth-child(odd)  .lq-spine__card{margin-right:calc(50% + 52px)}
.lq-spine__step:nth-child(even) .lq-spine__card{margin-left:calc(50% + 52px)}

/* Numbered node sitting on the rail. The ring pulses outward on a long, calm
   loop — one node's worth of motion, not a disco. */
.lq-spine__node{
  position:absolute;top:50%;translate:0 -50%;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:1.05rem;color:#0f1005;
  background:var(--lq-grad-brand);
  box-shadow:0 0 0 6px var(--lq-base),0 10px 26px -8px color-mix(in srgb, var(--lq-indigo) 90%, transparent),
             inset 0 1px 0 rgba(255,255,255,.5);
  z-index:2;
}
.lq-spine__step:nth-child(odd)  .lq-spine__node{right:calc(50% - 26px)}
.lq-spine__step:nth-child(even) .lq-spine__node{left:calc(50% - 26px)}
/* Nodes are calm by default. Five rings pulsing at once is noise, and it
   breaks the rule the icons follow — nothing loops forever without a reason.
   The ring is a static halo; only the step marked .is-current animates, so the
   motion now says "you are here" instead of saying nothing five times over.
   On a marketing page, mark no step and it stays perfectly still. */
.lq-spine__node::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--lq-lime) 26%, transparent);
}
.lq-spine__step.is-current .lq-spine__node::before{
  border-color:color-mix(in srgb, var(--lq-lime) 60%, transparent);
  animation:lq-ring 3.4s var(--lq-ease) infinite;
}
/* The current step also earns a brighter node, so it reads at a glance even
   with motion off entirely. */
.lq-spine__step.is-current .lq-spine__node{
  box-shadow:0 0 0 6px var(--lq-base),0 10px 30px -6px color-mix(in srgb, var(--lq-lime) 90%, transparent),
             inset 0 1px 0 rgba(255,255,255,.6);
}
@keyframes lq-ring{
  0%  {transform:scale(1);   opacity:.85}
  70% {transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* Below 860px the spine moves to the left edge and cards run full width —
   a centred spine on a phone wastes half the screen. */
@media (max-width:860px){
  .lq-spine{padding-left:38px}
  .lq-spine::before{left:14px;transform:none}
  .lq-spine::after{left:14px;translate:-50% 0}
  .lq-spine__card{width:100%}
  .lq-spine__step:nth-child(odd)  .lq-spine__card,
  .lq-spine__step:nth-child(even) .lq-spine__card{margin-left:0;margin-right:0}
  .lq-spine__node{width:40px;height:40px;font-size:.9rem;top:26px;translate:0 0}
  .lq-spine__step:nth-child(odd)  .lq-spine__node,
  .lq-spine__step:nth-child(even) .lq-spine__node{left:-44px;right:auto}
}


/* ── 7. FLOW LINKS ──────────────────────────────────────────────────────── */
/* Generalised from .canvas-connection.animated in process-customizer-canvas.css
   — same marching-dash idea, same 8/4 rhythm, now available to any SVG edge
   and to plain DOM connectors between cards.

   SVG:  <path class="lq-link lq-link--on" d="…"/>
   DOM:  <div class="lq-link-h lq-link-h--on"></div>  (horizontal rule between
         two nodes; use --v for a vertical one) */
.lq-link{fill:none;stroke:color-mix(in srgb, var(--lq-indigo) 45%, transparent);stroke-width:2;stroke-linecap:round}
.lq-link--on{
  stroke:var(--lq-indigo);stroke-dasharray:8 4;
  animation:lq-march 1s linear infinite;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--lq-indigo) 55%, transparent));
}
.lq-link--lime{stroke:var(--lq-lime);filter:drop-shadow(0 0 5px color-mix(in srgb, var(--lq-lime) 50%, transparent))}
.lq-link--muted{stroke:rgba(255,255,255,.16);animation:none;stroke-dasharray:4 5}
@keyframes lq-march{to{stroke-dashoffset:-24}}

.lq-link-h,.lq-link-v{position:relative;flex:none;border-radius:2px;overflow:hidden}
.lq-link-h{height:2px;min-width:40px;flex:1}
.lq-link-v{width:2px;min-height:40px}
.lq-link-h::before,.lq-link-v::before{
  content:"";position:absolute;inset:0;
  background-repeat:repeat;
}
.lq-link-h::before{
  background-image:linear-gradient(90deg,var(--lq-indigo) 0 8px,transparent 8px 12px);
  background-size:12px 100%;
}
.lq-link-v::before{
  background-image:linear-gradient(180deg,var(--lq-indigo) 0 8px,transparent 8px 12px);
  background-size:100% 12px;
}
.lq-link-h--on::before{animation:lq-march-h 1s linear infinite}
.lq-link-v--on::before{animation:lq-march-v 1s linear infinite}
@keyframes lq-march-h{to{background-position:24px 0}}
@keyframes lq-march-v{to{background-position:0 24px}}


/* ── 8. LINE ICONS ──────────────────────────────────────────────────────── */
/* Stroked line icons, not emoji and not filled glyphs. The house rule: an icon
   may draw itself in once, and may respond to hover. It may not loop forever —
   that is what turns a page into a fairground. */
.lq-ico{
  width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;
}
.lq-ico--lg{width:32px;height:32px;stroke-width:1.4}

/* Draw-in: dashes the stroke and pulls the offset to 0. Runs once, on .is-in.
   These are set on the <svg> itself, never on descendant paths — icons are
   rendered through <use>, and a descendant selector cannot cross into that
   shadow tree. stroke-dasharray/dashoffset are inherited SVG properties, so
   setting them on the host is what actually reaches the referenced geometry. */
.lq-ico--draw{stroke-dasharray:var(--lq-len,120);stroke-dashoffset:var(--lq-len,120)}
.lq-ico--draw.is-in,.is-in .lq-ico--draw{animation:lq-draw 1.1s var(--lq-ease) forwards}
@keyframes lq-draw{to{stroke-dashoffset:0}}

/* Icon tile — a small glass square holding an icon. */
.lq-ico-tile{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;
  color:var(--lq-indigo);background:var(--lq-grad-brand-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform var(--lq-mid) var(--lq-spring),color var(--lq-mid) var(--lq-ease);
}
.lq--live:hover .lq-ico-tile{transform:translateY(-2px) rotate(-4deg);color:var(--lq-lime)}


/* ── 9. UTILITIES + ACCESSIBILITY ───────────────────────────────────────── */
.lq-wrap{max-width:1140px;margin-inline:auto;padding-inline:24px}
.lq-grid{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(var(--lq-min,280px),100%),1fr))}
.lq-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.lq-stack{display:flex;flex-direction:column;gap:14px}
.lq-title{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.05;margin:0;text-wrap:balance}
/* Gradient text — headline only, never body. Falls back to solid where
   background-clip:text is unsupported. */
.lq-title--brand{background:var(--lq-grad-brand);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.lq-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lq-lime)}
.lq-lede{font-size:clamp(1rem,1.8vw,1.15rem);color:var(--lq-text-2);max-width:60ch;margin:0}
.lq-muted{color:var(--lq-text-2)}
.lq-faint{color:var(--lq-text-3)}
.lq-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Everything decorative stops. Nothing disappears, and nothing stays stuck
   mid-animation — .lq-rise and .lq-stagger are forced back to visible because
   their resting state is opacity:0. */
@media (prefers-reduced-motion:reduce){
  /* Scoped for the same reason as the focus ring: as a bare `*` this was a
     site-wide animation kill-switch that arrived with the stylesheet. On a page
     that had not opted in it would still have stopped that page's OWN motion --
     including process-flow link animations and timeline reveals owned by other
     stylesheets -- which is not this file's call to make. Inside body.lq-page it
     is exactly the same behaviour it always had. */
  body.lq-page,body.lq-page *,body.lq-page *::before,body.lq-page *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .lq-rise,.lq-stagger>*{opacity:1!important;transform:none!important}
  /* The node halo stays — it is static now, and it is how the current step is
     identified. Only the things that exist purely to move are dropped. */
  .lq-field::after,.lq-spine::after{display:none}
  .lq-float{animation:none}
}