/* ===========================================================================
 * DigiDollar Content Design - the article body as a designed reading surface
 * ---------------------------------------------------------------------------
 * Vocabulary, straight out of DESIGN-BANS.md: 1px hairlines carry every
 * boundary, emphasis comes from an icon tile, a background tint, type weight
 * and whitespace. There is not a single coloured rail, accent bar or eyebrow
 * pill in this file - and it removes the two that were shipping site-wide, the
 * gold gradient bars flanking every h2.wp-block-heading.
 *
 * SPECIFICITY. Additional CSS (custom_css post 17981) prints at wp_head 101,
 * after every enqueued sheet, and leans on !important. Anything it also sets -
 * heading colour, weight, size, alignment, list padding, table display - has to
 * be won on specificity here, not on source order. That is why body rules carry
 * two or three classes and !important where the global rule has one too.
 *
 * DARK MODE. The site's dark scheme is html[data-dracula-scheme="dark"], never
 * prefers-color-scheme. Per trap #9 the Dracula plugin re-emits every rule with
 * its colours mapped to dark, including rules that were already dark, so each
 * dark token is declared !important AND its --dracula-*-- twin is pinned to the
 * same literal. A twin declared as var(--token) makes a cycle and drops out; it
 * has to repeat the value.
 * ======================================================================== */

/* ---------- tokens ------------------------------------------------------ */

html {
	--ddx-ink: #1b1a22;
	--ddx-mut: #63636f;
	--ddx-line: rgba(24, 22, 40, .11);
	--ddx-line-2: rgba(24, 22, 40, .2);
	--ddx-tile: #fbf7ec;
	--ddx-card: #fffdf8;
	--ddx-gold: #a9821a;
	--ddx-gold-ink: #7d5f0c;
	--ddx-gold-soft: rgba(224, 190, 0, .12);
	--ddx-ghost: rgba(24, 22, 40, .12);
	--ddx-ul: rgba(169, 130, 26, .34);
	--ddx-warn: #b4451f;
	--ddx-warn-soft: rgba(199, 87, 40, .09);
	--ddx-key: #2a2540;
	--ddx-key-soft: rgba(42, 37, 64, .06);
	--ddx-shadow: 0 18px 44px -30px rgba(40, 32, 8, .5);
	--ddx-r: 18px;
}

html[data-dracula-scheme="dark"] {
	--ddx-ink: #f1eee5 !important;
	--dracula-text--ddx-ink: #f1eee5 !important;
	--dracula-bg--ddx-ink: #f1eee5 !important;
	--dracula-border--ddx-ink: #f1eee5 !important;

	--ddx-mut: #9d9daa !important;
	--dracula-text--ddx-mut: #9d9daa !important;
	--dracula-bg--ddx-mut: #9d9daa !important;
	--dracula-border--ddx-mut: #9d9daa !important;

	--ddx-line: rgba(255, 255, 255, .14) !important;
	--dracula-border--ddx-line: rgba(255, 255, 255, .14) !important;
	--dracula-bg--ddx-line: rgba(255, 255, 255, .14) !important;
	--dracula-text--ddx-line: rgba(255, 255, 255, .14) !important;

	--ddx-line-2: rgba(255, 255, 255, .24) !important;
	--dracula-border--ddx-line-2: rgba(255, 255, 255, .24) !important;
	--dracula-bg--ddx-line-2: rgba(255, 255, 255, .24) !important;

	--ddx-tile: rgba(255, 255, 255, .05) !important;
	--dracula-bg--ddx-tile: rgba(255, 255, 255, .05) !important;
	--dracula-border--ddx-tile: rgba(255, 255, 255, .05) !important;

	--ddx-card: rgba(255, 255, 255, .032) !important;
	--dracula-bg--ddx-card: rgba(255, 255, 255, .032) !important;
	--dracula-border--ddx-card: rgba(255, 255, 255, .032) !important;

	--ddx-gold: #f2c35a !important;
	--dracula-text--ddx-gold: #f2c35a !important;
	--dracula-bg--ddx-gold: #f2c35a !important;
	--dracula-border--ddx-gold: #f2c35a !important;

	--ddx-gold-ink: #ffd680 !important;
	--dracula-text--ddx-gold-ink: #ffd680 !important;

	--ddx-gold-soft: rgba(253, 184, 55, .14) !important;
	--dracula-bg--ddx-gold-soft: rgba(253, 184, 55, .14) !important;
	--dracula-border--ddx-gold-soft: rgba(253, 184, 55, .14) !important;

	--ddx-ghost: rgba(255, 255, 255, .14) !important;
	--dracula-text--ddx-ghost: rgba(255, 255, 255, .14) !important;

	--ddx-ul: rgba(242, 195, 90, .4) !important;
	--dracula-text--ddx-ul: rgba(242, 195, 90, .4) !important;
	--dracula-border--ddx-ul: rgba(242, 195, 90, .4) !important;

	--ddx-warn: #f0a184 !important;
	--dracula-text--ddx-warn: #f0a184 !important;
	--ddx-warn-soft: rgba(226, 120, 78, .13) !important;
	--dracula-bg--ddx-warn-soft: rgba(226, 120, 78, .13) !important;

	--ddx-key: #e7e3f5 !important;
	--dracula-text--ddx-key: #e7e3f5 !important;
	--ddx-key-soft: rgba(255, 255, 255, .05) !important;
	--dracula-bg--ddx-key-soft: rgba(255, 255, 255, .05) !important;

	--ddx-shadow: 0 22px 54px -34px rgba(0, 0, 0, .8) !important;
}

