/**
 * Treatment Page Styles — Redial Brand Edition
 *
 * Companion CSS for single-treatments.php.
 * Implements Brand System v2 (Oct-2025 brand guide, refined for web).
 *
 * Typography: Satoshi (headings) + Nunito Sans (body), both self-hosted.
 * Colors: brand red #E61E31, brand black #040303, brand white #F4F4F4.
 *
 * @package   RedialClinic
 * @since     3.2
 */

/* ══════════════════════════════════════════════════════════════════
   FONTS (self-hosted from /fonts/ in this child theme)
════════════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'Satoshi';
    src: url('/wp-content/themes/redial-clinic-child/fonts/satoshi-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/wp-content/themes/redial-clinic-child/fonts/satoshi-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/wp-content/themes/redial-clinic-child/fonts/satoshi-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito Sans';
    src: url('/wp-content/themes/redial-clinic-child/fonts/nunito-sans.woff2') format('woff2-variations'),
         url('/wp-content/themes/redial-clinic-child/fonts/nunito-sans.woff2') format('woff2');
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Brand System v2
════════════════════════════════════════════════════════════════════ */
:root {
	/* === v2 BRAND COLORS (canonical — see project_redial_brand_system_v2.md) === */
	--brand-red:        #E61E31;
	--brand-red-hover:  #C81629;
	--brand-red-soft:   #FDECEE;
	--brand-black:      #040303;
	--brand-white:      #F4F4F4;

	/* Surfaces */
	--surface-0:        #F4F4F4;  /* page bg light */
	--surface-1:        #FFFFFF;  /* cards, form fields (allowed for components) */
	--surface-2:        #FAFAFA;  /* alternate sections */
	--surface-dark-0:   #040303;  /* page bg dark */
	--surface-dark-1:   #141414;  /* cards on dark */
	--surface-dark-2:   #1F1F1F;  /* hover on dark */

	/* Accents */
	--accent-green:     #53A96C;
	--accent-yellow:    #F5C344;
	--accent-blue:      #4CC3E9;

	/* Semantic */
	--state-success:    var(--accent-green);
	--state-warning:    var(--accent-yellow);
	--state-error:      var(--brand-red);
	--state-info:       var(--accent-blue);

	/* Text */
	--text-primary:     #040303;
	--text-secondary:   #3F3F3F;
	--text-tertiary:    #6F6F6F;
	--text-on-dark:     #F4F4F4;

	/* Borders */
	--border-subtle:    #E5E5E5;
	--border-strong:    #CFCFCF;
	--border-on-dark:   rgba(244, 244, 244, 0.12);

	/* === v2 TYPOGRAPHY === */
	--font-heading:     'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body:        'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--weight-regular:   400;
	--weight-medium:    500;
	--weight-bold:      700;
	--weight-black:     900;

	/* === v2 RADII === */
	--radius-sm:        4px;
	--radius-md:        8px;
	--radius-lg:        12px;
	--radius-xl:        16px;
	--radius-pill:      999px;

	/* === v2 SHADOWS === */
	--shadow-sm:        0 1px 2px rgba(4, 3, 3, 0.05);
	--shadow-md:        0 4px 14px rgba(4, 3, 3, 0.08);
	--shadow-lg:        0 12px 32px rgba(4, 3, 3, 0.10);
	--shadow-red:       0 4px 14px rgba(230, 30, 49, 0.18);

	/* === v2 MOTION === */
	--duration-fast:    150ms;
	--duration-base:    200ms;
	--duration-slow:    300ms;
	--ease-out:         cubic-bezier(0.0, 0.0, 0.2, 1);

	/* === LEGACY --tp-* (aliases — kept for compat, removed in Phase 2) === */
	--tp-red:         var(--brand-red);
	--tp-red-dark:    var(--brand-red-hover);
	--tp-red-soft:    var(--brand-red-soft);
	--tp-red-tint:    var(--brand-red-soft);
	--tp-green:       var(--accent-green);
	--tp-green-soft:  rgba(83, 169, 108, 0.12);
	--tp-amber-bg:    rgba(245, 195, 68, 0.12);
	--tp-amber-brd:   var(--accent-yellow);
	--tp-white:       var(--surface-1);
	--tp-off-white:   var(--surface-2);
	--tp-grey-50:     #F8FAFC;
	--tp-grey-100:    #F1F5F9;
	--tp-grey-200:    var(--border-subtle);
	--tp-grey-300:    var(--border-strong);
	--tp-grey-400:    #94A3B8;
	--tp-grey-500:    var(--text-tertiary);
	--tp-grey-600:    var(--text-secondary);
	--tp-grey-700:    #334155;
	--tp-grey-800:    #1E293B;
	--tp-grey-900:    var(--text-primary);
	--tp-dark:        var(--surface-dark-0);
	--tp-dark-2:      var(--surface-dark-1);

	--tp-radius:      var(--radius-lg);
	--tp-radius-sm:   var(--radius-md);
	--tp-radius-lg:   var(--radius-xl);
	--tp-transition:  var(--duration-base) var(--ease-out);
	--tp-shadow-sm:   var(--shadow-sm);
	--tp-shadow-md:   var(--shadow-md);
	--tp-shadow-lg:   var(--shadow-lg);
}

/* ══════════════════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════════════════════ */
/* Remove gap between header and hero */
body.single-treatments .main-header {
	background: var(--tp-dark);
}
body.single-treatments .tp {
	margin-top: 0;
	padding-top: 0;
}
.tp-hero {
	margin-top: 80px;
padding-top: 60px !important;
}
/* Remove breadcrumb spacing since it's deleted */
.tp-breadcrumb { display: none; }
.tp {
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: var(--weight-regular);
	line-height: 1.65;
	letter-spacing: 0;
	background: var(--brand-white);
}

/* All headings inside .tp use Satoshi */
.tp h1, .tp h2, .tp h3, .tp h4, .tp h5, .tp h6 {
	font-family: var(--font-heading);
	letter-spacing: -0.01em;
	font-weight: var(--weight-bold);
}

