/* ==========================================================================
   LLC Delusion Calculator — Porcelain
   Tokens taken directly from the source design file, not approximated.
   ========================================================================== */

.dlp {
	--ink: #171A21;
	--ink-2: #3D4552;
	--muted: #5B6474;
	--dim: #8A93A4;
	--dim-2: #9AA2B1;
	--porcelain: #F1F3F7;
	--surface: #fff;
	--surface-2: #F4F6F8;
	--surface-3: #EDEFF4;
	--line: #E9ECF2;
	--line-2: #DDE1E9;
	--accent: #4B45C6;
	--accent-d: #3B35B5;
	--accent-ink: #2E2A86;
	--accent-soft: #EEEDFB;
	--r-card: 20px;
	--r-ctrl: 11px;
	--r-pill: 999px;
	--shadow: 0 1px 2px rgba(23,26,33,.04), 0 14px 34px -26px rgba(23,26,33,.4);
	--shadow-knob: 0 2px 8px rgba(23,26,33,.16);
	--shadow-seg: 0 1px 3px rgba(23,26,33,.14);
	--font: 'Space Grotesk', system-ui, -apple-system, sans-serif;

	font-family: var(--font);
	color: var(--ink);
	background: var(--porcelain);
	padding: 40px 28px 28px;
	border-radius: 24px;
	line-height: 1.5;
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
}

.dlp *, .dlp *::before, .dlp *::after { box-sizing: inherit; }
.dlp button { font-family: inherit; }

/* ---------- header ---------- */

.dlp-kicker {
	display: inline-block;
	padding: 7px 15px;
	border-radius: var(--r-pill);
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 18px;
}

.dlp-h1 {
	font-size: clamp(34px, 6vw, 58px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 0 0 14px;
	color: var(--ink);
}

.dlp-lede {
	font-size: clamp(15px, 2vw, 18px);
	color: var(--muted);
	margin: 0 0 30px;
	max-width: 52ch;
}

.dlp-admin-warn {
	background: #FFF8E6; border: 1px solid #F3E2B4; color: #7A5B12;
	padding: 11px 14px; border-radius: var(--r-ctrl); font-size: 13.5px; margin: 0 0 20px;
}

/* ---------- cards ---------- */

.dlp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 22px;
}

.dlp-card {
	/* the sticky CTA overlays the bottom of the viewport, so any card scrolled
	   into view must clear it or its slider cannot be reached */
	scroll-margin-bottom: 150px;
	background: var(--surface);
	border-radius: var(--r-card);
	padding: 22px;
	box-shadow: var(--shadow);
	min-width: 0;
}

.dlp-card-hd {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.dlp-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
}

.dlp-big {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	margin-top: 12px;
}

.dlp-keep {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--accent-ink);
	background: var(--accent-soft);
	padding: 7px 11px;
	border-radius: var(--r-pill);
	white-space: nowrap;
	transition: background .18s, color .18s;
}

/* ---------- segmented controls ---------- */

.dlp-seg, .dlp-unit {
	position: relative;
	display: flex;
	background: var(--porcelain);
	border-radius: 14px;
	padding: 4px;
}

.dlp-seg-pill {
	position: absolute;
	top: 4px; bottom: 4px;
	border-radius: var(--r-ctrl);
	background: var(--surface);
	box-shadow: var(--shadow-seg);
	transition: left .18s cubic-bezier(.4,0,.2,1), width .18s cubic-bezier(.4,0,.2,1);
	width: calc(50% - 2px);
	left: 4px;
	pointer-events: none;
}

.dlp-seg-3 .dlp-seg-pill { width: calc(33.333% - 2px); }
.dlp-seg-4 .dlp-seg-pill { width: calc(25% - 2px); }

.dlp-seg-btn {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 46px;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border-radius: var(--r-ctrl);
	padding: 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .18s;
	-webkit-tap-highlight-color: transparent;
}

.dlp-seg-4 .dlp-seg-btn, .dlp-seg-3 .dlp-seg-btn { font-size: 13px; }
.dlp-seg-btn.is-on { font-weight: 600; }
.dlp-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dlp-unit { width: 112px; flex-shrink: 0; }
.dlp-unit .dlp-seg-btn { height: 44px; font-size: 13px; }
.dlp-unit .dlp-seg-pill { top: 4px; bottom: 4px; }

/* ---------- select ---------- */

.dlp-selwrap { position: relative; }

