/* Elwekalah v3 · product page template (sample: Hypergate). Loads after v7.css and reuses its tokens,
   header, buttons, tiles and footer. No sidebar, no mascot: one column of story, wide on big screens. */

.pp { width: min(1180px, 100% - 32px); margin-inline: auto; padding-block: 8px 0; display: grid; gap: clamp(56px, 9cqi, 120px); }
@container site (min-width: 1400px) { .pp { width: min(1680px, 94cqi); } }

/* breadcrumb: a real 44 px target */
.crumb { margin-block-start: clamp(12px, 2cqi, 28px); margin-block-end: calc(-1 * clamp(40px, 7cqi, 96px)); }
.crumb a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 4px 12px; color: var(--muted); text-decoration: none; font-size: 15px; border-radius: 999px; }
.crumb a:hover { color: var(--text); }
.crumb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site[dir="rtl"] .crumb svg { transform: scaleX(-1); }

/* 1. hero: text and picture side by side from 1001 px */
.pp-hero { display: grid; gap: clamp(28px, 4cqi, 64px); align-items: center; }
@container site (min-width: 1001px) { .pp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pp-hero__txt { display: grid; gap: 20px; justify-items: start; }
.pp-hero h1 { margin: 0; display: grid; gap: 20px; justify-items: start; }
.pp-hero h1 .pp-h1__line { display: block; margin: 0; font-size: clamp(2.1rem, 3.5cqi, 4.2rem); line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; }
.site:lang(ar) .pp-hero h1 .pp-h1__line { letter-spacing: 0; line-height: 1.3; }
.pp-sub,
.pp-is { margin: 0; max-width: 46ch; color: var(--muted); font-size: clamp(17px, 1.35cqi, 21px); }
.pp-hero .ctas { justify-content: flex-start; margin-block-start: 8px; }

.pp-art { position: relative; margin: 0; }
.pp-art__core { overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.pp-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-art figcaption { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; background: color-mix(in srgb, var(--surface) 86%, transparent); }

/* small eyebrow heading (mono, gold) and the section heading */
.pp-k { margin: 0; font: 400 14px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.site:lang(ar) .pp-k { font-family: var(--font-ar); font-size: 16px; letter-spacing: 0; text-transform: none; }
.pp-h2 { margin: 0 0 24px; font-size: clamp(1.8rem, 3.2cqi, 3rem); line-height: 1.08; letter-spacing: -.035em; }
.site:lang(ar) .pp-h2 { letter-spacing: 0; line-height: 1.3; }

/* 2. why now: one big statement on a gold rule */
.pp-why { display: grid; gap: 16px; padding-inline-start: clamp(20px, 3cqi, 40px); border-inline-start: 3px solid var(--accent); }
.pp-why p { margin: 0; max-width: 34ch; font-size: clamp(1.4rem, 2.6cqi, 2.4rem); line-height: 1.3; letter-spacing: -.02em; text-wrap: pretty; }
.site:lang(ar) .pp-why p { letter-spacing: 0; line-height: 1.6; max-width: 40ch; }

/* 3. what it does: three equal tiles from 900 px */
@container site (min-width: 900px) { .pp-what .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.apart { grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; }
.apart__box { display: grid; place-items: center; gap: 10px; padding: 18px 10px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface-2); font-size: 14px; color: var(--muted); text-align: center; }
.apart__dot { width: 14px; height: 14px; border-radius: 50%; background: #1E5BD8; box-shadow: 0 0 0 6px color-mix(in srgb, #1E5BD8 22%, transparent); }
.apart__dot--b { background: #1FA35B; box-shadow: 0 0 0 6px color-mix(in srgb, #1FA35B 22%, transparent); }
.apart__wall { width: 4px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); }

/* 4. the proof: one held-up line */
.pp-proof { display: grid; gap: 16px; }
.pp-proof__line { margin: 0; display: flex; align-items: center; gap: 18px; padding: clamp(20px, 2.4cqi, 32px) clamp(20px, 3cqi, 40px); border: 1px solid var(--hair-2); border-radius: var(--r-core); background: var(--surface); font-size: clamp(1.15rem, 1.8cqi, 1.6rem); line-height: 1.4; }
.pp-proof__line svg { flex: none; width: 36px; height: 36px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 5. the other products: a row of full-link cards (2 per row on phones, 4 from 1001 px) */
.more { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container site (min-width: 1001px) { .more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.more__card { display: grid; gap: 6px; height: 100%; padding: 8px 8px 16px; border: 1px solid var(--hair); border-radius: 20px; background: var(--surface); text-decoration: none; transition: border-color var(--t-fast) var(--spring), transform var(--t-mid) var(--spring); }
.more__card:hover { border-color: var(--accent); transform: translateY(-3px); }
.more__card picture { display: block; }
.more__card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; margin-block-end: 8px; background: var(--surface-2); }
.more__name { padding-inline: 8px; font-weight: 700; font-size: 17px; }
.more__need { padding-inline: 8px; color: var(--muted); font-size: 14px; }

/* the close keeps the home band; on this page it sits inside .pp */
.pp .end { margin-inline: calc(50% - 50cqi); }

@media (prefers-reduced-motion: reduce) { .more__card, .more__card:hover { transition: none; transform: none; } }

/* WCAG 2.2 target size: footer links get a 24 px tall hit area (also folded into home v13.2) */
.foot__col a { display: inline-flex; align-items: center; min-height: 28px; }

/* The other four products (UX rulings 13-15, v13.3.2): "What it does" rows. */
.pp-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 65ch); gap: 16px; }
.pp-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.pp-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); transform: translateY(-.1em); }