/* Body paragraphs: Nunito Sans, override parent theme `p { letter-spacing: 0.5px }` */
.tp p {
	font-family: var(--font-body);
	letter-spacing: 0;
}

.tp * { box-sizing: border-box; }

.tp-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.tp-container--narrow {
	max-width: 880px;
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHY (exact px sizes)
════════════════════════════════════════════════════════════════════ */
.tp h1, .tp h2, .tp h3, .tp h4, .tp h5 {
	letter-spacing: -0.01em;
	font-weight: 700;
}

.tp-h2 {
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #0f172a !important;
	margin: 56px 0 20px !important;
	letter-spacing: -0.01em;
}

.tp-h2--sm { font-size: 22px !important; margin-top: 48px !important; }

.tp-h2 .accent,
.tp-h2 em.accent { color: var(--tp-red) !important; font-style: normal; }

.tp-h3 {
	font-size: 21px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 32px 0 12px !important;
	line-height: 1.35 !important;
}

.tp-prose { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--text-secondary); letter-spacing: 0; }

.tp-prose p { font-family: var(--font-body); margin: 0 0 18px !important; font-size: 17px !important; line-height: 1.7 !important; color: var(--text-secondary) !important; letter-spacing: 0 !important; }
.tp-prose p:last-child { margin-bottom: 0 !important; }

.tp-prose a {
	color: var(--tp-red);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--tp-transition);
}
.tp-prose a:hover { color: var(--tp-red-dark); }

.tp-prose strong { color: #0f172a; font-weight: 700; }

/* ol keeps normal indent; ul gets custom dot bullet */
.tp-prose ol { margin: 0 0 20px !important; padding-left: 22px !important; }
.tp-prose ol li { margin-bottom: 8px !important; font-size: 17px !important; line-height: 1.7 !important; }

/* ul — remove browser bullet, use red+black ring dot via ::before (absolute) */
.tp-prose ul,
.tp-callout--answer ul {
	list-style: none !important;
	padding-left: 20px !important;
	margin: 0 0 20px !important;
}
.tp-prose ul li,
.tp-callout--answer ul li {
	position: relative !important;
	padding-left: 4px !important;
	margin-bottom: 10px !important;
	font-size: 17px !important;
	line-height: 1.7 !important;
}
.tp-prose ul li::before,
.tp-callout--answer ul li::before {
	content: '';
	position: absolute;
	left: -18px;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #E61E31;
	border: 2px solid #040303;
}

/* ══════════════════════════════════════════════════════════════════
   HERO  (photo background, dark overlay, white text)
════════════════════════════════════════════════════════════════════ */
.tp-hero {
	position: relative;
	min-height: 460px;
	padding: 80px 0 64px;
	background-color: #0a0e1a;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--tp-white);
	overflow: hidden;
}

.tp-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(10, 14, 26, 0.85) 0%,
		rgba(10, 14, 26, 0.65) 50%,
		rgba(10, 14, 26, 0.45) 100%
	);
	pointer-events: none;
}

.tp-hero--no-photo::before {
	background: linear-gradient(135deg, var(--tp-dark), var(--tp-dark-2));
}

.tp-hero .tp-container { position: relative; z-index: 2; }

.tp-hero__h1 {
	font-family: var(--font-heading) !important;
	font-size: 48px !important;
	font-weight: var(--weight-black) !important;  /* Satoshi Black 900 — hero impact */
	line-height: 1.12 !important;
	color: var(--brand-white) !important;
	margin: 0 0 18px !important;
	letter-spacing: -0.02em;
	max-width: 820px;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.tp-hero__h1 .accent { color: var(--tp-red); }

.tp-hero__sub {
	font-size: 18px !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.92) !important;
	margin: 0 0 20px !important;
	max-width: 720px;
	font-weight: 400 !important;
}

.tp-hero__chip {
	display: inline-block;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	color: var(--tp-white);
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 22px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.tp-hero__outcome {
	background: rgba(230, 57, 70, 0.18);
	backdrop-filter: blur(6px);
	border-left: 4px solid var(--tp-red);
	padding: 16px 20px;
	border-radius: var(--tp-radius-sm);
	font-size: 15px;
	color: var(--tp-white);
	margin: 0 0 28px;
	max-width: 660px;
	font-weight: 500;
}

.tp-hero__outcome p { margin: 0 !important; color: var(--tp-white) !important; font-size: 15px !important; }

.tp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════════════════ */
.tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: var(--radius-md);  /* v2: 8px */
	font-family: var(--font-heading);  /* Satoshi for buttons — same family as headings, more confident */
	font-size: 16px;
	font-weight: var(--weight-bold);  /* was 600 (didn't exist); now real Bold */
	letter-spacing: 0;
	text-decoration: none !important;
	transition: background-color var(--duration-base) var(--ease-out),
	            border-color var(--duration-base) var(--ease-out),
	            color var(--duration-base) var(--ease-out),
	            transform var(--duration-base) var(--ease-out),
	            box-shadow var(--duration-base) var(--ease-out);
	border: 2px solid transparent;
	cursor: pointer;
	line-height: 1;
}

.tp-btn--primary { background: var(--tp-red); color: var(--tp-white) !important; border-color: var(--tp-red); }
.tp-btn--primary:hover { background: var(--tp-red-dark); border-color: var(--tp-red-dark); transform: translateY(-1px); box-shadow: var(--tp-shadow-md); }

.tp-btn--secondary {
	background: rgba(255, 255, 255, 0.1);
	color: var(--tp-white) !important;
	border-color: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(6px);
}
.tp-btn--secondary:hover { background: var(--tp-white); color: var(--tp-red) !important; border-color: var(--tp-white); }

.tp-btn--large { padding: 16px 32px; font-size: 17px; }

