/* =====================================================================
   lead-form.css — Claude Design "modal lead flow" prototype, ported 1:1.

   Source of truth: ../../../../modal lead flow psicologape/{app.css,tokens.css}
   This file is a verbatim port of that prototype's component CSS (chip
   clusters, CTA "thread" micro-animation, fields, conditional blocks, 3-seg
   stepper, modal-card / bottom-sheet frames, consent notice, success state,
   optional-note block, pillar embedded card), scoped under .psi-lf-overlay
   (the modal) and .pillar-card (the embedded card). The artboard/canvas
   scaffolding from the prototype (body, .frame-fill, .desktop-chrome,
   .phone-status, .pillar-page mock, .rationale) is intentionally NOT ported.

   The prototype's design tokens (--color-*, --font-*, --ease-standard, …)
   are aliased onto the two scope roots so the ported rules read verbatim;
   the values resolve to the theme's locked --psi-c-* / --wp--preset--* tokens
   (zero value mismatch — verified against theme.json).
   ===================================================================== */

.psi-lf-overlay,
.pillar-card {
	--color-primary:       var(--psi-c-primary);
	--color-primary-deep:  var(--psi-c-primary-deep);
	--color-primary-tint:  var(--psi-c-primary-tint);
	--color-cta:           var(--psi-c-cta);
	--color-cta-hover:     var(--psi-c-cta-hover);
	--color-cream-1:       var(--psi-c-cream-1);
	--color-cream-2:       var(--psi-c-cream-2);
	--color-text:          var(--psi-c-text);
	--color-text-muted:    var(--psi-c-text-muted);
	--color-border:        var(--psi-c-border);
	--color-border-strong: var(--psi-c-border-strong);
	--color-bg:            #fff;
	--font-sans:           var(--wp--preset--font-family--sans, 'Inter', 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
	--font-serif-quote:    var(--wp--preset--font-family--serif-quote, 'Source Serif 4', 'Source Serif Pro', Georgia, serif);
	--ease-standard:       var(--psi-ease);
	--shadow-raised:       var(--psi-shadow-raised);
	--shadow-card:         var(--psi-shadow-card);
}

/* components.css ships a global `img, svg { display:block; height:auto;
   max-width:100% }` reset. On inline icon SVGs that are flex children (the
   chip glyphs, the header back/close glyphs, etc.) the `display:block` +
   `height:auto` combo makes the SVG collapse to 0×0. Re-establish inline-icon
   sizing for everything inside the lead-form UI. */
.psi-lf-overlay svg,
.pillar-card svg {
	display: inline-block;
	max-width: none;
	flex: none;
}

/* Screen-reader-only (the Step-3 textarea's programmatic label). */
.psi-lf-overlay .sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Honeypot — visually hidden but NOT display:none (bots that skip
   display:none fields would otherwise ignore it). Off-screen + zero-size,
   no layout impact, not in the tab order (input has tabindex="-1"). */
.psi-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Editorial accent: single italic word in Source Serif 4. */
.psi-lf-overlay .serif-accent {
	font-family: var(--font-serif-quote);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* ============================================================
   OVERLAY (always in the DOM; shown via [data-open="true"])
   Plays the role of the prototype's .frame-fill — fixed, full-viewport.
   ============================================================ */
.psi-lf-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	overscroll-behavior: contain;
}
.psi-lf-overlay[data-open="true"] { display: block; }

/* The <form> wraps all three steps but is a transparent flex column so the
   active step's .m-body / .m-foot behave exactly as in the prototype (where
   each step is rendered standalone inside .modal-card / .sheet). */
.psi-lf-overlay .psi-lf-form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}
/* Per-step wrapper (this port renders all steps; the prototype renders one).
   display:contents when active so .m-body / .m-foot become direct flex
   children of the form. */
.psi-lf-overlay .psi-lf-step { display: none; }
.psi-lf-overlay .psi-lf-step[data-active="true"] { display: contents; }

/* ============================================================
   CHIP CLUSTERS  (shared: modal Step 1 + pillar card)
   ============================================================ */

