/* ============================================================ Bullseye Prep — marketing components The reusable path / expansion / button / FAQ / overlay pieces from the homepage-v1 mockup, extracted out of the front-page-only home.css so the money pages (and any future marketing page) can use them. EVERYTHING is scoped under .bp-mkt so these mockup-namespace classes (.btn / .tiles / .xsch table / …) can be enqueued globally without ever touching styles.css page content or the Woo checkout. Design tokens (--navy/--dusty/…) + Montserrat/Inter come from shell.css :root + the global font enqueue. ============================================================ */ /* scoped reset — the mockup markup assumes a zeroed box model */ .bp-mkt *{margin:0;padding:0;box-sizing:border-box} .bp-mkt img{max-width:100%;height:auto;display:block} /* base font inheritance — bare text (p/li/span/etc. with no explicit `font:` shorthand) otherwise falls through to the browser serif default (Times). Matches the site's Inter stack; components with their own font shorthand (Montserrat headings, buttons, etc.) already override this per-element. */ .bp-mkt{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif} /* ---------- buttons ---------- */ .bp-mkt .btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:8px;padding:14px 24px;font:700 15px Montserrat;cursor:pointer;text-decoration:none;transition:transform .15s ease-out, box-shadow .15s ease-out} .bp-mkt .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(44,62,80,.18)} .bp-mkt .btn-red{background:var(--red);color:var(--off)} .bp-mkt .btn-dusty{background:var(--dusty);color:var(--off)} .bp-mkt .btn-navy{background:var(--navy);color:var(--off)} .bp-mkt .btn-ghost, .bp-mkt .btn.ghost, .bp-mkt .ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)} .bp-mkt .kick{font:700 10px Inter;letter-spacing:.09em;color:var(--red);text-transform:uppercase} /* generic guarantee chip (used on the Guarantee page hero) */ .bp-mkt .chip200{display:inline-block;background:#fff;color:var(--navy);font:900 15px/1.5 Montserrat;border:2px solid var(--dusty);border-radius:8px;padding:8px 20px} /* ---------- product / path summary card ---------- */ .bp-mkt .paths{background:#fff;padding:48px 0} .bp-mkt .paths.hero-blue{background:linear-gradient(180deg,#eaf1f8 0%,#e2eaf3 100%);padding:68px 0 50px} /* a white body section right after a blue hero shouldn't double up top space */ .bp-mkt .paths.hero-blue + .paths{padding-top:8px} /* Method page: the .method loop panel follows the blue hero. Make it WHITE so the sections alternate (blue hero -> white loop -> white steps -> navy CTA) instead of two blues sandwiching a thin white stripe. Drop the panel fill + card rounding + top gap so the blue band ends on a crisp edge. */ .bp-mkt .paths.hero-blue + .method{background:transparent;border-radius:0;margin:0;padding-top:44px} .bp-mkt .paths .pwrap{max-width:1200px;margin:0 auto;padding:0 40px} .bp-mkt .paths h1, .bp-mkt .paths h2{font:900 clamp(30px,3.4vw,42px)/1.15 Montserrat;color:var(--navy);text-align:center} .bp-mkt .paths .plede{font:400 17px/1.6 Montserrat;color:var(--mut);text-align:center;max-width:720px;margin:14px auto 0} .bp-mkt .paths .pcrumb{font:700 12px Inter;letter-spacing:.08em;color:var(--dusty);text-transform:uppercase;text-align:center;margin-bottom:12px} /* not a card — a plain wrapper so the page content sits directly on the page (the individual content modules below keep their own card treatment) */ .bp-mkt .pcard{margin-top:28px} .bp-mkt .pbody{display:grid;grid-template-columns:320px minmax(0,1fr) 280px;gap:32px;padding:0 0 32px;border-bottom:1px solid var(--line)} .bp-mkt .pphoto{width:100%;height:243px;border-radius:10px;object-fit:cover} .bp-mkt .pmain{display:flex;flex-direction:column;gap:11px} .bp-mkt .pmain h3{font:700 24px Inter;color:var(--ink)} .bp-mkt .pmain .ln{font:500 16px Inter} .bp-mkt .pmain .ln.mut{color:var(--mut)} .bp-mkt .pmain .kick{font-size:14px} .bp-mkt .pchips{display:flex;gap:8px;flex-wrap:wrap} .bp-mkt .pchips span{background:rgba(44,62,80,.08);color:var(--navy);font:700 14px Inter;border-radius:99px;padding:6px 14px} .bp-mkt .pcols{display:flex;gap:30px} .bp-mkt .pcols div{font:500 16px/1.7 Inter} .bp-mkt .prail{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px;justify-content:center} .bp-mkt .prail .k{font:700 14px Inter;letter-spacing:.07em;color:var(--mut)} .bp-mkt .prail .price{font:700 35px Inter;color:var(--ink)} .bp-mkt .prail .q{font:500 15px Inter;color:var(--mut)} .bp-mkt .prail .btn{font-size:18px;padding:15px 24px} .bp-mkt .prail .micro{font:500 14px Inter;color:var(--mut)} .bp-mkt .tiles{display:flex;gap:14px;flex-wrap:wrap} .bp-mkt .tile{border:1.5px solid var(--line);border-radius:10px;padding:11px 19px;text-align:left} .bp-mkt .tile.hot{border-color:var(--red);border-width:2.5px} .bp-mkt .tile span{font:500 15px Inter;color:var(--mut);display:block} .bp-mkt .tile b{font:700 22px Inter} .bp-mkt .tile em{font:700 11px Inter;color:var(--red);font-style:normal;display:block} .bp-mkt a.tile{text-decoration:none;color:var(--ink);transition:border-color .15s ease-out,transform .15s ease-out,box-shadow .15s ease-out} .bp-mkt a.tile:hover{border-color:var(--navy);transform:translateY(-1px);box-shadow:0 6px 16px rgba(44,62,80,.12)} /* ---------- expansion detail cards ---------- */ .bp-mkt .xp{display:flex;flex-direction:column;gap:28px;padding:32px 0 28px} .bp-mkt .xcard{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:26px 32px;box-shadow:0 3px 12px rgba(0,0,0,.05)} .bp-mkt .xkick{font:700 12px Inter;letter-spacing:.06em;color:var(--red);text-transform:uppercase;display:block;margin-bottom:12px} .bp-mkt .xhead{font:900 26px/1.2 Montserrat;color:var(--navy);text-align:center} .bp-mkt .xg2{display:grid;grid-template-columns:1fr 440px;gap:24px;align-items:start} .bp-mkt .xsch .dr{font:700 22px Inter;color:var(--ink)} .bp-mkt .xsch .tm{font:700 17px Inter;color:#2962b9;margin:4px 0 14px} .bp-mkt .xsch table{width:100%;border:none;border-collapse:collapse;font:500 14px Inter} .bp-mkt .xsch th{text-align:left;font:700 11px Inter;letter-spacing:.05em;color:var(--mut);padding:8px 0;height:auto;background:none;border:none;text-transform:uppercase} .bp-mkt .xsch td{padding:12px 0;border-top:1px solid #e0e6ec;height:auto;background:none} .bp-mkt .xsch td:first-child{font:700 14px Inter;color:#2962b9} .bp-mkt .xsch .off{font:700 11px Inter;letter-spacing:.05em;color:var(--mut);margin-top:14px;text-transform:uppercase} .bp-mkt .xtui{text-align:center} .bp-mkt .xtui .pr{font:700 52px Inter;color:var(--ink)} .bp-mkt .xtui .al{font:500 15px Inter;color:var(--mut);margin-bottom:14px} .bp-mkt .xtui .aff{display:inline-block;background:#e6edf6;color:#2962b9;font:700 13px Inter;border-radius:8px;padding:10px 16px;margin-bottom:14px} .bp-mkt .xtui .spec{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid #e0e6ec;text-align:left} .bp-mkt .xtui .spec span{font:700 11px Inter;letter-spacing:.04em;color:var(--mut)} .bp-mkt .xtui .spec b{font:700 14px Inter;color:var(--ink)} .bp-mkt .xtui .btn{width:100%;margin-top:16px} .bp-mkt .xtui .gn{font:500 13px Inter;color:var(--mut);margin-top:10px} .bp-mkt .xben{display:flex;gap:32px;align-items:center} .bp-mkt .xben img{width:200px;height:225px;object-fit:cover;border-radius:12px;flex:none} .bp-mkt .xben h4{font:900 26px Montserrat;color:var(--ink);margin:10px 0} .bp-mkt .xben p{font:500 15px/1.55 Inter;color:var(--mut)} .bp-mkt .xchips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0} .bp-mkt .xchips span{background:rgba(44,62,80,.08);color:var(--navy);font:700 12px Inter;border-radius:99px;padding:7px 14px} .bp-mkt .xchips .more{background:var(--navy);color:#fff} .bp-mkt .xstats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .bp-mkt .xstat{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:0 3px 12px rgba(0,0,0,.05)} .bp-mkt .xstat b{font:900 42px Montserrat;color:var(--red);display:block} .bp-mkt .xstat i{font:700 12px Inter;letter-spacing:.04em;color:var(--ink);font-style:normal;display:block;margin:4px 0 6px;text-transform:uppercase} .bp-mkt .xstat span{font:500 13px/1.4 Inter;color:var(--mut)} .bp-mkt .xfeat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .bp-mkt .xtile{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px} .bp-mkt .xtile b{font:700 15px Inter;display:block;margin-bottom:5px} .bp-mkt .xtile p{font:500 13px/1.45 Inter;color:var(--mut)} .bp-mkt .xtile button{background:none;border:none;font:700 11px Inter;color:var(--dusty);cursor:pointer;padding:8px 0 0;display:block} .bp-mkt .xtile button:hover{color:var(--navy)} .bp-mkt .xstrat h4{font:900 24px Montserrat;margin-bottom:8px} .bp-mkt .xstrat p{font:500 15px/1.5 Inter;color:var(--mut);margin-bottom:14px} .bp-mkt .xstrat .xchips span{background:#e9eef3} .bp-mkt .xguar{background:var(--navy);border-radius:16px;padding:44px 48px;text-align:center;color:var(--off)} .bp-mkt .xguar .chip200{display:inline-block;background:#fff;color:var(--navy);font:900 14px Montserrat;border:2px solid var(--dusty);border-radius:8px;padding:8px 20px;margin-bottom:14px} .bp-mkt .xguar h4{font:900 44px/1.1 Montserrat;margin-bottom:12px} .bp-mkt .xguar p{font:500 16px/1.6 Inter;margin-bottom:20px} .bp-mkt .xguar .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .bp-mkt .xguar .ghost{background:none;border:1.5px solid var(--off);color:var(--off)} /* ---------- FAQ accordion ---------- */ .bp-mkt .xq{border-bottom:1px solid var(--line)} .bp-mkt .xq > button{width:100%;background:none;border:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font:700 16px Inter;color:var(--ink);padding:16px 0;cursor:pointer;text-align:left} .bp-mkt .xq > button span{color:var(--mut);flex:none} .bp-mkt .xq.open > button span{color:var(--red)} .bp-mkt .xq .xa{max-height:0;overflow:hidden;transition:max-height .35s ease} .bp-mkt .xq.open .xa{max-height:1200px} .bp-mkt .xq .xa p{font:500 14px/1.6 Inter;color:var(--mut);padding-bottom:16px} /* numbered clauses (Guarantee page) */ .bp-mkt .xclauses{list-style:none;display:flex;flex-direction:column;gap:0} .bp-mkt .xclause{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;padding:22px 0;border-top:1px solid var(--line)} .bp-mkt .xclause:first-child{border-top:none} .bp-mkt .xclause .n{font:900 24px Montserrat;color:var(--dusty)} .bp-mkt .xclause p{font:500 15px/1.65 Inter;color:var(--ink)} /* ---------- screenshot lightbox ---------- */ .bp-mkt .shotbox{position:fixed;inset:0;background:rgba(33,37,41,.66);display:none;z-index:120;padding:40px 20px} .bp-mkt .shotbox.on{display:flex;align-items:center;justify-content:center} .bp-mkt .shotbox .inner{background:#fff;border-radius:14px;padding:20px 24px;max-width:960px;width:100%} .bp-mkt .shotbox .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .bp-mkt .shotbox .hd b{font:700 16px Inter} .bp-mkt .shotbox .close{border:1.5px solid var(--line);background:none;border-radius:8px;font:700 13px Inter;color:var(--mut);padding:6px 12px;cursor:pointer} .bp-mkt .shotbox img{width:100%;border:1.5px solid var(--line);border-radius:10px;max-height:70vh;object-fit:contain} /* ---------- booking overlay (branded frame around Google scheduler) ---------- */ .bp-mkt .bookbox{position:fixed;inset:0;background:rgba(33,37,41,.66);display:none;z-index:130;padding:40px 20px} .bp-mkt .bookbox.on{display:flex;align-items:center;justify-content:center} .bp-mkt .bookbox .inner{background:#fff;border-radius:16px;overflow:hidden;max-width:720px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.35)} .bp-mkt .bookbox .bhead{background:var(--navy);color:var(--off);padding:20px 26px;display:flex;justify-content:space-between;align-items:center} .bp-mkt .bookbox .bhead .t{font:900 20px Montserrat} .bp-mkt .bookbox .bhead .s{font:500 13px Inter;color:var(--dusty);margin-top:2px} .bp-mkt .bookbox .bhead button{background:none;border:1.5px solid rgba(236,240,241,.5);color:var(--off);border-radius:8px;font:700 13px Inter;padding:7px 12px;cursor:pointer} .bp-mkt .bookbox .bframe{position:relative;height:640px;max-height:68vh;background:#fff} .bp-mkt .bookbox iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;display:block} .bp-mkt .bookbox .bstub{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:52px 40px;background:#f6f8fa} .bp-mkt .bookbox .bstub .ic{font-size:40px} .bp-mkt .bookbox .bstub p{font:500 14px/1.6 Inter;color:var(--mut);max-width:420px} .bp-mkt .bookbox .bstub a{font:700 14px Inter;color:#fff;background:var(--red);border-radius:8px;padding:12px 22px;text-decoration:none} .bp-mkt .bookbox .bfoot{padding:12px 26px;border-top:1px solid var(--line);font:500 12px Inter;color:var(--mut);display:flex;justify-content:space-between;align-items:center} .bp-mkt .bookbox .bfoot a{color:var(--navy);text-decoration:underline} /* ---------- responsive ---------- */ @media (max-width:1000px){ .bp-mkt .xg2,.bp-mkt .xfeat{grid-template-columns:1fr} .bp-mkt .xstats{grid-template-columns:1fr 1fr} .bp-mkt .xben{flex-direction:column;align-items:flex-start} .bp-mkt .pbody{grid-template-columns:1fr;gap:18px} .bp-mkt .pphoto{width:100%;height:220px} .bp-mkt .prail{align-items:flex-start;text-align:left} } @media (max-width:900px){ .bp-mkt .pcols{flex-wrap:wrap;gap:10px 22px} .bp-mkt .tiles{flex-wrap:wrap} .bp-mkt .xguar{padding:34px 24px} .bp-mkt .xguar h4{font-size:clamp(28px,7vw,40px)} } @media (max-width:760px){ .bp-mkt .paths{padding:32px 0} .bp-mkt .paths .pwrap{padding:0 16px} .bp-mkt .xp{padding:24px 0 22px} .bp-mkt .xcard{padding:22px 18px} .bp-mkt .xstats{grid-template-columns:1fr 1fr} .bp-mkt .xtui .pr{font-size:42px} .bp-mkt .bookbox{padding:0} .bp-mkt .bookbox .inner{border-radius:0;height:100%;max-width:none} .bp-mkt .bookbox .bframe{height:calc(100vh - 140px);max-height:none} } /* on-dark button variants (dark CTA bands) */ .bp-mkt .btn-light{background:#fff;color:var(--navy)} .bp-mkt .btn-ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)} /* ============================================================ METHOD PAGE — loop hero + written-out step sections (/method/) Aurora 2x2 loop ported out of the front-page-only home.css and scoped under .bp-mkt; step sections styled after the homepage method modals. Keyframes are bpm- prefixed so they never collide with home.css if both ever load together. ============================================================ */ .bp-mkt .method{background:var(--panel);border-radius:16px;padding:48px 0 12px;margin:24px 0 8px} .bp-mkt .mwrap{max-width:1200px;margin:0 auto;padding:0 40px} .bp-mkt .mhead2{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px} .bp-mkt .method h2{font:900 clamp(26px,3.2vw,38px)/1.2 Montserrat;color:var(--navy);max-width:900px} .bp-mkt .method .sub{font:500 17px Montserrat;color:var(--dusty)} .bp-mkt .looppill{background:var(--navy);color:var(--off);border-radius:24px;padding:10px 20px;font:600 13px Montserrat} .bp-mkt .loop22{max-width:1120px;margin:0 auto;padding:38px 0 6px;display:flex;flex-direction:column;gap:20px} .bp-mkt .lrow{display:flex;justify-content:center;align-items:center;gap:26px} .bp-mkt .lmid{position:relative;height:70px;width:100%;max-width:1000px;margin:0 auto} .bp-mkt .lmid .up{position:absolute;left:20%;top:0} .bp-mkt .lmid .down{position:absolute;right:20%;top:0} .bp-mkt .mnote{font:500 14px Montserrat;color:var(--navy);text-align:center;padding:16px 0 6px} .bp-mkt .mm2{position:relative;flex:1;max-width:500px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:22px 26px;box-shadow:0 2px 10px rgba(44,62,80,.07);overflow:hidden} .bp-mkt .mm2 > :not(.aurora):not(.gleam){position:relative;z-index:2} .bp-mkt .mm2 .aurora{position:absolute;inset:-40%;filter:blur(42px);opacity:.4;pointer-events:none;z-index:0} .bp-mkt .mm2 .aurora i{position:absolute;border-radius:50%;display:block} .bp-mkt .mm2 .aurora i:nth-child(1){width:70%;height:55%;left:-5%;top:8%;background:radial-gradient(closest-side,var(--dusty),transparent 70%);animation:bpm-drift1 26s ease-in-out infinite alternate} .bp-mkt .mm2 .aurora i:nth-child(2){width:60%;height:50%;right:-8%;top:30%;background:radial-gradient(closest-side,#f0b8ab,transparent 70%);animation:bpm-drift2 31s ease-in-out infinite alternate} .bp-mkt .mm2 .aurora i:nth-child(3){width:75%;height:45%;left:15%;bottom:-5%;background:radial-gradient(closest-side,#b9d0e2,transparent 70%);animation:bpm-drift3 23s ease-in-out infinite alternate} @keyframes bpm-drift1{from{transform:translate(0,0) rotate(0)}to{transform:translate(14%,10%) rotate(28deg)}} @keyframes bpm-drift2{from{transform:translate(0,0) rotate(0)}to{transform:translate(-12%,14%) rotate(-24deg)}} @keyframes bpm-drift3{from{transform:translate(0,0) rotate(0)}to{transform:translate(10%,-12%) rotate(18deg)}} .bp-mkt .mm2 .gleam{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} .bp-mkt .mm2 .gleam::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:36%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7) 48%,rgba(255,255,255,.3) 60%,transparent);filter:blur(14px);transform:rotate(8deg);animation:bpm-sweep 9s cubic-bezier(.5,.1,.4,1) infinite} .bp-mkt .lrow .mm2:nth-child(3) .gleam::after{animation-delay:3.4s} @keyframes bpm-sweep{0%{left:-45%;opacity:0}10%{opacity:1}40%{left:115%;opacity:.85}41%,100%{left:115%;opacity:0}} .bp-mkt .mm2 h3{font:700 24px Inter;color:var(--navy);margin-bottom:12px} .bp-mkt .mh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .bp-mkt .mm2 .mh b{font:700 20px Inter;color:var(--ink)} .bp-mkt .mm2 .mh span{font:500 14px Inter;color:#8c8c8c} .bp-mkt .mrow{display:flex;align-items:center;gap:12px;margin:8px 0} .bp-mkt .mm2 .mrow .nm{font:500 16px Inter;width:190px;flex:none} .bp-mkt .mrow .bar{flex:1;height:10px;border-radius:99px;background:#e8e8e8;overflow:hidden} .bp-mkt .mrow .bar i{display:block;height:100%;border-radius:99px;background:#2980b9} .bp-mkt .mm2 .mrow .pc{font:700 16px Inter;width:48px;text-align:right} .bp-mkt .mrow.bad .nm,.bp-mkt .mrow.bad .pc{color:var(--red)} .bp-mkt .mrow.bad .bar i{background:var(--red)} .bp-mkt .mflag{margin-top:12px;background:rgba(231,76,60,.09);border-radius:8px;padding:7px 12px;font:500 14px Inter;color:var(--red)} .bp-mkt .mthumb{background:var(--ink);border-radius:10px;height:130px;display:grid;place-items:center;margin-bottom:10px} .bp-mkt .mthumb i{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.93);display:grid;place-items:center;font:700 16px Inter;color:var(--ink);font-style:normal} .bp-mkt .msub{font:500 14px Inter;color:#8c8c8c} .bp-mkt .mprog{display:flex;align-items:center;gap:12px;margin-top:10px} .bp-mkt .mprog .bar{flex:1;height:10px;border-radius:99px;background:#e8e8e8;overflow:hidden} .bp-mkt .mprog .bar i{display:block;height:100%;width:60%;background:#2980b9;border-radius:99px} .bp-mkt .mprog b{font:700 16px Inter;color:#2980b9} .bp-mkt .mm2 .rrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #efefef} .bp-mkt .mm2 .rrow:first-of-type{border-top:none} .bp-mkt .mm2 .rrow .tx{flex:1} .bp-mkt .mm2 .rrow .tx b{font:700 16px Inter;display:block} .bp-mkt .mm2 .rrow .tx span{font:500 14px Inter;color:#8c8c8c} .bp-mkt .mm2 .chip{font:700 14px Inter;border-radius:99px;padding:5px 14px;flex:none} .bp-mkt .mm2 .chip.solid{background:#2980b9;color:#fff} .bp-mkt .mm2 .chip.soft{background:rgba(41,128,185,.12);color:#2980b9} .bp-mkt .mm2 .chip.red{background:var(--red);color:#fff} .bp-mkt .mm2 .chip.blue{background:rgba(41,128,185,.12);color:#2980b9} @media (prefers-reduced-motion:reduce){.bp-mkt .mm2 .aurora i,.bp-mkt .mm2 .gleam::after{animation:none}} @media (max-width:820px){ .bp-mkt .lrow{flex-direction:column} .bp-mkt .lrow > svg{transform:rotate(90deg)} .bp-mkt .lmid{display:none} .bp-mkt .mm2{max-width:100%;width:100%} .bp-mkt .loop22{gap:14px} .bp-mkt .mwrap{padding:0 18px} } /* -- written-out loop step sections -- */ .bp-mkt .mstep{max-width:1000px;margin:0 auto;padding:46px 40px;border-top:1px solid var(--line)} .bp-mkt .mstep__head{margin-bottom:22px} .bp-mkt .mstep__eyebrow{font:700 12px Inter;letter-spacing:.08em;color:var(--red);text-transform:uppercase} .bp-mkt .mstep__title{font:900 clamp(26px,3vw,34px) Montserrat;color:var(--navy);margin-top:8px} .bp-mkt .mstep__intro{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start;margin-bottom:4px} .bp-mkt .mstep__intro p{font:500 16px/1.6 Inter;color:var(--mut);margin-bottom:16px} .bp-mkt .mstep__intro .btn{align-self:flex-start} .bp-mkt .mstep__checks{background:#f6f8fa;border:1px solid var(--line);border-radius:10px;padding:16px 18px;font:500 14px/1.9 Inter;color:var(--ink)} .bp-mkt .msec{border-top:1px solid #eef1f4;padding-top:20px;margin-top:20px} .bp-mkt .msec .st{display:flex;align-items:center;gap:12px;margin-bottom:10px} .bp-mkt .msec .n{background:var(--red);color:#fff;font:700 13px Inter;border-radius:99px;padding:4px 12px;flex:none} .bp-mkt .msec h3{font:800 20px Montserrat;color:var(--ink)} .bp-mkt .msec .cap{font:500 15px/1.6 Inter;color:var(--mut);margin-bottom:14px;max-width:760px} .bp-mkt .msec img{width:100%;border:1.5px solid var(--line);border-radius:10px} .bp-mkt .msec img.fit{object-fit:contain;background:#fff;max-height:620px} @media (max-width:760px){.bp-mkt .mstep{padding:38px 18px}.bp-mkt .mstep__intro{grid-template-columns:1fr}} /* ============================================================ AI FEATURES (/method/ai/) ============================================================ */ .bp-mkt .aif{max-width:1080px;margin:0 auto;padding:8px 40px} .bp-mkt .aif__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .bp-mkt .aif__card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:26px;box-shadow:0 2px 10px rgba(44,62,80,.05)} .bp-mkt .aif__card--wide{grid-column:1 / -1} .bp-mkt .aif__tag{position:absolute;top:20px;right:22px;font:700 11px Inter;letter-spacing:.05em;text-transform:uppercase;border-radius:99px;padding:5px 12px} .bp-mkt .aif__tag--live{background:rgba(41,128,185,.12);color:#2980b9} .bp-mkt .aif__tag--beta{background:rgba(231,76,60,.12);color:var(--red)} .bp-mkt .aif__icon{font-size:26px;margin-bottom:14px;line-height:1} .bp-mkt .aif__card h3{font:800 21px Montserrat;color:var(--navy);margin-bottom:10px;max-width:86%} .bp-mkt .aif__card p{font:500 15px/1.6 Inter;color:var(--mut)} .bp-mkt .aif__note{max-width:820px;margin:28px auto 0;text-align:center;font:500 15px/1.7 Inter;color:var(--mut)} @media (max-width:760px){.bp-mkt .aif__grid{grid-template-columns:1fr}.bp-mkt .aif{padding:8px 16px}.bp-mkt .aif__card h3{max-width:100%}} /* ============================================================ DASHBOARD TOUR (/method/dashboard/) ============================================================ */ .bp-mkt .dt-shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 50px rgba(44,62,80,.14);background:#fff} .bp-mkt .dt-shot__chrome{display:flex;align-items:center;gap:8px;background:#f2f5f8;border-bottom:1px solid var(--line);padding:10px 14px} .bp-mkt .dt-shot__dot{width:11px;height:11px;border-radius:50%;background:#cfd8e0} .bp-mkt .dt-shot__dot--r{background:#ff5f57}.bp-mkt .dt-shot__dot--y{background:#febc2e}.bp-mkt .dt-shot__dot--g{background:#28c840} .bp-mkt .dt-shot__url{margin-left:10px;font:600 12px Inter;color:var(--mut)} .bp-mkt .dt-shot img{width:100%;display:block} .bp-mkt .dt-caption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:12px auto 0;max-width:1120px;font:600 12px Inter;color:var(--mut)} .bp-mkt .dt-caption span:first-child{color:var(--red)} .bp-mkt .dt-hero{max-width:1120px;margin:0 auto;padding:8px 40px 0} .bp-mkt .dt-rows{max-width:1120px;margin:0 auto;padding:0 40px;display:flex;flex-direction:column;gap:56px} .bp-mkt .dt-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .bp-mkt .dt-row:nth-child(even) .dt-row__text{order:2} .bp-mkt .dt-row__eyebrow{font:700 12px Inter;letter-spacing:.07em;color:var(--red);text-transform:uppercase} .bp-mkt .dt-row__title{font:900 clamp(23px,2.6vw,30px)/1.2 Montserrat;color:var(--navy);margin:10px 0 12px} .bp-mkt .dt-row__body{font:500 16px/1.6 Inter;color:var(--mut);margin-bottom:16px} .bp-mkt .dt-row__bullets{list-style:none;display:flex;flex-direction:column;gap:9px} .bp-mkt .dt-row__bullets li{position:relative;padding-left:26px;font:500 15px/1.5 Inter;color:var(--ink)} .bp-mkt .dt-row__bullets li::before{content:"✓";position:absolute;left:0;top:0;color:#2980b9;font-weight:700} .bp-mkt .dt-cta{max-width:1120px;margin:0 auto;background:var(--navy);border-radius:16px;padding:40px 44px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;color:var(--off)} .bp-mkt .dt-cta__eyebrow{font:700 12px Inter;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.55)} .bp-mkt .dt-cta__title{font:900 clamp(24px,2.8vw,32px) Montserrat;color:#fff;margin:8px 0 12px} .bp-mkt .dt-cta__body{font:500 15px/1.65 Inter;color:rgba(255,255,255,.8);max-width:640px} .bp-mkt .dt-cta__btns{display:flex;flex-direction:column;gap:10px} @media (max-width:820px){ .bp-mkt .dt-hero,.bp-mkt .dt-rows{padding-left:18px;padding-right:18px} .bp-mkt .dt-row{grid-template-columns:1fr;gap:18px} .bp-mkt .dt-row:nth-child(even) .dt-row__text{order:0} .bp-mkt .dt-cta{grid-template-columns:1fr;padding:30px 24px} } /* ============================================================ BOOKS (/method/books/) ============================================================ */ .bp-mkt .bk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:1000px;margin:0 auto;padding:8px 40px} .bp-mkt .bk-item{display:flex;flex-direction:column;align-items:center;text-align:center} .bp-mkt .bk-cover{width:100%;max-width:280px;aspect-ratio:1/1.32;border-radius:6px;box-shadow:0 18px 40px rgba(44,62,80,.22);display:flex;flex-direction:column;justify-content:space-between;padding:22px;color:#fff;position:relative;overflow:hidden} .bp-mkt .bk-cover--reading{background:linear-gradient(155deg,#e74c3c,#c0392b)} .bp-mkt .bk-cover--writing{background:linear-gradient(155deg,#2980b9,#1f4e8a)} .bp-mkt .bk-cover--math{background:linear-gradient(155deg,#37414b,#212529)} .bp-mkt .bk-cover__top{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .bp-mkt .bk-cover__brand{font:800 12px Montserrat;letter-spacing:.14em} .bp-mkt .bk-cover__digital{display:inline-flex;align-items:center;gap:6px;font:700 9px Inter;letter-spacing:.08em;opacity:.9} .bp-mkt .bk-cover__title{flex:1;display:flex;align-items:center} .bp-mkt .bk-cover__title svg{width:100%;height:auto} .bp-mkt .bk-cover__bottom{display:flex;justify-content:space-between;align-items:flex-end;font:700 10px Inter;letter-spacing:.06em} .bp-mkt .bk-cover__edition{opacity:.8} .bp-mkt .bk-title{font:800 20px Montserrat;color:var(--navy);margin-top:20px} .bp-mkt .bk-meta{font:700 11px Inter;letter-spacing:.06em;color:var(--dusty);margin-top:6px} .bp-mkt .bk-blurb{font:500 14px/1.6 Inter;color:var(--mut);margin-top:10px;max-width:280px} @media (max-width:760px){.bp-mkt .bk-grid{grid-template-columns:1fr;gap:44px;padding:8px 18px}} /* ============================================================ STRATEGIES LIBRARY (/method/strategies/) ============================================================ */ .bp-mkt .strat-jump{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:1000px;margin:4px auto 8px;padding:0 40px} .bp-mkt .strat-jump a{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font:700 14px Montserrat;border-radius:99px;padding:9px 18px;text-decoration:none} .bp-mkt .strat-jump a span{background:rgba(255,255,255,.2);border-radius:99px;padding:1px 9px;font:700 12px Inter} .bp-mkt .strat-wrap{max-width:1080px;margin:0 auto;padding:8px 40px} .bp-mkt .strat-subject{padding:36px 0;border-top:1px solid var(--line);scroll-margin-top:100px} .bp-mkt .strat-subject:first-of-type{border-top:none} .bp-mkt .strat-subject__head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px} .bp-mkt .strat-subject__title{font:900 clamp(28px,3.4vw,40px) Montserrat;color:var(--navy)} .bp-mkt .strat-subject__count{font:700 13px Inter;letter-spacing:.05em;text-transform:uppercase;color:var(--dusty)} .bp-mkt .strat-subgroup{margin-top:22px} .bp-mkt .strat-subgroup__title{font:800 15px Inter;letter-spacing:.02em;color:var(--red);text-transform:uppercase;margin-bottom:12px} .bp-mkt .strat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} .bp-mkt .strat-card{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease} .bp-mkt .strat-card:hover{border-color:var(--dusty);box-shadow:0 4px 14px rgba(44,62,80,.08)} .bp-mkt .strat-card__num{font:700 12px Inter;color:var(--dusty);background:var(--panel);border-radius:6px;padding:4px 8px;flex:none;min-width:30px;text-align:center} .bp-mkt .strat-card__title{font:600 14px/1.35 Inter;color:var(--ink)} @media (max-width:760px){.bp-mkt .strat-wrap,.bp-mkt .strat-jump{padding-left:16px;padding-right:16px}.bp-mkt .strat-grid{grid-template-columns:1fr 1fr}} /* ============================================================ AUTHORITY / UTILITY PAGES About, Ben, Principles, Reviews, Contact, ACT, Bootcamp, Blog — same .bp-mkt component language as the money/method pages. ============================================================ */ /* -- shared prose helpers -- */ .bp-mkt .ab-lead{font:600 19px/1.6 Inter;color:var(--ink)} .bp-mkt .ab-prose p{font:500 16px/1.7 Inter;color:var(--mut);margin-bottom:14px} .bp-mkt .ab-prose p:last-child{margin-bottom:0} .bp-mkt .ab-pull{font:800 22px/1.42 Montserrat;color:var(--navy);border-left:4px solid var(--dusty);padding-left:20px;margin-top:6px} /* -- About: timeline -- */ .bp-mkt .ab-timeline{display:flex;flex-direction:column} .bp-mkt .ab-tl{display:grid;grid-template-columns:108px 1fr;gap:24px;align-items:start;padding:20px 0;border-top:1px solid var(--line)} .bp-mkt .ab-tl:first-child{border-top:none} .bp-mkt .ab-tl__year{font:900 20px Montserrat;color:var(--dusty)} .bp-mkt .ab-tl__title{font:700 18px Inter;color:var(--ink);margin-bottom:4px} .bp-mkt .ab-tl__body{font:500 15px/1.6 Inter;color:var(--mut)} @media(max-width:600px){.bp-mkt .ab-tl{grid-template-columns:1fr;gap:4px}} /* -- Ben: portrait split -- */ .bp-mkt .ben{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:start} .bp-mkt .ben__photo{width:100%;border-radius:14px;box-shadow:0 18px 44px rgba(44,62,80,.22)} .bp-mkt .ben__cap{font:700 11px Inter;letter-spacing:.08em;color:var(--dusty);text-transform:uppercase;margin-top:12px;text-align:center} .bp-mkt .ben__lead{font:600 20px/1.5 Inter;color:var(--ink);margin-bottom:16px} .bp-mkt .ben__body p{font:500 16px/1.7 Inter;color:var(--mut);margin-bottom:14px} .bp-mkt .ben__body p:last-child{margin-bottom:0} @media(max-width:820px){.bp-mkt .ben{grid-template-columns:1fr;gap:24px}.bp-mkt .ben__photo{max-width:320px}} /* -- Principles: alternating numbered panels -- */ .bp-mkt .pr-panel{position:relative;overflow:hidden;padding:56px 0} .bp-mkt .pr-panel--dark{background:var(--navy)} .bp-mkt .pr-panel__wrap{max-width:1000px;margin:0 auto;padding:0 40px;position:relative;z-index:2} .bp-mkt .pr-panel__ghost{position:absolute;top:50%;transform:translateY(-50%);font:900 220px/1 Montserrat;z-index:1;pointer-events:none;user-select:none} .bp-mkt .pr-panel--light .pr-panel__ghost{right:-6px;color:rgba(41,128,185,.07)} .bp-mkt .pr-panel--dark .pr-panel__ghost{left:-6px;color:rgba(255,255,255,.06)} .bp-mkt .pr-panel__body{max-width:660px} .bp-mkt .pr-panel--dark .pr-panel__body{margin-left:auto;text-align:right} .bp-mkt .pr-panel__label{font:700 12px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--red)} .bp-mkt .pr-panel__claim{font:900 clamp(24px,3vw,34px)/1.2 Montserrat;color:var(--navy);margin:10px 0} .bp-mkt .pr-panel--dark .pr-panel__claim{color:#fff} .bp-mkt .pr-panel__rule{width:60px;height:3px;background:var(--dusty);border-radius:2px;margin:14px 0} .bp-mkt .pr-panel--dark .pr-panel__rule{margin-left:auto} .bp-mkt .pr-panel__text{font:500 16px/1.7 Inter;color:var(--mut)} .bp-mkt .pr-panel--dark .pr-panel__text{color:rgba(255,255,255,.82)} @media(max-width:760px){ .bp-mkt .pr-panel{padding:40px 0} .bp-mkt .pr-panel__wrap{padding:0 18px} .bp-mkt .pr-panel__ghost{font-size:130px} .bp-mkt .pr-panel--dark .pr-panel__body{text-align:left} .bp-mkt .pr-panel--dark .pr-panel__rule{margin-left:0} } /* -- Reviews: receipts -- */ .bp-mkt .rv-receipts{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .bp-mkt .rv-receipt{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:26px;box-shadow:0 3px 12px rgba(0,0,0,.05)} .bp-mkt .rv-receipt__head{display:flex;align-items:center;gap:10px;margin-bottom:14px} .bp-mkt .rv-receipt__from{font:700 22px Inter;color:var(--mut)} .bp-mkt .rv-receipt__arw{font:700 18px Inter;color:var(--mut)} .bp-mkt .rv-receipt__to{font:900 26px Montserrat;color:var(--navy)} .bp-mkt .rv-receipt__lift{margin-left:auto;background:var(--red);color:#fff;font:800 13px Inter;border-radius:99px;padding:5px 12px} .bp-mkt .rv-receipt__quote{font:500 16px/1.6 Inter;color:var(--ink);margin-bottom:14px} .bp-mkt .rv-receipt__name{font:700 13px Inter;letter-spacing:.04em;color:var(--navy);text-transform:uppercase;display:block} .bp-mkt .rv-receipt__class{font:500 13px Inter;color:var(--mut)} .bp-mkt .rv-empty{border:1.5px dashed var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;justify-content:center} .bp-mkt .rv-empty h3{font:800 18px Montserrat;color:var(--navy);margin:6px 0 8px} .bp-mkt .rv-empty p{font:500 14px/1.6 Inter;color:var(--mut)} @media(max-width:760px){.bp-mkt .rv-receipts{grid-template-columns:1fr}} /* -- Blog listing (wraps WP query blocks) -- */ .bp-mkt .blog{max-width:900px;margin:0 auto;padding:8px 40px} .bp-mkt .blog .wp-block-post-template{list-style:none;display:flex;flex-direction:column;margin:0;padding:0} .bp-mkt .blog li.wp-block-post{border-top:1px solid var(--line);padding:26px 0} .bp-mkt .blog li.wp-block-post:first-child{border-top:none} .bp-mkt .blog .wp-block-post-terms{font:700 11px Inter;letter-spacing:.07em;text-transform:uppercase;color:var(--red);margin-bottom:8px} .bp-mkt .blog h3{font:800 24px Montserrat;color:var(--navy);margin-bottom:10px} .bp-mkt .blog h3 a{color:inherit;text-decoration:none} .bp-mkt .blog h3 a:hover{color:var(--dusty)} .bp-mkt .blog .wp-block-post-excerpt{font:500 16px/1.7 Inter;color:var(--mut)} .bp-mkt .blog .wp-block-post-excerpt__more-text{display:none} .bp-mkt .blog .wp-block-query-pagination{margin-top:28px;gap:10px;font:700 14px Inter} .bp-mkt .blog .wp-block-query-pagination a{color:var(--navy);text-decoration:none} .bp-mkt .blog .wp-block-query-no-results p{font:500 16px/1.7 Inter;color:var(--mut);text-align:center;padding:20px 0} @media(max-width:760px){.bp-mkt .blog{padding:8px 18px}} /* -- ACT waitlist form -- */ .bp-mkt .wait{display:flex;gap:10px;flex-wrap:wrap;max-width:460px;margin:0 auto} .bp-mkt .wait input{flex:1;min-width:220px;border:1.5px solid var(--line);border-radius:8px;padding:13px 16px;font:500 15px Inter;color:var(--ink);background:#fff} .bp-mkt .wait input:focus{outline:none;border-color:var(--dusty)} /* -- Bootcamp schedule note -- */ .bp-mkt .bc-sched{width:100%;border-collapse:collapse;font:500 15px Inter} .bp-mkt .bc-sched td{padding:12px 0;border-top:1px solid #e0e6ec} .bp-mkt .bc-sched tr:first-child td{border-top:none} .bp-mkt .bc-sched td:first-child{font:700 15px Inter;color:var(--ink)} .bp-mkt .bc-sched td:last-child{text-align:right;font:500 14px Inter;color:var(--mut)} /* ============================================================ Money-page band system (.sc-*) — full-bleed background "chapters". Shared by the SAT Course, On Demand, One-on-One and Guarantee pages so every money page carries one art direction. Promoted out of the SAT page's inline