/* Buttons on light backgrounds */
.tp-lead .tp-btn--secondary,
.tp-faqs .tp-btn--secondary {
	background: var(--tp-white);
	color: #0f172a !important;
	border-color: var(--tp-grey-300);
	backdrop-filter: none;
}
.tp-lead .tp-btn--secondary:hover { border-color: var(--tp-red); color: var(--tp-red) !important; }

/* ══════════════════════════════════════════════════════════════════
   TRUST STRIP
════════════════════════════════════════════════════════════════════ */
.tp-trust-strip {
	background: var(--tp-dark);
	color: var(--tp-white);
	padding: 14px 0;
	font-size: 14px;
}

.tp-trust-strip .tp-container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-trust-strip__label { color: var(--tp-grey-400); }
.tp-trust-strip__name { color: var(--brand-white) !important; font-weight: var(--weight-medium); text-decoration: none !important; }
.tp-trust-strip__name:hover { color: var(--tp-red) !important; }
.tp-trust-strip__date { color: var(--tp-grey-400); }

/* ══════════════════════════════════════════════════════════════════
   LEAD SECTION  (two-column: copy + form)
════════════════════════════════════════════════════════════════════ */
.tp-lead {
	padding: 72px 0 56px;
	background: var(--tp-white);
}

.tp-lead__grid {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 56px;
	align-items: start;
}

.tp-lead__copy {}

.tp-lead__h2 {
	font-family: var(--font-heading) !important;
	font-size: 36px !important;
	font-weight: var(--weight-bold) !important;  /* was 800; Satoshi has 700, not 800 */
	line-height: 1.2 !important;
	color: var(--text-primary) !important;
	margin: 0 0 24px !important;
	letter-spacing: -0.02em;
}

.tp-lead__h2 .accent { color: var(--tp-red); display: inline; font-style: normal; }

.tp-lead__prose {
	font-size: 17px;
	line-height: 1.7;
	color: #334155;
	margin-bottom: 28px;
}

.tp-lead__prose p { margin: 0 0 16px !important; font-size: 17px !important; line-height: 1.7 !important; }
.tp-lead__prose p:last-child { margin-bottom: 0 !important; }

.tp-lead__bullets {
	list-style: none !important;
	padding: 0 !important;
	margin: 24px 0 0 !important;
}

.tp-lead__bullets li {
	position: relative;
	padding: 10px 0 10px 36px;
	font-size: 16px;
	line-height: 1.55;
	color: #1f2937;
	border-bottom: 1px solid var(--tp-grey-100);
}

.tp-lead__bullets li:last-child { border-bottom: none; }

.tp-lead__bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 13px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tp-red);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6L5 9L10 3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
}

.tp-lead__bullets li strong { color: #0f172a; font-weight: 700; }

/* ── Inline Form ── */
.tp-lead__form form { display: block !important; }
.tp-lead__form {
	background: var(--tp-white);
	border: 1px solid var(--tp-grey-200);
	border-radius: var(--tp-radius-lg);
	padding: 32px 28px;
	box-shadow: var(--tp-shadow-md);
	position: sticky;
	top: 100px;
}

.tp-lead__form-heading {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--tp-red) !important;
	margin: 0 0 8px !important;
	line-height: 1.3 !important;
}

.tp-lead__form-sub {
	font-size: 14px;
	color: var(--tp-grey-600);
	margin-bottom: 22px;
}

/* Forminator default styling overrides — frame the form cleanly */
.tp-lead__form .forminator-ui input,
.tp-lead__form .forminator-ui select,
.tp-lead__form .forminator-ui textarea {
	font-size: 15px !important;
}

/* ══════════════════════════════════════════════════════════════════
   BODY BLOCKS
════════════════════════════════════════════════════════════════════ */
.tp-body { padding: 16px 0 40px; }
.tp-block { margin-bottom: 8px; }
.tp-block .tp-h2:first-child { margin-top: 40px !important; }

/* ── Direct-Answer Callout ── */
.tp-callout {
	margin: 0 0 22px;
	padding: 22px 26px;
	border-radius: var(--tp-radius);
}

.tp-callout--answer {
	background: var(--tp-red-tint);
	border-left: 4px solid var(--tp-red);
	font-size: 17px;
	line-height: 1.65;
	color: #0f172a;
	font-style: normal;
	font-weight: 500;
}

.tp-callout--answer p {
	margin: 0 0 14px !important;
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: #0f172a !important;
}

.tp-callout--answer p:last-child { margin-bottom: 0 !important; }

/* ── From-the-Clinic Callout ── */
.tp-callout--clinic {
	background: var(--tp-amber-bg);
	border: 1px solid rgba(245, 158, 11, 0.25);
	border-left: 4px solid var(--tp-amber-brd);
	margin: 28px 0;
	padding: 20px 24px;
}

.tp-callout__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #92400e;
	margin-bottom: 8px;
}

.tp-callout__body { font-style: italic; color: #1f2937; font-size: 16px; line-height: 1.65; }
.tp-callout__body p { margin: 0 0 12px !important; font-size: 16px !important; line-height: 1.65 !important; color: #1f2937 !important; font-style: italic; }
.tp-callout__body p:last-child { margin-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   H2 + H3 SUBSECTIONS — three display styles
════════════════════════════════════════════════════════════════════ */

/* --- Default: stacked text --- */
.tp-block--subsections .tp-h3 { margin-top: 28px !important; }

/* --- Cards Grid: 2x2 cards (e.g. complications subsections) --- */
.tp-block--subsections-cards { margin-bottom: 24px; }

.tp-subsections-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 28px;
}

.tp-subsection-card {
	background: var(--tp-white);
	border: 1px solid var(--tp-grey-200);
	border-radius: var(--tp-radius);
	padding: 24px 24px 22px;
	transition: border-color var(--tp-transition), box-shadow var(--tp-transition), transform var(--tp-transition);
}

.tp-subsection-card:hover {
	border-color: var(--tp-red);
	box-shadow: var(--tp-shadow-md);
	transform: translateY(-2px);
}

.tp-subsection-card__title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 0 12px !important;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--tp-red);
	display: inline-block;
	line-height: 1.3 !important;
}

