/* Shared inner-page components. The landing page remains the visual reference. */
body.cp-page:not(.cp-home) {
  --cp-surface: #fff;
  --cp-surface-soft: #f5f8fc;
  --cp-card-radius: 16px;
  --cp-control-radius: 8px;
  --cp-card-shadow: 0 4px 20px #0a162808;
  --cp-action: linear-gradient(100deg, #2563eb, #0e7490);
  --cp-action-hover: linear-gradient(100deg, #1d4ed8, #155e75);
}
/* One calm, branded treatment for the retained training and registration heroes. */
body.cp-page:not(.cp-home) #cp-content .hero {
  background: radial-gradient(ellipse at 85% 15%, #06b6d41a, transparent 55%), linear-gradient(120deg, var(--cp-navy), var(--cp-text));
  color: #fff;
  border-bottom: 1px solid #3b82f626;
}
body.cp-page:not(.cp-home) #cp-content .hero::before { opacity: .12; pointer-events: none; }
body.cp-page:not(.cp-home) #cp-content .hero .hero-bg { opacity: .12; }
body.cp-page:not(.cp-home) #cp-content .hero .hero-overlay { background: linear-gradient(120deg, #0a1628ed, #0f2d5ced); }
body.cp-page:not(.cp-home) #cp-content .hero :is(h1,p) { text-shadow: none; }
body.cp-page:not(.cp-home) #cp-content :is(.animate,.fade-in,.form-card) { animation: none; opacity: 1; }
body.cp-page:not(.cp-home) #cp-content .hero :is(.hero-tag,.hero-badge,.badge) {
  display: inline-flex; align-items: center; margin-bottom: 20px;
  border: 1px solid #93c5fd40;
  background: #3b82f61a;
  color: #bfdbfe;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .035em;
}
body.cp-page:not(.cp-home) #cp-content .hero .stat-card {
  background: #ffffff08;
  border: 1px solid #ffffff1f;
  border-radius: 12px;
  box-shadow: none;
}
/* Light cards share an edge, radius, and subtle elevation instead of heavy shadows. */
body.cp-page:not(.cp-home) #cp-content :is(.card,.course-card,.feature-card,.program-card,.service-card,.benefit-card,.cert-card,.our-categories,.advantage-box):not(.featured):not(.popular):not(.recommended),
body.cp-page:not(.cp-home) #cp-content #root :is(.bg-white,.bg-gray-50).rounded-2xl {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-card-radius);
  box-shadow: var(--cp-card-shadow);
  color: var(--cp-text);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.cp-page:not(.cp-home) #cp-content :is(.card,.course-card,.feature-card,.program-card,.service-card,.benefit-card,.cert-card,.our-categories,.advantage-box):hover {
  border-color: #93c5fd;
  box-shadow: 0 12px 28px #0a162810;
  transform: translateY(-3px);
}
body.cp-page:not(.cp-home) #cp-content :is(.card,.course-card,.feature-card,.program-card,.service-card,.benefit-card,.cert-card,.our-categories,.advantage-box):not(.featured):not(.popular):not(.recommended) :is(h2,h3,h4) { color: var(--cp-text); }
body.cp-page:not(.cp-home) #cp-content :is(.card,.course-card,.feature-card,.program-card,.service-card,.benefit-card,.cert-card,.our-categories,.advantage-box):not(.featured):not(.popular):not(.recommended) p:not([role="alert"]):not(.error):not(.success):not([class*="text-red"]):not([class*="text-green"]) { color: var(--cp-muted); }
body.cp-page:not(.cp-home) #cp-content :is(.card,.feature-card,.service-card,.benefit-card) > i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 20px;
  border-radius: 12px; background: #eff6ff; color: var(--cp-blue-hover); font-size: 22px;
}
body.cp-page:not(.cp-home) #cp-content :is(.section-title,.section-heading) { color: var(--cp-text); }
body.cp-page:not(.cp-home) #cp-content :is(.section-subtitle,.section-description) { color: var(--cp-muted); max-width: 48rem; margin-inline: auto; }
/* Primary actions use darker brand shades to keep white button labels readable. */
body.cp-page:not(.cp-home) #cp-content :is(.btn-primary,.btn-main,.cta-button,.btn-register,.professional-btn-primary),
body.cp-page:not(.cp-home) #cp-content #root :is(a,button,a > span):is([class~="bg-[#00d9ff]"],[class~="bg-[#00b4d8]"],[class~="bg-[#0a2463]"],[class~="from-[#06d6a0]"]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--cp-control-radius);
  background: var(--cp-action) !important; color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.5; text-align: center;
  text-decoration: none; box-shadow: 0 3px 10px #2563eb14;
  transition: background .2s ease, box-shadow .2s ease;
}
body.cp-page:not(.cp-home) #cp-content :is(.btn-primary,.btn-main,.cta-button,.btn-register,.professional-btn-primary):hover,
body.cp-page:not(.cp-home) #cp-content #root :is(a,button,a > span):is([class~="bg-[#00d9ff]"],[class~="bg-[#00b4d8]"],[class~="bg-[#0a2463]"],[class~="from-[#06d6a0]"]):hover {
  background: var(--cp-action-hover) !important; box-shadow: 0 5px 16px #2563eb26; transform: none;
}
body.cp-page:not(.cp-home) #cp-content :is(.btn-outline,.professional-btn-secondary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--cp-control-radius);
  font-size: 16px; font-weight: 600; line-height: 1.5;
}
/* Native form fields retain their labels, validation, and submission behavior. */
body.cp-page:not(.cp-home) #cp-content :is(.form-card,.registration-form,.contact-form) {
  border-radius: var(--cp-card-radius); border: 1px solid var(--cp-border);
  box-shadow: var(--cp-card-shadow);
}
body.cp-page:not(.cp-home) #cp-content :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="date"],select,textarea) {
  min-height: 48px; max-width: 100%; padding: 12px 14px;
  border: 1px solid #cbd5e1; border-radius: var(--cp-control-radius);
  background: #fff; color: var(--cp-text); font-size: 16px; line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.cp-page:not(.cp-home) #cp-content :is(input,textarea)::placeholder { color: var(--cp-muted); opacity: 1; }
