/* ============================================================================
   PayFlow — the "Signal" landing theme
   ----------------------------------------------------------------------------
   Loaded after app.css, and only on the front page when this theme is chosen.
   Everything is scoped under .site--signal so the shared tokens it overrides —
   ink, surface, line — cannot follow a merchant into the dashboard.

   The idea: the one thing that matters in this product is the second a customer
   approves a payment on their handset and the merchant is told. So that is the
   hero, running live, instead of a headline over a gradient. Everything else on
   the page is deliberately quiet so that one panel is the thing people remember.

   Colour is midnight blue rather than black — this is a night in a Pakistani
   city, not a terminal — with warm gold for money and the primary action, and
   jade used only where the product genuinely means "completed". Jade is never
   decoration; if it is on the screen, a payment succeeded.

   Motion rule: the static page is the FINISHED state. Every animation is
   layered on inside a prefers-reduced-motion guard, so a visitor who has asked
   for less motion gets a complete, legible page rather than a frozen frame of
   one. This is also why nothing here fades in on scroll.
   ========================================================================= */

/* The one rule here that has to fight for it. app.css sets the page's colour on
   body.site — specificity (0,1,1) — so a bare .site--signal (0,1,0) loses and the
   theme renders as light text on a white page. Qualified with the element it is
   actually on, it ties and wins on source order, because this file loads second.
   Everything below is .site--signal .thing (0,2,0) and needs no such help. */
body.site--signal {
    /* ------------------------------------------------------------- palette */
    --sg-void:    #070b1c;   /* the page */
    --sg-deep:    #0e1533;   /* raised panels */
    --sg-raise:   #151d42;   /* panels on panels */
    --sg-line:    #212c5c;
    --sg-line-lit:#33417e;

    --sg-paper:   #eaeeff;   /* primary text */
    --sg-mute:    #9aa5d0;   /* secondary text */
    --sg-faint:   #6b76a3;   /* tertiary, still AA on --sg-void */

    --sg-gold:    #ffc24b;   /* money, and the one primary action */
    --sg-gold-dk: #d99a1f;
    --sg-jade:    #21d4a0;   /* completed. never decorative */
    --sg-rose:    #ff6b8a;   /* the Jazz rail */

    --sg-glow:    0 0 0 1px rgba(255, 194, 75, .22), 0 18px 60px -12px rgba(255, 194, 75, .28);
    --sg-panel:   0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 70px -30px rgba(0, 0, 0, .9);

    background: var(--sg-void);
    color: var(--sg-paper);
}

/* A single faint rail grid. Fixed, so the page appears to move over it rather
   than the grid scrolling as another layer of decoration. */
body.site--signal::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 78% -8%, rgba(255, 194, 75, .10), transparent 70%),
        radial-gradient(700px 460px at 8% 12%, rgba(33, 212, 160, .07), transparent 72%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 96px);
}

/* The three containers the layout puts in the body, named one at a time rather
   than as `> *`. The blanket version also caught the skip link, which positions
   itself absolutely and is only off-screen because of that: made relative it
   became a flex item of body.site, stretched to the full column width, and its
   left offset then pushed the document 12px wider than the viewport — a
   horizontal scrollbar on every phone, and a skip link that reserved a gap above
   the header. A future body child that needs raising should be added here on
   purpose. */
body.site--signal > .site__bar,
body.site--signal > .site__main,
body.site--signal > .site__foot { position: relative; z-index: 1; }

/* ------------------------------------------------------------ site chrome */