/* Schedule cluster (multi-select) — square-ish tiles w/ time-of-day glyph */
.psi-lf-overlay .sched-grid,
.pillar-card .sched-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 8px;
}
.psi-lf-overlay .sched-flex-row,
.pillar-card .sched-flex-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-top: 8px;
}

.psi-lf-overlay .sched-chip,
.pillar-card .sched-chip {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 72px;
	padding: 10px 6px;
	background: #fff;
	border: 1px solid var(--color-border-strong);
	border-radius: 12px;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 160ms var(--ease-standard),
	            background-color 160ms var(--ease-standard),
	            color 160ms var(--ease-standard);
	-webkit-tap-highlight-color: transparent;
}
.psi-lf-overlay .sched-chip:hover,
.pillar-card .sched-chip:hover { border-color: var(--color-primary); }
.psi-lf-overlay .sched-chip .glyph,
.pillar-card .sched-chip .glyph {
	width: 22px; height: 22px;
	color: var(--color-primary);
	opacity: 0.85;
	transition: opacity 160ms var(--ease-standard), color 160ms var(--ease-standard);
}
.psi-lf-overlay .sched-chip[aria-pressed="true"],
.pillar-card .sched-chip[aria-pressed="true"] {
	background: var(--color-primary-tint);
	border-color: var(--color-primary);
	color: var(--color-primary-deep);
}
.psi-lf-overlay .sched-chip[aria-pressed="true"] .glyph,
.pillar-card .sched-chip[aria-pressed="true"] .glyph { opacity: 1; }

/* Tick pip in the top-right when selected (multi) */
.psi-lf-overlay .sched-chip .pip,
.pillar-card .sched-chip .pip {
	position: absolute;
	top: 6px; right: 6px;
	width: 14px; height: 14px;
	border-radius: 999px;
	background: var(--color-primary);
	color: #fff;
	display: none;
	align-items: center; justify-content: center;
}
.psi-lf-overlay .sched-chip[aria-pressed="true"] .pip,
.pillar-card .sched-chip[aria-pressed="true"] .pip { display: inline-flex; }

/* Flexible chip — solid cream surface (NOT dashed/draft); reads as a real,
   selectable option distinct from the four square slot tiles. Selecting it
   gives the same teal-tint pressed state as the slot tiles. */
.psi-lf-overlay .sched-chip.flex-chip,
.pillar-card .sched-chip.flex-chip {
	flex-direction: row;
	justify-content: flex-start;
	gap: 12px;
	padding: 12px 14px;
	min-height: 56px;
	background: var(--color-cream-1);
	border: 1px solid var(--color-border-strong);
	text-align: left;
}
.psi-lf-overlay .sched-chip.flex-chip:hover,
.pillar-card .sched-chip.flex-chip:hover {
	background: #EAE5D8;
	border-color: var(--color-primary);
}
.psi-lf-overlay .sched-chip.flex-chip .glyph,
.pillar-card .sched-chip.flex-chip .glyph { color: var(--color-primary-deep); opacity: 0.85; }
.psi-lf-overlay .sched-chip.flex-chip .flex-copy,
.pillar-card .sched-chip.flex-chip .flex-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.psi-lf-overlay .sched-chip.flex-chip .flex-copy .sub,
.pillar-card .sched-chip.flex-chip .flex-copy .sub { font-size: 12px; color: var(--color-text-muted); font-weight: 400; }
.psi-lf-overlay .sched-chip.flex-chip[aria-pressed="true"],
.pillar-card .sched-chip.flex-chip[aria-pressed="true"] {
	background: var(--color-primary-tint);
	border: 1px solid var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-primary);
}
.psi-lf-overlay .sched-chip.flex-chip[aria-pressed="true"] .glyph,
.pillar-card .sched-chip.flex-chip[aria-pressed="true"] .glyph { color: var(--color-primary); opacity: 1; }
.psi-lf-overlay .sched-chip.flex-chip[aria-pressed="true"] .flex-copy .sub,
.pillar-card .sched-chip.flex-chip[aria-pressed="true"] .flex-copy .sub { color: var(--color-primary-deep); }

