/* GENERATED by scripts/fetch-fonts.mjs — do not edit. Pinned in scripts/fonts.lock.json. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("/fonts/archivo-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url("/fonts/instrument-sans-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url("/fonts/instrument-sans-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url("/fonts/instrument-sans-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- the reset the Artifact host used to supply ----------
   Rounds 1-8 were judged inside a Claude Artifact, whose wrapper injected its
   own <head> with a small reset. Porting the page out means we now own that,
   and the page's own body{} rule never set margin — so without this every
   browser adds its default 8px body margin, insetting the full-bleed heroes and
   shifting every 100svh calculation. Verified by diffing screenshots of the
   Artifact against the built page; see scripts/visual-diff.mjs.

   color-scheme:light is not cosmetic either: the apply block is the one light
   surface on the site and its inputs were approved rendering as light controls.
   Only the declarations the host actually made are reproduced here. */
:root{color-scheme:light}
body{margin:0;padding:0}
img{max-width:100%}
/* the three routes are toggled with the `hidden` attribute; !important so a
   future display rule on a [data-view] cannot un-hide two routes at once */
[hidden]:not([hidden=until-found i]){display:none!important}

/* ArxMade — achromatic. Every value from DESIGN-SYSTEM.md §3.
   Single-theme by decision: the brand is true black (SLOP.md §Colour,
   "commit to real black"). Painted explicitly so it holds on any host ground. */
:root{
  --ground:#000000;
  --ink:#FFFFFF;      /* 21.00:1 */
  --muted:#959595;    /*  7.01:1 */
  --faint:#767676;    /*  4.62:1 */
  --edge:#5B5B5B;     /*  3.09:1 — 18px+ only */
  --hairline:#262626;
  --raise:#0A0A0A;

  /* The one accent on the site — 2026-10-08, superseding "no accent colour at
     all" (2026-10-06). It means a call is live or has settled, and nothing
     else: never a border, a card, a heading, a link or a button. */
  --live:#4ADE80;

  /* the inverted block — same targets, measured against #FFFFFF */
  --ink-i:#000000;      /* 21.00:1 */
  --muted-i:#595959;    /*  7.00:1 */
  --faint-i:#757575;    /*  4.61:1 */
  --hairline-i:#D4D4D4;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gutter:clamp(1rem,5vw,4.5rem);
  --section:clamp(4.5rem,10vw,8rem);
}

*,*::before,*::after{box-sizing:border-box}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* `clip`, not `hidden`: overflow-x:hidden forces overflow-y to `auto`, which
     makes body its own scroll container and breaks scrollIntoView on anchors. */
  overflow-x:clip;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  font-stretch:125%;
  line-height:0.95;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
}

p{margin:0}
a{color:inherit}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--muted);
}

.rule{border:0;border-top:1px solid var(--hairline);margin:0}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--ground);
  border-bottom:1px solid var(--hairline);
}
.nav-in{
  display:flex;align-items:center;gap:1.25rem;
  padding-block:1rem;
}
.brand{display:flex;align-items:center;gap:0.65rem;margin-right:auto;text-decoration:none}
.brand-name{
  font-family:var(--display);font-weight:800;font-stretch:125%;
  font-size:15px;letter-spacing:0.26em;text-transform:uppercase;
}
.nav-links{display:none;gap:1.75rem}
.nav-links a{
  font-family:var(--mono);font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding-block:0.35rem;border-bottom:1px solid transparent;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
@media(min-width:900px){.nav-links{display:flex}}

/* mobile route switcher — the three pages must be reachable under 900px */
.nav-mob{display:flex;gap:0.4rem;padding-bottom:0.9rem;flex-wrap:wrap}
.nav-mob a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  border:1px solid var(--hairline);border-radius:999px;padding:0.4rem 0.9rem;
}
.nav-mob a[aria-current="page"]{color:var(--ground);background:var(--ink);border-color:var(--ink)}
@media(min-width:900px){.nav-mob{display:none}}

/* ---------- the mark ---------- */
/* Traced from ~/Downloads/arxmadelogo4k.png — 99.0% pixel IoU against the
   source. Three blades, no centre element. currentColor so one copy of the
   geometry serves the black nav and the inverted apply block alike. */
/* The spin is on the <svg> host, NOT on the .spin group inside the <symbol>.
   `<use>` clones into a shadow tree that document selectors cannot reach, so
   `.mark .spin{animation:...}` silently matched nothing and the mark never
   turned. Animating the host also gives per-instance control, which one shared
   symbol cannot. See DECISIONS.md 2026-10-08. */