.site--signal .site__bar {
    background: rgba(7, 11, 28, .72);
    border-bottom: 1px solid var(--sg-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.site--signal .brandmark { color: var(--sg-paper); }
.site--signal .brandmark__dot { background: var(--sg-gold); box-shadow: 0 0 14px var(--sg-gold); }

.site--signal .site__link { color: var(--sg-mute); }
.site--signal .site__link:hover,
.site--signal .site__link.is-current { color: var(--sg-paper); }

.site--signal .site__foot {
    background: transparent;
    border-top: 1px solid var(--sg-line);
    color: var(--sg-faint);
}
.site--signal .site__foot a { color: var(--sg-mute); }
.site--signal .site__foot a:hover { color: var(--sg-gold); }
.site--signal .faint { color: var(--sg-faint); }

/* Buttons. Gold is the primary action and appears nowhere else as a fill. */
.site--signal .btn {
    background: var(--sg-gold);
    border-color: var(--sg-gold);
    color: #241a02;
    font-weight: 650;
}
.site--signal .btn:hover { background: #ffcf6d; border-color: #ffcf6d; }

.site--signal .btn--ghost {
    background: transparent;
    border-color: var(--sg-line-lit);
    color: var(--sg-paper);
}
.site--signal .btn--ghost:hover { border-color: var(--sg-gold); color: var(--sg-gold); background: transparent; }

.site--signal a:focus-visible,
.site--signal .btn:focus-visible,
.site--signal summary:focus-visible {
    outline: 2px solid var(--sg-gold);
    outline-offset: 3px;
    box-shadow: none;
}

/* ------------------------------------------------------------------- type */

.site--signal .sg-wrap {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

.site--signal .sg-section { padding-block: clamp(56px, 9vw, 116px); }
.site--signal .sg-section + .sg-section { border-top: 1px solid var(--sg-line); }

.site--signal h1,
.site--signal h2,
.site--signal h3 { color: var(--sg-paper); }

.site--signal .sg-h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 750;
    margin: 0 0 var(--sp-3);
    max-width: 20ch;
}

.site--signal .sg-lede {
    color: var(--sg-mute);
    font-size: 1.06rem;
    line-height: 1.65;
    max-width: 62ch;
    margin: 0;
}

/* Figures are the personality of a money page: tabular, tight, and large. */
.site--signal .sg-fig {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.02em;
}

/* ------------------------------------------------------------------- hero */

.site--signal .sg-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(48px, 8vw, 104px);
}

.site--signal .sg-hero__title {
    font-size: clamp(2.35rem, 6.2vw, 4.35rem);
    line-height: 1.02;
    letter-spacing: -.042em;
    font-weight: 800;
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
}

.site--signal .sg-hero__lede {
    color: var(--sg-mute);
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    line-height: 1.62;
    max-width: 52ch;
    margin: 0 0 var(--sp-6);
}

.site--signal .sg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

/* The fact strip. Three claims the rest of the page has to keep. */
.site--signal .sg-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    border-top: 1px solid var(--sg-line);
    padding-top: var(--sp-5);
    margin: 0;
}

.site--signal .sg-fact__n {
    display: block;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 750;
    color: var(--sg-gold);
    line-height: 1.1;
}

/* margin: 2px 0 0 rather than margin-top, because this is a <dd> and the browser
   gives those a 40px start indent of their own. Left in, the figure above sits at
   the edge and its label sits inset from it, which reads as a mistake. */
.site--signal .sg-fact__t {
    display: block;
    color: var(--sg-faint);
    font-size: .875rem;
    line-height: 1.45;
    margin: 2px 0 0;
}

/* ------------------------------------------- the authorisation panel (hero) */

.site--signal .sg-auth {
    position: relative;
    background: linear-gradient(168deg, var(--sg-deep), #0a0f26);
    border: 1px solid var(--sg-line);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 30px);
    box-shadow: var(--sg-panel);
}

/* The glow is motivated: it is the panel's own light, and it pulses in time
   with the authorisation rather than sitting there as decoration. */
.site--signal .sg-auth::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: var(--sg-glow);
    opacity: .55;
}

.site--signal .sg-auth__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.site--signal .sg-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--sg-mute);
}

.site--signal .sg-live__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sg-jade);
    box-shadow: 0 0 0 4px rgba(33, 212, 160, .16);
}

.site--signal .sg-auth__ref {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--sg-faint);
}

.site--signal .sg-auth__amount {
    font-size: clamp(2.1rem, 4.6vw, 3rem);
    font-weight: 780;
    line-height: 1;
    margin: 0;
}

.site--signal .sg-auth__cur {
    font-size: .42em;
    font-weight: 600;
    color: var(--sg-faint);
    margin-right: .35em;
    vertical-align: .28em;
    letter-spacing: 0;
}

/* The decimals, which trail the figure rather than lead it. */
.site--signal .sg-auth__cur--after {
    margin-right: 0;
    margin-left: .1em;
}

