/* apps-page.css — one room (/apps/<id>, prefix ap-): the hero with its clay tile and the rooms around it, ask the chat (a
   phone), who works here, the procedures, the rooms it works with, the businesses, the way on. The super view is apps-sv.css. */

/* ── the hero ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ap-rh-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);row-gap:0}
.ap-rh-in>.k-crumbs{grid-column:1/-1;grid-row:1;margin-bottom:6px}
.ap-rh-copy,.ap-rh-art{grid-row:2}
.ap-rh h1.ap-h1{font-size:clamp(2.8rem,5.6vw,5.4rem)}
.ap-rh .k-lead{max-width:30em}
.ap-rh .ap-stats{margin-top:30px}
.ap-rh .k-phero-acts{margin-top:34px}
.ap-rh .k-btn svg{width:18px;height:18px}
.ap-rh-art{position:relative;container-type:inline-size;justify-self:center;width:100%;max-width:460px;aspect-ratio:1/.96}
.ap-rh-glow{position:absolute;inset:-4% -6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,252,228,.95),rgba(255,252,228,0));filter:blur(4px)}
.ap-rh-floor{position:absolute;inset-inline-start:18%;inset-inline-end:18%;bottom:-2%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(110,50,0,.3),rgba(110,50,0,0));filter:blur(8px)}
.ap-rh-tile{position:absolute;inset-inline-start:15%;top:10%;width:70%;--r:-6deg}
.ap-rh-tile img{width:100%;border-radius:23%;transform:rotate(-6deg);box-shadow:0 46px 50px -26px rgba(90,40,0,.6),0 12px 18px -6px rgba(90,40,0,.28),inset 0 0 0 1px rgba(255,255,255,.35);animation:k-float 7.5s ease-in-out infinite}
.ap-orb{position:absolute;z-index:2;inset-inline-start:var(--x);top:var(--y);width:var(--w);text-decoration:none;-webkit-tap-highlight-color:transparent}
.ap-orb img{width:100%;border-radius:23%;transform:rotate(var(--r));box-shadow:0 18px 22px -12px rgba(90,40,0,.55),0 4px 8px -2px rgba(90,40,0,.22);animation:k-float 8s ease-in-out var(--dl,0s) infinite;transition:scale .45s var(--spring)}
.ap-orb:hover img{scale:1.1}
.ap-orb-t{position:absolute;inset-inline-start:50%;top:calc(100% + 8px);translate:-50% 0;padding:7px 12px;border-radius:999px;background:var(--cream-50);box-shadow:inset 0 1px 0 #fff,0 10px 18px -8px rgba(90,40,0,.45);font:650 .8125rem/1 var(--display);color:var(--plum-600);white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .3s var(--spring);pointer-events:none}
.ap-orb:hover .ap-orb-t{opacity:1;transform:none}
.ap-rh-st{position:absolute;z-index:3;height:auto;filter:drop-shadow(0 12px 10px rgba(70,8,36,.3));animation:k-float 6.8s ease-in-out infinite}
.ap-rh-st--1{inset-inline-start:57%;top:-4%;width:9%;--r:10deg}
.ap-rh-st--2{inset-inline-start:47%;top:91%;width:5%;--r:-8deg;animation-delay:-2.6s}
/* the room's clay objects: a sticker over the tile's corner, a second one beside it */
.ap-rh-prop{position:absolute;z-index:4;height:auto;filter:drop-shadow(0 16px 14px rgba(70,8,36,.35));animation:k-float 7.4s ease-in-out infinite}
.ap-rh-prop--1{inset-inline-start:64%;top:61%;width:27%;--r:-8deg;animation-delay:-1.2s}
.ap-rh-prop--2{inset-inline-start:-6%;top:42%;width:18%;--r:8deg;animation-delay:-3.8s}
@media (max-width:900px){.ap-rh-in{grid-template-columns:minmax(0,1fr)}.ap-rh-art{grid-row:2;max-width:340px;margin:8px 0 -4px}.ap-rh-copy{grid-row:3}}
@media (max-width:560px){.ap-rh-art{max-width:270px}}

