/* Qme site (landing + pricing), B (Signal). Tokens and shared parts come from base.css; logical properties only (RTL + LTR). */
html { scroll-behavior:smooth; scroll-padding-top:80px }
html, body { overflow-x:clip }
body.site { line-height:1.55 }
.wrap { inline-size:min(1200px, 100% - 32px); margin-inline:auto }
.skip { position:absolute; inset-inline-start:16px; top:-80px; z-index:50; background:var(--charcoal); color:var(--paper); padding:12px 20px; border-radius:var(--pill) }
.skip:focus { top:12px }

/* links styled as buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding-inline:28px; border-radius:var(--pill); font-size:17px; font-weight:500;
  text-decoration:none; background:var(--charcoal); color:var(--paper); border:1.5px solid var(--charcoal); white-space:nowrap }
.btn:hover { background:var(--deep) }
.btn.sec { background:transparent; color:var(--charcoal) } .btn.sec:hover { background:var(--mist) }
.btn.inv { background:var(--paper); color:var(--charcoal); border-color:var(--paper) } .btn.inv:hover { background:var(--white) }
.btn.sm { min-height:44px; padding-inline:20px; font-size:15px }
.on-dark :focus-visible, .dark :focus-visible { outline-color:var(--paper) }

/* header */
.top { position:sticky; top:0; z-index:30; background:rgba(245,243,238,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-block-end:1px solid var(--mist) }
.top .wrap { min-block-size:64px; display:flex; align-items:center; gap:24px }
.top .wm { inline-size:88px; display:block }
.top nav { display:flex; gap:24px; margin-inline-end:auto }
.top nav a, .top .tl { font-size:15px; text-decoration:none; font-weight:500; min-block-size:44px; display:inline-flex; align-items:center }
.top nav a:hover, .top .tl:hover { text-decoration:underline; text-underline-offset:6px }
.top nav a[aria-current] { text-decoration:underline; text-underline-offset:6px }
.top .lang-btn { border-color:var(--fog) }
@media (max-width:900px) { .top nav .opt { display:none } }
@media (max-width:640px) {
  .top .wrap { gap:10px } .top .wm { inline-size:72px } .top nav { gap:14px }
  .top .btn, .top .tl { display:none } .top .lang-btn { padding-inline:10px; font-size:14px } }

h1, h2, h3 { line-height:1.2; font-weight:600 }
h2 { font-size:clamp(30px, 4vw, 48px) }
[lang=ar] h1, [lang=ar] h2 { line-height:1.35 }
.sub { font-size:19px; color:var(--graphite); max-inline-size:34em; margin-block-start:14px }
.label { display:block; margin-block-end:12px }
section { padding-block:96px }
@media (max-width:820px) { section { padding-block:64px } .sub { font-size:17px } }

/* hero */
.hero { padding-block:64px 88px }
.hero .wrap { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center }
.hero h1 { font-size:clamp(40px, 6vw, 76px); display:flex; align-items:center; flex-wrap:wrap; gap:.3em }
.hero h1 img { block-size:.9em; inline-size:auto }
.hero .lead { font-size:20px; color:var(--graphite); max-inline-size:30em; margin-block:20px 32px }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap }
.hero .note { margin-block-start:20px; font-size:15px; color:var(--graphite) }
.cap { font-size:13px; color:var(--graphite); text-align:center; margin-block-start:12px }
@media (max-width:900px) { .hero .wrap { grid-template-columns:1fr; gap:40px } .hero { padding-block:32px 56px } }
@media (max-width:420px) { .hero .cta .btn { flex:1 1 100% } }

/* the guest page, drawn from the product's own parts and copy (not a screenshot) */
.gp { inline-size:min(340px, 100%); margin-inline:auto; background:var(--paper); border:1px solid var(--fog); border-radius:28px; padding:16px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 30px 60px -36px rgba(32,33,36,.45) }
.gp .venue { font-weight:600; font-size:15px }
.plate { background:var(--charcoal); color:var(--paper); border-radius:16px; padding:16px 20px }
.plate .lb { font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--silver) }
.plate .tk { font-family:var(--num); font-weight:800; font-size:88px; line-height:1; margin-block:6px 12px; direction:ltr; unicode-bidi:isolate; text-align:start }
.plate .st { display:flex; align-items:center; gap:10px; border-block-start:1px solid var(--rule2); padding-block-start:12px; font-weight:600 }
.gp h3 { font-size:24px }
.gp .sup { color:var(--graphite); margin-block-start:-10px }
.line { display:grid; grid-template-columns:repeat(4, 1fr); text-align:center; font-size:11.5px; color:var(--graphite) }
.line span { position:relative; padding-block-start:16px }
.line span::before { content:""; position:absolute; inset-block-start:2px; inset-inline-start:calc(50% - 4px); inline-size:8px; block-size:8px; border-radius:50%; background:var(--fog) }
.line span::after { content:""; position:absolute; inset-block-start:5.5px; inset-inline-start:calc(50% + 6px); inline-size:calc(100% - 12px); block-size:1px; background:var(--fog) }
.line span:last-child::after { display:none }
.line .done::before { background:var(--charcoal) } .line .done::after { background:var(--charcoal) }
.line .now { color:var(--charcoal); font-weight:600 } .line .now::before { background:var(--silver); box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--silver) }
.gp .row { display:flex; align-items:center; gap:10px; font-weight:600; padding-block:10px; border-block:1px solid var(--mist) }
.gp .box { border:1px solid var(--mist); background:var(--white); border-radius:14px; padding:12px 14px; font-size:14px }
.gp .box b { display:flex; align-items:center; gap:8px; font-size:15px; margin-block-end:4px }
.gp .gfoot { font-size:12px; color:var(--graphite); text-align:end }

