@media (max-width: 767px) { /* 1. no more inner scrollbar */ body .wp-block-kadence-table { overflow-x: visible !important; overflow-y: visible !important; } /* 2. full-bleed: reclaim the ~68px of section padding */ body .wp-block-kadence-table { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% – 50vw) !important; margin-right: calc(50% – 50vw) !important; padding: 0 8px !important; box-sizing: border-box !important; } /* 3. fixed column budget: 38% label + 4 x 15.5% tiers */ body .kb-table { table-layout: fixed !important; width: 100% !important; } body .kb-table tr > *:first-child { width: 38% !important; } body .kb-table tr > *:not(:first-child) { width: 15.5% !important; } body .kb-table td { padding: 8px 3px !important; vertical-align: middle !important; } /* 4. header row: logo images -> compact colour-coded wordmarks */ body .kb-table tr:first-child .wp-block-kadence-image { display: none !important; } body .kb-table tr:first-child td:not(:first-child) { padding: 12px 2px !important; } body .kb-table tr:first-child td:not(:first-child)::before { content: “”; display: block; width: 11px; height: 15px; margin: 0 auto 5px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); } body .kb-table tr:first-child td:not(:first-child)::after { display: block; font-family: Ubuntu, sans-serif; font-weight: 700; font-size: 10px; line-height: 1.1; letter-spacing: -0.2px; text-transform: uppercase; } body .kb-table tr:first-child td:nth-child(2)::before { background: #00b5ba; } body .kb-table tr:first-child td:nth-child(2)::after { content: “Resident”; color: #00b5ba; } body .kb-table tr:first-child td:nth-child(3)::before { background: #006eb3; } body .kb-table tr:first-child td:nth-child(3)::after { content: “Fellow”; color: #006eb3; } body .kb-table tr:first-child td:nth-child(4)::before { background: #573472; } body .kb-table tr:first-child td:nth-child(4)::after { content: “Mentor”; color: #573472; } body .kb-table tr:first-child td:nth-child(5)::before { background: #f05627; } body .kb-table tr:first-child td:nth-child(5)::after { content: “Mentor+”; color: #f05627; } /* 5. feature label column */ body .kb-table td:first-child .wp-block-kadence-advancedheading { font-size: 13px !important; line-height: 1.25 !important; } body .kb-table td:first-child .kb-adv-heading-icon svg { width: 13px !important; height: 13px !important; } /* 6. check icons */ body .kb-table .kt-svg-icons svg { width: 20px !important; height: 20px !important; } body .kb-table .kt-svg-icon-wrap { line-height: 0 !important; } /* 7. “not included” cells get a dash so the row still reads across */ body .kb-table tr:not(:first-child) td:not(:first-child):not(:has(svg)):not(:has(a))::after { content: “\2013”; color: #d5d5d5; font-size: 16px; } /* 8. Join button row */ body .kb-table tr:last-child .kb-button { font-size: 11px !important; padding: 7px 4px !important; border-width: 1px !important; border-radius: 8px !important; } } /* — very small phones ( .wp-block-kadence-column > .kt-inside-inner-col { padding: 0 18px 18px !important; } /* —- 3. smaller tier wordmark (and drop its -27px overlap, which only existed to tuck the divider underneath) —- */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .wp-block-kadence-image { margin-bottom: 0 !important; } body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .wp-block-kadence-image figure { max-width: 104px !important; margin-left: auto !important; margin-right: auto !important; } /* —- 4. drop the divider — the whole wrapper column, not just the spacer inside it: the wrapper carries a -20px bottom margin that would otherwise pull the tagline over the wordmark —- */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:first-child > .kt-inside-inner-col > .wp-block-kadence-column { display: none !important; } /* —- 4b. the header column carries a 48px bottom margin sized for the description block that is now gone —- */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:first-child { margin-bottom: 6px !important; } /* —- 5. tagline stays (shrunk), long description goes —- */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:first-child > .kt-inside-inner-col > p.wp-block-kadence-advancedheading:nth-of-type(1) { font-size: 15px !important; line-height: 1.25 !important; margin: 4px 0 12px !important; max-width: none !important; } /* the MENTOR+ tagline carries a hard
sized for the narrow desktop column — on one full-width card it should read on a single line */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:first-child > .kt-inside-inner-col > p.wp-block-kadence-advancedheading:nth-of-type(1) br { display: none !important; } body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:first-child > .kt-inside-inner-col > p.wp-block-kadence-advancedheading:nth-of-type(2) { display: none !important; } /* —- 6. price / per-month / billed-yearly on ONE baseline row —- */ /* the row that holds [price] + [the /mo + billed-yearly group] */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .kb-row-layout-wrap .kt-inside-inner-col:has(> p.wp-block-kadence-advancedheading + .wp-block-kadence-column) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; gap: 2px 8px !important; } /* the price itself — the only heading directly followed by a column */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .kb-row-layout-wrap p.wp-block-kadence-advancedheading:has(+ .wp-block-kadence-column) { font-size: 34px !important; line-height: 1 !important; font-weight: 700 !important; margin: 0 !important; } /* the “/mo” + “billed yearly” group, inline next to the price */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .kb-row-layout-wrap p.wp-block-kadence-advancedheading + .wp-block-kadence-column { margin: 0 !important; width: auto !important; flex: 0 0 auto !important; } body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .kb-row-layout-wrap p.wp-block-kadence-advancedheading + .wp-block-kadence-column > .kt-inside-inner-col { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; gap: 2px 8px !important; padding: 0 !important; } /* “USD / Monthly*” -> “/mo” */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .kb-row-layout-wrap p.wp-block-kadence-advancedheading + .wp-block-kadence-column > .kt-inside-inner-col > p.wp-block-kadence-advancedheading:nth-of-type(1) { font-size: 0 !important; margin: 0 !important; line-height: 1 !important; } body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .kb-row-layout-wrap p.wp-block-kadence-advancedheading + .wp-block-kadence-column > .kt-inside-inner-col > p.wp-block-kadence-advancedheading:nth-of-type(1)::after { content: “/mo”; font-size: 14px !important; font-weight: 500; } /* “$7,895 Billed Yearly” (absent in the month-to-month state) */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .kb-row-layout-wrap p.wp-block-kadence-advancedheading + .wp-block-kadence-column > .kt-inside-inner-col > p.wp-block-kadence-advancedheading:nth-of-type(2) { font-size: 13px !important; margin: 0 !important; line-height: 1 !important; } body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .kb-row-layout-wrap small { font-size: 13px !important; } /* —- 7. CTA —- */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:last-child > .kt-inside-inner-col > .kb-row-layout-wrap { margin-bottom: 0 !important; } body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .wp-block-kadence-advancedbtn { margin: 14px 0 0 !important; } body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) .kb-button { padding: 9px 34px !important; font-size: 16px !important; min-width: 200px !important; justify-content: center !important; } } /* — very small phones ( .wp-block-kadence-column > .kt-inside-inner-col { padding: 0 12px 16px !important; } } /* ========================================================================== TABLET (768-1024px) Same idea, four cards across: the description is what makes these columns 615px tall and pushes the price below the fold. Drop it, shrink the tagline so it stops wrapping to three lines, and close the 48px gap that only existed to separate the description from the price. ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* hide the description */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:first-child > .kt-inside-inner-col > p.wp-block-kadence-advancedheading:nth-of-type(2) { display: none !important; } /* smaller tagline */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:first-child > .kt-inside-inner-col > p.wp-block-kadence-advancedheading:nth-of-type(1) { font-size: 17px !important; line-height: 1.2 !important; margin: 0 0 4px !important; } /* bring the price up */ body .kt-has-4-columns:has(.wp-block-kadence-advancedbtn) > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:first-child { margin-bottom: 16px !important; } }