/* ================= the always-on studio agent ================= */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--panel:clamp(370px,27vw,430px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ag{position:fixed;z-index:50;top:0;right:0;bottom:0;width:var(--panel);display:grid;grid-template-rows:auto 1fr auto;background:#06080B;color:var(--paper);padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px);transition:transform .45s cubic-bezier(.2,.7,.2,1);overflow:hidden;isolation:isolate}
.ag::before{content:"";position:absolute;inset:0 auto 0 0;width:1px;background:linear-gradient(180deg,rgba(127,214,201,.0),rgba(127,214,201,.5) 30%,rgba(224,135,159,.45) 60%,rgba(217,166,90,.4) 85%,rgba(217,166,90,0));z-index:2}
body.ag-on{padding-right:var(--panel)}
.ag-aura{position:absolute;z-index:-1;left:-20%;right:-20%;bottom:-10%;height:55%;background:radial-gradient(40% 50% at 30% 80%,rgba(127,214,201,.16),transparent 70%),radial-gradient(40% 45% at 70% 85%,rgba(224,135,159,.12),transparent 70%),radial-gradient(45% 40% at 50% 100%,rgba(217,166,90,.10),transparent 70%);filter:blur(10px);transition:opacity .8s ease, transform 1.2s ease;opacity:.75}
.ag[data-mode="thinking"] .ag-aura{opacity:1;transform:translateY(-6%) scale(1.05)}
.ag[data-mode="speaking"] .ag-aura{opacity:1}
.ag-hd{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 0}
.ag-live{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--paper-2)}
.ag-live i{width:8px;height:8px;border-radius:50%;background:#5FD08F;box-shadow:0 0 0 4px rgba(95,208,143,.14)}
.ag-x{background:none;border:0;color:var(--paper-3);width:32px;height:32px;font-size:22px;line-height:1;cursor:pointer}
.ag-x:hover{color:var(--paper)}

/* reading area */
.ag-body{min-height:0;overflow-y:auto;padding:28px 26px 18px;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent)}
.ag-intro{margin-top:auto;display:grid;gap:14px;padding-bottom:6px}
.ag-hello{font-family:var(--display);font-weight:600;font-size:clamp(36px,2.9vw,46px);line-height:.98;letter-spacing:-.045em;margin:0;color:var(--paper)}
.ag-intro p{color:var(--paper-2);font-size:15.5px;line-height:1.55}
.ag.talking .ag-intro{display:none}
.ag-thread{display:flex;flex-direction:column;gap:22px}
.ag.talking .ag-thread{margin-top:auto}
.m{display:grid;gap:8px}
.m .who{display:none}
.m.u p{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.15;letter-spacing:-.03em;color:var(--paper)}
.m.a p{font-size:16px;line-height:1.6;color:rgba(234,239,242,.86);white-space:pre-wrap}
.m.wait p{color:var(--paper-3)}
.m.a+.m.u{padding-top:18px;border-top:1px solid rgba(234,239,242,.08)}
.acts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:2px}
.act{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--teal);font:inherit;font-size:14.5px;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(127,214,201,.35);text-underline-offset:5px}
.act::after{content:"→"}
.act:hover{text-decoration-color:var(--teal)}
.card{display:grid;gap:4px;margin-top:4px}
.card b{display:none}
.card .sel{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.03em;color:var(--paper);text-decoration:none}
.card span.sel{font-size:15px;font-weight:400;letter-spacing:0;color:var(--paper-2)}
.card small{color:var(--paper-3);font-size:13.5px}