.site--signal .sg-auth__who {
    color: var(--sg-faint);
    font-size: .88rem;
    margin: 6px 0 var(--sp-6);
}

/* -- the rail: three stages a real payment actually passes through --------- */

.site--signal .sg-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    margin: 0 0 var(--sp-6);
    padding: 0;
    list-style: none;
    counter-reset: none;
}

/* The track the pulse runs along, behind the nodes. */
.site--signal .sg-rail::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 9px;
    height: 2px;
    background: var(--sg-line);
    border-radius: 2px;
}

.site--signal .sg-stage {
    position: relative;
    text-align: center;
    padding-top: 26px;
}

.site--signal .sg-stage__node {
    position: absolute;
    top: 2px;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--sg-raise);
    border: 2px solid var(--sg-jade);
    box-shadow: 0 0 0 4px rgba(33, 212, 160, .14);
}

.site--signal .sg-stage__node::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--sg-jade);
}

.site--signal .sg-stage__name {
    display: block;
    font-size: .82rem;
    font-weight: 640;
    color: var(--sg-paper);
    line-height: 1.3;
}

.site--signal .sg-stage__sub {
    display: block;
    font-size: .74rem;
    color: var(--sg-faint);
    line-height: 1.35;
    margin-top: 1px;
}

/* -- the split: what the merchant is left with ----------------------------- */

.site--signal .sg-split {
    border-top: 1px solid var(--sg-line);
    padding-top: var(--sp-4);
    display: grid;
    gap: 10px;
}

.site--signal .sg-split__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: .92rem;
}

.site--signal .sg-split__k { color: var(--sg-mute); }
.site--signal .sg-split__v { font-weight: 640; }
.site--signal .sg-split__row--net .sg-split__k { color: var(--sg-paper); font-weight: 640; }
.site--signal .sg-split__row--net .sg-split__v { color: var(--sg-jade); font-weight: 760; font-size: 1.06rem; }

/* --------------------------------------------------------------- the rails */

.site--signal .sg-methods {
    display: grid;
    gap: 0;
    margin-top: var(--sp-6);
    border-top: 1px solid var(--sg-line);
}

.site--signal .sg-method {
    display: grid;
    grid-template-columns: 56px minmax(0, 15rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-2);
    border-bottom: 1px solid var(--sg-line);
    transition: background .18s ease, padding-left .18s ease;
}

.site--signal .sg-method:hover {
    background: rgba(255, 255, 255, .022);
    padding-left: var(--sp-4);
}

.site--signal .sg-method__mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--sg-raise);
    border: 1px solid var(--sg-line-lit);
    font-weight: 720;
    font-size: .84rem;
    letter-spacing: .01em;
}

.site--signal .sg-method__mark--bad  { color: var(--sg-rose); }
.site--signal .sg-method__mark--ok   { color: var(--sg-jade); }
.site--signal .sg-method__mark--info { color: #7fb2ff; }
.site--signal .sg-method__mark--logo { padding: 5px; background: #fff; }

.site--signal .sg-method__name { font-size: 1.12rem; font-weight: 680; margin: 0; }
.site--signal .sg-method__text { color: var(--sg-mute); margin: 0; font-size: .96rem; line-height: 1.6; }

/* -------------------------------------------------------------- the price */

.site--signal .sg-price {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
    margin-top: var(--sp-6);
}

.site--signal .sg-price__figure {
    font-size: clamp(4.5rem, 13vw, 8.5rem);
    font-weight: 820;
    line-height: .86;
    letter-spacing: -.055em;
    color: var(--sg-gold);
    margin: 0;
}

.site--signal .sg-price__unit { font-size: .38em; vertical-align: .62em; margin-left: .04em; letter-spacing: -.02em; }

.site--signal .sg-price__cap {
    color: var(--sg-mute);
    margin: var(--sp-3) 0 0;
    font-size: .98rem;
    max-width: 26ch;
}

.site--signal .sg-work {
    background: var(--sg-deep);
    border: 1px solid var(--sg-line);
    border-radius: 16px;
    padding: clamp(20px, 3vw, 28px);
}

.site--signal .sg-work__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--sg-line);
}

