/* h1-home.css: owned by M1 (homepage motion), round 6 (30.09.2026). Only this agent edits this file.
   Five new self-drawn explainers on the homepage, companion of h1-home.js:
   1) .h1rel   chatting panel: a fan's memory chips light up while a personal reply types itself; the "same blast" row is struck
   2) .h1net   pricing: gross -> OnlyFans keeps 20% -> net -> commission taken from net (plan toggle, example numbers)
   3) .h1dial  24-hour dial, lit all the way round (chat 24/7, round 12), a hand sweeps, conversations pop at every hour
   4) .h1week  globe: a marker walks Mon -> Sun collecting reels / chats / top-fan icons; on Monday a report draws itself
   5) .h1gap   switching: old agency and Fan Fusion on one timeline; parallel setup, chat handover without a gap
   7) .h1auditbg final CTA backdrop: a written audit and a term sheet draw themselves once, faint, beside the heading
   Rules: timing from the f4 tokens, colours from the champagne tokens; motion only under html.mo + .is-armed (set by JS);
   the unarmed default of every piece IS its end state (no JS, reduced motion, off-screen rest). */

@keyframes h1-pop { 0% { opacity: 0; scale: .5; } 60% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes h1-draw { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
@keyframes h1-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes h1-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* resets between loops happen without transitions */
.h1-snap, .h1-snap * { transition: none !important; animation: none !important; }

/* ================================================================ 1) relationships, not mass messages (chatting panel) */
.g1viz.h1rel { height: auto; overflow: hidden; padding: 14px 14px 16px; container-type: inline-size; }
.h1rel__stage { display: grid; gap: 10px; transition: opacity calc(var(--dur) * .7) var(--ease); }
.h1rel__fan { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.h1rel__av { width: 22px; height: 22px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--line-strong), var(--surface)); border: 1px solid var(--line-strong); }
.h1rel__name { font: 600 12.5px/1.2 var(--f-display); color: var(--ink); white-space: nowrap; }
.h1rel__top {
  padding: 4px 7px; border-radius: 999px; white-space: nowrap;
  font: 700 9px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember); background: var(--tint); border: 1px solid var(--tint-line);
}
.h1rel__tag {
  margin-left: auto; padding: 4px 7px; border-radius: 999px; white-space: nowrap;
  font: 600 8.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); border: 1px dashed var(--line-strong);
}
.h1rel__mem { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.h1rel__chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px; border-radius: 999px; white-space: nowrap;
  font: 500 11.5px/1.2 var(--f-body); color: var(--ink);
  background: color-mix(in srgb, var(--ember) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ember) 42%, var(--line-strong));
  transition: color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.h1rel__chip .i { width: 13px; height: 13px; color: var(--ember); transition: color var(--dur-hover) var(--ease); }