/* the dock: one input, wrapped in living light */
.ag-dock{display:grid;gap:12px;padding:6px 26px 24px}
.ag-sugs{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ag-sugs button{background:none;border:0;padding:6px 0;color:var(--paper-2);font:inherit;font-size:15px;line-height:1.35;text-align:left;cursor:pointer;transition:color .2s, transform .2s}
.ag-sugs button::before{content:"Ask: ";color:var(--paper-3)}
.ag-sugs button:hover{color:var(--paper);transform:translateX(4px)}
.ag.talking .ag-sugs{display:none}
.ag-ask{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:8px;padding:16px 10px 10px 18px;border-radius:18px;background:#0D1116;cursor:text}
.ag-ring{position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--spin),#7FD6C9,#E0879F,#D9A65A,#7FD6C9);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none;opacity:.85}
.ag-ring::after{content:"";position:absolute;inset:-10px;border-radius:inherit;background:inherit;filter:blur(18px);opacity:.35;z-index:-1}
.ag[data-mode="thinking"] .ag-ring{animation-duration:1.4s;opacity:1}
.ag[data-mode="speaking"] .ag-ring{animation-duration:3s;opacity:1}
.ag-ask:focus-within .ag-ring{opacity:1}
@keyframes spin{to{--spin:360deg}}
.ag-ask textarea{background:none;border:0;resize:none;color:var(--paper);font:inherit;font-size:17px;line-height:1.45;outline:none;min-height:50px;max-height:160px;caret-color:var(--teal);padding:2px 0}
.ag-ask textarea::placeholder{color:rgba(234,239,242,.5)}
.ag-send{width:42px;height:42px;border-radius:12px;border:0;background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .2s, background .2s}
.ag-send:hover{transform:translateX(2px)}
.ag-send:disabled{opacity:.4;cursor:default;transform:none}
.ag-stop{width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);background:none;color:var(--paper);cursor:pointer;font-size:11px}
.ag-status{margin:0;color:var(--paper-3);font-size:12.5px;padding-left:4px}
.ag-person{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-top:12px;border-top:1px solid rgba(234,239,242,.08);font-size:15px}
.ag-person a{color:var(--paper);text-decoration:none;font-weight:500}
.ag-person a:hover,.ag-person button:hover{text-decoration:underline;text-underline-offset:4px}
.ag-person button{background:none;border:0;padding:0;color:var(--paper-2);font:inherit;cursor:pointer}

/* leave your details */
/* leave your details: the panel's own view, built from the panel's own input */
.ag-details{display:none;flex-direction:column;gap:14px;margin-top:auto;padding-bottom:6px}
.ag[data-view="details"] .ag-details{display:flex}
.ag[data-view="details"] .ag-intro,.ag[data-view="details"] .ag-thread{display:none}
.ag[data-view="details"] .ag-sugs,.ag[data-view="details"] .ag-ask,.ag[data-view="details"] .ag-status{display:none}
.ag-back{justify-self:start;align-self:flex-start;background:none;border:0;padding:0;color:var(--paper-2);font:inherit;font-size:14px;cursor:pointer}
.ag-back:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.ag-details .ag-hello{margin-top:6px}
.ag-details-sub{margin:0 0 4px;color:var(--paper-2);font-size:15px;line-height:1.5}
.ag-f{display:grid;gap:6px}
.ag-f .ag-label{padding-bottom:0}
.ag-box{position:relative;display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 16px;border-radius:16px;background:rgba(13,17,22,.92);cursor:text}
.ag-box:focus-within .ag-ring{opacity:1}
.ag-box input,.ag-box textarea{flex:1;min-width:0;background:none;border:0;padding:10px 0;color:var(--paper);font:inherit;font-size:16px;line-height:1.5;outline:none;caret-color:var(--teal);resize:none}
.ag-box input{min-height:24px}
.ag-box-send textarea{min-height:48px}
.ag-f.bad .ag-label{color:#E0879F}
.ag-f.bad .ag-box{box-shadow:inset 0 0 0 1px rgba(224,135,159,.55)}
/* the swap: chat leaves left, details arrive from the right, fields settle one by one */
.ag[data-view="details"] .ag-details > *{animation:agIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.04s + var(--i,0) * .05s)}
.ag[data-view="details"] .ag-f{--d:1}
.ag[data-view="details"] .ag-hello,.ag[data-view="details"] .ag-details-sub,.ag[data-view="details"] .ag-back{--i:0}
.ag.leaving .ag-intro,.ag.leaving .ag-thread,.ag.leaving .ag-sugs,.ag.leaving .ag-ask,.ag.leaving .ag-status{animation:agOut .22s ease both}
.ag.returning .ag-intro,.ag.returning .ag-thread,.ag.returning .ag-sugs,.ag.returning .ag-ask,.ag.returning .ag-status{animation:agBack .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes agIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes agOut{to{opacity:0;transform:translateX(-26px)}}
@keyframes agBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
/* what was sent lands in the conversation */
.ag .m.sent{padding:14px 16px 12px;border-radius:14px;background:rgba(127,214,201,.07);box-shadow:inset 0 0 0 1px rgba(127,214,201,.22);animation:agSent .6s cubic-bezier(.2,.9,.2,1) both}
@keyframes agSent{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.ag .m.sent .who{display:flex;align-items:center;gap:8px;color:#7FD6C9}
.ag .m.sent .who::before{content:"";width:7px;height:7px;background:#7FD6C9;box-shadow:0 0 10px #7FD6C9}
.ag .m.sent dl{margin:10px 0 0;display:grid;gap:6px}
.ag .m.sent dl div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.4}
.ag .m.sent dt{font-family:var(--pixel);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--paper-3);padding-top:2px}
.ag .m.sent dd{margin:0;color:var(--paper);overflow-wrap:anywhere}
.ag .m.sent small{display:block;margin-top:10px;color:var(--paper-3);font-size:12.5px}
@media (prefers-reduced-motion:reduce){.ag .ag-details > *,.ag.leaving *,.ag.returning *{animation:none!important}}

.ag-open{position:fixed;z-index:49;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;background:#0D1116;color:var(--paper);border:1px solid rgba(127,214,201,.5);border-radius:999px;height:50px;padding:0 20px;font:inherit;font-weight:500;cursor:pointer;box-shadow:0 0 30px rgba(127,214,201,.2)}
.ag-open i{width:8px;height:8px;border-radius:50%;background:#5FD08F}
.ag-bar{display:none}
body.ag-off .ag{transform:translateX(100%)}
body.ag-off{padding-right:0}
.target{animation:target 2.2s ease-out 1}
@keyframes target{0%{box-shadow:inset 0 0 0 2px rgba(127,214,201,0)}20%{box-shadow:inset 0 0 0 2px rgba(127,214,201,.6)}100%{box-shadow:inset 0 0 0 2px rgba(127,214,201,0)}}

@media (max-width:1100px){
  body.ag-on{padding-right:0}
  .ag{width:100%;transform:translateY(100%);z-index:60}
  body.ag-sheet .ag{transform:none}
  body.ag-sheet{overflow:hidden}
  .ag-open{display:none}
  .ag-bar{display:flex;position:fixed;z-index:55;left:0;right:0;bottom:0;gap:10px;padding:12px max(14px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));background:linear-gradient(rgba(6,8,11,0),rgba(6,8,11,.92) 30%)}
  .ag-bar-ask{position:relative;flex:1;display:flex;align-items:center;height:52px;padding:0 18px;border-radius:16px;background:#0D1116;border:0;color:var(--paper-2);font:inherit;font-size:15.5px;text-align:left;cursor:pointer}
  .ag-bar-call{display:grid;place-items:center;height:52px;padding:0 20px;border-radius:16px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600}
  body.ag-sheet .ag-bar{display:none}
  footer{padding-bottom:96px}
  .hero .offer{bottom:auto}
}
@media (prefers-reduced-motion:reduce){.ag-ring{animation:none}}

/* ===== craft pass: one system for the agent =====
   type: title 26/1.12 600 · body 15/1.55 · ui 14.5/1.4 · field 16 · meta 12.5
   tone: --paper / --paper-2 / --paper-3 only · edge: 24px everywhere · radius: field 16, key 10 (16 minus the 6px inset) */
.ag{--e:24px;background:
  radial-gradient(120% 55% at 50% 100%,rgba(127,214,201,.10),rgba(127,214,201,0) 60%),
  radial-gradient(90% 40% at 100% 100%,rgba(224,135,159,.07),rgba(224,135,159,0) 60%),
  linear-gradient(180deg,#0C161D 0%,#080C10 38%,#06080B 100%)}
.ag::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ag-aura{display:none}
.ag-hd{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:var(--e) var(--e) 0}
.ag-mark{height:17px;width:auto;display:block}
.ag-live{font-size:12.5px;color:var(--paper-3);justify-self:start;gap:7px}
.ag-live i{width:6px;height:6px;box-shadow:0 0 0 3px rgba(95,208,143,.14)}
.ag-x{width:28px;height:28px;font-size:20px;margin-right:-6px}
.ag-body{padding:var(--e) var(--e) 16px}
.ag-intro{gap:10px}
.ag-hello{font-size:26px;line-height:1.12;letter-spacing:-.03em}
.ag-intro p{font-size:15px;line-height:1.55;color:var(--paper-2);max-width:34ch}
.ag-dock{gap:0;padding:0 var(--e) var(--e)}
.ag-sugs{gap:0;align-items:stretch;margin-bottom:16px}
.ag-label{font-size:12.5px;color:var(--paper-3);padding-bottom:6px}
.ag-sugs button{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(234,239,242,.08);font-size:14.5px;line-height:1.4;color:var(--paper-2)}
.ag-sugs button::before{content:none}
.ag-sugs button::after{content:"";width:14px;height:14px;flex:none;background:currentColor;opacity:.5;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2'/></svg>") center/contain no-repeat}
.ag-sugs button:hover{color:var(--paper);transform:none}
.ag-sugs button:hover::after{opacity:1}
.ag-ask{border-radius:16px;padding:6px 6px 6px 16px;grid-template-columns:1fr auto auto;align-items:end;gap:6px;background:rgba(13,17,22,.92)}
.ag-ring{inset:-1px;padding:1px}
.ag-ring::after{inset:-6px;filter:blur(14px);opacity:.28}
.ag-ask textarea{font-size:16px;line-height:1.5;min-height:44px;padding:10px 0}
.ag-send,.ag-stop{width:44px;height:44px;border-radius:10px}
.ag-status{font-size:12.5px;color:var(--paper-3);padding:10px 0 0 0}
.ag-person{margin-top:16px;padding-top:16px;font-size:14.5px}
.ag-person a{font-weight:500}
.m.u p{font-size:19px;line-height:1.25;letter-spacing:-.02em}
.m.a p{font-size:15px;line-height:1.55}
.card .sel{font-size:22px}
.act{font-size:14.5px}
@media (max-width:1100px){ .ag{--e:20px} .ag-hello{font-size:26px} }
.ag-ask{display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 16px}
.ag-ask textarea{flex:1;min-width:0}

/* phone hero: headline, subcopy, then the street the camera moves along */
@media (max-width:760px){
  .hero .offer::before{display:none}
  .hero{--hh:calc(min(12.4vw,58px) * 1.92 + 760px)}
}

/* the person behind the panel: Brett's face, with a plain line that the agent answers first */
.ag-who{display:flex;align-items:center;gap:12px;min-width:0}
.ag-face{position:relative;flex:none;width:40px;height:40px}
.ag-face img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(234,239,242,.14)}
.ag-face i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#5FD08F;box-shadow:0 0 0 2.5px #0B0F14,0 0 10px rgba(95,208,143,.5)}
.ag-id{display:grid;gap:2px;min-width:0}
.ag-id b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.015em;color:var(--paper);line-height:1.1}
.ag-id span{font-size:12px;color:var(--paper-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-bar-face{flex:none;width:28px;height:28px;margin-right:12px;border-radius:50%;object-fit:cover}
.ag-hd .ag-who{grid-column:1 / 3}
.ag .m.o .who{display:flex;align-items:center;gap:8px}
.ag .m.o .ow{width:20px;height:20px;border-radius:50%;object-fit:cover}
.ag-box{box-shadow:inset 0 0 0 1px rgba(234,239,242,.1)}
.ag-box .ag-ring{opacity:0;transition:opacity .25s ease}
.ag-box:focus-within{box-shadow:none}
.ag-box:focus-within .ag-ring{opacity:1}
.ag-details .ag-form-msg{margin:0;color:var(--paper-2);font-size:14px;line-height:1.5;min-height:1.2em}