/* Thinkera Academy — site styles, storefront v2 (8 October 2026).
 *
 * Mobile first: the base rules are the phone layout (most students read on one) and every media query adds
 * to it with min-width. RTL first too: every direction-dependent rule uses a logical property, so the
 * English (LTR) pages mirror without a second stylesheet and without a single [dir] selector.
 *
 * Colour, type, spacing, radius and shadow are all roles from /brand/tokens.css. No hex belongs in this
 * file: a role is redefined once for dark mode there and every rule here follows for free. The only
 * literal colours below are inside rgba() shadows cast by a brand-coloured panel, where the shadow IS
 * that colour.
 *
 * Breakpoints: 641px (large phone) · 931px (the menu opens out) · 1101px (desktop).
 * Nothing interactive is under 44px, and no text on a phone is under 14px.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--tk-bg-page);
  color: var(--tk-text);
  font-family: var(--tk-font-ar);
  font-size: var(--tk-size-base);
  line-height: var(--tk-leading-body);
  letter-spacing: 0;               /* Arabic is joined: never track it */
  overflow-x: hidden;              /* a decorative circle must never make the page scroll sideways */
}
:lang(en) body, body:lang(en) { font-family: var(--tk-font-latin); line-height: 1.7; }

/* Labels (chips, meta, small print) are 14px even on a phone: read at arm's length. */
:root { --tk-size-xs: 0.875rem; }

h1, h2, h3, h4 {
  margin: 0 0 var(--tk-space-4);
  color: var(--tk-text-strong);
  line-height: var(--tk-leading-tight);
  font-weight: var(--tk-weight-semibold);
  text-wrap: balance;
}
h1 { font-size: var(--tk-size-xl); font-weight: var(--tk-weight-bold); line-height: 1.25; }
h2 { font-size: var(--tk-size-lg); line-height: 1.3; }
h3 { font-size: var(--tk-size-md); line-height: 1.4; }
p { margin: 0 0 var(--tk-space-4); max-width: var(--tk-measure); }
img, svg { max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0 0 var(--tk-space-4); padding-inline-start: 1.4em; }
li { margin-bottom: var(--tk-space-2); }
small { font-size: var(--tk-size-sm); }
code, .num, .ltr { font-family: var(--tk-font-mono); direction: ltr; unicode-bidi: isolate; }

a { color: var(--tk-text-link); text-underline-offset: 3px; }
a:hover { color: var(--tk-text-brand); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--tk-focus); outline-offset: 2px; border-radius: var(--tk-radius-sm); }

.skip {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--tk-space-4);
  background: var(--tk-bg-surface); color: var(--tk-text-brand);
  padding: var(--tk-space-3) var(--tk-space-4); border-radius: var(--tk-radius-sm); z-index: 60;
}
.skip:focus { inset-block-start: var(--tk-space-3); }

/* Read by a screen reader, never painted. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.muted { color: var(--tk-text-muted); }
.center { text-align: center; }
.narrow { max-width: var(--tk-container-narrow); margin-inline: auto; }

/* ---------------------------------------------------------------- layout */
.container, .wrap { max-width: var(--tk-container); margin-inline: auto; padding-inline: var(--tk-space-4); }
.shell { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.section { padding-block: var(--tk-space-7); }
.section.muted { background: var(--tk-bg-surface); border-block: 1px solid var(--tk-border); color: inherit; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--tk-space-5); margin-bottom: var(--tk-space-6); flex-wrap: wrap;
}
.section-head > div { min-width: 0; }
.section h2, .pagehead h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.3; margin: 0 0 var(--tk-space-2); }
.section-head p, .pagehead p { color: var(--tk-text-muted); margin: 0; }

.eyebrow {
  font-size: var(--tk-size-xs); color: var(--tk-text-link); font-weight: var(--tk-weight-bold);
  display: inline-block; margin-bottom: var(--tk-space-3);
}
.link { color: var(--tk-text-link); font-weight: var(--tk-weight-semibold); font-size: var(--tk-size-sm); }

/* ---------------------------------------------------------------- top strip and header */
.topbar {
  background: var(--tk-bg-brand); color: var(--tk-text-on-brand);
  font-size: var(--tk-size-xs); text-align: center; padding: var(--tk-space-2) var(--tk-space-4);
}