.dlp-select {
	width: 100%;
	height: 54px;
	padding: 0 44px 0 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	background: var(--porcelain);
	border: 0;
	border-radius: 14px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.dlp-select:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dlp-caret {
	position: absolute;
	right: 16px; top: 50%;
	transform: translateY(-50%);
	color: var(--dim);
	pointer-events: none;
}

/* ---------- sliders ---------- */

.dlp-single, .dlp-dual {
	position: relative;
	height: 46px;
	margin-top: 8px;
	touch-action: none;
}

.dlp-rail {
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 8px;
	margin-top: -4px;
	border-radius: var(--r-pill);
	background: var(--line);
	pointer-events: none;
}

.dlp-rail-fill {
	position: absolute;
	top: 50%;
	height: 8px;
	margin-top: -4px;
	border-radius: var(--r-pill);
	background: var(--accent);
	pointer-events: none;
	left: 0;
	width: 0;
}

/* native range inputs carry the interaction, so keyboard and touch both work */
.dlp-single input[type=range], .dlp-dual input[type=range] {
	position: absolute;
	left: 0; right: 0; top: 0;
	width: 100%;
	height: 46px;
	margin: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.dlp-single input[type=range] { pointer-events: auto; }

.dlp-single input[type=range]::-webkit-slider-thumb,
.dlp-dual input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--surface);
	border: 2.5px solid var(--accent);
	box-shadow: var(--shadow-knob);
	cursor: grab;
	transition: transform .1s;
}

.dlp-single input[type=range]::-moz-range-thumb,
.dlp-dual input[type=range]::-moz-range-thumb {
	pointer-events: auto;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--surface);
	border: 2.5px solid var(--accent);
	box-shadow: var(--shadow-knob);
	cursor: grab;
}

.dlp-single input[type=range]::-webkit-slider-thumb:active,
.dlp-dual input[type=range]::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }

.dlp-single input[type=range]:focus-visible::-webkit-slider-thumb,
.dlp-dual input[type=range]:focus-visible::-webkit-slider-thumb {
	outline: 3px solid var(--accent-soft); outline-offset: 2px;
}

.dlp-ends {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--dim-2);
	margin-top: 2px;
}

.dlp-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}

.dlp-muted { font-size: 12.5px; color: var(--dim-2); }
.dlp-hint { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }

/* ---------- under bar + sticky CTA ---------- */

.dlp-underbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 26px;
}

.dlp-fineprint { font-size: 13px; line-height: 1.65; color: var(--dim-2); margin: 0; }
.dlp-center { text-align: center; max-width: 62ch; margin: 22px auto; }

.dlp-reset {
	flex-shrink: 0;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--surface);
	box-shadow: var(--shadow);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
}

.dlp-reset:hover { color: var(--accent); }

.dlp-stickybar {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0 6px;
	/* solid, so the bar's own text never has page content showing through it.
	   the fade is a separate strip above the bar. */
	background: var(--porcelain);
	z-index: 5;
}

.dlp-stickybar::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 100%;
	height: 26px;
	background: linear-gradient(to bottom, rgba(241,243,247,0), var(--porcelain));
	pointer-events: none;
}

.dlp-applied-n { font-size: 15px; font-weight: 500; margin-top: 4px; }

.dlp-cta {
	flex: 0 1 560px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 60px;
	padding: 0 28px;
	border: 0;
	border-radius: 16px;
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, transform .08s;
}

.dlp-cta:hover { background: var(--accent-d); color: #fff; }
.dlp-cta:active { transform: scale(.995); }
.dlp-cta:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

.dlp-cta-ghost {
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow);
}

.dlp-cta-ghost:hover { background: var(--surface); color: var(--accent); }

/* ---------- result ---------- */

.dlp-res { padding-top: 28px; }

.dlp-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	padding: 0 18px;
	border-radius: var(--r-pill);
	background: var(--surface);
	box-shadow: var(--shadow);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	margin-bottom: 20px;
}

.dlp-back:hover { color: var(--accent); }

.dlp-hero { padding: 30px 30px 26px; margin-bottom: 18px; }

.dlp-hero-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 6px 0 22px;
}

.dlp-huge {
	font-size: clamp(64px, 13vw, 116px);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: .92;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.dlp-huge span { font-size: .38em; color: var(--dim-2); letter-spacing: -0.02em; }

.dlp-zone {
	display: inline-block;
	padding: 9px 17px;
	border-radius: var(--r-pill);
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-size: 15px;
	font-weight: 600;
}

.dlp-zone-sub { font-size: 16px; color: var(--muted); margin: 12px 0 0; }

.dlp-scale { position: relative; margin: 4px 0 18px; }

.dlp-scale-rail { height: 8px; border-radius: var(--r-pill); background: var(--line); }

.dlp-scale-dot {
	position: absolute;
	top: 50%;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: var(--shadow-knob);
}

.dlp-scale-ticks {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--dim-2);
	margin-top: 10px;
}

