/* ==========================================================================
   v3 — Game landing pages
   Figma 8440:16317 (اللعبة الجماعية) and 8440:16683 (وصلها)

   The two pages are structurally identical — hero, about, categories, pricing,
   hints, then the shared CTA + footer — so one stylesheet and one template
   serve both; only copy and imagery differ.

   Desktop values are pinned to Figma. Phone/tablet behaviour is DERIVED (the
   Figma Mobile page is the in-app design, not a responsive web view).
   Breakpoints follow the project convention: 1200 / 900 / 600.

   Depends on tokens.css + components.css. Load after both.
   ========================================================================== */

.v3-glanding { background: var(--v3-bg-page); overflow-x: hidden; }

/* ==========================================================================
   Hero — node 8440:16318 (1440 x 740)
   Orange, centred copy, then two store pills and a cream CTA.
   ========================================================================== */

.v3-ghero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 740px;
	background: var(--v3-bg-brand);
	overflow: hidden;
}

/* Ellipse 127 again — a white circle under a Gaussian blur, reproduced in CSS.
   Figma's wrapper insets are -76.69%, the same ratio as the home hero, so the
   blur radius is (0.7669 * size) / 2 = 395 for this 1030px circle. Its centre
   sits off the right edge, so only its inner falloff shows. */
.v3-ghero__glow {
	position: absolute;
	left: calc(50% + 1059px);
	top: 132px;
	transform: translate(-50%, -50%);
	width: 1030px;
	height: 1030px;
	border-radius: 50%;
	background: var(--v3-white);
	filter: blur(395px);
	pointer-events: none;
	z-index: 0;
}

/* image 61 — a faded card at 8% opacity, rotated 153.99deg.
   Figma's image-fill export is blank (the fourth such node in this file), so
   this is the node's RENDERED png, which already bakes in the rotation and the
   opacity. Placed on the wrapper's centre rather than its corner, since the
   render is cropped to the artwork rather than the 415.883 wrapper box. */
.v3-ghero__deco {
	position: absolute;
	/* ANCHORED TO THE RIGHT EDGE, not to Figma's x.

	   left: 1360.94px is where the card sits on a 1440 canvas, and only there:
	   on a wider screen it drifted into open orange in the middle of the hero,
	   and the bleed off the edge — which is the point of the mark — became a
	   card floating in the middle of nothing.

	   Figma puts its centre 79.06px from the right edge and the box is 287 wide,
	   so 143.5 - 79.06 = 64.44px of it hangs off. Stated as a negative right
	   offset, that holds at every width. The X translate goes with it; the Y one
	   stays, because top still centres the box on its own line. */
	right: -64.44px;
	top: 646.94px;
	transform: translateY(-50%);
	width: 287px;
	height: 416px;
	/* §4.1: "توضيح الكروت الموجودة في خلفية الهيرو أكثر".

	   The 8% is baked into the PNG export, so `opacity` cannot raise it — it
	   only ever multiplies down. The opacity() FILTER accepts amounts above
	   100% and multiplies the alpha channel, clamping per pixel, which is the
	   one way to make an already-transparent asset stronger without
	   re-exporting it. The export peaks at 7.8% alpha, so 3.2x lands near 25%:
	   the card edges and their overlap read clearly against the orange, and the
	   heading still owns the section. */
	filter: opacity(320%);
	pointer-events: none;
	z-index: 0;
}

/* Node 8683:16210 — وصلها's hero mark. Measured off the Figma render rather
   than the node tree, whose "Letter" frames carry padding that is not the
   hexagon geometry:

     - hexagons are flat-top and UNROTATED, on a 305 x 165 tile (fitted against
       the render at IoU .97, so the lattice matches rather than merely looks
       similar)
     - they are white at ~3.7% over the brand orange, and honeycomb.svg already
       paints at fill-opacity .035 — so no opacity goes on top of it
     - the block stops on a straight diagonal, y = 0.5448x + 398 measured across
       the hero, leaving the top and right of the section clear

   The mask is that line. Its ramp is soft because a hard cut through a repeating
   tile slices hexagons in half; Figma's block ends on whole ones. */
.v3-ghero__hex {
	position: absolute;
	inset: 0;
	-webkit-mask: linear-gradient(208.6deg, transparent 75%, #000 80%);
	mask: linear-gradient(208.6deg, transparent 75%, #000 80%);
	pointer-events: none;
	z-index: 0;
}

/* The honeycomb is drawn as a mask over a white fill rather than as
   honeycomb.svg's own background, because that file bakes fill-opacity .035 and
   there is no way to turn a baked opacity UP. Here it needs to read a little
   stronger than the plan cards do, so the opacity lives in CSS and the shared
   asset stays untouched. The outer element carries the diagonal. */
.v3-ghero__hex::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--v3-white);
	/* §6.1: "توضيح رسومات الخلايا ... ورفع ظهورها قليلاً دون التأثير على قراءة النص".
	   Painted here rather than in honeycomb.svg, which bakes .035 — the whole
	   reason the fill lives in CSS is so this number can move. */
	opacity: .09;
	-webkit-mask-image: url("/img/v3/pricing/honeycomb-solid.svg");
	mask-image: url("/img/v3/pricing/honeycomb-solid.svg");
	-webkit-mask-size: 305px 165px;
	mask-size: 305px 165px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}

/* z-index only — see the note in home.css. */
.v3-ghero .v3-navbar { z-index: 40; }

