/*
 * rtl-guards.css
 *
 * The four design-system rules theme.json cannot express, plus the component
 * classes used by patterns. Nothing here is decorative — every rule exists
 * because theme.json has no equivalent.
 *
 * See plan/theme-plan.md §1.3 and plan/design-system.md.
 */

/* ------------------------------------------------------------------ *
 * GUARD 1 — never letter-space Arabic
 *
 * Arabic is a connected script. Positive tracking breaks the joins between
 * letterforms. theme.json sets a default of 0 and hides the control, but a
 * block-level style or a plugin stylesheet can still reintroduce it, so this
 * is a hard guard rather than a default.
 * ------------------------------------------------------------------ */

html[dir="rtl"],
html[dir="rtl"] *,
[lang="ar"],
[lang="ar"] * {
	letter-spacing: 0 !important;
}

/* ------------------------------------------------------------------ *
 * GUARD 2 — Arabic line-height floor
 *
 * Arabic ascenders, descenders and diacritics need vertical room. theme.json
 * sets 1.9 at the root, but block-level overrides can drop below the 1.7
 * floor. Prose blocks are pinned.
 * ------------------------------------------------------------------ */

html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] dd,
html[dir="rtl"] figcaption,
html[dir="rtl"] blockquote {
	line-height: 1.9;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
	line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * GUARD 3 — warm accent takes a DARK label, never white
 *
 * White on #FFB27A is 1.76:1 — a hard fail. Ground on the same fill is
 * 10.94:1. theme.json can define one button appearance; this variation has
 * to be a CSS rule.
 * ------------------------------------------------------------------ */

.wp-block-button.is-style-accent .wp-block-button__link,
.has-accent-background-color,
.alrasly-accent {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--ground) !important;
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
	filter: brightness(1.06);
}

/* ------------------------------------------------------------------ *
 * GUARD 4 — muted text only on the base ground
 *
 * --text-3 clears AA on --ground (4.54) but drops to 4.29 on --ground-alt and
 * 4.03 on --card, where it is large-text-only. Inside those surfaces, muted
 * text is promoted to --text-2.
 * ------------------------------------------------------------------ */

.has-ground-alt-background-color .has-text-3-color,
.has-card-background-color .has-text-3-color,
.alrasly-card .has-text-3-color {
	color: var(--wp--preset--color--text-2) !important;
}

/* ------------------------------------------------------------------ *
 * GUARD 5 — 44px touch targets
 *
 * Every interactive element gets at least a 44x44 hit area even where the
 * visible control is smaller. theme.json has no hit-area concept.
 * ------------------------------------------------------------------ */

.wp-block-navigation__container a,
.wp-block-button__link,
.wp-block-social-link a,
.alrasly-tap {
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
}

/* ------------------------------------------------------------------ *
 * Component classes used by patterns and template parts
 * ------------------------------------------------------------------ */

/* Caption boxes — from Alrasly's own Reel captions. Solid fill, 6px radius,
   display face, hugging the text. Never outlined, never letter-spaced. */
.alrasly-caption {
	display: inline-block;
	background-color: var(--wp--preset--color--caption);
	color: var(--wp--preset--color--text);
	border-radius: var(--wp--custom--radius--caption);
	padding: 0.35em 0.7em;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

.alrasly-caption--accent {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ground);
}

/* The stack aligns to the inline-start edge so the ragged edge stays
   intentional under RTL. Order carries meaning — see design-system §7. */
.alrasly-caption-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

/* Cards — 12px radius, no border on dark. Separation comes from the fill. */
.alrasly-card {
	background-color: var(--wp--preset--color--card);
	border: none;
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--30);
}

/* Secondary action — 24px pill */
.wp-block-button.is-style-pill .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill);
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--text-2);
	color: var(--wp--preset--color--text);
}

/* External-link marker. The arrow is a symbol, not a directional control —
   it must NOT mirror under RTL. Logical properties keep it inline-end. */
.alrasly-external__mark {
	margin-inline-start: 0.25em;
	font-size: 0.85em;
	display: inline-block;
}

/* Sections alternate ground colours. The alternation IS the separator —
   no divider rules between sections. */
.alrasly-section--alt {
	background-color: var(--wp--preset--color--ground-alt);
}

/* Screen-reader-only, used by the consultancy link's new-window notice. */
.alrasly-sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * Editor canvas
 *
 * The site is Arabic-first; an English admin locale renders the canvas LTR,
 * so content looks right while authoring and wrong on the front end.
 * ------------------------------------------------------------------ */

.editor-styles-wrapper {
	direction: rtl;
	text-align: start;
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * HERO — right-aligned content column and the reserved photo slot
 *
 * The caption stack already aligns to the inline-start edge, but that only
 * reads as deliberate when the surrounding column is also inline-start
 * aligned. A constrained group centres its children by default, which made
 * the ragged edge look like an accident rather than a choice.
 * ------------------------------------------------------------------ */

.alrasly-hero__content {
	text-align: start;
}

.alrasly-hero__content .wp-block-buttons {
	justify-content: flex-start;
}

/* Reserved photo slot. A fixed 4:5 portrait ratio so the real photograph can
   be dropped in later without the copy beside it shifting. */
/* A slot waiting on a photo, not a missing image.
 *
 * It was a dashed hollow rectangle on `--ground-alt` — the universal "asset failed
 * to load" signal, sitting in the hero at 42% width. The page read as broken rather
 * than as unfinished, which is a much more expensive impression.
 *
 * Solid brand-tinted panel instead: it holds the composition, it is obviously
 * deliberate, and it stops shouting. The real fix is the photo — 20 minutes,
 * `plan/START-HERE.md` §1 — at which point this rule stops applying. */
.alrasly-photo-slot {
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-image:
		radial-gradient(120% 90% at 78% 12%, rgba(124, 58, 245, 0.30) 0%, transparent 58%),
		linear-gradient(200deg, #241a55 0%, var(--wp--preset--color--card) 62%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--wp--custom--radius--card, 12px);
}

.alrasly-photo-slot__label {
	margin: 0;
	color: var(--wp--preset--color--text-3);
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0;
}

/* On one column the photo leads visually but should not push the copy below
   the fold, so the slot is capped. */
@media (max-width: 781px) {
	.alrasly-photo-slot {
		max-width: 18rem;
		margin-inline: auto;
	}
}

/* ══════════════════════════════════════════════════════════════════ *
 * HOMEPAGE COMPOSITION
 *
 * The layout classes plan/design-system.md §Layout describes and
 * plan/homepage-reference.html demonstrates. They live here rather than in
 * theme.json because theme.json expresses TOKENS, not COMPOSITION — grids,
 * card shapes and the relationships between them have no theme.json
 * equivalent. That gap is why the first build diverged from the design.
 * ══════════════════════════════════════════════════════════════════ */

/* Shared type roles -------------------------------------------------- */
.alrasly-eyebrow {
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-3);
	margin: 0 0 0.75rem;
	letter-spacing: 0;
}

.alrasly-lede {
	max-width: 34rem;
	line-height: 1.9;
	margin-block-end: 1.75rem;
}

/* ── «ارجع للحاسبة» — the recurring return link (inc/tools-backlink.php) ──
 * A link, not a control: body face, body size, the secondary text colour, an
 * underline that appears on hover. It closes a section, so it takes the
 * section's rhythm (a paragraph's top margin) and nothing else. On a phone
 * the anchor itself is the 44px target — the paragraph does not grow. */
.alrasly-backlink {
	margin-block: 1.25rem 0;
	font-size: 0.9375rem;
}
.alrasly-backlink a {
	color: var(--wp--preset--color--text-2);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color 160ms ease, border-color 160ms ease;
}
.alrasly-backlink a:hover,
.alrasly-backlink a:focus-visible {
	color: var(--wp--preset--color--text);
	border-block-end-color: currentColor;
}
@media (max-width: 599.98px) {
	.alrasly-backlink a {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}
/* The target. The header is not sticky, so the margin is only breathing room
   above the calculator when the jump lands. */
#calculator { scroll-margin-block-start: 1.5rem; }
/* Smooth, unless the reader has asked for no motion. Set on html because a
   fragment jump scrolls the document, not the section. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}


/* Measured prose starts where the heading starts ---------------------
 *
 * At 1440px on the home page: heading left 125, lede left 443. 318px of
 * daylight between a heading and the sentence that continues it — on every
 * section of the home page, in both languages, and the same on .alrasly-entity
 * (left 472 against the same heading).
 *
 * Nothing chose that offset. Core's constrained layout gives every direct child
 *   margin-left: auto !important; margin-right: auto !important;
 *   max-width: var(--wp--style--global--content-size), which is 1180px here.
 * The heading takes the full 1180 and its auto margins settle at 66.8px a side.
 * The lede is capped at 34rem for measure and .alrasly-entity at 60ch, so their
 * auto margins settle at 385px and 414px — each one centring itself inside a
 * band its own heading fills. One rule, three widths, three different left
 * edges.
 *
 * .alrasly-answer joined them on the tools index, 266px adrift, and it is the
 * worst of the three to lose: its accent edge means "this is the answer to the
 * question in the H1", and an edge that does not start where the H1 starts is
 * not pointing at anything.
 *
 * All three already declare `margin: … 0 …` further down, which is exactly
 * this intent written and then lost: an ordinary shorthand cannot beat core's
 * !important. Plain `margin-inline-start: 0 !important` is not the fix either —
 * it lands at the padding edge, 66.8px OUTSIDE the heading rather than level
 * with it. Both were measured before this was written.
 *
 * So reproduce the offset the heading's own auto margin arrives at, computed
 * rather than guessed. A percentage margin resolves against the containing
 * block's inline size, making this exactly (container − content-size) / 2; max()
 * collapses it to zero below 1180px, and in any narrower container — a hero
 * column, a card — where these classes also appear and where flush-start was
 * always the right answer.
 */
.alrasly-lede,
.alrasly-entity,
.alrasly-answer,
.alrasly-asec > .wp-block-group > p,
.alrasly-gsec > .wp-block-group > p,
.alrasly-gsec > .wp-block-group > figure,
.alrasly-gsec > .wp-block-group > .wp-block-buttons,
.alrasly-asec > .wp-block-group > figure,
/* A wp:html block lands as a bare <div>, so the measured-prose classes inside a
   card — the callout is the common one — are direct children of the constrained
   group too, and drift exactly like a paragraph. Found on the English indemnity
   page: the «This is Bahrain» callout, which the whole page depends on being
   impossible to miss, sat 266px in from its own H1. */
.alrasly-gsec > .wp-block-group > .alrasly-callout,
.alrasly-asec > .wp-block-group > .alrasly-callout {
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-inline-end: auto !important;
}

.alrasly-link2 a {
	color: var(--wp--preset--color--text-2);
	font-size: 0.9rem;
	text-decoration: none;
	/* 44px hit area. These read as inline text links but they are the only
	   route out of several sections, so they are controls, not prose. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.alrasly-link2 a:hover,
.alrasly-link2 a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.alrasly-more { margin-block-start: 1.15rem; }

/* Hero --------------------------------------------------------------- */
.alrasly-squiggle {
	width: 10.5rem;
	height: 0.75rem;
	display: block;
	margin: 0.4rem 0 1.25rem;
	color: var(--wp--preset--color--accent);
}

.alrasly-caption--light {
	background-color: #ffffff;
	color: #12102e;
}

.alrasly-caption--outline {
	background-color: transparent;
	color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 2px #ffffff;
}

.alrasly-caption--sm { font-size: 1.5rem; }

.alrasly-cta-row {
	display: flex;
	align-items: center;
	gap: 1.15rem;
	flex-wrap: wrap;
}

.alrasly-cta-row p { margin: 0; }

/* Cards — one shape, reused. Radius and fill come from the tokens. ---- */
.alrasly-toolcard,
.alrasly-session,
.alrasly-price-card,
.alrasly-plat {
	background-color: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	display: block;
	text-decoration: none;
}

/* 2. Tools ----------------------------------------------------------- */
.alrasly-tools-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.85rem;
}

/* Card anchors inherit their colour. Without this they take the link colour
   from theme.json elements.link — in the standalone reference, browser blue. */
.alrasly-toolcard,
.alrasly-plat,
.alrasly-toolcard h3 { color: inherit; }

.alrasly-toolcard { padding: 1.15rem 1.25rem; }
.alrasly-toolcard h3 { font-size: 1rem; font-weight: 400; margin: 0 0 0.35rem; line-height: 1.6; color: var(--wp--preset--color--text); }
.alrasly-toolcard p { font-size: 0.78rem; color: var(--wp--preset--color--text-3); margin: 0; }
.alrasly-toolcard:hover, .alrasly-toolcard:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }

/* 3. Course ---------------------------------------------------------- */
.alrasly-modules { list-style: none; padding: 0; margin: 0 0 1.6rem; }

.alrasly-modules li {
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--wp--preset--color--ground-alt);
	font-size: 0.95rem;
	line-height: 1.7;
}

.alrasly-modules li:last-child { border-bottom: none; }
.alrasly-modules b { color: var(--wp--preset--color--accent); font-weight: 400; margin-inline-end: 0.6rem; }
.alrasly-modules span { color: var(--wp--preset--color--text-3); font-size: 0.78rem; display: block; margin-top: 0.2rem; }

.alrasly-stats { display: flex; gap: 1.6rem; margin: 0 0 1.6rem; flex-wrap: wrap; }
.alrasly-stat b {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	color: var(--wp--preset--color--accent);
	font-weight: 500;
	display: block;
	line-height: 1.4;
}
.alrasly-stat span { font-size: 0.78rem; color: var(--wp--preset--color--text-3); }

.alrasly-price-card { padding: 1.6rem; }
.alrasly-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.4rem;
	margin: 0;
	line-height: 1.3;
	color: var(--wp--preset--color--text);
}
.alrasly-price small { font-size: 0.9rem; color: var(--wp--preset--color--text-2); font-family: var(--wp--preset--font-family--body); }
.alrasly-facts { list-style: none; padding: 0; margin: 1.25rem 0 1.4rem; }
.alrasly-facts li { font-size: 0.85rem; color: var(--wp--preset--color--text-2); line-height: 2.1; }

/* 4. Visual slot — same reservation idea as the hero photo ------------ */
.alrasly-visual-slot {
	background-color: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	min-height: 13rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
}

.alrasly-visual-slot p { margin: 0; color: var(--wp--preset--color--text-3); font-size: 0.8rem; }

/* 5. Content --------------------------------------------------------- */
.alrasly-vids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.15rem; }
.alrasly-vid { background-color: var(--wp--preset--color--card); border-radius: 12px; aspect-ratio: 9 / 16; }
.alrasly-platforms { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.alrasly-plat { padding: 0.7rem 1.15rem; font-size: 0.85rem; min-height: 44px; display: inline-flex; align-items: center; gap: 0.4rem; }
/* colour intentionally omitted — the chip inherits, matching the reference's
   `.al .plat{color:inherit}` fix. Setting text-2 here diverged from it. */
.alrasly-plat b { color: var(--wp--preset--color--text); font-weight: 400; }

/* 6. Coaching -------------------------------------------------------- */
.alrasly-sessions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin-bottom: 1.5rem; }
.alrasly-session { padding: 1.25rem 1.4rem; }
.alrasly-session h3 { font-size: 0.95rem; font-weight: 400; margin: 0 0 0.5rem; color: var(--wp--preset--color--text); }
.alrasly-session .alrasly-amount { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; color: var(--wp--preset--color--text); margin: 0 0 0.25rem; }
.alrasly-session p { font-size: 0.78rem; color: var(--wp--preset--color--text-3); margin: 0; line-height: 1.8; }

/* Ghost button — the secondary CTA style. Never accent. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	border: 1.5px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--text);
}

/* 7. Blog ------------------------------------------------------------ */
.alrasly-posts .wp-block-post { padding: 1rem 0; border-bottom: 1px solid var(--wp--preset--color--ground-alt); }
.alrasly-posts .wp-block-post:last-child { border-bottom: none; }
.alrasly-posts .wp-block-post-title { font-size: 1rem; font-weight: 400; line-height: 1.7; margin: 0 0 0.3rem; }
.alrasly-posts .wp-block-post-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	/* 44px hit area — a post title is the only control in its row. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.alrasly-posts .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.alrasly-post-meta { font-size: 0.78rem; color: var(--wp--preset--color--text-3); margin: 0; }

/* 8. Newsletter ------------------------------------------------------ */
/* The one lede that IS centred on purpose — the newsletter block is a centred
   composition. !important only because the alignment rule above is. */
