/* Hark AI Agent — website. Monochrome, dark, same tokens as the extension. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/assets/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/assets/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-display: swap; src: url("/assets/inter-display-700.woff") format("woff"); }
:root {
  --bg: #0a0a0a; --bg-2: #0f0f0f; --surface: #121212; --surface-2: #191919; --surface-3: #232323;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); --line-3: rgba(255,255,255,.3);
  --text: #f4f4f4; --text-2: #a8a8a8; --text-3: #7c7c7c; --inv: #f4f4f4; --inv-text: #0a0a0a;
  --r-sm: 10px; --r: 14px; --r-lg: 22px; --r-xl: 30px;
  --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Bitstream Charter", Charter, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Roboto Mono", monospace;
  --shadow: 0 30px 80px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04);
  color-scheme: dark;
}
@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
main { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16.5px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: 1.06em; }
::selection { background: var(--inv); color: var(--inv-text); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--inv); color: var(--inv-text); font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1228px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 860px; }
.i { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
.i svg { width: 100%; height: 100%; }
.center { text-align: center; }
.fine { font-size: 13px; color: var(--text-3); }
kbd { font: 600 12px/1 var(--mono); padding: 5px 7px; border-radius: 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--surface-2); color: var(--text); }

/* background */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bg-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%); opacity: .7; }
.bg-glow { position: absolute; left: 50%; top: -340px; width: 1100px; height: 700px; margin-left: -550px; background: radial-gradient(closest-side, rgba(255,255,255,.09), transparent 70%); }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; transition: transform .25s var(--ease), background .2s, border-color .2s, box-shadow .3s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--inv); color: var(--inv-text); overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(0,0,0,.14) 50%, transparent 65%); transform: translateX(-120%); }
.btn-primary:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
.btn-primary:hover { box-shadow: 0 0 0 5px rgba(255,255,255,.1), 0 14px 40px -12px rgba(255,255,255,.35); transform: translateY(-1px); }
.btn-primary .i:last-child { transition: transform .3s var(--ease); }
.btn-primary:hover .i:last-child { transform: translateX(3px); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--line-3); background: rgba(255,255,255,.06); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16px; }
.btn-sm { height: 38px; padding: 0 15px; font-size: 14px; }
.btn-sm .i { width: 16px; height: 16px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, backdrop-filter .3s; }
.nav.stuck { background: rgba(10,10,10,.72); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 19px/1 var(--display); letter-spacing: -0.03em; }
.logo { width: 32px; height: 32px; flex: none; }
.logo svg { width: 100%; height: 100%; }
.logo-bg { fill: var(--inv); } .logo-fg { fill: var(--inv-text); }
.brand:hover .logo { animation: wob .6s var(--spring); }
@keyframes wob { 30% { transform: rotate(-8deg) scale(1.06); } 60% { transform: rotate(5deg); } }
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a { padding: 8px 12px; border-radius: 999px; font-size: 14.5px; color: var(--text-2); transition: color .2s, background .2s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); background: rgba(255,255,255,.06); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; }
.burger i { position: absolute; left: 12px; right: 12px; height: 1.6px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.burger i:first-child { top: 15px; } .burger i:last-child { top: 22px; }
.burger[aria-expanded="true"] i:first-child { top: 19px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { top: 19px; transform: rotate(-45deg); }
.mnav { display: none; flex-direction: column; gap: 2px; padding: 8px 24px 24px; background: rgba(10,10,10,.96); border-bottom: 1px solid var(--line); }
.mnav a:not(.btn) { padding: 13px 4px; font-size: 17px; border-bottom: 1px solid var(--line); }
.mnav .btn { margin-top: 16px; height: 50px; }
.nav.open .mnav { display: flex; }

/* hero */
.hero { padding: 56px 0 40px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); font-size: 13px; color: var(--text-2); }
.pill b { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--inv); color: var(--inv-text); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
a.pill:hover { border-color: var(--line-3); color: var(--text); }
h1 { font: 700 clamp(42px, 6.1vw, 82px)/.98 var(--display); letter-spacing: -0.045em; margin: 22px 0 20px; text-wrap: balance; }
h1 em, h2 em { letter-spacing: -0.03em; }
.lede { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--text-2); max-width: 560px; text-wrap: pretty; }
.hero .row { margin-top: 32px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: 13.5px; color: var(--text-2); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust .i { width: 15px; height: 15px; color: var(--text); }
.w { display: inline-block; }
.js .hero h1 .w, .js .phero h1 .w { opacity: 0; transform: translateY(.5em) rotate(2deg); filter: blur(8px); animation: wordIn .9s var(--ease) forwards; animation-delay: calc(.08s + var(--i) * 70ms); }
@keyframes wordIn { to { opacity: 1; transform: none; filter: none; } }
.js .hero .rise, .js .phero .rise { opacity: 0; transform: translateY(16px); animation: rise .9s var(--ease) forwards; animation-delay: calc(.35s + var(--d, 0) * 90ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* product demo (browser + side panel) */
.demo { position: relative; perspective: 1600px; }
.demo-wheel { position: absolute; right: -150px; top: -130px; width: 520px; height: 520px; color: rgba(255,255,255,.055); animation: spin 90s linear infinite; pointer-events: none; }
.demo-wheel svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes spin { to { transform: rotate(360deg); } }
.browser { position: relative; border-radius: 18px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .5s var(--ease); will-change: transform; }
.bar { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.url { margin-left: 12px; flex: 1; max-width: 320px; height: 26px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font: 11.5px var(--mono); color: var(--text-3); display: flex; align-items: center; gap: 6px; padding: 0 10px; overflow: hidden; white-space: nowrap; }
.url .i { width: 11px; height: 11px; }
.bar .ext { margin-left: auto; width: 24px; height: 24px; border-radius: 7px; }
.bar .ext svg { width: 100%; height: 100%; }
.dbody { display: grid; grid-template-columns: minmax(0, 1fr) 286px; height: 432px; }
.pane { position: relative; padding: 20px 22px; overflow: hidden; }
.pane > div { animation: paneIn .5s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } }
.panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.p-head { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-bottom: 1px solid var(--line); font: 700 13.5px var(--display); }
.p-head .logo { width: 20px; height: 20px; }
.p-tabs { margin-left: auto; display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface-2); font: 600 10.5px var(--font); color: var(--text-3); }
.p-tabs span { padding: 4px 8px; border-radius: 999px; transition: background .3s, color .3s; }
.p-tabs span.on { background: var(--surface-3); color: var(--text); }
.p-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 12px; font-size: 11.8px; line-height: 1.45; overflow: hidden; }
.p-u { align-self: flex-end; background: var(--surface-2); padding: 7px 11px; border-radius: 13px 13px 4px 13px; max-width: 92%; animation: msgIn .4s var(--ease) both; }
.p-a { display: flex; flex-direction: column; gap: 6px; animation: msgIn .4s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.p-a .who { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.wh { width: 13px; height: 13px; display: block; }
.wh svg { width: 100%; height: 100%; fill: currentColor; }
.wh.spin { animation: spin 1.1s linear infinite; }
.p-a ul { padding-left: 15px; list-style: disc; color: var(--text-2); display: grid; gap: 3px; }
.p-a ul b { color: var(--text); font-weight: 600; }
.p-a p { color: var(--text-2); }
.p-steps { border: 1px solid var(--line); border-radius: 11px; padding: 8px 9px; display: grid; gap: 6px; }
.st { display: flex; align-items: center; gap: 7px; color: var(--text-2); animation: msgIn .35s var(--ease) both; }
.st b { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-3); display: grid; place-items: center; flex: none; }
.st b svg { width: 9px; height: 9px; opacity: 0; }
.st.ok b { background: var(--inv); border-color: var(--inv); color: var(--inv-text); } .st.ok b svg { opacity: 1; }
.st.now { color: var(--text); font-weight: 600; }
.ask { border-radius: 11px; background: var(--surface-2); padding: 9px 10px; display: grid; gap: 7px; animation: msgIn .4s var(--spring) both; }
.ask strong { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.ask strong .i { width: 13px; height: 13px; }
.ask small { color: var(--text-2); font-size: 11px; }
.ask-b { display: flex; gap: 6px; }
.ask-b span { height: 25px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 11px; border: 1px solid var(--line-2); transition: transform .2s; }
.ask-b .yes { background: var(--inv); color: var(--inv-text); border-color: var(--inv); }
.ask-b .yes.hit { transform: scale(.92); }
.ask-b .i { width: 10px; height: 10px; }
.tr-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; animation: msgIn .4s var(--ease) both; }
.tr-row .i { width: 22px; height: 22px; padding: 5px; border-radius: 7px; background: var(--surface-2); }
.tr-row b { display: block; font-weight: 600; }
.tr-row small { color: var(--text-3); font-size: 10.5px; }
.tr-row em { margin-left: auto; font: 700 9px var(--font); letter-spacing: .05em; padding: 3px 6px; border-radius: 999px; background: var(--inv); color: var(--inv-text); }
.p-input { margin: 0 10px 10px; min-height: 38px; border-radius: 12px; border: 1px solid var(--line-2); display: flex; align-items: center; gap: 6px; padding: 0 6px 0 11px; font-size: 11.8px; color: var(--text-2); transition: border-color .3s, box-shadow .3s; }
.p-input.typing { border-color: var(--line-3); box-shadow: 0 0 0 3px var(--line); }
.p-input > span[data-typing] { flex: 1; white-space: nowrap; overflow: hidden; color: var(--text); }
.p-input > span[data-typing]:empty::before { content: attr(data-ph); color: var(--text-3); }
.p-input .i { width: 14px; height: 14px; color: var(--text-3); }
.p-input .go { width: 24px; height: 24px; border-radius: 50%; background: var(--inv); color: var(--inv-text); display: grid; place-items: center; }
.p-input .go svg { width: 12px; height: 12px; }
.caret::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--text); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* left-pane mock sites */
.mk-h { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.mk-h i { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font: 600 12px var(--font); font-style: normal; color: var(--text-2); }
.mk-h b { font-size: 13px; } .mk-h small { display: block; color: var(--text-3); font-size: 11px; }
.mk-t { font: 700 17px/1.2 var(--display); letter-spacing: -0.02em; margin-bottom: 12px; }
.mk-p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 9px; }
.mk-p mark { background: rgba(255,255,255,.14); color: var(--text); border-radius: 3px; padding: 0 2px; transition: background .4s; }
.l { height: 8px; border-radius: 5px; background: var(--surface-3); margin: 10px 0; }
.l.dk { background: var(--text); opacity: .7; height: 10px; }
.mk-reply { margin-top: 14px; min-height: 74px; border-radius: 12px; border: 1px dashed var(--line-3); padding: 10px 12px; font-size: 12px; color: var(--text-3); transition: background .4s, border-color .4s, color .4s; }
.mk-reply.on { border-style: solid; border-color: var(--text); background: var(--surface-2); color: var(--text); }
.mk-form { display: grid; gap: 9px; max-width: 250px; }
.mk-form label { display: grid; gap: 4px; font-size: 10.5px; color: var(--text-3); }
.mk-form label span { height: 30px; border-radius: 8px; border: 1px solid var(--line-2); padding: 0 10px; display: flex; align-items: center; font-size: 12px; color: var(--text); transition: border-color .3s, box-shadow .3s; }
.mk-form label span:empty::before { content: "—"; color: var(--text-3); }
.mk-form label.hot span { border-color: var(--text); box-shadow: 0 0 0 3px var(--line); }
.mk-btn { height: 34px; border-radius: 9px; background: var(--inv); color: var(--inv-text); font: 600 12px var(--font); display: grid; place-items: center; margin-top: 4px; transition: transform .2s, box-shadow .3s; }
.mk-btn.hot { box-shadow: 0 0 0 4px var(--line-2); }
.mk-btn.hit { transform: scale(.96); }
.mk-shop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-prod { border: 1px solid var(--line); border-radius: 12px; padding: 10px; font-size: 11.5px; transition: border-color .3s, box-shadow .3s; }
.mk-prod i { display: block; height: 62px; border-radius: 8px; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); margin-bottom: 8px; }
.mk-prod b { display: block; } .mk-prod small { color: var(--text-2); }
.mk-prod.hot { border-color: var(--text); box-shadow: 0 0 0 3px var(--line); }
.mk-order { border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: left; }
.mk-order .okc { width: 34px; height: 34px; border-radius: 50%; background: var(--inv); color: var(--inv-text); display: grid; place-items: center; margin-bottom: 12px; }
.mk-order .okc svg { width: 16px; height: 16px; }
.mk-img { height: 190px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); display: grid; place-items: center; position: relative; overflow: hidden; }
.mk-img svg { width: 78%; height: auto; }
.cursor { position: absolute; left: 0; top: 0; width: 16px; height: 16px; z-index: 5; pointer-events: none; opacity: 0; transition: transform .7s var(--ease), opacity .3s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.cursor svg { width: 100%; height: 100%; fill: var(--text); stroke: var(--bg); stroke-width: 1.4; }
.demo-tabs { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.demo-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-2); position: relative; overflow: hidden; transition: color .2s, border-color .2s; }
.demo-tabs button .i { width: 14px; height: 14px; }
.demo-tabs button.on { color: var(--text); border-color: var(--line-3); }
.demo-tabs button.on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--text); transform-origin: left; animation: prog var(--dur, 12s) linear forwards; }
@keyframes prog { from { transform: scaleX(0); } }

