/* Landing page styles */

html {
	scroll-behavior: smooth;
}

/* Form input focus states */
.landing-input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}

/* CTA button hover */
[style*="background: var(--brand)"]:hover {
	filter: brightness(0.9);
}

/* ── Markdown Content ───────────────────────────────── */

.landing-md ul {
	list-style: disc;
	padding-left: 1.25rem;
	margin: 0.5rem 0;
}
.landing-md li {
	margin-bottom: 0.25rem;
}
.landing-md strong {
	font-weight: 700;
}
.landing-md em {
	font-style: italic;
}

/* ── Edit Mode ──────────────────────────────────────── */

/* FAB (floating action button) */
.edit-fab {
	position: fixed;
	bottom: 80px;
	right: 16px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	font-family: system-ui, -apple-system, sans-serif;
}

.edit-fab-main {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--brand, #6366f1);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s, box-shadow 0.15s;
}

.edit-fab-main:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.edit-fab-main:active {
	transform: scale(0.97);
}

.edit-fab-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 9999px;
	border: none;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
}

.edit-fab-pill:hover {
	background: #f3f4f6;
}

.edit-fab-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s;
}

.edit-fab-link:hover {
	background: #f3f4f6;
}

/* Status badge on FAB */
.edit-fab-status {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

/* Section edit indicators.
   At rest: a faint outline marks every editable section (discoverable but
   quiet). On hover: a clearer brand outline + a corner label chip appears
   (Framer-style). The currently-edited section keeps the strongest "active"
   outline (set via .edit-section-active from JS). */
body.editing [data-edit-section] {
	position: relative;
	outline: 1px dashed rgba(var(--brand-rgb, 99, 102, 241), 0.22);
	outline-offset: -1px;
	cursor: pointer;
	transition: outline-color 0.15s, outline-width 0.15s, box-shadow 0.15s;
}

/* Hover treatment is a fine-pointer affordance — keep touch devices clean. */
@media (hover: hover) and (pointer: fine) {
	body.editing [data-edit-section]:hover {
		outline: 2px solid rgba(var(--brand-rgb, 99, 102, 241), 0.55);
		outline-offset: -2px;
	}
}

/* Active (currently-edited) section — strongest, persistent outline. */
body.editing [data-edit-section].edit-section-active {
	outline: 2px solid rgba(var(--brand-rgb, 99, 102, 241), 0.85);
	outline-offset: -2px;
	box-shadow: 0 0 0 4px rgba(var(--brand-rgb, 99, 102, 241), 0.1);
}

/* Section label chip — hidden at rest, shown on hover or when active. */
body.editing [data-edit-section]::before {
	content: attr(data-edit-label);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	padding: 3px 9px;
	border-radius: 0 0 6px 0;
	background: var(--brand, #6366f1);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	font-family: system-ui, -apple-system, sans-serif;
	letter-spacing: 0.02em;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-2px);
	transition: opacity 0.15s, transform 0.15s;
}

@media (hover: hover) and (pointer: fine) {
	body.editing [data-edit-section]:hover::before {
		opacity: 1;
		transform: translateY(0);
	}
}

body.editing [data-edit-section].edit-section-active::before {
	opacity: 1;
	transform: translateY(0);
}

/* Prevent link navigation in edit mode */
body.editing a[href="#signup-form"] {
	pointer-events: none;
}

/* Dim non-editable sections in edit mode */
body.editing [data-edit-section] {
	background-clip: padding-box;
}

/* ── Bottom Sheet ───────────────────────────────────── */

.edit-sheet-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}

.edit-sheet-backdrop.open {
	opacity: 1;
	pointer-events: auto;
}

.edit-sheet {
	position: fixed;
	z-index: 10001;
	background: #fff;
	display: flex;
	flex-direction: column;
	font-family: system-ui, -apple-system, sans-serif;
	pointer-events: none;
}