/* Dimmed state when Flexible is active — visual hint that the slot chips are
   secondary, NOT a click-blocker. Clicking a slot chip while Flexible is on
   swaps the selection (turns Flexible off, turns the slot on) via
   toggleScheduleChip() in lead-form.js. */
.psi-lf-overlay .sched-chip.dimmed,
.pillar-card .sched-chip.dimmed {
	opacity: 0.45;
}
.psi-lf-overlay .sched-chip.dimmed:hover,
.pillar-card .sched-chip.dimmed:hover { opacity: 1; }

/* Therapy type cluster (single-select) — bigger tile w/ subtitle */
.psi-lf-overlay .type-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.psi-lf-overlay .type-chip {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--color-border-strong);
	border-radius: 12px;
	color: var(--color-text);
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms var(--ease-standard),
	            background-color 160ms var(--ease-standard);
	-webkit-tap-highlight-color: transparent;
}
.psi-lf-overlay .type-chip:hover { border-color: var(--color-primary); }
.psi-lf-overlay .type-chip .label { font-size: 15px; font-weight: 500; line-height: 1.2; }
.psi-lf-overlay .type-chip .sub   { font-size: 12px; color: var(--color-text-muted); line-height: 1.3; }
.psi-lf-overlay .type-chip[aria-pressed="true"] {
	background: var(--color-primary-tint);
	border-color: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-primary);
}
.psi-lf-overlay .type-chip[aria-pressed="true"] .label { color: var(--color-primary-deep); }
.psi-lf-overlay .type-chip[aria-pressed="true"] .sub   { color: var(--color-primary-deep); opacity: 0.85; }

/* Circular radio pip for single-select */
.psi-lf-overlay .type-chip .radio {
	position: absolute;
	top: 12px; right: 12px;
	width: 16px; height: 16px;
	border-radius: 999px;
	border: 1px solid var(--color-border-strong);
	background: #fff;
	transition: background 160ms, border-color 160ms;
}
.psi-lf-overlay .type-chip[aria-pressed="true"] .radio {
	border-color: var(--color-primary);
	background: radial-gradient(circle, var(--color-primary) 0 4px, #fff 5px 100%);
}

/* ============================================================
   CONFIDENT-QUIET CTA MICRO-ANIMATION
   - 1px coral hairline tracks left→right under the button (1.4s),
     fades (0.6s), pauses, repeats every 5s. A thread, not a pulse.
   ============================================================ */
.psi-lf-overlay .btn-cta,
.pillar-card .btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 14px 24px;
	background: var(--color-cta);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background 200ms var(--ease-standard);
}
.psi-lf-overlay .btn-cta:hover,
.psi-lf-overlay .btn-cta:focus-visible,
.pillar-card .btn-cta:hover,
.pillar-card .btn-cta:focus-visible { background: var(--color-cta-hover); color: #fff; }
.psi-lf-overlay .btn-cta:focus-visible,
.pillar-card .btn-cta:focus-visible { outline: 3px solid rgba(216, 90, 48, 0.35); outline-offset: 2px; }
@media (min-width: 768px) {
	.psi-lf-overlay .btn-cta,
	.pillar-card .btn-cta { padding: 16px 32px; font-size: 17px; }
}

.psi-lf-overlay .cta-attn,
.pillar-card .cta-attn {
	position: relative;
	overflow: visible;
}
.psi-lf-overlay .cta-attn::after,
.pillar-card .cta-attn::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -6px;
	height: 1px;
	background: var(--color-cta);
	transform-origin: left center;
	animation: cta-thread 5s var(--ease-standard) infinite;
	pointer-events: none;
}
@keyframes cta-thread {
	0%   { transform: scaleX(0);   opacity: 0;   }
	10%  { opacity: 0.0; }
	28%  { transform: scaleX(1);   opacity: 0.9; }
	48%  { transform: scaleX(1);   opacity: 0;   }
	100% { transform: scaleX(1);   opacity: 0;   }
}

