/* ==========================================================================
   SeeThru Commercial Planner — 1:1 port of the Claude Design
   "Commercial Planner.html" (project 948b21b6) + assets/tokens.css.

   Everything is scoped under .lec-com so it out-specifies Rey's global
   element rules (`button[type=button]` etc., (0,1,1)) without !important —
   see the CSS SOP in the site CLAUDE.md. Design class names are kept
   verbatim (.app, .opt, .tier, .grid, .row, .field …); none of them collide
   with a top-level rule in rey/theme.css or elementor/frontend.css.
   ========================================================================== */

.lec-com {
	/* ---------- Color · Foundation (tokens.css) ---------- */
	--ink-1000: #000000;
	--ink-950: #0A0A0B;
	--ink-900: #101012;
	--ink-850: #161618;
	--ink-800: #1C1C1F;
	--ink-700: #26262A;
	--ink-600: #3A3A40;
	--ink-500: #5C5C63;
	--ink-400: #86868B;
	--ink-300: #B5B5BA;
	--ink-200: #D6D6D9;
	--ink-100: #ECECEE;
	--ink-50: #F5F5F7;
	--ink-0: #FFFFFF;

	--titanium: #C9B79C;
	--titanium-soft: #E4D6BD;
	--titanium-dark: #8E7D63;

	--signal-on: #4ADE80;
	--signal-warn: #F5A524;
	--signal-err: #EF4444;

	/* ---------- Typography ---------- */
	--font-display: 'Geist', 'Inter Tight', system-ui, sans-serif;
	--font-body: 'Geist', 'Inter', system-ui, sans-serif;
	--font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

	--fs-h1: clamp(32px, 3vw, 48px);
	--fs-h2: clamp(26px, 2.2vw, 36px);
	--fs-h3: 22px;
	--fs-h4: 18px;
	--fs-body-l: 19px;
	--fs-body: 16px;
	--fs-body-s: 14px;
	--fs-caption: 12px;
	--fs-eyebrow: 11px;

	--ls-display: -0.04em;
	--ls-tight: -0.02em;
	--ls-normal: 0;
	--ls-wide: 0.08em;
	--ls-eyebrow: 0.18em;

	--lh-display: 0.95;
	--lh-tight: 1.1;
	--lh-snug: 1.25;
	--lh-body: 1.55;
	--lh-loose: 1.7;

	--fw-thin: 200;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semi: 600;
	--fw-bold: 700;

	/* ---------- Spacing ---------- */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;
	--s-10: 128px;
	--s-11: 160px;
	--s-12: 200px;

	/* ---------- Layout ---------- */
	--container-w: 1280px;
	--gutter: max(24px, 4vw);

	--r-2: 4px;
	--r-3: 8px;
	--r-pill: 999px;
	--shadow-card: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 60px -20px rgba(0, 0, 0, .6);

	/* ---------- Motion ---------- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 180ms;
	--dur-base: 320ms;
	--dur-slow: 640ms;
	--dur-cinematic: 1200ms;

	/* An in-page anchor jump (#planner from a hero button or a shared link) lands
	   the root at viewport top, i.e. under the sticky site header. scroll-margin-top
	   applies the same offset the JS scrollToTop() subtracts. */
	scroll-margin-top: var(--com-scroll-offset, 130px);

	/* the planner paints its own dark surface */
	background: var(--ink-950);
	color: var(--ink-200);
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.lec-com *,
.lec-com *::before,
.lec-com *::after { box-sizing: border-box; }

.lec-com [hidden] { display: none !important; } /* design contract: [hidden] must beat display:flex/grid below */

.lec-com img,
.lec-com svg { display: block; max-width: 100%; }

.lec-com a { color: var(--ink-50); text-decoration: none; }
.lec-com a:hover { color: var(--ink-0); }

/* Rey styles every `button` globally (theme.css `.btn, button, button[type=button]`,
   (0,1,1)) — (0,2,0) here wins outright, no !important needed. */
.lec-com button {
	border: 0; background: none; color: inherit; font: inherit;
	text-align: left; padding: 0; cursor: pointer;
	border-radius: 0; box-shadow: none; text-transform: none;
	letter-spacing: normal; min-height: 0; line-height: inherit;
}

/* ---------- utilities carried over from tokens.css ---------- */
.lec-com .eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
	font-weight: var(--fw-medium);
	display: block;
}
.lec-com .mono { font-family: var(--font-mono); }