/* ---------- scaffold ---------------------------------------------------- */

.ddx-sec,
.ddx-map {
	box-sizing: border-box;
	font-family: inherit;
}

.ddx-sec *,
.ddx-map * {
	box-sizing: border-box;
}

.ddx-sec {
	position: relative;
	margin-block: clamp(38px, 5.4vw, 62px) 0;
	scroll-margin-block-start: 118px;
}

.ddx-sec:first-of-type {
	margin-block-start: clamp(26px, 3.4vw, 40px);
}

.ddx-i {
	width: 100%;
	height: 100%;
	display: block;
}

/* ===========================================================================
 * 1. The section head
 * Tile, heading, anchor, hairline, numeral - in that reading order, so the
 * hairline is always the thing that fills whatever the title leaves over.
 * ======================================================================== */

.ddx-sec__head {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 15px);
	margin-block-end: clamp(15px, 2vw, 22px);
}

.ddx-sec .ddx-sec__ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: clamp(40px, 5.4vw, 48px);
	height: clamp(40px, 5.4vw, 48px);
	padding: clamp(9px, 1.2vw, 11px);
	border: 1px solid var(--ddx-line);
	border-radius: 14px;
	background: var(--ddx-tile);
	color: var(--ddx-gold);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
	transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

html[data-dracula-scheme="dark"] .ddx-sec .ddx-sec__ico {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

/* No icon matched the heading, so the tile carries the section number instead.
   A neutral glyph repeated down the page would be decoration with no meaning -
   and the mix of tiles a real article lands on is what stops the page reading
   as fourteen identical cards. */
.ddx-sec .ddx-sec__ico--n::before {
	content: attr(data-n);
}

.ddx-sec .ddx-sec__ico--n {
	padding: 0;
	font-size: 1.02rem;
	font-weight: 800 !important;
	color: var(--ddx-mut);
	font-variant-numeric: tabular-nums;
}

.ddx-sec__head:hover .ddx-sec__ico {
	background: var(--ddx-gold-soft);
	border-color: var(--ddx-ul);
}

/* The heading. Every declaration here is fighting a global !important:
   text-align + font-size from Additional CSS, colour from `div.text h1..h6`,
   weight from the site-wide PeydaWeb font rule, and the flex display + gold
   gradient ::before/::after pair that used to flank every h2 on the site. */
.ddx-sec .ddx-h {
	flex: 0 1 auto;
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(1.2rem, 1rem + 1.15vw, 1.6rem) !important;
	font-weight: 800 !important;
	line-height: 1.55 !important;
	color: var(--ddx-ink) !important;
	text-align: start !important;
	letter-spacing: -.2px;
}

.ddx-sec .ddx-h::before,
.ddx-sec .ddx-h::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

.ddx-sec .ddx-h a {
	color: inherit !important;
	text-decoration: none;
}

.ddx-sec__rule {
	flex: 1 1 24px;
	min-width: 18px;
	height: 1px;
	background: var(--ddx-line);
}

.ddx-sec .ddx-sec__lk {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 7px;
	border-radius: 9px;
	color: var(--ddx-mut);
	opacity: 0;
	text-decoration: none !important;
	transition: opacity .22s ease, color .22s ease, background-color .22s ease;
}

.ddx-sec__head:hover .ddx-sec__lk,
.ddx-sec .ddx-sec__lk:focus-visible {
	opacity: 1;
}

.ddx-sec .ddx-sec__lk:hover {
	color: var(--ddx-gold);
	background: var(--ddx-tile);
}

.ddx-sec .ddx-sec__lk.is-copied {
	opacity: 1;
	color: var(--ddx-gold);
}

.ddx-sec__n::before {
	content: attr(data-n);
}

.ddx-sec__n {
	flex: 0 0 auto;
	font-size: clamp(1.2rem, 2.4vw, 1.75rem);
	font-weight: 800 !important;
	line-height: 1;
	color: var(--ddx-ghost);
	font-variant-numeric: tabular-nums;
	letter-spacing: -1px;
	user-select: none;
}

/* ---------- dd-toc's in-content panel ------------------------------------
 * Collapsed, not deleted: the floating `.dd-toc-rail` is a JS clone of the list
 * inside this nav, and the rail's `gutterFits()` measures this element's right
 * edge to decide whether it has room. `display:none` breaks both. See
 * ddcd_demote_toc() in includes/sections.php for the full reasoning.
 * ------------------------------------------------------------------------ */

.ddx-toc-src {
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	box-shadow: none !important;
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ===========================================================================
 * 2. The section map
 * Deliberately not a second table of contents. The floating dd-toc panel is a
 * list of links for jumping; this is an overview you read - icon, title and the
 * section's own opening sentence - so somebody landing from search can see
 * whether their answer is on the page before they scroll, and so the page
 * states its own structure in text a crawler can lift.
 * ======================================================================== */

.ddx-map {
	margin-block: clamp(20px, 3vw, 30px) clamp(30px, 4vw, 44px);
	padding: clamp(15px, 2.2vw, 22px) clamp(14px, 2vw, 20px) clamp(12px, 1.6vw, 16px);
	border: 1px solid var(--ddx-line);
	border-radius: 22px;
	background: var(--ddx-card);
	box-shadow: var(--ddx-shadow);
}

.ddx-map__top {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-block-end: clamp(10px, 1.6vw, 14px);
	padding-inline: 4px;
}

.ddx-map .ddx-map__tico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 7px;
	border: 1px solid var(--ddx-line);
	border-radius: 10px;
	background: var(--ddx-tile);
	color: var(--ddx-gold);
}

.ddx-map__t {
	font-size: 1rem;
	font-weight: 800 !important;
	color: var(--ddx-ink);
	letter-spacing: -.2px;
}

.ddx-map__c {
	font-size: .78rem;
	color: var(--ddx-mut);
	white-space: nowrap;
}

.ddx-map__rule {
	flex: 1 1 20px;
	height: 1px;
	background: var(--ddx-line);
}

.ddx-map .ddx-map__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 2px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ddx-map .ddx-map__i {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ddx-map .ddx-map__i::before,
.ddx-map .ddx-map__i::marker {
	content: none !important;
	display: none !important;
}

.ddx-map .ddx-map__i > a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 11px;
	padding: 10px 11px;
	border-radius: 14px;
	color: inherit !important;
	text-decoration: none !important;
	transition: background-color .24s ease;
}

.ddx-map .ddx-map__i > a:hover,
.ddx-map .ddx-map__i > a:focus-visible {
	background: var(--ddx-tile);
}

.ddx-map__ico {
	display: grid;
	place-items: center;
	width: 33px;
	height: 33px;
	padding: 8px;
	margin-block-start: 1px;
	border: 1px solid var(--ddx-line);
	border-radius: 10px;
	background: var(--ddx-tile);
	color: var(--ddx-gold);
	transition: background-color .24s ease, border-color .24s ease;
}

.ddx-map__ico b::before,
.ddx-map__n::before {
	content: attr(data-n);
}

.ddx-map__ico b {
	font-size: .84rem;
	font-weight: 800 !important;
	color: var(--ddx-mut);
	font-variant-numeric: tabular-nums;
}

.ddx-map__b {
	min-width: 0;
	display: block;
}

.ddx-map__h {
	display: block;
	font-size: .93rem;
	font-weight: 700 !important;
	line-height: 1.62;
	color: var(--ddx-ink);
	transition: color .24s ease;
}

.ddx-map__d {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-block-start: 3px;
	font-size: .795rem;
	line-height: 1.78;
	color: var(--ddx-mut);
}

.ddx-map__n {
	font-size: .72rem;
	font-weight: 800 !important;
	color: var(--ddx-ghost);
	font-variant-numeric: tabular-nums;
	margin-block-start: 4px;
}

/* Reading position. The tint is the only thing that moves - it says "you are
   here", which is information, not decoration. */
.ddx-map .ddx-map__i.is-here > a {
	background: var(--ddx-gold-soft);
}

.ddx-map .is-here .ddx-map__h {
	color: var(--ddx-gold-ink);
}

.ddx-map .is-here .ddx-map__ico {
	border-color: var(--ddx-ul);
	color: var(--ddx-gold);
}

.ddx-map .is-seen .ddx-map__n {
	color: var(--ddx-ul);
}

/* ===========================================================================
 * 3. Body typography
 * ======================================================================== */

.ddx-sec .ddx-sec__body > p {
	line-height: 2.06;
	margin-block: 0 1.08em;
	color: var(--ddx-ink);
}

/* The section's opening paragraph. One notch up in size and a little tighter
   in leading, so every section has an entry point and the page stops reading
   as one uninterrupted column. */
.ddx-sec .ddx-sec__body > p.ddx-lede {
	font-size: 1.06em;
	line-height: 1.96;
	margin-block-end: 1.18em;
}

.ddx-sec .ddx-sec__body > p:last-child {
	margin-block-end: 0;
}

.ddx-sec .ddx-sec__body strong,
.ddx-sec .ddx-sec__body b {
	font-weight: 800 !important;
	color: var(--ddx-ink);
}

.ddx-sec .ddx-sec__body em,
.ddx-sec .ddx-sec__body i {
	font-style: normal;
	color: var(--ddx-gold-ink);
}

/* Links. An article here carries 5-10 internal links on purpose; a gold word
   with no underline reads as emphasis, not as a link, and the reader never
   finds them. A hairline underline that thickens on hover fixes that without
   turning the paragraph into a ransom note. */
.ddx-sec .ddx-sec__body p a,
.ddx-sec .ddx-sec__body li a {
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-decoration-color: var(--ddx-ul) !important;
	text-underline-offset: 5px;
	transition: text-decoration-color .2s ease;
}

.ddx-sec .ddx-sec__body p a:hover,
.ddx-sec .ddx-sec__body li a:hover {
	text-decoration-thickness: 2px !important;
	text-decoration-color: currentColor !important;
}

/* Sub-headings. The icon only appears when the H3 text actually matched
   something; the rest stay plain, which is the variation a real page has. */
.ddx-sec .ddx-sec__body .ddx-h3 {
	display: flex !important;
	align-items: center;
	gap: 9px;
	margin: clamp(24px, 3vw, 34px) 0 12px !important;
	padding: 0 !important;
	font-size: clamp(1.03rem, .96rem + .5vw, 1.2rem) !important;
	font-weight: 800 !important;
	line-height: 1.7 !important;
	color: var(--ddx-ink) !important;
	text-align: start !important;
}

.ddx-sec .ddx-sec__body .ddx-h3::before,
.ddx-sec .ddx-sec__body .ddx-h3::after {
	content: none !important;
	display: none !important;
}

.ddx-h3__ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	color: var(--ddx-gold);
	opacity: .9;
}

