/* Simplify Edits — alternative site (v2).
   Structure, rhythm and motion studied from moonjar.ai (see docs/moonjar-study.md); our own colours,
   logo and words. Inter + Geist Mono (both OFL). Brand colours from the app: off-white #FBFAF9,
   ink #201C19, violet #8B5CF6, green #2F9367. */
@font-face { font-family: "Inter"; src: url(/fonts/inter-400.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-500.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-600.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono-400.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono-500.ttf) format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --bg: #FBFAF9; --ink: #201C19; --ink-2: #4A443F; --muted: #7B746C; --faint: #A39C93;
  --card: #F1EEE9; --card-2: #F6F3EF; --line: #E6E1DA; --line-2: #D8D2C9; --white: #fff;
  --violet: #8B5CF6; --violet-deep: #6D3FE0; --violet-soft: #EEE8FD; --violet-mark: rgba(139, 92, 246, .17);
  --green: #2F9367; --green-soft: #E5F3EC; --warn: #8A5A12; --warn-soft: #FBF1DE;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-s: 0 1px 2px rgba(32, 28, 25, .05), 0 6px 22px rgba(32, 28, 25, .06);
  --shadow-m: 0 2px 4px rgba(32, 28, 25, .04), 0 18px 50px rgba(32, 28, 25, .10);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --page-top: 52px;
  --feature-gap: clamp(48px, 5.6vw, 80px);
  --h1: clamp(34px, 3.4vw, 54px); --h2: clamp(28px, 2.55vw, 40px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 8px; }
code { font: 0.86em var(--mono); background: var(--card); padding: .1em .4em; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 12px; }
.wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }
.wrap.narrow { width: min(680px, 100% - 48px); }
.wrap.mid { width: min(900px, 100% - 48px); }
.center { text-align: center; }
.mono { font-family: var(--mono); }

/* ------------------------------------------------------------------ typography */
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
h1 { font-size: var(--h1); line-height: 1.04; }
h2 { font-size: var(--h2); line-height: 1.06; font-weight: 400; }
h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.lede { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--muted); margin: 18px auto 0; max-width: 560px; }
.eyebrow, .sec-label { font: 500 11.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }
.sec-label { color: var(--muted); }
em.ital { font-style: italic; font-weight: 400; }
.hl { background: linear-gradient(transparent 6%, var(--violet-mark) 6%, var(--violet-mark) 94%, transparent 94%); padding: 0 .28em; margin: 0 -.08em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; color: var(--ink-2); }
.squiggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3 T18 3 T24 3' fill='none' stroke='%232F9367' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: 0 100%; padding-bottom: 5px; }