.lec-com .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 48px; padding: 0 24px;
	font-size: 14px; font-weight: var(--fw-medium); letter-spacing: 0.02em;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	transition: all var(--dur-base) var(--ease-out);
	white-space: nowrap;
	text-align: center;
}
.lec-com .btn-primary { background: var(--ink-50); color: var(--ink-950); }
.lec-com .btn-primary:hover { background: var(--ink-0); transform: translateY(-1px); }
.lec-com .btn-ghost { background: transparent; color: var(--ink-50); border-color: rgba(255, 255, 255, .18); }
.lec-com .btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .32); }
.lec-com .btn:disabled { cursor: default; opacity: .6; transform: none; }
.lec-com .btn.is-loading { opacity: .75; cursor: progress; }

/* ---------- header call link ----------
   The design's <header class="top"> also carries the site logo; inside an
   Elementor widget the site header already provides that, so only the
   "Talk to a specialist" call link is rendered here. */
.lec-com .top {
	display: flex; justify-content: flex-end; align-items: center;
	height: 72px; padding-inline: var(--gutter);
	max-width: var(--container-w); margin-inline: auto;
}
.lec-com .top__call { font-size: 13px; color: var(--ink-400); display: flex; gap: 10px; align-items: center; }
.lec-com .top__call b { font-weight: var(--fw-medium); color: var(--ink-200); }

.lec-com .wrap {
	max-width: var(--container-w); margin-inline: auto;
	/* breathing room above and below the tool — per-instance via the widget's
	   Spacing controls, which set --com-space-top / --com-space-bottom */
	padding: var(--com-space-top, var(--s-10)) var(--gutter) var(--com-space-bottom, var(--s-10));
}

/* ---------- the tool: one framed instrument, distinct from the page ---------- */
.lec-com .tool {
	background: var(--ink-850); border: 1px solid var(--ink-700);
	box-shadow: var(--shadow-card); border-radius: var(--r-3);
	overflow: hidden;
}
.lec-com .tool__head {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
	padding: 14px var(--s-6); border-bottom: 1px solid var(--ink-700); background: var(--ink-900);
}
.lec-com .tool__name {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--font-mono); font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-300);
}
.lec-com .tool__name::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: var(--titanium); box-shadow: 0 0 0 3px rgba(201, 183, 156, .18);
}
.lec-com .tool__meta {
	font-family: var(--font-mono); font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-500);
}
.lec-com .tool__body { padding: var(--s-7) var(--s-6) var(--s-8); }
.lec-com .tool__track { height: 3px; background: var(--ink-700); position: relative; }
.lec-com .tool__track span {
	position: absolute; inset: 0 auto 0 0; width: 0;
	background: var(--titanium); transition: width var(--dur-slow) var(--ease-out);
}

/* ==========================================================  screen 1  === */
.lec-com .head { max-width: 640px; margin-bottom: var(--s-7); }
.lec-com .head h1 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	font-weight: var(--fw-light);
	color: var(--ink-50);
	margin: var(--s-4) 0 var(--s-5);
	text-wrap: balance;
}
.lec-com .head p {
	font-size: var(--fs-body-l); color: var(--ink-400);
	margin: 0; max-width: 52ch; text-wrap: pretty;
}

.lec-com .apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
/* .app is a <button>, and Rey's global button rule sets align-items/justify-content
   to center. Without re-declaring them here the media span shrink-wraps to 0 width
   until its image happens to load, which in turn stops `loading=lazy` ever firing.
   Scoped re-declaration, not !important — see the CSS SOP. */
