/* Claexa AI alias stylesheet: defer to Claexa-named build */
@import url('./claexa-a57c7e.webflow.css');

/* --- Claexa overrides: hide horizontal scrollbar & fix marquee overflow --- */
html, body {
	/* Prevent page-level horizontal scrollbar from appearing */
	overflow-x: hidden;
}

/* Make media scale to container width */
img, video { max-width: 100%; height: auto; }

/* Ensure the carousel/marquee never leaks out of its container */
.carousel,
.scroller {
	overflow: hidden;
}

/* Make marquee content stay on one line and avoid reflow jitter */
.scroller-wrapper {
	display: inline-flex;
	white-space: nowrap;
	will-change: transform;
}

/* Prevent images from shrinking and causing layout shifts during animation */
.scroller-img {
	flex-shrink: 0;
}

/* --- Global subtle downscale --- */
html {
	/* Reduce rem-based sizes site-wide */
	font-size: 88%; /* ~12% smaller */
}

/* Trim some large desktop paddings for a less zoomed feel */
@media screen and (min-width: 1180px) {
	.header-wrapper {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	.hero-wrapper {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	.stats,
	.benefits,
	.faq,
	.institution-ready,
	.symphony-model,
	.for-homework.gradbg,
	.what-people-think.gradbg {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

/* --- Fixed navbar override and layout offsets --- */
:root {
	/* Will be updated by JS to the real header height */
	--nav-offset: 0px;
}

/* --- Typography downscale for px-based classes --- */
.menu-item { font-size: 15px !important; }
.menu-item-small { font-size: 14px !important; }
.btn-action { font-size: 15px !important; }
.paragraph { font-size: 0.95rem !important; }
.paragraph-white { font-size: 0.95rem !important; }
.h1 { font-size: 3.6rem !important; line-height: 3.6rem !important; }
.h2-subtitle { font-size: 13px !important; }
.h3-black { font-size: 1.2rem !important; }
.h3-white { font-size: 0.95rem !important; }
.value { font-size: 58px !important; line-height: 58px !important; }
.link { font-size: 13px !important; }
.tab-link-general, .tab-link-integration { font-size: 14px !important; }
.tab-link-support, .tab-link-support.w--current { font-size: 14px !important; }
.faq-question-bar { font-size: 18px !important; }
.text-block-2 { font-size: 0.95rem !important; }

.header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000; /* above content */
	width: 100%;
}

/* Add top padding equal to header height once measured */
body.has-fixed-header {
	padding-top: var(--nav-offset);
}

/* Prevent in-page anchor jumps from being hidden under the fixed header */
[id] {
	scroll-margin-top: var(--nav-offset);
}

/* --- Comparison table styles --- */
.comparison .container { max-width: 1000px; }
.table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.compare-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0,0,0,0.06);
	border-radius: 12px;
	overflow: hidden;
}
.compare-table th, .compare-table td {
	padding: 14px 16px;
	border-bottom: 1px solid #ececec;
	text-align: left;
	vertical-align: middle;
}
.compare-table thead th {
	background: linear-gradient(90deg, #65a2ff, #243dff);
	color: #fff;
	font-weight: 600;
}
.compare-table tbody tr:nth-child(even) {
	background-color: #f9fbff;
}
.compare-table td:last-child, .compare-table th:last-child {
	font-weight: 600;
}
.compare-table td strong { color: #243dff; }

@media (max-width: 767px) {
	.compare-table th, .compare-table td { padding: 12px; font-size: 0.95rem; }
}

/* Polished comparison section visuals */
.comparison {
	background: linear-gradient(180deg, rgba(101,162,255,0.08), rgba(255,255,255,0));
	padding: 40px 0 60px;
}
.comparison .section-header { margin-bottom: 20px; }
.compare-table th:first-child,
.compare-table td:first-child { width: 34%; }
.compare-table th:not(:first-child),
.compare-table td:not(:first-child) { width: 22%; }

/* Emphasize the Claexa column (body cells only) */
.compare-table tbody td.claexa-col {
	background: rgba(101,162,255,0.10);
}

/* Yes/No badges */
.compare-table td { text-align: center; }
.compare-table td:first-child { text-align: left; }
.compare-table .yes,
.compare-table .no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 700;
}
.compare-table .yes { background: rgba(16,185,129,0.28); color: #065f46; border: 1px solid rgba(16,185,129,0.65); }
.compare-table .no { background: rgba(244,63,94,0.28); color: #7f1d1d; border: 1px solid rgba(244,63,94,0.65); }
/* notes removed per request */

@media (max-width: 767px) {
	.comparison { padding: 20px 0 40px; }
    .table-wrapper { overflow: visible; }
}

/* Utility: center specific images */
.img-center { display: block !important; margin-left: auto !important; margin-right: auto !important; }

/* ========================= */
/* Responsive enhancements   */
/* ========================= */

/* Containers: reduce side padding on small screens */
@media (max-width: 767px) {
	.w-container,
	.w-layout-blockcontainer { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Hero: stack and center on tablet/phone */
@media (max-width: 991px) {
	.hero-tex-image-wrapper { flex-direction: column; align-items: center; text-align: center; }
	.hero-tex-image-wrapper .hero-text-wrapper { align-items: center; }
	.hero-image-wrapper img { width: 100%; max-width: 520px; height: auto; }
}

/* Feature/benefits/testimonials cards wrap */
.flex-block-3-items, .flex-block-4-items, .testimonials { flex-wrap: wrap; gap: 16px; }
@media (max-width: 991px) {
	.flex-block-4-items > .white-box,
	.flex-block-4-items > .blue-box,
	.flex-block-4-items > .black-box,
	.flex-block-3-items > .white-box,
	.flex-block-3-items > .blue-box,
	.flex-block-3-items > .black-box,
	.testimonials > .white-box { flex: 1 1 calc(50% - 16px); }
}
@media (max-width: 480px) {
	.flex-block-4-items > .white-box,
	.flex-block-4-items > .blue-box,
	.flex-block-4-items > .black-box,
	.flex-block-3-items > .white-box,
	.flex-block-3-items > .blue-box,
	.flex-block-3-items > .black-box,
	.testimonials > .white-box { flex: 1 1 100%; }
}

/* Hide step arrows on small screens */
@media (max-width: 767px) {
	.image-6, .image-7 { display: none !important; }
}

/* Ensure 3 homework cards stay on one row with arrows on large screens */
@media (min-width: 992px) {
	.for-homework .flex-block-3-items {
		display: grid !important;
		grid-template-columns: 1fr 80px 1fr 80px 1fr;
		column-gap: 24px;
		row-gap: 0;
		align-items: stretch;
	}
	.for-homework .flex-block-3-items > .white-box { height: 100%; }
	.for-homework .flex-block-3-items > .image-6,
	.for-homework .flex-block-3-items > .image-7 { align-self: center; justify-self: center; width: 80px; max-width: 100%; }
}

/* Contact form: stack fields */
@media (max-width: 767px) {
	.flex-block-9 { flex-direction: column !important; gap: 12px; }
	.div-block-7, .div-block-8 { width: 100% !important; }
}

/* FAQ tabs: allow horizontal scroll */
@media (max-width: 767px) {
	.w-tab-menu { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; }
	.w-tab-menu .tab { white-space: nowrap; flex: 0 0 auto; }
}

/* FAQ tab links: neutralize default link blue/underline only in FAQ section */
.faq .w-tab-menu .tab,
.faq .w-tab-menu .tab:link,
.faq .w-tab-menu .tab:visited {
	color: #0f172a !important; /* match body text */
	text-decoration: none !important; /* remove underline */
}
.faq .w-tab-menu .tab:hover { color: #243dff !important; text-decoration: none !important; }
/* Active tab: ensure contrast against blue pill background */
.faq .w-tab-menu .tab.w--current {
	color: #ffffff !important;
	text-decoration: none !important;
	background: #243dff !important; /* fallback if not already set by Webflow */
	border-radius: 14px; /* keep pill look */
}
.faq .w-tab-menu .tab.w--current > * { color: inherit !important; }
/* Keyboard focus */
.faq .w-tab-menu .tab:focus-visible { outline: 2px solid #243dff; outline-offset: 2px; }

/* Symphony model images: desktop vs mobile */
@media (max-width: 767px) {
	.desktop-scheme-2 { display: none !important; }
	.mobile-scheme-2 { display: block !important; width: 100%; height: auto; }
}
@media (min-width: 768px) {
	.mobile-scheme-2 { display: none !important; }
}

/* Footer responsiveness */
@media (max-width: 767px) {
	.flex-block-6 { flex-wrap: wrap; gap: 16px; }
	.footer-1, .footer-2, .footer-3, .footer-4 { flex: 1 1 100%; }
	.footer-4 .link { display: inline-block; margin-right: 10px; margin-bottom: 6px; }
	.image-5 { max-width: 160px; height: auto; }
	.brand-socials a { display: inline-block; margin-right: 10px; }
	.brand-socials img { width: 28px; height: 28px; }
}

/* Footer layout fix for tablets/desktops: keep columns horizontal */
@media (min-width: 768px) {
	.footer .flex-block-6 {
		display: grid !important;
		grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(200px, 1fr));
		align-items: start;
		justify-content: space-between;
		gap: 32px;
	}
	.footer-1, .footer-2, .footer-3, .footer-4 { min-width: 0; }
	.footer .text-weight-semibold { display: block; margin-bottom: 10px; }
	.footer .link { display: block; margin: 6px 0; }
	.image-5 { max-width: 80px; height: auto; margin-bottom: 12px; }
	.brand-socials a { display: inline-block; margin-right: 12px; }
	.brand-socials img { width: 24px; height: 24px; }
}

/* ========================= */
/* Testimonials standardization */
/* ========================= */
.what-people-think .flex-block-4-items.testimonials { align-items: stretch; }
.what-people-think .white-box.quote,
.what-people-think .white-box-single.quote { display: flex; flex-direction: column; height: 100%; }
.what-people-think .white-box.quote blockquote,
.what-people-think .white-box-single.quote blockquote { flex-grow: 1; }

/* Normalize all testimonial logos */
.what-people-think .image-3 {
  display: block;
  margin: 0 auto 10px auto;
	height: 80px !important; /* override inline sizes */
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
}

/* Ensure consistent card height on larger screens */
@media (min-width: 992px) {
  .what-people-think .white-box.quote { min-height: 320px; }
}

/* ========================= */
/* Institution board rotator */
/* ========================= */
.institution-ready .cert-box .board-rotator {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	margin-bottom: 10px;
}
.institution-ready .cert-box .board-rotator .board-logo {
	position: absolute;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 400ms ease, transform 400ms ease;
	max-height: 100%;
	width: auto;
}
.institution-ready .cert-box .board-rotator .board-logo.is-active {
	opacity: 1;
	transform: scale(1);
}
.institution-ready .cert-box .board-rotator .board-dots {
	position: absolute;
	bottom: -6px;
	display: none !important; /* hide dots per request */
	gap: 6px;
}
.institution-ready .cert-box .board-rotator .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd5e1;
	border: none;
	padding: 0;
	cursor: pointer;
}
.institution-ready .cert-box .board-rotator .dot.is-active { background: #243dff; }

@media (max-width: 767px) {
	.institution-ready .cert-box .board-rotator { height: 90px; }
}

/* Ensure certification logos (NEP, RPWD, etc.) share the same visual size */
.institution-ready .cert-logo {
	display: block;
	width: auto;
	height: 120px; /* match rotator height on desktop/tablet */
	object-fit: contain;
	margin: 0 auto 8px auto;
}
@media (max-width: 767px) {
	.institution-ready .cert-logo { height: 90px; } /* match rotator height on mobile */
}

/* Comparison table: desktop wide, mobile stacked */
@media (min-width: 768px) {
	.compare-table { min-width: 700px; }
}
@media (max-width: 767px) {
	.compare-table { min-width: 0; width: 100%; border-collapse: separate; border-spacing: 0 12px; box-shadow: none; background: transparent; }
	.compare-table thead { display: none; }
	.compare-table tbody { display: block; }
	.compare-table tr { display: block; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; }
	.compare-table td { display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: right; padding: 12px 14px; border: none; border-bottom: 1px solid #eef2f7; width: 100% !important; box-sizing: border-box; }
	.compare-table td:first-child { background: #f5f8ff; color: #0f172a; font-weight: 600; text-align: left; border-bottom: 1px solid #e3eafc; grid-template-columns: 1fr; }
	.compare-table td:last-child { border-bottom: none; }
	/* Reset desktop column width rules on mobile */
	.compare-table th:first-child,
	.compare-table td:first-child,
	.compare-table th:not(:first-child),
	.compare-table td:not(:first-child) { width: auto !important; }
	/* Use data-label attribute for column titles to avoid nth-child fragility */
	.compare-table td:not(:first-child)::before { content: attr(data-label); justify-self: start; color: #475569; font-weight: 600; font-size: 0.9rem; }
	.compare-table td.claexa-col::before { color: #243dff; font-weight: 700; }
	.compare-table .yes, .compare-table .no { justify-self: end; }
}

/* Careers page styles */
.careers-shell { max-width: 1100px; margin: 0 auto; padding: 40px 20px; line-height: 1.6; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.careers-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.careers-header img { height: 32px; }
.careers-hero { margin: 8px 0 20px; }
.careers-hero .hero-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); margin: 0 0 8px; letter-spacing: -0.01em; }
.careers-hero .hero-subtitle { color: #475569; margin: 0; }

.careers-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 20px; }
.filter { display: grid; gap: 6px; }
.filter span { color: #334155; font-weight: 600; font-size: .92rem; }
.filter input[type="search"], .filter select { appearance:none; background:#fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; font-size: .95rem; box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset; }
.filter input[type="search"]:focus, .filter select:focus { outline: none; border-color: #243dff; box-shadow: 0 0 0 3px rgba(36,61,255,0.12); }
.careers-filters { position: sticky; top: calc(var(--nav-offset, 64px) + 10px); background: rgba(255,255,255,.75); backdrop-filter: blur(4px); padding: 12px; border: 1px solid #eef2f7; border-radius: 12px; z-index: 2; }

.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
@media (min-width: 768px) and (max-width: 1199px) {
	.jobs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1200px) {
	.jobs-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.job-card { background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: transform .15s ease, box-shadow .15s ease; }
.job-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.06); }
.job-header { display: grid; gap: 6px; margin-bottom: 8px; }
.job-title { margin: 0; font-size: 1.08rem; }
.job-meta { color: #64748b; font-size: .9rem; }
.job-meta .pill { display:inline-block; margin-right:8px; padding:3px 8px; border-radius:999px; background:#f5f8ff; color:#243dff; border:1px solid #e3eafc; font-size:.8rem; }
.job-summary { margin: 8px 0; color: #0f172a; }
.job-section { margin-top: 10px; }
.job-section h4 { margin: 0 0 6px; font-size: .95rem; color: #334155; }
.job-list { margin: 0 0 0 20px; }
.job-actions { margin-top: 12px; }
.btn-primary { display: inline-block; background: #243dff; color: #fff !important; text-decoration: none; padding: 9px 14px; border-radius: 10px; font-weight: 700; border: 1px solid #1e2fcc; }
.btn-primary:hover { background: #1f33e6; }
.jobs-empty { opacity: .7; }
.back-home { margin-top: 24px; }

@media (max-width: 767px) {
	.careers-shell { padding: 28px 16px; }
	.jobs-grid { grid-template-columns: 1fr; }
}

/* ========================= */
/* About page styles         */
/* ========================= */
.about-shell { max-width: 1100px; margin: 0 auto; padding: 40px 20px; line-height: 1.7; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #0f172a; }
.about-hero { margin: 4px 0 18px; padding: 18px; background: linear-gradient(180deg, rgba(101,162,255,0.08), rgba(255,255,255,0)); border: 1px solid #e6e9f2; border-radius: 16px; }
.about-hero h1 { font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.8rem); margin: 0 0 8px; letter-spacing: -0.01em; }
.about-hero .lede { color: #475569; margin: 0; }
.about-list { margin: 10px 0 0 22px; }
.about-list li { margin: 6px 0; }

.about-section { margin: 28px 0; }
.about-section h2 { margin: 0 0 8px; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: #111827; }
.about-section p { margin: 0 0 10px; }
.about-section ul { margin: 8px 0 0 20px; color: #0f172a; }
.about-section li { margin: 6px 0; }

.principles { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 10px; }
@media (min-width: 768px) { .principles { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.about-card { background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.about-card h3 { margin: 0 0 6px; font-size: 1.02rem; color: #1f2937; }
.about-card p { margin: 0; color: #475569; }

.founders { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 10px; }
.founder-card { background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.founder-name { margin: 0 0 2px; font-weight: 700; }
.founder-role { margin: 0; color: #64748b; font-size: .92rem; }

.cta-row { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-secondary { display: inline-block; background: #fff; color: #243dff !important; text-decoration: none; padding: 9px 14px; border-radius: 10px; font-weight: 700; border: 1px solid #243dff; }
.btn-secondary:hover { background: #f5f8ff; }

/* --- Mobile responsive logo fix --- */
@media (max-width: 767px) {
	.brand .image {
		width: 140px !important;
		height: auto !important;
	}
}

@media (max-width: 480px) {
	.brand .image {
		width: 120px !important;
		height: auto !important;
	}
}