/* Overclocked, Direction E: neutral paper ground, black islands, one copper accent.
   Type: Funnel Display for display, Funnel Sans for prose, Martian Mono for machine
   output, Zain + IBM Plex Sans Arabic for Arabic. Approved on the rebrand canvas
   2026-08-21; the motion values come from the teardown in the rebrand plan.

   Token names are kept from the old system on purpose: subpages carry their own
   <style> blocks written against these names, so mapping the names to the new
   palette restyles every page in one move. */

:root {
  /* dark surfaces (the islands) */
  --night: #0A0A0A;
  --night-deep: #14100E;
  --night-lift: #1D1713;
  --ink: #F6F4EF;                      /* text on dark */
  --muted: rgba(246, 244, 239, 0.72);
  --faint: rgba(246, 244, 239, 0.55);
  --rule: rgba(255, 255, 255, 0.12);
  /* light surfaces (the page). Neutral since 2026-09-26: the warm ivory read as the
     reflexive generated-page ground, and copper is meant to be the only warmth here.
     The greys keep the old luminance steps, minus the tint. */
  --day: #FAFAFA;
  --day-ink: #0A0A0A;
  --day-soft: #383838;
  --day-muted: #525252;
  --day-faint: #6A6A6A;
  --day-dim: #A1A1A1;                  /* struck prices only, never body text */
  --day-rule: rgba(10, 10, 10, 0.08);
  --day-edge: #858585;
  --day-bar: #D2D2D2;
  --plate: #FFFFFF;
  --node: #C5C5C5;
  /* the accent */
  --signal: #C2724A;                   /* fills, bars, buttons */
  --signal-soft: #E0A183;              /* small text on dark */
  --signal-dim: #8C5236;
  --signal-text: #A85A35;              /* copper as TEXT on light: 4.8:1 on the ground, AA */
  --signal-on: #14100E;                /* text on a copper fill */
  /* legacy aliases still referenced by subpage style blocks */
  --day-lift: #FFFFFF;
  --t-xs: 0.72rem;
  --t-s: 0.92rem;
  /* type */
  --disp: "Funnel Display", system-ui, sans-serif;
  --sans: "Funnel Sans", system-ui, sans-serif;
  --body: "Funnel Sans", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, monospace;
  --arabic: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --arabic-disp: Zain, "IBM Plex Sans Arabic", system-ui, sans-serif;
  /* motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-wipe: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- ground ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--day);
  color: var(--day-ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html[lang="ar"] body { font-family: var(--arabic); line-height: 1.9; letter-spacing: 0; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--day-ink); outline-offset: 3px; }
.band :focus-visible, .mast :focus-visible { outline-color: var(--signal); }
.shell { max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 900px) { .shell { padding-inline: 48px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* language: both scripts live in the markup, CSS shows one */
.l { display: none; }
html[lang="en"] .l.en, html[lang="ar"] .l.ar { display: inline; }
html[lang="en"] .lb.en, html[lang="ar"] .lb.ar { display: block; }
.lb { display: none; }

/* type roles. Martian Mono is only for what a machine prints (the price docket, the demo's
   output); labels, nav and figures stay in Funnel, sentence case, untracked. */
h1, h2, h3 { font-family: var(--disp); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; text-wrap: balance; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: var(--arabic-disp); font-weight: 800; letter-spacing: 0; line-height: 1.4; }
p { margin: 0; text-wrap: pretty; }
.mono { font-family: var(--mono); }
/* the kicker: one on a page header, never a label over every section */
.eyebrow { font-size: 16px; font-weight: 500; color: var(--day-muted); }
.band .eyebrow { color: var(--signal-soft); }
time.mono, .num { direction: ltr; unicode-bidi: isolate; }

/* buttons */
.act {
  display: inline-block; background: var(--signal); color: var(--signal-on);
  font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 14px 28px; border: 0; border-radius: 999px; cursor: pointer;
}
html[lang="ar"] .act { font-family: var(--arabic); }
.act.ghost { background: transparent; color: inherit; font-weight: 500; border: 1px solid var(--day-edge); }
.band .act.ghost, .mast .act.ghost { border-color: rgba(246, 244, 239, 0.25); }
@media (hover: hover) and (pointer: fine) {
  .act { transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out; }
  .act:hover { background: var(--signal-soft); }
  .act.ghost:hover { background: transparent; border-color: var(--signal); color: var(--signal-text); }
  .band .act.ghost:hover, .mast .act.ghost:hover { color: var(--signal-soft); }
  a { transition: color 0.3s ease-out; }
}

/* --- the mark: Past Twelve. A clock run past midnight, the overshoot in copper.
   The clock is never mirrored: it stays clockwise in RTL too. ------------------- */
.mk { display: block; flex: none; }

/* --- the pulse line: the motion signature (rules, dividers, loading) ----------- */
.pulseline { position: relative; display: block; height: 1px; background: rgba(246, 244, 239, 0.25); overflow: visible; }
.on-day .pulseline { background: rgba(10, 10, 10, 0.25); }
.pulseline::after { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 16px; height: 3px; background: var(--signal); }

/* --- masthead and footer (rendered by shell.js) ------------------------------- */
.mast { position: sticky; top: 0; z-index: 40; background: var(--night); color: var(--ink); border-bottom: 1px solid var(--rule); }
.mast .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.wordmark { display: inline-flex; flex-direction: row; align-items: center; gap: 11px; color: var(--ink); }
.wordmark .mk { width: 28px; height: 28px; }
.wordmark .wm { font-family: var(--disp); font-weight: 700; font-size: 19px; letter-spacing: 0.02em; direction: ltr; unicode-bidi: isolate; }
.mast nav { display: flex; align-items: center; gap: 26px; }
.mast nav a { font-size: 14px; font-weight: 500; color: var(--ink); }
.mast nav a.act { font-weight: 600; padding: 10px 20px; color: var(--signal-on); }
.mast .lang { font-family: "Funnel Sans", var(--arabic); font-size: 14px; background: none; border: 0; color: var(--faint); cursor: pointer; padding: 4px; }
@media (max-width: 899px) { .mast nav a:not(.act) { display: none; } .mast .lang { display: inline; } }
/* phones: the sticky bar already carries this button; up here it wrapped to four lines */
@media (max-width: 639px) { .mast nav a.act { display: none; } }

footer { background: var(--night); color: var(--ink); border-top: 1px solid var(--rule); }
footer .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 26px; font-size: 13px; color: var(--faint); }
footer .sig { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; }
footer .sig .mk { width: 20px; height: 20px; }
footer .sig .wm { font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; color: var(--ink); direction: ltr; unicode-bidi: isolate; }
footer .sig > span:last-child { flex-basis: 100%; }
footer .links { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { color: var(--faint); }
@media (hover: hover) and (pointer: fine) { footer a:hover { color: var(--signal-soft); } }

/* --- the black islands -------------------------------------------------------- */
.band { background: var(--night); color: var(--ink); }
.band .sub, .band p { color: var(--muted); }

/* hero */
.hero .shell { padding-block: 84px 64px; display: flex; flex-direction: column; gap: 30px; }
/* capped at 60px: at 96px the two sentences broke into four lines and filled the first screen */
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.0; color: var(--ink); }
html[lang="ar"] .hero h1 { line-height: 1.3; font-size: clamp(2.2rem, 4.4vw, 3.3rem); }
.hero .lede { max-width: 600px; font-size: 19px; color: var(--muted); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
@media (max-width: 639px) { .acts .act { flex: 1 1 100%; text-align: center; } .hero .shell { padding-block: 56px 40px; } }

/* block-reveal headline: two stacked wipes, text flips on mid-cover */
.brline { position: relative; overflow: hidden; display: inline-block; padding-bottom: 0.12em; margin-bottom: -0.12em; vertical-align: top; }
.brline .bt { display: inline-block; }
.brline .b1, .brline .b2 { position: absolute; inset: 0; transform: translateX(-102%); pointer-events: none; }
.brline .b1 { background: var(--signal); z-index: 2; }
.brline .b2 { background: var(--signal-soft); z-index: 1; }

/* the ticker */
.tick { overflow: hidden; direction: ltr; border-top: 1px solid var(--rule); padding-block: 14px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%); }
.tick .mq { display: flex; width: max-content; gap: 48px; align-items: center; }
.tick .mq > span { font-size: 14px; color: var(--faint); white-space: nowrap; }
html[lang="ar"] .tick .mq > span { direction: rtl; unicode-bidi: isolate; }
.tick .mq > i { color: var(--signal); font-style: normal; }

