/* Skyline site mock, round 5. Local only, not the shipped site.
   One page. A switch changes the examples, never the page.
   Motion and light are part of the system, and all of it stands down
   for people who ask for reduced motion. */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #fdba74; }
@property --accent-rgb { syntax: "<number>+"; inherits: true; initial-value: 253 186 116; }

:root {
  --ink: #020617; --ink-2: #070e1d; --ink-3: #0c1628; --line: #1a2740;
  --text: #f8fafc; --soft: #dbe3ee; --muted: #a8b5c8;
  --blue: #3b82f6; --violet: #8b5cf6; --orange: #f97316;
  --accent: #fdba74; --glow: 249, 115, 22;
  --display: "Instrument Serif", Georgia, serif; --display-weight: 400; --display-track: -0.01em;
  --gutter: clamp(20px, 5.6vw, 72px);
  --section: clamp(88px, 10vw, 148px);
  --t-hero: clamp(48px, min(7.6vw, 12.5vh), 104px); --t-h2: clamp(32px, min(4.6vw, 6.4vh), 60px);
  --t-lede: clamp(18px, 1.5vw, 21px);
  --header: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { transition: --accent .7s var(--ease); }
body[data-aud="all"] { --accent: #c4b5fd; --glow: 139, 92, 246; }
body[data-aud="business"] { --accent: #fdba74; --glow: 249, 115, 22; }
body[data-aud="builders"] { --accent: #93c5fd; --glow: 59, 130, 246; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #0f172a; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* Type */
.display { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); color: #fff; }
h1.display { font-size: var(--t-hero); line-height: 1; }
h2.display { font-size: var(--t-h2); line-height: 1.06; }
.lede { font-size: var(--t-lede); line-height: 1.55; color: var(--soft); max-width: 30em; }
.grad { background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 30%, #fb923c 55%, #a78bfa 80%, #60a5fa 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* The horizon: the logo's three bands, used as the page's moving line */
.horizon { height: 3px; width: min(420px, 70%); border-radius: 3px; background: linear-gradient(90deg, var(--blue) 0 33.3%, var(--violet) 33.3% 66.6%, var(--orange) 66.6% 100%); transform-origin: left center; box-shadow: 0 0 24px rgba(139, 92, 246, .55); }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--blue), var(--violet), var(--orange)); }

/* Glass */
.glass { position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.022) 100%); border: 1px solid rgba(255,255,255,.11); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 80px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .35s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--glow), .22), transparent 62%); }
.glass:hover::before { opacity: 1; }

/* Buttons: two styles */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer; font-size: 16px; font-weight: 600; color: #0f172a; background: linear-gradient(180deg, #ffffff 0%, #e4e9f1 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(15,23,42,.12), 0 10px 34px rgba(255,255,255,.16); transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .3s ease; }
.btn::after, .store::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transition: left .7s var(--ease); pointer-events: none; }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 16px 44px rgba(255,255,255,.26); }
.btn:hover::after, .store:hover::after { left: 120%; }
.btn:active { transform: translateY(0) scale(.98); }
.btn.sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 600; color: #fff; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.more:hover { background-size: 100% 1px; }
.more svg { transition: transform .3s var(--ease); }
.more:hover svg { transform: translate(3px, 0); }
.more.down:hover svg { transform: translate(0, 3px); }
.more.up:hover svg { transform: translate(0, -3px); }
.more.out:hover svg { transform: translate(2px, -2px); }

/* Header */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; min-height: var(--header); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.top.scrolled { background: linear-gradient(180deg, rgba(8,14,30,.78), rgba(2,6,23,.66)); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.35); }
.top .wrap { position: relative; min-height: var(--header); display: flex; align-items: center; gap: 14px clamp(14px, 2.4vw, 32px); }
.brand { display: flex; align-items: center; margin-right: auto; min-height: 44px; }
.logo { height: 36px; width: auto; display: block; overflow: visible; }
.top .btn { opacity: 0; pointer-events: none; transform: translateY(-6px); max-width: 0; padding-left: 0; padding-right: 0; margin-left: calc(-1 * clamp(14px, 2.4vw, 32px)); transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .35s ease, max-width .5s var(--ease), padding .5s var(--ease), margin .5s var(--ease); white-space: nowrap; }
.top.past .btn { opacity: 1; pointer-events: auto; transform: none; max-width: 200px; padding-left: 20px; padding-right: 20px; margin-left: 0; }

/* The switch */
.seg { position: absolute; left: 50%; translate: -50% 0; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 26px rgba(var(--glow), .45); transition: transform .5s var(--ease), box-shadow .5s ease, opacity .4s ease; }
body[data-aud="all"] .seg::before { opacity: 0; }
body[data-aud="builders"] .seg::before { transform: translateX(100%); }
.seg a { position: relative; z-index: 1; min-height: 40px; padding: 0 18px; display: grid; place-items: center; border-radius: 999px; color: var(--soft); font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: color .3s ease; }
.seg a[aria-current="true"], .seg a:hover { color: #fff; }

/* Sections */
.page { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: calc(var(--header) + clamp(8px, 2.4vh, 32px)) 0 clamp(80px, 11.5vh, 112px); scroll-snap-align: start; scroll-snap-stop: always; }
.page.tint { background: var(--ink-2); }
.fit { position: relative; z-index: 1; width: 100%; transform-origin: center center; }
@media (min-width: 900px) and (min-height: 560px) {
  html { scroll-snap-type: y mandatory; }
  .page { height: 100vh; height: 100svh; min-height: 0; }
}
/* Each screen hands over to the next */
.fwd { position: absolute; left: 50%; bottom: clamp(12px, 2.6vh, 28px); translate: -50% 0; z-index: 3; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 22px 0 26px; border-radius: 999px; white-space: nowrap; font-size: 15.5px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 40px rgba(0,0,0,.45), 0 0 34px rgba(var(--glow), .28); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.fwd::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transition: left .7s var(--ease); pointer-events: none; }
.fwd:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 20px 50px rgba(0,0,0,.5), 0 0 46px rgba(var(--glow), .55); }
.fwd:hover::after { left: 120%; }
.fwd svg { color: var(--accent); animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
/* Where you are */
.dots { position: fixed; right: clamp(12px, 1.6vw, 26px); top: 50%; translate: 0 -50%; z-index: 45; display: flex; flex-direction: column; gap: 4px; }
.dots a { position: relative; width: 28px; height: 22px; display: grid; place-items: center; }
.dots a::before { content: ""; width: 7px; height: 7px; border-radius: 7px; background: rgba(255,255,255,.3); transition: height .45s var(--ease), background .3s ease, box-shadow .3s ease; }
.dots a:hover::before { background: #fff; }
.dots a.cur::before { height: 20px; background: var(--accent); box-shadow: 0 0 14px rgba(var(--glow), .9); }
.dots a span { position: absolute; right: 32px; top: 50%; translate: 8px -50%; white-space: nowrap; font-size: 13px; font-weight: 500; color: #fff; padding: 6px 12px; border-radius: 999px; background: rgba(8,14,30,.9); border: 1px solid rgba(255,255,255,.14); opacity: 0; pointer-events: none; transition: opacity .25s ease, translate .25s var(--ease); }
.dots a:hover span, .dots a:focus-visible span { opacity: 1; translate: 0 -50%; }
.head { max-width: 760px; margin-bottom: clamp(24px, 5vh, 64px); }
.head .lede { margin-top: 20px; }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head.center .lede { margin-left: auto; margin-right: auto; }
.page.how .head { margin-bottom: clamp(10px, 2.4vh, 32px); }
.page.how .relay { margin: 0; }
.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient i { position: absolute; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%; filter: blur(90px); opacity: .22; background: rgba(var(--glow), 1); transition: background 1s ease; animation: drift 26s ease-in-out infinite alternate; }
.ambient i:nth-child(1) { left: -12%; top: -30%; }
.ambient i:nth-child(2) { right: -14%; bottom: -40%; background: var(--violet); animation-duration: 34s; animation-direction: alternate-reverse; opacity: .2; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(8%, 10%, 0) scale(1.18); } }


/* Audience panels */
.aud { display: none; }
body[data-aud="business"] .aud[data-for="business"], body[data-aud="builders"] .aud[data-for="builders"] { display: block; }
.aud.swap { animation: swap .7s var(--ease) both; }
@keyframes swap { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.done { transition-delay: 0s; }

/* Photo bands */
.photo { position: relative; overflow: hidden; isolation: isolate; }
.photo > .bg { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; z-index: -3; will-change: transform; }
.photo > .bg.alive { animation: breathe 28s ease-in-out infinite alternate; }
@keyframes breathe { from { scale: 1; } to { scale: 1.08; } }
.photo > .scrim { position: absolute; inset: 0; z-index: -1; }
.scrim.left { background: linear-gradient(90deg, rgba(2,6,23,.93) 0%, rgba(2,6,23,.7) 38%, rgba(2,6,23,.1) 72%, rgba(2,6,23,0) 100%), linear-gradient(180deg, rgba(2,6,23,0) 70%, rgba(2,6,23,1) 100%); }
.scrim.top-bottom { background: linear-gradient(180deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.1) 40%, rgba(2,6,23,.05) 62%, rgba(2,6,23,.9) 100%); }
.photo .aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; mix-blend-mode: screen; }
.photo .aurora i { position: absolute; border-radius: 50%; filter: blur(80px); animation: drift 22s ease-in-out infinite alternate; }
.photo .aurora i:nth-child(1) { width: 40vw; height: 40vw; left: -8%; top: 8%; background: rgba(59,130,246,.32); }
.photo .aurora i:nth-child(2) { width: 34vw; height: 34vw; left: 22%; top: 38%; background: rgba(139,92,246,.26); animation-duration: 30s; animation-direction: alternate-reverse; }
.photo .aurora i:nth-child(3) { width: 30vw; height: 30vw; right: 4%; top: 30%; background: rgba(var(--glow), .2); animation-duration: 36s; transition: background 1s ease; }

/* Hero: the download lives here */

.hero h1 .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .line > span { display: inline-block; }
.js .hero h1 .line > span { transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * 140ms + 150ms); }
@keyframes rise { to { transform: none; } }
.hero .horizon { margin-top: clamp(14px, 2.8vh, 26px); }
.js .hero .horizon { transform: scaleX(0); animation: draw 1.4s var(--ease) .75s forwards; }
@keyframes draw { to { transform: scaleX(1); } }
.hero .lede { margin-top: clamp(14px, 2.8vh, 26px); max-width: 27em; }
.js .hero .lede, .js .hero .stores, .js .hero .links { opacity: 0; transform: translateY(16px); animation: come .9s var(--ease) forwards; }
.js .hero .lede { animation-delay: .85s; } .js .hero .stores { animation-delay: 1.05s; } .js .hero .links { animation-delay: 1.25s; }
@keyframes come { to { opacity: 1; transform: none; } }
.links { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-top: 18px; }

