/**
 * DopamineDriven.io -- Pillar landing pages
 *
 * Scoped stylesheet for the 7 content pillar pages:
 * Identity, Systems, Energy, Body, Relationships, Money, Career.
 *
 * All classes are prefixed .dd-pl- to avoid polluting global styles.
 * Variables are scoped inside .dd-pillar-page { --pl-xxx: value; }
 * following the resources.css pattern.
 *
 * Fonts: Inter and IBM Plex Mono only.
 *
 * @package DopamineDriven
 */


/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS (scoped to .dd-pillar-page)
   ════════════════════════════════════════════════════════════════ */

.dd-pillar-page {
	--pl-lime:        #CCFF00;
	--pl-lime-dim:    rgba(204,255,0,0.07);
	--pl-lime-mid:    rgba(204,255,0,0.28);
	--pl-lime-glow:   0 0 0 1px rgba(204,255,0,0.2), 0 4px 28px rgba(204,255,0,0.07);
	--pl-purple:      #C084FC;
	--pl-bg:          #060609;
	--pl-surface:     #0c0c12;
	--pl-surface-2:   #12121a;
	--pl-surface-3:   #1a1a24;
	--pl-border:      rgba(255,255,255,0.065);
	--pl-border-hi:   rgba(255,255,255,0.12);
	--pl-text:        #dddde8;
	--pl-muted:       rgba(221,221,232,0.42);
	--pl-muted-2:     rgba(221,221,232,0.22);
	--pl-nav-h:       var(--nav-h, 60px);
}


/* ════════════════════════════════════════════════════════════════
   OUTER WRAPPER
   ════════════════════════════════════════════════════════════════ */

.dd-pillar-page {
	display: block;
	background: var(--pl-bg);
	min-height: calc(100vh - var(--pl-nav-h));
	font-family: 'Inter', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--pl-text);
}


/* ════════════════════════════════════════════════════════════════
   1. PILLAR STRIP NAV
   ════════════════════════════════════════════════════════════════ */

.dd-pl-strip {
	position: sticky;
	top: var(--pl-nav-h, 60px);
	z-index: 90;
	height: 48px;
	background: rgba(6,6,9,0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--pl-border);
	display: flex;
	align-items: stretch;
}

.dd-pl-strip-inner {
	display: flex;
	align-items: center;
	padding: 0 clamp(1.5rem, 5vw, 4rem);
	max-width: var(--pl-wrap, 1400px);
	width: 100%;
	margin: 0 auto;
}

/* Pillar tabs container */
.dd-pl-tabs {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1;
}

.dd-pl-tabs::-webkit-scrollbar {
	display: none;
}

/* Individual tab */
.dd-pl-tab {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 18px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	font-weight: 500;
	color: var(--pl-muted);
	white-space: nowrap;
	cursor: pointer;
	border: none;
	background: none;
	text-decoration: none;
	transition: color 0.15s;
	position: relative;
}

.dd-pl-tab:hover {
	color: var(--pl-text);
}

.dd-pl-tab.is-active {
	color: var(--pl-lime);
	font-weight: 700;
	top: 1px;
}

.dd-pl-tab.is-active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--pl-lime);
}

/* Right side: live badge */
.dd-pl-strip-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding-left: 16px;
}

.dd-pl-live {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pl-lime);
	display: flex;
	align-items: center;
	gap: 7px;
}

.dd-pl-live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pl-lime);
	flex-shrink: 0;
	animation: dd-pl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes dd-pl-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.45; transform: scale(0.8); }
}


/* ════════════════════════════════════════════════════════════════
   2. HERO
   ════════════════════════════════════════════════════════════════ */

.dd-pl-hero-outer {
	max-width: var(--pl-wrap, 1400px);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.dd-pl-hero {
	display: grid;
	grid-template-columns: 1fr 480px;
	overflow: hidden;
}

/* ── Hero left column ────────────────────────────────────────── */

.dd-pl-hero-left {
	display: flex;
	flex-direction: column;
}

/* ── Hero visual (top of left column) — locked 16:9 ─────────── */

.dd-pl-hero-visual {
	aspect-ratio: 16 / 9;
	width: 100%;
	position: relative;
	background: #080810;
	overflow: hidden;
	flex-shrink: 0;
}

.dd-pl-hero-visual-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	transition: transform 6s ease;
}