.mark{
  width:28px;height:28px;display:block;color:inherit;flex:none;
  transform-origin:50% 50%;
  animation:rot 60s linear infinite;
}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- buttons ---------- */
.pill{
  display:inline-flex;align-items:center;gap:0.55rem;
  border-radius:999px;                 /* §6: pressable = pill */
  border:1px solid var(--ink);
  background:transparent;color:var(--ink);
  font-family:var(--mono);font-size:12px;letter-spacing:0.14em;
  text-transform:uppercase;
  padding:0.7rem 1.3rem;
  text-decoration:none;cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.pill:hover,.pill:focus-visible{background:var(--ink);color:var(--ground)}  /* §8: fill inverts */
.pill--solid{background:var(--ink);color:var(--ground)}
.pill--solid:hover,.pill--solid:focus-visible{background:transparent;color:var(--ink)}

/* ---------- touch: the hit area grows, the drawing does not ----------
   Measured on a 390px viewport: the mobile route pills come out 31.6px tall,
   the brand 28, the scroll cue 30.2, and both pill CTAs 43.56 -- all above
   WCAG 2.2 SC 2.5.8's normative 24px floor, all under Apple's 44px guidance.

   The painted boxes may NOT grow to fix that. The type scale is a committed
   DESIGN-SYSTEM decision, and the two Apply CTAs are held at pill scale on
   purpose -- promoting them moves the publishers card fan and the advertisers
   map. So the fix is a transparent overlay centred on the control: the thumb
   gets its 44px, every pixel on screen stays exactly where it was approved,
   and engine-diff confirms nothing moved in either engine.

   Only vertical room is claimed. These controls sit in rows with horizontal
   gaps of 0.4-0.9rem, and widening the overlays sideways would have them
   overlap and steal each other's taps.

   NOT scoped to (hover: none), deliberately. Playwright WebKit offers no way
   to force that media feature, so a rule hidden behind it could never be
   verified in the engine this harness exists to cover -- and an accessibility
   fix that only runs where it cannot be measured is a fix on trust. The
   overlay is transparent and claims at most 8px of vertical room, so a mouse
   loses nothing by having it too. */
.nav-mob a,.brand,.scrollcue,.pill,.tab{position:relative}
.nav-mob a::after,.brand::after,.scrollcue::after,.pill::after,.tab::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%);
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hairline)}
.hero-in{position:relative;padding-block:clamp(3.5rem,11vh,7rem)}
.wordmark{
  /* 11.2vw, not 11.5. At 390px the 11.5 setting made the word 363.9px wide
     inside a 351px content box: it overflowed its own container by 6.4px a
     side and left a 13.08px gutter, under the 16px floor, while the declared
     padding still read 19.5px. Measuring rendered text boxes rather than
     declared padding is what found it -- nothing about .wrap had changed.
     The cap is untouched, so every width from ~1071px up is identical. */
  font-size:clamp(2.6rem,11.2vw,7.5rem);
  font-weight:900;font-stretch:125%;
  letter-spacing:0.17em;
  margin:1.5rem 0 0;
  text-indent:0.17em;              /* balance the trailing tracking */
}
.hero-h{font-size:clamp(2rem,6vw,4rem);margin:1.4rem 0 0;max-width:16ch}
.hero-line{
  font-family:var(--display);font-weight:600;font-stretch:112%;
  font-size:clamp(1.15rem,2.8vw,1.75rem);
  line-height:1.25;max-width:22ch;margin-top:1.5rem;
}
.hero-sub{color:var(--muted);max-width:52ch;margin-top:1.1rem}

/* ---------- the home hero: one screen, centred — REF 02a ----------
   wordmark -> headline -> sub-line -> the fork -> SCROLL -> the verticals,
   all above the fold, which is RunAdvertise's exact arrangement. */
.hero--home .hero-in{
  /* the sticky nav occupies layout space above this, so a flat 100svh puts the
     verticals strip exactly one nav-height below the fold. --nav-h is measured. */
  min-height:calc(100svh - var(--nav-h, 76px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-block:clamp(4.5rem,10vh,6.5rem) clamp(1.25rem,3vh,2rem);
}
.hero--home .hero-line{max-width:none;margin-top:1.25rem}
.hero--home .hero-sub{max-width:62ch}
/* the trailing letter-space pulls centred text left by half a tracking unit;
   text-indent on a centred line shifts it right by half of its value. */
.hero--home .wordmark{text-indent:0.17em}

.signal{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
/* Darkens the MAP behind the copy. The z-index matters: a positioned
   pseudo-element is generated as the last child, so at auto z-index this scrim
   painted on top of .hero-in and veiled the text it was meant to protect. */
.hero--home::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 55% 50% at 50% 50%,rgba(0,0,0,0.40),transparent 100%);
}
.hero--home .hero-in{z-index:1}

.hero-foot{margin-top:auto;padding-top:clamp(1.75rem,5vh,3rem);width:100%}

.scrollcue{
  display:inline-flex;flex-direction:column;align-items:center;gap:0.55rem;
  text-decoration:none;color:var(--faint);
  font-family:var(--mono);font-size:10px;letter-spacing:0.32em;text-transform:uppercase;
  transition:color .18s ease;
}
.scrollcue:hover,.scrollcue:focus-visible{color:var(--ink)}
.scrollcue svg{width:22px;height:13px;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

.hero--home .strip{justify-content:center;border-top:0;margin-top:clamp(1.5rem,4vh,2.5rem);padding-top:0}

/* On a phone the hero's own content is what overflows, not the nav. Everything
   tightens so the verticals still sit under the arrow on the first screen. */
@media(max-width:759px){
  .hero--home .hero-in{padding-block:1.5rem 0.9rem}
  .hero--home .wordmark{margin-top:0.5rem}
  .hero--home .hero-line{margin-top:0.85rem}
  .hero--home .hero-sub{margin-top:0.8rem}
  .fork--hero{margin-top:1.5rem;gap:0.65rem}
  .hero-foot{padding-top:1rem}
  .hero--home .strip{margin-top:0.9rem;gap:0.3rem 0.75rem}
}

/* ---------- the home hero on a SHORT phone ----------
   The "verticals strip above the fold at 390" invariant was only ever
   verified at 390x844 -- the toolbars-COLLAPSED height. With Safari's
   toolbars expanded the viewport is ~664, and there the strip sat 128px
   below the fold: the hero wanted 684px inside 541px of room, and the
   mobile nav is 123px tall rather than 76 because the route pills take a
   second row.

   Scoped on max-height so it cannot touch the approved renderings: at
   390x844 and at 1440x900 not one of these rules applies, and engine-diff
   confirms those two unchanged.

   Everything here buys vertical room and nothing changes a type size, a
   colour or a radius. */
@media(max-width:900px) and (max-height:780px){
  .hero--home .hero-in{padding-block:0.75rem 0.5rem}
  .hero--home .wordmark{margin-top:0.2rem}
  .hero--home .hero-line{margin-top:0.4rem}
  .hero--home .hero-sub{margin-top:0.4rem}
  .fork--hero{margin-top:0.7rem;gap:0.45rem}
  /* The mark moves back BESIDE the text instead of stacking above it -- the
     desktop arrangement. Done with grid rather than a wrapper element: a
     wrapper lives in the HTML and would therefore change the 844 and 1440
     renderings too, which is the one thing this block exists not to do.
     The button keeps its width, its pill, its type and its audience line. */
  .fork-btn.expands{
    display:grid;grid-template-columns:auto 1fr;
    column-gap:0.8rem;row-gap:0.1rem;align-items:center;
    padding:0.7rem 1.3rem;
  }
  .fork-btn.expands .fork-mark{grid-row:1 / span 2;align-self:center}
  .fork-btn.expands b{grid-column:2;align-self:end}
  .fork-btn.expands .fork-reveal{grid-column:2;align-self:start}
  .fork-btn .fork-reveal{letter-spacing:0.08em;font-size:10px}
  .hero-foot{padding-top:0.2rem}
  .scrollcue{gap:0.25rem;font-size:9.5px;letter-spacing:0.26em}
  .scrollcue svg{width:18px;height:11px}
  .hero--home .strip{margin-top:0.4rem;gap:0.2rem 0.55rem}
}

/* ---------- the fork ---------- */
.fork{display:flex;flex-wrap:wrap;gap:0.9rem;margin-top:2.5rem}
.fork-btn{
  flex:1 1 260px;
  display:flex;flex-direction:column;gap:0.3rem;
  border:1px solid var(--ink);border-radius:999px;
  padding:1.05rem 1.6rem;
  background:transparent;color:var(--ink);
  text-align:left;cursor:pointer;text-decoration:none;
  transition:background .14s ease,color .14s ease;
}
.fork-btn:hover,.fork-btn:focus-visible{background:var(--ink);color:var(--ground)}
.fork-btn b{
  font-family:var(--display);font-weight:800;font-stretch:118%;
  font-size:1.05rem;letter-spacing:0.02em;
}
.fork-btn span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--muted);
}
.fork-btn:hover span,.fork-btn:focus-visible span{color:var(--ground)}

