/* =====================================================================
   JOURNEY — FORM FLOW (one question per screen)
   ---------------------------------------------------------------------
   Used by pages with chrome "flow" (components/flow/form-flow.tsx), which
   load no WordPress stylesheet: this file is the whole design.
   Tokens are the theme's own (global.css / the form pages' CSS).
   ===================================================================== */

:root {
	--bg:            #fcfbf9;
	--card:          #fff;
	--ink:           #0F0F0F;
	--ink-mute:      #5E5E5C;
	--ink-soft:      #9A9892;
	--line:          #E8E4D8;
	--track:         #EFEBE1;
	--gold-soft:     #F1E4C3;
	--gold-wash:     #FBF6EA;
	--gold-cta:      #cea96f;
	--gold-cta-deep: #B7913F;
	--gold-deep:     #8C6E2B;
	--cream-pill:    #d7c6ab;
	--error:         #C0492F;
	--serif:         'Lora', Georgia, serif;
	--sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--ease:          cubic-bezier(.2, .7, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.jf-body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

:where(.jf) :where(button, input, textarea) { font: inherit; color: inherit; }
:where(.jf) button { -webkit-appearance: none; appearance: none; }
:where(.jf) a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
:where(.jf) a:hover { color: var(--ink); }

.jf :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.jf-title:focus, .jf-title:focus-visible, .jf-input:focus-visible { outline: none; }

/* ---------- Progress: a hairline across the top ---------- */
.jf-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--track);
	z-index: 20;
}
.jf-progress > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--gold-cta), var(--gold-cta-deep));
	border-radius: 0 3px 3px 0;
	transition: width .4s var(--ease);
}

/* ---------- Top bar: back · logo ---------- */
.jf-top {
	position: sticky;
	top: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	height: 60px;
	padding: 3px 12px 0;
	background: var(--bg);
}
.jf-logo {
	justify-self: center;
	display: block;
	height: 44px;
	width: auto;
}
.jf-back {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background .15s;
}
.jf-back:hover { background: var(--track); }

/* ---------- The screen ---------- */
.jf-main {
	display: flex;
	justify-content: center;
	min-height: calc(100vh - 60px);
	min-height: calc(100dvh - 60px);
	padding: clamp(20px, 9vh, 104px) 24px 64px;
}
.jf-screen {
	width: 100%;
	max-width: 540px;
	animation: jf-in .32s var(--ease) both;
}
@keyframes jf-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.jf-resume {
	margin: 0 0 28px;
	font-size: .9375rem;
	color: var(--ink-mute);
}
.jf-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.jf-eyebrow {
	margin: 0 0 14px;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.jf-lead {
	margin: 0 0 10px;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--ink-mute);
}

.jf-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2.125rem, 1.45rem + 2.6vw, 3rem);
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--ink);
	text-wrap: balance;
}

.jf-text {
	margin: 14px 0 0;
	max-width: 38ch;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--ink-mute);
	text-wrap: pretty;
}
.jf-text + .jf-text { margin-top: 10px; }

.jf-body { margin-top: 32px; }

/* ---------- Primary action ---------- */
.jf-actions { margin-top: 24px; }
.jf-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 58px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, transform .12s var(--ease), color .2s;
}
.jf-cta:hover { background: #2B2A27; }
.jf-cta:active { transform: scale(.985); }
.jf-cta:disabled {
	background: var(--track);
	color: var(--ink-mute);
	cursor: default;
	transform: none;
}
.jf-arrow { transition: transform .2s var(--ease); }
a.jf-cta { text-decoration: none; color: #fff; }

/* The reveal's button fills as the profile approaches; any tap or key stops it (the class goes). */
.jf-countdown { position: relative; overflow: hidden; isolation: isolate; }
.jf-countdown::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(206, 169, 111, .0), rgba(206, 169, 111, .55));
	transform: scaleX(0);
	transform-origin: left;
	animation: jf-count var(--jf-seconds, 6s) linear forwards;
}
@keyframes jf-count { to { transform: scaleX(1); } }
.jf-cta:hover .jf-arrow { transform: translateX(3px); }

/* ---------- Text inputs ---------- */
.jf-fields { display: grid; gap: 16px; }
.jf-row { grid-template-columns: 1fr 1fr; gap: 12px; }
.jf-field { display: grid; gap: 8px; align-content: start; }
.jf-label {
	font-size: .875rem;
	font-weight: 500;
	color: var(--ink-mute);
}
.jf-input {
	width: 100%;
	height: 62px;
	padding: 0 20px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--card);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--ink);
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.jf-input::placeholder { color: #B3AFA6; opacity: 1; }
.jf-input:hover { border-color: var(--cream-pill); }
.jf-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--gold-soft); }
.jf-input[aria-invalid="true"] { border-color: var(--error); }
.jf-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px #F6DDD6; }
.jf-textarea {
	display: block;
	height: auto;
	min-height: 156px;
	padding: 16px 20px;
	font-size: 1.0625rem;
	line-height: 1.55;
	resize: vertical;
}

.jf-error {
	margin: 4px 0 0;
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--error);
}
.jf-error:empty { display: none; }
.jf-body > .jf-error { margin-top: 14px; }