.ddx-sec .ddx-sec__body .ddx-h4 {
	margin: clamp(20px, 2.4vw, 26px) 0 9px !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	color: var(--ddx-ink) !important;
	text-align: start !important;
}

/* ===========================================================================
 * 4. Lists
 * ======================================================================== */

.ddx-sec .ddx-sec__body .ddx-list {
	margin: 0 0 1.2em !important;
	padding: 0 !important;
	list-style: none !important;
}

.ddx-sec .ddx-sec__body .ddx-list > li {
	position: relative;
	margin: 0 0 .62em !important;
	padding: 0 30px 0 0 !important;
	line-height: 2;
	color: var(--ddx-ink);
	list-style: none !important;
}

html[dir="ltr"] .ddx-sec .ddx-sec__body .ddx-list > li {
	padding: 0 0 0 30px !important;
}

.ddx-sec .ddx-sec__body .ddx-list > li::marker {
	content: none;
}

/* A 7px diamond, not a dot: it reads as a mark someone chose.
   `content` is !important because Additional CSS carries a blanket
   `ul[class*="wp-block-list"] li::before { content: none !important }` - a
   cleanup rule from an older list style. Specificity alone does not beat it. */
.ddx-sec .ddx-sec__body .ddx-list--ul > li::before {
	content: "" !important;
	position: absolute;
	inset-inline-start: 8px;
	inset-block-start: calc(1em - 3px);
	width: 7px;
	height: 7px;
	background: var(--ddx-gold);
	opacity: .78;
	transform: rotate(45deg);
	border-radius: 1.5px;
}

