.elementor-43286 .elementor-element.elementor-element-c1a0737{position:relative;bottom:82px;}.elementor-43286 .elementor-element.elementor-element-aea3cfd{width:var( --container-widget-width, 101.523% );max-width:101.523%;--container-widget-width:101.523%;--container-widget-flex-grow:0;position:relative;top:5px;left:0px;}.elementor-43286 .elementor-element.elementor-element-a3ec8b3{--spacer-size:50px;}@media(max-width:767px){.elementor-43286 .elementor-element.elementor-element-aea3cfd{width:var( --container-widget-width, 295px );max-width:295px;--container-widget-width:295px;--container-widget-flex-grow:0;}}/* Start custom CSS for html, class: .elementor-element-aea3cfd *//* =====================================================================
   Cerebellum Ambassador page: mobile and tablet fixes
   Paste into ONE of these (not several):
   - Elementor Pro: Page Settings > Advanced > Custom CSS
   - Elementor Pro: Site Settings > Custom CSS
   - Any version: WP Admin > Appearance > Customize > Additional CSS
   Every rule starts with "body .cba" so it wins over the <style> block
   that sits inside the HTML widget (that block loads later in the page).
   ===================================================================== */

/* ---------- 0. All screen sizes: safety fixes ---------- */
body .cba{overflow-x:hidden;-webkit-text-size-adjust:100%}
body .cba *,body .cba *::before,body .cba *::after{box-sizing:border-box}
body .cba img{max-width:100%;height:auto}
body .cba h1,body .cba h2,body .cba h3{overflow-wrap:break-word}
body .cba a{word-break:break-word}

/* Remove the extra padding Elementor puts around an HTML widget */
.elementor-widget-html:has(.cba){width:100%}
.elementor-widget-html:has(.cba) > .elementor-widget-container{padding:0 !important;margin:0 !important}

/* ---------- 1. Tablet (up to 1024px) ---------- */
@media (max-width:1024px){
  body .cba .wrap{padding-left:24px;padding-right:24px}
  body .cba .hero .wrap{gap:32px}
  body .cba .calc .grid{gap:28px}
  body .cba .three{gap:18px}
  body .cba .steps{gap:14px}
}

/* ---------- 2. Mobile (up to 767px, Elementor's mobile breakpoint) ---------- */
@media (max-width:767px){

  /* Base type and spacing */
  body .cba{font-size:16px;line-height:1.55}
  body .cba section{padding:40px 0}
  body .cba .wrap{padding-left:18px;padding-right:18px}
  body .cba h1{font-size:2rem !important;line-height:1.15 !important}
  body .cba h2{font-size:1.6rem !important;line-height:1.2 !important}
  body .cba h3{font-size:1.1rem !important;line-height:1.25 !important}
  body .cba p{margin-bottom:.9em}
  body .cba .eyebrow{font-size:.72rem}

  /* Buttons: full width, easy to tap, stacked */
  body .cba .row{flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
  body .cba .row[style]{justify-content:flex-start !important}
  body .cba .btn{display:block;width:100%;text-align:center;padding:15px 20px;font-size:1rem}

  /* Hero */
  body .cba .hero{padding:40px 0 44px}
  body .cba .hero .wrap{grid-template-columns:1fr;gap:28px}
  body .cba .hero .lead{font-size:1.05rem}
  body .cba .tiles{gap:10px}
  body .cba .tile{padding:14px 16px;gap:14px}
  body .cba .tile b{font-size:1.5rem;min-width:72px}
  body .cba .tile span{font-size:.95rem;line-height:1.4}

  /* Do / Get panels */
  body .cba .two{grid-template-columns:1fr;gap:18px;margin-top:24px}
  body .cba .panel{padding:22px 20px;border-radius:14px}
  body .cba .item{padding:12px 0}
  body .cba .item span{font-size:.95rem}

  /* Four steps: compact rows with the number on the left */
  body .cba .steps{grid-template-columns:1fr;gap:12px;margin-top:24px}
  body .cba .step{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:16px;border-top:1px solid var(--line);border-left:4px solid var(--blue)}
  body .cba .step b{grid-row:1 / span 2;font-size:1.8rem;margin:0}
  body .cba .step h3{margin:0 0 4px !important}
  body .cba .step p{font-size:.95rem}

  /* "You'll receive" list */
  body .cba .receive{grid-template-columns:1fr;gap:0;margin-top:24px}

  /* Calculator */
  body .cba .calc .grid{grid-template-columns:1fr;gap:24px}
  body .cba .box{padding:20px;border-radius:14px}
  body .cba .box select{font-size:16px;padding:13px} /* 16px stops iOS zooming in */
  body .cba .box input[type=range]{margin-top:10px;height:28px}
  body .cba .cnt{margin-top:18px}
  body .cba .out{gap:10px;margin-top:18px;padding-top:18px}
  body .cba .out div{padding:14px 10px}
  body .cba .out b{font-size:1.4rem}

  /* Reward cards */
  body .cba .three{grid-template-columns:1fr;gap:16px;margin-top:24px}
  body .cba .reward{padding:22px}

  /* Programme rules */
  body .cba .rules{grid-template-columns:1fr;gap:0;margin-top:20px}
  body .cba .rule{padding:14px 0 14px 38px}
  body .cba .rule::before{top:14px}
  body .cba .rule span{overflow-wrap:anywhere}

  /* FAQ: comfortable tap targets */
  body .cba .faq{margin-top:20px}
  body .cba details{padding:6px 0}
  body .cba summary{min-height:48px;align-items:center;font-size:1rem}
  body .cba details p{font-size:.96rem}

  /* Closing section and small print */
  body .cba .cta p{font-size:1rem}
  body .cba .fine{font-size:.8rem}
}

/* ---------- 3. Small phones (up to 480px) ---------- */
@media (max-width:480px){
  body .cba .wrap{padding-left:16px;padding-right:16px}
  body .cba h1{font-size:1.8rem !important}
  body .cba h2{font-size:1.45rem !important}
  body .cba .tile{flex-direction:column;align-items:flex-start;gap:4px}
  body .cba .tile b{min-width:0}
  body .cba .out{grid-template-columns:1fr}
  body .cba .panel{padding:20px 16px}
}/* End custom CSS */