/* =====================================================================
   DigiDollar — Gift card MONEY PAGE            (dd-giftcard-page.css)
   ---------------------------------------------------------------------
   ONE stylesheet for ALL 24 brand pages under /giftcard/. Loaded only on a
   page whose body carries [dd_giftcard_page]. Namespaced under .dd-gcp.

   The brand is a variable, not a design. Every card colours itself from two
   registry values (--f / --t, bare `r g b` channels on the root), which drive
   the card face, the hero wash and the one band that belongs to the brand.
   Structure, type and spacing are identical for Steam and for Twitch, which is
   what makes this a template that can carry 24 pages instead of 24 layouts.

   THE PROTAGONIST is .dd-gcp-face: a real object, engraved with a real
   guilloche, appearing six times in four variants — hero, ghost twin, stamped
   chip, watermark, and the closing stack. It carries the denomination the
   reader selected, its sheen and hologram track the pointer, and it tilts in
   3D. That is not decoration: the face IS the product, and the number on it is
   the number being priced underneath.

   SECTIONS ARE OBJECTS, NOT COPIES. The first version of this file drew
   fourteen variations of one rounded panel. DESIGN-BANS names that pattern
   («every card identical … is a template, not a design»), so each section here
   is a different kind of thing, chosen by what it says: a drawn gate for the
   irreversible decision, a switchboard for the router, medallions for regions,
   rails for the payment routes, an indented stack for the cost assembly,
   device frames for redemption, window chrome for the error strings.

   ACCENTS CARRY MEANING. --acc is set by a class on the section and takes one
   of four values, never a rotation through a palette:
     money  gold, the house colour — price, regions, cost
     how    green — the steps that work
     risk   red — errors, risks
     warn   amber — the irreversible bits
   The brand hue is deliberately rationed: the face, the hero wash, and the
   payment band. Everywhere else it would stop meaning «this brand».

   HOUSE BANS (DESIGN-BANS.md), enforced deliberately:
     - No eyebrow pill above any heading, in any colour. The H2 is the label.
     - No coloured accent bar or rail on any edge: no absolutely positioned
       ::before rail, no border-inline-start, no tinted border-top, no gradient
       rule under a heading. Every border in this file is a 1px hairline in
       --brd / --hair. Emphasis is icon tiles, tints, weight and whitespace.
     The two hairline connectors here (the redeem spine, the lane wire) join
     two marks and carry no colour of their own, which is the approved form.
   Both bans are re-checked with grep before this page ships.

   THEME COLLISIONS handled below (STATE.md «six theme collisions» + 7-9):
     1. inline <style> forces h2 { display:flex; text-align:center !important }
     2. div.text h1..h6 { color: var(--epcl-black) } paints headings navy
     3. p a, .wp-block-list a, table a { color:#a87c28 !important }
     4. input { margin-bottom:15px } — no inputs on this page, nothing to fix
     5. blockquote is theme-owned and unstyleable — this page uses <aside>
     6. the dark mode plugin flattens border-inline-start — none used here
     7. the dark mode plugin rewrites colour-looking inline custom properties —
        every brand colour arrives as bare `r g b` channels, never as hex
     8. .post-content ul li::before paints a gold bullet over our icons
     9. the theme centres button labels site wide
   ===================================================================== */

