/* Shared animated scenes: built once, used on the home, work and Upwork pages. */
  /* iPhone */
  .phone-wrap { position: relative; width: 322px; margin: 0 auto; }
  .iphone { position: relative; width: 322px; height: 660px; border-radius: 56px; padding: 11px; background: linear-gradient(145deg, #48484b 0%, #1a1a1c 22%, #0c0c0d 60%, #3a3a3d 100%); box-shadow: inset 0 0 0 1.5px #77777c, inset 0 0 0 4px #161617, 0 70px 110px -40px #000, 0 0 90px -30px rgba(255,255,255,.08); }
  .iphone::before { content: ''; position: absolute; left: -2.5px; top: 128px; width: 3px; height: 30px; border-radius: 2px 0 0 2px; background: #2a2a2c; box-shadow: 0 58px 0 #2a2a2c, 0 112px 0 #2a2a2c; }
  .iphone::after { content: ''; position: absolute; right: -2.5px; top: 190px; width: 3px; height: 84px; border-radius: 0 2px 2px 0; background: #2a2a2c; }
  .screen { position: relative; height: 100%; border-radius: 45px; overflow: hidden; display: flex; flex-direction: column; background: #EFE9E1; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Geist', sans-serif; color: #111B21; }
  .island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 92px; height: 27px; border-radius: 20px; background: #000; z-index: 5; }
  .status { height: 50px; padding: 17px 28px 0 34px; display: flex; justify-content: space-between; align-items: flex-start; font-size: 14.5px; font-weight: 600; background: #F6F5F3; flex: none; }
  .status span { display: flex; gap: 5px; align-items: center; } .status svg { height: 11.5px; width: auto; fill: #111; }
  .wa-h { background: #F6F5F3; border-bottom: .5px solid rgba(0,0,0,.14); padding: 4px 12px 9px 6px; display: flex; align-items: center; gap: 8px; flex: none; }
  .wa-h .bk { color: #007AFF; font-size: 24px; display: flex; align-items: center; } .wa-h .bk span { font-size: 15px; margin-left: -3px; }
  .wa-h .av { width: 34px; height: 34px; border-radius: 50%; background: #0F766E; color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
  .wa-h .nm { flex: 1; min-width: 0; line-height: 1.2; } .wa-h .nm b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; } .wa-h .nm small { font-size: 11.5px; color: #667781; }
  .wa-h .acts { display: flex; gap: 17px; color: #007AFF; font-size: 21px; }
  .wa-b { position: relative; flex: 1; overflow: hidden; background: #EFE9E1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23DDD3C6' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='18' cy='20' r='6'/%3E%3Cpath d='M58 12l8 8m0-8l-8 8M96 26c4-8 12-8 14 0M22 70c6-6 12 6 18 0M70 60h14v10H70zM104 84l6 10h-12zM44 104a6 6 0 1 0 .1 0M84 106c4-6 10-6 14 0'/%3E%3C/svg%3E"); }
  .wa-l { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 9px 8px; display: flex; flex-direction: column; }
  .m { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .38s var(--ease), opacity .3s .08s; }
  .m.show { grid-template-rows: 1fr; opacity: 1; }
  .m > div { overflow: hidden; min-height: 0; display: flex; padding: 0 3px; } .m.o > div { justify-content: flex-end; }
  .bub { position: relative; max-width: 80%; margin-top: 5px; padding: 6px 8px 6px 9px; border-radius: 9px; background: #fff; font-size: 13.2px; line-height: 1.32; box-shadow: 0 1px .5px rgba(11,20,26,.13); transform-origin: left bottom; }
  .m.o .bub { background: #D9FDD3; transform-origin: right bottom; }
  .m.show .bub { animation: pop .4s var(--ease); } @keyframes pop { from { transform: scale(.82); } }
  .bub .t { float: right; margin: 7px 0 -3px 10px; font-size: 10px; color: #667781; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
  .bub .t svg { width: 15px; height: 10px; fill: none; stroke: #8696A0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s 1.1s; } .m.show .bub .t svg { stroke: #53BDEB; }
  .day { align-self: center; margin: 6px 0 3px; padding: 4px 11px; border-radius: 8px; background: #fff; font-size: 11px; color: #54656F; box-shadow: 0 1px .5px rgba(11,20,26,.1); }
  .vn { display: flex; align-items: center; gap: 9px; width: 196px; padding: 3px 2px 0; } .vn .pl { font-size: 20px; color: #8696A0; display: flex; }
  .vn .wv { flex: 1; display: flex; align-items: center; gap: 2px; height: 24px; } .vn .wv i { flex: 1; border-radius: 2px; background: #B4BFC6; height: var(--h); }
  .m.show .vn .wv i { animation: wv 1.6s linear .5s both; animation-delay: calc(.5s + var(--k) * 60ms); } @keyframes wv { to { background: #1FA855; } }
  .vn .avm { width: 32px; height: 32px; border-radius: 50%; background: #0F766E; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
  .vn-d { font-size: 10px; color: #667781; margin-left: 31px; }
  .pdf { display: flex; gap: 9px; align-items: center; width: 214px; padding: 9px; margin: -2px -4px 5px -5px; border-radius: 7px; background: rgba(0,0,0,.055); }
  .pdf i { flex: none; width: 27px; height: 32px; border-radius: 4px; background: #E5412D; color: #fff; display: grid; place-items: center; font: 700 8px var(--sans); font-style: normal; letter-spacing: .03em; }
  .pdf b { display: block; font-weight: 500; font-size: 12.6px; } .pdf small { font-size: 10.5px; color: #667781; }
  .ibtn { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 8px -8px -6px -9px; padding: 9px; border-top: .5px solid rgba(0,0,0,.12); color: #027EB5; font-size: 13.2px; clear: both; }
  .wa-in { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 10px 6px; background: #F6F5F3; color: #111; font-size: 22px; }
  .wa-in div { flex: 1; height: 32px; border-radius: 17px; background: #fff; border: .5px solid rgba(0,0,0,.14); }
  .home { flex: none; height: 22px; background: #F6F5F3; display: grid; place-items: center; } .home::after { content: ''; width: 118px; height: 4.5px; border-radius: 3px; background: #111; }
  .chip-unused { position: absolute; z-index: 6; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); border: 1px solid var(--line-2); font-size: .84rem; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(10px) scale(.92); transition: all .6s var(--ease); }
  .chip.on { opacity: 1; transform: none; }
  .chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18,146,90,.18); }
  .chip.c1, .chip.c2 { right: calc(100% - 20px); } .chip.c1 { top: 150px; } .chip.c2 { bottom: 150px; } .chip.ai { left: 50%; top: -20px; transform: translate(-50%, 10px) scale(.92); } .chip.ai.on { transform: translate(-50%, 0); }
  .chip.ai::before { background: var(--ink); box-shadow: none; animation: blink 1s infinite; } @keyframes blink { 50% { opacity: .25; } }

  /* invoice scene */
  .inv { padding: 22px; border-radius: 26px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 62px minmax(0, .95fr) minmax(0, 1.05fr); gap: 18px; align-items: center; }
  .rail { display: grid; gap: 14px; justify-items: center; position: relative; } .rail::before { content: attr(data-l); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  .th { position: relative; width: 46px; height: 58px; border-radius: 5px; background: #FDFCF9; padding: 8px 7px; opacity: 0; transform: translateX(-16px); transition: all .6s var(--ease); box-shadow: 0 6px 14px -8px #000; }
  .th.mail { background: #E8EEFB; } .th.hand { background: #FFF7C7; transform: translateX(-16px) rotate(-3deg); }
  .th i { display: block; height: 2.5px; border-radius: 1px; background: #B9B6AE; margin-bottom: 5px; } .th i:first-child { width: 60%; background: #333; }
  .th.in { opacity: 1; transform: none; } .th.hand.in { transform: rotate(-3deg); }
  .th.act { box-shadow: 0 0 0 2px var(--red), 0 8px 18px -8px #000; } .th.done { opacity: .45; }
  .th em { position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; transform: scale(0); transition: transform .4s var(--ease); } .th.done em { transform: scale(1); } .th.warn em { background: var(--amber); }
  .th em svg { width: 9px; height: 9px; fill: none; stroke: #06140D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .docv { position: relative; height: 320px; }
  .bill { position: absolute; inset: 0; border-radius: 8px; padding: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -12px rgba(19,19,18,.3); font-size: 9.5px; color: #333; opacity: 0; transform: translateY(24px) rotate(var(--r, 0deg)) scale(.96); transition: all .7s var(--ease); display: flex; flex-direction: column; }
  .bill.on { opacity: 1; transform: rotate(var(--r, 0deg)); } .bill.out { opacity: 0; transform: translateX(40%) rotate(4deg) scale(.9); }
  .bill .hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; } .bill .hd b { font-size: 13px; letter-spacing: .04em; }
  .bill table { width: 100%; border-collapse: collapse; margin: 10px 0; } .bill td { padding: 5px 0; border-bottom: 1px solid #eee; } .bill td:last-child { text-align: right; }
  .bill .tot { margin-top: auto; display: flex; justify-content: space-between; font-weight: 700; font-size: 11px; border-top: 1.5px solid #222; padding-top: 8px; }
  .bill.mail { padding: 0; overflow: hidden; } .bill.mail .mh { padding: 12px 14px; background: #F3F6FC; border-bottom: 1px solid #E1E6F0; font-family: var(--sans); font-size: 10px; color: #444; } .bill.mail .mh b { display: block; font-size: 11.5px; color: #111; margin-bottom: 2px; } .bill.mail .mb { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
  .bill.hand { --r: -2.5deg; background: #FFFBE3; font-family: 'Caveat', cursive; font-size: 17px; line-height: 1.5; color: #1E2A55; border-color: #EFE6B8; } .bill.hand .tot { border-color: #1E2A55; font-size: 19px; }
  .hl { position: relative; border-radius: 3px; outline: 1.5px solid transparent; outline-offset: 2px; transition: outline-color .3s, background .3s; }
  .hl.on { outline-color: var(--red); background: rgba(229,65,45,.08); }
  .hl::after { content: attr(data-k); position: absolute; left: -2px; top: calc(100% + 5px); padding: 1px 6px; border-radius: 4px; background: var(--red); color: #fff; font: 500 8.5px var(--sans); letter-spacing: .02em; opacity: 0; transform: translateY(4px); transition: all .3s; white-space: nowrap; }
  .hl.on::after { opacity: 1; transform: none; } .tot .hl::after { top: auto; bottom: calc(100% + 5px); left: auto; right: -2px; }
  .scanbar { position: absolute; left: -4px; right: -4px; top: 0; height: 40px; z-index: 3; background: linear-gradient(180deg, transparent, rgba(229,65,45,.16)); border-bottom: 2px solid var(--red); opacity: 0; pointer-events: none; }
  .scanbar.go { animation: scan 1.1s ease-in-out; } @keyframes scan { 0% { top: -40px; opacity: 1; } 100% { top: 100%; opacity: 1; } }
  .clear { position: absolute; inset: 0; border-radius: 12px; border: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 500; opacity: 0; transform: scale(.96); transition: all .6s var(--ease); } .clear.on { opacity: 1; transform: none; } .clear small { color: var(--dim); font-weight: 400; font-size: .8rem; } .clear i { width: 40px; height: 40px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; margin-bottom: 6px; } .clear svg { width: 20px; height: 20px; fill: none; stroke: #06140D; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .qb { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper-2); font-size: .82rem; }
  .qb .top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); font-weight: 600; letter-spacing: -.02em; } .qb .top i { width: 24px; height: 24px; border-radius: 50%; background: #2CA01C; color: #fff; display: grid; place-items: center; font: 700 10px var(--sans); font-style: normal; } .qb .top span { margin-left: auto; font-weight: 400; color: var(--dim); font-size: .76rem; }
  .inv > * { min-width: 0; } .qb .hd, .qb .rw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 0 16px; align-items: center; } .qb .rw > span:last-child { font-weight: 500; } .qb .rw > span:first-child { display: grid; gap: 5px; justify-items: start; min-width: 0; }
  .qb .hd { height: 34px; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); background: rgba(255,255,255,.03); }
  .qb .rw { height: 72px; border-top: 1px solid var(--line-2); opacity: 0; transform: translateY(-10px); transition: all .6s var(--ease); } .qb .rw.on { opacity: 1; transform: none; } .qb .rw.new { background: rgba(61,214,140,.08); }
  .qb .rw b { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qb .rw small { color: var(--dim); font-size: .72rem; }
  .qb .ft { display: flex; justify-content: space-between; padding: 13px 16px; border-top: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--mute); font-size: .8rem; } .qb .ft b { color: var(--ink); font-weight: 600; }

  .live { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 13px; margin-top: 30px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: .86rem; color: var(--mute); transition: color .4s, border-color .4s; }
  .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); transition: background .3s; }
  .live.on { color: var(--ink); border-color: rgba(61,214,140,.4); } .live.on i { background: var(--ok); animation: blink 1s infinite; } @keyframes blink { 50% { opacity: .25; } }

/* ───────── ARIA, the AI that does the work in every scene ───────── */
.aria { display: inline-block; width: var(--s, 40px); height: var(--s, 40px); flex: none; }
.aria svg { width: 100%; height: 100%; overflow: visible; display: block; }
.aria .a-eyes { transform-box: fill-box; transform-origin: center; animation: ablink 4.2s infinite; }
.aria .a-glow { opacity: 0; filter: blur(7px); }
@keyframes ablink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
.aria.busy { animation: abob .9s ease-in-out infinite; }
.aria.busy .a-glow { animation: aglow .7s ease-in-out infinite alternate; }
.aria.busy .a-eyes { animation: alook 1.5s ease-in-out infinite; }
@keyframes abob { 50% { transform: translateY(-3px); } }
@keyframes aglow { to { opacity: .95; } }
@keyframes alook { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.aria.happy .a-smile { stroke-width: 9; }
.ai-st { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: .92rem; color: var(--mute); transition: border-color .4s, color .4s; }
.ai-st b { font-weight: 500; color: inherit; } .ai-st.on { color: var(--ink); border-color: rgba(240,80,60,.45); }
.ai-st .dots { display: inline-flex; gap: 3px; margin-left: 2px; opacity: 0; } .ai-st.on .dots { opacity: 1; }
.ai-st .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: bop 1s infinite; } .ai-st .dots i:nth-child(2) { animation-delay: .15s; } .ai-st .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bop { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes dash { to { stroke-dashoffset: -22; } }

/* chat without the phone, for cards */
.chatwin { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); height: 380px; }
.chatwin .screen { border-radius: 0; } .chatwin .wa-h { padding-top: 10px; }
.chat-card { display: grid; gap: 14px; justify-items: start; } .chat-card .chatwin { width: 100%; } .chat-card .ai-st { height: 46px; font-size: .84rem; }

/* documents: a form, ARIA, then the pages it fills */
.docs { padding: 22px; border-radius: 26px; box-shadow: var(--shadow-lg); position: relative; }
.docs-in { display: grid; grid-template-columns: 190px 76px minmax(0, 1fr); align-items: center; }
.intake { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: rgba(255,255,255,.025); }
.intake h5 { font-size: .92rem; font-weight: 600; letter-spacing: -.02em; } .intake > small { color: var(--dim); font-size: .76rem; display: block; margin-bottom: 14px; }
.intake label { display: block; font-size: .7rem; color: var(--mute); margin-bottom: 4px; }
.inp { height: 33px; border-radius: 9px; border: 1px solid var(--line); background: #120C0A; padding: 0 10px; font-size: .78rem; display: flex; align-items: center; margin-bottom: 10px; transition: border-color .3s, box-shadow .3s; white-space: nowrap; overflow: hidden; }
.inp.f { border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 3px rgba(255,255,255,.07); } .inp.f::after { content: ''; width: 1.5px; height: 15px; background: var(--ink); margin-left: 1px; animation: blink .9s infinite; }
.send { height: 36px; border-radius: 10px; background: var(--ink); color: #0C0807; font-size: .82rem; font-weight: 500; display: grid; place-items: center; transition: transform .2s, background .3s; margin-top: 4px; }
.send.hit { transform: scale(.95); } .send.done { background: var(--ok); color: #06140D; }
.hub { position: relative; display: grid; justify-items: center; gap: 6px; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.hub::before, .hub::after { content: ''; position: absolute; top: 24px; width: 14px; border-top: 1.5px dashed rgba(255,255,255,.2); } .hub::before { left: 0; } .hub::after { right: 0; }
.busy-hub .hub::before, .busy-hub .hub::after { border-color: var(--red); } .busy-hub .hub { color: var(--ink); }
.pages { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 10px; }
.pg { position: relative; aspect-ratio: 8.5 / 10.2; border-radius: 4px; background: #FDFCF9; padding: 8% 9% 0; box-shadow: 0 8px 18px -10px #000; overflow: hidden; color: #222; opacity: 0; transform: translateX(-22px) scale(.8); transition: opacity .4s, transform .55s var(--ease), box-shadow .5s; }
.pg.on { opacity: 1; transform: none; } .pg.done { box-shadow: 0 10px 22px -10px #000, 0 0 0 1.5px rgba(61,214,140,.7); }
.pg .g { display: flex; justify-content: space-between; padding-bottom: 4%; border-bottom: 1px solid #222; } .pg .g i { height: 2px; width: 32%; background: #8B8B8B; }
.pg .h { height: 3px; margin: 7% auto 8%; background: #222; border-radius: 1px; }
.pg .f { margin-bottom: 7%; border-bottom: 1px solid #A9A9A9; padding-bottom: 1px; overflow: hidden; min-width: 0; } .pg .f i { display: block; height: 1.5px; width: 34%; background: #B5B5B5; margin-bottom: 3px; }
.pg .f span { display: block; font: 500 6.5px/1.15 var(--mono); color: #1D3FBF; white-space: nowrap; overflow: hidden; max-width: 0; padding: 1px 0; border-radius: 1px; }
.pg.on .f span { animation: write .5s steps(14) forwards, ink 1s ease forwards; animation-delay: calc(.12s + var(--k) * .16s); }
@keyframes write { to { max-width: 100%; } } @keyframes ink { 0%, 60% { background: #FFE98A; } 100% { background: transparent; } }
.pg .row2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8%; } 
.pg .l { height: 2px; background: #DDDAD3; margin-bottom: 6%; border-radius: 1px; }
.pg em { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; transform: scale(0); transition: transform .45s var(--ease); } .pg.done em { transform: scale(1); }
.pg em svg, .th em svg { width: 9px; height: 9px; fill: none; stroke: #06140D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.docs-ft { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.docs-ft .c { font-size: .95rem; color: var(--dim); } .docs-ft .c b { font-size: 1.7rem; font-weight: 600; letter-spacing: -.04em; color: var(--ink); margin-right: 6px; }
.toast { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: .84rem; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: all .5s var(--ease); } .toast.on { opacity: 1; transform: none; }

/* extract: ARIA rides the scanner */
.inv .docv { margin-top: 40px; }
.reader { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 9px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); font-size: .7rem; color: var(--mute); white-space: nowrap; transition: border-color .3s, color .3s; }
.reader b { font-weight: 500; } .reader.on { color: var(--ink); border-color: rgba(240,80,60,.55); } .reader .aria { --s: 26px !important; margin-top: -2px; }
.scanbar { height: 70px !important; background: linear-gradient(180deg, transparent, rgba(240,80,60,.08) 40%, rgba(240,80,60,.34)) !important; border-bottom: 2px solid var(--red) !important; box-shadow: 0 8px 22px -4px rgba(240,80,60,.55); }
.qb .top img { width: 24px; height: 24px; object-fit: contain; }
.bill.list { font-family: var(--sans); padding: 14px; } .bill.list h6 { font-size: 11px; margin-bottom: 10px; color: #111; letter-spacing: -.01em; }
.bill.list .li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #eee; font-size: 10px; color: #333; } .bill.list .li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--c, #ddd); flex: none; }
.bill.list .li small { display: block; color: #888; font-size: 8.5px; }
.bill.sheet { font-family: var(--mono); padding: 0; overflow: hidden; } .bill.sheet .sh { display: grid; grid-template-columns: 22px 1.4fr 1fr; font-size: 9px; border-bottom: 1px solid #DADADA; } .bill.sheet .sh > * { padding: 7px 6px; border-right: 1px solid #DADADA; } .bill.sheet .sh:first-child { background: #1D6F42; color: #fff; font-family: var(--sans); font-weight: 600; } .bill.sheet .sh > :first-child { background: #F1F1F1; color: #777; text-align: center; } .bill.sheet .sh:first-child > :first-child { background: #185C37; }

/* publish: a brief goes in, finished posts come out */
.pub { padding: 22px; border-radius: 26px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, .66fr) 64px minmax(0, 1.34fr); align-items: center; }
.brief { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: rgba(255,255,255,.025); } .brief h5 { font-size: .9rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 12px; }
.brief .ln { font-size: .78rem; color: var(--mute); padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: #120C0A; margin-bottom: 8px; min-height: 33px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief .ln small { display: block; font-size: .62rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.posts { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 10px; }
.post { border-radius: 12px; background: #fff; color: #111; overflow: hidden; opacity: 0; transform: translateY(18px) scale(.94); transition: all .6s var(--ease); box-shadow: 0 10px 24px -12px #000; }
.post.on { opacity: 1; transform: none; }
.post .ph { display: flex; align-items: center; gap: 6px; padding: 7px 8px; font: 600 9px var(--sans); } .post .ph i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: none; }
.post .im { aspect-ratio: 1 / 1; background: #E9E7E1; position: relative; overflow: hidden; } .post.wide .im { aspect-ratio: 16 / 10; } .post.tall .im { aspect-ratio: 9 / 13; }
.post .im::before { content: ''; position: absolute; inset: 0; background: var(--g); opacity: 0; transition: opacity .8s .3s; } .post.on .im::before { opacity: 1; }
.post .im::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); transform: translateX(-100%); } .post.on .im::after { animation: sheen .9s ease .1s; } @keyframes sheen { to { transform: translateX(100%); } }
.post .im span { position: absolute; left: 8px; right: 8px; bottom: 8px; font: 700 10px/1.15 var(--sans); color: #fff; letter-spacing: -.02em; opacity: 0; transition: opacity .5s .7s; text-shadow: 0 1px 6px rgba(0,0,0,.4); } .post.on .im span { opacity: 1; }
.post .cp { padding: 8px; } .post .cp i { display: block; height: 3px; border-radius: 2px; background: #D9D6CF; margin-bottom: 4px; } .post .cp i:last-child { width: 60%; margin: 0; }
.post .ok { display: flex; align-items: center; gap: 5px; padding: 0 8px 8px; font: 500 8.5px var(--sans); color: #12925A; opacity: 0; transition: opacity .4s; } .post.live .ok { opacity: 1; }

/* notify: a tracker moves, the right person hears about it */
.ntf { padding: 22px; border-radius: 26px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, 1.1fr) 70px minmax(0, 1fr); align-items: center; }
.trk { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper-2); font-size: .8rem; } .trk h5 { padding: 13px 14px; font-size: .88rem; font-weight: 600; letter-spacing: -.02em; border-bottom: 1px solid var(--line-2); }
.trk .r { padding: 11px 14px; border-top: 1px solid var(--line-2); transition: background .5s; } .trk .r:first-of-type { border-top: 0; } .trk .r.hit { background: rgba(61,214,140,.09); }
.trk .r div { display: flex; justify-content: space-between; margin-bottom: 7px; } .trk .r small { color: var(--dim); font-family: var(--mono); font-size: .7rem; }
.trk .bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .trk .bar i { display: block; height: 100%; width: var(--from); background: var(--mute); border-radius: 3px; transition: width 1.2s var(--ease), background .4s; } .trk .r.mv .bar i { width: var(--to); } .trk .r.hit .bar i { background: var(--ok); }
.alerts { display: grid; gap: 10px; } .al { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); font-size: .78rem; line-height: 1.35; opacity: 0; transform: translateX(20px) scale(.95); transition: all .6s var(--ease); } .al.on { opacity: 1; transform: none; }
.al svg.i { font-size: 1rem; color: var(--ok); margin-top: 2px; } .al small { display: block; color: var(--dim); font-size: .7rem; }

@media (max-width: 600px) {
  .docs-in, .pub, .ntf, .inv { grid-template-columns: 1fr; gap: 14px; } .docs, .inv, .pub, .ntf { padding: 16px; }
  .hub::before, .hub::after { display: none; } .rail { grid-auto-flow: column; justify-content: start; } .rail::before { display: none; }
  .pages { --cols: 5 !important; } .phone-wrap { transform: scale(.94); }
}

/* ───────── testimonials ───────── */
/* testimonials: three in view, drifting left to right */
.tw { margin-top: 64px; overflow: hidden; padding: 8px 0 30px; container-type: inline-size; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tt { display: flex; gap: 22px; width: max-content; animation: ltr 80s linear infinite; }
.tw:hover .tt, .tw:focus-within .tt { animation-play-state: paused; }
@keyframes ltr { from { transform: translateX(calc(-50% - 11px)); } to { transform: translateX(0); } }
.tc { flex: none; width: calc((100cqw - 44px) / 3); min-height: 300px; padding: 28px; border-radius: 22px; background: linear-gradient(180deg, #1C1411, #150F0D); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .5s var(--ease), border-color .4s, background .4s; }
.tc:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.28); }
.tc .st { display: flex; gap: 3px; margin-bottom: 18px; color: var(--amber); font-size: .95rem; } .tc .st svg { fill: currentColor; stroke: none; }
.tc q { quotes: none; font-size: 1.04rem; line-height: 1.5; letter-spacing: -.01em; color: #E4E2DC; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tc .who { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 12px; }
.tc .who i { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; flex: none; background: #fff; } .tc .who i img, .tc .who i svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.tc .who b { display: block; font-weight: 600; font-size: .95rem; letter-spacing: -.02em; } .tc .who small { color: var(--mute); font-size: .78rem; }
.tc .tpj { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--mute); }
.tc .tpj .go { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.07); display: grid; place-items: center; color: var(--ink); transition: all .35s var(--ease); } .tc:hover .tpj .go { background: var(--ink); color: #0C0807; transform: rotate(-45deg); }
@media (max-width: 940px) { .tc { width: calc((100cqw - 22px) / 2); } }
@media (max-width: 600px) { .tc { width: 84cqw; } }


.qb .rw > span:first-child { overflow: hidden; } .qb .rw .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 24px; } .qb .rw > span:last-child { white-space: nowrap; }

/* chat: full phone everywhere, display pictures, Telegram skin */
.wa-h .av, .vn .avm { overflow: hidden; } .wa-h .av svg, .vn .avm svg, .wa-h .av img, .vn .avm img { width: 100%; height: 100%; display: block; object-fit: cover; }
.phone-under { display: grid; justify-items: center; margin-top: 18px; }
.wa-field { display: flex; align-items: center; padding: 0 12px; font-size: 12.5px; color: #111; white-space: nowrap; overflow: hidden; }
.screen.tg { background: #A8CDA4; } .screen.tg .status, .screen.tg .wa-h, .screen.tg .wa-in, .screen.tg .home { background: #fff; }
.screen.tg .wa-h { justify-content: space-between; padding: 4px 12px 9px 6px; } .screen.tg .wa-h .nm { text-align: center; } .screen.tg .wa-h .bk span { font-size: 15px; margin-left: -2px; }
.screen.tg .wa-h .av { background: #2AABEE; } .screen.tg .wa-st { color: #2AABEE !important; }
.screen.tg .wa-b { background: linear-gradient(160deg, #D5E3B5, #A8CDA4 50%, #8DBFAE); }
.screen.tg .bub { border-radius: 14px; font-size: 13.4px; } .screen.tg .m.o .bub { background: #EEFFDE; } .screen.tg .bub .t { color: #6FB26A; } .screen.tg .m:not(.o) .bub .t { color: #8C959C; }
.screen.tg .m.show .bub .t svg { stroke: #4FAE4E; } .screen.tg .day { background: rgba(0,0,0,.22); color: #fff; box-shadow: none; border-radius: 999px; }
.screen.tg .vn .pl { width: 34px; height: 34px; border-radius: 50%; background: #4FAE4E; color: #fff; display: grid; place-items: center; font-size: 15px; } .screen.tg .vn .pl svg { width: 16px; height: 16px; } .screen.tg .vn .avm { display: none; } .screen.tg .vn-d { margin-left: 44px; }
.screen.tg .m.show .vn .wv i { animation: none; background: #4FAE4E; }
/* docs: wires from ARIA to every row */
.hub.wired { align-self: stretch; align-content: center; } .hub.wired::before, .hub.wired::after { display: none; }
.hub .wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .hub .wires path { fill: none; stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .5s; }
.wired-on .hub .wires path { opacity: .9; animation: dash .5s linear infinite; } .wired-done .hub .wires path { stroke: var(--ok); opacity: .55; animation: none; }
.hub.wired span { opacity: .5; transition: opacity .4s; } .wired-on .hub.wired span { opacity: 1; }
.hub.wired .aria { position: relative; z-index: 1; background: var(--paper); border-radius: 50%; box-shadow: 0 0 0 8px var(--paper); } .hub.wired span { position: relative; z-index: 1; background: var(--paper); padding: 0 4px; }