/* ---------- the expanding button ----------
   Michael, 2026-10-10: the home hero's fork button IS the site's button. The
   mark flips, the line expands in place — and that now rides on every button of
   the family. `.expands` carries the behaviour; `.fork-btn` and `.pill` keep
   their own box. A modifier, not a size, so a 12px mono pill and a big bordered
   fork button can share one mechanism without one of them having to grow. */

/* the mark is driven by the flip, so its own spin is switched off —
   a continuous rotation and a 180° transform fight over the same property */
.fork-mark{
  width:22px;height:22px;animation:none;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.expands:hover .fork-mark,
.expands:focus-visible .fork-mark{transform:rotate(180deg)}

.fork-reveal{
  display:block;white-space:nowrap;overflow:hidden;
  max-width:0;opacity:0;
  transition:max-width .45s cubic-bezier(.2,.7,.2,1),opacity .28s ease,margin-left .45s ease;
}
.expands:hover .fork-reveal,
.expands:focus-visible .fork-reveal{max-width:34rem;opacity:1;margin-left:0.3rem}

/* the sibling falls back rather than being crushed — `:has` is the switch, and
   without it the flip and the reveal still work. A one-button container (the
   sub-page fork bands) makes this a no-op, which is exactly what we want. */
@media(hover:hover){
  .fork--hero:has(.expands:hover) .expands:not(:hover),
  .fork--hero:has(.expands:focus-visible) .expands:not(:focus-visible),
  .hub-cta:has(.expands:hover) .expands:not(:hover),
  .hub-cta:has(.expands:focus-visible) .expands:not(:focus-visible){
    opacity:.3;transform:scale(.97);
  }
}

/* --- fork scale: the hero pair and the foot band --- */
.fork--hero{justify-content:center;margin-top:2.75rem}
.fork-btn.expands{
  flex:0 1 auto;
  flex-direction:row;align-items:center;gap:0.85rem;
  padding:1rem 1.75rem;
  transition:background .18s ease,color .18s ease,opacity .3s ease,transform .3s ease;
}
.fork-btn.expands b{white-space:nowrap}

/* --- pill scale: the hub CTAs and both apply CTAs --- */
.pill.expands{
  gap:0.5rem;
  transition:background .14s ease,color .14s ease,opacity .3s ease,transform .3s ease;
}
.pill.expands .fork-mark{width:15px;height:15px}
/* the separator leaves with the reveal instead of sitting there orphaned */
.pill.expands .fork-reveal::before{content:"\00b7\00a0"}

/* No hover means no way to reach the reveal. On a fork button it is simply
   always open — the box is big and the audience line is content. On a pill it is
   hidden: "… CREDITED IF IT FAILS" always-open at 390px wraps to four lines
   inside a 999px radius. Both sets of terms are stated in full in the page body,
   so a phone loses nothing by not having them on the button. */
@media(hover:none){
  .fork-btn .fork-reveal{max-width:none;opacity:1;white-space:normal;margin-left:0}
  .pill.expands .fork-reveal{display:none}
}
@media(max-width:759px){
  .fork-btn.expands{
    flex:1 1 100%;flex-direction:column;align-items:flex-start;gap:0.45rem;
    text-align:left;padding:1.05rem 1.6rem;
  }
  .fork-btn .fork-reveal{max-width:none;opacity:1;white-space:normal;margin-left:0}
  .pill.expands .fork-reveal{display:none}
}

.strip{
  display:flex;flex-wrap:wrap;gap:0.4rem 1rem;
  margin-top:2.75rem;padding-top:1.5rem;
  border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.17em;
  text-transform:uppercase;color:var(--faint);
}

/* ---------- the stat wall ----------
   REF 02b RunAdvertise — Michael: "I like the way advertise has it."
   No cells, no rules, no background: the figures sit on open ground.
   Five wrap to 3 + 2 on a wide screen and to one column on a phone. */
.stats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(2.5rem,6vw,4.5rem) clamp(2rem,7vw,6rem);
  padding-block:clamp(4rem,9vw,7rem);
  text-align:center;
}
.stat{flex:0 1 clamp(170px,20vw,250px)}
.stat b{
  display:block;font-family:var(--display);font-weight:800;font-stretch:118%;
  font-size:clamp(2.8rem,6.5vw,5rem);line-height:1;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;   /* stops the width jittering while it counts */
}
/* sentence case, against §4's mono-label rule — his call, see DECISIONS 2026-10-07 */
.stat span{display:block;margin-top:0.9rem;color:var(--muted);font-size:15px;line-height:1.4}

/* ---------- the hub: supply — ArxMade — demand ---------- */
.hub{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin-top:clamp(2.5rem,6vw,4rem);
}
@media(min-width:760px){.hub{flex-direction:row;justify-content:center}}

.hub-node{
  /* the hub is a column until 760px, and in a column flex-basis sizes HEIGHT —
     so the node is sized by width here and only becomes a flex item in the row. */
  width:100%;max-width:330px;
  border:1px solid var(--hairline);border-radius:999px;   /* round, per his instruction */
  padding:1.75rem 2rem;text-align:center;
  animation:bob 6.5s ease-in-out infinite;
}
@media(min-width:760px){.hub-node{flex:0 1 270px;width:auto;max-width:none}}
/* deliberately NOT a link: a floating element is a moving click target,
   and §6 reserves the pill for pressable things. The pills below act. */
