:root {
  --bg: #fafafa; --ink: #000; --muted: #4d4d4d; --line: #d6d6d6;
  --font: "Inter Tight", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ---------- navigation: wordmark · links · log in + get started ---------- */
.nav { position: sticky; top: 0; z-index: 10; background: transparent; transition: background .3s, box-shadow .3s; }
/* a soft wash at the very top in Kovi's glazes (heather, sage, periwinkle, a breath of clay), fading into the page */
.wash { position: absolute; left: 0; right: 0; top: 0; height: 760px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 70% at 12% 0%, rgba(154,132,182,.32), transparent 70%),
    radial-gradient(40% 62% at 50% 0%, rgba(138,157,132,.30), transparent 70%),
    radial-gradient(48% 70% at 90% 0%, rgba(142,163,207,.34), transparent 70%),
    radial-gradient(30% 40% at 30% 0%, rgba(196,114,79,.12), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
body { position: relative; isolation: isolate; }
.nav-in { height: 80px; padding: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.brand canvas { width: 32px; height: 32px; display: block; }
.links { display: flex; gap: 34px; }
.links a, .login { font-size: 15.5px; font-weight: 500; letter-spacing: -.005em; }
.links a:hover, .login:hover { opacity: .6; }
.actions { justify-self: end; display: flex; align-items: center; gap: 24px; }
.cta { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; transition: background .2s; }
.cta:hover { background: #333; }
.nav.scrolled { background: rgba(250,250,250,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 #ececec; }
/* the phone menu (kovi.js): a button in the bar, a sheet under it */
.nav-menu { display: none; position: relative; width: 40px; height: 40px; margin-right: -6px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
.nav-menu span { position: absolute; left: 11px; right: 11px; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform .25s, top .25s; }
.nav-menu span:first-child { top: 15px; } .nav-menu span:last-child { top: 23px; }
.nav.open .nav-menu span:first-child { top: 19px; transform: rotate(45deg); } .nav.open .nav-menu span:last-child { top: 19px; transform: rotate(-45deg); }
.nav.open { background: #fafafa; box-shadow: 0 1px 0 #ececec; }
.nav-sheet { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 64px); overflow-y: auto; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); background: #fafafa; box-shadow: 0 1px 0 #ececec, 0 24px 40px -24px rgba(0,0,0,.18); animation: ns-in .22s ease-out; }
@keyframes ns-in { from { opacity: 0; transform: translateY(-6px); } }
.nav-sheet a { display: flex; align-items: center; }
.ns-main a { min-height: 56px; border-bottom: 1px solid #ececec; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.ns-more { display: grid; padding: 10px 0 18px; }
.ns-more a { min-height: 44px; font-size: 16px; color: var(--muted); }
.nav-sheet a[aria-current="page"] { color: var(--glaze, #c4724f); }
.ns-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ns-acts a { justify-content: center; height: 48px; border-radius: 12px; font-size: 15.5px; font-weight: 500; }
.ns-login { box-shadow: inset 0 0 0 1px #d6d6d6; background: #fff; }
.ns-cta { background: var(--ink); color: #fff; }
.ns-acts a:only-child { grid-column: 1 / -1; }
html.nav-locked, html.nav-locked body { overflow: hidden; }

/* ---------- the top section: eyebrow · two-line headline · composer · note ---------- */
.head { padding: 88px 16px 80px; text-align: center; }
.eyebrow { margin: 0 0 28px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
h1 { margin: 0; text-wrap: balance; font-weight: 500; font-size: clamp(36px, 4.3vw, 64px); line-height: 1.08; letter-spacing: -.035em; }
h1 .line { display: block; }
.w { display: inline-block; transition: opacity .45s ease, filter .45s ease, transform .45s ease; }
.w.out { opacity: 0; filter: blur(8px); transform: translateY(.08em); }
/* the composer, where their button sits */
.ask { position: relative; width: min(780px, 100%); margin: 40px auto 0; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 22px; transition: border-color .2s, box-shadow .2s; }
.ask:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.ask textarea { display: block; width: 100%; min-height: 124px; max-height: 260px; resize: none; border: 0; outline: 0; background: transparent; padding: 22px 76px 22px 24px; font: 400 19px/1.5 var(--font); color: var(--ink); }
.ask textarea::placeholder { color: #8a8a8a; }
.send { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.send:hover { background: #333; }
.note { margin: 18px auto 0; text-wrap: balance; font-size: 13.5px; color: var(--muted); }
/* the showcase: an endless slow drift, no controls */
.show { padding: 0 0 120px; overflow: hidden; }
.track { display: flex; width: max-content; animation: drift 80s linear infinite; }
.set { display: flex; gap: 40px; padding-right: 40px; }
.site { position: relative; margin: 0; width: clamp(300px, 48vw, 860px); aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; container-type: inline-size; }
.site img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---- the AI at work on each site: a cursor drifts in, opens the chat, a short
   conversation plays, the visitor taps the offer. Every window wears that brand. ---- */
.demo { position: absolute; inset: 0; pointer-events: none; font-size: 2.05cqw; --cycle: 15s; --cx1: 92.5cqw; --cy1: 55.9cqw; --cy2: 47.2cqw; --ox: 66cqw; --rx: 84cqw; --ry: calc(var(--cy1) - 6cqw); }
.s-lapose .demo { --lb: 17%; --cy1: 48.4cqw; --cy2: 39.7cqw; }
.demo * { animation-duration: var(--cycle); animation-iteration-count: infinite; animation-delay: var(--delay, 0s); animation-timing-function: ease; animation-fill-mode: both; }
.launch { position: absolute; right: 3.4%; bottom: var(--lb, 5%); width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; animation-name: d-launch; }
.launch svg { width: 46%; height: 46%; }
.win { position: absolute; right: 3.4%; bottom: calc(var(--lb, 5%) + 12%); width: 38%; padding: 1.1em; transform-origin: 90% 100%; animation-name: d-win; }
.w-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; margin-bottom: .9em; }
.w-head b { font-weight: 600; }
.w-head span { font-size: .72em; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.m { margin: 0 0 .55em; line-height: 1.35; max-width: 92%; }
.m.you { margin-left: auto; width: fit-content; padding: .5em .75em; animation-name: d-you; }
.m.ai { animation-name: d-ai; }
.dots { position: absolute; left: 1.1em; display: flex; gap: .25em; margin-top: .3em; animation-name: d-dots; }
.dots i { width: .38em; height: .38em; border-radius: 50%; background: currentColor; opacity: .55; }
.act { position: relative; display: inline-grid; margin-top: .35em; animation-name: d-act; }
.act span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .4em; height: 2.3em; padding: 0 1em; line-height: 1; white-space: nowrap; }
.act svg { width: .85em; height: .85em; flex: none; }
.act .done { animation-name: d-done; }
.act .offer { animation-name: d-askbtn; }
.cur { position: absolute; left: 0; top: 0; width: 3.2cqw; animation-name: d-cur; animation-timing-function: cubic-bezier(.45,.05,.25,1); }
.cur svg { display: block; width: 100%; filter: drop-shadow(0 .15cqw .3cqw rgba(0,0,0,.25)); animation-name: d-click; }
.cur b { position: absolute; left: 70%; top: 92%; font: 600 .78em/1 "Inter Tight", sans-serif; padding: .3em .55em; border-radius: .5em; white-space: nowrap; }

@keyframes d-cur {
  0% { transform: translate(34cqw, 30cqw); opacity: 0; } 4% { opacity: 1; }
  16% { transform: translate(var(--cx1), var(--cy1)); } 26%, 48% { transform: translate(var(--rx), var(--ry)); }
  56%, 76% { transform: translate(var(--ox), var(--cy2)); opacity: 1; }
  84%, 100% { transform: translate(52cqw, calc(var(--cy2) + 10cqw)); opacity: 0; } }
@keyframes d-click { 0%, 16%, 20%, 56%, 60%, 100% { transform: scale(1); } 18%, 58% { transform: scale(.82); } }
@keyframes d-launch { 0%, 16%, 20%, 100% { transform: scale(1); } 18% { transform: scale(.88); } }
@keyframes d-win { 0%, 19% { opacity: 0; transform: translateY(1.5cqw) scale(.94); } 23%, 82% { opacity: 1; transform: none; } 87%, 100% { opacity: 0; transform: translateY(1cqw) scale(.97); } }
@keyframes d-you { 0%, 26% { opacity: 0; transform: translateY(.6em); } 29%, 100% { opacity: 1; transform: none; } }
@keyframes d-dots { 0%, 31% { opacity: 0; } 33%, 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes d-ai { 0%, 41% { opacity: 0; transform: translateY(.6em); } 44%, 100% { opacity: 1; transform: none; } }
@keyframes d-act { 0%, 47% { opacity: 0; transform: translateY(.6em); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes d-askbtn { 0%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes d-done { 0%, 58% { opacity: 0; } 60%, 100% { opacity: 1; } }

/* full-screen chat: the site's own button opens it, it grows out of that spot */
.tap { position: absolute; left: var(--cx1); top: var(--cy1); width: 6cqw; height: 6cqw; margin: -3cqw 0 0 -3cqw; border-radius: 50%; border: .25cqw solid currentColor; opacity: 0; animation-name: d-tap; }
@keyframes d-tap { 0%, 16% { opacity: 0; transform: scale(.4); } 18% { opacity: .9; } 23%, 100% { opacity: 0; transform: scale(1.5); } }
.fs { position: absolute; inset: 0; display: flex; flex-direction: column; transform-origin: var(--ox0, 45%) var(--oy0, 48%); animation-name: d-full; }
@keyframes d-full { 0%, 18% { opacity: 0; transform: scale(.12); border-radius: 30cqw; } 24%, 82% { opacity: 1; transform: none; border-radius: 0; } 87%, 100% { opacity: 0; transform: scale(.98); } }
.fs-top { display: flex; align-items: center; justify-content: space-between; padding: 2.2cqw 3cqw; }
.fs-top b { font-weight: 500; font-size: 1.2em; letter-spacing: -.02em; }
.fs-top span { font-size: .8em; }
.fs-body { flex: 1; width: 60%; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 2cqw; }
.fs-body .m { max-width: 85%; }
.fs-body .dots { position: static; margin: 0 0 .6em; }
.fs-body .act { align-self: flex-start; }
.fs-input { width: 60%; margin: 0 auto 3.2cqw; display: flex; align-items: center; justify-content: space-between; padding: .55em .55em .55em 1.1em; border-radius: 1.2cqw; }
.fs-input i { font-style: normal; opacity: .6; }
.fs-input u { width: 2.3em; height: 2.3em; border-radius: .7cqw; display: grid; place-items: center; text-decoration: none; }
.fs-input u svg { width: 1em; height: 1em; }

/* HumenHR: deep navy, Inter, the lime accent — a full-screen assistant */
.s-humenhr .demo { font-family: Inter, sans-serif; font-size: 1.75cqw; color: #f4f8fb; --cx1: 45cqw; --cy1: 29.9cqw; --rx: 74cqw; --ry: 30cqw; --ox: 27cqw; --cy2: 46.6cqw; }
.s-humenhr .tap { color: #cffb93; }
.s-humenhr .fs { background: #0e2236; }
.s-humenhr .fs-top { border-bottom: 1px solid rgba(214,225,236,.1); }
.s-humenhr .fs-top span { color: #a9bacb; }
.s-humenhr .m.you { background: #162c42; border-radius: 1em; }
.s-humenhr .m.ai { color: #d6e1ec; }
.s-humenhr .act span { border-radius: .6em; background: #cffb93; color: #0e2236; font-weight: 600; }
.s-humenhr .act .done { background: #f4f8fb; }
.s-humenhr .fs-input { background: #162c42; border: 1px solid rgba(214,225,236,.12); }
.s-humenhr .fs-input u { background: #cffb93; color: #0e2236; }
.s-humenhr .cur svg path { fill: #ffb38a; } .s-humenhr .cur b { background: #ffb38a; color: #3a1a08; }

/* Brightpath: warm paper, Figtree + Source Serif, lavender and deep purple — enrollment, full screen */
.s-brightpath .demo { font-family: Figtree, sans-serif; font-weight: 500; font-size: 1.75cqw; color: #121212; --cx1: 9.8cqw; --cy1: 47.4cqw; --ox0: 9.8%; --oy0: 75.8%; --rx: 72cqw; --ry: 24cqw; --ox: 27cqw; --cy2: 46.6cqw; }
.s-brightpath .tap { color: #3f1f94; }
.s-brightpath .fs { background: #f6f6f3; }
.s-brightpath .fs-top { border-bottom: 1px solid #e6e6e1; }
.s-brightpath .fs-top b { font-weight: 800; font-size: 1.35em; letter-spacing: -.035em; }
.s-brightpath .fs-top span { color: #5a5a56; }
.s-brightpath .m.you { background: #ecece8; border-radius: 1em; }
.reg { display: grid; gap: .25em; margin-top: .6em; padding: .8em 1em; background: #fff; border: 1px solid #e6e6e1; border-radius: .9em; }
.reg b { font: 600 1.15em/1.2 "Source Serif 4", serif; margin-bottom: .2em; }
.reg span { display: flex; justify-content: space-between; gap: 1em; }
.reg i { font-style: normal; color: #5a5a56; }
.s-brightpath .act span { border-radius: 999px; background: #cdb2fb; color: #121212; font-weight: 600; }
.s-brightpath .act .done { background: #3f1f94; color: #fff; }
.s-brightpath .fs-input { background: #fff; border: 1px solid #e6e6e1; border-radius: 999px; }
.s-brightpath .fs-input u { background: #cdb2fb; color: #121212; border-radius: 50%; }
.s-brightpath .cur svg path { fill: #ffd75e; } .s-brightpath .cur b { background: #ffd75e; color: #3a2a00; }

/* La'Pose: slate glass, ice-blue type, thin and quiet */
.s-lapose .demo { font-family: "Inter Tight", sans-serif; font-weight: 300; color: #cfe4f0; }
.s-lapose .launch, .s-lapose .win { background: rgba(38,46,44,.62); -webkit-backdrop-filter: blur(1.4cqw); backdrop-filter: blur(1.4cqw); border: 1px solid rgba(207,228,240,.2); }
.s-lapose .win { border-radius: 1.6cqw; }
.s-lapose .w-head b { font-weight: 500; letter-spacing: -.02em; }
.s-lapose .m.you { background: rgba(207,228,240,.14); border-radius: 1em; }
.s-lapose .act span { border-radius: 999px; border: 1px solid rgba(207,228,240,.6); }
.s-lapose .act .done { background: #cfe4f0; color: #1b2421; font-weight: 400; }
.s-lapose .cur svg path { fill: #f2b8a2; } .s-lapose .cur b { background: #f2b8a2; color: #3a1d12; }

/* LuxLawn: cream card, lawn-green ink, soft pills */
.s-luxlawn .demo { font-family: Manrope, sans-serif; font-weight: 500; color: #1c3510; }
.s-luxlawn .launch { background: #ece9d8; color: #1c3510; box-shadow: 0 .6cqw 1.6cqw rgba(20,40,10,.3); }
.s-luxlawn .win { background: #ece9d8; border-radius: 2cqw; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(15,30,8,.45); }
.s-luxlawn .w-head b { font-weight: 700; letter-spacing: -.01em; }
.s-luxlawn .m.you { background: #2b4d17; color: #f6f7f1; border-radius: 1em 1em .3em 1em; }
.s-luxlawn .act span { border-radius: 999px; background: #1c3510; color: #f6f7f1; font-weight: 600; }
.s-luxlawn .act .done { background: #3f6a1f; }
.s-luxlawn .cur svg path { fill: #c5e06a; } .s-luxlawn .cur b { background: #c5e06a; color: #1c3510; }

/* Sizzler Mix: black card, teal and sand, Anton + mono */
.s-sizzler .demo { font-family: "Inter Tight", sans-serif; color: #f1eadc; }
.s-sizzler .launch { background: #141414; color: #a0d2cf; }
.s-sizzler .win { background: #141414; border-radius: 1.2cqw; }
.s-sizzler .w-head b { font: 400 1.25em/1 Anton, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.s-sizzler .w-head span { font-family: "JetBrains Mono", monospace; color: #a0d2cf; opacity: 1; }
.s-sizzler .m.you { background: #a0d2cf; color: #141414; border-radius: .9em; }
.s-sizzler .act span { border-radius: 999px; background: #a0d2cf; color: #141414; font-weight: 600; }
.s-sizzler .act .done { background: #f1eadc; }
.s-sizzler .cur svg path { fill: #ff7a59; } .s-sizzler .cur b { background: #ff7a59; color: #2a0d05; }
@keyframes drift { to { transform: translateX(-50%); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- run your business: tabs + a gliding card carousel ---------- */
.run { padding: 40px 0 120px; overflow: hidden; }
.run-head { text-align: center; padding: 0 16px; }
.run-head h2 { max-width: 20ch; margin: 0 auto; text-wrap: balance; font-weight: 500; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -.035em; }
.run-head p { margin: 18px auto 0; max-width: 52ch; font-size: 18px; color: var(--muted); text-wrap: balance; }
.tabs { display: flex; justify-content: center; gap: 6px; margin: 44px auto 48px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; border: 0; background: transparent; font: 500 16px/1 var(--font); color: var(--ink); padding: 13px 20px; border-radius: 999px; cursor: pointer; transition: background .25s; }
.tabs button:hover { background: #f0f0f0; }
.tabs button[aria-selected="true"] { background: #ececec; }
.stage-wrap { position: relative; }
.rtrack { display: flex; gap: var(--rgap); --rw: min(1260px, 64vw); --rgap: 40px; will-change: transform; }
.rtrack.glide { transition: transform .8s cubic-bezier(.65,0,.35,1); }
.rcard { container-type: inline-size; position: relative; flex: none; width: var(--rw); aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; color: #fff; cursor: pointer;
  background: var(--tone); transition: opacity .6s; }
.rcard:not(.on) { opacity: .92; }
.rcard .art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.rcard .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,var(--shade, .38)), rgba(0,0,0,0) 46%); }
.rcard .copy { position: absolute; left: 3.6%; top: 7%; max-width: 52%; z-index: 1; }
.rcard h3 { margin: 0; font-weight: 500; font-size: clamp(22px, 2.5vw, 40px); line-height: 1.08; letter-spacing: -.03em; }
.rcard p { margin: 12px 0 0; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.45; color: rgba(255,255,255,.88); }
.rcard:not(.light) .copy { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 24px rgba(0,0,0,.35); }
.rcard.light { color: var(--ink); }
.rcard.light p { color: rgba(0,0,0,.72); }
.rcard.light .art::after { background: linear-gradient(180deg, rgba(255,250,244,.4), rgba(255,250,244,0) 38%); }
.rcard.right .copy { left: auto; right: 3.6%; max-width: 44%; }
/* ---- card scenes: frosted, neutral, sized to the card ---- */
.sc { position: absolute; inset: 0; z-index: 1; pointer-events: none; font-family: var(--font); color: #1b1714; font-size: 1.35cqw; }
.sc * { animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-duration: .6s; }
.bk-chat, .bk-note, .bk-day { background: rgba(255,253,250,.9); -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw);
  box-shadow: 0 .2cqw .6cqw rgba(30,20,10,.12), 0 2cqw 4cqw -1.5cqw rgba(30,20,10,.45); }
.bk-chat { position: absolute; left: 3.6%; bottom: 7%; width: 33%; padding: 1.1em 1.1em 1.2em; border-radius: 1.4cqw; }
.bk-top { display: flex; align-items: center; gap: .55em; margin-bottom: 1em; }
.bk-top i { width: 1.9em; height: 1.9em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9a184, #a9643f); flex: none; }
.bk-top b { font-weight: 600; letter-spacing: -.01em; }
.bk-top span { margin-left: auto; font-size: .78em; color: #7a6f64; }
.bk-m { margin: 0 0 .6em; line-height: 1.38; max-width: 88%; }
.bk-you { margin-left: auto; width: fit-content; padding: .5em .8em; border-radius: 1em 1em .3em 1em; background: #2a211b; color: #fff; }
.bk-times { display: flex; gap: .45em; margin: .3em 0 .2em; }
.bk-times span { padding: .45em .85em; border-radius: 999px; border: 1px solid rgba(27,23,20,.18); font-weight: 500; }
.bk-times .pick { background: #2a211b; color: #fff; border-color: #2a211b; }
.bk-done { display: flex; align-items: center; gap: .45em; margin-top: .75em; padding: .55em .8em; border-radius: .8em; background: #e8efe2; color: #2f4a2a; font-weight: 500; }
.bk-done svg { width: 1.05em; height: 1.05em; flex: none; }
.bk-owner { position: absolute; right: 3.6%; top: 26%; width: 30%; display: grid; gap: .8em; }
.bk-note { display: flex; gap: .7em; align-items: flex-start; padding: .85em 1em; border-radius: 1.2cqw; }
.bk-note .ap, .pm-note .ap { width: 2.2em; height: 2.2em; border-radius: .6em; background: #1b1714; flex: none; position: relative; }
.bk-note .ap::after, .pm-note .ap::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9a184, #b77c78); }
.bk-note b { display: block; font-weight: 600; }
.bk-note span { display: block; color: #4d4540; line-height: 1.35; }
.bk-note em { margin-left: auto; font-style: normal; font-size: .8em; color: #8a7f74; }
.bk-day { padding: .9em 1em .5em; border-radius: 1.2cqw; }
.bk-day b { display: block; font-weight: 600; margin-bottom: .5em; }
.bk-day p { display: grid; grid-template-columns: 3.4em 1fr auto; gap: .5em; margin: 0; padding: .55em 0; border-top: 1px solid rgba(27,23,20,.08); align-items: baseline; }
.bk-day time { font-variant-numeric: tabular-nums; color: #7a6f64; }
.bk-day span { font-weight: 500; }
.bk-day small { font-size: .85em; color: #7a6f64; }
.bk-day p.new { margin: 0 -.5em; padding: .55em .5em; border-radius: .6em; border-top-color: transparent; background: #f3e6dc; }
/* the store scene: checkout in the chat, then the order status */
.st-chat, .st-track { background: rgba(255,253,250,.92); -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw);
  box-shadow: 0 .2cqw .6cqw rgba(10,30,20,.14), 0 2cqw 4cqw -1.5cqw rgba(5,20,12,.55); border-radius: 1.4cqw; position: absolute; }
.st-chat { right: 3.6%; bottom: 7%; width: 35%; padding: 1.1em 1.1em 1.2em; }
.st-logo { background: #123222 !important; }
.st-prod { display: flex; gap: .8em; align-items: center; padding: .6em; border-radius: 1em; background: #fff; border: 1px solid rgba(27,23,20,.08); margin-bottom: .8em; }
.st-prod img { width: 4.6em; height: 5.6em; object-fit: cover; border-radius: .6em; flex: none; }
.st-prod b { display: block; font-weight: 600; }
.st-prod span { display: block; color: #6d6459; }
.st-size { margin-top: .5em !important; }
.st-size span { padding: .3em .75em !important; }
.st-size .pick { background: transparent; }
.st-track { left: 33%; top: 34%; width: 28%; padding: 1.1em; }
.st-ai { color: #1b1714; }
.st-track ol { list-style: none; margin: .4em 0 0; padding: 0; display: grid; gap: .55em; }
.st-track li { position: relative; display: flex; justify-content: space-between; padding-left: 1.7em; color: #9a9086; }
.st-track li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1em; height: 1em; border-radius: 50%; border: 1.5px solid #cfc7bd; box-sizing: border-box; }
.st-track li:not(:last-child)::after { content: ""; position: absolute; left: .47em; top: 1.3em; height: .85em; width: 1.5px; background: #cfc7bd; }
.st-track li.ok, .st-track li.now { color: #1b1714; }
.st-track li.ok::before { background: #123222; border-color: #123222; }
.st-track li.ok::after { background: #123222; }
.st-track li.now::before { border-color: #123222; box-shadow: inset 0 0 0 .2em #fff, inset 0 0 0 1em #123222; }
.st-track li b { font-weight: 500; }
.st-track li span { font-size: .85em; color: #6d6459; }
.rcard .sc .st-chat > *, .rcard .sc .st-track > * { opacity: 0; }
.rcard.play .st-chat { animation-name: sc-up; animation-delay: .5s; }
.rcard.play .st-chat .bk-top { animation-name: sc-in; animation-delay: .5s; }
.rcard.play .st-prod { animation-name: sc-up; animation-delay: 1s; }
.rcard.play .st-size .pick { animation-name: sc-pick; animation-delay: 1.8s; }
.rcard.play .st-you { animation-name: sc-up; animation-delay: 2.1s; }
.rcard.play .st-paid { animation-name: sc-up; animation-delay: 2.8s; }
.rcard.play .st-track { animation-name: sc-drop; animation-delay: 3.7s; }
.rcard.play .st-track > .bk-you { animation-name: sc-up; animation-delay: 3.9s; }
.rcard.play .st-track > .st-ai { animation-name: sc-up; animation-delay: 4.6s; }
.rcard.play .st-track > ol { animation-name: sc-up; animation-delay: 5s; }
/* the payments scene: the deposit paid in chat, the owner told where the money goes */
.pm-chat, .pm-note { position: absolute; background: rgba(255,253,250,.92); -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw);
  box-shadow: 0 .2cqw .6cqw rgba(10,15,40,.16), 0 2cqw 4cqw -1.5cqw rgba(5,10,35,.55); border-radius: 1.4cqw; }
.pm-chat { right: 3.6%; bottom: 7%; width: 35%; padding: 1.1em 1.1em 1.2em; }
.pm-logo { background: radial-gradient(circle at 35% 30%, #a8b98f, #5f7346) !important; }
.pm-ai { color: #1b1714; }
.pm-pay { display: flex; gap: .5em; margin-top: .4em; }
.pm-card { flex: 1; display: flex; align-items: center; gap: .55em; padding: .55em .8em; border-radius: .7em; background: #fff; border: 1px solid rgba(27,23,20,.12); font-variant-numeric: tabular-nums; }
.pm-card i { width: 1.7em; height: 1.15em; border-radius: .2em; background: linear-gradient(135deg, #2c3566, #59628f); }
.pm-btn { padding: .55em 1em; border-radius: .7em; background: #2c3566; color: #fff; font-weight: 600; }
.pm-note { right: 3.6%; top: 37%; width: 35%; display: flex; gap: .7em; align-items: flex-start; padding: .85em 1em; }
.pm-note b { display: block; font-weight: 600; }
.pm-note span { display: block; color: #4d4540; line-height: 1.35; }
.pm-note .pm-dest { color: #2c3566; font-weight: 500; margin-top: .15em; }
.pm-note em { margin-left: auto; font-style: normal; font-size: .8em; color: #8a7f74; }
.rcard .sc .pm-chat > * { opacity: 0; }
.rcard.play .pm-chat { animation-name: sc-up; animation-delay: .5s; }
.rcard.play .pm-chat .bk-top { animation-name: sc-in; animation-delay: .5s; }
.rcard.play .pm-you { animation-name: sc-up; animation-delay: 1.1s; }
.rcard.play .pm-ai { animation-name: sc-up; animation-delay: 1.9s; }
.rcard.play .pm-pay { animation-name: sc-up; animation-delay: 2.4s; }
.rcard.play .pm-btn { animation-name: sc-press; animation-delay: 3.1s; animation-duration: .35s; }
.rcard.play .pm-done { animation-name: sc-up; animation-delay: 3.5s; }
.rcard.play .pm-note { animation-name: sc-drop; animation-delay: 4.2s; }
@keyframes sc-press { 50% { transform: scale(.94); } }
/* the invoices scene: the owner asks, the invoice goes out, a reminder, then paid */
.iv-chat, .iv-log { position: absolute; background: rgba(255,253,250,.92); -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw);
  box-shadow: 0 .2cqw .6cqw rgba(30,10,10,.16), 0 2cqw 4cqw -1.5cqw rgba(25,8,8,.55); border-radius: 1.4cqw; }
.iv-chat { left: 3.6%; bottom: 7%; width: 33%; padding: 1.1em 1.1em .7em; }
.iv-logo { background: radial-gradient(circle at 35% 30%, #d9a184, #a9643f) !important; }
.iv-ai { color: #1b1714; }
.iv-doc { position: absolute; left: 44%; top: 31%; width: 22%; aspect-ratio: 8.5 / 11; padding: 1.3em 1.2em; background: #fffdf8; border-radius: .4cqw;
  box-shadow: 0 .3cqw .8cqw rgba(20,5,5,.25), 0 3cqw 5cqw -2cqw rgba(15,4,4,.7); color: #1b1714; font-size: .9em; }
.iv-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .8em; border-bottom: 1px solid rgba(27,23,20,.12); }
.iv-h b { font-size: 1.35em; font-weight: 600; letter-spacing: -.02em; }
.iv-h span { color: #8a7f74; }
.iv-to { display: block; margin: .9em 0 1em; color: #8a7f74; line-height: 1.4; }
.iv-to b { color: #1b1714; font-weight: 500; }
.rcard .sc .iv-row { display: flex; justify-content: space-between; gap: .6em; margin: 0; padding: .45em 0; border-bottom: 1px solid rgba(27,23,20,.07); }
.rcard .sc .iv-tot { border: 0; padding-top: .8em; font-weight: 600; }
.iv-stamp { position: absolute; right: 8%; bottom: 10%; padding: .25em .6em; border: .18em solid #3f7a4a; border-radius: .4em; color: #3f7a4a;
  font-weight: 700; font-size: 1.5em; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-12deg); opacity: 0; }
.iv-log { right: 3.6%; top: 38%; width: 25%; padding: .9em 1em; display: grid; gap: .1em; }
.rcard .sc .iv-log p { display: flex; align-items: center; gap: .6em; margin: 0; padding: .35em 0; color: #4d4540; }
.iv-log i { width: .7em; height: .7em; border-radius: 50%; background: #c9bdb2; flex: none; }
.iv-log .ok { color: #2f4a2a; font-weight: 500; } .iv-log .ok i { background: #3f7a4a; }
.rcard .sc .iv-chat > *, .rcard .sc .iv-log > * { opacity: 0; }
.rcard.play .iv-chat { animation-name: sc-up; animation-delay: .5s; }
.rcard.play .iv-chat .bk-top { animation-name: sc-in; animation-delay: .5s; }
.rcard.play .iv-you { animation-name: sc-up; animation-delay: 1s; }
.rcard.play .iv-ai { animation-name: sc-up; animation-delay: 1.9s; }
.rcard.play .iv-doc { animation-name: sc-up; animation-delay: 2.4s; animation-duration: .8s; }
.rcard.play .iv-log { animation-name: sc-in; animation-delay: 3.2s; }
.rcard.play .iv-l1 { animation-name: sc-up; animation-delay: 3.2s; }
.rcard.play .iv-l2 { animation-name: sc-up; animation-delay: 3.9s; }
.rcard.play .iv-l3 { animation-name: sc-up; animation-delay: 4.6s; }
.rcard.play .iv-stamp { animation-name: sc-stamp; animation-delay: 4.7s; animation-duration: .45s; }
@keyframes sc-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.8); } to { opacity: .9; transform: rotate(-12deg) scale(1); } }
/* the registrations scene: a class sign-up, the owner's roster filling */
.rg-chat, .rg-roster { position: absolute; background: rgba(255,253,250,.92); -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw);
  box-shadow: 0 .2cqw .6cqw rgba(10,12,20,.16), 0 2cqw 4cqw -1.5cqw rgba(5,8,15,.55); border-radius: 1.4cqw; right: 3.6%; width: 35%; }
.rg-chat { bottom: 7%; padding: 1.1em 1.1em 1.2em; }
.rg-logo { background: radial-gradient(circle at 35% 30%, #8ea3cf, #4c5f8c) !important; }
.rg-class { display: flex; align-items: center; gap: .8em; padding: .6em; border-radius: 1em; background: #fff; border: 1px solid rgba(27,23,20,.08); margin: .3em 0 .2em; }
.rg-img { width: 3.6em; height: 3.6em; border-radius: .6em; flex: none; background: url(img/modules/hiit.jpg) center 30% / cover, #59606b; }
.rg-class b { display: block; font-weight: 600; }
.rg-class span { display: block; color: #6d6459; }
.rg-btn { margin-left: auto; padding: .5em .85em; border-radius: .7em; background: #2e333b; color: #fff !important; font-weight: 600; white-space: nowrap; }
.rg-roster { top: 37%; padding: .9em 1em; }
.rg-h { display: flex; justify-content: space-between; align-items: baseline; }
.rg-h b { font-weight: 600; }
.rg-n { color: #4d4540; font-variant-numeric: tabular-nums; }
.rg-n .sw { display: inline-grid; } .rg-n em { grid-area: 1 / 1; font-style: normal; text-align: right; } .rg-n .b { opacity: 0; }
.rg-bar { display: block; height: .45em; margin: .7em 0 .75em; border-radius: 999px; background: #e7e1da; overflow: hidden; }
.rg-bar i { display: block; height: 100%; width: 75%; border-radius: inherit; background: #2e333b; transition: width .6s; }
.rg-new { display: flex; align-items: center; gap: .55em; color: #2f4a2a; font-weight: 500; opacity: 0; }
.rg-new .ap { width: 1.4em; height: 1.4em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9a184, #b77c78); flex: none; }
.rcard .sc .rg-chat > * { opacity: 0; }
.rcard.play .rg-chat { animation-name: sc-up; animation-delay: .5s; }
.rcard.play .rg-chat .bk-top { animation-name: sc-in; animation-delay: .5s; }
.rcard.play .rg-you { animation-name: sc-up; animation-delay: 1.1s; }
.rcard.play .rg-class { animation-name: sc-up; animation-delay: 1.9s; }
.rcard.play .rg-btn { animation-name: sc-press; animation-delay: 2.8s; animation-duration: .35s; }
.rcard.play .rg-done { animation-name: sc-up; animation-delay: 3.2s; }
.rcard.play .rg-roster { animation-name: sc-drop; animation-delay: 3.8s; }
.rcard.play .rg-bar i { animation: rg-fill .6s 4.5s both; }
.rcard.play .rg-new { animation-name: sc-up; animation-delay: 4.6s; }
.rcard.play .rg-n .a { animation: rg-a .3s 4.5s both; } .rcard.play .rg-n .b { animation: rg-b .3s 4.6s both; }
@keyframes rg-fill { from { width: 75%; } to { width: 83.4%; } }
@keyframes rg-a { to { opacity: 0; } } @keyframes rg-b { from { opacity: 0; } to { opacity: 1; } }
/* the memberships scene: a member manages their plan, the owner sees recurring revenue */
.mb-chat, .mb-stats { position: absolute; right: 3.6%; width: 35%; background: rgba(255,253,250,.92); -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw);
  box-shadow: 0 .2cqw .6cqw rgba(30,15,10,.16), 0 2cqw 4cqw -1.5cqw rgba(25,10,6,.55); border-radius: 1.4cqw; }
.mb-chat { bottom: 7%; padding: 1.1em 1.1em 1.2em; }
.mb-logo { background: radial-gradient(circle at 35% 30%, #b98a62, #6e4a33) !important; }
.mb-ai { color: #1b1714; }
.mb-stats { top: 36%; padding: .9em 1em; }
.mb-h { display: flex; justify-content: space-between; align-items: baseline; }
.mb-h b { font-weight: 600; } .mb-h span { color: #8a7f74; font-size: .85em; }
.mb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin: .7em 0 .8em; }
.rcard .sc .mb-grid p { margin: 0; padding: .55em .6em; border-radius: .7em; background: #f3ece4; }
.mb-grid em { display: block; font-style: normal; font-weight: 600; font-size: 1.25em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mb-grid span { font-size: .82em; color: #6d6459; }
.mb-new { display: flex; align-items: center; gap: .55em; color: #2f4a2a; font-weight: 500; opacity: 0; }
.mb-new .ap { width: 1.4em; height: 1.4em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9a184, #b77c78); flex: none; }
.rcard .sc .mb-chat > * { opacity: 0; }
.rcard.play .mb-chat { animation-name: sc-up; animation-delay: .5s; }
.rcard.play .mb-chat .bk-top { animation-name: sc-in; animation-delay: .5s; }
.rcard.play .mb-you { animation-name: sc-up; animation-delay: 1.1s; }
.rcard.play .mb-ai { animation-name: sc-up; animation-delay: 2s; }
.rcard.play .mb-done { animation-name: sc-up; animation-delay: 2.7s; }
.rcard.play .mb-stats { animation-name: sc-drop; animation-delay: 3.4s; }
.rcard.play .mb-new { animation-name: sc-up; animation-delay: 4.2s; }
/* cards without a photo: their own colour, softly lit */
.rcard .art.lit { background: radial-gradient(70% 90% at 75% 20%, rgba(255,255,255,.14), transparent 60%), radial-gradient(60% 70% at 10% 110%, rgba(0,0,0,.28), transparent 70%), var(--tone); }
.cu-win, .cu-card, .fu-mail, .fu-stats, .fu-review { position: absolute; background: rgba(255,253,250,.95); -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw);
  box-shadow: 0 .2cqw .6cqw rgba(10,12,20,.16), 0 2cqw 4cqw -1.5cqw rgba(5,8,15,.55); border-radius: 1.4cqw; }
/* customers: ask about your customers, get the answer as a list + one timeline */
.cu-win { right: 3.6%; bottom: 7%; width: 54%; padding: 1.1em 1.2em; }
.cu-logo { background: radial-gradient(circle at 35% 30%, #d9a184, #a9643f) !important; }
.cu-ai { color: #1b1714; max-width: 96% !important; }
.cu-list { display: grid; margin-top: .3em; border-top: 1px solid rgba(27,23,20,.08); }
.rcard .sc .cu-list p { display: grid; grid-template-columns: auto 6.8em 5em 1fr auto; gap: .6em; align-items: center; margin: 0; padding: .5em 0; border-bottom: 1px solid rgba(27,23,20,.06); }
.cu-list b { font-weight: 600; }
.cu-list em { font-style: normal; font-size: .8em; font-weight: 500; text-align: center; padding: .2em .5em; border-radius: 999px; }
.cu-list em.c { background: #e7e3f3; color: #4a3d7a; } .cu-list em.f { background: #f3e6dc; color: #7a4a2a; } .cu-list em.b { background: #e3ecdf; color: #2f4a2a; }
.cu-list span { color: #4d4540; } .cu-list time { color: #8a7f74; font-size: .85em; }
.cu-card { left: 3.6%; bottom: 7%; width: 34%; padding: 1em 1.1em; }
.cu-who { display: flex; gap: .65em; align-items: center; margin-bottom: .8em; }
.cu-who .ap { width: 2.2em; height: 2.2em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9a184, #b77c78); flex: none; }
i.pic { background: #efe8df center / cover no-repeat var(--pic) !important; }
i.pic.face { background-position: center 18% !important; }
.bk-note .ap.pic::after, .pm-note .ap.pic::after { display: none; }
.cu-list .av, .fu-review .av { width: 1.55em; height: 1.55em; border-radius: 50%; background: #efe8df center 18% / cover no-repeat var(--pic); }
.fu-review { display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: center; }
.fu-review .av { width: 2.3em; height: 2.3em; }
.cu-who b { display: block; font-weight: 600; } .cu-who span { color: #8a7f74; font-size: .85em; }
.cu-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.cu-card li { position: relative; padding-left: 1.4em; color: #4d4540; }
.cu-card li::before { content: ""; position: absolute; left: .15em; top: .45em; width: .55em; height: .55em; border-radius: 50%; background: #c9bdb2; }
.cu-card li.now { color: #1b1714; font-weight: 500; } .cu-card li.now::before { background: #3f7a4a; }
.rcard .sc .cu-win > *, .rcard .sc .cu-list p, .rcard .sc .cu-card li { opacity: 0; }
.rcard.play .cu-win { animation-name: sc-up; animation-delay: .5s; }
.rcard.play .cu-win .bk-top { animation-name: sc-in; animation-delay: .5s; }
.rcard.play .cu-you { animation-name: sc-up; animation-delay: 1s; }
.rcard.play .cu-ai { animation-name: sc-up; animation-delay: 1.9s; }
.rcard.play .cu-list { animation-name: sc-in; animation-delay: 2.4s; }
.rcard.play .cu-list p:nth-child(1) { animation-name: sc-up; animation-delay: 2.5s; }
.rcard.play .cu-list p:nth-child(2) { animation-name: sc-up; animation-delay: 2.7s; }
.rcard.play .cu-list p:nth-child(3) { animation-name: sc-up; animation-delay: 2.9s; }
.rcard.play .cu-list p:nth-child(4) { animation-name: sc-up; animation-delay: 3.1s; }
.rcard.play .cu-card { animation-name: sc-up; animation-delay: 3.7s; }
.rcard.play .cu-card li:nth-child(1) { animation-name: sc-in; animation-delay: 4s; }
.rcard.play .cu-card li:nth-child(2) { animation-name: sc-in; animation-delay: 4.25s; }
.rcard.play .cu-card li:nth-child(3) { animation-name: sc-in; animation-delay: 4.5s; }
.rcard.play .cu-card li:nth-child(4) { animation-name: sc-in; animation-delay: 4.75s; }
/* follow-ups: the email the assistant wrote and sent, and what came back */
.fu-mail { right: 3.6%; bottom: 7%; width: 50%; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fu-bar { display: flex; align-items: center; gap: .4em; padding: .75em 1em; border-bottom: 1px solid rgba(27,23,20,.08); }
.fu-bar i { width: .7em; height: .7em; border-radius: 50%; background: #ddd5cc; }
.fu-bar span { margin-left: .5em; font-weight: 600; }
.fu-bar em { margin-left: auto; font-style: normal; font-size: .8em; padding: .25em .65em; border-radius: 999px; background: #e7e3f3; color: #4a3d7a; }
.fu-meta { padding: .3em 1.2em; border-bottom: 1px solid rgba(27,23,20,.08); }
.rcard .sc .fu-meta p { display: flex; gap: .8em; margin: 0; padding: .4em 0; }
.fu-meta span { width: 4.4em; color: #8a7f74; }
.fu-body { padding: 1em 1.2em 3em; }
.rcard .sc .fu-body p { margin: 0 0 .7em; line-height: 1.45; color: #2a2420; }
.fu-btn { display: inline-block; margin: .1em 0 .9em; padding: .5em 1em; border-radius: .6em; background: #4a3830; color: #fff; font-weight: 600; }
.rcard .sc .fu-sig { color: #6d6459; }
.fu-sent { position: absolute; right: 1em; bottom: .9em; display: flex; align-items: center; gap: .4em; padding: .4em .8em; border-radius: 999px; background: #e3ecdf; color: #2f4a2a; font-weight: 500; font-size: .85em; }
.fu-sent svg { width: 1em; height: 1em; }
.fu-side { position: absolute; left: 3.6%; bottom: 7%; width: 34%; display: grid; gap: .8em; }
.fu-side .fu-stats, .fu-side .fu-review { position: relative; padding: .9em 1.1em; }
.fu-stats b { display: block; font-weight: 600; margin-bottom: .4em; }
.rcard .sc .fu-stats p { display: flex; justify-content: space-between; margin: 0; padding: .4em 0; border-top: 1px solid rgba(27,23,20,.07); color: #4d4540; }
.fu-stats em { font-style: normal; font-weight: 600; color: #1b1714; font-variant-numeric: tabular-nums; }
.fu-stars { display: block; color: #c99a48; letter-spacing: .1em; font-size: 1.1em; }
.fu-review b { display: block; font-weight: 600; margin: .2em 0 .15em; }
.fu-review span:last-child { color: #4d4540; }
.rcard .sc .fu-mail > *, .rcard .sc .fu-side { opacity: 0; }
.rcard.play .fu-mail { animation-name: sc-up; animation-delay: .5s; }
.rcard.play .fu-bar { animation-name: sc-in; animation-delay: .6s; }
.rcard.play .fu-meta { animation-name: sc-in; animation-delay: 1s; }
.rcard.play .fu-body { animation-name: sc-up; animation-delay: 1.5s; animation-duration: 1s; }
.rcard.play .fu-sent { animation-name: sc-up; animation-delay: 2.8s; }
.rcard.play .fu-side { animation-name: sc-up; animation-delay: 3.4s; }
/* the card's own paragraph styles stop at the scene */
.rcard .sc p { color: inherit; font-size: inherit; margin: 0 0 .6em; }
.rcard .sc .bk-you { color: #fff; margin-left: auto; }
.rcard:has(.sc) .go { display: none; }
.rcard .sc .bk-day p { margin: 0; }
.rcard .sc .bk-day p.new { margin: 0 -.5em; }
/* the timeline, played each time Bookings comes to the centre */
.rcard .sc > * , .bk-chat > *, .bk-day p.new, .bk-times .pick { opacity: 0; }
.rcard.play .bk-chat { animation-name: sc-up; animation-delay: .5s; }
.rcard.play .bk-top { animation-name: sc-in; animation-delay: .5s; }
.rcard.play .bk-you { animation-name: sc-up; animation-delay: 1.1s; }
.rcard.play .bk-ai { animation-name: sc-up; animation-delay: 2s; }
.rcard.play .bk-times { animation-name: sc-up; animation-delay: 2.4s; }
.rcard.play .bk-times .pick { animation-name: sc-pick; animation-delay: 3.2s; }
.rcard.play .bk-done { animation-name: sc-up; animation-delay: 3.7s; }
.rcard.play .bk-owner { animation-name: sc-in; animation-delay: 4.3s; }
.rcard.play .bk-note { animation-name: sc-drop; animation-delay: 4.3s; }
.rcard.play .bk-day { animation-name: sc-up; animation-delay: 4.9s; }
.rcard.play .bk-day p.new { animation-name: sc-new; animation-delay: 5.4s; }
.bk-times .pick { opacity: 1; background: transparent; color: inherit; border-color: rgba(27,23,20,.18); }
.bk-day p.new { opacity: 1; background: transparent; }
@keyframes sc-up { from { opacity: 0; transform: translateY(.8em); } to { opacity: 1; transform: none; } }
@keyframes sc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-drop { from { opacity: 0; transform: translateY(-1.2em) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sc-pick { to { background: #2a211b; color: #fff; border-color: #2a211b; } }
@keyframes sc-new { to { background: #f3e6dc; } }
.rcard .go { position: absolute; right: 3.6%; bottom: 6%; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; }
.rcard .go svg { width: 26px; height: 26px; }
.rcard .slot { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: 54%; aspect-ratio: 16 / 10; border-radius: 10px;
  border: 1px dashed rgba(255,255,255,.35); display: grid; place-items: center; font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.6); }
.run-foot { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 40px; height: 44px; }
.dots-row { display: flex; align-items: center; gap: 8px; }
.dots-row button { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #c4c4c4; cursor: pointer; overflow: hidden; transition: width .5s cubic-bezier(.65,0,.35,1); }
.dots-row button.on { width: 44px; background: #d8d8d8; }
.dots-row button.on::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); animation: fill var(--rdur, 7s) linear forwards; }
.run.paused .dots-row button.on::after { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.pp { position: absolute; right: 40px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d6d6d6; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.pp svg { width: 16px; height: 16px; } .pp .i-play { display: none; } .run.paused .pp .i-play { display: block; } .run.paused .pp .i-pause { display: none; }

/* ---------- made around your business: masonry tiles ---------- */
.yours, .start2 { padding: 40px 16px 120px; }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.sec-head h2 { margin: 0; font-weight: 500; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -.035em; }
.sec-head p { margin: 18px auto 0; max-width: 54ch; font-size: 18px; color: var(--muted); text-wrap: balance; }
.mas { max-width: 1180px; margin: 0 auto; columns: 3; column-gap: 20px; }
.tile { break-inside: avoid; margin: 0 0 20px; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid #ececec; }
.tile h3 { margin: 0; font-weight: 500; font-size: 22px; letter-spacing: -.025em; line-height: 1.2; }
.tile > p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.tile.dark { background: #1b1714; border-color: #1b1714; color: #f6f2ea; } .tile.dark > p { color: rgba(246,242,234,.72); }
/* workflow */
.t-flow { background: linear-gradient(180deg, #f3eef8, #fff 60%); }
.flow { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; }
.flow li { position: relative; padding: 12px 14px 12px 44px; margin-bottom: 16px; border-radius: 12px; background: #fff; border: 1px solid #ebe6f0; }
.flow li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #9a84b6; background: #fff; box-sizing: border-box; }
.flow li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 100%; height: 18px; width: 2px; background: #d9cfe6; }
.flow li b { display: block; font-weight: 500; font-size: 15px; }
.flow li span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.flow li.wait { background: transparent; border-style: dashed; }
.flow li.end::before { background: #9a84b6; }
/* agent */
.t-agent { background: linear-gradient(180deg, #eef3ec, #fff 70%); }
.ag { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ag-pic { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid #e4ebe1; display: grid; place-items: center; }
.ag-pic canvas { width: 46px; height: 46px; }
.ag b { display: block; font-weight: 600; } .ag span { font-size: 13.5px; color: var(--muted); }
.chips, .mods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips span, .mods span { font-size: 13.5px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #e4e4e4; }
.mods .add { border-style: dashed; color: var(--muted); }
/* say */
.say { margin-top: 18px; display: grid; gap: 10px; font-size: 14.5px; }
.say p { margin: 0; line-height: 1.4; }
.say .you { justify-self: end; max-width: 90%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #1b1714; color: #fff; }
.say .k { display: flex; gap: 8px; align-items: flex-start; color: #2f4a2a; }
.say .ok { width: 20px; height: 20px; border-radius: 50%; background: #e3ecdf; display: grid; place-items: center; flex: none; }
.say .ok svg { width: 12px; height: 12px; }
/* portal */
.t-portal { background: linear-gradient(180deg, #fbf1ea, #fff 70%); }
.portal { margin-top: 20px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #efe4dc; font-size: 14.5px; }
.po-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.po-h i { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9a184, #b77c78); }
.po-h b { font-weight: 600; }
.portal p { display: flex; justify-content: space-between; margin: 0; padding: 9px 0; border-top: 1px solid #f1ebe6; }
.portal em { font-style: normal; color: var(--muted); }
/* mail + domain */
.mail { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 14.5px; }
.mail .from { display: block; font-weight: 500; } .mail .sub { display: block; margin-top: 4px; color: rgba(246,242,234,.6); }
.url { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: #f5f5f5; font-size: 15px; }
.url i { width: 16px; height: 16px; color: #3f7a4a; display: grid; } .url i svg { width: 16px; height: 16px; }
.url em { margin-left: auto; font-style: normal; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #e3ecdf; color: #2f4a2a; }
/* ---------- two ways to start ---------- */
.ways { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.way { display: flex; flex-direction: column; padding: 36px; border-radius: 24px; background: #fff; border: 1px solid #ececec; }
.way.pro { background: #1b1714; border-color: #1b1714; color: #f6f2ea; }
.way-pic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #f3f0ec; margin-bottom: 26px; }
.way-pic canvas { width: 48px; height: 48px; }
.pro-pic { background: rgba(255,255,255,.08); color: #f6f2ea; } .pro-pic svg { width: 26px; height: 26px; }
.way h3 { margin: 0; font-weight: 500; font-size: 28px; letter-spacing: -.03em; line-height: 1.15; }
.way > p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--muted); }
.way.pro > p { color: rgba(246,242,234,.72); }
.way ol { list-style: none; counter-reset: s; margin: 26px 0 32px; padding: 0; display: grid; gap: 12px; }
.way li { counter-increment: s; display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.way li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: #f3f0ec; flex: none; }
.way.pro li::before { background: rgba(255,255,255,.1); }
.way-foot { margin-top: auto; display: flex; align-items: center; gap: 16px; }
.way-foot span { font-size: 14px; color: var(--muted); } .way.pro .way-foot span { color: rgba(246,242,234,.6); }
.btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 500; font-size: 15px; transition: background .2s; }
.btn:hover { background: #333; }
.way.pro .btn { background: #f6f2ea; color: #1b1714; } .way.pro .btn:hover { background: #fff; }

@media (max-width: 1100px) and (min-width: 821px) { .mas { columns: 2; } }
@media (max-width: 960px) {
  .nav-in { height: 64px; padding: 0 16px; grid-template-columns: 1fr auto; }
  .links { display: none; }
  .nav-menu { display: block; }
  .actions .login { display: none; } /* it's in the menu */
  .brand { font-size: 17px; } .brand canvas { width: 28px; height: 28px; }
  .actions { gap: 18px; }
  .cta { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
  .login { font-size: 14px; }
}
@media (max-width: 820px) {
  .mas { columns: 1; } .ways { grid-template-columns: 1fr; }
  .yours, .start2 { padding: 24px 16px 80px; } .sec-head { margin-bottom: 36px; }
  .tile { padding: 24px; } .way { padding: 28px; }

  .run { padding: 24px 0 80px; }
  .tabs { justify-content: flex-start; margin: 32px 0 28px; }
  .tabs button { font-size: 15px; padding: 11px 16px; }
  .rtrack { --rw: 86vw; --rgap: 14px; }
  .rcard { aspect-ratio: 4 / 5; }
  .rcard .copy, .rcard.right .copy { max-width: 86%; left: 6%; right: auto; top: 6%; }
  .sc { font-size: 3cqw; }
  .bk-chat { left: 5%; right: 5%; width: auto; bottom: 4%; }
  .bk-owner { left: 5%; right: 5%; width: auto; top: 31%; }
  .bk-day { display: none; }
  .st-chat { left: 5%; right: 5%; width: auto; bottom: 4%; }
  .st-track { left: 5%; right: 5%; width: auto; top: 33%; }
  .st-track ol { grid-template-columns: repeat(4, 1fr); gap: .3em; } .st-track li { flex-direction: column; padding: 1.4em 0 0; font-size: .85em; } .st-track li::before { top: 0; } .st-track li::after { display: none; }
  .st-track .st-ai, .st-chat .st-you { display: none; }
  .pm-chat { left: 5%; right: 5%; width: auto; bottom: 4%; }
  .pm-note { left: 5%; right: 5%; width: auto; top: 33%; }
  .iv-chat { left: 5%; right: 5%; width: auto; bottom: 4%; }
  .iv-doc { left: 50%; top: 31%; width: 50%; aspect-ratio: auto; padding: 1em 1em 3.4em; font-size: .85em; transform: translateX(-50%); } .iv-to { display: none; }
  .iv-chat .bk-top { display: none; }
  .rg-chat, .rg-roster { left: 5%; right: 5%; width: auto; }
  .rg-chat { bottom: 4%; } .rg-roster { top: 33%; }
  .mb-chat, .mb-stats { left: 5%; right: 5%; width: auto; }
  .mb-chat { bottom: 4%; } .mb-stats { top: 33%; } .mb-new { display: none; }
  .cu-win { left: 5%; right: 5%; width: auto; bottom: 4%; } .cu-card { display: none; }
  .rcard .sc .cu-list p { grid-template-columns: auto 6.2em 4.8em 1fr; } .cu-list time { display: none; }
  .fu-mail { left: 5%; right: 5%; width: auto; bottom: 4%; } .fu-side { display: none; } .fu-bar em { display: none; }
  .iv-stamp { bottom: 7%; font-size: 1.25em; }
  .rcard.play .iv-doc { animation-name: sc-in; }
  .iv-log { display: none; }
  .rcard .slot { width: 80%; top: 64%; }
  .pp { right: 16px; }

  .head { padding: 56px 16px 64px; }
  .eyebrow { font-size: 17px; margin-bottom: 18px; }
  h1 { font-size: clamp(25px, 6.6vw, 40px); letter-spacing: -.035em; }
  h1 .line, h1 .w { text-wrap: balance; }
  .set { gap: 20px; padding-right: 20px; } .site { width: 78vw; border-radius: 16px; } .demo { font-size: 2.6cqw; --ox: 58cqw; } .win { width: 48%; }
  .s-humenhr .demo, .s-brightpath .demo { font-size: 2.4cqw; --ox: 21cqw; } .fs-body, .fs-input { width: 78%; } .show { padding-bottom: 80px; }
  .ask { margin-top: 28px; } .ask textarea { font-size: 16px; min-height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .rtrack.glide { transition: none; } .dots-row button.on::after { animation: none; transform: scaleX(1); }
  .sc *, .rcard .sc > * { animation: none !important; opacity: 1 !important; transform: none !important; } .rg-n .a { opacity: 0 !important; } .mb-new { opacity: 1 !important; } .rg-bar i { width: 83.4%; }
  .w { transition: none; } .track { animation: none; }
  .demo * { animation: none !important; } .cur, .dots, .act .offer, .tap { display: none; } .win, .fs, .m, .act { opacity: 1; }
}

/* ---------- made around your business, Flodesk-style: big flat-colour tiles, a site behind each widget ---------- */
.sec-head2 { max-width: 1240px; margin: 0 auto 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.sec-head2 h2 { margin: 0; font-weight: 500; font-size: clamp(34px, 4vw, 60px); line-height: 1.04; letter-spacing: -.04em; }
.sec-head2 p { margin: 18px 0 0; max-width: 46ch; font-size: 18px; color: var(--muted); }
.sec-head2 .btn { flex: none; }
.mas2 { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.mas2 .col { display: grid; gap: 24px; }
.mas2 .tile { margin: 0; padding: 44px 44px 48px; border: 0; border-radius: 24px; display: flex; flex-direction: column; gap: 40px; color: #f4efe8; }
.mas2 .tile .tx h3 { margin: 0; font-weight: 500; font-size: 26px; letter-spacing: -.025em; line-height: 1.15; }
.mas2 .tile .tx p { margin: 12px 0 0; max-width: 40ch; font-size: 16.5px; line-height: 1.5; color: rgba(244,239,232,.72); }
/* the colours */
.t-flow { background: #ddd7ae !important; color: #1b1714 !important; } .t-flow .tx p { color: rgba(27,23,20,.68) !important; }
.t-agent { background: #1f2a1f !important; }
.t-say { background: #2a0a0a !important; }
.t-mod { background: #dbd8d2 !important; color: #1b1714 !important; } .t-mod .tx p { color: rgba(27,23,20,.68) !important; }
.t-portal { background: #4b4236 !important; }
.t-mail { background: #22212e !important; border: 0 !important; }
/* the scene: a site sketched behind, the widget in front */
.scene { position: relative; min-height: 330px; display: grid; place-items: center; }
.t-flow .scene { min-height: 520px; } .t-agent .scene { min-height: 400px; }
.site-ph { position: absolute; left: 8%; right: 18%; top: 0; bottom: 14%; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.t-flow .site-ph, .t-mod .site-ph { background: rgba(255,255,255,.4); border-color: rgba(27,23,20,.06); }
.site-ph i { position: absolute; display: block; border-radius: 6px; background: rgba(255,255,255,.1); }
.t-flow .site-ph i, .t-mod .site-ph i { background: rgba(27,23,20,.08); }
.site-ph .bar { left: 0; right: 0; top: 0; height: 30px; border-radius: 0; background: rgba(255,255,255,.06); display: flex; gap: 6px; align-items: center; padding-left: 12px; }
.site-ph .bar b { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.t-flow .site-ph .bar b, .t-mod .site-ph .bar b { background: rgba(27,23,20,.15); }
.site-ph .hd { left: 8%; top: 56px; width: 46%; height: 18px; }
.site-ph .ln { left: 8%; top: 86px; width: 34%; height: 9px; } .site-ph .ln.s { top: 104px; width: 26%; }
.site-ph .img { left: 8%; right: 8%; top: 136px; bottom: 8%; border-radius: 10px; }
.wd { position: relative; z-index: 1; justify-self: end; width: min(86%, 420px); margin-top: 40px; }
.mas2 .bottom .tx { margin-top: auto; }
/* widgets as floating white cards */
.wd .flow { margin: 0; }
.wd .say, .wd .agw, .wd .mods, .wd .mail, .wd .url { background: #fff; border-radius: 16px; padding: 18px; color: #1b1714; box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 24px 48px -20px rgba(0,0,0,.45); margin: 0; }
.wd .portal { margin: 0; box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 24px 48px -20px rgba(0,0,0,.45); color: #1b1714; }
.wd .flow li { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.wd .agw .ag { margin-bottom: 14px; } .wd .agw .chips { margin: 0; }
.wd .mail { background: #fff; border: 0; } .wd .mail .sub { color: #6d6459; }
.wd .url { margin-top: 12px; display: flex; }
.wd .mods { margin: 0; }
@media (max-width: 820px) {
  .sec-head2 { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .mas2 { grid-template-columns: 1fr; gap: 16px; } .mas2 .col { gap: 16px; }
  .mas2 .tile { padding: 28px 24px 30px; gap: 28px; }
  .scene, .t-flow .scene, .t-agent .scene { min-height: 0; }
  .site-ph { left: 0; right: 10%; }
  .wd { width: 92%; margin-top: 28px; }
}

/* ---------- the two paths: full-width bands, Kovi first, a Pro second ---------- */
.paths2 { max-width: 1320px; margin: 0 auto; padding: 40px 16px 120px; display: grid; gap: 24px; }
.band { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 72px 72px; border-radius: 24px; color: #f6f2ea; overflow: hidden; }
.b-kovi { background: #1f2a1f; } .b-pro { background: #3a1a10; }
.eyebrow2 { display: inline-block; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); margin-bottom: 22px; }
.band h2 { margin: 0; font-weight: 400; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -.035em; max-width: 15ch; }
.band ul { margin: 26px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 17px; color: rgba(246,242,234,.85); }
.band p { margin: 22px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: rgba(246,242,234,.85); }
.wbtn { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; margin-top: 32px; border-radius: 10px; background: #fff; color: #1b1714; font-weight: 500; font-size: 16px; transition: background .2s; }
.wbtn:hover { background: #f1ede6; }
.assure { display: block; margin-top: 16px; font-size: 14.5px; color: rgba(246,242,234,.65); }
.band-art { position: relative; min-height: 380px; border-radius: 16px; background: rgba(255,255,255,.04); }
/* Kovi band art */
.kb-card { position: absolute; left: 10%; top: 12%; width: 46%; padding: 22px; border-radius: 18px; background: #c4724f; color: #fff8f2; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
.kb-kovi { display: block; width: 76px; height: 76px; margin-bottom: 18px; } .kb-kovi canvas { width: 76px; height: 76px; display: block; }
.kb-card b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.kb-card > span:last-child { font-size: 14.5px; opacity: .85; }
.kb-steps { position: absolute; right: 8%; bottom: 12%; width: 50%; padding: 16px 18px; border-radius: 16px; background: #fff; color: #1b1714; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
.band .kb-steps p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 0; font-size: 15px; color: #8a7f74; max-width: none; }
.kb-steps i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #d8d0c6; display: grid; place-items: center; flex: none; box-sizing: border-box; }
.kb-steps i svg { width: 12px; height: 12px; }
.band .kb-steps p.ok { color: #1b1714; } .kb-steps .ok i { background: #e3ecdf; border-color: #e3ecdf; color: #2f4a2a; }
.band .kb-steps p.now { color: #1b1714; font-weight: 500; } .kb-steps .now i { border-color: #c4724f; border-top-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.kb-tag { position: absolute; right: 10%; top: 14%; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kb-tag span { display: block; font-size: 13px; opacity: .7; } .kb-tag b { font-weight: 500; font-size: 22px; letter-spacing: -.02em; }
/* Pro band art: a Pro card that cycles through skills */
.pr-stage { position: absolute; inset: 0; }
.pr-card { position: absolute; left: 30%; top: 8%; width: 38%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--pr, #a99c3a); transition: background .6s; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
.pr-face { position: absolute; inset: 0; display: grid; place-items: center; background-size: cover; background-position: center 18%; }
.pr-face i { font-style: normal; font-size: 64px; font-weight: 500; letter-spacing: -.04em; color: rgba(255,255,255,.55); }
.pr-face.has i { visibility: hidden; }
.pr-who { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.6)); }
.pr-who b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 22px; }
.pr-who em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 16px; } .pr-who em svg { width: 15px; height: 15px; }
.pr-who > span { font-size: 14.5px; opacity: .85; }
.pr-tag { position: absolute; left: 4%; top: 18%; z-index: 2; width: 38%; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pill { display: inline-block; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); margin-bottom: 10px; }
.pr-skill { display: block; font-weight: 400; font-size: 26px; line-height: 1.12; letter-spacing: -.02em; }
.pr-out { position: absolute; right: 3%; bottom: 8%; z-index: 2; width: 38%; padding: 12px 16px; border-radius: 16px; background: #fff; color: #1b1714; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
.band .pr-out p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 0; font-size: 15px; color: #1b1714; max-width: none; }
.pr-out i { width: 20px; height: 20px; border-radius: 50%; background: #e3ecdf; color: #2f4a2a; display: grid; place-items: center; flex: none; } .pr-out i svg { width: 12px; height: 12px; }
.pr-fade { transition: opacity .35s; } .pr-fade.out { opacity: 0; }
@media (max-width: 960px) {
  .band { grid-template-columns: 1fr; padding: 44px 28px; gap: 36px; }
  .band-art { min-height: 340px; }
}
@media (max-width: 820px) {
  .paths2 { padding: 24px 12px 80px; gap: 16px; }
  .band h2 { font-size: 32px; }
  .kb-card { left: 5%; width: 56%; } .kb-steps { right: 4%; width: 64%; } .kb-tag { right: 5%; }
  .pr-card { left: 30%; width: 50%; } .pr-tag { left: 4%; width: 48%; } .pr-skill { font-size: 20px; } .pr-out { right: 3%; width: 60%; }
}
@media (prefers-reduced-motion: reduce) { .kb-steps .now i { animation: none; } }

/* ---------- the video: Tovi, poster until someone presses play ---------- */
.watch { padding: 40px 16px 120px; }
.vframe { position: relative; max-width: 1180px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden;
  background: radial-gradient(70% 90% at 70% 30%, rgba(196,114,79,.35), transparent 60%), radial-gradient(60% 80% at 20% 90%, rgba(142,163,207,.25), transparent 60%), #1b1714; }
.vframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.vplay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 16px; padding: 40px; border: 0; cursor: pointer; color: #f6f2ea;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); font: inherit; text-align: left; }
.vbtn { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #f6f2ea; color: #1b1714; flex: none; transition: transform .25s; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.vbtn svg { width: 28px; height: 28px; margin-left: 4px; }
.vplay:hover .vbtn { transform: scale(1.06); }
.vcap b { display: block; font-weight: 500; font-size: 24px; letter-spacing: -.02em; }
.vcap span { font-size: 16px; opacity: .8; }
.vframe.playing .vplay { display: none; }
@media (max-width: 820px) { .watch { padding: 24px 12px 80px; } .vframe { border-radius: 16px; } .vplay { padding: 20px; gap: 12px; } .vbtn { width: 56px; height: 56px; } .vcap b { font-size: 19px; } .vcap span { font-size: 14px; } }

/* ---------- templates: six on the homepage ---------- */
.tpls { padding: 40px 16px 120px; }
.tpl-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 20px; }
.tpl { display: block; color: inherit; }
.tpl-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden;
  background: radial-gradient(80% 90% at 70% 20%, rgba(255,255,255,.12), transparent 60%), var(--tone); background-size: cover; background-position: top center;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.tpl-img i { font-style: normal; font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.55); }
.tpl-img { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.tpl:hover .tpl-img { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(20,15,10,.45); }
.tpl-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.tpl-t b { display: block; font-weight: 500; font-size: 17px; letter-spacing: -.015em; }
.tpl-t em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; color: var(--muted); }
.tpl-p { font-size: 14.5px; color: var(--muted); opacity: 0; transition: opacity .25s; }
.tpl:hover .tpl-p { opacity: 1; }
@media (max-width: 1100px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .tpls { padding: 24px 16px 80px; } .tpl-grid { grid-template-columns: 1fr; gap: 28px; } .tpl-p { opacity: 1; } }

/* ---------- the close ---------- */
.finale2 { position: relative; isolation: isolate; overflow: hidden; padding: 140px 16px 150px; text-align: center; }
.end-wash { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 70% at 12% 100%, rgba(154,132,182,.32), transparent 70%), radial-gradient(40% 62% at 50% 100%, rgba(138,157,132,.30), transparent 70%),
    radial-gradient(48% 70% at 90% 100%, rgba(142,163,207,.34), transparent 70%), radial-gradient(30% 40% at 30% 100%, rgba(196,114,79,.12), transparent 70%);
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent); }
.end-kovi { display: block; width: 84px; height: 84px; margin: 0 auto 28px; } .end-kovi canvas { width: 84px; height: 84px; display: block; }
.finale2 h2 { margin: 0; font-weight: 500; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.04em; }
.finale2 > p { margin: 20px auto 0; font-size: 18px; color: var(--muted); }
.end-ask { margin-top: 36px !important; }
.end-pro { display: inline-flex; gap: 6px; margin-top: 22px; font-size: 16px; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,.25); padding-bottom: 2px; }
.end-pro:hover { border-color: var(--ink); }
/* ---------- footer ---------- */
.foot { background: #1b1714; color: #f6f2ea; padding: 80px 40px 32px; }
.foot-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px; }
.foot .brand { color: #f6f2ea; }
.foot-brand p { margin: 18px 0 0; max-width: 34ch; font-size: 15.5px; line-height: 1.55; color: rgba(246,242,234,.6); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.foot-cols div { display: grid; gap: 12px; align-content: start; }
.foot-cols b { font-weight: 500; font-size: 14px; color: rgba(246,242,234,.5); margin-bottom: 4px; }
.foot-cols a { font-size: 15.5px; color: rgba(246,242,234,.88); } .foot-cols a:hover { color: #fff; }
.foot-base { max-width: 1240px; margin: 72px auto 0; padding-top: 24px; border-top: 1px solid rgba(246,242,234,.12); display: flex; justify-content: space-between; font-size: 14px; color: rgba(246,242,234,.5); }
@media (max-width: 820px) {
  .finale2 { padding: 90px 16px 100px; }
  .foot { padding: 56px 20px 28px; } .foot-in { grid-template-columns: 1fr; gap: 40px; } .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .foot-base { flex-direction: column; gap: 6px; margin-top: 48px; }
}

/* =====================================================================
   POLISH PASS (Oct 2026): the composer, the designs, the footer
   ===================================================================== */
:root { --glaze: #c4724f; --glaze2: #c99a48; }
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---------- the composer: a quiet ring in Kovi's glazes ---------- */
.ask2 { border: 0; border-radius: 24px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -30px rgba(40,25,15,.28); }
.ask2::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 25.5px; padding: 1.5px;
  background: conic-gradient(from var(--spin), #c4724f, #c99a48, #9e9763, #8a9d84, #8ea3cf, #9a84b6, #b77c78, #c4724f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .55; transition: opacity .3s; animation: spin 9s linear infinite; }
.ask2::after { content: ""; position: absolute; inset: 30% 4% -12%; z-index: -2; border-radius: 40px; filter: blur(40px); opacity: .26; pointer-events: none;
  background: conic-gradient(from var(--spin), #c4724f, #c99a48, #8a9d84, #8ea3cf, #9a84b6, #c4724f); animation: spin 9s linear infinite; transition: opacity .3s; }
.ask2:hover::before { opacity: .85; }
.ask2:focus-within { border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 30px 70px -30px rgba(40,25,15,.36); }
.ask2:focus-within::before { opacity: 1; } .ask2:focus-within::after { opacity: .42; }
@keyframes spin { to { --spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ask2::before, .ask2::after { animation: none; } }
.ask-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px 0; font-size: 13.5px; color: var(--muted); }
.ask-top b { color: var(--ink); font-weight: 600; }
.ask-kovi { width: 26px; height: 26px; flex: none; } .ask-kovi canvas { width: 26px; height: 26px; display: block; }
.ask2 textarea { min-height: 92px; padding: 10px 24px 8px; font-size: 19px; }
.ask-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 12px 20px; }
.ask-bar .try { font-size: 13px; color: #9a9a9a; }
.exs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.ex { height: 32px; padding: 0 12px; border: 1px solid #ebe7e1; border-radius: 99px; background: #fbfaf8; font: 500 13px/1 var(--font); color: #3a3a3a; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.ex:hover { border-color: var(--glaze); color: var(--ink); background: color-mix(in srgb, var(--glaze) 10%, #fff); }
.ask2 .send { position: static; flex: none; margin-left: auto; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); transition: background .3s, transform .2s; }
.ask2:focus-within .send, .ask2 .send:hover { background: var(--glaze); }
.ask2 .send:active { transform: scale(.94); }

/* ---------- designs: real templates in browser frames that scroll on hover ---------- */
.tfilter { max-width: 1240px; margin: -20px auto 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tfilter button { height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; background: transparent; font: 500 14.5px var(--font); color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.tfilter button:hover { border-color: var(--ink); }
.tfilter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.thint { margin-left: auto; font-size: 13.5px; color: var(--muted); }
.tgrid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 26px; }
.tcard { display: block; color: inherit; }
.tcard[hidden] { display: none; }
.tframe { display: block; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 18px 40px -28px rgba(30,20,10,.4); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.tcard:hover .tframe { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 34px 60px -30px rgba(30,20,10,.5); }
.tbar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #f3f1ee; border-bottom: 1px solid #e9e5df; }
.tbar i { width: 9px; height: 9px; border-radius: 50%; background: #dcd7cf; }
.turl { margin: 0 auto; padding: 3px 12px; border-radius: 6px; background: #fff; font-size: 11.5px; color: #8a847b; transform: translateX(-14px); }
.tview { display: block; position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; container-type: size; background: #eee; }
.tview img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 1.2s cubic-bezier(.4,0,.2,1); }
.tcard:hover .tview img, .tcard:focus-visible .tview img { transform: translateY(calc(-100% + 100cqh)); transition: transform 9s cubic-bezier(.45,.05,.4,1); }
@media (prefers-reduced-motion: reduce) { .tcard:hover .tview img { transform: none; } }
.tcap { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.tcap > span:first-child { flex: 1; min-width: 0; }
.tcap b { display: block; font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
.tcap em { display: block; font-style: normal; font-size: 14px; color: var(--muted); }
.tsw { display: flex; } .tsw i { width: 16px; height: 16px; margin-left: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px rgba(0,0,0,.08); }
.tgo { font-size: 14px; font-weight: 500; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.tcard:hover .tgo { opacity: 1; transform: none; }
.tsoon { max-width: 1240px; margin: 70px auto 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; padding: 30px 34px; border-radius: 22px; background: #f2efea; }
.tsoon b { font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.tsoon p { margin: 8px 0 0; font-size: 15px; color: var(--muted); max-width: 40ch; }
.tsoon-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tsoon-list a { padding: 8px 14px; border-radius: 99px; background: #fff; font-size: 14px; box-shadow: inset 0 0 0 1px #e6e1d9; transition: box-shadow .2s; }
.tsoon-list a:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- footer: the Kovi family sits on the edge ---------- */
.foot { position: relative; padding: 0 40px 32px; background: #17130f; }
.foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none;
  background: radial-gradient(40% 80% at 20% 0, color-mix(in srgb, var(--glaze) 22%, transparent), transparent 70%), radial-gradient(40% 80% at 80% 0, color-mix(in srgb, var(--glaze2) 18%, transparent), transparent 70%); }
.family { position: relative; display: flex; justify-content: center; gap: clamp(6px, 2vw, 22px); transform: translateY(-50%); height: 84px; margin-bottom: -10px; }
.fk { width: 84px; height: 84px; animation: hop 6s ease-in-out infinite; animation-delay: var(--d); }
.fk canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 14px 14px rgba(0,0,0,.25)); }
@keyframes hop { 0%, 86%, 100% { transform: translateY(0); } 90% { transform: translateY(-14px); } 94% { transform: translateY(0); } 97% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .fk { animation: none; } }
.foot-hero { position: relative; max-width: 1240px; margin: 40px auto 80px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.foot-hero h2 { margin: 0; font-weight: 500; font-size: clamp(40px, 5.4vw, 78px); line-height: 1; letter-spacing: -.045em; color: #f6f2ea; }
.foot-hero .gl { color: var(--glaze); transition: color 1s; }
.fh-acts { display: flex; align-items: center; gap: 22px; }
.fh-go { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: 12px; background: #f6f2ea; color: #17130f; font-weight: 500; font-size: 16px; transition: background .2s; }
.fh-go:hover { background: #fff; }
.fh-pro { font-weight: 500; color: rgba(246,242,234,.85); border-bottom: 1px solid rgba(246,242,234,.3); padding-bottom: 2px; }
.fh-pro:hover { color: #fff; border-color: #fff; }
.foot-in { position: relative; padding-top: 56px; border-top: 1px solid rgba(246,242,234,.12); }
.live { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 8px 14px; border-radius: 99px; background: rgba(246,242,234,.06); font-size: 13.5px; color: rgba(246,242,234,.75); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #8fd19e; box-shadow: 0 0 0 0 rgba(143,209,158,.6); animation: livepulse 2.4s infinite; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 9px rgba(143,209,158,0); } 100% { box-shadow: 0 0 0 0 rgba(143,209,158,0); } }
.foot-base { position: relative; }

@media (max-width: 1000px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tsoon { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .foot { padding: 0 20px 28px; }
  .fk { width: 48px; height: 48px; } .family { height: 48px; }
  .foot-hero { margin: 24px auto 56px; }
  .thint { display: none; }
}
@media (max-width: 620px) {
  .tgrid { grid-template-columns: 1fr; }
  .ask-bar { flex-wrap: wrap; } .ask-bar .try { display: none; }
  .exs { order: 2; flex-basis: 100%; }
  .fk:nth-child(n+6) { display: none; }
}

/* =====================================================================
   FUN PASS: Kovi as a guide, and mockups that act out what they say.
   Classes come from fun.js; without it, everything still shows, just still.
   ===================================================================== */
.gl { color: var(--glaze); transition: color 1s; }

/* hero: the rotating word gets a hand-drawn underline that redraws on each swap */
#who { position: relative; }
#who::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.06em; height: .2em; z-index: -1; border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
  background: color-mix(in srgb, var(--glaze) 45%, transparent); transform-origin: left; transition: transform .55s cubic-bezier(.3,.8,.3,1) .15s, background 1s; }
#who.out::after { transform: scaleX(0); transition-delay: 0s; }

/* made around your business: a turning badge with Kovi in the middle */
.head-acts { display: flex; align-items: center; gap: 22px; flex: none; }
.kbadge { position: relative; width: 112px; height: 112px; flex: none; }
.kbadge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: turn 22s linear infinite; }
.kbadge text { font: 600 10.6px/1 var(--font); letter-spacing: .2em; fill: #6b625a; }
.kbadge canvas { position: absolute; inset: 27px; width: 58px; height: 58px; }
@keyframes turn { to { transform: rotate(360deg); } }

/* the tiles act out what they say, once, when they arrive */
.t-flow.seen .flow li::before { animation: tick .35s ease forwards; animation-delay: calc(var(--i) * .6s + .4s); }
.t-flow.seen .flow li { animation: glow 1.2s ease; animation-delay: calc(var(--i) * .6s + .3s); }
@keyframes tick { to { border-color: #6f5a8d; background: #6f5a8d url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 8px no-repeat; } }
@keyframes glow { 30% { box-shadow: 0 0 0 4px rgba(154,132,182,.35); transform: translateX(4px); } }

.t-say.seen .say .you { animation: typeIn 1.4s steps(28, end) both; }
.t-say.seen .say .k { animation: rise .45s cubic-bezier(.3,1.5,.5,1) 1.7s both; }
.t-say.seen .say .ok { animation: boing .6s cubic-bezier(.3,1.8,.5,1) 1.9s both; }
@keyframes typeIn { from { clip-path: inset(0 100% 0 0 round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes boing { from { transform: scale(0) rotate(-40deg); } }

.t-agent.seen .chips span { animation: pop .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * .14s + .3s); }
.t-portal.seen .portal p { animation: slideIn .5s ease both; animation-delay: calc(var(--i) * .16s + .2s); }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(6px); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-16px); } }
.t-mod .mods .add { animation: wiggle 5s ease-in-out 2s infinite; }
@keyframes wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-6deg); } 94% { transform: rotate(5deg); } 97% { transform: rotate(-2deg); } }
.t-mail .url em { animation: connected 2.6s ease-in-out infinite; }
@keyframes connected { 50% { box-shadow: 0 0 0 5px rgba(143,209,158,.28); } }

/* the video: Kovi perched on the frame */
.vwrap { position: relative; max-width: 1180px; margin: 0 auto; }
.perch { position: absolute; right: 7%; top: -62px; z-index: 3; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.pk { width: 72px; height: 72px; } .pk canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 10px rgba(0,0,0,.18)); }
.bubble { margin-bottom: 44px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.05); font-size: 14.5px; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translateY(8px) scale(.9); transform-origin: right bottom; transition: opacity .4s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.vwrap.seen .bubble { opacity: 1; transform: none; transition-delay: .5s; }
.vwrap .pk { transform: translateY(30px); opacity: 0; transition: transform .6s cubic-bezier(.3,1.5,.5,1), opacity .3s; }
.vwrap.seen .pk { transform: none; opacity: 1; }

/* start with Kovi: the build finishes, then a little confetti */
.kb-steps p.just i { animation: boing .5s cubic-bezier(.3,1.8,.5,1); }
.kb-tag { transition: background .4s, color .4s, transform .4s; }
.kb-tag.live { background: var(--glaze); border-color: transparent; transform: rotate(-3deg) scale(1.06); }
.kb-tag.live span { display: block; }
.band-art.pop::before, .band-art.pop::after { content: ""; position: absolute; right: 8%; top: 4%; width: 170px; height: 130px; pointer-events: none;
  background: radial-gradient(circle at 8% 20%, #c4724f 3px, transparent 4px), radial-gradient(circle at 30% 6%, #c99a48 2.5px, transparent 3.5px), radial-gradient(circle at 52% 26%, #8ea3cf 3px, transparent 4px), radial-gradient(circle at 74% 10%, #9a84b6 2.5px, transparent 3.5px), radial-gradient(circle at 90% 30%, #8a9d84 3px, transparent 4px), radial-gradient(circle at 18% 52%, #b77c78 2.5px, transparent 3.5px), radial-gradient(circle at 64% 48%, #c99a48 3px, transparent 4px), radial-gradient(circle at 40% 70%, #8ea3cf 2px, transparent 3px), radial-gradient(circle at 84% 66%, #c4724f 2.5px, transparent 3.5px);
  animation: confetti 1.6s ease-out forwards; }
.band-art.pop::after { right: 14%; top: 12%; transform: scaleX(-1) rotate(20deg); animation-delay: .12s; }
@keyframes confetti { 0% { opacity: 0; transform: translateY(20px) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .kbadge svg, .t-mod .mods .add, .t-mail .url em { animation: none; }
  .t-flow.seen .flow li, .t-flow.seen .flow li::before, .t-say.seen .say *, .t-agent.seen .chips span, .t-portal.seen .portal p { animation-duration: .01s; animation-delay: 0s; }
}
@media (max-width: 820px) {
  .kbadge { display: none; }
  .perch { right: 4%; top: -46px; } .pk { width: 52px; height: 52px; } .bubble { margin-bottom: 30px; font-size: 13px; }
}

/* =====================================================================
   FUN PASS 2: a notch more personality
   ===================================================================== */
/* Kovi in the composer nods while you type, and perks up when you're done */
.ask-say { transition: color .3s; }
.ask2[data-mood="listening"] .ask-kovi { animation: nod .9s ease-in-out infinite; }
.ask2[data-mood="ready"] .ask-kovi { animation: perk .6s cubic-bezier(.3,1.8,.5,1); }
.ask2[data-mood="ready"] .ask-say { color: var(--ink); }
.ask2[data-mood="ready"] .send { background: var(--glaze); animation: nudge 1.6s ease-in-out .3s 2; }
@keyframes nod { 50% { transform: translateY(2px) rotate(-6deg); } }
@keyframes perk { 40% { transform: translateY(-6px) scale(1.15); } }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translateY(-3px); } 50% { transform: translateY(0); } 65% { transform: translateY(-1px); } }

/* the footer family: hover one to say hi */
.fk { position: relative; cursor: default; }
.fk:hover { animation: hophi .55s cubic-bezier(.3,1.6,.5,1); }
.fk::after { content: attr(data-name); position: absolute; left: 50%; top: -30px; padding: 4px 10px; border-radius: 99px; background: #f6f2ea; color: #17130f; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 6px) scale(.85); transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.fk:hover::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
@keyframes hophi { 40% { transform: translateY(-18px) rotate(-6deg); } 70% { transform: translateY(-4px) rotate(3deg); } }

/* the closing Kovi speaks */
.end-kovi { position: relative; }
.bubble.end-b { position: absolute; left: calc(100% + 6px); bottom: 62px; margin: 0; border-radius: 16px 16px 16px 4px; transform-origin: left bottom; }
.end-kovi.seen .end-b { opacity: 1; transform: none; transition-delay: .4s; }

/* the designs hint becomes a little guide */
.thint { display: inline-flex; align-items: center; gap: 8px; }
.tk { width: 30px; height: 30px; flex: none; } .tk canvas { width: 30px; height: 30px; display: block; }
.tk-say { padding: 6px 12px; border-radius: 12px 12px 12px 4px; background: #fff; box-shadow: 0 6px 18px -10px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.05); color: var(--ink); font-weight: 500; }

/* buttons: a small arrow slides in on hover */
.btn, .cta, .wbtn, .fh-go { transition: background .2s, padding .25s, transform .2s; }
.btn::after, .cta::after, .wbtn::after, .fh-go::after { content: "→"; display: inline-block; max-width: 0; overflow: hidden; opacity: 0; margin-left: 0; transition: max-width .25s, opacity .25s, margin .25s; }
.btn:hover::after, .cta:hover::after, .wbtn:hover::after, .fh-go:hover::after { max-width: 1.2em; opacity: 1; margin-left: 8px; }
.btn:active, .cta:active, .wbtn:active, .fh-go:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) { .ask2 .ask-kovi, .ask2 .send, .fk:hover { animation: none !important; } }
@media (max-width: 820px) { .bubble.end-b { left: 50%; bottom: auto; top: -46px; transform: translateX(-50%); } .end-kovi.seen .end-b { transform: translateX(-50%); } .fk::after { display: none; } }

/* =====================================================================
   HOW IT WORKS + FAQ
   ===================================================================== */
.eyebrow3 { display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #ebebeb; font-size: 13.5px; font-weight: 500; }

/* ---------- how it works ---------- */
.how3 { padding: 110px 16px 40px; }
.how3 .sec-head { max-width: 820px; }
.steps3 { position: relative; list-style: none; max-width: 1240px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* the dashed path joining the three steps */
.steps3::before { content: ""; position: absolute; left: 16%; right: 16%; top: 324px; border-top: 2px dashed #dcdcdc; }
.st { position: relative; }
.st-art { position: relative; height: 300px; border-radius: 24px; overflow: hidden; display: grid; place-items: center; }
.st1 .st-art { background: #efe9f4; } .st2 .st-art { background: #e6ede4; } .st3 .st-art { background: #f3e8de; }
.st-n { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin: 2px 0 18px; border-radius: 50%; background: #111; color: #fff; font-weight: 600; font-size: 18px; box-shadow: 0 0 0 8px var(--bg); }
.st h3 { margin: 0 0 8px; font-weight: 500; font-size: 22px; letter-spacing: -.02em; }
.st > p { margin: 0; max-width: 36ch; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* 1: a mini composer that types */
.mini-ask { width: 82%; padding: 14px 14px 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 20px 40px -24px rgba(60,30,80,.35); }
.ma-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ma-k { width: 20px; height: 20px; } .ma-k canvas { width: 20px; height: 20px; display: block; }
.ma-txt { margin: 10px 2px 12px; min-height: 66px; font-size: 15px; line-height: 1.45; }
.ma-txt span { display: inline; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--glaze); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ma-send { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border-radius: 10px; background: #111; color: #fff; }
.ma-send svg { width: 14px; height: 14px; }
.how3.seen .ma-send { animation: sendGlow .6s ease 3s both; }
@keyframes typeLine { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sendGlow { to { background: var(--glaze); transform: scale(1.06); } }

/* 2: a site that assembles itself */
.mini-site { position: absolute; left: 9%; top: 14%; width: 62%; height: 72%; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -26px rgba(20,40,20,.4); overflow: hidden; }
.mini-site i { display: block; }
.ms-bar { display: flex; gap: 4px; padding: 8px 10px; background: #f3f3f3; } .ms-bar b { width: 6px; height: 6px; border-radius: 50%; background: #d4d4d4; }
.ms-hero { height: 38%; margin: 10px; border-radius: 10px; background: #d9c7ae url(img/how/groom.jpg) center 42% / cover; }
.ms-l { height: 8px; margin: 8px 10px 0; width: 70%; border-radius: 4px; background: #e9e9e9; } .ms-l.s { width: 46%; }
.ms-row { display: flex; gap: 6px; margin: 12px 10px; } .ms-row i { flex: 1; height: 34px; border-radius: 8px; background: #f0f0f0; }
.mini-list { position: absolute; right: 7%; bottom: 12%; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -22px rgba(20,40,20,.45); font-size: 13.5px; }
.mini-list p { display: flex; align-items: center; gap: 8px; margin: 0; }
.mini-list i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e3ecdf; color: #2f4a2a; } .mini-list i svg { width: 10px; height: 10px; }
.how3.seen .mini-site > * { animation: rise .5s cubic-bezier(.3,1.4,.5,1) both; }
.how3.seen .ms-hero { animation-delay: 3.3s; } .how3.seen .ms-l { animation-delay: 3.5s; } .how3.seen .ms-l.s { animation-delay: 3.6s; } .how3.seen .ms-row { animation-delay: 3.8s; } .how3.seen .ms-bar { animation-delay: 3.1s; }
.how3.seen .mini-list p { animation: rise .4s ease both; } .how3.seen .mini-list p:nth-child(1) { animation-delay: 4.1s; } .how3.seen .mini-list p:nth-child(2) { animation-delay: 4.4s; } .how3.seen .mini-list p:nth-child(3) { animation-delay: 4.7s; }

/* 3: the assistant at work */
.mini-phone { display: grid; gap: 8px; width: 64%; padding: 16px 14px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(0,0,0,.06), 0 24px 44px -26px rgba(80,40,20,.45); font-size: 13.5px; transform: translateX(-12%); }
.mini-phone p { margin: 0; padding: 8px 11px; line-height: 1.4; }
.mp-you { justify-self: end; max-width: 86%; border-radius: 14px 14px 4px 14px; background: #111; color: #fff; }
.mp-ai { max-width: 86%; border-radius: 14px 14px 14px 4px; background: #f3e8de; }
.mp-ok { display: flex; align-items: center; gap: 6px; color: #2f4a2a; font-weight: 500; padding-left: 4px !important; }
.mp-ok i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e3ecdf; } .mp-ok i svg { width: 10px; height: 10px; }
.mini-note { position: absolute; right: 6%; bottom: 10%; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 16px 30px -18px rgba(80,40,20,.45); font-size: 12.5px; }
.mini-note b { font-weight: 600; } .mini-note span:last-child { grid-column: 2; color: var(--muted); }
.mn-dot { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--glaze); }
.how3.seen .mp-you { animation: rise .4s ease 5.2s both; } .how3.seen .mp-ai { animation: rise .4s ease 5.9s both; } .how3.seen .mp-ok { animation: rise .4s cubic-bezier(.3,1.6,.5,1) 6.6s both; }
.how3.seen .mini-note { animation: drop .5s cubic-bezier(.3,1.5,.5,1) 7.2s both; }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.95); } }
/* the step numbers light up in turn */
.how3.seen .st1 .st-n { animation: lit .5s ease .2s both; } .how3.seen .st2 .st-n { animation: lit .5s ease 3s both; } .how3.seen .st3 .st-n { animation: lit .5s ease 5.1s both; }
@keyframes lit { 50% { transform: scale(1.18); } to { background: var(--glaze); } }
.how-cta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 56px; color: var(--muted); font-size: 15px; }
.how-cta span a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ ---------- */
.faq3 { max-width: 1240px; margin: 0 auto; padding: 60px 16px 40px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-side h2 { margin: 0; font-weight: 500; font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -.04em; }
.faq-side > p { margin: 18px 0 0; max-width: 34ch; font-size: 17px; color: var(--muted); }
.faq-who { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 14px 18px 14px 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #ebebeb; width: fit-content; }
.fq-k { width: 44px; height: 44px; flex: none; } .fq-k canvas { width: 44px; height: 44px; display: block; }
.faq-who b { display: block; font-weight: 600; } .faq-who a { font-size: 14.5px; color: var(--muted); } .faq-who a:hover { color: var(--ink); }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #ebebeb; transition: box-shadow .25s; }
.faq-list details[open] { box-shadow: 0 0 0 1px #ebebeb, 0 18px 40px -28px rgba(0,0,0,.3); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; font-weight: 500; font-size: 17.5px; letter-spacing: -.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #f3f3f3; transition: background .25s, transform .3s; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #111; transition: transform .3s; }
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i { background: var(--glaze); transform: rotate(180deg); }
.faq-list details[open] summary i::before, .faq-list details[open] summary i::after { background: #fff; }
.faq-list details[open] summary i::after { transform: rotate(0); }
.faq-list details p { margin: 0; padding: 0 22px 22px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
.faq-list details[open] p { animation: rise .35s ease; }

@media (prefers-reduced-motion: reduce) { .how3 *, .faq-list * { animation: none !important; } }
@media (max-width: 960px) {
  .steps3 { grid-template-columns: 1fr; gap: 44px; max-width: 520px; } .steps3::before { display: none; }
  .faq3 { grid-template-columns: 1fr; gap: 32px; } .faq-side { position: static; }
}

/* =====================================================================
   KOVI IN THE CORNER (widget.js)
   ===================================================================== */
.kw { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: none; }
.kw.on { display: block; }
.kw-launch { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 20px 0 8px; border: 0; border-radius: 99px; background: #111; color: #fff; font: 500 15.5px var(--font); cursor: pointer;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); transition: transform .55s cubic-bezier(.3,1.25,.4,1), opacity .4s, box-shadow .25s; }
.kw-launch:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--glaze) 35%, transparent), 0 18px 40px -16px rgba(0,0,0,.5); }
.kw-k { width: 42px; height: 42px; } .kw-k canvas { width: 42px; height: 42px; display: block; }
.kw.open .kw-launch { padding-right: 8px; } .kw.open .kw-l { display: none; }
.kw-panel { position: absolute; right: 0; bottom: 72px; width: min(370px, calc(100vw - 32px)); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 70px -30px rgba(0,0,0,.45); overflow: hidden;
  transform-origin: right bottom; animation: kwIn .35s cubic-bezier(.3,1.3,.5,1); }
@keyframes kwIn { from { opacity: 0; transform: translateY(12px) scale(.94); } }
.kw-panel header { display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px 16px; border-bottom: 1px solid #f0f0f0; }
.kw-panel header > span:nth-child(2) { flex: 1; line-height: 1.2; }
.kw-panel header b { display: block; font-weight: 600; } .kw-panel header small { font-size: 12.5px; color: var(--muted); }
.kw-av { width: 38px; height: 38px; } .kw-av canvas { width: 38px; height: 38px; display: block; }
.kw-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3f3f3; font-size: 18px; cursor: pointer; }
.kw-log { padding: 16px; }
.kw-b { margin: 0; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #fafafa; box-shadow: 0 0 0 1px #f0f0f0; font-size: 15px; line-height: 1.5; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
.kw-chips button { padding: 8px 12px; border: 1px solid #e6e6e6; border-radius: 99px; background: #fff; font: 500 13.5px var(--font); cursor: pointer; transition: border-color .2s, background .2s; }
.kw-chips button:hover { border-color: var(--glaze); background: color-mix(in srgb, var(--glaze) 10%, #fff); }
.kw-form { display: flex; gap: 8px; margin: 0 12px 12px; padding: 6px 6px 6px 14px; border-radius: 16px; background: #fafafa; box-shadow: 0 0 0 1px #ececec; }
.kw-form:focus-within { box-shadow: 0 0 0 2px var(--glaze); }
.kw-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px var(--font); }
.kw-form button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 11px; background: #111; color: #fff; cursor: pointer; }
.kw-form button svg { width: 15px; height: 15px; }
.kw-form:focus-within button { background: var(--glaze); }
/* live chat in the panel (widget.js, when the site's chat API is on): the visitor's side,
   Kovi thinking, the log scrolling, and the human check frame if the site asks for one */
.kw-live .kw-log { display: grid; gap: 8px; align-content: start; max-height: min(46vh, 380px); overflow-y: auto; }
.kw-you { margin: 0; width: fit-content; max-width: 85%; justify-self: end; padding: 12px 14px; border-radius: 16px 4px 16px 16px; background: #111; color: #fff; font-size: 15px; line-height: 1.5; }
.kw-b.typing { position: relative; color: transparent; }
.kw-b.typing::after { content: "· · ·"; position: absolute; letter-spacing: 3px; color: #b9b9b9; animation: kw-pulse 1.2s ease infinite; }
@keyframes kw-pulse { 50% { opacity: .35; } }
.kw-human { margin: 0; padding: 10px 12px; border-radius: 12px; background: #f3f3f3; color: var(--muted); font-size: 13.5px; }
.kw-human iframe { display: block; width: 100%; height: 64px; border: 0; margin-top: 8px; border-radius: 8px; }
@media (max-width: 620px) { .kw { right: 14px; bottom: 14px; } .kw-l { display: none; } .kw-launch { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .kw-launch { transition: opacity .2s; } .kw-panel { animation: none; } }