/*
 * Riwaq v2 — presentation.
 *
 * Loads AFTER the parent's landing.css and content.css, and reuses the parent's
 * design tokens (--navy, --gold, --white, --muted, --border, --emerald) so v2 is
 * unmistakably the same company. Everything here is namespaced .v2-* so it can
 * never collide with the parent's .hero / .features / .pricing rules — both
 * themes share a stylesheet lineage but never the same selectors.
 */

:root {
	--v2-max: 1180px;
	--v2-gutter: 30px;
	--v2-starter: rgba(245, 240, 232, 0.5);
	--v2-community: #10B981;
	--v2-growth: #D4AF37;
	--v2-enterprise: #7FB0CC;
}

.v2-wrap { max-width: var(--v2-max); margin: 0 auto; padding: 0 var(--v2-gutter); }

/* ─────────── NAV ─────────── */
.v2-nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(10, 21, 32, 0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}
.v2-nav__inner {
	max-width: var(--v2-max); margin: 0 auto; padding: 14px var(--v2-gutter);
	display: flex; align-items: center; gap: 26px;
}
.v2-nav__brand {
	display: flex; align-items: center; gap: 9px;
	font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 700;
	color: var(--gold); text-decoration: none; margin-right: auto;
}
.v2-nav__links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.v2-nav__links a {
	display: block; padding: 8px 14px; font-size: 0.86rem; color: var(--white);
	text-decoration: none; border-radius: 3px; opacity: 0.82;
}
.v2-nav__links a:hover, .v2-nav__links a:focus-visible { opacity: 1; background: var(--gold-dim); color: var(--gold); }
.v2-nav__links a[aria-current="page"] { color: var(--gold); opacity: 1; }
.v2-nav__cta {
	background: var(--gold); color: var(--navy) !important; font-weight: 500;
	padding: 9px 17px !important; border-radius: 3px; opacity: 1 !important;
}
@media (max-width: 860px) {
	.v2-nav__links { display: none; }
	.v2-nav__inner { justify-content: space-between; }
}

/* ─────────── HERO ─────────── */
.v2-hero { padding: 74px 0 54px; }
.v2-hero__grid {
	display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: 52px; align-items: center;
}
.v2-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.7rem; letter-spacing: 0.19em; text-transform: uppercase;
	color: var(--gold); margin-bottom: 20px;
}
.v2-hero h1 {
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: clamp(2.1rem, 4.3vw, 3.15rem); line-height: 1.12;
	color: var(--white); margin: 0 0 20px; text-wrap: balance;
}
.v2-hero h1 em { font-style: italic; color: var(--gold); }
.v2-hero__lede { font-size: 1.04rem; color: var(--muted); max-width: 52ch; margin: 0 0 28px; }
.v2-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) {
	.v2-hero__grid { grid-template-columns: 1fr; gap: 38px; }
	.v2-hero { padding: 48px 0 40px; }
}

/* ─────────── PRODUCT SCREEN FRAME ─────────── */
.v2-screen {
	background: var(--navy-2); border: 1px solid var(--border); border-radius: 6px;
	overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75);
}
.v2-screen__chrome {
	display: flex; align-items: center; gap: 6px;
	padding: 9px 13px; background: var(--navy-3); border-bottom: 1px solid var(--border);
}
.v2-screen__chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(245,240,232,0.2); }
.v2-screen__path { margin-left: 8px; font-size: 0.66rem; color: rgba(245,240,232,0.45); letter-spacing: 0.04em; }
.v2-screen img { display: block; width: 100%; height: auto; }
.v2-screen__note {
	padding: 8px 13px; font-size: 0.66rem; color: rgba(245,240,232,0.4);
	border-top: 1px solid var(--border); background: var(--navy-3);
}

/* Illustrative panel used until a real capture is dropped in. */
.v2-panel { padding: 17px 16px; display: flex; flex-direction: column; gap: 11px; }
.v2-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v2-panel__title { font-size: 0.8rem; color: var(--gold); letter-spacing: 0.05em; }
.v2-panel__meta { font-size: 0.65rem; color: rgba(245,240,232,0.4); }
.v2-asnaf { display: flex; flex-direction: column; gap: 9px; }
.v2-asnaf__row { display: grid; grid-template-columns: 118px 1fr 46px; gap: 12px; align-items: center; }
.v2-asnaf__name { font-size: 0.72rem; color: rgba(245,240,232,0.8); }
.v2-asnaf__name span { display: block; font-size: 0.68rem; color: rgba(245,240,232,0.42); direction: rtl; }
.v2-asnaf__track { height: 7px; background: rgba(245,240,232,0.07); border-radius: 4px; overflow: hidden; }
.v2-asnaf__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--emerald), var(--emerald-2)); }
.v2-asnaf__pct { font-size: 0.66rem; color: rgba(245,240,232,0.5); text-align: right; font-variant-numeric: tabular-nums; }