.hub-node:last-of-type{animation-duration:8s;animation-delay:-2.2s}
.hub-node .eyebrow{display:block}
.hub-node b{
  display:block;margin-top:0.7rem;
  font-family:var(--display);font-weight:800;font-stretch:118%;
  font-size:1.15rem;letter-spacing:0.01em;
}
.hub-node span.hub-sub{display:block;margin-top:0.4rem;color:var(--muted);font-size:14px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.hub-link{flex:0 0 40px;width:1px;height:40px;background:var(--hairline);position:relative}
@media(min-width:760px){.hub-link{flex:1 1 40px;width:auto;min-width:24px;height:1px}}

/* the travelling hand-off — REF 06 agentcalls.io.
   One dot, Supply -> the mark -> Demand: the second connector is delayed by
   exactly the first one's travel time so it reads as a single journey. */
.hub-link::after{
  content:"";position:absolute;
  width:7px;height:7px;border-radius:50%;background:var(--ink);
  left:50%;margin-left:-3.5px;top:0;margin-top:-3.5px;
  opacity:0;
  animation:flowDown 5s linear infinite;
}
.hub-link:last-of-type::after{animation-delay:2s}
@keyframes flowDown{
  0%{top:0;opacity:0} 4%{opacity:1} 36%{opacity:1}
  40%,100%{top:100%;opacity:0}
}
@media(min-width:760px){
  .hub-link::after{top:50%;left:0;margin-left:-3.5px;animation-name:flowRight}
  @keyframes flowRight{
    0%{left:0;opacity:0} 4%{opacity:1} 36%{opacity:1}
    40%,100%{left:100%;opacity:0}
  }
}

/* the core's box is the mark alone, so the connectors meet its centre;
   the wordmark hangs below it without pushing that centre down */
.hub-core{position:relative;flex:none;display:flex;align-items:center;justify-content:center}
.hub-core .mark{
  width:clamp(56px,9vw,78px);height:clamp(56px,9vw,78px);
  animation-duration:18s;                    /* focal now, not a background detail */
}
.hub-core span{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:0.75rem;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-stretch:125%;
  font-size:12px;letter-spacing:0.26em;text-transform:uppercase;
}
/* the absolutely-placed wordmark needs its own room in the column layout */
@media(max-width:759px){.hub-core{margin-bottom:2.25rem}}

.hub-cta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0.9rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);
}

/* ---------- the publishers hero: cards over a payout ledger ----------
   REF 02a's fanned-card composition. The background is deliberately NOT ad
   creatives — see DECISIONS.md 2026-10-08. ArxMade settles calls, not art. */
.hero--pub .hero-in{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  z-index:1;
}
.hero--pub .hero-h{max-width:none;margin-top:1.1rem}
.hero--pub .hero-sub{max-width:46ch;margin-top:1.1rem}
.hero--pub .pill{margin-top:1.9rem}

.ledger{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:blur(0.5px)}
/* the ledger sits under the copy and fades to black top and bottom */
.hero--pub::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%,rgba(0,0,0,0.80),rgba(0,0,0,0.28) 70%),
    linear-gradient(#000,transparent 12%,transparent 82%,#000);
}

/* one label style for every small caps string on a card — Archivo condensed,
   not mono: the wide-tracked mono read generic at this size */
.card-label{
  font-family:var(--display);font-weight:600;font-stretch:75%;
  text-transform:uppercase;letter-spacing:0.07em;font-size:11px;line-height:1.1;
}

