@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');   /* the quotes are set in the serif; site.css brings Inter */
/* hyperionos.ai/swarm — the Agentic Swarm page.
   Built from the drawn page (KB #8648) in the showcase look. Three parts, in order:
     1. THE DRAWING   six frames as drawn at 1440, on the site's own Skyline tokens
     2. THE ART       one portrait or scene per class
     3. THE PAGE      how a 1440 drawing becomes a page: it scales to the window on a
                      desktop, and below 900 each frame is re-laid
   site.css loads first and carries the header, the footer, the campaign board and the
   plain sections under the frames. */

/* site.css's paragraph rule reaches into the frames; this hands the words back to the drawing.
   It comes first so that any rule of the drawing's own, at the same weight, still wins. */
.frame p { margin: 0; color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   1 · THE DRAWING
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── The drawings: the site's own Skyline tokens (site.css), scoped to a frame ── */
.frame { --ground: #02060d; --ground-up: #050b17;
    --text: #d6d8dd; --text-2: #babdc3; --muted: #9c9fa5; --eyebrow: #7d899d;
    --ivory-hi: #fffaf3; --ivory-mid: #f4e8d9; --ivory-lo: #ddc8ae; --cream: #f2ecdc;
    --gold: #dbc3aa; --gold-ink: #e6d6c0; --os: #8c9fd0;
    --hy: 242,236,220;            /* Hyperion's light */
    --hz: 144,133,200;            /* and the haze around it */
    --need: 236,214,160;          /* a call that is yours */
    --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --mono: ui-monospace, 'SF Mono', Menlo, monospace;
    position: relative; overflow: hidden; width: 1440px;
    background: var(--ground); color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px; line-height: 1.5; font-weight: 400; text-align: left;
    -webkit-font-smoothing: antialiased; }
.frame *, .frame *::before, .frame *::after { box-sizing: border-box; }
.frame b { font-weight: 500; color: inherit; }
.frame i { font-style: normal; }
.abs { position: absolute; }
/* .r keeps the field off the left column, where a star beside a word reads as a full stop */
.stars.r { -webkit-mask: linear-gradient(90deg, transparent 0, transparent 42%, #000 56%); mask: linear-gradient(90deg, transparent 0, transparent 42%, #000 56%); }
.stars.b { transform: scale(-1, 1); opacity: .75; }
.stars.c { transform: rotate(180deg) scale(1.35); opacity: .55; }
.stars { position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(1.2px 1.2px at 25% 39%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 86% 88%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 19% 22%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 6% 88%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 75% 84%, rgba(235,240,255,.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 71% 66%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 72% 93%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 96% 18%, rgba(235,240,255,.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 63% 97%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 36% 55%, rgba(235,240,255,.55) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 65%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 3% 4%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 56% 43%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 85%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 15% 93%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 44% 18%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 21% 80%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 59% 56%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 68% 64%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 27% 47%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 5% 65%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 11% 13%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 3%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 81% 31%, rgba(235,240,255,.6) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 91% 52%, rgba(235,240,255,.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 48% 74%, rgba(235,240,255,.5) 50%, transparent 100%); }
/* the city along the bottom of a frame: the hero's own strip */
.city { position: absolute; left: 0; right: 0; bottom: 0; height: 320px; pointer-events: none; -webkit-mask: linear-gradient(to bottom, transparent 0, #000 30%); mask: linear-gradient(to bottom, transparent 0, #000 30%);
    background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 100%; }
.city::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--ground)); }
/* type */
.eb { font-size: 12.5px; font-weight: 400; line-height: 1.75; letter-spacing: .42em; text-transform: uppercase; color: #9aa5b8; }
.h { font-size: 68px; font-weight: 460; line-height: 1; letter-spacing: -.042em; color: var(--ivory-mid); }
.h span { display: block; width: max-content; padding-bottom: .14em; margin-bottom: -.14em;
    background: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ld { font-size: 20px; font-weight: 300; line-height: 1.5; color: #d4d1cc; }
.ld span { display: block; }
.lb { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #b0b5be; }
/* glass, lit along the top edge */
.gl { border-radius: 8px; background-color: rgba(30,38,60,.6);
    background-image: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 46%);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.11), 0 24px 60px -24px rgba(0,0,0,.85); }
/* a call that is yours: the same glass under a warm lamp */
.call { border-radius: 8px;
    background: radial-gradient(72% 120px at 50% -18px, rgba(var(--need),.26), transparent),
    linear-gradient(to bottom, rgba(191,162,95,.11), rgba(191,162,95,.04)), rgba(13,14,18,.86);
    box-shadow: inset 0 1px 0 rgba(var(--need),.5), inset 0 0 0 1px rgba(var(--need),.16), 0 24px 60px -24px rgba(0,0,0,.85), 0 0 50px -12px rgba(191,162,95,.5); }
.call .k { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #e6d29c; }
.bt { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 6px; font-size: 13.5px; white-space: nowrap; }
.bt.pri { color: #15130f; font-weight: 500; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.bt.sec { color: #efe9db; background: rgba(255,255,255,.13); }
/* faces: every portrait is the Synth's own, cropped to the head */
.fc { display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; background-color: #0b0f18; background-repeat: no-repeat; filter: brightness(1.2) saturate(1.05);
    background-size: var(--fz, 150%) auto; background-position: var(--fx, 50%) var(--fy, 18%); }
.faces { display: inline-flex; }
.faces .fc { box-shadow: 0 0 0 2px #0a0d14, 0 0 0 3px rgba(255,255,255,.14); }
.faces .fc + .fc { margin-left: -8px; }
.you { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: 12px; font-weight: 600; letter-spacing: .04em;
    color: #15130f; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.im-p-spade { --fz:161%;--fx:70%;--fy:41%;--tz:139%;--tx:77%;--ty:55%;--nx:68% }
.im-p-barb { --fz:153%;--fx:79%;--fy:33%;--tz:132%;--tx:92%;--ty:42%;--nx:74% }
.im-p-tiller { --fz:181%;--fx:62%;--fy:34%;--tz:145%;--tx:68%;--ty:40%;--nx:63% }
/* swarm */
.im-p-annona { --fz:160%;--fx:58%;--fy:28% }
.im-p-cicero { --fz:162%;--fx:10%;--fy:34% }
.im-p-corvin { --fz:178%;--fx:76%;--fy:49% }
.im-p-crassus { --fz:167%;--fx:59%;--fy:18% }
.im-p-livia { --fz:152%;--fx:47%;--fy:40% }
.im-p-nerissa { --fz:162%;--fx:95%;--fy:47% }
.im-p-quill { --fz:139%;--fx:76%;--fy:31% }
@keyframes hy-flow { to { stroke-dashoffset: -24; } }
svg.threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thr { fill: none; stroke: rgba(var(--hy),.9); stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(var(--hy),.5)); }
.thr.gold { stroke: #f3dc9c; stroke-width: 2.8; filter: drop-shadow(0 0 6px rgba(226,190,110,.95)) drop-shadow(0 0 16px rgba(191,162,95,.6)); }
/* a handoff: one bead on the seam between two Synths */
.bead-n { position: absolute; z-index: 4; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; display: grid; place-items: center; color: rgb(var(--hy));
    background: #171d2e; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1.5px rgba(var(--hy),.7), 0 0 26px 0 rgba(var(--hy),.65); }
.bead-n.gold { color: #f6e2a8; background: #2a2414; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1.5px rgba(var(--need),.95), 0 0 28px 2px rgba(226,190,110,.85); }
/* shared by the round-two frames */
.head2 { left: 96px; top: 84px; }
.head2 .h { font-size: 62px; margin-top: 20px; }
.ld2 { left: 836px; top: 156px; }
.chipx { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; color: #e4e2dd; background: rgba(255,255,255,.1); }
.chipx.ok { color: #c9ecd9; background: rgba(106,160,136,.3); }
.chipx.gold { color: #f6e6b8; background: rgba(150,118,44,.5); }
.chipx.vio { color: #dcd8ff; background: rgba(120,110,220,.4); }
.chipx.teal { color: #e6faf7; background: rgba(60,160,152,.42); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
/* shared by the round-three frames: a product window, and the small parts inside one */
.win { border-radius: 12px; overflow: hidden; background: rgba(11,13,21,.94); color: #e6e6ea;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.09), 0 50px 110px -40px #000, 0 0 130px -28px rgba(94,106,210,.75); }
.win .topb { position: absolute; left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 22px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); white-space: nowrap; }
.win .topb b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: #f2f2f5; }
.win .topb .sub { font-size: 13px; color: #a8a8b4; }
.kk { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9c9ca8; }
.sg { margin-left: auto; display: flex; padding: 3px; border-radius: 8px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sg span { height: 28px; padding: 0 12px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; color: #a8a8b4; }
.sg span.on { color: #fff; background: #5e6ad2; }
.wbt { height: 32px; padding: 0 13px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #fff; background: #5e6ad2; white-space: nowrap; }
.wbt.q { color: #dcdce4; background: rgba(255,255,255,.08); font-weight: 400; }
.ini { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #e9ebf5; background: rgba(var(--t, 126,138,168),.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.tg { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; color: #d8d8e2; background: rgba(255,255,255,.08); }
.tg.gold { color: #f6e6b8; background: rgba(150,118,44,.45); }
.tg.ok { color: #c9ecd9; background: rgba(106,160,136,.28); }
.tg.vio { color: #dcd8ff; background: rgba(120,110,220,.36); }
.tg.teal { color: #dff6f2; background: rgba(60,160,152,.36); }
/* this page: the kit's smallest labels, a step larger and brighter */
.kk { font-size: 11.5px; color: #b8bac8; }
.lb { font-size: 12px; color: #c8cdd6; }
.tg { font-size: 12px; }
.win .topb .sub { color: #bcbeca; }
.thn { fill: #f3dc9c; filter: drop-shadow(0 0 6px rgba(226,190,110,.95)); }
/* ═══ A · Hero: one business, end to end ═════════════════════════════════ */
.fA { height: 970px; }
.fA .haze { position: absolute; inset: 0; background:
    radial-gradient(1100px 420px at 720px 520px, rgba(var(--hz),.2), rgba(var(--hz),.06) 55%, transparent 78%),
    radial-gradient(1500px 520px at 50% 970px, rgba(70,110,220,.36), rgba(70,110,220,.1) 55%, transparent 76%); }
.fA .head2 .h { font-size: 68px; }
.fA .bead-n b { font: 600 14.5px/1 var(--mono); }
.astem { position: absolute; top: 364px; width: 2px; height: 12px; margin-left: -1px; background: rgba(var(--hy),.85); box-shadow: 0 0 8px rgba(var(--hy),.8); }
.astem.g { background: #f3dc9c; box-shadow: 0 0 10px rgba(226,190,110,.95); }
/* six cards under one thread: the same business at every stop */
.ac { position: absolute; top: 376px; width: 198px; height: 286px; padding: 15px 16px 0; }
.ac .st { font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--ivory-mid); }
.ac .who { margin-top: 3px; font-size: 14px; color: #e4e6eb; white-space: nowrap; }
.ac .nm { margin-top: 11px; font-size: 19px; letter-spacing: -.02em; line-height: 1.18; color: var(--ivory-mid); }
.ac .mt { margin-top: 5px; font-size: 13.5px; color: #d6d8de; }
.ac .ck { margin-top: 8px; display: flex; gap: 8px; font-size: 13px; line-height: 1.35; color: #e2e2e8; }
.ac .ck i { color: #9fdcc0; flex: none; }
.ac .rule { margin-top: 13px; height: 1px; background: rgba(255,255,255,.1); }
.ac .by { position: absolute; left: 16px; right: 14px; bottom: 15px; display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.3; color: #e6e8ec; white-space: nowrap; }
.ac .by .fc { width: 32px; height: 32px; }
.ac .q { margin-top: 11px; font-family: var(--serif); font-size: 18px; line-height: 1.26; color: #f3ecdc; text-wrap: balance; }
.ac .src { margin-top: 7px; font-size: 13px; color: #c9ccd2; }
.ac .tags { position: absolute; left: 16px; bottom: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ac .let { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #e8e8ee; }
.ac .let p { margin: 0 0 7px; }
.mk { color: #fff0c4; background: linear-gradient(rgba(236,214,160,.85), rgba(236,214,160,.85)) left bottom / 100% 1.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 1px; }
.ac.call .st { color: #f6e2a8; }
.ac.call .who { color: #dccfae; }
.ac.call .tq { margin-top: 11px; font-size: 21px; letter-spacing: -.02em; line-height: 1.18; color: #fbf4e2; }
.ac.call .pv { margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4; color: #e6dfcd; background: rgba(255,255,255,.07); }
.ac.call .bts { margin-top: 11px; display: flex; gap: 7px; }
.ac.call .bt { flex: 1; justify-content: center; padding: 0 8px; }
.ac.call .ft { position: absolute; left: 16px; right: 14px; bottom: 14px; font-size: 13px; line-height: 1.35; color: #eee5cc; text-wrap: balance; }
.ac .when { margin-top: 11px; font-size: 26px; font-weight: 460; letter-spacing: -.03em; line-height: 1; color: var(--ivory-mid); }
.ac .bud { margin-top: 12px; }
.ac .bud .tr { height: 7px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; display: flex; }
.ac .bud .tr i { display: block; height: 100%; background: #9aa6ff; }
.ac .bud .tr i + i { background: rgba(154,166,255,.38); }
.ac .bud span { display: block; margin-top: 7px; font-size: 13px; color: #d6d8dd; }
.ac .tl2 { position: absolute; left: 16px; right: 14px; bottom: 14px; font-size: 13px; line-height: 1.3; color: #dfe1e6; }
.ac .tl2 div { display: flex; gap: 8px; margin-top: 6px; }
.ac .tl2 b { flex: none; width: 42px; color: #aeb6c6; font-weight: 400; }
.ac .bub { margin-top: 11px; padding: 11px 12px; border-radius: 10px 10px 10px 3px; font-size: 13.5px; line-height: 1.42; color: #eef3f1; background: rgba(60,160,152,.26); box-shadow: inset 0 0 0 1px rgba(110,205,196,.34); }
.ac .bub em { font-style: normal; display: block; margin-top: 6px; font-size: 12.5px; color: #cdeee8; }
/* what it came to */
.ares { left: 96px; top: 708px; width: 1248px; height: 122px; display: flex; align-items: center; padding: 0 44px 0 36px; }
.ares .own { flex: none; width: 350px; margin-right: 36px; }
.ares .own b { display: block; font-size: 21px; font-weight: 460; letter-spacing: -.02em; color: var(--ivory-mid); }
.ares .own span { display: block; margin-top: 5px; font-size: 14.5px; color: #d6d8dd; }
.ares .nums { flex: 1; display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: center; }
.ares .n { text-align: center; }
.ares .n b { display: block; font-size: 56px; font-weight: 460; line-height: 1; letter-spacing: -.045em; color: var(--ivory-mid); font-variant-numeric: tabular-nums; }
.ares .n span { display: block; margin-top: 9px; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: #e8ebf1; white-space: nowrap; }
.ares .ar { text-align: center; font-size: 38px; line-height: 1; color: #fff6e2; margin-top: -24px; text-shadow: 0 0 14px rgba(var(--hy),.6); }
/* ═══ B · Data: the pool, the read, the cull ═════════════════════════════ */
.fB { height: 1126px; }
.fB .haze { position: absolute; inset: 0; background: radial-gradient(1500px 700px at 50% 640px, rgba(60,150,170,.34), rgba(94,106,210,.12) 55%, transparent 76%); }
.bsp { left: 64px; top: 296px; width: 1312px; height: 300px; }
.bsp .topb .who { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #d6d8dd; }
.bsp .topb .who .fc { width: 30px; height: 30px; }
.bvd { position: absolute; left: 22px; top: 70px; right: 22px; display: flex; align-items: baseline; gap: 16px; white-space: nowrap; }
.bvd b { font-size: 25px; font-weight: 600; letter-spacing: -.025em; color: #f4f4f7; }
.bvd span { font-size: 14.5px; color: #d0d2d8; }
.bbar { position: absolute; left: 22px; right: 22px; top: 118px; height: 18px; display: flex; gap: 4px; }
.bbar i { display: block; height: 100%; min-width: 9px; border-radius: 4px; background: var(--c); }
.bbar i.lit { box-shadow: 0 0 16px 0 rgba(150,160,255,.7); }
.bgr { position: absolute; left: 22px; right: 22px; top: 150px; height: 134px; display: grid; grid-template-columns: 1.1fr 1.1fr 1fr 1fr 1fr; gap: 10px; }
.bg { border-radius: 10px; padding: 10px 13px 0; background: rgba(var(--g),.13); box-shadow: inset 0 0 0 1px rgba(var(--g),.2); }
.bg.s { background: rgba(var(--g),.24); box-shadow: inset 0 0 0 1px rgba(var(--g),.42), 0 0 40px -10px rgba(120,130,255,.7); }
.bg .gh { display: flex; align-items: center; gap: 8px; height: 20px; white-space: nowrap; margin-bottom: 5px; }
.bg .gh::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--g)); }
.bg .gh b { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #eeeef4; }
.bg .gh em { font-style: normal; margin-left: auto; font-size: 14px; font-weight: 600; color: #f2f2f5; font-variant-numeric: tabular-nums; }
.bg .sr { display: flex; align-items: center; gap: 9px; height: 24px; font-size: 14px; color: #e4e5ec; white-space: nowrap; }
.bg .sr::before { content: ''; flex: none; width: 4px; height: 14px; border-radius: 2px; background: var(--c); }
.bg .sr b { margin-left: auto; font-weight: 500; color: #f2f2f5; font-variant-numeric: tabular-nums; }
.bg .mn { margin: 1px 0 4px 13px; font-size: 13px; line-height: 1.35; color: #d6d8e0; text-wrap: balance; }
/* where mined leads go */
.bfl { left: 64px; top: 620px; width: 580px; height: 452px; }
.bfl .topb, .bpf .topb { height: 52px; }
.bfl .topb b, .bpf .topb b { font-size: 17px; }
.bfl .topb .who { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #d6d8dd; }
.bch { position: absolute; left: 20px; right: 16px; top: 66px; }
.brow { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: center; height: 42px; margin-bottom: 12px; position: relative; }
.brow + .brow::before { content: ''; position: absolute; left: 95px; top: -12px; width: 1.5px; height: 12px; background: rgba(255,255,255,.3); }
.bnd { height: 42px; border-radius: 8px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #171a27; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.08); white-space: nowrap; }
.bnd b { font-size: 14px; font-weight: 600; color: #f2f2f5; }
.bnd em { font-style: normal; margin-left: auto; font-size: 14px; color: #e6e6ee; font-variant-numeric: tabular-nums; }
.bnd.ok { background: rgba(76,175,80,.26); box-shadow: inset 0 0 0 1px rgba(110,200,120,.5), 0 0 26px -6px rgba(90,200,110,.8); }
.bnd.ok b, .bnd.ok em { color: #e3f6e4; }
.bex { display: flex; gap: 6px; flex-wrap: nowrap; }
.bex span { height: 30px; padding: 0 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; white-space: nowrap; }
.bex span b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bex .out { color: #dadce2; background: rgba(255,255,255,.1); }
.bex .nd { color: #dcebfb; background: rgba(110,160,220,.28); }
.bex .wt { color: #f6e7bd; background: rgba(150,118,44,.46); }
.bex .tx { height: auto; padding: 0; font-size: 13.5px; color: #d0d2d8; white-space: normal; line-height: 1.35; }
.bkey { position: absolute; left: 20px; bottom: 16px; display: flex; gap: 16px; font-size: 13.5px; color: #dcdee4; }
.bkey span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; background: var(--c); }
/* one business, read */
.bpf { left: 668px; top: 620px; width: 708px; height: 452px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.09), 0 50px 110px -40px #000, 0 0 150px -20px rgba(110,205,196,.7); }
.bpf .gd { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bpf .gd i { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; font-size: 16px; font-weight: 600; color: #e3f6e4; background: rgba(76,175,80,.36); box-shadow: inset 0 0 0 1px rgba(110,200,120,.5); }
.bpf .gd span { font-size: 13.5px; color: #e2e2ea; }
.bfs { position: absolute; left: 20px; right: 20px; top: 64px; }
.bfs .kk { font-size: 12px; color: #d2d4e0; }
.bfs .sc { margin-top: 8px; }
.bfs .sc:first-child { margin-top: 0; }
.bfr { margin-top: 6px; display: grid; grid-template-columns: 138px 1fr 64px; gap: 12px; padding: 9px 14px; border-radius: 9px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.bfr .l { font-size: 14px; color: #dcdee8; padding-top: 2px; }
.bfr .v b { font-size: 16px; font-weight: 600; color: #f4f4f7; }
.bfr .v p { margin: 6px 0 0; font-size: 15px; line-height: 1.42; color: #eceef2; text-wrap: balance; }
.bfr .v p i { color: #7fd68a; margin-right: 7px; }
.bfr .v p em { font-family: var(--serif); font-style: normal; font-size: 16.5px; color: #f3ecdc; }
.bfr .v .pg { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; margin-right: 8px; border-radius: 999px; font-size: 12px; color: #e2dfff; background: rgba(120,110,220,.42); vertical-align: 1px; }
.bfr .w { font-size: 13.5px; color: #c6ccff; text-align: right; padding-top: 2px; }
.bpf .ft { position: absolute; left: 20px; bottom: 16px; font-size: 13.5px; color: #dcdee4; }
/* ═══ C · Outreach: the draft reader, and the inboxes it sends from ══════ */
.fC { height: 1184px; }
.fC .haze { position: absolute; inset: 0; background: radial-gradient(1500px 700px at 50% 640px, rgba(94,106,210,.44), rgba(94,106,210,.1) 55%, transparent 76%); }
.tg.red { color: #ffd6d6; background: rgba(229,72,77,.34); }
.crd { left: 64px; top: 296px; width: 1312px; height: 592px; }
.crd .topb .bk { font-size: 20px; color: #a8a8b4; margin-right: 2px; }
.crd .topb .ctr { margin-left: auto; font-size: 13.5px; color: #d2d2dc; font-variant-numeric: tabular-nums; }
.crd .topb .hp { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #a8a8b4; background: rgba(255,255,255,.07); }
.crd .prog { position: absolute; left: 0; right: 0; top: 56px; height: 4px; background: rgba(255,255,255,.06); }
.crd .prog i { display: block; width: 3.5%; height: 100%; background: #5e6ad2; box-shadow: 0 0 10px rgba(110,124,255,.9); }
/* the letter */
.clet { position: absolute; left: 126px; top: 112px; width: 700px; }
.clet .sj { margin-top: 7px; font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: #f4f4f7; }
.clet .bd { margin-top: 20px; font-size: 18.5px; line-height: 1.58; color: #e4e4ea; }
.clet .bd p { margin: 0 0 13px; }
.frame .mkn { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; font: 700 12.5px/1 var(--mono); vertical-align: 3px; color: #fff; background: #5e6ad2; box-shadow: 0 0 0 1.5px rgba(255,255,255,.35); }
.frame .mkn.r { background: #e5484d; }
.mkm { padding: 1px 3px; margin: 0 -1px; border-radius: 3px; background: rgba(94,106,210,.3); color: #f0f1ff; }
.mkr { padding: 1px 3px; margin: 0 -1px; border-radius: 3px; background: rgba(229,72,77,.24); color: #ffe6e6; box-shadow: inset 0 -1.5px 0 rgba(239,90,95,.95); }
.clet .uf { margin-top: 12px; padding-top: 12px; font-size: 13.5px; color: #c6c8d4; background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 5px, transparent 5px 10px) left top / 100% 1px no-repeat; }
/* the evidence */
.cev { position: absolute; left: 952px; top: 59px; right: 0; bottom: 54px; padding: 16px 20px 0; background: rgba(22,26,42,.97); box-shadow: inset 1px 0 0 rgba(255,255,255,.1); }
.cev .ttl { font-size: 15px; font-weight: 600; color: #f2f2f5; }
.cfl { margin-top: 11px; padding: 11px 13px; border-radius: 9px; background: rgba(229,72,77,.15); box-shadow: inset 0 0 0 1px rgba(239,90,95,.42); }
.cfl .kk { color: #ffc0c0; display: flex; align-items: center; }
.cfl .kk .mkn, .cev .sec .kk .mkn { margin: 0 8px 0 0; vertical-align: 0; }
.cfl p { margin: 5px 0 0; font-size: 13px; line-height: 1.4; color: #f6e8e8; }
.cfl em { display: block; margin-top: 5px; font-size: 13.5px; color: #f6d6d6; }
.cev .sec { margin-top: 14px; }
.cev .sec .kk { margin-bottom: 6px; display: flex; align-items: center; }
.cev blockquote { margin: 0; padding: 2px 0 2px 12px; font-family: var(--serif); font-size: 16.5px; line-height: 1.32; color: #f3ecdc; box-shadow: inset 2px 0 0 rgba(236,214,160,.7); }
.cev .rw { font-size: 13.5px; line-height: 1.55; color: #e2e2ea; }
.cev .rw em { font-style: normal; color: #9fdcc0; }
.cev .fx { display: flex; flex-wrap: wrap; gap: 5px; }
.cev .fx span { height: 22px; padding: 0 8px; border-radius: 5px; display: inline-flex; align-items: center; font: 400 12px/1 var(--mono); color: #e0e0ea; background: rgba(255,255,255,.1); }
/* the footer of the reader */
.cft { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; display: flex; align-items: center; gap: 8px; padding: 0 22px; background: rgba(13,15,24,.98); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.cft .wbt.off { color: #a2a4b0; font-weight: 400; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); text-decoration: line-through; }
.cft .wbt.warn { color: #ffd6d6; background: rgba(229,72,77,.26); font-weight: 400; }
.cft .keys { margin-left: auto; font-size: 13px; color: #c2c4d0; }
.cft .keys b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin: 0 5px 0 12px; padding: 0 5px; border-radius: 4px; font: 500 11px/1 var(--mono); color: #e6e6ea; background: rgba(255,255,255,.1); }
/* under it: the inboxes */
.cnd { position: absolute; left: 0; right: 0; top: 916px; text-align: center; font-size: 17px; font-weight: 300; color: #d4d1cc; }
.cst { position: absolute; top: 954px; width: 424px; height: 178px; padding: 16px 20px 0; }
.cst .big { margin-top: 9px; font-size: 15px; color: #dcdce4; }
.cst .big b { font-size: 28px; font-weight: 460; letter-spacing: -.03em; color: var(--ivory-mid); margin-right: 6px; }
.cst .bar { margin-top: 11px; height: 9px; border-radius: 999px; overflow: hidden; display: flex; background: rgba(255,255,255,.1); }
.cst .bar i { display: block; height: 100%; background: #6672e0; }
.cst .bar i + i { background: #55d6bb; }
.cst .lg { margin-top: 9px; display: flex; gap: 16px; font-size: 13px; color: #dcdee4; }
.cst .lg span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: #6672e0; }
.cst .lg span:nth-child(2)::before { background: #55d6bb; }
.cst .lg span:nth-child(3)::before { background: rgba(255,255,255,.34); }
.cst .nt { margin-top: 9px; font-size: 13.5px; line-height: 1.4; color: #d6d8de; }
.cib { margin-top: 10px; display: grid; grid-template-columns: 132px 1fr; gap: 0 10px; align-items: center; font-size: 13px; color: #e2e2e8; }
.cib .a { font: 500 12.5px/1 var(--mono); display: flex; align-items: center; gap: 7px; }
.cib .a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6fcf97; box-shadow: 0 0 8px #6fcf97; }
.cib.bad .a::before { background: #ef5a5f; box-shadow: 0 0 8px #ef5a5f; }
.cib .l { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.cib .l em { font-style: normal; margin-left: auto; color: #c9ccd2; font-variant-numeric: tabular-nums; }
.cib .why { grid-column: 1 / -1; margin-top: 7px; font-size: 13px; line-height: 1.38; color: #f0d4d4; text-wrap: balance; }
.clv { margin-top: 12px; display: flex; padding: 3px; border-radius: 8px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.clv span { flex: 1; height: 30px; display: grid; place-items: center; border-radius: 6px; font-size: 12.5px; color: #b9bcc6; }
.clv span.on { color: #15130f; font-weight: 500; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
/* ═══ D · Sales: the reply, the drafted answer, the deal ═════════════════ */
.fD { height: 1158px; }
.fD .haze { position: absolute; inset: 0; background: radial-gradient(1500px 700px at 50% 640px, rgba(60,160,152,.3), rgba(94,106,210,.14) 55%, transparent 76%); }
/* the inbox thread */
.din { left: 64px; top: 296px; width: 612px; height: 620px; }
.dh1 { position: absolute; left: 22px; right: 22px; top: 72px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.dh1 b { font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: #f4f4f7; }
.dh1 .sj { font-size: 13.5px; color: #c2c4ce; }
.dh1 .turn { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 13px; color: #f6e6b8; }
.dh1 .turn .dot { color: #f3dc9c; }
.dh2 { position: absolute; left: 22px; right: 22px; top: 110px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #d0d2da; white-space: nowrap; }
.dtri { position: absolute; left: 22px; right: 22px; top: 144px; height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; color: #e6e3ff; background: rgba(120,110,220,.2); box-shadow: inset 0 0 0 1px rgba(140,130,235,.3); white-space: nowrap; }
.dtri i { color: #c8c2ff; }
.dmsg { position: absolute; top: 198px; max-width: 380px; padding: 10px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.dmsg { text-wrap: balance; }
.dmsg em { font-style: normal; display: block; margin-top: 5px; font-size: 12.5px; opacity: .9; }
.dmsg.us { right: 22px; border-bottom-right-radius: 3px; color: #eceefe; background: rgba(94,106,210,.3); }
.dmsg.them { left: 22px; top: 298px; border-bottom-left-radius: 3px; color: #eef3f1; background: rgba(60,160,152,.3); box-shadow: inset 0 0 0 1px rgba(110,205,196,.4), 0 0 30px -6px rgba(110,205,196,.6); }
.ddv { position: absolute; left: 22px; right: 22px; top: 396px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #f0dca4; white-space: nowrap; }
.ddv::before, .ddv::after { content: ''; flex: 1; height: 1px; background: rgba(236,214,160,.3); }
.ddr { position: absolute; left: 22px; right: 22px; top: 422px; height: 182px; padding: 14px 16px 0; }
.ddr .k { font-size: 12px; }
.ddr .top { display: flex; align-items: center; gap: 13px; }
.ddr .top > .fc { width: 54px; height: 54px; box-shadow: 0 0 0 2px rgba(236,214,160,.8), 0 0 22px -2px rgba(226,190,110,.7); filter: brightness(1.3) saturate(1.05); }
.ddr .t1 { display: flex; align-items: baseline; gap: 10px; }
.ddr .t1 em { font-style: normal; font-size: 13px; color: #e2d8bc; }
.ddr .by { margin-top: 8px; display: flex; align-items: center; gap: 10px; font-size: 15px; color: #fbf4e2; }
.ddr .by .tg { margin-left: 2px; }
.ddr p { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: #fbf4e2; }
.ddr .bts { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 7px; }
.ddr .bt { height: 32px; font-size: 13px; }
/* the sales board */
.dbd { left: 700px; top: 296px; width: 676px; height: 620px; }
.dsel { height: 32px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #dcdce4; background: rgba(255,255,255,.08); }
.dhl { position: absolute; left: 20px; right: 20px; top: 72px; }
.dhl b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #f4f4f7; white-space: nowrap; }
.dhl span { display: block; margin-top: 5px; font-size: 13.5px; color: #d6d8de; white-space: nowrap; }
.dcols { position: absolute; left: 16px; right: 16px; top: 142px; bottom: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dcol { border-radius: 10px; padding: 11px 7px 0; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.dcol .hd { display: flex; align-items: center; gap: 6px; padding: 0 1px; font-size: 12.5px; font-weight: 600; color: #f2f2f5; white-space: nowrap; }
.dcol .hd i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--t)); box-shadow: 0 0 8px rgba(var(--t),.7); }
.dcol .hd em { font-style: normal; font-weight: 500; margin-left: auto; color: #b4b4c0; }
.ddl { margin-top: 8px; border-radius: 8px; padding: 9px 9px 9px; background: #171a27; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.07); }
.ddl b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #f4f4f7; }
.ddl span { display: flex; margin-top: 5px; font-size: 12.5px; color: #cfd1da; white-space: nowrap; }
.ddl span em { font-style: normal; color: #9fe6ae; margin-left: auto; }
.ddl.on { background: #2a2414; box-shadow: inset 0 0 0 1.5px #f3dc9c, 0 0 30px -2px rgba(226,190,110,.9), 0 0 70px -10px rgba(226,190,110,.55); }
.ddl.on span { color: #f1e2b4; }
/* the follow-up */
.dfu { left: 64px; top: 948px; width: 1312px; height: 156px; display: flex; align-items: center; gap: 0; padding: 0 26px; }
.dfu .hd { flex: none; width: 222px; margin-right: 10px; }
.dfu .hd .by { margin-top: 9px; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #dcdee4; }
.dfu .hd .by .fc { width: 30px; height: 30px; }
.dfu .hd b { display: block; margin-top: 8px; text-wrap: balance; font-size: 18px; font-weight: 460; letter-spacing: -.02em; line-height: 1.2; color: var(--ivory-mid); }
.dtc { flex: none; width: 256px; height: 112px; border-radius: 9px; padding: 14px 14px 0; background: rgba(8,10,18,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.dtc .r1 { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: #f2f2f5; white-space: nowrap; }
.dtc .r1 i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px/1 var(--mono); color: #e9ebf5; background: rgba(94,106,210,.5); }
.dtc .r2 { margin-top: 9px; display: flex; align-items: center; gap: 7px; font-size: 13px; color: #d6d8de; white-space: nowrap; }
.dtc .r3 { margin-top: 8px; }
.dtc .r3 .tg { color: #e6e6ee; }
.dar { flex: none; width: 30px; text-align: center; font-size: 18px; color: rgba(var(--hy),.7); }
.dend { flex: none; margin-left: 8px; font-size: 14px; line-height: 1.4; color: #dff6f2; }
.dend b { display: block; font-weight: 500; color: #eafaf7; }
/* ═══ E · Reports and tracking: results in sentences, and the send gate ══ */
.fE { height: 1126px; }
.fE .haze { position: absolute; inset: 0; background: radial-gradient(1500px 700px at 40% 640px, rgba(94,106,210,.44), rgba(94,106,210,.1) 55%, transparent 76%), radial-gradient(520px 520px at 1200px 420px, rgba(191,162,95,.2), transparent 70%); }
.ers { left: 64px; top: 296px; width: 936px; height: 776px; }
.epk { position: absolute; left: 22px; top: 70px; display: flex; gap: 6px; }
.epk span { height: 28px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; font-size: 12.5px; color: #c2c4ce; background: rgba(255,255,255,.07); }
.epk span.on { color: #fff; background: #5e6ad2; }
.ehl { position: absolute; left: 22px; right: 22px; top: 112px; }
.ehl b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.025em; color: #f4f4f7; white-space: nowrap; }
.ehl span { display: block; margin-top: 6px; font-size: 13.5px; color: #cfd1d9; white-space: nowrap; }
.etl { position: absolute; left: 22px; right: 22px; top: 180px; height: 118px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.et { border-radius: 9px; padding: 11px 13px 0; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.et b { display: block; margin-top: 7px; font-size: 27px; font-weight: 600; letter-spacing: -.035em; line-height: 1; color: #f4f4f7; font-variant-numeric: tabular-nums; }
.et span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: #d6d8de; text-wrap: balance; }
.et.hero { background: rgba(94,106,210,.2); box-shadow: inset 0 0 0 1px rgba(110,124,255,.45), 0 0 34px -8px rgba(110,124,255,.8); }
.et.amb { background: rgba(150,118,44,.3); box-shadow: inset 0 0 0 1px rgba(236,214,160,.42); }
.et.amb .kk { color: #f0dca4; }
.et.amb b { color: #fbf0cf; }
.et.amb span { color: #efe2bd; }
.et .mt { margin-top: 9px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.1); position: relative; }
.et .mt i { position: absolute; left: 0; top: 0; bottom: 0; width: 44%; border-radius: 999px; background: #ef5a5f; }
.et .mt::after { content: ''; position: absolute; left: 86%; top: -3px; width: 1.5px; height: 11px; background: #f6c7c7; }
.ech { position: absolute; left: 22px; right: 22px; top: 310px; height: 152px; border-radius: 9px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ech .hd { position: absolute; left: 14px; top: 10px; font-size: 13px; color: #c9ccd4; white-space: nowrap; }
.ech .hd b { font-weight: 600; color: #f0f0f4; margin-right: 9px; }
.ech .rl { position: absolute; left: 14px; font-size: 13px; color: #dcdee4; white-space: nowrap; }
.ech .rl b { font-weight: 600; color: #f4f4f7; margin-right: 5px; }
svg.ebars { position: absolute; left: 0; top: 32px; display: block; }
svg.ebars .s { fill: rgba(124,134,232,.4); }
svg.ebars .s.lit { fill: #a3acff; filter: drop-shadow(0 0 5px rgba(130,142,255,.95)); }
svg.ebars .r { fill: rgba(41,165,140,.45); }
svg.ebars .r.lit { fill: #55d6bb; filter: drop-shadow(0 0 5px rgba(60,200,170,.9)); }
svg.ebars .off { fill: rgba(255,255,255,.05); }
svg.ebars line { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.eq { position: absolute; left: 22px; right: 22px; top: 476px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.eq .bn { font-size: 14.5px; font-weight: 600; color: #f4f4f7; margin-bottom: 2px; }
.eqc { margin-top: 7px; height: 82px; border-radius: 9px; padding: 10px 13px 0; background: #171a27; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.07); }
.eqc em { font-style: normal; display: block; font-size: 13.5px; color: #d8dae4; white-space: nowrap; }
.eqc p { margin: 5px 0 0; font-size: 14px; line-height: 1.35; color: #f2f2f6; text-wrap: balance; }
.eqc p b { font-weight: 600; color: #fff; }
/* the control column */
.egt { left: 1024px; top: 296px; width: 352px; height: 266px; padding: 18px 20px 0; }
.egt .k { font-size: 12px; }
.egt .t1 { display: flex; align-items: center; gap: 8px; }
.egt .t1 .chipx { height: 22px; font-size: 11.5px; padding: 0 9px; margin-left: auto; }
.egt .tq { margin-top: 11px; font-size: 23px; letter-spacing: -.02em; line-height: 1.15; color: #fbf4e2; }
.egt .pl { margin-top: 9px; font-size: 13.5px; line-height: 1.45; color: #e6dfcd; }
.egt .by { margin-top: 11px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #f1e9d4; }
.egt .by .fc { width: 36px; height: 36px; box-shadow: 0 0 0 1.5px rgba(236,214,160,.7); }
.egt .bts { margin-top: 13px; display: flex; gap: 7px; }
.egt .ft { position: absolute; left: 20px; bottom: 15px; font-size: 13.5px; color: #efe6cd; }
.elg { left: 1024px; top: 586px; width: 352px; height: 316px; padding: 16px 20px 0; }
.elg .rw { margin-top: 13px; display: grid; grid-template-columns: 34px 1fr; gap: 0 11px; }
.elg .rw .fc, .elg .rw .you { width: 34px; height: 34px; font-size: 11px; grid-row: span 2; }
.elg .rw .you { color: #15130f; }
.elg .rw b { font-size: 13.5px; font-weight: 500; color: #f2f2f5; white-space: nowrap; }
.elg .rw b em { font-style: normal; font-weight: 400; font-size: 12.5px; color: #c6cad4; margin-left: 8px; }
.elg .rw span { font-size: 13.5px; line-height: 1.35; color: #dcdee4; }
.ehd { left: 1024px; top: 926px; width: 352px; height: 146px; padding: 16px 20px 0; }
.ehd .bt { position: absolute; right: 18px; bottom: 16px; height: 30px; font-size: 13px; }
.ehd .big { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: #e6e8ee; white-space: nowrap; }
.ehd .big b { font-size: 32px; font-weight: 460; letter-spacing: -.035em; line-height: 1; color: var(--ivory-mid); }
.ehd p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.4; color: #dcdee4; }
/* ═══ F · Intelligence: everything learns, around one record ═════════════ */
.fF { height: 1270px; }
.fF .haze { position: absolute; inset: 0; background:
    radial-gradient(520px 520px at 720px 690px, rgba(var(--hy),.2), rgba(var(--hz),.16) 45%, transparent 72%),
    radial-gradient(1500px 760px at 50% 700px, rgba(94,106,210,.34), rgba(94,106,210,.08) 55%, transparent 76%); }
/* the three rings, the record at the centre */
svg.gsc { position: absolute; left: 0; top: 0; width: 1440px; height: 1270px; overflow: visible; pointer-events: none; }
.gring { fill: none; stroke: rgba(var(--hy),.2); stroke-width: 1.3; }
.gring.flow { stroke: rgba(var(--hy),.62); stroke-width: 1.4; stroke-dasharray: 2 10; stroke-linecap: round; animation: hy-flow 2.4s linear infinite; }
.gsp { fill: none; stroke: #fff6e2; stroke-width: 2.2; stroke-dasharray: 6 6; stroke-linecap: round; animation: hy-flow 1.1s linear infinite; filter: drop-shadow(0 0 4px rgba(var(--hy),.6)); }
.gsp.t { stroke: #8ff0de; stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(90,220,200,.95)); }
.gah { fill: #fff6e2; filter: drop-shadow(0 0 4px rgba(var(--hy),.8)); }
.gah.t { fill: #8ff0de; filter: drop-shadow(0 0 5px rgba(90,220,200,.9)); }
.gcore { left: 720px; top: 690px; width: 152px; height: 152px; margin: -76px 0 0 -76px; border-radius: 50%; display: grid; place-content: center; justify-items: center; text-align: center;
    background: radial-gradient(circle at 50% 30%, #fffaf0, #eadfc6 58%, #cdbd9d); box-shadow: inset 0 1px 0 #fff, 0 0 0 6px rgba(var(--hy),.12), 0 0 34px 4px rgba(var(--hy),.6), 0 0 120px 20px rgba(var(--hy),.36); }
.gcore b { font-size: 21px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: #1a1712; }
.gcore span { margin-top: 6px; max-width: 122px; font-size: 13.5px; font-weight: 500; line-height: 1.28; color: #2a251c; }
.grl { position: absolute; transform: translate(-50%, -50%); height: 24px; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; white-space: nowrap; font: 500 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fbfcfe; background: #0a1020; box-shadow: inset 0 0 0 1px rgba(var(--hy),.24); }
.fc.gfa { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; box-shadow: 0 0 0 2px #0a0d14, 0 0 0 3.5px rgba(var(--hy),.8), 0 0 24px 2px rgba(var(--hy),.5); }
.gdep { position: absolute; height: 48px; margin-top: -24px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 0 16px 0 8px; border-radius: 999px; white-space: nowrap;
    background: rgba(22,28,48,.94); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.36), inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 34px -12px #000, 0 0 30px -6px rgba(127,224,207,.55); }
.gdep .faces .fc { width: 30px; height: 30px; }
.gdep b { font-size: 15px; font-weight: 500; color: var(--ivory-mid); }
.gdep em { font-style: normal; font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: #eafaf7; font-variant-numeric: tabular-nums; }
.gdep i.up { font-size: 12.5px; color: #8ff0de; margin-left: -3px; }
.gmac { position: absolute; height: 42px; margin-top: -21px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 0 14px; border-radius: 9px; white-space: nowrap; font-size: 14px; color: #f2f2f6;
    background: rgba(11,13,21,.95); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.1), 0 0 34px -8px rgba(110,124,255,.95); }
.gmac i { color: #b9c1ff; font-size: 16px; }
.gmac em { font-style: normal; font-size: 13px; color: #d6d9e4; font-variant-numeric: tabular-nums; }
.gkey { position: absolute; left: 0; right: 0; top: 1028px; display: flex; justify-content: center; gap: 44px; font-size: 15px; color: #eceef2; }
.gkey div { display: flex; align-items: center; gap: 11px; }
.gkey .sw { width: 34px; height: 4px; border-radius: 999px; background: rgb(var(--hy)); box-shadow: 0 0 8px rgba(var(--hy),.7); }
.gkey .sw.t { background: #7fe0cf; box-shadow: 0 0 9px rgba(90,220,200,.9); }
/* who learns what: one card per ring, and one for the record */
.gcd { position: absolute; width: 280px; padding: 18px 18px 0; }
.gcd .lb { display: flex; align-items: center; gap: 8px; color: #f2f4f8; }
.gcd .lb::before { content: ''; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--hy),.9); }
.gcd .lb.c::before { background: #f4e8d9; box-shadow: 0 0 8px rgba(var(--hy),.8); }
.gcd .tt { margin-top: 9px; font-size: 20.5px; letter-spacing: -.025em; line-height: 1.15; color: var(--ivory-mid); white-space: nowrap; }
.gcd .rw { margin-top: 11px; }
.gcd .rw:first-of-type { margin-top: 14px; }
.gcd .rw b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: #f2f2f6; }
.gcd .rw span { display: flex; gap: 8px; margin-top: 2px; font-size: 14px; line-height: 1.35; color: #e4f8f4; }
.gcd .rw span::before { content: '\2192'; color: #8ff0de; flex: none; }
/* what it has to work from */
.gst { left: 64px; top: 1072px; width: 1312px; height: 144px; display: flex; align-items: center; padding: 0 30px; }
.gst .hd { flex: none; width: 262px; }
.gst .hd b { display: block; margin-top: 9px; text-wrap: balance; font-size: 20px; font-weight: 460; letter-spacing: -.02em; line-height: 1.2; color: var(--ivory-mid); }
.gst .gtl { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.gst .n { padding-left: 18px; box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
.gst .n b { display: block; font-size: 34px; font-weight: 460; letter-spacing: -.04em; line-height: 1; color: var(--ivory-mid); font-variant-numeric: tabular-nums; }
.gst .n span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.25; color: #e6e8ee; }
.gst .n em { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-style: normal; font-size: 14px; color: #eceef3; white-space: nowrap; }
.gst .n em i { font-size: 11px; color: #8ff0de; }

/* ═══════════════════════════════════════════════════════════════════════════
   2 · THE ART
   ═══════════════════════════════════════════════════════════════════════════ */
.im-p-annona { background-image: url(../assets/swarm/p-annona.webp); }
.im-p-barb { background-image: url(../assets/swarm/p-barb.webp); }
.im-p-cicero { background-image: url(../assets/swarm/p-cicero.webp); }
.im-p-corvin { background-image: url(../assets/swarm/p-corvin.webp); }
.im-p-crassus { background-image: url(../assets/swarm/p-crassus.webp); }
.im-p-livia { background-image: url(../assets/swarm/p-livia.webp); }
.im-p-nerissa { background-image: url(../assets/swarm/p-nerissa.webp); }
.im-p-quill { background-image: url(../assets/swarm/p-quill.webp); }
.im-p-spade { background-image: url(../assets/swarm/p-spade.webp); }
.im-p-tiller { background-image: url(../assets/swarm/p-tiller.webp); }
.im-s-city { background-image: url(../assets/swarm/s-city.webp); }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · THE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fit to width. Every frame is drawn at 1440 and scaled as one piece, so nothing
   inside it is re-measured. --fit is the window over 1440, capped at 1.5; the
   page's script sets the same number, exactly, where scripts run. */
@property --swarm-w { syntax: '<length>'; inherits: true; initial-value: 1440px; }
:root { --swarm-w: 100vw; --fit: min(1.5, tan(atan2(var(--swarm-w), 1440px))); }
.frame { margin: 0 auto; zoom: var(--fit); }

/* what the drawing never had to say, because it was not a page yet. The frames sit in
   .frames, one step inside main, so site.css's section grid (main > section) never
   reaches them; its heading rule does, and is handed back here. */
.frame :is(h1, h2).h { background: none; -webkit-text-fill-color: currentcolor; padding-bottom: 0; text-wrap: nowrap; }
.frame a { text-decoration: none; }
.frame .city::before { content: none; }   /* site.css lights its own city; this one is the drawing's */
/* the wrappers a phone needs are not boxes on a desktop: the drawing's coordinates still read off the frame */
.pic, .pic-in, .relay, .gorb, .gorb-in { display: contents; }

/* past 2160 the drawing stops growing and sits centred, its edges let go into the ground */
@media (min-width: 2200px) {
  .frame { -webkit-mask: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
                   mask: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .frame *, .frame *::before, .frame *::after { animation: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Below 900 a 1440 drawing scaled to fit is too small to read, so each frame is
   re-laid: the words first, as a column, then its picture.
     hero          the six cards keep their drawn size and the row scrolls sideways
     data … reports the product windows keep their layout at 70% and the picture pans
     intelligence  the rings shrink to the window; the four cards and the strip stack
   The drawing places everything by coordinate, so the wrappers that were not boxes
   on a desktop become the boxes here.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .frame { --gut: max(20px, calc(50vw - 280px)); --z: .7;
    zoom: 1; width: auto; height: auto !important; display: flex; flex-direction: column; gap: 22px; padding: 76px var(--gut) 60px; }
  .frame .head2, .frame .ld2 { position: relative; left: auto; top: auto; }
  .frame .eb { font-size: 11px; letter-spacing: .34em; }
  .frame .head2 .h { font-size: clamp(34px, 9.4vw, 50px); line-height: 1.05; margin-top: 16px; text-wrap: balance; white-space: normal; }
  .frame .h span { width: auto; }
  .frame .ld { font-size: 18px; } .frame .ld span { text-wrap: balance; }
  .frame .stars { opacity: .4; } .frame .stars.b, .frame .stars.c { opacity: .25; }
  .frame .haze { opacity: .7; }
  .frame .city { background-size: auto 100%; height: 240px; }

  /* a picture that pans: the windows as drawn, at 70%, cut to what the frame holds below its words */
  .pic { display: block; position: relative; flex: none; margin: 0 calc(-1 * var(--gut)); height: calc(var(--ph) * var(--z));
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pic::-webkit-scrollbar { display: none; }
  .pic-in { display: block; position: absolute; left: 0; top: 0; width: 1400px; height: var(--ph); zoom: var(--z); }
  .pic-in > * { margin-top: calc(-1 * var(--po)); margin-left: -44px; }
  .pic-in > svg.threads { width: 1440px; height: var(--fh); }
  .pichint { display: block; margin: -8px 0 0; font-size: 13px; color: #b9c0cd; }

  /* 1 · the hero: one business at six stops, a row that scrolls */
  .frame.fA { padding-top: 112px; padding-bottom: 210px; } .frame.fA .city { height: 200px; }
  .relay { display: flex; gap: 12px; margin: 6px calc(-1 * var(--gut)) 0; padding: 30px var(--gut) 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .relay::-webkit-scrollbar { display: none; }
  .relay > svg.threads, .relay > .astem { display: none; }
  .relay .ac { position: relative; left: auto !important; top: auto; flex: none; scroll-snap-align: center; counter-increment: stop; }
  .relay { counter-reset: stop; }
  .relay .bead-n { display: none; }
  .relay .ac::before { content: counter(stop); position: absolute; left: 50%; top: -18px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; display: grid; place-items: center;
    font: 600 14px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: rgb(var(--hy)); background: #171d2e; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1.5px rgba(var(--hy),.7), 0 0 22px 0 rgba(var(--hy),.55); }
  .relay .ac.call::before { color: #f6e2a8; background: #2a2414; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1.5px rgba(var(--need),.95), 0 0 24px 2px rgba(226,190,110,.8); }
  .fA .ares { position: relative; left: auto; top: auto; width: auto; height: auto; flex-direction: column; align-items: flex-start; gap: 20px; padding: 22px 20px 24px; }
  .fA .ares .own { width: auto; margin: 0; } .fA .ares .nums { width: 100%; grid-template-columns: 1fr 22px 1fr 22px 1fr; align-items: start; }
  .fA .ares .n b { font-size: clamp(34px, 10vw, 48px); } .fA .ares .n span { font-size: 10.5px; letter-spacing: .06em; white-space: normal; text-wrap: balance; }
  .fA .ares .ar { font-size: 22px; margin-top: 10px; }

  /* 6 · intelligence: the rings fit the window, then the four cards and the strip */
  .gorb { display: block; position: relative; flex: none; align-self: center; overflow: hidden; width: 744px; height: 720px; zoom: min(1, tan(atan2(calc(100vw - 2 * var(--gut)), 744px))); }
  .gorb-in { display: block; position: absolute; left: -348px; top: -334px; width: 1440px; height: 1270px; }
  .fF .gkey { position: relative; top: auto; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14.5px; }
  .fF .gcd { position: relative; left: auto !important; top: auto !important; width: auto; height: auto !important; padding-bottom: 20px; }
  .fF .gcd .tt { white-space: normal; }
  .fF .gst { position: relative; left: auto; top: auto; width: auto; height: auto; flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 20px 24px; }
  .fF .gst .hd { width: auto; } .fF .gst .gtl { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .fF .gst .n { padding-left: 14px; } .fF .gst .n em { white-space: normal; text-wrap: balance; align-items: flex-start; } .fF .gst .n em i { margin-top: 4px; }
}
@media (min-width: 900px) { .pichint { display: none; } }

/* ───────────────────────────────────────────────────────────────────────────
   Under the frames: the summary and the close. Neither is a drawing. They sit on
   site.css's section grid and are styled here because only this page has them.
   ─────────────────────────────────────────────────────────────────────────── */

/* the summary: the page again as one picture. A market of lights comes in at the top and
   narrows through the five parts, in the order they ran, and what the last part keeps runs
   back up to the first. The picture is drawn in five bands of equal height and the five
   lines of copy are ruled to the same height, so each line sits beside its own band; both
   stand on one sheet of glass. The heading and lede sit where a drawn frame's do.
   (The picture is written by the kit's summary/gen.py; the numeral comes from a counter.) */
#summary { --sm-hy: 242, 236, 220; --sm-row: clamp(110px, 10.28vw, 148px);
  position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 508px); column-gap: 0; align-items: end; overflow: hidden;
  padding-left: max(var(--pad), calc((100% - 1248px) / 2)); padding-right: max(var(--pad), calc((100% - 1248px) / 2));
  background:
    radial-gradient(40% 44% at 30% 62%, rgba(94, 106, 210, .3), transparent 74%),
    radial-gradient(26% 16% at 31% 80%, rgba(226, 190, 110, .14), transparent 78%),
    var(--ground); }
#summary > .stars { z-index: 0; }
#summary > :not(.stars) { position: relative; z-index: 1; }
#summary > .eyebrow { grid-column: 1 / -1; grid-row: 1; margin-bottom: 20px; color: #9aa5b8; }
#summary > h2 { grid-column: 1; grid-row: 2; font-size: clamp(40px, 4.3vw, 62px); font-weight: 460; line-height: 1; letter-spacing: -.042em;
  background-image: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%); padding-bottom: .12em; }
#summary > h2 span, #summary .lede span { display: block; }
#summary > .lede { grid-column: 2; grid-row: 2; max-width: none; margin: 0; padding-bottom: 9px; }
/* placed by id: site.css's own rule for a section's children outweighs a class */
#summary > .sm { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); margin-top: 68px; overflow: hidden;
  border-radius: 12px; background-color: rgba(22, 29, 50, .58); background-image: linear-gradient(to bottom, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 30%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 110px -40px #000, 0 0 140px -30px rgba(94, 106, 210, .7); }

/* the picture: 580 x 660, five bands of 132 */
.sm-art { position: relative; height: calc(var(--sm-row) * 5); aspect-ratio: 580 / 660; }
.sm-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sm-rule { fill: none; stroke: rgba(255, 255, 255, .085); stroke-width: 1; }
.sm-cone { fill: url(#sm-g-cone); }
.sm-halo { fill: url(#sm-g-halo); }
.sm-edge { fill: none; stroke: rgba(var(--sm-hy), .36); stroke-width: 1.1; }
.sm-rim { fill: url(#sm-g-rim); filter: drop-shadow(0 0 5px rgba(var(--sm-hy), .8)); }
.sm-found { fill: #b4bfee; opacity: .7; }
.sm-dropped { fill: #8e98c4; opacity: .28; }
.sm-kept { fill: #fff8ea; filter: drop-shadow(0 0 3px rgba(var(--sm-hy), .95)) drop-shadow(0 0 9px rgba(170, 182, 255, .75)); }
.sm-wash { fill: url(#sm-g-wash); }
.sm-scan { fill: url(#sm-g-scan); filter: drop-shadow(0 0 5px rgba(var(--sm-hy), .95)) drop-shadow(0 0 14px rgba(170, 182, 255, .7)); }
.sm-letters rect { fill: rgba(34, 43, 74, .96); stroke: rgba(var(--sm-hy), .9); stroke-width: 1.5; }
.sm-letters path { fill: none; stroke: rgba(var(--sm-hy), .9); stroke-width: 1.5; stroke-linejoin: round; }
.sm-letters { filter: drop-shadow(0 0 5px rgba(var(--sm-hy), .34)) drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }
.sm-gate { fill: url(#sm-g-gate); filter: drop-shadow(0 0 6px rgba(226, 190, 110, .95)) drop-shadow(0 0 18px rgba(191, 162, 95, .7)); }
.sm-replies > g > path:first-child { fill: rgba(40, 128, 122, .9); stroke: #a8e6dc; stroke-width: 1.5; stroke-linejoin: round; }
.sm-replies { filter: drop-shadow(0 0 7px rgba(74, 190, 178, .6)); }
.sm-rl { fill: none; stroke: #e6faf7; stroke-width: 2; stroke-linecap: round; opacity: .92; }
.sm-dot-t { fill: #7fdccf; filter: drop-shadow(0 0 4px rgba(74, 190, 178, .9)); }
.sm-deal { fill: rgba(150, 118, 44, .82); stroke: #f3dc9c; stroke-width: 1.2; filter: drop-shadow(0 0 5px rgba(226, 190, 110, .6)); }
.sm-thr { fill: none; stroke: rgba(var(--sm-hy), .92); stroke-width: 1.9; filter: drop-shadow(0 0 4px rgba(var(--sm-hy), .6)); }
.sm-run { fill: #fffaf3; filter: drop-shadow(0 0 5px rgba(var(--sm-hy), 1)); animation: sm-run 3.6s linear infinite; }
.sm-run.b { animation-delay: -1.8s; }
.sm-br { fill: none; stroke: rgba(var(--sm-hy), .5); stroke-width: 1; }
.sm-node { fill: #0a1020; stroke: rgb(var(--sm-hy)); stroke-width: 1.7; filter: drop-shadow(0 0 5px rgba(var(--sm-hy), .75)); }
.sm-card { fill: url(#sm-g-card); stroke: rgba(255, 255, 255, .22); stroke-width: 1; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(94, 106, 210, .5)); }
.sm-card-hi { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; stroke-linecap: round; }
.sm-sk { fill: rgba(255, 255, 255, .32); }
.sm-sk.b { fill: rgba(var(--sm-hy), .78); }
.sm-bars rect { fill: #6a8ee6; }
.sm-bars rect.hi { fill: #f3dc9c; filter: drop-shadow(0 0 6px rgba(226, 190, 110, .85)); }
.sm-q { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; }
.sm-ans { fill: rgba(var(--sm-hy), .92); }
.sm-ans.d { fill: rgba(var(--sm-hy), .4); }
.sm-ring { fill: none; stroke: rgba(var(--sm-hy), .55); stroke-width: 1.1; }
.sm-ring.o { stroke: rgba(var(--sm-hy), .32); stroke-dasharray: 2 6; }
.sm-sat { fill: #fff8ea; filter: drop-shadow(0 0 4px rgba(var(--sm-hy), .9)); }
.sm-core-glow { fill: rgba(236, 206, 150, .34); filter: blur(10px); }
.sm-core { fill: url(#sm-g-core); filter: drop-shadow(0 0 10px rgba(var(--sm-hy), .95)) drop-shadow(0 0 30px rgba(226, 190, 110, .65)); }
.sm-arc { fill: none; stroke: rgba(var(--sm-hy), .92); stroke-width: 1.9; stroke-dasharray: 3 7; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(var(--sm-hy), .6)); animation: sm-back 1.4s linear infinite; }
.sm-ah { fill: #fff8ea; filter: drop-shadow(0 0 5px rgba(var(--sm-hy), .8)); }
.sm-lead { fill: none; stroke: rgba(var(--sm-hy), .42); stroke-width: 1; }
.sm-lead.n, .sm-n { display: none; }
.sm-ld { fill: rgb(var(--sm-hy)); filter: drop-shadow(0 0 4px rgba(var(--sm-hy), .85)); }
.sm-n { font: 500 17px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .04em; fill: #b4bccb; }
@keyframes sm-run { from { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } to { transform: translateY(184px); opacity: 0; } }
@keyframes sm-back { to { stroke-dashoffset: -20; } }

/* the two things that are yours, set on the picture where they happen */
.sm-you { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; height: 28px; padding: 0 13px; border-radius: 999px;
  font-size: 13px; line-height: 1; white-space: nowrap; color: #f6e2a8; background: #2a2414;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1.5px rgba(236, 214, 160, .95), 0 0 24px 1px rgba(226, 190, 110, .6); }
/* the approval stands on its gate, so nothing under the gate is covered */
.sm-you.g { transform: translate(-50%, calc(-100% - 6px)); }

/* the five lines, one per band */
.sum { display: grid; grid-template-rows: repeat(5, var(--sm-row)); margin: 0; padding: 0; list-style: none; counter-reset: sum; }
.sum li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 20px; align-content: center; margin: 0; padding: 0 36px 2px 46px; }
.sum li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .085); }
.sum li::before { content: counter(sum, decimal-leading-zero); counter-increment: sum; position: static; grid-row: 1 / span 2; align-self: center; width: auto; height: auto; background: none; opacity: 1;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; letter-spacing: .04em; color: #b4bccb; }
/* the leader, carried on from the picture's edge to the numeral */
.sum li::after { content: ''; position: absolute; left: 0; top: 50%; width: 32px; height: 1px; background: linear-gradient(to right, rgba(var(--sm-hy), .42), rgba(var(--sm-hy), .2)); }
.sum b { grid-column: 2; font-size: clamp(27px, 2.36vw, 34px); font-weight: 460; line-height: 1.12; letter-spacing: -.034em; color: var(--ivory-mid); }
.sum span { grid-column: 2; max-width: 24.5em; margin-top: 7px; font-size: clamp(17px, 1.32vw, 19px); font-weight: 300; line-height: 1.42; color: #e4e1db; text-wrap: pretty; }

/* the close: Home's close, on this page. Centred, the three parts named, the one
   button, and the hero's city rising out of the floor under a warm glow. The city
   is a grid item bled to both edges and to the floor. */
#close { --close-y: clamp(72px, 9vw, 136px); grid-template-columns: minmax(0, 1fr); justify-items: center; overflow: hidden;
  padding-top: var(--close-y); padding-bottom: var(--close-y); text-align: center;
  background:
    radial-gradient(60% 48% at 50% 100%, rgba(236, 186, 116, .5), transparent 78%),
    radial-gradient(90% 50% at 50% 100%, rgba(80, 118, 196, .18), transparent 78%),
    radial-gradient(70% 85% at 50% 100%, rgba(227, 184, 122, .14), transparent 82%),
    radial-gradient(48% 40% at 50% 24%, rgba(227, 184, 122, .13), transparent 76%),
    var(--ground); }
#close > * { grid-column: 1; grid-row: auto; }
#close .eyebrow { margin-bottom: 26px; color: #9aa5b8; }
#close > h2 { margin-bottom: 40px; font-size: clamp(40px, 5.35vw, 77px); font-weight: 460; line-height: 1; letter-spacing: -.042em;
  background-image: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%); padding-bottom: .12em; }
#close > h2 span { display: block; }
#close p:not(.eyebrow) { margin-bottom: .3em; font-size: 20.5px; font-weight: 300; line-height: 1.5; color: var(--muted); }
#close p b { font-weight: 400; color: var(--ivory-mid); }
#close .part3 i { font-style: normal; }
#close p.all { margin-top: .9em; color: var(--cream); }
#close a.button { justify-self: center; margin-top: 48px; }
#close p.fine { margin: 24px 0 0; font-size: 15.5px; color: var(--text-2); }
#close::after { content: ''; justify-self: stretch; height: max(190px, 22.2vw);   /* hero-city.webp is 1586 x 352 */
  margin: 4px calc(50% - 50vw) calc(-1 * var(--close-y));
  background: url('../assets/hero-city.webp') center bottom / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 46%); mask-image: linear-gradient(to bottom, transparent, #000 46%);
  pointer-events: none; }

/* under 1180 the copy tightens so two lines still fit a band */
@media (max-width: 1179px) {
  .sum li { grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; padding: 0 24px 2px 40px; }
  .sum li::after { width: 28px; }
  .sum b { font-size: 26px; }
  .sum span { margin-top: 5px; font-size: 16.5px; }
}
/* under 1000 the picture stands over its copy on the same glass: the leaders stop short and end
   on a numeral, and the five lines run the full width under it */
@media (max-width: 999px) {
  #summary > .sm { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: 56px; }
  .sm-art { width: min(100%, 640px); height: auto; }
  .sm-lead.w { display: none; } .sm-lead.n, .sm-n { display: inline; }
  .sm-n { font-size: 13px; }
  .sum { grid-template-rows: none; width: 100%; }
  .sum li { grid-template-columns: 34px minmax(0, 190px) minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 24px 32px 25px; }
  .sum li:first-child { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .085); }
  .sum li::before { grid-row: auto; align-self: baseline; }
  .sum li::after { display: none; }
  .sum b { font-size: 27px; }
  .sum span { grid-column: 3; max-width: none; margin-top: 0; font-size: 18px; }
}
/* 900 and down the heading and lede stack, as the board's do */
@media (max-width: 900px) {
  #summary { grid-template-columns: minmax(0, 1fr); }
  #summary > .eyebrow, #summary > h2, #summary > .lede, #summary > .sm { grid-column: 1; grid-row: auto; }
  #summary > h2 { margin-bottom: 22px; }
  #summary > .lede { padding-bottom: 0; }
  #summary > .sm { margin-top: 44px; }
}
/* a phone: each line is a name over its sentence */
@media (max-width: 760px) {
  /* the glass keeps its edge and its shadow; the glow round it has no margin to fall in here */
  #summary > .sm { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px #000; }
  .sm-you { height: 22px; padding: 0 9px; font-size: 12px; }
  .sm-you.g { transform: translate(-50%, calc(-100% - 3px)); }
  .sm-n { font-size: 19px; }
  .sum li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 18px 20px 19px; }
  .sum b { font-size: 24px; }
  .sum span { grid-column: 2; margin-top: 5px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .sm-arc { animation: none; } .sm-run { display: none; } }
/* a phone: each of the three parts is a name over its line;
   the glow lies along the floor, because an ellipse sized off a tall narrow section stands up as a patch */
@media (max-width: 760px) {
  #summary > h2 { font-size: min(34px, 8.4vw); }
  #close { background:
    radial-gradient(110% 21% at 50% 100%, rgba(236, 186, 116, .5), transparent 80%),
    radial-gradient(140% 40% at 50% 100%, rgba(80, 118, 196, .18), transparent 78%),
    radial-gradient(90% 30% at 50% 18%, rgba(227, 184, 122, .1), transparent 76%),
    var(--ground); }
  #close > h2 { margin-bottom: 30px; font-size: min(44px, 8.6vw); }
  #close p:not(.eyebrow) { font-size: 18px; line-height: 1.4; }
  #close p.part3 { margin-bottom: 1.25em; line-height: 1.3; }
  #close .part3 b, #close .part3 span { display: block; }
  #close .part3 span { margin-top: 1px; color: var(--text-2); }
  #close .part3 i { display: none; }
  #close .part3 span::first-letter { text-transform: uppercase; }
  #close p.all { margin-top: .8em; }
  #close a.button { width: 100%; margin-top: 34px; padding: 14px 24px; font-size: 16px; }
  #close p.fine { margin-top: 22px; font-size: 15px; }
  #close::after { height: 170px; margin-top: 10px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 88%); mask-image: linear-gradient(to bottom, transparent, #000 88%); }
}

/* Marketing copy flows above the fixed product drawings so longer explanations
   cannot collide with them. The approved hero uses its own layout in hero.css. */
.frame:has(> .copy-head) { height: auto; padding: 84px 0 60px; }
.copy-head { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; margin: 0 96px; align-items: start; }
.copy-head .head2, .copy-head .ld2 { position: static; }
.frame .copy-head .h { font-size: 60px; line-height: 1.06; text-wrap: balance; white-space: normal; }
.copy-head .h span { width: auto; }
.copy-head .ld { padding-top: 44px; line-height: 1.55; }
.frame > .pic { display: block; position: relative; height: var(--ph); margin-top: 56px; }
.frame > .pic > .pic-in { display: block; position: absolute; left: 0; top: calc(-1 * var(--po)); width: 1440px; height: var(--fh); }
.frame > .copy-transition, #every-campaign > .copy-transition, #summary > .copy-transition {
  position: relative; margin: 44px 96px 0; padding-top: 24px; border-top: 1px solid rgba(242,236,220,.17);
  font-size: 21px; line-height: 1.45; font-weight: 400; color: var(--ivory-mid); text-wrap: pretty;
}
#every-campaign > .copy-transition { margin-inline: 0; font-size: 20px; }
.outreach-support, .follow-up { position: relative; margin-top: 64px; }
.support-head h3 { margin: 0; font-size: 40px; font-weight: 460; line-height: 1.12; letter-spacing: -.035em; color: var(--ivory-mid); text-wrap: balance; }
.support-head .eb { margin-bottom: 16px; }
.support-head .ld { padding-top: 0; }
.outreach-capacity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 32px 64px 0; }
.outreach-capacity .cst { position: relative; top: auto; left: auto; width: auto; height: auto; min-height: 178px; padding-bottom: 18px; }
.follow-up-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 64px 0; padding: 0; list-style: none; }
.follow-up-steps li { margin: 0; padding: 24px; color: var(--text); }
.follow-up-steps li::before { content: none; }
.follow-up-steps .step-number { font: 500 13px/1 var(--mono); letter-spacing: .12em; color: var(--gold); }
.follow-up-steps h4 { margin: 18px 0 12px; font-size: 23px; font-weight: 460; line-height: 1.18; letter-spacing: -.02em; color: var(--ivory-mid); }
.follow-up-steps p { font-size: 17px; line-height: 1.5; color: var(--text-2); }
#every-campaign .show-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
#every-campaign .show-head .lede { padding-top: 44px; }
#every-campaign .s2-stages { flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 40px; }
#every-campaign .s2-stages::before { content: none; }

.intelligence-layout { position: relative; display: grid; grid-template-columns: 320px minmax(0, 1fr) 320px; gap: 24px; margin: 56px 64px 0; }
.intelligence-layout .gorb { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: block; position: relative; width: 744px; height: 720px; zoom: .8387; }
.intelligence-layout .gorb-in { display: block; position: absolute; left: -348px; top: -334px; width: 1440px; height: 1270px; }
.intelligence-layout .gcd { position: relative; width: auto; padding: 24px; }
.intelligence-layout .synths { grid-column: 1; grid-row: 1; }
.intelligence-layout .departments { grid-column: 1; grid-row: 2; }
.intelligence-layout .machines { grid-column: 3; grid-row: 1; }
.intelligence-layout .record { grid-column: 3; grid-row: 2; }
.intelligence-layout .gcd .tt { margin: 16px 0; font-size: 29px; font-weight: 460; line-height: 1.1; white-space: normal; text-wrap: pretty; }
.intelligence-layout .gcd p { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.intelligence-layout .gcore { width: 180px; height: 180px; margin: -90px 0 0 -90px; }
.intelligence-layout .gcore b { max-width: 148px; font-size: 21px; line-height: 1.04; }
.intelligence-layout .gcore span { max-width: 135px; font-size: 12.5px; line-height: 1.2; }
.fF > .gkey { position: relative; top: auto; margin: 32px 64px 0; }

#summary { align-items: start; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 72px; }
#summary > .lede { padding: 0; }
#summary > .sm { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
#summary .sm-art { align-self: center; width: 100%; height: auto; aspect-ratio: 580 / 660; }
#summary .sm-rule, #summary .sm-lead, #summary .sm-ld { display: none; }
#summary .sum li::after { display: none; }
#summary .sum { grid-template-rows: repeat(5, minmax(160px, 1fr)); }
#summary .sum li { padding: 24px 28px 24px 40px; }
#summary .sum b { font-size: clamp(24px, 2.1vw, 30px); }
#summary > .copy-transition { grid-column: 1 / -1; grid-row: 4; margin-inline: 0; }
#close > h2 { margin-bottom: 24px; }
#close p.close-lede { max-width: 760px; margin: 0 auto 40px; color: var(--text-2); text-wrap: pretty; }

@media (max-width: 999px) {
  #summary > .sm { grid-template-columns: minmax(0, 1fr); }
  #summary .sm-art { width: min(100%, 640px); height: auto; aspect-ratio: 580 / 660; }
  #summary .sum { grid-template-rows: none; }
  #summary .sum li { grid-template-columns: 30px minmax(0, 1fr); padding: 24px; }
  #summary .sum span { grid-column: 2; margin-top: 8px; }
}
@media (max-width: 900px) {
  #every-campaign .show-head, #summary { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #every-campaign .show-head .lede { padding-top: 22px; }
  #summary > .copy-transition { grid-column: 1; grid-row: auto; }
}
@media (max-width: 899px) {
  .frame:has(> .copy-head) { padding: 76px var(--gut) 60px; }
  .copy-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 0; }
  .frame .copy-head .h { font-size: clamp(34px, 9.4vw, 50px); }
  .copy-head .ld { padding-top: 0; font-size: 18px; }
  .frame > .pic { height: calc(var(--ph) * var(--z)); margin-top: 0; }
  .frame > .pic > .pic-in { top: 0; width: 1400px; height: var(--ph); }
  .frame > .copy-transition { margin: 12px 0 0; font-size: 20px; }
  .outreach-support, .follow-up { margin-top: 22px; }
  .support-head h3 { font-size: clamp(28px, 6.8vw, 38px); }
  .outreach-capacity, .follow-up-steps { grid-template-columns: minmax(0, 1fr); margin: 28px 0 0; gap: 16px; }
  .outreach-capacity .cst { padding: 22px; }
  .outreach-capacity .cib { grid-template-columns: minmax(0, 1fr); row-gap: 7px; }
  .outreach-capacity .cib .l { flex-wrap: wrap; }
  .outreach-capacity .clv { flex-wrap: wrap; height: auto; gap: 4px; }
  .outreach-capacity .clv span { min-width: 68px; }
  .follow-up-steps h4 { font-size: 24px; margin-top: 14px; }
  .intelligence-layout { display: flex; flex-direction: column; gap: 20px; margin: 0; }
  .intelligence-layout .gorb { align-self: center; zoom: min(1, tan(atan2(calc(100vw - 2 * var(--gut)), 744px))); }
  .intelligence-layout .gcd { width: 100%; padding: 24px; }
  .intelligence-layout .gcd .tt { font-size: 29px; }
  .intelligence-layout .gcd p { font-size: 18px; }
  .fF > .gkey { margin: 0; gap: 12px; }
  .gkey .sw { flex: none; }
}