.h1rel__reply {
  position: relative; display: grid; justify-self: end; width: min(90%, 380px); margin: 2px 0 0; padding: 9px 13px;
  border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--ember) 14%, var(--inset)); border: 1px solid var(--tint-line);
  font: 500 12.5px/1.45 var(--f-body); color: var(--ink); transform-origin: 100% 100%;
  transition: opacity calc(var(--dur) * .6) var(--ease), scale calc(var(--dur) * .6) var(--ease);
}
.h1rel__ghost, .h1rel__typed { grid-area: 1 / 1; min-width: 0; }
.h1rel__ghost { visibility: hidden; }
.h1rel__ok {
  position: absolute; left: -10px; bottom: -8px; width: 20px; height: 20px; padding: 3px; border-radius: 50%;
  background: var(--inset); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 45%, transparent);
  fill: none; stroke: var(--sage); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.h1rel__ok path { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
.h1rel__blast {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 8px 10px;
  border-radius: 10px; border: 1px dashed var(--line-strong); opacity: .5; transition: opacity var(--dur) var(--ease);
}
.h1rel__btag { flex: none; font: 700 9px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.h1rel__bl { flex: 1; display: grid; gap: 4px; min-width: 0; }
.h1rel__bl i { display: block; height: 4px; border-radius: 2px; background: var(--line-strong); }
.h1rel__bl i + i { width: 62%; }
.h1rel__strike { position: absolute; left: 8px; right: 8px; top: 50%; height: 1.5px; margin-top: -1px; background: var(--muted); transform-origin: 0 50%; transition: transform var(--dur) var(--ease); }
@container (max-width: 360px) {
  .h1rel__tag { display: none; }
  .h1rel__chip { font-size: 11px; padding: 4px 8px 4px 6px; }
  .h1rel__reply { width: 94%; font-size: 12px; }
  .h1rel__btag { font-size: 8.5px; letter-spacing: .1em; }
}
/* armed (motion): chips wait dim until the reply uses them, the reply waits, the blast row is still "on" */
html.mo .h1rel.is-armed .h1rel__chip:not(.on) { color: var(--muted); background: var(--surface); border-color: var(--line-strong); }
html.mo .h1rel.is-armed .h1rel__chip:not(.on) .i { color: var(--faint); }
html.mo .h1rel.is-armed .h1rel__chip.on { animation: g1-nudge calc(var(--dur) * .6) var(--ease) both; }
html.mo .h1rel.is-armed:not(.s1) .h1rel__reply { opacity: 0; scale: .94; }
html.mo .h1rel.is-typing .h1rel__typed::after {
  content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -.16em;
  background: var(--ember-hi); animation: h1-caret .9s linear infinite;
}
html.mo .h1rel.is-armed:not(.s2) .h1rel__ok { opacity: 0; }
html.mo .h1rel.is-armed:not(.s2) .h1rel__ok path { stroke-dashoffset: 1.05; }
html.mo .h1rel.is-armed.s2 .h1rel__ok { animation: h1-pop calc(var(--dur) * .6) var(--ease) both; }
html.mo .h1rel.is-armed.s2 .h1rel__ok path { animation: h1-draw calc(var(--dur) * .6) var(--ease) calc(var(--dur) * .2) both; }
html.mo .h1rel.is-armed:not(.s2) .h1rel__blast { opacity: .95; }
html.mo .h1rel.is-armed:not(.s2) .h1rel__strike { transform: scaleX(0); }
html.mo .h1rel.is-armed.s2 .h1rel__strike { transition-delay: calc(var(--dur) * .3); }
html.mo .h1rel.is-armed.sx .h1rel__stage { opacity: 0; }

/* ================================================================ 2) commission on net, never on gross (pricing) */
.h1net {
  --keep: .32; --rng: .20; --com: .28;             /* full management 35-60 % of an $8,000 net, as shares of the $10,000 gross track */
  max-width: 880px; margin: 36px auto 0; padding: 20px 24px 18px; container-type: inline-size;
  border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--inset) 70%, transparent);
}
.h1net__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
.h1net__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; margin: 0; font: 600 15px/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.h1net__title .i { color: var(--ember); }
.h1net__seg { grid-template-columns: repeat(2, auto); gap: 3px; padding: 3px; }
.h1net__seg button { height: 30px; padding: 0 14px; font-size: 12.5px; white-space: nowrap; }
.h1net__rows { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.h1net__row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 96px; align-items: center; gap: 16px; min-width: 0; }
.h1net__k { min-width: 0; font: 500 13px/1.3 var(--f-body); color: var(--body); }
.h1net__v { font: 600 13px/1 var(--f-mono); color: var(--ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.h1net__v--fee { color: var(--muted); }
.h1net__track { position: relative; height: 12px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.h1net__bar { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), translate var(--dur) var(--ease); }
.h1net__bar--gross { background: var(--ember-lo); opacity: .6; }
.h1net__bar--cut { transform: translateX(80%) scaleX(.2); background: repeating-linear-gradient(135deg, var(--inset) 0 3px, transparent 3px 6px); }
.h1net__bar--fee { transform: translateX(80%) scaleX(.2); background: var(--faint); opacity: .7; }
.h1net__bar--net { transform: scaleX(.8); background: var(--ember-lo); }
.h1net__bar--keep { transform: scaleX(var(--keep)); background: var(--sage); opacity: .85; }
.h1net__bar--range { transform: translateX(calc(var(--keep) * 100%)) scaleX(var(--rng)); background: color-mix(in srgb, var(--ember) 38%, transparent); }
.h1net__bar--com { transform: translateX(calc((var(--keep) + var(--rng)) * 100%)) scaleX(var(--com)); background: var(--ember); }
.h1net__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; font: 500 12.5px/1.4 var(--f-body); color: var(--muted); }
.h1net__legend span { display: inline-flex; align-items: center; gap: 7px; }
.h1net__legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.h1net__dot { width: 9px; height: 9px; flex: none; border-radius: 3px; }
.h1net__dot--keep { background: var(--sage); }
.h1net__dot--com { background: var(--ember); }
.h1net__dot--range { background: color-mix(in srgb, var(--ember) 38%, transparent); }
.h1net__note { margin: 10px 0 0; font: 400 11.5px/1.5 var(--f-body); color: var(--faint); }
@container (max-width: 600px) {
  .h1net__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "t t"; gap: 6px 12px; }
  .h1net__k { grid-area: k; }
  .h1net__v { grid-area: v; }
  .h1net__track { grid-area: t; }
  .h1net__seg { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h1net__seg button { padding: 0 8px; font-size: 12px; }
  .h1net__legend { gap: 6px 16px; }
}
@media (max-width: 600px) { .h1net { margin-top: 28px; padding: 18px 16px 16px; } }
/* armed: the bars wait at zero width, then the story plays once (.is-play); .is-done removes the delays for the toggle */
html.mo .h1net.is-armed:not(.is-play) .h1net__bar--gross, html.mo .h1net.is-armed:not(.is-play) .h1net__bar--net,
html.mo .h1net.is-armed:not(.is-play) .h1net__bar--keep { transform: scaleX(0); }
html.mo .h1net.is-armed:not(.is-play) .h1net__bar--cut { opacity: 0; }
html.mo .h1net.is-armed:not(.is-play) .h1net__bar--fee { opacity: 0; translate: 0 -14px; }
html.mo .h1net.is-armed:not(.is-play) .h1net__bar--range { transform: translateX(calc(var(--keep) * 100%)) scaleX(0); }
html.mo .h1net.is-armed:not(.is-play) .h1net__bar--com { transform: translateX(calc((var(--keep) + var(--rng)) * 100%)) scaleX(0); }
html.mo .h1net.is-armed:not(.is-play) .h1net__legend, html.mo .h1net.is-armed:not(.is-play) [data-net-rate] { opacity: 0; }
html.mo .h1net.is-armed .h1net__legend, html.mo .h1net.is-armed [data-net-rate] { transition: opacity var(--dur) var(--ease); }
html.mo .h1net.is-play:not(.is-done) .h1net__bar--cut { transition-delay: calc(var(--dur) * 1.15); }
html.mo .h1net.is-play:not(.is-done) .h1net__bar--fee { transition-delay: calc(var(--dur) * 1.25); }
html.mo .h1net.is-play:not(.is-done) .h1net__bar--net { transition-delay: calc(var(--dur) * 1.9); }
html.mo .h1net.is-play:not(.is-done) .h1net__bar--keep { transition-delay: calc(var(--dur) * 2.9); }
html.mo .h1net.is-play:not(.is-done) .h1net__bar--range, html.mo .h1net.is-play:not(.is-done) .h1net__bar--com,
html.mo .h1net.is-play:not(.is-done) [data-net-rate] { transition-delay: calc(var(--dur) * 3.5); }
html.mo .h1net.is-play:not(.is-done) .h1net__legend { transition-delay: calc(var(--dur) * 4.1); }
.h1net [data-net-keep], .h1net [data-net-com], .h1net [data-net-rate] { display: inline-block; }
html.mo .h1net .is-swap { animation: h1-pop calc(var(--dur) * .6) var(--ease) both; }

/* ================================================================ 3 + 4) time next to the globe: 24-hour dial and the Monday week */
.h1time { container-type: inline-size; margin-top: 22px; }
.h1time__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 500px) { .h1time__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.h1card {
  min-width: 0; margin: 0; padding: 14px 16px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--inset) 72%, transparent);
}
.h1card figcaption { margin: 10px 0 0; font: 400 12.5px/1.45 var(--f-body); color: var(--muted); }
.h1card figcaption b { display: block; margin-bottom: 2px; font: 600 13px/1.35 var(--f-display); color: var(--ink); }

