/* Apps and AI page. Loads after tokens.css and styles.css from homepage-v7 and adds only
   what this page needs. Colours are tokens; raw colours appear only inside the fenced
   content blocks (opened by the comment content: not themed): the sample screens inside
   the illustration stages, which look the same in both themes. */

/* page token: the card title size (28px), the step between the group heading and the body */
:root{--text-px-28:1.75rem}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.links a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}

/* ---------- hero: full-width headline, then copy and the whole-system demo ---------- */
.ah-hero{padding-block:clamp(16px,2.4vw,40px) var(--layout-band)}
.ah-hero h1{font-size:var(--text-display-sm);max-width:15ch}
.ah-hero h1 .hl{color:var(--color-accent-display)}
.ah-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(24px,3vw,44px)}
.ah-copy>p{font-size:var(--text-xl);color:var(--color-text-muted);max-width:34ch}
.ah-demo{position:relative;min-width:0}
.ah-demo .ill{box-shadow:0 0 0 1px var(--card-border),var(--shadow-float)}
.ah-demo .cap{margin-inline:0}
.ah-demo .demo-ctl{margin-top:var(--space-1)}
@media (min-width:901px){
  .ah-hero h1{font-size:var(--text-display);max-width:none}
}
@media (max-width:900px){
  .ah-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- where the time goes ---------- */
.tg{background:var(--section-feature-bg)}
.tg-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:var(--layout-head-gap)}
.tg-list a{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);height:100%;padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--card-border);background:var(--card-bg);box-shadow:var(--card-shadow);text-decoration:none;transition:border-color var(--duration-fast),transform var(--duration-base)}
.tg-list a:hover{border-color:var(--tile-border-hover);transform:translateY(-4px)}
.tg-ic{display:block;flex:none;width:112px;border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-border)}
.tg-t{flex:1;font:600 var(--text-xl)/1.3 var(--font-body);text-wrap:balance}
.tg-go{font:400 var(--text-px-13)/1 var(--font-mono);color:var(--color-text-muted);text-decoration:underline;text-underline-offset:4px}
@media (max-width:1023px){.tg-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tg-list{grid-template-columns:minmax(0,1fr)}}

/* ---------- catalogue ---------- */
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6)}
.cat-head .demo-ctl{flex:none;margin-top:0}
.cat .pick{justify-content:flex-start;flex-wrap:wrap;overflow:visible;margin:var(--space-6) -3px 0}
.cat-group{margin-top:var(--layout-head-gap)}
.cat-group>h3{font-size:var(--text-h3-lg)}
.pc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:var(--space-6);margin-top:var(--space-6)}
.pc{display:flex;flex-direction:column;min-width:0;padding:6px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);scroll-margin-top:96px;transition:opacity var(--duration-slow) var(--ease-out)}
.cap{display:flex;justify-content:space-between;gap:var(--space-3);margin:var(--space-3) var(--space-3) 0;font:400 12px/1.4 var(--font-mono);color:var(--color-text-muted)}
.pc-body{flex:1;display:flex;flex-direction:column;padding:var(--space-5) var(--space-5) var(--space-6)}
.pc h4{font:700 var(--text-px-28)/1.12 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.pc .for{margin-top:var(--space-3);font-size:var(--text-md);color:var(--color-text-muted)}
.pc .does{margin:var(--space-3) 0 var(--space-4)}
.pc .chg{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--color-border);font-weight:600}
/* trade filter: a card outside the chosen trade fades as a whole, text included */
.pc.dim{opacity:.5}
/* muted lines take the full text colour while dimmed, so the faded card still reads at 3:1 */
.pc.dim .for,.pc.dim .cap{color:var(--color-text)}
/* the empty slot at the end of each group: a way out for the undecided */
.pc-cta{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-4);min-width:0;padding:clamp(28px,3.4vw,48px);border-radius:var(--radius-lg);border:1px solid var(--card-border);background:var(--step-stage-bg);color:var(--step-art-line)}
.pc-cta h4{font:700 var(--text-px-28)/1.12 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.pc-cta p{max-width:34ch;font-size:var(--text-body);line-height:1.55}
.pc-cta .btn{margin-top:var(--space-2)}
.pc-cta :focus-visible{outline-color:var(--color-accent)}
@media (max-width:900px){.pc-grid{grid-template-columns:minmax(0,1fr)}.pc-cta{display:none}}
@media (max-width:520px){
  .cat-head{flex-direction:column;align-items:flex-start;gap:0}
  .pc-body{padding:var(--space-4) var(--space-3) var(--space-5)}
  .pc h4{font-size:var(--text-h3)}
}

/* ---------- week strip: on the raised band, each day links to its card ---------- */
.wk-sec{background:var(--section-feature-bg)}
.wk-more>summary{display:none}
.wk{list-style:none;padding:var(--space-5) 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4);margin-top:var(--layout-head-gap);border-top:2px solid var(--color-text)}
.wk-day{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.wk-d{font:500 var(--text-px-13)/1 var(--font-mono);color:var(--color-text-muted)}
.wk-card{display:block;flex:1;background:var(--step-bg);border:1px solid var(--step-border);border-radius:var(--radius-lg);padding:var(--space-3);box-shadow:var(--card-shadow);color:inherit;text-decoration:none}
.wk-card:hover{border-color:var(--tile-border-hover)}
.wk-card .stage{display:block}
.wk-t{display:block;margin:var(--space-4) var(--space-2) 0;font:400 var(--text-xs)/1 var(--font-mono);color:var(--color-text-muted)}
.wk-card p{margin:var(--space-2) var(--space-2) var(--space-2);font:600 var(--text-md)/1.35 var(--font-body);text-wrap:balance;text-decoration:underline;text-decoration-color:var(--color-border-strong);text-underline-offset:4px}
@media (max-width:1023px){
  .wk{grid-template-columns:minmax(0,1fr)}
  .wk-day{flex-direction:row;align-items:center;gap:var(--space-4)}
  .wk-d{flex:none;width:36px}
  .wk-card{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--space-4);align-items:center}
  .wk-card .stage{grid-row:1/3;border-radius:var(--radius-sm)}
  .wk-t{margin:0;align-self:end}
  .wk-card p{margin:var(--space-1) 0 0;align-self:start}
}

