/* =====================================================
   HEALIO — Contact & FAQ
   Loaded with pages.css on /contact/ and /faq/;
   shares main.css design tokens.
   ===================================================== */

/* ---------- Shared hero ---------- */
.ct-hero,
.fq-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(72px, 10vw, 136px) var(--pad) clamp(120px, 13vw, 170px);
	background:
		radial-gradient(50% 60% at 80% 18%, rgba(233, 195, 211, 0.48) 0%, rgba(233, 195, 211, 0) 70%),
		radial-gradient(44% 58% at 12% 78%, rgba(233, 195, 211, 0.34) 0%, rgba(233, 195, 211, 0) 70%),
		var(--cream);
}
.fq-hero { padding-bottom: clamp(64px, 8vw, 110px); }
.ct-hero-bg,
.fq-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.ct-hero-inner,
.fq-hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }

.ct-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--berry);
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	padding: 9px 18px;
	margin: 0 0 26px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 16px 32px -20px rgba(142, 36, 68, 0.35);
}
.ct-hero-pill .pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rose);
	box-shadow: 0 0 0 4px rgba(201, 103, 144, 0.18);
}

/* Floating cherry-blossom petals */
.ct-petal {
	position: absolute;
	width: 26px;
	height: 26px;
	background: linear-gradient(135deg, var(--blush) 0%, var(--rose) 135%);
	border-radius: 72% 28% 70% 30% / 60% 38% 62% 40%;
	opacity: 0.5;
}
.ct-petal-1 { top: 24%; left: 11%; transform: rotate(-24deg); }
.ct-petal-2 { top: 60%; left: 6%; width: 17px; height: 17px; transform: rotate(40deg); opacity: 0.38; }
.ct-petal-3 { top: 20%; right: 13%; width: 21px; height: 21px; transform: rotate(18deg); opacity: 0.42; }
.ct-petal-4 { top: 64%; right: 8%; transform: rotate(-38deg); }
.ct-petal-5 { top: 82%; left: 34%; width: 13px; height: 13px; transform: rotate(60deg); opacity: 0.3; }

/* =====================================================
   CONTACT — /contact/
   ===================================================== */
.ct-main {
	position: relative;
	z-index: 3;
	max-width: 760px;
	margin: clamp(-84px, -8vw, -56px) auto 0;
	padding: 0 var(--pad) clamp(48px, 7vw, 80px);
	scroll-margin-top: 110px;
}
.ct-card {
	background: rgba(255, 255, 255, 0.68);
	border: 1px solid rgba(255, 255, 255, 0.92);
	border-radius: 30px;
	padding: clamp(30px, 5vw, 54px);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--shadow-lift);
}
.ct-card-head { text-align: center; margin-bottom: 30px; }
.ct-card-head .eyebrow { justify-content: center; }
.ct-card-head h2, .ct-card-head .hd--h2 { font-size: clamp(26px, 3.2vw, 36px); }

.af-field > span i {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 11px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: rgba(107, 97, 101, 0.75);
	margin-left: 4px;
}

/* Submit button: soft shine sweep + press feedback */
.ct-submit { position: relative; overflow: hidden; }
.ct-submit::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-18deg);
	transition: left 0.65s ease;
}
.ct-submit:hover::after { left: 130%; }
.ct-submit:active { transform: translateY(0) scale(0.985); }
.ct-submit.is-sending { opacity: 0.75; pointer-events: none; }

/* Support information */
.ct-info {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: clamp(30px, 4vw, 46px);
	text-align: center;
}
.ct-info-item { position: relative; display: grid; gap: 6px; padding: 6px 10px; justify-items: center; }
.ct-info-item + .ct-info-item::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 14%;
	bottom: 14%;
	width: 1px;
	background: var(--line);
}
.ct-info-label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mauve);
}
.ct-info-value {
	font-family: var(--font-display);
	font-size: 17.5px;
	color: var(--wine);
	text-decoration: none;
}
a.ct-info-value { transition: color 0.25s ease; }
a.ct-info-value:hover { color: var(--rose); }

/* =====================================================
   FAQ — /faq/
   ===================================================== */
