/* ==========================================================================
   Wind UI skin for the public website (index.html and the pages it links to).
   Loaded LAST on each page so it restyles the old theme (style.css, Bootstrap, per-page CSS) without
   changing any page's structure or behaviour. Tokens are the Angular app's (frontend/src/styles.css).
   See .agents/skills/wind_ui.
   ========================================================================== */

:root {
  --logo-orange: #f5a31a;
  --logo-magenta: #e5258a;
  --logo-blue: #1e88e5;
  --logo-green: #2bb24c;
  --wind-accent: #46178F;
  --wind-accent-soft: #efe7f7;
  --wind-accent-ink: #2d0f5c;
  --wind-surface: #ffffff;
  --wind-surface-2: #f7f8fb;
  --wind-page: #f4f6fa;
  --wind-line: #e5e8ef;
  --wind-ink: #0f172a;
  --wind-ink-2: #475569;
  --wind-ink-3: #64748b;
  --wind-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 32px -22px rgba(15, 23, 42, 0.28);
  --wind-shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.05), 0 24px 48px -28px rgba(15, 23, 42, 0.35);
}

/* ── Type and page ── */
html, body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  background-color: var(--wind-page);
  color: var(--wind-ink-2);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', system-ui, sans-serif !important;
  color: var(--wind-ink);
  letter-spacing: -0.015em;
}
h1 { font-weight: 700; }
h2 { font-weight: 700; }
p, li { line-height: 1.7; }
a { color: var(--wind-accent-ink); transition: color 0.15s ease; }
a:hover { color: var(--wind-accent); }
::selection { background: var(--wind-accent-soft); color: var(--wind-accent-ink); }