.tp-subsection-card__body { font-size: 15px; line-height: 1.6; color: #334155; }
.tp-subsection-card__body p { margin: 0 0 10px !important; font-size: 15px !important; line-height: 1.6 !important; color: #334155 !important; }
.tp-subsection-card__body p:last-child { margin-bottom: 0 !important; }

/* --- Numbered Dark Cards: program pillars on dark bg --- */
.tp-block--subsections-numbered {
	margin: 32px -24px;
	padding: 64px 24px;
	background: var(--tp-dark);
	color: var(--tp-white);
	border-radius: var(--tp-radius-lg);
}

.tp-block--subsections-numbered .tp-h2 {
	color: var(--tp-white) !important;
	margin-top: 0 !important;
	margin-bottom: 16px !important;
}

.tp-block--subsections-numbered .tp-callout--answer {
	background: rgba(255, 255, 255, 0.06);
	border-left-color: var(--tp-red);
	color: rgba(255, 255, 255, 0.92);
}

.tp-block--subsections-numbered .tp-callout--answer p { color: rgba(255, 255, 255, 0.92) !important; }

.tp-numbered-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 32px;
}

.tp-numbered-card {
	position: relative;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--tp-radius);
	padding: 28px 24px 22px;
	padding-top: 48px;
	transition: background var(--tp-transition), border-color var(--tp-transition);
}

.tp-numbered-card:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--tp-red);
}

.tp-numbered-card__num {
	position: absolute;
	top: 18px;
	left: 24px;
	font-size: 14px;
	font-weight: 700;
	color: var(--tp-red);
	letter-spacing: 0.1em;
}

.tp-numbered-card__title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--tp-white) !important;
	margin: 0 0 12px !important;
	line-height: 1.3 !important;
}

.tp-numbered-card__body { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.78); }
.tp-numbered-card__body p { margin: 0 0 10px !important; font-size: 15px !important; line-height: 1.65 !important; color: rgba(255, 255, 255, 0.78) !important; }
.tp-numbered-card__body p:last-child { margin-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   TIMELINE
════════════════════════════════════════════════════════════════════ */
.tp-timeline {
	background: linear-gradient(180deg, var(--tp-grey-50), var(--tp-white));
	border: 1px solid var(--tp-grey-200);
	border-radius: var(--tp-radius);
	padding: 32px 32px 28px;
	margin: 32px 0;
}

.tp-timeline__title {
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-red) !important;
	margin: 0 0 24px !important;
}

.tp-timeline__stages {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative;
	counter-reset: tp-tl;
}

.tp-timeline__stages::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: linear-gradient(180deg, var(--tp-red), rgba(230, 57, 70, 0.2));
}

.tp-timeline__stage {
	counter-increment: tp-tl;
	position: relative;
	padding: 4px 0 22px 44px;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 0 !important;
}

.tp-timeline__stage:last-child { padding-bottom: 0; }

.tp-timeline__stage::before {
	content: counter(tp-tl);
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	background: var(--tp-red);
	color: var(--tp-white);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 4px var(--tp-grey-50);
}

.tp-timeline__label { color: #0f172a; display: inline; margin-right: 6px; font-size: 16px; font-weight: 700; }
.tp-timeline__desc { color: #334155; font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════
   LIST SECTION — two display styles
════════════════════════════════════════════════════════════════════ */

/* --- Default: red-checkmark list --- */
.tp-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 8px 0 24px !important;
}

.tp-list__item {
	position: relative;
	padding: 12px 0 12px 36px;
	font-size: 16px;
	line-height: 1.6;
	color: #334155;
	border-bottom: 1px solid var(--tp-grey-100);
}

.tp-list__item:last-child { border-bottom: none; }

.tp-list__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 15px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tp-red);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6L5 9L10 3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
}

.tp-list__item p { margin: 0 0 4px !important; font-size: 16px !important; line-height: 1.6 !important; color: #334155 !important; }
.tp-list__item p:last-child { margin-bottom: 0 !important; }
.tp-list__item strong { color: #0f172a; font-weight: 700; }

/* --- Icon Grid: 2-col grid for "What we assess" --- */
.tp-list--icon-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 24px 0 !important;
}

.tp-list--icon-grid .tp-list__item {
	background: var(--tp-grey-50);
	border: 1px solid var(--tp-grey-200);
	border-radius: var(--tp-radius);
	padding: 16px 18px 16px 52px;
	border-bottom: 1px solid var(--tp-grey-200);
	font-size: 15px;
	line-height: 1.55;
}

.tp-list--icon-grid .tp-list__item::before {
	left: 16px;
	top: 18px;
	width: 24px;
	height: 24px;
	background-size: 13px 13px;
}

.tp-list--icon-grid .tp-list__item p { font-size: 15px !important; line-height: 1.55 !important; }

/* ══════════════════════════════════════════════════════════════════
   WHO IS FOR / NOT FOR
════════════════════════════════════════════════════════════════════ */
.tp-who-for {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 20px;
}

.tp-who-for__col { padding: 28px 26px; border-radius: var(--tp-radius); }

.tp-who-for__col--yes { background: var(--tp-green-soft); border: 1px solid rgba(42, 157, 143, 0.18); }
.tp-who-for__col--no  { background: var(--tp-red-tint); border: 1px solid rgba(230, 57, 70, 0.18); }

.tp-who-for__heading {
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 18px !important;
}

.tp-who-for__col--yes .tp-who-for__heading { color: #0f766e !important; }
.tp-who-for__col--no  .tp-who-for__heading { color: #9f1239 !important; }

.tp-who-for__list { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.tp-who-for__list li {
	position: relative;
	padding: 8px 0 8px 30px;
	font-size: 15px;
	line-height: 1.55;
	color: #1f2937;
}

.tp-who-for__col--yes .tp-who-for__list li::before { content: '✓'; position: absolute; left: 0; top: 8px; color: var(--tp-green); font-weight: 700; font-size: 16px; }
.tp-who-for__col--no  .tp-who-for__list li::before { content: '✕'; position: absolute; left: 0; top: 8px; color: var(--tp-red); font-weight: 700; font-size: 15px; }

/* ══════════════════════════════════════════════════════════════════
   FEATURE CARDS — "What You Can Expect" pattern (dark bg, reused)
════════════════════════════════════════════════════════════════════ */
.tp-feature-cards {
	margin: 56px -24px;
	padding: 72px 24px;
	background: var(--tp-dark);
	color: var(--tp-white);
	border-radius: var(--tp-radius-lg);
	position: relative;
	overflow: hidden;
}

.tp-feature-cards::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(230, 57, 70, 0.15), transparent 65%);
	pointer-events: none;
}

.tp-feature-cards__inner { position: relative; z-index: 1; max-width: 100%; }

.tp-feature-cards__head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: end;
	margin-bottom: 36px;
}

.tp-feature-cards__h2 {
	font-family: var(--font-heading) !important;
	font-size: 32px !important;
	font-weight: var(--weight-bold) !important;  /* was 800 */
	color: var(--tp-white) !important;
	margin: 0 0 12px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em;
	max-width: 700px;
}

.tp-feature-cards__h2 .accent { color: var(--tp-red); }

.tp-feature-cards__intro { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.78); max-width: 680px; }
.tp-feature-cards__intro p { margin: 0 0 8px !important; font-size: 16px !important; line-height: 1.65 !important; color: rgba(255, 255, 255, 0.78) !important; }