.fq-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.fq-jump-pill {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--berry);
	text-decoration: none;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 16px;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.fq-jump-pill:hover { background: var(--rose); border-color: var(--rose); color: #fff; transform: translateY(-2px); }

.fq-groups {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: clamp(36px, 5vw, 64px) var(--pad) 10px;
	display: grid;
	gap: clamp(52px, 7vw, 92px);
}
.fq-group { scroll-margin-top: 110px; }
.fq-group-grid {
	display: grid;
	grid-template-columns: 0.38fr 0.62fr;
	gap: clamp(28px, 5vw, 70px);
	align-items: start;
}
.fq-group-head { position: sticky; top: 120px; display: flex; align-items: baseline; gap: 18px; }
.fq-group-num {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(38px, 4.6vw, 60px);
	line-height: 1;
	color: var(--blush);
}
.fq-group-head h2, .fq-group-head .hd--h2 { font-size: clamp(26px, 3.2vw, 38px); }

.fq-list { border-top: 1px solid var(--line); }
.fq-item { border-bottom: 1px solid var(--line); }
.fq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	padding: 22px 4px;
	font-family: var(--font-body);
	font-size: 16.5px;
	font-weight: 600;
	color: var(--wine);
	transition: color 0.3s ease, padding-left 0.35s ease;
}
.fq-q:hover { color: var(--berry); padding-left: 10px; }
.fq-icon {
	position: relative;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.7);
	transition: background 0.35s ease, border-color 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fq-icon::before,
.fq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.6px;
	border-radius: 2px;
	background: var(--rose);
	transform: translate(-50%, -50%);
	transition: background 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.fq-item.is-open .fq-q { color: var(--berry); }
.fq-item.is-open .fq-icon { background: var(--rose); border-color: var(--rose); transform: rotate(180deg); }
.fq-item.is-open .fq-icon::before,
.fq-item.is-open .fq-icon::after { background: #fff; }
.fq-item.is-open .fq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.fq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fq-a-inner { overflow: hidden; }
.fq-a-inner p {
	color: var(--mauve);
	font-size: 15.5px;
	max-width: 58ch;
	padding: 0 46px 22px 4px;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.4s ease 0.08s, transform 0.4s ease 0.08s;
}
.fq-item.is-open .fq-a { grid-template-rows: 1fr; }
.fq-item.is-open .fq-a-inner p { opacity: 1; transform: none; }

/* Still curious CTA */
.fq-cta {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 72px) var(--pad) clamp(20px, 4vw, 40px);
}
.fq-cta-card {
	text-align: center;
	background:
		radial-gradient(56% 72% at 82% 16%, rgba(233, 195, 211, 0.44) 0%, rgba(233, 195, 211, 0) 65%),
		linear-gradient(170deg, var(--blush-soft) 0%, var(--cream) 85%);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 32px;
	padding: clamp(44px, 7vw, 80px) var(--pad);
	box-shadow: var(--shadow-soft);
}
.fq-cta-card .eyebrow { justify-content: center; }
.fq-cta-sub { color: var(--mauve); max-width: 46ch; margin: 16px auto 28px; }

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 860px) {
	.ct-hero,
	.fq-hero { padding-top: 56px; }
	.ct-info { grid-template-columns: 1fr; gap: 16px; }
	.ct-info-item + .ct-info-item::before {
		left: 24%;
		right: 24%;
		top: -8px;
		bottom: auto;
		width: auto;
		height: 1px;
	}
	.fq-group-grid { grid-template-columns: 1fr; gap: 14px; }
	.fq-group-head { position: static; }
	.fq-group-num { font-size: 32px; }
	.fq-a-inner p { padding-right: 8px; }
	.ct-petal-2,
	.ct-petal-5 { display: none; }
}

@media (max-width: 560px) {
	.fq-q { font-size: 15.5px; gap: 14px; }
	.fq-icon { width: 30px; height: 30px; }
}

/* Reduced motion: keep everything readable, skip the theatrics. */
@media (prefers-reduced-motion: reduce) {
	.fq-a,
	.fq-icon,
	.fq-icon::before,
	.fq-icon::after,
	.fq-a-inner p,
	.fq-q,
	.fq-jump-pill { transition: none; }
	.ct-submit::after { display: none; }
}