:root{
  --bg:#f5f1e8; --surface:#fffdf8; --surface-2:#f0eadf; --line:#e3dacb; --line-2:#d3c7b3;
  --ink:#132f2c; --ink-2:#3f5652; --muted:#71817e;
  --sea:#0d6a61; --sea-2:#0a524b; --sea-soft:#dbeee9; --sea-tint:#eef7f4;
  --coral:#cf5a3a; --coral-soft:#fbe7df;
  --amber:#94600c; --amber-soft:#fcf0d5;
  --ok:#1d7448; --ok-soft:#e1f2e7;
  --phone:#0f1d1c; --phone-2:#1b2d2b;
  --r:18px; --r-sm:12px;
  --shadow:0 1px 2px rgba(19,47,44,.06),0 10px 28px rgba(19,47,44,.08);
  --font:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.7;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #f0b429;outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:rgba(245,241,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--sea-2);text-decoration:none}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--sea);display:grid;place-items:center}
.brand small{display:block;font-family:var(--font);font-weight:500;font-size:.68rem;color:var(--muted);line-height:1.2}
.top-in .help-btn + .help-btn{margin-inline-start:-6px}
@media (max-width:520px){.hide-sm{display:none}.saved span:last-child{display:none}}
.saved{margin-inline-start:auto;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.saved .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.help-btn{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:8px 14px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:.85rem;min-height:44px}

/* stepper */
.steps{max-width:1240px;margin:0 auto;padding:4px 16px 12px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{flex:1 0 auto;display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:8px 10px;border-radius:12px;color:var(--muted);font-weight:600;font-size:.88rem;min-height:48px}
.step .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1.5px solid var(--line-2);font-size:.85rem;flex:none}
.step.done .n{background:var(--sea-soft);border-color:var(--sea);color:var(--sea-2)}
.step.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.step.on .n{background:var(--sea);border-color:var(--sea);color:#fff}
.bar{height:4px;background:var(--surface-2)}
.bar i{display:block;height:100%;background:var(--sea);transition:width .35s ease}

/* layout */
.wrap{max-width:1240px;margin:0 auto;padding:22px 16px 120px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.main{min-width:0}
.side{position:sticky;top:140px;max-height:calc(100vh - 230px);overflow:auto;padding:4px;scrollbar-width:thin}
@media (max-width:980px){.wrap{grid-template-columns:1fr}.side{display:none}}

h1,h2,h3{font-family:var(--display);line-height:1.35;margin:0}
h1{font-size:1.75rem;font-weight:700}
h2{font-size:1.25rem;font-weight:600}
h3{font-size:1.02rem;font-weight:600}
.lead{color:var(--ink-2);margin:.4rem 0 0;font-size:1.02rem}
.head{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.vid-chip{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--coral-soft);color:#8f3419;border-radius:999px;padding:8px 14px 8px 16px;font-weight:600;font-size:.85rem;min-height:44px}
.vid-chip .pl{width:24px;height:24px;border-radius:50%;background:var(--coral);display:grid;place-items:center}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--sea-tint);color:var(--sea)}
.ic.coral{background:var(--coral-soft);color:var(--coral)}
.ic.amber{background:var(--amber-soft);color:var(--amber)}
.card-h p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.5}
.q{font-weight:600;margin:12px 0 6px;display:block}
.q small{font-weight:400;color:var(--muted)}

/* fields */
.field{position:relative}
textarea,input[type=text],select{width:100%;border:1.5px solid var(--line-2);background:#fff;border-radius:var(--r-sm);padding:12px 14px;font-size:1rem;line-height:1.7;transition:border-color .15s, box-shadow .15s}
textarea{min-height:92px;resize:vertical;padding-inline-start:58px}
input[type=text]{min-height:52px}
textarea:focus,input[type=text]:focus,select:focus{border-color:var(--sea);box-shadow:0 0 0 4px var(--sea-soft);outline:none}
textarea[dir=ltr],input[dir=ltr]{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;text-align:left;padding-inline-start:14px;padding-right:58px}
.mic{position:absolute;inset-inline-start:8px;top:8px;width:44px;height:44px;border-radius:50%;border:0;background:var(--sea-tint);color:var(--sea);display:grid;place-items:center}
[dir=ltr]+.mic,.field.ltr .mic{inset-inline-start:auto;right:8px}
.mic.rec{background:var(--coral);color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(207,90,58,.5)}100%{box-shadow:0 0 0 14px rgba(207,90,58,0)}}
.meter{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.8rem;color:var(--muted)}
.meter .track{flex:1;height:6px;border-radius:9px;background:var(--surface-2);overflow:hidden;max-width:180px}
.meter .track i{display:block;height:100%;border-radius:9px;background:var(--ok)}
.meter.warn .track i{background:#d39a2c}.meter.bad .track i{background:var(--coral)}
.meter.warn b{color:var(--amber)}.meter.bad b{color:var(--coral)}
.other-lang{margin-top:8px;display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--ink-2);background:var(--sea-tint);border-radius:10px;padding:8px 12px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.soon{background:var(--amber-soft);color:var(--amber)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;padding:12px 22px;font-weight:600;font-size:1rem;min-height:52px;background:var(--sea);color:#fff;transition:transform .1s, background .15s}
.btn:hover{background:var(--sea-2)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.soft{background:var(--sea-tint);color:var(--sea-2)}
.btn.coral{background:var(--coral)}
.btn.big{min-height:60px;font-size:1.08rem;padding:14px 28px}
.btn.sm{min-height:44px;padding:8px 14px;font-size:.88rem;border-radius:12px}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn.del:hover{background:var(--coral-soft);color:var(--coral)}
.nav{position:fixed;bottom:0;inset-inline:0;z-index:25;background:rgba(255,253,248,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.nav-in{max-width:1240px;margin:0 auto;padding:12px 16px;display:flex;gap:12px;align-items:center}
.nav-in .grow{flex:1}
.try-phone{display:none}
@media (max-width:980px){.try-phone{display:inline-flex}}

/* start step */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:center}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);background:linear-gradient(135deg,#0d6a61,#0a3f3a);overflow:hidden;display:grid;place-items:center;color:#fff;border:0;width:100%;padding:0}
.video .waves{position:absolute;inset:0;opacity:.18}
.video .play{width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.3);position:relative}
.video .cap{position:absolute;bottom:14px;inset-inline:16px;display:flex;justify-content:space-between;font-size:.85rem;font-weight:600}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px){.types{grid-template-columns:repeat(2,1fr)}}
.type{border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600;min-height:118px;justify-content:center;transition:border-color .15s, background .15s}
.type:hover{border-color:var(--line-2)}
.type.on{border-color:var(--sea);background:var(--sea-tint)}
.type .em{font-size:2rem;line-height:1}
.type small{font-weight:400;color:var(--muted);font-size:.75rem;line-height:1.4}
.price-hint{margin:10px 0 0;font-size:.9rem;background:var(--ok-soft);color:#14512f;border-radius:12px;padding:10px 14px}
.toast.act{pointer-events:auto;display:flex;gap:12px;align-items:center}
.toast button{border:0;background:#fff;color:var(--phone);border-radius:9px;padding:6px 12px;font-weight:700;min-height:36px}
.voice-start{display:flex;gap:14px;align-items:center;background:var(--amber-soft);border:1px dashed #d8b46a;border-radius:var(--r);padding:16px}
.voice-start p{margin:0;font-size:.9rem;color:var(--ink-2)}

/* languages */
.langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lang{border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-height:84px;text-align:start;position:relative}
.lang b{font-size:1.05rem}.lang span{font-size:.78rem;color:var(--muted)}
.lang.on{border-color:var(--sea);background:var(--sea-tint)}
.lang .chk{position:absolute;inset-inline-end:10px;top:10px;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;background:#fff}
.lang.on .chk{background:var(--sea);border-color:var(--sea);color:#fff}
.order{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.order li{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.order .key{width:44px;height:44px;border-radius:12px;background:var(--phone);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.15rem;flex:none}
.order .nm{flex:1;font-weight:600}
.order .nm small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
.seg{display:inline-flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:9px;padding:8px 12px;font-size:.82rem;font-weight:600;color:var(--ink-2);min-height:40px}
.seg button.on{background:#fff;color:var(--sea-2);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* tree */
.tree{position:relative}
.node{position:relative}
.flow-line{position:absolute;inset-inline-start:30px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,var(--line-2) 0 6px,transparent 6px 12px)}
.opts{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.opt{position:relative;border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:14px;display:grid;grid-template-columns:auto 1fr;gap:14px}
.opt.sub{background:var(--surface)}
.digit{width:58px;height:58px;border-radius:16px;background:var(--phone);color:#fff;font-weight:700;font-size:1.5rem;display:grid;place-items:center;border:0;position:relative;font-family:var(--display)}
.digit::after{content:"";position:absolute;bottom:5px;width:14px;height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.digit-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.digit-col .mv{display:flex;gap:4px}
.digit-col .mv .icon-btn{width:36px;height:36px;border-radius:10px}
.opt-body{min-width:0}
.opt-top{display:flex;gap:10px;align-items:flex-start}
.opt-top .field{flex:1}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-top:10px}
@media (max-width:640px){.acts{grid-template-columns:repeat(2,1fr)}}
.act{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.8rem;font-weight:600;color:var(--ink-2);min-height:72px;justify-content:center;text-align:center;line-height:1.35}
.act.on{border-color:var(--sea);background:var(--sea-tint);color:var(--sea-2)}
.act svg{flex:none}
.detail{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2)}
.submenu{margin-top:12px;padding:14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.submenu .opt{background:#fff}
.submenu-h{font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.add{width:100%;border:2px dashed var(--line-2);background:transparent;border-radius:16px;padding:14px;font-weight:600;color:var(--sea-2);display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px}
.add:hover{background:var(--sea-tint);border-color:var(--sea)}
.add[disabled]{color:var(--muted);border-color:var(--line);background:transparent;cursor:not-allowed}
.hear{margin-top:14px;background:var(--phone);color:#e9f3f1;border-radius:16px;padding:16px 18px;position:relative}
.hear-h{display:flex;align-items:center;gap:8px;font-size:.78rem;color:#9fc4bd;font-weight:600;margin-bottom:6px}
.hear p{margin:0 0 4px;font-size:.98rem;line-height:1.85}
.hear p.l{direction:ltr;text-align:left;color:#c7dcd8}
.hear .tr{color:#7fa59e;font-size:.82rem}
.reserved{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.reserved{grid-template-columns:1fr}}
.res{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.res .digit{width:48px;height:48px;font-size:1.3rem;border-radius:13px}
.res .t{flex:1;font-size:.88rem;line-height:1.5}
.res .t b{display:block;font-size:.95rem}
.switch{position:relative;width:54px;height:32px;flex:none}
.switch input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:99px;background:var(--line-2);transition:background .2s}
.switch span::after{content:"";position:absolute;top:4px;inset-inline-start:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked+span{background:var(--sea)}
.switch input:checked+span::after{transform:translateX(-22px)}
.inline-hint{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:12px;font-size:.84rem;line-height:1.55}
.inline-hint.warn{background:var(--amber-soft);color:#6d4608}
.inline-hint.bad{background:var(--coral-soft);color:#86301a}
.inline-hint button{margin-inline-start:auto;white-space:nowrap}

@media (max-width:520px){
  .opt{padding:12px;gap:10px;grid-template-columns:1fr}
  .digit-col{flex-direction:row;gap:8px}
  .digit{width:52px;height:52px;font-size:1.3rem}
  .submenu{padding:8px;margin-inline:-6px}
  .card{padding:14px}
  .btn{padding:10px 14px;font-size:.95rem;white-space:nowrap}
  .btn.big{padding:12px 18px;font-size:1rem;min-height:56px}
  .brand small{display:none}
  .nav-in{gap:8px}
  .head h1{font-size:1.45rem}
  .show-sm{display:inline!important}
}
.show-sm{display:none}
/* paths, map, drill-in */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.85rem}
.crumb{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px 4px 12px;min-height:34px;font-weight:600;color:var(--ink-2)}
.crumb[onclick]{color:var(--sea-2);border-color:#b9ddd5;background:var(--sea-tint)}
.crumb[disabled],.crumb:not([onclick]){cursor:default}
.crumb .k{width:22px;height:22px;border-radius:7px;background:var(--phone);color:#fff;display:grid;place-items:center;font-size:.78rem;font-family:var(--display)}
.crumbs .sep{color:var(--muted);font-weight:700}
.sub-note{margin:6px 0 10px;font-size:.84rem;color:var(--ink-2)}
.map summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}
.map summary::-webkit-details-marker{display:none}
.map summary .chev{margin-inline-start:auto;transition:transform .2s;color:var(--muted)}
.map[open] summary .chev{transform:rotate(180deg)}
.map-rows{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.map-row{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:10px;padding:7px 8px;padding-inline-start:calc(8px + var(--d) * 26px);text-align:start;min-height:44px;width:100%}
.map-row:hover{background:var(--sea-tint)}
.map-row .keys{display:inline-flex;align-items:center;gap:3px;flex:none}
.map-row .keys b{width:24px;height:24px;border-radius:7px;background:var(--phone);color:#fff;display:grid;place-items:center;font-size:.8rem;font-family:var(--display)}
.map-row .keys b.dim{background:var(--line-2);color:var(--ink-2)}
.map-row .keys i{font-style:normal;color:var(--muted);font-size:.8rem}
.map-row .lbl{flex:1;font-weight:600;font-size:.92rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-tag{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.act-tag.menu{background:var(--sea-soft);color:var(--sea-2)}
.act-tag.info{background:var(--amber-soft);color:var(--amber)}
.map-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.enter{width:100%;display:flex;align-items:center;gap:12px;border:1.5px solid #b9ddd5;background:var(--sea-tint);color:var(--sea-2);border-radius:14px;padding:12px 14px;min-height:60px;text-align:start;font-weight:600}
.enter small{display:block;font-weight:400;color:var(--ink-2);font-size:.78rem}
.enter .chev{margin-inline-start:auto;font-size:1.4rem;line-height:1}
.drill-head{position:sticky;top:118px;z-index:5;background:var(--bg);padding:8px 0 10px;margin-bottom:6px}
.opt.flash{animation:flash 1.6s ease}
@keyframes flash{0%,60%{box-shadow:0 0 0 4px #f0b429}100%{box-shadow:none}}
.act.deep{border-style:dashed;color:var(--coral)}
.act.deep small{font-size:.68rem;font-weight:600}
.deep-opts{display:grid;gap:10px;margin-top:14px}
.deep-opts > div{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
.deep-opts b{display:block;margin-bottom:4px}
.deep-opts p{margin:0 0 10px;font-size:.88rem;color:var(--ink-2)}
/* keypad popover */
.pop{position:absolute;z-index:20;top:66px;inset-inline-start:0;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:12px;width:220px}
.pop p{margin:0 0 8px;font-size:.8rem;color:var(--muted)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;direction:ltr}
.pad button{height:52px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:1.2rem}
.pad button.cur{background:var(--sea);color:#fff;border-color:var(--sea)}
.pad button[disabled]{opacity:.3;cursor:not-allowed}

/* hours */
.days{display:flex;flex-direction:column;gap:8px}
.day{display:grid;grid-template-columns:120px 60px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.day.off{background:var(--surface-2)}
.day .times{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--muted)}
.day select{min-height:46px;padding:8px 10px;font-size:.92rem}
.day .closed{color:var(--muted);font-size:.9rem}
@media (max-width:640px){.day{grid-template-columns:1fr auto}.day .times,.day .closed{grid-column:1/-1}}

/* review */
.sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media (max-width:640px){.sum{grid-template-columns:1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.stat b{font-family:var(--display);font-size:1.9rem;display:block;line-height:1.2;color:var(--sea-2)}
.stat span{font-size:.85rem;color:var(--muted)}
.script{width:100%;border-collapse:collapse;font-size:.88rem}
.script th{text-align:start;font-weight:600;color:var(--muted);font-size:.78rem;padding:8px;border-bottom:1px solid var(--line)}
.script td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.script td:first-child{color:var(--muted);white-space:nowrap}
.script .fn{font-family:ui-monospace,Menlo,monospace;font-size:.75rem;color:var(--muted);direction:ltr;display:inline-block}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.ba{grid-template-columns:1fr}}
.ba > div{border-radius:14px;padding:14px;border:1px solid var(--line)}
.ba .before{background:var(--surface-2)}
.ba .after{background:var(--sea-tint);border-color:#b9ddd5}
.ba h4{margin:0 0 6px;font-size:.8rem;color:var(--muted);font-weight:600}
.ba p{margin:0;font-size:1.05rem;line-height:2}
.ba .after p{font-size:1.12rem}
.pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:s}
@media (max-width:640px){.pipeline{grid-template-columns:1fr}}
.pipe{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;position:relative}
.pipe .num{width:34px;height:34px;border-radius:50%;background:var(--sea);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:8px}
.pipe b{display:block}
.pipe p{margin:4px 0 0;font-size:.84rem;color:var(--ink-2);line-height:1.6}
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.voices{grid-template-columns:repeat(2,1fr)}}
.voice{border:2px solid var(--line);background:#fff;border-radius:16px;padding:12px;display:flex;align-items:center;gap:10px;text-align:start}
.voice.on{border-color:var(--sea);background:var(--sea-tint)}
.voice .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;flex:none;font-size:1.05rem}
.voice b{display:block;font-size:.98rem}
.voice span{font-size:.75rem;color:var(--muted)}
.price{background:var(--phone);color:#eaf4f2;border-radius:var(--r);padding:22px}
.price .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:.92rem;color:#c6dcd7}
.price .row b{color:#fff;font-weight:600}
.price .tot{border-top:1px solid #2f4744;margin-top:8px;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline}
.price .tot .v{font-family:var(--display);font-size:2.2rem;font-weight:700;color:#fff}
.price .tot s{color:#7c9893;font-size:1rem;margin-inline-end:8px}
.price .note{font-size:.8rem;color:#8fb0aa;margin-top:8px;line-height:1.6}
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.pay button{background:#1f3634;border:1px solid #33504c;color:#fff;border-radius:12px;min-height:56px;font-weight:600;font-size:.9rem}
.pay button:hover{background:#28433f}
.check-row{display:flex;gap:12px;align-items:center;padding:10px 0}
.check-row .t{flex:1;font-size:.92rem}
.check-row .t small{display:block;color:var(--muted);font-size:.78rem}
.free{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#fff7ea,#fdeee6);border:1px solid #f0cdb9;border-radius:var(--r);padding:18px}
.free p{margin:2px 0 0;font-size:.88rem;color:var(--ink-2)}

/* assistant */
.asst{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-top:16px}
.asst-h{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.asst-h .ava{width:36px;height:36px;border-radius:50%;background:var(--sea);display:grid;place-items:center}
.asst-h b{font-size:.95rem}.asst-h span{display:block;font-size:.75rem;color:var(--muted);line-height:1.3}
.tips{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto}
.tip{font-size:.84rem;line-height:1.55;padding:10px 12px;border-radius:12px;display:flex;flex-direction:column;gap:6px}
.tip.ok{background:var(--ok-soft);color:#14512f}
.tip.warn{background:var(--amber-soft);color:#6d4608}
.tip.bad{background:var(--coral-soft);color:#86301a}
.tip.info{background:var(--sea-tint);color:var(--sea-2)}
.tip button{align-self:flex-start;border:0;background:#fff;border-radius:9px;padding:6px 12px;font-weight:600;font-size:.8rem;min-height:36px;color:inherit;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* phone simulator */
.phone{background:var(--phone);border-radius:38px;padding:12px;box-shadow:0 24px 60px rgba(15,29,28,.35),inset 0 0 0 2px #2a3d3b}
.screen{background:linear-gradient(180deg,#14302d,#0d1f1d);border-radius:28px;padding:14px 14px 12px;color:#e8f2f0;display:flex;flex-direction:column}
.notch{width:90px;height:22px;border-radius:12px;background:#000;margin:-6px auto 10px}
.call-h{text-align:center}
.call-h .who{font-family:var(--display);font-size:1.05rem;font-weight:600}
.call-h .st{font-size:.75rem;color:#8fb3ac;display:flex;gap:10px;justify-content:center;align-items:center}
.wave{display:flex;gap:3px;justify-content:center;align-items:center;height:26px;margin:6px 0}
.wave i{width:3px;border-radius:2px;background:#5fc4b3;height:4px;transition:height .2s}
.wave.on i{animation:wv .9s ease-in-out infinite}
.wave.on i:nth-child(2n){animation-delay:.15s}.wave.on i:nth-child(3n){animation-delay:.3s}.wave.on i:nth-child(5n){animation-delay:.45s}
@keyframes wv{0%,100%{height:4px}50%{height:22px}}
.log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px;min-height:150px;max-height:190px;scroll-behavior:smooth}
.b{max-width:92%;font-size:.82rem;line-height:1.65;padding:8px 11px;border-radius:14px}
.b.sys{background:#21403c;align-self:flex-start;border-start-start-radius:4px}
.b.sys.l{direction:ltr;text-align:left}
.b.me{background:#e8f2f0;color:var(--phone);align-self:flex-end;font-weight:600;border-start-end-radius:4px}
.b.ev{align-self:center;background:transparent;color:#86aaa3;font-size:.74rem;text-align:center}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;direction:ltr}
.keys button{height:46px;border-radius:50%;border:0;background:#24403c;color:#fff;font-size:1.2rem;font-weight:600;width:46px;justify-self:center;font-family:var(--display)}
.keys button:active{background:#3a625c}
.keys button[disabled]{opacity:.35}
.nopress{display:block;margin:8px auto 0;border:1px solid #33504c;background:transparent;color:#a9c9c2;border-radius:999px;padding:6px 14px;font-size:.75rem;min-height:36px}
.nopress[disabled]{opacity:.35}
.call-row{display:flex;justify-content:center;gap:16px;margin-top:12px}
.call-btn{width:56px;height:56px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff}
.call-btn.go{background:#2bb673}.call-btn.end{background:#e0533b}
.sim-opts{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:.78rem;color:var(--ink-2)}
.sim-opts label{display:flex;gap:8px;align-items:center}
.timer-note{font-size:.72rem;color:#86aaa3;text-align:center;margin-top:4px}

/* modal and sheet */
.modal{position:fixed;inset:0;z-index:50;background:rgba(10,24,22,.55);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal .box{background:var(--surface);border-radius:22px;max-width:640px;width:100%;padding:22px;max-height:92vh;overflow:auto}
.modal .box.phone-box{background:transparent;padding:0;max-width:380px}
.x{float:left}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--phone);color:#fff;padding:12px 18px;border-radius:14px;font-size:.88rem;opacity:0;transition:all .25s;z-index:60;max-width:90vw;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.proto{background:var(--amber-soft);color:#6d4608;font-size:.78rem;text-align:center;padding:6px 16px}
.hidden{display:none!important}
.row-gap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.mt{margin-top:14px}