/* ── Mobile (<1024px): bottom sheet (unchanged behavior) ── */
@media (max-width: 1023px) {
	.edit-sheet {
		bottom: 0;
		left: 0;
		right: 0;
		max-height: 85vh;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
		transform: translateY(100%) scale(0.95);
		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.2s ease;
	}

	.edit-sheet.open {
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}
}

/* ── Desktop (≥1024px): persistent RIGHT INSPECTOR PANEL ── */
@media (min-width: 1024px) {
	.edit-sheet {
		top: 0;
		right: 0;
		bottom: 0;
		width: 380px;
		max-height: none;
		border-radius: 0;
		border-left: 1px solid #e5e7eb;
		box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
		transform: translateX(100%);
		transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	}

	.edit-sheet.open {
		transform: translateX(0);
		pointer-events: auto;
	}

	/* The live page is never covered — backdrop + drag handle are mobile-only. */
	.edit-sheet-backdrop {
		display: none;
	}

	.edit-sheet-handle {
		display: none;
	}

	/* Shift the page left so the open panel sits beside it (never over it). */
	body.edit-panel-open {
		padding-right: 380px;
		transition: padding-right 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	}
}

.edit-sheet-handle {
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background: #d1d5db;
	margin: 8px auto 0;
	flex-shrink: 0;
}

.edit-sheet-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px 10px;
	flex-shrink: 0;
}

.edit-sheet-titlegroup {
	min-width: 0;
}

.edit-sheet-title {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	margin: 0;
}

/* One-line "what this section is for" hint under the title */
.edit-sheet-hint {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280;
}

.edit-sheet-hint:empty {
	display: none;
}

/* SOFT button (tinted, never solid primary) per by.coach convention */
.edit-sheet-done {
	flex-shrink: 0;
	padding: 7px 16px;
	border-radius: 8px;
	border: none;
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.12);
	color: var(--brand, #6366f1);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.edit-sheet-done:hover {
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.2);
}

.edit-sheet-body {
	padding: 8px 20px 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	flex: 1;
}

/* ── Sticky Saved / Undo footer ──────────────────────── */
.edit-sheet-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px;
	border-top: 1px solid #f3f4f6;
	flex-shrink: 0;
	background: #fff;
}

.edit-sheet-savestate {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
}

.edit-sheet-savestate.is-saved {
	color: #16a34a;
}

.edit-sheet-savestate.is-unsaved {
	color: #b45309;
}

.edit-sheet-undo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #374151;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.edit-sheet-undo:hover:not(:disabled) {
	border-color: var(--brand, #6366f1);
	color: var(--brand, #6366f1);
}

.edit-sheet-undo:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Sheet form elements */
.edit-field-group {
	margin-bottom: 18px;
}

.edit-field-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 7px;
}

.edit-field-sublabel {
	font-weight: 400;
	color: #9ca3af;
	margin-left: 4px;
}

/* Right-aligned char count in the label row (e.g. "25 / 40") */
.edit-field-charcount {
	margin-left: auto;
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: #9ca3af;
	white-space: nowrap;
}

.edit-field-charcount.over {
	color: #ef4444;
}

.edit-field-input,
.edit-field-textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.45;
	font-family: inherit;
	color: #111827;
	background: #f9fafb;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	box-sizing: border-box;
}

.edit-field-input:hover,
.edit-field-textarea:hover {
	border-color: #d1d5db;
}

.edit-field-input:focus,
.edit-field-textarea:focus {
	outline: none;
	border-color: var(--brand, #6366f1);
	box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 99, 102, 241), 0.14);
	background: #fff;
}

/* Conversion-advice line under a field */
.edit-field-guidance {
	margin-top: 7px;
	font-size: 12px;
	line-height: 1.45;
	color: #6b7280;
}

.edit-field-guidance.is-good {
	color: #16a34a;
	font-weight: 500;
}

