/* ================================================================
   LEC — Guided Wizard skin (frontend)
   Dark editorial four-step wizard matching the SeeThru "Worship v2"
   landing design. Self-contained — every rule scoped to .lec-wor.
   Tokens are duplicated from the design system so this plugin stays
   portable (no theme dependency).
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

.lec-wor{
	--ink-1000:#000;--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;
	--signal-on:#4ADE80;--signal-err:#EF4444;
	--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;
	--fw-medium:500;--fw-semi:600;
	--ls-wide:0.08em;--ls-eyebrow:0.18em;
	--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-11:160px;
	--container:1440px;--gutter:max(24px,4vw);
	--r-pill:999px;--w2-r-s:12px;
	--ease-out:cubic-bezier(0.16,1,0.3,1);--dur-fast:180ms;--dur-base:320ms;

	font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--ink-200);
	background:var(--ink-950);
	-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.lec-wor,.lec-wor *,.lec-wor *::before,.lec-wor *::after{box-sizing:border-box}
.lec-wor h2,.lec-wor h3,.lec-wor h4,.lec-wor p,.lec-wor ul{margin:0;padding:0}
.lec-wor ul{list-style:none}
.lec-wor a{color:inherit;text-decoration:none}
.lec-wor button{font:inherit;cursor:pointer;background:transparent;border:0;color:inherit}
.lec-wor svg{display:block;max-width:100%}
.lec-wor [hidden]{display:none !important}

/* ---------- Buttons ---------- */
.lec-wor .btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;font-size:14px;font-weight:500;letter-spacing:0.02em;border-radius:var(--r-pill);border:1px solid transparent;transition:all var(--dur-base) var(--ease-out);white-space:nowrap;cursor:pointer;line-height:1}
.lec-wor .btn-primary{background:var(--ink-50) !important;color:var(--ink-950) !important;box-shadow:0 10px 28px -12px rgba(255,255,255,0.25)}
.lec-wor .btn-primary:hover{background:var(--ink-0) !important;color:var(--ink-950) !important;transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(255,255,255,0.32)}
.lec-wor .btn-ghost{background:transparent !important;color:var(--ink-50) !important;border-color:rgba(255,255,255,0.18) !important}
.lec-wor .btn-ghost:hover{background:rgba(255,255,255,0.06) !important;color:var(--ink-50) !important;border-color:rgba(255,255,255,0.32) !important}

/* ---------- Section heading ---------- */
.lec-wor .section-head{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s-7);align-items:end;margin-bottom:var(--s-8)}
.lec-wor .section-head__num{font-family:var(--font-body);font-size:12.5px;font-weight:var(--fw-semi);letter-spacing:0.04em;text-transform:uppercase;color:var(--titanium);margin-bottom:8px}
.lec-wor .section-head h2{font-size:clamp(30px,3.2vw,50px);font-weight:400;letter-spacing:-0.028em;line-height:1.06;color:var(--ink-50);max-width:16ch}
.lec-wor .section-head h2 em{font-style:normal;font-weight:400;color:var(--ink-400)}
.lec-wor .section-head__lede{font-size:16px;line-height:1.55;color:var(--ink-400);max-width:48ch}

/* ---------- Section shell ---------- */
.lec-wor .calculator{background:var(--ink-950);padding-block:var(--s-11);border-top:1px solid var(--ink-700)}
.lec-wor .calculator__inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Wizard shell ---------- */
.lec-wor .wiz{margin-top:var(--s-6);border:1px solid var(--ink-700);background:var(--ink-900);border-radius:18px;overflow:hidden}
.lec-wor .wiz-empty{padding:var(--s-6);font-size:15px;color:var(--ink-300)}
.lec-wor .wiz-empty a{color:var(--ink-50);text-decoration:underline}
.lec-wor .wiz-progress{padding:0;border-bottom:1px solid var(--ink-700);background:var(--ink-900)}
.lec-wor .wiz-progress__bar{height:3px;background:transparent;position:relative;overflow:hidden}
.lec-wor .wiz-progress__bar > div{height:100%;background:var(--ink-50);width:25%;transition:width 420ms cubic-bezier(.4,0,.2,1)}
.lec-wor .wiz-shell{display:grid;grid-template-columns:1.15fr 1fr;min-height:540px}

