/* Host row (Kairos Automations 04): text left, film right.
   Variant C "website stage": the practice website is the stage the whole time, night → morning.
   Everything scoped under #host, keyframes prefixed h-, film sized in cqw of #hframe (5:4). */

/* ---------- text column (= Vouch row, re-scoped) ---------- */
#host{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}
@media (max-width:900px){#host{grid-template-columns:1fr}}
#host{--ink:#080808;--paper:#fcfcfc;--mute:#8d8d8d;--line:#262626;--red:#ff2d3f;
  --sans:'Host Grotesk','Helvetica Neue',Arial,sans-serif;--serif:'Gambetta','Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.25,.64,1);--gut:clamp(16px,2.2vw,32px)}
#host .txt{max-width:560px;order:-1}
@media (max-width:900px){#host .txt{order:0}}
#host .t-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
#host .e-logo{display:flex;align-items:center;gap:12px}
#host .e-logo img{height:18px}
#host .e-logo span{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
#host .h{font-weight:500;text-transform:uppercase;font-size:clamp(34px,3.7vw,62px);line-height:.92;letter-spacing:-.035em;margin-top:28px}
#host .h em{font-size:.62em;vertical-align:.22em;margin-right:.08em}
#host .intro{font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:rgba(252,252,252,.78);margin-top:22px}
#host .intro em{color:var(--paper)}
#host .caps{list-style:none;margin-top:30px;border-top:1px solid var(--line);padding:0}
#host .caps li{display:grid;grid-template-columns:1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
#host .caps .n{display:none}
#host .caps li>div{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .9s cubic-bezier(.65,0,.35,1)}
#host .caps li:hover>div,#host .caps li.on>div{grid-template-rows:auto 1fr}
#host .caps b{font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;transition:color .6s ease}
#host .caps p{font-size:13.5px;color:var(--mute);min-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .5s var(--ease)}
#host .caps p::before{content:"";display:block;height:2px}
#host .caps li:hover b,#host .caps li.on b{color:var(--red)}
#host .caps li:hover p,#host .caps li.on p{opacity:1;transform:none;transition:opacity .6s ease .25s,transform .8s var(--ease) .2s}
#host.noanim .caps li>div{transition:grid-template-rows .9s cubic-bezier(.65,0,.35,1)!important}
#host.noanim .caps b{transition:color .6s ease!important}
#host.noanim .caps p{transition:opacity .35s ease,transform .5s var(--ease)!important}
#host .txt .btn-line{margin-top:30px}
#host .media{position:relative}
#host .frame{position:relative;width:100%;aspect-ratio:5/4;container-type:inline-size;isolation:isolate}
#host.noanim .frame *,#host.noanim .frame *::before,#host.noanim .frame *::after{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){#host *{transition:none!important;animation:none!important}}

/* ============================================================
   The film. One stage: the practice website in a browser window.
   Night (cool, dimmed, only the chat lit) → morning (warm light),
   the owner's ledger + phone slide over it, then the site returns.
   ============================================================ */
#host .frame{--acc:#E5533D;--acc-i:#C8412C;--acc-s:rgba(229,83,61,.10);--ok:#3F8A5E;
  --a-bg:#F3F3F1;--a-card:#fff;--a-ink:#141414;--a-ink2:#5E5E5B;--a-ink3:#93938F;--a-line:rgba(20,20,20,.08);--a-line2:rgba(20,20,20,.14);--a-fill:#EFEFEC;
  --s-bg:#FBFAF7;--s-ink:#23302E;--s-mute:#6B7472;--s-tint:#E9EFEC;
  --io:cubic-bezier(.65,0,.35,1);--sheet:cubic-bezier(.32,.72,0,1);
  font-family:Geist,'Host Grotesk',system-ui,sans-serif;color:var(--a-ink);-webkit-font-smoothing:antialiased}
#host .frame svg{display:block}

/* clock line above the browser */
#host .h-clock{position:absolute;z-index:9;left:2.4cqw;top:.6cqw;height:4.6cqw;display:flex;align-items:center;gap:1.1cqw;color:var(--paper);font-family:var(--sans);font-size:1.9cqw;letter-spacing:-.01em}
#host .h-clock .ic{position:relative;width:2.2cqw;height:2.2cqw}
#host .h-clock .ic svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .8s,transform 1.2s var(--ease)}
#host .h-clock .ic .sun{opacity:0;transform:rotate(-60deg) scale(.6)}
#host .h-clock.am .ic .sun{opacity:1;transform:none}
#host .h-clock.am .ic .moon{opacity:0;transform:rotate(40deg) scale(.6)}
#host .h-clock .tx{position:relative;height:2.4cqw;overflow:hidden;min-width:24cqw}
#host .h-clock .tx span{position:absolute;left:0;top:0;line-height:2.4cqw;white-space:nowrap;transition:transform .9s var(--io),opacity .6s}
#host .h-clock .tx span b{font-weight:500}
#host .h-clock .tx span i{font-style:normal;color:var(--mute);margin-left:.5em;font-variant-numeric:tabular-nums}
#host .h-clock .tx .t2{transform:translateY(110%);opacity:0}
#host .h-clock.am .tx .t1{transform:translateY(-110%);opacity:0}
#host .h-clock.am .tx .t2{transform:none;opacity:1}

/* browser window */
#host .h-win{position:absolute;left:1.6cqw;top:6.2cqw;width:96.8cqw;height:72.4cqw;border-radius:1.6cqw;overflow:hidden;background:var(--s-bg);box-shadow:0 0 0 .1cqw rgba(255,255,255,.08)}
#host .h-bar{position:relative;height:4.2cqw;display:flex;align-items:center;gap:.7cqw;padding:0 1.6cqw;background:#ECEAE5;border-bottom:.1cqw solid rgba(0,0,0,.06)}
#host .h-bar i{width:1cqw;height:1cqw;border-radius:50%;background:#CFCBC4}
#host .h-bar .url{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.6cqw;height:2.6cqw;padding:0 7cqw;border-radius:.8cqw;background:#F7F6F3;font-size:1.15cqw;color:#6b6762}
#host .h-bar .url svg{width:1.05cqw;height:1.05cqw}

/* the practice website */
#host .h-site{position:absolute;left:0;right:0;top:4.2cqw;bottom:0;padding:2.4cqw 3.4cqw 0;color:var(--s-ink)}
#host .h-nav{display:flex;align-items:center;gap:2.4cqw;font-size:1.2cqw;color:var(--s-mute)}
#host .h-nav b{margin-right:auto;font-size:1.5cqw;font-weight:600;color:var(--s-ink);letter-spacing:-.015em;display:flex;align-items:center;gap:.8cqw}
#host .h-nav b i{width:2.3cqw;height:2.3cqw;border-radius:.7cqw;background:var(--s-ink);display:grid;place-items:center}
#host .h-nav b i svg{width:1.4cqw;height:1.4cqw}
#host .h-hero{display:grid;grid-template-columns:1fr 31cqw;gap:4cqw;margin-top:4.4cqw}
#host .h-h1{font-size:4.5cqw;line-height:1.02;font-weight:600;letter-spacing:-.04em}
#host .h-lead{font-size:1.4cqw;line-height:1.45;color:var(--s-mute);margin-top:1.8cqw;max-width:42cqw}
#host .h-cta{display:flex;align-items:center;gap:1.6cqw;margin-top:2.4cqw}
#host .h-cta span{font-size:1.25cqw;font-weight:500;color:#fff;background:var(--s-ink);padding:1.1cqw 2cqw;border-radius:3cqw}
#host .h-cta small{font-size:1.15cqw;color:var(--s-mute)}
#host .h-cards{position:absolute;left:3.4cqw;bottom:3.4cqw;width:55cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}
#host .h-card{position:relative;background:var(--s-tint);border-radius:1.2cqw;padding:1.4cqw 1.5cqw 1.5cqw;min-height:10.6cqw;transition:background .6s,box-shadow .6s,transform .7s var(--spring)}
#host .h-card .ic{width:2.6cqw;height:2.6cqw;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--s-ink)}
#host .h-card .ic svg{width:1.45cqw;height:1.45cqw}
#host .h-card b{display:block;font-size:1.3cqw;font-weight:600;margin-top:1.2cqw;letter-spacing:-.01em}
#host .h-card span{display:block;font-size:1.1cqw;line-height:1.38;color:var(--s-mute);margin-top:.3cqw}
#host .h-card .pr{color:var(--s-ink);font-weight:500}
/* the page Host is reading rises above the night and gets a ring */
#host .h-card.read{z-index:4;background:#fff;box-shadow:0 0 0 .22cqw var(--acc),0 1.4cqw 3cqw rgba(0,0,0,.28);transform:translateY(-.5cqw)}
#host .h-card .src{position:absolute;right:1cqw;top:1cqw;font-size:.95cqw;font-weight:500;color:var(--acc-i);opacity:0;transform:translateY(.4cqw);transition:opacity .4s,transform .6s var(--ease)}
#host .h-card.read .src{opacity:1;transform:none}

/* full-bleed practice footage behind nav + hero (real stock footage, Mixkit) */
#host .h-bgv{position:absolute;left:0;right:0;top:0;height:49cqw;overflow:hidden;background:#2b3236}
#host .h-bgv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;display:block}
#host .h-bgv::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,18,22,.72) 0%,rgba(14,18,22,.45) 38%,rgba(14,18,22,.08) 70%),linear-gradient(180deg,rgba(14,18,22,.35) 0%,rgba(14,18,22,0) 22%)}
#host .h-nav,#host .h-hero{position:relative}
#host .h-nav,#host .h-nav b{color:#fff}
#host .h-nav span{color:rgba(255,255,255,.82)}
#host .h-nav b i{background:#fff}
#host .h-nav b i svg{stroke:var(--s-ink)}
#host .h-hero{grid-template-columns:1fr}
#host .h-hero .h-h1{color:#fff}
#host .h-hero .h-lead,#host .h-hero .h-cta small{color:rgba(255,255,255,.8)}
#host .h-hero .h-cta span{background:#fff;color:var(--s-ink)}
#host .h-hero .h-hours,#host .h-hero .h-hours b{color:rgba(255,255,255,.85)}
#host .h-hours{display:flex;gap:2cqw;margin-top:2.6cqw;font-size:1.1cqw;color:var(--s-mute)}
#host .h-hours b{color:var(--s-ink);font-weight:500}

/* light layers over the site (the chat widget sits above them) */
#host .h-night{position:absolute;inset:0;z-index:3;background:linear-gradient(160deg,#1c2645,#2a3658);mix-blend-mode:multiply;transition:opacity 2.2s ease;pointer-events:none}
#host .h-sunl{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity 2.4s ease;
  background:radial-gradient(60cqw 44cqw at 80% 4%,rgba(255,210,160,.2),transparent 70%),linear-gradient(115deg,transparent 34%,rgba(255,232,200,.08) 52%,transparent 70%)}