/* the dial (viewBox 120; midnight at the top; the coverage ring runs the full circle outside the hour ticks: chat 24/7, owner 14.10.2026) */
.h1dial { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; }
.h1dial figcaption { margin: 0; }
@container (min-width: 500px) {
  .h1dial { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0; }
  .h1dial figcaption { margin-top: 10px; }
}
.h1dial__svg { display: block; width: 100%; max-width: 112px; height: auto; overflow: visible; }
.h1dial__face { fill: var(--inset); stroke: var(--line); stroke-width: 1; }
.h1dial__ticks { fill: none; stroke: var(--line-strong); stroke-width: 4; stroke-dasharray: .35 3.65; stroke-dashoffset: .175; }
.h1dial__major { fill: none; stroke: var(--faint); stroke-width: 6; stroke-dasharray: .5 23.5; stroke-dashoffset: .25; }
.h1dial__glow { fill: none; stroke: var(--ember); stroke-width: 7; opacity: .14; }
.h1dial__win { fill: none; stroke: var(--ember); stroke-width: 2.4; opacity: .9; }
.h1dial__sun { fill: var(--ember-hi); }
.h1dial__rays { fill: none; stroke: var(--ember); stroke-width: 2.4; stroke-dasharray: 1 1; }
.h1dial__moon { fill: var(--ember-hi); }
.h1dial__moon .h1dial__carve { fill: var(--inset); }
.h1dial__dot { fill: var(--ember-hi); }
.h1dial__ring { fill: none; stroke: var(--ember); stroke-width: 1; opacity: 0; }
.h1dial__hand { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; rotate: 30deg; transform-box: view-box; transform-origin: 50% 50%; }
.h1dial__hub { fill: var(--ember); stroke: var(--inset); stroke-width: 1.5; }
.h1dial__pop circle { transform-box: fill-box; transform-origin: center; }
/* motion: one sweep every 9 s; each conversation dot pops exactly when the hand reaches it (same clock, delay = angle) */
@keyframes h1-sweep { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes h1-dotpop { 0% { opacity: 0; scale: 0; } 2.5% { opacity: 1; scale: 1.45; } 6% { opacity: 1; scale: 1; } 42% { opacity: 1; scale: 1; } 58%, 100% { opacity: 0; scale: .6; } }
@keyframes h1-dotping { 0% { opacity: 0; scale: .6; } .5% { opacity: .8; scale: .6; } 11% { opacity: 0; scale: 3.2; } 100% { opacity: 0; scale: 3.2; } }
html.mo .h1dial.is-armed { --T: 9s; }
html.mo .h1dial.is-armed .h1dial__hand { animation: h1-sweep var(--T) linear infinite; }
html.mo .h1dial.is-armed .h1dial__dot { animation: h1-dotpop var(--T) linear calc(var(--a) * var(--T)) infinite backwards; }
html.mo .h1dial.is-armed .h1dial__ring { animation: h1-dotping var(--T) linear calc(var(--a) * var(--T)) infinite backwards; }
html.mo .h1dial.is-armed.is-off *, html.mo .h1dial.is-armed.is-off { animation-play-state: paused; }

/* the week: M T W T F S S M, a marker walks, each day adds one thing, Monday draws the report */
.h1week { display: flex; flex-direction: column; justify-content: center; }
.h1week__strip { position: relative; padding-top: 10px; container-type: inline-size; }
.h1week__days { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.h1week__d { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.h1week__ic {
  position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  color: var(--ember); background: var(--surface); border: 1px solid var(--line-strong);
}
.h1week__ic--none { visibility: hidden; }
.h1week__ic .i { width: 12px; height: 12px; stroke-width: 1.8; }
.h1week__pin { width: 9px; height: 9px; border-radius: 50%; background: var(--ember-lo); box-shadow: 0 0 0 3px var(--bg-alt); }
.h1week__d i { font: 600 10px/1 var(--f-mono); font-style: normal; color: var(--muted); }
.h1week__d--mon i { color: var(--ember); }
/* Monday's report: a small sheet whose lines draw themselves */
.h1week__doc { align-content: start; justify-items: start; gap: 3px; width: 24px; height: 30px; margin-top: -8px; padding: 5px 4px; border-radius: 4px; background: var(--paper); border-color: color-mix(in srgb, var(--paper) 70%, var(--line-strong)); }
.h1week__dh { display: block; width: 55%; height: 2.5px; border-radius: 2px; background: var(--pen); }
.h1week__dl { display: block; width: var(--w); height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--paper-ink) 45%, transparent); transform-origin: 0 50%; }
.h1week__ok {
  position: absolute; right: -8px; bottom: -7px; width: 16px; height: 16px; padding: 2.5px; border-radius: 50%;
  background: var(--inset); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 50%, transparent);
  fill: none; stroke: var(--sage); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
}
.h1week__ok path { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
.h1week__track { position: absolute; left: 6.25%; right: 6.25%; top: 42.5px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--line-strong); }
.h1week__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--ember); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); transition: transform calc(var(--dur) * .75) var(--ease); }
.h1week__run { position: absolute; left: 0; top: 0; width: 0; height: 100%; transform: translateX(calc(var(--p, 1) * 87.5cqi)); transition: transform calc(var(--dur) * .75) var(--ease); }  /* width 0: the moving box never reaches past the card */
.h1week__dot { position: absolute; left: -7px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--ember-hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 22%, transparent); z-index: 2; }
.h1week__key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; font: 500 11px/1.3 var(--f-body); color: var(--faint); }
.h1week__key span { display: inline-flex; align-items: center; gap: 5px; }
.h1week__key .i { width: 12px; height: 12px; color: var(--ember); }
.h1week figcaption b { display: inline; margin-right: 4px; }
/* armed: icons and pins wait until the marker reaches their day */
html.mo .h1week.is-armed .h1week__d:not(.on) .h1week__ic { opacity: 0; scale: .4; }
html.mo .h1week.is-armed .h1week__d:not(.on) .h1week__pin { background: var(--line-strong); }
html.mo .h1week.is-armed .h1week__d.on .h1week__ic:not(.h1week__doc) { animation: h1-pop calc(var(--dur) * .6) var(--ease) calc(var(--dur) * .45) both; }
html.mo .h1week.is-armed .h1week__d--mon.on .h1week__doc { animation: h1-pop calc(var(--dur) * .55) var(--ease) calc(var(--dur) * .4) both; }
html.mo .h1week.is-armed:not(.is-report) .h1week__dl, html.mo .h1week.is-armed:not(.is-report) .h1week__dh { transform: scaleX(0); }
html.mo .h1week.is-armed:not(.is-report) .h1week__ok { opacity: 0; }
html.mo .h1week.is-armed:not(.is-report) .h1week__ok path { stroke-dashoffset: 1.05; }
html.mo .h1week.is-report .h1week__dh { transform-origin: 0 50%; animation: h1-fill calc(var(--dur) * .5) var(--ease) calc(var(--dur) * .7) both; }
html.mo .h1week.is-report .h1week__dl { animation: h1-fill calc(var(--dur) * .55) var(--ease) calc(var(--dur) * .95 + var(--n) * var(--stagger) * 2.5) both; }
html.mo .h1week.is-report .h1week__ok { animation: h1-pop calc(var(--dur) * .6) var(--ease) calc(var(--dur) * 2) both; }
html.mo .h1week.is-report .h1week__ok path { animation: h1-draw calc(var(--dur) * .6) var(--ease) calc(var(--dur) * 2.2) both; }
html.mo .h1week.is-armed .h1week__strip { transition: opacity calc(var(--dur) * .7) var(--ease); }
html.mo .h1week.is-armed.sx .h1week__strip { opacity: 0; }