/* ---------- Stage ---------- */
.lec-wor .wiz-stage{position:relative;background:radial-gradient(80% 60% at 50% 35%,rgba(255,255,255,0.04),transparent 70%),linear-gradient(180deg,#0e0e10 0%,#07070a 100%);border-right:1px solid var(--ink-700);display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:420px}
.lec-wor .wiz-stage svg{width:100%;height:100%;display:block}
.lec-wor .wiz-stage__chip{position:absolute;top:16px;left:16px;font-family:var(--font-body);font-size:11.5px;letter-spacing:0.01em;font-weight:var(--fw-medium);color:rgba(255,255,255,0.85);padding:6px 12px;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.18);border-radius:var(--r-pill);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lec-wor .wiz-stage__chip .dot{width:5px;height:5px;border-radius:50%;background:var(--signal-on);display:inline-block;margin-right:6px;vertical-align:middle;box-shadow:0 0 8px rgba(74,222,128,0.7)}
.lec-wor .wiz-stage__legend{position:absolute;bottom:16px;right:16px;font-family:var(--font-body);font-size:11px;letter-spacing:0.02em;color:rgba(255,255,255,0.4)}

/* ---------- Question panel ---------- */
.lec-wor .wiz-q{padding:var(--s-7) var(--s-6);display:flex;flex-direction:column}
.lec-wor .wiz-q__panel{display:flex;flex-direction:column;flex:1}
.lec-wor .wiz-q__panel:not([hidden]){animation:lecWorPanelIn 360ms var(--ease-out) both}
@keyframes lecWorPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.lec-wor .wiz-q__panel:not([hidden]){animation:none}}
.lec-wor .wiz-q h3{margin:0 0 12px;font-family:var(--font-display);font-size:clamp(26px,2.6vw,38px);line-height:1.05;font-weight:400;letter-spacing:-0.024em;color:var(--ink-50)}
.lec-wor .wiz-q__intro{margin:0 0 var(--s-6);color:var(--ink-300);font-size:15px;line-height:1.55;max-width:44ch}

/* ---------- Mount options ---------- */
.lec-wor .wiz-mount-options{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
.lec-wor .wiz-opt{text-align:left;background:var(--ink-850);border:1px solid var(--ink-700);border-radius:var(--w2-r-s);color:inherit;font:inherit;padding:var(--s-4);cursor:pointer;display:grid;grid-template-columns:56px 1fr auto;gap:var(--s-4);align-items:center;transition:all var(--dur-fast) var(--ease-out)}
.lec-wor .wiz-opt:hover{border-color:var(--ink-500);background:var(--ink-800)}
.lec-wor .wiz-opt[aria-pressed="true"]{border-color:var(--ink-50);background:var(--ink-800);box-shadow:inset 0 0 0 1px var(--ink-50)}
.lec-wor .wiz-opt__icon{width:56px;height:56px;background:var(--ink-900);border:1px solid var(--ink-700);border-radius:10px;display:grid;place-items:center;color:var(--ink-200)}
.lec-wor .wiz-opt[aria-pressed="true"] .wiz-opt__icon{background:rgba(245,245,247,0.06);border-color:var(--ink-400);color:var(--ink-50)}
.lec-wor .wiz-opt__icon svg{width:32px;height:32px}
.lec-wor .wiz-opt__title{font-size:16px;font-weight:500;color:var(--ink-50);letter-spacing:-0.005em;margin:0 0 4px}
.lec-wor .wiz-opt__desc{font-size:13px;color:var(--ink-400);margin:0;line-height:1.45}
.lec-wor .wiz-opt__check{width:22px;height:22px;border-radius:50%;border:1px solid var(--ink-600);display:grid;place-items:center;color:transparent;transition:all var(--dur-fast) var(--ease-out)}
.lec-wor .wiz-opt[aria-pressed="true"] .wiz-opt__check{background:var(--ink-50);border-color:var(--ink-50);color:var(--ink-1000)}

/* ---------- Slider fields ---------- */
.lec-wor .wiz-field{margin-bottom:var(--s-5)}
.lec-wor .wiz-field__label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.lec-wor .wiz-field__name{font-family:var(--font-body);font-size:12px;letter-spacing:0.02em;font-weight:var(--fw-semi);color:var(--ink-300)}
.lec-wor .wiz-field__value{font-family:var(--font-display);font-size:28px;font-weight:400;letter-spacing:-0.02em;color:var(--ink-50)}
.lec-wor .wiz-field__value .u{font-family:var(--font-mono);font-size:12px;color:var(--ink-400);margin-left:4px;letter-spacing:0}
.lec-wor .wiz-field input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;background:var(--ink-700);outline:none;cursor:pointer;padding:0;border:0}
.lec-wor .wiz-field input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink-50);border:0;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out);box-shadow:0 2px 10px rgba(0,0,0,0.55)}
.lec-wor .wiz-field input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.lec-wor .wiz-field input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink-50);border:0;cursor:pointer}
.lec-wor .wiz-field__hint{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-wide);color:var(--ink-500);margin-top:8px}
.lec-wor .wiz-tip{margin-top:var(--s-4);padding:12px 14px;background:rgba(201,183,156,0.05);border:1px solid rgba(201,183,156,0.18);border-radius:10px;font-size:13px;line-height:1.5;color:var(--ink-200)}
.lec-wor .wiz-tip b{color:var(--ink-50);font-weight:500}

