/* bob-funnels-blue (21 Oct 2026): main site pages on the same blue design system as Bob's landing and funnels.
   Colours from live mindful12.com styles.css (--m12-accent #2D67FF, --m12-accent-hover #1F55E6, --m12-accent-soft #EAF0FF,
   --m12-text #0D2158, --m12-muted #5B6B8F, --m12-border #D6DEF0, --m12-bg #FFFFFF; band #F4F6FC from home.css).
   Loaded last so it wins over site.css and motion.css. Layout, sections, images and copy unchanged. */
html:root{--cream:#ffffff;--sand:#f4f6fc;--line:#d6def0;--navy:#0d2158;--ink:#0d2158;--muted:#5b6b8f;--green:#2d67ff;--green2:#1f55e6;--blue:#2d67ff;--sage:#2d67ff;--sage-d:#1f55e6;--tint:#eaf0ff}
/* type and buttons as on the landing and funnels */
.bsite h1,.bsite h2{font-weight:400}
.bsite .eyebrow{font:600 .68rem/1.3 Poppins,sans-serif;letter-spacing:.22em}
.bsite .btn{font:600 1rem/1.2 Poppins,sans-serif;padding:17px 22px}
.bsite .btn.ghost:hover{background:var(--tint)}
/* hero, bands and motion accents in blue instead of cream and teal */
.bsite .hero{background-color:var(--sand)}
.bsite .hero:before{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.92))}
.bsite .hero:after{background:radial-gradient(32% 30% at 78% 22%,rgba(45,103,255,.12) 0,transparent 70%),radial-gradient(36% 34% at 12% 86%,rgba(45,103,255,.08) 0,transparent 70%)}
.bsite .band:before{background:rgba(13,33,88,.86)}
.bsite .card:hover,.bsite .price:hover,.bsite .player:hover{border-color:#9aa6c2}
.bsite details:hover{border-color:#9aa6c2}
.bsite .breathe i{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(214,226,255,.85) 45%,rgba(45,103,255,.45))}
.bsite .breathe i+i{background:none;border-color:rgba(45,103,255,.45)}
.bsite .steps:after{background:linear-gradient(90deg,var(--sage),rgba(45,103,255,.25))}
@keyframes m-pulse{0%,30%,100%{box-shadow:0 0 0 0 rgba(45,103,255,0)}10%{box-shadow:0 0 0 7px rgba(45,103,255,.4)}}
@keyframes m-pulse2{50%{box-shadow:0 0 0 6px rgba(45,103,255,.45)}}
/* Reset Breath mini player */
.bsite .mp{--mp-cream:#ffffff;--mp-line:#d6def0;--mp-green:#2d67ff;--mp-green2:#1f55e6;--mp-sage:#eaf0ff;--mp-muted:#5b6b8f}
/* site pages keep their own 1120px layout; header and footer use that same width on every page (landing too, see bob.css) */
.bsite .wrap{padding:0 24px}
/* blue text on the light blue hero and band sections uses the live hover blue #1F55E6 for WCAG AA (buttons keep #2D67FF) */
.bsite .hero .eyebrow,.bsite section.sand .eyebrow,.bsite .hero a:not(.btn),.bsite section.sand a:not(.btn),.bsite .hero .btn.ghost,.bsite section.sand .btn.ghost{color:var(--green2)}
/* desktop: a slightly shorter hero (still airy) so a page's first main button sits in the first screen where the layout allows (Gareth 21 Oct 13:10 BST) */
@media(min-width:1000px){.bsite .hero:not(.hero-rb):not(.hero-home){padding:80px 0 88px}}
/* desktop layout rhythm for the site pages (Gareth 21 Oct 14:30 BST: About not well spaced on a laptop)
   1. page content uses exactly the header's box (1076px + 24px sides) so text lines up under the logo
   2. reading columns start on that same left edge instead of floating in the middle, and body text keeps a comfortable 60 to 75 character line
   3. two white sections in a row share one gap instead of stacking two paddings */
.bsite .wrap{max-width:1124px}
.bsite .lead{max-width:32em}
.bsite section:not(.hero):not(.band):not(.sand)+section:not(.hero):not(.band):not(.sand){padding-top:0}
.bsite .wrap.narrow:not(.center)>p,.bsite .wrap.narrow:not(.center)>blockquote,.bsite .wrap.narrow:not(.center)>ul,.bsite .wrap.narrow:not(.center)>ol,.bsite .wrap.narrow:not(.center)>.btns{max-width:34em}
@media(min-width:1000px){
 .bsite .wrap.narrow:not(.center){max-width:1124px}
 .bsite .wrap.narrow:not(.center)>*{max-width:680px}
 .bsite .wrap.narrow:not(.center)>p,.bsite .wrap.narrow:not(.center)>blockquote,.bsite .wrap.narrow:not(.center)>ul,.bsite .wrap.narrow:not(.center)>ol{max-width:34em}
}