/* Shared by both sites: buttons, forms, form messages, simple text pages and the legal bar.
   Loaded after each site's own stylesheet. */

/* Buttons: rounded rectangles, not pills. */
.btn{border-radius:10px}

/* Visible keyboard focus everywhere. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--white,#fff);outline-offset:3px;border-radius:6px}
html[data-theme="light"] a:focus-visible,html[data-theme="light"] button:focus-visible,html[data-theme="light"] input:focus-visible,html[data-theme="light"] select:focus-visible,html[data-theme="light"] textarea:focus-visible{outline-color:#0E0F11}

/* Forms (the order page has its own .field styles; these match them). */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.field textarea{width:100%;min-height:150px;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2,rgba(255,255,255,.14));background:rgba(255,255,255,.03);color:var(--white,#fff);font:inherit;font-size:15px;line-height:1.55;resize:vertical}
.field textarea:focus{border-color:var(--silver,#C9CDD2);background:rgba(255,255,255,.05)}
.field .hint{font-size:12.5px;color:var(--steel,#9CA1A8)}
.field .err.on,.field.bad .err{display:block}
.form-errors{border:1px solid var(--line-3,rgba(255,255,255,.22));border-radius:12px;padding:14px 18px;margin-bottom:22px;color:var(--mist,#F2F3F5);font-size:14px}
.form-errors ul{margin:6px 0 0 18px}
.form-ok{border:1px solid rgba(110,200,160,.45);background:rgba(110,200,160,.07);border-radius:12px;padding:18px 20px;margin-bottom:24px;color:var(--mist,#F2F3F5)}
.form-ok b{color:var(--white,#fff)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
html[data-theme="light"] .field textarea{background:#fff;color:#0E0F11;border-color:rgba(14,15,17,.16)}
html[data-theme="light"] .form-ok,html[data-theme="light"] .form-errors{color:#0E0F11}

/* Simple text pages (legal, contact, bug report, thanks). */
.page{max-width:880px;margin:0 auto;padding:150px 24px 90px}
.page h1{font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.03em;color:var(--white,#fff);font-weight:400;margin:14px 0 18px}
.page h2{font-size:22px;color:var(--white,#fff);font-weight:400;margin:38px 0 10px}
.page p,.page li{font-size:16px;line-height:1.75;color:var(--silver,#C9CDD2)}
.page ul{margin:8px 0 8px 22px}
.page a{color:var(--white,#fff);text-decoration:underline;text-underline-offset:3px}
.page .lead{font-size:18px;color:var(--steel,#9CA1A8);max-width:640px}
.page .meta{font-family:var(--mono,monospace);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel,#9CA1A8)}
.page .panel{margin-top:34px}
html[data-theme="light"] .page h1,html[data-theme="light"] .page h2,html[data-theme="light"] .page a{color:#0E0F11}
html[data-theme="light"] .page p,html[data-theme="light"] .page li{color:#33373C}

/* Legal bar under every page's footer. */
.legal-bar{max-width:var(--wrap,1200px);margin:0 auto;padding:18px 24px 34px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;border-top:1px solid var(--line,rgba(255,255,255,.08));font-size:13px;color:var(--steel,#9CA1A8)}
.legal-bar nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.legal-bar a{color:var(--steel,#9CA1A8)}
.legal-bar a:hover{color:var(--white,#fff)}
html[data-theme="light"] .legal-bar a:hover{color:#0E0F11}

/* Order page: form and the schools note on the left, the price card beside them (sticky). */
.order-main{display:grid;gap:0;min-width:0}
.order-aside{position:sticky;top:96px}
@media (max-width:900px){.order-aside{position:static}}
.secure{align-items:flex-start;text-align:left;line-height:1.55}
.secure svg{margin-top:3px}
.secure a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Xecil UI sub-pages (Features, Templates, Pricing): a shorter hero than the home page. */
.hero.hero-sub{min-height:auto;padding-top:clamp(130px,16vw,180px);padding-bottom:clamp(20px,4vw,48px)}
.hero.hero-sub h1{font-size:clamp(40px,6vw,76px)}
nav.top .links a.on{color:var(--white,#fff)}
html[data-theme="light"] nav.top .links a.on{color:#0E0F11}

/* "Tell me when it's ready" modal. */
.notify-dlg{margin:auto;border:1px solid var(--line-2,rgba(255,255,255,.14));border-radius:18px;padding:0;width:min(460px,calc(100vw - 32px));background:var(--ink-2,#16181B);color:var(--silver,#C9CDD2);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.notify-dlg::backdrop{background:rgba(8,9,10,.55);backdrop-filter:blur(3px)}
.notify-form{position:relative;padding:30px 28px 26px}
.notify-form h2{font-size:24px;line-height:1.2;font-weight:400;color:var(--white,#fff);margin:8px 0 8px}
.notify-form .meta{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel,#9CA1A8)}
.notify-lead{font-size:14px;color:var(--steel,#9CA1A8);margin-bottom:18px}
.notify-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:9px;border:0;background:transparent;color:var(--steel,#9CA1A8);font-size:24px;line-height:1;cursor:pointer}
.notify-x:hover{background:rgba(255,255,255,.06);color:var(--white,#fff)}
.notify-msg{min-height:20px;font-size:13.5px;margin:-8px 0 14px}
.notify-msg.ok{color:#7FD3A6}
.notify-msg.bad{color:#F0A28F}
.notify-form .btn{width:100%}
html[data-theme="light"] .notify-dlg{background:#fff;color:#33373C;border-color:rgba(14,15,17,.12)}
html[data-theme="light"] .notify-form h2{color:#0E0F11}
html[data-theme="light"] .notify-x:hover{background:rgba(14,15,17,.06);color:#0E0F11}
html[data-theme="light"] .notify-msg.ok{color:#1F7A4D}
html[data-theme="light"] .notify-msg.bad{color:#B4472E}

/* ---------- order: payment method (Ghana Mobile Money) ---------- */
.pay-method{border:0;margin:6px 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-method[hidden]{display:none}
.pay-method legend{font-size:13px;color:var(--steel);margin-bottom:10px;padding:0}
.pm-opt{position:relative;cursor:pointer}
.pm-opt input{position:absolute;opacity:0;pointer-events:none}
.pm-card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;transition:border-color .2s,background .2s}
.pm-card svg{grid-row:span 2;width:22px;height:22px;color:var(--steel)}
.pm-card b{font-weight:500;font-size:14px;color:var(--white)}
.pm-card small{font-size:12px;color:var(--steel)}
.pm-opt input:checked+.pm-card{border-color:var(--white);background:color-mix(in srgb,var(--white) 6%,transparent)}
.pm-opt input:checked+.pm-card svg{color:var(--white)}
.pm-opt input:focus-visible+.pm-card{outline:2px solid var(--white);outline-offset:2px}
@media (max-width:560px){.pay-method{grid-template-columns:1fr}}

/* ---------- Mobile Money steps ---------- */
.momo-step{position:relative;padding-left:72px}
.momo-step+.momo-step{margin-top:16px}
.momo-step h2{margin-bottom:8px}
.momo-step .hint{margin-bottom:18px;line-height:1.6}
.momo-step .pay{display:inline-flex;gap:10px;align-items:center}
.momo-step .pay svg{width:18px;height:18px}
.step-no{position:absolute;left:24px;top:26px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font:400 13px var(--mono);color:var(--white)}
.mono{font-family:var(--mono);letter-spacing:.02em}
@media (max-width:560px){.momo-step{padding-left:24px}.step-no{position:static;margin-bottom:12px}}

/* ---------- animated package box ---------- */
.pkg{position:relative;display:grid;place-items:center;padding:10px 0 26px;margin-bottom:16px;perspective:1100px}
.pkg-glow{position:absolute;inset:8% 14% 18%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--white) 16%,transparent),transparent);filter:blur(24px);animation:pkg-glow 6s ease-in-out infinite}
.pkg-box{position:relative;width:min(280px,70%);transform-style:preserve-3d;animation:pkg-in 1.1s cubic-bezier(.2,.8,.2,1) both,pkg-float 6s ease-in-out 1.1s infinite}
.pkg-box img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.pkg-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,rgba(255,255,255,.05) 55%,transparent 65%) no-repeat;background-size:260% 100%;
  -webkit-mask:url(/ui/assets/img/xecil-ui-box.webp) center/contain no-repeat;mask:url(/ui/assets/img/xecil-ui-box.webp) center/contain no-repeat;mix-blend-mode:screen;animation:pkg-shine 5s ease-in-out 1.4s infinite}
.pkg-shadow{width:46%;height:18px;margin-top:-6px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);animation:pkg-shadow 6s ease-in-out 1.1s infinite}
@keyframes pkg-in{from{opacity:0;transform:translateY(40px) rotateY(-28deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes pkg-float{0%,100%{transform:translateY(0) rotateY(-8deg) rotateX(2deg)}50%{transform:translateY(-14px) rotateY(8deg) rotateX(-1deg)}}
@keyframes pkg-shadow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.82);opacity:.55}}
@keyframes pkg-shine{0%,15%{background-position:130% 0}60%,100%{background-position:-30% 0}}
@keyframes pkg-glow{0%,100%{opacity:.7}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pkg-box,.pkg-shine,.pkg-shadow,.pkg-glow{animation:none}}
.thanks .order-aside .pkg-box{width:min(320px,78%)}
@media (max-width:900px){.thanks .order-aside{order:-1}.thanks .pkg-box{width:min(240px,60%)}}
.secure[hidden]{display:none}

/* ---------- Mobile Money payment modal ---------- */
.momo-dlg{margin:auto;width:min(480px,calc(100vw - 28px));padding:28px;border:1px solid var(--line-2);border-radius:22px;background:var(--ink-2);color:var(--silver);box-shadow:0 50px 120px -40px rgba(0,0,0,.75)}
.momo-dlg[open]{animation:momo-pop .35s cubic-bezier(.2,.8,.2,1)}
.momo-dlg::backdrop{background:rgba(8,9,10,.55);backdrop-filter:blur(4px)}
@keyframes momo-pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.momo-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--steel);font-size:20px;line-height:1;cursor:pointer}
.momo-x:hover{color:var(--white)}
.momo-head{display:flex;gap:16px;align-items:center;padding-right:30px}
.momo-ico{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,#F7B500,#F05A1A);color:#fff;box-shadow:0 12px 30px -12px rgba(240,90,26,.7)}
.momo-ico svg{width:26px;height:26px}
.momo-kicker{font-size:12px;color:var(--steel);letter-spacing:.02em}
.momo-head h2{font-size:30px;font-weight:400;color:var(--white);line-height:1.15;margin:2px 0}
.momo-sub{font-size:12.5px;color:var(--steel)}
.momo-track{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0 20px;padding:0;counter-reset:m}
.momo-track li{font-size:12px;color:var(--steel);padding-top:10px;border-top:2px solid var(--line-2);transition:color .3s,border-color .3s}
.momo-track li::before{counter-increment:m;content:counter(m) ". "}
.momo-track li.now{color:var(--white);border-color:var(--white)}
.momo-track li.past{color:var(--silver);border-color:color-mix(in srgb,var(--white) 45%,transparent)}
.momo-dlg section{animation:momo-pop .3s ease}
.momo-dlg h3{font-size:19px;font-weight:400;color:var(--white);margin-bottom:6px}
.momo-ref{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:14px 16px;border:1px dashed var(--line-3);border-radius:14px;margin-bottom:16px}
.momo-ref span{grid-column:1;font-size:12px;color:var(--steel)}
.momo-ref b{grid-column:1;font-weight:400;font-size:18px;color:var(--white)}
.momo-ref .btn{grid-column:2;grid-row:1/3}
.btn.sm{padding:8px 14px;font-size:13px}
.momo-dlg .pay{width:100%;justify-content:center;display:inline-flex;gap:10px;align-items:center}
.momo-dlg .pay svg{width:18px;height:18px}
.momo-note{font-size:12.5px;color:var(--steel);line-height:1.6;margin-top:12px}
.momo-note svg{width:14px;height:14px;vertical-align:-2px}
.momo-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.momo-row .btn{justify-content:center}
.momo-form .field{margin:16px 0 14px}
.momo-pulse{position:relative;width:84px;height:84px;margin:6px auto 18px;display:grid;place-items:center;color:var(--white)}
.momo-pulse svg{width:30px;height:30px;position:relative}
.momo-pulse span{position:absolute;inset:0;border-radius:50%;border:1px solid var(--white);opacity:0;animation:momo-ring 2.4s ease-out infinite}
.momo-pulse span+span{animation-delay:1.2s}
@keyframes momo-ring{from{transform:scale(.45);opacity:.6}to{transform:scale(1.15);opacity:0}}
.momo-dlg [data-state="wait"]{text-align:center}
.linkish{background:none;border:0;padding:0;color:var(--white);text-decoration:underline;cursor:pointer;font:inherit}
@media (prefers-reduced-motion:reduce){.momo-dlg[open],.momo-dlg section,.momo-pulse span{animation:none}}
.momo-dlg section{padding:0;margin:0;max-width:none;min-height:0}.momo-dlg section[hidden]{display:none}

/* ---------- download page: get your package with the order ID ---------- */
.get-pkg{margin-top:16px}
.get-head{display:flex;gap:20px;align-items:flex-start}
.get-head h2{font-size:20px;margin:6px 0 8px}
.get-head p{max-width:640px}
.get-form{display:grid;grid-template-columns:1fr 1.4fr auto;gap:12px;align-items:end;margin-top:18px}
.get-form .field{margin:0}
.get-form .form-errors{grid-column:1/-1}
.get-form .btn{height:48px;white-space:nowrap}
@media (max-width:760px){.get-form{grid-template-columns:1fr}}
.get-result{display:grid;gap:12px;margin-top:18px;padding:16px 18px;border-radius:14px;border:1px solid var(--line-2);font-size:14px}
.get-result b{color:var(--white);font-weight:500}
.get-result.ok{border-color:color-mix(in srgb,#3FB950 55%,transparent);background:color-mix(in srgb,#3FB950 8%,transparent)}
.get-result.wait{border-color:color-mix(in srgb,#E3A008 55%,transparent);background:color-mix(in srgb,#E3A008 8%,transparent)}
.get-result.bad{border-color:color-mix(in srgb,#E5534B 55%,transparent);background:color-mix(in srgb,#E5534B 7%,transparent)}
.get-result .btn{justify-self:start}
.order-aside .summary+.pkg,.order-aside .summary~.pkg{margin-top:18px}

/* ---------- download page: the lookup answer modal ---------- */
.pkg-dlg{margin:auto;width:min(440px,calc(100vw - 28px));padding:34px 30px 28px;text-align:center;border:1px solid var(--line-2);border-radius:22px;background:var(--ink-2);color:var(--silver);box-shadow:0 50px 120px -40px rgba(0,0,0,.75)}
.pkg-dlg:not([open]){display:none}
.pkg-dlg[open]{animation:momo-pop .4s cubic-bezier(.2,.8,.2,1)}
.pkg-dlg::backdrop{background:rgba(8,9,10,.55);backdrop-filter:blur(4px)}
.pkg-dlg h2{font-size:24px;font-weight:400;color:var(--white);margin:18px 0 8px}
.pkg-dlg p{font-size:14.5px;line-height:1.6}
.pkg-dlg b{color:var(--white);font-weight:400}
.pkg-dlg .fine{font-size:12.5px;color:var(--steel);margin-top:12px}
.pkg-go{display:inline-flex;gap:10px;align-items:center;margin-top:20px}
.pkg-go svg{width:18px;height:18px}
.pkg-close{margin-top:20px}
.pkg-mark{width:76px;height:76px;margin:0 auto;border-radius:50%;display:grid;place-items:center;position:relative}
.pkg-mark::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid currentColor;opacity:0;animation:pkg-ring 2.2s ease-out .6s infinite}
.pkg-mark svg{width:60px;height:60px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pkg-mark circle{stroke-dasharray:151;stroke-dashoffset:151;animation:pkg-draw .7s ease-out .1s forwards}
.pkg-mark path{stroke-dasharray:60;stroke-dashoffset:60;animation:pkg-draw .45s ease-out .65s forwards}
.pkg-dlg.ok .pkg-mark{color:#3FB950;background:color-mix(in srgb,#3FB950 12%,transparent)}
.pkg-dlg.wait .pkg-mark{color:#E3A008;background:color-mix(in srgb,#E3A008 12%,transparent)}
.pkg-dlg.bad .pkg-mark{color:#E5534B;background:color-mix(in srgb,#E5534B 10%,transparent)}
.pkg-dlg.wait .pkg-mark path{animation:pkg-draw .45s ease-out .65s forwards,pkg-tick 4s linear 1.2s infinite;transform-origin:26px 26px}
@keyframes pkg-draw{to{stroke-dashoffset:0}}
@keyframes pkg-ring{from{transform:scale(.85);opacity:.5}to{transform:scale(1.25);opacity:0}}
@keyframes pkg-tick{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pkg-dlg[open],.pkg-mark::after,.pkg-mark circle,.pkg-mark path{animation:none;stroke-dashoffset:0}}

/* ---------- track your order ---------- */
.track-ico svg{width:22px;height:22px}
.track-note{margin-top:12px;font-size:12.5px}
.track-msg{grid-column:1/-1}
.track-msg[hidden]{display:none}
.track-home .track-sec{max-width:var(--wrap,1180px);margin:0 auto}
.get-form .btn svg{width:16px;height:16px}
/* Buttons inside .page keep their own colours (not the underlined link style). */
.page a.btn,html[data-theme="light"] .page a.btn{text-decoration:none}
.page a.btn-light,html[data-theme="light"] .page a.btn-light{color:var(--ink)}

/* ---------- Xecil UI phone menu (partials/ui-nav) ---------- */
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:none;cursor:pointer;position:relative;flex:none}
.menu-btn i{position:absolute;left:13px;right:13px;height:1.6px;background:var(--white);border-radius:2px;transition:transform .3s,top .3s}
.menu-btn i:first-child{top:17px}
.menu-btn i:last-child{top:25px}
nav.top.open .menu-btn i:first-child{top:21px;transform:rotate(45deg)}
nav.top.open .menu-btn i:last-child{top:21px;transform:rotate(-45deg)}
.links .m-only{display:none}
@media (max-width:860px){
  .menu-btn{display:inline-block}
  nav.top.open{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  nav.top.open .links{display:grid;position:absolute;top:100%;left:0;right:0;padding:10px clamp(16px,4vw,48px) 26px;background:var(--ink);border-bottom:1px solid var(--line);gap:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);max-height:calc(100vh - 80px);overflow:auto}
  nav.top.open .links a{padding:15px 2px;font-size:18px;color:var(--white);border-bottom:1px solid var(--line)}
  nav.top.open .links a:last-child{border-bottom:0}
  nav.top.open .links .m-only{display:block}
}