.fan{display:flex;justify-content:center;align-items:flex-start;margin-top:3rem}
.ccard{
  width:128px;height:206px;margin:0 -9px;flex:none;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s cubic-bezier(.2,.7,.2,1);
}
.ccard-in{
  width:100%;height:100%;
  background:#0b0b0b;
  border:1px solid #2a2a2a;          /* NEVER green, never a glow, in any state */
  border-radius:16px;padding:12px;
  display:flex;flex-direction:column;
  position:relative;overflow:visible;
  transition:border-color .3s ease;
}
.ccard:hover .ccard-in{border-color:#5b5b5b}
/* ~1.3x on wide screens, done by layout — a transform on the wrapper scales the
   box without reserving the space, so the fan overflowed its own caption */
@media(min-width:1200px){
  .ccard{width:166px;height:268px;margin:0 -12px}
  .ccard-in{padding:15px;border-radius:20px}
  .ccard-vert{font-size:18px}
  .ccard-timer{font-size:39px}
  .card-label{font-size:12px}
  .ccard-pay{font-size:19px}
}

.ccard-top{display:flex;align-items:center;gap:6px}
.ccard-dot{width:6px;height:6px;border-radius:50%;flex:none;background:#5b5b5b}
.ccard.is-live .ccard-dot{background:var(--live);animation:livepulse 1.4s ease-in-out infinite}
@keyframes livepulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.6)}
  50%{opacity:.6;box-shadow:0 0 0 4px rgba(74,222,128,0)}
}
.ccard-state{color:#959595}
.ccard.is-live .ccard-state{color:var(--live)}

.ccard-vert{
  font-family:var(--display);font-weight:700;font-stretch:112%;
  font-size:14px;line-height:1.12;color:var(--ink);margin-top:8px;
  min-height:2.24em;                 /* two lines reserved so cards do not jump */
}
.ccard-geo{color:#767676;margin-top:3px}

.ccard-timer{
  font-family:var(--display);font-weight:700;font-stretch:112%;
  font-size:30px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:auto;
}
.ccard-bar{height:3px;background:#262626;border-radius:2px;margin-top:6px;overflow:hidden}
.ccard-bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s linear}
.ccard.is-billable .ccard-bar i{background:var(--live)}
.ccard-buf{color:#5b5b5b;margin-top:5px}

.ccard-stamp{
  align-self:flex-start;margin-top:6px;
  padding:3px 9px 4px;border-radius:999px;border:1px solid transparent;
  opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .3s ease;
}
.ccard.is-billable .ccard-stamp{opacity:1;transform:none;border-color:var(--live);color:var(--live)}
.ccard.is-under .ccard-stamp{opacity:1;transform:none;border-color:#5b5b5b;color:#767676}

.ccard-pay{
  font-family:var(--display);font-weight:700;font-stretch:112%;
  font-size:15px;margin-top:5px;min-height:1.1em;color:transparent;
}
.ccard.is-billable .ccard-pay{color:var(--live)}

.cash{
  position:absolute;left:50%;bottom:26px;pointer-events:none;
  font-family:var(--display);font-weight:800;color:var(--live);
  text-shadow:0 0 12px rgba(74,222,128,.5);
  animation:cashfloat 1.6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes cashfloat{
  0%{opacity:0;transform:translate(var(--dx),0) rotate(var(--rot)) scale(.6)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--dx) * 2.2),-110px) rotate(var(--rot)) scale(1.15)}
}

.fan-cap{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--edge);margin-top:2.25rem;
}
@media(min-width:1200px){.fan-cap{margin-top:2.75rem}}

@media(max-width:759px){
  .ccard{width:112px;height:184px}
  .ccard:nth-child(1),.ccard:nth-child(5){display:none}
  .ccard-timer{font-size:26px}
  .fan-cap{margin-top:1.75rem}
}

/* ---------- the advertisers hero: "only your states" ----------
   Same centring, pill and card-label type as the publishers hero above — it is
   the sibling page and must read as one. The background is the licensed-states
   map: the one claim the copy cannot make visually is that out-of-state traffic
   is thrown away, and the map makes it in two seconds. */
.hero--adv .hero-in{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  z-index:1;
}
/* The authored break is "Prospects who answer, / in the CRM you already use."
   At the shared h1 size the second line needs 1074px and the wrap gives 1036,
   so it broke to three. Sized to hold two lines from 1440 down to ~700px; below
   that it wraps, which is right on a phone. */
.hero--adv .hero-h{max-width:none;margin-top:1.1rem;font-size:clamp(1.85rem,4.55vw,3.65rem)}
.hero--adv .hero-sub{max-width:50ch;margin-top:1.1rem}
.hero--adv .pill{margin-top:1.9rem}

/* The tilt is a CSS 3D transform here, and that is deliberate. The home signal
   map does its rotation inside the projection instead, because its arcs have to
   rise OFF the plane and a CSS-transformed canvas would tilt them with it.
   Nothing in this hero ever leaves the plane, so CSS is simply the right tool. */
.statemap{
  position:relative;width:100%;max-width:760px;
  margin:10px auto 0;
  /* Perspective is a LENGTH, so it does not scale with the element: keep the
     ratio perspective:width fixed at 900:760 and the projection stays similar
     at every size, which is what lets one pair of margins below hold. */
  perspective:900px;
}
.statemap svg{
  display:block;width:100%;height:auto;
  /* load-bearing: leads enter at (487,-60), above the top of the viewBox.
     Was a style="" attribute until the port; see SECURITY.md §1. */
  overflow:visible;
  transform:rotateX(36deg);transform-origin:50% 60%;
  /* The transform leaves the painted map inset from its own layout box — empty
     at the top, overhanging at the bottom. Reserving the layout box puts a band
     of dead air above the map and drops the legend onto Texas. These pull the
     box back to what is actually painted; percentage margins resolve against
     the container WIDTH, so they track the map as it scales. Measured, not
     guessed — see mockups/README.md, round 7. */
  margin-top:-5.9%;
  margin-bottom:-0.8%;
}
@media(max-width:1023px){.statemap{max-width:560px;perspective:663px}}
@media(max-width:759px){
  .statemap{max-width:none;perspective:118vw}
  .statemap svg{transform:rotateX(30deg)}
}

/* the legend reuses .card-label — same type as every small-caps string on a
   publishers call card, which is what makes the two heroes one family */
.map-legend{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:0.45rem 1.5rem;margin-top:1.5rem;
}
.map-legend .sm-lic-l{color:var(--muted)}
.map-legend .sm-lic-v{color:var(--ink)}
.map-legend .sm-del{color:var(--live)}      /* green: a delivery, same as a card */
.map-legend .sm-fil{color:var(--edge)}

/* ---------- generic section ---------- */
.sec{padding-block:var(--section);border-bottom:1px solid var(--hairline)}
.sec-head{max-width:40ch}
.sec-head h2{font-size:clamp(1.9rem,5vw,3.2rem);margin-top:0.9rem}
.sec-head p{color:var(--muted);margin-top:1.1rem;max-width:58ch}

/* ---------- the detail list (sub-pages only) ---------- */
.list{list-style:none;padding:0;margin:1.75rem 0 0}
.list li{
  display:grid;grid-template-columns:auto 1fr;gap:0.9rem;
  padding:0.85rem 0;border-top:1px solid var(--hairline);
  font-size:15.5px;
}
.list li i{
  font-family:var(--mono);font-style:normal;font-size:10.5px;
  letter-spacing:0.1em;color:var(--edge);padding-top:0.3em;
}
.list li b{font-weight:600}
.list li em{display:block;font-style:normal;color:var(--muted);font-size:14.5px;margin-top:0.15rem}
.list--wide{max-width:62ch;margin-top:3rem}

/* ---------- publishers · what you get: the orbit ----------
   Michael's own artboard, 2026-10-12 (~/Downloads/what-you-get-orbit.html).
   The <ul class="list"> below the ring is the SINGLE SOURCE OF TRUTH — the script
   reads the five <li> and draws the ring from them, so editing a term means
   editing the list and nothing else. The list is hidden visually, never removed,
   so screen readers and search still get all five in full.

   Scoped to .orbit-sec throughout: .list / .list--wide themselves are untouched,
   because the advertisers "What you get" section still renders the plain way.
   There is no .sr-only helper on this page to reuse, so the hiding lives on the
   one rule below rather than in a utility class used exactly once. */
.orbit-sec .sec-head{max-width:none;text-align:center}
.orbit-sec .sec-head h2{max-width:16ch;margin-inline:auto}
.orbit-intro{color:var(--muted);text-align:center;max-width:58ch;margin:1.1rem auto 0}
.orbit-sec .list{margin-inline:auto}

.orbit-sec .wrap{display:flex;flex-direction:column}
.orbit{position:relative;width:100%;max-width:780px;margin:0 auto}
.orbit svg{display:block;width:100%;height:auto;overflow:visible}
.orbit-ring{fill:none;stroke:var(--hairline);stroke-width:1}
.orbit-arc{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
/* .orbit-arcg deliberately has NO rule. The arc is rotated by the SVG `transform`
   ATTRIBUTE with an explicit centre - rotate(deg cx cy) - set in app.js, never by a
   CSS rotate() leaning on transform-origin. Two separate bugs died with that change,
   2026-10-12:
     1. Safari does not honour `transform-box` on SVG elements, so view-box fell back
        to the arc's own bounding box and every step after the first flung the arc off
        the ring. It looked correct in Chrome, which is how it shipped.
     2. layout() swaps the viewBox to "108 22 564 532" under 900px. transform-origin
        measures from the view-box origin, so 390px 300px resolved to (498,322) -
        wrong by exactly the viewBox min-x/min-y, in EVERY browser.
   A three-argument SVG rotate carries its pivot in user coordinates and is immune to
   both. scripts/no-fragile-css.mjs now fails the build if transform-box comes back. */
.orbit-pt{fill:var(--edge);transition:fill .3s ease,r .3s ease}
.orbit-pt.on{fill:var(--ink)}
.orbit-hit{fill:transparent;cursor:pointer}
.orbit-lab{
  font-family:var(--display);font-weight:600;font-stretch:75%;
  text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;
  fill:var(--faint);cursor:pointer;transition:fill .3s ease;
}
.orbit-lab.on,.orbit-lab:hover{fill:var(--ink)}

.orbit-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(46%,350px);text-align:center;pointer-events:none;
}
.orbit-core .sec-head h2{font-size:clamp(1.5rem,2.6vw,2.05rem);max-width:none}
.orbit-detail{margin-top:1.35rem;min-height:7.5rem;transition:opacity .35s ease}
.orbit-detail.out{opacity:0}
.orbit-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--edge)}
.orbit-detail b{display:block;margin-top:.45rem;font-family:var(--display);font-weight:700;font-stretch:112%;font-size:1.02rem;line-height:1.2}
.orbit-detail p{color:var(--muted);font-size:14px;line-height:1.5;margin-top:.4rem}

