/* Puhelinvahti, the Sales Bot showcase world. Tokens from MX's tokens.css:
   cinematic outside, surgical inside. One accent, the blue hour. No pure black,
   no pure white, elevation in luminance, hairlines not shadows. */
@font-face{font-family:"Instrument Sans";src:url(fonts/instrumentsans.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geistmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geistmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  color-scheme:dark;
  --canvas:#0b0e14;--panel:#101520;--raised:#161c29;--overlay:#1c2330;--sunken:#080b10;
  --hover:rgba(255,255,255,.035);--active:rgba(255,255,255,.06);
  --ink:#eef1f6;--ink2:#a4aebe;--ink3:#7f8ca0;--inverse:#0b0e14;
  --hair:rgba(255,255,255,.07);--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.14);--line3:rgba(255,255,255,.22);
  --brand:#5694ff;--brand-hover:#6ea3ff;--brand-subtle:rgba(86,148,255,.12);--brand-border:rgba(86,148,255,.32);--brand-glow:rgba(86,148,255,.25);
  --good:#5fd6a5;--good-bg:rgba(52,199,137,.12);--good-bd:rgba(52,199,137,.28);
  --warn:#f0c078;--warn-bg:rgba(240,173,78,.12);
  --display:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:8px;--r-lg:10px;--r-glass:14px;
  --t-hover:140ms;--t-panel:200ms;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:auto;background:var(--canvas)}
body{margin:0;font-family:var(--ui);color:var(--ink);background:var(--canvas);line-height:1.55;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--brand);color:var(--inverse)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:400}
.display{font-family:var(--display);font-weight:500;letter-spacing:-.025em;line-height:1.02}

/* nav */
header{position:sticky;top:0;z-index:20;background:rgba(11,14,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--ui);font-weight:600;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase}
.brand .mark{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#f3f5f9 0,#c9d1dd 45%,#5a6372 46%,#1c2330 70%);box-shadow:0 0 0 1px var(--line2)}
.brand .mark svg{display:none}
.nav ul{display:none;list-style:none;margin:0 0 0 auto;padding:0;gap:26px;align-items:center}
.nav .login{margin-left:18px;padding:8px 14px;border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--raised);color:var(--ink);text-decoration:none;font-weight:500;font-size:.86rem;white-space:nowrap;transition:background var(--t-hover),border-color var(--t-hover)}
.nav .login:hover{background:var(--overlay);border-color:var(--line3)}
.nav ul a{text-decoration:none;color:var(--ink2);font-weight:500;font-size:.9rem;transition:color var(--t-hover)}
.nav ul a:hover{color:var(--ink)}

/* buttons: two kinds, neither carries an accent */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:var(--r-lg);font-weight:500;font-size:.95rem;text-decoration:none;border:1px solid var(--line2);color:var(--ink);background:var(--raised);transition:background var(--t-hover),border-color var(--t-hover),transform var(--t-hover);cursor:pointer;font-family:var(--ui)}
.btn:hover{background:var(--overlay);border-color:var(--line3)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--inverse)}
.btn.primary:hover{background:#fff;border-color:#fff}
.btn.small{padding:8px 14px;font-size:.86rem}
.btn .arrow{transition:transform var(--t-hover);opacity:.8}
.btn:hover .arrow{transform:translate(2px,-1px)}

/* hero: calm, the device on the right */
.hero{position:relative;padding:76px 0 72px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(760px 380px at 18% 0%,rgba(86,148,255,.09),transparent 65%),linear-gradient(180deg,rgba(16,21,32,.38) 0%,rgba(11,14,20,0) 55%)}
.hero .grid{position:relative;display:grid;gap:44px;align-items:center}
.live{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:26px}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 var(--brand-glow);animation:pulse 2s infinite}
.live b{color:var(--ink2);font-weight:500}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(86,148,255,.45)}70%{box-shadow:0 0 0 9px rgba(86,148,255,0)}100%{box-shadow:0 0 0 0 rgba(86,148,255,0)}}
h1{font-family:var(--display);font-weight:500;font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.06;letter-spacing:-.03em;margin:0 0 24px;color:var(--ink)}
h1 span{display:block}
h1 .hi{color:var(--ink2)}
.lead{font-family:var(--display);font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--ink2);max-width:34rem;margin:0 0 30px;line-height:1.5}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.fine{margin-top:22px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink3)}

