/* Plant Vault — Name That Neo
   Presentation layer only. Sits on the site's own page background (the
   .ftm root is transparent); tokens follow forevertropicals.com: deep
   forest greens, warm ivory, antique gold, with Forever Tropicals pink
   reserved for the primary action and small highlights.
   Georgia serif for headings (site convention), Helvetica Neue body.
   Card radius 22px matches the site's cards. */

.ftm {
	/* palette */
	--ftm-bg-deep: #0a241b;        /* deep site ground (used by gates/demo) */
	--ftm-surface: #123d2e;        /* section surface */
	--ftm-surface-2: #184b38;      /* elevated surface */
	--ftm-gold: #c6a24a;           /* antique gold */
	--ftm-gold-line: rgba(198, 162, 74, 0.38);
	--ftm-text-warm: #d7c9a8;      /* secondary warm text */
	--ftm-pink: #df3f88;           /* signature accent — used sparingly */
	--ftm-pink-deep: #c22f74;
	--ftm-ivory: #f3ebdd;
	--ftm-ink: #1d2b22;            /* site ink green, on light surfaces */
	--ftm-line: rgba(215, 201, 168, 0.22);

	/* type + shape */
	--ftm-serif: Georgia, 'Times New Roman', serif;
	--ftm-sans: 'Helvetica Neue', Arial, system-ui, sans-serif;
	--ftm-radius-card: 22px;
	--ftm-radius-pill: 999px;

	font-family: var(--ftm-sans);
	color: var(--ftm-ivory);
	background: transparent;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

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

.ftm :focus-visible {
	outline: 2px solid var(--ftm-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- 1. Hero ---------- */

/* Centered introduction: the tool presents itself mid-page, so the wide
   site canvas stays balanced instead of everything hugging the left. */
.ftm-hero {
	padding: 0.25rem 0 0.5rem;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.ftm-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
}
.ftm-mark {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: none;
}
/* rosette rides inline with the Plant Vault eyebrow — one compact line */
.ftm-eyebrow {
	font-size: 0.72rem;
	font-family: var(--ftm-sans);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: var(--ftm-gold);
	margin: 0 0 0.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.ftm-title {
	/* mirrors the site's content-title style (Georgia 700 · 44px · #f3f1ea,
	   as on "My Watchlist" and the other vault pages) */
	font-family: var(--ftm-serif);
	font-weight: 700;
	font-size: 2.75rem;
	line-height: 1.08;
	letter-spacing: normal;
	color: #f3f1ea;
	margin: 0;
	text-wrap: balance;
}
/* the site's two-tone title: last word in the header gold (#c9a24b) */
.ftm-gold-word { color: #c9a24b; }
.ftm-hook {
	font-family: var(--ftm-serif);
	font-style: italic;
	font-size: 1.12rem;
	color: var(--ftm-ivory);
	margin: 0.6rem 0 0.25rem;
}
.ftm-tagline {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ftm-text-warm);
	max-width: 52ch;
	margin: 0.35rem auto 0;
}
.ftm-feature-pills {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 1.6rem 0 0;
}
.ftm-feature-pills li {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ftm-text-warm);
	border: 1px solid var(--ftm-gold-line);
	border-radius: var(--ftm-radius-pill);
	padding: 0.42rem 0.95rem;
}

/* This stylesheet only loads on pages rendering a Plant Vault tool, so
   these page-level rules are naturally scoped. The tool announces itself
   (Plant Vault → Name That Neo), which makes the theme's own page-title
   hero a duplicate — hide it and reclaim its empty band. Kadence theme
   selectors. */
.entry-hero.page-hero-section { display: none; }
#primary.content-area { margin-top: 0.5rem; }
.entry-content-wrap { padding-top: 0.25rem; }
/* the floating site search bar eats a full row here — this page's job is
   the uploader, so hide it (again: this file only loads on tool pages) */
.ft-search-bar { display: none; }

.ftm-funnote {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--ftm-text-warm);
	max-width: 62ch;
	margin: 2rem auto 0;
	padding: 0.7rem 1.1rem;
	border: 1px solid rgba(198, 162, 74, 0.3);
	border-left: 2px solid var(--ftm-pink);
	background: rgba(18, 61, 46, 0.55);
	border-radius: 16px;
	text-align: center;
}

/* member status: useful but secondary */
.ftm-member {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0.7rem 0 0;
	font-size: 0.85rem;
	color: var(--ftm-text-warm);
}
.ftm-quota { color: var(--ftm-text-warm); }
.ftm-request-link {
	font-family: inherit;
	font-size: 0.85rem;
	background: none;
	border: none;
	padding: 0;
	color: var(--ftm-gold);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--ftm-gold-line);
}
.ftm-request-link:hover { text-decoration-color: var(--ftm-gold); }
.ftm-request-note { font-size: 0.85rem; color: var(--ftm-text-warm); }

/* ---------- 2. Workspace: photo beside questions on wide screens ---------- */

.ftm-work {
	display: grid;
	gap: 1.75rem;
	align-items: start;
	margin-top: 0.75rem;
}
.ftm-work .ftm-uploader,
.ftm-work .ftm-about { margin-top: 0; }

@media (min-width: 900px) {
	.ftm-work { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	/* photo not chosen yet (or questions elsewhere): one centered column,
	   comfortably narrow instead of stretched across the page */
	.ftm-work:has(#ftm-about[hidden]),
	.ftm-work:not(:has(#ftm-about)) { grid-template-columns: 1fr; }
	.ftm-work:has(#ftm-about[hidden]) .ftm-uploader,
	.ftm-work:not(:has(#ftm-about)) .ftm-uploader {
		max-width: 640px;
		width: 100%;
		margin-inline: auto;
	}
}

.ftm-about { margin: 2.75rem 0 0; }

.ftm-section-heading {
	font-family: var(--ftm-serif);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--ftm-ivory);
	margin: 0 0 1.1rem;
}

.ftm-field { margin: 0 0 1.1rem; }
.ftm-field-label {
	display: block;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ftm-text-warm);
	margin: 0 0 0.5rem;
}

.ftm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* chips: collector filters, not navigation tabs */
.ftm-size-btn {
	font-family: var(--ftm-sans);
	font-size: 0.92rem;
	line-height: 1;
	background: var(--ftm-surface);
	color: var(--ftm-ivory);
	border: 1px solid var(--ftm-line);
	border-radius: var(--ftm-radius-pill);
	padding: 0.62rem 1.1rem;
	min-height: 40px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ftm-size-btn:hover:not(:disabled) { border-color: var(--ftm-gold-line); }
.ftm-size-btn.is-active {
	background: var(--ftm-surface-2);
	border: 1px solid var(--ftm-gold);
	color: var(--ftm-ivory);
}
.ftm-size-btn.is-active::before {
	content: '✓';
	color: var(--ftm-gold);
	margin-right: 0.45rem;
	font-size: 0.85em;
}

/* legacy layout class kept for gates/older markup */
.ftm-sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ftm-sizes-label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ftm-text-warm);
	margin-right: 0.35rem;
}

/* Add more details */
.ftm-details { margin: 1.4rem 0 0; }
.ftm-details summary {
	cursor: pointer;
	font-size: 0.95rem;
	color: var(--ftm-gold);
	list-style-position: inside;
}
.ftm-details summary:hover { color: var(--ftm-ivory); }
.ftm-details-help {
	font-size: 0.85rem;
	color: var(--ftm-text-warm);
	margin: 0.5rem 0 0.9rem;
}
.ftm-details[open] { padding-bottom: 0.25rem; }
.ftm-details .ftm-field { margin-top: 0.9rem; }

/* ---------- 3. Upload card — the visual hero ---------- */

.ftm-uploader {
	margin: 2.25rem 0 0;
	background: linear-gradient(172deg, var(--ftm-surface-2) 0%, var(--ftm-surface) 100%);
	border: 1px solid var(--ftm-gold-line);
	border-radius: var(--ftm-radius-card);
	padding: 1.6rem 1.5rem;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ftm-uploader.ftm-dragover { border-color: var(--ftm-gold); }

/* the hero already carries the rosette — repeating it here only costs
   vertical room, so the card leads with its heading instead */
.ftm-upload-icon { display: none; }
.ftm .ftm-uploader-heading {
	font-family: var(--ftm-serif);
	font-weight: 600;
	font-size: 1.45rem;
	color: var(--ftm-ivory);
	margin: 0 0 0.5rem;
	text-wrap: balance;
}
.ftm-uploader-hint {
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--ftm-text-warm);
	margin: 0 auto;
	max-width: 46ch;
}
/* doubled class strength: the theme's .entry-content p margin (2em)
   otherwise outweighs these and inflates the card */
.ftm .ftm-uploader-hint { margin: 0 auto; }
.ftm .ftm-uploader-hint + .ftm-uploader-hint { margin-top: 0.2rem; }
.ftm .ftm-upload-tech {
	font-size: 0.78rem;
	color: var(--ftm-text-warm);
	opacity: 0.75;
	margin: 0.7rem 0 0;
}

/* staged photo preview */
.ftm-preview {
	display: block;
	max-width: min(280px, 80%);
	max-height: 280px;
	margin: 0 auto 0.7rem;
	border-radius: 14px;
	border: 1px solid var(--ftm-gold-line);
}
.ftm-picked-name {
	font-size: 0.85rem;
	color: var(--ftm-text-warm);
	margin: 0 0 0.6rem;
	overflow-wrap: anywhere;
}

/* the explicit search action after the questions */
.ftm-go { text-align: center; margin-top: 1.75rem; }
.ftm-go .ftm-btn { margin-top: 0; min-width: 240px; }

/* ---------- buttons ---------- */

.ftm-btn {
	display: inline-block;
	font-family: var(--ftm-sans);
	font-size: 1rem;
	font-weight: 500;
	background: var(--ftm-pink);
	color: #fff !important;
	border: none;
	border-radius: var(--ftm-radius-pill);
	padding: 0.8rem 2rem;
	margin-top: 1.4rem;
	cursor: pointer;
	text-decoration: none !important;
	transition: background 0.15s ease, transform 0.1s ease;
}
.ftm-btn:hover { background: var(--ftm-pink-deep); transform: translateY(-1px); }
.ftm-btn-small { font-size: 0.88rem; padding: 0.5rem 1.15rem; margin-top: 0; }

/* secondary: quiet gold ghost (used on ivory result cards) */
.ftm-btn-outline {
	background: transparent;
	border: 1px solid var(--ftm-gold);
	color: var(--ftm-ink) !important;
}
.ftm-btn-outline:hover { background: rgba(198, 162, 74, 0.14); transform: none; }
.ftm-btn-outline.is-collected {
	background: rgba(198, 162, 74, 0.16);
	border-color: var(--ftm-gold);
}

/* [plant_vault_collection] page */
.ftm-collection {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin-top: 1.75rem;
}
.ftm-collection-card h3 {
	font-family: var(--ftm-serif);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--ftm-ink);
	margin: 0.75rem 0 0.15rem;
}
.ftm-collection-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid var(--ftm-gold-line);
	display: block;
}

/* ---------- status / progress ---------- */

.ftm-status { margin: 1.5rem auto 0; max-width: 560px; text-align: center; }
.ftm-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(198, 162, 74, 0.3);
	border-top-color: var(--ftm-gold);
	border-radius: 50%;
	animation: ftm-spin 0.8s linear infinite;
	margin-right: 0.5rem;
	vertical-align: -2px;
}
@keyframes ftm-spin { to { transform: rotate(360deg); } }

.ftm-progress {
	height: 4px;
	background: rgba(198, 162, 74, 0.18);
	border-radius: var(--ftm-radius-pill);
	overflow: hidden;
}
.ftm-progress span {
	display: block;
	height: 100%;
	width: 2%;
	background: linear-gradient(90deg, var(--ftm-text-warm), var(--ftm-gold));
	border-radius: var(--ftm-radius-pill);
	animation: ftm-fill 50s cubic-bezier(0.25, 0.6, 0.35, 1) forwards;
}
@keyframes ftm-fill {
	0% { width: 2%; }
	60% { width: 72%; }
	100% { width: 95%; }
}
.ftm-progress-msg {
	margin: 0.7rem 0 0;
	font-size: 0.92rem;
	color: var(--ftm-text-warm);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.ftm-spinner { animation: none; }
	.ftm-progress span { animation: none; width: 60%; }
	.ftm-btn:hover { transform: none; }
}

/* The matcher's reply when there's no result card — rejections and
   errors. Pink-accented so it reads as THE response, never as page copy. */
.ftm-banner {
	margin: 1.5rem auto 0;
	max-width: 640px;
	padding: 1rem 1.25rem 1.1rem;
	border: 1px solid rgba(223, 63, 136, 0.55);
	border-left: 4px solid var(--ftm-pink);
	border-radius: 14px;
	background: linear-gradient(172deg, rgba(223, 63, 136, 0.14) 0%, rgba(223, 63, 136, 0.07) 100%), var(--ftm-surface);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--ftm-ivory);
}
.ftm-banner::before {
	content: 'A note from us';
	display: block;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ftm-pink);
	margin-bottom: 0.4rem;
}

