:root {
  color-scheme: light;
  --bg: #f6f8ff;
  --surface: #ffffff;
  --surface-warm: #fff8e3;
  --surface-red: #fff0f2;
  --surface-blue: #edf3ff;
  --ink: #17181c;
  --muted: #5f6675;
  --line: #d8deea;
  --red: #d92332;
  --red-dark: #a90f21;
  --gold: #ffc400;
  --gold-dark: #a45c00;
  --blue: #315fd6;
  --green: #128460;
  --shadow: 0 10px 0 rgba(30, 36, 54, .08), 0 26px 56px rgba(30, 36, 54, .12);
  --soft-shadow: 0 5px 0 rgba(30, 36, 54, .08);
  --radius: 22px;
  --max: 1180px;
  font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1017;
  --surface: #151922;
  --surface-warm: #29230f;
  --surface-red: #2a171c;
  --surface-blue: #151e35;
  --ink: #f7f8fb;
  --muted: #b8c0d0;
  --line: #343b4b;
  --red: #ff6674;
  --red-dark: #ff9ba4;
  --gold: #ffd43b;
  --gold-dark: #ffd43b;
  --blue: #82a6ff;
  --green: #61d6ae;
  --shadow: 0 10px 0 rgba(0, 0, 0, .34), 0 26px 56px rgba(0, 0, 0, .3);
  --soft-shadow: 0 5px 0 rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(49, 95, 214, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 95, 214, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.75;
}
a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.ltr { direction: ltr; unicode-bidi: isolate; font-family: Inter, Arial, sans-serif; }
.skip-link { position: fixed; inset-inline-start: 10px; top: -80px; z-index: 100; background: var(--ink); color: var(--surface); padding: 10px 18px; border-radius: 12px; }
.skip-link:focus { top: 10px; }

.site-header {
  width: min(var(--max), calc(100% - 32px));
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 82px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 950; font-size: 1.25rem; white-space: nowrap; }
.brand img { width: 58px; height: 58px; }
.nav { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.nav a, .menu-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 800;
  color: var(--muted);
  background: transparent;
}
.nav a[aria-current="page"] { color: var(--red-dark); background: color-mix(in srgb, var(--surface-red) 86%, transparent); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.menu-button { display: none; border-color: var(--line); cursor: pointer; }
.nav .menu-button[data-action="theme"] { display: inline-flex; min-width: 46px; padding-inline: 12px; }

main { width: min(var(--max), calc(100% - 32px)); margin: 28px auto 90px; }
.rail { height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--ink) 0 33.333%, var(--red) 33.333% 66.666%, var(--gold) 66.666%); }
.eyebrow { margin: 0 0 8px; color: var(--red-dark); font-weight: 950; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; }
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 32px;
  padding: clamp(30px, 5vw, 70px);
  border: 1px solid var(--line);
  border-top: 8px solid var(--ink);
  border-radius: 30px;
  background: linear-gradient(135deg, var(--surface) 0 55%, var(--surface-warm));
  box-shadow: var(--shadow);
}
.hero::after { content: ""; position: absolute; width: 280px; height: 280px; inset-inline-end: -120px; bottom: -140px; border: 34px solid rgba(217, 35, 50, .1); border-radius: 50%; }
h1, h2, h3 { line-height: 1.22; margin-top: 0; }
h1 { font-size: clamp(2.35rem, 5.5vw, 5.4rem); margin-bottom: 18px; letter-spacing: -.04em; }
h2 { font-size: clamp(1.75rem, 3vw, 3rem); }
h3 { font-size: 1.25rem; }
.lede { max-width: 760px; color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 20px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 950;
  cursor: pointer;
  box-shadow: var(--soft-shadow);
}
.button.primary { background: var(--red); color: white; border-color: var(--red); }
.button.gold { background: var(--gold); color: #17181c; border-color: var(--gold); }
.button.ghost { background: transparent; }
.button.small { min-height: 44px; padding: 7px 14px; font-size: .9rem; }
.button:focus-visible, .nav a:focus-visible, input:focus-visible { outline: 4px solid color-mix(in srgb, var(--gold) 70%, transparent); outline-offset: 3px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: center; position: relative; z-index: 1; }
.stat { padding: 22px 12px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); border-top: 5px solid var(--red); border-radius: 18px; text-align: center; }
.stat:nth-child(even) { border-top-color: var(--gold); }
.stat strong { display: block; font: 950 1.65rem/1 Inter, Arial, sans-serif; }
.stat span { color: var(--muted); font-size: .9rem; }

.section { margin-top: clamp(64px, 9vw, 110px); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-head p { color: var(--muted); max-width: 660px; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  position: relative;
  padding: 24px;
  border: 1px solid var(--line);
  border-top: 6px solid var(--red);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}
.card:nth-child(3n + 2) { border-top-color: var(--gold); }
.card:nth-child(3n) { border-top-color: var(--blue); }
.card p { color: var(--muted); }
.card .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-blue); color: var(--ink); font-size: .82rem; font-weight: 850; }
.chip.success { background: color-mix(in srgb, var(--green) 13%, var(--surface)); color: var(--green); }
.card-link { position: absolute; inset: 0; border-radius: inherit; }
.card > :not(.card-link) { position: relative; z-index: 1; pointer-events: none; }
.card .button, .card a:not(.card-link) { pointer-events: auto; }

.route-card { margin-top: 48px; display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 22px; padding: 26px; border: 1px solid color-mix(in srgb, var(--gold) 70%, var(--line)); border-top: 7px solid var(--gold); border-radius: 24px; background: linear-gradient(110deg, var(--surface), var(--surface-warm)); box-shadow: var(--shadow); }
.route-icon { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--gold); font-size: 2rem; }
.route-card p { margin: 4px 0 0; color: var(--muted); }

.page-hero { padding: 36px clamp(24px, 5vw, 58px); border: 1px solid var(--line); border-top: 8px solid var(--red); border-radius: 26px; background: linear-gradient(115deg, var(--surface), var(--surface-red)); box-shadow: var(--soft-shadow); }
.page-hero h1 { font-size: clamp(2.25rem, 4vw, 4.3rem); }
.interactive-page .page-hero { padding-block: 28px; text-align: center; }
.interactive-page .page-hero h1 { max-width: 900px; margin-inline: auto; font-size: clamp(2rem, 3.4vw, 3.4rem); }
.interactive-page .page-hero .lede { margin-inline: auto; }
.interactive-page .breadcrumbs { text-align: start; }
.breadcrumbs { margin-bottom: 16px; color: var(--muted); font-size: .9rem; }
.breadcrumbs a { display: inline-flex; min-height: 44px; align-items: center; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.meta a.chip, a.chip { min-height: 44px; }

.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; align-items: start; }
.prose { min-width: 0; }
.prose section { margin: 28px 0; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.prose li + li { margin-top: 8px; }
.toc { position: sticky; top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.toc a { display: block; padding: 8px 0; color: var(--muted); }

.word-hero { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.english-word { direction: ltr; unicode-bidi: isolate; display: inline-block; font: 950 clamp(3rem, 8vw, 6rem)/1 Inter, Arial, sans-serif; letter-spacing: -.05em; }
.meaning { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 850; }
.sound { width: 52px; height: 52px; display: inline-grid; place-items: center; border: 2px solid color-mix(in srgb, var(--gold) 80%, var(--ink)); border-radius: 50%; background: var(--surface-warm); cursor: pointer; box-shadow: var(--soft-shadow); }
.example { direction: ltr; unicode-bidi: isolate; padding: 18px; border-inline-start: 5px solid var(--red); border-radius: 14px; background: var(--surface-red); font-family: Inter, Arial, sans-serif; }
.translation { padding: 12px 18px; color: var(--muted); }

.study-shell { position: relative; display: grid; gap: 14px; }
.study-top { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-top: 7px solid var(--gold); border-radius: 20px; background: var(--surface); box-shadow: var(--soft-shadow); }
.study-metric { padding: 4px 10px; }
.study-metric small { display: block; color: var(--muted); font-weight: 800; }
.study-metric strong { font: 900 1.3rem/1.2 Inter, Arial, sans-serif; }
.goal-track { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.goal-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .35s ease; }
.select { min-height: 46px; border: 1px solid var(--line); border-radius: 13px; padding: 6px 12px; background: var(--surface-warm); color: var(--ink); font-weight: 850; }
.direction-select { background: linear-gradient(110deg, var(--gold) 0 54%, var(--red) 55% 100%); color: #17181c; border-color: var(--gold-dark); }
.filter-trigger { min-height: 50px; display: grid; grid-template-columns: auto auto 18px; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--gold-dark) 58%, var(--line)); border-radius: 14px; background: var(--surface-warm); color: var(--ink); cursor: pointer; box-shadow: var(--soft-shadow); }
.filter-trigger small { color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.filter-trigger strong { white-space: nowrap; }
.filter-trigger > span { font-size: 1.25rem; line-height: 1; }
.filter-trigger.compact { min-width: 175px; }
.filter-panel { position: absolute; z-index: 20; inset-inline-end: 0; top: 80px; width: min(620px, calc(100vw - 40px)); padding: 20px; border: 1px solid var(--line); border-top: 7px solid var(--gold); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.filter-head, .filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.filter-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.filter-head strong, .filter-head small { display: block; }
.filter-head small, .filter-foot span { color: var(--muted); font-size: .86rem; }
.filter-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--surface-red); color: var(--red-dark); font-size: 1.45rem; cursor: pointer; }
.filter-group { margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; }
.filter-group legend { padding-inline: 7px; font-weight: 950; }
.filter-group > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.filter-group label { min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.filter-group label:has(input:checked) { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: var(--surface-red); color: var(--red-dark); }
.filter-group input { width: 18px; height: 18px; accent-color: var(--red); }
.filter-all { border: 0; background: transparent; color: var(--red-dark); font-weight: 850; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.active-set { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--blue) 50%, var(--line)); border-radius: 14px; background: var(--surface-blue); font-weight: 850; }
.active-set a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); text-decoration: none; }
.study-support { display: flex; justify-content: flex-end; min-height: 28px; }
.guide-link, .coach-close { border: 0; background: transparent; color: var(--muted); font-weight: 850; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.guide-link, .coach-close { min-height: 44px; padding: 7px 9px; }
.coach-card { position: relative; z-index: 2; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--line)); border-inline-start: 7px solid var(--blue); border-radius: 18px; background: var(--surface-blue); box-shadow: var(--soft-shadow); }
.coach-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold); font-size: 1.3rem; }
.coach-card p { margin: 2px 0; color: var(--muted); }
.coach-card .eyebrow { color: var(--blue); }
.coach-actions { display: flex; align-items: center; gap: 7px; }
.coach-highlight { outline: 4px solid color-mix(in srgb, var(--blue) 62%, transparent); outline-offset: 4px; }
.study-card { min-height: 540px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: clamp(24px, 5vw, 62px); border: 1px solid var(--line); border-top: 9px solid var(--red); border-radius: 26px; background: linear-gradient(135deg, var(--surface), var(--surface-blue)); box-shadow: var(--shadow); text-align: center; }
.prompt-row { display: flex; gap: 12px; align-items: center; justify-content: center; }
.study-prompt { font: 950 clamp(2.8rem, 8vw, 6.5rem)/1 Inter, Arial, sans-serif; direction: ltr; unicode-bidi: isolate; }
.study-arabic { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 950; }
.choices { width: min(780px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { min-height: 70px; border: 1px solid var(--line); border-top: 5px solid var(--red); border-radius: 15px; background: var(--surface); color: var(--ink); font-weight: 900; cursor: pointer; }
.choice:hover { transform: translateY(-2px); }
.choice.correct { border-color: var(--green); background: color-mix(in srgb, var(--green) 13%, var(--surface)); }
.choice.wrong { border-color: var(--red); background: var(--surface-red); }
.grades { display: none; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(680px, 100%); }
.grades.show { display: grid; }
.grades .button { min-height: 68px; flex-direction: column; gap: 0; }
.grades small { display: block; opacity: .78; font-weight: 750; }

.celebration { width: min(760px, 100%); position: relative; overflow: hidden; display: grid; place-items: center; gap: 14px; padding: clamp(26px, 5vw, 56px); border: 1px solid color-mix(in srgb, var(--gold) 70%, var(--line)); border-top: 8px solid var(--gold); border-radius: 26px; background: linear-gradient(135deg, var(--surface), var(--surface-warm)); box-shadow: var(--shadow); }
.celebration h2 { margin: 0; text-align: center; }
.trophy { width: 72px; height: 72px; display: grid; place-items: center; border: 3px solid color-mix(in srgb, var(--red) 65%, var(--gold)); border-radius: 50%; background: var(--gold); font-size: 2rem; box-shadow: var(--soft-shadow); }
.summary-stats { width: min(560px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.summary-stats div { padding: 16px 10px; border: 1px solid var(--line); border-top: 5px solid var(--red); border-radius: 15px; background: var(--surface); text-align: center; }
.summary-stats div:nth-child(2) { border-top-color: var(--gold); }
.summary-stats div:nth-child(3) { border-top-color: var(--blue); }
.summary-stats strong, .summary-stats span { display: block; }
.summary-stats strong { font: 950 1.55rem/1 Inter, Arial, sans-serif; }
.summary-stats span { margin-top: 7px; color: var(--muted); font-size: .82rem; }
.confetti { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, var(--red) 0 4px, transparent 5px), radial-gradient(circle, var(--gold) 0 4px, transparent 5px), radial-gradient(circle, var(--blue) 0 4px, transparent 5px); background-size: 91px 83px, 117px 109px, 151px 127px; background-position: 7px 17px, 43px 5px, 21px 39px; opacity: .22; animation: confetti-drift 8s linear infinite; }
@keyframes confetti-drift { to { background-position: 98px 100px, 160px 114px, 172px 166px; } }
.empty-state { display: grid; place-items: center; gap: 12px; text-align: center; }

.activity-shell { position: relative; margin-top: clamp(42px, 6vw, 70px); }
.activity-toolbar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.activity-best { color: var(--muted); font-weight: 850; }
.activity-shell .filter-panel { top: 68px; }
.practice-board { min-height: 520px; display: grid; align-content: center; padding: clamp(20px, 4vw, 46px); border: 1px solid var(--line); border-top: 8px solid var(--gold); border-radius: 24px; background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface-warm) 40%, var(--surface))); box-shadow: var(--shadow); }
.activity-loading { display: grid; place-items: center; gap: 12px; color: var(--muted); }
.loader { width: 48px; height: 48px; border: 5px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.quiz-question { text-align: center; margin: 20px 0 28px; }
.quiz-question strong { display: block; direction: ltr; font: 950 clamp(2rem, 6vw, 4.5rem)/1.1 Inter, Arial, sans-serif; }
.quiz-question .sentence-prompt { font-size: clamp(1.35rem, 3.2vw, 2.3rem); line-height: 1.45; }
.progress-dots { display: flex; justify-content: center; gap: 8px; }
.progress-dots i { width: 16px; height: 16px; border: 2px solid var(--red); border-radius: 50%; }
.progress-dots i.done { background: var(--green); border-color: var(--green); }
.activity-score { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-weight: 850; }
.activity-score strong { color: var(--ink); }
.activity-score #activityTimer { min-width: 48px; padding: 6px 10px; border-radius: 999px; background: var(--gold); color: #17181c; text-align: center; }
.activity-result { margin: auto; }
.activity-result .actions { justify-content: center; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair-tile { min-height: 72px; padding: 12px; border: 1px solid var(--line); border-top: 5px solid var(--red); border-radius: 15px; background: var(--surface); color: var(--ink); font-weight: 900; cursor: pointer; }
.pair-tile.en { direction: ltr; border-top-color: var(--blue); font-family: Inter, Arial, sans-serif; }
.pair-tile.open { transform: translateY(-2px); box-shadow: var(--soft-shadow); }
.pair-tile.matched { border-color: var(--green); background: color-mix(in srgb, var(--green) 13%, var(--surface)); opacity: .72; }
.sentence-meaning { margin: 18px auto; text-align: center; font-size: clamp(1.35rem, 3vw, 2.2rem); }
.tile-zone { min-height: 112px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.tile-zone.selected { margin-bottom: 14px; border: 2px dashed color-mix(in srgb, var(--red) 58%, var(--line)); background: var(--surface-red); }
.tile-zone.selected > span { color: var(--muted); }
.tile-zone.selected.has-tiles > span { display: none; }
.word-tile { min-height: 48px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--gold-dark) 45%, var(--line)); border-radius: 13px; background: var(--surface-warm); color: var(--ink); font-weight: 900; cursor: grab; box-shadow: var(--soft-shadow); }
.activity-hint { margin: 14px 0 0; color: var(--muted); text-align: center; font-size: .9rem; }
.activity-actions { justify-content: center; }
.wordle-clue { text-align: center; font-size: 1.15rem; font-weight: 850; }
.wordle-grid { width: min(410px, 100%); display: grid; gap: 7px; margin: 18px auto; direction: ltr; }
.wordle-grid > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.wordle-grid span { aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 9px; background: var(--surface); text-transform: uppercase; font: 950 clamp(1.1rem, 4vw, 1.55rem)/1 Inter, Arial, sans-serif; }
.wordle-grid .exact { border-color: var(--green); background: var(--green); color: white; }
.wordle-grid .present { border-color: var(--gold-dark); background: var(--gold); color: #17181c; }
.wordle-grid .absent { background: var(--muted); color: white; }
.wordle-form { width: min(520px, 100%); margin: auto; }
.wordle-form label { display: block; margin-bottom: 7px; font-weight: 850; }
.wordle-form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

.progress-dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.progress-dashboard article { padding: 18px; border: 1px solid var(--line); border-top: 5px solid var(--red); border-radius: 18px; background: var(--surface); box-shadow: var(--soft-shadow); }
.progress-dashboard article:nth-child(4n + 2) { border-top-color: var(--gold); }
.progress-dashboard article:nth-child(4n + 3) { border-top-color: var(--blue); }
.progress-dashboard article:nth-child(4n) { border-top-color: var(--green); }
.progress-dashboard small, .progress-dashboard strong { display: block; }
.progress-dashboard small { color: var(--muted); font-weight: 800; }
.progress-dashboard strong { margin-top: 7px; font: 950 1.55rem/1.2 Inter, Arial, sans-serif; }
.settings-filter-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.settings-filter-card .filter-panel { top: calc(100% - 10px); }
.complete-unit.completed { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--surface)); color: var(--green); }
.unit-progress { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--green); font-weight: 900; }
.unit-card.completed { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: color-mix(in srgb, var(--green) 8%, var(--surface)); }
.unit-card.completed::after { content: "✓ مكتملة"; position: absolute; top: 15px; inset-inline-end: 15px; padding: 3px 9px; border-radius: 999px; background: var(--green); color: white; font-size: .72rem; font-weight: 900; }
.lesson-stagebar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--line); box-shadow: var(--soft-shadow); }
.lesson-stagebar span { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; background: var(--surface); color: var(--muted); font-weight: 850; }
.lesson-stagebar span:first-child { border-start-start-radius: 12px; border-end-start-radius: 12px; }
.lesson-stagebar span:last-child { border-start-end-radius: 12px; border-end-end-radius: 12px; }
.lesson-stagebar b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: white; font: 900 .8rem/1 Inter, Arial, sans-serif; }
.lesson-stagebar span:nth-child(2) b { background: var(--gold); color: #17181c; }
.lesson-stagebar span:nth-child(3) b { background: var(--blue); }
.lesson-stagebar span:nth-child(4) b { background: var(--green); }
.lesson-callout, .mistake-card, .checkpoint { border-radius: 18px; }
.lesson-callout { border-inline-start: 7px solid var(--blue) !important; background: color-mix(in srgb, var(--blue) 7%, var(--surface)) !important; }
.lesson-callout.grammar-route { border-inline-start-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 10%, var(--surface)) !important; }
.grammar-route .actions { margin-top: 14px; }
.mistake-card { border-inline-start: 7px solid var(--gold) !important; background: color-mix(in srgb, var(--gold) 10%, var(--surface)) !important; }
.lesson-examples { display: grid; gap: 12px; margin-top: 20px; }
.lesson-example { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-red); }
.lesson-example:nth-child(even) { background: var(--surface-warm); }
.lesson-example p { margin: 0; }
.lesson-example .translation { margin-top: 7px; }
.example-number { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--ink); color: var(--surface); font: 900 .8rem/1 Inter, Arial, sans-serif; }
.checkpoint { margin: 18px 0; padding: 16px 18px; border: 1px dashed color-mix(in srgb, var(--green) 60%, var(--line)); background: color-mix(in srgb, var(--green) 7%, var(--surface)); }
.checkpoint p { margin-bottom: 0; }
.unit-navigation { width: min(var(--max), calc(100% - 32px)); margin: 18px auto 70px; display: grid; grid-template-columns: 1fr 130px 1fr; gap: 12px; }
.unit-navigation a { min-height: 88px; display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-decoration: none; box-shadow: var(--soft-shadow); }
.unit-navigation a:last-child { border-inline-end: 6px solid var(--red); }
.unit-navigation a:first-child { border-inline-start: 6px solid var(--blue); }
.unit-navigation small { color: var(--muted); font-weight: 800; }
.unit-navigation .unit-index { align-items: center; border-color: var(--gold); background: var(--surface-warm); text-align: center; }
.unit-navigation .unit-index small { font: 950 1.4rem/1 Inter, Arial, sans-serif; color: var(--ink); }

.filterbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.search { flex: 1 1 280px; min-height: 50px; border: 1px solid var(--line); border-radius: 15px; padding: 8px 16px; background: var(--surface); color: var(--ink); }
.catalog-summary { display: grid; grid-template-columns: 180px 220px 1fr; align-items: stretch; gap: 12px; margin-bottom: 22px; }
.catalog-summary > div, .catalog-summary > p { margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.catalog-summary > div { border-top: 5px solid var(--red); }
.catalog-summary > div:nth-child(2) { border-top-color: var(--green); }
.catalog-summary strong, .catalog-summary span { display: block; }
.catalog-summary strong { font: 950 1.55rem/1.2 Inter, Arial, sans-serif; }
.catalog-summary span, .catalog-summary p { color: var(--muted); }
.catalog-filters .select { flex: 0 1 190px; }
.catalog-result-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 0 0 14px; color: var(--muted); }
.word-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.word-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-decoration: none; }
.word-row.is-ready { border-top: 4px solid var(--green); box-shadow: var(--soft-shadow); }
.word-row.is-ready:hover { border-color: var(--green); transform: translateY(-1px); }
.word-row.is-draft { border-style: dashed; background: color-mix(in srgb, var(--surface) 86%, var(--surface-blue)); }
.word-row strong { direction: ltr; unicode-bidi: isolate; font: 850 1.1rem Inter, Arial, sans-serif; }
.word-row span { color: var(--muted); }
.catalog-copy { min-width: 0; display: grid; gap: 3px; }
.catalog-arabic, .catalog-definition { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-definition { font-size: .82rem; }
.catalog-badges { display: flex; max-width: 142px; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.chip.draft { color: var(--muted); border-style: dashed; background: var(--surface-blue); }
.catalog-more { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px; color: var(--muted); }

.review-banner { margin-bottom: 18px; padding: 12px 18px; border: 1px solid var(--gold); border-radius: 14px; background: var(--surface-warm); color: var(--gold-dark); font-weight: 800; }
.exam-source { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.timeline { display: grid; gap: 12px; }
.timeline article { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 18px; border: 1px solid var(--line); border-inline-start: 7px solid var(--red); border-radius: 16px; background: var(--surface); }
.timeline article:nth-child(even) { border-inline-start-color: var(--gold); }

.site-footer { width: min(var(--max), calc(100% - 32px)); margin: 0 auto 28px; padding: 28px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 28px; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }

.toast { position: fixed; inset-inline: 20px; bottom: 20px; z-index: 50; max-width: 420px; margin-inline-start: auto; padding: 14px 18px; border-radius: 14px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow); transform: translateY(130%); transition: transform .25s ease; }
.toast.show { transform: translateY(0); }

@media (max-width: 900px) {
  .site-header { align-items: flex-start; flex-wrap: wrap; }
  .menu-button { display: inline-flex; margin-inline-start: auto; }
  .nav { display: none; width: 100%; order: 3; flex-wrap: wrap; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
  .nav.open { display: flex; }
  .hero { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-layout { grid-template-columns: 1fr; }
  .toc { position: static; }
  .route-card { grid-template-columns: 60px 1fr; }
  .route-card .actions { grid-column: 1 / -1; }
  .study-top { grid-template-columns: 1fr 1fr; }
  .filter-panel { top: 136px; }
  .progress-dashboard { grid-template-columns: repeat(2, 1fr); }
  .word-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-summary { grid-template-columns: 1fr 1fr; }
  .catalog-summary > p { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .site-header, main, .site-footer { width: min(100% - 20px, var(--max)); }
  .brand img { width: 52px; height: 52px; }
  .hero { padding: 28px 20px; border-radius: 22px; }
  h1 { font-size: clamp(2.2rem, 13vw, 3.8rem); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid, .grid.two, .word-list { grid-template-columns: 1fr; }
  .catalog-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .catalog-summary > div, .catalog-summary > p { padding: 13px; }
  .catalog-summary strong { font-size: 1.3rem; }
  .catalog-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .catalog-filters .search { grid-column: 1 / -1; width: 100%; }
  .catalog-filters .select { width: 100%; min-width: 0; font-size: .88rem; }
  .catalog-result-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .word-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
  .catalog-badges { max-width: 126px; }
  .section-head { align-items: start; flex-direction: column; }
  .route-card { grid-template-columns: 48px 1fr; padding: 18px; gap: 12px; }
  .route-icon { width: 48px; height: 48px; font-size: 1.4rem; }
  .route-card .actions { gap: 8px; }
  .button { padding-inline: 15px; white-space: nowrap; }
  .page-hero { padding: 26px 19px; }
  .interactive-page .page-hero { padding-block: 21px; }
  .interactive-page .page-hero h1 { font-size: clamp(1.9rem, 9vw, 2.55rem); }
  .word-hero { grid-template-columns: 1fr; }
  .word-hero .sound { justify-self: start; }
  .study-top { grid-template-columns: 1fr 1fr; padding: 8px; }
  .study-top .select, .study-top .filter-trigger { min-width: 0; width: 100%; padding-inline: 8px; }
  .study-metric { padding: 4px; }
  .study-metric strong { font-size: 1rem; }
  .filter-trigger { grid-template-columns: auto 1fr 14px; gap: 5px; font-size: .87rem; }
  .filter-panel { position: fixed; z-index: 70; inset: auto 10px 10px; width: auto; max-height: calc(100dvh - 20px); overflow: auto; border-radius: 22px; }
  .filter-group > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-foot { align-items: flex-start; flex-direction: column; }
  .coach-card { grid-template-columns: 42px 1fr; padding: 14px; }
  .coach-mark { width: 40px; height: 40px; }
  .coach-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .study-card { min-height: 500px; padding: 24px 14px; }
  .prompt-row { width: 100%; }
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: 58px; }
  .grades { grid-template-columns: 1fr; }
  .practice-board { min-height: 500px; padding: 20px 12px; }
  .activity-toolbar { align-items: stretch; }
  .activity-best { align-self: center; font-size: .82rem; }
  .activity-shell .filter-panel { top: auto; }
  .pair-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pair-tile { min-height: 64px; padding: 8px; font-size: .88rem; }
  .summary-stats { gap: 6px; }
  .summary-stats div { padding: 13px 5px; }
  .summary-stats strong { font-size: 1.2rem; }
  .celebration { padding-inline: 14px; }
  .progress-dashboard { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .progress-dashboard article { padding: 14px 10px; }
  .settings-filter-card { grid-template-columns: 1fr; }
  .settings-filter-card .filter-trigger { width: 100%; }
  .wordle-form > div { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; }
  .footer-links { gap: 8px 16px; }
  .timeline article { grid-template-columns: 1fr; }
  .lesson-stagebar { grid-template-columns: repeat(2, 1fr); }
  .lesson-stagebar span { min-height: 48px; font-size: .88rem; }
  .lesson-example { grid-template-columns: 34px 1fr; padding: 14px; }
  .example-number { width: 32px; height: 32px; }
  .unit-navigation { width: min(100% - 20px, var(--max)); grid-template-columns: 1fr 70px 1fr; gap: 7px; }
  .unit-navigation a { min-height: 78px; padding: 10px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Route system v2 — one product language, distinct learning destinations
   -------------------------------------------------------------------------- */

:root {
  --canvas: #f4f7fb;
  --paper: #fffefb;
  --ink-soft: #303544;
  --track: #222632;
  --accent: var(--red);
  --accent-2: var(--gold);
  --accent-deep: var(--red-dark);
  --accent-soft: var(--surface-red);
  --panel-radius: 24px;
  --control-radius: 12px;
  --section-gap: clamp(52px, 7vw, 86px);
  --display-font: "Segoe UI", Tahoma, sans-serif;
  --body-font: "Segoe UI", Tahoma, sans-serif;
}

:root[data-theme="dark"] {
  --canvas: #0b0e14;
  --paper: #151922;
  --ink-soft: #d5d9e3;
  --track: #f6f7fb;
}

body {
  --family-accent: var(--red);
  --family-accent-2: var(--gold);
  --family-deep: var(--red-dark);
  --family-soft: var(--surface-red);
  background-color: var(--canvas);
  background-image:
    linear-gradient(color-mix(in srgb, var(--family-accent) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--family-accent) 4%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
  font-family: var(--body-font);
  letter-spacing: 0;
}

.family-home { --family-accent: #d92332; --family-accent-2: #ffc400; --family-deep: #a90f21; --family-soft: #fff0f2; }
.family-study { --family-accent: #cf2438; --family-accent-2: #6e56cf; --family-deep: #9f1126; --family-soft: #fff0f3; }
.family-course { --family-accent: #b85616; --family-accent-2: #f0b400; --family-deep: #71320c; --family-soft: #fff5dc; }
.family-words { --family-accent: #087f66; --family-accent-2: #315fd6; --family-deep: #075b4b; --family-soft: #eaf8f3; }
.family-grammar { --family-accent: #315fd6; --family-accent-2: #7b55cf; --family-deep: #1e419f; --family-soft: #edf3ff; }
.family-practice { --family-accent: #cf3d69; --family-accent-2: #7459d6; --family-deep: #982445; --family-soft: #fff0f5; }
.family-games { --family-accent: #117b58; --family-accent-2: #e0a700; --family-deep: #07563e; --family-soft: #eaf7f1; }
.family-exams { --family-accent: #173f5f; --family-accent-2: #d92332; --family-deep: #0c2a43; --family-soft: #edf4f8; }
.family-media { --family-accent: #7044c6; --family-accent-2: #e65b73; --family-deep: #4d2a92; --family-soft: #f3efff; }
.family-sound { --family-accent: #087e8b; --family-accent-2: #f0a202; --family-deep: #045764; --family-soft: #e9f8fa; }
.family-settings { --family-accent: #3f526f; --family-accent-2: #d7a500; --family-deep: #27364d; --family-soft: #f0f3f8; }
.family-about { --family-accent: #9e2844; --family-accent-2: #315fd6; --family-deep: #6d182f; --family-soft: #fff0f3; }
.family-error { --family-accent: #d92332; --family-accent-2: #ffc400; --family-deep: #17181c; --family-soft: #fff4d6; }

:root[data-theme="dark"] body {
  --family-soft: color-mix(in srgb, var(--family-accent) 13%, var(--surface));
}

h1, h2, h3, .button, .nav a, .brand { font-family: var(--display-font); }
h1 { text-wrap: balance; }
h2, h3 { text-wrap: pretty; }

.site-header {
  position: relative;
  min-height: 76px;
  margin-top: 10px;
  gap: 18px;
}
/* The tricolour bar that used to sit under the wordmark is gone: the header
   already has a rule beneath it, and two lines stacked read as an accident. */
.brand { gap: 11px; font-size: 1.32rem; color: var(--ink); }
.brand img { width: 54px; height: 54px; filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--ink) 12%, transparent)); }
.nav { gap: 2px; }
.nav a, .menu-button { min-height: 44px; padding-inline: 11px; border-radius: 11px; font-size: .93rem; }
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--family-accent);
  transform: scaleX(0);
  transition: transform .18s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--family-accent) 34%, transparent);
  background: color-mix(in srgb, var(--family-soft) 78%, transparent);
  color: var(--family-deep);
}
:root[data-theme="dark"] .nav a[aria-current="page"] { color: color-mix(in srgb, var(--family-accent) 66%, white); }

main { margin-top: 14px; }
.page-line {
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.page-line::before { content: ""; height: 1px; background: var(--line); }
.page-line i {
  grid-column: 1;
  justify-self: end;
  width: 82px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--track) 0 33%, var(--family-accent) 33% 66%, var(--family-accent-2) 66%);
}
.page-line span { direction: ltr; font-family: ui-monospace, Consolas, monospace; color: var(--family-deep); }
.page-line b { color: var(--muted); }

.hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(34px, 5vw, 72px);
  min-height: 590px;
  align-items: center;
  padding: clamp(42px, 6vw, 76px);
  border-top: 0;
  border-radius: 34px 34px 18px 34px;
  background:
    linear-gradient(90deg, var(--track) 0 32%, var(--red) 32% 65%, var(--gold) 65%) top / 100% 9px no-repeat,
    linear-gradient(128deg, var(--surface) 0 64%, var(--surface-warm));
}
.hero::before {
  content: "EN  →  AR";
  position: absolute;
  inset-inline-start: clamp(36px, 5vw, 70px);
  bottom: 26px;
  color: color-mix(in srgb, var(--ink) 34%, transparent);
  font: 900 .72rem/1 ui-monospace, Consolas, monospace;
  letter-spacing: .16em;
}
.hero::after {
  width: 380px;
  height: 380px;
  border-width: 52px;
  border-color: color-mix(in srgb, var(--red) 9%, transparent);
}
.hero > div:first-child { position: relative; z-index: 2; }
.hero h1 { max-width: 780px; font-size: clamp(3rem, 6vw, 5.75rem); }
.hero .lede { max-width: 720px; }

.stat-grid { gap: 14px; }
.stat {
  min-height: 132px;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 12px 12px 22px 12px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}
.stat::before { content: ""; height: 5px; margin: -1px -12px 17px; border-radius: 999px; background: var(--red); }
.stat:nth-child(even)::before { background: var(--gold); }
.stat strong { font-size: 1.85rem; }

.page-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
  min-height: 326px;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid color-mix(in srgb, var(--family-accent) 25%, var(--line));
  border-top: 0;
  border-radius: 30px 30px 16px 30px;
  background:
    linear-gradient(90deg, var(--track) 0 32%, var(--family-accent) 32% 67%, var(--family-accent-2) 67%) top / 100% 8px no-repeat,
    linear-gradient(128deg, var(--surface) 0 62%, var(--family-soft));
  box-shadow: var(--shadow);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset-inline-start: -76px;
  bottom: -110px;
  width: 240px;
  height: 240px;
  border: 32px solid color-mix(in srgb, var(--family-accent) 8%, transparent);
  border-radius: 50%;
}
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.page-hero h1 { max-width: 850px; margin-bottom: 14px; font-size: clamp(2.45rem, 4.2vw, 4.45rem); }
.page-hero .lede { margin-bottom: 0; }
.page-hero .eyebrow { color: var(--family-deep); }
.hero-board {
  position: relative;
  min-height: 172px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--family-accent) 32%, var(--line));
  border-radius: 18px 18px 8px 18px;
  background: var(--surface);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--family-accent) 14%, transparent);
  text-align: start;
}
.hero-board::before {
  content: "";
  position: absolute;
  inset-inline: 18px;
  top: 16px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--track) 0 33%, var(--family-accent) 33% 67%, var(--family-accent-2) 67%);
}
.hero-board small { margin-top: 10px; color: var(--muted); font-weight: 850; }
.hero-board strong::before { content: "PATH"; direction: ltr; display: block; font: 950 1.9rem/1 var(--display-font); color: var(--family-deep); }
.hero-board span::before { content: "محطة تعلّم"; color: var(--muted); font-weight: 800; }
.family-study .hero-board strong::before { content: "+100 XP"; }
.family-study .hero-board span::before { content: "استرجاع نشط"; }
.family-course .hero-board strong::before { content: "Pre-A1  →  C2"; }
.family-course .hero-board span::before { content: "156 وحدة مترابطة"; }
.family-words .hero-board strong::before { content: "25,000"; }
.family-words .hero-board span::before { content: "كلمة قابلة للبحث"; }
.family-grammar .hero-board strong::before { content: "WHY → HOW"; }
.family-grammar .hero-board span::before { content: "المعنى قبل الجدول"; }
.family-practice .hero-board strong::before { content: "01 / 05"; }
.family-practice .hero-board span::before { content: "مهارة واحدة كل مرة"; }
.family-games .hero-board { background: var(--track); color: var(--surface); }
.family-games .hero-board strong::before { content: "PLAY × 5"; color: var(--gold); }
.family-games .hero-board small, .family-games .hero-board span::before { color: color-mix(in srgb, var(--surface) 78%, transparent); }
.family-exams .hero-board strong::before { content: "IELTS +"; }
.family-exams .hero-board span::before { content: "12 مسار تحضير"; }
.hero-board strong[data-label]::before { content: attr(data-label); }
.hero-board span[data-label]::before { content: attr(data-label); }
.family-exams .hero-board strong[data-label]::before { font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.05; overflow-wrap: anywhere; }
.family-media .hero-board strong::before { content: "▶  12"; }
.family-media .hero-board span::before { content: "شرح ثم تطبيق"; }
.family-sound .hero-board strong::before { content: "/p/ ≠ /b/"; }
.family-sound .hero-board span::before { content: "اسمع ثم قل"; }
.family-settings .hero-board strong::before { content: "◉  ━  ◐"; }
.family-settings .hero-board span::before { content: "هدفك، صوتك، بياناتك"; }
.family-about .hero-board strong::before { content: "WHY"; }
.family-about .hero-board span::before { content: "كيف بُني الطريق"; }

.page-detail .page-hero { min-height: 260px; grid-template-columns: minmax(0, 1fr) 190px; }
.page-detail .hero-board { min-height: 138px; padding: 20px; }
.page-interactive .page-hero { min-height: 230px; grid-template-columns: minmax(0, 1fr) 190px; text-align: start; }
.page-interactive .page-hero h1, .page-interactive .page-hero .lede { margin-inline: 0; }

.review-banner {
  width: max-content;
  max-width: 100%;
  margin: 0 0 12px auto;
  padding: 7px 13px;
  border-color: color-mix(in srgb, var(--gold) 52%, var(--line));
  background: color-mix(in srgb, var(--surface-warm) 72%, transparent);
  color: var(--muted);
  font-size: .78rem;
}

.section { margin-top: var(--section-gap); }
.section-head { padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.section-head h2 { margin-bottom: 0; }
.section-head .eyebrow { color: var(--family-deep); }

.grid { gap: 16px; counter-reset: route-card; }
.card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px;
  border: 1px solid var(--line);
  border-top: 0;
  border-inline-start: 5px solid var(--family-accent);
  border-radius: 10px 22px 22px 22px;
  background: var(--surface);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 7%, transparent);
  counter-increment: route-card;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2));
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--family-accent) 44%, var(--line)); box-shadow: 0 10px 0 color-mix(in srgb, var(--family-accent) 10%, transparent); }
.card:nth-child(3n + 2), .card:nth-child(3n) { border-top-color: transparent; }
.card h3 { padding-inline-end: 46px; margin-bottom: 8px; font-size: 1.34rem; }
.card p { margin-top: 0; }
.card .button { align-self: flex-start; margin-top: auto; }
.card-stop {
  position: absolute;
  inset-inline-end: 18px;
  top: 17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--family-accent) 35%, var(--line));
  border-radius: 10px;
  background: var(--family-soft);
  color: var(--family-deep);
  font: 900 .7rem/1 ui-monospace, Consolas, monospace;
}
.card-stop::before { content: counter(route-card, decimal-leading-zero); }