/* Figma pads the hero 190/80 and then CENTRES the block in what is left — it
   does not simply start at the padding. 111 of that 190 is the navbar itself,
   so the body carries the remaining 79 and grows to fill the section. */
.v3-ghero__body {
	position: relative;
	z-index: 2;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--v3-space-8);              /* 48px */
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 79px var(--v3-space-5) 80px;
	text-align: center;
}

.v3-ghero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-5);              /* 24px */
	width: 100%;
	color: var(--v3-text-inverse);
}

.v3-ghero__copy h1 {
	margin: 0;
	font-size: var(--v3-fs-h1);          /* 48px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
}

.v3-ghero__copy p {
	margin: 0;
	font-size: var(--v3-fs-h4);          /* 24px Medium */
	font-weight: var(--v3-fw-medium);
	line-height: 38px;                   /* Web/H4: Medium carries an explicit 38px */
}

/* A COLUMN, NOT A ROW. Figma lines the play button up beside the two store
   pills, which reads as three equal choices. §4.1 makes play primary and the
   stores an alternative underneath, so the axis turns and the stores get a
   label of their own. */
.v3-ghero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-5);              /* 24px */
}

.v3-ghero__alt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-3);              /* 12px */
}

/* Quieter than the button by size and weight both, so the hierarchy survives
   even where the two sit close together. */
.v3-ghero__alt-label {
	color: var(--v3-text-inverse);
	font-family: var(--v3-font);
	font-size: var(--v3-fs-body);
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-auto);
	opacity: .85;
}

.v3-ghero__stores {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--v3-space-4);              /* 16px */
}

/* Store pill — this page's version is filled cream with a green border and
   green type, unlike the home hero's transparent/white one. Different enough
   to be its own component rather than a modifier. */
.v3-gstore {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--v3-space-4);              /* 16px */
	width: 180px;
	height: 56px;
	padding: var(--v3-space-3) 22px;
	border: 1px solid var(--v3-border-green);
	border-radius: 40px;
	background: var(--v3-bg-page);
	color: var(--v3-text-secondary);
	direction: ltr;                      /* Latin label + leading glyph */
	text-decoration: none;
}

.v3-gstore__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	font-size: var(--v3-fs-caption);     /* 14px */
	line-height: var(--v3-lh-auto);
	white-space: nowrap;
}

.v3-ghero__play { width: 180px; }

.v3-gstore__text small { font-weight: var(--v3-fw-medium); }
.v3-gstore__text strong { font-weight: var(--v3-fw-bold); }

/* MDB's a:hover outranks a bare class — see the link-state guard. */
.v3-gstore:link, .v3-gstore:visited, .v3-gstore:hover,
.v3-gstore:focus, .v3-gstore:active {
	color: var(--v3-text-secondary);
	text-decoration: none;
}

.v3-gstore:hover { background: var(--v3-bg-surface); }

/* The hero's divider. Figma puts Ellipse 131 at y=617 in a 740px section, so
   it hangs 57px past the bottom edge. Unlike the home hero's, this one is NOT
   centred — it is pinned to x=0 at 1471 wide (trivia) or x=-20 at 1495 (وصلها),
   which shifts the apex a little. */
.v3-ghero .v3-wave {
	z-index: 2;
	--v3-wave-drop: 57px;
	left: var(--v3-ghero-wave-x, 0);
	width: var(--v3-ghero-wave-w, 102.153%);   /* 1471 / 1440 */
	transform: none;
}

.v3-ghero--wasalha .v3-wave {
	--v3-ghero-wave-x: -20px;
	--v3-ghero-wave-w: 103.819%;               /* 1495 / 1440 */
}


/* ==========================================================================
   "تعرف على …" — nodes 8440:16340 (trivia) / 8440:16707 (وصلها)
   Section title, then a numbered how-to-play list with the phone mockup
   overlapping on the left, and a store/CTA row underneath.
   ========================================================================== */

.v3-gabout {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-8);              /* 48px */
	/* Figma's frame is 818 tall while its content only fills 750 — the inner
	   block is flex:1 and absorbs the slack at the bottom. The height is kept
	   so the sections below start where the design puts them. */
	min-height: 818px;
	padding: 124px 100px 40px;
	background: var(--v3-bg-page);
	overflow: hidden;
}

.v3-gabout__title {
	margin: 0;
	color: var(--v3-text-secondary);     /* #064e3b */
	font-size: var(--v3-fs-h2);          /* 40px Bold */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
	text-align: center;
}

.v3-gabout__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 56px;
	width: 100%;
	max-width: 1240px;
}

.v3-gabout__how {
	/* The phone is absolutely placed, so the steps have to reserve room for it.
	   Both read these, which is why they sit here and not on the phone. */
	--phone-scale: 1;
	--phone-left: -40px;
	--phone-width: calc(395.791px * var(--phone-scale));

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-6);              /* 32px */
	width: 100%;
}

.v3-gabout__how h3 {
	margin: 0;
	color: var(--v3-text-primary);       /* #04372a */
	font-size: var(--v3-fs-h2);          /* 40px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
	text-align: right;
}

.v3-gabout__steps {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-5);              /* 24px */
	width: 100%;
	margin: 0;
	padding: 0;
	/* Stop where the phone starts — node 8440:16714. */
	padding-left: calc(var(--phone-left) + var(--phone-width));
	list-style: none;
}