/* marquee */
.marq { margin-top: 44px; padding: 18px 0; border-block: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marq-t { display: flex; gap: 12px; width: max-content; animation: marq 60s linear infinite; }
.marq:hover .marq-t { animation-play-state: paused; }
.marq-t > span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font-size: 14px; color: var(--text-2); white-space: nowrap; }
.marq .i { width: 15px; height: 15px; color: var(--text); }
@keyframes marq { to { transform: translateX(-50%); } }

/* sections */
.sec { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.sec.tight { padding: clamp(48px, 6vw, 80px) 0; }
.sec.alt { background: linear-gradient(180deg, transparent, rgba(255,255,255,.025) 20%, rgba(255,255,255,.025) 80%, transparent); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--line-3); }
h2 { font: 700 clamp(32px, 4.3vw, 56px)/1.03 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
h3 { font: 700 20px/1.25 var(--display); letter-spacing: -0.02em; }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; }
.sec-head.center .eyebrow::after { content: ""; width: 18px; height: 1px; background: var(--line-3); }
.sec-head p.lede { margin-top: 18px; }
.sec-head.center p.lede { margin-inline: auto; }

/* scroll reveal */
.js [data-r] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--rd, 0) * 70ms); }
.js [data-r].in { opacity: 1; transform: none; }

