/* unitech.flippraxis.com: UniTech-only widgets. The page theme (header, menus, sections, buttons, footer)
   comes from the FlipPraxis stylesheets at www.flippraxis.com. Everything here is prefixed utx- so it
   cannot change the FlipPraxis theme. Colours: FlipPraxis navy #152749 and gold #EBC05D. */
.utx-plan{margin:0;background:#fff;color:#14213D;border:1px solid #D9E0EC;border-radius:16px;box-shadow:0 24px 60px -24px rgba(21,39,73,.45);padding:22px;font-size:.95rem;text-align:left}
.utx-plan-h{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.utx-plan-h b{font:600 1.1rem/1.2 Outfit,Inter,system-ui,sans-serif;white-space:nowrap;color:#14213D}
.utx-plan-h span{font-size:.85rem;color:#5D6780}
.utx-plan ol{list-style:none;margin:0;padding:0;counter-reset:p}
.utx-plan li{position:relative;padding:14px 0 14px 42px;border-top:1px solid #EEF2F8;counter-increment:p}
.utx-plan li:first-child{border-top:0;background:#FCF6E6;margin:0 -22px;padding:16px 22px 16px 64px;border-radius:10px}
.utx-plan li::before{content:counter(p);position:absolute;left:0;top:15px;width:28px;height:28px;border-radius:50%;background:#EEF2F8;display:grid;place-items:center;font:700 .85rem Outfit,Inter,sans-serif;color:#3B4560}
.utx-plan li:first-child::before{left:22px;top:17px;background:#152749;color:#fff}
.utx-plan .k{font-size:.82rem;color:#5D6780}
.utx-plan .t{font-weight:600;margin:2px 0 6px;color:#14213D}
.utx-plan .chips{display:flex;flex-wrap:wrap;gap:6px}
.utx-plan .chips span{font-size:.78rem;line-height:1.4;padding:3px 9px;border-radius:999px;border:1px solid #D9E0EC;background:#fff;color:#3B4560}
.utx-plan .bars{margin-top:16px;padding-top:14px;border-top:1px solid #D9E0EC;display:grid;gap:10px}
.utx-plan .bar{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:.85rem;color:#14213D}
.utx-plan .bar i{grid-column:1/-1;height:8px;border-radius:99px;background:#EEF2F8;position:relative;overflow:hidden}
.utx-plan .bar i b{position:absolute;inset:0 auto 0 0;border-radius:99px}
.utx-plan figcaption{font-size:.78rem;color:#5D6780;margin-top:12px}
.utx-band{display:inline-block;white-space:nowrap;font-size:.72rem;font-weight:600;padding:1px 8px;border-radius:999px;margin-left:6px;line-height:1.6}
th .utx-band{margin-left:0}
.b-adv{background:#E8F5EE;color:#1E7A4C}.b-pro{background:#E7F0FB;color:#1F5FA8}.b-dev{background:#FFF5E0;color:#8A5A00}.b-sup{background:#FDECEA;color:#B42318}
.f-adv{background:#1E7A4C}.f-pro{background:#1F5FA8}.f-dev{background:#C98A10}.f-sup{background:#B42318}
.utx-split{align-items:center}
/* seven-step cycle reuses the FlipPraxis ut-stack style; allow it to wrap */
.ut-stack.utx-seven{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
/* live demo */
.utx-demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start}
.utx-demo-ctl{background:#fff;border:1px solid #D9E0EC;border-radius:16px;padding:24px;color:#14213D}
.utx-demo-ctl label{display:block;font-weight:600;margin:16px 0 6px}
.utx-demo-ctl label:first-of-type{margin-top:0}
.utx-demo-ctl output{float:right;font-weight:700;color:#152749}
.utx-demo-ctl input[type=range]{width:100%;accent-color:#152749;height:28px}
.utx-hint{font-size:.85rem;color:#5D6780;margin:14px 0 0}
/* tables and FAQ */
.utx-tbl{overflow-x:auto;border:1px solid #D9E0EC;border-radius:12px;background:#fff}
.utx-tbl table{border-collapse:collapse;width:100%;font-size:.95rem;color:#14213D}
.utx-tbl th,.utx-tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid #D9E0EC;vertical-align:top}
.utx-tbl thead th{background:#EEF2F8;font-weight:600;font-size:.88rem;color:#3B4560}
.utx-tbl tbody tr:last-child>*{border-bottom:0}
.utx-tbl td:first-child{white-space:nowrap}
.utx-faq{max-width:820px}
.utx-faq details{border-bottom:1px solid #D9E0EC;padding:4px 0}
.utx-faq summary{cursor:pointer;font:600 1.1rem/1.4 Outfit,Inter,sans-serif;padding:16px 36px 16px 0;list-style:none;position:relative;color:#14213D}
.utx-faq summary::-webkit-details-marker{display:none}
.utx-faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:1.5rem;color:#152749}
.utx-faq details[open] summary::after{content:"\2212"}
.utx-faq details p{color:#3B4560}
@media (max-width:1020px){.utx-demo{grid-template-columns:1fr}}
@media (max-width:600px){.utx-plan{padding:18px}.utx-plan li:first-child{margin:0 -18px;padding:16px 18px 16px 58px}.utx-plan li:first-child::before{left:18px}}
@media print{.utx-demo-ctl{display:none}}