/* ==========================================================================
   My Goal — app-matched styling
   public/site/assets/css/my-goal.css

   Loaded ONLY on the My Goal page, and every rule below is scoped inside
   .mg-page, so nothing here can reach any other page on the site.

   Every blue is derived from the logo navy #2E3192.
   ========================================================================== */

.mg-page{
  --mg-navy:#2E3192;
  --mg-navy-dark:#1D1E5B;
  --mg-navy-45:#A1A2CE;   /* 45% navy on white */
  --mg-navy-30:#C0C1DE;   /* 30% */
  --mg-navy-18:#D9DAEB;   /* 18% */
  --mg-navy-12:#E6E6F2;   /* 12% */
  --mg-navy-10:#E9E9F3;   /* 10% */
  --mg-navy-06:#F1F1F9;   /*  6% */
  --mg-navy-04:#F5F5FC;   /*  4% */
  --mg-ink:#14141A;
  --mg-muted:#8A8A96;
  --mg-red:#ED1C24;
  --mg-carb:#7FA37F;
  --mg-fat:#A5D18C;
}

/* ---------- shell ---------------------------------------------------- */
.mg-page .pricing-section{
  background:linear-gradient(165deg,#F3F2F4 0%,#F3F2F4 45%,#F9EFEF 100%);
  padding:40px 0 70px;
}
.mg-page .step-box{max-width:560px;margin:0 auto}

/* one column, always — this page is a form, not a magazine layout.
   Overriding the grid here means the design does not depend on which
   Bootstrap breakpoint the visitor happens to be on. */
.mg-page .step-box .row{margin-left:0;margin-right:0}
.mg-page .step > .row > [class*="col-"],
.mg-page .step > div > .row > [class*="col-"],
.mg-page .form-wrap .row > [class*="col-"]{
  width:100%;max-width:100%;flex:0 0 100%;padding-left:0;padding-right:0;
}
/* …except the height step, where the scale and the figure sit side by side */
.mg-page .step > .row.mg-height > [class*="col-"]{width:auto;max-width:none;flex:none}

.mg-page .step-card{
  background:transparent;padding:0;border-radius:0;box-shadow:none;
}

/* ---------- top row: step counter + help ----------------------------- */
.mg-page .mg-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;min-height:30px;
}
.mg-page .mg-count{font-size:13px;font-weight:600;letter-spacing:.6px;color:var(--mg-muted);text-transform:uppercase}
.mg-page .mg-help{font-size:15px;font-weight:500;color:var(--mg-navy);text-decoration:none}
.mg-page .mg-help:hover{color:var(--mg-navy-dark);text-decoration:underline}

/* ---------- progress bar --------------------------------------------- */
.mg-page .progress-steps{display:flex;gap:8px;margin-bottom:28px}
.mg-page .step-line{flex:1;height:4px;border-radius:99px;background:var(--mg-navy-18);transition:.35s}
.mg-page .step-line.active{background:var(--mg-navy);box-shadow:none}

/* ---------- questions ------------------------------------------------- */
.mg-page .step h2.section-title,
.mg-page .step h3{
  font-size:21px;font-weight:600;color:var(--mg-ink);
  letter-spacing:-.3px;line-height:1.35;margin:0 0 16px;
}
.mg-page .step h3.mt-3,
.mg-page .step .col-md-6 + .col-md-6 h3{margin-top:32px}
.mg-page .step h2.section-title{margin-top:0}
.mg-page .step .col-lg-7 h2.section-title{margin-top:32px}