.lec-com .app {
	display: flex; flex-direction: column; gap: var(--s-4);
	align-items: stretch; justify-content: flex-start;
	position: relative; cursor: pointer; color: var(--ink-50); width: 100%;
}
.lec-com .app__media {
	display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--ink-900); border: 1px solid var(--ink-600);
}
.lec-com .app__media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-cinematic) var(--ease-out);
}
.lec-com .app:hover .app__media img { filter: grayscale(0); transform: scale(1.03); }
.lec-com .app:hover .app__media { border-color: var(--ink-500); }
.lec-com .app__body { display: flex; flex-direction: column; gap: 2px; padding-right: 32px; }
.lec-com .app__title { font-size: var(--fs-h4); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); color: var(--ink-50); }
.lec-com .app__desc { font-size: var(--fs-body-s); color: var(--ink-400); }
.lec-com .app__body::after {
	content: "\2192"; position: absolute; right: 0; bottom: 22px;
	color: var(--ink-500);
	transition: transform var(--dur-base) var(--ease-out), color var(--dur-base);
}
.lec-com .app:hover .app__body::after { transform: translateX(4px); color: var(--ink-50); }
.lec-com .app__note {
	position: absolute; top: 12px; left: 12px;
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: var(--ls-wide); text-transform: uppercase;
	color: var(--ink-950); background: var(--ink-50); padding: 5px 8px;
}
.lec-com .app:focus-visible { outline: 1px solid var(--ink-300); outline-offset: 6px; }

.lec-com .proof {
	display: flex; gap: var(--s-6); flex-wrap: wrap;
	margin: var(--s-8) 0 0; padding-top: var(--s-5);
	border-top: 1px solid var(--ink-700); list-style: none;
	font-family: var(--font-mono); font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-400);
}
.lec-com .proof li { margin: 0; }

/* residential escape hatch (plugin addition, hidden unless a URL is set) */
.lec-com .resi { margin: var(--s-5) 0 0; font-size: var(--fs-body-s); color: var(--ink-400); }
.lec-com .resi a { color: var(--ink-200); border-bottom: 1px solid var(--ink-600); }

/* ==========================================================  screen 2  === */
.lec-com .bar {
	display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
	padding-bottom: var(--s-5); border-bottom: 1px solid var(--ink-700);
	margin-bottom: var(--s-6); flex-wrap: wrap;
}
.lec-com .link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; color: var(--ink-400); cursor: pointer;
	transition: color var(--dur-fast);
}
.lec-com .link:hover { color: var(--ink-50); }

.lec-com .progress {
	display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0;
	font-family: var(--font-mono); font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.lec-com .progress button { color: var(--ink-500); cursor: pointer; padding: 6px 0; position: relative; }
.lec-com .progress button:disabled { cursor: default; }
.lec-com .progress .is-done button { color: var(--ink-300); }
.lec-com .progress .is-cur button { color: var(--ink-50); }
.lec-com .progress .is-cur button::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
	height: 1px; background: var(--ink-50);
}