.site-header {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--tk-bg-surface); border-bottom: 1px solid var(--tk-border);
  box-shadow: var(--tk-shadow-sm);
}
.header-inner { min-height: var(--tk-header-h-sm); display: flex; align-items: center; gap: var(--tk-space-3); }
.brand-link { display: inline-flex; align-items: center; }
.logo { width: 135px; max-width: 36vw; display: block; }
/* The logo is one ink-coloured SVG. On a dark page it is inverted rather than swapped for a second
   file: one asset, so the two can never fall out of step. */
:root[data-theme="dark"] .logo { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo { filter: brightness(0) invert(1); }
}

.nav { display: none; align-items: center; gap: var(--tk-space-5); margin-inline: auto; }
.nav a { font-size: var(--tk-size-sm); color: var(--tk-text-muted); font-weight: var(--tk-weight-medium); text-decoration: none; }
.nav a.active, .nav a:hover { color: var(--tk-text-brand); }

.tools { display: flex; align-items: center; gap: var(--tk-space-2); margin-inline-start: auto; }
.iconbtn {
  border: 1px solid var(--tk-border); border-radius: var(--tk-radius-ctl);
  background: var(--tk-bg-surface); color: var(--tk-text);
  min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tk-space-2); padding-inline: var(--tk-space-3);
}
.iconbtn:hover { background: var(--tk-bg-soft); color: var(--tk-text-brand); }
.iconbtn svg, .btn svg, .mini-icon svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.langbtn { font-weight: var(--tk-weight-semibold); font-size: var(--tk-size-xs); }
.site-header .login { display: none; }

.mobilemenu {
  display: none; border-top: 1px solid var(--tk-border);
  padding: var(--tk-space-3) var(--tk-space-4); background: var(--tk-bg-surface);
}
.mobilemenu:not([hidden]) { display: block; }
.mobilemenu a { display: block; padding: var(--tk-space-3); color: var(--tk-text); text-decoration: none; }
.mobilemenu a:hover { color: var(--tk-text-brand); }