.ddx-sec .ddx-sec__body .ddx-list--ol {
	counter-reset: ddxli;
}

.ddx-sec .ddx-sec__body .ddx-list--ol > li {
	counter-increment: ddxli;
	padding-inline-start: 40px !important;
	min-height: 27px;
}

.ddx-sec .ddx-sec__body .ddx-list--ol > li::before {
	content: counter(ddxli, persian) !important;
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(1em - 13px);
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border: 1px solid var(--ddx-line);
	border-radius: 9px;
	background: var(--ddx-tile);
	color: var(--ddx-gold-ink);
	font-size: .8rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Short-item lists run in two columns from tablet up. Sentence lists never do -
   two columns of wrapped Persian sentences is harder to read, not easier. */
@media (min-width: 700px) {
	.ddx-sec .ddx-sec__body .ddx-list--cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(18px, 2.4vw, 30px);
	}
}

/* ===========================================================================
 * 5. Tables
 * Takes over from the Additional CSS treatment, which paints the header row a
 * solid gold tint under a 2px gold border - a coloured bar across the top of a
 * card by any other name - and hardcodes light-mode greys that survive into
 * dark mode as low-contrast text.
 *
 * Every body-cell selector below is written as
 * `.ddx-sec <wrapper> table.ddx-table …` on purpose. The rule it has to beat is
 * `.wp-block-table table tbody tr:not(:first-child) td` at (0,2,4) - `:not()`
 * lends the specificity of its argument - and it is !important, so the shorter
 * `.ddx-sec .ddx-table tbody td` at (0,2,3) silently loses and the old dashed
 * gold hairline comes back.
 *
 * The borders are PHYSICAL (`border-width` / `border-style` /
 * `border-bottom-color`), never `border-block-end`. Measured on the live page:
 * the dark mode plugin cannot resolve a logical border shorthand, so it
 * re-emits `border: 0; border-block-end: 1px solid var(--ddx-line)` as
 * `border-color: currentcolor !important` - and since its copy lands after
 * every enqueued sheet, every hairline in every table turned into a 1px line
 * the colour of the text. This is trap #7 in DESIGN-BANS.md wearing the
 * block-axis hat; the note there about `border-inline-start` is the same bug.
 * ======================================================================== */