/* ---------- honest rows: two columns of the homepage row, step-title type ---------- */
#honest .rows{margin-top:var(--space-5)}
.ah-rows .row{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ah-rows .row h3{font:600 var(--text-xl)/1.2 var(--font-body);letter-spacing:-.01em}
@media (max-width:900px){.ah-rows .row{grid-template-columns:minmax(0,1fr)}}

.cta-band strong{max-width:24ch}

/* ---------- phone, 720px and below ---------- */
.pc-more>summary,.wk-more>summary{list-style:none;cursor:pointer}
.pc-more>summary::-webkit-details-marker,.wk-more>summary::-webkit-details-marker{display:none}
@media (max-width:720px){
  /* trade chips: one swipe row, faded at the right edge */
  .cat .pick{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin:var(--space-5) calc(var(--layout-gutter)*-1) 0;padding:3px calc(var(--layout-gutter) + 32px) 3px var(--layout-gutter);scroll-padding-inline:var(--layout-gutter);-webkit-mask-image:linear-gradient(90deg,var(--color-text) calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,var(--color-text) calc(100% - 48px),transparent)}
  .cat .pick button{scroll-snap-align:start}
  /* where the time goes: four compact tiles, two by two */
  .tg-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .tg-list a{gap:var(--space-3);padding:var(--space-3)}
  .tg-ic{width:64px}
  .tg-t{font:600 var(--text-md)/1.3 var(--font-body)}
  .tg-go{display:none}
  /* product cards: title, what it does and the stage; the rest behind More */
  .cat-group{margin-top:var(--space-9)}
  .pc-grid{gap:var(--space-4);margin-top:var(--space-4)}
  .pc-body{padding:var(--space-3) var(--space-3) 0}
  .pc .does{margin:var(--space-2) 0;font-size:var(--text-md);line-height:1.5}
  .pc .cap{margin-top:var(--space-2)}
  .pc h4{font-size:var(--text-lg);letter-spacing:-.02em}
  .pc-more{margin-top:auto;border-top:1px solid var(--color-border)}
  .pc-more>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font:600 var(--text-md)/1 var(--font-body)}
  .pc-more .for{margin-top:var(--space-1)}
  .pc-more .chg{margin-top:var(--space-3);padding-top:0;border-top:0;padding-bottom:var(--space-2)}
  /* week strip: closed behind a disclosure */
  .wk-more>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:52px;margin-top:var(--space-4);padding:0 var(--space-5);border:1.5px solid var(--btn-secondary-border);border-radius:var(--radius-pill);font:600 var(--text-base)/1 var(--font-body)}
  .wk-more .wk{margin-top:var(--space-5)}
  .pc-more>summary i,.wk-more>summary i{position:relative;flex:none;width:14px;height:14px;transition:transform var(--duration-base)}
  .pc-more>summary i::before,.pc-more>summary i::after,.wk-more>summary i::before,.wk-more>summary i::after{content:"";position:absolute;background:var(--color-text)}
  .pc-more>summary i::before,.wk-more>summary i::before{left:0;top:6px;width:14px;height:2px}
  .pc-more>summary i::after,.wk-more>summary i::after{left:6px;top:0;width:2px;height:14px}
  .pc-more[open]>summary i,.wk-more[open]>summary i{transform:rotate(45deg)}
}

/* ==========================================================================
   ILLUSTRATIONS. Each stage is a dark panel in both themes. The scene inside is
   drawn on a fixed 400 x 250 board and scaled to the stage width from script.
   Below 400px the board stops shrinking at the width that keeps its 12px text at
   12px (a 344px window), and the stage crops the board's side edges instead:
   every scene keeps its content inside x 28 to 372 so the crop never cuts it.
   ========================================================================== */
.ill{position:relative;aspect-ratio:16/10;border-radius:var(--radius-md);background:var(--step-stage-bg);overflow:hidden;isolation:isolate}
.ill.crop{aspect-ratio:auto;height:calc(250px*var(--sc,1))}
.ill>.sc{position:absolute;left:0;top:0;width:400px;height:250px;transform:translateX(var(--ox,0px)) scale(var(--sc,1));transform-origin:0 0;font-family:var(--font-body);color:var(--step-art-line);transition:opacity .45s var(--ease-in-out)}
.ill.out>.sc{opacity:0}
.ill.nt>.sc *{transition:none!important}
.held *,.held *::before,.held *::after{animation-play-state:paused!important}
.sc-svg{position:absolute;left:0;top:0;width:400px;height:250px;overflow:visible;pointer-events:none}
.sc .ph-fit{position:absolute;--ps:.86}
.sc .t-ln{stroke:var(--step-art-line)}
.sc .t-ac{stroke:var(--step-art-accent)}
.sc .t-ac-f{fill:var(--step-art-accent)}
.sc .t-trk{stroke:var(--step-art-block-1)}
.sc .t-bg-f{fill:var(--step-stage-bg)}
.sc svg .m-pop{transform-box:fill-box;transform-origin:50% 50%}