/* cards */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color .3s, transform .4s var(--ease), background .3s; }
.card p { color: var(--text-2); font-size: 15px; }
.card-i { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; margin-bottom: 8px; transition: background .3s, color .3s, transform .4s var(--spring); }
.card-i svg { width: 19px; height: 19px; }
a.card:hover { border-color: var(--line-3); transform: translateY(-3px); }
a.card:hover .card-i { background: var(--inv); color: var(--inv-text); transform: rotate(-6deg) scale(1.05); }
.more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.more svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
a.card:hover .more svg, a:hover > .more svg { transform: translateX(4px); }
.spot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,.085), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.spot:hover::before { opacity: 1; }

/* feature rows */
.feat { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding: clamp(28px, 4vw, 56px) 0; }
.feat.flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); } .feat.flip .feat-copy { order: 2; }
.feat-copy h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.035em; margin-bottom: 14px; }
.feat-copy > p { color: var(--text-2); max-width: 480px; }
.ticks { display: grid; gap: 10px; margin: 22px 0 26px; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; }
.ticks .i { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--inv); color: var(--inv-text); margin-top: 2px; }
.tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; margin-bottom: 18px; }
.tag .i { width: 14px; height: 14px; }
.textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; border-bottom: 1px solid var(--line-3); padding-bottom: 2px; transition: border-color .2s; }
.textlink:hover { border-color: var(--text); }
.textlink .i { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.textlink:hover .i { transform: translateX(3px); }
.stage { position: relative; border-radius: var(--r-xl); border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.06), transparent 60%), var(--surface); padding: clamp(18px, 3vw, 34px); min-height: 380px; display: grid; place-items: center; overflow: hidden; }
.stage .demo { width: 100%; }
.stage .dbody { height: 380px; grid-template-columns: minmax(0, 1fr) 262px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.step { position: relative; padding: 28px 26px 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); counter-increment: s; }
.step::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--inv); color: var(--inv-text); font: 700 15px var(--display); margin-bottom: 18px; }
.step p { color: var(--text-2); font-size: 15px; margin-top: 8px; }
.steps.col { grid-template-columns: 1fr; }
.steps.col .step { display: grid; grid-template-columns: 34px 1fr; column-gap: 18px; padding: 22px 24px; }
.steps.col .step::before { margin: 0; grid-row: span 3; }
.prompt { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-2); background: var(--bg-2); font: 13.5px/1.4 var(--mono); color: var(--text); }
.prompt .i { width: 15px; height: 15px; color: var(--text-3); }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento .card { grid-column: span 2; min-height: 200px; }
.bento .card.wide { grid-column: span 3; } .bento .card.big { grid-column: span 4; }
.bento .ask { max-width: 320px; margin-top: 14px; font-size: 13px; border: 1px solid var(--line); }
.bento .ask small { font-size: 12.5px; } .bento .ask-b span { height: 30px; font-size: 12.5px; padding: 0 14px; }
.stat { font: 700 clamp(40px, 5vw, 64px)/1 var(--display); letter-spacing: -0.04em; }