.ddx-sec .ddx-tw,
.ddx-sec .ddx-figtable {
	margin: 0 0 1.4em !important;
	padding: 0 !important;
	border: 1px solid var(--ddx-line) !important;
	border-radius: var(--ddx-r) !important;
	background: var(--ddx-card) !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	box-shadow: none !important;
	-webkit-overflow-scrolling: touch;
}

.ddx-sec .ddx-tw table.ddx-table,
.ddx-sec .ddx-figtable table.ddx-table {
	width: 100% !important;
	min-width: 460px;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: collapse !important;
	box-shadow: none !important;
	background: transparent !important;
	font-size: .92rem;
}

.ddx-sec .ddx-tw table.ddx-table thead th,
.ddx-sec .ddx-tw table.ddx-table thead td,
.ddx-sec .ddx-figtable table.ddx-table thead th,
.ddx-sec .ddx-figtable table.ddx-table thead td,
.ddx-sec .ddx-tw table.ddx-table--nohead tbody tr:first-child td,
.ddx-sec .ddx-figtable table.ddx-table--nohead tbody tr:first-child td {
	padding: 14px 15px !important;
	background: var(--ddx-tile) !important;
	color: var(--ddx-ink) !important;
	font-weight: 800 !important;
	text-align: start !important;
	border-width: 0 0 1px !important;
	border-style: solid !important;
	border-bottom-color: var(--ddx-line-2) !important;
	white-space: nowrap;
}