.alrasly-news .alrasly-lede { margin-inline: auto !important; }
.alrasly-news-row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.alrasly-news-row input {
	flex: 1 1 18rem;
	max-width: 18rem;
	min-height: 44px;
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	padding: 0.8rem 1rem;
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: 1rem;
}
.alrasly-news-row input::placeholder { color: var(--wp--preset--color--text-3); }
.alrasly-btn-brand {
	background-color: var(--wp--preset--color--brand);
	color: #ffffff;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 1.6rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 500;
}

/* Mobile — every grid collapses; nothing is allowed to scroll sideways */
@media (max-width: 781px) {
	.alrasly-tools-grid,
	.alrasly-sessions { grid-template-columns: 1fr; }
	.alrasly-vids { grid-template-columns: repeat(2, 1fr); }
	.alrasly-stats { gap: 1.15rem; }
	.alrasly-news-row input { max-width: none; }
}


/* ══════════════════════════════════════════════════════════════════ *
 * SECTION 3 — THE COURSE
 * Mirrors plan/course-section-reference.html. Class names match that file
 * deliberately, scoped under .alrasly-course, so the two can be diffed
 * without translating between naming schemes.
 * ══════════════════════════════════════════════════════════════════ */

.alrasly-course { --crs-card-2: #221A52; --crs-line: #2A2160; }
.alrasly-course * { box-sizing: border-box; }
.alrasly-course a { text-decoration: none; color: inherit; }

/* Intro row — centred, not stretched. With the fit lists the copy column is
   the taller of the two at most widths; stretching the card to match left a
   gap under its CTA. */
.alrasly-course .crs-top {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: 2.75rem;
	align-items: center;
	margin-bottom: 2.75rem;
}

.alrasly-course .crs-cap {
	display: inline-block;
	margin: 0;                 /* it is an h2 now - drop the UA 0.83em block margin */
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	font-weight: 500;
	background-color: var(--wp--preset--color--caption);
	color: #ffffff;
	padding: 0.5rem 1.15rem;
	border-radius: 8px;
	line-height: 1.55;
}

.alrasly-course .crs-lede { font-size: 1rem; color: var(--wp--preset--color--text-2); line-height: 1.95; margin: 1.25rem 0 0; max-width: 29rem; }
.alrasly-course .crs-note {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-3);
	line-height: 1.9;
	margin: 1.4rem 0 0;
	max-width: 29rem;
	border-inline-start: 2px solid var(--wp--preset--color--brand);
	padding-inline-start: 1rem;
}

/* Who it's for / who it isn't */
.alrasly-course .crs-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.75rem; }
.alrasly-course .crs-fit h4 { font-size: 0.875rem; font-weight: 500; margin: 0 0 0.6rem; color: var(--wp--preset--color--text); }
.alrasly-course .crs-fit ul { list-style: none; padding: 0; margin: 0; }
.alrasly-course .crs-fit li {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-2);
	line-height: 1.85;
	padding: 0.3rem 0;
	padding-inline-start: 1rem;
	position: relative;
}
.alrasly-course .crs-fit li::before { content: '—'; position: absolute; inset-inline-start: 0; color: var(--wp--preset--color--text-3); }
.alrasly-course .crs-fit div:last-child li { color: var(--wp--preset--color--text-3); }

/* Price card */
.alrasly-course .crs-buy { background-color: var(--wp--preset--color--card); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
/* Was a labelled gradient standing in for a picture. It now holds the real
   cover, rendered from build/thumbs/course-cover.html. The aspect ratio is
   declared so the card reserves the space before the image arrives and the
   price below it never jumps. */
.alrasly-course .crs-preview {
	aspect-ratio: 16 / 9;
	background: linear-gradient(160deg, #2E2467, #1B1442);
	overflow: hidden;
}
.alrasly-course .crs-preview picture,
.alrasly-course .crs-preview img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.alrasly-course .crs-buy-body { padding: 1.5rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.alrasly-course .crs-price { font-family: var(--wp--preset--font-family--display); font-size: 2.5rem; font-weight: 500; margin: 0; line-height: 1.25; color: var(--wp--preset--color--text); }
.alrasly-course .crs-price small { font-size: 0.94rem; color: var(--wp--preset--color--text-2); font-family: var(--wp--preset--font-family--body); }
.alrasly-course .crs-once { font-size: 0.75rem; color: var(--wp--preset--color--text-3); margin: 0.25rem 0 1.25rem; }

.alrasly-course .crs-facts { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.alrasly-course .crs-facts li {
	font-size: 0.8125rem; color: var(--wp--preset--color--text-2); line-height: 1.75;
	padding: 0.45rem 0; border-bottom: 1px solid var(--crs-line);
	display: flex; gap: 0.6rem; align-items: baseline;
}
.alrasly-course .crs-facts li:last-child { border-bottom: none; }
.alrasly-course .crs-facts b { color: var(--wp--preset--color--text); font-weight: 500; font-family: var(--wp--preset--font-family--display); font-size: 0.94rem; min-width: 2.1rem; }

/* The section's one accent moment. Dark label on accent — never white. */
.alrasly-course .crs-cta {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ground);
	font-size: 0.94rem; padding: 0.875rem; border-radius: 10px;
	text-align: center; min-height: 44px; display: flex;
	align-items: center; justify-content: center; margin-top: auto; font-weight: 500;
}
.alrasly-course .crs-guar { font-size: 0.7rem; color: var(--wp--preset--color--text-3); text-align: center; margin: 0.75rem 0 0; line-height: 1.7; }

/* The qualifying step above the course button. Quieter than the button on
   purpose: it is a step BEFORE the purchase, not a competing call. The two
   links are the two free things — the readiness check and the free lesson. */
.alrasly-course .crs-try {
	margin: 0 0 0.85rem;
	font-size: 0.8rem;
	line-height: 1.8;
	color: var(--wp--preset--color--text-2);
	text-align: center;
}
.alrasly-course .crs-try a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.alrasly-course .crs-try a:hover { text-decoration-thickness: 2px; }
.alrasly-course .crs-try > span { margin-inline: 0.35rem; color: var(--wp--preset--color--text-3); }

/* Module cards */
.alrasly-course .crs-modhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.15rem; gap: 1rem; flex-wrap: wrap; }
.alrasly-course .crs-modhead h3 { font-family: var(--wp--preset--font-family--display); font-size: 1.2rem; font-weight: 500; margin: 0; color: var(--wp--preset--color--text); }
.alrasly-course .crs-modhead span { font-size: 0.75rem; color: var(--wp--preset--color--text-3); }

.alrasly-course .crs-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
.alrasly-course .crs-mod {
	position: relative; background-color: var(--wp--preset--color--card);
	border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem; overflow: hidden;
	min-height: 9.9rem; display: flex; flex-direction: column;
}
.alrasly-course .crs-mod:nth-child(4),
.alrasly-course .crs-mod:nth-child(5) { background-color: var(--crs-card-2); }

/* The ghosted numeral carries the sequence a numbered list used to carry. */
.alrasly-course .crs-num {
	position: absolute; top: -0.875rem; inset-inline-end: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 5.5rem; font-weight: 500; color: #ffffff; opacity: 0.05;
	line-height: 1; pointer-events: none;
}

.alrasly-course .crs-mod h4 { font-size: 1rem; font-weight: 500; margin: 0 0 0.5rem; line-height: 1.6; position: relative; color: var(--wp--preset--color--text); }
.alrasly-course .crs-mod p { font-size: 0.8125rem; color: var(--wp--preset--color--text-2); line-height: 1.85; margin: 0 0 0.875rem; position: relative; }
.alrasly-course .crs-pill {
	margin-top: auto; align-self: flex-start; font-size: 0.7rem;
	color: var(--wp--preset--color--accent);
	border: 1px solid rgba(255, 178, 122, 0.35);
	border-radius: 20px; padding: 0.25rem 0.75rem; position: relative;
}

@media (max-width: 900px) {
	.alrasly-course .crs-top { grid-template-columns: 1fr; gap: 1.6rem; }
	.alrasly-course .crs-buy { order: 2; }
	.alrasly-course .crs-intro { order: 1; }
	.alrasly-course .crs-mods { grid-template-columns: 1fr; }
	.alrasly-course .crs-fit { grid-template-columns: 1fr; gap: 1rem; }
}

/* Header wordmark — replaces wp:site-title. Sized by height so the tightened
   viewBox controls the width; 44px keeps it a comfortable tap target on mobile. */
.alrasly-logo { display: inline-flex; align-items: center; min-height: 44px; }
.alrasly-logo img { height: 44px; width: auto; display: block; }
@media (max-width: 781px) { .alrasly-logo img { height: 36px; } }

/* ═══════════════════════════════
 * GRATUITY PAGE  —  /tools/gratuity
 *
 * The site's SEO front door (~36,000 searches/month, plan/seo-geo-strategy.md).
 * Composition only — every colour is a theme.json token, per the Layout section of
 * plan/design-system.md ("tokens in theme.json, composition in CSS").
 *
 * The page is mostly PROSE, which is unusual here, so these rules carry more
 * typographic weight than the homepage's. Two constraints drive the whole block:
 * Arabic line-height never below 1.7, and tables must stay readable at 390px
 * without the page ever scrolling sideways.
 * ═══════════════════════════════ */

/* Rule 8 — body copy is inline-start, never centred. Stated explicitly because a
   prose page is exactly where a stray text-align:center gets added later. */
.alrasly-gsec :where(p, li, td, th, h1, h2, h3) { text-align: start; }

.alrasly-gsec h1 {
	font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
	line-height: 1.45;
	margin: 0 0 1rem;
}
.alrasly-gsec h2 {
	font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.6rem);
	line-height: 1.55;
	margin: 0 0 0.85rem;
}
.alrasly-gsec h2:not(:first-child) { margin-top: 2.5rem; }
.alrasly-gsec p { line-height: 1.9; margin: 0 0 1rem; }

/* THE EXTRACTABLE ANSWER. The first 60 words are what search and AI assistants
   lift, so it is set larger than body copy and sits directly under the H1 with
   nothing between them. Do not demote it to a normal paragraph. */
.alrasly-answer {
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
	line-height: 1.9;
	color: var(--wp--preset--color--text);
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	padding-inline-start: 1.25rem;
	margin: 0 0 2rem;
}

/* Bordered note block. Originally the gratuity page's draft gate — that gate was
   removed on 5 Sep 2026 when the rules were verified against Resolution 109/2023,
   so the class no longer marks anything unpublishable.

   STILL IN USE, so do not delete the rule: the academy page uses it for the
   refund answer. The name is now wrong for what it does — worth renaming to
   .alrasly-note if that page is ever rebuilt. */
.alrasly-gate {
	background: rgba(255, 178, 122, 0.12);
	border: 1px dashed var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--card, 12px);
	padding: 1rem 1.25rem;
	margin: 0 0 2rem;
}
.alrasly-gate p { margin: 0; font-size: 0.9375rem; line-height: 1.85; }
.alrasly-gate code {
	background: rgba(0, 0, 0, 0.18);
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
	font-size: 0.85em;
}

/* TABLES. Every rule set on this page is a table because tables get lifted whole
   by AI assistants. They are also the one element most likely to force sideways
   scroll on a phone, so each one scrolls INSIDE its own figure. */