/* RTL: the number sits at the start (right), so it comes first in the DOM. */
.v3-gabout__step {
	display: flex;
	align-items: center;
	gap: var(--v3-space-6);              /* 32px */
	padding: var(--v3-space-4) 0;        /* 16px */
}

.v3-gabout__num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 40px;
	background: var(--v3-bg-brand);
	color: var(--v3-text-inverse);
	font-size: var(--v3-fs-h3);          /* 32px Regular */
	font-weight: var(--v3-fw-regular);
	line-height: var(--v3-lh-auto);
}

.v3-gabout__step p {
	margin: 0;
	color: var(--v3-text-primary);
	font-size: var(--v3-fs-h4);          /* 24px Medium */
	font-weight: var(--v3-fw-medium);
	line-height: 38px;
	text-align: right;
}

/* The step's own name, so four steps scan as a sequence rather than as four
   sentences of equal weight. Bold and in the heading green — the body stays
   medium, which is the contrast doing the work rather than a size change. */
.v3-gabout__lead {
	color: var(--v3-green-900);
	font-weight: var(--v3-fw-bold);
}

/* Phone overlaps the list on the left, tilted -11.9deg (baked into the image).
   Wrapper 395.791 x 633.979 at (-40, -89) relative to the how-to block. */
.v3-gabout__phone {
	position: absolute;
	left: var(--phone-left);
	top: -89px;
	z-index: 1;
	width: var(--phone-width);
	height: calc(633.979px * var(--phone-scale));
	pointer-events: none;
}

.v3-gabout__phone > img:not(.v3-gabout__deco) {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Decorative hand — node 8440:16377, tilted 13.31deg (baked in). Same blank
   image-fill export problem as the others, so this is the node's render with
   its cream background keyed out.

   IT SITS ON THE PHONE'S CORNER, IN FRONT OF IT. Both about sections put it
   last in the frame — 8440:16377 on the trivia side, 8440:16744 on وصلها,
   same box in both — and last means on top. It was at z-index 0 under a
   phone at 1, and 146 BELOW that phone's top rather than above it, so it was
   inside the phone's box with the phone painted over it: on the old cut-out
   artwork a sliver showed through the transparent corner, and once the
   artwork was re-exported it disappeared completely.

   THE HOME PAGE'S OWN NUMBERS, not this section's frame. index.ejs draws the
   same pair — a phone with this hand on its corner — and its first row is this
   layout, phone left and copy right: .v3-feature__phone sets --deco-x: -0.2px
   and --deco-y: -81px against the phone's box. Those are used verbatim here so
   the two pages cannot drift.

   The frame for this section places the hand higher, 130.82 above the phone
   rather than 81, which left it reading as a separate object floating off the
   corner instead of resting on it.

   BEHIND THE PHONE, also as on the home page: the artwork is cut out where the
   hand falls, so the part that overlaps shows through and the rest is hidden by
   the phone's body. That is what makes it look tucked behind rather than stuck
   on top. It needs the phone art to be a positioned layer above it — see the
   rule above; an absolute element outranks a static sibling on its own. */
.v3-gabout__deco {
	position: absolute;
	left: calc(-0.2px * var(--phone-scale));
	top: calc(-81px * var(--phone-scale));
	z-index: 0;                          /* under the phone art's 1 */
	width: calc(155.489px * var(--phone-scale));
	height: calc(171.832px * var(--phone-scale));
	object-fit: contain;
	pointer-events: none;
}

/* Store + CTA row. These pills use a LIGHTER border than the hero's
   (Border/Green-Tertiary #58887c), and the App Store one is wider with a
   bigger glyph — a genuinely different export, not a rescale. */
.v3-gabout__actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;         /* right, in RTL */
	gap: var(--v3-space-5);              /* 24px */
	width: 100%;
}

.v3-gabout__actions .v3-gstore { border-color: var(--v3-text-tertiary); }
.v3-gabout__actions .v3-gstore--wide { width: 200px; }
.v3-gabout__actions .v3-btn { width: 230px; }


/* ==========================================================================
   الفئات — nodes 8440:16398 (trivia) / 8440:16765 (وصلها)
   Heading, a full-bleed card strip that overflows both edges, then a CTA.
   Cards are real DB categories, not the Figma placeholders.
   ========================================================================== */

.v3-gcats {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 80px 0;
	background: var(--v3-bg-page);
}

.v3-gcats__head {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-6);              /* 32px */
	width: 100%;
	max-width: 1240px;
	padding: 0 var(--v3-space-5);
	text-align: center;
}

.v3-gcats__head h2 {
	margin: 0;
	color: var(--v3-text-brand);         /* #dc6f38 */
	font-size: var(--v3-fs-h2);          /* 40px Bold */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
}

.v3-gcats__head p {
	margin: 0;
	color: var(--v3-text-primary);
	font-size: var(--v3-fs-h4);          /* 24px Medium */
	font-weight: var(--v3-fw-medium);
	line-height: 38px;
}

/* The strip is 671 tall in Figma so the enlarged centre card has headroom.
   It deliberately overflows both edges; scrollable so every card stays
   reachable, with the same drag-to-scroll helper the Instagram row uses.

   --v3-gcats-grow is read by drag-scroll.js: how far the centre card grows,
   as a fraction of its base width. 1/3 takes 268.981px to Figma's 358.642px.
   The focus pushes the cards to either side outward by half that growth, so
   the inline padding has to leave at least that much slack or the row loses
   its ends at the extremes of the scroll. */