/* ---------- Pitch recommendation card ---------- */
.lec-wor .wiz-pitch{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);background:var(--ink-850);border:1px solid var(--ink-600);border-radius:var(--w2-r-s);display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:center}
.lec-wor .wiz-pitch__num{font-family:var(--font-display);font-size:48px;font-weight:400;letter-spacing:-0.04em;color:var(--ink-50);line-height:1}
.lec-wor .wiz-pitch__col h4{margin:0 0 4px;font-size:15px;font-weight:500;color:var(--ink-50);letter-spacing:-0.005em}
.lec-wor .wiz-pitch__col p{margin:0;font-size:13px;color:var(--ink-400);line-height:1.45}

/* ---------- Footer ---------- */
.lec-wor .wiz-foot{padding:var(--s-4) var(--s-5);border-top:1px solid var(--ink-700);background:var(--ink-850);display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-5);align-items:center}
.lec-wor .wiz-foot .btn{height:42px;padding:0 18px;font-size:13px}
.lec-wor .wiz-foot .btn-primary{height:44px;padding:0 22px;font-size:13.5px}
.lec-wor .wiz-foot .btn[aria-disabled="true"]{opacity:0.4;pointer-events:none}
.lec-wor .wiz-foot__step{text-align:center;font-size:12.5px;color:var(--ink-500);letter-spacing:0.01em;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Step 4 — form ---------- */
.lec-wor .wiz-send{display:flex;flex-direction:column}
.lec-wor .wiz-send h3{margin-bottom:14px}
.lec-wor .wiz-send .wiz-q__intro{margin-bottom:var(--s-5);max-width:50ch}
.lec-wor .wiz-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-5)}
.lec-wor .wiz-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:var(--ink-850);border:1px solid var(--ink-700);border-radius:999px;font-family:var(--font-body);font-size:12px;color:var(--ink-200);letter-spacing:0.01em}
.lec-wor .wiz-chip .ico{display:inline-flex;color:var(--ink-400)}
.lec-wor .wiz-chip.is-feature{background:rgba(245,245,247,0.06);border-color:var(--ink-400);color:var(--ink-50)}
.lec-wor .wiz-form{display:flex;flex-direction:column;gap:14px;margin-bottom:var(--s-5)}
.lec-wor .wiz-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lec-wor .wiz-form__field{display:flex;flex-direction:column;gap:6px}
.lec-wor .wiz-form__label{font-family:var(--font-body);font-size:11.5px;letter-spacing:0.02em;font-weight:var(--fw-medium);color:var(--ink-400)}
.lec-wor .wiz-form__label em{font-style:normal;color:var(--ink-500);letter-spacing:var(--ls-wide)}
/* !important on background/color defeats aggressive theme field styles (see CLAUDE.md). */
.lec-wor .wiz-form input[type=text],.lec-wor .wiz-form input[type=email],.lec-wor .wiz-form input[type=tel]{background:var(--ink-850) !important;border:1px solid var(--ink-700);color:var(--ink-50) !important;padding:0 14px;height:46px;font:14px var(--font-body);outline:none;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);border-radius:10px;box-shadow:none;width:100%}
.lec-wor .wiz-form input:focus{border-color:var(--ink-300);background:var(--ink-800) !important}
.lec-wor .wiz-form input::placeholder{color:var(--ink-500)}
.lec-wor .wiz-form input.is-invalid{border-color:var(--signal-err)}
.lec-wor .wiz-form__submit{height:52px;margin-top:6px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15px}
.lec-wor .wiz-form__submit.is-busy{opacity:0.6;pointer-events:none}
.lec-wor .wiz-form__legal{margin:8px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-wide);color:var(--ink-500);line-height:1.5}
.lec-wor .wiz-reassure{list-style:none;padding:0;margin:0 0 var(--s-5);display:flex;flex-direction:column;gap:12px;padding-top:var(--s-4);border-top:1px solid var(--ink-700)}
.lec-wor .wiz-reassure li{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--ink-300);line-height:1.55}
.lec-wor .wiz-reassure svg{flex:none;margin-top:2px;color:var(--signal-on)}
.lec-wor .wiz-reassure b{color:var(--ink-50);font-weight:500}
.lec-wor .wiz-cred{display:flex;align-items:center;gap:14px;padding:14px;background:rgba(255,255,255,0.025);border:1px solid var(--ink-700);border-radius:var(--w2-r-s)}
.lec-wor .wiz-cred__avs{display:flex;flex:none}
.lec-wor .wiz-cred__avs .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;font-weight:600;color:rgba(255,255,255,0.95);border:2px solid var(--ink-900);letter-spacing:0}
.lec-wor .wiz-cred__avs .av + .av{margin-left:-10px}
.lec-wor .wiz-cred__avs .av-1{background:linear-gradient(135deg,#3b82f6,#1e40af)}
.lec-wor .wiz-cred__avs .av-2{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.lec-wor .wiz-cred__avs .av-3{background:linear-gradient(135deg,#10b981,#047857)}
.lec-wor .wiz-cred__avs .av-4{background:linear-gradient(135deg,#f59e0b,#b45309)}
.lec-wor .wiz-cred__txt{font-size:13px;color:var(--ink-300);line-height:1.5}
.lec-wor .wiz-cred__txt b{color:var(--ink-50);font-weight:500}

/* ---------- Success state ---------- */
.lec-wor .wiz-success{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);padding:var(--s-4) 0}
.lec-wor .wiz-success__icon{width:56px;height:56px;color:var(--signal-on)}
.lec-wor .wiz-success__icon svg{width:100%;height:100%}
.lec-wor .wiz-success h3{margin:0}
.lec-wor .wiz-success > p{margin:0;color:var(--ink-300);font-size:15px;line-height:1.55;max-width:50ch}
.lec-wor .wiz-success > p b{color:var(--ink-50);font-weight:500}
.lec-wor .wiz-success__meta{margin-top:4px;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink-700);border-radius:var(--w2-r-s);overflow:hidden;width:100%}
.lec-wor .wiz-success__meta > div{padding:14px;border-right:1px solid var(--ink-700);display:flex;flex-direction:column;gap:4px}
.lec-wor .wiz-success__meta > div:last-child{border-right:0}
.lec-wor .wiz-success__meta .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-400)}
.lec-wor .wiz-success__meta .val{font-size:14px;color:var(--ink-50);font-weight:500;letter-spacing:-0.005em}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
	/* Stack: stage on top, question below. The stage needs an explicit height
	   now that the grid no longer stretches it (its SVG is sized height:100%). */
	.lec-wor .wiz-shell{grid-template-columns:1fr;min-height:0}
	.lec-wor .wiz-stage{border-right:0;border-bottom:1px solid var(--ink-700);height:44vh;min-height:280px;max-height:520px}
}
@media (max-width:760px){
	/* Mobile restructure — the wizard was buried under whitespace and a huge
	   decorative stage. Tighten the section, shrink the stage to a compact
	   confirmation banner, and pull the active question above the fold. */
	.lec-wor .section-head{grid-template-columns:1fr;gap:var(--s-4);margin-bottom:var(--s-5)}
	.lec-wor .calculator{padding-block:var(--s-7)}
	.lec-wor .wiz{margin-top:var(--s-5);border-radius:14px}

	.lec-wor .wiz-stage{height:30vh;min-height:150px;max-height:240px}
	.lec-wor .wiz-stage__chip{top:10px;left:10px;font-size:11px;padding:5px 10px}
	.lec-wor .wiz-stage__legend{bottom:10px;right:10px}

	.lec-wor .wiz-q{padding:var(--s-5) var(--s-4)}
	.lec-wor .wiz-q h3{font-size:clamp(22px,6vw,28px);margin-bottom:8px}
	.lec-wor .wiz-q__intro{margin-bottom:var(--s-5);font-size:14px}

	.lec-wor .wiz-opt{grid-template-columns:44px 1fr auto;padding:var(--s-3);gap:var(--s-3)}
	.lec-wor .wiz-opt__icon{width:44px;height:44px}
	.lec-wor .wiz-opt__icon svg{width:26px;height:26px}
	.lec-wor .wiz-opt__title{font-size:15px}

	.lec-wor .wiz-field{margin-bottom:var(--s-4)}
	.lec-wor .wiz-field__value{font-size:24px}
	.lec-wor .wiz-pitch{padding:var(--s-3) var(--s-4)}
	.lec-wor .wiz-pitch__num{font-size:40px}

	.lec-wor .wiz-chips{margin-bottom:var(--s-4)}
	.lec-wor .wiz-send .wiz-q__intro{margin-bottom:var(--s-4)}
}
@media (max-width:700px){
	.lec-wor .wiz-foot{grid-template-columns:1fr 1fr;gap:var(--s-3)}
	.lec-wor .wiz-foot__step{display:none}
}
@media (max-width:540px){
	.lec-wor .wiz-form__row{grid-template-columns:1fr}
}

/* ---------- Sticky CTA ----------
 * Floating pill pinned to the viewport while the wizard is scrolled out of
 * view. Hidden by default; JS toggles `is-hidden` via an IntersectionObserver
 * watching the wizard root. Styled to match the wizard's off-white primary
 * button so it reads as part of the same surface. */
.lec-wor .lec-wor-sticky{
	position:fixed;bottom:24px;z-index:9999;
	display:inline-flex;align-items:center;gap:10px;
	padding:14px 22px;
	background:var(--ink-50);color:var(--ink-950);
	border:0;border-radius:var(--r-pill);
	font-family:var(--font-body);font-size:14px;font-weight:var(--fw-semi);letter-spacing:0.01em;line-height:1;
	cursor:pointer;
	box-shadow:0 14px 38px -10px rgba(0,0,0,0.7),0 2px 8px rgba(0,0,0,0.35);
	opacity:1;transform:translateY(0);pointer-events:auto;
	transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.lec-wor .lec-wor-sticky:hover{
	background:var(--ink-0);transform:translateY(-3px);
	box-shadow:0 20px 48px -10px rgba(0,0,0,0.78),0 4px 12px rgba(0,0,0,0.4);
}
.lec-wor .lec-wor-sticky:active{transform:translateY(-1px)}
.lec-wor .lec-wor-sticky.is-hidden{opacity:0;transform:translateY(24px);pointer-events:none}
.lec-wor .lec-wor-sticky__icon{flex-shrink:0}
.lec-wor .lec-wor-sticky--bottom-right{right:24px}
.lec-wor .lec-wor-sticky--bottom-left{left:24px}
.lec-wor .lec-wor-sticky--bottom-center{left:50%;transform:translateX(-50%)}
.lec-wor .lec-wor-sticky--bottom-center.is-hidden{transform:translate(-50%,24px)}
.lec-wor .lec-wor-sticky--bottom-center:hover{transform:translate(-50%,-3px)}
.lec-wor .lec-wor-sticky--bottom-center:active{transform:translate(-50%,-1px)}
@media (max-width:640px){
	.lec-wor .lec-wor-sticky{bottom:16px;padding:12px 18px;font-size:13px;gap:8px}
	.lec-wor .lec-wor-sticky--bottom-right{right:16px}
	.lec-wor .lec-wor-sticky--bottom-left{left:16px}
	.lec-wor .lec-wor-sticky--hide-mobile{display:none}
}
@media (prefers-reduced-motion:reduce){
	.lec-wor .lec-wor-sticky{transition:opacity var(--dur-base) var(--ease-out)}
	.lec-wor .lec-wor-sticky.is-hidden{transform:none}
}