/* RiseToExcel: the free practice pages (English and Arabic), the guest "Try a question" page and the trust pages (Phase 1, 1 Nov 2026).
   Same brand colours as the main page (css/hub.css). Maths always reads left to right, also on the Arabic pages. */
:root {
  --bg: #f3f6f9; --card: #fff; --ink: #10243a; --ink-2: #51637a; --line: #dbe3ec;
  --navy: #0f2a44; --teal: #297b7e; --teal-d: #1d5f62; --teal-l: #e3f2f2; --sky: #83b7e6; --gold: #f2b705;
  --ok-bg: #e3f2f2; --ok-ink: #1d5f62; --no-bg: #fbe9e4; --no-ink: #8a3b12; --no-line: #b4472a;
  --focus: #1f6fd1; --r: 22px;
  --font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Lexend", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1622; --card: #13212f; --ink: #e8f0f7; --ink-2: #a3b5c7; --line: #26384a; --teal-l: #173436;
    --ok-bg: #173436; --ok-ink: #8fd6d8; --no-bg: #3a2119; --no-ink: #ffb59a; --focus: #8ab4f8; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 1rem/1.65 var(--font); }
html[lang="ar"] body { font-family: var(--font-ar); font-size: 1.05rem; line-height: 1.85; }
a { color: var(--teal-d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a { color: #8fd6d8; } }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.4; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* no off-screen offset: it would widen the Arabic (right-to-left) pages */
.skip:focus { width: auto; height: auto; clip-path: none; top: 12px; inset-inline-start: 12px; z-index: 9; background: var(--card); padding: 10px 16px; border-radius: 10px; }
.ltr, .m { direction: ltr; unicode-bidi: isolate; }
.m { font-family: var(--font); white-space: nowrap; }

/* top bar */
.pbar { background: var(--card); border-bottom: 1px solid var(--line); }
.pbar-in { max-width: 1080px; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); direction: ltr; font-family: var(--font); }
.brand svg { width: 38px; height: 38px; flex: none; border-radius: 11px; }
.brand span { display: flex; flex-direction: column; line-height: 1.15; }
.brand b { font-size: 1.1rem; }
.brand small { color: var(--ink-2); font-size: .8rem; }
.lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--teal); font-weight: 600; text-decoration: none; }
.lang[lang="ar"] { font-family: var(--font-ar); }
.lang[lang="en"] { font-family: var(--font); }

main { max-width: 1080px; margin: 0 auto; padding: 22px 16px 56px; display: flex; flex-direction: column; gap: 28px; }
.crumb { font-size: .92rem; color: var(--ink-2); margin: 0; }
.lead-row { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.lead { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lead h1 { font-size: clamp(2rem, 6vw, 2.8rem); color: var(--navy); }
@media (prefers-color-scheme: dark) { .lead h1, .card h2, .more h2, .doc h1, .doc h2 { color: var(--ink); } }
.lead > p { margin: 0; font-size: 1.08rem; }
.gets { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.gets li { display: flex; gap: 10px; align-items: flex-start; }
.gets svg { width: 22px; height: 22px; flex: none; margin-top: 3px; stroke: var(--teal); }
.note { color: var(--ink-2); font-size: .95rem; margin: 0; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.go { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px; border-radius: 999px; background: var(--navy); color: #fff !important; font-weight: 600; font-size: 1.08rem; text-decoration: none; }
.go:hover { background: #173d63; }
@media (prefers-color-scheme: dark) { .go { background: var(--teal); } .go:hover { background: var(--teal-d); } }
.cta small { color: var(--ink-2); font-size: .92rem; }

/* sample question */
.card { flex: 1 1 360px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 2px rgba(16,36,58,.06), 0 8px 24px rgba(16,36,58,.08); }
.card-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.card h2 { font-size: 1.25rem; color: var(--navy); }
.tag { background: var(--teal); color: #fff; font-size: .8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.q { margin: 0; font-size: 1.12rem; direction: ltr; text-align: left; font-family: var(--font); }
.q-ar { margin: 0; color: var(--ink-2); font-size: 1rem; }
.choices { direction: ltr; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-family: var(--font); }
@media (max-width: 420px) { .choices { grid-template-columns: minmax(0, 1fr); } }
.choice { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); text-align: left; font-size: 1.08rem; }
.choice b { color: var(--ink-2); }
.choice:hover:not(:disabled) { border-color: var(--teal); }
.choice:disabled { cursor: default; }
.choice.right { border-color: var(--teal); background: var(--ok-bg); }
.choice.wrong { border-color: var(--no-line); background: var(--no-bg); }
.ans { border-radius: 14px; background: var(--bg); padding: 2px 16px; }
.ans summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.ans p { margin: 0 0 14px; }
.verdict { font-weight: 700; }
.ans.ok { background: var(--ok-bg); } .ans.ok .verdict { color: var(--ok-ink); }
.ans.no { background: var(--no-bg); } .ans.no .verdict { color: var(--no-ink); }
.again { align-self: flex-start; background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--teal); text-decoration: underline; font-weight: 600; }

/* more practice */
.more h2 { font-size: 1.35rem; color: var(--navy); margin-bottom: 12px; }
.more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.more a { display: flex; align-items: center; min-height: 56px; padding: 12px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; font-weight: 600; color: var(--ink); }
.more a:hover { border-color: var(--teal); }

/* trust pages (Terms, Privacy, Contact) */
.draft { background: var(--gold); color: #0f2a44; }
.draft p { max-width: 860px; margin: 0 auto; padding: 12px 16px; font-weight: 600; }
.doc { max-width: 860px; }
.doc h1 { font-size: clamp(1.9rem, 5vw, 2.4rem); color: var(--navy); }
.doc .upd { color: var(--ink-2); margin: 6px 0 0; }
.doc section { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.doc h2 { font-size: 1.25rem; color: var(--navy); margin-bottom: 8px; }
.doc ul { margin: 0; padding-inline-start: 22px; }
.doc p { margin: 0 0 8px; }
.doc p:last-child { margin-bottom: 0; }

/* guest quiz (try/) */
.quiz { max-width: 760px; }
.quiz > .lead { flex: none; }   /* a column here: no growing height */
.progress { color: var(--ink-2); font-weight: 600; margin: 0; }
.next { align-self: flex-start; min-height: 48px; padding: 10px 22px; border-radius: 999px; border: 0; background: var(--navy); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .next { background: var(--teal); } }
.done h2 { font-size: 1.5rem; }

/* footer */
.pfoot { background: var(--navy); color: #d6e2ee; }
.pfoot-in { max-width: 1080px; margin: 0 auto; padding: 26px 16px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.pfoot .who { direction: ltr; font-family: var(--font); margin: 0; }
.pfoot .who b { color: #fff; }
.pfoot nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pfoot nav a { color: #fff; min-height: 44px; display: inline-flex; align-items: center; }