/* the scripted states: data-on fades in, data-off fades out, data-st / data-st2 switch a state */
[data-steps] [data-on],[data-steps] [data-off]{transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.js [data-steps] [data-on]{opacity:0}
.js [data-steps] [data-on].on{opacity:1}
.js [data-steps] [data-off].off{opacity:0}
.js [data-steps] .m-up[data-on]:not(.on){transform:translateY(10px)}
.js [data-steps] .m-down[data-on]:not(.on){transform:translateY(-14px)}
.js [data-steps] .m-pop[data-on]:not(.on){transform:scale(.6)}
.js [data-steps] .m-in[data-on]:not(.on){transform:translateX(18px)}
[data-steps] .draw{stroke-dasharray:1;transition:stroke-dashoffset .7s var(--ease-draw)}
[data-steps] .draw.slow{transition-duration:.9s;transition-timing-function:var(--ease-in-out)}
.js [data-steps] .draw:not(.st){stroke-dashoffset:1}

/* hero: the connector from the phone to the inbox */
.ih-dot{position:absolute;left:200px;top:211px;width:8px;height:8px;border-radius:var(--radius-round);background:var(--step-art-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--step-art-accent) 30%,transparent)}
[data-steps] .ih-dot{transition:opacity .3s var(--ease-out),transform 1s var(--ease-in-out)}
.ih.k11 .ih-dot{transform:translateX(25px)}

/* 1. missed call: line-art parts on the stage */
.i1 .ph-fit{left:28px;top:16px}
.m1-chip{position:absolute;left:250px;top:150px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 9px;border-radius:var(--radius-pill);border:1.5px solid var(--step-art-accent);font:500 12px/1 var(--font-mono);color:var(--step-art-line)}
.m1-chip svg{width:16px;height:16px;stroke:var(--step-art-accent)}
.m1-chipnote{position:absolute;left:250px;top:186px;width:122px;font:400 12px/1.4 var(--font-mono);color:var(--color-art-shade-3)}

/* 3. quote follow-up: timeline labels, the status under the line */
.i3-day{position:absolute;top:10px;width:108px;text-align:center;font:500 12px/1 var(--font-mono);color:var(--step-art-line)}
.i3-sent{position:absolute;top:176px;width:108px;font:400 12px/1.4 var(--font-mono);color:var(--color-art-shade-3)}
.i3-status{position:absolute;right:28px;top:56px;display:flex;align-items:center;gap:8px}
.i3-stl{font:400 12px/1 var(--font-mono);color:var(--color-art-shade-3)}
.i3-sw{display:grid;justify-items:end}
.i3-open,.i3-booked{grid-area:1/1}
.i3-open{display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:var(--radius-pill);border:1.5px solid var(--step-art-line);font:600 12px/1 var(--font-body);color:var(--step-art-line)}

/* 7. admin automation: a flow, drawn in the stage's line art */
.i7-c{display:none}
.ill.narrow .i7-w{display:none}
.ill.narrow .i7-c{display:block}
.i7-top{position:absolute;left:28px;top:12px;font:500 12px/1 var(--font-mono);color:var(--color-art-shade-3)}
.i7-n{position:absolute;top:30px;width:80px;height:94px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 8px;border-radius:var(--radius-stage);background:color-mix(in srgb,var(--step-art-line) 7%,var(--step-stage-bg));border:1.5px solid color-mix(in srgb,var(--step-art-line) 28%,transparent);font:600 12px/1.3 var(--font-body);color:var(--step-art-line)}
.i7-n.n1{left:28px}.i7-n.n2{left:116px}.i7-n.n3{left:204px}.i7-n.n4{left:292px}
.i7-ic{display:block;flex:none;width:20px;height:20px}
.i7-ic svg{display:block;width:100%;height:100%}
.i7-hl{position:absolute;inset:-2px;border-radius:calc(var(--radius-stage) + .5px);border:2px solid var(--step-art-accent)}
.i7-last .i7-hl{inset:-3px;border-width:3px}
.i7-ck{position:absolute;right:6px;top:6px;width:18px;height:18px;border-radius:var(--radius-round);background:var(--step-art-accent)}
.i7-ck::before{content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:8px;border:solid var(--step-art-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.i7-dot{position:absolute;left:62px;top:128px;width:12px;height:12px;border-radius:var(--radius-round);background:var(--step-art-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--step-art-accent) 25%,transparent);transition:transform .9s var(--ease-in-out)}
.i7.k2 .i7-dot{transform:translateX(88px)}
.i7.k4 .i7-dot{transform:translateX(176px)}
.i7.k6 .i7-dot{transform:translateX(264px)}
.i7-badge{position:absolute;right:28px;top:8px;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-pill);background:var(--step-art-accent);color:var(--step-art-ink);font:600 12px/1 var(--font-body);white-space:nowrap}
.i7-note{position:absolute;left:28px;top:154px;width:190px;font:500 12px/1.45 var(--font-mono);color:var(--step-art-line)}
.ill.narrow .i7-top{left:50px;top:8px}
.ill.narrow .i7-n{left:50px;width:174px;height:42px;flex-direction:row;align-items:center;gap:8px;padding:0 30px 0 9px}
.ill.narrow .i7-n.n1{top:25px}.ill.narrow .i7-n.n2{top:73px}.ill.narrow .i7-n.n3{top:121px}.ill.narrow .i7-n.n4{top:169px;padding-right:10px}
.ill.narrow .i7-ck{top:12px;right:8px}
.ill.narrow .i7-dot{left:32px;top:40px}
.ill.narrow.i7.k2 .i7-dot{transform:translateY(48px)}
.ill.narrow.i7.k4 .i7-dot{transform:translateY(96px)}
.ill.narrow.i7.k6 .i7-dot{transform:translateY(144px)}
.ill.narrow .i7-badge{left:50px;right:auto;top:220px}
.ill.narrow .i7-note{display:none}