/* ---------------------------------------------------------------- buttons */
.btn {
  border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tk-space-2); border-radius: var(--tk-radius-ctl);
  padding: var(--tk-space-3) var(--tk-space-5); min-height: 44px;
  font-weight: var(--tk-weight-semibold); font-size: var(--tk-size-sm); text-decoration: none;
  background: var(--tk-action-primary-bg); color: var(--tk-action-primary-text);
  transition: background var(--tk-speed), transform var(--tk-speed);
}
.btn:hover { background: var(--tk-action-primary-bg-hover); color: var(--tk-action-primary-text); transform: translateY(-2px); }
.btn.secondary {
  background: var(--tk-action-secondary-bg); color: var(--tk-action-secondary-text);
  border-color: var(--tk-action-secondary-border);
}
.btn.secondary:hover { background: var(--tk-bg-soft); color: var(--tk-text-brand); }
.btn.small { padding: var(--tk-space-2) var(--tk-space-4); min-height: 40px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; pointer-events: none; }
.actions, .btn-row { display: flex; gap: var(--tk-space-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------- hero */
.hero { padding-block: var(--tk-space-7); overflow: hidden; }
.hero-layout { display: grid; gap: var(--tk-space-6); align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.25; margin: var(--tk-space-1) 0 var(--tk-space-4); }
.hero .accent { color: var(--tk-text-link); }
.hero p { font-size: var(--tk-size-base); color: var(--tk-text-muted); max-width: 540px; margin: 0 0 var(--tk-space-6); }

/* The art panel: a tilted card inside two rings. Decoration only — it is aria-hidden in the markup and
   says nothing that the words beside it do not. */
.hero-art {
  position: relative; min-height: 285px;
  border: 1px solid var(--tk-border); border-radius: var(--tk-radius-3xl);
  background: linear-gradient(145deg, var(--tk-bg-soft), var(--tk-bg-surface));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-art::before, .hero-art::after {
  content: ""; position: absolute; border: 2px solid var(--tk-border-strong); opacity: .45;
  border-radius: 50%; width: 380px; height: 380px;
}
.hero-art::after { width: 240px; height: 240px; }
.hero-art > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.art-inner {
  position: relative; z-index: 1; width: 62%;
  background: var(--tk-bg-surface); border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl); padding: var(--tk-space-5);
  box-shadow: var(--tk-shadow-card); transform: rotate(-4deg);
}
.art-screen {
  height: 132px; border-radius: var(--tk-radius-md);
  background: linear-gradient(135deg, var(--tk-royal-700), var(--tk-azure-600));
  display: flex; align-items: center; justify-content: center; color: var(--tk-white);
}
.art-screen svg { width: 72px; height: 72px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.art-lines { height: 12px; border-radius: var(--tk-radius-pill); background: var(--tk-bg-soft); margin-top: var(--tk-space-4); }
.art-lines.last { width: 65%; }
.float-note {
  position: absolute; z-index: 2; inset-inline-start: 3%; inset-block-end: var(--tk-space-6);
  padding: var(--tk-space-3) var(--tk-space-4); border-radius: var(--tk-radius-md);
  background: var(--tk-bg-surface); box-shadow: var(--tk-shadow-card);
  border: 1px solid var(--tk-border); font-size: var(--tk-size-xs); font-weight: var(--tk-weight-semibold);
}
.float-note.top { inset-block-end: auto; inset-block-start: var(--tk-space-6); inset-inline-start: auto; inset-inline-end: 4%; }

.hero-facts { display: flex; flex-wrap: wrap; gap: var(--tk-space-5); margin-top: var(--tk-space-6); }
.hero-facts b { display: block; font-size: var(--tk-size-lg); color: var(--tk-text-brand); line-height: 1.2; unicode-bidi: isolate; }
.hero-facts span { font-size: var(--tk-size-xs); color: var(--tk-text-muted); }

/* ---------------------------------------------------------------- grids and cards */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--tk-space-4); }
.category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cat-card, .course-card, .feature, .panel {
  background: var(--tk-bg-surface); border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl); box-shadow: var(--tk-shadow-card);
}
.cat-card {
  padding: var(--tk-space-5) var(--tk-space-4); text-decoration: none; color: inherit; display: block;
  transition: transform var(--tk-speed), border-color var(--tk-speed);
}
.cat-card:hover, .course-card:hover { transform: translateY(-4px); border-color: var(--tk-azure-600); }
.cat-icon, .feature-icon, .mini-icon {
  display: flex; align-items: center; justify-content: center;
  background: var(--tk-bg-soft); color: var(--tk-text-link);
  border-radius: var(--tk-radius-md); width: 54px; height: 54px; margin-bottom: var(--tk-space-4);
}
.cat-icon svg, .feature-icon svg { width: 27px; height: 27px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cat-card h3 { font-size: var(--tk-size-sm); margin: 0 0 var(--tk-space-1); }
.cat-card span { font-size: var(--tk-size-xs); color: var(--tk-text-muted); }

.course-card { overflow: hidden; display: flex; flex-direction: column; transition: transform var(--tk-speed), border-color var(--tk-speed); }
.course-cover {
  height: 160px; position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--tk-cover-1); color: var(--tk-cover-text);
}
.course-cover.c2 { background: var(--tk-cover-2); }
.course-cover.c3 { background: var(--tk-cover-3); }
.course-cover.c4 { background: var(--tk-cover-4); }
.course-cover.c5 { background: var(--tk-cover-5); }
.course-cover svg { width: 64px; height: 64px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.course-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip {
  position: absolute; inset-block-start: var(--tk-space-3); inset-inline-start: var(--tk-space-3); z-index: 1;
  background: var(--tk-bg-surface); color: var(--tk-text-brand);
  padding: var(--tk-space-1) var(--tk-space-3); border-radius: var(--tk-radius-pill);
  font-size: var(--tk-size-xs); font-weight: var(--tk-weight-bold); box-shadow: var(--tk-shadow-sm);
}
.chip.soon { color: var(--tk-text-muted); }
.chip.partial { color: var(--tk-warn-text); }
.course-body { padding: var(--tk-space-5); flex: 1; display: flex; flex-direction: column; }
.course-category { font-size: var(--tk-size-xs); color: var(--tk-text-link); font-weight: var(--tk-weight-semibold); }
.course-body h3 { font-size: var(--tk-size-md); line-height: 1.45; margin: var(--tk-space-2) 0; }
.course-body h3 a { color: inherit; text-decoration: none; }
.course-body h3 a:hover { color: var(--tk-text-brand); }
.course-body > p { font-size: var(--tk-size-sm); color: var(--tk-text-muted); margin: 0 0 var(--tk-space-5); flex: 1; max-width: none; }
.meta { display: flex; align-items: center; gap: var(--tk-space-4); color: var(--tk-text-muted); font-size: var(--tk-size-xs); margin-bottom: var(--tk-space-4); flex-wrap: wrap; }
.meta span { display: inline-flex; align-items: center; gap: var(--tk-space-1); }
.meta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom {
  border-top: 1px solid var(--tk-border); padding-top: var(--tk-space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--tk-space-2); flex-wrap: wrap;
}
.price { font-size: var(--tk-size-md); font-weight: var(--tk-weight-bold); color: var(--tk-text-strong); unicode-bidi: isolate; }
.price small, .price del { font-size: var(--tk-size-xs); color: var(--tk-text-muted); font-weight: var(--tk-weight-regular); }
.soon { font-size: var(--tk-size-sm); color: var(--tk-text-muted); font-weight: var(--tk-weight-semibold); }

.features .feature { padding: var(--tk-space-6); }
.feature h3 { margin: 0 0 var(--tk-space-2); }
.feature p { color: var(--tk-text-muted); font-size: var(--tk-size-sm); margin: 0; max-width: none; }

.cta {
  border-radius: var(--tk-radius-2xl); padding: var(--tk-space-6);
  background: var(--tk-bg-brand); color: var(--tk-text-on-brand);
  display: flex; align-items: center; justify-content: space-between; gap: var(--tk-space-5); flex-wrap: wrap;
}
.cta h2 { margin: 0 0 var(--tk-space-2); color: var(--tk-text-on-brand); font-size: var(--tk-size-lg); }
.cta p { margin: 0; color: var(--tk-azure-100); max-width: 60ch; }
.cta .btn { background: var(--tk-bg-surface); color: var(--tk-text-brand); }
.cta .btn:hover { background: var(--tk-bg-soft); }

/* ---------------------------------------------------------------- page head, filters, catalogue */
.pagehead { padding-block: var(--tk-space-7) var(--tk-space-5); }
.pagehead p { max-width: 690px; }

.filters { display: grid; grid-template-columns: 1fr; gap: var(--tk-space-3); margin: 0 0 var(--tk-space-4); }
.field { display: flex; flex-direction: column; gap: var(--tk-space-2); }
.field label { font-size: var(--tk-size-sm); font-weight: var(--tk-weight-semibold); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-ctl);
  padding: var(--tk-space-3) var(--tk-space-4); min-height: 44px;
  background: var(--tk-bg-surface); color: var(--tk-text);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--tk-focus); }