/* ---------- 4. Results — the collector archive ---------- */

.ftm-results { margin: 2rem 0 0; display: grid; gap: 1rem; }
.ftm-message {
	margin: 0;
	color: var(--ftm-text-warm);
	line-height: 1.55;
	font-size: 0.98rem;
}

.ftm-card {
	background: var(--ftm-ivory);
	color: var(--ftm-ink);
	border-radius: var(--ftm-radius-card);
	padding: 1.5rem 1.75rem;
	border: 1px solid rgba(29, 43, 34, 0.08);
}
.ftm-card-top {
	border: 1px solid var(--ftm-gold);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* photo + text side by side: seeing the candidate is half the point */
.ftm-card-haspic {
	display: flex;
	gap: 1.4rem;
	align-items: flex-start;
}
.ftm-card-media {
	flex: 0 0 168px;
	text-align: center;
}
.ftm-card-photo {
	display: block;
	width: 168px;
	height: 168px;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid rgba(29, 43, 34, 0.12);
}
.ftm-card-media-label {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(29, 43, 34, 0.5);
}
.ftm-card-body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
	.ftm-card-haspic { flex-direction: column; }
	.ftm-card-media { flex-basis: auto; width: 100%; }
	.ftm-card-photo { width: 100%; height: 200px; }
}

