/*
 * Mastermind v2 page styles.
 * Loaded only by tpl-mastermind.php, so nothing here reaches other pages.
 * Every rule is scoped to .mastermind-v2-page.
 *
 * AFTER EDITING THIS FILE, bump $mm_css_ver at the top of
 * tpl-mastermind.php to force browsers and the site cache to reload it.
 */


  .mastermind-v2-page{
    --paper:#FCFCFA;--panel:#FFFFFF;--ink:#14202B;--soft:#586374;--line:#E7E7E1;
    --navy:#25476A;--navy-dk:#1B3651;--emer:#1E8A5A;--emer-br:#3CC287;--wash:#EDF1F5;
    --hdr:#1E2C48;--hdr-soft:#B9C4D6;--foot:#172236;
  }

  .mastermind-v2-page *{box-sizing:border-box}

  .mastermind-v2-page{margin:0;background:var(--paper);color:var(--ink);font-family:"Roboto", sans-serif;font-size:17px;line-height:1.66}

  .mastermind-v2-page .mono{font-family:"Roboto", sans-serif}

  .mastermind-v2-page a{color:inherit}

  .mastermind-v2-page .btn{display:inline-block;background:var(--navy);color:#fff;font-weight:600;font-size:15px;padding:12px 22px;border-radius:5px;text-decoration:none}

  .mastermind-v2-page .btn:hover{background:var(--navy-dk)}

  .mastermind-v2-page .btn.em{background:var(--emer-br);color:#07331f}
.mastermind-v2-page .btn.em:hover{background:#2fa876;color:#fff}

  .mastermind-v2-page strong{font-weight:600}

  .mastermind-v2-page main{min-width:0}

  .mastermind-v2-page section{padding:52px 60px;border-bottom:1px solid var(--line)}

  .mastermind-v2-page .lbl{font-family:"Roboto", sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--emer);display:flex;gap:12px;align-items:center;margin-bottom:18px}

  .mastermind-v2-page .lbl .rule{height:1px;background:var(--line);flex:1}

  .mastermind-v2-page h1{font-family:"Roboto", sans-serif;font-size:clamp(29px,3.5vw,44px);line-height:1.08;font-weight:600;margin:0 0 18px;letter-spacing:-.01em}

  .mastermind-v2-page h2{font-family:"Roboto", sans-serif;font-size:clamp(23px,2.7vw,32px);line-height:1.14;font-weight:600;margin:0 0 18px}

  .mastermind-v2-page h3{font-family:"Roboto", sans-serif;font-size:19px;font-weight:600;margin:0 0 6px}

  .mastermind-v2-page p{margin:0 0 14px}
.mastermind-v2-page .soft{color:var(--soft)}

  .mastermind-v2-page .sub{font-size:19px;color:var(--soft);margin-bottom:22px}

  .mastermind-v2-page .meta{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-family:"Roboto", sans-serif;font-size:11.5px;color:var(--soft);display:flex;flex-wrap:wrap;gap:8px 20px}

  .mastermind-v2-page .gap{font-weight:600;color:var(--navy)}

  .mastermind-v2-page .imgph{margin:20px 0 4px;border:1px dashed #C9CFC7;border-radius:10px;min-height:200px;background:repeating-linear-gradient(45deg,#F3F3EE,#F3F3EE 12px,#EFEFE8 12px,#EFEFE8 24px);display:flex;align-items:center;justify-content:center;color:var(--soft);font-family:"Roboto", sans-serif;font-size:12px;letter-spacing:.05em;text-align:center;padding:18px}

  .mastermind-v2-page .trust{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-family:"Roboto", sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}


  .mastermind-v2-page .quotecard{background:var(--navy);color:#fff;border-radius:12px;padding:34px 36px;text-align:center}

  .mastermind-v2-page .quotecard p{font-family:"Roboto", sans-serif;font-size:clamp(20px,2.6vw,27px);line-height:1.32;margin:0 0 12px}

  .mastermind-v2-page .quotecard .a{font-family:"Roboto", sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8FD3AE}


  .mastermind-v2-page .phase{font-family:"Roboto", sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin:22px 0 8px}

  .mastermind-v2-page ol.blocks{list-style:none;counter-reset:b;padding:0;margin:0}

  .mastermind-v2-page ol.blocks li{counter-increment:b;position:relative;padding:12px 0 12px 42px;border-top:1px solid var(--line)}

  .mastermind-v2-page ol.blocks li:before{content:counter(b);position:absolute;left:6px;top:12px;font-family:"Roboto", sans-serif;font-weight:500;color:var(--emer);font-size:15px}

  .mastermind-v2-page ol.blocks li b{color:var(--navy)}

  .mastermind-v2-page .ten{display:grid;gap:10px;margin:6px 0 4px}

  .mastermind-v2-page .ten div{padding:12px 16px;background:var(--wash);border-radius:8px}

  .mastermind-v2-page .ten b{color:var(--navy)}

  .mastermind-v2-page ul.get{list-style:none;padding:0;margin:6px 0}

  .mastermind-v2-page ul.get li{padding:11px 0;border-top:1px solid var(--line)}

  .mastermind-v2-page ul.get li b{color:var(--navy)}


  .mastermind-v2-page .feature{background:var(--navy);color:#EAF0F6}
.mastermind-v2-page .feature .lbl{color:#8FD3AE}

  .mastermind-v2-page .feature .q{font-family:"Roboto", sans-serif;font-size:25px;line-height:1.3;margin:0 0 16px;color:#fff}

  .mastermind-v2-page .feature .vid{margin-top:20px;border:1px solid rgba(255,255,255,.18);border-radius:8px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#A9C0D6;font-family:"Roboto", sans-serif;font-size:12px;background:linear-gradient(135deg,#2a4e74,#183048)}


  /* comparison */
  .mastermind-v2-page .cmp{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:8px}

  .mastermind-v2-page .cmp .row{display:grid;grid-template-columns:1fr 1.5fr 1.4fr;border-top:1px solid var(--line)}

  .mastermind-v2-page .cmp .row:first-child{border-top:none}

  .mastermind-v2-page .cmp .row>div{padding:12px 15px;font-size:14.5px}

  .mastermind-v2-page .cmp .head{background:var(--navy);color:#fff}

  .mastermind-v2-page .cmp .head>div{font-weight:600}

  .mastermind-v2-page .cmp .k{font-weight:600;color:var(--ink)}

  .mastermind-v2-page .cmp .us{background:rgba(30,138,90,.08)}

  .mastermind-v2-page .cmp .them{color:var(--soft)}


  /* before/after */
  .mastermind-v2-page .ba{margin-top:10px}

  .mastermind-v2-page .ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}

  .mastermind-v2-page .ba .col{padding:18px 20px}

  .mastermind-v2-page .ba .col.before{background:#FBF3F1;border-right:1px solid var(--line)}

  .mastermind-v2-page .ba .col.after{background:rgba(30,138,90,.07)}

  .mastermind-v2-page .ba .col .t{font-family:"Roboto", sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}

  .mastermind-v2-page .ba .before .t{color:#B4544A}
.mastermind-v2-page .ba .after .t{color:var(--emer)}

  .mastermind-v2-page .ba ul{margin:0;padding-left:18px}
.mastermind-v2-page .ba li{margin:6px 0;font-size:14.5px;line-height:1.5}

  .mastermind-v2-page .ba blockquote{margin:14px 0 0;font-family:"Roboto", sans-serif;font-style:italic;font-size:19px;color:var(--ink);border-left:3px solid var(--emer-br);padding-left:16px}

  .mastermind-v2-page .ba blockquote .a{display:block;font-style:normal;font-family:"Roboto", sans-serif;font-size:12px;letter-spacing:.06em;color:var(--soft);margin-top:8px}

  .mastermind-v2-page .tcase{margin-bottom:34px}

  .mastermind-v2-page .tcase:last-child{margin-bottom:0}


  .mastermind-v2-page details{border-top:1px solid var(--line);padding:15px 0}

  .mastermind-v2-page details:last-of-type{border-bottom:1px solid var(--line)}

  .mastermind-v2-page summary{cursor:pointer;list-style:none;font-family:"Roboto", sans-serif;font-size:18px;color:var(--ink);display:flex;justify-content:space-between;gap:14px}

  .mastermind-v2-page summary::-webkit-details-marker{display:none}

  .mastermind-v2-page summary .p{color:var(--emer);font-weight:600;flex:none}

  .mastermind-v2-page details[open] .p{transform:rotate(45deg)}

  .mastermind-v2-page details .ans{margin:10px 0 0;color:var(--soft);font-size:15.5px}

  .mastermind-v2-page .note{font-size:12.5px;color:var(--soft);font-style:italic;margin-top:20px;padding-top:12px;border-top:1px dashed var(--line)}


  @media(max-width:900px){

    .mastermind-v2-page section{padding:40px 22px}

    .mastermind-v2-page .cmp .row{grid-template-columns:1fr}

    .mastermind-v2-page .cmp .row>div{border-top:1px solid var(--line)}

    .mastermind-v2-page .cmp .row>div:first-child{border-top:none;font-weight:600}

    .mastermind-v2-page .cmp .head{display:none}

    .mastermind-v2-page .cmp .us:before{content:"Go-To Mastermind. ";font-weight:600;color:var(--emer)}

    .mastermind-v2-page .cmp .them:before{content:"Others. ";font-weight:600;color:var(--soft)}

    .mastermind-v2-page .ba .pair{grid-template-columns:1fr}

    .mastermind-v2-page .ba .col.before{border-right:none;border-bottom:1px solid var(--line)}
.mastermind-v2-page{padding-bottom:74px}
}


/* Refined inline sales visuals. Original image masters are retained. */
.mastermind-v2-page .sales-visual{margin:20px 0 24px}

.mastermind-v2-page .sales-visual>img{display:block;width:100%;height:auto}

.mastermind-v2-page .sales-visual figcaption{font-size:12px;line-height:1.5;color:var(--soft);margin-top:8px}

.mastermind-v2-page .mobile-diagram{display:none}

@media(max-width:600px){

.mastermind-v2-page .sales-visual .desktop-diagram{display:none}

.mastermind-v2-page .mobile-diagram{display:grid;gap:12px}

.mastermind-v2-page .mobile-diagram b{display:block;color:var(--navy);font-size:17px;line-height:1.3}

.mastermind-v2-page .mobile-diagram p{margin:7px 0 0;font-size:14px;line-height:1.45}

.mastermind-v2-page .mobile-diagram>div{border:1px solid var(--line);border-radius:8px;padding:16px;background:#fff}

.mastermind-v2-page .mobile-training{grid-template-columns:1fr 1fr}

.mastermind-v2-page .mobile-training span, .mastermind-v2-page .mobile-map li span{color:var(--emer);font-family:"Roboto", sans-serif;margin-right:10px}

.mastermind-v2-page .mobile-map small{display:block;color:var(--emer);font-family:"Roboto", sans-serif;margin-bottom:6px}

.mastermind-v2-page .mobile-map ul{padding:0;list-style:none;margin:12px 0 0}

.mastermind-v2-page .mobile-map li{padding:7px 0;border-top:1px solid var(--line);font-size:15px}

.mastermind-v2-page .mobile-split strong{display:block;font-size:28px;color:var(--emer)}

.mastermind-v2-page .mobile-split>div:nth-child(2){background:var(--navy);padding-top:28px;padding-bottom:28px}

.mastermind-v2-page .mobile-split>div:nth-child(2) b, .mastermind-v2-page .mobile-split>div:nth-child(2) p{color:#fff}
}

.mastermind-v2-page .hl{color:inherit;text-decoration-line:underline;text-decoration-color:#16A34A;-webkit-text-decoration-color:#16A34A;text-decoration-thickness:.13em;text-underline-offset:.16em;text-decoration-skip-ink:auto}

  .mastermind-v2-page .eyebrow{font-size:16px;font-weight:600;color:var(--navy);margin:0 0 14px}

  .mastermind-v2-page .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 4px}

  .mastermind-v2-page .strip div{background:var(--wash);border-radius:8px;padding:14px 16px;font-size:14.5px;line-height:1.5}

  .mastermind-v2-page .strip b{display:block;color:var(--navy);margin-bottom:4px}

  .mastermind-v2-page .admit{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--emer-br);border-radius:8px;padding:16px 20px;margin:18px 0}

  .mastermind-v2-page .admit p{margin:0 0 8px;font-family:"Roboto", sans-serif;font-style:italic;font-size:18px}

  .mastermind-v2-page .admit .a{font-family:"Roboto", sans-serif;font-size:12px;letter-spacing:.06em;color:var(--soft)}

  .mastermind-v2-page .ps{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}

  @media(max-width:700px){
.mastermind-v2-page .strip{grid-template-columns:1fr}
}

.mastermind-v2-page .chip{display:inline-block;font-family:"Roboto", sans-serif;font-style:italic;font-size:15px;color:var(--emer);border:1px solid var(--emer);border-radius:999px;padding:6px 15px;margin:2px 0 20px}

/* ---- Format alignment with the Go-To Clinic Mentorship page (first pass). Palette stays Mastermind. ---- */
.mastermind-v2-page{font-family:"Roboto", sans-serif;font-size:18px;line-height:1.62}

.mastermind-v2-page h1, .mastermind-v2-page h2, .mastermind-v2-page h3, .mastermind-v2-page h4{font-family:"Roboto", sans-serif}

.mastermind-v2-page h2{font-weight:700}

.mastermind-v2-page .chip{font-family:"Roboto", sans-serif}

/* diagram frame: white card, hairline, 14px radius (Mentorship .sales-illustration) */
.mastermind-v2-page .sales-visual img{background:#FFFFFF;border:1px solid var(--line);border-radius:14px;padding:12px}

/* photo frame: edge to edge inside the hairline (Mentorship .photo) */
.mastermind-v2-page .photo{margin:24px 0 26px}

.mastermind-v2-page .photo img{background:none;border:1px solid var(--line);border-radius:14px;padding:0}

/* captions: small, uppercase, letter-spaced (Mentorship figcaption) */
.mastermind-v2-page .sales-visual figcaption, .mastermind-v2-page .photo figcaption{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-top:10px;line-height:1.5}

/* keep the comparison table side by side from tablet up; stack only on phones */
@media(min-width:681px){

  .mastermind-v2-page .cmp .row{grid-template-columns:1fr 1.5fr 1.4fr}

  .mastermind-v2-page .cmp .head{display:grid}

  .mastermind-v2-page .cmp .row>div{border-top:none}

  .mastermind-v2-page .cmp .row>div:first-child{font-weight:600}

  .mastermind-v2-page .cmp .us:before, .mastermind-v2-page .cmp .them:before{content:none}
}

/* comparison: ours reads green, theirs reads red (ProSport red #B81C1C at the same strength as the green) */
.mastermind-v2-page .cmp .them{background:rgba(184,28,28,.08)}

/* ================= Site alignment =================================
 * Macauley, Slack 21 Sep: no sidebar, and "check the current pages to see
 * their design then fit this into it."
 * Section wrappers are the site's own (.content-section / .container /
 * alternating .bg-light-blue); type, measure, labels and buttons follow the
 * current pages. Diagrams, the comparison table and the before/after pairs
 * run wider than the text measure.
 * ================================================================== */
.mastermind-v2-page{font-family:"Roboto",sans-serif;color:#555;background:none;font-size:16px}
.mastermind-v2-page section{border-bottom:0}
.mastermind-v2-page h2.title{font-family:"Roboto", sans-serif;font-weight:700;color:#153365}
.mastermind-v2-page h3{font-family:"Roboto", sans-serif;font-weight:600;color:#153365;font-size:24px;margin:34px auto 12px;max-width:720px}
.mastermind-v2-page .desc>p,.mastermind-v2-page .desc>ul,.mastermind-v2-page .desc>ol,.mastermind-v2-page .desc>blockquote{max-width:720px;margin-left:auto;margin-right:auto}
.mastermind-v2-page .desc>p{font-size:17px;line-height:1.7;color:#555}
.mastermind-v2-page .sec-label{color:#3CC287;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;margin-bottom:10px}

.mastermind-v2-page figure{margin:28px auto 30px;max-width:1000px}
.mastermind-v2-page figure img{display:block;width:100%;height:auto}
.mastermind-v2-page figcaption{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#7b8794;margin-top:10px;text-align:center}

/* buttons: the site's pill green */
.mastermind-v2-page .btn{display:inline-block;background:#3CC287;color:#fff;border-radius:100px;padding:14px 32px;
  text-decoration:none;font-weight:600;font-family:"Roboto",sans-serif;border:0}
.mastermind-v2-page .btn:hover,.mastermind-v2-page .btn.em:hover{background:#2fa876;color:#fff}
.mastermind-v2-page .btn.em{background:#3CC287;color:#fff}
.mastermind-v2-page .chip{display:inline-block;border:1px solid #3CC287;color:#3CC287;border-radius:999px;padding:6px 16px;margin:6px 0 18px;font-size:15px}

/* wide components keep the handoff layout inside the site container */
.mastermind-v2-page .cmp,.mastermind-v2-page .ba,.mastermind-v2-page .strip,.mastermind-v2-page .ten,.mastermind-v2-page ol.blocks,.mastermind-v2-page ul.get,
.mastermind-v2-page .quotecard,.mastermind-v2-page .admit,.mastermind-v2-page .trust,.mastermind-v2-page .tcase{max-width:1000px;margin-left:auto;margin-right:auto}
.mastermind-v2-page .meta,.mastermind-v2-page .note,.mastermind-v2-page .ps{max-width:720px;margin-left:auto;margin-right:auto}


/* ---- Image treatment matched to the current pages ----------------------
 * Measured off /business-mentorship/: body images render 640px wide with
 * 20px rounded corners, on the site's 640px text measure, and captions are
 * p.image-description (italic, 14.4px, #555, centred).
 * The handoff was running images at 1000px with square corners and small
 * uppercase captions, which is what looked oversized and off next to the
 * text column. Text and images now share the site's 640px measure.
 * Data-dense components the site has no equivalent for (comparison table,
 * before/after pairs, bucket pair, route and block grids) stay wider, or
 * their internal type would be unreadable.
 * ---------------------------------------------------------------------- */
.mastermind-v2-page .desc>p,.mastermind-v2-page .desc>ul,.mastermind-v2-page .desc>ol,.mastermind-v2-page .desc>blockquote,.mastermind-v2-page h3{max-width:640px;margin-left:auto;margin-right:auto}
.mastermind-v2-page figure{margin:26px auto 28px;max-width:640px}
.mastermind-v2-page figure img,.mastermind-v2-page .sales-visual img,.mastermind-v2-page .photo img,.mastermind-v2-page .sales-illustration img{
  display:block;width:100%;height:auto;border-radius:20px;border:0;padding:0;background:none}
.mastermind-v2-page figcaption,.mastermind-v2-page .sales-visual figcaption,.mastermind-v2-page .photo figcaption,.mastermind-v2-page .sales-illustration figcaption{
  font-size:14.4px;font-style:italic;text-transform:none;letter-spacing:normal;color:#555;text-align:center;margin-top:12px;line-height:1.5}
/* wide components keep room to breathe */
.mastermind-v2-page .cmp,.mastermind-v2-page .ba,.mastermind-v2-page .bucket-pair,.mastermind-v2-page .strip,.mastermind-v2-page .ten,.mastermind-v2-page ol.blocks,.mastermind-v2-page ul.get,
.mastermind-v2-page .quotecard,.mastermind-v2-page .admit,.mastermind-v2-page .trust,.mastermind-v2-page .tcase,.mastermind-v2-page .swing,.mastermind-v2-page .hats,
.mastermind-v2-page .stats,.mastermind-v2-page .tgrid,.mastermind-v2-page .stages,.mastermind-v2-page .routes{max-width:960px;margin-left:auto;margin-right:auto}
.mastermind-v2-page figure.bucket-pair,.mastermind-v2-page figure.wide,.mastermind-v2-page #diary-image,.mastermind-v2-page #four-hats-image{max-width:960px}

/* The handoff sets .photo / .sales-visual / .sales-illustration to
 * margin:Npx 0, which out-specifies the figure{margin:auto} above and left
 * aligns them in the wider site column. Centre them explicitly. */
.mastermind-v2-page figure.photo,.mastermind-v2-page figure.sales-visual,.mastermind-v2-page figure.sales-illustration,
.mastermind-v2-page .photo,.mastermind-v2-page .sales-visual,.mastermind-v2-page .sales-illustration{margin-left:auto;margin-right:auto}

/* A few handoff figures carry an inline margin (e.g. the hero trust bar),
 * which no selector can outrank. !important is the only way to centre those. */
.mastermind-v2-page figure[style]{margin-left:auto !important;margin-right:auto !important}

/* ---- Hero label + title measure, matched to /business-mentorship/ --------
 * Measured on the live page:
 *   hero label  -> pill: 16px Roboto 400, rgba(255,255,255,.15), 100px radius,
 *                  15px 30px padding, inline, white, small green dot.
 *   section h2  -> 33px, constrained to the site's 640px measure, so the title
 *                  sits on the same column edges as the body copy. Ours was
 *                  running the full container width, which is why the titles
 *                  looked unaligned against the text beneath them.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page .page-title-content h1{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Roboto",sans-serif;font-size:16px;font-weight:400;line-height:1.2;
  background:rgba(255,255,255,.15);border-radius:100px;padding:15px 30px;
  color:#fff;margin:0 auto 22px;text-transform:none;letter-spacing:normal}
.mastermind-v2-page .page-title-content h1 i{font-size:10px;color:#3CC287;margin:0}

/* section titles share the body's 640px measure */
.mastermind-v2-page section.content-section h2.title{
  max-width:640px;margin-left:auto;margin-right:auto;font-size:33px;line-height:1.25}
.mastermind-v2-page .sec-label{max-width:640px;margin-left:auto;margin-right:auto}

/* hero headline: the site runs it at 48px */
.mastermind-v2-page .page-title-area h2.title{font-size:48px;line-height:1.2}

/* Remaining full-width blocks pulled onto the 640px measure. On the current
 * pages the FAQ accordion sits inside .shorter-content-width, so it matches
 * the copy rather than spanning the container. */
.mastermind-v2-page .accordion,.mastermind-v2-page .phase,.mastermind-v2-page .eyebrow,.mastermind-v2-page .sub,.mastermind-v2-page .meta,
.mastermind-v2-page .note,.mastermind-v2-page .ps,.mastermind-v2-page .illus-cap,.mastermind-v2-page .ctarow{
  max-width:640px;margin-left:auto;margin-right:auto}

/* ---- Section rhythm restored -------------------------------------------
 * The handoff styles bare `section` with its own padding and a hairline
 * border, so this page zeroed `section` to strip that. That also wiped the
 * theme's own .content-section padding, which is why the section labels
 * ("01 The problem", "02 My story") sat hard against the top edge.
 * /business-mentorship/ runs .content-section at 60px top and bottom, so
 * that is restored here explicitly, with the usual tighter mobile value.
 * ----------------------------------------------------------------------- */
.mastermind-v2-page section.content-section{padding-top:60px;padding-bottom:60px;border-bottom:0}
.mastermind-v2-page section.content-section > .container{padding-left:15px;padding-right:15px}
@media(max-width:900px){
  .mastermind-v2-page section.content-section{padding-top:40px;padding-bottom:40px}
}

/* ---- Quote card, restyled as the site's own .quote-block ----------------
 * The handoff card was navy, but the theme forces paragraphs to near-black,
 * so the quote rendered black on navy and was unreadable. Rather than patch
 * the contrast, it now uses the treatment from /business-mentorship/:
 * #F9FAFB ground, 6px green left rule, 12px radius, italic, left aligned,
 * on the 640px copy measure. Attribution stays as a small green caption.
 * ----------------------------------------------------------------------- */
.mastermind-v2-page .quotecard,.mastermind-v2-page .admit{
  background:#F9FAFB;border:0;border-left:6px solid #3EBF84;border-radius:12px;
  padding:24px 32px;margin:28px auto;max-width:640px;text-align:left;color:#333}
.mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p{
  color:#333;font-family:"Roboto",sans-serif;font-style:italic;font-size:18px;
  line-height:1.6;margin:0 0 10px;text-align:left;max-width:none}
.mastermind-v2-page .quotecard .a,.mastermind-v2-page .admit .a{
  display:block;color:#1E8A5A;font-family:"Roboto",sans-serif;font-size:13px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-style:normal;margin-top:6px}

/* ---- Text lists share the copy measure ---------------------------------
 * These are prose, not diagrams, so at 960px their left edge sat outside the
 * paragraphs above them and the columns did not line up. 640px aligns them.
 * Genuinely wide layouts (comparison table, before/after, bucket pair, the
 * two and three column strips) keep their extra room below.
 * ----------------------------------------------------------------------- */
.mastermind-v2-page ol.blocks,.mastermind-v2-page ul.get,.mastermind-v2-page .ten,.mastermind-v2-page .trust,.mastermind-v2-page .tcase,.mastermind-v2-page .phase{
  max-width:640px;margin-left:auto;margin-right:auto}

/* ---- One measure for everything ----------------------------------------
 * The current pages put every block inside .shorter-content-width (640px):
 * copy, headings, images, quotes and lists all share one column edge. This
 * page was letting the wider grids (comparison table, before/after, the
 * three column strip, the 10-80-10 boxes) run to 960px, which is what kept
 * reading as misaligned against the paragraphs.
 * Every direct child of .desc is now on the 640px measure, including the few
 * figures that carry an inline max-width. The grids inside them still lay out
 * normally, just within the column, and they stack on mobile as before.
 * ----------------------------------------------------------------------- */
.mastermind-v2-page section.content-section .desc > *{
  max-width:640px !important;margin-left:auto !important;margin-right:auto !important}

/* ---- Comparison table was clipping -------------------------------------
 * .cmp is capped at the 640px measure with overflow:hidden, but its grid rows
 * measured 668px, so 28px of the right hand column was being cut off. Grid
 * items default to min-width:auto (min-content), so the columns would not
 * shrink to the container. min-width:0 lets them fit, and the cells wrap.
 * ----------------------------------------------------------------------- */
.mastermind-v2-page .cmp .row > div{min-width:0;overflow-wrap:anywhere}
.mastermind-v2-page .cmp{overflow:visible}

/* The comparison grid still resolved to an explicit 668px inside its 640px
 * box, so constrain it outright. Cells keep min-width:0 so the columns wrap
 * instead of forcing the row wider than the column. */
.mastermind-v2-page .cmp{width:100%;max-width:640px;overflow:hidden}
.mastermind-v2-page .cmp .row{width:100% !important;max-width:100% !important}
.mastermind-v2-page .cmp .row > div{min-width:0;overflow-wrap:anywhere;word-break:normal}

/* ---- Bootstrap .row collision ------------------------------------------
 * The handoff's comparison table marks its lines up as .row, which is also
 * Bootstrap's grid class. The theme's Bootstrap gives .row negative gutters
 * (margin: 0 -15px), which dragged every table line 15px left of its own
 * container and pushed the right column outside the column edge.
 * Neutralise the gutters for handoff .row elements inside the copy only; the
 * page's own layout rows (section > .container > .row) are untouched.
 * ----------------------------------------------------------------------- */
.mastermind-v2-page .desc .row{margin-left:0 !important;margin-right:0 !important;width:100% !important;max-width:100% !important}

/* ---- Hero bottom spacing ------------------------------------------------
 * The theme gives .page-title-content 100px of bottom padding, which suits its
 * image-backed heroes but left a large empty band under this one: 100px there
 * plus 52px on the section plus the trust bar's own 24px came to 176px of dead
 * space. Trimmed to a normal hero gap; the top of the hero is untouched.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page .page-title-area .page-title-content{padding-bottom:24px}
.mastermind-v2-page .page-title-area .desc > *:last-child{margin-bottom:0}
@media(max-width:900px){
  .mastermind-v2-page .page-title-area .page-title-content{padding-bottom:16px}
}

/* Tighten the caption to its image. Note the diagram files carry their own
 * internal whitespace below the artwork, so part of the visible gap is baked
 * into the image and can only be removed by recropping the asset. */
.mastermind-v2-page figure figcaption,
.mastermind-v2-page figure .illus-cap{margin-top:6px}
.mastermind-v2-page figure{margin-bottom:22px}

/* Earlier caption rules use .sales-visual/.photo/.sales-illustration, which
 * outrank a plain `figure figcaption`, so match that depth to actually tighten
 * the gap between a diagram and its caption. */
.mastermind-v2-page figure.sales-visual figcaption,
.mastermind-v2-page figure.photo figcaption,
.mastermind-v2-page figure.sales-illustration figcaption,
.mastermind-v2-page figure.sales-illustration .illus-cap,
.mastermind-v2-page figure figcaption{margin-top:6px}

/* ---- Quote card: filled navy panel --------------------------------------
 * Back to the handoff's solid navy treatment rather than the light box with a
 * green rule. The reason it was changed originally was that the theme forces
 * paragraphs to near-black, so the quote rendered black on navy; every colour
 * inside is therefore set explicitly here so that cannot recur.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page .quotecard,.mastermind-v2-page .admit{
  background:#1E3A5F;border:0;border-left:0;border-radius:14px;
  padding:34px 40px;margin:28px auto;max-width:640px;text-align:center;color:#fff}
.mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p,
.mastermind-v2-page .quotecard blockquote,.mastermind-v2-page .admit blockquote{
  color:#fff;font-family:"Roboto",sans-serif;font-style:normal;font-weight:600;
  font-size:19px;line-height:1.5;margin:0 0 12px;text-align:center;max-width:none}
.mastermind-v2-page .quotecard .a,.mastermind-v2-page .admit .a{
  display:block;color:#5FD3A0;font-family:"Roboto",sans-serif;font-size:12.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-style:normal;
  margin-top:10px;text-align:center}

/* ---- Restore list bullets ----------------------------------------------
 * The theme sets a global `ul li { list-style-type: none }`, which stripped
 * the markers from the handoff's prose lists (the before/after columns read
 * as loose lines instead of bullets). Restore discs for those, while leaving
 * the deliberately unmarked component lists (ul.get, ol.blocks, ul.blocks,
 * .who, .route) alone, since they supply their own numbers or icons.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page .desc .ba ul > li,
.mastermind-v2-page .desc .callout ul > li,
.mastermind-v2-page .desc .feat ul > li,
.mastermind-v2-page .desc ul:not([class]) > li{list-style-type:disc}
.mastermind-v2-page .desc .ba ul,
.mastermind-v2-page .desc ul:not([class]){padding-left:20px;margin:0 0 10px}
.mastermind-v2-page .desc .ba ul > li,
.mastermind-v2-page .desc ul:not([class]) > li{margin:6px 0}

/* ---- Headings match the site -------------------------------------------
 * Macauley, Slack: "some of the text doesn't seem to match the sites font".
 * Measured on /business-mentorship/: section headings render Roboto 700 at
 * 33px. Oswald is loaded by the theme but is not used for content headings,
 * so the condensed Oswald used here read as a different typeface. Every
 * heading, quote and label on this page is now the site's Roboto.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page h1,.mastermind-v2-page h2,.mastermind-v2-page h3,.mastermind-v2-page h4,
.mastermind-v2-page h2.title,.mastermind-v2-page .chip,.mastermind-v2-page summary,
.mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p,.mastermind-v2-page .ba blockquote,.mastermind-v2-page .feature .q{
  font-family:"Roboto",sans-serif}
.mastermind-v2-page section.content-section h2.title{font-weight:700}
.mastermind-v2-page h3{font-weight:700}

/* ---- Hero top spacing ---------------------------------------------------
 * The theme header is position:absolute over the hero and measures 189px,
 * though only 93px of that is the logo and nav (48px padding top and bottom).
 * The theme clears it with 190px of top padding on .page-title-content, which
 * left a large gap above the headline. The logo's lowest point is y=137, so
 * 140px still clears the visible header comfortably while removing ~50px of
 * dead space. Mobile uses a shorter header, so it gets a smaller value.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page .page-title-area .page-title-content{padding-top:140px}
@media(max-width:991px){
  .mastermind-v2-page .page-title-area .page-title-content{padding-top:110px}
}
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .page-title-content{padding-top:95px}
}

/* ---- Body text matched to /business-mentorship/ -------------------------
 * Measured on the reference page: body copy is Roboto 400 at 14.4px with a
 * 25.2px line height. This page was running 17px, which was the one text role
 * still differing from the current pages. Everything else (hero label 16/400,
 * hero title 48/700, hero body 22/400, section title 33/700, FAQ 16/400)
 * already matched.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page section.content-section .desc>p,
.mastermind-v2-page section.content-section .desc>ul,
.mastermind-v2-page section.content-section .desc>ol,
.mastermind-v2-page section.content-section .desc li{
  font-size:14.4px;line-height:25.2px}

/* ---- Body copy: corrected to the site's real value ----------------------
 * An earlier pass set this to 14.4px, taken from a single sample that turned
 * out to be an image caption. Measuring every paragraph on
 * /business-mentorship/ and weighting by how much text each style carries:
 *   18px   / lh 31.5px / 400  -> 86 percent of body text (152 paragraphs)
 *   14.4px / lh 25.2px / 400  -> 11 percent, image captions only
 *   20px   / lh 32px   / 400  ->  3 percent, pull quotes
 * So body copy is 18px. Captions stay at 14.4px, and quotes sit at 20px.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page section.content-section .desc>p,
.mastermind-v2-page section.content-section .desc>ul,
.mastermind-v2-page section.content-section .desc>ol,
.mastermind-v2-page section.content-section .desc li{
  font-size:18px;line-height:31.5px;font-weight:400}
.mastermind-v2-page section.content-section .desc figcaption,
.mastermind-v2-page section.content-section .desc .illus-cap{
  font-size:14.4px;line-height:25.2px}
.mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p{font-size:20px;line-height:32px}

/* ================= Typography and spacing, matched to /business-mentorship/
 * Measured on the live reference page, sampling every instance rather than
 * the first match, so the dominant value wins:
 *   hero label    Roboto 16px/17.6  w400  mb 25px   #fff
 *   hero title    Roboto 48px/48    w700  mb 23px   #fff   letter-spacing .1px
 *   hero body     Roboto 22px/28.6  w400  mb 40px   #fff
 *   section title Roboto 33px/36.3  w700  mb 24px   #000   (30 of 30 black)
 *   body copy     Roboto 18px/31.5  w400  mb 20px   #000   (109 of 122 black)
 *   list item     Roboto 18px/20    w400  mb 15px   #252525
 *   caption       Roboto 14.4px/25.2 w400 mt 6 mb 20 #555
 *   accordion Q   Roboto 16px/17.6  w400            #212529
 *   accordion A   Roboto 16px/28    w400            #212529
 *   measure       640px            section pad 60px
 * The headings and body were previously navy and grey here; the site uses
 * black for both, so that is corrected.
 * ========================================================================= */
.mastermind-v2-page section.content-section h2.title{
  font-family:"Roboto",sans-serif;font-size:33px;line-height:36.3px;font-weight:700;
  color:#000;margin:0 0 24px}
.mastermind-v2-page section.content-section h3,
.mastermind-v2-page section.content-section h4{
  font-family:"Roboto",sans-serif;font-weight:700;color:#000;line-height:1.3;margin:28px auto 12px}
.mastermind-v2-page section.content-section h3{font-size:22px}
.mastermind-v2-page section.content-section h4{font-size:19px}

.mastermind-v2-page section.content-section .desc>p{
  font-family:"Roboto",sans-serif;font-size:18px;line-height:31.5px;font-weight:400;
  color:#000;margin:0 0 20px}
.mastermind-v2-page section.content-section .desc>ul,
.mastermind-v2-page section.content-section .desc>ol{margin:0 0 20px}
.mastermind-v2-page section.content-section .desc li{
  font-family:"Roboto",sans-serif;font-size:18px;line-height:20px;font-weight:400;
  color:#252525;margin:0 0 15px}

.mastermind-v2-page section.content-section figcaption,
.mastermind-v2-page section.content-section .illus-cap{
  font-family:"Roboto",sans-serif;font-size:14.4px;line-height:25.2px;font-weight:400;
  color:#555;margin:6px 0 20px}

.mastermind-v2-page .page-title-area h2.title{
  font-family:"Roboto",sans-serif;font-size:48px;line-height:48px;font-weight:700;
  letter-spacing:.1px;color:#fff;margin:0 0 23px}
.mastermind-v2-page .page-title-content h1{margin:0 auto 25px}
.mastermind-v2-page .page-title-content .desc>p{
  font-family:"Roboto",sans-serif;font-size:22px;line-height:28.6px;font-weight:400;
  color:#fff;margin:0 0 40px}

.mastermind-v2-page .accordion-button{font-family:"Roboto",sans-serif;font-size:16px;line-height:17.6px;font-weight:400;color:#212529}
.mastermind-v2-page .accordion-body{font-family:"Roboto",sans-serif;font-size:16px;line-height:28px;font-weight:400;color:#212529}

/* The generated headings carry Bootstrap's .mb-0 utility, which sets
 * margin-bottom:0 !important and so beat the spacing above. The reference page
 * puts 24px under a section title and 40px under the hero paragraph, so those
 * are restored here at the same weight. The hero label's line height is set to
 * the site's 17.6px rather than the 1.2 ratio used for the pill. */
.mastermind-v2-page section.content-section h2.title{margin-bottom:24px !important}
.mastermind-v2-page .page-title-area .page-title-content .desc>p{margin-bottom:40px !important}
.mastermind-v2-page .page-title-content h1{line-height:17.6px}

/* The margin shorthand in the spec block above reset the auto left/right
 * margins that centre each block in the 640px column, which pushed the section
 * titles and copy to the container's left edge. Vertical spacing stays exactly
 * as measured; horizontal margins go back to auto. */
.mastermind-v2-page section.content-section h2.title{margin-left:auto;margin-right:auto}
.mastermind-v2-page section.content-section h3,
.mastermind-v2-page section.content-section h4{margin-left:auto;margin-right:auto}
.mastermind-v2-page section.content-section .desc>p,
.mastermind-v2-page section.content-section .desc>ul,
.mastermind-v2-page section.content-section .desc>ol{margin-left:auto;margin-right:auto}
.mastermind-v2-page section.content-section figcaption,
.mastermind-v2-page section.content-section .illus-cap{margin-left:auto;margin-right:auto}
.mastermind-v2-page .page-title-area .page-title-content .desc>p{margin-left:auto;margin-right:auto}

/* Hero headline line height.
 * The reference page sets 48px/48px, a 1.0 ratio. That is tight for a headline
 * that wraps to three lines, so this one is opened to 1.15 (55.2px) at John's
 * request. This is a deliberate, small departure from the measured site value;
 * everything else in the hero still matches it exactly. */
.mastermind-v2-page .page-title-area h2.title{line-height:1.15}
@media(max-width:767px){
  .mastermind-v2-page .page-title-area h2.title{line-height:1.2}
}

/* ---- Responsive type scale, measured off /business-mentorship/ -----------
 * The earlier spec was taken at desktop width only. The reference page also
 * scales down, and these pages were not, so headings stayed at 48px on a
 * phone. Measured values:
 *        width    hero title     section title   body copy
 *        1440     48 / 48        33 / 36.3       18 / 31.5
 *         710     48 / 48        33 / 36.3         -
 *         540     48 / 48        26 / 28.6         -
 *         480     26 / 26          -               -
 *         380     26 / 26        26 / 28.6       16 / 28
 * So the section title and body step down at about 575px, and the hero title
 * at about 500px. The hero keeps the slightly opened line height John asked
 * for rather than the site's 1.0.
 * ------------------------------------------------------------------------- */
@media(max-width:575px){
  .mastermind-v2-page section.content-section h2.title{font-size:26px;line-height:28.6px}
  .mastermind-v2-page section.content-section .desc>p{font-size:16px;line-height:28px}
  .mastermind-v2-page section.content-section .desc li{font-size:16px;line-height:24px}
  .mastermind-v2-page section.content-section h3{font-size:20px}
  .mastermind-v2-page section.content-section h4{font-size:18px}
}
@media(max-width:500px){
  .mastermind-v2-page .page-title-area h2.title{font-size:26px;line-height:1.2}
  .mastermind-v2-page .page-title-content .desc>p{font-size:18px;line-height:26px}
}

/* ---- Trust bar: works with or without the slick slider ------------------
 * The logo strip reuses the theme's .trusted-by-items-slider, which the theme
 * normally turns into a slick carousel. On the live site that initialisation
 * does not always run for this page (deferred or minified JS), and the
 * uninitialised markup collapsed into a very tall block with a large empty
 * area beneath the logos.
 * This lays the items out as a simple centred flex row by default, which is
 * correct on its own, and hands layout back to slick the moment it does
 * initialise (.slick-initialized). Either way the strip is one tidy row.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page .trusted-by-section .trusted-by-items{min-height:0}
.mastermind-v2-page .trusted-by-items-slider{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:20px 40px;margin:0}
.mastermind-v2-page .trusted-by-items-slider > .item{flex:0 0 auto;width:auto;margin:0}
.mastermind-v2-page .trusted-by-items-slider img{
  display:block;max-height:80px;width:auto;max-width:150px;object-fit:contain}
/* once slick takes over, stop overriding its layout */
.mastermind-v2-page .trusted-by-items-slider.slick-initialized{display:block}
.mastermind-v2-page .trusted-by-items-slider.slick-initialized > .item{width:100%}

/* Slick writes inline width:100%;display:inline-block onto each .item. If it
 * later fails or is torn down, those inline styles remain and push every logo
 * onto its own row. While the slider is NOT initialised, override them so the
 * strip stays a single centred row. !important is needed to beat inline style. */
.mastermind-v2-page .trusted-by-items-slider:not(.slick-initialized) > .item{
  width:auto !important;display:block !important;flex:0 0 auto !important}
.mastermind-v2-page .trusted-by-items-slider:not(.slick-initialized){
  display:flex !important;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 40px}

/* Size the fallback row so all six logos fit on one line at desktop:
 * 6 x 120px + 5 x 24px gaps = 840px, well inside the 1170px container.
 * Below 700px they are allowed to wrap onto two rows. */
.mastermind-v2-page .trusted-by-items-slider:not(.slick-initialized){
  gap:16px 24px;flex-wrap:nowrap}
.mastermind-v2-page .trusted-by-items-slider:not(.slick-initialized) > .item{
  max-width:120px}
.mastermind-v2-page .trusted-by-items-slider:not(.slick-initialized) img{
  max-height:64px;max-width:120px;width:auto;height:auto;object-fit:contain}
@media(max-width:700px){
  .mastermind-v2-page .trusted-by-items-slider:not(.slick-initialized){flex-wrap:wrap}
  .mastermind-v2-page .trusted-by-items-slider:not(.slick-initialized) > .item{max-width:90px}
  .mastermind-v2-page .trusted-by-items-slider:not(.slick-initialized) img{max-width:90px;max-height:52px}
}


/* ---- Trust bar: force the section to hug its content --------------------
 * On the live site this section renders far taller than locally, leaving a
 * large empty band under the logos. Local and live run the same theme CSS, so
 * the extra height comes from something only present on live (Customizer CSS,
 * a cached stylesheet, or the theme's overlap spacing for the section that
 * normally follows it).
 * Rather than guess the source, every property that could add height is reset
 * here with !important so the section is only as tall as the heading plus the
 * logo row. Scoped to this page, so the site's own trusted-by sections are
 * untouched.
 * ------------------------------------------------------------------------- */
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section{
  padding-top:40px !important;
  padding-bottom:40px !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden;
}
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section::before,
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section::after{
  display:none !important;
  content:none !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section > .container,
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-items,
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-items-slider,
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-items-slider .slick-list,
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-items-slider .slick-track{
  min-height:0 !important;
  height:auto !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
/* carousel dots/arrows reserve space even when empty */
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section .slick-dots,
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section .slick-arrow{
  display:none !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section h6{
  margin-bottom:24px !important;
}

/* ---- The actual cause of the tall trust bar -----------------------------
 * DevTools on the live page showed div.slick-slide measuring 179 x 1446px.
 * slick.css sets `.slick-slide { height: 100% }`, and with the track/list
 * heights resolving oddly on live, each slide stretched to 1446px and pushed
 * the whole section down. The earlier overrides reset .slick-list and
 * .slick-track but never .slick-slide itself, which is why they had no
 * effect. Forcing the slides (and slick's inner wrapper div) to auto height
 * fixes it at source.
 * ------------------------------------------------------------------------- */
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section .slick-slide,
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section .slick-slide > div,
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section .slick-slide .item{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .trusted-by-section .slick-slide img{
  max-height:80px !important;
  width:auto !important;
  height:auto !important;
}

/* ---- Hero padding: beat the theme's .content-style2 rule ----------------
 * The theme sets `.page-title-area .page-title-content.content-style2
 * { padding: 190px 0 100px }` (three classes). The earlier override here used
 * three classes too, and the theme stylesheet loads after this one, so the
 * tie went to the theme and the 190px stayed. Including .content-style2 makes
 * this four classes, so it wins on specificity regardless of load order.
 * Top is 140px as requested; bottom keeps the reduced 24px.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .page-title-area .page-title-content.content-style2{
  padding:140px 0 24px}
@media(max-width:991px){
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{padding:110px 0 20px}
}
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{padding:95px 0 16px}
}

/* ---- Case study boxes matched to the comparison table -------------------
 * Macauley, Slack 22 Sep: "Some sections need to be a little smaller text
 * like in these boxes. Same size as the table I think would be good."
 * The comparison table cells render at 14.5px / 23.49px. The before/after
 * columns were inheriting the 18px body size with a tight 20px line height,
 * so they read much larger than the table beside them. Both now sit on the
 * table's size and rhythm.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .desc .ba li,
.mastermind-v2-page .desc .ba ul li,
.mastermind-v2-page .desc .ba p,
.mastermind-v2-page .desc .ba .col li,
.mastermind-v2-page .desc .ba .col p{
  font-size:14.5px !important;
  line-height:23.49px !important;
  margin-bottom:10px;
}
.mastermind-v2-page .desc .ba blockquote{
  font-size:16px;
  line-height:26px;
}
@media(max-width:575px){
  .mastermind-v2-page .desc .ba li,
  .mastermind-v2-page .desc .ba ul li,
  .mastermind-v2-page .desc .ba p,
  .mastermind-v2-page .desc .ba .col li,
  .mastermind-v2-page .desc .ba .col p{
    font-size:14px !important;
    line-height:22px !important;
  }
}

/* ---- Trim the blank space baked into the diagram files -------------------
 * The visible gap under a diagram was only 6px of CSS. The rest is empty
 * space inside the image file itself. Measured per image by scanning for
 * blank pixel rows at the bottom:
 *   03-visit-maths-comparison.webp          72 blank rows trimmed
 *   04-six-stages-v-storyboard.webp         71 blank rows trimmed
 *   05-operating-system-storyboard-roles.webp 128 blank rows trimmed
 *   06-eight-building-blocks.webp           71 blank rows trimmed
 *   07-ten-eighty-ten.webp                  77 blank rows trimmed
 * Photos have none, so they are left alone. Each diagram is given an
 * aspect-ratio matching its content area with object-fit:cover and
 * object-position:top, which crops the blank strip and scales responsively,
 * rather than a fixed negative margin that would break at other widths.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page figure img[src*="03-visit-maths-comparison"]{aspect-ratio:1536 / 952;object-fit:cover;object-position:top}
.mastermind-v2-page figure img[src*="04-six-stages-v-storyboard"]{aspect-ratio:1536 / 953;object-fit:cover;object-position:top}
.mastermind-v2-page figure img[src*="05-operating-system-storyboard-roles"]{aspect-ratio:1536 / 896;object-fit:cover;object-position:top}
.mastermind-v2-page figure img[src*="06-eight-building-blocks"]{aspect-ratio:1254 / 1183;object-fit:cover;object-position:top}
.mastermind-v2-page figure img[src*="07-ten-eighty-ten"]{aspect-ratio:1600 / 723;object-fit:cover;object-position:top}

/* ---- Section labels: highlight the index --------------------------------
 * Macauley asked for the number picked out and the label a little darker.
 * The index now sits in navy at bold weight so it reads as a marker, and the
 * label text moves from the light #3CC287 to the site's deeper accent green
 * #1E8C5E, which is easier to read at this small uppercase size.
 * Three labels have no number ("The honest question", "The vision",
 * "Next step"); they simply render without the marker.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .sec-label{color:#1E8C5E}
.mastermind-v2-page .sec-label .n{
  color:#153365;
  font-weight:700;
  margin-right:7px;
}

/* ---- Case study pull quote ----------------------------------------------
 * At 16px the quote sat only 1.5px above the 14.5px box text, so it read as
 * more of the same rather than as a quote. Lifted to 18.5px with a matching
 * line height, which gives it presence without competing with the 22px case
 * heading above it. The attribution moves 12px -> 13px so the name stays
 * legible while remaining clearly subordinate.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .desc .ba blockquote{
  font-size:18.5px;
  line-height:29px;
}
.mastermind-v2-page .desc .ba blockquote .a{
  font-size:13px;
  line-height:20px;
}
@media(max-width:575px){
  .mastermind-v2-page .desc .ba blockquote{font-size:17px;line-height:27px}
}

/* ---- Quote card back to the handoff's original treatment ----------------
 * Reverting the filled navy panel: white card, green left rule, text left
 * aligned, as in the designer's standalone preview. Colours are set
 * explicitly because the theme forces paragraphs to near-black, which is what
 * made the navy version unreadable in the first place.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .quotecard,.mastermind-v2-page .admit{
  background:#FBFBFA !important;
  border:1px solid #E7E7E1 !important;
  border-left:4px solid #3EBF84 !important;
  border-radius:12px !important;
  padding:26px 30px !important;
  text-align:left !important;
  color:#14202B !important;
}
.mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p,
.mastermind-v2-page .quotecard blockquote,.mastermind-v2-page .admit blockquote{
  color:#14202B !important;
  font-style:italic !important;
  font-weight:400 !important;
  text-align:left !important;
  font-size:18.5px !important;
  line-height:29px !important;
  margin:0 0 10px !important;
}
.mastermind-v2-page .quotecard .a,.mastermind-v2-page .admit .a{
  display:block !important;
  color:#586374 !important;
  font-size:13px !important;
  font-weight:400 !important;
  font-style:normal !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-align:left !important;
  margin-top:8px !important;
}
@media(max-width:575px){
  .mastermind-v2-page .quotecard,.mastermind-v2-page .admit{padding:20px 22px !important}
  .mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p{font-size:17px !important;line-height:27px !important}
}

/* ---- Inline links in body copy ------------------------------------------
 * The handoff CSS sets `a { color: inherit }` with no underline, so a real
 * link like "Go-To Clinic Mentorship" (which points at /mentorship/) read as
 * plain text. Body links now carry an underline so they are recognisable.
 * Buttons and CTAs are excluded, as are the hero's .hl highlight rules which
 * already have their own underline treatment.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .desc p a:not(.btn):not(.cta):not(.hl),
.mastermind-v2-page .desc li a:not(.btn):not(.cta):not(.hl),
.mastermind-v2-page .desc blockquote a:not(.btn):not(.cta):not(.hl),
.mastermind-v2-page .accordion-body a:not(.btn):not(.cta){
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.mastermind-v2-page .desc p a:not(.btn):not(.cta):not(.hl):hover,
.mastermind-v2-page .desc li a:not(.btn):not(.cta):not(.hl):hover,
.mastermind-v2-page .accordion-body a:not(.btn):not(.cta):hover{
  color:#1E8C5E;
}

/* ---- Section labels reverted --------------------------------------------
 * Reverted at John's request: the index is no longer picked out in navy and
 * the label goes back to the original single green. The <span class="n">
 * wrapper stays in the markup but carries no styling of its own, so the label
 * renders exactly as it did before, e.g. "12 WHO IT'S FOR" in one colour.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .sec-label{color:#3CC287}
.mastermind-v2-page .sec-label .n{
  color:inherit;
  font-weight:inherit;
  margin-right:0;
}

/* ---- Quote card matched to the reference preview ------------------------
 * Comparing side by side with the handoff's standalone preview, the quote is
 * a filled navy panel: white text centred, green uppercase attribution,
 * rounded corners. Applying that here.
 * Every colour is stated explicitly because the theme forces paragraphs to
 * near-black, which is what made an earlier navy version render black on navy.
 * These rules sit last in the file so they supersede the white/left-rule
 * treatment above.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .quotecard,.mastermind-v2-page .admit{
  background:#1E3A5F !important;
  border:0 !important;
  border-left:0 !important;
  border-radius:14px !important;
  padding:34px 40px !important;
  margin:28px auto !important;
  max-width:640px !important;
  text-align:center !important;
  color:#fff !important;
}
.mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p,
.mastermind-v2-page .quotecard blockquote,.mastermind-v2-page .admit blockquote{
  color:#fff !important;
  font-style:italic !important;
  font-weight:400 !important;
  font-size:19px !important;
  line-height:30px !important;
  text-align:center !important;
  margin:0 0 12px !important;
  max-width:none !important;
}
.mastermind-v2-page .quotecard .a,.mastermind-v2-page .admit .a{
  display:block !important;
  color:#5FD3A0 !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  font-style:normal !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  text-align:center !important;
  margin-top:12px !important;
}
@media(max-width:575px){
  .mastermind-v2-page .quotecard,.mastermind-v2-page .admit{padding:24px 22px !important}
  .mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p{font-size:17px !important;line-height:27px !important}
}

/* Quote text enlarged to sit closer to the reference, which runs this at
 * clamp(20px, 2.6vw, 27px) and lands near 27px on desktop. 24px keeps it
 * clearly bigger than body copy without crowding the 640px card. */
.mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p,
.mastermind-v2-page .quotecard blockquote,.mastermind-v2-page .admit blockquote{
  font-size:24px !important;
  line-height:34px !important;
}
@media(max-width:575px){
  .mastermind-v2-page .quotecard p,.mastermind-v2-page .admit p,
  .mastermind-v2-page .quotecard blockquote,.mastermind-v2-page .admit blockquote{
    font-size:19px !important;
    line-height:29px !important;
  }
}

/* ---- Trust bar: keep logos inside their slick slides --------------------
 * Once slick initialises, each slide is only as wide as the viewport allows
 * (about 89px at 440px wide with 3 slides showing), but the logo rule above
 * lets images grow to 150px, so they spilled into their neighbours with no
 * gap between them. Cap each logo to its slide and pad the slide so there is
 * always clear space between logos.
 * ------------------------------------------------------------------------ */
.mastermind-v2-page .trusted-by-items-slider.slick-initialized .item{
  padding:0 12px;box-sizing:border-box}
.mastermind-v2-page .trusted-by-items-slider.slick-initialized img{
  max-width:100%;max-height:80px;width:auto;height:auto;margin:0 auto}
@media(max-width:575px){
  .mastermind-v2-page .trusted-by-items-slider.slick-initialized .item{padding:0 8px}
  .mastermind-v2-page .trusted-by-items-slider.slick-initialized img{max-height:60px}
}

/* ---- Mobile hero: more air under the header, bigger CTA -----------------
 * Same treatment as the Solo Clinic Owner page: a clear gap between the logo
 * and the "The 'Go-To' Clinic Mastermind" pill, and a larger Schedule a Demo
 * pill so it reads as the primary action.
 * ------------------------------------------------------------------------ */
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{padding-top:94px}
  .mastermind-v2-page .page-title-content .btn.em{padding:17px 46px;font-size:17px}
}

/* ---- Result cards (Dan / Cian / Tom) ------------------------------------
 * Replaces the plain grey strip with designed cards: coloured left rule,
 * quote badge, location pill, name, and the key numbers picked out as tinted
 * pills (navy = starting point, green = the result). The cards sit in the
 * 640px text column, so each is only ~200px wide; type and badges are sized
 * down to suit. Palette is the page's own: --navy #25476A, --emer #1E8A5A,
 * --emer-br #3CC287, --wash #EDF1F5. Colours are explicit because the theme
 * forces paragraphs to near-black.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .strip.strip-cards{gap:14px;margin:28px 0 8px}
.mastermind-v2-page .strip.strip-cards > .sc{
  --acc:#25476A;--acc-soft:#EDF1F5;--acc-wave:rgba(37,71,106,.06);
  position:relative;overflow:hidden;
  background:#fff;border:1px solid #E3E8EE;border-top:4px solid var(--acc);
  border-radius:14px;padding:16px 16px 20px;
  box-shadow:0 6px 18px rgba(20,32,43,.05);
  font-size:14px;line-height:1.55}
.mastermind-v2-page .strip.strip-cards > .sc-green{--acc:#3CC287;--acc-soft:#E4F6EE;--acc-wave:rgba(60,194,135,.08)}
.mastermind-v2-page .strip.strip-cards > .sc-amber{--acc:#1B3651;--acc-soft:#EDF1F5;--acc-wave:rgba(27,54,81,.06)}
.mastermind-v2-page .strip.strip-cards > .sc::after{
  content:"";position:absolute;right:-30px;bottom:-46px;width:70%;height:90px;
  background:var(--acc-wave);border-radius:100% 0 0 0 / 100% 0 0 0;pointer-events:none}
.mastermind-v2-page .strip.strip-cards > .sc > *{position:relative;z-index:1}
.mastermind-v2-page .strip.strip-cards .sc-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px !important}
.mastermind-v2-page .strip.strip-cards .sc-q{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;border-radius:50%;background:var(--acc-soft);color:var(--acc);font-size:19px;line-height:1}
.mastermind-v2-page .strip.strip-cards .sc-loc{
  display:inline-flex;align-items:center;gap:4px;min-width:0;
  background:#F4F6F9;color:#586374;border-radius:999px;padding:3px 9px;
  font-size:11.5px;font-weight:500;line-height:1.3;white-space:nowrap}
.mastermind-v2-page .strip.strip-cards .sc-loc i{color:#3CC287;font-size:11px}
.mastermind-v2-page .strip.strip-cards .sc-name{
  color:#25476A !important;font-size:18px !important;font-weight:700 !important;
  line-height:1.2 !important;margin:0 0 6px !important;text-align:left !important}
.mastermind-v2-page .strip.strip-cards .sc-text{
  color:#14202B !important;font-size:14px !important;line-height:1.6 !important;
  margin:0 !important;text-align:left !important}
.mastermind-v2-page .strip.strip-cards .sc-num{
  display:inline;background:#EDF1F5;color:#25476A;font-weight:700;
  border-radius:5px;padding:1px 5px;white-space:nowrap;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.mastermind-v2-page .strip.strip-cards .sc-num.up{background:#E4F6EE;color:#1E8A5A}
.mastermind-v2-page .strip.strip-cards .sc-num.down{background:#EDF1F5;color:#25476A}
@media(max-width:700px){
  .mastermind-v2-page .strip.strip-cards{gap:12px}
  .mastermind-v2-page .strip.strip-cards > .sc{padding:16px 18px 18px}
  .mastermind-v2-page .strip.strip-cards .sc-text{font-size:15px !important}
}

/* ---- Dave O'Sullivan quote: light card ----------------------------------
 * Replaces the navy panel with the designed light card: a round quote badge
 * sitting on the top edge between two hairlines, navy italic quote with
 * "ACTUALLY" in green, a short green rule, and a spaced uppercase name.
 * Soft blue / green waves in opposite corners. Scoped to .qc-light so the
 * .admit quote further down keeps its current treatment; the extra class
 * lets these beat the earlier !important quotecard rules on specificity.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .quotecard.qc-light{
  position:relative !important;overflow:visible !important;
  background:#FAFBFD !important;border:1px solid #E8EDF3 !important;border-left:1px solid #E8EDF3 !important;
  border-radius:18px !important;box-shadow:0 14px 40px rgba(20,32,43,.07) !important;
  max-width:1000px !important;margin:64px auto 32px !important;padding:50px 44px 32px !important;
  text-align:center !important;
  background-image:
    radial-gradient(120% 90% at 0% 0%, rgba(37,71,106,.06) 0 28%, transparent 28.5%),
    radial-gradient(120% 90% at 100% 100%, rgba(60,194,135,.08) 0 24%, transparent 24.5%) !important}
.mastermind-v2-page .quotecard.qc-light .qc-mark{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:#fff;
  box-shadow:0 6px 20px rgba(20,32,43,.10);border:1px solid #E8EDF3;
  display:flex;align-items:center;justify-content:center;color:#3CC287;font-size:28px;line-height:1}
/* hairlines either side of the badge */
.mastermind-v2-page .quotecard.qc-light::before{
  content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:min(460px,70%);height:2px;
  background:linear-gradient(90deg,#E3E8EF 0 40%,transparent 40% 60%,#E3E8EF 60% 100%)}
.mastermind-v2-page .quotecard.qc-light p{
  color:#25476A !important;font-style:italic !important;font-weight:400 !important;
  font-size:21px !important;line-height:1.55 !important;text-align:center !important;
  margin:0 auto 22px !important;max-width:820px !important}
.mastermind-v2-page .quotecard.qc-light .qc-hl{color:#1E8A5A;font-weight:700}
.mastermind-v2-page .quotecard.qc-light .a{
  color:#25476A !important;font-size:12px !important;font-weight:600 !important;
  letter-spacing:.28em !important;text-transform:uppercase !important;text-align:center !important;
  margin-top:0 !important}
.mastermind-v2-page .quotecard.qc-light .a::before{
  content:"";display:block;width:44px;height:3px;border-radius:3px;background:#3CC287;margin:0 auto 14px}
@media(max-width:767px){
  .mastermind-v2-page .quotecard.qc-light{padding:52px 24px 32px !important;margin:52px auto 24px !important}
  .mastermind-v2-page .quotecard.qc-light p{font-size:18px !important;line-height:1.55 !important}
  .mastermind-v2-page .quotecard.qc-light .qc-mark{width:48px;height:48px;font-size:24px}
  .mastermind-v2-page .quotecard.qc-light::before{top:22px}
  .mastermind-v2-page .quotecard.qc-light .a{letter-spacing:.2em !important;font-size:12px !important}
}

/* ---- Tighter title-to-content spacing -----------------------------------
 * Every section stacked three gaps between the title and its first image,
 * table or case: the h2's 24px bottom margin, the .desc 16px top padding,
 * and the first element's own top margin (20px+). That read as a ~60px hole
 * under each heading. The h2 margin drops to 6px and the first child of the
 * content loses its top margin, leaving a ~22px gap throughout.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page section.content-section h2.title{margin-bottom:6px !important}
.mastermind-v2-page section.content-section h2.title + .desc > :first-child,
.mastermind-v2-page section.content-section h2.title + .desc > :first-child > :first-child,
.mastermind-v2-page section.content-section h2.title + .desc > :first-child > :first-child > :first-child{
  margin-top:0 !important}

/* ---- Quote-only section: less padding around the card -------------------
 * The Dave O'Sullivan quote sits alone in its section, so section padding
 * (60px), the row's 24px bottom margin and the card's own margins added up
 * to ~130px of empty grey above and below it. */
.mastermind-v2-page section.content-section:has(.qc-light):not(:has(h2.title)){padding-top:34px;padding-bottom:34px}
.mastermind-v2-page section.content-section:has(.qc-light) .row.mb-4{margin-bottom:0 !important}
.mastermind-v2-page section.content-section:has(.qc-light) .desc{padding-top:0 !important}
.mastermind-v2-page .quotecard.qc-light{margin:30px auto 0 !important}
@media(max-width:767px){
  .mastermind-v2-page .quotecard.qc-light{margin:28px auto 0 !important}
}

/* ---- 10-80-10 cards ------------------------------------------------------
 * Replaces the three grey boxes with the designed rows: a large percentage
 * on the left over a soft tinted circle, a thin divider, then the heading
 * (with the percentage picked out in green) and the copy. The 80% row is the
 * hero, so its number is green and its circle a green tint; the two 10% rows
 * stay navy. Page palette only (--navy #25476A, --emer-br #3CC287).
 * `.ten div` in the handoff CSS pads and tints every nested div, so the
 * inner .tc-body is reset explicitly.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .ten.ten-cards{gap:12px;margin:14px 0 6px}
.mastermind-v2-page .ten.ten-cards > .tc{
  --tint:rgba(60,194,135,.10);
  position:relative;overflow:hidden;display:flex;align-items:center;gap:0;
  background:#FAFBFD;border:1px solid #E3E8EE;border-radius:14px;
  padding:18px 22px 18px 0;box-shadow:0 4px 14px rgba(20,32,43,.04)}
.mastermind-v2-page .ten.ten-cards > .tc-main{--tint:rgba(60,194,135,.14)}
.mastermind-v2-page .ten.ten-cards > .tc-last{--tint:rgba(37,71,106,.07)}
.mastermind-v2-page .ten.ten-cards > .tc::before{
  content:"";position:absolute;left:-70px;top:50%;transform:translateY(-50%);
  width:160px;height:160px;border-radius:50%;background:var(--tint);pointer-events:none}
.mastermind-v2-page .ten.ten-cards .tc-pct{
  position:relative;flex:0 0 118px;text-align:center;
  font-size:38px;font-weight:800;line-height:1;letter-spacing:-.02em;color:#1B3651;
  padding-right:18px;margin-right:20px;border-right:1px solid #DDE3EA;align-self:stretch;
  display:flex;align-items:center;justify-content:center}
.mastermind-v2-page .ten.ten-cards .tc-main .tc-pct{color:#3CC287}
.mastermind-v2-page .ten.ten-cards .tc-body{
  position:relative;flex:1 1 auto;min-width:0;padding:0 !important;background:none !important;border-radius:0 !important}
.mastermind-v2-page .ten.ten-cards .tc-h{
  color:#1B3651 !important;font-size:18px !important;font-weight:700 !important;
  line-height:1.25 !important;margin:0 0 4px !important;text-align:left !important}
.mastermind-v2-page .ten.ten-cards .tc-h span{color:#3CC287}
.mastermind-v2-page .ten.ten-cards .tc-p{
  color:#2B3A4B !important;font-size:14.5px !important;line-height:1.6 !important;
  margin:0 !important;text-align:left !important}
@media(max-width:575px){
  .mastermind-v2-page .ten.ten-cards > .tc{padding:14px 16px 14px 0}
  .mastermind-v2-page .ten.ten-cards > .tc::before{width:120px;height:120px;left:-56px}
  .mastermind-v2-page .ten.ten-cards .tc-pct{flex-basis:78px;font-size:26px;padding-right:12px;margin-right:14px}
  .mastermind-v2-page .ten.ten-cards .tc-h{font-size:16px !important}
  .mastermind-v2-page .ten.ten-cards .tc-p{font-size:14px !important}
}

/* 10-80-10 simplified: the big left-hand percentage, its divider and the
 * tinted circle behind it are removed. The heading already carries the
 * percentage in green. A slim left rule (navy, green for the 80% row) keeps
 * the hierarchy. */
.mastermind-v2-page .ten.ten-cards > .tc{padding:16px 20px;border-left:4px solid #25476A}
.mastermind-v2-page .ten.ten-cards > .tc-main{border-left-color:#3CC287}
.mastermind-v2-page .ten.ten-cards > .tc::before{content:none}
@media(max-width:575px){
  .mastermind-v2-page .ten.ten-cards > .tc{padding:14px 16px}
}

/* ---- Owners section CTA + case quote spacing ----------------------------
 * The CTA after the case studies sat button-left with its caption wrapping
 * awkwardly beside it on phones. It is now centred with the caption on its
 * own line below. Inline styles moved here (.cta-inline).
 * The case quote also sat tight against the Before/After panel above it;
 * it gets a clear gap. */
.mastermind-v2-page .desc p.cta-inline{margin-top:26px !important}
.mastermind-v2-page .desc p.cta-inline .soft{margin-left:12px}
.mastermind-v2-page .ba .tcase > blockquote{margin-top:22px !important}
@media(max-width:767px){
  .mastermind-v2-page .desc p.cta-inline{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    text-align:center !important;margin-top:32px !important}
  .mastermind-v2-page .desc p.cta-inline .soft{margin-left:0;font-size:15px}
  .mastermind-v2-page .ba .tcase > blockquote{margin-top:20px !important}
}

/* ---- Comparison table on phones: one mini table per row -----------------
 * Stacked, the rows read as a run of loose paragraphs ("Go-To Mastermind.
 * ...", "Others. ...") and no longer looked like a comparison. Below 680px
 * each row now becomes its own card: a navy header with the topic, then two
 * label | text lines (green tint for the Mastermind, red tint for others),
 * so it still reads as a table.
 * The label is the cell's ::before, laid out as the first grid column of the
 * cell itself; the cells hold plain text only, which becomes the second
 * column.
 * ------------------------------------------------------------------------- */
@media(max-width:680px){
  .mastermind-v2-page .cmp{border:0 !important;border-radius:0 !important;overflow:visible !important;
    display:flex;flex-direction:column;gap:14px}
  .mastermind-v2-page .cmp .row.head{display:none !important}
  .mastermind-v2-page .cmp .row{
    display:block !important;border:1px solid #E3E8EE !important;border-radius:12px;overflow:hidden;
    background:#fff;box-shadow:0 4px 14px rgba(20,32,43,.05);margin:0 !important}
  .mastermind-v2-page .cmp .row > .k{
    background:#25476A;color:#fff !important;font-weight:700 !important;font-size:15.5px !important;
    line-height:1.35;padding:11px 14px !important;border:0 !important}
  .mastermind-v2-page .cmp .row > .us,
  .mastermind-v2-page .cmp .row > .them{
    display:grid !important;grid-template-columns:38% 1fr;column-gap:12px;align-items:center;
    padding:11px 14px !important;font-size:14px !important;line-height:1.55;color:#2B3A4B !important;
    border-top:1px solid #E3E8EE !important}
  .mastermind-v2-page .cmp .row > .us{background:rgba(60,194,135,.07) !important}
  .mastermind-v2-page .cmp .row > .them{background:rgba(184,28,28,.05) !important}
  .mastermind-v2-page .cmp .row > .us::before,
  .mastermind-v2-page .cmp .row > .them::before{
    align-self:stretch;display:flex;align-items:center;
    padding-right:12px;border-right:1px solid #E3E8EE;font-weight:700;font-size:13.5px;line-height:1.35}
  .mastermind-v2-page .cmp .row > .us::before{content:"The 'Go-To' Clinic Mastermind" !important;color:#1E8A5A}
  .mastermind-v2-page .cmp .row > .them::before{content:"Other growth programmes" !important;color:#1B3651}
}

/* ---- Owner case studies: designed before/after cards --------------------
 * Heading: name bold navy, the one-line summary lighter beside it.
 * Before and After become two separate tinted cards with a gap, each with a
 * pill label, and every point gets a round icon (red cross / green tick) in
 * place of the bullet. The quote becomes a white card with an inset green
 * bar and a green quote mark. Page palette: navy #1B3651/#25476A, green
 * #3CC287/#1E8A5A; the before red matches the existing #B4544A label.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .ba .tcase > h3{
  color:#1B3651 !important;font-weight:500 !important;font-size:19px !important;line-height:1.35 !important;
  margin:0 0 14px !important}
.mastermind-v2-page .ba .tcase > h3 .tc-name{font-weight:800;font-size:22px;margin-right:4px}
.mastermind-v2-page .ba .pair{
  gap:14px !important;border:0 !important;border-radius:0 !important;overflow:visible !important}
.mastermind-v2-page .ba .col{border-radius:14px;padding:18px 20px 12px !important}
.mastermind-v2-page .ba .col.before{background:#FDF5F4 !important;border:1px solid #F4DEDB !important}
.mastermind-v2-page .ba .col.after{background:#F1FAF5 !important;border:1px solid #D4EFE1 !important}
.mastermind-v2-page .ba .col .t{
  display:inline-block;border-radius:8px;padding:5px 11px;margin-bottom:14px !important;
  font-size:12px !important;font-weight:600;letter-spacing:.1em !important}
.mastermind-v2-page .ba .before .t{background:#FBE3E0;color:#B4544A !important}
.mastermind-v2-page .ba .after .t{background:#DDF3E7;color:#1E8A5A !important}
.mastermind-v2-page .desc .ba ul{padding-left:0 !important;margin:0 !important}
.mastermind-v2-page .desc .ba ul > li{
  list-style:none !important;position:relative;padding-left:36px;
  margin:0 0 12px !important;color:#1B3651 !important;min-height:24px}
.mastermind-v2-page .desc .ba ul > li::before{
  position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"bootstrap-icons";font-size:12px;font-weight:700;line-height:1;font-style:normal}
.mastermind-v2-page .desc .ba .before ul > li::before{content:"\F659";background:#FBE3E0;color:#C0453A}
.mastermind-v2-page .desc .ba .after ul > li::before{content:"\F633";background:#DDF3E7;color:#1E8A5A;font-size:14px}
/* quote card */
.mastermind-v2-page .desc .ba .tcase > blockquote{
  position:relative;background:#fff;border:1px solid #E3E8EE !important;border-left:1px solid #E3E8EE !important;
  border-radius:14px;padding:20px 24px 18px 78px !important;
  color:#1B3651 !important;font-size:17px !important;line-height:1.6 !important}
.mastermind-v2-page .desc .ba .tcase > blockquote::before{
  content:"";position:absolute;left:20px;top:18px;bottom:18px;width:4px;border-radius:4px;background:#3CC287}
.mastermind-v2-page .desc .ba .tcase > blockquote::after{
  content:"\201C";position:absolute;left:36px;top:6px;
  font-family:Georgia,serif;font-style:normal;font-weight:700;font-size:52px;line-height:1;color:#3CC287}
.mastermind-v2-page .desc .ba .tcase > blockquote .a{color:#586374 !important;font-size:13px !important;margin-top:10px !important}
@media(max-width:575px){
  .mastermind-v2-page .ba .tcase > h3{font-size:16px !important}
  .mastermind-v2-page .ba .tcase > h3 .tc-name{font-size:19px;display:block;margin:0 0 2px}
  .mastermind-v2-page .ba .pair{gap:12px !important}
  .mastermind-v2-page .ba .col.before{border-bottom:1px solid #F4DEDB !important}
  .mastermind-v2-page .desc .ba .tcase > blockquote{padding:16px 18px 14px 58px !important;font-size:16px !important}
  .mastermind-v2-page .desc .ba .tcase > blockquote::before{left:16px}
  .mastermind-v2-page .desc .ba .tcase > blockquote::after{left:28px;font-size:40px;top:8px}
}

/* ---- Comparison table: designed desktop treatment -----------------------
 * Navy header with an icon per column (grid / green tick / red cross); each
 * topic gets a small icon tile; the Mastermind column opens with its key
 * phrase in bold green; rows get more breathing room and the whole table a
 * rounded, shadowed frame. Cell text is wrapped in a <span> so the phone
 * layout (label ::before + text as a two-column grid) still works with the
 * bold lead-ins inside.
 * ------------------------------------------------------------------------- */
@media(min-width:681px){
  .mastermind-v2-page .cmp{
    max-width:none !important;border:1px solid #E3E8EE !important;border-radius:14px !important;
    overflow:hidden !important;box-shadow:0 10px 30px rgba(20,32,43,.06);background:#fff}
  .mastermind-v2-page .cmp .row{grid-template-columns:1.05fr 1.35fr 1.25fr !important;border-top:1px solid #E8ECF1 !important}
  .mastermind-v2-page .cmp .row.head{background:#1B3651 !important;border-top:0 !important}
  .mastermind-v2-page .cmp .row.head > div{
    display:flex;align-items:center;gap:9px;padding:15px 16px !important;
    color:#fff !important;font-weight:700 !important;font-size:14.5px !important;line-height:1.3;
    border-left:1px solid rgba(255,255,255,.12)}
  .mastermind-v2-page .cmp .row.head > div:first-child{border-left:0}
  .mastermind-v2-page .cmp .row.head i{font-size:18px;line-height:1;flex:0 0 auto}
  .mastermind-v2-page .cmp .row.head > div:nth-child(1) i{color:#B9C4D6}
  .mastermind-v2-page .cmp .row.head > div:nth-child(2) i{color:#3CC287}
  .mastermind-v2-page .cmp .row.head > div:nth-child(3) i{color:#fff;opacity:.9}
  .mastermind-v2-page .cmp .row > div{padding:16px 16px !important;font-size:14.5px !important;line-height:1.6 !important}
  .mastermind-v2-page .cmp .row > .k{
    display:flex;align-items:center;gap:12px;color:#1B3651 !important;font-weight:700 !important;background:#fff}
  .mastermind-v2-page .cmp .row > .us{background:rgba(60,194,135,.08) !important;color:#2B3A4B !important}
  .mastermind-v2-page .cmp .row > .them{background:rgba(184,28,28,.05) !important;color:#4A5A70 !important}
  .mastermind-v2-page .cmp .row > .us,.mastermind-v2-page .cmp .row > .them{display:flex;align-items:center}
}
.mastermind-v2-page .cmp .cmp-ic{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;border-radius:9px;background:#EDF1F5;color:#1B3651;font-size:16px;line-height:1}
.mastermind-v2-page .cmp .us b{color:#1E8A5A;font-weight:700}
/* phones: the topic header is navy, so the icon tile goes translucent white */
@media(max-width:680px){
  .mastermind-v2-page .cmp .row > .k{display:flex !important;align-items:center;gap:10px}
  .mastermind-v2-page .cmp .cmp-ic{width:28px;height:28px;border-radius:7px;font-size:14px;background:rgba(255,255,255,.14);color:#fff}
}
/* Let the comparison table run wider than the 640px text column on larger
 * screens so the three columns have room. .desc itself is full width; the
 * 640px cap comes from `section.content-section .desc > *`, so this needs
 * the same selector plus .cmp to win. */
@media(min-width:681px){
  .mastermind-v2-page section.content-section .desc > .cmp{max-width:900px !important;width:100% !important}
}

/* ---- Mobile hero: "Powered by..." chip on one line -----------------------
 * At 15px the chip wrapped onto two lines on phones (360px wide). It now
 * scales with the viewport (about 12.6px at 360px, capped at 13px) and is
 * kept to a single line. The hero's mobile top padding was also trimmed so
 * the pill sits about 30px under the logo instead of 60px. */
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .chip{
    white-space:nowrap;font-size:min(13px, 3.5vw) !important;padding:6px 12px !important;max-width:100%}
}

/* Mobile hero pill ("The 'Go-To' Clinic ...") kept to one line: it wrapped
 * at 16px with 30px side padding on phones. Text scales with the viewport
 * (about 15px at 360px, capped at 16px) and the side padding tightens. */
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .page-title-content h1{
    white-space:nowrap !important;max-width:100% !important;width:auto !important;
    font-size:min(16px, 4.1vw) !important;padding:12px 20px !important;gap:8px}
}

/* Mobile hero side spacing trimmed so the headline and copy use more of the
 * screen width: 12px each side (was 37px on Mastermind, 15px on Solo). */
@media(max-width:575px){
  .mastermind-v2-page section.page-title-area{padding-left:0 !important;padding-right:0 !important}
  .mastermind-v2-page section.page-title-area > .container{padding-left:12px !important;padding-right:12px !important}
  .mastermind-v2-page section.page-title-area .row{margin-left:0 !important;margin-right:0 !important}
  .mastermind-v2-page section.page-title-area .col-lg-12{padding-left:0 !important;padding-right:0 !important}
}

/* Hero pill dot enlarged to match /business-mentorship/ (16px there; this
 * page had shrunk it to 10px). */
.mastermind-v2-page .page-title-area .page-title-content h1 i{font-size:16px !important;line-height:1}

/* WordPress offsets the document for its toolbar, but the absolute header
 * stays at the viewport top. Align it with the hero in logged-in previews. */
body.admin-bar.page-template-tpl-mastermind .header-area.header-transparent:not(.sticky){
  top:32px;
}
@media screen and (max-width:782px){
  body.admin-bar.page-template-tpl-mastermind .header-area.header-transparent:not(.sticky){
    top:46px;
  }
}

/* ---- Mobile hero: close the band above the pill -------------------------
 * Same fix as the Solo page. Measured at 393px: the header is absolute and
 * 130px tall (26px padding, 78px logo, 26px padding) and the pill sits at
 * 134px, so the visible gap from the logo was only 30px. Most of the empty
 * navy band was the header's own height rather than the hero padding.
 * Header padding drops to 14px (height 106px) and the hero's top padding to
 * 70px, which puts the pill at about 110px and keeps a comfortable gap.
 * Scoped to this template's body class, so the site header is unchanged
 * everywhere else.
 * ------------------------------------------------------------------------- */
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{
    padding-top:70px !important;
  }
}

/* ---- Mobile hero: second reduction --------------------------------------
 * 110px still left too much air above the pill. The logo is 78px tall on a
 * phone, which is most of the header, so it comes down to 56px and the
 * header padding to 10px (header height 76px). The hero's top padding drops
 * to 84px, keeping a 16px gap from the logo while removing roughly 50px of
 * dead space from the top of the page.
 * ------------------------------------------------------------------------- */
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{
    padding-top:84px !important;
  }
}

/* ---- Mobile hero: account for the section's own padding -----------------
 * The pill sits at section padding-top (40px) PLUS the content's padding-top,
 * which the previous value missed: shrinking the header to 76px moved the logo
 * up 38px while the pill moved only 10px, so the gap grew rather than closed.
 * With the header at 76px the logo now ends at 66px, so the content padding is
 * set to 50px, putting the pill at 40 + 50 = 90px and leaving a 24px gap.
 * ------------------------------------------------------------------------- */
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{
    padding-top:50px !important;
  }
}

/* hero: ivory ground, left aligned */
/* ivory hero removed: the section's own blue-overlay + bg-img now show */
.mastermind-v2-page .page-title-area .page-title-content.content-style2{
  text-align:left !important;
  padding:108px 0 34px !important; /* clears the 130px absolute theme header (plus the section's own 52px top) with a 30px gap */
  max-width:900px;
  margin-left:0;
}

/* brand line: plain navy text, not a pill */
.mastermind-v2-page .page-title-content h1{
  display:block !important;
  background:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 0 14px !important;
  color:#17304F !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  text-align:left !important;
}
.mastermind-v2-page .page-title-content h1 i{display:none !important;}

/* headline: large, dark, left aligned */
.mastermind-v2-page .page-title-area h2.title{
  color:#14202B !important;
  text-align:left !important;
  font-size:44px !important;
  line-height:1.14 !important;
  letter-spacing:-.01em !important;
  margin:0 0 18px !important;
  max-width:860px;
}
.mastermind-v2-page .page-title-area h2.title .hl{
  color:inherit !important;
  text-decoration-line:underline;
  text-decoration-color:#16A34A;
  text-decoration-thickness:.12em;
  text-underline-offset:.16em;
}

/* supporting copy */
.mastermind-v2-page .page-title-area .desc{
  text-align:left !important;
  max-width:760px;
  margin-left:0 !important;
}
.mastermind-v2-page .page-title-area .page-title-content .desc>p{
  color:#3A4654 !important;
  text-align:left !important;
  font-size:19px !important;
  line-height:1.6 !important;
  margin:0 0 20px !important;
  max-width:760px;
  margin-left:0 !important;
}
.mastermind-v2-page .page-title-area .desc>p a,
.mastermind-v2-page .page-title-area .desc>p .hl{
  color:inherit !important;
  text-decoration-color:#16A34A;
}

/* chip and button, left aligned */
.mastermind-v2-page .page-title-area .chip{
  color:#1E8C5E !important;
  border-color:#1E8C5E !important;
  background:none !important;
  margin:2px 0 20px !important;
}
/* the demo button on this page is the handoff's own a.btn.em, not the
 * theme's .header-btn-main; hold it left so no later block re centres it */
.mastermind-v2-page .page-title-area .desc .btn.em,
.mastermind-v2-page .page-title-area .desc > .btn{
  display:inline-block !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.mastermind-v2-page .page-title-area .desc:has(> .btn){
  text-align:left !important;
}

@media(max-width:991px){
  .mastermind-v2-page .page-title-area h2.title{font-size:36px !important;}
}
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{
    padding:26px 0 24px !important;
  }
  .mastermind-v2-page .page-title-area h2.title{font-size:28px !important;}
  .mastermind-v2-page .page-title-area .page-title-content .desc>p{font-size:17px !important;}
}

/* Mobile: the hero is no longer a pill, so the earlier pill rules (nowrap,
 * 12px/20px padding, viewport scaled type) now only push the brand line 20px
 * to the right of the headline. Reset them, and trim the section's own 40px
 * top padding so the copy starts just under the header. */
@media(max-width:575px){
  .mastermind-v2-page .page-title-area .page-title-content h1{
    white-space:normal !important;
    padding:0 !important;
    font-size:16px !important;
    margin:0 0 12px !important;
  }
  .mastermind-v2-page section.page-title-area{
    padding-top:0 !important;
    padding-bottom:24px !important;
  }
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{
    padding:22px 0 0 !important;
  }
}

/* ======= Dave O'Sullivan pull quote: navy card, white text ===============
 * Doc: "This image visually isnt great - hard to read and doesnt stick out -
 * put a blue background and white text so it jumps out. Keep the green text
 * where needed."
 * This reverses the earlier white/left rule treatment. The card carries
 * .qc-light, whose rules outrank the navy block further up, so these are
 * scoped to .quotecard.qc-light to win on specificity as well as order.
 * The highlight and attribution move to the light green (#5FD3A0) that reads
 * on navy at about 6.7:1; the dark green would have been close to invisible.
 * ========================================================================= */
.mastermind-v2-page .quotecard.qc-light{
  background:#1E3A5F !important;
  border:0 !important;
  border-left:0 !important;
  border-radius:14px !important;
  color:#fff !important;
  text-align:center !important;
  padding:36px 40px !important;
  box-shadow:0 10px 30px rgba(21,51,101,.18) !important;
}
.mastermind-v2-page .quotecard.qc-light p,
.mastermind-v2-page .quotecard.qc-light blockquote{
  color:#fff !important;
  text-align:center !important;
}
.mastermind-v2-page .quotecard.qc-light .qc-hl{
  color:#5FD3A0 !important;
  font-weight:700 !important;
}
.mastermind-v2-page .quotecard.qc-light .a{
  color:#5FD3A0 !important;
  text-align:center !important;
}
.mastermind-v2-page .quotecard.qc-light .qc-mark,
.mastermind-v2-page .quotecard.qc-light .qc-mark i{
  color:#5FD3A0 !important;
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.22) !important;
}
@media(max-width:575px){
  .mastermind-v2-page .quotecard.qc-light{padding:26px 22px !important}
}

/* ======= The eight building blocks, restyled ============================
 * Doc: "Visually this section needs an alternative to this, doesnt stick out
 * well enough." It was a flat run of hairline rows with a small green
 * numeral, which read as body copy on the light blue band. It becomes a
 * stepped path instead: each phase is a solid navy bar, and each block is a
 * white card with a green number badge, so the eight steps are countable at
 * a glance and lift off the band.
 * ======================================================================== */
.mastermind-v2-page .phase{
  display:flex !important;
  align-items:center;
  gap:11px;
  max-width:640px;
  margin:34px auto 14px !important;
  padding:13px 20px !important;
  background:#17304F !important;
  color:#fff !important;
  border-radius:10px !important;
  font-family:"Roboto",sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.mastermind-v2-page .phase::before{
  content:"";
  flex:0 0 auto;
  width:9px;height:9px;border-radius:50%;
  background:#3CC287;
}
.mastermind-v2-page ol.blocks{
  display:grid !important;
  gap:12px !important;
  margin:0 auto !important;
}
.mastermind-v2-page ol.blocks li{
  border:1px solid rgba(21,51,101,.12) !important;
  border-left:4px solid #3CC287 !important;
  border-top:1px solid rgba(21,51,101,.12) !important;
  border-radius:10px !important;
  background:#fff !important;
  padding:16px 20px 16px 62px !important;
  box-shadow:0 2px 10px rgba(21,51,101,.05) !important;
}
.mastermind-v2-page ol.blocks li::before{
  content:counter(b) !important;
  position:absolute !important;
  left:16px !important;
  top:15px !important;
  width:30px !important;height:30px !important;
  border-radius:50% !important;
  background:#3CC287 !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:"Roboto",sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1 !important;
}
.mastermind-v2-page ol.blocks li b{
  display:block;
  color:#17304F !important;
  margin-bottom:2px;
}
@media(max-width:575px){
  .mastermind-v2-page .phase{
    font-size:14px !important;
    padding:11px 16px !important;
    margin-top:26px !important;
  }
  .mastermind-v2-page ol.blocks li{padding:14px 16px 14px 54px !important}
  .mastermind-v2-page ol.blocks li::before{
    left:12px !important;top:13px !important;
    width:27px !important;height:27px !important;font-size:14px !important;
  }
}

/* ======= Hero spacing driven by the real header height ==================
 * Feedback: no gap under the header (the brand line was in fact hidden
 * behind it at wide viewports) and too much space between the demo button
 * and the trusted-by band.
 * The earlier fixed 108px was measured against a 130px header; the header is
 * 189px at 1330px wide, so the brand line sat underneath it. --mm-hdr is set
 * from the measured height by the script in the template; the fallback below
 * covers the tallest case if that never runs.
 * The section's own top padding is zeroed so the content padding is the only
 * thing positioning the hero, and the bottom is tightened to ~40px.
 * ======================================================================== */
.mastermind-v2-page .page-title-area{
  padding-top:0 !important;
  padding-bottom:20px !important;
}
.mastermind-v2-page .page-title-area .page-title-content.content-style2{
  padding-top:calc(var(--mm-hdr, 190px) + 34px) !important;
  padding-bottom:20px !important;
}
@media(max-width:575px){
  .mastermind-v2-page section.page-title-area{
    padding-top:0 !important;
    padding-bottom:14px !important;
  }
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{
    padding-top:calc(var(--mm-hdr, 80px) + 22px) !important;
    padding-bottom:14px !important;
  }
}

/* ======= Sentence case titles, and a slimmer nav on this page ===========
 * The hero headline is already sentence case in the markup; the theme was
 * setting text-transform:capitalize on it, which is what rendered it as
 * Title Case. The other section titles were hard coded in Title Case and
 * have been rewritten in the template. The green .sec-label stays uppercase,
 * as the client's replacement list specifies.
 * The nav padding is reduced for this page only. Because the hero pads from
 * the measured header height, shrinking the bar closes the gap above the
 * headline automatically.
 * ======================================================================== */
.mastermind-v2-page .page-title-area h2.title,
.mastermind-v2-page .page-title-content h1{
  text-transform:none !important;
}

/* ======= Hero content centred ===========================================
 * Requested: the landing content sits centre, not left. This supersedes the
 * left aligned treatment taken from the handoff reference image, which ran
 * the whole above the fold flush left. Background, sentence case and the
 * green underlines are unchanged; only the alignment moves.
 * Every left align rule added for that treatment is reversed here, and the
 * horizontal auto margins are restored, since a margin shorthand elsewhere
 * in this file strips them and pins blocks to the container's left edge.
 * ======================================================================== */
.mastermind-v2-page .page-title-area .page-title-content.content-style2{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.mastermind-v2-page .page-title-content h1{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.mastermind-v2-page .page-title-area h2.title{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.mastermind-v2-page .page-title-area .desc{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.mastermind-v2-page .page-title-area .page-title-content .desc>p{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* the chip and the demo button are inline blocks, so centring their line box
 * centres them; the :has() rule added earlier forced this line left */
.mastermind-v2-page .page-title-area .desc:has(> .btn){
  text-align:center !important;
}
.mastermind-v2-page .page-title-area .chip{
  display:inline-block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.mastermind-v2-page .page-title-area .desc .btn.em,
.mastermind-v2-page .page-title-area .desc > .btn{
  display:inline-block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ======= Pull quote simplified to the reference ========================
 * Requested: "make this part simple like the REFERENCE the only green text
 * is the ACTUALLY". The card had picked up four decorations that the
 * reference does not have: the round quote medallion, the white rules either
 * side of it (.quotecard::before), the short green rule above the name
 * (.a::before), and a green attribution. Those go, the name becomes white,
 * and the copy sits upright rather than italic, as in the reference.
 * ACTUALLY stays green and is the only green left in the card.
 * ====================================================================== */
.mastermind-v2-page .quotecard.qc-light .qc-mark{
  display:none !important;
}
.mastermind-v2-page .quotecard.qc-light::before,
.mastermind-v2-page .quotecard.qc-light::after{
  content:none !important;
  display:none !important;
}
.mastermind-v2-page .quotecard.qc-light .a::before,
.mastermind-v2-page .quotecard.qc-light .a::after{
  content:none !important;
  display:none !important;
}
.mastermind-v2-page .quotecard.qc-light .a{
  /* the attribution takes the same green as ACTUALLY (was white at .72) */
  color:#5FD3A0 !important;
  opacity:1;
  margin-top:16px !important;
}
.mastermind-v2-page .quotecard.qc-light p,
.mastermind-v2-page .quotecard.qc-light blockquote{
  font-style:normal !important;
}
/* the one piece of green the card keeps */
.mastermind-v2-page .quotecard.qc-light .qc-hl{
  color:#5FD3A0 !important;
  font-style:normal !important;
  font-weight:700 !important;
}

/* ======= Sticky nav turns white, as on every other page ================
 * Requested: "like other pages if you scroll down the bg color of nav
 * become white". The theme already does this on .sticky (white ground,
 * #252525 links, 0 0 25px rgba(0,0,0,.06) shadow, 15px padding); this page
 * was overriding it because the navy bar and white links were applied in
 * both states. Those are now scoped to :not(.sticky), so the stuck bar is
 * the theme's own. Nothing is redeclared here on purpose, to avoid drifting
 * from the other pages if the theme's sticky styling ever changes.
 * ====================================================================== */

/* ======= Header left to the theme ======================================
 * Requested: the nav should be done the way every other page does it, so
 * this page no longer styles .header-area at all. The theme's own
 * header-transparent / sticky-header behaviour applies unchanged: a
 * transparent bar over the hero that turns white on scroll, with the same
 * padding, logo size and link colours as /business-mentorship/, /mentorship/
 * and the homepage. Nothing is redeclared here deliberately, so the nav
 * stays in step with the rest of the site.
 * ====================================================================== */

/* The dark nav links this page needed while its hero was ivory are gone:
 * the hero is back on the blue background, so the theme's own white links
 * read correctly and the header is now entirely untouched by this page. */

/* ======= Testimonial videos =============================================
 * Doc: "Add these videos to the relevant testimonials", in the format
 * name line, then [VIDEO], then the Before/After boxes as usual. Each
 * player sits between the case heading and its pair of boxes.
 * 16:9 via aspect-ratio so the iframe never letterboxes or pushes the card.
 * ======================================================================== */
.mastermind-v2-page .tcase .tc-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  margin:14px 0 18px;
  border-radius:12px;
  overflow:hidden;
  background:#17304F;            /* fills the frame while the player loads */
}
.mastermind-v2-page .tcase .tc-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
@media(max-width:575px){
  .mastermind-v2-page .tcase .tc-video{
    margin:12px 0 14px;
    border-radius:10px;
  }
}

/* ======= Hero type raised to the /business-mentorship scale =============
 * Measured at 1344px, that page's hero against this one:
 *   headline 48px/48   vs 44px/50.16
 *   body     22px/28.6 vs 19px/30.4
 *   button   18px      vs 15px
 *   headline runs the full container (1170px) rather than a 860px cap
 * The rest of this page already matches it exactly - section titles are
 * 33px/36.3 and body copy 18px/31.5 on both - so only the hero moves.
 * Mobile is left alone: at 375px this hero is already 28px against that
 * page's 26px, so raising it there would overshoot the reference.
 * These sit above the existing 991px and 575px steps, which still apply.
 * ======================================================================== */
@media(min-width:992px){
  .mastermind-v2-page .page-title-area h2.title{
    font-size:48px !important;
    line-height:48px !important;
    max-width:none !important;
  }
  .mastermind-v2-page .page-title-area .page-title-content .desc>p{
    font-size:22px !important;
    line-height:28.6px !important;
    max-width:900px;
  }
  .mastermind-v2-page .page-title-content h1{
    font-size:18px !important;
    line-height:1.4 !important;
  }
  .mastermind-v2-page .page-title-area .chip{
    font-size:16px !important;
  }
  .mastermind-v2-page .page-title-area .desc .btn.em,
  .mastermind-v2-page .page-title-area .desc > .btn{
    font-size:18px !important;
    padding:15px 30px !important;
  }
}

/* ======= Hero on the blue background, as /courses/ ======================
 * The section already carried `blue-overlay lighter bg-img`; it just had no
 * image, and the ivory override above was hiding the overlay. The template
 * now feeds it the same site default background /courses/ uses, so the type
 * goes back to white and the nav can use the theme's own white links again
 * (no page-specific link colour needed any more).
 * ======================================================================== */
.mastermind-v2-page .page-title-content h1{
  color:#FFFFFF !important;
}
.mastermind-v2-page .page-title-area h2.title{
  color:#FFFFFF !important;
}
.mastermind-v2-page .page-title-area .page-title-content .desc>p{
  color:rgba(255,255,255,.90) !important;
}
.mastermind-v2-page .page-title-area .chip{
  color:#5FD3A0 !important;
  border-color:rgba(95,211,160,.55) !important;
  background:rgba(95,211,160,.08) !important;
}
/* the underline goes lighter so it reads on the dark ground */
.mastermind-v2-page .page-title-area h2.title .hl,
.mastermind-v2-page .page-title-area .desc>p .hl{
  color:inherit !important;
  text-decoration-color:#5FD3A0 !important;
  -webkit-text-decoration-color:#5FD3A0 !important;
}

/* ======= Continuous underline ==========================================
 * Requested: one unbroken line, not separated segments. The base .hl rule
 * used text-decoration-skip-ink:auto, which lifts the underline around
 * every descender - the y in "only", the g in "growth", the y in "system" -
 * and that is what read as a broken line. `none` draws straight through.
 * ======================================================================== */
.mastermind-v2-page .hl,
.mastermind-v2-page .page-title-area h2.title .hl,
.mastermind-v2-page .page-title-area .desc>p .hl{
  text-decoration-skip-ink:none !important;
  -webkit-text-decoration-skip-ink:none !important;
  text-decoration-skip:none !important;
}

/* ======= Hero line breaks matched to the reference =====================
 * Requested: break the headline and the body copy on the same words as the
 * reference, and stop the underline colliding with the line beneath.
 *
 * Rather than forcing <br>s (which would be wrong at every other width),
 * the measures are set so the text wraps there naturally. Measured at the
 * live font settings:
 *   headline  "The only clinic growth system that"      724px
 *             + " helps"                                851px  <- must not fit
 *             "helps you help your therapists ethically" 823px <- must fit
 *   so any width in [823, 851) breaks exactly as the reference. 836px.
 *
 *   body      "...inside the treatment room. When"       930px <- must fit
 *             + " patients"                             1015px <- must not fit
 *   so any width in [930, 1015) works. 960px.
 *
 * The content wrapper is widened to 980px so it does not clip either.
 * Line height goes 48px (1.0) -> 1.2 so the green underline clears the
 * ascenders of the line below instead of touching them.
 * ======================================================================== */
@media(min-width:992px){
  .mastermind-v2-page .page-title-area .page-title-content.content-style2{
    max-width:980px !important;
  }
  .mastermind-v2-page .page-title-area h2.title{
    max-width:836px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    /* 1.2 left only 9.6px of leading, and the underline already sits about
     * 12.5px below the baseline (6.7px offset + its own thickness), so it
     * was right on the edge of the line beneath. 1.26 gives 12.5px. */
    line-height:1.26 !important;
    text-underline-offset:.13em !important;
  }
  .mastermind-v2-page .page-title-area .desc,
  .mastermind-v2-page .page-title-area .desc.short-content-width{
    max-width:960px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .mastermind-v2-page .page-title-area .page-title-content .desc>p{
    max-width:960px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ======= Pull quote: ACTUALLY no longer green ===========================
 * Requested: remove the green from ACTUALLY. It now matches the rest of the
 * quote (white) and keeps its bold weight, so it still reads as the stressed
 * word. The attribution stays green, per the request before this one, which
 * makes the name the only green left in the card.
 * ====================================================================== */
.mastermind-v2-page .quotecard.qc-light .qc-hl,
.mastermind-v2-page .quotecard .qc-hl{
  color:#FFFFFF !important;
  font-weight:700 !important;
  font-style:normal !important;
}

/* ======= ABOVE THE FOLD: rebuilt to the client's reference (1 Oct) =======
 * David O'Sullivan: "The above the fold is nothing like the below image I
 * gave you for this page. It needs to look like this while background not
 * the blue." Every value here is lifted from the reference itself
 * (handoff sales-page-preview.html), not estimated from the screenshot:
 *   ground   #FCFCFA      ink #14202B   copy #586374   eyebrow #25476A
 *   headline Fraunces 600, clamp(29px,3.5vw,44px), line-height 1.08,
 *            letter-spacing -.01em, margin 0 0 18px
 *   copy     Source Sans 3, 19px, margin-bottom 22px
 *   chip     Fraunces italic 15px, #1E8A5A, 1px border, pill, 6px 15px
 *   button   #3CC287 with #07331f text, 600 15px, 12px 22px, 5px radius
 *   column   800px, left aligned (920px main column less 60px each side)
 *   header   #1E2C48
 *   trust    #E8EAEE strip inside the column, 20px under the button
 * This SUPERSEDES the centred / blue / 48px hero blocks above. Each rule is
 * prefixed with the body template class so it outranks all of them.
 * The underline is kept continuous (skip-ink none) as previously requested;
 * the reference draws it with skip-ink auto.
 * ======================================================================== */

/* ground: ivory, no overlay, no background image */
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area{
  background:#FCFCFA !important;
  background-image:none !important;
  padding-bottom:40px !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area::before,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area::after{
  content:none !important;
  display:none !important;
}

/* the 800px column, flush left in the site container */
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .page-title-content.content-style2{
  text-align:left !important;
  max-width:800px !important;
  margin-left:0 !important;
  margin-right:auto !important;
  padding-top:calc(var(--mm-hdr, 190px) + 52px) !important;
  padding-bottom:0 !important;
}

/* eyebrow */
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .page-title-content h1{
  font-family:"Source Sans 3",system-ui,Arial,sans-serif !important;
  font-size:16px !important;
  line-height:1.4 !important;
  font-weight:600 !important;
  color:#25476A !important;
  text-align:left !important;
  margin:0 0 14px !important;
  padding:0 !important;
  background:none !important;
  white-space:normal !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .page-title-content h1 i{display:none !important}

/* headline */
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area h2.title{
  font-family:"Fraunces",Georgia,serif !important;
  font-size:clamp(29px,3.5vw,44px) !important;
  line-height:1.08 !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  color:#14202B !important;
  text-align:left !important;
  text-transform:none !important;
  max-width:none !important;
  margin:0 0 18px !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area h2.title .hl,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc .hl{
  color:inherit !important;
  text-decoration-line:underline !important;
  text-decoration-color:#16A34A !important;
  -webkit-text-decoration-color:#16A34A !important;
  text-decoration-thickness:.13em !important;
  text-underline-offset:.16em !important;
  text-decoration-skip-ink:none !important;
}

/* supporting copy */
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc.short-content-width{
  text-align:left !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .page-title-content .desc>p{
  font-family:"Source Sans 3",system-ui,Arial,sans-serif !important;
  font-size:19px !important;
  line-height:1.62 !important;
  color:#586374 !important;
  text-align:left !important;
  max-width:none !important;
  margin:0 0 22px !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc:has(> .btn){text-align:left !important}

/* chip */
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .chip{
  display:inline-block !important;
  font-family:"Fraunces",Georgia,serif !important;
  font-style:italic !important;
  font-size:15px !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  color:#1E8A5A !important;
  background:none !important;
  border:1px solid #1E8A5A !important;
  border-radius:999px !important;
  padding:6px 15px !important;
  margin:2px 0 20px !important;
  white-space:normal !important;
}

/* button */
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc .btn.em,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc > .btn{
  display:inline-block !important;
  font-family:"Source Sans 3",system-ui,Arial,sans-serif !important;
  background:#3CC287 !important;
  color:#07331f !important;
  font-weight:600 !important;
  font-size:15px !important;
  line-height:1.4 !important;
  padding:12px 22px !important;
  border-radius:5px !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  text-decoration:none !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc .btn.em:hover{background:#2fa876 !important;color:#fff !important}

/* header bar: the reference's navy. Only the background is set; the theme's
 * sizing, white links and white sticky state are untouched. Without it the
 * theme's white links sit on ivory at 1.03:1. */
body.page-template-tpl-mastermind .header-area:not(.sticky){
  background:#1E2C48 !important;
}


/* phones: the reference's mobile section padding is 40px */
@media(max-width:575px){
  body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .page-title-content.content-style2{
    padding-top:calc(var(--mm-hdr, 80px) + 40px) !important;
  }
}

/* Phones only: the reference has no mobile rule for the chip, so at 375px it
 * wraps into a two line pill. Keep it on one line by easing the size, which
 * the earlier mobile pass also did. Desktop is untouched. */
@media(max-width:575px){
  body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .chip{
    white-space:nowrap !important;
    font-size:min(13.5px, 3.55vw) !important;
    padding:6px 12px !important;
    max-width:100% !important;
  }
}

/* Logos back to the full width band, as before the reference rebuild
 * (requested 1 Oct). The boxed 800px strip rules were removed rather than
 * overridden, so the section is the site's own trusted-by band again.
 * The hero now ends 40px under the demo button, the gap agreed earlier for
 * this junction. */

/* ======= Above the fold in the site font (Macauley, 1 Oct) ==============
 * "So needs to be all same font as the site." The site's font is Roboto:
 * on the live site it is the only text face loaded (Roboto, plus the icon
 * fonts), and nav, headings and body copy all compute to Roboto. Poppins is
 * not loaded anywhere and is not referenced in the theme. Macauley's own
 * mockup sets no font-family, so it falls back to this same Roboto.
 * Fraunces / Source Sans 3 are therefore dropped from the hero (and no longer
 * requested). Headline and button values are Macauley's, verbatim; the
 * layout, colours and ivory ground from the reference rebuild are kept.
 * ====================================================================== */
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .page-title-content h1,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area h2.title,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .page-title-content .desc>p,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .chip,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc .btn.em,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc > .btn{
  font-family:"Roboto",sans-serif !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area h2.title{
  font-size:48px !important;
  line-height:1.18 !important;
  font-weight:700 !important;
  letter-spacing:0em !important;
  color:rgb(20, 32, 43) !important;
  text-align:left !important;
  text-transform:none !important;
  max-width:none !important;
  margin:0px 0px 18px !important;
}
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc .btn.em,
body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area .desc > .btn{
  color:rgb(255, 255, 255) !important;   /* his mockup: white on green */
  display:inline-block !important;
  background:rgb(60, 194, 135) !important;
  font-weight:600 !important;
  font-size:16px !important;
  line-height:1.4 !important;
  padding:20px 30px !important;
  border-radius:5px !important;
  border:0px !important;
  box-shadow:none !important;
  margin:0px !important;
  text-decoration:none !important;
}
/* the headline steps down on smaller screens so 48px never overflows */
@media(max-width:991px){
  body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area h2.title{font-size:38px !important}
}
@media(max-width:575px){
  body.page-template-tpl-mastermind .mastermind-v2-page .page-title-area h2.title{font-size:29px !important}
}

/* ======= Demo buttons open the business mentorship popup (1 Oct) ========
 * Macauley: use the same popup button as /business-mentorship/. That page
 * uses <button type="button" class="... modal-trigger"
 * data-target="#business-mentorship-application-popup">; override.js opens
 * #genericModal with that target, and inc-popups.php already outputs the
 * popup on every page, so no shared file is touched. A <button> is used
 * because the handler does not preventDefault, so an <a href="#demo"> would
 * also jump the page.
 * Buttons do not inherit font, border or cursor like a link does, so they
 * are normalised here to render exactly as the links did.
 * ====================================================================== */
body.page-template-tpl-mastermind .mastermind-v2-page button.btn{
  font-family:inherit;
  border:0;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

/* ======= Nav: compact at the top, same size as when scrolled ============
 * Requested for this page on desktop only: the bar was too tall. It now
 * uses the same 15px padding the theme gives it once it sticks (123px tall
 * instead of 189px), keeps the blue at the top and still turns white on
 * scroll. The logo stays the theme's 93px. Body-class scoped, so no other
 * page is affected; the hero pads from the measured height, so it follows.
 * ====================================================================== */
@media(min-width:992px){
  body.page-template-tpl-mastermind .header-area:not(.sticky){
    padding-top:15px !important;
    padding-bottom:15px !important;
  }
}

/* ======= Client round (5 Oct 2026): CTA every two sections, block spacing,
 * link colour. Appended last so it supersedes earlier blocks.
 *  - .cta-after is the repeating "Schedule a Demo" row added at the end of
 *    every second section (reviews cards, the retention fix, one standard,
 *    the 80% training, the comparison, burnout). It reuses .cta-inline, which
 *    is now centred on desktop as well as phones.
 *  - Paragraphs that follow a card/list/table got only 16-20px of space and
 *    read as touching it; they now get 32px.
 *  - Body links were black with an underline; they are now blue so they read
 *    as links. Buttons, CTAs and the hero highlight are excluded.
 * ====================================================================== */
.mastermind-v2-page .desc p.cta-inline{text-align:center}
.mastermind-v2-page .desc p.cta-inline .soft{display:inline-block;margin-left:12px}
.mastermind-v2-page .desc p.cta-after{margin-top:40px !important;margin-bottom:8px !important}
.mastermind-v2-page .desc :is(.cmp,.ten,.ten-cards,ol.blocks,ul.get,.pair,.strip,.ba,.quotecard) + p:not(.cta-after){
  margin-top:32px !important;
}
.mastermind-v2-page .content-section a:not(.btn):not(.cta):not(.hl){
  color:#1558d6;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.mastermind-v2-page .content-section a:not(.btn):not(.cta):not(.hl):hover{color:#0b3d91}
@media(max-width:767px){
  .mastermind-v2-page .desc p.cta-after{margin-top:32px !important}
  .mastermind-v2-page .desc p.cta-inline .soft{margin-left:0}
}

/* ---- Big demo button (matches the Business Mentorship page) -------------
 * The repeating CTA rows now use the same large green pill as
 * /business-mentorship/ ("Schedule Your FREE Demo ->") with no caption.
 * ------------------------------------------------------------------------- */
.mastermind-v2-page .cta-big{
  display:inline-block;
  font-family:inherit;
  font-size:18px;font-weight:500;line-height:31.5px;letter-spacing:.1px;
  color:#fff;
  background:#3cc083;
  border:2px solid #3cc083;
  border-radius:100px;
  padding:20px 40px;
  cursor:pointer;
  text-decoration:none;
  -webkit-appearance:none;appearance:none;
  transition:background-color .2s ease,border-color .2s ease;
}
.mastermind-v2-page .cta-big:hover,
.mastermind-v2-page .cta-big:focus-visible{background:#31b477;border-color:#31b477;color:#fff}
.mastermind-v2-page .cta-big .bi{margin-left:4px}
@media(max-width:575px){
  .mastermind-v2-page .cta-big{padding:18px 28px;font-size:17px;max-width:100%}
}

/* ======= Section spacing, same as Solo Clinic Owner v2 (Oct 7) ==========
 * Requested: apply the Solo bottom-padding fix here too. Measured: content
 * started 60px below each section's top but ended 92-108px above its bottom
 * (the row's Bootstrap mb-4, 24px, plus the last paragraph's own margin),
 * putting 152-168px between sections. As on Solo, every content section now
 * carries the theme's .small-gap class (override2.css), those two trailing
 * margins are removed, and the page sets the agreed numbers:
 *   desktop 50px above / 45px below  -> 95px between sections
 *   phones  45px above / 40px below  -> 85px between sections
 * Hero and trusted-by band are not content sections and are untouched.
 * ====================================================================== */
.mastermind-v2-page section.content-section.small-gap{
  padding-top:50px !important;
  padding-bottom:45px !important;
}
.mastermind-v2-page section.content-section.small-gap > .container > .row{
  margin-bottom:0 !important;
}
.mastermind-v2-page section.content-section.small-gap .desc > :last-child{
  margin-bottom:0 !important;
}
/* sections with no label or title open on .desc and its pt-3 (16px) */
.mastermind-v2-page section.small-gap .col-lg-12 > .desc.pt-3:first-child{
  padding-top:0 !important;
}
@media(max-width:767px){
  .mastermind-v2-page section.content-section.small-gap{
    padding-top:45px !important;
    padding-bottom:40px !important;
  }
}

/* Two leftovers from the measurement: the Dave quote card carries its own
 * 30px top margin (80px above instead of 50), and #demo ends on a P.S. wrapper
 * whose last line keeps an 8px margin that collapses through it (53px below
 * instead of 45). Both zeroed, only where they open/close a small-gap section. */
.mastermind-v2-page section.small-gap .desc > .quotecard:first-child{
  margin-top:0 !important;
}
.mastermind-v2-page section.content-section.small-gap .desc > :last-child > :last-child{
  margin-bottom:0 !important;
}

/* ======= Eight building blocks, redesigned (Oct 7 mockup) ===============
 * Copy unchanged. Each phase bar now leads with a green "Phase N.", the
 * numbered badges sit on a green timeline outside the cards, and every block
 * carries an icon chip (Bootstrap Icons, already loaded). Supersedes the
 * earlier stepped-path styling for this list.
 * ====================================================================== */
.mastermind-v2-page #blocks .phase{
  padding:18px 24px !important;
  border-radius:12px !important;
  font-size:17px !important;
  gap:14px !important;
  margin:30px auto 18px !important;
  box-shadow:0 8px 20px rgba(21,51,101,.12);
}
.mastermind-v2-page #blocks .phase::before{width:14px !important;height:14px !important;background:#3CC287 !important}
.mastermind-v2-page #blocks .phase .ph-n{color:#4ED19A}

.mastermind-v2-page #blocks ol.blocks{
  position:relative;
  gap:18px !important;
  padding-left:88px !important;
  margin:0 auto 6px !important;
}
.mastermind-v2-page #blocks ol.blocks::before{
  content:"";
  position:absolute;
  left:42px;
  top:-18px;
  bottom:-12px;
  width:3px;
  border-radius:3px;
  background:linear-gradient(180deg, rgba(60,194,135,.15), #3CC287 14%, #3CC287 86%, rgba(60,194,135,.15));
}
.mastermind-v2-page #blocks ol.blocks li{
  position:relative;
  border:0 !important;
  border-left:0 !important;
  border-top:0 !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(21,51,101,.08) !important;
  padding:26px 28px 26px 132px !important;
  min-height:120px;
  font-size:16.5px;
  line-height:1.55;
  color:#596474;
}
/* the number badge, on the timeline */
.mastermind-v2-page #blocks ol.blocks li::before{
  left:-73px !important;
  top:50% !important;
  transform:translateY(-50%);
  width:58px !important;
  height:58px !important;
  font-size:24px !important;
  background:linear-gradient(160deg, #3CC287, #1E9E66) !important;
  color:#fff !important;
  border:4px solid #fff;
  box-shadow:0 6px 16px rgba(30,158,102,.30);
  box-sizing:border-box;
}
/* icon chip */
.mastermind-v2-page #blocks .blk-ic{
  position:absolute;
  left:28px;
  top:50%;
  transform:translateY(-50%);
  width:84px;
  height:84px;
  border-radius:50%;
  background:#E8F6EF;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  line-height:1;
  color:#17304F;
}
.mastermind-v2-page #blocks .blk-ic .bi-clipboard2-check,
.mastermind-v2-page #blocks .blk-ic .bi-graph-up-arrow{color:#17304F}
.mastermind-v2-page #blocks .blk-plus{
  position:absolute;
  right:12px;
  bottom:14px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#22A06B;
  color:#fff;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #E8F6EF;
}
.mastermind-v2-page #blocks ol.blocks li b{
  font-size:21px !important;
  line-height:1.25 !important;
  color:#14203B !important;
  margin:0 0 6px !important;
}
@media(max-width:575px){
  .mastermind-v2-page #blocks .phase{padding:14px 16px !important;font-size:15px !important;gap:10px !important}
  .mastermind-v2-page #blocks .phase::before{width:11px !important;height:11px !important}
  .mastermind-v2-page #blocks ol.blocks{padding-left:54px !important;gap:14px !important}
  .mastermind-v2-page #blocks ol.blocks::before{left:25px}
  .mastermind-v2-page #blocks ol.blocks li{padding:18px 16px 18px 82px !important;min-height:96px;font-size:15.5px}
  .mastermind-v2-page #blocks ol.blocks li::before{left:-49px !important;width:44px !important;height:44px !important;font-size:18px !important;border-width:3px}
  .mastermind-v2-page #blocks .blk-ic{left:16px;width:54px;height:54px;font-size:24px}
  .mastermind-v2-page #blocks .blk-plus{width:20px;height:20px;font-size:11px;right:6px;bottom:8px}
  .mastermind-v2-page #blocks ol.blocks li b{font-size:18px !important}
}

/* icons sized to the mockup's proportion (~55% of the chip, was ~43%) */
.mastermind-v2-page #blocks .blk-ic{font-size:46px}
@media(max-width:575px){.mastermind-v2-page #blocks .blk-ic{font-size:30px}}

/* Phase bars: the bar was a flex row, so the green "Phase N." span became its
 * own column and stacked as "Phase / 1." on phones. It is now one run of text
 * with the dot hung in the left padding, so it wraps naturally at any width. */
.mastermind-v2-page #blocks .phase{
  display:block !important;
  position:relative;
  padding-left:50px !important;
}
.mastermind-v2-page #blocks .phase::before{
  position:absolute !important;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  margin:0 !important;
}
.mastermind-v2-page #blocks .phase .ph-n{white-space:nowrap}
@media(max-width:575px){
  .mastermind-v2-page #blocks .phase{padding-left:36px !important}
  .mastermind-v2-page #blocks .phase::before{left:16px}
}

/* ======= Before / After boxes, redesigned (Oct 7 mockup) ================
 * All six case studies. Copy and markup unchanged: the header circle is the
 * column's own ::before, and the item icons restyle the existing li::before
 * (Bootstrap Icons x-lg / check-lg), so nothing doubles up. Adds the mockup's
 * large x / tick beside the BEFORE / AFTER label, a rule under the header, and
 * rules between items that start at the text, not under the icon.
 * ====================================================================== */
.mastermind-v2-page .tcase .pair{gap:18px !important}
.mastermind-v2-page .tcase .pair .col{
  position:relative;
  border-radius:20px !important;
  padding:22px 22px 10px !important;
}
.mastermind-v2-page .tcase .pair .col.before{background:#FDF2F1 !important;border:1px solid #F4D6D2 !important}
.mastermind-v2-page .tcase .pair .col.after{background:#EEF8F2 !important;border:1px solid #CFEADB !important}

/* header: big circle + pill */
.mastermind-v2-page .tcase .pair .col::before{
  content:"" ;
  position:absolute;
  left:22px; top:22px;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"bootstrap-icons"; font-size:17px; line-height:1; font-weight:400;
  color:#fff;
}
.mastermind-v2-page .tcase .pair .col.before::before{content:"\F659";background:#DE5148;box-shadow:0 4px 10px rgba(222,81,72,.28)}
.mastermind-v2-page .tcase .pair .col.after::before{content:"\F633";background:#22A06B;box-shadow:0 4px 10px rgba(34,160,107,.28)}
.mastermind-v2-page .tcase .pair .col .t{
  display:inline-flex !important; align-items:center;
  height:36px; margin:0 0 0 48px !important;
  padding:0 14px !important; border-radius:9px !important;
  font-size:13px !important; font-weight:700 !important; letter-spacing:.08em !important;
}
.mastermind-v2-page .tcase .pair .col.before .t{background:rgba(222,81,72,.13) !important;color:#C7433A !important}
.mastermind-v2-page .tcase .pair .col.after .t{background:rgba(34,160,107,.14) !important;color:#1E8A5A !important}

/* list: rule under the header, rules between items from the text column */
.mastermind-v2-page .tcase .pair .col ul{
  margin:16px 0 0 !important; padding:2px 0 0 !important;
  border-top:1px solid rgba(21,51,101,.09);
}
.mastermind-v2-page .tcase .pair .col li{
  position:relative;
  margin:0 !important;
  padding:12px 0 12px 38px !important;
  font-size:14.5px !important; line-height:1.55 !important;
  color:#1E2B4F !important;
}
.mastermind-v2-page .tcase .pair .col li + li{
  background:linear-gradient(rgba(21,51,101,.09), rgba(21,51,101,.09)) no-repeat 38px 0 / calc(100% - 38px) 1px;
}
.mastermind-v2-page .tcase .pair .col li::before{
  position:absolute !important;
  left:0 !important; top:11px !important;
  width:26px !important; height:26px !important; border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-family:"bootstrap-icons" !important; font-size:11px !important; line-height:1 !important;
  margin:0 !important;
}
.mastermind-v2-page .tcase .pair .col.before li::before{content:"\F659" !important;background:rgba(222,81,72,.12) !important;color:#D9473E !important}
.mastermind-v2-page .tcase .pair .col.after li::before{content:"\F633" !important;background:rgba(34,160,107,.14) !important;color:#1E8A5A !important}
@media(max-width:575px){
  .mastermind-v2-page .tcase .pair .col{padding:18px 16px 6px !important}
  .mastermind-v2-page .tcase .pair .col::before{left:16px;top:18px}
}

/* ======= Case study as one card (Oct 7 mockup, second version) ==========
 * Each case is a single white card: the name line becomes a centred navy
 * band across the top, the video, the Before/After pair and the quote sit
 * inside it, the Before/After lists drop the rules between items, and the
 * quote becomes a dashed green box with the mark on the left and the copy
 * and name centred. Markup and copy unchanged.
 * ====================================================================== */
.mastermind-v2-page .desc .ba .tcase{
  background:#fff !important;
  border-radius:18px !important;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(21,51,101,.09) !important;
  border:0 !important;
  padding:0 0 22px !important;
}
.mastermind-v2-page .desc .ba .tcase > h3{
  background:#1B3461 !important;
  color:#fff !important;
  text-align:center !important;
  margin:0 0 20px !important;
  padding:15px 22px !important;
  font-size:19px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  border:0 !important;
}
.mastermind-v2-page .desc .ba .tcase > h3 .tc-name{color:#fff !important;font-weight:700 !important;margin-right:4px}
.mastermind-v2-page .desc .ba .tcase > .tc-video{margin:0 20px !important;width:auto !important}
.mastermind-v2-page .desc .ba .tcase > .pair{margin:18px 20px 0 !important}
/* no rules between items in this version; the header rule stays */
.mastermind-v2-page .desc .ba .tcase .pair .col li + li{background:none !important}
.mastermind-v2-page .desc .ba .tcase .pair .col li{padding:8px 0 8px 38px !important}
.mastermind-v2-page .desc .ba .tcase .pair .col li::before{top:7px !important}
.mastermind-v2-page .desc .ba .tcase .pair .col ul{padding-top:8px !important}
/* quote: dashed green box, mark left, copy and name centred */
.mastermind-v2-page .desc .ba .tcase > blockquote{
  position:relative;
  margin:18px 20px 0 !important;
  background:#F3FBF7 !important;
  border:2px dashed rgba(60,194,135,.55) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  padding:22px 74px 18px !important;
  text-align:center !important;
  color:#1E2B4F !important;
}
/* the old design's ::before is the green bar (dropped here); ::after is the mark */
.mastermind-v2-page .desc .ba .tcase > blockquote::before{content:none !important;display:none !important}
.mastermind-v2-page .desc .ba .tcase > blockquote::after{
  left:24px !important;
  top:14px !important;
  right:auto !important;
  color:#22A06B !important;
  font-size:52px !important;
  transform:none !important;
}
.mastermind-v2-page .desc .ba .tcase > blockquote .a{
  display:block !important;
  text-align:center !important;
  margin-top:10px !important;
  color:#6B7686 !important;
  font-size:14px !important;
  font-style:normal !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}
@media(max-width:575px){
  .mastermind-v2-page .desc .ba .tcase{padding-bottom:16px !important;border-radius:16px !important}
  .mastermind-v2-page .desc .ba .tcase > h3{font-size:16px !important;padding:13px 16px !important;margin-bottom:14px !important}
  .mastermind-v2-page .desc .ba .tcase > .tc-video{margin:0 14px !important}
  .mastermind-v2-page .desc .ba .tcase > .pair{margin:14px 14px 0 !important}
  .mastermind-v2-page .desc .ba .tcase > blockquote{margin:14px 14px 0 !important;padding:46px 18px 16px !important}
  .mastermind-v2-page .desc .ba .tcase > blockquote::after{left:50% !important;top:8px !important;font-size:44px !important;transform:translateX(-50%) !important}
}

/* ======= Case quote: big bold call-out (Oct 7 mockup) ====================
 * Matches the site's green-dotted call-out: dotted green border, pale green
 * fill, dark green bold italic copy, centred. The big quote mark is dropped.
 * ====================================================================== */
.mastermind-v2-page .desc .ba .tcase > blockquote{
  border:5px dotted rgba(61,193,132,.4) !important;
  background:rgba(61,193,132,.05) !important;
  border-radius:12px !important;
  padding:28px 34px 24px !important;
  color:#2E6B45 !important;
  font-size:25px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  font-style:italic !important;
  text-align:center !important;
}
.mastermind-v2-page .desc .ba .tcase > blockquote::before,
.mastermind-v2-page .desc .ba .tcase > blockquote::after{content:none !important;display:none !important}
.mastermind-v2-page .desc .ba .tcase > blockquote .a{
  font-size:14px !important;font-weight:500 !important;font-style:normal !important;
  color:#5E7F6B !important;margin-top:12px !important}
@media(max-width:575px){
  .mastermind-v2-page .desc .ba .tcase > blockquote{
    border-width:4px !important;padding:20px 16px 18px !important;font-size:19px !important}
  .mastermind-v2-page .desc .ba .tcase > blockquote::after{content:none !important;display:none !important}
}

/* Case quote: name line under the quote hidden (Oct 7); padding evened up */
.mastermind-v2-page .desc .ba .tcase > blockquote .a{display:none !important}
.mastermind-v2-page .desc .ba .tcase > blockquote{padding:28px 34px !important}
@media(max-width:575px){
  .mastermind-v2-page .desc .ba .tcase > blockquote{padding:20px 16px !important}
}

/* ======= Result cards (Dan / Cian / Tom): larger type (Oct 7) ============
 * The card copy was 14px against 18px body text. Raised throughout; the
 * cards keep their size in the text column.
 * ====================================================================== */
.mastermind-v2-page .strip.strip-cards > .sc{padding:18px 18px 22px}
.mastermind-v2-page .strip.strip-cards .sc-top{margin:0 0 12px !important}
.mastermind-v2-page .strip.strip-cards .sc-q{width:38px;height:38px;font-size:22px}
.mastermind-v2-page .strip.strip-cards .sc-loc{font-size:13px;padding:4px 10px}
.mastermind-v2-page .strip.strip-cards .sc-loc i{font-size:12.5px}
.mastermind-v2-page .strip.strip-cards .sc-name{font-size:23px !important;margin:0 0 8px !important}
.mastermind-v2-page .strip.strip-cards .sc-text{font-size:17px !important;line-height:1.6 !important}
@media(max-width:700px){
  .mastermind-v2-page .strip.strip-cards .sc-text{font-size:17px !important}
}