.edit-field-guidance.is-good::before {
	content: "\2713";
	margin-right: 5px;
	font-weight: 700;
}

.edit-field-textarea {
	resize: none;
	overflow: hidden;
	min-height: 80px;
	max-height: 50vh;
}

.edit-field-textarea.capped {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.edit-field-counter {
	text-align: right;
	font-size: 12px;
	color: #9ca3af;
	margin-top: 4px;
}

.edit-field-counter.over {
	color: #ef4444;
}

.edit-field-undo {
	display: none;
	margin-left: 6px;
	padding: 0 4px;
	border: none;
	background: none;
	color: #9ca3af;
	font-size: 14px;
	cursor: pointer;
	vertical-align: middle;
}

.edit-field-undo:hover {
	color: var(--brand, #6366f1);
}

.edit-field-preview {
	padding: 10px 12px;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	background: #f9fafb;
	font-size: 15px;
	line-height: 1.6;
	min-height: 80px;
}

.edit-field-preview ul {
	margin: 4px 0;
	padding-left: 20px;
	list-style: disc;
}

.edit-field-preview strong {
	font-weight: 700;
}

.edit-field-preview em {
	font-style: italic;
}

.edit-field-preview-toggle {
	margin-left: 8px;
	padding: 2px 8px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: #6b7280;
	font-size: 11px;
	cursor: pointer;
	vertical-align: middle;
}

.edit-field-preview-toggle:hover {
	border-color: var(--brand);
	color: var(--brand);
}

/* List editor items */
.edit-list-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #f3f4f6;
}

.edit-list-item:last-child {
	border-bottom: none;
}

.edit-list-item-input {
	flex: 1;
	padding: 8px 10px;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: #111827;
	background: #f9fafb;
	box-sizing: border-box;
}

.edit-list-item-input:focus {
	outline: none;
	border-color: var(--brand, #6366f1);
	background: #fff;
}

.edit-list-remove {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: none;
	background: none;
	color: #9ca3af;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color 0.15s, background 0.15s;
}

.edit-list-remove:hover {
	color: #ef4444;
	background: #fef2f2;
}

.edit-list-add {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	margin-top: 8px;
	border-radius: 8px;
	border: 2px dashed #d1d5db;
	background: none;
	color: #6b7280;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	transition: border-color 0.15s, color 0.15s;
}

.edit-list-add:hover {
	border-color: var(--brand, #6366f1);
	color: var(--brand, #6366f1);
}

/* FAQ / Testimonial compound items */
.edit-compound-item {
	padding: 12px;
	margin-bottom: 8px;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	background: #fafafa;
}

.edit-compound-item .edit-field-group:last-child {
	margin-bottom: 0;
}

.edit-compound-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.edit-compound-label {
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
}

/* Section reorder */
.edit-reorder-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 4px;
	background: #fff;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
}

.edit-reorder-grip {
	color: #9ca3af;
	flex-shrink: 0;
}

.edit-drag-handle {
	cursor: grab;
	touch-action: none;
}

.edit-drag-handle:active {
	cursor: grabbing;
}

.edit-sortable-ghost {
	opacity: 0.4;
}

.edit-sortable-chosen {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.edit-sortable-drag {
	opacity: 0.9;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	border-radius: 10px;
}

.edit-reorder-name {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	color: #374151;
}

/* Color picker */
.edit-color-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 0;
}

.edit-color-swatch {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid transparent;
	cursor: pointer;
	transition: transform 0.15s, border-color 0.15s;
}

.edit-color-swatch:hover {
	transform: scale(1.1);
}

.edit-color-swatch.active {
	border-color: #111827;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827;
}

.edit-color-group-label {
	width: 100%;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
	margin-top: 8px;
}
.edit-color-group-label:first-child {
	margin-top: 0;
}

.edit-color-custom {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.edit-color-preview {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 2px solid #e5e7eb;
	flex-shrink: 0;
}

/* Image field */
.edit-image-preview {
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 8px;
}

/* Video field preview */
.edit-video-preview {
	width: 100%;
	max-width: 400px;
	margin: 12px auto 8px;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #f3f4f6;
}
.dark .edit-video-preview {
	background: #1f2937;
}
.edit-video-preview iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.edit-video-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #9ca3af;
	font-size: 13px;
}

.edit-image-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.edit-image-btn {
	padding: 8px 14px;
	border-radius: 8px;
	border: 1.5px solid #e5e7eb;
	background: #fff;
	color: #374151;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
}

.edit-image-btn:hover {
	background: #f3f4f6;
}

.edit-image-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Unsplash search panel */
.edit-unsplash-panel {
	border-top: 1px solid #f3f4f6;
	padding-top: 10px;
}

.edit-unsplash-input-wrap {
	position: relative;
	margin-bottom: 10px;
}

.edit-unsplash-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	pointer-events: none;
	display: flex;
}

.edit-unsplash-input {
	padding-left: 36px !important;
}

.edit-unsplash-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.edit-unsplash-cell {
	position: relative;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	transition: transform 0.15s, box-shadow 0.15s;
}

.edit-unsplash-cell:hover {
	transform: scale(1.02);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.edit-unsplash-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.edit-unsplash-credit {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px 6px 4px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	text-align: left;
	pointer-events: none;
}

.edit-unsplash-status {
	text-align: center;
	font-size: 13px;
	color: #6b7280;
	padding: 8px 0;
}

.edit-unsplash-status.error {
	color: #dc2626;
}

.edit-unsplash-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 10px 0 4px;
}

.edit-unsplash-page-info {
	font-size: 13px;
	color: #6b7280;
	min-width: 50px;
	text-align: center;
}

/* Richtext contenteditable editor */
.edit-field-richtext {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	font-size: 15px;
	font-family: inherit;
	color: #111827;
	background: #f9fafb;
	line-height: 1.6;
	min-height: 80px;
	max-height: 50vh;
	overflow-y: auto;
	outline: none;
	-webkit-user-select: text;
	user-select: text;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.edit-field-richtext:focus {
	border-color: var(--brand, #6366f1);
	box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 99, 102, 241), 0.12);
	background: #fff;
}

.edit-field-richtext:empty::before {
	content: attr(data-placeholder);
	color: #9ca3af;
	pointer-events: none;
}

.edit-field-richtext ul {
	list-style: disc;
	padding-left: 20px;
	margin: 4px 0;
}

.edit-field-richtext strong {
	font-weight: 700;
}

.edit-field-richtext em {
	font-style: italic;
}

/* Formatting toolbar */
.edit-md-toolbar {
	display: flex;
	gap: 4px;
	margin-bottom: 6px;
}

.edit-md-btn {
	min-width: 36px;
	height: 32px;
	border: 1.5px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	color: #374151;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, border-color 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.edit-md-btn:hover,
.edit-md-btn:active {
	background: #f3f4f6;
	border-color: var(--brand, #6366f1);
	color: var(--brand, #6366f1);
}

.edit-md-btn-italic {
	font-style: italic;
}

.edit-md-btn-bold {
	font-weight: 800;
}

/* Toast notification */
.edit-toast {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	z-index: 10002;
	padding: 10px 18px;
	border-radius: 10px;
	background: #111827;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	font-family: system-ui, -apple-system, sans-serif;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
	white-space: nowrap;
}

.edit-toast.visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.edit-toast.success {
	background: #059669;
}

.edit-toast.error {
	background: #dc2626;
}

/* ── Inspector image block (Stage 2 redesign) ─────────────
   Thumbnail + filename/dims + primary "Reposition" + Replace/Remove.
   Matches design frame 02 (inspector image field). */
.edit-image-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Thumbnail + meta row (filename · dims · format · ratio) */
.edit-image-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.edit-image-thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	background: #f3f4f6;
	flex-shrink: 0;
	border: 1px solid #e5e7eb;
}

.edit-image-meta-text {
	min-width: 0;
	flex: 1;
}

.edit-image-filename {
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.edit-image-dims {
	margin-top: 2px;
	font-size: 12px;
	color: #9ca3af;
	font-variant-numeric: tabular-nums;
}

/* "Add a photo" empty prompt (no current image) */
.edit-image-empty {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px dashed #d1d5db;
	border-radius: 12px;
	background: #f9fafb;
	color: #6b7280;
	font-size: 13px;
}

.edit-image-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.1);
	color: var(--brand, #6366f1);
	flex-shrink: 0;
}

/* Primary "Reposition focal point" button — SOFT (tinted), full width */
.edit-image-reposition {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	padding: 12px 16px;
	border-radius: 10px;
	border: none;
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.12);
	color: var(--brand, #6366f1);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.edit-image-reposition:hover {
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.2);
}

/* Secondary Replace / Remove row */
.edit-image-secondary {
	display: flex;
	gap: 8px;
}

.edit-image-secondary .edit-image-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ── Reposition (focal-point) modal — Stage 2 ─────────────
   Fullscreen photo with a rule-of-thirds grid; the coach drags the
   image under a fixed aspect-locked frame (CropperJS engine). On-brand
   chrome, NOT the default CropperJS skin (frame 03). */
.edit-crop-overlay {
	position: fixed;
	inset: 0;
	/* Above the inspector panel (.edit-sheet z-index 10001) so the full-screen
	   reposition modal — and its Done button — is never covered by the panel. */
	z-index: 100000;
	background: #0f0f14;
	display: flex;
	flex-direction: column;
}

.edit-crop-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	padding-top: max(14px, env(safe-area-inset-top));
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.edit-crop-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: transparent;
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s;
}

.edit-crop-back:hover {
	background: rgba(255, 255, 255, 0.08);
}

.edit-crop-titlegroup {
	flex: 1;
	min-width: 0;
}

.edit-crop-title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.2;
}

.edit-crop-subtitle {
	margin: 2px 0 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "Done" — SOFT tinted button on dark chrome */
.edit-crop-done {
	flex-shrink: 0;
	padding: 9px 18px;
	border-radius: 8px;
	border: none;
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.28);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}

.edit-crop-done:hover {
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.42);
}