/* ─────────── STATUS CHIPS ─────────── */
.v2-chip {
	display: inline-block; font-size: 0.6rem; font-weight: 500;
	letter-spacing: 0.13em; text-transform: uppercase;
	padding: 3px 8px; border-radius: 2px; white-space: nowrap; cursor: help;
}
.v2-chip--base { color: var(--v2-community); background: rgba(16, 185, 129, 0.13); }
.v2-chip--pack { color: var(--v2-growth); background: rgba(212, 175, 55, 0.13); }
.v2-chip--multisite { color: var(--v2-enterprise); background: rgba(127, 176, 204, 0.14); }
.v2-chip--enterprise { color: var(--v2-starter); background: rgba(245, 240, 232, 0.08); }
/* Pack names are longer than tier names, so let a chip wrap rather than force
   the card wider. */
.v2-chip { white-space: normal; }

/* ─────────── PROOF STRIP ─────────── */
.v2-proof {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px; background: var(--border);
	border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.v2-proof__item { background: var(--navy-2); padding: 20px 18px; display: flex; flex-direction: column; gap: 5px; }
.v2-proof__value { font-family: 'Cormorant Garamond', serif; font-size: 1.85rem; font-weight: 700; color: var(--gold); line-height: 1; }
.v2-proof__label { font-size: 0.72rem; color: var(--muted); }

/* ─────────── SECTION SHELL ─────────── */
.v2-section { padding: 66px 0; }
.v2-section--tint { background: var(--navy-2); border-block: 1px solid var(--border); }
.v2-sechead { margin-bottom: 36px; max-width: 62ch; }
.v2-sechead h2 {
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: clamp(1.65rem, 3.2vw, 2.3rem); color: var(--white); margin: 0 0 12px; line-height: 1.16;
}
.v2-sechead h2 em { font-style: italic; color: var(--gold); }
.v2-sechead p { color: var(--muted); margin: 0; }

/* ─────────── MODULE GROUPS ─────────── */
.v2-group { margin-bottom: 46px; }
.v2-group__head {
	display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
	padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--border);
}
.v2-group__label {
	font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: var(--white);
}
.v2-group__count { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.v2-group__blurb { flex-basis: 100%; font-size: 0.92rem; color: var(--muted); margin: 0; }
.v2-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.v2-mod {
	background: var(--navy-2); border: 1px solid var(--border); border-radius: 4px;
	padding: 17px 17px 16px; display: flex; flex-direction: column; gap: 9px;
}
.v2-mod__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.v2-mod__name { font-size: 0.99rem; font-weight: 500; color: var(--white); margin: 0; }
.v2-mod__desc { font-size: 0.85rem; color: var(--muted); margin: 0; line-height: 1.58; }

/* ─────────── BUTTONS ─────────── */
.v2-btn, .v2-btn--ghost {
	display: inline-block; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em;
	padding: 12px 24px; border-radius: 3px; text-decoration: none; border: 1px solid transparent;
	cursor: pointer; font-family: inherit;
}
.v2-btn { background: var(--gold); color: var(--navy); }
.v2-btn:hover { background: var(--gold-2); }
.v2-btn--ghost { border-color: rgba(212, 175, 55, 0.45); color: var(--gold); background: transparent; }
.v2-btn--ghost:hover { background: var(--gold-dim); }

/* ─────────── PAGE HEADER (inner pages) ─────────── */
.v2-pagehead { padding: 62px 0 40px; border-bottom: 1px solid var(--border); }
.v2-pagehead h1 {
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: clamp(2rem, 4.4vw, 3rem); color: var(--white); margin: 0 0 14px; line-height: 1.12;
}
.v2-pagehead h1 em { font-style: italic; color: var(--gold); }
.v2-pagehead p { color: var(--muted); max-width: 60ch; margin: 0; font-size: 1.02rem; }

/* ─────────── CLOSING CTA ─────────── */
.v2-cta { text-align: center; padding: 68px 0; }
.v2-cta h2 {
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--white); margin: 0 0 14px;
}
.v2-cta p { color: var(--muted); max-width: 52ch; margin: 0 auto 26px; }
.v2-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ─────────── PRICING ─────────── */

