/* Shared styles for the landing page and the pricing page. */
:root {
  --bg: #ffffff; --soft: #f6f6f3; --card: #ffffff; --text: #0f0f10; --muted: #64646a; --faint: #a3a3aa; --line: #e8e8e4;
  --accent: #0f0f10; --accent-text: #ffffff;
  --go: #16a34a; --go-soft: #dcfce7; --wait: #f59e0b; --wait-soft: #fef3c7;
  --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 64px -24px rgba(0,0,0,.22);
  --glow-a: rgba(34,197,94,.22); --glow-b: rgba(59,130,246,.18); --glow-c: rgba(245,158,11,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090b; --soft: #111114; --card: #151518; --text: #f4f4f5; --muted: #a1a1aa; --faint: #52525b; --line: #26262b;
    --accent: #f4f4f5; --accent-text: #09090b; --go-soft: rgba(34,197,94,.16); --wait-soft: rgba(245,158,11,.16);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 64px -24px rgba(0,0,0,.8);
    --glow-a: rgba(34,197,94,.20); --glow-b: rgba(59,130,246,.18); --glow-c: rgba(245,158,11,.10);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--text); color: var(--bg); font-weight: 800; font-size: 15px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 11px; font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); cursor: pointer; transition: transform .15s, box-shadow .2s; font-family: inherit; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgba(0,0,0,.45); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { background: var(--soft); box-shadow: none; }
.go-text { background: linear-gradient(90deg, #16a34a, #22c55e 40%, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Nav: a floating glass capsule. It tightens on scroll and shows reading progress in green. */
.nav { position: fixed; z-index: 40; top: 14px; left: 50%; transform: translateX(-50%); width: min(1080px, calc(100% - 24px)); }
.nav-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 10px 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 62%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -18px rgba(0,0,0,.35); overflow: hidden; transition: height .35s cubic-bezier(.22,1,.36,1), background .3s, box-shadow .3s; }
.nav.scrolled .nav-in { height: 52px; background: color-mix(in srgb, var(--bg) 84%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 40px -18px rgba(0,0,0,.45); }
.progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #16a34a, #22c55e 50%, #0ea5e9); opacity: .9; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; text-decoration: none; letter-spacing: -.02em; }
.brand .word b { font-weight: 800; background: linear-gradient(90deg, #16a34a, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #16a34a, #0ea5e9); box-shadow: 0 6px 16px -6px rgba(22,163,74,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.logo svg { width: 18px; height: 18px; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.brand:hover .logo svg { transform: rotate(-360deg); }
.links { position: relative; display: flex; align-items: center; gap: 2px; font-size: 14.5px; }
.links a.l { position: relative; z-index: 1; padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--muted); transition: color .2s; }
.links a.l:hover, .links a.l.on { color: var(--text); }
.pillx { position: absolute; z-index: 0; top: 50%; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); transform: translateY(-50%); opacity: 0; transition: left .35s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1), opacity .25s; pointer-events: none; }
.nav-cta { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--accent-text); background: var(--accent); isolation: isolate; transition: transform .2s; }
.nav-cta::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--a, 0deg), #16a34a, #22c55e, #0ea5e9, #16a34a); animation: spin 4s linear infinite; }
.nav-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent); }
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta span { transition: transform .2s; } .nav-cta:hover span { transform: translateX(3px); }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --a: 360deg; } }
/* Two items only, so they fit on a phone without a menu. */
/* Nav items never wrap. On small phones "Pricing" leaves the header (it is in the footer too), so "Sign in" and the button fit. */
.links a.l, .nav-cta { white-space: nowrap; }
@media (max-width: 420px) { .links a.l { padding: 8px 8px; } .links .nav-cta { margin-left: 4px; padding-left: 12px; padding-right: 12px; } }
@media (max-width: 400px) { .links a.l[href="/pricing"] { display: none; } }
/* How it works and Use cases show only when the bar has room. On small screens the footer has them. */
@media (max-width: 860px) { .links a.nav-wide { display: none; } }
@media (max-width: 760px) { .pillx { display: none; } .links a.l { padding: 8px 10px; } .links .nav-cta { padding-left: 14px; padding-right: 14px; } .nav-in { padding: 0 8px 0 12px; } }
section, header { scroll-margin-top: 90px; }
/* Grid children may shrink below their content width, so long lines never push the page wider than the phone. */
.play > *, .connect > *, .story > *, .stage-grid > *, .bento > *, .tabs > * { min-width: 0; }

/* Hero */
.hero { position: relative; padding: 112px 0 32px; text-align: center; }
.hero::before { content: ""; position: absolute; inset: -120px 0 auto; height: 900px; z-index: -1; pointer-events: none;
  background: radial-gradient(600px 320px at 20% 55%, var(--glow-a), transparent 70%), radial-gradient(560px 300px at 82% 45%, var(--glow-b), transparent 70%), radial-gradient(420px 240px at 55% 85%, var(--glow-c), transparent 70%); filter: blur(10px); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); margin-bottom: 18px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.pill .live { width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 2s infinite; }
h1 { font-size: clamp(44px, 6.2vw, 78px); line-height: .98; letter-spacing: -.045em; margin: 0 auto 16px; font-weight: 900; max-width: 12ch; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); margin: 0 auto 22px; max-width: 44em; text-wrap: balance; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.small { font-size: 14px; color: var(--muted); margin-top: 14px; }
.works { margin: 16px 0 0; font-size: 14px; color: var(--muted); } .works b { color: var(--text); font-weight: 600; }

/* The living demo */
.stage { margin: 36px auto 0; max-width: 1120px; text-align: left; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; backdrop-filter: blur(6px); }
.stage-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.stage-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.stage-title { margin-left: 10px; }
@media (max-width: 560px) { .stage-title, .stage-bar i { display: none; } .stage-bar .day { margin: 0 auto; } }
.stage-bar .day { margin-left: auto; display: flex; gap: 4px; }
.stage-bar .day span { padding: 3px 9px; border-radius: 999px; font-weight: 600; font-size: 12px; color: var(--faint); transition: all .3s; }
.stage-bar .day span.on { background: var(--text); color: var(--bg); }
.stage-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; min-height: 420px; }
.pane { padding: 20px; border-right: 1px solid var(--line); position: relative; }
.pane:last-child { border-right: 0; }
.pane h4 { margin: 0 0 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 920px) { .stage-grid { grid-template-columns: 1fr; } .pane { border-right: 0; border-bottom: 1px solid var(--line); } .pane.sheet { display: none; } }
/* Phones: keep only the request and one short reply, so the speaker circles come up on the first screen. */
@media (max-width: 560px) {
  .hero { padding-top: 96px; } .lead { font-size: 16.5px; margin-bottom: 18px; } .stage { margin-top: 26px; }
  .stage-grid { min-height: 0; } .pane { padding: 16px; } .pane h4 { margin-bottom: 10px; }
  .mini-form, #ai1, #ai2 { display: none; } .bubble.user { min-height: 0; margin-bottom: 0; }
  .people { gap: 8px; } .count .num { font-size: 32px; }
}

.bubble { padding: 11px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; margin-bottom: 10px; }
.bubble.user { background: var(--text); color: var(--bg); border-bottom-right-radius: 4px; margin-left: 12%; min-height: 44px; }
.bubble.user .caret { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
.bubble.ai { background: var(--soft); border-bottom-left-radius: 4px; margin-right: 8%; opacity: 0; transform: translateY(6px); transition: all .4s; }
.bubble.ai.on { opacity: 1; transform: none; }
.bubble.ai .tool { display: block; font: 500 11px "JetBrains Mono", ui-monospace, monospace; color: var(--muted); margin-bottom: 4px; }
.mini-form { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.mini-form .f { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0; transform: translateX(-6px); transition: all .35s; }
.mini-form .f.on { opacity: 1; transform: none; }
.mini-form .f b { font-weight: 600; flex: 1; }
.mini-form .f em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--go); background: var(--go-soft); padding: 1px 7px; border-radius: 99px; }
.mini-form .f .ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--soft); font-size: 12px; }