.lec-com .grid {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--s-9); align-items: start;
}
.lec-com .stage-col { position: sticky; top: var(--s-6); }
.lec-com .stage {
	border: 1px solid var(--ink-700);
	background: linear-gradient(180deg, #0C0C0E 0%, #080809 100%);
	position: relative;
}
.lec-com .stage svg { display: block; width: 100%; height: auto; }
.lec-com .stage__legend {
	position: absolute; left: 14px; bottom: 12px;
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-500);
}
.lec-com .st-floor { stroke: var(--ink-700); stroke-width: 1; }
.lec-com .st-screen { fill: #08080A; }
.lec-com .st-frame { fill: none; stroke: var(--ink-300); stroke-width: 1; }
.lec-com .st-grid { stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.lec-com .st-tile { fill: #fff; }
.lec-com .st-dim { stroke: var(--ink-600); stroke-width: 1; }
.lec-com .st-label { fill: var(--ink-300); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.lec-com .st-person { fill: var(--ink-500); }

.lec-com .stats {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4);
	margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--ink-700);
}
.lec-com .stats div { display: flex; flex-direction: column; gap: 6px; }
.lec-com .stats dt {
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-500);
}
.lec-com .stats dd { margin: 0; font-size: var(--fs-body-s); color: var(--ink-100); font-variant-numeric: tabular-nums; }

/* ---------- question ---------- */
.lec-com .q__title {
	font-family: var(--font-display); font-size: var(--fs-h1);
	line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
	font-weight: var(--fw-light); color: var(--ink-50);
	margin: var(--s-3) 0 var(--s-3); text-wrap: balance;
}
.lec-com .q__sub { color: var(--ink-400); margin: 0 0 var(--s-5); font-size: var(--fs-body); max-width: 48ch; text-wrap: pretty; }

.lec-com .grp { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
/* <legend> inherits a solid white background from the theme's form styling, which
   rendered every question label on the Project step as grey text on a white block.
   The design has no background here. */
.lec-com .grp__label {
	font-family: var(--font-mono); font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide); text-transform: uppercase;
	color: var(--ink-400); padding: 0; margin-bottom: var(--s-3);
	background: transparent; border: 0; width: auto; float: none;
}
.lec-com .grp__label em { font-style: normal; color: var(--ink-500); text-transform: none; letter-spacing: 0; }

.lec-com .opts,
.lec-com .presets { display: flex; flex-direction: column; border-top: 1px solid var(--ink-700); }
.lec-com .opts--compact { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; border: 0; padding-top: 2px; }

/* Same Rey button collision as .app: `button` gets justify-content:center, so every
   option centres its own content and rows of differing text length read as alternating
   indents. The design has no justify-content (i.e. flex-start) — re-declare it. */
.lec-com .opt {
	display: flex; align-items: center; justify-content: flex-start;
	gap: var(--s-4); width: 100%; text-align: left;
	padding: 16px 4px; border-bottom: 1px solid var(--ink-700);
	cursor: pointer; color: var(--ink-200);
	transition: color var(--dur-fast), background var(--dur-fast);
}
.lec-com .opt__text { align-items: flex-start; text-align: left; }
.lec-com .opt:hover { color: var(--ink-50); }
.lec-com .opt.is-on { color: var(--ink-50); }
.lec-com .opt__mark {
	flex: none; width: 16px; height: 16px; border-radius: 50%;
	border: 1px solid var(--ink-500); position: relative;
	transition: border-color var(--dur-fast);
}
.lec-com .opt.is-on .opt__mark { border-color: var(--ink-50); }
.lec-com .opt.is-on .opt__mark::after {
	content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink-50);
}
.lec-com [role=checkbox] .opt__mark,
.lec-com [role=checkbox] .opt__mark::after { border-radius: 2px; }
.lec-com .opt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lec-com .opt__label { font-size: var(--fs-body); font-weight: var(--fw-medium); letter-spacing: -0.005em; }
.lec-com .opt__desc { font-size: var(--fs-body-s); color: var(--ink-400); }
/* right-aligned value on a single-line option (preset dimensions, viewing range) */
.lec-com .opt__value {
	margin-left: auto; padding-left: var(--s-4);
	font-size: var(--fs-body-s); color: var(--ink-400);
	font-variant-numeric: tabular-nums; white-space: nowrap;
	transition: color var(--dur-fast);
}
.lec-com .opt:hover .opt__value,
.lec-com .opt.is-on .opt__value { color: var(--ink-200); }
.lec-com .opts--compact .opt { width: auto; justify-content: center; border: 1px solid var(--ink-700); border-radius: var(--r-pill); padding: 10px 16px; gap: 0; }
.lec-com .opts--compact .opt__mark { display: none; }
.lec-com .opts--compact .opt__label { font-size: var(--fs-body-s); font-weight: var(--fw-regular); }
.lec-com .opts--compact .opt:hover { border-color: var(--ink-500); }
.lec-com .opts--compact .opt.is-on { border-color: var(--ink-50); background: var(--ink-50); color: var(--ink-950); }
.lec-com .opt__shape { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.lec-com .opt__shape span { display: block; border: 1px solid var(--ink-400); background: var(--ink-800); }
.lec-com .opt.is-on .opt__shape span { border-color: var(--ink-50); }
.lec-com .opt:focus-visible { outline: 1px solid var(--ink-300); outline-offset: -1px; }

/* ---------- sliders ---------- */
.lec-com .sliders { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
.lec-com .sl { display: flex; flex-direction: column; gap: 10px; }
.lec-com .sl__top { display: flex; justify-content: space-between; font-size: var(--fs-body-s); color: var(--ink-400); }
.lec-com .sl__val { font-variant-numeric: tabular-nums; color: var(--ink-100); }
.lec-com .sl__val b { font-weight: var(--fw-medium); }
/* (0,4,1) — the Elementor kit's `.elementor-kit-N input:not([type=button])` is (0,3,1)
   and was painting a filled, bordered box over the range input, burying the design's
   bare 1px track. Same collision already handled for the text fields below. */
.lec-com .sliders .sl input[type="range"] {
	-webkit-appearance: none; appearance: none; width: 100%; height: 20px;
	background: transparent; margin: 0; cursor: pointer; --fill: 50%;
	border: 0; padding: 0; box-shadow: none; outline: 0;
	min-height: 0; border-radius: 0;
}
.lec-com .sliders .sl input[type="range"]::-webkit-slider-runnable-track {
	height: 1px; background: linear-gradient(90deg, var(--ink-50) var(--fill), var(--ink-700) var(--fill));
}
.lec-com .sliders .sl input[type="range"]::-moz-range-track {
	height: 1px; background: linear-gradient(90deg, var(--ink-50) var(--fill), var(--ink-700) var(--fill));
}
.lec-com .sliders .sl input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
	background: var(--ink-850); border: 1px solid var(--ink-50); margin-top: -6.5px;
}
.lec-com .sliders .sl input[type="range"]::-moz-range-thumb {
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--ink-850); border: 1px solid var(--ink-50);
}
.lec-com .snap { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-500); margin: 0; letter-spacing: .02em; }