.v2-tier__name { font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ─────────── THE DIFFERENCE (why not a donation app) ─────────── */
.v2-diff__closer {
	margin: 28px 0 0; font-family: 'Cormorant Garamond', serif;
	font-size: 1.22rem; font-style: italic; color: var(--gold); text-wrap: balance;
}

/* ─────────── HERO ROTATION ─────────── */
/* The headline and lede fade together so the argument never half-swaps. */
[data-v2-hero] h1,
[data-v2-hero] .v2-hero__lede { transition: opacity 220ms ease; }
[data-v2-hero].is-swapping h1,
[data-v2-hero].is-swapping .v2-hero__lede { opacity: 0; }

/* Reserve the tallest headline + lede so rotating never shifts the page. */
[data-v2-hero] h1 { min-height: 2.3em; }
[data-v2-hero] .v2-hero__lede { min-height: 5.2em; }

.v2-hero__rotator { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.v2-dots { display: flex; gap: 7px; }
.v2-dot {
	width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(212, 175, 55, 0.5); background: transparent;
}
.v2-dot[aria-current="true"] { background: var(--gold); border-color: var(--gold); }
.v2-dot:focus-visible, .v2-rotate-toggle:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.v2-rotate-toggle {
	background: none; border: 0; padding: 2px 4px; cursor: pointer;
	font-family: inherit; font-size: 0.68rem; letter-spacing: 0.13em;
	text-transform: uppercase; color: var(--muted);
}
.v2-rotate-toggle:hover { color: var(--gold); }

@media (max-width: 900px) {
	[data-v2-hero] h1 { min-height: 0; }
	[data-v2-hero] .v2-hero__lede { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
	[data-v2-hero] h1,
	[data-v2-hero] .v2-hero__lede { transition: none; }
}

/* ─────────── ICONOGRAPHY ─────────── */
/* Stroke-only marks in the arch idiom; colour inherited via currentColor. */
.v2-icon { display: block; color: var(--gold); flex: none; }

.v2-mod__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; flex: none;
	border: 1px solid var(--border); border-radius: 3px;
	background: rgba(212, 175, 55, 0.05);
}
.v2-mod__head { align-items: center; gap: 12px; }
.v2-mod__head .v2-mod__name { flex: 1; }

.v2-group__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: none;
	border: 1px solid var(--border); border-radius: 3px;
	background: rgba(212, 175, 55, 0.05);
}
.v2-group__head { align-items: center; }

/* ─────────── KHATAM TESSELLATION ─────────── */
/* A faint eight-point lattice behind tinted bands. Sits under the content and
   never intercepts a click. */
.v2-section--tint { position: relative; overflow: hidden; }
.v2-section--tint::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	opacity: 0.055;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Crect x='38' y='38' width='52' height='52'/%3E%3Crect x='38' y='38' width='52' height='52' transform='rotate(45 64 64)'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 128px 128px;
}
.v2-section--tint > .v2-wrap { position: relative; z-index: 1; }

/* ─────────── ORNAMENT ─────────── */
.v2-ornament {
	display: flex; align-items: center; gap: 18px;
	max-width: var(--v2-max); margin: 0 auto; padding: 0 var(--v2-gutter);
}
.v2-ornament__rule {
	flex: 1; height: 1px;
	background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.v2-ornament svg { flex: none; opacity: 0.85; }

/* ─────────── HERO ARCH BACKDROP ─────────── */
/* Echoes v1's arch without repeating it: a single hairline arch behind the
   product screen, so the hero still reads as a riwaq. */
.v2-hero { position: relative; overflow: hidden; }
.v2-hero__arch {
	position: absolute; top: -40px; right: -90px; width: 460px; height: auto;
	opacity: 0.09; pointer-events: none; z-index: 0;
}
.v2-hero__grid { position: relative; z-index: 1; }
@media (max-width: 900px) { .v2-hero__arch { display: none; } }

/* ─────────── HOVER STATES ─────────── */
/* Cards are not links, so the whole card responds rather than only its title —
   the icon box is the focal point of the change. focus-within mirrors every
   hover so a keyboard user gets the same feedback. */

.v2-mod,
.v2-proof__item {
	transition: border-color 180ms ease, background-color 180ms ease,
	            transform 180ms ease, box-shadow 180ms ease;
}

.v2-mod:hover,
.v2-mod:focus-within {
	border-color: rgba(212, 175, 55, 0.55);
	background: var(--navy-3);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.9);
}

/* The icon box warms and its mark brightens. */
.v2-mod__icon,
.v2-group__icon {
	transition: border-color 180ms ease, background-color 180ms ease, transform 220ms ease;
}
.v2-mod__icon .v2-icon,
.v2-group__icon .v2-icon {
	transition: color 180ms ease, transform 220ms ease;
}

.v2-mod:hover .v2-mod__icon,
.v2-mod:focus-within .v2-mod__icon {
	border-color: var(--gold);
	background: rgba(212, 175, 55, 0.14);
	transform: scale(1.06);
}
.v2-mod:hover .v2-mod__icon .v2-icon,
.v2-mod:focus-within .v2-mod__icon .v2-icon {
	color: var(--gold-2);
}

/* Group headings on /product — the icon reacts on its own. */
.v2-group__head:hover .v2-group__icon {
	border-color: var(--gold);
	background: rgba(212, 175, 55, 0.14);
}
.v2-group__head:hover .v2-group__icon .v2-icon { color: var(--gold-2); }

/* Pricing tiers. */

/* Proof strip — a quieter lift, since these are facts rather than choices. */
.v2-proof__item:hover { background: var(--navy-3); }