/* proof strip: four provable facts, no numbers */
.proof { padding-block:0 }
.proof ul { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px }
.proof li { display:flex; align-items:center; gap:12px; background:var(--white); border-radius:14px; padding:18px; font-weight:500 }
@media (max-width:900px) { .proof ul { grid-template-columns:1fr 1fr } }
@media (max-width:520px) { .proof ul { grid-template-columns:1fr } }

/* how it works */
.steps { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-block-start:40px }
.steps li { background:var(--white); border-radius:16px; padding:28px 24px }
.steps .n { font-family:var(--num); font-weight:600; font-size:44px; color:var(--silver); line-height:1 }
.steps h3 { font-size:26px; margin-block:14px 8px }
.steps p { color:var(--graphite) }
@media (max-width:900px) { .steps { grid-template-columns:1fr } }

/* notifications, honestly */
.alerts { background:var(--white) }
.facts { display:grid; grid-template-columns:repeat(2, 1fr); gap:0 48px; margin-block-start:40px }
.facts > div { padding-block:22px; border-block-start:1px solid var(--fog) }
.facts h3 { font-size:20px; display:flex; align-items:center; gap:10px; margin-block-end:6px }
.facts p { color:var(--graphite); max-inline-size:34em }
.facts .key { grid-column:1 / -1; background:var(--charcoal); color:var(--paper); border-radius:16px; padding:22px 24px; border:0; margin-block-end:12px }
.facts .key p { color:var(--silver) }
@media (max-width:820px) { .facts { grid-template-columns:1fr } }

/* team board, drawn like the real one: light Preparing zone, Charcoal Ready zone */
.team .wrap, .hall .wrap { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center }
@media (max-width:900px) { .team .wrap, .hall .wrap { grid-template-columns:1fr; gap:32px } }
.bd { display:grid; grid-template-columns:3fr 2fr; border-radius:18px; overflow:hidden; border:1px solid var(--fog); background:var(--paper) }
.bd .z { min-inline-size:0 }
.bd .zh { display:flex; align-items:center; gap:10px; padding:14px 16px; font-weight:600; font-size:15px; border-block-end:2px solid currentColor }
.bd .zh .num { margin-inline-start:auto; font-size:24px; font-weight:800 }
.bd .zd { background:var(--charcoal); color:var(--paper) }
.bd .r { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px 12px; padding:12px 16px; border-block-end:1px solid var(--fog) }
.bd .zd .r { border-color:var(--rule) }
.bd .r.late { box-shadow:inset 4px 0 0 var(--alert) } [dir=rtl] .bd .r.late { box-shadow:inset -4px 0 0 var(--alert) }
.bd .tk { font-family:var(--num); font-weight:800; font-size:34px; line-height:1; grid-row:span 2 }
.bd .min { font-size:14px; color:var(--graphite) } .bd .zd .min { color:var(--silver) }
.bd .min b { font-family:var(--num); font-size:22px; color:var(--charcoal); margin-inline-end:4px } .bd .zd .min b { color:var(--paper) }
.bd .act { grid-row:span 2; display:inline-flex; align-items:center; gap:8px; min-block-size:48px; padding-inline:18px; border-radius:var(--pill); background:var(--charcoal); color:var(--paper); font-weight:500; font-size:15px; white-space:nowrap }
.bd .zd .act { background:var(--paper); color:var(--charcoal) }
.bd .flags { display:flex; gap:6px; flex-wrap:wrap }
.bd .flag { font-size:13px; min-block-size:26px; padding-inline:8px }
.bd .flag.call { background:var(--charcoal); color:var(--paper) }
@media (max-width:600px) { .bd { grid-template-columns:1fr } .bd .zd { order:-1 } }

/* hall screen: Preparing first in the DOM, so Arabic puts Ready on the left as on the real board */
.tv { aspect-ratio:16 / 9; display:grid; grid-template-columns:1fr 1fr; border-radius:14px; overflow:hidden; border:8px solid var(--charcoal); background:var(--paper) }
.tv .z { padding:5% 6%; min-inline-size:0 }
.tv .zh { font-weight:600; font-size:clamp(12px, 1.4vw, 17px); padding-block-end:6px; border-block-end:1.5px solid currentColor; margin-block-end:8px }
.tv .nums { display:grid; grid-template-columns:repeat(3, 1fr); gap:2px 8px; font-family:var(--num); direction:ltr }
.tv .prep .nums { font-weight:600; font-size:clamp(16px, 2.2vw, 28px) }
.tv .rdy { background:var(--charcoal); color:var(--paper) } .tv .rdy .nums { grid-template-columns:repeat(2, 1fr); font-weight:800; font-size:clamp(26px, 4vw, 54px) }

