/* =====================================================================
   DigiDollar — Gift card hub  «خرید گیفت کارت»      (dd-giftcard-hub.css)
   ---------------------------------------------------------------------
   Loaded ONLY on /giftcard/ (enqueued by inc/giftcard-hub.php).
   RTL-first, brand-gold, dark-mode aware (html[data-dracula-scheme="dark"]),
   motion-safe. Namespaced under .dd-gch throughout.

   The whole page is built from one primitive: .dd-gch-face, a real gift card
   object — credit-card aspect ratio, brand gradient off the registry, guilloche
   security pattern, EMV chip, embossed mark, specular sheen. It appears at two
   sizes (hero deck / the rack) and as a flattened chip in the routing rows, so
   the page reads as one system rather than a stack of unrelated blocks.

   House bans respected: no gold gradient bar across the top of a card, no
   green-dot eyebrow pill.
   ===================================================================== */

.dd-gch {
	/* brand tokens, with fallbacks so the page survives dd-widgets not loading */
	--g:        var(--dd-gold, #e0be00);
	--g2:       var(--dd-gold-2, #fdb837);
	--g3:       var(--dd-gold-bright, #ffbf2f);
	--gd:       var(--dd-gold-deep, #9a7d00);
	--grad:     var(--dd-grad, linear-gradient(135deg,#fdb837 0%,#ffbf2f 45%,#e0be00 100%));
	--gtext:    var(--dd-grad-text, linear-gradient(100deg,#c79a00 0%,#fdb837 60%,#ffd366 100%));
	--ink:      var(--dd-ink, #18181c);
	--muted:    var(--dd-muted, #6c6c78);
	--card:     var(--dd-card, rgba(255,255,255,.74));
	--brd:      var(--dd-card-brd, rgba(20,20,35,.08));
	--hair:     var(--dd-hair, rgba(224,190,0,.28));
	--tile:     var(--dd-tile, rgba(255,255,255,.62));
	--radius:   var(--dd-radius, 18px);
	--radius-lg:var(--dd-radius-lg, 26px);
	--shadow:   var(--dd-shadow, 0 14px 38px -16px rgba(25,22,50,.22));

	/* page-local */
	--maxw: 1200px;
	--ease: cubic-bezier(.22,.61,.36,1);
	--danger: #d2453c;
	--ok: #1c9a6d;
	--page-bg:
		radial-gradient(115% 80% at 100% -10%, #fff6da 0%, transparent 48%),
		radial-gradient(110% 75% at 0% -4%, #fffaf0 0%, transparent 44%),
		linear-gradient(180deg, #fdfbf4 0%, #ffffff 26%, #fdfbf4 100%);
	--band: rgba(255,255,255,.55);
	--ruled: rgba(20,20,35,.06);
	--bar: #fffdf6;

	width: 100%;
	position: relative;
	color: var(--ink);
	background: var(--page-bg);
	overflow-x: clip;
	line-height: 1.95;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html[data-dracula-scheme="dark"] .dd-gch {
	--danger: #ff6b60;
	--ok: #35c898;
	--page-bg:
		radial-gradient(115% 80% at 100% -10%, rgba(253,184,55,.11) 0%, transparent 50%),
		radial-gradient(110% 75% at 0% -4%, rgba(224,190,0,.07) 0%, transparent 46%),
		linear-gradient(180deg, #121217 0%, #0d0d11 34%, #121217 100%);
	--band: rgba(255,255,255,.03);
	--ruled: rgba(255,255,255,.07);
	--bar: #171720;
}

/* =====================================================================
   PAGE SHELL — force the Fullwidth template's chain to a true, centred,
   full-width column on this page only. Same technique as dd-contact.css.
   ===================================================================== */
#page.grid-container:has(.dd-gch) {
	max-width: 100% !important;
	width: 100% !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}
.fullcover:has(.dd-gch),
.left-content:has(.dd-gch),
.post-content:has(.dd-gch),
.text:has(.dd-gch) {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}
.post-content:has(.dd-gch),
.text:has(.dd-gch) { padding-block: 0 !important; }

/* the default template still prints h1.title above the content; the hero owns
   the H1 here, so retire the theme's copy rather than shipping two */
.post-content:has(.dd-gch) > h1.title { display: none !important; }

.dd-gch { margin: 0 !important; }
.dd-gch * { box-sizing: border-box; }
.dd-gch :where(p) { margin: 0 0 1.15em; }
.dd-gch :where(p):last-child { margin-bottom: 0; }
.dd-gch a { color: inherit; }
.dd-gch svg { width: 1em; height: 1em; flex: none; }

/* The theme styles editorial prose for a blog post: an inline <style> block
   ships `h2 { display:flex; text-align:center !important }` with the decorative
   gold rules as ::before/::after, and list items keep a disc marker. All of it
   is right for an article and wrong for a laid-out page, and the !important
   means specificity alone cannot undo it. Reset once here, then the components
   below re-declare the few headings that really are flex. */
.dd-gch h1,
.dd-gch h2,
.dd-gch h3,
.dd-gch h4 {
	display: block !important;
	text-align: start !important;
	padding: 0 !important;
	/* `div.text h1..h6 { color: var(--epcl-black) }` out-specifies this file and
	   would put navy headings on the dark payment band and on dark mode. Let
	   every heading take the colour of the band it sits in instead; the gradient
	   titles paint over it with background-clip anyway. */
	color: inherit !important;
	margin: 0;
	line-height: 1.5;
	border: 0;
}
.dd-gch h2::before, .dd-gch h2::after,
.dd-gch h3::before, .dd-gch h3::after { content: none; display: none; }

.dd-gch ul,
.dd-gch ol,
.dd-gch li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.dd-gch li::marker { content: ""; }
.dd-gch li::before { content: none; }

/* headings that carry an icon next to the text */
.dd-gch .dd-gch-card h3,
.dd-gch .dd-gch-lane h3,
.dd-gch .dd-gch-not h3,
.dd-gch .dd-gch-vs__panel h3,
.dd-gch .dd-gch-risk h3 { display: flex !important; }
.dd-gch .dd-gch-rack__grouphead h3 { display: inline-flex !important; }

.dd-gch__wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: clamp(16px, 5vw, 44px);
	position: relative;
	z-index: 1;
}

/* prose links inside body copy keep the site's gold underline treatment */
/* !important is not decoration here: the theme ships
   `p a, .wp-block-list a, table a { color: #a87c28 !important }` */
.dd-gch p a,
.dd-gch li a {
	color: var(--gd) !important;
	text-decoration: none;
	background-image: linear-gradient(var(--hair), var(--hair));
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	font-weight: 600;
	transition: background-size .25s var(--ease), color .25s var(--ease);
}
.dd-gch p a:hover,
.dd-gch li a:hover { background-size: 100% 2px; color: var(--g) !important; }
html[data-dracula-scheme="dark"] .dd-gch p a,
html[data-dracula-scheme="dark"] .dd-gch li a { color: var(--g3) !important; }

/* =====================================================================
   THE CARD FACE — the primitive everything else is assembled from
   ===================================================================== */

.dd-gch-face {
	position: relative;
	display: block;
	aspect-ratio: 1.586;                 /* ID-1, the real gift card ratio */
	border-radius: 14px;
	background:
		linear-gradient(148deg, var(--f) 0%, var(--t) 62%, var(--f) 130%);
	box-shadow:
		0 1px 0 rgba(255,255,255,.30) inset,
		0 -14px 26px -18px rgba(0,0,0,.85) inset,
		0 12px 26px -14px rgba(12,12,25,.55);
	overflow: hidden;
	isolation: isolate;
	transform-style: preserve-3d;
	transition: box-shadow .4s var(--ease);
}

/* guilloche: the fine engraved arcs on a real voucher, plus a corner bloom */
.dd-gch-face__guilloche {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		repeating-radial-gradient(circle at 120% 130%, rgba(255,255,255,.10) 0 1px, transparent 1px 9px),
		repeating-linear-gradient(112deg, rgba(255,255,255,.055) 0 1px, transparent 1px 8px),
		radial-gradient(120% 130% at 8% -18%, rgba(255,255,255,.34), transparent 58%);
	mix-blend-mode: screen;
	opacity: .9;
}

/* specular sheen; parked off-card, swept across on hover */
.dd-gch-face__sheen {
	position: absolute;
	inset: -40% -60%;
	pointer-events: none;
	z-index: 3;
	background: linear-gradient(104deg,
		transparent 38%,
		rgba(255,255,255,.42) 48%,
		rgba(255,255,255,.10) 55%,
		transparent 64%);
	transform: translateX(-115%);
	transition: transform .85s var(--ease);
}

/* EMV chip */
.dd-gch-face__chip {
	position: absolute;
	inset-inline-end: 10.5%;
	inset-block-start: 15%;
	width: 13%;
	aspect-ratio: 1.28;
	border-radius: 3px;
	background: linear-gradient(150deg, #f6e2a4 0%, #cfa94b 42%, #f4e6b6 60%, #b8912f 100%);
	box-shadow: 0 1px 2px rgba(0,0,0,.35);
	opacity: .92;
}
.dd-gch-face__chip::before,
.dd-gch-face__chip::after {
	content: "";
	position: absolute;
	background: rgba(80,58,10,.55);
}
.dd-gch-face__chip::before { inset-inline: 14%; top: 33%; height: 1px; }
.dd-gch-face__chip::after  { inset-block: 16%; left: 50%; width: 1px; }

/* the brand mark, embossed */
.dd-gch-face__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32%;
	height: auto;
	max-height: 44%;
	object-fit: contain;
	transform: translate(-50%,-52%);
	filter: drop-shadow(0 2px 5px rgba(0,0,0,.42));
	transition: transform .45s var(--ease);
	z-index: 2;
}

/* One flex row rather than two absolutely positioned corners: the brand span
   is dir="ltr", so inset-inline-* resolved against ITS direction and parked both
   labels on the same edge. A row cannot collide however narrow the tile gets. */
.dd-gch-face__foot {
	position: absolute;
	inset-inline: 7%;
	bottom: 7.5%;
	z-index: 2;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	direction: rtl;
}
.dd-gch-face__brand,
.dd-gch-face__den {
	min-width: 0;
	font-size: clamp(.5rem, .74vw, .62rem);
	color: rgba(255,255,255,.84);
	text-shadow: 0 1px 3px rgba(0,0,0,.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}
.dd-gch-face__brand {
	order: 2;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	flex: 0 1 auto;
}
.dd-gch-face__den {
	order: 1;
	color: rgba(255,255,255,.62);
	font-size: clamp(.48rem, .68vw, .58rem);
	flex: 0 1 auto;
}

/* hairline highlight along the top edge */
.dd-gch-face__strip {
	position: absolute;
	inset-inline: 6%;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
	z-index: 2;
}

.dd-gch-face--sm { border-radius: 11px; }
.dd-gch-face--sm .dd-gch-face__mark { width: 30%; }

/* =====================================================================
   BUTTONS + SHARED BITS
   ===================================================================== */

.dd-gch-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: .96rem;
	text-decoration: none;
	border: 1px solid transparent;
	position: relative;
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.dd-gch-btn svg { width: 1.15em; height: 1.15em; }
.dd-gch-btn--gold {
	color: #1a1400;
	background: var(--grad);
	box-shadow: 0 14px 30px -12px rgba(224,190,0,.72);
}
.dd-gch-btn--gold::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
	transform: translateX(-130%);
	transition: transform .8s var(--ease);
}
.dd-gch-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -14px rgba(224,190,0,.88); }
.dd-gch-btn--gold:hover::after { transform: translateX(130%); }
.dd-gch-btn--ghost {
	color: var(--ink);
	border-color: var(--brd);
	background: var(--card);
	backdrop-filter: blur(8px);
}
.dd-gch-btn--ghost:hover { border-color: var(--hair); transform: translateY(-2px); }

/* The eyebrow pill above every section heading is gone — see CLAUDE.md. It is
   the single loudest "AI landing page" tell on a page like this, and the
   headings say what the section is without a label above them. */

.dd-gch-grad {
	background: var(--gtext);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* =====================================================================
   1. HERO
   ===================================================================== */

.dd-gch-hero {
	position: relative;
	padding-block: clamp(38px, 6vw, 84px) clamp(34px, 5vw, 72px);
	overflow: hidden;
}
.dd-gch-hero__aurora {
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 130%;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(253,184,55,.30), transparent 72%) 78% 22%/54% 62% no-repeat,
		radial-gradient(closest-side, rgba(224,190,0,.20), transparent 70%) 14% 8%/46% 54% no-repeat;
	filter: blur(26px);
}
.dd-gch-hero__mesh {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--ruled) 1px, transparent 1px),
		linear-gradient(90deg, var(--ruled) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 60% 20%, #000 0%, transparent 74%);
	mask-image: radial-gradient(ellipse 75% 80% at 60% 20%, #000 0%, transparent 74%);
	opacity: .8;
}

.dd-gch-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: clamp(28px, 5vw, 60px);
}

.dd-gch-hero__h1 {
	font-size: clamp(2rem, 5.4vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 16px 0 18px;
	line-height: 1.28;
}
.dd-gch-hero__h1sub {
	display: block;
	font-size: clamp(1.05rem, 2.1vw, 1.55rem);
	font-weight: 700;
	color: var(--muted);
	margin-top: 6px;
}
.dd-gch-hero__lead {
	font-size: clamp(.98rem, 1.25vw, 1.08rem);
	color: var(--muted);
	max-width: 56ch;
	margin-bottom: 26px;
}
.dd-gch-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.dd-gch-hero__trust {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 26px;
}
.dd-gch-hero__trust li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .89rem;
	color: var(--muted);
}
.dd-gch-hero__trust svg { width: 1.15em; height: 1.15em; color: var(--gd); }
html[data-dracula-scheme="dark"] .dd-gch-hero__trust svg { color: var(--g3); }

/* ---- the fanned deck ---- */
.dd-gch-hero__deck {
	position: relative;
	min-height: clamp(250px, 33vw, 400px);
	perspective: 1400px;
}
.dd-gch-hero__card {
	position: absolute;
	width: clamp(140px, 21vw, 236px);
	transform-style: preserve-3d;
	transition: transform .8s var(--ease);
	will-change: transform;
}
/* a hand-placed fan: nothing algorithmic reads as deliberate the way this does */
.dd-gch-hero__card:nth-child(1) { top: 4%;  inset-inline-end: 30%; z-index: 5; transform: rotate(-9deg)  translateZ(60px); }
.dd-gch-hero__card:nth-child(2) { top: 26%; inset-inline-end: 2%;  z-index: 4; transform: rotate(7deg)   translateZ(30px); }
.dd-gch-hero__card:nth-child(3) { top: 33%; inset-inline-end: 50%; z-index: 3; transform: rotate(-4deg)  translateZ(10px); }
.dd-gch-hero__card:nth-child(4) { top: 58%; inset-inline-end: 20%; z-index: 2; transform: rotate(11deg)  translateZ(-10px); }
.dd-gch-hero__card:nth-child(5) { top: 2%;  inset-inline-end: 62%; z-index: 1; transform: rotate(-15deg) translateZ(-30px); }

.dd-gch--motion .dd-gch-hero__card {
	animation: dd-gch-float 9s var(--ease) infinite alternate;
	animation-delay: calc(var(--i) * -1.4s);
}
@keyframes dd-gch-float {
	from { translate: 0 0; }
	to   { translate: 0 -14px; }
}
/* the fan opens under the cursor */
.dd-gch-hero__deck:hover .dd-gch-hero__card:nth-child(1) { transform: rotate(-12deg) translate(4%, -6%) translateZ(80px); }
.dd-gch-hero__deck:hover .dd-gch-hero__card:nth-child(2) { transform: rotate(10deg)  translate(-3%, 4%) translateZ(46px); }
.dd-gch-hero__deck:hover .dd-gch-hero__card:nth-child(4) { transform: rotate(14deg)  translate(3%, 6%)  translateZ(4px); }
.dd-gch-hero__deck:hover .dd-gch-hero__card:nth-child(5) { transform: rotate(-19deg) translate(-4%,-5%) translateZ(-16px); }

.dd-gch-hero__rate {
	position: absolute;
	inset-block-end: -2%;
	inset-inline-start: 2%;
	z-index: 8;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
	backdrop-filter: blur(12px);
	font-size: .82rem;
	color: var(--muted);
	white-space: nowrap;
}
.dd-gch-hero__rate b { color: var(--ink); font-weight: 800; }
.dd-gch-hero__rate-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
}
.dd-gch--motion .dd-gch-hero__rate-dot { animation: dd-gch-ping 2.4s ease-out infinite; }
@keyframes dd-gch-ping {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); }
	70%  { box-shadow: 0 0 0 8px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* =====================================================================
   2. TRUST STRIP
   ===================================================================== */

.dd-gch-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--brd);
	border: 1px solid var(--brd);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.dd-gch-strip li {
	background: var(--card);
	backdrop-filter: blur(10px);
	padding: 20px clamp(14px, 2vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dd-gch-strip b {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
	background: var(--gtext);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.dd-gch-strip span { font-size: .84rem; color: var(--muted); line-height: 1.8; }

/* =====================================================================
   3. THE ONE WARNING
   ===================================================================== */

.dd-gch-alert {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px;
	align-items: start;
	margin-top: clamp(22px, 3vw, 34px);
	padding: clamp(20px, 2.6vw, 30px);
	border-radius: var(--radius-lg);
	background: var(--card);
	/* no accent rail of any kind on the inline-start edge: as an absolute bar it
	   overshot the corner radius, and as a 3px border it still read as a stray
	   yellow stripe. The icon tile and the gold hairline carry the emphasis. */
	border: 1px solid var(--hair);
	box-shadow: var(--shadow);
	position: relative;
}
.dd-gch-alert__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: linear-gradient(140deg, rgba(253,184,55,.22), rgba(224,190,0,.10));
	border: 1px solid var(--hair);
	color: var(--gd);
	font-size: 1.35rem;
}
html[data-dracula-scheme="dark"] .dd-gch-alert__icon { color: var(--g3); }
.dd-gch-alert__title { font-size: clamp(1.02rem, 1.7vw, 1.25rem); font-weight: 800; margin-bottom: 8px; }
.dd-gch-alert p { color: var(--muted); font-size: .95rem; }
.dd-gch-alert__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-weight: 700;
	font-size: .9rem;
	color: var(--gd);
	text-decoration: none;
}
.dd-gch-alert__link svg { transition: transform .3s var(--ease); }
.dd-gch-alert__link:hover svg { transform: translateX(-4px); }
html[data-dracula-scheme="dark"] .dd-gch-alert__link { color: var(--g3); }

/* =====================================================================
   SECTION SCAFFOLD
   ===================================================================== */

.dd-gch-sec { padding-block: clamp(46px, 6.5vw, 96px); position: relative; }
.dd-gch-sec--alt { background: var(--band); border-block: 1px solid var(--brd); }
.dd-gch-sec__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.dd-gch-sec__title {
	font-size: clamp(1.45rem, 3.1vw, 2.3rem);
	font-weight: 800;
	margin-bottom: 14px;
	background: var(--gtext);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.dd-gch-sec__lead { font-size: clamp(.95rem, 1.2vw, 1.03rem); color: var(--muted); }
.dd-gch-sec__note {
	display: inline-block;
	margin-top: 6px;
	padding: 7px 15px;
	border-radius: 999px;
	background: var(--tile);
	border: 1px solid var(--brd);
	font-size: .84rem;
	color: var(--muted);
}
.dd-gch-sec__after { margin-top: clamp(22px, 3vw, 34px); color: var(--muted); font-size: .95rem; max-width: 78ch; }
.dd-gch-sec__after--tight { margin-top: 10px; }
/* padding and border need !important of their own: the heading reset above
   zeroes both to undo the theme's editorial h2 */
.dd-gch .dd-gch-sub {
	font-size: clamp(1.25rem, 2.4vw, 1.7rem);
	font-weight: 800;
	margin-top: clamp(40px, 5vw, 66px);
	padding-top: clamp(26px, 3vw, 40px) !important;
	border-top: 1px solid var(--brd) !important;
}

/* generic card */
.dd-gch-card {
	padding: clamp(20px, 2.4vw, 28px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
	backdrop-filter: blur(10px);
}
.dd-gch-card h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1.04rem;
	font-weight: 800;
	margin-bottom: 10px;
}
.dd-gch-card h3 svg { width: 1.2em; height: 1.2em; color: var(--gd); }
html[data-dracula-scheme="dark"] .dd-gch-card h3 svg { color: var(--g3); }
.dd-gch-card p { color: var(--muted); font-size: .93rem; }
.dd-gch-card--danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.dd-gch-card--danger h3 svg { color: var(--danger); }

.dd-gch-note {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-top: clamp(22px, 3vw, 32px);
	padding: 18px 22px;
	border-radius: var(--radius);
	background: var(--tile);
	border: 1px solid var(--brd);
}
.dd-gch-note svg { width: 1.3em; height: 1.3em; color: var(--gd); margin-top: .35em; }
.dd-gch-note p { color: var(--muted); font-size: .93rem; }
html[data-dracula-scheme="dark"] .dd-gch-note svg { color: var(--g3); }

/* =====================================================================
   4. THE RACK
   ===================================================================== */

.dd-gch-rack__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(26px, 3.4vw, 40px);
	padding: 12px;
	border-radius: 999px;
	/* opaque on purpose: it is sticky, and tiles scrolling underneath a
	   translucent bar read as a rendering fault rather than as depth */
	background: var(--bar);
	border: 1px solid var(--brd);
	box-shadow: 0 18px 34px -22px rgba(20,18,45,.55);
	position: sticky;
	top: calc(var(--stick, 84px) + 12px);
	z-index: 20;
}
.dd-gch-rack__search {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-inline: 16px;
	flex: 1 1 220px;
	min-width: 0;
}
.dd-gch-rack__search svg { width: 1.15em; height: 1.15em; color: var(--muted); }
.dd-gch-rack__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--ink);
	padding-block: 8px;
	/* the theme's form CSS ships `input { margin-bottom: 15px }`. In a flex row
	   `align-items: center` centres the *margin* box, so the field itself lands
	   15px high and the placeholder sits above the chips beside it. */
	margin: 0;
	height: auto;
}
.dd-gch-rack__search input:focus { outline: none; }
.dd-gch-rack__search input::placeholder { color: var(--muted); }
.dd-gch-rack__search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.dd-gch-rack__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-gch-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 17px;
	border-radius: 999px;
	border: 1px solid var(--brd);
	background: var(--tile);
	color: var(--muted);
	font: inherit;
	font-size: .86rem;
	font-weight: 700;
	cursor: pointer;
	transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.dd-gch-tab b {
	font-size: .74rem;
	font-weight: 800;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--brd);
	color: inherit;
}
.dd-gch-tab:hover { color: var(--ink); border-color: var(--hair); }
.dd-gch-tab.is-on {
	color: #1a1400;
	background: var(--grad);
	border-color: transparent;
	box-shadow: 0 10px 22px -12px rgba(224,190,0,.8);
}
.dd-gch-tab.is-on b { background: rgba(26,20,0,.16); }

.dd-gch-rack__group { margin-bottom: clamp(34px, 4.4vw, 58px); }
.dd-gch-rack__group[hidden] { display: none; }
.dd-gch-rack__grouphead { margin-bottom: 20px; }
.dd-gch-rack__grouphead h3 {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: clamp(1.08rem, 1.8vw, 1.3rem);
	font-weight: 800;
}
.dd-gch-rack__grouphead p { color: var(--muted); font-size: .89rem; margin: 4px 0 0; }

.dd-gch-rack {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
	gap: clamp(16px, 2vw, 26px);
}
.dd-gch-tile { perspective: 900px; }
.dd-gch-tile[hidden] { display: none; }

.dd-gch-tile__hit {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 14px 16px;
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
	transform-style: preserve-3d;
}
a.dd-gch-tile__hit:hover,
a.dd-gch-tile__hit:focus-visible {
	border-color: var(--hair);
	box-shadow: 0 26px 50px -26px rgba(20,18,45,.5);
	transform: translateY(-6px);
	outline: none;
}
a.dd-gch-tile__hit:hover .dd-gch-face,
a.dd-gch-tile__hit:focus-visible .dd-gch-face {
	transform: rotateX(var(--rx, 5deg)) rotateY(var(--ry, -6deg)) translateZ(16px);
	box-shadow:
		0 1px 0 rgba(255,255,255,.35) inset,
		0 -14px 26px -18px rgba(0,0,0,.85) inset,
		0 26px 40px -18px rgba(12,12,25,.7);
}
a.dd-gch-tile__hit:hover .dd-gch-face__sheen { transform: translateX(115%); }
a.dd-gch-tile__hit:hover .dd-gch-face__mark { transform: translate(-50%,-52%) scale(1.07); }
.dd-gch-tile .dd-gch-face { transition: transform .5s var(--ease), box-shadow .4s var(--ease); }

.dd-gch-tile__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding-inline: 4px; }
.dd-gch-tile__name { font-size: 1rem; font-weight: 800; line-height: 1.7; }
.dd-gch-tile__use { font-size: .82rem; color: var(--muted); line-height: 1.75; }
.dd-gch-tile__foot { margin-top: auto; padding-top: 10px; }
.dd-gch-tile__go {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .85rem;
	font-weight: 800;
	color: var(--gd);
}
.dd-gch-tile__go svg { width: 1em; height: 1em; transition: transform .3s var(--ease); }
a.dd-gch-tile__hit:hover .dd-gch-tile__go svg { transform: translateX(-4px); }
html[data-dracula-scheme="dark"] .dd-gch-tile__go { color: var(--g3); }

.dd-gch-tile__soon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px dashed var(--brd);
	background: var(--tile);
	font-size: .78rem;
	font-weight: 700;
	color: var(--muted);
}
.dd-gch-tile__soon svg { width: 1em; height: 1em; }

/* «به زودی»: readable and still handsome, just visibly not yet buyable */
.dd-gch-tile.is-soon .dd-gch-tile__hit { background: transparent; border-style: dashed; }
.dd-gch-tile.is-soon .dd-gch-face { filter: saturate(.88); opacity: .93; }
.dd-gch-tile.is-soon .dd-gch-tile__name { font-weight: 700; color: var(--muted); }

.dd-gch-rack__empty {
	color: var(--muted);
	font-size: .95rem;
	padding: 26px;
	text-align: center;
	border: 1px dashed var(--brd);
	border-radius: var(--radius);
}

/* =====================================================================
   5. DECISION ROUTER
   ===================================================================== */

.dd-gch-routes { display: flex; flex-direction: column; gap: 10px; }
.dd-gch-route {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) auto minmax(0, .8fr) minmax(0, 1.35fr);
	align-items: center;
	gap: clamp(12px, 2vw, 22px);
	padding: 16px clamp(16px, 2.2vw, 24px);
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.dd-gch-route:hover { border-color: var(--hair); transform: translateX(-4px); }
.dd-gch-route__want { font-weight: 700; font-size: .94rem; }
.dd-gch-route__arrow { color: var(--muted); opacity: .55; font-size: 1.1rem; }
.dd-gch-route__cards { display: flex; flex-wrap: wrap; gap: 7px; }
.dd-gch-route__why { color: var(--muted); font-size: .87rem; line-height: 1.85; }

.dd-gch-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px 5px 6px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--f), var(--t));
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 6px 14px -8px rgba(12,12,25,.75), 0 1px 0 rgba(255,255,255,.25) inset;
}
.dd-gch-chip img { width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* =====================================================================
   6. GIFT CARD vs CREDIT CARD
   ===================================================================== */

.dd-gch-vs {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: clamp(14px, 2.2vw, 26px);
}
.dd-gch-vs__panel {
	padding: clamp(22px, 2.6vw, 30px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
}
.dd-gch-vs__panel--a { border-color: var(--hair); }
.dd-gch-vs__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: .92rem;
	margin-bottom: 12px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--tile);
	border: 1px solid var(--brd);
}
.dd-gch-vs__panel--a .dd-gch-vs__tag { color: var(--gd); border-color: var(--hair); }
html[data-dracula-scheme="dark"] .dd-gch-vs__panel--a .dd-gch-vs__tag { color: var(--g3); }
.dd-gch-vs__panel p { color: var(--muted); font-size: .93rem; }
.dd-gch-vs__list { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.dd-gch-vs__list li { display: flex; gap: 9px; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.dd-gch-vs__list svg { width: 1.1em; height: 1.1em; margin-top: .45em; }
.dd-gch-vs__list .is-pro svg { color: var(--ok); }
.dd-gch-vs__list .is-con svg { color: var(--danger); }
.dd-gch-vs__mid {
	align-self: center;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--grad);
	color: #1a1400;
	font-size: 1.25rem;
	box-shadow: 0 12px 26px -12px rgba(224,190,0,.8);
}

/* =====================================================================
   7. REGION
   ===================================================================== */

.dd-gch-sec--region { background: var(--band); border-block: 1px solid var(--brd); }
.dd-gch-region__rule {
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	padding: 18px 24px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--hair);
	margin-bottom: clamp(22px, 3vw, 32px);
	box-shadow: var(--shadow);
}
.dd-gch-regions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(14px, 1.8vw, 20px);
}
.dd-gch-region {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"code you"
		"code buy"
		"why  why";
	gap: 6px 16px;
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.dd-gch-region:hover { transform: translateY(-4px); border-color: var(--hair); box-shadow: var(--shadow); }
.dd-gch-region__code {
	grid-area: code;
	display: grid;
	place-items: center;
	width: 54px; height: 54px;
	border-radius: 16px;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--gd);
	background: linear-gradient(140deg, rgba(253,184,55,.20), rgba(224,190,0,.07));
	border: 1px solid var(--hair);
}
html[data-dracula-scheme="dark"] .dd-gch-region__code { color: var(--g3); }
.dd-gch-region.is-stop .dd-gch-region__code {
	color: var(--danger);
	border-color: color-mix(in srgb, var(--danger) 34%, transparent);
	background: color-mix(in srgb, var(--danger) 11%, transparent);
}
.dd-gch-region.is-pick .dd-gch-region__code {
	color: var(--ok);
	border-color: color-mix(in srgb, var(--ok) 34%, transparent);
	background: color-mix(in srgb, var(--ok) 11%, transparent);
}
.dd-gch-region__you { grid-area: you; font-size: .88rem; color: var(--muted); align-self: end; }
.dd-gch-region__buy { grid-area: buy; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dd-gch-region__buylabel { font-size: .74rem; color: var(--muted); }
.dd-gch-region__buy b { font-size: 1.08rem; font-weight: 800; }
.dd-gch-region.is-stop .dd-gch-region__buy b { color: var(--danger); }
.dd-gch-region__why {
	grid-area: why;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px dashed var(--brd);
	font-size: .85rem;
	color: var(--muted);
	line-height: 1.85;
}
.dd-gch-region__after {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(14px, 1.8vw, 20px);
	margin-top: clamp(20px, 2.6vw, 28px);
}

/* =====================================================================
   8. THE CRYPTO ROUTE — a warm gold band that follows the theme.
   It used to be a hardcoded dark console in both schemes, which put a black
   slab in the middle of an otherwise light page. The console survives, but
   only where it belongs: in dark mode.
   ===================================================================== */

.dd-gch-sec--pay {
	background:
		radial-gradient(90% 120% at 85% 0%, rgba(253,184,55,.16), transparent 58%),
		radial-gradient(70% 100% at 5% 100%, rgba(224,190,0,.09), transparent 60%),
		var(--band);
	border-block: 1px solid var(--brd);
}
.dd-gch-sec--pay::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(224,190,0,.22) 1px, transparent 1.6px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 72%);
	opacity: .5;
}
html[data-dracula-scheme="dark"] .dd-gch-sec--pay {
	color: #f3f0e6;
	background:
		radial-gradient(90% 120% at 85% 0%, rgba(253,184,55,.18), transparent 58%),
		radial-gradient(70% 100% at 5% 100%, rgba(224,190,0,.10), transparent 60%),
		linear-gradient(180deg, #16161c 0%, #101015 100%);
	border-block-color: rgba(255,255,255,.08);
}
html[data-dracula-scheme="dark"] .dd-gch-sec--pay::before { background-image: radial-gradient(rgba(224,190,0,.16) 1px, transparent 1.6px); }
html[data-dracula-scheme="dark"] .dd-gch-sec--pay p a,
html[data-dracula-scheme="dark"] .dd-gch-sec--pay li a { color: var(--g3) !important; }

.dd-gch-lanes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(14px, 2vw, 22px);
}
.dd-gch-lane {
	position: relative;
	padding: clamp(22px, 2.6vw, 30px);
	border-radius: var(--radius-lg);
	/* --card / --brd resolve to the same rgba(255,255,255,.045) and .09 in dark
	   mode that this block used to hardcode, so the console is unchanged there */
	background: var(--card);
	border: 1px solid var(--brd);
	backdrop-filter: blur(10px);
	transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
	overflow: hidden;
}
.dd-gch-lane:hover { transform: translateY(-5px); border-color: var(--hair); background: var(--tile); }
.dd-gch-lane__num {
	position: absolute;
	inset-inline-end: 16px;
	inset-block-start: 10px;
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--ruled);
}
.dd-gch-lane h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.06rem;
	font-weight: 800;
	margin-bottom: 10px;
}
.dd-gch-lane h3 svg { width: 1.25em; height: 1.25em; color: var(--gd); }
html[data-dracula-scheme="dark"] .dd-gch-lane h3 svg { color: var(--g3); }
.dd-gch-lane p { color: var(--muted); font-size: .92rem; margin: 0; }
.dd-gch-pay__notes {
	margin-top: clamp(24px, 3vw, 34px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
	font-size: .93rem;
}

/* the routes diagram, between the lanes and the prose that explains them.
   Capped at the file's own width so it is never upscaled into softness, and
   centred because it is a summary of the three lanes above it, not a sidebar.

   The `.dd-gch` prefix on every rule is doing real work: the theme ships
   `div.text figure { padding-top:8px; margin-bottom:24px }`,
   `div.text img { border-radius:8px; box-shadow:<a very heavy one> }` and
   `figcaption { color: var(--epcl-black); text-align:center }`, which would
   paint the caption navy. The extra class outranks all three without
   !important. */
.dd-gch-pay__fig { margin-top: clamp(22px, 3vw, 32px); }
.dd-gch .dd-gch-fig {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	max-width: 940px;
	margin-inline: auto;
}
.dd-gch .dd-gch-fig__plate {
	display: block;
	padding: clamp(10px, 1.6vw, 18px);
	border-radius: var(--radius-lg);
	background: var(--tile);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.dd-gch .dd-gch-fig:hover .dd-gch-fig__plate {
	border-color: var(--hair);
	transform: translateY(-2px);
}
.dd-gch .dd-gch-fig img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--radius-lg) - 12px);
	box-shadow: none;
}
.dd-gch .dd-gch-fig figcaption {
	margin: 0;
	padding: 0 4px;
	font-size: 13px;
	line-height: 1.95;
	text-align: start;
	opacity: 1;
	color: var(--muted);
}
html[data-dracula-scheme="dark"] .dd-gch-sec--pay .dd-gch-fig figcaption { color: rgba(243,240,230,.72); }
@media (prefers-reduced-motion: reduce) {
	.dd-gch .dd-gch-fig__plate { transition: none; }
	.dd-gch .dd-gch-fig:hover .dd-gch-fig__plate { transform: none; }
}