/* Chevron that drifts 2px right and back, in time with the thread */
.psi-lf-overlay .cta-attn .chev,
.pillar-card .cta-attn .chev {
	display: inline-flex;
	animation: cta-chev 5s var(--ease-standard) infinite;
}
@keyframes cta-chev {
	0%, 100% { transform: translateX(0); }
	28%      { transform: translateX(2px); }
	48%      { transform: translateX(0); }
}
/* Disabled CTA keeps its chevron — dimmed to 70%, never hidden, so the action
   never visually disappears. */
.psi-lf-overlay .btn-cta[disabled] .chev,
.pillar-card .btn-cta[disabled] .chev { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
	.psi-lf-overlay .cta-attn::after,
	.pillar-card .cta-attn::after { animation: none; opacity: 0; }
	.psi-lf-overlay .cta-attn .chev,
	.pillar-card .cta-attn .chev  { animation: none; }
}

/* Disabled CTA — stays visibly coral (soft, never-disappearing). CRO: the
   action is always recognizable as "your button when you're ready". */
.psi-lf-overlay .btn-cta[disabled],
.pillar-card .btn-cta[disabled] {
	background: #EAB29D;          /* coral lightened ~40%, stays warm */
	color: #fff;
	cursor: not-allowed;
	box-shadow: none;
}
.psi-lf-overlay .btn-cta[disabled].cta-attn::after,
.pillar-card .btn-cta[disabled].cta-attn::after { display: none; }

/* ============================================================
   FIELDS
   ============================================================ */
.psi-lf-overlay .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .psi-lf-overlay .f-row { grid-template-columns: 1fr; } }

.psi-lf-overlay .field-tight { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.psi-lf-overlay .field-tight label {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text);
	display: flex; align-items: center; gap: 6px;
}
.psi-lf-overlay .field-tight label .opt {
	font-size: 12px;
	color: var(--color-text-muted);
	font-weight: 400;
}
.psi-lf-overlay .field-tight input,
.psi-lf-overlay .field-tight textarea {
	min-height: 48px;
	padding: 12px 14px;
	font-family: var(--font-sans);
	font-size: 16px;
	color: var(--color-text);
	background: #fff;
	border: 1px solid var(--color-border-strong);
	border-radius: 10px;
	transition: border-color 120ms, box-shadow 120ms;
	width: 100%;
}
.psi-lf-overlay .field-tight textarea {
	min-height: 96px;
	resize: vertical;
}
.psi-lf-overlay .field-tight input:focus,
.psi-lf-overlay .field-tight textarea:focus {
	outline: 0;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.15);
}
.psi-lf-overlay .wa-input { position: relative; }
.psi-lf-overlay .wa-input input { padding-left: 64px; }
.psi-lf-overlay .wa-input .prefix {
	position: absolute; left: 1px; top: 1px; bottom: 1px;
	display: flex; align-items: center;
	padding: 0 12px;
	font-size: 15px; color: var(--color-text);
	background: var(--color-primary-tint);
	border-right: 1px solid var(--color-border);
	border-radius: 9px 0 0 9px;
	pointer-events: none;
	font-weight: 500;
}

/* ============================================================
   CONDITIONAL FIELD APPEARANCE
   Coral hairline expanding L→R, then field content fades in.
   ============================================================ */
.psi-lf-overlay .cond {
	position: relative;
	margin: 4px 0 18px;
	padding: 14px 14px 8px;
	background: #FBF8F0;
	border-radius: 10px;
	border: 1px solid #EEE7D6;
	animation: cond-in 360ms var(--ease-standard) both;
	overflow: hidden;
}
.psi-lf-overlay .cond[hidden] { display: none; }
.psi-lf-overlay .cond::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--color-cta);
	transform-origin: left center;
	animation: cond-hair 380ms var(--ease-standard) both;
}
.psi-lf-overlay .cond .cond-inner { animation: cond-fade 360ms 140ms var(--ease-standard) both; }
.psi-lf-overlay .cond .cond-input {
	width: 100%; min-height: 44px; padding: 10px 12px;
	border: 1px solid var(--color-border); background: #fff;
	border-radius: 8px; font-size: 15px; font-family: var(--font-sans);
	color: var(--color-text);
	transition: border-color 120ms, box-shadow 120ms;
}
.psi-lf-overlay .cond .cond-input:focus {
	outline: 0;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}