.alrasly-table { margin: 0 0 1.5rem; overflow-x: auto; }
.alrasly-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	overflow: hidden;
	font-size: 0.9375rem;
}
.alrasly-table th,
.alrasly-table td {
	padding: 0.85rem 1rem;
	line-height: 1.8;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.alrasly-table thead th {
	background: rgba(255, 255, 255, 0.04);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}
.alrasly-table td { color: var(--wp--preset--color--text-2); }
.alrasly-table tbody tr:last-child td { border-bottom: 0; }

/* One card shape, reused — same fill and radius as the homepage cards, no border.
   The example, the callouts and the author block are all the same object. */
.alrasly-example,
.alrasly-callout,
.alrasly-author {
	background: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
}
.alrasly-example p,
.alrasly-callout p,
.alrasly-author p { margin: 0 0 0.5rem; line-height: 1.85; }
.alrasly-example p:last-child,
.alrasly-callout p:last-child,
.alrasly-author p:last-child { margin-bottom: 0; }

.alrasly-example__label,
.alrasly-author__label {
	font-size: 0.75rem;
	letter-spacing: 0;              /* never letter-space Arabic */
	color: var(--wp--preset--color--text-3);
	text-transform: none;
}
/* The worked example's total is the section's single accent moment. */
.alrasly-example__calc {
	font-size: 1.0625rem;
	direction: ltr;                 /* an equation reads left-to-right */
	text-align: start;
}
.alrasly-example__calc strong { color: var(--wp--preset--color--accent); }

/* The example is stated to the fils. Published guidance rounds to two places,
   so the page says which convention it is using rather than leaving a reader
   to think one of the two is wrong. */
.alrasly-example__note { color: var(--wp--preset--color--text-2); font-size: 0.85rem;
  line-height: 1.75; margin-block-start: 0.5rem; }

/* CALLOUTS carry the two facts that actually cost people money: claiming from only
   one party, and the Article 107 forfeiture list. Accent edge, not an accent fill —
   a filled accent block would need dark text and would fight the section's own
   accent moment. */
/* No accent edge. .alrasly-answer owns that device — it means "this is the answer
   to the question in the H1" — and repeating it on callouts spent the signal. The
   callout already carries the shared card fill; a 1px top rule separates the warn
   variant without restating the edge. */
.alrasly-callout { border-block-start: 1px solid rgba(255, 178, 122, 0.34); }
.alrasly-callout--warn { border-block-start-color: rgba(124, 58, 245, 0.5); }
.alrasly-callout ul { margin: 0.5rem 0 0; padding-inline-start: 1.25rem; }
.alrasly-callout li { line-height: 1.85; margin-bottom: 0.25rem; color: var(--wp--preset--color--text-2); }

/* Visible authorship — a GEO requirement, not decoration. */
.alrasly-author { display: flex; flex-direction: column; gap: 0.25rem; }
.alrasly-author a { color: var(--wp--preset--color--accent); }

.alrasly-disclaimer { font-size: 0.875rem; line-height: 1.85; }

/* The calculator MOUNT CONTAINER — .alrasly-tool[data-tool], selected by
   mount.js. Not to be confused with .alrasly-toolcard, the homepage card; the two
   shared a class name until 4 Sep 2026 and every card rule was matching this too.
   Reserves height so the section does not collapse and then
   jump when React hydrates — the tool is client-rendered and everything around it
   is not. */
.alrasly-gsec .alrasly-tool { margin-top: 1.5rem; min-height: 240px; }

/* 44px touch targets, even where the control looks smaller.
   min-height is INERT on an inline box, which is what a link is by default — the
   previous form of this rule did nothing at all. See design-system.md §4.
   Applies to links that are CONTROLS: list titles and standalone CTAs.
   Inline links inside prose are exempt by design — a 44px hit area on every link
   in a paragraph destroys the line rhythm.

   CARD LINKS ARE ALSO EXEMPT, and this is the trap the first version fell into.
   .alrasly-toolrow and .alrasly-offer are anchors that WRAP BLOCK CONTENT — an h3,
   a description and a meta line. Turning them into `inline-flex; align-items:center`
   laid those three children out in a ROW, so the title ran straight into the
   description ("احسب مكافأة نهاية الخدمةحسب المادة") and the meta collided with the
   line before it. Measured on /tools: all three children sat at y=1062-1068.

   They do not need the rule anyway — a card is already far taller than 44px, and it
   gets that height from its own padding. `:has()` catches any future card link
   without having to remember to add its class here; the explicit classes stay so the
   layout still holds in a browser that does not support :has(), where the whole
   selector would otherwise be dropped.

   .alrasly-article__link is the same class of thing and was caught by exactly the
   trap this comment warns about: the article index laid out as inline-flex, which
   collapsed the cover to 0x0 because a grid child cannot size inside an inline
   flex row. The :has() rule below could not save it — this selector computes to
   (0,4,7) and outranks anything reasonable a component stylesheet can write. */
.alrasly-gsec a:not(p a):not(li a):not(td a):not(.alrasly-toolrow):not(.alrasly-toolcard):not(.alrasly-offer):not(.alrasly-article__link):not(.alrasly-croute) {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/* Belt and braces: any link containing block content lays out as a block. */
.alrasly-gsec a:has(h2, h3, h4, p, div) {
	display: block;
	align-items: initial;
}

@media (max-width: 781px) {
	.alrasly-answer { padding-inline-start: 1rem; }
	.alrasly-example,
	.alrasly-callout,
	.alrasly-author { padding: 1rem 1.125rem; }
	.alrasly-table th,
	.alrasly-table td { padding: 0.7rem 0.75rem; font-size: 0.875rem; }
}

/* The theme does not set a global border-box, and these are the only blocks on the
   page with their own padding. Without this they measure contentSize PLUS their
   padding and overhang the text column: measured 1228px against the 1180px that the
   headings and tables sit at, so every card edge missed the column by 24px a side. */
.alrasly-answer,
.alrasly-gate,
.alrasly-example,
.alrasly-callout,
.alrasly-author,
.alrasly-table { box-sizing: border-box; }

/* ══════════════════════════════
 * HOMEPAGE — plan/homepage-final.md amendments
 * ══════════════════════════════ */

/* The caption stack is now an h1. Everything that made it look right already
   lives on .alrasly-caption-stack; these three declarations only undo what the
   browser's default h1 would otherwise impose on it. Without the font-size
   reset the h1's own 2em would cascade into the spans' em-based padding and
   inflate every caption box. */
h1.alrasly-caption-stack {
	margin: 0;
	font-size: 1rem;        /* neutral; each span carries has-heading-font-size */
	font-weight: 400;       /* .alrasly-caption sets its own 500 */
}

/* The entity paragraph. Reads as prose, not as a component - no card, no fill,
   no accent. It sits below the hero columns and is the last thing in the hero
   section, so it needs the separation a section boundary would have given it. */
.alrasly-entity {
	margin: 2.25rem 0 0;
	max-width: 60ch;                                  /* a measure, not the full column */
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--wp--preset--color--text-2);
	text-align: start;
}
.alrasly-entity strong { color: var(--wp--preset--color--text); font-weight: 500; }

/* Tool cards now carry a description line as well as the duration, so the two
   need to be distinguishable: the description is readable body text, the meta
   line stays the quiet muted note it was. --text-3 is AA on --ground only, and
   these cards sit on --ground-alt, so the description takes --text-2.
   (design-system.md quick reference, item 7.) */
.alrasly-toolcard { display: flex; flex-direction: column; }
.alrasly-toolcard__desc {
	font-size: 0.8125rem !important;
	color: var(--wp--preset--color--text-2) !important;
	line-height: 1.75;
	margin: 0 0 0.6rem !important;
}
.alrasly-toolcard__meta { margin-top: auto !important; }

@media (max-width: 781px) {
	.alrasly-entity { margin-top: 1.75rem; }
}

/* ══════════════════════════════
 * ABOUT PAGE  —  /about  (plan/about-final.md)
 *
 * The site's author page. Mostly narrative prose, so the typography carries more
 * of the work here than anywhere else; the two machine-readable blocks that
 * bracket the story - .alrasly-entity and .alrasly-facts - are set apart from it
 * visually so a reader can find them as fast as a crawler can.
 * ══════════════════════════════ */

.alrasly-asec :where(p, li, h1, h2, h3) { text-align: start; }   /* Rule 8 */

.alrasly-asec h1 {
	font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
	line-height: 1.45;
	margin: 0 0 1.25rem;
}
.alrasly-asec h2 {
	font-size: clamp(1.35rem, 1.05rem + 1vw, 1.75rem);
	line-height: 1.5;
	/* ~3x the paragraph gap above, tight below: the space belongs to the heading it
	   introduces, not to the paragraph it follows. */
	margin: 3.4rem 0 0.6rem;
}
.alrasly-asec h2:first-child { margin-top: 0; }
/* THE READING MEASURE. 1ch is ~12px in this face, so the old 68ch ran ~816px and
   the audit found 7 paragraphs over 700 on this page. 54ch is ~648px.

   The measure is right and it stays. What was wrong was where the box LANDED,
   and that is now fixed by the alignment rule above — 332px of drift became 0 on
   every .alrasly-gsec page and 17px here.

   THE REMAINING 17px IS THIS PAGE'S TIMELINE, and it is a design question rather
   than a bug. .alrasly-beat gives each h2 `padding-inline-start: 2.15rem` to hang
   its dot and its connecting line in, and box-sizing is content-box, so the
   heading's BOX is 1214.4px against the 1180px every other block gets. Its box
   edge and its text edge are 34.4px apart; the prose lands between them.

   Closing it means deciding whether the prose hangs off the timeline (indent the
   prose to the heading's text) or the timeline hangs off the column (leave the
   prose where it is). That is a call about how the About page's device should
   read, not a defect to patch, and 17px is not worth guessing at. */
.alrasly-asec p { line-height: 1.95; margin: 0 0 1.15rem; max-width: 54ch; }

/* The opening paragraph of each section carries slightly more weight, so a reader
   scanning headings can drop into a section and get its shape from one line. */
.alrasly-asec h2 + p { font-size: 1.0625rem; color: var(--wp--preset--color--text); }

/* The entity paragraph on this page is the site's single most important block
   for citation, so unlike the homepage's it is set at reading size rather than
   as a quiet note, and it keeps the accent edge to mark it as the summary. */
.alrasly-entity--about {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	color: var(--wp--preset--color--text);
	/* Card fill, not a fourth accent edge — .alrasly-answer owns that device. */
	background-color: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	padding: 1.25rem 1.4rem;
	margin: 0 0 2rem;
	box-sizing: border-box;
}

/* Pull quotes are the story sections' visual moment - Rule 7, so that neither
   section is a bare run of paragraphs under a heading. */
/* Pull quotes are BLOCKS, not floated notes. They were a thin orange rule beside a
   short line, which read as detached marginalia rather than as the two most
   important sentences on the page.
   The border is on the inline-START edge, which under RTL is the RIGHT edge —
   logical properties, so it stays correct if the writing mode ever changes.
   Brand rather than accent: accent is reserved for one moment per section, and on
   this page that is the entity paragraph's edge. */
.alrasly-pull {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
	line-height: 1.65;
	color: var(--wp--preset--color--text);
	border-inline-start: 4px solid var(--wp--preset--color--brand);
	padding: 1.35rem 1.75rem 1.35rem 1.5rem;
	padding-inline-start: 1.75rem;
	background: var(--wp--preset--color--ground-alt);
	border-radius: 0 12px 12px 0;
	max-width: 44ch;
	box-sizing: border-box;
}

/* The space around a pull quote needs the section selector to win. WordPress's
   .wp-block-group.is-layout-flow > * sets margin-block-start on every child at
   specificity 0,2,0 — the same as .alrasly-asec h2 (which wins on source order) but
   MORE than a bare .alrasly-pull, so 3rem here was silently reduced to the ordinary
   18px paragraph gap. Measured before: 18px above, identical to plain prose. */
.alrasly-asec .alrasly-pull {
	margin-block: 3rem;
}

/* The facts block. A list, but set as a card so it reads as a unit and gets
   lifted as one. Two columns where there is room; one on a phone. */
.alrasly-facts {
	list-style: none;
	margin: 0;
	padding: 1.5rem;
	background: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem 1.5rem;
	box-sizing: border-box;
}
.alrasly-facts li {
	position: relative;
	padding-inline-start: 1rem;
	line-height: 1.85;
	color: var(--wp--preset--color--text-2);
	font-size: 0.9375rem;
}
.alrasly-facts li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.75em;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Offer cards - same card object as the tool cards, so the family holds. */
.alrasly-offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.alrasly-offer {
	background: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	padding: 1.15rem 1.25rem;
	color: inherit;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.alrasly-offer h3 {
	font-size: 1rem; font-weight: 500; margin: 0 0 0.4rem;
	line-height: 1.6; color: var(--wp--preset--color--text);
}
.alrasly-offer p {
	font-size: 0.8125rem; line-height: 1.75; margin: 0;
	color: var(--wp--preset--color--text-2);
}
.alrasly-offer:hover, .alrasly-offer:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px;
}

.alrasly-outro {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
	margin: 0 0 1.5rem;
}

/* The photo is not shot yet. Reserve the slot at its final proportion so
   dropping the real image in later moves nothing around it. The alt text is
   recorded in the slot itself so it cannot be lost between now and then -
   plan/about-final.md is explicit that it must not ship empty or as "صورة". */
.alrasly-photo-slot--about { max-width: 420px; aspect-ratio: 4 / 5; }
.alrasly-photo-slot__alt {
	font-size: 0.7rem;
	color: var(--wp--preset--color--text-3);
	margin-top: 0.35rem;
	direction: ltr;
	text-align: start;
}

@media (max-width: 781px) {
	.alrasly-facts { grid-template-columns: 1fr; padding: 1.15rem; }
	.alrasly-offers { grid-template-columns: 1fr; }
	.alrasly-entity--about, .alrasly-pull { padding-inline-start: 1rem; }
	.alrasly-photo-slot--about { max-width: none; }
}

/* Specificity fix. `.alrasly-asec p` sets the prose measure at 68ch and outranks
   a bare .alrasly-pull / .alrasly-entity--about class, so both were rendering at
   the full prose width - the pull quotes measured 1036px and read as ordinary
   paragraphs in a heavier face rather than as pull quotes. Scoping them to the
   section restores the intended measure. */
.alrasly-asec .alrasly-pull { max-width: 34ch; }
.alrasly-asec .alrasly-entity--about { max-width: 62ch; }

/* ═══ SHARED CONTENT-PAGE SYSTEM ═══
 * .alrasly-gsec is no longer gratuity-only - it is the section class every
 * content page uses (tools index, blog, contact, content, the tool pages).
 * The rules above it (headings, tables, cards, callouts, 44px targets, the
 * 390px breakpoint) all apply. These are the additions the list pages need. */

/* Tool rows on /tools. A list, not a grid: the order carries the page's whole
   SEO argument, and a grid invites the eye to graze rather than read down. */
.alrasly-toollist { display: flex; flex-direction: column; gap: 0.85rem; }
.alrasly-toolrow {
	display: block;
	background: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	padding: 1.15rem 1.35rem;
	color: inherit;
	text-decoration: none;
	box-sizing: border-box;
}
.alrasly-toolrow h3 {
	font-size: 1.0625rem; font-weight: 500; margin: 0 0 0.4rem;
	line-height: 1.6; color: var(--wp--preset--color--text);
}
.alrasly-toolrow__desc {
	font-size: 0.875rem; line-height: 1.8; margin: 0 0 0.5rem;
	color: var(--wp--preset--color--text-2);
}
.alrasly-toolrow__meta {
	font-size: 0.75rem; margin: 0; color: var(--wp--preset--color--text-3);
}
.alrasly-toolrow:hover, .alrasly-toolrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px;
}

/* Q&A blocks. Question-phrased h3s, no FAQPage schema - deprecated 7 May 2026. */
.alrasly-qa h3 {
	font-size: 1rem; font-weight: 500; line-height: 1.7;
	margin: 1.5rem 0 0.4rem; color: var(--wp--preset--color--text);
}
.alrasly-qa h3:first-child { margin-top: 0; }
.alrasly-qa p {
	margin: 0; line-height: 1.9; font-size: 0.9375rem;
	color: var(--wp--preset--color--text-2); max-width: 68ch;
}

.alrasly-gsec .alrasly-lede {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	color: var(--wp--preset--color--text-2);
	margin: 0 0 1.5rem;
}
.alrasly-gsec .alrasly-outro {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	line-height: 1.7; margin: 0 0 1.5rem; max-width: 46ch;
}

/* Platform cards on /content. Same card object as everywhere else; the internal
   label/value rhythm is what makes three platforms comparable at a glance. */
.alrasly-plats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.alrasly-plat-card {
	background: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	padding: 1.25rem 1.4rem;
	box-sizing: border-box;
}
.alrasly-plat-card h3 {
	font-size: 1.0625rem; font-weight: 500; margin: 0 0 0.75rem;
	line-height: 1.6; color: var(--wp--preset--color--text);
}
.alrasly-plat-card p {
	font-size: 0.875rem; line-height: 1.85; margin: 0 0 0.5rem;
	color: var(--wp--preset--color--text-2);
}
.alrasly-plat-card p:last-child { margin-bottom: 0; }
.alrasly-plat-card strong { color: var(--wp--preset--color--text); font-weight: 500; }
.alrasly-gsec .alrasly-link2 a { color: var(--wp--preset--color--accent); text-decoration: none; }
@media (max-width: 781px) { .alrasly-plats { grid-template-columns: 1fr; } }

/* Article index (/blog). A LIST, not a grid - it launches with one article and a
   grid holding one card advertises the emptiness. Reads correctly at 1 or at 30;
   switch to a grid past ~12. */
.alrasly-postlist .wp-block-post {
	padding: 1.4rem 0;
	border-block-end: 1px solid rgba(255, 255, 255, 0.07);
}
.alrasly-postlist .wp-block-post:first-child { padding-block-start: 0; }
.alrasly-postlist .wp-block-post:last-child { border-block-end: 0; padding-block-end: 0; }

.alrasly-postlist .wp-block-post-title {
	font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);
	line-height: 1.6;
	margin: 0 0 0.5rem;
}
.alrasly-postlist .wp-block-post-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.alrasly-postlist .wp-block-post-title a:hover,
.alrasly-postlist .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--accent);
}
.alrasly-postlist .wp-block-post-excerpt {
	margin: 0 0 0.5rem;
	max-width: 68ch;
}
.alrasly-postlist .wp-block-post-excerpt__excerpt {
	font-size: 0.9375rem;
	line-height: 1.85;
	color: var(--wp--preset--color--text-2);
}
/* The date is a credibility signal on financial and legal writing, not decoration -
   undated content reads as stale and gets passed over for citation. Quiet, present. */
.alrasly-postlist .alrasly-postmeta,
.alrasly-postlist .wp-block-post-date {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-3);
	margin: 0;
}

/* Touch targets on the article list. The global `.alrasly-gsec a { min-height:44px }`
   does NOTHING here: min-height has no effect on an inline box, and a link is inline
   by default. Measured 30px on a single-line title - under the 44px minimum.
   inline-flex gives the box a height to honour while leaving the text where it was;
   two-line titles are already taller and are unaffected. */
.alrasly-postlist .wp-block-post-title a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/* "For you / not for you" columns on the booking page. Two lists side by side so
   the disqualifying column is read, not skipped - it is doing real work here,
   saving both parties a wasted 25 BHD session. */
.alrasly-fit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 0 0 1.5rem; }
.alrasly-fit__col {
	background: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card, 12px);
	padding: 1.25rem 1.4rem;
	box-sizing: border-box;
}
.alrasly-fit__col h3 {
	font-size: 1rem; font-weight: 500; margin: 0 0 0.75rem;
	color: var(--wp--preset--color--text);
}
.alrasly-fit__col ul { margin: 0; padding-inline-start: 1.1rem; }
.alrasly-fit__col li {
	font-size: 0.9375rem; line-height: 1.85; margin-bottom: 0.4rem;
	color: var(--wp--preset--color--text-2);
}
.alrasly-fit__col li:last-child { margin-bottom: 0; }
/* A difference in kind reads better as a difference in ground than as a stripe. */
.alrasly-fit__col--not {
	background-color: rgba(124, 58, 245, 0.09);
	box-shadow: inset 0 0 0 1px rgba(124, 58, 245, 0.22);
}
.alrasly-fit__col a { color: var(--wp--preset--color--accent); }

/* The Bookly form sits inside a normal section. Bookly ships its own stylesheet;
   this only gives the mount breathing room and a scroll anchor that clears the
   sticky header. */
#booking-form { scroll-margin-block-start: 90px; }
.alrasly-gsec .bookly-form { margin-block-start: 1.5rem; }

@media (max-width: 781px) {
	.alrasly-fit { grid-template-columns: 1fr; }
}