.lec-com .insight {
	margin: var(--s-5) 0 0; padding: var(--s-4) 0 0;
	border-top: 1px solid var(--ink-700);
	font-size: var(--fs-body-s); line-height: var(--lh-body);
	color: var(--ink-400); text-wrap: pretty;
}
.lec-com .insight b { color: var(--ink-100); font-weight: var(--fw-medium); }

.lec-com .nav {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
	margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--ink-700);
}
.lec-com .nav .btn-primary { min-width: 160px; justify-content: center; }
.lec-com .nav__count { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); color: var(--ink-500); }

/* teach instead of stonewall — Continue stays clickable, just dimmed */
.lec-com .btn-primary.is-pending { opacity: .7; }
.lec-com .grp.is-missing .opts,
.lec-com .grp.is-missing .presets { border-top-color: var(--ink-300); }
.lec-com .grp.is-missing .opt { border-bottom-color: var(--ink-500); }
.lec-com .grp__hint { margin: 0 0 var(--s-3); font-size: var(--fs-body-s); color: var(--ink-100); }
.lec-com .field__err { font-style: normal; font-size: var(--fs-caption); color: var(--signal-err); font-family: var(--font-body); }

/* ==============================================================  plan  === */
.lec-com .plan__title + .feedcheck, .lec-com .plan__title + .plan__price, .lec-com .plan__title + .tiers__note + .gate { margin-top: var(--s-5); }
.lec-com .plan__title {
	font-family: var(--font-display); font-size: var(--fs-h1);
	line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
	font-weight: var(--fw-light); color: var(--ink-50); margin: var(--s-3) 0 var(--s-2);
}
.lec-com .plan__sub { color: var(--ink-400); margin: 0 0 var(--s-5); font-size: var(--fs-body-s); }
/* Desktop keeps the two-column layout: drawing + spec on the left, plan and form on
   the right. Below 960px the grid collapses on its own, which is where "form directly
   under the resolution / pitch / weight row" actually applies. */