.pill-row { display: flex; gap: var(--tk-space-2); flex-wrap: wrap; margin: var(--tk-space-4) 0 var(--tk-space-6); }
.pill {
  padding: var(--tk-space-2) var(--tk-space-4); min-height: 40px;
  border: 1px solid var(--tk-border); border-radius: var(--tk-radius-pill);
  background: var(--tk-bg-surface); color: var(--tk-text-muted); font-size: var(--tk-size-sm);
}
.pill:hover { color: var(--tk-text-brand); border-color: var(--tk-border-strong); }
.pill.active { background: var(--tk-action-primary-bg); border-color: var(--tk-action-primary-bg); color: var(--tk-action-primary-text); }

.catalog-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tk-space-3);
  color: var(--tk-text-muted); font-size: var(--tk-size-sm); margin-bottom: var(--tk-space-4); flex-wrap: wrap;
}
.catalog-meta select { border: 0; background: transparent; color: var(--tk-text); min-height: 40px; }

.pagination { display: flex; justify-content: center; gap: var(--tk-space-2); margin-block: var(--tk-space-6); flex-wrap: wrap; }
.pagination button {
  min-width: 44px; height: 44px; background: var(--tk-bg-surface);
  border: 1px solid var(--tk-border); color: var(--tk-text); border-radius: var(--tk-radius-sm);
}
.pagination button.active { background: var(--tk-action-primary-bg); border-color: var(--tk-action-primary-bg); color: var(--tk-action-primary-text); }
.pagination button:disabled { opacity: .35; cursor: default; }