#host .stage-am .h-night{opacity:0}
#host .stage-am .h-sunl{opacity:1}

/* ---------- the Host chat widget (as in the Host app) ---------- */
#host .h-launch{position:absolute;right:2.2cqw;bottom:2.2cqw;z-index:5;width:5.4cqw;height:5.4cqw;border-radius:50%;background:var(--acc);display:grid;place-items:center;color:#fff;box-shadow:0 .8cqw 2cqw rgba(0,0,0,.25);transition:transform .45s var(--spring)}
#host .h-launch svg{position:absolute;width:2.3cqw;height:2.3cqw;transition:opacity .3s,transform .5s var(--ease)}
#host .h-launch .x{opacity:0;transform:rotate(-90deg)}
#host .h-launch.open .x{opacity:1;transform:none}
#host .h-launch.open .c{opacity:0;transform:rotate(90deg)}
#host .h-launch.press{transform:scale(.88)}
#host .h-chat{position:absolute;right:2.2cqw;bottom:9cqw;z-index:5;width:37cqw;height:56.4cqw;border-radius:1.8cqw;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1.6cqw 5cqw rgba(0,0,0,.35);
  transform-origin:92% 100%;transform:translateY(2cqw) scale(.92);opacity:0;transition:transform .7s var(--sheet),opacity .45s}