/* ── Header: a light glass bar ── */
.header_area,
.header_area.navbar_fixed,
header.header_area {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--wind-line);
  box-shadow: none !important;
}
.header_area .navbar .nav-link,
.header_area .navbar-nav .nav-item .nav-link {
  color: var(--wind-ink) !important;
  font-weight: 500;
  border-radius: 999px;
  padding: 8px 12px !important;
  white-space: nowrap;
  border: none !important;
  border-bottom: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.header_area .navbar .nav-link:hover,
.header_area .navbar-nav .nav-item.active > .nav-link,
.header_area .navbar .nav-link.active {
  background: var(--wind-accent-soft) !important;
  color: var(--wind-accent-ink) !important;
  border: none !important;
  border-bottom: none !important;
}
.dropdown-menu,
.solutions-dropdown,
.mega-menu {
  border: 1px solid var(--wind-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--wind-shadow-lift) !important;
  padding: 10px !important;
}

/* ── Buttons: violet pills ── */
.btn_get, .btn_hover, .er_btn, .theme_btn, .price_btn, .btn-primary,
.affiliate-btn, .left-btn, .header_area .btn, button[type='submit'], input[type='submit'] {
  background: var(--wind-accent) !important;
  border: 1px solid var(--wind-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 500;
  box-shadow: 0 8px 20px -10px rgba(70, 23, 143, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn_get:hover, .btn_hover:hover, .er_btn:hover, .theme_btn:hover, .price_btn:hover, .btn-primary:hover,
.affiliate-btn:hover, .left-btn:hover, .header_area .btn:hover, button[type='submit']:hover, input[type='submit']:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #fff !important;
}
.btn-outline-primary, .btn-light, .btn-secondary, .btn_signin {
  border-radius: 999px !important;
  border: 1px solid var(--wind-line) !important;
  background: var(--wind-surface) !important;
  color: var(--wind-ink) !important;
  font-weight: 500 !important;
  padding: 8px 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}
.btn-outline-primary:hover, .btn-light:hover, .btn-secondary:hover, .btn_signin:hover {
  border-color: var(--wind-accent) !important;
  background: var(--wind-accent-soft) !important;
  color: var(--wind-accent-ink) !important;
  transform: translateY(-1px);
}
.header_area .btn_signin,
.header_area .btn_get {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 22px !important;
  min-width: 100px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
}
.header_area .btn_signin {
  margin-right: 10px !important;
  margin-left: 15px !important;
}
.header_area .btn_get {
  margin-left: 0 !important;
}
.tab-btn {
  border-radius: 14px !important;
  border: 1px solid var(--wind-line) !important;
  background: var(--wind-surface) !important;
  color: var(--wind-ink-2) !important;
  font-weight: 500;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
.tab-btn .title {
  color: var(--wind-ink) !important;
  font-weight: 600 !important;
}
.tab-btn .desc {
  color: var(--wind-ink-3) !important;
}
.tab-btn:hover {
  background: var(--wind-surface-2) !important;
  border-color: var(--wind-accent) !important;
}
.tab-btn.active {
  background: var(--wind-accent) !important;
  border-color: var(--wind-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px -2px rgba(70, 23, 143, 0.35) !important;
}
.tab-btn.active .title,
.tab-btn.active .desc {
  color: #fff !important;
}
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--wind-accent); outline-offset: 2px; }

/* ── Cards: white, 22px corners, one soft shadow ── */
.card, .solution-card, .solution-feature-card, .feature-card, .glass-card, .promote-card, .step-card,
.testimonial-card, .pricing_item, .price_item, .faq-item, .clients_item, .service_item, .s_service_item,
.plans .plan {
  background: var(--wind-surface) !important;
  border: 1px solid var(--wind-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--wind-shadow) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.solution-card:hover, .solution-feature-card:hover, .feature-card:hover, .promote-card:hover, .step-card:hover,
.pricing_item:hover, .price_item:hover, .service_item:hover, .plans .plan:hover {
  transform: translateY(-2px);
  border-color: var(--wind-accent) !important;
  box-shadow: var(--wind-shadow-lift) !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--wind-line) !important;
  border-radius: 22px 22px 0 0 !important;
}
.card img, .solution-card img, .feature-card img, .promote-card img { border-radius: 14px; }
.solution-card i, .solution-feature-card i, .feature-card i {
  color: var(--wind-accent);
}

.plans .plan.active { border: 2px solid var(--wind-accent) !important; }
.plan-pill { border-radius: 999px !important; }
.plan-pill.active { background: var(--wind-accent) !important; color: #fff !important; border-color: var(--wind-accent) !important; }

/* ── FAQ ── */
.faq-item { padding: 4px 6px; margin-bottom: 12px; }
.faq-question { color: var(--wind-ink) !important; font-weight: 600; }
.faq-answer { color: var(--wind-ink-2) !important; }
.btn-link { color: var(--wind-ink) !important; text-decoration: none !important; font-weight: 600; }

/* Home page FAQ accordion: one rounded item per question, a round +/- chip, a readable answer. */
.faq_content #accordion { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq_content #accordion .card { overflow: hidden; margin: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.faq_content #accordion .card:hover { border-color: var(--wind-accent) !important; }
.faq_content #accordion .card:has(.collapse.show) {
  border-color: var(--wind-accent) !important;
  box-shadow: var(--wind-shadow-lift) !important;
}
.faq_content #accordion .card-header {
  padding: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
}
.faq_content #accordion .card-header .btn {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 18px 68px 18px 24px !important;
  text-align: left;
  font: 600 16px/1.5 'Poppins', system-ui, sans-serif !important;
  color: var(--wind-ink) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  white-space: normal;
}
.faq_content #accordion .card-header .btn:not(.collapsed) { color: var(--wind-accent) !important; }
.faq_content #accordion .card-header .btn i {
  right: 20px;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--wind-accent-soft);
  color: var(--wind-accent) !important;
  font-size: 13px;
}
.faq_content #accordion .card-header .btn.collapsed i:first-of-type { display: flex; }
.faq_content #accordion .card-header .btn:not(.collapsed) i + i { display: flex; background: var(--wind-accent); color: #fff !important; }
.faq_content #accordion .card-header .btn.collapsed i + i { display: none; }
.faq_content #accordion .card-body {
  padding: 16px 24px 24px !important;
  border-top: 1px solid var(--wind-line);
  font: 400 15px/1.75 'Poppins', system-ui, sans-serif !important;
  color: var(--wind-ink-2) !important;
}
.faq_content #accordion .card-body b { color: var(--wind-ink); font-weight: 600; }
@media (max-width: 575.98px) {
  .faq_content #accordion .card-header .btn { padding: 16px 60px 16px 18px !important; font-size: 15px !important; }
  .faq_content #accordion .card-header .btn i { right: 14px; }
  .faq_content #accordion .card-body { padding: 14px 18px 20px !important; font-size: 14px !important; }
}

