:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#242b2b;background:#f6f7f3;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1180px;margin:auto;padding:30px 40px}header{display:flex;align-items:center;justify-content:space-between}.brand{font-size:13px;font-weight:750;letter-spacing:1.1px;color:inherit;text-decoration:none}.brand span{font-weight:450;color:#8c9390}.tag{font-size:11px;background:#edf1e9;border:1px solid #dce3d8;padding:7px 10px;border-radius:20px}.intro{margin:58px 0 30px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;color:#747e72}h1{font-size:58px;letter-spacing:-2.7px;font-weight:500;line-height:1.05;margin:15px 0}p{line-height:1.6}.intro>p:last-child{font-size:16px;color:#788078;margin-top:18px}.workspace{display:grid;grid-template-columns:0.85fr 1.15fr;gap:22px}.call-panel,.transcript-panel{background:white;border:1px solid #e2e6df;border-radius:18px}.call-panel{text-align:center;padding:23px 25px 20px;min-height:460px}.call-top{display:flex;align-items:center;justify-content:space-between;color:#727b71}#timer{font-size:12px;font-variant-numeric:tabular-nums}.avatar{position:relative;width:105px;height:105px;margin:38px auto 18px;border-radius:50%;background:#e4ebda;box-shadow:0 0 0 12px #f3f6ee;display:grid;place-content:center;overflow:hidden}.avatar span{font-family:Georgia,serif;font-size:70px;line-height:80px;color:#5a714f;font-style:italic;padding-right:6px}.avatar.active{animation:breathe 2.5s ease-in-out infinite}.avatar.active span{opacity:.5}.avatar i{display:none}.avatar.active i{display:block;position:absolute;width:3px;background:#5d774c;height:25px;top:40px;border-radius:3px;left:41px;animation:wave 900ms infinite alternate}.avatar.active i:nth-of-type(2){left:51px;animation-delay:-.3s;height:32px;top:36px}.avatar.active i:nth-of-type(3){left:61px;animation-delay:-.6s}h2{font-size:23px;font-weight:550;letter-spacing:-.5px;margin:0}.subtitle{font-size:12px;color:#8a9289;margin:5px 0}#status{font-size:12px;color:#63765b;min-height:20px;margin:22px 0 18px}#status.error{color:#a64938}.controls{display:flex;justify-content:center;gap:8px}button{font:inherit;cursor:pointer;font-size:12px;padding:11px 17px;border-radius:8px;background:#fff;border:1px solid #dce2d8;color:#32452b}button:hover{background:#f2f5ee}button:disabled{opacity:.45;cursor:default}.primary{background:#31492d;color:#fff;border-color:#31492d;min-width:195px}.primary:hover{background:#425e3c}.danger{background:#f9eae6;color:#a04332;border-color:#f0d9d0}.small{font-size:11px;color:#8b9388;line-height:1.7}.record{font-size:11px;color:#727e6d;display:block;margin-top:18px}.record input{accent-color:#4d6840;vertical-align:middle}audio{max-width:100%;height:32px;margin-top:12px}.transcript-panel{display:flex;flex-direction:column;overflow:hidden}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 23px;border-bottom:1px solid #edf0e8}.panel-heading h2{font-size:14px;letter-spacing:0}.text-button{border:none;padding:5px 0;color:#828d7b;font-size:11px}#transcript{height:345px;overflow:auto;padding:22px;scroll-behavior:smooth}.empty{text-align:center;color:#969e90;padding-top:90px}.empty span{font-family:Georgia,serif;font-size:27px;color:#9ba690;font-style:italic}.empty p{font-size:12px}.entry{margin-bottom:22px;max-width:96%}.entry .speaker{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:650;color:#87937e}.entry p{font-size:13px;margin:5px 0;color:#354330;white-space:pre-wrap}.entry.user .speaker{color:#9b9080}.entry.user p{color:#777064}.transcript-footer{margin-top:auto;border-top:1px solid #edf0e8;padding:16px 22px;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#8e9887}.transcript-footer a{color:#415c36}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}details{border:1px solid #e0e5da;border-radius:12px;background:#f9faf6;overflow:hidden}summary{padding:16px 20px;font-size:12px;cursor:pointer;list-style:none}summary:before{content:'+';margin-right:12px;color:#7a876f}details[open] summary:before{content:'−'}summary span{float:right;color:#8b9583;font-size:10px;padding-top:2px}.details-body{padding:0 20px 18px;font-size:12px}.details-body>p{color:#6e7b65}label{display:block;font-size:11px;margin-bottom:7px}.key-row{display:flex;gap:8px}input[type=password]{min-width:0;flex:1;font:inherit;padding:10px;border:1px solid #d6dece;border-radius:6px}select{padding:9px;border:1px solid #d6dece;border-radius:6px;background:white;color:#4e6144;font:inherit;width:100%}footer{display:flex;justify-content:space-between;font-size:10px;color:#a0a894;margin:24px 2px}footer a{color:#7b886e;text-decoration:none}[hidden]{display:none!important}:focus-visible{outline:2px solid #718c5e;outline-offset:4px}@keyframes breathe{50%{box-shadow:0 0 0 17px #f3f6ee}}@keyframes wave{to{transform:scaleY(.35)}}@media(max-width:760px){main{padding:22px}.intro{margin:40px 0 25px}h1{font-size:48px}.workspace,.bottom-grid{grid-template-columns:1fr}.call-panel{min-height:430px}#transcript{height:310px}footer{line-height:1.6;gap:20px}summary span{font-size:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

