/* Sales page for the DevOps training. The values below mirror the previous
   platform's theme: Poppins 700 headings, Rubik 300 body at 18px, red accent,
   white cards on a near-black background, section backgrounds as grayscale
   images at low opacity. */
:root {
  --sp-bg: #050806;
  --sp-border: #FFFFFF1A;
  --sp-text: #ffffff;
  --sp-accent: #e30000;
  --sp-card-bg: #ffffff;
  --sp-card-text: #0d161b;
  --sp-heading: "Poppins", system-ui, sans-serif;
  --sp-body: "Rubik", system-ui, sans-serif;
  --sp-gap: 1rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }
body.sp { margin: 0; color: var(--sp-text); background: var(--sp-bg); font-family: var(--sp-body); font-weight: 300; line-height: 1.75; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: underline; transition: color .15s, opacity .15s; }
a:hover { color: var(--sp-accent); }

/* Type */
.sp-h2, .sp-h3 { margin: 0; font-family: var(--sp-heading); font-weight: 700; line-height: 1.3; letter-spacing: 0; text-wrap: pretty; }
.sp-h2 { font-size: 1.75rem; }
.sp-h3 { font-size: 1.35rem; }
.sp-pretitle { margin: 0 0 .5rem; font-family: var(--sp-heading); font-weight: 600; font-size: .85rem; line-height: 1.45; }
.sp-pretitle::before { content: ""; display: inline-block; width: 1.5rem; height: 3px; margin-right: .6rem; vertical-align: middle; background: var(--sp-accent); }
.sp-subtitle { margin: .5rem 0 0; font-weight: 400; font-size: 1.125rem; line-height: 1.8; }
header > .sp-h2 + .sp-subtitle { margin-top: .5rem; }
.sp-start-date { margin: .25rem 0 0; font-size: 1.125rem; font-weight: 400; }
.sp-text { margin-top: var(--sp-gap); }
.sp-text p { margin: 0 0 .75em; text-wrap: pretty; }
.sp-text p:last-child { margin-bottom: 0; }
.sp-text ul { margin: 0 0 .75em; padding-left: 1.4em; }
.sp-text li { margin: 0; }
.sp-text li > p { margin-bottom: .25em; }
.sp-text ul + p { margin-top: .75em; }
.sp-text strong { font-weight: 500; }
.sp-center { text-align: center; }
.sp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sections */
.sp-section { position: relative; padding: 2.25rem 1.25rem; overflow: hidden; }
.sp-bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
.sp-container { position: relative; width: 100%; margin-inline: auto; }
.sp-w970 { max-width: 970px; }
.sp-w1152 { max-width: 1152px; }
.sp-w1200 { max-width: 1200px; }
.sp-bordered { border-top: 1px solid var(--sp-border); }
.sp-pad-3 { padding-top: 3rem; padding-bottom: 3rem; }
.sp-pad-bottom-0 { padding-bottom: 0; }
.sp-pad-bottom-125 { padding-bottom: 1.25rem; }
.sp-video-full { padding-bottom: 0; }
.sp-page-header { margin-bottom: 1.5rem; }

/* Media + copy layouts */
.sp-media-right, .sp-media-left { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2.5rem; align-items: center; }
.sp-media-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.sp-media-right > .sp-media { order: 2; }
.sp-media-left > .sp-media { order: 1; }
.sp-media-left > .sp-copy { order: 2; }
.sp-media-top { align-items: start; }
.sp-media img { width: 100%; border-radius: 4px; }
/* Hero photo takes the height of the text next to it instead of setting it. */
.sp-hero .sp-media-right { align-items: stretch; }
.sp-hero .sp-media { position: relative; min-height: 18rem; }
.sp-hero .sp-media img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.sp-bio .sp-media-left, .sp-bio .sp-media-right { grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); }
.sp-bio .sp-media-right { grid-template-columns: minmax(0, .7fr) minmax(0, .3fr); }
.sp-bio .sp-media-right > .sp-copy { order: 1; }
.sp-avatar img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; }
.sp-lab .sp-media-wide { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); }
.sp-lab .sp-media-wide > .sp-copy { order: 1; }
.sp-lab .sp-media-wide > .sp-media { order: 2; }