@keyframes cond-in {
	from { opacity: 0; transform: translateY(-2px); max-height: 0; }
	to   { opacity: 1; transform: translateY(0);    max-height: 360px; }
}
@keyframes cond-hair {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@keyframes cond-fade {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Adolescente: trust patch w/ shield-check glyph */
.psi-lf-overlay .cond .trust-patch {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 10px 12px;
	margin: 0 -4px 10px;
	background: var(--color-cream-2);
	border-radius: 8px;
	font-size: 13px;
	color: var(--color-text);
	line-height: 1.45;
}
.psi-lf-overlay .cond .trust-patch .shield {
	flex: 0 0 18px;
	color: var(--color-primary-deep);
	margin-top: 1px;
}
.psi-lf-overlay .cond .trust-patch strong { font-weight: 500; }
.psi-lf-overlay .cond .cond-label-row {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	margin-bottom: 4px;
}
.psi-lf-overlay .cond .cond-label { font-size: 14px; font-weight: 500; }
.psi-lf-overlay .cond .cond-because {
	font-size: 12px;
	color: var(--color-primary-deep);
	background: var(--color-primary-tint);
	padding: 2px 8px;
	border-radius: 999px;
}
.psi-lf-overlay .cond .cond-because.req {
	background: rgba(216, 90, 48, .10);
	color: var(--color-cta-hover);
}

@media (prefers-reduced-motion: reduce) {
	.psi-lf-overlay .cond,
	.psi-lf-overlay .cond::before,
	.psi-lf-overlay .cond .cond-inner { animation: none; }
}

/* ============================================================
   STEPPER (3 segments, slim)
   ============================================================ */
.psi-lf-overlay .stepper { display: flex; gap: 6px; }
.psi-lf-overlay .stepper .seg {
	height: 3px; flex: 1;
	background: #E2DFD5;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}
.psi-lf-overlay .stepper .seg .fill {
	position: absolute; inset: 0;
	background: var(--color-primary);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 400ms var(--ease-standard);
}
.psi-lf-overlay .stepper .seg.done .fill,
.psi-lf-overlay .stepper .seg.active .fill { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
	.psi-lf-overlay .stepper .seg .fill { transition: none; }
}

/* ============================================================
   MODAL FRAMES — desktop centered .modal-card, mobile bottom .sheet.
   Base styles = the bottom-sheet treatment; ≥720px upgrades to the
   centered card. The grab handle is rendered always, hidden on desktop.
   ============================================================ */
.psi-lf-overlay .modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(26, 38, 36, 0.42);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.psi-lf-overlay .psi-lf-frame {
	/* mobile bottom sheet (default) */
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: #fff;
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -8px 28px rgba(26, 38, 36, 0.18);
	display: flex; flex-direction: column;
	max-height: 92%;
	animation: sheet-in 360ms var(--ease-standard) both;
	overflow: hidden;
}
@keyframes sheet-in {
	from { transform: translateY(24px); opacity: 0.4; }
	to   { transform: translateY(0);    opacity: 1;   }
}
.psi-lf-overlay .sheet-handle {
	display: flex; justify-content: center;
	padding: 10px 0 4px;
}
.psi-lf-overlay .sheet-handle .bar {
	width: 40px; height: 4px; border-radius: 999px;
	background: #D9D5C9;
}

@media (min-width: 720px) {
	.psi-lf-overlay .psi-lf-frame {
		top: 50%; left: 50%; right: auto; bottom: auto;
		transform: translate(-50%, -50%);
		width: min(480px, calc(100% - 48px));
		max-height: calc(100% - 48px);
		border-radius: 16px;
		box-shadow: var(--shadow-raised);
		animation: modal-in 280ms var(--ease-standard) both;
	}
	.psi-lf-overlay .sheet-handle { display: none; }
}
@keyframes modal-in {
	from { opacity: 0; transform: translate(-50%, -48%) scale(.98); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1);  }
}
@media (prefers-reduced-motion: reduce) {
	.psi-lf-overlay .psi-lf-frame { animation: none; }
}

/* Header inside modal/sheet */
.psi-lf-overlay .m-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 20px 8px;
	gap: 12px;
}
.psi-lf-overlay .m-head .crumb {
	font-size: 12px;
	color: var(--color-text-muted);
	letter-spacing: 0.02em;
	margin-right: auto; /* keep back+crumb grouped left, close at the right edge */
}
.psi-lf-overlay .m-head .close,
.psi-lf-overlay .m-head .back {
	width: 36px; height: 36px;
	border: 0; background: transparent; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--color-text-muted);
	border-radius: 999px;
}
.psi-lf-overlay .m-head .close:hover,
.psi-lf-overlay .m-head .back:hover { background: #F5F2EC; color: var(--color-text); }
.psi-lf-overlay .m-head .back[hidden] { display: none; }
/* Header-button glyph sizes (explicit, so they never depend on intrinsic sizing). */
.psi-lf-overlay .m-head .back svg  { width: 18px; height: 18px; }
.psi-lf-overlay .m-head .close svg { width: 18px; height: 18px; }

.psi-lf-overlay .m-stepper { padding: 0 20px 8px; flex: 0 0 auto; }

.psi-lf-overlay .m-body {
	padding: 8px 20px 14px;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}
.psi-lf-overlay .m-body h2 {
	font-size: 22px;
	margin: 6px 0 4px;
	letter-spacing: -0.01em;
	font-weight: 500;
	color: var(--color-text);
}
.psi-lf-overlay .m-body .lead {
	font-size: 14px;
	color: var(--color-text-muted);
	margin: 0 0 16px;
}

.psi-lf-overlay .m-foot {
	padding: 12px 20px 18px;
	background: #fff;
	border-top: 1px solid #F2EFE8;
	flex: 0 0 auto;
}

/* Section labels (small uppercase) inside Step 1 */
.psi-lf-overlay .section-label {
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	font-weight: 500;
	margin: 14px 0 8px;
	display: flex; align-items: center; gap: 8px;
}
.psi-lf-overlay .section-label .count {
	font-size: 11px;
	color: var(--color-primary);
	background: var(--color-primary-tint);
	padding: 1px 7px;
	border-radius: 999px;
	letter-spacing: 0;
	text-transform: none;
}

/* ============================================================
   CONSENT NOTICE
   ============================================================ */
.psi-lf-overlay .consent {
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.55;
	margin-top: 10px;
	text-align: left;
}
.psi-lf-overlay .consent a {
	color: var(--color-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.psi-lf-overlay .consent .em-flat {
	font-style: normal;
	color: var(--color-text);
}

/* ============================================================
   STEP 3 — SUCCESS STATE
   ============================================================ */
.psi-lf-overlay .success {
	background:
		url('../images/texture-paper.svg') repeat,
		var(--color-cream-1);
	background-blend-mode: multiply;
	padding: 28px 22px 22px;
	text-align: center;
	position: relative;
	flex: 0 0 auto;
}
.psi-lf-overlay .success .check-wrap {
	display: inline-flex;
	position: relative;
	width: 72px; height: 72px;
	margin: 4px auto 14px;
}
.psi-lf-overlay .success .check-ring {
	position: absolute; inset: 0;
	border-radius: 999px;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--color-primary-tint),
		0 0 0 9px rgba(15, 110, 86, 0.06);
	animation: ring-in 600ms var(--ease-standard) both;
}
.psi-lf-overlay .success .check-ring::after {
	content: "";
	position: absolute; inset: -4px;
	border-radius: 999px;
	border: 1px solid var(--color-primary);
	opacity: 0.18;
	animation: ring-breathe 6s ease-in-out infinite;
}
.psi-lf-overlay .success .check-svg {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--color-primary);
}
.psi-lf-overlay .success .check-svg path {
	stroke-dasharray: 32;
	stroke-dashoffset: 32;
	animation: check-draw 520ms 220ms var(--ease-standard) forwards;
}
@keyframes ring-in {
	from { transform: scale(0.86); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}
@keyframes ring-breathe {
	0%, 100% { transform: scale(1);   opacity: 0.18; }
	50%      { transform: scale(1.06); opacity: 0.05; }
}
@keyframes check-draw {
	to { stroke-dashoffset: 0; }
}

/* Tiny coral stars on entry — 4 dots radiating */
.psi-lf-overlay .success .stars { position: absolute; inset: 0; pointer-events: none; }
.psi-lf-overlay .success .stars span {
	position: absolute;
	width: 4px; height: 4px;
	border-radius: 999px;
	background: var(--color-cta);
	opacity: 0;
	animation: star-pop 900ms 350ms var(--ease-standard) forwards;
}
.psi-lf-overlay .success .stars span:nth-child(1) { top: 26px; left: calc(50% - 56px); --tx:-14px; --ty:-6px; }
.psi-lf-overlay .success .stars span:nth-child(2) { top: 18px; left: calc(50% + 50px); --tx: 12px; --ty:-8px; }
.psi-lf-overlay .success .stars span:nth-child(3) { top: 72px; left: calc(50% - 64px); --tx:-12px; --ty: 10px; }
.psi-lf-overlay .success .stars span:nth-child(4) { top: 64px; left: calc(50% + 62px); --tx: 16px; --ty: 4px; }
@keyframes star-pop {
	0%   { opacity: 0; transform: translate(0,0) scale(0.4); }
	60%  { opacity: 0.9; }
	100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1); }
}

