/*
 * EFLL Site Design: V2 calculator feature band (Oct 8, 2026). Loaded only when V2 is active.
 * Markup: includes/v2-feature.php (efll_sd_v2_feature_post).
 *
 *   section.ei-sec.ei-sec--{light|paper}.ei-feature.ei-feature--{wage|wc}   (keeps its surface)
 *     .ei-wrap > .ei-feature-panel            deep navy plate, gold hairline frame + corner marks
 *       .ei-feature-copy                       [.ei-feature-tag] + the page's own text + button row
 *       .ei-feature-visual                     inline SVG calculator + tape (aria-hidden)
 *         .ei-feature-seal > figure.ei-media--icon (the page's own icon, toned gold)
 *
 * Every rule is scoped body.efll-sd.efll-v2 .efll-inner .ei-feature (0-5-1+), above inner.css
 * component rules (0-3-1 .. 0-6-2) and v2-site.css measure rules (0-4-1+).
 */

body.efll-sd.efll-v2 .efll-inner .ei-feature {
	--eif-gold: #d4a72c;
	--eif-gold-hi: #e6c25a;
	--eif-night: #08111d;
	--eif-ink: #0e1a2b;
	--eif-abyss: #050b14;
	padding-block: 64px;
	overflow: visible;
}
@media (min-width: 1024px) {
	body.efll-sd.efll-v2 .efll-inner .ei-feature { padding-block: 96px; }
}

/* ---------------------------------------------------------------- the plate */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-panel {
	/* dark surface tokens for everything inside (same values as inner.css dark surfaces) */
	--ei-bg: #0e1a2b;
	--ei-fg: #d9e0ea;
	--ei-head: #ffffff;
	--ei-muted: #9fb0c6;
	--ei-eyebrow: #e6c25a;
	--ei-accent: #d4a72c;
	--ei-link: #ffffff;
	--ei-link-hover: #e6c25a;
	--ei-line: #1c2b40;
	--ei-rule: rgba(212, 167, 44, .5);
	--ei-focus: #ffffff;

	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0 24px 40px;
	border-radius: 2px;
	color: var(--ei-fg);
	background:
		radial-gradient(60% 70% at 50% 18%, rgba(212, 167, 44, .16), rgba(212, 167, 44, 0) 70%),
		linear-gradient(165deg, #12223a 0%, #0b1626 45%, #050b14 100%);
	box-shadow:
		0 1px 0 rgba(230, 194, 90, .35) inset,
		0 40px 80px -36px rgba(5, 11, 20, .65),
		0 18px 36px -24px rgba(5, 11, 20, .5);
}
/* gold hairline frame, inset like a certificate border */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-panel::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 10px;
	border: 1px solid rgba(212, 167, 44, .42);
	pointer-events: none;
	/* faint ledger ruling inside the frame */
	background: repeating-linear-gradient(180deg, rgba(217, 224, 234, 0) 0 31px, rgba(217, 224, 234, .035) 31px 32px);
}
/* corner marks (the site's framed-icon motif), top-left and bottom-right */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-panel::after {
	content: "";
	position: absolute;
	inset: 4px;
	pointer-events: none;
	background:
		linear-gradient(var(--eif-gold), var(--eif-gold)) left top / 26px 2px no-repeat,
		linear-gradient(var(--eif-gold), var(--eif-gold)) left top / 2px 26px no-repeat,
		linear-gradient(var(--eif-gold), var(--eif-gold)) right bottom / 26px 2px no-repeat,
		linear-gradient(var(--eif-gold), var(--eif-gold)) right bottom / 2px 26px no-repeat;
}

/* ---------------------------------------------------------------- visual (phones: on top, rising out of the plate) */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-visual {
	position: relative;
	order: -1;
	justify-self: center;
	width: min(184px, 54vw);
	margin: -40px 0 4px;
	line-height: 0;
	pointer-events: none;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-art {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 24px 30px rgba(5, 11, 20, .55));
}