.dd-gcp {
	/* 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: 1180px;
	--ease: cubic-bezier(.22,.61,.36,1);
	--danger: #d2453c;
	--warn: #b4770c;
	--ok: #1c9a6d;
	/* the default accent is the house gold; sections override it by class */
	--acc: var(--gd);
	--page-bg:
		radial-gradient(120% 78% at 100% -12%, #fff6da 0%, transparent 46%),
		radial-gradient(110% 70% at 0% -6%, #fffaf0 0%, transparent 42%),
		linear-gradient(180deg, #fdfbf4 0%, #ffffff 24%, #fdfbf4 100%);
	--band: rgba(255,255,255,.55);
	--ruled: rgba(20,20,35,.06);
	--code-bg: rgba(20,20,35,.05);
	--ghost: rgba(20,20,35,.09);        /* the outline card, and nothing else */
	--sunk: rgba(20,20,35,.035);        /* a recess: the error screen, the board */

	/* Brand channels, one integer each, with fallbacks — the root carries the
	   real values inline, per card. They are split into three properties on
	   purpose: the dark mode plugin reads `#1b2a41` AND `27 42 65` as colours,
	   twins them, and rewrites every rule that consumes them, which turns every
	   brand into the same grey. A lone integer it cannot read. See
	   dd_gcp_rgb_vars() in inc/giftcard-page.php. */
	--f1: 42; --f2: 42; --f3: 48;
	--t1: 74; --t2: 74; --t3: 85;
	/* NO convenience alias here. A `--brand-f: rgb(var(--f1) …)` shorthand reads
	   as a colour to the plugin, gets its own twin, and every rule using it is
	   redirected to the grey version — which is exactly how this broke the first
	   time. The channels are written out at each use site on purpose. */

	/* THE CHIP'S GOLD, pinned through the plugin's own contract.
	   Everything else on this card is either a brand channel (above) or a white
	   the plugin is happy to leave alone. The chip is neither: it is five fixed
	   golds, and the plugin re-emits any rule containing them as
	   `var(--dracula-background-<hex8>, <dark fallback>)`. Defining those names
	   here, scoped to this page, makes its own rule resolve back to the original
	   colour. This is the documented shape of its variables, not a hack around
	   them, and it is the only approach that survived: integer channels, SVG
	   paint and !important all lose (see dd_gcp_rgb_vars() for the full list of
	   what was tried). A gift card's chip is a physical gold object; it does not
	   have a dark mode. */
	--dracula-background-fbe7b3: #fbe7b3;
	--dracula-background-cfa64a: #cfa64a;
	--dracula-background-f2d99a: #f2d99a;
	--dracula-background-a9822f: #a9822f;
	--dracula-background-58400c8c: rgba(88,64,12,.55);

	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-gcp {
	--danger: #ff6b60;
	--warn: #f0b64a;
	--ok: #35c898;
	--acc: var(--g3);
	--page-bg:
		radial-gradient(120% 78% at 100% -12%, rgba(253,184,55,.10) 0%, transparent 48%),
		radial-gradient(110% 70% at 0% -6%, rgba(224,190,0,.06) 0%, transparent 44%),
		linear-gradient(180deg, #121217 0%, #0d0d11 32%, #121217 100%);
	--band: rgba(255,255,255,.03);
	--ruled: rgba(255,255,255,.07);
	--code-bg: rgba(255,255,255,.06);
	--ghost: rgba(255,255,255,.10);
	--sunk: rgba(0,0,0,.22);
}

/* the four meanings. Set on the section, inherited by everything inside it. */
.dd-gcp-sec--money  { --acc: var(--gd); }
.dd-gcp-sec--how    { --acc: var(--ok); }
.dd-gcp-sec--risk   { --acc: var(--danger); }
.dd-gcp-sec--warn   { --acc: var(--warn); }
html[data-dracula-scheme="dark"] .dd-gcp-sec--money { --acc: var(--g3); }

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

.dd-gcp { margin: 0 !important; }
.dd-gcp * { box-sizing: border-box; }
/* collision 9: the theme centres button labels site wide; every control here is
   a row in a list or a segmented switch and must read from the start edge */
.dd-gcp button { text-align: start; }
.dd-gcp :where(p) { margin: 0 0 1.1em; }
.dd-gcp :where(p):last-child { margin-bottom: 0; }
.dd-gcp svg { width: 1em; height: 1em; flex: none; }
.dd-gcp-sprite { width: 0 !important; height: 0 !important; overflow: hidden; }


/* collision 2 + 3: the theme paints headings navy and links gold with
   !important. Let headings inherit the band they sit in, and give links a
   scoped colour that can actually win. */
.dd-gcp h1,
.dd-gcp h2,
.dd-gcp h3,
.dd-gcp h4 {
	display: block !important;
	text-align: start !important;
	padding: 0 !important;
	color: inherit !important;
	margin: 0;
	line-height: 1.5;
	border: 0;
}
/* collision 1: kill the theme's decorative gold rules on headings */
.dd-gcp h2::before, .dd-gcp h2::after,
.dd-gcp h3::before, .dd-gcp h3::after { content: none; display: none; }

.dd-gcp ul,
.dd-gcp ol,
.dd-gcp li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
/* collision 8: the theme paints its own bullet with `.post-content ul li::before`,
   which out-specifies an unqualified `.dd-gcp li::before`. !important is the only
   thing that reaches it, and without this every list on the page carries a stray
   gold dot beside its real icon. */
.dd-gcp li::marker { content: "" !important; }
.dd-gcp li::before { content: none !important; display: none !important; }
/* ...except the one place this file draws a counter with ::before itself */
.dd-gcp .dd-gcp-router__how li::before { content: counter(r) !important; display: grid !important; }

.dd-gcp a { color: inherit; }
.dd-gcp p a,
.dd-gcp li a,
.dd-gcp td a {
	color: var(--gd) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .28em;
	text-decoration-color: color-mix(in srgb, var(--gd) 40%, transparent);
	transition: text-decoration-color .18s var(--ease), color .18s var(--ease);
}
.dd-gcp p a:hover,
.dd-gcp li a:hover,
.dd-gcp td a:hover { text-decoration-color: currentColor; }
html[data-dracula-scheme="dark"] .dd-gcp p a,
html[data-dracula-scheme="dark"] .dd-gcp li a,
html[data-dracula-scheme="dark"] .dd-gcp td a { color: var(--g3) !important; }

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

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

/* the shared icon tile. One rule, so «an icon in a tinted square» is a single
   object on this page instead of nine near-copies, and --acc decides its hue. */
.dd-gcp-tile,
.dd-gcp-hero__trust-i,
.dd-gcp-uses__i,
.dd-gcp-router__qi,
.dd-gcp-lane__node,
.dd-gcp-cost__n,
.dd-gcp-track__n,
.dd-gcp-reads__i,
.dd-gcp-nots__i {
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--tile);
	border: 1px solid var(--brd);
	color: var(--acc);
}

/* =====================================================================
   THE CARD FACE — the page's protagonist, in four variants
   ===================================================================== */
.dd-gcp-face {
	--rx: 0deg;
	--ry: 0deg;
	--mx: 50%;
	--my: 40%;
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1.585 / 1;             /* ISO/IEC 7810 ID-1, a real card */
	border-radius: 20px;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;         /* every variant scales from its own width */
	color: #fff;
	/* The brand gradient, with the specular bloom as a plain white layer over
	   it. `color-mix()` was the original form and it is not usable here: the
	   dark mode plugin resolves a color-mix to a literal and repaints it, so the
	   highlight came back as a shadow. A raw rgba stop in a gradient it leaves
	   alone, and the brand channels below are integers it cannot read. */
	background:
		radial-gradient(96% 96% at 82% 8%, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 74%),
		linear-gradient(145deg,
			rgb(var(--f1) var(--f2) var(--f3)) 0%,
			rgb(var(--t1) var(--t2) var(--t3)) 100%);
	box-shadow:
		0 1px 0 rgba(255,255,255,.24) inset,
		0 30px 60px -26px rgba(12,12,28,.62),
		0 6px 18px -10px rgba(12,12,28,.4);
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.dd-gcp-face--hero { will-change: transform; }
.dd-gcp-stage.is-live .dd-gcp-face--hero { transition: transform .12s linear, box-shadow .5s var(--ease); }

/* The engraving. Three nested hypotrochoids — the curve an engine turning
   lathe actually cuts, which is why cards and banknotes carry it. In
   soft-light at low alpha it reads as texture at arm's length and as a real
   lathe pattern up close. One <use> of one symbol; the path is in the DOM once
   for the whole page no matter how many faces are on it. */
.dd-gcp-face__art {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none;
}
/* only the engraving blends; the bloom underneath it must composite normally
   or soft-light cancels it against a dark face */
.dd-gcp-face__engrave {
	color: #fff;
	opacity: .17;
	mix-blend-mode: soft-light;
}

/* Specular sheen — follows the pointer, so the card behaves like a physical
   object under a light rather than like a rectangle with a gradient on it. */
.dd-gcp-face__sheen {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(38% 46% at var(--mx) var(--my), rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 34%, transparent 66%);
	opacity: .9;
	transition: background .18s linear;
	pointer-events: none;
}

/* The holographic foil, beside the chip where a real card carries it. It is
   the one surface that turns as the pointer moves — the sheen says the card is
   lit, the foil says it is being lit from a direction. Its colours live in
   this stylesheet, not in an inline style, which is what keeps the dark mode
   plugin's colour scanner off them (trap #7). */
.dd-gcp-face__holo {
	position: absolute;
	inset-block-start: 15.4%;
	inset-inline-start: 24%;
	width: 10.5%;
	aspect-ratio: 1 / 1;
	border-radius: 3px;
	background:
		linear-gradient(128deg, rgba(255,255,255,.5) 0 18%, transparent 18% 44%, rgba(255,255,255,.32) 44% 52%, transparent 52%),
		conic-gradient(from calc(var(--ang, 40) * 1deg) at 50% 50%,
			#ff7ab4, #7ad9ff, #b6ffa0, #ffe27a, #ff7ab4);
	opacity: .72;
	mix-blend-mode: screen;
	box-shadow: 0 0 0 .5px rgba(255,255,255,.35) inset;
	transition: background .25s linear;
	pointer-events: none;
}

/* EMV contact plate: a milled gold plate with the contacts etched into it in a
   three by three grid, which is what the real thing looks like at this size.
   Drawn as stacked gradients rather than as SVG because SVG paint is the one
   thing the dark mode plugin resolves and repaints no matter how the value is
   written — see the note at the top of this file. */
.dd-gcp-face__chip {
	position: absolute;
	inset-block-start: 16%;
	inset-inline-start: 9%;
	width: 13%;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
	background:
		linear-gradient(to right,
			transparent 0 33%, rgba(88,64,12,.55) 33% 36.5%,
			transparent 36.5% 63.5%, rgba(88,64,12,.55) 63.5% 67%, transparent 67%),
		linear-gradient(to bottom,
			transparent 0 31%, rgba(88,64,12,.55) 31% 35%,
			transparent 35% 65%, rgba(88,64,12,.55) 65% 69%, transparent 69%),
		linear-gradient(140deg, #fbe7b3 0%, #cfa64a 38%, #f2d99a 64%, #a9822f 100%);
	box-shadow:
		0 1px 2px rgba(0,0,0,.45),
		0 0 0 .5px rgba(88,64,12,.45) inset;
}

.dd-gcp-face__mark {
	position: absolute;
	inset-block-start: 11%;
	inset-inline-end: 8%;
	width: clamp(30px, 18cqw, 76px);
	height: auto;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
	opacity: .97;
}

/* The denomination, embossed. This is the live bit: it repaints when the dial
   changes, so the object on screen is the object being priced below it. */
.dd-gcp-face__value {
	position: absolute;
	inset-block-end: 25%;
	inset-inline-start: 8.5%;
	display: flex;
	align-items: baseline;
	gap: .3em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 0 rgba(255,255,255,.24), 0 2px 8px rgba(0,0,0,.4);
}
.dd-gcp-face__value b {
	font-size: 11cqw;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
}
.dd-gcp-face__value i {
	font-style: normal;
	font-size: 4cqw;
	font-weight: 700;
	opacity: .8;
	letter-spacing: .1em;
}

.dd-gcp-face__foot {
	position: absolute;
	inset-block-end: 7.5%;
	inset-inline: 8.5%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}
.dd-gcp-face__brand { font-weight: 800; font-size: 5cqw; letter-spacing: .02em; }
/* the issuer block: what a retail card prints under the product type */
.dd-gcp-face__issuer {
	display: grid;
	gap: .15em;
	justify-items: start;
	text-align: left;
}
.dd-gcp-face__kind {
	font-style: normal;
	font-size: 2.7cqw;
	line-height: 1.2;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .58;
}
.dd-gcp-face__site {
	font-size: 3.9cqw;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .045em;
	color: #f3dfa8;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Microprint: a real anti-copy device, and here it does the honest job of
   filling the card's dead band with something belonging to this brand and no
   other. At 2.1cqw it is a texture line; zoom in and it is the brand name. */
.dd-gcp-face__micro {
	position: absolute;
	inset-block-start: 46%;
	inset-inline: 8.5%;
	overflow: hidden;
	white-space: nowrap;
	font-size: 2.1cqw;
	letter-spacing: .06em;
	opacity: .34;
	pointer-events: none;
}

/* the magnetic stripe's soft shadow across the lower third — a plane, not a
   coloured rail; it carries no colour of its own */
.dd-gcp-face__strip {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 34%;
	background: linear-gradient(to top, rgba(0,0,0,.28), transparent);
	pointer-events: none;
}

/* --- variant: mini. The router verdict. A chip of the same object, stamped
   with the currency the answer names, which is the one place the product
   appears as the answer to a question rather than as the thing being sold. */
.dd-gcp-face--mini {
	border-radius: 11px;
	box-shadow: 0 10px 22px -14px rgba(12,12,28,.7), 0 1px 0 rgba(255,255,255,.2) inset;
}
/* mark on one end, stamp on the other, both on the centre line. The mark
   inherits RTL so `inset-inline-end` puts it at the start of the card; the
   stamp carries dir="ltr" for its Latin currency code, so the same property
   puts it at the opposite end. That asymmetry is easy to get wrong and the two
   sat on top of each other until this was written out. */
.dd-gcp-face--mini .dd-gcp-face__mark {
	inset-block-start: 50%;
	inset-inline-start: auto;
	inset-inline-end: 11%;
	transform: translateY(-50%);
	width: 24cqw;
}
.dd-gcp-face__stamp {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 10%;
	transform: translateY(-50%);
	padding: 2px 8px;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,.45);
	background: rgba(255,255,255,.14);
	font-size: 11cqw;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1.5;
}

/* --- variant: ghost. The outline twin. Used behind the hero (there is another
   denomination), under the price board (this is what is being priced) and in
   the closing stack (there is a rack this came out of). Never for decoration. */
.dd-gcp-ghostcard {
	display: block;
	color: var(--ghost);
	pointer-events: none;
}
.dd-gcp-ghostcard svg { width: 100% !important; height: auto !important; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.dd-gcp-btn,
.dd-gcp .dd-gc-cta .dd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: 13px 24px;
	border-radius: 999px;
	font-weight: 800;
	font-size: clamp(14px, 1.5vw, 15.5px);
	line-height: 1.35;
	text-decoration: none !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.dd-gcp-btn svg,
.dd-gcp .dd-gc-cta .dd-btn svg { width: 1.15em; height: 1.15em; }

.dd-gcp .dd-gc-cta .dd-btn--gold {
	background: var(--grad);
	color: #221c00 !important;
	box-shadow: 0 12px 26px -14px rgba(224,190,0,.85);
}
.dd-gcp .dd-gc-cta .dd-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(224,190,0,.95); }

.dd-gcp-btn--ghost,
.dd-gcp .dd-gc-cta.is-soon .dd-btn {
	background: var(--card);
	color: var(--ink) !important;
	border-color: var(--brd);
	backdrop-filter: blur(6px);
}
.dd-gcp-btn--ghost:hover,
.dd-gcp .dd-gc-cta.is-soon .dd-btn:hover { transform: translateY(-2px); border-color: var(--hair); }

/* collision 9b: [dd_giftcard_cta] ships its own bordered box, which is right
   inside a Gutenberg article and wrong in a laid-out CTA row: it boxes the
   button away from the ghost button beside it. display:contents dissolves the
   wrapper so the link and its hint become items of .dd-gcp-hero__cta directly,
   and the shortcode stays the single source of the panel destination (G6). */
.dd-gcp .dd-gc-cta { display: contents; }
.dd-gcp .dd-gc-cta__hint,
.dd-gcp .dd-gc-cta__soon {
	flex-basis: 100%;
	/* the hint breaks the line, so push it past the secondary button that
	   follows it in source order — buttons together, explanation beneath */
	order: 9;
	margin: 0 !important;
	font-size: 13px;
	line-height: 1.85;
	color: var(--muted);
	max-width: 56ch;
}

/* =====================================================================
   HERO — the counter: copy on one side, the object under a light on the other
   ===================================================================== */
.dd-gcp-hero {
	position: relative;
	padding-block: clamp(30px, 5vw, 62px) clamp(48px, 7vw, 92px);
	overflow: hidden;
}
/* a wash tinted by the BRAND, which is the one place a card's own colour is
   allowed to touch the page chrome. It is a field, not a bar. */
.dd-gcp-hero__wash {
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 130%;
	background:
		radial-gradient(52% 46% at 78% 26%, rgb(var(--t1) var(--t2) var(--t3) / .3) 0%, transparent 68%),
		radial-gradient(46% 42% at 14% 6%, rgb(var(--f1) var(--f2) var(--f3) / .22) 0%, transparent 66%);
	opacity: .5;
	filter: blur(12px);
	pointer-events: none;
}
html[data-dracula-scheme="dark"] .dd-gcp-hero__wash { opacity: .42; }

.dd-gcp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.dd-gcp-hero__up { margin-bottom: 14px; }
.dd-gcp-hero__up a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--muted) !important;
	text-decoration: none !important;
	transition: color .2s var(--ease);
}
.dd-gcp-hero__up a:hover { color: var(--gd) !important; }
.dd-gcp-hero__up svg { transform: scaleX(-1); }

.dd-gcp-hero__h1 {
	font-size: clamp(29px, 5.1vw, 54px) !important;
	font-weight: 900 !important;
	line-height: 1.32 !important;
	letter-spacing: -.005em;
	margin: 0 0 16px !important;
}
.dd-gcp-hero__h1sub {
	display: block;
	margin-top: 8px;
	font-size: clamp(15px, 2vw, 21px);
	font-weight: 700;
	color: var(--muted);
	-webkit-text-fill-color: currentColor;
}
.dd-gcp-hero__lead {
	font-size: clamp(15px, 1.75vw, 17.5px);
	color: color-mix(in srgb, var(--ink) 82%, transparent);
	max-width: 60ch;
}
.dd-gcp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
	align-items: center;
}

.dd-gcp-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--brd);        /* hairline, uncoloured — not a rail */
}
.dd-gcp-hero__trust li {
	display: flex;
	align-items: center;
	gap: .5em;
	font-size: 13.5px;
	font-weight: 600;
	color: color-mix(in srgb, var(--ink) 76%, transparent);
}
.dd-gcp-hero__trust-i { width: 26px; height: 26px; border-radius: 9px; font-size: 13px; }

.dd-gcp-hero__stage { display: grid; gap: 20px; justify-items: center; }

/* the plinth: the card, its ghost twin, and a real cast shadow on the floor */
.dd-gcp-stage {
	position: relative;
	perspective: 1100px;
	width: 100%;
	max-width: 400px;
	margin-inline: auto;
	padding-bottom: 26px;
}
/* the twin sits behind and peeks out along two edges, the way the next card in
   a rack does. The opaque face covers the rest of it, so what shows is an edge
   and not a floating outline. */
.dd-gcp-stage .dd-gcp-ghostcard {
	position: absolute;
	inset-block-start: -15px;
	inset-inline-start: 20px;
	width: 100%;
	transform: rotate(-4deg);
	transition: transform .5s var(--ease);
}
.dd-gcp-stage .dd-gcp-face { position: relative; z-index: 1; }
.dd-gcp-stage__cast {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 14%;
	height: 26px;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(12,12,28,.30) 0%, transparent 72%);
	filter: blur(7px);
	pointer-events: none;
}
html[data-dracula-scheme="dark"] .dd-gcp-stage__cast { background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.6) 0%, transparent 72%); }

