/* Saqrion cloud sign-up (2.73.0): neumorphic, as approved (bg #e6e9ef, shadows #c7cdd8 / #fff, red #c0152a). */
:root {
  color-scheme: light;
  --bg: #e6e9ef; --dk: #c7cdd8; --lt: #fff; --red: #c0152a; --red2: #990f1a; --tx: #39414f; --soft: #5a6272;
  --ok: #1f6b3a; --okbg: linear-gradient(145deg, #4aa564, #2f7c45); --bad: #b4322b; --teal: #2f8f86;
  --cta: linear-gradient(145deg, #d8222e, #a8111f); --off: linear-gradient(145deg, #b8bfcb, #9aa2b0);
  --up: 7px 7px 16px var(--dk), -7px -7px 16px var(--lt);
  --up-sm: 4px 4px 9px var(--dk), -4px -4px 9px var(--lt);
  --in: inset 4px 4px 9px var(--dk), inset -4px -4px 9px var(--lt);
  --in-sm: inset 2px 2px 5px var(--dk), inset -2px -2px 5px var(--lt);
  --mono: ui-monospace, "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 15px/1.5 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow-x: hidden; }
a { color: var(--red); font-weight: 600; text-decoration: none; }
a:hover { color: var(--red2); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid rgba(192, 21, 42, .55); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes blobA { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(60px, 40px) scale(1.15) } }
@keyframes blobB { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(-70px, -30px) scale(1.1) } }
@keyframes floatY { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(192, 21, 42, .45) } 100% { box-shadow: 0 0 0 14px rgba(192, 21, 42, 0) } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0 } 70% { transform: scale(1.15) } 100% { transform: scale(1); opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes caret { 50% { opacity: 0 } }
@keyframes ring { 0% { transform: scale(.8); opacity: .9 } 100% { transform: scale(1.8); opacity: 0 } }
@keyframes wiggle { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } }
@keyframes orbit { to { transform: rotate(360deg) } }
@keyframes blink { 50% { opacity: 0 } }
@keyframes rowIn { from { background: #f6ead0 } to { background: transparent } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

.page { position: relative; min-height: 100vh; overflow: hidden; overflow: clip; }   /* clip: focus can't scroll it sideways to the blobs */
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.blob.a { left: -120px; top: -140px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(192, 21, 42, .16), rgba(192, 21, 42, 0) 70%); animation: blobA 14s ease-in-out infinite; }
.blob.b { right: -160px; bottom: -180px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(53, 102, 214, .14), rgba(53, 102, 214, 0) 70%); animation: blobB 18s ease-in-out infinite; }
.wrap { position: relative; max-width: 1220px; margin: 0 auto; padding: 22px 32px 48px; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
a.brand:focus-visible { outline: 2px solid #dc2626; outline-offset: 4px; border-radius: 12px; }
.logo { width: 48px; height: 48px; border-radius: 15px; background: var(--bg); box-shadow: 5px 5px 11px var(--dk), -5px -5px 11px var(--lt); display: grid; place-items: center; animation: floatY 4s ease-in-out infinite; }
.wordmark { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.wordmark span { color: var(--red); font-weight: 600; font-size: 15px; }
.signin { font-size: 14px; color: var(--soft); position: relative; }
.signin-box { position: absolute; right: 0; top: 30px; z-index: 5; width: min(320px, calc(100vw - 32px)); padding: 16px; border-radius: 18px; background: var(--bg); box-shadow: 10px 10px 24px #b9c0cc, -8px -8px 20px var(--lt); animation: fadeUp .25s ease both; }
.signin-box .addr { margin-top: 8px; }

/* trust strip */
.trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.trust li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--soft); padding: 6px 11px; border-radius: 12px; box-shadow: var(--in-sm); }
.trust svg { flex: none; }

/* progress rail */
.rail { display: flex; align-items: center; gap: 8px; margin: 22px 0; flex-wrap: wrap; font-size: 14px; padding: 0; list-style: none; }
.rail li { display: flex; align-items: center; gap: 8px; color: var(--soft); }
.rail .dot { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; box-shadow: 3px 3px 7px var(--dk), -3px -3px 7px var(--lt); }
.rail .bar { width: 28px; height: 4px; border-radius: 4px; box-shadow: var(--in-sm); }
.rail li.done { color: var(--ok); font-weight: 600; }
.rail li.done .dot { box-shadow: inset 3px 3px 6px var(--dk), inset -3px -3px 6px var(--lt); }
.rail li.done + .bar { background: #3f9256; box-shadow: none; }
.rail li.now { color: var(--tx); font-weight: 700; }
.rail li.now .dot { color: #fff; background: var(--cta); box-shadow: none; animation: pulseRing 1.8s ease-out infinite; }

/* layout */
.layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.main:focus { outline: none; }
.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; animation: fadeUp .45s ease both; }
.side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }
@media (max-width: 900px) { .side { position: static; } }
h1 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.lead { margin: 6px 0 0; color: var(--soft); font-size: 16px; }
.card { padding: 26px; border-radius: 24px; background: var(--bg); box-shadow: 9px 9px 20px var(--dk), -9px -9px 20px var(--lt); }
.card.flat { box-shadow: var(--in); }
.card h2 { margin: 0 0 4px; font-size: 19px; }
.muted { color: var(--soft); }
.small { font-size: 13px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--soft); text-transform: uppercase; }
.groove { height: 4px; border-radius: 4px; margin: 16px 0; box-shadow: var(--in-sm); }

/* controls */
.seg { position: relative; display: inline-flex; padding: 5px; border-radius: 16px; box-shadow: var(--in); }
.seg .knob { position: absolute; top: 5px; left: 5px; width: 104px; height: 40px; border-radius: 12px; background: var(--bg); box-shadow: var(--up-sm); transition: left .35s cubic-bezier(.5, 1.6, .4, 1); }
.seg.right .knob { left: 109px; }
.seg button { position: relative; width: 104px; height: 40px; border: 0; background: transparent; font-weight: 600; color: var(--soft); cursor: pointer; }
.seg button[aria-pressed="true"] { color: var(--red); }
.offer { font-size: 13px; font-weight: 700; color: var(--ok); padding: 6px 12px; border-radius: 10px; background: linear-gradient(90deg, #e3f3e8, #f4fbf6, #e3f3e8); background-size: 200% 100%; animation: shimmer 3s linear infinite; }
.chip { font-family: var(--mono); letter-spacing: .08em; padding: 2px 7px; border-radius: 6px; border: 1.5px dashed #3f9256; }
.btn { border: 0; cursor: pointer; border-radius: 14px; background: var(--bg); box-shadow: var(--up-sm); font-weight: 700; padding: 10px 16px; transition: transform .15s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { box-shadow: var(--in); transform: none; }
.btn.red { color: var(--red); }
.btn.ghost { display: flex; justify-content: center; align-items: center; height: 52px; font-weight: 600; }
.cta { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 60px; border: 0; border-radius: 18px; background: var(--cta); color: #fff; font-weight: 700; font-size: 18px; cursor: pointer; box-shadow: 7px 7px 16px rgba(130, 10, 16, .30), -7px -7px 16px var(--lt); transition: transform .15s ease; text-align: center; }
.cta:hover { transform: translateY(-2px); color: #fff; }
.cta:active { box-shadow: inset 4px 4px 9px var(--red2), inset -4px -4px 9px #d8222e; }
.cta[disabled], .cta.off { background: var(--off); cursor: not-allowed; transform: none; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; }
.spinner.dark { border-color: var(--dk); border-top-color: var(--red); width: 15px; height: 15px; border-width: 2.5px; }
.toggle { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 18px 22px; border-radius: 22px; background: var(--bg); box-shadow: var(--up); }
.toggle.on.green { box-shadow: var(--up), 0 0 0 2px rgba(63, 146, 86, .55); }
.switch { position: relative; flex: none; width: 62px; height: 34px; border-radius: 20px; box-shadow: inset 3px 3px 7px var(--dk), inset -3px -3px 7px var(--lt); margin-left: auto; }
.switch i { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); box-shadow: 3px 3px 6px var(--dk), -2px -2px 5px var(--lt); transition: left .35s cubic-bezier(.5, 1.6, .4, 1); }
.on .switch i { left: 32px; background: var(--okbg); }
.box { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: transparent; box-shadow: inset 3px 3px 6px var(--dk), inset -3px -3px 6px var(--lt); transition: background .2s, box-shadow .2s; font-size: 15px; font-weight: 800; }
.on > .box, .box.on { background: var(--cta); color: #fff; box-shadow: 3px 3px 7px rgba(130, 10, 16, .3), -3px -3px 7px var(--lt); animation: pop .35s ease both; }
.box.green.on, .on > .box.green { background: var(--okbg); box-shadow: 3px 3px 7px rgba(31, 107, 58, .3), -3px -3px 7px var(--lt); }
.tag { font-size: 12px; font-weight: 600; color: var(--soft); padding: 3px 8px; border-radius: 8px; box-shadow: var(--in-sm); white-space: nowrap; }
.badge { font-size: 12px; font-weight: 700; color: #fff; background: var(--cta); padding: 4px 9px; border-radius: 8px; margin-left: 6px; vertical-align: 2px; }

/* plan cards */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan { text-align: left; border: 0; cursor: pointer; background: var(--bg); border-radius: 24px; padding: 24px; box-shadow: inset 4px 4px 10px var(--dk), inset -4px -4px 10px var(--lt); transition: box-shadow .35s ease, transform .35s ease; display: flex; flex-direction: column; gap: 10px; }
.plan[aria-pressed="true"] { box-shadow: 9px 9px 20px var(--dk), -9px -9px 20px var(--lt), 0 0 0 2px rgba(192, 21, 42, .55); transform: translateY(-4px); }
.plan .name { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 700; gap: 8px; }
.radio { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 3px 3px 6px var(--dk), inset -3px -3px 6px var(--lt); display: grid; place-items: center; }
.radio i { width: 12px; height: 12px; border-radius: 50%; }
.plan[aria-pressed="true"] .radio i { background: var(--red); animation: pop .3s ease both; }
.price { font-size: 42px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.price small { font-size: 15px; font-weight: 400; color: var(--soft); letter-spacing: 0; }
.incl { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--soft); }
.incl li { display: flex; gap: 9px; align-items: flex-start; }
.incl li::before { content: "✓"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--okbg); }
.save { font-size: 13px; font-weight: 700; color: var(--ok); }
.y2 { font-size: 12.5px; color: var(--soft); padding: 9px 11px; border-radius: 12px; box-shadow: var(--in-sm); line-height: 1.45; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 46px; height: 46px; border: 0; border-radius: 14px; background: var(--bg); box-shadow: var(--up-sm); font-size: 22px; font-weight: 700; cursor: pointer; }
.stepper button:active { box-shadow: var(--in); }
.stepper input { width: 80px; height: 46px; border: 0; border-radius: 14px; background: var(--bg); box-shadow: var(--in); text-align: center; font: inherit; font-size: 20px; font-weight: 800; color: var(--tx); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
table.cmp th, table.cmp td { text-align: left; padding: 10px 8px; vertical-align: top; }
table.cmp thead th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
table.cmp tbody tr + tr td, table.cmp tbody tr + tr th { border-top: 1px solid #d5dae2; }
table.cmp tbody th { font-weight: 600; color: var(--soft); width: 30%; }
table.cmp td.sel { color: var(--tx); font-weight: 600; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.enterprise { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 22px; border-radius: 22px; box-shadow: var(--in); }

/* summary */
.sum .line { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14.5px; }
.sum .line > :last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum .line > :first-child { min-width: 0; }
.sum .line.soft { color: var(--soft); }
.sum .line.good { color: var(--ok); font-weight: 700; }
.sum .total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sum .total b:last-child { font-size: 28px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum .note { font-size: 12.5px; color: var(--soft); margin-top: 4px; text-align: right; }
.sum .yl { margin-top: 12px; }
.hint { margin: 0; text-align: center; color: var(--soft); font-size: 14px; }

/* forms */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.fld { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; }
.fld .help { font-weight: 400; font-size: 12.5px; color: var(--soft); }
.fld .err { font-weight: 600; font-size: 12.5px; color: var(--bad); }
.inp { width: 100%; min-width: 0; height: 50px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--bg); box-shadow: var(--in); font: inherit; font-size: 16px; color: var(--tx); }
select.inp { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--soft) 50%), linear-gradient(135deg, var(--soft) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; }
.inp::placeholder { color: #8a92a2; }
.inp[aria-invalid="true"] { box-shadow: var(--in), 0 0 0 2px rgba(180, 50, 43, .5); }
.addr { display: flex; align-items: center; border-radius: 14px; box-shadow: var(--in); padding-right: 12px; flex-wrap: nowrap; }
.addr .inp { box-shadow: none; background: transparent; flex: 1; text-transform: lowercase; }
.addr .sfx { color: var(--soft); font-weight: 600; white-space: nowrap; }
.astat { margin-left: 10px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; min-width: 92px; color: var(--soft); }
.astat.ok { color: var(--ok); }
.astat.bad { color: var(--bad); }
.astat .tick { width: 20px; height: 20px; border-radius: 50%; background: #3f9256; color: #fff; display: grid; place-items: center; font-size: 12px; animation: pop .4s ease both; }
@media (max-width: 480px) { .addr { flex-wrap: wrap; padding: 0 12px 10px 0; } .addr .inp { flex-basis: 100%; } .addr .sfx { padding-left: 16px; } }
.browser { padding: 16px 18px; border-radius: 18px; background: var(--bg); box-shadow: 5px 5px 12px var(--dk), -5px -5px 12px var(--lt); }
.dots { display: flex; gap: 7px; margin-bottom: 10px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; }
.url { padding: 11px 14px; border-radius: 12px; box-shadow: inset 3px 3px 7px var(--dk), inset -3px -3px 7px var(--lt); font-family: var(--mono); font-size: 15px; overflow-wrap: anywhere; }
.url b { color: var(--red); }
.url .cur { animation: blink 1s step-end infinite; }
.terms { padding: 18px 20px; border-radius: 18px; background: var(--bg); box-shadow: 5px 5px 12px var(--dk), -5px -5px 12px var(--lt); display: flex; flex-direction: column; gap: 12px; }
.terms.on { box-shadow: 5px 5px 12px var(--dk), -5px -5px 12px var(--lt), 0 0 0 2px rgba(63, 146, 86, .5); }
.accept { display: flex; align-items: flex-start; gap: 12px; border: 0; background: transparent; text-align: left; padding: 0; cursor: pointer; font-size: 14px; }
.req { font-size: 12px; font-weight: 700; color: var(--bad); }

/* terms reader */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(57, 65, 79, .35); display: grid; place-items: center; padding: 16px; animation: fadeUp .25s ease both; }
.dialog { width: 100%; max-width: 780px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 26px; background: var(--bg); box-shadow: 14px 14px 30px #b9c0cc, -10px -10px 24px #f4f6f9; overflow: hidden; }
.dhead { padding: 20px 24px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dhead h2 { margin: 0; font-size: 21px; }
.x { width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; background: var(--bg); box-shadow: var(--up-sm); font-size: 20px; cursor: pointer; }
.readbar { height: 6px; margin: 0 24px; border-radius: 6px; box-shadow: var(--in-sm); overflow: hidden; }
.readbar i { display: block; height: 6px; width: 0; background: linear-gradient(90deg, #fb7185, var(--red)); transition: width .15s; }
.reader { margin: 14px 24px; padding: 18px 22px; border-radius: 18px; box-shadow: inset 5px 5px 11px var(--dk), inset -5px -5px 11px var(--lt); overflow-y: auto; flex: 1; min-height: 160px; line-height: 1.6; font-size: 14.5px; }
.reader h2 { font-size: 17px; margin: 0 0 8px; }
.reader h3 { font-size: 15.5px; margin: 18px 0 4px; }
.reader p { margin: 0 0 10px; }
.reader ul, .reader ol { margin: 0 0 10px; padding-left: 22px; }
.reader table { border-collapse: collapse; margin: 6px 0 12px; font-size: 13.5px; }
.reader td, .reader th { border: 1px solid #cfd5de; padding: 5px 8px; text-align: left; }
.dfoot { padding: 0 24px 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.dfoot .cta { width: auto; height: 52px; padding: 0 26px; font-size: 16px; }

/* verify */
.verify { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.verify.one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
@media (max-width: 760px) { .verify { grid-template-columns: 1fr; } }
.vcard { padding: 26px; border-radius: 26px; background: var(--bg); box-shadow: 9px 9px 20px var(--dk), -9px -9px 20px var(--lt); display: flex; flex-direction: column; gap: 16px; }
.vhead { display: flex; align-items: center; gap: 14px; }
.vicon { position: relative; width: 52px; height: 52px; flex: none; border-radius: 16px; box-shadow: var(--in); display: grid; place-items: center; }
.vicon .pulse { position: absolute; inset: 0; border-radius: 16px; border: 2px solid rgba(192, 21, 42, .5); animation: ring 1.6s ease-out infinite; }
.vicon svg { animation: wiggle 2.4s ease-in-out infinite; }
.vcard.ok .vicon .pulse { display: none; }
.vcard.ok .vicon svg { animation: none; }
.slots { position: relative; }
.slots .six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.slot { height: 62px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; font-weight: 800; background: var(--bg); box-shadow: var(--in); color: var(--tx); }
.slot.has { box-shadow: var(--up-sm); }
.slot.has span { animation: pop .3s ease both; }
.slot.cur { box-shadow: var(--in), 0 0 0 2px rgba(192, 21, 42, .5); color: var(--red); }
.slot.cur span { animation: caret 1s step-end infinite; }
.vcard.ok .slot { background: var(--okbg); color: #fff; box-shadow: 4px 4px 9px rgba(31, 107, 58, .35), -4px -4px 9px var(--lt); }
.vcard.ok .slot span { animation: pop .45s ease both; }
.vcard.locked .slot { opacity: .55; }
.slots input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: text; font-size: 16px; }
@media (max-width: 400px) { .slot { height: 50px; font-size: 22px; border-radius: 11px; } .slots .six { gap: 6px; } .vcard { padding: 20px; } }
.vfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; min-height: 26px; }
.vmsg { font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--soft); }
.vmsg.ok { color: var(--ok); }
.vmsg.bad { color: var(--bad); }
.link { border: 0; background: transparent; padding: 0; font-weight: 700; color: var(--red); cursor: pointer; }
.link[disabled] { color: var(--soft); cursor: default; }

/* payment */
.tabs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 6px; border-radius: 16px; box-shadow: var(--in); }
.tabs3 button { min-height: 44px; border: 0; border-radius: 12px; font-weight: 700; cursor: pointer; color: var(--soft); background: var(--bg); padding: 4px 6px; line-height: 1.2; }
.tabs3 button[aria-pressed="true"] { color: var(--red); box-shadow: var(--up-sm); }
.codefld { display: flex; gap: 10px; }
.codefld .inp { text-transform: uppercase; letter-spacing: .08em; }
.codemsg { font-size: 13px; font-weight: 700; color: var(--soft); min-height: 20px; }
.codemsg.ok { color: var(--ok); animation: pop .4s ease both; }
.codemsg.bad { color: var(--bad); }
.bankbox { padding: 18px; border-radius: 18px; box-shadow: var(--in); line-height: 1.8; font-size: 14px; overflow-wrap: anywhere; }
.bankbox b.ref { font-family: var(--mono); color: var(--red); }
.cardsoon { padding: 18px; border-radius: 18px; box-shadow: var(--in); font-size: 14px; }
.cardsoon .mock { margin: 0 auto 14px; width: min(300px, 100%); aspect-ratio: 1.62; border-radius: 18px; color: #fff; padding: 18px 20px; position: relative; overflow: hidden; background: linear-gradient(135deg, #c0152a 0%, #7a0d18 55%, #2a1a33 100%); box-shadow: 10px 10px 24px #b9c0cc, -8px -8px 20px var(--lt); opacity: .8; }
.cardsoon .chipc { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #f6d77a, #c99a2e); }
.cardsoon .num { margin-top: 26px; font-family: var(--mono); font-size: 18px; letter-spacing: .12em; }
.agree { display: flex; align-items: flex-start; gap: 12px; border: 0; background: transparent; text-align: left; padding: 0 4px; cursor: pointer; font-size: 13.5px; line-height: 1.5; }
.agree .box { width: 24px; height: 24px; border-radius: 8px; }
.placed { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--bg); box-shadow: 5px 5px 12px var(--dk), -5px -5px 12px var(--lt); font-weight: 700; color: var(--ok); }
.okdot { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--okbg); animation: pop .45s ease both; }
.alert { padding: 12px 16px; border-radius: 14px; box-shadow: var(--in-sm); font-size: 14px; font-weight: 600; color: var(--bad); }

/* setting up */
.setup { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
.ringcard { flex: 1 1 340px; min-width: 0; padding: 30px; border-radius: 28px; background: var(--bg); box-shadow: 10px 10px 22px var(--dk), -10px -10px 22px var(--lt); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ringwrap { position: relative; width: min(300px, 72vw); aspect-ratio: 1; border-radius: 50%; box-shadow: 12px 12px 26px var(--dk), -12px -12px 26px var(--lt); display: grid; place-items: center; }
.ringwrap::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 6px 6px 14px var(--dk), inset -6px -6px 14px var(--lt); }
.ringwrap svg.arc { position: absolute; inset: 6%; width: 88%; height: 88%; transform: rotate(-90deg); }
.ringwrap svg.arc circle { transition: stroke-dashoffset .6s ease; }
.ringwrap .orbit { position: absolute; inset: 0; animation: orbit 2.2s linear infinite; }
.ringwrap .orbit i { position: absolute; left: 50%; top: 3%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fb7185; box-shadow: 0 0 14px #fb7185; }
.ringwrap .pct { position: relative; font-size: clamp(40px, 12vw, 58px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.ringwrap .done { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--ok); }
.ringwrap .done i { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 42px; font-style: normal; background: var(--okbg); box-shadow: 6px 6px 14px rgba(31, 107, 58, .35), -6px -6px 14px var(--lt); animation: pop .5s ease both; }
.checks { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.check { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.check .m { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: var(--soft); box-shadow: inset 3px 3px 6px var(--dk), inset -3px -3px 6px var(--lt); }
.check.now .m { box-shadow: none; background: conic-gradient(var(--red) 0 25%, var(--bg) 25% 100%); animation: spin .9s linear infinite; }
.check.done .m { color: #fff; background: var(--okbg); box-shadow: 3px 3px 7px rgba(31, 107, 58, .3), -3px -3px 7px var(--lt); animation: pop .4s ease both; }
.check .t { flex: 1; font-weight: 500; color: var(--soft); }
.check.now .t { font-weight: 700; color: var(--tx); }
.check.done .t { font-weight: 700; color: var(--ok); }
.check .w { font-size: 13px; color: var(--soft); }
.log { padding: 16px 18px; border-radius: 20px; box-shadow: inset 5px 5px 11px var(--dk), inset -5px -5px 11px var(--lt); font-family: var(--mono); font-size: 12.5px; min-height: 140px; overflow-wrap: anywhere; }
.log div { padding: 3px 0; animation: fadeUp .35s ease both; }
.log span { color: var(--teal); }

/* ready */
.next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .next { grid-template-columns: 1fr; } }
.next a { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px; background: var(--bg); box-shadow: var(--up); color: var(--tx); font-weight: 400; transition: transform .15s; }
.next a:hover { transform: translateY(-2px); color: var(--tx); }
.next .n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--cta); }
.next b { display: block; color: var(--red); }
.mail { display: flex; gap: 16px; align-items: center; }
.mail .env { width: 64px; height: 64px; flex: none; border-radius: 20px; box-shadow: var(--in); display: grid; place-items: center; }

footer.foot { margin-top: 34px; font-size: 13px; color: var(--soft); display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; }

/* small phones (375 px): 16 px side gutters */
@media (max-width: 560px) {
  .wrap { padding: 16px 16px 40px; }
  h1 { font-size: 30px; }
  .card, .vcard { padding: 20px; border-radius: 20px; }
  .rail { gap: 4px; }
  .rail .dot { width: 26px; height: 26px; font-size: 12px; }
  .rail .bar { width: 8px; }
  .trust { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 8px; scrollbar-width: none; }
  .trust li { white-space: nowrap; flex: none; }
  .rail li .lbl { display: none; }
  .rail li.now .lbl { display: inline; }
  .price { font-size: 36px; }
  .seg .knob, .seg button { width: 92px; }
  .seg.right .knob { left: 97px; }
  .toggle { padding: 16px; }
  .reader { margin: 12px 14px; padding: 14px; }
  .dhead, .dfoot { padding-left: 16px; padding-right: 16px; }
  .readbar { margin: 0 16px; }
  .sum .total b:last-child { font-size: 24px; }
  .mail { flex-direction: column; align-items: flex-start; }
  .mail h1 { font-size: 28px !important; }
}

/* owner console */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.kpi { padding: 16px 18px; border-radius: 20px; background: var(--bg); box-shadow: var(--up); }
.kpi .v { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.live { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--soft); }
.live i { width: 10px; height: 10px; border-radius: 50%; background: #3f9256; animation: pulseRing 1.8s ease-out infinite; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); padding: 10px; }
table.list td { padding: 12px 10px; border-top: 1px solid #d5dae2; vertical-align: top; }
table.list tr.click { cursor: pointer; }
table.list tr.click:hover td { background: rgba(255, 255, 255, .35); }
table.list tr.fresh td { animation: rowIn 1.2s ease both; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters button { border: 0; border-radius: 12px; padding: 8px 12px; font-weight: 600; background: var(--bg); cursor: pointer; color: var(--soft); box-shadow: var(--in-sm); }
.filters button[aria-pressed="true"] { color: var(--red); box-shadow: var(--up-sm); }
.filters .inp { height: 40px; width: 220px; max-width: 100%; }
.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kv { font-size: 13.5px; line-height: 1.7; overflow-wrap: anywhere; }
.kv b { color: var(--soft); font-weight: 600; }
.edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; padding: 12px 18px; border-radius: 14px; background: var(--tx); color: #fff; font-weight: 600; font-size: 14px; animation: fadeUp .25s ease both; max-width: calc(100vw - 32px); }

/* ---------- 2.79.0: Arabic (?lang=ar): IBM Plex Sans Arabic (shipped with the app, no font service) and right to left ---------- */
@font-face { font-family: "Saqrion Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Saqrion Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-arabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Saqrion Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-arabic-600.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Saqrion Arabic"; font-style: normal; font-weight: 700 800; font-display: swap; src: url(/static/fonts/ibm-plex-sans-arabic-700.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
.topr { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.langsw { font-size: 14px; font-weight: 700; padding: 7px 14px; border-radius: 12px; box-shadow: var(--up-sm); color: var(--tx); }
.langsw:lang(ar) { font-family: "Saqrion Arabic", Inter, "Segoe UI", Arial, sans-serif; }
.planbill { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
[dir=rtl] body { font-family: "Saqrion Arabic", Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.65; }
[dir=rtl] h1, [dir=rtl] .wordmark, [dir=rtl] .price, [dir=rtl] .kicker, [dir=rtl] table.cmp thead th, [dir=rtl] .ringwrap .pct { letter-spacing: 0; text-transform: none; }
[dir=rtl] .signin-box { right: auto; left: 0; }
[dir=rtl] .seg .knob { left: auto; right: 5px; transition: right .35s cubic-bezier(.5, 1.6, .4, 1); }
[dir=rtl] .seg.right .knob { left: auto; right: 109px; }
[dir=rtl] .toggle, [dir=rtl] .plan, [dir=rtl] .accept, [dir=rtl] .agree { text-align: right; }
[dir=rtl] .switch { margin-left: 0; margin-right: auto; }
[dir=rtl] .switch i { left: auto; right: 4px; transition: right .35s cubic-bezier(.5, 1.6, .4, 1); }
[dir=rtl] .on .switch i { left: auto; right: 32px; }
[dir=rtl] .badge { margin-left: 0; margin-right: 6px; }
[dir=rtl] table.cmp th, [dir=rtl] table.cmp td { text-align: right; }
[dir=rtl] .sum .line > :last-child, [dir=rtl] .sum .note { text-align: left; }
/* a web address reads left to right in Arabic too: yourcompany.saqrions.com */
[dir=rtl] .addr { direction: ltr; padding-right: 12px; }
[dir=rtl] .addr .inp { text-align: left; }
[dir=rtl] input[type=email], [dir=rtl] input[type=tel], [dir=rtl] input[type=number] { direction: ltr; text-align: right; }
[dir=rtl] .reader ul, [dir=rtl] .reader ol { padding-left: 0; padding-right: 0; padding-inline-start: 22px; }
[dir=rtl] .reader td, [dir=rtl] .reader th { text-align: start; }
[dir=rtl] .log { font-family: "Saqrion Arabic", var(--mono); }
[dir=rtl] bdi, [dir=rtl] .chip, [dir=rtl] .ref { unicode-bidi: isolate; }
@media (max-width: 560px) { [dir=rtl] .seg.right .knob { left: auto; right: 97px; } }