.v3-gcats__strip {
	--v3-gcats-grow: .33333;

	display: flex;
	align-items: center;
	gap: 28px;
	width: 100%;
	height: 671px;
	padding-inline: max(90px, calc((100% - 1240px) / 2));
	scroll-snap-type: x proximity;
	overflow-x: auto;
	scrollbar-width: none;
	cursor: grab;
	scroll-behavior: smooth;
}

.v3-gcats__strip::-webkit-scrollbar { display: none; }

.v3-gcats__strip.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	-webkit-user-select: none;   /* Safari, iOS Safari */
	user-select: none;
}

.v3-gcats__strip.is-dragging img { pointer-events: none; }

.v3-gcats__card {
	flex: 0 0 auto;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 268.981px;
	height: 432px;
	border-radius: 40.755px;
	background: var(--v3-white);
	box-shadow: 0 4.075px 8.151px 0 rgba(0, 0, 0, .1);
	overflow: hidden;
	text-decoration: none;
}

.v3-gcats__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: 358.642px;
}

.v3-gcats__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Info chip. Its fill is the LEGACY orange at 14% — another node still bound to
   #fe7527; see docs/v3-design-queries.md. */
.v3-gcats__info {
	position: absolute;
	left: 32.6px;
	top: 20.38px;
	display: grid;
	place-items: center;
	width: 40.755px;
	height: 40.755px;
	border: 0;
	border-radius: 50%;
	background: rgba(254, 117, 39, .14);
	cursor: help;
}

.v3-gcats__info i {
	display: block;
	width: 24.453px;
	height: 24.453px;
	background: var(--v3-icon-orange);
	-webkit-mask: url("/img/v3/info.svg") no-repeat center / contain;
	mask: url("/img/v3/info.svg") no-repeat center / contain;
}

.v3-gcats__label {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 73.358px;
	padding: 0 20.377px;
	color: var(--v3-text-secondary);
	font-size: var(--v3-fs-h4);          /* 24px Bold */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
	text-align: center;
}

/* Figma enlarges the centre card by 1.333x as the carousel's focus state.
   With JS the focus follows the scroll position and is driven by a transform
   instead (drag-scroll.js), which is why these rules drop out the moment it
   takes over: they exist so a browser with JS off still gets the resting state
   Figma draws rather than a row of identical cards. */
.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured {
	width: 358.642px;
	height: 576px;
	border-radius: 54.34px;
	box-shadow: 0 5.434px 10.868px 0 rgba(0, 0, 0, .1);
}

.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__thumb { height: 478.189px; }
.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__info { left: 43.47px; top: 27.17px; width: 54.34px; height: 54.34px; }
.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__info i { width: 32.604px; height: 32.604px; }
.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__label { height: 97.811px; padding: 0 27.17px; font-size: var(--v3-fs-h3); }

.v3-gcats__more { width: 374px; }

/* ==========================================================================
   RESPONSIVE — DERIVED
   ========================================================================== */

@media (max-width: 1200px) {
	.v3-gcats { padding: 64px 0; }

}

@media (max-width: 900px) {
	.v3-gcats { padding: 48px 0; }
	.v3-gcats__head h2 { font-size: var(--v3-fs-h3); }
	.v3-gcats__head p { font-size: var(--v3-fs-h5); line-height: 1.7; }

	/* A phone has nothing like the headroom of a 1440 desktop, so the focus
	   grows less here. The strip still has to reserve room for it: the scaled
	   card overflows the row by half its growth vertically and the cards it
	   pushes aside need the same slack inline, and overflow-x makes the block
	   axis clip too. */
	.v3-gcats__strip {
		--v3-gcats-grow: .22;

		height: auto;
		padding-block: 56px;
		padding-inline: 48px;
		gap: var(--v3-space-4);
	}
	.v3-gcats__card {
		width: 200px;
		height: 321px;
		border-radius: 30px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
	}
	.v3-gcats__thumb { height: 266px; }
	.v3-gcats__info { left: 20px; top: 14px; width: 32px; height: 32px; }
	.v3-gcats__info i { width: 19px; height: 19px; }
	.v3-gcats__label { height: 55px; padding: 0 12px; font-size: var(--v3-fs-h5); }

	/* No JS: the enlarged card costs too much height here, so the resting
	   state is a row of equal cards instead. */
	.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured {
		width: 200px;
		height: 321px;
		border-radius: 30px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
	}
	.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__thumb { height: 266px; }
	.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__info { left: 20px; top: 14px; width: 32px; height: 32px; }
	.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__info i { width: 19px; height: 19px; }
	.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__label { height: 55px; padding: 0 12px; font-size: var(--v3-fs-h5); }
	.v3-gcats__more { width: 100%; max-width: 374px; }

}

@media (max-width: 600px) {
	.v3-gcats__head h2 { font-size: var(--v3-fs-h4); }
	.v3-gcats__head p { font-size: var(--v3-fs-body); line-height: 1.8; }
	.v3-gcats__strip {
		--v3-gcats-grow: .18;

		padding-block: 40px;
		padding-inline: 32px;
	}
	.v3-gcats__card { width: 164px; height: 264px; }
	.v3-gcats__thumb { height: 218px; }
	.v3-gcats__label { height: 46px; font-size: var(--v3-fs-body); }

	.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured { width: 164px; height: 264px; }
	.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__thumb { height: 218px; }
	.v3-gcats__strip:not(.is-focus-live) .v3-gcats__card--featured .v3-gcats__label { height: 46px; font-size: var(--v3-fs-body); }

}