/* the denomination dial: one track, ascending, so the range reads as a range */
.dd-gcp-dial {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	max-width: 100%;
	padding: 5px;
	border-radius: 999px;
	background: var(--tile);
	border: 1px solid var(--brd);
}
.dd-gcp-dial__b {
	display: inline-flex;
	align-items: baseline;
	gap: .28em;
	padding: 7px 11px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--ink);
	font: inherit;
	line-height: 1.3;
	cursor: pointer;
	transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.dd-gcp-dial__b b { font-weight: 800; font-size: 14px; }
.dd-gcp-dial__b i { font-style: normal; font-size: 11.5px; font-weight: 600; opacity: .62; }
.dd-gcp-dial__b:hover { background: var(--card); transform: translateY(-1px); }
.dd-gcp-dial__b.is-on {
	background: var(--grad);
	color: #221c00;
	box-shadow: 0 8px 18px -10px rgba(224,190,0,.9);
}
.dd-gcp-dial__b.is-on i { opacity: .72; }

.dd-gcp-quote {
	display: grid;
	gap: 4px;
	justify-items: center;
	text-align: center;
	max-width: 400px;
	padding: 16px 20px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow);
}
.dd-gcp-quote__k { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.dd-gcp-quote__v { display: flex; align-items: baseline; gap: .35em; }
.dd-gcp-quote__v b {
	font-size: clamp(22px, 3.4vw, 30px);
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	transition: color .3s var(--ease);
}
.dd-gcp-quote__v b.is-fresh { color: var(--gd); }
html[data-dracula-scheme="dark"] .dd-gcp-quote__v b.is-fresh { color: var(--g3); }
.dd-gcp-quote__v span { font-size: 14px; font-weight: 700; color: var(--muted); }
.dd-gcp-quote__n {
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--muted);
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--brd);
}