/* ═══ COURSE DESCRIPTION — sections fill the CONTENT COLUMN ═══
 *
 * THE PREVIOUS APPROACH, AND WHY IT WAS WRONG.
 * The sales copy lives inside Tutor's page container, which caps it at 848px. The
 * first attempt broke the wrapper out to the viewport with
 * `margin-inline: calc(50% - 50vw); width: 100vw`, so the sections could bleed edge
 * to edge like every other page.
 *
 * That percentage resolves against the CONTAINING BLOCK, not the viewport. The
 * course page is two columns, so the container is the 848px content column sitting
 * at x=513, not a centred 1180px one. Measured at 1440: 50% of 848 = 424 against
 * 50vw = 720, giving -296px on each side. The wrapper landed at 217 -> 1657 — 232px
 * past the right edge of a 1425px document, with 296px of dead space on the left
 * where it slid under the sidebar, and the instructor card overlapping the
 * "الدورة لمن" list.
 *
 * A viewport-wide bleed is simply the wrong shape for a two-column LMS page: there
 * is no full width to bleed into, because the sidebar owns part of it.
 *
 * WHAT IT DOES NOW. The sections fill the content column and stop there. They keep
 * their alternating grounds, so the rhythm survives — the band is just column-wide
 * rather than page-wide. Nothing is positioned against the viewport, so
 * `overflow-x: clip` on the body is no longer needed and has been removed with it;
 * that also clears the phantom scrollWidth it left behind. */
.alrasly-course-desc {
	margin-inline: 0;
	width: auto;
	max-width: 100%;
}

/* The inner group still carries the site's contentSize so that if Tutor's column
   ever gets wider than 1180 the measure stays readable. Below that — which is the
   case at every width today — it simply fills the column, and the padding is what
   holds the text off the section edge. */
.alrasly-course-desc .alrasly-gsec > .wp-block-group {
	max-width: var(--wp--style--global--content-size, 1180px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	box-sizing: border-box;
}

/* Tutor's own type scale bleeds into the description otherwise. */
.alrasly-course-desc .alrasly-gsec :where(p, li, td, th) { font-size: inherit; }

/* ═══ MOBILE MENU TOGGLES — 44px touch targets ═══
 * Core ships the open and close buttons as bare 24x24 icon buttons with zero
 * padding. Every menu item inside the overlay already measures 44px, so these two
 * were the only controls on the site under the target size at 390px - and they are
 * the first thing a phone visitor touches on every page.
 *
 * These are BUTTONS, not inline links, so min-height would work here. min-block-size
 * is used anyway for consistency with the rest of the file and because it is the
 * logical-property form: the site is RTL and this stays correct if the writing mode
 * ever changes. See the touch-target trap in plan/design-system.md - min-height on an
 * INLINE element is what was inert, not on a flex button.
 *
 * The icon keeps its own size; the button grows around it, so nothing shifts
 * visually except the hit area. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
}

/* ═══ CTA ALIGNMENT — the outro and its button must share an edge ═══
 *
 * Measured on /tools at 1440: the section wrapper ran 48->1378, the outro sat at
 * 374->1051 with margin-inline 315.8px, and the button's left edge was at 1160
 * with the .wp-block-buttons box at 123->1303. The paragraph read as centred and
 * the button as start-aligned — two different alignments in one CTA.
 *
 * Neither was authored that way. WordPress's constrained layout gives EVERY direct
 * child `margin-left:auto; margin-right:auto` plus the content size as max-width.
 * .wp-block-buttons takes the full 1180 content box, so its contents begin at the
 * box's start edge. .alrasly-outro overrides max-width to 46ch for a readable
 * measure — and the inherited auto margins then centre that narrower box instead of
 * aligning it. The narrower the measure, the wider the mismatch.
 *
 * The fix pins the outro's START edge to the content box rather than centring it,
 * while keeping the 46ch measure. The calc is the same offset WordPress itself uses
 * to centre the content box inside a wider wrapper, (100% - contentSize) / 2, so the
 * two boxes begin at exactly the same place; max() keeps it at 0 on narrow screens
 * where the wrapper is already narrower than the content size.
 *
 * Start, not centre, because design-system.md Rule: text is right-aligned and only
 * section headings may be centred. */
/* The doubled class is load-bearing. WordPress prints global-styles-inline-css in
   wp_head AFTER the theme stylesheet link, and its constrained-layout rule
   .wp-block-group.is-layout-constrained > :where(...) { margin-left:auto;
   margin-right:auto } ties this selector at 0,2,0 - so source order handed it to
   WordPress and the paragraph stayed centred. Repeating the class takes it to 0,3,0
   and wins without !important. Measured before: margin-inline 315.797px both sides. */
.alrasly-gsec .alrasly-outro.alrasly-outro,
.alrasly-outro.alrasly-outro {
	/* !important because global-styles-inline-css is printed AFTER this file and its
	   constrained-layout auto-margins win on source order at every specificity we can
	   reach with a class. Measured: the doubled class alone still computed 315.797px.
	   This is the same reason the four GUARD rules at the top of this file use it. */
	margin-inline: max(0px, calc((100% - var(--wp--style--global--content-size, 1180px)) / 2)) auto !important;
	text-align: start;
}

/* ═══ TOOL CARDS — title, description and meta are stacked blocks ═══
 *
 * The anchor is a card wrapping an h3, a description and a meta line. The
 * touch-target rule above used to turn it into a centred flex ROW, which ran the
 * three together. They are blocks again; this gives them their vertical rhythm and
 * the card its own hit area, which is far larger than 44px on its own. */
.alrasly-toolrow {
	display: block;
	padding: 1.25rem 1.375rem;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--wp--custom--radius--card, 12px);
	background: var(--wp--preset--color--card);
	text-decoration: none;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.alrasly-toolrow + .alrasly-toolrow { margin-top: 0.875rem; }

.alrasly-toolrow:hover,
.alrasly-toolrow:focus-visible {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--ground-alt);
}

.alrasly-toolrow > h3 {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	line-height: 1.4;
	color: var(--wp--preset--color--text);
}

.alrasly-toolrow__desc {
	display: block;
	margin: 0 0 0.75rem;
	line-height: 1.85;
	color: var(--wp--preset--color--text-2);
	max-width: 68ch;
}

/* The meta line is the last thing in the card and must not run into the sentence
   above it — it was colliding for the same flex-row reason. */
.alrasly-toolrow__meta {
	display: block;
	margin: 0;
	font-size: 0.875rem;
	letter-spacing: 0;
	color: var(--wp--preset--color--text-3);
}

.alrasly-toollist { display: block; }

/* ═══ FAQ ACCORDIONS ═══
 *
 * Every FAQ is a <details>/<summary> pair, closed by default.
 *
 * WHY NATIVE <details> AND NOT JAVASCRIPT. The answer must be in the served HTML.
 * An accordion that injects its answers on click ships a page whose content is not
 * there for anything that does not run scripts — which is most AI crawlers, and the
 * reason these pages carry long answers in the first place. <details> keeps every
 * answer in the DOM and in view-source; the browser hides it with its own styles.
 * It is also keyboard-operable and screen-reader-announced with no code from us.
 *
 * The <h3> stays INSIDE the <summary> so the document outline is unchanged — the
 * questions are still headings, which is what makes them extractable. The spec
 * allows heading content inside summary. */
.alrasly-qa details {
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.alrasly-qa details:first-of-type {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.alrasly-qa summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-block-size: 44px;
	padding: 0.875rem 0;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--text);
}

/* Safari/WebKit draws its own triangle through a pseudo-element. */
.alrasly-qa summary::-webkit-details-marker { display: none; }

.alrasly-qa summary > h3 {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	font-weight: 500;
	flex: 1 1 auto;
	color: inherit;
}

/* The chevron is drawn from a border so it needs no icon font or SVG request. It
   is marked aria-hidden by being a pseudo-element, which assistive tech ignores —
   <details> announces its own expanded state. */
.alrasly-qa summary::after {
	content: '';
	flex: 0 0 auto;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-inline-end: 2px solid var(--wp--preset--color--text-3);
	border-block-end: 2px solid var(--wp--preset--color--text-3);
	transform: rotate(45deg);
	transition: transform 160ms ease;
}

.alrasly-qa details[open] summary::after { transform: rotate(-135deg); }

.alrasly-qa summary:hover,
.alrasly-qa details[open] summary { color: var(--wp--preset--color--text); }

.alrasly-qa summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.alrasly-qa__a {
	padding: 0 0 1.125rem;
	color: var(--wp--preset--color--text-2);
}

.alrasly-qa__a > :first-child { margin-top: 0; }
.alrasly-qa__a > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.alrasly-qa summary::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════ *
 * TABLE TREATMENT — sitewide
 *
 * Audited: 24 tables across 10 pages, measured in the browser rather than read
 * from the markup. Two things the audit CORRECTED about the reported symptoms:
 *
 *   - Headers are NOT centred. `text-align` computes to `start` on every th in
 *     all 24 tables. The الأداة column only reads as centred because the two
 *     columns are unequal widths, so the second column's start edge lands near
 *     the middle of the table. Fixed by giving the label column a fixed width,
 *     which removes the illusion, not by changing alignment.
 *   - No numeric column is centred beside a right-aligned label. `misaligned`
 *     was false on all 24.
 *
 * What the audit DID find, and what this block fixes:
 *   - Row separators at rgba(255,255,255,0.07) on 20 of 24 tables — invisible.
 *   - Numeric columns rendering with proportional figures, so digits do not line
 *     up down a column.
 *   - No fixed label column, so the first column's width changes per table and
 *     rows do not align down the page.
 *   - One header carrying caption text — handled in the markup, not here.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
	/* The zebra surface. --card-2 is NOT a theme.json palette token — the palette
	   is ground / ground-alt / card / brand / accent / caption / text / text-2 /
	   text-3 and nothing else. It is defined here because it is a presentational
	   surface for striping, not a colour an author ever picks. One step lifted
	   from --card (#1B1442); --text-2 measures 6.4 on it, so body text in a
	   striped row still clears AA. */
	--alrasly-card-2: #211952;
}

/* Separators readable without becoming rules in their own right. 0.07 alpha was
   below the point where the eye can track a row across a wide table; 0.16 reads
   as a division at 1440 and still recedes behind the text. */
.alrasly-table th,
.alrasly-table td {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* The header row is the one place a heavier division is correct — it separates
   labels from data rather than data from data. */
.alrasly-table thead th {
	background: rgba(255, 255, 255, 0.07);
	border-bottom: 2px solid rgba(255, 255, 255, 0.28);
	color: var(--wp--preset--color--text);
	font-weight: 600;
	text-align: start;
}

/* Zebra striping. Applied to the body only, so the header keeps its own fill. */
.alrasly-table tbody tr:nth-child(2n) td {
	background: var(--alrasly-card-2);
}

/* THE LABEL COLUMN. Fixed so rows align down the page across every table on a
   page, and so a two-column table does not put its second column's start edge in
   the middle of the layout. Percentage rather than px so it still behaves when
   the table is inside the narrower course column. */
.alrasly-table th:first-child,
.alrasly-table td:first-child {
	inline-size: 34%;
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

/* A table whose first column is an empty spacer header (the "" pattern used by
   the comparison tables) needs it narrower — it holds a row label, not a phrase. */
.alrasly-table table.is-comparison th:first-child,
.alrasly-table table.is-comparison td:first-child {
	inline-size: 26%;
}

/* NUMERIC COLUMNS. Marked in the markup by pagekit's table(num=[...]) because CSS
   cannot know which column holds numbers. Tabular figures so digits line up in a
   column; alignment stays START (right in RTL) to match every other column —
   the design system's rule is one alignment per table, and Arabic numerals read
   right-to-left from the same edge as the text. */
.alrasly-table .is-num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* A caption belongs above the table, never in a th. See the compound-interest
   frequency table, whose header cell read «١٬٠٠٠ د.ب · ٧٪ · ١٠ سنوات» — the
   conditions of the whole table, sitting where a column name should be. */
.alrasly-table__caption {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--text-2);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* ═══ NUMBERED LISTS ═══
 * .alrasly-numbered had NO rule at all — verified against every loaded
 * stylesheet — so the gratuity «أخطاء شائعة» list rendered as a browser-default
 * <ol>: Latin numerals, wrong indent side under RTL, no rhythm.
 *
 * list-style-position is inside so the marker sits within the padding box and
 * the wrapped second line aligns under the text rather than under the number. */
.alrasly-numbered {
	margin: 0 0 1.5rem;
	padding-inline-start: 0;
	list-style: none;
	counter-reset: alrasly-num;
}

.alrasly-numbered > li {
	counter-increment: alrasly-num;
	position: relative;
	padding-inline-start: 2.5rem;
	margin-block-end: 0.85rem;
	line-height: 1.9;
	color: var(--wp--preset--color--text-2);
}

/* Arabic-Indic numerals, to match every other number on the site. The counter
   style does the conversion, so the markup stays a plain <ol>/<li>. */
.alrasly-numbered > li::before {
	content: counter(alrasly-num, arabic-indic);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--alrasly-card-2);
	color: var(--wp--preset--color--text);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
}

.alrasly-numbered > li:last-child { margin-block-end: 0; }
.alrasly-numbered strong { color: var(--wp--preset--color--text); }

@media (max-width: 781px) {
	.alrasly-table th:first-child,
	.alrasly-table td:first-child { inline-size: 38%; }
	.alrasly-numbered > li { padding-inline-start: 2.25rem; }
}

/* ═══ READING MEASURE — long-form prose sitewide (run 2, item 9) ═══
 *
 * The audit measured prose paragraphs on all 14 pages at 1440. Nothing was centred,
 * but the tool pages had NO measure at all: their section copy ran the full 1180px
 * content column, about 98ch. A comfortable Arabic line is roughly half that.
 *
 * 54ch is ~648px in this face, matching the 620-680 used on /about.
 *
 * Scoped to running text only. Tables, cards, callouts, lists of links, the tool
 * mounts and the accordions are objects rather than prose and keep the full column;
 * capping them would leave dead space beside a table. */
.alrasly-gsec > .wp-block-group > p,
.alrasly-gsec > .wp-block-group > .alrasly-answer,
.alrasly-course-desc .alrasly-gsec > .wp-block-group > p {
	max-width: 54ch;
}

/* Callouts and the author block are PROSE cards - they hold running sentences, not
   a table or a grid - so they take the measure themselves rather than having their
   text capped inside a full-width box, which would leave dead space in the card.
   Capping the card also aligns its edge with the body copy above it.
   Measured before: 1129px inside a callout on /debt-payoff. */
.alrasly-gsec .alrasly-callout,
.alrasly-gsec .alrasly-author {
	max-width: 54ch;
	box-sizing: border-box;
}

/* The same reasoning for the other prose containers the audit turned up: worked
   examples, the platform cards on /content, and FAQ answers. Each holds running
   sentences rather than a table or a grid, so the TEXT takes the measure while the
   card keeps whatever width its layout gives it. Measured before: 1135px in a
   platform card, 1132px in an example, 732px in an accordion answer. */
.alrasly-gsec .alrasly-example :where(p, li),
.alrasly-plat-card :where(p, li),
.alrasly-qa__a :where(p, li) {
	max-width: 54ch;
}

/* ═══ /contact — the switchboard ═══
 * The page ROUTES, it does not invite: four destinations, and someone arrives to
 * PICK one, so all four have to be comparable at a glance rather than read in
 * sequence. That much the first version got right.
 *
 * What it got wrong is that all four looked identical, so choosing still meant
 * reading all of them — and each card said where it went without saying what
 * happens once you take it, which is the one thing a router owes the person
 * choosing. Both are fixed here: a channel mark that separates the four by hue
 * before a word is read, and an expectation line on every card.
 *
 * Everything on this page is CSS and inline SVG. The plan requires it to be the
 * fastest page on the site, so nothing here costs a request.
 */
.alrasly-croutes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
}
.alrasly-croute {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--wp--custom--radius--card, 12px);
	text-decoration: none;
	color: inherit;
	transition: border-color 160ms ease, background-color 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.alrasly-croute:hover,
.alrasly-croute:focus-visible {
	border-color: var(--alrasly-route, var(--wp--preset--color--brand));
	background: var(--wp--preset--color--ground-alt);
	transform: translateY(-2px);
	outline: none;
}
.alrasly-croute:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ── The channel mark ──────────────────────────────────────────────────
 * Was a 1.75rem grey glyph in the corner, which distinguished nothing: four
 * cards, four faint outlines, all the same colour. On a plate in its own hue it
 * does the job the page needs — you can tell the four routes apart before
 * reading a word, which is what makes a switchboard scannable. */