.dd-pl-hero-visual:hover .dd-pl-hero-visual-bg {
	transform: scale(1.04);
}

/* Scanline texture overlay */
.dd-pl-hero-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		to bottom,
		transparent,
		transparent 2px,
		rgba(0,0,0,0.18) 2px,
		rgba(0,0,0,0.18) 4px
	);
	pointer-events: none;
	z-index: 1;
}

/* Deep gradient bleed — image fades into quote zone below */
.dd-pl-hero-visual::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 40%,
		rgba(8,8,16,0.7) 75%,
		rgba(8,8,16,0.98) 100%
	);
	pointer-events: none;
	z-index: 2;
}

/* Enormous transparent-stroke watermark word */
.dd-pl-watermark {
	position: absolute;
	bottom: -40px;
	left: -20px;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 900;
	font-size: clamp(80px, 14vw, 160px);
	line-height: 1;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px rgba(204,255,0,0.05);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	z-index: 3;
}

/* ── Hero quote (bottom of left column) ─────────────────────── */

.dd-pl-hero-quote {
	flex: 1;
	background: #080810;
	padding: 1.75rem 2.25rem 2.25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	position: relative;
	overflow: hidden;
}

/* Faint large quotation mark as background texture */
.dd-pl-hero-quote::before {
	content: '\201C';
	position: absolute;
	top: -2rem;
	right: 1.5rem;
	font-size: 14rem;
	line-height: 1;
	color: rgba(204,255,0,0.04);
	font-weight: 900;
	font-family: 'Inter', sans-serif;
	pointer-events: none;
	user-select: none;
}

.dd-pl-hero-quote-eyebrow {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.dd-pl-hero-quote-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pl-lime);
	flex-shrink: 0;
}

.dd-pl-hero-quote-source {
	font-family: 'IBM Plex Mono', monospace;
	font-size: .58rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.3);
}

.dd-pl-hero-quote-source strong {
	color: rgba(255,255,255,0.55);
	font-weight: 500;
}

.dd-pl-hero-quote-text {
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.6;
	color: rgba(255,255,255,0.88);
	position: relative;
	z-index: 1;
}

.dd-pl-hero-quote-text .dd-pl-qmark {
	color: var(--pl-lime);
	font-size: 1.3em;
	line-height: 0;
	vertical-align: -.12em;
}

.dd-pl-hero-quote-text .dd-pl-qmark-open { margin-right: .1em; }
.dd-pl-hero-quote-text .dd-pl-qmark-close { margin-left: .1em; }

.dd-pl-hero-quote-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}

.dd-pl-hero-quote-attribution {
	display: flex;
	align-items: center;
	gap: .65rem;
}

.dd-pl-hero-quote-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(204,255,0,0.15), rgba(192,132,252,0.15));
	border: 1px solid rgba(204,255,0,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .52rem;
	font-weight: 700;
	color: var(--pl-lime);
	letter-spacing: .04em;
	flex-shrink: 0;
	font-family: 'IBM Plex Mono', monospace;
}

.dd-pl-hero-quote-handle {
	font-family: 'IBM Plex Mono', monospace;
	font-size: .65rem;
	color: rgba(255,255,255,0.35);
	line-height: 1.4;
}

.dd-pl-hero-quote-handle strong {
	color: rgba(255,255,255,0.6);
	font-weight: 500;
	display: block;
}

.dd-pl-hero-quote-vote {
	display: flex;
	align-items: center;
	gap: .4rem;
	background: rgba(204,255,0,0.07);
	border: 1px solid rgba(204,255,0,0.18);
	border-radius: 100px;
	padding: .3rem .75rem;
	font-family: 'IBM Plex Mono', monospace;
	font-size: .6rem;
	color: var(--pl-lime);
	letter-spacing: .04em;
}

/* ── Hero panel (right) ──────────────────────────────────────── */