.site--signal .sg-work__title { font-size: 1rem; font-weight: 640; margin: 0; }
.site--signal .sg-work__tag { font-size: .8rem; color: var(--sg-faint); font-family: var(--mono); }

/* The bar is the arithmetic, drawn.
 *
 * The width comes from a class rather than a style attribute, because every
 * document this platform serves carries style-src 'self' with no 'unsafe-inline'
 * — a computed inline width would be dropped by the browser and the bar would
 * render as a single flat colour on the live site while looking correct locally.
 *
 * So the fee's share is rounded to a whole percent by the template and picks one
 * of these, up to PlatformSettings::MAX_FEE_PERCENT. The net segment takes what
 * is left with flex, so only one number is ever stated twice. */
.site--signal .sg-bar {
    display: flex;
    height: 12px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--sg-raise);
    margin-bottom: var(--sp-4);
}

.site--signal .sg-bar__net {
    flex: 1 1 auto;
    background: linear-gradient(90deg, var(--sg-jade), #4ae3b8);
}

.site--signal .sg-bar__fee {
    flex: none;
    background: linear-gradient(90deg, var(--sg-gold-dk), var(--sg-gold));
}

.site--signal .sg-bar--f1  .sg-bar__fee { width: 1%; }
.site--signal .sg-bar--f2  .sg-bar__fee { width: 2%; }
.site--signal .sg-bar--f3  .sg-bar__fee { width: 3%; }
.site--signal .sg-bar--f4  .sg-bar__fee { width: 4%; }
.site--signal .sg-bar--f5  .sg-bar__fee { width: 5%; }
.site--signal .sg-bar--f6  .sg-bar__fee { width: 6%; }
.site--signal .sg-bar--f7  .sg-bar__fee { width: 7%; }
.site--signal .sg-bar--f8  .sg-bar__fee { width: 8%; }
.site--signal .sg-bar--f9  .sg-bar__fee { width: 9%; }
.site--signal .sg-bar--f10 .sg-bar__fee { width: 10%; }
.site--signal .sg-bar--f11 .sg-bar__fee { width: 11%; }
.site--signal .sg-bar--f12 .sg-bar__fee { width: 12%; }
.site--signal .sg-bar--f13 .sg-bar__fee { width: 13%; }
.site--signal .sg-bar--f14 .sg-bar__fee { width: 14%; }
.site--signal .sg-bar--f15 .sg-bar__fee { width: 15%; }
.site--signal .sg-bar--f16 .sg-bar__fee { width: 16%; }
.site--signal .sg-bar--f17 .sg-bar__fee { width: 17%; }
.site--signal .sg-bar--f18 .sg-bar__fee { width: 18%; }
.site--signal .sg-bar--f19 .sg-bar__fee { width: 19%; }
.site--signal .sg-bar--f20 .sg-bar__fee { width: 20%; }

.site--signal .sg-rows { display: grid; gap: 12px; margin: 0; }
.site--signal .sg-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.site--signal .sg-row__k { color: var(--sg-mute); font-size: .94rem; display: flex; align-items: center; gap: 9px; }
.site--signal .sg-row__v { font-weight: 640; font-size: .98rem; margin: 0; }

.site--signal .sg-key {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: none;
}
.site--signal .sg-key--net { background: var(--sg-jade); }
.site--signal .sg-key--fee { background: var(--sg-gold); }

.site--signal .sg-row--total {
    border-top: 1px solid var(--sg-line);
    padding-top: 12px;
    margin-top: 2px;
}
.site--signal .sg-row--total .sg-row__k { color: var(--sg-paper); font-weight: 640; }
.site--signal .sg-row--total .sg-row__v { color: var(--sg-jade); font-weight: 780; font-size: 1.14rem; }

.site--signal .sg-note {
    color: var(--sg-faint);
    font-size: .86rem;
    line-height: 1.6;
    margin: var(--sp-4) 0 0;
}

/* --------------------------------------------------------- the integration */

.site--signal .sg-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}

.site--signal .sg-panel {
    background: var(--sg-deep);
    border: 1px solid var(--sg-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.site--signal .sg-panel__head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--sg-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.site--signal .sg-panel__head h3 { margin: 0; font-size: 1.02rem; font-weight: 660; }
.site--signal .sg-panel__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); flex: 1; }