.alrasly-croute__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 10px;
	color: var(--alrasly-route);
	background: color-mix(in srgb, var(--alrasly-route) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--alrasly-route) 30%, transparent);
	transition: background-color 160ms ease;
}
.alrasly-croute__icon svg { inline-size: 1.4rem; block-size: 1.4rem; display: block; }
.alrasly-croute:hover .alrasly-croute__icon {
	background: color-mix(in srgb, var(--alrasly-route) 22%, transparent);
}

/* One hue each. The consultancy route is deliberately the quiet one — it is the
   route that sends you AWAY, and it should not compete with the three that keep
   you here. */
.alrasly-croute[data-route="dm"]      { --alrasly-route: #A79AD9; }
.alrasly-croute[data-route="session"] { --alrasly-route: var(--wp--preset--color--accent); }
.alrasly-croute[data-route="course"]  { --alrasly-route: #C9BEEF; }
/* NOT var(--text-3): the card rule far below rebinds --text-3 to #a79ad9 on any
   raised surface, which is exactly the dm hue — so "the quiet one" rendered
   identical to route one. Stated outright instead. */
.alrasly-croute[data-route="biz"]     { --alrasly-route: #8078A0; }

/* The session card carries the only real commitment on the page, and it is the
   route the page exists to protect — a reader who does not notice it sends the
   personal question as a message instead. It gets weight, not a sales badge. */
.alrasly-croute[data-route="session"] {
	border-color: rgba(255, 178, 122, 0.30);
	background:
		linear-gradient(160deg, rgba(255, 178, 122, 0.07), transparent 62%),
		var(--wp--preset--color--card);
}

.alrasly-croute__body { display: block; min-inline-size: 0; }
.alrasly-croute__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text);
	margin-block-end: 0.35rem;
}
.alrasly-croute__line {
	display: block;
	color: var(--wp--preset--color--text-2);
	font-size: 0.9375rem;
	line-height: 1.7;
}
/* What happens after you take this route. The first version left this off every
   card and floated one general sentence under the whole grid, attached to
   nothing — so the reader learned the response time for messages while looking
   at the consultancy card. */
.alrasly-croute__meta {
	display: block;
	margin-block-start: 0.5rem;
	padding-block-start: 0.5rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.07);
	color: var(--wp--preset--color--text-3);
	font-size: 0.8125rem;
	line-height: 1.7;
}
/* The action is the one thing the card is for, so it reads as a control. */
/* --accent, not --brand. Brand violet on the card ground measures 3.09:1 as
   TEXT and needs 4.5 — it is a fill colour, not an ink. The peach clears 8.9
   on the same surface and is already the site's action colour. */
.alrasly-croute__action {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--accent);
	font-weight: 500;
	line-height: 1.5;
}
/* The handle is Latin inside an Arabic run and begins with a neutral character,
   so bidi resolved it into the surrounding RTL and printed «alrasly@». <bdi> in
   the markup isolates it; this keeps it isolated if the element is ever styled
   into a different context. */
.alrasly-croute__action bdi { unicode-bidi: isolate; }

/* ── «وش ما أقدر أساعد فيه» ───────────────────────────────────────────
 * Three refusals and one affirmation, previously four paragraphs of identical
 * weight — so the only positive sentence in the section disappeared into the
 * three negatives around it. The mark does the sorting now.
 *
 * The measure is anchored to the READING START rather than centred, so the list
 * and the h2 above it share an edge. Centring a 54ch measure inside an 1180px
 * column left the heading starting 266px before its own prose.
 *
 * .alrasly-limits-wrap exists so these are not constrained-layout children:
 * core owns those margins with !important, and anchoring them directly threw
 * the list 67px PAST the heading instead of aligning it. */
.alrasly-limits-wrap { margin-block: 0; }
.alrasly-limits {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 54ch;
	margin-inline-start: 0;
	margin-inline-end: auto;
	display: grid;
	gap: 0.9rem;
}
.alrasly-limits li {
	position: relative;
	margin: 0;
	padding-inline-start: 2.1rem;
	line-height: 1.95;
	color: var(--wp--preset--color--text-2);
}
.alrasly-limits li strong { color: var(--wp--preset--color--text); font-weight: 600; }
.alrasly-limits li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E7796' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12h7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* The counterweight. It is the only sentence here that says yes, and it now
   looks like it. */
.alrasly-does {
	position: relative;
	max-width: 54ch;
	margin-inline-start: 0;
	margin-inline-end: auto;
	margin-block-start: 1.6rem;
	padding-block-start: 1.4rem;
	padding-inline-start: 2.1rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.08);
	line-height: 1.95;
	color: var(--wp--preset--color--text-2);
}
.alrasly-does strong { color: var(--wp--preset--color--text); font-weight: 600; }
.alrasly-does::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(1.4rem + 0.55em);
	inline-size: 1.1rem;
	block-size: 1.1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB27A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.8 4.8L19.5 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

@media (max-width: 781px) {
	.alrasly-croutes { grid-template-columns: 1fr; gap: 0.85rem; }
	.alrasly-croute { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.alrasly-croute { transition: border-color 160ms ease, background-color 160ms ease; }
	.alrasly-croute:hover { transform: none; }
}

/* ═══ SINGLE POST ═══
 * The template had a title, a date and a body. Everything that makes a post
 * READABLE was missing: a measure, a type scale, and an author. */
.alrasly-post .wp-block-post-title {
	font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
	line-height: 1.45;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--text);
	text-align: start;
}
.alrasly-post__meta { gap: 0.75rem; align-items: baseline; margin-block-end: 0.5rem; }
.alrasly-post__updated::before { content: "محدّث "; }
.alrasly-post__author { margin: 0; color: var(--wp--preset--color--text-2); line-height: 1.8; }
.alrasly-post__author a { color: var(--wp--preset--color--text); text-decoration: underline; text-underline-offset: 3px; }
.alrasly-post__cred { color: var(--wp--preset--color--text-3); }

/* THE READING MEASURE. Body copy ran the full content column; 54ch is ~648px in
   this face, the same measure /about uses. */
/* DESCENDANT, not child. This post is rendered by Elementor, so the paragraphs sit
   eight levels below .wp-block-post-content inside div.elementor wrappers — a child
   combinator matched nothing and eight paragraphs stayed at 740px. */
.alrasly-post .wp-block-post-content :where(p, ul, ol, blockquote, h2, h3, h4) {
	max-width: 54ch;
	text-align: start;
}
.alrasly-post .wp-block-post-content :where(p, li) {
	color: var(--wp--preset--color--text);
	line-height: 1.95;
}
/* Elementor sets its own container widths; the measure has to beat them. */
.alrasly-post .wp-block-post-content .elementor-widget-container :where(p, ul, ol) {
	max-width: 54ch;
}
/* The design-system scale, with the same 3x-above rhythm as /about. */
.alrasly-post .wp-block-post-content h2 {
	font-size: clamp(1.35rem, 1.05rem + 1vw, 1.75rem);
	line-height: 1.5;
	margin-block: 3.4rem 0.6rem;
	color: var(--wp--preset--color--text);
}
.alrasly-post .wp-block-post-content h3 {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	line-height: 1.55;
	margin-block: 2.2rem 0.5rem;
	color: var(--wp--preset--color--text);
}
/* Images are capped at the measure and never full-bleed — a picture wider than the
   text it illustrates breaks the column it belongs to. */
.alrasly-post .wp-block-post-content img,
.alrasly-post .wp-block-post-featured-image img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
/* Images are capped to the SAME measure as the text. Elementor wraps them in its
   own widget divs rather than <figure>, so the cap has to sit on the image element
   and its container - measured at 740-768px against a 607px text column. */
.alrasly-post .wp-block-post-content figure,
.alrasly-post .wp-block-post-content .elementor-widget-image,
.alrasly-post .wp-block-post-content .elementor-image {
	max-width: 54ch;
	margin-inline: 0;
}
.alrasly-post .wp-block-post-content .elementor-widget-image img { max-width: 100%; }
.alrasly-post .wp-block-post-content blockquote {
	border-inline-start: 4px solid var(--wp--preset--color--brand);
	padding-inline-start: 1.25rem;
	margin-block: 2rem;
	color: var(--wp--preset--color--text);
}
.alrasly-post .wp-block-post-content table { width: 100%; border-collapse: collapse; }
.alrasly-post .wp-block-post-content :where(th, td) {
	padding: 0.7rem 0.75rem;
	border-bottom: 1px solid rgba(255,255,255,0.16);
	text-align: start;
}
.alrasly-post__nav { gap: 1rem; justify-content: space-between; }

/* ═══ ARCHIVE · SEARCH · 404 ═══
 * Checked after completing single.html and they had the same gaps: excerpts ran the
 * full 1180 column (search measured 1159px across 7 paragraphs, 404 at 1180) and
 * search-result titles were links under 44px.
 * archive.html was already clean - it lists titles with no excerpt prose. */
/* px, not ch — RE-MEASURED 5 Sep 2026 and this rule was NOT working on the 404.
   `ch` resolves against the element's own font, and the 404 lede is
   has-large-font-size, so 54ch computed wider than its 1166px container and capped
   nothing. Search was fine only because its excerpts are body size. The same trap
   as the post headings: a font-relative measure silently stops being a measure the
   moment something changes the font. */
.wp-block-query .wp-block-post-excerpt__excerpt,
.wp-block-query .wp-block-post-content,
body.search main p,
body.error404 main p {
	max-width: var(--alrasly-measure, 660px);
}

/* Result titles are the control on these pages, so they carry the hit area. Inline
   prose links stay exempt - see the touch-target note above. */
body.search .wp-block-post-title a,
.wp-block-query .wp-block-post-title a,
body.error404 main a:not(p a):not(li a) {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/* The blog index entity paragraph inherited the 68ch convention. */
.alrasly-entity { max-width: 54ch; }


/* ── SINGLE POST · beating Elementor's per-post stylesheet ───────────────────
 *
 * Diagnosed 5 Sep 2026 on post 8799 at 1440px. The template and the rules above
 * were right; they were being OUTRANKED. Elementor writes a per-post sheet,
 * post-8799.css, containing:
 *
 *   .elementor-8799 .elementor-element.elementor-element-555cdc2 .elementor-heading-title
 *     { font-family: Roboto; font-size: 25px; color: <Betheme blue> }
 *
 * That is specificity 0,4,0. The rules above are 0,2,1 and lose, which is why the
 * rendered post showed h2 at #7A7A7A grey and h3 at #1A298B blue.
 *
 * TWO CONSEQUENCES, and the second is the one that is easy to miss:
 *
 *   1. Colour and font came from Elementor, not the design system.
 *   2. The MEASURE broke with them. `54ch` resolves against the element's OWN
 *      font — Roboto at 25px — so the heading cap computed far wider than the
 *      body's and the container's 740px won. Body sat at 607px and headings at
 *      740px, in the same column.
 *
 * So the measure stops being font-relative. --alrasly-measure is a px value: it
 * cannot drift when a plugin changes a font, and it is the range the brief asks
 * for (620–680) rather than whatever 54ch happens to compute to today.
 * ────────────────────────────────────────────────────────────────────────── */
:root { --alrasly-measure: 660px; }

/* Every block in the reading column, at one width, regardless of its font. */
.alrasly-post .wp-block-post-content :where(p, ul, ol, blockquote, h2, h3, h4, figure, table),
.alrasly-post .wp-block-post-content .elementor-widget-container :where(p, ul, ol),
.alrasly-post .wp-block-post-content .elementor-widget-heading,
.alrasly-post .wp-block-post-content .elementor-widget-text-editor,
.alrasly-post .wp-block-post-content .elementor-widget-image,
.alrasly-post .wp-block-post-content .elementor-image {
	max-width: var(--alrasly-measure);
	margin-inline: 0;
}

/* 0,4,1 — one element selector more than Elementor's 0,4,0, so no !important. */
.alrasly-post .wp-block-post-content .elementor-widget-heading .elementor-heading-title,
.alrasly-post .wp-block-post-content .elementor-widget-container h2.elementor-heading-title,
.alrasly-post .wp-block-post-content .elementor-widget-container h3.elementor-heading-title,
.alrasly-post .wp-block-post-content .elementor-widget-container h4.elementor-heading-title {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--display);
	max-width: var(--alrasly-measure);
	text-align: start;
}
/* Sizes by tag, since Elementor sets one size per element id. */
.alrasly-post .wp-block-post-content .elementor-widget-container h2.elementor-heading-title {
	font-size: clamp(1.35rem, 1.05rem + 1vw, 1.75rem);
	line-height: 1.5;
	margin-block: 3.4rem 0.6rem;
}
.alrasly-post .wp-block-post-content .elementor-widget-container h3.elementor-heading-title {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	line-height: 1.55;
	margin-block: 2.2rem 0.5rem;
}

/* Body copy carried by Elementor's text-editor widget. */
.alrasly-post .wp-block-post-content .elementor-widget-text-editor :where(p, li) {
	color: var(--wp--preset--color--text);
	line-height: 1.95;
	text-align: start;
}

/* Images never exceed the column they illustrate, and never go full-bleed. */
.alrasly-post .wp-block-post-content :where(img, .elementor-widget-image img) {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* A generous title block: the body should not start immediately under the byline. */
/* The byline sits in the same column as the body it introduces. */
.alrasly-post__author { margin-block-end: 0.5rem; max-width: var(--alrasly-measure); }
.alrasly-post .wp-block-post-featured-image {
	max-width: var(--alrasly-measure);
	margin-block-end: 2rem;
}


/* ── Homepage channel row ────────────────────────────────────────────────────
 * Replaces `.alrasly-vids` — four empty 9:16 boxes that rendered as 1180x508 of
 * blank rectangles because no videos were ever chosen. An empty grid reads as a
 * broken page; three real links read as a finished one.
 *
 * The old `.alrasly-vid` / `.alrasly-vids` / `.alrasly-platforms` rules are left in
 * place: /content/ still uses the platform styles, and the video grid can come back
 * above this row once real embeds exist.
 * ────────────────────────────────────────────────────────────────────────── */
.alrasly-channels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.85rem;
	margin-block-start: 1.5rem;
}
.alrasly-channel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	min-block-size: 44px;
	padding: 1.15rem 1.25rem;
	border-radius: var(--wp--custom--radius--card, 12px);
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.07);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	cursor: pointer;
	/* Colour and border only — no transform. A scale on hover shifts the row. */
	transition: background-color 200ms ease, border-color 200ms ease;
}
.alrasly-channel:hover,
.alrasly-channel:focus-visible {
	background-color: var(--wp--preset--color--card-2, #211952);
	border-color: rgba(255, 178, 122, 0.45);
}
.alrasly-channel__icon {
	inline-size: 24px;
	block-size: 24px;
	margin-block-end: 0.55rem;
	color: var(--wp--preset--color--accent);
}
.alrasly-channel__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	line-height: 1.5;
}
.alrasly-channel__meta {
	color: var(--wp--preset--color--text-2);
	font-size: 0.85rem;
	line-height: 1.7;
}

@media (max-width: 781px) {
	.alrasly-channels { grid-template-columns: 1fr; }
	.alrasly-channel { flex-direction: row; align-items: center; gap: 0.7rem; }
	.alrasly-channel__icon { margin-block-end: 0; }
	.alrasly-channel__meta { margin-inline-start: auto; }
}


/* ── Muted text on raised surfaces ───────────────────────────────────────────
 * design-system.md rule 7 already says it: "--text-3 muted is AA on --ground
 * ONLY - use --text-2 on cards and alt sections." The rule was right and the
 * code did not follow it.
 *
 * Measured 5 Sep 2026:
 *          --text-3   --text-2
 *   ground   4.54 OK    7.60
 *   alt      4.29 --    7.18
 *   card     4.03 --    6.75
 *
 * .alrasly-toolcard__meta ("مجاناً · دقيقة · البحرين") sits on --card at 12px
 * and measured 4.03:1. The smallest text on the site was the least legible.
 *
 * Rather than lighten --text-3 - which would break the one surface where it IS
 * correct, and where its quietness is doing real work - the token is REBOUND on
 * raised surfaces. Any --text-3 inside a card now resolves to the --text-2 value
 * automatically, including in code written later. The rule enforces itself
 * instead of relying on everyone remembering it.
 * ────────────────────────────────────────────────────────────────────────── */
