/* elloo in the home page headline (site/elloo-tour.js): one question and one search bar. Asking opens a wide panel
   under the bar, with the chat on the left and a live preview of what elloo builds on the right.
   Every class here starts with et- (the frame), m- (the chat), k- (the package card) or t- (the pictures), so nothing
   on the rest of the site can reach it. */
/* overflow-x clip: the breathing glow behind the bar reaches past the screen's sides, and the panel slides out wider as
   it opens; on a phone anything past the side made the page wider than the screen, so the browser zoomed out and back
   in with every breath (Omar, Oct 10). Clipped here, the page stays exactly as wide as the screen */
.et-hero{overflow-x:clip;position:relative;text-align:center;padding:0;background:radial-gradient(46rem 24rem at 50% -6%,rgba(205,179,232,.6),transparent 70%),radial-gradient(30rem 18rem at 100% 100%,rgba(242,193,78,.18),transparent 70%),#FBFAFD}
.et-hero > .wrap{max-width:none;padding:0}
.et-hero .hero-panel{background:transparent;color:#22132F;border-radius:0;padding:clamp(2.5rem,7vw,5.5rem) 1.25rem clamp(2rem,5vw,3.5rem);overflow:visible;display:block}
.et-hero .hero-panel::before,.et-hero .hero-panel::after{display:none}
.et-hero .hero-top{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.125rem;justify-items:center;padding:0;width:min(46rem,100%);margin:0 auto}
.et-hero h1{color:#22132F;text-shadow:none;margin:0;font-size:clamp(2.25rem,5.6vw,4.25rem);line-height:1;letter-spacing:-.045em;font-weight:900;max-width:15ch}
.et-hero h1 .pop{color:#5B2A86}
.et-hero .hero-panel .lede{color:#5F5668;text-shadow:none;margin:0;font-size:clamp(1.0625rem,1.8vw,1.25rem);max-width:36rem}
.et-hero .hero-promise{color:#5F5668;text-shadow:none;font-weight:500;justify-content:center;margin-top:.25rem}
.et-hero .hero-promise a{color:inherit}
.et-hero .hero-promise{flex-wrap:nowrap}
@media (max-width:640px){.et-hero .hero-promise{flex-wrap:wrap}}
/* the apps we connect: a slow rail of logos in one quiet grey, faded at both edges; hover pauses it and shows each in colour of the page */
.et-rail{width:min(68rem,calc(100vw - 2rem));justify-self:center;margin:clamp(1.25rem,3vw,2rem) 0 0;display:grid;gap:.75rem;justify-items:center}
@media (max-width:700px){.et-rail{width:100%}}
.rail-k{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A7F96}
.rail-win{display:flex;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.rail-row{flex:none;display:flex;align-items:center;gap:2.75rem;margin:0;padding:.25rem 1.375rem;list-style:none;animation:railGo 48s linear infinite}
.rail-win:hover .rail-row{animation-play-state:paused}
.rail-row li{display:flex;align-items:center;gap:.5rem;color:#8E8499;font-weight:700;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;transition:color .25s}
.rail-row li:hover{color:#5B2A86}
.rail-row svg{width:1.25rem;height:1.25rem;fill:currentColor;flex:none}
@keyframes railGo{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.rail-row{animation:none}.rail-row[aria-hidden]{display:none}.rail-win{justify-content:center;flex-wrap:wrap}.rail-row{flex-wrap:wrap;justify-content:center;row-gap:1rem}}
.et-ico{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.et-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the bar that becomes elloo */
.et-spacer{width:100%}
.et{width:100%;background:#fff;border-radius:18px;border:1px solid rgba(91,42,134,.16);text-align:left;overflow:hidden;overflow:clip;position:relative;
  box-shadow:0 1px 0 #fff inset,0 1.75rem 3.5rem -1.5rem rgba(58,24,88,.45);transition:box-shadow .3s}
.et-q{display:flex;align-items:center;gap:.625rem;padding:.5625rem .5625rem .5625rem 1.125rem;min-height:3.875rem;margin:0}
.et-q > .et-ico{color:#5B2A86}
.et-go .et-ico,.et-go svg{color:#fff;stroke:#fff}
.et-q input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 1.125rem/1.3 "Inter",sans-serif;color:#22132F;padding:.625rem 0;-webkit-appearance:none;appearance:none}
.et-q input::placeholder{color:#6E6579;opacity:1}
.et-q input::-webkit-search-cancel-button{display:none}
.et-go{flex:none;width:2.875rem;height:2.875rem;border-radius:12px;border:0;display:grid;place-items:center;color:#fff;cursor:pointer;background:linear-gradient(180deg,#7A45AA,#5B2A86);box-shadow:0 .375rem .875rem -.25rem rgba(91,42,134,.6),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.et-go:active{transform:scale(.9)}
/* the purple arrow as a call to action: words on desktop until elloo opens, the arrow alone on phones and once open */
.et-go-t{display:none}
@media (min-width:760px){
  .et:not(.et-talking) .et-go{display:inline-flex;align-items:center;justify-content:center;width:auto;gap:.5rem;padding:0 1.125rem 0 1.25rem;font:700 .9688rem "Inter",sans-serif;color:#fff}
  .et:not(.et-talking) .et-go-t{display:inline;white-space:nowrap}
  .et:not(.et-talking) .et-go .et-ico{transition:transform .2s}
  .et:not(.et-talking) .et-go:hover .et-ico{transform:translateX(3px)}
  .et-shell:has(.et:not(.et-talking)) ~ .et-hint{display:none}
}
/* the arrow invites a press with a shimmer: a soft streak of light crosses it every few seconds while the bar shows
   example searches (Omar: the pulsing ring read like a flashing light); steady colour the rest of the time */
.et-go{position:relative;overflow:hidden;isolation:isolate}
.et-go > *{position:relative;z-index:1}
.et-go::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transform:translateX(-110%) skewX(-18deg);
  background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.12) 38%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.12) 62%,transparent 80%)}
.et-go.hint::after{}
@keyframes etGoGlint{0%{opacity:1;transform:translateX(-110%) skewX(-18deg)}32%{opacity:1;transform:translateX(110%) skewX(-18deg)}33%,100%{opacity:0;transform:translateX(110%) skewX(-18deg)}}
.et-x{display:none;flex:none;width:2.875rem;height:2.875rem;border-radius:12px;border:1px solid #E6E0EE;background:#fff;color:#22132F;place-items:center;cursor:pointer}
.et.full .et-x{display:grid}
.et-hint{margin:-.25rem 0 0;font-size:.9375rem;font-weight:600;color:#5B2A86;transition:opacity .4s}
/* only the suggestions that fit are shown (elloo-tour.js), so the row never scrolls */
.et-try{display:flex;align-items:center;gap:.5rem;max-width:100%;padding:.125rem}
.et-try::-webkit-scrollbar{display:none}
/* phones: the example question wraps inside its pill instead of running off the screen */
.et-try > span{flex:none;font-size:.875rem;font-weight:600;color:#6E6579}
.et-try button{flex:none;font:500 .875rem/1 "Inter",sans-serif;color:#22132F;background:rgba(255,255,255,.85);border:1px solid #E6E0EE;padding:.5625rem .875rem;border-radius:12px;cursor:pointer;transition:border-color .15s,transform .15s}
.et-try button:hover{border-color:#CDB3E8;transform:translateY(-1px)}
/* phones: the suggestion's words wrap inside its pill (after the rule above, which would otherwise win) */
/* on phones the bar is already typing an example search, so the "Try" suggestion under it only repeated it (Omar, Oct 13: too much text under the bar) */
@media (max-width:480px){.et-try{display:none}}
.et button:focus-visible,.et-try button:focus-visible{outline:3px solid #F2C14E;outline-offset:2px}
.et input,.et input:focus,.et input:focus-visible{outline:none;box-shadow:none}

.et button:focus-visible,.et-try button:focus-visible{outline:3px solid #F2C14E;outline-offset:2px}
.et input,.et input:focus,.et input:focus-visible{outline:none;box-shadow:none}
@keyframes etIn{from{opacity:0;transform:translateY(8px)}}

/* ---- alive (Oct 2026): elloo breathes at rest, and thinks out loud with a glowing orb and changing words ---- */
/* the bar sits on a soft aura that breathes, purple into gold, slowly */
/* no transform or isolation on the shell: the bar goes fixed (full page) from inside it */
.et-shell{position:relative;width:100%}
.et-shell > .et:not(.full){position:relative;z-index:1}
.et-glow{position:absolute;inset:-1.5rem -2rem;z-index:0;border-radius:3rem;pointer-events:none;filter:blur(28px);opacity:.7;
  background:radial-gradient(40% 70% at 22% 50%,rgba(155,108,200,.55),transparent 70%),radial-gradient(40% 70% at 78% 50%,rgba(242,193,78,.35),transparent 70%),radial-gradient(60% 90% at 50% 50%,rgba(205,179,232,.6),transparent 75%)}
@keyframes etBreathe{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.04);opacity:.95}}
.et-shell .et:not(.full){}
@keyframes etLift{0%,100%{box-shadow:0 1px 0 #fff inset,0 1.5rem 3rem -1.5rem rgba(58,24,88,.42)}50%{box-shadow:0 1px 0 #fff inset,0 2rem 4rem -1.25rem rgba(91,42,134,.5)}}
.et-go{background:linear-gradient(135deg,#8E55C4,#5B2A86 55%,#4A1F70)}

/* full page: a slow aurora drifts behind everything */
.et.full{background:#fff}
.et.full::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.55;
  background:radial-gradient(30% 35% at 20% 20%,rgba(205,179,232,.55),transparent 70%),radial-gradient(28% 32% at 85% 30%,rgba(242,193,78,.25),transparent 70%),radial-gradient(35% 40% at 60% 90%,rgba(155,108,200,.3),transparent 70%);
  animation:etAurora 18s ease-in-out infinite alternate}
@keyframes etAurora{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(3%,-2%) rotate(4deg)}100%{transform:translate(-3%,2%) rotate(-3deg)}}
.et.full > *{position:relative;z-index:1}

.et-shell:has(.et.et-talking:not(.full)) .et-glow{opacity:0;transition:opacity .4s}
@media (prefers-reduced-motion:reduce){.et-glow,.et-shell .et,.et-go,.et-go::after,.et.full::before{animation:none!important}}

/* full page (the expand button): grows from where the bar sits to the whole screen with a clip, and back */
.et-veil{position:fixed;inset:0;z-index:90;background:rgba(26,15,38,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1)}
.et-veil.on{opacity:1;pointer-events:auto}
.et.full{position:fixed;z-index:100;display:flex;flex-direction:column;border-radius:1.75rem;box-shadow:0 2.5rem 6rem -1rem rgba(26,15,38,.55)}
/* the morph between in-page and full screen: one smooth glide, the veil fading with it, the rest of the page still */
::view-transition-group(elloo){z-index:2;animation-duration:.55s;animation-timing-function:cubic-bezier(.22,.9,.24,1)}
::view-transition-group(elloo-veil){z-index:1}
::view-transition-old(elloo),::view-transition-new(elloo){height:100%;width:100%;object-fit:cover;object-position:top center;animation-duration:.22s;animation-timing-function:ease-out}
::view-transition-group(elloo-veil),::view-transition-old(elloo-veil),::view-transition-new(elloo-veil){animation-duration:.55s}
::view-transition-old(root),::view-transition-new(root){animation:none}
.et.full .et-q{border-bottom:1px solid #E6E0EE;padding-inline:1.25rem .75rem}
.et-title{display:none}
.et-x,.et-max{display:none;flex:none;width:2.875rem;height:2.875rem;border-radius:12px;border:1px solid #E6E0EE;background:#fff;color:#22132F;place-items:center;cursor:pointer}
.et.et-talking .et-x,.et.et-talking .et-max,.et.full .et-x{display:grid}
.et.full .et-max .et-ico{transform:rotate(180deg)}

/* the panel: opens under the bar, wide and long (not full screen), sized by fitPanel to the screen below the bar */
.et-open{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.2,.7,.2,1);min-height:0}
.et-open.on{grid-template-rows:1fr}
.et-open > .et-body{overflow:hidden;overflow:clip;min-height:0;transition:opacity .35s}
.et-open:not(.on) > .et-body{opacity:0}
.et.full .et-open{flex:1;transition:none}
.et.et-talking:not(.full){--pw:min(76rem,calc(100vw - 2rem));width:var(--pw);left:50%;margin-left:calc(var(--pw) / -2);transition:width .5s cubic-bezier(.2,.7,.2,1),margin-left .5s cubic-bezier(.2,.7,.2,1)}
.et-shell .et.et-talking:not(.full){animation:none;box-shadow:0 1px 0 #fff inset,0 1.75rem 3.5rem -1.5rem rgba(58,24,88,.45)}
.et.et-talking:not(.full) .et-q{border-bottom:1px solid #EFEAF5}
.et-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.et.et-talking:not(.full) .et-body{height:var(--panel-h,min(46rem,calc(100vh - 7.5rem)))}
.et.full .et-body{height:100%}

/* the chat: the thread scrolls, the box to type in stays at the bottom */
.et-chat{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid #EFEAF5}
.et-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1.25rem 1.25rem .75rem;display:flex;flex-direction:column;gap:1rem}
.et-thread > *{flex:none}
.et-ask{flex:none;display:flex;align-items:center;gap:.5rem;margin:.75rem 1.25rem 1rem;padding:.375rem .375rem .375rem .875rem;border-radius:12px;border:1px solid #E6E0EE;background:#FBFAFD}
.et-ask:focus-within{border-color:#CDB3E8;background:#fff}
.et-ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 .9375rem "Inter",sans-serif;color:#22132F;padding:.5rem 0}
.et-ask button{flex:none;width:2.375rem;height:2.375rem;border-radius:12px;border:0;display:grid;place-items:center;background:#5B2A86;color:#fff;cursor:pointer}
.et-ask button .et-ico{stroke:#fff}
.m-you{display:flex;justify-content:flex-end;animation:etIn .35s cubic-bezier(.2,.7,.2,1)}
.m-you span{max-width:85%;background:#F3EEF8;border-radius:12px;padding:.5rem .85rem;font-size:.9375rem;font-weight:500;color:#22132F}
.m-el{display:grid;animation:etIn .35s cubic-bezier(.2,.7,.2,1)}
.m-body{min-width:0;display:grid;gap:.75rem}
.m-t{margin:0;font-size:.9688rem;line-height:1.5;color:#22132F}
.m-t b{font-weight:700}
@keyframes etShimmer{to{background-position:-300% 0}}
@keyframes etWord{from{opacity:0;filter:blur(6px);transform:translateY(6px)}}
@keyframes etSpin{to{transform:rotate(360deg)}}
.et-why{font-size:.75rem;color:#5F5668;border:1.5px dashed #B996E6;background:#fff;border-radius:12px;padding:.4375rem .625rem;line-height:1.5}
.et-why b{color:#5B2A86}

/* elloo at work (Omar's reference: a premium activity indicator, not typing dots): just above the chat box, a small
   glowing four-point sparkle breathes inside a soft halo that grows and shrinks, beside a muted phrase that crossfades.
   When the answer is done the sparkle brightens, a tick and "Ready" show, and it all fades away. No container. */
.et-status{flex:none;display:flex;align-items:center;gap:.625rem;height:0;margin:0 1.375rem;opacity:0;overflow:visible;pointer-events:none;
  transition:height .35s cubic-bezier(.2,.7,.2,1),opacity .35s,margin .35s}
.et-status.on{height:1.75rem;margin-top:.625rem;opacity:1}
.st-ico{position:relative;flex:none;width:1.5rem;height:1.5rem;display:grid;place-items:center}
.st-halo{position:absolute;inset:-.5rem;border-radius:50%;background:radial-gradient(circle,rgba(155,108,200,.42),rgba(185,162,245,.18) 45%,transparent 70%);animation:stHalo 1.6s ease-in-out infinite}
.st-spark{position:relative;width:1.3125rem;height:1.3125rem;filter:drop-shadow(0 0 .375rem rgba(155,108,200,.7));animation:stBreathe 2.4s cubic-bezier(.45,0,.55,1) infinite;transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1),filter .3s}
.st-check{position:absolute;width:1.125rem;height:1.125rem;opacity:0;transform:scale(.5);transition:opacity .3s .15s,transform .4s .15s cubic-bezier(.34,1.56,.64,1)}
.st-check circle{fill:#DDF2E7}
.st-check path{fill:none;stroke:#1F7A4D;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st-txt{display:grid;font-size:.8438rem;font-weight:500;letter-spacing:-.005em;color:#6E6579}
.st-txt span{grid-area:1 / 1;white-space:nowrap;opacity:0;transform:translateY(3px);filter:blur(2px);transition:opacity .5s,transform .5s,filter .5s}
.st-txt span.on{opacity:1;transform:none;filter:none}
.et-status.ready .st-spark{opacity:0;transform:scale(1.5);filter:drop-shadow(0 0 .5rem rgba(155,108,200,.9)) brightness(1.3)}
.et-status.ready .st-halo{animation:stFlash .6s ease-out forwards}
.et-status.ready .st-check{opacity:1;transform:none}
.et-status.ready .st-txt{color:#1F7A4D;font-weight:600}
@keyframes stHalo{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1.15);opacity:1}}
/* it turns a quarter (a four-point star looks the same every quarter, so the loop is seamless), swelling and softening
   as it goes, while specks of light dissolve off it */
@keyframes stBreathe{0%{transform:scale(.86) rotate(0deg);opacity:.8;filter:drop-shadow(0 0 .25rem rgba(155,108,200,.5)) blur(.4px)}
  50%{transform:scale(1.08) rotate(45deg);opacity:1;filter:drop-shadow(0 0 .5rem rgba(155,108,200,.85)) blur(0)}
  100%{transform:scale(.86) rotate(90deg);opacity:.8;filter:drop-shadow(0 0 .25rem rgba(155,108,200,.5)) blur(.4px)}}
.st-p{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#B9A2F5;opacity:0;animation:stSpeck 2.4s ease-out infinite}
.st-p:nth-of-type(1){--dx:.75rem;--dy:-.5rem;animation-delay:.3s;background:#F2C14E}
.st-p:nth-of-type(2){--dx:-.75rem;--dy:-.375rem;animation-delay:.9s}
.st-p:nth-of-type(3){--dx:.5rem;--dy:.75rem;animation-delay:1.5s;background:#9B6CC8}
.st-p:nth-of-type(4){--dx:-.5rem;--dy:.625rem;animation-delay:2s;background:#F2C14E}
@keyframes stSpeck{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:.95}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.3);filter:blur(1px)}}
.et-status.ready .st-p{animation:none;opacity:0}
@keyframes stFlash{0%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* the interview: tap answers, with how far along they are */
.et-qual{display:grid;gap:.5rem;justify-items:start}
.q-step{margin:0;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5B2A86}
.q-q{margin:0;font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;color:#22132F}
.q-opts{display:flex;flex-wrap:wrap;gap:.4rem}
.q-opts button{font:600 .875rem "Inter",sans-serif;padding:.55rem .9rem;border-radius:12px;border:1.5px solid #E3D6F1;background:#fff;color:#22132F;cursor:pointer;transition:border-color .15s,color .15s}
.q-opts button:hover:not(:disabled){border-color:#5B2A86;color:#5B2A86}
.q-opts button:disabled{cursor:default;opacity:.5}
.q-opts button.picked{opacity:1;border-color:#5B2A86;background:#F3EEF8;color:#5B2A86}
.q-or{margin:0;font-size:.8125rem;color:#8A7F96}

/* the work list, inside elloo's message: each step spins, then ticks, then gets its line */
.et-work{list-style:none;margin:0;padding:0;border:1px solid #E6E0EE;border-radius:12px;overflow:hidden;background:#fff}
.et-wk{display:grid;grid-template-columns:1rem minmax(0,1fr) auto;gap:.65rem;align-items:start;padding:.55rem .8rem;border-top:1px solid #EFEAF5;transition:background .25s}
.et-wk:first-child{border-top:0}
.et-wk b{font-size:.875rem;font-weight:600;color:#8A7F96;transition:color .25s}
.et-wk small{margin-left:.5rem;font-size:.6875rem;font-weight:700;color:#8A7F96;background:#F3EEF8;border-radius:.3125rem;padding:.0625rem .375rem;white-space:nowrap}
.et-wk p{margin:.15rem 0 0;font-size:.8125rem;line-height:1.45;color:#6E6579}
.et-wk p:empty{display:none}
.et-wk p span{color:#5B2A86}
.et-wk .nb{font-size:.6875rem;color:#8A7F96;padding-top:.15rem;font-variant-numeric:tabular-nums}
.et-wk .st{width:1rem;height:1rem;margin-top:.125rem;border-radius:50%;border:2px solid #E3D6F1}
.et-wk.doing{background:#F7F2FC}
.et-wk.doing b,.et-wk.done b{color:#22132F}
.et-wk.doing .st{border-color:#5B2A86;border-right-color:transparent;animation:etSpin .8s linear infinite}
.et-wk.done .st{border:0;background:#1F7A4D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;animation:etTick .3s cubic-bezier(.34,1.56,.64,1)}
.et-wk.done{cursor:pointer}
.et-wk.done:hover{background:#FBFAFD}
@keyframes etTick{from{transform:scale(.4)}}

/* the package card from the home page (site/packages.js: raised with a soft glow, gold tab, dark Buy button), made
   compact for the chat: name, line and price in one row, then what elloo built as ticks in two columns */
.et-pk{position:relative;margin-top:.75rem;border-radius:18px;padding:1.125rem 1rem .875rem;display:grid;gap:.75rem;color:#22132F;font-variant-numeric:tabular-nums;
  border:1.5px solid #B996E6;background:linear-gradient(180deg,#FFFFFF,#F4EEFA);box-shadow:inset 0 1px 0 #fff,0 0 0 5px rgba(185,150,230,.2),0 0 28px rgba(155,107,206,.28),0 22px 40px -22px rgba(91,42,134,.45);animation:etIn .45s cubic-bezier(.2,.7,.2,1)}
.k-tab{position:absolute;left:1rem;top:0;transform:translateY(-50%);height:1.5rem;display:block;line-height:1.375rem;padding:0 .625rem;background:linear-gradient(180deg,#F7D27A,#F2C14E);color:#3A2400;font-size:.75rem;font-weight:700;border:1px solid #E2AE34;border-radius:.4375rem;white-space:nowrap;max-width:calc(100% - 2rem);overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.k-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:center}
.k-ic{width:2.125rem;height:2.125rem;border-radius:8px;background:#fff;border:1px solid #DCD3E6;color:#5B2A86;display:grid;place-items:center}
.k-ic svg{width:1.1875rem;height:1.1875rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k-nm h3{margin:0;font-size:1.125rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.k-nm p{margin:.125rem 0 0;font-size:.8125rem;color:#6E6579;line-height:1.35}
.k-pr{display:grid;justify-items:end;gap:.125rem;text-align:right}
.k-pr b{font-size:1.875rem;font-weight:800;letter-spacing:-.035em;line-height:1}
.k-pr b small{font-size:.875rem;font-weight:600;letter-spacing:0;color:#6E6579;margin-left:1px}
.k-pr span{font-size:.6875rem;color:#6E6579;white-space:nowrap}
.k-rows{list-style:none;margin:0;padding:.5rem .75rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem 1rem;background:#F7F2FC;border:1px solid #E9DFF4;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.k-rows li{display:grid;grid-template-columns:1.125rem minmax(0,1fr);gap:.5rem;align-items:start;font-size:.8125rem;line-height:1.35}
.k-rows li span{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.k-rows li::before{content:"";width:1.125rem;height:1.125rem;border-radius:99px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%235B2A86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.875rem no-repeat;box-shadow:inset 0 0 0 1px #E9DFF4}
.k-up{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;font:500 .8125rem/1.35 "Inter",sans-serif;color:#5F5668;padding:.5rem .5rem .5rem .75rem;border-radius:12px;border:1.5px dashed #CDB3E8;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.k-up:hover{border-color:#5B2A86;border-style:solid;background:#FBF8FE}
.k-up > span:first-child{flex:1;min-width:0}
.k-up b{color:#22132F;font-weight:700}
.k-go{flex:none;font-weight:700;font-size:.8125rem;color:#5B2A86;background:#F3EEF8;border-radius:8px;padding:.375rem .75rem}
.k-up:hover .k-go{background:#5B2A86;color:#fff}
.k-act{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.k-buy{display:block;text-align:center;font-weight:700;font-size:.9375rem;padding:.6875rem 1rem;border-radius:12px;background:#5B2A86;color:#fff;text-decoration:none}
.k-buy:hover{background:#4E2375}
.k-save{font:700 .875rem "Inter",sans-serif;padding:.6875rem .875rem;border-radius:12px;border:1.5px solid #5B2A86;background:#fff;color:#5B2A86;cursor:pointer}

/* what it's worth to them, from their own two answers, inside the card */
.k-val{margin:0;font-size:.8125rem;line-height:1.45;color:#2B6B45;background:#EAF6EF;border:1px solid #CFEBDB;border-radius:12px;padding:.5rem .75rem}
.k-val b{display:block;font-size:.875rem;font-weight:800;color:#1D5C38}
.k-why{display:grid;gap:.1875rem;margin-top:.375rem}
.k-why > span{display:flex;justify-content:space-between;gap:.75rem}
.k-why em{font-style:normal}
.k-why i{font-style:normal;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.k-keep{display:block;margin-top:.375rem;padding-top:.375rem;border-top:1px solid #CFEBDB;color:#4F6B5A}
.et-check{gap:.625rem;justify-items:stretch;padding:.875rem 1rem;border:1px solid #E6E0EE;border-radius:12px;background:#fff}
.ck-row{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.75rem;align-items:start}
.ck-l{font-size:.8125rem;font-weight:700;color:#5F5668;padding-top:.5rem}
.et-check .q-opts button{padding:.45rem .75rem;font-size:.8125rem}
.et-check .q-opts button[aria-pressed="true"]{border-color:#5B2A86;background:#F3EEF8;color:#5B2A86}
.et-check [data-many] button[aria-pressed="true"]::before{content:"\2713  ";font-weight:800}
/* their business name, optional, while it builds */
.et-myname{display:grid;gap:.375rem;padding:.625rem .75rem;border:1px dashed #E3D6F1;border-radius:12px;background:#FBFAFD}
.et-check .et-myname{padding:0;border:0;background:none}
.et-mine{padding:.75rem;border:1px dashed #E3D6F1;border-radius:12px;background:#FBFAFD;gap:.625rem;justify-items:stretch}
.et-mine .et-myname{padding:0;border:0;background:none}
.et-mine .ck-l{display:block;padding:0 0 .375rem}
.et-mine .et-named{margin:0}
/* the quick check, one question at a time */
.ck-top{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.ck-n{flex:none;font-size:.75rem;font-weight:700;color:#8A7F96;font-variant-numeric:tabular-nums}
.ck-recap{display:flex;flex-wrap:wrap;gap:.375rem}
.ck-recap[hidden]{display:none}
.ck-recap button{font:600 .75rem "Inter",sans-serif;padding:.3125rem .625rem;border-radius:12px;border:1px solid #E3D6F1;background:#F7F2FC;color:#5B2A86;cursor:pointer}
.ck-recap button::before{content:"\2713  ";font-weight:800}
.ck-step{display:grid;gap:.5rem;animation:etIn .3s cubic-bezier(.2,.7,.2,1)}
.ck-step[hidden]{display:none}
.ck-step .ck-l{padding-top:0;font-size:.9375rem;font-weight:700;color:#22132F}
.ck-step .ck-l small{font-size:.8125rem;font-weight:500;color:#8A7F96;margin-left:.25rem}
.et-check .q-go .go[hidden]{display:none}
/* once answered (or skipped) every question shows again, as the record of what they said */
.et-check.ck-all .ck-step:not(.ck-name){display:grid}
.et-check.ck-all .ck-name,.et-check.ck-all .ck-recap,.et-check.ck-all .ck-n{display:none}
.et-myname label{font-size:.8125rem;font-weight:600;color:#5F5668}
.et-myname span{display:flex;gap:.375rem}
.et-myname input{flex:1;min-width:0;font:500 .875rem "Inter",sans-serif;padding:.5rem .7rem;border-radius:8px;border:1px solid #E6E0EE;color:#22132F;outline:0}
.et-myname input:focus{border-color:#5B2A86}
.et-myname button{flex:none;font:700 .8125rem "Inter",sans-serif;padding:.5rem .8rem;border-radius:8px;border:0;background:#5B2A86;color:#fff;cursor:pointer}
/* a business name swapping in: a purple wash sweeps across it and the letters ink in purple, rippling down the screen */
.et-bn{position:relative;display:inline}
.et-bn.swap{animation:bnInk 1.3s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.et-bn.swap::after{content:"";position:absolute;left:-.125rem;right:-.125rem;top:.05em;bottom:-.05em;border-radius:.25rem;background:linear-gradient(90deg,rgba(122,69,170,.32),rgba(185,150,230,.28));transform-origin:left;pointer-events:none;animation:bnSweep 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.pg-logo.swap{animation:bnLogo .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes bnInk{0%{color:#7A45AA;filter:blur(3px);opacity:.25}30%{color:#5B2A86;filter:none;opacity:1}70%{color:#5B2A86}100%{}}
@keyframes bnSweep{0%{transform:scaleX(0);opacity:1}45%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes bnLogo{0%{transform:scale(.6) rotate(-12deg);opacity:.3}100%{transform:none;opacity:1}}
.et-named .et-rename{font:600 .8125rem "Inter",sans-serif;color:#5B2A86;background:none;border:0;padding:0;margin-left:.25rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.et-bn.swap,.et-bn.swap::after,.pg-logo.swap,.et-art.ready,.et-art.ready .art-go{animation:none!important}}
@keyframes artPop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes artNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (max-width:600px){.ck-row{grid-template-columns:minmax(0,1fr);gap:.25rem}.ck-l{padding-top:0}}
.q-go{display:flex;gap:.4rem;margin-top:.125rem}
.q-go .go{font:700 .875rem "Inter",sans-serif;padding:.55rem .9rem;border-radius:12px;border:0;background:#5B2A86;color:#fff;cursor:pointer}
.q-go .go:disabled{opacity:.5}
.q-go .skip{font:600 .875rem "Inter",sans-serif;padding:.55rem .9rem;border-radius:12px;border:1.5px dashed #E3D6F1;background:#fff;color:#8A7F96;cursor:pointer}
.q-go .skip.picked{border-style:solid;border-color:#5B2A86;color:#5B2A86}
.k-note{margin:0;font-size:.75rem;color:#6E6579;padding-inline:.25rem}

/* a finished list (the build, the two answers) folds to one line they can open again */
.et-work-sum{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;font:600 .8438rem "Inter",sans-serif;color:#22132F;background:#fff;border:1px solid #E6E0EE;border-radius:12px;padding:.55rem .8rem;cursor:pointer}
.et-work-sum:hover{border-color:#CDB3E8}
.et-work-sum i{flex:none;width:1rem;height:1rem;border-radius:50%;background:#1F7A4D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.et-work-sum span{flex:1;min-width:0}
.et-work-sum u{text-decoration:none;font-size:.75rem;font-weight:700;color:#5B2A86}
.et-workbox{display:grid;gap:.5rem}
.et-workbox.folded > ol,.et-workbox.folded > .et-qa{display:none}
.et-qabox .et-work-sum i{background:#F3EEF8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2 4.8-5' fill='none' stroke='%235B2A86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.et-qa{display:grid;gap:.5rem}
.q-opts button.skip{border-style:dashed;color:#8A7F96}

/* where to go next */
.et-next{display:grid;gap:.375rem}
.et-next .lbl{margin:0;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8A7F96}
.et-next > div,.et-next:not(:has(> div)){display:flex;flex-wrap:wrap;gap:.375rem}
.et-next button{font:500 .8438rem "Inter",sans-serif;padding:.45rem .75rem;border-radius:8px;border:1px solid #E6E0EE;background:#fff;color:#22132F;cursor:pointer;text-align:left}
.et-next button:hover{border-color:#5B2A86;color:#5B2A86}
.et-next button.up{border-color:#CDB3E8;background:#F3EEF8;color:#5B2A86;font-weight:700}

/* what changed after they spoke up */
.et-change{display:grid;gap:.375rem;justify-items:start;padding:.625rem .75rem;border-radius:12px;background:#fff;border:1px solid #E3D6F1}
.et-change .ch-add{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:700}
.et-change .ch-add i{width:1.125rem;height:1.125rem;border-radius:50%;background:#DDF2E7;color:#1F7A4D;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.75rem}
.et-change .ch-plan{margin:0;font-size:.8438rem;color:#4F4857}
.et-change .ch-plan s{color:#8A7F96}
.et-change .ch-plan b{color:#5B2A86}
.et-change .undo{font:700 .75rem "Inter",sans-serif;padding:.3125rem .625rem;border-radius:8px;border:1px solid #E3D6F1;background:#fff;color:#8E3527;cursor:pointer}

/* saving their setup, inside the chat: one box and one button */
.et-save{display:grid;gap:.5rem;padding:.875rem 1rem;border-radius:12px;border:1px solid #CDB3E8;background:#FBF8FE;animation:etIn .4s}
.et-save[hidden]{display:none}
.sv-l{font-size:.9375rem;font-weight:800;color:#22132F}
.sv-row{display:flex;gap:.5rem}
.sv-row input{flex:1;min-width:0;font:500 .9375rem "Inter",sans-serif;padding:.625rem .75rem;border-radius:12px;border:1px solid #E3D6F1;background:#fff;color:#22132F;outline:0}
.sv-row input:focus{border-color:#5B2A86}
.et-save .send{flex:none;font:800 .9375rem "Inter",sans-serif;color:#fff;background:#5B2A86;border:0;padding:.625rem 1.125rem;border-radius:12px;cursor:pointer}
.sv-note{margin:0;font-size:.75rem;color:#6E6579}
.et-save .err{color:#A33A3A;font-size:.8125rem;margin:0}
.et-save .ok{color:#1F7A4D;font-weight:700;margin:0}
.et-save .et-msg:empty{display:none}

/* straight answers: the three plans, how we compare, ways to reach Omar, the free pilot */
/* four across, or two by two when the chat is narrow: never three and one (Omar, Oct 21 2026) */
.et-prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(calc(25% - .375rem),calc((34rem - 100%) * 999),calc(50% - .25rem)),1fr));gap:.5rem}
.et-prices .pz{display:grid;gap:.125rem;align-content:start;justify-items:start;text-align:left;padding:.625rem .75rem;border-radius:12px;border:1px solid #E6E0EE;background:#fff;color:#22132F;text-decoration:none;transition:border-color .15s}
.et-prices .pz:hover,.et-prices .pz.on{border-color:#B996E6;box-shadow:0 0 0 3px rgba(205,179,232,.25)}
.et-prices b{font-size:.8125rem;font-weight:800}
.et-prices .pr{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.et-prices .pr small{font-size:.75rem;font-weight:600;color:#6E6579}
.et-prices span:last-child{font-size:.75rem;color:#6E6579;line-height:1.35}
.et-fine{margin:-.25rem 0 0;font-size:.75rem;color:#6E6579}
.et-cmp{overflow-x:auto;border:1px solid #E6E0EE;border-radius:12px;background:#fff}
.et-cmp table{width:100%;border-collapse:collapse;font-size:.75rem;line-height:1.35;min-width:26rem}
.et-cmp th,.et-cmp td{padding:.45rem .55rem;text-align:left;vertical-align:top;border-top:1px solid #F1ECF6}
.et-cmp thead th{border-top:0;font-weight:700;color:#6E6579;background:#FBFAFD}
.et-cmp tbody th{font-weight:700;color:#5F5668;white-space:nowrap}
.et-cmp .us{background:#F7F2FC;color:#3E1A60;font-weight:700}
.et-cmp thead .us{color:#5B2A86}
.et-reach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.et-reach .rc{display:grid;gap:.125rem;text-align:left;padding:.75rem .875rem;border-radius:12px;border:1px solid #E3D6F1;background:#fff;color:#22132F;text-decoration:none;font:inherit;cursor:pointer;transition:border-color .15s}
.et-reach .rc:hover{border-color:#5B2A86}
/* talking to Omar himself: the first option, his messages with his initial, and a green dot while he's in */
.et-reach{grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr))}
.et-reach .rc-live{border-color:#5B2A86;background:#F7F2FC}
.live-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#2FA36B;box-shadow:0 0 0 3px rgba(47,163,107,.2);margin-right:.4rem;vertical-align:.1em}
.m-joined{margin:0;font-size:.8125rem;font-weight:600;color:#1F7A4D;text-align:center}
.m-omar{display:flex;gap:.625rem;align-items:flex-start;animation:etIn .35s cubic-bezier(.2,.7,.2,1)}
.m-omar .av{flex:none;width:1.875rem;height:1.875rem;border-radius:50%;background:linear-gradient(135deg,#F7D27A,#F2C14E);color:#3A2400;font:800 .875rem/1.875rem "Inter",sans-serif;text-align:center}
.m-omar b{display:block;font-size:.8125rem;color:#5B2A86}
.m-omar p{margin:.125rem 0 0;font-size:.9688rem;line-height:1.45;color:#22132F}
.et.et-omar .et-ask{border-color:#2FA36B}
.et-reach b{font-size:.875rem;color:#5B2A86}
.et-reach span{font-size:.75rem;color:#6E6579}
.et-pilot{display:grid;gap:.5rem;padding:.875rem 1rem;border-radius:12px;border:1px solid #E2AE34;background:linear-gradient(180deg,#FFFBEF,#FFFFFF)}
.et-pilot .pl-k{margin:0;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8A5A00}
.et-pilot .pl-t{margin:0;font-size:.9063rem;line-height:1.45}
.et-pilot .send{flex:none;font:800 .875rem "Inter",sans-serif;color:#3A2400;background:#F2C14E;border:0;padding:.625rem 1rem;border-radius:12px;cursor:pointer}
.et-pilot .err{color:#A33A3A;font-size:.8125rem;margin:0}.et-pilot .ok{color:#1F7A4D;font-weight:700;margin:0}.et-pilot .et-msg:empty{display:none}
.k-buy{border:0;font-family:inherit;cursor:pointer}
.k-pilot{margin:0;display:flex;justify-content:center;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-size:.75rem;color:#6E6579}
.k-pilot button{font:700 .75rem "Inter",sans-serif;color:#5B2A86;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.k-two{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.k-buy span{display:inline-block;margin-left:.25rem;transition:transform .2s}
.k-buy:hover span{transform:translateX(3px)}
.k-sure{margin:-.125rem 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap;font-size:.75rem;color:#5F5668}
.k-sure button{font:600 .75rem "Inter",sans-serif;color:#6E6579;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.k-sure button:hover{color:#5B2A86}
.et-cmp thead th small{display:block;font-weight:500;color:#8A7F96;font-size:.6875rem}
.k-save{display:block;text-align:center;text-decoration:none}
.cmp-logo{display:inline-flex;align-items:center;gap:.3125rem}
.cmp-logo img{width:1.125rem;height:1.125rem;flex:none}
.cmp-word{height:.875rem;width:auto;fill:#5B2A86}
.et-next a{font:500 .8438rem "Inter",sans-serif;padding:.45rem .75rem;border-radius:8px;border:1px solid #E6E0EE;background:#fff;color:#22132F;text-decoration:none}
.et-next a.up{border-color:#CDB3E8;background:#F3EEF8;color:#5B2A86;font-weight:700}
@media (max-width:600px){.et-reach{grid-template-columns:minmax(0,1fr)}}

/* the live preview: every piece elloo builds stacks here, newest highlighted */
.et-live{display:flex;flex-direction:column;min-width:0;min-height:0;background:linear-gradient(180deg,#F7F2FC,#F3EEF8)}
.et-live-h{flex:none;display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:#fff;border-bottom:1px solid #EFEAF5;font-size:.8125rem;font-weight:700;color:#6E6579}
.et-live-h > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.et-pips{margin-left:auto;display:flex;gap:.25rem}
.et-pips i{width:1rem;height:.25rem;border-radius:2px;background:#E6E0EE;transition:background .3s}
.et-pips i.on{background:#5B2A86}
.et-live-b{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.et-empty{margin:auto;color:#8A7F96;font-size:.9375rem;font-weight:500}
.et-sc-k{justify-self:start;margin:0;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5B2A86}
.et-sc-k span{color:#8A7F96}
/* the page: one continuous page about their business. Their name heads it, each step is a section of it (a heading,
   a line on what it does, its picture), divided by hairlines rather than boxed. Skeletons first; each section's
   picture fades in over its skeleton as it's built */
.et-boardwrap{position:relative}
.et-page{display:block;background:#fff;border:1px solid #E6E0EE;border-radius:18px;box-shadow:0 1.25rem 2.5rem -1.75rem rgba(58,24,88,.45);overflow:hidden}
.pg-h{display:flex;align-items:center;gap:.75rem;padding:1.125rem 1.25rem;background:linear-gradient(135deg,#F7F2FC,#FFFFFF 70%);border-bottom:1px solid #F1ECF6}
.pg-logo{width:2.25rem;height:2.25rem;border-radius:12px;background:linear-gradient(135deg,#7A45AA,#5B2A86);color:#fff;font-weight:800;display:grid;place-items:center}
.pg-h b{display:block;font-size:1.0625rem;font-weight:800;letter-spacing:-.01em}
.pg-h div span{font-size:.75rem;color:#6E6579}
.et-slot{position:relative;display:grid;gap:.625rem;padding:1.125rem 1.25rem 1.25rem;border-top:1px solid #F1ECF6;min-width:0;transition:background .4s}
.pg-h + .et-slot{border-top:0}
.et-slot.now{background:#FBF8FE}
.et-slot.now::before{content:"";position:absolute;left:0;top:1.125rem;bottom:1.25rem;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#9B6CC8,#5B2A86)}
.pg-t{display:grid;gap:.25rem}
.pg-cap{margin:0;font-size:.8125rem;line-height:1.45;color:#6E6579;max-width:40rem}
.pg-cap span{color:#5B2A86}
.pg-cap i{display:block;height:.625rem;border-radius:8px;background:linear-gradient(90deg,#EFEAF5 25%,#F8F5FB 50%,#EFEAF5 75%);background-size:200% 100%;animation:etSkel 1.6s ease-in-out infinite}
.pg-cap i + i{width:60%;margin-top:.3125rem}
.et-slot.sk .et-sc-k{color:#B7AEC2}
.et-slot.fill .et-sc-k{color:#5B2A86;transition:color .4s}
.et-slot.fill .pg-cap{animation:etAppear .5s cubic-bezier(.2,.7,.2,1) both}
.et-slot-in{display:grid;justify-items:center;min-width:0;padding-top:.25rem}
.et-slot-in:empty{display:none}
.et-slot.fill .et-slot-in{animation:etAppear .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes etAppear{from{opacity:0;filter:blur(6px);transform:scale(.97)}}
.pg-f{padding:1rem 1.25rem;border-top:1px solid #F1ECF6;font-size:.75rem;color:#8A7F96;text-align:center;background:#FBFAFD}
/* skeletons: soft shimmering shapes of what's coming (a map, a site, a phone, cards, a chart) */
.sk-shape{display:grid;gap:.375rem;justify-self:stretch;transition:opacity .5s,filter .5s}
.et-slot.fill .sk-shape{position:absolute;left:1.25rem;right:1.25rem;bottom:1.25rem;opacity:0;filter:blur(4px);pointer-events:none}
.et-slot:not(.sk) .sk-shape{display:none}
.sk-shape i{display:block;border-radius:8px;background:linear-gradient(90deg,#EFEAF5 25%,#F8F5FB 50%,#EFEAF5 75%);background-size:200% 100%;animation:etSkel 1.6s ease-in-out infinite}
@keyframes etSkel{to{background-position:-200% 0}}
.sk-map i:nth-child(1){height:5.5rem}.sk-map i:nth-child(2){height:.75rem;width:60%}.sk-map i:nth-child(3){height:.625rem;width:80%}.sk-map i:nth-child(4){height:1.5rem;width:70%;border-radius:999px}
.sk-site i:nth-child(1){height:1.25rem}.sk-site i:nth-child(2){height:5rem}.sk-site i:nth-child(3){height:.75rem;width:55%}.sk-site i:nth-child(4){height:2rem}
.sk-phone{justify-self:center;width:min(11rem,100%);padding:.625rem;border-radius:1.25rem;background:#F3EEF8}
.sk-phone i:nth-child(1){height:1.5rem;width:50%;justify-self:center}.sk-phone i:nth-child(n+2){height:2.75rem;background-color:#fff}
.sk-two{grid-template-columns:1fr 1fr}.sk-two i{height:6.5rem}.sk-two i:nth-child(n+3){display:none}
.sk-list i{height:1.75rem}.sk-list i:nth-child(1){height:1rem;width:45%}
.sk-ticket{justify-self:center;width:min(12rem,100%)}.sk-ticket i:nth-child(1){height:1rem;width:60%}.sk-ticket i:nth-child(2),.sk-ticket i:nth-child(3){height:.875rem}.sk-ticket i:nth-child(4){height:2rem;width:50%;justify-self:center}
.sk-chart{grid-template-columns:repeat(4,1fr);align-items:end;height:7rem}.sk-chart i:nth-child(1){height:35%}.sk-chart i:nth-child(2){height:55%}.sk-chart i:nth-child(3){height:48%}.sk-chart i:nth-child(4){height:80%}

@media (prefers-reduced-motion:reduce){.st-halo,.st-spark,.st-p,.et-wk .st,.sk-shape i{animation:none!important}}
/* a picture swapped after they spoke up: shown finished, nothing replays */
.et-sc.still .et-slot-in,.et-sc.still .et-slot-in *,.et-sc.still .et-slot-in *::after{animation:none!important;transition:none!important}
.et-sc.still .t-a{opacity:1;transform:none}
.et-sc.still .t-pin{opacity:1;transform:rotate(-45deg)}
.et-sc.still .t-meter i{width:var(--to)}

/* the pictures: pieces wait hidden until their picture plays, each with its own delay (--d) */
/* scenes: pieces wait hidden until their scene plays, each with its own delay (--d) */
.t-a{opacity:0;transform:translateY(10px)}
.et-sc.play .t-a{animation:tIn .55s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d,0s)}
@keyframes tIn{to{opacity:1;transform:none}}
.t-card{background:#fff;border:1px solid #E6E0EE;border-radius:18px;box-shadow:0 1rem 2rem -1.25rem rgba(58,24,88,.45);text-align:left}
.t-pill{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:700;padding:.3125rem .625rem;border-radius:999px}
.t-good{background:#DDF2E7;color:#1F7A4D}.t-gold{background:#F8E6B4;color:#3A2400}.t-lav{background:#EFE6F7;color:#5B2A86}
.t-stars{color:#F2C14E;letter-spacing:1px}
.t-row{display:flex;align-items:center;gap:.5rem}
.t-sp{margin-left:auto}
.t-mut{color:#6E6579}
.t-h{margin:0;font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5B2A86}
.t-tap{position:relative}
.et-sc.play .t-tap::after{content:"";position:absolute;right:-.375rem;bottom:-.5rem;width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(91,42,134,.18);border:2px solid rgba(91,42,134,.45);opacity:0;animation:tTap 1.4s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--td,1.4s)}
@keyframes tTap{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}60%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(1.2)}}
.t-w{width:min(27rem,100%)}
.t-map{overflow:hidden}
.t-maparea{height:7rem;position:relative;background:linear-gradient(90deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),linear-gradient(0deg,transparent 56%,#fff 56%,#fff 60%,transparent 60%),linear-gradient(35deg,transparent 70%,#E9F3E6 70%),#EEF0F4}
.t-pin{position:absolute;left:48%;top:18%;width:1.75rem;height:1.75rem;border-radius:50% 50% 50% 0;background:#E2453C;transform:rotate(-45deg) translateY(-30px);opacity:0;box-shadow:0 .375rem .75rem rgba(0,0,0,.25)}
.t-pin::after{content:"";position:absolute;inset:.5rem;border-radius:50%;background:#fff}
.et-sc.play .t-pin{animation:tPin .7s cubic-bezier(.34,1.56,.64,1) .3s forwards}
@keyframes tPin{to{opacity:1;transform:rotate(-45deg) translateY(0)}}
.t-list{padding:.875rem 1rem;display:grid;gap:.375rem}
.t-list b{font-size:1.0625rem}
.t-btns{display:flex;gap:.375rem;margin-top:.25rem;flex-wrap:wrap}
.t-btns span{font-size:.75rem;font-weight:700;padding:.4375rem .75rem;border-radius:999px;border:1px solid #E6E0EE;color:#1A73E8}
.t-btns span.p{background:#1A73E8;color:#fff;border-color:#1A73E8}
.t-chrome{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;background:#F3EFF7;border-bottom:1px solid #E6E0EE;font-size:.6875rem;color:#6E6579;border-radius:18px 18px 0 0}
.t-chrome i{width:.5rem;height:.5rem;border-radius:50%;background:#E3D9EE}
.t-chrome span{margin-left:.5rem;background:#fff;border-radius:999px;padding:.125rem .625rem}
.t-shop{padding:.875rem;display:grid;gap:.625rem}
.t-shop .top{display:flex;align-items:center}
.t-shop .top b{font-size:1rem;font-weight:900;letter-spacing:-.02em}
.t-cart{margin-left:auto;display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:700;color:#5B2A86}
.t-cart em{font-style:normal;display:inline-grid;place-items:center;width:1.125rem;height:1.125rem;border-radius:50%;background:#5B2A86;color:#fff;font-size:.6875rem}
.t-prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.t-prod{border-radius:12px;border:1px solid #E6E0EE;padding:.5rem;font-size:.75rem;display:grid;gap:.25rem}
.t-prod i{height:2.5rem;border-radius:8px}
.t-prod.pick{border-color:#5B2A86;box-shadow:0 0 0 3px rgba(185,150,230,.35)}
/* an online store is found in a Google search, not on the map: the search, the store's result and its products */
.t-serp{padding:.875rem 1rem;display:grid;gap:.625rem}
.t-sbar{display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border:1px solid #E6E0EE;border-radius:999px;font-size:.8125rem;box-shadow:0 1px 4px rgba(32,33,36,.12)}
.t-sbar .et-ico{width:.9rem;height:.9rem;color:#5F6368}
.t-res{display:grid;gap:.125rem;font-size:.75rem}
.t-res b{font-size:.9375rem;color:#1A0DAB;font-weight:600}
.t-sum{font-size:.8125rem;padding:.25rem .125rem 0}
.t-sum b{font-size:.9375rem}
.t-apay{display:flex;align-items:center;justify-content:center;gap:.125rem;height:2.5rem;border-radius:12px;background:#000;color:#fff;font:600 1.0625rem/1 -apple-system,"SF Pro Text","Inter",sans-serif;letter-spacing:-.01em}
.t-apay svg{width:1.125rem;height:1.125rem;fill:#fff;margin-top:-.1875rem}
.t-pay{display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;border-radius:12px;background:#1A0F26;color:#fff;font-size:.8125rem}
.t-pay b{margin-left:auto;background:#F2C14E;color:#3A2400;padding:.3125rem .75rem;border-radius:999px;font-size:.75rem}
.t-lock{width:min(17rem,100%);border-radius:1.75rem;padding:1rem .875rem 1.25rem;background:linear-gradient(170deg,#3A2550,#1A0F26);color:#fff;display:grid;gap:.5rem;box-shadow:0 1.5rem 3rem -1.5rem rgba(26,15,38,.7)}
.t-time{text-align:center;font-size:2.25rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin:.25rem 0 .5rem}
.t-note{background:rgba(255,255,255,.14);border-radius:18px;padding:.625rem .75rem;font-size:.75rem;text-align:left;display:grid;gap:.125rem}
.t-note .h{display:flex;align-items:center;gap:.375rem;font-size:.6875rem;opacity:.8}
.t-note .h i{width:1rem;height:1rem;border-radius:.3125rem;background:#7A45AA}
.t-note b{font-size:.8125rem}
.t-two{width:min(27rem,100%);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:.625rem}
.t-two .t-card{padding:.875rem;display:grid;gap:.5rem;align-content:start;font-size:.75rem}
.t-two .t-card > div:not(.t-check){display:grid;gap:.25rem}
.t-meter{height:.4375rem;border-radius:999px;background:#EEE7F5;overflow:hidden}
.t-meter i{display:block;height:100%;width:var(--from);background:#7A45AA;border-radius:inherit;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.et-sc.play .t-meter i{width:var(--to);transition-delay:var(--d,0s)}
.t-meter.low i{background:#F4A99B}
.t-check{display:flex;align-items:center;gap:.5rem;padding:.3125rem 0;border-top:1px solid #F1ECF6}
.t-box{width:.875rem;height:.875rem;border-radius:.25rem;border:1.5px solid #CDB3E8;flex:none}
.t-sms{width:min(19rem,100%);padding:.875rem;display:grid;gap:.5rem}
@keyframes tFill{to{transform:scaleX(1)}}
.t-bub{max-width:88%;font-size:.8125rem;line-height:1.4;padding:.5rem .75rem;border-radius:18px;background:#F1ECF6;border-bottom-left-radius:.25rem}
.t-bub.me{justify-self:end;background:#34C759;color:#fff;border-bottom-left-radius:1rem;border-bottom-right-radius:.25rem}
@keyframes tStamp{to{opacity:1;transform:scale(1)}}
.t-ltv{width:min(26rem,100%);padding:1rem;display:grid;gap:.75rem}
.t-who{display:flex;align-items:center;gap:.625rem}
.t-who i{width:2.5rem;height:2.5rem;border-radius:50%;background:linear-gradient(135deg,#F4A99B,#F2C14E);display:grid;place-items:center;font-style:normal;font-weight:800;color:#fff}
.t-big{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.t-big strong{font-size:2.25rem;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#5B2A86}
.t-cal{width:min(26rem,100%);padding:.875rem;display:grid;gap:.5rem}
.t-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem}
.t-slot{font-size:.75rem;font-weight:700;text-align:center;padding:.5rem .25rem;border-radius:12px;border:1px solid #E6E0EE}
.t-slot.pick{background:#5B2A86;color:#fff;border-color:#5B2A86}
.t-slot.gone{color:#B7AEC2;text-decoration:line-through}
.t-day{width:min(24rem,100%);padding:.75rem;display:grid;gap:.375rem}
.t-appt{display:grid;grid-template-columns:3.25rem minmax(0,1fr) auto;gap:.5rem;align-items:center;padding:.4375rem .5rem;border-radius:12px;background:#F7F2FC;font-size:.75rem}
.t-appt b{font-size:.8125rem}
.t-appt.new{background:#FFF6DA;box-shadow:inset 3px 0 0 #F2C14E}
.t-call{width:min(19rem,100%);padding:.875rem;display:grid;gap:.5rem}
.t-ring{display:flex;align-items:center;gap:.625rem;padding:.625rem;border-radius:12px;background:#1A0F26;color:#fff;font-size:.75rem}
.t-ring i{width:2rem;height:2rem;border-radius:50%;background:#E2453C;display:grid;place-items:center}
.t-ring i svg{width:1rem;height:1rem;fill:none;stroke:#fff;stroke-width:2.2}
.t-steps{display:grid;gap:.3125rem;font-size:.75rem}
.t-steps .t-row{padding:.375rem .5rem;border-radius:12px;background:#F7F2FC}


/* keep them posted: a text thread from the business, with the order's three steps lighting up in turn */
.t-phone{width:min(20rem,100%);padding:.875rem;display:grid;gap:.5rem;border-radius:1.25rem}
.t-ph-h{display:flex;align-items:center;gap:.5rem;padding-bottom:.5rem;border-bottom:1px solid #F1ECF6}
.t-ph-h i{width:1.75rem;height:1.75rem;border-radius:50%;background:linear-gradient(135deg,#7A45AA,#5B2A86);color:#fff;font-style:normal;font-weight:800;font-size:.75rem;display:grid;place-items:center}
.t-ph-h b{display:block;font-size:.8125rem}
.t-ph-h span{font-size:.6875rem;color:#6E6579}
.t-trk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:.125rem 0 .25rem}
.t-trk-s{position:relative;display:grid;justify-items:center;gap:.25rem;font-size:.6875rem;font-weight:700;color:#8A7F96}
.t-trk-s b{position:relative;z-index:1;width:.875rem;height:.875rem;border-radius:50%;border:2px solid #E3D6F1;background:#fff}
.t-trk-s:not(.last)::after{content:"";position:absolute;top:.375rem;left:calc(50% + .5rem);right:calc(-50% + .5rem);height:2px;background:#E9E3F0}
.et-sc.play .t-trk-s{animation:tTrk .01s linear forwards;animation-delay:var(--d)}
.et-sc.play .t-trk-s b{animation:tDot .45s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d)}
@keyframes tTrk{to{color:#1F7A4D}}
@keyframes tDot{to{background:#2FA36B;border-color:#2FA36B;transform:scale(1.1)}}

/* hand it over: one ticket, a paid stamp, done */
.t-ticket{width:min(19rem,100%);padding:1rem;display:grid;gap:.5rem;font-size:.8125rem}
.t-li{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.t-tot{font-weight:800;font-size:.9375rem}
.t-perf{height:0;border-top:2px dashed #E6E0EE;margin:.25rem -1rem}
.t-tips{display:flex;gap:.25rem}
.t-tips i{font-style:normal;font-size:.6875rem;font-weight:700;padding:.1875rem .4375rem;border-radius:8px;border:1px solid #E6E0EE;color:#6E6579}
.t-tips i.on{background:#5B2A86;border-color:#5B2A86;color:#fff}
.t-stamp-w{justify-self:center}
.t-stamp{display:inline-flex;align-items:center;gap:.375rem;margin-top:.25rem;padding:.375rem .75rem;border:2px solid #1F7A4D;border-radius:8px;color:#1F7A4D;font-weight:800;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-4deg)}
.t-stamp .et-ico{width:.9375rem;height:.9375rem}
.et-sc.play .t-stamp-w{animation:tStampIn .5s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d)}
@keyframes tStampIn{0%{opacity:0;transform:scale(1.8)}60%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:none}}
.t-ok{margin:0;display:flex;align-items:center;justify-content:center;gap:.375rem;font-size:.75rem;font-weight:600;color:#1F7A4D}
.t-ok .et-ico{width:.875rem;height:.875rem}

/* bring them back: the review they left when asked, beside the reason to come again */
.t-pair{width:min(30rem,100%);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:.625rem;align-items:stretch}
.t-rev{padding:.875rem;display:grid;gap:.5rem;align-content:start}
.t-rev-h{display:flex;align-items:center;gap:.5rem}
.t-rev-h i{width:1.75rem;height:1.75rem;border-radius:50%;background:linear-gradient(135deg,#F4A99B,#F2C14E);color:#fff;font-style:normal;font-weight:800;font-size:.6875rem;display:grid;place-items:center;flex:none}
.t-rev-h b{display:block;font-size:.8125rem}
.t-rev-h .t-stars{font-size:.75rem}
.t-g{margin-left:auto;width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid #E6E0EE;display:grid;place-items:center;font-size:.6875rem;font-weight:800;color:#4285F4}
.t-rev-q{margin:0;font-size:.875rem;font-weight:600;line-height:1.4;color:#22132F}
.t-rev-a{margin:0;font-size:.6875rem;color:#8A7F96}
.t-pass{border-radius:18px;padding:.875rem;display:grid;gap:.5rem;align-content:start;color:#fff;background:radial-gradient(120% 90% at 100% 0%,#9B6CC8,transparent 60%),linear-gradient(160deg,#5B2A86,#3A1858);box-shadow:0 1rem 2rem -1.25rem rgba(58,24,88,.7);text-align:left}
.t-pass-h{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.t-pass-h b{font-size:.8125rem}
.t-pass-h span{font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#E9C46A}
.t-pass p{margin:0;font-size:.75rem;color:rgba(255,255,255,.8)}
.t-pass .t-pass-big{font-size:.9375rem;font-weight:700;color:#fff;line-height:1.3}
.t-pass-btn{justify-self:start;font-size:.75rem;font-weight:700;color:#3A2400;background:#F2C14E;border-radius:8px;padding:.375rem .625rem}
.t-stamps{display:grid;grid-template-columns:repeat(6,1fr);gap:.3125rem}
.t-stamps i{aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(255,255,255,.45)}
.t-stamps i.s{border:0;background:#F2C14E;opacity:0;transform:scale(.4)}
.et-sc.play .t-stamps i.s{animation:tStamp .4s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d)}

/* watch it grow: one customer's spend, month by month */
.t-ltv .t-who > div{display:grid;gap:.0625rem}
.t-ltv .t-who .t-mut{font-size:.75rem}
.t-tag{margin-left:auto;font-size:.6875rem;font-weight:700;color:#5B2A86;background:#F3EEF8;border-radius:8px;padding:.1875rem .5rem}
.t-bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;align-items:end;height:6rem;padding-top:.25rem;border-bottom:1px solid #EFEAF5}
.t-bar{height:100%;display:grid;grid-template-rows:1fr auto;justify-items:center;gap:.25rem}
.t-bar i{align-self:end;width:70%;height:0;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#9B6CC8,#5B2A86)}
.t-bar:last-child i{background:linear-gradient(180deg,#F7D27A,#E2AE34)}
.t-bar span{font-size:.625rem;color:#6E6579;transform:translateY(1.125rem)}
.t-bars{margin-bottom:1rem}
.et-sc.play .t-bar i{animation:tGrow .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d)}
@keyframes tGrow{to{height:var(--h)}}
.t-tip{margin:0;display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#5F5668;padding:.5rem .625rem;border-radius:12px;background:#FBF8FE;border:1px solid #F1ECF6}
.t-tip i{flex:none;width:.875rem;height:.875rem;border-radius:50%;background:radial-gradient(circle at 50% 50%,#F2C14E 28%,transparent 32%),radial-gradient(circle at 35% 30%,#9B6CC8,#5B2A86 60%)}
.et-sc.still .t-trk-s{color:#1F7A4D}.et-sc.still .t-trk-s b{background:#2FA36B;border-color:#2FA36B}
.et-sc.still .t-stamp-w{opacity:1;transform:none}.et-sc.still .t-stamps i.s{opacity:1;transform:none}.et-sc.still .t-bar i{height:var(--h)}

/* phones: the preview sits on top as a short strip of the newest piece, the chat below it */
@media (max-width:820px){
  .et-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,40%) minmax(0,1fr)}
  .et-live{order:-1;border-bottom:1px solid #EFEAF5}
  .et-live-h{padding:.5rem .875rem}
  .et-live-b{padding:.75rem}
  .et-chat{border-right:0}
  .et-thread{padding:.875rem .875rem .5rem}
  .et-ask{margin:.5rem .75rem calc(.625rem + env(safe-area-inset-bottom,0px))}
  .k-rows{grid-template-columns:minmax(0,1fr)}
  .et-save .grid{grid-template-columns:minmax(0,1fr)}.et-save .grid label:last-child{grid-column:auto}
  .t-pair{grid-template-columns:minmax(0,1fr)}
  .et.full{border-radius:18px}
}
/* phones: full screen edge to edge; no expand button (it's always full) and no second send arrow at the top; inputs at
   16px so iPhones don't zoom in when they're tapped */
@media (max-width:699px){
  /* on phones elloo goes straight to full screen: no sliding out wide in the page first (it reached past the screen's
     right side for a moment, and the phone zoomed out to show it, then back in) */
  .et.et-talking:not(.full){left:0;margin-left:0;width:100%;transition:none}
  .et.full{border-radius:0;box-shadow:none}
  .et.full .et-max,.et.full .et-go{display:none!important}
  .et.full .et-q{padding-top:calc(.5625rem + env(safe-area-inset-top,0px));min-height:3.5rem}
  .et.full .et-q input{font-size:1rem}
  .et-ask input,.sv-row input,.et-myname input{font-size:1rem}
  /* slim bars, so the chat gets the room (Omar picked this, Oct 9) */
  /* the top line is the chat's title: the first thing they asked, small, beside a round close button (Omar's pick, Oct 9) */
  .et.full .et-q{min-height:0;gap:.5rem;padding:.375rem .5rem .375rem 1rem;padding-top:calc(.375rem + env(safe-area-inset-top,0px))}
  .et.full .et-q > .et-ico,.et.full .et-q input{display:none}
  .et.full .et-title{display:block;flex:1;min-width:0;border:0;background:none;padding:.375rem 0;text-align:left;cursor:pointer;font:600 .875rem/1.3 "Inter",sans-serif;color:#5F5668;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* a tap on the title: the box to type a new question comes back in its place */
  .et.full.edit .et-title{display:none}
  .et.full.edit .et-q > .et-ico{display:block}
  .et.full.edit .et-q input{display:block;padding:.375rem 0}
  .et.full .et-title:empty::before{content:"elloo"}
  .et.full .et-x{width:2rem;height:2rem;border-radius:12px}
  .et.full .et-ask{margin:.375rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px));padding:.1875rem .1875rem .1875rem .75rem}
  .et.full .et-ask input{padding:.375rem 0}
  .et.full .et-ask button{width:2.125rem;height:2.125rem}
  .et.full .et-status.on{margin-top:.25rem;height:1.5rem}
  /* keyboard up (the "kb" class, set by fit() in elloo-tour.js): no room kept for the home bar the keyboard covers, and
     the top bar tucks away, leaving a small round close button in the corner */
  .et.full.kb .et-ask{margin-bottom:.5rem}
  .et.full.kb:not(.live-open) .et-q{position:absolute;top:.5rem;right:.5rem;z-index:6;border:0;padding:0;background:none;min-height:0}
  .et.full.kb:not(.live-open) .et-q > :not(.et-x){display:none}
  .et.full.kb:not(.live-open) .et-x{width:2rem;height:2rem;border-radius:12px;border-color:#EEE8F5;background:rgba(255,255,255,.94);box-shadow:0 .25rem .75rem -.25rem rgba(58,24,88,.35)}
  /* behind it, solid white instead of a see-through tint, reaching past the screen's edges: with the keyboard up, elloo
     is sized to the part above the keyboard, and the keyboard and Safari's bar below are see-through, so the page
     showed through under the box to type in (Omar, Oct 9) */
  .et-veil{inset:-100vh 0;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* phones, once elloo is full screen: the page under it is hidden and held where it was (lock() in elloo-tour.js), so
   iPhone can't scroll it with the keyboard up, and nothing of it can show around elloo */
html.et-lock,html.et-lock body{background:#fff}
html.et-lock body{position:fixed;left:0;right:0;top:var(--lock-y,0);visibility:hidden}
html.et-lock .et.full{visibility:visible;overscroll-behavior:contain}
@media (max-width:480px){.k-two{grid-template-columns:minmax(0,1fr)}.et-pilot .sv-row{flex-direction:column}.et-pilot .send{padding:.75rem 1rem}}
/* phones: the preview is an artifact. A card in the message opens it over the chat, full size (like the Claude app);
   the chat has the whole screen the rest of the time */
.et-live-tog,.et-art{display:none}
@media (max-width:699px){
  .et.full .et-body{grid-template-rows:minmax(0,1fr);position:relative}
  .et.full .et-live{position:absolute;inset:0;z-index:5;border:0;transform:translateY(100%);visibility:hidden;box-shadow:0 -1rem 2.5rem -1rem rgba(58,24,88,.3);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
  .et.full.live-open .et-live{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .et.full .et-live-h{flex-wrap:wrap;row-gap:.625rem;column-gap:.75rem;padding:.75rem 1rem .875rem}
  .et.full .et-live-h > span:first-child{flex:1;white-space:normal;font-size:.875rem;line-height:1.35;color:#22132F}
  .et.full .et-pips{order:3;width:100%;margin:0}
  .et.full .et-pips i{flex:1;width:auto}
  .et.full .et-live-tog{display:inline-flex;align-items:center;gap:.25rem;flex:none;font:600 .8125rem "Inter",sans-serif;color:#5B2A86;background:#F3EEF8;border:0;border-radius:12px;padding:.4375rem .75rem .4375rem .5rem;cursor:pointer}
  .et.full .et-live-tog .et-ico{width:1rem;height:1rem}
  .et.full .et-live-b{padding:1rem .875rem calc(1rem + env(safe-area-inset-bottom,0px))}
  .et.full .et-art{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;width:100%;padding:.75rem .875rem;text-align:left;font:inherit;color:#22132F;cursor:pointer;
    background:linear-gradient(135deg,#F7F2FC,#fff 70%);border:1px solid #E6E0EE;border-radius:18px;box-shadow:0 .75rem 1.5rem -1.25rem rgba(58,24,88,.5)}
  .et-art .pg-logo{width:2.5rem;height:2.5rem;font-size:1.0625rem}
  .art-t{display:grid;gap:.1875rem;min-width:0}
  .art-t b{font-size:.9375rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .art-t small{font-size:.8125rem;color:#6E6579;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .art-bar{display:block;height:3px;border-radius:2px;background:#EEE8F5;margin-top:.25rem;overflow:hidden}
  .art-bar i{display:block;height:100%;width:var(--p,4%);background:#5B2A86;border-radius:2px;transition:width .4s}
  .art-go{font-size:.8125rem;font-weight:700;color:#fff;background:#5B2A86;border-radius:999px;padding:.4375rem .875rem}
  .et.full .et-art.ready{border-color:#1D8F4E;background:linear-gradient(135deg,#EAF7EF,#fff 70%);animation:artPop .5s cubic-bezier(.3,1.6,.5,1)}
  .et-art.ready .pg-logo{background:#1D8F4E}
  .et-art.ready .pg-logo svg{width:1.375rem;height:1.375rem;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .et-art.ready .art-bar i{background:#1D8F4E}
  .et-art.ready .art-t small{color:#1D6B3E;font-weight:600}
  .et-art.ready .art-go{background:#1D8F4E;animation:artNudge 1s ease-in-out .6s 3}
}
/* phones: the comparison stacks, one row at a time, ohelloo's answer first and highlighted */
@media (max-width:600px){
  .et-cmp{overflow:visible}
  .et-cmp table,.et-cmp tbody{display:block;min-width:0}
  .et-cmp thead{display:none}
  .et-cmp tr{display:flex;flex-direction:column;gap:.3125rem;padding:.625rem .75rem;border-top:1px solid #F1ECF6}
  .et-cmp tbody tr:first-child{border-top:0}
  .et-cmp tbody th{order:-2;padding:0;border:0;font-size:.8125rem;color:#22132F;white-space:normal}
  .et-cmp td{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.5rem;padding:0;border:0;color:#5F5668}
  .et-cmp td::before{content:attr(data-l);font-weight:600;color:#8A7F96}
  .et-cmp td.us{order:-1;background:#F7F2FC;border-radius:8px;padding:.375rem .5rem;margin:0 -.5rem}
  .et-cmp td.us::before{color:#5B2A86;font-weight:700}
}
@media (max-width:480px){.t-two{grid-template-columns:minmax(0,1fr)}.k-head{grid-template-columns:auto minmax(0,1fr)}.k-pr{grid-column:1 / -1;justify-items:start;text-align:left;grid-template-columns:auto auto;align-items:baseline;gap:.5rem}}
@media (prefers-reduced-motion:reduce){.et *,.et-veil{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}}

/* ---------- hero B (Omar, Oct 14 2026): what we are on the left, ohelloo Work on a laptop and a phone on the right.
   Premium and quiet: one headline, one line, elloo's bar, one promise row. The devices are drawn to the real shapes in
   site/devices.css (MacBook Air screen 2560x1664, iPhone body 1000x2107). The notes arrive once, in story order:
   the job is booked, then it's paid. ---------- */
.et-hero.hb{text-align:left;background:radial-gradient(56rem 44rem at 88% -8%,rgba(205,179,232,.55),transparent 70%),radial-gradient(36rem 30rem at -6% 70%,rgba(242,193,78,.14),transparent 70%),#FBFAFD}
.hero.et-hero.hb > .wrap{max-width:none;padding-inline:0;width:100%;justify-self:stretch}
.et-hero.hb .hero-panel{padding:clamp(2.5rem,5.5vw,4.5rem) 0 0}
.hb-grid{container-type:inline-size;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.75rem;align-items:center;max-width:85rem;margin:0 auto;padding-inline:2.5rem}
.et-hero.hb .hero-top{position:relative;z-index:3;display:flex;flex-direction:column;align-items:stretch;gap:1.375rem;width:auto;min-height:0;margin:0;padding:0;text-align:left}
.et-hero.hb .hero-top > *{margin:0}
.hb-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:0.625rem;padding:0.3125rem 0.75rem 0.3125rem 0.3125rem;border-radius:8px;background:#fff;border:1px solid #E9E3F1;font-size:0.84375rem;color:#3B3346;text-decoration:none;box-shadow:0 1px 2px rgba(34,19,47,.05);transition:border-color .2s}
.hb-chip:hover{border-color:#CDB3E8}
.hb-chip .t{background:#22132F;color:#F2C14E;font-weight:700;font-size:0.71875rem;letter-spacing:.04em;text-transform:uppercase;border-radius:8px;padding:0.1875rem 0.5625rem}
.hb-chip .cs{display:none}
.hb-arr{width:0.875rem;height:0.875rem;fill:none;stroke:#5B2A86;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hb-chip:hover .hb-arr{transform:translateX(2px)}
.brandw{display:inline-flex;align-items:baseline;gap:.22em;white-space:nowrap}
.brandw svg{height:.98em;width:auto;fill:#5B2A86;align-self:center;transform:translateY(-.04em)}
.brandw b{font-weight:700;color:#22132F;letter-spacing:-.01em}
.hb-chip .brandw b::after{content:":";font-weight:600}
.et-hero.hb h1{font-size:clamp(2.75rem,4.9vw,3.875rem);font-weight:800;line-height:1;letter-spacing:-.045em;max-width:none;margin:0;text-wrap:balance}
.et-hero.hb .hero-panel .lede{font-size:1.1875rem;line-height:1.55;color:#6E6579;max-width:33em;margin:0;text-wrap:pretty}
.et-hero.hb .lede .brandw svg{height:1.05em}
.hb .et-shell{width:100%;max-width:none;margin:0}
.hb .et-hint,.hb .et-try{display:none!important}
.et-hero.hb .hero-promise{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0.375rem 1.125rem;margin:-0.25rem 0 0;font-size:0.875rem;font-weight:500;color:#6E6579}
.et-hero.hb .hero-promise li::before{background:#5B2A86}
.et-hero.hb .hero-promise a{text-decoration:none}
/* while elloo talks, its panel takes the hero's full width and the devices step back */
.hb .et.et-talking:not(.full){left:0;margin-left:0;width:100cqw}
.hb-grid:has(.et.et-talking:not(.full)) .hb-dev{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
/* the devices */
.hb-dev{position:relative;z-index:1;padding:1.25rem 0 2.75rem;margin-right:-4.5rem;transition:opacity .3s}
.hb-laptop{container-type:inline-size;width:100%}
.hb-lid{position:relative;margin-inline:4cqw;padding:2.2cqw 1.9cqw 2.4cqw;border-radius:3.2cqw 3.2cqw .9cqw .9cqw;background:#0B0610;box-shadow:0 2.5rem 5rem -1.875rem rgba(34,19,47,.55)}
.hb-lid::before{content:"";position:absolute;top:.75cqw;left:50%;width:.8cqw;height:.8cqw;margin-left:-.4cqw;border-radius:50%;background:#2A2235}
.hb-screen{aspect-ratio:2560/1664;overflow:hidden;border-radius:.5cqw;background:#FBFAFD}
.hb-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.hb-base{position:relative;height:2.6cqw;border-radius:0 0 2.4cqw 2.4cqw/0 0 2cqw 2cqw;background:linear-gradient(#E3DEEA,#A9A3B4)}
.hb-base::before{content:"";position:absolute;top:0;left:50%;width:16%;height:45%;margin-left:-8%;border-radius:0 0 1cqw 1cqw;background:#BDB7C7}
.hb-phone{container-type:inline-size;position:absolute;right:-0.5rem;bottom:0;width:31%}
.hb-pbody{position:relative;aspect-ratio:1000/2107;padding:2.6cqw;border-radius:16.5cqw;background:#0B0610;box-shadow:0 1.875rem 3.75rem -1.125rem rgba(34,19,47,.6),0 0 0 1.5px #3A3046 inset}
.hb-pscreen{position:relative;width:100%;height:100%;border-radius:14cqw;overflow:hidden;background:#F2F0F6}
.hb-pscreen img{position:absolute;left:0;top:10.5%;width:100%;height:auto;display:block}
.hb-sb{position:absolute;inset:0 0 auto;height:10.5%;display:flex;align-items:flex-start;justify-content:space-between;padding:5.5cqw 9cqw 0;font:600 5.4cqw/1 "Inter",sans-serif;color:#22132F;background:#F2F0F6}
.hb-island{position:absolute;z-index:3;top:5.4cqw;left:50%;width:31cqw;height:9cqw;margin-left:-15.5cqw;border-radius:5cqw;background:#0B0610}
.hb-note{position:absolute;z-index:4;display:flex;align-items:center;gap:0.6875rem;padding:0.625rem 0.875rem 0.625rem 0.625rem;border-radius:12px;font-size:0.8125rem;line-height:1.3;white-space:nowrap;box-shadow:0 1.125rem 2.5rem -0.875rem rgba(34,19,47,.6)}
.hb-note b{display:block;font-size:0.84375rem}
.hb-note small{display:block;font-size:0.75rem}
.hb-dot{display:grid;place-items:center;flex:none;width:1.875rem;height:1.875rem;border-radius:8px}
.hb-dot svg{width:1rem;height:1rem;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hb-booked{left:31%;top:-1.875rem;background:rgba(34,19,47,.95);color:#fff}
.hb-booked small{color:rgba(255,255,255,.66)}
.hb-booked .hb-dot{background:#F2C14E} .hb-booked .hb-dot svg{stroke:#3A2400}
.hb-paid{left:30%;bottom:0.375rem;background:rgba(255,255,255,.97);color:#22132F;border:1px solid #E9E3F1}
.hb-paid small{color:#6E6579}
.hb-paid .hb-dot{background:#E3F3EA} .hb-paid .hb-dot svg{stroke:#1F7A4D}
/* the story plays once: the devices settle, the job is booked, then it's paid */
@media (prefers-reduced-motion:no-preference){
  .js .hb-laptop{animation:hbSettle .9s cubic-bezier(.2,.7,.2,1) both}
  .js .hb-phone{animation:hbSettle .9s cubic-bezier(.2,.7,.2,1) .15s both}
  .js .hb-booked{animation:hbPop .55s cubic-bezier(.2,.8,.25,1.15) 1.1s both}
  .js .hb-paid{animation:hbPop .55s cubic-bezier(.2,.8,.25,1.15) 2s both}
}
@keyframes hbSettle{from{opacity:0;transform:translateY(18px)}}
@keyframes hbPop{from{opacity:0;transform:translateY(10px) scale(.96)}}
.hb-under{padding:0.5rem 1.25rem 0;display:grid;justify-items:center}
.hb-under .et-rail{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
/* tablets and phones: one column, the devices under the words, the booking note above them */
@media (max-width:980px){
  .hb-grid{grid-template-columns:minmax(0,1fr);gap:1.75rem;padding-inline:1.25rem}
  .et-hero.hb .hero-top{order:0}
  .hb-dev{order:1;margin-right:0;padding:7.5rem 0 0.625rem;max-width:40rem;width:100%;justify-self:center}
  .hb-phone{width:34%;right:0}
  .hb-booked{left:auto;right:3%;top:0.5rem;max-width:94%}
  .hb-paid{display:none}
}
@media (max-width:640px){
  .et-hero.hb .hero-panel{padding-top:1.75rem}
  .et-hero.hb .hero-top{gap:1rem}
  .hb-chip{font-size:0.78125rem;gap:0.5rem;white-space:nowrap}
  .hb-chip .cl{display:none} .hb-chip .cs{display:inline}
  .et-hero.hb h1{font-size:clamp(2.25rem,10.6vw,2.75rem);letter-spacing:-.04em}
  .et-hero.hb .hero-panel .lede{font-size:1rem}
  .et-hero.hb .hero-promise{display:flex;font-size:0.8125rem;gap:0.25rem 0.875rem;margin-top:-0.125rem}
  .hb-dev{padding-top:7.375rem}
  .hb-phone{width:40%;right:-0.25rem}
  .hb-note{font-size:0.75rem;padding:0.5rem 0.6875rem 0.5rem 0.5rem;max-width:calc(100% - 0.5rem);white-space:normal}
  .hb-booked small{display:none}
}