.edit-crop-done:disabled {
	opacity: 0.5;
	cursor: default;
}

.edit-crop-stage {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	position: relative;
}

/* The CropperJS image lives here; cap its size so it sits in the stage. */
.edit-crop-stage img {
	display: block;
	max-width: 100%;
	max-height: 100%;
}

/* The "Drag to set focal point" hint floats over the top-left of the frame. */
.edit-crop-draghint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 8px;
	background: rgba(15, 15, 20, 0.72);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	pointer-events: none;
}

.edit-crop-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	padding-bottom: max(12px, env(safe-area-inset-bottom));
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: #0f0f14;
	flex-shrink: 0;
}

.edit-crop-hint {
	flex: 1;
	min-width: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
}

/* "How it'll crop" live preview thumbnail (right of the footer). */
.edit-crop-preview-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.edit-crop-preview-label {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	text-align: right;
	line-height: 1.2;
}

.edit-crop-preview {
	width: 48px;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(255, 255, 255, 0.14);
	flex-shrink: 0;
}

.edit-crop-cancel {
	flex-shrink: 0;
	padding: 10px 16px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
}

.edit-crop-cancel:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* Re-skin the CropperJS engine to the focal-point feel of frame 03:
   rule-of-thirds guides, soft dashed view-box, no checkerboard bg. */