.home-route { min-height: 230px; padding-top: 58px; }
.home-route .card-stop { inset-inline-start: 24px; inset-inline-end: auto; top: 19px; width: auto; border: 0; background: transparent; }
.home-route .card-stop::before { content: attr(data-stop); font-size: .9rem; }
.home-route::after {
  content: "";
  position: absolute;
  inset-inline-start: 24px;
  top: 49px;
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: var(--family-accent-2);
}

.level-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.level-card { grid-column: span 2; min-height: 255px; }
.level-card:nth-child(-n + 2) { grid-column: span 3; }
.level-card h3 { direction: ltr; unicode-bidi: isolate; font-size: clamp(1.7rem, 3vw, 2.35rem); }
.level-card::after { content: attr(data-level); position: absolute; inset-inline-end: 20px; bottom: 10px; color: color-mix(in srgb, var(--family-accent) 9%, transparent); font: 950 5rem/1 var(--display-font); direction: ltr; }

.about-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about-map .about-route { min-height: 260px; padding-top: 60px; }
.about-map .about-route .card-stop { inset-inline-start: 22px; inset-inline-end: auto; width: 38px; }
.about-map .about-route .card-stop::before { content: attr(data-stop); }
.about-map .about-route:nth-child(2n) { background: color-mix(in srgb, var(--family-soft) 48%, var(--surface)); }

.family-grammar.page-index .grid,
.family-practice.page-index .grid,
.family-games.page-index .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.family-grammar.page-index .grid > .card { grid-column: span 2; min-height: 235px; }
.family-practice.page-index .grid > .card,
.family-games.page-index .grid > .card { grid-column: span 2; min-height: 250px; }
.family-practice.page-index .grid > .card:nth-child(-n + 2),
.family-games.page-index .grid > .card:nth-child(-n + 2) { grid-column: span 3; }
.family-games.page-index .card:nth-child(2n) { background: color-mix(in srgb, var(--family-soft) 46%, var(--surface)); }
.family-exams.page-index .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.family-exams.page-index .grid > .card { min-height: 270px; }
.family-exams.page-index .grid > .card:first-child { grid-column: span 2; background: var(--family-soft); }

.route-card {
  position: relative;
  overflow: hidden;
  margin-top: var(--section-gap);
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 25px 28px;
  border: 1px solid color-mix(in srgb, var(--family-accent) 28%, var(--line));
  border-top: 0;
  border-radius: 12px 24px 24px 24px;
  background: linear-gradient(105deg, var(--surface), var(--family-soft));
  box-shadow: 0 8px 0 color-mix(in srgb, var(--family-accent) 11%, transparent);
}
.route-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--track) 0 32%, var(--family-accent) 32% 68%, var(--family-accent-2) 68%);
}
.route-icon {
  position: relative;
  width: 64px;
  height: 64px;
  border: 2px solid var(--track);
  background: var(--surface);
  color: var(--family-deep);
}
.route-icon span { font-weight: 950; line-height: 1; }
.route-copy h3 { margin-bottom: 4px; font-size: 1.5rem; }
.route-card .actions { margin-top: 0; justify-content: flex-end; }

.button {
  border-radius: var(--control-radius);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 12%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.button:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.button.primary { background: var(--family-accent); border-color: var(--family-accent); }
.button.gold { background: var(--family-accent-2); border-color: var(--family-accent-2); }

.page-detail .lesson-layout { gap: 22px; }
.page-detail .prose {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}
.page-detail .prose > section {
  margin: 0;
  padding: clamp(24px, 4vw, 38px);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.page-detail .prose > section:last-child { border-bottom: 0; }
.page-detail .toc {
  top: 16px;
  overflow: hidden;
  padding-top: 29px;
  border-top: 0;
  border-radius: 10px 20px 20px 20px;
  box-shadow: var(--soft-shadow);
}
.page-detail .toc::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--track), var(--family-accent), var(--family-accent-2));
}
.page-detail .toc a { border-bottom: 1px solid var(--line); text-decoration: none; }

.family-words .word-hero { padding: 6px; }
.family-words .english-word { color: var(--family-deep); }
.family-words .meaning { max-width: 700px; margin-top: 8px; }
.family-words .example { border-inline-start-color: var(--family-accent); background: var(--family-soft); }
.family-words .sound { border-color: var(--family-accent); background: var(--family-soft); color: var(--family-deep); }

.practice-board {
  border-top: 0;
  background:
    linear-gradient(90deg, var(--track) 0 32%, var(--family-accent) 32% 68%, var(--family-accent-2) 68%) top / 100% 8px no-repeat,
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--family-accent) 7%, transparent), transparent 32%),
    var(--surface);
}
.activity-toolbar { border-radius: 14px; border-inline-start: 5px solid var(--family-accent); box-shadow: var(--soft-shadow); }
.pair-tile:nth-child(2n), .choice:nth-child(2n) { border-top-color: var(--family-accent-2); }