.lec-com .feedcheck {
	font-size: var(--fs-body-s); color: var(--ink-300);
	margin: 0 0 var(--s-4); padding: 10px 12px; border: 1px solid var(--ink-700);
}
.lec-com .feedcheck.is-warn { border-color: var(--ink-500); color: var(--ink-100); }

/* Direct child of .grid so it stacks last on mobile (after the form). On desktop the
   plan screen flattens the left column — stage, stats and why become grid items in
   column 1 with the panel spanning beside them — otherwise .why lands in grid row 2
   and leaves a tall void under the spec row. The flow screen keeps .stage-col intact
   so it can stay sticky while the questions scroll. */
.lec-com .why {
	margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--ink-700);
}
@media (min-width: 961px) {
	.lec-com.is-plan .grid { row-gap: var(--s-5); align-items: start; }
	.lec-com.is-plan .stage-col { display: contents; }
	.lec-com.is-plan .stage,
	.lec-com.is-plan .stats,
	.lec-com.is-plan .why { grid-column: 1; }
	.lec-com.is-plan .panel-col { grid-column: 2; grid-row: 1 / span 3; }
	.lec-com.is-plan .stats { margin-top: 0; }
}
.lec-com .why .grp__label { display: block; }
.lec-com .why ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lec-com .why li {
	font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--ink-400);
	padding-left: 18px; position: relative; text-wrap: pretty;
}
.lec-com .why li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--ink-500); }
.lec-com .why b { color: var(--ink-100); font-weight: var(--fw-medium); }

/* one recommended pitch, chosen by the model — the price is the only number the
   visitor needs here, so it gets a single quiet readout instead of a tier list */
.lec-com .plan__price {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
	margin: 0 0 var(--s-4); padding: var(--s-4) 0;
	border-top: 1px solid var(--ink-700); border-bottom: 1px solid var(--ink-700);
}
.lec-com .plan__price-label {
	font-family: var(--font-mono); font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-500);
}
.lec-com .plan__price-value {
	font-family: var(--font-display); font-size: var(--fs-h3);
	font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
	color: var(--ink-50); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lec-com .tiers { display: flex; flex-direction: column; border-top: 1px solid var(--ink-700); }
.lec-com .tier {
	display: grid; grid-template-columns: auto 1fr auto;
	grid-template-areas: "pitch meta price" "role meta price";
	column-gap: var(--s-5); align-items: center;
	padding: 18px 4px; border-bottom: 1px solid var(--ink-700);
	cursor: pointer; color: var(--ink-300); transition: color var(--dur-fast);
	width: 100%; text-align: left;
}
.lec-com .tier:hover,
.lec-com .tier.is-on { color: var(--ink-50); }
.lec-com .tier__pitch {
	grid-area: pitch; font-family: var(--font-display); font-size: 26px;
	font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
	color: var(--ink-50); line-height: 1; min-width: 88px;
}
.lec-com .tier__role {
	grid-area: role; font-family: var(--font-mono); font-size: 10px;
	letter-spacing: var(--ls-wide); text-transform: uppercase;
	color: var(--ink-500); margin-top: 8px;
}
.lec-com .tier--rec .tier__role { color: var(--titanium); }
.lec-com .tier__meta { grid-area: meta; font-size: var(--fs-body-s); line-height: 1.5; color: var(--ink-400); }
.lec-com .tier.is-on .tier__meta { color: var(--ink-300); }
.lec-com .tier__warn { color: var(--ink-100); }
.lec-com .tier__price {
	grid-area: price; font-size: var(--fs-body); font-variant-numeric: tabular-nums;
	color: var(--ink-100); white-space: nowrap; text-align: right;
	position: relative; padding-left: 26px;
}
.lec-com .tier__price::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ink-500);
}
.lec-com .tier.is-on .tier__price::before {
	border-color: var(--ink-50);
	background: radial-gradient(circle, var(--ink-50) 3.5px, transparent 4px);
}
.lec-com .tier:focus-visible { outline: 1px solid var(--ink-300); outline-offset: -1px; }
.lec-com .tiers__note { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-500); margin: var(--s-3) 0 0; letter-spacing: .02em; }
.lec-com .tiers--single .tier { cursor: default; }
.lec-com .tiers--single .tier__price { padding-left: 0; }
.lec-com .tiers--single .tier__price::before { display: none; }