/* ==========================================================================
   RESPONSIVE — DERIVED
   ========================================================================== */

@media (max-width: 1200px) {
	.v3-gabout { padding: 96px 40px 40px; }
	.v3-gabout__how { --phone-scale: .8; --phone-left: -24px; }
	.v3-gabout__phone { top: -60px; }

}

@media (max-width: 900px) {
	/* The phone can no longer overlap the copy, so it moves into the flow
	   above the steps and the list gets the full width. */
	.v3-gabout { min-height: 0; padding: 56px 24px 40px; gap: var(--v3-space-6); }
	.v3-gabout__title { font-size: var(--v3-fs-h3); }
	.v3-gabout__inner { gap: var(--v3-space-8); }
	.v3-gabout__how h3 { font-size: var(--v3-fs-h3); text-align: center; }
	.v3-gabout__step p { font-size: var(--v3-fs-h5); line-height: 1.7; }
	.v3-gabout__num { width: 44px; height: 44px; font-size: var(--v3-fs-h4); }

	/* The phone is in the flow now, so there is nothing to reserve. */
	.v3-gabout__how { --phone-scale: .62; }
	.v3-gabout__steps { padding-left: 0; }

	.v3-gabout__phone {
		position: static;
		margin: 0 auto var(--v3-space-5);
	}

	.v3-gabout__deco { display: none; }
	.v3-gabout__actions { flex-wrap: wrap; justify-content: center; }

}

@media (max-width: 600px) {
	.v3-gabout__title { font-size: var(--v3-fs-h4); }
	.v3-gabout__how h3 { font-size: var(--v3-fs-h4); }
	.v3-gabout__step { gap: var(--v3-space-4); padding: var(--v3-space-2) 0; }
	.v3-gabout__step p { font-size: var(--v3-fs-body); line-height: 1.8; }
	.v3-gabout__num { width: 38px; height: 38px; font-size: var(--v3-fs-h5); }
	.v3-gabout__how { --phone-scale: .46; }
	.v3-gabout__actions .v3-btn { width: 100%; }

}

/* ==========================================================================
   RESPONSIVE — DERIVED
   ========================================================================== */

@media (max-width: 1200px) {
	.v3-ghero { min-height: 660px; }
	.v3-ghero__body { padding: 56px var(--v3-space-5) 64px; }
	.v3-ghero__copy h1 { font-size: var(--v3-fs-h2); }   /* 40 */

}

@media (max-width: 900px) {
	.v3-ghero { min-height: 560px; }
	.v3-ghero__body { padding: 44px var(--v3-space-5) 56px; gap: var(--v3-space-6); }
	.v3-ghero__copy { gap: var(--v3-space-4); }
	.v3-ghero__copy h1 { font-size: var(--v3-fs-h3); }   /* 32 */
	.v3-ghero__copy p { font-size: var(--v3-fs-h5); line-height: 1.7; }
	.v3-ghero__deco { display: none; }                   /* no room beside the copy */
	.v3-ghero .v3-wave { height: 140px; --v3-wave-drop: 46px; }

}

@media (max-width: 600px) {
	.v3-ghero { min-height: 480px; }
	.v3-ghero__body { padding: 32px var(--v3-space-4) 44px; }
	.v3-ghero__copy h1 { font-size: var(--v3-fs-h4); }   /* 24 */
	.v3-ghero__copy p { font-size: var(--v3-fs-body); line-height: 1.8; }
	.v3-ghero__actions { gap: var(--v3-space-3); }
	.v3-gstore { width: 158px; height: 48px; padding: 8px 16px; gap: var(--v3-space-3); }
	/* full width forces its own row, so the two pills pair up cleanly below */
	.v3-ghero__play { width: 100%; max-width: 340px; }
	.v3-ghero .v3-wave { height: 110px; --v3-wave-drop: 36px; }

}

/* ==========================================================================
   الباقات — nodes 8440:16406 (trivia) / 8440:16773 (وصلها)

   One card per plan, driven by the real plan table: PLAN_*_PRICE for trivia
   (1/2/3/5/10 games) and LETTER_PLANS for وصلها (1/3). The two games draw the
   card differently — trivia gets a medallion and a badge, وصلها a honeycomb
   ground and orange letter tiles — so the shared parts live here and each
   variant overrides only what actually differs.

   Figma draws two of the trivia cards at 1.0191x (380x203.821 with 217.409-wide
   content) and the rest at 380x200/213.333. That is an instance that got
   nudged, not a design decision, so everything is normalised to the 380x200
   base. Same for the CTA label, typed at 19.75px on three cards and 15.85px on
   the other two — see docs/v3-design-queries.md.
   ========================================================================== */

.v3-plans {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 80px 100px;
	background: var(--v3-bg-page);
}

.v3-plans__head {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-6);              /* 32px */
	text-align: center;
}

.v3-plans__head h2 {
	margin: 0;
	color: var(--v3-green-900);
	font-size: var(--v3-fs-h2);          /* 40px Bold */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
}

.v3-plans__head p {
	margin: 0;
	color: var(--v3-green-900);
	font-size: var(--v3-fs-h4);          /* 24px Medium */
	font-weight: var(--v3-fw-medium);
	line-height: 38px;
}

/* ==========================================================================
   الباقات — RESPONSIVE (DERIVED)
   ========================================================================== */