/* The product screen picks up its gold edge on hover. */
.v2-screen { transition: border-color 200ms ease, box-shadow 200ms ease; }
.v2-screen:hover {
	border-color: rgba(212, 175, 55, 0.4);
	box-shadow: 0 34px 66px -30px rgba(0, 0, 0, 0.85);
}

/* Buttons. */
.v2-btn, .v2-btn--ghost { transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.v2-btn:hover, .v2-btn--ghost:hover { transform: translateY(-1px); }

/* Nobody gets moved who asked not to be. */
@media (prefers-reduced-motion: reduce) {
	.v2-mod:hover, .v2-mod:focus-within,
	.v2-btn:hover, .v2-btn--ghost:hover { transform: none; }
	.v2-mod:hover .v2-mod__icon,
	.v2-mod:focus-within .v2-mod__icon { transform: none; }
}

/* ─────────── SCOPE ─────────── */
/* Rows, not cards: seven groups read as a list of areas, which a card grid
   turned into a wall of equal-weight boxes. */
.v2-scope { display: flex; flex-direction: column; gap: 2px; }
.v2-scope__item {
	display: grid; grid-template-columns: 38px 1fr; gap: 18px; align-items: start;
	padding: 20px 18px 20px 0; border-bottom: 1px solid var(--border);
	transition: background-color 180ms ease;
}
.v2-scope__item:first-child { border-top: 1px solid var(--border); }
.v2-scope__item:hover { background: rgba(212, 175, 55, 0.035); }
.v2-scope__item:hover .v2-mod__icon { border-color: var(--gold); background: rgba(212, 175, 55, 0.14); }
.v2-scope__item:hover .v2-mod__icon .v2-icon { color: var(--gold-2); }
.v2-scope__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v2-scope__name {
	margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 1.32rem; font-weight: 700;
	color: var(--white); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.v2-scope__count {
	font-family: 'DM Sans', sans-serif; font-size: 0.66rem; font-weight: 400;
	letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold);
}
.v2-scope__detail { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.6; max-width: 74ch; }
.v2-scope__more { margin: 30px 0 0; }
@media (max-width: 560px) { .v2-scope__item { grid-template-columns: 1fr; gap: 12px; } }

/* ─────────── FOUNDER ─────────── */
.v2-founder__grid {
	display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 40px; align-items: start;
}
.v2-founder__mark svg { width: 132px; height: 132px; display: block; }
.v2-founder__quote { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.v2-founder__quote blockquote { margin: 0; }
.v2-founder__quote blockquote p {
	margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic;
	font-size: clamp(1.3rem, 2.5vw, 1.72rem); line-height: 1.42; color: var(--white);
	text-wrap: balance;
}
.v2-founder__quote figcaption { display: flex; flex-direction: column; gap: 3px; padding-left: 16px; border-left: 2px solid var(--gold); }
.v2-founder__name { font-size: 0.98rem; color: var(--white); }
.v2-founder__role { font-size: 0.78rem; color: var(--muted); }
.v2-founder__note {
	margin-top: 4px; padding: 16px 18px; border: 1px solid var(--border);
	border-radius: 3px; background: rgba(10, 21, 32, 0.4);
	display: flex; flex-direction: column; gap: 6px;
}
.v2-founder__note-label {
	font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold);
}
.v2-founder__note p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 760px) {
	.v2-founder__grid { grid-template-columns: 1fr; gap: 24px; }
	.v2-founder__mark svg { width: 84px; height: 84px; }
}