#host .h-chat.on{transform:none;opacity:1}
#host .h-chd{flex:none;background:var(--acc);color:#fff;padding:1.6cqw 1.8cqw;display:flex;align-items:center;gap:1.2cqw}
#host .h-chd .av{width:3.4cqw;height:3.4cqw;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:1.35cqw;font-weight:600}
#host .h-chd b{display:block;font-size:1.45cqw;font-weight:600;letter-spacing:-.01em}
#host .h-chd .sb{position:relative;display:block;height:1.6cqw;overflow:hidden;margin-top:.2cqw;min-width:18cqw}
#host .h-chd .sb span{position:absolute;left:0;top:0;font-size:1.12cqw;line-height:1.6cqw;opacity:.86;white-space:nowrap;transition:transform .7s var(--io),opacity .5s}
#host .h-chd .sb .s2{transform:translateY(110%);opacity:0}
#host .h-chd.lang .sb .s1{transform:translateY(-110%);opacity:0}
#host .h-chd.lang .sb .s2{transform:none;opacity:.86}
#host .h-chd .lg{margin-left:auto;font-size:1.05cqw;font-weight:600;padding:.4cqw .9cqw;border-radius:2cqw;background:rgba(255,255,255,.2);opacity:0;transform:scale(.6);transition:opacity .4s,transform .6s var(--spring)}
#host .h-chd.lang .lg{opacity:1;transform:none}
#host .h-ml{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 1.6cqw;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3cqw);mask-image:linear-gradient(180deg,transparent 0,#000 3cqw)}
#host .h-m{flex:none;max-height:40cqw;margin-top:1cqw;transition:max-height .8s var(--ease),margin .8s var(--ease),opacity .5s,transform .7s var(--spring)}
#host .h-m.hide{max-height:0;margin-top:0;opacity:0;transform:translateY(1.4cqw)}
#host .h-m .bb{display:inline-block;max-width:86%;padding:1cqw 1.3cqw;border-radius:1.5cqw;border-bottom-left-radius:.5cqw;font-size:1.26cqw;line-height:1.42;background:var(--a-fill);color:var(--a-ink)}
#host .h-m.me{text-align:right}
#host .h-m.me .bb{text-align:left;background:var(--acc);color:#fff;border-radius:1.5cqw;border-bottom-right-radius:.5cqw}
#host .h-m .bb .cur{display:inline-block;width:.14cqw;height:1.35cqw;background:currentColor;vertical-align:-.25cqw;margin-left:.1cqw;animation:h-bl 1s infinite}
@keyframes h-bl{50%{opacity:0}}
#host .h-dots{display:inline-flex;gap:.4cqw;padding:1.2cqw 1.4cqw;border-radius:1.5cqw;border-bottom-left-radius:.5cqw;background:var(--a-fill)}
#host .h-dots i{width:.7cqw;height:.7cqw;border-radius:50%;background:#a9a9a4;animation:h-dot 1.1s infinite}
#host .h-dots i:nth-child(2){animation-delay:.15s}
#host .h-dots i:nth-child(3){animation-delay:.3s}
@keyframes h-dot{0%,60%,100%{opacity:.35}30%{opacity:1}}
#host .h-read{display:inline-flex;align-items:center;gap:.5cqw;margin-left:.9cqw;font-size:1.05cqw;color:var(--a-ink3);vertical-align:middle;white-space:nowrap}
#host .h-read svg{width:1.2cqw;height:1.2cqw;flex:none}
#host .h-srcs{display:flex;flex-wrap:wrap;gap:.6cqw;margin-top:.7cqw}
#host .h-src{display:inline-flex;align-items:center;gap:.5cqw;font-size:1.02cqw;color:var(--a-ink2);border:.1cqw solid var(--a-line2);border-radius:2cqw;padding:.4cqw .9cqw .4cqw .7cqw;opacity:0;transform:translateY(.6cqw);transition:opacity .4s,transform .6s var(--spring)}
#host .h-src svg{width:1.1cqw;height:1.1cqw;color:var(--acc)}
#host .h-src.on{opacity:1;transform:none}
#host .h-src.mine{border-color:rgba(229,83,61,.4);color:var(--acc-i);background:var(--acc-s)}
/* the enquiry card inside the chat */
#host .h-form{border:.1cqw solid var(--a-line2);border-radius:1.4cqw;padding:.4cqw 1.3cqw 1.2cqw;background:#fff}
#host .h-form .r{display:grid;grid-template-columns:7.4cqw 1fr;align-items:center;gap:.8cqw;padding:.85cqw 0;border-bottom:.1cqw solid var(--a-line);font-size:1.18cqw}
#host .h-form .r span{color:var(--a-ink3);font-size:1.05cqw}
#host .h-form .r b{font-weight:500;white-space:nowrap;overflow:hidden;min-height:1.6cqw}
#host .h-form .r b .cur{display:inline-block;width:.14cqw;height:1.3cqw;background:var(--acc);vertical-align:-.2cqw;animation:h-bl 1s infinite}
#host .h-form .go{display:flex;justify-content:flex-end;margin-top:1cqw}
#host .h-form .go span{font-size:1.15cqw;font-weight:500;color:#fff;background:var(--acc);padding:.75cqw 1.8cqw;border-radius:2cqw;transition:transform .3s var(--spring),background .4s}
#host .h-form .go span.press{transform:scale(.9)}
#host .h-form .go span.done{background:var(--ok)}
#host .h-ok{display:flex;align-items:center;gap:.8cqw;font-size:1.12cqw;color:var(--a-ink2)}
#host .h-ok i{flex:none;width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--ok);display:grid;place-items:center}
#host .h-ok i svg{width:1.2cqw;height:1.2cqw}
#host .h-in{flex:none;margin:1.2cqw 1.6cqw 1.6cqw;height:4.4cqw;border-radius:1.2cqw;background:var(--a-fill);display:flex;align-items:center;padding:0 .6cqw 0 1.4cqw;font-size:1.2cqw;color:var(--a-ink3)}
#host .h-in .tx{flex:1;white-space:nowrap;overflow:hidden;display:flex;justify-content:flex-end}
#host .h-in .tx>span{flex:none}
#host .h-in .tx.ph{justify-content:flex-start}
#host .h-in .tx.ty{color:var(--a-ink)}
#host .h-in .tx .cur{display:inline-block;width:.14cqw;height:1.35cqw;background:var(--acc);vertical-align:-.25cqw;animation:h-bl 1s infinite}
#host .h-in .snd{flex:none;width:3.2cqw;height:3.2cqw;border-radius:.9cqw;background:var(--acc);display:grid;place-items:center;margin-left:.8cqw;transition:transform .3s var(--spring)}
#host .h-in .snd svg{width:1.5cqw;height:1.5cqw}
#host .h-in .snd.press{transform:scale(.85)}