.dd-pl-hero-panel {
	background: var(--pl-surface);
	border-left: 1px solid var(--pl-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dd-pl-hero-top {
	padding: 48px 48px 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Tag line */
.dd-pl-hero-tag {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pl-lime);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.dd-pl-tag-line {
	display: block;
	width: 20px;
	height: 1px;
	background: var(--pl-lime);
	flex-shrink: 0;
}

/* Number label */
.dd-pl-hero-num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	font-weight: 400;
	color: var(--pl-muted);
	letter-spacing: 0.08em;
	margin-bottom: 20px;
}

/* Hero headline */
.dd-pl-hero-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -0.04em;
	color: #ffffff;
	margin: 0 0 28px;
}

/* Hero body copy */
.dd-pl-hero-body {
	font-size: 15px;
	line-height: 1.75;
	color: var(--pl-text);
	max-width: 40ch;
	margin-bottom: 36px;
}

.dd-pl-hero-body strong {
	color: #ffffff;
	font-weight: 600;
}

/* CTA row */
.dd-pl-cta-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 48px;
}

.dd-pl-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--pl-lime);
	color: #000000;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding: 13px 24px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.dd-pl-cta-primary:hover {
	opacity: 0.88;
}

.dd-pl-cta-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	color: var(--pl-muted);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 400;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s;
}

.dd-pl-cta-ghost:hover {
	color: #ffffff;
}

/* Stats strip at bottom of panel */
.dd-pl-hero-stats {
	border-top: 1px solid var(--pl-border);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.dd-pl-hero-stat {
	padding: 24px;
	border-right: 1px solid var(--pl-border);
}

.dd-pl-hero-stat:last-child {
	border-right: none;
}

.dd-pl-hero-stat-n {
	display: block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 1.75rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
	margin-bottom: 6px;
}

.dd-pl-hero-stat-l {
	display: block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--pl-muted);
}


/* ════════════════════════════════════════════════════════════════
   3. PAGE BODY WRAPPER
   ════════════════════════════════════════════════════════════════ */

.dd-pl-body {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px 80px;
}


/* ════════════════════════════════════════════════════════════════
   4. SECTION HEADERS
   ════════════════════════════════════════════════════════════════ */

.dd-pl-sh {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 52px 0 0;
	border-bottom: 1px solid var(--pl-border);
	margin-bottom: 0;
}

.dd-pl-sh-num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	font-weight: 700;
	color: var(--pl-lime);
	letter-spacing: 0.1em;
	flex-shrink: 0;
	padding-bottom: 14px;
}

.dd-pl-sh-title {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pl-muted);
	padding-bottom: 14px;
}

.dd-pl-sh-desc {
	font-size: 13px;
	color: var(--pl-muted);
	font-style: italic;
	margin-left: auto;
	padding-bottom: 14px;
}


/* ════════════════════════════════════════════════════════════════
   5. COVER STORY GRID
   ════════════════════════════════════════════════════════════════ */

/* ── Cover: Option C — editorial reading list rows ───────────── */

.dd-pl-cover {
	display: flex;
	flex-direction: column;
	gap: 3px;
	border: 1px solid var(--pl-border);
	border-top: none;
}

/* Each article is a horizontal row: image left, text right */
.dd-pl-cover-row {
	display: grid;
	grid-template-columns: 560px 1fr;
	background: var(--pl-surface);
	min-height: 315px;
	overflow: hidden;
}

.dd-pl-cover-row:hover .dd-pl-card-img-bg {
	transform: scale(1.03);
}

/* ── 5a. Card image ──────────────────────────────────────────── */

.dd-pl-card-img {
	position: relative;
	overflow: hidden;
	background: #0a0a0a;
	flex-shrink: 0;
	height: 100%;
	min-height: 315px;
}

.dd-pl-card-img-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	transition: transform 0.5s ease;
}


/* ── 5b. Card body ───────────────────────────────────────────── */

.dd-pl-card-body {
	padding: 1.75rem 2rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	border-left: 1px solid var(--pl-border);
}

/* Row number — large faint background numeral */
.dd-pl-card-rownum {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 2.75rem;
	font-weight: 900;
	color: rgba(255,255,255,0.04);
	line-height: 1;
	margin-bottom: .35rem;
	letter-spacing: -.02em;
}

.dd-pl-card-body--sm {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.dd-pl-card-cat {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pl-lime);
	margin-bottom: 10px;
	display: block;
}

.dd-pl-card-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	color: #ffffff;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
	cursor: pointer;
	transition: color 0.2s;
	display: block;
}