.tp-feature-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.tp-feature-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--tp-radius);
	padding: 26px 24px 24px;
	transition: background var(--tp-transition), border-color var(--tp-transition), transform var(--tp-transition);
}

.tp-feature-card:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--tp-red);
	transform: translateY(-2px);
}

.tp-feature-card--highlight {
	background: linear-gradient(135deg, var(--tp-red) 0%, var(--tp-red-dark) 100%);
	border-color: var(--tp-red);
}
.tp-feature-card--highlight:hover { background: linear-gradient(135deg, var(--tp-red-dark) 0%, #9b0e1d 100%); }

.tp-feature-card__title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--tp-white) !important;
	margin: 0 0 12px !important;
	line-height: 1.3 !important;
}

.tp-feature-card__body { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.tp-feature-card__body p { margin: 0 0 8px !important; font-size: 15px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.78) !important; }
.tp-feature-card__body p:last-child { margin-bottom: 0 !important; }
.tp-feature-card--highlight .tp-feature-card__body,
.tp-feature-card--highlight .tp-feature-card__body p { color: rgba(255, 255, 255, 0.92) !important; }

/* ══════════════════════════════════════════════════════════════════
   INFOGRAPHIC
════════════════════════════════════════════════════════════════════ */
.tp-infographic { margin: 32px 0; text-align: center; }
.tp-infographic img { max-width: 100%; height: auto; border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-md); }
.tp-infographic__caption { margin-top: 12px; font-size: 14px; color: var(--tp-grey-500); font-style: italic; }

/* ══════════════════════════════════════════════════════════════════
   FINAL CTA
════════════════════════════════════════════════════════════════════ */
.tp-final-cta {
	margin: 56px 0 0;
	padding: 64px 0;
	background: linear-gradient(135deg, var(--tp-dark), var(--tp-dark-2));
	color: var(--tp-white);
	position: relative;
	overflow: hidden;
}

.tp-final-cta::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(230, 57, 70, 0.16), transparent 65%);
	pointer-events: none;
}

.tp-final-cta .tp-container--narrow { position: relative; z-index: 1; }

.tp-final-cta__body {
	color: rgba(255, 255, 255, 0.92);
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 28px;
	max-width: 720px;
}

.tp-final-cta__body p { margin: 0 0 14px !important; font-size: 17px !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.92) !important; }
.tp-final-cta__body p:last-child { margin-bottom: 0 !important; }
.tp-final-cta__body strong { color: var(--tp-white); }

.tp-final-cta__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.tp-final-cta .tp-btn--secondary {
	background: transparent;
	color: var(--tp-white) !important;
	border-color: rgba(255, 255, 255, 0.35);
}
.tp-final-cta .tp-btn--secondary:hover { background: var(--tp-white); color: var(--tp-red) !important; border-color: var(--tp-white); }

/* ══════════════════════════════════════════════════════════════════
   FAQs — red background section
════════════════════════════════════════════════════════════════════ */
.tp-faqs {
	padding: 72px 0;
	background: var(--tp-red);
	color: var(--tp-white);
	position: relative;
	overflow: hidden;
}

.tp-faqs::before {
	content: '';
	position: absolute;
	bottom: -20%;
	left: -10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 65%);
	pointer-events: none;
}

.tp-faqs .tp-container--narrow { position: relative; z-index: 1; }

.tp-faqs__h2 {
	font-family: var(--font-heading) !important;
	font-size: 36px !important;
	font-weight: var(--weight-bold) !important;  /* was 800 */
	color: var(--tp-white) !important;
	margin: 0 0 36px !important;
	text-align: center;
	letter-spacing: -0.01em;
	line-height: 1.2 !important;
}

.tp-faqs__h2 .accent { color: var(--brand-white); font-style: normal; font-weight: var(--weight-bold); }

.tp-faq-list { border-top: 1px solid rgba(255, 255, 255, 0.18); }

.tp-faq { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

.tp-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 20px 6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--tp-white);
	cursor: pointer;
	list-style: none;
	transition: color var(--tp-transition);
	font-family: inherit;
}

.tp-faq__question::-webkit-details-marker { display: none; }
.tp-faq__question:hover { color: rgba(255, 255, 255, 0.85); }