.dlp-hero-line { font-size: 14.5px; color: var(--muted); margin: 0; }

.dlp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.dlp-stat { padding: 20px 22px; }
.dlp-stat-v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.dlp-stat-sm { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.dlp-stat-note { display: block; font-size: 12.5px; color: var(--dim-2); margin-top: 6px; }

.dlp-card-sub { font-size: 13.5px; color: var(--dim-2); margin: 10px 0 22px; line-height: 1.6; max-width: 60ch; }

.dlp-barrow { margin-bottom: 18px; }
.dlp-barrow:last-child { margin-bottom: 0; }

.dlp-barrow-hd {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 14.5px;
	margin-bottom: 8px;
}

.dlp-barrow-hd strong { font-weight: 600; font-variant-numeric: tabular-nums; }

.dlp-bar { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.dlp-bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }

.dlp-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.dlp-chip {
	padding: 9px 15px;
	border-radius: var(--r-pill);
	background: var(--surface-3);
	font-size: 13.5px;
	color: var(--ink-2);
}

.dlp-res-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.dlp-res-actions .dlp-cta { flex: 1; width: 100%; }

.dlp-empty { text-align: center; color: var(--muted); padding: 50px 20px; font-size: 16px; }

/* ---------- responsive ---------- */

@media (min-width: 1600px) {
	.dlp { max-width: 1280px; padding: 48px 40px 32px; }
	.dlp-grid { gap: 20px; }
}

@media (max-width: 980px) {
	.dlp-grid { grid-template-columns: repeat(2, 1fr); }
	.dlp-stats { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	/* tuned for the 384-414px devices that make up most of the traffic.
	   v1.0.0 ran to 2.4 screens of scrolling on a 393x852 phone; the cards
	   carrying a single control do not need desktop padding. */
	.dlp { padding: 22px 14px 16px; border-radius: 0; }
	.dlp-grid { grid-template-columns: 1fr; gap: 10px; }
	.dlp-card { padding: 15px 16px; border-radius: 16px; }
	.dlp-h1 { font-size: 34px; margin-bottom: 10px; }
	.dlp-lede { font-size: 15px; margin-bottom: 20px; }
	.dlp-kicker { margin-bottom: 14px; padding: 6px 13px; font-size: 12.5px; }
	.dlp-card-hd { margin-bottom: 10px; }
	.dlp-big { font-size: 26px; margin-top: 9px; }
	.dlp-seg-btn { height: 44px; }
	.dlp-single, .dlp-dual { height: 42px; margin-top: 4px; }
	.dlp-ends { margin-top: 0; }
	.dlp-foot { margin-top: 8px; }
	.dlp-hint { margin-top: 9px; }
	/* the sticky bar sits over the page, so keep the last card clear of it */
	.dlp-underbar { margin-bottom: 12px; }
	.dlp-hero { padding: 20px 16px 18px; }
	.dlp-stats { gap: 10px; }
	.dlp-stat { padding: 15px 16px; }
	.dlp-stat-v { font-size: 26px; margin-top: 7px; }
	.dlp-stat-sm { font-size: 17px; }
	.dlp-card-sub { margin-bottom: 16px; }
	.dlp-barrow { margin-bottom: 14px; }
	.dlp-back { margin-bottom: 14px; }
	.dlp-zone-sub { font-size: 15px; margin-top: 9px; }
	.dlp-underbar { flex-direction: column; align-items: stretch; gap: 14px; }
	.dlp-reset { width: 100%; }
	.dlp-stickybar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 12px 14px 10px;
		margin: 0 -14px;
		background: var(--porcelain);
	}
	.dlp-stickybar::before { height: 22px; }
	.dlp-applied-n { font-size: 14px; margin-top: 2px; }
	.dlp-cta { flex: 1 1 auto; width: 100%; height: 56px; font-size: 16px; }
	.dlp-res-actions { grid-template-columns: 1fr; }
	.dlp-hero-row { gap: 6px 18px; }
	.dlp-barrow-hd { font-size: 13.5px; }
}

@media (max-width: 380px) {
	.dlp { padding: 22px 12px 16px; }
	.dlp-card { padding: 16px; }
	.dlp-seg-4 .dlp-seg-btn, .dlp-seg-3 .dlp-seg-btn { font-size: 12px; padding: 0 4px; }
	.dlp-chip { font-size: 12.5px; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.dlp *, .dlp *::before, .dlp *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}