.dd-pl-card-title:hover {
	color: var(--pl-lime);
}

.dd-pl-card-title.lg {
	font-size: 1.45rem;
}

.dd-pl-card-title.md {
	font-size: 1.1rem;
}

.dd-pl-card-title.sm {
	font-size: 0.95rem;
}

.dd-pl-card-excerpt {
	font-size: 13px;
	color: var(--pl-muted);
	line-height: 1.65;
	margin-bottom: 16px;
	flex: 1;
}

.dd-pl-card-meta {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	color: var(--pl-muted);
	display: flex;
	align-items: center;
	gap: 10px;
}

.dd-pl-card-meta-dot {
	color: var(--pl-border);
}


/* ════════════════════════════════════════════════════════════════
   6. STACK BODY
   ════════════════════════════════════════════════════════════════ */

.dd-pl-stack-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
}

.dd-pl-stack-cat {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--pl-purple);
	margin-bottom: 6px;
	display: block;
}

.dd-pl-stack-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
	margin-bottom: 8px;
	cursor: pointer;
	transition: color 0.2s;
	display: block;
}

.dd-pl-stack-title:hover {
	color: var(--pl-lime);
}

.dd-pl-stack-meta {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	color: var(--pl-muted);
}


/* ════════════════════════════════════════════════════════════════
   7. THEME CLUSTER NAV
   ════════════════════════════════════════════════════════════════ */

.dd-pl-cluster-nav {
	display: flex;
	border: 1px solid var(--pl-border);
	border-top: none;
	overflow: hidden;
}

.dd-pl-cluster-tab {
	flex: 1;
	padding: 14px 16px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-muted);
	cursor: pointer;
	border-right: 1px solid var(--pl-border);
	border: none;
	border-right: 1px solid var(--pl-border);
	background: none;
	text-align: center;
	transition: color 0.15s, background 0.15s;
}

.dd-pl-cluster-tab:last-child {
	border-right: none;
}

.dd-pl-cluster-tab:hover {
	color: #ffffff;
	background: rgba(255,255,255,0.025);
}

.dd-pl-cluster-tab.is-active {
	color: #000000;
	background: var(--pl-lime);
}


/* ════════════════════════════════════════════════════════════════
   8. CLUSTER GRID
   ════════════════════════════════════════════════════════════════ */

.dd-pl-cluster-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--pl-border);
	border-top: none;
}

.dd-pl-cluster-card {
	padding: 22px 24px;
	border-right: 1px solid var(--pl-border);
	border-bottom: 1px solid var(--pl-border);
	cursor: pointer;
	transition: background 0.15s;
	position: relative;
	overflow: hidden;
}

.dd-pl-cluster-card:hover {
	background: rgba(255,255,255,0.015);
}

.dd-pl-cluster-card:nth-child(3n) {
	border-right: none;
}

.dd-pl-cluster-card:nth-last-child(-n+3) {
	border-bottom: none;
}

/* Left accent bar via pseudo */
.dd-pl-cluster-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 2px;
	background: transparent;
	transition: background 0.2s;
}

.dd-pl-cluster-card:hover::before {
	background: var(--pl-lime);
}

.dd-pl-cc-num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	color: var(--pl-muted);
	margin-bottom: 10px;
	display: block;
}

.dd-pl-cc-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
	margin-bottom: 6px;
	display: block;
	transition: color 0.2s;
}

.dd-pl-cluster-card:hover .dd-pl-cc-title {
	color: var(--pl-lime);
}

.dd-pl-cc-excerpt {
	font-size: 12px;
	color: var(--pl-muted);
	line-height: 1.6;
	display: block;
}

.dd-pl-cc-foot {
	margin-top: 12px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	color: var(--pl-muted);
	letter-spacing: 0.06em;
	display: block;
}


/* ════════════════════════════════════════════════════════════════
   9. EDITORIAL BREAK
   ════════════════════════════════════════════════════════════════ */

.dd-pl-editorial {
	display: grid;
	grid-template-columns: 100px 1fr 260px;
	border: 1px solid var(--pl-border);
	border-top: none;
}

