/* AVROQ home page only. Loaded after site.css via the page's META "css" key.
   Motion starts when a [data-live] section is in view (.is-live, set by home.js)
   and pauses off-screen (.is-paused). Everything is static under reduced motion. */
@layer pages {
  .page-home { --ease: cubic-bezier(.2, .7, .2, 1); }
  .page-home .x-eyebrow { margin: 0 0 1rem; font: 600 var(--text-xs)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
  .page-home .on-ink .x-eyebrow { color: var(--slate-on-ink); }
  .page-home .more { font-weight: 500; }
  .page-home .more::after { content: " \2192"; display: inline-block; transition: transform .25s var(--ease); }
  .page-home .more:hover::after { transform: translateX(4px); }

  /* ---------- hero ---------- */
  .x-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper-on-ink); padding-top: clamp(3rem, 7vw, 6rem); }
  .x-hero-grid { position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(var(--rule-reverse) 1px, transparent 1px), linear-gradient(90deg, var(--rule-reverse) 1px, transparent 1px);
    background-size: 56px 56px; opacity: .25;
    mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 20%, transparent 75%); }
  .x-hero::before { content: ""; position: absolute; width: 60vw; height: 60vw; right: -15vw; top: -20vw; border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 208, 143, .16), transparent 62%); pointer-events: none; }
  .x-hero-inner > *, .x-gap-grid > *, .x-panel > * { min-width: 0; }
  .x-hero-inner { position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 980px) { .x-hero-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
  .x-kicker { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; padding: .45rem .9rem; border: 1px solid var(--rule-reverse); border-radius: 99px; font-size: var(--text-xs); color: var(--slate-on-ink); }
  .x-led { width: 8px; height: 8px; border-radius: 50%; background: var(--bright); box-shadow: 0 0 0 0 rgba(91, 208, 143, .6); animation: x-led 2.4s infinite; }
  @keyframes x-led { 70% { box-shadow: 0 0 0 9px rgba(91, 208, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 208, 143, 0); } }
  .x-hero h1 { font-size: var(--display); line-height: .98; letter-spacing: -.015em; color: var(--paper); max-width: 12ch; }
  .x-hero h1 em { font-style: italic; color: var(--bright); }
  .x-hero .lede { margin: 1.5rem 0 0; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); line-height: 1.55; max-width: 34em; }
  .x-hero .lede a { color: var(--paper); text-decoration-color: var(--rule-reverse); }
  .x-hero .actions { margin-top: 2rem; }
  .x-hero-copy > * { opacity: 0; transform: translateY(16px); animation: x-rise .8s var(--ease) forwards; }
  .x-hero-copy > :nth-child(2) { animation-delay: .08s; } .x-hero-copy > :nth-child(3) { animation-delay: .16s; } .x-hero-copy > :nth-child(4) { animation-delay: .24s; }
  @keyframes x-rise { to { opacity: 1; transform: none; } }
  .x-hero-fig { margin: 0; }

  .switchboard { width: 100%; height: auto; overflow: visible; }
  .switchboard.tall { max-width: 420px; margin-inline: auto; }
  .switchboard.wide { display: none; }
  @media (min-width: 640px) { .switchboard.wide { display: block; } .switchboard.tall { display: none; } }
  .switchboard text { font: 500 14px var(--sans); fill: var(--paper-on-ink); }
  .switchboard.tall text { font-size: 12.5px; }
  .pill rect { fill: var(--ink-soft); stroke: var(--rule-reverse); }
  .pill-dot { fill: var(--slate-on-ink); }
  .pill.dst .pill-dot { fill: var(--bright); }
  .pill { opacity: 0; animation: x-fade .6s var(--ease) forwards; animation-delay: calc(.3s + var(--i) * .07s); }
  .pill.dst { animation-delay: calc(.9s + var(--i) * .07s); }
  .pill.dst rect { animation: x-ping 3.5s linear infinite; animation-delay: calc(2.4s + var(--i) * .7s); }
  @keyframes x-ping { 0%, 6% { stroke: var(--bright); } 22%, 100% { stroke: var(--rule-reverse); } }
  @keyframes x-fade { to { opacity: 1; } }
  .switchboard .wire { fill: none; stroke: var(--rule-reverse); stroke-width: 1.25; stroke-dasharray: 400; stroke-dashoffset: 400; animation: x-draw 1.2s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * .08s); }
  .switchboard .wire.out { animation-delay: calc(1s + var(--i) * .08s); }
  @keyframes x-draw { to { stroke-dashoffset: 0; } }
  .switchboard .pkt, .x-anim .p, .x-card .p, .link-pkt, .x-close-lines circle { offset-rotate: 0deg; opacity: 0; animation: x-travel 3.5s var(--ease) infinite; animation-delay: var(--d); }
  .switchboard .pkt { fill: var(--paper); filter: drop-shadow(0 0 6px rgba(91, 208, 143, .9)); }
  .switchboard .pkt.out { fill: var(--bright); }
  .switchboard .pkt.in { animation-delay: calc(1.6s + var(--d)); } .switchboard .pkt.out { animation-delay: calc(1.6s + var(--d)); }
  @keyframes x-travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 40% { offset-distance: 100%; opacity: 1; } 46%, 100% { offset-distance: 100%; opacity: 0; } }
  .core-halo { fill: rgba(91, 208, 143, .08); animation: x-breathe 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes x-breathe { 50% { transform: scale(1.08); opacity: .5; } }
  .core-ring { fill: none; stroke: var(--bright); stroke-width: 1; stroke-dasharray: 3 7; opacity: .7; }
  .core-ring.rev { stroke-dasharray: 22 10; opacity: .35; }
  .spin { transform-box: fill-box; transform-origin: center; animation: x-spin 24s linear infinite; }
  .spin.rev { animation-duration: 16s; animation-direction: reverse; }
  @keyframes x-spin { to { transform: rotate(360deg); } }
  .core-disc { fill: var(--pencil); }
  .switchboard .core-t { font: 600 21px var(--serif); fill: #fff; letter-spacing: .02em; }
  .switchboard .core-s { font-size: 10.5px; fill: rgba(255, 255, 255, .72); letter-spacing: .04em; }

  .x-ticker { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .7rem 1rem; border: 1px solid var(--rule-reverse); border-radius: var(--radius); font: 400 var(--text-xs)/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--paper-on-ink); overflow: hidden; }
  .x-ticker-label { flex: none; padding: .15rem .5rem; border-radius: 2px; background: rgba(255, 255, 255, .08); color: var(--slate-on-ink); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
  .x-ticker-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .35s, transform .35s; }
  .x-ticker-line.is-out { opacity: 0; transform: translateY(6px); }

  .x-marquee { position: relative; margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--rule-reverse); overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .x-marquee-track { display: flex; width: max-content; margin: 0; padding: 1.25rem 0; list-style: none; animation: x-marquee 38s linear infinite; }
  .x-marquee-track li { padding: 0 2.25rem; font: 500 1.0625rem var(--sans); color: var(--slate-on-ink); white-space: nowrap; position: relative; }
  .x-marquee-track li::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--rule-strong); }
  @keyframes x-marquee { to { transform: translateX(-50%); } }

  /* ---------- the gap: before / after ---------- */
  .x-gap-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 980px) { .x-gap-grid { grid-template-columns: 5fr 6fr; } }
  .x-gap h2 { font-size: var(--h2); line-height: 1.1; margin-bottom: 1.25rem; }
  .x-gap-copy > p:not(.x-eyebrow) { color: var(--slate); font-size: var(--text-l); max-width: 36em; }
  .x-switch { display: inline-flex; margin-top: 1.5rem; padding: 4px; border: 1px solid var(--rule); border-radius: 99px; background: var(--stone); }
  .x-switch-btn { border: 0; background: transparent; padding: .6rem 1.2rem; border-radius: 99px; cursor: pointer; font-weight: 500; color: var(--slate); transition: background .25s, color .25s; }
  .x-switch-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .x-gap-fig { margin: 0; padding: clamp(1rem, 3vw, 2rem); background: var(--stone); border: 1px solid var(--rule); border-radius: 6px; }
  .x-gap-fig svg { width: 100%; height: auto; overflow: visible; }
  .x-gap-fig text { font: 500 13px var(--sans); fill: var(--ink); }
  .x-gap-fig .win > rect:first-child { fill: var(--paper); stroke: var(--rule); }
  .x-gap-fig .win-bar { fill: var(--ink); }
  .x-gap-fig .win > text { fill: var(--paper); font-weight: 600; }
  .x-gap-fig .rows rect { fill: var(--stone); }
  .x-gap-fig .cell { font: 400 12px ui-monospace, Menlo, monospace; fill: var(--slate); }
  .x-gap-fig .note { font: 500 14px var(--sans); fill: var(--slate); }
  .x-gap-fig .hand, .x-gap-fig .link { transition: opacity .4s; }
  .x-gap-fig[data-state="before"] .link, .x-gap-fig[data-state="after"] .hand { opacity: 0; }
  .hand-path { fill: none; stroke: var(--alert); stroke-width: 1.25; stroke-dasharray: 4 5; opacity: .55; }
  .cursor { offset-path: path('M196 101 C 250 70, 270 70, 326 101'); offset-rotate: 0deg; fill: var(--ink); stroke: var(--paper); stroke-width: 1; animation: x-cursor 2.6s ease-in-out infinite; }
  @keyframes x-cursor { 0%, 10% { offset-distance: 0%; } 55%, 70% { offset-distance: 100%; } 100% { offset-distance: 0%; } }
  .x-gap-fig .typo { font: 600 12px ui-monospace, Menlo, monospace; fill: var(--alert); }
  .x-gap-fig[data-state="before"] .ledger-in text { opacity: 0; }
  .x-gap-fig[data-state="before"] .ledger-in text:nth-child(-n + 2) { opacity: 1; }
  .x-gap-fig[data-state="after"] .typo { opacity: 0; }
  .x-gap-fig[data-state="after"] .ledger-in text { fill: var(--pencil); animation: x-fade-in .5s var(--ease) both; animation-delay: calc(.2s + var(--k) * .15s); }
  @keyframes x-fade-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  .link-wire { stroke: var(--pencil); stroke-width: 1.5; }
  .link-node { fill: var(--pencil); }
  .link-tick { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .link-pkt { fill: var(--pencil); animation-duration: 1.8s; }

  /* ---------- showcase tabs ---------- */
  .x-show { background: var(--stone); }
  .x-show-head { display: grid; gap: 1rem 4rem; margin-bottom: clamp(2rem, 4vw, 3rem); align-items: end; }
  @media (min-width: 980px) { .x-show-head { grid-template-columns: 3fr 2fr; } }
  .x-show-head h2 { font-size: var(--h2); line-height: 1.1; max-width: 20ch; }
  .x-show-head > p { color: var(--slate); font-size: var(--text-l); margin: 0; }
  .x-tabs { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
  .x-tablist { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--rule); }
  @media (min-width: 760px) { .x-tablist { grid-template-columns: repeat(4, 1fr); } }
  .x-tablist button { position: relative; display: flex; gap: .6rem; align-items: baseline; padding: 1.1rem 1.25rem; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: transparent; text-align: left; cursor: pointer; font-weight: 600; color: var(--slate); overflow: hidden; }
  @media (min-width: 760px) { .x-tablist button { border-bottom: 0; } .x-tablist button:last-child { border-right: 0; } }
  .x-tablist .n { font: 500 .8rem ui-monospace, Menlo, monospace; color: var(--slate); }
  .x-tablist button[aria-selected="true"] { color: var(--ink); background: var(--paper); }
  .x-tablist button:hover { color: var(--ink); }
  .x-tablist .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
  .x-tablist button[aria-selected="true"] .bar { transform: scaleX(1); }
  .x-tabs.is-cycling .x-tablist button[aria-selected="true"] .bar { animation: x-progress var(--cycle, 7s) linear forwards; }
  @keyframes x-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .x-panel { display: grid; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); align-items: center; }
  .x-panel[hidden] { display: none; }
  @media (min-width: 980px) { .x-panel { grid-template-columns: 2fr 3fr; } }
  .x-panel h3 { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--serif); margin-bottom: 1rem; }
  .x-panel-copy p { color: var(--slate); }
  .x-anim { width: 100%; height: auto; overflow: visible; }
  .x-anim text { font: 500 13px var(--sans); fill: var(--ink); }
  .x-anim .w, .x-anim .ew { fill: none; stroke: var(--rule-strong); stroke-width: 1.25; opacity: .5; }
  .x-anim .p { fill: var(--pencil); }

  /* panel animations play on .is-active; restarted by home.js when shown */
  .intake .doc > rect:first-child { fill: var(--paper); stroke: var(--rule-strong); }
  .intake .dl { fill: var(--stone); }
  .intake .scan { fill: var(--bright); opacity: 0; }
  .is-active .intake .scan { animation: x-scan 2s var(--ease) .2s both; }
  @keyframes x-scan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; transform: translateY(196px); } 100% { opacity: 0; transform: translateY(196px); } }
  .is-active .intake .dl { animation: x-dl .4s both; animation-delay: 1s; }
  @keyframes x-dl { to { fill: rgba(91, 208, 143, .35); } }
  .intake .fields rect { fill: var(--stone); stroke: var(--rule); }
  .intake .fields .v { font-weight: 600; fill: var(--pencil); }
  .intake .fields g { opacity: 0; }
  .is-active .intake .fields g { animation: x-fade-in .5s var(--ease) both; animation-delay: calc(.8s + var(--k) * .35s); }
  .intake .ledger-card { opacity: 0; }
  .is-active .intake .ledger-card { animation: x-pop .6s var(--ease) 2.6s both; }
  @keyframes x-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
  .intake .ledger-card { transform-box: fill-box; transform-origin: center; }
  .intake .ledger-card > rect { fill: var(--ink); }
  .intake .ledger-card text { fill: var(--paper-on-ink); }
  .intake .ledger-card .h { font: 600 16px var(--serif); fill: #fff; }
  .intake .clip path { stroke: var(--bright); stroke-width: 2; stroke-linecap: round; }
  .intake .clip text { font-size: 11px; fill: var(--slate-on-ink); }
  .intake .ok { fill: var(--bright); } .intake .okt { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .match .lbl { font-size: 12px; fill: var(--slate); text-transform: uppercase; letter-spacing: .1em; }
  .match .col rect { fill: var(--paper); stroke: var(--rule-strong); transition: fill .4s; }
  .match .pairs path { fill: none; stroke: var(--pencil); stroke-width: 1.5; stroke-dasharray: 300; stroke-dashoffset: 300; }
  .is-active .match .pairs path { animation: x-draw .7s var(--ease) both; animation-delay: calc(.3s + var(--k) * .45s); }
  .is-active .match .col rect:not(.odd) { animation: x-matched .4s both; animation-delay: 2.2s; }
  @keyframes x-matched { to { fill: rgba(91, 208, 143, .22); stroke: var(--pencil); } }
  .match .odd { stroke-dasharray: 4 3; }
  .match .exc { opacity: 0; }
  .is-active .match .exc { animation: x-fade .5s 2.6s both; }
  .match .exc rect { fill: var(--ink); } .match .exc text { fill: var(--paper); font-weight: 600; }
  .match .ew { stroke: var(--alert); stroke-dasharray: 4 4; opacity: .7; }
  .is-active .match .odd { animation: x-odd .4s 2.4s both; }
  @keyframes x-odd { to { stroke: var(--alert); fill: rgba(180, 35, 24, .07); } }

  .report .ent rect { fill: var(--paper); stroke: var(--rule-strong); }
  .report .cur { font: 600 12px ui-monospace, Menlo, monospace; fill: var(--pencil); }
  .report .fx circle { fill: var(--pencil); } .report .fx text { fill: #fff; font: italic 600 16px var(--serif); }
  .report .frame { fill: var(--ink); } .report .chart text { fill: var(--paper-on-ink); font-weight: 600; }
  .report .base { stroke: var(--rule-reverse); }
  .report .bar { fill: var(--slate-on-ink); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
  .report .bar.hi { fill: var(--bright); }
  .is-active .report .bar { animation: x-grow .8s var(--ease) both; animation-delay: calc(1.2s + var(--k) * .12s); }
  @keyframes x-grow { to { transform: scaleY(1); } }

  .chase .track { stroke: var(--rule); stroke-width: 2; }
  .chase .track-on { stroke: var(--pencil); stroke-width: 2; stroke-dasharray: 480; stroke-dashoffset: 480; }
  .is-active .chase .track-on { animation: x-draw 3.4s linear .2s both; }
  .chase .day circle { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1.5; }
  .chase .day text { font-size: 12px; fill: var(--slate); }
  .is-active .chase .day circle { animation: x-dayon .3s both; animation-delay: calc(.3s + var(--k) * 1s); }
  @keyframes x-dayon { to { fill: var(--pencil); stroke: var(--pencil); } }
  .chase .msg { opacity: 0; }
  .is-active .chase .msg { animation: x-pop .5s var(--ease) both; animation-delay: calc(.4s + var(--k) * 1s); }
  .chase .msg { transform-box: fill-box; transform-origin: bottom left; }
  .chase .msg rect { fill: var(--paper); stroke: var(--rule-strong); }
  .chase .msg text { font-size: 12.5px; }
  .chase .msg.reply rect { fill: var(--ink); stroke: var(--ink); } .chase .msg.reply text { fill: var(--paper); }

  /* ---------- builds bento (light) ---------- */
  .x-builds { --soft: rgba(15, 30, 46, .06); --soft2: rgba(15, 30, 46, .12); background: var(--stone); overflow: hidden; }
  .x-builds .x-builds-head { margin-bottom: 2.5rem; }
  .x-builds-head h2 { font-size: var(--h2); line-height: 1.1; }
  .x-bento { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 900px) { .x-bento { grid-template-columns: repeat(5, 1fr); }
    .x-tile.t-wide { grid-column: span 3; } .x-tile:not(.t-wide) { grid-column: span 2; } }
  @media (min-width: 1180px) { .x-tile.t-wide { grid-template-columns: 1fr 1.7fr; align-items: center; } }
  .x-tile:not(.t-wide) svg { align-self: end; }
  .x-tile { position: relative; display: grid; gap: 1.5rem; padding: 1.75rem; border: 1px solid var(--rule); border-radius: 14px; background: #fff; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
  .x-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(15, 30, 46, .35); }
  .x-tile svg { width: 100%; height: auto; overflow: visible; }
  .x-tile svg text { font: 500 11px var(--sans); fill: var(--ink); }
  .x-tile-txt h3 { margin-bottom: .5rem; }
  .x-tile-txt p:last-child { margin: 0; color: var(--slate); font-size: var(--text-s); }
  .x-card-n { margin: 0 0 .6rem; font: 500 .75rem ui-monospace, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
  .x-tile .p { fill: var(--pencil); animation-duration: 2.6s; }
  .x-tile .arc { fill: none; stroke: var(--rule-strong); stroke-width: 1.25; stroke-dasharray: 3 5; }
  .x-tile .fr { fill: var(--paper); stroke: var(--rule-strong); }
  .x-tile .lb { font-weight: 600; }

  /* 1: a table row becomes an invoice */
  .v-rowinv .hd { fill: var(--soft); }
  .v-rowinv .r { fill: var(--soft); }
  .v-rowinv .cl { font-size: 10.5px; }
  .v-rowinv .no { fill: var(--slate); font: 500 10px ui-monospace, Menlo, monospace; }
  .v-rowinv .ln { fill: var(--soft2); transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
  .v-rowinv .sep { stroke: var(--rule-strong); }
  .v-rowinv .tot { font: 600 15px var(--serif); opacity: 0; }
  .v-rowinv .stamp { opacity: 0; } .v-rowinv .stamp rect { fill: none; stroke: var(--pencil); } .x-tile .v-rowinv .stamp text { fill: var(--pencil); font-size: 10px; }
  .is-live .v-rowinv .ln { animation: x-growx 5s var(--ease) infinite; animation-delay: calc(.9s + var(--k) * .2s); }
  .is-live .v-rowinv .tot { animation: x-show 5s var(--ease) infinite; animation-delay: 1.7s; }
  .is-live .v-rowinv .stamp { animation: x-show 5s var(--ease) infinite; animation-delay: 2.2s; }
  .is-live .v-rowinv .r.hot { animation: x-hot 5s ease infinite; }
  @keyframes x-growx { 0% { transform: scaleX(0); } 12%, 80% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
  @keyframes x-show { 0% { opacity: 0; } 8%, 72% { opacity: 1; } 84%, 100% { opacity: 0; } }
  @keyframes x-hot { 0%, 100% { fill: rgba(15, 30, 46, .06); } 6%, 30% { fill: rgba(28, 122, 74, .16); } }

  /* 2: tinted tile, pairs ticked off, two left open */
  .x-tile.t-light { background: #EAF1EC; border-color: #D5E3D9; }
  .v-ticks rect { fill: #fff; }
  .v-ticks .j { stroke: var(--rule-strong); stroke-width: 1.25; stroke-dasharray: 60; stroke-dashoffset: 60; }
  .v-ticks .m { fill: var(--ink); opacity: 0; } .v-ticks .t { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
  .v-ticks .q rect { fill: none; stroke: var(--rule-strong); stroke-dasharray: 3 3; } .x-tile .v-ticks .q text { fill: var(--slate); font: 600 13px var(--serif); opacity: 0; }
  .is-live .v-ticks .j { animation: x-dash 6s var(--ease) infinite; animation-delay: calc(var(--k) * .35s); }
  .is-live .v-ticks :is(.m, .t, .q text) { animation: x-show 6s var(--ease) infinite; animation-delay: calc(.4s + var(--k) * .35s); }
  @keyframes x-dash { 0% { stroke-dashoffset: 60; } 10%, 80% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 60; } }

  /* 3: a loop, stock going round both ways */
  .v-loop .ring { fill: none; stroke: var(--rule-strong); stroke-width: 1.25; }
  .v-loop .ring-on { fill: none; stroke: var(--pencil); stroke-width: 1.5; stroke-dasharray: 40 375; transform-box: fill-box; transform-origin: center; }
  .is-live .v-loop .ring-on { animation: x-spin 6s linear infinite; }
  .v-loop .p { animation: x-orbit 6s linear infinite; animation-delay: var(--d); opacity: 1; }
  .v-loop .p.back { fill: var(--ink); }
  @keyframes x-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  .v-loop .nd rect { fill: #fff; stroke: var(--rule-strong); }
  .v-loop .ctr { font: 600 16px var(--serif); } .x-tile .v-loop .ctr.s { font: 500 10px var(--sans); fill: var(--slate); }

  /* 4: phone photo becomes a bill */
  .t-glow { background: radial-gradient(120% 90% at 100% 0%, #EEF3F7, transparent 60%), #fff; }
  .v-phone .body { fill: var(--ink); }
  .v-phone .scr { fill: #2A4258; }
  .v-phone .rc > rect:first-child { fill: var(--paper); transform-box: fill-box; transform-origin: center; transform: rotate(-4deg); }
  .v-phone .rc .rl { fill: #C9CFC9; }
  .v-phone .flash { fill: #fff; opacity: 0; }
  .v-phone .sh { fill: none; stroke: var(--paper); stroke-width: 2; }
  .v-phone .row rect { fill: var(--soft); }
  .v-phone .row.new rect { fill: rgba(28, 122, 74, .12); }
  .v-phone .amt { font-variant-numeric: tabular-nums; }
  .v-phone .row.new .amt { transform: translateX(-12px); }
  .v-phone .clip { fill: none; stroke: var(--pencil); stroke-width: 1.5; stroke-linecap: round; }
  .is-live .v-phone .flash { animation: x-flash 5s ease infinite; }
  .is-live .v-phone .row.new { animation: x-slide 5s var(--ease) infinite; }
  @keyframes x-flash { 0%, 4% { opacity: 0; } 6% { opacity: .85; } 14%, 100% { opacity: 0; } }
  @keyframes x-slide { 0%, 22% { opacity: 0; transform: translateY(-10px); } 32%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

  /* ---------- brands ---------- */
  .x-brands { display: grid; }
  @media (min-width: 900px) { .x-brands { grid-template-columns: 1fr 1fr; } }
  .x-brand { padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); }
  .x-brand-in { max-width: 32rem; margin-inline: auto; }
  .x-brand.dash { background: var(--paper); border-top: 1px solid var(--rule); }
  .x-brand.qelo { background: radial-gradient(90% 70% at 85% 10%, rgba(123, 92, 168, .14), transparent 65%), #F5F2F9; color: var(--ink); border-top: 1px solid var(--rule); }
  .x-brand.qelo .x-eyebrow { color: #6B4E96; }
  .x-brand.qelo .x-brand-in > p:not(.x-eyebrow) { color: var(--slate); }
  .x-brand-name { display: flex; align-items: center; gap: .6rem; font: 600 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--serif); margin-bottom: 1rem; }
  .x-brand > .x-brand-in > p:not(.x-eyebrow) { font-size: var(--text-l); }
  .x-brand.dash .x-brand-in > p:not(.x-eyebrow) { color: var(--slate); }
  .x-brand.qelo a { color: #573291; }
  .x-clocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 2rem 0; padding: 0; list-style: none; }
  .x-clocks li { padding: 1rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--stone); }
  .c-city { display: block; font-size: var(--text-xs); color: var(--slate); }
  .c-time { display: block; margin-top: .25rem; font: 600 1.6rem/1 var(--serif); font-variant-numeric: tabular-nums; }
  .c-time .colon { animation: x-blink 1s steps(1) infinite; }
  @keyframes x-blink { 50% { opacity: .2; } }
  .x-chat { display: grid; gap: .5rem; margin: 2rem 0; padding: 1.25rem; border-radius: 14px; background: #fff; border: 1px solid #E6E0EF; }
  .x-chat .b { max-width: 80%; margin: 0; padding: .6rem .9rem; border-radius: 14px; font-size: var(--text-s); line-height: 1.35; opacity: 0; transform: translateY(8px); }
  .x-chat .in { justify-self: start; background: #EFEBF5; border-bottom-left-radius: 4px; }
  .x-chat .out { justify-self: end; background: #573291; color: #fff; border-bottom-right-radius: 4px; }
  .is-live .x-chat .b { animation: x-rise .5s var(--ease) both; animation-delay: .3s; }
  .is-live .x-chat .b:nth-child(2) { animation-delay: 1.2s; } .is-live .x-chat .b:nth-child(3) { animation-delay: 2.1s; } .is-live .x-chat .b:nth-child(4) { animation-delay: 3s; }

  /* ---------- process ---------- */
  .x-steps { --progress: 0; position: relative; display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
  .x-steps::before, .x-steps::after { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
  .x-steps::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--progress)); }
  .x-steps li { position: relative; padding-left: 2.5rem; }
  .x-step-dot { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule-strong); z-index: 1; transition: background .3s, border-color .3s; }
  .x-steps li.is-on .x-step-dot { background: var(--ink); border-color: var(--ink); }
  .x-step-n { display: block; font: 500 .8rem ui-monospace, Menlo, monospace; color: var(--slate); margin-bottom: .35rem; }
  .x-steps h3 { margin-bottom: .4rem; }
  .x-steps p { color: var(--slate); font-size: var(--text-s); }
  @media (min-width: 900px) {
    .x-steps { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
    .x-steps::before, .x-steps::after { left: 8px; right: 8px; top: 7px; bottom: auto; width: auto; height: 2px; }
    .x-steps::after { transform-origin: left; transform: scaleX(var(--progress)); }
    .x-steps li { padding: 2.5rem 0 0; }
  }

  /* ---------- ground rules ---------- */
  .x-rules { background: var(--stone); }
  .x-rules-grid { display: grid; gap: 2.5rem 4rem; }
  @media (min-width: 980px) { .x-rules-grid { grid-template-columns: 2fr 3fr; } }
  .x-rules h2 { font-size: var(--h2); line-height: 1.1; }
  .x-rule-list { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); counter-reset: r; }
  @media (min-width: 640px) { .x-rule-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
  .x-rule-list > div { counter-increment: r; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
  .x-rule-list dt { font-weight: 600; margin-bottom: .35rem; }
  .x-rule-list dt::before { content: counter(r, decimal-leading-zero) "  "; font: 500 .8rem ui-monospace, Menlo, monospace; color: var(--slate); white-space: pre; }
  .x-rule-list dd { margin: 0; color: var(--slate); font-size: var(--text-s); }

  /* ---------- articles ---------- */
  .x-article-grid { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 900px) { .x-article-grid { grid-template-columns: repeat(3, 1fr); } }
  .x-article-grid a { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.5rem; border: 1px solid var(--rule); border-radius: 6px; color: var(--ink); text-decoration: none; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
  .x-article-grid a:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 12px 28px -18px rgba(15, 30, 46, .45); }
  .x-article-grid h3 { font: 600 1.3rem/1.2 var(--serif); }
  .x-article-grid p { color: var(--slate); font-size: var(--text-s); }
  .x-article-grid .meta { font: 500 .8rem ui-monospace, Menlo, monospace; color: var(--slate); }

  /* ---------- closing ---------- */
  .x-close { position: relative; overflow: hidden; background: var(--paper); border-top: 1px solid var(--rule); padding-block: clamp(4rem, 9vw, 7rem); }
  .x-close-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
  .x-close-lines path { fill: none; stroke: var(--rule); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
  .x-close-lines circle { fill: var(--pencil); animation-duration: 6s; }
  .x-close-in { position: relative; max-width: 44rem; text-align: center; }
  .x-close h2 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); line-height: 1.02; }
  .x-close p { margin: 1.25rem auto 0; font-size: var(--text-l); max-width: 36em; }
  .x-close .actions { justify-content: center; margin-top: 2rem; }

  /* ---------- motion control ---------- */
  [data-live]:not(.is-live) :is(.pkt, .p, .link-pkt, .x-close-lines circle, .spin, .core-halo, .cursor, .pill.dst rect, .sc, .x-tile *),
  .is-paused :is(.pkt, .p, .link-pkt, .x-close-lines circle, .spin, .core-halo, .cursor, .pill.dst rect, .sc, .x-marquee-track, .x-tile *) { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .page-home *, .page-home *::before, .page-home *::after { animation: none !important; transition: none !important; }
    .x-hero-copy > *, .pill, .x-chat .b, .intake .fields g, .intake .ledger-card, .chase .msg, .match .exc { opacity: 1 !important; transform: none !important; }
    .switchboard .wire, .match .pairs path, .chase .track-on { stroke-dashoffset: 0 !important; }
    .report .bar { transform: none !important; }
    .v-rowinv .ln { transform: none !important; } .v-rowinv :is(.tot, .stamp), .v-ticks :is(.m, .t, .q text), .v-phone .row.new { opacity: 1 !important; }
    .v-ticks .j { stroke-dashoffset: 0 !important; } .v-loop .p { opacity: 0 !important; }
    .switchboard .pkt, .x-anim .p, .x-card .p, .link-pkt, .x-close-lines circle { opacity: 0 !important; }
    .x-marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
    .x-marquee-track li:nth-child(n + 12) { display: none; }
  }
}

/* ---------- light skin, after qelo.co.za: white ground on a faint grid, tight sans
   headings, grey stage panels holding white product windows. Overrides the above. ---------- */
@layer pages {
  .page-home { --q-ground: #fff; --q-grid: rgba(15, 30, 46, .028); --q-line: #E7E8EA; --q-line-2: #D6D8DC; --q-ink-3: #5F6B76;
    --q-surface-2: #F7F8F8; --q-surface-3: #F1F2F3;
    --q-shadow-win: 0 18px 48px -18px rgba(15, 30, 46, .30); --q-shadow-sheet: 0 18px 40px -16px rgba(15, 30, 46, .18), 0 1px 6px rgba(0, 0, 0, .04);
    background: var(--q-ground); }
  .page-home main { background-color: var(--q-ground);
    background-image: linear-gradient(var(--q-grid) 1px, transparent 1px), linear-gradient(90deg, var(--q-grid) 1px, transparent 1px);
    background-size: 10px 10px; }
  .page-home main h1, .page-home main h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -.04em; }
  .page-home main h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem) !important; line-height: 1.06 !important; }
  .page-home main h3 { letter-spacing: -.015em; }
  .page-home .x-eyebrow { font: 600 .8125rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--pencil); }

  /* buttons: a dark "key" and a soft white one */
  .page-home .x-key, .page-home .x-close .button:not(.ghost) { border: 0; border-radius: 12px; padding: .9rem 1.35rem;
    background: linear-gradient(#33414F, #1B2A39 55%, #0F1E2E); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 2px rgba(15, 30, 46, .25), 0 6px 16px -6px rgba(15, 30, 46, .45);
    transition: transform .2s var(--ease), box-shadow .2s; }
  .page-home .x-key:hover, .page-home .x-close .button:not(.ghost):hover { transform: translateY(-1px); background: linear-gradient(#3B4A59, #20303F 55%, #13222F); }
  .page-home .x-soft, .page-home .x-close .button.ghost { border: 1px solid var(--q-line-2); border-radius: 12px; padding: .9rem 1.35rem; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 30, 46, .05); }
  .page-home .x-soft:hover, .page-home .x-close .button.ghost:hover { background: var(--q-surface-2); }
  .page-home .x-soft::after { content: " \2193"; }

  /* stage: the grey ribbed panel, and the white window inside it */
  .x-stage { position: relative; padding: clamp(14px, 3.2vw, 44px) clamp(14px, 3.2vw, 44px) 0; border-radius: 20px; overflow: hidden;
    background:
      radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, .9), transparent 70%),
      repeating-linear-gradient(90deg, rgba(15, 30, 46, .035) 0 1px, transparent 1px 7px, rgba(255, 255, 255, .55) 7px 9px, transparent 9px 14px),
      linear-gradient(180deg, #ECEEEF, #DFE2E4); }
  .x-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 56px; background: linear-gradient(transparent, rgba(223, 226, 228, .9)); pointer-events: none; }
  .x-window { position: relative; background: #fff; border: 1px solid var(--q-line); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: var(--q-shadow-win); overflow: hidden; }
  .x-win-bar { display: flex; align-items: center; gap: 6px; padding: .6rem .9rem; border-bottom: 1px solid var(--q-line); background: var(--q-surface-2); }
  .x-win-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--q-line-2); }
  .x-win-bar b { flex: 1; margin-right: 33px; text-align: center; font: 500 .75rem var(--sans); color: var(--q-ink-3); }

  /* hero: light, centred, diagram on a stage below */
  .x-hero { background: transparent; color: var(--ink); padding-top: clamp(3.5rem, 8vw, 6.5rem); }
  .x-hero-grid, .x-hero::before { display: none; }
  .x-hero-inner { display: block; }
  .x-hero-copy { max-width: 48rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
  .x-kicker { border-color: var(--q-line-2); background: #fff; color: var(--q-ink-3); box-shadow: 0 1px 2px rgba(15, 30, 46, .05); }
  .x-led { background: var(--pencil); }
  .x-hero h1 { margin-inline: auto; max-width: 14ch; color: var(--ink); font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem); line-height: 1; letter-spacing: -.05em; }
  .x-hero h1 em { font-style: normal; color: var(--pencil); }
  .x-hero .lede { margin-inline: auto; color: var(--q-ink-3); }
  .x-hero .actions { justify-content: center; }
  .x-hero-fig { padding: clamp(1rem, 3vw, 2.5rem) clamp(.75rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); }
  .switchboard.wide { max-width: 860px; margin-inline: auto; }
  .switchboard text { fill: var(--ink); }
  .pill rect { fill: #fff; stroke: var(--q-line-2); filter: drop-shadow(0 1px 1.5px rgba(15, 30, 46, .08)); }
  .pill-dot { fill: var(--q-line-2); }
  .pill.dst .pill-dot { fill: var(--pencil); }
  @keyframes x-ping { 0%, 6% { stroke: var(--pencil); } 22%, 100% { stroke: var(--q-line-2); } }
  .switchboard .wire { stroke: var(--q-line-2); }
  .switchboard .pkt { fill: var(--ink); filter: none; }
  .switchboard .pkt.out { fill: var(--pencil); }
  .core-halo { fill: rgba(28, 122, 74, .07); }
  .core-ring { stroke: var(--pencil); }
  .core-disc { fill: var(--ink); }
  .x-ticker { max-width: 860px; margin: 1.25rem auto 0; border-color: var(--q-line); background: var(--q-surface-2); color: var(--ink); }
  .x-ticker-label { background: #fff; border: 1px solid var(--q-line); color: var(--q-ink-3); }
  .x-marquee { margin-top: clamp(2rem, 4vw, 3rem); border-top: 0; }
  .x-marquee-track li { color: var(--q-ink-3); }
  .x-marquee-track li::before { background: var(--q-line-2); }

  /* sections sit on the grid; panels carry the grey */
  .x-show, .x-builds, .x-rules { background: transparent; }
  .x-gap-fig { border: 0; border-radius: 20px; background: linear-gradient(180deg, #F1F2F3, #E6E8EA); padding: clamp(1rem, 3vw, 2.25rem); }
  .x-gap-fig .win > rect:first-child { fill: #fff; stroke: var(--q-line); filter: drop-shadow(0 10px 18px rgba(15, 30, 46, .10)); }
  .x-gap-fig .win-bar { fill: var(--q-surface-3); }
  .x-gap-fig .win > text { fill: var(--ink); }
  .x-gap-fig .rows rect { fill: var(--q-surface-2); }
  .x-switch { background: #fff; border-color: var(--q-line-2); box-shadow: 0 1px 2px rgba(15, 30, 46, .05); }
  .x-switch-btn[aria-pressed="true"] { background: linear-gradient(#33414F, #0F1E2E); }

  .x-tabs { border: 0; border-radius: 20px; padding: clamp(10px, 2vw, 18px); background: linear-gradient(180deg, #F1F2F3, #E4E7E9); overflow: visible; }
  .x-tablist { gap: 6px; border: 0; margin-bottom: clamp(10px, 2vw, 18px); }
  .x-tablist button { border: 0 !important; border-radius: 10px; padding: .85rem 1rem; background: transparent; color: var(--q-ink-3); }
  .x-tablist button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 30, 46, .08), 0 0 0 1px var(--q-line); }
  .x-tablist .bar { left: 12px; right: 12px; width: auto; bottom: 6px; height: 2px; border-radius: 2px; background: var(--pencil); }
  .x-panel { background: #fff; border: 1px solid var(--q-line); border-radius: 12px; box-shadow: var(--q-shadow-sheet); }
  .x-panel h3 { font-family: var(--sans); letter-spacing: -.03em; }
  .intake .ledger-card > rect { fill: #fff; stroke: var(--q-line-2); filter: drop-shadow(0 10px 16px rgba(15, 30, 46, .12)); }
  .intake .ledger-card text { fill: var(--ink); }
  .intake .ledger-card .h { fill: var(--ink); font-family: var(--sans); letter-spacing: -.02em; }
  .intake .clip text { fill: var(--q-ink-3); }
  .intake .clip path { stroke: var(--pencil); }
  .intake .ok { fill: var(--pencil); } .intake .okt { stroke: #fff; }
  .intake .scan { fill: var(--pencil); }
  .report .frame { fill: var(--q-surface-2); stroke: var(--q-line); }
  .report .chart text { fill: var(--ink); }
  .report .base { stroke: var(--q-line-2); }
  .report .bar { fill: #C9D3DB; } .report .bar.hi { fill: var(--pencil); }
  .match .exc rect { fill: #FFF1EF; stroke: rgba(180, 35, 24, .35); } .match .exc text { fill: var(--alert); }
  .chase .msg.reply rect { fill: var(--pencil); stroke: var(--pencil); }

  .x-tile { border-color: var(--q-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(15, 30, 46, .04); }
  .x-tile:hover { box-shadow: var(--q-shadow-sheet); }
  .x-tile.t-light { background: linear-gradient(180deg, #F1F2F3, #E6E8EA); border-color: transparent; }
  .t-glow { background: radial-gradient(120% 90% at 100% 0%, #EEF4F0, transparent 60%), #fff; }
  .v-phone .body { fill: #24323F; }
  .x-tile-txt h3 { font-size: 1.25rem; }

  .x-brands { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto clamp(3.5rem, 7vw, 6rem); gap: 1rem; }
  .x-brand { border: 1px solid var(--q-line) !important; border-radius: 20px; padding: clamp(2rem, 5vw, 3.5rem); }
  .x-brand.dash { background: #fff; }
  .x-brand.qelo { background: radial-gradient(90% 70% at 85% 10%, rgba(123, 92, 168, .10), transparent 65%), #FAF8FC; }
  .x-brand-name { font-family: var(--sans); letter-spacing: -.045em; }
  .x-clocks li { border-color: var(--q-line); border-radius: 12px; background: var(--q-surface-2); }
  .c-time { font-family: var(--sans); letter-spacing: -.03em; }
  .x-chat { box-shadow: var(--q-shadow-sheet); border-color: #ECE7F3; }

  .x-steps::after { background: var(--pencil); }
  .x-steps li.is-on .x-step-dot { background: var(--pencil); border-color: var(--pencil); }
  .x-step-dot { background: #fff; }
  .x-step-n { color: var(--pencil); }

  .x-rule-list { border-top-color: var(--q-line-2); border-bottom: 0; }
  .x-rule-list > div { border-bottom-color: var(--q-line); }
  .x-rule-list dt::before { color: var(--pencil); }

  .x-article-grid a { background: #fff; border-color: var(--q-line); border-radius: 16px; }
  .x-article-grid a:hover { border-color: var(--q-line-2); box-shadow: var(--q-shadow-sheet); }
  .x-article-grid h3 { font-family: var(--sans); letter-spacing: -.025em; }

  .x-close { background: transparent; border-top: 0; }
  .x-close-in { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem); border-radius: 20px; background: rgba(255, 255, 255, .85); border: 1px solid var(--q-line); box-shadow: var(--q-shadow-sheet); backdrop-filter: blur(2px); }
  .x-close h2 { letter-spacing: -.05em; }
}