/* TeeOff colours and type (teeoff-design), with the africa_demo app's look kept on purpose: rounded corners, soft
   shadows, its cards, pickers, splash and call screen (user 2026-10-23, overrides the design system's no-rounding rule).
   Most rules below are copied from africa_demo/booth/app.html and renamed only where the portal needed it. */
@font-face{font-family:'Outfit';font-weight:100 900;font-display:swap;src:url(fonts/Outfit-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-weight:100 900;font-display:swap;src:url(fonts/Outfit-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-weight:100 900;font-display:swap;src:url(fonts/WorkSans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-weight:100 900;font-display:swap;src:url(fonts/WorkSans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-weight:100 900;font-display:swap;src:url(fonts/GeistMono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-weight:100 900;font-display:swap;src:url(fonts/GeistMono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{color-scheme:light;
  --navy:#1b2557; --yellow:#FECD73; --cream:#F0EBDF;
  --panel:#2A3361; --rule-d:#52587A; --dim-d:#B4B4B9;
  --dim:#5C6484; --fine:#8892A9; --line:#DDD8CC; --surface:#F8F5EE; --surface-2:#E9E3D6;
  --ok:#7FD1A8; --ok-l:#2f7a55; --red:#c2452d; --tester:#8a5a00; --tester-bg:#fbefd2;
  --display:"Outfit","Work Sans",sans-serif; --body:"Work Sans",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --r:14px; --ease:cubic-bezier(.2,.7,.3,1); --t:.22s; --shadow:0 10px 30px -18px rgba(27,37,87,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--cream);color:var(--navy);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
h1:focus{outline:none}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.kicker.blk{display:block;margin:22px 0 8px}
.kicker small{font-size:inherit;text-transform:none;letter-spacing:.04em}
.sr{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.navy{background:var(--navy);color:var(--cream)}
.logo{height:26px;width:auto;display:block}
[hidden]{display:none!important}

/* phone-width column, centred on desktop (the app's shell) */
.app{max-width:460px;margin:0 auto;min-height:100dvh;background:var(--cream);position:relative;overflow-x:clip}
@media (min-width:520px){body{background:var(--surface-2)}.app{box-shadow:0 0 0 1px var(--line)}}
.screen{min-height:100dvh;animation:in var(--t) var(--ease) both}
.screen.rev{animation-name:inrev}
.screen.still{animation:none}
@keyframes in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes inrev{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
.rise{animation:rise var(--t) var(--ease) both}
.scr{min-height:100dvh;display:flex;flex-direction:column}

/* locked: the bare site without the shared link */
.locked{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:24px 16px}
.locked h1{font-size:28px;max-width:420px}
.locked p{color:var(--dim-d)}

/* top bar: back · progress · step */
.hd{display:flex;align-items:center;gap:12px;padding:12px 16px 4px;min-height:60px}
.back{flex:none;width:40px;height:40px;margin-left:-8px;border-radius:50%;display:grid;place-items:center}
.brand{font:700 17px var(--display);letter-spacing:-.01em}
.brand span{color:var(--yellow)}
.prog{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px}
.prog i{height:4px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.prog i::after{content:"";position:absolute;inset:0;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.prog i.done::after{transform:none}
.hd .n{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);min-width:28px;text-align:right}
.body{flex:1;padding:8px 16px 8px}
.lead{font-size:26px;margin:2px 0 4px}
.sub{color:var(--dim);font-size:15px}
.dock{position:sticky;bottom:0;z-index:5;background:var(--cream);padding:12px 16px calc(16px + env(safe-area-inset-bottom));display:grid;gap:10px;grid-auto-flow:column;grid-auto-columns:1fr;box-shadow:0 -10px 16px -12px rgba(27,37,87,.18)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 18px;border-radius:var(--r);background:var(--navy);color:var(--cream);font-weight:600;width:100%;transition:transform .12s var(--ease)}
.btn:active{transform:scale(.97)}
.btn.yellow{background:var(--yellow);color:var(--navy)}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn.ghost-d{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--rule-d)}
.btn.ghost-d[aria-pressed=true]{background:var(--cream);color:var(--navy);box-shadow:none}
.btn.red{background:var(--red);color:#fff}
.btn.sm{min-height:44px;font-size:15px;padding:0 14px;width:auto}
.btn:disabled{filter:saturate(.3) brightness(.75);pointer-events:none}
.btn svg{flex:none}
.note{font-size:13.5px;color:var(--dim);margin-top:8px}
.fine{font-size:12.5px;color:var(--dim)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow);min-width:0}

/* ---------- 0. splash (copied from the app) ---------- */
.splash{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 16px calc(18px + env(safe-area-inset-bottom))}
.splash>*{position:relative;z-index:1}
.mk{width:84px;height:131px;margin-top:6px}
.mk svg{display:block;width:100%;height:100%;overflow:visible}
.rings{position:absolute!important;left:48%;top:30%;width:0;height:0;z-index:0!important;pointer-events:none}
.rings i,.rings b{position:absolute;border-radius:50%;border:1.5px solid var(--yellow);opacity:.18}
.rings b{opacity:0;animation:wave 3.2s 1.4s cubic-bezier(.2,.6,.4,1) infinite}
.rings b+b{animation-delay:3s}
@keyframes wave{from{opacity:.4;transform:scale(.25)}to{opacity:0;transform:scale(1)}}
@keyframes ring{from{opacity:0;transform:scale(.4)}to{opacity:.18;transform:none}}
.rings i.seq{animation:ring .9s var(--ease) both}
.m-ln{animation:draw .8s .1s ease-out both}
@keyframes draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.m-ring,.m-sring,.m-dot{transform-box:fill-box;transform-origin:center}
.m-ring{animation:spinin .7s var(--ease) both}
@keyframes spinin{from{opacity:0;transform:rotate(-120deg) scale(.6)}to{opacity:1;transform:none}}
.m-dot{animation:pop .42s var(--ease) both}
.m-sring{animation:pop .5s 1s var(--ease) both}
.wm{display:grid;justify-items:center;gap:7px;margin:18px auto 0;animation:rise .5s 1.25s var(--ease) both}
.wm svg{display:block;height:auto}.wm .w1,.wm .w2{width:132px}
.hello{font:700 42px/1.15 var(--display);color:var(--yellow);margin-top:26px;min-height:1.2em;animation:rise .45s 1.45s var(--ease) both}
.hello span{display:inline-block}
.splash h1{font-size:23px;line-height:1.22;max-width:340px;margin:6px auto 0;animation:rise .45s 1.55s var(--ease) both}
.splash h1 em{font-style:normal;color:var(--yellow)}
.does{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:360px;margin:26px auto 0}
.does li{display:grid;justify-items:center;gap:8px;font-size:13px;line-height:1.2;color:var(--cream);animation:rise .4s var(--ease) both}
.does li:nth-child(1){animation-delay:1.75s}.does li:nth-child(2){animation-delay:1.85s}.does li:nth-child(3){animation-delay:1.95s}
.does .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--yellow);box-shadow:inset 0 0 0 1.5px rgba(254,205,115,.45);background:rgba(254,205,115,.06)}
.splash .go{margin-top:auto;padding-top:22px;width:100%;max-width:400px}
.splash .go .btn{animation:rise .4s 2.1s var(--ease) both}
.splash .fine{margin-top:10px;font-size:12px;color:var(--dim-d);animation:rise .4s 2.2s var(--ease) both}
.splash.skip .seq,.splash.skip .m-ln,.splash.skip .m-dot,.splash.skip .m-ring,.splash.skip .m-sring{animation:none!important}

/* ---------- pickers (the app's .lp) ---------- */
.opts{display:grid;gap:10px;padding:16px 0}
.lp{width:100%;min-height:76px;padding:12px 18px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;line-height:1.2;transition:background .18s,color .18s,transform .12s var(--ease);animation:rise .26s var(--ease) both}
.lp b{font-weight:600;font-size:20px}
.lp small{font-size:13.5px;color:var(--dim);margin-top:3px;line-height:1.3}
.lp .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.lp:active{transform:scale(.97)}
.lp[aria-pressed=true]{background:var(--navy);color:var(--cream);box-shadow:none}
.lp[aria-pressed=true] small,.lp[aria-pressed=true] .tag{color:var(--dim-d)}
.lp.soon{background:transparent;color:var(--fine);cursor:not-allowed}
.lp.soon small{color:var(--fine)}
.lp.soon:active{transform:none}
.opts.sc{padding:0}
.opts.sc .lp{min-height:58px;padding:10px 16px}
.opts.sc .lp b{font-size:16.5px}
.opts .grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:8px 2px 0}
/* small segmented row (mode, feedback ratings) */
.seg2{display:flex;flex-wrap:wrap;gap:8px}
.seg2 button{flex:1 1 0;min-width:max-content;min-height:48px;padding:6px 14px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600;font-size:15px;display:grid;place-content:center;line-height:1.15;transition:background .18s,color .18s,transform .12s var(--ease)}
.seg2 button small{font-weight:400;font-size:11.5px;color:var(--dim)}
.seg2 button:active{transform:scale(.97)}
.seg2 button[aria-pressed=true]{background:var(--navy);color:var(--cream);box-shadow:none}
.seg2 button[aria-pressed=true] small{color:var(--dim-d)}
.seg2.rate button{min-width:44px}

/* ---------- 1. customers: compact cards, two per row on a phone ---------- */
.custs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 0 4px}
.cu{width:100%;min-height:96px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:10px 12px 11px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .18s,color .18s,transform .12s var(--ease);animation:rise .26s var(--ease) both}
.cu:active{transform:scale(.97)}
.cu b{font:700 15.5px/1.2 var(--display);letter-spacing:-.01em}
.cu .tg{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:6px;background:var(--surface-2);color:var(--navy);margin-bottom:2px}
.cu .tg.soft{background:#f6dcd5;color:#8a2b1a}
.cu .ln{font-size:12.5px;line-height:1.3;color:var(--dim)}
.cu .ln em{font-style:normal;font-weight:600;color:var(--navy)}
.cu[aria-pressed=true]{background:var(--navy);color:var(--cream);box-shadow:var(--shadow)}
.cu[aria-pressed=true] .tg{background:var(--yellow);color:var(--navy)}
.cu[aria-pressed=true] .ln{color:var(--dim-d)}
.cu[aria-pressed=true] .ln em{color:var(--cream)}
.cu.off{opacity:.45;cursor:not-allowed}
/* demo-date note: plain for native, the attention colour (tester amber) for English */
.dnote,.dd{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 9px;border-radius:8px;font-size:13px;font-weight:600;line-height:1.2;background:var(--surface-2);color:var(--navy)}
.dnote.warn,.dd.warn{background:var(--tester-bg);color:var(--tester);box-shadow:inset 0 0 0 1.5px #e3b453}
.dnote svg,.dd svg{flex:none}
.tester .demo{font-size:14px;padding-bottom:4px;border-bottom:1px dashed #d8b45a;margin-bottom:2px}
.convo li.redacted>span:first-child{font-style:italic;opacity:.75}
.notice{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow),inset 3px 0 0 var(--navy);font-size:14.5px;line-height:1.4}
.notice svg{margin-top:1px}
.notice b{font-weight:600}
.detail{display:grid;gap:10px;padding:2px 2px 8px;animation:rise var(--t) var(--ease) both}
.you{display:grid;gap:2px;font-size:15px}
.tester{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--tester-bg);color:#3d2a00;border:1px dashed #d8b45a}
.tester .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tester)}
.tester p{font-size:15px}.tester ul{padding-left:18px;font-size:13.5px}
.tester b{font-weight:700}
.tries{display:grid;gap:8px}
.say{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--yellow)}
.say q{quotes:"\201C" "\201D";font-weight:500}
.say small{color:var(--dim);font-size:13.5px}

/* ---------- 6. call (navy; the app's call screen) ---------- */
.callscr{height:100dvh;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;row-gap:10px;overflow:hidden;overscroll-behavior:none}
.ctop{display:flex;align-items:center;gap:10px;padding:12px 16px 0;min-width:0}
.ctop .who{min-width:0}
.ctop .who b{font:700 16px var(--display);display:block}
.ctop .who span{display:block;font-size:12.5px;color:var(--dim-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#callCust{color:var(--cream);white-space:normal!important}
.timer{margin-left:auto;font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--dim-d);font-variant-numeric:tabular-nums;white-space:nowrap}
.timer i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:1px;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.hero{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:4px 16px 0;min-height:96px}
.orb{position:relative;width:72px;height:72px;display:grid;place-items:center}
.orb b{position:absolute;inset:8px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font:700 26px var(--display);z-index:1;transition:background .2s,color .2s}
.orb i{position:absolute;inset:8px;border-radius:50%;border:1.5px solid var(--yellow);opacity:0}
.orb.talk i{animation:ripple 1.8s cubic-bezier(.2,.6,.4,1) infinite}
.orb.talk i+i{animation-delay:.9s}
.orb.caller b{background:var(--cream)}
.orb.caller i{border-color:var(--cream);animation:ripple 1.8s cubic-bezier(.2,.6,.4,1) infinite}
@keyframes ripple{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
.cap{min-width:0}
.cap .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap p{font:600 16.5px/1.3 var(--display);margin-top:4px;min-height:2.6em;max-height:3.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.cap p.caller{color:var(--dim-d)}
/* the tester's card: what Amani checks, big and high-contrast; things to try, muted and folded */
.part{margin:0 16px;background:var(--cream);color:var(--navy);border-radius:14px;padding:10px 12px 8px;display:grid;gap:8px}
.part .dd{margin:0;justify-self:start}
.part .dd:empty{display:none}
.chk{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chk .nm{grid-column:1/-1;font-size:13px;font-weight:600;color:var(--dim)}
.chk div{background:var(--yellow);border-radius:12px;padding:6px 12px 8px;display:grid}
.chk small{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.chk b{font:700 34px/1.05 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tryd summary{font-size:13px;font-weight:600;color:var(--dim);min-height:28px;align-items:center}
.tryd ul{list-style:none;display:grid;gap:4px;padding:2px 0 4px;max-height:22dvh;overflow-y:auto}
.tryd li{font-size:13px;line-height:1.35;color:var(--dim);padding-left:12px;position:relative}
.tryd li::before{content:"·";position:absolute;left:2px;font-weight:700}
/* tabs (phone) */
.tabs{margin:0 16px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--panel);border-radius:12px;padding:4px}
.tabs button{min-height:36px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--dim-d);transition:background .18s,color .18s;position:relative;line-height:1.1;padding:0 4px}
.tabs button[aria-selected=true]{background:var(--cream);color:var(--navy)}
.badge{position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--yellow);opacity:0;transition:opacity .2s}
.badge.on{opacity:1}
.pane{grid-row:5;margin:0 16px;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.pane .ph{display:none}
.convo{list-style:none;display:grid;gap:8px;padding:2px 0 8px;align-content:start}
.convo li{padding:9px 12px;border-radius:14px;max-width:88%;overflow-wrap:anywhere;font-size:15px;animation:rise var(--t) var(--ease) both}
.convo li.empty,.und li.empty{max-width:none;background:none;padding:6px 2px;color:var(--rule-d);font-size:14px}
.convo li.agent{background:var(--panel);justify-self:start;border-bottom-left-radius:4px}
.convo li.customer{background:var(--cream);color:var(--navy);justify-self:end;border-bottom-right-radius:4px}
.convo .tm{display:block;font-size:12px;opacity:.7;margin-top:2px}
.cl.now{background:rgba(254,205,115,.35);border-radius:4px}
.cl.cut{text-decoration:line-through;opacity:.5}
.pending{font-style:italic;color:var(--dim-d)}
.und{list-style:none;display:grid;gap:8px;padding:2px 0 8px}
.und li{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:var(--panel);font-size:14px;animation:rise var(--t) var(--ease) both}
.und .said{color:var(--dim-d)}
.und .meant{font-weight:600;font-size:15px}
.und .got{display:flex;flex-wrap:wrap;gap:6px}
.und .got span{font-size:12.5px;padding:2px 8px;border-radius:8px;background:rgba(254,205,115,.16);color:var(--yellow)}
.und .fine{color:var(--dim-d)}
#turns{font-size:13px;color:var(--cream)}
#turns .fine{color:var(--dim-d)}
.turn{border-top:1px solid var(--rule-d);padding:8px 0}
.turn .head{display:flex;justify-content:space-between;gap:8px;color:var(--dim-d)}
.turn ul{margin:4px 0 0;padding-left:18px}
.turn div{overflow-wrap:anywhere}
/* controls */
.ctl{padding:10px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--rule-d);display:grid;gap:10px}
.mic{display:flex;align-items:center;gap:10px;color:var(--dim-d);font-size:14.5px;flex-wrap:wrap;min-height:24px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--rule-d);flex:none;transition:background .15s}
.dot.on{background:var(--ok);box-shadow:0 0 0 5px rgba(127,209,168,.2)}
.dot.muted{background:var(--red)}
.interim{font-style:italic;color:var(--cream);min-width:0;overflow-wrap:anywhere}
.cbtns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.cbtns .btn{min-height:50px}

/* connecting pop-up (the app's .pm, steps gated on real events) */
.pm{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(27,37,87,.55);opacity:0;transition:opacity .25s}
.pm.on{opacity:1}
.pm-card{width:min(360px,100%);background:var(--cream);color:var(--navy);border-radius:20px;padding:18px;display:grid;gap:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.55);transform:translateY(8px);transition:transform .25s var(--ease)}
.pm-card:focus{outline:none}
.pm.on .pm-card{transform:none}
.pm-top{display:grid;grid-template-columns:46px minmax(0,1fr) 48px;gap:12px;align-items:center}
.pm-top .ic{width:46px;height:46px;border-radius:13px;background:var(--navy);color:var(--yellow);display:grid;place-items:center;font:700 22px var(--display)}
.pm-top b{font:700 16px var(--display);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-top small{display:block;color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-orb{position:relative;width:40px;height:40px;margin:4px;display:grid;place-items:center}
.pm-orb i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--navy);opacity:.2;animation:cpulse 1.6s var(--ease) infinite}
.pm-orb i:nth-child(2){animation-delay:.5s}
.pm-orb b{width:16px;height:16px;border-radius:50%;background:var(--yellow);animation:cbreath 1.6s ease-in-out infinite}
.pm-steps{list-style:none;display:grid;gap:2px;border-top:1px solid var(--line);padding-top:10px}
.pm-steps li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:center;min-height:34px;font-size:14.5px;line-height:1.2;color:#B9B3A6;transition:color .3s}
.pm-steps li small{display:block;font-size:12px;font-weight:400;color:var(--dim)}
.pm-steps li.on{color:var(--navy);font-weight:600}
.pm-steps li.done{color:var(--dim)}
.pm-steps .mk{width:18px;height:18px;display:grid;place-items:center}
.pm-steps li.next .mk::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line)}
.pm-steps li.on .mk::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--navy);border-right-color:transparent;animation:spin .8s linear infinite}
.pm-steps li.done .mk::before{content:"✓";color:var(--ok-l);font-weight:700}
@keyframes spin{to{transform:rotate(360deg)}}
.pm-err{font-size:13.5px;color:#8a2b1a;overflow-wrap:anywhere}
.pm-err:empty{display:none}
.pm-btns{display:none;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:10px}
.pm-btns .btn{width:100%}
.pm.err .pm-btns{display:grid}
.pm.err .pm-orb i,.pm.err .pm-orb b{animation:none}
.pm.err .pm-steps li.on .mk::before{content:"!";width:auto;height:auto;border:0;animation:none;color:#8a2b1a;font-weight:700}
@keyframes cpulse{0%{transform:scale(.9);opacity:.1}50%{opacity:.55}100%{transform:scale(1.18);opacity:.1}}
@keyframes cbreath{50%{transform:scale(.8);opacity:.7}}

/* ---------- 5. ready / engineer switches ---------- */
.eng{margin-top:22px;padding:12px 16px;box-shadow:none}
.eng summary{cursor:pointer;color:var(--dim);font-size:14.5px;font-weight:600}
.field{display:grid;gap:4px;margin:10px 0 0;font-size:14px;color:var(--dim)}
select,input[type=text],textarea{width:100%;min-height:44px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;color:var(--navy);font-size:16px}
textarea{min-height:90px;resize:vertical}
select:focus,input[type=text]:focus,textarea:focus{outline:none;border-color:var(--navy)}
.check{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:15px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--navy);margin:0;flex:none}

/* ---------- 7. result ---------- */
.out{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:99px;background:var(--navy);color:var(--yellow)}
.pill.ok{background:#dcefe3;color:var(--ok-l)}
.pill.miss{background:#f6dcd5;color:#8a2b1a}
.rs{display:grid;gap:12px;margin-top:16px}
dl.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;font-size:15px}
dl.kv dt{color:var(--dim)} dl.kv dd{overflow-wrap:anywhere}
.match{color:var(--ok-l);font-weight:600} .miss{color:var(--red);font-weight:600}
details summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-weight:400}
details[open] summary::after{content:"–"}
.convo.light{margin-top:10px}
.convo.light li{animation:none}
.convo.light li.agent{background:var(--surface-2);color:var(--navy)}
.convo.light li.customer{background:var(--navy);color:var(--cream)}
.convo.light .cl.now{background:none}
#fb{display:grid;gap:4px}
#fb h2{font-size:22px;margin:2px 0 4px}
#fb .btn{margin-top:14px}
.set{display:grid;gap:6px;margin-top:12px}
.lbl{font-size:14px;color:var(--dim)}

/* ---------- desktop (≥1024 px): guide panel on setup screens, three-column call ---------- */
.guide{display:none}
@media (min-width:1024px){
  body{background:var(--cream)}
  .app{max-width:none;box-shadow:none}
  .screen.step{display:grid;grid-template-columns:minmax(340px,32%) minmax(0,1fr);min-height:100dvh}
  .screen.step[hidden]{display:none!important}
  .guide{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:40px 48px;position:sticky;top:0;height:100dvh;overflow:hidden}
  .guide::after{content:"";position:absolute;right:-220px;bottom:-220px;width:520px;height:520px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(254,205,115,.18),0 0 0 70px var(--navy),0 0 0 71.5px rgba(254,205,115,.18),0 0 0 140px var(--navy),0 0 0 141.5px rgba(254,205,115,.18);pointer-events:none}
  .guide>*{position:relative;z-index:1}
  .guide .brand{font-size:22px;color:var(--cream)}
  .guide .kicker{color:var(--yellow);display:block;margin-bottom:14px}
  .guide h2{font-size:40px;line-height:1.08;text-wrap:balance;max-width:14ch}
  .guide p{color:var(--dim-d);font-size:17px;line-height:1.55;max-width:38ch;margin-top:16px}
  .guide .fine{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0}
  .step .scr{min-height:100dvh;width:100%;max-width:880px;padding:24px 40px 0;justify-self:center}
  .step .lead{font-size:38px}
  .step .dock{grid-auto-flow:column;grid-auto-columns:minmax(0,260px);justify-content:end;padding-bottom:32px;box-shadow:none}
  .opts{max-width:620px}
  .custs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .chk b{font-size:44px}
  .splash{min-height:100dvh}
  /* call: you on the left; transcript and what Amani understood side by side */
  .callscr{grid-template-columns:minmax(360px,420px) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:24px;row-gap:14px;padding:0 24px}
  .ctop{grid-column:1/-1;padding:18px 0 0}
  .hero{grid-column:1;grid-row:2;padding:0;min-height:120px;grid-template-columns:96px minmax(0,1fr)}
  .orb{width:96px;height:96px}
  .orb b{font-size:34px}
  .cap p{font-size:19px}
  .part{grid-column:1;grid-row:3;margin:0;align-self:start}
  .tabs{display:none}
  .pane,.pane[hidden]{display:block!important;grid-row:2/5;margin:0 0 16px;background:var(--panel);border-radius:14px;padding:12px 14px}
  .pane .ph{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-d);margin-bottom:10px}
  #p-tr{grid-column:2}
  #p-und{grid-column:3}
  #p-trace{display:none!important}
  .callscr.trace #p-und{grid-row:2/3}
  .callscr.trace #p-trace{display:block!important;grid-column:3;grid-row:3/5}
  .convo li.agent,.und li{background:rgba(240,235,223,.07)}
  .ctl{grid-column:1;grid-row:4;margin:0;padding:12px 0 18px;box-shadow:none}
  .result .scr{max-width:1080px;margin:0 auto;padding:16px 40px 0}
  .result .lead{font-size:36px;max-width:28ch}
  .result .rs{grid-template-columns:1fr 1fr;align-items:start}
  .result #fb{grid-column:2;grid-row:1/4}
  .result .dock{grid-auto-columns:minmax(0,240px);justify-content:end;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rings b{display:none}}

/* client page (user 2026-10-26): no "What Amani understood" pane, no response times, no feedback form */
#p-und,#t-und,.convo .tm,#fb{display:none!important}
@media (min-width:1024px){
  .callscr{grid-template-columns:minmax(360px,420px) minmax(0,1fr)}
  .result .rs{grid-template-columns:1fr}
}