.progress-dashboard article { border-top: 0; border-inline-start: 5px solid var(--family-accent); border-radius: 10px 17px 17px 17px; }
.progress-dashboard article:nth-child(4n + 2) { border-inline-start-color: var(--family-accent-2); }
.progress-dashboard article:nth-child(4n + 3) { border-inline-start-color: var(--blue); }
.progress-dashboard article:nth-child(4n) { border-inline-start-color: var(--green); }

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 30px 0 18px;
  border-top: 1px solid var(--line);
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 42px; height: 42px; }
.footer-brand strong, .footer-brand span { display: block; }
.footer-brand span, .footer-note { font-size: .82rem; }
.footer-note { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.footer-links { justify-content: flex-end; }
.footer-links a { text-underline-offset: 5px; }

@keyframes route-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-hero, .hero { animation: route-enter .42s ease-out both; }
.section { animation: route-enter .42s .06s ease-out both; }

@media (max-width: 1040px) {
  .nav a, .menu-button { padding-inline: 8px; font-size: .86rem; }
  .page-hero { grid-template-columns: minmax(0, 1fr) 190px; }
  .family-exams.page-index .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .family-exams.page-index .grid > .card:first-child { grid-column: span 2; }
}

@media (max-width: 900px) {
  .site-header { align-items: center; }
  .nav { box-shadow: var(--shadow); }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero .stat-grid { order: 2; }
  .page-hero, .page-detail .page-hero, .page-interactive .page-hero { grid-template-columns: minmax(0, 1fr) 170px; }
  .hero-board { min-height: 140px; }
  .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-card, .level-card:nth-child(-n + 2) { grid-column: span 1; }
  .family-grammar.page-index .grid,
  .family-practice.page-index .grid,
  .family-games.page-index .grid,
  .family-exams.page-index .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-grammar.page-index .grid > .card,
  .family-practice.page-index .grid > .card,
  .family-games.page-index .grid > .card,
  .family-practice.page-index .grid > .card:nth-child(-n + 2),
  .family-games.page-index .grid > .card:nth-child(-n + 2),
  .family-exams.page-index .grid > .card,
  .family-exams.page-index .grid > .card:first-child { grid-column: span 1; }
  .about-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  :root { --section-gap: 42px; }
  .site-header { min-height: 66px; margin-top: 4px; }
  .brand { font-size: 1.12rem; }
  .brand img { width: 46px; height: 46px; }
  .menu-button { min-height: 44px; }
  main { margin-top: 8px; }
  .page-line { min-height: 28px; margin-bottom: 8px; }
  .page-line i { width: 58px; height: 5px; }
  .page-line b { display: none; }
  .hero { gap: 26px; min-height: auto; padding: 30px 20px 42px; border-radius: 22px 22px 10px 22px; }
  .hero::before { inset-inline-start: 20px; bottom: 16px; }
  .hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .stat { min-height: 102px; border-radius: 10px 10px 16px 10px; }
  .stat::before { margin-bottom: 12px; }
  .stat strong { font-size: 1.42rem; }
  .page-hero, .page-detail .page-hero, .page-interactive .page-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 27px 19px 22px;
    border-radius: 22px 22px 10px 22px;
  }
  .page-hero h1 { font-size: clamp(2.05rem, 10vw, 3.1rem); }
  .hero-board {
    min-height: 76px;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 5px 15px;
    padding: 18px 17px 13px;
  }
  .hero-board small { display: none; }
  .hero-board strong::before { font-size: 1.35rem; }
  .hero-board span::before { font-size: .82rem; }
  .review-banner { width: 100%; margin-bottom: 8px; font-size: .7rem; }
  .grid, .level-grid,
  .about-map,
  .family-grammar.page-index .grid,
  .family-practice.page-index .grid,
  .family-games.page-index .grid,
  .family-exams.page-index .grid { grid-template-columns: 1fr; }
  .card,
  .level-card,
  .family-grammar.page-index .grid > .card,
  .family-practice.page-index .grid > .card,
  .family-games.page-index .grid > .card,
  .family-exams.page-index .grid > .card { grid-column: auto; min-height: 0; padding: 22px; }
  .home-route { min-height: 200px; padding-top: 54px; }
  .level-card::after { font-size: 4rem; }
  .route-card { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 20px 17px; }
  .route-icon { width: 48px; height: 48px; }
  .route-card .actions { grid-column: 1 / -1; justify-content: stretch; }
  .route-card .actions .button { flex: 1 1 auto; }
  .page-detail .prose > section { padding: 22px 18px; }
  .site-footer { grid-template-columns: 1fr; gap: 18px; }
  .footer-links { justify-content: flex-start; gap: 4px 13px; }
  .footer-note { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero, .hero, .section { animation: none; }
}

/* ==========================================================================
   Targamaa v3 — Translation Bridge
   Final visual layer. This deliberately overrides the inherited railway/
   tricolour treatment without changing the existing page behaviour.
   ========================================================================== */

:root {
  --targamaa-navy: #17243a;
  --targamaa-navy-deep: #0d1728;
  --targamaa-teal: #08766f;
  --targamaa-teal-bright: #14b8a6;
  --targamaa-coral: #f05d62;
  --targamaa-coral-deep: #bd3c4b;
  --targamaa-lilac: #7868d8;
  --targamaa-sky: #eaf6f5;
  --targamaa-paper: #fff8f0;
  --targamaa-bridge: linear-gradient(90deg, var(--targamaa-teal), var(--targamaa-teal-bright) 38%, var(--targamaa-coral) 66%, var(--targamaa-lilac));

  /* Legacy aliases retained so the application layer does not need to know
     about the visual migration. */
  --bg: #f4f8f8;
  --canvas: #f4f8f8;
  --surface: #ffffff;
  --paper: #ffffff;
  --surface-warm: var(--targamaa-paper);
  --surface-red: #fff0f1;
  --surface-blue: #eef4ff;
  --ink: var(--targamaa-navy);
  --ink-soft: #31415a;
  --muted: #5c687b;
  --line: #d8e2e6;
  --red: var(--targamaa-coral);
  --red-dark: var(--targamaa-coral-deep);
  --gold: var(--targamaa-teal-bright);
  --gold-dark: var(--targamaa-teal);
  --blue: #5267d9;
  --green: #0b8569;
  --track: var(--targamaa-navy);
  --shadow: 0 12px 34px rgba(23, 36, 58, .11), 0 5px 0 rgba(23, 36, 58, .06);
  --soft-shadow: 0 4px 0 rgba(23, 36, 58, .07);
  --display-font: "Alexandria", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --body-font: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #0c1422;
  --canvas: #0c1422;
  --surface: #141f31;
  --paper: #141f31;
  --surface-warm: #221f25;
  --surface-red: #2d1b24;
  --surface-blue: #18243d;
  --ink: #f5f8fb;
  --ink-soft: #dde5ee;
  --muted: #b9c4d2;
  --line: #314158;
  --red: #ff7980;
  --red-dark: #ff9da2;
  --gold: #35d5c1;
  --gold-dark: #73eadb;
  --blue: #8ea0ff;
  --green: #55d5ab;
  --track: #eaf1f7;
  --targamaa-navy: #eaf1f7;
  --targamaa-teal: #35d5c1;
  --targamaa-teal-bright: #75eadc;
  --targamaa-coral: #ff7980;
  --targamaa-coral-deep: #ffabb0;
  --targamaa-lilac: #aa9cff;
  --targamaa-sky: #162b31;
  --targamaa-paper: #262128;
  --shadow: 0 14px 34px rgba(0, 0, 0, .3), 0 5px 0 rgba(0, 0, 0, .3);
  --soft-shadow: 0 4px 0 rgba(0, 0, 0, .28);
}

body {
  --family-accent: var(--targamaa-teal);
  --family-accent-2: var(--targamaa-coral);
  --family-deep: var(--targamaa-teal);
  --family-soft: var(--targamaa-sky);
  background-image:
    linear-gradient(color-mix(in srgb, var(--family-accent) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--family-accent) 4%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Any legacy utility rail now reads as a continuous translation bridge. */
.rail { background: var(--targamaa-bridge); }

.family-home { --family-accent: #08766f; --family-accent-2: #f05d62; --family-deep: #065c57; --family-soft: #eaf6f5; }
.family-study { --family-accent: #e44e61; --family-accent-2: #7868d8; --family-deep: #ad3045; --family-soft: #fff0f3; }
.family-course { --family-accent: #5267d9; --family-accent-2: #14a995; --family-deep: #354ab4; --family-soft: #eef1ff; }
.family-words { --family-accent: #08766f; --family-accent-2: #3d8ed8; --family-deep: #065c57; --family-soft: #eaf6f5; }
.family-grammar { --family-accent: #4266d5; --family-accent-2: #7868d8; --family-deep: #3048a6; --family-soft: #eef2ff; }
.family-practice { --family-accent: #d94d75; --family-accent-2: #7868d8; --family-deep: #a63255; --family-soft: #fff0f5; }
.family-games { --family-accent: #0b8569; --family-accent-2: #f05d62; --family-deep: #06614d; --family-soft: #eaf7f2; }
.family-exams { --family-accent: #25476d; --family-accent-2: #14a995; --family-deep: #172f4c; --family-soft: #edf5f7; }
.family-media { --family-accent: #7868d8; --family-accent-2: #f05d62; --family-deep: #5444aa; --family-soft: #f2efff; }
.family-sound { --family-accent: #087f8b; --family-accent-2: #5267d9; --family-deep: #055c65; --family-soft: #e9f7f8; }
.family-settings { --family-accent: #42556f; --family-accent-2: #14a995; --family-deep: #2b3c55; --family-soft: #eff4f6; }
.family-about { --family-accent: #08766f; --family-accent-2: #7868d8; --family-deep: #065c57; --family-soft: #eef7f5; }
.family-error { --family-accent: #e44e61; --family-accent-2: #7868d8; --family-deep: #ad3045; --family-soft: #fff0f3; }

:root[data-theme="dark"] body {
  --family-deep: color-mix(in srgb, var(--family-accent) 72%, white);
  --family-soft: color-mix(in srgb, var(--family-accent) 12%, var(--surface));
}

/* Brand and global chrome */
.site-header {
  border-bottom-color: color-mix(in srgb, var(--family-accent) 18%, var(--line));
}

.brand {
  gap: 12px;
  color: var(--ink);
  line-height: 1;
}

.brand img { width: 58px; height: 58px; }
.brand-copy, .brand > span { display: grid; gap: 3px; }
.brand-name, .brand-copy > strong { direction: ltr; unicode-bidi: isolate; font-size: 1.08em; letter-spacing: -.025em; }
.brand-ar, .brand-copy > small { color: var(--muted); font-size: .62em; font-weight: 800; letter-spacing: 0; }

.nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--family-accent) 28%, transparent);
  background: color-mix(in srgb, var(--family-soft) 84%, transparent);
  color: var(--family-deep);
}

.nav a::after { background: var(--family-accent); }

.page-line {
  grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr);
  gap: 12px;
  min-height: 34px;
}

.page-line::before,
.page-line::after {
  content: "";
  height: 1px;
  background: color-mix(in srgb, var(--family-accent) 16%, var(--line));
}

.page-line::before { grid-column: 1; }
.page-line i {
  grid-column: 2;
  justify-self: center;
  width: 92px;
  height: 6px;
  background: var(--targamaa-bridge);
}
.page-line::after { grid-column: 3; }
.page-line span, .page-line b { display: none; }

/* Hero surfaces: translation bridge, never a national flag. */
.hero {
  min-height: 560px;
  border: 1px solid color-mix(in srgb, var(--family-accent) 24%, var(--line));
  border-radius: 34px 34px 18px 34px;
  background:
    var(--targamaa-bridge) top / 100% 7px no-repeat,
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--targamaa-coral) 10%, transparent), transparent 32%),
    linear-gradient(128deg, var(--surface) 0 60%, var(--targamaa-sky));
}

.hero::before {
  content: "EN  ↔  AR";
  color: color-mix(in srgb, var(--targamaa-teal) 70%, var(--muted));
}

.hero::after {
  border-color: color-mix(in srgb, var(--targamaa-teal) 8%, transparent);
}

.stat {
  border: 1px solid color-mix(in srgb, var(--family-accent) 18%, var(--line));
  border-top: 0;
  border-radius: 18px 18px 10px 18px;
  box-shadow: var(--soft-shadow);
}
.stat::before { background: var(--family-accent); }
.stat:nth-child(2)::before { background: var(--family-accent-2); }
.stat:nth-child(3)::before { background: var(--targamaa-lilac); }
.stat:nth-child(4)::before { background: var(--targamaa-teal-bright); }

.page-hero {
  border-color: color-mix(in srgb, var(--family-accent) 22%, var(--line));
  background:
    linear-gradient(90deg, var(--family-accent), color-mix(in srgb, var(--family-accent) 55%, var(--family-accent-2)), var(--family-accent-2)) top / 100% 7px no-repeat,
    radial-gradient(circle at 8% 82%, color-mix(in srgb, var(--family-accent) 7%, transparent), transparent 30%),
    linear-gradient(128deg, var(--surface) 0 64%, var(--family-soft));
}

.page-hero::before { border-color: color-mix(in srgb, var(--family-accent) 6%, transparent); }
.hero-board {
  border-color: color-mix(in srgb, var(--family-accent) 26%, var(--line));
  border-radius: 20px 20px 10px 20px;
  background: color-mix(in srgb, var(--surface) 94%, var(--family-soft));
  box-shadow: 0 8px 0 color-mix(in srgb, var(--family-accent) 11%, transparent);
}
.hero-board::before {
  background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2));
}
.hero-board small { display: block; margin-top: 8px; direction: ltr; unicode-bidi: isolate; }
.family-games .hero-board {
  background: color-mix(in srgb, var(--family-soft) 72%, var(--surface));
  color: var(--ink);
}
.family-games .hero-board strong::before { color: var(--family-deep); }
.family-games .hero-board span::before { color: var(--muted); }

/* Cards: unnumbered by default. Sequence labels are calm, contextual text. */
.grid { counter-reset: none; }
.card {
  counter-increment: none;
  border: 1px solid color-mix(in srgb, var(--family-accent) 14%, var(--line));
  border-inline-start: 0;
  border-radius: 22px 22px 12px 22px;
  box-shadow: 0 6px 0 rgba(23, 36, 58, .055), 0 16px 32px rgba(23, 36, 58, .055);
}
.card::before {
  height: 4px;
  background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2));
}
.card:hover {
  border-color: color-mix(in srgb, var(--family-accent) 34%, var(--line));
  box-shadow: 0 7px 0 color-mix(in srgb, var(--family-accent) 8%, transparent), 0 20px 38px rgba(23, 36, 58, .08);
}
.card h3 { padding-inline-end: 0; }
.card-stop { display: none; }
.card-stop[data-stop] {
  position: static;
  order: -1;
  width: max-content;
  min-width: 0;
  height: auto;
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--family-deep);
  font: 900 .76rem/1.2 var(--body-font);
  letter-spacing: .04em;
}
.card-stop::before { content: none; }
.card-stop[data-stop]::before { content: attr(data-stop); }

.home-route, .about-map .about-route { padding-top: 28px; }
.home-route .card-stop,
.about-map .about-route .card-stop {
  position: static;
  width: max-content;
  margin-bottom: 12px;
}
.home-route::after { display: none; }

.level-card {
  min-height: 235px;
  padding: 30px;
  background:
    linear-gradient(145deg, var(--surface) 0 74%, color-mix(in srgb, var(--family-soft) 70%, var(--surface)));
}
.level-card h3 { color: var(--ink); letter-spacing: -.025em; }
.level-card .card-stop[data-stop],
.start-card .card-stop[data-stop] {
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--family-accent) 30%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--family-soft) 72%, var(--surface));
  font-family: ui-monospace, Consolas, monospace;
}
.level-card::after {
  inset-inline-end: 18px;
  bottom: 6px;
  color: color-mix(in srgb, var(--family-accent) 5%, transparent);
  font-size: 4.5rem;
}
.level-card[data-featured="true"],
.card[data-important="true"] {
  border-color: color-mix(in srgb, var(--family-accent) 38%, var(--line));
  background: linear-gradient(145deg, var(--family-soft), var(--surface) 68%);
}
.family-grammar .card[data-important="true"]::after {
  content: "أساسي";
  position: absolute;
  inset-inline-end: 18px;
  top: 16px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--family-soft);
  color: var(--family-deep);
  font-size: .72rem;
  font-weight: 900;
}

/* The next action is a bridge forward, not another station sign. */
.route-card {
  border-color: color-mix(in srgb, var(--family-accent) 24%, var(--line));
  border-radius: 22px 22px 12px 22px;
  background:
    linear-gradient(105deg, var(--surface), color-mix(in srgb, var(--family-soft) 72%, var(--surface)));
  box-shadow: 0 7px 0 color-mix(in srgb, var(--family-accent) 9%, transparent), 0 18px 34px rgba(23, 36, 58, .07);
}
.route-card::before {
  height: 6px;
  background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2));
}
.route-icon {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--family-accent) 36%, var(--line));
  background: linear-gradient(145deg, var(--family-soft), var(--surface));
  color: var(--family-deep);
  box-shadow: var(--soft-shadow);
}
.route-icon span { transform: none; }
.route-copy .eyebrow { color: var(--family-deep); }

.button.primary {
  background: var(--family-accent);
  border-color: var(--family-accent);
  color: #fff;
}
.button.gold {
  background: color-mix(in srgb, var(--family-accent-2) 78%, #0d1728);
  border-color: color-mix(in srgb, var(--family-accent-2) 78%, #0d1728);
  color: #fff;
}
.button:focus-visible,
.nav a:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline-color: color-mix(in srgb, var(--targamaa-teal-bright) 68%, transparent);
}

/* Word reference: one elegant entry sheet and one paired EN/AR connection. */
.family-words.page-detail .page-hero { min-height: 238px; }
.family-words .word-hero {
  gap: clamp(16px, 4vw, 34px);
  padding: 12px 4px;
}
.family-words .english-word {
  color: var(--ink);
  font-size: clamp(3.6rem, 9vw, 7.2rem);
}
.family-words .meaning {
  max-width: 760px;
  margin-top: 14px;
  color: var(--family-deep);
  font-size: clamp(1.45rem, 2.7vw, 2.25rem);
}
.family-words .sound {
  width: 56px;
  height: 56px;
  border-color: color-mix(in srgb, var(--family-accent) 55%, var(--line));
  background: var(--family-soft);
  color: var(--family-deep);
}
.family-words .example {
  padding: clamp(20px, 3vw, 30px);
  border-inline-start: 0;
  border-bottom: 3px solid color-mix(in srgb, var(--family-accent) 54%, transparent);
  border-radius: 18px 18px 8px 18px;
  background: color-mix(in srgb, var(--family-soft) 72%, var(--surface));
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.65;
}
.family-words .translation {
  margin: 8px 0 0;
  padding: 16px 20px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--family-soft) 38%, transparent);
  color: var(--ink-soft);
}
.family-words .toc {
  border-color: color-mix(in srgb, var(--family-accent) 22%, var(--line));
  background: color-mix(in srgb, var(--family-soft) 54%, var(--surface));
}

/* Forward-compatible word-entry primitives used by the redesigned builder. */
.word-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 22px;
  align-items: start;
}
.word-entry-main,
.word-entry-side,
.connection-panel,
.word-senses {
  border: 1px solid color-mix(in srgb, var(--family-accent) 18%, var(--line));
  border-radius: 22px 22px 12px 22px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}