.site--signal .sg-panel pre {
    background: #060a18;
    border: 1px solid var(--sg-line);
    border-radius: 11px;
    padding: var(--sp-4);
    margin: 0;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.65;
    color: #c9d4ff;
}

.site--signal .sg-panel pre code { color: inherit; background: none; padding: 0; font: inherit; }
.site--signal .sg-panel p { margin: 0; color: var(--sg-mute); font-size: .95rem; line-height: 1.62; }
.site--signal .sg-panel .sg-note { margin: 0; }

/* ------------------------------------------------------------------- FAQ */

.site--signal .sg-faq { margin-top: var(--sp-6); border-top: 1px solid var(--sg-line); }

.site--signal .sg-faq__item { border-bottom: 1px solid var(--sg-line); }

.site--signal .sg-faq__q {
    cursor: pointer;
    padding: var(--sp-5) var(--sp-6) var(--sp-5) 0;
    font-weight: 620;
    font-size: 1.02rem;
    list-style: none;
    position: relative;
    color: var(--sg-paper);
}

.site--signal .sg-faq__q::-webkit-details-marker { display: none; }

/* A plus that becomes a minus: motion that answers the reader's own action. */
.site--signal .sg-faq__q::after,
.site--signal .sg-faq__q::before {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 13px;
    height: 2px;
    background: var(--sg-gold);
    border-radius: 2px;
    transition: transform .22s ease;
}
.site--signal .sg-faq__q::before { transform: rotate(90deg); }
.site--signal .sg-faq__item[open] .sg-faq__q::before { transform: rotate(0deg); }

.site--signal .sg-faq__a {
    padding: 0 var(--sp-6) var(--sp-5) 0;
    color: var(--sg-mute);
    max-width: 74ch;
    line-height: 1.68;
}

.site--signal .sg-faq__a code {
    font-family: var(--mono);
    font-size: .86em;
    background: var(--sg-raise);
    border: 1px solid var(--sg-line);
    border-radius: 5px;
    padding: 1px 5px;
    color: var(--sg-paper);
}

.site--signal .sg-faq__more { color: var(--sg-faint); margin-top: var(--sp-5); }
.site--signal .sg-faq__more a,
.site--signal .sg-panel a,
.site--signal .sg-lede a { color: var(--sg-gold); }

/* ------------------------------------------------------------------- CTA */

.site--signal .sg-cta { text-align: center; padding-block: clamp(64px, 10vw, 128px); }

.site--signal .sg-cta__title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    margin: 0 auto var(--sp-4);
    max-width: 17ch;
    text-wrap: balance;
}

.site--signal .sg-cta__lede { color: var(--sg-mute); max-width: 52ch; margin: 0 auto var(--sp-6); line-height: 1.62; }
.site--signal .sg-cta__fine { color: var(--sg-faint); font-size: .88rem; margin: var(--sp-5) 0 0; }
.site--signal .sg-cta__fine a { color: var(--sg-mute); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 960px) {
    .site--signal .sg-hero,
    .site--signal .sg-price,
    .site--signal .sg-code-grid { grid-template-columns: minmax(0, 1fr); }

    .site--signal .sg-hero { padding-block: var(--sp-7); }
    .site--signal .sg-price__figure { font-size: clamp(4rem, 22vw, 6rem); }
}