/* =====================================================================
   THE IRREVERSIBLE DECISION — the only diagram on the page
   ===================================================================== */
.dd-gcp-lock {
	--acc: var(--warn);
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
	gap: clamp(20px, 3.4vw, 44px);
	align-items: center;
	margin-block: clamp(6px, 2vw, 18px) clamp(28px, 4vw, 48px);
	padding: clamp(22px, 3.4vw, 38px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
	backdrop-filter: blur(8px);
}
/* the copy leads, the drawing follows — an RTL reader starts on the right */
.dd-gcp-lock__body { order: 1; }
.dd-gcp-lock__viz {
	order: 2;
	position: relative;
	padding-bottom: 24px;
}
/* mirrored, so the gate runs right to left with the language: the wallet
   without a currency is where the reader starts and the locked one is where
   they end up */
.dd-gcp-lock__gate {
	width: 100% !important;
	height: auto !important;
	transform: scaleX(-1);
	color: color-mix(in srgb, var(--ink) 52%, transparent);
}
/* the two captions belong to the two halves of the drawing, so they sit under
   them rather than inside a legend somewhere else */
.dd-gcp-lock__cap {
	position: absolute;
	inset-block-end: 0;
	width: 40%;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: var(--muted);
}
.dd-gcp-lock__cap--a { inset-inline-start: 0; }
.dd-gcp-lock__cap--b { inset-inline-end: 0; color: var(--warn); }

.dd-gcp-lock__title {
	font-size: clamp(18px, 2.4vw, 25px) !important;
	font-weight: 800 !important;
	margin-bottom: 12px !important;
}
.dd-gcp-lock__body p { font-size: 15px; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.dd-gcp-lock__link {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-top: 6px;
	font-weight: 800;
	font-size: 14px;
	color: var(--gd) !important;
	text-decoration: none !important;
}
html[data-dracula-scheme="dark"] .dd-gcp-lock__link { color: var(--g3) !important; }
.dd-gcp-lock__link svg { transition: transform .2s var(--ease); }
.dd-gcp-lock__link:hover svg { transform: translateX(-4px); }

/* =====================================================================
   SECTION SCAFFOLD — three bands, and the third belongs to the brand
   ===================================================================== */
.dd-gcp-sec { padding-block: clamp(42px, 6vw, 88px); position: relative; }
.dd-gcp-sec--alt { background: var(--band); border-block: 1px solid var(--brd); }
/* --deep is the payment band, and the only section other than the hero that
   carries the brand's own colour. It is a field at 5% alpha, not a slab: the
   page's own background still shows through it in both schemes. */
.dd-gcp-sec--deep {
	background:
		radial-gradient(80% 60% at 82% 0%, rgb(var(--t1) var(--t2) var(--t3) / .10) 0%, transparent 62%),
		radial-gradient(70% 55% at 10% 100%, rgb(var(--f1) var(--f2) var(--f3) / .08) 0%, transparent 60%),
		var(--band);
	border-block: 1px solid var(--brd);
}
html[data-dracula-scheme="dark"] .dd-gcp-sec--deep {
	background:
		radial-gradient(80% 60% at 82% 0%, rgb(var(--t1) var(--t2) var(--t3) / .19) 0%, transparent 62%),
		radial-gradient(70% 55% at 10% 100%, rgb(var(--f1) var(--f2) var(--f3) / .15) 0%, transparent 60%),
		var(--band);
}

.dd-gcp-sec__head { max-width: 74ch; margin-bottom: clamp(22px, 3vw, 38px); }
.dd-gcp-sec__title {
	font-size: clamp(21px, 3vw, 33px) !important;
	font-weight: 900 !important;
	line-height: 1.45 !important;
	margin-bottom: 12px !important;
}
.dd-gcp-sec__lead {
	font-size: clamp(14.5px, 1.6vw, 16.5px);
	color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.dd-gcp-sec__note {
	margin-top: 18px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--muted);
	max-width: 78ch;
}

.dd-gcp-note {
	margin-top: 16px;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--tile);
	border: 1px solid var(--brd);
	font-size: 14px;
	line-height: 1.85;
	color: color-mix(in srgb, var(--ink) 82%, transparent);
}

/* =====================================================================
   WHAT IT IS / WHAT IT BUYS — a mosaic and a struck ledger
   ===================================================================== */
.dd-gcp-what { display: grid; gap: clamp(20px, 3vw, 30px); }
.dd-gcp-what__prose { max-width: 76ch; font-size: 15.5px; }
.dd-gcp-what__prose p { color: color-mix(in srgb, var(--ink) 86%, transparent); }

/* the prose is capped at 76ch, so on a wide screen the far half of this row is
   dead space already. The diagram takes it. `.has-fig` is the only thing that
   opens the second column, so a card with no figure keeps the single column it
   has today and nothing about the other 22 pages moves. */
.dd-gcp-what__top { display: grid; gap: clamp(20px, 3vw, 34px); align-items: center; }
@media (min-width: 900px) {
	.dd-gcp-what__top.has-fig { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
	.dd-gcp-what__top.has-fig .dd-gcp-what__prose { max-width: none; }
}

/* =====================================================================
   FIGURE — the owner's diagrams, set on a plate
   ---------------------------------------------------------------------
   The drawings are line art on paper white. Dropped straight onto the page
   they read as a hole; on the page's own tile, behind a hairline, they read
   as an object that belongs here. No coloured rail, no tinted frame.

   Every rule below is prefixed with `.dd-gcp` on purpose: 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 paints
   the caption navy and centres it. The extra class beats all three on
   specificity, so none of this needs !important.
   ===================================================================== */
.dd-gcp .dd-gcp-fig {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	justify-items: start;
}
.dd-gcp .dd-gcp-fig__plate {
	display: block;
	width: 100%;
	padding: clamp(10px, 1.5vw, 16px);
	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-gcp .dd-gcp-fig:hover .dd-gcp-fig__plate {
	border-color: var(--hair);
	transform: translateY(-2px);
}
.dd-gcp .dd-gcp-fig img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--radius-lg) - 12px);
	box-shadow: none;
}
.dd-gcp .dd-gcp-fig figcaption {
	margin: 0;
	padding: 0 4px;
	max-width: 56ch;
	font-size: 13px;
	line-height: 1.95;
	text-align: start;
	opacity: 1;
	color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
	.dd-gcp .dd-gcp-fig__plate { transition: none; }
	.dd-gcp .dd-gcp-fig:hover .dd-gcp-fig__plate { transform: none; }
}