.empty { padding: var(--tk-space-7); border: 1px dashed var(--tk-border-strong); border-radius: var(--tk-radius-lg); text-align: center; color: var(--tk-text-muted); }

/* ---------------------------------------------------------------- panels, columns, contact */
.two-col { display: grid; grid-template-columns: 1fr; gap: var(--tk-space-5); }
.panel { padding: var(--tk-space-6); }
.panel h2, .panel h3 { margin-top: 0; }
.panel p { color: var(--tk-text-muted); }
.panel > :last-child { margin-bottom: 0; }

.contact-items { display: grid; gap: var(--tk-space-3); }
.contact-item {
  padding: var(--tk-space-4); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-md);
  display: flex; align-items: center; gap: var(--tk-space-3); background: var(--tk-bg-surface);
  text-decoration: none; color: inherit;
}
.contact-item:hover { border-color: var(--tk-azure-600); }
.contact-item .mini-icon { width: 42px; height: 42px; margin: 0; flex: none; border-radius: var(--tk-radius-sm); }
.contact-item span { color: var(--tk-text-muted); font-size: var(--tk-size-sm); }
/* A number or an address is a Latin run inside an Arabic line: isolate it, or the bidi algorithm
   carries its punctuation to the wrong end. */
.contact-item strong { display: block; color: var(--tk-text-strong); unicode-bidi: isolate; }
.notice, .form-note { font-size: var(--tk-size-xs); color: var(--tk-text-muted); }

/* ---------------------------------------------------------------- the course page */
.course-hero { display: grid; gap: var(--tk-space-6); align-items: start; }
.course-hero .cover { border-radius: var(--tk-radius-xl); overflow: hidden; border: 1px solid var(--tk-border); box-shadow: var(--tk-shadow-card); }
.facts { list-style: none; padding: 0; margin: 0 0 var(--tk-space-5); display: grid; gap: var(--tk-space-2); }
.facts li { display: flex; gap: var(--tk-space-2); color: var(--tk-text-muted); font-size: var(--tk-size-sm); margin: 0; }
.facts li b { color: var(--tk-text-strong); font-weight: var(--tk-weight-semibold); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--tk-space-3); }
.ticks li { display: flex; gap: var(--tk-space-3); margin: 0; }
.ticks svg { flex: none; width: 20px; height: 20px; margin-top: 5px; stroke: var(--tk-good-text); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.units { display: grid; gap: var(--tk-space-3); }
.unit {
  display: flex; align-items: center; gap: var(--tk-space-4); padding: var(--tk-space-4);
  border: 1px solid var(--tk-border); border-radius: var(--tk-radius-md); background: var(--tk-bg-surface);
}
.unit .n {
  flex: none; width: 40px; height: 40px; border-radius: var(--tk-radius-sm);
  background: var(--tk-bg-soft); color: var(--tk-text-brand);
  display: flex; align-items: center; justify-content: center; font-weight: var(--tk-weight-bold);
}
.unit .t { min-width: 0; flex: 1; }
.unit .t strong { display: block; color: var(--tk-text-strong); }
.unit .t span { font-size: var(--tk-size-xs); color: var(--tk-text-muted); }
.tag { font-size: var(--tk-size-xs); padding: 2px var(--tk-space-2); border-radius: var(--tk-radius-pill); background: var(--tk-bg-soft); color: var(--tk-text-link); white-space: nowrap; }
.tag-row { display: flex; gap: var(--tk-space-2); flex-wrap: wrap; }
.video { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--tk-radius-md); background: var(--tk-bg-quiet); display: block; }
.lessons { display: grid; gap: var(--tk-space-4); }
.price-box { display: flex; align-items: baseline; gap: var(--tk-space-3); flex-wrap: wrap; margin-bottom: var(--tk-space-4); }
.price-box .now { font-size: var(--tk-size-xl); font-weight: var(--tk-weight-bold); color: var(--tk-text-strong); unicode-bidi: isolate; }
.price-box del { color: var(--tk-text-muted); unicode-bidi: isolate; }

