its paragraph styling back.
*
* Live builds a product description with DOM calls, so its
and an . HTML cannot write that down — a
* parser closes the outer
at the first inner one — so duplicate_from_live.py
* turns it into a
and marks it data-mys-unnested.
*
* That costs it every rule live.css keys on the element name. The one that
* matters is .block-product p, which is where a description gets its typeface:
* without it the text fell back to the page default of DM Sans, a font nothing
* here ships, and the browser's substitute is wider — the
inside a
* description wrapped onto a second line and three product pages ran 30px
* taller than live's.
*
* The two rules below restate that one, unchanged, against the marker attribute
* instead of the tag. They read the same custom properties, so whatever the
* block sets for its body text still decides what a description looks like.
*/
[data-mys-unnested] {
font-family: var(--body-font-family);
font-size: var(--body-font-size);
font-style: var(--body-font-style);
font-weight: var(--body-font-weight);
line-height: var(--body-line-height);
color: var(--body-color);
text-decoration: var(--body-text-decoration);
text-transform: var(--body-text-transform);
letter-spacing: var(--body-letter-spacing);
}
@media screen and (width <= 920px) {
[data-mys-unnested] {
font-family: var(--body-m-font-family, var(--body-font-family));
font-size: var(--body-m-font-size, var(--body-font-size));
font-style: var(--body-m-font-style, var(--body-font-style));
font-weight: var(--body-m-font-weight, var(--body-font-weight));
line-height: var(--body-m-line-height, var(--body-line-height));
color: var(--body-m-color, var(--body-color));
text-decoration: var(--body-m-text-decoration, var(--body-text-decoration));
text-transform: var(--body-m-text-transform, var(--body-text-transform));
letter-spacing: var(--body-m-letter-spacing, var(--body-letter-spacing));
}
}
/* WordPress's own skip link, hidden until a keyboard reaches it.
Normally core's stylesheet does this, but the mirror loads live.css and
nothing else — the theme's style.css is not enqueued on a mirrored page — so
nothing defined .screen-reader-text and the link drew as ordinary text: 18px
of "Skip to content" above the header, pushing every one of the 137 pages
down by that much. Clipped rather than display:none, so a screen reader can
still reach it. */
.screen-reader-text:not(:focus) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* First-party before/after comparisons on a mirrored page.
========================================================
A mirror deliberately does not load style.css or design.css because both
redefine the builder's layout classes. The home page is the exception inside
that exception: build_home_from_live.py replaces two third-party comparison
embeds with this theme-owned component. Without these isolated rules, the
images' width attributes become the layout and a 390px phone becomes 799px
wide. Nothing here reaches outside .mys-ba or its one captured home band. */
.mys-ba {
display: grid;
gap: 1rem;
margin: 1.5rem 0;
min-width: 0;
max-width: 100%;
}
.mys-ba__pane {
margin: 0;
min-width: 0;
}
.mys-ba__pane img {
display: block;
width: 100%;
height: auto;
}
.mys-ba__pane figcaption {
font-size: 0.9rem;
padding-top: 0.4rem;
color: #1a1a1a;
}
.mys-ba--live {
--mys-ba-split: 50%;
display: block;
position: relative;
overflow: hidden;
}
.mys-ba--live .mys-ba__pane--before {
position: relative;
}
.mys-ba--live .mys-ba__pane--after {
position: absolute;
inset: 0;
clip-path: inset( 0 calc( 100% - var( --mys-ba-split ) ) 0 0 );
}
.mys-ba--frame.mys-ba--live {
width: 100%;
max-width: 100%;
aspect-ratio: var( --mys-ba-ratio, 3 / 4 );
background: #fff;
}
.mys-ba--frame.mys-ba--live .mys-ba__pane {
position: absolute;
inset: 0;
overflow: hidden;
}
.mys-ba--frame.mys-ba--live .mys-ba__pane img {
position: absolute;
top: 0;
width: auto;
height: 100%;
max-width: none;
}
.mys-ba--frame.mys-ba--live .mys-ba__pane--before img {
right: 0;
}
.mys-ba--frame.mys-ba--live .mys-ba__pane--after img {
left: 0;
}
.mys-ba--frame.mys-ba--live .mys-ba__pane figcaption {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset( 50% );
white-space: nowrap;
}
.mys-ba--live::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: var( --mys-ba-split );
width: 2px;
background: #ff4d97;
pointer-events: none;
}
.mys-ba__range {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY( -50% );
margin: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
}
.mys-ba__range:focus-visible {
outline: 3px solid #ff4d97;
outline-offset: 4px;
}
.mys-ba__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 3px solid #fff;
background: #ff4d97;
cursor: ew-resize;
}
.mys-ba__range::-moz-range-thumb {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 3px solid #fff;
background: #ff4d97;
cursor: ew-resize;
}
.mys-ba__range::-webkit-slider-runnable-track,
.mys-ba__range::-moz-range-track {
background: transparent;
}
#ai-fbwilA .mys-ba {
margin: 0;
}
@media (max-width: 920px) {
#ai-fbwilA .block-layout {
grid-template-columns: 1fr;
grid-template-rows: repeat( 4, min-content );
row-gap: 1.25rem;
min-height: 0;
}
#ai-fbwilA .layout-element {
grid-column: 1;
min-width: 0;
}
#ai-fbwilA .layout-element:not(:has(.text-box)) {
grid-row: 1;
}
#ai-fbwilA .layout-element:has(.text-box) {
grid-row: 2;
}
#ai-fbwilA .layout-element:not(:has(.text-box)) ~ .layout-element:not(:has(.text-box)) {
grid-row: 3;
}
#ai-fbwilA .layout-element:has(.text-box) ~ .layout-element:has(.text-box) {
grid-row: 4;
}
}
@media (min-width: 921px) {
#ai-fbwilA .block-layout {
grid-template-rows: 27px 533px 32px 53.1979px 89.1979px 53.1979px 0;
grid-template-columns: 8.42% 32.68% 12.83% 32.68% 1.06% 12.34%;
min-height: 0;
}
#ai-fbwilA .layout-element:has(.text-box) {
grid-row: 4 / 6;
}
#ai-fbwilA .layout-element:has(.text-box) ~ .layout-element:has(.text-box) {
grid-column: 4 / 5;
}
}
/* The related-products list, back to one column on a phone.
Live sets its own column count in an inline style on .block-product-list, and
its runtime rewrites that style whenever the viewport changes: 4 columns on a
laptop, 2 on a tablet, 1 on a phone. The capture froze whatever the value was
at the moment it ran — 4 — and the runtime that would have corrected it was
stripped with the rest of the builder's JavaScript.
So on a phone the copy laid three products across a 343px column: each cell
68px wide, each product photograph shrunk from 345px tall to 70px. That is the
whole of the missing height on the six product pages the mobile sweep flagged
— 1095px on four of them, because they carry the same list.
The column count is set here rather than the variable it comes from, since the
variable's name is a build hash and four of the eleven pages that carry this
block do not use that name. The breakpoints are live's own, read off live at
390, 600, 768, 900, 1000 and 1440px. !important because an inline style would
otherwise win. */
@media screen and (max-width: 600px) {
.product-list__content {
grid-template-columns: 1fr !important;
}
}
@media screen and (min-width: 601px) and (max-width: 920px) {
.product-list__content {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Let the page shrink to the screen instead of breaking words to fit it.
=====================================================================
The builder lays every page out on a fixed pixel grid: 1224px wide above its
920px breakpoint, 360px below. When the screen is narrower than that grid, it
scales the grid down — the columns come out as fractions, 59.25px and
102.906px — but it leaves the type at whatever size it was. So the boxes
shrink and the words in them do not.
Past a certain width that stops being cramped and starts being broken. A
heading cell that is 80px wide on a desktop is 41px wide at 921px, "Proven
Results" no longer fits, and overflow-wrap splits the word: "Prove" on one
line and "n" on the next. audit_responsive.py counted fifteen of those on the
home page alone — "Superior", "Affordable", "COMPANY", "Neuropathy",
"RODRIGUEZ," — and live does exactly the same thing at exactly the same
widths. This is not something the duplicate introduced. It is what DJ meant
by "cutting up words. That looks like shit."
The fix is to scale the whole page by the same factor the builder is already
scaling its grid by, so the text comes down with the boxes. zoom is the one
property that does that to a layout and its text together, and unlike a
transform it still contributes the right height to the document, so nothing
below the fold moves and nothing scrolls sideways.
The 16px is the scrollbar. A desktop browser reserves a gutter that 100vw
does not know about, so dividing by the raw viewport width overshoots and
hands back the sideways scroll this is meant to remove. Where the scrollbar
is an overlay and takes no room — every phone and tablet — the page ends up
16 device pixels narrower than it could be, which is invisible and is the
safe direction to be wrong in.
Three bands, because there are two grids and a gap between them:
Above the builder's breakpoint, from 921px to 1223px, the desktop grid is
being squeezed. Below 375px the mobile grid is. */
@media screen and (min-width: 921px) and (max-width: 1223px) {
main.page {
zoom: calc((100vw - 16px) / 1224px);
}
}
@media screen and (max-width: 374px) {
main.page {
zoom: calc((100vw - 16px) / 360px);
}
}
/* And the tablet gap, 601px to 920px, which is the opposite problem.
Nothing is squeezed here — the mobile grid fits at its full 360px with room
to spare, because `--c27f45b8:360px` is written into the markup of every
block on the site and 360px is what it stays. So an iPad held upright, 768px
across, gets a 360px ribbon of website down the middle with 204px of white
either side of it. It is not broken and no word is split; it is simply half a
screen of nothing, which is the other half of "adjusting to the screen".
601px is the builder's own tablet breakpoint, not a number picked here, and
starting there is what keeps phones out of this. A 390px phone is inside the
360px design's natural range and must stay at 1, or every page grows 4% and
stops matching live at the width most visitors actually arrive on.
Capped at 1.5 because filling the width exactly is the wrong goal. The
uncapped factor is 2.09 at 768px and 2.51 at 919px, and a 16px body set at
2.5 is a large-print edition, not a website. At 1.5 the column comes out
540px — a comfortable measure, 70% of an iPad — and the type lands where a
tablet reader wants it. The min() keeps the arithmetic honest below 601px
should the band ever move down. */
@media screen and (min-width: 601px) and (max-width: 920px) {
main.page {
zoom: min(1.5, calc((100vw - 16px) / 360px));
}
}
/* The merged "3 Easy Steps" block — see tools/merge_steps_block.py.
The home page carried this block twice with two different sets of steps, one
for a visit to the office and one for an online visit, both titled the same
and neither saying which reader it was for. Now there is one block: step 1
asks which, and steps 2 and 3 answer to that.
The switch is two radio buttons and the selectors below. No JavaScript, for
the same reason the headline rotator has none — every script on a mirrored
page is stripped, and a block that has not hydrated is a block showing the
wrong path to whoever reads it first.
Lives here rather than in style.css because a mirrored page loads fonts.css,
live.css and this file, and nothing else. */
.mys-steps {
max-width: 1180px;
margin: 0 auto;
padding: 8px 16px 24px;
}
.mys-steps__heading {
text-align: center;
margin: 0 0 8px;
}
/* Off the screen but still in the tab order, so the choice can be made from a
keyboard. display:none would take it out of the tab order entirely and the
labels below would become unreachable without a mouse. */
.mys-steps__switch {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mys-steps__list {
list-style: none;
max-width: 42rem;
margin: 0 auto;
padding: 0;
display: grid;
gap: 24px;
}
.mys-step {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
/* A fixed frame, because these five photographs are five different shapes: a
square vial, a wide scan export, a 396px stock still and a tall phone photo.
Left to themselves the three cards come out three different heights and the
row of steps reads as a mistake. */
.mys-step__photo {
display: block;
width: 100%;
/* height:auto is not decoration. Every one of these images carries a height
attribute, which is a presentational hint the browser treats as a real
height — and aspect-ratio is ignored whenever both dimensions are already
definite. Without this line the square vial drew 1024px tall inside a
341px card and the first step ran to 1332px on a phone. */
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
}
.mys-step__num {
margin: 16px 20px 0;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgb(255, 77, 151);
}
.mys-step__title {
margin: 4px 20px 0;
font-size: 1.25rem;
line-height: 1.3;
}
.mys-step__copy {
margin: 8px 20px 20px;
line-height: 1.55;
}
/* The question that decides the two steps below it. */
.mys-steps__choice-label {
margin: 0 20px 8px;
color: rgb(255, 77, 151);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mys-steps__choice {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 20px 14px;
}
.mys-steps__pick {
flex: 1 1 auto;
min-width: 9rem;
padding: 11px 16px;
border: 2px solid rgb(255, 77, 151);
border-radius: 28px;
background: #fff;
color: rgb(255, 77, 151);
font-weight: 600;
text-align: center;
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
}
.mys-steps__pick:hover {
background: rgba(255, 77, 151, 0.08);
}
/* Which one is chosen, and which two steps go with it. Both step sets are in
the markup; only one is ever on the page. */
#mys-path-office:checked ~ .mys-steps__list .mys-steps__pick--office,
#mys-path-online:checked ~ .mys-steps__list .mys-steps__pick--online {
background: rgb(255, 77, 151);
color: #fff;
}
.mys-step--office,
.mys-step--online,
.mys-steps__prescreen {
display: none !important;
}
#mys-path-office:checked ~ .mys-steps__list .mys-step--office,
#mys-path-online:checked ~ .mys-steps__list .mys-step--online {
display: flex !important;
}
#mys-path-office:checked ~ .mys-steps__list .mys-steps__prescreen,
#mys-path-online:checked ~ .mys-steps__list .mys-steps__prescreen {
display: inline-flex !important;
}
.mys-steps__prescreen {
align-self: flex-start;
align-items: center;
justify-content: center;
min-height: 48px;
margin: 0 20px 20px;
padding: 0 24px;
text-decoration: none;
}
/* The focus ring belongs on the label, since the input it belongs to is the one
clipped out of sight above. */
.mys-steps__switch:focus-visible ~ .mys-steps__list .mys-steps__pick--office,
.mys-steps__switch:focus-visible ~ .mys-steps__list .mys-steps__pick--online {
outline: 3px solid rgb(64, 148, 68);
outline-offset: 3px;
}
#mys-path-office:focus-visible ~ .mys-steps__list .mys-steps__pick--online,
#mys-path-online:focus-visible ~ .mys-steps__list .mys-steps__pick--office {
outline: none;
}
.mys-steps__note {
margin: 24px auto 0;
max-width: 42rem;
text-align: center;
line-height: 1.55;
}
.mys-steps__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 16px;
}
/* live.css sizes .grid-button from the builder's own custom properties, and the
two here are copies of live's buttons, so they inherit that sizing. All that
is left is to stop them stretching edge to edge on a wide screen. */
.mys-steps__actions .grid-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 28px;
text-decoration: none;
}
/* Three across once there is room. Live's own breakpoint. */
@media screen and (min-width: 921px) {
#mys-path-office:checked ~ .mys-steps__list,
#mys-path-online:checked ~ .mys-steps__list {
max-width: none;
grid-template-columns: repeat(3, 1fr);
align-items: start;
}
}
/* Home-only repairs.
==================
The home builder stores its header and footer separately from its content.
page-mirror intentionally prints post_content only, so the latest rebuild
dropped both pieces of chrome. build_home_from_live.py now puts them back in
the home source. These rules stay isolated from the other mirrored pages. */
/* The three header rules that were here moved to assets/css/header.css on
2026-09-12, and widened from `.mys-home-header` to `.block-header`.
They hid the shopping cart and fixed the grid that the cart's column left
behind, and they were scoped to the home page. That scope is why the home
page's bar looked right while /calendar/ and /affordable-healthcare/ — the
same markup, the same stylesheet — showed a cart and sat a column off.
mirror.css is enqueued on page-mirror pages only. The bar is now on all 249,
so its rules had to load on all 249. Moved rather than copied: two stylesheets
owning one component is how the two headers drifted apart in the first
place. */
/* Keep the full-bleed section backgrounds, but stop words and cards from
touching the glass. Desktop gets a calmer 1160px content measure; phones keep
at least 20px outside the builder's own internal padding. */
.mys-home-section > .block-layout {
max-width: min(1160px, calc(100% - 40px));
}
/* Team cards become real rows on phones. The copied builder put Dr. Rodriguez's
portrait in one narrow column and his name in a separate 8% column, so CSS
could only break RODRIGUEZ through the word. Pair each portrait with its name
and let the name column own the remaining width. */
@media screen and (max-width: 920px) {
#ai-_JDRo1 .block-layout {
grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1.2fr) !important;
grid-template-rows: repeat(2, auto) repeat(3, minmax(8.5rem, auto)) auto !important;
gap: 1rem 1.25rem;
max-width: min(38rem, calc(100% - 40px));
min-height: 0 !important;
padding: 1.25rem 0 !important;
}
#ai-_JDRo1 .layout-element { min-width: 0; height: auto; align-self: center; }
#ai-_JDRo1 .layout-element:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
#ai-_JDRo1 .layout-element:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
#ai-_JDRo1 .layout-element:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
#ai-_JDRo1 .layout-element:nth-child(5) { grid-area: 3 / 2 / 4 / 3; }
#ai-_JDRo1 .layout-element:nth-child(6) { grid-area: 4 / 1 / 5 / 2; }
#ai-_JDRo1 .layout-element:nth-child(4) { grid-area: 4 / 2 / 5 / 3; }
#ai-_JDRo1 .layout-element:nth-child(7) { grid-area: 5 / 1 / 6 / 2; }
#ai-_JDRo1 .layout-element:nth-child(8) { grid-area: 5 / 2 / 6 / 3; }
#ai-_JDRo1 .layout-element:nth-child(9) { grid-area: 6 / 1 / 7 / 3; }
#ai-_JDRo1 :is(.image, .image img) {
width: 100% !important;
height: 100% !important;
min-height: 8.5rem;
object-fit: cover;
border-radius: 1rem;
}
#ai-_JDRo1 [data-qa="layout-element-wrapper:ai-ex1qlr"] h4,
#ai-_JDRo1 [data-qa="layout-element-wrapper:ai-ex1qlr"] a,
#ai-_JDRo1 .layout-element:nth-child(4) :is(h3, h4, a),
#ai-_JDRo1 .layout-element:nth-child(8) :is(h3, h4, a) {
font-size: clamp(1rem, 5vw, 1.35rem) !important;
line-height: 1.2 !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
text-wrap: balance !important;
white-space: normal !important;
}
}
/* Calendar page: the "booking today secures..." text block (#zcNanD) sits in a
grid row sized by --grid-template-rows / --small-desktop-grid-template-rows,
and at normal desktop widths that row collapses to 0 height instead of the
~338px its own iframe needs. The iframe still renders at its real height, but
because its grid cell reports 0px, the page below (#calendar's booking
buttons) starts at the same Y position and the two blocks print on top of
each other. Forcing the row height stops the collapse without touching the
shared .block-layout/.layout-element grid system every mirror page uses. */
#zcNanD .block-layout {
grid-template-rows: minmax(6px, auto) minmax(360px, auto) 1fr !important;
}
#zcNanD .layout-element {
min-height: 360px !important;
}
/* Home hero rotator and proof row. Captured live markup put the rotating words
in a 50px iframe, so long phrases clipped on phones and could not inherit
Lato. The replacement stays in the page grid and scales with its real width. */
#ai-8NSp5C #ztm_c5 {
width: 100%;
height: 100%;
overflow: visible;
}
#ai-8NSp5C [data-qa="layout-element-wrapper:ztm_c5"] {
height: 106px;
min-height: 106px;
}
/* sitev3 zoom rotator (DJ-approved look, MYS 2026-09-04) — generated by
ultron/playbooks/website-v3/scripts/hero_zoom_rotator.py css_block("#ff2f9e").
White letters, 2px hot-pink stroke, zoom in / hold / zoom out on a 2.6s beat.
The animation only replays because mirror-reveal.js rebuilds the spans each
cycle (replaceChildren) — do not swap that back to a class toggle. */
.mys-home-rotator {
display: grid;
place-items: center;
width: 100%;
height: 100%;
min-height: 2.04em;
overflow: visible;
color: #fff;
font-family: var(--font-primary, Lato, sans-serif);
font-weight: 800;
letter-spacing: .01em;
font-size: clamp(2.25rem, 4.1vw, 3.25rem);
line-height: 1.02;
text-align: center;
-webkit-text-stroke: 2px #ff2f9e;
paint-order: stroke fill;
text-shadow: 0 0 10px #ff2f9ee6, 0 2px 3px rgba(0, 0, 0, .35);
}
.mys-home-rotator__phrase {
display: grid;
gap: 0;
max-width: 100%;
}
.mys-home-rotator__phrase > span {
display: block;
white-space: nowrap;
animation: sitev3-zoom 2.6s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes sitev3-zoom {
0% { transform: scale(.55); opacity: 0; }
14% { transform: scale(1.12); opacity: 1; }
24% { transform: scale(1); }
82% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.mys-home-rotator__phrase > span {
animation: none;
}
}
.mys-home-proof-row {
z-index: 12;
grid-row: 14 / 15;
grid-column: 3 / 16;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: 18px;
color: #fff;
font-family: var(--font-primary, Lato, sans-serif);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
text-align: center;
}
.mys-home-proof-row a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.18em;
}
.mys-home-google-proof {
z-index: 13;
grid-row: 16 / 17;
grid-column: 4 / 15;
place-self: start center;
width: min(340px, 100%);
margin-top: 0;
}
.mys-home-google-proof iframe {
display: block;
width: 100%;
height: 90px;
border: 0;
background: transparent;
}
@media screen and (max-width: 920px) {
#ai-8NSp5C [data-qa="layout-element-wrapper:ztm_c5"] {
height: 76px;
min-height: 76px;
}
.mys-home-rotator {
font-size: 2.25rem;
}
#ai-8NSp5C [data-qa="layout-element-wrapper:ai-6qnnmp"] {
transform: translateY(-24px) !important;
}
.mys-home-proof-row {
grid-row: 14 / 21;
grid-column: 1 / 4;
grid-template-columns: 1fr;
gap: 7px;
font-size: 0.98rem;
}
.mys-home-google-proof {
grid-row: 21 / 22;
grid-column: 1 / 4;
width: min(320px, 100%);
margin-top: 6px;
}
}
/* The prior Kiley repair lived in style.css, which page-mirror never loads.
Repeat the isolated rule in the sheet that actually owns the home mirror. */
#ai-fbwilA .mys-ba--frame.mys-ba--live .mys-ba__pane--before img {
min-width: 100%;
object-fit: cover;
object-position: center 20%;
}
.mys-story-link {
color: rgb(255, 77, 151);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
}
.mys-story-link:hover,
.mys-story-link:focus-visible {
color: rgb(64, 148, 68);
}
/* Result disclosures must stay beside the patient result they qualify. One
compact footnote sits below the pair instead of repeating a large card. */
.mys-result-marker {
margin-left: 2px;
color: rgb(255, 77, 151);
font-size: 0.7em;
font-weight: 700;
vertical-align: super;
}
.mys-live-disclosure {
max-width: 1160px;
margin: 8px auto 28px;
padding: 10px 20px;
border-top: 1px solid rgba(255, 77, 151, 0.2);
border-bottom: 1px solid rgba(255, 77, 151, 0.2);
background: #fff7fb;
color: #4d3a42;
text-align: center;
}
.mys-live-disclosure::before {
content: "* Results note";
display: inline;
margin-right: 5px;
color: rgb(255, 77, 151);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mys-live-disclosure .mys-disclaimer {
display: inline;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font-size: 0.74rem;
line-height: 1.4;
}
.mys-live-disclosure .mys-disclaimer + .mys-disclaimer::before {
content: " ";
}
/* Services: one clear core offer plus three short paths. Homepage should guide,
not force a phone visitor through a six-video catalogue. */
.mys-home-services {
padding: 42px clamp(20px, 4vw, 52px);
background: linear-gradient(145deg, rgb(255, 77, 151), rgb(183, 27, 162));
color: #fff;
font-family: var(--body-font-family, Lato, sans-serif);
}
.mys-home-services__inner {
max-width: 1160px;
margin: 0 auto;
}
.mys-home-services__header {
margin-bottom: 22px;
text-align: center;
}
.mys-home-services__header h2 {
margin: 0;
font-size: clamp(2rem, 5vw, 3.25rem);
line-height: 1.1;
}
.mys-home-services__header p {
margin: 8px auto 0;
max-width: 48rem;
font-size: clamp(1rem, 2.5vw, 1.2rem);
line-height: 1.45;
}
.mys-services-feature {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
overflow: hidden;
border-radius: 20px;
background: #fff;
color: #1d1e20;
box-shadow: 0 16px 36px rgba(71, 13, 58, 0.18);
}
.mys-services-feature > img {
display: block;
width: 100%;
height: 100%;
min-height: 330px;
object-fit: cover;
object-position: center 32%;
}
.mys-services-feature__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(24px, 4vw, 46px);
}
.mys-services-feature h3,
.mys-service-card h3 {
margin: 4px 0 10px;
line-height: 1.2;
}
.mys-services-feature h3 {
font-size: clamp(1.65rem, 3vw, 2.25rem);
}
.mys-services-feature p,
.mys-service-card p {
line-height: 1.5;
}
.mys-service-card__eyebrow {
margin: 0 !important;
color: rgb(255, 77, 151);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.mys-services-feature a,
.mys-service-card a {
color: inherit;
text-underline-offset: 0.18em;
}
.mys-service-card__link {
align-self: flex-start;
margin-top: 8px;
color: rgb(255, 77, 151) !important;
font-weight: 700;
}
.mys-services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.mys-service-card {
display: flex;
overflow: hidden;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 16px;
background: rgba(255, 255, 255, 0.96);
color: #1d1e20;
}
/* The photo sits ~10,900px down the page and loads lazily, so this colour is
what a phone on a slow connection actually looks at for a moment. It used to
be #2d2430, and a near-black rectangle where a photo belongs reads as broken
rather than as loading -- that is precisely how the 2026-09-12 readiness sweep
came to file "Our Services renders every card image blank" as a launch
blocker against a module that was fine. A soft tint of the card's own colour
reads as waiting. The video card keeps the dark frame below, because a player
letterbox is supposed to be dark. */
.mys-service-card__media {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f3e7ee;
}
.mys-service-card__video {
background: #2d2430;
}
.mys-service-card__media img,
.mys-service-card__media iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.mys-service-card__body {
flex: 1;
padding: 20px;
}
.mys-service-card h3 {
font-size: 1.18rem;
}
.mys-service-card p:last-child {
margin: 0;
}
.mys-home-services__all {
margin: 22px 0 0;
text-align: center;
}
.mys-home-services__all a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 26px;
border: 2px solid #fff;
border-radius: 28px;
color: #fff;
font-weight: 700;
text-decoration: none;
}
@media screen and (max-width: 700px) {
.mys-home-services {
padding: 32px 20px;
}
.mys-services-feature {
grid-template-columns: 1fr;
}
.mys-services-feature > img {
height: auto;
min-height: 0;
aspect-ratio: 16 / 10;
object-position: center 28%;
}
.mys-services-feature__body {
padding: 22px;
}
.mys-services-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.mys-service-card {
width: 100%;
}
.mys-service-card__body {
padding: 16px 18px;
}
}
/* Patient reviews. Home uses the original full Trustindex widget from the live
site; maintained service pages keep verified first-party review cards. */
.mys-home-reviews {
padding: 44px clamp(20px, 4vw, 52px) 38px;
overflow: hidden;
background: #fff7fb;
color: #1d1e20;
font-family: var(--body-font-family, Lato, sans-serif);
}
.mys-home-reviews h2 {
margin: 0 auto 8px;
max-width: 1160px;
color: rgb(255, 77, 151);
font-size: clamp(1.75rem, 4vw, 2.5rem);
line-height: 1.2;
text-align: center;
}
.mys-home-reviews__lead,
.mys-home-reviews__link,
.mys-home-reviews > .mys-disclaimer {
max-width: 72ch;
margin: 0 auto;
text-align: center;
}
.mys-original-reviews-widget {
width: 100%;
max-width: 1224px;
height: 335px;
margin: 24px auto 12px;
overflow: hidden;
}
.mys-original-reviews-widget iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
background: transparent;
}
.mys-reviews-viewport {
margin: 24px calc(clamp(20px, 4vw, 52px) * -1);
padding: 4px 0 12px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 77, 151, 0.45) transparent;
}
.mys-reviews-track,
.mys-reviews-set {
display: flex;
align-items: flex-start;
gap: 16px;
width: max-content;
}
.mys-reviews-track {
animation: mys-home-review-scroll 95s linear infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
will-change: transform;
}
.mys-reviews-viewport:hover .mys-reviews-track,
.mys-reviews-viewport:focus .mys-reviews-track,
.mys-reviews-viewport:focus-within .mys-reviews-track {
animation-play-state: paused;
}
.mys-home-reviews .mys-review {
flex: 0 0 clamp(18rem, 30vw, 20rem);
padding: 20px;
border: 1px solid rgba(255, 77, 151, 0.16);
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px rgba(76, 31, 53, 0.08);
}
.mys-home-reviews .mys-review-stars {
margin: 0 0 8px;
color: #e39a00;
font-size: 1rem;
letter-spacing: 0.08em;
}
.mys-home-reviews blockquote,
.mys-home-reviews blockquote p {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
line-height: 1.5;
}
/* WordPress replaces unsupported emoji with an image in some Safari builds.
Without core emoji CSS, Kelli's final heart uses its natural image size and
stretches every equal-height review card hundreds of pixels. */
.mys-review-emoji {
display: inline-block;
width: 1em;
height: 1em;
overflow: hidden;
font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
font-size: 1em;
line-height: 1;
vertical-align: -0.1em;
}
.mys-review-emoji img.emoji,
.mys-review-emoji img.wp-smiley,
.mys-home-reviews img.emoji,
.mys-home-reviews img.wp-smiley {
display: inline !important;
width: 1em !important;
height: 1em !important;
max-width: 1em !important;
max-height: 1em !important;
margin: 0 0.07em !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
object-fit: contain !important;
vertical-align: -0.1em !important;
}
.mys-home-reviews cite {
display: block;
margin-top: 12px;
color: #6a5b62;
font-size: 0.78rem;
font-style: normal;
}
.mys-home-reviews .mys-review .mys-disclaimer {
margin: 12px 0 0;
padding: 10px 12px;
border-left: 3px solid rgb(255, 77, 151);
background: #fff7fb;
font-size: 0.72rem;
line-height: 1.4;
}
.mys-home-reviews__link {
margin-top: 4px;
}
.mys-home-reviews__link a {
color: rgb(255, 77, 151);
font-weight: 700;
}
.mys-home-reviews > .mys-disclaimer {
margin-top: 12px;
color: #6a5b62;
font-size: 0.78rem;
line-height: 1.45;
}
@keyframes mys-home-review-scroll {
to { transform: translate3d(calc(-50% - 8px), 0, 0); }
}
@media screen and (max-width: 600px) {
.mys-home-reviews {
padding: 30px 18px 24px;
}
.mys-home-reviews h2 {
font-size: 1.8rem;
}
.mys-home-reviews__lead {
font-size: 0.95rem;
line-height: 1.4;
}
.mys-original-reviews-widget {
height: 447px;
margin-top: 18px;
}
.mys-reviews-viewport {
margin: 18px -18px 0;
padding-bottom: 8px;
}
.mys-home-reviews .mys-review {
flex-basis: min(82vw, 19rem);
padding: 18px;
}
.mys-home-reviews__link {
margin-top: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.mys-reviews-track { animation: none; }
.mys-reviews-set[aria-hidden="true"] { display: none; }
}
/* Compact maintained footer. The words stay; the wasted vertical space does
not. Legal copy becomes two readable columns on a wide screen and one on a
phone. */
.mys-home-footer {
padding: 42px clamp(20px, 4vw, 52px) 28px;
border-top: 1px solid rgba(29, 30, 32, 0.1);
background: #fff;
color: #1d1e20;
font-family: var(--body-font-family, Lato, sans-serif);
}
.mys-home-footer .mys-footer__inner {
max-width: 1160px;
margin: 0 auto;
}
.mys-home-footer .mys-footer__brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
}
.mys-home-footer .mys-footer__wordmark {
color: rgb(255, 77, 151);
font-size: 30px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
.mys-home-footer .mys-footer__social {
display: flex;
gap: 14px;
color: rgb(255, 77, 151);
}
.mys-home-footer .mys-footer__social a {
display: inline-flex;
color: inherit;
}
.mys-home-footer .mys-footer__cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 24px;
margin-bottom: 30px;
}
.mys-home-footer .mys-footer__col h3 {
margin: 0 0 10px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mys-home-footer .mys-footer__col ul,
.mys-home-footer .mys-footer__policies {
list-style: none;
margin: 0;
padding: 0;
}
.mys-home-footer .mys-footer__col li {
margin-bottom: 6px;
font-size: 0.88rem;
line-height: 1.4;
}
.mys-home-footer a {
color: #1d1e20;
text-decoration: none;
}
.mys-home-footer a:hover,
.mys-home-footer a:focus-visible {
color: rgb(255, 77, 151);
text-decoration: underline;
}
.mys-home-footer .mys-footer__sub {
margin-top: 6px;
padding-left: 14px;
}
.mys-home-footer .mys-footer__phone {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.mys-home-footer .mys-footer__phone-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.mys-home-footer .mys-footer__phone a {
font-weight: 700;
}
.mys-home-footer .mys-footer__phone span {
color: #626466;
font-size: 0.78rem;
}
.mys-home-footer .mys-footer__legal {
column-count: 2;
column-gap: 32px;
padding-top: 18px;
margin-bottom: 18px;
border-top: 1px solid rgba(29, 30, 32, 0.1);
}
.mys-home-footer .mys-footer__legal p {
break-inside: avoid;
margin: 0 0 6px;
color: #5f6163;
font-size: 0.76rem;
line-height: 1.45;
}
.mys-home-footer .mys-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 18px;
border-top: 1px solid rgba(29, 30, 32, 0.1);
}
.mys-home-footer .mys-footer__copy {
margin: 0;
color: #5f6163;
font-size: 0.76rem;
}
.mys-home-footer .mys-footer__policies {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
}
.mys-home-footer .mys-footer__policies a {
color: #5f6163;
font-size: 0.76rem;
}
@media screen and (max-width: 700px) {
.mys-home-footer .mys-footer__brand,
.mys-home-footer .mys-footer__bottom {
align-items: flex-start;
flex-direction: column;
}
.mys-home-footer .mys-footer__legal {
column-count: 1;
}
}