/* Video */
.sp-video { position: relative; padding-top: 56.25%; border-radius: 4px; overflow: hidden; background: #000; }
.sp-video video, .sp-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: cover; }

/* Waitlist form */
.sp-spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.sp-email-form { flex: 1 1 380px; max-width: 560px; }
.sp-email-row { display: flex; gap: .5rem; }
.sp-email-row input { flex: 1; min-width: 0; padding: .75rem 1rem; border: 1px solid var(--sp-card-text); border-radius: 4px; color: var(--sp-card-text); background: #fff; font: inherit; font-weight: 400; }
.sp-email-row input:focus { outline: 2px solid var(--sp-accent); outline-offset: 1px; }
.sp-button { padding: .75rem 1.5rem; border: 0; border-radius: 4px; color: #fff; background: var(--sp-accent); font-family: var(--sp-heading); font-weight: 600; font-size: 1rem; line-height: 1.45; letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.sp-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(227, 0, 0, .3); }
.sp-form-result:empty { display: none; }
.sp-form-result > div { margin-top: .75rem; padding: .6rem .9rem; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; background: rgba(255,255,255,.08); font-size: .9rem; }
.sp-form-result > div[class*="red"] { border-color: var(--sp-accent); background: rgba(227,0,0,.15); }
.sp-email-form.htmx-request .sp-button { opacity: .7; }
.sp-join-button { padding: 1rem 2.5rem; font-size: 1.1rem; }
.sp-cta { margin: 1.75rem 0 0; }
.sp-cta .sp-button { display: inline-block; text-decoration: none; }

/* Social links */
.sp-socials { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--sp-gap); }
.sp-social-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; transition: transform .15s, color .15s; }
.sp-social-link:hover { transform: translateY(-2px); color: var(--sp-accent); }
.sp-social-link svg { fill: currentColor; }
.sp-social-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Grids and cards */
.sp-grid-header { margin-bottom: 1.5rem; }
.sp-grid-header.sp-center { max-width: 900px; margin-inline: auto; }
.sp-grid { display: grid; gap: var(--sp-gap); }
.sp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-grid-item header { margin-bottom: 0; }
.sp-card { padding: 1.5rem; border-radius: .5rem; color: var(--sp-card-text); background: var(--sp-card-bg); box-shadow: 0 4px 12px rgba(0, 0, 0, .04); }
.sp-card a { color: var(--sp-accent); }
.sp-card .sp-text { margin-top: .75rem; }
.sp-programme { max-width: 1000px; }
.sp-testimonials { margin-top: var(--sp-gap); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
/* The Senja widgets size themselves to their content unless the box is capped. */
.senja-embed { display: block; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }

/* FAQ */
.sp-faq { display: grid; gap: .5rem; }
.sp-faq-item { padding: 0; }
.sp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; list-style: none; cursor: pointer; }
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary svg { flex: none; fill: currentColor; }
.sp-faq-item .sp-faq-minus, .sp-faq-item[open] .sp-faq-plus { display: none; }
.sp-faq-item[open] .sp-faq-minus { display: block; }
.sp-faq-item > .sp-text { margin: 0; padding: 0 1.5rem 1.25rem; }