.ddx-sec .ddx-tw table.ddx-table tbody td,
.ddx-sec .ddx-tw table.ddx-table tbody th,
.ddx-sec .ddx-figtable table.ddx-table tbody td,
.ddx-sec .ddx-figtable table.ddx-table tbody th {
	padding: 13px 15px !important;
	border-width: 0 0 1px !important;
	border-style: solid !important;
	border-bottom-color: var(--ddx-line) !important;
	background: transparent !important;
	color: var(--ddx-ink) !important;
	font-weight: 400 !important;
	line-height: 1.9;
	text-align: start !important;
	vertical-align: top;
}

.ddx-sec .ddx-tw table.ddx-table tbody tr:last-child td,
.ddx-sec .ddx-figtable table.ddx-table tbody tr:last-child td {
	border-bottom-width: 0 !important;
}

.ddx-sec .ddx-tw table.ddx-table tbody tr:hover td,
.ddx-sec .ddx-figtable table.ddx-table tbody tr:hover td {
	background: var(--ddx-gold-soft) !important;
}

/* The first column is the row's subject in nearly every table in the corpus. */
.ddx-sec .ddx-tw table.ddx-table tbody td:first-child,
.ddx-sec .ddx-figtable table.ddx-table tbody td:first-child {
	font-weight: 700 !important;
	color: var(--ddx-ink) !important;
}

/* Phones: each row becomes its own small card, labelled from the header. */
@media (max-width: 600px) {
	.ddx-sec .ddx-tw,
	.ddx-sec .ddx-figtable {
		border: 0 !important;
		background: transparent !important;
		overflow: visible !important;
	}

	.ddx-sec .ddx-tw table.ddx-table,
	.ddx-sec .ddx-figtable table.ddx-table {
		display: block !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	.ddx-sec .ddx-tw table.ddx-table thead,
	.ddx-sec .ddx-figtable table.ddx-table thead,
	.ddx-sec .ddx-tw table.ddx-table--nohead tbody tr:first-child,
	.ddx-sec .ddx-figtable table.ddx-table--nohead tbody tr:first-child {
		display: none !important;
	}

	.ddx-sec .ddx-tw table.ddx-table tbody,
	.ddx-sec .ddx-figtable table.ddx-table tbody {
		display: block !important;
	}

	.ddx-sec .ddx-tw table.ddx-table tbody tr,
	.ddx-sec .ddx-figtable table.ddx-table tbody tr {
		display: block !important;
		margin-block-end: 10px;
		border: 1px solid var(--ddx-line) !important;
		border-radius: 14px;
		background: var(--ddx-card) !important;
		overflow: hidden;
	}

	.ddx-sec .ddx-tw table.ddx-table tbody td,
	.ddx-sec .ddx-figtable table.ddx-table tbody td {
		display: flex !important;
		align-items: baseline;
		gap: 12px;
		padding: 10px 13px !important;
		border-width: 0 0 1px !important;
		border-style: solid !important;
		border-bottom-color: var(--ddx-line) !important;
		white-space: normal !important;
	}

	.ddx-sec .ddx-tw table.ddx-table tbody tr td:last-child,
	.ddx-sec .ddx-figtable table.ddx-table tbody tr td:last-child {
		border-bottom-width: 0 !important;
	}

	.ddx-sec .ddx-table tbody td[data-th]::before {
		content: attr(data-th);
		flex: 0 0 38%;
		font-size: .8rem;
		font-weight: 700;
		color: var(--ddx-mut);
		line-height: 1.7;
	}

	.ddx-sec .ddx-tw table.ddx-table tbody tr:hover td,
	.ddx-sec .ddx-figtable table.ddx-table tbody tr:hover td {
		background: transparent !important;
	}
}

/* ---------- images ------------------------------------------------------
 * The site frames every content image in a 2px gold border with a 23px radius
 * (`div.text .wp-block-image img`, !important). Inside an article that reads
 * as a sticker, and it is the same coloured-frame instinct DESIGN-BANS rules
 * out everywhere else. Same vocabulary as the rest of this file instead: a
 * hairline, a radius that matches the cards, and a soft shadow. The `background`
 * is deliberately left alone - logos with transparency rely on it.
 * ------------------------------------------------------------------------ */

.ddx-sec .ddx-sec__body .wp-block-image img,
.ddx-sec .ddx-sec__body > figure img,
.ddx-sec .ddx-sec__body > p > img {
	border: 1px solid var(--ddx-line) !important;
	border-radius: 16px !important;
	box-shadow: var(--ddx-shadow) !important;
}

.ddx-sec .ddx-sec__body figure {
	margin: 1.5em auto !important;
}

.ddx-sec .ddx-sec__body figcaption {
	margin-block-start: 9px;
	font-size: .82rem;
	line-height: 1.8;
	color: var(--ddx-mut);
	text-align: center;
}

/* ===========================================================================
 * 6. Callouts
 * <aside>, never <blockquote> - trap #5: the theme owns blockquote with
 * `font-style: italic !important`, which fake-slants Persian, plus its own
 * border, radius, weight and a quote-mark background image.
 * ======================================================================== */

.ddx-sec .ddx-note {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 1.35em 0 !important;
	padding: 15px 16px !important;
	border: 1px solid var(--ddx-line) !important;
	border-radius: var(--ddx-r);
	background: var(--ddx-key-soft);
}

.ddx-note__ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 8px;
	border-radius: 11px;
	background: var(--ddx-card);
	border: 1px solid var(--ddx-line);
	color: var(--ddx-key);
}