.people { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.p { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--faint); border: 1.5px dashed var(--line); transition: all .45s cubic-bezier(.22,1,.36,1); }
.p.sent { border: 1.5px solid var(--line); color: var(--muted); background: var(--card); }
.p.open { border-color: var(--wait); color: var(--text); background: var(--wait-soft); }
.p.done { border-color: var(--go); background: var(--go); color: #fff; transform: scale(1.06); }
.p .bell { position: absolute; top: -6px; right: -6px; font-size: 13px; opacity: 0; transform: scale(.4); transition: all .3s; }
.p.remind .bell { opacity: 1; transform: scale(1); animation: ring .6s 2; }
.p.done .bell { opacity: 0 !important; }
.count { margin-top: 18px; }
.count .num { font-size: 40px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.count .num small { font-size: 18px; color: var(--muted); font-weight: 700; }
.count .label { color: var(--muted); font-size: 14px; margin-top: 4px; min-height: 21px; }
.count .bar { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; margin-top: 12px; }
.count .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #16a34a, #22c55e); border-radius: 8px; transition: width .6s cubic-bezier(.22,1,.36,1); }
.allback { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 14px; font-weight: 700; color: var(--go); opacity: 0; transform: scale(.8); transition: all .4s; vertical-align: middle; }
.allback.on { opacity: 1; transform: none; }

.rows { display: grid; gap: 6px; font-size: 13px; }
.row { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; background: var(--soft); animation: rowin .45s cubic-bezier(.22,1,.36,1) both; }
.row .av { width: 26px; height: 26px; border-radius: 50%; }
.row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .dt { font-size: 11px; color: var(--muted); }
.row .ok { color: var(--go); font-weight: 700; }
.sheet-foot { margin-top: 12px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.sim-note { text-align: center; font-size: 13px; color: var(--faint); margin-top: 12px; }

/* Sections */
section { padding: 104px 0; }
section.soft { background: var(--soft); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 18px; font-weight: 900; max-width: 16em; }
.sub { color: var(--muted); font-size: 19px; margin: 0 0 44px; max-width: 36em; }
.center { text-align: center; } .center h2, .center .sub { margin-left: auto; margin-right: auto; }

/* Style playground */
.play { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
@media (max-width: 920px) { .play { grid-template-columns: 1fr; } }
.tabs { display: grid; gap: 6px; }
.tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: all .15s; }
.tab:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.tab.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.tab .sw { width: 28px; height: 28px; border-radius: 8px; flex: none; border: 1px solid rgba(0,0,0,.08); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.tab b { font-weight: 600; } .tab small { display: block; color: var(--muted); font-size: 12.5px; }
.tab { align-items: flex-start; }
.tab-t { flex: 1; min-width: 0; }
/* The tags of the selected variant: what this form shows off. */
.tags { display: flex; flex-wrap: wrap; gap: 5px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .3s, margin .3s; }
.tab.on .tags { max-height: 80px; opacity: 1; margin-top: 8px; }
.tags i { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: var(--go-soft); color: var(--go); white-space: nowrap; }
@media (max-width: 920px) { .tabs { grid-template-columns: repeat(2, 1fr); } }
/* On a phone the job names are long, so the tabs go back to one column. */
@media (max-width: 620px) { .tabs { grid-template-columns: 1fr; } }
.say { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--card); border: 1px dashed var(--line); font-size: 14px; color: var(--muted); }
.say #say-job { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--go); }
.say #say-job, .say .say-l, .say #say-text { display: block; }
.say .say-l { margin-top: 6px; }
.say #say-text { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.45; }
.device { position: relative; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.device-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.device-bar .url { flex: 1; padding: 5px 12px; border-radius: 8px; background: var(--soft); font: 500 12.5px "JetBrains Mono", ui-monospace, monospace; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.device-bar .open-tab { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--soft); color: var(--muted); transition: color .15s, background .15s; }
.device-bar .open-tab:hover { color: var(--text); background: color-mix(in srgb, var(--go) 14%, var(--soft)); }
.device-bar .sz { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--soft); }
.device-bar .sz button { border: 0; background: none; padding: 4px 10px; border-radius: 6px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.device-bar .sz button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.frame-wrap { display: flex; justify-content: center; background: var(--soft); transition: background .3s; }
.frame-wrap iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; transition: width .45s cubic-bezier(.22,1,.36,1), opacity .25s; }
.frame-wrap.phone { padding: 20px 0; } .frame-wrap.phone iframe { width: 390px; height: 700px; border-radius: 28px; box-shadow: 0 0 0 10px #111, var(--shadow); }
.frame-wrap iframe.loading { opacity: .35; }


/* How it works: a sticky scene on the left, steps on the right. On phones, each scene sits above its step. */
.how { padding-bottom: 60px; }
.story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; margin-top: 16px; }
.story-stage { position: sticky; top: 96px; height: min(600px, calc(100vh - 140px)); border-radius: 26px; background: radial-gradient(420px 260px at 30% 30%, var(--glow-a), transparent 70%), radial-gradient(420px 260px at 80% 80%, var(--glow-b), transparent 70%), var(--soft); border: 1px solid var(--line); overflow: hidden; }
.rail { position: absolute; left: 22px; top: 28px; bottom: 28px; width: 3px; border-radius: 3px; background: var(--line); z-index: 2; }
.rail span { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 3px; background: linear-gradient(#16a34a, #22c55e); transition: height .5s cubic-bezier(.22,1,.36,1); }
.scene { position: absolute; inset: 0; padding: 44px 40px 40px 56px; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.scene.on { opacity: 1; transform: none; }
.story-steps { display: flex; flex-direction: column; }
.st { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; opacity: .28; transition: opacity .4s; }
.st.on { opacity: 1; }
.st:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 110px; }
.st:last-child { min-height: 70vh; }
.st-n { font: 700 14px "JetBrains Mono", ui-monospace, monospace; color: var(--go); margin-bottom: 14px; }
.st h3 { margin: 0 0 14px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.03em; font-weight: 900; }
.st p { margin: 0 0 18px; font-size: 19px; color: var(--muted); max-width: 30em; }
.st ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.st li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--go-soft); color: var(--go); font-size: 12px; font-weight: 900; }
.st .scene-inline { display: none; }

/* Shared window look */
.win, .mail, .pform, .week, .sheet-win { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.win-bar span { margin-left: 8px; font-weight: 600; }
.win-body { padding: 18px; }

/* Scene 1 */
.composer { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--bg); }
.attach { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); margin-bottom: 12px; }
.attach .csv { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #16a34a; color: #fff; font: 800 10px Inter, sans-serif; }
.attach b { display: block; font-size: 14px; } .attach small { color: var(--muted); font-size: 12px; }
.typed { min-height: 78px; font-size: 17px; line-height: 1.5; }
.typed::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--text); vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.composer-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.chip { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--go-soft); color: var(--go); }
.send { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 800; }
.thinking { margin-top: 14px; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); opacity: 0; transition: opacity .3s; }
.thinking.on { opacity: 1; }
.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.thinking span:nth-child(2) { animation-delay: .15s; } .thinking span:nth-child(3) { animation-delay: .3s; }

/* Scene 2 */
.s2 { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 16px; }
.mail { padding: 18px; font-size: 14px; transform: rotate(-2deg); }
.mail-head b { display: block; font-size: 15px; } .mail-head small { color: var(--muted); font-size: 12px; }
.mail p { margin: 12px 0; color: var(--muted); }
.mail-btn { display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 13px; }
.pform { padding: 18px; display: grid; gap: 10px; transform: rotate(1.5deg); }
.pf-title { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.pf label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.pf label em { font-style: normal; font-size: 10px; color: var(--go); background: var(--go-soft); padding: 1px 6px; border-radius: 99px; opacity: 0; transition: opacity .3s; }
.pf .in { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: var(--soft); transition: all .35s; }
.pf .drop { padding: 12px; border: 1.5px dashed var(--line); border-radius: 8px; text-align: center; font-size: 12px; color: var(--muted); }
.scene.on .pf label em { opacity: 1; }
.scene.on .pf .in { animation: glow 1.2s both; }
.scene.on .pf:nth-child(2) .in, .scene.on .pf:nth-child(2) em { animation-delay: .5s; transition-delay: .5s; }
.scene.on .pf:nth-child(3) .in, .scene.on .pf:nth-child(3) em { animation-delay: .9s; transition-delay: .9s; }
.scene.on .pf:nth-child(4) .in, .scene.on .pf:nth-child(4) em { animation-delay: 1.3s; transition-delay: 1.3s; }

/* Scene 3 */
.week { padding: 18px; }
.wk-head { display: grid; grid-template-columns: 70px repeat(5, 1fr); font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.wk-head::before { content: ""; } .wk-head .due { color: var(--text); }
.wk-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; height: 38px; border-top: 1px solid var(--line); font-size: 14px; }
.wk-track { position: relative; height: 100%; background: linear-gradient(90deg, transparent calc(80% - 1px), color-mix(in srgb, var(--go) 35%, transparent) calc(80% - 1px), color-mix(in srgb, var(--go) 35%, transparent) 80%, transparent 80%); }
.wk-track i, .wk-legend i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; }
.wk-track i { position: absolute; top: 50%; left: calc(var(--d) * 20% + 10% - 8px); transform: translateY(-50%) scale(0); }
.scene.on .wk-track i { animation: pop .4s cubic-bezier(.22,1.4,.36,1) forwards; animation-delay: calc(var(--d) * .35s + .2s); }
i.done { background: var(--go); box-shadow: 0 0 0 4px var(--go-soft); }
i.rem { background: var(--wait); box-shadow: 0 0 0 4px var(--wait-soft); }
.wk-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.wk-legend span { display: inline-flex; align-items: center; gap: 6px; } .wk-legend i { width: 10px; height: 10px; box-shadow: none; }
.toast { align-self: flex-end; display: flex; gap: 12px; max-width: 340px; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; opacity: 0; transform: translateY(12px); }
.scene.on .toast { animation: rowin .5s 1.5s cubic-bezier(.22,1,.36,1) forwards; }
.toast-ic { font-size: 22px; }
.toast b { display: block; } .toast small { display: block; color: var(--muted); margin: 2px 0 6px; } .toast a { font-size: 12px; color: var(--muted); text-decoration: underline; }

/* Scene 4 */
.ask { display: grid; gap: 8px; }
.ask .me { justify-self: end; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--text); color: var(--bg); font-size: 15px; }
.ask .bot { justify-self: start; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--card); border: 1px solid var(--line); font-size: 15px; opacity: 0; }
.scene.on .ask .bot { animation: rowin .45s .6s both; }
.sheet-win { overflow: hidden; }
.sh-bar { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 12.5px "JetBrains Mono", ui-monospace, monospace; color: var(--muted); }
.sh-bar .exp { color: var(--go); font-weight: 700; }
.sh-h, .sh-r { display: grid; grid-template-columns: 1.3fr .8fr 1.6fr 1fr; gap: 10px; padding: 9px 14px; font-size: 13px; align-items: center; }
.sh-h { background: var(--soft); font-weight: 700; color: var(--muted); font-size: 12px; }
.sh-r { border-top: 1px solid var(--line); opacity: 0; }
.sh-r span:nth-child(3) { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-r i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font: 700 10px Inter, sans-serif; font-style: normal; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--go); }
.scene.on .sh-r { animation: rowin .4s both; }
.scene.on .sh-r:nth-child(2) { animation-delay: .9s; } .scene.on .sh-r:nth-child(3) { animation-delay: 1.05s; } .scene.on .sh-r:nth-child(4) { animation-delay: 1.2s; } .scene.on .sh-r:nth-child(5) { animation-delay: 1.35s; } .scene.on .sh-r:nth-child(6) { animation-delay: 1.5s; }