/* SVG parts */
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-sheet-body { stroke: rgba(122, 90, 12, .35); stroke-width: 1; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-ink { fill: none; stroke: #6b7a8f; stroke-width: 2; stroke-linecap: round; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-ink .eif-faint { stroke: #9aa6b6; stroke-width: 2; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-tick { fill: none; stroke: #9c7411; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-shadow { fill: rgba(3, 7, 13, .55); }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-body { stroke: rgba(230, 194, 90, .85); stroke-width: 1.5; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-bezel { fill: none; stroke: rgba(212, 167, 44, .28); stroke-width: 1; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-screen { fill: #050b14; stroke: rgba(212, 167, 44, .45); stroke-width: 1; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-screen-rule { stroke: rgba(212, 167, 44, .35); stroke-width: 1; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-bar { fill: rgba(212, 167, 44, .38); }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-bar--hi { fill: var(--eif-gold-hi); }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-caret { fill: var(--eif-gold-hi); }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-key { fill: rgba(255, 255, 255, .025); stroke: rgba(212, 167, 44, .38); stroke-width: 1; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-key--op { fill: rgba(212, 167, 44, .1); stroke: rgba(212, 167, 44, .6); }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-key--eq { fill: var(--eif-gold); stroke: var(--eif-gold-hi); }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-dot { fill: rgba(217, 224, 234, .4); }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-glyph { fill: none; stroke: var(--eif-gold-hi); stroke-width: 2; stroke-linecap: round; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-glyph-dark { fill: none; stroke: var(--eif-night); stroke-width: 2.4; stroke-linecap: round; }

/* the page's own icon, set as a gold seal on the calculator's lower-left corner */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-seal {
	position: absolute;
	left: -15%;
	bottom: 3%;
	display: grid;
	place-items: center;
	width: 31%;
	aspect-ratio: 1;
	border: 1px solid rgba(230, 194, 90, .85);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #16283f, #08111d 70%);
	box-shadow: 0 0 0 5px #08111d, 0 0 0 6px rgba(212, 167, 44, .35), 0 14px 28px rgba(3, 7, 13, .6);
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-seal .ei-media.ei-media--icon {
	position: relative;
	display: block;
	width: 58%;
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-seal .ei-media.ei-media--icon::before { content: none; display: none; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-seal .ei-media.ei-media--icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
	/* badge / unclassified icon: keep its drawing, tone it to brand gold (no orange survives) */
	filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(3deg) brightness(1.04);
}
/* one-colour line icon: redrawn from its own shape in gold (inner.css supplies --ei-icon + mask) */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-seal .ei-media.ei-media--icon.ei-icon--mono img { opacity: 0; filter: none; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-seal .ei-media.ei-media--icon.ei-icon--mono::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--eif-gold-hi);
	-webkit-mask: var(--ei-icon) center / contain no-repeat;
	mask: var(--ei-icon) center / contain no-repeat;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-visual--plain .ei-feature-seal { display: none; }

/* ---------------------------------------------------------------- copy */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-copy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	text-align: left;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-copy > * { margin: 0; max-width: none; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-copy > * + * { margin-top: 18px; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-copy > .ei-actions { margin-top: 30px; width: 100%; }

body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-tag {
	display: block;
	line-height: 1;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-tag > span {
	display: inline-block;
	padding: 7px 12px 6px;
	border: 1px solid rgba(230, 194, 90, .7);
	border-radius: 2px;
	background: rgba(212, 167, 44, .1);
	color: var(--eif-gold-hi);
	font-family: var(--ei-cond);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
}

body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-prose.ei-feature-text {
	max-width: none;
	color: var(--ei-fg);
	font-size: 17px;
	line-height: 1.65;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-text > * { margin: 0; max-width: 36em; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-text > * + * { margin-top: 1em; }
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-text p { color: #c9d3e0; }

/* eyebrow: the page's own lead-in heading, gold condensed caps with a short rule */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-text .ei-feature-eyebrow,
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-text.ei-feature-eyebrow {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 40em;
	color: var(--eif-gold-hi);
	font-family: var(--ei-cond);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-wrap: balance;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-eyebrow::before {
	content: "";
	flex: none;
	width: 32px;
	height: 1px;
	margin-top: .72em;
	background: currentColor;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-text .ei-feature-eyebrow + * { margin-top: 18px; }

/* title: the page's own h2/h3, at feature scale */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-title {
	max-width: 16ch;
	color: #ffffff;
	font-family: var(--ei-display);
	font-weight: 700;
	font-size: clamp(30px, 7.6vw, 40px);
	line-height: 1.08;
	letter-spacing: .005em;
	text-transform: none;
	text-wrap: balance;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-title + * { margin-top: 20px; }

/* the strong lede line ("Other lawyers won't tell you ...") */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-text .ei-lede-strong {
	color: #ffffff;
	font-weight: 600;
	font-size: 1.06em;
	line-height: 1.5;
}

/* ---------------------------------------------------------------- the button */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-actions { gap: 14px; }
body.efll-sd.efll-v2 .efll-inner .ei-feature a.ei-btn.ei-feature-btn {
	position: relative;
	flex: 1 1 100%;
	min-height: 58px;
	padding: 16px 18px;
	border-color: var(--eif-gold-hi);
	background: linear-gradient(180deg, #e6c25a 0%, #d4a72c 100%);
	color: var(--eif-night);
	font-size: 16px;
	letter-spacing: .1em;
	box-shadow: 0 0 0 1px rgba(8, 17, 29, .6) inset, 0 14px 34px -12px rgba(212, 167, 44, .65);
	transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
body.efll-sd.efll-v2 .efll-inner .ei-feature a.ei-btn.ei-feature-btn:hover {
	background: linear-gradient(180deg, #f0d27a 0%, #e6c25a 100%);
	color: var(--eif-night);
	box-shadow: 0 0 0 1px rgba(8, 17, 29, .6) inset, 0 18px 44px -12px rgba(230, 194, 90, .8);
	transform: translateY(-1px);
}
body.efll-sd.efll-v2 .efll-inner .ei-feature a.ei-btn.ei-feature-btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(212, 167, 44, .6);
}
/* any other link in the row keeps the light ghost look on the plate */
body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-actions > a:not(.ei-feature-btn) { color: #ffffff; }

/* ---------------------------------------------------------------- tablet and up: side by side */
@media (min-width: 768px) {
	body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-panel {
		grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
		align-items: center;
		gap: clamp(32px, 5vw, 80px);
		padding: clamp(48px, 6vw, 84px) clamp(40px, 6vw, 88px);
		background:
			radial-gradient(42% 75% at 82% 50%, rgba(212, 167, 44, .17), rgba(212, 167, 44, 0) 70%),
			linear-gradient(115deg, #0b1626 0%, #0e1a2b 40%, #12223a 70%, #08111d 100%);
	}
	body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-visual {
		order: 0;
		width: 100%;
		max-width: 330px;
		justify-self: end;
		/* the tape rises out through the plate's top edge */
		margin: calc(-1 * clamp(48px, 6vw, 84px) - 46px) 0 calc(-1 * clamp(48px, 6vw, 84px) + 6px);
		align-self: start;
	}
	body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-title { font-size: clamp(32px, 3.9vw, 50px); }
	body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-prose.ei-feature-text { font-size: 18px; }
	body.efll-sd.efll-v2 .efll-inner .ei-feature a.ei-btn.ei-feature-btn { flex: 0 1 auto; padding-inline: 36px; font-size: 18px; letter-spacing: .14em; }
}
@media (min-width: 1200px) {
	body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-visual { max-width: 352px; margin-right: 8px; }
}

/* ---------------------------------------------------------------- one motion moment: the tape prints as the band scrolls in */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		body.efll-sd.efll-v2 .efll-inner .ei-feature .eif-sheet-in {
			animation: eif-print linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 45%;
		}
	}
}
@keyframes eif-print {
	from { transform: translateY(64px); }
	to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	body.efll-sd.efll-v2 .efll-inner .ei-feature a.ei-btn.ei-feature-btn { transition: none; }
	body.efll-sd.efll-v2 .efll-inner .ei-feature a.ei-btn.ei-feature-btn:hover { transform: none; }
}

/* ---------------------------------------------------------------- print: plain block */
@media print {
	body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-panel { background: #ffffff; box-shadow: none; color: #000000; }
	body.efll-sd.efll-v2 .efll-inner .ei-feature .ei-feature-visual { display: none; }
	body.efll-sd.efll-v2 .efll-inner .ei-feature :is(.ei-feature-title, .ei-feature-text p, .ei-feature-eyebrow) { color: #000000; }
}