.alrasly-card,
.alrasly-example,
.alrasly-callout,
.alrasly-toolcard,
.alrasly-toolrow,
.alrasly-channel,
.alrasly-croute,
.alrasly-author,
.alrasly-facts,
.alrasly-offer,
.alrasly-plat,
.alrasly-plat-card,
.alrasly-pull,
.alrasly-visual-slot,
.alrasly-fit__col,
.alrasly-session,
.alrasly-stat,
.alrasly-modules,
.alrasly-section--alt,
.alrasly-course .crs-buy,
.alrasly-course .crs-mod,
.alrasly-table table,
.has-card-background-color,
.has-ground-alt-background-color {
	--wp--preset--color--text-3: #a79ad9;
}


/* ── Browser surfaces ────────────────────────────────────────────────────────
 * The parts nobody draws still carry the design. Selection, caret, scrollbar,
 * focus ring and the numerals in tables all ship with browser defaults that
 * belong to no design system — and on a dark violet ground the defaults are a
 * bright blue highlight and a light grey scrollbar, both foreign to this palette.
 * ────────────────────────────────────────────────────────────────────────── */

/* Selection: brand violet, not the OS blue. */
::selection {
	background-color: rgba(124, 58, 245, 0.55);
	color: var(--wp--preset--color--text);
}

/* The caret is peach — the same colour every other "your turn" affordance uses. */
:root { caret-color: var(--wp--preset--color--accent); }

/* Scrollbars, both engines. Thin, in-palette, no track chrome. */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(167, 154, 217, 0.34) transparent;
}
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background-color: rgba(167, 154, 217, 0.34);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(167, 154, 217, 0.55); }

/* One focus ring for the whole site. Peach on violet reads at a glance and does
   not depend on the element having its own styles — which is what left two
   controls with no visible focus at all. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Underlines sit off the baseline instead of cutting through Arabic descenders. */
.alrasly-post .wp-block-post-content a,
main p a {
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

/* Figures line up in columns. Arabic-Indic numerals benefit from this as much as
   Latin ones, and every table on this site is numeric. */
table, .alrasly-table, [class*="__value"], [class*="-headline__value"] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}


/* ═══ DISPLAY PRIMITIVES ═════════════════════════════════════════════════════
 * Built 6 Sep 2026. The gratuity page ran 10,248px as heading → paragraph →
 * table, twelve times, with `spacing|60` repeated 26 times. Every section had
 * the same width, rhythm and weight, so the squint test returned one grey
 * column: the Article 10 ceiling — the most valuable thing on the page — read
 * exactly like a table of definitions.
 *
 * The content is not homogeneous. It is a PROCEDURE (the tiered formula), a RULE
 * PIVOTING ON A DATE (1 Mar 2024), a CEILING (Article 10), and REFERENCE. These
 * give each kind its own shape, so the page can be scanned instead of read.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tier figure — a procedure with two rates ─────────────────────────── */
/* The four service tiers.
 *
 * These used to encode the rate as HEIGHT — half-month tiers literally half
 * as tall as the full-month one. It measured correctly and read as broken:
 * bottom-aligned boxes of two different heights, the tall one's text packed
 * into its top with a dead gap beneath, and no two labels on the same line.
 * The reader saw misalignment, not a chart.
 *
 * The rate is now a FILLED TRACK inside cards of equal height. Same encoding,
 * same 50/100 proportion, but the cards align and the comparison sits on one
 * baseline where it can actually be compared. */
.alrasly-tiers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	margin-block: 1.5rem 0.75rem;
	align-items: stretch;
}
.alrasly-tier {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-block-size: 6.5rem;
	border-radius: 10px;
	padding: 0.8rem 0.7rem 1.5rem;
	text-align: center;
	background-color: rgba(167, 154, 217, 0.16);
	box-shadow: inset 0 0 0 1px rgba(167, 154, 217, 0.26);
}

/* The track sits on the card's floor, full width, and the fill states the
   rate. ::before is the groove, ::after the filled part. */
.alrasly-tier::before,
.alrasly-tier::after {
	content: "";
	position: absolute;
	inset-block-end: 0.7rem;
	inset-inline-start: 0.7rem;
	block-size: 5px;
	border-radius: 3px;
}
.alrasly-tier::before {
	inline-size: calc(100% - 1.4rem);
	background-color: rgba(255, 255, 255, 0.09);
}
.alrasly-tier::after {
	background-color: rgba(167, 154, 217, 0.75);
}
.alrasly-tier--half::after { inline-size: calc((100% - 1.4rem) * 0.5); }
.alrasly-tier--full::after {
	inline-size: calc(100% - 1.4rem);
	background-color: var(--wp--preset--color--accent);
}
.alrasly-tier--full {
	background-color: rgba(255, 178, 122, 0.19);
	box-shadow: inset 0 0 0 1px rgba(255, 178, 122, 0.42);
}
.alrasly-tier__year {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8rem; color: var(--wp--preset--color--text-2); line-height: 1.5;
}
.alrasly-tier__rate {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem; color: var(--wp--preset--color--text); line-height: 1.5;
	margin-block-start: auto;
}
.alrasly-tiers__caption {
	color: var(--wp--preset--color--text-2); font-size: 0.9rem;
	line-height: 1.8; margin: 0 0 2rem;
}

/* ── 2. Split timeline — one date, two payers ────────────────────────────── */
.alrasly-split {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 0;
	margin-block: 1.5rem 1rem;
	border-radius: 12px;
	overflow: hidden;
}
.alrasly-split__side { padding: 1.15rem 1.25rem; background-color: var(--wp--preset--color--card); }
.alrasly-split__side--sio { background-color: rgba(255, 178, 122, 0.14); }
.alrasly-split__who {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem; line-height: 1.5; color: var(--wp--preset--color--text);
}
.alrasly-split__when { font-size: 0.85rem; color: var(--wp--preset--color--text-2); line-height: 1.7; margin-block-start: 0.2rem; }
.alrasly-split__how { font-size: 0.85rem; color: var(--wp--preset--color--text-2); line-height: 1.7; margin-block-start: 0.55rem; }
/* The pivot: the date itself, as the hinge between the two sides. */
.alrasly-split__pivot {
	display: grid; place-items: center; padding: 0.75rem 0.9rem;
	background-color: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.85rem; line-height: 1.4; text-align: center;
	color: var(--wp--preset--color--accent); inline-size: 6.5rem;
}

/* ── 3. Ceiling figure — the formula amount against what was received ────── */
.alrasly-ceiling { margin-block: 1.5rem 1rem; display: grid; gap: 0.6rem; }
.alrasly-ceiling__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.85rem; align-items: center; }
.alrasly-ceiling__label { font-size: 0.9rem; color: var(--wp--preset--color--text-2); line-height: 1.6; }
.alrasly-ceiling__bar { block-size: 2.4rem; border-radius: 6px; display: flex; align-items: center; padding-inline: 0.7rem; }
.alrasly-ceiling__bar--formula { background-color: rgba(167, 154, 217, 0.22); inline-size: 100%; }
.alrasly-ceiling__bar--paid { background-color: rgba(255, 178, 122, 0.34); inline-size: 62%; }
.alrasly-ceiling__bar--gap {
	background-color: transparent; inline-size: 38%; margin-inline-start: auto;
	box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.5);
}
.alrasly-ceiling__val { font-family: var(--wp--preset--font-family--display); font-size: 0.85rem; color: var(--wp--preset--color--text); }

/* ── 4. Reference grid — parallel short items, two columns ───────────────── */
.alrasly-ref {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem; margin-block: 1.25rem 0;
}
.alrasly-ref__item {
	background-color: var(--wp--preset--color--card);
	border-radius: 10px; padding: 0.95rem 1.1rem;
	--wp--preset--color--text-3: #a79ad9;
}
.alrasly-ref__term {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem; line-height: 1.55; color: var(--wp--preset--color--text);
	margin: 0 0 0.25rem;
}
.alrasly-ref__def { font-size: 0.875rem; line-height: 1.8; color: var(--wp--preset--color--text-2); margin: 0; }
.alrasly-ref__art {
	display: inline-block; margin-block-start: 0.45rem;
	font-size: 0.75rem; color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
}

/* ── 5. In / out pair — what counts and what does not ────────────────────── */
.alrasly-inout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin-block: 1.25rem 0; }
.alrasly-inout__col { border-radius: 12px; padding: 1.1rem 1.25rem; }
.alrasly-inout__col--in  { background-color: rgba(255, 178, 122, 0.13); }
.alrasly-inout__col--out { background-color: rgba(167, 154, 217, 0.09); }
.alrasly-inout__head {
	display: flex; align-items: center; gap: 0.5rem; margin-block-end: 0.6rem;
	font-family: var(--wp--preset--font-family--display); font-size: 0.95rem;
	color: var(--wp--preset--color--text);
}
.alrasly-inout__head svg { inline-size: 1.05rem; block-size: 1.05rem; flex: 0 0 auto; }
.alrasly-inout__col--in  .alrasly-inout__head svg { color: var(--wp--preset--color--accent); }
.alrasly-inout__col--out .alrasly-inout__head svg { color: var(--wp--preset--color--text-3); }
.alrasly-inout ul { margin: 0; padding: 0; list-style: none; }
.alrasly-inout li {
	font-size: 0.9rem; line-height: 1.9; color: var(--wp--preset--color--text-2);
	padding-block: 0.15rem;
}

/* A tighter section interval for reference material, so the page stops repeating
   one spacing value 26 times. Reference reads denser than argument. */
.alrasly-gsec--ref { padding-block: var(--wp--preset--spacing--40) !important; }

@media (max-width: 781px) {
	.alrasly-tiers { grid-template-columns: repeat(2, 1fr); }
	.alrasly-split { grid-template-columns: 1fr; }
	.alrasly-split__pivot { inline-size: auto; padding: 0.55rem; }
	.alrasly-ref, .alrasly-inout { grid-template-columns: 1fr; }
	.alrasly-ceiling__row { grid-template-columns: 1fr; gap: 0.3rem; }
}


/* ═══ HOMEPAGE: STICKY HEADER · ENTITY · FOCAL MOTION ════════════════════════ */

/* ── Tutor pages: the layout CSS core never printed ──────────────────────────
 * On every Tutor-rendered single template the header menu is visibly wrong: the
 * nav bunches up against the logo instead of sitting at the far end of the bar,
 * and the gap between items drops from 16px to 10.72px.
 *
 * It is not a nav problem. Core generates one rule per flex container and prints
 * the lot as a single <style id="core-block-supports-inline-css"> block. On these
 * pages that block does not exist AT ALL — measured, 2 occurrences on /contact/
 * and 0 here — so three rules simply never arrive:
 *
 *   header group  justify-content:space-between; align-items:center
 *   header nav    gap:var(--wp--preset--spacing--40); justify-content:flex-end
 *   footer group  gap:var(--wp--preset--spacing--30); flex-direction:column;
 *                 align-items:stretch
 *
 * The cause is the one already documented in inc/tutor-late-render.php:
 * tutor_custom_header() emits wp_head() BEFORE rendering the header template
 * part, so the style engine collects those rules after the only moment core will
 * print them. Core is explicit that there is no second chance — wp_enqueue_
 * stored_styles() returns early when a block theme reaches wp_footer, on the
 * stated assumption that a block theme has already rendered its template.
 *
 * So the three rules are restored here, keyed on the SEMANTIC layout classes
 * rather than the wp-container-* hashes, which are content-derived and change
 * whenever the template part is edited. Scoped to .alrasly-tutor-single, which
 * the theme sets only on the templates that have the bug — so on every normal
 * page core's own rule is the only one present and these cannot fight it.
 *
 * IF THE HEADER OR FOOTER LAYOUT IS EVER CHANGED IN THE EDITOR, change it here
 * too. That duplication is the price of the fix; the alternatives were a footer
 * <style> (the menu visibly snaps into place on load) or rendering both template
 * parts twice per request to prime the style engine, which would also populate
 * the import map in the head and make the fix in tutor-late-render.php emit a
 * second one.
 * ────────────────────────────────────────────────────────────────────────── */
.alrasly-tutor-single .site-header .wp-block-group.is-layout-flex.is-content-justification-space-between {
	justify-content: space-between;
	align-items: center;
}
.alrasly-tutor-single .site-header .wp-block-navigation.is-layout-flex.is-content-justification-right {
	gap: var(--wp--preset--spacing--40);
	justify-content: flex-end;
}
.alrasly-tutor-single .site-footer .wp-block-group.is-layout-flex.is-vertical.is-content-justification-stretch {
	gap: var(--wp--preset--spacing--30);
	flex-direction: column;
	align-items: stretch;
}

/* ── Frosted sticky header ───────────────────────────────────────────────────
 * The header was position:static, so on a 6,728px mobile homepage the nav
 * scrolled away and never came back.
 *
 * Sticky is the functional fix; the frost is what makes sticky legible. Content
 * of unpredictable colour passes UNDER this bar — cards, peach fills, the violet
 * caption — and a flat semi-transparent panel would let all of it read through.
 * The blur is doing a job here, not decorating: it collapses whatever is behind
 * into an even field so the nav stays readable over any of it.
 * ────────────────────────────────────────────────────────────────────────── */
body > header,
header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

/* The frost lives on a pseudo-element, NOT on the header itself, and that is
   load-bearing rather than stylistic.
   
   backdrop-filter makes an element the containing block for every fixed-
   position descendant. WordPress's mobile navigation is the header's own
   descendant and is position:fixed;inset:0 — so with the filter on <header>
   the menu resolved against a 65px-tall bar instead of the viewport and
   opened as a thin strip showing one item. The overlay was unusable on every
   page at every mobile width.
   
   A pseudo-element has no descendants, so it can carry the filter without
   trapping anything. */
body > header::before,
header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(14, 10, 36, 0.72);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Where backdrop-filter is unsupported the bar must not become a translucent
   mess — it goes solid instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body > header::before,
	header.wp-block-template-part::before { background-color: var(--wp--preset--color--ground); }
}
/* The header part paints its own ground; let the frosted parent show through.
 *
 * This was scoped to `body > header`, and a block theme wraps everything in
 * .wp-site-blocks — so the header is body > .wp-site-blocks > header and this
 * never matched. The frost was applied to the <header> the whole time and an
 * opaque group painted straight over it, which is why the glass could not be
 * seen. Match the part itself rather than guessing at its depth. */
header.wp-block-template-part > .wp-block-group.has-background,
header.wp-block-template-part > .wp-block-group.has-ground-background-color {
	background-color: transparent !important;
}

/* ── The entity block, segmented ─────────────────────────────────────────────
 * It was one 46-word sentence doing three jobs: what the site is, who runs it,
 * what it contains. Three jobs now read as three things, and the facts become
 * scannable figures instead of clauses buried mid-sentence.
 * ────────────────────────────────────────────────────────────────────────── */
.alrasly-entity__lead {
	font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
	line-height: 1.85; color: var(--wp--preset--color--text); margin: 0;
}
.alrasly-entity__by {
	font-size: 0.95rem; line-height: 1.9;
	color: var(--wp--preset--color--text-2); margin: 0.5rem 0 0;
}
.alrasly-entity__by strong { color: var(--wp--preset--color--text); font-weight: 500; }
.alrasly-entity__facts {
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
	margin: 1rem 0 0; padding: 0; list-style: none;
}
.alrasly-entity__facts li {
	font-size: 0.9rem; line-height: 1.7; color: var(--wp--preset--color--text-2);
}
.alrasly-entity__facts b {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500; font-size: 1.15rem; color: var(--wp--preset--color--accent);
	margin-inline-end: 0.35rem;
}

/* ── The one authored moment ─────────────────────────────────────────────────
 * The hero is three boxes that read as a single sentence. So the sentence
 * assembles: each clause settles into place in reading order, then the squiggle
 * underlines it. This exists nowhere else on the site — it is the brand moment,
 * not a section reveal, and nothing below the fold animates on scroll.
 *
 * `backwards` fill means the offset is only ever borrowed from the animation:
 * the resting state in the stylesheet is the finished state, so if the animation
 * never runs the hero is simply there.
 * ────────────────────────────────────────────────────────────────────────── */