/* comparison table */
.cmp-wrap { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.cmp th, .cmp td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font: 700 15px var(--display); letter-spacing: -0.01em; background: var(--bg-2); position: sticky; top: 0; }
.cmp thead th.me { background: var(--inv); color: var(--inv-text); }
.cmp td:first-child, .cmp th:first-child { color: var(--text-2); width: 26%; font-weight: 400; }
.cmp td.me { background: rgba(255,255,255,.045); font-weight: 600; }
.cmp .y, .cmp .n, .cmp .p { display: inline-flex; align-items: center; gap: 8px; }
.cmp .y::before, .cmp .n::before, .cmp .p::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--inv) center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.cmp .n::before { background: transparent center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7c7c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); border: 1px solid var(--line-2); }
.cmp .p::before { background: transparent; border: 1px solid var(--line-3); box-shadow: inset 9px 0 0 var(--text-2); }
.cmp .n { color: var(--text-3); }
.verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.verdict .card ul { display: grid; gap: 9px; margin-top: 6px; }
.verdict .card li { display: flex; gap: 10px; font-size: 15px; color: var(--text-2); }
.verdict .card li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text); margin-top: 10px; flex: none; }
.verdict .card.me { border-color: var(--line-3); background: linear-gradient(180deg, rgba(255,255,255,.07), var(--surface)); }
.note { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-2); font-size: 14px; color: var(--text-2); }
.note .i { margin-top: 3px; color: var(--text); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.plan.best { border-color: var(--line-3); background: linear-gradient(180deg, rgba(255,255,255,.09), var(--surface) 55%); }
.plan .badge { position: absolute; top: -12px; left: 24px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--inv); color: var(--inv-text); font: 700 10.5px/24px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.plan h3 { font-size: 17px; color: var(--text-2); font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.price { font: 700 46px/1 var(--display); letter-spacing: -0.04em; margin: 14px 0 6px; }
.price span { font: 400 15px var(--font); color: var(--text-2); letter-spacing: 0; margin-left: 4px; }
.plan .sub { font-size: 13.5px; color: var(--text-2); min-height: 22px; }
.plan ul { display: grid; gap: 10px; margin: 22px 0 26px; font-size: 14.5px; color: var(--text-2); }
.plan li { display: flex; gap: 10px; } .plan li .i { width: 16px; height: 16px; margin-top: 3px; color: var(--text); }
.plan .btn { margin-top: auto; }

/* faq */
.qa-list { margin-top: 36px; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; cursor: pointer; list-style: none; font: 600 17.5px/1.35 var(--font); letter-spacing: -0.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); flex: none; transition: transform .4s var(--ease), background .3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--text); transition: transform .4s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i { transform: rotate(180deg); background: var(--inv); } .qa[open] summary i::before, .qa[open] summary i::after { background: var(--inv-text); }
.qa[open] summary i::after { transform: rotate(0); }
.qa-a { padding: 0 48px 24px 2px; color: var(--text-2); }
.qa[open] .qa-a { animation: msgIn .4s var(--ease); }
.qa-a a, .prose a, .lede a, .card p a, .note a, .legal a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.qa-a a:hover, .prose a:hover, .legal a:hover { text-decoration-color: var(--text); }

/* final cta */
.final-card { position: relative; overflow: hidden; text-align: center; padding: clamp(56px, 8vw, 104px) 24px; border-radius: var(--r-xl); border: 1px solid var(--line-2); background: radial-gradient(90% 120% at 50% 0%, rgba(255,255,255,.1), transparent 60%), var(--surface); }
.final-card h2 { max-width: 760px; margin: 0 auto 16px; }
.final-card > p { color: var(--text-2); max-width: 520px; margin: 0 auto 30px; }
.final-card .row { justify-content: center; }
.final-card .fine { margin-top: 22px; }
.final-wheel { position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; margin: -380px; color: rgba(255,255,255,.04); animation: spin 120s linear infinite; pointer-events: none; }
.final-wheel svg { width: 100%; height: 100%; fill: currentColor; }
.final-card > *:not(.final-wheel) { position: relative; }

/* inner page hero */
.crumbs { max-width: 1228px; margin: 0 auto; padding: 22px 24px 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--text-3); }
.crumbs a:hover { color: var(--text); } .crumbs i { font-style: normal; opacity: .5; } .crumbs span { color: var(--text-2); }
.phero { padding: 40px 0 16px; }
.phero h1 { font-size: clamp(38px, 5.2vw, 68px); max-width: 920px; margin-top: 18px; }
.phero .lede { max-width: 680px; }
.phero .row { margin-top: 28px; }
.phero.center { text-align: center; } .phero.center h1, .phero.center .lede { margin-inline: auto; } .phero.center .row { justify-content: center; }
.phero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.vs { display: inline-flex; align-items: center; gap: 12px; }
.vs .logo { width: 40px; height: 40px; }
.vs b { font: 700 15px var(--display); width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); display: grid; place-items: center; background: var(--surface-2); }
.vs i { font: italic 400 18px var(--serif); color: var(--text-3); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; font-size: 13px; color: var(--text-3); }