/* Footer */
.sp-footer { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.sp-footer .sp-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.sp-footer .sp-socials { margin: 0; }
.sp-footer nav ul { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.sp-footer nav a { font-family: var(--sp-heading); font-weight: 500; font-size: .8rem; text-decoration: none; }
.sp-footer nav a:hover { text-decoration: underline; }
.sp-footer .footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.sp-step-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Checkout page (formation_devops_checkout.html) */
.sp-w900 { max-width: 900px; }
.sp-checkout { min-height: 100vh; padding-top: 3rem; padding-bottom: 4rem; }
.sp-back { display: inline-block; margin-bottom: 2rem; font-size: .9rem; text-decoration: none; opacity: .8; }
.sp-checkout header { margin-bottom: 2rem; }
.sp-checkout .sp-form-result { margin-bottom: 1.5rem; }
.sp-step { margin-top: 1rem; padding: 1.5rem; border: 1px solid var(--sp-border); border-radius: .5rem; background: rgba(255, 255, 255, .03); }
.sp-step p { margin: .5rem 0 0; }
.sp-step-title { display: flex; align-items: center; gap: .75rem; margin: 0; font-family: var(--sp-heading); font-weight: 600; font-size: 1.1rem; }
.sp-step-number { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sp-accent); font-size: .9rem; }
.sp-step-done .sp-step-number { background: #1f9d55; }
.sp-step-locked { opacity: .5; }
.sp-step-link { display: inline-block; margin-top: .5rem; font-size: .9rem; opacity: .8; }
.sp-step-button { display: inline-block; margin-top: 1rem; text-decoration: none; }
.sp-step-button:hover { color: #fff; }
.sp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.sp-plan { display: flex; flex-direction: column; }
.sp-plan-price { flex: 1; margin: .5rem 0 1rem !important; font-weight: 400; }
.sp-plan .sp-button:disabled { cursor: not-allowed; opacity: .6; transform: none; box-shadow: none; }
.sp-step-note { font-size: .85rem; opacity: .7; }
.sp-promo { margin-top: 1rem; }
.sp-promo-label { display: block; margin-bottom: .35rem; font-size: .85rem; opacity: .8; }
.sp-promo .sp-login-input { width: min(100%, 320px); text-transform: uppercase; }
.sp-w560 { max-width: 560px; }
/* Sign-in choice: two equal columns with an "ou" divider (_login_options.html). */
.sp-login-options { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.25rem; margin-top: 1rem; }
.sp-login-option { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; border: 1px solid var(--sp-border); border-radius: .5rem; background: rgba(255, 255, 255, .03); }
.sp-login-option p, .sp-login-option label { flex: 1; margin: 0; font-size: .95rem; opacity: .85; }
.sp-login-option-title { margin: 0; font-family: var(--sp-heading); font-weight: 600; font-size: 1rem; }
.sp-login-input { padding: .75rem 1rem; border: 1px solid var(--sp-card-text); border-radius: 4px; color: var(--sp-card-text); background: #fff; font: inherit; font-weight: 400; }
.sp-login-input:focus { outline: 2px solid var(--sp-accent); outline-offset: 1px; }
.sp-login-button { display: block; width: 100%; padding-inline: 1rem; text-align: center; text-decoration: none; white-space: normal; }
.sp-login-button:hover { color: #fff; }
.sp-login-link-button { padding: .25rem; border: 0; background: none; color: inherit; font: inherit; font-size: .9rem; text-decoration: underline; opacity: .85; cursor: pointer; }
.sp-login-link-button:hover { opacity: 1; }
.sp-login-divider { display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: .9rem; opacity: .7; }
.sp-login-divider::before, .sp-login-divider::after { content: ""; flex: 1; width: 1px; background: var(--sp-border); }
.sp-login-option .sp-form-result > div { margin-top: 0; }
.sp-login-sent p { margin: 0 0 .5rem; }

@media (max-width: 900px) {
  .sp-cols-3, .sp-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-lab .sp-media-wide { grid-template-columns: 1fr; }
  .sp-lab .sp-media-wide > .sp-media { order: 1; }
  .sp-lab .sp-media-wide > .sp-copy { order: 2; }
}
@media (max-width: 720px) {
  html { font-size: 17px; }
  .sp-section { padding-left: 1rem; padding-right: 1rem; }
  .sp-media-right, .sp-media-left, .sp-bio .sp-media-left, .sp-bio .sp-media-right { grid-template-columns: 1fr; gap: 1.5rem; }
  .sp-media-right > .sp-media, .sp-media-left > .sp-media { order: 1; }
  .sp-media-right > .sp-copy, .sp-media-left > .sp-copy, .sp-bio .sp-media-right > .sp-copy { order: 2; }
  .sp-hero .sp-media { min-height: 0; }
  .sp-hero .sp-media img { position: static; height: auto; aspect-ratio: 16 / 9; }
  .sp-avatar { max-width: 220px; }
  .sp-cols-2, .sp-cols-3, .sp-cols-4 { grid-template-columns: 1fr; }
  .sp-email-row { flex-direction: column; }
  .sp-join-form { width: 100%; }
  .sp-plans { grid-template-columns: 1fr; }
  .sp-login-options { grid-template-columns: 1fr; gap: .75rem; }
  .sp-login-divider { flex-direction: row; }
  .sp-login-divider::before, .sp-login-divider::after { width: auto; height: 1px; }
  .sp-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sp-button, .sp-social-link { transition: none; } }