/* Joyride marketing shell + landing sections. Depends on tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--paper); color: var(--ink-2);
font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 500; letter-spacing: -0.025em; margin: 0; line-height: 1.12; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wide { width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; }
.eyebrow { font-size: 12px; color: var(--ink-3); }
.tag { display: inline-block; font-size: 12px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--paper-3); color: var(--ink); }
.tag.blue { background: var(--blue); color: #fff; }
.lead { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); font-weight: 400; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.005em; transition: background-color .2s, color .2s, border-color .2s, transform .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--ink); color: #fff; }
.btn-white .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: #fff; }
/* Pill buttons (Elu-style: label with an arrow disc that slides from right to left on hover) */
.pill { --pill-h: 34px; display: inline-flex; align-items: center; height: var(--pill-h); padding: 1px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font-size: 11.5px; white-space: nowrap; cursor: pointer; text-decoration: none; }
.pill-blue { background: var(--blue); color: #fff; }
.pill-grey { background: var(--paper-3); color: var(--ink); padding-inline: 18px; transition: opacity .25s; }
.pill-grey:hover { opacity: .65; }
.pill-label { padding: 0 13px 0 15px; line-height: 1; }
.pill-slot { display: flex; align-items: center; height: 100%; overflow: hidden; flex: none; transition: width .7s cubic-bezier(.6, 0, .15, 1); }
.pill-slot.l { width: 12px; justify-content: flex-start; }
.pill-slot.r { width: 58px; justify-content: flex-end; }
.pill-arrow { width: 50px; height: 32px; border-radius: 999px; background: #fff; color: var(--blue); display: grid; place-items: center; flex: none; transition: opacity .45s .05s; }
.pill-slot.l .pill-arrow { opacity: 0; }
.pill-arrow svg { width: 11px; height: 11px; overflow: visible; }
.pill-arrow path { stroke: currentColor; fill: none; stroke-width: 1.2; }
.pill:hover .pill-slot.l, .pill:focus-visible .pill-slot.l { width: 58px; }
.pill:hover .pill-slot.r, .pill:focus-visible .pill-slot.r { width: 12px; }
.pill:hover .pill-slot.l .pill-arrow, .pill:focus-visible .pill-slot.l .pill-arrow { opacity: 1; }
.pill:hover .pill-slot.r .pill-arrow, .pill:focus-visible .pill-slot.r .pill-arrow { opacity: 0; }
.pill-blue .pill-arrow { color: var(--blue); }
.pill.pill-ink .pill-arrow { color: var(--ink); }
/* Toolbar (Elu-style): three parts spread across the frame at the top, then gathered into one glass pill on scroll */
.nav { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000; width: min(100vw, 1440px); height: 52px; padding: 0 40px; border-radius: 99px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: transparent; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); box-shadow: 0 0 0 0 rgba(255,255,255,0) inset; transition: width .65s cubic-bezier(.6, 0, .15, 1), height .65s cubic-bezier(.6, 0, .15, 1), padding .65s cubic-bezier(.6, 0, .15, 1), border-radius .65s cubic-bezier(.6, 0, .15, 1), background-color .45s cubic-bezier(.25, .1, .25, 1), box-shadow .45s, -webkit-backdrop-filter .45s, backdrop-filter .65s cubic-bezier(.6, 0, .15, 1); }
.nav[data-state="condensed"] { width: min(880px, calc(100vw - 40px)); padding: 0 8px 0 16px; background: rgba(201, 201, 201, .15); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 0 0 1px rgba(255,255,255,.45) inset, 0 10px 30px -18px rgba(10,23,64,.25); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; flex: none; }
.nav-logo { display: flex; align-items: center; gap: 8px; width: 160px; flex: none; color: var(--ink); font-weight: 600; letter-spacing: -0.03em; font-size: 17px; }
.nav-logo img { height: 25px; width: auto; }
.nav-tabs { display: flex; align-items: center; gap: 24px; }
.nav-tabs a { font-size: 14.5px; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; transition: color .25s; }
.nav-tabs a:hover, .nav-tabs a.active { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.nav-signin { font-size: 14.5px; color: var(--ink); transition: color .25s; }
.nav-signin:hover { color: var(--blue); }
.nav-menu { display: none; width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--ink); position: relative; flex: none; }
.nav-menu span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; transition: transform .35s var(--ease), top .35s var(--ease); }
.nav-menu span:first-child { top: 14px; } .nav-menu span:last-child { top: 20px; }
.nav[data-open="true"] .nav-menu span:first-child { top: 17px; transform: rotate(45deg); }
.nav[data-open="true"] .nav-menu span:last-child { top: 17px; transform: rotate(-45deg); }
.nav-sheet { display: none; flex-direction: column; width: 100%; padding: 6px 4px 10px; }
.nav-sheet a, .nav-sheet button { font: inherit; font-size: 17px; color: var(--ink); text-align: left; background: none; border: 0; padding: 12px 8px; border-radius: 10px; }
.nav-sheet a:hover, .nav-sheet button:hover { background: var(--blue-soft); color: var(--blue); }
.nav-sheet-signin { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px !important; }
.nav-sheet-contact { color: var(--blue) !important; font-weight: 500; }
@media (max-width: 1023px) {
.nav { top: 10px; height: 44px; padding: 0 8px 0 14px; width: min(100vw - 20px, 1440px); }
.nav-tabs, .nav-signin { display: none; }
.nav-logo { width: auto; }
.nav-menu { display: block; }
.nav[data-state="condensed"] { width: min(100vw - 20px, 885px); padding: 0 8px 0 14px; }
.nav[data-open="true"] { height: auto; border-radius: 22px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 16px 40px -20px rgba(10,23,64,.3); }
.nav[data-open="true"] .nav-sheet { display: flex; }
.nav[data-open="true"] .nav-inner { height: 44px; }
.nav-actions .pill { --pill-h: 34px; font-size: 12px; }
.nav-actions .pill-arrow { height: 32px; width: 50px; }
.nav-actions .pill-slot.r { width: 58px; }
}
@media (max-width: 480px) { .nav-actions { display: none; } }
/* Contact panel (slides in from the right like Sable's) */
.contact { position: fixed; top: 14px; right: 14px; z-index: 1100; width: min(360px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 20px 60px rgba(10,23,64,.18); transform: translateY(-10px); opacity: 0; transition: transform .6s var(--ease), opacity .2s; }
.contact.open { transform: none; opacity: 1; }
/* The closed sheet stays rendered for its fade, but inside the viewport, so it never widens the page. */
.contact[hidden] { display: block; pointer-events: none; }
.contact-head { display: flex; justify-content: space-between; align-items: center; font-size: 18px; color: var(--ink); }
.contact-close { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--ink-2); padding: 4px 8px; }
.contact-form { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.contact-form h3, .contact-done h3 { font-size: 16px; font-weight: 600; }
.contact-form label { display: grid; gap: 6px; font-size: 13px; color: var(--ink); }
.contact-form input, .contact-form select { font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink); }
.contact-form .btn { justify-self: end; }
.contact-done { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.contact-done a { color: var(--blue); }
/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Sections */
section { padding: 88px 0; }
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
.section-head p { font-size: 17px; color: var(--ink-2); max-width: 60ch; }
/* Hero: centered, two lines of large type, Elu proportions */
.hero { position: relative; z-index: 0; padding: 64px 0 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 400px; }
.hero-copy { width: min(100% - 2 * var(--gutter), 960px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.hero h1 { font-size: 64px; line-height: 1.02; font-weight: 500; letter-spacing: -0.03em; max-width: 960px; color: var(--ink); }
.hero-copy p { font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); max-width: 660px; }
.hero-cta { display: flex; align-items: center; gap: 4px; }
.rise { animation: rise-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.rise-1 { animation-delay: .05s; } .rise-2 { animation-delay: .18s; --rise-from: 16px; } .rise-3 { animation-delay: .3s; --rise-from: 16px; }
@keyframes rise-in { 0% { opacity: 0; transform: translateY(var(--rise-from, 14px)); } }
/* Demo stage: the gradient block in the page flow; site.js sets its size to the demo's aspect. */
.showcase { position: relative; margin: 0; padding: 0; }
.showcase-stage { position: relative; height: 100%; }
.showcase-slot { position: absolute; left: var(--bl, 0px); top: 0; width: var(--bw, 1090px); height: var(--bh, 599px); transform: translateY(var(--ty, 0px)) scale(var(--sx, 1), var(--sy, 1)); transform-origin: center; }
.showcase-slot.rest { transform: none; } .showcase-slot.moving { will-change: transform; }
.showcase-block { position: absolute; inset: 0; border-radius: var(--rx, 8px) / var(--ry, 8px); overflow: hidden; background: #0d2b8f; animation: showcase-in 1s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
@keyframes showcase-in { 0% { opacity: 0; transform: translateY(36px); } }
.gradient-layer { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: radial-gradient(60% 45% at 78% 22%, #5db3ff 0%, rgba(93,179,255,0) 60%), radial-gradient(45% 40% at 22% 84%, #1d3fbf 0%, rgba(29,63,191,0) 60%), radial-gradient(35% 30% at 55% 55%, #2e9bf5 0%, rgba(46,155,245,0) 65%), linear-gradient(115deg, #081a55 0%, #0d2b8f 38%, #1550d8 68%, #2e9bf5 100%); animation: gradient-drift 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes gradient-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-12%, -9%) scale(1.12); } }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .28; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
@keyframes blink { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gradient-layer, .stage-block, .rise { animation: none !important; } .scene { transition: none; } }
/* Mini figures used inside panes and functional sections */
/* Meet Joyride: three accordion items on the left, one figure pane on the right */
.meet { position: relative; background: var(--paper); }
.meet-wrap { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 56px; align-items: stretch; }
.meet-copy { padding-bottom: 0; }
.meet-wrap h2.lead { margin: 16px 0 0; font-weight: 400; }
.meet-wrap .lead { margin-top: 16px; }
.acc { margin-top: 28px; border-top: 1px solid var(--line-strong); }
.acc-item { border-bottom: 1px solid var(--line-strong); }
.acc-head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 22px 0; background: none; border: 0; text-align: left; }
.acc-head .tag { transition: background-color .3s, color .3s; }
.acc-head .plus { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: var(--paper-3); color: var(--ink); font-size: 16px; line-height: 1; transition: background-color .3s, color .3s, transform .3s; }
.acc-item.active .tag, .acc-item.active .plus { background: var(--blue); color: #fff; }
.acc-item.active .plus { transform: none; }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.acc-item.active .acc-body { max-height: 220px; }
.acc-body p { padding: 0 0 22px; max-width: 46ch; font-size: 17px; color: var(--ink-2); }
.acc-body .more { display: inline-block; margin: -10px 0 22px; font-size: 12px; color: var(--blue); }
.pane { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; min-width: 0; min-height: 0; container: pane / size; justify-self: stretch; align-self: stretch; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pane-item { grid-area: 1 / 1; min-width: 0; padding: 26px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s .5s; }
.pane-item.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 900px) { .meet-wrap { grid-template-columns: 1fr; } .meet-copy { padding-bottom: 0; } .pane { margin: 28px 0 0; height: auto; min-height: 0; width: 100%; container-type: inline-size; } }
.fig-title { font-size: 11px; color: var(--ink-3); display: flex; justify-content: space-between; }
.hbars { display: grid; gap: 10px; margin-top: 18px; }
.pane-item .hbars { flex: 1; align-content: space-evenly; margin-top: 8px; }
.pane-item > .fig-title + .hbars + .fig-title { margin-top: 8px; }
.pane-item .prompt-card { flex: 1; display: flex; flex-direction: column; }
.pane-item .prompt-card .ask { margin-top: auto; padding-top: 12px; }
.pane-item .flow { margin-top: auto; }
.pane-item .muted { margin-top: 14px; }
.hbar { display: grid; grid-template-columns: 120px 1fr 64px; align-items: center; gap: 12px; font-size: 13px; color: var(--ink); }
.hbar .track { height: 20px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.hbar .track i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 3px; transition: width 1.2s var(--ease); }
.hbar .val { font-size: 12px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.prompt-card { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 12px 14px; font-size: 13px; }
.prompt-card .who { font-size: 11px; color: var(--ink-3); display: flex; justify-content: space-between; }
.prompt-card p { margin-top: 6px; color: var(--ink); }
.prompt-card .ask { margin-top: 10px; display: flex; gap: 8px; }
.prompt-card .ask input { flex: 1; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; }
.prompt-card .ask button { font-size: 13px; padding: 8px 12px; }
.tree { font-family: var(--font-mono); font-size: 13px; line-height: 1.9; color: var(--ink); }
.tree .m { color: var(--ink-3); }
.tree .k { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--c); color: #fff; font-family: var(--font-sans); font-size: 11px; font-weight: 600; margin-left: 6px; }
@supports (background: color-mix(in srgb, red, blue)) { .tree .k { background: color-mix(in srgb, var(--c) 16%, white); color: var(--ink); } }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.flow .node { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--paper-2); font-size: 13px; }
.flow .node b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.flow .node .mono { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); display: block; margin-top: 4px; }
.ring { width: 96px; height: 96px; }
.ring circle { fill: none; stroke-width: 10; }
.ring .bg { stroke: var(--paper-3); }
.ring .fg { stroke: var(--blue); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 1.4s var(--ease); }
/* Steps carousel (How to get started) */
.steps { background: var(--paper-2); overflow: hidden; }
.steps-nav { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.steps-nav .tag { cursor: pointer; }
.steps-nav .tag.on { background: var(--blue); color: #fff; }
.steps h2 { text-align: center; font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 40px; }
.track { position: relative; height: 372px; --cw: min(696px, 72vw); }
.stage { position: absolute; top: 0; left: 50%; width: var(--cw); margin-left: calc(var(--cw) / -2); min-height: 340px; display: flex; gap: 32px; padding: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transform: translateX(var(--x, 0px)) scale(var(--s, 1)); opacity: var(--o, 1); z-index: var(--z, 1); transition: transform .9s var(--ease), opacity .9s var(--ease), border-color .2s; }
.stage.is-active { cursor: default; border-color: var(--line-strong); box-shadow: 0 20px 50px -30px rgba(10,23,64,.25); }
.stage:not(.is-active):hover { opacity: .75; }
.stage .col { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; max-width: 232px; }
.stage .num { color: var(--ink-3); }
.stage p { font-size: 15px; color: var(--ink-2); }
.stage .art { flex: 1; min-width: 0; margin: -32px -32px -32px 0; border-radius: 0 12px 12px 0; background: #fff; border-left: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.steps-arrows { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.steps-arrows button { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-size: 16px; }
.steps-arrows button:hover { background: var(--ink); color: #fff; }
/* The steps sit on the page's paper; the cards stay white, and each card's picture is one quiet frame that retells a
stage of the onboarding walkthrough: connect a repository, run one command, connect where you ask. */
.steps { position: relative; padding: 120px 0 128px; color: var(--ink); background: var(--paper); }
.steps .wide { position: relative; }
.stage { background: #fff; color: var(--ink); }
.stage.is-active { box-shadow: 0 1px 2px rgba(10,23,64,.04), 0 30px 60px -36px rgba(10,23,64,.35); }
.stage .art { background: var(--paper); }
.track { height: 392px; --cw: min(820px, 80vw); }
.stage { min-height: 360px; }
.stage .col { justify-content: center; gap: 10px; max-width: 250px; flex: none; }
.stage .col h3 { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.stage .col p { margin-top: 12px; }
.stage .num { font-size: 12.5px; font-weight: 500; color: var(--blue); }
/* Step 1: the setup pull request as GitHub shows it, down to the merge box */
.gs-gh { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: #1f2328; }
.gs-gh-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .gs-gh-title span { font-weight: 400; color: #59636e; }
.gs-gh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #59636e; }
.gs-arrow { color: #59636e; }
.gs-gh-meta code { padding: 1px 6px; border-radius: 6px; background: #ddf4ff; color: #0969da; font-size: 11px; }
.gs-open { padding: 3px 10px 3px 8px; border-radius: 999px; background: #1f883d; color: #fff; font-weight: 500; }
.gs-gh-merge { display: grid; gap: 10px; padding: 12px; border: 1px solid #1f883d; border-radius: 6px; }
.gs-gh-ok { display: flex; gap: 10px; align-items: center; }
.gs-gh-ok i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #1f883d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.gs-gh-ok b { display: block; font-weight: 600; } .gs-gh-ok span { color: #59636e; }
.gs-gh-btn { justify-self: start; padding: 6px 14px; border-radius: 6px; background: #1f883d; color: #fff; font-weight: 600; box-shadow: 0 0 0 3px rgba(31,136,61,.18); }
/* Step 2: the installer's real output in a terminal window */
.gs-term { border-radius: 10px; overflow: hidden; background: #0f1320; box-shadow: 0 18px 40px -24px rgba(10,23,64,.5); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: #d7dbe6; }
.gs-term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #1a1f2e; }
.gs-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a4155; }
.gs-term-bar span { margin-left: auto; margin-right: auto; font-family: var(--font-sans); color: #8b93a7; transform: translateX(-12px); }
.gs-term-body { padding: 12px 14px 14px; }
.gs-term-body > div { display: grid; grid-template-columns: 17ch 1fr; white-space: nowrap; }
.gs-term-body > div > span { color: #8b93a7; }
.gs-term-body .gs-term-cmd { display: block; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.gs-term-body .gs-term-cmd span { color: #7aa2ff; margin-right: 8px; }
.gs-term-body .gs-term-ok { display: block; margin-top: 8px; color: #4ade80; font-weight: 600; }
.gs-term-body .gs-term-cmd:last-child { margin-top: 8px; }
.gs-caret { display: inline-block; width: 7px; height: 13px; vertical-align: -2px; background: #d7dbe6; animation: gs-blink 1.1s steps(1) infinite; }
@keyframes gs-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gs-caret { animation: none; } }
/* Step 3: the onboarding's "Choose where to ask questions" task, drawn in HTML so it stays sharp */
.gs-ask { display: grid; gap: 12px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; color: var(--ink); }
.gs-ask-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gs-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.gs-choice:not(.on):hover { border-color: var(--ink-3); }
.gs-choice.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.gs-choice b { font-weight: 600; }
.gs-ico { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--paper); display: grid; place-items: center; }
.gs-ico::before { content: ""; width: 13px; height: 13px; background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.gs-ico.gh { --m: url("/assets/img/logos/harness/github.svg"); }
.gs-ico.term::before { content: ">_"; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; font: 600 10px/1 var(--font-mono); color: var(--ink); }
.gs-choice.on .gs-ico { background: var(--blue-soft); }
.gs-agents { display: flex; gap: 6px; }
.gs-agents button, .gs-agents span { display: inline-flex; background: #fff; font: inherit; color: var(--ink); cursor: pointer; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; }
.gs-agents button::before { content: ""; width: 12px; height: 12px; background: var(--ink-2); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.gs-agents .cc { --m: url("/assets/img/logos/harness/claude-code.svg"); } .gs-agents .cx { --m: url("/assets/img/logos/harness/codex.svg"); } .gs-agents .cu { --m: url("/assets/img/logos/harness/cursor.svg"); }
.gs-agents .ch { cursor: default; }
.gs-agents button, .gs-agents span { white-space: nowrap; }
@media (max-width: 360px) { .gs-agents { gap: 4px; } .gs-agents button, .gs-agents span { padding: 5px 9px; } .gs-agents button::before { display: none; } }
.gs-agents .on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-ink); } .gs-agents .on::before { background: var(--blue); }
.gs-snippet { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.gs-snippet-head { display: flex; justify-content: space-between; padding: 7px 12px; background: #fafaf8; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); }
/* Every choice's panel shares one grid cell, so the box keeps the tallest panel's size whichever is shown */
.gs-stack { display: grid; }
.gs-stack > * { grid-area: 1 / 1; }
.gs-stack > [hidden] { display: grid; visibility: hidden; }
.gs-where { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.gs-snippet { display: flex; flex-direction: column; }
.gs-snippet .gs-note { margin-top: auto; }
.gs-snippet pre { margin: 0; padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.gs-note { margin: 0; padding: 0 12px 10px; font-size: 11.5px; color: var(--ink-3); }
.stage .gs-note { font-size: 11.5px; color: var(--ink-3); }
.gs-list { margin: 0; padding: 10px 12px 8px 30px; display: grid; gap: 4px; font-size: 12px; line-height: 1.5; }
.gs-list code { padding: 1px 5px; border-radius: 4px; background: var(--paper); font-family: var(--font-mono); font-size: 11px; }
.gs-list b { font-weight: 600; }
@media (max-width: 900px) {
.gs-ask-choices { gap: 8px; } .gs-choice { padding: 10px; }
.gs-term { font-size: 9.5px; }
.gs-term-body > div { grid-template-columns: 16ch 1fr; }
}
@media (max-width: 760px) { .track { --cw: 88vw; height: 560px; } .stage { flex-direction: column-reverse; } .stage .art { margin: -32px -32px 0; border-radius: 12px 12px 0 0; border-left: 0; border-bottom: 1px solid var(--line); } }
/* Figures grid (what a report shows) */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.figure { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; min-height: 340px; display: flex; flex-direction: column; gap: 14px; }
.figure h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.figure p.cap { font-size: 13.5px; color: var(--ink-2); max-width: 52ch; }
.figure .body { flex: 1; display: flex; flex-direction: column; }
.figure .mid { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.figure .foot { margin-top: auto; padding-top: 14px; }
.figure .body .foot { margin-top: auto; }
.figure .body > .tree { margin-bottom: 0; }
.figure.cost .stack { height: 16px; margin: 12px 0 12px; }
.figure .mid > .stack, .figure .mid > table { flex: none; }
.figure.cost table.srcs { font-size: 14px; }
.figure.cost table.srcs td { padding: 12px 10px; }
.figure.cost table.srcs th { padding: 8px 10px 10px; }
.figure.cost .big { font-size: 40px; color: var(--ink); letter-spacing: -.03em; font-weight: 500; display: flex; align-items: baseline; gap: 10px; }
@media (max-width: 900px) { .figs { grid-template-columns: 1fr; } }
table.srcs { width: 100%; border-collapse: collapse; font-size: 13px; }
table.srcs th { font-size: 11px; color: var(--ink-3); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); font-weight: 500; }
table.srcs td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
table.srcs td.num, table.srcs th.num { text-align: right; }
table.srcs .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; background: var(--c); }
.stack { display: flex; gap: 2px; height: 12px; border-radius: 3px; overflow: hidden; margin: 10px 0 8px; }
.stack i { display: block; height: 100%; width: 0; background: var(--c); transition: width 1.2s var(--ease); }
/* Compare */
.compare { background: var(--paper); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
table.cmp th, table.cmp td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; }
table.cmp th { font-size: 11px; color: var(--ink-3); font-weight: 500; }
table.cmp th.jr { color: var(--blue); }
table.cmp td { color: var(--ink); }
table.cmp td.jr { background: var(--blue-soft); font-weight: 500; }
table.cmp .no { color: var(--ink-3); }
table.cmp .part { color: var(--p6); }
/* Arena CTA (full-bleed image) */
.arena { position: relative; padding: 0; height: clamp(560px, 34vw, 700px); display: flex; align-items: center; overflow: hidden; }
.arena img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.arena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,23,64,.62) 0%, rgba(10,23,64,.28) 45%, rgba(10,23,64,0) 75%); }
.arena .container { position: relative; z-index: 1; padding: 120px 0; }
.arena h2 { color: #fff; font-size: clamp(28px, 3.6vw, 44px); max-width: 16ch; }
.arena h2 span { color: rgba(255,255,255,.55); display: block; }
.arena .btn { margin-top: 28px; }
/* Footer */
.footer { padding: 0; }
.gradient-panel { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 15%, #1b58cc 0%, rgba(27,88,204,0) 55%), radial-gradient(80% 70% at 20% 90%, #1d3fbf 0%, rgba(29,63,191,0) 60%), linear-gradient(110deg, #081a55 0%, #0d2b8f 40%, #1550d8 70%, #2a86ea 100%); color: #fff; padding: 56px var(--gutter) 0; }
.gradient-panel::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; }
.footer-links { position: relative; display: flex; justify-content: flex-end; gap: clamp(20px, 5vw, 72px); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; width: min(100%, 1440px); margin-inline: auto; }
.footer-links a:hover { text-decoration: underline; }
.footer-wordmark { position: relative; display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 28px); width: min(100%, 1440px); margin: clamp(48px, 7vw, 104px) auto 0; font-size: clamp(96px, 20vw, 300px); font-weight: 600; letter-spacing: -0.05em; line-height: .92; color: #fff; overflow: visible; height: auto; padding-bottom: .02em; }
.footer-wordmark .footer-mark { width: .72em; height: .72em; margin-bottom: .04em; }
.footer-wordmark span { white-space: nowrap; }
.footer-wordmark { padding-bottom: 40px; }
/* Generic page (docs/blog/teams headers) */
.page-head { padding: 140px 0 36px; }
.page-head h1 { font-size: clamp(34px, 5vw, 56px); }
/* Landed-and-retained figure: ring beside bars */
.figure .mid.mid-ring { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; }
.mid-ring .eyebrow { margin-top: 8px; }
.mid-ring .hbars { margin: 0; }
.cmp-wrap { overflow: auto; }
/* ============================================================
Small screens (tablet and phone, ≤ 900px). Nothing below
touches desktop: every rule is scoped to a max-width query.
============================================================ */
@media (max-width: 900px) {
/* Contact sheet fills the width */
.contact { top: 10px; right: 10px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
/* Section rhythm */
section { padding: 64px 0; }
.section-head { gap: 12px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(28px, 7.6vw, 40px); }
.section-head p { font-size: 16px; }
.lead { font-size: clamp(21px, 5.6vw, 28px); }
.page-head { padding: 112px 0 28px; }
/* Hero and demo stage */
/* Phones keep the hero proportions: about 60px above the copy and below the pills, 22px between the copy lines. */
.hero { padding: 114px 0 60px; min-height: 0; height: auto !important; }
.hero-copy { gap: 22px; }
.hero h1 { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.02; }
.hero-copy p { font-size: 15.5px; max-width: 34ch; }
.hero-cta { flex-wrap: wrap; justify-content: center; }
.showcase { margin-top: 0; }
.fig-title { flex-wrap: wrap; gap: 2px 12px; }
.fig-title > span:last-child { opacity: .85; }
/* Bars: label and value on one row, the bar underneath */
.hbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; gap: 4px 10px; font-size: 13px; }
.hbar > span:first-child { grid-area: l; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { grid-area: t; height: 14px; }
.hbar .val { grid-area: v; }
/* Code and trees: scroll sideways inside their card, never the page */
.prompt-card .who { flex-wrap: wrap; gap: 2px 10px; }
.prompt-card .ask input { min-width: 0; }
.flow { grid-template-columns: 1fr; gap: 8px; }
.flow .node b { display: inline; margin-right: 8px; }
.flow .node .mono { margin-top: 3px; }
.tree { font-size: 12px; line-height: 1.7; }
.tree > div { padding-left: 1.5em; text-indent: -1.5em; }
.tree .k { text-indent: 0; }
/* Report figures */
.figs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.figure { min-width: 0; min-height: 0; padding: 18px 16px; gap: 12px; }
.figure h3 { font-size: 17px; }
.figure p.cap { font-size: 13px; }
.figure .mid { justify-content: flex-start; }
.figure .foot { padding-top: 12px; }
.figure.cost .big { font-size: 34px; }
.figure.cost table.srcs { font-size: 12.5px; }
.figure.cost table.srcs td { padding: 9px 6px; }
.figure.cost table.srcs th { padding: 6px 6px 8px; }
.figure .mid.mid-ring { grid-template-columns: 1fr; gap: 14px; }
.mid-ring > div:first-child { display: flex; align-items: center; gap: 14px; }
.mid-ring .eyebrow { margin-top: 0; }
.ring { width: 72px; height: 72px; }
.legend { gap: 8px 12px; font-size: 10.5px; }
/* Compare: one card per capability instead of a sideways table */
.cmp-wrap { overflow: visible; }
table.cmp, table.cmp tbody, table.cmp tr, table.cmp td { display: block; }
table.cmp thead { display: none; }
table.cmp tr { padding: 18px 0 14px; border-bottom: 1px solid var(--line-strong); }
table.cmp tbody tr:first-child { border-top: 1px solid var(--line-strong); }
table.cmp td { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 7px 0; border: 0; font-size: 14px; line-height: 1.4; }
table.cmp td::before { font-size: 10.5px; color: var(--ink-3); padding-top: 3px; }
table.cmp td:first-child { display: block; font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); padding: 0 0 10px; }
table.cmp td:first-child::before { content: none; }
table.cmp td:nth-child(2)::before { content: "Joyride"; color: var(--blue); }
table.cmp td:nth-child(3)::before { content: "Git AI"; }
table.cmp td:nth-child(4)::before { content: "DX"; }
table.cmp td:nth-child(5)::before { content: "Weave"; }
table.cmp td:nth-child(6)::before { content: "Faros"; }
table.cmp td.jr { background: var(--blue-soft); border-radius: 8px; padding: 9px 10px; margin: 2px 0 4px; }
/* Arena: darker wash so the headline reads over the image */
.arena { min-height: 480px; height: auto; }
.arena img.bg { object-position: 62% 62%; }
.arena .container { padding: 88px 0 72px; }
.arena::after { background: linear-gradient(180deg, rgba(10,23,64,.72) 0%, rgba(10,23,64,.42) 55%, rgba(10,23,64,.15) 100%); }
.arena img.bg { object-position: 62% 50%; }
.arena h2 { font-size: clamp(28px, 7.8vw, 40px); max-width: none; }
.arena .btn { margin-top: 22px; }
/* Footer: wordmark scaled to the viewport, links left-aligned */
.gradient-panel { padding-top: 40px; }
.footer-links { justify-content: flex-start; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
.footer-wordmark { margin-top: 56px; font-size: clamp(56px, 17.5vw, 300px); gap: 8px; }
}
@media (max-width: 760px) {
/* Meet: pane grows with its content instead of a fixed height */
.meet-wrap { gap: 28px; }
.acc { margin-top: 20px; }
.acc-head { padding: 18px 0; }
.acc-item.active .acc-body { max-height: 420px; }
.acc-body p { font-size: 15.5px; }
.pane { margin: 0; height: auto; min-height: 0; }
.pane-item { display: none; position: static; min-width: 0; padding: 18px 16px; }
.pane-item.active { display: flex; animation: pane-in .45s var(--ease); }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } }
.pane-item .hbars { gap: 12px; margin-top: 12px; }
.pane-item > .fig-title + .hbars + .fig-title { margin-top: 22px; }
.pane-item .flow { margin-top: 16px; }
.fig-title { flex-wrap: wrap; gap: 2px 12px; }
/* Steps: one card at a time, sized to its content, swipeable */
.steps h2 { margin-bottom: 26px; }
.steps-nav { margin-bottom: 14px; }
.track { --cw: calc(100vw - 48px); height: auto; min-height: 0; transition: height .5s var(--ease); touch-action: pan-y; }
.stage { padding: 20px; gap: 16px; min-height: 0; flex-direction: column-reverse; }
.stage:not(.is-active) { opacity: 0 !important; pointer-events: none; }
.stage .col { max-width: none; gap: 12px; }
.stage .art { flex: none; margin: -20px -20px 0; border-radius: 12px 12px 0 0; border-left: 0; border-bottom: 1px solid var(--line); padding: 16px; }
.stage p { font-size: 14.5px; }
.steps-arrows { margin-top: 16px; }
}
@media (max-width: 640px) {
.figure.cost table.srcs th:nth-child(3), .figure.cost table.srcs td:nth-child(3),
.figure.cost table.srcs th:nth-child(5), .figure.cost table.srcs td:nth-child(5) { display: none; }
.nav-actions .btn { padding-inline: 12px; }
}
/* ---- Labels and chips (B2B): sans-serif, sentence case, chips for small subtitle text; mono stays with code and terminals ---- */
.eyebrow { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.chip, .eyebrow.chip { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.chip.blue { background: var(--blue-soft); color: var(--blue); }
.tag { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 6px 12px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); line-height: 1.2; }
.tag.blue, .tag.on { background: var(--blue); color: #fff; }
.acc-item.active .tag { background: var(--blue); color: #fff; }
.pill { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pill-label { padding: 0 15px 0 16px; }
.fig-title { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fig-title > span + span { font-size: 12px; font-weight: 500; color: var(--chip-ink); background: var(--chip); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.hbar { font-size: 13px; }
.hbar .val { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.prompt-card .who { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.stage .num { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
table.srcs th, table.cmp th { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
table.cmp th.jr { color: var(--blue); font-weight: 600; }
.acc-body .more { font-family: var(--font-sans); font-size: 13px; font-weight: 500; }
.figure .foot.eyebrow, .figure .eyebrow.foot { font-size: 12.5px; color: var(--ink-3); }
.mid-ring .eyebrow { font-weight: 600; color: var(--ink); }
.figure.cost .big .eyebrow { font-size: 13px; }
.figure .legend, .pane-item .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); }
.figure .legend span, .pane-item .legend span { display: inline-flex; align-items: center; gap: 7px; }
.figure .legend span::before, .pane-item .legend span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.prompt-card .who { flex-wrap: wrap; gap: 4px 10px; }
.prompt-card .who > span + span { padding: 3px 8px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-size: 11.5px; }
/* ---- Use cases pane figures ---- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.kpi { border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 11px; min-width: 0; }
.kpi span { display: block; font-size: 12px; color: var(--ink-3); }
.kpi b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.gh-diff { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.gh-file { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: 12px; }
.gh-stat b { color: #1a7f37; font-weight: 600; } .gh-stat i { color: #cf222e; font-style: normal; }
.gh-row { display: grid; grid-template-columns: 6px 34px 1fr; align-items: stretch; }
.gh-row.hl { background: var(--blue-soft); }
.gh-mark { background: var(--c); }
.gh-n { color: var(--ink-3); text-align: right; padding-right: 10px; user-select: none; }
.gh-t { white-space: pre; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; color: var(--ink); }
.gh-t.add { background: rgba(26, 127, 55, .08); }
.gh-row.hl .gh-t.add { background: transparent; }
.review-card { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 12px 14px; font-size: 13px; }
.review-card .q { margin-top: 8px; font-weight: 600; color: var(--ink); }
.review-card .a { margin-top: 6px; color: var(--ink); }
.review-card .src { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.cite { color: var(--blue); font-weight: 600; font-size: 12px; }
.agents { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.agents > span:first-child { margin-right: 4px; }
/* ---- Features: four boxes on the brand gradient, after Clipbook's feature rows. Each feature is one 1280x600 box with a
528px text panel (48px padding) and a 688px visual panel that its illustration fills; the sides alternate on every row. Every
box uses the site's light scheme, so the text is always ink on white. ---- */
.features { position: relative; overflow: hidden; padding: 80px 0; background-color: #111220; background-image: radial-gradient(70% 50% at 50% -5%, rgba(36,85,214,.42) 0%, rgba(36,85,214,0) 70%), radial-gradient(45% 35% at 100% 100%, rgba(127,75,243,.18) 0%, rgba(127,75,243,0) 70%), linear-gradient(180deg, #15172b 0%, #111220 40%, #0f1019 100%); }
.features::before { content: ""; position: absolute; inset: 0; opacity: .07; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; }
.features-wrap { position: relative; width: min(100% - 80px, 1280px); margin-inline: auto; }
.feature { display: flex; align-items: stretch; min-height: 560px; background: #fff; color: var(--ink); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 100px -40px rgba(3,10,40,.6); }
.feature + .feature { margin-top: 96px; }
.feature:nth-of-type(even) { flex-direction: row-reverse; }
.feature-copy { flex: 0 0 528px; padding: 44px 48px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.feature-copy h3 { margin-top: 18px; font-size: 36px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; color: var(--ink); }
.feature-copy p { margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.feature-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.feature-points li { display: flex; align-items: baseline; gap: 10px; }
.feature-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; transform: translateY(-2px); }
.feature-copy .more { display: inline-block; margin-top: 22px; font-size: 13.5px; font-weight: 500; color: var(--blue); }
.feature-art { flex: 1; min-width: 0; display: flex; align-items: center; padding: 28px; background: var(--paper); border-left: 1px solid var(--line); container-type: inline-size; }
.feature:nth-of-type(even) .feature-art { border-left: 0; border-right: 1px solid var(--line); }
.fa { position: relative; width: 100%; box-sizing: border-box; padding: 2.8cqw 3cqw; font-size: 2cqw; line-height: 1.45; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -28px rgba(10,23,64,.35); overflow: hidden; }
.fa .mono, .fa code, .fa-term, .fa-tools b { font-family: var(--font-mono); }
.fa-bar { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-bottom: .9em; border-bottom: 1px solid var(--line); }
.fa-crumb { font-size: .9em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-tab { font-size: .82em; font-weight: 600; padding: .35em .8em; border-radius: 999px; background: var(--chip); color: var(--chip-ink); white-space: nowrap; }
.fa-tab.on { background: var(--blue); color: #fff; }
.fa-file { display: flex; justify-content: space-between; align-items: center; margin-top: .9em; padding: .55em .9em; background: var(--paper); border: 1px solid var(--line); border-bottom: 0; border-radius: .6em .6em 0 0; font-family: var(--font-mono); font-size: .86em; }
.fa-stat b { color: #1a7f37; font-weight: 600; } .fa-stat i { color: #cf222e; font-style: normal; }
.fa-rows { border: 1px solid var(--line); border-radius: 0 0 .6em .6em; overflow: hidden; font-family: var(--font-mono); font-size: .88em; line-height: 1.6; }
.fa-rows.small { border-radius: .6em; margin-top: .9em; font-size: .84em; }
.fa-row { display: grid; grid-template-columns: .45em 2.4em 1fr; align-items: stretch; }
.fa-row i { background: var(--c); }
.fa-row span { color: var(--ink-3); text-align: right; padding-right: .8em; user-select: none; }
.fa-row code { white-space: pre; overflow: hidden; text-overflow: ellipsis; padding-right: 1em; }
.fa-row.is-add code { background: rgba(26, 127, 55, .08); }
.fa-row.is-sel { background: var(--blue-soft); } .fa-row.is-sel code { background: transparent; }
.fa-tip { position: absolute; right: 3cqw; top: 46%; transform: translateY(-50%); transition: top .18s var(--ease); pointer-events: none; display: flex; flex-direction: column; gap: .15em; padding: .7em .9em; background: #fff; border: 1px solid var(--line-strong); border-radius: .6em; box-shadow: 0 12px 30px -12px rgba(10,23,64,.35); font-size: .84em; max-width: 46%; }
.fa-tip b { display: flex; align-items: center; gap: .5em; font-weight: 600; }
.fa-tip > span:last-child { color: var(--ink-3); }
.fa-dot { position: absolute; left: -.35em; top: 1em; width: .7em; height: .7em; border-radius: 50%; background: var(--c); border: 2px solid #fff; }
.fa-legend { display: flex; flex-wrap: wrap; gap: .5em 1.2em; margin-top: 1em; font-size: .84em; color: var(--ink-2); }
.fa-legend span[style] { display: inline-flex; align-items: center; gap: .5em; }
.fa-legend span[style]::before { content: ""; width: .7em; height: .7em; border-radius: 2px; background: var(--c); flex: none; }
.fa-pill { padding: .3em .75em; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-weight: 500; }
.fa-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.fa-head b { font-size: 1.05em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-chip { font-size: .8em; font-weight: 500; padding: .3em .75em; border-radius: 999px; background: var(--chip); color: var(--chip-ink); white-space: nowrap; }
.fa-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; margin-top: 1.1em; }
.fa-kpis > div { border: 1px solid var(--line); border-radius: .7em; padding: .8em .9em; min-width: 0; }
.fa-kpis span { display: block; font-size: .8em; color: var(--ink-3); }
.fa-kpis b { display: block; margin-top: .2em; font-size: 1.7em; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fa-kpis small { display: block; margin-top: .15em; font-size: .76em; color: var(--ink-3); }
.fa-sub { margin-top: 1.2em; font-size: .86em; font-weight: 600; }
.fa-bars { display: grid; gap: .55em; margin-top: .6em; }
.fa-hbar { display: grid; grid-template-columns: 11em 1fr 4.6em; align-items: center; gap: .8em; font-size: .88em; }
.fa-hbar > div { height: 1.1em; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.fa-hbar i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 3px; }
.fa-hbar b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; } .fa-hbar b.muted { color: var(--ink-3); font-weight: 400; }
.fa-stack { display: flex; gap: 2px; height: .9em; margin-top: .6em; border-radius: 3px; overflow: hidden; }
.fa-stack i { display: block; height: 100%; width: var(--w); background: var(--c); }
.fa-turns { margin-top: 1em; border-top: 1px solid var(--line); }
.fa-turn { display: grid; grid-template-columns: 5.6em 1fr; gap: .8em; align-items: start; padding: .6em 0; border-bottom: 1px solid var(--line); font-size: .9em; }
.fa-turn p { margin: 0; color: var(--ink); } .fa-turn.tool p { color: var(--ink-2); font-family: var(--font-mono); font-size: .92em; }
.fa-k { display: inline-flex; justify-content: center; padding: .25em .6em; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-size: .82em; font-weight: 600; }
.fa-k.you { background: var(--blue-soft); color: var(--blue); } .fa-k.bot { background: #efe8ff; color: #5b2fd6; }
.fa-ask { margin-top: 1em; display: grid; gap: .35em; padding: .8em .9em; border: 1px solid var(--line); border-radius: .7em; background: var(--paper); font-size: .9em; }
.fa-q { font-weight: 600; } .fa-a { color: var(--ink-2); } .fa-cite { color: var(--blue); }
.fa-int-gh, .fa-int-mcp { position: relative; border: 1px solid var(--line); border-radius: .8em; padding: .9em 1em 1em; min-width: 0; }
.fa-float { display: inline-flex; align-items: center; gap: .5em; margin-top: 1em; padding: .5em .9em; border-radius: 999px; background: var(--blue); color: #fff; font-size: .82em; font-weight: 500; box-shadow: 0 10px 24px -12px rgba(36,85,214,.6); }
.fa-mark { width: .9em; height: .9em; border-radius: 50%; background: #fff; }
.fa-caption { margin-top: .9em; font-size: .78em; color: var(--ink-3); }
.fa-term { padding: .7em .9em; border-radius: .6em; background: var(--paper); border: 1px solid var(--line); color: var(--ink); font-size: .78em; line-height: 1.5; word-break: break-all; }
.fa-prompt { color: var(--blue); margin-right: .4em; }
.fa-tools { margin-top: .8em; }
.fa-tools > div { display: grid; gap: .1em; padding: .45em 0; border-bottom: 1px solid var(--line); font-size: .82em; }
.fa-tools b { font-weight: 500; } .fa-tools span { color: var(--ink-3); }
.fa-int .fa-legend { margin-top: .9em; }
@media (max-width: 1100px) { .feature-copy { flex-basis: 46%; padding: 32px; } .feature-copy h3 { font-size: 30px; } .feature { min-height: 520px; } }
@media (max-width: 900px) {
.features { padding: 56px 0; }
.features-wrap { width: min(100% - 2 * var(--gutter), 1280px); }
.feature, .feature:nth-of-type(even) { flex-direction: column; height: auto; min-height: 0; }
.feature + .feature { margin-top: 40px; }
.feature-copy { flex: none; padding: 28px 24px 8px; }
.feature-copy h3 { font-size: 28px; }
.feature-art, .feature:nth-of-type(even) .feature-art { padding: 20px; border: 0; border-top: 1px solid var(--line); margin-top: 24px; }
.fa { font-size: 2.4cqw; padding: 3.4cqw; }
.fa-tip { position: static; max-width: none; margin-top: .9em; }
.fa-dot { display: none; }
.kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .fa { font-size: 3cqw; } .fa-hbar { grid-template-columns: 8em 1fr 4.2em; } }
/* The headline breaks after "code" on desktop; phones wrap it naturally. */
.hero-br { display: inline; }
@media (max-width: 760px) { .hero-br { display: none; } }
/* ---- Demo: five screen captures with live copy, a cursor, a browser tab strip drawn in, and the Joyride selection card.
Overlays are positioned in percentages of the capture (1985 x 1116 window pixels); 1em = 16 of those pixels. ---- */
.demo { position: absolute; left: var(--dl, 4.5%); top: var(--dt, 4.5%); width: var(--dw, 91%); height: var(--dh, auto); aspect-ratio: 1985 / 1180; container-type: inline-size; font-family: var(--font-sans); color: var(--ink); background: #fff; border-radius: clamp(4px, .55vw, 9px); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(3,10,40,.55), 0 0 0 1px rgba(255,255,255,.35); transition: opacity .4s; }
.demo-stage { position: absolute; inset: 0 0 3.22cqw; overflow: hidden; background: #1f2020; }
.sc { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; font-size: .806cqw; line-height: 1.4; pointer-events: none; }
.demo.s1 .sc-slack, .demo.s6 .sc-slack, .demo.s2 .sc-prov, .demo.s3 .sc-prattr, .demo.s4 .sc-gh, .demo.s5 .sc-thru { opacity: 1; }
.sc > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: auto; }
.ov { position: absolute; box-sizing: border-box; overflow: hidden; }
.cv-white { background: #fff; } .cv-purple { background: #542c58; } .cv-gh { background: #0d1116; } .cv-paper { background: #fbfbfa; }
.cv-url { background: #282828; color: #e3e3e3; font-size: 1.05em; display: flex; align-items: center; padding-left: .15em; white-space: nowrap; }
.cv-side { background: #f3f2ef; color: var(--ink); font-size: 1.1em; display: flex; align-items: center; padding-left: .15em; }
.cur { display: inline-block; width: 2px; height: 1.1em; background: currentColor; margin-left: 2px; vertical-align: -.15em; }
.av-p { background: #6e40c9; } .av-m { background: #1f6feb; } .av-o { background: #0e9488; }
/* Browser tab strip: only the tabs the story needs */
.tabs { background: #1f2020; display: flex; align-items: flex-end; gap: .25em; padding: 0 0 0 .6em; }
.tab { display: inline-flex; align-items: center; gap: .55em; height: 2.2em; max-width: 17em; padding: 0 1em; border-radius: .55em .55em 0 0; color: #c7c7c7; font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab.on { background: #3c3c3c; color: #e3e3e3; }
.fav { width: 1em; height: 1em; border-radius: 50%; flex: none; }
.fav.jr { background: url("/assets/img/mark-small.svg?v=20261009r") center / contain no-repeat; border-radius: 0; }
.fav.gh { background: #e6edf3; }
.newtab { color: #c7c7c7; font-size: 1.1em; padding: 0 .6em .35em; }
/* Slack */
.sl-head { display: flex; align-items: center; gap: .5em; padding-left: 3.1em; font-size: 1.4em; font-weight: 800; color: #1d1c1d; }
.sl-dot { width: .5em; height: .5em; border-radius: 50%; background: #2bac76; }
.sl-pane { padding: .6em 1.6em 0; color: #1d1c1d; font-size: 1.12em; }
.sl-date { text-align: center; margin: .2em 0 .9em; } .sl-date span { border: 1px solid #ddd; border-radius: 999px; padding: .25em .75em; font-size: .8em; font-weight: 700; }
.sl-msg { display: flex; gap: .6em; margin-bottom: 1.2em; }
.sl-msg.sl-reply { opacity: 0; transition: opacity .25s; } .demo.is-replied .sl-msg.sl-reply { opacity: 1; }
.sl-av { width: 2.4em; height: 2.4em; border-radius: .35em; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.sl-name { font-weight: 900; } .sl-name em { font-style: normal; font-weight: 400; color: #616061; font-size: .78em; margin-left: .4em; }
.sl-msg p { margin: .1em 0 0; }
.sl-mention { background: #e8f5fa; color: #1264a3; border-radius: .2em; padding: 0 .15em; }
.sl-link { color: #1264a3; text-decoration: underline; }
.sl-unfurl { margin-top: .4em; padding: .2em .8em; border-left: 4px solid #ddd; display: grid; gap: .15em; font-size: .9em; }
.sl-unfurl .sl-src { font-weight: 700; color: #616061; font-size: .85em; } .sl-unfurl b { color: #1264a3; } .sl-unfurl > span:last-child { color: #616061; }
.add { color: #3fb950; font-style: normal; } .del { color: #f85149; font-style: normal; }
.sl-compose { display: flex; align-items: center; font-size: 1.12em; padding-left: .5em; color: #1d1c1d; }
.sl-ph { color: #868686; } .demo.is-replying .sl-ph, .demo.is-replied .sl-ph { display: none; }
.sl-compose .cur { opacity: 0; } .demo.is-replying .sl-compose .cur { opacity: 1; animation: blink 1s steps(1) infinite; }
/* Joyride report pages */
.acct { display: flex; align-items: center; justify-content: center; gap: .5em; color: var(--ink); font-size: 1.05em; } .acct span { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-size: .75em; font-weight: 600; color: #fff; }
.big { display: flex; align-items: center; font-size: 4.4em; font-weight: 500; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.pct { display: flex; align-items: center; font-size: 2.2em; font-weight: 500; color: var(--ink); line-height: 1; }
.demo .hl { background: rgba(36,85,214,.16); opacity: 0; transition: opacity .2s; } .demo.is-sel1 .hl1, .demo.is-sel2 .hl2 { opacity: 1; }
.tile { display: flex; align-items: center; font-size: 2.6em; font-weight: 500; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.shiphead { display: flex; align-items: center; gap: .5em; font-size: 1.05em; color: var(--ink); } .shiphead i { width: .5em; height: .5em; border-radius: 50%; background: var(--p3); } .shiphead em { font-style: normal; color: var(--ink-3); }
.ship { padding: 0 .6em; font-size: .95em; border-top: 1px solid var(--line); }
.ship .row { display: flex; align-items: center; gap: .6em; padding: .75em .4em; border-bottom: 1px solid var(--line); }
.ship .row.new { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-width: 0; overflow: hidden; transition: max-height .6s var(--ease), padding .6s var(--ease), opacity .4s .2s; }
.demo.is-landed .ship .row.new { max-height: 6em; padding: .75em .4em; opacity: 1; border-bottom-width: 1px; }
.ship .row > span:first-child { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; font-size: .72em; font-weight: 600; color: #fff; flex: none; }
.ship .row > div { min-width: 0; } .ship .row b { display: block; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ship .row > div > span { display: flex; align-items: center; gap: .35em; font-size: .85em; color: var(--ink-3); }
.ship i { width: .5em; height: .5em; border-radius: 50%; display: inline-block; } .ship .p1 { background: #e08a3c; } .ship .p2 { background: var(--p2); } .ship .p3 { background: var(--p3); }
.ship .r { margin-left: auto; text-align: right; flex: none; } .ship .r b { font-weight: 500; }
.ship .pill { display: inline-block; margin-top: .2em; font-family: var(--font-mono); font-size: .8em; background: var(--chip); color: var(--ink-3); border-radius: .3em; padding: .1em .45em; }
/* The Joyride selection card, from the extension's stylesheet in its light theme */
.jr-pop { display: flex; flex-direction: column; background: #fff; color: #3b4664; border: 1px solid rgba(16,17,20,.1); border-radius: .9em; box-shadow: 0 0 0 1px rgba(10,23,64,.08), 0 20px 60px rgba(10,23,64,.18); font-size: .82em; opacity: 0; transform: translateY(.4em); transition: opacity .2s, transform .2s; }
.demo.is-pop .jr-pop { opacity: 1; transform: none; }
.jr-head { display: flex; align-items: center; gap: .6em; padding: .75em .9em .75em 1em; border-bottom: 1px solid rgba(16,17,20,.1); color: #0a1740; flex: none; }
.jr-head .grip { width: .5em; height: .9em; background: radial-gradient(circle, #69738b 1px, transparent 1.2px) 0 0 / 4px 5px; opacity: .55; flex: none; }
.jr-head .mono { font-family: var(--font-mono); font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-head .brand { margin-left: auto; font: .75em var(--font-mono); letter-spacing: .08em; color: #2455d6; } .jr-head .x { color: #69738b; font-size: 1.3em; line-height: 1; }
.jr-body { flex: 1; min-height: 0; padding: 0 1em; overflow: hidden; }
.jr-loading { display: flex; align-items: center; gap: .6em; padding: 1.2em 0; color: #69738b; }
.spin { width: 1em; height: 1em; border: 1.5px solid rgba(16,17,20,.18); border-top-color: #2455d6; border-radius: 50%; animation: demo-spin .8s linear infinite; flex: none; }
@keyframes demo-spin { to { transform: rotate(360deg); } }
.jr-origin, .jr-chat { display: none; }
.demo.is-origin .jr-loading { display: none; } .demo.is-origin .jr-origin { display: block; }
.demo.is-chat .jr-origin { display: none; } .demo.is-chat .jr-chat { display: block; }
.jr-origin h3 { margin: 1em 0 0; font-size: 1.15em; font-weight: 600; color: #0a1740; letter-spacing: -.015em; }
.jr-summary { margin: .5em 0 0; color: #0a1740; font-size: 1.05em; line-height: 1.55; }
.jr-session { display: flex; align-items: center; gap: .5em; margin-top: .8em; font-size: .92em; color: #69738b; }
.jr-session b { color: #0a1740; font-weight: 600; } .jr-session em { margin-left: auto; font-style: normal; }
.sw { width: .6em; height: .6em; border-radius: 50%; background: #a5327f; flex: none; }
.jr-prompt { margin-top: .9em; }
.jr-prompt .lbl, .jr-answer .lbl { font: .72em/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #69738b; }
.jr-prompt blockquote { margin: .4em 0 0; padding: .6em .8em; border-left: 2px solid #2455d6; background: #e8eeff; color: #0a1740; border-radius: 0 .4em .4em 0; line-height: 1.5; }
.jr-prompt blockquote::before { content: "\201C"; } .jr-prompt blockquote::after { content: "\201D"; }
.jr-prompt .meta { display: flex; justify-content: space-between; margin-top: .4em; font-size: .85em; } .jr-prompt .meta a { color: #2455d6; }
.jr-ask { display: flex; align-items: center; gap: .5em; margin-top: 1em; padding: .5em .5em .5em .8em; border: 1px solid rgba(16,17,20,.18); border-radius: .4em; background: #fff; color: #0a1740; min-height: 2.8em; }
.jr-ask .ph { color: #69738b; } .demo.is-typing .jr-ask .ph { display: none; }
.jr-ask .cur { opacity: 0; } .demo.is-typing .jr-ask .cur { opacity: 1; animation: blink 1s steps(1) infinite; }
.jr-ask .send { margin-left: auto; width: 2.2em; height: 2.2em; border-radius: .35em; background: #2455d6; color: #fff; display: grid; place-items: center; font-weight: 600; flex: none; }
.jr-user { margin: .8em 0 .6em auto; padding: .55em .8em; border: 1px solid rgba(16,17,20,.1); border-radius: .4em; color: #0a1740; max-width: 90%; width: fit-content; line-height: 1.5; }
.jr-status { color: #69738b; font-size: .9em; margin-bottom: .6em; } .demo.is-answer .jr-status { display: none; }
.jr-answer { display: none; } .demo.is-answer .jr-answer { display: block; }
.jr-answer p { margin: .5em 0 0; color: #0a1740; line-height: 1.6; }
.jr-sources { display: flex; gap: .4em; margin-top: .8em; } .jr-sources span { border: 1px solid rgba(16,17,20,.1); border-radius: .35em; padding: .15em .5em; color: #2455d6; font-size: .85em; background: #f4f4f1; }
.jr-foot { display: flex; justify-content: space-between; padding: .75em 1em; border-top: 1px solid rgba(16,17,20,.1); font-size: .85em; flex: none; } .jr-foot a { color: #2455d6; }
/* GitHub */
.gh { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; color: #e6edf3; }
.gh-title { display: flex; align-items: center; font-size: 2.2em; line-height: 1.25; font-weight: 400; white-space: nowrap; } .gh-title span { color: #8b949e; margin-left: .25em; }
.gh-status { display: flex; align-items: center; gap: .6em; white-space: nowrap; color: #8b949e; }
.gh-status b { color: #e6edf3; font-weight: 400; }
.gh-status code, .gh-merge code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; color: #79c0ff; background: rgba(56,139,253,.15); border-radius: .35em; padding: .1em .35em; }
.gh-badge { display: inline-flex; align-items: center; border-radius: 2em; padding: .32em .75em .32em .6em; font-weight: 500; color: #fff; }
.gh-badge.open { background: #238636; } .gh-badge.merged { background: #8957e5; display: none; } .gh-merged-text { display: none; }
.demo.is-merged .gh-badge.open, .demo.is-merged .gh-open-text { display: none; }
.demo.is-merged .gh-badge.merged { display: inline-flex; } .demo.is-merged .gh-merged-text { display: inline; }
.gh-tabsrow { display: flex; align-items: flex-end; gap: .2em; color: #8b949e; padding-bottom: 0; border-bottom: 1px solid #30363d; }
.gh-tabsrow span { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1em; border-bottom: 2px solid transparent; white-space: nowrap; }
.gh-tabsrow span.on { color: #e6edf3; border-bottom-color: #f78166; font-weight: 600; }
.gh-tabsrow i { font-style: normal; font-size: .95em; } .gh-tabsrow em { font-style: normal; background: #30363d; border-radius: 2em; padding: 0 .55em; font-size: .75em; line-height: 1.6; color: #e6edf3; font-weight: 500; }
.gh-stat { display: flex; align-items: center; gap: .3em; font-size: .85em; font-weight: 600; }
.gh-av { display: grid; place-items: center; } .gh-av span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: 1.5em; font-weight: 700; color: #fff; }
.gh-card { border: 1px solid #30363d; border-radius: .4em; background: #0d1116; }
.gh-card-head { display: flex; align-items: center; gap: .3em; padding: .6em 1em; background: #161b22; border-bottom: 1px solid #30363d; color: #8b949e; } .gh-card-head b { color: #e6edf3; font-weight: 600; } .gh-card-head span { margin-left: auto; }
.gh-body { padding: 1em 1em 1.2em; line-height: 1.5; }
.gh-body h2 { font-size: 1.5em; font-weight: 600; color: #e6edf3; letter-spacing: 0; margin: 0 0 .5em; padding-bottom: .3em; border-bottom: 1px solid #30363d; }
.gh-body p { margin: 0 0 1em; }
.gh-foot { border: 1px solid #30363d; border-radius: .4em; padding: .7em .9em; font-size: .9em; }
.gh-foot-head { display: flex; align-items: center; gap: .4em; margin-bottom: .5em; } .gh-foot-head img { width: 1.1em; height: 1.1em; }
.gh-foot table { width: 100%; border-collapse: collapse; font-size: .92em; }
.gh-foot th, .gh-foot td { text-align: left; padding: .3em .4em; border-top: 1px solid #30363d; } .gh-foot th { color: #8b949e; font-weight: 600; border-top: 0; }
.gh-foot td:nth-child(n+2), .gh-foot th:nth-child(n+2) { text-align: right; }
.gh-foot-link { margin-top: .5em; color: #79c0ff; font-size: .92em; }
.gh-merge { border: 1px solid #30363d; border-radius: .4em; background: #0d1116; opacity: 0; transition: opacity .3s; }
.demo.is-merge .gh-merge { opacity: 1; }
.gh-merge-row { display: flex; align-items: center; gap: .8em; padding: .6em 1em; border-bottom: 1px solid #30363d; font-size: .95em; }
.gh-merge-row i.ok { width: 1.6em; height: 1.6em; border-radius: 50%; background: #238636; color: #fff; display: grid; place-items: center; font-style: normal; font-size: .9em; flex: none; }
.gh-merge-row i.purple { background: #8957e5; }
.gh-merge-row b { display: block; font-weight: 600; } .gh-merge-row span { color: #8b949e; font-size: .9em; }
.gh-merge-row.done { display: none; }
.demo.is-merged .gh-merge-row:not(.done) { display: none; } .demo.is-merged .gh-merge-row.done { display: flex; border-bottom: 0; }
.gh-merge-btn { display: inline-flex; align-items: center; margin: .7em 1em; padding: .45em 1em; border-radius: .4em; background: #238636; color: #fff; font-weight: 600; font-size: .95em; }
.demo.is-merged .gh-merge-btn { display: none; }
.gh-side { font-size: .95em; }
.gs { padding: .8em 0; border-bottom: 1px solid #30363d; }
.gs > div:first-child { display: flex; justify-content: space-between; align-items: center; } .gs b { color: #8b949e; font-weight: 600; } .gs i { font-style: normal; color: #8b949e; font-size: .9em; }
.gs p { margin: .5em 0 0; color: #8b949e; } .gs a { color: #8b949e; text-decoration: underline; }
.gs-rev { display: flex; align-items: center; gap: .5em; margin-top: .6em; color: #e6edf3; }
.gs-rev span { width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; font-size: .7em; font-weight: 700; color: #fff; }
.gs-rev em { font-style: normal; color: #8b949e; font-size: .85em; margin-left: auto; }
/* Cursor and progress bar */
.ptr { position: absolute; left: var(--px, 50%); top: var(--py, 50%); width: 1.6cqw; height: 1.6cqw; transition: left .75s cubic-bezier(.4, 0, .2, 1), top .75s cubic-bezier(.4, 0, .2, 1); z-index: 5; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); pointer-events: none; }
.demo.is-ptr .ptr { opacity: 1; } .ptr svg { width: 100%; height: 100%; display: block; }
.ptr .ring { position: absolute; left: -.2cqw; top: -.2cqw; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; border: 2px solid #2455d6; opacity: 0; transform: scale(.3); }
.ptr.click .ring { animation: demo-click .55s ease-out; }
@keyframes demo-click { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.9); } }
.demo-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3.22cqw; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.4cqw; background: var(--paper); border-top: 1px solid var(--line); font-size: .95cqw; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.demo-bar .seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .5em; }
.demo-bar .seg i { display: block; width: 100%; height: .32em; border-radius: 999px; background: var(--paper-3); overflow: hidden; position: relative; }
.demo-bar .seg i::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(var(--p, 0)); transform-origin: left; }
.demo-bar .seg b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; transition: color .3s; } .demo-bar .seg.on b { color: var(--ink); }
/* ---- Logo ribbon: a greyscale ticker between the stage and the features, after Clipbook's. Each logo is a mask filled with
one grey, so every mark reads at the same weight regardless of its brand colour. ---- */
.logos { padding: 56px 0 64px; background: var(--paper); text-align: center; overflow: hidden; }
.logos-title { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-3); }
.logos-clip { position: relative; margin-top: 40px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos-track { display: flex; width: max-content; animation: logos-scroll 48s linear infinite; }
.logos-run { display: flex; align-items: center; gap: 96px; padding-right: 96px; }
.logo { display: block; flex: none; height: calc(var(--h) * 1px); width: calc(var(--h) * var(--r) * 1px); background: var(--logo-ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
@keyframes logos-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos-track { animation: none; } }
@media (max-width: 700px) { .logos { padding: 44px 0 48px; } .logos-title { font-size: 17px; } .logos-clip { margin-top: 28px; } .logos-run { gap: 56px; padding-right: 56px; } .logo { transform: scale(.8); } }
/* ---- Attribution diff: hover any line and the card follows it; lines from the same session light up together ---- */
.fa-attr .fa-row { transition: background-color .15s; }
.fa-attr .fa-row:hover { background: var(--paper); cursor: default; }
.fa-attr .fa-row.is-kin { background: rgba(36,85,214,.06); }
.fa-attr .fa-row.is-kin code { background: transparent; }
.fa-hint { margin-left: auto; color: var(--ink-3); }
.fa-hint::before { content: "" !important; width: 0 !important; }
/* ---- Extension popover (.jx) and the coding-agent transcript (.cc): shared by the Session sharing box and the Code review pane ---- */
.jx { position: relative; display: flex; flex-direction: column; margin-top: 1.1em; background: #fff; color: #3b4664; border: 1px solid rgba(16,17,20,.1); border-radius: .9em; box-shadow: 0 0 0 1px rgba(10,23,64,.05), 0 18px 50px -14px rgba(10,23,64,.28); text-align: left; line-height: 1.5; }
.jx-head { display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-bottom: 1px solid rgba(16,17,20,.1); color: #0a1740; }
.jx-grip { width: .5em; height: .9em; background: radial-gradient(circle, #69738b 1px, transparent 1.2px) 0 0 / 4px 5px; opacity: .55; flex: none; }
.jx-path { font-family: var(--font-mono); font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-brand { margin-left: auto; font: .72em var(--font-mono); letter-spacing: .08em; color: #2455d6; flex: none; }
.jx-body { padding: .1em 1em .95em; }
.jx-sub { margin-top: .95em; font: .72em/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #69738b; }
.jx-sub span { text-transform: none; letter-spacing: 0; }
.jx-src { display: flex; align-items: center; flex-wrap: wrap; gap: .3em .6em; margin-top: .4em; color: #0a1740; }
.jx-src i { width: .6em; height: .6em; border-radius: 50%; background: var(--c); flex: none; }
.jx-src b { font-weight: 600; } .jx-src span { color: #69738b; font-size: .92em; }
.jx-quote { margin: .4em 0 0; padding: .55em .8em; border-left: 2px solid #2455d6; background: #e8eeff; color: #0a1740; border-radius: 0 .4em .4em 0; font-size: .95em; }
.jx-quote::before { content: "\201C"; } .jx-quote::after { content: "\201D"; }
.jx-q { display: flex; gap: .6em; align-items: baseline; margin-top: 1em; color: #0a1740; font-weight: 600; }
.jx-you { flex: none; padding: .15em .55em; border-radius: 999px; background: #e8eeff; color: #2455d6; font-size: .78em; font-weight: 600; }
.jx-a { margin-top: .6em; }
.jx-lab { font: .72em/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #69738b; }
.jx-a p { margin: .3em 0 0; color: #0a1740; line-height: 1.55; min-height: 1.5em; }
.jx-a .cite { color: #2455d6; font-weight: 600; font-size: inherit; }
.jx-cites { display: flex; gap: .5em; margin-top: .6em; }
.jx-cites span { font: .78em var(--font-mono); padding: .25em .6em; border-radius: 999px; background: #eceef2; color: #3b4664; }
.jx.is-typing .jx-cites { visibility: hidden; }
.jx .cur { display: none; } .jx.is-typing .cur { display: inline-block; width: .5em; height: 1em; margin-left: .1em; background: #2455d6; vertical-align: -.15em; animation: blink 1s steps(1) infinite; }
.jx-ask { display: flex; align-items: center; gap: .5em; margin-top: 1em; padding: .4em .4em .4em .8em; border: 1px solid rgba(16,17,20,.18); border-radius: .45em; color: #69738b; }
.jx-ask b { margin-left: auto; width: 2em; height: 2em; border-radius: .35em; background: #2455d6; color: #fff; display: grid; place-items: center; font-weight: 600; flex: none; }
.jx-foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .7em 1em; border-top: 1px solid rgba(16,17,20,.1); font-size: .88em; color: #69738b; }
.jx-foot a { color: #2455d6; font-weight: 500; }
/* Integrations tree: GitHub above the mark, the mark above every harness */
.itree { display: flex; flex-direction: column; align-items: center; --tl: #c9d4f3; }
.tnode { display: flex; flex-direction: column; align-items: center; gap: .5em; font-size: .9em; font-weight: 500; color: var(--ink); }
.tnode .ticon, .tnode img { width: 3.6em; height: 3.6em; }
.tnode img { padding: .5em; box-sizing: border-box; }
.ticon { display: grid; place-items: center; width: 3.4em; height: 3.4em; border: 1px solid var(--line); border-radius: .85em; background: #fff; color: var(--ink); }
.ticon::before { content: ""; width: 1.7em; height: 1.7em; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tnode .ticon::before { width: 2em; height: 2em; }
.ticon.txt::before { content: "D"; background: none; -webkit-mask: none; mask: none; font-weight: 700; font-size: 1.25em; line-height: 1; width: auto; height: auto; }
.tstem { display: block; width: 2px; height: 2.2em; background: var(--tl); }
.tstem.s { height: 1.3em; }
.tbus { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; padding-top: 2px; }
.tbus::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: var(--tl); }
.tcol { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tcol::before { content: ""; width: 2px; height: 2.2em; background: var(--tl); }
.htile { display: flex; flex-direction: column; align-items: center; gap: .45em; width: 100%; }
.htile > span:last-child { font-size: .82em; color: var(--ink-2); text-align: center; white-space: nowrap; }
/* ---- Use cases pane: ROI sankey, Code review views, Optimization frontier ---- */
.pane-item { padding: 24px 26px 26px; }
.sankey { width: 100%; height: auto; margin: auto 0; }
.sankey .f { opacity: 0; transition: opacity .9s var(--ease) .15s; }
.pane-item.active .sankey .f { opacity: .32; }
.sankey .lb { font-size: 14px; font-weight: 600; fill: var(--ink); }
.sankey .lm { font-size: 11.5px; fill: var(--ink-3); }
.pane-tabs { margin-top: auto; padding-top: 16px; display: flex; justify-content: center; gap: 8px; }
.pane-tabs .chip { cursor: pointer; border: 0; font: inherit; font-size: 12.5px; font-weight: 500; transition: background-color .25s, color .25s; }
.pane-tabs .chip.active { background: var(--blue); color: #fff; }
.pv { display: none; animation: pv-in .4s var(--ease); }
.pv.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@keyframes pv-in { from { opacity: 0; transform: translateY(6px); } }
.pane .jx { font-size: 13px; margin-top: 16px; }
.pane .pareto { width: 100%; height: auto; margin: auto 0; }
.pareto .grid { stroke: var(--line); stroke-width: 1; }
.pareto .ax { font-size: 10.5px; fill: var(--ink-3); }
.pareto .fr { fill: none; stroke: var(--p1); stroke-width: 1.5; stroke-dasharray: 4 4; }
.pareto .fr-area { fill: rgba(36,85,214,.05); }
.pareto .pt.fr { fill: var(--p1); stroke: #fff; stroke-width: 2; }
.pareto .pt.dom { fill: var(--human); stroke: #fff; stroke-width: 2; }
.pareto .pt-l { font-size: 12px; font-weight: 600; fill: var(--ink); }
.pareto .pt-m { font-size: 11px; fill: var(--ink-3); }
.recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 16px; }
.rec { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); font-size: 12px; line-height: 1.35; min-width: 0; }
.rec i { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; align-self: center; }
.rec.up i { background: rgba(18,194,176,.16); color: #0e9488; }
.rec.down i { background: var(--chip); color: var(--ink-3); }
.rec.new i { background: rgba(127,75,243,.14); color: var(--p2); }
.rec b { font-weight: 600; color: var(--ink); } .rec span { color: var(--ink-3); }
@media (max-width: 600px) { .recs { grid-template-columns: 1fr; } .pane-item { padding: 18px; } .htile > span:last-child { white-space: normal; } }
/* ==== Features and Use cases, third pass: GitHub-true diffs, a Claude-app chat window, a packed use-cases pane ==== */
.feature-copy p { font-size: 18px; }
.fa-cost { font-size: 2.3cqw; }
.fa-int { font-size: 2.15cqw; }
/* GitHub-style unified diff: gutter stripe in the session's color, then the line number, then the code */
.df { position: relative; border: 1px solid #d1d9e0; border-radius: .6em; overflow: hidden; background: #fff; font-family: var(--font-mono); font-size: .8em; line-height: 1.8; }
.df-file { display: flex; justify-content: space-between; padding: .45em .9em; background: #f6f8fa; border-bottom: 1px solid #d1d9e0; color: #1f2328; }
.dr { position: relative; display: grid; grid-template-columns: .34em 3.2em 1fr; align-items: stretch; transition: background-color .15s; }
.dr > i { background: var(--c, transparent); transform-origin: left; transition: transform .15s; }
.dr > span { color: #8c959f; text-align: right; padding-right: 1em; user-select: none; }
.dr code { white-space: pre; overflow: hidden; text-overflow: ellipsis; padding-right: 1em; color: #1f2328; }
.dr.add { background: #e6ffec; } .dr.add > span { background: #ccffd8; color: #57606a; }
.dr.del { background: #ffebe9; } .dr.del > span { background: #ffd7d5; }
.dr.hunk { background: #ddf4ff; } .dr.hunk code { color: #59636e; }
.dr.is-sel, .dr.is-sel.add { background: #fff8c5; } .dr.is-sel > span { background: #fae17d; color: #57606a; }
.dr.is-sel > i, .dr.is-kin > i { transform: scaleX(2); }
.fa-attr .dr[data-s], .fa-share .dr[data-turn] { cursor: default; }
.fa-cursor { position: absolute; left: 0; top: 0; width: 1.05em; height: 1.45em; z-index: 4; pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); transition: opacity .2s, left .25s var(--ease), top .25s var(--ease); }
.fa:hover .fa-cursor { opacity: 0; }
/* Attribution: PR header, a Git AI-style share bar, the diff, and a hovercard */
.pr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1em; align-items: center; }
.pr-repo { font-size: .8em; color: var(--ink-3); }
.pr-head b { grid-row: 2; font-size: 1.08em; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.pr-head b span { color: var(--ink-3); font-weight: 400; }
.pr-state { grid-row: 1 / 3; grid-column: 2; padding: .3em .8em; border-radius: 999px; background: #1f883d; color: #fff; font-size: .78em; font-weight: 500; }
.attr-sum { margin: .9em 0 1em; }
.attr-bar { display: flex; gap: 2px; height: .6em; border-radius: 3px; overflow: hidden; }
.attr-bar i { width: var(--w); background: var(--c); }
.attr-leg { display: flex; flex-wrap: wrap; gap: .4em 1.4em; margin-top: .6em; font-size: .8em; color: var(--ink-2); }
.attr-leg span { display: inline-flex; align-items: center; gap: .45em; }
.attr-leg em { width: 1.15em; height: 1.15em; background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.attr-leg span:nth-child(1) em { background: var(--claude); } .attr-leg span:nth-child(2) em { background: var(--cursor); }
.attr-leg em.hum { width: .75em; height: .75em; border-radius: 50%; background: var(--human); -webkit-mask: none; mask: none; }
.attr-leg b { font-weight: 600; color: var(--ink); }
.fa-attr .fa-tip { right: 3cqw; top: 0; transform: translateY(-50%); display: grid; gap: .4em; min-width: 14em; max-width: none; padding: .8em .95em; background: #fff; border: 1px solid #d1d9e0; border-radius: .7em; box-shadow: 0 18px 40px -16px rgba(10,23,64,.4); font-size: .8em; z-index: 3; }
.tp-a { display: flex; align-items: center; gap: .5em; } .tp-a b { font-weight: 600; color: var(--ink); }
.tp-h { width: 1.2em; height: 1.2em; background: var(--c); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; }
.fa-tip.is-h .tp-h { width: .8em; height: .8em; border-radius: 50%; background: var(--human); -webkit-mask: none; mask: none; margin: 0 .2em; }
.tp-b { display: flex; align-items: center; gap: .5em; color: var(--ink); }
.tp-av { width: 1.6em; height: 1.6em; border-radius: 50%; background: #f5dccd; color: #8a4a24; font-size: .75em; font-weight: 600; display: grid; place-items: center; flex: none; margin: 0 .1em; }
.fa-tip .t3 { color: var(--ink-3); }
/* Session sharing: the diff card with a Session button on the selected line, and the session it opens */
.fa-share { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.sh-diff { width: 74%; box-shadow: 0 14px 32px -20px rgba(10,23,64,.35); z-index: 1; }
.sh-diff .dr:has(.sess-btn) code { padding-right: 6.5em; }
.sess-btn { position: absolute; right: .5em; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: .35em; padding: 0 .6em; border-radius: .45em; border: 1px solid rgba(36,85,214,.4); background: #fff; color: var(--blue); font: 500 .95em/1.7 var(--font-sans); box-shadow: 0 2px 8px -3px rgba(36,85,214,.5); cursor: pointer; }
.sess-btn img { width: .95em; height: .95em; }
.fa-share { font-size: 2.25cqw; }
.fa-share .ch { position: relative; z-index: 2; width: 84%; height: 26em; margin: -1.2em 0 0 auto; }
.fa-share.pulse .ch { animation: ch-pulse .6s var(--ease); }
@keyframes ch-pulse { 40% { transform: translateY(-4px); box-shadow: 0 0 0 4px rgba(157,180,255,.35), 0 30px 60px -24px rgba(10,23,64,.55); } }
/* A session as it reads in the Claude app: user turns in bubbles, the agent's replies as plain text, tool calls folded into one grey line */
.ch { display: flex; flex-direction: column; background: #262624; color: #e8e6e1; border: 1px solid #3a3936; border-radius: .8em; overflow: hidden; font-family: var(--font-sans); font-size: .84em; line-height: 1.5; text-align: left; box-shadow: 0 30px 60px -24px rgba(10,23,64,.55); }
.ch-bar { display: flex; align-items: center; gap: .6em; padding: .55em .85em; background: #1f1e1d; border-bottom: 1px solid #34332f; font-size: .92em; white-space: nowrap; min-width: 0; flex: none; }
.ch-dots { display: flex; gap: .35em; margin-right: .3em; flex: none; }
.ch-dots i { width: .7em; height: .7em; border-radius: 50%; background: #ff5f57; } .ch-dots i:nth-child(2) { background: #febc2e; } .ch-dots i:nth-child(3) { background: #28c840; }
.ch-title { color: #ecebe7; font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .ch-title::after { content: " \2304"; color: #8f8d87; }
.ch-chip { padding: .05em .55em; border-radius: .35em; background: #34332f; color: #b3b1ab; font-size: .92em; flex: none; }
.ch-who { margin-left: auto; color: #8f8d87; font-size: .92em; overflow: hidden; text-overflow: ellipsis; }
.ch-body { flex: 1; min-height: 0; padding: .9em 1.1em .7em; display: flex; flex-direction: column; gap: .7em; overflow: hidden; }
.ch-scroll .ch-body { overflow: auto; }
.ch-you { align-self: flex-end; max-width: 82%; padding: .55em .9em; background: #3a3935; color: #f4f3ef; border-radius: 1em; }
.ch-ai { color: #e3e1dc; }
.ch-tool { color: #8f8d87; } .ch-tool::after { content: " \203A"; }
.ch-edit { display: flex; align-items: center; gap: .55em; padding: .35em .7em; border: 1px solid #3a3936; border-radius: .55em; background: #1f1e1d; font-family: var(--font-mono); font-size: .9em; color: #d9d7d2; transition: border-color .2s, box-shadow .2s; cursor: default; }
.ch-edit::before { content: "Edited"; font-family: var(--font-sans); color: #8f8d87; }
.ch-edit b { color: #4ade80; font-weight: 500; } .ch-edit i { color: #f87171; font-style: normal; }
.ch-edit em { margin-left: auto; font: 500 .9em var(--font-sans); color: #9db4ff; opacity: 0; transition: opacity .2s; }
.ch-edit.on { border-color: #9db4ff; box-shadow: 0 0 0 3px rgba(157,180,255,.2); } .ch-edit.on em { opacity: 1; }
.ch-comp { display: flex; justify-content: space-between; margin: 0 .9em .8em; padding: .6em .85em; border: 1px solid #3a3936; border-radius: .8em; background: #2c2b28; color: #8f8d87; flex: none; }
.ch-comp > span + span { font-size: .9em; color: #a9a7a1; }
/* Use cases pane */
.roi-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.roi-kpis > div { border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 8px; padding: 8px 10px 9px; background: var(--paper-2); min-width: 0; }
.roi-kpis > div:nth-child(1) { --c: var(--p1); } .roi-kpis > div:nth-child(2) { --c: var(--p6); } .roi-kpis > div:nth-child(3) { --c: var(--p8); } .roi-kpis > div:nth-child(4) { --c: var(--human); }
.roi-kpis span { display: block; font-size: 11.5px; color: var(--ink-3); }
.roi-kpis b { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.roi-kpis small { margin-left: 5px; font-size: 11.5px; color: var(--ink-3); }
.sankey { margin: auto 0 0; padding-top: 12px; }
.pane .jx { flex: 1; font-size: 13.5px; margin-top: 14px; box-shadow: 0 10px 30px -18px rgba(10,23,64,.3); }
.jx-body { display: flex; flex-direction: column; flex: 1; padding-top: .9em; }
.jx-src em { width: 1.15em; height: 1.15em; background: var(--claude); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; }
.jx-quote { margin-top: .7em; }
.jx-q { align-items: center; }
.jx-you { width: 1.9em; height: 1.9em; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #dbe7ff; color: #2455d6; font-size: .72em; }
.jx-ask { margin-top: auto; }
.pane .ch { flex: 1; min-height: 0; margin-top: 14px; font-size: 13px; }
.pane .ch-edit[data-turn="a"] { border-color: #9db4ff; } .pane .ch-edit[data-turn="a"] em { opacity: 1; }
.pv-diff { margin-top: 14px; font-size: 13px; }
.pv-leg { margin-top: 12px; font-size: 12px; }
.pareto-leg { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.pareto-leg span { display: inline-flex; align-items: center; gap: 7px; }
.pareto-leg span::before { content: ""; width: 18px; border-top: 2px dashed var(--p1); }
.pareto-leg .h::before { border-top: 2.5px solid var(--p2); }
.pareto-leg .d::before { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--human); }
.pareto { margin: auto 0; padding-top: 6px; }
.pareto .grid.axis { stroke: var(--line-strong); }
.pareto .gain { fill: rgba(127,75,243,.09); }
.pareto .fm { fill: none; stroke: var(--p1); stroke-width: 1.6; stroke-dasharray: 4 4; }
.pareto .fh { fill: none; stroke: var(--p2); stroke-width: 2.4; }
.pareto .pt { stroke: #fff; stroke-width: 2; } .pareto .pt.m { fill: var(--p1); } .pareto .pt.h { fill: var(--p2); }
.pareto .pl { font-size: 11.5px; font-weight: 600; } .pareto .pl.m { fill: var(--p1); } .pareto .pl.h { fill: #5b2fd6; }
.recs { margin-top: 12px; padding-top: 0; }
.rec { align-items: center; }
.rec b { font-size: 12px; } .rec span { font-size: 12px; }
@media (max-width: 900px) { .fa-share .ch { width: 92%; height: 26em; } .sh-diff { width: 88%; } .roi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sankey, .pareto { margin: 14px 0 0; } .pane .ch { height: 420px; flex: none; } }
/* Slack overlays in Slack's typeface; sidebar rows redrawn over the cleaned capture */
.sc-slack .ov { font-family: Lato, "Helvetica Neue", Arial, sans-serif; }
.sl-row { display: flex; align-items: center; gap: .55em; padding-left: 1.9em; font-size: 1.25em; color: #f4ecf5; border-radius: .4em; white-space: nowrap; }
.sl-hash { width: 1em; text-align: center; font-weight: 400; margin-right: .1em; }
.sl-row.sl-sel { background: #f8edfe; color: #39063a; font-weight: 700; }
.sl-row em { font-style: normal; color: #ccacd1; margin-left: .15em; }
.sl-mini { width: 1.1em; height: 1.1em; border-radius: .25em; display: grid; place-items: center; color: #fff; font-size: .72em; font-weight: 700; flex: none; }
.gs-rev .gs-ok { display: none; color: #3fb950; } .demo.is-merged .gs-rev .gs-wait { display: none; } .demo.is-merged .gs-rev .gs-ok { display: inline; }
.demo .gh-stat i.add { color: #3fb950; } .demo .gh-stat i.del { color: #f85149; }
/* Integrations: every mark links to its product */
a.htile, a.tnode { text-decoration: none; color: inherit; }
a.htile .ticon, a.tnode .ticon { transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
a.htile:hover .ticon, a.tnode:hover .ticon, a.htile:focus-visible .ticon { border-color: rgba(36,85,214,.45); box-shadow: 0 6px 16px -8px rgba(36,85,214,.55); transform: translateY(-2px); }
a.htile:hover > span:last-child { color: var(--blue); }
/* Pareto frontier, after LMArena and Design Arena: a muted cloud of dominated pairs, step-line frontiers drawn left to right,
logo badges on the optimal points, a shaded sweet spot under the medians, and a tooltip on every named point. */
.pf { position: relative; aspect-ratio: 560 / 350; margin: auto 0; }
.pf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pf .g { stroke: var(--line); stroke-dasharray: 2 4; }
.pf .ax { font-size: 10.5px; fill: var(--ink-3); }
.pf .sweet { fill: rgba(18,194,176,.08); }
.pf .med { stroke: rgba(14,148,136,.5); stroke-dasharray: 4 4; }
.pf .sw-l { font-size: 10.5px; font-weight: 600; fill: var(--p6); }
.pf .dot { fill-opacity: .45; opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--d, 0s); }
.pf .dot.named { fill: #aab1c2; fill-opacity: 1; stroke: #fff; stroke-width: 1.5; cursor: default; }
.pf.play .dot { opacity: 1; transform: none; }
.pf .front path { fill: none; }
.pf .fm path { stroke: var(--p1); stroke-width: 1.8; stroke-dasharray: 5 4; }
.pf .fh path { stroke: var(--p2); stroke-width: 2.4; }
.pf .front { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease) .55s; }
.pf .fh { transition-delay: .85s; }
.pf.play .front { clip-path: inset(0 0 0 0); }
.bdg { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border-radius: 50%; background: #fff; border: 2px solid var(--c); box-shadow: 0 4px 12px -4px rgba(10,23,64,.4); display: grid; place-items: center; cursor: pointer; z-index: 2; opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .45s cubic-bezier(.3,1.6,.5,1); transition-delay: var(--d); }
.bdg.m { --c: var(--p1); } .bdg.h { --c: var(--p2); }
.bdg i { width: 13px; height: 13px; background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.pf.play .bdg { opacity: 1; transform: none; }
.pf.play .bdg:hover { transform: scale(1.15); transition-delay: 0s; }
.blab { position: absolute; z-index: 1; padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); font-size: 10.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); transition-delay: var(--d); }
.blab.m { color: var(--p1); } .blab.h { color: #5b2fd6; }
.blab.s-r { transform: translate(19px, -50%); } .blab.s-l { transform: translate(calc(-100% - 19px), -50%); }
.blab.s-t { transform: translate(-50%, calc(-100% - 19px)); } .blab.s-b { transform: translate(-50%, 19px); }
.pf.play .blab { opacity: 1; }
.pf-tip { position: absolute; z-index: 5; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); padding: 6px 10px; border-radius: 8px; background: #0a1740; color: #fff; font-size: 11.5px; line-height: 1.35; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(10,23,64,.6); transition: opacity .15s; }
.pf-tip b { display: block; font-weight: 600; } .pf-tip span { color: rgba(255,255,255,.72); }
.pf-tip.on { opacity: 1; }
.pf.still *, .pf.still { transition: none !important; }
/* What a report shows: four packed figures that mirror the logged-in Reports page */
.rfigs .figure { min-height: 0; gap: 12px; }
.rf { --human-ink: #9aa1b1; }
.rf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 28px; }
.rf-head .chip { font-size: 12px; }
.rt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: 12px 12px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rt > span { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); }
.rt b { margin-top: 4px; font-size: 26px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rt em { font-style: normal; font-size: 11.5px; font-weight: 500; color: #1a7f37; }
.spk { grid-column: 1 / -1; display: block; width: calc(100% + 24px); height: 44px; margin: 8px -12px 0; }
.spk .ar { opacity: 0; transition: opacity .8s var(--ease) .9s; } .spk .ln { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) .25s; }
.figure.in .spk .ar { opacity: .14; } .figure.in .spk .ln { stroke-dashoffset: 0; }
.rf-sub { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); } .rf-sub b { font-size: 13px; font-weight: 600; color: var(--ink); }
.ob { display: flex; gap: 2px; height: 14px; border-radius: 3px; overflow: hidden; background: var(--paper-3); }
.ob i { display: block; width: 0; background: var(--c); transition: width 1.1s var(--ease); }
.ob-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); }
.ob-leg span { display: inline-flex; align-items: center; gap: 6px; } .ob-leg span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); } .ob-leg b { font-weight: 600; color: var(--ink); }
.rf-seg { display: flex; gap: 6px; }
.rf-seg .chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; transition: background-color .2s, color .2s; }
.rf-seg .chip.active { background: var(--blue); color: #fff; }
.hl-svg { display: block; width: 100%; height: auto; }
.hl-svg .g { stroke: var(--line); } .hl-svg .half { stroke: var(--ink-3); stroke-dasharray: 3 4; } .hl-svg .half-l { fill: var(--ink); font-weight: 600; }
.hl-svg .ax { font-size: 10.5px; fill: var(--ink-3); }
.hl-svg .cv { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.hl-svg .drop { stroke-width: 1.2; stroke-dasharray: 2 3; opacity: .75; } .hl-svg .hm { stroke: #fff; stroke-width: 2; }
.hl-leg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hl-leg span { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--ink-2); }
.hl-leg i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; } .hl-leg em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-leg b { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.coh { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.coh th { padding: 4px 6px; font-weight: 500; color: var(--ink-3); text-align: left; white-space: nowrap; } .coh thead th { text-align: center; font-size: 11.5px; } .coh thead th:first-child { text-align: left; }
.coh td { padding: 10px 4px; border-radius: 4px; text-align: center; color: var(--ink); background: rgba(36,85,214,var(--a)); opacity: 0; transform: scale(.85); transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: var(--d); }
.coh td.dk { color: #fff; font-weight: 500; }
.coh td.n, .coh thead th.n { text-align: right; color: var(--ink-2); background: none; opacity: 1; transform: none; }
.coh td.e { background: var(--paper); opacity: 1; transform: none; }
.coh tr.avg th, .coh tr.avg td { padding-top: 10px; background: none; font-weight: 600; color: var(--ink); opacity: 1; transform: none; border-top: 1px solid var(--line); border-radius: 0; }
.figure.in .coh td { opacity: 1; transform: none; }
.lc { position: relative; }
.lc-svg { display: block; width: 100%; height: auto; }
.lc .band { fill: url(#lcg); opacity: .18; }
.lc .band, .lc .flows { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease) .2s; }
.figure.in .lc .band, .figure.in .lc .flows { clip-path: inset(0 0 0 0); }
.lc .fl { fill: none; stroke: url(#lcg); stroke-width: 1.6; stroke-dasharray: 10 8; animation: lc-flow 1.4s linear infinite; }
@keyframes lc-flow { to { stroke-dashoffset: -18; } }
.lc .st { stroke: var(--line-strong); stroke-dasharray: 2 3; } .lc .sd { fill: #fff; stroke: var(--p1); stroke-width: 2; }
.lc-lab { position: relative; height: 44px; margin-top: 2px; }
.lc-lab div { position: absolute; left: var(--x); top: 0; display: grid; justify-items: center; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: opacity .4s var(--ease); transition-delay: calc(var(--d) + .3s); }
.lc-lab div:first-child { transform: translateX(-22%); justify-items: start; } .lc-lab div:last-child { transform: translateX(-80%); justify-items: end; }
.figure.in .lc-lab div { opacity: 1; }
.lc-lab b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .lc-lab span { font-size: 11.5px; color: var(--ink-3); }
.lc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.lc-stats div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; } .lc-stats b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); } .lc-stats span { font-size: 11.5px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .lc .fl { animation: none; } }
@media (max-width: 700px) { .rt-row, .lc-stats { grid-template-columns: 1fr; } .hl-leg { grid-template-columns: 1fr 1fr; } .coh { font-size: 10.5px; border-spacing: 2px; } .coh td { padding: 8px 2px; } .lc-lab b { font-size: 14px; } }
.rt-row { flex: 1; } .rt { grid-template-rows: auto auto minmax(44px, 1fr); } .rt .spk { height: 100%; min-height: 44px; align-self: stretch; }
.lc .band { opacity: .24; }
@media (max-width: 700px) {
.coh th.n, .coh td.n { display: none; }
.coh th { padding: 4px 2px; }
.lc-lab { position: static; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; }
.lc-lab div, .lc-lab div:first-child, .lc-lab div:last-child { position: static; transform: none; justify-items: start; }
}
/* Sections alternate white and off-white: steps white, use cases off-white, report white, compare off-white */
#report { background: var(--paper-2); }
#report .figure { box-shadow: 0 1px 2px rgba(10,23,64,.04), 0 12px 32px -24px rgba(10,23,64,.25); }
/* Session outcomes: every node carries its own label; hover a node to follow its path */
.roi-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.roi-body .roi-kpis { order: -1; margin-top: 0; }
.roi-kpis small { display: block; margin: 2px 0 0; }
.sk { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; display: block; }
.sk .flows path { fill-opacity: .22; }
.sk .skn { cursor: default; transition: opacity .25s; }
.sk .skn .bg { fill-opacity: .14; }
.sk .n { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.sk .v { font-size: 11.5px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.sk.hl .skf { fill-opacity: .07; } .sk.hl .skf.on { fill-opacity: .38; }
.sk.hl .skn { opacity: .35; } .sk.hl .skn.on { opacity: 1; }
.sk .flows { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease) .15s; }
.sk .skn { opacity: 0; transition: opacity .5s var(--ease); }
.sk .skn[data-k="all"] { transition-delay: .05s; } .sk .skn[data-k="pr"], .sk .skn[data-k="act"], .sk .skn[data-k="nopr"] { transition-delay: .5s; }
.sk .skn[data-k="ship"], .sk .skn[data-k="rev"], .sk .skn[data-k="closed"], .sk .skn[data-k="disc"], .sk .skn[data-k="nocode"] { transition-delay: 1s; }
.sk.play .flows { clip-path: inset(0 0 0 0); } .sk.play .skn { opacity: 1; }
.sk.play.hl .skn { opacity: .35; transition-delay: 0s; } .sk.play.hl .skn.on { opacity: 1; }
.ask-diff { display: none; }
@container pane (min-width: 700px) {
.roi-body { display: grid; grid-template-columns: minmax(0, 1fr) 180px; grid-template-rows: minmax(0, 1fr); gap: 22px; align-items: stretch; }
.roi-body .roi-kpis { order: 0; grid-template-columns: 1fr; gap: 10px; align-self: center; }
.roi-kpis > div { padding: 12px 14px 13px; } .roi-kpis b { font-size: 24px; }
.pv-ask.active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.ask-diff { display: block; margin-top: 14px; font-size: 12.5px; }
.pv-ask .jx { flex: none; }
.po-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; align-items: center; }
.po-body .recs { grid-template-columns: 1fr; margin-top: 0; padding-top: 0; }
.po-body .rec { padding: 12px; }
}
@media (max-width: 900px) { .sk { flex: none; height: auto; } }
@media (max-width: 900px) { .pane { grid-template-rows: auto; } }
.gh-code { display: flex; align-items: center; justify-content: center; gap: .45em; border: 1px solid #3d444d; border-radius: .45em; background: #212830; color: #f0f6fc; font-weight: 600; font-size: 1.1em; } .gh-code i { font-style: normal; font-size: .75em; color: #9198a1; }
.ship .r { display: grid; justify-items: end; gap: .25em; } .ship .pill { margin-top: 0; line-height: 1.5; height: auto; }
/* Session outcomes, simplified: thin bars, labels on soft chips so no text sits on a flow, one draw-in */
.sk .chipbg { fill: #fff; fill-opacity: .92; }
.roi-body { column-gap: 12px; }
@container pane (min-width: 700px) { .roi-body { gap: 12px; } }
/* Code review: the selected lines beside the card, the diff as tall as the card */
.pv-ask.active { margin: auto 0; flex: none; }
@container pane (min-width: 700px) {
.pv-ask.active { align-items: stretch; }
.ask-diff { display: flex; flex-direction: column; margin-top: 0; font-size: 13px; }
.ask-diff .dr { flex: 1 1 auto; }
.ask-diff .dr code, .ask-diff .dr > span { display: flex; align-items: center; justify-content: flex-start; }
.ask-diff .dr > span { justify-content: flex-end; }
.pv-ask .jx { margin-top: 0; }
}
.pv-ask .jx-body { padding-bottom: 1.2em; }
.pv-ask .jx-cites { margin-bottom: .2em; }
/* Features: quiet panels on the page's own paper, after Clipbook's rows. The box is a hairline outline, the visual sits in one
white frame like the report figures, and every illustration draws from the brand blues and neutral greys. Harness colors
become series colors here, so Claude Code reads as blue and Cursor as violet. Scoped to .features: the Code review pane
shares the diff and transcript styles and keeps its own look. */
.features { --claude: var(--p1); --cursor: var(--p2); padding: 24px 0 112px; background: var(--paper); }
.features::before { content: none; }
.feature { min-height: 520px; background: transparent; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.feature + .feature { margin-top: 40px; }
.feature-copy { padding: 48px 56px; }
.feature-art, .feature:nth-of-type(even) .feature-art { padding: 36px; background: radial-gradient(rgba(10,23,64,.055) 1px, transparent 1.3px) 0 0 / 16px 16px; border: 0; }
.features .fa { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(10,23,64,.04), 0 12px 32px -24px rgba(10,23,64,.25); }
.features .fa-cursor { filter: none; }
/* Attribution: a neutral state chip, series colors on the bar, and quiet diff tints with the selection in brand blue */
.features .pr-state { background: var(--chip); color: var(--chip-ink); font-weight: 500; }
.features .attr-leg em { background: var(--ink-2); }
.features .attr-leg span:nth-child(1) em { background: var(--claude); } .features .attr-leg span:nth-child(2) em { background: var(--cursor); }
.features .df { border-color: var(--line); }
.features .df-file { background: #fafaf8; border-bottom-color: var(--line); color: var(--ink-2); }
.features .dr > span { color: var(--ink-3); }
.features .dr code { color: var(--ink); }
.features .dr.add { background: #f2faf5; } .features .dr.add > span { background: #e4f3ea; color: var(--ink-3); }
.features .dr.del { background: #fcf3f2; } .features .dr.del > span { background: #f6e3e1; }
.features .dr.hunk { background: #f6f7fa; } .features .dr.hunk code { color: var(--ink-3); }
.features .dr.is-sel, .features .dr.is-sel.add { background: var(--blue-soft); } .features .dr.is-sel > span { background: #d7e1fb; color: var(--blue-ink); }
.features .fa-attr .dr.is-kin { background: #f3f6ff; }
.features .fa-tip { border: 1px solid var(--line); box-shadow: 0 12px 32px -18px rgba(10,23,64,.3); }
.features .tp-av { background: var(--blue-soft); color: var(--blue); }
/* Cost: one blue for every source, a blue-to-grey split for where it went, and the KPIs set off by rules instead of boxes */
.features .fa-kpis { gap: 0; }
.features .fa-kpis > div { border: 0; border-radius: 0; padding: .2em 1em; border-left: 1px solid var(--line); }
.features .fa-kpis > div:first-child { border-left: 0; padding-left: 0; }
.features .fa-hbar i { background: var(--blue); }
.features .fa-hbar > div { background: #f0f1f4; }
.features .fa-stack i:nth-child(1), .features .fa-legend span:nth-child(1)::before { background: var(--blue); }
.features .fa-stack i:nth-child(2), .features .fa-legend span:nth-child(2)::before { background: #9db4f0; }
.features .fa-stack i:nth-child(3), .features .fa-legend span:nth-child(3)::before { background: var(--human); }
/* Session sharing: the transcript in the page's light scheme, with a hairline and the report shadow */
.features .sh-diff { box-shadow: 0 1px 2px rgba(10,23,64,.04), 0 12px 32px -24px rgba(10,23,64,.25); }
.features .ch { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(10,23,64,.04), 0 24px 48px -28px rgba(10,23,64,.35); }
.features .ch-bar { background: #fafaf8; border-bottom-color: var(--line); }
.features .ch-dots i, .features .ch-dots i:nth-child(2), .features .ch-dots i:nth-child(3) { background: var(--paper-3); }
.features .ch-title { color: var(--ink); } .features .ch-title::after { color: var(--ink-3); }
.features .ch-chip { background: var(--chip); color: var(--chip-ink); }
.features .ch-who, .features .ch-tool, .features .ch-edit::before { color: var(--ink-3); }
.features .ch-you { background: var(--paper); color: var(--ink); }
.features .ch-ai { color: var(--ink-2); }
.features .ch-edit { background: #fafaf8; border-color: var(--line); color: var(--ink); }
.features .ch-edit b { color: #1a7f37; } .features .ch-edit i { color: #cf222e; }
.features .ch-edit em { color: var(--blue); }
.features .ch-edit.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.features .fa-share { border: 0; box-shadow: none; }
.features .ch-comp { background: #fafaf8; border-color: var(--line); color: var(--ink-3); }
.features .ch-comp > span + span { color: var(--ink-3); }
/* Integrations: grey connectors and white tiles */
.features .itree { --tl: var(--line-strong); }
.features .ticon { background: #fff; color: var(--ink); }
/* ROI measurement: the session-outcomes flow in blues and greys, with its four totals in one ruled row */
.features .fa-roi { display: grid; gap: 14px; --p4: #7fa3f5; --p6: var(--blue-ink); --p7: var(--p1); --p8: #9db4f0; }
.features .fa-roi .sk { flex: none; height: auto; aspect-ratio: 600 / 438; }
.roi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 14px; border-top: 1px solid var(--line); }
.roi-strip > div { display: grid; gap: 2px; min-width: 0; padding: 0 14px; border-left: 1px solid var(--line); }
.roi-strip > div:first-child { padding-left: 0; border-left: 0; }
.roi-strip span, .roi-strip small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roi-strip b { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Optimization: the Pareto frontier with brand-blue accents in place of teal */
.features .fa-opt { display: grid; gap: 12px; }
.features .fa-opt .pareto-leg { margin-top: 0; }
.features .fa-opt .recs { margin-top: 4px; padding-top: 0; }
.features .pf .sweet { fill: rgba(36,85,214,.06); } .features .pf .med { stroke: rgba(36,85,214,.35); } .features .pf .sw-l { fill: var(--blue); }
.features .rec.up i { background: var(--blue-soft); color: var(--blue); }
@media (max-width: 600px) {
.roi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
.roi-strip > div:nth-child(3) { padding-left: 0; border-left: 0; }
/* Too narrow for floating labels; the recommendations below name the winners */
.features .fa-opt .blab { display: none; }
.features .fa-opt .bdg { width: 20px; height: 20px; margin: -10px 0 0 -10px; } .features .fa-opt .bdg i { width: 10px; height: 10px; }
}
@media (max-width: 1100px) { .feature-copy { padding: 36px; } .feature-art, .feature:nth-of-type(even) .feature-art { padding: 28px; } }
@media (max-width: 900px) {
.features { padding: 8px 0 72px; }
.feature + .feature { margin-top: 24px; }
.feature-copy { padding: 28px 24px 8px; }
.feature-art, .feature:nth-of-type(even) .feature-art { padding: 20px; margin-top: 16px; }
}
/* Lifecycle of AI code: static flow lines */
.lc .fl { animation: none; }
/* Session outcomes: one svg for wide panes with the spend tiles in its empty corner, one for narrow panes */
.sk-wide { display: none; }
.sk .skt { opacity: 0; transition: opacity .5s var(--ease) 1s; } .sk.play .skt { opacity: 1; }
.sk .skt .tb { fill: #fff; stroke: var(--line-strong); stroke-width: 1; }
.sk .tl { font-size: 12.5px; fill: var(--ink-3); } .sk .tv { font-size: 27px; font-weight: 600; letter-spacing: -.02em; fill: var(--ink); } .sk .ts { font-size: 12px; fill: var(--ink-3); }
@container pane (min-width: 700px) {
.roi-body { display: flex; }
.sk-wide { display: block; flex: 1 1 0; min-height: 0; width: 100%; height: 100%; }
.sk-narrow, .roi-body .roi-kpis { display: none; }
}
/* Pareto: a real axis title on the left */
.pf .axl { font-size: 11px; font-weight: 500; fill: var(--ink-2); }
/* Code review card: the question waits in the box, is sent, then the evidence and answer arrive */
.jx-logo { width: 16px; height: 16px; margin-left: auto; flex: none; }
.jx-live .jx-body { gap: 0; }
.jx-thread { display: flex; flex-direction: column; gap: .8em; }
.jx-user { display: flex; justify-content: flex-end; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.jx-user span { max-width: 84%; padding: .55em .9em; border-radius: 1em 1em .3em 1em; background: #eef1f6; color: #0a1740; font-weight: 500; line-height: 1.45; }
.jx-agent { position: relative; }
.jx-loading { position: absolute; left: 0; top: .2em; display: flex; align-items: center; gap: .6em; color: #69738b; opacity: 0; transition: opacity .2s; }
.jx-reply { opacity: 0; transition: opacity .35s var(--ease); }
.jx-ev { padding: .6em .75em .7em; border: 1px solid rgba(16,17,20,.1); border-radius: .6em; background: #fafbfc; }
.jx-ev .jx-src { margin-top: 0; } .jx-ev .jx-quote { margin-top: .55em; }
.jx-ans { display: grid; margin-top: .75em; } .jx-ans > p { grid-area: 1 / 1; margin: 0; color: #0a1740; line-height: 1.55; } .jx-ans .sizer { visibility: hidden; }
.jx-in { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .jx-in em { font-style: normal; }
.jx-in .ph { display: none; color: #69738b; } .jx-in .val { color: #0a1740; }
.jx-live .jx-ask { position: relative; margin-top: 1em; }
.jx-send { transition: transform .15s; }
.jx-ptr { position: absolute; right: .35em; bottom: -.55em; width: 1em; height: 1.4em; opacity: 0; transform: translate(-60px, 22px); transition: opacity .3s, transform .7s var(--ease); pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.jx-live.aim .jx-ptr { opacity: 1; transform: none; }
.jx-live.press .jx-send { transform: scale(.86); }
.jx-live.sent .jx-in .ph { display: inline; } .jx-live.sent .jx-in .val { display: none; }
.jx-live.sent .jx-user { opacity: 1; transform: none; }
.jx-live.sent .jx-ptr { opacity: 0; transition-delay: .4s; }
.jx-live.loading .jx-loading { opacity: 1; }
.jx-live.answered .jx-reply { opacity: 1; }
/* Most expensive pull requests: sortable by cost, engineer, or feature */
.prt-wrap { overflow-x: auto; }
.prt { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.prt th { padding: 8px 8px 9px; border-bottom: 1px solid var(--line-strong); text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.prt th[data-sort] { cursor: pointer; transition: color .2s; } .prt th[data-sort]:hover, .prt th.on { color: var(--ink); }
.prt th.on::after { content: " \2193"; color: var(--blue); }
.prt td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
.prt tr:last-child td { border-bottom: 0; }
.prt .n { text-align: right; }
.prt td.t { max-width: 15em; } .prt td.t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.prt td.t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink-3); }
.prt .who { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.prt .who i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-style: normal; font-size: 9.5px; font-weight: 600; flex: none; }
.prt .ft { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-size: 11.5px; white-space: nowrap; }
.prt td.ag span { display: flex; gap: 5px; } .prt td.ag em { width: 15px; height: 15px; background: var(--c); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.prt td.c b { color: var(--ink); font-weight: 600; } .prt td.c i { display: block; width: var(--w); height: 3px; margin: 5px 0 0 auto; border-radius: 2px; background: var(--blue); opacity: .5; }
.prt tbody tr { transition: transform .45s var(--ease), background-color .2s; } .prt tbody tr:hover { background: var(--paper); }
.prt tr.gs td { border-top: 1px solid var(--line-strong); }
/* Spend by feature: a squarified treemap; size is spend, shade is cost per merged PR */
.tm { position: relative; flex: 1; min-height: 300px; }
.tm-t { position: absolute; opacity: 0; transform: scale(.97); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d); }
.figure.in .tm-t { opacity: 1; transform: none; }
.tm-t > div { position: absolute; inset: 2px; display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 8px; overflow: hidden; background: rgba(36,85,214,var(--a)); color: var(--ink); transition: box-shadow .2s; }
.tm-t.dk > div { color: #fff; }
.tm-t b { font-size: 12.5px; font-weight: 600; } .tm-t strong { font-size: 18px; font-weight: 600; letter-spacing: -.02em; } .tm-t span { font-size: 11.5px; opacity: .85; }
.tm-t:hover > div { box-shadow: inset 0 0 0 2px rgba(10,23,64,.55); }
.tm-t .flag { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 10.5px; font-weight: 600; box-shadow: 0 2px 6px -2px rgba(10,23,64,.35); }
.tm-leg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.tm-leg i { width: 96px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(36,85,214,.14), rgba(36,85,214,1)); }
.tm-leg b { margin-left: auto; font-weight: 500; color: var(--ink-2); }
@media (max-width: 700px) { .tm { min-height: 380px; } .tm-leg b { display: none; } .prt { font-size: 12px; } .prt td.ag, .prt th:nth-child(4) { display: none; } }
.tm-t > div { container-type: inline-size; } @container (max-width: 150px) { .tm-t b { font-size: 11.5px; } .tm-t strong { font-size: 16px; } .tm-t span { font-size: 10.5px; white-space: nowrap; } }
.sl-ws { display: flex; align-items: center; gap: .35em; font-size: 1.55em; font-weight: 900; color: #fff; white-space: nowrap; } .sl-ws i { font-style: normal; font-weight: 400; font-size: .7em; opacity: .85; }
.sl-tile { display: grid; place-items: center; font-size: 1.35em; font-weight: 700; color: #1d1c1d; }
.ship .row { padding-left: .6em; padding-right: .6em; }
.jr-head .brand-mark { width: 1.1em; height: 1.1em; margin-left: auto; flex: none; }
/* Compared: logos in the column heads, a sources note under the table */
table.cmp th { vertical-align: bottom; }
.cmp-co { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cmp-co img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex: none; }
table.cmp th.jr .cmp-co { color: var(--blue); }
table.cmp th.jr .cmp-co img { width: 21px; height: 21px; }
table.cmp th small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
table.cmp td:first-child { font-weight: 500; }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td.no { color: var(--ink-3); }
.cmp-note { margin-top: 18px; font-size: 12.5px; color: var(--ink-3); max-width: 80ch; }
/* Compared, lighter: an icon and a word or two per cell */
.cmp-head { max-width: none; }
.cmp-head p { max-width: none; }
#report .section-head { max-width: none; }
#report .section-head p { max-width: 1040px; }
.cmp-note { max-width: none; }
.cmp-co sup, .cmp-note sup { font-size: .7em; color: var(--ink-3); margin-left: 1px; vertical-align: super; line-height: 0; }
table.cmp td.y, table.cmp td.p, table.cmp td.n { white-space: nowrap; }
table.cmp td i { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border-radius: 50%; }
table.cmp td.y i { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
table.cmp td.p { color: var(--ink-2); }
table.cmp td.p i { border: 1.5px solid var(--p6); background: linear-gradient(90deg, var(--p6) 50%, transparent 50%); box-sizing: border-box; }
table.cmp td.n i { width: 12px; height: 2px; border-radius: 1px; background: var(--ink-3); opacity: .5; vertical-align: 4px; }
table.cmp td.jr { color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { table.cmp td.y, table.cmp td.p, table.cmp td.n { white-space: normal; } }
/* ---- Demo as a video: a thumbnail with a play button, then a pausable recording ---- */
.demo-poster[hidden], .demo-toggle[hidden], .demo-resume[hidden] { display: none; }
/* Until it starts, only the thumbnail shows over the gradient */
.demo:not(.started) { visibility: hidden; }
.demo.started .demo-stage { cursor: pointer; }
.demo.paused *, .demo.paused *::before, .demo.paused *::after { animation-play-state: paused !important; }
.demo.started .demo-bar { padding-left: 4.4cqw; }
.demo-toggle { position: absolute; left: 1.1cqw; bottom: .56cqw; z-index: 6; width: 2.1cqw; height: 2.1cqw; padding: 0; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; }
.demo-toggle::before, .demo-toggle::after { content: ""; position: absolute; top: 32%; width: 13%; height: 36%; border-radius: 1px; background: #fff; }
.demo-toggle::before { left: 34%; } .demo-toggle::after { right: 34%; }
.demo.paused .demo-toggle::after { display: none; }
.demo.paused .demo-toggle::before { left: 39%; top: 30%; width: 32%; height: 40%; border-radius: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.demo-toggle:hover { background: var(--blue); }
.demo-resume { position: absolute; inset: 0 0 3.22cqw; z-index: 5; display: grid; place-items: center; padding: 0; border: 0; background: rgba(10,23,64,.28); cursor: pointer; }
.demo-resume i, .pa-play i { position: relative; display: block; width: 7cqw; height: 7cqw; border-radius: 50%; background: rgba(10,23,64,.72); border: 1.5px solid rgba(255,255,255,.35); box-shadow: 0 1.2cqw 3cqw -1cqw rgba(3,10,40,.6); transition: transform .2s var(--ease), background-color .2s; }
.demo-resume i::before, .pa-play i::before { content: ""; position: absolute; left: 40%; top: 31%; width: 30%; height: 38%; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.demo-resume:hover i, .pa-play:hover i { transform: scale(1.06); background: var(--blue); }
.demo-toggle:focus-visible, .demo-resume:focus-visible i, .pa-play:focus-visible i { outline: 3px solid #fff; outline-offset: 3px; }
/* The thumbnail: a blocky, low-text version of the reports, drawn in HTML so it stays sharp */
.demo-poster { position: absolute; inset: 0; z-index: 7; cursor: pointer; container-type: size; }
.pa { position: absolute; inset: 7% 6% 9.5%; display: grid; grid-template-columns: 42fr 58fr; grid-template-rows: 57fr 43fr; gap: 2.2cqw; }
.pa-card { position: relative; display: flex; flex-direction: column; gap: 1.3cqw; min-width: 0; min-height: 0; padding: 1.7cqw; overflow: hidden; background: rgba(255,255,255,.97); border-radius: 1.2cqw; box-shadow: 0 2.4cqw 5cqw -2.4cqw rgba(3,10,40,.55); }
.pa-c { grid-column: 1 / -1; }
.pa-head { display: flex; align-items: center; gap: 1cqw; }
.pa-head img { width: 2cqw; height: 2cqw; }
.pa .sk { display: block; height: .95cqw; border-radius: 999px; background: #e7eaf1; }
.pa .w25 { width: 25%; } .pa .w35 { width: 35%; } .pa .w40 { width: 40%; } .pa .w50 { width: 50%; } .pa .w60 { width: 60%; }
.pa .chip-s { margin-left: auto; width: 6.5cqw; height: 1.9cqw; border-radius: 999px; background: #eef1f7; }
.pa-l-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 2.2cqw; }
.pa-hbars { display: grid; gap: 1cqw; }
.pa-hbars i { display: block; height: 1.6cqw; border-radius: .45cqw; }
.hb1 { width: 94%; background: var(--p1); } .hb2 { width: 76%; background: var(--p2); } .hb3 { width: 61%; background: var(--p3); }
.hb4 { width: 47%; background: var(--p4); } .hb5 { width: 33%; background: #aebff0; } .hb6 { width: 20%; background: #cfd3dc; }
.pa-donut, .pa-ring { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; max-height: 100%; }
.pa-donut::before, .pa-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 61%); mask: radial-gradient(farthest-side, transparent 60%, #000 61%); }
.pa-donut::before { background: conic-gradient(var(--p1) 0 46%, var(--p2) 0 66%, var(--p3) 0 80%, #e7eaf1 0); }
.pa-ring::before { background: conic-gradient(var(--p3) 0 55%, #e7eaf1 0); }
.pa-donut b { font-size: 2.6cqw; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.pa-ring b { font-size: 1.7cqw; font-weight: 600; color: var(--ink); }
.pa-tabs { display: flex; gap: .8cqw; }
.pa-tabs i { width: 7.5cqw; height: 1.9cqw; border-radius: 999px; background: #eef1f7; } .pa-tabs i.on { background: var(--blue); }
.pa-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1cqw; }
.pa-stats span { display: flex; align-items: center; gap: .9cqw; min-width: 0; padding: 1cqw 1.2cqw; border-radius: .8cqw; background: #f4f6fb; }
.pa-stats b { font-size: 1.55cqw; font-weight: 600; color: var(--ink); }
.pa-stats .sk { flex: 1; }
.pa .dot { flex: none; width: .95cqw; height: .95cqw; border-radius: 50%; } .pa .d1 { background: var(--p1); } .pa .d2 { background: var(--p3); }
.pa-r-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 15cqw; gap: 1.6cqw; }
.pa-vbars { display: flex; align-items: flex-end; gap: .45cqw; min-height: 0; padding: 1cqw 0 0; border-bottom: 1px solid #e7eaf1; }
.pa-vbars i { flex: 1; height: var(--h); border-radius: .3cqw .3cqw 0 0; background: #cdbdfa; }
.pa-vbars i:nth-child(3n) { background: #9fd6f9; } .pa-vbars i.pb19 { background: var(--p1); }
.pb1 { --h: 34%; } .pb2 { --h: 46%; } .pb3 { --h: 30%; } .pb4 { --h: 52%; } .pb5 { --h: 41%; } .pb6 { --h: 58%; } .pb7 { --h: 36%; } .pb8 { --h: 49%; }
.pb9 { --h: 62%; } .pb10 { --h: 44%; } .pb11 { --h: 55%; } .pb12 { --h: 38%; } .pb13 { --h: 66%; } .pb14 { --h: 48%; } .pb15 { --h: 57%; } .pb16 { --h: 42%; }
.pb17 { --h: 70%; } .pb18 { --h: 53%; } .pb19 { --h: 96%; } .pb20 { --h: 61%; } .pb21 { --h: 47%; } .pb22 { --h: 68%; } .pb23 { --h: 51%; } .pb24 { --h: 59%; }
.pa-mini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; min-height: 0; padding: 1.2cqw; border-radius: .8cqw; background: #f4f6fb; }
.pa-mini .sk { align-self: stretch; }
.pa-mini .pa-ring { width: 72%; }
.pa-line { flex: 1; min-height: 0; width: 100%; }
.pa-line .ar1 { fill: rgba(36,85,214,.12); } .pa-line .ln1 { fill: none; stroke: var(--p1); stroke-width: 3; vector-effect: non-scaling-stroke; }
.pa-line .ln2 { fill: none; stroke: var(--p2); stroke-width: 2.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.pa-tag { position: absolute; display: inline-flex; align-items: center; gap: .7cqw; padding: .6cqw 1.2cqw; border-radius: 999px; background: #fff; border: 1px solid #e3e6ee; box-shadow: 0 .8cqw 2cqw -1cqw rgba(10,23,64,.35); font-size: 1.25cqw; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pa-tag.t1 { left: 33%; top: 44%; } .pa-tag.t2 { left: 71%; top: 22%; }
.pa-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; }
.pa-play i { width: 8cqw; height: 8cqw; }
.pa-time { position: absolute; left: 6%; bottom: 3%; font-size: 1.2cqw; font-weight: 500; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
/* A portrait block on phones: two cards stacked, larger type */
@container (max-aspect-ratio: 1 / 1) {
.pa { inset: 6% 5% 11%; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 4cqw; }
.pa-r { display: none; } .pa-c { grid-column: auto; }
.pa-card { padding: 4cqw; gap: 3cqw; border-radius: 3cqw; }
.pa-head img { width: 5cqw; height: 5cqw; } .pa .sk { height: 2.2cqw; } .pa .chip-s { width: 15cqw; height: 4.4cqw; }
.pa-hbars { gap: 2.2cqw; } .pa-hbars i { height: 3.4cqw; border-radius: 1cqw; }
.pa-donut b { font-size: 6cqw; }
.pa-tag { font-size: 3cqw; padding: 1.4cqw 2.6cqw; gap: 1.6cqw; } .pa .dot { width: 2.2cqw; height: 2.2cqw; }
.pa-tag.t1 { left: 6%; top: 40%; } .pa-tag.t2 { left: auto; right: 6%; top: 20%; }
.pa-play i { width: 20cqw; height: 20cqw; }
.pa-time { font-size: 3.4cqw; left: 5%; bottom: 3.5%; }
}
@media (max-width: 760px) { .demo-resume i { width: 16cqw; height: 16cqw; } .demo-toggle { width: 4.6cqw; height: 4.6cqw; bottom: .9cqw; } .demo.started .demo-bar { padding-left: 7.5cqw; } }
/* ---- Home finale: Get started, the demo card, and the footer share one continuous brand gradient with grain. On the
blue, the step cards stay white and crisp, the side cards recede, and the demo card is a deep glass panel with
Jellyfish's proportions, so it reads as a destination rather than a second gradient. ---- */
.finale { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(60% 22% at 85% 6%, #2f8ff7 0%, rgba(47,143,247,0) 70%), radial-gradient(55% 26% at 12% 45%, #1d3fbf 0%, rgba(29,63,191,0) 70%), radial-gradient(60% 22% at 80% 92%, #2277e2 0%, rgba(34,119,226,0) 70%), linear-gradient(170deg, #0a1f6b 0%, #0d2b8f 28%, #1550d8 60%, #1856d4 82%, #1f6ddc 100%); }
.finale > .grain { z-index: -1; opacity: .3; }
.finale .steps, .finale .gradient-panel { background: none; }
.finale .gradient-panel::before { content: none; }
.finale .steps h2 { color: #fff; }
.finale .steps-nav .tag { background: rgba(255,255,255,.14); color: #fff; }
.finale .steps-nav .tag.on { background: #fff; color: var(--blue); }
.finale .steps-arrows button { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.finale .steps-arrows button:hover { background: #fff; color: var(--ink); }
.finale .stage { border-color: transparent; }
.finale .stage.is-active { box-shadow: 0 40px 80px -36px rgba(2,8,32,.65); }
.finale .stage:not(.is-active) { opacity: .2; }
.finale .stage:not(.is-active):hover { opacity: .45; }
.finale .footer .gradient-panel { padding-top: 40px; }
@media (max-width: 760px) {
.finale { background: radial-gradient(70% 18% at 85% 5%, #2f8ff7 0%, rgba(47,143,247,0) 70%), radial-gradient(60% 22% at 12% 45%, #1d3fbf 0%, rgba(29,63,191,0) 70%), linear-gradient(170deg, #0a1f6b 0%, #0d2b8f 30%, #1449c9 70%, #1753cf 100%); }
.finale .footer .gradient-panel { padding-top: 24px; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.book-cta { padding: 0 48px 120px; }
.book-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 520px; width: min(100%, 1344px); margin: 0 auto; padding: 96px 48px; border-radius: 40px; color: #fff; background: radial-gradient(42% 75% at 22% 48%, rgba(12,30,130,.32) 0%, rgba(12,30,130,0) 72%), radial-gradient(30% 80% at 96% 25%, rgba(70,220,255,.95) 0%, rgba(70,220,255,0) 70%), radial-gradient(28% 70% at 80% 108%, rgba(60,150,255,.8) 0%, rgba(60,150,255,0) 70%), radial-gradient(30% 60% at 14% 112%, rgba(70,110,255,.6) 0%, rgba(70,110,255,0) 70%), linear-gradient(100deg, #1a3ec6 0%, #1d47d0 35%, #2264e6 60%, #2590f2 82%, #2cbaf4 100%); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 50px 100px -50px rgba(2,8,32,.7); }
.book-panel .grain { z-index: 0; opacity: .9; }
.book-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 980px; }
/* A second, coarser grain over the first gives the card Jellyfish's heavy film texture */
.book-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .95; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; }
.book-inner h2 { font-size: clamp(38px, 4.8vw, 64px); line-height: 1.02; font-weight: 500; letter-spacing: -0.03em; color: #fff; }
.book-inner p { margin-top: 20px; max-width: 54ch; font-size: 19px; line-height: 1.5; color: #fff; }
.book-inner .book-form { margin-top: 36px; }
.book-form { display: flex; gap: 6px; width: min(100%, 480px); padding: 6px; border-radius: 999px; background: rgba(6,16,58,.22); border: 1px solid rgba(255,255,255,.34); transition: border-color .2s; }
.book-form:focus-within { border-color: rgba(255,255,255,.8); }
.book-form input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: transparent; color: #fff; font: 400 15px var(--font-sans); outline: none; }
.book-form input::placeholder { color: rgba(255,255,255,.8); }
.book-form button { flex: none; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #fff; color: var(--blue-deep); font: 500 15px var(--font-sans); cursor: pointer; transition: background-color .2s; }
.book-form button:hover { background: #eef2ff; }
.book-form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* A roomier footer on every page */
.footer .gradient-panel { padding-top: 96px; }
.footer-links { font-size: 15px; color: #fff; }
.footer-wordmark { padding-bottom: 64px; }
@media (max-width: 760px) {
.book-cta { padding: 0 12px 72px; }
.book-panel { min-height: 0; padding: 64px 24px; border-radius: 22px; }
.book-inner p { font-size: 16px; }
.book-form { flex-direction: column; border-radius: 16px; }
.book-form input { height: 44px; }
.book-form button { border-radius: 12px; }
.footer .gradient-panel { padding-top: 64px; }
}
/* ---- For Teams page: one story in order. The hero promises three things (where spend goes, what it returns, how to
spend it better); the report rows show each; the gradient band covers rollout and trust; then the comparison, pricing,
and the demo card. Visuals are blocky and low-text, like the demo thumbnail. ---- */
/* Compare: the same 1180px measure as the rows, with the table in one white card */
.tm-compare { padding: 0 0 120px; background: var(--paper); }
.tm-compare .wide { width: min(100% - 2 * var(--gutter), 1180px); }
.tm-compare .cmp-head { max-width: 980px; margin-bottom: 48px; }
.tm-compare .cmp-wrap { padding: 16px 36px 32px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(10,23,64,.04), 0 24px 48px -36px rgba(10,23,64,.3); }
.tm-compare .cmp-note { margin-top: 22px; }
.tm-kicker { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8); }
.tm-center { margin-inline: auto; text-align: center; justify-items: center; }
.tm-reports .section-head, .pricing-head { max-width: 980px; }
.tm-reports .section-head { margin-bottom: 64px; }
/* Hero: a rounded brand-gradient panel under the nav, with the value props overlapping its bottom edge */
.tm-hero { position: relative; padding: 92px 16px 0; }
.tm-hero-panel { position: relative; isolation: isolate; overflow: hidden; min-height: min(640px, calc(100svh - 170px)); display: flex; align-items: center; border-radius: 28px; background: #0d2b8f; color: #fff; padding: 72px 64px 140px; }
.tm-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; align-items: center; width: min(100%, 1240px); margin: 0 auto; }
.tm-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.tm-hero h1 { font-size: clamp(40px, 4.1vw, 58px); line-height: 1.02; font-weight: 500; letter-spacing: -0.03em; color: #fff; }
.tm-hero p { max-width: 560px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.84); }
.tm-hero .book-form { margin-top: 8px; }
.tm-hero-art { position: relative; height: 380px; }
.tm-props { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; width: min(100% - 96px, 1180px); margin: -96px auto 0; padding: 32px 40px; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(10,23,64,.05), 0 30px 60px -36px rgba(10,23,64,.4); }
.tm-props h3 { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.tm-props p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tm-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); }
.tm-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Thumbnail-style cards: white, rounded, blocky, few words */
.tv-card { position: absolute; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: #fff; border-radius: 16px; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(3,10,40,.55); }
.tv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; }
.tv-pill { font-style: normal; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); }
.tv-big { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.tv-split { display: flex; gap: 3px; height: 12px; }
.tv-split i { border-radius: 3px; } .tv-split .s1 { flex: 55; background: var(--p1); } .tv-split .s2 { flex: 21; background: #9db4f0; } .tv-split .s3 { flex: 24; background: #cfd3dc; }
.tv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); }
.tv-legend span, .tv-list span { display: inline-flex; align-items: center; gap: 7px; }
.tv-legend i, .tv-list i { width: 9px; height: 9px; border-radius: 2px; }
.tv-card .s1 { background: var(--p1); } .tv-card .s2 { background: #9db4f0; } .tv-card .s3 { background: #cfd3dc; }
.tv-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.tv-minis div { display: grid; gap: 2px; } .tv-minis span { font-size: 12px; color: var(--ink-3); } .tv-minis b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.tv-chip { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: 0 18px 40px -18px rgba(3,10,40,.5); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.tv-chip i { width: 10px; height: 10px; border-radius: 50%; } .tv-chip .d1 { background: var(--p1); } .tv-chip .d2 { background: var(--p3); } .tv-chip .d3 { background: #aab1bf; }
.tv-spend { left: 6%; top: 8%; width: 76%; }
.tv-chip-a { right: 0; top: 0; } .tv-chip-b { left: 0; bottom: 6%; }
/* Report rows: a visual panel beside a short title and line, alternating sides */
.tm-reports { padding: 136px 0 136px; background: var(--paper); }
.tm-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; align-items: center; width: min(100%, 1180px); margin: 0 auto; }
.tm-row + .tm-row { margin-top: 96px; }
.tm-flip .tm-vis { order: 2; }
.tm-copy h3 { font-size: 30px; line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.tm-copy p { margin-top: 14px; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.tm-points { display: grid; gap: 12px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; max-width: 46ch; }
.tm-points li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.tm-points li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232455d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.tm-vis { position: relative; isolation: isolate; overflow: hidden; height: 440px; border-radius: 22px; }
.tm-vis-grad { background: #0d2b8f; }
.tm-vis-soft { background: linear-gradient(135deg, #e9eeff 0%, #f6f7fb 60%, #eef3ff 100%); border: 1px solid var(--line); }
.tm-vis .tv-card { z-index: 1; }
.tv-bars { left: 9%; top: 11%; width: 68%; }
.tv-rank { display: grid; gap: 12px; }
.tv-rank div { display: grid; grid-template-columns: 86px minmax(0, 1fr) 54px; align-items: center; gap: 12px; font-size: 13px; }
.tv-rank span { color: var(--ink-2); } .tv-rank b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tv-rank i { height: 12px; border-radius: 4px; }
.tv-rank .w100 { width: 100%; } .tv-rank .w77 { width: 77%; } .tv-rank .w57 { width: 57%; } .tv-rank .w46 { width: 46%; } .tv-rank .w37 { width: 37%; }
.tv-rank .c1 { background: var(--p1); } .tv-rank .c2 { background: var(--p2); } .tv-rank .c3 { background: var(--p3); } .tv-rank .c4 { background: var(--p4); } .tv-rank .c5 { background: #aebff0; }
.tv-kpi { gap: 4px; padding: 18px 22px; } .tv-kpi span { font-size: 12.5px; color: var(--ink-3); } .tv-kpi b { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; } .tv-kpi small { font-size: 12.5px; color: var(--ink-2); }
.tv-float-br { right: 7%; bottom: 9%; }
.tv-ringcard { left: 10%; top: 20%; width: 80%; }
.tv-ring-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: center; }
.tv-ring { position: relative; display: grid; place-content: center; justify-items: center; aspect-ratio: 1; }
.tv-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--p1) 0 55%, #9db4f0 0 76%, #cfd3dc 0); -webkit-mask: radial-gradient(farthest-side, transparent 64%, #000 65%); mask: radial-gradient(farthest-side, transparent 64%, #000 65%); }
.tv-ring b { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; } .tv-ring small { font-size: 12px; color: var(--ink-3); }
.tv-list { display: grid; gap: 12px; font-size: 14px; color: var(--ink-2); }
.tv-list b { margin-left: auto; padding-left: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tv-list span { display: flex; }
.tv-float-tr { right: 7%; top: 8%; }
.tv-life { left: 9%; top: 10%; width: 74%; }
.tv-curves { width: 100%; height: 150px; }
.tv-curves path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.tv-curves .mid { stroke: #cfd3dc; stroke-width: 1.5; stroke-dasharray: 5 5; }
.tv-curves .c-h { stroke: #aab1bf; } .tv-curves .c-a { stroke: var(--p2); } .tv-curves .c-b { stroke: var(--p1); }
.tv-legend-lg { gap: 8px 22px; font-size: 13.5px; } .tv-legend-lg b { margin-left: 4px; font-weight: 600; color: var(--ink); }
.tv-legend .lh { background: #aab1bf; } .tv-legend .la { background: var(--p2); } .tv-legend .lb { background: var(--p1); }
.tv-float-bl { left: 7%; bottom: 9%; }
.tv-recs { left: 12%; top: 50%; width: 76%; transform: translateY(-50%); gap: 10px; }
.tv-rec { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.tv-rec i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-style: normal; font-weight: 700; }
.tv-rec i.up { background: var(--blue-soft); color: var(--blue); } .tv-rec i.down { background: var(--chip); color: var(--ink-3); } .tv-rec i.new { background: rgba(127,75,243,.12); color: var(--p2); }
.tv-rec b { display: block; font-size: 14.5px; font-weight: 600; } .tv-rec span { font-size: 13px; color: var(--ink-3); }
/* Built for teams: a rounded gradient band with light tiles */
.tm-built { padding: 0 16px 120px; background: var(--paper); }
.tm-built-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: #0d2b8f; color: #fff; }
.tm-built-inner { position: relative; z-index: 1; width: min(100% - 128px, 1180px); margin: 0 auto; padding: 104px 0 112px; }
.tm-built .section-head { max-width: 980px; }
.tm-built h2 { color: #fff; }
.tm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tm-tile { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tm-tile h3 { margin-top: 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
.tm-tile p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.8); }
.tm-tile .tm-ico { background: rgba(255,255,255,.16); } .tm-tile .tm-ico svg { stroke: #fff; }
.pricing { padding: 120px 0 136px; background: var(--paper); }
.pricing-head { margin-inline: auto; text-align: center; justify-items: center; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: min(100%, 1180px); margin: 0 auto; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 18px; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.plan-team { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft), 0 24px 48px -32px rgba(10,23,64,.35); }
.plan-name { display: grid; gap: 2px; }
.plan-name h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.plan-name span { font-size: 14.5px; color: var(--ink-3); }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price b { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.plan-price span { font-size: 15px; color: var(--ink-3); }
.plan-cta { display: inline-flex; align-items: center; justify-content: center; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font: 500 15px var(--font-sans); cursor: pointer; transition: background-color .2s, border-color .2s; }
.plan-cta:hover { border-color: var(--ink-3); }
.plan-team .plan-cta { background: var(--blue); border-color: var(--blue); color: #fff; } .plan-team .plan-cta:hover { background: var(--blue-ink); }
.plan ul { display: grid; gap: 10px; margin: 6px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }
.plan li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.plan li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232455d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.plan li.plan-lead { padding-left: 0; font-weight: 500; color: var(--ink); } .plan li.plan-lead::before { content: none; }
.plans-note { margin-top: 28px; text-align: center; font-size: 15px; color: var(--ink-3); }
.plans-note a { color: var(--blue); }
@media (max-width: 1100px) {
.tm-hero-panel { padding: 64px 40px 140px; }
.tm-hero-grid, .tm-row { grid-template-columns: 1fr; gap: 40px; }
.tm-hero-art { height: 340px; max-width: 560px; }
.tm-flip .tm-vis { order: 0; }
.tm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plans { grid-template-columns: 1fr; width: min(100%, 560px); }
}
@media (max-width: 760px) {
.tm-hero { padding: 80px 12px 0; }
.tm-hero-panel { min-height: 0; padding: 48px 24px 120px; border-radius: 22px; }
.tm-hero p { font-size: 16px; }
.tm-hero-art { height: 300px; }
.tv-spend { left: 0; width: 100%; top: 14%; } .tv-chip-a { top: 0; right: auto; left: 0; } .tv-chip-b { display: none; }
.tv-big { font-size: 36px; }
.tm-props { grid-template-columns: 1fr; gap: 22px; width: calc(100% - 40px); margin-top: -80px; padding: 24px; }
.tm-reports { padding: 88px 0 72px; }
.tm-row + .tm-row { margin-top: 64px; }
.tm-copy h3 { font-size: 24px; } .tm-copy p { font-size: 16px; }
.tm-vis { height: 360px; }
.tv-bars, .tv-life, .tv-ringcard, .tv-recs { left: 5%; width: 90%; }
.tv-ring-row { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; } .tv-ring b { font-size: 24px; }
.tv-rank div { grid-template-columns: 72px minmax(0, 1fr) 50px; }
.tv-float-br, .tv-float-tr, .tv-float-bl { display: none; }
.tm-built { padding: 0 12px 72px; }
.tm-built-inner { width: calc(100% - 48px); padding: 64px 0 72px; }
.tm-tiles, .plans { grid-template-columns: 1fr; }
.tm-tile, .plan { padding: 24px; }
.pricing { padding: 72px 0 88px; }
.tm-compare { padding-bottom: 72px; }
.tm-compare .cmp-wrap { padding: 4px 16px; }
}
/* The demo card reads left to right like Clipbook's: copy over the deep blue, the bright glow off to the right */
.book-panel { justify-content: flex-start; padding: 88px 96px; }
.book-inner { align-items: flex-start; text-align: left; max-width: 980px; }
.book-inner h2 { font-size: clamp(38px, 4.4vw, 60px); }
.book-inner p { max-width: 50ch; }
@media (max-width: 760px) {
.book-panel { padding: 56px 24px; }
.book-panel { background: radial-gradient(130% 60% at 30% 38%, rgba(12,30,130,.38) 0%, rgba(12,30,130,0) 75%), radial-gradient(95% 45% at 100% 100%, rgba(70,220,255,.95) 0%, rgba(70,220,255,0) 72%), radial-gradient(60% 30% at 0% 100%, rgba(70,110,255,.6) 0%, rgba(70,110,255,0) 70%), linear-gradient(170deg, #1a3ec6 0%, #1d47d0 45%, #2264e6 78%, #2590f2 100%); }
}
/* Themed dropdown for the contact forms (replaces the browser's select menu) */
.dd { position: relative; }
.dd select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid #d9dee8; border-radius: 10px; background: #fff; font: 400 15px var(--font-sans); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dd-btn:hover { border-color: #c3cad8; }
.dd-btn:focus-visible, .dd.open .dd-btn { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,85,214,.15); }
.dd-btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.dd.open .dd-btn svg { transform: rotate(180deg); }
.dd-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 264px; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(10,23,64,.08), 0 18px 40px -12px rgba(10,23,64,.3); }
.dd.up .dd-list { top: auto; bottom: calc(100% + 6px); }
.dd-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.dd-list li.act { background: #f1f4fb; }
.dd-list li[aria-selected="true"] { color: var(--blue); font-weight: 500; }
.dd-list li svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.dd-list li[aria-selected="true"] svg { visibility: visible; }
/* In the slide-out panel, the dropdown matches the panel's smaller inputs; the arrow keeps the same 14px inset. */
.contact-form .dd-btn { padding: 10px 14px 10px 12px; font-size: 14px; border-color: var(--line-strong); border-radius: 6px; }
.contact-form .dd-list li { font-size: 14px; }
/* Slide-out panel: the same motion as withsable.com's (slides in from the right; opacity .2s, transform .6s ease) */
.contact { top: 16px; right: 16px; transform: translateX(120%); opacity: 0; transition: opacity .2s, transform .6s; }
.contact.open { transform: none; opacity: 1; }
@media (max-width: 479px) { .contact { transform: translateY(-120%); } .contact.open { transform: none; } }
/* After sending: one line of thanks, centred with even space around it */
.contact-form[hidden], .ct-form[hidden] { display: none; }
.contact-done:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; padding: 32px 24px; border: 1px solid var(--line); border-radius: 8px; text-align: center; box-sizing: border-box; }
.contact-done h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.done-ic { width: 40px; height: 40px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.done-ic circle { fill: #eef3ff; stroke: none; }