/* ------------------------------------------------------------------ buttons and chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 24px; border-radius: 999px; font: 500 15.5px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; box-shadow: 0 8px 22px rgba(32, 28, 25, .22); }
.btn-light { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-s); }
.btn-light:hover { border-color: var(--line-2); }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: 14px; }
.btn .chev { opacity: .55; font-size: 1.1em; }
.pill-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: var(--shadow-s); transition: transform .2s var(--ease), border-color .2s; }
.pill-link:hover { transform: translateY(-1px); border-color: var(--line-2); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 13px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font: 400 12.5px/1 var(--mono); color: var(--ink-2); }
.chip.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.violet { background: var(--violet-soft); border-color: #D9CCFA; color: var(--violet-deep); }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ------------------------------------------------------------------ nav: normal document flow */
.nav { position: relative; padding: 14px 24px; }
.nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; max-width: 1180px; margin: 0 auto; min-height: 58px; }
.nav-links .mobile-cta { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 20px/1 var(--sans); letter-spacing: -.04em; text-decoration: none; justify-self: start; }
body img[src="/brand/app-icon-circle-256.png"] { border-radius: 50%; }
.brand img { width: 34px; height: 34px; border-radius: 50%; }
.nav-links { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; justify-self: center; }
.nav-links a { display: block; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--ink); transition: background .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: rgba(32, 28, 25, .06); }
.nav .btn { justify-self: end; }
.menu-toggle { display: none; justify-self: end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 0; position: relative; }
.menu-toggle::before, .menu-toggle::after { content: ""; position: absolute; left: 12px; right: 12px; height: 1.6px; background: var(--ink); top: 15px; transition: transform .25s var(--ease), top .25s var(--ease); }
.menu-toggle::after { top: 23px; }
.menu-toggle[aria-expanded="true"]::before { top: 19px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"]::after { top: 19px; transform: rotate(-45deg); }
main { padding-top: 0; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; padding: 138px 0 0; text-align: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; left: 50%; top: 520px; width: 1500px; height: 760px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(176, 150, 255, .34), rgba(255, 206, 180, .18) 55%, transparent 80%); filter: blur(30px); z-index: 0; pointer-events: none; }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 780px; margin: 0 auto; font-size: clamp(34px, 3.9vw, 62px); }
.swap { display: inline-grid; vertical-align: baseline; }
.swap-item { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .22em; white-space: nowrap; opacity: 0; transform: translateY(.14em) scale(.98); filter: blur(6px); transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
.swap-item.is-on { opacity: 1; transform: none; filter: none; }
.swap-item img { width: .86em; height: .86em; border-radius: .2em; }
.hero .lede { max-width: 540px; margin-top: 22px; }
.hero .cta-row { margin-top: 30px; }
.stage { position: relative; margin: 56px auto 0; width: min(1100px, 100%); }
.window { position: relative; border-radius: 22px; background: #fff; border: 1px solid rgba(32, 28, 25, .08); box-shadow: 0 40px 110px rgba(80, 50, 160, .22), 0 10px 30px rgba(32, 28, 25, .10); overflow: hidden; aspect-ratio: 16 / 9; }
.window video, .window img { width: 100%; height: 100%; object-fit: cover; }
.made-with { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 14px 0 0; font: 400 12px/1.4 var(--mono); color: var(--muted); text-align: left; max-width: 640px; margin-inline: auto; }
.made-with svg { flex: none; width: 34px; height: 30px; color: var(--faint); margin-top: -2px; }
.hero-end { height: 90px; }

/* custom play/pause on every loop */
.vid { position: relative; display: block; margin: 0; }
.vid-btn { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(32, 28, 25, .72); color: #fff; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s var(--ease), background .2s; }
.vid-btn:hover { background: rgba(32, 28, 25, .9); transform: scale(1.06); }
.vid-btn svg { width: 14px; height: 14px; fill: currentColor; }
.vid-btn .i-play { display: none; }
.vid.is-paused .vid-btn .i-pause { display: none; }
.vid.is-paused .vid-btn .i-play { display: block; }
.vid-error { position: absolute; inset: auto 14px 14px 14px; background: #fff; border-radius: 12px; padding: 10px 14px; font-size: 14px; box-shadow: var(--shadow-s); }
.cap { font: 400 12px/1.5 var(--mono); color: var(--muted); text-align: center; margin: 14px auto 0; max-width: 620px; }

/* ------------------------------------------------------------------ sections */
.section { padding: clamp(72px, 9vw, 130px) 0; }
.section.tight { padding-block: clamp(48px, 6vw, 84px); }
.sec-head { text-align: center; }
.sec-head h2 { max-width: 640px; margin: 0 auto; }
.sec-head .lede { margin-top: 16px; }
.agents-row { display: flex; gap: 18px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.agent-tile { display: grid; justify-items: center; gap: 12px; width: 150px; padding: 22px 12px 18px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-s); transition: transform .35s var(--ease), box-shadow .35s; }
.agent-tile:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow-m); }
.agent-tile img { width: 64px; height: 64px; border-radius: 16px; }
.agent-tile b { font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.agent-tile span { font: 400 11px/1.2 var(--mono); color: var(--faint); }

/* chat bubbles */
.bubble { max-width: 560px; padding: 11px 16px; border-radius: 20px; font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; }
.bubble.user { background: var(--violet); color: #fff; margin-left: auto; border-bottom-right-radius: 6px; }
.bubble.bot { background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.from { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.chat { display: grid; gap: 14px; }
.chat .row { display: flex; align-items: flex-end; gap: 10px; }
.chat .row.user { justify-content: flex-end; }
.chat .avatar { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; color: var(--ink-2); }
.checks li { display: flex; gap: 9px; align-items: flex-start; }
.checks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.checks li.wait::before { background: #fff; border: 1.6px solid var(--violet); }

/* "One prompt" tabs */
.tabs { display: flex; justify-content: center; margin-top: 30px; }
.tablist { display: inline-flex; gap: 2px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-s); position: relative; flex-wrap: wrap; justify-content: center; }
.tab { position: relative; z-index: 1; border: 0; background: transparent; font: 500 14px/1 var(--sans); padding: 11px 18px; border-radius: 999px; cursor: pointer; color: var(--muted); transition: color .2s, background .2s; }
.tab[aria-selected="true"] { color: var(--ink); background: var(--card); }
.tab:hover { color: var(--ink); }
.panel { margin-top: 28px; background: var(--card); border-radius: 28px; padding: clamp(18px, 2.4vw, 32px); display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.panel[hidden] { display: none; }
.panel .side { display: grid; gap: 16px; align-content: start; }
.panel .card-white { background: #fff; border-radius: 20px; padding: 18px 18px 20px; box-shadow: var(--shadow-s); border: 1px solid var(--line); }
.panel .stage-in { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-m); }
.panel .stage-in video, .panel .stage-in img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.panel .note { font: 400 12px/1.5 var(--mono); color: var(--muted); margin: 14px 2px 0; }
.fade-swap { animation: panelIn .6s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* "Ask for cuts you'd rather not make by hand" cards with before/after */
.ask-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.ask-card { background: var(--card); border-radius: 26px; padding: 18px 18px 22px; display: grid; gap: 14px; }
.ask-card .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ba { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; box-shadow: var(--shadow-s); user-select: none; touch-action: pan-y; --pos: 50%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ba .after { clip-path: inset(0 0 0 var(--pos)); }
.ba .tag { position: absolute; top: 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: rgba(32, 28, 25, .78); color: #fff; padding: 6px 9px; border-radius: 999px; z-index: 2; }
.ba .tag.l { left: 10px; } .ba .tag.r { right: 10px; background: var(--violet); }
.ba .bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(32, 28, 25, .15); z-index: 3; transform: translateX(-1px); }
.ba .bar::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-m); display: grid; place-items: center; font: 500 13px/1 var(--mono); letter-spacing: 3px; padding-left: 3px; color: var(--ink); }
.ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; }
.center-link { text-align: center; margin-top: 34px; }

/* "Things your agent can't do alone" tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 46px; }
.tile { background: var(--card); border-radius: 26px; padding: 22px 22px 0; overflow: hidden; display: grid; gap: 8px; align-content: start; }
.tile p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 430px; }
.tile .shot { margin-top: 16px; margin-inline: -4px; border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: var(--shadow-m); background: #fff; aspect-ratio: 16 / 9; }
.tile .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .6s var(--ease); }
.tile:hover .shot img { transform: scale(1.03); }
.tag-line { text-align: center; color: var(--muted); margin: 34px 0 0; font-size: 16px; }

/* versus */
.versus-box { background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-s); padding: clamp(28px, 4vw, 56px) 24px; text-align: center; }
.versus-box h2 { margin-top: 14px; }
.vs-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 24px 0 8px; flex-wrap: wrap; }
.vs-row .vs { font: 400 10px/1 var(--mono); letter-spacing: .12em; color: var(--faint); }
.vs-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: var(--shadow-s); font-size: 14px; font-weight: 500; }
.vs-pill img { width: 22px; height: 22px; border-radius: 6px; }
.vs-pill i { width: 22px; height: 22px; border-radius: 50%; border: 5px solid var(--violet); display: block; }
.versus-box .big { font-size: clamp(19px, 1.7vw, 24px); margin: 28px auto 0; letter-spacing: -.02em; }
.versus-box p { color: var(--muted); max-width: 470px; margin: 14px auto 0; font-size: 15.5px; }
.versus-box .pill-link { margin-top: 24px; }

/* FAQ as a chat */
.faq { max-width: 560px; margin: 36px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-m); padding: 16px 20px 22px; }
.faq-head { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14.5px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.faq-head img { width: 24px; height: 24px; border-radius: 7px; }
.faq .chat { gap: 12px; }
.faq .bubble { font-size: 14.5px; }
.faq .bubble.bot { background: var(--card); border: 0; }
.faq .bubble.user { font-weight: 500; }

/* founder */
.founder { background: #fff; border-radius: 28px; box-shadow: var(--shadow-m); border: 1px solid var(--line); padding: clamp(26px, 4vw, 54px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 920px; margin: 0 auto; }
.founder h2 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 18px; }
.founder p { color: var(--muted); font-size: 15.5px; margin: 0 0 14px; }
.founder .who { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 13px; line-height: 1.3; }
.founder .who b { display: block; font-weight: 600; }
.founder .who span { color: var(--muted); }
.avatar-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #FFD9B8, #CFC3FF); display: grid; place-items: center; font: 600 14px/1 var(--sans); color: var(--ink-2); flex: none; overflow: hidden; }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.collage { position: relative; height: 270px; }
.collage img { position: absolute; border-radius: 26px; box-shadow: 0 18px 40px rgba(32, 28, 25, .22); transition: transform .5s var(--ease); }
.collage img:nth-child(1) { width: 150px; left: 6%; top: 30px; transform: rotate(-9deg); z-index: 1; }
.collage img:nth-child(2) { width: 150px; right: 4%; top: 6px; transform: rotate(8deg); }
.collage img:nth-child(3) { width: 168px; left: 28%; top: 96px; transform: rotate(-2deg); z-index: 2; }
.collage:hover img:nth-child(1) { transform: rotate(-12deg) translateY(-4px); }
.collage:hover img:nth-child(2) { transform: rotate(11deg) translateY(-4px); }
.collage-cap { text-align: center; font: 400 11.5px/1.4 var(--mono); color: var(--muted); margin-top: 6px; }

/* closing CTA */
.closing { text-align: center; padding: clamp(70px, 8vw, 120px) 0 clamp(80px, 9vw, 130px); }
.closing img.icon { width: 64px; height: 64px; border-radius: 17px; margin: 0 auto 20px; box-shadow: var(--shadow-m); }
.closing h2 { font-size: clamp(30px, 3vw, 46px); }
.closing .btn { margin-top: 26px; }
.closing small { display: block; margin-top: 18px; color: var(--muted); font-size: 13.5px; }

/* footer */
.footer { background: #fff; border-top: 1px solid var(--line); padding: 34px 0 30px; font: 400 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.footer .cols { display: flex; justify-content: space-between; gap: 24px; }
.footer h2 { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; color: var(--ink); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { text-decoration: none; color: var(--muted); }
.footer a:hover { color: var(--ink); }
.footer .icon { width: 44px; height: 44px; border-radius: 12px; box-shadow: var(--shadow-s); }
.footer .base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }
.footer .base b { color: var(--ink); font-weight: 500; }
.footer .base span a { margin-left: 12px; }
.footer .note { text-transform: none; letter-spacing: 0; margin: 16px 0 0; color: var(--muted); font: 400 12px/1.5 var(--sans); }

/* reveal motion */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ features */
.page-head { padding: var(--page-top) 0 0; text-align: center; }
.page-head h1 { max-width: 720px; margin: 0 auto; }
.chips-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 34px auto 0; max-width: 820px; }
.chips-nav a { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: var(--shadow-s); transition: transform .2s var(--ease), border-color .2s; }
.chips-nav a:hover { transform: translateY(-1px); border-color: var(--line-2); }
.chips-nav a span { font: 400 11px/1 var(--mono); color: var(--faint); }
.big-stage { position: relative; margin: 54px auto 0; width: min(1120px, 100% - 48px); border-radius: 30px; padding: clamp(18px, 4vw, 54px); background: linear-gradient(135deg, #E7DFFB 0%, #F6E4DB 50%, #E4EFE9 100%); }
.big-stage .window { border-radius: 16px; }
.feat { padding-top: clamp(60px, 7vw, 100px); }
.feat .head { max-width: 700px; }
.feat .head h2 { margin-bottom: 14px; }
.feat .head p { color: var(--muted); margin: 0; max-width: 560px; }
.gcard { margin-top: 34px; background: var(--card); border-radius: 28px; padding: clamp(18px, 2.6vw, 34px); display: grid; gap: 22px; }
.gcard.two { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
.gcard .copy { display: grid; gap: 12px; align-content: start; }
.gcard .copy h3 { font-size: 24px; margin-top: 8px; }
.gcard .copy p { margin: 0; color: var(--muted); font-size: 15.5px; }
.gcard .media { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-m); }
.gcard .media img, .gcard .media video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gcard .media.still img { object-position: top left; }
.back-top { display: inline-flex; margin-top: 22px; font: 400 12px/1 var(--mono); color: var(--faint); text-decoration: none; }
.back-top:hover { color: var(--ink); }
.subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.subgrid .gcard { margin-top: 0; }
.not-yet { margin-top: 70px; background: var(--warn-soft); border-radius: 24px; padding: 28px 30px; }
.not-yet h3 { margin-bottom: 10px; }
.not-yet ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 15.5px; display: grid; gap: 6px; }

/* ------------------------------------------------------------------ what's possible */
.group { padding-top: clamp(64px, 8vw, 110px); }
.group .head { text-align: center; max-width: 620px; margin: 0 auto; }
.group .head p { color: var(--muted); margin: 14px 0 0; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 38px; }
.gallery.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery.one { grid-template-columns: minmax(0, 1fr); }
.item { background: var(--card); border-radius: 24px; padding: 14px 14px 20px; display: grid; gap: 12px; align-content: start; }
.item .shot { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-s); aspect-ratio: 16 / 10; }
.item .shot img, .item .shot video { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .6s var(--ease); }
.item:hover .shot img { transform: scale(1.025); }
.item h3 { font-size: 17px; padding: 0 6px; }
.item .req { margin: 0 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.item .req::before { content: "“"; } .item .req::after { content: "”"; }
.item .meta { margin: 0 6px; font: 400 11.5px/1.5 var(--mono); color: var(--muted); }
.item.wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 22px; padding: 20px; align-items: center; }
.item.wide .shot { aspect-ratio: 16 / 9; }
.item.wide h3 { padding: 0; font-size: 22px; } .item.wide .req, .item.wide .meta { margin: 0; }
.honest { background: var(--warn-soft); }

/* ------------------------------------------------------------------ why */
.statement { font-size: clamp(30px, 3.2vw, 50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 500; margin: 0 0 6px; }
.statement.muted { color: var(--faint); }
.story p { color: var(--muted); font-size: 18px; line-height: 1.6; margin: 18px 0 0; max-width: 620px; }
.versus-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
.vp { background: var(--card); border-radius: 26px; padding: 22px; display: grid; gap: 14px; align-content: start; }
.vp .tag { font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.manual-list { list-style: none; margin: 0; padding: 14px 16px; background: #fff; border-radius: 16px; border: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.manual-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--card-2); }
.manual-list li span { font: 400 11.5px/1.6 var(--mono); color: var(--faint); }
.vp .fine { font: 400 12px/1.5 var(--mono); color: var(--muted); margin: 0; }

/* ------------------------------------------------------------------ guides */
.stat-line { font: 500 11.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.search { position: relative; max-width: 520px; margin: 30px auto 0; }
.search input { width: 100%; height: 52px; border-radius: 999px; border: 1px solid var(--line); background: #fff; padding: 0 22px 0 48px; font: 400 16px var(--sans); box-shadow: var(--shadow-s); }
.search svg { position: absolute; left: 18px; top: 16px; width: 20px; height: 20px; color: var(--faint); }
.topics { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.topics button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; font: 500 13.5px var(--sans); cursor: pointer; }
.topics button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.gc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.gcard-link { display: grid; gap: 12px; align-content: start; background: var(--card); border-radius: 24px; padding: 22px; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; min-height: 220px; }
.gcard-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.gcard-link .kind { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--faint); }
.gcard-link h3 { font-size: 21px; }
.gcard-link p { margin: 0; color: var(--muted); font-size: 15px; }
.gcard-link .chip { align-self: end; justify-self: start; }
.gcard-link[hidden] { display: none; }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.guide-nav { position: sticky; top: 100px; display: grid; gap: 4px; font-size: 14.5px; }
.guide-nav a { padding: 9px 14px; border-radius: 12px; text-decoration: none; color: var(--muted); }
.guide-nav a:hover { background: var(--card); color: var(--ink); }
.guide-nav a[aria-current="page"] { background: var(--card); color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------------ prose, notes, forms, tables */
.prose { max-width: 680px; }
.prose h2 { font-size: 26px; margin: 44px 0 12px; font-weight: 500; }
.prose h3 { margin: 28px 0 8px; font-size: 19px; }
.prose p, .prose li { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose figure { margin: 26px 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-m); background: #fff; }
.prose figure figcaption { padding: 10px 14px; font: 400 12px/1.5 var(--mono); color: var(--muted); background: var(--card-2); }
.prose .next { margin-top: 36px; }
.prose a { color: var(--violet-deep); }
.link-arrow { font-weight: 500; text-decoration: none; color: var(--ink); }
.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--violet-deep); }
.confirm { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0; padding: 14px 16px; border-radius: 16px; background: var(--warn-soft); border: 1px solid #EFDDB4; }
.confirm .label { flex: none; font: 500 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--warn); background: #fff; border-radius: 999px; padding: 6px 9px; }
.confirm p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.fine { font-size: 13.5px; color: var(--muted); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.flow li { background: var(--card); border-radius: 22px; padding: 20px 18px 22px; display: grid; gap: 8px; align-content: start; }
.flow li .mono { font-size: 11.5px; color: var(--faint); }
.flow li h3 { font-size: 17px; }
.flow li p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.step-sec { padding: clamp(46px, 6vw, 86px) 0; border-top: 1px solid var(--line); }
.step-sec .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
.step-sec h2 { font-size: clamp(26px, 2.5vw, 38px); margin-bottom: 14px; }
.step-sec p { color: var(--muted); margin: 0 0 14px; }
.try { background: var(--card); border-radius: 18px; padding: 16px 18px; font-size: 15px; color: var(--ink-2); margin: 18px 0; }
.try b { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--violet-deep); display: block; margin-bottom: 8px; }
.step-sec .media { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-m); background: #fff; }
.step-sec .media img, .step-sec .media video { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.table-wrap { overflow-x: auto; margin-top: 28px; border-radius: 22px; border: 1px solid var(--line); background: #fff; }
.compare { border-collapse: collapse; width: 100%; font-size: 15px; }
.compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); background: var(--card-2); }
.compare tbody th { font-weight: 500; white-space: nowrap; }
.compare tr:last-child > * { border-bottom: 0; }
.compare tr.ours { background: var(--violet-soft); }

.join { max-width: 520px; margin: 34px auto 0; text-align: left; }
.join .field-row { display: flex; gap: 8px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-s); transition: box-shadow .2s, border-color .2s; }
.join .field-row:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(139, 92, 246, .14); }
.join input[type="email"] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px var(--sans); padding: 0 16px; }
.join label.lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.join .consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 6px 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.join .consent input { margin-top: 3px; accent-color: var(--ink); width: 16px; height: 16px; }
.join .consent a { color: var(--ink-2); }
.hp { position: absolute; left: -9999px; }
.form-status { min-height: 22px; margin: 12px 6px 0; font-size: 14px; }
.form-status.ok { color: var(--green); } .form-status.err { color: #B3261E; }
.join button[disabled] { opacity: .65; cursor: progress; }

dialog.full { width: min(1120px, 94vw); border: 0; padding: 0; border-radius: 24px; background: #0F0D0C; color: #fff; box-shadow: 0 40px 120px rgba(0, 0, 0, .5); overflow: hidden; }
dialog.full::backdrop { background: rgba(32, 28, 25, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.full video { width: 100%; height: auto; max-height: 80vh; background: #000; }
dialog.full .bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 10px 20px; font: 400 12px/1.4 var(--mono); }
dialog.full button { border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 16px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 960px) {
  .panel, .gcard.two, .step-sec .wrap, .founder, .guide-layout, .item.wide { grid-template-columns: minmax(0, 1fr); }
  .gallery, .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-nav { position: static; grid-auto-flow: column; overflow-x: auto; }
  .collage { height: 230px; max-width: 340px; margin: 0 auto; }
}
@media (max-width: 860px) {
  .nav { padding: 10px 12px; }
  .nav-in { grid-template-columns: 1fr auto; gap: 0 8px; min-height: 48px; }
  .nav-in > nav { grid-column: 1 / -1; grid-row: 2; }
  .nav .btn { display: none; }
  .menu-toggle { display: block; grid-column: 2; grid-row: 1; }
  .brand { font-size: 18px; }
  .nav-links { flex-direction: column; gap: 2px; padding: 12px 0 4px; display: none; justify-self: stretch; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 16px; font-size: 16px; }
  .nav-links .mobile-cta { display: block; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { padding-top: 112px; }
  .hero::before { top: 420px; width: 900px; }
  .stage { margin-top: 38px; }
  .window { border-radius: 14px; }
  .ask-grid, .tiles, .subgrid, .versus-panels, .gallery.two { grid-template-columns: minmax(0, 1fr); }
  .gallery, .gc-grid { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .footer .cols { flex-direction: column; }
  :root { --page-top: 38px; }
  .tablist { border-radius: 24px; }
  .tab { padding: 10px 13px; font-size: 13.5px; }
  .join .field-row { flex-direction: column; border-radius: 22px; padding: 8px; }
  .join .field-row .btn { min-height: 46px; }
  .join input[type="email"] { min-height: 46px; }
  .cta-row .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .rv { opacity: 1; transform: none; }
  .swap-item { filter: none; transform: none; }
}
@media print { .nav, .vid-btn { display: none; } }

.window .vid { height: 100%; }
.window .vid video { height: 100%; }
.media .vid, .stage-in .vid { height: auto; }

.gcard .media.still img { aspect-ratio: 16 / 10; }
.tile .shot { aspect-ratio: 16 / 10; }
.gcard .media.still { background: #fff; }

/* ---- agent grid (Claude Code and Codex work today; the rest are planned) */
.agent-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: 44px auto 0; }
.ag { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 18px 8px 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); text-align: center; transition: transform .35s var(--ease), box-shadow .35s; }
.ag img { width: 52px; height: 52px; border-radius: 13px; }
.ag b { font-weight: 500; font-size: 14px; letter-spacing: -.01em; }
.ag i { font: 400 10.5px/1 var(--mono); font-style: normal; color: var(--faint); letter-spacing: .02em; }
.ag.on:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.ag.on i { color: var(--green); }
.ag.on i::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.ag.soon { background: transparent; border-style: dashed; box-shadow: none; }
.ag.soon img { opacity: .5; filter: grayscale(.35); }
.ag.soon b { color: var(--muted); }
.agents-note { margin: 22px auto 0; text-align: center; font: 400 12px/1.5 var(--mono); color: var(--muted); }

/* ---- flame accent: the editor uses it sparingly (playback, playhead); so does the site */
:root { --flame: #EF6D28; --flame-text: #C4551B; --flame-soft: #FDEBDD; --flame-mark: rgba(239, 109, 40, .20); }
.hl { background-image: linear-gradient(transparent 6%, var(--flame-mark) 6%, var(--flame-mark) 94%, transparent 94%); }
.squiggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3 T18 3 T24 3' fill='none' stroke='%23EF6D28' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sec-label { color: var(--muted); }
.sec-label span { color: var(--flame-text); }
.chips-nav a span { color: var(--flame-text); }
.flow li .mono, .step-sec .eyebrow, .try b { color: var(--flame-text); }
.eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--flame); }
.page-head .eyebrow.plain::before, .stat-line::before { display: none; }
.link-arrow:hover, .prose a:hover { color: var(--flame-text); }
.prose a { color: var(--ink); text-decoration-color: var(--flame); text-decoration-thickness: 1.5px; }
.vid-btn:focus-visible { outline-color: var(--flame); }
.made-with::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 4px rgba(239, 109, 40, .18); }
.made-with svg { display: none; }
.ba .tag.r { background: var(--ink); }
.ba .bar { background: var(--flame); box-shadow: none; }
.ba .bar::after { box-shadow: var(--shadow-m); border: 2px solid var(--flame); }
.guide-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--flame); }
.confirm .label { color: var(--flame-text); }
.agent-grid + .agents-note { color: var(--muted); }
@media (max-width: 960px) { .agent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .agent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ag { padding: 14px 4px 12px; } }

.gc-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 760px) { .gc-grid.two { grid-template-columns: minmax(0, 1fr); } }

/* ---- agent icons: one clean row/grid, same width, full colour, no cards, no tags */
.agent-icons { list-style: none; margin: 44px auto 0; padding: 0; max-width: 880px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 30px 18px; justify-items: center; }
.agent-icons li { width: 100%; display: grid; place-items: center; }
.agent-icons img { width: 56px; height: 56px; border-radius: 14px; transition: transform .35s var(--ease); }
.agent-icons img:hover { transform: translateY(-4px) rotate(-3deg); }
@media (max-width: 960px) { .agent-icons { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 520px; } }
@media (max-width: 560px) { .agent-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 8px; } .agent-icons img { width: 46px; height: 46px; } }

/* ---- hero headline: the agent name cross-fades and the slot is exactly as wide as the current name */
.swap { display: inline-grid; width: var(--w, auto); transition: width .55s var(--ease); vertical-align: baseline; }
.swap-item { justify-self: start; }
.hero h1 { max-width: 840px; }

/* ---- Moonjar-style "Made with" tag under the hero window */
.made { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px auto 0; font: 400 13px/1 var(--mono); color: var(--muted); }
.made svg { width: 38px; height: 28px; color: var(--faint); transform: scaleX(-1) rotate(8deg); margin-right: 2px; }
.made span { display: inline-flex; align-items: center; gap: 7px; }
.made span img { border-radius: 5px; }
.made small { font: 400 11px/1 var(--mono); color: var(--faint); padding-left: 10px; border-left: 1px solid var(--line-2); }
.made-with { display: none; }

/* ---- proof strip (our own measured numbers) */
.proof { padding: 54px 0 4px; text-align: center; }
.proof-label { font: 500 11.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; }
.stats { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stats li { display: grid; gap: 8px; align-content: start; padding: 4px 10px; }
.stats b { font: 500 clamp(30px, 3vw, 44px)/1 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.stats b i { font-style: normal; color: var(--flame); margin: 0 .1em; }
.stats span { font-size: 14px; color: var(--muted); line-height: 1.35; }
.proof-note { font: 400 11.5px/1.5 var(--mono); color: var(--faint); margin: 22px 0 0; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; } }

/* ---- data flow */
.dataflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.df { background: var(--card); border-radius: 26px; padding: 24px 24px 28px; display: grid; gap: 12px; align-content: start; }
.df .chip { justify-self: start; }
.df h3 { font-size: 20px; margin-top: 6px; }
.df p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 960px) { .dataflow { grid-template-columns: minmax(0, 1fr); } }

.hero h1 { max-width: none; min-height: calc(3 * 1.04em); }
.swap-item { align-items: baseline; }
.swap-item img { transform: translateY(.1em); }
@media (max-width: 760px) { .hero h1 .brk { display: none; } .hero h1 { min-height: calc(4 * 1.04em); } }

.stats b { white-space: nowrap; font-size: clamp(26px, 2.6vw, 40px); }

/* ---- hero v3: Aurora gradient behind a clean app window (no video backdrop) */
.hero { padding-bottom: 40px; }
.hero::before { display: none; }
.stage { position: relative; margin: 60px auto 0; width: min(1100px, 100%); isolation: isolate; }
.aurora { position: absolute; z-index: -1; left: 50%; top: 18%; width: min(1500px, 140vw); height: 118%; transform: translateX(-50%); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .62; will-change: transform; }
.aurora .a1 { width: 46%; height: 62%; left: 2%; top: 30%; background: #BBA7FF; animation: drift1 16s ease-in-out infinite alternate; }
.aurora .a2 { width: 44%; height: 58%; left: 28%; top: 38%; background: #FFB9D3; animation: drift2 19s ease-in-out infinite alternate; }
.aurora .a3 { width: 40%; height: 52%; right: 4%; top: 26%; background: #FFD0A8; opacity: .55; animation: drift3 22s ease-in-out infinite alternate; }
.aurora .a4 { width: 36%; height: 46%; left: 38%; top: 8%; background: #CBD7FF; opacity: .5; animation: drift1 25s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from { transform: translate(-3%, 0) scale(1); } to { transform: translate(5%, -6%) scale(1.12); } }
@keyframes drift2 { from { transform: translate(4%, 2%) scale(1.05); } to { transform: translate(-5%, -4%) scale(.94); } }
@keyframes drift3 { from { transform: translate(2%, -2%) scale(.96); } to { transform: translate(-6%, 5%) scale(1.1); } }
.app-win { position: relative; z-index: 1; aspect-ratio: 1500 / 980; border-radius: 1.55% / 2.4%; overflow: hidden; background: #FBFAF9; border: 1px solid rgba(32, 28, 25, .08); box-shadow: 0 50px 120px rgba(76, 48, 168, .26), 0 12px 32px rgba(32, 28, 25, .12); }
.app-win .vid, .app-win video { display: block; width: 100%; height: 100%; object-fit: cover; }
.made { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }
@media (max-width: 760px) { .stage { margin-top: 40px; } .aurora i { filter: blur(48px); } .aurora { height: 112%; } }

/* ---- same job, two loops */
.loops { margin: 70px auto 0; max-width: 940px; }
.loops-label { text-align: center; margin: 0 0 22px; }
.loops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.loop { background: var(--card); border-radius: 26px; padding: 26px 26px 30px; }
.loop.us { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-m); }
.loop h3 { font-size: 20px; }
.loop-sub { font: 400 11.5px/1 var(--mono); color: var(--muted); margin: 8px 0 18px; letter-spacing: .02em; }
.loop ol { list-style: none; margin: 0; padding: 0; counter-reset: l; display: grid; gap: 12px; }
.loop li { counter-increment: l; display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.loop li::before { content: counter(l); font: 500 12px/26px var(--mono); width: 26px; height: 26px; border-radius: 50%; text-align: center; background: #fff; border: 1px solid var(--line-2); color: var(--muted); }
.loop.us li::before { background: var(--flame); border-color: var(--flame); color: #fff; }
.loops-note { text-align: center; font: 400 11.5px/1.5 var(--mono); color: var(--muted); margin: 20px auto 0; max-width: 620px; }
@media (max-width: 760px) { .loops-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- hero v4: the Aurora is a large rounded panel (like the other rounded surfaces) holding the app window */
.hero { overflow: hidden; }
.stage { width: min(1280px, calc(100vw - 32px)); max-width: none; position: relative; left: 50%; transform: translateX(-50%); margin: 56px 0 0; padding: clamp(18px, 5.4vw, 76px) clamp(14px, 5.6vw, 84px) clamp(30px, 6vw, 96px); border-radius: clamp(22px, 2.6vw, 38px); overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #E6DDFF 0%, #F7E2EE 46%, #FFE8D4 100%); box-shadow: 0 30px 80px rgba(76, 48, 168, .10); }
.stage .aurora { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; z-index: -1; -webkit-mask-image: none; mask-image: none; }
.stage .aurora i { opacity: .8; filter: blur(80px); }
.stage .aurora .a1 { width: 52%; height: 74%; left: -8%; top: 36%; }
.stage .aurora .a2 { width: 50%; height: 70%; left: 26%; top: 30%; }
.stage .aurora .a3 { width: 46%; height: 64%; right: -8%; top: 22%; }
.stage .aurora .a4 { width: 44%; height: 56%; left: 30%; top: -14%; }
.stage .app-win { width: min(1100px, 100%); margin: 0 auto; }
.made { margin-top: 22px; }
@media (max-width: 760px) { .stage { margin-top: 36px; border-radius: 22px; } .stage .aurora i { filter: blur(50px); } }

.swap { transition: width .32s var(--ease); }
.swap-item { transition: opacity .2s ease, transform .2s ease, filter .2s ease; pointer-events: none; }
.swap-item.is-on { transition: opacity .4s var(--ease), transform .45s var(--ease), filter .4s var(--ease); }
.swap-item img { flex: none; }

/* founder card: single column until a photo is supplied; no icon collage */
.founder.solo { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.founder-photo img { width: 100%; max-width: 340px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; margin-inline: auto; box-shadow: var(--shadow-m); }
/* early access: Claude Code / Codex icons sit on the page, not on white tiles */
.agent-tile { background: none; border: 0; box-shadow: none; padding: 0; width: auto; min-width: 110px; }
.agent-tile:hover { transform: none; box-shadow: none; }
.agent-tile img { width: 60px; height: 60px; border-radius: 0; }
.agents-row { gap: 34px; }

/* ---- hero v5: the entire hero lives inside one rounded Aurora panel */
.hero { padding: 84px 0 0; overflow: visible; }
.hero-panel { position: relative; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; border-radius: clamp(24px, 2.8vw, 40px); overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #F6F1FF 0%, #F8E6F0 52%, #FFE9D9 100%); box-shadow: 0 30px 80px rgba(76, 48, 168, .10); text-align: center; }
.hero-panel .aurora { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; top: 0; transform: none; z-index: -1; -webkit-mask-image: none; mask-image: none; }
.hero-panel .aurora i { opacity: .8; filter: blur(84px); }
.hero-panel .aurora .a1 { width: 54%; height: 60%; left: -10%; top: 40%; }
.hero-panel .aurora .a2 { width: 52%; height: 58%; left: 24%; top: 46%; }
.hero-panel .aurora .a3 { width: 48%; height: 54%; right: -10%; top: 30%; }
.hero-panel .aurora .a4 { width: 46%; height: 44%; left: 28%; top: -10%; opacity: .6; }
.hero-inner { padding: clamp(56px, 6.4vw, 96px) clamp(16px, 5.6vw, 84px) clamp(32px, 6vw, 92px); }
.hero-panel .stage { position: static; transform: none; left: auto; width: min(1100px, 100%); margin: clamp(36px, 4vw, 60px) auto 0; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.hero-panel .lede { margin-top: 22px; }
.hero-panel .cta-row { margin-top: 30px; }
.hero .made { margin-top: 22px; }
@media (max-width: 760px) { .hero { padding-top: 76px; } .hero-panel { width: calc(100vw - 24px); border-radius: 24px; } .hero-panel .aurora i { filter: blur(52px); } .hero-inner { padding-top: 44px; } }

/* founder card: the three icons sit directly on the card (no tiles, no shadows) with a caption underneath */
.trio { display: grid; justify-items: center; gap: 22px; }
.trio-icons { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px); }
.trio-icons img { width: clamp(64px, 8vw, 96px); height: auto; border-radius: 0; box-shadow: none; transition: transform .5s var(--ease); }
.trio-icons img:nth-child(1) { transform: rotate(-8deg); }
.trio-icons img:nth-child(2) { width: clamp(76px, 9.4vw, 112px); }
.trio-icons img:nth-child(3) { transform: rotate(7deg); }
.founder:hover .trio-icons img:nth-child(1) { transform: rotate(-12deg) translateY(-4px); }
.founder:hover .trio-icons img:nth-child(3) { transform: rotate(11deg) translateY(-4px); }
.trio-cap { margin: 0; text-align: center; font: 400 12px/1.5 var(--mono); color: var(--muted); max-width: 260px; }
.founder.solo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); max-width: 920px; }
@media (max-width: 960px) { .founder.solo { grid-template-columns: minmax(0, 1fr); } }
.made { flex-wrap: wrap; row-gap: 8px; }
.made span { white-space: nowrap; }
@media (max-width: 560px) { .made svg { display: none; } .made small { border-left: 0; padding-left: 0; flex-basis: 100%; text-align: center; } }

/* =====================================================================================
   Recreated editor components (landing page only). Same layout/labels/colours as the app:
   purple actions, lavender plan cards, hatched removed sections, amber selected clip, green audio.
   Base styles = the finished state (what reduced-motion visitors see); keyframes play from the start.
   ===================================================================================== */
:root { --ui-p: #7C4EF0; --ui-lav: #F1EDFE; --ui-lavb: #C7B5F5; --ui-green: #2B9060; --ui-greenbg: #D3E5DA; --ui-amber: #F5B730; --ui-amberbg: #F2E6D8; --ui-hatch: repeating-linear-gradient(135deg, #FBD9D5 0 5px, #FFF4F2 5px 10px); }
.ui-stage { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #EEE8FF 0%, #FBEEF4 55%, #FFF0E3 100%); display: grid; place-items: center; padding: clamp(14px, 2.4vw, 24px); }
.tile .ui-stage { margin: 20px -22px 0; border-radius: 0; }
.ask-card .ui-stage { box-shadow: inset 0 0 0 1px rgba(32, 28, 25, .04); }
.ui { width: 100%; max-width: 440px; }
.ui:not(.live) *, .ui:not(.live) *::before, .ui:not(.live) *::after { animation-play-state: paused !important; }
.ui-card { background: #fff; border: 1px solid #E4DFD8; border-radius: 14px; box-shadow: var(--shadow-s); padding: 12px 14px; }
.ui .lab { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ui .b { font: 500 11px/1 var(--sans); background: #fff; border: 1.5px solid #D9D3CB; border-radius: 8px; padding: 5px 12px; color: var(--ink); display: inline-block; }
.ui .menu { position: absolute; right: 14px; bottom: 14px; background: #fff; border: 1px solid #E4DFD8; border-radius: 12px; box-shadow: var(--shadow-m); padding: 6px; display: grid; gap: 2px; font-size: 12px; min-width: 176px; opacity: 0; animation: uiMenu 7s ease-in-out infinite; }
.ui .menu .row { padding: 7px 10px; border-radius: 7px; color: var(--ink-2); }
.ui .menu .row.hot { background: var(--ui-lav); color: var(--ink); font-weight: 500; }
.ui .chipw { position: absolute; left: 14px; bottom: 14px; background: var(--ui-p); color: #fff; border-radius: 999px; font: 500 11px/1 var(--mono); padding: 6px 11px; animation: uiChip 7s ease-in-out infinite; }
.ui .ln { margin: 0; font-size: 14px; line-height: 2.05; color: var(--ink); }
.src .ui-in, .mn .ui-in { position: relative; background: #fff; border: 1px solid #E4DFD8; border-radius: 14px; box-shadow: var(--shadow-s); padding: 16px 16px 20px; min-height: 176px; }
.ui .w { position: relative; display: inline-block; border-radius: 4px; }

/* timeline */
.tl .ui-in { position: relative; background: #fff; border: 1px solid #E4DFD8; border-radius: 14px; padding: 18px 14px 16px; box-shadow: var(--shadow-s); }
.tl-time { position: absolute; top: -13px; right: 14px; width: 74px; height: 28px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 13px/28px var(--mono); text-align: center; }
.tl-time span { position: absolute; inset: 0; }
.tl-time .ta { opacity: 0; animation: tlA 6s ease-in-out infinite; }
.tl-time .tb { animation: tlB 6s ease-in-out infinite; }
.tl-ruler { height: 14px; display: flex; justify-content: space-between; border-bottom: 1px solid #EEEAE4; padding: 0 2px; }
.tl-ruler i { width: 1px; height: 6px; background: #CFC8BE; align-self: flex-end; }
.tl-row { display: flex; gap: 3px; height: 34px; margin-top: 9px; }
.tl-row b { display: block; border-radius: 6px; position: relative; }
.tl-row .c { background: #EEE9FF; border: 2px solid var(--ui-p); }
.tl-row.a .c { background: var(--ui-greenbg); border-color: var(--ui-green); overflow: hidden; }
.tl-row .w1 { flex: 1; } .tl-row .w2 { flex: 2.2; } .tl-row .w3 { flex: 3; } .tl-row .w4 { flex: 3.6; }
.tl-row .gap { background: var(--ui-hatch); border: 2px solid #E8A7A0; }
.tl-row .back { position: absolute; inset: -2px; border-radius: 6px; background: var(--ui-amberbg); border: 3px solid var(--ui-amber); animation: tlBack 6s ease-in-out infinite; transform-origin: center; }
.tl-row.a .back { background: #EAE3C8; overflow: hidden; }
.tl-row span { display: flex; align-items: center; gap: 2px; height: 100%; padding: 0 4px; }
.tl-row span i { flex: none; width: 2px; background: var(--ui-green); border-radius: 1px; }
.ui .h1 { height: 20%; } .ui .h2 { height: 30%; } .ui .h3 { height: 42%; } .ui .h4 { height: 54%; } .ui .h5 { height: 66%; } .ui .h6 { height: 78%; } .ui .h7 { height: 92%; }
.tl-ph { position: absolute; top: 34px; bottom: 10px; left: 52%; width: 2px; background: var(--ui-p); border-radius: 1px; animation: tlPh 6s linear infinite; }
@keyframes tlBack { 0%, 18% { opacity: 0; transform: scale(.88); } 28%, 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.88); } }
@keyframes tlA { 0%, 24% { opacity: 1; } 28%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tlB { 0%, 24% { opacity: 0; } 28%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tlPh { from { left: 4%; } to { left: 96%; } }

/* frame */
.fr .ui-in { display: grid; justify-items: center; gap: 16px; }
.fr-stage { height: 204px; display: grid; place-items: center; }
.fr-box { width: 112px; height: 198px; background: #fff; border: 1px solid #E4DFD8; border-radius: 14px; box-shadow: var(--shadow-m); padding: 8px; animation: frMorph 6s ease-in-out infinite; }
.fr-in { width: 100%; height: 100%; border-radius: 8px; background: var(--ui-lav); display: grid; place-items: center; }
.fr-in svg { width: 26px; height: 26px; fill: var(--ui-p); }
.fr-tags { position: relative; height: 26px; width: 210px; }
.fr-tags span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; font: 500 11.5px/26px var(--mono); padding: 0 12px; height: 26px; border-radius: 999px; }
.fr-tags .ra { background: #fff; border: 1px solid #E4DFD8; color: var(--ink-2); opacity: 0; animation: frA 6s ease-in-out infinite; }
.fr-tags .rb { background: var(--ui-p); color: #fff; animation: frB 6s ease-in-out infinite; }
@keyframes frMorph { 0%, 20% { width: 252px; height: 142px; } 42%, 86% { width: 112px; height: 198px; } 100% { width: 252px; height: 142px; } }
@keyframes frA { 0%, 28% { opacity: 1; } 38%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes frB { 0%, 28% { opacity: 0; } 38%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* titles + description */
.pub .ui-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; align-items: start; }
.pt ol { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; counter-reset: t; }
.pt li { counter-increment: t; font-size: 12px; line-height: 1.3; color: var(--ink); display: grid; grid-template-columns: 14px 1fr; gap: 6px; animation: pubIn 8s ease-in-out infinite; }
.pt li::before { content: counter(t); font: 500 10px/1.5 var(--mono); color: var(--ui-p); }
.pt .p2 { animation-delay: .35s; } .pt .p3 { animation-delay: .7s; }
.pd .hd { display: flex; justify-content: space-between; align-items: center; }
.pd .md { font: 500 10px/1 var(--mono); background: var(--ui-p); color: #fff; border-radius: 6px; padding: 4px 7px; }
.pd p { margin: 10px 0 0; font-size: 12px; line-height: 1.38; color: var(--ink-2); animation: pubIn 8s ease-in-out infinite; }
.pd .d1 { animation-delay: 1.5s; } .pd .d2 { animation-delay: 2s; }
.pd .d2 i { display: block; height: 6px; border-radius: 3px; background: rgba(32, 28, 25, .12); margin-top: 7px; } .pd .d2 i.s { width: 60%; }
@keyframes pubIn { 0% { opacity: 0; transform: translateY(8px); } 9%, 86% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

/* review desk */
.rev .ui-in { display: grid; gap: 8px; }
.rc { background: var(--ui-lav); border: 2px solid var(--ui-lavb); border-radius: 14px; padding: 9px 12px; display: grid; gap: 7px; }
.rc .row { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.rc .tm { font: 500 11px/1 var(--mono); color: var(--ui-p); }
.rc .nm { flex: 1; color: var(--ink); }
.rc em { font-style: normal; color: #8A8178; font-size: 11px; }
.rc .btns { display: flex; gap: 6px; align-items: center; }
.rc .ok { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--ui-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.rc.c1 { opacity: .55; animation: revDim 8s ease-in-out infinite; }
.rc.c1 .rej { background: var(--ink); color: #fff; border-color: var(--ink); animation: revRej 8s ease-in-out infinite; }
.rc.c1 .ok { display: none; }
.rc.c2 .ok, .rc.c3 .ok { animation: revOk 8s ease-in-out infinite; }
.rbar { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.rbar .b { padding: 8px 14px; font-size: 12px; border-radius: 10px; }
.rbar .prim { background: var(--ui-p); color: #fff; border-color: var(--ui-p); animation: revPulse 8s ease-in-out infinite; }
@keyframes revRej { 0%, 18% { background: #fff; color: var(--ink); border-color: #D9D3CB; } 24%, 92% { background: var(--ink); color: #fff; border-color: var(--ink); } 98%, 100% { background: #fff; color: var(--ink); border-color: #D9D3CB; } }
@keyframes revDim { 0%, 18% { opacity: 1; } 26%, 92% { opacity: .55; } 98%, 100% { opacity: 1; } }
@keyframes revPulse { 0%, 54% { transform: scale(1); box-shadow: none; } 60% { transform: scale(1.07); box-shadow: 0 8px 22px rgba(124, 78, 240, .4); } 68%, 100% { transform: scale(1); box-shadow: none; } }
@keyframes revOk { 0%, 62% { opacity: 0; transform: scale(.4); } 70%, 92% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }

/* source restore (transcript) */
.src .w { color: var(--ink); animation: srcSel 7s ease-in-out infinite; }
.src .w::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 2px; background: var(--ui-p); transform-origin: left center; transform: scaleX(0); animation: srcStrike 7s ease-in-out infinite; }
.src .menu { animation-name: uiMenu; }
@keyframes srcSel { 0%, 10% { background: transparent; color: #8A8178; } 16%, 56% { background: rgba(124, 78, 240, .2); color: var(--ink); } 64%, 92% { background: transparent; color: var(--ink); } 98%, 100% { background: transparent; color: #8A8178; } }
@keyframes srcStrike { 0%, 56% { transform: scaleX(1); } 64%, 92% { transform: scaleX(0); } 98%, 100% { transform: scaleX(1); } }
@keyframes uiMenu { 0%, 24% { opacity: 0; transform: translateY(6px) scale(.97); } 32%, 56% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateY(2px) scale(.98); } }
@keyframes uiChip { 0%, 62% { opacity: 0; transform: scale(.9); } 68%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* undo / redo */
.ur .ui-in { display: grid; gap: 12px; }
.ur-top { display: flex; align-items: center; gap: 10px; }
.ur .ic { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid #E4DFD8; display: grid; place-items: center; box-shadow: var(--shadow-s); }
.ur .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ur .undo { animation: urUndo 8s ease-in-out infinite; } .ur .redo { animation: urRedo 8s ease-in-out infinite; }
.ur .len { margin-left: auto; position: relative; width: 92px; height: 38px; font: 500 22px/38px var(--mono); text-align: right; color: var(--ink); }
.ur .len span { position: absolute; inset: 0; }
.ur .la { animation: urA 8s ease-in-out infinite; } .ur .lb { opacity: 0; animation: urB 8s ease-in-out infinite; }
.ur-bar { height: 12px; border-radius: 6px; background: #fff; border: 1px solid #E4DFD8; overflow: hidden; }
.ur-bar .fill { display: block; height: 100%; width: 56%; background: var(--ui-p); border-radius: 6px; animation: urFill 8s ease-in-out infinite; }
.ur .hist b { font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 4px; }
.ur .hist p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
@keyframes urUndo { 0%, 32% { transform: scale(1); background: #fff; } 36% { transform: scale(1.18); background: var(--ui-lav); } 42%, 100% { transform: scale(1); background: #fff; } }
@keyframes urRedo { 0%, 70% { transform: scale(1); background: #fff; } 74% { transform: scale(1.18); background: var(--ui-lav); } 80%, 100% { transform: scale(1); background: #fff; } }
@keyframes urA { 0%, 34% { opacity: 1; } 40%, 74% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes urB { 0%, 34% { opacity: 0; } 40%, 74% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes urFill { 0%, 34% { width: 56%; } 42%, 74% { width: 100%; } 82%, 100% { width: 56%; } }

/* manual: select, Remove from edit */
.mn .w { overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; opacity: 0; animation: mnRm 7s ease-in-out infinite; }
@keyframes mnRm { 0%, 12% { max-width: 80px; opacity: 1; background: transparent; } 20%, 54% { max-width: 80px; opacity: 1; background: rgba(124, 78, 240, .22); } 62%, 92% { max-width: 0; opacity: 0; background: transparent; } 98%, 100% { max-width: 80px; opacity: 1; background: transparent; } }

@media (prefers-reduced-motion: reduce) { .ui *, .ui *::before, .ui *::after { animation: none !important; } .ui .menu { opacity: 0; } }
@media (max-width: 560px) { .pub .ui-in { grid-template-columns: minmax(0, 1fr); } .ui-stage { aspect-ratio: auto; min-height: 260px; } .tile .ui-stage { margin-inline: -22px; } }

/* =====================================================================================
   v8: white-to-Aurora hero, badge icons in the headline, agent wall with progressive blur,
   proof card, and a more polished set of recreated components
   ===================================================================================== */
/* hero panel: clear/white at the top, fading into the Aurora colours at the bottom */
.hero-panel { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 14%, #FBF8FF 36%, #F3EBFF 60%, #F8E4F0 80%, #FFE7D5 100%); border: 1px solid rgba(124, 78, 240, .07); }
.hero-panel .aurora .a4 { display: none; }
.hero-panel .aurora .a1 { top: 54%; height: 56%; }
.hero-panel .aurora .a2 { top: 60%; height: 52%; }
.hero-panel .aurora .a3 { top: 50%; height: 52%; }
.hero-panel .aurora i { opacity: .72; }

/* headline icons sit in their brand-coloured badges */
.swap-item .bd { display: inline-grid; place-items: center; width: .92em; height: .92em; border-radius: .26em; flex: none; transform: translateY(.1em); }
.swap-item .bd img { width: 58%; height: 58%; transform: none; border-radius: 0; }
.bd-claude { background: #D97757; }
.bd-codex { background: linear-gradient(160deg, #B1A7FF 0%, #7A9DFF 52%, #3941FF 100%); }
.bd-cursor { background: #14120B; }
.bd-gemini { background: #fff; box-shadow: 0 0 0 1px #E4DFD8, 0 3px 8px rgba(32, 28, 25, .08); }

/* agent wall: 8 per row, last rows dissolve into the page */
.agent-wall { position: relative; max-width: 900px; margin: 48px auto 0; }
.wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 36px 12px; justify-items: center; }
.wall img { width: 56px; height: 56px; object-fit: contain; transition: transform .35s var(--ease); }
.wall li:hover img { transform: translateY(-4px) rotate(-3deg); }
.wall-fade { position: absolute; left: -8%; right: -8%; bottom: -10px; height: 62%; pointer-events: none; background: linear-gradient(to bottom, rgba(251, 250, 249, 0) 0%, rgba(251, 250, 249, .55) 55%, #FBFAF9 100%); }
.wall-fade::before, .wall-fade::after { content: ""; position: absolute; inset: 0; }
.wall-fade::before { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 60%); mask-image: linear-gradient(to bottom, transparent 20%, #000 60%); }
.wall-fade::after { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to bottom, transparent 48%, #000 88%); mask-image: linear-gradient(to bottom, transparent 48%, #000 88%); }
@media (max-width: 960px) { .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 10px; } }
@media (max-width: 560px) { .wall { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 6px; } .wall img { width: 44px; height: 44px; } .wall li:nth-child(n+21) { display: none; } }

/* proof card */
.proof { padding: 40px 0 0; text-align: left; }
.pc { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; background: var(--card); border-radius: 30px; padding: clamp(24px, 3.4vw, 44px); }
.pc h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; }
.pc-copy p { margin: 8px 0 0; color: var(--muted); }
.pc-stats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 22px; justify-content: start; }
.pc-stats b { display: block; font: 500 28px/1 var(--sans); letter-spacing: -.04em; }
.pc-stats span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); max-width: 112px; margin-top: 7px; }
.pc-vis { max-width: none; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 20px 16px; box-shadow: var(--shadow-m); display: grid; gap: 14px; }
.pc-row { display: grid; grid-template-columns: 112px 1fr 38px; gap: 10px; align-items: center; font-size: 12px; }
.pc-row .pl { color: var(--ink-2); }
.pc-row em { font: 500 12px/1 var(--mono); font-style: normal; text-align: right; }
.pc-track { height: 24px; border-radius: 8px; background: #F4F1EC; overflow: hidden; display: flex; }
.pc-track i { display: block; height: 100%; box-sizing: border-box; background: #EEE9FF; border: 2px solid var(--ui-p); border-radius: 8px; }
.pc-track .whole { width: 100%; }
.pc-track .kept { width: 56%; animation: pcKeep 7s ease-in-out infinite; }
.pc-track .cut { flex: 1; background: var(--ui-hatch); border: 2px solid #E8A7A0; border-left: 0; border-radius: 0 8px 8px 0; animation: pcCut 7s ease-in-out infinite; }
.pc-legend { margin: 2px 0 0; font: 400 11px/1 var(--mono); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.pc-legend i:first-child { margin-left: 0; }
.pc-legend .k { background: #EEE9FF; border: 2px solid var(--ui-p); } .pc-legend .r { background: var(--ui-hatch); border: 2px solid #E8A7A0; }
@keyframes pcKeep { 0%, 14% { width: 100%; } 38%, 88% { width: 56%; } 98%, 100% { width: 100%; } }
@keyframes pcCut { 0%, 14% { opacity: 0; } 38%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } }
@media (max-width: 860px) { .pc { grid-template-columns: minmax(0, 1fr); } .pc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- component polish */
.ui { max-width: 480px; }
.ui-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #EFEBE5; background: linear-gradient(#FFFFFF, #FBFAF9); font-size: 12px; }
.ui-bar .dots { display: flex; gap: 5px; } .ui-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #E4DFD8; }
.ui-bar b { font-weight: 600; font-size: 12px; }
.ui-bar .sum { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--ui-p); background: var(--ui-lav); padding: 5px 9px; border-radius: 999px; }
.ut { display: inline-flex; gap: 2px; background: #F4F1EC; border-radius: 9px; padding: 2px; font-size: 11px; }
.ut i { font-style: normal; padding: 4px 11px; border-radius: 7px; color: #8A8178; } .ut i.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.rev .ui-bar { background: none; border: 0; padding: 0 2px 6px; }
.src .ui-in, .mn .ui-in { padding: 0; overflow: hidden; min-height: 200px; border-radius: 16px; box-shadow: var(--shadow-m); }
.src .ln, .mn .ln { padding: 16px 18px 70px; font-size: 14.5px; line-height: 2.1; }
.ui .menu { right: 16px; bottom: 16px; padding: 7px; border-radius: 13px; min-width: 190px; font-size: 12.5px; }
.ui .chipw { left: 18px; bottom: 18px; }
.rc { box-shadow: 0 6px 18px rgba(124, 78, 240, .08); } .rbar .prim { box-shadow: 0 6px 16px rgba(124, 78, 240, .25); }
.ur .ui-in { gap: 14px; } .ur .ic { width: 42px; height: 42px; } .ur-bar { height: 14px; border-radius: 7px; } .ur .hist { padding: 14px 16px; }
.ur .len { font-size: 26px; width: 110px; }

/* timeline v2 */
.tl .ui-in { padding: 0; overflow: hidden; border-radius: 16px; box-shadow: var(--shadow-m); }
.tl-time { position: relative; top: auto; right: auto; margin-left: auto; width: 64px; height: 24px; font: 500 12px/24px var(--mono); }
.tl-grid { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 12px 14px 16px 12px; }
.tl-gut { display: grid; grid-template-rows: 16px 38px 14px 38px; gap: 7px; font: 500 9px/1 var(--mono); color: #A39C93; }
.tl-gut .g { display: grid; align-content: center; letter-spacing: .04em; } .tl-gut .g.wd { color: var(--ui-p); }
.tl-main { position: relative; }
.tl-ruler { display: flex; justify-content: space-between; height: 16px; border: 0; padding: 0 2px; font: 400 9px/16px var(--mono); color: #A39C93; }
.tl-ruler span { position: relative; z-index: 0; }
.tl-row { margin-top: 7px; }
.tl-row.v, .tl-row.a { height: 38px; }
.tl-row.wd { height: 14px; gap: 3px; } .tl-row.wd i { flex: 1; border-radius: 4px; background: #EEEBE6; } .tl-row.wd i:nth-child(3n) { background: #E8E3F5; }
.tl-ph { top: 0; bottom: 0; }
.tl-ph em { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); background: var(--ui-p); color: #fff; font: 500 9px/15px var(--mono); font-style: normal; padding: 0 6px; border-radius: 5px; white-space: nowrap; }
.tl-tag { position: absolute; left: 54%; top: 2px; transform: translateX(-50%); z-index: 3; background: var(--ui-amber); color: #3B2A00; font: 600 9.5px/1 var(--sans); padding: 4px 8px; border-radius: 999px; box-shadow: 0 4px 10px rgba(245, 183, 48, .4); animation: tlTag 6s ease-in-out infinite; }
@keyframes tlTag { 0%, 20% { opacity: 0; transform: translate(-50%, 6px); } 32%, 86% { opacity: 1; transform: translate(-50%, 0); } 94%, 100% { opacity: 0; transform: translate(-50%, 6px); } }

/* titles + description: two equal cards, export as Markdown */
.pub .ui-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.pub .ui-card { display: flex; flex-direction: column; min-height: 204px; padding: 14px 16px; border-radius: 16px; box-shadow: var(--shadow-m); }
.pub .hd { display: flex; justify-content: space-between; align-items: center; }
.pub .cnt { font: 500 10px/1 var(--mono); color: var(--muted); }
.pub .pt ol { margin-top: 14px; gap: 11px; }
.pub .pt li { font-size: 12.5px; }
.pub .pd p { margin-top: 12px; font-size: 12.5px; }
.pub .dl { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl-btn { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--sans); background: var(--ui-p); color: #fff; border-radius: 9px; padding: 7px 11px; box-shadow: 0 6px 14px rgba(124, 78, 240, .3); animation: pubIn 8s ease-in-out infinite; animation-delay: 3.1s; }
.dl-btn svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: dlBob 1.6s ease-in-out infinite; }
.pub .dl code { font: 500 10px/1 var(--mono); background: var(--ui-lav); color: var(--ui-p); padding: 5px 7px; border-radius: 6px; animation: pubIn 8s ease-in-out infinite; animation-delay: 3.4s; }
@keyframes dlBob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@media (max-width: 560px) { .pub .ui-in { grid-template-columns: minmax(0, 1fr); } }

/* ===== v9: headline badges aligned on the text line; subscription diagram ===== */
.swap-item { align-items: baseline; gap: .32em; }
.swap-item .bd { display: block; position: relative; width: .8em; height: .8em; border-radius: .24em; margin-left: .06em; transform: translateY(.03em); }
.swap-item .bd img { position: absolute; inset: 0; margin: auto; width: 56%; height: 56%; transform: none; border-radius: 0; }

.plans { max-width: 900px; margin: 44px auto 0; }
.plans .ui-in { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, .78fr); grid-template-rows: auto auto; gap: 16px 0; align-items: center; }
.pl-card, .pl-h, .pl-app { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-s); padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.pl-card b, .pl-h b, .pl-app b { font-weight: 500; display: block; }
.pl-card small, .pl-app small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.pl-h { font-size: 20px; }
.pl-h .bd { display: block; position: relative; width: 28px; height: 28px; border-radius: 8px; flex: none; }
.pl-h .bd img { position: absolute; inset: 0; margin: auto; width: 58%; height: 58%; }
.pl-h b { font-size: 15px; }
.pl-app { grid-column: 5; grid-row: 1 / 3; flex-direction: column; justify-content: center; text-align: center; padding: 26px 16px; gap: 6px; }
.pl-app img { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 6px; }
.cn { display: block; height: 2px; background: #E4DFD8; position: relative; overflow: hidden; border-radius: 1px; }
.cn::after { content: ""; position: absolute; top: 0; left: -34%; width: 34%; height: 100%; background: var(--flame); border-radius: 1px; animation: cnFlow 2.4s linear infinite; }
.cn.c3::after, .cn.c4::after { animation-delay: .5s; }
@keyframes cnFlow { to { left: 100%; } }
.pl-card:nth-of-type(1), .cn.c1, .pl-h:nth-of-type(1), .cn.c2 { grid-row: 1; }
.plans-note { text-align: center; max-width: 640px; margin: 22px auto 0; font: 400 11.5px/1.55 var(--mono); color: var(--muted); }
@media (max-width: 760px) { .plans .ui-in { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pl-app { grid-column: 1; grid-row: auto; order: 9; flex-direction: row; text-align: left; padding: 14px 16px; } .pl-app img { width: 44px; height: 44px; margin: 0; } .cn { display: none; } }
@media (prefers-reduced-motion: reduce) { .cn::after { animation: none; left: 0; width: 100%; opacity: .35; } }

/* explicit placement for the subscription diagram */
.plans .k1 { grid-area: 1 / 1; } .plans .c1 { grid-area: 1 / 2; } .plans .hz1 { grid-area: 1 / 3; } .plans .c2 { grid-area: 1 / 4; }
.plans .k2 { grid-area: 2 / 1; } .plans .c3 { grid-area: 2 / 2; } .plans .hz2 { grid-area: 2 / 3; } .plans .c4 { grid-area: 2 / 4; }
.plans .pl-app { grid-area: 1 / 5 / 3 / 6; }
.pl-h b { white-space: nowrap; }
@media (max-width: 760px) {
  .plans .ui-in > * { grid-area: auto; min-width: 0; }
  .plans .k1 { order: 1; } .plans .hz1 { order: 2; } .plans .k2 { order: 3; } .plans .hz2 { order: 4; } .plans .pl-app { order: 5; margin-top: 4px; }
  .plans .ui-in { overflow: hidden; }
}
.wall-fade { left: -5%; right: -5%; }
@media (max-width: 560px) { .wall-fade { left: -3%; right: -3%; } }
/* v10: tighter headline spacing (badge <-> name, "What if" <-> badge) */
.swap-item { gap: .16em; }
.swap-item .bd { margin-left: -.03em; }

/* ===== v11: time / control card, titles grouped ===== */
.timecard { max-width: none; background: var(--card); border-radius: 30px; padding: clamp(22px, 3.2vw, 40px); }
.tm-in { display: grid; gap: 26px; }
.tm-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.tm-big b { display: block; font: 500 clamp(52px, 6vw, 84px)/.95 var(--sans); letter-spacing: -.05em; }
.tm-big span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); max-width: 190px; line-height: 1.35; }
.tm-adv { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tm-adv li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-s); }
.tm-adv li b { font-weight: 500; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.tm-adv li b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--flame); flex: none; }
.tm-adv li span { font-size: 13.5px; color: var(--muted); }
.tm-rows { display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow-m); }
.tm-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 40px; gap: 12px; align-items: center; font-size: 13px; }
.tm-row .who { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 500; }
.tm-row .who img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.tm-row em { font: 500 12.5px/1 var(--mono); font-style: normal; text-align: right; }
.tm-track { height: 36px; border-radius: 10px; background: #F4F1EC; display: flex; gap: 2px; overflow: hidden; }
.tm-track i { display: block; height: 100%; position: relative; transform-origin: left center; animation: tmGrow 7s ease-in-out infinite; }
.tm-track i u { position: absolute; inset: 0; display: grid; align-items: center; padding-left: 12px; text-decoration: none; font: 500 11px/1 var(--mono); white-space: nowrap; overflow: hidden; }
.tm-track .s1 { flex: 53; background: var(--ui-p); color: #fff; border-radius: 10px 0 0 10px; }
.tm-track .s2 { flex: 35; background: var(--ui-lav); color: var(--ui-p); animation-delay: .25s; border: 2px solid var(--ui-lavb); border-left: 0; box-sizing: border-box; }
.tm-track .s3 { flex: 0 0 7px; background: var(--flame); border-radius: 0 10px 10px 0; animation-delay: .5s; }
.tm-track.empty { background: transparent; border: 2px dashed #D9D3CB; align-items: center; justify-content: center; }
.tm-track.empty span { font: 400 11.5px/1 var(--mono); color: var(--muted); }
.tm-row.chat .who, .tm-row.chat em { opacity: .75; }
.tm-note { max-width: 760px; margin: 22px auto 0; text-align: center; font: 400 11.5px/1.6 var(--mono); color: var(--muted); }
@keyframes tmGrow { 0% { transform: scaleX(0); opacity: .2; } 22%, 90% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 860px) { .tm-head { grid-template-columns: minmax(0, 1fr); } .tm-adv li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .tm-row { grid-template-columns: minmax(0, 1fr) 36px; } .tm-row .who { grid-column: 1 / 3; } }
@media (prefers-reduced-motion: reduce) { .tm-track i { animation: none; } }

.pub .pt .grp { display: block; margin-top: 12px; font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pub .pt .grp.ev { margin-top: 14px; color: var(--ui-p); }
.pub .pt ol { margin-top: 8px; gap: 8px; }
.pub .pt .p4 { animation-delay: 1.05s; }
.pub .pt li { font-size: 12px; }

/* ===== v12: four-agent wall with a receding, progressively blurred reflection ===== */
.agent-wall.four { max-width: 560px; margin: 44px auto 0; }
.agent-wall.four .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 20px; }
.agent-wall.four .wall img { width: 68px; height: 68px; }
.agent-wall.four .wall-fade { height: 78%; left: -8%; right: -8%; }
.agent-wall.four .wall li:nth-child(n+9) { opacity: .75; }
@media (max-width: 560px) { .agent-wall.four .wall { gap: 26px 10px; } .agent-wall.four .wall img { width: 54px; height: 54px; } .agent-wall.four .wall-fade { left: -3%; right: -3%; } .wall li:nth-child(n+21) { display: grid; } }

/* v13: two rows only: the sharp row and one blurred reflection */
.agent-wall.four .wall li:nth-child(n+9) { display: none; }
.agent-wall.four .wall li:nth-child(n+5) { opacity: 1; }
.agent-wall.four .wall-fade { height: 62%; bottom: -12px; }
.agent-wall.four .wall-fade::before { -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 42%); mask-image: linear-gradient(to bottom, transparent 8%, #000 42%); }
.agent-wall.four .wall-fade::after { -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 70%); mask-image: linear-gradient(to bottom, transparent 20%, #000 70%); }

/* ===== collapsible FAQ, still an editor conversation ===== */
.faq .chat { gap: 10px; }
.qa summary { list-style: none; cursor: pointer; display: block; }
.qa summary::-webkit-details-marker { display: none; }
.qa .row.user { display: flex; justify-content: flex-end; }
.qa .bubble.user { display: inline-flex; align-items: center; gap: 10px; padding-right: 12px; margin-left: auto; transition: transform .25s var(--ease), box-shadow .25s; }
.qa summary:hover .bubble.user { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(139, 92, 246, .28); }
.qa summary:focus-visible { outline: none; }
.qa summary:focus-visible .bubble.user { outline: 2px solid var(--ink); outline-offset: 3px; }
.qa .chev { position: relative; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .24); flex: none; }
.qa .chev::before { content: ""; position: absolute; left: 5.5px; top: 4px; width: 5px; height: 5px; border-right: 1.7px solid #fff; border-bottom: 1.7px solid #fff; transform: rotate(45deg); transition: transform .3s var(--ease), top .3s var(--ease); }
.qa[open] .chev::before { transform: rotate(-135deg); top: 6.5px; }
.qa .ans { padding-top: 10px; animation: qaIn .4s var(--ease); }
@keyframes qaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qa .ans { animation: none; } }

/* ===== v16: one consistent vertical rhythm ===== */
.section { padding: clamp(52px, 5.6vw, 80px) 0; }
.section.tight { padding-block: clamp(36px, 4.2vw, 60px); }
.hero { padding-bottom: 0; }
.hero-end { height: 0; }
.hero .made { margin-top: 18px; }
.closing { padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 7vw, 100px); }
.group { padding-top: var(--feature-gap); }
.feat { padding-top: var(--feature-gap); }
.step-sec { padding: clamp(40px, 5vw, 72px) 0; }
.page-head + .step-sec { margin-top: 32px; }
.loops { margin-top: 56px; }
@media (max-width: 760px) { .section { padding: 48px 0; } .section.tight { padding-block: 34px; } .loops { margin-top: 40px; } }
@media (max-width: 960px) { .guide-nav { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; } .guide-nav a { background: var(--card); } }

/* ===== founder: name, aka and social links ===== */
.founder .who span.aka { display: block; margin-top: 2px; font: 400 11.5px/1.4 var(--mono); color: var(--faint); }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.soc { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-s); transition: transform .2s var(--ease), border-color .2s; }
.soc:hover { transform: translateY(-1px); border-color: var(--line-2); }
.soc img { flex: none; }
.why-sign { margin-top: 48px; text-align: left; }
.why-sign .who { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.3; }
.why-sign .who b { display: block; font-weight: 600; } .why-sign .who span { color: var(--muted); }

/* v20: Moonjar's measured hero framing (2026-10-05).
   The hero follows the in-flow nav: 12px gutters, 1680px outer cap.
   Keep the existing film uncropped inside the reference's 1120 x 587 media area. */
.hero { max-width: 1680px; margin-inline: auto; padding: 12px 12px 0; }
.hero-panel { width: 100%; border: 0; border-radius: 28px; box-shadow: none; }
.hero-inner { container-type: inline-size; padding: 44px 24px 72px; }
.hero h1 {
  max-width: 992px;
  font-size: clamp(20px, min(calc(100cqi / 12.3), calc(36px + 1.2vw)), 52px);
  line-height: 1.02;
  min-height: calc(3 * 1.02em);
}
.hero-panel .lede { max-width: 560px; font-size: 18px; line-height: 1.55; margin-top: 24px; }
.hero-panel .cta-row { margin-top: 36px; gap: 20px; }
.hero-panel .cta-row .btn { min-height: 48px; }
.hero-panel .stage { width: min(1120px, 100%); margin-top: 52px; }
.hero-panel .stage .app-win { width: 80.22%; }
body:has(.hero) .nav-in { max-width: 1608px; }
@media (min-width: 810px) and (max-width: 1439.98px) {
  .hero-inner { padding-top: 40px; padding-bottom: 52px; }
  .hero-panel .stage { margin-top: 48px; }
}
@media (max-width: 809.98px) {
  .hero { padding: 8px 8px 0; }
  .hero-panel { width: 100%; border-radius: 22px; }
  .hero-inner { padding: 32px 12px 28px; }
  .hero h1 { width: calc(100% - 16px); min-height: calc(3 * 1.02em); }
  .hero h1 .brk { display: none; }
  .hero-panel .lede { padding-inline: 8px; font-size: 16px; }
  .hero-panel .cta-row { flex-direction: column; gap: 16px; margin-top: 28px; padding-inline: 8px; }
  .hero-panel .cta-row .btn { min-height: 52px; }
  .hero-panel .stage { margin-top: 32px; }
}

/* v18: hero video has no pause button; a click on it still pauses / resumes */
.vid-nobtn video { cursor: pointer; }

/* v19: contact line (email + social profiles) on the early-access page and the confirmation page */
.contact { margin-top: 30px; text-align: center; }
.contact-line { margin: 0 0 12px; font-size: 15px; color: var(--muted, #77746E); }
.contact-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.contact .socials { justify-content: center; margin-top: 0; }
.center-text { text-align: center; }
.center-text form { margin-top: 22px; }
.center-text .contact { margin-bottom: 26px; }

/* Paired product demos: feature loops in the hero, editor workflow after agents. */
.hero-panel .stage .feature-demo-window { width: 100%; aspect-ratio: 1920 / 1006; }
.product-demo video { aspect-ratio: 1920 / 1006; object-fit: contain; pointer-events: none; }
.demo-actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 18px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.demo-actions a, .demo-playback { color: inherit; text-underline-offset: 4px; }
.demo-playback { font: inherit; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 0; background: none; cursor: pointer; }
.demo-playback:focus-visible { outline: 2px solid var(--violet); outline-offset: 5px; }
.editor-motion-section { scroll-margin-top: 100px; padding-top: clamp(24px, 3vw, 44px); }
.editor-motion-section .wrap { max-width: 1264px; }
.editor-motion-section .sec-head { max-width: 800px; margin-inline: auto; }
.editor-motion-stage { margin-top: 38px; border-radius: 20px; overflow: hidden; background: #f3efeb; box-shadow: 0 18px 56px #49327114; }
.editor-motion-stage .vid { margin: 0; }
.editor-motion-stage video { width: 100%; display: block; }
@media (max-width: 700px) { .demo-actions { gap: 12px; font-size: 11px; flex-wrap: wrap; } .editor-motion-stage { margin-top: 26px; border-radius: 10px; } }

/* Crisp, responsive before/after editor excerpt; same visual language as Option B. */
.filler-comparison { min-width:0; background:#fff; border:1px solid #e5e1dc; border-radius:14px; overflow:hidden; box-shadow:0 5px 18px #201c1908; scroll-margin-top:110px; }
.fc-chrome { display:flex; align-items:center; gap:10px; padding:11px 13px; background:#f7f5f2; border-bottom:1px solid #eae7e2; font-size:11px; }
.fc-chrome>b { font-weight:600; } .fc-chrome>span:last-child { margin-left:auto; color:#71695f; font-size:10px; }
.fc-dots { display:flex; gap:4px; } .fc-dots i { width:7px; height:7px; border-radius:50%; background:#ec8275; } .fc-dots i:nth-child(2){background:#e8c465}.fc-dots i:nth-child(3){background:#85b981}
.fc-captions { display:flex; justify-content:space-between; padding:11px 15px 8px; font-size:11px; font-weight:600; color:#665c52; }.fc-captions span:last-child{color:#6335c5}
.ba.fc-compare { aspect-ratio:auto; height:327px; border-radius:0; box-shadow:none; overflow:hidden; }
.fc-layer { position:absolute; inset:0; padding:0 15px; background:white; }
.fc-state { display:flex; justify-content:space-between; align-items:center; height:30px; font-size:11px; border-bottom:1px solid #eeebe6; }.fc-state b{font-weight:500}.fc-state>span{font-variant-numeric:tabular-nums;color:#756d64}
.fc-transcript { height:126px; padding-top:12px; margin:0; font-size:14px; line-height:1.6; letter-spacing:-.15px; }
.fc-filler { color:#713ac9; background:#ece3ff; border-radius:2px; }
.fc-result { height:30px; font-size:10px; color:#705a8e; display:flex; align-items:center; }.after .fc-result{color:#27704f}
.fc-timeline { display:grid; grid-template-columns:34px minmax(0,1fr); gap:5px; padding:8px 0; border-top:1px solid #eeeae4; }
.fc-labels,.fc-tracks { display:grid; grid-template-rows:17px 34px 21px 24px; gap:3px; min-width:0; }
.fc-labels {font-size:9px;color:#756d64;align-items:center}.fc-ruler{display:flex;justify-content:space-between;font-size:9px;color:#837b72;font-variant-numeric:tabular-nums}
.fc-video,.fc-words,.fc-audio{position:relative;overflow:hidden;background:#f5f3f0;border-radius:3px}
.fc-segment {position:absolute;top:0;bottom:0;border-right:1px solid #bda8e3;overflow:hidden;}
.fc-video .fc-segment{background:#e6dcf4 url('/media/v2/chapter-presenter.svg') repeat-x center;background-size:auto 34px;box-shadow:inset 0 -3px #9c79cf}
.fc-video .fc-remove{background-color:#dbcbf5;box-shadow:inset 0 0 0 2px #8759ca;opacity:.55}
.fc-words span {position:absolute;top:3px;bottom:3px;white-space:nowrap;overflow:hidden;font-size:8px;color:#655473;border-left:1px solid #d9cfdf}
.fc-audio .fc-segment{background:#eaf3ee;border-color:#b3d3c3}.fc-audio svg{height:100%;width:100%;stroke:#589678;stroke-width:1;fill:none}
.fc-note { font-size:10px;color:#756d64;padding-top:3px; }
.fc-help { margin:0; border-top:1px solid #eeeae4; padding:9px 14px; font-size:10px; color:#71695f; text-align:center; }.fc-help>span[aria-hidden]{margin-left:6px;color:#7546c8}
.fc-compare .bar {left:clamp(21px,var(--pos),calc(100% - 21px));background:#936dce;box-shadow:0 0 0 1px #ffffffa0}.fc-compare .bar::after{width:34px;height:34px;border:1px solid #bfa8df;font-size:13px;color:#7546c8;top:56%}
.fc-compare:has(input:focus-visible){outline:2px solid #7546c8;outline-offset:-2px}
@media(max-width:420px){.fc-transcript{font-size:12px;height:136px}.ba.fc-compare{height:339px}.fc-chrome{gap:7px}.fc-chrome>span:last-child{font-size:9px}.fc-layer{padding-inline:11px}.fc-result{font-size:9px}}

/* Keep shared words aligned under the wipe so the split never repeats a word. */
.fc-transcript span { display:inline-block; }
.fc-transcript .fc-cut-hidden { visibility:hidden; }

/* Clean vector editor illustrations on What's possible. */
.possible-editor-art{display:block;width:100%;height:auto;max-width:100%;font-family:var(--sans, 'Instrument Sans'),sans-serif}
.gallery .shot{overflow:hidden;background:#F5F2EE}
.gallery:has(.possible-editor-art):not(.one){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.gallery:has(.possible-editor-art):not(.one){grid-template-columns:minmax(0,1fr)}}
.gallery .shot:has(.possible-editor-art){aspect-ratio:auto}

/* Keep the Early Access agent logos close to their walkthrough. */
.section.early-access-agents { padding-bottom: 0; }
.section.early-access-walkthrough { padding-top: 28px; }
.early-access-walkthrough .editor-motion-stage { margin-top: 0; }

/* Waitlist pages reuse the founder card, warm media tray, and shared buttons. */
.waitlist-status { padding: var(--page-top) 0 76px; }
.waitlist-panel { max-width: 820px; margin-inline: auto; background: var(--white); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-m); }
.waitlist-message { padding: 48px 48px 36px; text-align: center; }
.waitlist-message h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.waitlist-status-body { max-width: 520px; margin: 20px auto 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.waitlist-status-body p { margin: 0 0 24px; }
.waitlist-status-body p:last-child { margin-bottom: 0; }
.waitlist-status-body form { margin: 24px 0 0; }
.waitlist-status-body .btn { white-space: normal; line-height: 1.3; padding-block: 13px; }
.waitlist-status-body form + p { margin-top: 28px; font-size: 14px; }
.waitlist-next { max-width: 390px; margin: 20px auto 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.waitlist-editor { margin: 0 14px 14px; padding: 32px 48px; border-radius: 18px; background: var(--card); }
.waitlist-editor-frame { display: block; max-width: 620px; margin: auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-m); transition: transform .25s var(--ease); }
.waitlist-editor-frame:hover { transform: translateY(-2px); }
.waitlist-editor-frame img { width: 100%; height: auto; }
.waitlist-editor-frame .waitlist-still { display: none; }
.waitlist-home { display: table; margin: 26px auto 0; font-size: 13px; color: var(--muted); text-decoration: none; }
.waitlist-home:hover { color: var(--ink); }
.waitlist-status-compact { min-height: 0; padding-bottom: 44px; }
.waitlist-panel-compact { max-width: 650px; }
.waitlist-panel-compact .waitlist-message { padding: 48px; }
@media (max-width: 720px) {
  .waitlist-status { padding: var(--page-top) 0 50px; }
  .waitlist-status-compact { padding-bottom: 32px; }
  .waitlist-panel { border-radius: 24px; }
  .waitlist-message, .waitlist-panel-compact .waitlist-message { padding: 32px 24px; }
  .waitlist-editor { margin: 0 10px 10px; padding: 24px 14px; border-radius: 16px; }
  .waitlist-message h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .waitlist-editor-frame img:first-child { display: none; }
  .waitlist-editor-frame .waitlist-still { display: block; }
}

/* Why I built this: readable cards and usable controls on small screens. */
.why-page .why-sign { width: min(680px, 100%); }
.why-page .why-sign .who > div { min-width: 0; }
.why-page .why-sign .who > div > span { display: block; margin-top: 3px; }
.why-page .closing img.icon { border-radius: 50%; }
.why-page .demo-playback { min-height: 44px; padding: 8px 12px; border: 0; text-decoration: underline; }
@media (max-width: 700px) {
  .why-page .demo-actions { gap: 4px 12px; font-size: 12px; text-align: center; }
  .why-page .demo-actions > span { flex-basis: 100%; }
  .why-page .vp { min-width: 0; padding: 18px; }
  .why-page .vp .tag { line-height: 1.5; }
  .why-page .manual-list { padding: 10px; }
  .why-page .manual-list li span { flex-shrink: 0; }
}