/* ─────────── CLOSING PANEL ─────────── */
.v2-close {
	position: relative; overflow: hidden;
	border: 1px solid var(--border); border-radius: 6px;
	background: linear-gradient(150deg, var(--navy-2), var(--navy-3));
	padding: 52px 48px;
}
.v2-close__arch {
	position: absolute; top: -10px; right: 28px; width: 240px; height: auto;
	opacity: 0.12; pointer-events: none;
}
.v2-close__body { position: relative; z-index: 1; max-width: 58ch; }
.v2-close__body h2 {
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--white); margin: 0 0 14px; line-height: 1.14;
}
.v2-close__body h2 em { font-style: italic; color: var(--gold); }
.v2-close__body p { margin: 0 0 28px; color: var(--muted); }
.v2-close__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.v2-close__link { font-size: 0.88rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.v2-close__link:hover { color: var(--gold); }
@media (max-width: 620px) {
	.v2-close { padding: 36px 24px; }
	.v2-close__arch { display: none; }
}

/* ─────────── SCOPE ROWS AS LINKS ─────────── */
/* The heading carries the link so the accessible name is the group name; a
   stretched overlay makes the whole row clickable without nesting the
   paragraph inside an anchor. */
.v2-scope__item { position: relative; grid-template-columns: 38px 1fr 26px; }
.v2-scope__link { color: inherit; text-decoration: none; }
.v2-scope__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.v2-scope__link:hover { color: var(--gold); }
.v2-scope__link:focus-visible { outline: none; }
.v2-scope__item:focus-within { background: rgba(212, 175, 55, 0.05); }
.v2-scope__item:focus-within .v2-scope__link { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }

.v2-scope__go {
	display: flex; align-items: center; justify-content: flex-end;
	align-self: center; color: rgba(212, 175, 55, 0.4);
	transition: color 180ms ease, transform 180ms ease;
}
.v2-scope__item:hover .v2-scope__go,
.v2-scope__item:focus-within .v2-scope__go { color: var(--gold); transform: translateX(4px); }
.v2-scope__item:hover .v2-scope__name { color: var(--gold); }
.v2-scope__item { cursor: pointer; }

@media (max-width: 560px) {
	.v2-scope__item { grid-template-columns: 1fr; }
	.v2-scope__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.v2-scope__item:hover .v2-scope__go { transform: none; }
}

/* ─────────── ANCHOR TARGETS ON /product ─────────── */
/* The nav is sticky, so an anchor jump must stop below it. */
.v2-group { scroll-margin-top: 86px; }
.v2-group:target .v2-group__head { border-bottom-color: var(--gold); }
.v2-group:target .v2-group__icon { border-color: var(--gold); background: rgba(212, 175, 55, 0.14); }
.v2-group:target .v2-group__icon .v2-icon { color: var(--gold-2); }

/* ─────────── PLAN LEGEND ─────────── */
/* A chip is only self-explanatory once. This states the rule in the open so a
   reader never has to hover one to find out what it means. */
.v2-legend {
	margin-top: 28px; padding: 20px 22px;
	border: 1px solid var(--border); border-radius: 4px; background: var(--navy-2);
	display: flex; flex-direction: column; gap: 14px;
}
.v2-legend__lead { margin: 0; font-size: 0.95rem; color: var(--white); }
.v2-legend__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 10px 22px;
}
.v2-legend__list li { display: flex; align-items: center; gap: 10px; }
.v2-legend__list span { font-size: 0.84rem; color: var(--muted); }

/* ─────────── PREMIER FEATURE SPOTLIGHT ─────────── */
.v2-spotlight__grid {
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 52px; align-items: center;
}
.v2-spotlight__body h2 {
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--white);
	margin: 0 0 16px; line-height: 1.14;
}
.v2-spotlight__body h2 em { font-style: italic; color: var(--gold); }
.v2-spotlight__lede { margin: 0 0 22px; color: var(--muted); max-width: 54ch; }
.v2-spotlight__list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v2-spotlight__list li {
	position: relative; padding-left: 26px; font-size: 0.93rem; color: var(--white); opacity: .88;
}
.v2-spotlight__list li::before {
	content: ""; position: absolute; left: 4px; top: .55em;
	width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg);
}
.v2-spotlight__aside {
	margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic;
	font-size: 1.12rem; color: var(--gold);
}