/* ---------- gender ---------------------------------------------------- */
.mg-page .gender-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mg-page .gender-card{
  width:auto;height:auto;min-height:0;
  padding:22px 12px 16px;border-radius:20px;background:#fff;
  border:1.5px solid transparent;box-shadow:0 2px 8px rgba(20,20,40,.05);
  display:block;text-align:center;transition:.18s ease;
}
.mg-page .gender-card:hover{border-color:var(--mg-navy-30)}
.mg-page .gender-card img{height:104px;width:auto;display:block;margin:0 auto 10px;object-fit:contain}
.mg-page .gender-card h4{margin:0;font-size:16px;font-weight:600;color:var(--mg-ink)}
.mg-page .gender-card.active{
  background:var(--mg-navy);border-color:var(--mg-navy);
  box-shadow:0 8px 20px rgba(46,49,146,.28);
}
.mg-page .gender-card.active h4{color:#fff}
.mg-page .gender-card.active img{filter:brightness(0) invert(1)}
.mg-page .gender-card .check{display:none !important}

/* ---------- birthday wheel ------------------------------------------- */
.mg-page .picker-card{
  background:transparent;border-radius:0;padding:0;box-shadow:none;
}
.mg-page .date-picker{
  display:flex;height:222px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
}
.mg-page .date-picker::after{
  top:50%;height:56px;border-radius:14px;
  background:rgba(46,49,146,.07);
}
.mg-page .date-picker .column{flex:1;position:relative;touch-action:none;cursor:ns-resize;-webkit-user-select:none;user-select:none}
.mg-page .date-picker .item{cursor:pointer}
.mg-page .item{
  height:62px;font-size:19px;font-weight:400;color:#B8B8C4;
  display:flex;justify-content:center;align-items:center;
}
.mg-page .item.active{color:var(--mg-ink);font-weight:600;font-size:22px}

/* ---------- noUiSlider: shared reset ---------------------------------- */
.mg-page .noUi-target{background:transparent;border:0;box-shadow:none;border-radius:0}
.mg-page .noUi-connects{background:transparent}
.mg-page .noUi-connect{background:transparent}
/* The handle itself is a transparent 44px circle - the size a finger needs.
   The red dot you see is drawn inside it with ::after.

   This matters on iPhones: `touch-action: none` is what stops iOS treating a
   drag as a page scroll, and it is NOT inherited by pseudo-elements. An
   earlier version put the grab area on ::after, which therefore had
   `touch-action: auto`, so iOS started scrolling the page instead of moving
   the slider. Keeping the grab area on the element itself avoids that. */
.mg-page .noUi-handle{
  width:44px;height:44px;border-radius:50%;
  background:transparent;border:0;box-shadow:none;cursor:grab;
  touch-action:none;-webkit-tap-highlight-color:transparent;
}
.mg-page .noUi-handle:active{cursor:grabbing}
.mg-page .noUi-handle:after{
  display:block;content:"";position:absolute;
  left:50%;top:50%;margin:-6px 0 0 -6px;width:12px;height:12px;
  background:var(--mg-red);border-radius:50%;border:0;
  touch-action:none;
}
.mg-page .noUi-target,
.mg-page .noUi-target *{touch-action:none}
.mg-page .noUi-tooltip{
  background:transparent;border:0;box-shadow:none;padding:0;
  font-size:23px;font-weight:600;color:var(--mg-ink);white-space:nowrap;
}
.mg-page .noUi-marker{background:#8D8D99;border-radius:2px}
.mg-page .noUi-value{font-size:13.5px;color:#96969F;font-family:inherit}
.mg-page .noUi-pips{color:#96969F;font-family:inherit}

/* ---------- height: vertical ruler ------------------------------------ */
.mg-page .mg-height{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.mg-page .step > .row.mg-height > .mg-h-scale{flex:0 0 202px;width:202px}
.mg-page .step > .row.mg-height > .col-md-5{flex:1 1 auto;width:auto;min-width:100px}
.mg-page .mg-height .iamge{text-align:center}
.mg-page .iamge img{height:250px;max-width:100%;object-fit:contain}

.mg-page #slider-height{
  /* 110px wide and transparent: a finger can grab anywhere across the
     ruler instead of having to land on a 2px line. For a vertical slider
     the value is read from the Y position only, so the extra width costs
     nothing. */
  width:110px;height:270px;margin:0 0 0 118px;background:transparent;
}
.mg-page #slider-height .noUi-handle{left:-22px;right:auto;top:-22px}
/* the red rule running left from the dot.
   left:auto matters - noUiSlider's own :before sets left:14px, and with
   both left and right set the browser keeps left and ignores right. */
.mg-page #slider-height .noUi-handle:before{
  display:block;content:"";position:absolute;
  left:auto;right:28px;top:21px;width:34px;height:2px;background:var(--mg-red);
}
.mg-page #slider-height .noUi-tooltip{
  right:auto;left:-16px;top:50%;bottom:auto;
  font-size:20px;transform:translate(-100%,-50%);
}
.mg-page .noUi-pips-vertical{padding:0;left:6px;top:0;height:100%}
.mg-page .noUi-marker-vertical.noUi-marker{width:20px;height:1.5px;opacity:.55}
.mg-page .noUi-marker-vertical.noUi-marker-large{width:36px;opacity:.9}
.mg-page .noUi-value-vertical{padding-left:44px;transform:translate(0,-50%)}

/* ---------- weight / target weight: tape measure ---------------------- */
.mg-page #slider-weight,
.mg-page #slider-target-weight{
  /* 60px tall and transparent, for the same reason as the height ruler */
  height:60px;margin:8px 10px 88px;background:transparent;
}
.mg-page #slider-weight .noUi-handle,
.mg-page #slider-target-weight .noUi-handle{top:38px;right:-22px;left:auto}
.mg-page #slider-weight .noUi-handle:before,
.mg-page #slider-target-weight .noUi-handle:before{
  display:block;content:"";position:absolute;
  left:21px;top:auto;bottom:22px;width:2px;height:64px;background:var(--mg-red);
}
.mg-page #slider-weight .noUi-tooltip,
.mg-page #slider-target-weight .noUi-tooltip{
  bottom:auto;top:46px;left:50%;transform:translateX(-50%);
}
.mg-page .noUi-pips-horizontal{padding:0;height:56px;top:0}
.mg-page .noUi-marker-horizontal.noUi-marker{width:1.5px;height:20px;opacity:.5}
.mg-page .noUi-marker-horizontal.noUi-marker-large{height:34px;opacity:.9}
.mg-page .noUi-value-horizontal{padding-top:40px;transform:translate(-50%,0)}
.mg-page .scsli{margin-bottom:0 !important}
.mg-page .mb-50{margin-bottom:0 !important}