/* the visitor's pointer */
#host .h-ptr{position:absolute;left:0;top:0;z-index:9;width:2.4cqw;height:2.4cqw;pointer-events:none;opacity:0;transition:transform 1.3s cubic-bezier(.45,0,.2,1),opacity .4s}
#host .h-ptr svg{width:100%;height:100%;filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.4))}
#host .h-ptr.on{opacity:1}
#host .h-ptr.tap svg{transform:scale(.86);transition:transform .15s}

/* ---------- morning: scrim, the owner's ledger + phone ---------- */
#host .h-scrim{position:absolute;inset:0;z-index:6;background:rgba(8,8,8,.52);opacity:0;transition:opacity 1s ease;pointer-events:none}
#host .h-scrim.on{opacity:1}
#host .h-led{position:absolute;left:4.4cqw;top:12.6cqw;z-index:7;width:52cqw;padding:2.4cqw 2.6cqw 2.2cqw;border-radius:2cqw;background:var(--a-card);color:var(--a-ink);font-size:1cqw;box-shadow:0 3cqw 8cqw rgba(0,0,0,.5);
  opacity:0;transform:translateX(-6cqw);transition:transform 1.1s var(--sheet),opacity .7s}
#host .h-led.on{opacity:1;transform:none}
#host .h-led .tp{display:flex;align-items:center;gap:1.2em}
#host .h-led .tp img{height:1.9em}
#host .h-led .tp span{margin-left:auto;font-size:1.25em;color:var(--a-ink3)}
#host .h-led .lb{font-size:1.3em;color:var(--a-ink2);margin-top:2.2em}
#host .h-led .big2{display:flex;align-items:baseline;gap:.5em;margin-top:.6em}
#host .h-led .big2 .n{font-size:6.4em;font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;display:inline-block}
#host .h-led .big2 .n.pop{animation:h-pop .7s var(--spring)}
@keyframes h-pop{0%{transform:translateY(25%);opacity:.2}100%{transform:none;opacity:1}}
#host .h-led .big2 small{margin-left:.15em;font-size:2.3em;font-weight:500;letter-spacing:-.02em}
#host .h-led .sub{font-size:1.32em;color:var(--a-ink2);margin-top:.9em}
#host .h-led .sub b{color:var(--a-ink);font-weight:600}
#host .h-led .spk{width:100%;height:7.6em;margin-top:1.4em;overflow:visible}
#host .h-led .asked{margin-top:1.6em;border-top:.1em solid var(--a-line);padding-top:1.2em}
#host .h-led .asked h5{font-size:1.3em;font-weight:600;margin-bottom:.4em}
#host .h-led .q{padding:.9em 0 .2em}
#host .h-led .q .t{display:flex;justify-content:space-between;font-size:1.3em;font-weight:500}
#host .h-led .q .t span{font-weight:400;color:var(--a-ink2);font-variant-numeric:tabular-nums}
#host .h-led .q .br{height:.32em;border-radius:.2em;background:var(--a-fill);margin-top:.6em;overflow:hidden}
#host .h-led .q .br i{display:block;height:100%;border-radius:.2em;background:var(--a-ink)}
#host .h-led .q .s{position:relative;height:1.5em;margin-top:.45em;font-size:1.1em;overflow:hidden}
#host .h-led .q .s span{position:absolute;left:0;top:0;white-space:nowrap;color:var(--a-ink3);transition:transform .7s var(--io),opacity .5s}
#host .h-led .q.miss .br i{background:var(--acc)}
#host .h-led .q.miss .s .a{color:var(--acc-i)}
#host .h-led .q .s .b{color:var(--ok);transform:translateY(110%);opacity:0}
#host .h-led .q.known .s .a{transform:translateY(-110%);opacity:0}
#host .h-led .q.known .s .b{transform:none;opacity:1}
#host .h-led .q.known .br i{background:var(--a-ink)}