.word-entry-main { overflow: hidden; }
.word-entry-head { padding: clamp(26px, 5vw, 48px); background: linear-gradient(140deg, var(--surface), var(--family-soft)); }
.word-title-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.word-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.connection-panel { margin-top: 20px; padding: clamp(22px, 4vw, 34px); }
.connection-line { margin: 0; padding-block: 10px; font-size: clamp(1.05rem, 2vw, 1.32rem); line-height: 1.8; }
.connection-line[lang="en"] { direction: ltr; unicode-bidi: isolate; }
.connection-token[data-link] {
  border-bottom: 3px solid var(--targamaa-coral);
  background: color-mix(in srgb, var(--targamaa-coral) 8%, transparent);
  border-radius: 4px 4px 1px 1px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.connection-token[data-link].active,
.connection-token[data-link]:hover {
  border-bottom-color: var(--targamaa-teal);
  background: color-mix(in srgb, var(--targamaa-teal) 14%, transparent);
}
.sense-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.sense-row:last-child { border-bottom: 0; }
.sense-row > strong { color: var(--family-deep); }
.word-entry-side { position: sticky; top: 16px; padding: 22px; }

/* Editorial grammar and serious exam guides */
.family-grammar.page-index .grid { gap: 18px; }
.family-grammar.page-index .card {
  min-height: 218px;
  background: linear-gradient(150deg, var(--surface) 0 84%, color-mix(in srgb, var(--family-soft) 58%, var(--surface)));
}
.family-grammar .example {
  border-inline-start-color: var(--family-accent);
  background: var(--family-soft);
}
.page-detail .toc::before {
  background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2));
}
.family-exams.page-index .grid { gap: 18px; }
.family-exams.page-index .card {
  border-color: color-mix(in srgb, var(--family-accent) 18%, var(--line));
  background: linear-gradient(155deg, var(--surface) 0 88%, var(--family-soft));
}
.family-exams.page-index .grid > .card:first-child {
  background: linear-gradient(145deg, var(--family-soft), var(--surface) 72%);
}
.exam-source {
  border-top-color: color-mix(in srgb, var(--family-accent) 24%, var(--line));
  background: color-mix(in srgb, var(--family-soft) 48%, transparent);
  border-radius: 14px;
  padding: 18px;
}
.timeline article {
  border-inline-start-color: var(--family-accent);
  background: color-mix(in srgb, var(--family-soft) 34%, var(--surface));
}
.timeline article:nth-child(even) { border-inline-start-color: var(--family-accent-2); }

/* Interactive surfaces keep their page-family personality without rails. */
.practice-board {
  background:
    linear-gradient(90deg, var(--family-accent), var(--family-accent-2)) top / 100% 6px no-repeat,
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--family-accent) 7%, transparent), transparent 32%),
    var(--surface);
}
.study-top { border-top-color: var(--family-accent); }
.goal-track i { background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2)); }
.direction-select {
  background: linear-gradient(110deg, var(--targamaa-teal-bright) 0 54%, var(--targamaa-coral) 55% 100%);
  border-color: var(--targamaa-teal);
  color: var(--targamaa-navy-deep);
}
.family-games.page-index .card .button {
  background: var(--family-accent);
  border-color: var(--family-accent);
  color: #fff;
}

.review-banner {
  border-color: color-mix(in srgb, var(--targamaa-teal) 32%, var(--line));
  background: color-mix(in srgb, var(--targamaa-sky) 72%, var(--surface));
  color: var(--muted);
}

.site-footer {
  border-top-color: color-mix(in srgb, var(--family-accent) 16%, var(--line));
}
.footer-brand img { width: 46px; height: 46px; }
.footer-brand-copy { display: grid; gap: 2px; }

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .word-entry { grid-template-columns: 1fr; }
  .word-entry-side { position: static; }
}

@media (max-width: 620px) {
  .brand { gap: 9px; }
  .brand img { width: 48px; height: 48px; }
  .brand-copy, .brand > span { gap: 2px; }
  .brand-name, .brand-copy > strong { font-size: 1em; }
  .brand-ar, .brand-copy > small { font-size: .58em; }
  .page-line { min-height: 26px; gap: 8px; }
  .page-line i { width: 64px; height: 5px; }
  .hero { padding-bottom: 44px; border-radius: 24px 24px 12px 24px; }
  .hero h1 { font-size: clamp(2.4rem, 12.5vw, 3.8rem); }
  .page-hero { border-radius: 24px 24px 12px 24px; }
  .hero-board { border-radius: 16px 16px 8px 16px; }
  .card, .level-card { padding: 22px 19px; border-radius: 18px 18px 10px 18px; }
  .card-stop[data-stop] { margin-bottom: 8px; }
  .level-card::after { font-size: 3.6rem; opacity: .7; }
  .route-card { border-radius: 18px 18px 10px 18px; }
  .route-card .actions { gap: 9px; }
  .route-card .actions .button { min-width: 0; padding-inline: 12px; white-space: nowrap; font-size: .88rem; }
  .family-words .english-word { font-size: clamp(3.2rem, 18vw, 5.2rem); }
  .family-words .word-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .family-words .word-hero .sound { justify-self: auto; }
  .word-title-row { align-items: flex-start; }
  .connection-panel { padding: 18px; }
  .sense-row { grid-template-columns: 32px minmax(0, 1fr); padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .connection-token[data-link] { transition: none; }
}

/* ========================================================================== 
   Targamaa v3.1 — page-family compositions
   ========================================================================== */

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .78fr);
  gap: clamp(30px, 4.5vw, 66px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px);
}
.home-hero .hero-main { max-width: 760px; }
.home-hero h1 {
  max-width: 780px;
  margin: 10px 0 20px;
  font-size: clamp(3.25rem, 5.5vw, 5.9rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.home-hero .lede { max-width: 680px; font-size: clamp(1.08rem, 1.7vw, 1.38rem); }
.free-promise {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  align-items: center;
  width: fit-content;
  margin-top: 24px;
  padding: 12px 15px;
  border: 1px solid color-mix(in srgb, var(--family-accent) 24%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--family-soft) 62%, var(--surface));
}
.free-promise strong { color: var(--family-deep); }
.free-promise span { color: var(--muted); font-size: .88rem; }
.hero-demo {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 13px;
  align-content: center;
  min-height: 390px;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--family-accent) 28%, var(--line));
  border-radius: 28px 28px 13px 28px;
  background: color-mix(in srgb, var(--surface) 94%, var(--family-soft));
  box-shadow: 0 12px 0 color-mix(in srgb, var(--family-accent) 10%, transparent);
}
.hero-demo::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 6px;
  background: var(--targamaa-bridge);
}
.demo-label { color: var(--family-deep); font-size: .8rem; font-weight: 900; }
.demo-word { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-start; min-width: 0; max-width: 100%; direction: ltr; }
.demo-word strong { min-width: 0; max-width: 100%; font-size: clamp(1.9rem, 3vw, 3.05rem); letter-spacing: -.03em; overflow-wrap: normal; word-break: normal; white-space: nowrap; }
.hero-demo > p { margin: 0; color: var(--family-deep); font-size: 1.5rem; font-weight: 900; }
.demo-pair { display: grid; gap: 9px; margin: 7px 0; padding: 18px; border-radius: 16px; background: var(--family-soft); }
.demo-pair > span { display: block; line-height: 1.65; }
.demo-pair .ltr { text-align: left; }
.demo-pair u,
.connection-target { text-decoration: none; border-bottom: 3px solid var(--targamaa-coral); }
.hero-demo > a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; color: var(--family-deep); font-weight: 900; text-underline-offset: 5px; }

.proof-strip,
.about-proof {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
  box-shadow: var(--soft-shadow);
}
.proof-strip > div,
.about-proof > div { display: grid; gap: 3px; place-items: center; min-height: 106px; padding: 18px 12px; background: var(--surface); text-align: center; }
.proof-strip strong,
.about-proof strong { color: var(--family-deep); font-size: clamp(1.45rem, 2.5vw, 2.2rem); }
.proof-strip span,
.about-proof span { color: var(--muted); font-size: .82rem; font-weight: 800; }
.proof-strip > div:nth-child(2n),
.about-proof > div:nth-child(2n) { background: color-mix(in srgb, var(--family-soft) 50%, var(--surface)); }

.section-head { display: flex; gap: 24px; align-items: end; justify-content: space-between; margin-bottom: 24px; }
.section-head > p { max-width: 540px; margin: 0; color: var(--muted); }
.three-starts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.start-card { min-height: 260px; }
.start-card .card-stop[data-stop] { color: var(--muted); font-size: .72rem; }
.start-card h3 { font-size: 1.55rem; }

.learning-loop,
.exam-spotlight,
.editorial-story,
.media-guide {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  gap: clamp(30px, 6vw, 82px);
  align-items: center;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid color-mix(in srgb, var(--family-accent) 20%, var(--line));
  border-radius: 28px 28px 13px 28px;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--family-soft) 58%, var(--surface)));
  box-shadow: var(--soft-shadow);
}
.learning-loop ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.learning-loop li { display: grid; gap: 7px; min-height: 140px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.learning-loop li b { color: var(--family-deep); font-size: 1.24rem; }
.learning-loop li span { color: var(--muted); }
.learning-loop li:nth-child(2) { border-top-color: var(--targamaa-coral); }
.learning-loop li:nth-child(3) { border-top-color: var(--targamaa-lilac); }
.learning-loop li:nth-child(4) { border-top-color: var(--targamaa-teal-bright); }

.level-roadmap { overflow: hidden; }
.level-track { display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr)); gap: 10px; }
.level-track a { position: relative; display: grid; gap: 8px; min-height: 170px; padding: 18px 15px; border: 1px solid var(--line); border-radius: 18px 18px 9px 18px; background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--soft-shadow); }
.level-track a::before { content: ""; height: 4px; border-radius: 99px; background: var(--family-accent); }
.level-track a:nth-child(2n)::before { background: var(--family-accent-2); }
.level-track a:nth-child(3n)::before { background: var(--targamaa-lilac); }
.level-track small { color: var(--muted); }
.level-track strong { font-size: 1.45rem; }
.level-track span { color: var(--muted); font-size: .82rem; }
.level-track em { align-self: end; color: var(--family-deep); font-size: .73rem; font-style: normal; font-weight: 900; }

.exam-spotlight { background: linear-gradient(125deg, var(--family-soft), var(--surface) 62%); }
.exam-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.exam-mini span { display: grid; place-items: center; min-height: 105px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; font-weight: 900; }
.exam-mini span:nth-child(2), .exam-mini span:nth-child(3) { background: color-mix(in srgb, var(--family-soft) 54%, var(--surface)); }
.trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trust-row article { padding: 24px; border-inline-start: 4px solid var(--family-accent); border-radius: 10px 18px 18px 10px; background: var(--surface); box-shadow: var(--soft-shadow); }
.trust-row article:nth-child(2) { border-inline-start-color: var(--family-accent-2); }
.trust-row article:nth-child(3) { border-inline-start-color: var(--targamaa-lilac); }
.trust-row p { margin-bottom: 0; color: var(--muted); }

/* Pronunciation details: one calm practice path, not a stack of equal cards. */
.pronunciation-workbench {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 74px);
  overflow: hidden;
  padding: clamp(30px, 5vw, 56px);
  border: 1px solid color-mix(in srgb, var(--family-accent) 24%, var(--line));
  border-radius: 28px 28px 13px 28px;
  background:
    linear-gradient(90deg, var(--family-accent), var(--family-accent-2)) top / 100% 6px no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--family-soft) 60%, var(--surface)), var(--surface) 58%);
  box-shadow: var(--soft-shadow);
}
.pronunciation-workbench::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  inset-inline-start: -105px;
  bottom: -120px;
  border: 28px solid color-mix(in srgb, var(--family-accent) 7%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.pronunciation-intro { align-self: center; position: relative; z-index: 1; }
.pronunciation-intro h2 { max-width: 390px; margin-bottom: 14px; font-size: clamp(2rem, 3.2vw, 3.35rem); }
.pronunciation-intro > p:not(.eyebrow) { max-width: 500px; margin-bottom: 0; color: var(--muted); }
.pronunciation-success {
  display: grid;
  gap: 5px;
  margin-top: 26px;
  padding: 17px 19px;
  border-inline-start: 5px solid var(--family-accent-2);
  border-radius: 9px 16px 16px 9px;
  background: color-mix(in srgb, var(--surface) 82%, var(--family-soft));
}
.pronunciation-success strong { color: var(--family-deep); }
.pronunciation-success span { color: var(--muted); font-size: .92rem; }
.pronunciation-sequence { position: relative; z-index: 1; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pronunciation-sequence::before {
  content: "";
  position: absolute;
  top: 31px;
  bottom: 31px;
  inset-inline-start: 22px;
  width: 2px;
  background: linear-gradient(var(--family-accent), var(--family-accent-2));
}
.pronunciation-sequence li {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-height: 118px;
  padding: 20px 0;
}
.pronunciation-sequence li + li { border-top: 1px solid var(--line); }
.pronunciation-sequence li > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--family-accent);
  border-radius: 50%;
  background: var(--surface);
  color: var(--family-deep);
  font: 950 .72rem/1 var(--body-font);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--family-accent) 13%, transparent);
}
.pronunciation-sequence li:nth-child(2) > span { border-color: color-mix(in srgb, var(--family-accent) 50%, var(--family-accent-2)); }
.pronunciation-sequence li:nth-child(3) > span { border-color: var(--family-accent-2); }
.pronunciation-sequence strong { display: block; margin: 1px 0 7px; font-size: 1.18rem; }
.pronunciation-sequence p { max-width: 610px; margin: 0; color: var(--muted); }

.route-card { grid-template-areas: "icon copy actions" "icon free free"; }
.route-icon { grid-area: icon; }
.route-copy { grid-area: copy; }
.route-card .actions { grid-area: actions; }
.route-free { grid-area: free; color: var(--muted); font-weight: 800; }

/* Course and grammar */
.course-intro { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 6vw, 82px); align-items: center; }
.course-intro > div { max-width: 470px; }
.course-intro > p { max-width: 720px; margin: 0; font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.9; }
.course-intro .meta { justify-content: flex-end; }
.unit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grammar-key { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border: 1px solid color-mix(in srgb, var(--family-accent) 22%, var(--line)); border-radius: 16px; background: var(--family-soft); }
.grammar-key span { flex: 0 0 auto; color: var(--family-deep); font-weight: 950; }
.grammar-key p { margin: 0; }
.grammar-level { scroll-margin-top: 90px; }
.grammar-jumps { position: sticky; top: 8px; z-index: 12; display: flex; gap: 18px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--soft-shadow); backdrop-filter: blur(12px); }
.grammar-jumps > strong { flex: 0 0 auto; font-size: .84rem; }
.grammar-jumps > div { display: flex; gap: 8px; overflow-x: auto; min-width: 0; padding: 2px; scrollbar-width: thin; }
.grammar-jumps a { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 58px; min-height: 44px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 900; }
.grammar-jumps a:hover { border-color: var(--family-accent); color: var(--family-deep); }
.grammar-level + .grammar-level { padding-top: 38px; border-top: 1px solid var(--line); }
.grammar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grammar-card.is-core { border-color: color-mix(in srgb, var(--family-accent) 38%, var(--line)); background: linear-gradient(145deg, var(--family-soft), var(--surface) 72%); }
.grammar-card.is-core h3::after { content: "★"; margin-inline-start: 8px; color: var(--family-deep); font-size: .8em; }
.lesson-examples { display: grid; gap: 13px; }
.grammar-example { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--family-soft) 38%, var(--surface)); }
.grammar-example > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface); color: var(--family-deep); font-size: .75rem; font-weight: 950; box-shadow: var(--soft-shadow); }
.grammar-example p { margin: 0; }
.grammar-example .translation { margin-top: 8px; color: var(--muted); }
.mistake-card { background: color-mix(in srgb, var(--targamaa-coral) 7%, var(--surface)) !important; }
.mistake-card h2 { color: var(--targamaa-coral-deep); }