/* ---------- goal cards ------------------------------------------------ */
.mg-page .home3-blog-area{display:flex;flex-direction:column;gap:14px}
.mg-page .home3-blog-area > [class*="col-"]{margin:0;padding:0}
.mg-page .blog-card-alfa{
  background:#fff;border:1.5px solid transparent;border-radius:18px;
  padding:20px;cursor:pointer;transition:.18s ease;
  box-shadow:0 2px 8px rgba(20,20,40,.05);
  display:flex;align-items:center;min-height:118px;
}
.mg-page .blog-card-alfa:hover{border-color:var(--mg-navy-30)}
.mg-page .blog-card-alfa{margin:0}
.mg-page .blog-card-alfa > .row{display:flex;flex-wrap:nowrap;align-items:center;width:100%;gap:10px;margin:0}
.mg-page .blog-card-alfa .blog-content{flex:1 1 auto;width:auto;max-width:none;min-width:0;padding:0}
.mg-page .blog-card-alfa .blog-img{flex:0 0 auto;width:auto;max-width:110px;padding:0;text-align:right}
.mg-page .blog-card-alfa .blog-img img{height:92px;width:auto}
.mg-page .blog-card-alfa .blog-content h3{margin:0 0 4px;font-size:19px;font-weight:600}
.mg-page .blog-card-alfa .blog-content h3 a{color:var(--mg-ink);text-decoration:none}
.mg-page .blog-card-alfa .blog-content p{margin:0;font-size:13px;line-height:1.55;color:#7C7C89}
.mg-page .blog-card-alfa.active{
  background:var(--mg-navy);border-color:var(--mg-navy);
  box-shadow:0 8px 20px rgba(46,49,146,.28);
}
.mg-page .blog-card-alfa.active .blog-content h3 a{color:#fff}
.mg-page .blog-card-alfa.active .blog-content p{color:#fff;opacity:.72}

/* ---------- activity -------------------------------------------------- */
.mg-page .boxin{
  padding:14px 8px;margin:0;border-radius:14px;background:#fff;
  border:1.5px solid transparent;text-align:center;transition:.18s ease;
  box-shadow:0 2px 8px rgba(20,20,40,.05);
}
.mg-page .boxin:hover{border-color:var(--mg-navy-30)}
.mg-page .boxin h4{margin:0;font-size:16px;font-weight:600;color:var(--mg-ink)}
.mg-page .boxin h5{margin:0;font-size:14.5px;font-weight:600;color:var(--mg-ink)}
.mg-page .boxin h6,
.mg-page .boxin p{margin:2px 0 0;font-size:12px;font-weight:400;color:#7C7C89;line-height:1.5}
.mg-page .boxin.active{
  background:var(--mg-navy);border-color:var(--mg-navy);
  box-shadow:0 8px 20px rgba(46,49,146,.28);
}
.mg-page .boxin.active h4,
.mg-page .boxin.active h5{color:#fff}
.mg-page .boxin.active h6,
.mg-page .boxin.active p{color:#fff;opacity:.72}
.mg-page .boxin.activity:first-of-type{padding:18px 12px}

.mg-page .box-1{
  background:var(--mg-navy-06);border:1.5px solid transparent;
  border-radius:20px;padding:14px;margin-top:14px;transition:.18s;
}
.mg-page .box-1.mg-group-on{border-color:var(--mg-navy);background:var(--mg-navy-04)}
.mg-page .box-1 h4.text-center{
  margin:2px 0 12px;font-size:15.5px;font-weight:500;color:var(--mg-ink);
}
.mg-page .box-1 .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.mg-page .box-1 .row > [class*="col-"]{
  width:auto;max-width:none;flex:none;padding:0;display:flex;
}
.mg-page .box-1 .boxin{width:100%;display:flex;flex-direction:column;justify-content:center}

/* ---------- duration select ------------------------------------------- */
.mg-page .select-wrapper{position:relative}
.mg-page .custom-select{
  width:100%;height:62px;border:1.5px solid var(--mg-navy-10);border-radius:16px;
  background:#fff !important;color:var(--mg-ink);font-size:17px;font-weight:600;
  text-align:center;text-align-last:center;padding:0 44px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  box-shadow:0 2px 8px rgba(20,20,40,.05);cursor:pointer;
}
.mg-page .custom-select:hover{border-color:var(--mg-navy-30)}
.mg-page .custom-select:focus{
  border-color:var(--mg-navy);box-shadow:0 0 0 3px rgba(46,49,146,.12);outline:0;
}
.mg-page .select-wrapper::after{
  content:"";position:absolute;right:22px;top:calc(50% - 4px);
  width:9px;height:9px;border-right:2px solid var(--mg-navy);
  border-bottom:2px solid var(--mg-navy);transform:rotate(45deg);
  pointer-events:none;
}

/* ---------- contact form ---------------------------------------------- */
.mg-page .form-wrap .form-group{margin-bottom:14px}
.mg-page .form-wrap input[type="text"],
.mg-page .form-wrap input[type="email"]{
  width:100%;height:56px;border:1.5px solid var(--mg-navy-10);border-radius:16px;
  background:#fff;padding:0 18px;font-size:15px;color:var(--mg-ink);
  box-shadow:0 2px 8px rgba(20,20,40,.05);
}
.mg-page .form-wrap input::placeholder{color:#A9A9B5}
.mg-page .form-wrap input:focus{
  border-color:var(--mg-navy);box-shadow:0 0 0 3px rgba(46,49,146,.12);outline:0;
}
.mg-page .help-block{font-size:12.5px;color:var(--mg-red);margin-top:5px}
.mg-page .mg-why{font-size:12.5px;color:#7C7C89;line-height:1.65;margin:0 0 18px}
.mg-page #analysis-placer{border-radius:14px;font-size:14px}

/* ---------- navigation buttons ---------------------------------------- */
.mg-page .mg-nav{display:flex;gap:12px;margin-top:26px;align-items:center}
.mg-page #next,
.mg-page .save-target{
  flex:1;display:block;width:100%;border:0;cursor:pointer;
  background:var(--mg-navy);color:#fff;font-size:17px;font-weight:600;
  padding:18px;border-radius:99px;text-align:center;text-decoration:none;
  box-shadow:0 8px 20px rgba(46,49,146,.25);transition:.18s;
}
.mg-page #next:hover,
.mg-page .save-target:hover{background:var(--mg-navy-dark);color:#fff}
.mg-page #prev{
  flex:0 0 auto;width:56px;height:56px;padding:0;border-radius:50%;
  background:#fff;border:1.5px solid var(--mg-navy-18);color:transparent;
  font-size:0;line-height:0;overflow:visible;position:relative;
  box-shadow:0 2px 8px rgba(20,20,40,.05);transition:.18s;
}
.mg-page #prev:hover{border-color:var(--mg-navy);background:#fff}
.mg-page #prev::before{
  content:"";display:block;position:absolute;
  top:calc(50% - 6px);left:calc(50% - 3px);
  width:11px;height:11px;background:none;border-radius:0;
  border-left:2px solid var(--mg-navy);border-bottom:2px solid var(--mg-navy);
  border-top:0;border-right:0;transform:rotate(45deg);opacity:1;
}
.mg-page #prev::after{content:none;display:none}
.mg-page .save-target{margin-top:8px}

/* ---------- results ---------------------------------------------------- */
.mg-page .mg-card{
  background:#fff;border-radius:22px;padding:22px 20px;
  box-shadow:0 4px 16px rgba(20,20,40,.06);margin-bottom:18px;
}
.mg-page .mg-sum{display:flex;justify-content:space-between;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--mg-navy-10)}
.mg-page .mg-sum .c{flex:1 1 0;min-width:0}
.mg-page .mg-sum .k{font-size:12.5px;color:var(--mg-muted);margin:0 0 4px}
.mg-page .mg-sum .v{font-size:16.5px;font-weight:500;margin:0;color:var(--mg-ink)}
.mg-page .mg-goalline{padding-top:16px}
.mg-page .mg-goalline .k{font-size:15px;color:#6E6E7C;font-weight:500;margin:0 0 10px}
.mg-page .mg-goalline .s{font-size:14.5px;color:#7C7C89;line-height:1.7;margin:0}
.mg-page .mg-goalline .s2{font-size:13.5px;color:#8A8A96;line-height:1.6;margin:6px 0 0}
.mg-page .mg-goalline .s b{color:var(--mg-navy);font-weight:600}

.mg-page .mg-res-t{text-align:center;font-size:22px;font-weight:600;margin:2px 0 2px;color:var(--mg-ink)}
.mg-page .mg-res-s{text-align:center;font-size:14px;color:var(--mg-muted);margin:0 0 6px}
.mg-page .mg-gauge{position:relative;width:100%;max-width:330px;margin:0 auto}
.mg-page .mg-gauge svg{display:block;width:100%;height:auto}
.mg-page .mg-gnum{position:absolute;left:0;right:0;top:52%;text-align:center}
.mg-page .mg-gnum b{font-size:37px;font-weight:600;letter-spacing:-1px;display:block;line-height:1;color:var(--mg-ink)}
.mg-page .mg-gnum span{font-size:13.5px;color:var(--mg-muted)}
.mg-page .mg-gends{display:flex;justify-content:space-between;font-size:14px;color:var(--mg-muted);margin-top:-14px;padding:0 2px}
.mg-page .mg-macros{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:24px;text-align:center}
.mg-page .mg-macros .lg{display:flex;align-items:center;justify-content:center;gap:7px;font-size:14.5px;color:var(--mg-muted);margin:0}
.mg-page .mg-macros .lg i{width:11px;height:11px;border-radius:50%;display:inline-block}
.mg-page .mg-macros .val{font-size:25px;font-weight:600;margin:7px 0 3px;color:var(--mg-ink)}
.mg-page .mg-macros .rng{font-size:13.5px;color:#A6A6B0;margin:0}
.mg-page .mg-cta{
  display:block;width:100%;background:var(--mg-navy);color:#fff;
  font-size:17px;font-weight:600;padding:18px;border-radius:99px;
  text-align:center;text-decoration:none;margin-top:14px;
  box-shadow:0 8px 20px rgba(46,49,146,.25);transition:.18s;
}
.mg-page .mg-cta:hover{background:var(--mg-navy-dark);color:#fff}
.mg-page .mg-cta.ghost{
  background:#fff;color:var(--mg-navy);box-shadow:0 3px 12px rgba(20,20,40,.07);
}
.mg-page .mg-cta.ghost:hover{background:var(--mg-navy-06);color:var(--mg-navy)}

/* ==========================================================================
   Arabic — the layout mirrors, the ruler numbers do not
   ========================================================================== */
[dir="rtl"] .mg-page .blog-card-alfa .blog-img{text-align:left}
[dir="rtl"] .mg-page .select-wrapper::after{right:auto;left:22px}
[dir="rtl"] .mg-page #prev::before{transform:rotate(-135deg);left:calc(50% - 8px)}
[dir="rtl"] .mg-page .form-wrap input[type="text"],
[dir="rtl"] .mg-page .form-wrap input[type="email"]{direction:rtl;text-align:right}

/* the sliders and their scales stay left-to-right in both languages:
   a tape measure that counts backwards is not a tape measure */
[dir="rtl"] .mg-page #slider-weight,
[dir="rtl"] .mg-page #slider-target-weight,
[dir="rtl"] .mg-page .mg-height,
[dir="rtl"] .mg-page .date-picker,
[dir="rtl"] .mg-page .mg-gauge,
[dir="rtl"] .mg-page .mg-gends{direction:ltr}
[dir="rtl"] .mg-page .noUi-value,
[dir="rtl"] .mg-page .noUi-tooltip,
[dir="rtl"] .mg-page .item{direction:ltr;unicode-bidi:embed}
[dir="rtl"] .mg-page .mg-sum .v,
[dir="rtl"] .mg-page .mg-macros .val,
[dir="rtl"] .mg-page .mg-macros .rng,
[dir="rtl"] .mg-page .mg-gnum{direction:ltr;unicode-bidi:embed}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width:767px){
  /* ------------------------------------------------------------------
     Phones: every step has to fit on one screen without scrolling, so
     everything below is a tightening of the same design - no element is
     removed, only made smaller.
     ------------------------------------------------------------------ */

  /* the page banner repeats the menu item you just tapped; on a phone that
     is 100px of screen spent saying nothing */
  .mg-page .breadcrumb-wrap{display:none}

  .mg-page .pricing-section{padding:12px 0 18px}
  .mg-page .step-box{padding:0 2px}

  .mg-page .mg-top{margin-bottom:7px;min-height:20px}
  .mg-page .mg-count{font-size:11.5px}
  .mg-page .mg-help{font-size:13.5px}
  .mg-page .progress-steps{gap:6px;margin-bottom:14px}

  .mg-page .step h2.section-title,
  .mg-page .step h3{font-size:17px;margin-bottom:10px}
  .mg-page .step h3.mt-3,
  .mg-page .step .col-md-6 + .col-md-6 h3,
  .mg-page .step .col-lg-7 h2.section-title{margin-top:16px}

  /* ---- step 1 ---- */
  .mg-page .gender-wrap{gap:10px}
  .mg-page .gender-card{padding:12px 8px 9px;border-radius:16px}
  .mg-page .gender-card img{height:62px;margin-bottom:6px}
  .mg-page .gender-card h4{font-size:14px}
  .mg-page .date-picker{height:150px}
  .mg-page .date-picker::after{height:44px;border-radius:11px}
  .mg-page .item{height:50px;font-size:16px}
  .mg-page .item.active{font-size:18px}

  /* ---- step 2 ---- */
  .mg-page #slider-height{height:180px;margin-left:104px}
  .mg-page .step > .row.mg-height > .mg-h-scale{flex:0 0 176px;width:176px}
  .mg-page #slider-height .noUi-tooltip{font-size:17px;left:-14px}
  .mg-page #slider-height .noUi-handle:before{width:26px;right:28px}
  .mg-page .noUi-value-vertical{padding-left:38px;font-size:12px}
  .mg-page .noUi-marker-vertical.noUi-marker{width:15px}
  .mg-page .noUi-marker-vertical.noUi-marker-large{width:28px}
  .mg-page .iamge img{height:172px}
  .mg-page #slider-weight,
  .mg-page #slider-target-weight{height:46px;margin:4px 8px 54px}
  .mg-page #slider-weight .noUi-handle,
  .mg-page #slider-target-weight .noUi-handle{top:24px}
  .mg-page #slider-weight .noUi-handle:before,
  .mg-page #slider-target-weight .noUi-handle:before{height:50px}
  .mg-page .noUi-pips-horizontal{height:44px}
  .mg-page .noUi-marker-horizontal.noUi-marker{height:14px}
  .mg-page .noUi-marker-horizontal.noUi-marker-large{height:24px}
  .mg-page .noUi-value-horizontal{padding-top:30px;font-size:11.5px}
  .mg-page .noUi-tooltip{font-size:19px}
  .mg-page #slider-weight .noUi-tooltip,
  .mg-page #slider-target-weight .noUi-tooltip{top:44px}

  /* ---- step 3 ---- */
  .mg-page .home3-blog-area{gap:9px}
  .mg-page .blog-card-alfa{padding:11px 12px;min-height:0;border-radius:15px}
  .mg-page .blog-card-alfa .blog-content h3{font-size:15.5px;margin-bottom:2px}
  .mg-page .blog-card-alfa .blog-content p{font-size:11.5px;line-height:1.4}
  .mg-page .blog-card-alfa .blog-img{max-width:74px}
  .mg-page .blog-card-alfa .blog-img img{height:56px}

  /* ---- step 4 ---- */
  .mg-page .boxin{padding:6px 4px;border-radius:11px}
  .mg-page .boxin.activity:first-of-type{padding:9px 6px}
  .mg-page .boxin h4{font-size:14px}
  .mg-page .boxin h5{font-size:13px}
  .mg-page .boxin h6,
  .mg-page .boxin p{font-size:10.5px;line-height:1.3;margin-top:1px}
  .mg-page .box-1{padding:7px;margin-top:6px;border-radius:15px}
  .mg-page .box-1 h4.text-center{font-size:12.5px;margin:0 0 6px}
  .mg-page .box-1 .row{gap:7px}

  /* ---- step 5 ---- */
  .mg-page .custom-select{height:52px;font-size:15.5px;border-radius:14px}

  /* ---- step 6 ---- */
  .mg-page .mg-why{font-size:11.5px;margin-bottom:12px}
  .mg-page .form-wrap .form-group{margin-bottom:10px}
  .mg-page .form-wrap input[type="text"],
  .mg-page .form-wrap input[type="email"]{height:48px;border-radius:14px}

  /* ---- buttons ---- */
  .mg-page .mg-nav{margin-top:14px;gap:10px}
  .mg-page #next,
  .mg-page .save-target{padding:14px;font-size:15.5px}
  .mg-page #prev{width:48px;height:48px}

  /* ---- results ---- */
  .mg-page .mg-card{padding:11px 12px;border-radius:17px;margin-bottom:9px}
  .mg-page .mg-sum{gap:4px;padding-bottom:8px}
  .mg-page .mg-sum .k{font-size:11px;margin-bottom:2px}
  .mg-page .mg-sum .v{font-size:14px}
  .mg-page .mg-goalline{padding-top:8px}
  .mg-page .mg-goalline .k{font-size:13px;margin-bottom:5px}
  .mg-page .mg-goalline .s{font-size:13px;line-height:1.45}
  .mg-page .mg-goalline .s2{font-size:11.5px;margin-top:3px}
  /* on a phone the page is obviously the results, and the label above the
     goal line repeats the summary above it - both are dropped so the real
     call to action stays on screen */
  .mg-page .mg-res-t{display:none}
  .mg-page .mg-goalline .k{display:none}
  .mg-page .mg-res-s{font-size:11.5px;margin:0 0 2px}
  .mg-page .mg-gauge{max-width:178px}
  .mg-page .mg-gnum b{font-size:24px}
  .mg-page .mg-gnum span{font-size:11.5px}
  .mg-page .mg-gends{font-size:11.5px;margin-top:-8px}
  .mg-page .mg-macros{margin-top:9px;gap:4px}
  .mg-page .mg-macros .lg{font-size:12px;gap:5px}
  .mg-page .mg-macros .lg i{width:9px;height:9px}
  .mg-page .mg-macros .val{font-size:17.5px;margin:1px 0 0}
  .mg-page .mg-macros .rng{font-size:11px}
  .mg-page .mg-cta{padding:11px;font-size:14.5px;margin-top:7px}
  /* "Reset my goal" becomes a quiet text link on a phone. It is a secondary
     action and a second full-size button was pushing the real call to
     action off the bottom of the screen. */
  .mg-page .mg-cta.ghost{
    background:none;box-shadow:none;padding:7px;font-size:13.5px;
    text-decoration:underline;margin-top:4px;
  }
}

@media (max-width:767px) and (max-height:700px){
  /* ------------------------------------------------------------------
     Short screens - an iPhone SE has about 90px less usable height than
     an iPhone 14. One more notch tighter so the steps still fit there.
     ------------------------------------------------------------------ */
  .mg-page .pricing-section{padding:6px 0 8px}
  .mg-page .mg-top{margin-bottom:5px;min-height:18px}
  .mg-page .progress-steps{margin-bottom:8px}
  .mg-page .step h2.section-title,
  .mg-page .step h3{font-size:16px;margin-bottom:8px}
  .mg-page .step h3.mt-3,
  .mg-page .step .col-md-6 + .col-md-6 h3,
  .mg-page .step .col-lg-7 h2.section-title{margin-top:11px}

  .mg-page .gender-card{padding:9px 6px 7px}
  .mg-page .gender-card img{height:50px;margin-bottom:4px}
  .mg-page .gender-card h4{font-size:13px}
  .mg-page .date-picker{height:126px}
  .mg-page .date-picker::after{height:38px}
  .mg-page .item{height:42px;font-size:15px}
  .mg-page .item.active{font-size:17px}

  .mg-page #slider-height{height:140px;margin-left:96px}
  .mg-page .step > .row.mg-height > .mg-h-scale{flex:0 0 164px;width:164px}
  .mg-page .iamge img{height:134px}
  .mg-page #slider-weight,
  .mg-page #slider-target-weight{height:40px;margin:2px 8px 44px}
  .mg-page #slider-weight .noUi-handle,
  .mg-page #slider-target-weight .noUi-handle{top:18px}
  .mg-page #slider-weight .noUi-handle:before,
  .mg-page #slider-target-weight .noUi-handle:before{height:44px}
  .mg-page .noUi-pips-horizontal{height:38px}
  .mg-page .noUi-marker-horizontal.noUi-marker-large{height:20px}
  .mg-page .noUi-value-horizontal{padding-top:25px}
  .mg-page #slider-weight .noUi-tooltip,
  .mg-page #slider-target-weight .noUi-tooltip{top:38px}
  .mg-page .noUi-tooltip{font-size:17px}

  .mg-page .home3-blog-area{gap:7px}
  .mg-page .blog-card-alfa{padding:8px 10px}
  .mg-page .blog-card-alfa .blog-content h3{font-size:14.5px}
  .mg-page .blog-card-alfa .blog-content p{font-size:11px;line-height:1.35}
  .mg-page .blog-card-alfa .blog-img{max-width:62px}
  .mg-page .blog-card-alfa .blog-img img{height:46px}

  .mg-page .boxin{padding:3px}
  .mg-page .boxin.activity:first-of-type{padding:6px}
  .mg-page .boxin h4{font-size:13px}
  .mg-page .boxin h5{font-size:12.5px}
  .mg-page .boxin h6,
  .mg-page .boxin p{font-size:10px;line-height:1.25}
  .mg-page .box-1{padding:5px;margin-top:4px}
  .mg-page .box-1 h4.text-center{font-size:11.5px;margin:0 0 4px}
  .mg-page .box-1 .row{gap:6px}

  .mg-page .custom-select{height:46px;font-size:15px}
  .mg-page .mg-why{font-size:11px;margin-bottom:9px}
  .mg-page .form-wrap input[type="text"],
  .mg-page .form-wrap input[type="email"]{height:44px}
  .mg-page .form-wrap .form-group{margin-bottom:8px}

  .mg-page .mg-nav{margin-top:8px}
  .mg-page #next,
  .mg-page .save-target{padding:11px;font-size:15px}
  .mg-page #prev{width:44px;height:44px}

  .mg-page .mg-card{padding:8px 10px;margin-bottom:5px}
  .mg-page .mg-sum .k{font-size:10.5px}
  .mg-page .mg-sum .v{font-size:13px}
  .mg-page .mg-goalline .s{font-size:12px}
  .mg-page .mg-goalline .s2{font-size:10.5px}
  .mg-page .mg-gauge{max-width:126px}
  .mg-page .mg-gnum b{font-size:21px}
  .mg-page .mg-macros{margin-top:5px}
  .mg-page .mg-macros .val{font-size:16px}
  .mg-page .mg-cta{padding:10px;font-size:14px;margin-top:5px}
  .mg-page .mg-gends{margin-top:-6px}
  .mg-page .mg-macros .rng{font-size:10.5px}
}

/* ==========================================================================
   Page furniture — this file is only ever loaded on the My Goal page, so
   these two rules cannot affect anything else on the site.
   ========================================================================== */

@media (max-width:991px){
  /* The app-download strip is a second call to action sitting on top of a
     six-step form. It competes with "Next", and it is what was covering the
     button. It stays on every other page. */
  #downloadBar{display:none !important}
  .page-wrapper{padding-bottom:0}

  /* A shorter header on this page: the six steps have to fit between the
     header and the bottom of the screen, and the logo row was using about
     90px of that on its own. */
  .header-wrap .header-top{padding-top:6px;padding-bottom:6px;font-size:13px}
  .header-wrap .main-head{padding-top:4px;padding-bottom:4px}
  .header-wrap .main-head .logo img,
  .header-wrap .logo img,
  .header-wrap .navbar-brand img{max-height:46px;height:auto;width:auto}
}