.lec-com .trust {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
	margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--ink-700);
}
.lec-com .trust div { display: flex; flex-direction: column; gap: 6px; }
.lec-com .trust dt {
	font-family: var(--font-display); font-size: var(--fs-h3);
	font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
	color: var(--ink-50); line-height: 1;
}
.lec-com .trust dd { margin: 0; font-size: var(--fs-caption); color: var(--ink-400); }

/* ==============================================================  gate  === */
.lec-com .gate {
	margin-top: var(--s-5); padding: var(--s-5);
	background: var(--ink-900); border: 1px solid var(--ink-700);
}
.lec-com .gate .form .field input[name] { border-bottom-color: var(--ink-600); }
.lec-com .gate h3 {
	font-family: var(--font-display); font-size: var(--fs-h3);
	font-weight: var(--fw-medium); letter-spacing: var(--ls-tight);
	color: var(--ink-50); margin: 0 0 var(--s-2);
}
.lec-com .gate__lede { color: var(--ink-400); font-size: var(--fs-body-s); margin: 0 0 var(--s-5); max-width: 46ch; text-wrap: pretty; }

.lec-com .form { display: flex; flex-direction: column; gap: var(--s-4); }
.lec-com .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.lec-com .field { display: flex; flex-direction: column; gap: 8px; }
.lec-com .field > span {
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-500);
}

/* (0,4,1) — beats the Elementor kit's
   `.elementor-kit-N input:not([type=button]):not([type=submit])` at (0,3,1). */
.lec-com .form .field input[name] {
	height: 46px; padding: 0; border: 0;
	border-bottom: 1px solid var(--ink-600);
	background: transparent; color: var(--ink-50);
	font: inherit; font-size: var(--fs-body);
	outline: 0; border-radius: 0; box-shadow: none;
	transition: border-color var(--dur-fast);
	width: 100%;
}
.lec-com .form .field input[name]::placeholder { color: var(--ink-500); opacity: 1; }
.lec-com .form .field input[name]:focus { border-color: var(--ink-50); background: transparent; color: var(--ink-50); }
.lec-com .form .field input[name].is-bad { border-color: var(--signal-err); }

.lec-com .form .btn { justify-content: center; width: 100%; height: 52px; }
.lec-com .msg { margin: 0; font-size: var(--fs-body-s); color: var(--signal-err); min-height: 1em; }
.lec-com .legal { margin: 0; font-size: var(--fs-caption); color: var(--ink-500); line-height: 1.5; text-wrap: pretty; }
.lec-com .legal a { color: var(--ink-300); border-bottom: 1px solid var(--ink-600); }

/* ===========================================================  success  === */
.lec-com .success { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--ink-700); }
.lec-com .success h3 {
	font-family: var(--font-display); font-size: var(--fs-h2);
	font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
	color: var(--ink-50); margin: 0 0 var(--s-3);
}
.lec-com .success p { color: var(--ink-400); margin: 0 0 var(--s-5); max-width: 48ch; }
.lec-com .success b { color: var(--ink-100); font-weight: var(--fw-medium); }
.lec-com .next {
	margin: 0 0 var(--s-6); padding: 0; list-style: none; counter-reset: n;
	display: flex; flex-direction: column; border-top: 1px solid var(--ink-700);
}
.lec-com .next li {
	counter-increment: n; display: flex; gap: var(--s-4);
	padding: 14px 0; border-bottom: 1px solid var(--ink-700);
	font-size: var(--fs-body-s); color: var(--ink-300);
}
.lec-com .next li::before {
	content: "0" counter(n); font-family: var(--font-mono);
	font-size: var(--fs-eyebrow); color: var(--ink-500);
	letter-spacing: var(--ls-wide); padding-top: 3px;
}
.lec-com .success__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.lec-com .plan__foot {
	display: flex; justify-content: space-between; gap: var(--s-4);
	margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--ink-700);
}

