.yncp-wrap { max-width: 1200px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1f2937; }
.yncp-grid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
@media ( max-width: 880px ) { .yncp-grid { grid-template-columns: 1fr; } }

/* ---------- Form ---------- */
.yncp-form { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; }
.yncp-form h3 { margin: 0 0 4px; font-size: 20px; }
.yncp-sub { color: #6b7280; font-size: 13px; margin: 0 0 16px; }

.yncp-field { margin-bottom: 14px; }
.yncp-field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.yncp-field .req { color: #dc2626; }
.yncp-field .hint { font-weight: 400; color: #9ca3af; }
.yncp-field input[type="text"],
.yncp-field input[type="tel"],
.yncp-field input[type="number"],
.yncp-field select,
.yncp-field textarea {
	width: 100%; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; box-sizing: border-box; font-family: inherit;
}
.yncp-radio, .yncp-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin-right: 16px; font-size: 14px; }

.yncp-submit {
	width: 100%; background: #2563eb; color: #fff; border: none; padding: 12px; border-radius: 8px;
	font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 6px;
}
.yncp-submit:hover { background: #1d4ed8; }
.yncp-submit:disabled { opacity: .6; cursor: default; }
.yncp-reset {
	width: 100%; background: none; border: none; color: #6b7280; padding: 10px; font-size: 13px; cursor: pointer; text-decoration: underline;
}

/* ---------- Results panel ---------- */
.yncp-results { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; min-height: 200px; }
.yncp-placeholder, .yncp-loading, .yncp-error, .yncp-empty { color: #6b7280; padding: 40px 10px; text-align: center; }
.yncp-error { color: #dc2626; }

/* ---------- Empty-state callout ---------- */
.yncp-placeholder { position: relative; padding: 36px 20px; }
.yncp-placeholder-icon { font-size: 34px; margin-bottom: 6px; }
.yncp-placeholder h4 { margin: 0 0 8px; font-size: 18px; color: #1f2937; }
.yncp-placeholder-cta { font-size: 15px; font-weight: 600; color: #2563eb; margin: 0 0 16px; }
.yncp-placeholder-cta-mobile { display: none; }
.yncp-placeholder-steps { list-style: none; counter-reset: yncp-step; margin: 0 auto; padding: 0; max-width: 320px; text-align: left; }
.yncp-placeholder-steps li {
	counter-increment: yncp-step; position: relative; padding: 6px 0 6px 34px; font-size: 13.5px; color: #4b5563;
}
.yncp-placeholder-steps li::before {
	content: counter( yncp-step ); position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%;
	background: #eff6ff; color: #2563eb; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.yncp-placeholder-arrow {
	position: absolute; left: -34px; top: 50%; transform: translateY( -50% ); font-size: 34px; color: #2563eb;
	animation: yncp-bounce-x 1.4s ease-in-out infinite;
}
.yncp-placeholder-arrow-mobile { display: none; }
@keyframes yncp-bounce-x { 0%, 100% { transform: translateY( -50% ) translateX( 0 ); } 50% { transform: translateY( -50% ) translateX( -10px ); } }
@keyframes yncp-bounce-y { 0%, 100% { transform: translateX( -50% ) translateY( 0 ); } 50% { transform: translateX( -50% ) translateY( -10px ); } }

.yncp-results-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.yncp-results-head h3 { margin: 0 0 4px; font-size: 19px; }
.yncp-results-sub { margin: 0; color: #6b7280; font-size: 13px; }
.yncp-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.yncp-download { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; padding: 8px 14px; border-radius: 8px; font-size: 13px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.yncp-download:hover { background: #dbeafe; }
.yncp-send-whatsapp { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; padding: 8px 14px; border-radius: 8px; font-size: 13px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.yncp-send-whatsapp:hover { background: #dcfce7; }

/* ---------- Tabs ---------- */
.yncp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.yncp-tab {
	border: 1px solid #e5e7eb; background: #f9fafb; color: #374151; padding: 8px 14px; border-radius: 8px;
	font-size: 13px; font-weight: 600; cursor: pointer;
}
.yncp-tab:hover { background: #f3f4f6; }
.yncp-tab-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.yncp-tab-active:hover { background: #1d4ed8; }

/* ---------- Groups ---------- */
.yncp-group { border-radius: 10px; margin-bottom: 16px; overflow: hidden; border: 1px solid #e5e7eb; }
.yncp-group-head { padding: 12px 16px; font-size: 14px; }
.yncp-group-icon { margin-right: 4px; }
.yncp-group-count { font-weight: 400; opacity: .85; }
.yncp-group-sub { font-weight: 400; font-size: 12.5px; margin-top: 2px; opacity: .85; }

.yncp-highly-likely .yncp-group-head { background: #dcfce7; color: #166534; }
.yncp-possible .yncp-group-head { background: #dbeafe; color: #1e40af; }
.yncp-borderline .yncp-group-head { background: #ffedd5; color: #9a3412; }
.yncp-unlikely .yncp-group-head { background: #fee2e2; color: #991b1b; }

.yncp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.yncp-table th, .yncp-table td { padding: 9px 10px; text-align: left; border-top: 1px solid #f1f5f9; vertical-align: middle; }
.yncp-table th { color: #6b7280; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; }
.yncp-site-link { text-decoration: none; margin-left: 4px; }
.yncp-empty-group { padding: 10px 16px; color: #9ca3af; font-size: 13px; margin: 0; }

.yncp-chance-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.yncp-chance-high { background: #dcfce7; color: #166534; }
.yncp-chance-moderate { background: #dbeafe; color: #1e40af; }
.yncp-chance-borderline { background: #ffedd5; color: #9a3412; }
.yncp-chance-low { background: #fee2e2; color: #991b1b; }

.yncp-need-help-btn {
	background: #fff; border: 1px solid #2563eb; color: #2563eb; padding: 6px 12px; border-radius: 6px;
	font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.yncp-need-help-btn:hover { background: #eff6ff; }

/* ---------- General WhatsApp help box ---------- */
.yncp-whatsapp-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 16px; margin-top: 6px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.yncp-whatsapp-box p { margin: 0; font-size: 14px; max-width: 460px; }
.yncp-whatsapp-btn { background: #25d366; color: #fff; padding: 10px 18px; border-radius: 8px; text-decoration: none; font-weight: 700; white-space: nowrap; }
.yncp-whatsapp-btn:hover { background: #1fb855; color: #fff; }

.yncp-note { font-size: 12px; color: #9ca3af; margin-top: 14px; }

.yncp-powered-by { text-align: center; font-size: 12px; color: #9ca3af; margin: 14px 0 0; }
.yncp-powered-by a { color: #6b7280; text-decoration: none; font-weight: 600; }
.yncp-powered-by a:hover { color: #2563eb; text-decoration: underline; }

/* ---------- "Need Help" modal ---------- */
.yncp-modal-overlay {
	display: none; position: fixed; inset: 0; background: rgba( 15, 23, 42, .5 ); z-index: 100000;
	align-items: center; justify-content: center; padding: 16px;
}
.yncp-modal-overlay.yncp-modal-open { display: flex; }
.yncp-modal {
	background: #fff; border-radius: 12px; padding: 24px; width: 100%; max-width: 440px; position: relative;
	box-shadow: 0 20px 40px rgba( 0,0,0,.2 );
}
.yncp-modal h3 { margin: 0 0 4px; font-size: 18px; }
.yncp-modal-college { color: #2563eb; font-weight: 700; font-size: 14px; margin: 0 0 16px; }
.yncp-modal-close {
	position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; line-height: 1;
	cursor: pointer; color: #9ca3af;
}
.yncp-modal-close:hover { color: #374151; }
.yncp-modal-error { color: #dc2626; font-size: 13px; margin-bottom: 10px; display: none; }
.yncp-modal-send {
	width: 100%; background: #25d366; color: #fff; border: none; padding: 12px; border-radius: 8px;
	font-weight: 700; font-size: 14px; cursor: pointer;
}
.yncp-modal-send:hover { background: #1fb855; }
.yncp-modal-send:disabled { opacity: .6; cursor: default; }

/* ---------- Table scroll wrapper (mobile) ---------- */
.yncp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.yncp-table-wrap .yncp-table { min-width: 640px; }

/* ---------- Responsive breakpoints ---------- */
@media ( max-width: 880px ) {
	.yncp-wrap { padding: 0 4px; }
	.yncp-form, .yncp-results { padding: 16px; border-radius: 10px; }
	.yncp-results-head { flex-direction: column; align-items: stretch; }
	.yncp-head-actions { flex-direction: column; }
	.yncp-download, .yncp-send-whatsapp { text-align: center; width: 100%; box-sizing: border-box; }
	.yncp-whatsapp-box { flex-direction: column; align-items: stretch; text-align: center; }
	.yncp-whatsapp-btn { text-align: center; }

	/* The grid stacks (form above results), so point the callout up instead of left. */
	.yncp-placeholder { padding-top: 54px; }
	.yncp-placeholder-arrow { display: none; }
	.yncp-placeholder-arrow-mobile {
		display: block; position: absolute; left: 50%; top: 8px; transform: translateX( -50% ); font-size: 30px; color: #2563eb;
		animation: yncp-bounce-y 1.4s ease-in-out infinite;
	}
	.yncp-placeholder-cta-desktop { display: none; }
	.yncp-placeholder-cta-mobile { display: block; }
}

@media ( max-width: 600px ) {
	.yncp-form h3 { font-size: 18px; }
	.yncp-results-head h3 { font-size: 17px; }
	.yncp-results-sub { font-size: 12.5px; }

	/* Horizontally scrollable tab strip instead of wrapping into a wall of buttons */
	.yncp-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin: 0 -4px 16px; padding-left: 4px; padding-right: 4px; }
	.yncp-tab { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; }

	.yncp-group-head { padding: 10px 12px; font-size: 13px; }
	.yncp-group-sub { font-size: 12px; }

	.yncp-table th, .yncp-table td { padding: 8px; font-size: 12.5px; }
	.yncp-need-help-btn { padding: 5px 10px; font-size: 12px; }
	.yncp-chance-pill { padding: 2px 8px; font-size: 11px; }

	.yncp-radio, .yncp-check { margin-right: 12px; font-size: 13px; }

	.yncp-modal { padding: 18px; max-width: 100%; width: 100%; border-radius: 10px; margin: 0 8px; }
	.yncp-modal h3 { font-size: 16px; }
	.yncp-modal-send { padding: 11px; font-size: 13.5px; }
}

@media ( max-width: 380px ) {
	.yncp-field input, .yncp-field select, .yncp-field textarea { font-size: 13px; padding: 8px; }
	.yncp-submit { font-size: 14px; padding: 11px; }
}

/* =====================================================================
   1.5.0 CONVERSION-FIRST UI
   A more visual, student-friendly predictor experience. These rules are
   intentionally appended so existing prediction/result styles remain intact.
   ===================================================================== */
.yncp-wrap {
	--yncp-primary: #315eea;
	--yncp-primary-dark: #2347c8;
	--yncp-ink: #10234a;
	--yncp-muted: #687896;
	--yncp-soft: #f5f8ff;
	--yncp-border: #dfe6f2;
	max-width: 1180px;
	color: var(--yncp-ink);
}

.yncp-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	align-items: center;
	min-height: 210px;
	margin-bottom: 22px;
	padding: 28px 34px;
	overflow: hidden;
	border-radius: 24px;
	background:
		radial-gradient(circle at 86% 45%, rgba(255,255,255,.16), transparent 30%),
		linear-gradient(120deg, #0d2251 0%, #183a83 55%, #315eea 100%);
	box-shadow: 0 18px 45px rgba(27, 58, 125, .18);
}
.yncp-hero::before,
.yncp-hero::after {
	content: '';
	position: absolute;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 50%;
	pointer-events: none;
}
.yncp-hero::before { width: 330px; height: 330px; right: -120px; top: -90px; }
.yncp-hero::after { width: 210px; height: 210px; right: 50px; bottom: -150px; }
.yncp-hero-copy { position: relative; z-index: 2; max-width: 720px; }
.yncp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .11em;
	color: #cfe0ff;
}
.yncp-live-dot {
	width: 7px; height: 7px; border-radius: 50%; background: #7cf0b1;
	box-shadow: 0 0 0 5px rgba(124,240,177,.12);
	animation: yncp-pulse 1.8s infinite;
}
.yncp-hero h2 {
	margin: 0 0 9px;
	font-size: clamp(28px, 3.4vw, 43px);
	line-height: 1.06;
	letter-spacing: -.035em;
	color: #fff;
}
.yncp-hero h2 span { color: #8fb2ff; }
.yncp-hero p { max-width: 690px; margin: 0; color: #dce7ff; font-size: 14.5px; line-height: 1.65; }
.yncp-hero p strong { color: #fff; }
.yncp-hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.yncp-hero-points span {
	padding: 7px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px;
	background: rgba(255,255,255,.08); color: #edf3ff; font-size: 11.5px; font-weight: 700;
	backdrop-filter: blur(5px);
}
.yncp-hero-visual { position: relative; width: 210px; height: 175px; justify-self: end; z-index: 1; }
.yncp-hero-cap {
	position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
	display: grid; place-items: center; width: 86px; height: 86px; border-radius: 28px;
	font-size: 42px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
	box-shadow: 0 20px 45px rgba(0,0,0,.18); backdrop-filter: blur(8px);
	animation: yncp-float 3.5s ease-in-out infinite;
}
.yncp-orbit { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); border: 1px dashed rgba(255,255,255,.25); border-radius: 50%; }
.orbit-one { width: 145px; height: 145px; animation: yncp-spin 15s linear infinite; }
.orbit-two { width: 190px; height: 190px; animation: yncp-spin-reverse 21s linear infinite; }
.yncp-floating-card {
	position: absolute; display: flex; flex-direction: column; padding: 9px 11px; min-width: 88px;
	border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.94);
	box-shadow: 0 12px 28px rgba(0,0,0,.16); color: var(--yncp-ink);
}
.yncp-floating-card strong { font-size: 14px; line-height: 1.1; }
.yncp-floating-card small { margin-top: 3px; font-size: 9.5px; color: var(--yncp-muted); }
.floating-top { right: 0; top: 2px; transform: rotate(3deg); }
.floating-bottom { left: -3px; bottom: 1px; transform: rotate(-3deg); }

.yncp-grid { grid-template-columns: 382px minmax(0, 1fr); gap: 22px; }
.yncp-form {
	position: relative; padding: 22px; border: 1px solid var(--yncp-border); border-radius: 20px;
	box-shadow: 0 12px 34px rgba(27, 48, 92, .09); background: #fff;
}
.yncp-form::before {
	content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px;
	border-radius: 4px; background: linear-gradient(#315eea, #7a9cff, #315eea);
}
.yncp-form-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-left: 7px; }
.yncp-form-kicker { display: block; margin-bottom: 5px; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; color: var(--yncp-primary); }
.yncp-form h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; color: var(--yncp-ink); }
.yncp-sub { color: var(--yncp-muted); line-height: 1.5; }
.yncp-time-badge { flex: 0 0 auto; padding: 7px 9px; border-radius: 999px; background: #eef3ff; color: var(--yncp-primary); font-size: 10px; font-weight: 800; white-space: nowrap; }
.yncp-progress { margin: 14px 0 20px 7px; padding: 11px 12px; border: 1px solid #e8edf6; border-radius: 12px; background: #f9fbff; }
.yncp-progress-head { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 10px; color: var(--yncp-muted); font-weight: 700; }
.yncp-progress-head strong { color: var(--yncp-primary); }
.yncp-progress-track { height: 5px; overflow: hidden; border-radius: 99px; background: #e7edf8; }
.yncp-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #315eea, #6c8fff); transition: width .35s ease; }

.yncp-section-title {
	display: flex; gap: 10px; align-items: center; margin: 17px 0 11px 7px; padding-top: 14px;
	border-top: 1px solid #edf1f7;
}
.yncp-section-title > span {
	display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px;
	border-radius: 8px; background: #eef3ff; color: var(--yncp-primary); font-size: 9px; font-weight: 900;
}
.yncp-section-title strong { display: block; font-size: 12.5px; color: var(--yncp-ink); }
.yncp-section-title small { display: block; margin-top: 2px; color: #8794ab; font-size: 10px; line-height: 1.35; }
.yncp-field { margin-bottom: 12px; }
.yncp-field label { font-size: 11.5px; color: #344464; }
.yncp-field input[type="text"], .yncp-field input[type="tel"], .yncp-field input[type="number"], .yncp-field select, .yncp-field textarea {
	min-height: 40px; padding: 9px 11px; border: 1px solid #d7dfec; border-radius: 10px; color: #172846; background: #fff;
	box-shadow: 0 2px 5px rgba(35,55,95,.02); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.yncp-field input:focus, .yncp-field select:focus, .yncp-field textarea:focus {
	outline: none; border-color: #5d7ff0; box-shadow: 0 0 0 4px rgba(49,94,234,.09); transform: translateY(-1px);
}
.yncp-field input[type="number"][name="neet_score"] { height: 50px; font-size: 20px; font-weight: 800; color: var(--yncp-primary); background: #f7f9ff; border-color: #bfcdf5; }
.yncp-field input[type="number"][name="neet_score"]::placeholder { font-size: 13px; font-weight: 500; color: #9aa7bd; }
.yncp-radio, .yncp-check { min-height: 32px; margin: 2px 4px 2px 0; padding: 6px 9px; border: 1px solid #e1e7f1; border-radius: 9px; background: #fafcff; font-size: 11.5px; cursor: pointer; transition: all .18s ease; }
.yncp-radio:has(input:checked), .yncp-check:has(input:checked) { border-color: #9eb2f4; background: #f1f5ff; color: var(--yncp-primary); font-weight: 700; }
.yncp-radio input, .yncp-check input { accent-color: var(--yncp-primary); }
.yncp-help-check { margin-bottom: 14px; }
.yncp-help-check .yncp-check { width: 100%; box-sizing: border-box; padding: 9px 10px; }
.yncp-submit-wrap { position: relative; margin: 18px 0 0 7px; }
.yncp-submit {
	position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; overflow: hidden;
	min-height: 51px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(135deg,#315eea,#2448c8);
	box-shadow: 0 10px 22px rgba(49,94,234,.24); font-size: 14px; letter-spacing: -.01em; transition: transform .2s, box-shadow .2s;
}
.yncp-submit b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.15); font-size: 18px; }
.yncp-submit:hover { transform: translateY(-2px); background: linear-gradient(135deg,#3d69ef,#2347c8); box-shadow: 0 14px 28px rgba(49,94,234,.3); }
.yncp-submit-shine { position: absolute; z-index: 2; top: 0; bottom: 0; left: -80px; width: 55px; background: rgba(255,255,255,.16); transform: skewX(-18deg); animation: yncp-shine 3.8s infinite; pointer-events: none; }
.yncp-submit-note { margin: 8px 0 0; text-align: center; color: #98a4b8; font-size: 9.5px; line-height: 1.4; }
.yncp-reset { font-size: 10.5px; color: #8390a6; }

.yncp-results {
	min-height: 520px; padding: 0; overflow: hidden; border: 1px solid var(--yncp-border); border-radius: 20px;
	background: #fff; box-shadow: 0 12px 34px rgba(27,48,92,.07);
}
.yncp-placeholder { min-height: 520px; box-sizing: border-box; display: grid; align-content: center; justify-items: center; padding: 45px 60px; background: linear-gradient(180deg,#fbfcff,#f7f9fe); }
.yncp-placeholder-icon {
	display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 15px; border-radius: 24px;
	font-size: 37px; background: #fff; border: 1px solid #e3e9f5; box-shadow: 0 14px 32px rgba(37,67,130,.1); animation: yncp-float 3.5s ease-in-out infinite;
}
.yncp-placeholder h4 { margin: 0 0 7px; font-size: 23px; color: var(--yncp-ink); letter-spacing: -.025em; }
.yncp-placeholder-cta { color: #5570ae; }
.yncp-placeholder-cta-desktop::first-letter { color: var(--yncp-primary); }
.yncp-placeholder-steps { max-width: 420px; margin-top: 11px; }
.yncp-placeholder-steps li { padding: 8px 0 8px 36px; color: #60708d; }
.yncp-placeholder-steps li::before { width: 24px; height: 24px; top: 6px; background: #edf2ff; color: var(--yncp-primary); }
.yncp-placeholder-arrow { left: -17px; font-size: 40px; color: #4d70df; }

/* ---------- Lead-capture teaser popup ---------- */
.yncp-teaser-overlay {
	display: none; position: fixed; inset: 0; z-index: 100001; align-items: center; justify-content: center; padding: 18px;
	background: rgba(7,18,43,.64); backdrop-filter: blur(7px);
}
.yncp-teaser-overlay.yncp-teaser-open { display: flex; animation: yncp-fade-in .25s ease both; }
.yncp-teaser-modal {
	position: relative; width: min(490px, 100%); box-sizing: border-box; padding: 30px 30px 26px; text-align: center;
	border: 1px solid rgba(255,255,255,.65); border-radius: 26px; background: #fff;
	box-shadow: 0 35px 90px rgba(0,0,0,.3); overflow: hidden; animation: yncp-pop-in .35s cubic-bezier(.2,.8,.2,1) both;
}
.yncp-teaser-modal::before { content: ''; position: absolute; width: 230px; height: 230px; border-radius: 50%; top: -130px; right: -80px; background: #eaf0ff; pointer-events: none; }
.yncp-teaser-close { position: absolute; z-index: 3; top: 12px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3f6fb; color: #6f7d94; font-size: 20px; cursor: pointer; }
.yncp-teaser-icon { position: relative; display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 11px; border-radius: 20px; font-size: 31px; background: linear-gradient(135deg,#eef3ff,#fff); box-shadow: 0 10px 25px rgba(49,94,234,.12); }
.yncp-teaser-badge { position: relative; display: inline-block; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; background: #eef3ff; color: var(--yncp-primary); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.yncp-teaser-modal h3 { position: relative; margin: 0 auto 8px; max-width: 390px; font-size: 27px; line-height: 1.12; letter-spacing: -.035em; color: var(--yncp-ink); }
.yncp-teaser-modal h3 span { color: var(--yncp-primary); }
.yncp-teaser-modal p { position: relative; max-width: 400px; margin: 0 auto; color: #667691; font-size: 13.5px; line-height: 1.55; }
.yncp-teaser-stats { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.yncp-teaser-stats span { padding: 7px 9px; border-radius: 8px; background: #f7f9fd; color: #667691; font-size: 10px; font-weight: 700; }
.yncp-teaser-stats b { color: #1b9a61; }
.yncp-teaser-start { position: relative; width: 100%; min-height: 49px; border: 0; border-radius: 12px; background: linear-gradient(135deg,#315eea,#2347c8); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 11px 24px rgba(49,94,234,.24); transition: transform .2s, box-shadow .2s; }
.yncp-teaser-start span { margin-left: 8px; font-size: 18px; }
.yncp-teaser-start:hover { transform: translateY(-2px); box-shadow: 0 15px 28px rgba(49,94,234,.3); }
.yncp-teaser-modal > small { display: block; margin-top: 9px; color: #9aa6ba; font-size: 9.5px; }

.yncp-floating-cta { position: fixed; z-index: 99998; right: 20px; bottom: 20px; display: none; }
.yncp-floating-cta.yncp-floating-visible { display: block; animation: yncp-slide-up .3s ease both; }
.yncp-floating-cta button { display: flex; align-items: center; gap: 9px; padding: 9px 10px 9px 9px; border: 1px solid rgba(255,255,255,.6); border-radius: 14px; background: #fff; color: var(--yncp-ink); box-shadow: 0 12px 30px rgba(17,37,79,.2); cursor: pointer; }
.yncp-floating-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #eef3ff; color: var(--yncp-primary); font-weight: 900; }
.yncp-floating-cta strong, .yncp-floating-cta small { display: block; text-align: left; }
.yncp-floating-cta strong { font-size: 11px; }
.yncp-floating-cta small { margin-top: 2px; font-size: 9px; color: #8a97ac; }
.yncp-floating-cta b { margin-left: 3px; color: var(--yncp-primary); font-size: 17px; }

/* Existing results inherit the new visual language. */
.yncp-results-inner { padding: 22px; }
.yncp-results-head { padding-bottom: 13px; border-bottom: 1px solid #edf1f7; }
.yncp-results-head h3 { color: var(--yncp-ink); font-size: 21px; }
.yncp-tab { border-radius: 999px; padding: 8px 13px; }
.yncp-tab-active { background: var(--yncp-primary); border-color: var(--yncp-primary); }
.yncp-group { border-radius: 14px; }
.yncp-table th, .yncp-table td { padding: 11px 10px; }

@keyframes yncp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes yncp-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes yncp-spin-reverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes yncp-shine { 0%,60%,100% { left: -80px; } 72% { left: 110%; } }
@keyframes yncp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes yncp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes yncp-pop-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes yncp-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 880px) {
	.yncp-hero { grid-template-columns: 1fr; min-height: auto; padding: 24px 22px; }
	.yncp-hero-visual { display: none; }
	.yncp-grid { grid-template-columns: 1fr; }
	.yncp-form { order: 1; }
	.yncp-results { order: 2; }
	.yncp-results { min-height: 420px; }
	.yncp-placeholder { min-height: 420px; }
	.yncp-floating-cta { display: none !important; }
}

@media (max-width: 600px) {
	.yncp-wrap { padding: 0; }
	.yncp-hero { margin-bottom: 14px; border-radius: 18px; padding: 20px 18px; }
	.yncp-hero h2 { font-size: 27px; }
	.yncp-hero p { font-size: 13px; }
	.yncp-hero-points span { font-size: 10px; padding: 6px 8px; }
	.yncp-form { padding: 17px; border-radius: 17px; }
	.yncp-form h3 { font-size: 20px; }
	.yncp-form-top { margin-left: 4px; }
	.yncp-section-title, .yncp-progress, .yncp-submit-wrap { margin-left: 4px; }
	.yncp-section-title small { font-size: 9px; }
	.yncp-results { border-radius: 17px; }
	.yncp-results-inner { padding: 16px; }
	.yncp-placeholder { min-height: 390px; padding: 35px 22px; }
	.yncp-placeholder h4 { font-size: 20px; text-align: center; }
	.yncp-placeholder-cta { text-align: center; }
	.yncp-teaser-modal { padding: 25px 19px 21px; border-radius: 21px; }
	.yncp-teaser-modal h3 { font-size: 24px; }
	.yncp-teaser-stats span { font-size: 9.5px; }
}


/* ---------- Mobile-first predictor conversation ---------- */
.yncp-results-empty { }
.yncp-teaser-lock { overflow: hidden; }

@media (max-width: 880px) {
	.yncp-wrap:not(.yncp-mobile-form-visible) .yncp-hero,
	.yncp-wrap:not(.yncp-mobile-form-visible) .yncp-grid,
	.yncp-wrap:not(.yncp-mobile-form-visible) .yncp-powered-by {
		visibility: hidden;
	}
	.yncp-wrap:not(.yncp-mobile-form-visible) .yncp-hero { height: 1px; margin: 0; padding: 0; overflow: hidden; }
	.yncp-wrap:not(.yncp-mobile-form-visible) .yncp-grid { height: 1px; overflow: hidden; }
	.yncp-wrap.yncp-mobile-form-visible .yncp-hero { display: none; }
	.yncp-wrap.yncp-mobile-form-visible .yncp-results.yncp-results-empty { display: none; }
	.yncp-wrap.yncp-mobile-form-visible .yncp-grid { display: block; }
	.yncp-wrap.yncp-mobile-form-visible .yncp-form { width: 100%; box-sizing: border-box; }

	/* Make the teaser feel like the first conversation, not an ad. */
	.yncp-teaser-overlay {
		padding: 14px;
		align-items: center;
		background: rgba(6,16,38,.72);
		backdrop-filter: blur(9px);
	}
	.yncp-teaser-modal {
		width: min(390px, 100%);
		padding: 18px 17px 16px;
		border-radius: 24px;
		text-align: left;
		box-shadow: 0 28px 80px rgba(0,0,0,.35);
	}
	.yncp-teaser-icon { width: 48px; height: 48px; margin: 0 0 10px; border-radius: 15px; font-size: 23px; }
	.yncp-teaser-badge { margin-bottom: 7px; font-size: 8px; }
	.yncp-teaser-modal h3 { max-width: 330px; margin: 0 0 8px; font-size: 25px; line-height: 1.08; }
	.yncp-teaser-modal p { margin: 0; font-size: 13px; line-height: 1.55; }
	.yncp-teaser-stats { justify-content: flex-start; margin: 13px 0 14px; }
	.yncp-teaser-stats span { padding: 6px 8px; font-size: 9px; }
	.yncp-teaser-start { min-height: 52px; font-size: 14px; border-radius: 13px; text-align: center; }
	.yncp-teaser-modal > small { text-align: center; font-size: 9px; }
	.yncp-teaser-close { top: 9px; right: 9px; width: 30px; height: 30px; }
}

@media (max-width: 600px) {
	.yncp-wrap.yncp-mobile-form-visible { padding: 0 10px; }
	.yncp-wrap.yncp-mobile-form-visible .yncp-form { margin: 0; padding: 18px 15px 20px; border-radius: 18px; box-shadow: 0 12px 35px rgba(27,48,92,.08); }
	.yncp-wrap.yncp-mobile-form-visible .yncp-form-top { padding-top: 2px; }
	.yncp-wrap.yncp-mobile-form-visible .yncp-form h3 { font-size: 22px; }
	.yncp-wrap.yncp-mobile-form-visible .yncp-form-top .yncp-sub { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.yncp-live-dot, .yncp-hero-cap, .orbit-one, .orbit-two, .yncp-placeholder-icon, .yncp-submit-shine { animation: none !important; }
}