/* the device */
.device{position:relative;background:rgba(16,21,32,.82);border:1px solid var(--line);border-radius:var(--r-glass);padding:16px 16px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 80px -40px rgba(0,0,0,.9);max-width:440px;margin:0 auto;width:100%}
.device .bar{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink3);padding:2px 6px 14px;text-transform:uppercase}
.device .bar b{color:var(--ink2);font-weight:500}
.callhead{display:flex;align-items:center;gap:14px;padding:10px 8px 16px;border-bottom:1px solid var(--hair)}
.avatar{position:relative;width:42px;height:42px;border-radius:50%;background:var(--raised);border:1px solid var(--line2);display:grid;place-items:center;flex:0 0 42px;font-family:var(--mono);font-size:.7rem;color:var(--ink2)}
.avatar svg{width:18px;height:18px}
.avatar svg path{fill:var(--ink2)!important}
.avatar .ring{position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--brand);opacity:0}
.device.ringing .avatar .ring{animation:ring 1.4s ease-out infinite}
.device.ringing .avatar .ring.r2{animation-delay:.5s}
@keyframes ring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.callhead .who{font-weight:500;font-size:1rem}
.callhead .state{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink3);margin-top:3px;text-transform:uppercase}
.device.answered .callhead .state{color:var(--good)}
.feed{height:318px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:16px 4px 6px;position:relative}
.feed::before{content:"";position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(rgba(16,21,32,1),rgba(16,21,32,0));z-index:2;pointer-events:none}
.bub{max-width:86%;padding:10px 14px;border-radius:12px;font-size:.93rem;line-height:1.4;animation:pop .35s ease-out both}
.bub.vahti{background:var(--raised);border:1px solid var(--hair);border-bottom-left-radius:4px;align-self:flex-start;color:var(--ink)}
.bub.me{background:var(--brand-subtle);border:1px solid var(--brand-border);border-bottom-right-radius:4px;align-self:flex-end;color:var(--ink)}
.bub.typing{display:flex;gap:5px;align-items:center;padding:13px 16px}
.bub.typing i{width:5px;height:5px;border-radius:50%;background:var(--ink3);animation:blink 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.2s}.bub.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ticket{margin-top:6px;background:var(--overlay);border:1px solid var(--line2);border-radius:var(--r-lg);padding:12px 14px;animation:pop .4s ease-out both}
.ticket .t{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--good);display:flex;align-items:center;gap:8px}
.ticket .t::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--good)}
.ticket .h{font-weight:500;font-size:1rem;margin:6px 0 2px}
.ticket .d{font-size:.86rem;color:var(--ink2)}
.toast{position:absolute;left:16px;right:16px;top:50px;background:var(--overlay);border:1px solid var(--line2);border-radius:var(--r-lg);padding:10px 14px;display:flex;gap:10px;align-items:center;font-size:.85rem;transform:translateY(-16px);opacity:0;transition:.4s;z-index:5;color:var(--ink2)}
.toast.show{transform:none;opacity:1}
.toast .ok{width:7px;height:7px;border-radius:50%;background:var(--good);flex:0 0 7px}
.toast b{font-weight:500;color:var(--ink)}

/* the 3D background */
.bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
body>*:not(.bg3d){position:relative;z-index:1}
header{z-index:20}