@media (max-width: 1200px) {
	.v3-plans { padding: 64px var(--v3-space-6); gap: 40px; }

}

@media (max-width: 900px) {
	.v3-plans { padding: 48px var(--v3-space-5); }
	.v3-plans__head h2 { font-size: var(--v3-fs-h3); }
	.v3-plans__head p { font-size: var(--v3-fs-h5); line-height: 1.7; }

}

@media (max-width: 600px) {
	.v3-plans__head h2 { font-size: var(--v3-fs-h4); }
	.v3-plans__head p { font-size: var(--v3-fs-body); line-height: 1.8; }

}

/* ==========================================================================
   وسائل المساعدة — nodes 8556:18873 (trivia) / 8531:21597 (وصلها)

   A picker: a list of hints on the right, and a detail card on the left that
   shows whichever one is selected. Figma only draws the selected state for the
   first hint, so every panel is rendered server-side and JS just moves the
   selection — that way the section still shows something without JS, and
   nothing has to be built in the DOM at runtime.

   The copy and icon keys are v2's (views/index.ejs, public/js/my-games.js), so
   the two stay in step. وصلها has two hints; trivia has five.
   ========================================================================== */

.v3-hints {
	display: flex;
	flex-direction: column;
	gap: 70px;
	padding: 80px 100px;
	background: var(--v3-bg-page);
}

.v3-hints__head {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-6);              /* 32px */
	text-align: center;
}

.v3-hints__head h2 {
	margin: 0;
	color: var(--v3-text-brand);         /* #dc6f38 */
	font-size: var(--v3-fs-h2);          /* 40px Bold */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
}

.v3-hints__head p {
	margin: 0;
	color: var(--v3-text-primary);
	font-size: var(--v3-fs-h4);          /* 24px Medium */
	font-weight: var(--v3-fw-medium);
	line-height: 38px;
}

/* 880 wide overall. The two games split it differently — trivia 408.443 card /
   67.557 gutter / 404 list, وصلها 408.443 / 47.689 / 423.868 — and only the
   وصلها split gives the description its designed 308px, which is what stops it
   wrapping. Both use that one here; see docs/v3-design-queries.md. */
.v3-hints__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 47.689px;
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   The list
   -------------------------------------------------------------------------- */

.v3-hints__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 0 1 423.868px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* RTL: flex-start is the right edge, where the icon tile sits. */
.v3-hint {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	padding: 18px 20px;
	border: 1px solid var(--v3-green-500);
	border-radius: 32px;
	background: var(--v3-green-050);
	box-shadow: 0 1px 2.5px rgba(0, 0, 0, .25);
	text-align: start;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.v3-hint:hover { border-color: var(--v3-orange-200); }

.v3-hint.is-active {
	border-color: var(--v3-orange-500);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.v3-hint__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 63.868px;
	height: 54px;
	border-radius: 12.462px;
	background: var(--v3-green-200);
	overflow: hidden;
	transition: background-color .15s ease;
}

.v3-hint.is-active .v3-hint__icon { background: var(--v3-orange-500); }

.v3-hint__icon img { width: 42px; height: 42px; object-fit: contain; }

/* وصلها uses line glyphs rather than the trivia illustrations, and they export
   with a white stroke — which is right on the active orange tile and invisible
   on every other surface they land on. Drawn as a mask so the colour follows
   the tile instead of being baked into the file. */
.v3-hint__glyph {
	width: 42px;
	height: 42px;
	background: var(--v3-green-800);
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}

.v3-hint.is-active .v3-hint__glyph { background: var(--v3-white); }

.v3-hint__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

.v3-hint__top {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

.v3-hint__name {
	color: var(--v3-green-800);
	font-size: var(--v3-fs-h5);          /* 20px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
	white-space: nowrap;
}

/* Figma pads this 5 top / 12 bottom to sit the Arabic optically centred. A
   fixed height with centred content does the same thing without the lopsided
   box — see docs/v3-design-queries.md. */
.v3-hint__when {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 33px;
	padding: 0 24px;
	border: 1px solid var(--v3-green-500);
	border-radius: 26px;
	background: var(--v3-green-100);
	color: var(--v3-green-800);
	font-size: var(--v3-fs-body);        /* 16px Medium */
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-auto);
	white-space: nowrap;
}

/* "بعد" is the orange half of the pair. */
.v3-hint__when--after {
	border-color: var(--v3-orange-200);
	background: var(--v3-orange-050);
	color: var(--v3-orange-500);
}

.v3-hint__desc {
	margin: 0;
	color: var(--v3-neutral-600);
	font-size: var(--v3-fs-body);        /* 16px Medium */
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-auto);
}

/* --------------------------------------------------------------------------
   The detail card
   -------------------------------------------------------------------------- */

.v3-hints__card {
	position: relative;
	flex: 0 0 408.443px;
	height: 495.717px;
	border-radius: 26.826px;
	background: linear-gradient(150.49deg, #0e5a3c 8.49%, #0a3f2a 91.51%);
	box-shadow: 0 25.149px 58.682px 0 rgba(14, 90, 60, .35);
	overflow: hidden;
}

/* Two soft blooms sit behind everything, one off the top-right corner and one
   low on the left. Figma builds them as blurred circles. */
.v3-hints__card::before,
.v3-hints__card::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(120, 200, 150, .28) 0%, rgba(120, 200, 150, 0) 70%);
	pointer-events: none;
}