/* Store buttons: only in the hero */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3.4vh, 32px); }
.store { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 9px 22px 9px 16px; border-radius: 16px; color: #fff; cursor: pointer; text-align: left; background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 40px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.store:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 22px 50px rgba(0,0,0,.5); }
.store:active { transform: translateY(0) scale(.98); }
.store svg { flex-shrink: 0; }
.store span { display: flex; flex-direction: column; line-height: 1.15; }
.store small { font-size: 11px; letter-spacing: .02em; color: #d5deea; }
.store strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.store.mine { border-color: rgba(var(--glow), .9); animation: halo 3.2s ease-in-out infinite; }
@keyframes halo { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 0 rgba(var(--glow), .0), 0 14px 40px rgba(0,0,0,.4); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 34px 2px rgba(var(--glow), .45), 0 14px 40px rgba(0,0,0,.4); } }

/* Demos */
.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.demo .head { margin-bottom: 0; }
.stage { position: relative; padding: 0 0 76px; max-width: 560px; }
.stage figcaption { position: absolute; left: 4px; bottom: 18px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.js .stage .step { opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .stage .step.on { opacity: 1; transform: none; }

.chat { border-radius: 26px; padding: 22px 22px 80px; max-width: 470px; display: flex; flex-direction: column; gap: 12px; }
.chat .who { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: 6px; }
.chat .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--blue)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.chat .who b { display: block; font-size: 15px; font-weight: 600; }
.chat .who span { font-size: 13px; color: var(--muted); }
.bubble { max-width: 84%; padding: 12px 16px; border-radius: 18px; font-size: 15.5px; line-height: 1.45; }
.bubble time { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.bubble.in { align-self: flex-start; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-bottom-left-radius: 6px; }
.bubble.out { position: relative; align-self: flex-end; color: #0f172a; border-bottom-right-radius: 6px; background: linear-gradient(180deg, #ffffff, #e7ecf4); box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(0,0,0,.35), 0 0 30px rgba(var(--glow), .25); }
.bubble.out time { color: #475569; }
.bubble.out .txt { transition: opacity .4s ease; }
.bubble.out .dots { position: absolute; left: 18px; top: 50%; translate: 0 -50%; display: none; gap: 5px; }
.bubble.out .dots i { width: 8px; height: 8px; border-radius: 50%; background: #64748b; animation: blink 1.1s ease-in-out infinite; }
.bubble.out .dots i:nth-child(2) { animation-delay: .15s; } .bubble.out .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.js .bubble.out.typing .txt { opacity: 0; } .js .bubble.out.typing .dots { display: flex; }
.receipt { position: absolute; right: 0; bottom: 0; width: min(296px, 74%); border-radius: 20px; padding: 18px 20px; background: linear-gradient(180deg, rgba(20,30,52,.92), rgba(8,14,28,.92)); }
.receipt h3 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.receipt ul { display: flex; flex-direction: column; gap: 10px; }
.receipt li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--soft); }
.receipt li svg { flex-shrink: 0; margin-top: 2px; color: #86efac; }

.tools { border-radius: 26px; padding: 0 0 22px; max-width: 520px; overflow: hidden; }
.tools .bar { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 13px; color: var(--muted); }
.tools .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.tools .bar span { margin-left: 8px; }
.tools .url { margin: 20px 20px 0; padding: 14px 16px; border-radius: 14px; background: rgba(2,6,23,.6); border: 1px solid rgba(255,255,255,.1); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; color: #dbeafe; white-space: nowrap; overflow: hidden; min-height: 50px; display: flex; align-items: center; }
.caret { display: inline-block; width: 2px; height: 18px; margin-left: 2px; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.tools .found { margin: 16px 20px 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #0f172a; background: linear-gradient(180deg, #ffffff, #e2e8f0); box-shadow: 0 0 26px rgba(var(--glow), .45); }
.tools ul { margin: 16px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.tools li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; color: #f1f5f9; }
.tools li em { margin-left: auto; font-family: Inter, system-ui, sans-serif; font-style: normal; font-size: 12px; color: var(--muted); }
.tools li svg { color: var(--accent); }
.tools .ready { margin: 16px 20px 0; font-size: 14.5px; color: var(--soft); display: flex; gap: 10px; align-items: center; }
.tools .ready svg { color: #86efac; }

/* Three-up */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.three.open { gap: clamp(28px, 4.4vw, 56px); }
.three .item { display: flex; flex-direction: column; gap: 10px; }
.three .item.glass { padding: clamp(24px, 2.6vw, 34px); border-radius: 24px; transition-property: transform, border-color, opacity; transition-duration: .5s, .4s, .9s; transition-timing-function: var(--ease); }
.three .item.glass:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.26); }
.three h3 { font-size: 22px; font-weight: 600; color: #fff; line-height: 1.3; }
.three p { color: var(--muted); }
.three .item > svg { color: var(--accent); margin-bottom: 8px; filter: drop-shadow(0 0 14px rgba(var(--glow), .6)); transition: color .7s ease; }
.num { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: clamp(60px, 11vh, 112px); line-height: 1; color: var(--accent); text-shadow: 0 0 30px rgba(var(--glow), .55); }

/* Everything band */
.page.everything { justify-content: space-between; text-align: center; }
.page.everything .fit { flex: 1; display: flex; }
.page.everything .wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.everything h2.display { font-size: clamp(40px, min(6.6vw, 9.4vh), 88px); line-height: 1.02; padding-top: clamp(4px, 2vh, 28px); }
.glassrow { text-align: left; padding: clamp(18px, 3vh, 30px) clamp(20px, 2.6vw, 36px); border-radius: 26px; background: linear-gradient(180deg, rgba(8,14,30,.62), rgba(2,6,23,.78)); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.marquee { overflow: hidden; margin-top: clamp(44px, 5vw, 64px); display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.track { display: flex; gap: 12px; width: max-content; animation: slide 46s linear infinite; }
.track.back { animation-direction: reverse; animation-duration: 58s; }
@keyframes slide { to { transform: translateX(-50%); } }
.chip { white-space: nowrap; padding: 11px 20px; border-radius: 999px; font-size: 15px; color: #f1f5f9; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }

/* The relay: agents above, apps below, Skyline holding the middle */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lede.between { margin: 0 auto; text-align: center; max-width: 34em; }
.relay { position: relative; margin: clamp(40px, 4.4vw, 60px) 0 clamp(72px, 8vw, 110px); }
.relay .cap { text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.rail { width: calc(100% / var(--s, 1)); margin-left: calc((100% - 100% / var(--s, 1)) / 2); overflow: hidden; padding: clamp(8px, 1.8vh, 18px) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.rail .track { display: flex; gap: 14px; width: max-content; animation: slide 80s linear infinite; }
.rail .track.back { animation-direction: reverse; animation-duration: 96s; }
.pill { --near: 0; display: inline-flex; align-items: center; gap: 12px; padding: 9px 22px 9px 9px; border-radius: 999px; white-space: nowrap; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255, calc(.12 + var(--near) * .55)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 calc(var(--near) * 40px) rgba(var(--glow), calc(var(--near) * .6)); transform: scale(calc(1 + var(--near) * .1)); opacity: calc(.6 + var(--near) * .4); }
.tile { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #0f172a; background: linear-gradient(180deg, #ffffff, #e4e9f1); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0,0,0,.35); }
.tile svg { width: 22px; height: 22px; display: block; }
.nm { display: flex; flex-direction: column; font-size: 15.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.nm small { font-size: 12px; font-weight: 500; color: var(--muted); }

.beams { display: block; width: min(1100px, 100%); height: clamp(34px, 7.4vh, 92px); margin: 0 auto; overflow: visible; }
.beams.flip { transform: scaleY(-1); }
.beams path { fill: none; vector-effect: non-scaling-stroke; }
.beams .wire { stroke-width: 1; opacity: .3; }
.beams .pulse { stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 16 520; stroke-dashoffset: 536; animation: flow 2.9s linear infinite; animation-delay: var(--d); filter: drop-shadow(0 0 6px rgba(167,139,250,.95)); }
.beams.flip .pulse { animation-direction: reverse; }
@keyframes flow { to { stroke-dashoffset: 0; } }

.core-wrap { display: flex; justify-content: center; padding: 0 var(--gutter); }
.core { width: min(740px, 100%); border-radius: 30px; padding: 20px 66px 24px 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 40px 100px rgba(0,0,0,.55), 0 0 90px rgba(var(--glow), .16); }
.core::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--angle), transparent 0 52%, #3b82f6 66%, #8b5cf6 79%, #f97316 92%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: spin 7s linear infinite; }
@keyframes spin { to { --angle: 360deg; } }
.core-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.core-top .logo { height: 24px; }
.slot { position: relative; height: 140px; margin: 0 -24px; overflow: hidden; }
.slot .feat { padding: 0 24px; }
.feat { position: absolute; inset: 0; display: flex; align-items: center; gap: 26px; opacity: 0; transform: translateY(72%); filter: blur(8px); transition: transform .85s var(--ease), opacity .55s ease, filter .55s ease; }
.feat.cur { opacity: 1; transform: none; filter: none; }
.feat.gone { opacity: 0; transform: translateY(-72%); filter: blur(8px); }
.feat .say h3 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; }
.feat .say p { margin-top: 8px; color: var(--soft); font-size: 17px; line-height: 1.4; }
.ticks { position: absolute; right: 26px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 7px; }
.tick { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.24); cursor: pointer; transition: height .45s var(--ease), background .3s ease; }
.tick::before { content: ""; position: absolute; inset: -5px -14px; }
.tick.cur { height: 24px; background: var(--accent); box-shadow: 0 0 14px rgba(var(--glow), .9); }

/* Small moving pictures, one per feature */
.mini { position: relative; flex: 0 0 96px; height: 96px; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; color: var(--accent); background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 20px rgba(var(--glow), .3); }
.mini i, .mini b { display: block; }
.mini.ask { flex-direction: column; font-size: 11px; font-weight: 600; }
.mini.ask span { padding: 5px 13px; border-radius: 999px; color: var(--muted); border: 1px solid rgba(255,255,255,.2); }
.mini.ask .yes { color: #0f172a; border-color: transparent; background: linear-gradient(180deg, #fff, #e4e9f1); animation: press 2.6s var(--ease) infinite; }
@keyframes press { 0%, 40%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--glow), 0); } 52% { transform: scale(.9); } 64% { transform: scale(1.08); box-shadow: 0 0 22px 4px rgba(var(--glow), .8); } }
.mini.toggle i { position: relative; width: 56px; height: 32px; border-radius: 999px; background: rgba(255,255,255,.18); animation: track 3.2s var(--ease) infinite; }
.mini.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #fff, #dfe5ee); box-shadow: 0 3px 8px rgba(0,0,0,.4); animation: thumb 3.2s var(--ease) infinite; }
@keyframes thumb { 0%, 38% { transform: none; } 50%, 88% { transform: translateX(24px); } 100% { transform: none; } }
@keyframes track { 0%, 38% { background: rgba(255,255,255,.18); box-shadow: none; } 50%, 88% { background: var(--accent); box-shadow: 0 0 22px rgba(var(--glow), .8); } 100% { background: rgba(255,255,255,.18); } }
.mini.lock svg { width: 46px; height: 46px; }
.mini.lock .shackle { animation: shut 3s var(--ease) infinite; }
@keyframes shut { 0%, 30% { transform: translateY(-5px); } 45%, 100% { transform: none; } }
.mini.people i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); }
.mini.people i.on { background: var(--accent); animation: ring 2.4s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(var(--glow), .8); } 100% { box-shadow: 0 0 0 16px rgba(var(--glow), 0); } }
.mini.table { flex-direction: column; gap: 7px; }
.mini.table i { width: 56px; height: 9px; border-radius: 4px; background: rgba(255,255,255,.18); }
.mini.table i.on { background: var(--accent); animation: lit 2.4s ease-in-out infinite; }
@keyframes lit { 50% { box-shadow: 0 0 20px rgba(var(--glow), .95); transform: scaleX(1.08); } }
.mini.feed { flex-direction: column; align-items: flex-start; gap: 7px; padding-left: 20px; }
.mini.feed i { height: 8px; border-radius: 4px; background: currentColor; opacity: 0; animation: tick 2.8s var(--ease) infinite; }
.mini.feed i:nth-child(1) { width: 52px; } .mini.feed i:nth-child(2) { width: 34px; animation-delay: .35s; } .mini.feed i:nth-child(3) { width: 46px; animation-delay: .7s; } .mini.feed i:nth-child(4) { width: 26px; animation-delay: 1.05s; }
@keyframes tick { 0% { opacity: 0; transform: translateX(-14px); } 18%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mini.revoke i { width: 24px; height: 16px; border-radius: 5px; background: currentColor; animation: apart 3s var(--ease) infinite; }
.mini.revoke i:last-child { animation-name: apart2; }
.mini.revoke b { width: 12px; height: 3px; border-radius: 3px; background: #fff; animation: snap 3s var(--ease) infinite; }
@keyframes apart { 0%, 35% { transform: none; } 50%, 100% { transform: translateX(-7px); opacity: .45; } }
@keyframes apart2 { 0%, 35% { transform: none; } 50%, 100% { transform: translateX(7px); opacity: .45; } }
@keyframes snap { 0%, 35% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: scaleX(.2); } }
.mini.hook i { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: ripple 2.7s ease-out infinite; }
.mini.hook i:nth-child(2) { animation-delay: .9s; } .mini.hook i:nth-child(3) { animation-delay: 1.8s; }
.mini.hook b { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px rgba(var(--glow), 1); }
@keyframes ripple { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }
.mini.peers { gap: 30px; }
.mini.peers i { width: 20px; height: 20px; border-radius: 50%; background: currentColor; }
.mini.peers b { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff; animation: hop 1.9s ease-in-out infinite alternate; }
@keyframes hop { from { transform: translateX(-22px); } to { transform: translateX(22px); } }

/* Builders: protocol lists */
.speaks { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 80px); }
.speaks .head { margin-bottom: 0; }
.group + .group { margin-top: 30px; }
.group h3 { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Day timeline */
.day { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 80px); }
.day .head { margin-bottom: 0; }
.moments { position: relative; padding-left: 34px; }
.moments::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--blue), var(--violet), var(--orange)); opacity: .55; }
.moment { position: relative; display: flex; gap: clamp(18px, 3vw, 36px); align-items: baseline; padding: clamp(14px, 3vh, 30px) 0; }
.moment::before { content: ""; position: absolute; left: -34px; top: calc(clamp(14px, 3vh, 30px) + 9px); width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(var(--glow), .18), 0 0 24px rgba(var(--glow), .8); }
.moment time { width: 96px; flex-shrink: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; color: var(--accent); }
.moment p { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.35; color: #f1f5f9; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.card { border-radius: 24px; padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 10px; transition-property: transform, border-color, opacity; transition-duration: .5s, .4s, .9s; transition-timing-function: var(--ease); }
.card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.26); }
.card h3 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 34px; line-height: 1.1; color: #fff; }
.card p { color: var(--muted); }


/* Closing */
.page.last { justify-content: space-between; padding-bottom: 0; }
.page.last .fit { flex: 1; display: flex; align-items: center; }
.page.hero { padding-bottom: clamp(24px, 5vh, 56px); }
/* Builders: the fence sits at the foot of the screen, so the hand in the photo stays in view. */
.page.closing .fit { flex: 1; display: flex; }
.page.closing .wrap { display: flex; flex-direction: column; }
.page.closing .fence { margin-top: auto; }
.closing h2.display { font-size: clamp(46px, min(7.2vw, 11vh), 96px); line-height: 1; }
.closing .horizon { margin-top: 24px; }
.js .closing .horizon { transform: scaleX(0); transition: transform 1.6s var(--ease) .3s; }
.js .closing .horizon.in { transform: scaleX(1); }
.closing .lede { margin-top: 24px; }
.closing .btn { margin-top: 32px; }

/* Footer */
.foot { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.08); background: rgba(2,6,23,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; padding-top: clamp(10px, 2vh, 22px); padding-bottom: clamp(10px, 2vh, 22px); font-size: 14.5px; color: var(--muted); }
.lockup { display: flex; align-items: center; gap: 20px; margin-right: auto; }
.lockup .logo { height: 30px; }
.lockup .by { font-size: 14px; }
.lockup .parent { display: inline-flex; align-items: center; min-height: 44px; }
.lockup .parent img { height: 22px; width: auto; }
.foot a.f { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; transition: color .25s ease; }
.foot a.f:hover { color: #fff; }


@media (max-width: 900px) {
  .dots { display: none; }
  .page { padding-bottom: 72px; }
  .page.everything .wrap { gap: 40px; }
  .demo, .three, .two, .day, .speaks { grid-template-columns: minmax(0, 1fr); }
  .scrim.left { background: linear-gradient(180deg, rgba(2,6,23,.88) 0%, rgba(2,6,23,.7) 55%, rgba(2,6,23,1) 100%); }
  .receipt { position: relative; width: auto; margin: -34px 0 0 48px; }
  .stage { padding-bottom: 56px; } .stage figcaption { bottom: 6px; }
}
@media (max-width: 720px) {
  :root { --header: 124px; }
  .top .wrap { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .seg { position: relative; left: auto; translate: none; order: 3; width: 100%; }
  .stores .store { flex: 1 1 100%; }
  .core { padding: 18px 44px 20px 20px; border-radius: 26px; }
  .slot { height: 178px; }
  .feat { gap: 16px; }
  .mini { flex-basis: 76px; height: 76px; border-radius: 20px; scale: .9; }
  .ticks { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .stage .step, .js .hero h1 .line > span, .js .hero .lede, .js .hero .stores, .js .hero .links, .js .hero .horizon, .js .closing .horizon { opacity: 1 !important; transform: none !important; }
  .js .bubble.out.typing .txt { opacity: 1; } .js .bubble.out.typing .dots { display: none; }
  .track { flex-wrap: wrap; width: auto; justify-content: center; } .track [aria-hidden="true"], .pill.dup { display: none; }
  .pill { opacity: 1; }
}

/* Steps: three glass cards joined by the horizon */
.three.steps { position: relative; }
.three.steps::before { content: ""; position: absolute; left: 4%; right: 4%; top: -18px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blue) 0 33.3%, var(--violet) 33.3% 66.6%, var(--orange) 66.6% 100%); box-shadow: 0 0 24px rgba(139,92,246,.5); opacity: .85; }
.three.steps .item.glass { padding: clamp(22px, 3.6vh, 40px) clamp(22px, 2.4vw, 34px); }

/* ---- Round 9: the guided path ---- */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: clamp(8px, 1.6vh, 16px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(18px, 3.4vh, 34px); }

/* The figures */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.fig { border-radius: 24px; padding: clamp(18px, 3vh, 30px) clamp(18px, 2vw, 28px); display: flex; flex-direction: column; gap: 6px; transition-property: transform, border-color, opacity; transition-duration: .5s, .4s, .9s; transition-timing-function: var(--ease); }
.fig:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.26); }
.fig .big { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(56px, min(7vw, 12vh), 108px); line-height: .95; color: #fff; text-shadow: 0 0 40px rgba(var(--glow), .55); font-variant-numeric: tabular-nums; }
.fig .big small { font-size: .42em; color: var(--accent); margin-left: 2px; }
.fig h3 { font-size: 18px; font-weight: 600; color: #fff; }
.fig p { color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); margin-top: clamp(16px, 3.4vh, 36px); }
.gain { display: flex; gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.gain b { flex-shrink: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.gain span { font-size: 16px; line-height: 1.45; color: var(--soft); }

/* Builders screen */
.points { margin-top: clamp(16px, 3vh, 30px); display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); max-width: 34em; }
.points li { position: relative; padding-left: 26px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: var(--soft); }
.points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px rgba(var(--glow), .9); }
.points b { color: #fff; font-weight: 600; }
.page.closing .horizon { margin-top: clamp(12px, 2.2vh, 24px); }
.page.closing .lede { margin-top: clamp(12px, 2.2vh, 24px); max-width: min(30em, 38vw); }
.page.closing .points { max-width: min(30em, 38vw); }
@media (max-width: 900px) { .page.closing .lede, .page.closing .points { max-width: none; } }

/* Under the hood */
.specs { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.spec { margin: 0; border-radius: 20px; padding: clamp(14px, 2.2vh, 22px) clamp(16px, 1.6vw, 22px); display: flex; flex-direction: column; gap: 6px; transition-property: transform, border-color, opacity; transition-duration: .5s, .4s, .9s; transition-timing-function: var(--ease); }
.spec:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.26); }
.spec dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.spec dd { margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: clamp(16px, 1.5vw, 21px); color: #fff; line-height: 1.25; }
.spec dd small { display: block; margin-top: 6px; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 900px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gains { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fwd { position: relative; left: auto; bottom: auto; translate: none; align-self: center; margin-top: 36px; }
}

/* =====================================================================
   Round 10: every screen shows something, none only tells
   ===================================================================== */

/* ---- 3. Everything. Everywhere. All at once. ---- */
.streaks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; mix-blend-mode: screen; pointer-events: none; }
.page.everything .wrap.tri { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.tri h2 .w { opacity: .4; transition: opacity .7s var(--ease), text-shadow .7s ease; }
.tri h2 .w.on { opacity: 1; background: linear-gradient(90deg, #93c5fd, #c4b5fd 45%, #fdba74); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(var(--glow), .55)); }
.tri-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); text-align: left; }
.tcard { font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: clamp(14px, 2.2vh, 22px); border-radius: 24px; opacity: .55; background: linear-gradient(180deg, rgba(8,14,30,.66), rgba(2,6,23,.8)); transition: opacity .6s ease, transform .6s var(--ease), border-color .6s ease, box-shadow .6s ease; }
.tcard.on { opacity: 1; transform: translateY(-8px); border-color: rgba(var(--glow), .85); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(var(--glow), .35); }
.tcard .tx { display: flex; flex-direction: column; gap: 6px; }
.tcard .tx b { font-size: 19px; font-weight: 600; color: #fff; line-height: 1.25; }
.tcard .tx span { font-size: 15px; line-height: 1.45; color: var(--muted); }
.viz { position: relative; flex: 0 0 96px; height: 96px; border-radius: 22px; overflow: hidden; display: grid; place-items: center; color: var(--accent); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.v-every, .v-where, .v-once { position: absolute; inset: 0; }
.v-every .tile { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; border-radius: 8px; margin: -13px; opacity: 0; }
.v-every .tile svg { width: 15px; height: 15px; }
.v-every .tile:nth-child(1) { --x: -40px; --y: -30px; } .v-every .tile:nth-child(2) { --x: 40px; --y: -28px; animation-delay: .45s; }
.v-every .tile:nth-child(3) { --x: -42px; --y: 26px; animation-delay: .9s; } .v-every .tile:nth-child(4) { --x: 40px; --y: 30px; animation-delay: 1.35s; }
.v-every .tile:nth-child(5) { --x: 0px; --y: -44px; animation-delay: 1.8s; }
.tcard.on .v-every .tile { animation-name: pull; animation-duration: 2.25s; animation-timing-function: var(--ease); animation-iteration-count: infinite; }
@keyframes pull { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } 18% { opacity: 1; } 78% { opacity: 1; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(0, 0) scale(.1); } }
.v-every .hub { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 22px 4px rgba(59,130,246,.9); }
.tcard.on .v-every .hub { animation: beat 1.1s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.35); } }
.v-where { display: flex; align-items: center; justify-content: space-around; padding: 0 8px 12px; color: #fff; }
.v-where span { display: grid; opacity: .85; } .v-where svg { width: 22px; height: 22px; }
.v-where .hop { position: absolute; bottom: 20px; left: 17%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px rgba(var(--glow), 1); }
.tcard.on .v-where .hop { animation: roam 3s var(--ease) infinite; }
@keyframes roam { 0%, 22% { left: 17%; } 33%, 55% { left: 50%; } 66%, 88% { left: 83%; } 100% { left: 17%; } }
.v-once { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 18px; }
.v-once i { position: relative; height: 9px; border-radius: 5px; background: rgba(255,255,255,.14); overflow: hidden; }
.v-once i::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.tcard.on .v-once i::after { animation: together 2.6s var(--ease) infinite; }
@keyframes together { 0%, 12% { transform: scaleX(0); } 62%, 88% { transform: scaleX(1); box-shadow: 0 0 14px rgba(var(--glow), .9); } 100% { transform: scaleX(0); } }

/* ---- 4. The figures: one giant number at a time ---- */
.reel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3.4vw, 56px); border-radius: 30px; padding: clamp(14px, 2.6vh, 30px) clamp(22px, 3vw, 48px); }
.reel { overflow: hidden; }
.reel-nums, .reel-text, .reel-viz { display: grid; }
.reel-nums > *, .reel-text > *, .reel-viz > * { grid-area: 1 / 1; opacity: 0; transform: translateY(46%); filter: blur(8px); transition: transform .8s var(--ease), opacity .55s ease, filter .55s ease; }
.reel .on { opacity: 1; transform: none; filter: none; }
.reel .gone { opacity: 0; transform: translateY(-46%); filter: blur(8px); }
.rn { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(110px, min(17vw, 27vh), 250px); line-height: .92; color: #fff; min-width: 2.1ch; text-shadow: 0 0 60px rgba(var(--glow), .6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn small { font-size: .36em; color: var(--accent); }
.rt { align-self: center; }
.rt h3 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; color: #fff; }
.rt p { margin-top: 10px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--soft); max-width: 26em; }
.rv { width: clamp(130px, 15vw, 190px); height: clamp(130px, 15vw, 190px); display: grid; place-items: center; color: var(--accent); }
.v-clock { position: relative; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, #0b1230, #3f2f86 22%, #f97316 38%, #fdba74 46%, #60a5fa 58%, #3f2f86 80%, #0b1230); -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%); mask: radial-gradient(circle, transparent 56%, #000 57%); animation: turn 18s linear infinite; }
.rv .v-clock + * { display: none; }
.rv:has(.v-clock) { position: relative; }
.rv:has(.v-clock)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 40%; margin-left: -1.5px; border-radius: 3px; background: #fff; transform-origin: 50% 0; animation: turn 4.2s linear infinite; box-shadow: 0 0 14px #fff; }
.rv:has(.v-clock)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #fff; }
@keyframes turn { to { transform: rotate(360deg); } }
.v-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; width: 100%; }
.v-grid i, .v-grid b { aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.14); }
.v-grid b { border-radius: 3px; }
.rv.on .v-grid i, .rv.on .v-grid b { animation: light .5s ease forwards; animation-delay: calc(var(--n) * 26ms + 250ms); }
@keyframes light { to { background: var(--accent); box-shadow: 0 0 10px rgba(var(--glow), .9); } }
.rv.on .v-grid b { animation-name: light2; }
@keyframes light2 { to { background: #fff; box-shadow: 0 0 10px #fff; } }
.v-zero { position: relative; display: grid; place-items: center; color: rgba(255,255,255,.5); }
.v-zero i { position: absolute; width: 130%; height: 4px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 18px rgba(var(--glow), 1); transform: rotate(-38deg) scaleX(0); }
.rv.on .v-zero i { animation: strike .7s var(--ease) .5s forwards; }
@keyframes strike { to { transform: rotate(-38deg) scaleX(1); } }
.v-one i { position: relative; display: block; width: 132px; height: 72px; border-radius: 999px; background: rgba(255,255,255,.18); animation: track 3.2s var(--ease) infinite; }
.v-one i::after { content: ""; position: absolute; top: 6px; left: 6px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(180deg, #fff, #dfe5ee); box-shadow: 0 6px 16px rgba(0,0,0,.45); animation: thumb2 3.2s var(--ease) infinite; }
@keyframes thumb2 { 0%, 38% { transform: none; } 50%, 88% { transform: translateX(60px); } 100% { transform: none; } }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(12px, 2.2vh, 22px); }
.tab { font: inherit; text-align: left; cursor: pointer; padding: 10px 0 0; border: 0; background: transparent; color: var(--muted); font-size: 14.5px; font-weight: 600; display: flex; flex-direction: column-reverse; gap: 10px; transition: color .3s ease; min-height: 44px; }
.tab:hover, .tab.on { color: #fff; }
.tab i { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; position: relative; }
.tab i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue), var(--violet), var(--orange)); transform: scaleX(0); transform-origin: left; }
.tab.on i::after { animation: fill var(--dwell, 8400ms) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.gains { margin-top: clamp(12px, 2.4vh, 28px); }

/* ---- 5. Draw your line: the reader moves it ---- */
.fence { margin-top: clamp(14px, 2.8vh, 30px); border-radius: 26px; padding: clamp(14px, 2.2vh, 20px) clamp(16px, 1.8vw, 26px); background: linear-gradient(180deg, rgba(8,14,30,.72), rgba(2,6,23,.84)); }
.fence-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--muted); }
.fence-top .who { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; }
.fence-top .who b { color: #fff; font-weight: 500; } .fence-top .who svg { color: var(--accent); }
.fence-top .tally b { color: #fff; font-size: 18px; font-variant-numeric: tabular-nums; }
.fence-track { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 12px 0 10px; padding: 16px 0; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: none; }
.tool { margin: 0 5px; padding: 12px 6px; border-radius: 12px; text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: clamp(10.5px, .92vw, 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #8b98ad; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); transition: color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s var(--ease); }
.tool.in { color: #fff; border-color: rgba(var(--glow), .85); background: rgba(var(--glow), .16); box-shadow: 0 0 24px rgba(var(--glow), .35); transform: translateY(-2px); }
.fence-line { position: absolute; top: 0; bottom: 0; left: calc(var(--x, 37.5) * 1%); width: 4px; margin-left: -2px; border-radius: 4px; background: linear-gradient(180deg, var(--blue), var(--violet), var(--orange)); box-shadow: 0 0 26px rgba(139,92,246,.95); transition: left .7s var(--ease); cursor: ew-resize; }
.fence-line::before { content: ""; position: absolute; inset: 0 -18px; }
.fence.dragging .fence-line { transition: none; }
.fence-line i { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px; border-radius: 50%; background: linear-gradient(180deg, #fff, #dfe5ee); box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.1); }
.fence-line i::before, .fence-line i::after { content: ""; position: absolute; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: #64748b; }
.fence-line i::before { left: 13px; } .fence-line i::after { right: 13px; }
.fence:not(.touched) .fence-line i { animation: invite 2.4s ease-in-out infinite; }
@keyframes invite { 50% { box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0,0,0,.5), 0 0 0 12px rgba(255,255,255,.04); } }

/* ---- 6. Under the hood: a to-do list that is already done ---- */
.specs { position: relative; }
.sweep { position: absolute; top: -6%; bottom: -6%; left: -180px; width: 160px; z-index: 3; pointer-events: none; opacity: 0; border-radius: 80px; background: linear-gradient(90deg, transparent, rgba(96,165,250,.35), rgba(167,139,250,.5), rgba(249,115,22,.4), transparent); filter: blur(10px); }
.specs.run .sweep { animation: sweep 2.2s var(--ease) forwards; }
@keyframes sweep { 0% { left: -180px; opacity: 0; } 12%, 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.spec dt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spec .ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #052e16; background: #86efac; box-shadow: 0 0 16px rgba(134,239,172,.8); transition: transform .5s var(--ease), opacity .3s ease; }
.spec dd { position: relative; }
.spec .val, .spec .todo { display: block; transition: opacity .5s ease, transform .6s var(--ease); }
.spec .todo { position: absolute; left: 0; top: 0; opacity: 0; font-size: 14px; color: #7f8ea5; }
.js .spec:not(.done) { border-style: dashed; border-color: rgba(255,255,255,.2); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.js .spec:not(.done) dt { color: #7f8ea5; }
.js .spec:not(.done) .ok { transform: scale(0); opacity: 0; }
.js .spec:not(.done) .val { opacity: 0; transform: translateY(10px); }
.js .spec:not(.done) .todo { opacity: 1; }
.spec.done { animation: lock .7s var(--ease); }
@keyframes lock { 0% { transform: scale(.96); box-shadow: 0 0 0 rgba(var(--glow), 0); } 40% { transform: scale(1.03); box-shadow: 0 0 50px rgba(var(--glow), .6); } 100% { transform: none; } }

/* ---- 7. Go beyond: the logo builds itself ---- */
.page.finale { background: radial-gradient(120% 70% at 62% 46%, rgba(59,130,246,.22) 0%, rgba(139,92,246,.12) 34%, rgba(2,6,23,0) 66%), linear-gradient(180deg, #02040f 0%, #070b26 46%, #020617 100%); }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
.page.finale .fit { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: clamp(16px, 3.4vh, 38px); }
.fin-top { text-align: left; }
.fin-top h2.display { font-size: clamp(50px, min(8vw, 12.5vh), 112px); line-height: 1; }
.fin-top .lede { margin-top: clamp(8px, 1.8vh, 18px); }
.hz { position: relative; width: calc(100% / var(--s, 1)); margin-left: calc((100% - 100% / var(--s, 1)) / 2); height: 5px; }
.hz .bands { position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue) 0 33.3%, var(--violet) 33.3% 66.6%, var(--orange) 66.6% 100%); box-shadow: 0 0 40px rgba(139,92,246,.7); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .2s; }
.hz .star { position: absolute; right: clamp(8%, 16vw, 22%); bottom: 100%; width: clamp(70px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #93c5fd, #3b82f6 58%, #1d4ed8); box-shadow: 0 0 80px 18px rgba(59,130,246,.6), 0 0 200px 60px rgba(59,130,246,.25); opacity: 0; transform: translateY(120%) scale(.7); transition: transform 2.4s var(--ease) 1s, opacity 1.2s ease 1s; }
.page.finale.live .hz .bands { transform: scaleX(1); }
.page.finale.live .hz .star { opacity: 1; transform: translateY(-14%) scale(1); animation: glow 4.5s ease-in-out 3.4s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 110px 30px rgba(59,130,246,.75), 0 0 260px 90px rgba(59,130,246,.3); } }
html:not(.js) .hz .bands { transform: none; } html:not(.js) .hz .star { opacity: 1; transform: none; }
.go3 { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.go3 li { display: flex; align-items: center; gap: 18px; border-radius: 24px; padding: clamp(14px, 2.4vh, 24px) clamp(16px, 1.8vw, 26px); transition-property: transform, border-color, opacity; transition-duration: .5s, .4s, .9s; transition-timing-function: var(--ease); }
.go3 li:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.26); }
.go3 .num { font-size: clamp(54px, 9vh, 92px); flex-shrink: 0; }
.go3 h3 { font-size: 20px; font-weight: 600; color: #fff; }
.go3 p { margin-top: 4px; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.fin-low .actions { margin-top: clamp(14px, 3vh, 30px); }

@media (max-width: 900px) {
  .tri-cards, .go3 { grid-template-columns: minmax(0, 1fr); }
  .reel { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .rv { display: none; }
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fence-track { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
  .fence-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reel-nums > *, .js .reel-text > *, .js .reel-viz > * { filter: none; }
  .hz .bands { transform: none !important; } .hz .star { opacity: 1 !important; transform: none !important; }
  .tri h2 .w { opacity: 1; }
}

/* ---- Round 11: the last screen offers three ways to run it. Each matches a band of the horizon. ---- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.way { --c: 59, 130, 246; --ink: #93c5fd; display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 18px); border-radius: 26px; padding: clamp(14px, 2.4vh, 26px) clamp(16px, 1.8vw, 26px) clamp(14px, 2.2vh, 22px); color: inherit; overflow: hidden; transition-property: transform, border-color, box-shadow, opacity; transition-duration: .5s, .4s, .5s, .9s; transition-timing-function: var(--ease); }
.way.w-server { --c: 139, 92, 246; --ink: #c4b5fd; } .way.w-cloud { --c: 249, 115, 22; --ink: #fdba74; }
.way::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--c), .3), transparent 62%); }
.way::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgb(var(--c)); box-shadow: 0 0 24px rgba(var(--c), .9); transform: scaleX(.18); transform-origin: left; transition: transform .7s var(--ease); }
.way:hover, .way:focus-visible { transform: translateY(-8px); border-color: rgba(var(--c), .9); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 34px 90px rgba(0,0,0,.55), 0 0 70px rgba(var(--c), .4); }
.way:hover::after, .way:focus-visible::after { transform: scaleX(1); }
.way .say { display: flex; flex-direction: column; gap: 6px; }
.way .say .display { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.08; }
.way .say .line { font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.way .act { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.way .act svg { transition: transform .3s var(--ease); }
.way:hover .act svg { transform: translate(2px, -2px); }
.way.w-machine:hover .act svg { transform: translateY(-3px); }

.art { position: relative; display: block; height: clamp(84px, 14vh, 132px); color: var(--ink); }
/* Your Machine: a laptop whose screen shows the horizon */
.a-machine { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.a-machine .lid { position: relative; height: 78%; aspect-ratio: 16 / 10; border-radius: 10px 10px 3px 3px; border: 2px solid rgba(255,255,255,.55); overflow: hidden; background: #050b1e; box-shadow: 0 0 40px rgba(var(--c), .35); }
.a-machine .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0a1030 0%, #2a2a7a 55%, #f97316 66%, #050914 67%); animation: dawn 6s ease-in-out infinite alternate; }
@keyframes dawn { from { filter: brightness(.8) hue-rotate(-12deg); } to { filter: brightness(1.25); } }
.a-machine .line { position: absolute; left: 0; right: 0; top: 66%; height: 2px; background: linear-gradient(90deg, #3b82f6 0 33%, #8b5cf6 33% 66%, #f97316 66% 100%); }
.a-machine .dot { position: absolute; right: 22%; top: 66%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 16px 3px rgba(59,130,246,.9); animation: starrise 6s ease-in-out infinite alternate; }
@keyframes starrise { from { transform: translateY(40%); opacity: .5; } to { transform: translateY(-110%); opacity: 1; } }
.a-machine .base { flex: 0 0 7px; height: 7px; aspect-ratio: auto; width: calc((100% - 0px) * 0); min-width: 0; border-radius: 2px 2px 8px 8px; background: rgba(255,255,255,.55); align-self: center; }
.a-machine .lid + .base { width: auto; padding: 0 clamp(92px, 9.6vh, 148px); }
/* Headless Server: a rack, lights blinking, a prompt and no screen */
.a-server { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12%; }
.a-server .unit { display: flex; align-items: center; gap: 7px; height: clamp(16px, 2.8vh, 24px); padding: 0 10px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.a-server .unit i { width: 6px; height: 6px; border-radius: 50%; background: #86efac; box-shadow: 0 0 8px #86efac; animation: led 1.6s steps(1) infinite; }
.a-server .unit i:nth-child(2) { background: var(--ink); box-shadow: 0 0 8px var(--ink); animation-duration: 1.1s; }
.a-server .unit:nth-child(2) i { animation-delay: .35s; } .a-server .unit:nth-child(3) i { animation-delay: .7s; }
@keyframes led { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.a-server .unit b { margin-left: auto; width: 34%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.a-server .unit b::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--ink); animation: shuttle 2.2s ease-in-out infinite alternate; }
.a-server .unit:nth-child(2) b::after { animation-duration: 1.7s; } .a-server .unit:nth-child(3) b::after { animation-duration: 2.8s; }
@keyframes shuttle { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.a-server .prompt { margin-top: 2px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--soft); }
.a-server .prompt em { display: inline-block; width: 8px; height: 14px; margin-left: 5px; vertical-align: -2px; background: var(--ink); animation: caret 1s steps(1) infinite; }
/* Premium Cloud: a cloud with the star inside, light coming down */
.a-cloud { display: grid; place-items: center; }
.a-cloud svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: float 5s ease-in-out infinite alternate; }
.a-cloud .shape { stroke: rgba(255,255,255,.6); stroke-width: 2; fill: rgba(var(--c), .12); filter: drop-shadow(0 0 22px rgba(var(--c), .55)); }
@keyframes float { from { transform: translateY(3px); } to { transform: translateY(-5px); } }
.a-cloud .sun { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 24px 6px rgba(59,130,246,.85); animation: beat 2.4s ease-in-out infinite; }
.a-cloud .rays { position: absolute; left: 50%; bottom: 0; width: 60%; height: 22%; margin-left: -30%; display: flex; justify-content: space-around; }
.a-cloud .rays i { width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--ink), transparent); opacity: 0; animation: rain 1.8s ease-in infinite; }
.a-cloud .rays i:nth-child(2) { animation-delay: .6s; } .a-cloud .rays i:nth-child(3) { animation-delay: 1.2s; }
@keyframes rain { 0% { opacity: 0; transform: translateY(-60%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(40%); } }
@media (max-width: 900px) { .ways { grid-template-columns: minmax(0, 1fr); } }

/* ---- Skyline Cloud sign-in: in the header, a quiet partner to Get Skyline (approved) ---- */
.signin { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; color: #fff; white-space: nowrap; font-size: 15px; font-weight: 600; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s ease, background .3s ease, transform .3s var(--ease); }
.signin svg { color: var(--accent); transition: color .7s ease; flex-shrink: 0; }
.signin:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); transform: translateY(-1px); }
@media (max-width: 720px) { .signin span { display: none; } .signin { padding: 0 13px; } }

/* ---- Round 14: what changes for the business. Four outcomes, each shown as systems working together. ---- */
.reel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(20px, 3vw, 48px); padding: clamp(16px, 3vh, 34px) clamp(22px, 3vw, 44px); }
.reel-side { display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 14px); min-width: 0; }
.rn { position: relative; font-size: clamp(70px, min(9vw, 17vh), 150px); line-height: .95; min-width: 0; }
.rn .ix { position: absolute; left: 4px; top: -1.1em; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .1em; color: var(--accent); text-shadow: none; }
.reel-nums { padding-top: 18px; }
.rt h3 { font-family: Inter, system-ui, sans-serif; font-weight: 500; letter-spacing: 0; font-size: clamp(16px, 1.35vw, 19.5px); line-height: 1.5; color: var(--soft); max-width: 27em; }
.proof { display: flex; align-items: center; gap: 16px; margin-top: clamp(10px, 2vh, 20px); padding-top: clamp(10px, 2vh, 18px); border-top: 1px solid rgba(255,255,255,.12); }
.proof .fg { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(38px, min(4vw, 7.4vh), 62px); line-height: 1; color: #fff; white-space: nowrap; text-shadow: 0 0 30px rgba(var(--glow), .6); }
.proof .fl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14.5px; line-height: 1.35; color: var(--muted); }
.tag { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: var(--soft); }
.tag.t-fact { color: #052e16; background: #86efac; border-color: transparent; }
.tag.t-estimate { color: #fde68a; border-color: rgba(253,230,138,.6); border-style: dashed; }
.rv { width: auto; height: auto; display: block; place-items: normal; }
.chain { width: 100%; }

.chain { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 8px 0; }
.chain .wire { position: absolute; left: 7%; right: 7%; top: calc(8px + clamp(26px, 4vh, 38px)); height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.chain .wire::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--blue), var(--violet), var(--orange)); box-shadow: 0 0 16px rgba(var(--glow), 1); transform: translateX(-110%); }
.rv.on .chain .wire::after { animation: travel var(--dwell, 8400ms) var(--ease) .4s infinite; }
@keyframes travel { 0% { transform: translateX(-110%); } 78%, 100% { transform: translateX(470%); } }
.node { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.node .tile { width: clamp(52px, 8vh, 76px); height: clamp(52px, 8vh, 76px); border-radius: 20px; opacity: .45; transform: scale(.9); transition: none; }
.node .tile svg { width: 56%; height: 56%; }
.node b { font-size: 15.5px; font-weight: 600; color: #fff; opacity: .55; white-space: nowrap; }
.node small { font-size: 13.5px; line-height: 1.3; color: var(--muted); opacity: .55; max-width: 11em; }
.rv.on .node .tile { animation: arrive var(--dwell, 8400ms) var(--ease) infinite; animation-delay: calc(var(--n) * 1.04s + .4s); }
.rv.on .node b, .rv.on .node small { animation: wake var(--dwell, 8400ms) ease infinite; animation-delay: calc(var(--n) * 1.04s + .4s); }
@keyframes arrive { 0% { opacity: .45; transform: scale(.9); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0,0,0,.35); } 9% { opacity: 1; transform: scale(1.12); box-shadow: inset 0 1px 0 #fff, 0 0 34px 6px rgba(var(--glow), .85); } 18%, 86% { opacity: 1; transform: scale(1); box-shadow: inset 0 1px 0 #fff, 0 0 18px 2px rgba(var(--glow), .45); } 100% { opacity: .45; transform: scale(.9); } }
@keyframes wake { 0% { opacity: .55; } 12%, 86% { opacity: 1; } 100% { opacity: .55; } }
.fine { margin: clamp(10px, 2vh, 20px) 0 0; font-size: 12.5px; line-height: 1.5; color: #8d9bb1; max-width: 78em; }
.fine b { color: var(--soft); font-weight: 600; }
@media (max-width: 900px) {
  .reel { grid-template-columns: minmax(0, 1fr); }
  .rv { display: block; }
  .chain { flex-wrap: wrap; row-gap: 16px; justify-content: flex-start; } .chain .wire { display: none; }
  .node { flex: 0 0 30%; }
}
@media (prefers-reduced-motion: reduce) { .node .tile, .node b, .node small { opacity: 1; transform: none; } }

/* ---- Round 15: who runs on it. Four real platforms; the Omnideck Watcher follows the pointer. ---- */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 22px); perspective: 1400px; }
.pcard { display: block; color: inherit; transition-property: opacity, transform; transition-duration: .9s, .9s; transition-timing-function: var(--ease); }
.pin { --c: 139, 92, 246; display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 10px); height: 100%; border-radius: 26px; padding: clamp(14px, 2.4vh, 24px) clamp(16px, 1.6vw, 24px); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transform-style: preserve-3d; transition: border-color .4s ease, box-shadow .4s ease; will-change: transform; }
.pin.p-cohort { --c: 201, 162, 39; } .pin.p-omnideck { --c: 14, 165, 233; } .pin.p-trellis { --c: 167, 139, 250; } .pin.p-hakeem { --c: 16, 185, 129; }
.pin::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--c), .3), transparent 62%); }
.pcard:hover .pin, .pcard:focus-visible .pin { border-color: rgba(var(--c), .9); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 34px 90px rgba(0,0,0,.55), 0 0 70px rgba(var(--c), .35); }
.ptag { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #bbf7d0; border: 1px solid rgba(134,239,172,.4); background: rgba(134,239,172,.08); }
.ptag i { width: 7px; height: 7px; border-radius: 50%; background: #86efac; animation: alive 2s ease-out infinite; }
.ptag.pilot { color: #fde68a; border-color: rgba(253,230,138,.45); background: rgba(253,230,138,.07); }
.ptag.pilot i { background: #fde68a; animation-name: alive-pilot; }
@keyframes alive { 0% { box-shadow: 0 0 0 0 rgba(134,239,172,.8); } 100% { box-shadow: 0 0 0 9px rgba(134,239,172,0); } }
@keyframes alive-pilot { 0% { box-shadow: 0 0 0 0 rgba(253,230,138,.8); } 100% { box-shadow: 0 0 0 9px rgba(253,230,138,0); } }
.pmark { display: flex; align-items: center; justify-content: center; padding: clamp(4px, 1.2vh, 12px) 0; color: #e9e4d8; transform: translateZ(34px); }
.pmark svg { display: block; flex: 0 0 auto; height: clamp(80px, 14.5vh, 132px); width: clamp(80px, 14.5vh, 132px); overflow: visible; filter: drop-shadow(0 0 30px rgba(var(--c), .5)); }
.pmark .watcher { width: clamp(90px, 16.3vh, 148px); }
.p-omnideck .pmark svg { animation: watcher-bob 6s ease-in-out infinite; }
@keyframes watcher-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.watcher .wlid { display: none; }
.pname { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; }
.pwhat { font-size: 15.5px; line-height: 1.4; color: var(--soft); }
.phow { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: clamp(8px, 1.4vh, 14px); border-top: 1px solid rgba(255,255,255,.12); font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.phow b { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--c)); }
.phost { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--soft); }
.phost svg { transition: transform .3s var(--ease); } .pcard:hover .phost svg { transform: translate(2px, -2px); }
.page.whoruns .head { margin-bottom: clamp(16px, 3vh, 36px); }
@media (max-width: 1000px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pin { transform: none; } }

/* ---- The coming-soon page: where the store buttons lead until the listings are live ---- */
.soon .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.soon h1.display { font-size: clamp(56px, min(9vw, 14vh), 128px); line-height: 1; }
.soon .horizon { margin-top: clamp(18px, 3vh, 28px); transform: scaleX(0); transform-origin: center; animation: draw 1.4s var(--ease) .2s both; }
.soon .lede { margin-top: clamp(18px, 3vh, 28px); max-width: 26em; }
.soon-stores { list-style: none; margin: clamp(24px, 4.4vh, 44px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.soon-stores li { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 14px; border-radius: 16px; color: var(--soft); font-weight: 500; }
.soon .btn { margin-top: clamp(28px, 5vh, 52px); }

/* ---- Header link to the pricing page ---------------------------------------------- */
.plink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; color: var(--soft); font-size: 15px; font-weight: 600; white-space: nowrap; transition: color .3s ease; }
.plink:hover { color: #fff; }

/* ---- The pricing page ----------------------------------------------------------- */
.pricing .phead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.pricing h1.display, .pricing h2.display { font-size: clamp(40px, min(5.4vw, 8.4vh), 76px); line-height: 1.02; }
.pricing .lede { margin-top: clamp(10px, 1.8vh, 18px); }
.bill { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.bill button, .pickplan button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.bill button[aria-pressed="true"], .pickplan button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 22px rgba(var(--glow), .4); }
.bill em { font-style: normal; font-size: 12px; color: var(--accent); margin-left: 4px; }
.plans { margin-top: clamp(20px, 3.6vh, 36px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.3fr); gap: clamp(14px, 1.8vw, 26px); align-items: stretch; }
.cloudset { border-radius: 28px; padding: clamp(14px, 2vh, 20px); border: 1px solid rgba(var(--glow), .28); background: linear-gradient(180deg, rgba(var(--glow), .09), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px); }
.cshead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 2px 6px 0; }
.cname { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: #fff; }
.cname svg { color: var(--accent); }
.csub { margin-top: 2px; font-size: 14px; color: var(--muted); }
.cplans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); flex: 1; }
.plan.selfhost { border: 1.5px dashed rgba(255,255,255,.24); background: rgba(2,6,23,.35); box-shadow: none; }
.plan.selfhost h3 { color: #cbd5e1; }
.plan.selfhost li svg { color: #94a3b8; }
.plan.selfhost .sub { color: var(--soft); font-size: 14px; line-height: 1.45; }
.term { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: #86efac; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); align-self: flex-start; }
.term em { display: inline-block; width: .55em; height: 1em; margin-left: 4px; vertical-align: -2px; background: #86efac; animation: pr-caret 1.1s steps(1) infinite; }
@keyframes pr-caret { 50% { opacity: 0; } }
.plan { position: relative; border-radius: 22px; padding: clamp(18px, 2.6vh, 26px) clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.plan h3, .addon h3, .ent h3 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.price { display: flex; align-items: baseline; gap: 8px; }
.price .amt, .sum .amt { font-family: var(--display); font-size: clamp(40px, 4vw, 56px); line-height: 1; color: #fff; }
.price .per, .sum .per { color: var(--muted); font-size: 14px; }
.amt.bump { animation: pr-bump .65s var(--ease); }
@keyframes pr-bump { 30% { transform: translateY(-3px); text-shadow: 0 0 22px rgba(var(--glow), .7); } }
.plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--soft); line-height: 1.35; flex: 1; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.plan .btn { margin-top: 8px; min-height: 46px; font-size: 15px; }
.btn.ghost { color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.plan.featured { border-color: rgba(var(--glow), .55); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(var(--glow), .25), 0 30px 80px rgba(var(--glow), .18); }
.plan.featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%); background-size: 250% 100%; animation: pr-sheen 6s ease-in-out infinite; pointer-events: none; }
@keyframes pr-sheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.pick { position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: #0f172a; background: var(--accent); }
.livegrid { margin-top: clamp(20px, 3.4vh, 34px); display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(12px, 1.4vw, 20px); }
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); }
.addon { border-radius: 22px; padding: clamp(18px, 2.6vh, 26px) clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; gap: 10px; transition: border-color .4s ease, box-shadow .4s ease; }
.addon.on { border-color: rgba(var(--glow), .5); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 40px rgba(var(--glow), .16); }
.addon .what { color: var(--soft); font-size: 14.5px; line-height: 1.45; flex: 1; }
.step { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.step button { width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; transition: background .25s ease; }
.step button:hover { background: rgba(255,255,255,.18); }
.step output { min-width: 34px; text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 17px; color: #fff; }
.total { border-radius: 22px; padding: clamp(18px, 2.6vh, 26px) clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; gap: 12px; }
.total .lbl { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pickplan { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); align-self: flex-start; }
.sum { display: flex; align-items: baseline; gap: 8px; }
.parts { color: var(--soft); font-size: 14.5px; min-height: 2.9em; }
.pricing .fine { margin-top: clamp(12px, 2vh, 18px); color: var(--muted); font-size: 13.5px; }
.ent { margin-top: clamp(14px, 2.4vh, 24px); border-radius: 22px; padding: clamp(16px, 2.4vh, 22px) clamp(18px, 2vw, 28px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; }
.ent p { margin-top: 6px; color: var(--soft); font-size: 15.5px; }
@media (max-width: 1100px) { .plans { grid-template-columns: 1fr; } .livegrid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .plans, .addons, .cplans { grid-template-columns: 1fr; } .plink { display: none; } .top .plink[href="/"] { display: inline-flex; } }
.whatlive { max-width: 36em; border-radius: 18px; padding: 14px 18px; font-size: 14.5px; line-height: 1.5; color: var(--soft); display: grid; gap: 10px; }
.flow { display: grid; gap: 6px; }
.flow .row { display: grid; grid-template-columns: 4.6em auto 64px auto 1fr; align-items: center; gap: 10px; font-size: 13px; }
.flow .who { color: var(--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
.flow .n { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #fff; }
.flow .note { color: var(--muted); }
.flow .arrow { position: relative; height: 2px; background: rgba(255,255,255,.16); overflow: visible; }
.flow .arrow::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(var(--glow), .8); animation: pr-travel 2.4s ease-in-out infinite; }
.flow .ask .arrow::after { background: #94a3b8; box-shadow: none; animation-name: pr-there-back; animation-duration: 3.2s; }
@keyframes pr-travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes pr-there-back { 0%, 10% { left: 0; } 45%, 55% { left: calc(100% - 8px); } 90%, 100% { left: 0; } }
.whatlive b { color: #fff; font-weight: 600; }
.phead.two { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; gap: 20px clamp(20px, 3vw, 44px); }
.phead.two .whatlive { max-width: none; }
@media (max-width: 1100px) { .phead.two { grid-template-columns: 1fr; } }