/* The illustrative poster sheet. */
.v2-spotlight__art { display: flex; justify-content: center; }
.v2-poster { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.v2-poster__sheet {
	width: 268px; padding: 30px 26px 24px;
	background: linear-gradient(165deg, var(--navy-2), var(--navy-3));
	border: 1px solid rgba(212, 175, 55, 0.35);
	display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center;
	box-shadow: 0 30px 56px -28px rgba(0, 0, 0, .85);
}
.v2-poster__kicker { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.v2-poster__title {
	font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; font-weight: 700;
	color: var(--white); line-height: 1.1;
}
.v2-poster__rule { width: 34px; height: 1px; background: var(--gold); }
.v2-poster__meta { font-size: .72rem; color: var(--muted); }
.v2-poster__qr {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
	width: 62px; height: 62px; margin-top: 6px; padding: 5px;
	background: rgba(245, 240, 232, .92);
}
.v2-poster__qr i { background: transparent; border-radius: 1px; }
.v2-poster__qr i.on { background: #0A1520; }
.v2-poster__scan { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.v2-poster figcaption { font-size: .68rem; color: var(--ink-3, rgba(245,240,232,.38)); text-align: center; max-width: 26ch; }

@media (max-width: 900px) {
	.v2-spotlight__grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ─────────── SERVICES ─────────── */
.v2-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.v2-service {
	display: flex; flex-direction: column; gap: 13px;
	padding: 26px 24px; border: 1px solid var(--border); border-radius: 4px;
	background: var(--navy-2);
	transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.v2-service:hover { border-color: rgba(212,175,55,.5); background: var(--navy-3); transform: translateY(-2px); }
.v2-service:hover .v2-mod__icon { border-color: var(--gold); background: rgba(212,175,55,.14); }
.v2-service:hover .v2-mod__icon .v2-icon { color: var(--gold-2); }
.v2-service__name {
	margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 1.42rem; font-weight: 700; color: var(--white);
}
.v2-service__body { margin: 0; font-size: .93rem; color: var(--muted); line-height: 1.64; }
@media (prefers-reduced-motion: reduce) { .v2-service:hover { transform: none; } }

/* ─────────── LIMITS TABLE ─────────── */
.v2-table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; }
.v2-limits { width: 100%; border-collapse: collapse; min-width: 620px; }
.v2-limits th, .v2-limits td { padding: 13px 16px; text-align: left; font-weight: 400; }
.v2-limits thead th {
	font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--muted); border-bottom: 1px solid var(--border); background: var(--navy-3);
}
.v2-limits thead th.is-featured { color: var(--gold); }
.v2-limits tbody th { font-size: 0.89rem; color: var(--white); opacity: 0.88; }
.v2-limits tbody td { font-size: 0.92rem; color: var(--white); font-variant-numeric: tabular-nums; }
.v2-limits tbody tr + tr th, .v2-limits tbody tr + tr td { border-top: 1px solid rgba(212, 175, 55, 0.09); }
.v2-limits td.is-featured { background: rgba(212, 175, 55, 0.05); }
.v2-limits tbody tr:hover th, .v2-limits tbody tr:hover td { background: rgba(212, 175, 55, 0.035); }

/* ─────────── BASE PLAN ─────────── */
/* Two columns: the commercial decision on the left, what you get on the right.
   Stacking these wasted the full page width and buried the price above a wall
   of fourteen list items. */
.v2-base {
	border: 1px solid var(--gold); border-radius: 5px; background: var(--navy-2);
	box-shadow: 0 0 0 1px var(--gold-dim);
	display: grid; grid-template-columns: 290px minmax(0, 1fr);
}
.v2-base__aside {
	padding: 32px 28px; border-right: 1px solid var(--border);
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.v2-base__price {
	display: block; margin: 10px 0 0;
	font-family: 'Cormorant Garamond', serif; font-size: 3.4rem; font-weight: 700;
	color: var(--white); line-height: 1;
}
.v2-base__price .per { font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 400; color: var(--muted); }
.v2-base__note { margin: 12px 0 20px; font-size: .84rem; color: var(--muted); }
.v2-base__aside .v2-btn { margin-top: auto; }

.v2-base__body { padding: 32px 30px; display: flex; flex-direction: column; gap: 16px; }
.v2-base__label {
	font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.v2-base__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px 24px;
}
.v2-base__list li { font-size: .89rem; color: var(--muted); padding-left: 17px; position: relative; }
.v2-base__list li::before {
	content: ""; position: absolute; left: 2px; top: .5em;
	width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg);
}
.v2-base__list li.is-key { color: var(--white); font-weight: 500; }
.v2-base__list li.is-key::before { background: var(--gold); }
@media (max-width: 820px) {
	.v2-base { grid-template-columns: 1fr; }
	.v2-base__aside { border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 26px; }
	.v2-base__aside .v2-btn { margin-top: 4px; }
}

/* ─────────── PACKS ─────────── */
/* A fixed three-column grid rather than auto-fill, so the six packs always read
   as two tidy rows. Cards stretch to equal height and the module list grows to
   fill, so the bottom edge of a row is straight despite 4-to-7 modules each. */
.v2-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .v2-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .v2-packs { grid-template-columns: 1fr; } }

.v2-pack {
	background: var(--navy-2); border: 1px solid var(--border); border-radius: 4px;
	padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px;
	transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
	scroll-margin-top: 86px;
}
.v2-pack:hover { border-color: rgba(212,175,55,.5); background: var(--navy-3); transform: translateY(-2px); }
.v2-pack:hover .v2-mod__icon { border-color: var(--gold); background: rgba(212,175,55,.14); }
.v2-pack:hover .v2-mod__icon .v2-icon { color: var(--gold-2); }

.v2-pack__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-pack__price {
	font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700;
	color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.v2-pack__price .per { font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 400; color: var(--muted); }
.v2-pack__name { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 1.32rem; font-weight: 700; color: var(--white); line-height: 1.18; }
.v2-pack__blurb { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.56; }
.v2-pack__list {
	list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--border);
	display: flex; flex-direction: column; gap: 6px; margin-top: auto;
}
.v2-pack__list li { font-size: .85rem; color: var(--white); opacity: .82; padding-left: 14px; position: relative; }
.v2-pack__list li::before { content: "·"; position: absolute; left: 3px; color: var(--gold); }

/* ─────────── COMPLETE ─────────── */
.v2-complete {
	margin-top: 20px; padding: 28px 30px;
	border: 1px solid var(--gold); border-radius: 5px;
	background: linear-gradient(140deg, rgba(212,175,55,.09), transparent 65%);
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center;
}
.v2-complete h3 { margin: 9px 0 9px; font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 700; color: var(--white); }
.v2-complete p { margin: 0; font-size: .93rem; color: var(--muted); max-width: 60ch; }
.v2-complete__price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.v2-complete__price .v2-base__price { margin: 0; }
.v2-complete__was {
	font-size: .8rem; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px;
}
.v2-complete__save {
	font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--emerald);
}
@media (max-width: 720px) {
	.v2-complete { grid-template-columns: 1fr; gap: 20px; }
	.v2-complete__price { text-align: left; align-items: flex-start; }
}

/* ─────────── ONE-TIME FEE, INSIDE THE BASE CARD ─────────── */
/* Visible next to the price so it is never a surprise, but set quieter so it
   does not compete with the $99 a board is being asked to approve. */
.v2-base__once {
	margin: -12px 0 20px; font-size: .78rem; color: var(--muted);
	padding-left: 13px; position: relative;
}
.v2-base__once::before {
	content: "+"; position: absolute; left: 0; color: var(--gold); font-size: .82rem;
}

/* ─────────── THE DONATION PROMISE ─────────── */
/* A promise, not a charge — so it gets emerald rather than gold, and sits on
   its own between the price and the packs. */
.v2-promise {
	display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; align-items: start;
	padding: 26px 28px; border-radius: 5px;
	border: 1px solid rgba(16, 185, 129, .35);
	background: linear-gradient(135deg, rgba(16, 185, 129, .07), transparent 70%);
}
.v2-promise__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 3px;
	border: 1px solid rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .08);
	color: var(--emerald);
}
.v2-promise__mark .v2-icon { color: var(--emerald); }
.v2-promise__title {
	margin: 2px 0 9px; font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 700; color: var(--white); line-height: 1.18;
}
.v2-promise__title em { font-style: italic; color: var(--emerald); }
.v2-promise p { margin: 0; font-size: .92rem; color: var(--muted); max-width: 78ch; line-height: 1.6; }
@media (max-width: 620px) {
	.v2-promise { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
}

/* ─────────── FINE PRINT ─────────── */
/* Disclosures that must exist but should not occupy card-sized real estate. */
.v2-fine {
	list-style: none; margin: 26px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px 34px;
}
.v2-fine li {
	font-size: .87rem; color: var(--muted); line-height: 1.6;
	padding-left: 15px; border-left: 1px solid var(--border);
}
.v2-fine b { display: block; color: var(--white); font-weight: 500; font-size: .84rem; margin-bottom: 3px; }

/* ─────────── INNER-PAGE CHROME ─────────── */
/* v1 pads the body by 5.25rem to clear its position:fixed nav. The v2 nav is
   sticky and sits in the flow, so on inner pages that padding was just a gap
   above the bar. Reclaim it, and hide v1's nav should any template still ask
   for it. */
body.bayyinah-inner { padding-top: 0; }
body.bayyinah-inner .site-chrome-nav { display: none; }

/* v1 caps inner content at 52rem; v2 sections manage their own width, so only
   the inherited .site-main keeps the narrow measure. */
body.bayyinah-inner .v2-nav { position: sticky; top: 0; }

/* ─────────── MOBILE DRAWER ─────────── */
.v2-nav__burger {
	display: none; width: 40px; height: 40px; padding: 9px 8px;
	background: none; border: 1px solid var(--border); border-radius: 3px;
	cursor: pointer; flex-direction: column; justify-content: space-between;
}
.v2-nav__burger span {
	display: block; height: 1.5px; width: 100%; background: var(--gold);
	transition: transform 200ms ease, opacity 200ms ease;
}
.v2-nav__burger:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

@media (max-width: 860px) {
	.v2-nav__burger { display: flex; }
	.v2-nav__inner { flex-wrap: wrap; }
	.v2-nav__links {
		display: none; flex-basis: 100%; flex-direction: column; gap: 0;
		padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border);
	}
	.v2-nav.is-open .v2-nav__links { display: flex; }
	.v2-nav__links a { padding: 12px 4px; font-size: .95rem; }
	.v2-nav__cta { margin-top: 8px; text-align: center; }
}

