/* 09 · Relay — software. Near-black, violet, mint; Unbounded and Outfit. A fluid shader behind a
   headline that changes its mind, a fan of cards, a live bento, a chart that draws itself. */
.v-relay { --bg: #0a0a14; --fg: #f2f0ff; --mut: #9a95b8; --acc: #7a3cff; --acc2: #2ee6a8; --edge: #24223a; background: var(--bg); color: var(--fg); font-family: "Outfit", var(--sans); --btn-r: 12px; --fx-fluid-1: #7a3cff; --fx-fluid-2: #2ee6a8; --fx-fluid-3: #1a1040; --fx-fluid-4: #ff2fb0; --fx-fill: var(--acc2); --fx-line-color: var(--acc2); --fx-chart-ink: var(--fg); --fx-chart-text: var(--mut); --fx-chart-grid: var(--edge); --fx-chart-surface: #110f22; --fx-line: var(--acc2); --fx-logo-ink: var(--mut); --fx-bento-chip: var(--acc2); --fx-bento-chip-ink: #0a0a14; }
.v-relay .re-hero { min-height: 100svh; display: grid; align-content: center; background: #150f2e; }
.v-relay .re-hero__in { position: relative; z-index: 1; padding-block: clamp(56px, 8vw, 100px); }
.v-relay .eyebrow--pill { color: var(--acc2); }
.v-relay h2 { font: 900 clamp(38px, 7.4vw, 118px)/1 "Unbounded", var(--display); letter-spacing: -0.04em; max-width: 12ch; }
.v-relay h2 em { font-style: normal; color: var(--acc2); }
.v-relay .lede { margin-top: 24px; color: var(--mut); max-width: 52ch; }
.v-relay .btn { background: var(--acc); color: #fff; }
.v-relay .re-body { padding-block: clamp(56px, 7vw, 100px); }
.v-relay .re-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; color: var(--mut); }
.v-relay .re-logos svg { width: 100%; height: auto; }
.v-relay .re-fan { margin-top: clamp(56px, 7vw, 96px); }
.v-relay .re-card .ph { display: block; aspect-ratio: 4 / 5; border-radius: 16px; }
.v-relay .re-card figcaption { margin-top: 10px; font: 600 12px/1 "Outfit", var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.v-relay .re-card figcaption b { color: var(--acc2); margin-right: 8px; }
.v-relay .re-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(56px, 7vw, 96px); }
.v-relay .re-tile { padding: 24px; border: 1px solid var(--edge); border-radius: 18px; background: #110f22; min-height: 170px; display: grid; align-content: end; }
.v-relay .re-tile[data-fx-size="wide"] { grid-column: span 2; }
.v-relay .re-tile[data-fx-size="tall"] { grid-row: span 2; }
.v-relay .re-tile--photo { padding: 0; overflow: clip; }
.v-relay .re-tile--photo .ph { height: 100%; min-height: 170px; }
.v-relay .re-k { font: 600 11px/1 "Outfit", var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mut); }
.v-relay .re-big { font: 900 clamp(40px, 4.4vw, 64px)/1 "Unbounded", var(--display); margin-top: 10px; color: var(--acc2); }
.v-relay .re-big small { font-size: 0.5em; }
.v-relay .re-s { color: var(--mut); font-size: 14px; margin-top: 6px; }
.v-relay .re-quote { font: 500 clamp(20px, 2vw, 28px)/1.3 "Outfit", var(--sans); margin-top: 10px; }
.v-relay .re-chart { margin-top: clamp(56px, 7vw, 96px); display: grid; gap: 16px; }
.v-relay .re-chart__cap b { display: block; font: 700 22px/1.2 "Outfit", var(--sans); }
.v-relay .re-chart__cap span { color: var(--mut); font-size: 14px; }
.v-relay [data-fx-plot] { position: relative; aspect-ratio: 2 / 1; }
.v-relay [data-fx-plot] svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-relay [data-fx-grid] line { stroke: var(--edge); }
.v-relay [data-fx-area] { fill: rgb(46 230 168 / 0.12); }
.v-relay [data-fx-line] { fill: none; stroke: var(--acc2); stroke-width: 3; }
.v-relay [data-fx-points] circle { fill: var(--acc2); }
.v-relay [data-fx-marks] text { font: 600 14px "Outfit", var(--sans); fill: var(--mut); }
.v-relay .fxlist { color: var(--mut); }
@media (max-width: 760px) { .v-relay .re-bento { grid-template-columns: 1fr 1fr; } }