/* THE DEMO DIALOG (templates/mani/fragments/{en,ar}/_demo_modal.html).
   Loaded by the shell on every page: the dialog is part of the shell, opened
   by openDemoModal() from the home hero, the pricing cards, Ghaith or any
   page. Moved here as it was from mani-home-ltr.css. */

/* ═══════════════════════════════════════════════════════════════
   13  DEMO REQUEST
   The modal the demo buttons open (moved to <body> by its script)
   and its steps.
   ═══════════════════════════════════════════════════════════════ */

/* Was `position: absolute` covering .pg-home, with a `position: sticky` box inside
   to keep it on screen while the page scrolled. That worked, but it also meant the
   overlay lived in the page's flow: inside .mnx-page-inner, which is `isolation:
   isolate`, so its z-index could not beat the 60px .mnx-rail (z 50) or the floating
   assistant bubble .vnote-mini (z 99978) — both painted over the demo modal. The
   script now moves it to <body>; anchor it to the viewport and put it above them. */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    background: rgba(27, 42, 74, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99995;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* GHAITH'S LAYER. With Ghaith on the page the overlay is placed in #mnxApp just
   before his window (openDemoModal). Same z-index as the window, earlier in the
   page: the backdrop covers the page and Ghaith's own veil, and the window
   stays above it, readable and usable. A z-index alone cannot do this - the
   window lives inside #mnxApp's stacking context and nothing on <body> can be
   put under it. */
#mnxApp > .app-modal-overlay {
    z-index: 99979;
    transition: opacity 0.3s ease, padding 0.35s cubic-bezier(.16, 1, .3, 1);
}

/* The small window open: the box centres in the room left beside it. Closed,
   the padding goes back and the box returns to the middle. */
body.ghx-open:not(.ghx-full) .app-modal-overlay {
    padding-inline-end: calc(var(--ghx-win-w) + 2 * var(--ghx-win-gap));
}

/* The window over the whole page (phones, or widened): the form is the one
   thing above it, and above the rail, drawer and top bar that stand over it. */
body.ghx-open.ghx-full #mnxApp > .app-modal-overlay {
    z-index: 99983;
}

/* flex, not block: the box is centred by the overlay now instead of by its own
   auto margins, so a tall form can use the whole viewport height and a short
   one still sits in the middle. */
.app-modal-overlay.is-active {
    display: flex;
    opacity: 1;
}

/* The old cap subtracted the top bar as well as the margins, so the box was
   ~100px shorter than the space it actually had — and the form is taller than
   that: measured 681px of content in a 523px box, which put the submit button
   and the consent line below the fold with nothing on screen to suggest a
   scroll. A visitor reads that as a broken form, not a scrollable one. */
.app-modal-box {
    position: relative;
    margin: 0;
    background: var(--white, var(--white));
    border-radius: var(--r-xl, 22px);
    width: 100%;
    max-width: 420px;
    padding: 32px 24px;
    box-shadow: var(--sh-modal);
    height: auto;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-modal-overlay.is-active .app-modal-box {
    transform: translateY(0) scale(1);
}

.app-modal-box::-webkit-scrollbar {
    width: 5px;
}

.app-modal-box::-webkit-scrollbar-thumb {
    background: var(--mist, var(--mist));
    border-radius: 10px;
}

.app-modal-close {
    position: absolute;
    top: 16px;
    inset-inline-end: 20px;
    background: none;
    border: none;
    color: var(--silver, var(--silver));
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: color 0.2s;
}

.app-modal-close svg { width: 15px; height: 15px; }

.app-modal-close:hover {
    color: var(--ink, var(--ink));
}

/* This header was a block box with `text-align: center` and an <img> left at
   its default `display: inline`. So `margin: 0 auto` did nothing, and the badge
   and the icon shared one line box: the badge sat on the icon's baseline and
   overlapped its lower corner, and neither was on the modal's centre line. It
   is a column now, so each child centres on its own row. */
.app-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 28px;
}

/* One frame for every icon: the module icons are 3D illustrations and a logo is
   a flat square, and without a shared container they read as two design systems
   in the same slot. */