/* rows instead of boxes */
.rows{border-top:1px solid var(--line)}
.row-item{display:grid;grid-template-columns:52px 1fr;gap:4px 10px;padding:20px 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:background var(--t-hover)}
.row-item:hover{background:var(--hover)}
.row-item .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--ink3);padding-top:6px;grid-row:span 2}
.row-item .name{font-family:var(--display);font-weight:500;letter-spacing:-.02em;font-size:1.3rem}
.row-item .line{color:var(--ink2);grid-column:2}
.row-item .go{grid-column:2;font-weight:500;font-size:.9rem;color:var(--ink);margin-top:6px}
.picture{padding:0 0 32px}
.picture figure{margin:0}
.picture img{display:block;width:100%;height:auto;border-radius:var(--r-glass);-webkit-mask-image:linear-gradient(180deg,#000 70%,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000 70%,rgba(0,0,0,.35))}
.picture figcaption{display:grid;gap:8px;padding:18px 0 0;max-width:46rem}
.picture figcaption strong{font-family:var(--display);font-weight:500;letter-spacing:-.02em;font-size:1.25rem;line-height:1.3;color:var(--ink)}
@media(min-width:780px){
  .row-item{grid-template-columns:52px 1.1fr 1.6fr auto;align-items:baseline;gap:10px 18px}
  .row-item .n{grid-row:auto}
  .row-item .line{grid-column:auto}
  .row-item .go{grid-column:auto;margin-top:0;white-space:nowrap}
  .step{padding:30px 28px 34px 0;border-bottom:0;border-right:1px solid var(--hair)}
  .step:last-child{border-right:0}
  .step+.step{padding-left:28px}
  .step+.step .big{right:0}
  .picture{padding:12px 0 40px}
}

/* marquee */
.marquee{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:rgba(16,21,32,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden;padding:13px 0}
.marquee .track{display:flex;width:max-content;animation:scroll 44s linear infinite;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.marquee span{padding:0 22px}
.marquee i{color:var(--brand);font-style:normal;opacity:.8}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
section{padding:96px 0}
.kicker{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
h2{font-family:var(--display);font-weight:500;letter-spacing:-.025em;line-height:1.05;font-size:clamp(2rem,4.4vw,3.4rem);margin:0 0 18px;max-width:16ch;color:var(--ink)}
.sub{color:var(--ink2);font-size:1.05rem;max-width:40rem;margin:0 0 44px}
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.fact{padding:26px 0 28px;border-bottom:1px solid var(--hair)}
.fact .n{font-family:var(--mono);color:var(--ink3);font-size:.72rem;letter-spacing:.14em;margin-bottom:14px}
.fact h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;font-size:1.55rem;margin:0 0 10px;line-height:1.1}
.fact p{margin:0;color:var(--ink2)}

.steps{display:grid;gap:14px}
.steps{gap:0;border-top:1px solid var(--line)}
.step{position:relative;padding:26px 0 30px;border-bottom:1px solid var(--hair)}
.step .big{position:absolute;right:0;top:26px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--ink3);-webkit-text-stroke:0;opacity:1;line-height:1}
.step .big::before{content:"0"}
.step h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;font-size:1.35rem;margin:0 0 10px;max-width:85%}
.step p{margin:0;color:var(--ink2)}
.step .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}

.limits{display:grid;gap:14px}
.panel{padding:0}
.panel h3{font-family:var(--display);font-weight:500;font-size:1.3rem;margin:0 0 16px;letter-spacing:-.02em;display:flex;align-items:center;gap:12px}
.panel h3 .pill{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;padding:4px 9px;border-radius:999px;background:var(--good-bg);color:var(--good);border:1px solid var(--good-bd);text-transform:uppercase;font-weight:400}
.panel.no h3 .pill{background:rgba(255,255,255,.06);color:var(--ink2);border-color:var(--line)}
.list{list-style:none;margin:0;padding:0}
.list li{padding:11px 0 11px 30px;border-top:1px solid var(--hair);position:relative;color:var(--ink2)}
.list li::before{position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;content:"\2713";background:var(--good-bg);color:var(--good)}
.panel.no .list li::before{content:"\00d7";background:rgba(255,255,255,.06);color:var(--ink3);font-size:.9rem}

.demo-grid{display:grid;gap:34px;align-items:start}
.phone{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-glass);padding:16px;max-width:460px}
.phone .bar{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink3);padding:2px 6px 12px;text-transform:uppercase}
.phone .chat{display:flex;flex-direction:column;gap:10px;padding:8px 4px}
.phone .chat .bub{animation:none}
.widget{margin:0 0 22px}
elevenlabs-convai{display:block}
.demo-note{color:var(--ink2);margin:0 0 20px}
.demo-note strong{color:var(--ink)!important;font-weight:500}