/* prose */
.prose { font-size: 17px; line-height: 1.7; color: #d2d2d2; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 2em; color: var(--text); }
.prose h3 { font-size: 21px; margin-top: 1.7em; color: var(--text); }
.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { display: grid; gap: .5em; padding-left: 1.3em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li::marker { color: var(--text-3); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--text); font: italic 400 22px/1.45 var(--serif); color: var(--text); }
.prose code { font: 14px var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--surface-2); color: var(--text); font-weight: 600; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 64px; align-items: start; }
.toc { position: sticky; top: 96px; font-size: 14px; }
.toc b { display: block; font: 600 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.toc a { display: block; padding: 7px 0 7px 14px; border-left: 1px solid var(--line); color: var(--text-2); transition: color .2s, border-color .2s; }
.toc a:hover, .toc a.on { color: var(--text); border-color: var(--text); }
.toc .btn { margin-top: 20px; width: 100%; border-left: 0; padding: 0 14px; color: var(--inv-text); }
.keyfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.keyfacts div { padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.keyfacts b { display: block; font: 700 19px var(--display); letter-spacing: -0.02em; color: var(--text); }
.keyfacts span { font-size: 13.5px; color: var(--text-2); }
.tldr { padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.06), transparent); }
.tldr b.k { display: block; font: 600 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.tldr p { color: var(--text); font-size: 17px; }

/* legal */
.legal { font-size: 16px; line-height: 1.7; color: #cfcfcf; }
.legal h2 { font-size: 24px; margin: 2.2em 0 .6em; color: var(--text); letter-spacing: -0.02em; }
.legal p, .legal ul { margin-top: .9em; }
.legal ul { list-style: disc; padding-left: 1.3em; display: grid; gap: .45em; }
.legal b, .legal strong { color: var(--text); font-weight: 600; }
.legal .tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin-top: 1.2em; }
.legal table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal th { background: var(--surface-2); color: var(--text); font-weight: 600; }
.legal tr:last-child td { border-bottom: 0; }
.legal .summary { padding: 22px 26px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); }
.legal .summary ul { margin-top: .4em; }