.orbit-below{display:none;color:var(--muted);font-size:14.5px;line-height:1.55;text-align:center;max-width:36ch;margin:.4rem auto 0;min-height:7.2em;transition:opacity .35s ease}
.orbit-below.out{opacity:0}

/* the list stays in the page for screen readers and search; the orbit is drawn from it */
.orbit-sec .list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* desktop: heading inside the ring */
.orbit-sec .sec-head--flow{display:none}
.orbit-intro{margin-top:.5rem}

/* phone + tablet: same ring, smaller. Heading above it, numbers on the ring,
   term name inside, the explanation under the ring. */
@media(max-width:899px){
  .orbit-sec .sec-head--flow{display:block;order:-1}
  .orbit-intro{order:-1;margin:1rem auto 1.5rem}
  .orbit{max-width:460px}
  .orbit-core .sec-head{display:none}
  .orbit-core{width:58%}
  .orbit-detail{margin-top:0;min-height:0}
  .orbit-detail b{font-size:1.15rem;margin-top:.5rem}
  .orbit-detail p{display:none}
  .orbit-below{display:block}
  .orbit-lab{font-size:21px;font-family:var(--mono);font-weight:500;font-stretch:100%;letter-spacing:.06em}
}

/* ---------- the standard, as a confirmed chain — REF 06 ----------
   agentcalls.io's INCOMING -> ROUTED TO YOU -> ... ladder. A green dot walks
   the line and confirms each check in turn, then the chain resets. */
.chain{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:0;margin-top:3rem;position:relative;
}
.chain-step{
  position:relative;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* the connecting line, drawn between neighbours rather than under them */
.chain-step::before{
  content:"";position:absolute;top:19px;left:-50%;width:100%;height:1px;
  background:var(--hairline);z-index:0;
}
.chain-step:first-child::before{display:none}

.chain-pill{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:0.5rem;
  border:1px solid var(--hairline);border-radius:999px;
  background:var(--ground);color:var(--faint);
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  padding:0.62rem 1rem;max-width:100%;
  transition:color .35s ease,border-color .35s ease;
  cursor:default;
}
.chain-pill b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chain-tick{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--hairline);transition:background .35s ease,box-shadow .35s ease;
}
/* confirmed */
.chain-step.on .chain-pill{color:var(--ink);border-color:var(--edge)}
.chain-step.on .chain-tick{background:var(--live);box-shadow:0 0 0 3px rgba(74,222,128,0.16)}
/* the dot currently arriving */
.chain-step.now .chain-tick{
  background:var(--live);
  box-shadow:0 0 0 6px rgba(74,222,128,0.10),0 0 10px 2px rgba(74,222,128,0.45);
}

.chain-note{
  margin-top:0.85rem;color:var(--muted);font-size:13.5px;line-height:1.45;
  max-width:24ch;opacity:0;transform:translateY(-4px);
  transition:opacity .25s ease,transform .25s ease;
}
@media(hover:hover){
  .chain-step:hover .chain-note,
  .chain-step:focus-within .chain-note{opacity:1;transform:none}
}
/* no hover means no way to reach it, so it is simply always open */
@media(hover:none){.chain-note{opacity:1;transform:none}}