body.cp-page:not(.cp-home) #cp-content select option { background: #fff; color: var(--cp-text); }
body.cp-page:not(.cp-home) #cp-content :is(input,select,textarea):is([aria-invalid="true"],.is-invalid) { border-color: #dc2626; }
body.cp-page:not(.cp-home) #cp-content button:disabled { opacity: .6; cursor: not-allowed; }
body.cp-page:not(.cp-home) #cp-content :is(input,select,textarea):focus-visible { outline: 2px solid var(--cp-blue); outline-offset: 2px; border-color: var(--cp-blue); }
body.cp-page:not(.cp-home) #cp-content :is(a,button,summary):focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 4px; }
body.cp-page:not(.cp-home) #cp-content :is(.faq-item,.accordion-item) { border: 1px solid var(--cp-border); border-radius: 12px; box-shadow: none; }
/* The catalog uses the same quiet cards as the rest of the site, with blue icon tiles. */
body.cp-programs #cp-content #programs .grid > div {
  border: 1px solid var(--cp-border); border-radius: var(--cp-card-radius);
  background: #fff; box-shadow: var(--cp-card-shadow);
}
body.cp-programs #cp-content #programs .grid > div:first-child { border-color: #93c5fd; }
body.cp-programs #cp-content #programs .grid > div > div:first-child {
  background: var(--cp-surface-soft); color: var(--cp-text); border-bottom: 1px solid var(--cp-border);
}
body.cp-programs #cp-content #programs .grid > div > div:first-child > .absolute { display: none; }
body.cp-programs #cp-content #programs .grid > div > div:first-child h3 { color: var(--cp-text); }
body.cp-programs #cp-content #programs .grid > div > div:first-child > svg {
  box-sizing: border-box; width: 44px; height: 44px; padding: 10px;
  background: #e8f0ff; color: var(--cp-blue-hover); border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  body.cp-page:not(.cp-home) #cp-content :is(.card,.course-card,.feature-card,.program-card,.service-card,.benefit-card,.cert-card,.our-categories,.advantage-box):hover { transform: none; }
}

