/* Qme marketing pages after the home page: guides, solutions, branches (AR + EN). Tokens from base.css, parts from site.css. Logical properties only. */
.page-hero { padding-block:64px 24px }
.page-hero h1 { font-size:clamp(32px, 4.4vw, 56px) }
.page-hero .sub { max-inline-size:38em }
.updated { margin-block-start:14px; font-size:14px; color:var(--graphite) }
.page-sec { padding-block:48px }
.page-sec.alt { background:var(--white) }
.page-sec h2 { font-size:clamp(26px, 3vw, 36px) }
.page-sec > .wrap > p.sub { margin-block-end:8px }
@media (max-width:820px) { .page-hero { padding-block:40px 16px } .page-sec { padding-block:36px } }

/* cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap:16px; margin-block:28px 8px; padding:0; list-style:none }
.cards > li, .cards > article { padding:24px; background:var(--white); border:1px solid var(--mist); border-radius:16px; display:flex; flex-direction:column; gap:8px }
.page-sec.alt .cards > li, .page-sec.alt .cards > article { background:var(--paper) }
.cards h3 { font-size:20px; font-weight:600; line-height:1.35 }
.cards p { color:var(--graphite) }
.cards a { text-underline-offset:4px }

/* status chips: Available now / In testing / After the provider approves */
.st { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; min-block-size:28px; padding-inline:10px; border-radius:6px; font-size:14px; font-weight:600; white-space:nowrap }
.st::before { content:""; inline-size:8px; block-size:8px; border-radius:50% }
.st.live { background:var(--charcoal); color:var(--paper) } .st.live::before { background:var(--paper) }
.st.test { border:1.5px dashed var(--charcoal); color:var(--charcoal) } .st.test::before { background:var(--graphite) }
.st.wait { border:1.5px solid var(--fog); color:var(--charcoal); background:var(--paper) } .st.wait::before { border:1.5px solid var(--graphite) }

/* tables (scroll on wide, stacked rows on phones) */
.guide-table { overflow:auto; margin-block:28px }
.guide-table table { border-collapse:collapse; inline-size:100%; min-inline-size:540px; text-align:start }
.guide-table th, .guide-table td { padding:18px; border:1px solid var(--fog); text-align:start; vertical-align:top }
.guide-table caption { text-align:start; margin-block-end:14px; color:var(--graphite) }
.guide-table thead { background:var(--charcoal); color:var(--paper) }
.guide-table.quick td:last-child { font-weight:500; color:var(--charcoal) }
@media (max-width:640px) {
  .guide-table thead { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%) }
  .guide-table table, .guide-table tbody, .guide-table tr, .guide-table th, .guide-table td, .guide-table caption { display:block; inline-size:auto; min-inline-size:0 }
  .guide-table tr { border:1px solid var(--mist); border-radius:12px; margin-block-end:12px; padding:12px 16px; background:var(--white) }
  .guide-table th[scope=row] { border:0; padding:0 0 8px; background:none }
  .guide-table td { border:0; padding:6px 0 }
  .guide-table td::before { content:attr(data-label); display:block; font-size:13px; font-weight:600; color:var(--graphite) } }

/* long-form text */
.guide-body { max-inline-size:780px }
.guide-body h2 { font-size:clamp(24px, 2.6vw, 30px); margin-block:48px 14px }
.guide-body h3 { font-size:20px; margin-block:28px 8px }
.guide-body p, .guide-body li { font-size:17px; line-height:1.85; color:var(--graphite) }
.guide-body ul, .guide-body ol { padding-inline-start:22px; display:grid; gap:8px }
.guide-body details { border-block-end:1px solid var(--mist); padding-block:4px }
.guide-body details p { margin-block:0 }
.guide-cta { margin-block:56px 24px }
.guide-cta .note { font-size:14px; color:var(--graphite); margin-block-start:10px }
a.lang-btn { text-decoration:none }

/* how-to steps with real screenshots */
.steps-shot { list-style:none; padding:0; margin-block:32px 0; display:grid; gap:48px; counter-reset:s; max-inline-size:940px }
.steps-shot > li { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 300px); gap:32px; align-items:center }
.steps-shot > li.wide { grid-template-columns:1fr }
.steps-shot h3 { font-size:22px; margin-block-end:8px; display:flex; align-items:baseline; gap:12px }
.steps-shot h3::before { counter-increment:s; content:counter(s); font-family:var(--num); font-weight:700; font-size:30px; color:var(--silver) }
[lang=ar] .steps-shot h3::before { content:counter(s, arabic-indic) }
.steps-shot p, .steps-shot li li { color:var(--graphite); font-size:17px; line-height:1.85 }
.shot { margin:0 }
.shot img { inline-size:100%; block-size:auto; border-radius:22px; border:1px solid var(--fog); background:var(--white); box-shadow:0 24px 48px -32px rgba(32,33,36,.45) }
.wide .shot img { border-radius:14px }
.shot figcaption { font-size:14px; color:var(--graphite); margin-block-start:10px }
.real-note { display:inline-flex; gap:8px; align-items:center; margin-block-start:18px; padding:8px 14px; border-radius:var(--pill); background:var(--white); border:1px solid var(--fog); font-size:14px }
@media (max-width:760px) { .steps-shot > li { grid-template-columns:1fr; gap:18px } .steps-shot .shot:not(.tab) { max-inline-size:300px } }

/* discount tiers */
.tiers { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-block:24px; padding:0; list-style:none }
.tiers li { padding:20px; border:1px solid var(--fog); border-radius:12px; background:var(--white) }
.tiers b { display:block; font-size:30px; font-weight:600 }
@media (max-width:640px) { .tiers { grid-template-columns:1fr 1fr } }

/* footer for these pages */
.foot.site-foot .wrap { align-items:flex-start }
.foot.site-foot nav { display:flex; flex-wrap:wrap; gap:4px 24px }
.foot.site-foot nav a, .foot.site-foot .contact a { font-size:15px; min-block-size:44px; display:inline-flex; align-items:center; text-decoration:none }
.foot.site-foot nav a:hover, .foot.site-foot .contact a:hover { text-decoration:underline }
.foot.site-foot .legal-line { inline-size:100%; color:var(--silver); font-size:14px; margin-block-start:8px }
.foot.site-foot .contact { display:flex; flex-wrap:wrap; gap:4px 24px }
/* pager guide: the comparison heading under the intro */
#compare { font-size:clamp(24px, 2.6vw, 30px); margin-block:40px 0 }