/* auto-fit lands on whatever number of uses the card actually has; the first
   one — the reason people came — takes two columns and the object behind it */
.dd-gcp-uses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 12px;
}
.dd-gcp-uses li {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 2px;
	padding: 16px 18px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.dd-gcp-uses li:hover { border-color: var(--hair); transform: translateY(-2px); }
.dd-gcp-uses li.is-lead {
	grid-column: span 2;
	align-content: center;
	padding: clamp(20px, 2.6vw, 28px);
	background: var(--tile);
}
/* the object, half out of frame at the far corner — a watermark behind the
   sentence that says what the thing actually buys */
.dd-gcp-uses li.is-lead .dd-gcp-ghostcard {
	position: absolute;
	inset-block-end: -34%;
	inset-inline-end: -5%;
	width: 40%;
	transform: rotate(-10deg);
	opacity: .75;
}
.dd-gcp-uses li.is-lead > * { position: relative; }
.dd-gcp-uses li.is-lead b { font-size: 17px; }
.dd-gcp-uses__i { grid-row: 1 / 3; width: 38px; height: 38px; font-size: 18px; }
.dd-gcp-uses li b { font-size: 15px; font-weight: 800; line-height: 1.6; }
.dd-gcp-uses li > span:last-child { font-size: 13.5px; line-height: 1.8; color: var(--muted); }

/* the ledger: ruled rows on a recessed plate, which is what «ruled out» looks
   like on paper. Not a fourth grid of identical cards. */
.dd-gcp-cannot {
	padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 26px);
	border-radius: var(--radius);
	background: var(--sunk);
	border: 1px solid var(--brd);
}
.dd-gcp-cannot h3 { font-size: 15px !important; font-weight: 800 !important; margin-bottom: 4px !important; color: var(--muted) !important; }
.dd-gcp-cannot ul { display: grid; }
.dd-gcp-cannot li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: .7em;
	padding-block: 11px;
	border-top: 1px solid var(--ruled);
	font-size: 14.5px;
	line-height: 1.85;
	color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.dd-gcp-cannot li:last-child { padding-bottom: 0; }
.dd-gcp-cannot__i { color: var(--danger); font-size: 15px; position: relative; top: .18em; }

/* =====================================================================
   THE ROUTER — a switchboard. The live question sits on the pane's own
   surface, so mid-answer the two read as one object.
   ===================================================================== */
.dd-gcp-router {
	display: grid;
	grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
	gap: clamp(14px, 2.4vw, 24px);
	align-items: start;
}
.dd-gcp-router__ask { display: flex; flex-direction: column; gap: 8px; }
.dd-gcp-router__q {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--card);
	border: 1px solid var(--brd);
	color: var(--ink);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.dd-gcp-router__q:hover { border-color: var(--hair); transform: translateX(-3px); }
.dd-gcp-router__q.is-on {
	background: var(--card);
	border-color: color-mix(in srgb, var(--g) 46%, transparent);
	box-shadow: 0 14px 30px -20px rgba(25,22,50,.5);
	transform: translateX(-3px);
}
.dd-gcp-router__qi { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; transition: background .2s var(--ease), color .2s var(--ease); }
.dd-gcp-router__q.is-on .dd-gcp-router__qi { background: var(--grad); border-color: transparent; color: #221c00; }
/* the theme centres text inside buttons; these rows are read as a list */
.dd-gcp-router__qt { font-size: 14.5px; font-weight: 700; line-height: 1.7; text-align: start; }
.dd-gcp-router__q.is-on .dd-gcp-router__qt { font-weight: 800; }
.dd-gcp-router__qc { color: var(--muted); font-size: 15px; opacity: .55; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.dd-gcp-router__q.is-on .dd-gcp-router__qc { opacity: 1; transform: translateX(-3px); }

.dd-gcp-router__pane {
	padding: clamp(20px, 3vw, 32px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
	backdrop-filter: blur(8px);
}
/* JS off: every answer is in the DOM and visible, separated by a hairline.
   The page is complete without a single byte of script. */
.dd-gcp-router__a + .dd-gcp-router__a {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--brd);
}
.dd-gcp-router.is-live .dd-gcp-router__a { display: none; margin: 0; padding: 0; border: 0; }
.dd-gcp-router.is-live .dd-gcp-router__a.is-on { display: block; animation: dd-gcp-in .32s var(--ease) both; }
@keyframes dd-gcp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the verdict line: the stamped chip and the answer, then the reasoning
   beneath a hairline — statement first, argument second */
.dd-gcp-router__verdict {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--brd);
}
.dd-gcp-router__verdict:has(.dd-gcp-router__chip) { grid-template-columns: 108px minmax(0, 1fr); }
.dd-gcp-router__chip { width: 108px; }
.dd-gcp-router__ah {
	display: flex !important;
	align-items: flex-start;
	gap: .6em;
	font-size: clamp(16px, 2vw, 20px) !important;
	font-weight: 800 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}
.dd-gcp-router__badge {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	margin-top: .12em;
	border-radius: 9px;
	font-size: 15px;
	border: 1px solid transparent;
}
.dd-gcp-router__badge.is-ok   { background: color-mix(in srgb, var(--ok) 14%, transparent);     color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.dd-gcp-router__badge.is-warn { background: color-mix(in srgb, var(--warn) 15%, transparent);   color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.dd-gcp-router__badge.is-bad  { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

.dd-gcp-router__pane p { font-size: 15px; color: color-mix(in srgb, var(--ink) 85%, transparent); }
.dd-gcp-router__how {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--brd);
}
.dd-gcp-router__how h4 { font-size: 14.5px !important; font-weight: 800 !important; margin-bottom: 10px !important; }
.dd-gcp-router__how ol { display: grid; gap: 8px; counter-reset: r; }
.dd-gcp-router__how li {
	counter-increment: r;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	font-size: 14px;
	line-height: 1.85;
	color: color-mix(in srgb, var(--ink) 84%, transparent);
}
.dd-gcp-router__how li::before {
	content: counter(r);
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: .3em;
	border-radius: 7px;
	background: var(--tile);
	border: 1px solid var(--brd);
	font-size: 11.5px;
	font-weight: 800;
	color: var(--muted);
}
.dd-gcp-router__after { margin-top: 20px; font-size: 14px; color: var(--muted); max-width: 80ch; }

/* =====================================================================
   REGIONS — medallions. A region is a stamp on a code, not a product feature.
   ===================================================================== */
.dd-gcp-regions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 12px;
}
.dd-gcp-region {
	position: relative;
	overflow: hidden;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.dd-gcp-region:hover { border-color: var(--hair); transform: translateY(-2px); }
.dd-gcp-region__h {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	margin-bottom: 12px;
}
/* the medallion: a struck disc with a milled edge, which is what a currency
   mark looks like on the object it belongs to */
.dd-gcp-region__flag {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, var(--brd) 0deg 2deg, transparent 2deg 5deg);
	box-shadow: 0 0 0 1px var(--brd) inset;
}
.dd-gcp-region__flag i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tile);
	box-shadow: 0 0 0 1px var(--brd) inset;
	font-style: normal;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--acc);
}
.dd-gcp-region h3 { font-size: 15.5px !important; font-weight: 800 !important; line-height: 1.5 !important; }
.dd-gcp-region__who { font-size: 12.5px; color: var(--muted); margin: 2px 0 0 !important; }
.dd-gcp-region p { font-size: 14px; line-height: 1.85; color: color-mix(in srgb, var(--ink) 82%, transparent); }