/* Burger becomes a cross when the drawer is open. */
.v2-nav.is-open .v2-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v2-nav.is-open .v2-nav__burger span:nth-child(2) { opacity: 0; }
.v2-nav.is-open .v2-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .v2-nav__burger span { transition: none; } }

/* ─────────── MODULE CARD, PACK LABELLING ─────────── */
/* Pack names ("Fundraising & Stewardship") are far longer than the tier names
   this card was built for, so the chip no longer shares a row with the title —
   it sits at the foot of the card with the full width to itself. */
.v2-mod__foot { margin-top: auto; padding-top: 10px; }
.v2-modules .v2-mod { min-height: 104px; }
.v2-modules .v2-mod__name { font-size: .96rem; line-height: 1.35; }

/* ─────────── LEGEND, EVEN COLUMNS ─────────── */
/* One chip per row with a fixed column keeps the prices aligned instead of
   ragged behind chips of wildly different widths. */
.v2-legend__list { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); align-items: center; }
.v2-legend__list li { display: grid; grid-template-columns: 172px 1fr; gap: 12px; align-items: center; }
.v2-legend__list .v2-chip { justify-self: start; text-align: center; }
@media (max-width: 520px) {
	.v2-legend__list li { grid-template-columns: 1fr; gap: 4px; }
}