.ftm-result-eyebrow {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ftm-gold);
	margin: 0 0 0.35rem;
}

.ftm-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.ftm-card-head h3 {
	margin: 0;
	font-family: var(--ftm-serif);
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--ftm-ink);
}
/* likelihood kept quiet — the name is the star */
.ftm-score {
	font-size: 0.8rem;
	color: rgba(29, 43, 34, 0.55);
	font-variant-numeric: tabular-nums;
}
.ftm-score small { font-size: 0.8rem; }
.ftm-tag {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--ftm-surface);
	color: var(--ftm-text-warm);
	border-radius: var(--ftm-radius-pill);
	padding: 0.28rem 0.75rem;
	white-space: nowrap;
}

.ftm-parentage { margin: 0.9rem 0 0.3rem; font-size: 0.95rem; }
.ftm-parentage p { margin: 0.2rem 0; }
.ftm-parentage span {
	display: inline-block;
	min-width: 6.8em;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(29, 43, 34, 0.55);
}
.ftm-source { font-size: 0.82rem; color: rgba(29, 43, 34, 0.65); }
.ftm-source a { color: var(--ftm-ink); }

.ftm-traits { margin: 0.7rem 0 0; font-size: 0.88rem; }
.ftm-traits span {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(29, 43, 34, 0.55);
}
.ftm-traits ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.ftm-traits li { margin: 0.12rem 0; }
.ftm-traits-conflict li { color: #8a4b2d; }

.ftm-note { font-size: 0.88rem; margin: 0.5rem 0 0; }
.ftm-excerpt { font-size: 0.9rem; line-height: 1.55; margin: 0.6rem 0 0; color: rgba(29, 43, 34, 0.85); }
.ftm-link { color: var(--ftm-ink); font-size: 0.9rem; }
.ftm-card-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; }