/* =====================================================================
   9. COST
   ===================================================================== */

.dd-gch-costs { display: flex; flex-direction: column; gap: 12px; }
.dd-gch-cost {
	display: grid;
	grid-template-columns: auto minmax(0, .85fr) auto minmax(0, 1.2fr) minmax(0, 1.35fr);
	align-items: center;
	gap: clamp(12px, 1.8vw, 22px);
	padding: 18px clamp(16px, 2.2vw, 24px);
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
}
.dd-gch-cost__n {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 12px;
	font-weight: 800;
	font-size: .92rem;
	color: #1a1400;
	background: var(--grad);
}
.dd-gch-cost__name { font-weight: 800; font-size: .97rem; }
.dd-gch-cost__weight {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--tile);
	border: 1px solid var(--brd);
	font-size: .76rem;
	font-weight: 700;
	color: var(--muted);
	white-space: nowrap;
}
.dd-gch-cost__what,
.dd-gch-cost__room { font-size: .86rem; color: var(--muted); line-height: 1.85; }

/* The verdict panel that closes the fee table. Deliberately not a card: it is
   tinted rather than raised, so it reads as a conclusion drawn from the rows
   above rather than as one more item in the list. */
.dd-gch-quote {
	margin: clamp(24px, 3vw, 34px) 0 0;
	padding: clamp(22px, 2.8vw, 32px);
	border-radius: var(--radius-lg);
	background: var(--tile);
	border: 1px solid var(--brd);
}
.dd-gch-quote__lead {
	font-size: clamp(1.02rem, 1.85vw, 1.28rem);
	font-weight: 800;
	line-height: 1.85;
	color: var(--ink);
	margin: 0;
}
.dd-gch-quote__note {
	margin: clamp(14px, 1.8vw, 18px) 0 0;
	padding-top: clamp(14px, 1.8vw, 18px);
	border-top: 1px solid var(--brd);
	color: var(--muted);
	font-size: .93rem;
	line-height: 1.95;
}
.dd-gch-card--wide { margin-top: clamp(18px, 2.4vw, 26px); }