/* Vertical index label */
.dd-pl-editorial-index {
	background: var(--pl-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #000000;
}

/* Editorial body */
.dd-pl-editorial-body {
	padding: 44px 52px;
	border-left: 1px solid var(--pl-border);
	border-right: 1px solid var(--pl-border);
}

/* Pull quote */
.dd-pl-editorial-quote {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	line-height: 1.45;
	color: #ffffff;
	position: relative;
	padding-left: 32px;
}

.dd-pl-editorial-quote::before {
	content: '\201C';
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 3.5rem;
	line-height: 1;
	position: absolute;
	left: 0;
	top: -6px;
	color: var(--pl-lime);
	opacity: 0.5;
}

/* Attribution */
.dd-pl-editorial-attr {
	margin-top: 24px;
	padding-left: 32px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	color: var(--pl-muted);
	letter-spacing: 0.08em;
	display: flex;
	align-items: center;
	gap: 12px;
}

.dd-pl-editorial-attr::before {
	content: '';
	display: block;
	width: 24px;
	height: 1px;
	background: var(--pl-muted);
	flex-shrink: 0;
}

/* Aside panel */
.dd-pl-editorial-aside {
	padding: 36px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
}

.dd-pl-editorial-aside-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pl-muted);
	margin-bottom: 4px;
	display: block;
}

/* Aside links */
.dd-pl-aside-link {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	line-height: 1.3;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	text-decoration: none;
	transition: color 0.2s;
}

.dd-pl-aside-link:hover {
	color: var(--pl-lime);
}

.dd-pl-aside-link::before {
	content: '\2192';
	color: var(--pl-lime);
	flex-shrink: 0;
	margin-top: 2px;
	line-height: 1.3;
}


/* ════════════════════════════════════════════════════════════════
   10. NEWSLETTER
   ════════════════════════════════════════════════════════════════ */

.dd-pl-newsletter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--pl-border);
	border-top: none;
	overflow: hidden;
}

/* Left column */
.dd-pl-nl-left {
	padding: 52px;
	background: var(--pl-surface);
	border-right: 1px solid var(--pl-border);
}

.dd-pl-nl-eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pl-lime);
	margin-bottom: 20px;
	display: block;
}

.dd-pl-nl-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: clamp(1.7rem, 2.8vw, 2.2rem);
	line-height: 1.08;
	letter-spacing: -0.04em;
	color: #ffffff;
	margin-bottom: 16px;
}

.dd-pl-nl-body {
	font-size: 14px;
	color: var(--pl-muted);
	line-height: 1.7;
	max-width: 40ch;
	margin-bottom: 28px;
}

.dd-pl-nl-perks {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dd-pl-nl-perk {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--pl-muted);
}

.dd-pl-nl-check {
	width: 16px;
	height: 16px;
	background: rgba(204,255,0,0.08);
	border: 1px solid rgba(204,255,0,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	color: var(--pl-lime);
}

/* Right column */
.dd-pl-nl-right {
	padding: 52px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dd-pl-nl-form-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--pl-muted);
	margin-bottom: 14px;
	display: block;
}

.dd-pl-nl-input {
	width: 100%;
	background: var(--pl-bg);
	border: 1px solid var(--pl-border);
	color: #ffffff;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	padding: 14px 18px;
	outline: none;
	margin-bottom: 10px;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.dd-pl-nl-input:focus {
	border-color: var(--pl-lime);
}

.dd-pl-nl-input::placeholder {
	color: var(--pl-muted);
}

.dd-pl-nl-submit {
	width: 100%;
	background: var(--pl-lime);
	color: #000000;
	border: none;
	padding: 14px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: opacity 0.15s;
	box-sizing: border-box;
}

.dd-pl-nl-submit:hover {
	opacity: 0.88;
}

.dd-pl-nl-note {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	color: var(--pl-muted);
	text-align: center;
	margin-top: 12px;
	display: block;
}


/* ════════════════════════════════════════════════════════════════
   11. PILLAR FOOTER MAP
   ════════════════════════════════════════════════════════════════ */

.dd-pl-footer {
	border-top: 1px solid var(--pl-border);
	margin-top: 52px;
	padding-top: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}

.dd-pl-footer-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pl-muted);
	flex-shrink: 0;
}

.dd-pl-footer-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.dd-pl-footer-pill {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	padding: 5px 12px;
	border: 1px solid var(--pl-border);
	color: var(--pl-muted);
	cursor: pointer;
	background: none;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	text-decoration: none;
	display: inline-block;
}