@keyframes glow { 0% { border-color: var(--line); box-shadow: none; } 40% { border-color: var(--go); box-shadow: 0 0 0 4px var(--go-soft); } 100% { border-color: color-mix(in srgb, var(--go) 40%, var(--line)); box-shadow: none; } }
@keyframes pop { to { transform: translateY(-50%) scale(1); } }
@keyframes dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

@media (max-width: 920px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-stage { display: none; }
  .st, .st:first-child, .st:last-child { min-height: 0; padding: 36px 0; opacity: 1; }
  .st .scene-inline { display: flex; position: relative; opacity: 1; transform: none; padding: 20px; margin-bottom: 22px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); inset: auto; }
  .st .scene-inline.s2 { display: grid; grid-template-columns: 1fr; }
  .mail, .pform { transform: none; }
  .st .scene-inline p { font-size: 14px; margin: 12px 0; max-width: none; }
}



/* Details bento: ten tiles, each with a small scene that plays when it scrolls in (the tile gets .in from the reveal observer). */
.fx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fx { display: flex; flex-direction: column; padding: 14px 14px 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s; }
.fx:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--go) 35%, var(--line)); box-shadow: var(--shadow); }
.fx-2 { grid-column: span 2; }
.fx h3 { margin: 18px 12px 6px; font-size: 21px; letter-spacing: -.02em; font-weight: 800; }
.fx p { margin: 0 12px; color: var(--muted); font-size: 15.5px; }
.fx-art { position: relative; height: 210px; border-radius: 16px; overflow: hidden; background: radial-gradient(260px 140px at 20% 10%, var(--glow-a), transparent 70%), radial-gradient(260px 140px at 90% 100%, var(--glow-b), transparent 70%), var(--soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
@media (max-width: 920px) { .fx-grid { grid-template-columns: 1fr; } .fx-2 { grid-column: auto; } }

/* 1. Prefill */
.pa-card { width: min(440px, 88%); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; box-shadow: var(--shadow); }
.pa-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.pa-l { color: var(--muted); font-weight: 600; }
.pa-v { position: relative; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); min-height: 32px; white-space: nowrap; overflow: hidden; }
.pa-v i { font-style: normal; display: inline-block; clip-path: inset(0 100% 0 0); }
.pa-v s { color: var(--muted); margin-right: 6px; opacity: 0; }
.pa-row em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--go); background: var(--go-soft); padding: 2px 7px; border-radius: 99px; opacity: 0; transform: scale(.6); }
.pa-btn { position: relative; margin-top: 4px; justify-self: start; height: 32px; padding: 0 14px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 700; display: grid; place-items: center; overflow: hidden; }
.pa-btn b { position: absolute; inset: 0; display: grid; place-items: center; background: var(--go); color: #fff; transform: translateY(100%); }
.fx.in .pa-row .pa-v i { animation: typein .6s steps(18) forwards; }
.fx.in .pa-row em { animation: popin .35s cubic-bezier(.34,1.56,.64,1) forwards; }
.fx.in .pa-row:nth-child(1) i { animation-delay: .2s; } .fx.in .pa-row:nth-child(1) em { animation-delay: .8s; }
.fx.in .pa-row:nth-child(2) i { animation-delay: .7s; } .fx.in .pa-row:nth-child(2) em { animation-delay: 1.3s; }
.fx.in .pa-row.fix .pa-v s { animation: fadein .3s 1.5s forwards; }
.fx.in .pa-row.fix .pa-v i { animation-delay: 2.2s; }
.fx.in .pa-row.fix em { animation-delay: 1.7s; }
.fx.in .pa-row.fix .pa-v { animation: fixglow 1.2s 2.1s both; }
.fx.in .pa-btn b { animation: slideup .45s 3.1s cubic-bezier(.22,1,.36,1) forwards; }

/* 2. Reminders */
.rem-art { flex-direction: column; gap: 8px; padding: 0 18px; }
.ra-item { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateX(-14px); }
.ra-day { font: 700 11px "JetBrains Mono", ui-monospace, monospace; color: var(--muted); width: 28px; }
.ra-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--wait-soft); font-size: 12px; }
.ra-item.done { border-color: color-mix(in srgb, var(--go) 50%, var(--line)); }
.ra-item.done .ra-ic { background: var(--go); color: #fff; font-weight: 900; }
.fx.in .ra-item { animation: slidein .45s cubic-bezier(.22,1,.36,1) forwards; }
.fx.in .ra-item:nth-child(2) { animation-delay: .6s; } .fx.in .ra-item:nth-child(3) { animation-delay: 1.2s; }
.fx.in .ra-item:not(.done) .ra-ic { animation: ring .5s 2 .4s; }

/* 3. Logic */
.logic-art svg { width: 100%; height: 100%; padding: 16px 10px; }
.logic-art .nd rect { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.logic-art .nd text { fill: var(--text); font: 700 13px Inter, sans-serif; text-anchor: middle; }
.logic-art .nd.dim { opacity: .45; }
.logic-art .lk { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-dasharray: 5 6; }
.logic-art .lk.on { stroke: var(--go); stroke-dasharray: 200; stroke-dashoffset: 200; }
.logic-art .lbl { fill: var(--muted); font: 700 12px Inter, sans-serif; text-anchor: middle; }
.logic-art .lbl.on { fill: var(--go); }
.fx.in .logic-art .lk.on { animation: draw 1s .4s cubic-bezier(.22,1,.36,1) forwards; }
.fx.in .logic-art .nd.hit rect { animation: nodeon .6s 1.3s forwards; }

/* 4. Files and signatures */
.files-art { gap: 18px; padding: 0 18px; }
.fa-files { flex: 1.2; display: grid; gap: 8px; max-width: 300px; }
.fa-f { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); opacity: 0; }
.fa-th { width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid; place-items: center; font: 800 9px Inter, sans-serif; color: #fff; }
.fa-th.pdf { background: #ef4444; }
.fa-t { flex: 1; min-width: 0; display: grid; gap: 5px; font-size: 12.5px; }
.fa-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; } .fa-bar i { display: block; height: 100%; width: 0; background: var(--go); }
.fa-ok { color: var(--go); font-weight: 900; opacity: 0; }
.fa-sig { flex: 1; max-width: 240px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 4px; }
.fa-sig svg { width: 100%; height: 80px; } .fa-sig path { fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; }
.fa-sig span { font-size: 12px; font-weight: 700; color: var(--go); opacity: 0; }
.fx.in .fa-f { animation: rowin .4s forwards; } .fx.in .fa-f:nth-child(2) { animation-delay: .3s; } .fx.in .fa-f:nth-child(3) { animation-delay: .6s; }
.fx.in .fa-bar i { animation: bar 1s forwards; } .fx.in .fa-f:nth-child(1) .fa-bar i { animation-delay: .3s; } .fx.in .fa-f:nth-child(2) .fa-bar i { animation-delay: .7s; } .fx.in .fa-f:nth-child(3) .fa-bar i { animation-delay: 1.1s; }
.fx.in .fa-ok { animation: fadein .3s forwards; } .fx.in .fa-f:nth-child(1) .fa-ok { animation-delay: 1.3s; } .fx.in .fa-f:nth-child(2) .fa-ok { animation-delay: 1.7s; } .fx.in .fa-f:nth-child(3) .fa-ok { animation-delay: 2.1s; }
.fx.in .fa-sig path { animation: draw 1.8s .8s ease-in-out forwards; }
.fx.in .fa-sig span { animation: fadein .3s 2.7s forwards; }
@media (max-width: 560px) { .files-art { flex-direction: column; justify-content: center; } .fa-sig { display: none; } }
@media (max-width: 560px) { .pa-row { grid-template-columns: 58px 1fr auto; gap: 8px; } .pa-row em { font-size: 0; padding: 3px 6px; } .pa-row em::first-letter { font-size: 11px; } }

/* 5. Autosave */
.save-art { flex-direction: column; gap: 14px; padding: 0 18px; }
.sa-field { width: 100%; max-width: 300px; display: grid; gap: 6px; }
.sa-l { font-size: 12px; font-weight: 700; }
.sa-in { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--go); box-shadow: 0 0 0 4px var(--go-soft); background: var(--card); font-size: 13px; min-height: 58px; }
.sa-type { display: inline; background: linear-gradient(var(--text), var(--text)) no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 0% 100%; }
.sa-toast { padding: 7px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--go); opacity: 0; transform: translateY(8px); }
.fx.in .sa-type { animation: typetext 2.2s .3s steps(40) forwards; }
.fx.in .sa-toast { animation: slideup2 .4s 2.7s cubic-bezier(.22,1,.36,1) forwards; }

/* 6. Works in your AI app */
.apps-art { display: block; }
.aa-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.aa-lines path { fill: none; stroke: color-mix(in srgb, var(--go) 60%, var(--line)); stroke-width: 2; stroke-dasharray: 4 7; }
.fx.in .aa-lines path { animation: flow 1.2s linear infinite; }
.aa-app { position: absolute; transform: translate(-50%, -50%); padding: 9px 16px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 14px; box-shadow: var(--shadow); opacity: 0; }
.fx.in .aa-app { animation: popin2 .45s cubic-bezier(.34,1.56,.64,1) forwards; }
.fx.in .aa-app:nth-of-type(2) { animation-delay: .15s; } .fx.in .aa-app:nth-of-type(3) { animation-delay: .3s; } .fx.in .aa-app:nth-of-type(4) { animation-delay: .45s; }
.aa-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #16a34a, #0ea5e9); box-shadow: 0 0 0 10px color-mix(in srgb, var(--go) 14%, transparent), 0 16px 30px -10px rgba(22,163,74,.7); }
.aa-hub svg { width: 28px; height: 28px; }
.fx.in .aa-hub { animation: hub 2.4s ease-in-out infinite; }