/* --- sections on the page ground ---------------------------------------------- */
.sect .shell { padding-block: 72px 56px; }
.split { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; }
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); gap: 28px; } .sect .shell { padding-block: 48px 36px; } }
.sect h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.08; }
html[lang="ar"] .sect h2 { line-height: 1.4; }
.lead { display: flex; flex-direction: column; gap: 14px; }
.sect .lead p { font-size: 16px; color: var(--day-muted); }

/* buckets */
.bucket { display: flex; gap: 18px; padding-block: 20px; border-top: 1px solid var(--day-rule); }
.bucket:last-of-type { border-bottom: 1px solid var(--day-rule); }
.bucket .bar { width: 18px; height: 2px; background: var(--day-bar); flex: none; margin-top: 10px; }
html[lang="ar"] .bucket .bar { margin-top: 13px; }
.bucket h3 { font-size: 20px; letter-spacing: -0.01em; }
html[lang="ar"] .bucket h3 { font-family: var(--arabic); font-weight: 600; }
.bucket p { font-size: 16px; color: var(--day-muted); max-width: 60ch; margin-top: 8px; }

/* stat pairs: the going rate vs automated */
.pair { background: var(--plate); border: 1px solid var(--day-rule); padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.pair .src { font-size: 14px; color: var(--day-faint); direction: ltr; unicode-bidi: isolate; display: block; }
html[lang="ar"] .pair .src { text-align: end; }
.pair .auto-tag { font-size: 14px; font-weight: 600; color: var(--signal-text); }
.pair .stat { font-size: 16px; color: var(--day-soft); display: block; margin-top: 4px; }
.pair > div + div { border-top: 1px solid var(--day-rule); padding-top: 12px; }
.pair > div + div .stat { color: var(--day-ink); }

/* the diagram plate */
.wireplate { background-image: radial-gradient(circle, rgba(10, 10, 10, 0.07) 1px, transparent 1px); background-size: 28px 28px; padding-block: 8px; }
.wireplate svg { display: block; width: 100%; height: auto; direction: ltr; }
html[lang="en"] .lb.en.tall, html[lang="ar"] .lb.ar.tall { display: none; }
/* diagram labels scale with the viewBox: under 900px the wide ones set them below 11px */
@media (max-width: 899px) {
  html[lang="en"] .lb.en.wide, html[lang="ar"] .lb.ar.wide { display: none; }
  html[lang="en"] .lb.en.tall, html[lang="ar"] .lb.ar.tall { display: block; }
  .wireplate svg { max-width: 380px; margin-inline: auto; }
}
.wire { stroke: var(--day-bar); stroke-width: 1.5; fill: none; }
.packet { stroke: var(--signal); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 14 220; stroke-dashoffset: 14; opacity: 0; }
.nodebox { fill: var(--plate); stroke: var(--node); stroke-width: 1; }
.nodelbl { fill: var(--day-faint); font-size: 18px; }
.nodelbl.ar { font-size: 16px; }
.caption { font-size: 16px; color: var(--day-faint); max-width: 74ch; }

/* the numbers island */
.numbers { background: var(--night); color: var(--ink); padding: 48px 40px; display: flex; flex-direction: column; gap: 30px; }
@media (min-width: 900px) { .numbers { padding: 52px 56px; } }
.numbers .setup { font-size: 20px; color: rgba(246, 244, 239, 0.8); max-width: 70ch; }
/* the payback as a ledger at text size (figure, then what it is), never a big-number banner */
.counters { max-width: 70ch; }
.counters > div { display: flex; align-items: baseline; gap: 18px; padding-block: 14px; border-top: 1px solid var(--rule); }
.counters > div:last-child { border-bottom: 1px solid var(--rule); }
.counters .num { flex: 0 0 3.75rem; text-align: right; font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
html[dir="rtl"] .counters .num { text-align: left; }
.counters .cap { font-size: 16px; color: var(--muted); }
.numbers .fine { font-size: 14px; color: var(--faint); max-width: 78ch; }

/* the process line */
.flowplate svg { display: block; width: 100%; height: auto; direction: ltr; }
.flowlist { display: none; }
@media (max-width: 899px) {
  .flowplate { display: none; }
  .flowlist { display: flex; flex-direction: column; gap: 12px; }
  .flowlist > span { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--day-soft); }
  .flowlist i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; font-style: normal; }
}
.flowline { stroke: var(--signal); stroke-width: 1.6; fill: none; }
.flowdot { fill: var(--signal); }
.flowlbl { fill: var(--day-faint); font-size: 18px; }