/* =====================================================================
   10. KYC
   ===================================================================== */

.dd-gch-kyc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(14px, 2vw, 22px);
}
.dd-gch-kyc__panel {
	padding: clamp(22px, 2.6vw, 30px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
}
.dd-gch-kyc__verdict {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .88rem;
	font-weight: 800;
	padding: 6px 15px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.dd-gch-kyc__panel.is-no .dd-gch-kyc__verdict {
	color: var(--ok);
	background: color-mix(in srgb, var(--ok) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
}
.dd-gch-kyc__panel.is-yes .dd-gch-kyc__verdict {
	color: var(--gd);
	background: rgba(253,184,55,.14);
	border: 1px solid var(--hair);
}
html[data-dracula-scheme="dark"] .dd-gch-kyc__panel.is-yes .dd-gch-kyc__verdict { color: var(--g3); }
.dd-gch-kyc__panel h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 8px; }
.dd-gch-kyc__panel p { color: var(--muted); font-size: .93rem; }

/* =====================================================================
   11. STEPS
   ===================================================================== */

/* five steps, so five columns once there is room: auto-fit lands on four and
   orphans the last one */
.dd-gch-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(14px, 2vw, 22px);
	position: relative;
}
@media (min-width: 1080px) {
	.dd-gch-steps { grid-template-columns: repeat(5, 1fr); }
}
.dd-gch-step {
	position: relative;
	padding: clamp(20px, 2.4vw, 26px) clamp(18px, 2vw, 22px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.dd-gch-step:hover { transform: translateY(-5px); border-color: var(--hair); box-shadow: var(--shadow); }
/* the rail that threads the steps together, drawn into the gap on its start
   side so it reads right to left with the rest of the page */
.dd-gch-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 40px;
	inset-inline-start: calc(-1 * clamp(14px, 2vw, 22px));
	width: clamp(14px, 2vw, 22px);
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(to left, var(--hair), transparent);
}
.dd-gch-step__n {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 14px;
	font-weight: 800;
	font-size: 1.02rem;
	color: #1a1400;
	background: var(--grad);
	box-shadow: 0 12px 24px -14px rgba(224,190,0,.9);
	margin-bottom: 14px;
}
.dd-gch-step h3 { font-size: .99rem; font-weight: 800; margin-bottom: 8px; }
.dd-gch-step p { color: var(--muted); font-size: .87rem; }
.dd-gch-steps__after {
	margin-top: clamp(22px, 3vw, 32px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(16px, 2vw, 26px);
	align-items: start;
	color: var(--muted);
	font-size: .93rem;
}
.dd-gch-steps__warn {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 20px;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--danger) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
	color: var(--ink);
	margin: 0;
}
.dd-gch-steps__warn svg { width: 1.25em; height: 1.25em; color: var(--danger); margin-top: .35em; }

/* =====================================================================
   12. REDEEM
   ===================================================================== */

.dd-gch-redeem { display: flex; flex-direction: column; gap: 10px; }
.dd-gch-redeem__row {
	display: grid;
	grid-template-columns: auto minmax(120px, .5fr) minmax(0, 2fr);
	align-items: center;
	gap: clamp(12px, 2vw, 22px);
	padding: 14px clamp(16px, 2.2vw, 22px);
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.dd-gch-redeem__row:hover { border-color: var(--hair); transform: translateX(-4px); }
.dd-gch-redeem__mark {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: linear-gradient(140deg, var(--f), var(--t));
	box-shadow: 0 8px 18px -10px rgba(12,12,25,.8), 0 1px 0 rgba(255,255,255,.25) inset;
}
.dd-gch-redeem__mark img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.dd-gch-redeem__label { font-weight: 800; font-size: .95rem; }
.dd-gch-redeem__path { color: var(--muted); font-size: .88rem; line-height: 1.85; }

/* =====================================================================
   13. RISKS
   ===================================================================== */

.dd-gch-sec--risk { background: var(--band); border-block: 1px solid var(--brd); }
.dd-gch-risks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(14px, 2vw, 22px);
}
/* no coloured rule across the card top: the red icon tile already carries the
   warning, and a tinted eyebrow line above every heading is the house-banned
   accent bar in another colour */
.dd-gch-risk {
	padding: clamp(22px, 2.6vw, 28px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.dd-gch-risk:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.dd-gch-risk__icon {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: 14px;
	margin-bottom: 12px;
	font-size: 1.2rem;
	color: var(--danger);
	background: color-mix(in srgb, var(--danger) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
}
.dd-gch-risk h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 9px; }
.dd-gch-risk p { color: var(--muted); font-size: .9rem; }

/* =====================================================================
   14. SELL + NOT FOR YOU
   ===================================================================== */

/* the one section that is pure prose, so it gets a panel and a rail rather than
   sitting bare between two card grids */
.dd-gch-sell {
	position: relative;
	padding: clamp(22px, 3vw, 34px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
	columns: 2;
	column-gap: clamp(24px, 4vw, 48px);
	color: var(--muted);
	font-size: .95rem;
}
.dd-gch-sell p { break-inside: avoid; }
.dd-gch-nots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(14px, 2vw, 22px);
	margin-top: clamp(20px, 2.6vw, 28px);
}
.dd-gch-not {
	padding: clamp(20px, 2.4vw, 26px);
	border-radius: var(--radius-lg);
	background: var(--tile);
	border: 1px dashed var(--brd);
}
.dd-gch-not h3 {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: .99rem;
	font-weight: 800;
	margin-bottom: 8px;
}
.dd-gch-not h3 svg { width: 1.1em; height: 1.1em; color: var(--danger); margin-top: .35em; }
.dd-gch-not p { color: var(--muted); font-size: .88rem; }

/* =====================================================================
   15. FAQ
   ===================================================================== */

.dd-gch-faq {
	columns: 2;
	column-gap: clamp(16px, 2vw, 22px);
}
.dd-gch-faq__item {
	break-inside: avoid;
	margin-bottom: 10px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	overflow: hidden;
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.dd-gch-faq__item.is-open { border-color: var(--hair); box-shadow: var(--shadow); }
.dd-gch-faq__item h3 { margin: 0; font-size: inherit; }
.dd-gch-faq__q {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px clamp(16px, 2vw, 22px);
	background: none;
	border: 0;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	color: var(--ink);
	text-align: start;
	cursor: pointer;
	line-height: 1.8;
}
.dd-gch-faq__plus {
	position: relative;
	flex: none;
	width: 22px; height: 22px;
	border-radius: 8px;
	background: var(--tile);
	border: 1px solid var(--brd);
	transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.dd-gch-faq__plus::before,
.dd-gch-faq__plus::after {
	content: "";
	position: absolute;
	inset: 50% 5px auto;
	height: 1.5px;
	border-radius: 2px;
	background: var(--muted);
	transform: translateY(-50%);
	transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.dd-gch-faq__plus::after { transform: translateY(-50%) rotate(90deg); }
.dd-gch-faq__item.is-open .dd-gch-faq__plus { background: var(--grad); border-color: transparent; }
.dd-gch-faq__item.is-open .dd-gch-faq__plus::before,
.dd-gch-faq__item.is-open .dd-gch-faq__plus::after { background: #1a1400; }
.dd-gch-faq__item.is-open .dd-gch-faq__plus::after { transform: translateY(-50%) rotate(0deg); }

/* closed by grid-rows collapse, so the answer stays in the DOM for crawlers */
.dd-gch-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s var(--ease);
}
.dd-gch-faq__item.is-open .dd-gch-faq__a { grid-template-rows: 1fr; }
.dd-gch-faq__a > p {
	overflow: hidden;
	margin: 0;
	padding-inline: clamp(16px, 2vw, 22px);
	color: var(--muted);
	font-size: .89rem;
	line-height: 2;
}
.dd-gch-faq__item.is-open .dd-gch-faq__a > p { padding-bottom: 18px; }

/* =====================================================================
   16. FINAL CTA
   ===================================================================== */

.dd-gch-sec--end { padding-bottom: clamp(56px, 8vw, 110px); }
.dd-gch-end {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	align-items: center;
	gap: clamp(24px, 4vw, 50px);
	padding: clamp(28px, 4vw, 54px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--hair);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}
.dd-gch-end::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 60%;
	height: 150%;
	background: radial-gradient(closest-side, rgba(253,184,55,.22), transparent 70%);
	filter: blur(24px);
	pointer-events: none;
}
.dd-gch-end__copy p { color: var(--muted); font-size: .95rem; }
.dd-gch-end__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.dd-gch-end__deck { position: relative; min-height: 190px; perspective: 1100px; }
.dd-gch-end__card { position: absolute; width: clamp(150px, 20vw, 210px); }
.dd-gch-end__card:nth-child(1) { top: 4%;  inset-inline-end: 34%; z-index: 2; transform: rotate(-8deg); }
.dd-gch-end__card:nth-child(2) { top: 34%; inset-inline-end: 6%;  z-index: 1; transform: rotate(9deg); }
.dd-gch--motion .dd-gch-end__card { animation: dd-gch-float 8s var(--ease) infinite alternate; animation-delay: calc(var(--i) * -1.2s); }

/* =====================================================================
   SCROLL REVEAL — added by JS only when motion is allowed
   ===================================================================== */

.dd-gch--motion .dd-gch-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.dd-gch--motion .dd-gch-reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1040px) {
	.dd-gch-hero { padding-top: clamp(64px, 14vw, 96px); }
	.dd-gch-hero__grid { grid-template-columns: 1fr; }
	.dd-gch-hero__deck { min-height: 300px; order: -1; }
	.dd-gch-hero__card { width: clamp(130px, 27vw, 200px); }
	.dd-gch-strip { grid-template-columns: repeat(2, 1fr); }
	.dd-gch-end { grid-template-columns: 1fr; }
	.dd-gch-end__deck { display: none; }
	.dd-gch-route { grid-template-columns: 1fr; gap: 10px; }
	.dd-gch-route__arrow { display: none; }
	.dd-gch-cost { grid-template-columns: auto 1fr; grid-auto-flow: dense; }
	.dd-gch-cost__what, .dd-gch-cost__room { grid-column: 1 / -1; }
	.dd-gch-vs { grid-template-columns: 1fr; }
	.dd-gch-vs__mid { justify-self: center; rotate: 90deg; }
}

@media (max-width: 780px) {
	.dd-gch-faq, .dd-gch-sell { columns: 1; }
	.dd-gch-rack__bar { position: static; border-radius: var(--radius); }
	.dd-gch-rack { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.dd-gch-redeem__row { grid-template-columns: auto 1fr; }
	.dd-gch-redeem__path { grid-column: 1 / -1; }
	.dd-gch-step:not(:last-child)::after { display: none; }
	.dd-gch-alert { grid-template-columns: 1fr; }
	.dd-gch-tile__hit { gap: 10px; padding: 10px 10px 12px; }
	.dd-gch-tile__name { font-size: .88rem; }
	/* the tagline is the first thing to go: at this width it costs two lines
	   per tile and the name plus the face already say what the card is */
	.dd-gch-tile__use { display: none; }
	.dd-gch-tile__foot { padding-top: 6px; }
	.dd-gch-region { grid-template-columns: auto 1fr; }
	.dd-gch-quote__lead { font-size: 1.02rem; }
}

@media (max-width: 520px) {
	.dd-gch-strip { grid-template-columns: 1fr; }
	.dd-gch-hero__deck { min-height: 230px; }
	.dd-gch-rack { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   MOTION SAFETY — every animation above is opt-in via .dd-gch--motion,
   which the JS only adds when the user has not asked for reduced motion.
   This block covers the case where the preference changes after load.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	.dd-gch *,
	.dd-gch *::before,
	.dd-gch *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
	.dd-gch-reveal { opacity: 1 !important; transform: none !important; }
}