@media(max-width:759px){
  .chain{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .chain-step{align-items:flex-start;text-align:left;width:100%}
  .chain-step::before{top:-1.5rem;left:19px;width:1px;height:1.5rem}
  .chain-note{opacity:1;transform:none;max-width:46ch}
}

/* ---------- terms ---------- */
.terms{display:grid;gap:2rem;margin-top:3rem}
@media(min-width:800px){.terms{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.terms div{border-top:1px solid var(--hairline);padding-top:1.1rem}
.terms b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted)}
.terms p{margin-top:0.7rem;font-size:15.5px}

/* ---------- terms: the three small drawings (homepage only) ----------
   Michael's own artboard, 2026-10-12 (~/Downloads/terms-glyphs.html). Scoped to
   .terms--glyphs so the advertisers "How billing works" block keeps the plain
   treatment. Monochrome throughout: --live stays the call-state accent, so no
   green appears here. --edge strokes the outlines — a decorative, aria-hidden
   use, not the 18px+ disabled-type use its token comment describes. */
.terms--glyphs > div{padding-top:1.4rem}
.terms--glyphs .glyph{
  display:block;width:100%;max-width:190px;height:auto;
  margin:0 0 1.15rem;overflow:visible;
}
/* Net-7: seven day-ticks, then a dot leaves to the right */
.glyph .g-day{fill:transparent;stroke:var(--edge);stroke-width:1;transition:fill .35s ease,stroke .35s ease}
.glyph .g-day.on{fill:var(--ink);stroke:var(--ink)}
.glyph .g-rule{stroke:var(--hairline);stroke-width:1}
.glyph .g-dot{fill:var(--ink);opacity:0}
.glyph .g-dot.go{animation:g-pay 1.3s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes g-pay{0%{opacity:0;transform:translateX(0)}15%{opacity:1}100%{opacity:0;transform:translateX(42px)}}
/* Prepaid + Credits: an outlined track with a thin fill that steps down */
.glyph .g-track{fill:none;stroke:var(--edge);stroke-width:1}
.glyph .g-fill{
  fill:var(--ink);
  transform-box:fill-box;transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.glyph .g-fill.slow{transition-duration:1.1s}
.glyph .g-drop{stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;opacity:0}
.glyph .g-drop.go{animation:g-drop .55s ease-out forwards}
@keyframes g-drop{0%{opacity:0;transform:translate(var(--x),-5px)}40%{opacity:1}100%{opacity:0;transform:translate(var(--x),1px)}}
/* Credits: the arrow that returns one step to the balance */
.glyph .g-arrow{
  fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;opacity:0;
  transition:stroke-dashoffset .6s ease,opacity .35s ease;
}
.glyph .g-arrow.on{stroke-dashoffset:0;opacity:1}

/* ---------- the fork band, repeated at the foot of every page ---------- */
.forkband{padding-block:clamp(3rem,7vw,5rem);border-bottom:1px solid var(--hairline)}
.forkband .eyebrow{display:block}
.forkband h2{font-size:clamp(1.6rem,4vw,2.4rem);margin-top:0.9rem;max-width:20ch}
.forkband .fork{margin-top:2rem}

/* ---------- apply: the inverted block ---------- */
/* the nav is sticky, so a scrolled-to target needs clearance under it */
.apply,.forkband{scroll-margin-top:7rem}
.apply{background:var(--ink);color:var(--ground)}  /* §9: the only light surface */
.apply .eyebrow{color:var(--faint-i)}
.apply h2{font-size:clamp(1.9rem,5vw,3.2rem);margin-top:0.9rem}
.apply .lead{color:var(--muted-i);margin-top:1.1rem;max-width:54ch}

.tabs{display:flex;gap:0.6rem;margin-top:2.25rem;flex-wrap:wrap}
.tab{
  border-radius:999px;border:1px solid var(--ground);background:transparent;
  color:var(--ground);font-family:var(--mono);font-size:11.5px;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:0.65rem 1.2rem;cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.tab[aria-selected="true"]{background:var(--ground);color:var(--ink)}

form{margin-top:2.25rem;max-width:720px}
.grid2{display:grid;gap:1.25rem}
@media(min-width:620px){.grid2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:0.4rem}
.field.full{grid-column:1/-1}
label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--faint-i);
}
input,select,textarea{
  font-family:var(--body);font-size:16px;color:var(--ground);
  background:transparent;border:0;border-bottom:1px solid var(--hairline-i);
  border-radius:0;                      /* §6: holds information = square */
  padding:0.55rem 0;width:100%;
}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--ground)}
textarea{resize:vertical;min-height:4.5rem}
select{appearance:none;background-image:none}
.apply .pill{border-color:var(--ground);color:var(--ground);margin-top:2rem}
.apply .pill:hover,.apply .pill:focus-visible{background:var(--ground);color:var(--ink)}
.apply :focus-visible{outline-color:var(--ground)}
/* The "how should we reach you" line above the four messaging handles. It sits
   inside the inverted apply block, so it takes the inverted muted token, and it
   is a real <p> rather than a label because it describes four fields at once --
   aria-describedby on each of them points here. */
.field-hint{font-size:13.5px;color:var(--muted-i);margin:0.35rem 0 -0.4rem}
.field-hint b{font-weight:600;color:var(--ground)}

.note{font-size:13.5px;color:var(--muted-i);margin-top:1.25rem;max-width:56ch}
.status{margin-top:1.25rem;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;min-height:1.2em}

/* ---------- footer ---------- */
.foot{padding-block:3.5rem;color:var(--faint);font-size:14px}
.foot-in{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-start}
.foot a{color:var(--muted)}
.foot .mono{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- advertisers · what you get: the crossed-out headline ----------
   Michael's artboard, 2026-10-12 (~/Downloads/prompt-1-crossed-headline.md). The <ul>
   below the band is the source of truth; the band is drawn from it and the list stays
   for screen readers, the same arrangement as the publishers orbit. Hiding is scoped to
   .xh-sec .list so the shared .list rules are untouched. */
.xh-sec .sec-head{max-width:none;text-align:center}
.xh-sec .sec-head p{margin-inline:auto}
.xh-title{display:flex;flex-direction:column;align-items:center;gap:.12em}
.xh-old{position:relative;display:inline-block;color:var(--faint)}
.xh-strike{
  position:absolute;left:-.04em;right:-.04em;top:50%;height:.07em;min-height:3px;
  background:var(--ink);transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.6,0,.2,1);
}
.xh-new{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.6,0,.2,1) .85s}
.xh-sec.is-in .xh-strike{transform:scaleX(1)}
.xh-sec.is-in .xh-new{clip-path:inset(0 0 0 0)}

/* the band of terms, moving sideways as the page scrolls */
.xh-band{
  margin-top:clamp(2.5rem,6vw,4rem);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding-block:clamp(1.4rem,3vw,2rem);overflow:hidden;
}
.xh-track{display:flex;gap:clamp(2.5rem,5vw,4.5rem);width:max-content;will-change:transform}
.xh-item{display:flex;align-items:center;gap:1.1rem;flex:none}
.xh-num{
  font-family:var(--display);font-weight:800;font-stretch:125%;
  font-size:clamp(3.6rem,8vw,6.25rem);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px var(--edge);
}
.xh-item b{display:block;font-family:var(--display);font-weight:700;font-stretch:112%;font-size:1.08rem;line-height:1.15;max-width:15ch}
.xh-item .xh-desc{display:block;color:var(--muted);font-size:14px;line-height:1.45;max-width:30ch;margin-top:.35rem}

