/* ===== Homepage "The Complete Journey" section - scoped under .ombcj =====
   This lives inside the real <section class="section_offer">, which already
   supplies the dark background + Section-3.webp texture and the 128/80/60px
   responsive top/bottom padding from the site's global CSS - do NOT redeclare
   background or padding here, it double-stacks with that. The container width
   also comes from the real .container.w-container wrapper, not a custom one. */
.ombcj{
  --blue:#1B1FA1; --ice:#E8EAF6; --white:#fff;
  color:#fff;
  font-family:'PP Neue Montreal','Inter','Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}
/* :where(:not(.container)) - the :where() wrapper keeps this selector's
   specificity at plain ".ombcj *" (so later, more specific .ombcj-* component
   rules still win as normal) while still fully excluding the real site
   container from the reset, so its own 15px left/right padding survives */
.ombcj *:where(:not(.container)){box-sizing:border-box; margin:0; padding:0}
.ombcj-kicker{display:inline-block; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#c9cbff; margin-bottom:16px}
/* the site has a global h2{text-align:center} rule at <=479px (for its other,
   centered headings) - override it here so this one stays left-aligned */
.ombcj-h{font-family:'TT Commons Pro','Archivo Black','Arial Black',sans-serif; font-size:clamp(30px,4.4vw,50px); line-height:1.05; letter-spacing:-.01em; color:#fff; text-align:left}
.ombcj-sub{font-size:clamp(17px,2vw,21px); color:#dfe0ff; margin-top:14px}
/* card framing matches the original .offer-wrapper treatment (background,
   border, and generous 56px padding) so the content isn't sitting bare
   against the section's own edge padding */
.ombcj-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; margin-top:40px;
  background-color:#ffffff12; border:1px solid #ffffff1a; border-radius:16px; padding:56px}
.ombcj-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:12px}
.ombcj-amt{font-family:'TT Commons Pro','Archivo Black','Arial Black',sans-serif; font-size:clamp(48px,8vw,76px); line-height:1; color:#fff}
.ombcj-unit{font-size:19px; font-weight:600; color:#c9cbff}
.ombcj-was{font-size:16px; color:#9a9cf0; text-decoration:line-through}
.ombcj-pitch{font-size:17px; line-height:1.6; color:#ececff; margin-top:20px; max-width:52ch}
.ombcj-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.ombcj-btn{display:inline-block; font-weight:600; font-size:16px; padding:15px 28px; border-radius:9px; text-decoration:none; transition:transform .15s ease}
.ombcj-btn:hover{transform:translateY(-2px)}
.ombcj-btn-white{background:#fff; color:var(--blue)}
.ombcj-btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45)}
.ombcj-note{margin-top:18px; font-size:14px; color:#b9baf5}
.ombcj-incl{list-style:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:10px 26px}
.ombcj-incl li{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.ombcj-incl li:last-child{border-bottom:none}
.ombcj-n{flex:none; width:30px; height:30px; border-radius:8px; background:#fff; color:var(--blue); font-family:'TT Commons Pro','Archivo Black',sans-serif; font-size:15px; display:flex; align-items:center; justify-content:center}
.ombcj-incl li > span:last-child{display:flex; flex-direction:column; gap:3px}
.ombcj-incl b{font-size:17px; color:#fff; font-weight:600}
.ombcj-incl li span span{font-size:14.5px; color:#c9cbff; line-height:1.5}
@media(max-width:991px){
  .ombcj-grid{gap:20px; padding:30px}
}
@media(max-width:820px){
  .ombcj-grid{grid-template-columns:1fr; gap:32px}
}
@media(max-width:479px){
  .ombcj-grid{padding-left:20px; padding-right:20px}
}