/* phone (flat, no tilt: stays sharp) */
#host .h-ph{position:absolute;left:62cqw;top:9.4cqw;z-index:8;width:31.4cqw;height:64cqw;border-radius:5cqw;background:#0b0b0c;padding:.9cqw;box-shadow:inset 0 0 0 .22cqw #3a3b40,0 3cqw 8cqw rgba(0,0,0,.55);
  opacity:0;transform:translateY(22cqw);transition:transform 1.2s var(--sheet),opacity .6s}
#host .h-ph.on{opacity:1;transform:none}
#host .h-scr{position:relative;height:100%;border-radius:4.2cqw;overflow:hidden;background:var(--a-bg);color:var(--a-ink)}
#host .h-isl{position:absolute;top:1.1cqw;left:50%;transform:translateX(-50%);width:9cqw;height:2.6cqw;border-radius:1.5cqw;background:#000;z-index:30}
#host .h-sts{position:absolute;left:0;right:0;top:0;height:4.8cqw;display:flex;align-items:center;justify-content:space-between;padding:0 3cqw 0 3.6cqw;font-size:1.3cqw;font-weight:600;z-index:3}
#host .h-sts .ri{display:flex;gap:.5cqw;align-items:center}
#host .h-sts .ri i{display:block;width:.4cqw;background:var(--a-ink);border-radius:.1cqw}
#host .h-sts .ri em{display:none}
#host .h-sts .bat{width:2.4cqw;height:1.15cqw;border-radius:.35cqw;border:.12cqw solid var(--a-ink);padding:.12cqw}
#host .h-sts .bat::before{content:"";display:block;height:100%;width:70%;background:var(--a-ink);border-radius:.15cqw}
#host .h-trk{position:absolute;left:0;top:0;width:200%;height:100%;display:flex;transition:transform 1s var(--io)}
#host .h-trk.k{transform:translateX(-50%)}
#host .h-pg{position:relative;width:50%;height:100%;padding:6.2cqw 1.8cqw 1.8cqw}
#host .h-ah{display:flex;align-items:center;justify-content:space-between}
#host .h-ah img{height:1.7cqw}
#host .h-ah .av{width:2.8cqw;height:2.8cqw;border-radius:50%;background:#E7E7E3;color:var(--a-ink2);font-size:1cqw;font-weight:600;display:grid;place-items:center}
#host .h-pt{font-size:2.3cqw;font-weight:600;letter-spacing:-.03em;margin-top:2.2cqw}
#host .h-ps{font-size:1.12cqw;color:var(--a-ink2);margin-top:.3cqw}
#host .h-lst{margin-top:1.6cqw;background:var(--a-card);border-radius:1.6cqw;padding:0 1.3cqw}
#host .h-row{display:grid;grid-template-columns:3.2cqw minmax(0,1fr) auto;gap:1cqw;align-items:center;padding:1.15cqw 0;border-bottom:.1cqw solid var(--a-line)}
#host .h-row:last-child{border-bottom:0}
#host .h-row .a{position:relative;width:3.2cqw;height:3.2cqw;border-radius:50%;background:var(--acc-s);color:var(--acc-i);font-size:1.02cqw;font-weight:600;display:grid;place-items:center}
#host .h-row .a.g{background:#EFEFEC;color:var(--a-ink2)}
#host .h-row .a.g svg{width:1.4cqw;height:1.4cqw}
#host .h-row .a u{position:absolute;right:-.5cqw;bottom:-.4cqw;text-decoration:none;font-size:.72cqw;font-weight:600;color:var(--a-ink2);background:#fff;border:.1cqw solid var(--a-line2);border-radius:.6cqw;padding:.05cqw .35cqw}
#host .h-row .n{font-size:1.2cqw;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#host .h-row .t{font-size:1.02cqw;color:var(--a-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1cqw}
#host .h-row .st{font-size:1.02cqw;color:var(--a-ink2);text-align:right;white-space:nowrap}
#host .h-row .st.o{color:var(--a-ink);font-weight:500;display:flex;align-items:center;gap:.4cqw}
#host .h-row .st.o::before{content:"";width:.6cqw;height:.6cqw;border-radius:50%;background:var(--acc)}
/* the overnight enquiry, opened */
#host .h-enq{overflow:hidden;max-height:0;opacity:0;transition:max-height 1s var(--ease),opacity .6s,margin 1s var(--ease)}
#host .h-enq.on{max-height:40cqw;opacity:1;margin-top:1.4cqw}
#host .h-eq{background:var(--a-card);border-radius:1.6cqw;padding:1.5cqw 1.5cqw 1.4cqw;box-shadow:inset 0 0 0 .18cqw var(--acc)}
#host .h-eq .hd{display:grid;grid-template-columns:3.6cqw 1fr;gap:1cqw;align-items:center}
#host .h-eq .hd .a{position:relative;width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--acc-s);color:var(--acc-i);font-size:1.1cqw;font-weight:600;display:grid;place-items:center}
#host .h-eq .hd .a u{position:absolute;right:-.5cqw;bottom:-.4cqw;text-decoration:none;font-size:.72cqw;font-weight:600;color:var(--a-ink2);background:#fff;border:.1cqw solid var(--a-line2);border-radius:.6cqw;padding:.05cqw .35cqw}
#host .h-eq .hd b{display:block;font-size:1.35cqw;font-weight:600}
#host .h-eq .hd span{display:block;font-size:1.02cqw;color:var(--a-ink2)}
#host .h-eq .f{margin-top:1.2cqw;font-size:1.1cqw;line-height:1.42}
#host .h-eq .f div{display:grid;grid-template-columns:6.4cqw 1fr;gap:.6cqw;padding:.35cqw 0}
#host .h-eq .f span{color:var(--a-ink3)}
#host .h-eq .tr{font-size:.95cqw;color:var(--a-ink3);margin-top:.7cqw;display:flex;align-items:center;gap:.5cqw}
#host .h-eq .tr svg{width:1.1cqw;height:1.1cqw}
#host .h-eq .bt{display:flex;gap:.8cqw;margin-top:1.3cqw}
#host .h-eq .bt span{flex:1;text-align:center;font-size:1.08cqw;font-weight:500;padding:.8cqw 0;border-radius:2cqw;background:var(--a-fill)}
#host .h-eq .bt span:first-child{background:var(--acc);color:#fff}
/* phone notification */
#host .h-ntf{position:absolute;left:1.2cqw;right:1.2cqw;top:4.6cqw;z-index:20;display:grid;grid-template-columns:3.4cqw 1fr auto;gap:1cqw;align-items:center;padding:1.2cqw 1.3cqw;border-radius:2cqw;background:rgba(255,255,255,.96);box-shadow:0 1cqw 3cqw rgba(0,0,0,.18);
  opacity:0;transform:translateY(-4cqw) scale(.96);transition:opacity .5s,transform .8s var(--spring)}