.v3-hints__card::before { left: -67.064px; top: -66px; width: 268.26px; height: 268.26px; }
.v3-hints__card::after { left: 230.182px; top: 134.424px; width: 251.493px; height: 251.493px; }

/* وصلها lays its letter tiles across the card the way the plan cards do. */
.v3-hints__card--letter { background-image: linear-gradient(150.49deg, #0e5a3c 8.49%, #0a3f2a 91.51%); }

.v3-hints__card--letter .v3-hints__grain {
	position: absolute;
	inset: 0;
	background: url("/img/v3/pricing/honeycomb.svg") repeat;
	background-size: 128.7px 73.68px;
	pointer-events: none;
}

.v3-hint-panel {
	position: absolute;
	inset: 0;
}

.v3-hint-panel[hidden] { display: none; }

/* Figma sizes the title box to the icon tile (145.713) because its sample name
   fits on one line there. 'كلم المطنوخ' does not: it wrapped, pushed the tile
   down and slid it under the cream tray. The title now spans the card so the
   real names stay on one line, and the tile is pinned at Figma's offset so
   nothing can push it regardless. */
.v3-hint-panel__head {
	position: absolute;
	left: 0;
	right: 0;
	top: 45.034px;
	height: 194.977px;
	text-align: center;
}

.v3-hint-panel__name {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;                        /* the band above the tile */
	padding: 0 var(--v3-space-4);
	color: var(--v3-white);
	font-size: var(--v3-fs-h3);          /* 32px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
	white-space: nowrap;
}

.v3-hint-panel__icon {
	position: absolute;
	left: 50%;
	top: 70px;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 145.713px;
	height: 124.977px;
	border-radius: 24px;
	background: var(--v3-white);
}

.v3-hint-panel__icon img { width: 84.44px; height: 99.34px; object-fit: contain; }

/* وصلها uses a 64.9px vector glyph rather than an illustration. The tile it
   sits on is white, so the glyph is masked dark here too. */
.v3-hint-panel__icon .v3-hint__glyph {
	width: 64.907px;
	height: 64.907px;
	background: var(--v3-green-800);
}

/* The cream tray. Figma draws its top edge as a vector arc that bulges up in
   the middle and bleeds 1px past each side; an elliptical radius is the same
   shape and stays crisp at any width. */
.v3-hint-panel__tray {
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: 0;
	height: 240px;
	border-radius: 205px 205px 0 0 / 44px 44px 0 0;
	background: var(--v3-green-050);
}

.v3-hint-panel__when {
	position: absolute;
	left: 17.455px;
	right: 17.455px;
	top: 60.558px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.v3-hint-panel__when h3 {
	margin: 0;
	color: var(--v3-green-900);
	font-size: var(--v3-fs-h4);          /* 24px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
	text-align: center;
}

.v3-hint-panel__when ul {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* RTL: the marker belongs on the right, so it is drawn rather than inherited
   from list-style, which would place it on the wrong side in some engines. */
.v3-hint-panel__when li {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	color: var(--v3-green-900);
	font-size: var(--v3-fs-body);        /* 16px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
}

.v3-hint-panel__when li::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--v3-green-900);
}

/* ==========================================================================
   وسائل المساعدة — RESPONSIVE (DERIVED)
   ========================================================================== */

@media (max-width: 1200px) {
	.v3-hints { padding: 64px var(--v3-space-6); gap: 48px; }
	.v3-hints__inner { gap: var(--v3-space-6); }

}

/* Below the two-column width the card stops being a side panel and becomes a
   header for the list it belongs to. */
@media (max-width: 900px) {
	.v3-hints { padding: 48px var(--v3-space-5); }
	.v3-hints__head h2 { font-size: var(--v3-fs-h3); }
	.v3-hints__head p { font-size: var(--v3-fs-h5); line-height: 1.7; }

	.v3-hints__inner {
		flex-direction: column;
		align-items: center;
		max-width: 480px;
	}
	.v3-hints__card { flex: 0 0 auto; width: 100%; max-width: 408.443px; }
	.v3-hints__list { flex: 1 1 auto; width: 100%; }

}

@media (max-width: 600px) {
	.v3-hints__head h2 { font-size: var(--v3-fs-h4); }
	.v3-hints__head p { font-size: var(--v3-fs-body); line-height: 1.8; }

	.v3-hint { padding: 14px; border-radius: 24px; gap: 10px; }
	.v3-hint__icon { width: 52px; height: 44px; border-radius: 10px; }
	.v3-hint__icon img { width: 34px; height: 34px; }
	.v3-hint__text { gap: 10px; }
	.v3-hint__name { font-size: var(--v3-fs-body); white-space: normal; }
	.v3-hint__when { height: 28px; padding: 0 14px; font-size: var(--v3-fs-caption); }
	.v3-hint__desc { font-size: var(--v3-fs-caption); }

}

/* ==========================================================================
   CLOSING CTA — nodes 8728:14550 (trivia) / 8440:17041 (وصلها)

   Copy on the right, a desktop mockup on the left. Unlike the home page's CTA
   this is one flat image rather than a screenshot plus a phone, and it hangs
   past the section's bottom edge — the footer's wave crops it, which is why
   the section does not clip its own overflow.

   The two games place it differently (trivia 713.288x594.05 at y 193.774,
   وصلها 635x491 at y 67), so the geometry is per-variant custom properties and
   the rules below are shared.

   Figma also puts an "Ellipse 131" wave inside the section at y 127.28. It is
   cream on cream here — invisible — and a 1998px element that can only get in
   the way, so it is left out; see docs/v3-design-queries.md.
   ========================================================================== */

.v3-gcta {
	--v3-gcta-copy-w: 570px;
	--v3-gcta-copy-top: 202.5px;
	/* MEASURED, not taken from the node box. The mockup node reports (73,
	   193.774) 713.288x594.05, but it does not clip its own fill: the monitor
	   actually draws about 106px higher than the box and slightly larger. These
	   numbers come from matching the black bezel bounding box between the
	   exported asset and a 1:1 render of the section, which is the only thing
	   that agrees with what Figma shows. */
	--v3-gcta-shot-w: 712.73px;
	--v3-gcta-shot-h: 594.49px;
	--v3-gcta-shot-ar: 712.73 / 594.49;
	--v3-gcta-shot-x: -26.91px;          /* section 73.09 - 100 gutter */
	--v3-gcta-shot-y: 87.81px;

	position: relative;
	height: 625px;
	background: var(--v3-bg-page);

	/* The footer wave laps 28.26px back over whatever precedes it. Everywhere
	   else that strip is empty; here the mockup runs right down into it, and
	   the lap was cropping the monitor above its stand. Figma lands the orange
	   at 647 from the section top — this is the difference. */
	margin-bottom: 33px;
}

.v3-gcta--wasalha {
	--v3-gcta-copy-w: 620px;
	--v3-gcta-copy-top: 194px;
	--v3-gcta-shot-w: 665.04px;          /* measured the same way; node says 635x491 at (96,67) */
	--v3-gcta-shot-h: 521.66px;
	--v3-gcta-shot-ar: 665.04 / 521.66;
	--v3-gcta-shot-x: -18.5px;           /* section 81.5 - 100 gutter */
	--v3-gcta-shot-y: 55.75px;
}

.v3-gcta__inner {
	position: relative;
	width: min(1240px, calc(100% - 48px));
	height: 100%;
	margin: 0 auto;
}

/* Positioned from the 1240 column's start edge, which is the right one in RTL,
   so the copy stays put and the mockup is what moves as the column narrows. */
.v3-gcta__copy {
	position: absolute;
	inset-inline-start: 0;
	top: var(--v3-gcta-copy-top);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;             /* right, in RTL */
	gap: 48px;
	width: var(--v3-gcta-copy-w);
	color: var(--v3-text-secondary);     /* #064e3b */
	text-align: right;
}

.v3-gcta__copy h2 {
	margin: 0;
	font-size: var(--v3-fs-h1);          /* 48px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
}

.v3-gcta__copy p {
	margin: 0;
	font-size: var(--v3-fs-h4);          /* 24px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
}

.v3-gcta__text {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-5);              /* 24px */
	width: 100%;
}

/* Figma pins the button to the copy block's start edge, not centred under it. */
.v3-gcta__copy .v3-btn { width: 353px; }

/* The mockup hangs below the section; the footer that follows paints over it.

   The asset is the node exported whole, so it drops in at its own size — no
   clipping wrapper. The fill percentages the plugin reports for this node
   (130.94% / 135.45%) describe a rotated crop and do not survive being
   flattened into CSS, which is why the placement above is measured instead. */
.v3-gcta__shot {
	position: absolute;
	left: var(--v3-gcta-shot-x);
	top: var(--v3-gcta-shot-y);
	z-index: 1;
	width: var(--v3-gcta-shot-w);
	height: var(--v3-gcta-shot-h);
}

.v3-gcta__shot img {
	display: block;
	width: 100%;
	height: 100%;
}

/* The footer follows in the DOM but both are positioned, so it needs to say so
   to win the paint order against a mockup that overhangs it. */
.v3-glanding .v3-footer { position: relative; z-index: 2; }

/* ==========================================================================
   CLOSING CTA — RESPONSIVE (DERIVED)

   The absolute two-up cannot survive a narrow column, so below the point where
   copy and mockup would collide it becomes a stack: copy first, mockup under
   it, both in normal flow.
   ========================================================================== */

@media (max-width: 1200px) {
	.v3-gcta,
	.v3-gcta--wasalha {
		height: auto;
		padding: 64px 0 0;
	}

	.v3-gcta__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--v3-space-7);          /* 40px */
		height: auto;
	}

	.v3-gcta__copy {
		position: static;
		width: 100%;
		max-width: 620px;
		gap: var(--v3-space-6);
	}

	.v3-gcta__shot {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: var(--v3-gcta-shot-w);
		height: auto;
		aspect-ratio: var(--v3-gcta-shot-ar);
		margin-bottom: -40px;            /* keep it tucking under the footer wave */
	}

}

@media (max-width: 900px) {
	.v3-gcta, .v3-gcta--wasalha { padding-top: 48px; }
	.v3-gcta__copy h2 { font-size: var(--v3-fs-h2); }
	.v3-gcta__copy p { font-size: var(--v3-fs-h5); line-height: 1.6; }
	.v3-gcta__copy .v3-btn { width: 100%; max-width: 353px; }

}

@media (max-width: 600px) {
	.v3-gcta__copy h2 { font-size: var(--v3-fs-h3); }
	.v3-gcta__copy p { font-size: var(--v3-fs-body); line-height: 1.7; }
	.v3-gcta__shot { margin-bottom: -24px; }

}