.ftm-review {
	margin: 0;
	padding: 0.9rem 1.15rem;
	border: 1px solid var(--ftm-line);
	border-radius: 12px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--ftm-text-warm);
}

/* ---------- feedback ---------- */

.ftm-fb-photo {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--ftm-gold-line);
	margin: 0 auto 0.8rem;
}

/* single-match verdict: the two photos face each other */
.ftm-fb-compare {
	display: flex;
	justify-content: center;
	gap: 0.9rem;
	margin: 0 0 0.9rem;
}
.ftm-fb-compare figure { margin: 0; }
.ftm-fb-compare img {
	display: block;
	width: 116px;
	height: 116px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--ftm-gold-line);
}
.ftm-fb-compare figcaption {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--ftm-text-warm);
	text-align: center;
	margin-top: 0.35rem;
}
.ftm-fb-name { color: var(--ftm-gold); font-style: normal; }

/* prominent inline card — never a footer afterthought */
.ftm-feedback {
	margin-top: 0.5rem;
	padding: 1.5rem 1.25rem;
	text-align: center;
	background: linear-gradient(172deg, var(--ftm-surface-2) 0%, var(--ftm-surface) 100%);
	border: 1px solid var(--ftm-gold-line);
	border-radius: var(--ftm-radius-card);
}
.ftm-modal-card .ftm-feedback {
	background: transparent;
	border: none;
	padding: 0.5rem 0 0;
}
.ftm-feedback p { line-height: 1.55; color: var(--ftm-ivory); }
.ftm-feedback-q {
	font-family: var(--ftm-serif);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--ftm-ivory);
	margin: 0 0 0.35rem;
}
.ftm-feedback-note {
	font-size: 0.85rem;
	color: var(--ftm-text-warm);
	margin: 0 0 0.8rem;
}
.ftm-feedback-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}
/* Once answered, the question folds away: only the chosen answer stays,
   so the follow-up underneath is unmistakably the next step. */