/* live demo */
.try .wrap { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
.try-card { background:var(--white); border-radius:24px; padding:36px 28px; min-block-size:380px; display:grid; place-items:center; text-align:center }
.try-card #tryIdle { display:flex; flex-direction:column; align-items:center; gap:36px }
.try-card #tryIdle .cue { transform:scale(1.6) }
.try-card #tryRun:not(.hidden) { display:flex; flex-direction:column; align-items:center; gap:14px }
.try-qr img, .try-qr canvas { inline-size:200px!important; block-size:200px!important; display:block }
.try-n { color:var(--graphite) } .try-n b { font-family:var(--num); font-size:30px; color:var(--charcoal); font-weight:800; margin-inline-start:8px }
.try-card .mutef { font-size:14px; color:var(--graphite) }
@media (max-width:900px) { .try .wrap { grid-template-columns:1fr; gap:28px } .try-card { min-block-size:0 } }

/* market switcher + prices */
.mkt { display:flex; flex-wrap:wrap; gap:8px; margin-block:28px 0; padding:0; border:0 }
.mkt legend { inline-size:100%; margin-block-end:4px }
.mkt button { background:var(--white); color:var(--charcoal); border:1.5px solid var(--fog); min-height:44px; padding-inline:18px; font-size:15px }
.mkt button[aria-pressed=true] { background:var(--charcoal); color:var(--paper); border-color:var(--charcoal) }
.status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-block-start:24px }
.status .flag { font-size:15px; min-block-size:36px; padding-inline:12px; white-space:normal }
.status .flag.cur { background:var(--charcoal); color:var(--paper) }
.status .flag.test { border:1.5px dashed var(--charcoal); background:var(--white) }
.status .tax { color:var(--graphite); font-size:15px }
.testnote { margin-block-start:10px; color:var(--graphite); font-size:15px; max-inline-size:44em }
.teaser { margin-block-start:32px; background:var(--white); border-radius:20px; padding:28px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px }
.teaser .amt { font-family:var(--num); font-weight:700; font-size:clamp(34px, 5vw, 52px); line-height:1.1 }
.teaser .amt small { font-family:var(--font); font-size:15px; font-weight:400; color:var(--graphite); margin-inline-start:8px }
.plans5 { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-block-start:28px }
.plan { background:var(--white); border-radius:16px; padding:22px 18px; display:flex; flex-direction:column; gap:6px; min-inline-size:0 }
.plan h3 { font-size:19px; font-weight:600 }
.plan .amt { font-family:var(--num); font-weight:700; font-size:30px; line-height:1.15; margin-block-start:8px; overflow-wrap:anywhere }
.plan .tl8 { font-size:13px; font-weight:500; border-inline-start:3px solid var(--charcoal); padding-inline-start:8px }
.plan .per { font-size:14px; color:var(--graphite) }
.plan .mo { font-size:15px }
.plan .fit { font-size:14px; color:var(--graphite); margin-block-end:12px }
.plan .btn { margin-block-start:auto; min-height:48px; font-size:15px; padding-inline:14px; white-space:normal; text-align:center }
@media (max-width:1100px) { .plans5 { grid-template-columns:repeat(3, 1fr) } }
@media (max-width:700px) { .plans5 { grid-template-columns:1fr } .plan { display:grid; grid-template-columns:1fr auto; column-gap:12px } .plan > * { grid-column:1 / -1 } }
.incl { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px 24px; margin-block-start:16px }
.incl li { display:flex; gap:10px; align-items:center }
.err-box { margin-block-start:28px; background:var(--white); border-radius:16px; padding:24px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between }

/* FAQ */
details { border-block-end:1px solid var(--fog) }
summary { min-block-size:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:19px; font-weight:500; cursor:pointer; list-style:none }
summary::-webkit-details-marker { display:none }
summary::after { content:"+"; font-size:26px; font-weight:300 } details[open] summary::after { content:"−" }
details p { color:var(--graphite); padding-block-end:20px; max-inline-size:40em; font-size:17px }

/* closing band + footer */
.close { background:var(--charcoal); color:var(--paper); text-align:center; padding-block:88px }
.close h2 { font-size:clamp(32px, 5vw, 60px) }
.close .cue { inline-size:18px; block-size:18px; margin:0 auto 36px; display:block }
.close .cue.one::before { inset:-8px }
.close .btn { margin-block-start:32px }
.foot { background:var(--charcoal); color:var(--paper); border-block-start:1px solid var(--rule); padding-block:48px 32px }
.foot .wrap { display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-end }
.foot .wm { inline-size:120px; display:block; margin-block-end:14px }
.foot .tag { font-size:18px; font-weight:600 } .foot .mutef { color:var(--silver); font-size:14px }
.foot nav { display:flex; gap:8px 24px; flex-wrap:wrap }
.foot nav a { font-size:15px; text-decoration:none; min-block-size:44px; display:inline-flex; align-items:center }
.foot nav a:hover { text-decoration:underline }