/* footer */
.foot { border-top: 1px solid var(--line); margin-top: 48px; padding: 64px 0 40px; background: var(--bg-2); }
.foot-top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; }
.foot-brand p { color: var(--text-2); font-size: 14.5px; max-width: 290px; margin: 16px 0 20px; }
.foot h4 { font: 600 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.foot-col a { display: block; padding: 5px 0; font-size: 14.5px; color: var(--text-2); transition: color .2s, transform .2s; }
.foot-col a:hover { color: var(--text); transform: translateX(2px); }
.foot-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.foot-bot p { max-width: 760px; }
.foot-word { font: 700 clamp(80px, 19vw, 260px)/.8 var(--display); letter-spacing: -0.06em; text-align: center; margin: 56px 0 -30px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; pointer-events: none; }

/* welcome */
.welcome .hero { padding-top: 40px; }
.pin-card { position: fixed; top: 84px; right: 22px; z-index: 40; width: 292px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: rise .8s 1.4s var(--ease) both; transition: opacity .3s, transform .3s; }
.pin-card.gone { opacity: 0 !important; transform: translateY(-10px); pointer-events: none; }
.pin-card > b { font-size: 14px; }
.pin-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.pin-x:hover { background: var(--surface-2); color: var(--text); }
.pin-x svg { width: 14px; height: 14px; }
.pin-arrow { position: absolute; top: -34px; right: 78px; width: 26px; height: 30px; color: var(--text); animation: nudge 1.4s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateY(-6px); } }
.pin-demo { position: relative; height: 92px; margin: 12px 0; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.tb { display: flex; align-items: center; gap: 6px; padding: 8px; }
.tb-url { flex: 1; height: 16px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
.tb-btn { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; animation: tbOn 4s infinite; }
.tb-btn svg { width: 14px; height: 14px; }
@keyframes tbOn { 20%, 70% { background: var(--surface-3); } }
.tb-dot { width: 4px; height: 14px; border-radius: 2px; background: var(--surface-3); }
.dd { position: absolute; right: 8px; top: 36px; width: 190px; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; animation: ddIn 4s infinite; }
.dd .logo { width: 16px; height: 16px; } .dd-name { flex: 1; }
.dd-pin { width: 14px; height: 14px; animation: pinOn 4s infinite; }
@keyframes ddIn { 0%, 15% { opacity: 0; transform: translateY(-4px); } 25%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pinOn { 0%, 55% { color: var(--text-3); } 65%, 100% { color: var(--text); } }
.cur { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text); background: var(--bg); animation: curMv 4s infinite; }
@keyframes curMv { 0% { left: 40%; top: 70%; } 18%, 24% { left: 82%; top: 12px; } 50%, 62% { left: 88%; top: 48px; } 100% { left: 40%; top: 70%; } }
.pin-card ol { display: grid; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.pin-card li { display: flex; gap: 8px; align-items: center; }
.pin-card .n { width: 20px; height: 20px; border-radius: 50%; background: var(--inv); color: var(--inv-text); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.pin-card .ic { display: inline-flex; vertical-align: -3px; width: 15px; height: 15px; margin: 0 2px; } .pin-card .ic svg { width: 15px; height: 15px; }
.caps { display: grid; gap: 10px; margin-top: 26px; }
.caps li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.caps .i { width: 32px; height: 32px; padding: 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); }
.hint { display: none; margin-top: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; color: var(--text-2); }
.hint.on { display: block; animation: msgIn .4s var(--ease); }
.burst { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 60; background: var(--bg); animation: burstOut 1.2s .9s var(--ease) forwards; }
.burst span { width: 200px; height: 200px; animation: bigSpin 1.3s cubic-bezier(.6,-0.2,.2,1.1) forwards; }
.burst svg { width: 100%; height: 100%; fill: var(--text); }
@keyframes bigSpin { 0% { transform: scale(.2) rotate(-200deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1) rotate(360deg); opacity: 1; } }
@keyframes burstOut { to { opacity: 0; visibility: hidden; } }

/* misc */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chips span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--text-2); transition: color .2s, border-color .2s, background .2s; }
.chips a:hover { color: var(--text); border-color: var(--line-3); background: rgba(255,255,255,.04); }
.e404 { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 80px 24px; }
.e404 .big { font: 700 clamp(110px, 22vw, 240px)/.85 var(--display); letter-spacing: -0.06em; background: linear-gradient(180deg, var(--text), rgba(255,255,255,.08)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.log { display: grid; gap: 16px; }
.log .card h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.log .card h3 small { font: 400 13px var(--font); color: var(--text-3); }
.log ul { list-style: disc; padding-left: 1.2em; color: var(--text-2); display: grid; gap: 6px; font-size: 15px; }

@media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-top { grid-template-columns: repeat(3, 1fr); } .foot-brand { grid-column: 1 / -1; } .article { grid-template-columns: 1fr; } .toc { display: none; } }
@media (max-width: 940px) {
  .nav-links { display: none; } .burger { display: block; }
  .hero-in, .phero-split, .feat, .feat.flip { grid-template-columns: 1fr; } .feat.flip .feat-copy { order: 0; }
  .g3, .steps, .keyfacts { grid-template-columns: 1fr 1fr; } .bento .card, .bento .card.wide, .bento .card.big { grid-column: span 3; }
  .demo-wheel { display: none; } .pin-card { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; } .wrap { padding: 0 18px; } .crumbs { padding-inline: 18px; }
  .g2, .g3, .g4, .steps, .plans, .verdict, .keyfacts { grid-template-columns: 1fr; } .bento { grid-template-columns: 1fr; } .bento .card, .bento .card.wide, .bento .card.big { grid-column: auto; }
  .dbody { grid-template-columns: 1fr; height: auto; } .pane { display: none; } .panel { border-left: 0; height: 400px; }
  .hero { padding-top: 32px; } .hero .btn-lg, .phero .btn-lg, .final-card .btn-lg { width: 100%; }
  .nav-cta .btn { display: none; } .foot-top { grid-template-columns: 1fr 1fr; } .qa-a { padding-right: 8px; }
  .demo-tabs button span:last-child { display: none; } .stage { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .js [data-r] { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}
.p-input.voice { border-color: var(--text); }
.p-input.voice .i:nth-of-type(2) { color: var(--inv-text); background: var(--inv); border-radius: 50%; padding: 2px; width: 18px; height: 18px; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(255,255,255,.14); } }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.kpi span { display: block; color: var(--text-2); font-size: 14.5px; margin-top: 8px; }
@media (max-width: 940px) { .kpis { grid-template-columns: 1fr 1fr; } }
.toc .btn { display: flex; }
/* welcome on the site */
.welcome .kbdline { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 14px; }
.welcome .kbd { display: inline-flex; gap: 4px; }
.welcome .hint kbd { margin: 0 1px; }
.wpane .mk-h { margin-bottom: 14px; }
.welcome [hidden] { display: none !important; }
.welcome .nav-cta > .btn { display: none; }