/* ---------- Choices ---------- */
.jf-options { display: grid; gap: 10px; }
.jf-option {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 60px;
	padding: 14px 16px 14px 18px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--card);
	text-align: left;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--ink);
	cursor: pointer;
	transition: border-color .15s, background .15s, box-shadow .15s, transform .12s var(--ease), opacity .15s;
	touch-action: manipulation;
}
.jf-option:hover { border-color: var(--cream-pill); }
.jf-option:active { transform: scale(.99); }
.jf-option[aria-pressed="true"] {
	border-color: var(--gold-cta-deep);
	background: var(--gold-wash);
	box-shadow: inset 0 0 0 1px var(--gold-cta-deep);
}
.jf-option[aria-disabled="true"], .jf-msg[aria-disabled="true"] { opacity: .4; cursor: default; }
.jf-option[aria-disabled="true"]:active, .jf-msg[aria-disabled="true"]:active { transform: none; }

.jf-icon {
	flex: none;
	width: 28px;
	font-size: 1.375rem;
	line-height: 1;
	text-align: center;
}
.jf-option-main { flex: 1; min-width: 0; }
.jf-option-label { display: block; }
.jf-option-sub {
	display: block;
	margin-top: 3px;
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--ink-mute);
}

/* Marks: a ring for one-of, a rounded square for several, a number for order. */
.jf-mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1.5px solid #D6D0C2;
	border-radius: 50%;
	color: transparent;
	transition: background .15s, border-color .15s, color .15s;
}
.jf-mark-check { border-radius: 8px; }
[aria-pressed="true"] > .jf-mark { background: var(--ink); border-color: var(--ink); color: #fff; }

.jf-rank-num {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1.5px dashed #D6D0C2;
	border-radius: 50%;
	font-size: .875rem;
	font-weight: 600;
	color: #fff;
	transition: background .15s, border-color .15s;
}
.jf-rank[aria-pressed="true"] .jf-rank-num { background: var(--ink); border: 1.5px solid var(--ink); }

/* Hours: a grid of chips */
.jf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jf-chip {
	justify-content: center;
	min-height: 56px;
	padding: 10px 8px;
	text-align: center;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Scales: a slider's 1–7 or a Likert row's 1–5, ends named underneath */
.jf-scale-row { display: flex; gap: 8px; }
.jf-scale-num {
	flex: 1 1 0;
	justify-content: center;
	min-width: 0;
	min-height: 60px;
	padding: 0;
	font-size: 1.125rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.jf-scale-ends {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 10px;
	font-size: .875rem;
	line-height: 1.35;
	color: var(--ink-mute);
}
.jf-scale-ends span:last-child { text-align: right; }

/* ---------- Texts (nudges look like the messages they are) ---------- */
.jf-bubbles, .jf-msgs { display: grid; gap: 10px; }
.jf-bubbles { margin-bottom: 8px; }
.jf-bubble {
	justify-self: start;
	max-width: 88%;
	margin: 0;
	padding: 11px 16px;
	border-radius: 20px 20px 20px 6px;
	background: var(--track);
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--ink);
	transition: background .15s, box-shadow .15s;
}
.jf-msg {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 2px 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
	transition: opacity .15s;
}
.jf-msg .jf-bubble { flex: 0 1 auto; }
.jf-msg .jf-mark { margin-left: auto; }
.jf-msg:hover .jf-bubble { box-shadow: inset 0 0 0 1px var(--cream-pill); }
.jf-msg[aria-pressed="true"] .jf-bubble {
	background: var(--gold-soft);
	box-shadow: inset 0 0 0 1.5px var(--gold-cta-deep);
}
.jf-msg:active .jf-bubble { transform: scale(.99); }

/* ---------- Small print ---------- */
.jf-fine {
	margin: 18px 0 0;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--ink-mute);
}
.jf-fine + .jf-fine { margin-top: 10px; }

/* ---------- The reveal ---------- */
.jf-reveal-img {
	display: block;
	width: 144px;
	height: 144px;
	margin: 0 0 24px;
	border-radius: 18px;
	object-fit: cover;
	box-shadow: 0 18px 40px -24px rgba(15, 15, 15, .35);
	animation: jf-pop .6s var(--ease) both;
}
@keyframes jf-pop {
	from { opacity: 0; transform: scale(.86); }
	to   { opacity: 1; transform: none; }
}
.jf-powers { margin-top: 28px; }
.jf-powers .jf-label { margin: 0 0 10px; }
.jf-powers ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jf-powers li {
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	font-size: .9375rem;
	line-height: 1.3;
	color: var(--ink);
}

/* Gravity Forms' confirmation message, set like a title */
.jf-confirmation {
	font-family: var(--serif);
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--ink);
	text-wrap: balance;
}
.jf-confirmation p { margin: 0 0 .6em; }
.jf-confirmation a { color: var(--ink); }

/* ---------- Out of sight ---------- */
.jf-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.jf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jf-captcha { position: absolute; }
/* The invisible reCAPTCHA's badge: its notice is printed on the last screen instead, as Google allows. */
.grecaptcha-badge { visibility: hidden; }
.jf-noscript { max-width: 540px; margin: 0 auto; padding: 0 24px 48px; color: var(--ink-mute); }

/* ---------- Narrow screens ---------- */
@media (max-width: 480px) {
	.jf-main { padding-top: 20px; padding-left: 20px; padding-right: 20px; }
	.jf-body { margin-top: 26px; }
	.jf-row { grid-template-columns: 1fr; }
	.jf-option { min-height: 56px; padding: 13px 14px 13px 16px; gap: 12px; }
}
@media (max-width: 360px) {
	.jf-grid { grid-template-columns: repeat(2, 1fr); }
	.jf-scale-row { gap: 6px; }
	.jf-scale-num { min-height: 52px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.jf-screen, .jf-reveal-img { animation: none; }
	.jf-countdown::after { animation: none; }
	.jf-progress > span, .jf-cta, .jf-arrow, .jf-option, .jf-bubble { transition: none; }
}