/* Word page */
.word-masthead {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--family-accent) 26%, var(--line));
  border-radius: 30px 30px 14px 30px;
  background: linear-gradient(135deg, var(--surface) 0 64%, var(--family-soft));
  box-shadow: var(--soft-shadow);
}
.word-masthead::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 7px; background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2)); }
.word-breadcrumbs { margin-bottom: 12px; }
.word-heading { display: flex; gap: 24px; align-items: end; justify-content: space-between; }
.word-title-row { justify-content: flex-start; }
.word-title-row h1 { margin: 0; color: var(--ink); font-size: clamp(3.5rem, 7vw, 6rem); line-height: .92; letter-spacing: -.055em; overflow-wrap: normal; word-break: normal; }
.word-meaning { margin: 8px 0 0; color: var(--family-deep); font-size: clamp(1.35rem, 2.25vw, 1.95rem); font-weight: 900; }
.word-rank { flex: 0 0 auto; display: grid; gap: 3px; min-width: 112px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); text-align: center; box-shadow: var(--soft-shadow); }
.word-rank small { color: var(--muted); }
.word-rank strong { font-size: 1.65rem; }
.word-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.word-content { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--soft-shadow); }
.word-content > section { padding: clamp(24px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.word-content > section:last-child { border-bottom: 0; }
.word-aside { position: sticky; top: 16px; display: grid; gap: 17px; padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: var(--soft-shadow); }
.word-aside dl { display: grid; gap: 0; margin: 0; }
.word-aside dl div { display: flex; gap: 12px; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
.word-aside dt { color: var(--muted); }
.word-aside dd { margin: 0; font-weight: 900; }
.word-aside > a, .text-link { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
.sentence-pair { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--family-soft) 54%, var(--surface))); }
.sentence-head { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.example-line { display: flex; direction: ltr; gap: 14px; align-items: center; margin-top: 20px; }
.example-line .example { flex: 1 1 auto; min-width: 0; margin: 0; text-align: left; }
.example-line .sound { flex: 0 0 auto; }
.sentence-pair .translation { font-size: 1.16rem; }
.connection-bridge { display: grid; grid-template-columns: auto minmax(36px, 1fr) auto; gap: 12px; align-items: center; margin: 17px 0 0; color: var(--family-deep); font: 900 .9rem/1.2 var(--body-font); }
.connection-bridge i { height: 1px; background: color-mix(in srgb, var(--family-accent) 35%, var(--line)); }
.connection-bridge u { border-bottom: 3px solid var(--targamaa-coral); text-decoration: none; }
.alignment-fragment {
  border-bottom: 2px solid var(--alignment-color, var(--targamaa-coral));
  border-radius: 2px;
  text-decoration: none;
  text-decoration-skip-ink: none;
  transition: background-color .16s ease, box-shadow .16s ease;
  cursor: pointer;
}
.alignment-fragment.is-headword { border-bottom-width: 4px; font-weight: 900; }
.alignment-color-0 { --alignment-color: var(--targamaa-coral); }
.alignment-color-1 { --alignment-color: var(--targamaa-teal); }
.alignment-color-2 { --alignment-color: var(--targamaa-lilac); }
.alignment-color-3 { --alignment-color: var(--gold-dark); }
.alignment-color-4 { --alignment-color: var(--blue); }
.alignment-color-5 { --alignment-color: var(--green); }
.alignment-fragment.is-connected {
  background: color-mix(in srgb, var(--alignment-color) 18%, transparent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--alignment-color) 32%, transparent);
}
.aligned-sentence { line-height: 2.15; }
.connection-bridge.reviewed u { border-bottom-color: var(--targamaa-coral); }
.other-meanings { display: grid; gap: 10px; margin-top: 22px; }
.other-meanings > strong { color: var(--muted); font-size: .82rem; }
.english-definition { display: grid; gap: 7px; margin-top: 22px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--family-soft) 34%, var(--surface)); }
.english-definition small { color: var(--muted); font-weight: 900; }
.english-definition p { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.connection-target.is-connected,
[data-connection="target"].is-connected { border-bottom-color: var(--targamaa-teal); background: color-mix(in srgb, var(--targamaa-teal) 12%, transparent); }
.draft-notice { display: flex; gap: 13px 26px; align-items: center; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--family-accent) 25%, var(--line)); border-radius: 15px; background: var(--family-soft); }
.draft-notice p { margin: 0; color: var(--muted); }
.draft-notice.compact { margin-top: 16px; padding-block: 12px; }
.related-words a { justify-content: center; min-width: 44px; text-decoration: none; }
.technical-details summary { cursor: pointer; color: var(--ink); font-size: 1.2rem; font-weight: 950; }
.technical-details pre { max-height: 420px; overflow: auto; margin-top: 18px; padding: 18px; border-radius: 14px; background: var(--bg); white-space: pre-wrap; }
.activity-feedback { min-height: 28px; margin: 10px 0 0; color: var(--muted); font-weight: 850; text-align: center; }

/* Exams */
.exam-prose .exam-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.exam-section-card,
.exam-variant { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb, var(--family-soft) 34%, var(--surface)); }
.exam-section-card header { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.exam-section-card header span { color: var(--family-deep); font-size: .76rem; font-weight: 950; }
.exam-section-card h3 { margin: 0; }
.exam-section-card ul { margin-bottom: 12px; }
.exam-section-card small { display: block; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.exam-variants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exam-variant { display: grid; gap: 10px; }
.exam-variant p, .exam-variant small { margin: 0; }
.score-explainer { background: color-mix(in srgb, var(--family-soft) 58%, var(--surface)) !important; }
.score-scale { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: center; }
.score-scale > strong { display: grid; place-items: center; min-height: 92px; border-radius: 18px; background: var(--family-accent); color: white; font-size: 2rem; }
.planned-section { border-style: dashed !important; background: color-mix(in srgb, var(--family-soft) 42%, var(--surface)) !important; }
.media-placeholder { min-height: 280px; display: grid; place-items: center; text-align: center; background: linear-gradient(145deg, var(--surface), var(--family-soft)); }
.media-placeholder > div { max-width: 680px; }
.official-links { display: grid; gap: 9px; }
.official-links a { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 800; }
.official-links a:hover { border-color: var(--family-accent); color: var(--family-deep); }
.exam-disclaimer { color: var(--muted); font-size: .86rem; }
.exam-update { padding: 12px 15px; border-inline-start: 4px solid var(--family-accent-2); background: var(--family-soft); }
.exam-prep-intro { background: linear-gradient(135deg, color-mix(in srgb, var(--family-soft) 68%, var(--surface)), var(--surface)) !important; }
.exam-truth-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.exam-truth-strip span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .78rem; font-weight: 900; }
.section-heading { display: flex; gap: 24px; align-items: end; justify-content: space-between; }
.section-heading > div { min-width: 0; }
.section-heading > p { max-width: 430px; margin: 0; color: var(--muted); }
.exam-strategy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.exam-strategy-card { position: relative; overflow: hidden; display: grid; align-content: start; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: color-mix(in srgb, var(--family-soft) 34%, var(--surface)); }
.exam-strategy-card:nth-child(2n) { background: color-mix(in srgb, var(--targamaa-lilac) 7%, var(--surface)); }
.exam-strategy-card header { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding-inline-end: 42px; }
.exam-strategy-card header span { color: var(--family-deep); font-size: .78rem; font-weight: 950; }
.exam-strategy-card h3, .exam-strategy-card p { margin: 0; }
.exam-strategy-card ol { margin: 0; }
.exam-card-number { position: absolute; inset-block-start: 15px; inset-inline-end: 15px; color: var(--family-accent); font-family: ui-monospace, monospace; font-size: .75rem; font-weight: 950; }
.exam-drill { display: grid; gap: 6px; padding: 14px 15px; border-inline-start: 4px solid var(--family-accent-2); border-radius: 12px; background: var(--surface); }
.exam-drill span { color: var(--muted); }
.exam-sample-list { display: grid; gap: 18px; }
.exam-mobile-nav { display: none; }
.exam-prose section[id] { scroll-margin-top: 82px; }
.exam-sample-card { position: relative; display: grid; gap: 16px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 21px; background: var(--surface); box-shadow: var(--soft-shadow); }
.exam-sample-card > header { display: flex; gap: 20px; align-items: start; justify-content: space-between; padding-inline-end: 42px; }
.exam-sample-card > header span { color: var(--family-deep); font-size: .78rem; font-weight: 950; }
.exam-sample-card h3 { margin: 5px 0 0; }
.exam-prompt, .exam-stimulus, .exam-data { margin: 0; padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--family-soft) 35%, var(--surface)); }
.exam-media-notice { margin: 0; padding: 12px 15px; border-inline-start: 4px solid var(--gold); border-radius: 11px; background: var(--surface-warm); color: var(--gold-dark); font-weight: 850; }
.exam-prompt strong { color: var(--family-deep); }
.exam-prompt p { margin-block-end: 0; }
.exam-stimulus { color: var(--ink); font-style: normal; line-height: 1.85; }
.exam-data { overflow: auto; color: var(--ink); font: 800 .94rem/1.85 ui-monospace, monospace; white-space: pre-wrap; }
.exam-questions { display: grid; gap: 12px; margin: 0; padding-inline-start: 24px; }
.exam-questions > li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.exam-questions > li > p { margin-top: 0; }
.exam-questions details summary, .exam-model summary, .exam-plan summary { cursor: pointer; color: var(--family-deep); font-weight: 950; }
.exam-questions details summary, .exam-model > summary { display: flex; min-height: 44px; align-items: center; padding-block: 8px; }
.exam-trademark { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }

@media (max-width: 900px) {
  .family-exams .exam-mobile-nav { position: sticky; z-index: 8; top: 8px; display: flex; width: min(var(--max), calc(100% - 32px)); gap: 8px; margin: -8px auto 18px; padding: 8px; overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--soft-shadow); scrollbar-width: none; }
  .family-exams .exam-mobile-nav::-webkit-scrollbar { display: none; }
  .family-exams .exam-mobile-nav a { min-width: max-content; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--family-deep); font-weight: 900; text-decoration: none; }
}
.exam-questions details strong { display: block; margin-top: 12px; }
.exam-model { padding: 17px 19px; border: 1px solid color-mix(in srgb, var(--family-accent) 32%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--family-soft) 46%, var(--surface)); }
.model-answer { margin-top: 16px; padding: 18px; border-radius: 13px; background: var(--surface); line-height: 1.8; }
.model-warning { color: var(--muted); font-size: .86rem; font-weight: 800; }
.exam-checklist { padding: 16px 18px; border-inline-start: 5px solid var(--family-accent); border-radius: 13px; background: color-mix(in srgb, var(--family-soft) 50%, var(--surface)); }
.exam-checklist ul { margin-bottom: 0; }
.exam-rubrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.exam-rubric-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.exam-rubric-card h3 { margin-top: 0; }
.rubric-criteria { display: grid; gap: 9px; }
.rubric-criteria > div { display: grid; gap: 4px; padding: 13px 14px; border-radius: 12px; background: var(--bg); }
.rubric-criteria strong { color: var(--family-deep); }
.rubric-criteria span { color: var(--muted); }
.exam-plans { display: grid; gap: 12px; }
.exam-plan { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.exam-plan[open] { border-color: color-mix(in srgb, var(--family-accent) 42%, var(--line)); box-shadow: var(--soft-shadow); }
.exam-plan > summary { display: grid; grid-template-columns: minmax(150px, .36fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 20px; list-style: none; }
.exam-plan > summary::-webkit-details-marker { display: none; }
.exam-plan > summary span { display: grid; gap: 3px; }
.exam-plan > summary strong { color: var(--family-accent); font-size: 1.25rem; }
.exam-plan > summary small, .exam-plan > summary b { color: var(--muted); }
.plan-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; border-top: 1px solid var(--line); background: var(--line); }
.plan-stages article { padding: 18px; background: var(--surface); }
.plan-stages article > strong { color: var(--family-deep); }
.plan-stages article p { margin-block: 8px; }
.plan-stages article small { color: var(--muted); }

/* About */
.about-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .55fr); gap: clamp(34px, 7vw, 90px); align-items: center; min-height: 520px; padding: clamp(42px, 7vw, 82px); border: 1px solid color-mix(in srgb, var(--family-accent) 24%, var(--line)); border-radius: 34px; background: var(--targamaa-bridge) top / 100% 7px no-repeat, linear-gradient(130deg, var(--surface), var(--family-soft)); box-shadow: var(--shadow); }
.about-hero h1 { max-width: 780px; font-size: clamp(3.25rem, 6.2vw, 6.2rem); line-height: 1; letter-spacing: -.05em; }
.about-mark { display: grid; grid-template-columns: 1fr auto 1fr; gap: 13px; align-items: center; justify-items: center; padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 10px 0 color-mix(in srgb, var(--family-accent) 10%, transparent); }
.about-mark img { grid-column: 1 / -1; width: min(190px, 70%); }
.about-mark i { width: 56px; height: 5px; border-radius: 99px; background: var(--targamaa-bridge); }
.about-mark span { color: var(--family-deep); font-weight: 950; }
.about-proof { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.about-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.showcase-card { overflow: hidden; display: grid; grid-template-columns: minmax(170px, .68fr) minmax(0, 1fr); min-height: 300px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--soft-shadow); }
.showcase-study { grid-column: 1 / -1; grid-template-columns: minmax(230px, .46fr) minmax(0, 1.54fr); }
.showcase-card > div:last-child { align-self: center; padding: 30px; }
.showcase-card h3 { font-size: 1.8rem; }
.showcase-visual { display: grid; place-content: center; gap: 13px; min-height: 100%; padding: 24px; background: var(--family-soft); text-align: center; }
.showcase-visual span { color: var(--family-deep); font-size: .78rem; font-weight: 950; }
.showcase-visual i { width: 80px; height: 5px; margin: auto; border-radius: 99px; background: var(--targamaa-bridge); }
.showcase-visual b { direction: ltr; unicode-bidi: isolate; font-size: clamp(1.3rem, 2.4vw, 2.2rem); }
.showcase-grammar .showcase-visual, .showcase-exams .showcase-visual { background: color-mix(in srgb, var(--targamaa-lilac) 12%, var(--surface)); }
.showcase-practice .showcase-visual { background: color-mix(in srgb, var(--targamaa-coral) 10%, var(--surface)); }
.editorial-story ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.editorial-story li { display: grid; gap: 5px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.editorial-story li span { color: var(--muted); }
.media-guide { grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr); }
.media-guide .grid { margin: 0; }
.media-guide article { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.media-guide > .button { grid-column: 1 / -1; width: fit-content; }

/* 404 */
.not-found { display: grid; justify-items: center; max-width: 900px; min-height: 610px; margin: 0 auto; padding: clamp(40px, 8vw, 90px); text-align: center; border: 1px solid var(--line); border-radius: 32px; background: linear-gradient(145deg, var(--surface), var(--family-soft)); box-shadow: var(--shadow); }
.error-code { direction: ltr; display: flex; align-items: center; gap: 10px; color: var(--family-deep); font-size: clamp(5rem, 13vw, 10rem); font-weight: 950; line-height: 1; }
.error-code img { width: clamp(86px, 13vw, 140px); }
.not-found h1 { margin: 5px 0; font-size: clamp(2.5rem, 5vw, 4.8rem); }
.error-suggestions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.error-suggestions a { display: grid; gap: 5px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; }
.error-suggestions span { color: var(--muted); font-size: .84rem; }

@media (max-width: 1040px) {
  .home-hero, .about-hero { grid-template-columns: minmax(0, 1fr) minmax(290px, .72fr); padding: 46px; }
  .home-hero h1, .about-hero h1 { font-size: clamp(3.1rem, 7vw, 5.8rem); }
  .proof-strip { grid-template-columns: repeat(5, minmax(110px, 1fr)); overflow-x: auto; }
  .level-track { grid-template-columns: repeat(7, minmax(130px, 1fr)); overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
  .level-track a { scroll-snap-align: start; }
  .grammar-grid, .unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .home-hero, .about-hero { grid-template-columns: 1fr; gap: 28px; padding: 30px 20px; }
  .home-hero h1, .about-hero h1 { font-size: clamp(2.75rem, 12.2vw, 4.2rem); }
  .hero-demo { min-height: 320px; }
  .proof-strip { grid-template-columns: repeat(2, 1fr); overflow: hidden; }
  .proof-strip > div:last-child { grid-column: 1 / -1; }
  .about-proof { grid-template-columns: repeat(2, 1fr); }
  .section-head { align-items: start; flex-direction: column; }
  .three-starts, .grammar-grid, .unit-grid, .trust-row { grid-template-columns: 1fr; }
  .course-intro { grid-template-columns: 1fr; gap: 12px; }
  .course-intro > div, .course-intro > p { max-width: none; }
  .learning-loop, .exam-spotlight, .editorial-story, .media-guide { grid-template-columns: 1fr; padding: 25px 19px; }
  .pronunciation-workbench { grid-template-columns: 1fr; gap: 18px; padding: 27px 20px; }
  .pronunciation-intro h2 { max-width: none; }
  .pronunciation-success { margin-top: 20px; }
  .pronunciation-sequence li { min-height: 0; padding: 18px 0; }
  .learning-loop ol, .exam-mini { grid-template-columns: 1fr; }
  .learning-loop li { min-height: 0; }
  .route-card { grid-template-areas: "icon copy" "actions actions" "free free"; }
  .route-card .actions { justify-content: stretch; }
  .route-card .actions .button { min-height: 46px; }
  .grammar-jumps { align-items: start; flex-direction: column; gap: 8px; top: 6px; }
  .grammar-jumps > div { width: 100%; }
  .level-roadmap::after,
  .grammar-jumps::after { content: "← اسحب لرؤية باقي المستويات"; display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; font-weight: 800; }
  .word-heading { align-items: start; flex-direction: column; }
  .word-title-row h1 { font-size: clamp(3.35rem, 17vw, 5.6rem); }
  .word-rank { min-width: 0; width: 100%; grid-template-columns: 1fr auto; align-items: center; text-align: start; }
  .word-layout { grid-template-columns: 1fr; }
  .word-aside { position: static; }
  .draft-notice { align-items: start; flex-direction: column; }
  .exam-prose .exam-sections, .exam-variants { grid-template-columns: 1fr; }
  .exam-strategy-grid, .exam-rubrics, .plan-stages { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .exam-plan > summary { grid-template-columns: 1fr; gap: 8px; }
  .score-scale { grid-template-columns: 1fr; }
  .score-scale > strong { min-height: 70px; }
  .about-showcase { grid-template-columns: 1fr; }
  .showcase-card, .showcase-study { grid-column: auto; grid-template-columns: 1fr; }
  .showcase-visual { min-height: 150px; }
  .error-suggestions { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .home-hero, .about-hero { padding: 26px 17px 32px; border-radius: 24px; }
  .home-hero h1, .about-hero h1 { font-size: clamp(2.45rem, 12vw, 3.45rem); line-height: 1.05; }
  .free-promise { display: grid; }
  .hero-demo { padding: 24px 18px; border-radius: 20px; }
  .demo-word strong { font-size: clamp(2rem, 10vw, 2.5rem); }
  .proof-strip > div, .about-proof > div { min-height: 92px; padding: 14px 8px; }
  .level-roadmap { margin-inline: -2px; }
  .route-card .actions { display: grid; grid-template-columns: 1fr; }
  .route-card .actions .button { width: 100%; white-space: normal; }
  .word-masthead { padding: 28px 18px; border-radius: 22px; }
  .word-title-row { gap: 10px; }
  .word-title-row h1 { font-size: clamp(3rem, 17vw, 4.7rem); overflow-wrap: normal; word-break: normal; }
  .word-title-row .sound { width: 46px; height: 46px; }
  .sentence-head { align-items: start; }
  .sentence-pair .example { font-size: 1rem; }
  .grammar-example { grid-template-columns: 34px minmax(0, 1fr); padding: 14px; }
  .grammar-example > span { width: 30px; height: 30px; }
  .showcase-card > div:last-child { padding: 22px 19px; }
}

/* --------------------------------------------------------------------------
   Word-list directory — an editorial railway map for the Words family
   -------------------------------------------------------------------------- */

.words-subnav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: clamp(22px, 3vw, 34px);
  padding: 1px;
  border: 1px solid color-mix(in srgb, var(--family-accent) 20%, var(--line));
  border-radius: 18px;
  background: var(--line);
  box-shadow: var(--soft-shadow);
}
.words-subnav::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2));
  pointer-events: none;
}
.words-subnav a {
  position: relative;
  min-width: 0;
  min-height: 66px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 11px 18px 9px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.words-subnav a + a::after {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  top: 17px;
  bottom: 17px;
  width: 1px;
  background: color-mix(in srgb, var(--family-accent) 18%, var(--line));
}
.words-subnav a strong {
  overflow: hidden;
  font-size: .94rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.words-subnav a span {
  overflow: hidden;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.words-subnav a:hover { background: color-mix(in srgb, var(--family-soft) 46%, var(--surface)); }
.words-subnav a[aria-current="page"] {
  background: color-mix(in srgb, var(--family-soft) 78%, var(--surface));
  color: var(--family-deep);
}
.words-subnav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline: 18px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: var(--family-accent);
}
.words-subnav a:focus-visible,
.list-jumps a:focus-visible,
.word-list-card .button:focus-visible,
.expression-row:focus-within,
.strong-language-notice summary:focus-visible {
  outline: 4px solid color-mix(in srgb, var(--gold) 68%, transparent);
  outline-offset: 3px;
}

.list-jumps {
  position: sticky;
  z-index: 9;
  top: 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(108px, 1fr);
  gap: 7px;
  overflow-x: auto;
  margin-top: 18px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(12px);
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}
.list-jumps a {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
}
.list-jumps a:hover { border-color: var(--family-accent); color: var(--family-deep); }
.list-jumps small {
  direction: ltr;
  unicode-bidi: isolate;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--family-soft);
  color: var(--family-deep);
  font: 900 .64rem/1 ui-monospace, Consolas, monospace;
}
.list-jumps strong {
  overflow: hidden;
  font-size: .76rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-directory-section {
  position: relative;
  scroll-margin-top: 94px;
}
.list-directory-section + .list-directory-section {
  padding-top: clamp(30px, 5vw, 54px);
  border-top: 1px solid var(--line);
}
.directory-heading {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  max-width: 820px;
  margin-bottom: 22px;
}
.directory-heading > span {
  direction: ltr;
  unicode-bidi: isolate;
  position: relative;
  min-height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--family-accent) 34%, var(--line));
  border-radius: 18px 18px 8px 18px;
  background: var(--family-soft);
  color: var(--family-deep);
  font: 950 .84rem/1 ui-monospace, Consolas, monospace;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--family-accent) 9%, transparent);
}
.directory-heading > span::after {
  content: "";
  position: absolute;
  inset-inline-end: -24px;
  top: 50%;
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: var(--family-accent);
}
.directory-heading h2 { margin-bottom: 7px; font-size: clamp(1.8rem, 3.5vw, 2.85rem); }
.directory-heading .eyebrow { margin-bottom: 5px; }
.directory-heading p:last-child { max-width: 670px; margin: 0; color: var(--muted); }

.list-directory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.word-list-card {
  min-height: 258px;
  padding: 25px;
  border-color: color-mix(in srgb, var(--family-accent) 20%, var(--line));
  background:
    linear-gradient(145deg, var(--surface) 0 77%, color-mix(in srgb, var(--family-soft) 64%, var(--surface)));
}
.word-list-card::before { background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2)); }
.word-list-card:nth-child(4n + 2)::before { background: linear-gradient(90deg, var(--family-accent-2), var(--targamaa-lilac)); }
.word-list-card:nth-child(4n + 3)::before { background: linear-gradient(90deg, var(--targamaa-lilac), var(--family-accent)); }
.word-list-card:nth-child(4n)::before { background: linear-gradient(90deg, var(--targamaa-teal-bright), var(--family-accent-2)); }
.word-list-card .card-stop[data-stop] {
  margin-bottom: 8px;
  padding: 0;
  color: var(--muted);
  font: 900 .68rem/1.2 ui-monospace, Consolas, monospace;
}
.word-list-card h3 { margin-bottom: 9px; font-size: 1.36rem; }
.word-list-card p { margin-bottom: 14px; line-height: 1.7; }
.word-list-card .meta { gap: 6px; margin: auto 0 15px; }
.word-list-card .chip {
  min-height: 30px;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--family-soft) 58%, var(--surface));
  font-size: .72rem;
}
.word-list-card .button { min-height: 44px; white-space: nowrap; }
.word-list-card.is-sensitive {
  border-color: color-mix(in srgb, #d97911 42%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #fff3dc 56%, var(--surface)), var(--surface) 72%);
}
.word-list-card.is-sensitive::before { background: linear-gradient(90deg, #d97911, var(--red)); }
.word-list-card.is-sensitive h3 { color: color-mix(in srgb, #b34d10 78%, var(--ink)); }
.word-list-card.is-sensitive .button {
  border-color: color-mix(in srgb, #d97911 48%, var(--line));
  background: color-mix(in srgb, #fff3dc 72%, var(--surface));
}

.list-detail-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 70px);
  align-items: end;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid color-mix(in srgb, var(--family-accent) 24%, var(--line));
  border-radius: 24px 24px 12px 24px;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--family-soft) 58%, var(--surface)));
  box-shadow: var(--soft-shadow);
}
.list-detail-head::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 5px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, var(--family-accent), var(--family-accent-2));
}
.list-detail-head h2 { margin-bottom: 8px; }
.list-detail-head p:last-child { max-width: 710px; margin: 0; color: var(--muted); }
.list-detail-head .actions { justify-content: flex-end; margin-top: 0; }
.list-detail-head .button { min-height: 48px; white-space: nowrap; }