@media (max-width: 620px) {
    .site--signal .sg-method {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: var(--sp-4) var(--sp-4);
        row-gap: 6px;
    }
    .site--signal .sg-method__text { grid-column: 1 / -1; }
    .site--signal .sg-facts { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
    .site--signal .sg-stage__sub { display: none; }
}

/* ============================================================================
   Motion — the single orchestrated moment.

   Everything above renders the completed state. Only inside this guard does
   the panel rewind and play: the pulse runs the rail, the three stages light
   in the order a payment really reaches them, and the split arrives with the
   webhook. One loop, one place on the page, nothing on scroll.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

    /* The pulse travelling the rail. */
    .site--signal .sg-rail__pulse {
        position: absolute;
        top: 5px;
        left: 8%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--sg-gold);
        box-shadow: 0 0 16px 3px rgba(255, 194, 75, .75);
        animation: sg-travel 7.2s cubic-bezier(.65, 0, .35, 1) infinite;
    }

    @keyframes sg-travel {
        0%,  6%   { left: 8%;  opacity: 0; }
        10%       { left: 8%;  opacity: 1; }
        44%       { left: 50%; opacity: 1; }
        78%       { left: 92%; opacity: 1; }
        86%, 100% { left: 92%; opacity: 0; }
    }

    /* Each stage waits its turn, then stays lit until the loop resets. */
    .site--signal .sg-stage__node {
        border-color: var(--sg-line-lit);
        box-shadow: 0 0 0 4px rgba(51, 65, 126, .18);
        animation: sg-light 7.2s ease-in-out infinite;
    }
    .site--signal .sg-stage__node::after { background: var(--sg-line-lit); animation: sg-fill 7.2s ease-in-out infinite; }

    .site--signal .sg-stage:nth-child(2) .sg-stage__node,
    .site--signal .sg-stage:nth-child(2) .sg-stage__node::after { animation-delay: 1.15s; }
    .site--signal .sg-stage:nth-child(3) .sg-stage__node,
    .site--signal .sg-stage:nth-child(3) .sg-stage__node::after { animation-delay: 2.3s; }

    @keyframes sg-light {
        0%, 9%    { border-color: var(--sg-line-lit); box-shadow: 0 0 0 4px rgba(51, 65, 126, .18); }
        16%       { border-color: var(--sg-jade);     box-shadow: 0 0 0 9px rgba(33, 212, 160, .26); }
        24%, 88%  { border-color: var(--sg-jade);     box-shadow: 0 0 0 4px rgba(33, 212, 160, .14); }
        97%, 100% { border-color: var(--sg-line-lit); box-shadow: 0 0 0 4px rgba(51, 65, 126, .18); }
    }

    @keyframes sg-fill {
        0%, 9%    { background: var(--sg-line-lit); transform: scale(.6); }
        18%, 88%  { background: var(--sg-jade);     transform: scale(1); }
        97%, 100% { background: var(--sg-line-lit); transform: scale(.6); }
    }

    .site--signal .sg-stage__name,
    .site--signal .sg-stage__sub { animation: sg-dim 7.2s ease-in-out infinite; }
    .site--signal .sg-stage:nth-child(2) .sg-stage__name,
    .site--signal .sg-stage:nth-child(2) .sg-stage__sub { animation-delay: 1.15s; }
    .site--signal .sg-stage:nth-child(3) .sg-stage__name,
    .site--signal .sg-stage:nth-child(3) .sg-stage__sub { animation-delay: 2.3s; }

    @keyframes sg-dim {
        0%, 9%    { opacity: .34; }
        20%, 88%  { opacity: 1; }
        97%, 100% { opacity: .34; }
    }

    /* The money lands when the third stage does — you are told the moment it
       completes, which is the claim the panel is there to make. */
    .site--signal .sg-split { animation: sg-settle 7.2s ease-in-out infinite; }

    @keyframes sg-settle {
        0%, 34%   { opacity: 0; transform: translateY(9px); }
        46%, 88%  { opacity: 1; transform: translateY(0); }
        97%, 100% { opacity: 0; transform: translateY(9px); }
    }

    /* The panel's own light, breathing with the sequence. */
    .site--signal .sg-auth::after { animation: sg-breathe 7.2s ease-in-out infinite; }

    @keyframes sg-breathe {
        0%, 20%   { opacity: .3; }
        50%       { opacity: .85; }
        88%, 100% { opacity: .3; }
    }

    .site--signal .sg-live__dot { animation: sg-blink 2.4s ease-in-out infinite; }

    @keyframes sg-blink {
        0%, 100% { box-shadow: 0 0 0 4px rgba(33, 212, 160, .16); }
        50%      { box-shadow: 0 0 0 7px rgba(33, 212, 160, .04); }
    }

    /* The one entrance on the page, on first paint only: the hero panel
       arriving. Nothing else moves on load and nothing moves on scroll. */
    .site--signal .sg-auth { animation: sg-arrive .85s cubic-bezier(.16, 1, .3, 1) both; }

    @keyframes sg-arrive {
        from { opacity: 0; transform: translateY(18px) scale(.985); }
        to   { opacity: 1; transform: none; }
    }
}