/* ── Sections ── */
.section-title, .section-header h2, .feature-section h2 { color: var(--wind-ink) !important; }
.section-header p, .section-title + p { color: var(--wind-ink-3) !important; }
.testimonial-text { color: var(--wind-ink-2) !important; font-style: normal; }

/* ── Forms ── */
input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='password'],
select, textarea, .form-control {
  border: 1px solid var(--wind-line) !important;
  border-radius: 14px !important;
  background: var(--wind-surface) !important;
  color: var(--wind-ink) !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--wind-accent) !important;
  box-shadow: 0 0 0 3px var(--wind-accent-soft) !important;
  outline: none;
}

/* ── Footer: deep ink ── */
.footer_area, .payment_footer_area, .footer_top_six, .innerFooter, footer, .new-footer {
  background: #0f172a !important;
  color: #cbd5e1 !important;
}
.footer_area h3, .footer_area h4, .footer_area h5, .footer_top_six h3, .footer_top_six h4, .footer-column h4, .footer-column h5, .new-footer h4, .new-footer .footer-column h4 {
  color: #f8fafc !important;
}
.footer_area a, .footer_top_six a, .footer-column a, .footer_bottom a, .new-footer a { color: #cbd5e1 !important; }
.footer_area a:hover, .footer_top_six a:hover, .footer-column a:hover, .footer_bottom a:hover, .new-footer a:hover { color: #cdbbea !important; }
.footer_bottom, .new-footer .footer-bottom { background: #0b1120 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; color: #94a3b8 !important; }
.footer_bottom p, .new-footer .footer-bottom p { color: #94a3b8 !important; }
.new-footer .footer-logo p { color: #94a3b8 !important; }

/* ── Phone ── */
@media (max-width: 767px) {
  .card, .solution-card, .solution-feature-card, .feature-card, .glass-card, .promote-card, .step-card,
  .testimonial-card, .pricing_item, .price_item, .faq-item { border-radius: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── One typeface on every page. Icon fonts (Font Awesome, Themify, Flaticon, Elegant, Material) are left alone ── */
html, body, input, select, textarea, button,
body *:not(i):not(svg):not(path):not([class*="fa-"]):not([class^="fa"]):not([class*=" fa"]):not([class*="icon"]):not([class*="ti-"]):not([class*="arrow_"]):not([class*="social_"]):not([class*="material"]):not([class*="glyph"]) {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* ── One type scale, every page. Content text only: the shared header and footer have their own sizes. ──
   Strong on purpose: pages used to force their own 14/24/28px sizes, which made them look different. */
body { font-size: 16px; line-height: 1.65; color: var(--wind-ink-2); }
body h1:not(.header_area *):not(footer *) { font-size: clamp(30px, 4vw, 40px) !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -0.02em; }
body h2:not(.header_area *):not(footer *) { font-size: clamp(26px, 3vw, 34px) !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -0.015em; }
body h3:not(.header_area *):not(footer *) { font-size: 22px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -0.01em; }
body h4:not(.header_area *):not(footer *) { font-size: 18px !important; line-height: 1.35 !important; font-weight: 600 !important; }
body p:not(.header_area *):not(footer *), body li:not(.header_area *):not(footer *) { font-size: 16px !important; line-height: 1.65 !important; }
body small, body .small { font-size: 14px; }

/* Privacy policy template: same scale */
.legal-doc [data-custom-class="title"], .legal-doc [data-custom-class="title"] * { font-size: clamp(30px, 4vw, 40px) !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--wind-ink) !important; }
.legal-doc [data-custom-class="heading_1"], .legal-doc [data-custom-class="heading_1"] * { font-size: clamp(26px, 3vw, 34px) !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--wind-ink) !important; }
.legal-doc [data-custom-class="heading_2"], .legal-doc [data-custom-class="heading_2"] * { font-size: 22px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--wind-ink) !important; }
.legal-doc [data-custom-class="subtitle"], .legal-doc [data-custom-class="subtitle"] * { font-size: 14px !important; }
.legal-doc [data-custom-class="body"], .legal-doc [data-custom-class="body"] *, .legal-doc [data-custom-class="body_text"], .legal-doc [data-custom-class="body_text"] *, .legal-doc [data-custom-class="link"], .legal-doc [data-custom-class="link"] * { font-size: 16px !important; line-height: 1.65 !important; }

/* ── The page's one h1 on pages whose hero heading was an h2 ── */
.wind-h1 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--wind-ink);
}

/* ── Social profiles are hidden until the Vidyalay accounts exist ── */
.f_social_icon,
.f_widget h3.f-title:has(+ .f_social_icon),
.f_widget .f-title:has(+ .f_social_icon) { display: none !important; }
.footer-social,
h4:has(+ .footer-social) { display: none !important; }

/* ── Readable text: no dark text on dark or violet backgrounds ── */
.header_area .navbar-nav .nav-item a.btn_get,
.header_area .navbar-nav .nav-item a.btn_get:hover,
.header_area .navbar-nav .nav-item a.btn_get:focus { color: #fff !important; }

.payment_footer_area .f_widget h3,
.payment_footer_area .f_widget .f-title,
.footer_top_six .f_widget h3.f-title { color: #f8fafc !important; }
.payment_footer_area .f_widget p,
.payment_footer_area .f_widget li,
.payment_footer_area .f_widget a,
.footer_top_six .f_widget p,
.footer_top_six .f_widget a { color: #cbd5e1 !important; }
.payment_footer_area .f_widget a:hover,
.footer_top_six .f_widget a:hover { color: #cdbbea !important; }

/* old orange accents fail contrast on white and clash with the violet look */
.apply-btn, .contact_form_submit {
  background: var(--wind-accent) !important;
  border: 1px solid var(--wind-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.job-title { color: var(--wind-ink) !important; }
.author-organization { color: #475569 !important; }
span.tag { background: var(--wind-accent) !important; color: #fff !important; }

/* ── Home hero: the live-demo button ── */
.hero-demo { display: flex; justify-content: center; margin: 8px 0 4px; }
.hero-demo-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  height: 54px;
  padding: 0 34px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: #fff !important;
}

/* ── Buttons, final word: one system on every page ──
   vidyalay-wind.css (home page only) styles the header Sign Up as a white 6px button with dark text; with the violet
   fill above that gave dark text on violet. These selectors outrank it. Sign In stays the quiet outlined pill. */
.header_area .navbar a.btn_get.btn_hover,
.header_area:not(.navbar_fixed) .navbar a.btn_get.btn_hover,
.header_area.navbar_fixed .navbar a.btn_get.btn_hover {
  background: var(--wind-accent) !important;
  border: 1px solid var(--wind-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.header_area .navbar a.btn_get.btn_hover:hover,
.header_area:not(.navbar_fixed) .navbar a.btn_get.btn_hover:hover,
.header_area.navbar_fixed .navbar a.btn_get.btn_hover:hover {
  background: #381272 !important;
  border-color: #381272 !important;
  color: #fff !important;
}
.header_area .navbar a.btn_signin { border-radius: 999px !important; }

/* secondary: outlined pill (Careers "View Details") */
.view-btn {
  border-radius: 999px !important;
  border: 1px solid var(--wind-line) !important;
  background: #fff !important;
  color: var(--wind-ink-2) !important;
}
.view-btn:hover { border-color: var(--wind-accent) !important; color: var(--wind-accent) !important; }

/* the black "Book a free demo" on Pricing joins the violet primary */
.cta-btn, .cta-btn.dark {
  background: var(--wind-accent) !important;
  border: 1px solid var(--wind-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.cta-btn:hover, .cta-btn.dark:hover { background: #381272 !important; border-color: #381272 !important; }

/* ── Legal documents (Privacy, Terms, Trust Vault): readable column between the shared menu and footer ── */
html:has(.legal-doc), html:has(.legal-doc) body { background: #fff !important; }
body .legal-doc.doc-content {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 150px 24px 72px !important;
  background: transparent !important;
}

/* ── Phone: never scroll sideways ── */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* Trust Vault: keep the hero clear of the fixed menu */
.hero:has(+ .glass-section) { padding-top: 150px !important; }

/* ── Minimum readable sizes: tab labels and descriptions were 12px/11px, plan feature notes 13px ── */
.tab-btn .title { font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; }
.tab-btn .desc { font-size: 14px !important; line-height: 1.55 !important; }
.feature-list li span { font-size: 14px !important; }

/* ── Contact page: form card + info card side by side, no old orange band ── */
.contact_us { margin-top: 0 !important; padding: 150px 0 40px !important; background: transparent !important; }
.contact_us .contact_inner {
  position: static !important; display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 28px; align-items: start; background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
}
.contact_us .contact_inner::before, .contact_us .contact_inner::after { display: none !important; content: none !important; }
.contact_us .contact_inner > .row { margin: 0 !important; display: block !important; }
.contact_us .contact_inner > .row > [class*="col-md-"] { max-width: 100% !important; flex: none !important; width: 100% !important; padding: 0 !important; }
.contact_us .contact_inner > .row > .col-md-2 { display: none !important; }
.contact_us .contact_form_inner, .contact_us .contact_field {
  background: #fff; border: 1px solid var(--wind-line); border-radius: 22px; box-shadow: var(--wind-shadow);
  padding: 36px !important; margin: 0 !important; height: auto !important; position: static !important;
}
.contact_us .contact_form_inner .contact_field { border: 0; box-shadow: none; padding: 0 !important; }
.contact_us .contact_field h1 { margin: 0 0 8px !important; }
.contact_us .contact_field > p { color: var(--wind-ink-2); margin: 0 0 24px !important; }
.contact_us .contact_field .form-control {
  display: block; width: 100%; height: 52px; padding: 0 16px !important; margin: 0 0 14px !important;
  border: 1px solid var(--wind-line) !important; border-radius: 14px !important; background: #fff !important;
  font-size: 15px !important; color: var(--wind-ink); box-shadow: none !important;
}
.contact_us .contact_field textarea.form-control { height: 150px; padding: 14px 16px !important; resize: vertical; }
.contact_us .contact_field .form-control::placeholder { color: var(--wind-ink-3); font-size: 15px; opacity: 1; }
.contact_us .contact_field .form-control:focus { border-color: var(--wind-accent) !important; box-shadow: 0 0 0 3px var(--wind-accent-soft) !important; outline: 0; }
.contact_us .contact_form_submit { width: 100%; height: 52px; margin-top: 6px; font-size: 16px; }
.contact_us .contact_info_sec {
  position: static !important; transform: none !important; width: auto !important; margin: 0 !important; height: auto !important;
  background: var(--wind-accent-soft) !important; border: 1px solid #dccdf0; border-radius: 22px !important; padding: 36px !important; box-shadow: none !important;
}
.contact_us .contact_info_sec h4 { margin: 0 0 22px !important; }
.contact_us .contact_info_sec .info_single { gap: 14px; margin: 0 0 20px !important; align-items: flex-start !important; }
.contact_us .contact_info_sec .info_single:last-child { margin-bottom: 0 !important; }
.contact_us .contact_info_sec .info_single i { color: var(--wind-accent) !important; font-size: 18px; width: 22px; text-align: center; margin: 3px 0 0 !important; flex: none; }
.contact_us .contact_info_sec .info_single span { font-size: 16px !important; line-height: 1.55; color: var(--wind-ink); }
.map_sec { padding: 8px 0 72px !important; background: transparent !important; }
.map_sec .map_inner h4 { margin: 0 0 18px !important; }
.map_sec .map_bind { border-radius: 22px; overflow: hidden; border: 1px solid var(--wind-line); box-shadow: var(--wind-shadow); }
.map_sec .map_bind iframe { display: block; height: 380px; }
@media (max-width: 860px) {
  .contact_us .contact_inner { grid-template-columns: minmax(0, 1fr); }
  .contact_us .contact_form_inner, .contact_us .contact_info_sec { padding: 24px !important; }
}

/* ── One container: header, content and footer share the same edges ── */
body .container, body .container-lg, body .container-xl, body .container-xxl {
  max-width: 1200px !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 575px) {
  body .container, body .container-lg, body .container-xl, body .container-xxl { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── Leftover orange and sharp corners, moved onto the Wind tokens ── */
.solution-icon-box { background: var(--wind-accent-soft) !important; color: var(--wind-accent) !important; border-radius: 14px !important; }
.solution-icon-box i, .solution-icon-box svg { color: var(--wind-accent) !important; fill: var(--wind-accent) !important; }
.payment_subscribe_info { background: linear-gradient(135deg, #46178F 0%, #2d0f5c 100%) !important; border-radius: 22px !important; }
.payment_subscribe_info, .payment_subscribe_info h1, .payment_subscribe_info h2, .payment_subscribe_info h3, .payment_subscribe_info h4, .payment_subscribe_info p { color: #fff !important; }
.affiliate-btn-box { background: var(--wind-accent) !important; border: 1px solid var(--wind-accent) !important; border-radius: 14px !important; }
.affiliate-btn-box:not(.active) { background: #6a3cb0 !important; }
.step-icon { background: var(--wind-accent) !important; color: #fff !important; }
.author-info { border-radius: 14px !important; }

/* ── Careers: Wind hero, aligned job list, clean cards and apply dialog ── */
.hero:has(+ .careers) {
  background: linear-gradient(135deg, #46178F 0%, #2d0f5c 100%) !important;
  margin: 0 !important; padding: 150px 24px 72px !important; text-align: center;
}
.hero:has(+ .careers) h1, .hero:has(+ .careers) p { color: #fff !important; margin: 0 auto 12px; max-width: 720px; }
.hero:has(+ .careers) p { font-size: 18px !important; opacity: 0.9; margin-bottom: 0; }
.careers { max-width: 960px !important; margin: 0 auto !important; padding: 56px 24px 88px !important; }
.careers > h3 { font-size: 26px !important; margin: 0 0 20px !important; color: var(--wind-ink) !important; }
.careers .search-filter { gap: 12px !important; margin-bottom: 28px !important; }
.careers .search-filter input, .careers .search-filter select {
  height: 50px; padding: 0 16px !important; border: 1px solid var(--wind-line) !important; border-radius: 14px !important;
  background: #fff; font-size: 15px; color: var(--wind-ink);
}
.careers .search-filter input:focus, .careers .search-filter select:focus { outline: 0; border-color: var(--wind-accent) !important; box-shadow: 0 0 0 3px var(--wind-accent-soft); }
.careers .job-card, .job-card {
  background: #fff; border: 1px solid var(--wind-line); border-radius: 22px !important; box-shadow: var(--wind-shadow);
  padding: 28px !important; margin: 0 0 18px !important;
}
.job-card .job-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.job-card .job-title { font-size: 20px !important; font-weight: 600; color: var(--wind-ink) !important; }
.job-card .job-meta { font-size: 14px !important; color: #475569; background: var(--wind-surface-2); border-radius: 999px; padding: 4px 12px; }
.job-card .job-desc { margin: 0 0 18px !important; color: var(--wind-ink-2); }
.job-card .job-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.job-card .details { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--wind-line); }
.job-card .details h5 { font-size: 16px !important; font-weight: 600; margin: 16px 0 8px; color: var(--wind-ink); }
.job-card .details ul { margin: 0 0 4px; padding-left: 20px; }
.job-card .details li { margin-bottom: 6px; }
.modal { background: rgba(15, 23, 42, 0.55) !important; backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 16px; }
.modal .modal-content {
  position: relative; width: min(520px, 100%) !important; margin: 0 !important; background: #fff; border-radius: 22px !important;
  padding: 36px !important; box-shadow: var(--wind-shadow-lift); border: 0 !important;
}
.modal .modal-content h4 { color: var(--wind-ink) !important; font-size: 24px !important; margin: 0 0 6px !important; }
.modal .modal-content .close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--wind-surface-2); color: var(--wind-ink-2); font-size: 22px; line-height: 1; cursor: pointer; }
.modal .modal-content .close:hover { background: var(--wind-accent-soft); color: var(--wind-accent); }
.modal .apply-role { font-weight: 600; color: var(--wind-accent) !important; margin: 0 0 14px !important; }
.modal .apply-help { color: var(--wind-ink-2); margin: 0 0 24px !important; font-size: 15px !important; }
.modal .apply-mail-btn {
  display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: var(--wind-accent);
  color: #fff !important; font-weight: 600; text-decoration: none !important;
}
.modal .apply-mail-btn:hover { background: #381272; }

/* ── Home hero: the shield flows under the headline instead of sitting at a fixed offset on top of it ── */
.payment_content_two .symbols-pulse {
  position: relative !important; top: auto !important; left: auto !important; transform: none !important;
  margin: 36px auto 12px !important; display: flex; align-items: center; justify-content: center;
}
.payment_content_two .heading-section { margin-bottom: 0 !important; }

/* Home hero: the empty spacer that made room for the old fixed-position shield now only adds a gap */
.payment_content_two .logodivider { display: none !important; }

/* Product screenshots used on the solution pages sit in a soft frame */
.solution-feature-content img[src*="img/products/"], img[src*="img/products/"].solution-img,
section img[src*="img/products/"]:not(.tab-img) { border: 1px solid var(--wind-line); border-radius: 14px; box-shadow: var(--wind-shadow); background: #fff; }
/* the four logo colours as quiet accents on solution cards */
.solution-card:nth-child(4n+1) .solution-icon-box, .feature-card:nth-child(4n+1) .icon { background: color-mix(in srgb, var(--logo-blue) 14%, #fff) !important; }
.solution-card:nth-child(4n+2) .solution-icon-box, .feature-card:nth-child(4n+2) .icon { background: color-mix(in srgb, var(--logo-green) 14%, #fff) !important; }
.solution-card:nth-child(4n+3) .solution-icon-box, .feature-card:nth-child(4n+3) .icon { background: color-mix(in srgb, var(--logo-orange) 16%, #fff) !important; }
.solution-card:nth-child(4n+4) .solution-icon-box, .feature-card:nth-child(4n+4) .icon { background: color-mix(in srgb, var(--logo-magenta) 12%, #fff) !important; }

/* Legal pages carry their own "transparent background" rule that stripped the footer */
body footer.payment_footer_area { background: #0f172a !important; }
body footer.payment_footer_area .footer_bottom { background: #0b1120 !important; }

.au-hero p, .section-header p, .au-vm p { color: var(--wind-ink-2) !important; }

/* Why Vidyalay: how learning impact is measured */
.impact-section { padding: 72px 0; background: var(--wind-page); }
.impact-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.impact-head p, .impact-lead { color: var(--wind-ink-2); }
.impact-dims { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.impact-dim { background: #fff; border: 1px solid var(--wind-line); border-top: 4px solid var(--logo-blue); border-radius: 22px; padding: 22px; box-shadow: var(--wind-shadow); }
.impact-dim:nth-child(2) { border-top-color: var(--logo-green); } .impact-dim:nth-child(3) { border-top-color: var(--logo-orange); }
.impact-dim:nth-child(4) { border-top-color: var(--logo-magenta); } .impact-dim:nth-child(5) { border-top-color: var(--wind-accent); }
.impact-dim h3 { font-size: 18px !important; margin: 0 0 8px; } .impact-dim p { font-size: 14px !important; margin: 0; color: var(--wind-ink-2); }
.impact-sub { text-align: center; margin: 48px 0 12px; } .impact-lead { max-width: 820px; margin: 0 auto 24px; text-align: center; }
.impact-stages { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.impact-stages li { background: var(--wind-accent); color: #fff !important; border-radius: 14px; padding: 16px 12px; text-align: center; font-weight: 600; }
.impact-stages li span { display: block; font-size: 13px; opacity: .8; font-weight: 500; margin-bottom: 4px; color: #fff !important; }
.impact-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.impact-cols > div { background: #fff; border: 1px solid var(--wind-line); border-radius: 22px; padding: 28px; }
.impact-cols h3 { margin: 0 0 8px; } .impact-cols p { margin: 0; color: var(--wind-ink-2); }
.impact-note { margin: 28px auto 0; max-width: 820px; text-align: center; font-size: 14px !important; color: var(--wind-ink-3); }
@media (max-width: 991px) { .impact-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } .impact-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } .impact-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .impact-dims { grid-template-columns: minmax(0, 1fr); } }

/* five pillars on Why Vidyalay */
.ai-features { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }

/* Affiliate: stack the tabs above the text on phones so nothing is clipped */
@media (max-width: 767px) {
  .affiliate-layout { flex-direction: column; gap: 24px; }
  .affiliate-left { width: 100%; }
  .affiliate-content { width: 100%; min-width: 0; }
  .affiliate-content h2, .affiliate-content h3 { font-size: 24px; overflow-wrap: anywhere; }
  .affiliate-points { padding-left: 20px; }
}