.dd-pl-footer-pill:hover {
	color: #ffffff;
	border-color: var(--pl-border-hi);
}

.dd-pl-footer-pill.is-active {
	background: var(--pl-lime);
	color: #000000;
	border-color: var(--pl-lime);
	font-weight: 700;
}

.dd-pl-footer-meta {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	color: var(--pl-muted);
	text-align: right;
}


/* ════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.dd-pl-hero {
		grid-template-columns: 1fr 400px;
	}

	/* Shrink image column proportionally on smaller desktops */
	.dd-pl-cover-row {
		grid-template-columns: 420px 1fr;
		min-height: 236px;
	}

	.dd-pl-card-img {
		min-height: 236px;
	}
}

@media (max-width: 768px) {

	/* Cover rows: stack image above text on mobile */
	.dd-pl-cover-row {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.dd-pl-card-img {
		min-height: 220px;
		height: 220px;
		aspect-ratio: 16 / 9;
	}

	.dd-pl-card-body {
		border-left: none;
		border-top: 1px solid var(--pl-border);
	}

	/* Hero: stack vertically */
	.dd-pl-hero {
		grid-template-columns: 1fr;
		min-height: auto;
		max-height: none;
	}

	.dd-pl-hero-visual {
		height: 280px;
		min-height: 280px;
	}

	.dd-pl-hero-panel {
		border-left: none;
		border-top: 1px solid var(--pl-border);
	}

	.dd-pl-hero-top {
		padding: 32px 28px 0;
	}

	.dd-pl-cta-row {
		margin-bottom: 32px;
	}

	/* Stats: keep 3 cols but reduce padding */
	.dd-pl-hero-stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.dd-pl-hero-stat {
		padding: 16px 14px;
	}

	.dd-pl-hero-stat-n {
		font-size: 1.3rem;
	}

	/* Body wrapper */
	.dd-pl-body {
		padding: 0 20px 60px;
	}

	/* Strip inner */
	.dd-pl-strip-inner {
		padding: 0 20px;
	}

	/* Cover: single column */
	.dd-pl-cover {
		grid-template-columns: 1fr;
	}

	.dd-pl-cover-main,
	.dd-pl-cover-sec-a,
	.dd-pl-cover-sec-b,
	.dd-pl-cover-stack {
		grid-column: auto;
		grid-row: auto;
		border-right: none;
	}

	.dd-pl-cover-main {
		border-bottom: 1px solid var(--pl-border);
	}

	.dd-pl-cover-sec-a {
		border-right: none;
	}

	.dd-pl-cover-sec-b {
		border-bottom: 1px solid var(--pl-border);
		border-right: none;
	}

	.dd-pl-cover-stack {
		border-top: 1px solid var(--pl-border);
	}

	/* Cluster grid: 2 cols */
	.dd-pl-cluster-grid {
		grid-template-columns: 1fr 1fr;
	}

	.dd-pl-cluster-card:nth-child(3n) {
		border-right: 1px solid var(--pl-border);
	}

	.dd-pl-cluster-card:nth-child(2n) {
		border-right: none;
	}

	.dd-pl-cluster-card:nth-last-child(-n+3) {
		border-bottom: 1px solid var(--pl-border);
	}

	.dd-pl-cluster-card:nth-last-child(-n+2) {
		border-bottom: none;
	}

	/* Editorial: collapse aside */
	.dd-pl-editorial {
		grid-template-columns: 60px 1fr;
	}

	.dd-pl-editorial-aside {
		display: none;
	}

	.dd-pl-editorial-body {
		border-right: none;
		padding: 32px 28px;
	}

	/* Newsletter: single column */
	.dd-pl-newsletter {
		grid-template-columns: 1fr;
	}

	.dd-pl-nl-left {
		border-right: none;
		border-bottom: 1px solid var(--pl-border);
		padding: 36px 28px;
	}

	.dd-pl-nl-right {
		padding: 36px 28px;
	}

	/* Cluster nav: allow wrap on very small screens */
	.dd-pl-cluster-nav {
		flex-wrap: wrap;
	}

	.dd-pl-cluster-tab {
		flex-basis: 50%;
		border-bottom: 1px solid var(--pl-border);
	}
}