/* ================================================================ 5) switching without a gap: two lanes on one timeline */
.h1gap {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
  margin: 0 0 48px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 18px;
  background: color-mix(in srgb, var(--inset) 70%, transparent); container-type: inline-size;
}
.h1gap__keys { display: grid; grid-template-rows: 22px 22px; row-gap: 10px; align-items: center; }
.h1gap__k { font: 700 10px/1.1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.h1gap__k--ff { color: var(--ember); }
.h1gap__time { position: relative; display: grid; grid-template-rows: 22px 22px auto; row-gap: 10px; min-width: 0; container-type: inline-size; }
.h1gap__lane { position: relative; display: block; min-width: 0; }
.h1gap__lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.h1gap__bar { position: absolute; top: 6px; bottom: 6px; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 5px; transform-origin: 0 50%; }
.h1gap__bar--old { --a: 0; --b: .66; background: var(--line-strong); }
.h1gap__bar--setup { --a: .15; --b: .66; border-radius: 5px 0 0 5px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ember) 42%, transparent) 0 7px, transparent 7px 11px); }
.h1gap__bar--live { --a: .66; --b: 1; border-radius: 0 5px 5px 0; background: var(--ember); }
.h1gap__ends, .h1gap__live { position: absolute; top: 50%; translate: 0 -50%; font: 600 9.5px/1 var(--f-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.h1gap__ends { left: calc(66% + 10px); color: var(--faint); }
.h1gap__live { right: 10px; color: var(--on-ember); }
.h1gap__seam { position: absolute; left: 66%; top: -6px; height: 66px; width: 0; border-left: 1px dashed color-mix(in srgb, var(--ember) 70%, transparent); }
.h1gap__seam em {
  position: absolute; left: 50%; top: -12px; translate: -50% 0; padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  font: 700 8.5px/1 var(--f-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage); background: var(--bg-alt); border: 1px solid color-mix(in srgb, var(--sage) 40%, transparent);
}
.h1gap__pts { position: relative; height: 44px; margin: 0; padding: 0; list-style: none; }
.h1gap__pts li { position: absolute; left: calc(var(--x) * 100%); top: 0; display: grid; justify-items: center; gap: 6px; translate: -50% 0; }
.h1gap__pts li:first-child { justify-items: start; translate: -9px 0; }
.h1gap__pts li:last-child { justify-items: end; translate: calc(-100% + 9px) 0; }
.h1gap__pts b {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font: 700 10px/1 var(--f-body); color: var(--on-ember); background: var(--ember);
}
.h1gap__pts span { font: 500 11.5px/1.2 var(--f-body); color: var(--body); white-space: nowrap; }
.h1gap__head { position: absolute; left: 0; top: -8px; width: 0; height: 72px; pointer-events: none; opacity: 0; }
.h1gap__head::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--ember-hi), color-mix(in srgb, var(--ember) 10%, transparent)); }
@container (max-width: 640px) {
  .h1gap__pts span { display: none; }
  .h1gap__pts { height: 20px; }
  .h1gap__ends { display: none; }
}
@media (max-width: 600px) {
  .h1gap { gap: 10px; padding: 18px 14px 14px; margin-bottom: 36px; }
  .h1gap__k { font-size: 9px; letter-spacing: .1em; }
  .h1gap__live { font-size: 8.5px; right: 6px; }
}
/* motion: a playhead sweeps once per loop; setup and chat-live grow behind it, checkpoints pop as it passes */
@keyframes h1-sweep-x { from { transform: translateX(0); } to { transform: translateX(100cqi); } }   /* cqi = the timeline column */
@keyframes h1-head { 0% { opacity: 0; } 4%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes h1-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes h1-fade-in { from { opacity: 0; } to { opacity: 1; } }
html.mo .h1gap.is-armed { --T: 4.8s; }
html.mo .h1gap.is-armed .h1gap__time > :not(.h1gap__head):not(.h1gap__lane:first-child) { transition: opacity calc(var(--dur) * .7) var(--ease); }
html.mo .h1gap.is-armed:not(.is-play) .h1gap__bar--setup, html.mo .h1gap.is-armed:not(.is-play) .h1gap__bar--live { transform: scaleX(0); }
html.mo .h1gap.is-armed:not(.is-play) .h1gap__pts li, html.mo .h1gap.is-armed:not(.is-play) .h1gap__seam em,
html.mo .h1gap.is-armed:not(.is-play) .h1gap__live { opacity: 0; }
html.mo .h1gap.is-play .h1gap__head { animation: h1-sweep-x var(--T) linear both, h1-head var(--T) linear both; }
html.mo .h1gap.is-play .h1gap__bar--setup { animation: h1-grow calc(var(--T) * .51) linear calc(var(--T) * .15) both; }
html.mo .h1gap.is-play .h1gap__bar--live { animation: h1-grow calc(var(--T) * .34) linear calc(var(--T) * .66) both; }
html.mo .h1gap.is-play .h1gap__pts li { animation: h1-pop calc(var(--dur) * .6) var(--ease) calc(var(--x) * var(--T)) both; }
html.mo .h1gap.is-play .h1gap__seam em { animation: h1-pop calc(var(--dur) * .7) var(--ease) calc(var(--T) * .68) both; }
html.mo .h1gap.is-play .h1gap__live { animation: h1-fade-in var(--dur) var(--ease) var(--T) both; }   /* only once the bar is full */
html.mo .h1gap.is-armed.sx .h1gap__bar--setup, html.mo .h1gap.is-armed.sx .h1gap__bar--live, html.mo .h1gap.is-armed.sx .h1gap__pts,
html.mo .h1gap.is-armed.sx .h1gap__seam, html.mo .h1gap.is-armed.sx .h1gap__live { opacity: 0; transition: opacity calc(var(--dur) * .7) var(--ease); }

/* ================================================================ 7) final CTA: two faint paper sheets (the written audit, the term sheet)
   draw themselves once behind the heading; only where there is room beside the centred copy */
body.page-home #audit { position: relative; isolation: isolate; }
.h1auditbg { position: absolute; z-index: -1; left: 50%; top: 40px; width: min(1240px, 100%); height: auto; translate: -50% 0; overflow: visible; pointer-events: none; opacity: .24; }
.h1auditbg rect, .h1auditbg path { fill: none; stroke: var(--ember); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
.h1auditbg rect { stroke-width: 1.1; fill: color-mix(in srgb, var(--ember) 5%, transparent); }
.h1auditbg .h1auditbg__ok { stroke: var(--sage); stroke-width: 2.2; }
@media (max-width: 1179px) { .h1auditbg { display: none; } }
html.mo .h1auditbg.is-armed:not(.is-play) rect, html.mo .h1auditbg.is-armed:not(.is-play) path { stroke-dashoffset: 1.05; }
html.mo .h1auditbg.is-play rect, html.mo .h1auditbg.is-play path { animation: h1-draw calc(var(--dur) * 1.3) var(--ease) calc(var(--i, 0) * var(--stagger) * 2.2) both; }

/* spacing: the new pieces sit inside existing sections without stretching them more than needed */
.h1net + .g1flow { margin-top: 16px; }

/* 6) FAQ: M3 (h1-micro.js) already animates the answer height on open/close for every page, so nothing here (no double animation). */

/* ================================================================ reduced motion: every piece rests on its end state */
@media (prefers-reduced-motion: reduce) {
  .h1rel *, .h1net *, .h1dial *, .h1week *, .h1gap *, .h1auditbg * { animation: none !important; transition: none !important; }
}