/* Legend chips carry full pack names, which do not survive uppercase plus
   0.13em tracking on one line. Drop both in the legend only — the module cards
   keep the compact uppercase treatment. */
.v2-legend__list .v2-chip {
	text-transform: none; letter-spacing: .02em; font-size: .74rem;
	white-space: nowrap; width: 100%; text-align: center;
}
.v2-legend__list li { grid-template-columns: 196px 1fr; }
@media (max-width: 520px) { .v2-legend__list li { grid-template-columns: 1fr; } }

/* ─────────── PLAN KEY ─────────── */
/* Nine rows explaining what carries a module. Each links to that pack on the
   pricing page, so the key is a way in rather than a footnote. */
.v2-keys {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 10px;
}
.v2-key {
	display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center;
	padding: 11px 13px; border: 1px solid var(--border); border-radius: 4px;
	background: var(--navy-2); text-decoration: none;
	transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.v2-key__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 3px;
	border: 1px solid var(--border); background: rgba(212, 175, 55, .05);
	transition: border-color 180ms ease, background-color 180ms ease, transform 200ms ease;
}
.v2-key__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v2-key__name {
	font-size: .9rem; color: var(--white); white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
}
.v2-key__note { font-size: .72rem; color: var(--muted); }
.v2-key__price {
	font-size: .82rem; color: var(--gold); white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: color 180ms ease;
}

.v2-key:hover, .v2-key:focus-visible {
	border-color: rgba(212, 175, 55, .55);
	background: var(--navy-3);
	transform: translateY(-2px);
	outline: none;
}
.v2-key:hover .v2-key__icon, .v2-key:focus-visible .v2-key__icon {
	border-color: var(--gold); background: rgba(212, 175, 55, .14); transform: scale(1.06);
}
.v2-key:hover .v2-key__icon .v2-icon, .v2-key:focus-visible .v2-key__icon .v2-icon { color: var(--gold-2); }
.v2-key:hover .v2-key__name, .v2-key:focus-visible .v2-key__name { color: var(--gold); }
.v2-key:focus-visible { box-shadow: 0 0 0 2px var(--gold-2); }

/* The base row is the one that is always included — mark it in the emerald the
   pricing page uses for "you are not charged for this". */
.v2-key--base .v2-key__icon { border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .08); }
.v2-key--base .v2-key__icon .v2-icon { color: var(--emerald); }
.v2-key--base .v2-key__price { color: var(--emerald); }
.v2-key--base:hover .v2-key__icon { border-color: var(--emerald); background: rgba(16, 185, 129, .16); }
.v2-key--base:hover .v2-key__icon .v2-icon { color: var(--emerald); }
.v2-key--base:hover .v2-key__name { color: var(--emerald); }

@media (prefers-reduced-motion: reduce) {
	.v2-key:hover, .v2-key:focus-visible { transform: none; }
	.v2-key:hover .v2-key__icon, .v2-key:focus-visible .v2-key__icon { transform: none; }
}

/* ─────────── BREADCRUMBS ─────────── */
/* v1 renders these on every non-home template; the v2 page templates were the
   only pages missing them — and with them, the BreadcrumbList JSON-LD. The
   parent styles .bayyinah-breadcrumbs for its 52rem .site-main, so here they
   just need the v2 measure and some room above the page title. */
/* The crumbs sit in a plain block wrapper, not directly on .v2-wrap: body
   .bayyinah-inner is a flex column, and a flex item carrying `margin: 0 auto`
   shrinks to its content and centres itself instead of stretching — which is
   what pushed the trail into the middle of the page. */
.v2-crumbs { width: 100%; padding-top: 26px; }
.v2-crumbs .bayyinah-breadcrumbs ol { margin: 0; justify-content: flex-start; }
.v2-crumbs + .v2-pagehead { padding-top: 20px; }

/* ─────────── ARCHIVE CARDS ─────────── */
/* The 34 articles had no imagery at all — the listing was a wall of links.
   Cards are generated per slug into assets/og/posts/ and shared with og:image,
   so the archive and a social preview show the same thing. */
.archive-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.archive-card { display: flex; flex-direction: column; gap: 14px; }
.archive-card__media {
	display: block; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
	background: var(--navy-2); line-height: 0;
	transition: border-color 200ms ease, transform 200ms ease;
}
.archive-card__media img { width: 100%; height: auto; display: block; }
.archive-card:hover .archive-card__media { border-color: rgba(212, 175, 55, .5); transform: translateY(-2px); }
.archive-card__body { display: flex; flex-direction: column; gap: 7px; }

@media (min-width: 720px) {
	.archive-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.archive-card:hover .archive-card__media { transform: none; }
}