/* a withdrawn region keeps its medallion and gets hatched through. The hatch
   IS the information — «this exists in every competitor's list and does not
   exist any more» — which is what earns it the one texture in the section. */
.dd-gcp-region.is-dead { background: var(--sunk); }
.dd-gcp-region.is-dead::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(-45deg,
		color-mix(in srgb, var(--muted) 16%, transparent) 0 1px,
		transparent 1px 9px);
	pointer-events: none;
}
.dd-gcp-region.is-dead > * { position: relative; z-index: 1; }
.dd-gcp-region.is-dead .dd-gcp-region__flag i { color: var(--muted); text-decoration: line-through; }
.dd-gcp-region.is-dead h3,
.dd-gcp-region.is-dead p { color: var(--muted) !important; }

/* --- the price board: the one place the object and its price are stated
   together, so the object is under the figures as a watermark */
.dd-gcp-pricewrap {
	position: relative;
	overflow: hidden;
	margin-top: clamp(22px, 3vw, 34px);
	padding: clamp(16px, 2.4vw, 28px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
	backdrop-filter: blur(8px);
}
/* opposite the caption, so the watermark sits over empty board and never
   behind a figure the reader is trying to read */
.dd-gcp-pricewrap > .dd-gcp-ghostcard {
	position: absolute;
	inset-block-start: -12%;
	inset-inline-end: -5%;
	width: 32%;
	transform: rotate(-9deg);
	opacity: .55;
}
.dd-gcp-pricewrap > .dd-gc-price { position: relative; }
.dd-gcp .dd-gc-price { padding: 0; border: 0; background: none; box-shadow: none; max-width: none; }
/* the theme draws a full grid on tables; this one is a price list and reads as
   rows, so every vertical rule goes and the horizontals drop to a hairline */
.dd-gcp .dd-gc-price__table { width: 100%; border-collapse: collapse; border: 0 !important; }
.dd-gcp .dd-gc-price__table tbody th { width: 42%; }
.dd-gcp .dd-gc-price__cap {
	caption-side: top;
	text-align: start;
	font-size: 16px;
	font-weight: 800;
	padding-bottom: 14px;
	color: var(--ink);
}
.dd-gcp .dd-gc-price__note { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 5px; }
.dd-gcp .dd-gc-price__table th,
.dd-gcp .dd-gc-price__table td {
	padding: 12px 14px;
	text-align: start;
	font-size: 14.5px;
	border: 0 !important;
	border-bottom: 1px solid var(--ruled) !important;
	background: transparent;
}
.dd-gcp .dd-gc-price__table thead th {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--muted);
	border-bottom-color: var(--brd);
}
.dd-gcp .dd-gc-price__table tbody th { font-weight: 800; }
.dd-gcp .dd-gc-price__table tbody td { font-variant-numeric: tabular-nums; font-weight: 700; }
.dd-gcp .dd-gc-price__table tbody tr:last-child th,
.dd-gcp .dd-gc-price__table tbody tr:last-child td { border-bottom: 0; }
.dd-gcp .dd-gc-price__table tbody tr:hover th,
.dd-gcp .dd-gc-price__table tbody tr:hover td { background: var(--tile); }
.dd-gcp .dd-gc-price__na { font-weight: 600; color: var(--muted); font-size: 13.5px; }
.dd-gcp .dd-gc-price__basis { margin-top: 14px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.dd-gcp .dd-gc-price__table td.is-fresh { animation: dd-gcp-fresh 1.1s var(--ease); }
@keyframes dd-gcp-fresh { 0% { color: var(--gd); } 100% { color: inherit; } }

/* =====================================================================
   PAYMENT LANES — the wedge. Each lane drawn as what it is: an origin, one
   hop through the panel, and a code at the end.
   ===================================================================== */
.dd-gcp-lanes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 12px;
}
.dd-gcp-lane {
	padding: 22px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.dd-gcp-lane:hover { border-color: var(--hair); transform: translateY(-3px); }
.dd-gcp-lane__rail {
	display: grid;
	grid-template-columns: auto 1fr auto 1fr auto;
	align-items: center;
	margin-bottom: 16px;
}
.dd-gcp-lane__node { width: 38px; height: 38px; font-size: 17px; color: var(--muted); }
.dd-gcp-lane__node.is-src { color: var(--acc); }
.dd-gcp-lane__node.is-dst { background: var(--grad); border-color: transparent; color: #221c00; }
/* a hairline connector between two marks — the approved form, and it carries
   no colour of its own */
.dd-gcp-lane__wire { height: 1px; background: var(--brd); }
.dd-gcp-lane h3 { font-size: 16.5px !important; font-weight: 800 !important; margin-bottom: 8px !important; }
.dd-gcp-lane p { font-size: 14.5px; line-height: 1.9; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.dd-gcp-lane__for {
	margin-top: 12px !important;
	padding-top: 12px;
	border-top: 1px solid var(--brd);
	font-size: 13px !important;
	font-weight: 700;
	color: var(--muted) !important;
}

/* =====================================================================
   COST DECOMPOSITION — an assembly, read top down. Each layer sits one step
   further in than the one above it, and the sum closes the stack. No width is
   proportional: we do not publish the split, and a proportional bar would be a
   number we have not got (CONVENTIONS P5).
   ===================================================================== */
.dd-gcp-assembly { max-width: 94ch; }
.dd-gcp-costs { display: grid; gap: 8px; }
/* `.dd-gcp li { margin: 0 }` above out-specifies a bare class, so the step
   inwards has to be written at two classes deep to survive it */
.dd-gcp li.dd-gcp-cost {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	padding: 18px 20px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	margin-inline-start: calc(var(--i) * clamp(6px, 1.7vw, 24px));
	transition: border-color .2s var(--ease);
}
.dd-gcp-cost:hover { border-color: var(--hair); }
.dd-gcp-cost__n { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; font-weight: 900; }
.dd-gcp-cost h3 { font-size: 15.5px !important; font-weight: 800 !important; margin-bottom: 5px !important; }
.dd-gcp-cost p { font-size: 14.5px; line-height: 1.9; color: color-mix(in srgb, var(--ink) 83%, transparent); }
.dd-gcp-assembly__sum {
	display: flex;
	align-items: center;
	gap: .7em;
	margin: 10px 0 0 !important;
	padding: 16px 20px;
	border-radius: var(--radius);
	background: var(--tile);
	border: 1px solid var(--brd);
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.8;
}
.dd-gcp-assembly__sum svg { width: 22px; height: 22px; color: var(--acc); }

/* =====================================================================
   BUYING STEPS — the numeral does the work a badge was doing
   ===================================================================== */
.dd-gcp-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 12px;
}
.dd-gcp-step {
	position: relative;
	overflow: hidden;
	padding: 24px 22px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.dd-gcp-step:hover { border-color: var(--hair); transform: translateY(-3px); }
.dd-gcp-step__n {
	position: absolute;
	inset-block-start: -18px;
	inset-inline-start: 8px;
	font-size: 92px;
	font-weight: 900;
	line-height: 1;
	color: color-mix(in srgb, var(--acc) 22%, transparent);
	pointer-events: none;
	user-select: none;
}
.dd-gcp-step h3 { position: relative; font-size: 15.5px !important; font-weight: 800 !important; margin-bottom: 7px !important; }
.dd-gcp-step p { position: relative; font-size: 14px; line-height: 1.9; color: color-mix(in srgb, var(--ink) 82%, transparent); }

/* =====================================================================
   REDEEM — the steps shown inside the device they happen on
   ===================================================================== */
.dd-gcp-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 5px;
	margin-bottom: 22px;
	border-radius: 999px;
	background: var(--tile);
	border: 1px solid var(--brd);
}
.dd-gcp-seg__b {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 9px 17px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.dd-gcp-seg__b:hover { color: var(--ink); }
.dd-gcp-seg__b.is-on {
	background: var(--card);
	color: var(--ink);
	box-shadow: 0 4px 12px -6px rgba(25,22,50,.3);
}
html[data-dracula-scheme="dark"] .dd-gcp-seg__b.is-on { background: rgba(255,255,255,.1); }

/* JS off: every device panel is present and readable, one after another */
.dd-gcp-redeem__p + .dd-gcp-redeem__p { margin-top: 30px; }
.dd-gcp-redeem.is-live .dd-gcp-redeem__p { display: none; margin: 0; }
.dd-gcp-redeem.is-live .dd-gcp-redeem__p.is-on { display: block; animation: dd-gcp-in .32s var(--ease) both; }
.dd-gcp-redeem__h { font-size: 16px !important; font-weight: 800 !important; margin-bottom: 16px !important; }

.dd-gcp-redeem__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
	gap: clamp(18px, 3vw, 44px);
	align-items: start;
}
/* the device, drawn. A reader landing mid-page knows in one glance whether
   these steps are the desktop client or the phone. */
.dd-gcp-frame {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: clamp(18px, 2.4vw, 26px);
	border-radius: var(--radius-lg);
	background: var(--sunk);
	border: 1px solid var(--brd);
	position: sticky;
	inset-block-start: 96px;
}
.dd-gcp-frame__dev {
	width: 100% !important;
	height: auto !important;
	max-width: 180px;
	color: color-mix(in srgb, var(--ink) 34%, transparent);
}
.dd-gcp-frame__cap { font-size: 12.5px; font-weight: 700; color: var(--muted); }

.dd-gcp-track { display: grid; gap: 0; max-width: 82ch; }
.dd-gcp-track li {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	padding-bottom: 20px;
}
.dd-gcp-track li:last-child { padding-bottom: 0; }
/* the spine: a 1px hairline connecting the step numbers. Uncoloured, and it is
   a connector between two marks rather than a rail down the side of a card. */
.dd-gcp-track li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block: 34px 0;
	inset-inline-start: 16px;
	width: 1px;
	background: var(--brd);
}
.dd-gcp-track__n {
	width: 33px;
	height: 33px;
	border-radius: 11px;
	background: var(--card);
	font-size: 13.5px;
	font-weight: 900;
	position: relative;
	z-index: 1;
}
.dd-gcp-track__t {
	font-size: 14.5px;
	line-height: 1.95;
	padding-top: 3px;
	color: color-mix(in srgb, var(--ink) 85%, transparent);
}
.dd-gcp-track__t code,
.dd-gcp-err__code {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 7px;
	background: var(--code-bg);
	border: 1px solid var(--brd);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	font-weight: 600;
	direction: ltr;
	unicode-bidi: isolate;
}

/* =====================================================================
   ERRORS — shown in the window chrome the reader actually met them in. The
   point of this section is recognition: someone scrolls with the dialog still
   open on the other monitor and needs to match a string.
   ===================================================================== */
.dd-gcp-errs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 14px;
}
.dd-gcp-err {
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	overflow: hidden;
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.dd-gcp-err:hover { border-color: var(--hair); transform: translateY(-2px); }
.dd-gcp-err__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: var(--tile);
	border-bottom: 1px solid var(--brd);
}
.dd-gcp-err__bar span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--brd);
	box-shadow: 0 0 0 1px var(--ruled);
}
.dd-gcp-err__screen {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	background: var(--sunk);
	border-bottom: 1px solid var(--brd);
}
.dd-gcp-err__glyph {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 10px;
	background: color-mix(in srgb, var(--danger) 12%, transparent);
	color: var(--danger);
	font-size: 17px;
}
.dd-gcp-err__code {
	font-size: 13px;
	padding: 5px 12px;
	color: var(--danger);
	border-color: color-mix(in srgb, var(--danger) 26%, transparent);
	background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.dd-gcp-err__body { padding: 18px 20px; }
.dd-gcp-err__body p { font-size: 14px; line-height: 1.9; color: color-mix(in srgb, var(--ink) 83%, transparent); margin-bottom: .55em; }
.dd-gcp-err__body p:last-child { margin-bottom: 0; }
.dd-gcp-err__body b { font-weight: 800; color: var(--ink); }

/* =====================================================================
   RISKS — hazard hatched corners, and deliberately unequal: the first risk is
   the expensive one and gets the room to say so.
   ===================================================================== */
.dd-gcp-risks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
	gap: 12px;
}
.dd-gcp-risk {
	position: relative;
	overflow: hidden;
	padding: 22px 20px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
}
.dd-gcp-risk::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 92px;
	height: 92px;
	background: repeating-linear-gradient(-45deg,
		color-mix(in srgb, var(--danger) 13%, transparent) 0 1px,
		transparent 1px 8px);
	-webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 72%);
	pointer-events: none;
}
.dd-gcp-risk > * { position: relative; }
.dd-gcp-risk__i {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 13px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--danger) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
	color: var(--danger);
	font-size: 18px;
}
.dd-gcp-risk h3 { font-size: 15.5px !important; font-weight: 800 !important; margin-bottom: 7px !important; }
.dd-gcp-risk p { font-size: 14px; line-height: 1.9; color: color-mix(in srgb, var(--ink) 83%, transparent); }