/* 7. Verify it is you */
.la-card { display: grid; justify-items: center; gap: 10px; width: min(300px, 86%); padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.la-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--text); color: var(--bg); transition: background .3s; }
.la-ic svg { width: 22px; height: 22px; }
.la-sh { transform-origin: 16px 11px; }
.la-t { font-size: 12.5px; color: var(--muted); }
.la-code { display: flex; gap: 6px; }
.la-code i { font-style: normal; display: grid; place-items: center; width: 30px; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--soft); font-weight: 800; font-size: 17px; color: transparent; }
.la-ok { font-size: 13px; font-weight: 700; color: var(--go); opacity: 0; }
.fx.in .la-code i { animation: digit .25s forwards; }
.fx.in .la-code i:nth-child(1) { animation-delay: .4s; } .fx.in .la-code i:nth-child(2) { animation-delay: .55s; } .fx.in .la-code i:nth-child(3) { animation-delay: .7s; }
.fx.in .la-code i:nth-child(4) { animation-delay: .85s; } .fx.in .la-code i:nth-child(5) { animation-delay: 1s; } .fx.in .la-code i:nth-child(6) { animation-delay: 1.15s; }
.fx.in .la-sh { animation: unlock .5s 1.5s cubic-bezier(.34,1.56,.64,1) forwards; }
.fx.in .la-ic { animation: lockgreen .3s 1.5s forwards; }
.fx.in .la-ok { animation: fadein .3s 1.8s forwards; }
@keyframes digit { to { color: var(--text); border-color: var(--go); background: var(--card); } }
@keyframes unlock { to { transform: translateY(-3px) rotate(-28deg); } }
@keyframes lockgreen { to { background: var(--go); color: #fff; } }


/* Why AllBack: a before and after stage, then rows that flip from the old way to AllBack. */
.vs-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 18px; margin-top: 44px; }
.vs-stage > *, .vs-rows > *, .vs-row > * { min-width: 0; }
.vs-card { position: relative; display: flex; flex-direction: column; padding: 14px 14px 22px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.vs-before { border-style: dashed; }
.vs-after { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #16a34a, #22c55e 40%, #0ea5e9) border-box; box-shadow: 0 30px 80px -30px rgba(22,163,74,.55); }
.vs-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 10px 14px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.vs-label span { font-size: 13px; font-weight: 600; color: var(--muted); }
.vs-before .vs-label { color: var(--muted); }
.vs-art { position: relative; height: 280px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); }
.vs-sum { margin: 16px 10px 0; font-size: 16px; color: var(--muted); }
.vs-after .vs-sum { color: var(--text); font-weight: 600; }
.vs-vs { align-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 900; font-size: 15px; letter-spacing: -.02em; box-shadow: 0 0 0 8px var(--bg); }
section.soft .vs-vs { box-shadow: 0 0 0 8px var(--soft); }

/* Before: a pile of follow-up emails and a sheet full of gaps. */
.vs-chaos { background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--line) 45%, transparent) 14px 15px), var(--soft); filter: saturate(.6); }
.vs-mail { position: absolute; left: var(--x); top: var(--y); width: min(250px, 62%); padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 24px -14px rgba(0,0,0,.4); transform: rotate(var(--r)); display: grid; gap: 1px; font-size: 12.5px; opacity: .92; }
.vs-mail b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-mail span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-mail::before { content: ""; position: absolute; right: 10px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--wait); }
.vs-stage.in .vs-mail { animation: vs-drift 5s ease-in-out infinite alternate; }
.vs-stage.in .vs-mail:nth-child(2) { animation-delay: -1.2s; } .vs-stage.in .vs-mail:nth-child(3) { animation-delay: -2.5s; } .vs-stage.in .vs-mail:nth-child(4) { animation-delay: -3.7s; }
@keyframes vs-drift { to { transform: rotate(calc(var(--r) * -1)) translateY(-6px); } }
.vs-sheet { position: absolute; right: 6%; top: 10%; display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; padding: 6px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); transform: rotate(6deg); }
.vs-sheet i { height: 16px; border-radius: 3px; background: var(--soft); font-style: normal; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.vs-sheet i.q { background: var(--wait-soft); color: var(--wait); }

/* After: one sentence, then the meter fills and the sheet is ready. */
.vs-calm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; background: radial-gradient(260px 160px at 15% 0%, var(--glow-a), transparent 70%), radial-gradient(260px 160px at 100% 100%, var(--glow-b), transparent 70%), var(--soft); }
.vs-bubble { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--text); color: var(--bg); font-size: 13.5px; line-height: 1.4; opacity: 0; transform: translateY(8px); }
.vs-stage.in .vs-bubble { animation: chip .5s .2s cubic-bezier(.34,1.56,.64,1) forwards; }
.vs-meter { position: relative; width: 120px; height: 120px; }
.vs-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vs-meter circle { fill: none; stroke-width: 10; }
.vs-meter .bg { stroke: var(--line); }
.vs-meter .fg { stroke: var(--go); stroke-linecap: round; stroke-dasharray: 314.2; stroke-dashoffset: 314.2; }
.vs-stage.in .vs-meter .fg { animation: vs-fill 2.2s .8s cubic-bezier(.45,0,.2,1) forwards; }
@keyframes vs-fill { to { stroke-dashoffset: 0; } }
.vs-count { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.vs-count b { font-size: 34px; font-weight: 900; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.vs-count span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.vs-done { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--card); border: 1px solid color-mix(in srgb, var(--go) 45%, var(--line)); font-size: 13px; font-weight: 700; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px) scale(.95); }
.vs-done span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--go); color: #fff; font-size: 11px; }
.vs-stage.in .vs-done { animation: chip .5s 3.1s cubic-bezier(.34,1.56,.64,1) forwards; }

/* Rows: the old way gets crossed out, then the AllBack answer pops in. */
.vs-rows { margin-top: 28px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.vs-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.5fr; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line); transition: background .3s; }
.vs-row:first-child { border-top: 0; }
.vs-row:not(.vs-head):hover { background: color-mix(in srgb, var(--go) 5%, transparent); }
.vs-head { padding-top: 18px; padding-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vs-head div:last-child { color: var(--go); }
.vs-topic { font-weight: 700; }
.vs-old, .vs-new { display: flex; align-items: center; gap: 10px; }
.vs-old { color: var(--muted); }
.vs-x, .vs-ok { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.vs-x { background: var(--soft); border: 1px solid var(--line); }
.vs-ok { background: var(--go); box-shadow: 0 0 0 4px var(--go-soft); transform: scale(0); }
.vs-x svg, .vs-ok svg { width: 13px; height: 13px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vs-x svg { stroke: var(--faint); } .vs-ok svg { stroke: #fff; }
/* Inline, so the line crosses every wrapped line of text. */
.vs-strike { display: inline; background: linear-gradient(var(--faint), var(--faint)) 0 58% / 0 1.5px no-repeat; }
.vs-new { font-weight: 700; opacity: 0; transform: translateX(-10px); }
.vs-rows.in .vs-strike { animation: vs-strike .45s calc(.3s + var(--i) * .22s) ease-out forwards; }
.vs-rows.in .vs-new { animation: vs-in .5s calc(.5s + var(--i) * .22s) cubic-bezier(.22,1,.36,1) forwards; }
.vs-rows.in .vs-ok { animation: vs-pop .45s calc(.55s + var(--i) * .22s) cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes vs-strike { to { background-size: 100% 1.5px; } }
@keyframes vs-in { to { opacity: 1; transform: none; } }
@keyframes vs-pop { to { transform: scale(1); } }

@media (max-width: 920px) {
  .vs-stage { grid-template-columns: 1fr; }
  .vs-vs { justify-self: center; margin: -32px 0; z-index: 1; }
  .vs-art { height: 240px; }
  .vs-calm { height: auto; min-height: 240px; }
  .vs-done { font-size: 12.5px; }
  .vs-head { display: none; }
  .vs-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
  .vs-topic { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .vs-mail { animation: none !important; }
  .vs-bubble, .vs-done, .vs-new { opacity: 1 !important; transform: none !important; }
  .vs-ok { transform: none !important; } .vs-strike { background-size: 100% 1.5px !important; }
  .vs-meter .fg { stroke-dashoffset: 0 !important; }
}


/* Get started: a live chat preview on the left, steps with the address inside on the right. */
.cn-section { position: relative; overflow: hidden; }
.cn-section::before { content: ""; position: absolute; inset: auto -10% -30% -10%; height: 70%; background: radial-gradient(50% 60% at 30% 60%, var(--glow-a), transparent 70%), radial-gradient(40% 50% at 80% 40%, var(--glow-b), transparent 70%); pointer-events: none; }
.cn-section .connect { position: relative; align-items: stretch; gap: 48px; }
.cn-left { display: flex; flex-direction: column; }
.cn-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 28px; padding: 0; }
.cn-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.cn-chips span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--go-soft); color: var(--go); font-size: 11px; font-weight: 900; }

/* The chat preview plays one short loop: the ask, the AllBack card, the reply. */
/* Flex column on purpose: the bar stays on top of the body even if another page style matches this element. */
.cn-chat { display: flex; flex-direction: column; margin-top: auto; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.cn-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 13px; }
.cn-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.cn-app { margin-left: 8px; font-weight: 700; }
.cn-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: var(--go-soft); color: var(--go); font-size: 12px; font-weight: 700; }
.cn-live b { width: 7px; height: 7px; border-radius: 50%; background: var(--go); animation: cn-pulse 1.8s ease-in-out infinite; }
@keyframes cn-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--go) 25%, transparent); } }
.cn-body { display: grid; gap: 12px; padding: 18px; min-height: 250px; align-content: start; }
.cn-msg { justify-self: end; max-width: 86%; padding: 11px 15px; border-radius: 18px 18px 4px 18px; background: var(--text); color: var(--bg); font-size: 14.5px; line-height: 1.4; }
.cn-tool { justify-self: start; width: min(340px, 100%); padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--go) 40%, var(--line)); background: color-mix(in srgb, var(--go) 5%, var(--card)); display: grid; gap: 7px; }
.cn-tool-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.cn-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #16a34a, #0ea5e9); color: #fff; font-size: 13px; }
.cn-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cn-line span { color: var(--go); font-weight: 900; }
.cn-line i { font-style: normal; }
.cn-reply { justify-self: start; font-size: 14.5px; color: var(--muted); }
.cn-msg, .cn-tool, .cn-line, .cn-reply { opacity: 0; }
.cn-chat.is-playing .cn-msg { animation: cn-loop 10s 0s infinite; }
.cn-chat.is-playing .cn-tool { animation: cn-loop 10s .9s infinite; }
.cn-chat.is-playing .cn-line:nth-child(2) { animation: cn-loop 10s 1.5s infinite; }
.cn-chat.is-playing .cn-line:nth-child(3) { animation: cn-loop 10s 2.1s infinite; }
.cn-chat.is-playing .cn-line:nth-child(4) { animation: cn-loop 10s 2.7s infinite; }
.cn-chat.is-playing .cn-reply { animation: cn-loop 10s 3.5s infinite; }
/* Each part appears, stays, and all parts fade out together near the end of the 10 s loop. */
@keyframes cn-loop { 0% { opacity: 0; transform: translateY(8px); } 4%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }

/* The setup box. */
.cn-right { display: grid; gap: 16px; align-content: start; }
.cn-box { position: relative; padding: 22px; border-radius: 24px; border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, color-mix(in srgb, #16a34a 70%, var(--line)), var(--line) 45%, color-mix(in srgb, #0ea5e9 60%, var(--line))) border-box; }
.cn-box .apps { position: relative; flex-wrap: nowrap; margin-bottom: 20px; }
.cn-box .apps button { position: relative; z-index: 1; min-width: 0; background: none !important; box-shadow: none !important; }
.apps-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 9px; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 0 0 1px var(--line); transition: left .35s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1); }
.cn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cn-steps li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; margin: 0; padding: 0 0 18px; color: var(--muted); }
.cn-steps li:last-child { padding-bottom: 0; }
.cn-steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: linear-gradient(var(--go), var(--line)); opacity: .5; border-radius: 2px; }
.cn-steps li > div { padding-top: 4px; min-width: 0; }
.cn-steps b { color: var(--text); }
.cn-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 800; font-size: 14px; }
.cn-muted { color: var(--faint); }
.app-steps:not([hidden]) { animation: cn-fade .35s ease-out; }
@keyframes cn-fade { from { opacity: 0; transform: translateY(6px); } }
.cn-slot:not(:empty) { margin-top: 10px; }
.cn-box .copy { margin-top: 0; align-items: stretch; padding: 5px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--go) 45%, var(--line)); background: var(--soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--go) 10%, transparent); }
.cn-link { display: grid; place-items: center; width: 36px; flex: none; color: var(--go); }
.cn-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cn-box .copy code { border: 0; background: none; padding: 10px 4px; font-size: 14.5px; align-self: center; }
.cn-box .copy button { padding: 0 18px; border-radius: 10px; min-width: 92px; justify-content: center; }
.cn-box .copy button.done { background: var(--go); border-color: var(--go); color: #fff; }
/* display: flex above would override the hidden attribute. */
.cn-box .copy[hidden] { display: none; }
.cn-note { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 11px 13px; border-radius: 12px; background: var(--soft); font-size: 13.5px; color: var(--muted); }
.cn-note svg { flex: none; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.cn-then { margin: 16px 0 0; font-size: 14.5px; color: var(--muted); }
.cn-then b { color: var(--text); }


.cn-any-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.cn-copy-prompt { padding: 10px 16px; border-radius: 11px; }
.cn-copy-prompt.done { background: var(--go); border-color: var(--go); color: #fff; }
.cn-see { font-size: 14px; }
.cn-box .apps { overflow-x: auto; scrollbar-width: none; }
.cn-box .apps::-webkit-scrollbar { display: none; }
.cn-box .apps button { flex: 1 0 auto; }

.apps-fast { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--go-soft); color: var(--go); font-size: 11px; font-weight: 800; vertical-align: 1px; }
/* The pricing teaser, as its own card. */
@media (max-width: 860px) {
  .cn-chat { margin-top: 0; }
  .cn-box { padding: 16px; }
  .cn-box .apps button { font-size: 13px; padding: 9px 4px; }
  .cn-steps li { grid-template-columns: 28px 1fr; gap: 12px; }
  .cn-steps li:not(:last-child)::before { left: 13px; top: 30px; }
  .cn-n { width: 28px; height: 28px; font-size: 13px; }
  /* On a phone the full address must stay readable, so the button moves under it. */
  .cn-box .copy { flex-wrap: wrap; }
  .cn-box .copy code { flex: 1 1 calc(100% - 44px); white-space: normal; overflow-wrap: anywhere; font-size: 13.5px; }
  .cn-box .copy button { flex: 1 1 100%; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-msg, .cn-tool, .cn-line, .cn-reply { opacity: 1 !important; animation: none !important; transform: none !important; }
  .apps-pill { transition: none; }
}


/* Teams: breadth. A slow marquee of asks, then one card per team with its jobs. */
.bt-section { position: relative; overflow: hidden; }
.mq { display: grid; gap: 12px; margin: 34px 0 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq-row { display: flex; width: max-content; }
.mq-track { display: flex; gap: 12px; padding-right: 12px; animation: mq 60s linear infinite; }
.mq-row.rev .mq-track { animation-direction: reverse; animation-duration: 70s; }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-100%); } }
.mq-chip { flex: none; padding: 10px 16px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: 15px; font-weight: 600; white-space: nowrap; }
.mq-chip i { font-style: normal; color: var(--go); font-weight: 800; }
.mq-row.rev .mq-chip:nth-child(3n) { background: var(--soft); }
.mq-row:not(.rev) .mq-chip:nth-child(4n+2) { border-color: color-mix(in srgb, var(--go) 40%, var(--line)); }
.bt-foot { margin: 28px 0 0; text-align: center; color: var(--muted); font-size: 16px; }
.bt-foot b { color: var(--text); }
@media (max-width: 620px) { .mq-chip { font-size: 14px; padding: 8px 14px; } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }


/* Tools: people come from one tool, answers go to another, AllBack in the middle. */
.tl-flow { display: grid; grid-template-columns: 1fr 70px auto 70px 1fr; align-items: center; margin-top: 44px; }
.tl-flow > * { min-width: 0; }
.tl-col { padding: 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.tl-h { margin: 2px 6px 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--soft); transition: transform .2s; }
.tl-list li:hover { transform: translateX(3px); }
.tl-list b { display: block; font-size: 15.5px; }
.tl-list small { display: block; font-size: 13px; color: var(--muted); }
.tl-logo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-weight: 900; font-size: 17px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.tl-logo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Brand icons from Simple Icons (CC0), in each brand's own colour on a white tile, like an app icon. */
.tl-logo.is-brand { background: #fff; border-color: rgba(0,0,0,.08); }
.tl-logo.is-brand svg { width: 21px; height: 21px; stroke: none; }
.tl-pipe { position: relative; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); }
.tl-pipe i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--go); box-shadow: 0 0 10px var(--go); opacity: 0; }
.tl-flow.in .tl-pipe i { animation: tl-dot 2.4s linear infinite; }
.tl-flow.in .tl-pipe i:nth-child(2) { animation-delay: .8s; } .tl-flow.in .tl-pipe i:nth-child(3) { animation-delay: 1.6s; }
.tl-flow.in .tl-pipe:last-of-type i { animation-delay: 1.2s; } .tl-flow.in .tl-pipe:last-of-type i:nth-child(2) { animation-delay: 2s; } .tl-flow.in .tl-pipe:last-of-type i:nth-child(3) { animation-delay: 2.8s; }
@keyframes tl-dot { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.tl-hub { position: relative; display: grid; justify-items: center; gap: 10px; width: 250px; padding: 24px 20px; border-radius: 26px; text-align: center; border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #16a34a, #22c55e 40%, #0ea5e9) border-box; box-shadow: 0 30px 70px -30px rgba(22,163,74,.6); }
.tl-hub > b { font-size: 20px; letter-spacing: -.02em; }
.tl-hub-logo { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg, #16a34a, #0ea5e9); box-shadow: 0 0 0 10px color-mix(in srgb, var(--go) 14%, transparent); }
.tl-hub-logo svg { width: 28px; height: 28px; }
.tl-flow.in .tl-hub-logo { animation: hub 2.4s ease-in-out infinite; }
.tl-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; width: 100%; counter-reset: t; }
.tl-steps li { counter-increment: t; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--soft); font-size: 13.5px; font-weight: 600; text-align: left; }
.tl-steps li::before { content: counter(t); display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--go); color: #fff; font-size: 11px; font-weight: 800; }
.tl-ask { margin-top: 22px; padding: 22px 26px; border-radius: 24px; background: var(--card); border: 1px dashed var(--line); }
.tl-ask-l { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--go); }
.tl-ask p { margin: 8px 0 10px; font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.6; letter-spacing: -.01em; }
.tl-ask small { color: var(--muted); font-size: 14px; }
.tl-chip { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: .85em; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.tl-chip.is-ab { color: #fff; background: linear-gradient(135deg, #16a34a, #0ea5e9); border-color: transparent; }
@media (max-width: 1020px) {
  .tl-flow { grid-template-columns: 1fr; justify-items: stretch; }
  .tl-pipe { width: 2px; height: 44px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 11px); }
  .tl-pipe i { left: 50%; top: 0; margin: 0 0 0 -4px; }
  @keyframes tl-dot { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
  .tl-hub { width: auto; }
}

/* Testimonials. */
.lv-dev { margin: 18px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--wait); background: var(--wait-soft); color: var(--wait); font-size: 14px; font-weight: 600; }
.lv-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 18px; margin-top: 40px; }
.lv-grid > * { min-width: 0; }
.lv-card { position: relative; margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.lv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lv-feature { grid-row: span 2; padding: 34px; border-color: transparent; background: radial-gradient(420px 240px at 100% 0%, var(--glow-a), transparent 70%), linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #16a34a, #22c55e 40%, #0ea5e9) border-box; box-shadow: 0 34px 80px -36px rgba(22,163,74,.6); }
.lv-feature::before { content: "“"; position: absolute; right: 26px; bottom: -40px; font: 900 260px/1 Georgia, serif; background: linear-gradient(135deg, #16a34a, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .14; pointer-events: none; }
.lv-card blockquote { margin: 0; flex: 1; font-size: 18px; line-height: 1.55; font-weight: 600; letter-spacing: -.01em; }
.lv-feature blockquote { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.35; font-weight: 700; letter-spacing: -.02em; }
.lv-card mark { color: inherit; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--go) 35%, transparent) 58%); padding: 0 2px; }
.lv-ba { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); }
.lv-bar { display: grid; grid-template-columns: 96px 1fr 70px; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.lv-bar i { height: 12px; border-radius: 99px; background: var(--line); width: 0; }
.lv-bar b { text-align: right; color: var(--text); font-size: 15px; }
.lv-bar.is-before b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.lv-bar.is-after i { background: linear-gradient(90deg, #16a34a, #0ea5e9); box-shadow: 0 0 16px rgba(34,197,94,.45); }
.lv-bar.is-after span, .lv-bar.is-after b { color: var(--go); }
.lv-feature.in .lv-bar i { animation: grow 1.1s .3s cubic-bezier(.22,1,.36,1) forwards; }
.lv-feature.in .lv-bar.is-after i { animation-delay: .9s; }
.lv-big b { display: block; font-size: 54px; line-height: 1; font-weight: 900; letter-spacing: -.04em; background: linear-gradient(90deg, #16a34a, #22c55e 40%, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lv-big b span { font-size: 26px; letter-spacing: -.02em; }
.lv-big small { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); font-weight: 600; }
.lv-card figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.lv-card figcaption > span:nth-child(2) { flex: 1; min-width: 0; }
.lv-card figcaption b { display: block; font-size: 15px; }
.lv-card figcaption small { display: block; font-size: 13px; color: var(--muted); }
.lv-tag { flex: none; padding: 4px 10px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); }
.lv-av { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--av1), var(--av2)); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line); }
@media (max-width: 920px) { .lv-grid { grid-template-columns: 1fr; } .lv-feature { grid-row: auto; padding: 24px; } .lv-tag { display: none; } .lv-bar { grid-template-columns: 84px 1fr 60px; } }
@media (prefers-reduced-motion: reduce) { .lv-bar i { width: var(--w) !important; } }