/* ---------------------------------------------------------------- pricing plans and forms */
.plans { display: grid; grid-template-columns: 1fr; gap: var(--tk-space-4); }
.plan {
  padding: var(--tk-space-6); background: var(--tk-bg-surface); border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl); box-shadow: var(--tk-shadow-card); display: flex; flex-direction: column;
}
.plan .amount { font-size: var(--tk-size-xl); font-weight: var(--tk-weight-bold); color: var(--tk-text-brand); unicode-bidi: isolate; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--tk-space-4); }
.form-grid .wide { grid-column: 1 / -1; }
.msg { padding: var(--tk-space-4); border-radius: var(--tk-radius-md); margin-bottom: var(--tk-space-4); }
.msg.ok { background: var(--tk-good-bg); color: var(--tk-good-text); }
.msg.bad { background: var(--tk-bad-bg); color: var(--tk-bad-text); }

/* ---------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--tk-border); background: var(--tk-bg-surface); margin-top: var(--tk-space-8); padding: var(--tk-space-7) 0 var(--tk-space-5); }
.footergrid { display: grid; grid-template-columns: 1fr; gap: var(--tk-space-6); }
.footer p { color: var(--tk-text-muted); font-size: var(--tk-size-sm); max-width: 380px; }
.footer h4 { margin: 0 0 var(--tk-space-3); }
.footer a:not(.brand-link) { display: block; margin-block: var(--tk-space-2); font-size: var(--tk-size-sm); color: var(--tk-text-muted); text-decoration: none; }
.footer a:not(.brand-link):hover { color: var(--tk-text-brand); }
/* A way to reach us: the icon stays put while a long address wraps beside it.
   Written `.footer a.foot-contact`, with the element in it, to match the (0,2,1) of
   `.footer a:not(.brand-link)` above and win on source order. `.footer .foot-contact` is only
   (0,2,0) and loses to it however far down the file it sits — which it did, and the icon stayed
   on the text's baseline instead of centring against it. */
.footer a.foot-contact { display: flex; align-items: center; gap: var(--tk-space-2); min-height: 40px; }
.footer a.foot-contact svg { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The networks. A row of 44px targets, wrapping on a phone rather than squeezing.
   It starts where every other column of the footer starts — the right on an Arabic page, the left
   on an English one — because `flex-start` is the writing direction's start, not a side. */
.social { margin-top: var(--tk-space-7); }
.social h4 { margin-bottom: var(--tk-space-3); }
.social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--tk-space-2); }
.social li { margin: 0; }
/* Scoped to .footer, and this is the whole reason the icons sat in the corner for two attempts:
   `.footer a:not(.brand-link)` is (0,2,1) and `.social a` only (0,1,1), so the generic footer-link
   rule won and set `display:block`. The button was never a flex container, so align-items and
   justify-content did nothing and the 20px icon fell to the inline start — the TOP RIGHT on an
   Arabic page. Measured: every icon 11px right and 11px up from its button's centre, all five
   identical, which is what told us it was the box and not the drawing. */
.footer .social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid var(--tk-border); border-radius: var(--tk-radius-ctl);
  background: var(--tk-bg-surface); color: var(--tk-text-muted);
  transition: color var(--tk-speed), border-color var(--tk-speed), background var(--tk-speed);
}
.footer .social a:hover { color: var(--tk-text-brand); border-color: var(--tk-azure-600); background: var(--tk-bg-soft); }
/* A bare `display:block` svg would still sit on a text baseline inside the button. */
.footer .social svg { display: block; }
.social svg { width: 20px; height: 20px; }

.copyright {
  border-top: 1px solid var(--tk-border); margin-top: var(--tk-space-6); padding-top: var(--tk-space-4);
  color: var(--tk-text-muted); font-size: var(--tk-size-xs);
  display: flex; justify-content: space-between; gap: var(--tk-space-3); flex-wrap: wrap;
}