.tp-faq__icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.tp-faq__icon::before, .tp-faq__icon::after {
	content: ''; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%); background: var(--tp-white);
	transition: transform var(--tp-transition), opacity var(--tp-transition);
}
.tp-faq__icon::before { width: 14px; height: 2px; }
.tp-faq__icon::after  { width: 2px; height: 14px; }
.tp-faq[open] .tp-faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.tp-faq__answer {
	padding: 0 6px 22px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	line-height: 1.7;
}
.tp-faq__answer p { margin: 0 0 12px !important; font-size: 16px !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.92) !important; }
.tp-faq__answer p:last-child { margin-bottom: 0 !important; }
.tp-faq__answer a { color: var(--tp-white); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════
   RELATED BLOGS  (replaces related treatments)
════════════════════════════════════════════════════════════════════ */
.tp-related-blogs {
	padding: 72px 0;
	background: var(--tp-grey-50);
	border-top: 1px solid var(--tp-grey-100);
}

.tp-related-blogs__h2 {
	font-family: var(--font-heading) !important;
	font-size: 32px !important;
	font-weight: var(--weight-bold) !important;  /* was 800 */
	color: #0f172a !important;
	margin: 0 0 8px !important;
	letter-spacing: -0.01em;
	line-height: 1.2 !important;
}
.tp-related-blogs__h2 .accent { color: var(--tp-red); }

.tp-related-blogs__sub {
	font-size: 16px;
	color: var(--tp-grey-600);
	margin-bottom: 36px;
}

.tp-related-blogs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.tp-blog-card {
	background: var(--tp-white);
	border: 1px solid var(--tp-grey-200);
	border-radius: var(--tp-radius);
	overflow: hidden;
	text-decoration: none !important;
	transition: transform var(--tp-transition), box-shadow var(--tp-transition), border-color var(--tp-transition);
	display: flex;
	flex-direction: column;
}

.tp-blog-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--tp-shadow-lg);
	border-color: var(--tp-red);
}

.tp-blog-card__thumb {
	aspect-ratio: 16 / 10;
	background: var(--tp-grey-100);
	overflow: hidden;
}

.tp-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.tp-blog-card:hover .tp-blog-card__thumb img { transform: scale(1.04); }

.tp-blog-card__body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }

.tp-blog-card__category {
	font-size: 12px;
	font-weight: 700;
	color: var(--tp-red);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.tp-blog-card__title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 0 12px !important;
	line-height: 1.35 !important;
}

.tp-blog-card__excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tp-grey-600);
	margin-bottom: 16px;
	flex: 1;
}

.tp-blog-card__meta { font-size: 13px; color: var(--tp-grey-500); }

/* ══════════════════════════════════════════════════════════════════
   REFERENCES (compact, visible)
════════════════════════════════════════════════════════════════════ */
.tp-references {
	padding: 32px 0;
	border-top: 1px solid var(--tp-grey-100);
	background: var(--tp-white);
}