/* the docket */
.docket .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 15px; border-bottom: 1px solid var(--day-rule); }
.docket .row:first-child { border-top: 1px solid var(--day-rule); }
.docket .row .what { font-size: 16px; color: var(--day-soft); }
.docket .row .cost { font-family: var(--mono); font-size: 13px; color: var(--day-ink); flex: none; direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] .docket .row .cost { font-family: var(--arabic); font-size: 14px; }
.docket .row .cost .was { font-size: 11px; color: var(--day-dim); text-decoration: line-through; margin-inline-end: 12px; }
.docket .row .cost .now { color: var(--signal-text); }
.docket .foot { margin-top: 16px; font-size: 14px; color: var(--day-faint); max-width: 64ch; }

/* details: the one "more lives here" device (the full price list) */
details { border-top: 1px solid var(--day-rule); }
details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; font-size: 17px; font-weight: 500; color: var(--day-ink); }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-family: var(--mono); font-size: 15px; color: var(--signal-text); flex: none; }
details[open] summary::after { content: "\2013"; }
details .body { padding-bottom: 20px; }
details .body p { font-size: 16px; line-height: 1.65; color: var(--day-muted); max-width: 66ch; }
html[lang="ar"] details .body p { line-height: 1.9; }
details:last-of-type { border-bottom: 1px solid var(--day-rule); }