@keyframes alrasly-settle {
	from { opacity: 0; transform: translateY(0.6rem) scale(0.985); }
	to   { opacity: 1; transform: none; }
}
@keyframes alrasly-underline { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }

.alrasly-caption {
	animation: alrasly-settle 560ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* Reading order, capped at 260ms so the sentence lands quickly. */
.alrasly-caption:nth-child(1) { animation-delay: 60ms; }
.alrasly-caption:nth-child(2) { animation-delay: 190ms; }
.alrasly-caption:nth-child(3) { animation-delay: 320ms; }
.alrasly-squiggle {
	animation: alrasly-underline 520ms cubic-bezier(0.16, 1, 0.3, 1) 620ms backwards;
}
.alrasly-intro, .alrasly-cta-row {
	animation: alrasly-settle 520ms cubic-bezier(0.16, 1, 0.3, 1) 760ms backwards;
}

/* Reduced motion keeps the sequence but drops the travel: the clauses still
   arrive in order, they just no longer move. Fewer and gentler, not none. */
@media (prefers-reduced-motion: reduce) {
	@keyframes alrasly-settle { from { opacity: 0; } to { opacity: 1; } }
	@keyframes alrasly-underline { from { opacity: 0; } to { opacity: 1; } }
	.alrasly-caption, .alrasly-squiggle, .alrasly-intro, .alrasly-cta-row {
		animation-duration: 220ms;
	}
}

@media (max-width: 781px) {
	.alrasly-entity__facts { gap: 0.4rem 1.15rem; }
}


/* ── The hero portrait ───────────────────────────────────────────────────────
 * Replaces the placeholder panel. The source is a frame grab from Rasool's own
 * recordings — 420x525 after the 4:5 crop — so it is capped at its native width
 * rather than stretched: an upscaled frame grab looks worse than a smaller sharp
 * one, and the hero is the first thing anyone sees.
 *
 * A proper session would give a 2x asset and this cap can then be lifted.
 * ────────────────────────────────────────────────────────────────────────── */
.alrasly-portrait {
	margin: 0;
	max-inline-size: 414px;
	border-radius: var(--wp--custom--radius--card, 12px);
	overflow: hidden;
	/* Grounds the cut-out edge against the violet so it does not float. */
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.85);
}
.alrasly-portrait img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
@media (max-width: 781px) {
	/* Centred and smaller on mobile: at full width the frame grab softens badly. */
	.alrasly-portrait { max-inline-size: 300px; margin-inline: auto; }
}


/* ====================================================================
 * Symbols and interaction motion
 * --------------------------------------------------------------------
 * Every mark on this page is drawn on one 24x24 grid at one stroke
 * weight, so the tool cards, the course facts and the verdict marks
 * inside the React tools read as one hand. No icon font, no emoji, and
 * no Unicode glyph standing in for a symbol — the two that were doing
 * that job here are now real paths.
 * ==================================================================== */

.alrasly-ico {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	flex: 0 0 auto;
	color: var(--wp--preset--color--text-3);
	transition: color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tool cards ---------------------------------------------------------
 * The card was a flat rectangle whose only hover state was a focus ring
 * borrowed as a hover cue. Hover and focus are different questions and
 * now get different answers: hover lifts and warms the mark, focus is
 * left to the one sitewide :focus-visible ring. */
.alrasly-toolcard .alrasly-ico { margin-block-end: 0.7rem; }

.alrasly-toolcard {
	border: 1px solid transparent;
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 180ms ease,
	            background-color 180ms ease;
}

.alrasly-toolcard:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 178, 122, 0.28);
	background-color: color-mix(in srgb, var(--wp--preset--color--card) 88%, #fff);
}

/* Forward is a left nudge: this is an RTL page and the eye travels that
   way (design-system.md, rule 6). */
.alrasly-toolcard:hover .alrasly-ico {
	color: var(--wp--preset--color--accent);
	transform: translateX(-2px);
}

/* Hover was the whole affordance before. Keep the ring for the keyboard
   path, and drop the old outline-as-hover. */
.alrasly-toolcard:hover,
.alrasly-toolcard:focus-visible { outline: none; }

@supports not (background-color: color-mix(in srgb, red 50%, blue)) {
	.alrasly-toolcard:hover { background-color: #241a4a; }
}

/* Course facts -------------------------------------------------------
 * Baseline alignment is right for the number against its label and
 * wrong for a 24px box beside it, so the mark centres on the first line
 * rather than sitting on the baseline. */
.alrasly-course .crs-facts li { align-items: flex-start; }
.alrasly-course .crs-facts .alrasly-ico {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin-block-start: 0.18rem;
	color: var(--wp--preset--color--text-3);
}

/* Channel cards and the course CTA get the same lift, so "this responds
   to you" means one thing everywhere on the page. */
.alrasly-channel {
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 180ms ease;
}
.alrasly-channel:hover { transform: translateY(-3px); }
.alrasly-channel:hover .alrasly-ico { color: var(--wp--preset--color--accent); }

.alrasly-course .crs-cta {
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
	            filter 180ms ease;
}
.alrasly-course .crs-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* Scroll reveal ------------------------------------------------------
 * The hero animated once on load and the remaining seven sections were
 * static, so the page died below the fold. This is scroll-driven and
 * CSS-only: no observer, no script, no layout read. Browsers without
 * animation-timeline get the finished state and lose nothing, which is
 * why the whole block sits behind @supports rather than shipping an
 * opacity:0 that never resolves. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes alrasly-rise {
			from { opacity: 0; transform: translateY(1.1rem); }
			to   { opacity: 1; transform: none; }
		}

		main > .wp-block-group.alignfull:not(.alrasly-hero) > * {
			animation: alrasly-rise linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 26%;
		}

		/* Grid children arrive one after another rather than as a slab,
		   so the eye is led across the row instead of hit by it.
		   These sit INSIDE an element that is already fading, and two
		   nested opacity animations multiply — a card at 0.5 inside a
		   section at 0.5 renders at 0.25 and the row visibly greys out
		   mid-scroll. So the inner tier moves and never fades: the
		   section owns the fade, the children own the cascade. */
		@keyframes alrasly-shift {
			from { transform: translateY(0.9rem); }
			to   { transform: none; }
		}

		.alrasly-tools-grid > *,
		.alrasly-channels > *,
		.alrasly-sessions > *,
		.alrasly-course .crs-facts li {
			animation: alrasly-shift linear both;
			animation-timeline: view();
			animation-range: entry 4% cover 22%;
		}
		.alrasly-tools-grid > :nth-child(2),
		.alrasly-channels > :nth-child(2),
		.alrasly-course .crs-facts li:nth-child(2) { animation-range: entry 0% cover 24%; }
		.alrasly-tools-grid > :nth-child(3),
		.alrasly-channels > :nth-child(3),
		.alrasly-course .crs-facts li:nth-child(3) { animation-range: entry -4% cover 26%; }
		.alrasly-course .crs-facts li:nth-child(4) { animation-range: entry -8% cover 28%; }

		/* The cards carry a hover transform on the same property. Once
		   the reveal has finished the animation still owns transform,
		   so hover would be dead on every card the reveal touched. */
		.alrasly-tools-grid > :hover,
		.alrasly-channels > :hover { animation: none; }
	}
}


/* ====================================================================
 * Section rhythm
 * --------------------------------------------------------------------
 * All eight sections shipped at 36px top and bottom against a strictly
 * alternating ground / ground-alt. Even spacing on even alternation is
 * a metronome: every block claims the same importance, so the page
 * reads as one long stack and the eye finds nothing to land on. That
 * is most of what "text heavy" actually means here — not the amount of
 * text, but the absence of any signal about which part matters.
 *
 * Three weights, matched to what the page is for. The inline preset on
 * each block stays as the fallback; these override it.
 * ==================================================================== */

.alrasly-sec--anchor,
.alrasly-sec--convert,
.alrasly-sec--support,
.alrasly-sec--close {
	padding-block-start: var(--sec-pad-top) !important;
	padding-block-end: var(--sec-pad-bottom) !important;
}

/* The two things the page exists to do get room around them. */
.alrasly-sec--anchor  { --sec-pad-top: 5.5rem; --sec-pad-bottom: 5.5rem; }

/* The secondary ask sits between the two weights. */
.alrasly-sec--convert { --sec-pad-top: 4rem;   --sec-pad-bottom: 4rem; }

/* Context and proof are tighter, so they group as a run rather than
   presenting themselves as peers of the course. */
.alrasly-sec--support { --sec-pad-top: 2.75rem; --sec-pad-bottom: 2.75rem; }

/* Last block before the footer: a longer exhale, so the page ends
   rather than simply stopping. */
.alrasly-sec--close   { --sec-pad-top: 3rem;   --sec-pad-bottom: 5rem; }

@media (max-width: 781px) {
	/* Compress the scale on small screens but keep the ordering — the
	   anchors still read as anchors, just with less to give away. */
	.alrasly-sec--anchor  { --sec-pad-top: 3.25rem; --sec-pad-bottom: 3.25rem; }
	.alrasly-sec--convert { --sec-pad-top: 2.75rem; --sec-pad-bottom: 2.75rem; }
	.alrasly-sec--support { --sec-pad-top: 2.25rem; --sec-pad-bottom: 2.25rem; }
	.alrasly-sec--close   { --sec-pad-top: 2.25rem; --sec-pad-bottom: 3.25rem; }
}


/* ====================================================================
 * The journey diagram
 * --------------------------------------------------------------------
 * This slot held a grey box captioned "illustration — Khaled's journey
 * through the lessons". The section's own prose already names the four
 * steps, so the diagram is built from markup rather than generated as
 * a picture: the Arabic stays live text that can be proofread and read
 * aloud, it reflows on a phone, and it costs nothing to download.
 *
 * The spine runs down the inline-start edge, which is the right in RTL,
 * so the numbers sit where the eye starts.
 * ==================================================================== */

.alrasly-journey { margin: 0; }

.alrasly-journey .jrn__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: grid;
	gap: 1.35rem;
}

/* One continuous line behind the nodes, stopping at the centre of the
   first and last so it never runs past the journey it describes. */
.alrasly-journey .jrn__steps::before {
	content: "";
	position: absolute;
	inset-block: 1.25rem;
	inset-inline-start: 1.25rem;
	inline-size: 2px;
	border-radius: 2px;
	/* Warms as it descends, so the line agrees with the last node being
	   the accented one — the journey arrives somewhere. At 1px the
	   violet end was invisible against ground-alt; 2px and a higher
	   floor keep both ends readable. */
	background: linear-gradient(
		to bottom,
		rgba(124, 58, 245, 0.85),
		rgba(255, 178, 122, 0.9)
	);
}

.alrasly-journey .jrn__step {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	position: relative;
}

.alrasly-journey .jrn__node {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.09);
	/* lifts the node off the spine that passes behind it */
	position: relative;
	z-index: 1;
	transition: border-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alrasly-journey .jrn__node .alrasly-ico {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	color: var(--wp--preset--color--text-2);
}

.alrasly-journey .jrn__body { display: flex; flex-direction: column; gap: 0.1rem; }

.alrasly-journey .jrn__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.7rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

.alrasly-journey .jrn__label {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text);
}

.alrasly-journey .jrn__cap {
	margin: 1.15rem 0 0;
	padding-inline-start: 3.35rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-3);
}

/* The last step is where the section is going, so it is the one that
   carries the accent. */
.alrasly-journey .jrn__step:last-child .jrn__node {
	border-color: rgba(255, 178, 122, 0.4);
}
.alrasly-journey .jrn__step:last-child .alrasly-ico {
	color: var(--wp--preset--color--accent);
}

/* Reveal the steps in order, so the diagram is walked rather than
   presented. Same guard as the rest of the page: scroll-driven, no
   script, and nothing to undo where it is unsupported. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes alrasly-step-in {
			from { opacity: 0; transform: translateY(0.55rem); }
			to   { opacity: 1; transform: none; }
		}
		.alrasly-journey .jrn__step {
			animation: alrasly-step-in linear both;
			animation-timeline: view();
		}
		.alrasly-journey .jrn__step:nth-child(1) { animation-range: entry 6%  cover 18%; }
		.alrasly-journey .jrn__step:nth-child(2) { animation-range: entry 2%  cover 21%; }
		.alrasly-journey .jrn__step:nth-child(3) { animation-range: entry -2% cover 24%; }
		.alrasly-journey .jrn__step:nth-child(4) { animation-range: entry -6% cover 27%; }
	}
}

@media (max-width: 781px) {
	.alrasly-journey { margin-block-end: 1.5rem; }
}

/* On desktop the diagram sits in the inline-start column, which is the
   right in RTL and therefore where the eye starts — correct there. When
   the columns stack on a phone, source order puts it above its own
   heading, so the reader meets four unlabelled steps before learning
   whose journey they are. Send the prose up. */
@media (max-width: 781px) {
	.alrasly-sec--support:has(.alrasly-journey) .wp-block-column:first-child { order: 2; }
	.alrasly-sec--support:has(.alrasly-journey) .wp-block-column:last-child  { order: 1; }
	.alrasly-journey { margin-block-start: 1.5rem; margin-block-end: 0; }
}


/* ====================================================================
 * The mobile navigation overlay
 * --------------------------------------------------------------------
 * Three separate faults, all only visible with the menu actually open:
 *
 * 1. It was clipped to the height of the header bar. Fixed at the source
 *    — see the header frost above, which now sits on a pseudo-element
 *    so it stops acting as a containing block for fixed descendants.
 * 2. Core aligns the items to flex-end. On a column flex in RTL that
 *    resolves to the LEFT edge, so the whole menu sat against the wrong
 *    side of the screen.
 * 3. No inline padding at all, so the labels touched the screen edge.
 *
 * The overlay is also the one other surface on this site where a frost
 * is doing work rather than decorating: it covers live page content, so
 * blurring it keeps the link labels legible over whatever happens to be
 * underneath while still showing you did not leave the page.
 * ==================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: rgba(14, 10, 36, 0.86) !important;
	backdrop-filter: blur(20px) saturate(130%);
	-webkit-backdrop-filter: blur(20px) saturate(130%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--ground) !important;
	}
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	/* inline-start, which is the right in RTL and the left in LTR */
	align-items: flex-start;
	padding-inline: 1.6rem;
	padding-block: 4.75rem 2rem;
	gap: 0.15rem;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
	/* Comfortably past the 44px touch minimum, and big enough to read as
	   the primary navigation rather than a list of small links. */
	display: block;
	padding-block: 0.6rem;
	font-size: 1.25rem;
	line-height: 1.6;
}

/* The items arrive in sequence when the overlay opens, which gives the
   panel a direction instead of appearing all at once. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes alrasly-menu-in {
		from { opacity: 0; transform: translateY(0.5rem); }
		to   { opacity: 1; transform: none; }
	}
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
		animation: alrasly-menu-in 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 30ms; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 65ms; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 100ms; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 135ms; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 170ms; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 205ms; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 240ms; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 275ms; }
}


/* ====================================================================
 * The single course page
 * --------------------------------------------------------------------
 * Our layout, Tutor's data. See theme/tutor/single-course.php for what
 * is preserved and why, and plan/course-page-audit.md for the 9/20 the
 * stock layout scored.
 *
 * The page now uses the same vocabulary as the homepage: the same hero
 * shape, the same drawn marks, the same card fill and radius, the same
 * section weights. Nothing here restyles the enrolment form's internals
 * — that is Tutor's and it works.
 * ==================================================================== */

.alrasly-crs {
	background-color: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--text);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.alrasly-crs-hero {
	background-color: var(--wp--preset--color--ground);
	padding-block: 3.25rem 3.5rem;
	border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}
.alrasly-crs-hero__inner {
	max-inline-size: 1180px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	display: grid;
	grid-template-columns: 1fr 42%;
	gap: 2.5rem;
	align-items: center;
}
.alrasly-crs-eyebrow {
	margin: 0 0 0.65rem;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--accent);
}
.alrasly-crs-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	line-height: 1.16;
	font-weight: 600;
	color: var(--wp--preset--color--text);
}
.alrasly-crs-hero .alrasly-squiggle { margin: 0.75rem 0 1.5rem; }