/* the work order, now a lead profile panel */
.order{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:26px 0 22px;max-width:560px;font-family:var(--ui);position:relative}
.order::after{display:none}
.order .oh{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:10px}
.order .row{display:flex;align-items:baseline;gap:10px;font-size:.95rem;padding:9px 0;color:var(--ink2)}
.order .row>span:first-child{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.order .row>span:last-child{color:var(--ink);white-space:nowrap}
.order .row .dots{flex:1;min-width:18px;border-bottom:1px dotted var(--line2);transform:translateY(-4px)}
.order .row.total{border-top:1px solid var(--hair);margin-top:10px;padding-top:16px}
.order .row.total>span:first-child{color:var(--ink2)}
.order .row.total .amt{font-family:var(--display);font-weight:500;font-size:2rem;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.order .foot{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.order .foot small{font-size:.74rem;color:var(--ink3);font-family:var(--mono);letter-spacing:.04em}

form{display:grid;gap:14px;max-width:560px}
label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
input,textarea,select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:.98rem;background:var(--panel);color:var(--ink);transition:border-color var(--t-hover)}
input::placeholder,textarea::placeholder{color:var(--ink3)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-subtle)}
textarea{min-height:104px;resize:vertical}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}
.err{color:var(--warn);font-weight:500;min-height:1.4em;font-size:.92rem}
.ok-box{background:var(--good-bg);border:1px solid var(--good-bd);border-radius:var(--r-lg);padding:20px 22px;max-width:560px;color:var(--ink2)}
.ok-box b{font-family:var(--display);font-weight:500;font-size:1.2rem;display:block;margin-bottom:4px;letter-spacing:-.02em;color:var(--ink)}

.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--hair)}
summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:52px 1fr 32px;align-items:center;gap:10px;padding:20px 0;font-family:var(--display);font-weight:500;font-size:1.12rem;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary .i{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--ink3)}
summary .x{justify-self:end;width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:1.1rem;color:var(--ink2);transition:transform var(--t-panel),border-color var(--t-hover)}
details[open] summary .x{transform:rotate(45deg);border-color:var(--brand);color:var(--ink)}
details p{margin:0 0 22px 62px;color:var(--ink2);max-width:48rem}

/* industries */
.cards{display:grid;gap:14px}
.card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:24px 22px;position:relative;overflow:hidden}
.card.vert{display:block;text-decoration:none;transition:border-color var(--t-hover),background var(--t-hover)}
.card.vert:hover{border-color:var(--line3);background:var(--raised)}
.card.vert .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card.vert .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink3)}
.card.vert:first-child .tag{color:var(--good)}
.card.vert:first-child .tag::before{background:var(--good)}
.card.vert h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;font-size:1.25rem;margin:0 0 8px}
.card.vert p{color:var(--ink2);margin:0 0 14px}
.card.vert .more{font-weight:500;font-size:.9rem;color:var(--ink)}

