/* ================================================================
   Inspire Subscription Pricing — v5
   3 main cards (subgrid-aligned) + Enterprise full-width row
   ================================================================ */

/* ---- Scoped reset ---- */
.isp-outer,
.isp-outer *,
.isp-outer *::before,
.isp-outer *::after {
	box-sizing: border-box !important;
	margin: 0;
	padding: 0;
}

/* When pricing shortcode is on page, prevent white strip on right from 100vw */
body.isp-pricing-page {
	overflow-x: hidden;
}

/* ---- Full-width breakout ---- */
.isp-outer {
	display: block !important;
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	background: linear-gradient(
		to right,
		rgb(125, 61, 204)  0%,
		rgb(81,  39, 131) 15%,
		rgb(32,  91, 139) 85%,
		rgb(46, 131, 201) 100%
	) !important;
	padding: 4rem 2rem 3.5rem !important;
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	overflow-x: hidden !important;
	box-sizing: border-box !important;
}

/* ---- Inner container ---- */
.isp-wrap {
	width: 100%;
	max-width: 1180px;
	min-width: 0;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ================================================================
   HEADER
   ================================================================ */
.isp-header   { text-align: center; }
.isp-eyebrow  {
	display: inline-block;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: .32em 1.1em;
	border-radius: 100px;
	margin-bottom: .85rem;
	backdrop-filter: blur(6px);
}
.isp-title {
	font-size: clamp(1.85rem, 3.5vw, 2.8rem);
	font-weight: 900;
	letter-spacing: -.025em;
	line-height: 1.1;
	color: #fff;
	margin-bottom: .6rem;
}
.isp-subtitle {
	font-size: .92rem;
	color: rgba(255,255,255,.75);
	line-height: 1.6;
	max-width: 500px;
	margin: 0 auto;
}

/* ================================================================
   3-COLUMN GRID WITH SUBGRID ALIGNMENT
   ================================================================ */

/* Parent grid: 2x2 desktop layout */
.isp-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.1rem;
	row-gap: .95rem;
	align-items: start;
}

/* Each card spans 6 subgrid rows (one per content section) */
.isp-card {
	display: grid;
	grid-row: span 6;
	grid-template-rows: subgrid;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 6px 28px rgba(0,0,0,.18);
	position: relative;
	border: 2px solid rgba(255,255,255,.15);
	transition: transform .25s ease, box-shadow .25s ease;
	overflow: visible;
	min-width: 0;
}
.isp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 46px rgba(0,0,0,.26);
}
.isp-card--featured {
	border-color: rgba(125,61,204,.45);
	box-shadow: 0 10px 38px rgba(81,39,131,.28);
}

/* ---- Horizontal padding on every section ---- */
.isp-card > * {
	padding-left: 1.15rem;
	padding-right: 1.15rem;
}
/* Top spacing on first visible section */
.isp-card .isp-card-name {
	padding-top: 1.45rem;
	align-self: start;
}
/* Bottom spacing on last section */
.isp-card .isp-card-footer {
	padding-bottom: 1.1rem;
	align-self: end;
}
/* Slightly compress middle sections */
.isp-card .isp-price-block  { padding-top: .15rem; padding-bottom: .15rem; }
.isp-card .isp-slider-wrap  { padding-top: .15rem; padding-bottom: .15rem; }
.isp-card .isp-section       { padding-top: .15rem; padding-bottom: .15rem; }

/* ================================================================
   BADGE  (absolute — doesn't consume a subgrid row)
   ================================================================ */
.isp-badge {
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(to right, rgb(81,39,131), rgb(46,131,201));
	color: #fff;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: .28em 1.1em;
	border-radius: 0 0 10px 10px;
	white-space: nowrap;
}

/* ================================================================
   PLAN NAME  (ROW 1)
   ================================================================ */