.ddx-sec .ddx-note__b {
	min-width: 0;
}

.ddx-sec .ddx-note__b p {
	margin: 0 !important;
	font-size: .96rem;
	line-height: 1.98;
	color: var(--ddx-ink);
}

.ddx-sec .ddx-note--tip {
	background: var(--ddx-gold-soft);
}

.ddx-sec .ddx-note--tip .ddx-note__ico {
	color: var(--ddx-gold);
}

.ddx-sec .ddx-note--warn {
	background: var(--ddx-warn-soft);
}

.ddx-sec .ddx-note--warn .ddx-note__ico {
	color: var(--ddx-warn);
}

/* ===========================================================================
 * 7. The closing section
 * The only section that gets a surface. Everything else is open text with a
 * dressed head, because fourteen identical rounded rectangles down a page is a
 * template, not a design.
 * ======================================================================== */

.ddx-sec--panel .ddx-sec__body {
	padding: clamp(16px, 2.4vw, 24px);
	border: 1px solid var(--ddx-line);
	border-radius: 20px;
	background: var(--ddx-tile);
}

.ddx-sec--panel .ddx-sec__body > p:last-child {
	margin-block-end: 0 !important;
}

/* ===========================================================================
 * 8. FAQ accordion
 * One block of CSS for both mechanisms: the one dd-blog-features builds on
 * /blog/ and legacy posts, and the one this plugin builds on the money pages.
 * Same class names on purpose - they must not drift apart.
 * ======================================================================== */

.ddx-sec .ddbf-faq {
	display: grid;
	gap: 9px;
	margin: 0 !important;
}

.ddx-sec .ddbf-faq__item {
	border: 1px solid var(--ddx-line) !important;
	border-radius: 16px !important;
	background: var(--ddx-card) !important;
	box-shadow: none !important;
	overflow: hidden;
	transition: border-color .24s ease, background-color .24s ease;
	scroll-margin-block-start: 118px;
}

.ddx-sec .ddbf-faq__item[open] {
	background: var(--ddx-tile) !important;
	border-color: var(--ddx-line-2) !important;
}

.ddx-sec .ddbf-faq__item summary {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 15px 16px !important;
	cursor: pointer;
	list-style: none;
}

.ddx-sec .ddbf-faq__item summary::-webkit-details-marker {
	display: none;
}

.ddx-sec .ddbf-faq__item summary:hover {
	background: var(--ddx-gold-soft) !important;
}