footer{border-top:1px solid var(--hair);padding:32px 0 44px;color:var(--ink3);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
footer .row{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
footer a{color:var(--ink2);text-decoration:none}

@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}.live .dot{animation:none}.bub,.ticket{animation:none}}
@media(min-width:780px){
  .nav ul{display:flex}
  .hero{padding:96px 0 92px}
  .hero .grid{grid-template-columns:1.12fr .88fr}
  .facts{grid-template-columns:repeat(3,1fr);gap:0 40px}
  .fact{border-bottom:0;padding-top:28px}
  .limits{grid-template-columns:1fr 1fr}
  .demo-grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  details p{margin-left:62px}
}
@media(min-width:980px){.steps{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:780px) and (max-width:979px){.steps{grid-template-columns:1fr 1fr}}

/* ---------- the scroll story: one call, start to finish (tarina.js) ----------
   Without .anim (no script, reduced motion) it is a list beside the finished
   state. With .anim the phone holds still while the page scrolls past it. */
.story-grid{display:grid;gap:44px;align-items:center}
.story-copy{position:relative}
.story-copy .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.beat{position:relative;padding:18px 0 20px;border-top:1px solid var(--hair)}
.beat .bn{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--ink3);margin-bottom:10px}
.beat h3{font-family:var(--display);font-weight:500;letter-spacing:-.025em;font-size:1.45rem;line-height:1.08;margin:0 0 8px;color:var(--ink)}
.beat p{color:var(--ink2);margin:0;max-width:33rem}
.story-bar{display:none}
.story-phone{position:relative;display:flex;justify-content:center}
.sp-glow{position:absolute;left:50%;top:50%;width:150%;height:110%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.sp-glow i{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;filter:blur(10px)}
.sp-glow .ga{background:radial-gradient(closest-side,rgba(240,192,120,.22),transparent 70%)}
.sp-glow .gb{background:radial-gradient(closest-side,rgba(86,148,255,.26),transparent 70%)}
.sp-glow .gg{background:radial-gradient(closest-side,rgba(95,214,165,.24),transparent 70%)}
.story-phone[data-glow=amber] .ga,.story-phone[data-glow=blue] .gb,.story-phone[data-glow=green] .gg,.story-phone:not([data-glow]) .gg{opacity:1}
.sp-wrap{position:relative;z-index:1;width:calc(320px * var(--k,1));height:calc(620px * var(--k,1))}
.sp{position:absolute;left:0;top:0;width:320px;height:620px;transform:scale(var(--k,1));transform-origin:0 0;border-radius:44px;background:linear-gradient(180deg,rgba(24,30,44,.97),rgba(10,13,19,.98));border:1px solid var(--line2);box-shadow:0 0 0 7px rgba(255,255,255,.025),0 0 0 8px rgba(255,255,255,.05),0 60px 120px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.09);overflow:hidden;color:var(--ink)}
.sp::before{content:"";position:absolute;top:12px;left:50%;width:88px;height:24px;margin-left:-44px;border-radius:14px;background:#04060a;z-index:3}
.sp-bar{position:absolute;left:28px;right:28px;top:16px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;z-index:4}
.sp-bar b{color:var(--ink2);font-weight:500}
.sp-screen{position:absolute;left:16px;right:16px;top:54px;bottom:18px}
.sp-call,.sp-owner{position:absolute;inset:0}
.sp-head{display:flex;align-items:center;gap:14px;padding:6px 4px 14px;border-bottom:1px solid var(--hair);opacity:0}
.sp-av{position:relative;width:52px;height:52px;border-radius:50%;background:var(--raised);border:1px solid var(--line2);display:grid;place-items:center;flex:none}
.sp-av svg{width:20px;height:20px}
.sp-av svg path{fill:var(--ink2)}
.sp-ring{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:64px;text-align:center;transform-origin:50% 30%}
.sp-bigav{position:relative;width:96px;height:96px;border-radius:50%;background:var(--raised);border:1px solid var(--line2);display:grid;place-items:center;margin-bottom:24px}
.sp-bigav svg{width:34px;height:34px}
.sp-bigav svg path{fill:var(--ink2)}
.sp-bigav .w{position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--warn);opacity:0}
.sp.ringing .sp-bigav{animation:spbuzz 1.1s ease-in-out infinite}
.sp.ringing .sp-bigav .w{animation:spring 1.8s ease-out infinite}
.sp.ringing .sp-bigav .w2{animation-delay:.6s}
.sp.ringing .sp-bigav .w3{animation-delay:1.2s}
.sp-bignum{font-family:var(--display);font-size:1.75rem;font-weight:500;letter-spacing:-.02em}
.sp-biglbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);margin-top:10px}
.sp-btns{position:absolute;left:28px;right:28px;bottom:40px;display:flex;justify-content:space-between}
.sp-btns span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center}
.sp-btns svg{width:26px;height:26px}
.sp-btns svg path{fill:#fff}
.sp-btns .dec{background:#e5484d}
.sp-btns .dec svg{transform:rotate(135deg)}
.sp-btns .acc{background:#30a46c}
.sp.ringing .sp-btns .acc{animation:spacc 1.6s ease-out infinite}
@keyframes spacc{0%{box-shadow:0 0 0 0 rgba(48,164,108,.55)}70%{box-shadow:0 0 0 16px rgba(48,164,108,0)}100%{box-shadow:0 0 0 0 rgba(48,164,108,0)}}
@keyframes spring{0%{transform:scale(.92);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes spbuzz{0%,45%,100%{transform:rotate(0)}5%,15%,25%,35%{transform:rotate(-8deg)}10%,20%,30%,40%{transform:rotate(8deg)}}
.sp-num{font-weight:500;font-size:1.05rem}
.sp-state{position:relative;height:16px;margin-top:5px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}
.sp-state span{position:absolute;left:0;top:0;white-space:nowrap}
.sp-state .s1{color:var(--warn);opacity:0}
.sp-state .s2{color:var(--good)}
.sp-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:36px;margin:12px 0 0;opacity:0}
.sp-wave i{display:block;width:3px;height:100%;border-radius:2px;background:linear-gradient(180deg,#9cc0ff,var(--brand));transform:scaleY(.12)}
.sp-chat{position:absolute;left:0;right:0;top:124px;bottom:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
.sp-chat-in{display:flex;flex-direction:column;gap:8px;padding:14px 2px 8px}
.sp .bub{max-width:88%;padding:9px 12px;border-radius:15px;font-size:.8rem;line-height:1.36;animation:none;opacity:0}
.sp-ticket{position:absolute;left:0;right:0;top:118px;background:linear-gradient(180deg,rgba(32,40,56,.98),rgba(24,30,44,.98));border:1px solid var(--line2);border-radius:18px;padding:16px 16px 14px;box-shadow:0 30px 60px -24px rgba(0,0,0,.8),0 0 50px rgba(86,148,255,.14);transform-origin:50% 0;opacity:0}
.sp-ticket .tt{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.sp-ticket .tt b{color:var(--ink);font-weight:500;font-size:.66rem}
.sp-ticket .tf{display:grid;grid-template-columns:70px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--hair);font-size:.84rem}
.sp-ticket .tf span{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding-top:3px}
.sp-ticket .tf b{font-weight:500}
.sp-ticket .tf.warn b{color:var(--warn)}
.sp-ticket .stamp{margin-top:10px;display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;background:var(--good-bg);border:1px solid var(--good-bd);color:var(--good);font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;transform-origin:0 50%}
.sp-ticket .stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good)}
.sp-sms,.sp-sms2{position:absolute;left:0;right:0;border-radius:18px;padding:12px 14px;box-shadow:0 24px 50px -20px rgba(0,0,0,.8)}
.sp-sms{top:0;background:rgba(30,38,52,.96);border:1px solid var(--line2);transform-origin:50% 0}
.sp-sms2{top:0;z-index:2;background:linear-gradient(180deg,rgba(28,52,44,.96),rgba(20,38,33,.96));border:1px solid var(--good-bd)}
.sp-sms .app,.sp-sms2 .app{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.sp-sms .app i,.sp-sms2 .app i{width:16px;height:16px;border-radius:5px;flex:none;background:radial-gradient(circle at 38% 38%,#f3f5f9 0,#c9d1dd 45%,#5a6372 46%,#1c2330 70%)}
.sp-sms .app em,.sp-sms2 .app em{margin-left:auto;font-style:normal}
.sp-sms2 .app{color:var(--good)}
.sp-sms b,.sp-sms2 b{display:block;font-size:.82rem;font-weight:500;margin-bottom:2px}
.sp-sms p,.sp-sms2 p{margin:0;font-size:.78rem;color:var(--ink2);line-height:1.4}
.sp-portal{position:absolute;left:0;right:0;top:124px}
.sp-portal .ph{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 10px}
.sp-portal .ph b{font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.02em}
.sp-portal .ph span{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.sp-rows{background:rgba(13,17,25,.75);border:1px solid var(--line);border-radius:16px;padding:0 12px;overflow:hidden}
.sp-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:.8rem;transition:background .5s ease}
.sp-row:last-child{border-bottom:0}
.sp-row.new{margin:0 -12px;padding-left:12px;padding-right:12px}
.sp-row .t{font-weight:500;display:flex;align-items:center;gap:8px}
.sp-row .d{color:var(--ink2);font-size:.72rem;grid-column:1}
.sp-row .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--warn);box-shadow:0 0 0 3px rgba(240,192,120,.16),0 0 12px rgba(240,192,120,.55);transition:background .4s,box-shadow .4s}
.sp-row .dot.ok{background:var(--good);box-shadow:0 0 0 3px rgba(95,214,165,.16),0 0 12px rgba(95,214,165,.55)}
.sp-row .act{grid-column:2;grid-row:1 / span 2;align-self:center}
.sp-row .act .ok{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--inverse);font-size:.7rem;font-weight:500;box-shadow:0 6px 18px rgba(86,148,255,.25)}
.sp-row .act .yes{display:none;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--good)}
.sp-row.hot{background:linear-gradient(90deg,rgba(240,192,120,.1),transparent 70%)}
.sp-row.done{background:linear-gradient(90deg,rgba(95,214,165,.12),transparent 70%)}
.sp-row.done .dot{background:var(--good);box-shadow:0 0 0 3px rgba(95,214,165,.16),0 0 12px rgba(95,214,165,.55)}
.sp-row.done .act .ok{display:none}
.sp-row.done .act .yes{display:inline}
.sp-tap{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.18);pointer-events:none;opacity:0;z-index:5}
elevenlabs-convai{transition:opacity .35s ease}
body.story-on elevenlabs-convai{opacity:0;pointer-events:none}
/* the finished state, for the list version */
.story:not(.anim) .sp-call{display:none}
.story:not(.anim) .sp-sms{display:none}
/* the scrolled version */
.story.anim{padding:0;height:calc(100vh + 6 * 64vh)}
.story.anim .story-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:64px;overflow:hidden}
.story.anim .story-stage>.wrap{width:100%}
.story.anim .beats{position:relative}
.story.anim .beat{position:absolute;left:0;right:0;top:0;border-top:0;padding:0}
.story.anim .beat .bn{display:none}
.story.anim .beat p{opacity:0}
.story.anim .beat h3{font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:1.02;margin:0 0 18px}
.story.anim .beat h3 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.story.anim .beat h3 .w>span{display:inline-block;opacity:0;will-change:transform}
.story.anim .beat p{font-size:1.12rem;max-width:30rem}
.story.anim .story-bar{display:flex;align-items:center;gap:16px;margin-top:34px;max-width:420px}
.story-bar .segs{display:flex;gap:6px;flex:1}
.story-bar .seg{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.story-bar .seg i{display:block;height:100%;background:linear-gradient(90deg,var(--ink),#9cc0ff);transform:scaleX(0);transform-origin:0 50%}
.story-count{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--ink3);white-space:nowrap}
.story-count b{color:var(--ink);font-weight:500}
.story.anim .sp-ticket,.story.anim .sp-sms,.story.anim .sp-sms2,.story.anim .sp-portal,.story.anim .sp-row{opacity:0}
@media(min-width:900px){.story-grid{grid-template-columns:1.1fr .9fr;gap:56px}}
@media(max-width:899px){
  .story.anim .story-stage{align-items:flex-start;padding-top:84px}
  .story.anim .story-grid{gap:18px}
  .story.anim .kicker{margin-bottom:12px}
  .story.anim .beat h3{font-size:clamp(1.9rem,8.4vw,2.5rem);margin-bottom:10px}
  .story.anim .beat p{font-size:.95rem}
  .story.anim .story-bar{margin-top:14px}
}

/* phones: room under the floating call pill */
@media(max-width:779px){footer{padding-bottom:104px}}