.expression-list {
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 1px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--family-soft) 20%, var(--surface));
}
.expression-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 17px;
  align-items: center;
  min-height: 112px;
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--surface);
}
.expression-row:nth-child(even) { background: color-mix(in srgb, var(--family-soft) 42%, var(--surface)); }
.expression-number {
  direction: ltr;
  unicode-bidi: isolate;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--family-accent) 32%, var(--line));
  border-radius: 13px 13px 6px 13px;
  background: var(--family-soft);
  color: var(--family-deep);
  font: 950 .72rem/1 ui-monospace, Consolas, monospace;
}
.expression-row > div { min-width: 0; }
.expression-row h3 { margin: 0 0 4px; color: var(--ink); font-size: 1.3rem; text-align: left; }
.expression-row p { margin: 0; color: var(--ink); font-weight: 850; }
.expression-row small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.55; }
.intensity-label {
  align-self: start;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, #d97911 44%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, #fff3dc 74%, var(--surface));
  color: color-mix(in srgb, #a9440a 82%, var(--ink));
  font-size: .76rem;
  white-space: nowrap;
}
.expression-row.is-strong { border-inline-start: 4px solid color-mix(in srgb, #d97911 70%, var(--line)); }
.expression-row.is-strong:nth-child(even) { background: color-mix(in srgb, #fff3dc 34%, var(--surface)); }

.strong-language-notice {
  margin-top: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #d97911 45%, var(--line));
  border-inline-start: 6px solid #d97911;
  border-radius: 18px;
  background: color-mix(in srgb, #fff3dc 62%, var(--surface));
  box-shadow: var(--soft-shadow);
}
.strong-language-notice summary {
  position: relative;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 10px 19px;
  color: color-mix(in srgb, #a9440a 82%, var(--ink));
  font-weight: 950;
  cursor: pointer;
}
.strong-language-notice summary::marker { color: #d97911; }
.strong-language-notice[open] summary { border-bottom: 1px solid color-mix(in srgb, #d97911 28%, var(--line)); }
.strong-language-notice p { margin: 0; padding: 12px 19px 0; color: var(--ink-soft); }
.strong-language-notice p:last-child { padding-bottom: 16px; color: color-mix(in srgb, #a9440a 78%, var(--ink)); }
.expression-safety { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.expression-safety span { padding: 5px 9px; border: 1px solid color-mix(in srgb, #d97911 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, #fff4db 72%, var(--paper)); color: var(--ink-soft); font-size: .76rem; font-weight: 800; }
.expression-safety b { color: var(--ink); }

.list-empty {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
  padding: 28px;
  border: 1px dashed color-mix(in srgb, var(--family-accent) 42%, var(--line));
  border-radius: 21px;
  background: color-mix(in srgb, var(--family-soft) 42%, var(--surface));
}
.list-empty > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--family-deep);
  font-size: 1.8rem;
  box-shadow: var(--soft-shadow);
}
.list-empty h2 { margin-bottom: 4px; font-size: 1.45rem; }
.list-empty p { margin: 0; color: var(--muted); }

:root[data-theme="dark"] .word-list-card.is-sensitive,
:root[data-theme="dark"] .expression-row.is-strong:nth-child(even),
:root[data-theme="dark"] .strong-language-notice,
:root[data-theme="dark"] .intensity-label {
  background: color-mix(in srgb, #d97911 11%, var(--surface));
}
:root[data-theme="dark"] .word-list-card.is-sensitive h3,
:root[data-theme="dark"] .intensity-label,
:root[data-theme="dark"] .strong-language-notice summary,
:root[data-theme="dark"] .strong-language-notice p:last-child { color: #ffc57d; }

@media (max-width: 1040px) {
  .list-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .words-subnav a { min-height: 60px; padding-inline: 12px; }
  .words-subnav a[aria-current="page"]::before { inset-inline: 12px; }
  .list-jumps { margin-inline: -2px; grid-auto-columns: minmax(112px, 42vw); }
  .directory-heading { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .directory-heading > span { min-height: 48px; border-radius: 14px 14px 7px 14px; }
  .directory-heading > span::after { inset-inline-end: -14px; width: 13px; }
  .list-directory-grid { grid-template-columns: 1fr; }
  .word-list-card { min-height: 0; padding: 22px; }
  .list-detail-head { grid-template-columns: 1fr; gap: 20px; padding: 25px 19px; }
  .list-detail-head .actions { justify-content: stretch; }
  .list-detail-head .button { flex: 1 1 auto; }
  .expression-row { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding: 16px 14px; }
  .intensity-label { grid-column: 2; justify-self: start; align-self: auto; }
}

@media (max-width: 430px) {
  .words-subnav { border-radius: 14px; }
  .words-subnav a { min-height: 58px; padding: 10px 7px 8px; text-align: center; }
  .words-subnav a strong { font-size: .78rem; }
  .words-subnav a span { font-size: .63rem; }
  .words-subnav a + a::after { top: 13px; bottom: 13px; }
  .words-subnav a[aria-current="page"]::before { inset-inline: 7px; }
  .list-jumps { grid-auto-columns: minmax(105px, 39vw); padding: 6px; }
  .list-jumps a { min-height: 44px; padding: 6px 8px; }
  .list-jumps small { width: 25px; height: 25px; }
  .directory-heading { grid-template-columns: 42px minmax(0, 1fr); }
  .directory-heading > span { min-height: 42px; }
  .directory-heading h2 { font-size: 1.65rem; }
  .word-list-card { padding: 20px 17px; }
  .word-list-card .button { width: 100%; }
  .list-detail-head .actions { display: grid; grid-template-columns: 1fr; }
  .list-detail-head .button { width: 100%; padding-inline: 12px; font-size: .87rem; }
  .expression-list { margin-inline: -1px; border-radius: 17px; }
  .expression-row { grid-template-columns: 38px minmax(0, 1fr); min-height: 0; gap: 11px; padding: 15px 11px; }
  .expression-number { width: 36px; height: 36px; border-radius: 11px 11px 5px 11px; }
  .expression-row h3 { font-size: 1.12rem; }
  .expression-row p { font-size: .92rem; }
  .expression-row small { font-size: .77rem; }
  .intensity-label { min-height: 32px; padding-inline: 9px; font-size: .7rem; }
  .strong-language-notice summary { padding-inline: 14px; }
  .strong-language-notice p { padding-inline: 14px; }
  .list-empty { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 20px 15px; }
  .list-empty > span { width: 42px; height: 42px; font-size: 1.35rem; }
}

/* ---------------------------------------------------------------------------
   Calmer controls and a tighter page.

   The buttons carried a 4px hard drop shadow that read as chunky next to the
   rest of the type, and the secondary button was plain white on an almost-white
   page, so its edge was the only thing separating it from the background. Both
   are softened here: a real (small) shadow, a tinted secondary surface, and a
   border with enough contrast to define the shape on its own.

   Spacing is pulled in roughly a third. The old rhythm pushed every section a
   full screen apart, which made the site feel longer than it is.
--------------------------------------------------------------------------- */
:root { --section-gap: clamp(38px, 4.6vw, 62px); }

.button {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 16%, transparent);
}
.button:active { transform: translateY(0); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); }

/* Secondary: tinted rather than white-on-white, with a border that carries the
   shape by itself. */
.button:not(.primary):not(.gold) {
  background: color-mix(in srgb, var(--family-soft) 55%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--family-accent) 30%, var(--line));
  color: var(--family-deep);
}
.button:not(.primary):not(.gold):hover {
  background: color-mix(in srgb, var(--family-soft) 80%, var(--surface));
  border-color: color-mix(in srgb, var(--family-accent) 52%, var(--line));
}

/* Primary keeps a solid brand fill; white on the teal clears WCAG AA. */
.button.primary { border-width: 1.5px; }

.hero { padding: clamp(22px, 3.4vw, 38px); }
.route-card { margin-top: var(--section-gap); padding: 22px; }

/* The decorative rule that sat under the wordmark is gone with .page-line, and
   the header keeps no border of its own: two horizontal lines stacked a few
   pixels apart read as a rendering fault rather than a divider. */
.site-header { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   Hero, badge, and the study choices.

   The Arabic headline was set at up to 5.9rem. Arabic needs more vertical room
   than Latin for its ascenders and descenders, so at that size four lines fill
   the screen before the reader reaches what the site actually offers.

   The free-forever badge was a bordered box in the normal flow, so its own
   height and width pushed the buttons around and its edge competed with the
   card. It stays as a line of text, which says the same thing without owning
   layout.
--------------------------------------------------------------------------- */
.home-hero h1, .about-hero h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 8px 0 16px;
  max-width: 620px;
}
@media (max-width: 900px) {
  .home-hero h1, .about-hero h1 { font-size: clamp(1.85rem, 7vw, 2.5rem); line-height: 1.15; }
}

.free-promise {
  display: block;
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: .86rem;
  color: var(--muted);
}
.free-promise strong { color: var(--family-deep); font-weight: 800; }
.free-promise span { font-size: .86rem; }
.free-promise strong::after { content: " ·"; color: var(--muted); font-weight: 400; }

/* The circle sets its own dimensions and centres its glyph optically, rather
   than relying on the line box of whatever character happens to be inside. */
.route-icon {
  display: grid;
  place-items: center;
  line-height: 1;
}
.route-icon span {
  display: block;
  transform: none;
  line-height: 1;
  font-size: 1.55rem;
}

/* Study answers: each option gets its own colour so the four are told apart at
   a glance rather than by reading, and they press like real buttons instead of
   sitting flat. */
.choices { gap: 12px; }
.choice {
  position: relative;
  border: 1.5px solid var(--line);
  border-top-width: 1.5px;
  border-radius: 16px;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 9%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-align: center;
  justify-content: center;
}
.choice::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 5px;
  border-start-end-radius: 5px;
  border-end-end-radius: 5px;
  background: var(--choice-accent, var(--family-accent));
}
.choice:nth-child(1) { --choice-accent: #14b8a6; }
.choice:nth-child(2) { --choice-accent: #f05d62; }
.choice:nth-child(3) { --choice-accent: #6366f1; }
.choice:nth-child(4) { --choice-accent: #f6a91b; }
.choice:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--choice-accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--choice-accent) 40%, var(--line));
}
.choice:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.choice.correct { --choice-accent: var(--green); }
.choice.wrong { --choice-accent: var(--red); }

/* The three difficulty buttons are a scale, so they read as one: same shape,
   graded weight, and the colour running cool to warm with the difficulty. */
.grades .button { border-radius: 16px; box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 9%, transparent); }
.grades .button:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }

/* The study card is the page a learner spends the most time on, so its parts
   have to sit on one clear vertical line: word, sentence, answers. Anything
   empty must take no room at all, otherwise the card opens with a gap in the
   middle of it and the answers drift away from the question. */
.study-card { min-height: 0; gap: 18px; }
.study-card .example,
.study-card .translation { margin: 0; width: min(560px, 100%); }
.study-card .example { text-align: center; border-inline-start: 0; border-bottom: 3px solid var(--red); border-radius: 14px 14px 4px 4px; font-size: 1.12rem; }
.study-card .translation { text-align: center; font-size: 1.05rem; }
.study-card .choices { margin-top: 4px; }

/* The word under study is underlined inside its sentence and opens its own
   page, the same promise the word pages make. */
.study-target {
  color: var(--red);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent);
}
a.study-target:hover { text-decoration-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); border-radius: 4px; }
.study-card .translation .study-target { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }

/* The prompt row centres the word itself, not the word-plus-button pair, so a
   long headword and a short one both land on the same axis. */
.prompt-row { position: relative; width: min(620px, 100%); }
.prompt-row .study-prompt, .prompt-row .study-arabic { flex: 1 1 auto; min-width: 0; }
.prompt-row .sound { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.25rem; }
@media (max-width: 720px) {
  .prompt-row .sound { position: static; transform: none; width: 44px; height: 44px; }
  .prompt-row { flex-direction: column; gap: 10px; }
}

/* Keep the colour bar inside the button's rounded corners. */
.choice { overflow: hidden; }

/* ── The game scoreboard ──────────────────────────────────────────────────
   A round has three numbers a player checks constantly: what they have, how
   many in a row, and how long is left. Each gets its own tile with a label
   above it, and the bar under them drains so the round can be read without
   reading anything. */
.game-hud-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 520px);
  margin: 0 auto 14px;
}
.game-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 4px 12px 5px;
  border-inline-start: 3px solid var(--game-color, var(--red));
  text-align: start;
}
.game-stat > span { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .02em; }
.game-stat > strong { display: flex; align-items: baseline; gap: 3px; color: var(--ink); font: 950 1.4rem/1.1 Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; direction: ltr; }
.game-stat small { font-size: .72rem; font-weight: 850; color: var(--muted); }
.game-stat.is-streak { --game-color: var(--gold); }
.game-stat.is-streak > strong { color: #a16207; }
.game-stat.is-time { --game-color: var(--green); }

.progress-track { width: min(100%, 520px); margin: 0 auto; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #22d3ee); transition: width .9s linear; }
.is-urgent .progress-bar { background: linear-gradient(90deg, var(--red), var(--gold)); }
.is-urgent .game-stat.is-time { --game-color: var(--red); animation: hudPulse 1s ease-in-out infinite; }
.is-urgent .game-stat.is-time > strong { color: var(--red); }
@keyframes hudPulse { 0%, 100% { transform: none; } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .is-urgent .game-stat.is-time { animation: none; } .progress-bar { transition: none; } }
@keyframes hudPulse { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .is-urgent .game-stat.is-time { animation: none; } .progress-bar { transition: none; } }

.game-prompt-label { display: block; margin-bottom: 8px; font-size: .8rem; font-weight: 850; letter-spacing: .05em; color: var(--muted); }
.quiz-question { margin: 22px 0 24px; }

/* A blank in a sentence, not a row of underscores. */
.cloze-gap { display: inline-block; min-width: 4.5ch; border-bottom: 4px solid var(--red); vertical-align: baseline; }

/* The answer is not the end of the round — the sentence is the lesson. */
.game-reveal {
  width: min(560px, 100%);
  margin: 14px auto 0;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
  animation: revealIn .22s ease;
}
.game-reveal .example { margin: 0; padding: 0; border: 0; background: none; text-align: center; font-size: 1.05rem; }
.game-reveal .translation { margin: 6px 0 0; padding: 0; text-align: center; font-size: .98rem; }
.game-word-link { display: inline-block; margin-top: 10px; font-weight: 850; font-size: .92rem; }
@keyframes revealIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .game-reveal { animation: none; } }

.activity-feedback.is-right { color: var(--green); }
.activity-feedback.is-wrong { color: var(--red); }

@media (max-width: 560px) {
  .game-hud-row { gap: 6px; }
  .game-stat { padding: 3px 8px 4px; }
  .game-stat > strong { font-size: 1.15rem; }
  .game-stat > span { font-size: .64rem; }
}

/* A game page opens on the game. The header shrinks to the way back and the
   name of the round; the follow-up links move to a quiet line at the bottom. */
.game-hero { display: block; padding-bottom: 0; }
.game-hero .hero-copy { max-width: 640px; }
.game-hero h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 6px 0 4px; }
.game-hero .lede { font-size: 1rem; color: var(--muted); margin: 0; }
.game-footlinks { display: flex; justify-content: center; gap: 20px; padding-top: 8px; font-weight: 850; }

/* The guide shows where it is with dots rather than a sentence about itself. */
.coach-dots { display: flex; gap: 6px; margin-bottom: 8px; }
.coach-dots i { width: 22px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 15%, transparent); transition: background .2s ease, width .2s ease; }
.coach-dots i.now { width: 30px; background: var(--red); }
.coach-dots i.done { background: color-mix(in srgb, var(--green) 70%, transparent); }

/* ── The games shelf ──────────────────────────────────────────────────────
   Five identical cards make five games look like one. Each tile gets its own
   colour and mark so a player picks by recognition, and shows their own best
   score so returning to a game has a point. */
/* Five tiles want a deliberate shape. Three across then two leaves a row that
   reads as a pair rather than a leftover. */
.game-tiles { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 620px) { .game-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .game-tiles { grid-template-columns: repeat(3, 1fr); } }
.game-tile {
  --game-accent: var(--red);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 7%, transparent);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.game-tile:hover { transform: translateY(-3px); box-shadow: 0 7px 0 color-mix(in srgb, var(--game-accent) 22%, transparent); border-color: color-mix(in srgb, var(--game-accent) 45%, var(--line)); }
.game-tile.mode-pairs { --game-accent: #14b8a6; }
.game-tile.mode-blitz { --game-accent: #f6a91b; }
.game-tile.mode-listen { --game-accent: #6366f1; }
.game-tile.mode-sentence { --game-accent: #f05d62; }
.game-tile.mode-wordle { --game-accent: #9333ea; }

.game-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--game-accent) 14%, var(--surface));
  color: var(--game-accent);
}
.game-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.game-chip {
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--game-accent) 12%, var(--surface));
  color: color-mix(in srgb, var(--game-accent) 78%, var(--ink));
  font-size: .78rem; font-weight: 900;
}
.game-tile-copy { flex: 1 1 auto; }
.game-tile-copy h3 { margin: 0 0 5px; font-size: 1.2rem; }
.game-tile-copy p { margin: 0 0 8px; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.game-best { display: block; color: var(--muted); font-weight: 850; font-size: .82rem; }
.game-best.has-score { color: var(--game-accent); }

.game-start {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 18px;
  border-radius: 14px;
  background: var(--game-accent);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 22%, transparent);
  transition: transform .1s ease, box-shadow .1s ease;
}
.game-start:hover { color: #fff; text-decoration: none; filter: brightness(1.05); }
.game-start:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent); }
.game-start svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Each game keeps its colour from the shelf into the round itself, so the tile
   you tapped and the board you land on are recognisably the same game. */
.practice-board[data-mode="pairs"] { --game-color: #14b8a6; }
.practice-board[data-mode="blitz"] { --game-color: #f6a91b; }
.practice-board[data-mode="listen"] { --game-color: #6366f1; }
.practice-board[data-mode="sentence"] { --game-color: #f05d62; }
.practice-board[data-mode="wordle"] { --game-color: #9333ea; }
.practice-board[data-mode] .progress-bar { background: linear-gradient(90deg, var(--game-color), color-mix(in srgb, var(--game-color) 45%, #22d3ee)); }

/* ── One dropdown, three implementations ─────────────────────────────────
   The site had a native <select> wearing the browser's own arrow, a button
   with a "⌄" text glyph that sits high in its line box, and a gradient
   direction toggle — three controls that do the same job and looked like
   three different products. They now share one shell: same height, radius,
   border, fill, and one chevron drawn the same way and centred the same way.
   The direction toggle keeps its gradient, because it is the one control that
   changes what the question *is* rather than which words it draws from. */

:root { --control-h: 48px; --control-radius: 14px; }

.select,
.filter-trigger {
  min-height: var(--control-h);
  height: var(--control-h);
  box-sizing: border-box;
  border: 1.5px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--surface-warm);
  color: var(--ink);
  font: 850 .95rem/1.2 inherit;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.select:hover,
.filter-trigger:hover { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); }
.select:focus-visible,
.filter-trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--red) 40%, transparent); outline-offset: 2px; }

/* The native arrow is drawn by the OS: different glyph, size and edge in every
   browser, and it ignores the page's direction. Replaced with our own, pinned
   to the inline end and centred on the control's own axis. */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-block: 0;
  padding-inline: 14px 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 17px 17px;
  background-position: left 13px center;
  text-align: start;
  text-overflow: ellipsis;
}
.select:dir(ltr) { background-position: right 13px center; }
.select::-ms-expand { display: none; }

/* The custom trigger: label and value on one baseline, caret in a fixed-width
   cell so it lands on the same axis whatever the value's length. */
.filter-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 17px;
  align-items: center;
  gap: 9px;
  padding-inline: 14px 13px;
  text-align: start;
  box-shadow: none;
}
.filter-trigger small { color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .03em; }
.filter-trigger strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-caret {
  width: 17px; height: 17px;
  display: block;
  margin: 0;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}
.filter-trigger[aria-expanded="true"] .control-caret { transform: rotate(180deg); stroke: var(--red); }
.filter-trigger[aria-expanded="true"] { border-color: var(--red); }

/* The panel is the trigger's own menu, so it starts from the trigger's edge
   and is never narrower than the control it hangs off. */
.filter-panel { border-top-width: 3px; border-top-color: var(--red); border-radius: 18px; }
.filter-trigger.compact { min-width: 0; }

/* The one deliberate exception — and it has to restate its own fill, because the
   shared shell above sets `background` and would otherwise flatten the gradient
   that makes this the control you can find without reading it. */
.direction-select {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317243a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 13px center / 17px 17px,
    linear-gradient(110deg, var(--targamaa-teal-bright) 0 54%, var(--targamaa-coral) 55% 100%);
  border-color: var(--targamaa-teal);
  color: var(--targamaa-navy-deep);
}

/* Disclosures are dropdowns too, and the browser's default triangle is another
   OS-drawn arrow that differs per platform and does not know the page is RTL.
   Same chevron, same size, same axis, rotating on open like the filter trigger. */
details > summary { list-style: none; position: relative; padding-inline-end: 30px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 2px;
  top: 50%;
  width: 17px; height: 17px;
  margin-top: -8.5px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  transition: transform .16s ease;
}
details[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  details > summary::after, .control-caret { transition: none; }
}

/* A filter bar is one control repeated four times, so the four should be the
   same size. Sized to content they came out ragged — four different widths
   reads as an accident rather than a set. The search field takes the larger
   share because it holds the longer value. */
.catalog-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}
.catalog-filters .search,
.catalog-filters .select { width: 100%; min-width: 0; }
.catalog-filters .search { height: var(--control-h); border-radius: var(--control-radius); }
@media (max-width: 900px) {
  .catalog-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-filters .search { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .catalog-filters { grid-template-columns: 1fr; }
}

/* The study bar holds the same two controls, so they get the same treatment. */
.study-top .select, .study-top .filter-trigger { width: 100%; min-width: 0; }

/* Centring these labels was tried and reverted: centring needs symmetric padding,
   and 38px on both sides of a ~185px control truncated "كل مراتب الشيوع" to
   "كل مراتب ال...". A filter that cannot show its own value is not tidier. The
   labels stay at the start, where they read in full; the equal widths above are
   what actually fixed the ragged row. */
.catalog-filters .select { padding-inline: 13px 34px; }