/* the FAQ, open: five short answers do not earn a click each behind an accordion */
.qa { border-top: 1px solid var(--day-rule); padding-block: 20px; }
.qa:last-child { border-bottom: 1px solid var(--day-rule); }
.qa h3 { font-size: 20px; letter-spacing: -0.01em; }
html[lang="ar"] .qa h3 { font-family: var(--arabic); font-weight: 600; }
.qa p { margin-top: 8px; font-size: 16px; line-height: 1.65; color: var(--day-muted); max-width: 66ch; }
html[lang="ar"] .qa p { line-height: 1.9; }

/* founding strip and studio island */
.founding { background: var(--night); color: var(--ink); border-top: 2px solid var(--signal); padding: 24px 30px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 36px; }
.founding p { font-size: 16px; max-width: 74ch; color: var(--ink); }
.founding .tag { font-size: 14px; font-weight: 600; color: var(--signal-soft); flex: none; }
.studio { background: var(--night); color: var(--ink); padding: 48px 40px; }
@media (min-width: 900px) { .studio { padding: 52px 56px; } }
.studio h2 { color: var(--ink); }
.studio .facts { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 22px; }
.studio .facts span { flex: 1 1 200px; font-size: 16px; color: rgba(246, 244, 239, 0.65); border-top: 1px solid rgba(246, 244, 239, 0.15); padding-top: 13px; }