.isp-range-label {
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7c3aed;
	margin-bottom: .3rem;
}
.isp-plan-title {
	font-size: .92rem;
	font-weight: 800;
	line-height: 1.28;
	color: #111827;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ================================================================
   PRICE BLOCK  (ROW 2)
   ================================================================ */
.isp-price-block {
	background: linear-gradient(135deg, rgba(81,39,131,.06), rgba(46,131,201,.06));
	border: 1px solid rgba(81,39,131,.13);
	border-radius: 14px;
	padding: .8rem .9rem .75rem;
}
.isp-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .25rem;
	margin-bottom: .25rem;
}
.isp-price-num {
	font-size: 1.65rem;
	font-weight: 900;
	line-height: 1;
	color: #111827;
	letter-spacing: -.02em;
	transition: all .22s ease;
}
.isp-price-unit {
	font-size: .78rem;
	font-weight: 600;
	color: #6b7280;
}
.isp-price-rate {
	font-size: .7rem;
	color: #6b7280;
	line-height: 1.45;
}
.isp-school-price {
	margin-top: .35rem;
	font-size: .68rem;
	color: #6b7280;
	line-height: 1.4;
}
.isp-school-price strong { color: #374151; }

/* ================================================================
   SLIDER  (ROW 3)
   ================================================================ */
.isp-slider-wrap {
	background: rgba(81,39,131,.05);
	border: 1px solid rgba(81,39,131,.11);
	border-radius: 12px;
	padding: .62rem .75rem .5rem;
}
.isp-slider-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .5rem;
}
.isp-slider-label {
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #6b7280;
}
.isp-slider-count {
	font-size: .95rem;
	font-weight: 800;
	background: linear-gradient(to right, rgb(81,39,131), rgb(46,131,201));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.isp-card-slider {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 6px;
	min-height: 6px;
	border-radius: 3px;
	background: #e5e7eb;
	outline: none;
	cursor: pointer;
	touch-action: none;
}
.isp-card-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgb(81,39,131), rgb(46,131,201));
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(81,39,131,.4);
	cursor: pointer;
	transition: transform .14s;
}
.isp-card-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.isp-card-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgb(81,39,131), rgb(46,131,201));
	border: 2px solid #fff;
	cursor: pointer;
}
.isp-slider-ends {
	display: flex;
	justify-content: space-between;
	font-size: .65rem;
	color: #9ca3af;
	margin-top: .3rem;
}

/* ================================================================
   FEATURE SECTIONS  (ROWS 4 & 5)
   ================================================================ */
.isp-section {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.isp-section-label {
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #9ca3af;
}
.isp-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.isp-list li {
	font-size: .73rem;
	color: #374151;
	padding-left: 1rem;
	line-height: 1.28;
	position: relative;
}
.isp-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .52em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgb(81,39,131);
}
.isp-list--check li::before {
	background: rgb(46,131,201);
}

/* ================================================================
   CTA FOOTER  (ROW 6)
   ================================================================ */
.isp-card-footer {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.isp-card-footer .isp-pay-form {
	margin-top: 0.25rem;
}
.isp-card-note {
	font-size: .64rem;
	color: #9ca3af;
	line-height: 1.35;
}
.isp-pay-form {
	display: block;
	width: 100%;
}

/* ---- Trial (h3spark + tier1) ---- */
.isp-trial-badge {
	display: inline-block;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(81, 39, 131);
	background: linear-gradient(135deg, rgba(125, 61, 204, 0.12), rgba(46, 131, 201, 0.12));
	border: 1px solid rgba(81, 39, 131, 0.25);
	border-radius: 100px;
	padding: 0.35em 0.95em;
	margin-bottom: 0.65rem;
}

.isp-trial-fields {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	margin-bottom: 0.65rem;
}

.isp-trial-field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	width: 100%;
	text-align: left;
}

.isp-trial-field--inline {
	margin-bottom: 0.5rem;
}

.isp-trial-field-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
}

.isp-trial-field input {
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 0.875rem;
	box-sizing: border-box;
}

.isp-trial-field input:focus {
	outline: none;
	border-color: rgb(81, 39, 131);
	box-shadow: 0 0 0 2px rgba(81, 39, 131, 0.15);
}

.isp-trial-form {
	width: 100%;
	margin-bottom: 0.55rem;
}

.isp-btn--outline {
	background: #fff !important;
	color: rgb(81, 39, 131) !important;
	border: 2px solid rgb(81, 39, 131) !important;
	box-shadow: 0 2px 10px rgba(81, 39, 131, 0.12) !important;
}

.isp-btn--outline:hover,
.isp-btn--outline:focus {
	background: rgba(81, 39, 131, 0.06) !important;
	color: rgb(46, 131, 201) !important;
	border-color: rgb(46, 131, 201) !important;
}

.isp-btn {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	background: linear-gradient(to right,
		rgb(125,61,204)  0%,
		rgb(81,39,131)  40%,
		rgb(32,91,139)  80%,
		rgb(46,131,201) 100%);
	background-size: 200% auto;
	color: #fff !important;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	font-size: .8rem;
	padding: .72rem .95rem !important;
	border-radius: 12px !important;
	text-decoration: none !important;
	letter-spacing: .03em;
	box-shadow: 0 4px 16px rgba(81,39,131,.35);
	transition: background-position .35s ease, transform .14s, box-shadow .2s;
	border: none;
	cursor: pointer;
	line-height: 1.3;
}
.isp-btn:hover,
.isp-btn:focus {
	background-position: right center;
	transform: translateY(-2px);
	box-shadow: 0 8px 26px rgba(81,39,131,.55);
	color: #fff !important;
	outline: none;
}