/* ---------------------------------------------------------------- chat */
.chat-launch {
  position: fixed; inset-block-end: var(--tk-space-5); inset-inline-end: var(--tk-space-5); z-index: 40;
  width: 58px; height: 58px; border: 0; border-radius: 18px;
  background: var(--tk-action-primary-bg); color: var(--tk-action-primary-text);
  box-shadow: 0 12px 30px rgba(17, 57, 114, .26);
}
.chat-launch svg { stroke: currentColor; fill: none; width: 25px; height: 25px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-box {
  position: fixed; inset-block-end: 92px; inset-inline-end: var(--tk-space-5);
  width: min(355px, calc(100vw - 32px)); background: var(--tk-bg-surface);
  border: 1px solid var(--tk-border); border-radius: var(--tk-radius-xl); z-index: 41;
  box-shadow: var(--tk-shadow-float); overflow: hidden;
}
.chat-box[hidden] { display: none; }
.chat-head { background: var(--tk-bg-brand); color: var(--tk-text-on-brand); padding: var(--tk-space-4); display: flex; justify-content: space-between; gap: var(--tk-space-2); align-items: center; }
.chat-head strong { color: inherit; }
.chat-head button { background: transparent; color: inherit; border: 0; font-size: 23px; line-height: 1; min-width: 44px; min-height: 44px; }
.chat-body { padding: var(--tk-space-5); }
.chat-body > p { margin: 0 0 var(--tk-space-4); color: var(--tk-text-muted); font-size: var(--tk-size-sm); }
.chat-options { display: grid; gap: var(--tk-space-2); }
.chat-options button { background: var(--tk-bg-soft); color: var(--tk-text); padding: var(--tk-space-3); border: 0; border-radius: var(--tk-radius-sm); text-align: start; min-height: 44px; }
.chat-options button:hover { color: var(--tk-text-brand); }
.chat-form { display: flex; gap: var(--tk-space-2); margin-top: var(--tk-space-4); }
.chat-form input { min-width: 0; flex: 1; border: 1px solid var(--tk-border); background: var(--tk-bg-page); color: var(--tk-text); padding: var(--tk-space-3); border-radius: var(--tk-radius-sm); min-height: 44px; }
.chat-form button { background: var(--tk-action-primary-bg); color: var(--tk-action-primary-text); border: 0; border-radius: var(--tk-radius-sm); padding-inline: var(--tk-space-4); min-width: 44px; }
.chat-form svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-reply { font-size: var(--tk-size-sm); background: var(--tk-bg-soft); padding: var(--tk-space-3); border-radius: var(--tk-radius-sm); margin-top: var(--tk-space-3); }

/* ---------------------------------------------------------------- breakpoints */
@media (min-width: 641px) {
  .container, .wrap { padding-inline: var(--tk-space-5); }
  .logo { width: 150px; }
  .hero { padding-block: var(--tk-space-8); }
  .hero-art { min-height: 320px; }
  .section { padding-block: var(--tk-space-8); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-col, .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: 1.2fr 1fr 1fr; }
  .footergrid { grid-template-columns: 2fr 1fr 1fr; }
  .footergrid > :nth-child(4) { grid-column: span 1; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagehead { padding-block: var(--tk-space-8) var(--tk-space-6); }
  .cta { padding: var(--tk-space-7); }
  .cta h2 { font-size: var(--tk-size-xl); }
}

@media (min-width: 931px) {
  .header-inner { min-height: var(--tk-header-h); gap: var(--tk-space-6); }
  .logo { width: 170px; }
  .nav { display: flex; }
  .menubtn { display: none; }
  .mobilemenu { display: none !important; }
  .site-header .login { display: inline-flex; }
  .hero-layout { grid-template-columns: 1.08fr .92fr; }
  .hero-art { min-height: 420px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .footergrid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .course-hero { grid-template-columns: 1.4fr 1fr; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1101px) {
  .container, .wrap { padding-inline: var(--tk-space-6); }
}

/* The two legal pages (سياسة الخصوصية، شروط الاستخدام): one long readable column, numbered sections.
   Text is what matters here, so the measure is capped and nothing competes with it for attention. */
.tk-legal { max-width: 760px; }
.tk-legal-updated { color: var(--tk-text-muted); font-size: .95rem; margin: 0; }
.tk-legal-lead { font-size: 1.05rem; }
.tk-legal h2 { font-size: 1.15rem; margin: var(--tk-space-6) 0 var(--tk-space-2); }
.tk-legal h2:first-of-type { margin-top: var(--tk-space-4); }
.tk-legal-num { color: var(--tk-text-muted); font-variant-numeric: tabular-nums; }
.tk-legal p, .tk-legal li { color: var(--tk-text-muted); line-height: 1.9; }
.tk-legal ul { margin: 0 0 var(--tk-space-3); padding-inline-start: 1.3rem; }
.tk-legal li { margin-bottom: .35rem; }
.tk-legal-closing { margin-top: var(--tk-space-6); padding-top: var(--tk-space-4); border-top: 1px solid var(--tk-border); }

@media print {
  .site-header, .topbar, .footer, .chat-launch, .chat-box, .mobilemenu, .skip { display: none !important; }
}

/* ---------------------------------------------------------------- «ليه تختارنا؟» (/whyus, 17 October 2026) */
.tk-why-hero {
  margin-block: var(--tk-space-6) 0; padding: var(--tk-space-7) var(--tk-space-5);
  border-radius: var(--tk-radius-2xl); background: var(--tk-bg-brand); color: var(--tk-text-on-brand);
}
.tk-why-hero h1 { color: var(--tk-text-on-brand); font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.35; max-width: 24ch; }
.tk-why-hero p { color: var(--tk-azure-100); font-size: var(--tk-size-md); max-width: 60ch; }
.tk-why-kicker { display: block; font-size: var(--tk-size-xs); font-weight: var(--tk-weight-semibold); color: var(--tk-azure-100); margin-bottom: var(--tk-space-3); }
.tk-why-steps { list-style: none; padding: 0; margin: var(--tk-space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--tk-space-2); }
.tk-why-steps li {
  margin: 0; padding: var(--tk-space-1) var(--tk-space-4); border-radius: var(--tk-radius-pill);
  background: rgba(255, 255, 255, .16); font-size: var(--tk-size-sm); font-weight: var(--tk-weight-medium);
}
.tk-why-cards { display: grid; grid-template-columns: 1fr; gap: var(--tk-space-4); }
.tk-why-card { padding: var(--tk-space-6); display: flex; flex-direction: column; gap: var(--tk-space-2); }
.tk-why-card h3 { color: var(--tk-text-brand); margin: 0; }
.tk-why-card p { margin: 0; }
.tk-why-card .tk-why-line { color: var(--tk-text-strong); font-size: var(--tk-size-base); font-weight: var(--tk-weight-semibold); }
.tk-why-n {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tk-bg-soft); color: var(--tk-text-link); font-weight: var(--tk-weight-bold);
}
.tk-why-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tk-space-4); }
.tk-why-figures .feature { padding: var(--tk-space-5) var(--tk-space-4); text-align: center; display: flex; flex-direction: column; gap: var(--tk-space-1); }
.tk-why-figures b { font-size: var(--tk-size-lg); color: var(--tk-text-link); line-height: 1.3; unicode-bidi: isolate; }
.tk-why-figures span { font-size: var(--tk-size-sm); color: var(--tk-text-muted); }
.tk-why-aud { display: grid; grid-template-columns: 1fr; gap: var(--tk-space-4); }
.tk-why-aud .panel.now { background: var(--tk-bg-soft); }
.tk-why-aud .panel.next { border: 2px dashed var(--tk-border-strong); box-shadow: none; }
.tk-why-tag {
  display: inline-block; margin-bottom: var(--tk-space-3); padding: 2px var(--tk-space-3); border-radius: var(--tk-radius-pill);
  font-size: var(--tk-size-xs); font-weight: var(--tk-weight-bold); background: var(--tk-bg-brand); color: var(--tk-text-on-brand);
}
.tk-why-aud .next .tk-why-tag { background: var(--tk-warn-bg); color: var(--tk-warn-text); }
.tk-why-aud li { color: var(--tk-text-muted); }
.tk-why-quotes { display: grid; gap: var(--tk-space-3); }
.tk-why-quotes q {
  display: block; quotes: "«" "»"; padding: var(--tk-space-3) var(--tk-space-5); border-radius: var(--tk-radius-lg);
  background: var(--tk-bg-surface); border: 1px solid var(--tk-border); border-inline-start: 4px solid var(--tk-azure-600);
  font-weight: var(--tk-weight-semibold); font-size: var(--tk-size-md);
}
:lang(en) .tk-why-quotes q { quotes: "“" "”"; }
@media (min-width: 641px) {
  .tk-why-hero { padding: var(--tk-space-8) var(--tk-space-7); }
  .tk-why-cards, .tk-why-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-why-card.wide { grid-column: 1 / -1; }
  .tk-why-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}