/* =====================================================================
   THE TWO HONEST PANELS — an answer panel beside a list, not two matching
   panels. They say different kinds of thing and they look it.
   ===================================================================== */
.dd-gcp-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: 14px;
	align-items: start;
}
.dd-gcp-panel {
	padding: clamp(20px, 2.6vw, 30px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
}
.dd-gcp-panel h3 { font-size: 17px !important; font-weight: 800 !important; margin-bottom: 12px !important; }
.dd-gcp-panel p { font-size: 14.5px; line-height: 1.9; color: color-mix(in srgb, var(--ink) 84%, transparent); }
/* the answer panel's ticks ARE the answer, so they sit on their own surface
   inside the panel rather than reading as three more bullet points */
.dd-gcp-panel--answer .dd-gcp-ticks {
	display: grid;
	gap: 10px;
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--ok) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--ok) 18%, transparent);
}
.dd-gcp-ticks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.85; }
.dd-gcp-ticks__i {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: .3em;
	border-radius: 7px;
	background: color-mix(in srgb, var(--ok) 16%, transparent);
	color: var(--ok);
	font-size: 12px;
}

.dd-gcp-panel--list { background: var(--tile); box-shadow: none; }
.dd-gcp-nots { display: grid; }
.dd-gcp-nots li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	padding-block: 14px;
	border-top: 1px solid var(--ruled);
}
.dd-gcp-nots li:first-child { padding-top: 0; border-top: 0; }
.dd-gcp-nots li:last-child { padding-bottom: 0; }
.dd-gcp-nots__i { width: 26px; height: 26px; margin-top: .25em; border-radius: 9px; color: var(--muted); font-size: 13px; }
.dd-gcp-nots li b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.7; }
.dd-gcp-nots li span { font-size: 13.5px; line-height: 1.85; color: var(--muted); }

/* =====================================================================
   FAQ — native <details>, so it works before a byte of JS runs
   ===================================================================== */