.psi-lf-overlay .success h2 {
	font-size: 26px;
	font-weight: 500;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
	color: var(--color-primary-deep);
}
.psi-lf-overlay .success h2 .accent { color: var(--color-primary); }
.psi-lf-overlay .success .sub {
	font-size: 15px;
	color: var(--color-text);
	margin: 0 auto 14px;
	max-width: 340px;
	line-height: 1.5;
}
.psi-lf-overlay .success .sla {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-primary-deep);
}
.psi-lf-overlay .success .sla .clock-glyph {
	width: 14px; height: 14px;
	color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
	.psi-lf-overlay .success .check-ring,
	.psi-lf-overlay .success .check-ring::after,
	.psi-lf-overlay .success .check-svg path,
	.psi-lf-overlay .success .stars span { animation: none !important; }
	.psi-lf-overlay .success .check-svg path { stroke-dashoffset: 0; }
}

/* ============================================================
   STEP 3 — OPTIONAL NOTE
   ============================================================ */
.psi-lf-overlay .note-block {
	background: #fff;
	padding: 22px 22px 18px;
	border-top: 1px solid #F2EFE8;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.psi-lf-overlay .note-block .nh {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 4px;
}
.psi-lf-overlay .note-block .nh .opt {
	color: var(--color-text-muted);
	font-weight: 400;
	font-size: 13px;
}
.psi-lf-overlay .note-block .ns {
	font-size: 13px;
	color: var(--color-text-muted);
	margin: 0 0 12px;
}
.psi-lf-overlay .note-block textarea {
	width: 100%;
	border: 1px solid var(--color-border);
	background: #FAF8F1;
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 15px;
	font-family: var(--font-sans);
	color: var(--color-text);
	resize: vertical;
	min-height: 92px;
	transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.psi-lf-overlay .note-block textarea:focus {
	outline: 0;
	background: #fff;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}
.psi-lf-overlay .note-block .row {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: 12px; gap: 12px;
}
.psi-lf-overlay .note-block .btn-send {
	background: transparent;
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
	font-weight: 500;
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-family: var(--font-sans);
	transition: background 160ms, color 160ms;
	min-height: 40px;
}
.psi-lf-overlay .note-block .btn-send:hover { background: var(--color-primary-tint); }
.psi-lf-overlay .note-block .btn-send[disabled] { opacity: 0.6; cursor: progress; pointer-events: none; }
.psi-lf-overlay .note-block .btn-close {
	background: transparent; border: 0;
	color: var(--color-text-muted);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	font-family: var(--font-sans);
	padding: 6px 8px;
}
.psi-lf-overlay .note-block .btn-close:hover { color: var(--color-text); }
.psi-lf-overlay .note-block .note-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.psi-lf-overlay .note-block .note-row[hidden],
.psi-lf-overlay .note-block .note-ask[hidden] { display: none; }

.psi-lf-overlay .note-sent {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	background: var(--color-cream-2);
	color: var(--color-primary-deep);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	animation: note-pop 360ms var(--ease-standard) both;
}
.psi-lf-overlay .note-sent svg { width: 14px; height: 14px; }
@keyframes note-pop {
	from { transform: scale(0.94); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.psi-lf-overlay .note-sent { animation: none; }
}

/* Inline error / status region (server validation echo, network failure,
   slow-request notice, no-JS-config escape hatch). Not in the prototype —
   minimal, in-key styling. */
.psi-lf-overlay .psi-lf-error {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--color-cta-hover);
}
.psi-lf-overlay .psi-lf-error[hidden] { display: none; }
.psi-lf-overlay .psi-lf-frame[aria-busy="true"] .m-body { opacity: 0.6; pointer-events: none; }

/* ============================================================
   PILLAR EMBEDDED CARD — CRO-tuned
   Solid white surface with a real raised shadow, 3 px teal hairline across
   the full top edge declaring the surface, and a CPSP + SLA trust band on a
   primary-tint strip directly above the heading. Credibility lives at the
   top where it does conversion work, not buried in a footer.
   ============================================================ */
.pillar-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
	color: var(--color-text);
	font-family: var(--font-sans);
	box-shadow:
		0 1px 0 rgba(15, 110, 86, 0.05),
		0 2px 6px rgba(26, 38, 36, 0.04),
		0 16px 36px rgba(26, 38, 36, 0.10);
}
.pillar-card::before {
	/* 3 px teal hairline across the full top edge */
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--color-primary);
}