/* ================================================================
   ENTERPRISE CARD  — full-width horizontal row
   ================================================================ */
.isp-enterprise {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.6fr 1fr;
	column-gap: 2rem;
	row-gap: 0;
	align-items: start;
	background: rgba(255,255,255,.97);
	border-radius: 20px;
	border: 2px solid rgba(125,61,204,.22);
	box-shadow: 0 6px 28px rgba(0,0,0,.18);
	padding: 2rem 2.25rem;
	min-width: 0;
}

/* Badge inline (not absolute) for enterprise */
.isp-badge--inline {
	position: static !important;
	left: auto !important;
	transform: none !important;
	display: inline-block;
	background: linear-gradient(to right, rgb(81,39,131), rgb(46,131,201));
	color: #fff;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: .28em 1.1em;
	border-radius: 100px;
	margin-bottom: .75rem;
}

.isp-ent-info .isp-price-block--ent {
	margin-top: 1rem;
}
.isp-price-block--ent {
	background: linear-gradient(135deg, rgba(81,39,131,.06), rgba(46,131,201,.06));
	border: 1px solid rgba(81,39,131,.13);
	border-radius: 14px;
	padding: 1rem 1.1rem .9rem;
}

.isp-ent-who,
.isp-ent-what { padding-top: .25rem; }

.isp-ent-cta {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	justify-content: flex-start;
	padding-top: .25rem;
}
.isp-ent-cta .isp-btn { width: 100% !important; }

/* ================================================================
   BOTTOM FOOTNOTE
   ================================================================ */
.isp-foot {
	text-align: center;
	font-size: .75rem;
	color: rgba(255,255,255,.55);
	line-height: 1.6;
	max-width: 700px;
	margin: 0 auto;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet: still 2 columns until mobile */
@media (max-width: 1024px) {
	.isp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.isp-card {
		width: 100%;
		min-width: 0;
	}
}

@media (max-width: 768px) {
	.isp-outer { padding: 3rem 1.25rem 3rem !important; }

	/* Single column on mobile */
	.isp-grid {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		width: 100%;
	}
	.isp-card,
	.isp-card.isp-card--featured {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 1.75rem 1.25rem;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		flex: 0 0 auto;
		box-sizing: border-box;
	}
	.isp-card > * {
		padding-left: 0 !important;
		padding-right: 0 !important;
		min-width: 0;
	}
	.isp-card .isp-card-name  { padding-top: 0 !important; }
	.isp-card .isp-card-footer { padding-bottom: 0 !important; }

	/* Enterprise: 2 columns then single */
	.isp-enterprise {
		grid-template-columns: 1fr 1fr;
		row-gap: 1.5rem;
		padding: 1.75rem 1.25rem;
		min-width: 0;
	}
	.isp-enterprise > * { min-width: 0; }
	.isp-ent-cta { grid-column: 1 / -1; }
}

/* Mobile: tighter padding, single column enterprise */
@media (max-width: 600px) {
	.isp-outer { padding: 2.5rem 0.75rem 2.5rem !important; }
	.isp-title  { font-size: 1.6rem; }
	.isp-subtitle { font-size: 0.875rem; }

	.isp-card,
	.isp-card.isp-card--featured {
		padding: 1.5rem 1rem;
		width: 100% !important;
		max-width: 100% !important;
	}
	.isp-price-num { font-size: 1.75rem; }

	.isp-enterprise {
		grid-template-columns: 1fr;
		row-gap: 1.25rem;
		padding: 1.5rem 1rem;
	}
	.isp-badge--inline { margin-bottom: 0.5rem; }
}

/* Touch: larger slider thumb for easier dragging on mobile */
@media (hover: none) and (pointer: coarse) {
	.isp-card-slider {
		height: 8px;
		padding: 12px 0;
		margin: -12px 0;
	}
	.isp-card-slider::-webkit-slider-thumb {
		width: 28px;
		height: 28px;
	}
	.isp-card-slider::-moz-range-thumb {
		width: 28px;
		height: 28px;
	}
}

/* Very small phones: prevent any overflow */
@media (max-width: 380px) {
	.isp-outer { padding: 2rem 0.5rem 2rem !important; }
	.isp-card,
	.isp-card.isp-card--featured { padding: 1.25rem 0.75rem; width: 100% !important; max-width: 100% !important; }
	.isp-enterprise { padding: 1.25rem 0.75rem; }
	.isp-plan-title { font-size: 0.9rem; }
	.isp-price-num  { font-size: 1.5rem; }
}