/* Drevan Voice: ink, paper, electric blue. Lightweight during live audio. */
:root{--ink:#16223b;--muted:#586780;--blue:#2555ed;--line:#dce3ef;--paper:#f5f7fc;--green:#2555ed;--rail:0px}
:root{--ink:#0f172a;--muted:#475569;--blue:#0369a1;--paper:#f8fafc}
.primary:hover:not(:disabled),.sales-button:hover:not(:disabled){background:#075985}
.call-consent{margin:12px 0;align-items:flex-start;font-size:13px}.queue-card{padding:16px;background:#ecfeff;border:1px solid #0e7490;border-radius:12px;margin:12px 0;color:#164e63}.queue-card p{font-size:14px}.link-button{min-height:44px}.consent input{min-width:20px;min-height:20px}#auth-form label>span{font-size:13px}#auth-form .primary{width:100%}

*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--blue)}:focus-visible{outline:3px solid #e99b25;outline-offset:4px}[hidden]{display:none!important}
.rail{display:none}main{max-width:1440px;margin:0 auto;padding:0 48px}header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-size:30px;font-weight:750;letter-spacing:-1.5px}.brand img{width:40px;height:40px}.header-links{display:flex;align-items:center;gap:28px}.header-links a{color:var(--muted);font-size:14px;text-decoration:none}.header-links .sales-link{color:var(--ink);font-weight:650}.badge{font-size:13px;padding:7px 12px;background:white;border:1px solid var(--line);border-radius:30px;color:var(--muted)}
.intro{padding:42px 0 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}.eyebrow,.small-label,.step-label{font-size:12px;font-weight:700;letter-spacing:1.6px;color:var(--blue);text-transform:uppercase}.intro h1{font-size:clamp(36px,4.1vw,62px);font-weight:650;letter-spacing:-2.6px;line-height:1.06;margin:12px 0 16px;max-width:820px}.intro h1 span{color:var(--blue)}.intro p{font-size:17px;max-width:650px;color:var(--muted);margin:0}.intro-note{max-width:190px;font-size:14px;color:var(--muted);padding-bottom:4px}.intro-note strong{display:block;font-size:30px;letter-spacing:-1px;color:var(--ink);font-weight:550}
.call-card,.conversation-card,.brief-card{border:1px solid var(--line);border-radius:20px;background:white;box-shadow:0 8px 30px #16223b04;min-width:0}.card-top{display:flex;justify-content:space-between;align-items:center;gap:15px}h2{font-size:22px;line-height:1.25;letter-spacing:-.5px;margin:6px 0}h3{font-size:19px;margin:8px 0}.pill{font-size:12px;border:1px solid var(--line);border-radius:20px;padding:5px 9px;white-space:nowrap;color:var(--muted)}.controls{display:flex;gap:14px;margin:20px 0 0}.controls label{flex:1;min-width:0}label{display:block;font-size:14px;color:var(--muted)}input,select,textarea{width:100%;padding:11px 12px;margin-top:6px;background:white;border:1px solid #cad3e1;color:var(--ink);border-radius:9px;min-width:0}textarea{resize:vertical}select{height:45px}
.primary,.secondary,.end,.sales-button{border-radius:10px;padding:12px 20px;font-weight:600;border:1px solid transparent;font-size:15px}.primary,.sales-button{background:var(--blue);color:white}.secondary{background:white;color:var(--ink);border-color:var(--line)}.end{background:#fff0f0;color:#b12732;border-color:#fad7da}

.consent input{width:17px;flex:0 0 17px;min-height:17px;margin:3px 0}.quota-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;margin-bottom:18px;padding:10px 14px;background:#eef3ff;border-radius:9px;color:#2044a7}.quota-banner strong{font-variant-numeric:tabular-nums}
.technical{padding:22px 0;color:var(--muted);font-size:14px}.technical summary{cursor:pointer;display:list-item}.technical dl{display:grid;grid-template-columns:130px 1fr;gap:8px;margin:15px 0}.technical dt{font-weight:600}.technical dd{margin:0;overflow-wrap:anywhere}.technical p{max-width:950px}.data-actions{display:flex;gap:20px;flex-wrap:wrap}.link-button{background:none;border:0;color:var(--blue);padding:0;text-decoration:underline;font-size:14px}footer{display:flex;justify-content:space-between;gap:20px;padding:25px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}footer details{max-width:580px}dialog{border:1px solid var(--line);border-radius:18px;padding:28px;width:min(650px,calc(100vw - 32px));max-height:90vh;color:var(--ink)}dialog::backdrop{background:#16223b80}dialog p{font-size:15px;color:var(--muted)}dialog label{margin:14px 0}dialog h2{font-size:24px}dialog .controls{margin-top:10px}.consent{display:flex;gap:10px}.tone-note{font-size:13px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.panel-tabs{display:none}
.owner-main{max-width:1100px;padding:35px;margin:auto}.owner-main form{max-width:600px;display:flex;gap:12px;align-items:flex-end}.owner-main form label{flex:1}.owner-record{background:white;border:1px solid var(--line);padding:20px;margin:15px 0;border-radius:14px}.owner-record pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 monospace}.owner-section{margin-top:32px}.owner-main #owner-state{color:var(--muted)}
@media(max-width:1050px){main{padding:0 25px}.intro h1{font-size:46px}.intro-note{display:none}.workspace{gap:16px}.header-links{gap:16px}}
@media(max-width:760px){main{padding:0 18px}header{height:78px}.brand{font-size:27px}.brand img{width:34px;height:34px}.header-links>a:first-child{display:none}.badge{display:none}.intro{padding:28px 0 24px}.intro h1{font-size:40px;letter-spacing:-1.7px}.intro p{font-size:16px}.technical dl{grid-template-columns:90px 1fr}footer{flex-direction:column}#mobile-finish{display:none!important}.owner-main{padding:20px}.owner-main form{flex-direction:column;align-items:stretch}}
@media(max-width:400px){.controls{gap:10px}.header-links{gap:8px}.intro h1{font-size:36px}}
header{height:80px}.intro{padding-top:28px;padding-bottom:24px}.intro h1{font-size:clamp(36px,3.5vw,52px)}
@media(max-width:760px){.intro h1{font-size:38px}.intro p br{display:none}}
.brand{letter-spacing:-1px}.intro-note{border-left:1px solid var(--line);padding-left:24px}.primary:hover:not(:disabled){background:#1944ce}.header-links a:hover{color:var(--blue)}
@media(max-width:760px){.intro h1{max-width:520px}}
/* Live activity: a quiet strip at the end of the page. Label then value, thin dividers, method behind a toggle. */
.public-proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:24px 0 0;padding:14px 20px;border:1px solid var(--line);border-radius:16px;background:white}
.proof-title{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:650;letter-spacing:.2px;color:var(--ink)}
.proof-dot{width:8px;height:8px;border-radius:50%;background:#1f9d5b;box-shadow:0 0 0 3px #1f9d5b26}
.proof-grid{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;margin:0}
.proof-grid div{display:flex;align-items:baseline;gap:6px;padding:0 16px;border-left:1px solid var(--line)}
.proof-grid dt{font-size:13px;color:var(--muted)}
.proof-grid dd{margin:0;font-size:14px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.proof-more{margin-left:auto;font-size:13px;color:var(--muted)}
.proof-more summary{cursor:pointer;color:var(--blue);list-style:none}
.proof-more summary::-webkit-details-marker{display:none}
.proof-more summary::after{content:" \203A";display:inline-block;transition:transform .15s}
.proof-more[open]{flex-basis:100%;margin-left:0}
.proof-more[open] summary::after{transform:rotate(90deg)}
.proof-detail{margin:8px 0 0;max-width:90ch;font-size:13px;line-height:1.5;color:var(--muted)}
@media(max-width:760px){.public-proof{padding:14px 16px}.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 0;width:100%}.proof-grid div{flex-direction:column;gap:0;padding:0 12px}.proof-grid div:nth-child(odd){border-left:0;padding-left:0}.proof-more{margin-left:0}}
/* Header account: sign in on the right; signed in shows an initial, the email and a quiet sign out. */
.account{display:flex;align-items:center;gap:10px}
.account-chip{display:flex;align-items:center;gap:8px;min-width:0}
.account-avatar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;font-size:13px;font-weight:700}
.account-email{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.account-button{height:36px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font-size:14px;font-weight:600;transition:border-color .15s,color .15s}
.account-button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.account.signed-in .account-button{height:auto;padding:4px 2px;border:0;background:none;color:var(--muted);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.account.signed-in .account-button:hover:not(:disabled){color:var(--blue)}
@media(max-width:1050px){.account-email{display:none}}
@media(pointer:coarse){.account-button{min-height:44px}}
/* Feedback strip: one row on desktop, stacked on phones; collapses to a thank-you and clears itself. */
.review-card{margin:24px 0;padding:14px 16px 14px 22px;background:#fff;border:1px solid var(--line);border-radius:16px;transition:opacity .3s,transform .3s}
.review-card.leaving{opacity:0;transform:translateY(-6px)}
.review-form{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto auto;align-items:center;gap:8px 16px}
.review-head h2{margin:0;font-size:16px;letter-spacing:-.2px}
.review-head p{margin:0;font-size:12px;color:var(--muted)}
.review-stars{display:flex;gap:2px;margin:0;padding:0;border:0;min-width:0}
.review-stars input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.review-stars label{display:grid;place-items:center;width:36px;height:36px;margin:0;border-radius:10px;cursor:pointer}
.review-stars svg{width:26px;height:26px;fill:#e3e8f2;transition:fill .12s,transform .15s cubic-bezier(.34,1.56,.64,1)}
.review-stars input:focus-visible+label{outline:3px solid #e99b25;outline-offset:1px}
.review-stars:has(input[value="1"]:checked) label:nth-of-type(-n+1) svg,.review-stars:has(input[value="2"]:checked) label:nth-of-type(-n+2) svg,.review-stars:has(input[value="3"]:checked) label:nth-of-type(-n+3) svg,.review-stars:has(input[value="4"]:checked) label:nth-of-type(-n+4) svg,.review-stars:has(input[value="5"]:checked) label:nth-of-type(-n+5) svg{fill:#f5a524}
.review-stars input:checked+label svg{transform:scale(1.12)}
@media(hover:hover){
 .review-stars:has(label:hover) label:nth-of-type(n):nth-of-type(n) svg{fill:#e3e8f2}
 .review-stars:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1) svg,.review-stars:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2) svg,.review-stars:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3) svg,.review-stars:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4) svg,.review-stars:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) svg{fill:#f7bd55}
}
.review-word{min-width:76px;font-size:13px;font-weight:600;color:#9a6200}
.review-comment{margin:0;min-width:0}
.review-comment textarea{display:block;margin:0;min-height:44px;max-height:120px;padding:11px 14px;border-radius:12px;resize:none;field-sizing:content;line-height:1.45}
#review-submit{height:44px;padding:0 22px;border-radius:12px}
.review-close{width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--muted);font-size:22px;line-height:1}
.review-close:hover{background:#f1f4fa;color:var(--ink)}
.review-state{grid-column:1/-1;margin:0;font-size:13px;color:#b12732}
.review-state:empty{display:none}
.review-thanks{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;font-weight:600;color:#17693f;outline:none}
.review-thanks svg{width:22px;height:22px;padding:3px;border-radius:50%;background:#e9f8ef;fill:none;stroke:#1f9d5b;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:check-pop .32s cubic-bezier(.34,1.56,.64,1)}
@media(max-width:860px){.review-card{padding:16px}.review-form{grid-template-columns:minmax(0,1fr) auto}.review-head{grid-column:1}.review-close{grid-column:2;grid-row:1}.review-stars{grid-column:1}.review-word{grid-column:2;text-align:right}.review-comment,#review-submit{grid-column:1/-1}#review-submit{width:100%}}
@media(pointer:coarse){.review-stars label,.review-close{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Use-case selector: a native radio group styled as equal cards. Three plus two when wide, two columns, then one.
   Motion is transform/opacity only and short; the global reduced-motion rule above switches it off. */
.use-cases{scroll-margin-top:16px;--ease-out:cubic-bezier(.25,1,.5,1);--spring:cubic-bezier(.34,1.56,.64,1);--tint:#edf1ff;margin:4px 0 22px}
.use-case-head{display:flex;justify-content:space-between;align-items:flex-end;gap:8px 24px;flex-wrap:wrap;margin-bottom:16px}
.use-case-head .eyebrow{display:block;margin-bottom:6px}
.use-case-head h2{font-size:clamp(22px,2vw,26px);letter-spacing:-.6px;margin:0 0 6px}
.use-case-head p{margin:0;max-width:720px;font-size:15px;color:var(--muted)}
.use-case-head .use-case-lock{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--tint);font-size:13px;color:#2044a7}
.use-case-lock::before{content:"";width:7px;height:7px;border-radius:50%;background:#1f9d5b;box-shadow:0 0 0 3px #1f9d5b2e}
.use-case-head .use-case-lock:empty{display:none}
.use-case-status{margin:0;padding:18px 20px;border:1px dashed #c9d3e6;border-radius:16px;background:white;font-size:14px;color:var(--muted)}
.agent-roster{min-width:0;margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.use-case-item{position:relative;display:flex;min-width:0;grid-column:span 2;animation:use-case-in .42s var(--ease-out) both;animation-delay:calc(var(--i,0)*50ms)}
.use-case-item:nth-child(4):nth-last-child(2){grid-column:2/span 2}
@keyframes use-case-in{from{opacity:0;transform:translateY(10px)}}
.use-case-input{position:absolute;top:20px;left:20px;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.use-case{position:relative;flex:1;display:grid;grid-template-columns:44px minmax(0,1fr) 24px;grid-template-areas:"icon head check" "desc desc desc";gap:14px 14px;align-items:center;margin:0;padding:18px 18px 18px;border:1px solid var(--line);border-radius:18px;background:white;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px #16223b08;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .15s,background-color .2s}
.use-case-input:not(:disabled)+.use-case:hover{transform:translateY(-2px);border-color:#b9c6de;box-shadow:0 14px 30px -20px #16223b59}
.use-case-input:not(:disabled)+.use-case:active{transform:translateY(0) scale(.99);transition-duration:.08s}
.use-case-icon{grid-area:icon;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--tint);color:var(--blue);transition:background-color .2s,color .2s,transform .25s var(--spring)}
.use-case-icon svg,.preview-icon svg,.preview-label svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.use-case-input:not(:disabled)+.use-case:hover .use-case-icon{transform:rotate(-6deg) scale(1.05)}
.use-case-copy{grid-area:head;display:grid;gap:1px;min-width:0}
.use-case-title{font-size:17px;font-weight:650;line-height:1.3;letter-spacing:-.25px;color:var(--ink)}
.use-case-business{font-size:13px;line-height:1.4;color:var(--muted)}
.use-case-desc{grid-area:desc;margin:0;font-size:14px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.use-case-check{grid-area:check;align-self:start;position:relative;width:24px;height:24px;border:1.5px solid #adb9ce;border-radius:50%;background:white;transition:background-color .15s,border-color .15s}
.use-case-input:checked+.use-case{border-color:var(--blue);background:linear-gradient(180deg,#f3f6ff 0,#fff 70%);box-shadow:0 0 0 1px var(--blue),0 16px 34px -22px #2555edb3}
.use-case-input:checked+.use-case .use-case-icon{background:var(--blue);color:white}
.use-case-input:checked+.use-case .use-case-check{border-color:var(--blue);background:var(--blue);animation:check-pop .32s var(--spring)}
.use-case-input:checked+.use-case .use-case-check::after{content:"";position:absolute;left:7.5px;top:3.5px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes check-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.use-case-input:focus-visible+.use-case{outline:3px solid #e99b25;outline-offset:3px}
.use-case-input:disabled+.use-case{cursor:not-allowed}
.use-case-input:disabled:not(:checked)+.use-case{opacity:.5}
/* The chosen demo, what the brief will contain, and a line to open with. */
.use-case-preview{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.25fr);margin-top:14px;border:1px solid #d6e0fb;border-radius:18px;background:linear-gradient(120deg,#eef3ff 0,#f7f9ff 55%,#fff 100%);color:#1c2d55;overflow:hidden}
.use-case-preview:has(#preview-opener-wrap[hidden]){grid-template-columns:minmax(0,.9fr) minmax(0,2.35fr)}
.preview-cell{min-width:0;padding:16px 20px}
.preview-cell+.preview-cell{border-left:1px solid #d6e0fb}
.use-case-preview.swap .preview-cell{animation:preview-in .3s var(--ease-out) both}
.use-case-preview.swap .preview-cell:nth-child(2){animation-delay:40ms}.use-case-preview.swap .preview-cell:nth-child(3){animation-delay:80ms}
@keyframes preview-in{from{opacity:0;transform:translateY(4px)}}
.preview-choice{display:flex;align-items:center;gap:14px}
.preview-icon{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--blue);color:white;box-shadow:0 8px 18px -10px #2555ed}
.preview-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;letter-spacing:.2px;color:#2044a7}
.preview-label svg{width:15px;height:15px;stroke-width:2}
.use-case-preview p{margin:3px 0 0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.use-case-preview .preview-title{margin:1px 0 0;font-size:16px;font-weight:650;line-height:1.3;color:var(--ink)}
.use-case-preview .preview-business{margin:0;font-size:13px;color:var(--muted)}
.use-case-preview .preview-quote{font-size:15px;color:var(--ink)}
.preview-quote::before{content:"\201C"}.preview-quote::after{content:"\201D"}
@media(max-width:1050px){.agent-roster{grid-template-columns:repeat(2,minmax(0,1fr))}.use-case-item,.use-case-item:nth-child(4):nth-last-child(2){grid-column:auto}.use-case-item:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
 .use-case-preview,.use-case-preview:has(#preview-opener-wrap[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}.preview-choice{grid-column:1/-1;border-bottom:1px solid #d6e0fb}.preview-choice+.preview-cell{border-left:0}.use-case-preview:has(#preview-opener-wrap[hidden]) .preview-cell:nth-child(2){grid-column:1/-1}}
@media(max-width:600px){.agent-roster{grid-template-columns:1fr;gap:10px}.use-case-item:last-child:nth-child(odd){width:auto;justify-self:stretch}.use-case{grid-template-columns:40px minmax(0,1fr) 24px;padding:14px 16px;gap:12px}.use-case-icon{width:40px;height:40px;border-radius:12px}.use-case-title{font-size:16px}.use-case-desc{display:none}
 .use-case-preview,.use-case-preview:has(#preview-opener-wrap[hidden]){grid-template-columns:1fr}.preview-cell{padding:14px 16px}.preview-cell+.preview-cell{border-left:0;border-top:1px solid #d6e0fb}.preview-choice{border-bottom:0}.use-case-head p{font-size:14px}}

/* Call console: one framed surface sized to the viewport. Dark stage (the call), light transcript (the record).
   It has a minimum height, not a fixed one: the controls never scroll inside the card or get clipped. The voice
   stage absorbs spare height; the transcript is size-contained so a long conversation scrolls in its own panel. */
.workspace{--stage-ink:#101a30;--stage-text:#f2f5ff;--stage-muted:#a9b6cf;--stage-line:#ffffff1f;--mint:#9df5c8;display:grid;grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);min-height:clamp(560px,calc(100dvh - 40px),760px);border:1px solid var(--line);border-radius:24px;overflow:hidden;background:white;box-shadow:0 1px 2px #16223b0a,0 28px 60px -30px #16223b40;scroll-margin:20px}
.workspace .call-card,.workspace .conversation-card{border:0;border-radius:0;box-shadow:none;min-height:0}
.call-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;color:var(--stage-text);background:radial-gradient(90% 60% at 50% 34%,#1f3160 0,#16223b 58%,var(--stage-ink) 100%);container:call/inline-size}
.call-card .small-label{color:#9fb4ff}
.call-card h2{color:var(--stage-text)}
.agent-business{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;margin:0;font-size:13px;color:var(--stage-muted)}
.change-demo{padding:4px 0;border:0;background:none;color:#9fb4ff;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.change-demo:hover{color:#c7d4ff}
#start.cue{animation:next-step 1.2s ease-out 2}
@keyframes next-step{0%{box-shadow:0 0 0 0 #9df5c8b3}70%{box-shadow:0 0 0 12px #9df5c800}100%{box-shadow:0 0 0 0 #9df5c800}}
.call-card .pill{color:var(--stage-muted);border-color:var(--stage-line)}
.voice-stage{flex:1 1 auto;min-height:168px;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;gap:4px}
.viz-wrap{position:relative;width:100%;min-height:92px}
#viz{position:absolute;inset:0;width:100%;height:100%}
.call-status{text-align:center}
.call-status h3{font-size:20px;font-weight:600;letter-spacing:-.3px;margin:0 0 2px;color:var(--stage-text)}
.call-status p{font-size:14px;color:var(--stage-muted);margin:0}
.call-meta{display:flex;gap:8px;color:var(--stage-muted);font-size:12px;font-variant-numeric:tabular-nums}
.try-this{padding:14px 16px;border:1px solid var(--stage-line);border-radius:14px;background:#ffffff0a}
.script-head{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:24px}
.try-this .small-label{color:var(--mint)}
#suggestion{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--stage-text)}
#suggestion::before{content:"\201C"}#suggestion::after{content:"\201D"}
.challenge{margin:8px 0 0;font-size:13px;color:var(--stage-muted)}
.challenge::before{content:"Then \00B7  ";color:var(--mint);font-weight:600}
.use-line{display:none;align-items:center;border:1px solid var(--stage-line);background:transparent;color:var(--stage-text);border-radius:8px;padding:3px 10px;font-size:12px;transition:background .15s}
body:has(#text-form:not([hidden])) .use-line{display:inline-flex}
.use-line:hover{background:#ffffff14}
.call-dock{display:grid;gap:12px;flex-shrink:0}
/* During a call these controls are disabled; hide them so the stage gets the room. */
.call-card:has(#start[hidden]) .dock-settings{display:none}
.dock-settings{display:flex;align-items:center;gap:10px}
.inline-label{flex:1;display:flex;align-items:center;gap:10px;margin:0;color:var(--stage-muted);font-size:13px}
.call-card select{height:40px;margin:0;padding:0 12px;border-radius:10px;border-color:var(--stage-line);background-color:#ffffff0d;color:var(--stage-text)}
.call-card select option{color:var(--ink);background:white}
.customize-button{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:1px solid var(--stage-line);border-radius:10px;background:transparent;color:var(--stage-text);font-size:14px;transition:background .15s}
.customize-button:hover:not(:disabled){background:#ffffff14}
.call-card svg,.conversation-card svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notice{margin:0;font-size:13px;color:#ffb3b8}
.notice:empty{display:none}
.call-actions{display:flex;gap:10px}
.call-actions button{flex:1;height:52px;border-radius:14px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .15s,box-shadow .15s}
#start{box-shadow:0 10px 28px -10px #2555edcc}
#start:disabled{box-shadow:none;opacity:1;background:#26365f;color:#9eadcc}
.call-card .secondary{background:#ffffff12;color:var(--stage-text);border-color:var(--stage-line)}
.call-card .secondary:hover{background:#ffffff1f}
.call-card .call-consent{color:var(--stage-muted)}.call-card .call-consent a{color:var(--mint)}.call-card .queue-card{color:#164e63}.call-card .queue-card .secondary{color:#164e63;background:white;border-color:#0e7490}
.call-card .end{background:#ff5a5f24;color:#ffc2c5;border-color:#ff5a5f59}
.call-card .end:hover:not(:disabled){background:#ff5a5f3d}
.call-card :focus-visible{outline-color:var(--mint)}
/* Narrow card: the pill shares the step label's row so the title gets the full width. */
@container call (max-width:420px){.call-card .card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px}.call-card .card-top>div{display:contents}.call-card .card-top .pill{grid-row:1;grid-column:2}.call-card .card-top .small-label{grid-row:1;grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.call-card .card-top :is(h2,.agent-business){grid-column:1/-1}}
@media(max-width:480px){.conversation-card .card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px}.conversation-card .card-top>div{display:contents}.conversation-card .card-top .live-chip{grid-row:1;grid-column:2}.conversation-card .card-top .small-label{grid-row:1;grid-column:1}.conversation-card .card-top h2{grid-column:1/-1}}
/* Touch screens: small text links still get a 44px hit area without changing how they look. */
@media(pointer:coarse){.change-demo,.link-button,.copy-email,.header-links a,footer summary,.technical summary{min-height:44px;display:inline-flex;align-items:center}.change-demo{padding:0}}
@container call (max-width:400px){.inline-label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@container call (max-width:300px){.dock-settings{flex-wrap:wrap}.inline-label{flex-basis:100%}.customize-button{flex:1;justify-content:center}}
/* Short laptop screens: trim spacing rather than hide anything. */
@media(min-width:861px) and (max-height:760px){.call-card{padding:20px 22px;gap:10px}.try-this{padding:12px 14px}#suggestion{font-size:15px}.voice-stage{min-height:150px}}

.conversation-card{display:flex;flex-direction:column;padding:24px 28px 18px;background:white}
.live-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted);white-space:nowrap}
.live-text::after{content:"Not connected"}
.live-chip:has(.on){color:#17693f;border-color:#bfe5cf;background:#f1fbf5}
.live-chip:has(.on) .live-text::after{content:"Live"}
.live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#b8c2d3}
.live-dot.on{background:#1f9d5b}
.live-dot.on::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1f9d5b;animation:live-ping 1.6s ease-out infinite}
@keyframes live-ping{to{transform:scale(2.6);opacity:0}}
.transcript{flex:1;min-height:140px;contain:size;overflow:auto;margin:16px -8px 6px;padding:4px 8px;scrollbar-width:thin;overscroll-behavior:contain}
.empty{height:100%;display:flex;flex-direction:column;justify-content:center;max-width:430px;margin:0 auto;padding:12px 0}
.empty h3{font-size:22px;font-weight:600;letter-spacing:-.4px;margin:0 0 18px}
.test-steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:14px}
.test-steps li{counter-increment:step;position:relative;min-height:30px;padding:3px 0 0 44px;font-size:15px;color:var(--muted);line-height:1.5}
.test-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#edf1ff;color:var(--blue);font-weight:650;font-size:14px}
.test-steps strong{color:var(--ink);font-weight:600}
.message{max-width:84%;margin:0 0 12px;padding:11px 15px;border-radius:16px 16px 16px 4px;background:#f2f5fb;animation:message-in .22s ease-out}
.message.user{margin-left:auto;border-radius:16px 16px 4px 16px;background:var(--blue);color:white}
.who{font-size:12px;font-weight:650;color:var(--muted)}
.message.user .who{color:#d6e0ff}
.message p{font-size:15px;margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.message.cut{box-shadow:inset 3px 0 0 #9fb4ff}
.message.cut::after{content:"Interrupted";display:inline-block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.4px;color:#3b5bd9}
@keyframes message-in{from{opacity:0;transform:translateY(6px)}}
.partial{min-height:20px;font-size:14px;color:var(--muted);font-style:italic}
#text-form{display:flex;gap:8px;margin:6px 0 12px}
#text-input{margin:0;height:48px;border-radius:12px;padding:0 14px}
#text-form button{flex:none;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:12px;background:var(--blue);color:white}
.console-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:12px;border-top:1px solid var(--line)}
/* Live cost: the figure counts up smoothly; digits are tabular so nothing jitters. */
.cost-meter{display:grid;gap:3px;min-width:0}
.cost-label{font-size:11px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.cost-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;min-width:0}
.cost-figure strong{font-size:22px;font-weight:650;line-height:1.15;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--ink)}
.cost-usd{font-size:13px;font-weight:600;color:#4c5a73;font-variant-numeric:tabular-nums}
.cost-time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.cost-rate{padding:2px 9px;border-radius:999px;background:#e9f8ef;color:#17693f;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;animation:rate-in .3s cubic-bezier(.25,1,.5,1) both}
@keyframes rate-in{from{opacity:0;transform:translateY(3px)}}
.cost-breakdown{display:flex;align-items:center;gap:10px;min-width:0}
.cost-bar{display:flex;flex:none;gap:1px;width:88px;height:6px;border-radius:3px;overflow:hidden;background:#e7ecf5}
.cost-bar i{flex:0 1 0;min-width:2px;transition:flex-grow .45s cubic-bezier(.25,1,.5,1)}
.cost-detail{display:flex;flex-wrap:wrap;gap:1px 10px;min-width:0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cost-key{white-space:nowrap}
.cost-key::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:2px;background:var(--c);vertical-align:1px}
.transcript-footer{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--muted);text-align:right;flex:none;max-width:45%}
#mode-label{font-weight:600;color:var(--ink)}

@media(max-width:1050px){.workspace{grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr)}.call-card,.conversation-card{padding:20px}}
@media(max-width:860px){.workspace{grid-template-columns:1fr;min-height:0;border-radius:20px}.voice-stage{min-height:200px}.conversation-card{height:min(72dvh,560px)}}
@media(max-width:420px){.call-card,.conversation-card{padding:18px}.dock-settings{flex-wrap:wrap}.inline-label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.console-footer{flex-direction:column;align-items:flex-start}.transcript-footer{align-items:flex-start;text-align:left;max-width:none}.message{max-width:92%}}

/* "Let's talk": the offer after the proof. Calm, one action, the ring motif echoing the call stage. */
.purchase{position:relative;overflow:hidden;margin:32px 0 0;padding:44px 48px 36px;border-radius:24px;color:#f2f5ff;background:radial-gradient(70% 120% at 100% 50%,#1f3160 0,#16223b 55%,#101a30 100%);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px 48px}
.purchase::before{content:"";position:absolute;right:-250px;top:50%;width:560px;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;pointer-events:none;background:repeating-conic-gradient(#ffffff17 0 1.4deg,transparent 1.4deg 5.625deg);-webkit-mask:radial-gradient(closest-side,transparent 62%,#000 63%,#000 78%,transparent 79%);mask:radial-gradient(closest-side,transparent 62%,#000 63%,#000 78%,transparent 79%)}
.purchase>*{position:relative}
.talk-eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#9df5c8}
.purchase h2{margin:12px 0 14px;font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-1.4px;font-weight:650}
.purchase h2 span{color:#9df5c8}
.talk-copy p{margin:0;max-width:560px;font-size:16px;line-height:1.6;color:#b9c5dc}
.purchase-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.purchase .sales-button{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 28px;border:0;border-radius:14px;font-size:17px;font-weight:650;background:#bbffd8;color:#101a30;box-shadow:0 12px 32px -12px #9df5c8aa;transition:background .15s,transform .15s}
.purchase .sales-button:hover{background:#d4ffe6;transform:translateY(-1px)}
.purchase .sales-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.purchase .sales-button:hover svg{transform:translateX(3px)}
.contact-line{margin:0;font-size:13px;color:#9eadcc}
.contact-line a{color:#d6e2ff;text-underline-offset:3px}
.copy-email{margin-left:8px;padding:2px 8px;border:1px solid #ffffff2e;border-radius:6px;background:transparent;color:#d6e2ff;font-size:12px}
.copy-email:hover{background:#ffffff14}
.purchase :focus-visible{outline-color:#bbffd8}
.talk-proof{grid-column:1/-1;list-style:none;margin:0;padding:24px 0 0;border-top:1px solid #ffffff1f;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.talk-proof li{display:grid;gap:4px;font-size:14px;line-height:1.5;color:#9eadcc}
.talk-proof strong{font-size:15px;font-weight:600;color:#f2f5ff}
@media(max-width:860px){.purchase{grid-template-columns:1fr;padding:32px 24px 28px;border-radius:20px}.purchase::before{right:-260px;top:30%}.talk-proof{grid-template-columns:1fr;gap:16px}}

/* Brief-ready toast and the highlight it lands on. */
.brief-card{scroll-margin-top:20px}
.brief-card.flash{animation:brief-flash 1.8s ease-out}
@keyframes brief-flash{0%{box-shadow:0 0 0 0 #2555ed55}25%{box-shadow:0 0 0 6px #2555ed33}100%{box-shadow:0 0 0 0 #2555ed00}}
.brief-toast{position:fixed;left:50%;bottom:24px;z-index:50;width:min(460px,calc(100vw - 32px));display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px 10px 14px 16px;border-radius:16px;background:#101a30;color:#f2f5ff;box-shadow:0 18px 50px -12px #0b1222aa,0 0 0 1px #ffffff14;overflow:hidden;opacity:0;transform:translate(-50%,16px);transition:opacity .22s ease-out,transform .22s ease-out}
.brief-toast.show{opacity:1;transform:translate(-50%,0)}
.toast-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#9df5c822;color:#9df5c8}
.toast-icon svg,.toast-action svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.toast-copy{display:grid;min-width:0}
.toast-copy strong{font-size:15px;font-weight:600}
.toast-copy span{font-size:13px;color:#a9b6cf}
.toast-action{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:10px;background:#bbffd8;color:#101a30;font-size:14px;font-weight:650;white-space:nowrap}
.toast-action:hover{background:#d4ffe6}
.toast-close{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#a9b6cf;font-size:20px;line-height:1}
.toast-close:hover{background:#ffffff14;color:#fff}
.brief-toast :focus-visible{outline-color:#bbffd8}
.toast-timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:#9df5c8;transform-origin:left;transform:scaleX(0)}
.brief-toast.show .toast-timer{animation:toast-timer var(--toast-ms,7000ms) linear forwards}
.brief-toast:hover .toast-timer,.brief-toast:focus-within .toast-timer{animation-play-state:paused}
@keyframes toast-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:420px){.brief-toast{bottom:16px;gap:10px;padding-left:12px}.toast-copy span{display:none}}

/* Brief card: the request first, what was captured, what was missed, and the call's own evidence. */
.brief-card{margin-top:24px;padding:32px}
.brief-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.brief-heading p{margin:8px 0 0;max-width:640px;font-size:14px;color:var(--muted)}
.brief-buttons{display:flex;gap:8px;flex-wrap:wrap}
.brief-buttons button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:10px;font-size:14px;transition:background .15s,border-color .15s}
.brief-buttons button:hover:not(:disabled){background:#f3f6fd;border-color:#c9d4ea}
.brief-buttons svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brief-body{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;margin-top:24px}
.brief-doc{min-width:0;display:grid;gap:22px;align-content:start}
.field-label{display:block;font-size:12px;font-weight:650;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.brief-lead{padding:22px 24px;border-radius:16px;background:#f3f6fd;border:1px solid #e2e8f5}
.lead-text{margin:8px 0 0;font-size:22px;line-height:1.35;letter-spacing:-.4px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.lead-detail{margin:6px 0 0;font-size:15px;color:var(--muted)}
.next-chip{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:5px 12px;border-radius:999px;background:white;border:1px solid var(--line);font-size:13px;color:var(--muted)}
.next-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:#d99a00}
.coverage{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.coverage strong{color:var(--ink);font-weight:650}
.coverage-bar{display:grid;grid-template-columns:repeat(6,24px);gap:4px}
.coverage-bar i{height:6px;border-radius:3px;background:#e1e7f2}
.coverage-bar i.on{background:var(--blue)}
.brief-captured dl{margin:10px 0 0}
.brief-captured dl>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.brief-captured dt{font-size:14px;color:var(--muted)}
.brief-captured dd{margin:0;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.brief-missing ul{list-style:none;margin:10px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.brief-missing li{padding:4px 12px;border-radius:999px;border:1px dashed #bfcadf;font-size:13px;color:#4c5a73}
.brief-doc .muted{margin:8px 0 0;font-size:13px;color:var(--muted)}
.brief-missing ul+.muted{margin:0}
.brief-doc.is-empty .lead-text{color:#8e9bb3}
.brief-doc.is-empty .coverage span:last-child{font-size:13px}
.call-evidence{align-self:start;padding:20px 22px;border-radius:16px;background:radial-gradient(120% 90% at 100% 0,#1f3160 0,#16223b 60%,#101a30 100%);color:#f2f5ff}
.call-evidence .small-label{color:#9df5c8}
.call-evidence dl{margin:12px 0 0}
.call-evidence dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-top:1px solid #ffffff1a}
.call-evidence dt{font-size:13px;color:#a9b6cf}
.call-evidence dd{margin:0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.evidence-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:#8d9bb8}
.call-evidence dd .usd{margin-left:6px;font-size:12px;font-weight:600;color:#a9b6cf}
.evidence-scale{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#9df5c81a;border:1px solid #9df5c833;font-size:13px;line-height:1.45;color:#cfeedd}
.evidence-scale strong{color:#9df5c8;font-weight:650}
.proof-note{margin:24px 0 0;padding:14px 18px;border-radius:12px;background:#f7f9fe;font-size:14px;color:var(--muted)}
.proof-note strong{color:var(--ink);font-weight:600}
.history-turn{padding:12px 0;border-top:1px solid #dce3ee;overflow-wrap:anywhere}
.history-turn small{margin-left:12px;color:var(--muted)}
.history-turn p{white-space:pre-wrap;margin:8px 0}
#history-dialog{width:min(780px,94vw);max-height:88vh;overflow:auto}
#saved-briefs form{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:16px 0}
#saved-briefs label{flex:1;min-width:160px}
#saved-briefs input{width:100%}
.owner-record pre,.owner-record dd{white-space:pre-wrap;overflow-wrap:anywhere}
.owner-record button{margin:6px 8px 6px 0}
@media(max-width:860px){.brief-card{padding:22px}.brief-heading{flex-direction:column}.brief-body{grid-template-columns:1fr}.brief-captured dl>div{grid-template-columns:1fr;gap:2px}.lead-text{font-size:19px}}

/* Trial controls wrap on narrow screens without crowding the call button. */
.quota-banner{flex-wrap:wrap}.quota-banner button{font-size:13px;padding:8px 12px}.admin-trial-actions{display:flex;flex-wrap:wrap;gap:12px}.admin-trial-actions button{padding:10px 16px}.owner-main form{flex-wrap:wrap}

.call-meta{flex-wrap:wrap;justify-content:center}#call-quota{flex-basis:100%;text-align:center;color:var(--mint);font-weight:600}
#offline-banner{padding:14px 18px;border:1px solid #fdba74;border-radius:12px;background:#fff7ed;color:#7c2d12;font-size:15px;font-weight:600;line-height:1.5}