/* Trust band — CPSP credibility at the TOP of the card */
.pillar-card .pc-trustband {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 24px;
	background: var(--color-primary-tint);
	border-bottom: 1px solid #D8E5DC;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-primary-deep);
}
.pillar-card .pc-trustband .shield-glyph {
	width: 16px; height: 16px;
	color: var(--color-primary);
	flex: 0 0 16px;
}
.pillar-card .pc-trustband .dot-sep {
	color: #B4C7BD;
	margin: 0 2px;
}
.pillar-card .pc-trustband .sla {
	color: var(--color-text-muted);
	font-weight: 400;
}

.pillar-card .pc-inner {
	padding: 24px 24px 22px;
	display: flex; flex-direction: column;
	gap: 16px;
}
.pillar-card .pc-head h3 {
	font-size: 24px; font-weight: 500;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
	color: var(--color-text);
	line-height: 1.25;
}
.pillar-card .pc-head h3 .accent {
	font-family: var(--font-serif-quote);
	font-style: italic;
	color: var(--color-primary-deep);
	margin-right: 2px;
}
.pillar-card .pc-head p {
	font-size: 15px;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.55;
	max-width: 540px;
}
.pillar-card .pc-foot {
	display: flex; align-items: center; justify-content: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}
.pillar-card .pc-cta {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}
.pillar-card .pc-cta .btn-cta {
	padding: 14px 26px;
	min-height: 50px;
	min-width: 220px;
}
.pillar-card .sched-grid { grid-template-columns: repeat(4, 1fr); }

/* Mobile pillar card variant (the prototype's .pillar-card.mobile ruleset) */
@media (max-width: 600px) {
	.pillar-card .pc-inner { padding: 20px 18px 20px; }
	.pillar-card .pc-trustband { padding: 10px 18px; font-size: 12.5px; flex-wrap: wrap; }
	.pillar-card .pc-head h3 { font-size: 20px; }
	.pillar-card .pc-foot { flex-direction: column; align-items: stretch; }
	.pillar-card .pc-cta { width: 100%; justify-content: stretch; }
	.pillar-card .pc-cta .btn-cta { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
	.pillar-card .sched-grid { grid-template-columns: repeat(2, 1fr); }
}