/* 9. AI video: panel labels, the frame's chip and progress, formats */
.i9-k{position:absolute;top:10px;font:500 12px/1 var(--font-mono);color:var(--color-art-shade-3)}
.i9-ai{position:absolute;z-index:2;right:6px;top:6px;padding:4px 6px;border-radius:var(--radius-xs);background:var(--step-stage-bg);font:500 12px/1 var(--font-mono);color:var(--step-art-line)}
.i9-outs{position:absolute;left:264px;top:30px;width:106px;display:flex;flex-direction:column;gap:7px}
.i9-row{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:6px;height:46px;padding:0 8px 0 3px;border-radius:var(--radius-sm);border:1.5px solid color-mix(in srgb,var(--step-art-line) 22%,transparent)}
.i9-th{justify-self:center;display:block;overflow:hidden;border-radius:3px;box-shadow:0 0 0 1.5px var(--step-art-line)}
.i9-th.v{width:16px;height:28px}
.i9-th.s{width:24px;height:24px}
.i9-th.w{width:30px;height:17px}
.i9-tx{position:relative;display:grid;gap:7px;font:600 12px/1 var(--font-body);color:var(--step-art-line)}
.i9-n{white-space:nowrap}
.i9-bar{position:relative;display:block;height:4px;border-radius:2px;background:var(--step-art-block-1);overflow:hidden}
.i9-bar i{position:absolute;inset:0;background:var(--step-art-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-in-out)}
.i9-bar i.st{transform:none}
.i9-ck{position:absolute;left:19px;top:25px;width:16px;height:16px;box-shadow:0 0 0 2px var(--step-stage-bg);border-radius:var(--radius-round);background:var(--step-art-accent)}
.i9-ck::before{content:"";position:absolute;left:5.5px;top:3px;width:3.5px;height:7px;border:solid var(--step-art-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.i9-ready{display:flex;align-items:center;gap:6px;margin-top:3px;font:600 12px/1 var(--font-body);color:var(--step-art-line)}

/* content: not themed */
/* sample screens inside the stages: phones, sample sites and app panels keep their own colours */
.sc .bw-sm .bw-url{font-size:12px}
.sc .bw-addr{width:54%;height:24px;top:5px}
.sc .bw-bar{height:34px;padding:0 13px}
.sc .bw-lights i{width:9px;height:9px}
.sc .ph-screen{font-family:var(--font-body)}
.sc .ph-status b{font-size:14px}
.sc .bub{margin:0;font:400 12px/1.35 var(--font-body);padding:6px 9px;border-radius:12px;text-wrap:pretty}
.sc .ph .bub{font-size:14px;padding:8px 11px;border-radius:16px}
.sc .bo,.sc .bq{align-self:flex-end;background:#0E7C86;color:#FFFFFF;border-bottom-right-radius:4px}
.sc .ph .bo{border-bottom-right-radius:5px}
.sc .bi{align-self:flex-start;background:#E4E4E0;color:#0B0B0D;border-bottom-left-radius:5px}
.sc .ba{align-self:flex-start;background:#F0F0EE;color:#10151B;border-bottom-left-radius:4px}
.aw2{position:relative;display:flex;flex-direction:column}
.typ{position:absolute;left:0;top:0;display:flex;gap:4px;padding:9px 10px;border-radius:12px;border-bottom-left-radius:4px;background:#E4E4E0}
.typ b{display:block;width:5px;height:5px;border-radius:50%;background:#77777F;animation:typ 1s ease-in-out infinite alternate}
.typ b + b{animation-delay:.33s}
.typ b + b + b{animation-delay:.66s}
@keyframes typ{from{opacity:.3}to{opacity:1}}
.ck{position:relative;flex:none;display:block;width:20px;height:20px;border-radius:50%;background:#157347}
.ck::before{content:"";position:absolute;left:7.5px;top:4.5px;width:4px;height:8px;border:solid #FFFFFF;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* the AI disclosure chip on every message the assistant writes */
.ai{flex:none;display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:4px;background:#1D2A44;color:#FFFFFF;font:600 12px/1 var(--font-mono);font-style:normal;letter-spacing:.02em}
.bub .ai{display:inline;height:auto;margin-right:6px;padding:1px 5px;line-height:inherit;font-size:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ph .bub .ai{border-radius:5px}
/* sample site parts shared by the browser scenes */
.sx-site{position:relative;flex:1;min-height:0;background:#FFFFFF;color:#10151B;overflow:hidden}
.sx-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;height:32px;padding:0 12px;border-bottom:1px solid #ECEDEF;white-space:nowrap}
.sx-logo{display:flex;align-items:center;gap:6px}
.sx-logo svg{display:block;width:20px;height:20px}
.sx-word{font:400 13px/1 var(--font-body);letter-spacing:-.02em;color:#10151B}
.sx-word b{font-weight:700}
.sx-dim{font:500 12px/1 var(--font-body);color:#5B6069}
.sx-waves{position:absolute;left:0;bottom:0;width:100%;height:48px;opacity:.22}
.i2-av{display:block;width:20px;height:20px;border-radius:50%;background:#0E7C86;color:#FFFFFF;font:700 12px/20px var(--font-body);font-style:normal;text-align:center}
.i2-body{display:flex;flex-direction:column;gap:5px;padding:7px}
.i2-body .bub{max-width:90%}
.i2-chips{display:flex;gap:6px}
.i2-chip{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px #0E7C86;font:600 12px/1 var(--font-body);color:#0A5A61;transition:transform .3s var(--ease-out)}
.i2-chip i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#0E7C86;color:#FFFFFF;font-style:normal;opacity:0;transition:opacity .3s}
.i2-chip.st i{opacity:1}
/* browser windows: same inset in every browser scene; inside the crop window when narrow */
.i6-bw,.i8-bw,.i10-bw{position:absolute;left:16px;top:8px;width:368px;height:234px;display:flex;flex-direction:column}
.ill.crop .i6-bw,.ill.crop .i8-bw,.ill.crop .i10-bw{left:28px;width:344px}
.ill.crop .bw-addr{width:68%}
.ill.crop .ih-bw .bw-addr{width:auto}

/* hero: the whole system. A browser behind, the phone in front, the inbox they both feed */
.ih-bw{position:absolute;left:186px;top:8px;width:186px;height:172px;display:flex;flex-direction:column}
.ih-bw .bw-bar{height:28px}
.ih-bw .bw-addr{left:30px;right:10px;width:auto;height:20px;top:4px;margin:0;padding:0 8px}
.ih-site{background:linear-gradient(160deg,#0E7C86 0%,#0B6169 55%,#094A50 100%)}
.ih-chat{position:absolute;right:8px;bottom:5px;width:160px;border-radius:10px;background:#FFFFFF;box-shadow:0 16px 32px -12px rgba(4,20,24,.7)}
.ih-pick{display:grid}
.ih-pick>*{grid-area:1/1}
.ih-ok{display:flex;align-items:center;gap:6px;height:24px;font:600 12px/1 var(--font-body);color:#10151B;white-space:nowrap}
.ih-ok .ck{width:18px;height:18px}
.ih-ok .ck::before{left:6.5px;top:3.5px}
.ih .ph-fit{left:28px;top:14px;--ps:.7;z-index:2}
.ih .ph-status b{font-size:18px}
.ih .m1-head{height:auto;padding:2px 0 10px}
.ih .m1-head b{font-size:18px}
.ih-msgs{display:flex;flex-direction:column;gap:10px;padding:12px 12px 0}
.ih-miss{align-self:center;display:flex;align-items:center;gap:7px;font:500 18px/1 var(--font-body);color:#B42318}
.ih-miss i{width:9px;height:9px;border-radius:50%;background:#E5484D}
.ih .sc .ph .bub{max-width:88%;font-size:18px;line-height:1.3;padding:10px 13px;border-radius:18px}
.ih-inbox{position:absolute;left:236px;top:186px;width:136px;display:flex;flex-direction:column;padding:6px 9px;border-radius:10px;background:#FFFFFF;color:#10151B;font:400 12px/15px var(--font-body);white-space:nowrap;box-shadow:0 14px 28px -12px rgba(0,0,0,.6)}
.ih-ih{display:flex;align-items:center;gap:5px}
.ih-ih svg{width:14px;height:14px}
.ih-ih b{font-weight:600}

/* 1. missed call */
.m1-call{position:absolute;left:0;right:0;top:40px;bottom:0;text-align:center}
.m1-lbl{position:absolute;left:0;right:0;top:12px;display:flex;align-items:center;justify-content:center;gap:6px;font:500 14px/1 var(--font-body);color:#5B5B63}
.m1-miss{color:#B42318}
.m1-miss i{width:8px;height:8px;border-radius:50%;background:#E5484D}
.m1-num{position:absolute;left:0;right:0;top:34px;font:600 21px/1.1 var(--font-body);letter-spacing:-.01em;color:#0B0B0D}
.m1-sub{position:absolute;left:0;right:0;top:63px;font:400 14px/1 var(--font-body);color:#5B5B63}
.m1-av{position:absolute;left:50%;top:88px;width:60px;height:60px;margin-left:-30px;border-radius:50%;background:#E2E2DE}
.m1-av svg{position:absolute;inset:0;width:100%;height:100%}
.m1-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #0E7C86;animation:m1ring 1.6s cubic-bezier(.16,1,.3,1) infinite}
.m1-ring.r2{animation-delay:.8s}
.m1-ring.off{animation:none}
@keyframes m1ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.6);opacity:0}}
.m1-btns{position:absolute;left:0;right:0;top:168px;display:flex;justify-content:center;gap:64px}
.m1-btns i{display:block;width:44px;height:44px;border-radius:50%;background:#1F9D61}
.m1-btns i svg{display:block;width:100%;height:100%}
.m1-btns .m1-no{background:#E5484D}
.m1-btns .m1-yes svg{transform:rotate(-135deg)}
.m1-thread{position:absolute;left:0;right:0;top:40px;bottom:0}
.m1-head{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;height:44px;padding-top:2px;border-bottom:1px solid #E1E1DC}
.m1-head b{font:600 14px/1.1 var(--font-body);color:#0B0B0D}
.m1-head span{font:400 14px/1 var(--font-body);color:#5B5B63}
.m1-msgs{display:flex;flex-direction:column;gap:8px;padding:12px 10px 0}
.m1-msgs .bub,.m4-msgs .bub{max-width:82%}
.m1-note{position:absolute;left:236px;top:16px;width:136px;padding:9px;border-radius:14px;background:#F4F4F1;color:#0B0B0D;box-shadow:0 14px 28px -12px rgba(0,0,0,.6)}
.m1-nh{display:flex;align-items:center;gap:6px;font:600 12px/1 var(--font-body);white-space:nowrap}
.m1-nh svg{flex:none;width:16px;height:16px}
.m1-note p{margin-top:8px;font:400 12px/1.35 var(--font-body)}
.m1-note p b{font-weight:600}

/* 2. AI front desk, by text */
.i2 .ph-fit{left:28px;top:9px}
.m2-clip{position:relative;flex:1;min-height:0;overflow:hidden}
.i2 .m1-head{height:auto;padding:2px 0 9px}
.m2-msgs{display:flex;flex-direction:column;gap:6px;padding:9px 10px 0}
.m2-msgs .bub{max-width:96%}
.m2-chips{display:flex;gap:8px;padding-left:2px}
.ph .i2-chip{height:30px;padding:0 16px;font-size:14px}
.m2-ok .cal{display:inline-block;width:18px;height:18px;margin-right:5px;vertical-align:-4px}
.m2-cal{position:absolute;left:250px;top:40px;width:122px;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:#FFFFFF;color:#10151B;box-shadow:0 14px 28px -12px rgba(0,0,0,.6)}
.m2-k{font:500 12px/1 var(--font-body);color:#5B6069}
.m2-cal b{margin-bottom:2px;font:700 15px/1.1 var(--font-body)}
.m2-slot{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;align-items:center;height:26px;padding:0 7px;border-radius:6px;box-shadow:inset 0 0 0 1px #D5D8DE;font:600 12px/1 var(--font-body)}
.m2-slot em{grid-column:2;grid-row:1;font:500 12px/1 var(--font-body);font-style:normal;color:#5B6069}
.m2-slot.st{box-shadow:inset 0 0 0 2px #0E7C86}
.m2-slot .m2-b{padding:3px 6px;border-radius:4px;background:#0E7C86;color:#FFFFFF;font-weight:600}

/* 3. quote follow-up */
.i3-card{position:absolute;left:28px;top:102px;width:108px;padding:9px;border-radius:10px;background:#FFFFFF;color:#10151B;box-shadow:0 12px 24px -12px rgba(0,0,0,.6)}
.i3-card b{display:block;font:600 13px/1.25 var(--font-body)}
.i3-lab{display:block;margin-top:6px;font:500 12px/1.2 var(--font-body);color:#5B6069}
.i3-sum .i3-lab{margin:0 0 4px}
.i3-sum .i3-n2{margin:6px 0 0}
.i3-fld{display:flex;align-items:center;margin-top:4px;height:24px;padding:0 7px;border:1px solid #C9CDD3;border-radius:6px;font:500 12px/1 var(--font-body);white-space:nowrap}
.i3-ph{display:flex;gap:6px;margin-top:8px}
.i3-ph img{display:block;width:42px;height:28px;border-radius:5px;object-fit:cover;object-position:30% 55%}
.i3-ph img.p2{object-position:85% 40%}
.i3-send{display:flex;align-items:center;justify-content:center;margin-top:8px;height:24px;border-radius:6px;background:#0E7C86;color:#FFFFFF;font:600 12px/1 var(--font-body);transition:transform .3s var(--ease-out)}
.i3-send.st:not(.st2){transform:scale(.92)}
.sc .i3-b{position:absolute;top:102px;width:108px;padding:8px 10px}
.i3-booked{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 5px;border-radius:999px;background:#FFFFFF;font:600 12px/1 var(--font-body);color:#10151B}
.i3-booked .ck{width:18px;height:18px}
.i3-booked .ck::before{left:6.5px;top:3.5px}

/* 4. review requests */
.i4 .ph-fit{left:186px;top:16px}
.i4-job{position:absolute;left:28px;top:14px;width:150px;display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;background:#FFFFFF;color:#10151B}
.i4-job b{font:600 12px/1.2 var(--font-body);white-space:nowrap}
.i4-s{position:relative;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #B4B4BA}
.i4-ok{position:absolute;inset:-1.5px;border-radius:50%;background:#157347}
.i4-ok::before{content:"";position:absolute;left:8px;top:4.5px;width:5px;height:9px;border:solid #FFFFFF;border-width:0 2px 2px 0;transform:rotate(45deg)}
.i4-rev{position:absolute;left:28px;top:60px;width:150px;padding:9px 10px 10px;border-radius:12px;background:#FFFFFF;color:#10151B;box-shadow:0 12px 24px -12px rgba(0,0,0,.6)}
.i4-top{display:flex;align-items:center;justify-content:space-between;gap:4px}
.i4-k{font:500 12px/1 var(--font-body);color:#5B6069;white-space:nowrap}
.i4-tag{padding:2px 4px;border-radius:4px;background:#ECEEF1;color:#3F444D;font:600 12px/1 var(--font-body)}
.i4-stars{display:flex;gap:2px;margin-top:7px}
.i4-stars svg{width:14px;height:14px;fill:#E09A0B}
.i4-rev q{display:block;margin-top:6px;font:500 12px/1.35 var(--font-body)}
.i4-by{display:block;margin-top:4px;font:400 12px/1.2 var(--font-body);color:#5B6069}
.i4-copy{position:absolute;left:28px;top:182px;width:150px;display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border-radius:10px;background:#F4F4F1;color:#10151B;font:400 12px/1.3 var(--font-body);box-shadow:0 14px 28px -12px rgba(0,0,0,.6)}
.i4-copy svg{flex:none;width:16px;height:16px}
.i4-copy b{display:block;font-weight:600}
.m4-msgs{display:flex;flex-direction:column;gap:8px;padding:12px 10px 0}
.m4-stars{display:flex;gap:6px;padding:10px 12px}
.m4-st{position:relative;display:block;width:24px;height:24px}
.m4-st svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#77777F;stroke-width:1.6;stroke-linejoin:round}
.m4-st svg.f{fill:#E09A0B;stroke:#E09A0B}

/* 5. crew app */
.i5 .ph-fit{left:28px;top:8px}
.i5 .app-head{display:flex;align-items:baseline;justify-content:space-between;padding:2px 16px 8px}
.i5 .app-head strong{font-size:22px}
.i5 .app-head span{margin:0;font-size:14px}
.i5 .app-list{gap:6px;padding:0 10px}
.i5 .job{position:relative;grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:2px;padding:9px 12px;border-radius:12px}
.i5 .job-s{grid-row:1/3}
.i5 .job b{grid-column:2;margin:0;font-size:15px;line-height:1.2}
.i5 .job-m{position:relative;grid-column:2;display:block;font-size:14px;line-height:1.25;color:#55555C}
.i5 .jm2{position:absolute;left:0;top:0}
.j-ok,.j-nx,.j-tap{position:absolute;left:12px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%}
.j-ok{background:#1F9D61}
.j-ok::before{content:"";position:absolute;left:10px;top:6px;width:6px;height:11px;border:solid #FFFFFF;border-width:0 2px 2px 0;transform:rotate(45deg)}
.j-nx{background:var(--color-accent)}
.j-tap{left:4px;width:44px;height:44px;margin-top:-22px;border:2px solid rgba(14,124,134,.55);background:rgba(14,124,134,.12)}
.i5-off{position:absolute;left:236px;top:28px;width:136px;padding:12px;border-radius:12px;background:#FFFFFF;color:#10151B;box-shadow:0 14px 28px -12px rgba(0,0,0,.6)}
.i5-k{display:block;font:500 12px/1 var(--font-body);color:#5B6069}
.i5-t{display:block;margin-top:6px;font:700 16px/1.1 var(--font-body)}
.i5-cnt{position:relative;display:block;margin-top:10px;height:15px;font:600 12px/1.25 var(--font-body)}
.i5-cnt .alt,.i5-st .alt{position:absolute;left:0;top:0}
.i5-bar{position:relative;display:block;margin-top:6px;height:6px;border-radius:3px;background:#E3E5E8;overflow:hidden}
.i5-bar i{position:absolute;inset:0;background:#1F9D61;transform:scaleX(.333);transform-origin:0 50%;transition:transform .8s var(--ease-in-out)}
.i5-bar i.st{transform:scaleX(.667)}
.i5-row{display:block;margin-top:12px;padding-top:10px;border-top:1px solid #ECEDEF}
.i5-row b{display:block;font:600 12px/1.2 var(--font-body)}
.i5-st{position:relative;display:block;margin-top:5px;height:15px;font:500 12px/1.25 var(--font-body);color:#5B6069}
.i5-st .ok{display:flex;align-items:center;gap:5px;color:#157347;font-weight:600;white-space:nowrap}
.i5-st .ok i{width:7px;height:7px;border-radius:50%;background:#1F9D61}
.i5-up{display:block;margin-top:10px;font:400 12px/1.2 var(--font-body);color:#5B6069}

/* 6. quote calculator */
.i6-body{display:grid;grid-template-columns:minmax(0,178fr) minmax(0,152fr);gap:12px;padding:12px}
.i6-q{display:flex;flex-direction:column}
.i6-l{display:block;margin:10px 0 4px;font:600 12px/1.2 var(--font-body);color:#5B6069}
.i6-l:first-child{margin-top:0}
.i6-seg{display:grid;grid-template-columns:repeat(3,1fr);height:24px;border-radius:6px;box-shadow:inset 0 0 0 1px #C9CDD3}
.i6-seg.two{grid-template-columns:1fr 1fr}
.i6-seg>span{position:relative;display:flex;align-items:center;justify-content:center;font:500 12px/1 var(--font-body);color:#3F444D;white-space:nowrap}
.i6-seg>span + span{box-shadow:inset 1px 0 0 #C9CDD3}
.i6-seg .sel i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#0E7C86;color:#FFFFFF;font-style:normal;font-weight:600;opacity:0;transition:opacity .35s}
.i6-seg .sel.st i{opacity:1}
.i6-tg{display:flex;align-items:center;gap:16px;height:24px;font:500 12px/1 var(--font-body);color:#3F444D}
.tgw{display:flex;align-items:center;gap:6px}
.tgl{position:relative;display:block;width:30px;height:18px;border-radius:9px;background:#D5D8DE}
.tgl::before{content:"";position:absolute;inset:0;border-radius:9px;background:#0E7C86;opacity:0;transition:opacity .35s}
.tgl i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .35s var(--ease-out)}
.tgl.st::before{opacity:1}
.tgl.st i{transform:translateX(12px)}
.i6-res{display:flex;flex-direction:column;padding:10px;border-radius:10px;background:#EEF5F5}
.i6-res b{font:600 12px/1.2 var(--font-body);color:#10151B}
.i6-rg{display:flex;align-items:center;gap:6px;margin-top:12px}
.i6-d{flex:none;font:600 12px/1 var(--font-body);color:#3F444D}
.i6-trk{position:relative;display:block;flex:1;height:8px;border-radius:4px;background:#D3DCDD}
.i6-band{position:absolute;left:30%;width:42%;top:0;bottom:0;border-radius:4px;background:#0E7C86;transform:scaleX(0);transition:transform .8s var(--ease-in-out)}
.i6-band.st{transform:none}
.i6-note{margin-top:8px;font:400 12px/1.3 var(--font-body);color:#3F444D}
.i6-btn{display:flex;align-items:center;justify-content:center;margin-top:auto;height:28px;border-radius:999px;background:#0E7C86;color:#FFFFFF;font:600 12px/1 var(--font-body);white-space:nowrap}
.i6-btn.st{animation:i6pulse .7s var(--ease-in-out) 1}
@keyframes i6pulse{50%{transform:scale(1.06)}}

/* 7. admin automation: the invoice that waits */
.i7-inv{position:absolute;left:236px;top:146px;width:136px;padding:9px 10px 8px;border-radius:10px;background:#FFFFFF;color:#10151B;box-shadow:0 14px 28px -12px rgba(0,0,0,.6)}
.i7-ih{display:block;padding-bottom:5px;border-bottom:1px solid #ECEDEF}
.i7-ih b{font:600 12px/1.15 var(--font-body)}
.i7-li{display:flex;justify-content:space-between;margin-top:6px}
.i7-li i{display:block;width:58%;height:5px;border-radius:3px;background:#D5D8DE}
.i7-li i.m{width:46%}
.i7-li i.s{width:22%}
.i7-send{display:flex;width:max-content;align-items:center;margin-top:7px;height:20px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px #0E7C86;color:#0A5A61;font:600 12px/1 var(--font-body)}
.ill.narrow .i7-inv{left:232px;top:118px;width:140px}

/* 8. customer portal */
.i8-body{position:relative;padding:8px 14px}
.i8-bw .bw-addr{width:62%}
.i8-t{display:block;font:700 17px/1.1 var(--font-body);letter-spacing:-.01em}
.i8-prog{position:relative;height:16px;margin:10px 26px 0}
.i8-trk,.i8-fill{position:absolute;left:0;right:0;top:7px;height:2px;border-radius:1px;background:#D5D8DE}
.i8-fill{background:#0E7C86;transform:scaleX(.25);transform-origin:0 50%;transition:transform .9s var(--ease-in-out)}
.i8-fill.st{transform:scaleX(.5)}
.i8-node{position:absolute;top:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#FFFFFF;box-shadow:inset 0 0 0 2px #C9CDD3}
.i8-node.done,.i8-dn{background:#0E7C86;box-shadow:none}
.i8-node.done::before,.i8-dn::before{content:"";position:absolute;left:5.5px;top:3px;width:3.5px;height:7px;border:solid #FFFFFF;border-width:0 2px 2px 0;transform:rotate(45deg)}
.i8-node.cur{box-shadow:inset 0 0 0 4px #0E7C86}
.i8-dn,.i8-cu{position:absolute;inset:0;border-radius:50%}
.i8-cu{background:#FFFFFF;box-shadow:inset 0 0 0 4px #0E7C86}
.i8-labs{position:relative;height:14px;margin:6px 26px 0}
.i8-labs span{position:absolute;top:0;transform:translateX(-50%);font:500 12px/1 var(--font-body);color:#3F444D;white-space:nowrap}
.i8-dl{display:block;margin-top:10px;font:600 12px/1 var(--font-body);color:#5B6069}
.i8-docs{display:flex;gap:8px;margin-top:6px}
.i8-doc{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:8px;box-shadow:inset 0 0 0 1px #D5D8DE;font:500 12px/1 var(--font-body);white-space:nowrap}
.i8-doc i{position:relative;display:block;width:10px;height:13px;border-radius:2px;box-shadow:inset 0 0 0 1.5px #0E7C86}
.i8-doc i::before{content:"";position:absolute;left:2.5px;right:2.5px;top:5px;height:1.5px;background:#0E7C86;box-shadow:0 3px 0 #0E7C86}
.i8-photo{display:flex;align-items:center;gap:8px;width:max-content;margin-top:6px;height:28px;padding:0 10px 0 3px;border-radius:8px;box-shadow:inset 0 0 0 1px #D5D8DE;font:500 12px/1 var(--font-body);white-space:nowrap}
.i8-photo img{display:block;width:36px;height:22px;border-radius:5px;object-fit:cover;object-position:40% 55%}
.i8-toast{position:absolute;right:10px;top:6px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:#12151B;color:#FDFDFB;font:600 12px/1 var(--font-body);box-shadow:0 10px 24px -8px rgba(9,13,20,.6)}
.i8-toast i{display:block;width:5px;height:10px;margin-top:-3px;border:solid var(--color-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* 9. AI video */
.i9-script{position:absolute;left:28px;top:28px;width:98px;padding:9px;border-radius:10px;background:#FFFFFF;color:#10151B;box-shadow:0 12px 24px -12px rgba(0,0,0,.6)}
.i9-script b{display:block;margin-bottom:10px;font:600 12px/1.3 var(--font-body)}
.i9-w{display:block;height:6px;margin-top:9px;border-radius:3px;background:#AEB4BC;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.i9-w.w2{width:86%}
.i9-w.w3{width:64%}
.i9-w.st{transform:none}
.i9-frame{position:absolute;left:134px;top:30px;width:122px;height:217px;border-radius:12px;background:#1B1B20;box-shadow:inset 0 0 0 1.5px rgba(242,241,236,.5);overflow:hidden}
.i9-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 50%;transform:scale(1);transform-origin:50% 60%}
[data-steps] .i9-img{transition:transform 5.5s linear}
.i9-img.st{transform:scale(1.12)}
.i9-cap{position:absolute;left:4px;right:4px;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font:600 12px/1.3 var(--font-body);letter-spacing:-.01em;color:#FFFFFF}
.i9-cap span{padding:1px 4px;border-radius:3px;background:rgba(11,11,13,.82);white-space:nowrap}
.i9-prog{position:absolute;left:8px;right:8px;bottom:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.i9-prog i{position:absolute;inset:0;background:#FFFFFF;transform:scaleX(0);transform-origin:0 50%}
[data-steps] .i9-prog i{transition:transform 3.4s linear}
.i9-prog i.st{transform:none}
.i9-th img{display:block;width:100%;height:100%;object-fit:cover;object-position:42% 50%}
.i9-ready .ck{width:16px;height:16px}
.i9-ready .ck::before{left:5.5px;top:3px;width:3.5px;height:7px}

/* 10. knowledge assistant */
.i10-site{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 140px;background:#FFFFFF;color:#10151B}
.i10-chat{position:relative;display:flex;flex-direction:column;gap:5px;padding:8px 10px}
.i10-qr{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.i10-who{font:500 12px/1 var(--font-body);color:#5B6069}
.sc .i10-q{max-width:100%;background:#1D2A44;color:#FFFFFF;border-bottom-right-radius:4px;white-space:nowrap}
.i10-ah{display:flex;align-items:center;gap:6px;margin-top:2px;font:600 12px/1 var(--font-body);color:#10151B}
.i10-a ol{margin:0;padding-left:16px}
.i10-a{max-width:92%}
.i10-src{display:flex;flex-wrap:wrap;gap:4px}
.i10-src span{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:6px;box-shadow:inset 0 0 0 1px #C9CDD3;font:500 12px/1 var(--font-body);white-space:nowrap}
.i10-src i{display:block;width:8px;height:10px;border-radius:1.5px;box-shadow:inset 0 0 0 1.5px #1D2A44}
.i10-docs{display:flex;flex-direction:column;gap:7px;padding:7px 6px;background:#F4F5F7;border-left:1px solid #E1E3E7}
.i10-dt{font:600 12px/1.2 var(--font-body);color:#5B6069}
.i10-doc{position:relative;padding:6px 8px 7px;border-radius:8px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #E1E3E7}
.i10-doc b{position:relative;z-index:1;display:block;margin-top:4px;font:600 12px/1.2 var(--font-body);white-space:nowrap}
.i10-dl{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:6px;height:16px}
.i10-dl i{display:block;width:52%;height:5px;border-radius:3px;background:#D5D8DE}
.i10-dl i.s{width:38%}
.i10-dl em{padding:2px 4px;border-radius:4px;background:var(--color-accent);color:#0F1F3D;font:600 12px/1 var(--font-mono);font-style:normal}
.i10-hl{position:absolute;inset:0;z-index:0;border-radius:8px;box-shadow:inset 0 0 0 2px var(--color-accent);pointer-events:none}
/* end content */

@media (prefers-reduced-motion:reduce){
  .ill>.sc,.ill>.sc *{transition:none!important;animation:none!important}
}