/* ── ask the chat ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.ap-more .k-h2,.ap-end .k-h2{color:var(--plum-600)}
.ap-ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.ap-ask .k-h2{margin-top:18px}
.ap-ask .k-lead{margin-top:18px}
.ap-ask-h{margin-top:30px;font:650 .75rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--plum-500)}
.ap-asks{display:grid;gap:10px;margin-top:14px}
.ap-asks li{display:flex;align-items:flex-start;gap:12px;padding-block:13px; padding-inline:14px 18px;border-radius:20px;background:var(--k-paper);box-shadow:var(--k-paper-shadow);font:600 1rem/1.4 var(--text);color:var(--ink)}
.ap-asks img{width:20px;height:auto;margin-top:1px;flex:none}
.ap-asks span::before{content:"“"}.ap-asks span::after{content:"”"}
.ap-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ap-ask-art{position:relative;justify-self:center;width:min(100%,340px)}
.ap-ask-st{position:absolute;height:auto;z-index:2;filter:drop-shadow(0 10px 8px rgba(120,60,0,.38));animation:k-float 7s ease-in-out infinite}
.ap-ask-st{filter:drop-shadow(0 16px 14px rgba(70,8,36,.3))}
.ap-ask-st--1{inset-inline-start:-20%;top:18%;width:30%;--r:-8deg}
.ap-ask-st--2{inset-inline-end:-12%;top:52%;width:13%;--r:10deg;animation-delay:-2.5s}

/* the phone: a plum clay body, a cream screen, the room's conversation */
.ap-ph{container-type:inline-size;position:relative;aspect-ratio:9/18.4;transform:perspective(1400px) rotateY(-9deg) rotateZ(2.5deg);transform-origin:30% 60%}
.ap-ph-body{position:absolute;inset:0;padding:2.7cqw;border-radius:14.5cqw;background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow),inset 0 0 0 .5cqw rgba(255,255,255,.07),0 60px 70px -34px rgba(60,6,30,.7)}
.ap-ph-btn{position:absolute;width:1.1cqw;border-radius:1cqw;background:linear-gradient(90deg,#7a0f44,#a3205f);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.ap-ph-btn--1{inset-inline-start:-.7cqw;top:20%;height:6cqw}.ap-ph-btn--2{inset-inline-start:-.7cqw;top:29%;height:10cqw}.ap-ph-btn--3{inset-inline-end:-.7cqw;top:26%;height:14cqw}
.ap-ph-scr{position:relative;display:flex;flex-direction:column;height:100%;border-radius:12cqw;overflow:hidden;background:#fff4dc;box-shadow:inset 0 0 0 .4cqw rgba(0,0,0,.18),inset 0 1cqw 2cqw rgba(60,6,30,.12)}
.ap-ph-scr::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 32%)}
.ap-ph-isl{position:absolute;inset-inline-start:50%;top:2.4cqw;width:27cqw;height:7.4cqw;margin-inline-start:-13.5cqw;border-radius:5cqw;background:#1a0510;z-index:3}
.ap-ph-bar{position:relative;z-index:2;display:flex;align-items:center;gap:3cqw;padding:12cqw 4.4cqw 3cqw;background:linear-gradient(180deg,#fffaf0,#fff0cf);box-shadow:0 .6cqw 1.6cqw -1cqw rgba(90,40,0,.3)}
.ap-ph-av{display:grid;place-items:center;flex:none;width:10.4cqw;height:10.4cqw;border-radius:50%;background:var(--cream-50);box-shadow:inset 0 0 0 .5cqw rgba(100,8,46,.1),0 .8cqw 1.4cqw -.6cqw rgba(90,40,0,.4)}
.ap-ph-av img{width:7.6cqw;height:auto}
.ap-ph-who{display:grid;gap:.6cqw;flex:1;min-width:0}
.ap-ph-who b{font:750 4.4cqw/1 var(--display);letter-spacing:-.01em;color:var(--plum-600)}
.ap-ph-who small{font:500 2.9cqw/1.1 var(--text);color:#2f7a4d}
.ap-ph-ex{padding:1.2cqw 2.4cqw;border-radius:999px;background:rgba(100,8,46,.08);font:650 2.3cqw/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ap-ph-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2.4cqw;padding:3.4cqw 3.6cqw;overflow:hidden;background-color:#fdf0d2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 22 29.600 26.400 34 28 29.600 29.600 28 34 26.400 29.600 22 28 26.400 26.400Z' fill='%23d9a441' fill-opacity='.22'/%3E%3C/svg%3E")}
.ap-ph-day{align-self:center;padding:1cqw 3cqw;border-radius:999px;background:rgba(255,255,255,.7);font:650 2.6cqw/1 var(--text);color:var(--ink-3);box-shadow:0 .4cqw .8cqw -.4cqw rgba(90,40,0,.3)}
.ap-msg{position:relative;max-width:86%;padding:2.6cqw 3.4cqw 2.2cqw;border-radius:4.4cqw;font-size:4.1cqw;line-height:1.38}
.ap-msg p{margin:0}
.ap-msg small{display:block;margin-top:.9cqw;text-align:end;font:500 2.6cqw/1 var(--text);opacity:.6}
.ap-msg--me{align-self:flex-end;background:var(--k-grain),var(--k-gold-clay);color:var(--plum-700);border-end-end-radius:1.2cqw;box-shadow:var(--k-gold-shadow);font-weight:600}
.ap-msg--bot{align-self:flex-start;background:var(--cream-50);color:var(--ink);border-end-start-radius:1.2cqw;box-shadow:inset 0 1px 0 #fff,0 .5cqw 0 rgba(0,0,0,.03),0 2.6cqw 4cqw -2.6cqw rgba(110,50,0,.45)}
.ap-rr{color:#2f7a8d;letter-spacing:-.18em;margin-inline-start:.4cqw}
.ap-msg--typing{display:none;gap:1.2cqw;align-self:flex-start;padding:3.2cqw 3.6cqw;background:var(--cream-50);box-shadow:0 2.6cqw 4cqw -2.6cqw rgba(110,50,0,.4)}
.ap-msg--typing i{width:2cqw;height:2cqw;border-radius:50%;background:rgba(100,8,46,.35);animation:ap-typing 1s ease-in-out infinite}
.ap-msg--typing i:nth-child(2){animation-delay:.15s}.ap-msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes ap-typing{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-1.2cqw);opacity:1}}
.ap-ph-sug{display:flex;flex-direction:column;align-items:flex-end;gap:1.6cqw;margin-top:1cqw}
.ap-ph-sug span{max-width:92%;padding:1.8cqw 3cqw;border-radius:999px;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 .35cqw rgba(100,8,46,.16);font:600 3cqw/1.3 var(--text);color:var(--plum-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-ph-in{position:relative;z-index:2;display:flex;align-items:center;gap:2.4cqw;margin:0 3cqw 3.4cqw;padding-block:2cqw; padding-inline:4cqw 2cqw;border-radius:999px;background:#fff;box-shadow:inset 0 1px 0 #fff,0 1.4cqw 2.6cqw -1.6cqw rgba(90,40,0,.5)}
.ap-ph-field{flex:1;font:500 3.3cqw/1 var(--text);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-ph-mic{display:grid;place-items:center;flex:none;width:7.4cqw;height:7.4cqw;border-radius:50%;background:var(--k-plum-clay)}
.ap-ph-mic svg{width:4cqw;height:4cqw;fill:none;stroke:var(--cream-50);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the conversation plays once: the question, the dots, the answer, the suggestions */
.ap-ph-pre [data-m]{opacity:0}
.ap-ph-play [data-m]{animation:ap-msg .6s var(--spring) both}
.ap-ph-play [data-m="1"]{animation-delay:.1s}
.ap-ph-play .ap-msg--typing{display:flex;animation:ap-msg-t 1.5s ease both .7s}
.ap-ph-play [data-m="3"]{animation-delay:2.2s}
.ap-ph-play [data-m="4"]{animation-delay:2.8s}
@keyframes ap-msg{from{opacity:0;transform:translateY(3cqw) scale(.94)}to{opacity:1;transform:none}}
@keyframes ap-msg-t{0%{opacity:0;transform:translateY(2cqw)}15%,85%{opacity:1;transform:none}100%{opacity:0;max-height:0;padding:0;margin:-2.4cqw 0 0}}
@media (max-width:900px){.ap-ask{grid-template-columns:minmax(0,1fr)}.ap-ask-art{width:min(80%,320px);margin-top:10px}}
@media (max-width:560px){.ap-ask-st--1{inset-inline-start:-13%;top:14%;width:26%}.ap-ask-st--2{inset-inline-end:-9%}}

/* ── who works here · the procedures · works with · the businesses ─────────────────────────────────────────────── */
.ap-ctx{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(14px,1.8vw,22px);align-items:start;margin-top:clamp(64px,8vw,112px)}
.ap-ctx-col{display:grid;gap:clamp(14px,1.8vw,22px);min-width:0}
.ap-cx{display:flex;flex-direction:column;gap:6px;min-width:0;padding:clamp(22px,2.4vw,30px);border-radius:var(--r-xl)}
.ap-cx .k-h3{color:var(--plum-600)}
.ap-cx-p{margin-bottom:16px;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.ap-cx-none{font-size:1rem;color:var(--ink-2)}
.ap-cx .pb-more{gap:16px}
.ap-cx .pb-more-btn{padding-block:10px; padding-inline:12px 16px;border:0;border-radius:999px;background:rgba(100,8,46,.07);box-shadow:inset 0 0 0 1.5px rgba(100,8,46,.18);font:650 .875rem/1 var(--display);color:var(--plum-600);transition:background .2s}
.ap-cx .pb-more-btn:hover{background:rgba(100,8,46,.12)}
.ap-cx .pb-more-btn:focus-visible{outline:3px solid var(--plum-400);outline-offset:3px}
.pb-list.ap-pbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:8px;width:100%}
.pb-list.ap-pbs>.pb-li>.pb-badge{flex:1}
.pb-list.ap-faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));gap:10px;width:100%}
.ap-face{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding-block:8px; padding-inline:8px 14px;border-radius:32px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 8px 16px -12px rgba(90,40,0,.45);transition:transform .35s var(--spring),background .2s}
.ap-face:hover{transform:translateY(-2px);background:#fff}
.ap-face img{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;border:2.5px solid var(--cream-50);box-shadow:0 8px 12px -6px rgba(90,40,0,.5);background:var(--cream-200)}
.ap-face span{display:grid;gap:2px;min-width:0}
.ap-face b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 .9375rem/1.2 var(--display);color:var(--plum-600)}
.ap-face small{font-size:.8125rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-withs{display:grid;gap:10px}
.ap-with{display:flex;align-items:center;gap:14px;min-width:0;padding-block:8px; padding-inline:8px 16px;border-radius:22px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 8px 16px -12px rgba(90,40,0,.45);transition:transform .35s var(--spring),background .2s}
.ap-with:hover{transform:translateX(4px);background:#fff}
.ap-with img{width:52px;height:52px;flex:none;border-radius:23%;box-shadow:0 10px 14px -8px rgba(90,40,0,.5)}
.ap-with span{display:grid;gap:2px;flex:1;min-width:0}
.ap-with b{font:720 1rem/1.2 var(--display);color:var(--plum-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-with small{font-size:.8125rem;color:var(--ink-3)}
.ap-with .pb-i{width:20px;height:20px;color:var(--plum-500)}
/* the procedure badges on paper: a gold clay disc for the area, plum words */
.ap-cx .pb-badge{gap:10px;padding-block:6px; padding-inline:6px 16px;border:0;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff,0 8px 16px -12px rgba(90,40,0,.45);color:var(--ink);font:600 .9375rem/1.25 var(--text);transition:transform .35s var(--spring),background .2s}
.ap-cx .pb-badge:hover{transform:translateY(-2px);background:#fff;border:0}
.ap-cx .pb-badge:focus-visible{outline:3px solid var(--plum-400);outline-offset:3px}
.ap-cx .pb-ic{width:34px;height:34px;color:var(--plum-700);background:var(--k-gold-clay);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -3px 6px rgba(170,100,0,.3),0 4px 8px -4px rgba(130,70,0,.55)}
.ap-cx .pb-ic .pb-i{width:18px;height:18px}
.ap-cx .pb-t{color:var(--plum-600);font-weight:650;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ap-cx .pb-badge{border-radius:24px}
.ap-cx .pb-bh{color:var(--ink-3)}
.ap-biz{display:inline-flex;align-items:center;gap:10px;padding-block:5px; padding-inline:5px 16px;border-radius:999px;font:600 .875rem/1.2 var(--text);color:var(--ink);background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff,0 8px 16px -12px rgba(90,40,0,.45)}
.ap-biz img{width:36px;height:36px;border-radius:50%;object-fit:cover}
@media (max-width:1020px){.ap-ctx{grid-template-columns:minmax(0,1fr)}}

/* ── the way on: the rooms before and after, one conversation for all ───────────────────────────────────────────── */
.ap-pn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.8vw,22px)}
.ap-pn-a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding-block:18px; padding-inline:18px 22px;border-radius:30px;background:var(--k-paper);box-shadow:var(--k-paper-shadow);text-decoration:none;color:var(--ink);transition:transform .45s var(--spring)}
.ap-pn-a:hover{transform:translateY(-4px)}
.ap-pn-pic img{width:72px;height:72px;border-radius:23%;box-shadow:0 14px 18px -10px rgba(90,40,0,.55);transform:rotate(-4deg);transition:transform .5s var(--spring)}
.ap-pn-a:hover .ap-pn-pic img{transform:rotate(3deg) scale(1.06)}
.ap-pn-x{display:grid;gap:4px;min-width:0}
.ap-pn-x small{font:650 .72rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--plum-500)}
.ap-pn-x b{font:760 1.35rem/1.1 var(--display);letter-spacing:-.02em;color:var(--plum-600)}
.ap-pn-x span{font-size:.9rem;line-height:1.4;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-pn-go{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow);color:var(--cream-50)}
.ap-pn-go .pb-i{width:20px;height:20px;stroke-width:2.4}
.ap-pn-a--prev .ap-pn-go{order:-1;background:rgba(100,8,46,.08);box-shadow:inset 0 0 0 2px rgba(100,8,46,.2);color:var(--plum-600)}
.ap-pn-a--prev{grid-template-columns:auto auto minmax(0,1fr)}
.ap-fin{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(64px,8vw,110px)}
.ap-fin-badge{justify-self:center;width:min(100%,300px);filter:drop-shadow(0 40px 34px rgba(70,8,36,.45));animation:k-float 7s ease-in-out infinite}
.ap-fin .k-h2{margin-top:18px}
.ap-fin .k-lead{margin-top:18px}
@media (max-width:820px){.ap-pn{grid-template-columns:minmax(0,1fr)}.ap-fin{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}.ap-fin-badge{width:min(60%,220px)}.ap-fin .ap-acts{justify-content:center}.ap-fin .k-eyebrow{justify-content:center}}
@media (max-width:560px){.ap-pn-a{gap:14px;padding-block:14px; padding-inline:14px 16px}.ap-pn-pic img{width:56px;height:56px}.ap-pn-x b{font-size:1.15rem}.ap-pn-go{width:40px;height:40px}}

@media (prefers-reduced-motion:reduce){.ap-face,.ap-with,.ap-pn-a,.ap-cx .pb-badge{transition:none}.ap-face:hover,.ap-with:hover,.ap-pn-a:hover,.ap-cx .pb-badge:hover{transform:none}.ap-ph-pre [data-m]{opacity:1}}