.sim-app-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 64px;
    block-size: 64px;
    margin-block-end: 16px;
    border: 1px solid var(--mist, #e2e8f0);
    border-radius: 18px;
    background: var(--snow, #f8fafc);
}

/* display:flex above wins over the [hidden] attribute on its own, so say it. */
.sim-app-ico[hidden] {
    display: none;
}

.app-modal-header img {
    display: block;
    inline-size: 38px;
    block-size: 38px;
    margin: 0;
    object-fit: contain;
}

.app-modal-header h3 {
    margin: 0 0 6px;
    color: var(--ink, var(--ink));
    font-weight: 700;
    letter-spacing: calc(-0.5px * var(--track));
}

.app-modal-header p {
    margin: 0;
    color: var(--slate, var(--slate));
    font-weight: 600;
}

.sim-deploy-btn {
    width: 100%;
    background: var(--ink, var(--ink));
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.sim-deploy-btn:hover {
    background: var(--code-bg);
    transform: translateY(-1px);
    box-shadow: var(--sh-dark);
}

` at the top of this file scores (0,1,1) and outranks
   `.sim-deploy-btn` (0,1,0), so the step-3 anchor styled as the primary button
   inherited the modal's dark ink and rendered dark-on-dark. Match the specificity
   instead of reaching for !important. */
#appInstallModal a.sim-deploy-btn,
#appInstallModal a.sim-deploy-btn:hover,
#appInstallModal a.sim-deploy-btn:focus {
    color: #fff;
}

/* ── Demo request (replaces the simulated install) ─────────────────────────
   The old modal demonstrated how easy it is to press Install — a question no
   buyer asks. This one collects the lead and hands back a system that actually
   runs. Three states in one box, so the visitor never loses their place. */
.dr-step { display: none; }

.dr-step.is-on { display: block; }

.dr-field { text-align: start; margin-bottom: 14px; }

.dr-field label {
    display: block;
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--ink, #0f172a);
}

.dr-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--mist, #e2e8f0);
    border-radius: 10px;
    font: inherit;
    color: inherit;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.dr-field input:focus {
    outline: none;
    border-color: var(--blue, #1e4fd8);
    box-shadow: 0 0 0 3px rgba(30, 79, 216, .12);
}

.dr-field input[aria-invalid="true"] { border-color: #dc2626; }

.dr-hint { font-size: .78rem; color: var(--slate, #64748b); margin-top: 5px; }

.dr-code {
    width: 100%;
    padding: 14px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: calc(.4em * var(--track));
    text-indent: .4em;
    font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--mist, #e2e8f0);
    border-radius: 10px;
    background: #fff;
}

.dr-code:focus {
    outline: none;
    border-color: var(--blue, #1e4fd8);
    box-shadow: 0 0 0 3px rgba(30, 79, 216, .12);
}

.dr-msg {
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 9px;
    font-size: .86rem;
    line-height: 1.6;
    text-align: start;
    display: none;
}

.dr-msg.is-on { display: block; }

.dr-msg--err { background: #fef2f2; color: #b91c1c; }

.dr-msg--ok { background: #f0fdf4; color: #15803d; }

.dr-consent {
    font-size: .76rem;
    color: var(--slate, #64748b);
    line-height: 1.65;
    margin: 12px 0 0;
    text-align: start;
}

.dr-consent a { color: var(--blue, #1e4fd8); }

.dr-alt {
    display: block;
    width: 100%;
    margin-top: 12px;
    background: none;
    border: 0;
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    color: var(--blue, #1e4fd8);
    cursor: pointer;
    padding: 8px;
}

.dr-alt[disabled] { color: var(--slate, #94a3b8); cursor: default; }

.sim-deploy-btn[disabled] { opacity: .6; cursor: default; }

/* ── The demo dialog, step by step (fragments/*/home.html, «DEMO REQUEST») ──
   A track of three steps says where they are; the code step shows the
   WhatsApp message they are looking for above six boxes; the ready step hands
   over the link, the sign-in details and an optional e-mail. One memorable
   moment - the code going green - and everything around it quiet. */
#appInstallModal .app-modal-box { max-width: 432px; padding: 22px 26px 24px; }

#appInstallModal .app-modal-header { margin-bottom: 22px; }

#appInstallModal .app-modal-header h3 { font-size: 1.36rem; font-weight: 800; line-height: 1.35; }

#appInstallModal .app-modal-header p { font-weight: 500; font-size: .9rem; line-height: 1.75; max-width: 330px; }

#appInstallModal [hidden] { display: none !important; }

.dr-ltr { unicode-bidi: isolate; direction: ltr; display: inline-block; font-weight: 700; color: var(--ink, #0f172a); }

.dr-track { display: flex; gap: 6px; list-style: none; margin: 6px 34px 22px; padding: 0; }

.dr-track li {
    flex: 1; display: flex; flex-direction: column; gap: 7px;
    font-size: .72rem; font-weight: 700; color: #94a3b8; text-align: center;
}

.dr-track li::before { content: ""; height: 4px; border-radius: 4px; background: #e8edf4; transition: background .4s ease; }

.dr-track li.is-on { color: var(--blue, #1e4fd8); }

.dr-track li.is-on::before { background: var(--blue, #1e4fd8); }

.dr-track li.is-done { color: #16a34a; }

.dr-track li.is-done::before { background: #22c55e; }

#drStep1 .dr-field { margin-bottom: 16px; }

#drStep1 #drNameField { margin-bottom: 26px; }

#drStep1 .dr-field label { font-size: .82rem; color: #334155; margin-bottom: 7px; }

#drStep1 .dr-field input#drName, #drStep1 .dr-field input#drEmail { height: 52px; border-radius: 12px; background: #fbfcfe; }

#drStep1 .dr-field input:focus { background: #fff; }

#drStep1 .dr-hint { font-size: .76rem; color: #94a3b8; }

/* A number already proven (the account's, or this browser's): no code will be asked. */
#drStep1 .dr-field.is-known .dr-hint { color: #16a34a; font-weight: 600; }

#drStep1 .dr-field.is-known .mph { border-color: #86efac !important; background: #f0fdf4 !important; }

.dr-linked { color: #0f766e; }

.dr-submit { display: flex; align-items: center; justify-content: center; gap: 9px; height: 54px; border-radius: 14px; font-size: 1rem; font-weight: 800; }

.dr-submit { justify-content: space-between; padding-block: 0; padding-inline: 22px 9px; }

.dr-submit-l { display: inline-flex; align-items: center; gap: 10px; }

/* how long it takes, beside what it does: the promise without a long label */
.dr-submit-time {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px;
    background: rgba(255, 255, 255, .1); color: #cbd5e1; font-size: .8rem; font-weight: 700; white-space: nowrap;
}

.dr-submit-time svg { width: 15px; height: 15px; color: #4ade80; }

.dr-submit-wa { display: inline-flex; }

.dr-submit-wa svg { width: 20px; height: 20px; color: #4ade80; }

#drStep1 .dr-consent { text-align: center; font-size: .72rem; color: #94a3b8; margin-top: 14px; }

/* the message they are looking for, as WhatsApp shows it */
.dr-peek {
    display: flex; gap: 10px; align-items: flex-start; text-align: start;
    border-radius: 16px; padding: 12px; margin-bottom: 20px;
    background: #efeae2 radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px);
    background-size: 10px 10px;
}

.dr-peek-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--blue, #1e4fd8); color: #fff; font-weight: 800; font-size: .85rem; }

.dr-peek-b { background: #fff; border-radius: 4px 12px 12px 12px; padding: 8px 11px 6px; max-width: 85%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08); animation: dr-peek .5s .2s both cubic-bezier(.2, .9, .3, 1.2); }

@keyframes dr-peek { from { opacity: 0; transform: translateY(8px) scale(.96); } }

.dr-peek-n { display: flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 800; color: var(--blue, #1e4fd8); }

img.dr-peek-av { object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }

.dr-peek-t { font-size: .86rem; color: #111b21; margin-top: 2px; }

.dr-peek-t b { letter-spacing: 3px; direction: ltr; display: inline-block; }

.dr-peek-m { font-size: .66rem; color: #8696a0; text-align: end; margin-top: 2px; }

/* six boxes over one real input */
.dr-otp { position: relative; display: flex; gap: 8px; justify-content: center; direction: ltr; margin: 4px 0 6px; }

.dr-otp-c {
    width: 48px; height: 58px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fbfcfe;
    display: grid; place-items: center; font: 800 1.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #0f172a;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .2s;
}

.dr-otp-c:nth-child(3) { margin-right: 10px; }

.dr-otp-c.is-fill { border-color: #94a3b8; background: #fff; transform: translateY(-1px); }

.dr-otp-c.is-cur { border-color: var(--blue, #1e4fd8); background: #fff; box-shadow: 0 0 0 4px rgba(30, 79, 216, .12); }

.dr-otp-c.is-cur:empty::after { content: ""; width: 2px; height: 26px; background: var(--blue, #1e4fd8); animation: dr-blink 1s steps(1) infinite; }

@keyframes dr-blink { 50% { opacity: 0; } }

.dr-otp .dr-code {
    position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0;
    font-size: 16px; caret-color: transparent; cursor: text; background: transparent; letter-spacing: 0; text-indent: 0;
}

.dr-otp.is-busy .dr-otp-c {
    color: #64748b; border-color: #e2e8f0;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) 0 0 / 200% 100%;
    animation: dr-shim 1s linear infinite;
}

@keyframes dr-shim { to { background-position: -200% 0; } }

.dr-otp.is-ok .dr-otp-c { border-color: #22c55e; background: #f0fdf4; color: #15803d; transition-delay: calc(var(--i) * 45ms); }

.dr-otp.is-bad { animation: dr-shake .42s cubic-bezier(.36, .07, .19, .97); }

.dr-otp.is-bad .dr-otp-c { border-color: #dc2626; background: #fef2f2; }

.dr-code-meta { display: flex; justify-content: space-between; align-items: center; margin: 12px 2px 0; font-size: .8rem; }

.dr-code-meta button { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 700; color: var(--blue, #1e4fd8); cursor: pointer; }

.dr-code-meta button[disabled] { color: #94a3b8; font-weight: 600; cursor: default; }

/* a click outside while the code is on its way: a nudge, not a close */
.app-modal-box.is-nudged { animation: dr-shake .42s cubic-bezier(.36, .07, .19, .97); }

@keyframes dr-shake {
    10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); }
}

.dr-nudge {
    display: block; width: max-content; margin: 14px auto 0; padding: 7px 14px; border-radius: 999px;
    background: #0f172a; color: #fff; font-size: .8rem; opacity: 0; transition: opacity .25s; pointer-events: none;
}

.dr-nudge.is-on { opacity: .92; }

/* ready, and the daily limit */
.dr-ready { text-align: center; }

.dr-badge {
    position: relative; width: 68px; height: 68px; margin: 2px auto 14px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 30% 30%, #34d399, #059669); box-shadow: 0 10px 30px -8px rgba(5, 150, 105, .55);
}

.dr-badge::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(16, 185, 129, .25); animation: dr-ring 2.4s ease-out infinite; }

@keyframes dr-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

.dr-badge svg { width: 32px; height: 32px; color: #fff; }

.dr-badge path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: dr-draw .6s .25s cubic-bezier(.65, 0, .35, 1) forwards; }

@keyframes dr-draw { to { stroke-dashoffset: 0; } }

.dr-badge--wait { background: radial-gradient(circle at 30% 30%, #fbbf24, #d97706); box-shadow: 0 10px 30px -8px rgba(217, 119, 6, .5); }

.dr-badge--wait::before { border-color: rgba(245, 158, 11, .25); }

.dr-badge--wait path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }

.dr-ready-title { font-size: 1.4rem; font-weight: 800; color: var(--ink, #0f172a); margin: 0 0 6px; }

.dr-ready-sub { font-size: .92rem; color: #64748b; margin: 0 0 20px; line-height: 1.75; }

.dr-go {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 15px 18px; border-radius: 14px; background: #0f172a; color: #fff !important;
    font-weight: 800; font-size: 1.02rem; text-decoration: none; box-shadow: 0 12px 26px -12px rgba(15, 23, 42, .7);
    transition: transform .15s;
}

.dr-go:hover { transform: translateY(-1px); color: #fff; }

.dr-go::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; inset-inline-start: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
    animation: dr-shine 3.2s 1s ease-in-out infinite;
}

@keyframes dr-shine { 0% { inset-inline-start: -60%; } 55%, 100% { inset-inline-start: 130%; } }

.dr-go svg { width: 18px; height: 18px; }

[dir="rtl"] .dr-go svg { transform: scaleX(-1); }

.dr-go-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .22); border-top-color: #fff; animation: dr-go-spin .7s linear infinite; }

@keyframes dr-go-spin { to { transform: rotate(360deg); } }

.dr-go.is-going { pointer-events: none; cursor: progress; }

.dr-go.is-going .dr-go-spin { display: inline-block; }

.dr-go.is-going > svg { display: none; }

.dr-go.is-going::after { width: 55%; animation-duration: 1.1s; animation-delay: 0s; }

.dr-cred { margin-top: 16px; border: 1px solid #e8edf4; border-radius: 14px; background: #f8fafc; text-align: start; overflow: hidden; }

.dr-cred-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: .78rem; font-weight: 700; color: #475569; }

.dr-cred-wa { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #ecfdf3; color: #15803d; font-size: .72rem; font-weight: 600; }

.dr-cred-wa svg { width: 13px; height: 13px; color: #22c55e; }

.dr-sent-wa { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: .8rem; color: #15803d; }

.dr-sent-wa svg { width: 14px; height: 14px; color: #22c55e; }

.dr-cred-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #eef2f7; background: #fff; }

.dr-cred-k { min-width: 78px; font-size: .76rem; color: #94a3b8; }

.dr-cred-v { flex: 1; min-width: 0; text-align: left; font: 600 .88rem ui-monospace, SFMono-Regular, Menlo, monospace; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dr-cp { flex: none; width: 30px; height: 30px; border: 0; border-radius: 9px; display: grid; place-items: center; background: #f1f5f9; color: #475569; cursor: pointer; transition: background .15s; }

.dr-cp:hover { background: #e2e8f0; }

.dr-cp.is-ok { background: #dcfce7; color: #15803d; }

.dr-cp svg { width: 15px; height: 15px; }

.dr-mail { margin-top: 12px; text-align: start; }

.dr-mail-t {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px dashed #d6dde8; border-radius: 14px;
    background: none; font: inherit; font-size: .88rem; color: #334155; text-align: start; cursor: pointer; transition: border-color .15s, background .15s;
}

.dr-mail-t:hover { border-color: #94a3b8; background: #fafbfd; }

.dr-mail-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: #eef2ff; color: #4f46e5; }

.dr-mail-ic svg { width: 16px; height: 16px; }

.dr-mail-t .dr-chip { margin-inline-start: auto; }

.dr-mail-f { display: none; position: relative; margin-top: 10px; }

.dr-mail.is-open .dr-mail-t { display: none; }

.dr-mail.is-open .dr-mail-f { display: block; animation: dr-in .25s ease; }

@keyframes dr-in { from { opacity: 0; transform: translateY(-4px); } }

.dr-mail-f input { box-sizing: border-box; width: 100%; height: 54px; padding: 0 16px; padding-inline-end: 96px; border: 1.5px solid #e2e8f0; border-radius: 14px; font: inherit; background: #fff; }

.dr-mail-f input::placeholder { color: #b6bfcc; font-weight: 500; opacity: 1; }

.dr-mail-f input:focus::placeholder { color: transparent; }

.dr-mail-f input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, .1); }

.dr-mail-f input[aria-invalid="true"] { border-color: #dc2626; }

.dr-mail-f button { position: absolute; top: 6px; height: 42px; inset-inline-end: 6px; padding: 0 16px; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

.dr-mail-f button[disabled] { opacity: .6; cursor: default; }

.dr-mail-f p { margin: 7px 2px 0; font-size: .75rem; color: #94a3b8; }

.dr-mail-done { display: none; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #bbf7d0; border-radius: 14px; background: #f0fdf4; color: #166534; font-size: .86rem; }

.dr-mail-ok { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #22c55e; color: #fff; }

.dr-mail-ok svg { width: 16px; height: 16px; }

.dr-mail.is-sent .dr-mail-t, .dr-mail.is-sent .dr-mail-f { display: none; }

.dr-mail.is-sent .dr-mail-done { display: flex; animation: dr-in .3s ease; }

.dr-chip { font-size: .7rem; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 9px; }

.dr-new { margin-top: 14px; padding: 4px; border: 0; background: none; font: inherit; font-size: .8rem; color: #94a3b8; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.dr-new:hover { color: #475569; }

.dr-ghaith {
    display: flex; margin-top: 12px; padding: 2.5px; border-radius: 999px; text-decoration: none;
    background: conic-gradient(from var(--dr-a), #22d3ee, #6366f1, #a855f7, #22c55e, #22d3ee);
    animation: dr-spin 4s linear infinite; box-shadow: 0 10px 28px -12px rgba(99, 102, 241, .6);
}

@keyframes dr-spin { to { --dr-a: 360deg; } }

.dr-ghaith-in { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 16px 9px 12px; border-radius: 999px; background: #0f172a; color: #fff; }

.dr-ghaith-ic { position: relative; width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, #6366f1, #312e81); }

.dr-ghaith-ic > svg { width: 18px; height: 18px; color: #fff; animation: dr-twinkle 2.6s ease-in-out infinite; }

@keyframes dr-twinkle { 50% { transform: scale(.82) rotate(20deg); } }

.dr-ghaith-wa { position: absolute; bottom: -3px; inset-inline-start: -3px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #22c55e; border: 2px solid #0f172a; }

.dr-ghaith-wa svg { width: 9px; height: 9px; color: #fff; }

.dr-ghaith-t { display: flex; flex-direction: column; line-height: 1.3; text-align: start; }

.dr-ghaith-t b { font-size: .94rem; font-weight: 800; }

.dr-ghaith-t small { font-size: .7rem; font-weight: 600; color: #a5b4fc; }

@media (max-width: 420px) {
    .dr-otp { gap: 6px; }
    .dr-otp-c { width: 42px; height: 52px; font-size: 1.3rem; }
    .dr-track { margin-inline: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .dr-peek-b, .dr-badge::before, .dr-badge path, .dr-go::after, .dr-ghaith, .dr-ghaith-ic > svg,
    .app-modal-box.is-nudged, .dr-otp.is-bad, .dr-otp.is-busy .dr-otp-c { animation: none; }
    .dr-badge path { stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Classes for what used to be inline style= attributes in home.html.
   Eighteen of them, duplicated across the Arabic and English fragments — so a
   colour or a gap had to be edited in two places, could not be overridden by a
   stylesheet (inline wins), and shipped again with every render.
   ═══════════════════════════════════════════════════════════════════════════ */

/* step 3 of the demo modal: the primary control is an <a>, not a <button> */
.sim-deploy-btn--link {
    display: block;
    text-align: center;
    text-decoration: none;
}

@media (max-height: 720px) {
    /* Short windows: drop the icon before anything else. It is decoration; the
   button is the job, and it is what was being pushed off screen. */
    .app-modal-box {
        padding-block: 24px;
    }
}

@media (max-width: 640px) {
    /* Phones: a full-screen sheet. A three-field form does not benefit from being
   stretched across a desktop canvas, but on a phone the rounded card wastes
   the edges and fights the keyboard. */
    .app-modal-overlay {
        padding: 0;
    }
    .app-modal-box {
        max-width: none;
        min-block-size: 100dvh;
        max-block-size: none;
        border-radius: 0;
        padding: 28px 20px 32px;
    }
}