.ddx-sec .ddbf-faq__q {
	min-width: 0;
	flex: 1 1 auto;
}

.ddx-sec .ddbf-faq__q h3 {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	line-height: 1.75 !important;
	color: var(--ddx-ink) !important;
	text-align: start !important;
}

.ddx-sec .ddbf-faq__q h3::before,
.ddx-sec .ddbf-faq__q h3::after {
	content: none !important;
	display: none !important;
}

/* The tile must not rotate with the glyph - it is a rounded square, and a
   rounded square at 135deg is a diamond. Only the SVG turns. */
.ddx-sec .ddbf-faq__plus {
	flex: 0 0 auto;
	display: grid !important;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 6px;
	border: 1px solid var(--ddx-line);
	border-radius: 10px;
	background: var(--ddx-tile) !important;
	color: var(--ddx-gold) !important;
	transform: none !important;
	transition: background-color .24s ease, border-color .24s ease;
}

.ddx-sec .ddbf-faq__plus svg {
	width: 100%;
	height: 100%;
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.ddx-sec .ddbf-faq__item[open] .ddbf-faq__plus {
	background: var(--ddx-gold-soft) !important;
	border-color: var(--ddx-ul);
}

.ddx-sec .ddbf-faq__item[open] .ddbf-faq__plus svg {
	transform: rotate(135deg);
}

.ddx-sec .ddbf-faq__a {
	padding: 0 16px 15px !important;
	border: 0 !important;
	background: transparent !important;
}

.ddx-sec .ddbf-faq__item[open] .ddbf-faq__a {
	border-top: 1px solid var(--ddx-line) !important;
	padding-block-start: 14px !important;
}

.ddx-sec .ddbf-faq__a p {
	margin: 0 !important;
	font-size: .95rem !important;
	line-height: 2.02 !important;
	color: var(--ddx-mut) !important;
}

.ddx-sec .ddbf-faq__a p + p {
	margin-block-start: 11px !important;
}

/* ---------- the Yoast FAQ block -----------------------------------------
 * 22 pages answer their FAQ with the Yoast block instead of H3 headings. It
 * emits its own Question nodes, so this plugin leaves the markup alone - but
 * the block would otherwise render in the old vocabulary (a #ddd border, a 23px
 * radius, a drop shadow and a hardcoded white background that turns into a
 * white slab in dark mode) right next to the accordion above it. Same shell,
 * so a reader cannot tell which mechanism a given page used.
 * ------------------------------------------------------------------------ */

.ddx-sec .schema-faq {
	display: grid;
	gap: 9px;
}

.ddx-sec .schema-faq-section {
	margin: 0 !important;
	padding: 15px 16px !important;
	border: 1px solid var(--ddx-line) !important;
	border-radius: 16px !important;
	background: var(--ddx-card) !important;
	box-shadow: none !important;
	scroll-margin-block-start: 118px;
}

.ddx-sec .schema-faq-question {
	display: block;
	margin-block-end: 8px;
	font-size: 1rem;
	font-weight: 800 !important;
	line-height: 1.75;
	color: var(--ddx-ink) !important;
}

.ddx-sec .schema-faq-answer {
	margin: 0 !important;
	font-size: .95rem !important;
	line-height: 2.02 !important;
	color: var(--ddx-mut) !important;
}

/* ===========================================================================
 * 9. Motion. Opacity and transform only, so it stays on the compositor, and
 * the scroll-driven timeline needs no JavaScript at all where it is supported.
 * ======================================================================== */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.ddx-sec__head,
		.ddx-map {
			animation: ddx-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% entry 46%;
		}
	}
}

@keyframes ddx-rise {
	from {
		opacity: .35;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ===========================================================================
 * 10. Narrow screens
 * ======================================================================== */

@media (max-width: 620px) {
	.ddx-sec__n {
		display: none;
	}

	.ddx-sec__head {
		gap: 10px;
	}

	.ddx-sec .ddx-sec__lk {
		display: none;
	}

	.ddx-map .ddx-map__list {
		grid-template-columns: 1fr;
	}

	.ddx-map__d {
		-webkit-line-clamp: 2;
	}

	.ddx-sec .ddx-sec__body > p {
		line-height: 2.02;
	}
}