/* the list stays in the page for screen readers and search; the band is drawn from it */
.xh-sec .list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- advertisers · how billing works: the pipeline that grows ----------
   Michael's artboard, 2026-10-12 (~/Downloads/prompt-2-pipeline-that-grows.md). Billing
   must read as GAINING: nothing here counts down or shrinks. The figures are examples
   and the "Example figures" note stays visible until real averages replace them.

   --live appears on the Appointments bars and legend swatch. That widens the 2026-10-08
   rule from "a call is live or settled" to "the outcome that converted" - his
   instruction, and consistent with the precedent, which already includes a bar (the
   billable bar) and a counter (DELIVERED). It still touches no border, card, surface,
   heading, link or button. See DECISIONS.md, 2026-10-12. */
.pg-sec .sec-head{max-width:none;text-align:center}
.pg-sec .sec-head h2{max-width:20ch;margin-inline:auto}
.pg-sec .sec-head p{margin-inline:auto}

.pg-chart{max-width:620px;margin:clamp(2.5rem,6vw,3.5rem) auto 0}
.pg-plot{
  display:grid;grid-template-columns:repeat(var(--pg-n,4),1fr);gap:clamp(.9rem,3vw,1.75rem);
  height:clamp(190px,30vw,250px);align-items:end;
}
.pg-group{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.pg-total{
  font-family:var(--display);font-weight:800;font-stretch:118%;font-size:clamp(1rem,2.2vw,1.3rem);
  font-variant-numeric:tabular-nums;margin-bottom:.45rem;opacity:0;transition:opacity .4s ease;
}
.pg-bars{display:flex;gap:4px;align-items:flex-end;width:100%;height:calc(100% - 2.2rem)}
.pg-bar{
  flex:1;border-radius:4px 4px 0 0;height:100%;
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.pg-bar--p{background:var(--ink)}
.pg-bar--c{background:var(--muted)}
.pg-bar--a{background:var(--live,#4ADE80)}
.pg-group.is-on .pg-total{opacity:1}
.pg-labels{display:grid;grid-template-columns:repeat(var(--pg-n,4),1fr);gap:clamp(.9rem,3vw,1.75rem);margin-top:.6rem;border-top:1px solid var(--hairline);padding-top:.6rem}
.pg-labels span,.pg-legend span,.pg-note{
  font-family:var(--display);font-weight:600;font-stretch:75%;text-transform:uppercase;
  letter-spacing:.07em;font-size:11px;color:var(--muted);text-align:center;
}
.pg-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.1rem}
.pg-legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.45rem;vertical-align:-1px;background:currentColor}
.pg-legend .p{color:var(--ink)} .pg-legend .c{color:var(--muted)} .pg-legend .a{color:var(--live,#4ADE80)}
.pg-caption{text-align:center;color:var(--ink);font-size:15.5px;margin-top:1.1rem}
.pg-note{display:block;color:var(--edge);margin-top:.5rem}

@media(prefers-reduced-motion:reduce){
  /* the crossed-out headline and the band: final state, no motion. The global rule
     below already kills the transitions; these set the end STATE they would have
     reached, and make the band reachable by scrolling instead of drifting. */
  .xh-strike{transform:scaleX(1)}
  .xh-new{clip-path:none}
  .xh-band{overflow-x:auto}

  /* ::before/::after must be named explicitly — the universal selector does not
     match pseudo-elements, so the hub's travelling dot kept running without this. */
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* the states map still paints: a map is not motion, the leads are */
  .map-legend .sm-del,.map-legend .sm-fil{display:none}
  /* the signal map still paints its dots: the map is not motion, the arcs are */
}

/* ---------- ported off style="" attributes ----------
   These five values lived in markup until the port. style="" cannot be covered
   by a CSP hash (that needs 'unsafe-hashes', a loophole), and they were the only
   thing standing between this page and style-src 'self'. SECURITY.md §1. */
.sprite{position:absolute}      /* the 0x0 <symbol> host, aria-hidden */
.foot-grow{margin-right:auto}   /* the footer's first column pushes the rest right */
.foot-p{margin-top:.5rem}       /* footer column body, under its .mono heading */

/* ---------- the honeypot ----------
   Off-screen, not display:none — a bot that checks visibility skips a hidden
   field and falls for this one. aria-hidden + tabindex=-1 keep it away from
   anyone using the form for real. A class, never a style attribute: style=""
   cannot be covered by the CSP without 'unsafe-hashes'. SECURITY.md §4. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- the consent row ----------
   A separate required field, not a line of small print under the button. */
.consent{flex-direction:row;align-items:flex-start;gap:0.7rem;margin-top:1.75rem}
.consent input[type=checkbox]{
  width:1.05rem;height:1.05rem;flex:none;margin-top:0.15rem;
  accent-color:var(--ground);position:relative;
}
/* The box paints at 16.8px. Hit-tested with the phone-audit probe's own
   outward walk, that is an 18x18 tap area -- under WCAG 2.2 SC 2.5.8's
   normative 24px floor, so enabling the consent row at all would have added
   the form's first hard FAIL. It gets the same transparent overlay as the nav
   and pill controls above: the painted box does not move.

   A checkbox is a replaced element, so whether it generates a pseudo-element
   box at all was measured rather than assumed, in both engines, before this
   was written. Chrome and WebKit agree: 16.80 painted, 44x44 hit. It needs no
   appearance:none to work, so the native tick is kept.

   Unlike the overlays above, this one claims horizontal room too. Those must
   not, because they sit in rows of sibling controls that would steal each
   other's taps. This one's only neighbour across the 0.7rem gap is its own
   <label for=consent>, which toggles this same checkbox -- an overlap there
   cannot misroute a tap to a different function. */
.consent input[type=checkbox]::after{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.consent label{
  font-family:var(--body);font-size:14px;line-height:1.5;
  letter-spacing:0;text-transform:none;color:var(--ground);
}
.consent a{color:var(--ground);text-decoration:underline}
.consent-pending{
  border:1px solid var(--hairline-i);border-radius:0;
  padding:0.9rem 1rem;font-size:14px;line-height:1.5;color:var(--muted-i);
}