/* ---------- sticky CTA (plugin addition — off unless enabled) ---------- */
.lec-com .com-sticky {
	position: fixed; z-index: 90; right: 20px; bottom: 20px;
	display: inline-flex; align-items: center; gap: 10px;
	height: 48px; padding: 0 24px; border-radius: var(--r-pill);
	background: var(--ink-50); color: var(--ink-950);
	font-size: 14px; font-weight: var(--fw-medium);
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
	transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lec-com .com-sticky.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
.lec-com .com-sticky--left { right: auto; left: 20px; }
.lec-com .com-sticky--center { right: auto; left: 50%; transform: translateX(-50%); }
.lec-com .com-sticky--center.is-hidden { transform: translateX(-50%) translateY(8px); }

/* ========================================================  responsive  === */
@media (max-width: 960px) {
	.lec-com .grid { grid-template-columns: 1fr; gap: var(--s-7); }

	.lec-com .stage-col { position: static; }
	.lec-com .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lec-com .tool__body { padding: var(--s-6) var(--s-5) var(--s-7); }
}
@media (max-width: 600px) {
	/* Phones scale the configured space down. The top gets a harder cut than the
	   bottom — screen height is the scarce resource, and every pixel above the tool
	   pushes the first question further out of the fold. */
	.lec-com .wrap {
		padding-top: calc(var(--com-space-top, 128px) * .28);
		padding-bottom: calc(var(--com-space-bottom, 128px) * .5);
		padding-inline: var(--s-3);
	}
	.lec-com .tool { border-radius: var(--r-2); }
	.lec-com .tool__body { padding: var(--s-5) var(--s-4) var(--s-6); }
	.lec-com .tool__head { padding: 12px var(--s-4); }
	/* The updated design stacks these one-up. Kept two-up per the brief that as much
	   of the tool as possible sits in the fold: six cards one-up is ~6 screens, two-up
	   is ~1.5. Type and padding tighten to suit. */
	.lec-com .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
	.lec-com .app { gap: var(--s-3); }
	.lec-com .app__title { font-size: 15px; line-height: 1.3; }
	.lec-com .app__desc { font-size: 12px; line-height: 1.35; }
	.lec-com .app__body { padding-right: 18px; }
	.lec-com .app__body::after { bottom: auto; top: 2px; }
	.lec-com .app__note { top: 8px; left: 8px; padding: 4px 6px; font-size: 9px; }
	/* cabinets / area / weight are not needed on a phone, and the gated
	   resolution + pitch already read out on each tier row of the plan */
	.lec-com .stats { display: none; }
	.lec-com .row { grid-template-columns: 1fr; }
	.lec-com .tier {
		grid-template-columns: auto 1fr;
		grid-template-areas: "pitch price" "role price" "meta meta";
	}
	.lec-com .tier__meta { margin-top: 10px; }
	.lec-com .progress { display: none; }
	.lec-com .top__call span { display: none; }
	.lec-com .nav .btn-primary { min-width: 0; flex: 1 1 auto; }
	.lec-com .gate { padding: var(--s-5) var(--s-4); margin-inline: calc(var(--s-4) * -1); }
	/* the drawing sits directly above the question on a phone — 48px of grid gap plus
	   the heading's own top margin pushed it too far down */
	.lec-com .grid { gap: var(--s-5); }
	.lec-com .q__title { margin-top: 0; }
	.lec-com .bar { margin-bottom: var(--s-5); padding-bottom: var(--s-4); }
	.lec-com .plan__price { flex-direction: column; align-items: flex-start; gap: 4px; }
	.lec-com .trust { grid-template-columns: 1fr 1fr; }

}

@media (prefers-reduced-motion: reduce) {
	.lec-com *, .lec-com *::before, .lec-com *::after {
		transition-duration: .01ms !important; /* accessibility override — intentional */
		animation-duration: .01ms !important;
	}
}