.home { --sky: #e2f3ff; --lime: #eef8c6; --pink: #ffe7ef; --lemon: #fff5bf; --lilac: #ebe8ff; --cream: #f7f3e6; }
.wrap { max-width: 1208px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.home h2 { text-wrap: balance; font-size: clamp(32px, 4.3vw, 56px); line-height: 1.03; letter-spacing: -0.045em; font-weight: 500; margin: 0; }
.home h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 550; margin: 0 0 8px; }
.home > section.wrap, .home > section.connect { margin-top: 136px; }
.head { max-width: 760px; margin-bottom: 40px; }
.head p:not(.kicker) { font-size: 18px; color: var(--ink-2); margin: 18px 0 0; max-width: 54ch; }
.kicker { font: 500 13px/1 var(--pixel); color: var(--ink-3); margin: 0 0 16px; }
.kicker::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--ink); margin-right: 9px; }
.home .btn { min-height: 48px; padding: 0 24px; font-size: 16px; }
.or { display: flex; align-items: center; gap: 14px; margin: 4px 0; font: 400 13px/1.6 var(--pixel); color: var(--ink-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* bots */
.bot { display: block; overflow: visible; flex: none; }
.bot .body { fill: currentColor; stroke: currentColor; }
.bot .eyes { fill: #15151a; transition: transform 0.14s ease-out; }
.bot .eyes rect { transform-box: fill-box; transform-origin: center; animation: blink 5.2s infinite; }
.c-blue { color: var(--blue); } .c-orange { color: var(--orange); } .c-purple { color: var(--purple); } .c-pink { color: var(--pink-bot, #ff5c9d); } .c-green { color: var(--green); } .c-yellow { color: var(--yellow); }
.c-orange .eyes rect { animation-delay: -1.1s; } .c-purple .eyes rect { animation-delay: -2.3s; } .c-pink .eyes rect { animation-delay: -3.4s; } .c-green .eyes rect { animation-delay: -0.6s; } .c-yellow .eyes rect { animation-delay: -4.1s; }
.bot.hop { animation: hop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes hop { 30% { transform: translateY(-16%) scale(0.94, 1.08); } 60% { transform: translateY(0) scale(1.08, 0.9); } }
.quip { position: absolute; z-index: 20; pointer-events: none; font: 500 13px/1 var(--pixel); background: var(--ink); color: #fff; padding: 7px 10px; border-radius: 10px; transform: translate(-50%, -100%); animation: quip 1.5s ease-out forwards; white-space: nowrap; }
@keyframes quip { 0% { opacity: 0; margin-top: 4px; } 12%, 75% { opacity: 1; margin-top: -8px; } 100% { opacity: 0; margin-top: -18px; } }

.dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; flex: none; background: #c9c9c4; }
.dot.is-work { background: var(--blue); animation: pulse 1.6s ease-in-out infinite; }
.dot.is-done { background: var(--green); }
.dot.is-ask { background: var(--orange); }
@keyframes pulse { 50% { opacity: 0.35; } }
.pill { font-weight: 500; font-style: normal; padding: 0.36em 0.95em; border-radius: 999px; background: #efefed; color: var(--ink); }
.pill.yes { background: var(--ink); color: #fff; }

/* a coloured tile cut into pixels, standing in for a logo */
.px { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 4px; background-color: var(--ink); background-image: linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px); background-size: 4px 4px; background-position: -1px -1px; }
.px-claude { background-color: #d97757; } .px-chatgpt { background-color: #19a37f; } .px-gemini { background-color: #4f86f7; } .px-grok { background-color: #1b1b1f; }
.px-gmail { background-color: #ea4335; } .px-calendar { background-color: #4285f4; } .px-drive { background-color: #1fa463; } .px-docs { background-color: #5b8def; } .px-sheets { background-color: #0f9d58; } .px-slack { background-color: #7a2a7d; } .px-notion { background-color: #1b1b1f; } .px-github { background-color: #24292f; } .px-linear { background-color: #5e6ad2; } .px-figma { background-color: #f24e1e; } .px-stripe { background-color: #635bff; } .px-discord { background-color: #5865f2; }
.px-hubspot { background-color: #ff7a59; } .px-airtable { background-color: #18bfff; } .px-asana { background-color: #f06a6a; } .px-trello { background-color: #0079bf; } .px-dropbox { background-color: #0061ff; } .px-outlook { background-color: #0078d4; } .px-shopify { background-color: #7fae3a; } .px-sentry { background-color: #4a3c7a; } .px-vercel { background-color: #1b1b1f; } .px-supabase { background-color: #3ecf8e; } .px-posthog { background-color: #f9bd2b; } .px-zapier { background-color: #ff4a00; }

/* hero: the poster and its card on one side, the way in on the other */
.hero { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 24px; max-width: 1488px; margin: 0 auto; padding: 6px 24px 0; }
.poster { position: relative; height: clamp(660px, calc(100vh - 100px), 920px); border-radius: 28px; overflow: hidden; background: #29a9f2; }
.poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: min(540px, 78%); background: #fff; border-radius: 26px; padding: 38px 40px 34px; box-shadow: 0 30px 70px -34px rgba(10, 60, 120, 0.5); }
.home .card h2 { font-size: 27px; letter-spacing: -0.035em; line-height: 1.15; }
.card-rows { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 26px; }
.card-rows li { display: flex; gap: 20px; align-items: flex-start; }
.card-rows img { width: 42px; height: 42px; margin-top: 3px; image-rendering: pixelated; }
.card-rows b { display: block; font-weight: 550; font-size: 17px; letter-spacing: -0.015em; }
.card-rows span { display: block; color: var(--ink-2); font-size: 16px; line-height: 1.4; margin-top: 2px; }
.card-label { color: var(--ink-2); font-size: 15px; margin: 36px 0 12px; }
.card-runs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 0; }
.card-runs b { font-size: 21px; font-weight: 550; letter-spacing: -0.04em; }
.card-runs span { color: var(--ink-3); font-size: 15px; }
.hero-side { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
.hero-mark { width: 84px; height: 84px; transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.hero-mark:hover { transform: rotate(-12deg) scale(1.08); }
.hero h1 { font-size: clamp(44px, 5.4vw, 80px); line-height: 0.98; letter-spacing: -0.055em; font-weight: 500; margin: 18px 0 0; }
.hero .lede { font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 36ch; margin: 22px 0 0; text-wrap: balance; }
.stack { display: grid; gap: 12px; width: min(430px, 100%); margin-top: 38px; }
.home .stack .btn { min-height: 58px; font-size: 17px; }
.btn.line { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.line:hover { background: var(--wash); }
.hint { font-size: 14px; color: var(--ink-3); margin: 22px 0 0; max-width: 34ch; }

/* the app */
.stage { position: relative; aspect-ratio: 1160 / 690; border-radius: 28px; overflow: hidden; background: #29a9f2; }
.stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.app { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); width: 76%; aspect-ratio: 880 / 506; font-size: clamp(8px, 0.93vw, 13px); display: grid; grid-template-columns: 17.5em minmax(0, 1fr); background: #fff; border-radius: 1.15em; overflow: hidden; text-align: left; box-shadow: 0 0 0 1px rgba(10, 20, 40, 0.06), 0 2.6em 6em -1.8em rgba(10, 60, 120, 0.5); }
.app ul { list-style: none; margin: 0; padding: 0; }
.app-side { background: #f6f6f4; padding: 1.1em 0.7em; min-width: 0; }
.lights { display: flex; gap: 0.5em; padding: 0 0.4em; }
.lights i { width: 0.82em; height: 0.82em; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.app-search { background: #eaeae7; border-radius: 0.75em; padding: 0.5em 0.85em; color: var(--ink-3); margin: 1.1em 0 0.6em; }
.app-bots li { display: flex; align-items: center; gap: 0.75em; padding: 0.55em 0.6em; border-radius: 0.85em; }
.app-bots li.on { background: #e9e9e5; }
.app-bots .bot { width: 2.3em; }
.app-bots div { min-width: 0; flex: 1; }
.app-bots b { display: block; font-weight: 550; line-height: 1.3; }
.app-bots span { display: block; color: var(--ink-2); font-size: 0.9em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-head { display: flex; align-items: center; gap: 0.65em; padding: 1em 1.4em 0.8em; }
.app-head .bot { width: 1.9em; }
.app-head b { font-weight: 550; font-size: 1.08em; }
.st { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em; color: var(--ink-2); font-size: 0.9em; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.9em; padding: 0.3em 1.4em 0; }
.msg { margin: 0; line-height: 1.4; align-self: flex-start; color: #2c2c33; }
.msg.me { align-self: flex-end; max-width: 72%; background: var(--blue); color: #fff; padding: 0.65em 1em; border-radius: 1.2em 1.2em 0.35em 1.2em; }
.screen-card { align-self: flex-start; width: 74%; background: #f5f5f3; border-radius: 1.1em; padding: 0.7em; }
.screen-head { display: flex; justify-content: space-between; font-size: 0.86em; color: var(--ink-2); padding: 0 0.35em 0.55em; }
.live { font-family: var(--pixel); color: var(--green); }
.screen { position: relative; background: #fff; border-radius: 0.75em; padding: 0.7em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }
.url { background: #f1f1ef; border-radius: 999px; padding: 0.32em 0.95em; font-size: 0.82em; color: var(--ink-3); margin-bottom: 0.5em; }
.screen ul { display: grid; gap: 0.3em; }
.screen li { display: flex; align-items: center; gap: 0.9em; padding: 0.42em 0.65em; border-radius: 0.55em; font-size: 0.92em; }
.screen li:first-child { background: #e7f0ff; }
.screen li b { font-weight: 500; width: 3em; }
.screen li span { flex: 1; height: 0.5em; border-radius: 999px; background: #ecece9; }
.screen li em { font-style: normal; font-weight: 550; }
.pointer { position: absolute; width: 1.5em; left: 62%; top: 38%; animation: point 5s ease-in-out infinite; }
@keyframes point { 0%, 100% { transform: translate(6em, 4em); } 35%, 70% { transform: translate(0, 0); } 45% { transform: translate(0, 0) scale(0.85); } }
.ask-row { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.55em; background: #fff; box-shadow: 0 0 0 1px var(--line); border-radius: 999px; padding: 0.4em 0.45em 0.4em 1.05em; }
.composer { display: flex; align-items: center; gap: 0.7em; margin: 0.9em 1.4em 1.2em; padding: 0.7em 0.75em 0.7em 1.1em; border-radius: 1.3em; background: #f5f5f3; color: var(--ink-3); }
.engine { margin-left: auto; font-size: 0.86em; color: var(--ink-2); background: #fff; border-radius: 999px; padding: 0.3em 0.85em; }
.send { width: 2em; height: 2em; border-radius: 50%; background: var(--ink); display: grid; place-items: center; font-style: normal; }
.send::after { content: "\2191"; color: #fff; font-size: 1.05em; line-height: 1; }

/* models */
.models { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.models .head { margin-bottom: 0; }
.facts { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 18px; color: var(--ink-2); max-width: 46ch; }
.facts b { display: block; color: var(--ink); font-weight: 550; }
.signin { display: grid; gap: 12px; width: min(440px, 100%); justify-self: end; }
.si { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; border-radius: 999px; background: #f0f0ee; font-size: 17px; font-weight: 500; }
.more-models { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.more-models span { font: 400 13px/1 var(--pixel); color: var(--ink-2); padding: 9px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }

/* bento */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; grid-column: span 2; border-radius: 28px; padding: 28px; min-width: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 300px; }
.tile p { margin: 0; color: rgba(19, 19, 22, 0.66); }
.t-sky { background: var(--sky); } .t-lemon { background: var(--lemon); } .t-lime { background: var(--lime); } .t-pink { background: var(--pink); } .t-lilac { background: var(--lilac); }
.tile-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-text { position: relative; background: #fff; border-radius: 20px; padding: 20px 22px; max-width: 360px; box-shadow: 0 20px 44px -28px rgba(10, 60, 120, 0.5); }
.t-computer { grid-column: span 4; grid-row: span 2; min-height: 560px; }
.t-computer .tile-bg { object-position: center bottom; }
.mini-screen { position: absolute; right: 28px; bottom: 28px; width: min(58%, 440px); background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 24px 50px -26px rgba(10, 60, 120, 0.55); }
.mini-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.mini-bar i { width: 8px; height: 8px; border-radius: 50%; background: #e3e3df; }
.mini-bar span { margin-left: 8px; font-size: 12px; color: var(--ink-3); }
.mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mini-grid span { height: 26px; border-radius: 5px; background: #f1f1ee; }
.mini-grid span.hot { background: var(--lemon); box-shadow: inset 0 0 0 1.5px #e2c200; }
.mini-screen .pointer { width: 20px; left: 86%; top: 46%; animation-name: point-mini; }
@keyframes point-mini { 0%, 100% { transform: translate(-70px, 46px); } 40%, 70% { transform: translate(0, 0); } 50% { transform: scale(0.85); } }
.runs { list-style: none; margin: auto 0 0; padding: 22px 0 0; display: grid; gap: 6px; }
.runs li { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.8); border-radius: 12px; padding: 9px 12px; font-size: 14px; white-space: nowrap; min-width: 0; }
.runs span { font: 400 12px/1 var(--pixel); color: var(--ink-3); width: 7.4em; flex: none; overflow: hidden; text-overflow: ellipsis; }
.runs b { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.strip { display: flex; gap: 3px; flex: none; }
.strip i { width: 6px; height: 6px; border-radius: 2px; background: var(--green); }
.strip i.miss { background: #d9d5c3; }
.notes { list-style: none; margin: auto 0 0; padding: 22px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.notes li { background: #fff; border-radius: 12px; padding: 8px 13px; font-size: 14px; }
.notes li:nth-child(2) { margin-left: 22px; rotate: -1.5deg; }
.notes li:nth-child(3) { margin-left: 8px; rotate: 1deg; }
.thread { list-style: none; margin: auto 0 0; padding: 22px 0 0; display: grid; gap: 8px; }
.thread li { display: flex; gap: 9px; align-items: flex-start; }
.thread .bot { width: 26px; margin-top: 3px; }
.thread span { background: #fff; border-radius: 4px 14px 14px 14px; padding: 7px 12px; font-size: 14px; line-height: 1.35; }
.ask-row.big { margin-top: auto; font-size: 16px; align-self: flex-start; }
.tile > .ask-row.big { margin-top: auto; }
.t-pink p { margin-bottom: 26px; }
.wave { margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 5px; height: 96px; }
.wave i { flex: 1; max-width: 8px; height: 30%; border-radius: 4px; background: #7fae1e; animation: wave 1.2s ease-in-out infinite; }
.wave i:nth-child(3n) { height: 78%; animation-delay: -0.3s; } .wave i:nth-child(3n + 1) { height: 46%; animation-delay: -0.7s; } .wave i:nth-child(4n) { height: 100%; animation-delay: -0.5s; } .wave i:nth-child(5n) { height: 22%; animation-delay: -0.9s; }
@keyframes wave { 50% { transform: scaleY(0.45); } }
.t-notch { grid-column: 1 / -1; order: 2; min-height: 420px; justify-content: flex-end; }
.t-notch .tile-bg { object-position: center 60%; }
.notch { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(500px, 88%); background: #000; color: #fff; border-radius: 0 0 26px 26px; padding: 16px 18px 14px; font-size: 14px; }
.notch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.notch-chips span { display: inline-flex; align-items: center; gap: 7px; background: #1c1c1f; border-radius: 999px; padding: 6px 11px; font-size: 13px; color: #d9d9de; }
.notch ul { list-style: none; margin: 0; padding: 0; }
.notch li { display: flex; align-items: center; gap: 12px; padding: 8px 2px; }
.notch .bot { width: 30px; }
.notch li div { flex: 1; min-width: 0; }
.notch li b { display: block; font-weight: 550; }
.notch li span { display: block; color: #a4a4ad; font-size: 13px; }
.notch .pill.yes { background: #fff; color: #000; font-size: 13px; }

/* connectors */
.connect .head { margin-bottom: 36px; }
.belt { display: grid; gap: 10px; overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.belt-row { display: flex; gap: 10px; width: max-content; animation: belt 70s linear infinite; }
.belt-row.back { animation-direction: reverse; }
@keyframes belt { to { transform: translateX(calc(-50% - 5px)); } }
.chip { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 13px 20px 13px 16px; font-size: 16px; font-weight: 500; }
.belt-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* how to use it */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step-art { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; margin-bottom: 22px; }
.step-art > img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.snip { position: absolute; left: 16px; right: 16px; top: 16px; background: #fff; border-radius: 20px; padding: 10px; display: grid; gap: 6px; font-size: 14px; box-shadow: 0 20px 44px -28px rgba(10, 60, 120, 0.55); }
.field { display: flex; align-items: center; gap: 12px; background: var(--wash); border-radius: 12px; padding: 10px 13px; font-weight: 500; }
.field em, .snip-row em { font: 400 12px/1 var(--pixel); color: var(--ink-3); font-style: normal; }
.field em { width: 3.4em; }
.shapes { display: flex; justify-content: space-between; padding: 8px 10px; }
.shapes .bot { width: 12%; }
.shapes .bot:first-child { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 50%; }
.snip.chatty { padding: 14px; gap: 8px; }
.snip .b { justify-self: start; max-width: 86%; background: var(--wash); border-radius: 4px 16px 16px 16px; padding: 9px 13px; line-height: 1.35; }
.snip .b.me { justify-self: end; background: var(--blue); color: #fff; border-radius: 16px 16px 4px 16px; }
.snip-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--wash); font-weight: 500; }
.snip-row em { margin-left: auto; }
.snip-row.dim { color: var(--ink-3); background: none; }
.step-n { font: 500 13px/1 var(--pixel); color: var(--ink-3); margin: 0 0 8px; }
.steps p:not(.step-n) { color: var(--ink-2); margin: 0; max-width: 34ch; }
.steps h3, .steps p { padding: 0 6px; }

/* jobs */
.jobs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chips button { font: 500 16px/1 var(--sans); color: var(--ink); background: var(--wash); border: 0; border-radius: 999px; padding: 13px 18px; cursor: pointer; }
.chips button:hover { background: #ebebe8; }
.chips button[aria-selected="true"] { background: var(--ink); color: #fff; }
.jobs-show { border-radius: 32px; padding: 48px; min-height: 290px; display: flex; align-items: center; background: var(--sky); transition: background-color 0.35s ease; }
.jobs-show[data-on="1"] { background: var(--pink); } .jobs-show[data-on="2"] { background: var(--cream); } .jobs-show[data-on="3"] { background: var(--lime); } .jobs-show[data-on="4"] { background: var(--lilac); } .jobs-show[data-on="5"] { background: var(--lemon); }
.job { display: none; align-items: center; gap: 36px; }
.job.on { display: flex; }
.job .bot { width: 128px; cursor: pointer; }
.job.on .bot { animation: hop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.job p { margin: 0; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.28; letter-spacing: -0.025em; color: #2c2c33; }
.job b { font-weight: 550; color: var(--ink); }

/* where it runs */
.where { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.where-sub { font-size: 18px; color: var(--ink-2); margin: 18px 0 0; max-width: 40ch; }
.places { display: grid; gap: 8px; margin-top: 32px; }
.places button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--wash); border: 0; border-radius: 18px; padding: 19px 22px; cursor: pointer; }
.places button:hover { background: #ebebe8; }
.places b { font-weight: 550; font-size: 18px; letter-spacing: -0.02em; }
.places span { font: 400 13px/1 var(--pixel); color: var(--ink-3); }
.places button[aria-selected="true"] { background: var(--ink); color: #fff; }
.places button[aria-selected="true"] span { color: #b9b9c2; }
.where-art { position: relative; min-height: 640px; border-radius: 28px; overflow: hidden; display: grid; place-items: center; padding: 28px; }
.where-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.place { position: relative; display: none; width: min(460px, 100%); background: #fff; border-radius: 24px; padding: 30px; box-shadow: 0 30px 70px -34px rgba(10, 60, 120, 0.55); }
.place.on { display: block; }
.path { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 6px; }
.path li { position: relative; background: var(--wash); border-radius: 12px; padding: 11px 14px; font-weight: 500; font-size: 15px; text-align: center; }
.path li + li { margin-top: 18px; }
.path li + li::before { content: "\2195"; position: absolute; left: 50%; top: -21px; transform: translateX(-50%); color: var(--ink-3); font-size: 14px; }
.path li.mid { background: var(--lemon); }
.code { font: 400 12.5px/1.5 var(--mono); background: #16161a; color: #f1f1f1; border-radius: 12px; padding: 13px 15px; margin: 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ticks { list-style: none; margin: 22px 0 20px; padding: 0; display: grid; gap: 9px; font-size: 15px; color: #33333a; }
.ticks li, .plan li { padding-left: 18px; text-indent: -18px; }
.ticks li::before, .free li::before, .plan li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--green); margin-right: 10px; vertical-align: 1px; }
.place > a { font-weight: 500; text-decoration: none; }
.place > a::after { content: " \2192"; display: inline-block; margin-left: 4px; transition: transform 0.15s; }
.place > a:hover::after { transform: translateX(3px); }

/* free */
.free { text-align: center; margin-top: 140px; padding: 0 24px; }
.free-over { font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; letter-spacing: -0.04em; margin: 0; }
.zero { font: 700 clamp(190px, 37vw, 520px)/0.86 var(--pixel); letter-spacing: -0.04em; margin: 0; color: transparent; background: url("/art/wide-layers.webp") center 78% / 135% auto; -webkit-background-clip: text; background-clip: text; user-select: none; }
.free ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: 17px; }
.free-note { color: var(--ink-3); font-size: 15px; margin: 22px 0 0; }

/* pricing */
.pricing { position: relative; max-width: 1256px; margin: 140px auto 0; padding: 0 24px; }
.pricing-sky { position: absolute; inset: 0 24px; width: calc(100% - 48px); height: 100%; object-fit: cover; object-position: center bottom; border-radius: 28px; }
.pricing-in { position: relative; text-align: center; padding: 76px 28px 190px; }
.pricing-sub { font-size: 18px; color: #12314d; margin: 16px 0 0; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1010px; margin: 112px auto 0; text-align: left; }
.plan { position: relative; background: #fff; border-radius: 24px; padding: 16px 26px 26px; box-shadow: 0 24px 60px -32px rgba(10, 60, 120, 0.55); }
.plan .lights { padding: 0; margin: 0 -8px 26px; }
.plan .lights i { width: 11px; height: 11px; }
.plan h3 { font-size: 30px; letter-spacing: -0.04em; margin: 0 0 4px; }
.plan-line { margin: 0; color: var(--ink-2); }
.plan .price { font-size: 68px; line-height: 1; letter-spacing: -0.055em; font-weight: 500; margin: 30px 0 6px; }
.per { margin: 0; color: var(--ink-3); font-size: 14px; }
.plan .btn { display: flex; margin: 22px 0 20px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; color: #33333a; }
.cat { position: absolute; right: 10px; top: -96px; width: 168px; margin: 0; }
.cat img { image-rendering: auto; }
.cat figcaption { position: absolute; right: 100%; top: 40px; margin-right: 4px; white-space: nowrap; font: 500 13px/1 var(--pixel); color: #12314d; transform: rotate(-5deg); }
.pricing-fine { display: table; font-size: 14px; color: var(--ink-2); background: #fff; border-radius: 18px; padding: 14px 20px; margin: 22px auto 0; max-width: 70ch; }

/* questions */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.faq-side p:not(.kicker) { color: var(--ink-2); margin: 18px 0 0; }
.qs { display: grid; gap: 8px; }
.qs details { background: var(--wash); border-radius: 20px; }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 19px 24px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; font: 400 20px/1.2 var(--pixel); color: var(--ink-3); transition: transform 0.2s; }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs p { margin: 0; padding: 0 24px 22px; color: var(--ink-2); max-width: 60ch; }

/* the ending */
.end { position: relative; height: clamp(560px, 62vw, 920px); margin-top: 150px; overflow: hidden; text-align: center; background: #29a9f2; }
.end > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.end-text { position: relative; z-index: 1; padding: clamp(56px, 8vw, 130px) 24px 0; }
.end h2 { font-size: clamp(44px, 7.4vw, 108px); letter-spacing: -0.055em; line-height: 0.98; color: #fff; }
.end-text p { font-size: clamp(16px, 1.5vw, 20px); margin: 20px 0 0; color: #fff; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.end .actions { margin-top: 28px; }
.btn.light { background: #fff; color: var(--ink); }
.btn.light:hover { background: #f1f1ef; }
.dissolve { position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 120px; background: url("/art/dissolve.png") repeat-x center bottom / auto 100%; image-rendering: pixelated; }

@media (max-width: 980px) {
  .home > section.wrap, .home > section.connect { margin-top: 96px; }
  .hero { grid-template-columns: 1fr; padding-top: 0; }
  .hero-side { order: -1; padding: 28px 8px 36px; }
  .poster { height: auto; padding: 56px 16px 120px; }
  .card { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: 540px; margin: 0 auto; padding: 28px 24px 26px; }
  .models, .jobs, .where, .faq { grid-template-columns: 1fr; gap: 32px; }
  .signin { justify-self: start; }
  .tile, .t-computer { grid-column: 1 / -1; grid-row: auto; }
  .steps, .plans { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .plans { margin-top: 110px; gap: 16px; }
  .plan.has-cat { order: -1; }
  .where-art { min-height: 0; padding: 40px 16px; }
}
@media (max-width: 760px) {
  .stage { aspect-ratio: auto; overflow: visible; background: none; padding-top: 34%; }
  .stage > img { height: auto; aspect-ratio: 3 / 2; border-radius: 22px; inset: 0 0 auto; }
  .app { position: relative; left: auto; top: auto; transform: none; width: calc(100% - 20px); margin: 0 auto; aspect-ratio: auto; font-size: 12.5px; grid-template-columns: minmax(0, 1fr); }
  .app-side { display: none; }
  .app-head { padding-top: 1.2em; }
  .screen-card, .msg.me { max-width: none; width: auto; }
  .screen-card { align-self: stretch; }
  .t-computer { min-height: 520px; }
  .ask-row.big { font-size: 14px; white-space: nowrap; }
  .mini-screen { width: calc(100% - 40px); right: 20px; bottom: 20px; }
  .tile-text { max-width: none; }
  .jobs-show { padding: 32px 26px; min-height: 0; }
  .job { flex-direction: column; align-items: flex-start; gap: 22px; }
  .job .bot { width: 96px; }
  .pricing { padding: 0 12px; }
  .pricing-sky { inset: 0 12px; width: calc(100% - 24px); }
  .pricing-in { padding: 56px 14px 110px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bot .eyes rect, .dot.is-work, .pointer, .wave i, .belt-row, .bot.hop, .job.on .bot { animation: none; }
  .bot .eyes { transition: none; }
}