.tp-references__h2 {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 0 16px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tp-references__list {
	padding-left: 22px !important;
	margin: 0 !important;
	font-size: 13px;
	color: var(--tp-grey-600);
	line-height: 1.6;
}

.tp-references__item { margin-bottom: 10px !important; font-size: 13px !important; line-height: 1.6 !important; }

.tp-references__link {
	display: block;
	margin-top: 2px;
	color: var(--tp-red) !important;
	word-break: break-all;
	font-size: 12px;
	text-decoration: none !important;
}
.tp-references__link:hover { text-decoration: underline !important; }

/* ══════════════════════════════════════════════════════════════════
   COMPLIANCE FOOTER
════════════════════════════════════════════════════════════════════ */
.tp-compliance {
	padding: 32px 0 40px;
	border-top: 1px solid var(--tp-grey-100);
	background: var(--tp-white);
}

.tp-compliance__meta { font-size: 14px; color: var(--tp-grey-600); margin-bottom: 18px; }
.tp-compliance__meta p { margin: 4px 0 !important; font-size: 14px !important; }
.tp-compliance__meta strong { color: #0f172a; font-weight: 600; }
.tp-compliance__meta a { color: var(--tp-red); text-decoration: none; }
.tp-compliance__meta a:hover { text-decoration: underline; }

.tp-compliance__disclaimer {
	font-size: 12px;
	color: var(--tp-grey-500);
	line-height: 1.6;
	padding-top: 16px;
	border-top: 1px dashed var(--tp-grey-200);
}

.tp-compliance__disclaimer p { margin: 0 0 8px !important; font-size: 12px !important; line-height: 1.6 !important; }
.tp-compliance__location { margin-top: 10px !important; color: var(--tp-grey-600) !important; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
	.tp-lead__grid { grid-template-columns: 1fr; gap: 40px; }
	.tp-lead__form { position: static; }

	.tp-feature-cards__head { grid-template-columns: 1fr; align-items: start; }

	.tp-related-blogs__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.tp { font-size: 16px; }

	.tp-hero { padding: 56px 0 48px; min-height: 380px; }
	.tp-hero__h1 { font-size: 34px !important; }
	.tp-hero__sub { font-size: 16px !important; }

	.tp-lead { padding: 48px 0 40px; }
	.tp-lead__h2 { font-size: 26px !important; }

	.tp-h2 { font-size: 26px !important; margin: 44px 0 16px !important; }
	.tp-h3 { font-size: 19px !important; }

	.tp-hero__ctas .tp-btn,
	.tp-final-cta__ctas .tp-btn { flex: 1 1 100%; }

	.tp-who-for,
	.tp-subsections-grid,
	.tp-numbered-grid,
	.tp-feature-cards__grid,
	.tp-list--icon-grid,
	.tp-related-blogs__grid {
		grid-template-columns: 1fr;
	}

	.tp-callout, .tp-timeline { padding-left: 20px; padding-right: 20px; }

	.tp-block--subsections-numbered,
	.tp-feature-cards { margin-left: 0; margin-right: 0; padding-left: 24px; padding-right: 24px; border-radius: var(--tp-radius); }

	.tp-feature-cards__h2 { font-size: 26px !important; }
	.tp-faqs__h2 { font-size: 28px !important; }
	.tp-related-blogs__h2 { font-size: 26px !important; }

	.tp-final-cta { padding: 48px 0; }
}

@media (max-width: 480px) {
	.tp-hero { padding: 44px 0 40px; min-height: 340px; }
	.tp-hero__h1 { font-size: 28px !important; }
	.tp-lead__h2 { font-size: 22px !important; }
	.tp-h2 { font-size: 22px !important; }
	.tp-faqs__h2 { font-size: 24px !important; }
	.tp-feature-cards { padding: 56px 20px; }
	.tp-final-cta__body { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   v2 TYPOGRAPHY POLISH
   Override parent-theme letter-spacing leaks on card-level headings.
   Parent has `h3 { letter-spacing: 1px }` which leaks into our card
   titles when no class-level override exists.
════════════════════════════════════════════════════════════════════ */
.tp-feature-card__title,
.tp-numbered-card__title,
.tp-subsection-card__title,
.tp-blog-card__title,
.tp-faq__question,
.tp-timeline__title,
.tp-callout__label,
.tp-who-for__heading,
.tp-references__h2 {
	font-family: var(--font-heading) !important;
	letter-spacing: -0.005em !important;
}

/* ══════════════════════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════════════════════════ */
@media print {
	.tp-breadcrumb, .tp-hero__ctas, .tp-final-cta, .tp-related-blogs, .tp-trust-strip, .tp-lead__form { display: none !important; }
	.tp { font-size: 11pt; color: #000; }
	.tp-hero { background: none; color: #000; padding: 24px 0; min-height: 0; }
	.tp-hero::before { display: none; }
	.tp-hero__h1, .tp-hero__sub { color: #000 !important; text-shadow: none; }
	.tp-feature-cards, .tp-block--subsections-numbered, .tp-faqs { background: #fff !important; color: #000 !important; }
}
/* ══════════════════════════════════════════════════════════════════
   FORMINATOR — Brand-aligned form styling
   ──────────────────────────────────────────────────────────────────
   Why this section exists:
     1. functions.php enqueues Forminator's per-form CSS in <head>,
        which overrides parent-theme branded button styles → submit
        buttons fall back to Forminator's default teal-blue.
     2. Parent theme rule (style.css line 706) sets `color: #fff` on
        every `.forminator-row input` site-wide, assuming forms only
        live on dark/red backgrounds. The new template's white card
        breaks this assumption → invisible white text on white bg.

   This block fixes both, in three layers:
     A. Global submit-button reset → solid brand red on every page
     B. New-template form (.tp-lead__form) → reset inherited white
        text + apply branded white-card aesthetics
     C. Legacy red sidebar (.sidebar-form) → flip submit to white-on-
        red so the button is actually visible on the red background
════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   A. GLOBAL SUBMIT BUTTON — brand red default
   Beats Forminator's default teal everywhere on the site.
────────────────────────────────────────────────────────────────── */
.forminator-button-submit {
    background-color: var(--tp-red) !important;
    color: var(--tp-white) !important;
    border: 2px solid var(--tp-red) !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.18) !important;
    transition: background-color 180ms ease, border-color 180ms ease,
                box-shadow 180ms ease, transform 180ms ease,
                color 180ms ease !important;
}

.forminator-button-submit:hover,
.forminator-button-submit:focus {
    background-color: var(--tp-red-dark) !important;
    border-color: var(--tp-red-dark) !important;
    box-shadow: 0 4px 14px rgba(230, 57, 70, 0.28) !important;
    transform: translateY(-1px);
}

.forminator-button-submit:disabled,
.forminator-button-submit.forminator-submitting {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   B. NEW TEMPLATE FORM (.tp-lead__form — white card, dark text)
   Resets parent-theme `.forminator-row input { color:#fff }` and
   applies a clean, accessible, branded form.
────────────────────────────────────────────────────────────────── */

/* Inputs, selects, textareas — visible dark text on light surface */
.tp-lead__form .forminator-ui input[type="text"],
.tp-lead__form .forminator-ui input[type="email"],
.tp-lead__form .forminator-ui input[type="tel"],
.tp-lead__form .forminator-ui input[type="number"],
.tp-lead__form .forminator-ui input[type="url"],
.tp-lead__form .forminator-ui input[type="password"],
.tp-lead__form .forminator-ui select,
.tp-lead__form .forminator-ui textarea {
    background-color: var(--tp-grey-50) !important;
    color: var(--tp-grey-900) !important;
    border: 1px solid var(--tp-grey-200) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: background-color 180ms ease, border-color 180ms ease,
                box-shadow 180ms ease !important;
}

/* Placeholder visibility */
.tp-lead__form .forminator-ui input::placeholder,
.tp-lead__form .forminator-ui textarea::placeholder {
    color: var(--tp-grey-400) !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* Custom select chevron (replaces native arrow on flat fields) */
.tp-lead__form .forminator-ui select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' stroke='%23475569' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 12px !important;
    padding-right: 38px !important;
    cursor: pointer !important;
}

/* Focus state — brand red ring */
.tp-lead__form .forminator-ui input:focus,
.tp-lead__form .forminator-ui select:focus,
.tp-lead__form .forminator-ui textarea:focus {
    background-color: var(--tp-white) !important;
    border-color: var(--tp-red) !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important;
    outline: none !important;
}

/* Textarea — capped height keeps form compact */
.tp-lead__form .forminator-ui textarea {
    min-height: 90px !important;
    max-height: 140px !important;
    resize: vertical !important;
}

/* Tighter spacing between rows */
.tp-lead__form .forminator-row {
    margin-bottom: 12px !important;
}

/* Field labels (when shown) */
.tp-lead__form .forminator-label,
.tp-lead__form .forminator-row label:not(.forminator-error-message) {
    color: var(--tp-grey-700) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: inline-block !important;
}

.tp-lead__form .forminator-required {
    color: var(--tp-red) !important;
    margin-left: 2px !important;
}

/* Validation error messages */
.tp-lead__form .forminator-error-message {
    color: var(--tp-red) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
    background: transparent !important;
}

/* Field-level error state */
.tp-lead__form .forminator-has_error input,
.tp-lead__form .forminator-has_error select,
.tp-lead__form .forminator-has_error textarea {
    border-color: var(--tp-red) !important;
    background-color: var(--tp-red-tint) !important;
}

/* Submit — full width inside the white card, big tap target */
.tp-lead__form .forminator-button-submit {
    width: 100% !important;
    margin-top: 8px !important;
}

/* Response messages (success/error after submit) */
.tp-lead__form .forminator-response-message {
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
}

.tp-lead__form .forminator-response-message.forminator-success {
    background-color: var(--tp-green-soft) !important;
    color: #065f46 !important;
    border: 1px solid rgba(42, 157, 143, 0.3) !important;
}

.tp-lead__form .forminator-response-message.forminator-error {
    background-color: var(--tp-red-tint) !important;
    color: var(--tp-red-dark) !important;
    border: 1px solid rgba(230, 57, 70, 0.25) !important;
}

/* ──────────────────────────────────────────────────────────────────
   C. LEGACY RED SIDEBAR (.sidebar-form — parent theme convention)
   Form lives on red bg with white text. Submit must be white-on-red,
   not red-on-red, for visibility.
────────────────────────────────────────────────────────────────── */
.sidebar-form .forminator-button-submit {
    background-color: var(--tp-white) !important;
    color: var(--tp-red) !important;
    border: 2px solid var(--tp-white) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

.sidebar-form .forminator-button-submit:hover,
.sidebar-form .forminator-button-submit:focus {
    background-color: var(--tp-grey-100) !important;
    color: var(--tp-red-dark) !important;
    border-color: var(--tp-grey-100) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
    transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────
   D. RESPONSIVE — mobile tweaks for the new template form
────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tp-lead__form { padding: 24px 20px; }

    .tp-lead__form .forminator-ui input[type="text"],
    .tp-lead__form .forminator-ui input[type="email"],
    .tp-lead__form .forminator-ui input[type="tel"],
    .tp-lead__form .forminator-ui input[type="number"],
    .tp-lead__form .forminator-ui input[type="url"],
    .tp-lead__form .forminator-ui select,
    .tp-lead__form .forminator-ui textarea {
        padding: 14px 14px !important;  /* Larger tap targets */
        font-size: 16px !important;     /* Prevents iOS zoom-on-focus */
    }

    .forminator-button-submit { padding: 16px 24px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   LIST ICONS — handle nested <ul><li> inside .tp-list__item
   ──────────────────────────────────────────────────────────────────
   Background: ACF "items" repeater is a list, but content pasted from
   ChatGPT/Notion/Docs often comes through as nested <ul><li>...</li>
   </ul> inside ONE outer <li class="tp-list__item">. Without this
   block, only the outer <li> gets the red checkmark icon.
   This rule styles BOTH:
     - Direct .tp-list__item children (clean ACF data)
     - Nested <ul><li> inside .tp-list__item (pasted-HTML data)
   :has(> ul) detects the nested case and hides the outer icon to
   avoid double-icon when both are present.
════════════════════════════════════════════════════════════════════ */

/* Reset any nested <ul> styling */
.tp-list__item ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Icon styling for nested <li> (mirrors .tp-list__item) */
.tp-list__item ul li {
    position: relative;
    padding: 12px 0 12px 36px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    list-style: none;
}

.tp-list__item ul li:last-child { border-bottom: none; }

.tp-list__item ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-red);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6L5 9L10 3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}

/* When .tp-list__item itself contains a nested <ul>, hide its own
   icon + reset its decorations (the nested <li>s get all the styling). */
.tp-list__item:has(> ul) {
    padding: 0 !important;
    border-bottom: none !important;
}

.tp-list__item:has(> ul)::before { display: none !important; }

/* Icon-grid variant: when nested, let nested <ul> become the grid */
.tp-list--icon-grid .tp-list__item:has(> ul) {
    background: transparent;
    border: none;
    grid-column: 1 / -1;
}

.tp-list--icon-grid .tp-list__item ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.tp-list--icon-grid .tp-list__item ul li {
    background: var(--tp-grey-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px 18px 16px 52px;
    font-size: 15px;
    line-height: 1.55;
}

.tp-list--icon-grid .tp-list__item ul li:last-child { border-bottom: none; }

.tp-list--icon-grid .tp-list__item ul li::before {
    left: 16px;
    top: 18px;
    width: 24px;
    height: 24px;
    background-size: 13px 13px;
}

/* Mobile: nested icon-grid collapses to single column */
@media (max-width: 768px) {
    .tp-list--icon-grid .tp-list__item ul { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   BODY RHYTHM — full-bleed alternating background for .tp-block
   ──────────────────────────────────────────────────────────────────
   Adds visual breaks between body content sections so the page
   doesn't read as one long white block. Even-numbered .tp-block
   elements get a subtle off-white background that extends edge-to-
   edge using the box-shadow + clip-path technique.
   The .tp-block--alt class is added by JS (see treatment-page-rhythm.js)
   so we get TRUE alternation even when non-.tp-block siblings
   (callouts, timelines, infographics) interrupt the sequence.
════════════════════════════════════════════════════════════════════ */
.tp-body .tp-block { position: relative; }

.tp-body .tp-block.tp-block--alt {
    background-color: var(--surface-2);
    box-shadow: 0 0 0 100vmax var(--surface-2);
    clip-path: inset(0 -100vmax);
    /* Add a touch of vertical padding so colored band feels like its own zone */
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

/* Reduce the H2 first-child margin inside alternating sections,
   since the bg color already provides visual breathing room. */
.tp-body .tp-block.tp-block--alt .tp-h2:first-child {
    margin-top: var(--space-6) !important;
}