.alrasly-crs-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
}
.alrasly-crs-facts li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-2);
}
.alrasly-crs-facts .alrasly-ico {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	color: var(--wp--preset--color--text-3);
}
.alrasly-crs-facts b {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	color: var(--wp--preset--color--text);
}

.alrasly-crs-hero__cover { margin: 0; }
.alrasly-crs-hero__cover img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--wp--custom--radius--card, 12px);
	box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.9);
}

/* ── Body grid ────────────────────────────────────────────────────────
 * Three siblings, not a nested sidebar, so the buy box can sit under the
 * hero on a phone and beside the content on a desktop without being
 * rendered twice. Named areas rather than order, because the DOM order
 * (buy, main, meta) is also the correct reading order on mobile. */
.alrasly-crs-grid {
	max-inline-size: 1180px;
	margin-inline: auto;
	padding: 2.75rem 1.5rem 4rem;
	display: grid;
	grid-template-columns: 1fr 340px;
	grid-template-areas: "main buy";
	gap: 2.5rem;
	align-items: start;
}
/* The buy card is now ALONE in its column.
 *
 * It used to share the column with the instructor and audience blocks in
 * a second grid row, and a sticky element's containing block is its own
 * grid area -- which was exactly the card's height, leaving zero scroll
 * room. It barely stuck at all, and the blocks below scrolled up into
 * it. With one item in the column the area spans the full grid height,
 * so the card can travel the whole page with nothing to collide with. */
.alrasly-crs-buy  { grid-area: buy; position: sticky; inset-block-start: 5.5rem; }
.alrasly-crs-main { grid-area: main; min-inline-size: 0; }

/* ── Tutor's own blocks, brought onto the palette ──────────────────── */
.alrasly-crs .tutor-card,
.alrasly-crs-buy > div,
.alrasly-crs-meta .tutor-single-course-segment,
.alrasly-crs-meta > div {
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--wp--custom--radius--card, 12px);
	color: var(--wp--preset--color--text-2);
}
.alrasly-crs .tutor-color-black,
.alrasly-crs .tutor-color-secondary,
.alrasly-crs h2, .alrasly-crs h3, .alrasly-crs h4, .alrasly-crs h5 {
	color: var(--wp--preset--color--text) !important;
}
.alrasly-crs p, .alrasly-crs li, .alrasly-crs td {
	color: var(--wp--preset--color--text-2);
}

/* Tutor ships its own greys and an orange star. Neither is in this
   palette; the audit found rgb(117,124,142) 9 times and rgb(237,151,0)
   on the rating. */
.alrasly-crs .tutor-ratings-stars i,
.alrasly-crs .tutor-icon-star-bold,
.alrasly-crs .tutor-icon-star-half-bold {
	color: var(--wp--preset--color--accent) !important;
}

/* The tab nav was a component from another design system. Reduced to a
   quiet underline row that matches the site's link treatment. */
.alrasly-crs-nav {
	border-block-end: 1px solid rgba(255, 255, 255, 0.08);
	margin-block-end: 1.75rem;
}
/* Tutor emits <nav> with bare <li> children and no <ul>, so the list has to
   be styled on the nav itself. */
.alrasly-crs-nav .tutor-nav {
	display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0;
}
.alrasly-crs-nav .tutor-nav-item { list-style: none; }
.alrasly-crs-nav a {
	display: block;
	padding-block: 0.75rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-2);
	text-decoration: none;
	border-block-end: 2px solid transparent;
	/* the audit measured both tab controls under 44px */
	min-block-size: 44px;
}
.alrasly-crs-nav a:hover { color: var(--wp--preset--color--text); }
.alrasly-crs-nav .is-active a,
.alrasly-crs-nav a.is-active,
.alrasly-crs-nav .tutor-nav-link.is-active {
	color: var(--wp--preset--color--text);
	border-block-end-color: var(--wp--preset--color--accent);
}

/* ── The mobile buy bar ───────────────────────────────────────────────
 * The only add-to-cart used to sit at 83% of a 5,836px page. This is a
 * link to that one control, not a second form. */
.alrasly-crs-bar { display: none; }

@media (max-width: 1023px) {
	.alrasly-crs-hero__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
	/* cover under the words, as on the homepage hero */
	.alrasly-crs-hero__cover { order: 2; }
	.alrasly-crs-hero__text  { order: 1; }

	.alrasly-crs-grid {
		grid-template-columns: 1fr;
		grid-template-areas: "buy" "main";
		padding-block: 2rem 3rem;
	}
	.alrasly-crs-buy { position: static; }

	.alrasly-crs-bar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
		background-color: rgba(14, 10, 36, 0.86);
		backdrop-filter: blur(16px) saturate(140%);
		-webkit-backdrop-filter: blur(16px) saturate(140%);
		border-block-start: 1px solid rgba(255, 255, 255, 0.08);
	}
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.alrasly-crs-bar { background-color: var(--wp--preset--color--ground); }
	}
	.alrasly-crs-bar__title {
		font-size: 0.875rem;
		color: var(--wp--preset--color--text-2);
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.alrasly-crs-bar__cta {
		flex: 0 0 auto;
		display: inline-flex; align-items: center;
		min-block-size: 44px;
		padding-inline: 1.15rem;
		border-radius: 999px;
		background-color: var(--wp--preset--color--accent);
		color: #1B1442;
		font-size: 0.9375rem;
		font-weight: 500;
		text-decoration: none;
	}
	/* the bar covers the end of the page otherwise */
	.alrasly-crs { padding-block-end: 4.5rem; }
	/* body copy was 14.4px on a phone */
	.alrasly-crs p, .alrasly-crs li { font-size: 1rem; }
}


/* ── The description, set to read ─────────────────────────────────────
 * The sales copy is 760 words of alternating heading / paragraph / list
 * with no typographic system on it — the same undifferentiated stack the
 * homepage had before its section rhythm went in. */
.alrasly-crs-main .alrasly-course-desc,
.alrasly-crs-main .tutor-course-details-content {
	max-inline-size: var(--alrasly-measure, 660px);
}
.alrasly-crs-main .alrasly-course-desc > h2,
.alrasly-crs-main .alrasly-course-desc > h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	line-height: 1.4;
	font-weight: 600;
	margin-block: 2.5rem 0.85rem;
	color: var(--wp--preset--color--text);
}
.alrasly-crs-main .alrasly-course-desc > h3:first-child { margin-block-start: 0; }
.alrasly-crs-main .alrasly-course-desc > p {
	margin-block: 0 1.05rem;
	line-height: 1.85;
	color: var(--wp--preset--color--text-2);
}
.alrasly-crs-main .alrasly-course-desc ul {
	margin-block: 0 1.5rem;
	padding-inline-start: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}
/* A drawn marker rather than a disc, on the accent, so the lists match
   the marks used everywhere else. */
.alrasly-crs-main .alrasly-course-desc ul > li {
	position: relative;
	padding-inline-start: 1.5rem;
	line-height: 1.8;
	color: var(--wp--preset--color--text-2);
}
.alrasly-crs-main .alrasly-course-desc ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.15rem;
	inset-block-start: 0.72em;
	inline-size: 0.42rem;
	block-size: 0.42rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
}
/* Empty paragraphs in the pasted copy were opening large holes between
   sections. */
.alrasly-crs-main .alrasly-course-desc > p:empty { display: none; }

/* Curriculum rows: the audit found one at 19px tall. */
.alrasly-crs .tutor-course-topic-item,
.alrasly-crs [class*="tutor-course-content-list"] a {
	min-block-size: 44px;
	display: flex;
	align-items: center;
}

/* Hero breathing room, matched to the homepage anchor sections. */
@media (min-width: 1024px) {
	.alrasly-crs-hero { padding-block: 4.5rem 4.75rem; }
}

/* The page ground.
 *
 * On a Tutor single template the whole ancestor chain — html, body,
 * .wp-site-blocks — computes to rgba(0,0,0,0), so the browser paints its
 * own white behind everything. The block theme's global body background
 * does not reach here because tutor_custom_header() emits its own document
 * shell. The symptom is a white band above the hero and white showing
 * through anywhere a section does not paint itself.
 *
 * Tutor's own .tutor-wrap also outclasses a single-class rule and carries a
 * top margin, which was the visible gap under the header. */
body.single-courses,
body.tutor-lms.single-courses {
	background-color: var(--wp--preset--color--ground);
}
.alrasly-crs.tutor-wrap,
.alrasly-crs.tutor-page-wrap {
	background-color: var(--wp--preset--color--ground);
	margin-block-start: 0;
}


/* ── The curriculum, as five units ────────────────────────────────────
 * The course now has the five topics the homepage always claimed, so
 * the curriculum can finally show structure instead of a flat run of
 * thirty identical rows. Each unit is a card carrying its own number,
 * the same device the homepage uses for «وش يتعلم», so the two pages
 * describe the product the same way.
 *
 * Tutor's own accordion behaviour is untouched — this is presentation
 * only, and the header stays the element its script binds to. */
.alrasly-crs .tutor-accordion {
	display: grid;
	gap: 0.85rem;
	counter-reset: alrasly-unit;
}

.alrasly-crs .tutor-accordion-item {
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--wp--custom--radius--card, 12px);
	overflow: hidden;
	transition: border-color 200ms ease;
}
.alrasly-crs .tutor-accordion-item:hover { border-color: rgba(255, 255, 255, 0.13); }

.alrasly-crs .tutor-accordion-item-header {
	counter-increment: alrasly-unit;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	padding: 1.05rem 1.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--text) !important;
	cursor: pointer;
	min-block-size: 44px;
}

/* The unit number, drawn from a counter so it cannot drift out of step
   with the topics Tutor actually renders. */
.alrasly-crs .tutor-accordion-item-header::before {
	content: counter( alrasly-unit, arabic-indic );
	flex: 0 0 auto;
	inline-size: 1.85rem;
	block-size: 1.85rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background-color: rgba(124, 58, 245, 0.22);
	border: 1px solid rgba(167, 154, 217, 0.3);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-2);
	font-variant-numeric: tabular-nums;
}
.alrasly-crs .tutor-accordion-item-header.is-active::before {
	background-color: rgba(255, 178, 122, 0.18);
	border-color: rgba(255, 178, 122, 0.5);
	color: var(--wp--preset--color--accent);
}

.alrasly-crs .tutor-accordion-item-body-content { padding: 0 1.25rem 0.5rem; }

.alrasly-crs .tutor-course-content-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.alrasly-crs .tutor-course-content-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.6rem;
	min-block-size: 44px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.05);
}
.alrasly-crs .tutor-course-content-list-item:first-child { border-block-start: none; }
.alrasly-crs .tutor-course-content-list-item-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--text-2) !important;
}
.alrasly-crs .tutor-course-content-list-item-icon { color: var(--wp--preset--color--text-3); }
.alrasly-crs .tutor-course-content-list-item-duration {
	color: var(--wp--preset--color--text-3) !important;
	font-variant-numeric: tabular-nums;
	font-size: 0.8125rem;
}
.alrasly-crs .tutor-course-content-list-item-status { color: var(--wp--preset--color--text-3) !important; }

/* The unit summary is delivered as a hover tooltip, which is invisible
   on a touch screen and to anyone not hovering — so it is promoted to
   ordinary text under the unit title. */
.alrasly-crs .tutor-accordion-item-header .tooltip-wrap {
	position: static;
	flex: 1 1 100%;
	order: 3;
	margin-block-start: 0.15rem;
}
.alrasly-crs .tutor-accordion-item-header .tooltip-txt {
	position: static;
	display: block;
	visibility: visible;
	opacity: 1;
	transform: none;
	inline-size: auto;
	max-inline-size: none;
	padding: 0;
	background: none;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--text-3);
	white-space: normal;
	text-align: start;
}
.alrasly-crs .tutor-accordion-item-header .tooltip-txt::before,
.alrasly-crs .tutor-accordion-item-header .tooltip-txt::after { display: none; }
.alrasly-crs .tutor-accordion-item-header { flex-wrap: wrap; }
/* The tooltip's own trigger glyph is meaningless once the text it would
   have revealed is shown inline. */
.alrasly-crs .tutor-accordion-item-header .tooltip-wrap.tooltip-icon::before,
.alrasly-crs .tutor-accordion-item-header .tooltip-wrap.tooltip-icon::after {
	content: none !important;
	display: none !important;
}
.alrasly-crs .tutor-accordion-item-header .tooltip-wrap.tooltip-icon {
	background-image: none !important;
	font-size: 0;
}
.alrasly-crs .tutor-accordion-item-header .tooltip-txt { font-size: 0.8125rem; }


/* ── Contents, for the long tool pages ────────────────────────────────
 * The gratuity page is 9,578px answering thirteen separate questions.
 * Readers arrive with one of them. This is the index that lets them go
 * straight to it instead of scrolling the lot; it is built from the
 * headings at runtime (assets/js/tool-toc.js) so it cannot drift. */
.alrasly-toc {
	max-inline-size: 1180px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem 1.4rem;
	box-sizing: border-box;
}
.alrasly-toc__title {
	margin: 0 0 0.8rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--accent);
}
.alrasly-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}
.alrasly-toc__list li { margin: 0; }
.alrasly-toc__list a {
	display: inline-block;
	padding: 0.45rem 0.85rem;
	min-block-size: 44px;
	line-height: 1.55;
	border-radius: 999px;
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-2);
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.alrasly-toc__list a:hover,
.alrasly-toc__list a:focus-visible {
	color: var(--wp--preset--color--text);
	border-color: rgba(255, 178, 122, 0.42);
	transform: translateY(-1px);
}

/* The header is sticky and frosted, so an anchor jump would otherwise land
   the heading underneath it. */
.alrasly-gsec h2[id] { scroll-margin-block-start: 5.5rem; }

@media (max-width: 781px) {
	.alrasly-toc { padding-inline: 1.25rem; }
	.alrasly-toc__list a { font-size: 0.875rem; }
}

/* ---------------------------------------------------------------------------
   The embedded lesson on /free-lesson/.

   aspect-ratio on the frame, not a padding-bottom hack: the iframe fills a box
   whose shape is declared, so the page reserves the height before YouTube
   answers and nothing jumps when it does. Radius matches the card token. The
   figure carries no margin of its own — the section's rhythm places it.
   ------------------------------------------------------------------------ */
.alrasly-video { margin: 0; }
.alrasly-video__frame {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card, 12px);
	background: var(--wp--preset--color--card);
}
.alrasly-video__frame iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* ── /en/course/ — the English sales page for course 4989 (11 Sep 2026) ──
   Lives here rather than in course-design.css because that file is enqueued only
   on Tutor's single templates, and this is an ordinary page. The table carries
   the Arabic lesson title under each English one, in its own direction. */
.alrasly-cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0.8rem 1.25rem; border-radius: 10px;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ground);
	font-weight: 500; text-decoration: none;
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), filter 180ms;
}
.alrasly-cta:hover { transform: translateY(-2px); filter: brightness(1.06); color: var(--wp--preset--color--ground); }
.alrasly-cta--secondary {
	background: transparent; color: var(--wp--preset--color--accent);
	border: 1px solid rgba(255, 178, 122, 0.45);
}
.alrasly-cta--secondary:hover { color: var(--wp--preset--color--accent); }
.alrasly-crs-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0.5rem; }
.alrasly-crs-lang { border-block-start-color: rgba(124, 58, 245, 0.55); }
.alrasly-crs-table td, .alrasly-crs-table th { vertical-align: top; }
.alrasly-crs-table .alrasly-crs-unit th {
	background: var(--wp--preset--color--card); color: var(--wp--preset--color--text);
	font-weight: 500; text-align: start; padding-block: 0.7rem;
}
.alrasly-crs-ar { display: block; font-size: 0.85rem; color: var(--wp--preset--color--text-3); line-height: 1.9; }
.alrasly-crs-preview {
	display: inline-block; margin-inline-start: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px;
	font-size: 0.7rem; font-weight: 500; background: rgba(255, 178, 122, 0.16); color: var(--wp--preset--color--accent);
	vertical-align: middle;
}
@media (max-width: 640px) {
	.alrasly-crs-table th:nth-child(4), .alrasly-crs-table td:nth-child(4) { display: none; }   /* length column goes; the caption carries the total */
}