.ftm-fb-first.is-answered .ftm-fb-btn:not(.is-active) { display: none; }
.ftm-fb-first.is-answered .ftm-fb-btn.is-active { opacity: 0.85; }
.ftm-fb-btn {
	font-family: var(--ftm-sans);
	font-size: 0.9rem;
	background: var(--ftm-surface);
	color: var(--ftm-ivory);
	border: 1px solid var(--ftm-line);
	border-radius: var(--ftm-radius-pill);
	padding: 0.55rem 1.1rem;
	min-height: 40px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ftm-fb-btn:hover:not(:disabled) { border-color: var(--ftm-gold-line); }
.ftm-fb-btn.is-active {
	background: var(--ftm-surface-2);
	border-color: var(--ftm-gold);
}
.ftm-fb-btn:disabled:not(.is-active) { opacity: 0.4; cursor: default; }

/* candidate picker with photos: compare plants, not just names */
.ftm-fb-btn-pic {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	border-radius: 14px;
	padding: 0.6rem 0.7rem 0.55rem;
	width: 128px;
}
.ftm-fb-btn-pic img {
	display: block;
	width: 104px;
	height: 104px;
	object-fit: cover;
	border-radius: 10px;
}
.ftm-fb-btn-pic span {
	font-size: 0.78rem;
	line-height: 1.3;
}
.ftm-feedback-extra { margin-top: 0.9rem; font-size: 0.95rem; }
.ftm-feedback-extra p { color: var(--ftm-text-warm); }
.ftm-feedback-row {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.ftm-fb-input {
	font-family: var(--ftm-sans);
	font-size: 0.9rem;
	padding: 0.55rem 1rem;
	border-radius: var(--ftm-radius-pill);
	border: 1px solid var(--ftm-line);
	background: var(--ftm-ivory);
	color: var(--ftm-ink);
	min-width: 230px;
}
/* the name box after "None of these" — pink so it reads as THE next step */
.ftm-fb-input-hot {
	border: 2px solid var(--ftm-pink);
	min-width: 250px;
	font-size: 0.95rem;
	padding: 0.6rem 1.1rem;
}
.ftm-fb-input-hot:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(223, 63, 136, 0.28);
}
.ftm-fb-input-hot::placeholder { color: rgba(29, 43, 34, 0.5); }
.ftm-feedback-extra p.ftm-fb-prompt {
	font-family: var(--ftm-serif);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ftm-ivory);
	margin: 0.4rem 0 0.2rem;
}
.ftm-fb-or { margin: 0.6rem 0 0; }
.ftm-feedback-thanks { color: var(--ftm-text-warm); }