#test-booking{padding:16px;border-top:1px solid #ddd}#booking-details{white-space:pre-line;font-size:13px;line-height:1.6}

.editor-card{padding:28px;border:1px solid #deded5;border-radius:18px;margin:20px 0;background:#fff}.editor-card h2{font-size:20px;margin:0 0 12px}.editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.editor-card label{display:block;margin-bottom:8px}.editor-card textarea{width:100%;box-sizing:border-box;padding:16px;border:1px solid #c8c8bf;border-radius:10px;font:14px/1.6 ui-monospace,monospace;resize:vertical}.editor-card input,.editor-card select{max-width:100%;box-sizing:border-box}.editor-toolbar,.editor-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.editor-toolbar{justify-content:space-between}.editor-actions{position:sticky;bottom:0;background:#f6f5ef;padding:18px 0;border-top:1px solid #deded5}#message{min-height:1.5em}#dirty{font-size:13px;color:#666}textarea:focus{outline:2px solid #4b6452;outline-offset:2px}@media(max-width:700px){.editor-grid{grid-template-columns:1fr}.editor-card{padding:18px}.editor-actions{position:static}}

.version-toolbar{align-items:end;gap:12px;position:relative}.version-toolbar>div{flex:1}.version-toolbar select{width:100%}#version-menu{position:relative;overflow:visible}#version-menu>summary:before{content:none}#version-menu>summary{cursor:pointer;font-size:24px;padding:6px 16px;list-style:none}.version-menu{position:absolute;right:0;top:100%;z-index:5;min-width:220px;background:var(--paper,#fff);border:1px solid #ccc;border-radius:10px;padding:8px;box-shadow:0 8px 24px #0002}.version-menu button{display:block;width:100%;text-align:left;margin:2px 0} .version-toolbar{margin-bottom:20px}

#availability-tool{margin-top:24px;font-size:14px}#availability-tool h3{font-size:16px;margin-top:22px}#availability-tool li{margin:10px 0;line-height:1.6}#availability-tool a{color:#415c36}#availability-tool p{max-width:75ch}

#call-history{margin-top:24px;font-size:14px}#call-history-list details{margin:12px 0}#call-history-list summary{font-size:14px}.saved-conversation{white-space:pre-wrap;overflow-wrap:anywhere;max-height:480px;overflow:auto;font-family:inherit;font-size:14px;line-height:1.6}#call-history button{font-size:14px}

.phone-entry{margin:12px auto 0;max-width:370px}.phone-entry input{width:100%;font:inherit;font-size:11px;padding:12px 10px;border:1px solid #dce2d8;border-radius:8px;background:#fafbf8;color:#32452b;text-align:center}.phone-entry input::placeholder{color:#879080;opacity:1}.phone-entry .small{margin:8px 0}.phone-entry button{margin-top:8px}

.editor-access-bar{display:flex;align-items:center;gap:14px;margin:22px 0 18px;min-height:38px}.editor-access-bar form{width:230px;max-width:100%}.editor-access-bar input{width:100%;font:inherit;font-size:12px;padding:10px 12px;border:1px solid #d6dece;border-radius:8px;background:white}.editing-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}.editing-layout>#admin-editor{grid-column:1;grid-row:1;min-width:0}.editing-layout>#call-details-panel{grid-column:2;grid-row:1;min-width:0}#call-details-panel .editor-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#call-details-form label{min-width:0;line-height:1.5}#call-details-form input:not([type=checkbox]),#call-details-form textarea{display:block;width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #d6dece;border-radius:7px;background:white;color:#354330;font-family:inherit;font-size:12px;line-height:1.5;margin-top:5px}#call-details-form textarea{resize:vertical;min-height:80px}#call-details-form label:has(textarea){grid-column:1/-1}#call-details-form>label{margin-top:14px}#admin-editor .editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#admin-editor .editor-grid>div{min-width:0}#admin-editor .editor-card{padding:20px}#admin-editor>h2{font-size:20px}#message:empty{display:none}@media(max-width:800px){.editing-layout{grid-template-columns:minmax(0,1fr)}.editing-layout>#call-details-panel{grid-column:1;grid-row:1}.editing-layout>#admin-editor{grid-column:1;grid-row:2}.editor-access-bar{flex-wrap:wrap}}@media(max-width:420px){#call-details-panel .editor-grid,#admin-editor .editor-grid{grid-template-columns:minmax(0,1fr)}}

#admin-editor{width:100%;min-width:0}#call-details-panel{width:100%;margin:18px 0 20px}#call-details-panel .editor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#admin-editor .editor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:700px){#call-details-panel .editor-grid,#admin-editor .editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){#call-details-panel .editor-grid,#admin-editor .editor-grid{grid-template-columns:minmax(0,1fr)}}

#call-details-panel{margin:20px 0;width:100%}#call-details-panel .editor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#admin-editor .editor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#call-details-panel .details-body{padding-top:8px}#admin-editor .editor-card{padding:28px}@media(max-width:760px){#call-details-panel .editor-grid,#admin-editor .editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){#call-details-panel .editor-grid,#admin-editor .editor-grid{grid-template-columns:minmax(0,1fr)}#admin-editor .editor-card{padding:18px}}

.call-details-group{border:0;padding:0;margin:0;min-width:0}.call-details-group+.call-details-group{margin-top:24px;padding-top:20px;border-top:1px solid #d6dece}.call-details-group legend{font-size:16px;font-weight:600;padding:0;margin-bottom:14px}.call-details-group>label:not([hidden]){display:block;margin-top:14px}

.call-details-panel{margin:16px 0;width:100%}.call-details-panel .details-body{padding-top:8px}.call-details-panel .details-body>label{margin-top:14px}.service-list-field{grid-column:1/-1}.caller-name-entry{margin-top:8px}.caller-name-entry .small{margin:4px 0 0}

#company-details-fields label:has([name="projectCosts"]){grid-column:1/-1}#company-details-fields textarea{min-height:90px;width:100%;resize:vertical}#call-details-form label[hidden]{display:none}

.homeowner-status-field{grid-column:1/-1}.homeowner-instructions{display:block;margin:0 0 20px}#homeowner-status-instructions{white-space:pre-wrap;font-size:14px;line-height:1.6}#homeowner-status-instructions:disabled{background:#f6f7f3;color:#788078;min-height:70px}

/* ---- The lab on this Mac (Option 5): the backend panel, the editor's extra fields, call history ---- */
.backend-panel{background:#fff;border:1px solid #e2e6df;border-radius:18px;margin-top:22px;overflow:hidden}
.backend-panel .panel-heading{gap:14px}
.backend-steps{list-style:none;margin:0;padding:16px 22px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;border-bottom:1px solid #edf0e8}
.backend-steps li{border:1px solid #e3e8dd;border-radius:10px;padding:10px 12px;background:#f9faf6;min-width:0}
.backend-steps b{display:block;font-size:10px;letter-spacing:.8px;text-transform:uppercase;font-weight:650;color:#87937e}
.backend-steps span{display:block;font-size:12px;color:#354330;margin-top:4px;overflow-wrap:anywhere}
.backend-steps li.done{background:#eef4e8;border-color:#cfdcc4}
.backend-steps li.live{background:#fff8e6;border-color:#f0dfb0}
.backend-steps li.stop{background:#f9eae6;border-color:#f0d9d0}
.backend-log{list-style:none;margin:0;padding:14px 22px;max-height:260px;overflow:auto;font-size:12px}
.backend-log li{display:grid;grid-template-columns:44px 150px minmax(0,1fr);gap:10px;padding:5px 0;border-bottom:1px dashed #eef1ea;color:#4b5a44}
.backend-log li.empty-line{display:block;color:#969e90;border:none}
.backend-log .when{color:#9aa391;font-variant-numeric:tabular-nums}
.backend-log b{font-weight:600}
.backend-log li.note b{color:#5a714f}
.backend-log li.read b{color:#3e5f8a}
.backend-log li.read.fallback b{color:#8a6a2e}
.backend-log li.heard b{color:#31492d}
.backend-log li.error b,.backend-log li.error .what{color:#a64938}
.caller-name-entry input{width:100%;font:inherit;font-size:12px;padding:10px 12px;border:1px solid #d6dece;border-radius:8px;margin-top:18px}
.editor-grid.one{grid-template-columns:minmax(0,320px)}
#voicePrompt{min-height:420px}
.version-menu-items{position:absolute;z-index:5;right:0;top:44px;background:#fff;border:1px solid #dce2d8;border-radius:10px;padding:8px;display:grid;gap:6px;min-width:240px;box-shadow:0 8px 24px rgba(40,50,35,.12)}
.version-menu-items button{text-align:left}
#version-menu summary{padding:9px 14px}
#call-details-form .wide{grid-column:1/-1}
#call-details-form label input[type=checkbox]{display:inline;width:auto;margin:0 6px 0 0;vertical-align:middle}
.homeowner-instructions{margin-top:14px}
label.inline{display:flex;align-items:center;gap:6px;margin:0;font-size:12px}
#call-history-list .saved-conversation p{margin:4px 0;font-size:13px}
#call-history-list .line .when{color:#9aa391;font-size:11px;margin-right:8px;font-variant-numeric:tabular-nums}
#call-history-list .line b{margin-right:4px}
#call-history-list .line.note{color:#7b8a70;font-size:12px}
#call-history-list .line.homeowner b{color:#8a7f6c}
#call-history-list details.inner{margin-top:12px}
.saved-backend{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;max-height:360px;overflow:auto;margin:0;padding:0 20px 16px}
#availability-slots{columns:2;font-size:13px;color:#4b5a44}
@media(max-width:900px){.backend-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.backend-log li{grid-template-columns:40px minmax(0,1fr)}.backend-log li .what{grid-column:2}}
.editing-layout{margin-top:28px}
/* one column (Edvin, Oct 26): call details above the voice instructions, the live backend panel under the prompts */
.editing-stack{margin-top:28px}
.editing-stack #call-details-panel{margin:18px 0 6px}
.editing-stack #call-details-panel .editor-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.editing-stack .call-details-panel{margin-bottom:10px}
@media(max-width:800px){.editing-stack #call-details-panel .editor-grid{grid-template-columns:minmax(0,1fr)}}
/* the simulation (Edvin, Oct 29): the whole page becomes one living orb in Jackie's greens, like the ElevenLabs, Retell and Bland demos;
   --speak and --listen (0 to 1) come from lab.js */
body:has(.focus:not([hidden])){overflow:hidden}
.focus{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px 16px;background:radial-gradient(ellipse at 50% 38%,#fff 0,#f6f7f3 55%,#eaeee4 100%);color:#242b2b;animation:focus-in .35s ease-out}
@keyframes focus-in{from{opacity:0}}
.orb{--speak:0;--listen:0;position:relative;width:min(58vmin,400px);aspect-ratio:1}
.orb canvas{position:relative;display:block;width:100%;height:100%;animation:orb-in .7s cubic-bezier(.2,.8,.2,1)}
@keyframes orb-in{from{transform:scale(.85);opacity:0}}
.orb-halo{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle,rgba(110,160,90,.5) 0,rgba(190,215,150,.35) 40%,rgba(230,240,200,0) 70%);filter:blur(36px);opacity:calc(.3 + .7 * var(--speak) + .2 * var(--listen));transform:scale(calc(.85 + .3 * var(--speak) + .08 * var(--listen)))}
.orb.flat canvas{border-radius:50%;background:radial-gradient(circle at 35% 30%,#f5f8ec 0,#b4cc9c 30%,#6f985c 62%,#4a6e45 100%);transform:scale(calc(.86 + .1 * var(--speak)))}
.focus-caption{text-align:center;min-height:62px}
.focus-caption h1,.focus-caption h2{font-size:22px;font-weight:600;letter-spacing:-.4px;margin:0}
#focus-status,#focus-state{margin:6px auto 0;font-size:13px;color:#7c8578;max-width:min(80vw,440px)}
.focus.live #focus-status,.focus:not(.live) #focus-state{display:none}
#focus-state::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#5d8a4c;margin-right:8px;vertical-align:middle}
.focus-controls{display:flex;align-items:center;justify-content:center;min-height:64px}
.focus-pill{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border:0;border-radius:999px;background:#31492d;color:#fff;font-size:14px;font-weight:500;box-shadow:0 8px 24px rgba(49,73,45,.22);transition:transform .15s,box-shadow .15s}
.focus-pill:hover{background:#425e3c;transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.focus-pill svg{width:18px;height:18px;fill:currentColor}
.focus-hangup{display:grid;place-items:center;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:#e5484d;color:#fff;box-shadow:0 8px 24px rgba(229,72,77,.35);transition:transform .15s,background .15s}
.focus-hangup:hover{background:#d13b40;transform:scale(1.05)}
.focus-hangup svg{width:28px;height:28px;fill:currentColor}
.focus-exit{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border:1px solid #e3e1db;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);color:#4a4a46;font-size:12px}
.focus-exit:hover{background:#fff}
.focus-exit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:480px){.orb{width:min(78vw,320px)}.focus-exit{top:14px;right:14px}}
/* the call panel (Edvin, Oct 29): the orb instead of the "j", fewer lines, round buttons */
.call-panel{padding:22px 26px}
.orb.panel-orb{width:156px;margin:30px auto 22px}
.panel-orb .orb-halo{filter:blur(22px)}
.call-panel h2{font-size:24px}
.call-panel .subtitle{font-size:13px;color:#7c8578;margin:6px 0 0;min-height:20px}
.call-panel.live #panel-state::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#5d8a4c;margin-right:8px;vertical-align:middle}
.call-panel #status{margin:14px 0 20px;color:#7c8578}
.call-panel #status.error{color:#a64938}
.call-panel .controls{flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;font-size:13px}
.controls .primary{min-width:0}
.pill svg{width:16px;height:16px;fill:currentColor}
.pill.ghost{background:transparent}
.pill.ghost:hover{background:#f2f5ee}
.call-panel .caller-name-entry{margin:20px auto 0;max-width:300px}
.call-panel .caller-name-entry input{margin:0;border-radius:999px;background:#fafbf8;text-align:center}
.panel-foot{margin:14px auto 0;max-width:300px;line-height:1.6}
/* the top (Edvin, Oct 29): just the heading, with the version tag beside it */
.hero{align-items:center;flex-wrap:wrap;gap:12px;margin:34px 0 30px}
.hero h1{margin:0}
.hero .tag{white-space:nowrap}
@media(max-width:760px){.hero{margin:18px 0 22px}.hero h1{font-size:44px}}
/* the guest page (Oct 29): what a friend sees through the private link */
.guest .focus{gap:24px;overflow-y:auto;justify-content:safe center}
.guest .orb{width:min(44vmin,320px)}
.guest #focus-status.error{color:#a64938}
.guest-form{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(320px,100%)}
.guest-form input{width:100%;font:inherit;font-size:14px;padding:13px 18px;border:1px solid #dce2d8;border-radius:999px;background:#fff;color:#242b2b;text-align:center}
.guest-form input:focus{outline:2px solid #718c5e;outline-offset:2px}
.guest-note{max-width:360px;margin:0;font-size:12px;line-height:1.6;color:#8b9388;text-align:center}
/* the lab's sharing box */
#share{margin-top:24px;font-size:14px}
#share-link{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;overflow-wrap:anywhere}