.edit-crop-overlay .cropper-view-box {
	outline: 1px solid rgba(255, 255, 255, 0.85);
	outline-color: rgba(255, 255, 255, 0.85);
}

.edit-crop-overlay .cropper-dashed {
	border-color: rgba(255, 255, 255, 0.55);
	opacity: 1;
}

.edit-crop-overlay .cropper-line,
.edit-crop-overlay .cropper-point {
	background-color: transparent;
}

.edit-crop-overlay .cropper-center {
	opacity: 0.85;
}

.edit-crop-overlay .cropper-face {
	background-color: transparent;
}

.edit-crop-overlay .cropper-modal {
	background-color: rgba(15, 15, 20, 0.78);
	opacity: 1;
}

/* ── App Preview Phone Frame ──────────────────────────── */

.landing-phone-frame {
	background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
	border-radius: 36px;
	padding: 8px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0
		1px rgba(255, 255, 255, 0.1);
	width: 280px;
	margin: 0 auto;
}

.landing-phone-screen {
	border-radius: 28px;
	overflow: hidden;
	background: #fff;
	min-height: 480px;
}

.dark .landing-phone-screen {
	background: #111827;
}

.landing-phone-notch {
	width: 80px;
	height: 24px;
	background: #0a0a0a;
	border-radius: 0 0 16px 16px;
	margin: 0 auto;
}