.ftm-disclaimer {
	margin: 2rem 0 2.5rem;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--ftm-text-warm);
	opacity: 0.85;
	max-width: 72ch;
}

/* ---------- gates (login / purchase) ---------- */

.ftm-gate { padding: 3rem 0; }
.ftm-gate-card {
	background: linear-gradient(172deg, var(--ftm-surface-2) 0%, var(--ftm-surface) 100%);
	border: 1px solid var(--ftm-gold-line);
	border-radius: var(--ftm-radius-card);
	max-width: 560px;
	margin: 0 auto;
	padding: 2.5rem 1.75rem;
	text-align: center;
}
.ftm-gate-card p { margin: 0.6rem auto; max-width: 46ch; line-height: 1.55; }
.ftm-lede { color: var(--ftm-text-warm); }

/* ---------- questions dialog (after photo selection) ---------- */

.ftm-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(7, 29, 22, 0.78);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.ftm-modal[hidden] { display: none; }
.ftm-modal-card {
	position: relative;
	background: linear-gradient(172deg, var(--ftm-surface-2) 0%, var(--ftm-surface) 100%);
	border: 1px solid var(--ftm-gold-line);
	border-radius: var(--ftm-radius-card);
	width: 100%;
	max-width: 620px;
	max-height: 88vh;
	overflow-y: auto;
	padding: 2rem 1.75rem 1.25rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.ftm-modal-card .ftm-about { margin: 0; }
.ftm-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ftm-text-warm);
	cursor: pointer;
	padding: 0.35rem;
}
.ftm-modal-close:hover { color: var(--ftm-ivory); }
.ftm-modal-skip-row { text-align: center; margin: 1rem 0 0.25rem; }

/* ---------- mobile ---------- */

@media (max-width: 600px) {
	.ftm { padding: 0 1.1rem; }
	.ftm-hero { padding-top: 0.75rem; }
	.ftm-mark { width: 44px; height: 44px; }
	.ftm-about { margin-top: 2rem; }
	.ftm-uploader { padding: 2.1rem 1.15rem; margin-top: 1.75rem; }
	.ftm-btn { display: block; width: 100%; }
	.ftm-btn-small { display: inline-block; width: auto; }
	.ftm-card { padding: 1.25rem 1.15rem; }
}