/* Inner pages introduce an offering; only the homepage gets a full-screen hero. */
body.cp-page.cp-intro-compact { --cp-heading-1: clamp(2rem, 4vw, 3rem); }
body.cp-page.cp-intro-compact:is(.cp-programs,.cp-career-acceleration-partnership,.cp-managed-services,.cp-software-development,.cp-job-application-concierge) { --cp-heading-1: clamp(1.75rem, 3.2vw, 2.5rem); }
body.cp-intro-compact #cp-content > section:first-of-type,
body.cp-intro-compact #cp-content > .wapper > section:first-of-type,
body.cp-intro-compact #cp-content #root > div > section:first-of-type {
  min-height: 0 !important; height: auto; padding-block: 56px !important;
}
body.cp-intro-compact #cp-content > section:first-of-type > :is(.container,.hero-grid,.hero-content,.max-w-7xl),
body.cp-intro-compact #cp-content #root > div > section:first-of-type > .container { padding-block: 0; }
body.cp-intro-compact #cp-content .hero :is(.hero-stats,.stats-grid) { margin-top: 28px; gap: 16px; }
body.cp-intro-compact #cp-content .hero .stat-card { padding: 16px; }
body.cp-intro-compact #cp-content .hero .stat-card h3 { font-size: 16px; margin-bottom: 4px; }
body.cp-intro-compact #cp-content .hero .stat-card p { font-size: 14px; margin: 0; }
body.cp-intro-compact #cp-content .hero .stat-card i { font-size: 20px; margin-bottom: 8px; }
body.cp-intro-compact #cp-content > section:first-of-type .mb-16 { margin-bottom: 24px; }
body.cp-intro-compact #cp-content .cp-intro-facts { gap: 16px; padding-top: 16px; }
body.cp-intro-compact #cp-content .cp-intro-facts > div { padding: 16px; }
body.cp-intro-compact #cp-content .cp-intro-facts h3 { font-size: 16px; }
body.cp-intro-compact #cp-content .cp-intro-facts p { font-size: 14px; }
body.cp-intro-compact #cp-content #root > div > section:first-of-type img { width: 100%; height: 300px; object-fit: cover; }
body.cp-programs.cp-intro-compact #cp-content #root > div > section:first-of-type :is(.space-y-8,.space-y-4) > * { margin-block: 0; }
body.cp-programs.cp-intro-compact #cp-content #root > div > section:first-of-type .space-y-8 > * + * { margin-top: 20px; }
body.cp-programs.cp-intro-compact #cp-content #root > div > section:first-of-type .space-y-4 > * + * { margin-top: 8px; }
body.cp-managed-services.cp-intro-compact #cp-content #image-container { height: 300px; aspect-ratio: auto; }
body.cp-software-development.cp-intro-compact #cp-content .cp-hero-media img { max-height: 300px; }

/* Task pages start with a plain heading so the form is easy to reach. */
body.cp-page.cp-intro-form { --cp-heading-1: clamp(1.75rem, 3vw, 2rem); }
body.cp-intro-form #cp-content .cp-page-intro {
  padding-block: 36px 24px; margin: 0; background: #fff;
  border-bottom: 1px solid var(--cp-border); color: var(--cp-text); text-align: left;
}
body.cp-intro-form #cp-content .cp-page-intro h1 { margin: 0 0 10px; }
body.cp-intro-form #cp-content .cp-page-intro p { max-width: 48rem; margin: 0; color: var(--cp-muted); font-size: 16px; }
body.cp-intro-form #cp-content .cp-page-intro .cp-intro-label { color: var(--cp-blue-hover); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
body.cp-intro-form #cp-content #register-form { padding-top: 32px; }
body.cp-intro-form #cp-content .register-grid { margin-block: 0; }
body.cp-intro-form #cp-content .form-card { animation: none !important; opacity: 1 !important; transform: none !important; }
body.cp-intro-form #cp-content .cp-workflow-heading { text-align: left; }
body.cp-intro-form #cp-content .cp-workflow-heading p { margin-inline: 0; }
@media (max-width: 767px) {
  body.cp-intro-compact #cp-content > section:first-of-type,
  body.cp-intro-compact #cp-content > .wapper > section:first-of-type,
  body.cp-intro-compact #cp-content #root > div > section:first-of-type { padding-block: 36px !important; }
  body.cp-intro-compact #cp-content :is(.hero-stats,.cp-intro-facts) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  body.cp-intro-compact #cp-content :is(.hero-stats,.cp-intro-facts) > div { padding: 12px 8px; }
  body.cp-intro-compact #cp-content :is(.hero-stats,.cp-intro-facts) h3 { font-size: 13px; }
  body.cp-intro-compact #cp-content :is(.hero-stats,.cp-intro-facts) p { font-size: 12px; }
  body.cp-intro-form #cp-content .cp-page-intro { padding-block: 28px 20px; }
  body.cp-intro-form #cp-content .register-grid > .form-card { order: -1; }
}
@media (max-width: 1023px) {
  body.cp-intro-compact #cp-content .cp-hero-media { display: none; }
  body.cp-job-application-concierge.cp-intro-compact #cp-content > section:first-of-type .grid[class~="lg:grid-cols-2"] > div:nth-child(2) { display: none; }
}