#host .h-ntf.on{opacity:1;transform:none}
#host .h-ntf .ai{width:3.4cqw;height:3.4cqw;border-radius:.9cqw;background:#141414;overflow:hidden;display:grid;place-items:center}
#host .h-ntf .ai img{height:2.1cqw;width:2.1cqw;object-fit:cover;object-position:0 50%}
#host .h-ntf b{display:block;font-size:1.12cqw;font-weight:600}
#host .h-ntf span{display:block;font-size:1.02cqw;color:var(--a-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#host .h-ntf time{align-self:start;font-size:.95cqw;color:var(--a-ink3)}
/* knowledge page on the phone */
#host .h-kh{display:flex;align-items:center;gap:.8cqw;font-size:1.12cqw;color:var(--a-ink2)}
#host .h-kh svg{width:1.2cqw;height:1.2cqw}
#host .h-kt{display:flex;align-items:baseline;gap:.8cqw}
#host .h-kt i{font-style:normal;font-size:1.4cqw;color:var(--acc-i);font-weight:500;display:inline-block}
#host .h-kt i.pop{animation:h-pop .7s var(--spring)}
#host .h-kq{padding:1.2cqw 0;border-bottom:.1cqw solid var(--a-line);transition:background .6s}
#host .h-kq:last-child{border-bottom:0}
#host .h-kq b{display:block;font-size:1.18cqw;font-weight:500}
#host .h-kq span{display:block;font-size:1cqw;color:var(--a-ink3);margin-top:.2cqw}
#host .h-kq.lit{background:linear-gradient(90deg,var(--acc-s),transparent);margin:0 -1.3cqw;padding-left:1.3cqw;padding-right:1.3cqw;box-shadow:inset .25cqw 0 0 var(--acc)}
#host .h-ans{overflow:hidden;max-height:0;opacity:0;transition:max-height .9s var(--ease),opacity .5s,margin .9s var(--ease)}
#host .h-ans.on{max-height:20cqw;opacity:1;margin-top:1cqw}
#host .h-ans .lb2{font-size:.98cqw;color:var(--a-ink3)}
#host .h-ans .box{margin-top:.5cqw;border-radius:1.1cqw;background:#fff;border:.12cqw solid rgba(229,83,61,.5);padding:.9cqw 1.1cqw;font-size:1.12cqw;line-height:1.42;min-height:5cqw;color:var(--a-ink)}
#host .h-ans .box .cur{display:inline-block;width:.14cqw;height:1.25cqw;background:var(--acc);vertical-align:-.2cqw;animation:h-bl 1s infinite}
#host .h-ans .sv{display:flex;justify-content:flex-end;margin-top:.8cqw}
#host .h-ans .sv span{font-size:1.08cqw;font-weight:500;color:#fff;background:var(--a-ink);padding:.65cqw 1.6cqw;border-radius:2cqw;transition:transform .3s var(--spring),background .4s}
#host .h-ans .sv span.press{transform:scale(.9)}
#host .h-ans .sv span.done{background:var(--ok)}
#host .h-toast{position:absolute;left:50%;bottom:3cqw;z-index:10;display:flex;align-items:center;gap:.8cqw;white-space:nowrap;padding:1cqw 1.8cqw 1cqw 1cqw;border-radius:3cqw;background:#141414;color:#fff;font-size:1.15cqw;font-weight:500;
  opacity:0;transform:translate(-50%,2cqw);transition:opacity .5s,transform .8s var(--spring)}
#host .h-toast.on{opacity:1;transform:translate(-50%,0)}
#host .h-toast i{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--ok);display:grid;place-items:center}
#host .h-toast i svg{width:1.2cqw;height:1.2cqw}