.landing-phone-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 20px 0;
	font-size: 11px;
	font-weight: 600;
	color: #111827;
}

.dark .landing-phone-status {
	color: #e5e7eb;
}

.landing-phone-content {
	padding: 12px 16px 20px;
}

/* ============================================
   Landing-conversion plan 2026-06-11 (S2)
   "Living proof" before/after crossfade.
   6s cycle: before visible 0–2.4s, 0.6s fade,
   after visible 3–5.4s, 0.6s fade back.
   ============================================ */

@keyframes tx-fade-front {
	0%,
	40% {
		opacity: 1;
	}
	50%,
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes tx-fade-back {
	0%,
	40% {
		opacity: 0;
	}
	50%,
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* The BEFORE image sits on top of the AFTER base layer and fades in/out. */
.tx-fade-front {
	animation: tx-fade-front 6s ease-in-out infinite;
}

/* Label chip: "Before" fades with the front image, "After" complements it. */
.tx-fade-label-front {
	display: inline-block;
	animation: tx-fade-front 6s ease-in-out infinite;
}

.tx-fade-label-back {
	display: inline-flex;
	animation: tx-fade-back 6s ease-in-out infinite;
	opacity: 0;
}

/* Reduced motion: stop the loop and rest on the AFTER state (the honest
   static proof) — front/before layer hidden, back label shown. */
@media (prefers-reduced-motion: reduce) {
	.tx-fade-front,
	.tx-fade-label-front {
		animation: none;
		opacity: 0;
	}

	.tx-fade-label-back {
		animation: none;
		opacity: 1;
	}
}

/* ============================================
   Before/After SLIDER (displayMode='slider')
   AFTER is the base layer; BEFORE is clipped from
   the right by clip-path: inset(0 (100% - pos) 0 0)
   so the BEFORE image keeps full width (crops stay
   aligned) and only its left `--tx-pos` slice shows.
   --tx-pos defaults to 50% → no-JS / reduced-motion
   rests at a centered honest split. JS rewrites
   --tx-pos as the visitor drags the handle.
   ============================================ */

.tx-slider {
	--tx-pos: 50%;
	touch-action: none;
}

.tx-slider-before {
	/* Reveal only the left `--tx-pos` of the BEFORE image. */
	clip-path: inset(0 calc(100% - var(--tx-pos)) 0 0);
}

.tx-slider-divider {
	left: var(--tx-pos);
}

.tx-slider-line {
	left: -1px;
	width: 2px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 1px rgba(15, 15, 20, 0.25);
}

/* ≥44px tap/drag target. Centered on the divider line. */
.tx-slider-handle {
	width: 44px;
	height: 44px;
	background: rgba(15, 15, 20, 0.62);
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(15, 15, 20, 0.3);
}

.tx-slider.is-dragging {
	cursor: ew-resize;
}

/* No animation/transition involved, so reduced-motion needs no override —
   the slider rests at the default 50% split and remains fully draggable. */

/* ============================================
   Multi-image MANUAL swipe (displayMode='swipe')
   ---------------------------------------------
   Horizontal scroll-snap track of journey stages
   (or the before/after pair as 2 slides). Native
   finger-swipe works with NO JS; the swipe script
   wires arrows + dots + active sync. NO autoplay
   anywhere — manual-advance only by design.
   ============================================ */

.tx-swipe-track {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	/* Trailing inline padding so the LAST slide can snap flush-left while a
	   peek of the previous slide rather than dead space sits to its right. */
	padding: 0 14% 0 0;
}
.tx-swipe-track::-webkit-scrollbar {
	display: none; /* WebKit */
}

/* Each slide is 88% of the track → a ~12% peek of the next slide is visible,
   the documented "there's more" affordance that beats a flush single image. */
.tx-swipe-slide {
	flex: 0 0 88%;
	scroll-snap-align: start;
}

/* ≥44px circular arrow controls. Hidden until the swipe script adds
   .tx-swipe-enhanced (a no-JS visitor finger-swipes + never sees dead buttons).
   A single-slide swipe gets .tx-swipe-static → controls stay hidden. */
.tx-swipe-arrow {
	display: none;
	width: 44px;
	height: 44px;
	background: rgba(15, 15, 20, 0.62);
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(15, 15, 20, 0.3);
	cursor: pointer;
	transition: opacity 120ms ease;
}
.tx-swipe-enhanced .tx-swipe-arrow {
	display: flex;
}
.tx-swipe-static .tx-swipe-arrow,
.tx-swipe-static .tx-swipe-dots {
	display: none;
}
.tx-swipe-arrow[disabled] {
	opacity: 0.32;
	cursor: default;
	pointer-events: none;
}

.tx-swipe-dot {
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: var(--color-hair-strong, rgba(15, 15, 20, 0.18));
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 120ms ease, transform 120ms ease;
}
.tx-swipe-dot.is-active {
	background: var(--brand-deep, var(--color-brand, #6366f1));
	transform: scale(1.25);
}

/* Reduced motion is handled in the script (instant scroll, no smooth behavior);
   no CSS animation is involved here. */

/* ============================================
   Optional VIDEO mode (displayMode='video')
   ---------------------------------------------
   FACADE-loaded: the SSR ships only a poster +
   play button; the heavy player (YouTube/Vimeo
   iframe or a native <video>) is mounted on click
   in the SAME box → NO layout shift, fast LCP.
   NEVER audio-autoplays on load (player created
   only after the click gesture).
   ============================================ */

.tx-video-play {
	cursor: pointer;
	border: none;
	background: transparent;
	padding: 0;
	width: 100%;
	transition: transform 140ms ease;
}
.tx-video-play:hover .tx-video-play-btn {
	transform: scale(1.06);
	background: rgba(15, 15, 20, 0.78);
}
.tx-video-play:focus-visible {
	outline: 3px solid var(--brand-deep, var(--color-brand, #6366f1));
	outline-offset: -3px;
}

/* Subtle top-to-bottom scrim so the play button reads on any poster. */
.tx-video-scrim {
	background: linear-gradient(180deg, rgba(15, 15, 20, 0) 40%, rgba(15, 15, 20, 0.28) 100%);
	pointer-events: none;
}

/* ≥56px circular play target, white-on-dark, centered. */
.tx-video-play-btn {
	width: 64px;
	height: 64px;
	color: #fff;
	background: rgba(15, 15, 20, 0.62);
	border: 2px solid rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 14px rgba(15, 15, 20, 0.38);
	transition: transform 140ms ease, background 140ms ease;
	/* Nudge the play triangle to optically center it in the circle. */
	padding-left: 4px;
}

/* The mounted player fills the facade box exactly (no layout shift). */
.tx-video-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: cover;
	background: #000;
}

/* ============================================
   S4 — sales-letter prose rhythm
   ============================================ */

.letter-prose p + p {
	margin-top: 1em;
}

/* ============================================
   Live editor — Stage 3
   (mobile sheet refinement, pool picker, preview)
   ============================================ */

/* ── Mobile sheet header: Done + Close (✕) ──────────── */
.edit-sheet-header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* Close button — discards (with confirm). Quiet square, never the loud action. */
.edit-sheet-close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: none;
	background: none;
	color: #9ca3af;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.edit-sheet-close:hover {
	color: #374151;
	background: #f3f4f6;
}

/* The mobile bottom sheet must stay comfortably scrollable when content is
   tall. Header + footer are fixed; only the body scrolls. */
@media (max-width: 1023px) {
	.edit-sheet-body {
		overscroll-behavior: contain;
	}
}

/* ── Pool picker (testimonials + transformations) ───── */
.edit-pool-hint {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #6b7280;
}

.edit-pool-empty {
	margin-top: 10px;
	padding: 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 10px;
}

.edit-pool-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Small section divider ("On this page · N" / "In your library · N") */
.edit-pool-divider {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9ca3af;
	margin: 6px 2px 0;
}

.edit-pool-divider:first-child {
	margin-top: 0;
}

/* Library row — clean premium card (matches frame 04 list cards) */
.edit-pool-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border: 1.5px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.edit-pool-row:hover {
	border-color: #d1d5db;
}

/* Included rows stand out — brand-tinted border + faint wash. */
.edit-pool-row.is-selected {
	border-color: rgba(var(--brand-rgb, 99, 102, 241), 0.45);
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.04);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.edit-pool-grip {
	color: #c4c7cc;
	flex: 0 0 16px;
	display: flex;
	align-items: center;
}

.edit-pool-content {
	flex: 1;
	min-width: 0;
}

/* Include control — obvious pill toggle (✓ Included / + Add) */
.edit-pool-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 11px;
	border-radius: 9999px;
	border: 1.5px solid #e5e7eb;
	background: #fff;
	color: #6b7280;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.edit-pool-toggle:hover {
	border-color: var(--brand, #6366f1);
	color: var(--brand, #6366f1);
}

/* Included state — soft brand fill (by.coach soft-button convention) */
.edit-pool-toggle.is-on {
	border-color: transparent;
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.14);
	color: var(--brand, #6366f1);
}

.edit-pool-toggle.is-on:hover {
	background: rgba(var(--brand-rgb, 99, 102, 241), 0.22);
}

/* ── Preview mode ───────────────────────────────────── */
/* Purely visual: hide every piece of edit chrome so the real page shows. */
.edit-fab-pill-preview {
	color: var(--brand, #6366f1);
	font-weight: 600;
}

body.editing-preview .edit-fab,
body.editing-preview .edit-sheet,
body.editing-preview .edit-sheet-backdrop {
	display: none !important;
}

/* No outlines, labels, or cursors while previewing. */
body.editing-preview [data-edit-section] {
	outline: none !important;
	box-shadow: none !important;
	cursor: default !important;
}

body.editing-preview [data-edit-section]::before {
	display: none !important;
}

/* Restore signup-form interactivity look while previewing (still inert via JS). */
body.editing-preview {
	padding-right: 0 !important;
}

/* "Back to editing" floating control while previewing */
.edit-preview-exit {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 10002;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 9999px;
	border: none;
	background: var(--brand, #6366f1);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	font-family: system-ui, -apple-system, sans-serif;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.2s, transform 0.2s;
}

.edit-preview-exit.visible {
	opacity: 1;
	transform: translateY(0);
}

.edit-preview-exit:hover {
	filter: brightness(0.95);
}