/* FAQ: a sticky intro on the left, cards that open smoothly on the right. */
.fq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.fq-grid > * { min-width: 0; }
.fq-left { position: sticky; top: 110px; }
.fq-help { margin-top: 26px; padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.fq-more { margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.fq-more a { color: var(--text); }
.fq-help b { font-size: 17px; }
.fq-help p { margin: 4px 0 14px; color: var(--muted); font-size: 15px; }
.fq-list { display: grid; gap: 10px; interpolate-size: allow-keywords; }
details.fq { border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s; }
details.fq:hover { border-color: color-mix(in srgb, var(--text) 22%, var(--line)); }
details.fq[open] { border-color: color-mix(in srgb, var(--go) 45%, var(--line)); box-shadow: 0 18px 40px -26px rgba(22,163,74,.5); }
details.fq summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
details.fq summary::-webkit-details-marker { display: none; }
details.fq summary:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; border-radius: 18px; }
.fq-n { flex: none; font: 600 13px "JetBrains Mono", ui-monospace, monospace; color: var(--faint); }
details.fq[open] .fq-n { color: var(--go); }
.fq-q { flex: 1; min-width: 0; }
.fq-i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); transition: background .25s, transform .35s cubic-bezier(.22,1,.36,1); }
.fq-i::before, .fq-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--text); transition: transform .35s cubic-bezier(.22,1,.36,1), background .25s; }
.fq-i::after { transform: rotate(90deg); }
details.fq[open] .fq-i { background: var(--go); border-color: var(--go); transform: rotate(180deg); }
details.fq[open] .fq-i::before, details.fq[open] .fq-i::after { background: #fff; }
details.fq[open] .fq-i::after { transform: rotate(0deg); }
.fq-a p { margin: 0; padding: 0 20px 20px 56px; color: var(--muted); font-size: 16px; line-height: 1.65; }
/* Browsers with ::details-content animate the height. Others open at once. */
details.fq::details-content { block-size: 0; overflow: hidden; transition: block-size .35s cubic-bezier(.22,1,.36,1), content-visibility .35s allow-discrete; }
details.fq[open]::details-content { block-size: auto; }
@media (max-width: 920px) { .fq-grid { grid-template-columns: 1fr; gap: 28px; } .fq-left { position: static; } .fq-a p { padding-left: 20px; } }

/* Final: a dark panel in both themes. 24 people turn green, one by one. */
.fn-panel { position: relative; overflow: hidden; border-radius: 36px; padding: 96px 24px; text-align: center; color: #f4f4f5; background: radial-gradient(600px 320px at 50% 110%, rgba(34,197,94,.35), transparent 70%), radial-gradient(500px 300px at 100% 0%, rgba(14,165,233,.25), transparent 70%), radial-gradient(420px 260px at 0% 10%, rgba(139,92,246,.18), transparent 70%), #0b0c10; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 100px -40px rgba(0,0,0,.6); }
.fn-body { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.fn-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, #16a34a, #0ea5e9); box-shadow: 0 0 0 12px rgba(34,197,94,.14), 0 20px 40px -12px rgba(22,163,74,.7); margin-bottom: 26px; }
.fn-mark svg { width: 30px; height: 30px; }
.fn-panel h2 { margin: 0 auto 18px; max-width: none; font-size: clamp(42px, 6.4vw, 84px); color: #fff; }
.fn-panel p { margin: 0 auto 30px; max-width: 34em; font-size: 19px; color: rgba(244,244,245,.72); }
.fn-panel .cta { justify-content: center; }
.fn-go { background: #fff; color: #0b0c10; border-color: #fff; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: fn-glow 2.6s ease-in-out infinite; }
@keyframes fn-glow { 50% { box-shadow: 0 0 0 10px rgba(34,197,94,0), 0 0 40px 4px rgba(34,197,94,.35); } }
.fn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.22); }
.fn-ghost:hover { background: rgba(255,255,255,.08); }
.fn-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 26px; font-size: 14px; color: rgba(244,244,245,.6); }
.fn-trust span::before { content: "✓ "; color: #22c55e; font-weight: 800; }
.fn-crowd { position: absolute; inset: 0; pointer-events: none; }
.fn-p { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background .4s, color .4s, border-color .4s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.fn-p.ok { background: #16a34a; border-color: #22c55e; color: #fff; transform: scale(1.08); box-shadow: 0 0 18px rgba(34,197,94,.55); }
@media (max-width: 720px) { .fn-panel { padding: 104px 18px 88px; border-radius: 28px; } .fn-p { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 8px; } .fn-p.is-side { display: none; } }
@media (prefers-reduced-motion: reduce) { .fn-go { animation: none; } .tl-pipe i { display: none; } }


/* Teams stage: pick a team, and one job plays at a time. */
.tm { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: stretch; }
.tm > * { min-width: 0; }
.tm-teams { display: grid; gap: 8px; align-content: start; }
.tm-t { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 15.5px; font-weight: 700; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.tm-t:hover { transform: translateX(3px); }
.tm-t.on { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #16a34a, #0ea5e9) border-box; box-shadow: 0 16px 34px -22px rgba(22,163,74,.7); }
.tm-t .tm-ic { width: 34px; height: 34px; border-radius: 10px; }
.tm-t .tm-ic svg { width: 17px; height: 17px; }
.tm-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; }
.tm-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g1 { background: linear-gradient(135deg, #16a34a, #22c55e); } .g2 { background: linear-gradient(135deg, #f97316, #f59e0b); }
.g3 { background: linear-gradient(135deg, #8b5cf6, #ec4899); } .g4 { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.g5 { background: linear-gradient(135deg, #eab308, #84cc16); } .g6 { background: linear-gradient(135deg, #14b8a6, #0ea5e9); }
.tm-stage { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 28px; border-radius: 28px; overflow: hidden; background: radial-gradient(420px 220px at 0% 0%, var(--glow-a), transparent 70%), radial-gradient(420px 240px at 100% 100%, var(--glow-b), transparent 70%), var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tm-top { display: flex; align-items: center; gap: 14px; }
.tm-top b { display: block; font-size: 22px; letter-spacing: -.02em; }
.tm-top small { color: var(--muted); font-size: 14px; }
.tm-chat { display: flex; align-items: flex-end; gap: 10px; justify-content: flex-end; min-height: 70px; }
.tm-you { order: 2; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); font-size: 11px; font-weight: 800; color: var(--muted); }
.tm-chat p { margin: 0; max-width: 560px; padding: 14px 18px; border-radius: 20px 20px 4px 20px; background: var(--text); color: var(--bg); font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.tm-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: tm-blink 1s steps(1) infinite; }
@keyframes tm-blink { 50% { opacity: 0; } }
.tm-people { display: grid; grid-template-columns: repeat(8, minmax(0, 64px)); justify-content: space-between; gap: 10px; }
.tm-p { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); font-size: clamp(11px, 1.2vw, 14px); font-weight: 800; color: var(--muted); transition: background .35s, color .35s, border-color .35s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; }
.tm-p::after { content: "✓"; position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 38%; height: 38%; border-radius: 50%; background: #fff; color: var(--go); font-size: 10px; font-weight: 900; transform: scale(0); transition: transform .3s .1s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.tm-p.ok { background: var(--go); border-color: var(--go); color: #fff; transform: scale(1.06); box-shadow: 0 10px 22px -10px rgba(22,163,74,.8); }
.tm-p.ok::after { transform: scale(1); }
.tm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tm-count { font-size: 15px; color: var(--muted); font-weight: 600; }
.tm-count b { font-size: 26px; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tm-done { padding: 8px 14px; border-radius: 99px; background: var(--go-soft); color: var(--go); font-size: 14px; font-weight: 800; opacity: 0; transform: translateY(6px) scale(.95); transition: opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.tm-done.on { opacity: 1; transform: none; }
.tm-jobs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.tm-j { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .2s; }
.tm-j:hover { color: var(--text); }
.tm-j.on { color: var(--go); border-color: color-mix(in srgb, var(--go) 45%, var(--line)); background: var(--go-soft); }
@media (max-width: 920px) {
  .tm { grid-template-columns: 1fr; }
  .tm-teams { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; }
  .tm-teams::-webkit-scrollbar { display: none; }
  .tm-t { flex: none; width: auto; white-space: nowrap; font-size: 14px; }
  .tm-t:hover { transform: none; }
}
@media (max-width: 620px) {
  .tm-stage { padding: 20px; gap: 18px; }
  .tm-people { grid-template-columns: repeat(4, minmax(0, 56px)); justify-content: space-around; gap: 12px; }
  /* Less text on a phone: the team row and the stage are enough. */
  .tm-jobs { display: none; }
  .tm-chat p { font-size: 17px; }
}


/* AllBack for good: a warm section, three audience cards, and the offer with an application form. */
/* Home page: pricing and AllBack for good in one short block. The full for-good page uses the fg- styles below. */
.pf-section { padding: 72px 0; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pf-grid > * { min-width: 0; }
.pf-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); }
.pf-card h2 { margin: 6px 0 14px; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.pf-card > p:not(.eyebrow) { margin: 0 0 16px; color: var(--muted); }
.pf-card .btn { margin-top: auto; }
.pf-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.pf-list li::before { content: "✓"; margin-right: 10px; color: var(--go); font-weight: 800; }
.pf-good { background: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, #eab308 16%, transparent), transparent 60%), var(--card); }
.pf-chips { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chips li { padding: 5px 11px; border-radius: 99px; background: var(--soft, #f4f4f0); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.pf-go { background: linear-gradient(135deg, #16a34a, #0ea5e9); color: #fff; border-color: transparent; }
@media (max-width: 860px) { .pf-grid { grid-template-columns: 1fr; } .pf-section { padding: 48px 0; } }
.fg-section { position: relative; overflow: hidden; background: radial-gradient(700px 360px at 0% 0%, rgba(234,179,8,.16), transparent 70%), radial-gradient(700px 360px at 100% 100%, rgba(20,184,166,.16), transparent 70%), var(--soft); }
.fg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.fg-grid > *, .fg-offer > * { min-width: 0; }
.fg-card { padding: 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.fg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fg-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; box-shadow: 0 12px 24px -12px rgba(0,0,0,.5); }
.fg-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fg-card h3 { margin: 16px 0 4px; font-size: 20px; letter-spacing: -.02em; }
.fg-card p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.fg-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fg-jobs li { padding: 5px 11px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.fg-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.fg-get, .fg-apply { padding: 26px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.fg-get { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #eab308, #16a34a 45%, #14b8a6) border-box; }
.fg-get > b, .fg-apply > b { display: block; font-size: 19px; letter-spacing: -.01em; margin-bottom: 14px; }
.fg-get ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.fg-get li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.fg-get li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--go-soft); color: var(--go); font-size: 12px; font-weight: 900; }
.fg-get { display: flex; flex-direction: column; }
.fg-example { margin-top: auto; padding: 16px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.fg-get small + .fg-example { margin-top: 22px; }
.fg-ex-l { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fg-ex-t { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 14.5px; }
.fg-ex-t span { color: var(--go); font-weight: 700; }
.fg-ex-bar { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.fg-ex-bar i { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #eab308, #16a34a 60%, #14b8a6); }
.fg-offer.in .fg-ex-bar i { animation: grow 1.4s .3s cubic-bezier(.22,1,.36,1) forwards; --w: 93%; }
.fg-ex-f { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .fg-ex-bar i { width: 93%; } }
.fg-get small, .fg-apply small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.fg-apply label { display: block; margin: 10px 0 5px; font-size: 13.5px; font-weight: 600; }
.fg-apply input, .fg-apply select { width: 100%; padding: 11px 13px; font: inherit; color: inherit; background: var(--soft); border: 1px solid var(--line); border-radius: 11px; outline: none; }
.fg-apply input:focus, .fg-apply select:focus { border-color: var(--go); }
.fg-go { width: 100%; justify-content: center; margin: 16px 0 10px; border-color: transparent; background: linear-gradient(135deg, #16a34a, #14b8a6); color: #fff; }
#fg-msg { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
#fg-msg.ok { color: var(--go); } #fg-msg.err { color: #d92d20; }
@media (max-width: 920px) { .fg-grid, .fg-offer { grid-template-columns: 1fr; } }

/* 9. Response insights */
.insights-art { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 22px; }
.ia-funnel { display: grid; gap: 7px; }
.ia-row { display: grid; grid-template-columns: 64px 1fr 30px; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; }
.ia-row span:first-child { color: var(--muted); }
.ia-row b { text-align: right; font-variant-numeric: tabular-nums; }
.ia-bar { height: 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.ia-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #16a34a, #0ea5e9); }
.fx.in .ia-bar i { animation: grow .9s cubic-bezier(.22,1,.36,1) forwards; }
.fx.in .ia-row:nth-child(2) i { animation-delay: .15s; } .fx.in .ia-row:nth-child(3) i { animation-delay: .3s; } .fx.in .ia-row:nth-child(4) i { animation-delay: .45s; }
.ia-tip { align-self: flex-start; display: flex; gap: 8px; align-items: flex-start; max-width: 100%; padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1px solid color-mix(in srgb, var(--go) 40%, var(--line)); font-size: 12.5px; line-height: 1.4; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); }
.ia-tip b { color: var(--go); }
.fx.in .ia-tip { animation: chip .45s 1.3s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes grow { to { width: var(--w); } }

/* 10. Read and confirm */
.rc-card { width: min(300px, 86%); border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.rc-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; }
.rc-head em { margin-left: auto; font-style: normal; font-size: 10.5px; padding: 2px 8px; border-radius: 99px; background: var(--soft); color: var(--muted); position: relative; }
.rc-head em::after { content: "✓ Read"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: 99px; background: var(--go-soft); color: var(--go); opacity: 0; }
.rc-body { height: 86px; overflow: hidden; position: relative; }
.rc-lines { display: grid; gap: 8px; padding: 12px; }
.rc-lines i { display: block; height: 7px; border-radius: 4px; background: var(--line); }
.rc-lines i:nth-child(3n) { width: 70%; } .rc-lines i:nth-child(4n+1) { width: 45%; height: 9px; background: color-mix(in srgb, var(--text) 30%, var(--line)); }
.rc-prog { height: 3px; background: var(--soft); } .rc-prog i { display: block; height: 100%; width: 0; background: var(--go); }
.rc-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; font-weight: 600; }
.rc-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line); display: grid; place-items: center; color: transparent; font-size: 11px; }
.fx.in .rc-lines { animation: rcscroll 1.6s .3s ease-in-out forwards; }
.fx.in .rc-prog i { animation: rcprog 1.6s .3s ease-in-out forwards; }
.fx.in .rc-head em::after { animation: fadein .3s 1.95s forwards; }
.fx.in .rc-box { animation: rcbox .3s 2.3s forwards; }
@keyframes rcscroll { to { transform: translateY(-58%); } }
@keyframes rcprog { to { width: 100%; } }
@keyframes rcbox { to { background: var(--go); border-color: var(--go); color: #fff; } }
@media (prefers-reduced-motion: reduce) { .ia-bar i { width: var(--w) !important; } .ia-tip { opacity: 1 !important; transform: none !important; } .rc-head em::after { opacity: 1 !important; } }

/* 8. As custom as your imagination */
.imagine-art { flex-direction: column; gap: 14px; padding: 18px; }
.im-prompt { width: 100%; max-width: 560px; padding: 12px 14px; border-radius: 14px; background: var(--text); color: var(--bg); font-size: 14px; line-height: 1.4; display: flex; gap: 8px; }
.im-text { clip-path: inset(0 100% 0 0); }
.fx.in .im-text { animation: typein 1.6s .2s steps(40) forwards; }
.im-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 580px; }
.im-cloud i { font-style: normal; padding: 6px 11px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(8px) scale(.9); }
.im-cloud i:nth-child(3n+1) { border-color: color-mix(in srgb, var(--go) 45%, var(--line)); color: var(--go); }
.fx.in .im-cloud i { animation: chip .4s cubic-bezier(.34,1.56,.64,1) forwards; }
.fx.in .im-cloud i:nth-child(1) { animation-delay: 1.8s; } .fx.in .im-cloud i:nth-child(2) { animation-delay: 1.9s; } .fx.in .im-cloud i:nth-child(3) { animation-delay: 2s; } .fx.in .im-cloud i:nth-child(4) { animation-delay: 2.1s; }
.fx.in .im-cloud i:nth-child(5) { animation-delay: 2.2s; } .fx.in .im-cloud i:nth-child(6) { animation-delay: 2.3s; } .fx.in .im-cloud i:nth-child(7) { animation-delay: 2.4s; } .fx.in .im-cloud i:nth-child(8) { animation-delay: 2.5s; }
.fx.in .im-cloud i:nth-child(9) { animation-delay: 2.6s; } .fx.in .im-cloud i:nth-child(10) { animation-delay: 2.7s; } .fx.in .im-cloud i:nth-child(11) { animation-delay: 2.8s; } .fx.in .im-cloud i:nth-child(12) { animation-delay: 2.9s; }
@keyframes chip { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .la-code i { color: var(--text) !important; } .la-ok, .im-cloud i { opacity: 1 !important; transform: none !important; } .im-text { clip-path: none; } }

@keyframes typein { to { clip-path: inset(0 0 0 0); } }
@keyframes popin { to { opacity: 1; transform: scale(1); } }
@keyframes popin2 { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fadein { to { opacity: 1; } }
@keyframes fixglow { 0% { border-color: var(--line); } 30% { border-color: var(--wait); box-shadow: 0 0 0 4px var(--wait-soft); } 100% { border-color: var(--go); box-shadow: 0 0 0 4px var(--go-soft); } }
@keyframes slideup { to { transform: none; } }
@keyframes slideup2 { to { opacity: 1; transform: none; } }
@keyframes slidein { to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes nodeon { to { stroke: var(--go); fill: var(--go-soft); } }
@keyframes bar { to { width: 100%; } }
@keyframes typetext { to { background-size: 100% 100%; } }
@keyframes flow { to { stroke-dashoffset: -22; } }
@keyframes hub { 0%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--go) 14%, transparent), 0 16px 30px -10px rgba(22,163,74,.7); } 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--go) 6%, transparent), 0 16px 30px -10px rgba(22,163,74,.7); } }
@media (prefers-reduced-motion: reduce) { .pa-v i { clip-path: none; } .pa-row em, .pa-v s, .ra-item, .fa-f, .fa-ok, .fa-sig span, .sa-toast, .aa-app { opacity: 1 !important; transform: none !important; } .pa-btn b { transform: none; } .fa-bar i { width: 100%; } .fa-sig path, .logic-art .lk.on { stroke-dashoffset: 0; } .sa-type { background-size: 100% 100%; } .aa-app { transform: translate(-50%, -50%) !important; } }

/* Steps and cards */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
@media (max-width: 920px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.step::before { counter-increment: s; content: counter(s); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 800; font-size: 14px; margin-bottom: 16px; }
.step h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

.demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px) { .demos { grid-template-columns: 1fr; } }
.demo { display: flex; flex-direction: column; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.demo:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.demo-art { height: 190px; padding: 22px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.demo-body { padding: 18px 20px 20px; border-top: 1px solid var(--line); }
.demo-body h3 { margin: 0 0 4px; font-size: 18px; }
.demo-body p { margin: 0; color: var(--muted); font-size: 15px; }
.demo-body .go { margin-top: 12px; font-weight: 600; font-size: 14px; }
.demo.wide { grid-column: 1 / -1; flex-direction: row; }
.demo.wide .demo-art { flex: 1.2; height: auto; min-height: 230px; }
.demo.wide .demo-body { flex: 1; border-top: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; padding: 30px; }
.demo.wide .demo-body h3 { font-size: 24px; letter-spacing: -.02em; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--go); color: #fff; margin-bottom: 10px; width: fit-content; }
@media (max-width: 920px) { .demo.wide { flex-direction: column; } .demo.wide .demo-body { border-left: 0; border-top: 1px solid var(--line); } }
.art-paper { background: #fff; color: #111; }
.art-paper .t { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.art-paper .f { height: 34px; border: 1px solid #e6e6e6; border-radius: 6px; background: #f8f8f8; }
.art-paper .c { display: flex; gap: 8px; } .art-paper .c span { flex: 1; height: 30px; border: 1px solid #e6e6e6; border-radius: 6px; } .art-paper .c span.on { border: 2px solid #111; }
.art-focus { background: #1d3fbb; color: #fff; }
.art-focus .q { font-size: 20px; font-weight: 500; } .art-focus .q b { font-size: 13px; margin-right: 6px; }
.art-focus .n { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; } .art-focus .n span { height: 28px; border: 1px solid #8aa0f0; border-radius: 6px; font-size: 11px; display: grid; place-items: center; } .art-focus .n span.on { background: #fff; color: #1d3fbb; font-weight: 700; }
.art-ocean { background: #eaf4f8; color: #0b2733; justify-content: center; }
.art-ocean .card { background: #fff; border: 1px solid #cfe3ec; border-radius: 12px; padding: 16px; display: grid; gap: 10px; max-width: 420px; }
.art-ocean .r { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.art-ocean .r b { font-weight: 600; } .art-ocean .r span { color: #4f6b78; }
.art-ocean .chip { font-size: 11px; font-weight: 700; color: #0077a8; background: #e0f0f7; padding: 2px 8px; border-radius: 99px; }
.art-ocean .okb { margin-top: 4px; justify-self: start; background: #0077a8; color: #fff; font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 8px; }
.art-lavender { background: #f3efff; color: #2a1b5c; align-items: center; text-align: center; }
.art-lavender .q { font-weight: 700; font-size: 18px; }
.art-lavender .pics { display: flex; gap: 8px; } .art-lavender .pics img { width: 84px; height: 63px; object-fit: cover; border-radius: 10px; border: 2px solid transparent; } .art-lavender .pics img.on { border-color: #6c47ff; }
.art-sunrise { background: #fff4e8; color: #3b1d0e; font-family: Georgia, serif; }
.art-sunrise .q { font-size: 20px; } .art-sunrise .yn { display: flex; gap: 8px; } .art-sunrise .yn span { flex: 1; padding: 8px 10px; border: 1px solid #f3c9a8; border-radius: 14px; font-size: 13px; font-family: Inter, sans-serif; } .art-sunrise .yn span.on { background: #e8590c; border-color: #e8590c; color: #fff; }
.art-mono { background: #f4f4f0; color: #111; font-family: "JetBrains Mono", ui-monospace, monospace; }
.art-mono .t { font-weight: 700; } .art-mono .m { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 6px; font-size: 11px; align-items: center; }
.art-mono .m i { width: 14px; height: 14px; border: 1.5px solid #111; border-radius: 50%; justify-self: center; } .art-mono .m i.on { background: #111; }
.art-midnight { background: #0b0d12; color: #f2f4f8; }
.art-midnight .drop { flex: 1; border: 1.5px dashed #3a4150; border-radius: 12px; display: grid; place-items: center; color: #9aa3b2; font-size: 14px; }
.art-midnight .fl { display: flex; gap: 8px; } .art-midnight .fl span { flex: 1; height: 34px; border-radius: 8px; background: #151922; border: 1px solid #262c38; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 920px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.feat { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); transition: transform .2s, border-color .2s; }
.feat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.feat .ic { font-size: 24px; margin-bottom: 12px; }
.feat h3 { margin: 0 0 6px; font-size: 17px; }
.feat p { margin: 0; color: var(--muted); font-size: 15px; }


table { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 14px; color: var(--muted); font-weight: 600; background: var(--soft); }
tr:last-child td { border-bottom: 0; }
td.yes { font-weight: 600; } td.yes::before { content: "✓ "; color: var(--go); font-weight: 800; }
.table-wrap { overflow-x: auto; }

.connect { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 860px) { .connect { grid-template-columns: 1fr; } }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.box ol { margin: 0; padding-left: 20px; } .box li { margin: 8px 0; color: var(--muted); } .box li b { color: var(--text); }
.apps { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); margin-bottom: 18px; flex-wrap: wrap; }
.apps button { flex: 1; min-width: 90px; padding: 9px 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .15s; }
.apps button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.app-steps ol { margin: 0; padding-left: 20px; } .app-steps li { margin: 8px 0; color: var(--muted); } .app-steps li b { color: var(--text); }
.note { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); padding: 10px 12px; border-radius: 10px; background: var(--soft); }
.copy { display: flex; gap: 8px; margin-top: 16px; }
.copy code { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font: 500 15px "JetBrains Mono", ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy button { padding: 0 16px; border-radius: 10px; }
form.wait { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
form.wait input { flex: 1; min-width: 200px; padding: 12px 14px; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); outline: none; }
form.wait input:focus { border-color: var(--text); }
.ok { color: var(--go); font-weight: 600; margin-top: 10px; }
.err { color: #d92d20; margin-top: 10px; }



.final { padding: 104px 0 96px; }
/* Footer: brand and trust on the left, six link columns, and a large faded wordmark at the bottom. */
.ft { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: 72px 0 0; background: var(--soft); font-size: 14.5px; }
.ft-top { display: grid; grid-template-columns: 250px 1fr; gap: 56px; }
.ft-top > * { min-width: 0; }
.ft-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ft-logo .logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #16a34a, #0ea5e9); box-shadow: 0 8px 20px -8px rgba(22,163,74,.7); }
.ft-logo .logo svg { width: 18px; height: 18px; }
.ft-logo .word b { background: linear-gradient(90deg, #16a34a, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-brand p { margin: 14px 0 18px; color: var(--muted); line-height: 1.6; }
.ft-cta { padding: 10px 16px; font-size: 14.5px; }
.ft-trust { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.ft-trust li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.ft-trust span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--go-soft); color: var(--go); font-size: 10px; font-weight: 900; }
.ft-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 20px; }
.ft-col h4 { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ft-col a { color: var(--muted); text-decoration: none; transition: color .15s; }
.ft-col a:hover { color: var(--text); }
.ft-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding: 22px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.ft-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.ft-legal a { color: var(--muted); text-decoration: none; } .ft-legal a:hover { color: var(--text); }
.ft-word { margin: 0 0 -0.22em; text-align: center; font-size: clamp(80px, 19vw, 280px); font-weight: 900; letter-spacing: -.06em; line-height: 1; user-select: none; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 9%, transparent), transparent 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1100px) { .ft-top { grid-template-columns: 1fr; } .ft-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .ft-cols { grid-template-columns: repeat(2, 1fr); } .ft { padding-top: 56px; } }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 75% { transform: rotate(-18deg); } }
@keyframes rowin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* The right-click menu on the logo (see /brand-menu.js). */
.bm-menu { position: fixed; z-index: 100; min-width: 260px; padding: 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 15.5px; animation: bm-in .12s ease-out; }
.bm-menu a { display: block; padding: 9px 14px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; outline: none; }
.bm-menu a:hover, .bm-menu a:focus-visible { background: var(--soft); }
.bm-menu span { color: var(--faint); }
.bm-menu hr { height: 1px; margin: 6px 8px; border: 0; background: var(--line); }
@keyframes bm-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .bm-menu { animation: none; } }