/* the close */
.close { background: var(--night); color: var(--ink); }
.close .shell { padding-block: 72px; }
.close h2 { color: var(--ink); font-size: clamp(2rem, 4vw, 3.2rem); }
.close .note { color: var(--faint); }
form.lead { display: flex; flex-direction: column; gap: 18px; }
form.lead label { display: flex; flex-direction: column; gap: 7px; }
form.lead label > .lbl { font-size: 14px; font-weight: 500; color: var(--muted); }
form.lead input, form.lead textarea, form.lead select {
  background: rgba(246, 244, 239, 0.06); border: 1px solid rgba(246, 244, 239, 0.18);
  color: var(--ink); font-family: inherit; font-size: 16px; padding: 12px 15px; border-radius: 0; width: 100%; /* under 16px, iOS zooms in on focus */
}
form.lead textarea { min-height: 96px; resize: vertical; }
/* the native dropdown list paints its own light popup on some platforms while
   inheriting the field's light text: color the options explicitly, always readable */
form.lead select option { background: var(--plate); color: var(--day-ink); }
form.lead ::placeholder { color: rgba(246, 244, 239, 0.35); }
form.lead input:focus-visible, form.lead textarea:focus-visible, form.lead select:focus-visible { outline: 2px solid var(--signal); outline-offset: 0; border-color: var(--signal); }
.pot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.status { font-size: 14px; color: var(--signal-soft); min-height: 1.4em; }
.status.bad { color: #E0A183; }

/* sticky mobile action bar */
.stickybar { display: none; }
@media (max-width: 639px) {
  body { padding-bottom: 78px; }
  .stickybar { display: flex; position: fixed; bottom: 12px; inset-inline: 12px; z-index: 50;
    background: rgba(10, 10, 10, 0.92); border: 1px solid rgba(246, 244, 239, 0.15); border-radius: 999px;
    padding: 9px 10px; gap: 10px; align-items: center; box-shadow: 0 8px 28px rgba(10, 10, 10, 0.35); color: var(--ink); }
  .stickybar .act { flex: 1.4; text-align: center; padding: 12px 0; font-size: 14px; }
  .stickybar .ghost { flex: 1; border-color: rgba(246, 244, 239, 0.25); color: var(--ink); }
}

/* prose pages (legal, review sample) */
.note { font-size: 14px; color: var(--day-faint); }
.prose { max-width: 66ch; }
.prose p, .prose li { color: var(--day-muted); }
.prose h1 { margin-bottom: 0.4em; }
.prose h2, .prose h3 { margin-top: 1.6em; margin-bottom: 0.5em; }
.tlink { color: var(--signal-text); border-bottom: 1px solid var(--signal-dim); padding-bottom: 1px; }
.band .tlink { color: var(--signal-soft); }

/* --- motion: triple-gated. no JS or reduced motion = the full static page ------ */
html.js .rv { }
@media (prefers-reduced-motion: no-preference) {
  html.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease-reveal), transform 0.8s var(--ease-reveal); transition-delay: calc(var(--d, 0) * 90ms); }
  html.js .rv.in { opacity: 1; transform: none; }

  html.js .pulseline::after { animation: pulse-run 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  @keyframes pulse-run { 0% { transform: translateX(0); } 55% { transform: translateX(var(--travel, 140px)); } 100% { transform: translateX(0); } }
  html[dir="rtl"].js .pulseline::after { animation-name: pulse-run-rtl; }
  @keyframes pulse-run-rtl { 0% { transform: translateX(0); } 55% { transform: translateX(calc(-1 * var(--travel, 140px))); } 100% { transform: translateX(0); } }

  /* the mark wakes: one full clockwise turn landing past twelve, then the copper
     overshoot draws in. Once, on load; the clock is a clock in RTL too. */
  html.js .mk-hand { transform-origin: 50px 50px; animation: mk-sweep 1.1s var(--ease-out-expo) 0.2s backwards; }
  @keyframes mk-sweep { from { transform: rotate(-385deg); } to { transform: rotate(0deg); } }
  html.js .mk-over { stroke-dasharray: 17; animation: mk-draw 0.35s var(--ease-out-expo) 1.25s backwards; }
  @keyframes mk-draw { from { stroke-dashoffset: 17; } to { stroke-dashoffset: 0; } }

  html.js .brline .bt { opacity: 0; animation: brt 0.01s linear both; }
  html.js .brline .b1, html.js .brline .b2 { animation: brs 1s var(--ease-wipe) both; }
  html.js .brline.l1 .b1 { animation-delay: 0.30s; } html.js .brline.l1 .b2 { animation-delay: 0.38s; } html.js .brline.l1 .bt { animation-delay: 0.70s; }
  html.js .brline.l2 .b1 { animation-delay: 0.55s; } html.js .brline.l2 .b2 { animation-delay: 0.63s; } html.js .brline.l2 .bt { animation-delay: 0.95s; }
  @keyframes brs { from { transform: translateX(-102%); } to { transform: translateX(102%); } }
  @keyframes brt { from { opacity: 0; } to { opacity: 1; } }
  html[dir="rtl"].js .brline .b1, html[dir="rtl"].js .brline .b2 { transform: translateX(102%); animation-name: brs-rtl; }
  @keyframes brs-rtl { from { transform: translateX(102%); } to { transform: translateX(-102%); } }

  html.js .tick .mq { animation: marquee 60s linear infinite; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  html.js .bucket .bar { animation: bucket-lit 15s linear infinite; animation-delay: calc(var(--k, 0) * 3s); }
  @keyframes bucket-lit { 0%, 2% { background: var(--day-bar); } 5%, 16% { background: var(--signal); } 21%, 100% { background: var(--day-bar); } }

  html.js .packet { opacity: 1; }
  html.js .packet.p1 { animation: run1 7.2s linear infinite; }
  html.js .packet.p2 { animation: run2 7.2s linear infinite; }
  @keyframes run1 { 0% { stroke-dashoffset: 14; } 42% { stroke-dashoffset: -114; } 100% { stroke-dashoffset: -114; } }
  @keyframes run2 { 0%, 50% { stroke-dashoffset: 14; } 92% { stroke-dashoffset: -114; } 100% { stroke-dashoffset: -114; } }
  html.js .n2 .nodebox { animation: nlit2 7.2s linear infinite; }
  html.js .n3 .nodebox { animation: nlit3 7.2s linear infinite; }
  @keyframes nlit2 { 0%, 34% { fill: var(--plate); stroke: var(--node); } 40%, 56% { fill: #F7E8DF; stroke: var(--signal); } 64%, 100% { fill: var(--plate); stroke: var(--node); } }
  @keyframes nlit3 { 0%, 84% { fill: var(--plate); stroke: var(--node); } 90%, 97% { fill: #F7E8DF; stroke: var(--signal); } 100% { fill: var(--plate); stroke: var(--node); } }

  html.js .flowline { stroke-dasharray: 100; stroke-dashoffset: 100; }
  html.js .in .flowline, html.js .flowplate.in .flowline { animation: draw 1.4s cubic-bezier(0.45, 0, 0.55, 1) 0.2s both; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  html.js .flowdot { opacity: 0; }
  html.js .in .flowdot { animation: dot-in 0.4s var(--ease-out-expo) both; }
  html.js .in .fd1 { animation-delay: 0.3s; } html.js .in .fd2 { animation-delay: 0.9s; } html.js .in .fd3 { animation-delay: 1.5s; }
  @keyframes dot-in { from { opacity: 0; } to { opacity: 1; } }
}