/* ==========================================================================
   Remedi Clinic Growth Health Check
   Brand tokens are all in the .rhc block below. Change them here to restyle.
   Fonts are inherited from the theme so Elementor typography applies.
   ========================================================================== */

.rhc {
	/* ---- brand ---- */
	--rhc-red:       #ed3e38;   /* primary buttons, logo red */
	--rhc-red-dark:  #cf2c26;   /* button hover */
	--rhc-blush:     #fdeceb;   /* pill labels, soft fills */
	--rhc-navy:      #17355b;   /* headings */
	--rhc-teal:      #0f5c63;   /* strong scores, secondary accent */
	--rhc-amber:     #eda13c;   /* middling scores */
	--rhc-body:      #5a6b80;   /* body copy */
	--rhc-muted:     #8d9bad;   /* helper text */
	--rhc-line:      #e7ecf2;   /* borders */
	--rhc-bg:        #ffffff;   /* card background */
	--rhc-wash:      #f7f9fc;   /* track backgrounds */
	--rhc-radius:    16px;
	/* --------------- */

	max-width: 760px;
	margin: 0 auto;
	color: var(--rhc-body);
	font-family: inherit;
	line-height: 1.6;
}

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

.rhc p { margin: 0 0 1em; }
.rhc h2 {
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	font-weight: 700;
	color: var(--rhc-navy);
	line-height: 1.25;
	margin: 0 0 .6em;
	letter-spacing: -.01em;
}
.rhc h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--rhc-navy);
	margin: 0 0 1em;
}

.rhc-card {
	background: var(--rhc-bg);
	border: 1px solid var(--rhc-line);
	border-radius: var(--rhc-radius);
	padding: 34px;
	box-shadow: 0 12px 30px rgba(23, 53, 91, .06);
}
.rhc-card:focus { outline: none; }
@media (max-width: 600px) { .rhc-card { padding: 22px; } }

/* pink pill label, same device the site uses for FEATURES */
.rhc-label {
	display:block;
	color: var(--rhc-red);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.rhc-small { font-size: .86rem; color: var(--rhc-muted); }

/* progress */
.rhc-track { height: 5px; background: var(--rhc-wash); border-radius: 999px; overflow: hidden; }
.rhc-track span { display: block; height: 100%; width: 0; background: var(--rhc-red); border-radius: 999px; transition: width .3s ease; }
.rhc-steps { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; color: var(--rhc-muted); margin: 10px 0 24px; }

/* options */
.rhc-opts { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.rhc-opt {
	display: flex;
	gap: 13px;
	align-items: center;
	width: 100%;
	text-align: left;
	font: inherit;
	font-size: .95rem;
	color: var(--rhc-body);
	background: var(--rhc-bg);
	border: 1px solid var(--rhc-line);
	border-radius: 12px;
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.rhc-opt:hover { border-color: var(--rhc-red); background: #fffafa; }
.rhc-opt:focus-visible { outline: 2px solid var(--rhc-navy); outline-offset: 2px; }
.rhc-opt[aria-pressed="true"] { border-color: var(--rhc-red); background: var(--rhc-blush); box-shadow: inset 3px 0 0 var(--rhc-red); }
.rhc-opt b {
	flex: 0 0 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--rhc-blush);
	color: var(--rhc-red);
	font-size: .8rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rhc-opt[aria-pressed="true"] b { background: var(--rhc-red); color: #fff; }

/* buttons, pill shaped like the site nav CTA */
.rhc-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rhc-btn {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	font-size: .95rem;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 13px 28px;
	cursor: pointer;
	background: var(--rhc-red);
	color: #fff;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.rhc-btn:hover { background: var(--rhc-red-dark); color: #fff; }
.rhc-btn.ghost { background: transparent; color: var(--rhc-muted); border-color: var(--rhc-line); }
.rhc-btn.ghost:hover { color: var(--rhc-navy); border-color: var(--rhc-muted); }
.rhc-btn:focus-visible { outline: 2px solid var(--rhc-red); outline-offset: 2px; }

/* result */
.rhc-total { font-size: clamp(2.8rem, 8vw, 3.6rem); font-weight: 700; color: var(--rhc-navy); line-height: 1; letter-spacing: -.02em; }
.rhc-tier {
	display: inline-block;
	background: var(--rhc-navy);
	color: #fff;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 16px 0;
}
.rhc-hr { border: 0; border-top: 1px solid var(--rhc-line); margin: 28px 0!important; }
.rhc-pillar { margin-bottom: 22px; }
.rhc-pillar-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rhc-pillar-top b { color: var(--rhc-navy); font-weight: 600; font-size: .96rem; }
.rhc-pillar-top span { color: var(--rhc-muted); font-size: .84rem; white-space: nowrap; }
.rhc-bar { height: 8px; background: var(--rhc-wash); border-radius: 999px; overflow: hidden; }
.rhc-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--rhc-teal); transition: width .55s cubic-bezier(.2, .7, .3, 1); }
.rhc-pillar.low .rhc-bar i { background: var(--rhc-red); }
.rhc-pillar.mid .rhc-bar i { background: var(--rhc-amber); }
.rhc-note { font-size: .89rem; margin: 9px 0 0!important; }

.rhc-cta {
	background: var(--rhc-blush);
	border-radius: var(--rhc-radius);
	padding: 26px;
	text-align: center;
}
.rhc-cta h3 { margin-bottom: .5em; }

/* loading and error */
.rhc-msg { padding: 30px 0; text-align: center; color: var(--rhc-muted); }
.rhc-err { color: var(--rhc-red); font-size: .88rem; }

/* the Elementor form sits inside the gate card, so trim its default spacing */
.rhc-form .elementor-form { margin-top: 18px; }


/* fade in up, replayed each time a question or result is rendered */
@keyframes rhc-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
.rhc-app .rhc-card { animation: rhc-fade-up .4s cubic-bezier(.2, .7, .3, 1) both; }
.rhc-app .rhc-card > h2,
.rhc-app .rhc-card > .rhc-opts > .rhc-opt,
.rhc-app .rhc-card > .rhc-row,
.rhc-app .rhc-pillar,
.rhc-app .rhc-cta {
	animation: rhc-fade-up .4s cubic-bezier(.2, .7, .3, 1) both;
	animation-delay: calc(var(--i, 0) * 55ms + 90ms);
}

@media (prefers-reduced-motion: reduce) {
	.rhc *, .rhc *::before, .rhc *::after { transition: none !important; animation: none !important; }
}