.dd-gcp-faq { display: grid; gap: 8px; max-width: 92ch; }
.dd-gcp-faq__i {
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	overflow: hidden;
	transition: border-color .2s var(--ease);
}
.dd-gcp-faq__i[open] { border-color: var(--hair); }
.dd-gcp-faq__i > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.dd-gcp-faq__i > summary::-webkit-details-marker { display: none; }
/* an <h3>, kept at body weight so the accordion still reads as a control */
.dd-gcp-faq__q { font-size: 15px !important; font-weight: 800 !important; line-height: 1.75 !important; margin: 0 !important; }
.dd-gcp-faq__m {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--tile);
	border: 1px solid var(--brd);
	transition: background .2s var(--ease), transform .25s var(--ease);
}
.dd-gcp-faq__m::before,
.dd-gcp-faq__m::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 11px;
	height: 1.6px;
	border-radius: 2px;
	background: var(--muted);
	transform: translate(50%, -50%);
	transition: opacity .2s var(--ease), background .2s var(--ease);
}
.dd-gcp-faq__m::after { transform: translate(50%, -50%) rotate(90deg); }
.dd-gcp-faq__i[open] .dd-gcp-faq__m { background: var(--grad); border-color: transparent; transform: rotate(180deg); }
.dd-gcp-faq__i[open] .dd-gcp-faq__m::before,
.dd-gcp-faq__i[open] .dd-gcp-faq__m::after { background: #221c00; }
.dd-gcp-faq__i[open] .dd-gcp-faq__m::after { opacity: 0; }
.dd-gcp-faq__a {
	margin: 0 20px 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ruled);
	font-size: 14.5px;
	line-height: 1.95;
	color: color-mix(in srgb, var(--ink) 84%, transparent);
}

/* =====================================================================
   SIBLINGS + FURTHER READING
   ===================================================================== */
.dd-gcp-sibs { margin-bottom: clamp(18px, 2.4vw, 26px); }
.dd-gcp .dd-gc-siblings { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; }
.dd-gcp .dd-gc-siblings__t { width: 100%; font-size: 14px; font-weight: 800; margin-bottom: 4px; color: var(--muted); }
.dd-gcp .dd-gc-siblings a {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--card);
	border: 1px solid var(--brd);
	color: var(--ink) !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.dd-gcp .dd-gc-siblings a:hover { border-color: var(--hair); transform: translateY(-2px); }

.dd-gcp-reads {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px;
}
.dd-gcp-reads a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 13px;
	row-gap: 2px;
	padding: 16px 18px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--brd);
	text-decoration: none !important;
	color: var(--ink) !important;
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.dd-gcp-reads a:hover { border-color: var(--hair); transform: translateY(-2px); }
.dd-gcp-reads__i { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
.dd-gcp-reads b { font-size: 14.5px; font-weight: 800; line-height: 1.65; }
.dd-gcp-reads a > span:last-child { font-size: 13px; line-height: 1.75; color: var(--muted); }

/* =====================================================================
   CLOSE — the page opened on one card under a light and closes on the rack it
   came out of, which is also the argument for the button beside it.
   ===================================================================== */
.dd-gcp-sec--end { padding-bottom: clamp(52px, 7vw, 100px); }
.dd-gcp-end {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	padding: clamp(26px, 4vw, 44px);
	border-radius: var(--radius-lg);
	background: var(--card);
	border: 1px solid var(--brd);
	box-shadow: var(--shadow);
	backdrop-filter: blur(8px);
}
.dd-gcp-end h2 { font-size: clamp(20px, 2.6vw, 28px) !important; font-weight: 900 !important; margin-bottom: 12px !important; }
.dd-gcp-end p { font-size: 15px; line-height: 1.9; color: color-mix(in srgb, var(--ink) 84%, transparent); max-width: 62ch; }
.dd-gcp-end__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }

.dd-gcp-end__stack {
	position: relative;
	justify-self: center;
	width: min(100%, 268px);
	aspect-ratio: 1.585 / 1;
}
.dd-gcp-end__stack > * { position: absolute; inset-inline: 0; inset-block-start: 0; }
.dd-gcp-end__stack .dd-gcp-ghostcard:first-child { transform: translate(0, -22px) rotate(-9deg); opacity: .55; }
.dd-gcp-end__stack .dd-gcp-ghostcard:nth-child(2) { transform: translate(0, -11px) rotate(-4.5deg); opacity: .8; }
.dd-gcp-end__stack .dd-gcp-face { transform: rotate(1.5deg); }

/* =====================================================================
   SCROLL REVEAL — added by JS only when motion is allowed
   ===================================================================== */
.dd-gcp--motion .dd-gcp-reveal { opacity: 0; transform: translateY(16px); }
.dd-gcp--motion .dd-gcp-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1000px) {
	.dd-gcp-hero__grid { grid-template-columns: 1fr; }
	.dd-gcp-hero__stage { order: -1; }
	.dd-gcp-router { grid-template-columns: 1fr; }
	.dd-gcp-lock { grid-template-columns: 1fr; gap: 22px; }
	.dd-gcp-lock__viz { max-width: 400px; margin-inline: auto; }
	.dd-gcp-redeem__body { grid-template-columns: 1fr; }
	.dd-gcp-frame { position: static; order: -1; justify-self: start; }
	.dd-gcp-frame__dev { max-width: 128px; }
	.dd-gcp-end { grid-template-columns: 1fr; }
	.dd-gcp-end__stack { order: -1; }
	.dd-gcp li.dd-gcp-cost { margin-inline-start: 0; }
}

@media (max-width: 700px) {
	.dd-gcp { line-height: 1.9; }
	.dd-gcp-stage { max-width: 330px; }
	.dd-gcp-hero__trust { gap: 10px 16px; }
	.dd-gcp-seg { display: flex; width: 100%; }
	.dd-gcp-seg__b { flex: 1 1 auto; justify-content: center; padding-inline: 10px; }
	.dd-gcp-uses li { grid-template-columns: 1fr; }
	.dd-gcp-uses li.is-lead { grid-column: auto; }
	.dd-gcp-uses li.is-lead .dd-gcp-ghostcard { width: 60%; inset-inline-start: -14%; }
	.dd-gcp-uses__i { grid-row: auto; margin-bottom: 4px; }
	.dd-gcp-reads a { grid-template-columns: 1fr; }
	.dd-gcp-reads__i { grid-row: auto; margin-bottom: 4px; }
	.dd-gcp-step__n { font-size: 74px; }
	.dd-gcp .dd-gc-price__table th,
	.dd-gcp .dd-gc-price__table td { padding: 10px 8px; font-size: 13.5px; }
}

@media (max-width: 430px) {
	.dd-gcp-dial { flex-wrap: wrap; border-radius: 20px; }
	.dd-gcp-dial__b { padding: 6px 11px; }
	.dd-gcp-dial__b b { font-size: 13px; }
	.dd-gcp-router__verdict:has(.dd-gcp-router__chip) { grid-template-columns: 1fr; }
	.dd-gcp-router__chip { width: 96px; }
	.dd-gcp-faq__i > summary { padding: 14px 16px; gap: 12px; }
	.dd-gcp-faq__a { margin-inline: 16px; margin-bottom: 16px; }
	.dd-gcp-region__flag { width: 46px; height: 46px; }
	.dd-gcp-region__flag i { width: 38px; height: 38px; font-size: 11.5px; }
}

/* =====================================================================
   MOTION SAFETY — every animation above is opt-in via .dd-gcp--motion, which
   JS only adds when the user has not asked for reduced motion. This block
   covers the preference changing after load.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.dd-gcp *,
	.dd-gcp *::before,
	.dd-gcp *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.dd-gcp-face { transform: none !important; }
	.dd-gcp--motion .dd-gcp-reveal { opacity: 1; transform: none; }
}